@font-face {
	font-family: soffid;
	font-weight: 400;
	src: url(../font/Sansation/Sansation_Regular.ttf);
}

@font-face {
	font-family: soffid;
	font-weight: bold;
	src: url(../font/Sansation/Sansation_Bold.ttf);
}

@font-face {
	font-family: soffid;
	font-weight: 200;
	src: url(../font/Sansation/Sansation_Light.ttf);
}

@font-face {
	font-family: soffid;
	font-weight: 400;
	font-style: italic;
	src: url(../font/Sansation/Sansation_Italic.ttf);
}

@font-face {
	font-family: soffid;
	font-weight: bold;
	font-style: italic;
	src: url(../font/Sansation/Sansation_Bold_Italic.ttf);
}

@font-face {
	font-family: soffid;
	font-weight: 200;
	font-style: italic;
	src: url(../font/Sansation/Sansation_Light_Italic.ttf);
}

body {
	font-family: soffid, Monserrat, Open Sans, sans-serif;
	box-sizing: border-box;
	font-size: var(--size-md);
	font-weight: var(--weight-regular);
	cursor: url('../cursor/pointer.svg'), auto;
	background-color: var(--bg-primary);
	color:var(--neutral-900);
}

div.dark-screen {
	background-color: var(--bg-primary);
	color:var(--neutral-900);
}

.font-size-xs {
	font-size: var(--size-xs);
	line-height: 18px;
}
.font-size-s {
	font-size: var(--size-sm);
	line-height: 22px;
	
}
.font-size-m {
	font-size: var(--size-md);
	line-height: 24px;
}

.font-size-l {
	font-size: var(--size-xl);
	line-height: 28px;
}

body p, body div, body span, body label, body a, body input, body textarea,
body button, body input.button, body input.file {
	font-family: soffid, Inter, Calibri, Arial, sans-serif;
	font-size: inherit;
	font-weight: inherit;
}
.shadow_bright20 {
	box-shadow: 0px 0px 1px 0px #0000000D, 0px 2px 4px 0px #0000001A;
}

.shadow_bright40 {
	box-shadow: 0px 0px 1px 0px #0000000D, 0px 2px 4px 0px #0000001A;
}

.shadow_bright60 {
	box-shadow: 0px 0px 1px 0px #0000000D, 0px 4px 8px 0px #0000001A;
}

.shadow_bright80 {
	box-shadow: 0px 0px 1px 0px #0000000D, 0px 8px 16px 0px #0000001A;
}

.shadow_bright100 {
	box-shadow: 0px 0px 1px 0px #0000000D, 0px 16px 24px 0px #0000001A;
}

.border_thin {
	border: 1px solid var(--border-default, #C0C5D1);
}

.border_medium {
	border-top: 2px solid var(--border-default, #C0C5D1);
}

.border_thick {
	border-top: 4px solid var(--border-dark, #A2A8B8);
}

.border_radius_sm {
	border-radius: var(--br-sm);
}

.border_radius_md {
	border-radius: var(--br-md);
}

.border_radius_lg {
	border-radius: var(--br-lg);
}

.border_radius_xl {
	border-radius: var(--br-xl);
}

/*** ACCORDION ***/

div.accordion {
	border: 1px solid #F5F5F5;
	box-sizing: border-box;
	width: 100%;
	padding: 20px 10px 20px 10px;
	border: 1px solid #C0C5D1;
	border-radius: var(--br-md);
	font-size: var(--size-md);
}

div.accordion.small {
	font-size: var(--size-sm);
	border-radius: var(--br-sm);
}

div.accordion div.accordion_label {
	height: 24px;
	box-sizing: border-box;
	width: calc(100% - 28px);
	margin-right: 10px;
	display: inline-block;
	cursor: url('../cursor/pointer.svg'), auto;
    font-size: inherit;
}

div.accordion div.accordion_button {
	height: 18px;
	width: 18px;
	display: inline-block;
	background-size: contain;
	background-position: center;
    background-repeat: no-repeat;
	font-weight: var(--weight-regular);
	cursor: url('../cursor/pointer.svg'), auto;
}

div.accordion.closed div.accordion_button {
	background-image: url(../img/accordion-expand.svg);
}

div.accordion.open div.accordion_button {
	background-image: url(../img/accordion-compress.svg);
}

div.accordion.open div.accordion_label {
	color: var(--fg-neutral);
	font-weight: var(--weight-medium);
}

div.accordion.closed div.accordion_label {
	color: var(--fg-neutral-faded);
}

div.accordion div.accordion_content {
	font-weight: inherit;
	overflow: hidden;
	display: block;
	width: 100%;
	font-size: inherit;
}

div.accordion.open div.accordion_content {
	margin-top: 10px;
}


div.accordion.closed div.accordion_content div.accordion_content_inner {
	font-weight: inherit;
	transform: translateY(-100%);
	max-height: 0px;
}

div.accordion div.accordion_content div.accordion_content_inner {
	transform-origin: top;
	display: block;
	width: 100%;
	font-size: inherit;
 	transition: transform 0.2s linear ;
}

/*** BUTTON ***/

button, input[type=button], span.tag {
	padding: 7px 8px 9px 8px;
	background-color: var(--fg-primary);
	border: none;
	border-radius: 8px;
	color: var(--bg-primary);
	margin: 4px;
	border: solid 1px transparent;
	height: min-content;
}

button.with_label, input.with_label[type=button], span.tag {
	padding: 7px;
}

.font-size-s button, .font-size-s input[type=button] {
	padding: 5px 6px 8px 6px;
}

.font-size-xs button, .font-size-xs input[type=button] {
	padding: 3px 4px 6px 4px;
}

button.with_label, input.with_label[type=button], span.tag {
	padding-left: 15px;
	padding-right: 15px;
}

.font-size-s button.with_label, .font-size-s input.with_label[type=button] {
	padding: 5px 9px 5px 9px;
}

.font-size-xs button.with_label, .font-size-xs input.with_label[type=button] {
	padding: 3px 7px 3px 7px;
}

button:hover, input[type=button]:hover {
	height: min-content;
	background-color: var(--fg-primary-hover);
}

button img, button svg, button div.icon {
	height: 18px;
	width: 16px;
	fill: var(--bg-primary);
	stroke: var(--bg-primary);
	vertical-align: text-top;
}

.font-size-s button img, .font-size-s button svg,  .font-size-s button div.icon {
	height: 14px;
	width: 14px;
}

.font-size-xs button img, .font-size-xs button svg, .font-size-xs button div.icon {
	height: 12px;
	width: 12px;
}

button.with_label img, button.with_label svg, button.with_label div.icon, span.tag img, span.tag svg {
	margin-right: 8px;
}

button:focus, input[type=button]:focus {
	box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--fg-primary);
	outline: none;
}

button[disabled=disabled] {
	background-color: var(--fg-primary-disabled);
	cursor: url(../cursor/notallowed.svg), not-allowed;
}


button.neutral, input.neutral[type=button] {
	background-color: var(--fg-secondary);
}

button.neutral img, button.neutral svg, span.tag.neutral svg {
	fill: var(--bg-secondary);
	stroke: var(--bg-secondary);
}

button.neutral:hover, input.neutral[type=button]:hover {
	background-color: var(--fg-secondary-hover);
}

button.neutral:focus, input.neutral[type=button]:focus {
	box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--fg-secondary);
}

button.neutral[disabled=disabled] {
	background-color: var(--fg-secondary-disabled);
}

button.critical, input.critical[type=button], span.tag.critical {
	background-color: var(--bg-critical);
	color: var(--bg-primary);
}

button.critical img, button.critical svg, span.tag.critical {
	fill: var(--bg-primary);
	stroke: var(--bg-primary);
}

button.critical:hover, input.critical[type=button]:hover {
	background-color: var(--bg-critical-hover);
}

button.critical:focus, input.critical[type=button]:focus {
	box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--bg-critical);
}

button.critical[disabled=disabled] {
	background-color: var(--bg-critical-disabled);
}


button.faded, input.faded[type=button], span.tag.faded {
	background-color: var(--bg-neutral-faded);
	color: var(--fg-neutral-faded);
}

button.faded img, button.faded svg, span.tag.faded svg {
	fill: var(--fg-neutral-faded);
	stroke: var(--fg-neutral-faded);
}

button.faded:hover, input.faded[type=button]:hover {
	background-color: var(--bg-neutral-faded-hover);
}

button.faded:focus, input.faded[type=button]:focus {
	box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--fg-primary);
}

button.faded[disabled=disabled] {
	background-color: var(--bg-neutral-faded-disabled);
}

button.critical.faded, input.critical.faded[type=button], span.tag.critical.faded {
	background-color: var(--bg-critical-faded);
	color: var(--bg-critical);
}

button.critical.faded img, button.critical.faded svg, span.tag.critical.faded svg {
	fill: var(--bg-critical);
	stroke: var(--bg-critical);
}

button.critical.faded:hover, input.critical.faded[type=button]:hover {
	background-color: var(--bg-critical-faded-hover);
}

button.critical.faded:focus, input.critical.faded[type=button]:focus {
	box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--bg-critical);
}

button.critical.faded[disabled=disabled] {
	background-color: var(--bg-critical-faded);
	color: var(--fg-critical-faded-disabled);
}

button.critical.faded[disabled=disabled] img, button.critical.faded[disabled=disabled] svg {
	fill: var(--fg-critical-faded-disabled);
	stroke: var(--fg-critical-faded-disabled);
}

button.outlined, input.outlined[type=button] {
	background-color: inherit;
	color: var(--fg-neutral);
	border: solid 1px var(--bg-neutral-faded-hover);
}


button.outlined img, button.outlined svg {
	fill: var(--fg-neutral-faded);
	stroke: var(--fg-neutral-faded);
}

button.outlined:hover, input.outlined[type=button]:hover {
	background-color: var(--bg-outlined-hover);
}
button.outlined:focus, input.outlined[type=button]:focus {
	box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--fg-primary);
}

button.outlined[disabled=disabled] {
	background-color: inherit;
	color: var(--fg-disabled);
}

button.outlined[disabled=disabled] img, button.outlined[disabled=disabled] svg {
	fill: var(--fg-disabled);
	stroke: var(--fg-disabled);
}


button.outlined.critical, input.outlined.critical[type=button] {
	background-color: inherit;
	color: var(--bg-critical);
	border: solid 1px var(--bg-critical);
}

button.outlined.critical img, button.outlined.critical svg {
	fill: var(--bg-critical);
	stroke: var(--bg-critical);
}

button.outlined.critical:hover, input.outlined.critical[type=button]:hover {
	background-color: var(--bg-critical-faded);
}
button.outlined.critical:focus, input.outlined.critical[type=button]:focus {
	box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--bg-critical-hover);
}

button.outlined.critical[disabled=disabled] {
	background-color: inherit;
	color: var(--bg-critical-disabled);
}

button.outlined.critical[disabled=disabled] img, button.outlined.critical[disabled=disabled] svg {
	fill: var(--bg-critical-disabled);
	stroke: var(--bg-critical-disabled);
}

button.ghost, input.ghost[type=button] {
	background-color: inherit;
	color: var(--fg-neutral-faded);
}

button.ghost img, button.ghost svg {
	fill: var(--fg-neutral-faded);
	stroke: var(--fg-neutral-faded);
}

button.ghost:hover, input.ghost[type=button]:hover {
	background-color: var(--bg-outlined-hover);
}

button.ghost:focus, input.ghost[type=button]:focus {
	box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--fg-primary);
}

button.ghost[disabled=disabled] {
	background-color: inherit;
	color: var(--fg-disabled);
}

button.ghost[disabled=disabled] img, button.ghost[disabled=disabled] svg {
	fill: var(--fg-disabled);
	stroke: var(--fg-disabled);
}

/*** BUTTONGROUP ***/
div.buttongroup button {
	background-color: inherit;
	color: var(--fg-neutral);
	border: solid 1px var(--bg-neutral-faded-hover);
	padding: 7px 16px 7px 16px;
	border-radius: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

.font-size-xs div.buttongroup button {
	padding: 3px 10px 3px 10px;
	
}

.font-size-s div.buttongroup button {
	padding: 5px 14px 5px 14px;
	
}

div.buttongroup button:first-child {
	border-radius: 8px 0px 0px 8px;
	margin-left: 4px;
}

div.buttongroup button:last-child {
	border-radius: 0px 8px 8px 0px;
	margin-right: 4px;
}

div.buttongroup button:hover {
	background-color: var(--bg-outlined-hover);
}

div.buttongroup button:focus {
	box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--fg-primary);
}

div.buttongroup button.selected {
	background-color: var(--bg-neutral-faded-hover);
}

/*** CHECKBOX ***/
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--fg-primary);
  color: var(--bg-primary);
  appearance: none;
  -webkit-appearance: none;
  align-content: center;
  justify-content: center;
  padding: 1px;
  border: solid 1px var(--bg-neutral-faded-hover);
  border-radius: 4px;
}

input.switch[type="checkbox"] {
  width: 34px;
  height: 18px;
  margin-right: 16px;
  border-radius: 999px;
  background-color: var(--fg-disabled);
}

input.switch[type="checkbox"][disabled] {
  background-color: var(--bg-neutral-faded-hover);
}

input.switch[type="checkbox"]:checked {
  background-color: var(--fg-primary);
}

.font-size-s input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

.font-size-s input.switch[type="checkbox"] {
  width: 30px;
  height: 16px;
}

.font-size-s input[type="checkbox"]::before {
  width: 10px;
  height: 10px;
}

input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 12px;
  display: inline-block;
  clip-path: polygon(10% 50%, 40% 80%, 90% 25%, 80% 15%, 40% 60%, 20% 40%);
  transform: scale(0);
  background-color: var(--bg-primary);
}

span.approve-checkbox input[type="checkbox"]:checked {
  background-color: var(--positive-500);
}

span.deny-checkbox input[type="checkbox"]::before {
	clip-path: polygon(15% 5%, 50% 40%, 85% 5%, 95% 15%, 60% 50%, 95% 85%, 85% 95%, 50% 60%, 15% 95%, 5% 85%, 40% 50%, 5% 15%);
}

span.deny-checkbox input[type="checkbox"]:checked {
  background-color: var(--critical-500);
}

input.switch[type="checkbox"]::before, 
input.switch[type="checkbox"][disabled=disabled]::before  {
  content: "";
  margin-left: 2px;
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 999px;
  background-color: var(--bg-primary);
  clip-path: none;
  transform: none;
  transition: margin-left 0.2s linear ;
}

.font-size-s input.switch[type="checkbox"]::before, 
.font-size-s input.switch[type="checkbox"][disabled=disabled]::before  {
  width: 10px;
  height: 10px;
}

.font-size-s input.switch[type="checkbox"]:checked::before {
	margin-left: 13px;
}


input.switch[type="checkbox"]:checked::before {
	margin-left: 16px;
}

input[type="checkbox"]:checked {
  background-color: var(--fg-primary);
}

input[type="checkbox"]:not([disabled=disabled]):hover {
  background-color: var(--fg-primary-disabled);
}

span.approve-checkbox input[type="checkbox"]:not([disabled=disabled]):hover {
  background-color: var(--positive-300);
}

span.deny-checkbox input[type="checkbox"]:not([disabled=disabled]):hover {
  background-color: var(--critical-300);
}

input[type="checkbox"]:not([disabled=disabled]):checked:hover {
  background-color: var(--fg-primary-hover);
}

input.switch[type="checkbox"]:not([disabled=disabled]):checked:hover {
  background-color: var(--fg-primary-hover);
}
input.switch[type="checkbox"]:not([disabled=disabled]):hover {
  background-color: var(--fg-neutral-faded);
}


input[type="checkbox"]:checked::before, 
input[type="checkbox"]:not([disabled=disabled]):checked:hover::before {
  transform: scale(1);
}

input[type="checkbox"]:not([disabled=disabled]):hover::before {
}

input[type=checkbox]:focus {
	box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--fg-primary);
	outline: none;
}

span input[type=checkbox] + label {
	margin-left: 8px;
}


input[type="checkbox"][disabled=disabled], 
input[type="checkbox"][disabled=disabled]:checked {
  background-color: var(--bg-neutral-faded);
}

input[type="checkbox"][disabled=disabled]::before {
  background-color: var(--fg-disabled);
}

span.switch-label {
	color: var(--fg-disabled);
}

span.approve, span.deny {
	display: inline-block; position: relative;
	cursor: pointer; 
	height: 32px; width:32px;
	-webkit-user-select: none; 
	-moz-user-select: none; -ms-user-select: none; user-select: none; 
	float:left; 
}

/* Hide the browser's default checkbox */ 
span.approve input, span.deny input { 
	position: absolute; opacity: 0; cursor: pointer;
	height: 0; width: 0; 
}

/* Create a custom checkbox */ 
span.approve > label, span.deny > label {
	position: absolute; top: 0; left: 0; height: 25px; min-width:25px; width: 25px; background-color: #eee; 
}

/* On mouse-over, add a grey background color */
span.approve:hover input ~ label,
span.deny:hover input ~ label 
{
	background-color: #ccc; 
	display: block;
}

span.deny:hover input ~ label {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wQOFBgWJLs02wAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAA/ElEQVQ4y43TQUoDQRCF4S9eQDdCmGyMxIAaQw6QrV5WvICokEWIoCAICSFugwuvIKibamya6WhD0Yuqv/pVzRt+zzlu0Fc/+7jHRZk4wTu+Ma80OcA6arYY5y8n+CvuBwwyuItV5FK8YSpk53C6b0PJMV4LOMWdKJpXmlxjWYEfMUkS+yG7rUlbPGFULmkQsv+CXzAMplM26YfsGjxDkwN7RYMOznb44BSftWR3x7bz2JQqkklW/4BTLNHL7bneMfNHJfeMI+Ht2rYbHIbstpqF+DG2Ld95mI3YtBhqg6tUMA5vJ4eNWpbcC9kJviwLpuHtSc0kMfMie7nzAzAUjZ0bw7t3AAAAAElFTkSuQmCC);
	background-repeat: no-repeat;
	background-position: center;
}

span.approve:hover input ~ label { 
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wocEDI7TCYtLwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAyklEQVQY043RMYqDUBDG8f/IY5EYXmcVCKS0SA7gGexyk4U9yTZbBxb2ACFlukgwoIhCqlTWbmEjwoOXQmITI5ny4zfFfCNf/z9MzUw++HS2tmkasixDvYO11mitAXDewY+p67pfiIrARkVgp3Ce5/wuz6KiIrBhGPZpjD1ubvIKA0jbttZ1XQCMMXRdh+d5oxjASZIEYwwASqlJDODs11eJ4/jp6LIsn/DQ0n59lTRNh7CqKnaLk4y1N/zhb3URUqzv+3zPD/Kq7jsrRlP0CTOLEAAAAABJRU5ErkJggg==);
	background-repeat: no-repeat;
	background-position: center;
}

/* When the checkbox is checked, add a blue background */
span.approve input:checked ~ label {
	background-color: var(--positive-400); 
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAYAAACALL/6AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wocEDI7TCYtLwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAyklEQVQY043RMYqDUBDG8f/IY5EYXmcVCKS0SA7gGexyk4U9yTZbBxb2ACFlukgwoIhCqlTWbmEjwoOXQmITI5ny4zfFfCNf/z9MzUw++HS2tmkasixDvYO11mitAXDewY+p67pfiIrARkVgp3Ce5/wuz6KiIrBhGPZpjD1ubvIKA0jbttZ1XQCMMXRdh+d5oxjASZIEYwwASqlJDODs11eJ4/jp6LIsn/DQ0n59lTRNh7CqKnaLk4y1N/zhb3URUqzv+3zPD/Kq7jsrRlP0CTOLEAAAAABJRU5ErkJggg==);
	background-repeat: no-repeat;
	background-position: center;
}

/* When the checkbox is checked, add a blue background */
span.deny input:checked ~ label {
	background-color: var(--critical-400); 
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4wQOFBgWJLs02wAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAA/ElEQVQ4y43TQUoDQRCF4S9eQDdCmGyMxIAaQw6QrV5WvICokEWIoCAICSFugwuvIKibamya6WhD0Yuqv/pVzRt+zzlu0Fc/+7jHRZk4wTu+Ma80OcA6arYY5y8n+CvuBwwyuItV5FK8YSpk53C6b0PJMV4LOMWdKJpXmlxjWYEfMUkS+yG7rUlbPGFULmkQsv+CXzAMplM26YfsGjxDkwN7RYMOznb44BSftWR3x7bz2JQqkklW/4BTLNHL7bneMfNHJfeMI+Ht2rYbHIbstpqF+DG2Ld95mI3YtBhqg6tUMA5vJ4eNWpbcC9kJviwLpuHtSc0kMfMie7nzAzAUjZ0bw7t3AAAAAElFTkSuQmCC);
	background-repeat: no-repeat;
	background-position: center;
}

/* Create the checkmark/indicator (hidden when not checked) */
span.approve label:after, span.deny label:after { 
	content: ""; position: absolute; display: none; 
}

/* Show the checkmark when checked */ 
span.approve input:checked ~ label:after,
span.deny input:checked ~ label:after
 { display: block; }

/*** WINDOW ***/
div.modal {
	border: solid 1px var(--neutral-300);
	border-radius: 8px;
	background-color:  var(--bg-primary);
	shadow: 0px 0px 10px 12px #ffffffc0;
}

div.modal div.title {
	width: calc(100% - 32px);
	padding: 4px 16px 4px 16px;
	height: 18px;
	font-size: 18px;
	border-bottom: solid 1px var(--neutral-300);
	span {
		font-size: 18px;
	}
}

div.modal.font-size-s div.title {
	font-size: var(--size-sm);
}

div.modal div.title svg {
	height: 16px;
	width: 16px;
	float: right;
	margin-top: 2px;
	margin-right: 2px;
	border-radius: 4px;
}

div.modal div.title svg:hover {
	background-color: var(--bg-outlined-hover);
	
}

div.modal div.wc-modal {
	border: none;
	background: transparent;
	padding: 16px 16px 8px 16px;
	
}

div.modal_mask {
	background-color: #4040400;
	opacity: 0.5;
	cursor: url('../cursor/notallowed.svg'), auto;
}

/*** Empty state ***/
div.datatable div.emptyStateImage,
div.datatree div.emptyStateImage {
	width: 100%;
	height: 100px;
	display: block;
	margin-top: 43px;
	mask-type: alpha;
    mask-size: contain;
    display: inline-block;
    mask-position: center;
    mask-repeat: no-repeat;
    background-color: var(--primary-600);
}

div.datatable div.emptyStateMessage1,
div.datatree div.emptyStateMessage1 {
	width: 100%;
	text-align: center;
	font-size: var(--size-md);
	font-weight: var(--weight-semi-bold);
	color: var(--fg-neutral);
}
div.datatable div.emptyStateMessage2,
div.datatree div.emptyStateMessage2 {
	width: 100%;
	text-align: center;
	font-size: var(--size-xs);
	font-weight: var(--weight-regular);
	color: var(--fg-neutral-faded);
}

div.progressdiv span.progressbar {
	width: calc(100% - 48px);
	height: 6px;
	background-color: var(--alpha-dark-3);
	border-radius: 3px;
	display: inline-block;
}

div.progressdiv span.progressbar  div{
	height: 100%;
	border-radius: 3px;
	background-color: var(--fg-primary);
}


div.progressdiv span.progresspct {
	width: 40px;
	margin-left: 8px;
	text-align: right;
	display: inline-block;
	font-size: var(--size-sm);
	font-weight: var(--weight-regular);
}

span.tag {
	display: inline-block;
	border-radius: var(--br-circ);
	background-color: var(--bg-neutral);
	color: var(--bg-primary);
	padding: 2px 10px 2px 10px;
}

span.tag svg {
	fill: var(--bg-primary);
}

span.tag.neutral {
	background-color: var(--fg-tag-secondary);
}

span.tag.primary {
	background-color: var(--fg-primary);
}

span.tag.faded.primary {
	background-color: #E0F6F8;
}

span.tag.secondary {
	background-color: var(--bg-tag-secondary);
}


span.tag.faded.secondary {
	background-color: var(--bg-tab-secondary-faded);
}

span.tag.faded.secondary svg {
	fill: var(--fg-tag-secondary);
}

span.tag.tertiary {
	background-color: var(--bg-tertiary);
}

span.tag.faded.tertiary {
	background-color: var(--bg-tertiary-faded);
	color: var(--fg-tertiary);
}
span.tag.faded.tertiary svg {
	fill: var(--fg-tertiary);
}

span.tag.positive {
	background-color: var(--bg-positive);
}

span.tag.faded.positive {
	background-color: var(--bg-positive-faded);
	color: var(--fg-positive);
}

span.tag.faded.positive svg {
	fill: var(--fg-positive);
}

span.tag.warning {
	background-color: var(--bg-warning);
}

span.tag.faded.warning {
	background-color: var(--bg-warning-faded);
	color: var(--fg-warning);
}

span.tag.faded.warning svg {
	fill: var(--fg-warning);
}

span.tag.faded.critical {
	background-color: var(--bg-critical-faded);
	color: var(--fg-critical);
}
span.tag.faded.critical svg {
	fill: var(--fg-critical);
}

span.tag.disabled {
	background-color: var(--bg-disabled);
	color: var(--fg-disabled);
}

span.tag.faded.disabled {
	background-color: var(--bg-disabled-faded);
}

span.tag.disabled svg {
	fill: var(--fg-disabled);
}

span.tag img, span.tag svg {
	fill: var(--bg-primary);
	stroke: var(--bg-primary);
	height: 12px;
	width: 12px;
	margin-right: 2px;
}

span.tag img:last-child, span.tag svg:last-child {
	margin-right: 0px;
	margin-left: 2px;
}

.font-size-s span.tag {
	padding: 2px 8px 2px 8px;
}

.font-size-xs span.tag {
	padding: 2px 6px 2px 6px;
}

.font-size-s span.tag img, .font-size-s span.tag svg {
	height: 10px;
	width: 10px;
}

.font-size-s span.tag img, .font-size-s span.tag svg {
	height: 8px;
	width: 8px;
}

/*** TOAST ***/
div.toast {
	display: block;
	position: fixed;
	right: 0px;
	top: -400px;
	transition: right 0.3s ease, top 0.3s ease;
}

div.toast div.toasttitle {
	margin-left: 32px;
	font-size: var(--size-md);
	font-weight: var(--weight-medium);
}

div.toast div.toasticon svg, div.toast div.toasticon img {
	height: 20px;
	width: 18px;
	float: left;
}

div.toast div.toastmessage, div.toast div.buttons  {
	margin-left: 32px;
	font-size: var(--size-sm);
	font-weight: var(--weight-regular);
}

div.toast div.toastcontent {
	border: solid var(--bg-neutral-faded) 1px;
	border-radius: 8px;
	background-color: var(--bg-secondary);
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 14px;
	padding-bottom: 14px;
	box-shadow: 0px -4px  4px #ffffffc0, 0px 4px  4px #ffffffc0;
}

div.toasttopshadow1 {
	width: calc(100% - 80px);
	height: 6px;
	margin-left: 40px;
	margin-right: 40px;
	margin-bottom: 4px;
	background-color: var(--bg-neutral-faded);
	border: transparent;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px; 
	box-shadow: 0px -4px  4px #ffffffc0;
}

div.toasttopshadow2 {
	width: calc(100% - 40px);
	height: 6px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 4px;
	background-color: var(--bg-neutral-faded);
	border: transparent;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px; 
}

div.toastbottomshadow2 {
	width: calc(100% - 80px);
	height: 6px;
	margin-left: 40px;
	margin-right: 40px;
	margin-top: 4px;
	background-color: var(--bg-neutral-faded);
	border: transparent;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px; 
}

div.toastbottomshadow1 {
	width: calc(100% - 40px);
	height: 6px;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 4px;
	background-color: var(--bg-neutral-faded);
	border: transparent;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px; 
	box-shadow: 0px 4px 4px #ffffffc0;
}
/*** TEXTBOX ***/
div.databox {
	margin-bottom: 16px;
}

div.font-size-xs div.databox {
	margin-bottom: 12px;
}

div.databox div.container_value {
	display: flex;
	flex-direction: row;
	gap: 8px; 
}

div.databox div.container div.element_border,
div.databox div.container.element_border {
	background-color: var(--bg-primary);
	border: solid 1px var(--input-border-default);
	border-radius: 8px;
	padding: 8px 12px 8px 12px; 
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	gap: 8px;
}


div.databox.ghost div.container div.element_border ,
div.databox.ghost div.container div.element_border:hover,
div.databox.ghost div.container div.element_border:has(:focus) {
	border-color: var(--bg-primary);
}

.font-size-xs div.databox div.container div.element_border {
	padding: 6px 10px 6px 10px; 
	gap: 6px;
}


div.databox div.container div.element_border:hover {
	border: solid 1px var(--input-border-hover);
}

div.databox div.container div.element_border:has(:focus) {
	border: solid 1px var(--input-border-active);
}

div.databox div.container div.element_border.element_border_multiline {
	resize: vertical;
	min-height: 60px;
	overflow: hidden;
}

div.databox[disabled=disabled] div.container div.element_border {
	background-color: var(--bg-neutral-faded);
	color: var(--fg-disabled);
}

div.databox.databox_image div.container div.element_border {
	border: none;
	border-radius: 2px;
	cursor: url('../cursor/pointer.svg'), auto;
}

div.databox div.container div.element_border img.dataimage {
	min-height: 24px;
	min-width: 24px;
	max-height: 125px;
	max-width: min(100%, 125px);
}


div.databox div.container div.element_border input:not([type=checkbox]),
div.databox.databox_tag div.container.element_border div.input,
div.databox div.container div.element_border textarea,
div.databox div.container div.element_border select {
	border: none;
	background: inherit;
	font-size: var(--size-sm);
	font-weight: var(--weight-regular);
	outline: none;
	margin: 0px;
	padding: 0px;
	vertical-align: middle;
	line-height: 22px;
	min-height: 22px;
	flex: max-content;
	width: 100%;
	color:var(--neutral-900);
	border-radius: 0px;
}

div.databox div.container div.element_border input:not([type=checkbox])::placeholder,
div.databox.databox_tag div.container.element_border div.input::placeholder,
div.databox div.container div.element_border textarea::placeholder {
	font-style: italic;
	font-weight: 200;
	color: var(--fg-neutral-faded);
}

div.databox div.container div.element_border form {
	flex: max-content;
	width: 100%;
}

.font-size-xs div.databox div.container div.element_border input:not([type=checkbox]),
.font-size-xs div.databox div.container div.element_border textarea,
.font-size-xs div.databox div.container div.element_border select {
	font-size: var(--size-xs);
	line-height: 18px;
	min-height: 18px;
}

div.databox div.container div.element_border button, 
div.databox div.container.element_border button, 
div.databox div.container div.element_border .icon,
div.databox div.container.element_border .icon {
	height: 16px;
	width: 16px;
	padding: 0px;
	margin: 0px;
	vertical-align: middle;
	border: none;
	display: inline-block;
	margin-top: 1px;
}

div.databox div.container div.element_border button,
div.databox div.container.element_border button {
	border-radius: 0px;
	background-color: transparent;
	cursor: url('../cursor/pointer.svg'), pointer;
}
div.databox div.container div.element_border .icon.active {
	border-radius: 0px;
	background-color: currentcolor;
	cursor: url('../cursor/hand.svg'), pointer;
}

div.container div.element_border button div.icon,
div.container.element_border button div.icon {
	border-radius: 0px;
	color: var(--fg-primary);
	cursor: url('../cursor/pointer.svg'), pointer;
}

div.container div.icon.remove-icon {
	border-radius: 0px;
	color: var(--fg-critical);
	cursor: url('../cursor/pointer.svg'), pointer;
}


div.databox div.container div.element_border .icon svg {
	width: 16px;
	height: 16px;
	fill: var(--fg-neutral-faded);
}

div.databox[disabled=disabled] div.element_border .icon {
	fill: var(--fg-disabled);
}

div.databox div.container div.element_border, input[type=text], textarea {
	cursor: url('../cursor/text.svg') 7 11, auto;
}

div.databox.databox_list div.container div.element_border, 
select {
	cursor: url('../cursor/pointer.svg'), pointer;
}

div.databox div.container div.remove-icon,
div.databox div.container div.remove-icon svg, div.container img.remove-icon {
	fill: var(--fg-primary);
	height: 16px;
	width: 16px;
	display: inline-block;
	margin-top: 12px;
}


div.databox div.label {
	font-size: var(--size-sm);
	font-weight: var(--weight-regular);
	line-height: 22px;
	display: block;
	margin-bottom: 6px;
	color: var(--neutral-600);
	span.colon {
		display: none;
	}
}

div.databox.databox_image div.container div.element_border,
div.databox.databox_image div.container div.element_border:has(input:focus) {
	border: none;
	padding: 0px;
	display: inline-block;
}

div.databox.databox_image div.container div.element_border div.remove-img-icon {
	display: none;
}

div.databox.databox_image:hover div.container div.element_border div.remove-img-icon {
	display: inline-block;
}

div.databox.databox_image div.container div.element_border label {
	border: dashed 1px var(--fg-primary);
	padding: 8px 12px 8px 12px;
	display: inline-block;
	vertical-align: top;
}

div.databox.databox_image div.container div.element_border:has(input:focus) label {
	border: solid 1px var(--fg-primary);
}

div.databox.databox_binary div.container div.element_border label div.icon {
	color: var(--fg-primary);
}

div.databox.databox_image div.container div.element_border input[type=file] ,
div.databox.databox_binary div.container div.element_border input[type=file] {
	width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.classic-view div.databox div.label,
.classic-view div.databox span.label {
	display: inline-block;
	min-width: 200px;
	vertical-align: top;
	margin-top: 9px;
}

.classic-view div.databox.shortlabel div.label {
	min-width: 100px;
}

.classic-view div.databox.databox_switch div.container {
	margin-top: 11px;
}

.classic-view div.databox div.label span.colon ,
.classic-view div.databox[required=true] div.label span.colon  {
	display: inline;
}

.classic-view div.databox div.container.container-nolabel {
	width: 100%;
	float: none;
}


.classic-view div.databox div.container {
	width: calc(100% - 200px);
	float: right;
	box-sizing: border-box;
}

.classic-view div.databox.shortlabel div.container {
	width: calc(100% - 100px);
}

.classic-view div.databox::after {
	content: "";
	display: block;
	width: 100%;
	height: 0px;
	clear: both;
}

.classic-view div.databox.databox_switch div.container.singlevalue {
	display: inline-block;
    width: auto;
    float: none;
}

div.databox-popup {
	border: solid var(--bg-neutral-faded) 1px;
	border-radius: 8px;
	box-shadow: 0px 1px 3px 0px #0000001A, 0px 0px 1px 0px #0000000D;
	background: var(--bg-secondary);
	min-width: 218px;
	z-index: 9999999;
}

div.databox-popup div.databox-wait, div.databox-popup div.databox-wait svg {
	width: 16px;
	height: 16px;
	margin-left: auto;
}

div.databox-popup > div, div.databox-popup label > div{
	padding: 8px 12px 8px 12px;
	font-size: var(--size-sm);
	font-weight: var(--weight-regular);
	line-height: 22px;
}

div.databox-popup > div:hover, div.databox-popup label > div:hover {
	background-color : var(--bg-neutral-faded);
}

div.databox-popup div.no-results:hover {
	background-color : inherit;
}

div.databox-popup div div.upload-menu-icon {
	margin-right: 8px;
}

div.databox-popup div span.search-match {
	font-weight: var(--weight-semi-bold);
}

div.databox textarea {
	width: 100%;
	height: 100;
	resize: none;
	background: inherit;
	border: none;
}


div.databox[required=true] div.label::after {
	content: '*';
	color: var(--fg-critical);
	margin-left: 4px;
} 

.classic-view div.databox[required=true] div.label::after {
	content: '';
	margin-left: 0px;
} 

.classic-view div.databox[required=true] div.label span.colon::before {
	content: '*';
	color: var(--fg-critical);
	margin-left: 4px;
} 


div.databox div.container div.helperText {
	color: var(--fg-neutral-faded);
	font-size: var(--size-xs);
	font-weight: var(--weight-regular);
	width: 100%;
	margin-top: 6px;
}

div.databox div.container div.datahtml {
	width: 100%;
	min-height: 24px;
}

div.databox.databox_tag {
	div.container.element_border {
		flex-flow: row wrap;
		div.container_value {
			flex: 0 0 auto;
			max-width: 100%;
			div.tag {
				padding: 4px 8px 4px 8px;
				background-color: var(--fg-primary);
				border: none;
				border-radius: 16px;
				color: var(--bg-primary);
				margin: -2px 8px -2px 0px;
				border: solid 1px transparent;
				height: 18px;
				line-height: 16px;
				display: flex;
				max-width: calc(100% - 16px);
				flex-direction: row;
				div.icon {
					margin-right: 12px;
					vertical-align: 0px;
					flex: 0 0 auto;
				}
				div.icon.remove-icon {
					background-color: currentColor;
					color: inherit;
					mask-image: url(../img/close-circle-outline.svg);
					height: 16px;
					width: 16px;
					margin-top: 0px;
					margin-right: 0px;
					margin-left: 12px;
					flex: 0 0 auto;
				}
				div.icon.remove-icon:hover {
					background-color: var(--bg-critical);
				}
				span {
					vertical-align: 1px;
					flex: 0 1 auto;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
			div.tag.secondary {
				background-color: var(--bg-tag-secondary);
			}
			div.tag.tertiary {
				background-color: var(--bg-tertiary);
			}
		}
		div.input {
			flex: 1 0 fit-content; 
			width: fit-content;
			min-width: 16px;
			max-width: 100%;
			border: none;
			outline:none;
			cursor: url('../cursor/text.svg') 7 11, auto;
		}
		button {
			margin: -2px 0px -2px 4px;
		}
	}
}

div.databox div.warning {
	div {
	    mask-image: url(/soffid/zkau/web/v4/img/warning.svg);
	    background-color: var(--bg-critical);
	    width: 18px;
	    height: 18px;
	    display: inline-block;
	    margin-right: 12px;
	    padding: 0px;
	    mask-type: alpha;
	    mask-size: contain;
	    mask-position: center;
	    mask-repeat: no-repeat;
	    vertical-align: middle;
   	}
	span {
		color: var(--fg-critical);
	}
}


div.databox.databox_date div.flatpickr-calendar.inline {
	display: block;
}
/*** RADIO BUTTONS ***/
span.radio {
	display: block;
	margin-top: 12px;
	margin-bottom: 12px;
}

input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--fg-primary);
  color: var(--bg-primary);
}

.font-size-s input[type="radio"] {
  width: 14px;
  height: 14px;
}

input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  align-content: center;
  justify-content: center;
  padding: 1px;
  border: solid 1px var(--bg-neutral-faded-hover);
  border-radius: 16px;
}

.font-size-s input[type="radio"]::before {
  width: 6px;
  height: 6px;
}

input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 8px;
  display: inline-block;
  transform: scale(0);
  background-color: var(--fg-primary);
  border-radius: 10px;
  margin-left: 2px;
}

input[type="radio"]:checked {
  border-color: var(--fg-primary);
}

input[type="radio"]:not([disabled=disabled]):hover {
}

input[type="radio"]:checked::before, 
input[type="radio"]:not([disabled=disabled]):checked:hover::before {
  transform: scale(1);
}

input[type="radio"]:not([disabled=disabled]):hover::before {
  background-color: var(--fg-primary-hover);
  transform: scale(1);
}

input[type=radio]:focus {
	box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px var(--fg-primary);
	outline: none;
}

span input[type=checkbox] + label {
	margin-left: 8px;
}


input[type="checkbox"][disabled=disabled], 
input[type="checkbox"][disabled=disabled]:checked {
  background-color: var(--bg-neutral-faded);
}

input[type="checkbox"][disabled=disabled]::before {
  background-color: var(--fg-disabled);
}

/*** SEPARATOR ***/
div.databox_separator {
	div.label {
		font-size: var(--size-md);
		line-height: 24px;
		font-weight: var(--weight-semi-bold);
	}
	div.label::before {
		content: "";
		height: 16px;
		width: 16px;
		margin-right: 4px;
		display: inline-block;
		background-color: currentcolor;
		mask-type: alpha;
		mask-size: contain;
		mask-image: url(../img/chevron-forward.svg);
		transform: rotate(90deg);
	 	transition: transform 0.2s linear ;
	}
	div.container {
		display:none;
	}
}

/** Multi-line with scroll **/
div.databox div.container.multivalue.scrollable {
	overflow-y: auto;
}


/** Sections **/

div.section.collapsed {
	> div {
		display: none;
	}
	> span
    {
		display: none;
	}
	> div.databox.databox_separator,
	> div > div.databox.databox_separator {
		display: block;
		div.label::before {
			transform: rotate(0deg);
		}
	}
}

div.classic-view {
	div.section {
		display: inline-block;
		width: 50% ;
		box-sizing: border-box;
		padding-right: 24px;
		vertical-align: top;
		div.databox.databox_separator {
			border-bottom: solid 1px var(--bg-neutral-faded-hover); 
		}
	}
}
@media only screen and (max-width: 1023px) {
	div.classic-view {
		div.section {
			display: block;
			width: 100%;
			padding-right: 0px;
		}
	}
}


div.compact-view,div.modern-view {
	div.section {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(340px,1fr));
		flex-direction: row;
		gap: 0px 20px;
		flex-wrap: wrap;
		div.databox.databox_separator {
			grid-column-start: 1; 
			grid-column-end: -1;
			flex: 1 0 100%;
			border-bottom: solid 1px var(--bg-neutral-faded-hover); 
		}
	}
}

@media only screen and (min-width: 1065px) {
	div.modern-view {
		div.section {
			width: 100%;
			column-gap: 20px;
			column-width: 340px;
			border-bottom: solid 1px var(--bg-neutral-faded-hover); 
			padding-bottom: 16px;
			display: block;
			margin-bottom: 8px;
			overflow-x: auto;
			div.databox.databox_separator {
				break-after: column;
				border-bottom: none;
			}
			div.databox {
				break-inside: avoid;
			}
		}
		div.section.collapsed {
			padding-bottom: 4px;
		}
	}
	div.modern-view.simple-modern-view {
		div.section {
			column-count: 1;
			div.databox.databox_separator {
				break-after: avoid;
				break-inside: avoid;
				border-bottom: none;
				width: 340px;
				float: left;
			}
			div.databox {
				break-after: avoid;
				break-inside: avoid;
				width: calc(100% - 360px);
				float: right;
			}
		}
	}
}

div.multicol {
	break-inside: avoid;
}
/*** WIZARD ***/
div:has(>div.wizard-bar) {
    overflow-x: clip;	
}

div.wizard-bar {
    height: 56px;
    width: 100%;
    vertical-align: top;
    display: flex;
    flex-direction: row;
    position: relative;
}

div.wizard-bar div.step {
	height: 56px;
	margin: 0px;
	padding: 10px 8px 10px 8px;
    background: var(--alpha-bright-100);
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	flex: 1 0 auto;
}

div.wizard-bar div.step.step-current {
	background-color: var(--bg-tertiary);
	border-bottom: solid 1px var(--bg-tertiary);
	border-top: solid 1px var(--bg-tertiary);
	color: var(--bg-primary);
}
div.wizard-bar div.step.step-first.step-current {
	padding-left: 26px;
	border-left: solid 1px var(--bg-tertiary);
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}
div.wizard-bar div.step.step-last.step-current {
	padding-right: 26px;
	border-right: solid 1px var(--bg-tertiary);
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

div.wizard-bar div.step.step-next {
	background-color: var(--bg-tertiary-faded);
	border-bottom: solid 1px var(--tertiary-100);
	border-top: solid 1px var(--tertiary-100);
}

div.wizard-bar div.step.step-next.step-last {
	padding-right: 26px;
	border-right: solid 1px var(--tertiary-100);
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

div.wizard-bar div.step.step-previous {
	background-color: var(--bg-primary);
	border-bottom: solid 1px var(--input-border-default);
	border-top: solid 1px var(--input-border-default);
}

div.wizard-bar div.step.step-previous.step-first {
	padding-left: 26px;
	border-left: solid 1px var(--input-border-default);
	border-radius: 4px;
}

div.separator-current, div.separator-previous, div.separator-next {
	display: inline-block;
	width: 16px;
	height: 56px;
	flex: 0 0 auto;
}


div.separator-current {
	fill: var(--bg-tertiary);
	stroke: var(--bg-tertiary);
}

div.separator-previous {
	fill: var(--bg-primary);
	stroke: var(--input-border-default);
}

div.separator-next {
	fill: var(--bg-tertiary-faded);
	stroke: var(--tertiary-100);
}

div.wizard-bar div.step div.step-name {
	font-size: var(--size-sm);
}

div.wizard-bar div.step div.step-description{
	font-size: var(--size-xs);
}

/*** TABS ***/

div.tabs {
	border-bottom: solid 1px var(--bg-neutral-faded);	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 16px;
	width: 100%;
	overflow-x: auto;
	
	div.tab, div.tabsel, div.clean-tab, div.clean-tabsel {
		display: inline-block;
		font-size: inherit;
	    font-weight: inherit;
	    a {
			font-size: inherit;
		    font-weight: inherit;
			color: var(--fg-neutral-faded);
			text-decoration: none;
			display: inline-block;
			height: 100%;
	    }
		a:visited {
			color: var(--fg-neutral-faded);
			text-decoration: none;
		}
		a:hover {
			color: var(--fg-primary);
			text-decoration: none;
		}
	}
	
	div.redtab.clean-tabsel, div.redtab.clean-tab {
	    a {
			color: var(--secondary-500);
	    }
		a:visited {
			color: var(--secondary-500);
		}
		a:hover {
			color: var(--secondary-600);
		}
	}
	div.tabsel, div.clean-tabsel a {
		font-size: inherit;
	    font-weight: inherit;
		color: var(--fg-primary);
		border-bottom: solid 1px var(--fg-primary);
	}
	
	
}

div.tabpanels {
	div.tabpanel, div.tabpanel-accordion {
	    border: none;
	    padding: 8px 0px 0px 0px;
	}
}

/**** TABLE *****/
div.datatable {
	display: flex;
	flex-direction: column;
	min-height: 70px;
	outline: none;
	font-size: var(--size-sm);
}

div.datatable div.tablebody, div.datatable table, div.datatable table tr, div.datatable table tr td{
	border-collapse: collapse;
    border-spacing: 0;
}

div.datatable div.tablebody {
	border-top: solid 1px var(--bg-neutral-faded-hover);
	flex: 1 1 0px;
	display: flex;
	flex-direction: column;
	height: 0px;
}

div.datatable div.tablebody {
	overflow-x: clip;
	break-inside: avoid;
	border-left: solid 1px var(--bg-neutral-faded-hover);
	border-right: solid 1px var(--bg-neutral-faded-hover);
}

div.datatable table tr td{
	border-right: solid 1px var(--bg-neutral-faded-hover);
	border-bottom: solid 1px var(--bg-neutral-faded-hover);
}

div.datatable table tr td:last-child, 
div.datatable div.tbodysa div.tbodydiv div.row div.cell:last-child {
	border-right: none;
}

div.datatable div.tbodysa {
	border-bottom: solid 1px var(--bg-neutral-faded-hover);
	scroll-behavior: smooth;
}

div.datatable div.tfoot {
	text-align: right;
	margin-top: 6px;
	flex: 0 0 auto;
}


div.datatable div.cell {
	border-right: solid 1px var(--bg-neutral-faded);
	border-bottom: solid 1px var(--bg-neutral-faded);
	box-sizing: border-box;
	padding: 8px 12px 8px 12px;
	overflow: hidden;
	text-overflow: ellipsis;
}

div.datatable.clean div.cell {
	border: none;
}

div.datatable div.cell.selector {
	text-overflow: clip;
	div.icon {
		margin-bottom: 4px;
	}
}

div.datatable div.cell.selector.drag {
	margin-left: 0px;
	padding-left: 0px;
	div.icon {
		margin-bottom: 4px;
		cursor: url('../cursor/hand.svg'), auto;
	}
}

div.datatable .thead {
	background-color: var(--bg-disabled-faded);
	width: 100%;
	table-layout: fixed;
	flex: 0 0 auto;
}

div.datatable.clean .thead {
	display: none;
}

div.datatable table.tbody {
    width: 100%;
}

div.datatable .thead tr td svg.filter-indicator {
	width: 16px;
	height: 16px;
	display: inline-block;
	margin-top: 8px;
	margin-left: auto;
	margin-right: 0px;
}

div.datatable .thead tr td div.sort-indicator {
	display: inline-block;
	margin-left: 2px;
	width: 16px;
	height: 16px;
	margin-top: 10px;
}

div.datatable .thead tr td {
	color: var(--fg-neutral-faded);
	font-weight: var(--weight-medium);
	padding: 0px;
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;
}

div.datatable .thead tr div.theadcolumn {
	display: flex;
}

div.datatable .thead tr td span {
	padding: 8px 0px 8px 0px;
	display: inline-block;
}

div.datatable .thead tr td div.column-mover-left {
	height: 36px;
	width: 4px;
	cursor: url('../cursor/col-resize.svg') 12 11, col-resize;
	margin-right: 8px;
	display: inline-block;
}

div.datatable .thead tr td div.column-mover-right {
	height: 36px;
	width: 4px;
	cursor: url('../cursor/col-resize.svg') 12 11, col-resize;
	display: inline-block;
	margin-left: auto;
	margin-right: 0px;
}

div.datatable .thead tr td svg.filter-indicator + div.column-mover-right {
	margin-left: 8px;
}


div.datatable .thead tr td.order-column {
	color: var(--fg-neutral);
	font-weight: var(--weight-medium);
}

div.datatable div.tbodydiv div.row:hover div.cell {
	background-color: var(--bg-disabled-faded);
	overflow: hidden;
}

div.datatable div.tbodydiv div.row.selected div.cell {
	background-color: var(--fg-primary-disabled);
}

div.datatable .thead tr td div.sort-indicator svg {
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: tap;
	margin-bottom: 2px;
}

div.datatable .thead td {
	width: auto;
}


div.datatable div.tbodysa0 {
	flex: 1 1 0px;
	height: 0px;
}

div.datatable div.tbodysa {
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	width: 100%;
	height: 100%
}

div.datatable div.tbodydiv div.row {
	display: block;
	position: absolute;
	white-space: nowrap;
}

div.datatable:focus div.tbodysa div.tbodydiv div.row.keyboardSelected,
div.datatable:has(:focus) div.tbodysa div.tbodydiv div.row.keyboardSelected {
	div.cell {
		border-top: solid 1px var(--fg-primary);
		padding-top: 7px;
		border-bottom: solid 1px var(--fg-primary);
	}
	div.cell:nth-child(1) {
		border-left: solid 1px var(--fg-primary);
		padding-left: 11px;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
	}
	div.cell:last-child {
		border-right: solid 1px var(--fg-primary);
		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
	}
}

div.datatable.clean div.tbodydiv div.row {
	width: 100%;
	display: flex;
	flex-direction: row;
}


div.datatable div.tbodydiv div.row div.cell {
	display: inline-block;
	height: 36px;
	vertical-align: top;
	white-space: nowrap;
	overflow: hidden;
	flex: 1 1 auto;
}

div.datatable .thead tr td.filter-cell {
	padding: 4px 6px 4px 6px;
}

div.datatable td.filter-cell input::placeholder {
	color: var(--fg-disabled);
	font-style: italic;
}

div.datatable td.filter-cell input {
	width: 100%;
	border: none;
	background-color: var(--bg-disabled-faded);
	border-radius: 8px;
	outline: none;
	padding: 4px 6px 4px 6px;
	box-sizing: border-box;
}

div.datatable td.filter-cell input:focus {
	border: solid 1px var(--fg-disabled);
}

div.datatable div.wait {
	display: block;
	width: 100%;
	margin-top: 68px;
	height: 40px;
	background-image: url(../img/wait.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    position: absolute;
}

div.datatable div.tbodydiv div.row div.cell.selector {
	width: 48px;
	text-align: center;
}

div.datatable.clean div.tbodydiv div.row div.cell.selector {
	flex: 0 0 auto;
}

div.datatable div.cell.selector.drag {
	width: 60px;
	text-align: center;
}

div.datatable .thead tr td.selector {
	width: 45px;
	text-align: center;
}

div.datatable .thead tr td.selector.drag {
	width: 60px;
	text-align: center;
}

div.datatable div.thead {
	display: flex;
	flex-direction: row;
	div.scroll {
		div.scroll-left, div.scroll-right {
		    position: absolute;
		    top: 0px;
		    z-index: 1;
		    background-color: var(--bg-neutral-faded-hover);
		    width: 12px;
		    height: 100%;
		    div {
		    	background-color: var(--neutral-900);
				mask-type: alpha;
				mask-size: 100% 100%;
				width: 100%;
				height: 100%;
			}
		}
		div.scroll-left {
		    left: 0px;
		    div {
		    	mask-image: url(../img/caret-back.svg);
		    }
		}
		div.scroll-right {
			right: 0px;
			div {
				mask-image: url(../img/caret-forward.svg);
			}
		}
		position: relative;
		border-left: 1px solid var(--bg-neutral-faded-hover);
		border-right: 1px solid var(--bg-neutral-faded-hover);
		flex: 0 1 content;
		width: 16px;
		overflow-x: clip;
		box-sizing: border-box;
		table.scroll {
			display: table;
			position: relative;
		}
	}
	table.no-scroll {
		box-sizing: border-box;
		display: inline-table;
		width: fit-content;
		flex: 1 1 auto;
	}
}

div.datatable div.tbodysa.scroll {
	white-space: nowrap;
	div.tbodydiv {
		display: inline-block;
		vertical-align: top;
	}
	div.tbodydiv.scroll {
		flex: 0 1 auto;
		position: relative;
		overflow-x: hidden;
		div.tbodydiv {
			position: relative;
			height: 100%;
		}
		border-left: 1px solid var(--bg-neutral-faded);
		border-right: 1px solid var(--bg-neutral-faded);
	}
}

/*** DATATREE ****/
div.datatree {
	outline: none;
	font-size: var(--size-sm);
}

div.datatree div.thead {
	background-color: var(--bg-disabled-faded);
	width: 100%;
	display: flex;
}

div.datatree div.thead div.column {
	flex: 1 1 auto;
}

div.datatree div.thead div.column div.sort-indicator {
	display: inline-block;
	margin-left: 2px;
	width: 16px;
	height: 16px;
	vertical-align: top;
    margin-top: 12px;
}

div.datatree div.tree-collapse svg {
	stroke: var(--neutral-900);
}
div.datatree div.thead div.column svg.filter-indicator {
	width: 16px;
	height: 16px;
	display: inline-block;
	margin-top: 8px;
	margin-left: auto;
	margin-right: 0px;
}

div.datatree div.thead div.column span {
	padding: 8px 0px 8px 0px;
	display: inline-block;
	vertical-align: top;
}

div.datatree div.thead div.column div.column-mover-left {
	height: 36px;
	width: 4px;
	cursor: url('../cursor/col-resize.svg') 12 11, col-resize;
	margin-right: 8px;
	margin-left: 0px;
	display: inline-block;
}

div.datatree div.thead div.column div.column-mover-right {
	height: 36px;
	width: 4px;
	cursor: url('../cursor/col-resize.svg') 12 11, col-resize;
	display: inline-block;
	margin-left: 8px;
	margin-right: 0px;
}

div.datatree div.sortable-column div.sort-indicator {
	display: inline-block;
	margin-left: 10px;
	margin-right: 5px;
}
div.datatree div.sortable-column div.sort-indicator div {
	font-size: 50%;
}
div.datatree div.sort-indicator-disabled {
	visibility: hidden;
}

div.datatree div.thead {
	box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;		
    flex: 0 0 auto;
}

div.datatree div.thead input {
	width:100%;
}

div.datatree div.thead div.filter-cell {
	padding-left:10px;
	padding-right: 10px;
	padding-bottom: 2px;
    text-overflow: clip;
    border-bottom: 1px solid #c0c0c0;
}

div.datatree {
	display: flex;
	flex-direction: column;
	border-spacing: 0;
}

div.datatree div.thead div.sortable-column {
	cursor: pointer;
}
div.datatree div.tfoot {
	width:100%;
	box-sizing: border-box;
	margin-top: 5px;
    background-color: var(--alpha-bright-100);
	text-align: right;
	box-sizing: border-box;
	border: none;
	flex: 0 0 auto;
}
		

div.datatree div.tree-itemholder.tree-indent div.tree-label {
    margin-left: 24px;
}

div.datatree div.tree-itemholder div.tree-collapse {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: top;
    padding: 0px;
    padding-top: 8px;
	padding-left: 8px;
	margin-right: 0px;   
	cursor: pointer;
	flex: 0 0 auto;
}

div.datatree div.tree-itemholder div.tree-collapse svg {
	transition: transform 0.3s ease-in-out;
    transform: rotate(-90deg) scale(1, 1);
    width: 16px;
    height: 16px;
    margin-right: 0px;
}

div.datatree div.tree-itemholder div.tree-collapse.open svg {
   	transform: rotate(0deg) scale(1, 1);		
}

div.datatree div.tbody {
  background-color: var(--alpha-bright-100);
  box-sizing: border-box;
  padding: 0px;
  flex: 1 1 100%;
  
}

div.datatree div.tbody div.tree-item {
	overflow-x: hidden;
	display: inline-block; 
	flex: 1 1 100%;
}

div.datatree div.tbody div.tree-itemholder {
	width: 100%;
	position: absolute;
    background: var(--alpha-bright-100);
	border-bottom: solid 1px var(--bg-neutral-faded);
	white-space: nowrap;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}


div.datatree div.tbody div.tree-itemholder.fixed{
	z-index: 1;
	position: sticky;
	background-color: var(--bg-neutral-faded);
	opacity: 0.9;
}

div.tree-children.waiting {
	background-image: url(/soffid/img/wait.svg); 
	background-size: 16px 16px;
	width: 16px;
	height: 32px;
	background-repeat: no-repeat;
	background-position-y: 8px;
}

div.tree-children.waiting div.tree-tail {
	display: none;
}

div.datatree div.tree-itemholder {
  background-image: url(/soffid/img/separator.svg);
	
}

div.datatree div.tree-itemholder img, 
div.datatree div.tree-itemholder svg,
div.datatree div.tree-itemholder div.tree-icon-button,
img.small-icon {
	width: 16px;
	height: 16px;
	display: inline-block;
	margin-top: -2px;
	margin-right: 8px;
}

div.datatree div.tree-itemholder img.tree-icon, 
div.datatree div.tree-itemholder div.tree-icon-button {
	vertical-align: top
}

div.datatree div.tree-itemholder div.tree-cell:hover div.tree-icon-button {
	visibility: visible;
}

div.datatree div.tree-itemholder div.tree-cell div.icon {
	margin-right: 8px;
}

div.datatree div.tree-itemholder div.tree-icon-button {
	visibility: hidden;
}

div.datatree div.tree-label {
	height: 32px;
	padding-top: 0px; 
	overflow: none;
	padding-left: 0px;
}

div.datatree div.tree-label.no-columns {
	padding-left: 12px;
}

div.datatree div.tree-label svg {
	margin-top: 0px;
}

div.datatree div.tree-label.dashed {
	text-decoration: line-through;
}

div.datatree div.tree-label.drag-highlight {
	background-color: var(--fg-secondary-disabled);
}

div.datatree. div.tfoot {
    background-color: var(--alpha-bright-100);
	text-align: right;
	box-sizing: border-box;
	border: none;
}

div.datatree div.thead div.column ,
div.datatree div.tbody div.tree-label div.tree-cell {
	box-sizing: border-box;
	display: inline-block;
	padding-right: 4px;
	overflow: hidden;
	height: 36px;
	white-space: nowrap;
	text-overflow: clip;
	border-right: solid 1px var(--bg-neutral-faded);
	border-bottom: solid 1px var(--bg-neutral-faded);
}

div.datatree div.thead div.filter-cell {
	box-sizing: border-box;
	display: inline-block;
	padding-right: 4px;
	overflow: hidden;
	height: 30px;
	white-space: nowrap;
	text-overflow: clip;
	border-right: solid 1px var(--bg-neutral-faded);
	border-bottom: solid 1px var(--bg-neutral-faded);
	padding-top: 3px;
	padding-bottom: 3px;
	width: 100%;
}

div.datatree div.tbodysa {
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	flex: 1 1 0px;
	scroll-behavior: smooth;
}

div.datatree div.tbody div.tree-label div.tree-cell,
div.datatree div.tbody div.tree-label.no-columns {
	padding: 0px 12px 0px 12px;
	vertical-align: baseline;
	box-sizing: border-box;
	height: 36px;
	border-right: solid 1px var(--bg-neutral-faded);
	display: inline-block;
	line-height: 36px;
}

div.datatree.dynamicdatatree div.tbody div.tree-label div.tree-cell,
div.datatree.dynamicdatatree div.tbody div.tree-label.no-columns,
div.datatree.dynamicdatatree div.tbody div.tree-label {
	height: max(100%, 36px);
	border-bottom: none;
}

div.datatree.dynamicdatatree div.tbody div.tree-label {
	height: auto;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	border-bottom: none;
}

div.datatree div.tbody div.tree-label.no-columns {
	width: 100%;
}

div.datatree div.thead div.filter-cell input.filter {
    width: 100%;
    border: none;
    background-color: var(--bg-disabled-faded);
    border-radius: 8px;
    outline: none;
    padding: 4px 6px 4px 6px;
    box-sizing: border-box;
}

div.datatree div.tbody div.tree-label {
	flex: 1 1 100%;
	overflow: hidden;
    box-sizing: border-box;
}

div.datatree div.tbody div.tree-label:hover {
	background-color: var(--bg-disabled-faded);
	overflow: hidden;
}

div.datatree div.tbody div.tree-label.selected {
	background-color: var(--fg-primary-disabled);
}

div.datatree div.thead div.column {
	color: var(--fg-neutral-faded);
	font-weight: var(--weight-medium);
	padding: 0px;
	white-space: nowrap;
	overflow: hidden;
	padding: 0px;
	display: flex;
}

div.datatree div.thead div.column svg.filter-indicator {
	width: 16px;
	height: 16px;
	display: inline-block;
	margin-top: 8px;
	margin-left: auto;
	margin-right: 0px;
	vertical-align: top;
}

div.datatree div.tbodysa, div.datatree div.thead {
	border: solid 1px var(--bg-neutral-faded);
}

div.datatree:focus div.tbodysa div.tbody div.tree-itemholder.keyboardSelected div.tree-label,
div.datatree:has(:focus) div.tbodysa div.tbody div.tree-itemholder.keyboardSelected div.tree-label{
	border: solid 1px var(--fg-primary);
	border-radius: 4px;
	> div {
		margin-top: -1px;
	}
	> div.icon {
	  margin-top: 7px;
	}
	> div:nth-child(1) {
		margin-left: -1px;
	}
	> div.tree-label:nth-child(1) {
		margin-left: 23px;
	}
}

div.icon {
	width: 16px;
	height: 16px;
	background-color: currentColor;
	mask-type: alpha;
	mask-size: contain;
	display: inline-block;
	vertical-align: middle;
	mask-position: center;
	mask-repeat: no-repeat;
}


/*** WAIT ***/

div.z-loading {
	border: solid 2px var(--bg-neutral-faded);
	border-radius: 8px;
    background-color: var(--alpha-bright-100);
}

div.z-loading-indicator {
	color: var(--fg-primary);
    border: none;
    padding: 20px 25px 10px 25px !important;
	background-image:url('../img/wait.svg') !important; 
	background-size: 26px; 
	background-repeat: no-repeat;
	background-position: 15px 15px;
	height: 26px !important;
	vertical-align: middle;
	text-indent: 60px;
	box-sizing: content-box;
}

img.z-loading-icon {
	width: 0px !important;
	height: 0px !important;
	border: 0px none transparent !important;
	background-image: none;	
}

/*** PAGER ***/
span.pager {
	color: var(--fg-neutral-faded);
}