@import url('../fonts/font-awesome/css/all.css?2');
/* COLORS AND VARS */
	body {
		/* color-scheme: light; */
	    --size-header-height: 4em;
	    --size-side-menu-width: 22em;
	    --size-right-controls-width: 30em;

		--color-body-bg: white;
		--color-protip-bg: #ffffff;
		--color-dialog-bg: #ffffff;
		--color-dialog-overlay: rgba(255,255,255,0.5);
		--color-dialog-overlay-heavy: rgba(255,255,255, 0.9);

		--color-text: #3E4956;
		--color-text-secondary: #79889D;
		--color-text-tertiary: #777777;
		--color-text-input: #49535F;
		--color-text-lighter: #557286;
		--color-text-inverted: white;
		--color-subtitle: #B0B4C2;
  		--color-link: #0271E3;
  		--color-link-secondary: #4195DE;
  		--color-link-hover: #225291;
  		--color-blue: #0271E3;
  		--color-blue-medium: #0190F6;
  		--color-blue-darker: #027BD2;
  		--color-red: #E33C3F;
  		--color-red-darker: #C14440;
  		--color-red-light: #fef3f2;
  		--color-red-medium: #fde7e4;
  		--color-green: #18D06C;
  		--color-green-darker: #16C266;
  		--color-green-light: #a5ffed;
  		--color-header-bg: #FFFFFF;
  		--color-border:#DDDDDD;
  		--color-warning: #F3B72E;
  		
  		--color-side-menu-item: #3E4956;
  		--color-side-menu-item-icon: #617083;
  		--color-side-menu-bg: #F3F5F8;
  		--color-side-menu-hover: #ffffff;
  		--color-side-menu-hover-bg: #110915;

  		--color-input-placeholder: #8D9599;
  		--color-input-border: #B6C5CB;
  		--color-input-border-disabled: #E0E0E0;
  		--color-input-focus: #F3F5F8;
  		--color-input-outline: rgba(0, 107, 194, 0.25);
  		--color-input-bg: white;

  		--color-table-header-normal: #F3F5F8;
  		--color-table-header-medium: #ecf1f9;
  		--color-table-header-dark: #e7eef8;

  		--color-table-cell-normal: #ffffff;
  		--color-table-cell-medium: #f3f6fe;
  		--color-table-cell-dark: #f2f5fb;

  		--color-shadow: rgba(0, 0, 0, 0.075);
  		--color-shadow-light: rgba(0, 0, 0, 0.05);

  		--color-table-group: #F3F5F8;
  		--color-inactive: rgba(0,0,0,0.15);
	}
	body.night {
		/* color-scheme: dark !important; */
		--color-body-bg: #363a48;
		--color-protip-bg: #333745;
		--color-side-menu-bg: #333745;
		--color-dialog-bg: #333745;
		--color-dialog-overlay: rgba(54, 58, 72, 0.75);
		--color-dialog-overlay-heavy: rgba(51, 55, 69, 0.95);
		--color-shadow: rgba(0, 0, 0, 0.33);
		--color-shadow-light: rgba(0, 0, 0, 0.1);
		--color-input-bg: #3E4F61;
		--color-input-border: #353944;
		--color-input-border-disabled: #353944;
		--color-input-focus: #3D4A5A;
		--color-text: #ffffff;
		--color-text-secondary: rgba(120, 208, 255, 0.5);
		--color-text-tertiary: rgba(255,255,255,0.25);
		--color-text-input: #eeeeee;
		--color-border: #393f55;
		--color-side-menu-item: #eeeeee;
		--color-link: #2BA7FF;
		--color-blue: #2BA7FF;
		--color-red: #F15552;
		--color-red-darker: #D25952;
		--color-table-group: #333745;
		--color-inactive: rgba(255,255,255,0.15);
	}

/* MAIN */
	* {
		padding: 0;
		margin: 0;
	    box-sizing: border-box;
	}
	html, body {
		width: 100%;
		height: 100%;
		max-width: 100vw;
		background-color: var(--color-body-bg);
		color: var(--color-text);
		font-size: 13px;
		font-weight: normal;
		line-height: 1.4;
		background-size: 100% 100%;
		background-attachment: fixed;
		scroll-behavior: smooth;
		font-family: 'Roboto', sans-serif;
		margin: 0;
		padding: 0;	
	}
	html, body, input, button, textarea{
		font-family: 'Roboto', sans-serif;
		font-weight: 400;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		-webkit-tap-highlight-color: transparent;
		-webkit-focus-ring-color: rgba(255, 255, 255, 0.0);
		-webkit-backface-visibility: hidden;
		-webkit-font-smoothing: antialiased;
		font-smoothing: antialiased;
		-moz-osx-font-smoothing: graygauge;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	}
	input, button, textarea {
		-webkit-appearance: none;
   		-moz-appearance:    none;
   		appearance:         none;
   		outline: none;
	}
	input[type=text] {
		cursor: text !important;
	}
	.body {
		width: 100vw;

		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: nowrap;
		background-color: var(--color-body-bg);
		/* border-top: 1px solid var(--color-border) !important; */
	}
	.body-unauth {
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		background-color: var(--color-body-bg);
	}
	main.unauth {
		flex: 1 1 auto;
		width: 100vw !important;
		max-width: 100vw;
		overflow-x: hidden;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-left: 0;
	}
	::-webkit-input-placeholder {
		color: var(--color-input-placeholder);
	}
	::-moz-placeholder {
		color: var(--color-input-placeholder);
	}
	:-ms-input-placeholder {
		color: var(--color-input-placeholder);
	}
	:-moz-placeholder {
		font-size: 1em;
		color: var(--color-input-placeholder);
	}
	a {
		text-decoration: none;
		color: var(--color-link);
		text-transform: none;
	}
	a.default:hover {
		color: var(--color-link-hover) !important;
		text-decoration: underline;
	}
	sup {

		font-size: 0.9em;
	}
	.secondary {
		color: var(--color-text-secondary);
	}
	.dependent.disabled {
		pointer-events: none;
	}
	hr {
		width: 100%;
		border: none;
		height: 1px;
		background-color: var(--color-border);
		margin: 1.5rem 0;
	}
	hr.invisible {
		background-color: transparent;
	}

/* THEME SWITCHER */

	header {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		padding: 1em 2em;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		background-color: var(--color-body-bg);
	}
	div.header {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		padding: 0 0.25em 0.75em 0.25em;
		margin-bottom: 2.25em;
		border-bottom: 1px solid var(--color-border);
	}

	a.theme-switch {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 2.2rem;
		height: 2.2rem;
		padding: 0;
		border-radius: 0.33em;
		margin-right: 0.5em;
		color: var(--color-text-secondary);
	}
	a.theme-switch.current {
		background-color: rgba(169, 169, 169, 0.15);
		border: 1px solid rgba(169, 169, 169, 0.25);
	}
	a.theme-switch::before {
		font-family: 'Font Awesome 5 Pro';
		line-height: 1;
		font-size: 1.35rem;
		font-weight: bold;
		content: '\f185';
	}
	a.theme-switch.night::before {
		content: '\f186';
		font-size: 1.25rem;
	}
	
/* UNAUTH */

	.unauth {
		width: 100vw;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		font-size: 1em;
		border: none !important;
		padding: 0;
	}
	.unauth.sub {
		width: auto;
		height: auto;
		min-width: 400px;
	}
	section.unauth {
		width: 100%;
	}
	.unauth form {
		width: 90%;
		max-width: 400px;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: var(--color-body-bg);
		/* border: 1px solid var(--color-input-border); */
		border-radius: 0.75em;
		padding: 2em 3em;
		box-shadow: 0 1em 4em var(--color-shadow);
	}
	.unauth form > * {
		width: 100%;
		margin-top: 1em;
	}
	.unauth form > div {
		text-align: center;
	}
	.unauth input[type=text],
	.unauth input[type=password] {
		margin-bottom: 2em;
		height: 3.4em;
	}
	.unauth button {
		color: white;
		background-color: var(--color-blue);
		border: none;
		border-radius: 0.3em;
		outline: none;
		padding: 1.5rem 1rem;
		font-size: 1.2em;
		cursor: pointer;
		font-weight: 500;
		position: relative;
		display: block;
		z-index: 2;
		margin: 1.0em 0 0 0;
	}
	.unauth .logo {
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 2.75em;
	}
	.unauth .logo b {
		color: var(--color-text-secondary);
		font-size: 0.9em;
	}
	.unauth .logo .inner {
		width: 40%;
		height: 0;
		padding-bottom: calc(101/400*40%);
		background-image: url('/images/logo.svg?3');
		background-size: 100% 100%;
	}
	.night .unauth .logo .inner {
		background-image: url('/images/logo-night.svg?3');
	}

/* SIDE MENU */
	.side-menu {
		flex: 0 0 var(--size-side-menu-width);
		height: calc(100vh - 1em);
		padding: 1em 1em 1em 1em;
		margin-top: 1em;

		background-color: var(--color-side-menu-bg);
		border-top-right-radius: 0.5em;
		border: 1px solid var(--color-border);
		border-left: none;
		border-bottom: none;
		/* border-right: 1px solid var(--color-border); */

		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
		z-index: 100;
		position: relative;
	}
	.side-menu .logo {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 2.0em;
		gap: 0.5em;
	}
	.side-menu .logo b {
		color: var(--color-text-secondary);
		font-size: 0.9em;
	}
	.side-menu .logo .inner {
		width: 50%;
		height: 0;
		padding-bottom: calc(101/400*50%);
		background-image: url('/images/logo.svg?3');
		background-size: 100% 100%;
	}
	.night .side-menu .logo .inner {
		background-image: url('/images/logo-night.svg?3');
	}
	.side-menu > div.menu-section {
		width: 100%;
		padding-bottom: 0.5em;
	}
	/* category title */
	.side-menu > div.menu-section > span {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: nowrap;
		/* padding: 0.5em; */
		font-weight: 400;
		text-transform: uppercase;
		font-size: 1.0em;
		color: var(--color-text-secondary);
		border-radius: 3px;
		margin-bottom: 1em;
		/* background-color: var(--color-shadow); */
	}
	.side-menu > div > ul {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		list-style-type: none;
		padding-left: 1em;
	}
	.side-menu ul > li {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 0 0.5em;
		margin: 0 0 0.25em 0;
		position: relative;
		cursor: pointer;
	}
	.side-menu > div > ul > li > a {
		flex: 0 1 auto;
		height: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		padding: 0.4rem 0;
		text-decoration: none;
		color: var(--color-side-menu-item);
		font-size: 1.05em;
		text-align: left;
		font-weight: normal;
		width: 100%;
	}
	.side-menu > div > ul > li > a::before {
		font-family: 'Font Awesome 5 Pro';
		flex: 0 0 1rem;
		font-size: 1.2em;
		width: 1rem;
		overflow: visible;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		margin-right: 0.85rem;
		margin-top: -1px;
		font-weight: bold;
	}
	.side-menu > div > ul > li.expandable > a > span {
		margin-left: auto;
	}
	.side-menu > div > ul > li.expandable > a > span::after{
		content: '\f104';
		font-family: 'Font Awesome 5 Pro';
		font-weight: 500;
		color: var(--color-text);
		font-size: 1.5rem;
		line-height: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		width: 1em;
		height: 100%;
	}
	.side-menu > div > ul > li.expandable.expanded > a > span::after{
		content: '\f107';
	}
	.side-menu > div > ul > li.active > a {
		font-weight: 600;
		color: var(--color-link) !important;
	}
	.side-menu > div > ul > li > a:hover {
		color: var(--color-link) !important;
	}
	.side-menu > div > ul > li.expandable:not(.expanded) > ul {
		display: none;
	}
	.side-menu > div > ul > li > ul {
		width: auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding-left: 1em;
		margin-top: 0.75em;
	}
	.side-menu > div > ul > li > ul > li {
		width: auto;
		
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		height: 1.8rem !important;
		font-size: 0.95rem;
		line-height: 1;
		border-radius: 0.9rem;
		padding: 0 1em;
		font-weight: 400;
	}
	.side-menu > div > ul > li > ul > li.active {
		background-color: rgba(0, 0, 0, 0.06);
		color: var(--color-blue-medium);
	}
	.side-menu > div > ul > li > ul > li > a {
		color: var(--color-text);
	}
	.side-menu > div > ul > li > ul > li.active > a{
		color: var(--color-blue-medium);
		font-weight: 500;
	}
	.side-menu > div > ul > li > ul > li > a:not(.active):hover {
		color: var(--color-link);
	}	
	.side-menu ul li.users > a::before{
		content: '\f500';
	}
	.side-menu ul li.settings > a::before{
		content: '\f1de';
	}
	.side-menu ul li.docs > a::before{
		content: '\f5db';
	}
	.side-menu ul li.patients > a::before{
		content: '\f7e6';
	}

	

	
	.side-menu .logout-block {
		margin-left: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-end;
		font-weight: 500;
		color: var(--color-text-secondary);
	}
	.side-menu .logout-block a.logout {
		margin-left: 0.5em;
		font-weight: 600;
		color: var(--color-text-secondary);
	}
	.side-menu .logout-block a.logout::before {
		content: '\f08b';
		font-family: 'Font Awesome 5 Pro';
		font-size: 1.4em;
	}

	.side-menu .app-version{
		color: var(--color-text-tertiary);
		width: 100%;
		white-space: nowrap;
		font-size: 0.9em;
		font-weight: 500;
		margin: auto 0 0 0;
		padding: 0;
		padding: 0.5em 0.1em 0 0.1em;
		background-color: var(--color-side-menu-bg);
	}

/* MARKDOWN */

	.markdown-body {
		width: 100%;
		max-width: 100%;
		padding: 1rem 1.25rem 1.5rem 1.25rem;
		color: var(--color-text);
		line-height: 1.55;
	}
	.markdown-body h1,
	.markdown-body h2,
	.markdown-body h3,
	.markdown-body h4,
	.markdown-body h5,
	.markdown-body h6 {
		margin: 1.2rem 0 0.6rem 0;
		font-weight: 700;
		color: var(--color-text);
	}
	.markdown-body h1 {
		font-size: 1.8rem;
	}
	.markdown-body h2 {
		font-size: 1.45rem;
	}
	.markdown-body h3 {
		font-size: 1.2rem;
	}
	.markdown-body p {
		margin: 0.55rem 0;
	}
	.markdown-body ul,
	.markdown-body ol {
		padding-left: 1.35rem;
		margin: 0.55rem 0;
	}
	.markdown-body li {
		margin: 0.2rem 0;
	}
	.markdown-body code {
		font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
		font-size: 0.9em;
		padding: 0.1rem 0.35rem;
		border-radius: 0.25rem;
		background: rgba(0, 0, 0, 0.08);
	}
	.markdown-body pre {
		overflow: auto;
		padding: 0.8rem;
		border-radius: 0.4rem;
		background: rgba(0, 0, 0, 0.08);
	}
	.markdown-body pre code {
		padding: 0;
		background: transparent;
	}
	.markdown-body blockquote {
		border-left: 3px solid var(--color-blue-medium);
		padding: 0.35rem 0.8rem;
		margin: 0.75rem 0;
		color: var(--color-text-secondary);
		background: rgba(0, 0, 0, 0.03);
	}
	.markdown-body a {
		color: var(--color-link);
		text-decoration: none;
	}
	.markdown-body a:hover {
		text-decoration: underline;
	}

/* BUTTONS */

	.button {
		text-decoration: none !important;
		color: white;
		background-color: var(--color-blue-medium);
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		border: none;
		border-radius: 0.3rem;
		padding: 1.1rem 2rem;
		font-weight: 600;
		line-height: 1;
		height: 3.2rem;
		font-size: 1.05rem;
		white-space: nowrap;
		cursor: pointer;
		position: relative;
	}
	.button.small {
		font-size: 1.0rem;
		padding: 0.5rem 0.75rem;
	}
	.button.red {
		background-color: var(--color-red);
	}
	.button.icon::before {
		content: '';
		font-family: 'Font Awesome 5 Pro';
		margin-right: 0.5em;
	}

	.button:not(.disabled):not(.process):hover{
		background-color: var(--color-blue-darker);
	}
	.button.red:not(.disabled):not(.process):hover{
		background-color: var(--color-red-darker);
	}


	.button.green{
		background-color: var(--color-green);
	}
	.button.green:not(.disabled):not(.process):hover{
		background-color: var(--color-green-darker);
	}
	.button.disabled {
		cursor: default;
		pointer-events: none;
		opacity: 0.7;
		color: rgba(255, 255, 255, 0.75);
	}
	.button.nobody {
		background: transparent;
		color: var(--color-blue);
		padding: 1rem 0;
	}
	.button.nobody:hover{
		color: var(--color-blue-medium);
		background: transparent !important;
	}
	.button.invisible {
		visibility: hidden;
		pointer-events: none;
	}
	.button.icon.run::before {
		content: '\f04b';
		margin-right: 0.7em;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1em;
		height: 1em;
	}
	.button.icon.search::before {
		content: '\f002';
		margin-right: 0.7em;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1em;
		height: 1em;
	}
	.button.icon.dollar-sign::before {
		content: '\f09d';
		margin-right: 0.7em;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1em;
		height: 1em;
	}
	.button.icon.settings::before {
		content: '\f013';
	}
	.button.icon.add-member::before {
		content: '\f234';
	}
	.button.icon.add::before {
		content: '\f067';
	}
	.button.icon.delete::before {
		content: '\f2ed';
		margin-right: 0;
	}
	.button.icon.trash::before {
		content: '\f2ed';
	}
	.button.icon.close::before {
		content: '\f00d';
		font-weight: 300;
	}
	.button.icon.undo::before {
		content: '\f0e2';
		font-weight: 600;
	}
	.button.icon.redo::before {
		content: '\f01e';
		font-weight: 600;
	}
	.button.icon.save::before {
		content: '\f0c7';
		font-weight: 600;
		font-size: 1.1em;
	}
	.button.icon.xls::before {
		content: '\f65b';
		font-weight: 600;
	}

	.button.process {
		font-size: 0px;
		pointer-events: none;
	}
	.button.process::before {
		content: '\f3f4' !important;
		font-family: 'Font Awesome 5 Pro';
		animation: spin 0.5s linear infinite;
		font-size: 1.2rem;
		font-weight: 600;
		margin-right: 0 !important;
	}

	.button.running::before {
		content: '\f3f4' !important;
		font-family: 'Font Awesome 5 Pro';
		animation: spin 0.45s linear infinite;
		font-weight: bold;
	}
	
/* TITLES */
	.workspace .view-header {
		--size-view-header-height: 3rem; /* calc(var(--size-header-height) * 1.65); */
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		line-height: 1;
		height: var(--size-view-header-height);
		flex: 0 0 var(--size-view-header-height);
		margin-bottom: 0.5rem;
		margin-top: 0;
		padding-right: 2em;
	}
	.workspace .view-header .section-title {
		font-size: 1.75em;
		width: 100%;
		font-weight: 400;
		color: var(--color-text);
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		text-transform: capitalize;
	}
	.section-title.lowercase {
		text-transform: none !important;
	}
	.workspace .view-header .section-title i::before{
		content: '\f054';
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: 'Font Awesome 5 Pro';
		margin: 0 1.25rem;
		font-style: normal;
		font-size: 0.6em;
		font-weight: bold;
		color: var(--color-text-secondary);
	}
	.workspace .view-header .section-title a {
		color: var(--color-text);
		text-transform: capitalize;
	}
	.workspace .view-header .section-title a:hover {
		color: var(--color-link);
	}
	.section-title.member{
		text-transform: none !important;
	}
	.workspace .view-header .section-title a.button {
		font-size: 1.5em;
		margin-left: auto;
		color: var(--color-link);
	}

/* WORKSPACE */
	.workspace {

		flex: 1 1 auto;
		display: flex;
		height: 100%;
		overflow-x: hidden;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		padding: 1rem 1.5rem 0 1.5rem;
		/* max-width: calc(2048px - var(--size-side-menu-width));		 */
	}
	.workspace.fullwidth {
		max-width: calc(100vw - var(--size-side-menu-width));
	}
	.workspace > * {
		/* max-width: calc(1920px - var(--size-side-menu-width)); */
	}
	/* Empty */
		.workspace:empty{
			justify-content: center;
		}
		.workspace:empty::before{
			font-weight: bold;
			color: var(--color-input-bg);
			font-size: 10em;
			white-space: pre;
			line-height: 1;
			text-transform: uppercase;
		}
		.workspace.forbidden:empty::before{
			content: '403';
		}
		.workspace.forbidden:empty::after{
			content: 'Forbidden';
			font-weight: bold;
			color: var(--color-input-bg);
			font-size: 2em;
		}
		.workspace.notfound:empty::before{
			content: '404';
		}
		.workspace.notfound:empty::after{
			content: 'Not Found';
			font-weight: bold;
			color: var(--color-input-bg);
			font-size: 2em;
		}
	
/* TABLE */

	/* General */
		.table-view {
			flex: 1 1 auto;
			width: 100%;
			overflow-y: scroll;
			overflow-x: auto;
			z-index: 0;
			position: relative;
		}
		.table-view table {
			width: 100% !important;
			max-width: 100% !important;
			margin-bottom: 4em;
			table-layout: auto;
		}
		.protip-content .table-view table {
			margin-bottom: 0;
		}
		table-view table tbody tr {
			position: relative;
		}

	/* Thead */
		.table-view table thead {
			z-index: 5;
		}
		.table-view table thead th {
			border-bottom: 1px solid var(--color-border);
			background-color: var(--color-body-bg);
			text-align: left;
			font-size: 1.1rem;
			padding: 0.5rem 1rem 0.5rem 1rem;
			height: 3.6rem;
			/* width: 100%; */
			overflow: hidden;
			font-weight: 500;
			color: var(--color-text);
			text-transform: uppercase;
		}
		.table-view table thead th.group-lead {
			border-left: 5px solid white;
		}
		.table-view table thead th:first-of-type.group-lead {	
			border-left: none;
		}
		.table-view table thead th:last-of-type {	
			text-align: right;
		}
		.table-view table thead th.color-medium {
			background-color: var(--color-table-header-medium);
		}
		.table-view table thead th.color-dark {
			background-color: var(--color-table-header-dark);
		}
		.table-view table thead th > div {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: nowrap;
			width:: 100%;
		}
		.table-view table thead th span {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			/* justify-content: space-between; */
			justify-content: center;
			height: 100%;
			line-height: 1.4;
			/* border: 1px solid #ccc; */
		}	
		.table-view table thead th:last-of-type span {	
			align-items: flex-end;
		}
		.table-view table thead th  span > small {
			font-weight: 500;
			font-size: 0.75em;
			opacity: 0.75;
			line-height: 1;
			margin-top: auto;
		}
		.table-view table thead th  span > small:empty{
			margin-top: 0;
		}
		.table-view table.sticky thead th {
			position: sticky;
			top: 0;
			z-index: 5;
			white-space: nowrap;
		}
		.table-view table.forecast.sticky thead th {
			position: sticky;
			top: 1.5rem;
			z-index: 5;
			white-space: nowrap;
		}
		.table-view table thead th.sorting {
			cursor: pointer;
		}
		.table-view table thead th.sorting > span {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
		}
		.table-view table thead th:last-of-type > span {
			justify-content: flex-end !important;
		}
		.table-view table thead th.sorting > span::after {
			content: '';
			font-family: 'Font Awesome 5 Pro';
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;	
			width: 0.5em;
			margin-left: 0.33em;
			display: inline-block;
			text-align: center;
			font-weight: normal;
		}
		.table-view table thead th.sorting.sorting_asc > span::after {
			content: '\f309';
		}
		.table-view table thead th.sorting.sorting_desc > span::after {
			content: '\f30c';
		}

	/* Footer [tfoot] - used as additional header to show totals */
		.table-view table tfoot.header { 
			display: table-header-group !important; 
		}
		.table-view table tfoot.header tr th {
			text-align: center;
			background-color: white;
			color: var(--color-text-secondary);
			font-weight: 500;
			font-size: 1.0rem;
			vertical-align: top;
			height: 1.5rem;

			position: sticky;
			top: 0;
			z-index: 5;
			white-space: nowrap;
		}
		.table-view table tfoot.header tr th.foldable,
		.table-view table tfoot.header tr th.non-foldable {
			background-color: var(--color-table-header-medium);
			border-left: 5px solid white;
			border-bottom: 5px solid white;
			padding: 0.5rem;
		}
		.table-view table tfoot.header tr th.general-group {
			border-left: none !important;
		}
		.table-view table tfoot.header tr th.foldable > div,
		.table-view table tfoot.header tr th.non-foldable > div {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			padding: 0 1.5em 0 1.5em;
			cursor: pointer;
			user-select: none;
			-webkit-user-select: none;
		}

		.table-view table tfoot.header tr th.foldable > div::after{
			content: '\f33e';
			font-family: 'Font Awesome 5 Pro';
			position: absolute;
			width: 1.2rem;
			right: 0;
			top: 0;
			bottom: 0;
			line-height: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--color-blue);
			font-weight: bold;
		}
		
	/* Tbody */
		.table-view table tbody td {
			border-bottom: 1px solid var(--color-border);
			text-align: left;
			font-size: 1.0rem;
			padding: 0.7rem 1rem;
			line-height: 1.3;
			white-space: nowrap;
			overflow: hidden;
			position: relative;
			z-index: 2;
		}
		.table-view table tbody tr:not(.table-group) td {
			/* text-transform: capitalize; */
		}
		.table-view table tbody tr:last-of-type td {
			border-bottom: none;
		}
		.table-view table tbody tr td:last-of-type {	
			text-align: right;
			padding-right: 2em;
		}
		.table-view table tbody td.medium {
			background-color: var(--color-table-cell-medium);
		}
		.table-view table tbody td.dark {
			background-color: var(--color-table-cell-dark);
		}
		.table-view table tbody td.group-lead {
			padding-left: calc(1rem + 5px);
		}
		.table-view table tbody td.blind {
			color: var(--color-text-secondary);
		}
		.table-view table tbody td.group-lead::before {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 5px;
			background-color: white;
			z-index:1;
		}	
		.table-view table tbody td:first-of-type.group-lead::before {	
			width: 0;
		}
		.table-view table tbody td > div {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			white-space: nowrap;
			z-index: 2;
			/* min-height: 2.0em; */
		}
		.table-view table tbody td.card_type > div {
			flex-direction: row !important;
			align-items: center;
			justify-content: flex-start;
		}
		.table-view table tbody td > div.row {
			text-align: left;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: flex-start;
		}
		.table-view table tbody td > div small {
			color: var(--color-text-tertiary);
			line-height: 1.2;
			font-size: 0.9rem;
		}

		/* Status Cell */
		.table-view table tbody td.status {
			white-space: nowrap;
		}
		.table-view table tbody td.status > div {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: nowrap !important;
		}
		.table-view table tbody td.status span::before {
			content: '';
			display: inline-block;
			width: 8px;
			height: 8px;
			border-radius: 4px;
			margin-right: 0.5em;
		}
		.table-view table tbody td span.blue {
			color: var(--color-blue);
			font-weight: 500;
		}
		.table-view table tbody td span.blind {
			color: var(--color-text-tertiary);
			font-weight: 500;
		}

		.table-view table tbody td.status.negative span:first-of-type::before {
			background-color: var(--color-red);
		}
		.table-view table tbody td.status.positive span:first-of-type::before {
			background-color: var(--color-green);
		}
		.table-view table tbody td.status.neutral span:first-of-type::before {
			background-color: var(--color-input-border);
		}
		.table-view table tbody td.status.pending span:first-of-type::before {
			background-color: var(--color-warning);
		}
		.table-view table tbody td.status.warning span:first-of-type::before {
			background-color: var(--color-warning);
		}

		/* Card Type Cell */
		.table-view table tbody td span.visa::before {
			content: '\f1f0';
			font-family: 'Font Awesome 5 Brands';
			font-weight: 300;
			margin-right: 0.5rem;
			font-size: 1.25rem;
			color: var(--color-text-tertiary);
		}
		.table-view table tbody td span.mastercard::before {
			content: '\f1f1';
			font-family: 'Font Awesome 5 Brands';
			font-weight: 300;
			margin-right: 0.5rem;
			font-size: 1.25rem;
			color: var(--color-text-tertiary);
		}
		.table-view table tbody td.card-universal,
		.table-view table tbody td.blinded {
			color: var(--color-text-tertiary);
		}

	/* Buttons */
		.table-view table td.id {
			width: 1em !important;
		}
		.table-view table .button.nobody.edit-row,
		.table-view table .button.nobody.edit-code {
			background-color: transparent;
			padding: 0;
			color: var(--color-link);
		}
		.table-view table .button.nobody.edit-row:hover,
		.table-view table .button.nobody.edit-code:hover {
			color: var(--color-blue);
		}
		.table-view table .button.nobody.edit-row::before {
			content: '\f013';
			font-family: 'Font Awesome 5 Pro';
			font-size: 1.25rem;
			font-weight: 600;
		}
		.table-view table .button.nobody.edit-code::before {
			content: '\f121';
			font-family: 'Font Awesome 5 Pro';
			font-size: 1.1rem;
			font-weight: 600;
		}
		.table-view table .button.nobody.edit-reserve {
			background-color: transparent;
			padding: 0;
			color: var(--color-blue);
		}
		.table-view table .button.nobody.edit-reserve:hover {
			color: var(--color-link);
		}
		.table-view table .button.nobody.edit-reserve::before {
			content: '\f303';
			font-family: 'Font Awesome 5 Pro';
			font-size: 1.1rem;
			font-weight: bold;
		}

	/* Users table specific styles */
		.table-view table.users td.created,
		.table-view table.users th.created {
			text-align: right;
		}
		.table-view table.users td.created > *,
		.table-view table.users th.created > * {
			justify-content: flex-end;
			align-items: flex-end;
		}
		.table-view table.users td.id,
		.table-view table.users th.id {
			width: 3em;
			max-width: 3em;
		}

	/* Patients table specific styles */
		.table-view table.patients tbody td {
			padding-top: calc(0.7rem + 0.25em);
			padding-bottom: calc(0.7rem + 0.25em);
		}
		.table-view table.patients th.disclosure,
		.table-view table.patients td.disclosure {
			width: 3.5rem;
			max-width: 3.5rem;
		}
		.table-view table.patients td.disclosure > div {
			justify-content: flex-end;
			padding-right: 0.1rem;
		}
		.table-view table.patients tbody tr:hover td {
			background-color: rgba(0, 0, 0, 0.04);
			cursor: pointer;
		}
	
	/* Interactive cells */
		.table-view table tbody td > div a.eye{
			padding-right: 0.5em;
		}
		.table-view table tbody td > div a.eye::before{
			content: '\f06e';
			font-family: 'Font Awesome 5 Pro';

			font-weight: bold;
			color: var(--color-link);
		}
		.table-view table tbody td > div a.eye.active::before{
			content: '\f070';
		}

		.table-view table tbody td > div a.copy{
			width: 1.25em;
			margin-right: 0.1em;
			outline: none;
		}
		.table-view table tbody td > div a.copy::before{
			content: '\f0c5';
			font-family: 'Font Awesome 5 Pro';

			font-weight: bold;
			color: var(--color-link);
		}
		.table-view table tbody td > div a.copy.copied::before {
			content: '\f00c';
		}
		.table-view table tbody td > div a.button.nobody.disclosure-indicator {
			padding: 0;
			margin: 0;
			height: auto;
			color: var(--color-link);
		}
		.table-view table tbody td > div a.button.nobody.disclosure-indicator::before {
			content: '\f054';
			font-family: 'Font Awesome 5 Pro';
			font-weight: 700;
			font-size: 1.27rem;
			margin-right: 0;
		}
		.table-view table tbody td > div a.button.nobody.disclosure-indicator:hover {
			color: var(--color-link-hover);
		}

	/* Empty Table */
		/* .dataTables_empty {
			text-align: center !important;
			border: none !important;
		} */
		.dataTables_empty {
			text-align: center !important;
			border: none !important;
			min-width: 100% !important;
			width: 100% !important;
			height: 100% !important;
		}
		.table-view .empty-table {
			width: 100% !important;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center !important;
			align-items: center !important;
			flex-wrap: nowrap;
			padding: 3em 2em;
			font-size: 1em;
		}
		.table-view .empty-table h3 {
			font-size: 1.4em;
			font-weight: 500;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			color: var(--color-text-lighter);
		}
		.table-view .empty-table span {
			color: var(--color-text-secondary);
			font-weight: 500;
			font-size: 1.2rem;
		}
		/*
		.table-view .empty-table h3::before {
			content: '\f1e5';
			font-family: 'Font Awesome 5 Pro';
			color: var(--color-blue);
			font-size: 1.5em;
			font-weight: 300;
		}
		*/

	/* Custom labels, etc... */
		.number-label {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1.75rem;
			height: 1.75rem;
			border-radius: 4px;
			background-color: var(--color-blue-medium);
			color: white;
			font-weight: bold;
		}

/* TABLE GROUP */
	.table-group td {
		font-weight: 500;
		background-color: var(--color-table-group);
		border-left: 1px solid var(--color-border);
		border-right: 1px solid var(--color-border);
		padding: 0.35em 0.9em 0.35em 0.9em;
		font-size: 1.1em !important;
		text-transform: uppercase;
		position: sticky !important;
		color: var(--color-blue);
		top: 3.6rem;
		z-index: 99 !important;
	}

/* TABLE CUSTOM CELLS */
	.table-view table tbody td > div.boolean::before {
		content: '';
		font-family: 'Font Awesome 5 Pro';
		font-size: 1.2rem;
		font-weight: bold;
	}
	.table-view table tbody td > div.boolean.true::before {
		content: '\f058';
		color: var(--color-green);
	}
	.table-view table tbody td > div.boolean.false::before {
		content: '\f057';
		color: var(--color-inactive);
	}

/* TABLE WITH FILTERS AT RIGHT */
	.table-view.right-controls {
		flex: 1 1 auto;
		width: 100%;
		overflow-y: hidden;
		overflow-x: hidden;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}
	.table-view.right-controls .table-subview{
		flex: 1 1 auto;
		height: 100%;
		overflow-y: scroll;
		overflow-x: auto;
		padding-right: 1rem;
	}
	.controls-container {
		flex: 0 0 var(--size-right-controls-width);
		width: var(--size-right-controls-width);

		height: auto;
		max-height: 100%;
		margin: 0 0 0 1rem;
		padding-bottom: 0.5rem;

		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		overflow-y: scroll;
	}
	.controls-container .controls-section {
		
		width: 100%;

		padding: 2em;
		margin: 0 0 1rem 0;

		background-color: var(--color-side-menu-bg);
		border-radius: 0.5em;
		border: 1px solid var(--color-border);

		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
		z-index: 100;
		position: relative;
	}
	.controls-container .controls-section h2 {
		width: 100%;
		padding-bottom: 1.5rem;
		padding-top: 0;
		margin-bottom: 1.5rem;
		margin-top: 0;
		line-height: 1;
		border-bottom: 1px solid var(--color-border);
		font-weight: 400;
	}
	.controls-container .controls-section h3 {
		line-height: 1;
		margin-bottom: 0.75rem;
		font-weight: 400;
	}
	.controls-container .controls-section .controls-button-container {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: nowrap;
		margin-top: 1.5rem;
	}
	.controls-container .controls-section .row {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
	}
	.controls-container .controls-section .row > * {
		margin-right: 1.5em;
	}

/* SETTINGS CONTROLLER */
	.settings-controller {
		flex: 1 1 auto;
		width: 100%;
		overflow-y: scroll;
		overflow-x: auto;
		z-index: 0;
		position: relative;
	}
	.settings-controller .settings-controller-container {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 0 0 2rem 0;
	}
	.settings-controller .section {
		
		flex: 0 0 calc(50% - 2rem);

		padding: 2em;
		margin: 0 2rem 2rem 0;

		background-color: var(--color-side-menu-bg);
		border-radius: 0.5em;
		border: 1px solid var(--color-border);

		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
		z-index: 100;
		position: relative;
	}
	.settings-controller .section.process {
		pointer-events: none;
	}
	.settings-controller .section .section-header {
		width: 100%;
		padding-bottom: 1.5rem;
		padding-top: 0;
		margin-top: 0;
		border-bottom: 1px solid var(--color-border);
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}
	.settings-controller .section h2 {
		flex: 1 1 auto;
		line-height: 1.4;
		font-weight: 400;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.settings-controller .section .section-header a {
		margin-left: 2em;
		display: none;
	}
	.settings-controller .section h2 small {
		font-size: 1rem;
		font-weight: normal;
		opacity: 0.8;
		/* color: var(--color-text-secondary); */
	}
	.settings-controller .section .item {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: center;
		flex-wrap: nowrap;
		border-bottom: 1px solid var(--color-border);
		padding: 2rem 0;
	}
	.settings-controller .section .item:last-of-type {
		border-bottom: none;
		padding-bottom: 0;
	}
	.settings-controller .section .item > * {
		flex: 0 0 50%;
		padding: 0 2rem;
	}
	.settings-controller .section .item .comment {
		color: var(--color-text-secondary);
	}
	.settings-controller .section .item .comment b {
		margin-top: 0.5rem;
		font-weight: 500;
		display: inline-block;
	}

/* ALERT GROUPS */
	.table-view table tbody tr.alert-group-title td,
	.table-view table tbody tr.alert-group-row td {
		padding: 0 1rem;
		border-bottom: none;
		background-color: var(--color-red-light);
		width: 1px;
		/* max-width: 1px; */
	}
	.table-view table tbody tr.alert-group-title td.medium,
	.table-view table tbody tr.alert-group-row td.medium {
		padding: 0 1rem;
		border-bottom: none;
		background-color: var(--color-red-premedium);
		width: 1px;
		/* max-width: 1px; */

	}

	.table-view table tbody tr.alert-group-title td.group-lead,
	.table-view table tbody tr.alert-group-row td.group-lead {
		padding-left: calc(1rem + 5px);
	}
	.table-view table tbody tr.alert-group-title td.group-lead::before,
	.table-view table tbody tr.alert-group-row td.group-lead::before {
		background-color: var(--color-red-light);
	}

	.table-view table tbody tr.alert-group-row td.count {
		color: var(--color-red);

	}
	.table-view table tbody tr.alert-group-row.last-in-group td {
		border-bottom: 1px solid var(--color-input-border);
	}
	.table-view table tbody tr.alert-group-title td.count {
		font-weight: bold;
		color: var(--color-red);
		font-size: 1.1em;
		text-align: left;
	}
	.table-view table tbody tr.alert-group-title td.count > div {
		flex-direction: row;
		justify-content: flex-start;
	}
	.table-view table tbody tr.alert-group-title td:first-of-type > div{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: flex-start;
		font-weight: 600;
		color: var(--color-red);
		position: relative;
		padding: 0.75rem 0 0.5rem 0;
		font-size: 1.1rem;
	}
	.table-view table tbody tr.alert-group-title td:first-of-type > div::before {
		content: '\f071';
		font-family: 'Font Awesome 5 Pro';
		color: var(--color-red);
		font-weight: bold;
		margin-right: 0.25rem;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		line-height: 1;
		width: 2rem;
	}
	.table-view table tbody tr.alert-group-title td:first-of-type > div::after {
		content: '';
		display: block;
		height: 0.4rem;
		width: 0;
		border-left: 2px solid var(--color-red);
		position: absolute;
		bottom: 0;
		left: calc(1rem - 1px);
	}

	.table-view table tbody tr.alert-group-row td:first-of-type > div{
		position: relative;
		padding: 0.75rem 0 0.75rem 2.5rem;
	}
	.table-view table tbody tr.alert-group-row td:first-of-type > div::before {
		content: '';
		display: block;
		width: 0;
		border-left: 2px solid var(--color-red);
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(1rem - 1px);
	}
	.table-view table tbody tr.alert-group-row.last-in-group td:first-of-type > div::before {
		bottom: 50%;
	}
	.table-view table tbody tr.alert-group-row td:first-of-type > div::after {
		content: '';
		display: block;
		width: 0.85rem;
		border-bottom: 2px solid var(--color-red);
		position: absolute;
		top: 50%;
		left: calc(1rem - 1px);
	}

/* ALERTS SETTINGS */
	.popup-content{
		width: 100%;
		flex: 0 0 calc(100% - 2.4rem);
		height: calc(100% - 2.4rem);
		display: flex;
		align-items: stretch;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: nowrap;
		position: relative;
		padding: 1em 0;
	}
	.popup-content.vertical{
		flex-direction: column;
	}
	.popup-content .loader {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		color: var(--color-blue);
		font-size: 1.0em;
		font-weight: bold;
		z-index: 98 !important;
	}
	.popup-content .loader::before {
		content: '\f3f4';
		font-family: 'Font Awesome 5 Pro';
		animation: spin 0.5s linear infinite;
		font-size: 2rem;
		color: var(--color-blue);
		font-weight: 500;
	}
	.popup-content > * {
		width: 100%;
		margin-bottom: 0.5rem;
	}
	.popup-content .all .select2-search__field::-webkit-input-placeholder {
		color: var(--color-text);
	}

	/* Left Panel */
		.popup-content .panel {
			flex: 0 0 35%;
			max-width: 35%;
			height: 100%;
			max-height: 100%;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
		}
		.popup-content .panel > * {
			width: 100%;
		}
		/* List */
			.popup-content .list {

				flex: 1 0 auto;
				background-color: var(--color-side-menu-bg);
				border-radius: 0.75em;
				overflow-x: hidden;
				overflow-y: scroll;
				margin-bottom: 1em;
			}
			.popup-content .list:empty {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 1.5em;
				text-align: center;
				font-size: 1em;
				font-weight: 400;
				color: var(--color-text-secondary);
			}
			.popup-content .list:empty::before {
				content: 'You haven\'t created any alerts yet';
			}
			.popup-content .list .alert-item {
				width: 100%;
				padding: 1em 1.5em 1em 1em;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: flex-start;
				border-bottom: 1px solid rgba(0, 0, 0, 0.05);
				cursor: pointer;
			}
			.popup-content .list .alert-item:last-of-type {
				border-bottom: none;
			}
			.popup-content .list .alert-item .alert-details {
				flex: 0 0 100%;
				width: 100%;
				max-width: 100%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				padding-right: 1em;
				/* overflow-x: hidden;
				text-overflow: ellipsis; */
			}
			.popup-content .list .alert-item .alert-details h4{
				font-size: 1.1em;
				font-weight: 500;
			}
			.popup-content .list .alert-item .alert-details b {
				text-transform: uppercase;
				color: var(--color-text-secondary);
				font-weight: normal;
				font-size: 0.9em;
			}
			.popup-content .list .alert-item .alert-details small {
				width: 100%;
				max-width: 100%;
				color: var(--color-text-secondary);
				font-weight: normal;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.popup-content .list .alert-item .disclosure-indicator::before {
				content: '\f054';
				font-family: 'Font Awesome 5 Pro';
				color: var(--color-blue);
				font-weight: 600;
			}
			.popup-content .list .alert-item:hover .disclosure-indicator::before {
				color: var(--color-blue-darker);
			}
	/* Controller */
		.popup-content .controller {
			flex: 0 0 65%;
			height: 100%;
			max-height: 100%;
			padding: 0 0.75em 0 2em;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			position: relative;
		}
		.popup-content .controller.full-width {
			flex: 0 0 100%;
			padding: 0 0.75em 0 0.75em;
		}
		.popup-content .controller > * {
			width: 100%;
		}
		.popup-content .controller:empty {
			padding: 3rem;
			padding-bottom: 7.25rem;
			color: var(--color-text-secondary);
			align-items: center;
			justify-content: center;

		}
		.popup-content .controller:empty::before {
			content: 'Select an alert to edit or create a new one';
		}
		.popup-content .controller .form-item {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			position: relative;
			margin-top: 1.5rem;
			z-index: 1;
		}
		.popup-content .controller .form-item:first-of-type {
			margin-top: 0;
		}
		.popup-content .controller .form-item.row {
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-end;
			flex-wrap: nowrap;
		}
		.popup-content .controller .form-item.row > .form-item {
			margin-top: 0;
		}
		.popup-content .controller .form-item.row > .form-item:first-of-type {
			flex: 0 0 60%;
			width: 60%;
		}
		.popup-content .controller .form-item.row > .form-item:last-of-type {
			flex: 1 1 auto;
			margin-left: 1.5rem;
		}
		.popup-content .controller .form-item.row > .form-item a {
			width: 100%;
			height: 3.5rem;
		}
		.popup-content .controller .form-item > label {
			color: var(--color-text-secondary);
			text-transform: uppercase;
			font-size: 0.8em;
			font-weight: 600;
			margin-bottom: 0.5rem;
		}
		.popup-content .controller .form-item .input-container{
			width: 100%;
			position: relative;
		}
		.popup-content .controller .form-item .input-container > .eye {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			width: 3.25em;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--color-blue);
			text-decoration: none;
		}
		.popup-content .controller .form-item .input-container > .eye::before{
			content: '\f06e';
			font-family: 'Font Awesome 5 Pro';
			font-weight: bold;
		}
		.popup-content .controller .form-item .input-container > .eye.active::before{
			content: '\f070';
		}
		.popup-content .controller .form-item .input-container > input {
			padding-right: 3em;
		}
		.popup-content .controller .remove-alert-button {
			text-decoration: none;
			position: absolute;
			bottom: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			color: var(--color-blue-medium);
			width: 3em;
			height: 3em;
			line-height: 1;
		}
		.popup-content .controller .remove-alert-button::after {
			content: '\f2ed';
			font-family: 'Font Awesome 5 Pro';
			font-size: 1.2em;
		}
	.popup-content .controller .remove-alert-button.process::after {
		content: '\f3f4';
		font-family: 'Font Awesome 5 Pro';
		animation: spin 0.5s linear infinite;
		font-size: 1.2rem;
		font-weight: 600;
	}
	.patient-intake-dialog.popup-content {
		padding-top: 0.5rem;
		padding-bottom: 0;
	}
	#modalloader-patient-intake > div {
		width: 34px;
		height: 34px;
		top: calc(50% - 17px);
		left: calc(50% - 17px);
	}
	#modalloader-patient-intake > div div {
		border-width: 3px;
	}
	.patient-intake-body {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
	}
	.patient-intake-layout {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0.85rem;
	}
	.patient-intake-meta {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 0.65rem;
		margin-bottom: 0.85rem;
	}
	.patient-intake-meta .chip {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		background: var(--color-side-menu-bg);
		border: 1px solid var(--color-border);
		border-radius: 0.55rem;
		padding: 0.45rem 0.65rem;
		min-height: 3.2rem;
	}
	.patient-intake-meta .chip span {
		color: var(--color-text-secondary);
		font-size: 0.75rem;
		line-height: 1;
		text-transform: uppercase;
		margin-bottom: 0.35rem;
	}
	.patient-intake-meta .chip b {
		font-weight: 600;
	}
	.patient-intake-meta .patient-make-payment.button {
		min-height: 3.2rem;
		border-radius: 0.3rem;
		padding: 0.45rem 1rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
	}
	.patient-intake-render {
		flex: 1 1 auto;
		border: 1px solid var(--color-border);
		border-radius: 0.7rem;
		padding: 0.85rem;
		background: var(--color-side-menu-bg);
		overflow: auto;
		min-width: 0;
	}
	.patient-note-panel {
		flex: 0 0 27.5rem;
		max-width: 27.5rem;
		min-width: 27.5rem;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
	}
	.patient-note-panel > textarea {
		flex: 1 1 auto;
		resize: none;
		min-height: 16rem;
		padding: 0.75rem 0.85rem;
		border-radius: 0.7rem;
		border: 1px solid var(--color-input-border);
		background: var(--color-input-bg);
		color: var(--color-text-input);
		font-size: 0.98rem;
		line-height: 1.35;
	}
	.patient-note-panel > .button {
		margin-top: 0.65rem;
	}
	.patient-intake-empty {
		width: 100%;
		height: 100%;
		min-height: 12rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: var(--color-text-secondary);
		font-size: 1rem;
	}
	.patient-intake-empty.error {
		color: var(--color-red);
	}
	.patient-intake-table {
		width: 100%;
		border-collapse: collapse;
	}
	.patient-intake-table th,
	.patient-intake-table td {
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		padding: 0.65rem 0.75rem;
		text-align: left;
		vertical-align: top;
	}
	.patient-intake-table th {
		font-size: 0.8rem;
		text-transform: uppercase;
		font-weight: 600;
		color: var(--color-text-secondary);
		background: rgba(0, 0, 0, 0.03);
	}
	.patient-intake-table tbody tr:last-of-type td {
		border-bottom: none;
	}
	.patient-intake-table td:first-of-type {
		width: 36%;
		font-weight: 600;
		color: var(--color-text-secondary);
		letter-spacing: 0.02em;
	}
	.patient-intake-table td .value-wrap {
		white-space: pre-wrap;
		word-break: break-word;
		line-height: 1.35;
	}
	.patient-intake-bullets {
		margin: 0;
		padding-left: 1.1rem;
	}
	.patient-intake-bullets li {
		margin: 0.15rem 0;
	}
	.patient-intake-bullets li pre {
		margin: 0.2rem 0;
	}
	.patient-intake-render pre {
		margin: 0;
		white-space: pre-wrap;
		word-break: break-word;
		font-size: 0.92rem;
		line-height: 1.35;
	}
	.patient-payment-dialog.popup-content {
		padding-top: 0.5rem;
		padding-bottom: 0;
		padding-left: 0.55rem;
		padding-right: 0.55rem;
	}
	.patient-payment-body {
		height: auto;
		min-height: 540px;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		position: relative;
	}
	.patient-payment-meta {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 0.65rem;
		margin-bottom: 0.85rem;
	}
	.patient-payment-meta .chip {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		background: var(--color-side-menu-bg);
		border: 1px solid var(--color-border);
		border-radius: 0.55rem;
		padding: 0.45rem 0.65rem;
		min-height: 3.2rem;
	}
	.patient-payment-meta .chip span {
		color: var(--color-text-secondary);
		font-size: 0.75rem;
		line-height: 1;
		text-transform: uppercase;
		margin-bottom: 0.35rem;
	}
	.patient-payment-meta .chip b {
		font-weight: 600;
	}
	.patient-payment-form {
		flex: 0 0 auto;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		min-height: auto;
	}
	.patient-payment-product-select {
		margin-bottom: 0.6rem;
	}
	.patient-payment-product-select > select {
		width: 100%;
		color: var(--color-text-input);
		border: 1px solid var(--color-input-border);
		background-color: var(--color-input-bg) !important;
		border-radius: 0.3rem;
		padding: 0 2.4rem 0 1rem;
		font-size: 1.05rem !important;
		margin: 0;
		height: 3.5rem;
		cursor: pointer;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%), linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%);
		background-position: calc(100% - 1.2rem) calc(50% - 0.1rem), calc(100% - 0.85rem) calc(50% - 0.1rem);
		background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
		background-repeat: no-repeat;
		outline: none;
		box-shadow: none;
	}
	.patient-payment-product-select > select:focus,
	.patient-payment-product-select > select:active {
		outline: none;
		box-shadow: none;
	}
	.patient-payment-summary {
		color: var(--color-text-secondary);
		font-size: 0.9rem;
		line-height: 1.3;
		margin-bottom: 0.55rem;
	}
	.patient-payment-coupon-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 0.6rem;
		margin-bottom: 0.55rem;
	}
	.patient-payment-coupon-input {
		flex: 1 1 auto;
		min-width: 0;
	}
	.patient-payment-coupon-input > input {
		width: 100%;
	}
	#patient-payment-apply-coupon {
		flex: 0 0 auto;
		height: 3.5rem;
		padding: 0 1rem;
		min-width: 5.8rem;
	}
	.patient-payment-totals {
		border: 1px solid var(--color-border);
		border-radius: 0.55rem;
		background: var(--color-side-menu-bg);
		padding: 0.45rem 0.6rem;
		margin-bottom: 0.65rem;
	}
	.patient-payment-totals .line {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		color: var(--color-text-secondary);
		font-size: 0.88rem;
		line-height: 1.25;
		padding: 0.12rem 0;
	}
	.patient-payment-totals .line.hidden {
		display: none;
	}
	.patient-payment-totals .line b {
		font-weight: 600;
		color: var(--color-text);
	}
	.patient-payment-totals .line.total {
		margin-top: 0.2rem;
		padding: 0.28rem 0;
		border-top: 1px solid var(--color-border);
		font-size: 0.95rem;
		line-height: 1.2;
		align-items: center;
	}
	.patient-payment-totals .line.total b {
		color: var(--color-blue-medium);
		line-height: 1.2;
	}
	.patient-payment-totals.only-total .line.total {
		margin-top: 0;
		padding: 0.28rem 0;
		border-top: none;
	}
	.patient-payment-addresses {
		margin-bottom: 0.7rem;
	}
	.patient-payment-address-title {
		color: var(--color-text-secondary);
		font-size: 0.9rem;
		font-weight: 600;
		margin: 0.35rem 0 0.45rem;
	}
	.patient-payment-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 0.55rem;
		margin-bottom: 0.55rem;
	}
	.patient-payment-row.double > .input-container {
		flex: 1 1 0;
	}
	.patient-payment-row > .input-container {
		width: 100%;
	}
	.patient-payment-row > .input-container > input {
		height: 3.2rem;
	}
	.patient-payment-row > .input-container > select {
		width: 100%;
		height: 3.2rem;
		border: 1px solid var(--color-input-border);
		background-color: var(--color-input-bg) !important;
		border-radius: 0.3rem;
		padding: 0 2.2rem 0 0.95rem;
		font-size: 1rem;
		color: var(--color-text-input);
		cursor: pointer;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
	.patient-payment-row > .input-container > select:focus,
	.patient-payment-row > .input-container > select:active {
		outline: none !important;
		border-color: var(--color-input-border);
		box-shadow: none;
	}
	body.night .patient-payment-row > .input-container > select {
		background-image: linear-gradient(45deg, transparent 50%, #9fbad8 50%), linear-gradient(135deg, #9fbad8 50%, transparent 50%);
		background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
		background-size: 6px 6px, 6px 6px;
		background-repeat: no-repeat;
	}
	body:not(.night) .patient-payment-row > .input-container > select {
		background-image: linear-gradient(45deg, transparent 50%, #7e8d9e 50%), linear-gradient(135deg, #7e8d9e 50%, transparent 50%);
		background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
		background-size: 6px 6px, 6px 6px;
		background-repeat: no-repeat;
	}
	.patient-payment-row.checkbox {
		margin: 0.2rem 0 0.3rem;
	}
	#patient-billing-address-form {
		display: none;
		margin-top: 0.4rem;
	}
	#patient-payment-element-loader {
		position: absolute;
		top: 0.65rem;
		left: 0.65rem;
		right: 0.65rem;
		bottom: 0.65rem;
		z-index: 50;
		background-color: color-mix(in srgb, var(--color-dialog-bg) 88%, transparent);
		border-radius: 0.55rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#patient-payment-element-loader > div {
		width: 34px;
		height: 34px;
		position: relative;
		top: auto;
		left: auto;
	}
	#patient-payment-element-loader > div div {
		border-width: 3px;
	}
	#patient-payment-element {
		position: relative;
		flex: 0 0 auto;
		border: 1px solid var(--color-border);
		border-radius: 0.7rem;
		padding: 0.95rem 0.85rem;
		background: var(--color-side-menu-bg);
		min-height: 200px;
		height: auto;
		margin-bottom: 0.7rem;
	}
	#patient-payment-element-content {
		min-height: 200px;
	}
	#patient-payment-element-content .p-HeightObserverProvider {
		min-height: 200px;
	}
	#patient-payment-element.loading #patient-payment-element-content .p-HeightObserverProvider {
		opacity: 0.55;
	}
	#patient-payment-submit {
		margin-top: 0.45rem;
	}
	#patient-payment-submit.disabled {
		opacity: 0.6;
		pointer-events: none;
	}
	#patient-payment-dialog .content {
		overflow-y: auto;
		scrollbar-gutter: stable;
		padding-left: 0.55rem;
		padding-right: 0.55rem;
	}
	.patient-payment-status {
		min-height: 1.3rem;
		font-size: 0.9rem;
		line-height: 1.35;
		color: var(--color-green);
	}
	.patient-payment-status.error {
		color: var(--color-red);
	}
	.patient-payment-status.success {
		color: var(--color-green);
	}

/* DRAGGABLE MODAL */
	.dialog {
		width: auto;
		display: none; /* not visible by default */
		font-weight: 400;
		border: 1px solid var(--color-border);
		border-radius: 0.5em;
		background: var(--color-dialog-bg);
		margin: 0;
		position: absolute;
		box-shadow: 0 1em 1.5em var(--color-shadow);
	}
	.dialog .titlebar {
		height: 16px; /* same as .dialog>button height */
		line-height: 16px; /* same as .dialog>button height */
		padding: 0; /* change NOT allowed */
		cursor: move;

	}
	.dialog .content {
		position: absolute;
		top: 16px; /* change allowed */
		left: 16px; /* change NOT allowed */
		bottom: 16px;
		overflow-y: auto;
		font-size: 1em;
		overflow: hidden;
		width: calc(100% - 32px);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.dialog .content > * {
		width: 100%;
	}
	.dialog .content h3 {
		font-size: 1.6em;
		font-weight: 500;
		color: var(--color-text);
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		text-transform: capitalize;
	}
	.dialog .content h3.smaller {
		font-size: 1.5em;
	}
	.dialog > button {
		width: 3.5em; /* change NOT allowed */
		height: 3.5em; /* same as .dialog .titlebar height */
		position: absolute;
		top: 0;
		right: 0;
		padding: 0;
		border: none;
		background: transparent;
		outline: none;
		color: var(--color-link);
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 300;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}
	.dialog > button::before{
		content: '\f00d';
		font-family: 'Font Awesome 5 Pro';
		font-weight: 300;
		font-size: 2em;
	}
	.dates-list-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding-top: 1.5em;
		margin-left: 1em;
		margin-right: 1em;
		padding-bottom: 28px;
	}
	.dates-list-container > * {
		width: 100%;
	}
	.dates-list-container label {
		font-weight: 600;
		margin-left: 0.25em;
		white-space: nowrap;
		color: var(--color-text);
	}
	.dates-list {
		flex: 1 0 auto;
		border: 1px solid var(--color-border);
		border-radius: 0.3rem;
		background-color: var(--color-table-cell-dark);
		
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;

		padding: 0.25em 0.5em;
	}
	.dates-list:empty{
		justify-content: center;
	}
	.dates-list:empty::before{
		content: 'No logs yet';
		color: var(--color-input-border);
		font-weight: 500;
	}
	ul.release-history-log {
		list-style-type: none;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		padding: 0.25em 0.5em;
		width: 100%;
	}
	ul.release-history-log li {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;
		padding: 0.5em 0.5em;
		width: 100%;
		border-bottom: 1px solid var(--color-border);
		font-weight: 500;
	}
	ul.release-history-log li > div {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	ul.release-history-log li > a {
		margin-left: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		width: 1.5em;
		height: 1.5em;
	}
	ul.release-history-log li > a::before {
		content: '\f00d';
		font-family: 'Font Awesome 5 Pro';
		font-weight: 300;
	}
	ul.release-history-log li label {
		font-weight: 400;
		margin-left: 0;
		width: 100%;
		color: var(--color-text-secondary);
	}
	
/* TOP PANEL (TABS + FILTERS) */
	.top-panel{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1em;
		flex-wrap: nowrap;
	}
	.top-panel .controls{
		flex: 1 0 auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}
	.top-panel .controls.with-labels {
		margin-top: -1em;
	}
	.top-panel .controls > .button {
		margin-left: 1.25rem !important;
	}
	.top-panel .controls label {
		font-weight: 500;
	}
	.patients-search-card {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		padding: 2rem;
		margin-bottom: 1rem;
		border: 1px solid var(--color-border);
		border-radius: 0.7rem;
		background-color: var(--color-side-menu-bg);
		max-width: 100%;
	}
	.patients-search-card .patients-search-controls {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		flex: 0 0 auto;
	}
	.patients-search-card .filters-item {
		min-width: 13.5rem;
	}
	.patients-search-card .filters-item:last-of-type {
		margin-right: 0;
	}
	.patients-search-card .filters-item.patients-search-button-container {
		min-width: auto;
		margin-right: 0;
	}
	.patients-search-card .filters-item.patients-search-button-container .button {
		margin-left: 0;
	}
	.patients-search-card .filters-item .input-container input {
		padding-right: 1rem;
	}
	.patients-search-card .filters-item .input-container {
		min-width: 16.2rem;
		width: 16.2rem;
	}

/* MONTHS SELECTOR */
	.month-selector {
		color: var(--color-text-input);
		border: 1px solid var(--color-input-border);
		background-color: white;
		border-radius: 0.3rem;
		padding: 0;
		margin: 0;
		height: 3.5rem;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}
	.month-selector .month-display {
		font-weight: 500;
		color: var(--color-text);
		font-size: 1.1em;
		min-width: 12rem;
		text-align: center;
		margin-bottom: 5px !important;
	}
	.month-selector .month-prev,
	.month-selector .month-next {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 3.5rem;
		width: 3rem;
		line-height: 1;
		font-weight: bold;
		font-size: 1.4em;
		margin-bottom: 5px !important;
		cursor: pointer;
	}
	.month-selector .month-next.disabled{
		cursor: default;
		opacity: 0.5;
	}
	.month-selector .month-prev:hover,
	.month-selector .month-next:hover {
		color: var(--color-blue-medium);
	}
	.month-selector .month-prev::before{
		content: '\f0d9';
		font-family: 'Font Awesome 5 Pro';
		color: var(--color-blue);
	}
	.month-selector .month-next::before{
		content: '\f0da';
		font-family: 'Font Awesome 5 Pro';
		color: var(--color-blue);
	}

/* MICRO TABS */
	.micro-tabs {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-end;
		width: 100%;
		margin-right: 1em;
	}
	.top-panel .micro-tabs {
		flex: 0 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-end;
		width: auto;
	}
	.micro-tabs .tab {
		cursor: pointer;
		white-space: nowrap;
		text-transform: uppercase;
		color: var(--color-text-secondary);
		font-weight: normal;
		border-bottom: 1px solid var(--color-border);
		padding: 0.5em 1.5em;
	}

	.micro-tabs .tab.active {
		color: var(--color-blue);
		font-weight: 600;
		border-bottom: 2px solid var(--color-blue);
		padding-bottom: calc(0.5em - 1px);
		cursor: default;
		pointer-events: none;
	}
	.micro-tabs .tab > span {
		position: relative;
	}
	.micro-tabs .tab.alerted > span::after {
		content: '';
		display: block;
		width: 0.6em;
		height: 0.6em;
		border-radius: 50%;
		background-color: var(--color-red);
		position: absolute;
		top: -0.25em;
		right: -0.55em;
		border: 1px solid white;
	}

/* FILTERS */
	.table-view .dataTables_filter {
		display: none !important;
	}
	.filters {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: nowrap;
		/* margin: 1em 0 0em 0; */
		margin: 0;
		padding: 0;
		z-index: 2;
		margin-top: -1.3rem;
		margin-bottom: 0.25rem;
		padding-left: 0.5em;
	}
	.filters-item {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		margin-right: 1.0rem;
		min-width: 15em;
	}
	.filters-item.compact {
		min-width: 8em;
	}
	.filters-item.autowidth {
		flex: 1 0 auto;
	}
	.filters-item.row {
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.filters-item:last-of-type {
		margin-right: 0;
	}
	.filters-item.right {
		margin-left: auto;
	}
	.filters-item h4 {
		color: var(--color-text-secondary);
		text-transform: uppercase;
		font-size: 0.8em;
		font-weight: 600;
		margin-bottom: 0.5rem;
	}
	.filters-item > span:not(.select2) {
		color: var(--color-text-tertiary);
		font-size: 1em;
		margin-top: 0.5rem;
	}
	.filters-item .button {
		margin-left: 1.0rem;
		height: 3.5rem;
		padding: 0 1rem;
		/* margin-top: 1rem; */
	}
	.filters-item .input-container {
		position: relative;
	}
	.filters-item .input-container input {
		padding-right: 3.0rem;
	}
	.filters-item .input-container .icon {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 3.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 2;
		pointer-events: none;
	}
	.filters-item .input-container .icon::before {
		font-family: 'Font Awesome 5 Pro';
		color: var(--color-text-tertiary);
		font-size: 1.3em;
	}
	.filters-item .input-container.calendar .icon::before {
		content: '\f073';
	}
	.filters-item .input-container.search .icon::before {
		content: '\f002';
	}
	.filters-item .input-container.search input.filled ~ .icon::before {
		content: '\f00d';
	}
	.filters-item .input-container.search input.filled ~ .icon {
		pointer-events: auto;
		cursor: pointer !important;
	}
	.filters-item .input-container.reason .icon::before {
		content: '\f0d7';
		font-weight: bold;
		/* font-size: 1rem; */
	}
	.filters-item .input-container.search {
		min-width: 20rem;
		width: 100%;
	}
	.filters-item .input-container.reason {
		min-width: 24rem;
		max-width: 24rem;

	}
	.filters-item .input-container.wider {
		min-width: 24rem;
	}

/* PROTIP */
	.protip-ssh-data {
		width: 400px;
		padding: 0.25em 0.25em 0 0.25em;
	}
	.protip-ssh-data div {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;
		margin-bottom: 1rem;
	}
	.protip-ssh-data textarea {
		font-size: 1rem;
		width: 100%;
		background: transparent;
		color: var(--color-text);
		border: none;
		border-radius: 0.2em;
		resize: none;
		background-color: var(--color-input-bg);
		padding: 1rem;
		height: 11rem;
	}

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

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

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

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

/* INPUT */

	input[type="text"],
	input[type="search"],
	input[type="password"],
	input[type="number"],
	input[type="tel"] {
		width: 100%;
		outline: none;
		color: var(--color-text-input);
		border: 1px solid var(--color-input-border);
		background-color: var(--color-input-bg) !important;
		border-radius: 0.3rem;
		padding: 0 1rem;
		font-size: 1.05rem !important;
		margin: 0;
		background: transparent;
		outline: none;
		height: 3.5rem;
	}

/* DATERANGE */
	#daterange {
		cursor: pointer !important;
		min-width: 20rem;
	}

/* CHECKBOX */
	.custom-checkbox {
		display: inline-flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		padding: 0;
		margin-bottom: 0;
		margin-left: 0;


	}
	.search-container .checkboxes .custom-checkbox {
		margin-left: 2rem;
	}
	.custom-checkbox > label {
		padding-left: 0.5rem;
		white-space: nowrap;
		cursor: pointer;
		user-select: none;
		-webkit-user-select: none;
		display: block;
		flex: 1 0 auto;
		height: 100%;
		flex: 1 1 auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		color: var(--color-text);
		font-size: 0.9rem;
		font-weight: normal;
		margin-top: 3px;
	}
	.custom-checkbox > label.full-text-size {
		font-size: 1rem;
	}
	.custom-checkbox > span {
		margin-left: 0.5rem;
	}
	.custom-checkbox .switch:not(.master) {
		position: relative;
		max-width: 1.5rem;
		margin-top: 2px;
	}
	.custom-checkbox .switch:focus {
		outline: none;
	}
	.custom-checkbox .switch label {
		position: relative;
		display: block;
		width: 1.25rem;
		margin: 0;
		height: 1.25rem;
		background: var(--color-input-bg);
		/* border-radius: 3px; */
		border: 1px solid var(--color-border);
		border-radius: 3px;
		cursor: pointer;
		user-select: none;
	}
	.custom-checkbox.parallax .switch label {
		border: none;
	}
	.custom-checkbox .switch label::after {
		content: '\f00c';
		font-family: 'Font Awesome 5 Pro';
		color: white;
		background-color: var(--color-blue-medium);
		font-size: 0.7rem;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		opacity: 0;
		transform: scale(0, 0);
		font-weight: bold;
	}
	
	.custom-checkbox .switch input {

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

/* SWITCH */
	.switch-container {
		position: relative;
		height: 22px;
		width: 38px;
	}
	input[type="checkbox"].switch {
	    display: none;    
	}
	input[type="checkbox"].switch + label {
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    width: 100%;
	    height: 100%;
	    padding: 0;
	    box-sizing: border-box;
	    cursor: pointer;
	}
	input[type="checkbox"].switch + label::before {
	    content: "";
	    position: absolute;
	    display: block;
	    left: 0;
	    top: 0 !important;
	    margin: 0;
	    width: 38px; /* x*5 */
	    height: 22px; /* x*3 */
	    border-radius: 11px; /* x*2 */
	    border: 1px solid var(--color-border);
	    background: var(--color-inactive);
	    -webkit-transition: all 0.3s;
	    transition: all 0.3s;
	    box-sizing: border-box;
	}
	input[type="checkbox"].switch + label::after {
	    content: "";
	    position: absolute;
	    display: block;
	    box-sizing: border-box;
	    left: 1px;
	    top: 1px;
	    width: 20px; /* x*3 */
	    height: 20px; /* x*3 */
	    border-radius: 11px; /* x*2 */
	    background: white;
	    -webkit-transition: all 0.3s;
	    transition: all 0.3s;
	}
	input[type="checkbox"].switch:checked + label::after {
	    margin-left: 16px;
	}
	input[type="checkbox"].switch:checked + label::before {
	    background: var(--color-green);
	}

/* DROPZONE */
	.dropzone {
		display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center !important;
	    text-align: center;

	    width: 100%;
	    height: 12rem;
	    border: 2px dashed var(--color-border);
	    border-radius: 5px;
	    cursor: pointer;
	    color: var(--color-text-secondary);
	    background: var(--color-shadow-light);
	    margin-bottom: 1.5rem;

	    gap: 1rem;
  		position: relative;
	}
	.dropzone::before{
		content: '\f15c';
		font-family: 'Font Awesome 5 Pro';
		font-size: 2.4em;
		line-height: 1;
		display: block;
	}
	.dropzone::after{
		content: '● Paste a list of BINs\00000a● Drag and drop a CSV or TXT file here\00000a● Double-click to select a CSV or TXT file';
		white-space: pre;
		font-weight: 500;
		font-size: 0.9rem;
		line-height: 1.7;
		width: 90%;
		display: block;
	}
	.dropzone.filled {
		border: 2px solid var(--color-border);
	}
	.dropzone.filled::before,
	.dropzone.filled::after {
		content: '';
		display: none;
	}
	.dropzone.uploading::before{
		content: '\f093';
		font-size: 2.4em;
	}
	.dropzone.uploading::after{
		content: 'Uploading, please wait...';
	}
	.dropzone.error::before{
		content: '\f071';
	}
	.dropzone.error::after{
		content: 'Error uploading file';
	}
	.dropzone.csv-only::before{
		content: '\f6dd';
	}
	.dropzone.csv-only::after{
		content: 'Please upload CVS files only';
	}
	.dropzone.dragover {
	    background-color: var(--color-side-menu-bg);
	    border-color: var(--color-text-secondary);
	}
	.dropzone > textarea {
		width: 100%;
		height: 100%;
		resize: none;
		background: transparent;
		border-radius: 4px;
		border: none;
		font-size: 0.9rem;
		font-family: 'Roboto', sans-serif;
		font-weight: 400;
		color: var(--color-text);
		padding: 1em;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
	}

/* RADIO */

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

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

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

/* RADIO SEGMENTED CONTROL */
	/* Container for the radio buttons */
	.segmented-control-radio {
		width: 100%;
		height: 3.5rem !important;
	    display: flex;
	    flex-direction: row;
	    align-items: flex-end;
	    overflow: hidden;
	    position: relative;
	    border: 1px solid var(--color-input-border);
		color: var(--color-text);
		border-radius: 0.2em;
		background-color: var(--color-input-bg);
	}
	.segmented-control-radio.inline {
		border: none;
	}
	/* Hide the original radio buttons */
	.segmented-control-radio input[type="radio"] {
	    display: none;
	}

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

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

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

/* SLIDER */
	.slider-container {
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.slider-container label {
		width: 100%;
		font-weight: 500;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1rem;
	}
	.slider-container label span {
		color: var(--color-blue);
		font-size: 1.25em;
		font-weight: 500;
	}

	.slider {
		/* flex: 1 0 auto; */
	    width: 100%;
	    height: 24px;
	    position: relative;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    align-items: center;
	    justify-content: flex-start;
	}

	/* The slider track */
	.slider-track {
	    width: 100%;
	    height: 4px;
	    background-color: var(--color-border);
	    position: absolute;
	    top: 50%;
	    transform: translateY(-50%);
	    border-radius: 2px;
	}

	/* The filled portion of the track */
	.slider-fill {
	    height: 100%;
	    width: 0;
	    background-color: var(--color-blue);
	    border-radius: 2px;
	}

	/* The slider handle (thumb) */
	.slider-handle {
	    width: 24px;
	    height: 24px;
	    background-color: #fff;
	    border: 1px solid var(--color-border);
	    border-radius: 50%;
	    position: absolute;
	    top: 50%;
	    transform: translate(-50%, -50%);
	    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	    cursor: pointer;
	    /* For smoother dragging on mobile */
	    touch-action: none;
	}

/* ALERTS */

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

/* PRELOADER */
	#pageloader {
		position: absolute;
		/* width: 100%; */
		top: calc(var(--size-header-height) * 1 - 0.25em);
		left: var(--size-side-menu-width);
		right: 0;
		bottom: 0;
		background-color: var(--color-body-bg);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		color: var(--color-blue);
		font-size: 1.0em;
		font-weight: bold;
		z-index: 98 !important;
	}
	.body.expanded #pageloader > div {
		left: var(--size-header-height);
	}
	#pageloader > div {
		position: absolute;
	    top: calc(50% - 25px);
	    left: calc(50% - 25px);
	    width: 50px;
	    height: 50px;
	}
	#pageloader > div div {
	    display: block;
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    border: 4px solid var(--color-blue);
	    border-radius: 50%;
	    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	    border-color: var(--color-blue) transparent transparent transparent;
	}
	#pageloader > div div:nth-child(1) {
	    animation-delay: -0.45s;
	}
	#pageloader > div div:nth-child(2) {
	    animation-delay: -0.3s;
	}
	#pageloader > div div:nth-child(3) {
	    animation-delay: -0.15s;
	}

	.modalloader {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--color-dialog-bg);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		color: var(--color-blue);
		font-size: 1.0em;
		font-weight: bold;
		z-index: 98 !important;
	}
	.modalloader > div {
		position: absolute;
	    top: calc(50% - 25px);
	    left: calc(50% - 25px);
	    width: 50px;
	    height: 50px;
	}
	.modalloader > div div {
	    display: block;
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    border: 4px solid var(--color-blue);
	    border-radius: 50%;
	    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	    border-color: var(--color-blue) transparent transparent transparent;
	}
	.modalloader > div div:nth-child(1) {
	    animation-delay: -0.45s;
	}
	.modalloader > div div:nth-child(2) {
	    animation-delay: -0.3s;
	}
	.modalloader > div div:nth-child(3) {
	    animation-delay: -0.15s;
	}

	@keyframes lds-ring {
	    0% {
	        transform: rotate(0deg);
	    }

	    100% {
	        transform: rotate(360deg);
	    }
	}

/* TOOLTIPS */
	.protip-p  {
		text-align: left;
		padding: 0.5em;
	}
	.protip-menu {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		flex-wrap: nowrap;
	}
	.protip-menu span {
		cursor: pointer;
		white-space: nowrap;
	}
	div.tooltip {
	    color: white;
	    font-weight: normal;
	    line-height: 1.4;
	    position: absolute;
	    padding: 1em;
	    background-color: var(--color-blue);
	    border-radius: 4px;
	    max-width: 280px;
	}
	div.tooltip a[data-dismiss=tooltip],
	div.tooltip button[data-dismiss=tooltip] {
	    position: absolute;
	    top: -10px;
	    right: -10px;
	    height: auto;
	    width: 25px;
	    height: 25px;
	    z-index: 100;
	    color: #FFFFFF;
	    line-height: 1;
	    font-size: 18px;
	    border-radius: 100%;
	    background-color: #111111;
	    transition: background 0.5s;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ADAPTIVE */
	@media (min-width: 2300px) {
		* {
	    	--size-side-menu-width: 24em;
		}
		.workspace {
			padding: 1rem 2rem 0 2rem;	
		}
	}