﻿/* = GLOBAL FORMATTING ============== */

* {border: 0; margin: 0; outline: none; padding: 0; text-decoration: none;}
html * {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
body, html {height: 100%; overflow-x: hidden;}
body {background-color: rgba(60, 65, 70, 1); color: rgb(70, 70, 70); font: normal "roboto",sans-serif;; overflow: hidden !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

/* SCROLLBAR & SELECTION */

::-webkit-scrollbar {height: 10px; padding: 10px; width: 10px;}
	::-webkit-scrollbar-track {background-color: rgba(0, 0, 0, .05);}
		::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, .15); border-radius: 2px; background-clip: content-box; width: 10px;}


::selection {background-color: rgba(0, 175, 135, 1); color: rgba(255, 255, 255, 1);}

@-webkit-keyframes pulse {0% {background-color: rgba(0, 0, 0, .1);} 100% {background-color: rgba(255, 255, 255, .1);}}

/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6 {padding: 0;}

h2 {font-size: 4em;}
h3 {font-size: 3em;}
h4 {font-size: 2em; font-weight: 100;}

p {margin: 0 0 20px;}
p:last-of-type {margin-bottom: 0;}

blockquote {border-left: 2px solid rgba(10, 145, 245, 1); color: rgba(120, 120, 120, 1); font-size: 22px; letter-spacing: .5px; line-height: 150%; margin: 0; padding: 0 0 0 10px; position: relative; text-transform: uppercase;}
blockquote:before, blockquote:after {box-sizing: border-box; content: " ";}
blockquote:before {}
blockquote:after {}
	blockquote cite {display: block; font-size: 10px; font-style: normal;}
		blockquote cite > a {color: rgba(10, 145, 245, 1);}

/* Font Awesome */
.fa {}
.fa-spin {}

/* LISTS */

ol, ul {list-style: none;}

/* HYPERLINKS & BUTTONS */

a {color: inherit;}
a, button {cursor: pointer;}
:is-active, :focus, :hover {}

.button {border-radius: 2px; display: block; font-family: "roboto",sans-serif;; font-size: 12px; font-weight: 700; letter-spacing: normal; margin: 20px 0 0; padding: 10px 15px; width: auto;}
.button:focus, .button:hover {}

*.unselectable {-moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
*.notransition {-webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; -ms-transition: none !important; transition: none !important;}

/* = GLOBAL ELEMENTS ============== */

/* MODAL */
modal-overlay {background: rgba(0, 0, 0, .5);}
	bs-modal-container {bottom: 0; left: 0; margin: auto; padding: 0; position: absolute; right: 0; top: 0;}
		bs-modal-container > .modal-dialog {display: block; height: 100%; position: absolute; width: 100%;}
			.modal-dialog > .modal-content {display: block; height: 100%; position: absolute; width: 100%;}
				.modal-content > modal-content {height: 100%; overflow-x: hidden; overflow-y: auto; position: absolute; width: 100%;}
					modal-content > div {bottom: 0; left: 0; margin: auto; padding: 0; position: absolute; right: 0; top: 0;}

					.modal-content .modal-close {border-radius: 4px; cursor: pointer; height: 30px; line-height: 30px; position: absolute; right: 5px; top: 5px; width: 30px; z-index: 20;}
					.modal-content .modal-close::after {content: "\f00d"; display: block; font-family: FontAwesome; font-size: 15px; height: 100%; line-height: 30px; position: absolute; right: 0; text-align: center; top: 0; width: 100%;}

/* LIST BOX */
.lst-box {background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(230, 230, 230, 1); border-radius: 6px; border-top-left-radius: 0; border-top-right-radius: 0; color: rgba(80, 80, 80, 1); display: none; font-size: 12.5px; padding: 0; position: absolute; z-index: 100;}
.lst-box::before, .lst-box::after {content: ""; display: block; position: absolute; transition: all 0.1s linear 0s;}
.lst-box::before {border-bottom: 11px solid rgba(215, 215, 215, 1); border-left: 11px solid transparent; border-right: 10px solid transparent; height: 0px; left: 7px; top: -9px; width: 0px; z-index: 2;}
.lst-box::after {border-bottom: 8px solid rgba(255, 255, 255, 1); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom-width: 9px; height: 0px; left: 10px; top: -8px; width: 0px; z-index: 2;}

.is-active > .lst-box {display: block; text-align: left;}

	.lst-box > .lst-cnt {background-color: rgba(255, 255, 255, 1); border-radius: 6px; border-top-left-radius: 0px; border-top-right-radius: 0px; max-height: 490px; overflow-x: hidden; overflow-y: overlay; position: relative; z-index: 10;}

		.lst-box > .lst-cnt .primarybox {margin: 0; overflow: hidden; padding: 10px 20px; position: relative;}
		.lst-box > .lst-cnt .primarybox::before {background-color: rgba(230, 230, 230, 1); bottom: 0; content: ""; display: block; height: 1px; left: 0; position: absolute; width: 100%;}
		.lst-box > .lst-cnt .primarybox::after {clear: both; content: ""; display: table;}
			.lst-box > .lst-cnt .primarybox > div {display: inline-block; float: left;}

			.lst-box > .lst-cnt .primarybox > .srContent {margin: 0; width: calc(100% - 0px);}
				.lst-box > .lst-cnt .primarybox > .srContent > span {display: block; height: 20px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
				.lst-box > .lst-cnt .primarybox > .srContent > span.name {font-weight: 700;}
				.lst-box > .lst-cnt .primarybox > .srContent > span.store {}

		.lst-box > .lst-cnt ul {list-style: none; margin: 0; overflow-x: hidden; overflow-y: overlay; padding: 0; position: relative; width: 100%;}
		.lst-box > .lst-cnt ul::before {background-color: rgba(230, 230, 230, 1); content: ""; display: block; height: 1px; left: 0; position: absolute; top: 0; width: 100%;}
		.lst-box > .lst-cnt ul:first-of-type:before {display: none;}
		.lst-box > .lst-cnt ul:only-of-type:before {display: none;}
		.lst-box > .lst-cnt ul::after {clear: both; content: ""; display: table;}
		.lst-box > .lst-cnt ul:first-of-type {border-top: none;}
			.lst-box > .lst-cnt ul > li {clear: both; cursor: pointer; display: block; height: auto !important; overflow: hidden; padding: 10px; position: relative; white-space: nowrap; width: calc(100% - 20px) !important;}
			.lst-box > .lst-cnt ul > li::after {clear: both; content: ""; display: table;}
			.lst-box > .lst-cnt ul > li:last-of-type {margin: 0;}
			.lst-box > .lst-cnt ul > li:focus, .lst-box > .lst-cnt ul > li:hover {background-color: rgba(0, 0, 0, .05);}
			.lst-box > .lst-cnt ul > li.is-selected {background-color: rgba(0, 175, 135, 1); color: rgba(255, 255, 255, 1);}
				.lst-box > .lst-cnt ul > li > div {display: inline-block; float: left;}

				.lst-box > .lst-cnt ul > li > .srNotification {left: 26px; top: 12px !important;}

				.lst-box > .lst-cnt ul > li > .srIcon, .lst-box > .lst-cnt ul > li > .srThumb {border-radius: 2px; font-size: 15.5px; height: 30px; line-height: 30px; text-align: center; width: 30px;}

				.lst-box > .lst-cnt ul > li > .srContent {margin: 0 5px; text-align: left; width: calc(100% - 50px);}
					.lst-box > .lst-cnt ul > li > .srContent > span {display: block; font-weight: 500; height: 30px; line-height: 30px;}

				.lst-box > .lst-cnt ul > li > .srResult {margin: 0 0 0 10px; text-align: left; width: calc(100% - 90px);}
					.lst-box > .lst-cnt ul > li > .srResult > span {display: block; font-weight: 500; height: 15px; line-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
					.lst-box > .lst-cnt ul > li > .srResult > span.name {font-weight: 700;}

				.lst-box > .lst-cnt ul > li > .srStatus {border-radius: 2px; height: 30px; text-align: center; width: 30px;}

		.lst-box > .lst-cnt ol {}

/* LIST SUMMARY BOX */
.lst-sum-box {background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(230, 230, 230, 1); border-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; color: rgba(80, 80, 80, 1); display: none; font-size: 12.5px; left: 0; padding: 0; position: absolute; top: 0px; width: 250px; z-index: 100;}
.lst-sum-box::before, .lst-sum-box::after {content: ""; display: block; position: absolute; transition: all 0.1s linear 0s;}
.lst-sum-box::before {border-top: 11px solid rgba(215, 215, 215, 1); border-left: 11px solid transparent; border-right: 10px solid transparent; height: 0px; left: 7px; bottom: -9px; width: 0px; z-index: 2;}
.lst-sum-box::after {border-top: 8px solid rgba(255, 255, 255, 1); border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom-width: 9px; height: 0px; left: 10px; bottom: -8px; width: 0px; z-index: 2;}

*:hover > .lst-sum-box {display: block; text-align: left;}

	.lst-sum-box > .lst-cnt {background-color: rgba(255, 255, 255, 1); border-radius: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; max-height: 490px; overflow-x: hidden; overflow-y: overlay; position: relative; z-index: 10;}

		.lst-sum-box > .lst-cnt > div {background-color: rgba(255, 255, 255, 1); border-radius: 4px; cursor: pointer; display: inline-block; float: left; height: 220px; overflow: hidden; position: relative; text-align: left; width: 250px;}
		.lst-sum-box > .lst-cnt > div::before {content: ""; display: block; left: 0; position: absolute; top: 0; z-index: 1;}
			.lst-sum-box > .lst-cnt > div > ul {display: block; list-style: none; margin: 0; width: 100%;}

				.lst-sum-box > .lst-cnt > div > ul > li {background-color: rgba(255, 255, 255, 1); border-radius: 4px; cursor: pointer; display: inline-block; float: left; height: 220px; margin: 0; overflow: hidden; position: relative; width: 250px;}
				.lst-sum-box > .lst-cnt > div > ul > li::before {content: ""; display: block; left: 0; position: absolute; top: 0; z-index: 1;}
					.lst-sum-box > .lst-cnt > div > ul > li > div {}

					/* Existing Deal Card */
					.cus-sum-cd-mn  {}
						.cus-sum-cd-mn > div {display: block; position: relative;}

						.cus-sum-hd {background-color: rgba(160, 160, 160, 1); border-top-left-radius: 0; border-top-right-radius: 0; height: 50px;}

							.cus-sum-hd-sum {color: rgba(255, 255, 255, 1); left: 85px; overflow: hidden; position: absolute; top: 25px; z-index: 2;}
								.cus-sum-hd-sum > span {display: block; font-size: 16.5px; font-weight: 500; height: 20px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

							.cus-sum-hd-thmb {left: 15px; overflow: hidden; position: absolute; top: 15px; z-index: 2;}
								.cus-sum-hd-thmb > div {position: relative; z-index: 1;}

								.cus-sum-hd-thmb > .srThumb {border: 3px solid rgba(225, 225, 225, 1); border-radius: none; height: 54px; line-height: 54px; overflow: hidden; position: relative; width: 54px;}
								.cus-sum-hd-thmb > .srThumb::before {}
									.cus-sum-hd-thmb > .srThumb > .minisquare {border-radius: 0px !important; font-size: 300%;}
										.cus-sum-hd-thmb > .srThumb > .minisquare > figure {}
											.cus-sum-hd-thmb > .srThumb > .minisquare > figure > img {}

						.cus-sum-bd {height: calc(100% - 100px); padding: 15px; width: calc(100% - 30px);}
							.cus-sum-bd > div {}

							.cus-sum-bd-vhl {line-height: 20px; margin: 15px 0 0;}
								.cus-sum-bd-vhl > div {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: calc(100% - 60px);}
								.cus-sum-bd-vhl > div.vehicle {font-weight: 700;}
								.cus-sum-bd-vhl > div.stock {font-size: 12px;}
								.cus-sum-bd-vhl > div.date {}

							.cus-sum-bd-dtls {bottom: 25px; line-height: 20px; margin: 10px 0 0; position: absolute; width: calc(100% - 30px);}
								.cus-sum-bd-dtls > ul {}
								.cus-sum-bd-dtls > ul::after {clear: both; content: ""; display: table;}
									.cus-sum-bd-dtls > ul > li {display: inline-block; float: left; height: 38px; position: relative; padding: 0 17.5px; width: 38px;}
										.cus-sum-bd-dtls > ul > li > div {margin: auto; position: absolute; text-align: center; width: calc(100% - 40px); z-index: 2;}

										.cus-sum-bd-dtls > ul > li > .cust-sum-cnt-per {bottom: -30px; font-size: 14.5px; font-weight: 500; text-align: center; width: 38px;}

										.cus-sum-bd-dtls > ul > li > .cust-sum-cnt-mtd {height: 20px; left: calc(50% - 10px); top: calc(50% - 7.5px); width: 20px;}
											.cus-sum-bd-dtls > ul > li > .cust-sum-cnt-mtd > figure {display: block; overflow: hidden; width: 100%;}
												.cus-sum-bd-dtls > ul > li > .cust-sum-cnt-mtd > figure > img {display: block; height: 100%; width: 100%;}

										.cus-sum-bd-dtls > ul > li > .cust-sum-cnt-bd {height: 100%; position: relative; width: 100%; z-index: 1;}
											.cus-sum-bd-dtls > ul > li > .cust-sum-cnt-bd > figure {display: block; height: 100%; margin: auto; overflow: hidden;}
												.cus-sum-bd-dtls > ul > li > .cust-sum-cnt-bd > figure > img {display: block; height: 100%; margin: auto;}

							.cus-sum-bd-stts {height: 50px; position: absolute; right: 20px; top: 20px; width: 50px;}
								.cus-sum-bd-stts > .srStatus {height: 100%; width: 100%;}


/* SR Boxes */
.srThumb, .srStatus, .srActions, .srIcon, .srLabel {border-radius: 4px; height: 35px; line-height: 35px; text-align: center; width: 35px;}
.srThumb, .srLabel {color: rgba(80, 80, 80, 1) !important;}
.srMeter {width: 50px; line-height: 50px;}
.srHeader {font-size: 12px; font-weight: 500; margin: 0 0 5px; width: 100%;}
.srLabel {background-color: rgba(215, 215, 215, 1); border-radius: 4px;}
	.srLabel > span {display: block; font-size: 11.5px; font-weight: 700; height: 100%; letter-spacing: 0; line-height: inherit; overflow: hidden; position: relative; text-align: center; text-transform: uppercase; width: 100%;}
.srContent {}
.srActions {cursor: pointer;}
	.srActions > ul {list-style: none; position: relative;}
		.srActions > ul > li {display: inline-block; float: left; height: 35px; width: 35px;}

/* AVATAR */
.avatar {background-color: var(--color-highlight-solid-200); border-radius: 50%; overflow: hidden; cursor: pointer; font-size: 12px; font-weight: 700; height: 100%; letter-spacing: 0; line-height: inherit;  position: relative; text-align: center; text-transform: uppercase; width: 100%;}
.avatar::after {clear: both; content: ""; display: table;}
	.avatar span {background-color: var(--color-highlight-solid-200); border-radius: 50%; color: var(--color-text-light); display: block; height: 100%; line-height: inherit; width: 100%;}
	.avatar figure {display: block; height: 100%; overflow: hidden;}
		.avatar figure > img {display: block; height: 100%; width: 100%;}

/* STATUS METER */
.statusmeter {cursor: pointer;}
	.statusmeter > div {display: block; margin: auto;}
	.statusmeter > .statusicon {color: inherit; display: block; font-size: 20px; height: 25px; line-height: 25px; opacity: .75; text-align: center; width: 25px;}
	.statusmeter > .statusmeter {height: 5px; margin: 0 auto; text-align: center; width: 30px;}
		.statusmeter > .statusmeter > div {background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(200, 200, 200, 1); border-radius: 2px; display: inline-block; float: left; height: 3px; margin: 0 .5px; width: 3px;}
		.statusmeter > .statusmeter > div.is-active {background-color: rgba(0, 175, 135, 1); border-color: rgba(0, 175, 135, 1);}
		.statusmeter > .statusmeter > div.is-snoozing {background-color: rgba(190, 190, 190, 1); border-color: rgba(190, 190, 190, 1);}

	.statusmeter > .statuslabel {font-size: 13px; height: 20px; line-height: 20px; text-align: center;}

/* ACTION ICON */
.addicon, .add-selector {background-color: transparent !important; border-radius: 4px; cursor: pointer; display: block; font-size: 95%; height: 100%; letter-spacing: 0; line-height: inherit; overflow: hidden; position: relative; text-align: center; text-transform: uppercase; width: 100%;}
.addicon::before, .addicon::after, .add-selector::before, .add-selector::after {border: 3px dashed rgba(180, 180, 180, 1); border-radius: 3px; color: rgba(180, 180, 180, 1); content: "\f067"; display: block; font-family: FontAwesome; font-size: 12px; height: calc(100% - 6px); line-height: 30px; text-align: center; width: calc(100% - 6px);}
.addicon:focus:before, .addicon:hover:before, .add-selector:focus:before, .add-selector:hover:before {border-color: rgba(0, 175, 135, 1); color: rgba(0, 175, 135, 1);}

/* ADD ICON */
.actionicon {background-color: transparent; border-radius: 4px; cursor: pointer; display: block; font-size: 95%; height: 100%; letter-spacing: 0; line-height: inherit; overflow: hidden; position: relative; text-align: center; text-transform: uppercase; width: 100%;}
.actionicon::before, .actionicon::after {color: inherit; display: block; font-family: FontAwesome; font-size: 15px; height: 100%; line-height: inherit; position: absolute; right: 0; text-align: center; top: 0; width: 100%;}
.actionicon:focus, .actionicon:hover {background-color: rgba(0, 0, 0, .05);}

/* SOCIAL ICON */
.socialicon {border-radius: 4px; cursor: pointer; display: block; font-size: 95%; height: 100%; letter-spacing: 0; line-height: inherit; overflow: hidden; position: relative; text-align: center; text-transform: uppercase; width: 100%;}
.socialicon::before, .socialicon::after {color: rgba(255, 255, 255, 1); display: block; font-family: FontAwesome; font-size: 15px; height: 100%; line-height: inherit; position: absolute; right: 0; text-align: center; top: 0; width: 100%;}

/* STATUS ICON */
.statusicon {border-radius: 4px; font-size: 95%; font-weight: normal; height: 100%; letter-spacing: 0; line-height: inherit; overflow: hidden; position: relative; text-align: center; text-transform: uppercase; width: 100%;}
.statusicon::before, .statusicon::after {color: rgba(255, 255, 255, 1); display: block; font-family: FontAwesome; font-size: 20px; height: 100%; line-height: inherit; position: absolute; right: 0; text-align: center; top: 0; width: 100%;}

/* VEHICLE STATUS INDICATOR */
.vhl-ind {left: 10px; position: absolute; top: 7.5px; z-index: 10;}
	.vhl-ind > div {font-size: 12.5px; font-weight: 700; line-height: 20px;}

	.vhl-ind > .ind-cus {color: rgba(15, 145, 245, 1);}
	.vhl-ind > .ind-sld {color: rgba(245, 65, 55, 1);}
	.vhl-ind > .ind-wsh {color: rgba(255, 125, 205, 1);}

/* FILTER BAR */
#fltr-br {background-color: rgba(255, 255, 255, 1); box-shadow: 0 0 10px 1px rgba(0, 0, 0, .25); height: calc(100% - 120px); position: fixed; right: -300px; top: 120px; transition: all .15s ease-in-out !important; width: 300px; z-index: 1000;}
#fltr-br.is-active {right: 0;}
	#fltr-br > div {display: block; position: relative;}

	/* Filter Header */
	#fltr-br > .fltr-br-hd {font-size: 18px; font-weight: 500; height: 40px; letter-spacing: -.25px; overflow: hidden; padding: 10px; width: calc(100% - 20px);}
	#fltr-br > .fltr-br-hd::after {background-color: rgba(230, 230, 230, 1); bottom: 0; content: ""; display: block; height: 1px; left: 0; position: absolute; width: calc(100% - 0px);}
		#fltr-br > .fltr-br-hd > div {display: inline-block; float: left; height: 40px; line-height: 40px;}

		/* Filter Header Title */
		#fltr-br > .fltr-br-hd > .fltr-br-hd-tl {margin: 0 10px; width: calc(100% - 65px);}

		/* Filter Header Action */
		#fltr-br > .fltr-br-hd > .fltr-br-hd-cl {cursor: pointer; position: relative; width: 40px;}
			#fltr-br > .fltr-br-hd > .fltr-br-hd-cl::after {content: "\f00d"; display: block; font-family: FontAwesome; font-size: 18px; height: 40px; line-height: 40px; position: absolute; right: 0; text-align: center; top: 0; width: 40px;}
			#fltr-br > .fltr-br-hd > .fltr-br-hd-cl:focus:after, #fltr-br > .fltr-br-hd > .fltr-br-hd-cl:hover:after {opacity: .75;}

	/* Filter Body */
	#fltr-br > .fltr-br-bd {background-color: rgba(255, 255, 255, 1); height: calc(100% - 170px); overflow-x: hidden; overflow-y: overlay; padding: 20px 25px 20px 20px; width: calc(100% - 45px);}
		#fltr-br > .fltr-br-bd > div {}

		/* Filter Body Search */
		#fltr-br > .fltr-br-bd > .fltr-br-bd-srch {padding: 0; width: calc(100% - 5px);}
			#fltr-br > .fltr-br-bd > .fltr-br-bd-srch > label {margin: 0; width: 100%;}
				#fltr-br > .fltr-br-bd > .fltr-br-bd-srch > label > .formcontrol {font-weight: 600;}
				#fltr-br > .fltr-br-bd > .fltr-br-bd-srch > label > .formlabel {color: rgba(135, 135, 135, 1); display: block; font-size: 12px; height: 20px; line-height: 20px; margin: 10px 0;}

		/* Filter Body List */
		#fltr-br > .fltr-br-bd > .fltr-br-bd-ls {}
			#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul {list-style: none; margin: 0; overflow: hidden; padding: 0; width: calc(100% - 0px);}
				#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li {margin: 0 0 10px; padding: 0 0 10px; position: relative;}
				#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li::after {background-color: rgba(0, 0, 0, .1); bottom: 0; content: ""; display: block; height: 1px; left: 0; position: absolute; width: 100%;}
				#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li:last-of-type:after {display: none;}
					#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li > div {}

					/* Filter List Body */
					#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li > .fltr-ls {display: none;}
					#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li.is-selected > .fltr-ls {display: block;}
						#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li > .fltr-ls > ul {}
							#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li > .fltr-ls > ul > li {border-radius: 4px; cursor: pointer; display: block; margin: 0 0 2.5px; overflow: hidden; padding: 5px; position: relative; width: calc(100% - 10px);}
							#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li > .fltr-ls > ul > li::after {content: ""; color: rgba(0, 175, 135, 1); display: block; font-family: FontAwesome; height: 40px; line-height: 40px; position: absolute; right: 0; text-align: center; top: 0; width: 40px;}
							#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li > .fltr-ls > ul > li.is-selected::after {content: "\f00c";}
							#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li > .fltr-ls > ul > li:hover {background-color: rgba(0, 0, 0, .35); color: rgba(255, 255, 255, 1);}
							#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li > .fltr-ls > ul > li:hover:after {color: inherit;}
								#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li > .fltr-ls > ul > li > div {display: inline-block; float: left;}

								#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li > .fltr-ls > ul > li > .srThumb {background-color: rgba(255, 255, 255, 1); border-radius: 4px; height: 30px; line-height: 30px; text-align: center; width: 30px;}

								#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li > .fltr-ls > ul > li > .srContent {margin: 0 5px; text-align: left; width: calc(100% - 40px);}
								#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li > .fltr-ls > ul > li.is-selected > .srContent {width: calc(100% - 75px);}
									#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li > .fltr-ls > ul > li > .srContent > span {display: inline-block; float: left; height: 30px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

									#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li > .fltr-ls > ul > li > .srContent > .filterlabel {margin: 0 10px 0 0; max-width: calc(100% - 40px);}

									#fltr-br > .fltr-br-bd > .fltr-br-bd-ls > ul > li > .fltr-ls > ul > li > .srContent > .filtervalue {font-weight: 500; text-align: center;}

	/* Filter Footer */
	#fltr-br > .fltr-brfooter {height: 30px; padding: 20px; position: relative; width: calc(100% - 40px);}
	#fltr-br > .fltr-brfooter::after {background-color: rgba(230, 230, 230, 1); content: ""; display: block; height: 1px; left: 0; position: absolute; top: 0; width: calc(100% - 0px);}
		#fltr-br > .fltr-brfooter > ul {list-style: none; margin: 0; overflow: hidden; padding: 0; text-align: center; width: 100%;}
			#fltr-br > .fltr-brfooter > ul > li {display: inline-block;}
				#fltr-br > .fltr-brfooter > ul > li > label {margin: 0;}
					#fltr-br > .fltr-brfooter > ul > li > label > button {width: 100%;}

/* FILTER TAGS */
.fltr-tgs > ul {display: inline-block; float: left; height: 100%; list-style: none; position: relative; vertical-align: top; z-index: 100;}
.fltr-tgs > ul::after {clear: both; content: ""; display: table;}
	.fltr-tgs > ul > li {display: inline-block; float: left; margin: 0 5px 0 0;}
	.fltr-tgs > ul > li:last-of-type {margin: 0;}
		.fltr-tgs > ul > li > .fltr-blk {border-radius: 4px; color: rgba(255, 255, 255, 1); cursor: pointer; display: block; height: 30px; line-height: 30px; overflow: hidden;}
		.fltr-tgs > ul > li > .fltr-blk:hover {opacity: .75;}
			.fltr-tgs > ul > li > .fltr-blk > span {display: inline-block; float: left; line-height: 30px;}
			.fltr-tgs > ul > li > .fltr-blk > span.label {font-size: 14px; padding: 0 10px;}
				.fltr-tgs > ul > li > .fltr-blk > span.label > span {display: inline-block; font-size: 12.5px; font-weight: 700; line-height: 30px;}
			.fltr-tgs > ul > li > .fltr-blk > span.action {background-color: rgba(0, 0, 0, .25); cursor: pointer; text-align: center; padding: 0 10px;}
			.fltr-tgs > ul > li > .fltr-blk > span.action:hover {background-color: rgba(0, 0, 0, .5);}
			.fltr-tgs > ul > li > .fltr-blk > span.action:active {background-color: rgba(0, 0, 0, .75);}

/* SEARCH BAR */
#srch-br {background-color: rgba(255, 255, 255, 1); box-shadow: 0 0 10px 1px rgba(0, 0, 0, .25); height: calc(100% - 120px); position: fixed; right: -360px; top: 120px; transition: all .15s ease-in-out !important; width: 360px; z-index: 1000;}
#srch-br.is-active {right: 0;}
	#srch-br > div {display: block; position: relative;}

	/* Search Header */
	#srch-br > .srch-br-hd {font-size: 18px; font-weight: 500; height: 40px; letter-spacing: -.25px; overflow: hidden; padding: 10px; width: calc(100% - 20px);}
	#srch-br > .srch-br-hd::after {background-color: rgba(0, 0, 0, .15); bottom: 0; content: ""; display: block; height: 2px; left: 0; position: absolute; width: calc(100% - 0px);}
		#srch-br > .srch-br-hd > div {display: inline-block; float: left; height: 40px; line-height: 40px;}

		/* Search Header Title */
		#srch-br > .srch-br-hd > .srch-br-hd-tl {margin: 0 10px; width: calc(100% - 65px);}

		/* Filter Header Action */
		#srch-br > .srch-br-hd > .srch-br-hd-act {cursor: pointer; position: relative; width: 40px;}
			#srch-br > .srch-br-hd > .srch-br-hd-act::after {content: "\f00d"; display: block; font-family: FontAwesome; font-size: 18px; height: 40px; line-height: 40px; position: absolute; right: 0; text-align: center; top: 0; width: 40px;}
			#srch-br > .srch-br-hd > .srch-br-hd-act:focus:after, #fltr-br > .fltr-br-hd > .fltr-br-hd-cl:hover:after {opacity: .75;}

	/* Search Body */
	#srch-br > .srch-br-bd {background-color: rgba(0, 0, 0, .025); height: calc(100% - 60px); overflow: hidden; width: calc(100% - 0px);}
		#srch-br > .srch-br-bd > div {}

		/* Search Body Search */
		.srch-br-bd-srch {height: 80px; padding: 10px 10px 0; width: calc(100% - 20px);}
			.srch-br-bd-srch > label {margin: 0; width: 100%;}
				.srch-br-bd-srch > label > .formcontrol {font-weight: 600;}
				.srch-br-bd-srch > label > .formlabel {color: rgba(135, 135, 135, 1); display: block; font-size: 12px; height: 20px; line-height: 20px; margin: 10px 0;}

		/* Search Body List */
		.srch-br-ls {height: calc(100% - 90px);}
			.srch-br-ls > div {}

			/* Search Body List Selector */
			.srch-br-ls-sltr {overflow: hidden;}
				.srch-br-ls-sltr > ul {height: 100%; list-style: none; margin: 0; padding: 0; }
					.srch-br-ls-sltr > ul > li {cursor: pointer; display: inline-block; float: left; font-size: 12px; font-weight: 400; height: 100%; line-height: 60px; padding: 0 10px; position: relative; text-align: center; width: calc(50% - 20px);}
					.srch-br-ls-sltr > ul > li::after {background-color: rgba(0, 0, 0, .05); bottom: 0; content: ""; display: block; height: 2.5px; left: 0; position: absolute; width: 100%;}
					.srch-br-ls-sltr > ul > li:focus:after, .srch-br-ls-sltr > ul > li:hover:after {background-color: rgba(0, 175, 135, .25);}
					.srch-br-ls-sltr > ul > li.is-active {color: rgba(80, 80, 80, 1); font-weight: 700; opacity: 1;}
					.srch-br-ls-sltr > ul > li.is-active:after {background-color: rgba(0, 175, 135, 1);}
						.srch-br-ls-sltr > ul > li > div {display: inline-block;}

						.srch-br-ls-sltr > ul > li > .selectoricon {}

						.srch-br-ls-sltr > ul > li > .selectortitle {margin: 0 10px;}
							.srch-br-ls-sltr > ul > li > .selectortitle > span {display: inline-block;}

							.srch-br-ls-sltr > ul > li > .selectortitle > .selectorname {}

							.srch-br-ls-sltr > ul > li > .selectortitle > .selectorvalue {}


			/* Search Body List Body */
			.srch-br-ls-bd {height: calc(100% - 60px); overflow: overlay;}
				.srch-br-ls-bd > div {}

				/* Search Body List Body Messages */
				.srch-br-msg {}
					.srch-br-msg > ul {list-style: none; margin: 10px;}
						.srch-br-msg > ul > li {display: block; margin: 0 0 20px; overflow: hidden; padding: 0 0 20px; position: relative;}
						.srch-br-msg > ul > li::after {background-color: rgba(0, 0, 0, .05); bottom: 0; content: ""; display: block; height: 2px; left: 0; position: absolute; width: calc(100% - 0px);}
						.srch-br-msg > ul > li:last-of-type {margin: 0;}
						.srch-br-msg > ul > li:last-of-type:after {display: none;}
							.srch-br-msg > ul > li > div {display: block; overflow: hidden;}

							/* Search Body List Body Messages Header */
							.srch-br-msg-hd {overflow: hidden;}
								.srch-br-msg-hd > div {display: inline-block; float: left;}

								/* Search Body List Body Messages Header User */
								.srch-br-msg-usr {margin: 0 5px 0 0; width: calc(100% - 105px);}
									.srch-br-msg-usr > div {display: inline-block; float: left;}

									.srch-br-msg-usr > .srThumb {border-radius: 2px; height: 30px; line-height: 30px; text-align: center; width: 30px;}

									.srch-br-msg-usr > .srContent {font-size: 13px; margin: 0 5px; text-align: left; width: calc(100% - 50px);}
										.srch-br-msg-usr > .srContent > span {display: block; font-weight: 500; height: 30px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

								/* Search Body List Body Messages Header Timestamp */
								.srch-br-msg-hd-tmsp {color: rgba(140, 140, 140, 1); font-size: 11px; font-weight: 700; margin: 0; width: 100px;}
									.srch-br-msg-hd-tmsp > span {cursor: pointer;}
									.srch-br-msg-hd-tmsp > span:hover {text-decoration: underline;}

							/* Search Body List Body Messages Body */
							.srch-br-msg-bd {background-color: rgba(255, 255, 255, 1); border-radius: 2px; font-size: 13px; height: inherit; line-height: 20px; margin: 5px 0 2.5px; position: relative; width: calc(100% - 0px);}
							.srch-br-msg-bd::before {border: 2px solid rgba(0, 0, 0, .1); border-radius: 2px; content: ""; display: block; height: calc(100% - 4px); left: 0; position: absolute; top: 0; width: calc(100% - 4px);}
								.srch-br-msg-bd > span {display: -webkit-box; margin: 10px; overflow: hidden; -webkit-line-clamp: auto; -webkit-box-orient: vertical; white-space: normal;}
							.srch-br-msg-bd::after {clear: both; content: ""; display: table;}

				/* Search Body List Body Files */
				.srch-br-ls-bd-fls {}
					.srch-br-ls-bd-fls > ul {list-style: none; margin: 10px;}
						.srch-br-ls-bd-fls > ul > li {display: block; margin: 0 0 5px; overflow: hidden; padding: 10px; position: relative; width: calc(100% - 20px);}
						.srch-br-ls-bd-fls > ul > li::before {border: 2px solid rgba(0, 0, 0, .1); border-radius: 2px; display: block; height: calc(100% - 4px); left: 0; position: absolute; top: 0; width: calc(100% - 4px);}
						.srch-br-ls-bd-fls > ul > li:focus, .srch-br-ls-bd-fls > ul > li:hover {background-color: rgba(0, 0, 0, .025);}
						.srch-br-ls-bd-fls > ul > li:focus:before, .srch-br-ls-bd-fls > ul > li:hover:before {content: "";}
									.srch-br-ls-bd-fls > ul > li > div {display: inline-block; float: left;}

									.srch-br-ls-bd-fls > ul > li > .srThumb {border-radius: 2px; height: 30px; line-height: 30px; text-align: center; width: 30px;}

									.srch-br-ls-bd-fls > ul > li > .srContent {font-size: 13px; margin: 0 5px; text-align: left; width: calc(100% - 50px);}
										.srch-br-ls-bd-fls > ul > li > .srContent > span {display: block; font-size: 12px; height: 15px; line-height: 15px; margin: 0 0 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;}
										.srch-br-ls-bd-fls > ul > li > .srContent > span:last-of-type {margin: 0;}
										.srch-br-ls-bd-fls > ul > li > .srContent > span.file {font-size: 13px; font-weight: 700;}
										.srch-br-ls-bd-fls > ul > li > .srContent > span.user {opacity: .75;}
										.srch-br-ls-bd-fls > ul > li > .srContent > span.meta {opacity: .75;}
											.srch-br-ls-bd-fls > ul > li > .srContent > span.meta > span {cursor: pointer; display: inline-block; font-weight: 500;}
											.srch-br-ls-bd-fls > ul > li > .srContent > span.meta > span:focus, .srch-br-ls-bd-fls > ul > li > .srContent > span.meta > span:hover {text-decoration: underline;}

/* ACTION BOX */
.act-block {color: var(--color-text-light); display: none; list-style: none; margin: 0; position: absolute; top: 45px; width: 300px; z-index: 75;}
div.is-active > .act-block {display: block;}
	.act-block > li {font-family: 'Montserrat'; box-shadow: 0px 32px 64px rgba(0, 0, 0, 0.2), 0px 16px 32px rgba(0, 0, 0, 0.2), 0px 8px 16px rgba(0, 0, 0, 0.2); color: var(--color-text); background-color: var(--color-modal-background); border-radius: 8px; cursor: default; position: relative; width: calc(100% - 20px);}
		.act-block > li > div {position: relative; z-index: 2;}

		/* Deal Action Close */
		.act-block .deal-act-close {border-radius: 4px; cursor: pointer; height: 40px; line-height: 40px; position: absolute; right: -2.5px; top: -2.5px; width: 40px; z-index: 20;}
		.act-block .deal-act-close::after {content: "\f00d"; display: block; font-family: FontAwesome; font-size: 13px; height: 100%; line-height: 40px; position: absolute; right: 0; text-align: center; top: 6px; width: 100%; color: var(--color-text-light)}
		.act-block .deal-act-close:focus:after, .act-block .deal-act-close:hover:after {color: var(--color-text);}

		/* Deal Action Content */
		.deal-act .deal-act-content {margin: 0; padding: 0; position: relative; z-index: 5;}
		.deal-act .deal-act-content::before {clear: both; content: ""; display: table;}
			.deal-act .deal-act-content > div {display: block; position: relative;}

			/* Deal Action Header */
			.deal-act-content > .deal-act-header {position: relative;}
			.deal-act-content > .deal-act-header::after {background-color: var(--color-highlight-solid-100); bottom: 0px; content: ""; display: block; height: 1px; left: 0; position: absolute; width: 100%;}
				.deal-act-content > .deal-act-header > h4 {font-size: 14px; font-weight: 600; height: 20px; line-height: 20px; margin: 0 0 5px; padding: 10px; color: var(--color-text-light);}
					.deal-act-content > .deal-act-header > h4 > i {display: none; margin: 0 5px 0 0;}

			/* Deal Action Body */
			.deal-act-content > .deal-act-body {padding: 10px;}
				.deal-act-content > .deal-act-body > div {}

				/* Deal Action Result Box */
				.deal-act-body .result-box {margin: 0 0 10px; overflow: hidden; position: relative;}
				.deal-act-body .result-box:last-of-type {margin: 0;}

					/* Deal Action Result Divider */
					.deal-act-body .result-box > .result-divider {font-size: 12px; font-weight: 700; height: 20px; margin: 0 0 10px; text-transform: uppercase; width: 100%;}
					.deal-act-body .result-box > .result-divider::before {background-color: var(--color-highlight-solid-200); content: ""; display: block; height: 2px; left: 0; position: absolute; top: 10px; width: 100%; z-index: 1;}
						.deal-act-body .result-box > .result-divider > span {background-color: var(--color-modal-background); display: inline-block; float: left; height: 20px; line-height: 20px; padding: 0 10px 0 0; position: relative; z-index: 2;}

					/* Deal Action Result Null */
					.deal-act-body .result-box > .result-null {font-size: 12px; font-weight: 700; height: 20px; margin: 0 0 10px; text-align: center; width: 100%;}
						.deal-act-body .result-box > .result-null > span {background-color: var(--color-modal-background); color: rgb(130, 130, 130); display: inline-block; height: 20px; line-height: 20px; padding: 0 10px 0 0; position: relative; z-index: 2;}

					/* Deal Action Result Label */
					.deal-act-body .result-box > label {margin: 0 0 10px; width: 100%;}

					/* Deal Action Result List */
					.deal-act-body .result-box > .result-boxList {list-style: none; margin: 10px 0 0;}
					.deal-act-body .result-box > .result-boxList:only-of-type {margin: 0;}
						.deal-act-body .result-box > .result-boxList > li {border-radius: 4px; display: block; margin: 0; overflow: hidden; padding: 5px; width: calc(100% - 10px); border-bottom: 1px solid var(--color-highlight-50); padding-top: 10px; padding-bottom: 10px;}
						.deal-act-body .result-box > .result-boxList > li:hover {background-color: var(--color-highlight-50);}
							.deal-act-body .result-box > .result-boxList > li > div {display: inline-block; float: left;}

							.deal-act-body .result-box > .result-boxList > li > .srThumb {}

							.deal-act-body .result-box > .result-boxList > li > .srContent {font-size: 13px; margin: 0 10px; text-align: left; width: calc(100% - 90px); padding-top: 3px; height: 32px;}
								.deal-act-body .result-box > .result-boxList > li > .srContent > span {display: block; font-size: 12px; font-weight: 400; height: 15px; line-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
								.deal-act-body .result-box > .result-boxList > li > .srContent > span:only-of-type {height: 30px; line-height: 30px;}
								.deal-act-body .result-box > .result-boxList > li > .srContent > span.name {font-size: 14px; font-weight: 600;}
								.deal-act-body .result-box > .result-boxList > li > .srContent > span.vehicle {font-size: 14px; font-weight: 600;}
								.deal-act-body .result-box > .result-boxList > li > .srContent > span.position {color: var(--color-text-light); font-size: 11px;}
								.deal-act-body .result-box > .result-boxList > li > .srContent > span.stock {}
								.deal-act-body .result-box > .result-boxList > li > .srContent > span.phone, .deal-act-body > .result-box > .result-boxList > li > .srContent > span.email {}

 							.deal-act-body .result-box > .result-boxList > li > .srActions {display: none;}
							.deal-act-body .result-box > .result-boxList > li > .srActions.srAdd {display: block}
							.deal-act-body .result-box > .result-boxList > li:hover > .srActions {display: inherit;}
								.deal-act-body .result-box > .result-boxList > li > .srActions > ul {list-style: none; overflow: hidden;}
									.deal-act-body .result-box > .result-boxList > li > .srActions > ul > li {display: inline-block; float: left; height: 35px; width: 35px;}
										.deal-act-body .result-box > .result-boxList > li > .srActions > ul > li > span {display: block; position: relative;}
										.deal-act-body .result-box > .result-boxList > li:hover > .srActions > ul > li > span {display: block;}
										.deal-act-body .result-box > .result-boxList > li > .srActions > ul > li > span:active {display: block; color: rgb(105, 105, 105);}

				/* Deal Action Info Box */
				.deal-act-body > .info-box {margin: 0 0 10px; overflow: hidden; position: relative;}
				.deal-act-body > .info-box:last-of-type {margin: 0;}

					/* Deal Action Info Divider */
					.deal-act-body > .info-box > .info-divider {font-size: 12px; font-weight: 700; height: 20px; margin: 0 0 10px; text-transform: uppercase; width: 100%;}
					.deal-act-body > .info-box > .info-divider::before {background-color: rgba(0, 175, 135, .75); content: ""; display: block; height: 2px; left: 0; position: absolute; top: 10px; width: 100%; z-index: 1;}
						.deal-act-body > .info-box > .info-divider > span {background-color: rgba(255, 255, 255, 1); display: inline-block; float: left; height: 20px; line-height: 20px; padding: 0 10px 0 0; position: relative; z-index: 2;}

					/* Deal Action Info Null */
					.deal-act-body > .info-box > .info-null {font-size: 12px; font-weight: 700; height: 20px; margin: 0 0 10px; width: 100%;}
						.deal-act-body > .info-box > .info-null > span {background-color: rgba(255, 255, 255, 1); display: inline-block; float: left; height: 20px; line-height: 20px; padding: 0 10px 0 0; position: relative; z-index: 2;}

					/* Deal Action Info Label */
					.deal-act-body > .info-box > label {margin: 0 0 10px; width: 100%;}

					/* Deal Action Info List */
					.deal-act-body > .info-box > .info-boxList {list-style: none; margin: 10px 0 0;}
					.deal-act-body > .info-box > .info-boxList:only-of-type {margin: 0;}
						.deal-act-body > .info-box > .info-boxList > li {border-radius: 4px; display: block; margin: 0; overflow: hidden; padding: 5px; width: calc(100% - 10px);}
							.deal-act-body > .info-box > .info-boxList > li > div {display: inline-block; float: left;}

							.deal-act-body > .info-box > .info-boxList > li > .srThumb {}

							.deal-act-body > .info-box > .info-boxList > li > .srContent {font-size: 13px; margin: 0 10px; text-align: left; width: calc(100% - 55px);}
								.deal-act-body > .info-box > .info-boxList > li > .srContent > span {box-sizing: border-box; display: block; font-size: 12px; font-weight: 400; line-height: 15px; margin: 0 0 5px; overflow: hidden; position: relative; text-overflow: ellipsis; white-space: nowrap;}
									.deal-act-body > .info-box > .info-boxList > li > .srContent > span > span {clear: both; display: block; line-height: inherit;}
									.deal-act-body > .info-box > .info-boxList > li > .srContent > span > span.genericvalue {font-weight: 500;}
									.deal-act-body > .info-box > .info-boxList > li > .srContent > span > span.genericlabel {font-size: 12px; font-weight: 400;}
									.deal-act-body > .info-box > .info-boxList > li > .srContent > span > span.genericlabelweighted {font-size: 12px; font-weight: 600;}
								.deal-act-body > .info-box > .info-boxList > li > .srContent > span::before {color: inherit; display: block; font-family: FontAwesome; font-size: 12px; height: 100%; left: 0; line-height: inherit; position: absolute; text-align: center; top: 0; width: 15px;}
								.deal-act-body > .info-box > .info-boxList > li > .srContent > span.list-icon {padding: 0 0 0 20px;}
								.deal-act-body > .info-box > .info-boxList > li > .srContent > span:only-of-type {height: 30px; line-height: 30px; margin: 0;}
								.deal-act-body > .info-box > .info-boxList > li > .srContent > span.name {font-size: 14px; font-weight: 700;}
								.deal-act-body > .info-box > .info-boxList > li > .srContent > span.vehicle {font-size: 14px; font-weight: 700;}
								.deal-act-body > .info-box > .info-boxList > li > .srContent > span.position {}
								.deal-act-body > .info-box > .info-boxList > li > .srContent > span.stock {}
								.deal-act-body > .info-box > .info-boxList > li > .srContent > span.birthday {content: "\f1fd";}
								.deal-act-body > .info-box > .info-boxList > li > .srContent > span.birthday::before {content: "\f1fd";}
								.deal-act-body > .info-box > .info-boxList > li > .srContent > span.address {}
								.deal-act-body > .info-box > .info-boxList > li > .srContent > span.address::before {content: "\f041";}
								.deal-act-body > .info-box > .info-boxList > li > .srContent > span.email {}
								.deal-act-body > .info-box > .info-boxList > li > .srContent > span.email::before {content: "\f0e0";}
								.deal-act-body > .info-box > .info-boxList > li > .srContent > span.phone {}
								.deal-act-body > .info-box > .info-boxList > li > .srContent > span.phone::before {content: "\f095";}


 							.deal-act-body > .info-box > .info-boxList > li > .srActions {height: auto; margin: 10px 0 0; width: 100%;}
							.deal-act-body > .info-box > .info-boxList > li:hover > .srActions {display: inherit;}
								.deal-act-body > .info-box > .info-boxList > li > .srActions > ul {list-style: none; overflow: hidden;}
									.deal-act-body > .info-box > .info-boxList > li > .srActions > ul > li {clear: both; display: block; float: left; height: auto; margin: 0; width: 100%;}
									.deal-act-body > .info-box > .info-boxList > li > .srActions > ul > li:last-of-type {margin: 0;}
										.deal-act-body > .info-box > .info-boxList > li > .srActions > ul > li > label {margin: 0;}
											.deal-act-body > .info-box > .info-boxList > li > .srActions > ul > li > label > .button {width: 100%;}

				/* Deal Action Generic Box */
				.deal-act-body > .generic-box {margin: 0 0 10px; position: relative;}
				.deal-act-body > .generic-box::after {clear: both; content: ""; display: table;}
				.deal-act-body > .generic-box:last-of-type {margin: 0;}

					/* Deal Action Generic Divider */
					.deal-act-body > .generic-box > .generic-divider {font-size: 12px; font-weight: 700; height: 20px; margin: 0 0 10px; text-transform: uppercase; width: 100%;}
					.deal-act-body > .generic-box > .generic-divider::before {background-color: rgba(0, 175, 135, .75); content: ""; display: block; height: 2px; left: 0; position: absolute; top: 10px; width: 100%; z-index: 1;}
						.deal-act-body > .generic-box > .generic-divider > span {background-color: rgba(255, 255, 255, 1); display: inline-block; float: left; height: 20px; line-height: 20px; padding: 0 10px 0 0; position: relative; z-index: 2;}

					/* Deal Action Generic Null */
					.deal-act-body > .generic-box > .generic-null {font-size: 12px; font-weight: 700; height: 20px; margin: 0 0 10px; width: 100%;}
						.deal-act-body > .generic-box > .generic-null > span {background-color: rgba(255, 255, 255, 1); display: inline-block; float: left; height: 20px; line-height: 20px; padding: 0 10px 0 0; position: relative; z-index: 2;}

					/* Deal Action Generic Label */
					.deal-act-body > .generic-box > label {float: left; margin: 0 0 10px; width: 100%;}
					.deal-act-body > .generic-box > label:last-of-type {margin: 0;}
						.deal-act-body > .generic-box > label textarea {min-height: 70px;}

					/* Deal Action Generic List */
					.deal-act-body > .generic-box > .roadmap-boxList {list-style: none; margin: 0;}
						.deal-act-body > .generic-box > .roadmap-boxList > li {border-radius: 4px; display: block; margin: 0; overflow: hidden; padding: 5px; width: calc(100% - 10px);}
							.deal-act-body > .generic-box > .roadmap-boxList > li > label {float: left; margin: 0; width: 100%;}
								.deal-act-body > .generic-box > .roadmap-boxList > li > label > * {display: inline-block;}
								.deal-act-body > .generic-box > .roadmap-boxList > li > label > .formlabel {float: right; font-weight: 500; height: auto; margin: 0 0 0 10px; text-align: left; width: calc(100% - 30px);}
								.deal-act-body > .generic-box > .roadmap-boxList > li > label > .checkbox {float: left}

				/* Deal Action Tools */
				.deal-act-body > .deal-act-tools {margin: 10px 0 0;}
					.deal-act-body > .deal-act-tools > .deal-act-tools-list {list-style: none;}
					.deal-act-body > .deal-act-tools > .deal-act-tools-list::after {clear: both; content: ""; display: table;}
						.deal-act-body > .deal-act-tools > .deal-act-tools-list > li {display: inline-block; float: left; margin: 0 10px 0 0; width: calc(50% - 5px);}
						.deal-act-body > .deal-act-tools > .deal-act-tools-list > li:last-of-type {margin: 0;}
						.deal-act-body > .deal-act-tools > .deal-act-tools-list > li:only-of-type {display: block; margin: 0; width: 100%;}
							.deal-act-body > .deal-act-tools > .deal-act-tools-list > li > label {margin: 0; width: 100%;}
								.deal-act-body > .deal-act-tools > .deal-act-tools-list > li > label > button {height: 40px; width: 100%;}

/* FILE PREVIEW */
.fl-prvw {}
	.fl-prvw > ul {list-style: none; position: relative;}
	.fl-prvw > ul::after {clear: both; content: ""; display: table;}
		.fl-prvw > ul > li {border-radius: 4px; cursor: pointer; display: block; overflow: hidden; position: relative;}
		.fl-prvw > ul > li:hover {background-color: rgba(0, 0, 0, .05);}
		.fl-prvw > ul > li::after {clear: both; content: ""; display: table;}
			.fl-prvw > ul > li > div {display: inline-block; float: left; height: 80px;}

			/* FILE PREVIEW THUMB */
			.fl-prvw-thm {width: 110px;}
				.fl-prvw-thm > figure {display: block; height: 100%; overflow: hidden;}
					.fl-prvw-thm > figure > img {display: block; height: 100%; width: 100%;}

			/* FILRE PREVIEW CONTENT */
			.fl-prvw-cnt {margin: 0 0 0 20px; width: calc(100% - 130px);}
				.fl-prvw-cnt > div {display: block; height: 20px; line-height: 20px;}

				.fl-prvw-tl {font-weight: 500; margin: 5px 0 0;}

				.fl-prvw-dt {color: rgb(140, 140, 140);}

				.fl-prvw-act {color: rgb(140, 140, 140); margin: 5px 0 0;}
					.fl-prvw-act > ul {list-style: none; position: relative;}
					.fl-prvw-act > ul::after {clear: both; content: ""; display: table;}
						.fl-prvw-act > ul > li {cursor: pointer; display: inline-block; float: left; margin: 0 10px 0 0; position: relative;}
						.fl-prvw-act > ul > li:hover {color: rgba(75, 75, 75, 1);}
						.fl-prvw-act > ul > li::after {clear: both; content: ""; display: table;}
							.fl-prvw-act > ul > li > div {display: inline-block; float: left;}

							.fl-prvw-act-icn {text-align: center; width: 20px;}

							.fl-prvw-act-cnt {overflow: hidden; text-overflow: ellipsis; text-decoration: underline; white-space: nowrap; width: calc(100% - 20px);}

/* METER GAUGES */
.screen {height: 8em; margin: auto; width: 8em;}
.screen .dials {animation: show-dials 5s ease-out; width: 8em; height: 8em; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}
.screen .dial {border: 1px solid rgb(235, 235, 235); border-radius: 50%;}

/* Dial 1 */
.screen .dial.move {position: absolute; width: 8em; height: 8em;}
.screen .dial.move::before {background-size: 50%; content: ""; width: 1.5em; height: 1.5em; position: absolute; top: -0.29em; left: calc(50% - 0.75em); z-index: 10;}
.screen .dial.move::after {content: ""; background: rgb(235, 235, 235); border-radius: 50%; width: 6em; height: 6em; position: absolute; top: 1em; left: 1em;}
.screen .dial.move .dial-container {position: absolute; top: 0; bottom: 0; width: 4em; overflow: hidden;}
.screen .dial.move .wedge {width: 4em; height: 8em; position: absolute; top: 0; left: 0;}
.screen .dial.move .container1 {left: 4em;}
.screen .dial.move .container1 .wedge {animation: rotate-bg-dial-1-1 5s 0.2s linear 1 forwards; border-radius: 8em 0 0 8em; background: rgb(65, 130, 215); left: -4em; transform-origin: 100% 50%;}
.screen .dial.move .container2 {left: 0;}
.screen .dial.move .container2 .wedge {animation: rotate-bg-dial-1-2 5s 0.2s linear 1 forwards; background: rgb(65, 130, 215); border-radius: 0 8em 8em 0; transform-origin: 0 50%; left: 4em;}
.screen .dial.move .marker {width: 1em; height: 1em; background: rgb(65, 130, 215); border-radius: 50%; position: absolute; top: 0; left: calc(50% - 0.5em);}
.screen .dial.move .end {animation: rotate-marker-dial-1 5s 0.2s linear 1 forwards; transform-origin: 50% 4em;}

/* Dial 2 */
.screen .dial.exercise {position: absolute; width: 6em; height: 6em; top: 1em; left: 1em;}
.screen .dial.exercise::before {background-size: 50%; content: ""; width: 1.5em; height: 1.5em; position: absolute; top: -0.29em; left: calc(50% - 0.75em); z-index: 10;}
.screen .dial.exercise::after {content: ""; background: rgb(215, 215, 215); border-radius: 50%; width: 4em; height: 4em; position: absolute; top: 1em; left: 1em;}
.screen .dial.exercise .dial-container {position: absolute; top: 0; bottom: 0; width: 3em; overflow: hidden;}
.screen .dial.exercise .wedge {border-radius: 50%; width: 3em; height: 6em; position: absolute;}
.screen .dial.exercise .container1 {left: 3em;}
.screen .dial.exercise .container1 .wedge {animation: rotate-bg-dial-2-1 5s .5s linear 1 forwards; border-radius: 8em 0 0 8em; position: absolute; background: rgb(25, 180, 255); left: -3em; transform-origin: 100% 50%;}
.screen .dial.exercise .marker {width: 1em; height: 1em; background: rgb(25, 180, 255); border-radius: 50%; position: absolute; top: 0; left: calc(50% - 0.48em);}
.screen .dial.exercise .end {animation: rotate-marker-dial-2 5s .5s linear 1 forwards; transform-origin: 45% 3em;}

/* Dial 3 */
.screen .dial.stand {position: absolute; width: 4em; height: 4em; top: 2em; left: 2em;}
.screen .dial.stand::before {background-size: 50%; content: ""; width: 1.5em; height: 1.5em; position: absolute; top: -0.28em; left: calc(50% - 0.75em); z-index: 10;}
.screen .dial.stand::after {content: ""; background: rgb(255, 255, 255); border-radius: 50%; width: 2em; height: 2em; position: absolute; top: 1em; left: 1em;}
.screen .dial.stand .dial-container {position: absolute; top: 0; bottom: 0; width: 4em; overflow: hidden;}
.screen .dial.stand .wedge {border-radius: 50%; width: 2em; height: 4em; position: absolute;}
.screen .dial.stand .container1 {left: 2em;}
.screen .dial.stand .container1 .wedge {position: absolute; animation: rotate-bg-dial-3-1 5s 0.5s linear 1 forwards; background: rgb(45, 205, 115); border-radius: 8em 0 0 8em; left: -2em; transform-origin: 100% 50%;}
.screen .dial.stand .marker {width: 1em; height: 1em; background: rgb(45, 205, 115); border-radius: 50%; position: absolute; top: 0; left: calc(50% - 0.5em);}
.screen .dial.stand .end {animation: rotate-marker-dial-3 5s 0.5s linear 1 forwards; transform-origin: 50% 2em;}

/* Dial Empty */
.screen .dial.empty {position: absolute; width: 4em; height: 4em; top: 2em; left: 2em;}
.screen .dial.empty::before {background-size: 50%; content: ""; width: 1.5em; height: 1.5em; position: absolute; top: -0.28em; left: calc(50% - 0.75em); z-index: 10;}
.screen .dial.empty::after {content: ""; background: rgb(255, 255, 255); border-radius: 50%; width: 2em; height: 2em; position: absolute; top: 1em; left: 1em;}
.screen .dial.empty .dial-container {position: absolute; top: 0; bottom: 0; width: 4em; overflow: hidden;}
.screen .dial.empty .wedge {border-radius: 50%; width: 2em; height: 4em; position: absolute;}
.screen .dial.empty .container1 {left: 2em;}
.screen .dial.empty .container1 .wedge {position: absolute; animation: rotate-bg-dial-3-1 5s 0.5s linear 1 forwards; background: rgb(45, 205, 115); border-radius: 8em 0 0 8em; left: -2em; transform-origin: 100% 50%;}
.screen .dial.empty .marker {width: 1em; height: 1em; background: rgb(45, 205, 115); border-radius: 50%; position: absolute; top: 0; left: calc(50% - 0.5em);}
.screen .dial.empty .end {animation: rotate-marker-dial-3 5s 0.5s linear 1 forwards; transform-origin: 50% 2em;}


/* Dial Background(s) */
.screen .dial-background {position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 50%;}
.screen .dial-background.one {background: rgb(235, 235, 235);}
.screen .dial-background.two {background: rgb(215, 215, 215);}
.screen .dial-background.three {background: rgb(195, 195, 195);}

/** Animations **/
@keyframes rotate-marker-dial-1 {0%, 6% {transform: none;} 28%, 94% {transform: rotateZ(220deg);} 95%, 100% {transform: rotateZ(220deg);}}
@keyframes rotate-bg-dial-1-1 {0%, 6% {transform: rotateZ(0);} 24%, 94% {transform: rotateZ(180deg);} 95%, 100% {transform: rotateZ(180deg);}}
@keyframes rotate-bg-dial-1-2 {24% {transform: rotateZ(0);} 28%, 94% {transform: rotateZ(40deg);} 95%, 100% {transform: rotateZ(40deg);}}
@keyframes rotate-marker-dial-2 {20%, 90% {transform: rotateZ(160deg);} 91%, 100% {transform: rotateZ(160deg);}}
@keyframes rotate-bg-dial-2-1 {0%, 0.5% {transform: none;} 19%, 90% {transform: rotateZ(160deg);} 91%, 100% {transform: rotateZ(160deg);}}
@keyframes rotate-marker-dial-3 {19%, 90% {transform: rotateZ(90deg);} 91%, 100% {transform: rotateZ(90deg);}}
@keyframes rotate-bg-dial-3-1 {0%, 1% {transform: none;} 19%, 90% {transform: rotateZ(90deg);} 91%, 100% {transform: rotateZ(90deg);}}

/*not a fan of this, but it looks like the only, and official way to style md dialogs*/
/* .cdk-custom-panel { margin-top: 225px; } */
.cdk-custom-panel mat-dialog-container { box-shadow: none !important; background: none !important; }
.cdk-custom-backdrop {transition: none !important; background: rgba(0, 0, 0, .7);}
.cdk-global-overlay-wrapper {overflow: auto;}

.mat-dialog-container, .mat-mdc-dialog-container {padding: 0 !important; box-shadow: none !important;}
.mat-mdc-dialog-container.mdc-dialog .mdc-dialog__surface { background-color: transparent; }

/** remove that piece once all custom-modal.service.ts would be removed and replaced with dc-components dialog.service.ts **/
.custom-modal .mat-dialog-container, 
.custom-modal .mat-mdc-dialog-container {
	background-color: var(--color-background-dashboard, #F4F3F6);
	position: relative;
	overflow: auto;
	border-radius: 16px;
	padding: 0;
}

.mat-tooltip.help-tooltip__content,
.mat-tooltip.user-avatar__tooltip__content {
	background: var(--color-modal-background) !important;
	box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2);
	color: var(--color-text-light);
	font-family: Montserrat;
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: 0.4px;
	line-height: 16px;
	text-align: center;
	max-width: 360px;
	padding: 8px 12px !important;
}

mat-tooltip-component:not(.ng-star-inserted) {
	display: none;
}

/* prevent black background and shadow overlap when multiple modals open */
.cdk-overlay-container > :nth-last-child(n+2 of .cdk-overlay-backdrop:not(.mat-overlay-transparent-backdrop):not(.cdk-overlay-transparent-backdrop)) {
	opacity: 0;
}

.cdk-overlay-container > :nth-last-child(n+2 of .cdk-global-overlay-wrapper) .mat-mdc-dialog-container .mdc-dialog__surface {
	box-shadow: none;
}

/* clear MatDialog styles from legacy formatted dialogs used to be opened via MatLegacyDialog material*/
.mat-mdc-dialog-container {
    display: block;
    padding: 24px;
    border-radius: 4px;
    box-sizing: border-box;
    overflow: auto;
    outline: 0;
    width: 100%;
    height: 100%;
    min-height: inherit;
    max-height: inherit;
  }

.mat-mdc-dialog-container .mdc-dialog__surface {
    position: initial;
    display: initial;
    flex-direction: initial;
    flex-grow: initial;
    flex-shrink: initial;
    box-sizing: initial;
    max-width: initial;
    max-height: initial;
    pointer-events: initial;
    overflow-y: initial;
    background-color: initial;
    box-shadow: initial;
    border-radius: initial;
  }

.cdk-global-overlay-wrapper .mdc-dialog{
	z-index: initial;
}
/* ---------------------------------------------------------------- */