:root {
	--wvm_red: #AC1F2D;
	--wvm_warning: #F4C430;
	--wvm_success: #007739;
	--wvm_info: #039BE5;
	--wvm_primary: #1565c0;
	--wvm_secondary: #6c757d;
	--wvm_light: #f8f9fa;
	/* --wvm_light: #BDBDBD; */
	--wvm_dark: #4F4F4F;
}

body, html {
	height: 100%;
	margin: 0;
	background-color: #f5f5f5;
	font-family: "Roboto", Arial, sans-serif;
	letter-spacing: 0.25px;
	font-weight: 400;
	font-size: 14px;
}
.top-bar {
	background-color: var(--wvm_red);
	color: white;
	height: 70px;
	padding: 0px 20px;
	border-bottom: 1px solid #333;
	width: 99.75vw;	/* Set max width to eliminate side scrolling */
}
	.top-bar .icon-links .material-icons,
	.top-bar .icon-links .material-icons-outlined {
		padding: 8px;
	}
	.top-bar .material-icons.pseudo-btn {
		padding: 14px 18px;
	}
	/* .top-bar .btn-icon .material-icons,
	.top-bar .btn-icon .material-icons-outlined, */
	.collapse-menu-icon {
		padding: 5px;
	}
	.top-bar .btn-icon .material-icons:hover,
	.top-bar .btn-icon .material-icons-outlined:hover,
	.collapse-menu-icon:hover {
		color: #efefef !important;
		background: rgba(0,0,0, 0.3);
		-webkit-transition: background 0.2s, color 0.2s;
		-moz-transition: background 0.2s, color 0.2s;
		transition: background 0.2s, color 0.2s;
		border-radius: 50%;
	}
	.icon-links .material-icons {
		color: white;
		/* margin-left: 10px; */
		cursor: pointer;
	}
	.collapse-menu-icon {
		cursor: pointer;
		color: white;
	}
	.logo {
		width: 80%;
		margin: 0 auto;
	}
		@media (max-width: 1200px) {
			.logo {
				width: 100%;
			}
		}

.sidebar {
	background-color: #ffffff;
	min-height: calc(100vh - 100px); /* Adjust height to account for the top bar */
	border-right: 1px solid #c4c8cb;
	padding-bottom: 60px;
}
	.sidebar-footer {
		margin-top: 50px;
		padding-top: 20px;
		text-align: center;
		color: #424242;
	}

.main-content {
	background-color: #f8f9fa;
	width: calc(100vw - 290px);	/* Set max width to eliminate side scrolling */
	/* height: calc(100vh - 60px); /* Adjust height to account for the top bar and footer */ */
	/* overflow-y: auto; /* Enable scrolling */ */
	padding-bottom: 60px;
}
.footer {
	height: 45px;
	line-height: 45px;
	text-align: center;
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #f5f5f5;
	color: #424242;
}

@media (max-width: 1030px) {
	.top-bar {
		height: 250px; /* Triple the height for mobile */
		padding: 15px 20px; /* Adjust padding for mobile */
		width: 100%; /* Adjust width for mobile */
		margin: 0;
	}
	.main-content {
		height: calc(100vh - 210px - 45px); /* Adjust height to account for the taller top bar and footer */
	}
	.col-menu {
		width: 100%;
		height: auto;
		padding-bottom: 80px;
	}
}

@media (min-width: 1400px) {
	.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
		max-width: 100% !important;
	}
}

@media (min-width: 1200px) {
	.container-xl, .container-lg, .container-md, .container-sm, .container {
		max-width: 100% !important;
	}
}


.card,
.card-header,
.card-header:first-child {
	border-radius: 0 !important;
}

/**************************************************************
				SIDEBAR MENU
**************************************************************/
.col-menu {
	width: 275px;
}

a.nav-link {
	color: #333;
	font-size: 16px;
	line-height: 16px;
}
	a.nav-link:hover {
		color: var(--wvm_red);
	}

.nav-link:hover {
	background-color: #f5f5f5;
}

.nav-link-icon {
	display: inline-flex;
	margin-right: .5rem;
	vertical-align: text-top;
}
.nav-link-icon .material-icons {
	font-size: 1.35rem;
	line-height: 16px;
	color: #757575;
}

.caret {
  float: right;
}
.submenu {
	display: none;
	padding-left: 20px;
}

.navbar-menu-heading {
	padding: 3px 5px 3px 15px;
	margin-top: 0.75rem;
	margin-bottom: 0.25rem;
	font-size: 1.125rem;
	background-color: var(--wvm_red);
	color: #fff;
	font-weight: 500;
	text-transform: uppercase;
	}
.navbar-menu-divider {
	display: block;
	height: 0px;
	border-top-style: solid;
	border-top-width: 1px;
	margin-top: 2.5rem;
	margin-bottom: 0;
}

.quick-look {
	border-left: #000000 6px solid;
}
	.quick-look-danger {
		border-left: var(--wvm_red) 6px solid;
	}
	.quick-look-success {
		border-left: var(--wvm_success) 6px solid;
	}
	.quick-look-primary {
		border-left: var(--wvm_primary) 6px solid;
	}


/********* FIX ISSUE WITH TYPE ALIGNMENT IN BLOCK BUTTONS ************/
.exports .btn {
	display: inline-block !important;
}

#consignorinfoblock dd,
#consignorinfoblock dt {
	font-size: 0.85rem;
	margin-bottom: 0;
	padding-bottom: 0;
}

	#consignorinfoblock dt {
		font-weight: 500;
	}

/**************************************************************/
/*		 FIX DATA TABLES SO THEY RESIZE WHEN SIDEBAR CLOSED	  */
/**************************************************************/

.dataTables_scrollHeadInner, .table{
	width: 100% !important;
};


/*************** ************************* ***************/
/*************** SEARCH RESULTS IN TOP BAR ***************/
/*************** ************************* ***************/
.searchresults p {
	margin: 0;
	padding: 0;
	font-size: 13px;
}

.app-search {
	width: 100%;
}

#intelligentSearchResults {
	top: 50px !important;
}
.intellisearchresults {
	display: none;
	position: absolute;
	margin: 0;
	padding: 0;
	top: 45px;
	left: 0;
	width: 40vw;
	z-index: 10;
	margin: 0 0 0 10px;
}

@media only screen and (max-width: 1274px){
	.intellisearchresults {
		width: 50vw;
	}
}

@media only screen and (max-width: 830px){
	.intellisearchresults {
		width: 80vw;
	}
}

.intellisearchresults .card {
	border-width: 1px;
}
.intellisearchresults .shadow {
	-webkit-box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.5)!important;
	box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.5)!important;
}

.intellisearchresults .result-type {
	float: left;
	margin-right: 10px;
	height: 38px;
}


/**************************************************************/
/*		 On Screen Proofs Views				*/
/**************************************************************/

	/* PROOFS */
.proof p {
	margin: 0;
	padding: 0;
	color: #000;
	font-family: 'Arial',sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 16px;
	overflow-wrap: break-word;
}
	.proof .strike-out {
		color:red;
		text-decoration:line-through;
		padding-left: 2px;
		padding-right: 2px;
	}
		.proof .strike-text {
			color: #000;
		}

	.proof .bg-warning {
		padding-left: 2px;
		padding-right: 2px;
		background-color: #ffc107;
	}
	.proof .notification {
		color: #ec1c24;
		margin-left: 15px;
	}
	.proof .oneLot {
		break-inside: avoid;
		break-after: auto;
		margin: 0 0 5px 0;
		padding-bottom: 2px;
		border-bottom: 2px solid #000000;
	}
		.proof .oneLot:last-child {
			border-bottom: none;
		}



/**************************************************************
			TOP BAR DROP DOWN MENUS
**************************************************************/

.dropdown .dropdown-menu .dropdown-item {
	overflow: hidden;
	height: 3rem;
	align-items: center;
	display: flex;
}
.dropdown .dropdown-menu .dropdown-item .leading-icon {
	margin-right: 1.25rem;
	margin-left: 0.5rem;
	color: rgba(0, 0, 0, 0.38);
}

.top-bar .dropdown-toggle::after {
	display: none !important;
}


/**************************************************************
				BASIC WVM FORMATTING
**************************************************************/

.link-dark:focus, .link-dark:hover {
	color: var(--wvm_red) !important;
	-webkit-text-decoration-color:var(--wvm_red) !important;
	text-decoration-color: var(--wvm_red) !important;
}

.isDisabled {
	cursor: not-allowed;
}

.wvm-card-head {
	background: #212529;
	color: #fff;
	text-transform: uppercase;
	font-weight: 400;
	padding: 0.5rem;
	margin: 0;
}


.tooltip > .tooltip-inner {
		text-align: left;
	}

.link-dark {
	text-decoration: none;
	color: #000000;
}

.accordion-button:not(.collapsed) {
  color: #333;
  background-color: #eeeeee;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);
}

.dataTables_wrapper .dataTables_filter input::-webkit-search-cancel-button {
  -webkit-appearance: button !important;
  -moz-appearance: button !important;
}

.dashboard-menu hr {
	margin: 6px 0 8px 0 ;
}



/**************************************************************
				CUSTOM BACKGROUND & TEXT COLORS
**************************************************************/
.text-wvm,
.text-danger {
	color: var(--wvm_red) !important;
}
	.text-danger-50 {
		color: #D68F96 !important;
	}

.text-primary {
	color: var(--wvm_primary) !important;
}

.text-secondary {
	color: var(--wvm_secondary !important);
}

.text-success {
	color: var(--wvm_success) !important;
}
	.text-success-50 {
		color: #7fbb9c !important;
	}

.text-warning {
	color: var(--wvm_warning) !important;
}

.text-info {
	color: var(--wvm_info) !important;
}

.text-light {
	color: var(--wvm_light) !important;
}

.text-dark {
	color: var(--wvm_dark) !important;
}

.bg-info,
.text-bg-info {
	background-color: var(--wvm_info) !important;
}

.bg-primary,
.text-bg-primary {
	background-color: var(--wvm_primary) !important;
}

.bg-secondary,
.text-bg-secondary {
	background-color: var(--wvm_secondary) !important;
}

.bg-success,
.text-bg-success {
	background-color: var(--wvm_success) !important;
}

.bg-danger,
.text-bg-danger {
	background-color: var(--wvm_red) !important;
}

.bg-warning,
.text-bg-warning {
	background-color: var(--wvm_warning) !important;
}

.bg-light,
.text-bg-light {
	background-color: var(--wvm_light) !important;
}

.bg-light-op {
	background-color: rgba(186, 187, 188, 0.25);
}

.bg-dark,
.text-bg-dark {
	background-color: var(--wvm_dark) !important;
}

.bg-danger-50 {
	background-color: #d58f96 !important;
}
.bg-danger-25 {
	background-color: #e6bbc0 !important;
}
.bg-danger-10 {
	background-color: #f6e8ea !important;
}
.bg-warning-50 {
	background-color: #f9e197 !important;
}
.bg-warning-25 {
	background-color: #fbedc0 !important;
}
.bg-warning-18 {
	background-color: #fcf3d5 !important;
}
.bg-warning-10 {
	background-color: #fdf9ea !important;
}
.bg-success-50 {
	background-color: #7fbb9c !important;
}
.bg-success-25 {
	background-color: #b2d6c3 !important;
}
.bg-success-10 {
	background-color: #e5f1eb !important;
}
.bg-info-50 {
	background-color: #81cdf2 !important;
}
.bg-info-25 {
	background-color: #b3e1f7 !important;
}
.bg-info-18 {
	background-color: #ccebf9 !important;
}
.bg-info-10 {
	background-color: #e5f5fc !important;
}
.bg-medium {
	background-color: #dededf;
}
.bg-wvm {
	background-color: var(--wvm_red);
}


/**************************************************************
				Tweak Button Formatting
**************************************************************/

.btn {
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 1.1px;
}

/* PRIMARY BUTTONS */
.btn-primary {
	border-color: var(--wvm_primary);
	background-color: var(--wvm_primary);
}
	.btn-primary:hover {
		border-color: #0e4686;
		background-color: #0e4686;
	}
.btn-outline-primary {
	border-color: var(--wvm_primary);
	color: var(--wvm_primary);
	background-color: #fff;
}
	.btn-outline-primary:hover {
		border-color: #0e4686;
		background-color: #0e4686;
	}

/* SECONDARY BUTTONS */
.btn-secondary {
	border-color: var(--wvm_secondary);
	background-color: var(--wvm_secondary);
}
	.btn-secondary:hover {
		border-color: #4b5157;
		background-color: #4b5157;
	}
.btn-outline-secondary {
	border-color: var(--wvm_secondary);
	color: var(--wvm_secondary);
	background-color: #fff;
}
	.btn-outline-secondary:hover {
		border-color: #4b5157;
		background-color: #4b5157;
	}

/* SUCCESS BUTTONS */
.btn-success {
	border-color: var(--wvm_success);
	background-color: var(--wvm_success);
}
	.btn-success:hover {
		border-color: #005327;
		background-color: #005327;
	}
.btn-outline-success {
	border-color: var(--wvm_success);
	color: var(--wvm_success);
	background-color: #fff;
}
	.btn-outline-success:hover {
		border-color: #005327;
		background-color: #005327;
	}

/* DANGER BUTTONS */
.btn-danger {
	border-color: var(--wvm_red);
	background-color: var(--wvm_red);
}
	.btn-danger:hover {
		border-color: #78151f;
		background-color: #78151f;
	}
.btn-outline-danger {
	border-color: var(--wvm_red);
	color: var(--wvm_red);
	background-color: #fff;
}
	.btn-outline-danger:hover {
		border-color: #78151f;
		background-color: #78151f;
	}

/* WARNING BUTTONS */
.btn-warning {
	border-color: var(--wvm_warning);
	background-color: var(--wvm_warning);
	color: #000;
}
	.btn-warning:hover {
		border-color: #dbb02b;
		background-color: #dbb02b;
		color: #000;
	}
.btn-outline-warning {
	border-color: var(--wvm_warning);
	color: var(--wvm_warning);
	background-color: #fff;
}
	.btn-outline-warning:hover {
		border-color: #dbb02b;
		background-color: #dbb02b;
		color: #000;
	}

/* INFO BUTTONS */
.btn-info {
	border-color: var(--wvm_info);
	background-color: var(--wvm_info);
	color: #fff;
}
	.btn-info:hover {
		border-color: #026ca0;
		background-color: #026ca0;
		color: #fff;
	}
.btn-outline-info {
	border-color: var(--wvm_info);
	color: var(--wvm_info);
	background-color: #fff;
}
	.btn-outline-info:hover {
		color: #fff;
		border-color: #026ca0;
		background-color: #026ca0;
	}

/* LIGHT BUTTONS */
.btn-light {
	border-color: var(--wvm_light);
	background-color: var(--wvm_light);
}
	.btn-light:hover {
		border-color: #848484;
		background-color: #848484;
	}
.btn-outline-light {
	border-color: var(--wvm_light);
	color: var(--wvm_secondary);
	background-color: #fff;
}
	.btn-outline-light:hover {
		border-color: #848484;
		background-color: #848484;
	}

/* DARK BUTTONS */
.btn-dark {
	border-color: var(--wvm_dark);
	background-color: var(--wvm_dark);
}
	.btn-dark:hover {
		border-color: #000000;
		background-color: #000000;
	}
.btn-outline-dark {
	border-color: var(--wvm_dark);
	color: var(--wvm_dark);
	background-color: #fff;
}
	.btn-outline-dark:hover {
		border-color: #000000;
		background-color: #000000;
	}
/* bootstrap modal */
.bg-maroon {
	background-color: var(--wvm_red);
}
.modal-header.bg-maroon h5{
	color: #fff;
}
/* Custom styles for buttons with the bg-maroon class */
.btn-outline-primary.bg-maroon {
	color: var(--wvm_red) !important;      /* Set the font color */
	border-color: var(--wvm_red) !important; /* Set the outline (border) color */
	background-color: white !important; /* Set the background to white */
  }

  /* Add hover effect */
  .btn-outline-primary.bg-maroon:hover {
	color: var(--wvm_red) !important;      /* Set the font color */
	border-color: var(--wvm_red) !important; /* Set the outline (border) color */
	background-color: white !important; /* Set the background to white */
  }
  .btn-primary.bg-maroon {
	background-color: var(--wvm_red) !important; /* Default maroon background */
	border-color: var(--wvm_red) !important;    /* Default maroon border */
	color: white !important;             /* Default text color */
  }
  .btn-primary.bg-maroon:hover {
	background-color: var(--wvm_red) !important; /* Darker shade on hover */
	border-color: var(--wvm_red) !important;    /* Darker border on hover */
  }
  .modal-header h5{text-transform: uppercase;}



  /*Mobile view changes*/
  .offcanvas-collapse{z-index: 9999;}
  .auction-date-box {
	background-color: var(--wvm_red) !important;
	color: white;
	padding: 16px;
	border-radius: 8px;
	text-align: center;
	width: 120px;

}
.auction-title {

	text-transform: uppercase;
}
.auction-date-box h2 {
	font-weight: bold;
	margin-bottom: 0;
}

.auction-date-box p {
	font-size: 1.2rem;
	margin-bottom: 0;
}

.expand-icon {
	background-color: #f8f9fa; /* Light background */
	border: 2px solid var(--wvm_red) !important;
	color: var(--wvm_red) !important;
	padding: 0px;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

.expand-icon:hover {
	background-color: var(--wvm_red) !important;
	color: white !important;
}

/* Label style for contract name */
.c-label {
	color: #6c757d; /* Gray color for the label */
}

/* Value style for contract name */
.c-value {
	color: #495057; /* Blue color for the value */
}

.custom-card {
	border-left: 5px solid #A81F2C !important; /* Add left border with #A81F2C color */
}
.custom-card:hover {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Slight shadow effect */
	transform: translateY(-5px); /* Slight lift on hover */
	transition: all 0.3s ease; /* Smooth transition */
}
.transition-icon {
	transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
	border: 2px solid #A81F2C;
	color: #A81F2C;
}
.collapse {
	transition: height 0.3s ease; /* Smooth collapse transition */
}
.transition-icon:hover {

	background-color: #A81F2C;
	color: white;
}
.card {
	cursor: pointer;
}
.card-body {
	position: relative;
}
.card-title, .card-text {
	font-size: 1rem;
	color: #495057;
}
.card-body p {
	font-size: 1rem;
	margin: 5px 0;
}
.card-body .bi {
	font-size: 1.0rem;
	font-weight: bold;
}

.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}