/* 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,
.table > tbody > tr > td label {
	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-value {
	margin-bottom: 0;
	padding-top: 5px;
	word-break: break-word;
}

/* 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;
	word-break: break-word;
}

/* 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;
	}

	.btn-group-flex-lg {
		display: flex;
	}

	.btn-flex-lg {
		flex-grow: 1;
	}
}

@media (max-width: 320px) {
	.btn-group-flex-xs {
		display: flex;
	}
}

/* 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;
	height: 50px;
	display: flex;
	justify-content: center;
}

.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;
}

.profile-picture-small img {
	max-height: 100%;
	align-self: center;
}

/* 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;
}

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

.flex {
	display: flex;
}

.border-primary {
	border-color: #1ab394;
}

.zayls-logo-big {
	width: 150px;
}

.border-white {
	border-color: #ffffff;
}

/* Switchery */
.switchery {
	background-color: #fff;
	border: 1px solid #dfdfdf;
	border-radius: 20px;
	cursor: pointer;
	display: inline-block;
	height: 30px;
	position: relative;
	vertical-align: middle;
	width: 50px;
	margin: 6px 0px;

	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	box-sizing: content-box;
	background-clip: content-box;
}

.switchery.checked {
	background-color: #1ab394;
}

.switchery.disabled {
	cursor: not-allowed;
	opacity: 0.65;
}

.switchery>small {
	background: #fff;
	border-radius: 100%;
	box-shadow: 0 1px 3px #dfdfdf;
	height: 30px;
	position: absolute;
	top: 0;
	width: 30px;
}

.switchery>small.checked {
	right: 0px;
}


  /* Switchery sizes. */

.switchery-small {
	border-radius: 20px;
	height: 20px;
	width: 33px;
}

.switchery-small>small {
	height: 20px;
	width: 20px;
}

.switchery-large {
	border-radius: 40px;
	height: 40px;
	width: 66px;
}

.switchery-large>small {
	height: 40px;
	width: 40px;
}

/* Activity Log Stream */
.stream:first-child .stream-badge:before {
	top: 18px;
}

.stream .stream-badge i {
	top: 18px;
}

.stream:nth-child(odd) {
	background: #f9f9f9;
}

/* Custom Scrollbar */

.scrollbar
{
	max-height: 600px;
	overflow-y: scroll;
}

.scrollbar::-webkit-scrollbar
{
	width: 7px;
	border-radius: 10px;
	background-color: transparent;
}

.scrollbar::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: transparent;
}

ui-ibox.scrollable .ibox-content:hover .scrollbar::-webkit-scrollbar-thumb
{
	background-color: #707070;
}

.toggled {
	background-color: #d3d4d7;
	border-radius: 3px;
}

.toggled a {
	color: #505050;
	pointer-events: none;
	cursor: default;
}

.tooltip.item-info .tooltip-inner {
	background-color: #2f4050cc;
	max-width: 400px;
	padding: 1em;
	text-align: left;
}
.tooltip.item-info.top .tooltip-arrow {
	border-top-color: #2f4050cc;
}
.tooltip.item-info.right .tooltip-arrow {
	border-right-color: #2f4050cc;
}
.tooltip.item-info.left .tooltip-arrow {
	border-left-color: #2f4050cc;
}
.tooltip.item-info.bottom .tooltip-arrow {
	border-bottom-color: #2f4050cc;
}

.tooltip-w-120 + .tooltip .tooltip-inner {
	width: 120px;
}

.lighter-success, table.table.table-striped tr.lighter-success td {
    background-color:#f1ffeb;
}

.lighter-danger, table.table.table-striped tr.lighter-danger td {
    background-color:#f2dede;
}

table.table.table-striped tr.alert-warning td {
    background-color:#fcf8e3;
}

.h-10 {
	min-height: 10px;
}

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

@media screen and (min-width: 1250px) and (max-width: 1700px){
	.import-description-height{
		height: 72px;
	}
}

@media screen and (min-width: 1200px) and (max-width: 1450px){
	.import-header-height{
		height: 39px;
	}
}

@media screen and (min-width: 1200px) and (max-width: 1382px){
	.import-description-height{
		height: 90px;
	}
}

@media screen and (min-width: 990px) and (max-width: 1120px){
	.import-description-height{
		height: 54px;
	}
}

.h-22 {
	min-height: 22px;
}

.faded-10 {
	opacity: 0.10;
}

.faded-80 {
	opacity: 0.80;
}

.no-wrap {
	white-space: nowrap;
}

.m-t-8 {
	margin-top: 8px;
}

.movable {
    cursor: move;
}

.fa-drag-handle:before {
    content: "\f142 \f142";
    letter-spacing: 0.1em;
}

.fs-13 {
 font-size: 13px;
}

.fs-14 {
	font-size: 14px;
}

.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;
}

.popover{
	max-width: 400px;
	z-index: 10000;
}

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

/*
https://github.com/t0m/select2-bootstrap-css/issues/42
select2 not respecting parent width
*/
.select2-container--default {
	display: table;
	table-layout: fixed;
}

.float-right{
	float: right;
}

/* site header notification */
.dropdown-notifications.dropdown-menu > .active > a {
  color: black;
  text-decoration: none;
  background-color: #f7f7f7;
  outline: 0;
}

.dropdown-notifications.dropdown-menu > .active > a:focus,
.dropdown-notifications.dropdown-menu > .active > a:hover {
  background-color: #f5f5f5;
}


.dropdown-notifications.dropdown-messages, .dropdown-alerts {
	padding: 0px;
}

.dropdown-notifications.dropdown-messages, .dropdown-alerts .notification-body{
  font-size: 11px;
  line-height: 18px;
}

.smaller-input > input[type=text] {
	min-width: 62px;
	max-width: 62px;
}

.smaller-input > textarea {
	max-height: 34px;
}

.smaller-field > input[type=text] {
	min-width: 57px;
	max-width: 57px;
}

.normal-white-space{
	white-space: normal;
}

.w-175{
	min-width: 175px;
}

.w-125{
	min-width: 125px;
}

.w-100{
	min-width: 100px;
}

.w-80{
	min-width: 80px;
}

.sticky-table {
	overflow: auto;
	max-height: 400px;
}

.sticky-table > table {
	border-collapse: separate;
}

.sticky-table > table > thead > tr > th {
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 10;
}

.sticky-table > table > tfoot > tr > td {
	position: sticky;
	bottom: 0;
	background: #fff;
	z-index: 10;
}

.v-align-top{
	vertical-align: top !important;
}

/* NAVBAR HEIGHT FIX */
.navbar-top-links.navbar-right .dropdown-toggle.user-menu {
	display: flex;
	align-items: center;
	padding: 4px 0;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	line-height: 1.4em;
}

.left-float{
	float: left;
}

.sticky-header .th1{
	position: sticky;
	top: 0;
	background-color: white;
}

.sticky-header .th2 {
	position: sticky;
	top: 35px;
	background-color: white;
}

.sticky-header .th1::after, .th2::after{
    content: '';
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: -1px;
    left: 0;
    border-bottom: 1px solid #e7eaec;
}

.w-85{
	width: 85px;
}

@media(min-width: 1300px) {
	.sticky-header {
		overflow-x: unset;
	}
}

.vertical-center {
	display: inline-block;
	vertical-align: middle;
	float: none;
}

.align-middle {
	vertical-align: middle !important;
}

.light-image {
	color: #d1d1d1;
}

.fa-7x{
	font-size: 7em;
}

.fa-5px{
	font-size: 5px;
}

.lh-1 {
	line-height: 1em;
}

.b-t-n {
	border-top: none !important;
}

.cursor-pointer {
	cursor: pointer;
}

.inline-middle {
	display: inline-block !important;
	vertical-align: middle;
}

.table-borderless,
.table-borderless > thead > tr > th, .table-borderless > thead > tr > td,
.table-borderless > tbody > tr > th, .table-borderless > tbody > tr > td,
.table-borderless > tfoot > tr > th, .table-borderless > tfoot > tr > td {
	border: none;
}

.label-primary.label-see-through {
	background-color: #1ab39430;
	color: #1ab394;
}
.label-success.label-see-through {
	background-color: #1c84c630;
	color: #1c84c6;
}
.label-warning.label-see-through {
	background-color: #f8ac5930;
	color: #f8ac59;
}
.label-danger.label-see-through {
	background-color: #ED556530;
	color: #ED5565;
}

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

 /* Remove trailing line in news overview */
.feed-element:last-child {
	border-bottom: none;
}

/* Knowledge base style */
.knowledge-base-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
 
.knowledge-base-icon i {
	font-size: 7em;
	color: #f8ac59;
}
 
.knowledge-base-content h3 {
	font-size: 1.5em;
}
 
.knowledge-base-content p {
	word-break: break-word;
}
 
@media screen and (min-width: 426px) {
	.knowledge-base-content p {
	    padding: 0 4em;
	}
}
 
@media screen and (min-width: 768px) {
	.knowledge-base-wrapper {
	    min-height: 300px;
	}
		   
	.knowledge-base-icon i {
	    font-size: 7em;
	}
 
	.knowledge-base-content p {
	    padding: 0;
	}
}
 
@media screen and (min-width: 992px) {
	.knowledge-base-content p {
	    padding: 0 2em;
	}
}

@media screen and (max-width: 767px) {
	.border-radius-tl-bl-3px {
		border-top-left-radius: 3px !important;
		border-bottom-left-radius: 3px !important;
	}
}

.max-h-300 {
	max-height: 300px;
}

.max-h-400 {
	max-height: 400px;
}

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

.max-character-7 > input[type=text] {
	min-width: 90px;
	max-width: 90px;
}

.col-width-label {
    width: 11%;
}

.col-width-month {
    width: 6.8%;
}

.comparison-table-layout {
	table-layout: fixed;
}

thead > #firstRow {
	background-color: #f9f9f9;
}

thead > #firstRow th {
	border-top: 2px solid #ffffff;
	border-right: 2px solid #ffffff;
}

thead > #placeholderRow,
thead > #secondRow {
	background-color: #ffffff;
}

thead > #placeholderRow th {
	border-bottom: 1px solid #ffffff;
}

thead > #placeholderRow > :nth-child(1) {
	position: sticky;
	left: 0;
	background-color: #ffffff;
}

.item-column-fixed-width {
	width: 600px;
}

.sq-column-fixed-width {
	width: 190px;
}

tr.comparison-table th.selected, tr.comparison-table td.selected {
	border-left: 2px solid #23c6c8 !important;
	border-right: 2px solid #23c6c8 !important;
}

tr#firstRow.comparison-table th.selected {
	border-top: 2px solid #23c6c8 !important;
}

tr#lastRow.comparison-table th.selected {
	border-bottom: 2px solid #23c6c8 !important;
}

tr.comparison-table td.comparison-border, th.comparison-border {
	border-right: 1px solid #e7eaec;
}

.supplier-quotation-table-wrapper {
    position: relative;
}

.fill-blank-prices-button-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    background-color: #fff;
    padding: 5px;
}

.supplier-quotation-sticky-table {
	overflow: auto;
	max-height: 600px;
	position: relative;
	top: 51px;
	margin-bottom: 45px;
}

.supplier-quotation-sticky-table > table > thead > tr {
	position: sticky;
	top: 0;
	z-index: 1;
}

.supplier-quotation-sticky-table > table > thead > #firstRow {
	top: 41px;
	height: 206px;
}

.supplier-quotation-sticky-table > table > thead > #secondRow {
	top: 247px;
}

.supplier-quotation-sticky-table > table {
	border-collapse: separate;
}

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

#supplierNameContainer {
	height: 40px;
	display: flex;
	flex-direction: row; 
	justify-content: center;
	align-items: center;
}

#supplierName {
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
	margin-bottom: 0px;
}

.supplier-form-number {
	font-size: 12px;
	font-weight: normal;
}

.item-total-count,
.item-total-cost {
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

thead > #placeholderRow > :nth-child(1),
thead > .comparison-table > :nth-child(1),
tbody > .comparison-table > :nth-child(1),
tfoot > .comparison-table > :nth-child(1) {
	position: sticky;
	left: 0;
}

thead > #firstRow > :nth-child(1) {
	background-color: #f9f9f9;
}

thead > #placeholderRow > :nth-child(1),
thead > #secondRow > :nth-child(1),
tbody > .comparison-table > :nth-child(1),
tfoot > .comparison-table > :nth-child(1) {
	background-color: #ffffff;
}

tbody > .comparison-table:hover > :first-child {
    background-color: #f5f5f5;
}

.cost-container {
	display: flex;
	flex-direction: column;
}

.cost-columns {
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.cost-column {
	width: 150px;
	text-align: right;
	flex: 1;
	position: static !important;
}

.dotted-underline {
	text-decoration: underline;
	text-decoration-style: dotted;
	cursor: pointer;
}

.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;
}

@media (max-width: 992px) {
	.comparison-table-layout {
		table-layout: auto;
	}

	thead > #placeholderRow > :nth-child(1),
	thead > .comparison-table > :nth-child(1),
	tbody > .comparison-table > :nth-child(1),
	tfoot > .comparison-table > :nth-child(1) {
		position: relative;
		min-width: 150px;
	}
}

.confirmation-page-container {
	display: flex;
	flex-direction: column;
	max-width: 600px;
	margin: 0 auto;
	padding: 20px 5px;
}

.confirmation-card {
    background: #fff;
    border-radius: 5px;
    padding: 10px 10px 20px;
}

.confirmation-card h2 {
	font-weight: 700;
	color: #505050;
}

.confirmation-footer {
	padding: 20px;
}

.confirmation-summary {
    background-color: #f2f4f9;
    padding: 10px;
    border-radius: 5px;
	margin: 20px 0;
}

.confirmation-summary h5 {
	color: #707070;
	font-weight: 500;
	font-size: 13px;
}

.confirmation-summary .transaction-number {
	font-size: 18px;
	font-weight: 700;
	color: #505050;
}

.confirmation-summary .transaction-label {
	color: #505050;
	font-size: 13px;
	margin-top: 0;
}

@media screen and (min-width: 768px) {
	.confirmation-page-container {
		justify-content: center;
	}

	.confirmation-card {
		padding: 30px 30px 50px;
	}

	.confirmation-summary {
		padding: 20px;
		margin: 30px 0;
	}
}

.selected-supplier-spacer {
	display: flex;
	justify-content: left;
	align-items: center;
	height: 40px;
}

.selected-supplier-spacer .selected-supplier-label {
	margin-top: auto;
	background: #23c6c8;
    color: #fff;
	border-radius: 4px 4px 0 0;
	padding: 9px;
	font-size: 11px;
	font-weight: 600;
}

.supplier-content {
	height: 450px;
	display: flex;
	flex-direction: column;
	border: 1px solid #e7eaec;
    padding: 10px;
    margin-bottom: 20px;
}

.supplier-content.selected-supplier {
	border: 2px solid #23c6c8;
}

.supplier-content .supplier-content-header {
	flex: 0 0 auto; /* to maintain its min-height since this class is a flex item */
	display: flex;
	min-height: 20px;
}

.supplier-content .supplier-details {
	flex: 0 0 auto; /* to maintain its min-height since this class is a flex item */
	min-height: 80px;
}

.supplier-content.supplier-content-add > a {
	height: 100%;
	color: #303030;
}

.supplier-content.supplier-content-add {
	background-color: #f3f3f3;
}

.supplier-content.supplier-content-add:hover {
	background-color: #e0e0e0;
}

.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;
}

.name-list-container {
    display: flex;
    align-items: end;
}

.name-list-content {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.name-list-content-expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
    display: inline;
}

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

.bid-history-container:hover .scrollbar::-webkit-scrollbar-thumb,
.user-comment-container:hover .scrollbar::-webkit-scrollbar-thumb {
    background-color: #707070;
    border-radius: 10px;
}

.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%;
}

.tr-disabled {
	cursor: not-allowed;
}

/* 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;
}

.nav-scrollable {
	max-height: 500px;
	overflow-x: hidden;
	overflow-y: auto;
	word-wrap: break-word;
}

.table-fix-scrollable {
	height: 500px;
	overflow-y: auto;
	overflow-x: auto;
}

.overflow-x-hidden {
	overflow-x: hidden;
}

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

/* 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;
}

.item-number-col {
    max-width: 60px;
}