/**
 * CRUDs
 */

/* CRUD header bar */
:is(main, #sidebarUI) div#CRUD-header {
 	position: fixed;
	z-index: 300;

	display: block;
 	height: 35px;
 	width: calc( 100% - 175px );

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

	/* additional rows in header */
	:is(main, #sidebarUI) div#CRUD-header[rows="2"] {
		height: 70px;
	}
	/* additional rows in header */
	:is(main, #sidebarUI) div#CRUD-header[rows="3"] {
		height: 105px;
	}
	/* additional rows in header */
	:is(main, #sidebarUI) div#CRUD-header[rows="4"] {
		height: 140px;
	}


	/* header title */
	:is(main, #sidebarUI) div#CRUD-header > h2 {
		position: fixed;
		width: 600px;
		right: 10px;
		top: 6px;
		margin: 0px 0px 0px 20px;
		text-align: right;

		font-family: Nimbus Sans;
		font-size: 20px;
		color: rgba(255,255,255,.75);
		text-shadow: 1px 1px 0px black;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* CRUD section */
	:is(main, #sidebarUI) > .container > section {
		display: block;
		padding: 0px;
		margin: 15px;
	}

		:is(main, #sidebarUI) > .container > section:not(.no-style) {
			border: 1px solid rgba(0,0,0,.1);
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;

			box-shadow: 3px 3px 1px rgba(0,0,0,.05);
			background: white;
		}

		/* warning container */
		:is(main, #sidebarUI) > .container > section.warning {
			color: red;
		}

			/* warning container header */
			:is(main, #sidebarUI) > .container > section.warning > h3,
			:is(main, #sidebarUI) > .container > section.warning > h3 > .fa {
				color: red;
			}

			/* container paragraph */
			:is(main, #sidebarUI) > .container > section p {
				text-align: center;

				font-family: 'Rubik Light';
				font-size: 13px;
				line-height: 1.35;
				font-weight: normal;
			}

			/* notice paragraph */
			:is(main, #sidebarUI) > .container > section.notice p {
				margin: 10px;
			}

				/* warning container paragraph */
				:is(main, #sidebarUI) > .container > section.warning p {
					/* text-align: center; */
					color: red;
					/* font-size: 15px; */
					/* padding: 10px; */
				}

		/* section header */
		:is(main, #sidebarUI) > .container > section > h3 {
			display: block;
			padding: 10px;
			text-align: left;

			font-family: 'Nimbus Sans';
			font-size: 20px;
			font-weight: lighter;
			color: rgba(0,0,0,.65);

			background-color: rgba(0,0,0,.2);
			border-bottom: 1px solid rgba(0,0,0,.15);

			text-transform: uppercase;
		}
			/* header icon */
			:is(main, #sidebarUI) > .container > section > h3 > .fa {
				font-size: 20px;
				width: 30px;
				text-align: center;

				color: rgba(0,0,0,.35);
			}


			/* stats in section header */
			:is(main, #sidebarUI) > .container > section > h3 > div.stats {
				float: right;
			}
				/* stats in section header */
				:is(main, #sidebarUI) > .container > section > h3 > div.stats > div {
					display: inline-block;
					margin-left: 10px;
					font-family: Courier New, FixedSys;
					font-size: 13px;
				}
					:is(main, #sidebarUI) > .container > section > h3 > div.stats > div > label {
						display: inline-block;
						margin-left: 5px;
					}
					:is(main, #sidebarUI) > .container > section > h3 > div.stats > div > data {
						display: inline-block;
						min-width: 20px;
						font-weight: bold;
					}

			/* header buttons */
			:is(main, #sidebarUI) > .container > section > h3 > span.buttons {
				display: inline-block;
				float: right;
				margin-top: 4px;
				font-size: 0px; /* collapse spacing */
			}

				/* header button */
				:is(main, #sidebarUI) > .container > section > h3 > span.buttons > span.button {
					display: inline-block;
					border: 0px;
					padding: 0px;
					margin: 0px;
					background: transparent;
				}

					/* contained label */
					:is(main, #sidebarUI) > .container > section > h3 > span.buttons > span.button > label {
						padding: 7px 10px 5px 10px;

						font-family: 'Rubik Light';
						font-size: 13px;
						color: rgba(0,0,0,.65);
						text-transform: none;

						background-color: rgba(200,200,255,.15);
						border: 1px solid rgba(0,0,25,.15);
					}

					/* hover styling */
					:is(main, #sidebarUI) > .container > section > h3 > span.buttons > span.button:hover > label {
						background-color: rgba(255,255,255,.25);
						cursor: pointer;
					}
					/* click styling */
					:is(main, #sidebarUI) > .container > section > h3 > span.buttons > span.button:active > label {
						box-shadow: 0px 0px 20px rgba(0,0,0,.25) inset;
					}
						/* icon in label */
						:is(main, #sidebarUI) > .container > section > h3 > span.buttons > span.button > label > .fa {
							margin: -1px 5px 0px 0px;
							vertical-align: top;
							color: rgba(0,0,0,.5);
						}

					/* contained inputs */
					:is(main, #sidebarUI) > .container > section > h3 > span.buttons > span.button > input {
						display: none;
					}

					/* label checked styling */
					:is(main, #sidebarUI) > .container > section > h3 > span.buttons > span.button > input:checked ~ label {
						color: white;
						background-color: rgba(0,0,100,.35);
					}
						:is(main, #sidebarUI) > .container > section > h3 > span.buttons > span.button > input:checked ~ label > .fa {
							color: white;
						}

					/* order styling */
					:is(main, #sidebarUI) > .container > section > h3 > span.buttons > span.button:first-of-type > label {
						border-top-left-radius: 3px;
						border-bottom-left-radius: 3px;
					}
					:is(main, #sidebarUI) > .container > section > h3 > span.buttons > span.button:last-of-type > label {
						border-top-right-radius: 3px;
						border-bottom-right-radius: 3px;
					}
					:is(main, #sidebarUI) > .container > section > h3 > span.buttons > span.button:not(:last-of-type) > label {
						border-right: 0px;
					}