/**
 * CSS for serial number entry list
 */

/* section */
form > section.serials-list {

}

	/* list container */
	form > section.serials-list > div#serials-list {
		display: block;
		text-align: center;
		overflow-y: auto;
		max-height: 50vh;
	}

		/* loading indcator */
		form > section.serials-list > div#serials-list > .fa-spin {
			display: none;
		}
			form > section.serials-list > div#serials-list.loading > .fa-spin {
				display: inline-block;
				font-size: 50px;
				color: rgba(0,0,0,.25);
			}

		/* "empty" notice */
		form > section.serials-list > div#serials-list > .empty {
			display: none;
		}
			form > section.serials-list > div#serials-list:not(.loaded):not(.loading) > .empty {
				display: inline-block;
			}

		/* list item label */
		form > section.serials-list > div#serials-list > label {
			display: inline-block;
			width: 150px;
			height: auto;
			padding: 3px 5px 5px 3px;
			margin: 3px;

			background-color: rgba(0,0,100,.1);
			border: 1px solid rgba(0,0,0,.25);
			border-radius: 1px;
			box-shadow: 2px 2px 0px rgba(0,0,0,.15);
		}

			/* exceptable labels */
			form > section.serials-list > div#serials-list > label[exceptable="true"]:not(:disabled,[disabled]) {
				cursor: pointer;
			}

			/* label with exception */
			form > section.serials-list > div#serials-list > label.exception {
				background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAI0lEQVQIW2NkwAT/GdHE/gP5jMiCYAGQIpggXAAmiCIAEgQAAE4FBbECyZcAAAAASUVORK5CYII=) !important;
			}

			/* icon element */
			form > section.serials-list > div#serials-list > label > .fa {
				display: inline-block;
				width: 20px;
				text-align: center;
				margin-top: 1px;
				vertical-align: top;

				font-size: 17px;
				color: rgba(0,0,0,.5);
			}

				/* default icon (assume valid) */
				form > section.serials-list > div#serials-list > label > .fa::before {
					/* fa-check */
					content: "\f00c";
				}

			/* hover on list item label */
			form > section.serials-list > div#serials-list > label:hover {
				filter: brightness(500%);
			}

			/* lesser error level */
			form > section.serials-list > div#serials-list > label[errorEscalation="1"] {
				opacity: 0.5;
			}

			/* label when not valid */
			form > section.serials-list > div#serials-list > label[errorEscalation="2"] {
				background-color: rgba(100,0,0,.1);
				border: 1px solid rgba(100,0,0,.25);
			}

				/* icon when not valid */
				form > section.serials-list > div#serials-list > label[errorEscalation="2"] > .fa::before {
					/* fa-exclamation-circle */
					content: "\f06a";
					color: red;
				}

				/* icon with lower error escalation */
				form > section.serials-list > div#serials-list > label[errorEscalation="1"] > .fa::before {
					/* fa-info-circle */
					content: "\f05a";
				}

				/* serial no */
				form > section.serials-list > div#serials-list > label > data.serial {
					display: inline-block;
					text-align: right;
					width: calc( 100% - 6px - 20px );
					margin-top: 4px;
					vertical-align: top;

					font-family: Courier New, FixedSys;
					font-size: 15px;
					font-weight: bold;
				}

				/* vendor container */
				form > section.serials-list > div#serials-list > label > div.info {
					display: block;
					border-top: 1px solid white;
					box-shadow: 0px -1px 1px rgba(0,0,0,.1);
					margin-top: 3px;
				}
					/* vendor label */
					form > section.serials-list > div#serials-list > label > div.info > span {
						display: inline-block;
						width: 70px;
						vertical-align: top;
						margin: 3px 5px 0px 0px;
						text-align: left;

						font-size: 14px;
						color: rgba(0,0,0,.5);
					}
					/* vendor name */
					form > section.serials-list > div#serials-list > label > div.info > data {
						display: inline-block;
						text-align: right;
						vertical-align: top;
						margin: 3px 0px 0px 0px;
						width: calc( 100% - 6px - 75px );

						font-size: 14px;
						color: black;

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