/*
 * =============================
 * @author: 	Peter Slagter & Geert Romijn
 * @module: 	mod_library2
 * @about: 		Main CSS-file for the new library (2009) module
 * =============================
 */

/*
	Resets
	--------------------------------------------------
*/

/* Lists */
div.dg-header ul,
div.datagrid dl,
td.dg-rowactions ul,
ol.dg-table-footer,
form.dg-filter ul,
div.dg-nav-page ol,
ul.dg-list {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
}

/* Margin */
h2.dg-title, h3.dg-filtertitle,
div.datagrid fieldset {
	margin: 0;
}

/* Padding */
label.dg-label,
table.dg-table label,
div.datagrid fieldset {
	padding: 0;
}

/* Lineheight */
.datagrid h2, .datagrid h3, .datagrid p, .datagrid table {
	line-height: 1;
}

/* Border */
div.datagrid fieldset {
	border: 0;
}

/*
	Defaults
	--------------------------------------------------
*/

/** Checkboxes */
.dg-checkbox {
	display: block;
	width: 12px;
	height: 12px;
	margin-left: -8px;
	overflow: hidden;
	cursor: pointer;
	background: transparent url(../img/dg-checkboxes.svg) no-repeat 0 0;
}

tr.selected .dg-checkbox,
.dg-checkbox-checked {
	background-position: 0 -23px;
}

.dg-checkbox-indeterminate {
	background-position: 0 -48px;
}

.dg-head-checkbox {
	margin: 10px 0 0 6px;
}

/*
	Datagrid
	--------------------------------------------------
*/

div.datagrid {
	position: relative;
	margin-bottom: 1.6em;
	color: #444;
}

/*
	Datagrid header
	--------------------------------------------------
*/

div.dg-header {
	width: 100%; /* hasLayOut*/
	padding: 7px 0;
	overflow: hidden;
}

h2.dg-title {
	float: left;
	padding: 3px 0 0 14px;
}

h2.dg-title img.icon {
	margin-right: 5px;
	margin-left: -8px;
}

/* Actions */
ul.dg-view-selector,
ul.dg-tools {
	float: right;
	margin-right: 10px;
	list-style: none;
}

ul.dg-view-selector li,
ul.dg-tools li {
	float: left;
	clear: right;
	width: 23px;
	height: 22px;
	background: url(../img/dg-sprite.png?v2) no-repeat;
	cursor: pointer;
}

ul.dg-tools li {
	clear: none;
}

div.dg-header ul.dg-view-selector {
	margin-left: 8px;
}

ul.dg-view-selector li a,
ul.dg-tools li a {
	display: block;
	height: 100%;
	text-indent: -999em;
}

/* View selector */
ul.dg-view-selector li.dg-listview {
	width: 24px;
	background-position: -1px 0;
}

ul.dg-view-selector li.dg-listview:hover {
	background-position: -143px 0;
}

ul.dg-view-selector li.dg-listview-active,
ul.dg-view-selector li.dg-listview-active:hover {
	background-position: -71px 0;
}

ul.dg-view-selector li.dg-thumbsview {
	background-position: -25px 0;
}

ul.dg-view-selector li.dg-thumbsview:hover {
	background-position: -167px 0;
}

ul.dg-view-selector li.dg-thumbsview-active,
ul.dg-view-selector li.dg-thumbsview-active:hover {
	background-position: -96px 0;
}

ul.dg-view-selector li.dg-metaview {
	background-position: -48px 0;
}

ul.dg-view-selector li.dg-metaview:hover {
	background-position: -190px 0;
}

ul.dg-view-selector li.dg-metaview-active,
ul.dg-view-selector li.dg-metaview-active:hover {
	background-position: -119px 0;
}

/* Datagrid tools */
div.dg-header ul.dg-tools {
	margin: 0 5px;
}

ul.dg-tools li.dg-reload {
	width: 24px;
	background-position: -1px -22px;
}

ul.dg-tools li.dg-reload:hover {
	background-position: -105px -22px;
}

ul.dg-tools li.dg-reload-active {
	width: 24px;
	background: url(../img/loader-bg.gif?v3) no-repeat;
}

ul.dg-tools li.dg-fullscreen {
	background-position: -28px -22px;
}

ul.dg-tools li.dg-fullscreen:hover {
	background-position: -132px -22px;
}

ul.dg-tools li.dg-fullscreen-active {
	background-position: -157px -47px;
}

ul.dg-tools li.dg-select-all {
	background-position: -265px -2px;
}

ul.dg-tools li.dg-select-all:hover {
	background-position: -265px -24px;
}

ul.dg-tools li.dg-reset-filters {
	background-position: -295px -2px;
}

ul.dg-tools li.dg-reset-filters:hover {
	background-position: -295px -25px;
}

ul.dg-tools li.dg-export {
	background-position: -54px -22px;
}

ul.dg-tools li.dg-export:hover {
	background-position: -158px -22px;
}

ul.dg-tools li.dg-edit {
	background-position: -80px -22px;
}

ul.dg-tools li.dg-edit:hover {
	background-position: -184px -22px;
}

ul.dg-tools li.dg-edit-active {
	background-position: -70px -47px;
}

ul.dg-tools li.dg-extra {
	background-position: -211px -22px;
}

ul.dg-tools li.dg-extra:hover {
	background-position: -236px -22px;
}

ul.dg-tools li.dg-extra a {
	opacity: .85;
}

ul.dg-tools li.dg-extra a:hover {
	opacity: 1;
}

/*
	Container for optional developer defined components
	--------------------------------------------------
*/

div.dg-optionals {
	white-space: nowrap;
	overflow: hidden;
}

/*
	Filter
	--------------------------------------------------
*/

/* Defaults */
.dg-label,
div.dg-popover  {
	position: absolute;
	top: 0;
	left: 0;
}

.dg-label,
span.dg-cs-button,
div.dg-cs-picker button.dg-cs-reset,
a.dg-filter-remove,
a.dg-filter-reset,
span.dg-col-move {
	background: url(../img/dg-sprite.png?v2) repeat-x 0 -219px;
}

/* Container */
div.dg-filter-container {
	position: relative;
	float: left;
	border-bottom: 1px solid #e5e5e5;
	background-color: rgba(0, 0, 0, 0.05);
	width: 2000px; /* to make sure the filters don't wrap */
	z-index: 21; /* z-index fix for IE */
}

div.dg-filter-mixed {
	height: 67px;
}

/* Filter forms */
form.dg-filter,
div.dg-filter {
	position: relative;
	float: left;
	height: 100%;
}

h3.dg-filtertitle {
	position: relative;
	line-height: 34px;
	height: 34px;
	width: 100%;
	border-right: 1px solid transparent;
	cursor: pointer;
	text-indent: 14px;
	font-size: 12px;
}

.dg-col-title {
    display: inline-block;
    overflow: hidden;
    max-width: 100%;
    text-indent: 0;
    text-overflow: ellipsis;
}

.dg-filtertitle:not(.dg-ft-unsortable) .dg-col-title {
	padding-right: 10px;
	background: transparent url(../img/table-sort-sprite.svg) no-repeat right 0;
	background-size: 10px 200px;
}

h3.dg-filtertitle:hover .dg-col-title {
    background-position: right -50px;
}

h3.dg-ft-unsortable {
	cursor: default;
    background-image: none;
}

.dg-filter-container:hover h3.dg-filtertitle {
	border-color: #e5e5e5;
}

div.dg-filter-mixed div.dg-filter h3.dg-filtertitle {
	position: absolute;
	overflow: hidden;
	left: 0;
	bottom: 0;
	width: 100%;
	text-overflow: ellipsis;
}

span.dg-col-title,
h3.dg-filtertitle a {
    color: #595959;
}

h3.dg-filtertitle a {
	display: block;
	text-decoration: none;
	margin-right: 10px;
    height: 34px;
}

h3.dg-filtertitle.dg-ft-up .dg-col-title,
h3.dg-filtertitle.dg-ft-down .dg-col-title,
h3.dg-filtertitle:hover .dg-col-title {
    color: #222;
    text-decoration: none;
}

h3.dg-filtertitle.dg-ft-down .dg-col-title,
h3.dg-filtertitle.dg-ft-up:hover .dg-col-title {
	background-position: right -100px;
}

h3.dg-filtertitle.dg-ft-up .dg-col-title,
h3.dg-filtertitle.dg-ft-down:hover .dg-col-title {
	background-position: right -150px;
}

.dg-ft-desc h3.dg-ft-up:hover .dg-col-title {
	background-position: right -199px;
}

form.dg-ft-moving h3 a,
form.dg-ft-moving h3 {
	background: #fff;
	opacity: .75;
}

h3.dg-filter a {
	display: block;
	color: #222;
	text-decoration: underline;
}

form.dg-filter-drop span.dg-col-resize,
div.dg-filter-drop span.dg-col-resize {
	width: 5px;
	background-color: #7f7fbf;
}

form.dg-filter fieldset {
	height: 19px; /* layout setting for IE */
	padding: 7px 1px 7px 25px;
	border: 0;
}

.dg-label {
	top: 8px;
	left: 14px;
	width: 17px;
	height: 17px;
	font-weight: bold;
	color: #222;
	text-indent: -999em;
	background-position: 0 -148px;
	z-index: 1;
}

.dg-label-show {
	text-indent: 22px;
	font-size: 12px;
	line-height: 20px;
}

span.dg-label {
	width: 22px;
	overflow: hidden;
	cursor: pointer;
	background-position: -27px -148px;
}

span.dg-label:hover {
	background-position: -51px -148px;
}

form.dg-filter .dg-filter-active {
	background-position: -75px -148px;
}

span.dg-filter-active {
	text-indent: 25px;
	font-weight: normal;
}

form.dg-filter fieldset div.dg-filterinput-container {
	position: absolute;
	left: 14px;
	right: 14px;
	top: 7px;
}

form.dg-filter input {
	box-sizing: border-box;
	width: 100%;
	padding: 2px 2px 2px 17px;
	height: 19px;
	font-size: 11px;
	font-family: Verdana, Geneva, Helvetica, sans-serif;
	border: 1px solid #e5e5e5;
	background-color: #fff;
	background-position: -99px -72px;
}

form.dg-filter input:focus,
form.dg-filter input:hover {
	background-color: #fff;
}

a.dg-filter-remove,
a.dg-filter-reset {
	position: absolute;
	right: 17px;
	top: 10px;
	width: 13px;
	height: 13px;
	overflow: hidden;
	text-indent: -999em;
	background-position: -30px -77px;
}
a.dg-filter-remove.hidden,
a.dg-filter-reset.hidden {
	display:none;
}

a.dg-filter-reset {
	background-position: -193px -83px;
}

div.dg-popover {
	left: -999em;
	top: -999em;
	right: auto;
	max-width: 320px;
	overflow: hidden;
	padding: 1em 20px;
	border: 1px solid #ddd;
	border-radius: 4px;
	z-index: 200;
	background: #fff;
    box-shadow: 0 7px 11px -7px rgba(0, 0, 0, 0.2);
}

div.dg-popover.dg-popover--hasOverflow {
	padding: 0 1em 20px;
}

.dg-popover--hasOverflow > div.field:only-of-type {
	overflow: auto;
	height: calc(100% - 4em);
	width: auto;
	margin: 0 -11px 1em;
	padding: 15px 20px 10px;
	border-bottom: 1px solid #e8e7e8;
}

.dg-popover--hasOverflow button[type="submit"] {
	margin-left: 0.8em;
}

.dg-popover div.field_sep:last-of-type {
	display: none;
}

div.datagrid-hasjs form.dg-filter:hover div.dg-popover {
	left: -999em;
	top: -999em;
}

form.dg-filter:hover div.dg-popover,
form.dg-filter-popover fieldset div.dg-popover,
div.datagrid-hasjs form.dg-filter-popover:hover div.dg-popover {
	left: 0;
	top: 45px;
}

form.dg-filter ul input {
	width: auto;
}

/* Popover contents */
form.dg-filter fieldset div.dg-popover div {
	position: static;
}

div.dg-popover label.field {
	float: none;
	width: auto !important;
}

div.dg-popover div.fieldinput {
	margin: 0 !important;
}

div.dg-popover input.proFormText,
div.dg-popover input.proFormDate,
div.dg-popover input.proFormTime {
	width: auto;
	background: #fff;
	border: 1px solid #aaa;
}

div.dg-popover button {
    margin-top: 1em;
}

/* Datepicker span elements shouldn't wrap over 2 lines */
#from, #to {
	white-space: nowrap;
}

/* setting z-index for IE */
div.dg-filter-container form.nth-child1,
div.dg-colselector {
	z-index: 20;
}

div.dg-filter-container form.nth-child2 {
	z-index: 19;
}

div.dg-filter-container form.nth-child3 {
	z-index: 18;
}

div.dg-filter-container form.nth-child4 {
	z-index: 17;
}

div.dg-filter-container form.nth-child5 {
	z-index: 16;
}

div.dg-filter-container form.nth-child6 {
	z-index: 15;
}

div.dg-filter-container form.nth-child7 {
	z-index: 14;
}

div.dg-filter-container form.nth-child8 {
	z-index: 13;
}

div.dg-filter-container form.nth-child9 {
	z-index: 12;
}

div.dg-filter-container form.nth-child10 {
	z-index: 11;
}

/* col selector */
div.dg-colselector {
	position: absolute;
	right: 5px;
	bottom: 6px;
	width: 24px;
	height: 18px;
}

div.dg-colselector:hover div.dg-cs-picker {
	right: 10px;
}

span.dg-cs-button {
	height: 100%;
	width: 100%;
	display: block;
	cursor: pointer;
	text-indent: -999em;
	background-position: -96px -52px;
}

div.dg-colselector-active span.dg-cs-button,
div.dg-colselector:hover span.dg-cs-button {
	background-position: 0 -76px;
}

div.dg-cs-picker {
	width: 18em;
	padding: 5px 20px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 7px 11px -7px rgba(0, 0, 0, 0.2);
}

div.dg-cs-picker form {
	padding: 5px 0;
	border-left: 0;
	border-top: 0;
}

div.dg-cs-picker fieldset {
	margin: 0;
	border: 0;
}

div.dg-cs-picker button {
	margin: 5px 0 0 0;
}

div.dg-cs-picker button.dg-cs-reset {
	margin: 0;
	width: 100%;
	padding: 0 0 0 8px;
	border: 0;
	line-height: 20px;
	color: #4091bf;
	background-position: -193px -80px;
	background-repeat: no-repeat;
}


div.dg-cs-picker button.dg-cs-reset:hover {
	box-shadow: none;
}

div.dg-cs-picker label {
	display: block;
	padding: 0 0 5px 0;
}

div.dg-cs-picker input {
	margin-right: 3px;
}

/*
	Column resizing and moving
	--------------------------------------------------
*/

span.dg-col-title {
	white-space: nowrap;
}

span.dg-col-resize,
span.dg-col-move {
	position: absolute;
	display: none;
	text-indent: -999em;
	z-index: 400;
}

div.datagrid-hasjs span.dg-col-move,
div.datagrid-hasjs span.dg-col-resize {
	display: block;
}

span.dg-col-resize {
	right: -3px;
	bottom: 0;
	height: 34px;
	width: 20px;
	cursor: e-resize;
	background: transparent;
}

span.dg-col-move {
	top: 0;
	left: 0;
	width: 20px;
	height: 34px;
	cursor: move;
    opacity: 0;
	background-position: -45px -71px;
}

.dg-filter-container:hover span.dg-col-move {
    opacity: 1;
}

/*
	Datagrid loading
	--------------------------------------------------
*/

span.dg-wait {
	display: none;
	position: absolute;
}

/*
	Datagrid page navigation & scrollbar
	--------------------------------------------------
*/

div.dg-nav-page {
	padding: 0.75em 15px;
	line-height: 1;
	overflow: hidden;
	zoom: 1;
}

div.dg-np-bottom {
	clear: both;
	border-bottom: 1px solid #e5e5e5;
}

div.dg-nav-page ol {
	float: left;
	position: relative;
	left: 50%;
	overflow: visible;
}

div.dg-nav-page li {
	position: relative;
	right: 50%;
	float: left;
	margin-right: 2px;
}

div.dg-nav-page li:last-child {
    margin-right: 0;
}

div.dg-nav-page li a,
div.dg-nav-page li span {
	display: block;
	padding: 0 5px;
	min-width: 14px;
    border-radius: 2px;
	text-align: center;
	color: #757575;
	text-decoration: none;
	line-height: 24px;
}

div.dg-nav-page li a:hover {
	color: #000;
    background-color: rgba(0, 0, 0, 0.05);
}

div.dg-nav-page li.current a {
	color: #fff;
	background: #4091bf;
}

div.dg-nav-page li.dg-np-sep span {
	box-shadow: none;
	border-color: #f7f7f7;
	background-image: none;
}


/*
	Datagrid scroll navigation & scrollbar
	--------------------------------------------------
*/

/* Wrapper */
div.dg-contentwrap {
	width: auto;
	overflow-x: auto;
	overflow-y: hidden;
	border-bottom: 1px solid #e5e5e5;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)),
    linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)),
    linear-gradient(to left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-color: #fff;
    background-size: 4em 100%, 4em 100%, .5em 100%, .5em 100%;
    background-attachment: local, local, scroll, scroll; /** Opera doesn't support this in the shorthand */
}

div.dg-content {
	position: relative;
	clear: left;
	overflow: hidden;
	min-height: 52px;
}

span.dg-scrollhandler,
a.dg-arrow,
span.dg-scroll-info {
	position: absolute;
	right: 0;
	top: 0;
	overflow: hidden;
	background: #f7f7f7 url(../img/dg-scrollbar.png?v2) no-repeat 0 0;
}

span.dg-scrollhandler,
a.dg-arrow,
span.dg-scroll-info {
	display: block;
	cursor: pointer;
}

div.dg-nav-scroll {
	position: relative;
	float: right;
	width: 16px;
	height: 100%;
	background: #f7f7f7 url(../img/dg-scrollbar.png?v2) repeat -32px 0;
	overflow: visible;
}

span.dg-scrollhandler {
	top: 31px;
	right: 3px;
	width: 10px;
	height: 72px;
	min-height: 30px;
	z-index: 100;
	border-radius: 2px;
	background: #b0b3b7;
}

.dg-nav-scroll:hover span.dg-scrollhandler {
	background: #4091bf;
	background: -moz-linear-gradient(left, #3587b8 0%, #4091bf 100%);
	background: -webkit-linear-gradient(left, #3587b8 0%, #4091bf 100%);
	background: linear-gradient(to right, #3587b8 0%, #4091bf 100%);
}

span.dg-scroll-info {
	right: 20px;
	height: 14px;
	padding: 2px 15px 2px 5px;
	line-height: 14px;
	white-space: nowrap;
	border-left: 1px solid #808080;
	background-color: transparent;
	background-position: right top;
	cursor: default;
	z-index: 150;
	visibility: hidden;
}

a.dg-arrow {
	width: 16px;
	height: 14px;
	text-indent: -999em;
}

a.top {
	height: 15px;
	background-position: -16px -28px;
}

a.top:hover {
	background-position: -16px -84px;
}

a.bottom {
	top: 15px;
	background-position: -16px -43px;
}

a.bottom:hover {
	background-position: -16px -99px;
}

a.down {
	top: auto;
	bottom: 0;
	background-position: -16px -15px;
}

a.down:hover {
	background-position: -16px -71px;
}

a.up {
	height: 15px;
	top: auto;
	bottom: 14px;
	background-position: -16px 0;
}

a.up:hover {
	background-position: -16px -56px;
}

/*
	Datagrid table
	--------------------------------------------------
*/

td.dg-rowactions span.dg-cm-handler {
	background: url(../img/dg-sprite.png?v2) no-repeat
}


/* defaults */
table.dg-table {
	width: 100%;
	table-layout: fixed;
	*table-layout: auto;
}

table.dg-table th,
table.dg-table td {
	height: 18px;
	padding: 0.75em 10px 0.75em 14px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	vertical-align: middle;
}

table.dg-table td:has(.icon:last-child) {
    text-overflow: unset;
}

table.dg-table td.align-right, .dg-table-footer .align-right {
	text-align: right;
}

table.dg-table td.align-center, .dg-table-footer .align-center {
	text-align: center;
}

table.dg-table td.dg-rowactions {
	padding: 2px 4px;
}

table.dg-table tr:last-child td {
    border-bottom: 0;
}

h3.align-right a {
	text-align: right;
}

/* table columns */
table.dg-table tbody tr:hover td {
	background-color: #edf4f9;
}

table.dg-table tbody tr.selected td {
	background-color: #ffffdf;
}

/* table footer */
ol.dg-table-footer {
	height: 19px;
	line-height: 19px;
	border-top: 1px solid #e5e5e5;
}

ol.dg-table-footer li {
	float: left;
	height: 19px;
	padding: 1px 0;
	text-indent: 5px;
	font-weight: bold;
	color: #666;
}

ol.dg-table-footer li span {
	padding: 2px 10px 2px 14px;
}

/* actions & contextmenu */
td.dg-rowactions ul {
	overflow: visible;
	text-align: right;
}

td.dg-rowactions li {
	display: inline-block;
	margin-left: 4px;
}

td.dg-rowactions a {
	display: block;
	width: 18px;
	padding: 5px 3px;
	border-radius: 2px;
	text-align: center;
	opacity: .7;
}

td.dg-rowactions a:hover {
	opacity: 1;
	background-color: #fff;
}

td.dg-rowactions li.dg-contextmenu,
td.dg-rowactions li.dg-contextmenu li {
	visibility: visible;
}

td.dg-rowactions li.dg-contextmenu {
	background: transparent; /* hide background in tabelview */
}

div.datagrid-hasjs li.dg-contextmenu,
td.dg-rowactions li li,
td.dg-rowactions ul ul {
	position: static;
	width: auto;
	height: auto;
	float: none;
	padding: 0;
}

td.dg-rowactions li li {
	height: 100%;
}

.dg-rowactions .icon {
	height: 14px;
    width: auto !important;
    max-width: none;
    vertical-align: text-bottom;
}

li.dg-contextmenu div,
div.dg-contextmenu {
	position: absolute;
	left: -999em;
	top: 5px;
	z-index: 3000;
	margin: 0;
	padding: 10px 0;
	border: 1px solid #ddd;
	border-collapse: separate;
	white-space: nowrap;
	color: #fff;
	list-style: none;
	cursor: default;
	background: #fff;
	border-radius: 4px;
	box-shadow: var(--mi-shdw-4, 0 6px 11px -3px #00000040);
}

li.dg-contextmenu:hover div {
	left: auto;
	right: 0;
	top: auto;
}

div.dg-contextmenu .first {
	padding-left: 0;
}

li.dg-contextmenu span.dg-cm-handler {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: -999em;
	background-position: -213px -2px;
}

ul.dg-list span.dg-cm-handler {
	position: absolute;
	top: 3px;
	text-indent: -999em;
	display: block;
	width: 16px;
	height: 16px;
	padding: 0;
	background: #eee url(../img/dg-sprite.png?v2) no-repeat -213px -2px;
}

ul.dg-list li:hover div.dg-contextmenu {
	top: 15px;
	left: 0;
	z-index: 999;
}

div.datagrid-hasjs div.dg-contextmenu,
div.datagrid-hasjs ul.dg-list li:hover div.dg-contextmenu {
	left: -999em;
}

ul.dg-list li li {
	position: static;
	height: auto;
	float: none;
	padding: 0;
}

li.dg-contextmenu img,
div.dg-contextmenu img {
	margin-inline: -5px 11px;
	vertical-align: middle;
	opacity: .8;
}

div.datagrid-hasjs span.dg-cm-handler {
	display: none;
}

li.dg-contextmenu ul ul,
div.dg-contextmenu ul {
	margin: 0;
	list-style: none;
}

li.dg-contextmenu li {
	background-image: none;
}

div.dg-contextmenu ul li {
	width: auto;
	text-align: left;
	border: 0;
	white-space: nowrap;
}

li.dg-contextmenu li a,
div.dg-contextmenu li a {
	display: block;
	padding: 5px 20px;
	color: #000;
	text-decoration: none;
}

li.dg-contextmenu li a:hover,
div.dg-contextmenu li a:hover {
	background-color: #eee;
}

li.dg-contextmenu li a:hover img,
div.dg-contextmenu li a:hover img {
	opacity: 1;
}

/*
	Datagrid List views
	--------------------------------------------------
*/

/* Filter style adjustments */
div.datagrid-list form.dg-filter {
	height: 34px;
	width: 150px;
    margin: 0;
	padding: 34px 3px 0 0;
	border-right: 1px solid #e5e5e5;
}

div.datagrid-list h3 {
	position: absolute;
	top: 0;
	left: 0;
	text-indent: 5px;
}

div.datagrid-list form.dg-filter fieldset {
	height: auto;
}

div.datagrid-list label.dg-label {
	top: 42px;
	left: 6px;
}

div.datagrid-list a.dg-filter-remove,
div.datagrid-list a.dg-filter-reset {
	top: 44px;
	right: 9px;
	left: auto;
}

div.datagrid-list form.dg-filter fieldset div.dg-filterinput-container {
	top: 41px;
	left: 5px;
	right: 6px;
}

div.datagrid-list span.dg-label {
	top: 43px;
	left: 6px;
}

/* defaults for both views */
ul.dg-list {
	margin: 2px 0 0 0;
	overflow: hidden;
}

ul.dg-list li {
	position: relative;
	float: left;
	width: 120px;
	height: 160px;
	margin: 5px;
	border: 3px solid #f6f6f6;
    border-radius: 6px;
	text-align: center;
}

ul.dg-list li:hover,
ul.dg-list li:hover .dg-image {
	border-color: #c9e7f7;
}

ul.dg-list li.selected {
	border-color: #016ea7;
}

ul.dg-list li.dg-item--temporary:before,
.dg-item--temporary td:first-child:before {
	content: 'Temporary';
	height: 16px;
	width: 16px;
	text-indent: -999em;
	background: url(/ui/uibase/icons/svg/garbage-time.svg) no-repeat center / 1em;
}

/** Grid layout */
ul.dg-list li.dg-item--temporary:before {
	position: absolute;
	inset: 5px 5px auto auto;
	display: block;
	border-radius: 4px;
	background-color: #fff;
}
/** Table layout */
.dg-item--temporary td:first-child:before {
	float: right;
}

ul.dg-list span.dg-image {
	display: block;
	width: 90px;
	height: 90px;
	margin: 10px 0 5px 15px;
    overflow: hidden;
	background: #f2f2f2;
	text-align: center;
	line-height: 88px;
}

ul.dg-list span.dg-image img {
    line-height: 0;
    text-indent: -999em;
}

ul.dg-list a {
	color: #222;
	text-decoration: none;
}

ul.dg-list dl {
    margin: 0 5px;
}

ul.dg-list dt {
	position: absolute;
	left: -999em;
}

ul.dg-list dd {
	margin-bottom: 0;
}

ul.dg-list dd.dg-filename {
	max-height: 2.4em;
	line-height: 1.2em;
	overflow: hidden;
    word-break: break-word;
}

ul.dg-list dd.dg-metainfo {
    color: #8c8c8c;
}

/* CSS for thumbnails overview */
dt.dg-filename {
	display: none;
}

/* CSS for details overview */
ul.dg-details li {
	height: auto;
	width: 315px;
	padding: 0;
	text-align: left;
}

ul.dg-details span.dg-image {
	float: left;
	margin: 5px 10px 5px 5px;
}

ul.dg-details dl {
	margin: 5px 0 0 0;
}

ul.dg-details dt {
	position: static;
	float: left;
	width: 8em;
	clear: left;
	font-weight: normal;
}

ul.dg-details dd.dg-filename {
	margin: 0 0 3px 0;
	font-weight: bold;
}

ul.dg-details dd.dg-metainfo {
	margin: 0 0 0 9em;
}

/*
	Footer
	--------------------------------------------------
*/
div.dg-footer {
	position: relative;
	height: 17px;
	padding: 5px 14px;
	overflow: hidden;
	border-bottom: 1px solid #e5e5e5;
}

div.dg-footer dt,
div.dg-footer dd {
	display: inline;
	margin: 0;
	padding: 0;
}

span.dg-resizer {
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	width: 20px;
	height: 20px;
	background: url(../img/dg-sprite.png?v2) no-repeat -121px -47px;
	text-indent: -999em;
	cursor: nw-resize;
}

/*
	.datagrid-fullscreen
	CSS for fullscreen modus of DataGrid
*/
div.datagrid-fullscreen {
	position: fixed;
	_position: absolute;
	top: 0;
	left: 0;
	height: 100% !important;
	width: 100%;
	z-index: 2000;
}

/*
	CSS for selecting items by drawing a rectangle
*/
div.dg-selection-rectangle {
	border: 2px solid #528B8B;
	background-color: #E0EEEE;
	position: absolute;
}

/*
	CSS for text attachted to cursor while dragging
*/
div.dg-cursor-attachment {
	position: absolute;
}

/*
	CSS for the insertion marker
*/
div.dg-insertion-marker {
	position: absolute;
	background-color: #205050;
}
div.dg-insertion-table {
	width: 100%;
	height: 3px;
	left: 0px;
}
div.dg-insertion-list-left {
	width: 3px;
	height: 100%;
	top: 0px;
	left: -9px;
}
div.dg-insertion-list-right {
	width: 3px;
	height: 100%;
	top: 0px;
	right: -10px;
}

/*
	CSS for icons
*/

table.dg-table td > .icon {
	margin-left: -8px;
}

/*
	No highlighting when dragging items.
*/
table.dg-table.moving tbody tr:hover td {
	background-color: inherit;
	color: inherit;
}
ul.dg-list.moving li:hover {
	border-color: #f6f6f6;
}

/*
	Searchbox:
*/
form.dg-searchbox {
	float: right;
}
form.dg-searchbox label{
	display: none;
}


form.dg-searchbox {
	width: 145px;
	margin: 0;
	padding: 0px;
}

form.dg-searchbox fieldset:focus {
	margin: 10px !important;
}

form.dg-searchbox fieldset {
	position: relative;
	height: 18px;
	margin: 0;
	padding: 0;
	width: 146px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
	background-color: #fff;
}

form.dg-searchbox.hasfocus {
	background: url(../img/quicksearch_focus.png) no-repeat;
}

form.dg-searchbox.hasfocus fieldset {
	border-color: #00a8ff;
}

form.dg-searchbox input {
	display: block;
	float: left;
	width: 143px;
	font-size: 10px;
	height: 12px;
	line-height: 12px;
	padding: 3px 0 3px 3px;
	border: 0;
    border-radius: 3px;
	color: black;
}

form.dg-searchbox input:focus {
	background-color: #fff;
}

form.dg-searchbox button {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 18px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-size: 11px;
	font-weight: normal;
	text-indent: -999em;
	line-height: 200%;
	border: 0 !important;
    background-color: transparent;
	background-image: url(../img/icon_search.svg);
	background-repeat: no-repeat;
	background-position: 50%;
    background-size: 12px;
}

/** Loader */
div.dg-reload-active {
	position: absolute;
	z-index: 900;
	top: 0;
	right: 0;
	bottom: 0;
	left: 40px; /** to prevent deselecting all checkboxes if this is turned on */
	padding-top: 5px;
	text-align: center;
}

div.dg-reload-active span {
	display: inline-block;
	padding: .5em 3.3em .5em 3em;
	border-radius: 3px;
	font-weight: bold;
	color: #000;
	background: #FFD530 url(../img/loader.svg) no-repeat calc(100% - 1.7em) 1em / 1.3em;
	box-shadow: var(--mi-shdw-2, 0 2px 6px -2px #999);
}

/*
	Rowclick
 */
tr.rowclickable {
	cursor: pointer;
}

/*
	FormElementText for inline editing
*/
form.dg-edit-form tr td {
	cursor: text;
}
input.dg-inline-text {
	width: 100%;
}
td.invalid input {
	background-color: #fee !important;
}

/*
	No results block
*/
div.no_results {
	text-align: center;
	font-weight: bold;
	margin: 50px 0 50px 0;
}

/*
	Quicklinks in optional button bar
*/

.datagrid .quicklinks {
	float: left;
	margin: 0;
	list-style: none;
	background: none;
	border: 0;
	overflow: hidden;
}

.datagrid .quicklinks li {
	display: inline-block;
	margin-left: -1px;
	zoom: 1;
	*display: inline;
}

.datagrid .quicklinkslist li img.icon {
	float: none;
	vertical-align: middle;
	margin: 0;
	padding: 0;
}

.datagrid .quicklinks a {
	display: block;
	padding: 0.25em 0.7em 0.35em;
	font-size: 11px;
	line-height: 18px;
	border: 1px solid #dcdcdc;
	text-decoration: none;
	color: #444;
	background: -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
	background: -webkit-linear-gradient(top, #ffffff 0%,#f0f0f0 100%);
	background: linear-gradient(to bottom, #ffffff 0%,#f0f0f0 100%);
}

.datagrid .quicklinks li:last-child a {
	border-radius: 0 2px 2px 0;
}

.datagrid .quicklinks .first a {
	border-radius: 2px 0 0 2px;
}

.datagrid .quicklinks .first:last-child a {
	/* In cases one button all corners rounded */
	border-radius: 2px;
}

.datagrid .quicklinks li:hover a {
	border-bottom-color: #aaa;
	box-shadow: 0 2px 2px -2px rgba(0,0,0,0.4);
	color: #000;
}