/* Use flexbox to fix and align the height of the page nav and page content. */
#wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	overflow-x: inherit;
}

.navbar-static-side {
	position: relative !important;
}

#page-wrapper{
	flex: 1;
	margin-left: 0 !important;
	min-height: 0 !important;
	min-width: 0;
	max-width: 100%;
}

/* Fixed the padding to match the footer height (in Inspinia's skin #3) */
.wrapper-content {
	padding-bottom: 40px !important;
}

/* Bugfix for the upper right menu (in Inspinia's skin #3) */
.navbar-top-links .dropdown-menu li:last-child {
	margin-right: 0 !important;
}

/* Bugfix for Inspinia's overriding of dropdown menu right */
.dropdown-menu.dropdown-menu-right {
	left: auto;
}

/* Adjust the font colors to have better contrast */
body {
	color: #303030;
}

/* The labels and table headers */
.field-label, .control-label, .form-group label,
.table > thead > tr > th, .table > tbody > tr > th {
	color: #505050;
	font-weight: 600; /* Consistently use semi-bold */
	text-transform: none; /* Do not fully capitalize table headers */
}

.ibox-title h5 {
	margin-top: 2px; /* Align with the button is present on the right */
	color: #505050;
}

.text-muted {
	color: #707070;
}

/* Field groups (and the related classes) are our "read-only"
counterpart to bootstrap's form group and related classes */
.field-group {
	margin-left: -15px;
	margin-right: -15px;
	margin-bottom: 10px;
}

@media(min-width: 768px) {
	.field-label {
		margin-bottom: 0;
		padding-top: 5px;
	}

	.field-group > .field-label {
		text-align: right;
	}

	.field-group > .label-left {
		text-align: left !important;
	}
}

.field-value {
	margin-bottom: 0;
	padding-top: 5px;
}

/* Make sure select 2's dropdown is visible when inside a modal */
.select2-dropdown {
	z-index: 999999;
}

/* restyle select to better match inspina's input form controls */
.select2-selection.select2-selection--single {
	border-radius: 0;
	height: 34px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.select2-selection.select2-selection--multiple {
	border-radius: 0;
}

.select2-selection__choice {
	border: none !important;
	border-radius: 0 !important;
	margin-top: 6px !important;
	margin-left: 6px !important;
}

.select2-selection__rendered {
	margin-top: -4px;
}

.select2-selection__arrow {
	margin-top: 3px;
}

.select2-selection__clear {
	margin-top: 1px;
}

/* Remove bootstrap's default margins. */
.pagination {
	margin-top: 0;
	margin-bottom: 0;
}

/* Inspinia didn't properly set this. */
.text-primary {
	color: #1ab394;
}

/* Used in the listing pages to indicate that new data is being loaded. */
.faded {
	opacity: 0.5;
}

/* Used to preserve the newlines in text (e.g. when displaying the document's remarks) */
.multiline {
	white-space: pre-line;
}

/* Used to properly align the checkboxes with the other form controls in table. */
.checkbox-cell > input[type=checkbox]{
	margin-top: 0;
	min-height: 36px;
}

.checkbox-cell {
	text-align: center;
}

h2 .label {
	vertical-align: middle;
}

/* Used for tabs that act like iboxes (independent floating containers). */
.tabs-ibox {
	margin-bottom: 25px;
}

/* Orange from the Zayls' logo. */
.zayls-orange {
	color: #F7634E;
}

/* Prevent unusably small input fields */
input[type=text] {
	min-width: 100px;
}

.dropzone.active {
	border: 2px solid #1ab394;
}

/* Shorten the nav header to match the top nav */
.nav-header {
	padding: 12px 0 !important;
}

.nav-header .profile-element,
.nav-header .logo-element {
	margin: 5px 0 !important;
	padding: 0 !important;
	font-size: 18px !important;
	line-height: 1.4 !important;
}

@media (min-width: 1200px) {
	.border-left-lg {
		border-left: 1px solid #e7eaec;
	}

	.btn-block-lg {
		display: block;
		width: 100%;
		white-space: normal;
	}
}

/* Shorten the menu item side padding (esp. since there are icons) */
.dropdown-menu > li > a {
	padding: 3px 15px !important;
}

/* Adjust spacing for fixed-width icons, which are used in menus */
.fa-fw {
	margin-left: -2px;
	margin-right: 2px;
}

.item-info {
	color: #707070;
	margin: 5px 0;
}

/* Make sure elements with the hidden attribute stay hidden */
/* even when their display is explicitly set to something else. */
[hidden] {
	display: none !important;
}

/* Legend box and the red & green highlights are for the activity log diff */
.legend-box {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 10px;
}

.red-highlight {
	background: rgba(240, 120, 120, 0.85) !important;
	text-decoration: line-through;
}

.green-highlight {
	background: rgba(120, 240, 120, 0.85) !important;
}

.profile-picture-small {
	width: 50px;
}

.profile-picture-big {
	display: block;
	width: 150px;
}

.profile-picture-empty-dropzone {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	width: 150px;
	height: 150px;
	border: 2px dashed gray;
	border-radius: 15px;
}

/* Surround negative amounts in parenthesis */
/* but stay aligned with positive amounts. */
.negative-amount {
	margin-left: -0.65ch;
	margin-right: -0.65ch;
}

.negative-amount::before {
	content: "(";
	margin-right: 0.1ch;
}

.negative-amount::after {
	content: ")";
	margin-left: 0.1ch;
}

th {
	vertical-align: bottom !important;
}

.has-error .select2-container--default .select2-selection--single,
.has-error .select2-container--default .select2-selection--multiple {
	border-color: #d38e99;
}

.report-chart-container {
	height: 50vh;
}

.max-w-200{
	max-width: 200px;
}

.countdown {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.time-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-value {
    font-size: 24px;
}

.time-label {
    font-size: 14px;
}

.import-error-modal .field-group .control-label {
	padding-top: 0;
	text-align: left;
}

.faded-10 {
	opacity: 0.10;
}

.faded-80 {
	opacity: 0.80;
}

.trophy-size {
	font-size: 42px;
}

.fixed-header {
	width: 100%;
}

.fixed-header thead,
.fixed-header tfoot,
.fixed-header tbody tr {
	display: table;
	width: 100%;
}

.fixed-header tbody {
	display: block;
	overflow: auto;
	max-height: 400px;
}

/* Auction Bid History styles and modification of vertical-timeline*/
.bid-history-container .scrollbar,
.user-comment-container .scrollbar {
	max-height: 720px;
	overflow-y: auto;
}

.bid-history-container .vertical-timeline-content {
	background: #f3f3f4;
}

.bid-history-container .vertical-timeline-content::before {
	border-right-color: #f3f3f4;
	top: 12px;
}

.bid-history-container .vertical-date small {
	font-size: 13px;
}

.bid-history-container #vertical-timeline .vertical-timeline-block:first-child::before,
.user-comment-container #vertical-timeline .vertical-timeline-block:first-child::before {
	top: 0;
}

.bid-history-container #vertical-timeline::before,
.bid-history-container #vertical-timeline .vertical-timeline-block:last-child::before,
.user-comment-container #vertical-timeline::before,
.user-comment-container #vertical-timeline .vertical-timeline-block:last-child::before {
	content: none;
}

.bid-history-container #vertical-timeline .vertical-timeline-block::before,
.user-comment-container #vertical-timeline .vertical-timeline-block::before {
	content: '';
	position: absolute;
	top: -2em; /* since vertical-timeline-block has margin: 2em 0 */
	left: 18px;
	height: calc(100% + 4em) /* since vertical-timeline-block has margin: 2em 0 */;
	width: 4px;
	background: #f1f1f1;
}

.bid-history-container .vertical-timeline-icon {
	background: white;
	color: #b9b9b9;
}

@media (min-width: 768px) {
	.bid-history-container .vertical-date {
		width: 150px;
		position: absolute;
		top: 8px;
		text-align: right;
	}

	.bid-history-container .vertical-date small {
		color: inherit;
	}

	.bid-history-container #vertical-timeline .vertical-timeline-block::before {
		left: 178px;
	}

	.bid-history-container .vertical-timeline-icon {
		left: 160px;
	}

	.bid-history-container .vertical-timeline-content {
		margin-left: 215px;
	}
}

.bid-history-container .vertical-timeline-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.bid-history-container .vertical-timeline-icon .icon-content {
	display: flex;
	align-items: center;
	justify-content: center;
	top: 0;
	left: 0;
	margin: 0;
	color: #fff;
}

.bid-history-container .vertical-timeline-content {
	background-color: #f7f7f8;
}

.bid-history-container .reminders.agile-list li:hover {
	background-color: #f1f1f3;
}

.bid-history-container .empty-message,
.user-comment-container .empty-message {
	display: flex;
    flex-direction: column;
    align-items: center;
	justify-content: center;
	height: 100%;
}

/* Auction Countdown Timeline styles and modification of vertical-timeline*/
.countdown-timeline #vertical-timeline::before,
.countdown-timeline #vertical-timeline .vertical-timeline-block:last-child::before {
	content: none;
}

.countdown-timeline #vertical-timeline .vertical-timeline-block::before {
	content: '';
	position: absolute;
	top: 0;
	left: 16px;
	height: 100%;
	width: 4px;
	background: #f1f1f1;
}

.countdown-timeline .vertical-timeline-block {
	margin: 0;
}

.countdown-timeline .vertical-timeline-content {
	padding: 0 0 2em 0;
}

.countdown-timeline .vertical-timeline-icon {
    width: 35px;
    height: 35px;
}

/* Styles for truncating long text in auction item listings */
.item-remarks-container,
.item-product-specifications-container,
.item-projected-volume-container {
    display: flex;
    align-items: end;
}

.item-remarks-content,
.item-product-specifications-content,
.item-projected-volume-content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.item-toggle-link {
    color: #337ab7;
    cursor: pointer;
    white-space: nowrap;
}

.item-remarks-content-expanded,
.item-product-specifications-content-expanded,
.item-projected-volume-content-expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
    display: inline;
}

.break-word{
	word-break: break-word;
}

.modal .tabs-container .has-error .help-block li {
	white-space: pre-line;
	word-break: break-word;
}

/* Set top value with the height of the sticky countdown container */
.modal.with-sticky-countdown {
	top: 80px;
}

.vertical-center {
    padding-top: 2%;
	text-align: right;
}

@media (max-width: 575.98px) {
	.custom-modal-dialog {
		max-width: 100%;
	}
}

@media (min-width: 576px) {
	.custom-modal-dialog {
		width: 700;
	}
}

@media (min-width: 768px) {
	.custom-modal-dialog {
		width: 800px;
	}
}

@media (min-width: 992px) {
	.custom-modal-dialog {
		width: 1000px;
	}
}

@media (min-width: 1200px) {
	.custom-modal-dialog {
		width: 1200px;
	}
}


/* Sticky timer countdown */
#countdown-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 80px;
	background-color: #f97316;
	color: #fff;
	padding: 12px 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	z-index: 9999;
	transition: transform 0.3s ease;
	transform: translateY(-100%);
}

#countdown-bar.show-countdown {
	transform: translateY(0);
}

#countdown-bar .countdown {
	font-weight: 600;
}

#countdown-bar loading-spinner .sk-spinner-three-bounce div {
	background-color: #fff;
}