section.noresults {
/*	display: none;*/
}

ul.grid {
	position: relative;
	margin-bottom: 20px;
}

ul.grid.bordered {
	padding: 0px;
	border: 0.8px solid var(--bordercolor);
	background-color: var(--backgroundcolor);
}

ul.grid > * {
	position: relative;
}

ul.grid > * {}

ul.grid > * > div {}

ul.grid > .header {
	background-color: var(--gridheadercolor);
}

ul.grid > .header > div > span {}

ul.grid > .header > div > span > span {
	font-family: 'ptrootbold',Arial,Helvetica,freesans,sans-serif;
	color: #4a6d86;
}

ul.grid > .header > div > span > span.right > span,
ul.grid > .header > div > span > span:not(.right) {
}

ul.grid > * > div > span > span.right > span,
ul.grid > * > div > span > span:not(.right) {
	vertical-align: top;
	min-height: 20px;
	overflow: hidden;
	float: left;
	display: block;
	border-left: 0.8px solid transparent;
}

ul.grid > * > div > span > span.right > span,
ul.grid.bordered > * > div > span > span:not(.right) {
	border-left-color: var(--bordercolor);
}

ul.grid > * > div span {
	vertical-align: top;
}

ul.grid > * > div > span > span > span.icon {
	vertical-align: top;
}

/*.grid > *:not(.header) > div > span > span.right > span:hover,*/
/*.grid > *:not(.header) > div > span > span:not(.right):hover {*/
/*	background-color: rgba(0,0,0,0.05);*/
/*}*/

ul.grid > * > div > span > span.right {
	border-left: 0.8px transparent;
}

ul.grid > * > div > span > span.right > span,
ul.grid > * > div > span > span:not(.right) {
	padding: 6px 5px;
}

ul.grid > * > div.overflow > span > span {
	height: auto;
	min-height: 20px;
	word-wrap: break-word;
}

ul.grid > * > div:not(.overflow) > span > span {
	white-space: nowrap;
	line-height: 20px;
}
	
ul.grid > * > div:not(.overflow) {
	height: 30px;
}

ul.grid > * > div > span > span.right {
	margin-right: 0px;
}

ul.grid > * > div > span > span:first-child {
	border-left-color: transparent !important;
}


ul.grid > * > div > span > span > img.region {
	margin-right: 5px;
}

ul.grid > * {
	vertical-align: top;
	line-height: 20px;
	border-bottom: 0.8px solid var(--bordercolor);
}

ul.grid > .header { margin-top: 0px; background-color: var(--offwhite); }

ul.grid > *:first-child {}

ul.grid > *:last-child { border-bottom: none; }


ul.grid.bordered > .header ~ li {}

ul.grid.bordered > .perfect { background-color: rgba(0,255,0,0.1); }

ul.grid.bordered > :hover:not(.header):not(.perfect):not(.deleted) {
	color: #333;
	background-color: #f9f9f9;
}

ul.grid.bordered > .selected {
	color: #fff;
	background-color: #06a;
}

ul.grid.bordered > *:hover:not(.header) .down,
ul.grid.bordered > *:hover:not(.header) .up {
	color: #fff;
}

ul.grid.bordered > li {
	overflow: hidden;
}

ul.grid.bordered > li.selected span.icon,
ul.grid.bordered > li:hover:not(.header):not(.perfect) span.icon {
	
}

ul.grid.bordered > li:hover:not(.header):not(.perfect):not(.deleted) img:not(.region) {
	-webkit-filter: invert(100%); filter: invert(100%);
}

ul.grid.bordered > li:last-child {
	border-bottom: none;
}

ul.grid.bordered > li > div > span > span:not(.right) {
	
}

ul.grid.bordered > li.deleted {
	background-color: rgba(255,0,0,0.02);
	color: #f00;
}

ul.grid > li > div > span > span:first-child {
	border-left: none;
}

/* filtering in grid view */

ul.grid > li span.column span.note {
	color: #aaa;
	margin-left: 5px;
}

span.export {
	position: absolute;
	width: 20px;
	height: 20px;
	right: 5px;
	top: 0px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
}

span.filter {
	position: absolute;
	width: 12px;
	height: 12px;
	right: 5px;
	top: 10px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
}

span.watch {
	position: absolute;
	width: 20px;
	height: 20px;
	left: 5px;
	top: 0px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
}

span.filter.none {
	background-image: url('/icons/icon_equal@3x.png');
}

span.export {
	background-image: url('/images/icon_grid.png');
}

span.watch {
	background-image: url('/icons/icon_circle@3x.png');
}

span.watch.on {
	background-image: url('/icons/icon_circle_fill@3x.png');
}

span.filter.up {
	background-image: url('/icons/icon_voteup.png');
}

span.filter.down {
	background-image: url('/icons/icon_votedown.png');
}

span.icon.edit {
	position: absolute;
	right: 2px;
	top: 2px;
}

/* Pager */

ul.pager_info {
	background-color: #fff;
	border: 1px solid transparent;
	display: inline-block;
	padding: 2px;
	float: right;
}

ul.pager_info > li {
	display: inline-block;
	margin-right: 2px !important;
	border-right: 1px solid transparent;
}

ul.pager_info > li.pageno.selected > span {
	border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;
	background-color: #309C96;
	color: #fff;
}

ul.pager_info > li > span {
	padding: 5px 8px 6px 8px;
	width: 20px;
	line-height: 20px;
	cursor: pointer;
	text-align: center;
	margin-right: 2px;
}

ul.pager_info > li.control { position: relative; top: 5px; }

ul.pager_info > li.control > span { padding: 5px; }

ul.pager_info > li span.icon {
	width: 21px;
	height: 21px;
}

ul.pager_info > li:not(.selected):hover > span {
	border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px;
	background-color: #52C9C3;
	color: #fff;
}

ul.pager_info > li:last-child {
	margin-right: 0px !important;
	border-right: none;
}

ul.pager_info > li:last-child > span {
	margin-right: 0px;
}

.grid > *.locked > div {
	background-color: #fafafa;
}

section[data-component='repeater'] + section[data-component='pager'] {
	margin-top: 10px !important;
}

@media (prefers-color-scheme: light) {
    :root {
		ul.grid.bordered > :hover:not(.header):not(.perfect):not(.deleted) {

        }
	}
}

@media (prefers-color-scheme: dark) {
    :root {

		ul.grid.bordered > :hover:not(.header):not(.perfect):not(.deleted) {
			color: #000;
		}

		ul.grid.bordered > :hover:not(.header):not(.perfect):not(.deleted) span.icon {
            -webkit-filter: invert(0%); filter: invert(0%);
        }
		
	}
}