@import url('../fonts/font-awesome/css/all.css?2');
/* MAIN */
	* {
		padding: 0;
		margin: 0;
	    box-sizing: border-box;
	    --color-accent: #414A60;
	    --color-accent-darker: #383E4F;
	    --size-header-height: 3em;
	    --size-side-menu-width: 16em;
	    --size-filters-width: 18em;
		--color-body-bg: white;
		--color-text: #202F38;
		--color-text-smooth: #2C3A45;
		--color-text-lighter: #557286;
		--color-text-inverted: white;
		--color-subtitle: #B0B4C2;
  		--color-link: #414A60;
  		--color-link-hover: #383E4F;
  		--color-link-inverted: #56BB4B;
  		--color-blue: #3D8BD0;
  		--color-red: #E33C3F;
  		--color-red-darker: #B9413D;
  		--color-red-light: #FEEBEA;
  		--color-red-medium: #F3E6E6;
  		--color-green: #12942C;
  		--color-green-darker: #3F8737;
  		--color-green-light: #4DFFE3;
  		--color-green-medium: #7EF1DB;
  		--color-yellow: #EEBE49;
  		--color-header-bg: #414A60;
  		--color-border:#E2E5ED;
  		--color-scroller:#D9DCE4;
  		--color-scroller-track:#ECF3F9;
  		--color-title-icon: #656F75;
  		--color-side-menu-item: #dddddd;
  		--color-side-menu-bg: #1E2D4A;
  		--color-side-menu-hover: #ffffff;
  		--color-side-menu-hover-bg: #383E4F;
  		--color-input-placeholder: #B7BCCB;
  		--color-input-border: #B7BCCB;
  		--color-input-focus: #EAF6FC;
  		--color-input-outline: rgba(0, 107, 194, 0.25);
  		--color-chart-bg: #f9f9fc;
  		--color-empty-table-icon: #3D8BD0;
  		--color-white-button-border: #697379;
  		--color-table-subtotal: #e1eaef;
  		--color-table-group: #E3E6EE;
  		--color-table-subgroup: #f0f5fa;


  		--color-cell-highlighted: #F5FAFF;
  		--color-cell-super-highlighted: #f5f6f6;
  		--color-cell-highlighted-total: #EAF6FC;
  		--color-cell-super-highlighted-total: #EAF6FC;
	}
	html, body {
		width: 100%;
		height: 100%;
		max-width: 100vw;
		background-color: var(--color-body-bg);
		color: var(--color-text);
		font-size: 14px;
		font-weight: normal;
		line-height: 1.4;
		background-size: 100% 100%;
		background-attachment: fixed;
		scroll-behavior: smooth;
		font-family: 'Roboto', sans-serif;
		margin: 0;
		padding: 0;	
	}
	html, body, input, button, textarea{
		font-family: 'Roboto', sans-serif;
		font-weight: 400;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		-webkit-tap-highlight-color: transparent;
		-webkit-focus-ring-color: rgba(255, 255, 255, 0.0);
		-webkit-backface-visibility: hidden;
		-webkit-font-smoothing: antialiased;
		font-smoothing: antialiased;
		-moz-osx-font-smoothing: graygauge;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	}
	input, button, textarea {
		-webkit-appearance: none;
   		-moz-appearance:    none;
   		appearance:         none;
   		outline: none;
	}
	input[type=text] {
		cursor: text !important;
	}
	.body {
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: nowrap;
		background-color: var(--color-body-bg);
		position: relative;
	}
	.body-unauth {
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		background-color: var(--color-body-bg);
	}
	main {
		flex: 1 1 auto;
		/* width: 100vw;
		max-width: 100vw; */
		height: 100%;
		overflow-x: hidden;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}

	main.unauth {
		flex: 1 1 auto;
		width: 100vw !important;
		max-width: 100vw;
		overflow-x: hidden;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-left: 0;
	}
	::-webkit-input-placeholder {
		font-size: 1rem;
		color: var(--color-input-placeholder);
	}
	::-moz-placeholder {
		font-size: 1rem;
		color: var(--color-input-placeholder);
	}
	:-ms-input-placeholder {
		font-size: 1rem;
		color: var(--color-input-placeholder);
	}
	:-moz-placeholder {
		font-size: 1rem;
		color: var(--color-input-placeholder);
	}
	a {
		text-decoration: none;
		color: var(--color-link);
		text-transform: none;
	}
	sup {

		font-size: 0.9em;
	}
	input.nt-only,
	input.int-only{
		text-transform: uppercase;
	}
	/* ::-webkit-scrollbar {
		width: 3px;
		height: 3px;
	}
	::-webkit-scrollbar-thumb {
		background-color: white;
		width: 3px;
	}
	::-webkit-scrollbar-track,
	::-webkit-scrollbar-corner {
		/* border-left: 1px solid var(--color-border); */
		background-color: white;
	}
	.table-scrollable-container::-webkit-scrollbar-thumb {
		background-color: var(--color-scroller);
		width: 3px;
	}
	.table-scrollable-container::-webkit-scrollbar-track,
	.table-scrollable-container::-webkit-scrollbar-corner {
		/* border-left: 1px solid var(--color-border); */
		background-color: var(--color-scroller-track);
	} */

/* UNAUTH */

	.unauth {
		width: 100vw;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		font-size: 1em;
		border: none !important;
		padding: 0;
	}
	.unauth.sub {
		width: auto;
		height: auto;
		min-width: 400px;
	}
	section.unauth {
		width: 100%;
	}
	.unauth form {
		width: 90%;
		max-width: 340px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: var(--color-cell-super-highlighted);
		border-radius: 0.5em;
		padding: 1em 2em;
		box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.25);
	}
	.unauth form > * {
		width: 100%; 
	}
	.unauth form h1 {
		text-align: center;
		color: var(--color-accent);
		padding: 1rem 0 1.5rem 0;
	}
	.unauth form > div {
		text-align: center;
		margin: 0 auto;
	}
	.unauth input[type=text],
	.unauth input[type=password] {
		background: transparent;
		border: none;
		border-radius: 0.5em;
		outline: none;
		font-size: 1em;
		color: var(--color-text);
		border: 1px solid var(--color-border);
		padding: 1em;
		margin-bottom: 1em;
		cursor: text !important;
	}
	.unauth button {
		color: white;
		background-color: var(--color-accent);
		border: 1px solid var(--color-accent-darker);
		border-radius: 0.5em;
		outline: none;
		padding: 1.5em 1em;
		text-transform: uppercase;
		font-size: 1em;
		cursor: pointer;
		font-weight: bold;
		margin-top: 1em;
		position: relative;
		display: block;
		z-index: 2;
	}
	.unauth button:hover::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .0.5);
		z-index: 0;
	}

	.unauth h4 {
		width: 100%;
		text-align: center;
		margin-top: 1em;
		color: #777;
	}
	.unauth .lock {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		margin: 0 auto 2em auto;
		color: var(--color-text-lighter);
	}
	.unauth .lock::after {
		content: '\f577';
		font-family: 'Font Awesome 5 Pro';
		font-size: 5em;
	}

/* HEADER */
	header {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		color: var(--color-text-inverted);
		padding: 0 1.25em;
		height: var(--size-header-height);
		z-index: 100;
		padding-left: calc(var(--size-side-menu-width) + 1em);
		margin: 0;
		/* position: relative; */

	}
	.body.expanded header {
		padding-left: calc(var(--size-header-height) + 1em) !important;
	}
	.body.reporting header,
	.body.expanded.reporting header {
		padding-left: 1em !important;
	}
	.logout-block {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		font-weight: 500;
	}
	.logout-block strong {
		margin-left: 0.25em;
	}
	.logout-block a.logout {
		margin-left: 1rem;
		font-weight: 600;
		color: white;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 0;
	}
	.logout-block a.logout::before {
		content: '\f2f5';
		font-family: 'Font Awesome 5 Pro';
		font-size: 1.5rem;
		line-height: 1;
	}
	.logout-block > div {
		margin-left: 1em;
		border-left: 1px solid white;
		padding-left: 1em;
	}
	.logout-block h1 {
		font-size: 1.4em;
		margin-right: 1rem;
	}

/* SIDE MENU */
	.side-menu {
		flex: 0 0 auto;
		background-color: var(--color-header-bg);
		background-size: 100% 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		padding: 0;
		z-index: 99;
		
	}
	.side-menu .fold-menu {
		display: none;
	}
	.side-menu .fold-menu a:hover {
		color: white;
	}
	.side-menu .fold-menu a::before {
		content: '\f33e';
		font-family: 'Font Awesome 5 Pro';
		font-size: 1.4em;
		
	}
	.body.expanded .side-menu .fold-menu a::before {
		content: '\f343';
	}
	.side-menu .logo {
		position: relative;
		white-space: nowrap;
		padding: 0 1em;
	}
	.side-menu .logo h1 {
		font-size: 1.5rem;
		line-height: 1;
	}
	.side-menu .logo a {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
	}
	.side-menu .logo .inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;

		padding: 1em;
		color: var(--color-text-inverted);

		font-weight: 500;
	}
	.body.expanded .side-menu .logo {
		display: none;
	}
	.side-menu ul {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: nowrap;
		list-style-type: none;
		margin-left: 2em;
	}
	.side-menu ul li {
		width: auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		padding: 0;
		position: relative;
		cursor: pointer;
	}
	.side-menu ul li.title {
		text-transform: uppercase;
		padding: 1em 1em 0.5em 1em;
		color: var(--color-blue);
		font-weight: 600;
	}
	.body:not(.expanded) .side-menu ul li.expandable::after{
		content: '\f0da';
		font-family: 'Font Awesome 5 Pro';
		color: var(--color-side-menu-item);
		font-weight: bold;
	}
	.side-menu ul li.expandable ul {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(100%, 0%);
		background-color: var(--color-side-menu-hover-bg);
		min-width: 15em;
		color: var(--color-text-inverted) !important;
		box-shadow: 4px 0 4px rgba(0, 0, 0, 0.3);
		z-index: 9999999;
	}
	.side-menu ul li.expandable:hover ul {
		display: block;
	}
	.side-menu ul li.expandable ul li.sectioned{
		/* margin-top: 1em;
		padding-top: 1em; */
		border-top: 1px solid var(--color-side-menu-bg);
	}
	.side-menu ul li a {
		flex: 1 0 auto;
		height: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		padding: 0 1.5em;
		text-decoration: none;
		color: var(--color-side-menu-item);
		text-align: left;
		font-weight: 500;
		text-transform: capitalize;
		position: relative;
	}
	
	.side-menu ul li.active > a,
	.side-menu ul li:hover a,
	.side-menu ul li:hover::after {
		color: white;
	}
	.side-menu ul li.active > a{
		cursor: default;
	}
	.side-menu ul li.active > a::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 5px;
		background-color: var(--color-link-inverted);
	}
	.side-menu ul li:not(.active):hover {
		background-color: var(--color-side-menu-hover-bg);
	}

/* BUTTONS */

	a.btn {
		text-decoration: none !important;
		color: var(--color-text-inverted);
		background-color: var(--color-link);
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		border: 1px solid var(--color-link-hover);
		border-radius: 0.5em;
		padding: 0.6rem 1rem;
		font-weight: 600;
		line-height: 1;
		font-size: 1rem;
		text-transform: capitalize;
		white-space: nowrap;
		cursor: pointer;
		position: relative;
	}
	a.btn.lowercase {
		text-transform: none;
	}
	a.btn.normal-case{
		text-transform: none;
	}
	a.btn.inactive {
		opacity: 0.5;
		cursor: default;
	}
	a.btn.stick-input{
		border-radius: 0.5em;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	a.btn.bigger {
		font-size: 1.2em;
		padding: 1.3em;
		width: 100%;
	}
	a.btn.wider {
		font-size: 1.15em;
		padding: 1.2em;
		width: 100%;
	}
	a.btn.nobg {
		font-size: 0.9em;
		padding: 0.8em;
	}
	a.btn > span:not(:empty) {
		margin-left: 0.25rem;
	}
	a.btn.disabled {
		cursor: default;
		pointer-events: none !important;
	}
	a.btn:not(.nobg):not(.white-and-blue).disabled {
		cursor: default;
		color: rgba(255, 255, 255, .5);
		pointer-events: none !important;
	}
	a.btn.nobg.disabled {
		cursor: default;
		opacity: 0.5;
		pointer-events: none !important;
	}
	a.btn.white {
		background-color: transparent;
		border: 1px solid var(--color-input-border);
		color: var(--color-text);
		font-weight: 500;
	}
	a.btn.white-and-blue {
		background-color: white;
		border: 1px solid var(--color-link);
		color: var(--color-link);
		font-weight: 600;
	}
	a.btn.negative {
		background-color: var(--color-red);
		border: 1px solid var(--color-red);
	}
	a.btn.nobg {
		background-color: transparent;
		border: none;
		color: var(--color-link);
		font-weight: 600;
	}
	a.btn.link {
		width: auto !important;
		background-color: transparent;
		border: none;
		color: var(--color-link);
		font-size: 1rem;
	}
	a.btn.link.right {
		margin-left: auto;
	}
	a.btn:not(.negative):not(.process):not(.processing):not(.disabled):not(.inactive):not(.nobg):not(.link):not(.white):not(.white-and-blue):hover {
		background-color: var(--color-link-hover);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.33);
	}
	a.btn.nobg:not(.process):not(.processing):not(.disabled):not(.inactive):hover {
		color: var(--color-link-hover);
	}
	a.btn.white:not(.process):not(.processing):not(.disabled):hover {
		background-color: transparent;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.33);
	}
	a.btn.white-and-blue:not(.process):not(.processing):not(.disabled):hover {
		background-color: white;
		box-shadow: 0 1px 3px rgba(76, 101, 136, 0.25);
	}
	a.btn.white-and-blue.disabled {
		opacity: 0.5;
	}
	a.btn.process,
	a.btn.processing{
		cursor: pointer !important;
	}
	a.btn::before {
		font-family: 'Font Awesome 5 Pro';
		margin-right: 0.5rem;
		font-weight: bold;
		font-size: 1rem;
	}
	a.btn.no-icon::before {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: inherit;
		display: flex;
		align-items: center;
		justify-content: center;
		display: none;
	}
	a.btn.nolabel::before{
		margin-right: 0;
	}
	a.btn.process:not(.no-icon)::before,
	a.btn.processing:not(.no-icon)::before{
		content: '\f110' !important;
		font-weight: bold;
		display: block;
		animation: spin 0.5s linear infinite;
	}
	a.btn.process.no-icon::before,
	a.btn.processing.no-icon::before{
		content: '';
		display: block;
	}
	a.btn.process.no-icon::after,
	a.btn.processing.no-icon::after{
		content: '\f110';
		font-weight: bold;
		font-family: 'Font Awesome 5 Pro';
		animation: spin 0.5s linear infinite;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: transparent;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 2;
	}
	a.btn.process.done,
	a.btn.process.error {
		font-size: 0;
	}
	a.btn.process.done::before{
		content: '\f00c' !important;
		display: block;
		animation: none;
	}
	a.btn.done::after{
		content: 'Completed!';
		font-size: 1rem;
	}
	a.btn.process.error::before{
		content: '\f071' !important;
		display: block;
		animation: none;
	}
	a.btn.error::after{
		content: 'Failed!';
		font-size: 1rem;
	}
	a.btn.stop::before{
		content: '\f04d';
	}
	a.btn.erase::before{
		content: '\f12d';
	}
	a.btn.update::before {
		content: '\f0ee';
		font-weight: bold;
	}
	a.btn.users::before {
		content: '\f0c0';
		font-weight: bold;
	}
	a.btn.abtests::before {
		content: '\f24e';
	}
	a.btn.server::before {
		content: '\f233';
	}
	a.btn.save::before {
		content: '\f0c7';
		font-weight: bold;
	}
	a.btn.download::before {
		content: '\f019';
		font-weight: bold;
	}
	a.btn.apply::before {
		content: '\f00c';
		font-weight: bold;
	}
	a.btn.cloudflare::before {
		content: '\e07d';
  		font-family: 'Font Awesome 5 Brands';
	}
	a.btn.namecheap::before {
		content: '\f0ac';
	}
	a.btn.sticky::before {
		content: '\f07a';
	}
	a.btn.coupon::before{
		content: '\f145';
	}
	a.btn.usps::before{
  		font-family: 'Font Awesome 5 Brands';
		content: '\f7e1';
	}
	a.btn.smtp::before {
		content: '\f1d8';
		font-weight: bold;
	}
	a.btn.white::before{
		color: var(--color-white-button-border);
	}
	a.btn.white:not(.process):not(.processing):hover::before {
		color: var(--color-text);
	}
	a.btn.add::before{
		content: '\f067';
	}
	a.btn.xls::before{
		content: '\f56e';
	}
	a.btn.adjust::before{
		content: '\f040';
	}

	a.btn.copy::before{
		content: '\f0c5';
	}
	a.btn.save::before{
		content: '\f00c';
	}
	a.btn.history::before{
		content: '\f017';
		font-weight: normal;
	}
	a.btn.bot::before{
		content: '\f3fe';
  		font-family: 'Font Awesome 5 Brands';
	}
	a.btn.purge::before {
		content: '\f12d';
	}
	a.btn.delete::before {
		content: '\f00d';
		font-weight: 500;
		font-size: 1.1em;
	}
	a.btn.trash::before {
		content: '\f2ed';
		font-weight: 500;
		font-size: 1.1em;
	}
	.table-inline-button {
		cursor: pointer;
		text-align: center;
		font-style: normal;
	}
	i.table-inline-button{
		margin-left: auto !important;
	}
	.table-inline-button.invisible {
		visibility: hidden;
	}
	.table-inline-button:hover{
		text-decoration: none !important;
	}
	th .table-inline-button::before {
		color: var(--color-text-lighter) !important;
	}
	.table-inline-button.drag:not(.disabled){
		cursor: ns-resize;
		margin-left: auto !important;
	}
	.table-inline-button::before{
		font-family: 'Font Awesome 5 Pro';
		margin-left: 0.5rem;
		font-weight: bold;
		font-size: 0.9rem;
		color: var(--color-link);
	}
	.table-inline-button.blind::before{
		color: var(--color-input-border);
	}
	.table-inline-button.plain::before{
		color: var(--color-input-border);
	}
	.table-inline-button:hover::before{
		color: var(--color-link-hover);
	}
	.table-inline-button.plain:hover::before{
		color: var(--color-input-border);
	}
	.table-inline-button.blind:hover::before{
		color: var(--color-link);
	}
	.table-inline-button.drag:hover:not(.disabled)::before{
		color: var(--color-input-border);
	}
	.table-inline-button.remove::before {
		content: '\f1f8';
	}
	.table-inline-button.chart-opener::before {
		content: '\f643';
	}
	.table-inline-button.plus::before {
		content: '\f055';
		font-weight: bold;
	}
	.table-inline-button.minus::before {
		content: '\f056';
		font-weight: bold;
		color: var(--color-red);
	}
	.table-inline-button.eye::before {
		content: '\f06e';
		font-weight: bold;
	}
	.table-inline-button.edit::before {
		content: '\f040';
		font-weight: bold;
	}
	.table-inline-button.notification.active::before{
		content: '\f0f3';
		color: var(--color-blue);
	}
	.table-inline-button.notification::before{
		content: '\f1f6';
		color: var(--color-input-border);
	}
	.table-inline-button.notifications {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.5em;
		margin-left: 0.1em;
		margin-right: -0.5em;
	}
	.table-inline-button.notifications.active::before{
		content: '\f0f3';
	}
	.table-inline-button.notifications::before{
		content: '\f1f6';
	}
	.table-inline-button.notifications{
		position: relative;
	}
	.table-inline-button.notifications div{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	.table-inline-button.approve{
		background-color: var(--color-link);
		border-radius: 0.5em;
		padding: 0.0em 0.75em !important;
		margin: 0 0 0 1em !important;
		height: 1.5em;
	}
	.table-inline-button.approve::before {
		content: '\f00c';
		font-weight: bold;
		font-size: 0.8em;
		text-align: center;
		color: white;
		margin: 0;
		padding: 0;
	}
	.table-inline-button.approve:hover{
		background-color: var(--color-link-hover) !important;
	}
	.table-inline-button.approve:hover::before{
		color: white !important;
	}
	.table-inline-button.reject::before {
		content: '\f00d';
		font-weight: bold;
		font-size: 1em;
		text-align: center;
	}
	.table-inline-button.approve:hover::before,
	.table-inline-button.reject:hover::before {
		color: var(--color-link-hover);
	}
	.table-inline-button.create-conversion::before {
		content: '\f2e8';
		font-size: 1rem;
	}
	.table-inline-button.create-conversion.active::before {
		content: '\f110' !important;
		font-weight: bold;
		display: block;
		animation: spin 0.5s linear infinite;
	}
	.table-inline-button.adjust::before,
	.table-inline-button.adjust_quick::before {
		font-size: 0.8rem;
		content: '\f040';
	}
	.table-inline-button.delete::before {
		content: '\f1f8';
	}
	.table-inline-button.copy::before {
		/* font-size: 0.8rem; */
		content: '\f0c5';
	}
	.table-inline-button.copy.copied::before {
		/* font-size: 0.8rem; */
		content: '\f00c';
	}
	.table-inline-button.drag:not(.disabled)::before {
		content: '\f7a4';
		cursor: ns-resize;
	}
	.table-inline-button.bot::before {
		font-size: 0.8rem;
		content: '\f544';
		font-weight: normal;
	}
	.table-inline-button.repeat::before {
		content: '\f363';
	}
	.table-inline-button.reset::before,
	.table-inline-button.reset_quick::before {
		content: '\f363';
	}
	.table-inline-button.comment::before {
		content: '\f4a6';
		margin-right: -0.5em;
		font-weight: normal;
	}
	.table-inline-button.report::before {
		content: '\f65b';
	}
	.table-inline-button.throttle::before,
	.table-inline-button.throttle_quick::before {
		font-size: 0.8rem;
		content: '\f893';
	}

	.table-inline-button.mcpops::before {
		font-size: 0.8rem;
		content: '\f09d';
	}
	.table-inline-button.fire::before,
	.table-inline-button.fire_quick::before {
		content: '\f7e4';
	}
	.table-inline-button.process::before,
	.table-inline-button.processing::before{
		content: '\f110' !important;
		font-weight: bold;
		display: block;
		animation: spin 0.5s linear infinite;
	}
	a.link-chain{
		color: var(--color-link);
		text-decoration: none !important;
	}
	a.link-chain:hover{
		color: var(--color-link-hover);
	}
	a.link-chain::before{
		content: '\f0c1';
		font-family: 'Font Awesome 5 Pro';

	}
	a.txt {
		text-decoration: none;
		font-weight: 600;
		color: var(--color-text);
		font-size: 1em;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
	}
	a.txt.disabled {
		color: var(--color-input-border);
		cursor: default;
		pointer-events: none;
	}
	a.txt.blind {
		color: var(--color-input-border);
	}
	a.txt:hover {
		text-decoration: none !important;
	}
	a.txt:not(.disabled):hover {
		color: var(--color-link-hover);
	}
	a.txt sup {
		margin-left: 0.4em;
		font-size: 0.75em;
		font-weight: 600;
		margin-bottom: 0.25em;
		opacity: 0.6;
	}

/* TITLES */
	.section-title {
		font-size: 1.25em;
		font-weight: 500;
		color: var(--color-text);
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		text-transform: capitalize !important;
		font-weight: 600 !important;
		display: none;
	}
	.section-title.domains {
		text-transform: none !important;
	}
	.section-title::before{
		font-family: 'Font Awesome 5 Pro';
		margin-right: 0.5em;
		font-weight: 500;
		color: var(--color-title-icon);
	}
	.section-title.automation::before {
		content: '\f544';
		font-weight: bold;
	}
	.section-title.profiles::before {
		content: '\f017';
		font-weight: bold;
	}	
	.section-title.statistics::before{
		content: '\f643';
		font-weight: bold;
	}
	.section-title.dashboard::before{
		content: '\f625';
		font-weight: bold;
	}
	.section-title.payments::before{
		content: '\f09d';
		font-weight: bold;
	}
	.section-title.networks::before{
		content: '\f78a';
		font-weight: bold;
	}	
	.section-title.links::before{
		content: '\f0c1';
		font-weight: bold;
	}	
	.section-title.trackers::before{
		content: '\f37e';
		font-weight: normal;
	}	
	.section-title.offers::before{
		content: '\f291';
		font-weight: bold;
	}
	.section-title.domains::before{
		content: '\f0c1';
		font-weight: bold;
	}
	.section-title.settings::before{
		content: '\f013';
		font-weight: bold;
	}
	.section-title.alerts::before{
		content: '\f0f3';
		font-weight: bold;
	}
	.section-title.users::before{
		content: '\f0c0';
		font-weight: bold;
	}
	.section-title.abtests::before{
		content: '\f24e';
	}
	.section-title span {
		display: inline-block;
		margin: 0 0.25em !important;
		font-weight: 600;
	}

	.section-title b {
		margin-left: 0.2em;
		font-weight: 600;
	}

/* WORKSPACE */
	.workspace {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		/* position: relative; */
	}
	.workspace:empty{
		justify-content: center;
	}
	.workspace:empty::before{
		font-weight: bold;
		color: var(--color-border);
		font-size: 4em;
		white-space: pre;
		line-height: 1;
		text-transform: uppercase;
	}
	.workspace.forbidden:empty::before{
		content: '403';
		font-weight: bold;
		color: var(--color-border);
		font-size: 5em;
	}
	.workspace.forbidden:empty::after{
		content: 'Not Enough Permissions';
		font-weight: bold;
		color: var(--color-border);
		font-size: 2em;
	}
	.workspace.notfound:empty::before{
		content: '404';
		font-weight: bold;
		color: var(--color-border);
		font-size: 5em;
	}
	.workspace.notfound:empty::after{
		content: 'Page Not Found';
		font-weight: bold;
		color: var(--color-border);
		font-size: 2em;
	}
	.workspace .view-header {
		width: 100%;
		padding: 1em 1em;
		border-bottom: 1px solid var(--color-border);
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		margin-right: auto;
	}
	.workspace .view-header > a{
		margin-left: 1em;
	}
	.workspace .view-header > a:first-of-type{
		margin-left: auto;
	}
	.workspace .view-header > #export-button-container:not(.nomargin){
		margin-left: auto;
	}
	.workspace .view-header > #export-button-container.nomargin{
		margin-left: 1em;
	}
	.workspace .view-header > #export-button-container + a {
		margin-left: 1em;
	}
	.workspace .view-header .right {
		margin-left: auto;
		font-size: 1.1em;
		font-weight: 600;
	}

/* DASHBOARD */
	.summary-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}
	.summary {
		flex: 1 1 auto;
		border: 1px solid var(--color-border);
		padding: 1em;
		border-radius: 0.1em;
		margin: 1em 1em 0 1em;
		background-color: var(--color-input-focus);
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: space-between;
	}
	.summary:first-of-type {
		/* margin-left: 2em; */
	}
	.summary:last-of-type {
		margin-bottom: 1em;
	}
	.summary h2 {
		font-size: 1.6em;
		font-weight: 700;
		line-height: 1;
		margin: 0;
		padding: 1rem;
	}
	.summary .summary-body {
		flex: 1 1 auto;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: space-around;
		flex-wrap: nowrap;
	}
	.summary .summary-body .summary-item {
		flex: 1 1 25%;
		position: relative;
		z-index: 1;
		padding: 1rem;
		margin-right: 1.5em;
	}
	.summary .summary-body .summary-item:last-of-type{
		margin-right: 0;
	}
	.summary .summary-body .summary-item > * {
		z-index: 2;
	}
	/* .summary .summary-body .summary-item::before{
		content: '';
		display: block;
		position: absolute;
		z-index: -1;
		top: 1rem;
		bottom: 1rem;
		left: 1rem;
		right: 1rem;
		border: 1px solid var(--color-border);
		background-color: white;
	} */
	.summary .summary-body .summary-item h3 {
		text-transform: uppercase;
		font-weight: 600;
		font-size: 1.25em;
		color: var(--color-text-lighter);

	}
	.summary .summary-body .summary-item > span {
		font-weight: 500;
		font-size: 2.8em;
	}
	.summary .summary-body .summary-item .summary-details{
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}
	.summary .summary-body .summary-item .summary-details .detail{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		margin-right: 1em;
	}
	.summary .summary-body .summary-item .summary-details .detail label {
		font-weight: 600;
		color: var(--color-input-placeholder);
		font-size: 0.85em;
	}
	.summary .summary-body .summary-item .summary-details .detail span {
		font-weight: 600;
		font-size: 1.2em;
		line-height: 1;
	}

/* TABLE */

	/* General */
		.table-view {
			flex: 1 1 auto;
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: stretch;
			flex-wrap: nowrap;
			padding: 0;
			padding-bottom: 0;
			position: relative;
		}
		.table-view.scrollable {
			overflow-y: scroll;
		}
		.table-view.filters-on-right {
			padding-right: 0;
			flex-direction: row-reverse !important;
		}
		.table-sub-view {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			flex-wrap: nowrap;
			position: relative;
			margin-right: 1em;
			padding: 0 !important;
			padding-top: 1em !important;
		}
		.table-sub-view.fixed {
			height: 100%;
			overflow-y: scroll;
		}
		.table-view .dataTables_wrapper {
			width: 100%;
			padding: 0;
			margin: 0;
		}
		.table-view table {
			width: 100% !important;
			border: 1px solid var(--color-border) !important;
			border-radius: 0.5em;
			table-layout: auto;
			margin: 0;
			margin-bottom: 1em;
			overflow: hidden;
		}
		.table-view table.sticky {
			/* border-top: none !important; */
		}
		.table-view table.condensed {
			width: 100% !important;
		}
		.table-view table::after{
			content: '';
		}
		.table-view .dataTables_filter {
			display: none !important;
		}
		.table-scrollable-container {
			width: 100%;
		}
	/* Empty Table */
		.table-view .empty-table {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			/* min-height: 25vh; */
			padding: 3em 2em;
			font-size: 1.1em;
			color: var(--color-title-icon);
		}
		.table-view .empty-table h3 {
			font-size: 1.25em;
			font-weight: 500;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			margin: auto !important;
			color: var(--color-input-placeholder);
		}
		.table-view .empty-table span {
			margin: auto !important;
		}
		.table-view .empty-table h3::before {
			font-family: 'Font Awesome 5 Pro';
			color: var(--color-input-placeholder);
			font-size: 1.7em;
			margin-bottom: 0.0em;
		}
		.table-view .empty-table.automation h3::before {
			content: '\f544';
			font-weight: bold;
		}
		.table-view .empty-table.profiles h3::before {
			content: '\f017';
			font-weight: bold;
		}	
		.table-view .empty-table.statistics h3::before {
			content: '\f643';
			font-weight: bold;
		}
		.table-view .empty-table.payments h3::before {
			content: '\f09d';
			font-weight: bold;
		}
		.table-view .empty-table.networks h3::before {
			content: '\f78a';
			font-weight: bold;
		}
		.table-view .empty-table.links h3::before {
			content: '\f0c1';
			font-weight: bold;
		}
		.table-view .empty-table.trackers h3::before {
			content: '\f37e';
			font-weight: normal;
		}
		.table-view .empty-table.domains h3::before {
			content: '\f0c1';
			font-weight: bold;
		}
		.table-view .empty-table.offers h3::before {
			content: '\f291';
			font-weight: bold;
		}
		.table-view .empty-table.domains h3::before {
			content: '\f0c1';
		}
		.table-view .empty-table.smtp h3::before {
			content: '\f1d8';
			font-weight: bold;
		}
		.table-view .empty-table.customers h3::before {
			content: '\f0c0';
			font-weight: bold;
		}
		.table-view .empty-table.abtests h3::before {
			content: '\f24e';
		}
		.table-view .empty-table.search h3::before {
			content: '\f002';
			font-weight: bold;
		}
		.table-view .empty-table.alerts h3::before {
			content: '\f0f3';
			font-weight: bold;
		}
		.table-view .empty-table.coupons h3::before {
			content: '\f145';
			font-weight: bold;
		}
		.table-view .empty-table.orders h3::before {
			content: '\f290';
			font-weight: bold;
		}
		.table-view .empty-table.users h3::before {
			content: '\f0c0';
			font-weight: bold;
		}
		.table-view .empty-table.abtests h3::before {
			content: '\f24e';
			font-weight: bold;
		}
		.table-view .empty-table a {
			margin-top: 1em;
		}
	/* Header [thead] */
		.table-view table thead th {
			text-transform: uppercase;
			text-align: left;
			padding: 0.5em 0.5em 0.5em 0.8em;
			/* border-top: 1px solid var(--color-border) !important; */
			white-space: nowrap;
			border: none;
			-webkit-user-select: none; /* Safari */
			-moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* IE 10+/Edge */
			user-select: none; /* Standard */
		}
		.table-view table thead th i {
			text-transform: none;
			font-style: normal;
		}
		.table-view table.single-network thead th {
			background-color: var(--color-cell-super-highlighted) !important;
		}
		.table-view table thead th small {
			color: var(--color-input-border);
			font-size: 1em;
			margin-left: 0.1em;
		}
		.table-view table thead th::after {
			content: '';
			font-family: 'Font Awesome 5 Pro';
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;	
			width: 0.5em;
			display: inline-block;
			text-align: center;
			font-weight: normal;
		}
		.table-view table thead th.sorting_asc::after {
			content: '\f309';
		}
		.table-view table thead th.sorting_desc::after {
			content: '\f30c';
		}
		.table-view table thead th.swappable span{
			cursor: pointer;
		}
		.table-view table thead th.swappable span::after {
			content: '\f079';
			font-family: 'Font Awesome 5 Pro';
			font-size: 0.85em;
			font-weight: bold;
			opacity: 0.5;
			margin-left: 0.25em;
			margin-right: 1em;
		}
	/* Footer [tfoot] - used as additional header to show totals */
		.table-view table tfoot.header { 
			display: table-header-group !important; 
		}
		.table-view table.single-network tfoot.header th { 
			background-color: var(--color-cell-super-highlighted) !important;
			border-bottom: none !important;
		}
		
	/* Header cells [thead th] */
		.table-view table tfoot th:not(.dataTables_empty) {
			padding: 0.5em 0.9em 0.5em 0.9em;
			border-bottom: 1px solid var(--color-border);
			vertical-align: middle;
			position: relative;
			white-space: nowrap;
			text-align: left;
			max-width: 0;
		}
		.table-view table thead th:last-of-type {
			padding-right: 1.0em !important;
		}
		.table-view table.sticky thead th {
			position: sticky;
			background-color: white;
	  		top: 0;
	  		height: 3em;
	  		z-index: 90;
		}
		.table-view table.sticky.single-header thead th {
			border-bottom: 1px solid var(--color-border);
		}
		.table-view table thead th.small {
			max-width: 1em !important;
			padding: 0 !important;
			text-align: center !important;
		}
		.table-view table thead th.small::before{
			display: none;
		}
		.table-view table thead th.small::before{
			display: none;
		}
		.table-view table thead th.button-container {
			width: 1em;
			padding: 0.2em 0.6em 0.2em 0.8em;
		}	
		.table-view table thead th.btn-container,
		.table-view table thead th.narrow{
			width: 1em;
		}
		.table-view table tfoot.header th {
			font-weight: 600;
			padding: 0em 1.0em 0.5em 0.9em !important;
			border-top: none;
			position: sticky;
			background-color: white;
	  		top: 3em;
	  		z-index: 90;
		}
		.table-view table.sticky tfoot.header th {
			border-bottom: 1px solid var(--color-border);
		}
	/* Footer cells [tfoot th] */
		.table-view table tfoot th:first-of-type{
			padding-right: 0.5em !important;
			width: 35% !important;
		}
		.table-view table tfoot th:last-of-type {
			padding-right: 1.0em !important;
		}
	/* Cells [td] */
		.table-view table:not(.table-condensed) tbody td:not(.dataTables_empty) {
			padding: 0.6em 0.9em 0.6em 0.9em !important;
			border-bottom: 1px solid var(--color-border);
			vertical-align: middle;
			position: relative;
			white-space: nowrap;
			text-align: left;
			/* max-width: 0; */
		}
		.table-view table tbody tr:last-of-type td {
			border-bottom: none !important;
		}
		.table-view table tbody td small {
			font-size: 0.8em;
			font-weight: 600;
			color: var(--color-subtitle);
			display: block;
			padding-top: 2px;
		}
		.table-view table tbody td {
			line-height: 1.4;
		}
		.table-view table tbody td.maincol {
			width: 52% !important;
		}
		.table-view table tbody td.col-10-perc {
			width: 12% !important;
		}
		.table-view table tbody tr.bolder td {
			font-weight: 600 !important;
			background-color: var(--color-input-focus) !important;
			padding-top: 0.5em !important;
			padding-bottom: 0.5em !important;
		}
		.table-view table tbody tr.deselected td,
		.table-view table tbody tr.deselected td > * {
			color: var(--color-input-border) !important;
		}
		.table-view table tbody tr:first-of-type td{
			border-top: 1px solid var(--color-border) !important;
		}
		.table-view table:not(.table-condensed) tbody td:last-of-type {
			padding-right: 1.0em !important;
		}
		.table-view table tbody tr.conversion td{
			background-color: var(--color-green-light);
		}
		.table-view table tbody tr.throttle td{
			background-color: var(--color-red-light);
		}
		.table-view table tbody td.small {
			max-width: 1em !important;
			padding: 0 !important;
			text-align: center !important;
		}
		.table-view table tbody td.small::before{
			display: none;
		}

		.table-view table tbody td.highlighted{
			background-color: var(--color-cell-highlighted);
		}
		.body:not(.reporting) .table-view table tbody td.highlighted.bolder{
			background-color: var(--color-cell-highlighted-total);
		}
		.body:not(.reporting) .table-view table tbody td.superhighlighted.bold{
			font-weight: 600;
			background-color: var(--color-cell-super-highlighted);
		}
		.body:not(.reporting) .table-view table tbody td.superhighlighted.bolder{
			background-color: var(--color-cell-super-highlighted-total);
		}
		.table-view table tbody td:not(.overflow){
			width: 10px;
			max-width: 100%;
		}

		.table-view table tbody td.overflow{
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.table-view table tbody td.overflown{
			width: 3em !important;
			max-width: 3em !important;
			overflow: hidden !important;
		    white-space: nowrap !important; 
		    text-overflow: ellipsis !important;
		}
		.table-view table tbody tr.loading td{
			background-color: var(--color-border);
			pointer-events: none;
		}
		.table-view table tbody tr.loading td::after {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			padding: 0;
			top: 0;
			left: 0;
			z-index: 5;
			transform: translate3d(0, 0, 0);
			background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.35) 75%, transparent 75%, transparent);
			background-size: 32px 32px;
			animation: cell-process 500ms linear infinite;
		}
		.table-view table tbody td.button-container {
			width: 1em;
			padding: 0.2em 0.6em 0.2em 0.8em;
		}	
		.table-view table tbody td::before {
			content: '';
			display: inline-block;
			width: 1px;
			position: absolute;
			top: 0em;
			bottom: 0em;
			left: 0em;
			background-color: var(--color-border);
		}
		.table-view table tbody td:not([style*='display: none'])::before {
			display: none;
		}
		.table-view table tbody td:not([style*='display: none']) ~ td:not([style*='display: none'])::before {
			display: inline-block;
			width: 1px;
			position: absolute;
			top: 0em;
			bottom: 0em;
			left: 0em;
			background-color: var(--color-border);
		}
		.table-view table tbody td.button-container::before {
			display: none;
		}
		.table-view table tbody td.status {
			white-space: nowrap;
		}
		.table-view table tbody td.status.inactive {
			color: var(--color-input-border);
		}
		.table-view table tbody td.btn-container,
		.table-view table tbody td.narrow{
			width: 1em;
		}
		.table-view table tbody td.landing-page-link{
			max-width: 12em;
			overflow-x: hidden;
			text-overflow: ellipsis;
		}
		
		.table-view table tbody td.missed{
			color: var(--color-input-placeholder);
			font-weight: 500;
			text-decoration: line-through;
		}	
		.table-view table tbody td .landing-page-link{
			color: var(--color-text);
			text-decoration: none;
		}
		.table-view table tbody td .landing-page-link:hover{
			color: var(--color-link-hover);
			text-decoration: none !important;
		}
	/* Cell's inner div */
		.table-view table tbody td > div,
		.table-view table thead th > div,
		.table-view table tfoot th > div {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			cursor: default !important;
			position: relative;
		}
		.table-view table tbody td > div.col{
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
		}
		.table-view table tbody td > div.col p{
			line-height: 1.25;
		}
		.table-view table tbody td > div.ab::before {
			content: 'A/B';
			position: absolute;
			font-size: 0.65em;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			top: 0;
			bottom: 0;
			left: -0.6rem;
			width: 1rem;
			color: var(--color-input-border);
		}
		.table-view table tbody td > div.name {
			padding-left: 1em;
		}
		.table-view table tbody td > div.name.extra-padding {
			padding-left: 1.5em;
		}
		.table-view table tbody tr.child-row td > div.name.extra-padding {
			padding-left: 1.85em;
		}
		.table-view table tbody td > div.name p {
			margin-right: 1em;
			font-weight: 600;
			color: var(--color-text-smooth);
		}
		.table-view table tbody td > div.name.extra-padding p {
			font-weight: 500;
		}
		.table-view table tbody td > div.name p > small {
			font-size: 0.7em;
			line-height: 1;
			color: var(--color-subtitle);
		}
		.table-view table tbody td > div.name.no-padding {
			padding-left: 0em;
		}
		/* .table-view table tbody td > div.name.extra-padding {
			padding-left: 1em;
		} */
		.table-view table tbody td > div.name > sup {
			margin-left: 0.33rem;
			font-weight: 600;
			color: white;
			font-size: 0.7em;
		}
		.table-view table tbody td > div.name > a {
			color: var(--color-text);
		}
		.table-view table tbody td .row {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
		}
	/* Cell's inner span */
		.table-view table tbody td:not(.status) > div > span,
		.table-view table thead th > div > span,
		.table-view table tfoot th > div > span {
			margin-left: 0.25em;
		}
		.table-view table tbody td > div > small {
			font-weight: normal;
			font-style: italic;
			opacity: 0.5;
		}
		.table-view table tbody td:not(.status) > div > span:first-of-type,
		.table-view table thead th > div > span:first-of-type,
		.table-view table tfoot th > div > span:first-of-type{
			margin-left: auto;
		}
		.table-view table tbody td.status span::before {
			content: '';
			display: inline-block;
			width: 8px;
			height: 8px;
			border-radius: 0.5em;
			margin-right: 0.5em;
		}
		.table-view table tbody td.unknown span::before {
			background-color: var(--color-input-placeholder);
		}
		.table-view table tbody td.status.negative span:first-of-type::before {
			background-color: var(--color-red);
		}
		.table-view table tbody td.status.positive span:first-of-type::before {
			background-color: var(--color-green);
		}
		.table-view table tbody td.status.neutral span:first-of-type::before {
			background-color: var(--color-input-border);
		}
		.table-view table tbody td.status.blue span:first-of-type::before {
			background-color: var(--color-blue);
		}
		.table-view table tbody td.status.orange span:first-of-type::before {
			background-color: orange;
		}
		.table-view table thead th.sorting span,
		.table-view table thead th.orderable span {
			cursor: pointer;
		}
		.table-view table tbody td span.custom-checkbox{
			margin-left: 0px !important;
			margin-right: 0.5em;
		}
	/* Cell's links */
		.table-view td div a.text{
			color: var(--color-text);
		}
		.table-view table tbody td.status > div > div {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
		}
		.table-view table tbody td.status div > a,
		.table-view table tbody td.status .switcher-checkbox{
			margin-left: auto !important;
		}
		.table-view table a.network-settings-opener{
			margin-right: 0.65em;
			text-decoration: none !important;
			color: var(--color-input-border) !important;
			margin-top: 2px;
			margin-left: -0.25em;
		}
		.table-view table a.network-settings-opener:hover{
			color: var(--color-link) !important;
		}
		.table-view table a.network-settings-opener::before{
			content: '\f142';
			font-family: 'Font Awesome 5 Pro';
			font-weight: bold;
		}
		.table-view table tbody td > div > a.expander{
			margin-left: auto;
			text-decoration: none !important;
			color: var(--color-link) !important;
			margin-top: 2px;
			margin-right: -0.25em;
			font-size: 1.2em;
		}
		.table-view table tbody td > div > a.expander::before{
			content: '\f107';
			font-family: 'Font Awesome 5 Pro';
			font-weight: normal;
		}
		.table-view table tbody td a.edit,
		.table-view table tbody td a.delete,
		.table-view table thead th a.delete,
		.table-view table tbody td a.key,
		.table-view table tbody td a.landing-page{
			text-decoration: none !important;
			outline: none;
			color: var(--color-link) !important;
		}
		.table-view table tbody td a.landing-page{
			font-size: 0.9em;
		}
		.table-view table thead th a.delete{
			color: var(--color-text);
		}
		.table-view table tbody td a {
			text-decoration: none;
			cursor: pointer;
		}
		.table-view table tbody td a:not(.delete):not(.edit):not(.key):hover,
		.table-view table thead th a:not(.delete):not(.edit):not(.key):hover {
			text-decoration: underline;
		}
		.table-view table thead th a.delete::before,
		.table-view table tbody td a.delete::before{
			content: '\f1f8';
			font-weight: bold;
			font-family: 'Font Awesome 5 Pro';
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			text-align: center;
		}
		.table-view table tbody td a.delete.loading::before,
		.table-view table thead th a.delete.loading::before{
			content: '\f110';
			animation: spin 0.5s linear infinite;
			font-weight: bold;
		}
		.table-view table tbody td a.edit::before{
			content: '\f040';
			font-weight: bold;
			font-family: 'Font Awesome 5 Pro';
		}
		.table-view table tbody td a.key::before{
			content: '\f084';
			font-weight: bold;
			font-family: 'Font Awesome 5 Pro';
		}
		.table-view table tbody td.landing-page-link div a{
			overflow-x: hidden;
			text-overflow: ellipsis;
		}
		.table-view table tbody td.button-container .btn {
			padding: 0.3rem 0.3rem;
			font-size: 0.9em;
		}
		.table-view table tbody td a.clicks-opener.disabled,
		.table-view table tbody td a.conversions-opener-cell.disabled{
			color: var(--color-text);
			text-decoration: none !important;
			pointer-events: none !important;
		}
	/* Cell's labels */
		.table-view table tbody td > div > label:empty,
		.table-view table thead th > div > label:empty,
		.table-view table tfoot th > div > label:empty {
			background-color: transparent;
		}
	/* Cell's <b> */
		.table-view table tbody td  b {
			font-weight: normal;
		}
		.table-view table tbody td.status div > b{
			margin-right: 0.5em;
		}
		.table-view table tbody td.pattern-cell div > b.blind{
			color: var(--color-input-border);
		}

		.table-view table tbody td > div > b,
		.table-view table tfoot th > div > b {
			font-weight: normal;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
		}
		.table-view table tbody td > div b.negative{
			color: var(--color-red);
			font-weight: bold;
		}
		.table-view table tbody td > div b.positive{
			color: var(--color-green);
			font-weight: 600;
		}
		.table-view table tbody td > div > a.btn.incell {
			margin-left: auto;
			font-size: 0.8em;
			padding: 0.4em 0.8em;
		}
	/* Cell's <sup> */
		.table-view table tbody td > div > sup {
			margin-left: 0.4em;
			font-size: 0.75em;
			font-weight: 600;
			margin-bottom: 0.25em;
			opacity: 0.6;
		}
		.table-view table tbody td > div > sup.changing{
			font-weight: bold;
			color: var(--color-red);
			opacity: 1.0;
		}
	/* Cell's <strong> */
	
		.table-view table tbody td > div > strong {
			font-weight: 600;
		}
	/* Cell's <p> */
	
		.table-view table tbody td p {
			line-height: 0.9;
		}
	/* Margins / Negative Margins */
		.table-view table tbody td > div > b.fullwidth,
		.table-view table tfoot th > div > b.fullwidth {
			width: 100%;
		}
		.table-view table tbody td > div > b ul.margins,
		.table-view table tfoot th > div > b ul.margins{
			list-style-type: none;
			margin-left: auto;
			padding-left: 0.5em;
			margin-right: -0.5em;
		}
		.table-view table tbody td > div > b ul.margins li,
		.table-view table tfoot th > div > b ul.margins li{
			font-size: 0.7em;
			font-weight: 500;
			line-height: 0.95;
			text-align: right;
		}
		.table-view table tbody td.subtotals > div > b ul.margins li,
		.table-view table tfoot th > div > b ul.margins li{
			/* font-size: 0.75em; */
			font-weight: bold;
		}
		.table-view table tbody td > div > b ul.margins li:first-of-type,
		.table-view table tfoot th > div > b ul.margins li:first-of-type{
			color: var(--color-green);
		}
		.table-view table tbody td > div > b ul.margins li:last-of-type,
		.table-view table tfoot th > div > b ul.margins li:last-of-type{
			color: var(--color-red);
		}

/* TABLE GROUP */
	.table-group td {
		font-weight: bold;
		background-color: var(--color-table-group);
		padding: 0.35em 0.9em 0.35em 0.9em !important;
	}


	.table-group.bordered td {
		border-bottom: 2.4em solid white;
		position: relative;
	}
	.table-group.bordered td:first-of-type::after{
		content: 'No offers assigned yet';
		position: absolute;
		z-index: 10;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		height: 2.4em;
		left: 1em;
		bottom: 0;
		transform: translate(0, 100%);
		font-weight: normal;
		color: var(--color-input-placeholder);
	}
	.table-group td div{
		width: 100%;
		display: flex;
		flex-direction: row !important;
		justify-content: flex-start !important;
		align-items: center !important;
	}
	
	.table-group td div a{
		font-weight: normal !important;
		color: var(--color-text) !important;
	}
	.table-group td div a.small{
		margin-left: auto;
		color: var(--color-text-lighter) !important;
		font-size: 0.9em;
		opacity: 0.5;
	}
	.table-group td div a.right{
		margin-left: auto;
	}
	.table-group td div a.left{
		/* margin-right: auto; */
		margin-left: 0.75em;
	}
	.table-group td div a.text.left{
		margin-right: auto;
		margin-left: 0;
	}
	.table-group td div a.link{
		color: var(--color-text-lighter) !important;
		font-size: 0.8em;
		opacity: 0.5;
		font-weight: 500;
	}
	.table-group td div a.link:hover{
		text-decoration: none !important;
		color: var(--color-link) !important;
		opacity: 1.0;
	}
	.table-group td div a.link::before{
		content: '\f0c1';
		font-family: 'Font Awesome 5 Pro';
		font-weight: 500;
		margin-top: 1px;
	}
	.table-group td div sup {
		margin-left: 0.33rem;
		font-weight: 600;
		color: var(--color-border);
		font-size: 0.5em;
	}
	.table-group td {
		font-weight: bold;
		background-color: var(--color-table-group);
		padding: 0.35em 0.9em 0.35em 0.9em !important;
		height: 2.5em;
		vertical-align: middle;
	}
	.table-group.bordered td {
		border-bottom: 2.4em solid white;
		position: relative;
	}
	.table-group.bordered td:first-of-type::after{
		content: 'No offers assigned yet';
		position: absolute;
		z-index: 10;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		height: 2.4em;
		left: 1em;
		bottom: 0;
		transform: translate(0, 100%);
		font-weight: normal;
		color: var(--color-input-placeholder);
	}
	.table-group td div a{
		font-weight: 600 !important;
		color: var(--color-text);
	}
	.table-group td div a.text{
		font-size: 1.1em;
	}
	.table-group td div sup {
		margin-left: 0.33rem;
		font-weight: 600;
		color: var(--color-border);
		font-size: 0.5em;
	}
	.table-group td div .caps-status {
		margin-left: 0.75rem !important;
		background-color: var(--color-red);
		color: white;
		font-weight: 600;
		font-size: 0.9em;
		/* text-transform: uppercase; */
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 0.75em;
		height: 1.24rem;
		line-height: 1;
		border-radius: 0.62rem;
		margin-top: 2px;
	}
	.table-group td div .caps-status:empty{
		display: none;
	}
	.table-group td div .network-comment {
		margin-left: 0.75rem !important;
		background-color: rgba(0, 0, 0, 0.075);
		color: var(--color-text);
		font-weight: 600;
		font-size: 0.9em;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 0.75em;
		height: 1.24rem;
		line-height: 1;
		border-radius: 0.62rem;
		white-space: nowrap;
		margin-top: 2px;
	}
	.table-group td div .network-comment:empty{
		display: none;
	}
	.table-subtotal td {
		font-weight: 600;
		background-color: var(--color-input-focus);
		padding: 0.35em 0.5em 0.35em 0.9em !important;
		border-bottom: none !important;
	}
	.table-subtotal td::before {
		display: none !important;
	}
	.table-subgroup{
		font-weight: 600;
		background-color: var(--color-table-subgroup);
		padding: 0.35em 0.9em 0.35em 0.9em !important;
	}
	.table-subgroup td > div {
		padding-left: 1.2em !important;
	}
	.table-subgroup td > div.abtest {
		justify-content: flex-start !important;
	}
	.table-subgroup td > div.abtest span {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-left: 0.75rem !important;
		color: var(--color-text-lighter);
		font-weight: 600;
		font-size: 0.9em;
	}
	.table-subgroup td > div.abtest span::before {
		content: '\f111';
		font-family: 'Font Awesome 5 Pro';
		font-weight: bold;
		color: var(--color-input-border);
		font-size: 0.4em;
		line-height: 1;
		margin-top: 2px;
		padding-right: 0.75rem;
	}

/* EXPANDABLE ROWS */

	tr.expanded td {
		border-bottom: none !important;
		border-top: 0px solid var(--color-table-group) !important;
	}
	tr.expanded td .badge.pops{
		display: none;
	}
	tr.expanded td .badge.expandable {
		margin-left: auto !important;
	}
	tr.expanded td .badge.tag ~ .badge.expandable {
		margin-left: 0 !important;
	}
	tr.last ~ tr.expanded td {
		border-top: 0px solid var(--color-table-group) !important;
	}
	tr.child-row:hover td {
		background-color: var(--color-table-subgroup) !important;
	}
	tr.child-row:not(.last) td {
		border: none !important;
	}
	tr.child-row.last td {
		/* border-bottom: 2px solid var(--color-table-group) !important; */
	}	
	tr.child-row td > div {
		font-size: 0.9em;
		padding-left: 1px;
	}
	tr.child-row td > div.name {
		padding-left: 1.85rem !important;
		/* font-size: 1rem !important; */
		font-weight: 600;
	}
	tr.child-row td .controller {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		padding-right: 0rem;
		margin-left: auto;
		margin-right: -0.3rem;
	}
	tr.child-row td .controller sup {
		margin-left: 0.3em;
		font-size: 0.75em;
		font-weight: 600;
		margin-bottom: 0.15em;
		opacity: 0.6;
	}
	tr.child-row td .controller span:first-of-type{
		margin-left: 0.25em;
	}
	tr.child-row td .controller b {
		color: var(--color-text-lighter);
		font-weight: 500;
		/* font-size: 0.95em; */
	}
	tr.child-row td label{
		margin-right: 0 !important;
		margin-left: auto !important;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: nowrap;
		color: var(--color-text-lighter);
		font-weight: 500;
		/* font-size: 0.95em; */
	}
	tr.child-row td label::after{
		content: '\f111';
		font-family: 'Font Awesome 5 Pro';
		font-weight: bold;
		color: var(--color-input-border);
		font-size: 0.4em;
		margin-left: 0.5rem;
		line-height: 1;
		margin-top: 2px;
	}
	tr.child-row td label ~ .controller {
		margin-left: 0.5rem;
	}

/* BREAKDOWN SUBTABLE */

	tr.expanded td {
		/* background-color: var(--color-table-subgroup) !important; */
		border-bottom: none !important;
	}
	tr#breakdown > td {
		padding: 0 !important;
		border: none !important;
	}
	tr#breakdown > td > div {
		width: 100%;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
		/* border: 1px solid var(--color-blue); */
	}
	tr#breakdown > td > div::after{
		content: '';
		display: block;
		position: absolute;
		z-index: 1;
		width: 120%;
		height: 100%;
		left: -10%;
		top: 0;
		background-color: rgba(161, 186, 217, 0.08);
		box-shadow: inset 0 0 10px rgb(161, 186, 217, 0.95);
		pointer-events: none;
	}
	tr#breakdown > td > div:empty{
		display: none;
	}
	tr#breakdown > td > div:empty::before{
		content: '\f110' !important;
		font-family: 'Font Awesome 5 Pro';
		font-weight: bold;
		display: block;
		font-size: 1.5em;
		color: var(--color-blue);
		padding: 0.5rem;
		animation: spin 0.5s linear infinite;
	}
	tr#breakdown table {
		/* margin: 0; */
		margin: 0.6em 0;
		padding: 0;
		border: none !important;
		/* opacity: 0.75; */
	}
	tr#breakdown table tr:first-of-type td {
		border-top: none !important;
	}
	tr#breakdown table tr:last-of-type td {
		/* border-bottom: 1px solid var(--color-border) !important; */
	}
	tr#breakdown table tr td:first-of-type {
		padding-left: 0.5em;
		padding-right: 0.5em;
	}
	tr#breakdown table tr td > div {
		font-size: 0.9em;
		padding-left: 1px;
	}
	tr#breakdown  .controller {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 1.85em;
	}
	tr#breakdown .controller > div {
		/* margin-left: auto; */
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}
	tr#breakdown .controller > div > sup {
		margin-left: 0.3em;
		font-size: 0.75em;
		font-weight: 600;
		margin-bottom: 0.15em;
		opacity: 0.6;
	}
	tr#breakdown .controller > div > span:first-of-type{
		margin-left: 0.25em;
	}
	tr#breakdown b.blind{
		color: var(--color-input-border);
	}
	tr#breakdown .pops {
		margin-right: 0.75em;
		cursor: default !important;
	}
	tr#breakdown .pops.default {
		opacity: 0.5;
	}

/* TABLE CELL BADGE */
	table tbody td > div > label.badge,
	table thead th > div > label.badge,
	table tfoot th > div > label.badge {
		font-size: 0.75rem;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 0.75em;
		height: 1.2rem;
		line-height: 1;
		border-radius: 0.6rem;
		background-color: var(--color-border);
		cursor: pointer;
		margin-right: 0.4em;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		padding-top: 1px;
	}
	table tbody td > div > label.badge:first-of-type,
	table thead th > div > label.badge:first-of-type,
	table tfoot th > div > label.badge:first-of-type {
		margin-left: auto;
	}
	table tbody td > div > label.badge:last-of-type,
	table thead th > div > label.badge:last-of-type,
	table tfoot th > div > label.badge:last-of-type {
		margin-right: -0.65em;
	}
	table tbody td > div > label.badge.disabled,
	table thead th > div > label.badge.disabled,
	table tfoot th > div > label.badge.disabled {
		cursor: default;
		pointer-events: none;
		color: var(--color-text-lighter);
	}
	table tbody td > div > label.badge:not(.noclick):not(.active):not(.adjust-pops):hover,
	table thead th > div > label.badge:not(.noclick):not(.active):not(.adjust-pops):hover,
	table tfoot th > div > label.badge:not(.noclick):not(.active):not(.adjust-pops):hover {
		background-color: var(--color-scroller);
		/* color: white; */
	}
	table tbody td > div > label.badge.noclick,
	table thead th > div > label.badge.noclick,
	table tfoot th > div > label.badge.noclick {
		cursor: default;
	}

	table tbody td > div > label.badge.tag,
	table thead th > div > label.badge.tag,
	table tfoot th > div > label.badge.tag {
		color: white;
		cursor: default;
	}
	table tbody td > div > label.badge.expandable::after,
	table thead th > div > label.badge.expandable::after,
	table tfoot th > div > label.badge.expandable::after {
		content: '\f105';
		font-family: 'Font Awesome 5 Pro';
		margin-left: 0.5em;
		font-weight: normal;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 0.8em;
	}
	table tbody td > div > label.badge.expandable.process::after,
	table thead th > div > label.badge.expandable.process::after,
	table tfoot th > div > label.badge.expandable.process::after {
		content: '\f110';
		animation: spin 0.5s linear infinite;
		font-weight: bold;
	}
	table tbody td > div > label.badge.expandable.expanded:not(.process)::after,
	table thead th > div > label.badge.expandable.expanded:not(.process)::after,
	table tfoot th > div > label.badge.expandable.expanded:not(.process)::after {
		content: '\f107';
	}
	table tbody td > div > label.badge:not(.arrow):empty,
	table thead th > div > label.badge:not(.arrow):empty,
	table tfoot th > div > label.badge:not(.arrow):empty {
		display: none;
	}
	table tbody td > div > label.adjust-pops,
	table thead th > div > label.adjust-pops,
	table tfoot th > div > label.adjust-pops {
		cursor: default;
	}
	table tbody td > div > span ~ label.badge,
	table thead th > div > span ~ label.badge,
	table tfoot th > div > span ~ label.badge {
		margin-left: 1em !important;
	}

	table tbody td > div > label.badge.arrow.expandable {
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 2em !important;
		background: transparent !important;
		margin-right: -1em;
	}
	table tbody td > div > label.badge.arrow.expandable:hover{
		background: transparent !important;
	}
	table tbody td > div > label.badge.arrow.expandable:not(.expanded):hover::after{
		color: var(--color-text) !important;
	}
	table tbody td > div > label.badge.arrow.expandable.expanded::after{
		color: white;
	}
	table tbody td > div > label.badge.arrow.expandable::after {
		content: '\f0da';
		font-family: 'Font Awesome 5 Pro';
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.35em;
		color: var(--color-text);
		margin: 0;
	}
	table tbody tr.expanded td > div > label.badge.arrow.expandable::after {
		content: '\f0d7';
	}

/* MICRO TABS */
	.micro-tabs {
		height: calc(100% + 0.5rem);
		z-index: 9;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: flex-end;
		margin: 0 1.0em 0 0;
		margin-bottom: -1em;
		background-color: white;
	}
	.micro-tabs .tab {
		height: calc(100% + 0.25rem);
		min-height: 2.4em;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background-color: var(--color-cell-super-highlighted);
		padding: 0 2.0em;
		border: 1px solid var(--color-border);
		border-bottom: none;
		border-top-left-radius: 0.3rem;
		border-top-right-radius: 0.3rem;
		font-weight: bold;
		color: var(--color-input-border);
		font-size: 0.9em;
		/* background: linear-gradient(to top, var(--color-cell-super-highlighted-total) 0%, var(--color-cell-super-highlighted) 10%); */
		margin-left: -1px;
		z-index: 1;
		cursor: pointer;
		white-space: nowrap;
		/* transition: height 300ms; */
	}
	.micro-tabs .tab:first-child {
            margin-left: 0; /* No overlap for the first tab */
        }
	.micro-tabs .tab.active {
		height: calc(100% + 0.75rem + 1px);
		/* font-size: 1em; */
		transform: translate(0, 1px);
		background: white;
		color: var(--color-text);
		box-shadow: none;
		z-index: 2;
		cursor: default;
	}
	.micro-tabs .tab:not(.active):hover {
		/* height: 100%; */
	}
	.micro-tabs .tab.active a.network-settings-opener{
		margin-right: 1em;
		text-decoration: none !important;
		color: var(--color-input-border) !important;
		margin-top: 2px;
		margin-left: -1em;
	}
	.micro-tabs .tab:not(.active) a{
		display: none;
	}
	.micro-tabs .tab.active a.network-settings-opener:hover{
		color: var(--color-link) !important;
	}
	.micro-tabs .tab.active a.network-settings-opener::before{
		content: '\f142';
		font-family: 'Font Awesome 5 Pro';
		font-weight: bold;
	}

/* ACTIONS */
	.actions-spacer{
		margin-left: auto !important;
	}
	#remove-selected-button {
		margin-left: auto;
		padding: 0 1rem;
		height: 2.4rem;
		display: none;
	}
	#remove-selected-button + .controls-toggle {
		margin-left: 0.5em;
	}

	#actions {
		margin-left: auto !important;
		min-width: 17em;
		display: none;
	}
	#actions + .controls-toggle {
		margin-left: 0.5em;
	}

/* MODAL VIEW TABLE */
	.table-horizontal-container {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: flex-start;
	}
	.table-horizontal-container > div:first-of-type {
		padding-top: 6em;
	}
	.smaller-header .table-horizontal-container > div:first-of-type {
		padding-top: 3em !important;
	}
	.table-horizontal-container > div:last-of-type {
		position: relative;
		flex: 1 1 auto;
	}
	.table-view.modal-based {
		padding: 0 !important;
		overflow: auto;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
	}
	.unscrollable .table-view.modal-based {
		position: absolute !important;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.table-view.modal-based.extended-header {
		top: 3.9em !important;
	}
	.smaller-header .table-view.modal-based.extended-header {
		top: 3.5em !important;
	}
	.table-view.modal-based table {
		border: none !important;
		margin-bottom: -1px !important;
	}
	.table-view.modal-based table tbody tr:last-of-type td:not(.dataTables_empty) {
		border-bottom: 1px solid var(--color-border) !important;
	}
	.table-view.modal-based td:last-of-type {
		padding-right: 1.5em !important;
	}

/* SCRUB CONTROLLER VIEW */
	#scrub-controller-overlay,
	.scrub-controller-overlay {
		position: absolute;
		z-index:9999998;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: transparent;
		background-color: transparent;
		display: none;
	}
	#scrub-controller,
	.scrub-controller,
	#quick-epc-clicklist {
		min-width: 300px;
		background-color: white;
		position: absolute;
		z-index:9999999;
		bottom: auto;
		left: 5em;
		border: 1px solid var(--color-input-border);

		display: none;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		box-shadow: 0px 5px 15px rgba(60, 53, 66, 0.5);
	}
	.scrub-controller-inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		border: 3px solid var(--color-input-focus);
		border-top: none;
	}
	.scrub-controller-inner > * {
		width: 100%;
	}
	#quick-epc-clicklist .arrow {
		position: absolute;
		top: 1.5em;
		right: -10px;
		height: 20px;
		transform: translate(100%, -50%);
	}
	#quick-epc-clicklist .arrow::after {
		content: '';
		position: absolute;
		top: 0;
		right: 1px;

		z-index: 2;

		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 0 10px 10px;
		border-color: transparent transparent transparent var(--color-input-focus);
	}
	#quick-epc-clicklist .arrow::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;

		z-index: 1;

		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 0 10px 10px;
		border-color: transparent transparent transparent var(--color-input-border);
	}

	#scrub-controller .arrow,
	.scrub-controller .arrow {
		position: absolute;
		top: 1.5em;
		left: 0;
		height: 20px;
		transform: translate(0, -50%);
	}
	#scrub-controller .arrow::after,
	.scrub-controller .arrow::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;

		z-index: 2;

		width: 0;
		height: 0;
		border-style: solid;

		border-width: 10px 10px 10px 0;
  		border-color: transparent var(--color-input-focus) transparent transparent;
	}
	#scrub-controller .arrow::before,
	.scrub-controller .arrow::before {
		content: '';
		position: absolute;
		top: 0;
		right: 1px;

		z-index: 1;

		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 10px 10px 0;
		border-color: transparent var(--color-input-border) transparent transparent;
	}
	
	.scrub-controller-header {
		width: 100%;
		padding: 0.5em 5px 0.5em 0.5em;
		font-size: 1em;
		font-weight: 600;
		text-align: center;

		white-space: nowrap;

		background-color: var(--color-input-focus);

		height: 3em;

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;

		z-index: 999;

	}
	.scrub-controller-header span {
		margin: 0 2em 0 0;
	}
	.scrub-controller-header a {
		display: inline-block;
		padding: 0.3em 1em;
		color: white;
		background-color: var(--color-link);
		border-radius: 0.5em;
	}
	.scrub-controller-header a.close {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 3rem;
		height: 3rem;
		color: var(--color-text);
		background-color: transparent;
		margin-right: -0.5rem;
	}
	.scrub-controller-header a.close::before{
		content: '\f00d';
		font-family: 'Font Awesome 5 Pro';
		font-weight: 300;
		font-size: 1.6rem;
	}
	.scrub-controller-header a.disabled {
		opacity: 0.35;
		cursor: default;
	}
	.scrub-controller-body {
		max-height: 80vh;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.scrub-controller-scroll {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.scrub-controller-body-line {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		width: 100% !important;
		height: 3rem;
	}
	.scrub-controller-body-line > input {
		padding-right: 0.5rem;
		padding-left: 0.5em;
		height: 3rem !important;
		text-align: left;
		position: relative;
		min-width: 12rem;
		z-index: 99;
		font-size: 1rem;
		flex: 1 0 auto;
		background: transparent;
		border: none;
		outline: none;
	}
	
	.scrub-controller-body-line .percentage {
		width: 4rem;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		position: relative;
		z-index: 99;
		padding-top: 1em;
	}
	
	.scrub-controller-body-line .cycle {
		width: 4rem;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		z-index: 99;
		padding-top: 1em;
		position: relative;
	}
	.scrub-controller-body-line .percentage input {
		width: 4rem;
		height: 2rem !important;
		border: none !important;
		font-size: 0.9rem;
		text-align: center;
		background: transparent !important;
		position: relative;
		z-index: 99;
	}
	.scrub-controller-body-line .cycle input:first-of-type {
		width: 1.8rem;
		font-size: 0.9rem;
		text-align: right !important;
		background: transparent !important;
		position: relative;
		border: none !important;
		padding: 0 !important;
		z-index: 9999;
		line-height: 1;
		padding-right: 1px !important;
	}
	.scrub-controller-body-line .cycle input:last-of-type {
		width: 2.2rem;
		border: none !important;
		font-size: 0.9rem;
		text-align: left;
		background: transparent !important;
		position: relative;
		padding: 0 !important;
		z-index: 99;
		line-height: 1;

		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		letter-spacing: 1px;
	}
	.scrub-controller-body-line .percentage b,
	.scrub-controller-body-line .cycle b {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		padding: 0;
		text-align: center;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 1rem;
		font-size: 0.75em;
		background-color: var(--color-table-bg-hover);
	}

	#scrub-controller input[readonly]{
		color: var(--color-input-border) !important;
	}

/* POPS CONTROLLER VIEW */
	.adjust-pops.active:not(.process){
		background-color: var(--color-link-hover);
		color: white;
	}
	.adjust-pops.process {
		width: 1.2rem;
		overflow: hidden;
		font-size: 0em;
	}
	.adjust-pops.process::before {
		content: '\f110' !important;
		font-family: 'Font Awesome 5 Pro';
		font-weight: bold;
		display: block;
		animation: spin 0.5s linear infinite;
		font-size: 0.75rem;
	}
	#pops-controller-overlay,
	.pops-controller-overlay {
		position: absolute;
		z-index:9999998;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: transparent;
		background-color: transparent;
		display: none;
	}
	#pops-controller,
	.pops-controller {
		min-width: 320px;
		background-color: white;
		position: absolute;
		z-index:9999999;
		bottom: auto;
		left: 5em;
		border: 1px solid var(--color-input-border);

		display: none;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		box-shadow: 0px 5px 15px rgba(60, 53, 66, 0.5);
	}
	.pops-controller-inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		border: 3px solid var(--color-input-focus);
		border-top: none;
	}
	.pops-controller-inner > * {
		width: 100%;
	}
	#pops-controller .arrow,
	.pops-controller .arrow {
		position: absolute;
		top: 1.5em;
		left: 0;
		height: 20px;
		transform: translate(0, -50%);
	}
	#pops-controller .arrow::after,
	.pops-controller .arrow::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;

		z-index: 2;

		width: 0;
		height: 0;
		border-style: solid;

		border-width: 10px 10px 10px 0;
  		border-color: transparent var(--color-input-focus) transparent transparent;
	}
	#pops-controller .arrow::before,
	.pops-controller .arrow::before {
		content: '';
		position: absolute;
		top: 0;
		right: 1px;

		z-index: 1;

		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 10px 10px 0;
		border-color: transparent var(--color-input-border) transparent transparent;
	}
	
	.pops-controller-header {
		width: 100%;
		padding: 0.5em 5px 0.5em 0.5em;
		font-size: 1em;
		font-weight: 600;
		text-align: center;

		white-space: nowrap;

		background-color: var(--color-input-focus);

		height: 3em;

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;

		z-index: 999;

	}
	.pops-controller-header span {
		margin: 0 2em 0 0;
	}
	.pops-controller-header a {
		display: inline-block;
		padding: 0.3em 1em;
		color: white;
		background-color: var(--color-link);
		border-radius: 0.5em;
	}
	.pops-controller-header a.disabled {
		opacity: 0.35;
		cursor: default;
	}
	.pops-controller-body {
		max-height: 80vh;
		overflow-x: hidden;
		overflow-y: auto;
	}

	#pops-controller .input-container{
		flex: 1 0 auto;
		color: var(--color-text);
		border-radius: 0;
		background-color: white;
		margin: 0;

		height: 3.1em;

		padding: 0.25em;

		background-color: var(--color-input-focus);

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;

		position: relative;
	}
	#pops-controller .input-container input[type="text"] {
		flex: 0 0 40%;
		background: white !important;
		text-align: left !important;
		min-width: 0 !important;
		height: 100%;
		font-size: 1em !important;
		border: 1px solid var(--color-input-border) !important;
		padding: 0 0.75em;
		border-radius: 0.5em;
	}
	#pops-controller  .input-container.mc-pops > div {
		flex: 0 0 60%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}

/* NOTIFICATIONS CONTROLLER VIEW */
	#notification-opener {
		position: relative;
	}
	#notification-opener > div {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.adjust-notifier.active:not(.process){
		background-color: var(--color-link-hover);
		color: white;
	}
	.adjust-notifier.process {
		width: 1.2rem;
		overflow: hidden;
		font-size: 0em;
	}
	.adjust-notifier.process::before {
		content: '\f110' !important;
		font-weight: bold;
		font-family: 'Font Awesome 5 Pro';
		display: block;
		animation: spin 0.5s linear infinite;
		font-size: 0.75rem;
	}
	#notifier-controller-overlay,
	.notifier-controller-overlay {
		position: absolute;
		z-index:9999998;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: transparent;
		background-color: transparent;
		display: none;
	}
	#notifier-controller,
	.notifier-controller {
		min-width: 320px;
		background-color: white;
		position: absolute;
		z-index:9999999;
		bottom: auto;
		left: 5em;
		border: 1px solid var(--color-input-border);

		display: none;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		box-shadow: 0px 5px 15px rgba(60, 53, 66, 0.5);
	}
	.notifier-controller-inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		border: 3px solid var(--color-input-focus);
		border-top: none;
	}
	.notifier-controller-inner > * {
		width: 100%;
	}
	#notifier-controller .arrow,
	.notifier-controller .arrow {
		position: absolute;
		top: 1.5em;
		left: 0;
		height: 20px;
		transform: translate(100%, -50%);
	}
	#notifier-controller .arrow::after,
	.notifier-controller .arrow::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;

		z-index: 2;

		width: 0;
		height: 0;
		border-style: solid;

		border-width: 10px 10px 10px 0;
  		border-color: transparent var(--color-input-focus) transparent transparent;
	}
	#notifier-controller .arrow::before,
	.notifier-controller .arrow::before {
		content: '';
		position: absolute;
		top: 0;
		right: 1px;

		z-index: 1;

		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 10px 10px 0;
		border-color: transparent var(--color-input-border) transparent transparent;
	}
	
	.notifier-controller-header {
		width: 100%;
		padding: 0.5em 5px 0.5em 0.5em;
		font-size: 1em;
		font-weight: 600;
		text-align: center;

		white-space: nowrap;

		background-color: var(--color-input-focus);

		height: 3em;

		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;

		z-index: 999;

	}
	.notifier-controller-header span {
		margin: 0 2em 0 0;
	}
	.notifier-controller-header a {
		display: inline-block;
		padding: 0.3em 1em;
		color: white;
		background-color: var(--color-link);
		border-radius: 0.5em;
	}
	.notifier-controller-header a.disabled {
		opacity: 0.35;
		cursor: default;
	}
	.notifier-controller-header a.process {
		color: rgba(255, 255, 255, 0);
		position: relative;
	}
	.notifier-controller-header a.process::before {
		content: '\f110';
		font-weight: bold;
		font-family: 'Font Awesome 5 Pro';
		animation: spin 0.5s linear infinite;
		position: absolute;
		top:0;
		bottom:0;
		left:0;
		right:0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white !important;
		font-size: 0.8em;
	}
	.notifier-controller-body {
		/* max-height: 80vh; */
		overflow-x: hidden;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		background-color: var(--color-input-focus);
	}
	.notifier-controller-body > * {
		width: 100%;
	}
	.notifier-controller-body > p {
		font-size: 0.9em;
		padding: 0.5em;
		line-height: 1.4;
		color: var(--color-text-lighter);
	}

	#notifier-controller .input-container{
		flex: 1 0 auto;
		color: var(--color-text);
		border-radius: 0;
		background-color: white;
		margin: 0;

		/* height: 3.1em; */

		padding: 0.25em;
		padding-right: 1em;

		background-color: var(--color-input-focus);

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;

		position: relative;
	}
	#notifier-controller .input-container div {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	#notifier-controller .input-container div > label {
		font-weight: 600;
		font-size: 0.9em;
		margin-left: 0.25em;
	}
	#notifier-controller .input-container div input[type="text"] {
		width: 8em;
		background: white !important;
		text-align: left !important;
		height: 100%;
		font-size: 1em !important;
		border: 1px solid var(--color-input-border) !important;
		height: 2.5em;
		padding: 0 0.75em;
		border-radius: 0.5em;
		margin-right: 0.5em;
	}
	#notifier-controller .input-container div:nth-of-type(2) input[type="text"] {
		margin-right: 1em;
	}

/* SEARCH */
	.search-container {
		width: 100%;
		margin-top: 1rem;
		padding: 0 1em;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.search-container.tabs {
		align-items: flex-end;
		justify-content: space-between;
		z-index: 97;
	}
	.search-container > span {
		margin: 0 1em;
	}
	.search-container.vertical {
		width: 100%;
		margin-top: 1rem;
		padding: 0 1rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.search-container.vertical > * {
		width: 100%;
	}
	.search-container .checkboxes{
		flex: 0 0 auto;
		padding: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}
	.search-container .checkboxes.padding-bottom{
		padding: 0.5rem 0 0.8em 0;
	}
	
	.dialog .search-container {
		margin: 0;
		padding: 0.5rem !important;
		/* padding-left: 1em !important;
		padding-right: 0 !important; */
		background-color: white;

		position: sticky;
		height: 4em;
  		top: 0;
  		z-index: 90;
	}
	.dialog .search-container.vertical {
		margin: 0;
		padding: 0.5rem;
		background-color: white;

		position: sticky;
		height: 6em;
  		top: 0;
  		z-index: 90;
	}
	.dialog.smaller-header .search-container.vertical {
		height: 3.5em;
	}
	.search-container > label {
		flex: 1 1 auto;
		/* padding: 0; */
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		border: 1px solid var(--color-input-border) !important;
		border-radius: 0.5em;
	}
	.view-header.search-container {
		margin: 0;
	}
	.view-header.search-container > label {
		margin: 0 0 0 0 !important;
		height: 3rem;
	}
	.view-header.search-container > a.btn {
		height: 3rem;
	}
	.search-container > label.focused {
		/* width: 100%; */
		padding: 0;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		border: 1px solid var(--color-link) !important;
		border-radius: 0.5em;
		background-color: var(--color-input-focus);
		box-shadow: 0 0 4px var(--color-input-outline);
	}
	.search-container > label::before{
		content: '\f002';
		font-family: 'Font Awesome 5 Pro';
		color: var(--color-input-placeholder);
		font-size: 1.1em;
		font-weight: 500;
		margin: 0 0.2em 0 0.6em;
	}
	.dialog .search-container > label.no-margin {
		margin-right: 0 !important;
	}
	.search-container input[type="search"] {
		width: 100%;
		/* font-size: 1.185em; */
		font-size: 1em;
		border: none;
		font-weight: 500;
		padding: 0.35rem;
		margin: 0;
		background: transparent;
		outline: none;
	}

	.search-container .controls-toggle {
		flex: 0 0 var(--size-header-height);
		height: 100%;
		width: var(--size-header-height);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 0.8em;
		border-radius: 0.5em;
		/* background-color: var(--color-chart-bg); */
		/* border: 1px solid var(--color-input-border); */
		color: var(--color-text);
		height: 2.5rem;
		margin-left: auto;
	}
	.search-container .controls-toggle:hover {
		/* background-color: var(--color-input-focus);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; */
		color: var(--color-link-hover);
	}
	.search-container .controls-toggle::before {
		content: '\f343';
		font-family: 'Font Awesome 5 Pro';
		font-size: 1.2em;
	}
	.workspace.expanded .search-container .controls-toggle::before {
		content: '\f33e';
	}

/* FILTERS */
	.filters-view{
		flex: 0 0 var(--size-filters-width);
		height: 100%;
 		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		padding: 1em 1em 0 1em !important;
		/* margin-left: 1em; */
		margin-right: 1em;
		margin-left: 0;
		margin-bottom: 0;
		margin-top: 0;
		border-right: 1px solid var(--color-border);
		background-color: var(--color-cell-super-highlighted);
	}
	.table-sub-view ~ .filters-view {
		padding-left: 1em;
	}
	.filters-view.fixed{
		height: 100%;
		overflow-y: scroll;
		z-index: 1;		
	}
	.filters-view.floating{
		flex: 0 0 auto;
		height: 100%;
		max-height: 100%;
		min-width: 14em;
		overflow-y: scroll;
		border: none;
		border-right: 1px solid var(--color-border);
		z-index: 1;	
		margin-left: 0;
		margin-right: 0;
		padding: 0.5em 0.5em 0em 0.5em;
	}
	.filters-view.collapsed {
		display: none;
	}
	.filters-view > .btn {
		width: 100%;
		height: 3em;
		margin-bottom: 1em;
	}
	.filters-view > input[type="text"] {
		width: 100%;
		margin: 0 0 1.5em 0 !important;
		padding: 0.45rem 0.5rem !important;
		font-weight: 600 !important;
		height: auto !important;
	}
	.filters-view > section {
		width: 100%;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		margin-bottom: 1.2em;
	}
	.filters-view.no-margin > section {
		margin-bottom: 0.0em;
	}
	.filters-view > section > *{
		width: 100%;
	}
	.filters-view .filter-header {
		user-select: none;
		-webkit-user-select: none;
	}
	.filters-view .filter-header {
		font-weight: 600;
		font-size: 1.4em;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
		margin: 0.5em 0 0.5em 0;
		position: relative;
		pointer-events: none;
	}
	.filters-view > .btn {
		background-color: var(--color-accent) !important;
		color: white !important;
		border: 1px solid var(--color-accent-darker) !important;
	}
	#daterange {
		cursor: pointer !important;
	}

	.filter-line {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		padding: 0.3em 0.5em;
		margin-bottom: 0.5em;
		font-weight: 500;
		cursor: pointer;
		width: 100%;
	}
	.filter-line.disabled{
		pointer-events: none !important;
		opacity: 0.5;
		cursor: default !important;
	}
	.filter-line.hidable.hidden {
		display: none;
	}
	.filters-view section  > *:not(.filter-header) {
		position: relative;
		height: auto;
	}
	.filters-view section .table-view,
	.filters-view section .table-view table  {
		padding: 0;
		border: none !important;
	}
	.filters-view section .table-view tr:first-of-type td {
		border-top: none !important;
	}
	.filters-view section .table-view table td {
		border: none !important;
	}
	.filter-line .dotted {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
	}
	.filter-line .dotted::before {
		content: '';
		width: 8px;
		height: 8px;
		background-color: var(--color-border);
		border-radius: 0.5em;
		margin-right: 0.35rem;
	}
	.filter-line .dotted.positive::before {
		background-color: var(--color-green);
	}
	.filter-line .dotted.negative::before {
		background-color: var(--color-red);
	}
	.filter-line .dotted.neutral::before {
		background-color: var(--color-input-placeholder);
	}
	.filter-line .dotted.blue::before {
		background-color: var(--color-blue);
	}
	.filter-line .dotted.orange::before {
		background-color: orange;
	}
	.filter-line .badge {
		font-size: 0.8em;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 3.2rem;
		height: 1.3rem;
		text-align: center;
		border-radius: 0.65rem;
		background-color: var(--color-border);
		padding: 0 !important;
	}


	/* Horizontal	 */
		.filters-horizontal {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			padding-left: 0.5em;
		}
		.filters-horizontal > span {
			margin-left: 1em;
		}
		#daterange{
			width: 100%;
			cursor: pointer;
			border: none;
			outline: none;
			background: var(--color-chart-bg);
			border-radius: 0.5em;
			text-align: center;
			font-size: 1em;
			color: var(--color-text);
			border: 1px solid var(--color-input-border) !important;
			padding: 0 0.75rem;
			height: 3em !important;
			font-weight: 500;
			margin: 0.5em 0 0.5em 0;
		}
		#daterange:hover {
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		}
		#list-management{
			margin-left: 1em;
		}
		#list-management::before {
			content: '\f03a';
			font-family: 'Font Awesome 5 Pro';
			font-weight: bold;
			font-size: 1.2em;
		}
		#list-manager-offers-table {
			margin-bottom: 1em !important;
		}
		#list-manager-offers-table thead {
			display: none;
		}

/* NETWORK SETTINGS */
	.network-settings{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: column;
		padding: 1em;
		position: relative;
	}
	.network-settings .loader {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		color: var(--color-blue);
		font-size: 1.0em;
		font-weight: bold;
		z-index: 98 !important;
	}
	.network-settings .loader::before {
		content: '\f110';
		font-family: 'Font Awesome 5 Pro';
		animation: spin 0.5s linear infinite;
		font-size: 2rem;
		font-weight: bold;
		color: var(--color-header-bg);
		font-weight: 300;
	}
	.network-settings > * {
		width: 100%;
		margin-bottom: 0.5rem;
	}
	.network-settings > label {
		font-weight: 600;
	}
	.network-settings h2 {
		font-size: 1.6em;
		font-weight: 600;
		line-height: 1;
		margin-top: 0;
		margin-bottom: 1rem;
		display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
	}
	.network-settings h2 a::before {
		font-size: 1.35rem;
	}
	.network-settings h2 a:hover::before {
		color: var(--color-link-hover);
	}
	.network-settings .two-cols {
		display: flex;
		align-items: stretch;
		justify-content: flex-start;
		flex-direction: row;
	}
	.network-settings .offer-name-editor{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;
		font-weight: 600;
	}
	.network-settings .offer-name-editor input[readonly]{
		font-weight: 600;
		cursor: default;
		background-color: var(--color-input-focus);
		user-select: none;
		-webkit-user-select: none;
		pointer-events: none;
	}
	.network-settings .offer-name-editor .custom-selector-container{
		width: auto;
		flex: 1 1 auto;
	}
	.network-settings .offer-name-editor .name-edit-button {
		flex: 0 0 var(--size-header-height);
		height: 100%;
		width: var(--size-header-height);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 0.8em;
		border-radius: 0.5em;
		border: 1px solid var(--color-input-border);
		color: var(--color-text);
		background-color: var(--color-input-focus);
	}
	.network-settings .offer-name-editor .name-edit-button:hover {
		background-color: var(--color-input-focus);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
	}
	.network-settings .offer-name-editor .name-edit-button::before {
		content: '\f040';
		font-family: 'Font Awesome 5 Pro';
		font-size: 1.2em;
	}
	.network-settings .offer-name-editor .name-edit-button.active::before {
		content: '\f00d';
	}
	.network-settings .offer-name-editor .new-offer-name-input {
		display: none;
		width: auto;
		flex: 1 1 auto;
	}
	.network-settings .radios {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-direction: column;
		background-color: var(--color-input-focus);
		border: 1px solid var(--color-input-border);
		padding: 0.8em;
		border-radius: 0.5em;
		font-size: 0.9em;
		/* line-height: 1.5; */
	}
	.network-settings .radios .custom-radio{
		width: 100%;
	}
	.network-settings .radios .custom-radio label{
		flex: 1 1 auto;
	}
	.network-settings .radios .custom-radio label:hover{
		color: var(--color-link);
	}
	.network-settings .custom-selector-container select {
		font-size: 1.0em !important;
		font-weight: 600 !important;
		background-color: var(--color-input-focus);
	}
	.network-settings .radios > * {
		margin: 0 0 0.33em 0;
	}
	.network-settings .radios > *:last-child {
		margin: 0 !important;
	}
	.network-settings .tag-editor{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: nowrap;
	}
	.network-settings .tag-input-container {
		flex: 1 1 auto  !important;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: nowrap;		
	}
	.network-settings .radios-row {
		flex: 0 0 auto  !important;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: nowrap;
		margin-left: 0.5em;
	}
	.network-settings .tag-input {
		width: 100% !important;
		background-color: var(--color-input-focus) !important;
	}

	/* MC Popups */
		.pattern-and-save  .input-container.mc-pops > div {
			flex: 0 0 58%;
			height: 100%;
			display: flex;
			flex-direction: row;
			align-items: stretch;
		}
	
/* SETTINGS */
	.settings-manager{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 0;
		position: relative;
	}
	.settings-manager .loader {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		color: var(--color-blue);
		font-size: 1.0em;
		font-weight: bold;
		z-index: 98 !important;
	}
	.settings-manager .loader::before {
		content: '\f110';
		font-weight: bold;
		font-family: 'Font Awesome 5 Pro';
		animation: spin 0.5s linear infinite;
		font-size: 2rem;
		color: var(--color-header-bg);
		font-weight: 300;
	}
	.settings-manager .settings-item {
		flex: 0 1 50%;
		flex: 0 0 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		font-size: 1rem;
		padding: 1em 0 0 0;
	}
	.settings-manager .settings-item .inner {
		width: 100%;
		height: 100%;
		/* background-color: var(--color-input-focus); */
		background-color: var(--color-cell-super-highlighted);
		border: 1px solid var(--color-input-border);
		border-radius: 0.5em;
		padding: 1em;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.settings-manager .settings-item .inner > .row {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}
	
	/* Multi input (for caps - where many inputs go in a row) */
		.settings-manager .settings-item .multi-input {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: center;
		}
		.settings-manager .settings-item .multi-input .input-container {
			flex: 1 1 auto;
			margin: 0 0.5em;
		}
		.settings-manager .settings-item .multi-input .input-container:first-of-type {
			margin-left: 0;
		}
		.settings-manager .settings-item .multi-input .input-container:last-of-type {
			margin-right: 0;
		}
		.settings-manager .settings-item .multi-input .input-container a{
			flex: 1 1 10%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			background-color: var(--color-border);
			border-top-right-radius: 0.2em;
			border-bottom-right-radius: 0.2em;
			border-left: 1px solid var(--color-input-border);
			color: var(--color-input-border);
			font-weight: normal;
			cursor: default;
		}
		.settings-manager .settings-item .multi-input .input-container a.active{
			color: var(--color-link-hover);
			cursor: pointer;
		}
		.settings-manager .settings-item .multi-input .input-container a.reset-caps-button::before {
			content: '\f2ed';
			font-family: 'Font Awesome 5 Pro';
		}	
	/* input-container */
		.settings-manager .settings-item .input-container{
			border: 1px solid var(--color-input-border);
			color: var(--color-text);
			border-radius: 0.5em;
			background-color: white;

			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;

			position: relative;

			height: 3.0em;

		}
		.settings-manager .input-container.small {
			height: 2.3em;
		}
		.settings-manager .settings-item .inner > .row .input-container {
			flex: 1 1 100%;
			height: 100% !important;
			margin-right: 1em;
		}
		.settings-manager .input-container > *:not(label):not(.segmented-control-radio):first-child {
			flex: 1 1 45%;
			border-left: none;
		}
	/* Segmented control */
		.settings-manager .input-container .segmented-control-radio {
			width: 100% !important;
			background-color: transparent;
			border: none;
		}
	/* Text inputs */
		.settings-manager .input-container input[type="text"] {
			background: transparent !important;
			font-size: 1.1em;
			text-align: left;
			min-width: 0;
			height: 100%;
			border: none;
			border-radius: 0;
			padding: 0.85rem 0.5rem 0 0.5rem;
			font-weight: 600;
			flex: 0 0 25%;
			border-left: 1px solid var(--color-input-border);
		}
		.settings-manager .multi-input .input-container input[type="text"] {
			flex: 1 1 45%;
		}
		.settings-manager .input-container.small input[type="text"] {
			padding: 0rem 0.5rem 0 0.5rem;
		}
		.settings-manager .input-container input[type="text"].autowidth {
			flex: 0 0 100%;
		}
		.settings-manager .settings-item .inner > .row input[type="text"] {
			flex: 1 1 100%;
			height: 100%;	
		}
		.settings-manager ::-webkit-input-placeholder {
			font-size: 1.1rem;
			color: var(--color-input-border);
		}
	/* Labels  */
		.settings-manager .input-container > label {
			display: block;
			text-align: left;
			font-size: 0.85rem;
			line-height: 1.4;
			color: var(--color-text-lighter);
			position: absolute;
			margin: 0;
			/* text-align: left; */
			padding-left: 0.5em;
			padding-top: 0.15em;
			width: 25%;
			top: 0;
			white-space: nowrap;
		}
		.settings-manager .settings-item .inner > label {
			font-weight: 600;
			font-size: 0.9em;
			margin-left: 0.2em;
		}
		.settings-manager .settings-item .inner > label:nth-of-type(2){
			margin-top: 0.5em;
		}
		.settings-manager .input-container > label:nth-of-type(1){
			left: 0;
			width: 50%;
		}
		.settings-manager .input-container > label:nth-of-type(2){
			left: 50%;
		}
		.settings-manager .input-container > label:nth-of-type(3){
			left: 75%;
		}
		.settings-manager .multi-input .input-container > label:nth-of-type(1){
			left: 0;
			width: 45%;
		}
		.settings-manager .multi-input .input-container > label:nth-of-type(2){
			left: 45%;
		}		
	/* SID Level Inputs/Labels */
		.settings-manager .input-container.sid-level > input[type="text"]{
			flex: 0 0 14%;
		}	
		.settings-manager .input-container.sid-level > input[type="text"]:nth-of-type(1){
			flex: 0 0 42%;
		}	
		.settings-manager .input-container.sid-level .cycles{
			flex: 0 0 14%;
			position: relative;
			height: 100%;
		}
		.settings-manager .input-container.sid-level .cycles span{
			position: absolute;
			top: 0;
			left: 0;
			display: none;
		}
		.settings-manager .input-container.sid-level .cycles input[type="text"]{
			width: 100%;
			color: var(--color-text-lighter);
			cursor: default !important;
			background-color: var(--color-cell-highlighted-total) !important;
		}
		.settings-manager .input-container.sid-level > label:nth-of-type(1){
			left: 0;
			width: 42%;
		}
		.settings-manager .input-container.sid-level > label:nth-of-type(2){
			left: 42%;
			width: 14%;
		}
		.settings-manager .input-container.sid-level > label:nth-of-type(3){
			left: 56%;
			width: 14%;
		}
		.settings-manager .input-container.sid-level > label:nth-of-type(4){
			left: 70%;
			width: 14%;
		}
		.settings-manager .input-container.sid-level > a {
			flex: 0 0 8%;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			background-color: var(--color-link);
			/* color: var(--color-link-hover); */
			color: white;
			border: 1px solid var(--color-link-hover);
			font-weight: bold;
		}
		.settings-manager .input-container.sid-level > a:last-of-type{
			border-top-right-radius: calc(0.2em - 1px);
			border-bottom-right-radius: calc(0.2em - 1px);
			border-left: none;
		}
		.settings-manager .input-container.sid-level > a:not(.process):hover {
			background-color: var(--color-link-hover);
		}
		.settings-manager .input-container.sid-level > a.reset-cycle::before {
			content: '\f363';
			font-family: 'Font Awesome 5 Pro';
		}	
		.settings-manager .input-container.sid-level > a.throttle-cycle::before {
			content: '\f893';
			font-family: 'Font Awesome 5 Pro';
		}	
		.settings-manager .input-container.sid-level > a.process{
			cursor: default;
		}
		.settings-manager .input-container.sid-level > a.process::before{
			content: '\f110';
			font-weight: bold;
			font-family: 'Font Awesome 5 Pro';
			animation: spin 0.35s linear infinite;
			font-size: 1rem;
			font-weight: 500;
		}
	/* Switcher (for notifications) */
		.settings-manager .input-container > .switcher-checkbox {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: nowrap;
			width: 100%;
			padding: 0.85em 0.5em 0 0.5em;
		}
		.settings-manager .input-container > .switcher-checkbox .switch{
			margin-top: 0.15em;
		}
		.settings-manager .input-container > .switcher-checkbox > label {
			font-weight: 600;
			font-size: 1.1em !important;
		}
		.settings-manager .input-container > .switcher-checkbox.default label {
			color: var(--color-input-border) !important;
		}
		.settings-manager .input-container > .switcher-checkbox.default .switch input:checked ~ label::after {
			color: var(--color-input-border) !important;
		}
	/* Save panel (bulk save, and apply button) */
		.settings-manager .save-panel {
			flex: 0 0 auto;
			width: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: flex-end;
		}
		.settings-manager .save-panel > p {
			text-align: left;
			font-size: 0.9em;
			margin-right: auto;
			line-height: 1.2;
			color: var(--color-text-lighter);
		}
		.settings-manager .save-panel > a {
			margin-left: 1em;
		}
		.settings-manager .save-panel > a:first-of-type {
			margin-left: 0em;
		}
		.settings-manager .save-panel .bulk-settings {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			padding: 0 0.75em;
		}
		.settings-manager .save-panel .bulk-settings label {
			font-weight: 600;
		}
		.settings-manager .save-panel .bulk-settings > label {
			margin-top: 0.2em;
		}
		.settings-manager .save-panel .bulk-settings label label {
			padding-right: 0.25em;
		}
	/* Titlebar */
		#settings .titlebar{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: flex-start;
		}
		#settings .titlebar.multirow{
			display: flex;
			flex-direction: column !important;
			flex-wrap: nowrap;
			align-items: flex-start;
			justify-content: center;
			font-size: 1.0rem;
			height: 4.4rem;
			line-height: 1;
		}
		.titlebar p {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: nowrap;
		}
		.titlebar .rarr {
			font-style: normal;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 1;
			color: var(--color-input-border);
			margin: 2px 0.5em 0 0.5em;
		}
		.titlebar .rarr::before {
			content: '\f0da';
			font-family: 'Font Awesome 5 Pro';
		}
		#settings .titlebar.multirow h4{
		font-size: 0.9rem;
		color: var(--color-text-lighter);
		margin-bottom: 0.1em;
		}
		#settings .titlebar a.offer-link, a.offer-landing{
			flex: 0 0 1.3em;
			margin-left: 0.5em;
			margin-right: -0.25em;
			margin-top: 1px;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1.3em;
			height: 1.3em;
			border-radius: 0.65em;
			background-color: white;
			color: var(--color-input-border);
			text-align: center;
			line-height: 1;
			padding: 0;
		}
		#settings .titlebar a.offer-link::before {
			content: '\f0c1';
			font-family: 'Font Awesome 5 Pro';
			font-size: 0.85em;
			margin: 0;
		}
		#settings .titlebar a.offer-landing::before {
			content: '\f37e';
			font-family: 'Font Awesome 5 Pro';
			font-size: 0.95em;
			margin: 0;
		}
	/* Tags Controller */
		.tags-controller {
			width: 100%;
			height: 2em;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			position: relative;
			margin-top: 0.25em !important;
			margin-bottom: -0.25em !important;
		}
		.tags-controller .radios-row {
			flex: 0 0 auto  !important;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-direction: row;
			flex-wrap: nowrap;
			margin-left: 0.5em;
		}
		.tags-controller .add-tag {
			display: flex;
			align-items: center;
			justify-content: center;
			/* width: 1.6rem; */
			height: 1.6rem;
			font-size: 1rem;
			border-radius: 0.8rem;
			background-color: var(--color-link);
			color: white;
			padding: 0;
			line-height: 1;
			padding: 0 0.5em;
		}
		.tags-controller .add-tag:hover {
			background-color: var(--color-link-hover);
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.33);
		}
		.tags-controller .add-tag::before{
			content: '+';
			/* font-family: 'Font Awesome 5 Pro'; */
			font-weight: bold;
			font-size: 1.6em;
			line-height: 1;
			margin-top: -1px;
		}
		.tags-controller .add-tag::after{
			content: 'Add tag';
			font-weight: 600;
			margin: 0em 0.15em 0em 0.25em;
			font-size: 0.9em;
		}
		.tags-list {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
		}
		.tags-list label.tag {
			font-size: 0.85em;
			font-weight: 600;
			padding: 0 0.5rem 0 0.75rem;
			height: 1.6rem;
			line-height: 1;
			border-radius: 0.8rem;
			margin-right: 0.5em;
			color: white;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;

		}
		.tag-sort-placeholder {
			height: 1.6rem;
			border-radius: 0.8rem;
			background-color: var(--color-border);
			margin-right: 0.5em;
		}
		.tags-list label.tag a {
			color: white;
		}
		.tags-list label.tag a::before {
			content: '\f00d';
			font-family: 'Font Awesome 5 Pro';
			margin-left: 0.35rem;
			font-weight: 500;
			font-size: 0.8em;
		}
		.tags-controller .tag-editor {
			width: 100%;
			position: absolute;
			display: none;
			align-items: center;
			justify-content: flex-start;
			flex-direction: row;
			flex-wrap: nowrap;
			background-color: white;
			border: 1px solid var(--color-input-border);
			border-radius: 0.5em;
			padding: 0.5em;
			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.33);
			left: 0;
			top: 100%;
			z-index: 99;
			transform: translate(0%, 7px);
		}
		.tags-controller .tag-editor .tag-input-container {
			flex: 1 1 auto  !important;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-direction: row;
			flex-wrap: nowrap;		
		}
		.tags-controller .tag-editor > a {
			margin-left: 0.5em;
		}

		.tags-controller .tag-editor .arrow {
			position: absolute;
			top: -10px;
			left: 0;
			width: 20px;
			transform: translate(0%, 100%);
		}
		.tags-controller .tag-editor .arrow::after {
		    content: '';
		    position: absolute;
		    top: 1px;
		    left: 0;
		    z-index: 2;
		    width: 0;
		    height: 0;
		    border-style: solid;
		    border-width: 0 10px 10px 10px;
		    border-color: transparent transparent var(--color-input-focus) transparent;
		}

		.tags-controller .tag-editor .arrow::before {
		    content: '';
		    position: absolute;
		    top: 0;
		    left: 0;
		    z-index: 1;
		    width: 0;
		    height: 0;
		    border-style: solid;
		    border-width: 0 10px 10px 10px;
		    border-color: transparent transparent var(--color-input-border) transparent;
		}
	/* Upsel & Retry Switchers */
		.settings-manager .settings-item .input-container-switchers {
			
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			position: relative;

		}
		.settings-manager .settings-item .input-container-switchers > span {
			margin-right: 2em;
		}
		.settings-manager .settings-item .input-container-switchers > span > label {
			font-weight: 600;
			cursor: pointer !important;
		}

/* REPORTS SETTINGS */
	.reports-settings{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-direction: column;
		padding: 0;
		position: relative;
	}
	.reports-settings .loader {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		color: var(--color-blue);
		font-size: 1.0em;
		font-weight: bold;
		z-index: 98 !important;
	}
	.reports-settings .loader::before {
		content: '\f110';
		font-weight: bold;
		font-family: 'Font Awesome 5 Pro';
		animation: spin 0.5s linear infinite;
		font-size: 2rem;
		color: var(--color-header-bg);
		font-weight: 300;
	}
	.reports-settings > * {
		width: 100%;
		margin-bottom: 0.5rem;
	}
	.reports-settings .all .select2-search__field::-webkit-input-placeholder {
		color: var(--color-text);
	}
	.download-report {
		margin: 1em;
		margin-left: auto;
		margin-top: auto;
		margin-bottom: 0.5em;
	}
	.reports-settings .creation-ui {
		width: 100%;
		height: 100%;
		justify-content: flex-start;
		padding-bottom: 0;
	}

/* SELECT & INPUT */

	.custom-selector-container {
		flex: 0 0 auto;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		padding-left: 0em;
		width: 100%;
	}
	.custom-selector {
		position: relative !important;
		width: 100%;
		padding: 0 !important;
	}
	select:invalid,
	select option:disabled {
		color: var(--color-input-placeholder) !important;
	}
	.custom-selector-container select {
		-webkit-appearance: none;
		-moz-appearance:    none;
		appearance:         none;
		display: block;
		width: 100%;
		font-family: 'Roboto', sans-serif;
		background-color: white;
		outline: none;
		border: 1px solid var(--color-input-border);
		color: var(--color-text);
		border-radius: 0.5em;
		font-size: 1em;
		padding: 0.5em;
	}
	.selector-arrow {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		height: 100%;
		width: 2.5em;
		--arrow-size: 0.4em; 
		pointer-events: none;
	}
	.selector-arrow::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 0;
		height: 0;
		border-left: var(--arrow-size) solid transparent;
		border-right: var(--arrow-size) solid transparent;
		border-top: var(--arrow-size) solid var(--color-white-button-border);
	}

/* CHECKBOX */
	.custom-checkbox {
		display: inline-flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		padding: 0 !important;
		margin-bottom: 0 !important;
		margin-left: 0 !important;
	}
	.search-container .checkboxes .custom-checkbox {
		margin-left: 1em !important;
	}
	.search-container .checkboxes .custom-checkbox:last-of-type {
		margin-right: 0.5em !important;
	}
	.custom-checkbox.conversions-filter.first{
		margin-left: auto !important;
	}
	.custom-checkbox.nolabel {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
	}
	.filter-line .custom-checkbox {
		width: 100%;
		max-width: 260px;
		overflow: hidden;
	}
	.custom-checkbox > label {
		padding-left: 0.5rem;
		white-space: nowrap;
		cursor: pointer;
		font-size: 1rem;
		user-select: none;
		-webkit-user-select: none;
		display: block;
		flex: 1 0 auto;
		height: 100%;
		flex: 1 1 auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
	}
	.custom-checkbox > label span {
		max-width: 230px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.custom-checkbox > label.counter span {
		max-width: 170px;
		overflow: hidden;
		text-overflow: ellipsis;
	}	
	.custom-checkbox > label b {
		margin-left: auto;
		padding-left: 0.5rem;
		font-weight: 600;
	}
	.custom-checkbox .switch {
		position: relative;
		max-width: 1.5rem;
		transform: scale(0.9, 0.9);
	}
	.custom-checkbox .switch:focus {

		outline: none;
	}
	.custom-checkbox .switch label {
		position: relative;
		display: block;
		width: 1.2rem;
		margin: 0;
		height: 1.2rem;
		background: white;
		border: 1px solid var(--color-input-border);
		border-radius: 4px;
		cursor: pointer;
		user-select: none;
	}
	.custom-checkbox.parallax .switch label {
		border: none;
	}
	.custom-checkbox .switch label::after {
		content: '\f00c';
		font-family: 'Font Awesome 5 Pro';
		color: white;
		background-color: var(--color-link);
		font-size: 0.8rem;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		opacity: 0;
		transform: scale(0, 0);
		font-weight: bold;
	}
	.custom-checkbox.gray .switch label::after{
		background-color: var(--color-input-border) !important;
	}
	.custom-checkbox.gray .switch label {
		border: 1px solid var(--color-input-border) !important;
	}
	.custom-checkbox.gray.dark .switch label::after{
		background-color: var(--color-text-lighter) !important;
	}
	.custom-checkbox.gray.dark .switch label {
		border: 1px solid var(--color-text-lighter) !important;
	}

	.custom-checkbox .switch input {

		display: none;
	}
	.custom-checkbox .switch input:checked ~ label,
	.filter-line.disabled .custom-checkbox .switch input ~ label  {
		border: 1px solid var(--color-link);
	}
	.custom-checkbox .switch input:checked ~ label::after,
	.filter-line.disabled .custom-checkbox .switch input ~ label::after {
		opacity: 1.0;
		transform: scale(1, 1);
	}
	.custom-checkbox.disabled {
		opacity: 0.5 !important;
		pointer-events: none;
	}

/* CHECKBOX SWITCHER */
	.switcher-checkbox {
		display: inline-flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		padding: 0;
		cursor: pointer !important;
	}
	.switcher-checkbox > label {
		padding-left: 0.5rem;
		white-space: nowrap;
		font-size: 1rem;
		user-select: none;
		-webkit-user-select: none;
		display: block;
		flex: 1 1 auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
	}
	.switcher-checkbox > a {
		margin-left: 0.5rem;
		font-weight: 600;
	}
	.switcher-checkbox .switch {
		outline: none;
	}
	.switcher-checkbox .switch label {
		position: relative;
		display: block;
		margin: 0;
		user-select: none;
		color: var(--color-input-border);
		cursor: pointer;
	}
	.switcher-checkbox .switch label::after {
		content: '\f205';
		font-family: 'Font Awesome 5 Pro';
		transform: scaleX(-1);
		font-weight: 300;
		display: block;
		font-size: 1.3em;
	}
	.switcher-checkbox .switch input {
		display: none;
	}
	.switcher-checkbox .switch input:checked ~ label::after {
		content: '\f205';
		font-weight: bold;
		transform: scaleX(1);
		color: var(--color-blue);
	}

/* CHECKBOX EYE */
	.eye-checkbox {
		display: inline-flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		padding: 0;
		padding-left: 0.5em !important;
	}
	td .eye-checkbox {
		margin-left: -1em !important;
		margin-right: 0.5em;
	}
	.eye-checkbox > label {
		padding-left: 0.5rem;
		white-space: nowrap;
		font-size: 1rem;
		user-select: none;
		-webkit-user-select: none;
		display: block;
		flex: 1 1 auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
	}
	.eye-checkbox > a {
		margin-left: 0.5rem;
		font-weight: 600;
	}
	.eye-checkbox > sup {
		margin-left: 0.33rem;
		font-weight: 600;
		color: white;
		font-size: 0.7em;
	}
	.eye-checkbox .switch {
		outline: none;
	}
	.eye-checkbox .switch label {
		position: relative;
		display: block;
		margin: 0;
		user-select: none;
		
	}
	.eye-checkbox .switch label::after {
		content: '\f06e';
		font-family: 'Font Awesome 5 Pro';
		transform: scaleX(-1);
		font-weight: bold;
		font-size: 0.8em;
		display: block;
		color: var(--color-input-border);
	}
	.eye-checkbox .switch input {
		display: none;
	}
	.eye-checkbox .switch input:checked ~ label::after {
		font-weight: bold;
		transform: scaleX(1);
		color: var(--color-link);
	}

/* RADIO */

	.custom-radio {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		font-size: 1rem;
	}
	.custom-radio.vertical {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 1rem;
	}
	.custom-radio label {
		cursor: pointer;
		user-select: none;
		-webkit-user-select: none;
	}
	.custom-radio > label {
		font-size: 0.9em;
		margin-right: 1em;
		white-space: nowrap;
		font-weight: normal !important;
	}
	.custom-radio:last-of-type > label{
		margin-right: 0;
	}
	.custom-radio > label.bolder {
		font-weight: 600 !important;
	}
	.custom-radio .radio {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-right: 0.25em;
	}
	.custom-radio .radio:not(:first-of-type){
		margin-left: 1em;
	}
	.custom-radio .radio input[type=radio] {
		display: none;
	}
	.custom-radio .radio label {
		margin: 0 auto;
		position: relative;
		cursor: pointer;
		width: 16px;
		height: 16px;
	}	
	.custom-radio .radio label::before {
		position: absolute;
		top: 50%;
		left: 50%;
		content: '';
		display: inline-block;
		transform: translate(-50%, -50%);
		width: 16px;
		height: 16px;
		position: absolute;
		bottom: 0px;
		border: 1px solid var(--color-input-border);
		border-radius: 100%;
		z-index: 0;
		box-sizing: border-box;
		background-color: white;
	}
	.custom-radio .radio input[type=radio]:checked + label::after {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		content: '';
		width: 10px;
		height: 10px;
		border-radius: 100%;
		border: none;
		background: var(--color-link);
		z-index: 1;
	}

	/* Table grouping */
		.gрoupping-radios {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: flex-start !important;
			font-size: 0.85em;
			margin: 0;
			padding: 0;
			overflow: visible;
			width: 100%;
		}
		.gрoupping-radios > span {
			margin-right: 0.75em;
			margin-left: 0 !important;
			padding: 0;
			text-transform: uppercase;
			color: var(--color-text-lighter);
		}
		.gрoupping-radios .custom-radio .radio label {
			margin: 0 auto;
			position: relative;
			cursor: pointer;
			width: 12px;
			height: 12px;
		}
		.gрoupping-radios .custom-radio .radio label::before {
			width: 12px;
			height: 12px;
		}
		.gрoupping-radios .custom-radio .radio input[type=radio]:checked + label::after {
			width: 8px;
			height: 8px;
		}
		.gрoupping-radios .custom-radio > label {
			margin-right: 0.75em;
		}
		.gрoupping-radios .custom-radio:last-of-type{
			margin-right: 2em;
		}
		.gрoupping-radios a#expand-all-button {
			margin-left: auto;
			position: relative;
		}
		.gрoupping-radios a#expand-all-button::before {
			content: 'expand all';
		}
		.gрoupping-radios a#expand-all-button.expanded::before {
			content: 'collapse all';
		}

	/* Colors */
		.custom-radio.color {
			margin-left: 0.25em;
		}
		.custom-radio.color:nth-of-type(1) .radio label::before {
			background-color: #89C2D9;
		}
		.custom-radio.color:nth-of-type(2) .radio label::before {
			background-color: #80CBC4;
		}
		.custom-radio.color:nth-of-type(3) .radio label::before {
			background-color: #AED581;
		}
		.custom-radio.color:nth-of-type(4) .radio label::before {
			background-color: #FFCC80;
		}
		.custom-radio.color:nth-of-type(5) .radio label::before {
			background-color: #A1887F;
		}
		.custom-radio.color:nth-of-type(6) .radio label::before {
			background-color: #DED896;
		}
		.custom-radio.color:nth-of-type(7) .radio label::before {
			background-color: #CE93D8;
		}
		.custom-radio.color:nth-of-type(8) .radio label::before {
			background-color: #F48FB1;
		}
		.custom-radio.color:nth-of-type(9) .radio label::before {
			background-color: #FFAB91;
		}
		.custom-radio.color:nth-of-type(10) .radio label::before {
			background-color: #B39DDB;
		}
		.custom-radio.color .radio input[type=radio]:checked + label::after {
			width: 19px;
			height: 19px;
			border: 2px solid var(--color-link);
			background: transparent;
		}

/* RADIO SEGMENTED CONTROL */
	/* Container for the radio buttons */
	.segmented-control-radio {
		width: 100%;
		height: 100%;
	    display: flex;
	    flex-direction: row;
	    align-items: flex-end;
	    overflow: hidden;
	    position: relative;
	    border: 1px solid var(--color-input-border);
		color: var(--color-text);
		border-radius: 0.5em;
		background-color: white;
	}
	.segmented-control-radio.inline {
		border: none;
	}
	#pops-controller .segmented-control-radio {
		border-left: none;
		background-color: var(--color-input-focus);
		border: 1px solid var(--color-input-border);
		margin-left: 0.5em;
		border-radius: 0.5em;
	}

	/* Hide the original radio buttons */
	.segmented-control-radio input[type="radio"] {
	    display: none;
	}

	/* Style the labels */
	.segmented-control-radio label {
	    cursor: pointer;
	    white-space: nowrap;
	    height: calc(100% - 6px);
	    flex: 1 1 auto;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    color: var(--color-text);
	    font-weight: 600;
	    margin: 3px;
	    position: relative;
	    z-index: 0;
	    font-size: 0.9em;
	    /* padding-top: 0.85rem; */
	    /* transition: background-color 0.3s, color 0.3s; */
	}
	.segmented-control-radio.seven label{
	    flex: 1 1 14.3%;
	}
	.segmented-control-radio.two label{
	    flex: 1 1 50%;
	}
	.segmented-control-radio label.title {
		display: block;
		font-size: 0.85rem;
		line-height: 1.4;
		color: var(--color-input-border);
		position: absolute;
		margin: 0;
		/* text-align: left; */
		top: 0 !important;
		left: 0 !important;
		padding-left: 0.5em;
		padding-top: 0.2em;
		z-index: 99;
	}
	.segmented-control-radio label::before {
		content: '';
		top: 20%;
		bottom: 20%;
		left: -3px;
		display: block;
		width: 1px;
		background-color: var(--color-input-border);
		position: absolute;
	}
	.segmented-control-radio:not(.inline) label:first-of-type::before {
		display: none;
	}

	/* Remove right border for the last label */
	.segmented-control-radio label:last-child {
	    border-right: none;
	}

	/* Style for the selected state */
	.segmented-control-radio input[type="radio"]:checked + label {
	    background-color: var(--color-link);
	    color: white;
	    border-radius: 0.5em;
	    z-index: 3;
	    /* box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15); */
	}
	.segmented-control-radio.default input[type="radio"]:checked + label {
	    background-color: var(--color-border);
	}
	.segmented-control-radio input[type="radio"]:checked + label::before {
		background-color: white;
	}
	.segmented-control-radio input[type="radio"]:checked + label::after {
		content: '';
		top: 20%;
		bottom: 20%;
		right: -4px;
		display: block;
		width: 1px;
		background-color: white;
		position: absolute;
	}

	#pops-controller .segmented-control-radio input[type="radio"]:checked + label {
		border: 2px solid var(--color-input-focus);
		border-radius: 6px;
	}
	#pops-controller .segmented-control-radio input[type="radio"]:checked + label:last-of-type {
		border-top-left-radius: 1px;
		border-bottom-left-radius: 1px;
	}
	#pops-controller .segmented-control-radio input[type="radio"]:checked + label:first-of-type {
		border-top-right-radius: 1px;
		border-bottom-right-radius: 1px;
	}

/* SEGMENTED CONTROL */
	.segmented-control-container{
		margin-top: 1em;
	}
	.ui-segment{
		color: var(--color-link);
		border: 1px solid var(--color-side-menu-item);
		border-radius: 0.5em;
		display:inline-block;
	}
	.ui-segment span.option.active{
		background-color: var(--color-side-menu-item);
		color: var(--color-side-menu-hover-bg);
	}
	.ui-segment span.option{
		padding-left: 0.5em;
		padding-right: 0.5em;
		height: 1.6em;
		text-align:center;
		display:inline-block;
		font-weight: 600;
		line-height: 1.6em;
		margin: 0px;
		float:left;
		cursor:pointer;
		border-right:1px solid var(--color-side-menu-item);
		color: var(--color-side-menu-item);
		width: 6em;
	}
	.ui-segment span.option:last-child{
		border-right: none;
	}
	.segment-select{
		display:none;
	}
	.mobile-segmented {
		display: none;
		margin-right: 1em;
		margin-top: 0.25em;
	}

/* MODAL */
	.modal {
	    position: fixed;
	    z-index: 999999;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
		background-color: rgba(0, 0, 0, 0.35);
	    opacity: 0;
	    visibility: hidden;
	    transform: scale(1.1);
	    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
	}
	.modal-content {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    background-color: white;
	    padding: 1.75em;
	    border-radius: 0.5em;
	    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
	}
	.modal-inner {
		min-width: 10em;
		min-height: 10em;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
	}
	.modal-inner:empty {
		width: 10em;
		height: 10em;
		
	}
	.modal-inner:empty::before {
		content: '\f110';
		font-weight: bold;
		font-family: 'Font Awesome 5 Pro';
		font-size: 2em;
		display: block;
		color: var(--color-input-placeholder);
		animation: spin 0.5s linear infinite;
	}
	.modal-close-button {
	    position: absolute;
	    top: 0.5em;
	    right: 0.5em;
	    width: 2em;
	    height: 2rem;
	    text-align: center;
	    cursor: pointer;
	    display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
	}
	.modal-close-button::before {
		content: '\f00d';
		font-family: 'Font Awesome 5 Pro';
		font-weight: 300;
		font-size: 1.5em;
	}
	.modal-buttons{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		padding: 0.5em 1em;
	}
	.show-modal {
	    opacity: 1;
	    visibility: visible;
	    transform: scale(1.0);
	    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
	}

/* CHART */

	.highcharts-legend-item path.highcharts-graph {

		stroke-width: 10px !important;
	}
	.charts{
		padding: 0 !important;
		padding-bottom: 1.5em !important;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
	}
	.chart-loader {
		position: absolute;
		z-index: 100;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		color: var(--color-blue);
		font-size: 1.0em;
		font-weight: bold;
	}
	.chart-loader:not(.empty)::before {
		content: '\f110';
		font-family: 'Font Awesome 5 Pro';
		animation: spin 0.5s linear infinite;
		font-size: 2rem;
		color: var(--color-header-bg);
		font-weight: bold;
		margin-bottom: 1em;
	}
	.chart-loader.empty::before{
		content: 'Not enough data to plot the graph';
		color: var(--color-input-border);
	}
	#chart {
		flex: 1 1 auto;
		width: 100%;
		max-width: 100% !important;
		background: transparent;
	}
	.highcharts-container{
		background-color: white !important;
		position: relative;
		z-index: 10;
	}
	.chart-settings {
		flex: 0 0 auto;
		background-color: white;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		flex-wrap: nowrap;
		list-style-type: none;
		padding: 1em 1em 0 1em;

	}
	.period-settings {
		background-color: white;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		flex-wrap: nowrap;
		list-style-type: none;
		padding: 0.5em 1em 0.9em 1em;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}
	.charts ul li{
		margin-left: 1em;
	}
	.charts ul li span{
		font-weight: 600;
	}
	.charts ul li.left-spaced{
		margin-left: auto;
	}
	.charts ul li a {
		display: inline-block;
		color: var(--color-link-hover);
		text-decoration: none;
		font-weight: 600;
		padding: 0.15em 0.5em;
	}
	.charts ul li a:hover {
		color: var(--color-link);
	}
	.charts ul li a.active {
		color: white;
		background-color: var(--color-link);
		padding: 0.15em 0.5em;
		border-radius: 0.5em;
	}
	.charts ul li a.active:hover {
		background-color: var(--color-link-hover);
	}

/* DATATABLES */
	#paginate,
	#data-table_paginate {
		width: 100%;
		margin: 1em 0;
		padding-right: 1em;
		margin-right: auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-end !important;
		align-items: center;
		flex-wrap: nowrap;
	}
	#paginate > span,
	#data-table_paginate > span {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
	}
	.paginate_button,
	.ellipsis {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		border: 1px solid var(--color-border);
		margin: 0 0.2em;
		min-width: 2em;
		height: 2em;
		border-radius: 0.5em;
		color: var(--color-link);
		font-weight: 600;
		cursor: pointer;
		padding: 0 0.5em;
	}
	.ellipsis {
		border: none;
		cursor: default;
	}
	.paginate_button.previous,
	.paginate_button.next {
		width: 8em;
	}
	.paginate_button.current,
	.paginate_button:hover {
		background-color: var(--color-blue);
		border: 1px solid var(--color-blue);
		color: white;
	}
	.length-change-container {
		margin-left: auto;
	}
	.length-change-container .custom-selector-container {
		flex: 0 0 auto;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		padding-left: 0em;
		padding: 0;
		width: 100%;
		height: 2em;
	}
	.length-change-container .custom-selector-container select {
		-webkit-appearance: none;
		-moz-appearance:    none;
		appearance:         none;
		display: block;
		width: 100%;
		font-family: 'Roboto', sans-serif;
		background-color: white;
		color: var(--color-text);
		outline: none;
		border: 1px solid var(--color-border);
		color: var(--color-text);
		border-radius: 0.5em;
		padding: 0 4em 0 0.5em;
		line-height: 1.4;
		height: 2em;
	}

	table.dataTable thead th.dt-colresizable-hover {
	    cursor: col-resize;
	    position: relative;
	    
	}
	table.dataTable thead th.dt-colresizable-hover::after{
		content: '';
		position: absolute;
		top:0;
		bottom:0;
		right: -0.2em;
		border-right: 1px solid var(--color-border);
	}
	table.dataTable thead th.dt-colresizable-bound-min,
	table.dataTable thead th.dt-colresizable-bound-max {
	    opacity: 0.2;
	    cursor: not-allowed !important;
	}
	.dataTables_empty {
		text-align: center !important;
		padding: 1em !important;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		height: 100% !important;
	}
	.dataTables_empty .loader {
		width: auto !important;
	}
	.dataTables_empty .loader {
		/* width: 3em;
		height: 3em; */
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 99;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		margin: 0.5em auto;
	}
	.dataTables_empty .loader::before {
		content: '\f110';
		font-family: 'Font Awesome 5 Pro';
		animation: spin 0.5s linear infinite;
		font-size: 1.5rem;
		color: var(--color-header-bg);
		font-weight: bold;
	}

	.dataTables_empty .loader:empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 1.8em;
		margin: 0 !important;
		width: 100%;
		height: 100%;
	}
	.dataTables_empty .loader:empty::before{
		font-family: 'Font Awesome 5 Pro';
		color: var(--color-empty-table-icon);
		animation: none;
		font-size: 2.4em;
		margin-bottom: 0em;
		content: '\f65f';
		font-weight: bold;
	}
	.dataTables_empty .loader:empty::after{
		content: 'No data matched';
		color: var(--color-title-icon);
		font-weight: 500;
	}

	table.dt-rowReorder-float {
	    position: absolute !important;
	    text-align: left;
	    width: 100%;
	    padding: 0.25em 1em 0.25em 0.9em !important;
		border: 1px solid var(--color-input-border) !important;
	    outline-offset: -2px;
	    z-index: 9999999999;
	    box-shadow: 0px 5px 10px rgba(60, 53, 66, 0.4);
	    background-color: var(--color-input-focus) !important;
	}
	table.dt-rowReorder-float div {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	table.dt-rowReorder-float div span:last-of-type {
		margin-left: auto !important;
	}
	table.dt-rowReorder-float b {
	    font-weight: normal !important;
	}

	tr.dt-rowReorder-moving {
	    border: none;
	    height: 2em !important;
	    background-color: var(--color-input-focus) !important;
	    padding: 0 !important;
	    overflow: hidden;
	   	outline: none;
	}
	tr.dt-rowReorder-moving div {
		display: none !important;
	}

	body.dt-rowReorder-noOverflow {
	    overflow-x: hidden
	}

	table.dataTable td.reorder {
	    text-align: center;
	    cursor: move !important;
	}

/* TRACKING */
	table.tracking {
		width: 100%;
		max-width: 800px;

	}
	table.tracking th {
		text-align: left;
		font-size: 1.1em;
		padding: 1em;
		color: white;
		background-color: var(--color-blue);
		overflow: hidden;
		border-radius: 5px;
	}
	table.tracking td {
		text-align: left;
		font-size: 1.0em;
		padding: 0;
		overflow: hidden;
	}
	table.tracking .detail {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
		padding: 0.75em 0;
	}
	table.tracking .connector{
		width: 1em;
		height: 1em;
		position: relative;
	}
	table.tracking .connector::before{
		content: '';
		width: 2px;
		height: 20em;
		display: block;
		background-color: var(--color-blue);
		position: absolute;
		z-index: 2;
		top: 0%;
		left: 50%;
		margin-left: -1px;
		margin-top: -10em;
	}
	table.tracking .connector::after{
		content: '';
		width: 1em;
		height: 1em;
		display: block;
		border-radius: 0.5em;
		background-color: var(--color-blue);
		position: absolute;
		z-index: 3;
		top: 50%;
		left: 50%;
		margin-left: -0.5em;
		margin-top: -0.5em;
	}
	table.tracking .connector.first::before{
		margin-top: 0em;
	}
	table.tracking .connector.last::before{
		margin-top: -20em;
	}
	tr.just-reordered td{
		background-color: var(--color-input-focus) !important;
	}

/* ALERTS */

	.dlg-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}
	.dlg-header span.loader{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 0.5rem;
	}
	.dlg-header span.loader::before{
		content: '\f110';
		font-family: 'Font Awesome 5 Pro';
		animation: spin 0.5s linear infinite;
		font-size: 1rem;
		color: var(--color-header-bg);
		font-weight: bold;
	}

/* DRAGGABLE MODAL */
	.dialog {
		width: auto;
		display: none; /* not visible by default */
		font-weight: 400;
		border: 1px solid var(--color-border);
		border-radius: 0.5em;
		background: white;
		margin: 0;
		position: absolute;
		box-shadow: 0 1em 1.5em rgba(0, 0, 0, 0.25);
	}
	.dialog .titlebar {
		height: 3rem; /* same as .dialog>button height */
		line-height: 1; /* same as .dialog>button height */
		padding: 1rem; /* change NOT allowed */
		cursor: move;
		font-weight: 500;
		font-size: 1.1rem;
	}
	.dialog .content {
		position: absolute;
		top: 3rem; /* change allowed */
		left: 16px; /* change NOT allowed */
		bottom: 16px;
		overflow-y: auto;
		font-size: 1em;
		overflow: hidden;
		width: calc(100% - 32px);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.dialog .content > * {
		width: 100%;
	}
	.dialog .content h3 {
		font-size: 1.75em;
		font-weight: 300;
		color: var(--color-text);
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		text-transform: capitalize;
	}
	.dialog > button {
		width: 3.5em; /* change NOT allowed */
		height: 3.5em; /* same as .dialog .titlebar height */
		position: absolute;
		top: 0;
		right: 0;
		padding: 0;
		border: none;
		background: transparent;
		outline: none;
		color: var(--color-blue);
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 300;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}
	.dialog > button::before{
		content: '\f00d';
		font-family: 'Font Awesome 5 Pro';
		font-weight: 300;
		font-size: 2em;
	}
		
/* PRELOADER */

	#pageloader {
		position: absolute;
		/* width: 100%; */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		color: var(--color-blue);
		font-size: 1.0em;
		font-weight: bold;
		z-index: 98 !important;
	}

	#pageloader > div {
		position: absolute;
		top: 50%;
		left: calc(50% - 25px);
		width: 50px;
		aspect-ratio: 1;
		--_c:no-repeat radial-gradient(farthest-side, var(--color-header-bg) 92%, #0000);
		background: 
		  var(--_c) top,
		  var(--_c) left,
		  var(--_c) right,
		  var(--_c) bottom;
		background-size: 12px 12px;
		animation: l7 1s infinite;
	}
	@keyframes l7 {to{transform: rotate(.5turn)}}
	
/* TOOLTIPS */
	.protip-p  {
		text-align: left;
		padding: 0.5em;
	}
	.protip-menu {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
	}
	.protip-menu span {
		cursor: pointer;
		white-space: nowrap;
	}
	div.tooltip {
	    color: white;
	    font-weight: normal;
	    line-height: 1.4;
	    position: absolute;
	    padding: 1em;
	    background-color: var(--color-blue);
	    border-radius: 0.5em;
	    max-width: 280px;
	}
	div.tooltip a[data-dismiss=tooltip],
	div.tooltip button[data-dismiss=tooltip] {
	    position: absolute;
	    top: -10px;
	    right: -10px;
	    height: auto;
	    width: 25px;
	    height: 25px;
	    z-index: 100;
	    color: #FFFFFF;
	    line-height: 1;
	    font-size: 18px;
	    border-radius: 100%;
	    background-color: #111111;
	    transition: background 0.5s;
	}

	div.tooltip a[data-dismiss=tooltip]:hover,
	div.tooltip a[data-dismiss=tooltip]:focus,
	div.tooltip a[data-dismiss=tooltip]:active,
	div.tooltip button[data-dismiss=tooltip]:hover,
	div.tooltip button[data-dismiss=tooltip]:focus,
	div.tooltip button[data-dismiss=tooltip]:active {
	    background-color: #DD0000;
	    color: #FFFFFF;
	}

	div.tooltip.top-left::after,
	div.tooltip.top-left::before {
	    top: 100%;
	    left: 30px;
	    border: solid transparent;
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
	}
	div.tooltip.top-right::after,
	div.tooltip.top-right::before {
	    top: 100%;
	    left: calc(100% - 30px);
	    border: solid transparent;
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
	}

	div.tooltip.top-center::after,
	div.tooltip.top-center::before {
	    top: 100%;
	    left: 50%;
	    border: solid transparent;
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
	}

	div.tooltip.top-left,
	div.tooltip.top-right,
	div.tooltip.top-center {
	    margin-top: -15px;
	}

	div.tooltip.top-left::after,
	div.tooltip.top-right::after,
	div.tooltip.top-center::after {
	    border-top-color: var(--color-blue);
	    border-width: 10px;
	    margin-left: -10px;
	}

	div.tooltip.top-left::before,
	div.tooltip.top-right::before,
	div.tooltip.top-center::before {
	    border-top-color: var(--color-blue);
	    border-width: 11px;
	    margin-left: -11px;
	}

	div.tooltip.bottom-left::after,
	div.tooltip.bottom-left::before {
	    bottom: 100%;
	    left: 30px;
	    border: solid transparent;
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
	}

	div.tooltip.bottom-center::after,
	div.tooltip.bottom-center::before {
	    bottom: 100%;
	    left: 50%;
	    border: solid transparent;
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
	}

	div.tooltip.bottom-right::after,
	div.tooltip.bottom-right::before {
	    bottom: 100%;
	    left: calc(100% - 30px);
	    border: solid transparent;
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
	}

	div.tooltip.bottom-left,
	div.tooltip.bottom-center,
	div.tooltip.bottom-right {
	    margin-top: 15px;
	}

	div.tooltip.bottom-left::after,
	div.tooltip.bottom-center::after,
	div.tooltip.bottom-right::after {
	    border-bottom-color: var(--color-blue);
	    border-width: 10px;
	    margin-left: -10px;
	}

	div.tooltip.bottom-left::before,
	div.tooltip.bottom-center::before,
	div.tooltip.bottom-right::before {
	    border-bottom-color: var(--color-blue);
	    border-width: -11px;
	    margin-left: -11px;
	}

	div.tooltip.left-top::after,
	div.tooltip.left-top::before {
	    left: 100%;
	    top: 30px;
	    border: solid transparent;
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
	}

	div.tooltip.left-middle::after,
	div.tooltip.left-middle::before {
	    left: 100%;
	    top: 50%;
	    border: solid transparent;
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
	}

	div.tooltip.left-bottom::after,
	div.tooltip.left-bottom::before {
	    left: 100%;
	    top: calc(100% - 30px);
	    border: solid transparent;
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
	}

	div.tooltip.left-top,
	div.tooltip.left-middle,
	div.tooltip.left-bottom {
	    margin-left: -15px;
	}

	div.tooltip.left-top::after,
	div.tooltip.left-middle::after,
	div.tooltip.left-bottom::after {
	    border-left-color: var(--color-blue);
	    border-width: 10px;
	    margin-top: -10px;
	}

	div.tooltip.left-top::before,
	div.tooltip.left-middle::before,
	div.tooltip.left-bottom::before {
	    border-left-color: var(--color-blue);
	    border-width: 11px;
	    margin-top: -11px;
	}

	div.tooltip.right-top::after,
	div.tooltip.right-top::before {
	    right: 100%;
	    top: 30px;
	    border: solid transparent;
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
	}

	div.tooltip.right-middle::after,
	div.tooltip.right-middle::before {
	    right: 100%;
	    top: 50%;
	    border: solid transparent;
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
	}

	div.tooltip.right-bottom::after,
	div.tooltip.right-bottom::before {
	    right: 100%;
	    top: calc(100% - 30px);
	    border: solid transparent;
	    content: " ";
	    height: 0;
	    width: 0;
	    position: absolute;
	    pointer-events: none;
	}

	div.tooltip.right-top,
	div.tooltip.right-middle,
	div.tooltip.right-bottom {
	    margin-left: 15px;
	}

	div.tooltip.right-top::after,
	div.tooltip.right-middle::after,
	div.tooltip.right-bottom::after {
	    border-right-color: var(--color-blue);
	    border-width: 10px;
	    margin-top: -10px;
	}

	div.tooltip.right-top::before,
	div.tooltip.right-middle::before,
	div.tooltip.right-bottom::before {
	    border-right-color: var(--color-blue);
	    border-width: 11px;
	    margin-top: -11px;
	}
	ul.tip {
		/* list-style-type: none; */
		list-style-position: inside;
	}
	ul.tip li {
		text-align: left;
	}

/* DU DIALOG */
	.du-dialog {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    visibility: hidden;
	    opacity: 0;
	    background-color: transparent;
	    transition: background-color .2s linear, opacity .2s ease;
	    will-change: background-color, visibility, opacity;
	    overflow: hidden;
	    z-index: 9999999999;
	}
	.du-dialog .dlg-wrapper {
	    position: relative;
	    min-width: 280px;
	    max-width: 90%;
	    max-height: 90%;
	    display: flex;
	    flex-direction: column;
	    justify-content: space-around;
	    background-color: #ffffff;
	    outline: none;
	    /* border-radius: 4px; */
	    transform: scale(1.35);
	    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	    overflow: hidden;
	    box-shadow: 0 1em 1.5em rgba(0, 0, 0, 0.25);
	    padding: 1em;
	    border-radius: 0.6em;
	}
	.du-dialog .dlg-wrapper .dlg-loader {
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    height: 4px;
	    /* pointer-events: none; */
	    transform-origin: top;
	    transform: scaleY(0);
	    transition: transform .2s linear;
	}
	.du-dialog .dlg-wrapper .dlg-loader .loader-wrapper {
	    position: relative;
	    display: flex;
	    height: 100%;
	}
	.du-dialog .dlg-wrapper .dlg-loader .loader-wrapper .loading-buffer {
	    height: 100%;
	    width: 100%;
	    background-color: rgba(0, 0, 0, 0.35);
	}
	.du-dialog .dlg-wrapper .dlg-loader .loader-wrapper .loading-indicator {
	    position: absolute;
	    top: 0;
	    left: 0;
	    height: 100%;
	    width: 46.67%;
	    transform: translateX(-100%);
	    background-color: var(--color-link);
	}
	.du-dialog .dlg-header {

	    padding: 1rem 1.15rem 0 1.15rem;

	    font-size: 1.25em;
	    font-weight: 400;
	    color: var(--color-text);
	    display: flex;
	    flex-direction: row;
	    justify-content: flex-start;
	    align-items: center;
	    flex-wrap: nowrap;
	    text-transform: capitalize;
	}
	.du-dialog .dlg-header .dlg-search {
	    display: block;
	    font-family: inherit;
	    font-size: 15px;
	    font-weight: normal;
	    line-height: 36px;
	    height: 36px;
	    margin-top: 8px;
	    width: 100%;
	    border: none;
	    outline: none;
	    color: inherit;
	    background-color: transparent;
	}
	.du-dialog .dlg-content {
	    flex: 1 auto;
	    padding: 0 1.1rem 1.1em 1.1rem;
	    color: var(--color-text);
	    font-size: 1rem;
	    line-height: 1.4;
	    border-top: 1px solid transparent;
	    overflow-x: hidden;
	    overflow-y: auto;
	}
	.du-dialog .dlg-content ul {
	    list-style-position: inside;
	    padding-bottom: 1em;
	}
	.du-dialog .dlg-content a,
	.du-dialog .dlg-content b {
	    font-weight: 600;
	}
	.du-dialog .dlg-content input[type="text"],
	.du-dialog .dlg-content input[type="number"] {
	    width: 100%;
	    outline: none;
	    border: 1px solid var(--color-input-border);
	    border-radius: 0.2em;
	    padding: 0.5em;
	    font-size: 1em;
	    margin: 0;
	    background: transparent;
	    outline: none;
	}
	.du-dialog .dlg-content.content--scrolled {
	    border-top: 1px solid var(--color-border);
	}
	.du-dialog .dlg-select-item {
	    position: relative;
	    margin: 0 -24px;
	    padding: 0 24px;
	    cursor: pointer;
	    transition: background-color .2s linear;
	}
	.du-dialog .dlg-select-item.select--group {
	    /* pointer-events: none; */
	    line-height: 36px;
	    margin-top: 8px;
	    font-weight: 500;
	}
	.du-dialog .dlg-select-item:not(.select-group):hover {
	    background-color: #f5f5f5;
	}
	.du-dialog .dlg-select-item:not(.select-group):active {
	    background-color: #e0e0e0;
	}
	.du-dialog .dlg-select-item .dlg-select-radio,
	.du-dialog .dlg-select-item .dlg-select-checkbox {
	    position: absolute;
	    top: 12px;
	    height: 18px;
	    width: 18px;
	    opacity: 0;
	}
	.du-dialog .dlg-select-item .dlg-select-lbl {
	    position: relative;
	    display: inline-block;
	    padding-left: 40px;
	    margin: 0;
	    cursor: pointer;
	}
	.du-dialog .dlg-select-item .dlg-select-lbl .select-item {
	    display: block;
	    line-height: 48px;
	    display: flex;
	    flex-direction: row;
	    justify-content: flex-start;
	    align-items: center;
	    flex-wrap: nowrap;
	}
	.du-dialog .dlg-select-item .dlg-select-lbl .select-item i {
	    font-size: 2em;
	    line-height: 24px;
	    margin: 0 0.5rem;
	    font-style: normal;
	}
	.du-dialog .dlg-select-item .dlg-select-checkbox+.dlg-select-lbl::before {
	    content: '';
	    display: block;
	    position: absolute;
	    width: 16px;
	    height: 16px;
	    top: 50%;
	    left: 6px;
	    cursor: pointer;
	    border: 2px solid var(--color-input-border);
	    transform: translateY(-50%);
	    border-radius: 2px;
	    box-sizing: content-box;
	    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
	    will-change: border-color;
	}
	.du-dialog .dlg-select-item .dlg-select-checkbox:checked+.dlg-select-lbl::before {
	    background-color: var(--color-link);
	    border-color: var(--color-link);
	}
	.du-dialog .dlg-select-item .dlg-select-checkbox+.dlg-select-lbl::after {
	    content: '';
	    display: block;
	    position: absolute;
	    top: 50%;
	    left: 9px;
	    width: 12px;
	    height: 6px;
	    margin-top: -6px;
	    cursor: pointer;
	    border-left: 2px solid #ffffff;
	    border-bottom: 2px solid #ffffff;
	    box-sizing: content-box;
	    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
	    transform: rotate(-45deg) scale(0);
	    will-change: transform;
	}
	.du-dialog .dlg-select-item .dlg-select-checkbox:checked+.dlg-select-lbl::after {
	    transform: rotate(-45deg) scale(1);
	}
	.du-dialog .dlg-select-item.item--nomatch {
	    display: none;
	}
	.du-dialog .dlg-select-item.item--disabled {
	    cursor: default;
	}
	.du-dialog .dlg-select-item.item--disabled .dlg-select-lbl,
	.du-dialog .dlg-select-item.item--disabled .dlg-select-lbl::before,
	.du-dialog .dlg-select-item.item--disabled .dlg-select-lbl::after {
	    cursor: default;
	}
	.du-dialog .dlg-select-item .dlg-select-radio+.dlg-select-lbl::before {
	    content: "";
	    display: block;
	    position: absolute;
	    height: 16px;
	    width: 16px;
	    top: 50%;
	    left: 6px;
	    cursor: pointer;
	    border: 2px solid var(--color-input-border);
	    transform: translateY(-50%);
	    border-radius: 50%;
	    box-sizing: content-box;
	    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
	    will-change: border-color;
	}
	.du-dialog .dlg-select-item .dlg-select-radio:checked+.dlg-select-lbl::before {
	    border-color: var(--color-link);
	}
	.du-dialog .dlg-select-item .dlg-select-radio+.dlg-select-lbl::after {
	    content: '';
	    position: absolute;
	    top: 50%;
	    left: 11px;
	    width: 10px;
	    height: 10px;
	    margin-top: -5px;
	    cursor: pointer;
	    background-color: var(--color-link);
	    border-radius: 50%;
	    box-sizing: content-box;
	    transform: scale(0);
	    transform-origin: center;
	    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	    will-change: transform, background-color;
	}
	.du-dialog .dlg-select-item .dlg-select-radio:checked+.dlg-select-lbl::after {
	    transform: scale(1);
	}
	.du-dialog .dlg-actions {
	    padding: 8px;
	    text-align: right;
	}
	.du-dialog .dlg-actions .opt-out-grp {
	    position: relative;
	    display: flex;
	    margin: 0 16px 12px;
	    color: var(--color-input-border);
	}
	.du-dialog .dlg-actions .opt-out-grp label {
	    display: flex;
	    height: 20px;
	    padding-left: 16px;
	    margin: 0;
	    align-items: center;
	}
	.du-dialog .dlg-actions .opt-out-grp input[type="checkbox"] {
	    height: 18px;
	    width: 18px;
	    opacity: 0;
	    margin: 0;
	}
	.du-dialog .dlg-actions .opt-out-grp input[type="checkbox"]+label::before {
	    content: '';
	    display: block;
	    position: absolute;
	    width: 16px;
	    height: 16px;
	    top: 50%;
	    left: 6px;
	    cursor: pointer;
	    border: 2px solid var(--color-input-border);
	    transform: translateY(-50%);
	    border-radius: 2px;
	    box-sizing: content-box;
	    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
	    will-change: border-color;
	}
	.du-dialog .dlg-actions .opt-out-grp input[type="checkbox"]:checked+label::before {
	    background-color: var(--color-link);
	    border-color: var(--color-link);
	}
	.du-dialog .dlg-actions .opt-out-grp input[type="checkbox"]+label::after {
	    content: '';
	    display: block;
	    position: absolute;
	    top: 50%;
	    left: 9px;
	    width: 12px;
	    height: 6px;
	    margin-top: -6px;
	    cursor: pointer;
	    border-left: 2px solid #ffffff;
	    border-bottom: 2px solid #ffffff;
	    box-sizing: content-box;
	    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
	    transform: rotate(-45deg) scale(0);
	    will-change: transform;
	}
	.du-dialog .dlg-actions .opt-out-grp input[type="checkbox"]:checked+label::after {
	    transform: rotate(-45deg) scale(1);
	}
	.du-dialog .dlg-action {
	    font-family: inherit;
	    font-size: 0.9em;
	    border: none;
	    cursor: pointer;
	    padding: 0 12px;
	    min-width: 72px;
	    line-height: 30px;
	    font-weight: 600;
	    color: var(--color-blue);
	    text-transform: uppercase;
	    background-color: transparent;
	    border-radius: 0.5em;
	    outline: none;
	    background-color: var(--color-accent);
	    color: white;
	    font-weight: 600;
	}
	.du-dialog .dlg-action:not(:disabled):hover {
	    background-color: var(--color-accent);
	}
	.du-dialog .dlg-action:not(:disabled):active {
	    background-color: var(--color-accent);
	}
	.du-dialog .dlg-action:disabled {
	    cursor: default;
	    opacity: 0.5;
	}
	.du-dialog .dlg-action+.dlg-action {
	    margin-left: 8px;
	}
	.du-dialog.dlg--open {
	    background-color: rgba(0, 0, 0, 0.15);
	    visibility: visible;
	    opacity: 1;
	}
	.du-dialog.dlg--open .dlg-wrapper {
	    transform: scale(1);
	}
	.du-dialog.dlg--closing {
	    opacity: 0;
	    background-color: transparent;
	}
	.du-dialog.dlg--pulse {
	    -webkit-animation: dlgPulse 200ms;
	    animation: dlgPulse 200ms;
	}
	.du-dialog.dlg--no-title .dlg-content {
	    margin-top: 20px;
	}
	.du-dialog[dark="true"] .dlg-wrapper {
	    background-color: #1d1d1d;
	}
	.du-dialog[dark="true"] .dlg-header,
	.du-dialog[dark="true"] .dlg-content {
	    color: rgba(255, 255, 255, 0.75);
	}
	.du-dialog[dark="true"][selection="true"] .dlg-header {
	    background-color: #121212;
	}
	.du-dialog[dark="true"] .dlg-content.content--scrolled {
	    border-top: 1px solid rgba(255, 255, 255, 0.1);
	}
	.du-dialog[dark="true"] .opt-out-grp {
	    color: rgba(255, 255, 255, 0.75);
	}
	.du-dialog[dark="true"] .dlg-action {
	    color: #2196f3;
	}
	.du-dialog[dark="true"] .dlg-action:not(:disabled):focus,
	.du-dialog[dark="true"] .dlg-action:not(:disabled):hover,
	.du-dialog[dark="true"] .dlg-select-item:hover {
	    background-color: rgba(255, 255, 255, 0.06);
	}
	.du-dialog[dark="true"] .dlg-action:not(:disabled):active,
	.du-dialog[dark="true"] .dlg-select-item:active {
	    background-color: rgba(255, 255, 255, 0.1);
	}
	.du-dialog.dlg--loading .dlg-wrapper .dlg-loader {
	    transform: scaleY(1);
	}
	.du-dialog.dlg--loading .dlg-wrapper .dlg-loader .loader-wrapper .loading-indicator {
	    -webkit-animation: dlgLoading 1.45s infinite linear;
	    animation: dlgLoading 1.45s infinite linear;
	}
	@media (min-width: 600px) {
	    .du-dialog .dlg-wrapper {
	        max-width: 560px;
	    }
	}
	@-webkit-keyframes dlgPulse {
	    from {
	        transform: scale(1);
	    }

	    50% {
	        transform: scale(1.05);
	    }

	    to {
	        transform: scale(1);
	    }
	}
	@keyframes dlgPulse {
	    from {
	        transform: scale(1);
	    }

	    50% {
	        transform: scale(1.05);
	    }

	    to {
	        transform: scale(1);
	    }
	}
	@-webkit-keyframes dlgLoading {
	    0% {
	        transform: translateX(-100%);
	    }

	    50% {
	        transform: translateX(25%);
	    }

	    100% {
	        transform: translateX(225%);
	    }
	}
	@keyframes dlgLoading {
	    0% {
	        transform: translateX(-100%);
	    }

	    50% {
	        transform: translateX(25%);
	    }

	    100% {
	        transform: translateX(225%);
	    }
	}

/* DATERANGE PICKER */
	.daterangepicker {
	    position: absolute;
	    color: inherit;
	    background-color: white;
	    border: 1px solid var(--color-border);
	    border-radius: 0.5em;
	    max-width: none;
	    padding: 0;
	    margin-top: 10px;
	    top: 100px;
	    left: 20px;
	    z-index: 9999999999;
	    display: none;
	    font-size: 1rem;
	    /* line-height: 1; */
	    box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.25);
	    overflow: hidden;
	}
	.daterangepicker.drop-up {
	    margin-top: -7px;
	}
	.daterangepicker.single .drp-calendar {
	    float: none;
	}
	.daterangepicker.single .drp-selected {
	    display: none;
	}
	.daterangepicker.show-calendar .drp-calendar {
	    display: block;
	}
	.daterangepicker.show-calendar .drp-calendar.left {
	    padding-top: 1em;
	}
	.daterangepicker.show-calendar .drp-calendar.right {
	    padding-top: 1em;
	    padding-right: 1em;
	}
	.daterangepicker .drp-buttons {
	    clear: both;
	    text-align: right;
	    display: flex;
	    width: auto;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    align-items: center;
	    justify-content: flex-end;
	    border-top: 1px solid var(--color-border);
	    padding: 1em;
	}
	.daterangepicker.auto-apply .drp-buttons {
	    display: none;
	}
	.drp-buttons button {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 100px;
		width: auto;
	    border: none;
	    outline: none;
	    color: white;
	    background-color: var(--color-accent);
	    border-radius: 0.3rem;
	    font-weight: 500;
	    cursor: pointer;
	    font-size: 0.9em;
	    margin-left: 1em;
	}
	.drp-buttons button.applyBtn {
	    background-color: var(--color-accent);
	}
	.drp-buttons button.cancelBtn {
	    background-color: white;
	    color: var(--color-text);
	    border: 1px solid var(--color-border);
	}
	.daterangepicker .drp-calendar {
	    display: none;
	}
	.daterangepicker .drp-calendar.left {
	    padding: 0;
	}
	.daterangepicker .drp-calendar.right {
	    padding: 0;
	}
	.daterangepicker .drp-calendar.single .calendar-table {
	    border: none;
	}
	.daterangepicker .calendar-table .next span,
	.daterangepicker .calendar-table .prev span {
	    color: white;
	    border: solid white;
	    border-width: 0 2px 2px 0;
	    border-radius: 0;
	    display: inline-block;
	    padding: 3px;
	}
	.daterangepicker .calendar-table .next.unavailable,
	.daterangepicker .calendar-table .prev.unavailable{
	    pointer-events: none;
	    cursor: default;
	}
	.daterangepicker .calendar-table .next.unavailable span,
	.daterangepicker .calendar-table .prev.unavailable span{
	    opacity: 0.5;
	}
	.daterangepicker .drp-calendar.left .calendar-table .next.unavailable span,
	.daterangepicker .drp-calendar.right .calendar-table .prev.unavailable span {
	    display: none;
	}
	.daterangepicker .calendar-table .next span {
	    transform: rotate(-45deg);
	    -webkit-transform: rotate(-45deg);
	}
	.daterangepicker .calendar-table .prev span {
	    transform: rotate(135deg);
	    -webkit-transform: rotate(135deg);
	}
	.daterangepicker .calendar-table th,
	.daterangepicker .calendar-table td {
	    white-space: nowrap;
	    text-align: center;
	    vertical-align: middle;
	    min-width: 40px;
	    width: 40px;
	    height: 40px;
	    line-height: 40px;
	    font-size: 1em;
	    border-radius: 4px;
	    /* border: 1px solid transparent; */
	    white-space: nowrap;
	    cursor: pointer;
	}
	.daterangepicker .calendar-table thead tr:first-of-type th {
	    border-radius: 0;
	    background-color: var(--color-accent);
	    color: white;
	    padding: 0.6rem 1rem;
	    font-size: 1.05em;
	    font-weight: 500;
	}
	.daterangepicker .calendar-table thead tr:last-of-type th{
	    color: var(--color-accent);
	}
	.daterangepicker .left .calendar-table thead tr th:first-of-type{
	    border-top-left-radius: 0.5em;
	    border-bottom-left-radius: 0.5em;
	}
	.daterangepicker .right .calendar-table thead tr th:last-of-type{
	    border-top-right-radius: 0.5em;
	    border-bottom-right-radius: 0.5em;
	}
	.daterangepicker .calendar-table {
	    background-color: white;
	}
	.daterangepicker .calendar-table table {
	    width: 100%;
	    margin: 0;
	    border-spacing: 0;
	    border-collapse: collapse;
	}
	.daterangepicker td.available:hover,
	.daterangepicker th.available:hover {
	    background-color: var(--color-input-focus);
	    border-color: transparent;
	    color: inherit;
	}
	.daterangepicker td.week,
	.daterangepicker th.week {
	    font-size: 80%;
	    color: var(--color-input-border);
	}
	.daterangepicker td.off,
	.daterangepicker td.off.in-range,
	.daterangepicker td.off.start-date,
	.daterangepicker td.off.end-date {
	    background-color: #fff;
	    border-color: transparent;
	    color: #999;
	}
	.daterangepicker td.in-range {
	    background-color: #ebf4f8;
	    border-color: transparent;
	    color: #000;
	    border-radius: 0;
	}
	.daterangepicker td.start-date {
	    border-radius: 0.5rem 0 0 0.5rem;
	}
	.daterangepicker td.end-date {
	    border-radius: 0 0.5rem 0.5rem 0;
	}
	.daterangepicker td.start-date.end-date {
	    border-radius: 0.5rem;
	}
	.daterangepicker td.active,
	.daterangepicker td.active:hover {
	    background-color: var(--color-accent);
	    border-color: transparent;
	    color: white;
	}
	.daterangepicker th.month {
	    width: auto;
	}
	.daterangepicker td.disabled,
	.daterangepicker option.disabled {
	    color: var(--color-input-placeholder);
	    cursor: not-allowed;
	}
	.daterangepicker select.monthselect,
	.daterangepicker select.yearselect {
	    font-size: 0.9em;
	    padding: 1px;
	    height: auto;
	    margin: 0;
	    cursor: default;
	}
	.daterangepicker select.monthselect {
	    margin-right: 2%;
	    width: 56%;
	}
	.daterangepicker select.yearselect {
	    width: 40%;
	}
	.daterangepicker select.hourselect,
	.daterangepicker select.minuteselect,
	.daterangepicker select.secondselect,
	.daterangepicker select.ampmselect {
	    width: 50px;
	    margin: 0 auto;
	    background: #eee;
	    border: 1px solid #eee;
	    padding: 2px;
	    outline: 0;
	    font-size: 0.9em;
	}
	.daterangepicker .calendar-time {
	    text-align: center;
	    margin: 4px auto 0 auto;
	    line-height: 30px;
	    position: relative;
	}
	.daterangepicker .calendar-time select.disabled {
	    color: #ccc;
	    cursor: not-allowed;
	}
	.daterangepicker .drp-selected {
	    display: inline-block;
	    font-size: 0.9em;
	    padding-right: 8px;
	}
	.daterangepicker .drp-buttons .btn {
	    font-size: 1rem;
	    font-weight: 600;
	    padding: 0.75em 1.5em;
	    text-align: center;
	    flex: 0 0 auto;
	    border-radius: 0.5em !important;
	}
	.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
	    border-right: 1px solid var(--color-border);
	}
	.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
	    border-left: 1px solid var(--color-border);
	}
	.daterangepicker.show-ranges.rtl .drp-calendar.right {
	    border-right: 1px solid var(--color-border);
	}
	.daterangepicker.show-ranges.ltr .drp-calendar.left {
	    border-left: none;
	}
	.daterangepicker .ranges {
	    text-align: left;
	    margin: 0;
	    padding: 1rem;
	    min-width: 14em;
	    display: flex;
	    flex-direction: column;
	    align-items: flex-start;
	    justify-content: space-between;
	    height: 100%;
	}
	.daterangepicker .ranges ul {
	    list-style: none;
	    margin: 0 auto;
	    padding: 0;
	    width: 100% !important;
	}
	.daterangepicker .ranges li {
	    width: 100%;
	    font-size: 0.9em;
	    font-weight: 500;
	    padding: 0.5rem 1rem;
	    cursor: pointer;
	    border: 1px solid var(--color-border);
	    border-radius: 0.3em;
	    margin-bottom: 0.75rem;
	}
	.daterangepicker .ranges li.active {
	    background-color: var(--color-accent);
	    border: 1px solid var(--color-accent-darker);
	    color: white;
	}
	/*  Larger Screen Styling */
	@media (min-width: 564px) {
	    .daterangepicker {
	        width: auto;
	    }

	    .daterangepicker .ranges ul {
	        width: 140px;
	    }

	    .daterangepicker.single .ranges ul {
	        width: 100%;
	    }

	    .daterangepicker.single .drp-calendar.left {
	        clear: none;
	    }

	    .daterangepicker.single .ranges,
	    .daterangepicker.single .drp-calendar {
	        float: left;
	    }

	    .daterangepicker {
	        direction: ltr;
	        text-align: left;
	    }

	    .daterangepicker .drp-calendar.left {
	        clear: left;
	        margin-right: 0;
	        position: relative;
	    }
	    .daterangepicker .drp-calendar.left::after {
	        content: '';
	        position: absolute;
	        z-index: 2;
	        top: 6em;
	        bottom: 1em;
	        right: 0;
	        width: 1px;
	        background-color: var(--color-input);
	    }

	    .daterangepicker .drp-calendar.left .calendar-table {
	        border-right: none;
	        border-top-right-radius: 0;
	        border-bottom-right-radius: 0;
	    }

	    .daterangepicker .drp-calendar.right {
	        margin-left: 0;
	    }

	    .daterangepicker .drp-calendar.right .calendar-table {
	        border-left: none;
	        border-top-left-radius: 0;
	        border-bottom-left-radius: 0;
	    }

	    .daterangepicker .drp-calendar.left .calendar-table {
	        /* padding-right: 8px; */
	    }

	    .daterangepicker .drp-calendar {
	        float: left;
	    }
	}
	@media (min-width: 730px) {
	    .daterangepicker .ranges {
	        width: auto;
	    }

	    .daterangepicker .ranges {
	        float: left;
	    }

	    .daterangepicker.rtl .ranges {
	        float: right;
	    }

	    .daterangepicker .drp-calendar.left {
	        clear: none !important;
	    }
	}

/* ANIMATIONS */
	@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
	}
	@-webkit-keyframes spin { 
	    100% { -webkit-transform: rotate(360deg); } 
	}
	@keyframes spin { 
	    100% { 
	        -webkit-transform: rotate(360deg); 
	        transform:rotate(360deg); 
	    } 
	}
	@-webkit-keyframes cell-process {
	  0% { background-position: 0 0; }
	  100% { background-position: 32px 0; }
	}
	@-moz-keyframes cell-process {
	  0% { background-position: 0 0; }
	  100% { background-position: 32px 0; }
	}
	@keyframes cell-process {
	  0% { background-position: 0 0; }
	  100% { background-position: 32px 0; }
	}

	@-moz-keyframes blink { 
    100% { opacity: 0; } 
	}
	@-webkit-keyframes blink { 
	    100% { opacity: 0; } 
	}
	@keyframes blink { 
	    100% { opacity: 0; } 
	}

/* ADAPTIVE */
	@media (max-width: 1440px) {
		* {
		    --size-side-menu-width: 14em;
		    --size-filters-width: 19em;
		}
		html, body {
			font-size: 13px;
		}
		.side-menu .logo h1 {
			font-size: 1.35rem;
		}
		.side-menu .logo h3 {
			font-size: 0.9rem;
		}
	}
	@media (max-width: 1200px) {
		* {
		    --size-side-menu-width: 13em;
		    --size-filters-width: 18em;
		}
		html, body {
			font-size: 12px;
		}
		.side-menu .logo h1 {
			font-size: 1.35rem;
		}
		.side-menu .logo h3 {
			font-size: 0.9rem;
		}
	}