:root {
    /* Common UI palette */
    --v-black-100: rgb(0 0 0);
    --v-black-90: rgb(0 0 0 / 90%);
    --v-black-75: rgb(0 0 0 / 75%);
    --v-black-60: rgb(0 0 0 / 60%);
    --v-black-40: rgb(0 0 0 / 40%);
    --v-black-25: rgb(0 0 0 / 25%);
    --v-black-20: rgb(0 0 0 / 20%);
    --v-black-15: rgb(0 0 0 / 15%);
    --v-black-10: rgb(0 0 0 / 10%);
    --v-black-5: rgb(0 0 0 / 5%);
    --v-black-0: rgb(0 0 0 / 0%);

    --v-white-100: rgb(255 255 255);
    --v-white-90: rgb(255 255 255 / 90%);
    --v-white-75: rgb(255 255 255 / 75%);
    --v-white-60: rgb(255 255 255 / 60%);
    --v-white-40: rgb(255 255 255 / 40%);
    --v-white-25: rgb(255 255 255 / 25%);
    --v-white-20: rgb(255 255 255 / 20%);
    --v-white-15: rgb(255 255 255 / 15%);
    --v-white-10: rgb(255 255 255 / 10%);
    --v-white-5: rgb(255 255 255 / 5%);
    --v-white-0: rgb(255 255 255 / 0%);

    --v-red-600: #7D0021;
    --v-red-510: rgb(251 44 54 / 10%);
    --v-red-500: rgb(251 44 54 / 100%);
    --v-red-410: rgb(255 100 103 / 10%);
    --v-red-415: rgb(255 100 103 / 15%);
    --v-red-420: rgb(255 100 103 / 20%);
    --v-red-400: rgb(255 100 103 / 100%);
    --v-red-300: #B70032;
    --v-red-200: #C70035;
    --v-red-100: #D60039;
    --v-red-50: #E6003C;

    --v-grey-950: #0A0A0A;
    --v-grey-900: #202324;
    --v-grey-800: #343738;
    --v-grey-700: #505354;
    --v-grey-600: #6B6F70;
    --v-grey-500: #878B8D;
    --v-grey-400: #A3A6A9;
    --v-grey-300: #BEC2C5;
    --v-grey-200: #DADEE1;
    --v-grey-100: #EAECEE;
    --v-grey-50: #F4F5F6;

    --v-blue-100: #C2DBFF;
    --v-blue-200: #8FBDFF;
    --v-blue-300: #5C9FFF;
    --v-blue-400: #2981FF;
    --v-blue-500: #0065F5;
    --v-blue-600: #0050C2;
    --v-blue-700: #003C91;
    --v-blue-800: #00265C;
    --v-blue-900: #001129;

    --v-mint-100: #BDF4DD;
    --v-mint-200: #91EDC6;
    --v-mint-300: #65E6AF;
    --v-mint-400: #39DF98;
    --v-mint-500: #20C67F;
    --v-mint-600: #199C64;
    --v-mint-700: #126E46;
    --v-mint-800: #0B422A;
    --v-mint-900: #04160E;

    --v-yellow-100: #FFF4C7;
    --v-yellow-200: #FFEA94;
    --v-yellow-300: #FFDF61;
    --v-yellow-400: #FFD52E;
    --v-yellow-500: #FAC800;
    --v-yellow-600: #C79F00;
    --v-yellow-700: #967800;
    --v-yellow-800: #614E00;
    --v-yellow-900: #2E2500;

    --v-sky-400: rgb(56 189 248);
    --v-sky-410: rgb(56 189 248 / 10%);
    --v-sky-420: rgb(56 189 248 / 20%);

    /* Tailwind colours */
    --tw-blue-500: rgb(67 144 193 / 100%);
    --tw-blue-515: rgb(67 144 193 / 15%);
    --tw-blue-600: #2D6D9C;

    --tw-green-500: rgb(65 192 114 / 100%);
    --tw-green-515: rgb(65 192 114 / 50%);
    --tw-green-600: #2A8F51;

    --tw-orange-400: rgb(242 166 97 / 100%);
    --tw-orange-415: rgb(242 166 97 / 15%);
    --tw-orange-500: rgb(236 122 35 / 100%);
    --tw-orange-600: #dd6119;
    --tw-orange-700: #b74917;
    --tw-orange-800: #923b1a;
    --tw-orange-900: #763218;

    --tw-red-400: rgb(255 100 103 / 100%);
    --tw-red-410: rgb(255 100 103 / 10%);
    --tw-red-500: #FB2C36;

    /** Branding palette */
    --sq-dark-100: #252525;
    --sq-dark-200: #1E1E1E;
    --sq-dark-300: #292929;
    --sq-dark-400: #383838;
    --sq-dark-500: #313131;

    --sq-grey-100: #333333;
    --sq-grey-200: #444444;
    --sq-grey-300: #555555;
    --sq-grey-400: #707070;
    --sq-grey-500: #8F8F8F;
    --sq-grey-600: #A9A9A9;
    --sq-grey-700: #BBBBBB;
    --sq-grey-800: #C8C8C8;
    --sq-grey-900: #DDDDDD;
    --sq-grey-A00: #EBEBEB;
    --sq-grey-B00: #F8F8F8;
    --sq-grey-C00: #E2E2E2;

    --sq-red-soft: #FAC8C8;
    --sq-red-light: #FD4426;
    --sq-red-dark: #B70032;

    --sq-orange-vibrant: #FF8102;
    --sq-orange-medium: #FFA500;
    --sq-orange-light: #FFB84D;

    --sq-green-lighter: #7AC632;
    --sq-green-light: #3DA319;

    --sq-blue-navy: #007AD9;
    --sq-purple: #AE89DF;

    /* Fonts */
    --v-font-basis: "Open Sans", Arial, sans-serif;
    --v-font-sc: "Fira Code", monospace;
    --v-font-fa: "Font Awesome 7 Pro", sans-serif;

    /* Borders */
    --v-border-radius-md: 6px;
    --v-border-radius-xl: 12px;

    /* Shadows */
    --v-shadow-raw: 0 1px 3px 0px var(--v-black-10);
    --v-shadow-sm: 0 1px 3px 0px rgba(0, 0, 0, 0.1);
}

:root {
  --v-font-basis: "Open Sans", Arial, sans-serif;
}

* {
  box-sizing: content-box;
}

html {
  font-size: 11px;
  background-color: var(--v-background);
  color: var(--v-foreground);
}

body {
  margin:0;
  padding:0;
}

html, body, table, input, a {
  font-family: var(--v-font-basis);
  font-size: 11px;
}

a, a:hover, a:link {
  text-decoration: none;
}

a:link, a:visited, a:active, a:hover {
  color: var(--v-link);
}

a img {
  border: none;
}

h1 a, h2 a {
  font-size: initial;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 16px;
}

h3 {
  font-size: 14px;
}

textarea, input[type="text"], input[type="password"], select {
  background-image: none;
  border-color: var(--v-foreground);
}

textarea:disabled::placeholder, input:disabled::placeholder {
  color: var(--v-disabled-foreground);
}

textarea:disabled, input:disabled {
  background-color: inherit;
  color: var(--v-disabled-foreground) !important;
}

input[type=submit], input[type=button] {
  cursor: pointer;
  margin: 5px 5px 5px 0;
}

input[type="submit"][disabled] {
  color: var(--v-disabled-foreground);
}

input[type="submit"], input[type="button"] {
  background-image:none;
  background-color: var(--v-primary);
  color: var(--v-primary-foreground);
}

label, input[type="radio"], input[type="checkbox"] {
  vertical-align: middle;
}

select[disabled], input[type="submit"][disabled], input[type="button"][disabled], input[type="text"][disabled] {
  background-color: var(--v-disabled);
  background-image: none;
  border: 1px solid var(--v-border);
  color: var(--v-disabled-foreground);
  cursor: auto;
}

input[type="submit"][disabled], input[type="button"][disabled] {
  border: 1px solid var(--v-border);
}

input:disabled + label {
  color: var(--v-disabled-foreground);
}

/** Remove default default design of the browser on a focus */

*:focus {
  outline: 0;
}

/** Override the default design of the browser on a focus + hover */

input:hover, input:focus, textarea:hover, textarea:focus, select:hover, select:focus {
  box-shadow: var(--v-shadow) 0 0 1px 1px;
}

input:hover[disabled="disabled"] {
  box-shadow: none;
}

input[type="submit"]:hover, input[type="button"]:hover {
  background-image: none;
}

/* COLORS */

.color-text-main { color: var(--v-foreground); }

.color-text-sub { color: var(--v-accent-foreground); }

.color-disabled { color: var(--v-disabled-foreground); }

.color-success { color: var(--v-success-foreground); }

.color-error { color: var(--v-danger-foreground); }

.color-warning { color: var(--v-warn); }

.color-fixed { color: var(--v-finding-fixed); }

.color-new { color: var(--v-finding-new); }

.color-suspicious { color: var(--v-finding-suspicious); }

.color-delta-plus { color: var(--v-danger-foreground); }

.color-delta-minus { color: var(--v-finding-fixed); }

.card-bg { background: var(--v-card); }

.carder-bg { background: var(--v-carder); }

.panel-bg { background: var(--v-panel); }

.static-light-bg { background-color: var(--sq-grey-A00); }

.static-light-color { color: var(--sq-grey-100); }

.static-dark-bg { background-color: var(--sq-grey-200); }

.static-dark-color { color: var(--sq-grey-800); }

.static-white-color { color: var(--v-white-100) }

/* WIDTH */

.w-auto { width: auto; }

.w-auto-i { width: auto !important; }

.w-fit { width: fit-content; }

.w-20 { width: 20%; }

.w-25 { width: 25%; }

.w-30 { width: 30%; }

.w-33 { width: 33%; }

.w-50 { width: 50%; }

.w-66 { width: 66%; }

.w-75 { width: 75%; }

.w-100 { width: 100%; }

.width-100-important { width: 100% !important; }

.minw-500px { min-width: 500px; }

.maxw-33 { max-width: 33%; }

.maxw-50 { max-width: 50%; }

.maxw-64ch { max-width: 64ch; }

.w-8px { width: 8px; }

/* HEIGHT */

.full-visible-height { min-height: inherit; }

.h-100 { height: 100%; }

.maxh-75 { max-height: 75% }

.maxh-50 { max-height: 50% }

.maxh-25 { max-height: 25% }

/* MARGIN */

.m-auto { margin: auto; }

.m-0 { margin: 0; }

.m-t-0 { margin-top: 0; }

.m-r-0 { margin-right: 0; }

.m-b-0 { margin-bottom: 0; }

.m-l-0 { margin-left: 0; }

.m-2 { margin: 2px; }

.m-t-2 { margin-top: 2px; }

.m-r-2 { margin-right: 2px; }

.m-b-2 { margin-bottom: 2px; }

.m-l-2 { margin-left: 2px; }

.m-4 { margin: 4px; }

.m-t-4 { margin-top: 4px; }

.m-r-4 { margin-right: 4px; }

.m-b-4 { margin-bottom: 4px; }

.m-l-4 { margin-left: 4px; }

.m-6 { margin: 6px; }

.m-t-6 { margin-top: 6px; }

.m-r-6 { margin-right: 6px; }

.m-b-6 { margin-bottom: 6px; }

.m-l-6 { margin-left: 6px; }

.m-8 { margin: 8px; }

.m-t-8 { margin-top: 8px; }

.m-r-8 { margin-right: 8px; }

.m-b-8 { margin-bottom: 8px; }

.m-l-8 { margin-left: 8px; }

.m-12 { margin: 12px; }

.m-t-12 { margin-top: 12px; }

.m-r-12 { margin-right: 12px; }

.m-b-12 { margin-bottom: 12px; }

.m-l-12 { margin-left: 12px; }

.m-16 { margin: 16px; }

.m-t-16 { margin-top: 16px; }

.m-r-16 { margin-right: 16px; }

.m-b-16 { margin-bottom: 16px; }

.m-l-16 { margin-left: 16px; }

.m-24 { margin: 24px; }

.m-t-24 { margin-top: 24px; }

.m-r-24 { margin-right: 24px; }

.m-b-24 { margin-bottom: 24px; }

.m-l-24 { margin-left: 24px; }

.m-32 { margin: 32px; }

.m-t-32 { margin-top: 32px; }

.m-r-32 { margin-right: 32px; }

.m-b-32 { margin-bottom: 32px; }

.m-l-32 { margin-left: 32px; }

.m-40 { margin: 40px; }

.m-t-40 { margin-top: 40px; }

.m-r-40 { margin-right: 40px; }

.m-b-40 { margin-bottom: 40px; }

.m-l-40 { margin-left: 40px; }

.m-48 { margin: 48px; }

.m-t-48 { margin-top: 48px; }

.m-r-48 { margin-right: 48px; }

.m-b-48 { margin-bottom: 48px; }

.m-l-48 { margin-left: 48px; }

.m-64 { margin: 64px; }

.m-t-64 { margin-top: 64px; }

.m-r-64 { margin-right: 64px; }

.m-b-64 { margin-bottom: 64px; }

.m-l-64 { margin-left: 64px; }

/* PADDING */

.p-0 { padding: 0; }

.p-t-0 { padding-top: 0; }

.p-r-0 { padding-right: 0;}

.p-b-0 { padding-bottom: 0; }

.p-l-0 { padding-left: 0; }

.p-2 { padding: 2px; }

.p-t-2 { padding-top: 2px; }

.p-r-2 { padding-right: 2px; }

.p-b-2 { padding-bottom: 2px; }

.p-l-2 { padding-left: 2px; }

.p-4 { padding: 4px; }

.p-t-4 { padding-top: 4px; }

.p-r-4 { padding-right: 4px; }

.p-b-4 { padding-bottom: 4px; }

.p-l-4 { padding-left: 4px; }

.p-6 { padding: 6px; }

.p-t-6 { padding-top: 6px; }

.p-r-6 { padding-right: 6px; }

.p-b-6 { padding-bottom: 6px; }

.p-l-6 { padding-left: 6px; }

.p-8 { padding: 8px; }

.p-t-8 { padding-top: 8px; }

.p-r-8 { padding-right: 8px; }

.p-b-8 { padding-bottom: 8px; }

.p-l-8 { padding-left: 8px; }

.p-16 { padding: 16px; }

.p-t-16 { padding-top: 16px; }

.p-r-16 { padding-right: 16px; }

.p-b-16 { padding-bottom: 16px; }

.p-l-16 { padding-left: 16px; }

.p-24 { padding: 24px; }

.p-t-24 { padding-top: 24px; }

.p-r-24 { padding-right: 24px; }

.p-b-24 { padding-bottom: 24px; }

.p-l-24 { padding-left: 24px; }

.p-32 { padding: 32px; }

.p-t-32 { padding-top: 32px; }

.p-r-32 { padding-right: 32px; }

.p-b-32 { padding-bottom: 32px; }

.p-l-32 { padding-left: 32px; }

/* FLOAT */

.float-l { float: left; }

.float-r { float: right; }

/* TEXT */

.ta-l { text-align: left; }

.ta-c { text-align: center; }

.ta-r { text-align: right; }

.font-monospace { font-family: var(--v-font-sc); }

.font-normal { font-weight: normal; }

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

.font-italic { font-style: italic; }

.font-line-through { text-decoration: line-through; }

.lh-normal { line-height: normal; }

.lh-2 { line-height: 2; }

.lh-1-2 { line-height: 1.2em; }

.lh-1-3 { line-height: 1.3em; }

.lh-16 { line-height: 16px; }

.white-space-nowrap { white-space: nowrap; }

.white-space-normal { white-space: normal; }

.white-space-pre-wrap { white-space: pre-wrap; }

.wb-all { word-break: break-all; }

.wb-all-important { word-break: break-all !important; }

.wb-normal { word-break: normal; }

.wb-word { word-break: break-word; }

.ff-monospace { font-family: var(--v-font-sc); }

.fs-8 { font-size: 8px; }

.fs-9 { font-size: 9px; }

.fs-10 { font-size: 10px; }

.fs-11 { font-size: 11px; }

.fs-12 { font-size: 12px; }

.fs-14 { font-size: 14px; }

.fs-15 { font-size: 15px; }

.fs-16 { font-size: 16px; }

.fs-18 { font-size: 18px; }

.fs-20 { font-size: 20px; }

.fs-24 { font-size: 24px; }

.text-capitalize { text-transform: capitalize; }

.text-ellipsis {
  display: inline-block;
  width: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis-clamp-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.text-ellipsis-clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text-ellipsis-clamp-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.text-ellipsis-clamp-6 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

/* CURSOR */

.cursor-default { cursor: default; }

.cursor-pointer { cursor: pointer }

/* DYNAMIC ICONS */

.arrow-right-before::before {
  content: '\f061';
  font-family: var(--v-font-fa);
  font-weight: 900;
  margin-right: 2px;
}

/* OPACITY */

.opa-0 { opacity: 0; }

.opa-4 { opacity: 0.4; }

.opa-6 { opacity: 0.6; }

.opa-8 { opacity: 0.8; }

.opa-1 { opacity: 1; }

/* DISPLAY */

.display-none { display: none; }

.display-b { display: block; }

.display-i { display: inline; }

.display-ib { display: inline-block; }

.overflow-hidden { overflow: hidden; }

.overflow-x-hidden { overflow-x: hidden; }

.overflow-y-hidden { overflow-y: hidden; }

.overflow-auto { overflow: auto; }

.overflow-x-auto { overflow-x: auto; }

.overflow-y-auto { overflow-y: auto; }

.v-visible { visibility: visible; }

.v-hidden { visibility: hidden; }

.scrollbar-thin { scrollbar-width: thin; }

/* FLEX */

.display-flex { display: flex; }

.display-flex-align-baseline { display: flex; align-items: baseline; }

.display-flex-align-start { display: flex; align-items: start; }

.display-flex-align-center { display: flex; align-items: center; }

.display-flex-justify-center { display: flex; justify-content: center; }

.display-flex-justify-end { display: flex; justify-content: flex-end; }

.display-flex-wrap { display: flex; flex-wrap: wrap; }

.display-inline-flex-align-center { display: inline-flex; align-items: center; }

.flex-column { flex-direction: column; }

.align-baseline { align-items: baseline; }

.align-content-end { align-content: end; }

.align-center { align-items: center; }

.align-stretch { align-items: stretch; }

.align-self-baseline { align-self: baseline; }

.align-self-center { align-self: center; }

.align-self-end { align-self: flex-end; }

.justify-center { justify-content: center; }

.flex-1-1-auto { flex: 1 1 auto; }

.flex-1-1-0    { flex: 1 1 0; }

.flex-1-1-100  { flex: 1 1 100%; }

.flex-0-1-auto { flex: 0 1 auto; }

.flex-0-0-auto { flex: 0 0 auto; }

.row-gap-4 { row-gap: 4px; }

.column-gap-4 { column-gap: 4px; }

.flex-children-margin-m-r-8 > div { margin-right: 8px; }

.flex-children-margin-m-r-16 > div { margin-right: 16px; }

.row-gap-4 { row-gap: 4px; }

.col-gap-4 { column-gap: 4px; }

/* POSITIONING */

.p-a { position: absolute; }

.p-r { position: relative; }

.va-b { vertical-align: baseline; }

.va-m { vertical-align: middle; }

.va-t { vertical-align: top; }

.va-bottom { vertical-align: bottom; }

/* TABLE */

.tb-l-auto { table-layout: auto; }

.tb-l-fixed { table-layout: fixed; }

.tb-l-initial { table-layout: initial; }

.tb-collapse-separate { border-collapse: separate; }

.tb-spacing-4 { border-spacing: 4px; }

.tb-spacing-6 { border-spacing: 6px; }

.tb-spacing-8 { border-spacing: 8px; }

.tb-va-top td { vertical-align: top; }

/* BACKGROUND */

.bg-grey {
  background-color: var(--v-border);
}

/* TRANSFORM */

.rotate-180 { rotate: 180deg; }

/* Old */

.noBorder, .tableWithoutBorder {
  margin: 0;
  padding: 0;
  border-style: none;
  border-spacing:0;
}

.tableWithoutBorder td, .noTdBorder {
  border-width: 0;
  border-style: none;
  border-spacing:0;
}

.no-padding {
  padding: 0;
}

.withMargin {
  margin: 2px !important;
  padding: 0;
  border-spacing: 0;
}

.withDoubleMargin {
  margin: 10px;
  padding: 0;
  border-spacing: 0;
}

/* LINKS */

a.url-link:hover {
  text-decoration: underline;
}

/* LIST */

ul.list-no-bullet {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/*************/

/* ANIMATION */

/*************/

.fade-out {
  animation: fadeOut linear 2s;
  -webkit-animation: fadeOut linear 2s;
  -moz-animation: fadeOut linear 2s;
}

@keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}

@-moz-keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}

@-webkit-keyframes fadeOut {
  0% { opacity:1; }
  100% { opacity:0; }
}

/**
  PURE-CSS custom
*/

.pure-form input[type=password], .pure-form input[type=email], .pure-form input[type=url],
.pure-form input[type=date], .pure-form input[type=month], .pure-form input[type=time],
.pure-form input[type=datetime], .pure-form input[type=datetime-local], .pure-form input[type=week],
.pure-form input[type=tel], .pure-form input[type=color], .pure-form input[type=number],
.pure-form input[type=search], .pure-form input[type=text], .pure-form select, .pure-form textarea {
  background-color: var(--v-input);
  border: 1px solid var(--v-border);
  border-radius: var(--v-border-radius-md);
  box-shadow: none;
  color: var(--v-foreground);
}

.pure-form input:not([type])[disabled], .pure-form input[type=password][disabled],
.pure-form input[type=email][disabled], .pure-form input[type=url][disabled], .pure-form input[type=date][disabled],
.pure-form input[type=month][disabled], .pure-form input[type=time][disabled], .pure-form input[type=datetime][disabled],
.pure-form input[type=datetime-local][disabled], .pure-form input[type=week][disabled],
.pure-form input[type=tel][disabled], .pure-form input[type=color][disabled], .pure-form input[type=number][disabled],
.pure-form input[type=search][disabled], .pure-form input[type=text][disabled],
.pure-form select[disabled], .pure-form textarea[disabled] {
  background-color: var(--v-disabled);
  color: var(--v-foreground);
}

.pure-controls input[type="submit"] {
  margin-top: 0;
  padding: .5em 1em;
}

.pure-form select {
  padding: .1em .3em;
  background-color: var(--v-input);
  color: var(--v-foreground);
}

.pure-form legend {
  border-bottom: 1px solid var(--v-border);
  color: inherit;
}

.pure-form-aligned .attributes-fieldset .pure-control-group > label {
  width: 40%;
}

.pure-control-group .pure-wrap-label-input {
  display: inline-block;
  min-width: 610px;
  min-height: 2.3em;
}

.pure-control-group .pure-wrap-label-input > label  {
  min-width: 200px;
  max-width: 600px;
  width: 30em;
}

.pure-control-group .pure-wrap-label-input > label + input[type=text],
.pure-control-group .pure-wrap-label-input > label + textarea,
.pure-control-group .pure-wrap-label-input > label + input[type=password],
.pure-control-group .pure-wrap-label-input > label + select,
.pure-control-group .pure-wrap-label-input select {
  width: 20em;
}

.pure-control-group .pure-wrap-label-input.no-margin-left {
  display: inline-block;
  min-width: 600px;
  min-height: 2.3em;
}

.pure-control-group .pure-wrap-label-input.no-margin-left > label {
  width: auto !important;
  min-width: 14em;
  text-align: right;
}

.pure-wrap-nolabel-radio {
  display: inline-block;
}

.pure-wrap-nolabel-radio label {
  width: auto !important;
  margin: 0 1.8em 0 0.3em !important;
}

.pure-wrap-nolabel-radio-table {
  display: inline;
  border-collapse: separate;
  border-spacing: 0 0.5em;
  vertical-align:middle;
}

.pure-wrap-nolabel-radio-table label {
  display: inline !important;
  margin: 0 2em 0 0.3em !important;
}

.pure-table {
  border: 1px solid var(--v-border);

  td, th {
    border: 1px solid var(--v-border);
  }

  thead {
    background-color: var(--v-table-header);
    color: var(--v-foreground);
  }

  tbody {
    background: none;
  }

  .pure-g [class*=pure-u] {
    font-family: var(--v-font-basis);
  }
}

.pure-form-message {
  color: var(--v-accent-foreground);
}

.pure-form input[readonly], .pure-form select[readonly], .pure-form textarea[readonly] {
  background-color: var(--v-accent);
  color: var(--v-accent-foreground);
  border: 1px solid var(--v-border);
}

/**
  GENERAL
*/

body .ui-widget:not(.pi), body .ui-widget .ui-widget:not(.pi) {
  font-family: var(--v-font-basis);
  font-size: 11px;
}

/**
  HIGHCHARTS
*/

.highcharts-legend-series-active .highcharts-legend-item {
  text:hover {
    fill: var(--v-accent-foreground) !important;
  }
}

.highcharts-button {
  .highcharts-button-box {
    fill: var(--v-secondary);
    stroke: var(--v-border);
  }

  .highcharts-button-symbol {
    stroke: var(--v-primary);
  }

  text {
    fill: var(--v-secondary-foreground) !important;
  }
}

.highcharts-contextmenu {
  .highcharts-menu {
    background: var(--v-popover);
    backdrop-filter: blur(16px);

    .highcharts-menu-item {
      color: var(--v-popover-foreground) !important;
    }
  }
}

.highcharts-tooltip {
  .highcharts-tooltip-box {
    fill: var(--v-accent);
    stroke: var(--v-border);
  }

  text {
    fill: var(--v-foreground) !important;
  }
}

.highcharts-legend-item {
  text:hover {
    fill: var(--v-accent-foreground) !important;
  }
}

.highcharts-grid-line {
  stroke: var(--v-border);
}

/**
  CODEMIRROR
*/

.CodeMirror {
  font-family: var(--v-font-sc) !important;
  font-size: 12px;
}

.CodeMirror-linenumber {
  padding-top: 2px !important;
  font-size: 10px;
}

.CodeMirror-merge-scrolllock-wrap {
  bottom: 4px;
}

/**
  FLEXDATALIST
*/

.flexdatalist-alias input {
  width: 60% !important;
}

.flexdatalist-results {
  min-width: 350px !important;
  background: var(--v-popover);
  border-color: var(--v-border) !important;
  color: var(--v-foreground);
  box-shadow: 0 4px 5px var(--v-shadow);
  backdrop-filter: blur(16px);

  li:first-of-type {
    border-top: 1px solid var(--v-border);
  }

  li {
    background: inherit;
    font-size: 11px !important;
    line-height: initial !important;
    border-bottom: 1px solid var(--v-border);
    padding: 8px !important;

    &.group {
      background: var(--v-table-header);
      color: var(--v-foreground);
    }

    &.active {
      background: var(--v-active-bg);
      color: var(--v-active-color);

      .item-key, span:not(:first-child):not(.highlight) {
        color: var(--v-active-color);
      }
    }

    span.highlight {
      font-weight: 700;
      text-decoration: underline;
      color: var(--v-foreground);
      background: var(--v-accent);
    }
  }

  span:not(:first-child):not(.highlight) {
    padding-left: 10px;
    display: inline-block;
    font-size: 80%;
    color: var(--v-foreground);
  }
}

.flexdatalist-multiple {
  width: 59.7% !important;
  margin: 0 !important;
  display: inline-block;
  vertical-align: middle;
  box-shadow: none;
  background-color: var(--v-input) !important;
  border: 1px solid var(--v-border) !important;

  li {
    border: none;
    box-shadow: none;

    &.value {
      line-height: initial !important;
      font-size: 11px !important;
      background: var(--v-secondary);
      color: var(--v-secondary-foreground);

      span.fdl-remove {
        line-height: 16px;
        background: none;
      }
    }

    &.input-container, &.input-container input {
      background-color: transparent;
      box-shadow: none;
    }
  }
}

/**
  AWESOMPLETE
*/

.awesomplete {
  width: 60%;

  input {
    width: 100% !important;
  }

  ul {
    background: var(--v-accent);
    background-image: none;
    color: var(--v-accent-foreground);

    > li.selected {
      background: var(--v-active-bg);
      color: var(--v-active-color);
    }

    > li:hover {
      background: var(--v-background);
      color: var(--v-foreground);
    }
  }
}

/**
 JSToolTip
*/

.jsTooltip {
  background: var(--v-accent);
  pointer-events: none;
  display: none;
  position: absolute;
  padding: 5px 10px;
  color: var(--v-accent-foreground);
  text-align: left;
  z-index: 13001;
  border: 1px solid var(--v-border);
}

.jsTooltip-active {
  display: inline-block;
}

/**
  Nano scroller for filter.
*/

.nano { width: 100%; max-height: 208px; }

.nano > .nano-content { padding: 0; }

.nano > .nano-pane { background: inherit; }

.nano > .nano-pane > .nano-slider { background: var(--v-card); }

.nano.nano-not-on-top::after {
  position: absolute;
  content: "";
  top: -32px;
  left: 0;
  height: 32px;
  width: 100%;
  box-shadow: 0 1px 2px 8px var(--v-tabs-active-bg),
  0 2px 4px 8px var(--v-tabs-active-bg),
  0 4px 8px 8px var(--v-tabs-active-bg),
  0 8px 16px 8px var(--v-tabs-active-bg);
}

.nano.nano-not-on-end::before {
  position: absolute;
  content: "";
  top: 208px;
  left: 0;
  height: 32px;
  width: 100%;
  z-index: 5;
  box-shadow: 0 -1px 2px 8px var(--v-tabs-active-bg),
  0 -2px 4px 8px var(--v-tabs-active-bg),
  0 -4px 8px 8px var(--v-tabs-active-bg),
  0 -8px 16px 8px var(--v-tabs-active-bg);
}

/**
  noUiSlider
*/

.noUi-horizontal {
  height: 14px;
}

.noUi-horizontal .noUi-handle {
  width: 24px;
  height: 22px;
  left: -12px;
  top: -5px;
}

.noUi-handle:after, .noUi-handle:before {
  height: 10px;
  width: 1px;
  left: 10px;
  top: 5px;
}

.noUi-handle:after {
  left: 12px;
}

.noUi-connect {
  background: var(--v-user-theme-color);
}

/**
  Notifyjs
*/

.notifyjs-title-details-base {
  div.title {
    font-size: 1.2em;
    font-weight: bold;
  }

  div.detail {
    padding-top: 10px;
  }
}

.notifyjs-title-details-info {
  div.title i {
    color: var(--v-info-foreground);
  }
}

/**
  Spectrum color picker
*/

.colorpicker-custom-replacer {
  padding: 0 4px 0 0;
  border: none;
}

.sp-preview {
  border: 1px solid var(--v-primary);
}

.sp-container {
  border: 1px solid var(--v-border);
}

/**
  Sun Editor
 */

.sun-editor .se-btn:enabled.active:focus, .sun-editor .se-btn:enabled.active:hover {
    background-color: var(--v-secondary-hover);
    color: var(--v-secondary-foreground);
}

.sun-editor .se-list-inner .se-list-basic li button.active {
    background-color: var(--v-ring);
    border-radius: 0 !important;
}

.sun-editor .se-list-layer.se-list-format ul {
  h1, h2, h3, h4, h5, h6 {
    color: var(--v-secondary-foreground);
  }
}

.sun-editor .se-btn:enabled.on:focus, .sun-editor .se-btn:enabled.on:hover {
  background: var(--v-secondary-hover);
}

.sun-editor {
  border: 1px solid var(--v-grey-800);

  .sun-editor input, .sun-editor select, .sun-editor textarea {
    background: var(--v-input);
    border: 1px solid var(--v-border);
  }

  button {
    color: var(--v-secondary-foreground);
  }

  .se-btn:enabled.on {
    background: var(--v-input);
  }

  .se-btn:enabled:focus, .se-btn:enabled:hover {
    background-color: var(--v-secondary-hover);
    color: var(--v-secondary-foreground);
  }

  .se-btn:enabled:active {
    box-shadow: none;
  }

  .se-toolbar, .sun-editor-editable {
    background-color: var(--v-input);
  }

  .se-toolbar {
    outline: var(--v-card-border);

    .se-btn-module-border {
      border: 1px solid var(--v-border);
    }
  }

  .sun-editor-editable {
    color: var(--v-foreground);
  }

  .se-resizing-bar {
    background-color: var(--v-input);
    border-top: 1px solid var(--v-border);
  }

  .se-wrapper .se-wrapper-code {
    background: var(--v-input);
    color: var(--v-foreground);
  }

  .se-list-layer {
    background-color: var(--v-input);
    border: 1px solid var(--v-border);

    .se-btn-list {
      &.default_value {
        background-color: var(--v-input-hovered);
        border-radius: 0 !important;
      }

      &:hover, &:active, &:focus {
        background-color: var(--v-input-hovered);
        box-shadow: none;
        border-radius: 0 !important;
      }
    }
  }
}

.sun-editor .se-dialog {
  .se-dialog-inner .se-dialog-header {
    border-bottom: 1px solid var(--v-border);
  }

  .se-dialog-inner .se-dialog-content {
    background: var(--v-dialog-background);
    color: var(--v-foreground);

    label {
      display: inline;
    }

    .se-link-preview {
      color: var(--v-accent-foreground)
    }
  }

  .se-dialog-inner .se-dialog-footer {
    border-top: 1px solid var(--v-border);
  }

  button, input, label {
    color: var(--v-foreground);
  }

  button:disabled, input:disabled {
    background-color: var(--v-disabled);
  }

  .se-dialog-inner .se-dialog-content .se-btn-primary {
    background: var(--v-secondary);
    color: var(--v-secondary-foreground);

    &:hover {
      background: var(--v-secondary-hover);
      color: var(--v-secondary-foreground);
    }
  }

  .se-dialog-inner .se-dialog-form .se-dialog-form-files .se-dialog-files-edge-button:hover {
    background: var(--v-secondary-hover);
  }

  /* tabs */
  .se-dialog-tabs {
    border-bottom: 1px solid var(--v-border);

    button {
      margin: 0 !important;
      padding: 2px 13px !important;
      background: var(--v-secondary);
      border: 0 !important;
      border-radius: 0 !important;
      font-size: 14px !important;
      color: var(--v-secondary-foreground);

      &.active {
        background: var(--v-primary);
        color: var(--v-primary-foreground);
      }
    }
  }
}

/* AJAX Management */

.progress {
  cursor: progress;
}

.progress-redirect {
  cursor: default;
}

.loading {
  background: var(--v-user-theme-color);
  border-color: var(--v-user-theme-color);
}

/* BODY : 34px refers to the height of the header and the footer */

.body-container {
  min-width: 1200px;
  min-height: calc(100vh - 34px - 34px);
  padding: 34px 0 0 0;
}

/* * * * */

/* HEADER */

/* * * * */

nav {
  position: fixed;
  top: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0;
  z-index: 99;
  background-color: var(--v-user-theme-color);

  a, a:link, a:visited, a:active, a:hover, .submenu-toggler-container {
    font-size: 13px;
    color: var(--v-white-100);
  }

  .top-menu-section {
    & > div {
      padding: 4px 10px 0 10px;
      border-top: 3px solid transparent;
      white-space: nowrap;

      a:hover {
        color: var(--sq-grey-900);
      }

      i:first-child {
        margin-right: 4px;
      }
    }

    & > div.menu-selected {
      border-top-color: var(--v-white-100);
    }

    /* submenu management */
    .submenu-toggler-container {
      cursor: pointer;
      user-select: none;

      &:hover {
        color: var(--sq-grey-900);
      }
    }

    .submenu {
      display: none;
      position: absolute;
      margin: 4px 0 0 -8px;
      text-align: left;
      vertical-align: baseline;
      background: var(--v-popover);
      backdrop-filter: blur(16px);
      border: 1px solid var(--v-border);
      box-shadow: 0 2px 4px -2px var(--v-shadow);
      z-index: 5000;

      a:link, a:visited, a:active, a:hover {
        color: var(--v-foreground) !important;
      }

      ul {
        line-height: 27px;
        margin: 0;
        padding: 2px;
        text-align: left;
        list-style-type: none;

        li:hover {
          background-color: var(--v-ghost-hovered);
        }

        li a {
          display: block;
          padding: 3px 10px;
          white-space: nowrap;

          i {
            margin-right: 8px;
            color: var(--v-foreground);
          }

          .submenu_icon {
            vertical-align: text-bottom;
            margin-right: 8px;
          }
        }

        hr {
          height: 1px;
          margin: 2px;
          padding:0;
          background: var(--v-border);
          border-color: var(--v-border);
          border-width: 0;
        }
      }
    }
  }

  #menu-logo {
    flex: 0 0 auto;
    height: 100%;

    i.fa-house {
      margin-left: 8px;
      font-size: 14px;
    }

    .menu-logo-image {
      height: 24px;
      margin-left: 6px;
    }

    .menu-logo-text {
      height: 30px;
      margin: 0 10px 0 6px;
    }
  }

  #menu-left {
    flex: 1 1 auto;
    display: flex;
    height: 100%;

    & > div {

    }
  }

  #menu-right {
    flex: 0 0 auto;
    display: flex;
    height: 100%;

    .separator-right-menu {
      height: 100%;
      width: 5px;
      transform: skew(-13deg);
      margin-right: 8px;
      padding: 0;
      background-color: var(--v-white-100);
      border-top: 0;
    }
  }
}

.header_img {
  max-height: 30px;
  margin: 0 10px 2px 6px;
  vertical-align: middle;
}

/* * * * */

/* MENU */

/* * * * */

.submenu_link {
  padding-top: 6px;
  font-size: 13px;

  i {
    font-size: 13px;
  }
}

/* * * * * * * * * * */

/* EXCEPTION DIALOG */

/* * * * * * * * * * */

.exception-dialog {
  z-index: 1000000 !important;
}

/* * * * * * * * */

/* LOADING PANEL */

/* * * * * * * * */

.loading-panel {
  min-width: auto !important;
  border: 0 !important;
  background: transparent !important;
  z-index: 13000 !important;
}

.loading-panel > .ui-dialog-content {
  background-color: transparent !important;
}

.loading {
  width: 150px;
  min-height: 100px;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  padding: 0 0 12px 0;
  text-align: center;
}

.loading > .loading-cancel {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translate(-50%, 0);
  margin-top: 0;
  color: var(--v-white-100);
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* * * * */

/* FOOTER */

/* * * * */

.footer {
  width: 100%;
  height: 34px;
  margin-bottom: 0;
  line-height: 34px;
  text-align: center;
  font-size: 1em;
  background-color: var(--sq-grey-200);
}

.footer, .footer a, .footer a:hover, .footer a:link {
  color: var(--v-white-100) !important;
}

.footer a:hover {
  text-decoration: underline;
}

/* * * * */

/* BANNER */

/* * * * */

.banner {
  width: 100%;
  color: var(--v-banner-foreground);
  text-align: center;
  font-size: 15px;
  font-weight: bold;

  & > div {
    background-color: var(--v-banner);
    border: 2px solid var(--v-border);
  }

  .banner-dismiss {
    margin: 0 4px 0 0;
  }
}

/* * * * * * * * * * */

/* GRIDS FULL HEIGHT */

/* * * * * * * * * * */

.grid-full-height-container {

  & > .grid-full-height {
    min-height: calc(100vh - 34px - 34px); /* 34px refers to the height of the header and the footer */
    background: var(--v-panel);
  }

  & > div:first-child, & > div:last-child {
    box-sizing: border-box;
    background-color: var(--v-grid-surface);
  }

  & > div:first-child {
    border-right: 1px solid var(--v-border);
  }

  & > div:last-child {
    border-left: 1px solid var(--v-border);
  }

}

/***************
 TABLES (dashboard + editor)
***************/

.artefact-table,
li.table-sortable-item {
  background-color: var(--v-carder);
  border: 1px solid var(--v-card-border);
  border-left-width: 4px;
  border-top-right-radius: var(--v-border-radius-md);
  border-bottom-right-radius: var(--v-border-radius-md);
}

.artefact-table .ui-panel-titlebar,
li.table-sortable-item .ui-panel-titlebar {
  display: flex;
  flex-direction: row-reverse;
  padding-left: 0 !important;
  background-color: inherit !important;
  border: 0 !important;
  font-size: 14px;
  text-align: left;
}

.artefact-table .ui-panel-titlebar .ui-panel-title,
li.table-sortable-item .ui-panel-titlebar .ui-panel-title {
  flex: 1 1 auto;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.artefact-table .ui-panel-titlebar .ui-panel-titlebar-icon,
li.table-sortable-item .ui-panel-titlebar .ui-panel-titlebar-icon {
  flex: 0 0 auto;
  margin-top: 0 !important;
  line-height: 2rem !important;
}

.artefact-table .ui-panel-content,
li.table-sortable-item .ui-panel-content {
  background-color: inherit;
  padding-right: 4px !important;
  border: 0 !important;
}

.dash-content-table {
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 0;
  border-style: none;
}

.dash-content-table tr {
  background-color: inherit !important;
  border: 0 !important;
}

.dash-content-table td {
  min-width: initial !important;
  padding: 4px !important;
  vertical-align: baseline;
}

.dash-content-table td:empty {
  min-width: 0 !important;
  padding: 0 !important;
}

.dash-content-table .ui-panel-titlebar {
  padding-bottom: 4px !important;
}

.dash-content-table span.ui-state-disabled,
.dash-content-table a.ui-state-disabled{
  opacity: 1 !important;
}

.dash-content-table .measure-link .disabled-link {
  opacity: 0.2 !important;
}

.dash-content-table .measure-icons {
  white-space: nowrap;
}

.dash-content-table .measure-icons-label {
  min-width: 56px !important;
  padding-left: 0 !important;
}

.dash-content-table .measure-icons-label-container {
  display: flex;
  align-items: flex-start;
}

.dash-content-table .measure-icons > *:only-child {
  margin-right: 4px;
}

.dash-content-table .measure-icons > img:last-child {
  margin-right: 4px;
}

.dash-content-table .measure-data {
  cursor: pointer;
}

.dash-content-table .measure-data:not(:empty) {
  min-width: 48px !important;
  vertical-align: top;
  font-weight: bold;
}

.dash-content-table .measure-data .measure-data-text-only {
  cursor: initial;
}

.dash-content-table .measure-data a.data-link {
  color: inherit;
}

.dash-content-table .measure-link {
  vertical-align: top !important;
  text-align: right;
}

.dash-content-table .measure-link i.external-link-icon {
  float: initial;
  height: initial;
  padding-left: initial;
  vertical-align: middle;
}

/***************
 TABLES (dashboard)
***************/

.artefact-table .ui-panel-content {
  margin-top: -4px;
}

.artefact-table .measure-data .measure-editable {
  padding: 2px 0 2px 4px;
  outline: 1px solid transparent;
  cursor: pointer;
  transition: outline-color 0s linear;
}

.artefact-table .measure-data .measure-editable:hover {
  outline: 1px solid var(--v-border);
  transition: outline-color 0.2s linear;
}

.artefact-table .measure-data .measure-editable .measure-editable-icon-container {
  line-height: 16px;
  padding: 0 2px;
  background-color: transparent;
  transition: background-color 0s linear;
}

.artefact-table .measure-data .measure-editable:hover .measure-editable-icon-container {
  display: inline-block;
  background-color: inherit;
  transition: background-color 0.2s linear;
}

/***************
 TABLES (editor)
***************/

.table-sortable-item .ui-panel-content {
  padding: 0 !important;
}

.table-sortable-item .ui-panel-content .fields-block-collapsible {
  margin: 0 0 8px 8px;
}

#modelTablesArea #sortable-table .ui-panel-titlebar {
  padding-left: 4px !important;
}

/***************
 TOP TABLES (dashboard + editor)
***************/

#dashboard-top-tables-container,
#sortable-top-tables {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin-top: 0;
  margin-bottom: 0;
  border-color: var(--v-border);
}

.tableRenderContainer .artefact-table {
  flex: none;
  max-height: initial !important;
}

#dashboard-top-tables-container .artefact-table,
.tableRenderContainer .artefact-table,
#sortable-top-tables > li {
  flex: 0 0 auto;
  min-width: 230px;
  max-width: 600px;
  min-height: 125px;
  max-height: 322px;
  margin-right: 8px;
  margin-bottom: 4px;
}

#dashboard-top-tables-container .artefact-table .ui-panel .top-table-item-content,
.tableRenderContainer .artefact-table .ui-panel .top-table-item-content,
#sortable-top-tables > li .ui-panel .top-table-item-content {
  display: block;
  width: 100%;
  max-height: 292px;
  padding-right: 8px;
}

#dashboard-top-tables-container .artefact-table .ui-panel,
#sortable-top-tables > li .ui-panel {
  height: 100%;
  overflow: hidden;
  padding-right: 8px;
}

#dashboard-top-tables-container .artefact-table .ui-panel-title,
#sortable-top-tables > li .ui-panel-title .table-header-flex {
  margin-left: 4px;
}

#dashboard-top-tables-container .top-tables-container .ui-panel-title,
#sortable-top-tables .top-tables-container .table-title {
  margin-left: 4px;
  font-size: 16px;
}

#dashboard-top-tables-container table tr:only-child td,
#sortable-top-tables table tr:only-child td {
  font-weight: normal;
}

#dashboard-top-tables-container table tr td,
#sortable-top-tables table tr td {
  height: 16px;
}

#dashboard-top-tables-container table tr:only-child:hover,
#sortable-top-tables table tr:only-child:hover {
  background-color: var(--v-background);
}

#dashboard-top-tables-container td.measure-icons-label,
#sortable-top-tables td.measure-icons-label {
  word-break: normal;
}

#dashboard-top-tables-container td.measure-icons-label:empty + td.measure-data,
#sortable-top-tables td.measure-icons-label:empty + td.measure-data {
  padding-left: 0 !important;
  text-align: left;
}

#dashboard-top-tables-container td.measure-data .measure-html,
#sortable-top-tables td.measure-data .measure-html {
  text-align: left !important;
  font-weight: normal;
}

#dashboard-top-tables-container td.measure-icons-label:not(:empty) + td.measure-data,
#sortable-top-tables td.measure-icons-label:not(:empty) + td.measure-data {
  text-align: right;
}

#dashboard-top-tables-container .measure-icons-label-container,
#sortable-top-tables .measure-icons-label-container {
  white-space: normal;
}

/***************f
 TOP TABLES (only dashboard)
***************/

#dashboard-top-tables-container {
  margin: 0 0 2px 0;
}

/***************
 TOP TABLES (only editor)
***************/

#sortable-top-tables {
  padding-left: 5px;
  list-style: none;
}

#sortable-top-tables li > div.ui-panel {
  display: flex;
  flex-direction: column;
}

#sortable-top-tables > li .ui-panel-content > div:first-child {
  margin: 0 0 0 8px;
}

#sortable-top-tables li > div.ui-panel > div.ui-panel-titlebar {
  flex: 0 0 auto;
  padding-right: 0;
  padding-bottom: 4px;
}

#sortable-top-tables li > div.ui-panel > div.ui-panel-titlebar .table-icons {
  font-size: 11px;
}

#sortable-top-tables li > div.ui-panel > div.ui-panel-content {
  flex: 1 1 auto;
  margin-top: -4px;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/***************
 SCORE CARD TABLES (dashboard + editor)
***************/

/***************
 SCORE CARD TABLES (only dashboard)
***************/

.scorecard-container {
  border-color: var(--v-border);
}

.scorecard-container .artefact-table {
  margin-bottom: 6px;
}

.scorecard-container .artefact-table .ui-panel-titlebar {
  cursor: pointer;
}

.scorecard-container .artefact-table td:last-child {
  padding-right: 4px !important;
}

.scorecard-container .artefact-table .ui-panel-content {
  padding-top: 4px;
}

.scorecard-container .scorecard-container .ui-panel-titlebar {
  cursor: pointer;
}

/***************
 SCORE CARD TABLES (only editor)
***************/

/***************
 TABLES RENDERING (editor)
***************/

.artefact-table.artefact-table-rendering .ui-panel-title {
  margin-left: 4px;
}

/* * * * * * */

/* ATTRIBUTE */

/* * * * * * */

.attributes-container {
  margin: 8px;
}

.attributes-container .attribute-value-item .attribute-value-container .attribute-plain-value {
  padding-left: 4px;
  font-weight: bold;
}

.attributes-container .attribute-value-item .attribute-value-container .attribute-plain-value.attribute-plain-value-empty, .form-empty-value {
  font-style: italic;
  font-weight: normal;
}

.attributes-container .attribute-value-item .attribute-value-spacer {
  min-width: 128px;
}

.attributes-container .attribute-value-item .attribute-value-container {
  display: inline-block;
  outline: 1px solid var(--v-panel);
  transition: outline-color 0s linear;
}

.attributes-container .attribute-value-item:hover .attribute-value-container {
  outline: 1px solid var(--v-border);
  transition: outline-color 0.2s linear;
}

.attributes-container .attribute-value-item a .attribute-value-container {
  background-color: inherit;
  transition: background-color 0s linear;
}

.attributes-container .attribute-value-item a:hover .attribute-value-container {
  color: var(--v-foreground);
}

.attributes-container .attribute-value-item:hover a .attribute-value-container .attribute-value-icon {
  display: inline-block;
  width: 16px;
  margin-left: 4px;
  padding-left: 2px;
  text-align: center;
  background-color: var(--v-accent);
  transition: background-color 0.2s linear;
}

.attributes-container .attribute-value-item:hover a .attribute-value-container .attribute-value-icon i.fa {
  font-size: 12px;
}

.attributes-container .attribute-value-item a i {
  opacity: 0;
  transition: opacity 0s linear;
}

.attributes-container .attribute-value-item:hover a i {
  opacity: 1;
  transition: opacity 0.3s linear;
}

.attributes-container .attributes-comment {
  display: inline-block;
  max-width: 25%;
  margin-left: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* * * * * * * */

/* BREADCRUMBS */

/* * * * * * * */

.breadcrumbs {
  margin: 1px 0 2px 0;
  padding: 0;
  overflow: auto;
  border-bottom: 0;
  list-style-type: none;

  .separator-breadcrumbs {
    color: var(--v-accent-foreground);
    font-size: 11px;
    padding-left: 4px;
  }

  li {
    float: left;
    display: block;
    padding-left: .25em;
    padding-right: .25em;
    line-height: 2em;
    color: var(--v-accent-foreground);

    span, a {
      color: var(--v-foreground);
      &.selected {
        font-weight: bold;
      }
    }
  }

  &.breadcrumbs-explorer {
    li:last-child {
      color: var(--v-foreground);
      font-weight: bold;
    }
  }
}

/* * * * */

/* BOXES */

/* * * * */

/* Infox */

.info-box-container {
  display: flex;

  .info-box {
    max-height: 140px;
    margin-right: 16px;
    padding: 8px;
    background: var(--v-card);
    border: 1px solid var(--v-card-border);
    border-left: 4px solid var(--v-border);
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .standard-table-top {
    flex: 1 1 auto;
    min-width: 275px;
    max-width: 320px;
    padding: 8px 12px;

    .summary-standard-header {
      display: flex;
      width: 100%;
      justify-content: space-between;
      margin-bottom: 6px;
      vertical-align: top;

      &:first-child {
        flex: 1 1 auto;
        font-weight: bold;
        font-size: 1.1em;
      }

      &:last-child {
        flex: 0 0 auto;
        text-align: right;
        padding-right: 0;
        min-width: 50px;
      }
    }

    table {
      border-collapse: separate;
      border-spacing: 0 4px;
      margin-left: 0 !important;

      tr td {
        padding: 2px 8px 2px 0;
        vertical-align: middle;
      }
    }
  }
}

.standard-bar-tooltip-table {
  min-width: 300px;
  border-collapse: collapse;

  tr th {
    padding: 8px 2px 2px 2px;
  }

  tr td {
    padding: 2px;
    vertical-align: middle;
    text-align: right;

    &:first-child {
      min-width: 80px;
    }

    &:nth-child(2) {
      min-width: 20px;

      span {
        vertical-align: middle;
      }
    }

    &:nth-child(3) {
      min-width: 30px;
    }

    &:last-child {
      min-width: 50px;
    }
  }

  tr:has(th) {
    font-weight: bold;
    border-bottom: 2px solid var(--v-border);

    th {
      text-align: right;
      &:first-child {
        text-align: left;
      }
    }
  }
}

.info-box-categories {
  min-width: 200px;
  max-width: 300px;
}

.info-box-container .info-box h3 {
  margin: 0;
  font-size: 16px;
}

.info-box-container .info-box > div {
  display: flex;
  justify-content: center;
}

.info-box-container table {
  flex: 0 0 auto;
  margin-top: 4px;
}

.info-box-container table:not(:first-child) {
  margin-left: 24px;
}

.info-box-container table tr th,
.info-box-container table tr td {
  padding: 2px 8px 2px 8px;
}

.info-box-container table tr td:first-child {
  text-align: right;
}

.info-box-container table tr td:last-child {
  font-weight: bold;
}

.info-box-container table.info-box-numerical tr td:last-child {
  text-align: right;
}

/* Summary */

.summary-container .summary-global-counts {
  margin-top: 16px;
}

.summary-container .summary-global-counts > span:first-child {
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: bold;
}

.summary-container .summary-global-counts > span:nth-child(2) {
  font-size: 16px;
  font-weight: normal;
  text-transform: lowercase;
}

.summary-container .summary-boxes table {
  margin-top: 0;
}

.summary-container .summary-boxes table thead tr th:first-child,
.summary-container .summary-boxes table tbody tr td:first-child {
  min-width: 70px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  word-break: keep-all;
  vertical-align: top;
}

.summary-container .summary-boxes table thead tr th:not(:first-child),
.summary-container .summary-boxes table tbody tr td:not(:first-child),
.summary-container .summary-boxes table tfoot tr td:not(:first-child) {
  text-align: right;
}

.summary-container .summary-boxes table thead tr th:first-child {
  font-size: 1.1em;
  font-weight: bold;
}

.summary-container .summary-boxes table tfoot tr td {
  font-weight: bold;
}

.summary-container .summary-boxes .ui-commandlink.ui-state-disabled, .summary-container .summary-boxes .zero-value {
  color: var(--v-accent-foreground);
  opacity: 1;
}

.summary-container .summary-boxes table .delta,
.summary-bar-tooltip-table .delta {
  padding-left: 0;
  font-size: 0.9em;
  font-weight: normal;
  color: var(--v-accent-foreground);
  white-space: nowrap;
}

.summary-container .summary-boxes tr.summary-separator td {
  padding-top: 12px;
}

/* summary charts */

.summary-container .summary-boxes .summary-bar-cell {
  width: 100%;
}

.summary-container .summary-boxes .summary-bar {
  display: flex;
  width: 100%;
  height: 7px;
  margin-bottom: 2px;
}

.summary-container .summary-boxes .summary-bar .level-bar-empty {
  width: 100%;
  background-color: var(--v-status-default);
}

.summary-container .summary-boxes .summary-bar .level-bar-colored:hover {
  transform: scaleY(1.2);
}

.summary-container .summary-boxes .summary-bar .ui-commandlink {
  height: 100%;
  min-width: 4px;
  margin: 0 1px;
}

.summary-bar-tooltip-scale {
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-bar-tooltip-table {
  border-collapse: separate;
  border-spacing: 8px;
  min-width: 300px;
}

.summary-bar-tooltip-table-right-header {
  vertical-align: middle;
  text-align: right;
}

.summary-bar-tooltip-table tr td:first-child {
  padding-right: 4px;
}

.summary-bar-tooltip-legend {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 16px;
}

#summary-scales td {
  padding: 4px 8px 4px 8px;
}

/* e.g. Interface Settings */

.box-img-legend-selectable {
  padding: 0;
  list-style: none;

  .box-img-legend-selectable-item {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    margin-right: 16px;
    border-radius: 3px;
    text-align: center;

    &.selected {
      border: 1px solid var(--v-active-bg);
    }
  }

  div.box-img-legend-selectable-item {
    display: flex;
  }

  li.box-img-legend-selectable-item {
    display: inline-flex;
  }

  .color-placeholder {
    width: 34px;
    height: 22px;
    margin: 0 auto 6px auto;
    padding: 0;
    line-height: 22px;
  }

  .half-color-placeholder {
    position: absolute;
    top: 0;
    width: 34px;
  }
}

/* * * * * */

/* BUTTONS */

/* * * * * */

button, input[type="submit"], .sq-button, body .ui-button {
  margin: 4px 8px 4px 0 !important;
  padding: 4px 12px !important;
  vertical-align: middle;
  border: 1px solid transparent !important;
  border-radius: var(--v-border-radius-md) !important;
  font-size: 12px !important;
  font-weight: 500;
  cursor: pointer;
  transition: none !important;
  opacity: 1 !important;

  &:focus {
    outline: 2px solid var(--v-ring) !important;
    outline-offset: 2px !important;
  }

  /* TEXT ONLY */
  &.ui-button-text-only > span {
    padding: 0 !important;
  }

  /* ICON + TEXT  */
  &.ui-button-text-icon-left span[class*=fa-], &.ui-button-text-icon-left span[class*=pi-] {
    font-size: 12px !important;

    & + span {
      padding: 0 0 0 16px !important;
    }
  }

  &.ui-button-text-icon-right span[class*=fa-], &.ui-button-text-icon-right span[class*=pi-] {
    font-size: 12px !important;

    & + span {
      padding: 0 16px 0 0 !important;
    }
  }

  /* ICON ONLY */
  &.ui-button-icon-only {
    width: 32px !important;

    span[class*=fa-] {
      font-size: 12px;

      & + span {
        padding: 0;
      }
    }
  }

  &.sq-primary {
    background: var(--v-primary) !important;
    color: var(--v-primary-foreground) !important;

    &:hover {
      background: var(--v-primary-hover) !important;;
    }

    &:active {
      background: var(--v-primary-pressed) !important;;
    }

    &:disabled, &.ui-state-disabled {
      background: var(--v-disabled) !important;
      color: var(--v-disabled-foreground) !important;
    }
  }

  &.sq-secondary {
    background: var(--v-secondary) !important;
    color: var(--v-secondary-foreground) !important;

    &:hover {
      background: var(--v-secondary-hover) !important;
    }

    &:active {
      background: var(--v-secondary-pressed) !important;
    }

    &:disabled, &.ui-state-disabled {
      background: var(--v-disabled) !important;
      color: var(--v-disabled-foreground) !important;
    }
  }

  &.sq-danger {
    background: var(--v-danger) !important;
    color: var(--v-danger-foreground) !important;

    &:hover {
      background: var(--v-danger-hovered) !important;
    }

    &:active {
      background: var(--v-danger-pressed) !important;
    }

    &:disabled, &.ui-state-disabled {
      background: var(--v-disabled) !important;
      color: var(--v-disabled-foreground) !important;
    }
  }

  &.sq-outline {
    background: var(--v-secondary) !important;
    border-color: var(--v-border) !important;
    color: var(--v-secondary-foreground) !important;

    &:hover {
      background: var(--v-secondary-hover) !important;
    }

    &:active {
      background: var(--v-secondary-pressed) !important;
    }

    &:disabled, &.ui-state-disabled {
      background: var(--v-disabled) !important;
      color: var(--v-disabled-foreground) !important;
    }
  }

  &.sq-ghost {
    display: inline !important;
    margin: 0!important;
    padding: 0 !important;
    background: none !important;
    color: var(--v-ghost-foreground) !important;

    &:hover {
      background: var(--v-ghost-hovered) !important;
    }

    &:active {
      background: var(--v-ghost-pressed) !important;
    }

    &:disabled, &.ui-state-disabled {
      color: var(--v-disabled-foreground) !important;
    }
  }
}

.carousel-container {
  height: 80px;
  background-color: var(--v-secondary);

  .carousel-tab {
    margin: 0 auto;

    td {
      padding: 0 10px;
    }

    td:hover {
      background-color: var(--v-secondary-hover);
      cursor: pointer;
    }

    .carousel-left-arrow::before {
      content: '\f053';
      font-family: var(--v-font-fa);
      font-weight: 900;
    }

    .carousel-right-arrow::before {
      content: '\f054';
      font-family: var(--v-font-fa);
      font-weight: 900;
    }
  }

  .car-selected {
    border: 1px solid var(--v-border);
  }

  .carousel-td-content {
    width: 78px;
    height: 78px;
  }
}

/* * * * * * * * * * * */

/* CHARTS IN DASHBOARD */

/* * * ** * * * * * *  */

/** Specific style for free drawing charts (scrum board, controlGraph) */

.hc-shadowMouse:hover {
  opacity: 0.25;
}

.hc-controlPoint:hover {
  opacity: 1;
  stroke-opacity: 1;
}

/** Avoid y-scrollbar on firefox. */

.highcharts-container {
  top: 0 !important;
}

.scorecard-container {
  flex: 1 1 auto;
  min-width: 300px;
  max-width: 15%;
  margin-right: 8px;
}

.charts-container {
  flex: 1 1 auto;
  max-width: 85%;
}

.chart-lines-grid {
  display: grid;
  grid-gap: 8px;
}

.chart-lines-grid > div.chart-grid-cell-expanse {
  content: "";
  display: inline-block;
  height: 0;
  width: 0;
}

.chart-lines-grid > div {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  background: var(--v-carder);
  text-align: center;
  border: 1px solid var(--v-card-border);
  border-radius: var(--v-border-radius-md);

  .header-less {
    border: 0 !important;
    border-radius: 0 !important;
  }
}

.chart-lines-grid > div > div {
  position: absolute;
  width: 100%;
  height: 100%;
}

.chart-lines-grid .chart-container-loading {
  align-self: center;
  margin-top: -36px;
}

.chart-lines-grid > div > div .ui-panel-titlebar .innerCellHeader {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}

.chart-lines-grid > div > div .ui-panel-content {
  height: calc(100% - 38px);
  padding: 0 8px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.innerCellHeader {
  margin-left: 16px;
}

/* * * * * * * * * */

/* CHART IN DIALOG */

/* * * * * * * * * */

.chart-popup {
  min-width: 800px !important;
  inset: 0 16px !important;

  .ui-dialog-content {
    overflow-y: hidden;
  }
}

.chart-popup-grid {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chart-popup-grid .chart-popup-grid-header {
  flex: 0 0 auto;
}

.chart-popup-grid .chart-popup-content-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  height: calc(100% - 80px - 48px);
}

.chart-popup-grid .chart-popup-grid-previous {
  flex: 0 0 auto;
}

.chart-popup-grid .chart-popup-grid-content {
  flex: 1 1 auto;
}

.chart-popup-grid .chart-popup-grid-next {
  flex: 0 0 auto;
}

.chart-popup-grid .chart-popup-grid-carousel {
  flex: 0 0 auto;
}

/* chart popup header */

.chart-popup-grid .chart-popup-grid-header .header-container {
  display: flex;
}

.chart-popup-grid .chart-popup-grid-header .header-container > div:first-child {
  flex: 0 0 auto;
  font-size: 2.5em;
}

.chart-popup-grid .chart-popup-grid-header .header-container > div:nth-child(2) {
  flex: 1 1 auto;
}

.chart-popup-grid .chart-popup-grid-header .header-container > div:last-child {
  flex: 0 0 auto;
  align-self: center;
  padding-right: 28px;
  display: flex;
  column-gap: 16px;
  align-items: center;
}

/* chart popup content */

.chart-popup-grid .chart-popup-grid-content {
  height: 100%;
}

.chart-popup-grid .chart-popup-grid-content .chart-cell-container {
  height: round(up, 100%, 1px);
  position: relative;
}

.chart-popup-grid .chart-popup-grid-content .chart-cell-container .chart-cell {
  position: absolute;
}

.chart-popup-grid .chart-popup-grid-content .chart-cell-container .chart-cell.no-overflow {
  overflow-y: hidden !important;
}

.chart-popup-grid .chart-popup-grid-content .chart-cell-container .chart-cell .fa-spinner {
  position: relative;
  top: calc(50% - 16px);
}

.chart-popup-grid .chart-popup-grid-content #tabPanelArea {
  width: 33%;
  max-width: 33%;
  overflow: auto;
}

.chart-popup-grid .chart-popup-grid-content #diffChartArea {
  width: 50%;
  max-width: 50%;
}

/* chart popup navigation */

.chart-popup-grid .nav-arrow {
  width: 32px;

  i:hover {
    color: var(--v-secondary-hover);
  }
}

.chart-popup-grid .nav-arrow > div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  cursor: pointer;
}

.chart-popup-grid .nav-arrow-disabled:hover {
  background-color: transparent !important;
  cursor: default !important;
}

/* The block containing the content of the popup */

#chartPopup_content {
  height: 100%;
  padding: 0;
}

#chartPopup_content_scroller {
  padding: 0;
}

.chart-cell {
  width: 100%;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.img-cell {
  vertical-align: middle;
  max-height: 100%;
}

.popup-aside {
  box-sizing: border-box;
  width: 100%;
  padding: 5px;
  overflow: auto;
}

.chartDescription table tr th {
  background-color: var(--v-table-header);
  font-weight: bold;
}

.chartDescription table tr th,
.chartDescription table tr td {
  padding: 7px;
}

.chartDescription a {
  color: var(--v-link);
  text-decoration: underline;
}

/* CHARTS */

.miniColorBlock {
  width: 8px;
  height: 8px;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid var(--v-border);
}

.mediumColorBlock {
  width: 13px;
  height: 13px;
  display: inline-block;
  border: 1px solid var(--v-border);
}

.bigColorBlock {
  width: 16px;
  height: 16px;
  display: inline-block;
  border: 1px solid var(--v-border);
}

.bubble {
  border-radius: 15px;
  border: 1px solid var(--v-border);
  min-height: 30px;
  padding: 10px;
  position: relative;
  margin-top: 15px;
}

.bubble:before {
  content: '';
  display: block;
  position: absolute;
  top: -11px;
  left: 21px;
  width: 0;
  height: 0;
  border-color: var(--v-border);
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-style: solid;
  border-width: 0 9px 11px 9px;
}

.bubble:after {
  content: '';
  display: block;
  position: absolute;
  top: -9px;
  left: 22px;
  width: 0;
  height: 0;
  border-color: transparent transparent var(--v-border) transparent;
  border-style: solid;
  border-width: 0 8px 10px 8px;
}

.bubble-condition {
  display: inline-block;
  background-color: var(--v-muted);
  color: var(--v-muted-foreground);
  padding: 4px 5px;
  border-radius: 4px;
  margin: 2px 5px 5px 3px;
}

/* STATISTICS BAR */

.statistics-bar {
  width: 64px;
  height: 12px;
  display: inline-block;
  background-color: var(--sq-green-light);
}

.scale-container {
  display: inline-block;
  min-width: 32px;
  padding: 4px;
  border-radius: 4px;
  text-align: center;
  word-break: normal;
}

.scale-container-inline {
  padding: 2px 4px;
  border-radius: 4px;
  color: var(--v-primary-foreground);
  background-color: var(--v-status-default);
}

/* Standard chip */

.standard-container {
  display: inline-block;
  min-width: 16px;
  max-width: 120px;
  padding: 2px 8px;
  border-radius: 12px;
  background-color: var(--v-status-default);
  color: var(--v-primary-foreground);
  text-align: center;
  word-break: normal;
}

/* Standard rule chip */

.standard-rule-container {
  white-space: nowrap;
  font-weight: bold;

  .standard-rule-name {
    color: var(--v-accent-foreground);
  }

  .standard-rule-marker {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: var(--v-status-default);
  }
}

.scale-container-block {
  border-left: 1px solid var(--v-border);
  margin-bottom: 12px;
  padding-left: 4px;

  & > div:first-child {
    margin-bottom: 2px;
    font-weight: bold;
  }
}

/* * * * * * * * * * * */

/* copy text container */

/* * * * * * * * * * * */

.share-container {
  vertical-align: text-bottom;

  i {
    color: var(--v-link);

    &.share-validation-icon {
      position: absolute;
      top: 8px;
      left: 6px;
      color: var(--v-success-foreground);
    }
  }

  .share-link-content {
    position: absolute;
    height: 0;
    opacity: 0;
    z-index: -1;
  }
}

.copy-text-container {
  display: flex;
  align-items: center;
  max-width: 1000px;
  max-height: 300px;
  padding: 8px;
  border-radius: 4px;
  background-color: var(--v-accent);

  .copy-text-value {
    flex: 1 1 auto;
    max-height: inherit;
    overflow-y: auto;
    font-family: var(--v-font-sc);
    white-space: pre-line;
    word-break: break-word;
  }

  .copy-text-icon-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
    padding-left: 16px;
    text-align: center;
    cursor: pointer;

    .copy-text-icon {
      display: block;
      font-size: 18px;
    }

    .copy-text-icon-feedback {
      position: absolute;
      top: -4px;
      right: -4px;
      font-size: 10px;
      color: var(--v-success-foreground);
    }
  }
}

/* * * * * * * */

/*  CUSTOM TAB */

/* * * * * * * */

.custom-region {
  /* iframe management */
  .custom-iframe-container {
    max-height: 3000px;

    iframe {
      width: 100%;
      border-style: none;
    }
  }

  /* logs management */
  .logs-container {

    i {
      font-size: 12px;
    }

    .logs-content {
      margin-left: 4px;
      padding-left: 8px;
      border-left: 2px solid var(--v-border);

      ul {
        padding: 0;
        list-style: none;
        line-height: 16px;
        font-family: var(--v-font-sc);
      }
    }

    &.erroneous {
      i {
        color: var(--v-danger-foreground);
      }

      .logs-content {
        border-left-color: var(--v-danger-foreground);
      }
    }

    &.cancelled {
      i {
        color: var(--v-disabled);
      }

      .logs-content {
        border-left-color: var(--v-border);
      }
    }
  }
}

.explorer-tabs > ul > li.ui-tabs-header.tab-custom a, li.ui-tabs-header.tab-custom.ui-state-hover a {
  font-style: normal;
  font-weight: normal !important;
  font-size: 12px;
}

/* General */

#sidebar-form\:merge-branches-selection_panel {
  /* sidebar needs a specific z-index */
  z-index: 12000 !important;
}

/* set the close icon as position absolute to allow the sidebar to occupy the full width */

body .ui-sidebar .ui-sidebar-close {
  position: absolute;
  top: 10px;
  right: 8px;
  background-color: var(--v-panel);
  z-index: 1;

  &:hover {
    background: var(--v-secondary-hover);
    color: var(--v-secondary-foreground);
  }
}

.detailed-view {
  &.with-source {
    width: 75%;
    min-width: 550px;
    max-width: 85%;
    overflow: auto;
  }

  &.no-source {
    width: 800px;
  }

  .ui-sidebar-content {
    height: 100%;
  }

  .ui-selectbooleancheckbox + label {
    display: inline-block;
    margin-left: 4px;
    vertical-align: initial;
  }

  input[type='checkbox'] + label {
    display: inline;
    margin-left: 4px;
  }

  h1 {
    margin: 0 0 8px 0;
  }

  h2 {
    display: inline-block;
    margin: 0;
    text-transform: uppercase;
    color: inherit;
  }

  h3 {
    margin: 0;
    font-size: 12px;

    & + p {
      margin-top: 4px;
      line-height: 1.3em;
    }
  }

  label {
    display: block;
    margin-top: 0;
  }

  .see-more-less {
    color: var(--v-accent-foreground) !important;
  }
}

/* Back action */

.detailed-view .back-action-container {

  & + .infos-title {
    display: inline-block;
  }

  /** Move the sidebar title to leave space to the back action icon */
  & + .infos-title, & + .review-start-container {
    margin-left: 8px;
  }
}

/* Review navigation */

.detailed-view .review-navigation {
  display: inline-block;
  padding: 2px 0;
  font-size: 12px;
  font-weight: normal;

  button {
    margin: 0 4px;
  }
}

/* Browser width > 2000px */

@media (min-width: 2000px) {
  .detailed-view.with-source {
    .sidebar-infos-container {
      max-width: 700px;
    }

    .sidebar-source-code-container {
      flex: 1 1 60%;
    }
  }
}

/* Browser width < 2000px */

@media (max-width: 2000px) {
  .detailed-view.with-source {
    .sidebar-infos-container {
      min-width: 600px;
    }

    .sidebar-source-code-container {
      flex: 1 2 60%;
    }
  }
}

/* Infos */

.detailed-view .sidebar-infos-container {
  flex: 1 1 40%;
  display: block;
  height: 100%;
  overflow: auto;

  &.infos-reduced {
    display: none;
  }

  .infos-title {
    line-height: 16px;
  }

  .info-description {
    &.description-truncated {
      display: -webkit-inline-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    p:first-child {
      margin-top: 0;
    }

    p:last-child {
      margin-bottom: 0;
    }
  }

  /* Infos Table */
  table.infos {
    width: 100%;
    box-sizing: border-box;

    &.state-fixed {
      background-color: inherit;
      border-width: 1px;
      border-style: solid;
      border-color: var(--v-finding-fixed);
      border-left-width: 4px;
    }

    th, td {
      padding: 8px;
    }

    th {
      width: 64px;
      max-width: initial;
      min-width: initial;
      vertical-align: top;
      font-weight: normal;
      text-align: left;
      color: var(--v-accent-foreground);
    }

    .finding-icons-container {
      line-height: normal;
    }
  }

  /* Status */
  .status-container {
    .finding-icons-container {
      height: 34px;
      line-height: 34px;
    }

    textarea {
      min-width: 250px;
      max-width: 50%;
    }
  }
}

/* Propagation */

.detailed-view .propagation-container {
  margin: 24px 0;

  .propagation-conflict {
    color: var(--v-danger-foreground);
  }

  .propagation-table th, .propagation-table td {
    max-width: unset;
  }
}

/* View Finding */

.detailed-view {
  /* artefact level */
  .view-artefact-container {
    flex: 0 1 125px;
  }

  /* finding level */
  .view-finding-container {
    flex: 0 1 225px;
  }

  .view-finding-container:has(> .state-fixed) {
    flex: 0 1 175px;
    margin-right: 8px;
  }
}

/* Tabs */

.detailed-view .detailed-view-tabs {
  .ui-tabs-panels {
    padding: 8px 0;
  }

  /* TAB STANDARDS */
  .detailed-view-tab-standards {
    .standard-rules-container {
      &:last-child {
        margin-bottom: 0;
      }

      &:has(.see-more-less.v-hidden):not(:last-child) {
        margin-bottom: 24px;
      }

      &:has(.see-more-less:not(.v-hidden)):not(:last-child) {
        margin-bottom: 24px;
      }

      p:first-child {
        margin-top: 0;
      }

      p:last-child {
        margin-top: 4px;
        margin-bottom: 0;
      }

      p:has(+ ul) {
        margin-bottom: 4px;
      }

      /* Reduce margin and padding for the list of "supporting messages" */
      ul:last-child {
        margin-top: 0;
        padding-left: 24px;
      }
    }
  }

  /* TAB HISTORY */
  .detailed-view-tab-history {
    .timeline-container {
      position: relative;
      margin-top: 8px;
      padding: 0;
      list-style: none;

      & > li {
        min-height: 24px;
        margin-bottom: 12px;

        &::before {
          position: absolute;
          top: 8px;
          left: 134px;
          content: '';
          height: 100%;
          width: 2px;
          background-color: var(--v-border);
          z-index: 1;
        }

        .timeline-item-container {
          position: relative;
          display: flex;
          flex-direction: row;

          .timeline-item-date {
            flex: 0 0 160px;
            color: var(--v-accent-foreground);

            .timeline-item-date-content {
              width: 160px;
            }
          }

          .timeline-item-spot {
            position: absolute;
            top: 1px;
            left: 130px;
            width: 8px;
            height: 8px;
            background-color: var(--v-border);
            border: 1px solid var(--v-border);
            border-radius: 4px;
            z-index: 2;
          }

          .timeline-item-description {
            flex: 1 1 auto;
            align-self: stretch;
            width: 100%;
            padding: 0;
            word-break: break-word;

            i {
              padding-right: 4px;
            }

            .timeline-dirty-icon {
              position: relative;
              bottom: 2px;
              left: 2px;
            }
          }
        }
      }
    }
  }
}

/* Creation form */

.detailed-view {
  .form-container {
    background-color: var(--v-carder);
  }
}

/* Source code */

.detailed-view .sidebar-source-code-container {
  width: 0;
  min-width: 800px;

  .wait-source {
    width: 100%;
  }

  &.source-code-expanded {
    width: 100% !important;
    max-width: none;
  }

  /* source code actions */
  .source-code-actions-container {
    .ui-button.ui-button-text-icon-left .ui-icon {
      font-size: 12px;
      left: 6px;
    }
  }
}

/* FILTERS LEFT-CONTAINER */

.filter-container {
  display: flex;
  flex-direction: column;
  width: 250px;
  height: 100%;
  padding: 16px 16px 32px 16px;
  background-color: var(--v-filters-background);
  color: var(--v-foreground);

  h1 {
    margin: 0;
    font-size: 16px;
    color: var(--v-accent-foreground);
  }

  h2 {
    margin: 12px 0 2px 0;
    font-size: 12px;
    text-transform: uppercase;
  }

  label ~ select, label ~ input {
    display: block;
  }

  select, input[type='text'] {
    width: 100%;
  }

  .finding-filters-closer {
    position: relative;
    left: -12px;
  }

  input.overlay-opener {
    background-color: var(--v-input);
    color: var(--v-foreground);
    cursor: pointer;

    &:hover {
      background-color: var(--v-input-hovered);
    }
  }

  &.filter-container-closed {
    width: 24px;
    padding: 0 4px;

    h1 {
      padding-top: 16px;

      span {
        transform: rotate(180deg);
        writing-mode: vertical-lr;
        font-size: 16px;
      }
    }
  }
}

/* FILTERS EXPLORER */

/** On filter collapsible panel > active zone. */

div.filters-switch-container {
  position: absolute;
  right: 0;
  top: 0;

  &.filters-switch-container-breadcrumb {
    top: 25px;
  }

  &.filters-switch-container-breadcrumb-empty {
    top: 3px;
  }
}

.filter-toggle.active-filter-tab {
  background-color: var(--v-tabs-active-bg);
  color: var(--v-tabs-active-color);
}

.filter-on {
  color: var(--v-warn) !important;
}

/* Exception for the state semi possible. */

.filtered-chart-state-semi-possible .filter-on {
  color: var(--v-danger-foreground) !important;
}

.impossible-filter {
  opacity: 0.2;
}

.filter-toggle {
  position: absolute;
  top: 4px;
  width: 24px;
  height: 23px;
  text-align: center;
  line-height: 24px;
  font-size: 14px;
  cursor: pointer;
  z-index: 10;
  background-color: var(--v-muted);
}

.filter-version-toggle {
  right: 8px;
}

.filter-artefact-toggle {
  right: 37px;
}

#filter-panel .ui-panel-content {
  border: 0;
  border-radius: 0;
  background-color: var(--v-tabs-active-bg);
  color: var(--v-tabs-active-color);

  .ui-button {
    background: var(--v-grey-200) !important;
    color: var(--v-grey-900) !important;

    &.ui-state-hover {
      background: var(--v-grey-300) !important;
    }
  }
}

.filter-panel-item {
  display: none;
}

.filter-panel-item.filter-panel-on {
  display: block;
}

.filter-panel-content {
  border-width: 0;
  margin: 27px 0 0 6px;
}

.filter-panel-content .filter-data input {
  color: var(--v-accent-foreground);
}

#filter-add-apply {
  width: 160px;
  height: 35px;
  z-index: 10;
  background-color: var(--v-tabs-active-bg);
}

.filter-add-apply-static {
  position: static;
}

.filter-add-apply-fixed {
  position: fixed;
  bottom: 0;
  margin-left: -8px;
  padding: 11px;
  box-shadow: 0 -5px 15px -5px var(--v-shadow);
  z-index: 2;
}

/** Input save selection. */

.filter-saved-selection {
  margin-bottom: 10px;
  width: calc(100% - 21px);
  padding: 2px 0;
  box-shadow: none;
  color: var(--v-foreground);
}

/* Filters reset component for Explorer trees */

.filter-active-container {
  display: inline-block;
  padding: 0 6px;
  background-color: var(--v-tabs-active-bg);
  border-radius: 4px;
  cursor: default;

  i.active-icon {
    margin-right: 2px;
    color: var(--v-warn);
  }

  i.fa-xmark {
    color: var(--v-tabs-active-color);
    cursor: pointer;
  }
}

/** Comparative versions component. */

.filter-comparative-container {
  display: flex;
  align-items: baseline;
  column-gap: 4px;

  .ui-selectonemenu.ref-version-menu {
    margin-top: 2px;

    &.ui-state-hover {
      background: var(--v-input);
    }
  }
}

/* Panel of comparative versions component */

div[id$='reference-version_panel'] {
  .ui-selectonemenu-item .ref-version-selected-item-container{
    background-color: var(--v-primary-foreground);
    opacity: 0.5;
    cursor: default !important;
  }

  .ui-selectonemenu-item.ui-state-highlight .ref-version-selected-item-container {
    color: var(--v-foreground);
    background-color: var(--v-input);
  }

  /** By default, PF selectonemenu highlights the first available item (defined by the default selectItem).
    * When defined, default item is shown as a blank table row and can be confusing.
    * Hiding it allows the component to highlight and select the default value, if refreshed.
    * And avoid to display it to the user.
    * Must be used with NoSelectionOption attribute on f:selectItem.
    */
  .ui-noselection-option {
    display: none !important;
  }
}

.filter-menu-icon {
  position: relative;
  top: -3px;
  cursor: pointer;
}

.filter-menu-icon i {
  font-size: 14px;
}

/** Add a small margin after a filter definition. */

.filter-group {
  margin-bottom: 9px;
}

.filter-choices {
  margin-top: 1px;
}

/** For filter popup, no wrap choices. */

.filter-choice-group {
  white-space: nowrap;
  padding-bottom: 1px;
  padding-top: 2px;
}

.filter-choice-separator {
  margin-top: 9px;
}

.filter-choice-disabled img, .filter-choice-disabled label {
  opacity: 0.3;
}

.disabled-icon {
  cursor: initial;
}

.filter-slider {
  margin: 12px 5px;
}

.filter-sliders-values-label {
  padding-right: 2px;
  text-align: right;
}

.filter-sliders-values input[type="text"] {
  width: 100%;
  color: var(--v-accent-foreground);
  margin-top: 2px;
  height: 23px;
}

.filter-match-radio input {
  margin: 1px 1px 3px 0;
}

.filter-wildcard {
  width: calc(100% - 24px);
  margin-right: 2px;
}

/** For ie menu item, don't display the menu if disabled. */

.menu-item-dis {
  display: none;
}

.vertical-select {
  width: 100%;
  margin-top: 2px;
}

.finding-icons-container {
  position: relative;
  margin-right: 4px;

  i {
    font-size: 14px;
  }
}

.finding-icon-suspicious {
  color: var(--v-finding-suspicious);

  &.fa-duotone {
    --fa-primary-color: var(--v-white-100);
    --fa-secondary-color: var(--v-finding-suspicious);
  }
}

.finding-multi-descr-block {
  padding: 0 0 10px 18px;
}

.finding-relax-block {
  padding-top: 3px;
}

.finding-relax-label {
  font-weight: bold;
  color: var(--v-finding-relaxed);
}

.finding-icon {
  margin-right: 4px;
}

.finding-icon i {
  font-size: 14px;
}

img.finding-icon {
  height: 14px;
}

.status-icon-open {
  color: var(--v-finding-open);

  &.fa-duotone {
    --fa-primary-color: var(--v-white-100);
    --fa-secondary-color: var(--v-finding-open);
  }
}

.status-background-open {
  background-color: var(--v-finding-open);
}

.status-icon-confirmed, .status-icon-reviewed {
  color: var(--v-finding-confirmed);

  &.fa-duotone {
    --fa-primary-color: var(--v-white-100);
    --fa-secondary-color: var(--v-finding-confirmed);
  }
}

.status-icon-todo {
  color: var(--v-finding-confirmed);
}

.status-background-todo {
  background-color: var(--v-finding-confirmed);
}

.status-background-confirmed, .status-background-reviewed {
  background-color: var(--v-finding-confirmed);
}

.status-icon-relaxed {
  color: var(--v-finding-relaxed);

  &.fa-duotone {
    --fa-primary-color: var(--v-white-100);
    --fa-secondary-color: var(--v-finding-relaxed);
  }
}

.status-background-relaxed {
  background-color: var(--v-finding-relaxed);
}

/*  */

.finding-icons-container i.new-finding-indicator, .info-box i.new-finding-indicator {
  color: var(--v-finding-new);

  &.fa-duotone {
    --fa-primary-color: var(--v-white-100);
    --fa-secondary-color: var(--v-finding-new);
  }
}

.finding-icons-container {
  i.new-finding-indicator, i.modified-finding-indicator,
  i.closed-finding-indicator, i.suspicious-finding-indicator, i.read-only-finding-indicator {
    font-size: 10px;
    left: 10px;
  }
}

.info-box i.modified-finding-indicator, .finding-icons-container i.modified-finding-indicator {
  color: var(--v-foreground);
}

.info-box i.closed-finding-indicator, .finding-icons-container i.closed-finding-indicator {
  color: var(--v-finding-fixed);

  &.fa-duotone {
    --fa-primary-color: var(--v-white-100);
    --fa-secondary-color: var(--v-finding-fixed);
  }
}

.info-box {
  i.finding-icon-suspicious, i.closed-finding-indicator,
  i.new-finding-indicator {
    font-size: 12px;
  }

  i.modified-finding-indicator {
    font-size: 12px;
    width: 12px;
    text-align: center;
  }
}

.read-only-indicator.read-only-indicator-with-status {
  position: absolute;
  top: 6px;
  left: 10px;

  & > i {
    font-size: 10px;
  }
}

.artefact-finding {
  color: var(--v-finding-relaxed);
}

/* SUPPLEMENTAL MESSAGES */

.sm-list-container {
  overflow: auto;
  margin-top: 4px;
  margin-left: 2px;
  scrollbar-width: thin;
}

.sm-container {
  margin-bottom: 16px;

  .sm-location-container {
    margin-top: 4px;

    .path-separator {
      font-size: 0.8em;
    }

    .sm-sc-toggler-container {
      cursor: pointer;
      user-select: none;
    }

    .sm-location {
      color: var(--v-accent-foreground);
    }

    .sm-sc-container {
      max-height: 225px;

      .sm-sc-toggler {
        display: flex;
        justify-content: flex-end;
        z-index: 13000;
      }

      .sm-sc-reduced {
        .CodeMirror {
          height: 100px;
        }
      }

      .sm-sc-expanded {
        .CodeMirror {
          height: 200px;
        }
      }
    }
  }
}

.required {
  font-weight: bold;
  color: var(--v-danger-foreground);
}

/** nested icon */

.input-icon-container {
  display: flex;
  align-items: stretch;
}

.input-icon-container input {
  width: 100%;
}

.input-icon-field {
  border-right: 0;
}

/* toggle */

.rule-icon-read-only {
  opacity: 50%;
}

/* upload component */

.upload-container {
  width: 500px;
  min-width: 400px;
  max-width: 800px;

  .ui-fileupload {
    display: inline-block;
    width: 100%;
  }

  .ui-fileupload-filename {
    word-break: initial;
  }
}

/* pure form extension */

.custom-form {
  height: 100%;
}

.radio-inline {
  display: inline-block;
  vertical-align: middle;
}

.radio-inline td {
  padding-right: 6px;
}

.radio-check-span {
  display: inline-block;
  padding: .5em 0;
  vertical-align: middle;
}

.radio-check-span label {
  display: inline !important;
  width: initial !important;
  padding-left: .5em;
  text-align: left;
}

.radio-check-page-direction td {
  padding-bottom: 3px;
}

.inline-multi-checkbox-label {
  width: auto !important;
  padding-left: .5em !important;
}

.tag[disabled] {
  background-color: var(--v-active-bg);
}

.tag-checkbox-option {
  display: inline;
  border-collapse: separate;
  border-spacing: 0 1em;
}

.tag-checkbox-option td label {
  width: auto !important;
  margin: 0 1.8em 0 0.3em !important;
  text-align: left !important;
}

.tag-checkbox-option td input {
  display: inline !important;
}

.tag-checkbox-option td:last-child,
.tag-checkbox-option td:last-child input {
  width: 100%;
}

.pure-custom-calendar {
  display: inline-block;
}

.pure-table-custom, .pure-table-custom-3td {
  table-layout: fixed;
  width: 60%;
  margin-bottom: 2em;
}

.pure-table-custom td:first-child {
  text-align: right;
}

.pure-table-custom-3td {
  table-layout: fixed;
  width: 60%;
  margin-bottom: 2em;
  text-align: right;
}

.pure-custom-autocomplete {
  height:25px !important;
}

.pure-flex-container {
  display: flex;
  align-items: center;
}

.pure-flex-container input {
  flex: 1;
}

.pure-flex-container table {
  border-collapse: separate;
  border-spacing: 0.5em;
}

.pure-flex-container table label {
  display: inline !important;
  width: auto !important;
  text-align: left !important;
}

.flex-tag-input-autocomplete ul {
  width: 100% !important;
  box-sizing: border-box;
  background-color: var(--v-input) !important;
  border: 1px solid var(--v-border) !important;
  border-radius: var(--v-border-radius-md) !important;
}

.flex-tag-input table {
  border-collapse: separate;
  border-spacing: 0 5px;
}

.flex-tag-input table label {
  display: inline !important;
  width: 100% !important;
  text-align: left;
}

.pure-control-group.flex-container {
  display: flex;
  align-items: center;
  line-height: 26px;
}

.pure-control-group.flex-container table td {
  line-height: initial;
}

.pure-control-group.flex-container select {
  width: 100%;
}

.width-20 {
  width: 25% !important;
  min-width: 300px;
}

.width-30 {
  width: 30% !important;
  min-width: 250px;
}

/* FIELDS */

.editorLabel {
  width: 30% !important;
}

.editorInput {
  width: 60% !important;
}

.flex-tooltip {
  display: inline;
  margin-left: 1%;
}

/* object trees form */

.sub-form {
  display: block;
  margin-right: 10px;
  padding: 0 0 5px 5px;
  border-radius: 8px;
  background-color: var(--v-accent);
  border: 1px solid var(--v-border);
}

/* grid forms */

.form-stacked-group {
  margin: 16px 0;

  input[type=text], input[type=password], select {
    display: inline-block;
    width: 180px;
  }
}

table.tag-rd td label {
  text-align: left !important;
}

/* * * * * */

/* HEADERS */

/* * * * * */

.levelTwo {
  background-color: var(--v-tabs-bg);
  background-image: none;
  border-width: 0;
  color: var(--v-foreground);
}

.header-page-title {
  font-size: 15px;
  margin-right: 7px;
  vertical-align: middle;
}

.gray_fieldset {
  border-color: var(--v-border);
  margin: 0 0 12px 0;
}

.title_legend {
  font-size: 14px;
  font-weight: bold;
}

.panel-no-padding .ui-panel-content {
  padding: 0 !important;
}

/* * * * */

/* ICONS */

/* * * * */

.fa-spinner-custom-color {
  color: var(--v-user-theme-color);
}

.table-icon {
  font-size: 14px;
  color: var(--v-foreground);
}

.tooltip-icon {
  vertical-align: middle;
  font-size: 14px;
  opacity: 0.7;
  color: var(--v-foreground);

  &:hover {
    opacity: 1;
  }
}

/** sub-icon position */

.icon-indicator-top {
  font-size: 8px;
  position: absolute;
  top: -6px;
  left: 8px;

  &.icon-gutter {
    top: -1px;
  }

  &.icon-tooltip {
    top: -1px;
    left: 12px;
  }
}

.icon-indicator-sub {
  font-size: 8px;
  position: absolute;
  top: 6px;
  left: 8px;

  &.icon-gutter {
    top: 8px;
  }

  &.icon-tooltip {
    top: 8px;
    left: 12px;
  }
}

/* Version icons */

.clean-version-icon {
  color: var(--v-status-default);
}

.dirty-version-icon {
  color: var(--v-warn);
}

/* add/remove fields for wizards */

.tool-add-field {
  position: relative;
  left: 5px;
  margin-right: 5px;
  cursor: pointer;
}

.tool-remove-field {
  position: relative;
  left: 5px;
  margin-right: 4px;
  cursor: pointer;
}

/** External link icon. */

.external-link-icon {
  height: 8px;
  padding-left: 3px;
}

/* Fields */

.field-descr-icon {
  font-size: 15px;
  vertical-align: middle;
}

/* Archive */

i.archive-arrow-action {
  position: absolute;
  top: -6px;
  left: 14px;
  font-size: 11px !important;
}

i.archive-arrow {
  position: absolute;
  top: -6px;
  left: 8px;
  font-size: 10px;
}

/* Filter with exclamation. */

.filter-index {
  position: relative;
  font-size: 0.5em;
  width: 2.5em;
  height: 2.3em;

  i:last-child {
    position: absolute;
    font-size: 1.4em;
    top: 0.4em;
    left: 0.6em;
  }
}

.v-link {
  color: var(--v-primary);

  &:hover {
    text-decoration: underline;
  }

  &:focus {
    border: 2px solid var(--v-ring);
  }

  &:active {
    text-decoration: underline;
    color: var(--v-foreground);
  }

  &:disabled {
    color: var(--v-disabled-foreground);
  }
}

/* * * * */

/* MENUS */

/* * * * */

/* (eg: Documents tab) */

.menu-vertical-folder-icons {
  flex: 0 0 150px;

  ul {
    list-style: none;
    margin-top: 3px;
    padding-left: 8px;

    span li {
      padding: 0 5px 5px 5px;

      a {
        width: 70px;
        display: inline-block;
        padding: 5px 10px;
        background-color: var(--v-secondary);
        color: var(--v-secondary-foreground);
        font-size: 12px !important;
      }

      a::before {
        margin-right: 6px;
        font-family: var(--v-font-fa);
        font-weight: 400;
      }
    }

    span.selected li {
      a {
        background-color: var(--v-primary);
        color: var(--v-primary-foreground);
      }

      a::before {
        content: '\f07c';
      }
    }

    span.unselected li {
      a::before {
        content: '\f07b';
      }
    }
  }
}

/* * * * * **/

/* MESSAGES */

/* * * * * **/

/* Severity */

.debug { color: var(--v-status-default); }

.info { color: var(--v-info-foreground); }

.warn { color: var(--v-warning-foreground); }

.error { color: var(--v-danger-foreground); }

.fatal { color: var(--v-danger-foreground); }

/* WARNING */

.message-warning {
  font-style: italic;
  color: var(--v-warn);
}

/* VALIDATION */

.message-validation {
  display: none;
  margin: 0;
  color: var(--v-success-foreground);
  font-size: 10px;
}

.message-validation::before {
  content: '\f00c';
  margin-right: 2px;
  font-family: var(--v-font-fa);
  font-weight: 900;
}

.message-validation-hidden {
  display: inline-block;
  opacity: 0;
  margin: 0;
  color: var(--v-success-foreground);
}

.message-validation-hidden::before {
  content: '\f00c';
  margin-right: 2px;
  font-family: var(--v-font-fa);
  font-weight: 900;
}

/* ERROR */

.message-error {
  display: inline-block;
  margin: 0 4px;
  color: var(--v-danger-foreground);

  &::before {
    content: '\f00d';
    margin-right: 2px;
    font-family: var(--v-font-fa);
    font-weight: 900;
  }
}

.errors-descr, .errors-stack {
  padding-left: 3px;
  padding-top: 10px;
  list-style-type: none;
}

.errors-stack {
  padding: 5px;
  background-color: var(--v-accent);
  border: 1px solid var(--v-border);
  font-family: var(--v-font-sc);
}

.errors-stack li {
  white-space: pre;
}

/* Titles with filtered / all counts of items */

.title-container {
  & > span:first-child {
    font-size: 18px;
    font-weight: bold;
  }

  & > span:nth-child(2) {
    margin-right: 8px;
    font-size: 16px;
    font-weight: bold;
    text-transform: lowercase;
  }
}

/* HELP TEXT */

.message-help {
  min-width: 400px;
  max-width: 33%;
  line-height: 1.2em;
}

.message-help-xl {
  min-width: 400px;
  max-width: 50%;
  line-height: 1.2em;
}

/* ZONES */

.message-zone {
  padding: 8px !important;

  legend {
    width: auto;
    margin-bottom: 0;
    padding: 0 8px;
    border: 0;
  }

  &.danger-zone {
    border: 1px solid var(--v-danger-border);

    legend {
      color: var(--v-danger-foreground);
    }
  }

  &.warning-zone {
    border: 1px solid var(--v-border);

    legend {
      color: var(--v-warn);
    }
  }
}

/* e.g. : Agent */

.message-code-example {
  max-width: 550px;
  padding: 8px 8px 8px 16px;
  background-color: var(--v-accent);
  border-radius: 4px;
  font-family: var(--v-font-sc);
}

/* Projects */

.project_status_link {
  text-decoration: underline;
}

/* Disabled link */

.disabled-link {
  color: var(--v-disabled-foreground);
}

.tooltip-disabled-link {
  font-style: italic;
  color: var(--v-warn);
}

/* Model checker */

.model_checker_ERR {
  color: var(--v-danger-foreground) !important;
}

.model_checker_WARN {
  color: var(--v-warn) !important;
}

.model_checker_INFO {
  color: var(--v-info-foreground) !important;
}

.user-dead {
  text-decoration: line-through;
}

/* For rule names with syntax __italic__ */

.italic-html-name {
  i {
    font-family: monospace;
  }
}

/* * * * * * * */

/* MILESTONES  */

/* * * * * * * */

.fixed-first-column {
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: separate;

  input {
    width: 100%;
  }
}

.fixed-first-column > tbody > tr > td, .fixed-first-column > tbody > tr > th {
  vertical-align: top;
  padding: 3px 5px;
  text-align: right;
  height: 27px;
  border-bottom: 1px solid var(--v-table-border);
}

.fixed-first-column > tbody > tr > td {
  min-width: 165px;
  height: 30px;
  line-height: 30px;
  border-left: 1px solid var(--v-table-border);
}

.fixed-first-column > tbody > tr > th {
  position: absolute;
  left: 0;
  width: 222px;
  height: 30px;
}

.fixed-first-column-outer {
  position:relative
}

.fixed-first-column-inner {
  overflow-x:auto;
  overflow-y:visible;
  margin-left:21em;
}

.fixed-first-column-header {
  font-weight: bold;
}

.fixed-first-column-header > th {
  height: 30px !important;
}

.fixed-first-column-header > td > input {
  width: 15em;
  vertical-align: text-bottom;
}

.editable-goal a:first-child {
  display: inline-block;
  width: 100%;
  min-height: 30px;
}

.editable-goal:hover a:first-child:empty::after {
  content: 'Click to add a value';
  color: var(--v-accent-foreground);
}

.editable-goal input {
  text-align: right;
}

.editable-goal .editable-goal-modified {
  color: var(--v-foreground);
}

.editable-goal a.editable-goal-modified-reset {
  margin-left: 8px;
}

.editable-goal span i {
  margin-left: 3px;
  cursor: pointer;
}

.milestone-goal-error {
  margin-left: 4px;
  text-align: left;
  line-height: initial;
  color: var(--v-danger-foreground);
}

#SCMPPanel_content_scroller {
  overflow: hidden;
}

.relaxFindingContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  max-width: 785px;
  color: var(--v-foreground);
}

.relaxFindingContainer > div {
  flex: 0 1 auto;
  margin-right: 2em;
}

.relaxFindingContainer .relaxSeparator {
  margin-top: 5px;
  border: 1px solid var(--v-border);
}

.relaxFindingContainer form, .multiRelaxFinding form {
  width: 550px;
}

.relaxFinding, .multiRelaxFinding {
  min-width: 400px;
  max-width: initial;
  margin: 10px 0 10px 4px;
  padding-left: 5px;
}

.relaxFinding select, .relaxFinding textarea, .multiRelaxFinding textarea {
  width: 100%;
}

.relaxFinding table {
  width: 100%;
  margin-bottom: 10px;
  background-color: transparent;
  text-align: left;

  th, td {
    padding: 5px;
    vertical-align: top;
    line-height: 1.5em;
  }

  th {
    width: 95px;
  }
}

.multiRelaxFinding select {
  width: 50%;
}

.relaxFinding-background {
  z-index: 0 !important;
  padding: 0 0 4px 0 !important;
  background-color: var(--v-finding-open) !important;

  /* no syntax colours with the warning background in order to improve readability */
  span[class^="cm-"] {
    color: var(--sq-grey-100) !important;
  }
}

.relaxFinding-side {
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: var(--v-finding-relaxed);

  label {
    color: var(--v-foreground);
  }
}

.relaxFinding-noside {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

.suspicious-field label {
  display: inline-block;
  margin: 15px 5px 15px 0;
}

.closeFinding {
  width: 200px;
  align-self: center;
}

.buttonCloseDecision {
  margin-top: 10px;
}

.buttonCloseDecision button:first-child {
  margin-right: 10px;
}

.cm-tt {
  position: fixed;
  padding: 5px;
  text-align: left;
  z-index: 13000;
  max-width: 800px;
  border: 1px solid var(--v-border);
  background-color: var(--v-popover);
  backdrop-filter: blur(16px);
  color: var(--v-foreground);
}

/** Hack IE 10/11 to avoid breaking path */

@media all and (-ms-high-contrast: none) , ( -ms-high-contrast : active) {
  .display-path {
    margin-right: 16px;
  }
}

.sc-view {
  width: 100%;
  overflow: auto;
}

.display-path {
  min-height: 16px;
  margin-bottom: 0;
  padding: 4px;
  background-color: var(--v-panel);
  border-bottom: 1px solid var(--v-border);
  word-break: break-all;
  word-wrap: break-word;
  text-align: left;
  font-family: var(--v-font-basis);
  font-style: italic;
  color: var(--v-accent-foreground);
}

.CodeMirror-linewidget:has(.display-path) {
  background-color: transparent !important;
}

.center-me {
  background: var(--sq-orange-light) !important;
  color: var(--sq-grey-200);

  span[class^="cm-"] {
    color: var(--sq-grey-200) !important;
  }

  /* Force the active line color if the line is contained in a diff container. */
  & > .CodeMirror-merge-r-chunk {
    background-color: inherit;
  }
}

.center-me .CodeMirror-squore-covered-line,
.center-me .CodeMirror-squore-uncovered-line,
.center-me .CodeMirror-activeline-background {
  background: var(--sq-orange-light) !important;

  span[class^="cm-"] {
    color: var(--sq-grey-100) !important;
  }
}

.credentials-radio {
  margin: 8px 0;
}

.credentials-radio label {
  display: inline !important;
  margin-right: 24px;
  padding-left: 0.3em;
  vertical-align: middle;
}

.bubble-line-warn {
  display: inline-block;
  color: var(--v-white-100);
  font-size: 12px;
  background-color: var(--v-warn);
  margin-bottom: 8px;
  border-radius: 5px;
  width: 100%;
}

.bubble-line-warn-content {
  padding: 7px;
  display: inline-block;
}

/* * * * * * * */

/* CODE MIRROR */

/* * * * * * * */

html[data-display-mode="dark"] {
  .CodeMirror-merge-r-connect {
    fill: var(--v-card);
    stroke: var(--v-card-border);
  }

  .CodeMirror-merge-copy {
    color: var(--v-primary);
  }
}

.CodeMirror-squore-covered-line, .CodeMirror-squore-cover {
  background-color: var(--v-sc-covered);
}

.CodeMirror-squore-uncovered-line, .CodeMirror-squore-uncover {
  background-color: var(--v-sc-uncovered);
}

.CodeMirror-squore-coverage {
  width: 3px;
}

.CodeMirror-squore-cover, .CodeMirror-squore-uncover {
  background-image: none;
  cursor: pointer;
  display: inline-block;
  height: 11px;
  width: 100%;
  vertical-align: middle;
  position: relative;
  bottom: 1px;
}

.CodeMirror-lint-marker-compare:before {
  content: "\f0c5";
  color: var(--v-foreground);
  font-weight: 400 !important;
}

.CodeMirror-lint-marker-warning:before {
  content: "\f071";
  color: var(--v-finding-open);
}

.CodeMirror-lint-marker-relaxed:before {
  content: "\f071";
  color: var(--v-finding-relaxed);
}

.CodeMirror-lint-marker-suspicious:before {
  content: "\f071";
  color: var(--v-finding-suspicious);
}

.CodeMirror-lint-marker-confirmed:before {
  content: "\f071";
  color: var(--v-finding-confirmed);
}

.CodeMirror-lint-marker-multiple {
  position: absolute !important;
  top: -2px !important;
  left: -4px !important;

  &::before {
    font-size: 9px !important;
  }
}

.CodeMirror-lint-marker-compare, .CodeMirror-lint-marker-warning,
.CodeMirror-lint-marker-relaxed, .CodeMirror-lint-marker-suspicious,
.CodeMirror-lint-marker-confirmed {
  background-image: none;
  cursor: pointer;
  display: inline-block;
  height: 16px;
  width: 16px;
  vertical-align: middle;
  position: relative;
  top: -2px;
  left: 3px;
  bottom: 1px;
}

.CodeMirror-lint-marker-compare:before, .CodeMirror-lint-marker-warning:before,
.CodeMirror-lint-marker-relaxed:before, .CodeMirror-lint-marker-suspicious:before,
.CodeMirror-lint-marker-confirmed:before {
  font-family: var(--v-font-fa);
  font-weight: 900;
  font-size: 11px;
  vertical-align: sub;
}

/* CODE MIRROR: relax findings widget */

.CodeMirror-linewidget {
  z-index: 12000;
  width: 100% !important;
  margin-top: -4px;
  background-color: var(--v-accent);
}

.CodeMirror-activeline-background {
  background-color: var(--v-table-selected-primary) !important;
}

.CodeMirror-dialog {
  z-index: 15000 !important;
}

.CodeMirror-cloning {
  width: 16px;
}

.CodeMirror-markers-count {
  width: 16px;
}

.CodeMirror-markers-count {
  width: 16px;
}

.CodeMirror-vscrollbar {
  scrollbar-width: thin;
}

.cm-field-error {
  margin-left: 1em;
  font-size: 1.1em;
  font-weight: bold;
  color: var(--v-danger-foreground);
}

.CodeMirror-merge-gap {
  background: var(--v-panel);
  border-left-color: var(--v-border);
  border-right-color: var(--v-border);
}

.CodeMirror-merge-scrolllock {
  color: var(--v-primary);
}

/** Token classes for logs custom mode for CodeMirror (parser : codemirror-mode-logs.js) */

/** logs with INFO level */

.cm-level-info {
  color: var(--v-status-default);
}

/** logs with WARNING level */

.cm-level-warn {
  color: var(--v-warn);
}

/** logs with ERROR level */

.cm-level-error {
  color: var(--v-danger-foreground);
}

/* * * * * * * * */

/* TOGGLE SWITCH */

/* * * * * * * * */

/* override PF component */

body .ui-toggleswitch {
    .ui-toggleswitch-handler {
        left: calc(.25rem);
    }

    /* disabled */
    &.ui-state-disabled {
        opacity: 1;

        /* disabled and unchecked */
        .ui-toggleswitch-slider {
            background: none;
            border: 1px solid var(--v-disabled);

            .ui-toggleswitch-handler {
                background: var(--v-disabled);
            }
        }

        /* disabled and checked */
        &.ui-toggleswitch-checked {
            .ui-toggleswitch-slider {
                background: var(--v-disabled);
            }
        }
    }

    /* unchecked */
    .ui-toggleswitch-slider {
        background: var(--v-input);
        border: 1px solid var(--v-border);

        .ui-toggleswitch-handler {
            background: var(--v-primary);
        }
    }

    /* checked */
    &.ui-toggleswitch-checked {
        .ui-toggleswitch-slider {
            background: var(--v-primary);
            border: none;

            .ui-toggleswitch-handler {
                background: var(--v-primary-foreground);
            }
        }
    }
}

/* switch with fa icon */

i.switch-icon-on {
    --fa-primary-color: var(--v-input);
    --fa-secondary-color: var(--v-primary);
}

i.switch-icon-off {
    --fa-primary-color: var(--v-primary);
    --fa-secondary-color: var(--v-grey-200);
}

/* * * * */

/* TABLE */

/* * * * */

/* Action buttons container */

.table-action-buttons-container {
  display: flex;
  align-items: center;
  column-gap: 4px;

  a, span.ui-commandlink.ui-state-disabled {
    margin-right: 4px;
  }

  i {
    font-size: 14px;
  }

  .buttons-separator {
    font-size: 16px;
    color: var(--v-border);
  }
}

/* Common properties */

.checkall {
  margin: 0;
}

.border-table, .border-table td {
  border: 1px solid var(--v-table-border);
}

.border-table td {
  padding: 1px 4px 1px 4px;
}

.column-toggle {
  width: 0 !important;
  min-width: 16px !important;
  border-right-width: 0;
}

.column-toggle i {
  font-size: 13px;
}

.fake-column {
  min-width: 8px !important;
  padding: 0 !important;
}

.table-cell-height-34 td {
  height: 34px;
}

/* Projects */

.projects-table {
  min-width: 1200px;

  .ui-progressbar .ui-progressbar-value {
    background-color: var(--v-user-theme-color);
  }

  .column-checkbox, .column-visibility {
    width: 16px;
    min-width: unset !important;
  }

  .column-name, .column-version {
    width: 230px !important;
  }

  .column-model, .column-owner {
    width: 150px !important;
  }

  .column-task-time {
    width: 175px !important;
  }

  .column-status {
    width: 200px !important;
  }

  .column-action {
    text-align: center;
  }

  .column-name .name-label-container, .column-version > span {
    width: inherit;
  }

  .column-name .name-label-container .name-label, .column-version span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .column-name {
    .project-icon {
      width: 16px;
      height: 16px;
    }

    .project-rating-warning-spot {
      position: absolute;
      top: 8px;
      left: 50%;

      i {
        color: var(--v-warn);
      }
    }

    .project-rating-failed-spot {
      position: absolute;
      top: 8px;
      left: 50%;
      font-size: 12px;

      i {
        color: var(--v-danger-foreground);
      }
    }

    .project-meta-spot {
      position: absolute;
      top: -4px;
      left: 10px;
      font-size: 9px;
    }

    .project-meta-spot-text {
      position: relative;
      top: -6px;
      left: 0;
      font-size: 9px;
    }
  }

  .column-version {
    & > span > span {
      width: auto;
    }

    & > span > span.overflow {
      display: inline-block;
      max-width: 230px;
    }
  }

  .column-action-baseline::before {
    content: '\f024';
    font-family: var(--v-font-fa);
    font-weight: 900;
    font-size: 14px;
  }

  .build-progress-bar {
    height: 4px;
    border-radius: 0;
  }

  .myprojects-contextual-actions {
    cursor: pointer;
  }

  .myprojects-contextual-actions i {
    font-size: 14px;
  }

  .projects-contextual-actions .ui-menuitem-icon {
    text-align: center;
  }

  .progress-ellipsis {
    display: inline-block;
    text-overflow: ellipsis;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
  }

  /* expansion */
  .table-projects-expansion > td {
    padding: 0 !important;
  }

  .table-projects-subtable {

    & > div > table > thead {
      display: none !important;
    }

    table {
      width: unset;

      tr {
        border-top: 0 !important;
        border-bottom: 0 !important;
      }

      tr:first-child .toggle-group-line, tr:last-child .toggle-group-line {
        height: 28px;
      }

      tr:first-child .toggle-group-line {
        margin-top: 8px;
      }

      tr:last-child .toggle-group-line {
        margin-bottom: 8px;
      }

      .toggle-group-line {
        display: block;
        height: 36px;
        width: 0;
        margin-left: 6px;
        border-left: 2px solid var(--v-border);
      }
    }
  }
}

/* Members */

.members-table-container {
  .ui-datatable, .ui-datatable-tablewrapper {
    max-width: 650px;
  }

  table {
    table-layout: auto;

    &.no-table-header thead {
      display: none;
    }

    tbody {
      .ui-rowgroup-header td {
        padding: 8px 0;
        font-size: 14px;

        .ui-rowgroup-toggler-icon {
          font-size: 16px !important;
        }

        span.column-remove i {
          font-size: 10px;
          color: var(--v-foreground);
        }
      }

      td {
        &.column-identity {
          min-width: 300px;

          i {
            font-size: 14px;
          }

          i.fa-circle-info {
            color: var(--v-warn);
          }

          i:not(.fa-circle-info) {
            color: var(--v-foreground);
          }

          span.second-identity {
            font-size: 0.95em;
            color: var(--v-accent-foreground);
          }
        }

        &.column-remove {
          width: 32px;
          text-align: center;
        }
      }
    }
  }
}

/* measures chart table */

.first-column-labels, .first-column-labels-width, .first-column-labels-top, .first-column-labels-top-padding {
  text-align: right;
}

.first-column-labels-width {
  min-width: 150px;
}

.first-column-labels-top {
  vertical-align: top;
  line-height: 20px;
}

.first-column-labels-top-padding, .column-padding {
  vertical-align: top;
  padding-bottom: 6px !important;
  padding-right: 6px !important;
}

.first-column-labels-top-padding {
  font-weight: bold;
}

/* "About" popup */

.about-general-table {
  th, td {
    vertical-align: top;
  }

  th {
    padding: 2px 8px 2px 16px;
    text-align: right;
    font-weight: bold;
    white-space: nowrap;
  }

  td {
    width: 100%;
    padding: 2px 4px;
  }

  .row-group {
    padding: 6px;
    text-align: left;
  }
}

.about-copyright {
  border-top: 1px solid var(--v-border);
}

/* Versions */

.versions-table tr.inherited-version {
  color: var(--v-accent-foreground) !important;
}

.trn-inherited-version {
  opacity: 0.6 !important;
}

/* * * * */

/* TASKS */

/* * * * */

#tasks-management {
  margin: 10px 0 0 10px;
}

#tasks-list {
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
}

#tasks-list li.task-item {
  min-height: 50px;
  margin-bottom: 5px;
}

#tasks-list li.task-item::before {
  position: absolute;
  top: 0;
  left: 160px;
  content: '';
  height: 100%;
  width: 2px;
  background-color: var(--v-border-sub);
  z-index: 1;
}

#tasks-list li.task-item .scale-container {
  margin-left: 4px;
  padding: 4px 6px;
  font-weight: normal;
}

#tasks-list li.task-item .scale-container.task-all-branches  {
  background-color: var(--v-accent);
  border: 1px solid var(--v-border);
  color: var(--v-accent-foreground);
}

#tasks-list li.task-item > div {
  position: relative;
  display: flex;
  flex-direction: row;
}

#tasks-list li.task-item > div > div:first-child {
  flex: 0 0 190px;
  width: 190px;
  color: var(--v-accent-foreground);
  line-height: 24px;
}

#tasks-list li.task-item > div > div.timeline-marker {
  position: absolute;
  top: 0;
  left: 151px;
  z-index: 2;
}

#tasks-list li.task-separator {
  position: relative;
  height: 40px;
  margin: 0 0 45px 40px;
  background:rgba(255,255,255,1);
  line-height: 40px;
  color: var(--v-border);
  z-index:3;
}

.task-icon-small {
  width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
  font-size: 11px !important;
}

.task-submitted,
.task-started,
.task-done,
.task-failed,
.task-cancelled,
.task-warning,
.task-unknown {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  line-height: 20px;
  font-size: 12px;
  background-color: var(--v-muted);
  text-align: center;
  color: var(--v-muted-foreground);
}

.task-done {
  background-color: var(--v-success-foreground);
}

.task-failed {
  background-color: var(--v-danger-foreground);
}

.task-cancelled {
  background-color: var(--v-cancelled);
}

.task-warning {
  background-color: var(--v-warn);
}

.task-status {
  flex: 1 1 auto;
  min-width: 300px;
}

.task-status-textual-warning {
  color: var(--v-warn);
}

.task-status-textual-error {
  color: var(--v-danger-foreground);
}

.task-status span.task-status-code {
  display: inline-block;
  font-size: 1.04em;
  font-weight: bold;
  cursor: pointer;
}

.task-status .task-infos {
  overflow: hidden;
  transition: height 0.2s ease-out;
  height: auto;
}

.task-infos table {
  margin: 10px 0;
  border-collapse: collapse;
}

.task-infos table th {
  padding-right: 10px;
  text-align: right;
  font-weight: bold;
}

.task-infos table td {
  text-align: left;
  font-weight: normal;
}

.task-infos table th,
.task-status .task-infos table td {
  padding: 3px;
  vertical-align: top;
}

.task-infos table tr.submitted-date-spacer th,
.task-infos table tr.submitted-date-spacer td,
.task-infos table tr#task-completion-status th,
.task-infos table tr#task-completion-status td{
  padding-top: 8px;
}

.task-infos table tr.elapsed-time-spacer th,
.task-status .task-infos table tr.elapsed-time-spacer td {
  padding-bottom: 8px;
}

.task-infos #task-completion-status a {
  color: var(--v-link) !important;
  text-decoration: underline;
}

.task-status .task-infos .task-logs a.sq-button {
  margin-right: 4px;
}

.task-status .task-logs-collapser {
  margin-left: 7px;
  cursor: pointer;
}

.task-status .task-infos .task-logs .task-logs-container {
  margin-top: 8px;
}

.task-status .task-infos .task-logs .task-logs-container .CodeMirror {
  height: auto;
}

.task-view-more {
  margin: 8px 0 16px 100px;
}

/* * * * */

/* TREES */

/* * * * */

.link, .link-on {
  cursor: pointer;
}

.link-off {
  opacity: 0.5;
  cursor: default;
}

.panelTree {
  height: 100%;
  width: 100%;
}

.panelTree .tree-icon-rating {
  width: 16px;
  height: 16px;
}

.panelTree .tree-icon-evolution {
  height: 14px;
  margin-left: 1px;
}

.panelTree .trn-art-data, .panelTree .trn-mes-data {
  margin-left: 3px;
}

.build-options-icon i {
  cursor: pointer;
}

.build-context-menu .ui-menuitem-icon {
  text-align: center;
}

.panel-tree-project {
  background: var(--v-carder);

  .ui-panel-content {
    border: 0 !important;
  }

  .version-marker {
    .ui-treenode-label {
      position: relative;
    }

    .version-marker-icon {
      position: absolute;
      top: 12px;
      left: 14px;

      &.warning-marker {
        color: var(--v-warn);
      }
    }
  }
}

.artefact-tree-header {
  line-height: 15px;
}

.explorer-tree-container {
  position: relative;
  box-sizing: border-box;
}

.explorer-tree-container .ui-panel .ui-panel-titlebar {
  padding: 4px;
  background: none;
  border: 0;
  line-height: 20px;
}

.explorer-tree-container .ui-panel .ui-panel-title {
  padding-left: 0;
  color: var(--v-foreground);
  font-size: 12px;
  font-weight: 600;
}

.explorer-tree-container .ui-panel .ui-panel-content {
  height: calc(100% - 30px);
  overflow: auto;
  background: none;
  padding: 0;
  border: 0;
}

.explorer-tree-artefact, .explorer-tree-indicator {
  margin-top: 6px;
  background: var(--v-carder);
  border: 1px solid var(--v-card-border);
  border-radius: var(--v-border-radius-md);
}

/** Specific to the chart editor. */

.chart-editor-form .tree-container {
  min-height: 50px;
}

/* TREE MENU */

.tree-menu {
  display: none;
  position: absolute;
  vertical-align: baseline;
  border: 1px solid var(--v-border);
  border-radius: 3px;
  box-shadow: 0 3px 0.429em 0 var(--v-shadow);
  text-align: left;
  background-color: var(--v-popover);
  backdrop-filter: blur(16px);
  z-index: 5000;
}

.tree-menu ul {
  left: auto;
  margin: 0;
  padding: 0;
  outline: 0;
  list-style: none;
  line-height: normal;
  text-align: left;

  li {
    &:hover {
      background-color: var(--v-ghost-hovered);
    }
  }
}

.tree-menu a {
  padding: 0 .857em;

  font-weight: 400;
  line-height: 30px;
  color: var(--v-foreground);
}

.tree-menu i {
  height: 1em;
  width: 1em;
  margin-right: 0.429em;
  vertical-align: middle;
  font-size: 1.25em;
  color: var(--v-foreground);
}

.tree-menu a .submenu_link {
  padding: 0;
  font-size: 11px;
}

.tree-menu hr {
  width: 100%;
  height: 0;
  margin: 1px 0 0 0;
  padding: 0;
  border-bottom: 1px solid var(--v-border);
  border-top: 0 none;
}

.tree-menu-ellipsis {
  width: 99%;
  max-width:0;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-menu-dirty-container {
  position: relative;
  display: inline;
}

.tree-menu-dirty-icon {
  position: absolute;
  top: -2px;
  left: -5px;
  width: 7px;
  height: 7px;
}

.tree-menu .menu-item-visible:not(.menu-item-active) {
  pointer-events: none;
}

.tree-menu .menu-item-visible i, .tree-menu .menu-item-visible span {
  color: var(--v-foreground);
}

.tree-menu .menu-item-visible.menu-item-active i, .tree-menu .menu-item-visible.menu-item-active span {
  color: var(--v-foreground);
}

.tree-menu a {
  display: block;
}

/** Style for font-awesome icon on the header panel tree. */

.tree-fa-icon {
  float: left;
  font-size: 14px;
}

body .tree-menu-icon {
  display: none;
}

.ui-treenode-label {
  &:hover .tree-menu-icon {
    display: block;
  }

  img.tree-icon-type[src*='.svg']:nth-of-type(3) {
    padding: 1px;
  }
}

html[data-display-mode="dark"] img.tree-icon-type[src*='.svg']:nth-of-type(3) {
  filter: invert(1);
}

.ui-state-highlight .tree-menu-icon {
  color: var(--v-foreground);
}

.tree-container {
  padding-right: 20px;
  margin-bottom: 10px;
}

.tree-form {
  padding-left: 20px;
}

.tree-form li {
  list-style-type: none;
  padding: 10px 0;
}

.tree-form .sub-form-command {
  padding-left: 20px;
}

.treenode-title a {
  font-size: 12px;
  font-weight: bold;
  color: var(--v-primary-foreground) !important;
}

.treenode-title .pre {
  margin-right: 5px;
}

.treenode-title .post {
  margin-left: 5px;
}

/* QUICK SEARCH: Set size of the search box */

.artefact-quick-search {
  float: right;
  position: relative;
  margin: 0;
  padding: 0;
  height: 18px;

  .ui-autocomplete {
    background: none;
  }
}

/* light mode, by default */

html[data-display-mode="light"], html:not([data-display-mode]) {
  /* vector tokens */
  --v-background: var(--v-white-100);
  --v-foreground: var(--v-grey-900);

  /* accent */
  --v-accent: var(--v-grey-100);
  --v-accent-foreground: var(--v-grey-600);

  /* card */
  --v-card: var(--v-white-75);
  --v-card-border: var(--v-black-10);
  --v-card-foreground: var(--v-grey-900);
  --v-carder: var(--v-white-90);

  /* panel */
  --v-panel: var(--v-white-100);

  /* popover */
  --v-popover: var(--v-white-75);
  --v-popover-foreground: var(--v-grey-900);
  --v-dialog-background: var(--v-white-100);
  --v-dialog-backdrop: var(--v-black-25);

  /* primary */
  --v-primary: var(--v-grey-900);
  --v-primary-hover: var(--v-grey-700);
  --v-primary-pressed: var(--v-grey-600);
  --v-primary-foreground: var(--v-white-100);

  /* secondary */
  --v-secondary: var(--v-black-10);
  --v-secondary-hover: var(--v-black-15);
  --v-secondary-pressed: var(--v-black-25);
  --v-secondary-foreground: var(--v-grey-900);

  /* disabled */
  --v-disabled: var(--v-grey-100);
  --v-disabled-foreground: var(--v-grey-500);

  /* muted */
  --v-muted: var(--v-grey-200);
  --v-muted-foreground: var(--v-grey-600);

  /* ghost */
  --v-ghost: var(--v-black-0);
  --v-ghost-hovered: var(--v-black-5);
  --v-ghost-pressed: var(--v-black-10);
  --v-ghost-selected: var(--v-black-15);
  --v-ghost-foreground: var(--v-grey-900);

  /* focused */
  --v-ring: var(--v-sky-400);
  --v-interactive-border: var(--v-sky-400);
  --v-interactive-overlay: var(--v-sky-410);

  /* input */
  --v-input: #F2F2F2;
  --v-input-hovered: var(--v-black-10);

  /* decoration */
  --v-border: var(--v-black-25);
  --v-shadow: var(--v-black-10);

  /* status */
  --v-cancelled: var(--sq-grey-500);
  --v-status-default: var(--sq-grey-500);

  /* info */
  --v-info: #f5fcff;
  --v-info-border: #2d6d9c80;
  --v-info-foreground: var(--tw-blue-600);
  --v-info-hovered: #ebf8ff;
  --v-info-pressed: #e3f5ff;

  /* success */
  --v-success: #f0faf4;
  --v-success-border: #23874980;
  --v-success-foreground: #1c7e41;
  --v-success-hovered: #f0faf4;
  --v-success-pressed: #e4f6eb;

  /* warning */
  --v-warning: #fef7f1;
  --v-warning-border: #b7491780;
  --v-warning-foreground: var(--tw-orange-700);
  --v-warning-hovered: #fef2e7;
  --v-warning-pressed: #fdecdd;

  /* danger */
  --v-danger: #fff5f5;
  --v-danger-border: #e7000b80;
  --v-danger-foreground: #d2000a;
  --v-danger-hovered: #fff0f0;
  --v-danger-pressed: #ffe0e1;

  /* table */
  --v-table-header: var(--v-black-5);
  --v-table-border: var(--v-black-15);
  --v-table-hovered: var(--v-black-10);
  --v-table-selected-primary: var(--v-sky-420);

  /* tabs */
  --v-tabs-bg: var(--sq-grey-B00);
  --v-tabs-color: var(--sq-grey-100);
  --v-tabs-hovered: var(--sq-grey-A00);
  --v-tabs-active-bg: var(--sq-grey-300);
  --v-tabs-active-color: var(--v-white-100);

  /* findings */
  --v-finding-open: var(--sq-orange-medium);
  --v-finding-confirmed: var(--sq-red-dark);
  --v-finding-relaxed: var(--sq-grey-600);
  --v-finding-new: var(--sq-red-light);
  --v-finding-modified: var(--v-black-100);
  --v-finding-fixed: var(--sq-green-lighter);
  --v-finding-suspicious: var(--sq-purple);

  /* source code */
  --v-sc-covered: var(--v-mint-200);
  --v-sc-uncovered: var(--sq-red-soft);

  /* custom */
  --v-link: var(--sq-grey-200);
  --v-border-sub: var(--v-grey-600);
  --v-warn: var(--sq-orange-vibrant);
  --v-active-bg: var(--v-blue-400);
  --v-active-color: var(--v-white-100);
  --v-filters-background: var(--sq-grey-B00);
  --v-grid-surface: var(--v-grey-50);
  --v-banner: var(--v-yellow-400);
  --v-banner-foreground: var(--v-black-75);
}

/* dark mode */

html[data-display-mode="dark"] {
  /* vector tokens */
  --v-background: var(--v-black-100);
  --v-foreground: var(--v-white-100);

  /* accent */
  --v-accent: var(--v-grey-900);
  --v-accent-foreground: var(--v-grey-300);

  /* card */
  --v-card: var(--v-white-10);
  --v-card-border: var(--v-white-15);
  --v-card-foreground: var(--v-white-100);
  --v-carder: var(--v-white-5);

  /* panel */
  --v-panel: rgb(26 26 26 / 100%);

  /* popover */
  --v-popover: var(--v-black-75);
  --v-popover-foreground: var(--v-grey-50);
  --v-dialog-background: var(--v-grey-900);
  --v-dialog-backdrop: var(--v-white-40);

  /* primary */
  --v-primary: var(--v-grey-50);
  --v-primary-hover: var(--v-grey-200);
  --v-primary-pressed: var(--v-grey-300);
  --v-primary-foreground: var(--v-grey-900);

  /* secondary */
  --v-secondary: var(--v-white-10);
  --v-secondary-hover: var(--v-white-15);
  --v-secondary-pressed: var(--v-white-25);
  --v-secondary-foreground: var(--v-white-100);

  /* disabled */
  --v-disabled: var(--v-grey-800);
  --v-disabled-foreground: var(--v-grey-500);

  /* muted */
  --v-muted: var(--v-grey-800);
  --v-muted-foreground: var(--v-grey-500);

  /* ghost */
  --v-ghost: var(--v-white-0);
  --v-ghost-hovered: var(--v-white-5);
  --v-ghost-pressed: var(--v-white-10);
  --v-ghost-selected: var(--v-white-15);
  --v-ghost-foreground: var(--v-white-100);

  /* focused */
  --v-ring: var(--v-sky-400);
  --v-interactive-border: var(--v-sky-400);
  --v-interactive-overlay: var(--v-sky-420);

  /* input */
  --v-input: #2F2F2F;
  --v-input-hovered: var(--v-white-10);

  /* decoration */
  --v-border: var(--v-white-25);
  --v-shadow: var(--v-black-10);

  /* status */
  --v-cancelled: var(--sq-grey-500);
  --v-status-default: var(--sq-grey-800);

  /* info */
  --v-info: #0c1418;
  --v-info-border: #4390c180;
  --v-info-foreground: var(--tw-blue-500);
  --v-info-hovered: #10191e;
  --v-info-pressed: #16242c;

  /* success */
  --v-success: #132519;
  --v-success-border: #41c07280;
  --v-success-foreground: var(--tw-green-500);
  --v-success-hovered: #1a3223;
  --v-success-pressed: #21402c;

  /* warning */
  --v-warning: #211003;
  --v-warning-border: #ef8d4380;
  --v-warning-foreground: #ef8d43;
  --v-warning-hovered: #2f1704;
  --v-warning-pressed: #3d1d05;

  /* danger */
  --v-danger: #291415;
  --v-danger-border: #ff646780;
  --v-danger-foreground: var(--tw-red-400);
  --v-danger-hovered: #33191a;
  --v-danger-pressed: #3a1d1e;

  /* table */
  --v-table-header: var(--v-white-5);
  --v-table-border: var(--v-white-15);
  --v-table-hovered: var(--v-white-10);
  --v-table-selected-primary: var(--v-sky-420);

  /* tabs */
  --v-tabs-bg: var(--sq-dark-400);
  --v-tabs-color: var(--sq-grey-700);
  --v-tabs-hovered: var(--sq-grey-300);
  --v-tabs-active-bg: var(--sq-grey-300);
  --v-tabs-active-color: var(--v-white-100);

  /* findings */
  --v-finding-open: var(--sq-orange-medium);
  --v-finding-confirmed: var(--sq-red-dark);
  --v-finding-relaxed: var(--sq-grey-600);
  --v-finding-new: var(--sq-red-light);
  --v-finding-modified: var(--sq-grey-800);
  --v-finding-fixed: var(--sq-green-light);
  --v-finding-suspicious: var(--sq-purple);

  /* custom */
  --v-link: var(--sq-grey-A00);
  --v-border-sub: var(--v-grey-500);
  --v-warn: var(--sq-orange-light);
  --v-active-bg: var(--sq-blue-navy);
  --v-active-color: var(--v-white-100);
  --v-filters-background: var(--sq-dark-500);
  --v-grid-surface: var(--v-black-100);
  --v-banner: var(--v-yellow-600);
  --v-banner-foreground: var(--v-black-100);

  /* source code */
  --v-sc-covered: var(--v-mint-700);
  --v-sc-uncovered: var(--v-red-600);
}

/* Dark mode adaptation */

html[data-display-mode="dark"] {
  /* Fade images */
  .theme-adaptative-invert {
    filter: invert(1);
  }

  /* Background added for images */
  .theme-adaptative-bg {
    background-color: var(--sq-grey-800);
    border-radius: 2px;
  }
}

/* branding color, clasico by default */

:root {
    --v-user-theme-color: var(--v-red-300);
}