body{
    --colorWhite:             #FFFFFF;  --colorBlack:               #000000;
    --colorDarkBlue:         #002e42;  --colorLightBlue:           #026b98;
    --colorLightGrey:       #e8e8e8
}

body {
    --sizeNavigationBar: 48px;
    --sizeSideBar: 45px;
    --sizeSidePanel: 40vw;
    --sizeActionPanel: 75px;
    --sizeTopPanel: 155px;
    --sizeTopPanelCompact: 70px;
    --sizeTopPanelNavi: 75px;
    --sizeTopPanelCollapsed: 10px;
    --sizePlantPanel: 250px;
    --sizeFormPanel: 350px;
    --sizeFont: 12px;
    --sizeFontInput: 16px;
    --sizeFontBig: 16px;
    --sizeFontBigInput: 20px;
    --sizeFontBigger: 24px;
    --sizeFooter:0px;
    --sizeFooterMobile:60px;
    --fontFamily: "Hind", sans-serif;
}

/* LAYOUT STYLES */
body {margin: 0; font-family: var(--fontFamily); color: var(--colorWhite); font-size: var(--sizeFont);background-color:var(--colorDarkBlue);}
.wrapper {height: calc(100vh - var(--sizeFooter)); display: flex; flex-direction: column;}
.footer {flex-basis:var(--sizeFooter);flex-shrink:0; box-sizing:border-box; background-color:#f9f9f9;border-top:1px solid #ddd;flex-wrap:wrap;display:flex;align-content:center;font-size:10px;color:#8f8f8f;flex-direction:column;position:sticky;bottom:0;gap:3px;align-items:center}
.footer div{display:flex;gap:3px;flex-direction: column;align-items: center;}
.footerInfo{display:flex;justify-content:center}
.footer a{text-decoration:none;color:#8f8f8f}
.footer a:hover{text-decoration:underline;}


/* HEADER - LAYOUT */
.wrapper > .header {flex-basis: var(--sizeNavigationBar); flex-grow: 0; flex-shrink: 0; position: sticky; top: 0; z-index: 100; display: flex; align-items: center;
                    background: var(--colorBlack); color: var(--colorWhite); font-size: var(--sizeFontInput);gap:30px}

/* HEADER - LOGO */
#logo {display: inline-block; cursor:pointer;margin: 0 20px; filter: brightness(0) invert(1); background-size: contain;font-size:2rem;font-family:"Marcellus SC", serif}

/* CONTENT - LAYOUT */
.content {background-color: var(--colorDarkBlue); flex-grow: 1;}
.content-container {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }
.content .centerCanvas {display: block; flex-grow: 1; flex-shrink: 1; flex-basis: auto; align-self: auto; order: 0; max-width: 100vw; padding: 0 10px;}
.content .container {display: flex; flex-direction: column; height: 100%;}

/* CONTENT - CANVAS */
.contentCanvas {display: flex; align-items: stretch; flex-grow: 1; overflow-y: auto; padding: 10px; margin: 10px 0;}
.contentCanvas:has(.fullCanvas) {flex-direction: column; align-items: stretch;}
.contentCanvas:has(.sectionedCanvas) {flex-direction: column; margin: 0; padding: 30px; background: var(--colorDefault);}
.contentCanvas h2 {font-size: var(--sizeFontBig); padding: calc(var(--sizeFontBig) * 2) 0 var(--sizeFontBig); font-weight:600}
.contentCanvas h2:first-child {padding-top: 0;}

.contentCanvas .form label {display: block; font-weight: 600; padding: 0.5em 0;}
.contentCanvas .form label:has(input) {display: flex; align-items: center; padding: 0; font-size: var(--sizeFontInput); font-weight: normal;}
.contentCanvas .form label.required::after {content: ' *'; color: red;}
.contentCanvas .form label .required {color: red;}
.contentCanvas .form label[title]:not([title='']) {cursor: help;}
.contentCanvas .form label[title]:not([title='']):before {content: 'i'; font-family: Webdings; font-weight: normal; margin-right: 3px}
.contentCanvas .form input:not([type]), .contentCanvas .form input[type="text"], .contentCanvas .form input[type="number"], .contentCanvas .form input[type="date"],.contentCanvas .form input[type="datetime-local"], .contentCanvas .form input[type="time"], select, textarea {width: 100%;}
.contentCanvas .form textarea {background: var(--colorDefault); min-height: 60px; padding: 5px; outline: none !important; font-size: var(--sizeFontInput); border-radius: 3px;}
.contentCanvas .form textarea:disabled {background: white; cursor: not-allowed;}

/* FORM STYLES */
dialog{width:33vw;border:1px solid #e1e1e1;box-shadow:white 1px 1px 12px 0px;font-size:15px}
dialog h2 {border-bottom: 1px solid grey;}
dialog .form div:not(.formFooter){padding-bottom:10px}
dialog .formFooter{padding:10px;display:flex;gap:20px}
button{padding:5px 10px;border-radius:3px;border:1px solid #e1e1e1;cursor:pointer}
button:hover{box-shadow:1px 1px 4px 0px grey}
 button.main{background-color:var(--colorLightBlue);color:var(--colorWhite);border:1px solid transparent}
 dialog .formFooter button{padding:10px 20px;}

button[disabled].working, input[type='button'][disabled].working {cursor: wait; position: relative;}
button[disabled].working::after, input[type='button'][disabled].working::after {content: ""; position: absolute; width: 16px; height: 16px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border: 4px solid transparent; border-top-color: var(--colorDarkBlue); border-bottom-color: var(--colorDarkBlue); border-radius: 50%; animation: button-loading-spinner 1s ease infinite;}
@keyframes button-loading-spinner {
    from {transform: rotate(0turn);}
    to {transform: rotate(1turn);}
}

button[disabled]:hover, input[type='button'][disabled]:hover {cursor: not-allowed;}
button[disabled], input[type='button'][disabled] {background-color:#d4d4d4 !important; color:#9b9b9b !important}

dialog .dialogContent .itemForm .column > div > label[title]:not([title='']):before {float: right;}
dialog .dialogContent .itemForm .column > div > label {font-size: 13px;}
input:not([type]), input[type='text'],
input[type='date'], input[type='datetime-local'], input[type='time'],
input[type='number'], input[type='range'], textarea, select, div[contenteditable] {border: 1px solid #FFFFFF; border-bottom: 1px solid #CCCCCC; padding-left: 15px;}


::backdrop { background-color: rgb(0, 0, 0, 0.4);}


/* FORM STYLES */
input:not([type]), input[type='text'], input[type='date'],input[type='datetime-local'],input[type='time'], input[type='number'], input[type='range'], textarea, select, div[contenteditable] {color: var(--colorFontDark); background-color: #fafafa; font-size: var(--sizeFontInput); padding: 7px 5px; min-width: 150px; border-radius: 3px; font-family: var(--fontFamily); box-sizing: border-box;border-radius:3px}
input[type='range'] {padding: 2px 0; accent-color: var(--colorFont);}
input[type='time'] {padding:3px;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {margin: -5px;}
input[type='date'], select {min-width: unset;}
input:not([type]):focus, input[type='text']:focus, input[type='date']:focus,input[type='datetime-local']:focus, input[type='number']:focus, input[type='range']:focus, select:focus {outline: none;}
input:not([type]):disabled, input[type='text']:disabled, input[type='date']:disabled,input[type='datetime-local']:disabled, input[type='time']:disabled, input[type='number']:disabled, input[type='range']:disabled,textarea:disabled, select:disabled { cursor: not-allowed;}
input[type='checkbox'] {border: 1px solid var(--colorFont); margin: 5px; border-radius: 3px; height: var(--sizeFontBig);accent-color:var(--colorBrand);}
input:not([disabled]).unsaved, select:not([disabled]).unsaved {background: var(--colorWorking);}
input:not([disabled]).invalid {background: var(--colorRejected);}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {margin: -4px;}


.header .navmenu {display:flex;gap:30px;font-size:15px}
.header .navmenu div{cursor:pointer}

.form label.required::after {content: ' *'; color: red;}
.form label .required {color: red;}

/* COMMON STYLES */
.hidden {display: none !important;}
.invisible {visibility: hidden !important}
.validationAlert {background-color: #F8E9B7 !important;}

/* DREXTABLE */
.drextable{width:100%;font-size:14px; border-spacing: initial;}
.drextable tbody + tbody {border-top: 10px solid var(--colorWhite);}
.drextable th {padding: 4px 10px 6px; text-align: center; font-weight: 600;border-bottom:1px solid var(--colorWhite)}
.drextable td {padding: 7px 10px; text-align: center; font-weight: normal; border-top: 1px solid var(--colorWhite); height: 1.8em;}
.drextable tr:first-child td {border-top-width: 0;}
.drextable tbody tr:hover th, .emtable tbody tr:hover td {background: var(--colorWhite);}
.drextable tr th.hover, .emtable tr td.hover {background: var(--colorWhite);}

.drextable thead th[colspan] {text-align:center;border-bottom:none;}
.drextable thead th[colspan]:has(div) {padding-bottom: 3px;}
.drextable thead th[colspan] div {border-bottom: 1px solid var(--colorWhite); margin: 0 30px 0; padding: 0 0 2px;}
.drextable thead th[colspan] div.hoveronly {border-bottom-color: transparent;}
.drextable thead th[colspan] div:hover {border-bottom-color: var(--colorWhite);}

/* CHECKBOX */
.custom-checkbox {display: inline-flex;align-items: center;cursor: pointer;user-select: none;margin: 5px 0;}
.custom-checkbox input {  display: none;}
.checkbox-box {  width: 28px;  height: 28px;  border: 2px solid #ccc;  border-radius: 4px;  margin-right: 10px;  display: inline-block;  position: relative;  transition: all 0.2s ease;}
.custom-checkbox input:checked + .checkbox-box {  background-color: var(--colorLightBlue);  border-color: transparent;}
.custom-checkbox input:checked + .checkbox-box::after {  content: '\2714';  display:block;  text-align:center;  color:white;  font-size:20px;}

.questionnaire-wrapper{width:100%;min-height:200px;display:flex;justify-content:center;color:var(--colorBlack);}
.questionnaire-form{width:60vw;background-color:var(--colorWhite);height:100%}
.questionnaire-content .question.requiredTrue > label:after{content: ' *'; color: red;}
.questionnaire-content .header {flex-grow:2;flex-basis:100px}
.questionnaire-content .header div.question{display:flex;flex-direction:row;padding-top:10px}

.questionnaire-content .header div.question > label{font-size:18px;width:30%;flex-shrink:0;margin-right:5px}
.questionnaire-content .header div.question > div{flex-grow:1}
.questionnaire-content .header div.question > div input{background-color:var(--colorLightGrey);border:none;width:100%;padding:7px 7px}
.questionnaire-content .header div.question > div input:focus{outline:1px solid grey}
.questionnaire-content .header div.question > div select{background-color:var(--colorLightGrey);border:none;width:100%;padding:7px 7px}
.questionnaire-content .header div.question > div select:focus{outline:1px solid grey}
.questionnaire-content .header div.question > div div[contenteditable]{background-color:var(--colorLightGrey);border:none;width:100%;padding:7px 7px;min-height:80px}
.questionnaire-content .header div.question > div div[contenteditable]:focus{outline:1px solid grey}

.questionnaire-content .questions div.question > label{font-size:18px;font-weight:600;padding-bottom:15px;display:inline-block;text-transform:uppercase}
.questionnaire-content .questions div.question{padding:15px 10px;border-bottom:1px solid var(--colorBlack);}
.questionnaire-content .questions div.question textarea{background-color:var(--colorLightGrey);border:none;width:100%;padding:7px 7px;height:80px}
.questionnaire-content .questions div.question textarea:focus{outline:1px solid grey}
.questionnaire-content .questions div.question div[contenteditable]{background-color:var(--colorLightGrey);border:none;width:100%;padding:7px 7px;min-height:80px}
.questionnaire-content .questions div.question div[contenteditable]:focus{outline:1px solid grey}

.questionnaire-content  .custom-checkbox{font-size:16px}
.questionnaire-content .headerInfo{border-top:1px solid black;border-bottom:1px solid black;font-weight:bold;font-size:20px;padding:30px;margin-top:25px;text-align:center}
.questionnaire-content .safetyInfo{border-bottom:1px solid black;font-size:18px;padding:30px;line-height:30px}

.floating{position:fixed;top:calc(var(--sizeNavigationBar));left:0;padding:20px;}
.floating button {background-color:var(--colorLightBlue);color:white;font-size:25px;padding:15px 60px;border:transparent;display:flex;justify-content:center;gap:10px}

.questionnaire-content .footer{padding:20px}
.questionnaire-content .footer button{width:16vw;background-color:var(--colorLightBlue);color:white;font-size:25px;padding:10px 0px;border:transparent}


.multiSelectContainer{display:flex;flex-direction:row;flex-wrap:wrap}
.multiSelectContainer div {padding-right:30px}
.scaleContainer {display: flex;flex-direction: row;width: 100%; justify-content: space-evenly;}
.scaleContainer button{padding:10px 20px;font-weight:600;font-size:16px;}
.scaleContainer button.selected{background-color:var(--colorLightBlue);color:white}
.scaleContainer .scaleValue {display:none}

.onlyMobile {display:none}

@media (max-width: 900px) {
    .questionnaire-form{width:90vw}
    .formPicture{display:none}
    .floating{position:unset;display: flex;justify-content: center;}
    .onlyMobile {display:flex}
}