/* General settings */

:root {
	--comment-font-color: #546F9E;
	--button-color: #555;
	--primary-color: #8d1498;
	--primary-color-focused: #620a6b;
	--danger-color: #8C0000;
	--danger-color-focused: #610000;
	--secondary-color: rgb(69, 115, 184);
	--background-overall-concern-color: #eaeaea;
	--copex-highlighted-color: #ffffa2;
}

[x-cloak] { display: none !important; }

/* SHARED PROPERTIES */
.protocol { font-size: 12px; }
.protocol input, .protocol textarea { background-color: white; }
.protocol input[type="number"] { appearance: auto; }
.protocol .focus-child { outline:1px solid lightgrey; }
.protocol textarea:focus, .protocol input[type='number']:focus, .protocol input[type='text']:focus, .focus-child:focus-within { box-shadow: 0 0 3px var(--secondary-color); border:none; outline: 1px solid var(--secondary-color); }
.protocol [contenteditable=true]:empty:not(:focus):before{ content:attr(data-placeholder); color:grey; font-style:italic; }
.protocol .sortable-ghost { opacity: 1; }
.protocol .sortable-chosen { opacity: 1; }
.protocol .sortable-drag { opacity: 1; }
.protocol .pointer-hover:hover{ cursor: pointer; }
.protocol .move-hover:hover{ cursor: move; }
.protocol .col-resize-hover:hover{ cursor: col-resize; }
.protocol .row-resize-hover:hover{ cursor: row-resize; }
.protocol .appearance-textfield-important { appearance: textfield !important; }
/* Chrome */
.protocol .appearance-textfield-important::-webkit-outer-spin-button,
.protocol .appearance-textfield-important::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.protocol .visibility-hidden {visibility: hidden;}
.protocol .visibility-visible {visibility: visible;}
.protocol .child-visible-on-hover:hover * {visibility: visible;}
.protocol .child-visible-on-hover:active * {visibility: visible;}

.protocol .node-handle-visible-on-hover:hover .node-handle {visibility: visible;}

.protocol .trigger-child-on-hover:hover .triggered-col-primary { color: var(--primary-color); }
.protocol .trigger-child-on-hover:hover .triggered-display-inline { display: inline; }

.protocol .display-none{ display: none; }
.protocol .display-inline { display: inline; }
.protocol .display-inline-hover:hover{ display: inline; }
.protocol .display-inline-block { display: inline-block; }
.protocol .display-inline-flex { display: inline-flex; }
.protocol .display-block { display: block; }

.protocol .col-inherit { color: inherit; }
.protocol .col-transparent { color: transparent; }
.protocol .col-white { color: white; }
.protocol .col-grey { color: grey; }
.protocol .col-silver { color: silver; }
.protocol .col-green { color: green; }
.protocol .col-red { color: red; }
.protocol .col-secondary { color: var(--secondary-color); }
.protocol .col-primary { color: var(--primary-color); }
.protocol .col-highlighted { color: var(--copex-highlighted-color); }
.protocol .col-comment { color: var(--comment-font-color); }
.protocol .col-danger { color: var(--danger-color); }
.protocol .col-button { color: var(--button-color); }
.protocol .col-primary-hover:hover { color: var(--primary-color); }

.protocol .opacity-40 { opacity: 40%; }
.protocol .opacity-50 { opacity: 50%; }

.protocol .bg-transparent { background-color: transparent; }
.protocol .bg-grey { background-color: grey; }
.protocol .bg-lightgrey { background-color: lightgrey; }
.protocol .bg-lightgrey-focus:focus { background-color: lightgrey; }
.protocol .bg-lightgrey-hover:hover { background-color: lightgrey; }
.protocol .bg-whitesmoke { background-color: whitesmoke; }
.protocol .bg-white { background-color: white; }
.protocol .bg-999 { background-color: #999; }
.protocol .bg-white-hover:hover { background-color: white; }
.protocol .bg-white-focus:focus { background-color: white; }
.protocol .bg-black { background-color: black; }
.protocol .bg-black-60 { background-color: rgba(0,0,0,0.6); }
.protocol .bg-green { background-color: var(--lnb-green-color); }
.protocol .bg-danger { background-color: var(--danger-color); }
.protocol .bg-danger-focused-hover:hover { background-color: var(--danger-color-focused); }
.protocol .bg-primary { background-color: var(--primary-color); }
.protocol .bg-secondary { background-color: var(--secondary-color); }
.protocol .bg-primary-focused-hover:hover { background-color: var(--primary-color-focused); }
.protocol .bg-overall-concern { background-color: var(--background-overall-concern-color); }
.protocol .highlighted * {
	background-color: var(--copex-highlighted-color);
}
.protocol .highlighted-bold * {
	font-weight: bold;
	background-color: var(--copex-highlighted-color);
}

.protocol .bg-pos-x-left { background-position-x: left; }
.protocol .bg-pos-x-center { background-position-x: center; }
.protocol .bg-pos-x-right { background-position-x: right; }
.protocol .bg-size-contain { background-size: contain; }
.protocol .bg-no-repeat { background-repeat: no-repeat; }

.protocol .as-1 { aspect-ratio: 1; }

.protocol .m-auto { margin: auto; }
.protocol .ml-auto { margin-left: auto; }
.protocol .mr-auto { margin-right: auto; }
.protocol .mt-auto { margin-top: auto; }
.protocol .m-0 { margin: 0; }
.protocol .mb-0 { margin-bottom: 0; }
.protocol .m-2 { margin: 2px; }
.protocol .m-5 { margin: 5px; }
.protocol .mh-5 { margin-left: 5px; margin-right: 5px }
.protocol .mh-10 { margin-left: 10px; margin-right: 10px }
.protocol .mv-3 { margin-top: 3px; margin-bottom: 3px }
.protocol .mv-5 { margin-top: 5px; margin-bottom: 5px }
.protocol .mv-10 { margin-top: 10px; margin-bottom: 10px }
.protocol .mv-12 { margin-top: 12px; margin-bottom: 12px }
.protocol .mv-15 { margin-top: 15px; margin-bottom: 15px }
.protocol .mv-20 { margin-top: 20px; margin-bottom: 20px }
.protocol .ml--40 { margin-left: -40px; }
.protocol .ml--1 { margin-left: -1px; }
.protocol .ml-5 { margin-left: 5px; }
.protocol .ml-10 { margin-left: 10px; }
.protocol .ml-15 { margin-left: 15px; }
.protocol .ml-20 { margin-left: 20px; }
.protocol .ml-22 { margin-left: 22px; }
.protocol .ml-26 { margin-left: 26px; }
.protocol .ml-40 { margin-left: 40px; }
.protocol .ml-60 { margin-left: 60px; }
.protocol .mt--15 { margin-top: -15px; }
.protocol .mt--13 { margin-top: -13px; }
.protocol .mt--10 { margin-top: -10px; }
.protocol .mt-2 { margin-top: 2px; }
.protocol .mt-3 { margin-top: 3px; }
.protocol .mt-4 { margin-top: 4px; }
.protocol .mt-5 { margin-top: 5px; }
.protocol .mt-8 { margin-top: 8px; }
.protocol .mt-10 { margin-top: 10px; }
.protocol .mt-15 { margin-top: 15px; }
.protocol .mr-2 { margin-right: 2px; }
.protocol .mr-5 { margin-right: 5px; }
.protocol .mr-10 { margin-right: 10px; }
.protocol .mb--15 { margin-bottom: -15px; }
.protocol .mb--12 { margin-bottom: -12px; }
.protocol .mb--10 { margin-bottom: -10px; }
.protocol .mb--6 { margin-bottom: -6px; }
.protocol .mb-2 { margin-bottom: 2px; }
.protocol .mb-5 { margin-bottom: 5px; }
.protocol .mb-10 { margin-bottom: 10px; }
.protocol .mb-15 { margin-bottom: 15px; }

.protocol .p-0 { padding: 0; }
.protocol .p-2 { padding: 2px; }
.protocol .p-3 { padding: 3px; }
.protocol .p-4 { padding: 4px; }
.protocol .p-5 { padding: 5px; }
.protocol .p-10 { padding: 10px; }
.protocol .ph-2 { padding-left: 2px; padding-right: 2px; }
.protocol .ph-3 { padding-left: 3px; padding-right: 3px; }
.protocol .ph-5 { padding-left: 5px; padding-right: 5px; }
.protocol .ph-8 { padding-left: 8px; padding-right: 8px; }
.protocol .ph-10 { padding-left: 10px; padding-right: 10px; }
.protocol .pv-1 { padding-top: 1px; padding-bottom: 1px; }
.protocol .pv-2 { padding-top: 2px; padding-bottom: 2px; }
.protocol .pv-3 { padding-top: 3px; padding-bottom: 3px; }
.protocol .pv-5 { padding-top: 5px; padding-bottom: 5px; }
.protocol .pv-10 { padding-top: 10px; padding-bottom: 10px; }
.protocol .pv-15 { padding-top: 15px; padding-bottom: 15px; }
.protocol .pl-0 { padding-left: 0; }
.protocol .pl-1 { padding-left: 1px; }
.protocol .pl-2 { padding-left: 2px; }
.protocol .pl-3 { padding-left: 3px; }
.protocol .pl-10 { padding-left: 10px; }
.protocol .pl-20 { padding-left: 20px; }
.protocol .pt-1 { padding-top: 1px; }
.protocol .pt-2 { padding-top: 2px; }
.protocol .pt-3 { padding-top: 3px; }
.protocol .pt-5 { padding-top: 5px; }
.protocol .pt-7 { padding-top: 7px; }
.protocol .pt-10 { padding-top: 10px; }
.protocol .pt-15 { padding-top: 15px; }
.protocol .pr-5 { padding-right: 5px; }
.protocol .pr-10 { padding-right: 10px; }
.protocol .pb-3 { padding-bottom: 3px; }
.protocol .pb-5 { padding-bottom: 5px; }
.protocol .pb-6 { padding-bottom: 6px; }
.protocol .pb-7 { padding-bottom: 7px; }
.protocol .pb-10 { padding-bottom: 10px; }
.protocol .pb-12 { padding-bottom: 12px; }

.protocol .l-15p { left: 15%; }
.protocol .l-25p { left: 25%; }
.protocol .l--25p { left: -25%; }
.protocol .l-0 { left:0;}
.protocol .t-0 { top:0; }
.protocol .t-21 { top:21px; }
.protocol .t-25p { top: 25%; }
.protocol .t-100p { top: 100%; }
.protocol .t--25p { top: -25%; }
.protocol .r-0 { right: 0; }
.protocol .r-28 { right: 28px; }
.protocol .b-0 { bottom: 0; }
.protocol .b-18 { bottom: 18px; }

.protocol .border-none { border:none; }
.protocol .border-bottom-none { border-bottom:none; }
.protocol .border-grey { border:1px solid grey; }
.protocol .border-lightgrey { border:1px solid lightgrey; }
.protocol .border-lightgrey-hover:hover { border:1px solid lightgrey; }
.protocol .border-primary { border:1px solid var(--primary-color); }
.protocol .border-comment { border:1px solid var(--comment-font-color); }
.protocol .border-l-none { border-left:none; }
.protocol .border-l-lightgrey { border-left:1px solid lightgrey; }
.protocol .border-l-grey { border-left:1px solid grey; }
.protocol .border-t-dot-grey { border-top: 1px dotted grey; }
.protocol .border-t-grey { border-top: 1px solid grey; }
.protocol .border-b-lightgrey { border-bottom:1px solid lightgrey; }
.protocol .border-b-grey { border-bottom:1px solid grey; }
.protocol .border-black { border: 1px solid black; }
.protocol .border-collapse { border-collapse: collapse; }
.protocol .border-radius-2 { border-radius: 2px; }
.protocol .border-radius-10 { border-radius: 10px; }
.protocol .border-radius-25p { border-radius: 25%; }
.protocol .border-radius-50p { border-radius: 50%; }

.protocol .outline-none { outline: none; }
.protocol .outline-none-focus:focus { outline: none; }
.protocol .outline-white { outline: 1px solid white; }
.protocol .outline-grey { outline: 1px solid grey; }
.protocol .outline-blue { outline: 1px solid blue; }
.protocol .outline-lightgrey { outline: 1px solid lightgrey; }
.protocol .outline-lightgrey-hover:hover { outline: 1px solid lightgrey; }
.protocol .outline-primary { outline: 1px solid var(--primary-color); }
.protocol .outline-danger { outline: 1px solid var(--danger-color); }

.protocol .box-shadow-0-0-4-lightgrey { box-shadow: 0 0 4px lightgrey; }

.protocol .position-absolute { position: absolute; }
.protocol .position-relative { position: relative; }
.protocol .float-right { float:right; }
.protocol .float-left { float:left; }

.protocol .text-align-center { text-align: center; }
.protocol .text-align-right { text-align: right; }

.protocol .h-0 { height: 0; }
.protocol .h-5 { height: 5px; }
.protocol .h-10 { height: 10px; }
.protocol .h-20 { height: 20px; }
.protocol .h-200 { height: 200px; }
.protocol .h-450 { height: 450px; }
.protocol .h-800 { height: 800px; }
.protocol .h-100p { height: 100%; }
.protocol .max-h-80 { max-height: 80px; }
.protocol .max-h-120 { max-height: 120px; }
.protocol .w-fit { width: fit-content; }
.protocol .h-fit { height: fit-content; }
.protocol .w-0 { width: 0; }
.protocol .w-1 { width: 1px; }
.protocol .w-5p { width: 5%; }
.protocol .w-10p { width: 10%; }
.protocol .w-24p { width: 24%; }
.protocol .w-30p { width: 30%; }
.protocol .w-35p { width: 35%; }
.protocol .w-45p { width: 45%; }
.protocol .w-50p { width: 50%; }
.protocol .w-60p { width: 60%; }
.protocol .w-75p { width: 75%; }
.protocol .w-95p { width: 95%; }
.protocol .w-99p { width: 99%; }
.protocol .w-100p { width: 100%; }
.protocol .w-100p-3 { width: calc(100% - 3px); }
.protocol .w-100p-4 { width: calc(100% - 4px); }
.protocol .w-100p-20 { width: calc(100% - 20px); }
.protocol .w-100p-22 { width: calc(100% - 22px); }
.protocol .w-190 { width: 190px; }
.protocol .w-250 { width: 250px; }
.protocol .w-5 { width: 5px; }
.protocol .w-15 { width: 15px; }
.protocol .w-25 { width: 25px; }
.protocol .w-30 { width: 30px; }
.protocol .w-40 { width: 40px; }
.protocol .w-50 { width: 50px; }
.protocol .w-60 { width: 60px; }
.protocol .w-70 { width: 70px; }
.protocol .w-100 { width: 100px; }
.protocol .w-130 { width: 130px; }
.protocol .w-175 { width: 175px; }
.protocol .w-300 { width: 300px; }
.protocol .w-95vw { width: 95vw; }
.protocol .w-13rem { width: 13rem; }
.protocol .min-w-0 { min-width: 0; }
.protocol .min-w-15 { min-width: 15px; }
.protocol .min-w-18 { min-width: 18px; }
.protocol .min-w-25 { min-width: 25px; }
.protocol .min-w-30 { min-width: 30px; }
.protocol .min-w-40 { min-width: 40px; }
.protocol .min-w-50 { min-width: 50px; }
.protocol .min-w-60 { min-width: 60px; }
.protocol .min-w-80 { min-width: 80px; }
.protocol .min-w-100 { min-width: 100px; }
.protocol .min-w-110 { min-width: 110px; }
.protocol .min-w-150 { min-width: 150px; }
.protocol .max-w-130 { max-width: 130px; }
.protocol .max-w-140 { max-width: 140px; }
.protocol .max-w-50p { max-width: 50%; }
.protocol .min-w-300 { min-width: 300px; }
.protocol .min-h-1em { min-height: 1em; }
.protocol .min-h-18 { min-height: 18px; }
.protocol .min-h-100 { min-height: 100px; }
.protocol .max-h-250 { max-height: 250px; }
.protocol .max-h-300 { max-height: 300px; }

.protocol .line-height-1-5rem { line-height: 1.5rem; }
.protocol .line-height-1-5em { line-height: 1.5em; }
.protocol .line-height-1-8em { line-height: 1.8em; }
.protocol .line-height-2em { line-height: 2em; }
.protocol .line-height-16 { line-height: 16px; }

.protocol .gap-3 { gap:3px;}
.protocol .gap-5 { gap:5px;}
.protocol .gap-6 { gap:6px;}
.protocol .gap-10 { gap:10px;}
.protocol .gap-15 { gap:15px;}

.protocol .fm-text { font-family: var(--lnb-font-text); }

.protocol .fs-4 {font-size: 4px;}
.protocol .fs-6 {font-size: 6px;}
.protocol .fs-9 {font-size: 9px;}
.protocol .fs-12 {font-size: 12px;}
.protocol .fs-13 {font-size: 13px;}
.protocol .fs-14 {font-size: 14px;}
.protocol .fs-16 {font-size: 16px;}
.protocol .fs-20 {font-size: 20px;}
.protocol .fs-50p {font-size: 50%;}
.protocol .fs-150p {font-size: 150%;}

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

.protocol .unset-box-sizing { box-sizing: unset; }
.protocol .box-sizing-content-box { box-sizing: content-box; }

.protocol .display-grid { display: grid; }
.protocol .grid-area-1-1-2-2 { grid-area: 1 / 1 / 2 / 2; }

.protocol .fw-bold { font-weight: bold; }
.protocol .fw-normal { font-weight: normal; }
.protocol .fw-bold-hover:hover { font-weight: bold; }

.protocol .overflow-hidden { overflow: hidden; }
.protocol .overflow-auto { overflow: auto; }
.protocol .overflow-y-auto { overflow-y: auto; }
.protocol .overflow-scroll { overflow: scroll; }
.protocol .overflow-y-scroll { overflow-y: scroll; }

.protocol .list-style-type-none { list-style-type: none; }

.protocol .pre-wrap { white-space: pre-wrap; }
.protocol .no-wrap { white-space: nowrap; }

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

.protocol .resize-none { resize: none; }
.protocol .resize-both { resize: both; }
.protocol .resize-vertical { resize: vertical; }

.protocol .column-count-4 { column-count: 4; }
.protocol .break-inside-avoid-column { break-inside: avoid-column; }

.protocol .z-index-1000 { z-index: 1000; }

.protocol .font-inherit { font-family: inherit; font-size: inherit; color: inherit; }
.protocol .font-inherit-except-color { font-family: inherit; font-size: inherit; }

.protocol .flex-column-baseline { display: flex; flex-direction: column; align-items: baseline; }
.protocol .flex-column-center { display: flex; flex-direction: column; align-items: center; }
.protocol .flex-row {display: flex; flex-direction: row;}
.protocol .flex-row-start { display: flex; flex-direction: row; align-items: flex-start; }
.protocol .flex-row-baseline { display: flex; flex-direction: row; align-items: baseline; }
.protocol .flex-row-center { display: flex; flex-direction: row; align-items: center; }
.protocol .flex-row-stretch { display: flex; flex-direction: row; align-items: stretch; }

.protocol .flex-wrap {flex-wrap: wrap;}
.protocol .flex-shrink-0 {flex-shrink:0;}
.protocol .flex-grow-1 {flex-grow:1;}
.protocol .justify-center {justify-content: center;}
.protocol .justify-end {justify-content: end;}
.protocol .justify-space-between { justify-content: space-between; }
.protocol .justify-space-around { justify-content: space-around; }
.protocol .align-self-start { align-self: flex-start; }
.protocol .align-self-center { align-self: center; }
.protocol .align-self-end { align-self: flex-end; }

.protocol .button-edit-hover:hover { outline: 1px solid grey; background-color: lightgrey; border-radius: 2px; }
.protocol .add-buttons { border-radius: 2px; border: 1px solid silver; font-style: italic; width: fit-content; }
.protocol .add-buttons:hover { background-color: lightgray; }
.protocol .input-error { outline: 1px solid var(--danger-color); border-radius: 1px; }

/* Material specific */
/* Checkboxes for select material */
.protocol div.material-wrapper label {
	max-width: calc(100% - 20px);
}
.protocol div.material-wrapper div.hidden-checkbox-wrapper {
	display: inline-block;
	vertical-align: middle;
	border: 2px solid grey;
	border-radius: 2px;
	height: 10px;
	width: 10px;
}
.protocol div.material-wrapper div.hidden-checkbox:before {
	content: '';
	appearance: none;
	-webkit-appearance: none;
	margin: 0 0 3px 0;
	padding: 0;
	height: 10px;
	width: 10px;
	display: inline-block;
	position: relative;
	background-color: transparent;
}
.protocol div.material-wrapper input[type='checkbox']:checked + div.hidden-checkbox-wrapper {
	background-color: var(--button-color);
	border: 2px solid var(--button-color);
}
.protocol div.material-wrapper input[type='checkbox']:checked + div.hidden-checkbox-wrapper div.hidden-checkbox:before {
	transform-origin: bottom left;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	background-color: white;
}
/* Protocol */
/* Protocol node list */
.protocol ul.protocol-list-root.edit-mode li.editable-node:not(.child-hover):not(.edit-node) > div:hover{
	outline: 1px solid lightgrey;
	cursor:pointer;
}
.protocol ul.protocol-list-root.edit-mode li:not(.child-hover):not(.edit-node):not(.editable-node) > div:hover{
	outline: none;
	cursor: default;
}
.protocol .node-ghost {
	margin: 0 0 0 15px;
	border-top: 1px solid var(--primary-color);
	height: 10px;
	padding: 0;
	width: 50%;
}
.protocol .node-ghost * {
	visibility: hidden;
}