@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap');
@import url("gsk.css");

:root {
    font-family: 'Rubik', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--font-size-medium);

    --blue: #273375;
    --blue_hover: #0A1240;
    --blue_dark: #00020F;
    --signal: #00AEFF;
    --lightblue: #C5E7FC;
    --lightblue_hover: #9ED7FA;
    --lightbluetransparent: #C5E7FC33;
    --white: #fff;
    --beige: #EAE9E8;
    --beige_hover: #CFCCC9;
    --beige_dark: #958F8A;
    --orange: #ED482F;
    --orange_hover: #BE3A23;
    --lightorange: #ED482F33; /*20% transparent*/
    --yellow: #FFCA43;
    --yellow_hover: #B38100;
    --lightyellow: #FFCA4366; /*60% transparent*/
    --wallpaper: #F6F5F4;
    
    --font-size-x3small: 8px;
    --font-size-x2small: 10px;
    --font-size-xsmall: 12px;
    --font-size-small: 13px;
    --font-size-medium: 15px;
    --font-size-large: 17px;
    --font-size-xlarge: 20px;
    --font-size-x2large: 24px;
    --font-size-x3large: 28px;

    color: var(--blue);
    background-color: var(--wallpaper);
}

html, body, input, button, textarea, dialog, table, ul, li, h1, h2, h3, h4, h5, h6 {
    font-family: 'Rubik', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: var(--font-size-medium);
    color: var(--blue);
    line-height: 160%;
}

html, body {
    margin: 0;
    max-width: none;
    background-color: var(--wallpaper);
    overflow: hidden;
}

p {
    display: block;
    margin-block: 0;
    margin: 0.5em 0;
}

*:focus-visible {
    outline: solid 2px var(--signal);
}


.gutter {
    background-color: var(--wallpaper);
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-vertical {
    background-image: url("../icons/icon-resize-ver.svg");
    cursor: row-resize;
}

.gutter.gutter-horizontal {
    background-image: url("../icons/icon-resize-hor.svg");
    cursor: col-resize;
}


/* table START */
table, .table {
    display: inline-table;
    border-spacing: 8px 0px;
    border-collapse: separate;
    max-width: 100%;
}

.nowrap {
    white-space: nowrap;
}

tr td:first-child, tr th:first-child{ border-radius: 4px 0 0 4px; }
tr td:last-child, tr th:last-child  { border-radius: 0 4px 4px 0; }

td, table td {
    vertical-align: baseline; /* Some cells are too big, middle should not be the default one */
    padding: 4px 8px;
    min-height: 40px;
    border: 0;
    /* white-space: nowrap; */
    /* PROSYN is not ready to have nowrap enabled, since there are some objects that
   are too big and wont`t fit --EMM */
}

.td-box {
    vertical-align: top;
}

td.icon-column {
    padding-right: 0;
    min-width: 52px; /*44px + 8px padding*/
    max-width: 52px
}
/* table END */



/* page layouts START */
.page {
    width: 100vw;
    height: calc(100vh - 40px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0px;
    background-color: var(--wallpaper);
}

.page-header-top {
    width: 100vw;
    box-sizing: border-box;
    background-color: var(--white);
    padding: 16px 8px 12px 8px;

    /* me as flex container */
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 24px;

    /* me as flex cell */
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

.page-header-second {
    width: 100vw;
    box-sizing: border-box;
    background-color: var(--blue);
    padding: 8px;

    /* me as flex container */
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 24px;

    /* me as flex cell */
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    /*min-height: 56px;*/
}

.page-main {
    width: 100vw;
    box-sizing: border-box;
    padding: 8px;

    /* me as flex container */
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    
    /* align-items: flex-start; */ /* Commented out since this is not compatible with the gutter. --EMM */
    
    /*gap: 8px;*/

    /* me as flex cell */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
    overflow: auto;
    /*background-color: rgba(234, 233, 232, 0.4)*/
}

.page-main-left {
    box-sizing: border-box;
    max-width: fit-content;
    height: fit-content;
    background-color: var(--white);
    border-radius: 8px;
    padding: 12px;

    /* me as flex container */
    display: flex;
    flex-direction: column;
    gap: 0px;

    /* me as flex cell */
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
}

.page-main-left-open {
    height: 100%;
    min-width: 400px;
    max-width: none;
    padding-right: 4px;
    /* resize: horizontal;  /\* show resize handler. Commented out since this interfere with the gutter *\/ */
}

.page-main-center {
    /* me as flex container */
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: auto; /* must be auto to help support stack of forms in the near future */

    /* me as flex cell */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

.page-main-right {
    box-sizing: border-box;
    width: 300px;
    background-color: var(--white);
    border-radius: 8px;
    padding: 12px;

    /* me as flex container */
    display: flex;
    flex-direction: column;
    gap: 0px;
    overflow: hidden;
}

.page-main-right-open {
    height: 100%;
    width: 300px;
    min-width: 240px;
    max-width: 800px;
    padding-right: 4px;
}

.page-banner {  /* bottom strip for notification, below menu bars */
    width: 100vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0px;
    background-color: var(--wallpaper);
}

.page-footer {
    width: 100vw;
    box-sizing: border-box;
    text-align: center;
    background-color: var(--white);
    padding: 8px;
    position: absolute;
    bottom: 0px;
    height: 40px;

    /*!* me as flex cell *!*/
    /*flex-grow: 1;*/
    /*flex-shrink: 1;*/
    /*flex-basis: 40px;*/
}

::-webkit-scrollbar {
    width: 12px;
    height: 8px;
}

::-webkit-scrollbar-track {
    border-radius: 6px;
    box-shadow: inset 0 0 12px 12px transparent;
    border: solid 4px transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    box-shadow: inset 0 0 12px 12px var(--beige_hover);
    border: solid 4px transparent;
}

::-webkit-scrollbar-corner {
    background-color: transparent;
}

::-webkit-resizer {
    background-image: url("../icons/icon-resize.svg");
}

/* while replaying, some components must also be hidden */
.hidden, .replay {
    display: none !important; /* priority, so not overridden by other display class setting */
}

.spacer-vertical {
    height: 80px;
    flex-shrink: 0;
}

.spacer-vertical-16 {
    height: 16px;
    flex-shrink: 0;
}

.sort-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    user-select: none;
}

dialog {
    min-width: 320px;
    padding: 24px;
    max-height: calc(100vh - 96px);
    max-width: calc(100vw - 96px);
    border-radius: 8px;
    background-color: var(--white);
    border: 0px solid var(--white);
    box-shadow: 0 6px 12px #27337544;
}

.form.small,
.form.small div.form-text {
    max-width: 720px;
}

.form.medium,
.form.medium div.form-text {
    max-width: 960px;
}

.form.full,
.form.full div.form-text {
    max-width: calc(100vw - 96px);
}

dialog::backdrop {
    backdrop-filter: blur(4px);
    background: #C5E7FCDD; /* light blue with transparency */
}

.dialog-container {
    color: var(--blue);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    max-height: calc(100vh - 210px); /* very fragile, needs to be tweaked if something changes */
    overflow: auto;
}

.container-body {
    overflow: auto;
}

.container-body.horizontal {
    resize: horizontal;
}

.container-body.both {
    resize: both;
}

.login-dialog {
    position: fixed;
    top: 0;
    /* some forms are too big, so keep it auto, and limit the height to 100%,
       otherwise you will have dead-ending forms the user can not interact with
   --EMM */
    overflow: auto;
    max-height:100%;
    bottom: 0;
    left: 0;
    right: 0;
    height: fit-content;
    width: fit-content;
    box-shadow: 0 6px 12px #27337544;
}

.login-dialog-backdrop {
    backdrop-filter: blur(4px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #C5E7FCDD; /* light blue with transparency */
}

.login-header {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 12px;
    border-radius: 8px 8px 0 0;
    background-color: var(--blue);
}

.login-footer {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0px 12px 8px 12px;
}

.login-bottom {
    display: flex;
    /* flex-direction: column; */
    justify-content: flex-start;
    text-align: center;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--beige);
}
/* page layouts END */

.loader {
    position: fixed;
    left: calc(50% - 48px);
    top: 40%;
    background-color: var(--white);
    border-radius: 8px;
    padding: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 6px 12px #27337544;
}

.loader.footer {
    position: absolute;
    left: 12px;
    top: 8px;
    padding: 0px 8px 0px 8px;
}

.loader-server {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ani-loader {
    background-repeat: no-repeat;
    background-size: contain;
    width: 96px;
    height: 96px;
}

/* Text formats */
h1 {
    font-size: var(--font-size-x3large);
    line-height: 130%;
    margin: .5em 0;
}

h2 {
    font-size: var(--font-size-x2large);
    line-height: 140%;
    margin: .5em 0;
}

h3 {
    font-size: var(--font-size-xlarge);
    line-height: 140%;
    margin: .5em 0;
}

h4 {
    font-size: var(--font-size-large);
    line-height: 150%;
    margin: .5em 0;
}

i, em {
    font-weight: 500;
    color: var(--signal);
    font-style: normal;
}

.p-large {
    font-size: var(--font-size-large);
    line-height: 150%;
}

.p-normal {
    font-size: var(--font-size-medium);
    line-height: 150%;
}

.p-small {
    font-size: var(--font-size-small);
    line-height: 150%;
}

.text-label {
    flex-direction: row;
}

.text-label.disabled {
    color: var(--beige_hover);
    cursor: default;
}

bold.disabled {
    opacity:0.4;
    cursor: default;
}

.text-unit {
    color: var(--beige_dark);
    height: 40px;
    align-content: center;
    overflow: hidden;
    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;*/
}

.text-in-toolbar {
    display: grid;
    height: 40px;
    align-content: center;
    overflow: hidden;
}

.ai_question {
    background-color: var(--lightbluetransparent);
    padding: 16px;
    border-radius: 8px;
    border: none
}

.ai_question:hover {
    background-color: var(--lightblue);
}

.ai_question:focus {
    border: none;
    background-color: var(--white);
    outline: 1px solid var(--signal);
    box-shadow: inset 0 0 4px 0 var(--lightblue_hover);
}

.chip {
    box-sizing: border-box;
    height: 24px;
    background-color: var(--white);
    color: var(--beige_dark);
    padding: 0 8px;
    text-align: center;
    border-radius: 12px;
    display: flex;
}

.chip.onwhite {
    background-color: var(--beige);
}

.chip.error {
    background-color: var(--lightorange);
    color: var(--orange_hover);
}

.chip.warn {
    background-color: var(--lightyellow);
    color: var(--yellow_hover);
}

.chip.inform {
    background-color: var(--lightblue);
    color: var(--signal);
}


.chip:hover, .chip.onwhite:hover {
    cursor: pointer;
    background-color: var(--beige_hover);
}

a, a:visited {
    text-decoration: underline var(--beige_hover);
    border-radius: 2px;
    color: var(--blue);
}

a:hover {
    color: var(--blue_dark);
    box-shadow: 0 0 0 4px var(--beige);
    background-color: var(--beige);
}
/* Text formats END */



/* Protocol text and lay-out overrides START */
.protocol_info_foot p::before {
    content: "Source: ";
}

.protocol_info, .protocol_bb_query {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 56px; /* divider between protocol sections */
}

.pr_table table {
    display: inline-table;
}

.pr_table tr.odd, .pr_table tr.even { /* remove color banding in tables */
    background-color: var(--white);
}

table th {
    text-align: left;
    vertical-align: top;
}

.protocol_info_head, /* header protocol sections  */
.protocol_bb_query_looking_for {
    font-weight: 500;
    font-size: var(--font-size-large);
    font-style: normal;
    border-bottom: 1px solid var(--beige);
}

.protocol_info_head em {
    font-weight: 500;
    color: var(--signal);
    font-style: normal;
}

.protocol_info_foot,
.protocol_bb_query_selected_is,
.protocol_bb_query_selected_is em {
    color: var(--beige_hover);
    font-style: normal;
}

.protocol_info_data em{
    font-weight: 500;
    color: var(--signal);
    font-style: normal;
}

.linksmall {
    font-size: var(--font-size-small);
    height: 32px;
    margin-left: 4px;
}

.warn-message {
    font-size: var(--font-size-xsmall);
    color: var(--yellow);
}

.error-message {
    font-size: var(--font-size-xsmall);
    color: var(--orange);
}

.info-message {
    font-size: var(--font-size-xsmall);
    color: var(--signal);
}
/* text formats OLD *** END */


/* text classes START */
.x3small { font-size: var(--font-size-x3small); }
.x2small { font-size: var(--font-size-x2small); }
.xsmall  { font-size: var(--font-size-xsmall);  }
.small   { font-size: var(--font-size-small);   }
.medium  { font-size: var(--font-size-medium);  }
.large   { font-size: var(--font-size-large);   }
.xlarge  { font-size: var(--font-size-xlarge);  }
.x2large { font-size: var(--font-size-x2large); }
.x3large { font-size: var(--font-size-x3large); }


.txt-white {color: var(--white) !important;}
.txt-beige {color: var(--beige_hover) !important;}
.txt-beigedark {color: var(--beige_dark) !important;}
.txt-blue {color: var(--blue) !important;}
.txt-signal {color: var(--signal) !important;}
.txt-yellow {color: var(--yellow) !important;}
.txt-red {color: var(--orange) !important;}

.thin { font-weight: 200; }
.normal { font-weight: 400; }
.bold { font-weight: 500; }
.extrabold { font-weight: 800; }

.caps { text-transform: uppercase; }
.centered {  text-align: center; }
.rightaligned {  text-align: right; }
/* text classes END */


/* Buttons START */
/* common button styles */
.button {
    border-radius: 4px;
    height: 40px;
    min-width: 80px;
    max-width: 640px;
    padding: 0 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    transition: 0.15s;
    user-select: none;
}

/* label point at a button via the for/1 attribute --EMM */
.button label {
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.anchor:hover,
.button:hover {
    cursor: pointer;
}

/* icons within buttons */
.button.icon {
    height: 24px;
    width: 24px;
}

.button.icon-only {
    min-width: 40px;
    padding: 10px 8px;
}

.tool-bar.disabled, .button.disabled, .button.busy {
    opacity:0.4;
    pointer-events: none;
}

.button.noop {
    pointer-events: none;
}

.button.footer {
    font-size: var(--font-size-xsmall);
    color: var(--beige_hover);
    line-height: 150%;
    height: 24px;
    padding:4px;
}

.div-flstadd {
    display: flex;
    justify-content: right;
}

/* specific button styles */
/* button primary - blue */
/* Most of the times, primary button uses 'blue', but the color is decided in web.pl --EMM */

.button.blue {
    color: var(--white);
    background-color: var(--blue);
    border: var(--blue);
}

.button.blue.emul,
.button.blue:hover {
    color: var(--white);
    background-color: var(--blue_hover);
    border: var(--blue_hover);
}

.button.blue:active {
    color: var(--white);
    background-color: var(--blue_dark);
    border: var(--blue_dark);
}

/* button regular - beige */
/* Most of the times, regular buttons uses 'beige', but the color is decided in web.pl --EMM */

.button.beige {
    color: var(--blue);
    background-color: var(--beige);
    border: var(--beige);
}

.button.beige.emul,
.button.beige:hover {
    color: var(--blue);
    background-color: var(--beige_hover);
    border: var(--beige_hover);
}

.button.beige:active {
    color: var(--blue);
    background-color: var(--beige_dark);
    border: var(--beige_dark);
}

/* button white */
.button.white {
    color: var(--blue);
    background-color: var(--white);
    border: var(--white);
    justify-content: left; /* left align in menu */
}

.button.white.emul,
.button.white:hover {
    color: var(--blue);
    background-color: var(--beige);
    border: var(--beige);
}

.button.white:active {
    color: var(--blue);
    background-color: var(--beige_hover);
    border: var(--beige_hover);
}

/* transparent button */
.button.transparent {
    color: var(--blue);
    background-color: transparent;
    border: transparent;
}

.button.transparent.emul,
.button.transparent:hover {
    color: var(--blue);
    background-color: #ffffff55;
    border:  #ffffff55;
}

.button.inherit-color {
    background-color: inherit;
    border: inherit;
}

.button.focused {
    color: var(--white);
    background-color: var(--signal);
    border: var(--signal);
}

/* uncomment orange color to facilitate debugging */
.emul {
    /* color: var(--white); */
    /* border: var(--orange); */
    position: relative;
}

.emul.clicked::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -12px; /* Avoid to hide the text */
    width: 24px;
    height: 24px;
    background: url("../icons/mouse-cursor-arrow-fixed.svg") no-repeat center/contain;
    pointer-events: none; /* Let clicks pass through */
}

/* special buttons */
.button.text-unit {
    width: 100%;
    min-width: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: var(--beige_dark);
}

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

.button.multiline {
    white-space: normal;
    text-align: left;
    height: fit-content;
    padding-top: 8px;
    padding-bottom: 8px;
    align-items: flex-start;
}

/**** TODO replace 'button-combobox' with 'button-submenu' in prolog ****/
.button-submenu, .button-combobox {
    width: 100%;
    min-width: 80px;
    padding-right: 0; /* override right margin */
    display: flex;
    flex-direction: row;
    justify-content: space-between !important;
}

.button-submenu-left, .button-menu-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* Buttons END */

.form-text {
    /* arbitrary, to avoid horizontal clipping on some pages */ /* ??? */
    overflow: auto;
    text-align: left;
}

.form-label {
    padding: 0px;
    vertical-align: baseline;
}

/* .formc-label { */
/*     display: block; */
/*     margin-bottom: 4px; */
/* } */

/* Tool bar */
.tool-bar, .form-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
}

.tool-bar {
    gap: 8px;
    align-items: center;
}

.row-terms {
    padding: 0px;
    gap: 0px;
    align-items: baseline;
}

/* form-{table,row,col}: classes are used by form_page items or list of items
   For more details check form_field//3 in web(web) module --EMM
 */

.form-row {
    padding: 0px 8px;
    gap: 8px;
}

.form-col, .login-cols {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
}

.tool-bar.button-list {
    padding: 0px 8px;
    gap: 16px;
    justify-content: right;
}

.form-col {
    padding: 0px 8px;
}

.tool-bar.white {
    gap: 0;
}
/* tool bar END */

/* Note that not all form-control are inputs.  For instance, customized ways to
   input things like File uplodads, and the soon to be implemented list of
   objects (components) are more sophisticated than a simple input, but belongs
   to the form-control class --EMM
*/

/* input field */
input, textarea, .form-control {
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    min-width: 80px;
    padding: 0 8px;
    border: none;
    outline: 1px solid var(--beige);
    color: var(--blue);
    flex-grow: 4;
}

input {
    height: 40px;
    position: relative;
    z-index: 1;
}

/* Remove arrows/spinners in input.number[type=number] */

/* Chrome, Safari, Edge, Opera */
input.number::-webkit-outer-spin-button,
input.number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input.number[type=number] {
  -moz-appearance: textfield;
}

textarea, .input-wrap {
    min-height: 40px;
}

.form-control-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-grow: 4;
}

.form-control-table {
    width: 100%;
    box-sizing: border-box;
    min-width: 80px;
    border: none;
    margin: 0;
}

.form-control-table > tbody > tr > td {
    vertical-align: top;
}

.centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px 12px 8px 12px;
}

input.emul, textarea.emul, .form-control.emul,
input:hover, textarea:hover, .form-control:hover {
    border: none;
    outline: 1px solid var(--beige_dark);
}

input:focus, textarea:focus, .form-control:focus {
    border: none;
    outline: 1px solid var(--signal);
    box-shadow: inset 0 0 4px 0 var(--lightblue_hover);
}

input::placeholder, textarea::placeholder, .form-control::placeholder {
    color: var(--beige_hover);
}

input.error, textarea.error, .form-control.error {
    border: none;
    outline: 1px solid var(--orange);
    box-shadow: inset 0 0 4px 0 var(--orange);
}

input.iconleft {
    background-repeat: no-repeat;
    padding-left: 32px;
    background-position-y: center;
    background-position-x: 4px;
}

/* input field temp adaptation for radio and checkbox styling */
/* to be replaced with 'check' buttons */
input[type="radio"], input[type="checkbox"] {
    min-width: 16px;
    width: 16px;
    height: 16px;
    outline: 0px;
    vertical-align: text-top;
}

/* input override for slider */
input[type=range], input[type=range]:hover, input[type=range]:focus {
    outline: 0px solid var(--white);
    border: none;
    box-shadow: inset 0 0 0 0 var(--white);
    padding: 0;
}

.check-group, .radio-group { /* list of radio's, checkboxes */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 0;
    padding-bottom: 0;
}

input.iconleft { /* adds icon to input field (e.g. for search) */
    background-repeat: no-repeat;
    padding-left: 32px;
    background-position-y: center;
    background-position-x: 4px;
}
/* input field END */

/* Q+A box */
.QA-container {
    margin: auto;
    width: fit-content;
    max-height: calc(100vh - 210px); /* very fragile, needs to be tweaked if something changes */
    background-color: var(--white);
    border-radius: 8px;
    padding-bottom: 12px;
    overflow: visible;

    /* me as flex container */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;

    /* me as flex cell */
    flex-shrink: 0;
}

.QA-header {
    color: var(--blue);
    background-color: var(--beige);
    width: 100%;

    box-sizing: border-box; /* padding included in the 100% width */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding: 8px 12px;
}

.QA-header .tool-bar {
    min-width: fit-content;
    flex-wrap: nowrap;
}

.QA-toolbar {
    width: 100%;
    padding: 8px 12px;
    box-sizing: border-box; /* padding included in the 100% width */
}

.QA-header-left { /* Prosyn logo + question left aligned */
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
    min-height: 40px;
    margin-top: 8px;
}

.QA-footer {
    width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0px 12px 8px 12px;
}

.QA-footer .footer-tool-bars {
    width: 100%;
    display: flex;
    gap: 64px;
    justify-content: space-between;
    align-items: flex-start;
}

.QA-footer .tool-bar.right {
    flex-wrap: nowrap;
}

.QA-tab {
    color: var(--beige_dark);
    display: flex;
    padding: 8px 12px;
}

.QA-tab.focused {
    color: var(--blue);
}

.QA-history {
    opacity: 30%;
}

.QA-resize-wrapper {
    min-width: 460px !important;
    overflow: hidden;
    resize: horizontal;
}

.QA-table-wrapper {
    padding: 0 16px;
}
/* Q+A box END */

/* banner */
.banner {
    width: 100%;
    padding: 8px 12px;
    box-sizing: border-box; /* padding included in the 100% width */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
}

.banner .left {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
}

.banner.error {
    background-color: var(--lightorange);
    color: var(--orange_hover);
}

.banner.warn {
    background-color: var(--lightyellow);
    color: var(--yellow_hover);
}

.banner.info {
    background-color: var(--lightblue);
    color: var(--signal);
}

.banner.status {
    background-color: var(--lightblue);
    color: var(--blue);
}

.banner-inner {
    display: flex;
    flex-direction: column;
}

/* banner END */

/* tooltip */
.tooltip {
    position: relative;
    /*display: inline-block;*/
}

.tooltip .tooltiptext {
    visibility: hidden;
    background-color: var(--blue_hover);
    color: var(--white);
    text-align: center;
    white-space: normal;
    border-radius: 6px;
    padding: 8px 8px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    white-space: nowrap; /* Prevent the tooltip from breaking into multiple lines */
    width: fit-content; /* Ensures the tooltip width fits its content */
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);

    /* Fade in tooltip */
    opacity: 0;     /* Set to 0 after debugging */
    transition: opacity 300ms;
}

.tooltip .tooltipimage {
    visibility: hidden;
    background-color: var(--blue_hover);
    color: var(--white);
    text-align: center;
    white-space: normal;
    border-radius: 4px;
    padding: 2px 2px;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    white-space: nowrap; /* Prevent the tooltip from breaking into multiple lines */
    width: fit-content; /* Ensures the tooltip width fits its content */
    bottom: calc(100% + 0px);
    left: 50%;
    transform: translateX(-50%);
    text-indent: 0; /* overwrite in td/tr/table? */

    /* Fade in tooltip */
    opacity: 0;     /* Set to 0 after debugging */
    transition: opacity 300ms;
}

.tooltip .above {
    bottom: calc(100% + 4px);
    top: auto;
}

.tooltip .below {
    bottom: auto;
    top: 44px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--blue_hover) transparent transparent transparent;
}

.tooltip .tooltipimage::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border-width: 5px;
    border-style: solid;
    border-color: var(--blue_hover) transparent transparent transparent;
}

.tooltip .above::after {
/*  top: -10px;
    border-color: transparent transparent var(--blue_hover) transparent; */
}
.tooltip .below::after {
    top: -10px;
    border-color: transparent transparent var(--blue_hover) transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip:hover .tooltipimage {
    visibility: visible;
    opacity: 1;
}

.tooltip .large {
max-width: 360px;
width: max-content;
white-space: normal;
}


/* tooltip END */




/* drop down menu */
.menu, .menu-combobox {
    position: absolute;
    z-index: 2;
    /* display: flex; */
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 2px;
    padding: 8px;
    background-color: var(--white);
    border-radius: 8px;
    box-shadow: 0 6px 12px #27337544;
}

.menu-combobox {
    overflow: scroll;
}
/* drop down menu END */



/* icons */
.icon {
    display: block;
    height: 24px;
    width: 24px;
    min-width: 24px;
    background-size: 24px;
}

.icon-large {
    display: block;
    height: 44px;
    width: 44px;
    min-width: 44px;
    background-size: 44px;
}

.icon-wide {
    height: 24px;
    width: 32px;
    min-width: 32px;
    background-size: 32px;
}

.icon-logo-prosyn-full {
    top: 8px;
    left: 8px;
    width: 132px;
    height: 40px;
    background-image: url("../icons/logo_Prosyn_full.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    text-decoration: none;
}

.icon-applicability { background-image: url("../icons/icon-applicability.svg"); }
.icon-applicability-white { background-image: url("../icons/icon-applicability-white.svg"); }
.icon-arrow-down { background-image: url("../icons/icon-arrow-down.svg"); }
.icon-arrow-down-white { background-image: url("../icons/icon-arrow-down-white.svg"); }
.icon-arrow-next { background-image: url("../icons/icon-arrow-next.svg"); }
.icon-arrow-next-white { background-image: url("../icons/icon-arrow-next-white.svg"); }
.icon-arrow-previous { background-image: url("../icons/icon-arrow-previous.svg"); }
.icon-arrow-previous-white { background-image: url("../icons/icon-arrow-previous-white.svg"); }
.icon-arrow-up { background-image: url("../icons/icon-arrow-up.svg"); }
.icon-arrow-up-white { background-image: url("../icons/icon-arrow-up-white.svg"); }
.icon-branch { background-image: url("../icons/icon-branch.svg"); }
.icon-branch-white { background-image: url("../icons/icon-branch-white.svg"); }
.icon-check { background-image: url("../icons/icon-check.svg"); }
.icon-check-signal { background-image: url("../icons/icon-check-signal.svg"); }
.icon-check-white { background-image: url("../icons/icon-check-white.svg"); }
.icon-close { background-image: url("../icons/icon-close.svg"); }
.icon-close-white { background-image: url("../icons/icon-close-white.svg"); }
.icon-close-beige { background-image: url("../icons/icon-close-beige.svg"); }
.icon-close-beige:hover { background-image: url("../icons/icon-close.svg"); }
.icon-collapse { background-image: url("../icons/icon-collapse.svg"); }
.icon-collapse-white { background-image: url("../icons/icon-collapse-white.svg"); }
.icon-copy { background-image: url("../icons/icon-copy.svg"); }
.icon-copy-white { background-image: url("../icons/icon-copy-white.svg"); }
.icon-costing { background-image: url("../icons/icon-costing.svg"); }
.icon-costing-white { background-image: url("../icons/icon-costing-white.svg"); }
.icon-delete { background-image: url("../icons/icon-delete.svg"); }
.icon-delete-white { background-image: url("../icons/icon-delete-white.svg"); }
.icon-down { background-image: url("../icons/icon-down.svg"); }
.icon-down-white { background-image: url("../icons/icon-down-white.svg"); }
.icon-down-beige { background-image: url("../icons/icon-down-beige.svg"); }
.icon-edit { background-image: url("../icons/icon-edit.svg"); }
.icon-edit-white { background-image: url("../icons/icon-edit-white.svg"); }
.icon-empty { background-image: url("../icons/icon-empty.svg"); }
.icon-evaluation { background-image: url("../icons/icon-evaluation.svg"); }
.icon-evaluation-white { background-image: url("../icons/icon-evaluation-white.svg"); }
.icon-expand { background-image: url("../icons/icon-expand.svg"); }
.icon-expand-white { background-image: url("../icons/icon-expand-white.svg"); }
.icon-fouling { background-image: url("../icons/icon-fouling.svg"); }
.icon-fouling-white { background-image: url("../icons/icon-fouling-white.svg"); }
.icon-help { background-image: url("../icons/icon-help.svg"); }
.icon-help-white { background-image: url("../icons/icon-help-white.svg"); }
.icon-home { background-image: url("../icons/icon-home.svg"); }
.icon-home-white { background-image: url("../icons/icon-home-white.svg"); }
.icon-info { background-image: url("../icons/icon-info.svg"); }
.icon-info-white { background-image: url("../icons/icon-info-white.svg"); }
.icon-warn,  .icon-info-yellow { background-image: url("../icons/icon-info-yellow.svg"); }
.icon-error, .icon-info-orange { background-image: url("../icons/icon-info-orange.svg"); }
.icon-input-stream { background-image: url("../icons/icon-input-stream.svg"); }
.icon-input-stream-white { background-image: url("../icons/icon-input-stream-white.svg"); }
.icon-kebap { background-image: url("../icons/icon-kebap.svg"); }
.icon-kebap-white { background-image: url("../icons/icon-kebap-white.svg"); }
.icon-left  { background-image: url("../icons/icon-left.svg"); }
.icon-left-white  { background-image: url("../icons/icon-left-white.svg"); }
.icon-link { background-image: url("../icons/icon-link.svg"); }
.icon-link-white { background-image: url("../icons/icon-link-white.svg"); }
.icon-lock { background-image: url("../icons/icon-lock.svg"); }
.icon-lock-white { background-image: url("../icons/icon-lock-white.svg"); }
.icon-lock-orange { background-image: url("../icons/icon-lock-orange.svg"); }
.icon-module { background-image: url("../icons/icon-module.svg"); }
.icon-module-white { background-image: url("../icons/icon-module-white.svg"); }
.icon-pdf { background-image: url("../icons/icon-pdf.svg"); }
.icon-pdf-white { background-image: url("../icons/icon-pdf-white.svg"); }
.icon-plus { background-image: url("../icons/icon-plus.svg"); }
.icon-plus-beige { background-image: url("../icons/icon-plus-beige.svg"); }
.icon-plus-white { background-image: url("../icons/icon-plus-white.svg"); }
.icon-project { background-image: url("../icons/icon-project.svg"); }
.icon-project-white { background-image: url("../icons/icon-project-white.svg"); }
.icon-rating { background-image: url("../icons/icon-rating.svg"); }
.icon-rating-white { background-image: url("../icons/icon-rating-white.svg"); }
.icon-right { background-image: url("../icons/icon-right.svg"); }
.icon-right-white { background-image: url("../icons/icon-right-white.svg"); }
.icon-redo { background-image: url("../icons/icon-redo.svg"); }
.icon-redo-white { background-image: url("../icons/icon-redo-white.svg"); }
.icon-results { background-image: url("../icons/icon-results.svg"); }
.icon-results-white { background-image: url("../icons/icon-results-white.svg"); }
.icon-right { background-image: url("../icons/icon-right.svg"); }
.icon-right-white { background-image: url("../icons/icon-right-white.svg"); }
.icon-settings { background-image: url("../icons/icon-settings.svg"); }
.icon-settings-white { background-image: url("../icons/icon-settings-white.svg"); }
.icon-tools { background-image: url("../icons/icon-tools.svg"); }
.icon-tools-white { background-image: url("../icons/icon-tools-white.svg"); }
.icon-undo { background-image: url("../icons/icon-undo.svg"); }
.icon-undo-white { background-image: url("../icons/icon-undo-white.svg"); }
.icon-up { background-image: url("../icons/icon-up.svg"); }
.icon-up-white { background-image: url("../icons/icon-up-white.svg"); }
.icon-user { background-image: url("../icons/icon-user.svg"); }
.icon-user-white { background-image: url("../icons/icon-user-white.svg"); }
.icon-waterstream { background-image: url("../icons/icon-waterstream.svg"); }
.icon-waterstream-white { background-image: url("../icons/icon-waterstream-white.svg"); }

.icon-unchecked-white { background-image: url("../icons/icon-unchecked-white.svg"); }
.icon-checked-white { background-image: url("../icons/icon-checked-white.svg"); }
.icon-unradioed-white { background-image: url("../icons/icon-unradioed-white.svg"); }
.icon-radioed-white { background-image: url("../icons/icon-radioed-white.svg"); }

.icon-gen-ai { background-image: url("../icons/icon-gen-ai.svg"); }
.icon-gen-ai-white { background-image: url("../icons/icon-gen-ai-white.svg"); }
.icon-pqa-ai { background-image: url("../icons/icon-pqa-ai.svg"); }
.icon-pqa-ai-white { background-image: url("../icons/icon-pqa-ai-white.svg"); }
/* FIXME some duplicate */
.icon-llm-claude { background-image: url("../icons/icon-llm-claude.svg"); }
.icon-llm-deepseek { background-image: url("../icons/icon-llm-deepseek.svg"); }
.icon-llm-gemini { background-image: url("../icons/icon-llm-gemini.svg"); }
.icon-llm-openai { background-image: url("../icons/icon-llm-chatgpt.svg"); }
.icon-llm-chatgpt { background-image: url("../icons/icon-llm-chatgpt.svg"); }
.icon-llm-gpt { background-image: url("../icons/icon-llm-chatgpt.svg"); }
.icon-llm-gpt_oss { background-image: url("../icons/icon-llm-gpt_oss.svg"); }
.icon-llm-gpt-oss { background-image: url("../icons/icon-llm-gpt_oss.svg"); }
.icon-llm-grok { background-image: url("../icons/icon-llm-grok.svg"); }
.icon-llm-llama { background-image: url("../icons/icon-llm-llama.svg"); }
.icon-llm-mistral { background-image: url("../icons/icon-llm-mistral.svg"); }
.icon-llm-sonar { background-image: url("../icons/icon-llm-sonar.svg"); }
.icon-llm-perplexity { background-image: url("../icons/icon-llm-sonar.svg"); }
.icon-dev-only { background-image: url("../icons/icon-dev-only.svg"); }
.icon-dev-only-white { background-image: url("../icons/icon-dev-only-white.svg"); }
.icon-pdc-only { background-image: url("../icons/icon-pdc-only.svg"); }
.icon-pdc-only-white { background-image: url("../icons/icon-pdc-only-white.svg"); }
.icon-prosyn { background-image: url("../icons/icon-prosyn.svg"); }
.icon-prosyn-white { background-image: url("../icons/icon-prosyn-white.svg"); }
.icon-prosyn-beige { background-image: url("../icons/icon-prosyn-beige.svg"); }

.icon-kb-absorption         { background-image: url("../icons/icon-kb-absorption.svg"); }
.icon-kb-administration     { background-image: url("../icons/icon-kb-administration.svg"); }
.icon-kb-adsorption         { background-image: url("../icons/icon-kb-adsorption.svg"); }
.icon-kb-aspen-module       { background-image: url("../icons/icon-kb-aspen-module.svg"); }
.icon-kb-azeotropes         { background-image: url("../icons/icon-kb-azeotropes.svg"); }
.icon-kb-teagpert           { background-image: url("../icons/icon-kb-teagpert.svg"); }      /* TBD: rename to azeotropic-distillation */
.icon-kb-centrifugation     { background-image: url("../icons/icon-kb-centrifugation.svg"); }
.icon-kb-column-internals   { background-image: url("../icons/icon-kb-column-internals.svg"); }
.icon-kb-complex-columns    { background-image: url("../icons/icon-kb-complex-columns.svg"); }
.icon-kb-condensation       { background-image: url("../icons/icon-kb-condensation.svg"); }
.icon-kb-crystallization    { background-image: url("../icons/icon-kb-crystallization.svg"); }
.icon-kb-decanting          { background-image: url("../icons/icon-kb-decanting.svg"); }
.icon-kb-designer           { background-image: url("../icons/icon-kb-designer.svg"); }      /* TBD: rename to reactive-distillation-designer */
.icon-kb-distillation       { background-image: url("../icons/icon-kb-distillation.svg"); }
.icon-kb-drying             { background-image: url("../icons/icon-kb-drying.svg"); }
.icon-kb-dwsim-module       { background-image: url("../icons/icon-kb-dwsim-module.svg"); }
.icon-kb-fermentation       { background-image: url("../icons/icon-kb-fermentation.svg"); }
.icon-kb-filtration         { background-image: url("../icons/icon-kb-filtration.svg"); }
.icon-kb-flotation          { background-image: url("../icons/icon-kb-flotation.svg"); }
.icon-kb-rekpert            { background-image: url("../icons/icon-kb-rekpert.svg"); }       /* TBD: rename to distillation */
.icon-kb-extraction         { background-image: url("../icons/icon-kb-extraction.svg"); }
.icon-kb-heatpert           { background-image: url("../icons/icon-kb-heatpert.svg"); }      /* TBD: rename to heat-integration */
.icon-kb-hen                { background-image: url("../icons/icon-kb-hen.svg"); }           /* TBD: rename to heat-exchange-networks */
.icon-kb-manager            { background-image: url("../icons/icon-kb-manager.svg"); }
.icon-kb-med                { background-image: url("../icons/icon-kb-med.svg"); }           /* TBD: rename to multi-effect-distillation */
.icon-kb-membrane-reactors  { background-image: url("../icons/icon-kb-membrane-reactors.svg"); }
.icon-kb-membranes          { background-image: url("../icons/icon-kb-membranes.svg"); }
.icon-kb-literature         { background-image: url("../icons/icon-pqa-ai.svg"); }           /* for now reuse this one */
.icon-kb-playground         { background-image: url("../icons/icon-kb-playground.svg"); }
.icon-kb-pressure-flash     { background-image: url("../icons/icon-kb-pressure-flash.svg"); }
.icon-kb-process-synthesis  { background-image: url("../icons/icon-kb-process-synthesis.svg"); }
.icon-kb-properties         { background-image: url("../icons/icon-kb-properties.svg"); }
.icon-kb-reactive-dist      { background-image: url("../icons/icon-kb-reactive-dist.svg"); } /* TBD: rename to reactive-distillation */
.icon-kb-reactive-sep       { background-image: url("../icons/icon-kb-reactive-sep.svg"); }  /* TBD: rename to reactive-separation */
.icon-kb-reactors           { background-image: url("../icons/icon-kb-reactors.svg"); }
.icon-kb-safety             { background-image: url("../icons/icon-kb-safety.svg"); }
.icon-kb-sedimentation      { background-image: url("../icons/icon-kb-sedimentation.svg"); }
.icon-kb-separation-selection { background-image: url("../icons/icon-kb-separation-selection.svg"); }
.icon-kb-separation-sequence  { background-image: url("../icons/icon-kb-separation-sequence.svg"); }
.icon-kb-solute-selection-hansen    { background-image: url("../icons/icon-kb-solute-selection-hansen.svg"); }
.icon-kb-solvent-selection-hansen   { background-image: url("../icons/icon-kb-solvent-selection-hansen.svg"); }
.icon-kb-solvent-replacement-hansen { background-image: url("../icons/icon-kb-solvent-replacement-hansen.svg"); }
.icon-kb-solvents           { background-image: url("../icons/icon-kb-solvents.svg"); }
.icon-kb-solvents-hansen    { background-image: url("../icons/icon-kb-solvents-hansen.svg"); }
.icon-kb-solvents-lca       { background-image: url("../icons/icon-kb-solvents-lca.svg"); }
.icon-kb-solvents-berg      { background-image: url("../icons/icon-kb-solvents-berg.svg"); }
.icon-kb-squeeze-xps        { background-image: url("../icons/icon-kb-squeeze-xps.svg"); }
.icon-kb-stream             { background-image: url("../icons/icon-kb-stream.svg"); }        /* TBD: rename to stream-conditions */
.icon-kb-stripping          { background-image: url("../icons/icon-kb-stripping.svg"); }
.icon-kb-wastewater         { background-image: url("../icons/icon-kb-wastewater.svg"); }
.icon-kb-process-water      { background-image: url("../icons/icon-kb-process-water.svg"); }
.icon-kb-wp                 { background-image: url("../icons/icon-kb-wp.svg"); }            /* TBD: rename to heatpumps */
.icon-kb-zwt                { background-image: url("../icons/icon-kb-zwt.svg"); }           /* TBD: rename to heat-exchanger or intermediate-heat-exchangers */
.icon-kb-flowsheeting       { background-image: url("../icons/icon-kb-flowsheeting.svg"); }
.icon-kb-size-and-cost      { background-image: url("../icons/icon-kb-size-and-cost.svg"); }


.ani-kb-heatpumps           { background-image: url("../icons/ani-kb-heatpumps.svg"); }
.ani-kb-process-synthesis   { background-image: url("../icons/ani-kb-process-synthesis.svg"); }
.ani-kb-reactive-separation { background-image: url("../icons/ani-kb-reactive-separation.svg"); }
.ani-kb-separation-sequence { background-image: url("../icons/ani-kb-separation-sequence.svg"); }
.ani-kb-stream-conditions   { background-image: url("../icons/ani-kb-stream-conditions.svg"); }

/* **********************************************************  */
/* **********************************************************  */
/* LEGACY CHECK - Below items seem special case and to be
   replaced by common CSS classes as in list above  ***********/
/* **********************************************************  */
/* **********************************************************  */


/**** TODO Double check if all these button overrides and special cases are needed ****/
/**** It seems these can be achieved by replacing specific classes with common button classes in Prolog ****/

/* button, form-control-unit and labels must have the same dimensions *!*/
/*.button, .form-control-unit {*/
/*    border-radius: 4px;*/
/*    height: 40px;*/
/*    min-height: 40px;*/
/*    min-width: 80px;*/
/*    padding: 0 12px;*/
/*    margin: 0;*/
/*    !*overflow: clip;*!*/
/*    text-overflow: ellipsis;*/
/*    white-space: nowrap;*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    align-items: center;*/
/*    !* justify-content: center; *!*/
/*    gap: 6px;*/
/*} !* button also used for units *!*/

/*!* Any element that occupies a cell in a form *!*/
/*.form-element {*/
/*    border-radius: 4px;*/
/*    height: 40px;*/
/*    min-height: 40px;*/
/*    min-width: 80px;*/
/*    padding: 0 12px;*/
/*    margin: 0;*/
/*    !*overflow: clip;*!*/
/*    text-overflow: ellipsis;*/
/*    white-space: nowrap;*/
/*    display: flex;*/
/*    !* flex-direction: row; *!*/
/*    align-items: center;*/
/*    gap: 6px;*/
/*}*/

/*.button:hover, .form-control-unit:hover  {*/
/*    cursor: pointer;*/
/*}*/

/* button-list-r and button-list-c are used to show buttons in a column or in a row --EMM */

.button-list-r {
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px;
}

.divider {
    height: 1px;
    width: 100%;
    display: flex;
    background-color: var(--beige);
}

.button-list-r .divider, .tool-bar > .divider {
    width: 1px;
    height:auto;
    min-height: 40px;
    display: flex;
    background-color: var(--beige);
}

.button-list-c {
    width:100%;
    display:flex;
    flex-direction:column;
    gap:8px;
}

/*.button-list-c .divider {*/
/*    height: 1px;*/
/*    width: 100%;*/
/*    display: flex;*/
/*    background-color: var(--beige);*/
/*}*/

/*.button-kebap {*/
/*    width: 100%;*/
/*}*/

/*.menu-combobox .divider {*/
/*    height: 1px;*/
/*    width: 100%;*/
/*    display: flex;*/
/*    background-color: var(--beige);*/
/*    margin: 0;*/
/*}*/


/*!* beige button *!*/
/*.button.regular, .form-control-unit {*/
/*    color: var(--blue);*/
/*    background-color: var(--beige);*/
/*    border: var(--beige);*/
/*}*/

/*.button.regular:hover, .form-control-unit:hover {*/
/*    color: var(--blue);*/
/*    background-color: var(--beige_hover);*/
/*    border: var(--beige_hover);*/
/*}*/

/*.button.regular:active, .form-control-unit:active {*/
/*    color: var(--blue);*/
/*    background-color: var(--beige_dark);*/
/*    border: var(--beige_dark);*/
/*}*/

/*.button-ppmenu {*/
/*    padding-right: 0; !* override right margin *!*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    justify-content: space-between !important;*/
/*}*/

/*.button > input {*/
/*    height: 24px;*/
/*    width: 24px;*/
/*    margin: 0px 0px;*/
/*}*/

/*.button > label {*/
/*    display: block;*/
/*    width: 100%;*/
/*    margin: 0px 0px;*/
/*    text-align: left;*/
/*}*/






/**** TODO Below list seem to be legacy container classes ****/
/**** TODO Double check if still needed or can be removed ****/
/*.windows {*/
/*    height: 100%;*/
/*    left: 0px;*/
/*    right: 0px;*/
/*    overflow: scroll;*/
/*}*/

/*.window {*/
/*    height: 100%;*/
/*    left: 0px;*/
/*    right: 0px;*/
/*    overflow: scroll;*/
/*}*/

/*.prforms {*/
/*    height: 100%;*/
/*    left: 0px;*/
/*    right: 0px;*/
/*    overflow: scroll;*/
/*}*/

/*.prform {*/
/*    height: 100%;*/
/*    left: 0px;*/
/*    right: 0px;*/
/*    overflow: hidden; !* force no scrollbars at this level *!*/
/*}*/

/*.button-panel {*/
/*    left: 0px;*/
/*    height: 100%;*/
/*    overflow: scroll;*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    flex-wrap: wrap;*/
/*    justify-content: center;*/
/*    gap: 8px;*/
/*}*/

/*!* .form-panel { *!*/
/*!*     left: 240px; *!*/
/*!*     height: -webkit-fill-available; *!*/
/*!* } *!*/

/*!* .form-panel .form-panel { /\* not so elegant workaround for nested panels *\/ *!*/
/*!*     position: relative; *!*/
/*!*     left: 0px; *!*/
/*!* } *!*/

/*!* control group layouts > vertical rather than horizontal  *!*/
/*!* .control-label { *!*/
/*!*     font-weight: 500; *!*/
/*!*     margin-top: 8px; *!*/
/*!*     margin-bottom: 8px; *!*/
/*!* } *!*/






/**** TODO Below font styles shouldn't be needed anymore  ****/
/**** TODO Double check if still needed or can be removed ****/
.title-txt {
   text-align: center;
}

/*.title-txt > label {*/
/*    font-weight: bold;*/
/*}*/

/*.fixed-txt > label,*/
/*.label-txt > label {*/
/*    font-weight: normal;*/
/*}*/

/*label {*/
/*    margin-bottom:0px;*/
/*    font-weight: normal;*/
/*}*/

/*.protocol {*/
/*    position: absolute;*/
/*    height: 100%;*/
/*    width: 100%;*/
/*    overflow-y: auto;*/
/*}*/

/*.summary {*/
/*    position: absolute;*/
/*    height: 100%;*/
/*    width: 100%;*/
/*    overflow-y: auto;*/
/*}*/



/**** TODO check if these are required - as it should be covered by <input> class *****/
/*.form-control {*/
/*    border-radius: 4px;*/
/*    min-height: 40px;*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    min-width: 80px;*/
/*    padding: 8px 8px;*/
/*    border: 1px solid var(--beige);*/
/*    box-shadow: inset 0 0 0px 0 transparent;*/
/*    color: var(--blue);*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

.control-input-unit {
    display: flex;
    gap: 8px;
}

.unit-choice {
    flex-grow: 1;
}

/*.form-control:hover {*/
/*    outline: 1px solid var(--beige_dark);*/
/*}*/

/*.form-control:focus {*/
/*    border: none;*/
/*    outline: 1px solid var(--signal);*/
/*    box-shadow: inset 0 0 4px 0 var(--lightblue_hover);*/
/*}*/

/*!* input fields *!*/
/*.form-fieldc {*/
/*    border-radius: 4px;*/
/*    height: 40px;*/
/*    width: 100%;*/
/*    box-sizing: border-box;*/
/*    min-width: 80px;*/
/*    padding: 8px 8px;*/
/*    border: 1px solid var(--beige);*/
/*    box-shadow: inset 0 0 0px 0 transparent;*/
/*    color: var(--blue);*/
/*}*/

/*.form-fieldc:hover {*/
/*    outline: 1px solid var(--beige_dark);*/
/*    border: 1px solid var(--beige_dark);*/
/*}*/

/*.form-fieldc:focus {*/
/*    border: none;*/
/*    outline: 1px solid var(--signal);*/
/*    box-shadow: inset 0 0 4px 0 var(--lightblue_hover);*/
/*}*/

/*.form-fieldc::placeholder {*/
/*    color: var(--beige_hover);*/
/*}*/

.alert-danger, .alert-danger:focus {
   color: var(--blue);
   border: 1px solid var(--orange);
   outline: var(--orange);
   box-shadow: inset 0 0 4px 0 var(--orange);
}
/*!* input field END *!*/

/* DASHBOARD items are included in the UI kit, and foreseen to be used for the project list */
/*!* Dashboard *!*/

.kb-selector-table > tbody > tr > td {
    vertical-align: text-top;
}

.tr-field-list > td {
    vertical-align: top;
}

.tr-field-list > td:first-child {
    padding: 18px 0px 0px 0px;
}

.dashboard-table {
    display: table;
}

.dashboard-table > tbody > tr,
.dashboard-item {
    background-color: var(--white);
    transition: 0.15s;
}

.dashboard-table > tbody > tr > td {
    vertical-align: middle;
}

.dashboard-table > tbody > tr:hover,
.dashboard-item:hover {
    background-color: var(--beige);
    cursor: pointer;
}

.dashboard-table > tbody > tr:hover.disabled {
    cursor: default;
}

.dashboard-table > tbody > tr.disabled > td > .text-label,
.dashboard-table > tbody > tr.disabled > td > div > .button,
.dashboard-table > tbody > tr.disabled > td > .bold {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/*!* Dashboard END*!*/

/* LEFT HAND PANEL - The former left hand panel is replaced with 'Results' in the 'page-main-left' area */
/* Below CSS should not be relevant anymore */

/*!* Report / help / info panel *!*/
/* panel-header still used in right panel --EMM */
.panel-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box; /* padding included in the 100% width */
    gap: 12px;
    padding: 0px 4px 0px 0px;
    align-items: center;
}

.panel-content, .info-text {
   padding: 16px 0;
   overflow: auto;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.panel-footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box; /* padding included in the 100% width */
    padding: 16px 4px 0px 0px;
    align-items: center;
}

/* .panel-content-pane { */
/*    background-color: var(--wallpaper); */
/*    padding: 8px; */
/*    border-radius: 4px; */
/* } */
/*!* Report / help / info panel END *!*/

/*.form-group {*/
/*    margin-bottom: 1px;*/
/*}*/

/* ************************************************  */
/* ************************************************  */
/* BACK UP - Seems not to be in use in Prosyn (yet)  */
/* ************************************************  */
/* ************************************************  */

/* KNOWLEDGE BASE SELECTION is included in the UI kit, and foreseen to be used for custom list for knowledge base overview */
/*!* Select knowledge base *!*/
/*.kb-selection-box {*/
/*    display: flex;*/
/*    flex-direction: row;*/
/*    flex-wrap: nowrap;*/
/*    align-items: flex-start;*/
/*    gap: 24px;*/
/*    padding: 0 24px;*/
/*}*/

/*.kb-selection-column {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    flex-wrap: nowrap;*/
/*    align-items: flex-start;*/
/*    gap: 0;*/
/*}*/

/*.indent {*/
/*    margin-left: 32px;*/
/*}*/
/*!* Select knowledge base END *!*/




/* TABS are included in the UI kit, and foreseen to be used for segmenting output in the protocol */
/*!* tabs *!*/
.tab {
   height: 40px;
   min-width: 80px;
   padding: 0 12px;
   font-weight: 500;
   overflow: clip;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--blue);
   background-color: var(--white);
   border: none;
   border-bottom: 4px solid var(--lightblue);
}

/*.tab-vertical {*/
/*    border: none;*/
/*    border-left: 4px solid var(--lightblue);*/
/*}*/

.tab:hover {
   cursor: pointer;
   color: var(--signal);
   border-bottom: 4px solid var(--lightblue_hover);
}

/*.tab-vertical:hover {*/
/*    cursor: pointer;*/
/*    color: var(--signal);*/
/*    border: none;*/
/*    border-left: 4px solid var(--lightblue_hover);*/
/*}*/

.tab:active {
   color: var(--signal);
   border-bottom: 4px solid var(--signal);
}

/*.tab-vertical:active {*/
/*    color: var(--signal);*/
/*    border: none;*/
/*    border-left: 4px solid var(--signal);*/
/*}*/

.tab.focused {
   color: var(--signal);
   border-bottom: 4px solid var(--signal);
}

/*.tab-vertical.focused {*/
/*    color: var(--signal);*/
/*    border: none;*/
/*    border-left: 4px solid var(--signal);*/
/*}*/

.tab.disabled {
   color: var(--blue);
   background-color: var(--white);
   border-bottom: 4px solid var(--lightblue);
   opacity: 20%;
}

/*.tab-vertical.disabled {*/
/*    color: var(--blue);*/
/*    background-color: var(--white);*/
/*    border: none;*/
/*    border-left: 4px solid var(--lightblue);*/
/*    opacity: 20%;*/
/*}*/

.tab.disabled:hover {
   cursor: auto;
}

/* .tab-row { */
/*    height: 40px; */
/*    display: flex; */
/*    flex-direction: row; */
/*    align-items: center; */
/*    justify-content: center; */
/*    gap: 0; */
/* } */

/* .tab-list { */
/*    display: flex; */
/*    flex-direction: column; */
/*    align-items: flex-start; */
/*    justify-content: center; */
/*    gap: 0; */
/* } */
/*!* tabs END *!*/

/* slider */
.slider {
    display: inline-flex;
    flex-direction: column;
    gap: 16px;
    width: fit-content;
    align-items: stretch;
    padding-left: 48px;
}

.slider .control {
    appearance: none;
    height: 8px;
    background-color: var(--beige_hover);
    border-radius: 4px;
    width: 100%;
}

.slider .control::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: var(--blue);
    cursor: pointer;
    border-radius: 50%;
}

.slider .control.empty::-webkit-slider-thumb {
    appearance: none;
    width: 8px;
    height: 8px;
    background-color: var(--beige_hover);
    cursor: pointer;
    border-radius: 0%;
}

.slider .labels {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 120%; /* outer width  */
    margin: 0 10% 0 -10%; /* Shift by half a label slot */
}

.slider .label {
    flex: 1;
    text-align: center;
}
/* slider END */

/* business related */

.casrn { /* CAS registration number */
  white-space:nowrap;
  text-wrap:nowrap;
}