@font-face { font-display: swap; font-family: "TTL"; src: url("./fonts/Cal_Sans/CalSans-Regular.ttf"); }
@font-face { font-display: swap; font-family: "PRIMARY"; src: url("./fonts/Gudea/Gudea-Regular.ttf"); }
@font-face { font-display: swap; font-family: "PRE"; src: url("./fonts/DM_Mono/DM_Mono.ttf"); }

:root {
    --fontFamily: "PRIMARY", Helvetica, "Helvetica Neue", "Lucida Grande", "Lucida Sans Unicode", Arial;
    --fontFamilyPre: "PRE", Menlo, Consolas, "Courier New", monospace, Verdana;
    --fontFamilyTitle: TTL, TXT, Helvetica, "Helvetica Neue", "Lucida Grande", "Lucida Sans Unicode", Calibri, Arial;
    --fontSize: .95rem;
    --lineHeight: 1.426;
    --margin: 1rem;
    --margin2: calc(var(--margin) * 2);
    --marginHalf: calc(var(--margin) / 2);
}

:root {
	--colorBoxBorder:        #CECECE;
	--colorBoxBgLight:       #FFFFFF;
	--colorBoxBgDark:        #F4F5F7;
	--colorBoxLayer:         rgba(214,215,217,0.33);
	--colorBoxShadowNormal:  rgba(050,050,050,0.10);
	--colorBoxShadowDark:    rgba(050,050,050,0.10);
	--colorBrandLight:       #719ECA;
	--colorBrandNormal:      #396A9A;
	--colorErrorFont:        #CC0000;
	--colorErrorBg:          #FFDDDD;
	--colorInputBgDark:      #EDF0F7;
	--colorInputBgLight:     #F8FAFF;
	--colorNotifInfoBg:      #CFE8F4;
	--colorNotifInfoText:    #0059A4;
	--colorNotifInvalidBg:   #FFDDDD;
	--colorNotifInvalidText: #A30000;
	--colorNotifValidBg:     #D4EACE;
	--colorNotifValidText:   #004D00;
	--colorNotifWarnBg:      #F1E3CE;
	--colorNotifWarnText:    #6A3500;
	--colorPointerNormal:    #3A6BFF;
	--colorPointerDark:      #294CB4;
	--colorTextDark:         #1B1D23;
	--colorTextMedium:       #707688;
	--colorTextNormal:       #363A45;
}

.theme {
	--colorBoxBorder:        #646464;
	--colorBoxBgLight:       #3E3E3E;
	--colorBoxBgDark:        #363636;
	--colorBoxLayer:         rgba(000,000,000,0.20);
	--colorBoxShadowNormal:  rgba(000,000,000,0.40);
	--colorBoxShadowDark:    rgba(000,000,000,0.60);
	--colorBrandLight:       #F4F9FF;
	--colorBrandNormal:      #B9D5F1;
	--colorErrorFont:        #EE6544;
	--colorErrorBg:          #221211;
	--colorInputBgDark:      #151515;
	--colorInputBgLight:     #272727;
	--colorNotifInfoBg:      #044289;
	--colorNotifInfoText:    #F5F7FB;
	--colorNotifInvalidBg:   #450D10;
	--colorNotifInvalidText: #FFDCE0;
	--colorNotifValidBg:     #113A1C;
	--colorNotifValidText:   #F6FAF6;
	--colorNotifWarnBg:      #413C26;
	--colorNotifWarnText:    #FDF3AA;
	--colorPointerNormal:    #4EA5FF;
	--colorPointerDark:      #5680C0;
	--colorTextDark:         #C5C5C5;
	--colorTextMedium:       #A3A3A3;
	--colorTextNormal:       #D3D3D3;
}

/**** DOCUMENT */

html, body {height: 100%;padding: 0;margin: 0;border: none;background: var(--colorBoxBgDark);overflow: hidden !important;}
html {scrollbar-color: var(--colorBoxBorder) transparent;scrollbar-width: thin;text-size-adjust: none;}
body {font-family: var(--fontFamily);font-size: var(--fontSize);line-height: var(--lineHeight);color: var(--colorTextNormal);}
body.output-dragging {user-select: none;-webkit-user-select: none;}
body::after {content: " ";display: block;clear: both;}

::placeholder {color: var(--colorBoxBorder);transition: color .1s linear;}
*:focus::placeholder {color: transparent;}
::selection {color: var(--colorBoxBgDark);;background: var(--colorTextDark);}

#body .none {display: none;}

#sandbox {position: absolute;height: 0;width: 0;border: none;margin: 0;}

h1, h2, h3, h4, h5, h6, p, a, li, th, td, pre, blockquote, code, svg, text, input, button, select, textarea {line-height: var(--lineHeight);}
h1, h2, h3, h4, h5, h6, p, li, th, td, pre, blockquote, code, svg, text, input, button, select, textarea {-webkit-font-smoothing: antialiased;}

figure {padding: var(--margin);margin: 0 0 var(--margin2) 0;text-align: center;}
figure::after {content: " ";display: block;clear: both;}
figcaption {padding: var(--margin) var(--margin) 0 var(--margin);margin: 0;}
figure img {max-width: calc(100% - var(--margin) * 2);}

button,
button *,
input[type="button"],
input[type="submit"] {cursor: pointer;}
button,
input[type="button"],
input[type="submit"] {appearance: none;border: none;background: none;transition: color .1s linear, border .1s linear, background-color .1s linear;}
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {color: var(--colorPointerDark);}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {color: var(--colorPointerNormal);}
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {color: #C5C5C5 !important;}
button:disabled,
button:disabled *,
input[type="button"]:disabled,
input[type="submit"]:disabled {cursor: default;}

input[type="text"], input[type="button"], input[type="submit"], textarea {border-radius: 3px;}

textarea {scrollbar-color: var(--colorFontNormal) transparent;scrollbar-width: thin;resize: none;}
textarea,
input[type="text"] {appearance: none;font-family: var(--fontFamilyPre);font-size: var(--fontSizePre);line-height: var(--lineHeight);width: calc(100% - var(--margin) * 2 - 1px);padding: var(--margin);margin: 0 0 var(--margin2) 0;border: 1px solid;border-radius: 1px;outline: 0 solid transparent;transition: color .1s linear, background-color .1s linear, border .1s linear, outline .1s linear, box-shadow .1s linear;}
textarea[readonly] {pointer-events: none;}
textarea:focus,
input[type="text"]:focus {border-color: transparent;outline-width: 3px;outline-color: var(--colorPointerDark);}
textarea:hover,
input[type="text"]:hover {border-color: transparent;outline-width: 3px;outline-color: var(--colorPointerNormal);}
textarea:disabled,
input[type="text"]:disabled {cursor: text;}

/* ******************
    LINKS / BTNS
****************** */

.links,
.btns {margin: 0 0 var(--margin) 0;text-align: center;}
.links li,
.btns li {display: inline;vertical-align: top;}
.links li::before,
.btns li::before,
.links li::after,
.btns li::after {display: none;}

.link,
.btn {appearance: none;display: inline-block;vertical-align: top;font-size: 0;line-height: 0;padding: 3px;margin: 0 0 var(--margin) 0;border: none;background: none;outline: none;vertical-align: top;}
.link *,
.btn * {pointer-events: none;}
.link .wrap,
.btn .wrap {display: inline-block;vertical-align: top;padding: var(--marginHalf) var(--margin);margin: 0 var(--marginHalf);border: none;border-radius: 3px;background: var(--colorBgMedium);outline: 0 solid transparent;transition: border .1s linear, background-color .1s linear, outline-color .1s linear;}
.link:focus .wrap,
.btn:focus .wrap {outline: 1.5px solid var(--colorPointerDark);}
.link:hover .wrap,
.btn:hover .wrap {outline: 3px solid var(--colorPointerNormal);}
.link .wrap .icon,
.btn .wrap .icon {display: inline-block;font-size: 0;line-height: 0;height: var(--lineHeight);width: var(--lineHeight);margin: 0 var(--margin) 0 0;vertical-align: top;transition: color .1s linear;}
.link .wrap .icon-text,
.btn .wrap .icon-text {font-size: var(--fontSize);line-height: var(--lineHeight);}
.link .wrap .icon:empty,
.btn .wrap .icon:empty {display: none;}
.link .wrap .icon:last-child,
.btn .wrap .icon:last-child {margin-right: 0;}
.link .wrap .icon svg,
.btn .wrap .icon svg {height: 100%;width: 100%;}
.btn .wrap .icon svg * {stroke: var(--colorFontNormal);transition: stroke .1s linear;}
.btn:focus .wrap .icon svg * {stroke: var(--colorPointerDark);}
.btn:hover .wrap .icon svg * {stroke: var(--colorPointerNormal);}
.link .wrap .libelle,
.btn .wrap .libelle {font-size: var(--fontSize);line-height: var(--lineHeight);transition: color .1s linear;}
.link .wrap .libelle:empty,
.btn .wrap .libelle:empty {display: none;}

.link .wrap .libelle, .btn .wrap .libelle {font-size: 15px;line-height: 21px;color: var(--colorTextDark);}
.link:focus .wrap .libelle, .btn:focus .wrap .libelle {color: var(--colorPointerNormal);}
.link:hover .wrap .libelle, .btn:hover .wrap .libelle {color: var(--colorPointerNormal);}

/**** LAYOUT */

#layout {display: flex;flex-direction: column;height: 100%;width: 100%;}
.layer-open #layout {filter: blur(1px) saturate(0);}

/**** HEADER */

#header,
#headerInner {background: var(--colorBoxBgLight);}
#header {width: 100%;}
#headerInner {padding: 7px 0;border-top: 1px solid var(--colorBoxBorder);border-bottom: 1px solid transparent;}
#headerLink {font-size: 0;line-height: 0;color: var(--colorBrandNormal);text-decoration: none;}
#headerLink:focus {color: var(--colorPointerNormal);}
#headerLink:hover {color: var(--colorBrandLight);}
#headerImg {height: 24px;width: auto;margin: 0 8px;vertical-align: top;}
#headerTitle {font-family: var(--fontFamilyTitle);font-weight: normal;font-size: 14px;line-height: 24px;vertical-align: top;letter-spacing: 1px;}
#headerPic {position: absolute;top: 8px;right: 17px;font-size: 0;line-height: 0;height: 24px;width: 24px;}
#headerPic svg {height: 24px;width: 24px;}

/**** MENU */

#menu, #menu * {user-select: none;}
#menu {background: var(--colorBoxBgLight);text-align: center;}
@media (min-width: 530px) {
#menu {display: block;position: absolute;z-index: 5;top: 1px;left: 50%;width: 300px;margin-left: -150px;}
}
.menu-details {position: relative;z-index: 6;font-size: 0;line-height: 0;max-width: 768px;padding: 0;margin: 0 auto;overflow: visible;}
.menu-details li {display: inline;font-size: 0;line-height: 0;vertical-align: top;}
.menu-details details {font-size: 0;line-height: 0;display: inline-block;padding: 0;margin: 0;vertical-align: top;overflow: visible;}
@media (min-width: 530px) {
.menu-details details {position: relative;z-index: 7;}
}
.menu-details summary {position: relative;z-index: 8;display: inline-block;vertical-align: top;padding: 0 0 1px 0;margin: 0;color: var(--colorTextNormal);border: 1px solid transparent;border-bottom: 0;border-radius: 1px;background: transparent;box-shadow: 0 0 0 0 transparent;outline: none;transition: color .1s linear, box-shadow .1s linear;}
@media (min-width: 530px) {
.menu-details summary {border-top: none;}
}
.menu-details summary, .menu-details summary * {cursor: pointer;}
.menu-details details[data-disabled="true"] summary {pointer-events: none;}
.menu-details details[open] summary {z-index: 10;color: var(--colorTextNormal);border-color: var(--colorBoxBorder);border-bottom: 0px solid var(--colorBoxBgLight);background: var(--colorBoxBgLight);}
.menu-details details[open] summary:focus {color: var(--colorPointerNormal);}
.menu-details details[open] summary:hover {color: var(--colorPointerNormal);}
.menu-details summary .wrap {display: inline-block;padding: 7px 10px;}
@media (min-width: 530px) {
.menu-details summary .wrap {padding: 8px 10px  7px 10px;}
}
.menu-details summary:focus .wrap {background: transparent;}
.menu-details summary:hover .wrap {background: var(--colorBoxBgDark);}
.menu-details summary .wrap .libelle {font-size: 14px;line-height: 24px;vertical-align: middle;}
.menu-details summary:focus .wrap .libelle,
.menu-details summary:hover .wrap .libelle {color: var(--colorPointerNormal);}
.menu-details summary .wrap .icon {vertical-align: middle;margin-right: 5px;}
.menu-details summary .wrap .icon:empty {margin: 0;}
.menu-details .details-content {position: absolute;z-index: 9;top: calc(100% - 1px);left: 7px;width: calc(100% - (7px * 2));padding: 1px 0;border-radius: 3px;background: var(--colorBoxBgLight);box-shadow: 0 2px 5px 0 var(--colorBoxShadowDark), inset 0 0 0 1px var(--colorBoxBorder);}
@media (min-width: 530px) {
.menu-details .details-content {left: 0;width: 300px;padding: 0;border-radius: 0 3px 3px 3px;}
}
.menu-details details[data-disabled="true"] .details-content {display: none;}
.menu-details .details-content ul {list-style: none;padding: 5px 1px;margin: 0;overflow: visible;}
.menu-details .details-content ul + ul {border-top: 1px solid var(--colorBoxBorder);}
.menu-details .details-content button {display: block;font-size: 13px;line-height: 15px;width: 100%;padding: 7px;text-align: left;background: transparent;outline: none;}
.menu-details button:focus {background: var(--colorBoxBgDark);}
.menu-details .details-content button .wrap {display: table;width: 100%;}
.menu-details .details-content button .wrap > * {display: table-cell;vertical-align: top;}
.menu-details .details-content button .icon {font-size: 0;line-height: 0;vertical-align: top;height: 15px;width: 15px;padding-right: 7px;color: var(--colorPointerNormal);}
.menu-details .details-content button .libelle {color: var(--colorTextNormal);transition: color .1s linear;}
.menu-details .details-content button:focus .libelle {color: var(--colorPointerNormal);}
.menu-details .details-content button .shortcut {font-size: 11px;line-height: 15px;width: 100px;padding-right: 10px;color: var(--colorTextNormal);text-align: right;transition: color .1s linear;}
.menu-details .details-content button:focus .shortcut,
.menu-details .details-content button:hover .shortcut {color: var(--colorPointerNormal);}
.menu-details .details-content button .shortcut span {display: inline-block;font-size: 9px;line-height: 13px;margin: 0 3px;color: var(--colorTextMedium);transition: color .1s linear;}
.menu-details .details-content .disabled > button,
.menu-details .details-content .disabled > button * {cursor: default;}
.menu-details .details-content .disabled > button .icon,
.menu-details .details-content .disabled > button .libelle,
.menu-details .details-content .disabled > button .shortcut,
.menu-details .details-content .disabled > button .shortcut span {color: var(--colorBoxBorder) !important;}

/**** ACTIONS */

#actions, #actions * {user-select: none;}
#actions {position: relative;z-index: 1;background: var(--colorBoxBgLight);}
#actionsInner {border-bottom: 1px solid var(--colorBoxBorder);}
#actions .btns {padding: 4px 0 5px 0;margin: 0;}
#actions .btn {margin: 0;color: var(--colorTextNormal);}
#actions .btn[data-disabled="true"] {pointer-events: none;}
@media (min-width: 530px) {
#actions .btn {margin: 0 0 0 5px;}
#actions li:first-child .btn {margin: 0;}
}
#actions .btn:focus {color: var(--colorPointerNormal);}
#actions .btn:hover {color: var(--colorPointerNormal);}
#actions .btn:focus .wrap {background: var(--colorBoxBgDark);}
#actions .btn:hover .wrap {background: var(--colorInputBgLight);}
#actions .btn:focus:hover .wrap {background: var(--colorInputBgDark);}
#actions .btn .wrap {padding: 3px;margin: 0;border-color: transparent;border-radius: 3px;background: transparent;outline: none;}
#actions .btn:disabled .wrap {background: transparent;}
#actions .btn .icon {height: 18px;width: 18px;color: var(--colorTextNormal);}
#actions .btn:focus .icon {color: var(--colorPointerNormal);}
#actions .btn:hover .icon {color: var(--colorPointerNormal);}
#actions .btn:disabled .icon {color: var(--colorBoxBorder);}
#actions .btn .icon svg * {stroke-width: 1px;stroke: currentColor;}

#btnReload[data-running="1"] .wrap .icon {animation: spin 2s linear infinite;}
#btnReload[data-running="1"][data-runningcanceled="1"] .wrap .icon {animation: spinReverse 2s linear infinite;}
@keyframes spin {to {transform: rotate(360deg);}}
@keyframes spinReverse {to {transform: rotate(-360deg);}}

/**** MAIN */

#main {position: relative;z-index: 0;height: 100%;padding: 0;margin: 0;}
#mainInner {position: absolute;z-index: 1;top: 0;left:0;height: 100%;width: calc(100% - 34px);padding: 0 17px;overflow-x: hidden;overflow-y: scroll;overflow-y: overlay;}
@media (min-width: 832px) {
#mainInner {scrollbar-gutter: stable both-edges;}
}
#mainInner > * {max-width: 768px;margin: 0 auto;}

/**** MAIN TITLE */

#titleBar {max-width: 766px;padding: 17px 1px 0 1px;}

#inputTitle {font-family: var(--fontFamily);font-size: 21px;line-height: 31px;width: calc(100% - 14px);padding: 7px;margin: 0;border: none;background: transparent;color: var(--colorTextNormal);outline-width: 0;box-shadow: 0 0 0 0 transparent;}
#inputTitle:focus {outline-color: var(--colorPointerNormal);outline-width: 1px;box-shadow: inset 0 0 2px 0 var(--colorPointerNormal);}
#inputTitle:focus:hover {outline-color: var(--colorPointerNormal);}
#inputTitle.invalid {color: var(--colorErrorFont);}

/**** ITEMS */

#items {padding: 17px 0 9px 0;margin: 0 auto;}
.item {font-size: 0;line-height: 0;position: relative;margin: 10px 0 0 0;border: 1px solid var(--colorBoxBorder);border-radius: 3px;background: var(--colorInputBgLight);box-shadow: inset 0 0 0 0 transparent;transition: background-color .1s linear, border .1s linear, box-shadow .1s linear;cursor: text;}
.item:first-child {margin-top: 0;}
.item-code-active {border-color: var(--colorPointerDark);}
.item-code-active:has(:focus) {border-color: var(--colorPointerNormal);box-shadow: inset 0 0 2px 0 var(--colorPointerNormal);}
.item-log {margin-top: 7px;border-color: transparent;background: transparent;}
.item-code textarea,
.item-log pre {font-size: 12px;line-height: 16px;width: calc(100% - 14px);padding: 0;margin: 0;color: var(--colorTextMedium);border: 1px solid transparent;border-width: 7px;background: none;outline: none;cursor: text;}
.item-log pre {white-space: pre-wrap;word-break: break-word;}

.item-log-info {background: var(--colorNotifInfoBg);}
.item-log-invalid {background: var(--colorNotifInvalidBg);}
.item-log-warn {background: var(--colorNotifWarnBg);}
.item-log-valid {background: var(--colorNotifValidBg);}
.item-code-error + .item-log {background: var(--colorErrorBg);}
.item-log-info pre {color: var(--colorNotifInfoText);}
.item-log-invalid pre {color: var(--colorNotifInvalidText);}
.item-log-warn pre {color: var(--colorNotifWarnText);}
.item-log-valid pre {color: var(--colorNotifValidText);}
.item-code-error + .item-log pre {color: var(--colorErrorFont);}

#itemAdd {margin: 0 auto 17px auto;text-align: center;opacity: .33;}
#btnAddCellLast {display: block;width: 100%;margin: 0 auto;}
#btnAddCellLast .wrap {display: block;width: 100%;padding: 3px 0;margin: 0;background: none;outline: 1px dashed transparent;}
#btnAddCellLast:focus .wrap {outline: 1px solid var(--colorPointerDark);}
#btnAddCellLast:hover .wrap {outline: 1px dashed var(--colorTextNormal);}
#btnAddCellLast .wrap .libelle {font-size: 13px;line-height: 17px;color: transparent;}
#btnAddCellLast:focus .wrap .libelle {color: var(--colorPointerDark);}
#btnAddCellLast:hover .wrap .libelle {color: var(--colorTextNormal);}

/**** INPUTS */

button,
button *,
input[type="button"],
input[type="submit"] {cursor: pointer;}
button,
input[type="button"],
input[type="submit"] {appearance: none;color: var(--colorPointerNormal);border: none;background: none;transition: color .1s linear, border .1s linear, background-color .1s linear;}
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {color: var(--colorPointerDark);}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {color: var(--colorPointerNormal);}
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {color: #C5C5C5 !important;}
button:disabled,
button:disabled *,
input[type="button"]:disabled,
input[type="submit"]:disabled {cursor: default;}

textarea {appearance: none;font-family: var(--fontFamilyPre);font-size: var(--fontSizePre);line-height: var(--lineHeight);width: calc(100% - var(--margin) * 2 - 1px);padding: var(--margin);margin: 0 0 var(--margin2) 0;color: var(--colorFontNormal);background: var(--colorBgDark);border: .5px solid;border-radius: 1px;outline: 0 solid transparent;scrollbar-color: var(--colorFontNormal) transparent;scrollbar-width: thin;transition: color .1s linear, background-color .1s linear, border .1s linear, outline .1s linear;resize: none;}
textarea[readonly] {pointer-events: none;}
textarea:focus {border-color: transparent;outline-width: 3px;outline-color: var(--colorPointerDark);}
textarea:hover {border-color: transparent;outline-width: 3px;outline-color: var(--colorPointerNormal);}
textarea:disabled {cursor: text;}

input[type="text"] {appearance: none;font-family: var(--fontFamilyPre);font-size: var(--fontSizePre);line-height: var(--lineHeight);width: calc(100% - var(--margin) * 2 - 2px);padding: var(--margin);margin: 0 0 var(--margin2) 0;color: var(--colorFontNormal);background: var(--colorBgDark);border: 1px solid;border-radius: 1px;outline: 0 solid transparent;transition: color .1s linear, background-color .1s linear, border .1s linear, outline .1s linear, box-shadow .1s linear;resize: none;}
input[type="text"]:focus {border-color: transparent;outline-width: 3px;outline-color: var(--colorPointerDark);}
input[type="text"]:hover {border-color: transparent;outline-width: 3px;outline-color: var(--colorPointerNormal);}
input[type="text"]:disabled {cursor: text;}

input[type="text"]:focus {border-color: var(--colorPointerDark);}
input[type="text"]:hover {border-color: var(--colorPointerNormal);}

input[type="button"],
input[type="submit"] {padding: 5px 10px;color: var(--colorTextDark);border: 1px solid var(--colorBoxBorder);background: transparent;outline: none;}
input[type="button"]:focus,
input[type="submit"]:focus {color: var(--colorPointerNormal);border-color: var(--colorPointerNormal);}
input[type="button"]:hover,
input[type="submit"]:not(:disabled):hover {color: var(--colorPointerNormal);border-color: var(--colorPointerNormal);background: var(--colorInputBgLight);outline: none;}
input[type="button"]:focus:hover,
input[type="submit"]:not(:disabled):focus:hover {background: var(--colorInputBgDark);}

.inputs {overflow: hidden;}
.inputs-bloc {float: left;overflow: hidden;margin: 0 0 0 17px;}
.inputs-bloc:first-child {margin: 0;}

.inputs-label {float: left;font-family: var(--fontFamilyTitle);}
.inputs-list {display: inline-block;padding: 0;margin: 0 0 17px 17px;}
.inputs-list:first-child {margin-left: 0;}
.inputs-list li {display: inline;font-size: 0;line-height: 0;padding: 0;margin: 0;vertical-align: top;}
.inputs-list li label {display: inline-block;vertical-align: top;padding: 3px;margin: 0;}
.inputs-list li input:not(:disabled) + .wrap,
.inputs-list li input:not(:disabled) + .wrap * {cursor: pointer;}
.input {position: relative;overflow: hidden;}
.input input {position: absolute;left: -30px;}
.input .wrap {display: inline-block;border: 1px solid var(--colorBoxBorder);border-radius: 30px;background: transparent;outline: none;transition: background-color .1s linear, border .1s linear;}
.input input:checked + .wrap {background: var(--colorInputBgLight);}
.input input:focus + .wrap,
.input input:not(:disabled):hover + .wrap {background: var(--colorInputBgDark);border-color: var(--colorPointerNormal);outline: none;}
.input .text {display: inline-block;font-family: var(--fontFamilyTitle);font-size: 14px;line-height: 18px;letter-spacing: 1px;padding: 4px 11px;color: var(--colorTextDark);transition: color .1s linear;}
.input input:disabled + .wrap .text {color: var(--colorBoxBorder);}
.input input:focus + .wrap .text {color: var(--colorPointerNormal);}
.input input:not(:disabled):hover + .wrap .text {color: var(--colorPointerNormal);}

/**** LAYER */

.layer {position: fixed;z-index: 20;top: 0;left: 0;height: 100%;width: 100%;background: var(--colorBoxLayer);}
.layer .layer-table {display: table;height: 100%;width: 100%;}
.layer .layer-cell {display: table-cell;vertical-align: middle;text-align: center;}
.layer .layer-title {padding: 0;margin: 0 0 27px 0;color: var(--colorTextMedium);vertical-align: top;transition: color .1s linear;}
.layer .layer-title-img {height: 24px;width: 24px;margin-right: 7px;vertical-align: middle;}
.layer .layer-title-label {font-family: var(--fontFamilyTitle);font-size: 16px;line-height: 24px;letter-spacing: 1px;vertical-align: middle;}
.layer .layer-close {float: right;padding: 0;margin: 0;vertical-align: top;}
.layer .layer-close .wrap {padding: 0 7px;margin: 0;border: 1px solid var(--colorBoxBorder);background: transparent;outline: none;}
.layer .layer-close:focus .wrap {border-color: var(--colorPointerNormal);}
.layer .layer-close:hover .wrap {border-color: var(--colorPointerNormal);background: var(--colorInputBgLight);}
.layer .layer-close:focus:hover .wrap {background: var(--colorInputBgDark);}
.layer .layer-close .wrap .libelle {font-family: var(--fontFamilyTitle);font-weight: bold;font-size: 14px;line-height: 22px;color: var(--colorTextDark);}
.layer .layer-close:focus .wrap .libelle {color: var(--colorPointerDark);}
.layer .layer-close:hover .wrap .libelle {color: var(--colorPointerNormal);}
.layer .layer-inner {display: inline-block;width: calc(100% - 40px);max-width: 500px;padding: 20px 20px 13px 20px;text-align: left;border: 1px solid var(--colorBoxBorder);border-radius: 3px;background: var(--colorBoxBgLight);box-shadow: 0 2px 5px 0 var(--colorBoxShadowDark);}

.layer-content {max-height: 330px;max-width: 100%;overflow: auto;}
.layer-content p {font-size: 14px;line-height: 18px;letter-spacing: 1px;padding: 7px 0;margin: 0 0 17px 0;color: var(--colorTextDark);}
.layer-content form {padding: 3px;margin: 0;}
.layer-content textarea,
.layer-content input[type="text"] {margin: 0 0 17px 0;color: var(--colorTextMedium);border-color: var(--colorBoxBorder);background: var(--colorInputBgLight);outline: none;transition: color .1s linear, border .1s linear, background-color .1s linear, box-shadow .1s linear;}
.layer-content textarea:focus,
.layer-content textarea:hover {border-color: var(--colorPointerNormal);}
.layer-content textarea:focus,
.layer-content input[type="text"]:focus {color: var(--colorTextNormal);border-color: var(--colorPointerNormal);box-shadow: inset 0 0 2px 0 var(--colorPointerNormal);}

.layer-actions {text-align: center;}
.layer-actions .layer-action {font-family: var(--fontFamilyTitle);letter-spacing: 1px;margin: 0 3px 17px 3px;outline: none;}
.layer-actions .layer-action:disabled {color: var(--colorBoxBorder) !important;}

/**** LAYERS */

#layerAbout .layer-inner {width: 200px;}
#aboutLabel {font-family: var(--fontFamilyTitle);font-weight: normal;letter-spacing: 1px;color: var(--colorBrandNormal);}
#aboutVersion,
#aboutMention {font-size: 12px;line-height: 16px;padding: 0;}

/**** DATA VIEWER */

.data-viewer-box {height: 174px;max-width: 100%;margin: 0 0 17px 0;border: 1px solid var(--colorBoxBorder);border-radius: 3px;background: var(--colorInputBgLight);outline: none;/* overflow: auto; */}
.data-viewer-box:focus {border-color: transparent;}

#dataViewerContent table {width: calc(100% - 6px);margin: 3px;}
#dataViewerContent th,
#dataViewerContent td {font-family: var(--fontFamilyPre);font-size: 10px;line-height: 14px;padding: 4px;border-width: 1px;color: var(--colorTextDark);border-color: transparent;}
#dataViewerContent th {color: var(--colorTextNormal);background: transparent;}
#dataViewerContent td {color: var(--colorTextMedium);}
#dataViewerContentTruncated {font-weight: bold;font-size: 12px;line-height: 10px;height: 14px;padding: 3px 7px;margin: 0;color: var(--colorTextDark);border-top: 1px solid var(--colorBoxBorder);background: transparent;text-align: center;}
#dataViewerContentError {font-family: var(--fontFamilyPre);font-size: 10px;line-height: 14px;padding: 4px;margin: 0;color: var(--colorErrorFont);background: var(--colorErrorBg);}

#dataViewerSrc {font-size: 0;line-height: 0;}
#dataViewerSrcTextarea {font-family: var(--fontFamilyPre);font-size: 10px;line-height: 14px;height: 160px;width: calc(100% - 14px);margin: 0;padding: 7px;border: none;}
#dataViewerSrcTextarea:hover,
#dataViewerSrcTextarea:focus{outline: 1px solid var(--colorPointerNormal);}

#dataExportListItems {list-style: none;padding: 0;margin: 0 0 var(--margin2) 0;}
#dataExportListItems label {display: block;padding: 5px var(--marginHalf);border-radius: 3px;cursor: pointer;transition: background-color .1s linear, color: .1s linear;}
#dataExportListItems label:hover {color: var(--colorPointerNormal);background: var(--colorBoxBgDark);}
#dataExportListItems label:has(:checked) {color: var(--colorPointerNormal);}

.radio-small {--radioSize: calc(var(--fontSize) - 6px);display: inline-block;vertical-align: middle;position: relative;font-size: 0;line-height: 0;height: var(--radioSize);width: var(--radioSize);padding: 2px;margin: 0 var(--marginHalf) 0 0;border: 1px solid var(--colorTextNormal);border-radius: 50%;overflow: hidden;transition: border: .1s linear;}
.radio-small * {cursor: pointer;}
.radio-small input {position: absolute;left: -30px;}
.radio-small span {display: inline-block;height: var(--radioSize);width: var(--radioSize);border-radius: 50%;background: transparent;transition: background-color: .1s linear;}
.radio-small input:checked + span {background: var(--colorPointerNormal);}
#dataExportListItems label:hover .radio-small,
#dataExportListItems label:has(:checked) .radio-small {border-color: var(--colorPointerNormal);}

/**** NOTIFS */

#notifs {position: relative;z-index: 1;}
#notifsInner {position: absolute;z-index: 2;top: 3px;left: 50%;width: 300px;margin: 0 0 0 -150px;}
#notifs .notif {display: table;vertical-align: middle;width: calc(100% - 14px);padding: 7px;margin: 0 0 3px 0;background: black;color: white;border-radius: 3px;box-shadow: 0 2px 2px 0 var(--colorBoxShadowNormal), 0 0 1px 0 currentColor;}
#notifs .icon {display: table-cell;vertical-align: middle;font-size: 0;line-height: 0;height: 15px;width: 15px;padding-right: 7px;}
#notifs .icon svg {height: 100%;width: 100%;}
#notifs .notif-msg {display: table-cell;vertical-align: middle;font-size: 13px;line-height: 15px;padding: 0;margin: 0;}
#notifs .notif-info {color: var(--colorNotifInfoText);background: var(--colorNotifInfoBg);}
#notifs .notif-invalid {color: var(--colorNotifInvalidText);background: var(--colorNotifInvalidBg);}
#notifs .notif-valid {color: var(--colorNotifValidText);background: var(--colorNotifValidBg);}
#notifs .notif-warn {color: var(--colorNotifWarnText);background: var(--colorNotifWarnBg);}

/**** OUTPUT */

#outputPanel {position: relative;height: 154px;min-height: 154px;max-height: 504px;padding: 0;margin: 0;flex: 0 0 auto;}
#outputBar {height: 2px;overflow: hidden;border-bottom: 1px solid var(--colorBoxBorder);background: transparent;cursor: ns-resize;user-select: none;-webkit-user-select: none;}
#output {position: absolute;top: 3px;left: 0;height: calc(100% - 4px);width: 100%;overflow: auto;border-top: none;background: var(--colorInputBgLight);}
#outputBar.hover + #ouput,
#outputBar.hover + #ouput * {user-select: none;pointer-events: none;}
#output table {height: 100%;min-width: 100%;margin: 0;border: none;border-right: 1px solid var(--colorBoxBorder);border-collapse: separate;border-spacing: 0;background: var(--colorBoxBgLight);box-shadow: 0 2px 5px 0 var(--colorBoxShadowNormal);}
#output tr > * {font-family: var(--fontFamilyPre);color: var(--colorTextNormal);padding: 2px 5px;border: solid var(--colorBoxBorder);border-width: 0 0 1px 1px;white-space: nowrap;}
#output tr:first-child + tr > th {white-space: normal;}
#output th,
#output td:first-child {font-size: 12px;line-height: 20px;background: var(--colorInputBgLight);border-color: var(--colorBoxBorder);}
#output th:first-child,
#output td:first-child {text-align: right;}
#output td {font-size: 11px;line-height: 13px;}
#output td + td {color: var(--colorTextMedium);}
#output td[data-align="center"] {text-align: center;}
#output td[data-align="right"] {text-align: right;}
#output th,
#output tbody tr > *:first-child {font-weight: normal;}
#output tr > *:first-child {border-left: none;width: 1px;}
#output thead {position: sticky;z-index: 2;top: 0;}
#output thead tr:first-child th:first-child {background: linear-gradient(to top right, var(--colorInputBgLight) 0%, var(--colorInputBgLight) calc(50% - 0.8px), var(--colorBoxBorder) 50%, var(--colorInputBgLight) calc(50% + 0.8px), var(--colorInputBgLight) 100%);}
#output tr > *:first-child + * {border-left: 1px solid var(--colorBoxBorder);}