* {
	box-sizing: border-box;
}

body {
	margin: 0;
	/* Show red border in test database for visibility */
	border: 20px solid red;
}

/* Style the header */
.header {
	background-color: #f1f1f1;
	padding: 5px;
	text-align: center;
}

/* .heading {
		text-decoration: underline;
} */

/* Create three unequal columns that floats next to each other */
.column {
	/*float: left;*/
	display: table-cell;
	padding: 10px;
	vertical-align: top;
	/*height: 300px;*/
	/* Should be removed. Only for demonstration */
}

/* Left and right column */
.column.side {
	width: 25%;
}

/* Left and right wide column */
.column.third {
	width: 37.5%;
}

/* Middle column */
.column.middle {
	width: 50%;
}

/* 3/4 column */
.column.wide {
	width: 75%;
}

/* Full width column */
.column.full {
	width: 100%;
}

/* Clear floats after the columns */
.row:after {
	content: "";
	clear: both;
}

/* Style the footer */
.footer {
	background-color: #808080;
	padding: 10px;
	text-align: center;
}

.row {
	display: table;
	width: 100%;
}

.shadow {
	padding: 10px;
	box-shadow: 8px 8px 3px lightgrey;
}

.blank {
	padding: 0px;
}

.error {
	color: white;
	background-color: #8f1d2c;
	border: 3px solid;
	border-color: #5c101b;
	/*
	border-collapse: collapse;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px;
*/
}

/* Keep form validation errors readable without changing error banners. */
input.error,
textarea.error,
select.error {
	color: #212121;
	background-color: #fff1f2;
	border-color: #a6192e;
}

input.error::placeholder,
textarea.error::placeholder {
	color: #6b1f2b;
	opacity: 1;
}

.accept {
	color: white;
	background-color: #2f6b4f;
	border: 3px solid;
	border-color: #214d39;
	/*	border-collapse: collapse;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px
*/
}

.warning {
	color: white;
	background-color: #4a4143;
	border: 3px solid;
	border-color: #9a737c;
	/*	border-collapse: collapse;
	padding-left:10px;
	padding-right:10px;
	padding-bottom:10px
*/
}

.elementToFadeInAndOut {
	/* color: white; */
	/* background-color: #209020; */
	/* border: 3px solid; */
	/* border-color: #00ff00; */
	-webkit-animation: fadeinout 1s linear forwards;
	animation: fadeinout 1s linear forwards;
}

@-webkit-keyframes fadeinout {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fadeinout {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
	.column {
		display: table-row;
		/*width: 100%;*/
	}

	.index {
		width: 20%;
		float: right;
	}

	.data {
		width: 80%;
		float: left;
	}

	/* .header {position: sticky; top: 0px;} */
	/* .footer {position: sticky; bottom: 0px;} */
}

@media (min-height: 600px) {

	/*    .header {position: sticky; top: 0px;}*/
	.footer {
		position: sticky;
		bottom: 0px;
	}
}

/* Dismissible success, warning, and error feedback banners */
.dismissible-feedback {
	position: relative;
	padding-right: 42px;
}

.dismiss-feedback-button {
	position: absolute;
	top: 4px;
	right: 7px;
	padding: 0 5px;
	border: 0;
	color: inherit;
	background: transparent;
	font: inherit;
	font-size: 24px;
	font-weight: bold;
	line-height: 1;
	cursor: pointer;
}

.dismiss-feedback-button:hover,
.dismiss-feedback-button:focus {
	background-color: rgba(255, 255, 255, 0.2);
	outline: 2px solid currentColor;
}

.feedback-banner-closing {
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* Primary image for an individual inventory item */
.item-image-panel {
	text-align: center;
	overflow: hidden;
}

.item-image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 420px;
	margin: 0 auto;
	object-fit: contain;
}

.type-image-panel {
	margin: 12px 0 18px;
}

.type-image {
	max-height: 260px;
}

.image-management-section {
	padding-bottom: 12px;
	margin-bottom: 24px;
}

.image-management-copy,
.image-management-preview,
.image-upload-row {
	margin-top: 16px;
	margin-bottom: 16px;
}

.image-management-action {
	margin-top: 12px;
	margin-bottom: 20px;
}

.image-upload-help {
	margin: 8px 0 12px;
}

.selected-image-preview {
	display: none;
	width: auto;
	height: auto;
	max-width: calc(100% - 24px);
	max-height: 350px;
	margin: 12px auto;
	object-fit: contain;
}

.selected-image-preview.visible-image-preview {
	display: block;
}

.inventory-file-delete-button {
	margin-left: 8px;
	padding: 2px 7px;
	border: 1px solid #8f1d2c;
	border-radius: 2px;
	color: #8f1d2c;
	background: #ffffff;
	cursor: pointer;
	font: inherit;
	font-size: 0.85em;
}

.inventory-file-delete-button:hover,
.inventory-file-delete-button:focus {
	color: #ffffff;
	background: #8f1d2c;
}

/* Experiment-location management */
.experiment-location-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 120px;
	gap: 18px;
	align-items: center;
	margin: 0 0 14px;
	padding: 14px;
	border: 1px solid #c8c8c8;
	background: #fff;
	box-shadow: 4px 4px 3px #d8d8d8;
}

.experiment-location-name-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	margin: 0;
}

.experiment-location-label {
	grid-column: 1 / -1;
	font-weight: bold;
}

.experiment-location-name-form input[type="text"],
.experiment-location-add-form input[type="text"] {
	width: 100%;
	padding: 9px;
}

.experiment-location-name-form input[type="submit"],
.experiment-location-status-actions input[type="submit"],
.experiment-location-add-form input[type="submit"] {
	padding: 8px 12px;
	border: 1px solid #222;
	color: #fff;
	background: #333;
	cursor: pointer;
}

.experiment-location-name-form input[type="submit"]:hover,
.experiment-location-name-form input[type="submit"]:focus,
.experiment-location-status-actions input[type="submit"]:hover,
.experiment-location-status-actions input[type="submit"]:focus,
.experiment-location-add-form input[type="submit"]:hover,
.experiment-location-add-form input[type="submit"]:focus {
	background: #8f1d2c;
}

.experiment-location-status-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
}

.experiment-location-status-actions form {
	margin: 0;
}

.experiment-location-status-actions input[type="submit"] {
	width: 100%;
}

.experiment-location-active {
	color: #2f6b4f;
	font-weight: bold;
}

.experiment-location-inactive {
	color: #666;
	font-weight: bold;
}

@media (max-width: 800px) {

	.experiment-location-card,
	.experiment-location-name-form {
		grid-template-columns: 1fr;
	}

	.experiment-location-status-actions {
		align-items: stretch;
	}
}

/* Key-management table headings */
.key-management-table-header {
	color: #212121;
	background-color: #e3e3e3;
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	font-weight: bold;
}

.key-management-table-header .column {
	vertical-align: middle;
}

/* Keep open-assignment headings and data columns aligned. */
.row.key-assignment-row {
    display: grid;
    grid-template-columns:
        minmax(0, 18fr)
        minmax(0, 17fr)
        minmax(0, 15fr)
        minmax(0, 16fr)
        minmax(0, 11fr)
        minmax(0, 12fr)
        minmax(0, 11fr);
    padding: 0;
}

.key-assignment-row > .column {
    /* Override the existing inline percentage widths. */
    width: auto !important;
    min-width: 0;
    overflow-wrap: anywhere;
}

.key-assignment-row::after {
    display: none;
}

.key-assignment-row .table-action-button {
    max-width: 100%;
    white-space: normal;
}

/* Keep the remaining key-management tables aligned. */
.row.key-type-row,
.row.physical-key-row,
.row.key-holder-row {
    display: grid;
    padding: 0;
}

.row.key-type-row {
    grid-template-columns:
        minmax(0, 22fr)
        minmax(0, 38fr)
        minmax(0, 12fr)
        minmax(0, 10fr)
        minmax(0, 10fr)
        minmax(0, 8fr);
}

.row.physical-key-row {
    grid-template-columns:
        minmax(0, 22fr)
        minmax(0, 20fr)
        minmax(0, 12fr)
        minmax(0, 22fr)
        minmax(0, 14fr)
        minmax(0, 10fr);
}

.row.key-holder-row {
    grid-template-columns:
        minmax(0, 18fr)
        minmax(0, 13fr)
        minmax(0, 21fr)
        minmax(0, 14fr)
        minmax(0, 12fr)
        minmax(0, 8fr)
        minmax(0, 6fr)
        minmax(0, 8fr);
}

.key-type-row > .column,
.physical-key-row > .column,
.key-holder-row > .column {
    width: auto !important;
    min-width: 0;
    overflow-wrap: anywhere;
}

.key-type-row::after,
.physical-key-row::after,
.key-holder-row::after {
    display: none;
}

.key-type-row .table-action-button,
.physical-key-row .table-action-button,
.key-holder-row .table-action-button {
    max-width: 100%;
    white-space: normal;
}