/*************************************************************************************************************************************************************************************************
Strategic Asset Management CSS designed in-house at SVD
*************************************************************************************************************************************************************************************************/

/*** BRAND COLORS

SVD Cobalt Blue: #4f76f7
Techfootin Green: #92bf31
Shared Navy: #373F4C
Alternate White: #f7f7f9
Alternate White 2: #efeff2


***/


*, *::before, *::after {
	box-sizing: border-box;
}

ul {
	list-style-type: none;
	margin: 10px 0 0;
	padding: 0;
}

ol {
	font-size: 0.9em;
	margin: 30px 0;
}

ol li,
li {margin-bottom: 5px;}

a {cursor: pointer; color: #4f76f7; text-decoration: none;}
a, a:visited {
	outline: none;
	text-decoration: none;
	cursor: pointer;
}


a,
button,
label,
input,
textarea {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* remove gray click box on mobile */
	transition: all 180ms ease-in-out;
}

*:focus {outline: none;}

h1, h2, h3, h4 {
	font-family: 'FFMarkWebProMedium', sans-serif;
	font-weight: normal;
	font-style: normal;
	margin: 0;
}

h2 {font-size: 1.6em; line-height: 1.2;}
h2.small {font-size: 1.3em; line-height: 1.2;}

h3 {
	font-family: 'FFMarkWebProBold', sans-serif;
	font-size: 1.1em;
	margin-bottom: 20px;
}


body {
	position: relative;

	font-family: 'FFMarkWebProMedium', sans-serif;
	font-feature-settings: "ss01" 1;
	font-style: normal;
	font-weight: normal;
	font-size: 1em;
	line-height: 1.5;
	color: #656d7b;
	background: rgb(222, 221, 222);
 	max-width: 100%;
	margin: 0 auto;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}

.content-container {
	position: relative;
	max-width: 2000px;
	margin: 0 auto;
}


p {
	font-family: 'FFMarkWebProMedium', sans-serif;
	font-size: 0.95em;
	line-height: 1.5;
	font-weight: normal;
}

hr {border: 1px solid #e7edf0;}

main {background: #deddde; padding-top: 104px; min-height: 1000px;}

#poly-bg {position:relative; width: 100%;}



.dynamic-background {
	position: relative;
	height: 100%;
	overflow: hidden;
	background: #22272F;
}

.login-slide {
/*	display: none;*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* preserve aspect ratio */
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
.text-content {
	position: relative;
	img {
		@media (max-width: 600px) {
			width: 150px !important;
		}
	}
}
.text-slide {
	/*	display: none;*/
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* preserve aspect ratio */
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

/*.login-slide:first-child {
	display: block;
}*/
.login-wrap {
	@media (max-width: 600px) {
		padding: 20px !important;
	}
}
.login-box {
	@media (max-width: 950px) {
		margin-top: 200px !important;
	}
	@media (max-width: 600px) {
		margin-top: 340px !important;
	}
}
span.dynamic-cover {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: url(https://undark.org/wp-content/uploads/2017/11/biotechdistrust.jpg);
	background-size: cover;
	background-position: center center;
	z-index: 1;
	animation: smooth 3s ease;
}

span.dynamic-gradient-dark {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(0,0,0,0.5), rgba(0,0,0,0));
	z-index: 2;
}

span.dynamic-cover.login {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: orange;
	background-size: cover;
	background-position: center center;
	z-index: 1;
	animation: loginSlider 20s infinite;
}

@keyframes loginSlider {
	0% {background: url("https://www.festo.com/media/cms/central/media/editorial/img/automation/electric-automation_simplified-motion-series_24967c_9-festo_fix1920x880.jpg");	background-size: cover;
	background-position: center center;
}
	25% {background: url("https://media.ed.edmunds-media.com/bmw/x3/2022/oem/2022_bmw_x3_4dr-suv_xdrive30i_fq_oem_1_1600.jpg");	background-size: cover;
	background-position: center center;

}
	50% {background: url(https://www.bmw.com/content/dam/bmw/marketBMWCOM/bmw_com/events/ces2022/artmode/BMW_CES_03_art_mode_hd.jpg.asset.1641290439873.jpg);	background-size: cover;
	background-position: center center;
}
	75% {background: url(https://gtspirit.com/wp-content/uploads/2021/03/2022-BMW-M3-Portimao-Blue-40.jpg);	background-size: cover;
	background-position: center center;
}
	100% {background: url(https://pdc.wisc.edu/wp-content/uploads/2019/02/biotech-microscope-1-913394714-2000px.jpg);	background-size: cover;
	background-position: center center;
}
}




/*************************************************************************************************************************************************************************************************
Common
*************************************************************************************************************************************************************************************************/
div#load_screen {
	background: #f7f7f9;
	display: table;
	opacity: 1;
	position: fixed;
    z-index:100;
	top: 0px;
	left: 0;
	width: 100vw;
	height: 100vh;
}

div#load_screen > div#loading {
	display: table-cell;
	vertical-align: middle;
	margin: 0 auto;
	text-align: center;
}


.section-container-border {
	border: 1.6px solid #d3dbe1;
	border-radius: 3px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-bottom: 20px;
}

.section-container {
	padding-top: 20px;
	padding-bottom: 20px;
}

.bold {
  font-family: 'FFMarkWebProBold', sans-serif;
}

.minimize {
  font-size: 0.85em;
}

.message-preview {
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

/* Text align left/right on desktop and center on mobile */
.left-to-center {text-align: left;}
.right-to-center {text-align: right;}

ul.bullet-list {
	display: block;
	list-style-type: disc;
	margin: 20px 0 60px 0;
	padding-left: 30px;
}

ul.number-list {
	display: block;
	list-style-type: decimal;
	margin: 20px 0 60px 0;
	padding-left: 30px;
}

.bullet-list li,
.number-list li {margin-bottom: 20px;}

.right-bdr {border-right: 1.6px solid #d3dbe1; padding-left: 7px;}
.left-bdr {border-left: 1.6px solid #d3dbe1;}
.top-bdr {border-top: 1.6px solid #d3dbe1;}
.bottom-bdr {border-bottom: 1.3px solid #656d7b;}

.past-event {border-bottom: 2.3px solid #deddde; padding-top: 10px; padding-bottom: 10px;}
.past-event:last-of-type {border-bottom: none;}

.sam-stats-illustration {
	display: flex;
	width: 300px;
	height: 250px;
	margin: 0 auto 20px;
	overflow: hidden;
	align-items: center;
	align-content: center;
	background: url("../images/sam-stats-illustration.png");
	background-repeat: no-repeat;
	background-size: 300px 250px;
}

.sam-stats-illustration > img {
	margin: 0 auto;
	border-radius: 50%;
	box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}

.smart-logo-container {
	display: flex;
	width: 100px;
	height: 50px;
	margin: 0 auto;
	overflow: hidden;
	align-items: center;
}

.smart-logo-container > img {width: 100%;}

.questions {margin-bottom: 10px;}

.subtle-suggestion {
  display: inline-block;
  font-size: 0.8em;
  color: #4f76f7;
  background: #e0e7f9;
  padding: 3px 10px 5px;
  border-radius: 3px;
  opacity: 1;
}

.subtle-suggestion:hover {opacity: 0.7;}

.milestone-board {
  text-align: center;
  padding: 20px 40px;
  border-radius: 3px;
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}

.milestone-message {
  display: block;
  font-size: 1.2em;
}

.table-content {
  display: table;
  height: 400px; /* exaggerated so you can define height on needed element */

}

.middle-content {
  display: table-cell;
  vertical-align: middle;
}

.outline-button {
	cursor: pointer;
	display: inline-block;
	font-size: 0.9em;
	font-family: 'FFMarkWebProBold', sans-serif;
	padding: 16px 32px;
	border: 1.6px solid #4f76f7;
	color: #4f76f7;
	border-radius: 3px;
	margin: 10px 10px 10px 0;
	transition: all 180ms ease-in-out;
}

.outline-button.accept {
	cursor: pointer;
	display: inline-block;
	font-size: 0.9em;
	font-family: 'FFMarkWebProBold', sans-serif;
	padding: 16px 32px;
	border: 1.6px solid #755cd8;
	color: #755cd8;
	border-radius: 3px;
	margin: 10px 10px 10px 0;
	transition: all 180ms ease-in-out;
}



.outline-button.decline {
	color: #d3475f;
	border: 1.6px solid #d3475f;

}


.outline-button:hover {
	background: #4f76f7;
	border: 1.6px solid #4f76f7;
	color: white;
	box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}

.outline-button.accept:hover {
	background: #755cd8;
	border: 1.6px solid #755cd8;
	color: white;
	box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}

.outline-button.decline:hover {
	background: #d3475f;
	border: 1.6px solid #d3475f;
	color: white;
	box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}


.selected.outline-button {
	background: #4f76f7;
	color: white;
}

.selected-decline.outline-button {
	background: #d3475f;
	color: white;
	border: 1.6px solid #d3475f;
	box-shadow: 0 5px 15px rgba(21,57,133,0.15);

}



.card-cta {
	display: inline-block;
	font-size: 0.9em;
	font-family: 'FFMarkWebProBold', sans-serif;
	padding: 16px 32px;
	border: 1.6px solid #4f76f7;
	color: #4f76f7;
	border-radius: 3px;
	margin-top: 10px;
	transition: all 180ms ease-in-out;
	text-align: center;
}

.card-cta:hover {
  background: #4f76f7;
  color: white;
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}

.card-cta.red {
	display: inline-block;
	font-size: 0.9em;
	font-family: 'FFMarkWebProBold', sans-serif;
	padding: 16px 32px;
	border: 1.6px solid rgba(216,96,123,1.00);
	color: rgba(216,96,123,1.00);
	border-radius: 3px;
	margin-top: 10px;
	transition: all 180ms ease-in-out;
}

.card-cta.red:hover {
  background: rgba(216,96,123,1.00);
  color: white;
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}

.gray-button {
	display: inline-block;
	cursor: pointer;
	font-size: 0.9em;
	font-family: 'FFMarkWebProBold', sans-serif;
	padding: 16px 32px;
	color: #656d7b;
	background: linear-gradient(to right, #f7f7f9, #efeff2);
	border-radius: 3px;
	transition: all 180ms ease-in-out;
}

.gray-button:hover {
	color: #4f76f7;
}

.white-outline-button,
.white-outline-button.milestone {
  display: inline-block;
  color: white;
  border: 1.6px solid white;
  border-radius: 3px;
  padding: 16px 32px;
  font-size: 0.85em;
}

.white-outline-button:hover {
  border: 1.6px solid #4f76f7;
  background: #4f76f7;
  color: white;
}

.white-outline-button.milestone:hover {
  border: 1.6px solid white;
  padding: 15px 25px;
}


.screenshot {
	width: 100%;
	max-width: 600px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}





/*** BACKGROUNDS ***/
.svd-cobalt-bg {background: #4f76f7;}
.techfootin-green-bg {background: linear-gradient(to left, #8ab72a,#38a076); transition: all 180ms ease;}
.shared-navy-bg {background: #373F4C;}
.alt-white-bg {background: #f7f7f9;}
.alt-gray-bg {background: #efeff2;}
/*.white-bg {background: #fff;}*/
.aim-gradient-bg {background: linear-gradient(to right, #92bf31,#92bf31); transition: all 180ms ease;}
.aim-login-bg {background: linear-gradient(to top, #4dc1dd,#0a1954); transition: all 180ms ease;}
.aim-angle-bg {background: linear-gradient(to left, #4dc1dd, #0a1954);  transition: all 180ms ease;}
.onesource-bg {background: linear-gradient(#eeedee, #deddde);  transition: all 180ms ease;}
.techfootin-gradient-bg {background: linear-gradient(to left, #8ab72a, #1a7852);  transition: all 180ms ease;}
.sam-gradient-bg {background: linear-gradient(to right, #4f76f7, #4dc1dd);  transition: all 180ms ease;}
.sam-angle-bg {background: linear-gradient(to left, #92bf31, #0a1954);  transition: all 180ms ease;}

.login-bg {
	background: url('https://media.ed.edmunds-media.com/bmw/x3/2022/oem/2022_bmw_x3_4dr-suv_xdrive30i_fq_oem_1_1600.jpg');
	background-size: cover;
	background-position: center center;
}



/*** COLORS ***/
.svd-cobalt {color: #4f76f7;}
.purple {color: #755cd8;}
.svd-soft {color: #e0e8fe;}
.svd-light-blue {color: #4dc1dd;}
.techfootin-green {color: #92bf31;}
.shared-navy {color: #373F4C;}
.alt-white {color: #f7f7f9;}
.alt-gray {color: #e0e7f9;}
.subtle-text {color: #656d7b;}


.smaller-text {font-size: 0.7em;}
.bold {font-family: 'FFMarkWebProBold', sans-serif;}

.aim-button {
  display: inline-block;
  margin: 0 10px 10px 0;
  transition: all 180ms ease-in-out;
}

.aim-button span {
  display: inline-block;
  font-family: 'FFMarkWebProBold', sans-serif;
  color: white;
  padding: 15px;
  border-radius: 3px;
  background: #92bf31;
  transition: all 180ms ease-in-out;
}

.aim-button span:hover {
  background: #5cc7c0;
}


.rounded-button {
  display: block;
  font-size: 0.9em;
  font-family: 'FFMarkWebProBold', sans-serif;
  text-align: center;
  cursor: pointer;
  padding: 13px 20px;
  border-radius: 3px;
  color: #656d7b;
  border: 1.6px solid #4f76f7;
  margin-bottom: 20px;
  transition: all 180ms ease;
}


.rounded-button.green {
  color: #656d7b;
  border: 1.6px solid #4f76f7;
}


.rounded-button:hover {
  color: white;
  background: #4f76f7;
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}



/* Upload button */
.upload {
	display: block;
	text-align: center;
	color: #656d7b;
	/*background: linear-gradient(to right, #f7f7f9, #efeff2);*/
	padding: 20px;
	border-radius: 3px;
	transition: all 100ms ease-in-out;
}

.upload span {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	color: #4f76f7;
	font-size: 0.9em;
	font-family: 'FFMarkWebProBold', sans-serif;
	padding: 14px 30px;
	border: 1.5px dashed;
	border-radius: 3px;
	transition: all 150ms ease-in-out;
	overflow: hidden;
}

.upload span:after {
  display: inline-block;
  content: 'Upload Asset List';
  transition: all 140ms ease-in-out;
}

.upload span:before {
  position: absolute;
  display: block;
  vertical-align: top;
  content: '';
  width: 30px;
  height: 30px;
  background-size: 30px 30px;
  background-image: url(../images/icon-upload-arrow.svg);
  background-repeat: none;
  transform: translate(50px, 45px);
  opacity: 0;
  transition: all 160ms ease-in-out;
}

.upload:hover span {
	color: #4f76f7;
}

.upload:hover span:before {
  transform: translate(50px, -4px);
  opacity: 1;
}

.upload:hover span:after {
  transform: translate(0, -30px);
  opacity: 0;
}



/* Download button */
.download {
  display: inline-block;
  color: #4f76f7;
  font-size: 0.9em;
  border: 1.6px solid;
  border-radius: 3px;
  padding: 12px 28px;
  transition: 0.3 ease-in-out;
}

.download.preliminary {
  color: #4f76f7;
}

.download:hover {
  border: 1.6px solid #4f76f7;
  background: #4f76f7;
  color: white;
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}

.download.preliminary:hover {
  border: 1.6px solid #4f76f7;
  background: #4f76f7;
  color: white;
}







span.overline {
  display: block;
  color: #656d7b;
}

h2.headline {
  font-size: 1.3em;
  font-family: 'FFMarkWebProMedium', sans-serif;
  margin-bottom: 10px;
}

h2.section-header {
  font-size: 1em;
  font-family: 'FFMarkWebProBold', sans-serif;
  color: #373F4C;
}


h2.section-header.company-logo:before {
  display: inline-block;
  vertical-align: middle;
  content: "";
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url(../images/user-logo.jpg);
  background-size: cover;
  background-position: center center;
  margin-right: 5px;
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);

}

.module-header {
	display: inline-block;
	font-size: 1.3em;
	font-family: 'FFMarkWebProBold', sans-serif;
	color: #373F4C;
	margin: 0 12px 0 0;

}

.module-link {
	display: inline-block;
	vertical-align: bottom;
	margin: 0;
}

.location {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.location:before {
  display: inline-block;
  vertical-align: middle;
  content: '';
  width: 15px;
  height: 15px;
  margin-right: 2px;
  background: url(../images/icon-location.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

span.bold {font-family: 'FFMarkWebProBold', sans-serif; font-size: 1em;}

ul.inline-highlight {
  color: #92bf31;
  font-size: 0.8em;
  margin: 10px 0;
}

ul.inline-highlight li {
  display: inline-block;
  margin: 0 7px 0 0;
  border-right: 1.6px solid #e7edf0;
  padding: 0 10px 0 0;
}

ul.inline-highlight li:last-child {border-right: none;}


span.status.in-progress {
  display: inline-block;
  font-family: 'FFMarkWebProBold', sans-serif;
  font-size: 0.7em;
  color: #92bf31;
  border: 1.6px solid;
  border-radius: 3px;
  padding: 7px 10px;
  margin: 10px 0;
}


span.updated {
  display: block;
  font-size: 0.8em;
}


/* correlates to grid system's column */
.nested-module {
  padding: 30px;
  margin-top: 0;
  border-radius: 3px;
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}



ul.links-menu {
  border-radius: 3px;
  font-family: 'FFMarkWebProBold', sans-serif;
  overflow: hidden;
  margin: 10px 0 30px;
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}

ul.links-menu li {
  margin: 0;
  background: white;
  border-bottom: 1.6px solid #e7edf0;
}

ul.links-menu li:last-child {
  border-bottom: none;
}


ul.links-menu li a {
  display: block;
  font-size: 0.9em;
  padding: 15px;
  color: #373F4C;
  transition: all 180ms ease-in-out;
}

ul.links-menu li a:hover {
  background: #92bf31;
  color: white;
}

ul.links-menu li a span.updated.subtle-text {transition: all 180ms ease-in-out;}
ul.links-menu li a:hover span.updated.subtle-text {color: white;}




ul.breadcrumb {
  font-size: 1em;
	font-family: 'FFMarkWebProBold', sans-serif;
}

ul.breadcrumb li {
  display: inline-block;
}

ul.breadcrumb li:after {
  display: inline-block;
  vertical-align: top;
  content: '/';
  padding: 0 8px;
}

ul.breadcrumb li:last-child:after {
  display: inline-block;
  vertical-align: top;
  content: '';
  padding: 0;
}

ul.breadcrumb li a {
  color: #4f76f7;
}




ul.filters {
  overflow: hidden;
  margin: 0 0 20px 0;
  padding: 0 0 20px 0;
	border-bottom: 1.6px solid #d3dbe1;
}



ul.filters li.list-title {
  font-family: 'FFMarkWebProBold', sans-serif;
  font-size: 1em;
  margin-bottom: 10px;
}

ul.filters li {
	font-size: 0.9em;
	margin: 0;
}


ul.filters li a {
  display: block;
  color: #656d7b;
  padding: 7px 0;
  border-radius: 3px;
}

ul.filters li.list-title:hover {
	color: #373F4C;
}

ul.filters li:hover,
ul.filters li a:hover {
  color: #4f76f7;
}









/* Timeline */

ul.timeline li {
	position: relative;
	padding-bottom: 20px;
	border-left: 1.6px solid #d3dbe1;
	padding-left: 20px;
	margin: 0;

}

ul.timeline li:before {
	position: absolute;
	display: inline-block;
	content: '';
	width: 12px;
	height: 12px;
	top: 8px;
	left: -6px;
	background: white;
	border: 1.6px solid #d3dbe1;
	border-radius: 50%;
}


/* Timeline selected */

ul.timeline li.selected {
	color: #373F4C;
	border-left: 1.6px solid #d3dbe1;
}

ul.timeline li.selected:before {
	position: absolute;
	display: inline-block;
	content: '';
	width: 12px;
	height: 12px;
	top: 8px;
	left: -6px;
	background: #4f76f7;
	border: 1.6px solid #4f76f7;
	border-radius: 50%;
	z-index: 2;
}




/* Timeline selected */

ul.timeline li.selected {
	color: #373F4C;
	border-left: 1.6px solid #4f76f7;
}

ul.timeline li.selected:before {
	position: absolute;
	display: inline-block;
	content: '';
	width: 12px;
	height: 12px;
	top: 8px;
	left: -6px;
	background: #4f76f7;
	border: 1.6px solid #4f76f7;
	border-radius: 50%;
	z-index: 2;
}

/* Project Status Timeline */


/* Timeline Horizontal to Vertical (htv) */

ul.timeline-htv li {
	position: relative;
	display: inline-block;
	float: left;
	width: 33.3%; /* display 3 items horizontally */
	padding: 10px 10px 20px 0;
	border-top: none;
	/*border-top: 1.6px solid #d3dbe1;*/
	/*border-bottom: 1.6px solid #d3dbe1;*/
	height: 80px;
	margin: 0 0 20px 0;
}

ul.timeline-htv.five li {
	position: relative;
	display: inline-block;
	float: left;
	width: 20%; /* display 5 items horizontally */
	padding: 10px 15px 60px 0;
	border-top: none;
	border-top: 3px solid #d3dbe1;
	/*border-bottom: 1.6px solid #d3dbe1;*/
	height: 140px;
	margin: 0 0 0 0;
}


ul.timeline-htv.five li.connect {
	display: inline-block;
	float: left;
	width: 100%;
	border-top: 3px solid #d3dbe1;
	border-left: 3px solid #d3dbe1;
	height: 35px;
	margin: 0 0 10px;
	padding: 0;
}

ul.timeline-htv.five li.connect.selected {
	border-top: 3px solid #4f76f7;
	border-left: 3px solid #4f76f7;
	animation: fadeConnector 1s ease-in-out;
}

ul.timeline-htv.five li.connect.selected:before {
	display: none;
}

@keyframes fadeConnector {
	0% {border-top: 3px solid #d3dbe1; border-left: 3px solid #d3dbe1;}
	100% {border-top: 3px solid #4f76f7; border-left: 3px solid #4f76f7;}
}

ul.timeline-htv.five li:nth-of-type(5),
ul.timeline-htv.five li:nth-of-type(11),
ul.timeline-htv.five li:nth-of-type(17),
ul.timeline-htv.five li:nth-of-type(23) {
	border-right: 3px solid #d3dbe1;
}

ul.timeline-htv.five li.selected:nth-of-type(5),
ul.timeline-htv.five li.selected:nth-of-type(11),
ul.timeline-htv.five li.selected:nth-of-type(17),
ul.timeline-htv.five li.selected:nth-of-type(23) {
	border-right: 3px solid #4f76f7;
	animation: fadeRightBorder 1s ease-in-out;
}

@keyframes fadeRightBorder {
	0% {border-right: 3px solid #d3dbe1;border-top: 3px solid #d3dbe1;}
	100% {border-right: 3px solid #4f76f7;border-top: 3px solid #4f76f7;}
}

ul.timeline-htv.five li:nth-of-type(25) {
	border-right: none;
}

/*
ul.timeline-htv li:nth-of-type(3) {
	border-right: 1.6px solid #d3dbe1;
	border-radius: 0 2px 2px 0;
}

ul.timeline-htv li:nth-of-type(4),
ul.timeline-htv li:nth-of-type(5),
ul.timeline-htv li:nth-of-type(6) {
	border-bottom: none;
}
*/

ul.timeline-htv li span.connector {
	position: absolute;
	top: -22px;
	left: 0px;
	width: 6px;
	height: 20px;
	border-right: 1.6px solid #d3dbe1;
	background: #f7f7f9;
	z-index: 1;
}

ul.timeline-htv.five li:before {
	position: absolute;
	display: inline-block;
	content: '';
	width: 20px;
	height: 20px;
	top: -12px;
	left: 0;
	background: #f7f7f9;
	border: 3px solid #d3dbe1;
	border-radius: 50%;
	z-index: 2;
}

ul.timeline-htv.five li:last-of-type:before {display: none;}

ul.timeline-htv.five li.connect:before {
	display: none;
}

.steps-indicator {
	display: block;
	height: 3px;
	background: #d3dbe1;
}

.steps-indicator:before {
	position: absolute;
	display: inline-block;
	content: '';
	width: 20px;
	height: 20px;
	top: 2px;
	left: 0;
	background: #4dc1dd;
	border: 3px solid #4dc1dd;
	border-radius: 50%;
	z-index: 2;
}

.pulse-border {
	position: absolute;
	display: inline-block;
	content: '';
	width: 20px;
	height: 20px;
	top: 2px;
	left: 0;
	background: transparent;
	border: 1px solid #4dc1dd;
	border-radius: 50%;
	z-index: 2;
	animation: radiate 1.3s infinite;
}

.steps-indicator:after {
	position: absolute;
	display: inline-block;
	content: '';
	width: 20px;
	height: 20px;
	top: 2px;
	right: 10px;
	background: #ececef;
	border: 3px solid #d3dbe1;
	border-radius: 50%;
	z-index: 2;
}

/* Timeline Horizontal to Vertical (htv) selected */

ul.timeline-htv li.selected,
ul.timeline-htv.five li.selected {
	color: #373F4C;
	border-top: 3px solid #4f76f7;
	animation: fadeTimeline 1s ease-in-out;
}

@keyframes fadeTimeline {
	0% {border-top: 3px solid #d3dbe1;}
	100% {border-top: 3px solid #4f76f7;}
}




ul.timeline-htv.five li.selected.current-step {
	border-top: 3px solid #d3dbe1;
	animation: fadeCurrentBorder 1s ease-in-out;
}

@keyframes fadeCurrentBorder {
	0% {}
	100% {}
}

.vertical-rule {
	display: block;
	border-left: 2px solid #d3dbe1;
	height: 30px;
	margin-left: 9px;
}

.vertical-rule.hide {display: none;}

ul.timeline-htv.five li.selected:last-of-type {
	border-top: 1.6px solid #d3dbe1;
}

span.timestamp.current-step:before  {
	display: none;
}


ul.timeline-htv li.selected:before {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'FFMarkWebProBold', sans-serif;
	content: '\2713';
	width: 20px;
	height: 20px;
	text-align: center;
	top: -12px;
	left: 0;
	color: white;
	background: #4f76f7;
	border: 1.6px solid #4f76f7;
	border-radius: 50%;
	z-index: 2;
	animation: scaleUp 1s ease-in-out;
}

@keyframes scaleUp {
	0% {transform: scale(0) rotate(-180deg);}
	50% {transform: scale(120%)}
	100% {transform: scale(100%) rotate(0deg);}
}



ul.timeline-htv.five li.selected.current-step:before{
	position: absolute;
	display: inline-block;
	content: '';
	width: 20px;
	height: 20px;
	top: -12px;
	left: 0;
	background: #4dc1dd;
	border: 1.6px solid #4dc1dd;
	border-radius: 50%;
	z-index: 2;
}

ul.timeline-htv.five li.selected.current-step:after{
	position: absolute;
	display: inline-block;
	content: '';
	width: 20px;
	height: 20px;
	top: -12px;
	left: 0;
	background: transparent;
	border: 1.6px solid #4dc1dd;
	border-radius: 50%;
	z-index: 3;
	animation: radiate 1.3s infinite;
}

@keyframes radiate {
	0% {transform: scale(100%);}
	50% {transform: scale(160%);}
	100% {transform: scale(100%);}
}




span.timestamp {
	display: block;
	font-size: 0.9em;
	color: #656d7b;
}


.progress-container {
	font-size: 1.3em;
	text-transform: uppercase;
	letter-spacing: 1.3px;
	margin-bottom: 10px;
}

.progress-percentage:after {
	display: inline-block;
	vertical-align: top;
	content: '%';
}

.progress-bar {
	width: 100%;
	position: relative;
	border: 2.3px solid #d3dbe1;
	border-radius: 35px;
	height: 35px;
	overflow: hidden;
}

.progress-bar-fill{
	position: absolute;
	top: 0;
	left: 0;
	width: 60%;
	height: 32.7px;
	border-radius: 0 34px 34px 0;
	background: linear-gradient(to right, #4f76f7, #4dc1dd);
	animation: fillBar 1s ease-in-out;
	transition: all 1s ease-in-out;
}

.progress-bar-fill:after {
	display: inline-block;
	vertical-align: middle;
	content: '';
	right: 0;
	color: white;
	text-align: right;
}

@keyframes fillBar {
	0% {width: 0;}
	100% {width: 60%;}
}


.pulse:before{
	display: block;
	content: '';
	width: 18px;
	height: 18px;
	top: 5px;
	left: -10px;
	background: #4dc1dd;
	border: 1.6px solid #4dc1dd;
	border-radius: 50%;
	z-index: 2;
}

.pulse:after {
	position: absolute;
	display: inline-block;
	content: '';
	width: 18px;
	height: 18px;
	top: 10px;
	left: 0;
	background: transparent;
	border: 1.6px solid #4dc1dd;
	border-radius: 50%;
	z-index: 3;
	animation: radiate 1.3s infinite;
}














ul.auction-links {
	font-size: 0.9em;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}

ul.auction-links li {
	margin-bottom: 0;
	border-bottom: 1.6px solid #d3dbe1;

}

ul.auction-links li:last-child {border-bottom: none;}

ul.auction-links li a {
	display: block;
	vertical-align: bottom;
	color: #656d7b;
	background: white;
	padding: 10px;
}

ul.auction-links a.catalog:before {
	display: inline-block;
	vertical-align: middle;
	content: "";
	width: 25px;
	height: 25px;
	background: url("../images/icon-gavel.svg");
	background-size: cover;
	background-position: center center;
	margin-right: 8px;

}

ul.auction-links a.share:before {
	display: inline-block;
	vertical-align: middle;
	content: "";
	width: 25px;
	height: 25px;
	background: url("../images/icon-share.svg");
	background-size: cover;
	background-position: center center;
	margin-right: 8px;

}




/* Filters */

span.filters-button {
  display: none;
  font-family: 'FFMarkWebProBold', sans-serif;
  text-align: center;
  cursor: pointer;
  color: white;
  padding: 13px 20px;
  border-radius: 3px;
  background: #4f76f7;
  margin-bottom: 20px;
  transition: all 180ms ease;
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}

.solid-button {
  display: inline-block;
  font-family: 'FFMarkWebProBold', sans-serif;
  text-align: center;
  cursor: pointer;
  color: white;
  padding: 13px 20px;
  border-radius: 3px;
  background: linear-gradient(to left, #4dc1dd, #4f76f7);
  margin-bottom: 20px;
  transition: all 180ms ease;
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}


.solid-button:hover,
span.filters-button:hover {
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}


.neo-filters {
  /*display: none;*/
	display: block;
}


.center {text-align: center;}





/*************************************************************************************************************************************************************************************************
User Guide
*************************************************************************************************************************************************************************************************/
.topic-target-container {
	position: relative;
}

.topic-target {
	position: absolute;
	top: -150px;
}



/*************************************************************************************************************************************************************************************************
Add Team Member Module
*************************************************************************************************************************************************************************************************/

/* Add User button */
.add-user {
	display: block;
	text-align: center;
	padding: 20px;
	border-radius: 3px;
	transition: all 100ms ease-in-out;
}

.add-user span {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	color: white;
	background: linear-gradient(to left, #4dc1dd, #4f76f7);
	text-align: center;
	font-size: 0.9em;
	font-family: 'FFMarkWebProBold', sans-serif;
	padding: 16px 32px;
	border-radius: 3px;
	transition: all 150ms ease-in-out;
	overflow: hidden;
	margin: 0;
	box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}

.add-user span:after {
  display: inline-block;
  content: 'Add Team Member';
  transition: all 140ms ease-in-out;
}

.add-user span:before {
	position: absolute;
	display: block;
	text-align: center;
	content: '';
	width: 30px;
	height: 30px;
	background-size: 30px 30px;
	background-image: url(../images/icon-plus.png);
	border-radius: 50%;
	background-repeat: no-repeat;
	transform: translate(50px, 45px);
	opacity: 0;
	transition: all 160ms ease-in-out;
}

.add-user:hover span {
	color: #4f76f7;
}

.add-user:hover span:before {
  transform: translate(50px, -4px);
  opacity: 1;
}

.add-user:hover span:after {
  transform: translate(0, -30px);
  opacity: 0;
}


/*************************************************************************************************************************************************************************************************
Dashboard Category Guide UI
*************************************************************************************************************************************************************************************************/

.category-card {
	background: white;
	border-radius: 3px;
	margin-bottom: 35px;
	box-shadow: 0 5px 15px rgba(21,57,133,0.15);
	overflow: hidden;
	height: 380px;
	transition: all 0.3s ease-in-out;
}

.category-card-alt {
	background: white;
	border-radius: 3px;
	margin-bottom: 35px;
	box-shadow: 0 5px 15px rgba(21,57,133,0.15);
	overflow: hidden;
	height: 380px;
	transition: all 0.3s ease-in-out;
}

.category-illustration {
	display: flex;
	/*background: #373F4C;*/
	background: #f7f7f9;
	height: 200px;
	text-align: center;
	align-items: center;
	justify-content: center;
}

.category-illustration .icon-description > img {
	width: 350px;
	display: block;
	margin: 0 auto 10px;
}

.category-illustration .icon-description > .caption-info {
	display: block;
	margin: 0 auto;
	/*background: #152130;*/
	background: #efeff2;
	border-radius: 3px;
	font-size: 0.8em;
	padding: 5px 10px;
	width: 350px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;

}

.category-info {
	padding: 20px;
}

.category-title {
	color: #373F4C;
	font-size: 1.1em;
	transition: all 180ms ease-in-out;
}

a.category-link {
	color: #656d7b;
}

a.category-link:hover .category-card {
	box-shadow: 0 5px 15px rgba(21,57,133,0.25);
}

a.category-link:hover .category-title {
	color: #4f76f7;
}


.small-cta {
	display: inline-block;
	color: #4f76f7;
	font-size: 0.7em;
	border: 1.6px solid;
	padding: 2px 10px 4px;
	border-radius: 3px;
	transition: all 180ms ease-in-out;

}


a.category-link:hover .small-cta {
	background: #4f76f7;
	color: white;
	border: 1.6px solid #4f76f7;
}

/*************************************************************************************************************************************************************************************************
Tabs
*************************************************************************************************************************************************************************************************/
.tabs-content li {
  display: none;
}

.tabs-content li.selected {
  display: block;
  animation: fade-in 0.3s;
}



@keyframes fade-in {
  0% {opacity: 0;}
  100% {opacity: 1;}
}




.tabs-nav a.selected {
  color: #4f76f7;
  background: #e0e7f9;
}

.tabs-nav li {
  display: inline-block;
  font-size: 0.8em;
  color: #a4a9b2;
  padding: 3px 10px 5px;
  border-radius: 3px;
}

.tabs-nav li a {
  display: inline-block;
  color: #a4a9b2;
  padding: 3px 10px 5px;
  border-radius: 3px;
  margin: 0 10px 0 0;
}

.tabs-nav li:nth-of-type(2) a {margin-right: 0;}

.tabs-nav li a:hover {
  color: #4f76f7;
}

/*************************************************************************************************************************************************************************************************
Next Event Module
*************************************************************************************************************************************************************************************************/

.asset-image {
	position: relative;
	width: 100%;
	height: 140px;
	border-radius: 3px;
	margin-bottom: 10px;
	background: url(https://svdisposition.com/backend/web/images/AuctionImages/265_67_1571952511..jpg) no-repeat;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
	transition: all 180ms ease-in-out;
}

.asset-lot-number {
	font-family: 'FFMarkWebProBold', sans-serif;
	font-size: 0.85em;
	color: #656d7b;
}

.asset-title {
	font-family: 'FFMarkWebProBold', sans-serif;
	font-size: 0.85em;
	color: #373F4C;
	transition: color 180ms ease-in-out;
}

.image-overlay {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("../images/icon-view.png") no-repeat;
	background-size: cover;
	background-position: center center;
	opacity: 0;
	transition: all 180ms ease-in-out;
}

.asset-card-link:hover .asset-image .image-overlay {opacity: 0.7;}
.asset-card-link:hover .asset-title {color: #4f76f7;}



/*************************************************************************************************************************************************************************************************
Image Slider 
*************************************************************************************************************************************************************************************************/






/*************************************************************************************************************************************************************************************************
AIM Dashboard Banner
*************************************************************************************************************************************************************************************************/
.aim-banner {
	color: white;
}

.aim-banner span {display: block;}

.aim-banner span.headline {
	font-size: 2em;
	line-height: 1em;
}

.aim-banner span.tagline {
	font-size: 0.9em;
}



/*************************************************************************************************************************************************************************************************
User Banner
*************************************************************************************************************************************************************************************************/

.user-banner {
  background: #92bf31; /* Default Background */
  color: white;
}

.user-banner .table-content {height: 70px;}

span.user-name {
  display: inline-block;
  font-size: 1.5em;
  font-family: 'FFMarkWebProBold', sans-serif;
}

span.user-name:before {
  display: inline-block;
  vertical-align: middle;
  content: '';
  width: 60px;
  height: 60px;
  background: white;
  background-image: url(../images/user-logo.jpg);
  background-position: center center;
  background-repeat: none;
  background-size: cover;
  border-radius: 50px;
  margin: 0 10px 0 0;
  box-shadow: 0 0 20px rgba(0,66,90,0.2);
}




/*************************************************************************************************************************************************************************************************
AIM Stats and Team
*************************************************************************************************************************************************************************************************/

.profile-card {
  text-align: center;
  border-radius: 3px;
  overflow: hidden;
  padding: 20px;
  border: 1.6px solid #92bf31;
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}


.profile-image-container {
  display: block;
  width: 100%;
}

.profile-image-container img {
  display: block;
  margin: 0 auto 20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}


div.auction-logo {
  display: inline-block;
  float: left;
  width: 20%;
  margin: 20px 0;
}

div.auction-details {
  display: inline-block;
  float: left;
  width: 80%;
  margin: 20px 0;
}

.auction-logo img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}

.info-block {
  background: #eeedee;
  padding: 10px 20px 20px;
  border-radius: 3px;
  margin-bottom: 35px;
}

.next-event {
	padding: 5px 20px 7px;
	color: #4f76f7;
	border-radius: 3px;
	border: 1.6px solid;
}

.next-event .section-header,
.next-event .subtle-suggestion {color: white;}

.next-event .subtle-suggestion:hover {
  background: rgba(255, 255, 255, 0.2);
}


.stats-block {
  color: white;
  background: transparent;
  padding: 20px;
  border-radius: 3px;
  border: 1.6px solid #7fb800;
  margin-bottom: 20px;
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}

.stats-block span {display: block;}


span.number {
  display: block;
  font-size: 1.1em;
  margin: 0;
}

span.number:before {
  display: inline-block;
  vertical-align: top;
  content: '$';
  margin: 0 5px 0 0;
}

span.number.stat:before {
  display: none
}

.stats-block span.this-month:before {
  display: inline-block;
  vertical-align: middle;
  content: 'This Month';
  font-size: 0.8em;
  font-family: 'FFMarkWebProBold', sans-serif;
  color: #4f76f7;
  background: #e0e8fe;
  padding: 5px 10px;
  border-radius: 3px;
  margin-right: 10px;
}

div.user {
	border-bottom: 1.6px solid #d3dbe1;
}

.user-info img,
.user-info div {
  display: inline-block;
  vertical-align: middle;
}

.user-info img {
  width: 50px;
  border-radius: 50%;
  margin: 0 10px 0 0;
}


.user-info img.owner {
  width: 100px;
  border-radius: 50%;
  margin: 0 10px 0 0;
  box-shadow: 0 0 20px rgba(0,66,90,0.2);
}


.user-info span {display: block;}

.user-info span.name {
  font-size: 1em;
  font-family: 'FFMarkWebProBold', sans-serif;
}

.user-info span.user-role {
  font-size: 0.8em;
}

.add-team-member span {
  display: block;
  color: #373F4C;
  font-family: 'FFMarkWebProBold', sans-serif;
  padding: 10px 0;
}

.add-team-member span:before {
  display: inline-block;
  vertical-align: middle;
  content: '+';
  text-align: center;
  line-height: 25px;
  color: white;
  background: #92bf31;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin: 0 10px 0 0;
}


/*************************************************************************************************************************************************************************************************
Dashboard-Card
*************************************************************************************************************************************************************************************************/
.dashboard-card {
	position: relative;
	background: white;
	color: #656d7b;
	border-radius: 3px;
	margin-bottom: 35px;
	box-shadow: 0 5px 15px rgba(21,57,133,0.15);
	overflow: hidden;
	transition: all 180ms ease-in-out;
}


.card-image-preview {
	position: relative;
	height: 180px;
	width: 100%;
	background: url(https://svdisposition.com/backend/web/images/AuctionImages/265_67_1571952511..jpg) no-repeat;
	background-size: cover;
	background-position: center center;
}

.gradient-overlay {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(to right, rgba(28,46,66,.8), rgba(28,46,66,0));
	z-index: 2;
}

.card-image-preview.milestone {
	background: url(https://www.mcfa.com/-/media/mcfa/sites/public/images/cat/billboards/brightly-main-clt-billboard.jpg) no-repeat;
	background-size: cover;
	background-position: center center;
}

.card-image-preview.take-aim {
	background: url('../images/take-aim.jpg') no-repeat;
	background-size: cover;
	background-position: center center;
	display: table;
	height: 220px;
	color: white;
	text-align: center;
	font-size: 1.6em;
}

.card-image-preview.get-aim {
	background: url('../images/get-aim.jpg') no-repeat;
	background-size: cover;
	background-position: center center;
	display: table;
	height: 220px;
	color: white;
	text-align: center;
	font-size: 1.6em;
}

.card-image-preview.keep-aim {
	background: url('../images/keep-aim.jpg') no-repeat;
	background-size: cover;
	background-position: center center;
	display: table;
	height: 220px;
	color: white;
	text-align: center;
	font-size: 1.6em;
}


.card-info {
	padding: 10px 20px 20px;
	width: 100%;
	text-overflow: hidden;
}

.card-info .subject {font-size: 0.9em;}

.card-info .title {font-size: 1.2em;}

.card-info .description {margin-bottom: 20px;}


a.card-link-target:hover .download {
	transition: all 0.3s ease-in-out;
}

a.card-link-target:hover .download {
	border: 1.6px solid #4f76f7;
	background: #4f76f7;
	color: white;
	box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}





/*************************************************************************************************************************************************************************************************
Team Users
*************************************************************************************************************************************************************************************************/

.user {
  padding: 10px 0;
}

.user span.name {
  font-size: 1em;
  display: block;
}

span.user-title {
  font-size: 0.83em;
  display: block;
  color: #a4a9b2;
}

/*************************************************************************************************************************************************************************************************
Card Lists
*************************************************************************************************************************************************************************************************/
.card-list {
  border-bottom: 1.6px solid #d3dbe1;;
  padding: 10px 0;
}

.card-list:last-of-type {
	border-bottom: none;
}

/*************************************************************************************************************************************************************************************************
Asset Stats by Industry
*************************************************************************************************************************************************************************************************/

.industry-block {
  padding: 20px;
  background: white;
  border-radius: 0 3px 3px 0;
  border-left: 1.6px solid #4f76f7;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}

.industry-block img {
  display: none;
  width: 70px;
  margin: 0 auto;
}

.industry-block span.industry-name {
  display: block;
  font-family: 'FFMarkWebProBold', sans-serif;
  font-size: 1em;
  line-height: 1.3;
  margin-bottom: 10px;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}


span.sold-lot-count {
  font-size: 0.8em;
}

span.sold {
	display: flex;
	text-align: center;
	font-size: 0.9em;
	background: linear-gradient(to left, #4dc1dd, #4f76f7);
	border-radius: 3px;
	padding: 7px;
	align-items: center;
	justify-content: center;
	color: white;
	margin: 0 auto;
}

span.transferred {
	display: flex;
	text-align: center;
	font-size: 0.9em;
	background: linear-gradient(to left, #ac84f6, #4237bd);
	border-radius: 3px;
	padding: 7px;
	align-items: center;
	justify-content: center;
	color: white;
	margin: 0 auto;
}

span.unsold {
	display: flex;
	text-align: center;
	font-size: 0.9em;
	background: linear-gradient(to left, #f7f7f9, #efeff2);
	border-radius: 3px;
	padding: 7px;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}



.currency:before {
	display: inline-block;
	vertical-align: top;
	content: "$";
}

/*************************************************************************************************************************************************************************************************
Next Event Page
*************************************************************************************************************************************************************************************************/


input[type=text].search-bar {
  display: block;
	outline: none;
  width: 100%;
  padding: 15px;
  color: #373F4C;
  background: white;
  border: 1.6px solid #e7edf0;
  border-radius: 12px;
  transition: all 180ms ease;
}

input[type=text].search-bar:hover {
  border: 1.6px solid #4f76f7;
}

input:focus, textarea:focus{
	border: 1.3px solid #4dc1dd;
	box-shadow: 0 0 0 0.2rem #bfdbfe;
}

.error-field:focus {
	box-shadow: 0 0 0 .25rem #dc354540!important;
}

input[type=text]:focus.search-bar {
	border: 1.3px solid #4dc1dd;
	box-shadow: 0 0 0 0.2rem #bfdbfe;
}

span.search:before {
	display: inline-block;
	content: "";
	width: 25px;
	height: 25px;
	background: url(../images/icon-search.png);
	background-position: center center;
	background-size: cover;

}


.column-header {
	display: block;
	font-family: 'FFMarkWebProBold', sans-serif;
	text-align: center;
}


div.asset-listing {
	border-bottom: 1.6px solid #e7edf0;
}


img.thumbnail {
	border-radius: 3px;
	transition: all 180ms ease-in-out;
}

img.thumbnail:hover {
	cursor: pointer;
	opacity: 0.8;
}

span.lot-number {
	display: block;
	font-family: 'FFMarkWebProBold', sans-serif;
	font-size: 0.8em;
	padding: 5px 0;
}

.asset-details {
	font-size: 0.9em;
}

.asset-details span {
	display: block;
	margin-bottom: 8px;
}

.asset-details a.title,
div.title {
	display: block;
	font-family: 'FFMarkWebProBold', sans-serif;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.asset-details a.title:hover {
	color: #4f76f7;
}

.asset-details span.schedule {
	font-family: 'FFMarkWebProBold', sans-serif;
	height: 60px;
}


div.sold span {
	display: block;
	font-family: 'FFMarkWebProBold', sans-serif;
}

img.sold {
	display: block;
	width: 60px;
	box-shadow: 0 0 20px rgba(0,66,90,0.2);
	margin: 0 auto;
	border-radius: 50%;
}



/*************************************************************************************************************************************************************************************************
Share Auction Link Popup
*************************************************************************************************************************************************************************************************/
.share-popup-bg-container {
	position: fixed;
	display: table;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(13,18,37,0.8);
	z-index: 3;


}


.popup-container {
	display: table-cell;
	vertical-align: middle;
}

.popup-content {
	display: block;
	background: white;
	padding: 30px 20px;
	border-radius: 3px;
	width: 50%;
	margin: 0 auto;
}


.close-icon {
	cursor: pointer;
	display: inline-block;
	text-align: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(to left, #f7f7f9, #efeff2);
	line-height: 40px;

}



/*************************************************************************************************************************************************************************************************
Asset Details Page
*************************************************************************************************************************************************************************************************/

.svd-user-info img,
.svd-user-info div {
  display: inline-block;
  vertical-align: middle;
}

.svd-user-info img {
  width: 100px;
  border-radius: 50%;
  border: 1.6px solid #4f76f7;
  margin: 0 10px 0 0;
  box-shadow: 0 0 20px rgba(0,66,90,0.2);
}

.svd-user-info span {display: block;}

.svd-user-info span.name {
  font-size: 1em;
  font-family: 'FFMarkWebProBold', sans-serif;
}

.svd-user-info span.user-role {

}

div.industries span {display: block; margin: 0 0 20px;}

div.industries span.industry-tag {
  display: inline-block;
  font-size: 0.8em;
  color: #656d7b;
  background: #f7f7f9;
  border: 1.6px solid #e7edf0;
  border-radius: 3px;
  padding: 7px 10px;
  margin: 0 10px 10px 0;
}


/*************************************************************************************************************************************************************************************************
Next Event Page
*************************************************************************************************************************************************************************************************/
.next-event-card {
  border-radius: 3px;
  border: 1.6px solid #92bf31;
  padding: 20px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,66,90,0.2);
}



.notification {
  display: block;
  background: #e0e8fe;
  color: #4f76f7;
  padding: 10px 20px;
  border-radius: 3px;
  margin-bottom: 20px;
}

.sold-notification {
  display: block;
  background: #e0e8fe;
  color: #4f76f7;
  padding: 10px 20px;
  border-radius: 3px;
  margin-bottom: 20px;
}

.transferred-notification {
  display: block;
  background: #dbd0ee;
  color: #4237bd;
  padding: 10px 20px;
  border-radius: 3px;
  margin-bottom: 20px;
}

.notification .transfer-complete {
  display: block;
  background: #dbd0ee;
  color: #4237bd;
  padding: 10px 20px;
  border-radius: 3px;
  margin-bottom: 20px;
}


span.recent {
  display: inline-block;
  background: #4f76f7;
  color: white;
  border-radius: 3px;
  font-size: 0.7em;
  padding: 3px 10px;
  margin-bottom: 10px;
}


ol {
  margin: 10px 0;
  padding: 0 20px;
}

ol li {
  padding-left: 5px;
  margin-bottom: 10px;
}


.event-listing span.date {
  margin-bottom: 10px;
}

.event-listing span.location {
  display: block;
}


.ip-loader {
  display: block;
  position: relative;
  width: 64px;
  height: 32px;
  margin: 0 auto;
}
.ip-loader div {
  position: absolute;
  top: 11px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.6px solid #4f76f7;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.ip-loader div:nth-child(1) {
  left: 6px;
  animation: ip-loader1 0.8s infinite;
  background: #4f76f7;
	border: 1.6px solid #4f76f7;

}
.ip-loader div:nth-child(2) {
  left: 6px;
  animation: ip-loader2 0.8s infinite;
  border: 1.6px solid #4f76f7;
}
.ip-loader div:nth-child(3) {
  left: 26px;
  animation: ip-loader2 0.8s infinite;
 border: 1.6px solid #4f76f7;
}
.ip-loader div:nth-child(4) {
  left: 45px;
  animation: ip-loader3 0.8s infinite;
}
@keyframes ip-loader1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes ip-loader3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
    background: #4f76f7;

  }
}
@keyframes ip-loader2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}




/*************************************************************************************************************************************************************************************************
My Locations Page
*************************************************************************************************************************************************************************************************/
.location-listing {
  background: white;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,66,90,0.2);

}

.location-info {
  padding: 15px;
}


/*************************************************************************************************************************************************************************************************
Messenger Page
*************************************************************************************************************************************************************************************************/
.new-message:before {
	display: inline-block;
	vertical-align: middle;
	content: '';
	width: 20px;
	height: 20px;
	background: url("../images/icon-new-message.png");
	background-size: cover;
	background-position: center center;
	margin-right: 5px;
}


.transfer-request:before {
	display: inline-block;
	vertical-align: middle;
	content: '';
	width: 20px;
	height: 20px;
	background: url("../images/icon-transfer-request.png");
	background-size: cover;
	background-position: center center;
	margin-right: 5px;
}

.message-thread {
  background: white;
  border-radius: 3px;
  padding: 30px;
  box-shadow: 0 0 20px rgba(0,66,90,0.2);
}

.message-thread .user .name:before {
  display: inline-block;
  vertical-align: middle;
  content: '';
  background: url(../images/user-avatar.jpg);
  background-position:  center center;
  background-size: cover;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  box-shadow: 0 0 20px rgba(0,66,90,0.2);
}

.message-thread .user.two .name:before {
  background: url(../images/user-2-avatar.jpg);
  background-position:  center center;
  background-size: cover;
}

.message-thread .user .sent {
  display: inline-block;
  color: #656d7b;
  font-size: 0.8em;
}

.message-thread .message {
  background: #f7f7f9;
  border-radius: 3px;
  padding: 15px;
  margin-bottom: 40px;
}


.message-button {
	display: inline-block;
	font-size: 0.9em;
	font-family: 'FFMarkWebProBold', sans-serif;
	padding: 16px 32px;
	background: #4f76f7;
	color: white;
	border-radius: 3px;
	transition: all 180ms ease-in-out;
}

.message-button:hover {
  box-shadow: 0 5px 15px rgba(21,57,133,0.15);
}



/*************************************************************************************************************************************************************************************************
Mobile Styling
*************************************************************************************************************************************************************************************************/

@media screen and (max-width: 950px) {


  .hide-mobile {display: none;}

  .center-on-mobile {text-align: center;}

  .right-to-center,
  .left-to-center {text-align: center;}




	.nav li a.dropdown-button {
	  display: none;
	  margin: 0;
	  padding: 7.4px 0;
	  cursor: default;
	}

	.dropdown-content {
	  display: block;
	  position: absolute;
	  background: none;
	  color: white;
	  left: 0;
	  margin: 0;
	  border-radius: 0;
	  box-shadow: none;
	}




	.normalized {margin-top: 0px;}


	.nav-trigger {top: 10px;}

	span.image-helper {text-align: center; display: block; margin: 0 auto; padding: 10px;}


  span.user-name:before {
    display: block;
    margin: 0 auto;
    padding: 0;
  }


  ul.breadcrumb {
    text-align: left;
  }

	span.filters-button {display: block;}

	.neo-filters {display: none;}

.display-filters {
  display: block;
}


.display-filters.filters-button:after {
  transform: rotate(-45deg);
}

.display-filters.neo-filters {
  animation: animate 0.3s ease-in-out;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}









ul.timeline-htv.five li {
	position: relative;
	display: block;
	float: none;
	width: 100%; /* display 5 items horizontally */
	padding: 0 15px 30px 30px;
	border-top: none;
	border-left: 3px solid #d3dbe1;
	/*border-bottom: 1.6px solid #d3dbe1;*/
	height: auto;
	margin: 0 0 0 0;
}


ul.timeline-htv.five li.connect {
	display: none;
	float: none;
	width: 100%;
	border-top: none;
	border-left: 3px solid #d3dbe1;
	height: 35px;
	margin: 0;
	padding: 0;
}

ul.timeline-htv.five li.connect.selected {
	border-top: none;
	border-left: 3px solid #4f76f7;
	animation: fadeConnector 1s ease-in-out;
}


ul.timeline-htv.five li:nth-of-type(5),
ul.timeline-htv.five li:nth-of-type(11),
ul.timeline-htv.five li:nth-of-type(17),
ul.timeline-htv.five li:nth-of-type(23) {
	border-right: none;
}

ul.timeline-htv.five li.selected:nth-of-type(5),
ul.timeline-htv.five li.selected:nth-of-type(11),
ul.timeline-htv.five li.selected:nth-of-type(17),
ul.timeline-htv.five li.selected:nth-of-type(23) {
	border-right: none;
	border-left: 3px solid #4f76f7;
	animation: none;
}


ul.timeline-htv.five li:nth-of-type(25) {
	border-right: none;
}

/*
ul.timeline-htv li:nth-of-type(3) {
	border-right: 1.6px solid #d3dbe1;
	border-radius: 0 2px 2px 0;
}

ul.timeline-htv li:nth-of-type(4),
ul.timeline-htv li:nth-of-type(5),
ul.timeline-htv li:nth-of-type(6) {
	border-bottom: none;
}
*/

ul.timeline-htv li span.connector {
	position: absolute;
	top: -22px;
	left: 0px;
	width: 6px;
	height: 20px;
	border-right: 1.6px solid #d3dbe1;
	background: #f7f7f9;
	z-index: 1;
}

ul.timeline-htv.five li:before {
	position: absolute;
	display: inline-block;
	content: '';
	width: 20px;
	height: 20px;
	top: 2px;
	left: -12px;
	background: white;
	border: 3px solid #d3dbe1;
	border-radius: 50%;
	z-index: 2;
}

/* Timeline Horizontal to Vertical (htv) selected */

ul.timeline-htv li.selected,
ul.timeline-htv.five li.selected {
	color: #373F4C;
	border-top: none;
	border-left: 3px solid #4f76f7;
	animation: none;
}





ul.timeline-htv.five li.selected.current-step {
	border-top: none;
	border-left: 3px solid #d3dbe1;
	animation: none;
}


.vertical-rule {
	display: none;
	border-left: 2px solid #d3dbe1;
	height: 30px;
	margin-left: 8px;
}

.horizontal-rule {
	display: inline-block;
	vertical-align: middle;
	border-top: 2px solid #d3dbe1;
	width: 30px;
	margin-left: 8px;
}

ul.timeline-htv.five li.selected:last-of-type {
	border-top: none;
}

span.timestamp.current-step:before  {
	display: none;
}


ul.timeline-htv li.selected:before {
	position: absolute;
	display: inline-block;
	content: '';
	width: 20px;
	height: 20px;
	top: 2px;
	left: -12px;
	background: #4f76f7;
	border: 1.6px solid #4f76f7;
	border-radius: 50%;
	z-index: 2;
}


ul.timeline-htv.five li.selected:before {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'FFMarkWebProBold', sans-serif;
	content: '\2713';
	width: 20px;
	height: 20px;
	top: 2px;
	left: -12px;
	background: #4f76f7;
	border: 1.6px solid #4f76f7;
	border-radius: 50%;
	z-index: 2;
}




ul.timeline-htv.five li.selected.current-step:before{
	position: absolute;
	display: inline-block;
	content: '';
	width: 18px;
	height: 18px;
	top: 5px;
	left: -10px;
	background: #4dc1dd;
	border: 1.6px solid #4dc1dd;
	border-radius: 50%;
	z-index: 2;
}

ul.timeline-htv.five li.selected.current-step:after{
	position: absolute;
	display: inline-block;
	content: '';
	width: 18px;
	height: 18px;
	top: 5px;
	left: -10px;
	background: transparent;
	border: 1.6px solid #4dc1dd;
	border-radius: 50%;
	z-index: 3;
	animation: radiate 1.3s infinite;
}









	} /* end of 950px breakpoint */

/*************************************************************************************************************************************************************************************************
Smartphone Styling
*************************************************************************************************************************************************************************************************/
@media screen and (max-width: 600px) {


.category-card {
	height: 400px;
}

div.asset-listing,
.past-event {padding-bottom: 20px;}




}
/***** end of mobile styles *****/



/* --------------------------------

Back to top button

-------------------------------- */

.to-top {
	position: fixed;
	bottom: 40px;
	right: 100px;
	text-align: center;
	background: rgba(21,33,48,0.7);
	color: white;
	font-size: 0.9em;
	line-height: 70px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	z-index: 3;
	opacity: 1;
	transform: translateX(100%);
	transition: all 0.3s ease-in-out;
}

.to-top:hover {background: rgba(21,33,48,0.9);}

.showBackToTop {
	opacity: 1;
	transform: translateX(0);
}





/*************************************************************************************************************************************************************************************************
Animations
*************************************************************************************************************************************************************************************************/
#success-message {
	display: none;
	color: white;
	padding: 10px;
	text-align: center;
	border-radius: 3px;
	margin-bottom: 10px;
}

.notification.transfer-complete {
	display: none;

}

.animated-success#success-message {
	display: block;
	  background: #e0e8fe;
	  color: #4f76f7;
	animation: animate 1s ease;
}


.animated-success.notification {
	display: block;
  background: #dbd0ee;
  color: #4237bd;
  padding: 10px 20px;
  border-radius: 3px;
  margin-bottom: 20px;
	animation: animate 1s ease;
}

img.logo-animate {
	animation: fadeUp 1.5s ease;
}

@keyframes fadeUp {
  0% {opacity: 0; transform: translateY(30px);}
  100% {opacity: 1; transform: translateY(0);}
}

@keyframes animate {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes smooth {
	from {opacity: 0;}
	to {opacity: 1;}
}

.test {
	opacity: 0;
	-webkit-transform: translateY(20%);
	-moz-transform: translateY(20%);
	-ms-transform: translateY(20%);
	-o-transform: translateY(20%);
	transform: translateY(20%);
	transition: all 1.15s ease;
}

.title-effect {
	transform: translateX(0);
}


.speed {
	opacity: 0;
	-webkit-transform: translateX(-75%);
	-moz-transform: translateX(-75%);
	-ms-transform: translateX(-75%);
	-o-transform: translateX(-75%);
	transform: translateX(-75%);
	transition: all 0.4s ease-out;
}

@keyframes sliderEffect {
	0% {opacity: 1;}

	100% {opacity: 1;}
}

.animate {
	transform: translateY(0);
	opacity: 1;
}

.animate-left {
	transform: translateX(0);
	opacity: 1;
}




/**** End of Animations *****/