:root {
	--text-color: #575656;
}

@media all {

	/* hide user contacts autofilling for form fields in Safari */
	input::-webkit-contacts-auto-fill-button {
		visibility: hidden;
		display: none !important;
		pointer-events: none;
		position: absolute;
		right: 0;
	}

	::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	    color: #c2c2c2;
	}
	:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	   color: #c2c2c2;
	   opacity: 1;
	}
	::-moz-placeholder { /* Mozilla Firefox 19+ */
	   color: #c2c2c2;
	   opacity: 1;
	}
	:-ms-input-placeholder { /* Internet Explorer 10-11 */
	   color: #c2c2c2;
	}

	html {
		min-height:100%;
		position:relative;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}

	body {
		padding: 0;
		height:100%;
		background-color: #fff;
		color: var(--text-color);
	}
	body.tinted {
		background-color: #f4f4f4;
	}

	body, td, tr, p, button {
		font-family: 'Fira Sans', Arial, Helvetica, Verdana, sans-serif;
		font-size: 12px;
		margin: 0;
	}
	.plaintext {
		line-height:1.5em;
		color: var(--text-color);
		margin-bottom:1.1em;
	}
	h1,h2,h3{
		color:var(--theme-primary);
	}
	h2.no-top-margin {
		margin-top: 0;
	}
	a {
		color: var(--theme-secondary);
		outline: none; /* hide firefox dotted line around a-elements */
	}
	a:hover {
		color: var(--theme-primary);
	}
	a:active {
		color: var(--theme-secondary);
	}
	body.login .text {
		font-size:16px;
		color:var(--text-color);
	}
	form {
		margin: 0;
		padding: 0;
		display: inline;
	}

	hr {
		color: #eee;
		height: 1px;
	}

	input[type=text], input[type=number], input[type=password], textarea, select {
		font-family: 'Fira Sans', Arial, Helvetica, Verdana, sans-serif;
		font-size: 12px;
		padding: 4px;
		color: var(--text-color);
		border: 1px solid #ddd;
		border-radius: 4px;
		margin: 2px 0px;
		box-sizing: border-box;
		resize: none; /* disable resizeable fields in Chrome */
		background-color: #fff;
	}

	input[type=text].large, input[type=number].large, input[type=password].large, textarea.large {
		height: 28px !important;
	}

	select {
		margin:2px 0px;
	}

	input[type=text][disabled],
	input[type=number][disabled],
	input[type=password][disabled],
	textarea[disabled],
	select[disabled] {
		color: #aaa;
		background-color: #f4f4f4;
	}

	label(not:.control.control--checkbox) > input[type=checkbox] {
		vertical-align: top;
		position: relative;
		top: -2px;
		margin-right: 5px;
	}

	optgroup {
		font-family: 'Fira Sans', Arial, Helvetica, Verdana, sans-serif;
		font-size: 12px;
	}

	input[type=text]:hover,
	input[type=password]:hover,
	input[type="number"]:hover,
	textarea:hover {
		border: 1px solid #bbb;
	}

	input[type=text]:focus,
	input[type=password]:focus,
	input[type="number"]:focus,
	textarea:focus {
		outline: 1px solid #08f;
	}

	.inputError[type=text] {
		background-color: #fc9;
		border: 1px solid #f66;
		color: red;
	}

	.inputErrorHelp {
		color: #d40;
		background-color: #fceee8;
		padding: 6px 6px 6px 30px;
		border-radius: 4px;
		position: relative;
		margin-bottom:10px;
		border: 1px solid #f8d9cc;
		display: none;
	}

	.inputErrorHelp:before {
		font-family: FontAwesome;
		content: "\f071";
		display: inline-block;
		padding-right: 3px;
		vertical-align: middle;
		position: absolute;
		left: 9px;
		top: 7px;
	}


	/* SYSTEM STRUCTURE */


	/* TINYMCE CHANGES */
	.tox.tox-tinymce:not(.tox-tinymce-inline) {
		border-radius: 4px !important;
		border:1px solid #ddd !important;
	}
	.tox.tox-tinymce.tox-tinymce-inline .tox-editor-header {
		border: none;
	}
	.tox.tox-tinymce.tox-tinymce-inline .tox-toolbar__group {
		padding: 0;
	}
	.tox .tox-collection__item {
		white-space: nowrap;
	}
	.tox.tox-tinymce:not(.tox-tinymce-inline) .tox-editor-header {
		box-shadow: none !important;
		border-bottom:1px solid #ddd !important;
		padding: 0 !important;
	}
	.tox.tox-tinymce:not(.tox-tinymce-inline) .tox-toolbar__group {
		padding: 0px 6px 0 6px !important;
		border-right: 1px solid #ddd !important;
	}
	.tox.tox-tinymce:not(.tox-tinymce-inline) .tox-tbtn {
		color: var(--text-color) !important;
	}
	.tox.tox-tinymce:not(.tox-tinymce-inline) .tox-tbtn svg {
		fill: var(--text-color) !important;
	}
	.tox.tox-tinymce.tox-tinymce-inline .tox-tbtn {
		color: var(--theme-secondary) !important;
	}
	.tox.tox-tinymce.tox-tinymce-inline .tox-tbtn svg {
		fill: var(--theme-secondary) !important;
	}


	#systemContentContainer {
		width:100%;
		float:left;
	}

	#systemLeft {
		width: 170px;
		float: left;
		/* top: 0; */
		left: 0;
		background-color: var(--theme-primary);
		transition:.5s width;
		min-height: 100%;
		padding-bottom: 50px;
		box-sizing: border-box;
		position: absolute;
		z-index: 11;
		box-shadow: inset -169px 0px 0 rgba(16, 16, 30, 0.8), 2px 0px 0px rgba(0,0,0,0.15);
	}

	#systemLeft .userInfoContainer {
		background-color: var(--theme-primary);
		color: #fff;
		text-align: center;
		background-image: url(/client/includes/img/fsnl_tree.png);
		background-repeat: no-repeat;
		background-position: center 4px;
		height: 89px;
		position: relative;
	}

	#systemLeft .userInfo {
		position: absolute;
		bottom: 10px;
		left: 15px;
		right: 15px;
		text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
	}

	#systemLeft .userInfo .fsnl {
		margin-bottom: 3px;
		opacity: .9;
	}

	#systemLeft .userInfo .company {
		font-weight: 500;
		font-size: 1.15em;
		overflow-wrap: break-word;
	}

	#systemContent {
		padding: 14px;
		transition: .5s all;
	}

	#systemContent.popup {
		padding: 16px;
		transition: none;
	}

	.popupIframe {
		width: 100%;
		border: none;
		display:block;
		height: 300px;
	}

	.iframeNav {
		background-color: #fff;
		float: left;
		width: 100%;
		margin-top: 6px;
		padding-left: 10px;
		border-bottom: 1px solid #ddd;
		box-sizing: border-box;
	}

	.iframeNav ul {
		list-style:none;
		padding:0;
		margin:0;
	}
	.iframeNav ul li a {
		float:left;
		padding: 8px 12px;
		color:#666;
		text-decoration: none;
		transition: .2s background-color;
		border-bottom:3px solid transparent;
		height: 17px; /* fixes small glitch when loading the page */
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}
	.iframeNav ul li a:hover {
		color: var(--theme-secondary);
	}
	.iframeNav ul li a.active {
		color:var(--theme-secondary);
		font-weight: bold;
		border-bottom-color: var(--theme-secondary);
		background-color: var(--theme-secondary-light);
	}



	#systemLeft.menuCollapsed {
		width: 48px;
	}
	#systemLeft.menuCollapsed .menu {
		margin-left: -6px;
	}

	#systemMain {
		margin-left: 170px;
		transition:.5s all;
	}

	#systemMain.menuCollapsed {
		margin-left: 48px;
	}

	#systemTop {
		box-sizing: border-box;
		height: 90px;
		background-color: #fff;
		border-bottom: 1px solid #ddd;
	    position: relative;
	}

	#systemTop .topbar  {
		padding: 10px 14px 0px 14px;
		width: 100%;
		float: left;
		padding-bottom: 2px;
		box-sizing: border-box;
	}

	#systemTop.quotation .topbar .icon,
	#systemTop.quotation .topbar .title {
		color: #fa3;
	}
	#systemTop.invoice .topbar .icon,
	#systemTop.invoice .topbar .title {
		color: #5b5;
	}
	#systemTop.repeating .topbar .icon,
	#systemTop.repeating .topbar .title {
		color: #08f;
	}
	#systemTop.collection .topbar .icon,
	#systemTop.collection .topbar .title {
		color: #B08;
	}

	#systemTop.quotation {
		border-bottom-color: #fa3;
	}
	#systemTop.invoice {
		border-bottom-color: #5b5;
	}
	#systemTop.repeating {
		border-bottom-color: #08f;
	}
	#systemTop.collection {
		border-bottom-color: #B08;
	}

	#systemTop .topbar .icon {
		float: left;
		color: var(--theme-primary);;
		font-size: 20px;
		width: 32px;
	}

	#systemTop .topbar .title {
		float: left;
		color: var(--theme-primary);;
		font-size: 20px;
	}

	#systemTop .topbar .systemTopOptions {
		float: right;
		position: relative;
	}

	#systemTop .topbar .systemTopOptions > ul {
		list-style:none;
		margin: 0;
	}
	#systemTop .topbar .systemTopOptions > ul > li {
		float: left;
		margin-left: 12px;
	}
	#systemTop .topbar .systemTopOptions > ul > li > a {
		font-size: 16px;
		border:1px solid #ddd;
		border-radius: 4px;
		padding: 3px 8px;
		color: #aaa;
		width: 16px;
		display: block;
		text-align: center;
		transition: .2s all;
		text-decoration: none;
	}

	#systemTop .topbar .systemTopOptions > ul > li > a.running {
		color: #5b5;
		background-color: #e9f6e9;
		border-color: #acdeac;
	}

	#systemTop .topbar .systemTopOptions > ul > li > a:hover {
		background-color: var(--theme-primary);
		border-color: var(--theme-primary);
		color: #fff;
	}
	#systemTop .options {
		padding: 0 14px;
		float: left;
		width: 100%;
		box-sizing: border-box;
	}
	#systemTop .options > div {
		float: left;
		clear: left;
		width: 100%;
		margin-top: 5px;
	}
	#systemTop .options.with-line > div {
		border-top: 1px solid #eee;
		padding-top: 4px;
	}

	#systemTop .options .search {
		float: right;
		width: 40%;
		position: relative;
	}

	#systemTop .options .search input[type=text] {
		width: 100%;
		font-size: 14px;
		padding: 7px 0px 7px 7px;
	}

	#systemTop .options .search input[type=text]::-ms-clear {
		display: none;
	}

	#systemTop .options .search .save {
		font-size: 18px;
		cursor: pointer;
		position: absolute;
		left: -26px;
		top: 2px;
		transition: .3s color, .3s transform;
		width: 26px;
		text-align: center;
		height: 33px;
		line-height: 2em;
	}
	#systemTop .options .search .save i {
		color: #ccc;
		transition: .3s color, .3s transform;
	}

	#systemTop .options .search .save:hover i,
	#systemTop .options .search .save.active:hover i {
		color: var(--theme-primary);
	}

	#systemTop .options .search .save.active i {
		color: var(--theme-secondary);
		transform: rotate(30deg);
	}

	#systemTop .options .search .clear {
		font-size: 18px;
		color: #bbb;
		position: absolute;
		top: 8px;
		right: 6px;
		cursor: pointer;
	}

	#systemTop .options .search .clear:hover {
		color: var(--theme-secondary);
	}

	#systemTop .navbar {
		background-color: #fff;
		float: left;
		width: 100%;
		margin: 11px 0;
		padding-left: 10px;
		border-bottom: 1px solid #ddd;
		box-sizing: border-box;
	}

	#systemTop .navbar .navbar-alert {
		color: #ff5722;
		margin-left: 5px;
	}

	#systemTop .navbar ul {
		list-style:none;
		padding:0;
		margin:0;
	}
	#systemTop .navbar ul li a {
		float:left;
		padding: 9px 12px;
		color:#666;
		text-decoration: none;
		transition: .2s background-color;
		border-bottom: 4px solid transparent;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		height: 17px; /* fixes small glitch when loading the page */
	}
	#systemTop .navbar ul li a:hover {
		color: var(--theme-secondary);
	}
	#systemTop .navbar ul li a.active {
		color: var(--theme-secondary);
		font-weight: bold;
		border-bottom-color: var(--theme-secondary);
		background-color: var(--theme-secondary-light);
	}


	/* MENU STYLE */

	.menu {
		margin-top:20px;
		margin-left:0px;
		text-align:left;
		transition: .5s margin;
	}

	@media screen and (min-height:640px) {
		.menu {
			position: sticky;
			top: 10px;
		}
	}

	.menuCollapseIcon {
		position: absolute;
	    top: 63px;
	    right: 1px;
	    color: rgba(0,0,0,.25);
		text-align: right;
		height: 20px;
		width: 30px;
		padding: 3px 4px;
		font-size:18px;
		z-index: 1;
	}
	.menuCollapseIcon i {
		transition: .5s all;
	}
	.menuCollapseIcon i.collapsed {
		transform:rotate(-180deg);
	}
	.menuCollapseIcon:hover {
		color: #000;
	}

	.compose {
		margin: 0 15px;
	}

	.compose button {
		width: 100%;
		position: relative;
		padding: 6px;
		font-weight: 500;
	}

	.menu .menu-alert {
		color: #ff5722;
		position: absolute;
		right: 12px;
		font-size: 16px;
		top: 7px;
		z-index: 5;
	}

	.menu span.count {
		background-color: #eb5a46;
		display: inline-block;
		color: #fff;
		border-radius: 50%;
		-moz-border-radius: 50%;
		-khtml-border-radius: 50%;
		-webkit-border-radius: 50%;
		position: absolute;
		top: -6px;
		right: -7px;
		font-size: 12px;
		border: 2px solid white;
		width: 18px;
		height: 18px;
		text-align: center;
		line-height: 1.6em;
		font-weight: bold;
	}

	.menu li.new a i {
		color:var(--theme-primary);
	}
	.menu .title {
	    margin-left: 6px;
	}
	.menu ul {
		list-style: none;
		padding: 0;
		margin:0 0 15px 0;
	}
	.menu li {
		position:relative;
	}
	.menu li:first-child {
		border-top:none;
	}
	.menu li.active {
		background-color: rgba(0,0,0,0.25);
	}
	.menu li a {
		color: rgba(255,255,255,0.6);
		text-decoration:none;
		display:block;
		padding: 7px 7px 7px 18px;
		font-size:13px;
		transition: all 0.3s ease;
		text-shadow: 1px 1px rgba(0,0,0,.4);
	}
	.menu li a i {
		font-size: 16px;
		margin-right: 10px;
		width: 21px;
		color: #fff;
		text-align: center;
		vertical-align: middle;
		margin-top: -4px;
		opacity: 0.4;
	}
	.menu li.active a i {
		color: #fff;
		opacity: .9;
		text-shadow: 0 0 8px;
	}
	.menu li a:hover {
		background-color: rgba(0,0,0,0.5);
	}
	.menu li.active a {
		color:#fff;
		font-weight: 500;
		text-decoration:none;
	}
	.menu .menu-divider {
		border-bottom: 1px solid rgba(255,255,255,0.1);
		width: 140px;
		margin: 10px 0 10px 15px;

	}

	.menu-footer {
		background-image: url(/client/includes/img/fsnl_tree.png);
		background-repeat: no-repeat;
		background-position: 14px top;
		position: fixed;
		bottom: 0;
		width: 170px;
		height: 82px;
		display: flex;
		align-items: flex-end;
		padding: 0 0 0.8em 1em;
		background-size: 50px;
	}
	.menu-footer .fsnl {
		color: #fff;
		opacity: .8;
		font-weight: 500;
		margin-bottom: 0.2em;
	}
	.menu-footer .system_version {
		color: rgba(255,255,255,0.4);
		text-align:center;
	}
	.menu-footer .system_version a {
		color: rgba(255,255,255,0.4);
		text-decoration: none;
	}
	.menu-footer .system_version a:hover {
		color:#fff;
		text-decoration: none;
	}

	@media screen and (max-height:770px) {
		.menu-footer {
			display: none;
		}
	}

	div.demo-promotion {
		color: #08f;
		padding: 15px;
		background-color: #edf7ff;
		position: fixed;
		bottom: 10px;
		right: 10px;
		border: 2px solid #08f;
		border-radius: 5px;
		box-shadow: 3px 3px 3px rgba(0,0,0,.1);
		z-index: 10;
		line-height: 1.4em;
	}



	/* AUTHENTICATE MODULE */

	.loginWarning {
		color:#EB5757;
		background-color: #FCE6E6;
		font-size:14px;
		padding:10px 10px 10px 40px;
		border-radius: 4px;
		margin-bottom: 20px;
		position: relative;
	}
	.loginWarning:before {
		font-family: FontAwesome;
		content: "\f06a";
		display: inline-block;
		padding-right: 3px;
		vertical-align: middle;
		position: absolute;
		left: 9px;
		top: 9px;
		font-size: 20px;
	}
	.loginWarning a {
		color:#EB5757;
	}

	#centerbox {
		text-align:center;
	}
	div#header {
		height:150px;
		width:100%;
	}
	div#header a {
	    background: url(/client/includes/img/back_button.png) no-repeat scroll 0 0 transparent;
	    color: #FFFFFF;
	    float: left;
	    font-weight: bold;
	    margin: 10px 0 0 10px;
	    padding: 2px 0 10px 26px;
	    text-decoration: none;
	}
	div .loginContainer {
		width:100%;
		text-align:center;
		margin:auto;
	}

	div .login {
		width: 550px;
		text-align: left;
		border-width: 2px;
		border-style: solid;
		margin: auto;
		background-color: #fff;
		box-shadow: 0px 4px 4px rgba(0,0,0,0.2);
		border-radius: 4px;
	}
	div .login .loginHeader {
		border-bottom-width:1px;
		border-bottom-style: solid;
		text-align:center;
		padding:14px 0;

	}
	div .login .loginHeader .icon {
		font-size: 50px;
	}
	div .login .loginHeader .title {
		font-size: 18px;
		font-weight: bold;
	}
	div .login .loginHeaderChoice {
		background-color: #f8f8f8;
		border-bottom: 1px solid #d8d8d8;
		text-align:center;
		padding-top: 12px;

	}
	div .login .loginHeaderChoice ul {
		padding:0;
		margin: 0;
	}
	div .login .loginHeaderChoice ul li {
		display: inline-block;
		list-style: none;
	}
	div .login .loginHeaderChoice ul li:last-child a {
	    margin-right: 0px;
	}
	div .login .loginHeaderChoice ul li.active a {
		font-weight: bold;
		border-bottom-color: #5b5;
	}
	div .login .loginHeaderChoice ul li a {
	    color: #444;
		text-decoration: none;
		margin-right: 30px;
		border-bottom: 4px solid transparent;
		padding-bottom: 5px;
		font-size: 14px;
		transition: .3s border-color;
		display: inline-block;
	}
	div .login .loginHeaderChoice ul li:hover a{
		border-bottom-color: #ccc;
	}

	div .login .content {
		padding: 20px 20px 15px 20px;
	}
	div .login .content .text-muted {
		color: #aaa;
	}
	div .login .content.center {
		text-align: center;
	}
	div .login .content.center p {
		text-align: center;
	}
	div .login .content.no-top-padding {
		padding-top: 0;
	}
	div .login .content .auth-type {
		padding: 20px;
	}
	div .login input.error {
		border: 1px solid #F44336;
	}
	div .login div.error {
		margin-left: 163px;
		color: #F44336;
		width: 250px;
	}
	div .login span {
	    color: #444444;
	    float: left;
	    font-size: 14px;
	    margin-right: 23px;
	    margin-top: 8px;
	    text-align: right;
	    width: 140px;
	}
	div .login .inputfield {
		padding-bottom:15px;
	}
	div .login .inputfield input[type=text],
	div .login .inputfield input[type=password] {
		width:200px;
		padding: 6px;
		font-size:14px;
	}
	.bottom-options {
	    display: inline-block;
		width: 100%;
		border-top: 1px solid #eaeaea;
		margin-top: 20px;
		padding-top: 20px;
	}
	.bottom-options .remember-device {
		float: left;
	}
	.bottom-options .login-action {
		float: right;
	}

	.bottom-content {
		width: 530px;
		margin: 20px auto;
		box-sizing: border-box;
	}
	.bottom-content a {
		color: #fff;
		text-decoration: none;
		font-size: 14px;
	}
	.bottom-content a:hover {
		text-decoration: underline;
	}
	.bottom-content .forgot {
		float: left;
	}
	.bottom-content .no-account {
		float: right;
	}

	div#centerbox p {
		color:#444;
		line-height: 1.5em;
	}
	.centerboxContainer {
		text-align:center;
		border:1px solid #ccc;
		background-color: #f4f4f4;
		width:450px;
		-moz-border-radius: 4px;
		-khtml-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius:4px;
	}
	.centerboxContainerInner {
		text-align:center;
		padding: 7px;
		border:1px solid #ccc;
		background-color: #ebebeb;
		width:275px;
		-moz-border-radius: 4px;
		-khtml-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius:4px;
	}

	.button,
	a.button {
		font-family: 'Fira Sans', Arial, Helvetica, Verdana, sans-serif;
		border-radius: 6px;
		color: #29466a;
		padding: 8px 18px;
		cursor: pointer;
		background: #e0e3e6;
		margin-bottom: 6px;
		font-size: 12px;
		text-decoration: none;
		height: 32px;
		line-height: 1em;
		border: none;
		transition: .2s;
		box-shadow: inset 0 -40px rgba(0,0,0,0);
		font-weight: 500;
	}
	a.button {
		height: inherit;
	}
	.button:not(.with-icon) i {
		margin-right: 10px;
	}
	.button.block {
		width: 100%;
	}
	.button.primary {
		color: #fff;
		background: var(--theme-secondary);
		text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
	}
	.button.black {
		color: #fff;
		background: #686868;
		border-color: #393939;
	}
	.button.white {
		background: #fff;
	}
	.button.small {
		box-shadow: none;
		padding: 2px 9px;
		line-height: unset;
		margin: 0;
		height: auto;
	}
	.button.warning {
		color: #ff6363;
		background: #fff;
	}
	.button:hover {
		box-shadow: inset 0 -40px rgba(0,0,0,0.1);
	}
	.button:active {
		box-shadow: inset 0 -40px rgba(0,0,0,0.2);
	}
	.button[disabled]:not(.no-disable-style) {
		color: #a7aeb8;
	}
	.button.primary[disabled]:not(.no-disable-style) {
		color: rgba(255,255,255,0.5);
		text-shadow: none;
	}

	.button.large {
		font-size: 20px;
		height: auto !important;
		padding: 2px 15px !important;
	}
	.button.left {
		border-radius: 5px 0 0 5px;
	}
	.button.middle {
		border-left: none;
		border-radius: 0;
	}
	.button.right {
		border-radius: 0 5px 5px 0;
		border-left: none;
	}
	.button-as-text {
		color: var(--theme-secondary);
		text-decoration: underline;
		border: none;
		background: none;
		padding: 0;
		margin: 0;
		cursor: pointer;
		font-family: 'Fira Sans', Arial, Helvetica, Verdana, sans-serif;
		font-size: 12px;
	}
	.button-as-text:hover {
		color:var(--theme-primary);
	}
	.button-as-text.no-underline {
		text-decoration: none;
	}
	.headerButtons .button,
	.headerButtons a.button {
		float: left;
		height: 32px;
		padding-top: 0;
		padding-bottom: 0;
		margin-right: 0px;
		margin-left: 0px;
	}

	.buttonGroup .button,
	.buttonGroup a.button {
		float: left;
		display: inline-block;
	}

	.button.with-icon,
	a.button.with-icon {
		padding-left:0;
		padding-right:0;
	}

	.button.float,
	a.button.float {
		float: left;
	}

	.button.with-icon i,
	a.button.with-icon i {
		padding: 0 12px;
		font-size: 16px;
		line-height: 14px;
	}

	.button.spacing-right,
	a.button.spacing-right {
		margin-right:5px;
	}

	.button.separator,
	a.button.separator {
		margin-right:15px;
	}

	.button.separator-left,
	a.button.separator-left {
		margin-left:15px;
	}

	#table .button,
	#table a.button,
	.reports .button,
	.reports a.button {
		padding: 2px 7px;
	}
	.button.button_width {
		min-width:150px;
	}

	/* TABLE */

	.endTableMessageContainer {
		float: left;
		width: 100%;
	}

	#endTableMessage,
	#no-results {
		text-align: center;
		width: 300px;
		margin: 50px auto 180px auto;
	}

	#endTableMessage .icon,
	#no-results .icon {
		font-size: 130px;
		color: var(--theme-primary);
	}

	#endTableMessage .info,
	#no-results .info {
		font-size: 18px;
		color: #aaa;
	}

	#endTableMessage .buttons,
	#no-results .buttons {
		margin-top: 20px;
	}

	.active-filters {
		float: left;
		width: 100%;
		margin-bottom: 4px;
	}
	.active-filters ul {
		margin: 0;
		list-style: none;
		padding: 0;
	}
	.active-filters ul li {
		float: left;
		margin: 0 5px 5px 0;
		padding: 3px 9px;
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 2px 2px 0px rgba(0,0,0,0.06);
		color: #888;
		border: 1px solid #ccc;
	}
	.active-filters ul li.no-round {
		box-shadow: none;
		background-color: transparent;
		border: none;
		padding-top: 4px;
		cursor: pointer;
	}
	.active-filters ul li.no-round:hover {
		color: var(--theme-secondary);
	}

	.active-filters ul li span {
		color: #999;
	}

	.active-filters ul li a.clearThisFilter {
		margin-left: 10px;
		color: #bbb;
	}

	.theTables {
		float: left;
		padding: 0px;
		transition: .5s opacity;
		background-color: #fff;
		border: 1px solid #ddd;
		box-shadow: 0px 1px 3px rgba(0,0,0,0.1);
		border-radius: 5px;
		margin-bottom:14px;
		min-width: 100%;
		overflow: hidden;
	}

	#systemContent.popup .theTables {
		margin-top: 110px;
	}

	.tableLoader {
		z-index: 999;
		position: fixed;
		top: 172px;
		margin: 0 auto;
		left: 0;
		right: 0;
		height: 50px;
	}

	#systemContent.popup .theTables table th:nth-of-type(2),
	#systemContent.popup .theTables table th:last-of-type,
	#systemContent.popup .theTables table td:nth-of-type(2),
	#systemContent.popup .theTables table td:last-of-type {
		display: none;
	}

	.theTables table {
		width: 100%;
		border-collapse: collapse;
	}

	.theTables th {
		text-align: left;
		font-weight: 400;
		position: relative;
		background-color: #fff;
		padding: 12px 8px;
		border-bottom:2px solid #EAEAEA;
		font-weight: bold;
	}

	.theTables th.change-sort {
		transition: .2s background-color;
		cursor:pointer;
	}

	.theTables th.change-sort:hover {
		background-color: var(--theme-secondary);
		background: #f4f4f4;
	}

	.theTables th.active-sort {
		border-bottom-color: #bbb;
	}

	.theTables th.active-sort {
		color: #555;
	}

	.theTables th.active-sort.sort-desc::after,
	.theTables th.active-sort.sort-asc::after {
		font-family: FontAwesome;
		margin-left: 4px;
		color: #555;
		position: absolute;
		top: 16px;
		z-index: 1;
		font-size: 13px;
	}

	.theTables th {
		color: #999;
	}
	.theTables th.active-sort.sort-desc::after {
		content: "\f0dd";
	}

	.theTables th.active-sort.sort-asc::after {
		content: "\f0de";
	}

	.theTables .columnBulkOptions th {
	    padding: 6px;
	}
	.theTables th .clearBulkOptions {
		color: var(--theme-secondary);
		margin-left: 5px;
		padding: 9px;
	}
	.theTables th .clearBulkOptions:hover {
		background-color: #eee;
	}
	.theTables th .sums {
		color: #828282;
		float: left;
		margin-right: 24px;
		line-height: 26px;
	}

	.theTables th ul {
		padding: 0;
		margin: 0;
		list-style: none;
	}
	.theTables th ul li {
		float: left;
	}
	.theTables th ul li a {
		background-color: #eee;
		padding: 6px 10px;
		border-radius: 4px;
		margin-right: 6px;
		font-size: 12px;
		font-weight: bold;
		color: #888;
		transition: .2s all;
		text-decoration: none;
		float: left;
	}
	.theTables th ul li a:hover {
		background-color: var(--theme-primary);
		color: #fff;
	}
	.theTables th.header-options {
		text-align: right;
		font-size: 16px;
		padding: 8px 18px;
	}
	.theTables th.header-options a:last-child {
		margin-right: 0;
	}
	.theTables th.header-options a {
		margin-right: 10px;
	}
	.theTables th.header-options a:last-child {
		margin-right: 0;
	}

	.theTables th.min-width-60 {
		min-width: 60px;
	}

	.theTables th.min-width-100 {
		min-width: 100px;
	}

	.floatThead-container {
		transition: .4s box-shadow;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	.floatThead-container.floated {
		box-shadow: 0px 2px 8px rgba(0,0,0,0.1);
		border-top-left-radius: 0px;
		border-top-right-radius: 0px;
	}

	.theTables tr.loading td:not(:nth-child(2)) {
	    opacity: .4;
	}

	.theTables tr.loading label {
		display: none;
	}
	.theTables tr.loading td .row-loader {
		display: block;
	}

	.theTables tr.loading .singleAction div {
		display: none;
	}

	.theTables tr:hover td {
		background-color: #f4f4f4;
	}

	.theTables tr td.singleAction.hide div {
		opacity: 0;
		transition: .3s opacity;
	}

	.theTables tr:hover td.singleAction div {
		opacity: 1;
	}

	.theTables tr.selected td {
		background-color: rgba(96, 125, 139, 0.15);
	}

	.theTables tr.selected:hover td {
		background-color: rgba(96, 125, 139, 0.2);
	}

	.theTables td:nth-of-type(2) {
		user-select: none;
		-ms-user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
	}

	.theTables td {
		transition: background-color .3s;
		padding: 11px;
		color: #575656;
		border-bottom: 1px solid #f1f1f1;
		cursor: pointer;
	}

	.theTables tr:last-of-type td {
		border-bottom: none;
	}

	.theTables td span.lighter {
		color: #ddd;
	}

	.theTables td .row-loader {
		background: url(/client/includes/img/ajax-loader.gif) no-repeat;
		height: 16px;
		width: 18px;
		margin-left: 7px;
		margin-top: -2px;
		display: none;
	}

	.theTables td.active-sort {
		background-color: rgba(0,0,0,0.02);
	}

	.theTables th.align-right,
	.theTables td.align-right {
		text-align: right;
	}

	.theTables td.invoiceStatus {
		white-space: nowrap;
		overflow: hidden;
	}
	.theTables td.invoiceStatus .round {
		width: 14px;
		height: 14px;
		float: left;
		border-radius: 50%;
		margin-left: 3px;
		margin-right: 8px;
		display: inline-block;
		box-shadow: inset 0px 2px 0px rgba(255,255,255,0.2);
	}

	.theTables td.currency-color .outgoing,
	.theTables td.currency-color .incoming {
		padding: 3px 5px;
		border-radius: 4px;
	}
	.theTables td.currency-color .incoming {
		background-color: #ddf1dd;
	}

	.theTables td.tags {
		padding-top: 5px;
		padding-bottom: 2px;
	}

	.theTables th:nth-child(1),
	.theTables td:nth-child(1) {
		padding: 0;
		width: 2px;
	}
	.theTables th:nth-child(2),
	.theTables td:nth-child(2) {
		width: 20px;
	}

	.theTables td.statusIndicator {
		position: relative;
	}

	.theTables td.statusIndicator div {
		width: 3px;
		position: absolute;
		bottom: 3px;
		top: 3px;
		left: 3px;
		opacity: .4;
		transition: .3s opacity;
	}
	.theTables tr:hover td.statusIndicator div {
		opacity: 1;
	}

	.theTables td a.exec {
		text-decoration: none;
		padding: 2px 4px;
		margin: -6px -4px;
		border-radius: 3px;
		border: 1px solid transparent;
		color: #444;
		transition: .2s all;
		display: inline-block;
	}
	.theTables td a.exec.primary-link {
		color: var(--theme-secondary);
		font-weight: 500;
	}

	.theTables td a.exec:hover {
		border-color: #cfe9ff;
		color: var(--theme-secondary);
		background-color: #fff;
	}

	.theTables td a.exec i.fa {
		color: var(--theme-secondary);
	}

	.theTables td a.exec i.fa,
	.theTables td a.exec span {
		transition: .2s all;
	}
	.theTables td a.exec:hover i.fa,
	.theTables td a.exec:hover span {
		color: var(--theme-secondary);
	}

	.theTables .singleAction {
		padding: 0px 5px 0px 0px;
		white-space: nowrap;
		text-align: right;
	}

	.theTables .singleAction .action,
	.theTables .singleAction .pulldown {
		background-color: var(--theme-secondary);
		color: #fff;
		text-decoration: none;
		display: inline-block;
		transition: .2s all;
		border-style: solid;
		border-color: #fff;
		padding: 5px 7px;
		line-height: 1.2em;
		box-shadow: inset 0 -40px rgba(0,0,0,0);
		background-clip: padding-box;
	}

	.theTables .singleAction .action {
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		border-width: 2px;
		font-weight: bold;
		background-clip: padding-box;
	}

	.theTables .singleAction .action:hover {
		box-shadow: inset 0 -40px rgba(0,0,0,0.1);
	}

	.theTables .singleAction .pulldown {
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		border-width: 2px 2px 2px 0;
	}

	.theTables .singleAction .pulldown:hover {
		box-shadow: inset 0 -40px rgba(0,0,0,0.1);
	}

	.tag-item {
		float: left;
		border-radius: 4px;
		padding: 2px 10px;
		margin: 2px;
		box-shadow: 2px 2px 0px rgba(0,0,0,0.04);
		max-width: 140px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		background-color: #aaa;
		color: #fff;
	}

	.tag-item a {
		color: #fff;
	}

	.tag-item.tags-vertical {
		float: none;
		margin-bottom: 5px;
	}

	.tag-item-selector {
		margin-bottom: 1px;
		padding: 7px 6px 2px 14px;
		border-radius: 3px;
		transition: 0.3s all;
		color: #fff;
		margin-right: 6px;
		margin-left: 6px;
		/* border: 1px solid #aaa; */
	}

	.tag-item-selector label {
		padding-top: 2px;
	}

	.tag-item-selector.checked {
		margin-right: 0;
		margin-left: 0;
		padding-left: 20px;
		border-color: #fff;
	}

	.tag-item.tag-color-green, .tag-item.tag-color-green a		{ background-color: #61bd4f; }
	.tag-item.tag-color-yellow, .tag-item.tag-color-yellow a	{ background-color: #fbd118; color: #444; }
	.tag-item.tag-color-orange, .tag-item.tag-color-orange a	{ background-color: #ff9f1a; }
	.tag-item.tag-color-red, .tag-item.tag-color-red a			{ background-color: #eb5a46; }
	.tag-item.tag-color-purple, .tag-item.tag-color-purple a	{ background-color: #c377e0; }
	.tag-item.tag-color-blue, .tag-item.tag-color-blue a		{ background-color: #0079bf; }
	.tag-item.tag-color-sky, .tag-item.tag-color-sky a			{ background-color: #00c2e0; }
	.tag-item.tag-color-lime, .tag-item.tag-color-lime a		{ background-color: #1bd3a8; color: #444; }
	.tag-item.tag-color-pink, .tag-item.tag-color-pink a		{ background-color: #ff78cb; }
	.tag-item.tag-color-black, .tag-item.tag-color-black a		{ background-color: #344563; }

	.tag-item-selector.tag-color-green	{ color: #61bd4f; border-color: #61bd4f; }
	.tag-item-selector.tag-color-yellow	{ color: #fbd118; border-color: #fbd118; }
	.tag-item-selector.tag-color-orange	{ color: #ff9f1a; border-color: #ff9f1a; }
	.tag-item-selector.tag-color-red	{ color: #eb5a46; border-color: #eb5a46; }
	.tag-item-selector.tag-color-purple	{ color: #c377e0; border-color: #c377e0; }
	.tag-item-selector.tag-color-blue	{ color: #0079bf; border-color: #0079bf; }
	.tag-item-selector.tag-color-sky	{ color: #00c2e0; border-color: #00c2e0; }
	.tag-item-selector.tag-color-lime	{ color: #1bd3a8; border-color: #1bd3a8; }
	.tag-item-selector.tag-color-pink	{ color: #ff78cb; border-color: #ff78cb; }
	.tag-item-selector.tag-color-black	{ color: #344563; border-color: #344563; }

	.tag-item-selector.checked.tag-color-green	{ color: #fff; background-color: #61bd4f; }
	.tag-item-selector.checked.tag-color-yellow	{ color: #fff; background-color: #fbd118; color: #444; }
	.tag-item-selector.checked.tag-color-orange	{ color: #fff; background-color: #ff9f1a; }
	.tag-item-selector.checked.tag-color-red	{ color: #fff; background-color: #eb5a46; }
	.tag-item-selector.checked.tag-color-purple	{ color: #fff; background-color: #c377e0; }
	.tag-item-selector.checked.tag-color-blue	{ color: #fff; background-color: #0079bf; }
	.tag-item-selector.checked.tag-color-sky	{ color: #fff; background-color: #00c2e0; }
	.tag-item-selector.checked.tag-color-lime	{ color: #fff; background-color: #1bd3a8; color: #444; }
	.tag-item-selector.checked.tag-color-pink	{ color: #fff; background-color: #ff78cb; }
	.tag-item-selector.checked.tag-color-black	{ color: #fff; background-color: #344563; }

	.tag-radio {
		width: 40px;
		height: 25px;
		border-radius: 4px;
		float: left;
		background-color: #eee;
		margin-right: 3px;
		margin-bottom: 3px;
		position: relative
	}

	.tag-radio.checked::after {
		font-family: FontAwesome;
		content: "\f00c";
		position: absolute;
		color: #fff;
		font-size: 15px;
		left: 12px;
		top: 3px;
	}
	.tag-radio input {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
	}

	.tag-bgcolor-green	{ background-color: #61bd4f; }
	.tag-bgcolor-yellow	{ background-color: #fdd835; }
	.tag-bgcolor-orange	{ background-color: #ff9f1a; }
	.tag-bgcolor-red	{ background-color: #eb5a46; }
	.tag-bgcolor-purple	{ background-color: #c377e0; }
	.tag-bgcolor-blue	{ background-color: #0079bf; }
	.tag-bgcolor-sky	{ background-color: #00c2e0; }
	.tag-bgcolor-lime	{ background-color: #1bd3a8; }
	.tag-bgcolor-pink	{ background-color: #ff78cb; }
	.tag-bgcolor-black	{ background-color: #344563; }

	.tag-list {
		float: left;
		width: 100%;
		margin-bottom: 0em;
		cursor: pointer;
		border-bottom: 1px solid #ddd;
		padding-bottom: 2em;
	}

	.listContainer {
		outline: none;
		float: left;
		white-space: nowrap;
		z-index: 10;
	}
	.listContainer .list {
		background-color: #fff;
		padding: 0px;
		border: 1px solid #bbb;
		border-radius: 4px;
		box-shadow: 0px 2px 22px rgba(0,0,0,0.2);
		overflow: hidden;
	}

	.listContainer .list ul {
		padding: 0;
		margin: 5px 0px;
		list-style: none;
	}

	.listContainer .list ul li.separator {
		border-bottom: 1px solid #eee;
		padding-bottom: 5px;
		margin-bottom: 5px;
	}

	.listContainer .list ul li a {
		text-decoration: none;
		padding: 4px 20px 4px 16px;
		display: block;
		color: #555;
	}

	.listContainer .list ul li a:hover {
		background-color: var(--theme-primary);
		box-shadow: inset 0 -40px rgba(255,255,255,0.8);

	}

	.listContainer .list ul li a i {
		color: var(--theme-primary);
		width: 26px;
		font-size: 14px;
	}

	.preview-container .preview-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 15;
		background-color: rgba(0,0,0,0.5);
		overflow: auto;
	}

	.preview-container .preview-overlay .preview-header-bar {
		color: #fff;
		z-index: 16;
		right: 0;
		left: 0;
		position: fixed;
		background-color: #4A4A4A;
		box-shadow: 0 3px 3px rgba(0,0,0,0.2);
		border-bottom: 1px solid #616161;
		padding: 8px 16px 4px 16px;
	}

	.preview-container .preview-overlay .preview-header-bar .preview-title {
		float: left;
	}

	.preview-container .preview-overlay .preview-header-bar .preview-title .preview-title-name {
		font-size: 16px;
		font-weight: bold;
		float: left;
		margin: 10px 10px 10px 0;
		max-width: 200px;
		overflow: hidden;
		white-space: pre;
		text-overflow: ellipsis;
	}

	.preview-container .preview-overlay .preview-header-bar .preview-title .preview-document-label {
		background-color: #000;
		border-radius: 3px;
		border: 1px solid rgba(255,255,255,0.3);
		box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
		color: #fff;
		display: inline-block;
		font-size: 14px;
		font-weight: normal;
		margin-top: 6px;
		padding: 2px 11px;
		text-shadow: 1px 1px 0px rgba(0,0,0,0.3);
	}

	.preview-container .preview-overlay .preview-header-bar .preview-options {
		float: left;
		margin: 0 auto;
	}

	.preview-container .preview-overlay .preview-header-bar .preview-close {
		float: right;
		text-align: right;
	}

	.preview-container .preview-overlay .preview-document-container {
		width: 980px;
		height: 800px;
		margin: 70px auto;
	}

	.preview-container .preview-pages {
		position: fixed;
		top: 320px;
		background-color: rgba(0,0,0,0.6);
		z-index: 99;
		opacity: 0.3;
		cursor: pointer;
		transition: .3s all;
	    border-color: #fff;
	    border-style: solid;
	}
	.preview-container .preview-pages:hover {
		opacity: 1;
	}
	.preview-container .preview-pages i {
		text-align: center;
		color: #fff;
		padding: 30px 16px;
		font-size: 34px;
	}

	.preview-container .preview-pages.left {
		border-bottom-right-radius: 9px;
		border-top-right-radius: 9px;
		border-width: 2px 2px 2px 0;
	    left: 0px;
	}

	.preview-container .preview-pages.right {
		border-bottom-left-radius: 9px;
		border-top-left-radius: 9px;
		border-width: 2px 0 2px 2px;
	    right: 0px;
	}
	.preview-container .preview-pages:hover.left {
		padding-left:3px;
	}
	.preview-container .preview-pages:hover.right {
		padding-right:3px;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document {
		width: 568px;
		height: 800px;
		float: left;
		margin-right: 10px;
		border-radius: 4px;
		box-shadow: 4px 4px 9px rgba(0,0,0,0.3);
		position: relative;
		overflow: hidden;
		background-color: #444;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document.loader {
	    background-image: url(/client/includes/img/ring-alt.svg);
	    background-position: center;
	    background-repeat: no-repeat;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document.no-attachment {
		background: #444;
	}
	.preview-container .preview-overlay .preview-document-container .preview-document.no-attachment .no-attachment {
		color: #aaa;
		text-align: center;
		font-size: 30px;
		padding: 30px;
	}

	.preview-section-title {
		margin: 10px 4px -1px 4px;
		color: #808080;
		cursor: pointer;
		border-bottom:1px solid #d4d4d4;
		padding-bottom:10px;
	}

	.preview-section-title:hover {
		color: var(--theme-secondary);
	}

	.preview-section-title .section-closer {
		float: left;
		margin-right: 7px;
	}

	.preview-section-title .section-title {
		font-weight: bold;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options {
		width: 400px;
		background-color: #DFDFDF;
		float: right;
		border-radius: 4px;
		box-shadow: 4px 4px 9px rgba(0,0,0,0.3);
		padding: 6px;
		box-sizing: border-box;
		max-height: 800px;
		overflow: auto;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section {
		border-radius: 3px;
		box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
		border: 1px solid #b7b7b7;
		background-color: #fff;
		padding: 8px 12px;
		margin-bottom: .5em;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section table.preview-information {
		width: 100%;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section table.preview-information td:first-of-type {
		width: 35%;
		text-align: right;
		color: #aaa;
		padding-right:10px;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section table.preview-client {
		width: 100%;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section table.preview-client td:first-of-type {
		color: #bbb;
		font-size: 14px;
		padding-right:3px;
		vertical-align: top;
		width: 20px;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section table.preview-history {
		width: 100%;
		border-collapse: collapse;
		table-layout: fixed;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section table.preview-history td {
		padding: 5px;
		line-height: 1.4em;
		vertical-align: top;
	    border-bottom: 1px solid #eee;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section table.preview-history td.no-wrap {
	    white-space: nowrap;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section table.preview-history tr:last-of-type td {
		border: none;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section .history-attachments-container {
		float: right;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section .history-attachments {
		box-sizing: border-box;
		color: #929292;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section .history-attachments ul {
		border-top: 1px solid #eee;
		list-style: none;
		padding-left: 2em;
		margin-top: 0.5em;
		margin-bottom: 0.1em;
		padding-top: .5em;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section .history-attachments ul li::before {
		content: "\f0c6";
		font-family: FontAwesome;
		margin-right: 10px;
		margin-left: -20px;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section table.preview-lines {
		width: 100%;
		border-collapse: collapse;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section table.preview-lines td {
		padding: 5px;
		line-height: 1.4em;
		vertical-align: top;
	    border-bottom: 1px solid #eee;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section table.preview-lines td:first-of-type {
		max-width: 80px;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section table.preview-lines td.no-wrap {
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section table.preview-lines tr:last-of-type td {
		border: none;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section.notes {
		background-color: #FBF9E3;
		color: #2876BA;
		cursor: pointer;
		transition: .2s background-color;
	}
	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section.notes:hover {
		background-color: #ecead7;
	}

	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section.add-notes {
		background-color: transparent;
		border: none;
		box-shadow: none;
		color: #888;
		cursor: pointer;
		transition: .2s background-color;
	}
	.preview-container .preview-overlay .preview-document-container .preview-document-options .preview-section.add-notes:hover {
		background-color: #cacaca;
		color: #4a4a4a;
	}

	.historyContainer {
		overflow: auto;
		max-height: 450px;
		padding: 12px;
	}

	.historyUser span.date {
		font-weight: bold;
		color: #607d8b;
	}

	.historyUser span.user {
		float: right;
		color: #607d8b;
		margin-left: .75em;
	}

	.historyUser span.date:before {
		font-family: FontAwesome;
		content: "\f274";
		display: inline-block;
		padding-right: 6px;
		font-weight: normal;
	    color: #bbb;
	}

	.historyUser span.user:before {
		font-family: FontAwesome;
		content: "\f2c0";
		display: inline-block;
		padding-right: 6px;
	    color: #bbb;
	}

	.historyDetails {
		padding: 4px 0px 4px 12px;
		margin: 2px 0px 0px 4px;
		border-left: 2px solid #eee;
	}
	.historyRow {
		padding: 3px 0px;
		line-height: 1.4em;
	}

	.control {
		position: relative;
		padding-left: 30px;
		margin-bottom: 6px;
		cursor: pointer;
		display: block;
		user-select: none; /* CSS3 (little to no support) */
		-ms-user-select: none; /* IE 10+ */
		-moz-user-select: none; /* Gecko (Firefox) */
		-webkit-user-select: none; /* Webkit (Safari, Chrome) */
	}
	table .control {
		margin-left: 6px;
		margin-bottom: 14px;
	}
	.control input {
		position: absolute;
		z-index: -1;
		opacity: 0;
	}
	.control__indicator {
		position: absolute;
		top: 0px;
		left: 0;
		height: 12px;
		width: 12px;
		border: 2px solid #ddd;
		border-radius: 4px;
		background-color: #fff;
		transition: .3s border-color;
	}
	.control--radio .control__indicator {
		border-radius: 50%;
	}
	.control:hover input ~ .control__indicator {
		border-color: var(--theme-secondary);
	}
	.control input:focus ~ .control__indicator {
		border-color: #ccc;
	}
	.control input:checked ~ .control__indicator {
		/*background: #2aa1c0;*/
	}
	.control input:disabled ~ .control__indicator {
		background: #e6e6e6;
		opacity: 0.6;
		pointer-events: none;
	}
	.control__indicator:after {
		content: '';
		position: absolute;
		display: block;
		opacity: 0;
		transition: .3s opacity;
	}
	.control input:checked ~ .control__indicator:after {
		opacity: 1;
	}
	.control--checkbox .control__indicator:after {
		left: 5px;
		top: -5px;
		width: 5px;
		height: 11px;
		border: solid var(--theme-secondary);
		border-width: 0 3px 3px 0;
		transform: rotate(45deg);
		box-shadow: 2px 2px #fff;
	}
	.control--checkbox input:disabled ~ .control__indicator:after {
		border-color: #7b7b7b;
	}
	.control--radio .control__indicator:after {
		left: 7px;
		top: 7px;
		height: 6px;
		width: 6px;
		border-radius: 50%;
		background: var(--theme-secondary);
	}
	.control--radio input:disabled ~ .control__indicator:after {
		background: #7b7b7b;
	}

	.statsContainer {
		background-color: rgba(50, 50, 68, 0.9);
		position: fixed;
		bottom: 0;
		left: 170px;
		border-top: 1px solid #fff;
		box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.25);
		right: 0;
		padding: 10px 30px 0 30px;
		height: 103px;
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
	}

	.statsContainer.excluding-status {
		height: 24px;
	}

	.statsContainer .statisticsLoader {
		z-index: 999;
		margin: 27px auto;
		left: 0;
		right: 0;
		height: 50px;
	}

	.statsContainer.menuCollapsed {
		left: 48px;
	}

	#systemContent.popup .statsContainer {
		left: 0;
		position: absolute;
		top: 0;
		box-shadow: none;
		border: none;
		bottom: auto;
		background-color: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	#systemContent.popup .statsContainer .close,
	#systemContent.popup .statsContainer .selection,
	#systemContent.popup .statsContainer .filtered {
		display: none;
	}

	#systemContent.popup .statsContainer .title .sum,
	#systemContent.popup .statsContainer .legend .numbers {
		color: #555;
	}

	.statsContainer .bar {
		height: 14px;
		width: 100%;
		border-radius: 50px;
		overflow: hidden;
		margin-bottom: 20px;
		box-shadow: 2px 2px 0px rgba(0,0,0,0.15);
		background-color: #607d8b;
	}
	.statsContainer .bar .bar-part {
		height: 100%;
		float: left;
		box-shadow: -2px 0 0 #fff, inset 0px 7px 0px rgba(255,255,255,0.15);
	}
	.statsContainer .close {
		position: absolute;
		right: 10px;
		top: 10px;
	}
	.statsContainer .close a i {
		color: #fff;
		font-size: 16px;
		opacity: .4;
	}
	.statsContainer .title {
		float: left;
		width: 100%;
		margin-bottom: 5px;
	}
	.statsContainer .sum {
		float: left;
		font-size: 14px;
		color: #fff;
	}
	.statsContainer .sum span {
		font-weight: normal;
		color: #fff;
		margin-left: 10px;
		opacity: 0.6;
	}
	.statsContainer .filtered {
		font-size: 14px;
		color: #fff;
		float: right;
		opacity: 0.6;
	}
	.statsContainer .legend {
		text-align: center;
	}
	.statsContainer .legend > div {
		display: inline-block;
	}
	.statsContainer .legend .legend-part {
		float: left;
		width: 130px;
		text-align: left;
		margin-right: 4px;
		margin-bottom: 10px;
	}
	.statsContainer .legend .legend-part .round-number {
		float: left;
		border-radius: 50px;
		width: 34px;
		height: 34px;
		text-align: center;
		color: #fff;
		font-size: 16px;
		line-height: 34px;
		margin-right: 12px;
		text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
		box-shadow: 0px 2px 0px rgba(0,0,0,0.1), inset 0px 2px 0px rgba(255,255,255,0.15)
	}

	.statsContainer .legend .legend-part .round-number span.thousand {
		opacity: 0.7;
		font-size: 12px;
	}

	.statsContainer .legend .legend-part .numbers {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #fff;
	}

	.statsContainer .legend .legend-part .numbers span {
		font-weight: bold;
	}

	.toggleColumnsContainer {
		position: absolute;
		top: 25px;
		left: 0;
		z-index: 10;
		outline: none;
	}

	.toggleColumnsContainer .column-pulldown {
		background-color: #fff;
		padding: 0px;
		border: 1px solid #ddd;
		border-radius: 	4px;
		box-shadow: 0px 2px 12px rgba(0,0,0,0.1);
		overflow: hidden;
		width: 300px;
	}
	.toggleColumnsContainer .column-pulldown li {
		float: left;
		width: 225px;
	}
	.toggleColumnsContainer .column-pulldown li .control {
		margin-left: 20px;
	}

	.toggleColumnsContainer .sortable-placeholder {
		float: left;
		width: 225px;
		height: 20px;
	}
	.toggleColumnsContainer .sorthandle {
		cursor: move;
		float: left;
		color: #aaa;
		cursor: pointer;
	}

	.toggleColumnsContainer .column-pulldown ul {
		float: left;
		padding: 0;
		list-style: none;
		margin: 16px 20px;
	}

	.toggleColumnsContainer .column-pulldown .list-option {
		padding: 12px 0;
		background-color: #f4f4f4;
		text-align: center;
		border-top: 1px solid #eee;
		float: left;
		clear: left;
		width: 100%;
	}

	.new-button {
		float: left;
		margin-right: 20px;
	}

	.new-button button {
		padding: 8px 40px;
		margin-top: 1px;
	}

	.filter-list {
		position: relative;
		float: left;
		color: #aaa;
		padding: 8px 0px;
	}
	.filter-list > span {
		font-size: 14px;
	}
	.filter-list > span > a {
		text-decoration: none;
		color: var(--theme-secondary);
	}
	.filter-list > span > a > i {
		font-size: 16px;
		color: var(--theme-secondary);
		margin-left: 5px;
	}

	.filter-list-container .pulldown {
		position: absolute;
		background-color: #fff;
		padding: 0px;
		border: 1px solid #ddd;
		border-radius: 4px;
		box-shadow: 0px 2px 12px rgba(0,0,0,0.1);
		overflow: hidden;
		z-index: 10;
	}


	.filter-list-container .pulldown .filters {
		margin-top: 10px;
		display: flex;
	}

	.filter-list-container .pulldown .filters .system {
		float: left;
	}
	.filter-list-container .pulldown .filters .user {
		border-left: 1px solid #eee;
		float: right;
	}

	.filter-list-container .pulldown .filters .title {
		color: #aaa;
		padding-left: 19px;
		padding-top: 4px;
	}

	.filter-list-container .pulldown ul {
		padding: 0;
		margin: 5px 0px;
		list-style: none;
	}

	.filter-list-container .pulldown ul li a {
		text-decoration: none;
		padding: 4px 20px;
		display: block;
		color: #555;
	    min-width: 200px;
	}

	.filter-list-container .pulldown ul li a:hover {
		background-color: var(--theme-secondary);
		box-shadow: inset 0 -40px rgba(255,255,255,0.8);
	}

	.filter-list-container .pulldown ul li a i {
		color: #F5A623;
		width: 26px;
		font-size: 14px;
	}
	.filter-list-container .pulldown ul li a span.filter-options {
		float: right;
	}
	.filter-list-container .pulldown ul li a span.filter-options span {
		margin-left: 10px;
	}
	.filter-list-container .pulldown ul li a span.filter-options i {
		color: var(--theme-secondary);
		width: inherit;
	}
	.filter-list-container .pulldown ul li a span.filter-options i:hover {
		color: var(--theme-primary);
	}
	.filter-list-container .pulldown .list-option {
		clear: both;
		padding: 12px 0;
		background-color: #f4f4f4;
		margin-top: 10px;
		text-align: center;
		border-top: 1px solid #eee;
	}

	.filter-bar {
		position: fixed;
		top: 0;
		left: 0;
		background-color: #f4f4f4;
		width: 200px;
		bottom: 0;
		border-right: 2px solid var(--theme-primary);
		box-shadow: 15px 0 46px rgba(0,0,0,0.25);
		box-sizing: border-box;
		transition: 0.5s all;
		margin-left:-250px;
		z-index: 11;
		overflow-y: auto;
		overflow-x: none;
	}

	.filter-bar.opened {
		margin-left:0;
	}

	.filter-bar input[type=text],
	.filter-bar input[type=password],
	.filter-bar textarea {
		width:95%;
	}

	.filter-bar .filter-bar-hide a {
		position: absolute;
		right: 0;
		top: 0;
		background-color: var(--theme-primary);
		padding: 0px 10px;
		color: #fff;
		font-size: 16px;
		border-bottom-left-radius: 5px;
		transition: .2s background-color;
	}
	.filter-bar .filter-bar-hide a:hover {
		background-color: var(--theme-secondary);
	}
	.filter-bar .filter-item {
		border-bottom: 1px solid #eee;
		float: left;
		width: 100%;
		box-sizing: border-box;
		position: relative;
		background-color: #fff;
		padding: 10px;
	}
	.filter-bar .filter-item.header {
		background-color: var(--theme-primary);
		box-shadow: inset 0 80px 0 rgba(255,255,255,0.6);
		border-bottom: 1px solid var(--theme-primary);
	}
	.filter-bar .filter-item.footer {
		background-color: #f4f4f4;
		border-bottom: none;
	}
	.filter-bar .filter-item.footer .missingFilters {
		margin-top:10px;
		color: #aaa;
		text-align: center;
	}

	.filter-bar .filter-item .filter-input-2col span {
		font-size:10px;
		font-weight: bold;
		color:#555;
	}
	.filter-bar .filter-item .filter-input-container {
		margin-top: 8px;
	}
	.filter-bar .filter-item .filter-input-container > ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.filter-bar .filter-item .filter-input-container > ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.filter-bar .filter-item .filter-name {
		color: #777;
		cursor: pointer;
		transition: .2s color;
	}
	.filter-bar .filter-item .filter-name:hover {
		color: var(--theme-secondary);
	}

	.filter-bar .filter-item .filter-name i {
		position: absolute;
		right: 0px;
		top: 9px;
		padding: 0px 10px;
		font-size: 20px;
		transition: .4s transform;
	}
	.filter-bar .filter-item .filter-name.closed i {
		transform: rotate(90deg);
	}

	.filter-bar .filter-item .filter-input {
		margin-bottom: 6px;
	}
	.filter-bar .filter-item .filter-input .filter-input-2col {
		float: left;
		width: 50%;
	}
	.filter-bar .filter-item .filter-input .filter-input-2col input {
		width: 65px;
	}

	.filter-bar .saveSearchQueryDescription {
		color: #aaa;
		font-size: 12px;
		font-style: italic;
		padding-top: 4px;
		padding-bottom: 4px;
		overflow: hidden;
	}

	.filter-bar .includeModeOption {
		float: left;
		clear: left;
	}

	.filter-bar .includeMode {
		float: right;
	}

	.filter-bar .includeMode input[type=radio] {
		float: right;
	}

	.filter-bar .includeMode input[type=radio] {
		display: none;
	}

	.filter-bar .includeMode input[type="radio"] + label span {
		display: inline-block;
		width: 18px;
		height: 18px;
		background-color: #ddd;
		margin: -1px -2px 0px 0px;
		cursor: pointer;
		color: #aaa;
		text-align: center;
		line-height: 18px;
	}

	.filter-bar .includeMode input[type="radio"]:first-of-type + label span {
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}

	.filter-bar .includeMode input[type="radio"]:last-of-type + label span {
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
	}

	.filter-bar .includeMode input[type="radio"]:checked + label span {
		background-color: var(--theme-secondary);
		color: #fff;
	}

	#lazyLoaderActive {
		margin: 10px auto;
		height: 30px;
		float: right;
	}
	.spinner {
		margin: 0px auto;
		width: 50px;
		height: 100%;
		text-align: center;
		font-size: 10px;
	}

	.spinner > div {
		background-color: var(--theme-primary);
		opacity: .8;
		height: 100%;
		width: 6px;
		display: inline-block;
		margin-right: 3px;
		-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
		animation: sk-stretchdelay 1.2s infinite ease-in-out;
	}

	.spinner .rect2 {
		-webkit-animation-delay: -1.1s;
		animation-delay: -1.1s;
	}

	.spinner .rect3 {
		-webkit-animation-delay: -1.0s;
		animation-delay: -1.0s;
	}

	.spinner .rect4 {
		-webkit-animation-delay: -0.9s;
		animation-delay: -0.9s;
	}

	.spinner .rect5 {
		-webkit-animation-delay: -0.8s;
		animation-delay: -0.8s;
	}

	@-webkit-keyframes sk-stretchdelay {
		0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
		20% { -webkit-transform: scaleY(1.0) }
	}

	@keyframes sk-stretchdelay {
		0%, 40%, 100% {
			transform: scaleY(0.4);
			-webkit-transform: scaleY(0.4);
			}  20% {
				transform: scaleY(1.0);
				-webkit-transform: scaleY(1.0);
			}
		}

	/* MESSAGE BAR */
	#messagebar {
		z-index: 1043;
		font-size: 14px;
		cursor: pointer;
		position: fixed;
		top: 10px;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	#messagebar .closebtn {
		position: absolute;
		top: 12px;
		right: 11px;
		font-size: 14px;
		opacity: 0.4;
	}

	.messagebarErrorData0, .messagebarErrorData1, .messagebarErrorData2 {
		padding: 12px 36px 12px 15px;
		position: relative;
		border: 1px solid rgba(0,0,0,.5);
		text-align: center;
		box-shadow: 0 2px 10px 1px rgba(0,0,0,0.2);
		opacity: 0.95;
		border-radius: 5px;
		border-color: rgba(0,0,0,0.3);
		color: rgba(0,0,0,0.75);
		max-width: 80%;
		font-weight: 500;
	}
	.messagebarErrorData0 {
		background-color: #d4edda;
	}
	.messagebarErrorData1 {
		background-color: #fff3cd;
	}
	.messagebarErrorData2 {
		background-color:#f8d7da;
	}


	/* INCOMING INVOICES */

	.open_next {
		float:left;
		margin-left: 20px;
		margin-top: 7px;
	}

	#incoming #buttonHeader {
		float: left;
		width: 100%;
		background-color: #f4f4f4;
		padding: 8px 8px 8px 12px;
		box-sizing: border-box;
		border-bottom: 1px solid #ddd;
	}

	#incoming #buttonHeader > .left {
		float: left;
	}

	#incoming #buttonHeader > .right {
		float: right;
	}

	#incoming #buttonHeader button.alert:hover {
		color: #fff;
		background-color: #d40;
		cursor: pointer;
	}

	#incoming #buttonHeader button {
		position: relative;
		float: left;
		margin-bottom: 0;
	}

	#incoming #buttonHeader button:last-of-type {
		margin-right: 0px;
	}

	#incoming #buttonHeader > .left > .pdfSwitch {
		float: left;
		color: #777;
	    margin-top: 4px;
	}

	#incoming #cropHelper {
		display: none;
		position: absolute;
		background-color: #08f;
		color: white;
		z-index: 601;
		padding: 10px 15px;
		border-radius: 5px;
		border: 2px solid rgba(255,255,255,0.8);
		box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
		margin-top: 8px;
		margin-left: 8px;
	}
	#incoming #cropHelper a {
	    color: #fff;
	    margin-left: 30px;
	}
	#incoming #cropOkButton {
		display: none;
		position: absolute;
		z-index: 601;
	}
	#incoming #cropOkButton a {
		color: white;
		border: 2px solid rgba(255,255,255,0.8);
		box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
		background-color: #08f;
		border-radius: 5px;
		padding: 7px 15px;
		display: block;
	    color: #fff;
		font-size: 1.6em;
	}
	#incoming #cropOkButton a:hover {
		background-color: #5b5;
	}
	.jcrop-handle {
		background-color: #08f !important;
		height: 12px !important;
		width: 12px !important;
	}

	#incoming .header {
		background-color: #FFFFFF;
		float: left;
		padding: 16px;
		width: 28%;
		border: 1px solid #ddd;
		box-sizing: border-box;
		border-radius: 3px;
		max-width: 360px;
		margin-left:10px;
		box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
	}

	#incoming #dropIncoming {
		float:left;
		width:100%;
		border-radius:8px;
		text-align: center;
		padding: 40px;
		box-sizing: border-box;
	}

	#incoming #dropIncoming.in {
		background-color: #f0f8ff;
	}

	#incoming #dropIncoming.hover {
		background-color: #cceacc;
	}

	#incoming #dropIncoming.hover p.no-invoice-icon{
		color: #5b5;
	}

	#incoming #dropIncoming.fade {
		-webkit-transition: 0.2s background-color, 0.2s border;
		-moz-transition: 0.2s background-color, 0.2s border;
		-ms-transition: 0.2s background-color, 0.2s border;
		-o-transition: 0.2s background-color, 0.2s border;
		transition: 0.2s background-color, 0.2s border;
	}

	#incoming #dropIncoming button {
		display:inline-block;
		margin-top:12px;
		width:150px;
	}

	#incoming #dropIncoming input {
		display:none;
	}

	#incoming #dropIncoming p {
		margin: 25px auto;
		color: #999;
		text-align: center;
		width: 100%;
		line-height: 1.5em;
	}

	#incoming #dropIncoming p.draghere {
		text-align: center;
		font-size: 1.5em;
	}

	#incoming #dropIncoming div.help {
		padding: 20px;
		box-sizing: border-box;
	}

	#incoming #dropIncoming p.no-invoice-icon {
		margin-top: 0;
		font-size: 8em;
		color: #ddd;
		text-align: center;
	}

	#incoming #dropIncoming p.no-invoice-image {
		margin-top: 0;
		font-size: 3em;
		color: #bbb;
		text-align: center;
		letter-spacing: -1px;
	}

	#incoming #dropIncoming #uploadResult .progressbar_container {
		border: 1px solid #ccc;
		width: 100%;
		height: 30px;
		background-color: #fff;
		position: relative;
		margin-bottom: 5px;
		border-radius: 5px;
	}

	#incoming #dropIncoming #uploadResult .progressbar_container .progressbar {
		background-color: #08f;
		transition: 0.2s all;
		height: 30px;
		max-width: 100%;
		border-radius: 4px;
		box-shadow: inset 0px 0px 0px 1px #fff;
	}

	#incoming #dropIncoming #uploadResult.done .progressbar_container .progressbar {
		background-color: #5b5;
	}

	#incoming #dropIncoming #uploadResult p {
		text-align: center;
		font-size: 2em;
		color: #aaa;
		float: left;
	    margin-bottom: 0;
	}

	#incoming .image {
		position: relative;
		float: left;
		width: 70%;
		max-width: 900px;
		box-shadow: 0px 2px 3px 1px #ddd;
		background-color: #fff;
		padding: 6px;
		border: 1px solid #ddd;
	    box-sizing: border-box;
	    border-radius: 3px;
	    box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
	}

	#incoming #invoice {
		float: left;
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	#incoming #invoice.fullwidth img {
		width: 100%;
	}

	#incoming #invoice .invoicePage {
	    border-bottom: 8px solid #ddd;
	}
	#incoming #invoice .invoicePage:last-child {
	    border-bottom: none;
	}
	#incoming .title {
		clear: left;
		float: left;
		color: #444;
		padding: 10px 0;
		overflow: hidden;
		width: 45%;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	#incoming .input {
		float: right;
		width: 51%;
		padding: 3px 0;
	}

	#incoming .input > a {
		display: block;
		padding: 7px 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	#incoming .found {
		float:left;
	}

	#incoming .align_right {
		text-align: right;
	}

	#incoming .header .checkboxes .input {
		padding: 0;
	}

	#incoming .header .checkboxes {
		margin-top: 10px;
		float: left;
		width: 100%;
	}

	#incoming .input input[type=text] {
		width: 100%;
	}

	#incoming .entry {
		float:left;
		width: 100%;
		clear: left;
		border-bottom: 1px solid #eee;
	}

	#incoming .entry .payment-item,
	#incoming .entry .payment-item-no-border {
		padding: 7px 0;
		float: left;
		width: 100%;
		border-bottom: 1px solid #eee;
	}
	#incoming .entry .payment-item {
		border-bottom: 1px solid #eee;
	}
	#incoming .entry .payment-item-no-border {
		border-bottom: none;
	}

	#incoming .entry .payment-info {
		float: left;
	}
	#incoming .entry .payment-info span {
		display: inline-block;
		margin-top:.2em;
	}
	#incoming .entry .payment-item-remove {
		float: right;
	}
	#incoming .entry .payment-item-mark {
		padding: 7px 0;
		float: left;
		width: 100%;
	}
	#incoming .entry.no-line {
		border-bottom: none;
	}
	#incoming .entry.error {
	    background-color: #FFDDDD;
	    border: 1px solid #FC9999;
		border-radius:4px;
	    margin-left: -9px;
	    margin-top: -5px;
	    margin-bottom:3px;
	    padding: 4px 5px 0px 8px;
	    width: 100%;
	    float: left;
	}

	#incoming .entry.large .title {
		padding-bottom: 0;
		width: 100%;
	}
	#incoming .entry.large .input {
		float: left;
		width: 100%;
		margin-bottom: 4px;
	}

	#incoming #notes {
		background-color: #FEFCD9;
		padding: 1em;
		border: 1px solid #D7D7D7;
		box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.1);
		border-radius: 4px;
		margin-bottom: 0.6em;
	}

	#incoming #notes .notes-header {
		float: left;
		width: 100%;
		border-bottom: 1px solid #EFECC5;
		padding-bottom:10px;
		margin-bottom:10px;
	}

	#incoming #notes .notes-header .notes-title {
		float: left;
		font-weight: bold;
		color: #777;
	}

	#incoming #notes .notes-header .notes-close {
		float: right;
		margin-top:-3px;
	}

	#incoming #notes .notes-header .notes-close a {
		color: #aaa;
		font-size: 14px;
	}

	#incoming #notes .notes-content textarea {
		width: 100%;
		height: 100px;
		box-sizing: border-box;
		border: none;
		background: none;
		box-shadow: none;
		padding: 0;
		outline: none;
	}

	#notes-indicator {
		width: 8px;
		height: 8px;
		background-color: #d20;
		border-radius: 50%;
		position: absolute;
		border: 2px solid #fff;
		top: 4px;
		right: 18px;
		z-index: 20;
	}

	/* EXPORT TABLE FIELDS */

	.headertop {
		font-weight: bold;
		border-bottom: 1px solid #bbbbbb;
		background-color: #eee;
		padding: 6px;
	}

	.step1_selectinvoices {
		overflow: auto;
		max-height: 490px;
		padding: 7px;
		border: 1px solid #ddd;
		box-shadow: inset 0px 0px 3px #ddd;
		border-radius: 2px;
	}
	.step1_selectinvoices table {
		width: 100%;
	}

	.step1_selectinvoices label {
		cursor: pointer;
	}

	.step1_selectinvoices th {
		padding: 4px 5px;
		color: #aaa;
		font-weight: normal;
		border-bottom: 1px solid #ccc;
	}

	.step1_selectinvoices td {
		padding:2px 5px;
		border-bottom: 1px solid #eee;
	}

	.step1_selectinvoices tr:last-child td {
		border-bottom: none;
	}

	.step1_selectinvoices .odd td {
		background-color: #f8f8f8;
	}

	.step1_selectinvoices .selectedrow.odd td {
		background-color: #ffc !important;
	}
	.step1_selectinvoices .selectedrow.even td {
		background-color: #ffd !important;
	}

	.step1_selectinvoices td input[type=checkbox] {
		padding:5px;
		margin-top:4px;
	}



	/* CREATE INVOICE STYLES  */

	.new_invoice_container .sortable-placeholder {
		background-color: #eaeaea;
		float:left;
		display:block;
		padding:1px 0;
		margin:4px 0 5px 0;
		border-radius: 4px;
		box-shadow: inset 0px 0px 6px rgba(0,0,0,0.2);
		height: 26px;
	}
	.new_invoice_container .ui-sortable-helper {
		box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
		border-radius: 5px;
		transition:0.2s box-shadow linear;
	}
	.new_invoice_container .sorthandle {
		cursor: move;
	}

	.new_invoice_container {
		float: left;
		min-width: 750px;
		max-width: 880px;
		width: 95%;
		z-index: 10;
		position: relative;
		background-color: #fff;
		padding: 4px;
		border: 1px solid #ddd;
		margin-bottom: 80px;
		box-shadow: 0px 3px 5px rgba(0,0,0,0.15);
		border-radius: 3px;
	}

	.new_invoice_container .invoice_lines input[type=text],
	.new_invoice_container .invoice_lines input[type="number"],
	.new_invoice_container .invoice_lines input[type=password],
	.new_invoice_container .invoice_lines textarea,
	.new_invoice_container .invoice_lines select {
		margin:0;
	}

	.new_invoice_container .header {
		background-color:#f4f4f4;
		float:left;
		width:100%;
		padding-top:4px;
		padding-bottom:10px;
		border-bottom: 1px solid #ddd;
		position: relative;
	}

	.new_invoice_container .header p.description {
		color: #aaa;
		margin-left: 12px;
		margin-top: 7px;
		display: block;
		float: left;
	}

	.new_invoice_container .row.border-line {
	    border-bottom: 1px solid #ddd;
		padding-bottom: 13px;
	}

	.new_invoice_container .row {
		clear: left;
		float: left;
		margin-top: 8px;
		width: 100%;
	}

	.new_invoice_container .row-divider {
	    width: 95%;
	    border-bottom: 1px solid #e0e0e0;
	    float: left;
	    margin: 10px 10px 2px 20px;
	}

	.new_invoice_container .row .left {
		float: left;
		width: 62%;
		margin-left: 22px;
	}

	.new_invoice_container .row .left.full-size {
		width: 100%;
		margin-left: inherit;
	}

	.new_invoice_container .row .right {
		float: right;
		width: 29%;
	}

	.new_invoice_container .title {
		width:85px;
		text-align:right;
		float:left;
		margin-right:15px;
		margin-top:7px;
	}

	.new_invoice_container .title.at-top {
		float: none;
		width: 100%;
		text-align: left;
		margin: 0 0 3px 0px;
	}

	.new_invoice_container .input {
		float:left;
	}

	.new_invoice_container .reference  {
		float: left;
		width: 80%;
	}

	.new_invoice_container .reference .input {
		float:left;
		width:83%;
	}
	.new_invoice_container .introduction .input {
		float: right;
	}
	.new_invoice_container .introduction .input {
		padding: 8px 24px 8px 0px;
	}
	.new_invoice_container .introduction .input a {
		text-decoration: none;
	}
	.new_invoice_container .introduction .populated {
		float: left;
		color: #5b5;
		margin-right: 6px;
		font-size: 16px;
		margin-top: -3px;
	}
	.new_invoice_container .to .input {
		width:100%;
	}
	.new_invoice_container .left.full-size .to .input {
		width:81%;
	}

	.new_invoice_container .profile .input {
		width:90%;
	}

	.new_invoice_container .date .input input,
	.new_invoice_container .duedate .input input,
	.new_invoice_container .invoicenr .input input {
		width:100px;
	}

	.new_invoice_container .reference .input textarea {
		width:100%;
		height: 26px;
	}

	.new_invoice_container .to .selectedClientData {
		margin-top: 5px;
		color: #aaa;
	}

	.new_invoice_container .to .selectedClientData .address a {
		color: #aaa;
		text-decoration: none;
	}
	.new_invoice_container .to .selectedClientData .address a:hover {
		color: #5b5;
	}


	.new_invoice_container .to .client-options {
		float:right;
		color: #ccc;
	}

	.new_invoice_container .to .client-options a {
		text-decoration: none;
	}

	.new_invoice_container .invoicenr .invoiceNrPrefix {
		padding-right: 3px;
		font-weight: bold;
		background-color: #ddd;
		padding: 5px;
		border-bottom-left-radius: 4px;
		border-top-left-radius: 4px;
		color: #777;
	}

	/* Invoice lines */
	.new_invoice_container .invoice_lines {
		margin-top:20px;
		float:left;
		clear:both;
		width:100%;
		min-height: 350px;
	}

	.new_invoice_container .no-product-lines {
		float: left;
		width: 100%;
		margin: 30px 0;
		text-align: center;
		font-size: 16px;
		color: #ccc;
		line-height: 1.5em;
	}

	.new_invoice_container .invoice_lines .variable {
		background-color: #eee;
		padding: 0px 3px;
		border-radius: 2px;
		border: 1px solid #ddd;
		color: #777;
	}

	.new_invoice_container .invoice_lines .header_line {
		border-bottom:1px solid #ccc;
		font-weight: bold;
		padding-bottom:10px;
		float:left;
		width:100%;
	}

	.new_invoice_container .invoice_lines .line {
		padding:5px 0;
		border-bottom:1px solid #eee;
		float:left;
		width:100%;
		position: relative;
		background-color: #fff;
	}

	.new_invoice_container .invoice_lines .line .line_controls_left {
		opacity:0;
		position: absolute;
		left: 10px;
		top: 9px;
		cursor: pointer;
		font-size:14px;
		transition:0.1s opacity;
	}
	.new_invoice_container .invoice_lines .line:hover .line_controls_left {
		opacity:1;
	}

	.new_invoice_container .invoice_lines .line .line_controls_right {
		opacity:0;
		position: absolute;
		right: 10px;
		top: 8px;
		cursor: pointer;
		font-size:14px;
		transition:0.1s opacity;
	}
	.new_invoice_container .invoice_lines .line .line_controls_right a {
		text-align: center;
		width: 22px;
		display: block;
		float:left;
	}
	.new_invoice_container .invoice_lines .line:hover .line_controls_right {
		opacity:1;
	}

	.new_invoice_container .invoice_lines .product_line_input {
		padding:5px;
		float:left;
		border:1px solid #fff;
		border-radius:4px;
		width:95%;
		transition:0.1s background-color, 0.1s color;
	    word-break: break-word;
	}

	.new_invoice_container .invoice_lines div.line_function {
		padding: 2px 10px;
		float: left;
		color: #ccc;
		font-style: italic;
		border: 1px solid #ddd;
		border-radius: 4px;
		margin-top: 3px;
	}

	.new_invoice_container .invoice_lines div.line_function.bundle_start {
		border-color: #cceacc;
		color: #5b5;
	}
	.new_invoice_container .invoice_lines div.line_function.bundle_end {
		border-color: #ffc7b2;
		color: #f40;
	}
	.new_invoice_container .invoice_lines div.line_function.subtotal {
		border-color: #b2dbff;
		color: #08f;
	}

	.new_invoice_container .invoice_lines .textarea_edit {
		padding:5px;
		float:left;
		width:95%;
		border:1px solid #ddd;
		background-color:#fff;
		border-radius:4px;
		min-height: 14px;
		outline: 1px solid #08f;
	}

	.new_invoice_container .invoice_lines .external_toolbar {
		position: absolute;
		bottom: 0px;
		transition: .5s opacity;
		display: flex;
		width: 100%;
		justify-content: center;
	}

	/* This is for the button color */

	.new_invoice_container .invoice_lines .product_line_input_edit .input_field {
		float: left;
		width: 95%;
	}

	.new_invoice_container .invoice_lines .product_line_input_edit .discount_input .input_field {
		width: 25%;
		padding-right:14px;
	}

	.new_invoice_container .invoice_lines .product_line_input_edit .discount_input {
		margin-top: 4px;
		float: left;
	}

	.new_invoice_container .invoice_lines .product_line_input_edit .discount_input span.discount_input_title {
		float: left;
		display: block;
		padding: 5px 5px 5px 0;
	}

	.new_invoice_container .invoice_lines .product_line_input_edit .discount_input span.discount_input_percentage {
		float: left;
		display: block;
		padding: 5px 0;
	    margin-left: -13px;
	}

	.new_invoice_container .invoice_lines .product_line_input_edit .discount_switch:hover {
		color:var(--theme-secondary);
		border: 2px solid var(--theme-secondary);
	}

	.new_invoice_container .invoice_lines .product_line_input_edit .discount_switch {
		float: left;
		border-radius: 5px;
		border: 2px solid #ccc;
		padding: 1px 4px 1px 3px;
		text-decoration: none;
		font-weight: bold;
		margin-top: 2px;
		color:#ccc;
	}

	.new_invoice_container .invoice_lines .product_line_input_edit .discount_switch.active {
		background-color:var(--theme-secondary);
		color:#fff;
		border: 2px solid var(--theme-secondary);
	}

	.new_invoice_container .invoice_lines .product_line_input_edit .discount_switch.active:hover {
		background-color:var(--theme-primary);
		border: 2px solid var(--theme-primary);
	}

	.new_invoice_container .invoice_lines .product_lines {
		float:left;
		width:100%;
	}

	.new_invoice_container .invoice_lines .product_lines .line .amount:hover .product_line_input,
	.new_invoice_container .invoice_lines .product_lines .line .amounttext:hover .product_line_input,
	.new_invoice_container .invoice_lines .product_lines .line .description:hover .product_line_input,
	.new_invoice_container .invoice_lines .product_lines .line .price:hover .product_line_input,
	.new_invoice_container .invoice_lines .product_lines .line .tax:hover .product_line_input,
	.new_invoice_container .invoice_lines .product_lines .line .line_price:hover .product_line_input {
		background-color:var(--theme-secondary-light);
		color: var(--theme-secondary);
		cursor: pointer;
	}

	.new_invoice_container .invoice_lines .mutate_amount,
	.new_invoice_container .invoice_lines .amount,
	.new_invoice_container .invoice_lines .amounttext,
	.new_invoice_container .invoice_lines .description,
	.new_invoice_container .invoice_lines .price,
	.new_invoice_container .invoice_lines .tax,
	.new_invoice_container .invoice_lines .line_price {
		float:left;
		margin-right: 1%;
	}
	.new_invoice_container .invoice_lines .align_right {
		text-align: right;
	}

	.new_invoice_container .invoice_lines .tax select {
		background-color: #fff;
		color: var(--theme-secondary);
		border: 2px solid var(--theme-secondary);
		box-shadow: 0px 0px 6px #ccc;
		padding: 1px;
		border-radius: 5px;
	}

	.new_invoice_container .invoice_lines .tax option {
		padding: 6px 6px 6px 4px;
		border-radius: 3px;
	}

	.taxPulldownFloater {
		float: left;
		position: absolute;
		width: 150px;
		margin-top: 0px;
		margin-left: 26px;
		z-index:999;
	}

	.new_invoice_container .invoice_lines .mutate_amount {
		width:5%;
		margin-left:4%;
		margin-top: 1px;
		position: relative;
		height: 10px; /* fix because else with view percentages of 90%, the alignment isn't good */
	}

	.new_invoice_container .invoice_lines .mutate_amount .add_amount {
		position: absolute;
		top:2px;
		left:0px;
	}

	.new_invoice_container .invoice_lines .mutate_amount .substract_amount {
		position: absolute;
		top:2px;
		left:20px;
	}

	.new_invoice_container .invoice_lines .amount {
		width:5%;
		text-align: right;
	}

	.new_invoice_container .invoice_lines .no-stock {
		position: absolute;
	    left: 76px;
	    top: 6px;
	    color: #f00;
	    padding: 2px 3px;
	    cursor: pointer;
	    font-size: 1.3em;
	}
	.new_invoice_container .invoice_lines .no-stock:hover {
		color: #5b5;
	}

	.new_invoice_container .invoice_lines .amounttext {
		width:6%;
	}

	.new_invoice_container .invoice_lines .description {
		width:34%;
	}

	.new_invoice_container .invoice_lines .price {
		width:14%;
		margin-right:2%;
		text-align:right;
	}

	.new_invoice_container .invoice_lines .price .input_field.input_price {
		width:70%;
		float:right;
	}

	.new_invoice_container .invoice_lines .tax {
		width:6%;
		text-align:right;
	}

	.new_invoice_container .invoice_lines  .line_price {
		width:10%;
		text-align:right;
	}
	.new_invoice_container .invoice_lines .product_lines .line_price {
		margin-top:6px;
		font-weight: bold;
		color: var(--theme-secondary);
		text-align:right;
	}

	.new_invoice_container .invoice_lines .product_lines .mutate_amount a {
		opacity: 0;
		font-size:15px;
		margin-left:4px;
		transition:0.1s opacity;
	}

	.new_invoice_container .invoice_lines .product_lines .line:hover .mutate_amount a {
		opacity:1;
	}

	.invoice_total_container {
		margin-top:20px;
		float:right;
		background-color: var(--theme-secondary-light);
		width: 100%;
		border-top: 1px solid rgba(0,0,0,.05);
	}

	.new_invoice_container .invoice_lines .product_line_input .discount,
	.new_invoice_container .invoice_lines .product_line_input .calc-currency,
	.new_invoice_container .invoice_lines .product_line_input .lvv-country {
		color:#aaa;
		margin-top:2px;
	}

	.invoice_total_container .new_line {
		float:left;
		margin: 20px 0 0 20px;
		min-height: 100px;
	}

	.invoice_total_container .invoice_total {
		padding: 20px;
		width: 50%;
		float: right;
	}
	.invoice_total_container .invoice_total .row {
		margin:5px;
		padding:0;
		border:none;
		width:100%;
		float:left;
	}

	.invoice_total_container .invoice_total .row .total_title {
		width: 60%;
		float: left;
		text-align: right;
		margin-right: 5%;
	}
	.invoice_total_container .invoice_total .row.with-currency .total_title {
		width: 40%;
	}

	.invoice_total_container .invoice_total .row .currency {
		width: 5%;
		float: left;
		text-align: center;
	}

	.invoice_total_container .invoice_total .row .amount {
		width: 20%;
		margin-right: 5%;
		float: right;
		text-align: right;
	}
	.invoice_total_container .invoice_total .row.with-currency .amount {
		float: left;
		margin-right: 0;
	}
	.invoice_total_container .invoice_total .row.sum-line .total_title,
	.invoice_total_container .invoice_total .row.sum-line .currency,
	.invoice_total_container .invoice_total .row.sum-line .amount,
	.invoice_total_container .invoice_total .row.sum-line .currency-result {
		font-weight: bold;
		color: var(--theme-secondary);
		font-size:16px;
		padding-top:10px;
		padding-bottom:5px;
	}

	.invoice_total_container .invoice_total .row.sum-line .amount,
	.invoice_total_container .invoice_total .row.sum-line .currency-result {
		border-top:1px solid var(--theme-secondary);
	}

	.invoice_total_container .invoice_total .row.with-currency .currency-result {
		margin-right: 5%;
		width: 25%;
		float:right;
		color:#888;
		text-align: right;
	}

	.invoice_total_container .paymentCondition {
		float:left;
		clear:left;
		width:96%;
		margin:10px;
	}

	.slider-overlay {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #000;
		opacity: 0.2;
		z-index: 100;
	}

	.sidetabs {
		background-color: #f9f9f9;
		border-top: 1px solid var(--theme-secondary);
		border-bottom: 1px solid var(--theme-secondary);
		border-right: 1px solid var(--theme-secondary);
		/*box-shadow:0 0 5px #ddd;*/
		float: left;
		width: 280px;
		margin-top: 5px;
		z-index: 1;
		position: relative;
		margin-left:-281px;
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
		min-height: 600px;
		transition:0.5s margin, 0.5s box-shadow;
	}

	.sidetabs.no-animation {
		transition:none;
	}

	.sidetabs.rightside .tab .content {
		height: 100vh;
		overflow-y: auto;
	}

	.sidetabs .tab .content {
		padding:0px 15px 20px 15px;
	}

	.sidetabs .tab .content h2 {
		color: var(--theme-secondary);
		font-weight: normal;
		font-size: 21px;
		letter-spacing: -1px;
		text-align: left;
		float:left;
		width:100%;
	}

	.sidetabs .tab .content h2:nth-child(2) {
		margin-top:20px;

	}

	.sidetabs .tab .content .option-row {
		border-bottom:1px solid #ddd;
		float:left;
		width:100%;
		padding:10px 0;
	}

	.sidetabs .tab .content .option-row.last {
		border:none;
	}

	.sidetabs .tab .content .option-row .title {
		float:left;
		line-height: 28px;
	}

	.sidetabs .tab .content .option-row .switch {
		float:right;
	}

	.sidetabs .tab .content .option-row .input {
		float:right;
	}
	.sidetabs .tab .content .option-row .input.left {
		float:left;
	}

	.sidetabs .tab .content .option-row .input.new-line {
		float:left;
		clear:left;
		width:100%;
	}

	.sidetabs .tab .content .option-row .input > input {
		width: 50px;
	}

	.sidetabs .tab .content .option-row .input.large > input {
		width: 93px;
	}

	.sidetabs .tab .content .option-row .input.large > input.datepicker {
		width: 80px;
	}

	.sidetabs .tab .content .option-row .input .subinput {
		width: 70px;
		float: left;
	}

	.sidetabs .sideflaps {
		position: absolute;
		top: 3px;
		width: 38px;
		right:-39px;
	}

	.sidetabs .sideflaps .icon {
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
		background-color: var(--theme-secondary);
		color: #fff;
		margin-bottom:2px;
		padding:16px 0;
		font-size:20px;
		text-align: center;
		cursor: pointer;
		transition:0.3s all;
		z-index: 9;
		position: relative;
		text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
		box-shadow: inset -50px 0 rgba(0,0,0,0);

	}

	.sidetabs .sideflaps .icon:hover {
		color: #fff;
		margin-right: -3px;
	}
	.sidetabs .sideflaps .icon.active {
		background-color: var(--theme-secondary);
		box-shadow: 0 0 20px 2px #fff, inset -50px 0 rgba(0,0,0,.3);
		color: #fff;
		margin-right: -3px;
		margin-left: -1px;
		text-shadow: 0 0 10px #fff;
		z-index: 10;
	}

	.sidetabs .sideflaps .tab_populated {
		position: absolute;
		right: -12px;
		background-color: #F44336;
		font-size: 14px;
		border-radius: 50%;
		border: 2px solid white;
		text-shadow: none;
		top: 4px;
		color: #fff;
		width: 20px;
		text-align: center;
		height: 20px;
		line-height: 21px;
	}

	.sidetabs .close_tab {
		position: absolute;
		right: 10px;
		top: 10px;
		color: #fff;
		font-size: 14px;
		background-color: #ccc;
		padding: 4px 6px 2px 5px;
		border-radius: 3px;
		cursor: pointer;
	}
	.sidetabs .close_tab:hover {
		background-color: var(--theme-secondary);
	}

	.switch {
		position: relative;
		height: 26px;
		width: 101px;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 4px;
		border: 1px solid rgba(0,0,0,0.2);
		box-shadow: inset 1px 1px 2px rgba(0,0,0,0.05);
	}

	.switch.large {
		width: 197px;
	}

	.switch-label {
		position: relative;
		z-index: 2;
		float: left;
		width: 48px;
		line-height: 26px;
		font-size: 12px;
		color: #757575;
		text-align: center;
		cursor: pointer;
	}
	.switch.large .switch-label {
		width: 96px;
	}
	.switch-label-off {
		padding-left: 2px;
	}

	.switch-label-on {
		padding-right: 2px;
	}

	.switch-input {
		display: none;
	}
	.switch-input:checked + .switch-label {
		color: #fff;
		text-shadow: 0 1px rgba(0, 0, 0, 0.25);
		-webkit-transition: 0.15s ease-out;
		-moz-transition: 0.15s ease-out;
		-o-transition: 0.15s ease-out;
		transition: 0.15s ease-out;
	}
	.switch-input:checked + .switch-label-on ~ .switch-selection {
		left: 50px;
	}
	.switch.large .switch-input:checked + .switch-label-on ~ .switch-selection {
		left: 102px;
	}

	.switch-selection {
		display: block;
		position: absolute;
		z-index: 1;
		top: 1px;
		left: 1px;
		width: 50px;
		height: 24px;
		border-radius: 3px;
		background: var(--theme-primary);
		-webkit-transition: left 0.15s ease-out;
		-moz-transition: left 0.15s ease-out;
		-o-transition: left 0.15s ease-out;
		transition: left 0.15s ease-out;
	}
	.switch.large .switch-selection {
		width: 94px;
	}
	.switch-selection.blue {
		background: #08f;
	}

	.sidebarListContainer {
		float: left;
		overflow: auto;
		background-color: #fff;
		box-shadow: inset 1px 1px 5px #ddd;
		border: 1px solid #bbb;
		border-radius: 4px;
		width:100%;
		z-index: 1;
		position: relative;
	}
	.sidebarListContainer.products {
		height: 325px;
	}
	.sidebarListContainer.templates {
		height: 300px;
	}

	.sidebarListContainer .productListMessage {
		color: #aaa;
		text-align: center;
		margin-top: 40px;
		padding: 0 20px;
		line-height: 1.4em;
	}

	.sidebarListContainer .productListMessage .icon {
		margin-bottom: 10px;
		font-size: 26px;
	}

	#productListFilterContainer {
		width:100%;
		float:left;
		position:relative;
	}
	#productListFilter {
		width:100%;
		margin-bottom:3px;
		float:left;
	}
	#productListFilterClear {
		color: var(--theme-secondary);
		font-size: 18px;
		position: absolute;
		right: 3px;
		top: 4px;
	}

	#productListFilterClear:hover {
		color: var(--theme-primary);
		cursor: pointer;
	}


	.sidebarList {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.sidebarList li {
		margin: 0;
		padding: 0;
		float:left;
		width: 100%;
	}
	.sidebarList li a {
		text-decoration: none;
		padding: 8px 10px;
		display: block;
		border-bottom: 1px solid #eee;
		color: #777;
		float:left;
		width: 100%;
		box-sizing: border-box;
	}
	.sidebarList li a.with-option {
		width: 90%;
	}
	.sidebarList li a.list-option {
		float:left;
		width: 10%;
		padding: 8px;
	}
	.sidebarList li a.list-option.delete:hover {
		background-color: #ffd6d6;
		color: #f40;
	}
	.sidebarList li:hover a {
		background-color: var(--theme-primary);
		color:#fff;
	}

	.sidebarList li a .row {
		float:left;
		clear:left;
		width:100%;
		margin-bottom:5px;
	}

	.sidebarList li a .row .name {
		float:left;
	}

	.sidebarList li a .row .price {
		width: 75px;
		float:left;
		color: #5b5;
	}

	.sidebarList li a .row .taxes {
		float:left;
		color: #5b5;
	}

	.sidebarList li a .row .stock {
		float:right;
		text-align: right;
		color: #aaa;
	}

	.sidebarList li a .row .stock span {
		font-weight: bold;
		color: #5b5;
	}

	.sidebarList li a .row .stock span.empty {
		color: #f00;
	}

	.sidebarList li a .row .stock span.low {
		color: #F5A623;
	}

	.sidebarList li a:hover .row .price,
	.sidebarList li a:hover .row .taxes,
	.sidebarList li a:hover .row .stock,
	.sidebarList li a:hover .row .stock span {
		color: #fff;
	}

	.sidebarList li a .productcode {
		color: #888;
		background-color: #eee;
		display: inline-block;
		padding: 1px 3px;
		border-radius: 3px;
		font-weight: bold;
	}

	.sidebarList li a:hover .productcode {
		background-color: #06d;
		color:#fff;
	}

	.sidebarList li a span.price {
		color:#5b5;
	}

	.sidebarList li a:hover span.price {
		color:#fff;
	}

	.sidebarListContainer .empty {
		color:#aaa;
		text-align: center;
		margin-top:40px;
	}

	.sidebarListContainer .empty .icon {
		margin-bottom: 10px;
		font-size: 26px;
	}


	.togglListContainer {
		float: left;
		overflow: auto;
		height: 325px;
		border: 1px solid #bbb;
		background-color: #fff;
		border-radius: 4px;
		box-shadow: inset 1px 1px 5px #ddd;
		width:100%;
		margin-top: 10px;
	}

	#togglList {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#togglList li {
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #eee;
		float: left;
		width: 100%;
	}
	#togglList li.project {
		text-decoration: none;
		padding: 8px 8px 3px 8px;
		display: block;
		box-sizing: border-box;
		float: left;
		font-weight: bold;
		color: #999;
		background-color: rgba(0,0,0,0.04);
	}
	#togglList li a.entry {
		text-decoration: none;
		padding: 8px 8px 10px 0;
		display: block;
		width: 88%;
		box-sizing: border-box;
		float:right;
	}
	#togglList li a.tag {
		float:left;
		display: block;
		width: 6%;
		color: #ccc;
		margin-top: 6px;
		margin-left: 8px;
		font-size: 14px;
		box-sizing: border-box;
	}

	#togglList li.tagged a.tag {
		color:var(--theme-secondary);
	}
	#togglList li.tagged:hover a.tag {
		color:#8cf;
	}
	#togglList li.tagged a.entry .description {
		text-decoration: line-through;
		color:#ccc;
	}
	#togglList li.tagged a.entry .date,
	#togglList li.tagged a.entry .duration {
		color:#ccc;
	}

	#togglList li:hover {
		background-color: var(--theme-secondary);
	}

	#togglList li.project:hover {
		background-color: rgba(0,0,0,0.04);
	}

	#togglList li a.entry .description {
		color: #777;
		clear:both;
	}

	#togglList li a.entry .meta {
		float: left;
		width: 100%;
		margin-top: 3px;
	}

	#togglList li a.entry .date,
	#togglList li a.entry .duration {
		color: #5b5;
	}

	#togglList li:hover a.tag,
	#togglList li:hover a.entry .date,
	#togglList li:hover a.entry .duration,
	#togglList li:hover a.entry .description {
		color:#fff;
	}

	#togglList li a.entry .date {
		float:left;
	}
	#togglList li a.entry .duration {
		float:right;
	}

	#togglListLoading {
		color:#aaa;
		text-align: center;
		margin-top:40px;
	}

	#togglListLoading .icon {
		margin-bottom: 10px;
		font-size: 26px;
		color: var(--theme-secondary);
	}

	#togglListError {
		color:#f40;
		text-align: center;
		margin-top:40px;
		padding:0 20px;
	}

	#togglListError .icon {
		margin-bottom: 10px;
		font-size: 26px;
	}

	#togglListEmpty {
		color:#aaa;
		text-align: center;
		margin-top:40px;
		padding:0 20px;
	}

	#togglListEmpty .icon {
		margin-bottom: 10px;
		font-size: 26px;
	}

	#drop {
		padding: 30px 20px;
		border: 2px dashed #ccc;
		border-radius: 4px;
		text-align: center;
		font-size:16px;
		color:#7f858a;
		line-height: 1.5em;
	}

	#drop.in {
		border-color: #08f;
	}

	#drop.hover {
		border-color: #5b5;
		background-color: #cceacc;
	}

	#drop.fade {
		-webkit-transition: all 0.2s ease-out;
		-moz-transition: all 0.2s ease-out;
		-ms-transition: all 0.2s ease-out;
		-o-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;
	}

	#drop button{
		display:inline-block;
		margin-top:12px;
		width:150px;
	}

	#drop input{
		display:none;
	}

	#upload {
		float:left;
		clear:left;
		width: 100%;
	}
	#upload ul{
	    list-style:none;
	    margin-left: -40px;
	    float:left;
	    width:100%;
	    margin-top: 0px;
	}

	#upload ul li{
	    padding:0;
	    position: relative;
	}

	#upload ul li .progressbar_container {
		border: 1px solid #ddd;
		width: 90%;
		height: 20px;
		background-color: #fff;
		position: relative;
		margin-bottom: 5px;
		border-radius: 4px;
	}

	#upload ul li .progressbar_container .progressbar {
		background-color: #fff;
		margin-top: 1px;
		margin-left: 1px;
		transition: 0.2s all;
		height: 18px;
		max-width: 98%;
	}
	#upload ul li.working .progressbar_container p,
	#upload ul li .progressbar_container a {
		width: 213px;
		display: inline-block;
		white-space: nowrap;
		overflow: hidden !important;
		text-overflow: ellipsis;
	}

	#upload ul li.working .progressbar_container .progressbar {
		background-color: #ddd;
		border-right: 2px solid #08f;
	}

	#upload ul li.working .progressbar_container p {
		color: #999;
	}
	#upload ul li .progressbar_container p {
		overflow: hidden;
		white-space: nowrap;
		color: #5b5;
		position: absolute;
		top: 3px;
		left: 6px;
	}
	#upload ul li .progressbar_container a {
		text-decoration: none;
	}
	#upload ul li .progressbar_container a:hover {
		color:#08f;
		text-decoration: underline;
	}

	#upload ul li  .progressbar_container span {
		position: absolute;
		top: 0px;
		right: -17px;
		cursor: pointer;
		font-weight: bold;
		font-size: 14px;
		color: #08f;
	}

	#upload ul li.error .progressbar_container p {
	    color:red;
	}

	#upload .progressbar_container_total {
		border: 2px solid #fff;
		width: 100%;
		height: 20px;
		background-color: #fff;
		position: relative;
		margin-bottom: 5px;
		float: left;
		overflow: hidden;
		border-radius: 15px;
		box-shadow: 0px 0px 0 1px #ddd;
	}

	#upload .progressbar_container_total .progressbar {
		background-color: #99CFFF;
		transition: 1s all;
		height: 100%;
	}

	#upload  .progressbar_container_total p {
		overflow: hidden;
		color: #666;
		position: absolute;
		top: 3px;
		text-align: center;
		width: 100%;
		font-weight: bold;
		padding: 0;
		text-shadow: 1px 1px 0px #fff;
	}

	.sidetabs p.description {
		color: #888;
		line-height: 1.6em;
		padding-top: 10px;
		padding-bottom: 15px;
		margin-bottom:0;
		float: left;
		width: 100%;
	}
	.sidetabs p.description.no-padding {
		padding-top: 0;
	}
	.text-center {
		text-align: center !important;
	}

	.tabs {
		float:left;
		width:100%;
		position:relative;
	}

	.tabs .subnavbar {
		float:left;
		width:100%;
		margin-bottom:5px;
	}
	.tabs .subnavbar .subnavtitle {
	    float: left;
	    width: 140px;
	    color: #aaa;
	    padding: 5px;
	}
	.tabs .subnavbar ul {
		list-style:none;
		margin:0;
		padding:0 0 5px 0;
		border-bottom: 1px solid #eee;
		float: left;
		width: 100%;
	}
	.tabs .subnavbar:last-of-type ul {
		border-bottom: none;
		padding:0;
	}
	.tabs .subnavbar ul li a {
		float:left;
		padding:5px 15px;
		margin-right:5px;
		color: var(--theme-secondary);
		background-color:#f6f6f6;
		text-decoration: none;
		border-radius: 4px;
		transition: .2s background-color, .2s color;
	}
	.tabs .subnavbar ul li a:hover {
		text-decoration: underline;
		background-color: #eaeaea;
	}
	.tabs .subnavbar ul li a.active {
		color:#fff;
		background-color: var(--theme-secondary);
		text-decoration:none;
	}

	.tabs .conditionTab {
		float:left;
		width: 550px;
	}

	.tabs .content {
		float: left;
		width: 100%;
		line-height: 16px;
		border: 1px solid #ddd;
		box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.08);
		border-radius: 5px;
		overflow: hidden;
		background-color: #fff;
		padding: 1.5em;
		box-sizing: border-box;
		margin-bottom: 5em;
	}

	.tabs .content h2 {
		color: var(--theme-primary);
		font-size: 24px;
		font-weight: normal;
		float: left;
		width: 100%;
		margin: 0;
		line-height: 1.4em;
		padding-top: 0.7em;
		padding-bottom: 0.5em;
	}

	.tabs .content h2:first-of-type {
		padding-top: 0em;
	}

	.tabs .content .tabs_entry {
		border-top: 1px solid #eee;
		width: 100%;
		padding: 2em 0;
		display: flex;
	}

	.tabs .content .tabs_entry:last-of-type {
		padding-bottom: 0;
	}

	.tabs .content h3 {
		max-width: 180px;
		min-width: 180px;
		margin: 0;
		padding-right: 16px;
		box-sizing: border-box;
		font-size: 14px;
		font-weight: 500;
		line-height: 1.3em;
		color: #888;
		text-align: right;
	}
	.tabs .content h3 .desc {
		font-size:11px;
		font-weight:normal;
		color:#999;
		margin-top:15px;

	}
	.tabs .content h4 {
		margin: 3px 0;
		line-height: 16px;
	}
	.tabs .content .set {
		width: 550px;
		padding-left: 20px;
		border-left: 1px solid #eee;
		float: left;
	}

	.tabs .content .set .extra-fields {
		margin: 5px 0 20px 22px;
		padding: 3px 12px;
		background-color: var(--theme-secondary-light);
		border-radius: 6px;
		float: left;
		width: 100%;
	}

	.tabs .content .set .extra-fields.no-spacing {
		margin-left: 0px;
	}

	.tabs .content .set .extra-fields.warning {
		background-color: #ffebee;
	    border: 1px solid #f44336;
	}

	.tabs .content .set.large-width {
		width: 100%;
		max-width: 840px;
	}

	.tabs .content .set.large-width p.desc {
		width: 550px;
	}

	.tabs .content p {
		margin:3px 0;
	}

	.inline-warning {
		color: #d40;
		background-color: #fceee8;
		padding: 6px 6px 6px 30px;
		border-radius: 4px;
		position: relative;
		margin-bottom:10px;
		float: left;
		width: 100%;
		box-sizing: border-box;
	}

	.inline-warning:before {
		font-family: FontAwesome;
		content: "\f071";
		display: inline-block;
		padding-right: 3px;
		vertical-align: middle;
		position: absolute;
		left: 9px;
		top: 9px;
	}

	.inline-warning p {
		color: #d40 !important;
		margin-bottom: 0 !important;
	}

	.inline-success {
		background-color: #d4edda;
		border: 1px solid #c0dec7;
		color: #155724;
		padding: 6px 6px 6px 30px;
		border-radius: 4px;
		position: relative;
		margin-bottom:10px;
		float: left;
		width: 100%;
		box-sizing: border-box;
	}

	.inline-success:before {
		font-family: FontAwesome;
		content: "\f00c";
		display: inline-block;
		padding-right: 3px;
		vertical-align: middle;
		position: absolute;
		left: 9px;
		top: 8px;
	}

	.inline-success p {
		color: #155724 !important;
		margin-bottom: 0 !important;
	}

	#hosting-promo {
		background-color: #f0f8ff;
		padding: 4px 10px;
		border-radius: 4px;
		position: relative;
		margin-bottom:10px;
		border: 1px solid #96c7fd;
	}

	#hosting-promo .hide {
		position: absolute;
		right: 10px;
		top: 9px;
	}

	#hosting-promo .hosting-promo-title {
		font-weight: bold;
		text-align: center;
		line-height: 2em;
	}

	#hosting-promo .hosting-promo-box {
		padding: 8px 10px;
		border: 1px solid #CCE7FF;
		background-color: #F9FCFF;
		border-radius: 5px;
	}

	#hosting-promo .hosting-promo-box .hosting-promo-domain-name {
	    background-color: #ffecb3;
	    padding: 1px 2px;
	    margin: 0px 1px;
	    border-radius: 4px;
	}

	#hosting-promo .hosting-promo-box table {
		width: 100%;
		table-layout: fixed;
	}

	#hosting-promo .hosting-promo-box table td {
		padding-bottom: 4px;
		overflow: hidden;
	    text-overflow: ellipsis;
	}

	#hosting-promo .hosting-promo-box .no-own-domain {
		font-style: italic;
		color: #aaa;
	}

	#hosting-promo .hosting-promo-box i {
		color: #08f;
	}


	#hosting-promo .hosting-promo-subtitle {
		text-align: center;
		line-height: 2.5em;
	}

	#hosting-promo .hosting-promo-disclaimer {
		text-align: center;
		font-style: italic;
		color: #777;
	}

	#hosting-promo .hosting-promo-button {
		text-align: center;
		margin: 18px;
	}


	.tabs .content .horizontal p {
		margin: 3px 20px 3px 0px;
		width: auto;
		float: left;
	}

	.tabs .content .horizontal {
		float:left;
		width:100%;
	}

	.tabs .content p.desc {
		color:#999;
		margin: 10px 0 15px 0;
	}

	.tabs .content p.desc:first-child {
		margin-top: 0;
	}
	.tabs .content ul.desc {
		color:#999;
	}

	.tabs .content p.desc.alert {
		color: red;
	}
	.tabs .content p.desc_large {
		color:#444;
		margin: 10px 0 15px 0;
		width:650px;
	}
	.tabs .content p.padding {
		padding-left:22px;
	}
	.tabs .content p.no-top-margin {
		margin-top:0;
	}
	.tabs .content .upload_settings_image {
		float: left;
	}
	.tabs .content .dropSettingImage {
		float:left;
		height:240px;
		width:470px;
		margin-right:10px;
		-moz-border-radius: 8px;
		-khtml-border-radius: 8px;
		-webkit-border-radius: 8px;
		border-radius:8px;
		border: 2px dashed #ddd;
		text-align: center;
		padding: 30px;
		box-sizing: border-box;
		position: relative;
		display: flex;
	}

	.tabs .content .dropSettingImage.in {
		border-color: #08f;
	}

	.tabs .content .dropSettingImage.hover {
		border-color: #5b5;
		background-color: #cceacc;
	}

	.tabs .content .dropSettingImage .uploadHelper {
		margin: auto;
	}

	.tabs .content .dropSettingImage .uploadedImage {
		margin: auto;
	}

	.tabs .content .dropSettingImage .uploadProgress {
		margin: auto;
	}

	.tabs .content .dropSettingImage .uploadProgress i {
		font-size: 32px;
		color: #08f;
	}

	.tabs .content .dropSettingImage .uploadedImage img.border {
		border: 3px solid white;
		box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
	}

	.tabs .content .dropSettingImage.fade {
		-webkit-transition: 0.2s background-color, 0.2s border;
		-moz-transition: 0.2s background-color, 0.2s border;
		-ms-transition: 0.2s background-color, 0.2s border;
		-o-transition: 0.2s background-color, 0.2s border;
		transition: 0.2s background-color, 0.2s border;
	}


	.tabs .content .dropSettingImage button {
		display:inline-block;
		margin-top:12px;
		width:150px;
	}

	.tabs .content .dropSettingImage input {
		display:none;
	}

	.tabs .content .dropSettingImage p {
		margin: 15px auto;
		color: #bbb;
		text-align: center;
		width: 100%;
		line-height: 1.2em;
	}

	.tabs .content .dropSettingImage p.draghere {
		font-size: 1.5em;
		margin-bottom: 0;
	}

	.tabs .content .dropSettingImage .deleteUploadedImage a {
		position: absolute;
		right: 8px;
		top: 8px;
		background-color: #c00;
		padding: 8px 12px;
		border-radius: 5px;
		box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
		transition: .3s background-color;
	}

	.tabs .content .dropSettingImage .deleteUploadedImage a:hover {
		background-color: #f00;
	}

	.tabs .content .dropSettingImage .deleteUploadedImage a i {
		color: #fff;
		font-size: 18px;
	}

	.tabs .content .reminders {
		float: left;
		width: 750px;
		position: relative;
		margin-left: 10px;
	}

	.tabs .content .reminders p {
		color: #777;
	}

	.tabs .content .reminders .timeline {
		position: absolute;
		height: 88%;
		border-left: 2px dashed #ddd;
		left: 35px;
		top: 20px;
		z-index: 0;
	}

	.tabs .content .reminders .reminder {
		float: left;
		width: 100%;
		margin-bottom: 1em;
		position: relative;
		color: #777;
		padding: 10px;
		border-radius: 16px;
		margin-left: 50px;
	}

	.tabs .content .reminders .reminder .icon {
		float: left;
		clear: both;
		width: 55px;
		height: 55px;
		background-color: #fff;
		border: 2px solid #08f;
		margin-bottom: 2px;
		border-radius: 50%;
		color: #08f;
		text-align: center;
		font-size: 24px;
		line-height: 2.3em;
		margin-right: 20px;
		margin-left: -55px;
	    margin-top: 6px;
		box-shadow: 0px 2px 8px rgba(0,0,0,0.1);
	}

	.tabs .content .reminders .reminder.small .icon {
		width: 30px;
		height: 30px;
		font-size: 14px;
		margin-left: -41px;
		margin-right: 10px;
	}

	.tabs .content .reminders .reminder.green .icon,
	.tabs .content .reminders .reminder.green .text span {
		color: #5b5;
		border-color: #5b5;
	}

	.tabs .content .reminders .reminder.orange .icon,
	.tabs .content .reminders .reminder.orange .text span {
		color: #F5A623;
		border-color: #F5A623;
	}

	.tabs .content .reminders .reminder.gray .icon,
	.tabs .content .reminders .reminder.gray .text span {
		color: #aaa;
		border-color: #aaa;
	}

	.tabs .content .reminders .reminder .text {
		float: left;
		margin-top: 12px;
	}

	.tabs .content .reminders .reminder .text span {
		font-size: 14px;
		color: #08f;
	}

	.tabs .content .reminders .reminder.small .text {
		margin-top: 11px;
		font-size: 12px;
	}

	.tabs .content .reminders .reminder.gray-box {
		border: 1px solid #eee;
		background-color: #f4f4f4;
	}

	.tabs .content .reminders .reminder.gray-box .delete {
		position: absolute;
		top: 11px;
		right: 14px;
		font-size: 14px;
		color: #bbb;
	}

	.tabs .content .reminders .reminder.gray-box .delete:hover {
		color: #08f;
		cursor: pointer;
	}

	.tabs .content .reminders .reminder.gray-box .options {
		float: right;
		width: 500px;
		margin-top: 5px;
	}

	.tabs .content .reminders .reminder.gray-box .options .row {
		float: left;
		width: 100%;
	    margin-bottom: 10px;
	}

	.tabs .content .reminders .reminder.gray-box .options .row .title {
		float: left;
		width: 100px;
		margin-top: 5px;
		text-align: right;
		margin-right: 12px;
	}

	.tabs .content .reminders .reminder.gray-box .options .row .remtext {
		float: left;
		width: 300px;
	}

	.tabs .content .reminders .reminder.gray-box .options .row .remtext > input {
		width: 30px;
	}

	.tabs .content .reminders .reminder.gray-box .options .row .remtext > span:hover {
		color: #08f;
		cursor: pointer;
	}

	.tabs .content .reminders .reminder.gray-box .options .row .remtext .edit {
		font-size: 14px;
		margin-left: 10px;
	}

	.tabs .content ul.switcher {
		list-style: none;
		padding:0;
		margin: 0;
	}

	.tabs .content ul.switcher li {
		padding: 10px;
		margin: 0 0 7px 0;
		float: left;
		border-radius: 4px;
		border:1px solid transparent;
		transition: .3s background-color, .3s border-color;
	}

	.tabs .content ul.switcher li:hover {
		background-color: var(--theme-secondary-light);
	}

	.tabs .content ul.switcher li.selected {
		border: 1px solid var(--theme-secondary);
		background-color: var(--theme-secondary-light);
	}

	.tabs .content ul.switcher li label {
		cursor: pointer;
		margin-left: 35px;
		display: block;
		line-height: 16px;
	}

	.tabs .content ul.switcher li input {
		float: left;
	}

	.tabs textarea {
		width:98%;
		height:100px;
	}
	.tabs label {
		display: inline-block;

	}
	.tabs input[type=text] {
		width:90%;
	}
	.tabs select.small,
	.tabs input[type=text].small {
		width:150px;
	}
	.tabs select.custom-select.medium,
	.tabs select.medium,
	.tabs input[type=text].medium,
	input[type=password].medium {
		width:240px;
	}
	.tabs select.custom-select.medium_small,
	.tabs select.medium_small,
	.tabs input[type=text].medium_small {
		width:70px;
	}
	.tabs select.custom-select.extra_small,
	.tabs select.extra_small,
	.tabs input[type=text].extra_small {
		width:35px;
	}
	.tabs input[type=checkbox] {
		vertical-align: top;
		position: relative;
		top: -2px;
	}
	.tabs span.fixed {
		display: inline-block;
		width: 145px;
	}
	.tabs #save_indicator {
		background: url(/client/includes/img/ajax-loader.gif) no-repeat scroll 8px 7px transparent;
		color: #08f;
		font-weight: bold;
		position: fixed;
		right: 20px;
		top: 58px;
		border: 1px solid #08f;
		padding: 10px 10px 10px 30px;
		background-color: #fff;
		border-radius: 4px;
		box-shadow: 0 0 4px rgba(0,0,0,0.2);
		z-index:999;
	}
	.tabs #save_indicator.done {
		background-image: none;
		border: 1px solid #5b5;
		color:#5b5;
	}
	div#save_indicator.done:before {
		content: "\f00c";
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		position: absolute;
		font-size: 20px;
		color: #5b5;
		margin-left: -24px;
		margin-top: -5px;
	}
	.tabs .default {
		color:#777;
		margin-left:12px;
	}

	.tabs #font_preview{
		background-image: url(/client/includes/img/font_preview.gif);
		background-position: 0 -170px;
		background-repeat: no-repeat;
		float: left;
		font-size: 14px;
		height: 23px;
		margin: 20px 0;
		width: 450px;
	}

	.connections {
		width: 100%;
		border-bottom: 1px solid #eee;
		margin-bottom: 15px;
		padding-bottom: 15px;
		clear: both;
		float: left;
	}

	.connections:last-child {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.connections .icon {
		float:left;
		width: 44px;
	}
	.connections .icon i {
		font-size: 28px;
		color: #08f;
	}
	.connections .provider {
		font-weight: bold;
		font-size:12px;
		float:left;
		width: 210px;
		margin-top:8px;
	}
	.connections .status {
		margin-top:8px;
		font-size:12px;
		float:left;
		width:120px;
	}
	.connections .action {
		margin-top:8px;
		font-size:12px;
		float:left;
		width:130px;
	}
	.connections .status.red {
		color: #ccc;
	}
	.connections .status.green {
		color: #5b5;
	}

	.connections .connected-accounts {
		float: left;
		clear: both;
		width: 100%;
	}
	.connections .connected-accounts.with-margin {
		margin-left: 44px;
		width: calc(100% - 44px);
	}
	.connections .connected-accounts .connected-account {
		float: left;
		clear: left;
		width: 100%;
		margin: 0px 0px;
		border-bottom: 1px solid #eee;
		padding: 7px 0;
	}

	.connections .connected-accounts .connected-account span {
		color: #aaa;
		margin-left: 1em;
	}

	.connections .connected-accounts .connected-account:last-child {
		border-bottom: none;
	}

	.image_picker_selector p {
		width:auto !important;
		text-align: center;
	}

	.image_picker_selector .thumbnail {
		cursor:pointer;
	}

	.image_picker_selector .thumbnail.selected p {
		color:#fff;
	}

	.image_picker_image {
		border: 1px solid #ccc;
		box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
		border-radius: 3px;
	}

	ul.thumbnails.image_picker_selector li .thumbnail {
		border:none !important;
		border-radius: 3px;
		position:relative;
		transition: 0.3s all;
	}

	ul.thumbnails.image_picker_selector li .thumbnail.selected {
		background: var(--theme-secondary) !important;
	}

	.templatePreviewButton {
		position: fixed;
		top: 120px;
		right: 0px;
		width: 106px;
		background-color: var(--theme-secondary);
		z-index: 999;
		text-align: center;
		border-top: 1px solid #fff;
		border-left: 1px solid #fff;
		border-bottom: 1px solid #fff;
		box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
		padding: 18px;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}

	.templatePreviewButton p {
		color: #fff;
	}

	.attachment-table .right-border {
		border-right:1px solid #eee;
	}

	.attachment-table .title {
		color: var(--theme-primary);
		font-weight: bold;
		font-size:14px;
		padding-left:7px;
	}

	.attachment-table .available {
		color: #999;
		padding-left:7px;
	}

	.attachment-table ul.filelist {
		list-style: none;
		margin: 1em 0 0 0;
		padding: 0;
	}

	.attachment-table ul.filelist li {
		padding: 4px;
		background-color: #fff;
		border: 1px solid #fff;
		border-radius: 4px;
		width: 100%;
		float: left;
		transition: .3s background-color, .3s border-color;
	}

	.attachment-table ul.filelist li span.filename {
		width: 230px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: block;
		float: left;
	}

	.attachment-table ul.filelist li:hover {
		border: 1px solid #BFE1FF;
		background-color: #e6f3ff;
	}

	.attachment-table ul.filelist li span.trash {
		transition: .3s opacity;
		font-size:14px;
		float: right;
	}

	.attachment-table ul.filelist li:hover span.trash {
		opacity: 1 !important;
	}


	/* DASHBOARD */

	.dashboardcontainer {
		float:left;
		width:100%;
	}
	.dashboardbox {
		float:left;
		position:relative;
		clear:both;
		width:100%;
		margin-bottom:25px;
	}
	.dashboardbox .title {
		font-size:16px;
		font-weight:bold;
		padding-bottom:4px;
		color:var(--theme-secondary);
		float:left;
		border-bottom:2px solid #ddd;
		margin-bottom: 10px;
	}
	.dashboardbox .content {
		color:#444;
		overflow: auto;
		clear:both;
	}

	.dashboardbox .content .newsdate,
	.dashboardbox .content .newsdate_read {
		margin-right:5px;
		-moz-border-radius: 2px;
		-khtml-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius:2px;
	}
	.dashboardbox .content .newsdate {
		color:var(--theme-primary);
		font-weight: bold;
	}
	.dashboardbox .content .newsdate_read {
		color:#777;
	}

	.notifications .content {
		background-color: #fff;
		box-shadow: 0px 2px 3px rgba(0,0,0,0.1);
		border-radius: 3px;
		border: 1px solid #ddd;
		line-height: 16px;
	}
	.notifications .content table {
	    border-collapse: collapse;
	    width: 100%;
	}
	.dashboardbox.notifications table td {
		padding: 7px 10px 6px 16px;
		border-bottom:1px solid #eee;
		transition: .2s background-color;
	}
	.dashboardbox.notifications table tr:last-of-type td {
		border-bottom: none;
	}
	.dashboardbox.notifications table td a {
		margin-left: 12px;
	}
	.dashboardbox.notifications table td:hover {
		background-color:#f8f8f8;
	}

	.dashboardbox.notifications .level {
		position: relative;
	}
	.dashboardbox.notifications .level .level-indicator {
		width: 2px;
		position: absolute;
		bottom: 3px;
		top: 3px;
		left: 3px;
	}
	.dashboardbox.notifications .level.level-0 .level-indicator {
		background-color: #5b5;
	}
	.dashboardbox.notifications .level.level-1 .level-indicator {
		background-color: #ff5722;
	}
	.dashboardbox.notifications .level.level-2 .level-indicator {
		background-color: #ff5722;
	}
	.dashboardbox.notifications .level.level-2 {
		font-weight: bold;
		color: #ff5722;
		background-color: #fff1ed;
	}

/* /START/----------- PAYMENT PAGE 2016 NEW ----------- */


	#payments .row {
		max-width: 860px;
		padding: 1em 0;
	}

	#payments .row.padding {
		padding: 4em 0;
	}

	#payments .row.padding-only-top {
		padding-top: 4em;
	}

	#payments p {
		font-family: 'Fira Sans', sans-serif;
		font-size: 16px;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		line-height: 1.4em;
	}

	#payments .header {
		border-bottom-width: 1px;
		border-bottom-style: solid;
		padding-top:40px;
	}

	@media screen and (max-width: 39.9375em) {
		#payments .header {
			padding-top:0px;
		}
	}

	#payments .header .sender {
		margin-top:16px;
	}

	#payments a {
		color: #08f;
		text-decoration: none;
	}
	#payments a.button.primary {
		color: #fff;
	}

	#payments a:hover {
		color: #5b5;
	}

	#payments h1 {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-family: 'Fira Sans', sans-serif;
		font-size: 28px;
		margin: 0;
		padding: 0;
		font-weight: bold;
		line-height: 32px;
	}

	#payments h2 {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-family: 'Fira Sans', sans-serif;
		color: #777;
		font-size: 28px;
		font-weight: normal;
		margin: 0;
		padding: 0;
		line-height: 32px;
	}

	#payments h3 {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-family: 'Fira Sans', sans-serif;
		font-size: 18px;
		font-weight: bold;
		margin: 0 0 8px 0;
		padding: 0;
		color: #444;
	}

	#payments input, #payments textarea {
		font-family: 'Fira Sans', sans-serif;
		font-size: 14px;
		padding: 8px;
	}

	#payments .header .open-amount {
		background-color: #fff;
		border-radius: 10px;
		border-width: 3px;
		border-style: solid;
		margin-bottom: 10px;
		padding: 4px 10px;
		float: left;
		width: 100%;
	}

	#payments .header .open-amount .title {
		font-size: 16px;
		text-align: center;
		border-bottom-width: 1px;
		border-bottom-style: solid;
		padding: 10px 0 8px 0;
		margin: 0;
	}

	#payments .header .open-amount .amount {
		font-size: 32px;
		font-weight: bold;
		text-align: center;
		margin: 2px 0 0 0;
		padding: 0;
	}

	#payments .header .open-amount.paid {
		border-color: #5b5;
		text-align: center;
		padding: 14px 10px;
	}

	#payments .header .open-amount.paid i {
		color: #5b5;
		font-size: 40px;
	}
	#payments .header .open-amount.paid p {
		color: #5b5;
		font-size: 18px;
		text-align: center;
		margin: 10px 0 0 0;
		padding: 0;
	}
	#payments .header .open-amount.uncollectible {
		border-color: #bbb;
		text-align: center;
		padding: 14px 10px;
	}

	#payments .header .open-amount.uncollectible i {
		color: #bbb;
		font-size: 40px;
	}
	#payments .header .open-amount.uncollectible p {
		color: #bbb;
		font-size: 18px;
		text-align: center;
		margin: 10px 0 0 0;
		padding: 0;
	}

	#payments .header .open-amount.collection {
		border-color: #9c27b0;
	}

	#payments .header .open-amount.collection p {
		color: #9c27b0;
	}

	#payments .header .quotation-status {
		background-color: #fff;
		border-radius: 10px;
		border-width: 3px;
		border-style: solid;
		margin-bottom: 10px;
		text-align: center;
		padding: 4px 10px;
		float: left;
		padding: 14px 10px;
		width: 100%;
	}

	#payments .header .quotation-status i {
	    margin-top: 3px;
		font-size: 40px;
	}
	#payments .header .quotation-status p {
		font-size: 18px;
		text-align: center;
		margin: 10px 0 0 0;
		padding: 0;
	}

	#payments .header .quotation-status.progress i { color: #9c27b0; }
	#payments .header .quotation-status.progress p { color: #9c27b0; }
	#payments .header .quotation-status.progress { border-color: #9c27b0; }

	#payments .header .quotation-status.completed i { color: #2e7d32; }
	#payments .header .quotation-status.completed p { color: #2e7d32; }
	#payments .header .quotation-status.completed { border-color: #2e7d32; }

	#payments .header .quotation-status.billable i { color: #F5A623; }
	#payments .header .quotation-status.billable p { color: #F5A623; }
	#payments .header .quotation-status.billable { border-color: #F5A623; }

	#payments .header .quotation-status.declined i { color: #D0021B; }
	#payments .header .quotation-status.declined p { color: #D0021B; }
	#payments .header .quotation-status.declined { border-color: #D0021B; }

	#payments .header .quotation-status.overdue i { color: #ff5722; }
	#payments .header .quotation-status.overdue p { color: #ff5722; }
	#payments .header .quotation-status.overdue { border-color: #ff5722; }

	#payments .header .quotation-status.sent i { color: #08f; }
	#payments .header .quotation-status.sent p { color: #08f; }
	#payments .header .quotation-status.sent { border-color: #08f; }

	#payments .header .quotation-status.approved i { color: #5b5; }
	#payments .header .quotation-status.approved p { color: #5b5; }
	#payments .header .quotation-status.approved { border-color: #5b5; }

	#payments .header .quotation-status.open i { color: #F5A623; }
	#payments .header .quotation-status.open p { color: #F5A623; }
	#payments .header .quotation-status.open { border-color: #F5A623; }

	@media screen and (max-width: 39.9375em) {
		#payments .header .open-amount {
			margin-top:24px;
		}
		#payments .header .open-amount .title {
			text-align: left;
			float: left;
			border: none;
		}
		#payments .header .open-amount .amount {
			float: right;
		}
		#payments .document-overview,
		#payments .pay-section {
			margin: 10px;
		}
		#payments .right-left {
			border-right-width: 0px !important;
		}

		#payments .document-overview .document-line .amount p {
			text-align: left !important;
		}

		#payments .document-overview .document-line div {
		    margin-bottom: 2px;
		}

		#payments .document-overview .document-line {
		    border-bottom:1px solid #eee;
		    padding-top: 12px !important;
		}
	}

	#payments .status-message p {
		border-width: 2px;
		border-style: solid;
		border-radius: 6px;
		padding: 10px 10px 10px 50px;
		font-weight: bold;
		box-shadow: inset 0px 0px 0px 2px #fff;
		text-align: center;
		position: relative;
	}

	#payments .status-message p:before {
		font-family: 'FontAwesome';
		font-size: 23px;
		font-weight: normal;
		-webkit-font-smoothing: antialiased;
		position: absolute;
		left: 12px;
		top: 10px;

	}

	#payments .status-message.fail p {
		border-color: #f00;
		background-color: #fdd;
	}

	#payments .status-message.fail p:before {
		content: '\f071';
		color: #f00;
	}

	#payments .status-message.success p {
		border-color: #5b5;
		background-color: #e3f3e3;
	}

	#payments .status-message.success p:before {
		content: '\f058';
		color: #5b5;
	}

	#payments .pay-section {
		border-width: 1px;
		border-style: solid;
		border-radius: 8px;
		padding: 15px 0px;
	}

	#payments .pay-section form p {
		margin-top: 16px;
		margin-bottom: 0;
	}

	#payments .pay-section form {
		margin-bottom: 20px;
		float: left;
	}

	#payments .pay-section ul {
		padding: 0;
		margin: 0 0 24px 0;
		float: left;
		clear: left;
		width: 100%;
	}

	#payments .pay-section ul li {
		float: left;
		list-style: none;
		margin-right:8px;
		margin-bottom:8px;
		text-align: center;
	}

	#payments .pay-section ul li a {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-family: 'Fira Sans', sans-serif;
		border-width: 1px;
		border-style: solid;
		border-radius: 8px;
		float: left;
		background-color: #fff;
		width: 100px;
		height: 100px;
		padding: 14px 4px;
		transition: .2s all;
		text-decoration: none;
	}

	#payments .pay-section ul li a:active {
		margin-top: 2px;
		margin-bottom: -2px;
		box-shadow: none !important;
	}

	#payments .pay-section ul li a span {
	    display: block;
		margin-top: 5px;
		text-align: center;
		color: #555;
	}

	#payments .pay-section .sepa-qr {
		border-radius: 5px;
		border-width: 1px;
		border-style: solid;
		float: left;
		margin-right: 18px;
	}

	#payments .right-left {
		border-right-width: 1px;
		border-right-style: solid;
	}

	#payments table {
		width: 100%;
	}

	/* overwrite foundation styles */
	#payments table tr {
		background-color: transparent !important;
	}
	#payments table tbody {
		border: none;
		background: none;
	}

	#payments table tbody td {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-family: 'Fira Sans', sans-serif;
		font-size: 16px;
		color: #444;
		padding: 2px;
		vertical-align: top;
	}

	#payments .align-right table td:nth-child(2) {
		text-align: right;
	}

	#payments .more-open-documents {
		font-weight: bold;
		color: #F2994A;
		border-top: 1px solid #eee;
		padding-top: 0.8em;
	}

	#payments .more-open-documents a {
		font-weight: normal;
		margin-left: 1em;
	}

	#payments .document-overview {
		border-top: 1px solid #ddd;
		padding: 2em 0px;
		margin-top: 5em;
	}

	#payments .document-overview h3 {
		color: #555555;
	}

	#payments .document-overview h4 {
		color: #777777;
	}

	#payments .document-overview .row {
		padding: 0;
	}

	#payments .document-overview .document-line {
		padding:0.5em;
		transition: .2s background-color;
	}

	#payments .document-overview .document-line.current {
		background-color: #FFF9C4;
	}

	#payments .document-overview .document-line p {
		margin: 0;
	}

	#payments .document-overview .document-line:hover {
		background-color: #E8F4FF;
	}

	#payments .document-overview .document-line .document-number i {
	    margin-right: 10px;
	    font-weight: normal;
	}

	#payments .document-overview .document-line .document-number i.gray {
	    color: #aaa;
	}

	#payments .document-overview .document-line .amount p {
		text-align: right;
   }

	#payments .document-overview .document-line .status i {
		width: 22px;
	}

	#payments .document-overview .document-line .status.open p {
		color: #F2994A;
		font-weight: bold;
	}

	#payments .document-overview .document-line .status.too-late p {
		color: #EB5757;
		font-weight: bold;
	}

	#payments .document-overview .document-line .status.paid p {
		color: #5b5;
	}

	#payments .document-overview .document-line .status.uncollectible p {
		color: #bbb;
	}

	#payments .document-overview .show-all {
		text-align: center;
		margin: 2em 0 1em 0;
	}

	#payments .row .security {
		background-color: #FFFCF7;
		border:2px solid #FEF6EA;
		border-radius: 8px;
		padding: 10px;
	}

	#payments .row .security i {
		color: #F5A623;
		font-size: 20px;
		margin-bottom: 10px;
		float: left;
	}

	#payments .row .security p {
		color: #9B9B9B;
		font-size: 12px;
		padding: 0px 0px 0px 25px;
		margin-bottom: 0;
		line-height: 1.6em;
	}

	#payments .download-options {
		background-color: #f4f4f4;
		border-radius: 8px;
		padding: 20px 30px;
		float:left;
		width: 100%;
	}

	#payments .download-options .download-option {
		clear: left;
		margin-bottom: 10px;
	}

	#payments .download-options .download-option:last-of-type {
		margin-bottom: 0px;
	}

	#payments .download-options .download-option .icon {
		color: #999;
		width: 28px;
		float: left;
		font-size: 16px;
	}

	#payments .download-options .download-option .link {
		font-size: 16px;
	}

	#payments .powered-by {
		border-top:1px solid #eee;
	}

	#payments .powered-by i {
		color: #aaa;
		margin-right: 1em;
	}

	#payments .powered-by p {
		text-align: center;
		font-size: 12px;
		padding-top:12px;
	}

	#payments .powered-by p a {
		color: #aaa;
	}

	#payments .powered-by p a:hover {
		color: #08f;
		text-decoration: underline;
	}

	#payments .signButton {
		background-color: #08f;
		border: none;
		border-radius: 5px;
		padding: 10px 40px;
		color: #fff;
	}

	.pay .overlay {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: #fff;
		opacity: 1;
		z-index: 999;
		padding-top:100px;
	}

	.pay .overlay .loading_text {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-family: 'Fira Sans', sans-serif;
		text-align: center;
		font-size: 32px;
		color: #5b5;
		margin-bottom:12px;
	}

	.pay .overlay .loading_text_sub {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-family: 'Fira Sans', sans-serif;
		text-align: center;
		font-size: 18px;
		color: #aaa;
	}

	.pay .overlay .spinner {
		margin: 50px auto;
		width: 60px;
		height: 40px;
		text-align: center;
		font-size: 10px;
	}

	.pay .overlay .spinner > div {
		background-color: #ccc;
		height: 100%;
		width: 6px;
		display: inline-block;

		-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
		animation: sk-stretchdelay 1.2s infinite ease-in-out;
	}

	.pay .overlay .spinner .rect2 {
		-webkit-animation-delay: -1.1s;
		animation-delay: -1.1s;
	}

	.pay .overlay .spinner .rect3 {
		-webkit-animation-delay: -1.0s;
		animation-delay: -1.0s;
	}

	.pay .overlay .spinner .rect4 {
		-webkit-animation-delay: -0.9s;
		animation-delay: -0.9s;
	}

	.pay .overlay .spinner .rect5 {
		-webkit-animation-delay: -0.8s;
		animation-delay: -0.8s;
	}

	@-webkit-keyframes sk-stretchdelay {
		0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
		20% { -webkit-transform: scaleY(1.0) }
	}

	@keyframes sk-stretchdelay {
		0%, 40%, 100% {
			transform: scaleY(0.4);
			-webkit-transform: scaleY(0.4);
			}  20% {
				transform: scaleY(1.0);
				-webkit-transform: scaleY(1.0);
			}
		}

	table.api_list {
		width:100%;
		border-collapse: collapse;
		margin-top:10px;
	}
	table.api_list td {
		padding:3px 0;
		margin:0;
	}

	.signatureField {
		position:relative;
		float:left;
		width:100%;
		margin-bottom: 1em;
	}
	.signatureField #signature {
		border: 1px solid #ddd;
		background-color:#fff;
		border-radius: 5px;
	}
	.signatureField .clearCanvas a {
		position: absolute;
		top:3px;
		right:3px;
		font-weight: bold;
		background-color:#ccc;
		text-decoration: none;
		padding:1px 3px;
		font-size:16px;
		border-radius: 5px;
	}
	.signatureField .clearCanvas a:hover{
		background-color:#08f;
		color: #fff !important;
	}
	.signatureField .clearCanvas a:active{
		background-color:#06d;
	}
/* /END/ */

	.modalboxLoadingIndicator {
		margin-top: 6px;
		margin-left: -18px;
		float: left;
	}

	.reports {
		float:left;
		margin-bottom:20px;
		border:1px solid #ddd;
		padding:30px;
		max-width:1300px;
		width:90%;
		box-shadow: 0px 2px 2px #ddd;
		overflow: auto;
		background-color: #fff;
		border-radius: 4px;
	}

	.reports .tax_notification {
		text-align: center;
		color: #aaa;
		margin-top: 30px;
		float: left;
		width: 100%;
	}

	.reports .period_selector {
		padding:5px 0;
		border-bottom: 1px solid #ddd;
		margin-bottom:25px;
		clear:both;
	}


	.reports th,
	.dataTable th {
		border-bottom:2px solid #999;
		font-size:14px;
		color: #999;
		padding: 6px 10px;
	}

	.reports td {
		padding: 6px 10px;
	}

	.reports table.results td:nth-child(odd) {
		background-color:#f8f8f8;
		border-right:1px solid #ddd;
	}

	.reports table.results td:nth-child(1) {
		background-color:#fff;
	}

	.reports table.taxreport.belgium td:nth-child(3),
	.reports table.taxreport.belgium td:nth-child(4) {
		background-color:#f8f8f8;
	}

	.reports table.clients a,
	.reports table.results a {
		text-decoration: none;
	}
	.reports table.clients a:hover,
	.reports table.results a:hover {
		text-decoration: underline;
	}

	.reports h2 {
		padding:0;
		margin:0 0 10px 0;
		color:var(--theme-primary);
		font: bold 22px/1 'Fira Sans', Arial, Helvetica, Verdana, sans-serif;
		letter-spacing: -1px;
		float:left;
	}

	.reports h3 {
		padding:0;
		margin:0 0 10px 0;
		color:var(--theme-primary);
		font: bold 18px/1 'Fira Sans', Arial, Helvetica, Verdana, sans-serif;
		letter-spacing: -1px;
	}

	.reports .key-figures {
		padding: 15px;
		border: 1px solid #ddd;
		border-radius: 4px;
		margin-top: 36px;
	}

	.reports .key-figures .title {
		color: #aaa;
		font-size:1.2em;
	}

	.reports .key-figures .number {
		color: var(--theme-secondary);
		margin-top: 10px;
		font-size: 2em;
		border-top: 1px solid #eee;
		padding-top: 10px;
	}

	.print_button {
		float: right;
	}

	.reports td.header {
		padding-top: 16px;
		color: #aaa;
		font-size: 22px;
	}

	.reports td.subheader {
		font-weight: bold;
		padding-top:20px;
		color:var(--theme-primary);
		font-size:14px;
	}

	.reports td.subsubheader {
		font-weight: bold;
	}

	.reports .indent {
		padding-left:20px;
	}

	.reports .gray-background {
		background-color:#f8f8f8;
	}

	.reports .border-line {
		border-top:1px solid #eee;
	}

	.reports .subtotal {
		border-top:2px solid #888;
		font-weight: bold;
	}

	.reports .subtotal.minus {
		position: relative;
	}

	.reports .subtotal.minus:after {
		position: absolute;
		right: -20px;
		top: -11px;
		font-weight: bold;
		font-size: 16px;
		content: "-";
	}

	.reports .text-right {
		text-align:right;
	}

	.reports .text-left {
		text-align:left;
	}

	.reports .text-bold {
		font-weight: bold;
	}

	.reports .text-large {
		font-size:12px;
	}

	.reports .number-zero a,
	.reports .number-zero {
		color:#ccc;
	}

	.reports .number-negative a,
	.reports .number-negative {
		color:#f00;
	}

	.reports .number-positive {

	}

	.reports .line-total {
		border-top:3px double #ccc;
		border-bottom:1px solid #ccc;
		font-weight: bold;
	}

	.reports .notification {
		color: #c40;
		padding: 1em 1em 1em 3em;
		border-radius: 5px;
		background-color: #FE9;
		display: block;
		border: 1px solid #EC7;
		box-shadow: 2px 2px 5px #e8e8e8;
		line-height: 1.5em;
		position: relative;
		box-sizing: border-box;
		max-width: 750px;
		clear: both;
	}

	.reports .notification:before {
		font-family: 'FontAwesome';
		content: '\f071';
		display: inline-block;
		width: 30px;
		left: 1em;
		font-size:14px;
		font-weight: normal;
		position: absolute;
	}

	.reports .text-position {
		color:var(--theme-secondary);
		font-weight:bold;
		font-size:12px;
		text-align:right;
	}

	.statistics_container {
		width:100%;
		margin-top: 10px;
		margin-bottom: 20px;
		padding: 20px 0;
		float:left;
		display:table;
	}

	.statistics_container .block_separator {
		display:table-cell;
		width:5px;
		height:1px;
	}
	.statistics_container .block_container {
		display:table-cell;
		background-color:#fff;
		border:1px solid #ddd;
		width:25%;
		box-shadow: 0px 2px 3px rgba(0,0,0,0.1);
		border-radius: 3px;
		cursor:pointer;
		transition: all 0.3s ease;
	}

	.statistics_container.three .block_container {
		width: 33%;
	}

	.statistics_container .block_container.ok:hover {
		background-color:#eef7ff;
		transform: translateY(-4px);
	}
	.statistics_container .block_container.warning:hover {
		background-color:#fff5f1;
		transform: translateY(-4px);
	}

	.statistics_container .block_container .block {
		padding:15px;
		position: relative;
	}

	.statistics_container .status {
		float: right;
		color: #fff;
		padding:0 7px;
		text-align: center;
		margin:-16px -11px 20px 3px;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		line-height:30px;
		min-width: 18px;
		height: 30px;
	}

	.statistics_container .block_container.ok {
		border-top:3px solid var(--theme-secondary);
	}
	.statistics_container .block_container.warning {
		border-top:3px solid #ff5722;
		box-shadow: 0 0px 5px #f96;
		border-bottom: 1px solid #f96;
		border-right:1px solid #f96;
		border-left:1px solid #f96;
	}

	.statistics_container .block_container.ok .status {
		background-color:var(--theme-secondary);

	}

	.statistics_container .block_container.warning .status {
		background-color:#ff5722;
	}

	.statistics_container .status span {
		float:left;
		font-size:18px;
		text-align: center;
		width:100%;
		margin-top:2px
	}

	.statistics_container .title {
		font-size:14px;
		color:#aaa;
		min-height: 48px;
		line-height: 1.2em;
	}

	.statistics_container .amount {
		float:right;
		font-size:24px;
		color:var(--theme-secondary);
		margin:10px 0;
	}

	.statistics_container .tax_notification {
		font-size: 10px;
		color:#ccc;
		float: left;
		margin-top: 22px;
	}

	.statistics_container .block_container.warning .amount {
		color:#ff5722;
	}

	.statistics_container .block_container.ok .amount {
		color:#999;
	}

	.profit_counter_container {
		float:right;
		width:22%;
	}

	.profit_counter_container .profit_counter {
		margin-bottom:10px;
		width:95%;
	}

	.profit_counter_container .profit_counter .title {
		color:#999;
		font-size:14px;
		float:left;
		clear:left;
		margin-top:15px;
		margin-bottom:0px;
		width:100%;
		border-bottom:1px solid #ddd;
		padding-bottom:2px;
	}

	.profit_counter_container .profit_counter .amount {
		float:left;
		clear:left;
		width:100%;
		text-align:right;
		color:var(--theme-secondary);
		font-size:24px;
		padding:4px 0;
	}

	.profit_counter_container .profit_counter .number {
		float:left;
		display:block;
		background:var(--theme-secondary);
		color:#fff;
		padding:3px 5px;
		border-radius: 3px;
		font-size:16px;
	}

	.profit_counter_container .profit_counter .tax_notification {
		font-size: 10px;
		display: inline-block;
		margin-left: 10px;
		color:#aaa;
	}


	.fsnl-popup {
		position: relative;
		width: auto;
		max-width: 850px;
		margin: 20px auto;
		box-shadow: 0px 2px 20px rgba(0,0,0,.5);
		border-radius: 3px;
	}

	.fsnl-popup .title-bar-link {
		text-align: right;
		position: absolute;
		right: 42px;
		top: 10px;
		text-shadow: 0px 1px 0 rgba(0,0,0,0.5);
	}

	.fsnl-popup .title-bar-link a {
		text-decoration: none;
		color: #fff;
	}

	.mfp-close-btn-in .mfp-close {
		line-height: 33px;
		color: #fff;
	}

	.fsnl-popup-content {
		padding: 14px;
		float: left;
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
	}
	.fsnl-popup-subtext {
		padding: 10px;
		text-align: center;
		width: 100%;
		box-sizing: border-box;
		color: #888;
	}

	.fsnl-popup.small {
		max-width: 550px;
	}

	.fsnl-popup.smaller {
		max-width: 400px;
	}

	.fsnl-popup.xsmall {
		max-width: 300px;
	}

	.fsnl-popup.xlarge {
		max-width: 900px;
	}

	.fsnl-popup.xxlarge {
		max-width: 1150px;
	}

	.fsnl-popup.no-padding .fsnl-popup-content {
		padding: 0;
	}

	.fsnl-popup-title {
		padding: 6px 10px;
		color: #fff;
		font-size: 16px;
		background-color: var(--theme-secondary);
		cursor: move;
		border-bottom: 1px solid rgba(0,0,0,0.25);
		text-align: center;
		text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}

	.fsnl-popup-title.alert {
		background-color: #eb5a46;
		border-color: rgba(0,0,0,.1);
	}

	.fsnl-popup .modalboxNavBar {
		float:left;
		width:100%;
		margin-bottom:5px;
		box-shadow: inset 0px -3px 0px #eee;
	}
	.fsnl-popup .modalboxNavBar ul {
		list-style:none;
		padding:0 0 0 6px;
		margin:0;
	}
	.fsnl-popup .modalboxNavBar ul li a {
		float: left;
		padding: 5px 15px;
		margin-right: 5px;
		color: #777;
		text-decoration: none;
		transition: .2s background-color;
		border-bottom: 3px solid transparent;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
	}
	.fsnl-popup .modalboxNavBar ul li a:hover {
		color: var(--theme-secondary);
	}
	.fsnl-popup .modalboxNavBar ul li a.active {
		color: var(--theme-secondary);
		border-bottom-color: var(--theme-secondary);
		background-color: var(--theme-secondary-light);
		font-weight: bold;
	}

	.fsnl-popup p.header {
	    font-weight: bold;
	    color: var(--theme-primary);
	    font-size: 14px;
	    margin-top: 5px;
	    margin-bottom: 7px;
		margin-left: 2px;
	}
	.fsnl-popup p.header.header-dark {
	    font-weight: bold;
	    color: #555;
	    font-size: 14px;
	    margin-top: 5px;
	    margin-bottom: 7px;
		margin-left: 2px;
	}
	.fsnl-popup p.header.margin-top {
		margin-top: 20px;
	}
	.fsnl-popup p.header span.right-option a {
		float: right;
		color: var(--theme-primary);
		font-weight: normal;
		font-size:12px;
		text-decoration: none;
		margin-top: 1px;
	}
	.fsnl-popup p.header span.right-option a i {
		font-size:14px;
	}

	.fsnl-popup div.row-options {
		float: right;
		font-size: 14px;
	}

	.fsnl-popup div.row-options i {
		margin-left:4px;
	}

	.fsnl-popup .contacts ul  {
		padding: 0;
	}
	.fsnl-popup .contacts ul li {
		list-style: none;
		margin-bottom: 4px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 240px;
	}
	.fsnl-popup .contacts ul li:before {
		font-family: 'FontAwesome';
		content: '\f007';
		color: #ccc;
		display: inline-block;
		width: 20px;
		font-size:14px;
		font-weight: normal;
		-webkit-font-smoothing: antialiased;
	}
	.fsnl-popup .contacts ul li a {
		text-decoration: none;
		color: #777;
	}
	.fsnl-popup .contacts ul li a:hover {
		color: var(--theme-secondary);
	}
	.fsnl-popup .contacts ul li.active a {
		color: var(--theme-secondary);
		font-weight: bold;
	}
	.fsnl-popup .contacts ul li.active:before {
		color: var(--theme-secondary);
	}
	.fsnl-popup .contacts ul.new li {
		margin-top: 20px;
	}
	.fsnl-popup .contacts ul.new li a {
		color: var(--theme-primary);
	}
	.fsnl-popup .contacts ul.new li a:hover {
		color: var(--theme-secondary);
	}
	.fsnl-popup .contacts ul.new li:before {
		content: '\f234';
		color: var(--theme-primary);
	}
	.fsnl-popup .contact-default {
		margin-top: 24px;
		width: 235px;
	}
	.fsnl-popup .contact-default p {
		margin-bottom:5px;
	}
	.fsnl-popup .remove-cid {
		display: none;
	}
	.fsnl-popup .contact-sheet .remove-cid {
		display: block;
		float: right;
		font-size: 14px;
		color: #d44;
		margin-top: 4px;
		margin-right: 3px;
		cursor: pointer;
	}
	.fsnl-popup .contact-sheet .remove-cid:hover {
		color: var(--theme-secondary);
	}

	.fsnl-popup .prepaid_table {
		margin:0 auto;
		width:650px;
	}

	.fsnl-popup .prepaid_table td {
		padding: 24px 0;
	}

	.fsnl-popup .prepaid_icon {
		color:#08f;
		font-size:24px;
	}

	.fsnl-popup .prepaid_border {
		border-bottom:1px solid #ddd;
	}

	.fsnl-popup tr:last-of-type .prepaid_border {
		border-bottom: none;
	}

	.fsnl-popup .prepaid_title {
		margin-bottom:3px;
		font-weight: bold;
		color:#000;
		margin-bottom: 6px;
	}

	.fsnl-popup .prepaid_title span {
		font-weight: normal;
		color:#aaa;
		margin: 0 7px;
	}

	.fsnl-popup .prepaid_description {
		color: #777;
		margin: 0;
	}

	.fsnl-popup .prepaid_table .prepaid_options {
		margin: 14px 0;
	}

	.fsnl-popup .prepaid_table .prepaid_option {
		float:left;
		width:100px;
		border:1px solid #E0E0E0;
		border-radius: 5px;
		background-color:white;
		padding:18px 0px;
		cursor:pointer;
		transition: .2s background-color, .3s border-color;
		margin-right: 5px;
		box-shadow: 0px 3px 0px rgba(0,0,0,0.05);
		text-align:center;
}
	}

	.fsnl-popup .prepaid_table .prepaid_option:last-child {
		margin-right: 0;
	}

	.fsnl-popup .prepaid_table .prepaid_option:hover {
		border-color: #5b5;
		background-color:#e7f5e6;
	}

	.fsnl-popup .prepaid_table .price {
		font-size:28px;
		color:#5b5;
		font-weight:bold;
	}

	.fsnl-popup .prepaid_table .taxprice {
		color: #999;
		margin-top: 12px;
		font-size: .9em;
	}

	.fsnl-popup .left_process {
		float: left;
		border-right: 1px solid #e5e5e5;
		height: 466px;
		padding-top: 16px;
		padding-left: 20px;
		padding-right: 40px;
		margin-bottom: 5px;
		background-color: #F5FAFF;
		margin: -14px 40px -14px -14px;
	}

	.fsnl-popup .left_process ul {
		list-style:none;
		margin:0;
		padding:10px 0 0 10px;
	}
	.fsnl-popup .left_process ul li {
		padding-left: 25px;
		padding-bottom: 15px;
		list-style: none;
		color:#bbb;
		font-size:14px;
	}

	.fsnl-popup .left_process li:before {
		font-family: 'FontAwesome';
		content: '\f1db';
		color: #ddd;
		display: inline-block;
		margin-left: -25px;
		width: 25px;
		font-size:20px;
		font-weight: normal;
		-webkit-font-smoothing: antialiased;
	}

	.fsnl-popup .left_process ul li.done,
	.fsnl-popup .left_process li.done:before {
		content: '\f058';
		color:#5b5;
	}

	.fsnl-popup .left_process ul li.current,
	.fsnl-popup .left_process li.current:before {
		color:#08f;
	}
	.fsnl-popup .left_process li.current:before {
		content: '\f0a9';
	}

	.fsnl-popup .wizard_content h2 {
		color:#08f;
		font-size: 22px;
		letter-spacing: -1px;
		margin-top:8px;
	}

	.fsnl-popup .right_process,
	.fsnl-popup .wizard_content {
		float:left;
		width: 65%;
		text-align:left;
	}

	.fsnl-popup .wizard_content .question {
		background-color:#f4f4f4;
		padding:5px 8px;
		border-radius:3px;
		border:1px solid #eee;
		width:100%;
		float:left;
		margin-bottom:5px;
	}

	.fsnl-popup .wizard_content .question .title,
	.fsnl-popup .wizard_content .question .subtitle {
		float:left;
		clear:left;
		margin:5px 0px 5px;
		color:#666;
		line-height: 1.4em;
	}

	.fsnl-popup .wizard_content .question .subtitle {
		color:#aaa;
		margin-top:10px;
	}


	.fsnl-popup .wizard_content .question .answer {
		font-weight: bold;
		color:#666;
		float:right;
	}
	.fsnl-popup .wizard_content .question .answer label {
		margin-left:20px;
	}

	.fsnl-popup .wizard_content .question .title_with_answer {
		margin-top:5px;
	}

	.fsnl-popup .wizard_content .question .title_with_answer input[type=text] {
		width:500px;
	}

	.fsnl-popup .invoicenumber_layout {
		padding:5px 8px;
		float: left;
		width:100%;
		text-align:center;
	}

	.fsnl-popup .invoicenumber_layout .title {
		font-size: 14px;
		color: #5b5;
		padding:10px 0;
	}

	.fsnl-popup .invoicenumber_layout .number {
		font-size: 30px;
		color: #08f;
		padding:10px 0;
	}

	.fsnl-popup .wizard_ready {
		text-align: center;
	}

	.fsnl-popup .wizard_ready .icon {
		margin-top:30px;
	}

	.fsnl-popup .wizard_ready .icon i {
		color:#5b5;
		font-size: 150px !important;
	}
	.fsnl-popup .wizard_ready .text {
		color:#5b5;
		font-size:50px;
	}
	.fsnl-popup .wizard_ready .subtext {
		margin-top:20px;
		color:#aaa;
		font-size:18px;
		line-height:1.6em;
	}

	.fsnl-popup p {
		color: #444;
		line-height: 1.5em;
		text-align: left;
		padding: 0;
		margin-bottom:15px;
	}
	.fsnl-popup p.no-padding {
		color: #444;
		line-height: 1.5em;
		text-align: left;
		padding: 0;
		margin-bottom:0px;
	}
	.inline-warning,
	.fsnl-popup p.warning {
		color: #d40;
		background-color: #fceee8;
		padding: 6px 6px 6px 30px;
		border-radius: 4px;
		position: relative;
		margin-bottom:10px;
		margin-right: 2em;
		border: 1px solid #f8d9cc;
	}

	.fsnl-popup .inline-warning ul {
		padding-left: 1em;
	}

	.fsnl-popup .inline-warning li {
		color: #d40;
	}

	.fsnl-popup p.warning.inline {
		display: inline-block;
	}

	.inline-warning:before,
	.fsnl-popup p.warning:before {
		font-family: FontAwesome;
		content: "\f071";
		display: inline-block;
		padding-right: 3px;
		vertical-align: middle;
		position: absolute;
		left: 9px;
		top: 7px;
	}

	.fsnl-popup .company-search {
		float: right;
		border: 1px solid #06d;
		margin-top: 2px;
		border-radius: 3px;
		background-color: #08f;
		cursor: pointer;
		height: 21px;
		width: 22px;
		text-align: center;
		line-height: 1.9em;
	}
	.fsnl-popup .company-search i {
		color: #fff;
		font-size: 14px;
	}
	.fsnl-popup .company-search:hover {
		background-color: #09f;
	}

	.fsnl-popup li {
		color: #444;
		line-height: 1.5em;
		text-align: left;
	}
	.fsnl-popup .largeWarning {
		text-align:center;
		font-size:24px;
		color:#f40
	}
	.fsnl-popup span.large {
		text-align:center;
		font-size:24px;
	}
	.fsnl-popup span.sub {
		text-align:center;
		font-size:16px;
		color:#999;
		width: 100%;
	}
	.fsnl-popup .divider {
		text-align:center;
		font-size:14px;
		color:#aaa;
		border-top:1px solid #ddd;
		margin:20px 0 8px 0;
	}
	.fsnl-popup .divider div {
		margin-top:-10px;
	}
	.fsnl-popup .divider div div {
		display:inline;
		padding:0 10px 0 10px;
		background-color:#fff;
	}

	.fsnl-popup .divider.left {
		text-align: left;
	}
	.fsnl-popup .divider.left div div {
		padding-left: 0px;
	}
	.fsnl-popup .divider.extra-margin {
		margin:40px 0 8px 0;
	}

	.fsnl-popup .code {
		font-family: Monaco, Consolas, "Lucida Console", monospace;
		border:1px solid #ccc;
		background-color:#f4f4f4;
		color:#444;
		padding:8px 10px 8px 10px;
		line-height: 1.5em;
		margin:auto;
		text-align:left;
		-moz-border-radius: 2px;
		-khtml-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius:2px;
	}
	.fsnl-popup textarea {
		height:100px;
		width:92%;
		color:#08f;
	}
	.fsnl-popup textarea.higher {
		height:200px;
	}
	.fsnl-popup input[type=text], .fsnl-popup input[type=password] {
		color:#08f;
		height: 24px;
	}
	.fsnl-popup input.inputError[type=text] {
		color:#f00;
	}
	.fsnl-popup .buttons {
		text-align: center;
		clear: left;
		width: 100%;
		padding: 10px 0 6px 0;
		background-color: #eee;
		border-top: 1px solid #ddd;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
	}

	.fsnl-popup #modalbox_spinner {
		margin-top:5px;
		margin-left:15px;
		position:absolute;
	}

	.fsnl-popup td {
		text-align:left;
		color:#444;
	}

	.fsnl-popup p.desc {
		color:#777;
		padding-top:10px;
		padding-bottom:10px;
	}

	.fsnl-popup p.desc.no-padding {
		padding-top:2px;
		padding-bottom:2px;
	}

	.fsnl-popup p.desc.small-padding {
		padding-top: 5px;
		padding-bottom: 5px;
		margin-bottom: 3px;
	}

	.fsnl-popup td.label {
		vertical-align: top;
		padding-top:8px;
		padding-bottom: 8px;
		width:145px;
	}

	.fsnl-popup td.value {
		vertical-align: top;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.fsnl-popup td.label-padding {
		vertical-align: top;
		padding-top: 8px;
		padding-right: 15px;
	}

	.fsnl-popup table.with_row_separators td,
	.fsnl-popup table.with_row_separators th{
		border-bottom: 1px solid #eee;
	}

	.fsnl-popup table.with_row_separators.top_separator {
		border-top: 1px solid #eee;
	}

	.fsnl-popup table.with_row_separators tr:last-of-type td {
		border-bottom: none;
	}

	.fsnl-popup table {
		width:100%;
	}

	.fsnl-popup table td.hide-text-overflow {
	    max-width: 100px;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}

	.fsnl-popup .options {
		text-align:left;
	}
	.fsnl-popup .selector {
		width:25px;
		text-align:right;
	}

	.fsnl-popup .choose_container {
		clear:left;
		float:left;
		margin-left:10px;
	}

	.fsnl-popup .reminderpopup_left {
		float: left;
		border-right: 1px solid #ddd;
		min-height: 410px;
		width: 307px;
		margin-bottom: 5px;
		margin-right: 20px;
	}

	.fsnl-popup .reminderpopup_right {
	    float: right;
	    width: 460px;
	    padding-right:20px;
	}

	.fsnl-popup .reminderpopup_phase {
		float: left;
		width: 100%;
		padding: 10px 0 10px 14px;
		margin-left: -14px;
	}

	.fsnl-popup .reminderpopup_left .reminderpopup_phase.active {
		background-color: #FDEED3;
	}

	.fsnl-popup .reminderpopup_left .reminderpopup_phase .checkmark {
		float: left;
		clear: left;
		width: 25px;
		font-size: 20px;
		color: #fff;
		margin-top: 4px;
		visibility: hidden;
	}

	.fsnl-popup .reminderpopup_left .reminderpopup_phase.done .checkmark {
		color: #5b5;
		visibility: visible;
	}

	.fsnl-popup .reminderpopup_left .reminderpopup_phase .icon {
		float: left;
		width: 26px;
		height: 26px;
		text-align: center;
		border: 2px solid #9B9B9B;
		line-height: 1.7em;
		border-radius: 50%;
		color: #9B9B9B;
		font-size: 16px;
		margin-right: 10px;
	}
	.fsnl-popup .reminderpopup_left .reminderpopup_phase.active .icon {
		border: 2px solid #F5A623;
		background-color: #F5A623;
	}

	.fsnl-popup .reminderpopup_left .reminderpopup_phase .icon span {
		font-size: 14px;
		font-weight: bold;
	}

	.fsnl-popup .reminderpopup_left .reminderpopup_phase.active .icon span {
		color: #fff;
	}

	.fsnl-popup .reminderpopup_left .reminderpopup_phase .context {
		float:left;
		width:230px;
	}

	.fsnl-popup .reminderpopup_left .reminderpopup_phase .context .title {
		float: left;
		color: #9B9B9B;
		font-size: 12px;
		margin-bottom: 3px;
	}

	.fsnl-popup .reminderpopup_left .reminderpopup_phase .context .date {
		float: left;
		clear: left;
		color: #B9B7BA;
		font-size: 11px;
		word-break: break-word;
	}

	.fsnl-popup .reminderpopup_left .reminderpopup_phase.active .context .title,
	.fsnl-popup .reminderpopup_left .reminderpopup_phase.active .context .date {
		color: #F5A623;
	}

	.fsnl-popup .reminderpopup_left .reminderpopup_phase .send {
		position: relative;
	}

	.fsnl-popup .reminderpopup_left .reminderpopup_phase .send a {
		float: right;
		margin-right: 10px;
		padding: 5px 7px;
		background: #EEEEEE;
		border: 1px solid #D9D9D9;
		border-radius: 3px;
		color: #0088FF;
		font-size: 13px;
		transition: .2s all;
		position: absolute;
		top: 0px;
		right: 0px;
	}

	.fsnl-popup .reminderpopup_left .reminderpopup_phase .send a:hover {
		background-color: #08f;
		color: #fff;
	}

	.fsnl-popup .row {
		margin-bottom: 15px;
		float: left;
		width: 480px;
	}

	.fsnl-popup .row > div:first-child{
		margin-bottom: 3px;
	}

	.fsnl-popup .row.checkboxlist label {
		clear:left;
		float:left;
	}

	.fsnl-popup .statusContainer .status a {
		display: block;
		padding: 10px;
		text-align: center;
		background-color: #eee;
		margin-bottom: 10px;
		border-radius: 5px;
		color: #fff;
		text-decoration: none;
		width: 200px;
		margin: 0 auto 10px auto;
	}

	.fsnl-popup .statusContainer .status.progress a {
		background-color:#9c27b0;
	}

	.fsnl-popup .statusContainer .status.completed a {
		background-color:#2e7d32;
	}

	.fsnl-popup .statusContainer .status.billable a {
		background-color:#F5A623;
	}

	.fsnl-popup .statusContainer .status.declined a {
		background-color:#D0021B;
	}

	.fsnl-popup .statusContainer .status.clear a {
		margin-top: 30px;
		color: #888;
		border: 1px solid #ccc;
	}

	.fsnl-popup .bkgImage .image {
		float: right;
	}

	.fsnl-popup .bkgImage .colors {
		float: left;
		text-align: center;
		width: 66px;
	}

	.fsnl-popup .bkgImage .image img {
		width: 300px;
		height: 423.812px;
		box-shadow: 0px 0px 12px rgba(0,0,0,0.1);
		border: 1px solid #ddd;
	}
	.fsnl-popup .thumbnailsContainer {
		float: left;
		margin-right: 20px;
	}
	.fsnl-popup .thumbnails {
		width: 460px;
		overflow-y: scroll;
		overflow-x: hidden;
		height: 425px;
		padding: 12px;
		box-sizing: border-box;
		background-color: #eee;
		border-radius: 4px;
		border: 1px solid #ccc;
		box-shadow: inset 0px 0px 10px rgba(0,0,0,0.2);
	}
	.fsnl-popup .thumbnails .thumbnail {
		width: 128px;
		height: 181px;
		box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
		border: 1px solid #ccc;
		float: left;
		margin-right: 10px;
		margin-bottom: 10px;
		background-color: #fff;
		cursor: pointer;
		transition: .25s transform;
	}
	.fsnl-popup .thumbnails .thumbnail:nth-child(3n) {
		margin-right: 0;
	}
	.fsnl-popup .thumbnails .thumbnail:hover {
		transform: scale(1.05);
	}
	.fsnl-popup .thumbnails .thumbnail.active {
		border-color: var(--theme-secondary);
	}
	.fsnl-popup .sp-replacer.sp-light {
		margin-bottom: 10px;
	}
	.fsnl-popup .mollie-request-mandate-container {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0,0,0,0.5);
		z-index: 1;
	}
	.fsnl-popup .mollie-request-mandate {
		position: absolute;
		top: 10px;
    	left: 140px;
    	width: 615px;
		background: #fff;
		box-shadow: 4px 4px 4px rgba(0,0,0,0.4);
		border-radius: 5px;
		padding: 0 30px;
		box-sizing: border-box;
		border: 1px solid #08f;
	}

	.fsnl-popup .selected-client {
		border: 1px solid #ddd;
		border-radius: 5px;
		scrollbar-width: thin;
		width: 90%;
		margin-bottom: 1em;
	}

	.fsnl-popup .selected-client option {
		padding: 0.4em 0.8em;
		color: #555;
	}

	/** FSNL POPUP ANIMATION **/

	.popup-zoom-in .zoom-anim-dialog {
		opacity: 0;

		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;

		transform: translateY(-10px);
		-webkit-transform: translateY(-10px);
	}

	/* animate in */
	.popup-zoom-in.mfp-ready .zoom-anim-dialog {
		opacity: 1;
		transform: translateY(0);
		-webkit-transform: translateY(0);
	}

	/* animate out */
	.popup-zoom-in.mfp-removing .zoom-anim-dialog {
		transform: translateY(-10px);
		-webkit-transform: translateY(-10px);
		opacity: 0;
	}

	/* Dark overlay, start state */
	.popup-zoom-in.mfp-bg {
		opacity: 0.001; /* Chrome opacity transition bug */
		-webkit-transition: opacity 0.3s ease-out;
		-moz-transition: opacity 0.3s ease-out;
		-o-transition: opacity 0.3s ease-out;
		transition: opacity 0.3s ease-out;
	}
	/* animate in */
	.popup-zoom-in.mfp-ready.mfp-bg {
		opacity: 0.65;
	}
	/* animate out */
	.popup-zoom-in.mfp-removing.mfp-bg {
		opacity: 0;
	}

	/* CSS-based preloader */
	.mfp-preloader {
		width: 50px !important;
		height: 50px;
		background-color: #08f;
		margin: 0 auto;
		border-radius:4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-animation: rotateplane 1.2s infinite ease-in-out;
		animation: rotateplane 1.2s infinite ease-in-out;
	}

	@-webkit-keyframes rotateplane {
		0% { -webkit-transform: perspective(120px) }
		50% { -webkit-transform: perspective(120px) rotateY(180deg) }
		100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
	}

	@keyframes rotateplane {
		0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg) }
		50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) }
		100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg) }
	}

	.ui-tooltip {
	    background: #08f;
	    color: white;
	    border: none;
	    padding: 0;
	    opacity: 1;
	}
	.ui-tooltip-content {
	    position: relative;
	    padding: 1em;

	}
	.ui-tooltip-content::after {
	    content: '';
	    position: absolute;
	    border-style: solid;
	    display: block;
	    width: 0;
		top: -10px;
		left: 45%;
		border-color: #08f transparent;
		border-width: 0 10px 10px;
	}
	.ui-datepicker {
		width:23em;
		box-shadow: 0px 2px 14px rgba(0,0,0,0.3);
	}

	.ui-datepicker td span, .ui-datepicker td a {
		padding: 0.7em 0.2em;
		text-align: center;
	}

	.ui-menu-item span.price {
		color: #999;
	}
	.ui-menu-item .ui-state-active span.price {
		color: #fff;
	}
}

@media all and (device-width: 768px) and (device-height: 1024px) {
	.new_invoice_container .invoice_lines .line .line_controls_left,
	.new_invoice_container .invoice_lines .line .line_controls_right,
	.new_invoice_container .invoice_lines .product_lines .line .mutate_amount a {
		opacity: 1;
	}
}

/*****
 * When the screen is smaller than 1388px and 685px,
 * we'll hook the options container to the right of the screen, fixed
 *****/
@media only screen and (max-width: 1388px), (max-height: 665px) {
/*	maybe we dont need this option. It's used to prevent the scrolling to the right when the options container is closed
	body {
		overflow-x: hidden;
	}
*/
	.new_invoice_container {
		margin-right:40px;
	}
	.sidetabs {
		position: fixed;
		right:0px;
		top:-5px;
		bottom:0;
		z-index:999;
		border-left: 1px solid #08f;
		border-right: none;
		border-top: none;
		border-bottom: none;
		border-radius:0px;
		box-shadow: -60px 0 40px rgba(0,0,0,0.1);
		margin-right:-281px;
		margin-left: 0;
	}
	.sidetabs.hidden {
		box-shadow: none;
	}
	.sidetabs .sideflaps {
		left: -39px;
		right: auto;
		top: 110px;
		width: 38px;
	}
	.sidetabs .sideflaps .icon {
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}
	.sidetabs .sideflaps .icon:hover {
		margin-left: -3px;
		margin-right: 0;
	}
	.sidetabs .sideflaps .icon.active {
		margin-left: -3px;
		margin-right: -1px;
	}
	.sidetabs .sideflaps .tab_populated {
		left:-12px;
		right:auto;
	}
	.sidetabs .close_tab {
		top: 20px;
		right: 16px;
		transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
	}
}


.users-right-management {
	margin-top:10px;
}

.users-right-management .row {
	clear:left;
	border-bottom: 1px solid #ddd;
	width: auto;
}

.users-right-management .section {
	float: left;
	width: 185px;
	padding: 5px;
	margin: 2px;
}

.users-right-management .section .title {
	font-weight: bold;
	font-size: 13px;
}

.users-right-management .section ul {
	list-style: none;
	margin:4px 0 0 0;
	padding: 0 0 0 20px;
}
.users-right-management .section ul li {
	margin:0;
}

.menu-popup {
	background-color: #fff;
	border: 1px solid var(--theme-secondary);
	box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
	border-radius: 4px;
	width: 340px;
	text-align: left;
	left: 0px;
	top: 36px;
	z-index: 999;
	position: absolute;
	padding: 15px 10px 10px 10px;
	float:left;
}

.menu-popup p {
	padding-left: 5px;
	color: #888;
	line-height: 1.5em;
}
.menu-popup p strong {
	color:#08f;
}
.menu-popup p.listheader {
	font-weight: bold;
	border-bottom: 1px solid #eee;
	margin-bottom: 0;
	padding-bottom: 5px;
}
.menu-popup p.listheader.margin {
	float: left;
	width: 100%;
	margin-top: 12px;
}

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

.menu-popup:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #fff;
	border-width: 5px;
	margin-left: -113px;
}
.menu-popup:before {
	border-color: rgba(0, 136, 255, 0);
	border-bottom-color: var(--theme-secondary);
	border-width: 6px;
	margin-left: -114px;
}

.menu-popup.menu-popup-arrow-left:after {
	margin-left: -315px;
}
.menu-popup.menu-popup-arrow-left:before {
	margin-left: -316px;
}



.menu-popup ul {
	margin:0;
	padding:0;
}

.menu-popup ul li {
	list-style: none;
	border-bottom: 1px solid #eee;
	float:left;
	width: 100%;
}
.menu-popup ul li:last-child {
	border-bottom:none;
}

.menu-popup ul li a, .menu-popup.no-links ul li {
	text-decoration: none;
	padding: 8px 5px;
	display: block;
	width: 100%;
	box-sizing: border-box;
}
.menu-popup ul li a:hover {
	background-color: #f4f4f4;
}
.menu-popup ul li a i {
	color: #ddd;
	font-size: 16px;
	width: 22px;
}
.menu-popup ul li a i.green {
	color:#5b5;
}
.menu-popup.no-links ul li span {
	background-color: #5b5;
	color: #fff;
	width: 28px;
	padding: 2px 0px;
	display: inline-block;
	margin-right: 5px;
	text-align: center;
	border-radius: 3px;
	font-weight: bold;
	border: 1px solid #393;
}

.menu-popup .spoolerCount {
	font-weight: bold;
}

.actions {
	margin: 0;
	padding: 0;
}
.actions li {
	list-style: none;
	float: left;
	border-radius: 4px;
	margin-left: 7px;
}
.actions li a {
	padding: 6px 15px 4px 11px;
	display: block;
	color: #fff;
	border-radius: inherit;
	text-decoration: none;
	float: left;
	transition: 0.4s all;
	vertical-align: top;
}
.actions li a:hover {
	background-color: rgba(0,0,0,0.1);
}

.actions li a i {
	color: #90d390;
	margin-right: 5px;
	font-size: 16px;
	text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}

.actions li a i.pulldown {
	color: #fff;
	margin-left: 5px;
	margin-right: 0;
	font-size: 14px;
	text-shadow: 0 1px 0 rgba(0,0,0,0.1);
}

table.userlist {
	width:100%;
}

table.userlist th {
	text-align: left;
	color: var(--theme-primary);
	font-size: 14px;
}

table.userlist tr:nth-child(even) {
	background-color: #f4f4f4;
}

table.userlist td,
table.userlist th {
	padding:10px;
}

table.userlist i {
	font-size:14px;
}

p {
	color: var(--text-color);
	text-align: left;
	margin-bottom:15px;
}

p.margin-top {
	margin-top:15px;
	margin-bottom:0;
	float:left;
	width: 100%;
}

.green {
	color:#5b5 !important;
}
.red {
	color:#f40 !important;
}
.gray {
	color:#999 !important;
}


.accountpage {
	float:left;
	margin-bottom:100px;
}

.accountpage h2 {
	padding: 0;
	margin: 20px 0 10px 0;
	color: #aaa;
	font: 300 24px/1 'Fira Sans', Arial, Helvetica, Verdana, sans-serif;
	float: left;
	width: 100%;
}

.cards-row {
	width:95%;
	max-width:850px;
	float:left;
	clear:left;
}

.card {
	float: left;
	background-color: #fff;
	padding: 15px;
	border: 1px solid #ddd;
	box-shadow: 0px 2px 3px rgba(0,0,0,0.08);
	position: relative;
	margin-bottom:10px;
	box-sizing: border-box;
	border-radius: 5px;
}

.card.warning {
	background-color:#f8d7da;
	border-color: #721c24;
	color: #721c24;
	text-align: center;
	padding-left: 5em;
	padding-right: 5em;
}
.card.warning p, .card.warning h2 {
	color: #721c24;
	margin: 0 0 0.5em 0;
	text-align: center;
	line-height: 1.4em;
}

.card.half-width 	{ width:49%; }
.card.align-left 	{ float:left; }
.card.align-right	{ float:right; }
.card.full-width 	{ width:100%; }

.card .icon {
	font-size: 24px;
	color:rgba(0,0,0,0.2);
	position: absolute;
	margin-top: -4px;
}

.card .title {
	color:#aaa;
	font-size:22px;
	float:left;
	margin-bottom:10px;
}

.card .text {
	margin-left: 30px;
	line-height: 16px;
	color:#555;
}
.card .buttons {
	float:left;
}

.card .disclaimer {
	float:right;
	color:#aaa;
}

.card .progress {
	width: 100%;
	float:left;
	margin:5px 0 14px 0;
}

.card .progress .bar {
	width: 100%;
	height: 20px;
	border: 1px solid #ddd;
	border-radius: 5px;
	position: relative;
	background-color: #f4f4f4;
}

.card .progress .bar .incoming,
.card .progress .bar .sent {
	height: 18px;
	border-radius: 5px;
	margin-top: 1px;
	margin-left: 1px;
	position: absolute;
	max-width:99.5%;
}

.card .progress .bar .incoming {
	background-color: #80C4FF;
}


.card .progress .bar .sent {
	background-color: #08f;
}

.card .table-icon {
	font-size: 20px;

}
.card .table-title {
	font-size:14px;
}
.card .table-value {
	font-size: 24px;
	text-align: right;
	font-weight: bold;
}

.card .explanation {
	margin-top:15px;
	float:left;
}

.card .explanation.at-the-top {
	margin-top:0px;
	margin-bottom:15px;
}

.card .explanation,
.card .explanation p {
	color: #888;
	line-height: 16px;
	clear:left;
	display:block;
}

.card .explanation p strong {
	color: var(--theme-primary);
}

.card .explanation p.no-more-sending {
	color: #e40;
}

.card .numbers {
	float:left;
	width:100%;
}
.card .numbers table {
	width:100%;
}
.card .numbers .blue { color: #08f; }
.card .numbers .lightblue { color: #80C4FF; }
.card .numbers .green { color: #5b5; }
.card .numbers .sum-border { border-bottom:1px solid #ddd; }

.card .value {
	color: var(--theme-secondary);
	font-size: 16px;
	float: right;
	max-width: 70%;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
}

.card .value.new-line {
	clear:both;
	float:left;
	max-width: none;
	overflow: auto;
	text-overflow: initial;
}


.card .card-column {
	float: left;
	width: 48%;
	border-right: 1px solid #eee;
	padding-right: 2%;
}
.card .card-column:last-child {
	float:right;
	border-right: none;
	padding-right: 0;
}


.card .card-item {
	float:left;
	width:100%;
	border-bottom:1px solid #eee;
	padding-bottom:20px;
	margin-bottom:20px;
}

.card .card-item:last-child {
	border-bottom:none;
	padding-bottom:0;
	margin-bottom:0;
}

.card .card-item .title {
	font-size:16px;
	margin-left:40px;
}

.card .card-item .action {
	float:left;
	clear:left;
	margin-left:40px;
}

.card .card-item .value.new-line {
	margin-left:40px;
}

.card .card-item .value.small {
	font-size:12px;
}

.card .card-item .last-top-up {
	float: right;
	color: #aaa;

}

.no-access {
	color:#e40;
	font-weight:bold;
}

.no-access-container {
	width:450px;
	margin: 0 auto;
	padding: 30px;
	background-color: #fff;
	border: 1px solid #e40;
	box-shadow: 0px 0px 3px #e40;
	margin-top:100px;
	border-radius: 5px;
}
.no-access-container h2 {
	text-align:center;
	color:#e40;
	font-size:20px;
}
.no-access-container p {
	text-align:center;
	color:#888;
	font-size:15px;
}

.companyName {
	display:none;
}

/* Payment Processor classes */

.transaction-match-header {
	float: left;
	border-bottom: 1px solid #e5e5e5;
	width: 100%;
	padding: 1.4em 2em;
	background-color: #F5FAFF;
	box-sizing: border-box;
}
.transaction-match-header > .money {
	float: left;
	margin-right: 4em;
}
.transaction-match-header > .money > .direction.received {
	color: #5b5;
}
.transaction-match-header > .money > .direction.paid {
	color: #e40;
}
.transaction-match-header > .money > .direction > .amount {
	font-size: 32px;
	font-weight: bold;
}
.transaction-match-header > .details {
	float: left;
	width: 75%
}
.transaction-match-header > .details > .remittence-information {
	float: left;
	font-size: 14px;
	color: #777;
    margin-bottom: 5px;
	line-height: 1.5em;
}
.transaction-match-header > .details > .counterpart {
	font-size: 18px;
	font-weight: bold;
	color: #444;
	border-bottom: 1px solid #ddd;
	padding-bottom: 0.4em;
	margin-bottom: 0.4em;
}
.transaction-match-header > .details > .counterpart > ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}
.transaction-match-header > .details > .counterpart > ul > li {
	float: left;
	margin-right: 1em;
}
.transaction-match-header .ignore-transaction {
	margin-top: 1em;
}


.transaction-match-container {
	display: flex;
	float: left;
}
.transaction-match-content {
	box-sizing: border-box;
	padding: 2em;
	flex: 65%;
}
.transaction-match-selected {
	box-sizing: border-box;
	padding: 2em;
	flex: 35%;
	display: flex;
    flex-direction: column;
	background-color: #f8f8f8;
	border-left: 1px solid #ddd;
}

#payment-processor {
	margin-top: 1em;
}

#payment-processor > .match-list {
	float: left;
	width: 100%;
	clear: both;
}

#payment-processor > .match-list .match {
	float: left;
	width: 100%;
	border-bottom: 1px solid #eee;
	box-sizing: border-box;
}

#payment-processor > .match-list .match .matched-this-field {
	border: 1px solid #5b5;
	background-color: #e5f1e0;
	padding: 2px 7px;
	border-radius: 4px;
	margin-right: -8px;
	margin-left: -8px;
	white-space: nowrap;
}

#payment-processor > .match-list .match.titles {
	color:#aaa;
	font-size:11px;
	line-height: 1em;
}
#payment-processor > .match-list .match.titles > .registered-amount {
	font-weight: normal !important;
}

#payment-processor > .match-list .match > .add,
#payment-processor > .match-list .match > .match-percentage,
#payment-processor > .match-list .match > .registered-amount,
#payment-processor > .match-list .match > .amount,
#payment-processor > .match-list .match > .date,
#payment-processor > .match-list .match > .client,
#payment-processor > .match-list .match > .invoice-number,
#payment-processor > .match-list .match > .diff-amount {
	margin-right: 18px;
	padding: 10px 0;
	white-space: nowrap;

}

#payment-processor > .match-list .match > .add {
	float: left;
	width: 50px;
	padding: 7px 0;
}

#payment-processor > .match-list .match > .match-percentage {
	float: left;
	width: 50px;
	color: #aaa;
	text-align: right;
}

#payment-processor > .match-list .match.high-probability > .match-percentage span {
	color:#5b5;
	font-weight: bold;
}

#payment-processor > .match-list .match > .amount {
	float: left;
	width: 100px;
	text-align: right;
}

#payment-processor > .match-list .match > .date {
	float: left;
	width: 80px;
}

#payment-processor > .match-list .match > .invoice-number {
	float: left;
	width: 100px;
}

#payment-processor > .match-list .match > .client {
	float: left;
	width: 175px;
}

#payment-processor > .match-list .match.last,
#payment-processor > .match-list .match.total {
	border-bottom: 0;
}
#payment-processor > .match-list .match.total > .registered-amount {
	border-top: 2px solid #ddd;
}
#payment-processor > .match-list .match .invoice-data {
	border: 1px solid #ddd;
	float: left;
	width: 100%;
	clear: left;
	padding: 0;
	margin-bottom: 5px;
}


.matched-list {
	position: relative;
	width: 100%;
}

.match-list .show-more-matches {
	float: left;
	margin-top: 1em;
}

.match-list .match-not-found {
	padding: 1em;
	color: #aaa;
	float: left;
	text-align: center;
	width: 100%;
	margin-top: 11px;
	box-sizing: border-box;
}
.match-list .match-not-found i {
	font-size: 3em;
	margin-bottom: 0.25em;
}
.match-card {
	width: 100%;
	float: left;
	padding: 0.5em 0;
	border-bottom: 1px solid #eee;
}
.match-card.original {
	border-bottom: 2px solid #08f;
}
.match-card .match-card-icon,
.match-card .match-card-remove {
	color: #ff4400;
	float: left;
	width: 24px;
	font-size: 1.4em;
	margin-left: 5px;
}
.match-card .match-card-remove {
	cursor: pointer;
}
.match-card .match-card-remove:hover {
	color: #08f;
}
.match-card.original .match-card-icon,
.match-card.original .match-card-name,
.match-card.original .match-card-amount {
	color: #08f;
}
.match-card.match-help .match-card-icon,
.match-card.match-help .match-card-name {
	color: #aaa;
}
.match-card.match-amount .match-card-icon,
.match-card.match-amount .match-card-name,
.match-card.match-amount .match-card-amount {
	color: #aaa;
}
.match-card.match-amount.full-match .match-card-name,
.match-card.match-amount.full-match .match-card-amount {
	color: #5b5;
}
.match-card.match-amount.part-match .match-card-name,
.match-card.match-amount.part-match .match-card-amount {
	color: #f62;
}
.match-card.match-amount {
	margin-bottom: 0;
	border-bottom: none;
}

.match-card .match-card-name {
	float: left;
	padding: 0.25em;
	line-height: 1.25em;
}
.match-card .match-card-amount {
	float: right;
	padding: 0.25em;
}

.matched-full {
	color: #5b5;
	text-align: center;
	width: 100%;
	scale: 0%;
	opacity: 0;
	transition: .3s scale, .3s opacity;
	margin: 2em 0;
}
.matched-full.padding {
	padding: 3em;
	text-align: center;
}

.matched-full.show {
	scale: 100%;
	opacity: 1;
}
.matched-full > .icon {
	font-size: 50px;
	text-shadow: 0px 4px 0px rgba(0,0,0,0.1);
}
.matched-full > .text {
	font-weight: bold;
	font-size: 1.3em;
}
.open-next-transaction {
	margin-top: auto;
}


table.dataTable thead th,
table.dataTable thead td,
table.dataTable.no-footer {
	border-bottom:2px solid var(--theme-secondary) !important;
}

.ply-layer {
	font-family: inherit !important;
	color: #777 !important;
	font-size:16px !important;
	line-height:1.5em !important;
	box-shadow: 0 0 20px rgba(0,0,0,0.5) !important;
	border-radius: 5px !important;
	max-width: 700px;
}

.confirm.ply-layer {
	border: 2px solid #ff5722;
}

.ply-layer:before {
	text-align: center;
	margin: auto;
	color: #FFF;
	display: block;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	margin-top: -35px;
	border: 2px solid #fff;
	font-family: FontAwesome;
	font-size: 40px;
	line-height: 1.7em;
}

.confirm.ply-layer:before {
	background-color: #ff5722;
	content: "\f059";
}

.confirm.ply-layer .ply-ok {
    background-color: #ff5722 !important;
}

.alert.ply-layer:before {
	background-color: var(--theme-secondary);
	content: "\f06a";
}

.alert.ply-layer .ply-ok {
    background-color: var(--theme-secondary) !important;
}

.alert.ply-layer {
	border: 2px solid var(--theme-secondary);
}

.ply-ok, .ply-cancel {
	box-shadow: none !important;
	width: auto !important;
	padding-left: 26px !important;
	padding-right: 26px !important;
}

.ply-content {
    padding: 15px 30px 30px 30px !important;
}

.ply-content-header {
    font-weight: bold;
    margin-bottom: 0.8em;
    font-size: 1.5em;
}

.confirm.ply-layer .ply-content-header{
	color:#ff5722;
}
.alert.ply-layer .ply-content-header{
	color:var(--theme-secondary);
}


/* Print sylesheet for the reports */
@media print {
	@page {
		margin: 2em 1em;
	}

	body {
		background-color: #fff !important;
	}

	#systemTop {
		background:none !important;
		border:none !important;
		height: 26px;
	}

	#systemTopTitle .pageTitleContent {
		color:var(--theme-primary) !important;
	}

	#systemLeft,
	.options,
	.header-options,
	.systemTopOptions,
	.ajax_load_container,
	.reports input[type=submit],
	.tabs,
	.theTables td:first-of-type,
	.theTables th:first-of-type,
	.singleAction,
	input[type=checkbox],
	.print_button,
	.new_invoice_container button,
	.new_invoice_container input[type=button],
	.sidetabs,
	.navbar {
		display: none !important;
	}

	.reports input[type=text] {
		border: none;
		background: none;
		box-shadow: none;
		color: #08f;
	}

	#systemContent.menuCollapsed {
		margin-left: 0px !important;
	}

	#systemMain {
		margin-left: 0px !important;
	}

	.reports {
		margin:0;
		padding:0;
		box-shadow:none;
		border:none;
		width:100%;
		max-width: none;
		min-width: none;
		overflow: visible;
	}

	.reports select {
		background:#fff;
		border:none;
		-webkit-appearance: none;
	}

	.reports select::-ms-expand {
		display: none;
	}

	.companyName {
		display: block;
		color: #444;
		float: right;
		font-size: 20px;
	}
}

mark {
	padding: 0;
	background: transparent;
	background: linear-gradient(to right, #ffeb3b 50%, transparent 50%);
	background-position: right bottom;
	background-size: 210% 100%;
	transition: all 1s ease;
	background-repeat: no-repeat;
	color: #555;
}

mark.animate {
  background-position: left bottom;
}

.no-pdf-support {
	padding: 40px;
}
.no-pdf-support.hide-loader {
	height: 600px; /* to hide the loader */
	float: left;
	background-color: #444;
}
.no-pdf-support > p {
	font-size: 18px;
	line-height: 28px;
	text-align: center;
}
.no-pdf-support.white > p {
	color: #fff;
}
.sp-container.sp-light {
	background-color: #f7f7f7;
	border: 1px solid #b7b7b7;
	border-radius: 3px;
	box-shadow: 4px 4px 3px rgba(0,0,0,0.1);
}
.sp-container .sp-cancel {
	visibility: hidden;
}
.sp-container .sp-choose,
.sp-container .sp-choose:hover {
	width: 90px;
	background-image: none;
	background-color: #08f;
	color: #fff;
	padding: 6px;
	text-shadow: none;
	border: none;
}
.sp-container .sp-choose:hover {
	background-color: #5b5;
}
.sp-container .sp-palette-row-0 {
    margin-bottom: 10px;
}
.sp-container .sp-palette {
    max-width: 200px;
}

.sp-replacer.sp-light {
	border-radius: 3px;
	border:1px solid #aaa;
}

.sp-replacer.sp-light:hover, .sp-replacer.sp-light.sp-active {
	border-color: #08f;
}

.sendinvoice .item {
	float: left;
	clear: left;
	width: 100%;
	margin-bottom: 2px;
	display: table;
	transition: .3s background-color;
	cursor: pointer;
}
.sendinvoice .item label {
	cursor: pointer;
}

.sendinvoice .item.disabled {
	cursor: auto;
}

.sendinvoice .item.selected {
	background-color: #f5faff;
}

.sendinvoice .item:last-child {
	margin-bottom: 0;
}

.sendinvoice .item .icon {
	display: table-cell;
	width: 52px;
	text-align: center;
	height: 100%;
	padding: 5px 16px;
	color: var(--theme-secondary);
	font-size: 30px;
	margin-right: 16px;
	margin-bottom: 2px;
	color: #ccc;
}

.sendinvoice .item.graybox {
	background-color: #f6f6f6;
}

.sendinvoice .item.bluebox .icon {
	background-color: #EDF7FF;
	border-right: 1px solid #C6E5FF;
	border-left: 5px solid #EDF7FF;
	padding: 16px;
	color: var(--theme-secondary);
	transition: .3s background-color, .3s color, .3s border-color;
}

.sendinvoice .item.bluebox.selected .icon {
	background-color: #cde9ff;
	color: var(--theme-secondary);
	border-left-color: #94ceff;
	border-right-color: #94ceff;
}

.sendinvoice .item.bluebox.disabled .icon {
	background-color: #fff;
	border-left-color: #fff;
	border-right-color: #eee;
	color: #ddd;
}

.sendinvoice .item .content {
	display: table-cell;
	vertical-align: top;
	border-top:1px solid #eee;
}

.sendinvoice .item.graybox .content .text,
.sendinvoice .item.graybox .content .input {
	padding: 14px 0;
}

.sendinvoice .item:first-child .content {
	border-top:none;
}
.sendinvoice .item .content .check {
	float: left;
	clear: left;
}
.sendinvoice .item .content .text .title {
	padding-top: 2px;
}
.sendinvoice .item .content .text .title.large {
	color: var(--theme-secondary);
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 7px;
	padding-top: 0px;
}
.sendinvoice .item.disabled .content .text .title.large {
	color: #aaa;
}

.sendinvoice .item .content .input {
	margin-right: 15px;
	float: left;
	display: table-cell;
	padding: 20px 0;
}

.sendinvoice .item .content .text {
	display: table-cell;
	padding: 20px 0;
}
.sendinvoice .item .spacer {
	display: table-cell;
	width: 20px;
}

.sendinvoice .item .content .text .email-data,
.sendinvoice .item .content .text .email-data p {
	line-height: 1.6em;
	color: #676767;
	width: 680px;
	margin-bottom: 6px;
}
.sendinvoice .item .content .text .description {
	line-height: 1.6em;
	color: #676767;
	width: 680px;
}
.sendinvoice .item .content .text .description p {
	margin-bottom: 6px;
}
.sendinvoice .item .content .text .price {
	background-color: #5b5;
	color: #fff;
	display: inline-block;
	font-size: 12px;
	padding: 2px 5px;
	border-radius: 4px;
	margin-left: 10px;
	font-weight: normal;
}

.sendinvoice .item .content .text .price.loading {
	background-color: transparent;
	color: #aaa;
}

.add-timestamp {
    float: left;
    right: 9px;
    bottom: 13px;
    font-size: 20px;
    border: 1px solid #ddd;
    padding: 2px 9px;
    border-radius: 4px;
    color: var(--theme-secondary);
    cursor: pointer;
    transition: .3s background-color, .3s color, .3s border-color;
}
.add-timestamp:hover {
	background-color: var(--theme-secondary);
    border-color: var(--theme-secondary);
	color: #fff;
}
.cannotSendRepeatingDay {
	color: var(--theme-secondary);
	white-space: nowrap;
	float: right;
}
.cannotSendRepeatingDay:hover {
	color: #05a;
}
.repeatingInvalidConfig {
	color: #f40;
	white-space: nowrap;
	float: right;
}
.repeatingInvalidConfig:hover {
	color: #f62;
}
.help-tip {
	color: var(--theme-secondary);
	position: relative;
	font-size: 14px;
	display: inline-block;
	cursor: pointer;
	margin-left: 3px;
}
.help-tip .help-text {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	background-color: var(--theme-primary);
	color: #fff;
	padding: 7px 9px;
	float: left;
	border: 1px solid #fff;
	box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
	border-radius: 4px;
	left: 22px;
    top: -5px;
    transition: 0s visibility, .5s opacity;
    width: 250px;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
    z-index: 3;
}
.help-tip:hover {
	color: var(--theme-secondary);
}
.help-tip:hover .help-text {
	visibility: visible;
    font-size: 12px;
	opacity: 1;
}
.help-tip .help-text:after, .help-tip .help-text:before {
	right: 100%;
	top: 12px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.help-tip .help-text:after {
	border-color: rgba(0, 136, 255, 0);
	border-right-color: var(--theme-primary);
	border-width: 5px;
	margin-top: -5px;
}
.help-tip .help-text:before {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #fff;
	border-width: 8px;
	margin-top: -8px;
}

/* place a line left of items within an optgroup */
.select2-container--default .select2-results__option .select2-results__option:before {
	content: "";
	border-left: 1px solid #ccc;
	height: 7px;
	width: 6px;
	margin-right: 5px;
	margin-bottom: 3px;
	border-bottom: 1px solid #ccc;
	border-bottom-left-radius: 3px;
	margin-left: 4px;
	display: inline-block;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 24px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 25px !important;
	color: #575656 !important;
}

.select2-container .select2-selection--single {
	height: 26px !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--theme-secondary) !important;
}
.select2-container--default .select2-selection--single {
	border-color: #ddd !important;
}
.select2-container--default:hover .select2-selection--single {
	border-color: #bbb !important;
}

.select2-container--default .select2-results > .select2-results__options {
	max-height: 350px !important;
}

.select2-container--open .select2-dropdown--below {
	box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.1)
}

.select2-debitor-item {
	display: flex;
	justify-content: space-between;
}
.select2-results__option__tag {
	display: flex;
	margin-left: auto;
}
.select2-results__option__tag .tag-item {
	font-size: .8em;
	padding: 1px 4px;
	margin: 0 4px 0 0;
	max-width: 75px;
	min-width: 4px;
	align-self: flex-start;
}

.select2-results__option__extra {
	color: #aaa;
	padding-right: .5em;
}
.select2-results__option--highlighted .select2-results__option__extra {
	color: #fff;
}

/* fix autocomplete menu */
.ui-menu-item-wrapper {
    padding: 6px 8px;
    display: block;
}

.chooser {
	width: 60%;
	margin: 0 auto;
	padding: 0;
}

.chooser li {
	width: 100%;
	list-style: none;
	margin: 0;
	clear: both;
	margin-bottom: 4px;
	float: left;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #fff;
	border-radius: 6px;
	transition: .3s background-color, .3s border-color;
}

.chooser li:hover:not(.not-available) {
	border-color: #08f;
	background-color: #e6f3ff;
	cursor: pointer;
}

.chooser li .channel-logo {
	float: left;
	margin-right: 20px;
}

.chooser li .channel-logo img {
	width: 40px;
	height: 40px;
	float: left;
}

.chooser li.not-available .channel-logo img {
	opacity: 0.3;
}

.chooser li .channel-name {
	float: left;
	margin-top: 12px;
}

.chooser li .channel-name .channel-title {
	font-size: 16px;
}

.chooser li.not-available .channel-name {
	margin-top: 3px;
}

.chooser li.not-available .channel-status {
	color: #adadad;
	margin-top: 1px;
}

.chooser li.not-available .channel-name {
	color: #888;
}



.notify-channels {
	margin-top:12px;
}

.notify-channels .notify-channel {
	width: 100%;
	float: left;
	margin-bottom: 12px;
}

.notify-channels .notify-channel .icon {
	float: left;
	margin-right: 20px;
}

.notify-channels .notify-channel .icon img {
	width: 26px;
	height: 26px;
}

.notify-channels .notify-channel .data {
	float: left;
}

.notify-channels .notify-channel .data .title {
	font-weight: bold;
	color: #555;
	margin-top: 6px;
}

.notify-channels .notify-channel .data .entries ul {
	margin: 5px 0;
	padding: 0;
	list-style: none;
}

.notify-channels .notify-channel .data .entries ul li {
	margin: 5px 0;
}

.steps {
	clear: both;
	display: inline-block;
	width: 100%;
	margin-bottom: 30px;
}
.steps.with-separator {
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid #eee;
}
.steps.with-separator:last-child {
	border-bottom: none;
}
.steps:last-child {
	margin-bottom: 0px;
}
.steps .step {
	float: left;
	margin-right: 26px;
}
.steps .step div {
	color: #08f;
	text-align: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	line-height: 1.5em;
	font-size: 29px;
	border: 2px solid #08f;
	box-shadow: 0 0 0 3px rgba(0, 136, 255, 0.2);
}
.steps .stepContent {
	float: left;
	text-align: left;
	width: 80%;
}
.tfa_method {
	float: left;
	clear: left;
	width: 100%;
	border-bottom: 1px solid #eee;
	margin-top: 20px;
	padding-bottom: 20px;
}
.tfa_method:last-child {
	border-bottom: none;
}
.tfa_method .icon {
	float: left;
	width: 50px;
	text-align: center;
	margin-right: 15px;
}
.tfa_method .icon i {
	color: #08f;
	font-size: 40px;
}
.tfa_method .name {
	float: left;
}
.tfa_method .name .title {
	font-size: 20px;
	color: #666;
	margin-bottom: 3px;

}
.tfa_method .name .status {
	font-weight: bold;
	font-size: 15px;
	color: #aaa;
}

.tfa_method .name .status.enabled {
	color: #5b5;
}

.tfa_method .config {
	float: right;
	margin-top: 6px;
}

.bcc_address_table td:first-child,
.bcc_address_table th:first-child {
	text-align: left;
}

.bcc_address_table th {
	text-align: center;
}

.bcc_address_table td input[type=text] {
	width: 400px;
}

.bcc_address_table td {
	width: 70px;
	text-align: center;
	vertical-align: text-top;
}

.bcc_address_table td:first-child {
	width: auto;
}

.promoplace.left {
	width:77%;
	float:left;
}
.promoplace.right {
	width:20%;
	float:right;
	margin-right: 1em;
}
.promoplace.right p {
	text-align:center;
	color: #555;
}
.promoplace.right p.title {
	color: #5b5;
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 7px;
}
.promoplace.right p.subtitle {
	color: #aaa;
	font-size: 14px;
	line-height: 1.3em;
	margin-bottom: 12px;
}
.promoplace.right p i {
	color: #5b5;
	font-size: 40px;
	margin-bottom: .5em;
}
.promoplace.right ul {
	padding: 0;
	position: relative;
	margin-top: 30px;
	list-style: none;
	margin-bottom: 8px;
	overflow: hidden;
	color: #555;
	line-height: 1.4em;
}
.promoplace.right ul li {
	list-style: none;
	margin-bottom: 10px;
	overflow: hidden;
	margin-left: 24px;
	color: #555;
}
.promoplace.right ul li:before {
	font-family: 'FontAwesome';
	content: '\f00c';
	color: #5b5;
	position: absolute;
	left: 0;
	font-size:14px;
	-webkit-font-smoothing: antialiased;
}
.maintenance-notification {
	padding: 1em 1.4em 1em 4.5em;
	color: #FF5722;
	margin-bottom: 2em;
	border-radius: 5px;
	line-height: 1.5em;
	font-size: 14px;
	border: 1px solid #ff5722;
	position: relative;
	background-color: rgba(255, 87, 34, 0.05);
}

.maintenance-notification:before {
	font-family: FontAwesome;
	content: "\f256";
	display: inline-block;
	padding-right: 3px;
	vertical-align: middle;
	position: absolute;
	left: 0.3em;
	top: 0.7em;
	font-size: 2.6em;
	opacity: 0.5;
}

.notification-highlight {
	background-color: #e9f3ff;
	border: 1px solid #d1e6fe;
	padding: 6px;
	border-radius: 5px;
	position: relative;
}

.notification-highlight:before {
	font-family: FontAwesome;
	content: "\f060";
	display: block;
	font-size: 1.5em;
	color: #08f;
	float: right;
	position: absolute;
	right: 7px;
	top: 2px;
}

.email-validator {
	text-align: center;
	margin-top: 10em;
}

.email-validator i {
	font-size: 170px;
	color: #fff;
	text-shadow: 5px 5px rgba(0,0,0,0.2);
	margin-bottom: 70px;
}

.email-validator p {
	text-align: center;
	font-size: 2em;
	color: #fff;
}
.email-validator p:nth-of-type(2) {
	text-align: center;
	font-size: 1.25em;
	color: #fff;
	opacity: .7;
}

.doc-not-found {
	text-align: center;
	margin-top: 7em;
	color: #ccc;
}

.doc-not-found i {
	font-size: 80px;
	margin-bottom: 20px;
}

.doc-not-found p {
	text-align: center;
	font-size: 2em;
	color: #ccc;
}

.header-alert {
	position: absolute;
	padding: 6px 0;
	background-color: #ec3a3a;
	text-align: center;
	color: #fff;
	font-weight: bold;
	top: 8px;
	left: 183px;
	right: 153px;
	border-radius: 6px;
	box-shadow: 0px 2px 6px rgba(0,0,0,0.4);
	z-index: 9;
	border: 2px solid #b33434;
}

.wefact-faq-list {
	margin-bottom:0 !important;
}

.wefact-faq-content {
	padding: 15px;
	float: left;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	width: 100%;
	box-sizing: border-box;
	border-bottom: 1px solid #eee;
	border-right: 1px solid #eee;
	border-left: 1px solid #eee;
}

.wefact-faq-content p:last-child {
	margin: 0;
}

.wefact-usp-flex-container {
	display: flex;
	flex-direction: row;
	gap: 0.75rem;

}

.wefact-usp-block {
	background: white;
	padding: 0.75em;
	width: 25%;
	text-align: center;
	border-radius: 11px;
	border: 1px solid #ddd;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.05);
}

.wefact-usp-block i {
	font-size: 24px;
	margin-bottom: .25em;
}

.wefact-header-bar {
	width: 100%;
	float: left;
	background: #d4edda;
	text-align: center;
	color: #439943;
	padding: 8px;
	font-weight: bold;
	border-bottom: 1px solid #acd5b1;
	font-size: 1.1em;
	position: relative;
	z-index:12;
	box-sizing: border-box;
	box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
}

.wefact-header-bar a {
	margin-left: 1em;
}
.wefact-header-bar i {
	margin-right: 1em;
}

.wefact-header-bar.wefact-header-bar-warning {
	color: #ff5722;
	background-color: #fff1ed;
	border-bottom-color: #fdcfc0;
}