/**
 * CRUD indexes
 */

/* filters container */
main > div#CRUD-header.index > div.filters-summaries {

}
	/* consecutive filter rows */
	main > div#CRUD-header.index > div.filters-summaries:not(:first-of-type) {
		border-top: 1px solid rgba(255,255,255,.25);
	}

	/* filter container */
	main > div#CRUD-header.index > div.filters-summaries > div {
		display: inline-block;
		vertical-align: top;
		padding: 9px 10px 0px 10px;
		height: 26px;

		border-right: 1px solid rgba(255,255,255,.25);
		/* height: 100%; */
		/* position: relative; */
	}

		/* filter container when filter in use */
		main > div#CRUD-header.index > div.filters-summaries > div.in-use {
			background-color: rgba(200,200,255,.35);
			text-shadow: 1px 1px 0px black;
		}

		/* search filter container */
		main > div#CRUD-header.index > div.filters-summaries > div[filter="search"] {
			height: 35px;
			margin-top: 0px;
			padding: 0px;
		}

		/* text filter */
		main > div#CRUD-header.index > div.filters-summaries > div > input:is([type="text"],[type="date"],[type="month"]) {
			padding: 11px 0px 7px 10px;

			font-family: 'Rubik Light';
			font-size: 13px;
			color: rgba(255,255,255,.75);

			background: transparent;
			border: 0;
		}

			/* adjustment for chrome */
			main.is-browser-chrome > div#CRUD-header.index > div.filters-summaries > div > input:is([type="text"],[type="date"],[type="month"]) {
				padding: 12px 0px 7px 10px;
			}

			/* text filter when focused */
			main > div#CRUD-header.index > div.filters-summaries > div > input[type="text"]:focus {
				color: white;
			}

			/* text input for search */
			main > div#CRUD-header.index > div.filters-summaries > div > input[type="text"][name="filter-search"] {
				width: 250px;
			}

			/* apply/clear icon */
			main > div#CRUD-header.index > div.filters-summaries > div[filter="date"] > .fa {
				margin-left: 7px;
				font-size: 16px;
				cursor: pointer;
				color: rgba(255,255,255,.35);
			}
				main > div#CRUD-header.index > div.filters-summaries > div[filter="date"] > .fa:hover {
					text-shadow: 1px 1px 0px rgba(0,0,0,.5);
				}
				main > div#CRUD-header.index > div.filters-summaries > div[filter="date"] > .fa:active {
					text-shadow: -1px -1px 0px rgba(0,0,0,.5);
				}
				/* main > div#CRUD-header.index > div.filters-summaries > div[filter="date"].in-use > .fa {
					color: white;
				} */

		/* filter name */
		main > div#CRUD-header.index > div.filters-summaries > div > :is(name,data) {
			display: inline-block;
			vertical-align: initial;
			margin: 2px 5px 0px 0px;
			font-family: 'Rubik Light';
			font-size: 13px;
			color: white;
		}
			main > div#CRUD-header.index > div.filters-summaries > div > :is(name,data).nospace {
				margin: 2px 2px 0px 0px;
			}

			/* filter data container */
			main > div#CRUD-header.index > div.filters-summaries > div > data {
				color: rgba(255,255,255,.75);
			}

			/* filter check/radio container */
			main > div#CRUD-header.index > div.filters-summaries > div > span.check {

			}

				/* filter icon check/radio label */
				main > div#CRUD-header.index > div.filters-summaries > div > span.check > label {
					vertical-align: top;
					margin: auto 5px auto 5px;
					width: 14px;
					text-align: center;

					font-size: 16px;
					color: rgba(255,255,255,.35);
					cursor: pointer;
				}
					main > div#CRUD-header.index > div.filters-summaries > div > span.check > label:hover {
						text-shadow: 1px 1px 0px rgba(0,0,0,.5);
					}
					main > div#CRUD-header.index > div.filters-summaries > div > span.check > label:active {
						text-shadow: -1px -1px 0px rgba(0,0,0,.5);
					}
					/* filter icon when corresponding element checked */
					main > div#CRUD-header.index > div.filters-summaries > div > span.check > input:is([type="checkbox"],[type="radio"]):checked ~ label {
						color: white;
					}

				/* check/radio element */
				main > div#CRUD-header.index > div.filters-summaries > div > span.check > input:is([type="checkbox"],[type="radio"]) {
					display: none;
				}

				/* select menu filter */
				main > div#CRUD-header.index > div.filters-summaries > div > select {
					display: inline-block;
					padding: 5px 6px 6px 6px;
					margin: -5px 0px 0px 5px;
					max-width: 175px;

					color: rgba(255,255,255,.75);
					background: transparent;
					border: 0px;
					background-color: rgba(0,0,0,.25);
				}

				/* date filter */
				main > div#CRUD-header.index > div.filters-summaries > div > input:is([type="date"],[type="month"]) {
					display: inline-block;
					width: 100px;
					margin: -4px 2px 0px 0px;
					padding: 6px 5px 6px 5px;
					padding-left: 0px !important;

					font-size: 11px;
					color: rgba(255,255,255,.75);

					background: transparent;
					border: 0px;
					background-color: rgba(0,0,0,.25);
				}

					/* adjustment for chrome */
					main.is-browser-chrome > div#CRUD-header.index > div.filters-summaries > div > input:is([type="date"],[type="month"]) {
						padding: 4px 2px 4px 2px;
					}

				/* display text filter option */
				main > div#CRUD-header.index > div.filters-summaries > div > span > label.text,
				main > div#CRUD-header.index > div.filters-summaries > div > button {
					vertical-align: top;
					display: inline-block;
					margin-top: 3px;
					width: auto;

					color: rgba(255,255,255,.35);
					background: transparent;
					border: none;
					cursor: pointer;

				}

					/* text filter option when selected */
					main > div#CRUD-header.index > div.filters-summaries > div > button.selected {
						color: white;
					}

				/* filter button as icon */
				main > div#CRUD-header.index > div.filters-summaries > div > button.fa {
					margin-top: -1px;
					font-size: 16px;
				}

				/* filter button as text icon */
				main > div#CRUD-header.index > div.filters-summaries > div > button:not(.fa) {
					font-family: 'Rubik Light';
					font-size: 12px;
					margin-top: 1px;
				}

				/* disabled filter element */
				main > div#CRUD-header.index > div.filters-summaries > div > :is(input,select,button):disabled {
					background: transparent;
					color: rgba(255,255,255,.65);
				}



/* index containers */
main > .container.index {
	margin-bottom: 35px;
}
	/* index containers */
	main > .container.index[filter-rows="2"] {
		margin-top: 70px;
	}
	/* index containers */
	main > .container.index[filter-rows="3"] {
		margin-top: 105px;
	}
	/* index containers */
	main > .container.index[filter-rows="4"] {
		margin-top: 141px;
	}

	/* index notices */
	main > div.container.index > section.notice {
		margin-top: 50px !important;
	}
		/* index notices */
		main > .container.index[filter-rows="4"] > section.notice {
			margin-top: 158px !important;
		}
	main > div.container.index > section.notice > p {
		margin: 15px;
	}
	main > div.container.index[filter-rows="3"] > section.notice {
		margin-top: 120px !important;
	}
	/* main > div.container.index[filter-rows="4"] > section.notice {
		margin-top: 150px !important;
	} */


	/* main table */
	main > div.container > table {
		width: 100%;
		border-collapse: separate;
	}

		/* table headers */
		main > div.container > table tr > th {
			padding: 5px 5px 7px 5px;

			font-family: 'Nimbus Sans';
			color: white;
			font-size: 15px;
			font-weight: normal;
			text-shadow: 1px 1px 0px rgba(0,0,0,.5);

			background-color: rgb(100,100,125);
			border-top: 1px solid rgb(175,175,175);
			border-left: 1px solid rgb(175,175,175);
		}

			/* hover sortable header */
			main > div.container > table tr > th[sort]:hover {
				cursor: pointer;
				background-color: rgb(125,125,150);
			}
			/* click sortable header */
			main > div.container > table tr > th[sort]:active {
				background-color: rgb(75,75,100);
				color: rgba(255,255,255,.75);
			}

				/* sortable head when sortdir */
				main > div.container > table tr > th[sort][sortdir]::after {
					font-family: 'FontAwesome';
					position: absolute;
					display: inline-block;
					margin: 1px 0px 0px 3px;

					font-size: 14px;
					color: rgba(255,255,255,.5);
					text-shadow: -1px -1px 0px rgba(0,0,0,.5);
				}
					/* sortdir asc */
					main > div.container > table tr > th[sort][sortdir="asc"]::after {
						/* fa-caret-up */
						content: "\f0d8";
					}
					/* sortdir desc */
					main > div.container > table tr > th[sort][sortdir="desc"]::after {
						/* fa-caret-down */
						content: "\f0d7";
					}

		/* table cells */
		main > div.container > table tr > td {
			vertical-align: top;
			padding: 5px;
			text-align: left;

			font-family: 'Rubik Light';
			font-size: 13px;
			color: rgba(0,0,0,.9);
			line-height: 1.35;

			border-left: 1px solid rgba(0,0,0,.1);
		}

			/* normal non datablock cells */
			main > div.container > table tr > td:not(.stats) {
				white-space: nowrap;
			}

			/* alternating row display */
			main > div.container > table tr:nth-child(even) > td {
				background-color: transparent;
			}
			main > div.container > table tr:nth-child(odd) > td {
				background-color: rgb(100,100,125,.2);
			}
			main > div.container > table tr:hover > td {
				background-color: rgb(100,150,200,.45);
			}

			/* "special" cell */
			main > div.container > table tr > td.special {
				color: rgba(0,0,0,.5);
				font-style: italic;
			}

			/* "special" cell */
			main > div.container > table tr > td > .auxdata {
				display: inline-block;
				color: rgba(0,0,0,.5);
			}

			/* vendor type icon */
			main > div.container > table tr > td .fa.VendorType {
				display: inline-block;
				width: 20px;
				margin-right: 0px;
				vertical-align: text-bottom;

				text-align: center;
				font-size: 14px;
				color: rgba(0,0,50,.25);
			}

			/* cell containing amount */
			main > div.container > table tr > td.amount {
				text-align: right;
			}

			/* hover on row */
			main > div.container > table tr:hover > td {

			}

			/* contents faded */
			main > div.container > table tr > td.fade {
				color: rgba(0,0,0,.35);
			}
				/* stats containers faded */
				main > div.container > table tr > td.stats.fade > * {
					opacity: .5;
				}

			/* control icons cell */
			main > div.container > table tr > td.control-icons {
				text-align: center;
			}

				/* control icons with small icons */
				main > div.container > table tr > td.control-icons > .fa {
					margin: 0px 2px 0px 2px;
					height: auto;
				}
					main > div.container > table tr > td.control-icons > .fa:hover {
						background: transparent;
					}

				/* display control icons vertically */
				main > div.container > table tr > td.control-icons > .fa {
					display: inline-block;
					margin: 0px auto 2px auto;
				}

				/* display control icons inline when small */
				main > div.container > table tr > td.control-icons.small > .fa {
					display: inline-block;
					border: 0px;
					padding: 0px;
				}

			/* address container */
			main > div.container > table tr > td > address {
				display: block;
			}
				/* spacing for multiple addresses */
				main > div.container > table tr > td > address:not(:first-of-type) {
					margin-top: 5px;
				}

				/* address lines */
				main > div.container > table tr > td > address > div {
					white-space: wrap;
				}
				/* first address line */
				main > div.container > table tr > td > address > div:first-of-type {
					font-weight: bold;
				}
				/* general subcontainer for notes */
				main > div.container > table tr > td > address > div.notes {
					color: rgba(0,0,0,.65);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

			/* basic info subcontainer */
			main > div.container > table tr > td > div.info {
				font-size: 0px; /* collapse spacing */
			}
				/* info subcontainer label */
				main > div.container > table tr > td > div.info > label {
					display: inline-block;
					width: 120px;
					font-size: 13px;
				}
				/* info subcontainer data */
				main > div.container > table tr > td > div.info > data {
					display: inline-block;
					font-weight: bold;
					font-size: 13px;
				}
					/* stateful data container */
					main > div.container > table tr > td > div.info > :is(data[bool-state=""],data[bool-state="0"],data[bool-state="false"]) {
						font-weight: normal;
						color: rgba(0,0,0,.35);
					}
					/* stateful data container */
					main > div.container > table tr > td > div.info > :is(data[bool-state="1"],data[bool-state="true"]) {
						font-weight: bold;
						color: rgba(0,0,150,1);
					}

				/* sort icon */
				main > div.container > table tr > td.stats > .fa[sort] {
					position: relative;
					width: 25px;
					height: 100%;
					vertical-align: middle;
					text-align: center;

					font-size: 14px;
					color: rgba(100,100,125,.35);

					cursor: pointer;
				}
					/* hover sort icon */
					main > div.container > table tr > td.stats > .fa[sort]:hover {
						color: rgba(100,100,125,.75);
					}
					/* click sort icon */
					main > div.container > table tr > td.stats > .fa[sort]:active {
						color: rgb(50,50,75);
					}
					/* icon when sorted */
					main > div.container > table tr > td.stats > .fa[sortdir] {
						color: black;
					}
						/* icon when sorted */
						main > div.container > table tr > td.stats > .fa[sortdir="asc"]::before {
							content: "\f160";
						}
						/* icon when sorted */
						main > div.container > table tr > td.stats > .fa[sortdir="desc"]::before {
							content: "\f161";
						}

	/* summaries container */
	main > div#CRUD-header.index > div.filters-summaries.summaries {
		background-color: rgb(50,50,75);
	}
	/* summaries subcontainers */
	main > div#CRUD-header.index > div.filters-summaries.summaries > div {
		height: 24px;
	}


/* main container when batch ops displayed */
div.container.index.batchUI-show {
	margin-bottom: 75px;
}


/* batch ops container */
main > #batchUI {
	display: block;
	position: fixed;
	bottom: -35px;
	transition: bottom 0.2s linear 0s;
}

	/* batch ops when shown */
	main > #batchUI.show {
		position: fixed;
		bottom: 35px;
		height: 35px;
		width: calc( 100vw - 175px );
		vertical-align: top;

		background-color: rgb(68,68,68);
	 	border-left: 1px solid rgb(175,175,175);

		transition: bottom 0.2s linear 0s;
	}

	/* sections */
	main > #batchUI > section {
		display: inline-block;
		vertical-align: top;
	}

		/* batch form elements */
		main > #batchUI > section :is(select,input[type="text"],label),
		main > #batchUI > button {
			padding: 5px;
			margin: 5px;
			min-width: 175px;

			color: rgba(255,255,255,.75);
			background: transparent;
			border: 0px;
			background-color: rgba(0,0,0,.25);
		}

			/* text input elements */
			main > #batchUI > section input[type="text"] {
				width: 400px;
			}

			/* additional styling for label */
			main > #batchUI > section > label {
				padding: 3px 5px 3px 3px !important;
				font-size: 12px;
			}

			/* batch notice text */
			main > #batchUI > section#batch-options > div#batch-notice {
				display: inline-block;
				height: 12px;
				margin: 12px 12px 11px 12px;
				padding-right: 10px;
				vertical-align: top;

				font-size: 12px;
				font-style: italic;
				color: white;
			}

			/* option containers */
			main > #batchUI > section#batch-options > * {
				display: none;
			}
			/* option containers */
			main > #batchUI > section#batch-options > *.show {
				display: inline-block;
			}

	/* exec button */
	main > #batchUI > button#batch-exec {
		display: none;
	}
		/* show exec button */
		main > #batchUI > button#batch-exec.show {
			display: inline-block;
			float: right;
			font-weight: bold;
			cursor: pointer;
			padding-right: 10px;
			padding-left: 10px;
			background: rgb(150,50,50);
		}

		/* hover exec button */
		main > #batchUI > button:hover {
			color: white;
			cursor: pointer;
			background: rgb(200,100,100);
		}
		/* click exec button */
		main > #batchUI > button:active {
			text-shadow: -1px -1px 0px black;
			background: rgb(150,50,50);
		}

/* bottom index toolbar */
main > div#index-toolbar-bottom {
	display: block;
	position: fixed;
	bottom: 0px;
	width: calc( 100vw - 175px );
	height: 35px;

	background-color: rgba(100,100,125,.95);
	border-left: 1px solid rgb(175,175,175);

	font-size: 0px; /* collapse spacing */
}

	/* toolbar subcontainers */
	main > div#index-toolbar-bottom > div {
		display: inline-block;
		width: calc( 50% - 10px );
		padding: 5px;

		font-family: 'Nimbus Sans';
		color: white;
		font-size: 14px;
		font-weight: normal;
	}

		/* pagination container */
		main > div#index-toolbar-bottom > div#pagination {

		}
			/* page number input */
			main > div#index-toolbar-bottom > div#pagination > input[type="number"] {
				display: inline-block;
				padding: 5px;
				width: 75px;
				margin: auto 5px auto 5px;

				color: rgba(255,255,255,.75);
				font-weight: bold;

				background: transparent;
				border: 0px;
				background-color: rgba(0,0,0,.25);
			}

			/* total pages display */
			main > div#index-toolbar-bottom > div#pagination > span#pages {
				display: inline-block;
				font-weight: bold;
			}

			/* all nav icons */
			main > div#index-toolbar-bottom > div#pagination > .nav {
				vertical-align: top;
				color: rgba(255,255,255,.75);
			}
				/* hover nav icons */
				main > div#index-toolbar-bottom > div#pagination > .nav:hover {
					color: rgb(255,255,255);
					cursor: pointer;
				}

				/* click nav icons */
				main > div#index-toolbar-bottom > div#pagination > .nav:active {
					color: rgb(255,255,255,.5);
					text-shadow: -1px -1px 0px rgba(0,0,0,.75);
				}

				/* prev/next nav icons */
				main > div#index-toolbar-bottom > div#pagination > .nav.prevnext {
					font-size: 20px;
					margin: 4px 10px 0px 10px;
				}

				/* first/last nav icons */
				main > div#index-toolbar-bottom > div#pagination > .nav.firstlast {
					font-size: 30px;
					margin: -3px 10px 0px 10px;
				}
					/* last nav icon */
					main > div#index-toolbar-bottom > div#pagination > .nav.firstlast[nav="last"] {
						margin-right: 25px;
					}

			/* buttons container */
			main > div#index-toolbar-bottom > div#options {
				text-align: right;
			}
				/* buttons */
				main > div#index-toolbar-bottom > div#options > button {
					display: inline-block;
					padding: 3px 10px 3px 10px;
					margin-left: 5px;

					color: white;
					background: rgba(255,255,255,.15);
					border: 1px solid rgba(255,255,255,.35);
					text-shadow: 1px 1px 0px rgba(0,0,0,.35);
				}

					/* hover buttons */
					main > div#index-toolbar-bottom > div#options > button:hover {
						cursor: pointer;
						background: rgba(0,0,0,.15);
					}

					/* hover buttons */
					main > div#index-toolbar-bottom > div#options > button:active {
						background: rgba(0,0,0,.35);
						box-shadow: -1px -1px 0px rgba(0,0,0,.35);
					}