html.fullHeight, html.fullHeight body {
	height: 100%;
	overflow: hidden;
}
.pageBody {
	margin-top: 70px;
}
html.fullHeight .pageBody {
	height: 100%;
}

@media (min-width: 1200px) {
	.col-xl-20percent {
		width: 20%;
	}
}

img.click-content {
	cursor: pointer;
}
img.click-content.disabled {
	cursor: default;
}

.title-variant {
	font-size: 11px;
    color: #666;
}

.sidebar-toggle {
	cursor: pointer;
}
.sidebar-toggle::after {
	content: '\2630';
}

.grid-wrapper {
	height: calc(100% - 88px);
}
.grid-container {
	height: calc(100% - 88px);
	margin: 0 16px;
}
.grid-container .fa-edit {
	cursor: pointer;
}
.grid-wrapper .grid-container {
	height: 100%;
}

.modal-tabs {
    position: relative;
    flex: 1 1 auto;
    padding: var(--bs-modal-padding);
}
.modal-body.has-tabs {
	padding-top: 0;
}
.cell-center .ag-cell-wrapper {
	display: flex;            /* ensure flex container */
	justify-content: center;  /* center horizontally */ 
	align-items: center;      /* center vertically (optional) */
}
.cell-wrap .ag-cell-wrapper {
	line-height: 16px;
	padding-top: 3px;
	padding-bottom: 3px;
}
.form-label {
	font-weight: 600;
}
table.table th {
	font-weight: 600;
}
a.link {
	cursor: pointer;
	text-decoration: none;
}
.itemContent .row {
	margin-bottom: 16px;
}
.itemContent .mediaHeader {
	background-color: #3F51B5;
	color: white;
	padding: 4px;
}
.itemContent .imageContainer {
	position: relative;
}
.itemContent .imageContainer.missing {
	color: red;
}
.itemContent .imageContainer .imageBox {
	width: 100%; 
	aspect-ratio: 1 / 1;  
	display: flex; 
	justify-content: center;  
	align-items: center; 
	overflow: hidden;
	container-type: inline-size;
}
.itemContent .imageContainer .imageBox img {
	max-width: 100%;
	max-height: 100%;
	height: auto; 
	width: auto;
}
.itemContent .imageContainer .imageBox .imageLabel {
	position: absolute;
	transform: translateY(-50%);
	font-size: 9cqw;
	display: none;
}
.itemContent .imageContainer .imageBox:not(:has(img)),
.itemContent .imageContainer .imageBox:has(img:not([src])) {
	border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.itemContent .imageContainer.missing .imageBox .imageLabel,
.itemContent .imageContainer.noImage .imageBox .imageLabel {
	display: block;
}
.itemContent .imageContainer.noImage .imageBox .imageLabel::after {
	content: 'NO IMAGE';
}
.itemContent .imageContainer.missing .imageBox .imageLabel::after {
	content: 'MISSING';
}
.itemContent .imageContainer .imageBox .imageLabel {
	top: 50%;
}
.itemContent .imageContainer.image35 .imageBox .imageLabel {
	top: 28%;
}
.itemContent .imageContainer.image525 .imageBox .imageLabel {
	top: 17%;
}
.itemContent .imageContainer.imageCD .imageBox .imageLabel {
	top: 19%;
}
.itemContent .description {
	font-size: 14px;
}
.itemContent .partNo {
	font-size: 12px;
}
.itemContent .partNo.missing, 
.itemContent .description.missing {
	color: red;
}
.itemContent > div.defaultMessage {
	font-size: 16px;
	padding-top : 16px;
	display: none;
}
.itemContent > div.defaultMessage::after {
	content: 'No Content';
}
.itemContent > div.defaultMessage:only-child {
	display: block;
}

.editTabContainer {
	margin-top: 16px; 
	margin-top: 0;
	margin-bottom: 16px;
}
.editTabContainer table > tbody.defaultMessage > tr > td {
	text-align: center;
	padding-top: 16px;
	display: none;
}
.editTabContainer table > tbody.defaultMessage > tr > td:after {
	content: 'No Content';
}
.editTabContainer table > tbody.defaultMessage:only-of-type > tr > td {
	display: table-cell;
}

.imageContainer .iconContainer {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 14px;
	background-color: #ffffffd0;
	color: black;	
	display: flex;
	gap: 0.5rem; 
}
.imageContainer .imageUndo {
	cursor: pointer;
	display: none;
	border: 1px solid black;
	border-radius: 4px;
	padding: 3px;
}
.imageContainer .imageShared {
	display: none;
	border: 1px solid black;
	border-radius: 11px;
	padding: 3px;
}
.imageContainer .imageDelete {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 16px;
	cursor: pointer;
	color: red;
	padding: 4px;
	display: block;
	visibility: hidden;
}
.imageContainer:hover .imageDelete {
	visibility: visible;
}
.imageContainer .redumpLink {
	position: absolute;
	left: 0;
	top: 0;
	border: 1px solid lightgrey;
    background-color: white;
    padding: 2px;
    border-radius: 6px;
}
.imageContainer .redumpLink img {
	display: block;
}
.contentItem.deleted .imageContainer:hover .imageDelete {
	visibility: hidden;
}

.imageContainer.newImage .imageUndo,
.contentItem.deleted .imageContainer .imageUndo {
	display: block;
}

.contentItem.shared .imageContainer .imageShared {
	display: block;
}
.contentItem.deleted img,
.contentItem.deleted .imageLabel, 
.contentItem.deleted .description {
	opacity: 0.2;
}
.contentItem.deleted .imageDelete {
	--fa: "\f055";
	color: green;
}

.dropzone.dragover {
	outline: 2px solid #333;
	background: #f0f0f0;
	opacity: 0.75;
}
.modal-dialog .modal-header {
	background-color: #0178D6;
	color: rgb(227, 227, 227);
}
.modal-dialog .modal-footer {
	background-color: #f2f2f2;
}
.editTabContainer.editTabMain {
	max-width: 765px;
}
.input-group .btn-search {
	--bs-btn-padding-y: 0.16rem;
	border-color: var(--bs-border-color);
}

dialog.dialog-modal.content-dialog .dialog-content {
	padding: 0;
	margin: 0;
	overflow: hidden;
	background-color: DimGrey;
}
dialog.dialog-modal .dialog-content img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
dialog.dialog-modal .dialog-content.fit-width {
	overflow: auto;
}
dialog.dialog-modal .dialog-content.fit-width img {
	width: auto;
	height: auto;
	max-width: 100%;
	margin: auto;
}
dialog.dialog-modal .dialog-content iframe {
	width: 100%;
	height: 100%;
}
dialog.dialog-modal.image-dialog {
	width: 640px;
	height: 640px;		
	max-width: none;
	max-height: none;
}
dialog.dialog-modal.content-dialog {
	width: 95%;
	height: 95%;	
	max-width: none;	
	max-height: none;
}

.search-wrapper {
	position: relative;
}
.search-wrapper .fa-search {
	position: absolute;
	top: 50%;
	left: 0.75rem;
	transform: translateY(-50%);
	color: #6c757d;
	pointer-events: none;
}
.search-wrapper input {
	padding-left: 2.25rem;
}

.document-card {
	border: 1px solid #dee2e6;
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.075);
}
.document-card .document-thumbnail img,
.document-card .document-thumbnail div {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background-color: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 0.25rem;
}
.document-card .document-footer {
	border-top: 1px solid #dee2e6;
	padding: 0.75rem 1rem;
	text-align: right;
	background-color: #f8f9fa;
}
.document-card .card-body-top-align {
	align-items: flex-start;
}

.search-sticky {
	position: sticky;
    top: 0;
    background-color: white;
    padding-left: 16px;
    margin-left: -16px;
    padding-right: 16px;
    margin-right: -16px;
	padding-top: 4px;
}

.cover-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: top center;
}

#box .figure {
	display: block;
}
#box .imageContainer {
	aspect-ratio: 7 / 9;
	position: relative;
}
#box .imageContainer img.cover-img {
	display: block;
}
#box .imageContainer div.cover-img {
	display: none;
}
#box .imageContainer.noImage img.cover-img {
	display: none;
}
#box .imageContainer.noImage div.cover-img {
	display: block;
}

#content .itemContent {
	margin-bottom: 16px;
}

#contentLinkModal .dialog-content {
	min-height: 200px;
}

#sidebar,
#sidebar.collapsing,
#sidebar.collapsing.collapse,
#sidebar.collapse {
	transition: none !important;
}
#sidebar {
	width: 200px;
	overflow: auto;
}
#sidebar .sidebar-item {
	margin: 8px 16px;
	text-align: center;
	font-size: 13px;
	position: relative;
	line-height: 16px;
}
#sidebar .sidebar-item.missing {
	color: red;
}
#sidebar .sidebar-item.missing img {
	opacity: 0.33;
}
#sidebar .sidebar-item-caption {
	padding-bottom: 0px;
	padding-top: 2px;
}
#sidebar .sidebar-item-sub-caption {
	padding-left: 4px;
	font-size: 11px;
	white-space: nowrap;
}
#sidebar .sidebar-badge {
	position: absolute;
	right: -8px;
	top: -4px;
	width: 24px !important;
}
#sidebar div.sidebar-badge {
	border: 1px solid grey;
	border-radius: 5px;
	font-size: 11px;
	width: auto !important;
	padding: 2px 4px
}
#sidebar img {
	width: 100%;
	object-fit: contain;
	object-position: top center;
	box-sizing:border-box
}

#titleEditModal .modal-body {
	height: 600px;
}
#titleEditModal .itemContent {
	margin-left: 12px; 
	margin-right: 12px;
	margin-left: 0;
	margin-right: 0;
	font-size: 12px;
}
#titleEditModal .itemContent .description {
	margin-top: 8px;
	margin-bottom: 8px;
}
#titleEditModal .itemContent .description input {
	font-size: 12px;
	text-align: center;
}
#titleEditModal .itemContent .description select {
	font-size: 12px;
}
#titleEditModal #content .itemContent .description input {
	text-align: left;
}
#titleEditModal .itemContent .description .form-check {
	font-size: 12px;
	margin-right: 0.8rem;
}
#titleEditModal tbody .detailRow i.fa-circle-xmark {
	color: red;
	cursor: pointer;
}
#titleEditModal tbody.deleted .detailRow td input,
#titleEditModal tbody.deleted .detailRow td select {
	background-color: #f8d7da;
	text-decoration: line-through;
	opacity: 0.6;
}
#titleEditModal tbody.deleted .detailRow i.fa-circle-xmark {
	--fa: "\f0e2";
	color: black;
}
#titleEditModal tbody.deleted .mediaRow {
	display: none;
}
#titleEditModal .itemContent .description .input-redump-id {
	font-size: 12px;
}
#titleEditModal .itemContent .description .input-redump-id label {
	padding-left: 8px;
	padding-top: 4px;
}

.ag-row-selected {
  background-color: #C3E7FF;
}

.mediaRow .imageContainer {
	max-width: 160px;
	margin: auto;
}

.btn-group-redump {
	margin-top: 2px;
}

.btn-group-redump a.btn {
	border-radius: 12px;
	padding: 0px 7px;
	margin: 2px;
}

.ag-cell.inherited {
	color: grey;
}