/***
Copyright USoft B.V. (C) 1995-2026
This file includes the selectors that can be used by developers
to customize the style of their documents.
***/

@import "theme-variables.css";
@import "jquery-filestyle.min.css";
@import "jquery.datetimepicker.css";
@import "squire-editor.min.css";
@import "main.css";
@import "chart-control.css";
@import "datasetnumbers-control.css";
@import "dialog-control.css";
@import "input-control.css";
@import "data-input-control.css";
@import "message-control.css";
@import "tabs-control.css";
@import "replicated-tabs-control.css";
@import "replicated-question-control.css";
@import "wait-control.css";
@import "file-upload-control.css";
@import "tabular-grid-control.css";

/*@import "usoft.ui.benchmark.css";
@import "usoft.ui.benchmark.icon.css";*/

:root {
    --bs-modal-bg: white;
    --bs-border-color: white;
    --bs-modal-color: #012750;
    --bs-modal-footer-border-width: 1px;
    --bs-modal-footer-border-color: inherit;
}

html {
    overflow: hidden;
}
body {
    height: 100%;
}
body > .pages {
    overflow-y: scroll;
}

.ui-button-icon-primary.ui-icon.folder {
    height: 16px;
    width: 16px;
    background-image: url(../images/folder.png) !important;
}

.clearFloat {
    clear: both;
}
.rightFloat {
    float: right;
}

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

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

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

.flex {
    display: flex !important;
}
.flexW100 {
    display: flex !important;
    width: 100% !important;
}
.flex-center {
    display: flex;
    justify-content: center;
}

.ui-data-set-numbers-control li a {
    padding: 5px;
}

.ui-input-control.radio {
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 40px;
}
ul.radio {
    list-style: none;
}
.input-radio {
    margin-top: 6px;
    display: inline-block;
    margin-left: -15px !important;
    position: absolute !important;
}
.form-group input[type="radio"] {
    margin-top: 4px;
    margin-bottom: 16px;
    margin-left: -15px !important;
    position: absolute !important;
}

/***** Custom additions for Solvinx *****/
/*** Questionnaire: checkbox/radio ***/
ul.checkbox {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
ul.checkbox > li,
ul.radio > li,
.ui-input-control.radio > div {
    margin-bottom: 10px;
}
ul.checkbox > li > label,
ul.radio > li label,
.ui-input-control.radio > div label {
    padding-left: 20px;
    padding-right: 20px;
    display: inline-block;
}

.input-radio-round[type="radio"]:not([disabled]) + label,
input[type="radio"]:checked:not([disabled]) + label,
input[type="checkbox"]:checked:not([disabled]) + label {
    cursor: pointer;
}
.readonly_Y > .document-delete.icon-trash-can {
    display: none !important;
}

.input-checkbox-answer {
    position: absolute !important;
    margin-top: 6px;
    display: inline-block;
    margin-left: -15px !important;
}
.select-answers {
    border-style: solid;
    border-color: #888;
    border-width: 0px 0px 1px;
    position: relative;
    margin-right: 0px !important;
    margin-left: 0px !important;
    margin-bottom: 10px;
}
.answer-options > * {
    float: left;
    margin-right: 10px;
}

/* Overwrite from Bootstrap.css */
.navbar-default {
    background-image: none !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid #e9e8e3 !important;
}
li.dropdown-menu {
    background-color: transparent;
}
li.dropdown-menu ul {
    background-color: white;
    margin-top: -2px;
}
ul.dropdown-menu > li > a > span {
    color: #012750;
}
.dropdown-menu > li:hover,
.dropdown-menu > li:focus {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}
/* END Overwrite from Bootstrap.css */

.cp {
    cursor: pointer;
}
.intro-border {
    border: 1px solid #e9e8e3 !important;
}
.intro-border td {
    padding: 5px;
}
.intro-border-tb {
    margin: 5px 0 5px 0;
    border-top: 1px solid #e9e8e3 !important;
    border-bottom: 1px solid #e9e8e3 !important;
}
td.ui-input-control input {
    width: 100%;
}

div#replicated-chapter div.current {
    font-weight: bold;
}
.fs-20 {
    font-size: 20px;
}
.fw-b {
    font-weight: bold;
}
.page-title {
    font-size: 24px !important;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
.divider-line {
    min-height: 1px;
    border-top: 1px solid #e5e5e5;
    -webkit-box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 1px 5px rgba(0, 0, 0, 0.075);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 1px 5px rgba(0, 0, 0, 0.075);
}
.vertical-divider-line {
    min-height: 1px;
    border-left: 1px solid #e5e5e5;
}

.col-3-05 {
    flex: 0 0 28.08333333333%;
    max-width: 28.08333333333%;
}
.col-05 {
    flex: 0 0 4.1666666666%;
    max-width: 4.1666666666%;
}
.col-025 {
    flex: 0 0 2.0833333333%;
    max-width: 2.0833333333%;
}

#sideMenu {
    position: fixed;
    left: 0;
    top: 50%;
    width: 8em;
    margin-top: -2.5em;
}

/*** Padding ***/
.pt-0 {
    padding-top: 0px;
}
.pt-8 {
    padding-top: 8px !important;
}
.pt-10 {
    padding-top: 10px !important;
}
.pt-12 {
    padding-top: 12px !important; /* vertical align text htmlarea as text */
}
.pt-16 {
    padding-top: 16px !important;
}
.pt-30 {
    padding-top: 30px !important;
}
.pb-0 {
    padding-bottom: 0px;
}
.pb-10 {
    padding-bottom: 10px;
}
.ptb-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.ptb-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}
.ptb-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
.ptb-0_8 {
    padding-top: 0px !important;
    padding-bottom: 8px !important;
}
.pr-0 {
    padding-right: 0px !important;
}
.pr-15 {
    padding-right: 15px;
}
.pl-4 {
    padding-left: 4px !important;
}
.pl-6 {
    padding-left: 6px !important;
}
.pl-10 {
    padding-left: 10px !important;
}
.pl-15 {
    padding-left: 15px !important;
}
.plr-15 {
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.pl-24 {
    padding-left: 24px !important;
}
.pl-26 {
    padding-left: 26px !important;
}
.pl-40 {
    padding-left: 40px !important;
}
.p-24 {
    padding: 24px !important;
}
.no-pad {
    padding: 0px !important;
}
.no-pad-hori {
    padding-right: 0px !important;
    padding-left: 0px !important;
}
.no-pad-right {
    padding-right: 0px !important;
}
.no-pad-left {
    padding-left: 0px !important;
}
.no-pad-top {
    padding-top: 0px !important;
}
/*** END padding ***/

/*** Margins ***/
.noMargin {
    margin: 0px !important;
}
.mt-0 {
    margin-top: 0px !important;
}
.mt-4 {
    margin-top: 4px !important;
}
.mt-5 {
    margin-top: 5px !important;
}
.mt-10 {
    margin-top: 10px !important;
}
.mt-12 {
    margin-top: 12px !important;
}
.mt-15 {
    margin-top: 15px !important;
}
.mt-16 {
    margin-top: 16px !important;
}
.mt-17 {
    margin-top: 17px !important;
}
.mt-20 {
    margin-top: 20px !important;
}
.mt-50 {
    margin-top: 50px !important;
}
.mb-4 {
    margin-bottom: 4px !important;
}
.mb-8 {
    margin-bottom: 8px !important;
}
.mb-10 {
    margin-bottom: 10px !important;
}
.mb-20 {
    margin-bottom: 20px !important;
}
.mb-30 {
    margin-bottom: 30px !important;
}
.mtb-10 {
    margin: 10px 0 !important;
}
.mtb-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.ml-3 {
    margin-left: 3px !important;
}
.ml-5 {
    margin-left: 5px !important;
}
.ml-15 {
    margin-left: 15px !important;
}
.ml-20 {
    margin-left: 20px !important;
}
.ml-30 {
    margin-left: 30px !important;
}
.ml-40 {
    margin-left: 40px !important;
}
.ml-10n {
    margin-left: -10px !important;
}
.ml-15n {
    margin-left: -15px !important;
}
.mr-0 {
    margin-right: 0px;
}
.mlr-0 {
    margin-right: 0px !important;
    margin-left: 0px !important;
}
.mlr-15 {
    margin-right: 15px !important;
    margin-left: 15px !important;
}
.max-w-sm {
    max-width: 14rem;
    word-wrap: break-word;
}

.h-100P {
    height: 100%;
}
.h-95P {
    height: 95%;
}
.h-90P {
    height: 90%;
}
.h-89P {
    height: 89%;
}
.of-auto {
    overflow-x: auto;
}

.modal-dialog {
    width: 100vw;
    height: 100vh;
    top: 0px !important;
}

dialog[open] {
    &:before {
        background: #012750;
    }
}

dialog[open].us-dialog {
    .dialog-content {
        top: inherit;
        left: inherit;
        position: inherit;
    }
}

dialog[open] {
    .dialog-content {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin-top: 0px !important;

        position: absolute;
        max-width: 85vw;
        max-height: 85vh;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
.modal.ui-dialog .dialog-content {
    width: auto;
    height: auto;
}
.dialog-details-size {
    width: 85% !important;
    min-height: 370px !important;
}

.dialog-details-action-size {
    width: 85% !important;
    min-height: 75vh !important;
}

.dialog-details-action-tab-size {
    /*	min-width: 127vh !important;*/
}

.dialog-question-size {
    width: 880px !important;
}

.dialog-wizard-size {
    max-width: 95vw !important;
    width: 100vw !important;
    max-height: 95vh !important;
    height: 100vh !important;
}

.dialog-wizard-grid {
    margin-left: 15px;
    padding-right: 15px;
}
.ui-message-control {
    z-index: 1030 !important;
}
dialog.benchmark-dialog {
    &.ui-message-control {
        z-index: 1070 !important;
    }
}
.dialog-details-size-zindex {
    z-index: 1010;
}

.us-dialog .dialog-content .dialog-body > div {
    padding-left: 15px;
    padding-right: 15px;
}
/*** END of Margins ***/
/*** END General ***/

/*** Sticky footer ***/
html {
    position: relative;
    min-height: 100%;
}

body > .container {
    min-height: calc(100% - 260px);
}
.container .text-muted {
    margin: 20px 0;
}

code {
    font-size: 80%;
}
/*** END Sticky footer ***/

/*** Page Styles ***/
/* Sign in page */
.form-signin {
    max-width: 450px;
    padding: 15px;
    background: transparent;
    border-radius: 4px;
    margin: 0 auto;
    margin-top: 200px;
}

.form-reset-passwd {
    max-width: 510px;
    padding: 15px;
    background: transparent;
    border-radius: 4px;
    margin: 0 auto;
    margin-top: 200px;
}

.form-signin-heading {
    margin-top: 0px;
}
/* End Sign in page */

div.htmlarea {
    border-width: 0px;
    border-style: none;
    padding: 0 0px;
    font-weight: inherit;
}

div#upload label {
    border: none;
    color: black;
}

div#upload label i {
    margin-left: -10px;
}

.upload-exists {
    color: black;
    background-color: white;
}

.Page {
    width: 100%;
}

.login-background {
    background-color: #012750;
}

.Page .Page {
    background-color: transparent;
}

.ptop20 {
    padding-top: 20px;
}
#filters {
    padding-top: 20px;
}
#filters label {
    padding: 5px 0px;
    width: 100%;
    display: block;
    font-weight: normal;
}
#filters label .check {
    margin-right: 10px;
}
#filters .multicol2 label {
    width: 50%;
    float: left;
}

.greybar {
    width: 100%;
    background-color: #eeeeee;
    padding: 20px 0px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.greyline {
    width: 100%;
    background-color: #eeeeee;
    padding: 8px 0px;
}
.whitebar {
    width: 100%;
    padding: 10px 0px;
}

.ReplicatedColumnsControl {
    padding-left: 15px;
}

.TitleLabelControl {
    font-size: 16px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 4px;
}

.SubTitleLabelControl {
    font-weight: bold !important;
    padding-top: 10px;
    padding-bottom: 4px;
}
.subtitle-container {
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: 400 !important;
    font-size: 18px !important;
    margin: 0;
}

div.SmallLineWhiteGroup {
    padding-left: 5px;
    width: 100%;
    height: 1px;
    background-color: white;
    border-style: solid;
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-color: white;
    margin-left: 15px;
    margin-right: 15px;
}

/* Warning buttons*/
.btn-red {
    background-color: #c22121;
    color: #fff;
    border-color: #c22121;
    margin-right: 10px;
}
.btn-red:hover {
    background-color: #a21818;
    color: #fff;
    border-color: #a21818;
}

/* bootstrap-theme.css */
.header {
    background: transparent;
}

.box-blue {
    background: #16a085;
    color: white;
}

.no-border,
.no-border input {
    border-width: 0px;
    border-bottom-width: 0px;
    margin: 5px;
}
.noBorder,
.noBorder input {
    border-width: 0px;
    border-bottom-width: 0px;
}
/* einde bootstrap-theme.css */

/* Select active menu item from dropdown list */

li.open.dropdown-menu > a {
    color: #fff;
    background-color: #0094d9;
}

/*** END Page Styles ***/
/***** END Custom additions for PIA *****/

td #DUE_DATE_COLOR {
    width: 20px;
    height: 67px;
    margin: -8px;
    display: block;
}

td #DUE_DATE_COLOR div {
    height: 100%;
}

td.CenterButton {
    vertical-align: middle !important;
}

.RccTreeNode {
    font-size: 11pt;
    font-weight: bold;
}

/* Used to show 3 dots (...) when the field is not big enaugh to display the complete value. */
.divValueEllipsis div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Needed to allow custom ui-input-control for showing a tooltip of it's own value but keep the . */
table.tableValueEllipsis {
    table-layout: fixed;
}

/* Start Multi Language Section	*/
.nav-lang {
    list-style: none;
    float: right;
    margin: 0 10px 0 0;
    padding: 0px;
}
.nav-lang li {
    position: relative;
    margin: 0 5px;
    padding: 0px;
    display: block;
    cursor: pointer;
    float: left;
}
.nav-lang li a {
    padding: 2px 15px 1px 15px;
    display: block;
    cursor: pointer;
    color: #666;
    text-decoration: none;
    float: left;
}

/* Language settings */
/*
Verouderd:
body.nlNL .enUS { display:none!important; }
body.nlNL .nlNL { display:block!important; }
body.nlNL label.nlNL, body.nlNL span.nlNL { display:inline!important; }
body.enUS .nlNL, body .nlNL { display:none!important; }
body.enUS .enUS { display:block!important; }
body.enUS label.enUS, body.enUS span.enUS { display:inline!important; }*/
/*	End Multi Language Section	*/
body.nl .en .it {
    display: none !important;
}

body.en .nl,
body.en .it,
body.nl .en,
body.nl .it,
body.it .nl,
body.it .en {
    display: none !important;
}

body.nl .nl {
    display: block !important;
}
body.nl label.nl,
body.nl span.nl,
body.nl span.nl > div {
    display: inline !important;
}
body.en .en {
    display: block !important;
}
body.en label.en,
body.en span.en,
body.en span.en > div {
    display: inline !important;
}
body.it .it {
    display: block !important;
}
body.it label.it,
body.it span.it,
body.it span.it > div {
    display: inline !important;
}

.ui-button-control > span {
    float: none;
}

/* Questionnaire: chapters with completion icons */
#replicated-chapter {
    display: table;
    width: 100%;
}

#replicated-chapter .rcc-row [id="child-page-code"] {
    display: table-row;
}

#replicated-chapter
    .rcc-row
    [id="child-page-code"]
    .pull-left[id="child-complete"] {
    display: table-cell;
}

#replicated-chapter
    .rcc-row
    [id="child-page-code"]
    [id="CHILD_DESCRIPTION"].ui-column-control {
    display: table;
}

/* Adjusted WaitControl (more transparent) */
.WaitControl {
    cursor: wait;
    opacity: inherit;
    filter: inherit;
    width: inherit;
    height: inherit;
    left: inherit;
    top: inherit;
    z-index: inherit;
    position: inherit;
    background-color: transparent;
}

div.WaitControl {
    opacity: 0.1;
    filter: alpha(opacity=10);
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 9999;
    position: absolute;
}

table.WaitControl {
    left: 50%;
    top: 50%;
    position: absolute;
    z-index: 9999;
}

.rqc-row ul.radio li span {
    white-space: normal;
}

.ui-grid-control td div.htmlarea span {
    white-space: normal;
}

dialog .dialog-header > .close {
    line-height: 10px;
    border: none;
    background-color: white;

    position: absolute;
    right: -50px;
    top: 50%;
    left: inherit;
    cursor: pointer;

    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    width: 60px;
    height: 60px;
    background-image: url(../images/icon-closed.svg);
    transform: translate(-50%, -50%);
}

.ui-label-control {
    text-align: left;
    word-break: break-word;
}

.form-group.required .ui-label-control:after,
.form-group.required .col-4.col-sm-4.ui-label-control:after,
.form-group.required .col-4.col-sm-4.ui-label-control:after,
.form-group.required .col-12.col-sm-12.ui-label-control:after {
    content: " *";
    color: red;
}

ul.checkbox li span {
    white-space: pre-wrap;
    padding-left: 2px;
    padding-right: 5px;
}

.ui-grid-control .wait tr {
    height: 40px;
    background: rgba(255, 255, 255, 0.75) url(../images/loading.gif) no-repeat
        center center;
}
.ui-grid-control .wait td {
    height: 40px;
    background: rgba(0, 0, 0, 0) no-repeat center center;
}
.option-box.wait select {
    height: 50px;
    background: rgba(255, 255, 255, 0.75) url(../images/loading.gif) no-repeat
        center center;
}

.answer_width {
    width: 220px;
}

.question_width {
    width: 220px;
}

.subject_width {
    width: 220px;
}
.DataInputHelp {
    min-width: 6px;
    padding: 2px 5px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #777;
    border-radius: 10px;
    margin-top: 6px;
    font-size: 80%;
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin-left: 10px;
}

#CommentGrid td .htmlarea {
    white-space: initial;
}

li.tree-node.selected > .tree-node-image,
li.tree-node.selected > .tree-node-value,
li.tree-node.hover > .tree-node-image,
li.tree-node.hover > .tree-node-value {
    background: transparent;
    font-weight: bold;
}

li.tree-node > .tree-node-image,
li.tree-node > .tree-node-value {
    cursor: pointer;
}

.textarea.form-control {
    resize: vertical;
}

.ui-grid-control .ui-input-control.static:not(.Date) {
    white-space: normal;
}

.remove-html,
.add-html,
.comment-html {
    cursor: pointer;
}

@font-face {
    font-family: "FontAwesome Regular";

    src: url("../fonts/fa-regular-400.eot");
    src:
        url("../fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"),
        url("../fonts/fa-regular-400.woff") format("woff"),
        url("../fonts/fa-regular-400.woff2") format("woff2"),
        url("../fonts/fa-regular-400.ttf") format("truetype"),
        url("../fonts/fa-regular-400.svg#glyphicons_halflingsregular")
            format("svg");
}

@font-face {
    font-family: "FontAwesome Solid";

    src: url("../fonts/fa-solid-900.eot");
    src:
        url("../fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
        url("../fonts/fa-solid-900.woff") format("woff"),
        url("../fonts/fa-solid-900.woff2") format("woff2"),
        url("../fonts/fa-solid-900.ttf") format("truetype"),
        url("../fonts/fa-solid-900.svg#glyphicons_halflingsregular")
            format("svg");
}

/* New */

.hide {
    display: none !important;
}
.hideTestRef {
    opacity: 0 !important;
    height: 0px !important;
    min-height: 0px !important;
}

html,
body {
    height: 100%;
}
body > .pages {
    height: 100%;
}
body > .pages > .ui-page {
    min-height: calc(100vh - 0px);
}

.ui-grid-control [rowId="header"] {
    cursor: pointer;
}

.ui-grid-control [rowId="header"] > .sort-asc:after {
    content: "\25b2";
}

.ui-grid-control [rowId="header"] > .sort-asc.text-right:before {
    float: left;
}

.ui-grid-control [rowId="header"] > .sort-desc:after {
    content: "\25bc";
}

.ui-grid-control [rowId="header"] > .sort-desc.text-right:before {
    float: left;
}

.ui-grid-control [rowId="header"] > .mark-record,
.ui-grid-control [rowId="header"] > .select-record,
.ui-grid-control [rowId="header"] > .number-record {
    cursor: initial;
}

.ui-grid-control [rowId="header"] > .mark-record:after,
.ui-grid-control [rowId="header"] > .select-record:after,
.ui-grid-control [rowId="header"] > .number-record:after {
    content: "";
}

/* Extra media-settings */
@media (min-width: 500px) {
    .ui-tabs-control > ul {
        padding-inline-start: 23px !important;
    }
    .title-container,
    .body-container {
        padding: 24px 20px 16px 40px;
    }
    .menu__upper-wrapper > *:first-child,
    .menu__lower-wrapper > *:first-child {
        padding: 0px 163px 0px 40px;
    }
    .menu__upper-wrapper > *:last-child,
    .menu__lower-wrapper > *:last-child {
        padding-right: 35px;
    }
    .footer {
        margin-left: 0px;
    }
    .footer {
        padding: 24px 40px;
    }
}
@media (min-width: 576px) {
    .body-container {
        margin: 0px 40px;
        padding: 0px;
    }
    .menu__upper-wrapper > *:first-child,
    .menu__lower-wrapper > *:first-child {
        padding: 0px 350px 0px 40px;
        vertical-align: middle;
    }
    .menu__upper-wrapper > *:last-child,
    .menu__lower-wrapper > *:last-child {
        padding-right: 40px;
    }
}
@media (min-width: 768px) {
    .body-container {
        margin: 0px 0px;
        padding: 24px 120px 16px;
    }
    .title-container {
        padding: 24px 120px 16px;
    }
    .menu__upper-wrapper > *:first-child,
    .menu__lower-wrapper > *:first-child {
        padding: 8px 8px 16px 120px;
        vertical-align: middle;
    }
    .menu__upper-wrapper > *:last-child,
    .menu__lower-wrapper > *:last-child {
        padding-right: 120px;
    }
    .footer__wrapper {
        margin-left: -15px;
    }
    .footer {
        padding: 24px 120px;
    }
}
@media (min-width: 992px) {
    .body-container {
        /*    margin: 0px 120px;*/
    }
}
@media (min-width: 1200px) {
    .body-container {
        /*    margin: 0px 120px;*/
    }
}

.body-container .body-container {
    margin: inherit;
    padding: 0px;
}

.login-input-margin {
    margin-top: 8px;
    margin-bottom: 8px;
}

.login-text {
    text-align: center;
    margin-top: 50px;
}

.link-style {
    color: rgb(0, 145, 206);
}

.frame-container {
    min-height: calc(100vh - 220px);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.details-card-wrapper {
    border-radius: 5px;
    background-color: #ffffff;
    padding: 20px;
    color: #012750;
    margin-top: 20px;
}

.table--grid > *:not(:first-child) > *,
.table--grid > *:not(:first-child) > .selected,
.table--grid > *:first-child > * {
    display: flex;
    flex-wrap: wrap;
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.labelVerticalInput {
    font-weight: 1000;
}
th.markRecord,
td.markRecord {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.markRecord > input[type="checkbox"] {
    width: 16.5px;
    height: 16.5px;
}
.dataNoControl {
    font-weight: 1000;
}
.buttonAsTextControl {
    border-radius: 5px;
    border: 1px solid #d4dde1;
}
.search-checkbox {
    background-color: white;
}
.resize-text-box-vertical {
    height: inherit;
    width: 100%;
}

/* submenu no-indent */
.ui-menu-control li li > a {
    padding: 0px;
}

.container-shadow > div > .table--questionnaire > thead > tr,
.container-shadow > div > .table--questionnaire > tbody > tr {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.container-shadow > .table--questionnaire > thead > tr,
.container-shadow > .table--questionnaire > tbody > tr {
    margin-right: 0px !important;
    margin-left: 0px !important;
}
.container-shadow
    > .table--questionnaire
    > .grid-header-content
    > .grid-header-row,
.container-shadow > .table--questionnaire > .grid-body > .grid-row {
    margin-right: 0px !important;
    margin-left: 0px !important;
}
/* work-a-round Tabulargrid */
.grid-cell.col-1 > .col-1 {
    max-width: 100%;
}
.grid-cell.col-2 > .col-2 {
    max-width: 100%;
}
.grid-cell.col-3 > .col-3 {
    max-width: 100%;
}
.grid-cell.col-4 > .col-4 {
    max-width: 100%;
}
.grid-cell.col-5 > .col-5 {
    max-width: 100%;
}
.grid-cell.col-6 > .col-6 {
    max-width: 100%;
}
.grid-cell.col-7 > .col-7 {
    max-width: 100%;
}
.grid-cell.col-8 > .col-8 {
    max-width: 100%;
}
.grid-cell.col-9 > .col-9 {
    max-width: 100%;
}
.grid-cell.col-10 > .col-10 {
    max-width: 100%;
}
.grid-cell.col-11 > .col-11 {
    max-width: 100%;
}
.grid-cell.col-12 > .col-12 {
    max-width: 100%;
}
/* work-a-round Tabulargrid end */

.side-panel__overflow-wrapper .rcc-body[dsi][dsid],
.default-record-set-form {
    display: block !important;
}

.table--questionnaire.start-assessment > *:not(:first-child) > .selected {
    background: #ffffff;
}

.icon-edit {
    display: inline-block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    width: 27px;
    height: 27px;
    background-image: url(../images/icon-edit.svg);
    background-size: 30px 26px;
    margin-left: -40px;
}

.icon-logging {
    display: inline-block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    width: 23px;
    height: 23px;
    background-image: url(../images/icon-information.svg);
}

button:focus:not(.icon-look-up, .btn-close, .btn.lookup) {
    background-color: #fd7814 !important;
    color: white !important;
    border: 2px solid #fd7814 !important;
}

.seperation-line {
    height: 5px !important;
}

.download-tab-area {
    margin-top: -80px;
}

/* Graph */
.txtAlignC {
    text-align: center;
}
.graphBoxCount {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    height: 140px;
    text-align: center;
}
.graphTitle {
    font-size: 20px;
    font-weight: bold;
    margin-top: 15px;
    text-align: center;
    width: 100%;
}
.graphBoxCountData {
    text-align: center;
    font-size: 50px;
    color: #00008c;
    padding-top: 12px;
}

.graphBoxCountDataSmall {
    font-size: 22px;
    color: #777777;
}
.fs-12 {
    font-size: 12px;
}

.graphBox {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    height: 400px;
}

.graphBodyBoxBar {
    overflow-y: auto;
    margin-top: 15px;
    height: 273px;
}
.graphBodyBoxBarNoLegenda {
    overflow-y: auto;
    margin-top: 15px;
    height: 322px;
}
.graphBodyBoxBarVert {
    border-bottom: 0px solid #000000;
    overflow-x: auto;
    margin-top: 15px;
    height: 273px;
    position: inherit;
    margin-left: 20px;
}
.graphBodyBoxPieChart {
    height: 257px;
    padding-left: 62px;
}

.colorBlueLight {
    color: #4bb9ff !important;
}
.colorBlueDark {
    color: #00008c !important;
}
.colorRed {
    color: #ff4b2d !important;
}
.colorRedDark {
    color: #aa0000 !important;
}

.btndescr,
.btn1,
.btn2,
.btn3,
.btntot {
    background-color: #fff;
    color: #ffffff;
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: right;
}
.btndescr {
    border-right: 1px solid #000000;
    text-align: right;
    padding-right: 10px;
    height: 110%;
    word-break: break-all;
}
.btntot,
.btndescr {
    background-color: #ffffff;
    color: #777777;
}
.btntot {
    padding-left: 8px;
    padding-top: 8px;
}

.btn1,
.btn2,
.btn3,
.btntot,
.popup {
    height: 106%;
}

.btn_1.popup .popuptext {
    width: 150px;
    margin-left: -65px;
}

/* The actual popup */

.spanPopup {
    background-color: #555;
    border-radius: 6px;
    color: #fff;
    text-align: center;
    padding: 8px 0;
    padding-left: 15px;
    padding-right: 15px;
    position: absolute;
    z-index: 1;
    left: 50%;
    font-size: 12px;
}

.putext {
    background-color: #555;
    border-radius: 6px;
    color: #fff;
    display: none;
    font-size: 12px;
    height: 64px;
    left: 50%;
    padding: 8px 0;
    padding-left: 2px;
    padding-right: 2px;
    position: absolute;
    text-align: center;
    width: 180px;
    z-index: 1;
}

.popup:hover .putext {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Popup arrow */
.putext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.graphLegend {
    margin-top: 10px;
}

.graphLegendBullet {
    height: 13px;
    width: 12px;
    margin-right: 5px;
    margin-top: 4px;
}

.graphLegendCat {
    color: #777777;
    vertical-align: 3px;
}

.graphBar {
    display: inline-block;
    margin-left: 0px;
    margin-right: 0px;
    position: absolute;
    bottom: 80px;
    border: 0px solid #ff0000;
    padding-bottom: 45px;
}
.bar {
    margin-left: 5px;
    width: 40px !important;
}
.hr {
    background-color: #ff4b2d;
}
.lr {
    background-color: #f0b437;
}
.nr {
    background-color: #beb4c8;
}
.label {
    height: 30px;
    border-top: 1px solid #000000;
}

.labelTxt {
    margin-top: 20px;
    margin-left: -22px;
    transform: rotate(-40deg);
    width: 68px;
    color: #777777;
}
/* Graph End */

.usoft-message {
    white-space: break-spaces;
}

.question-card-wrapper .question-comment-response {
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    margin-top: 8px;
    color: #012750;
}
.question-card-wrapper .question-comment-response .rcc-body.empty {
    display: none;
}
.question-card-wrapper .question-comment-response .ui-input-control {
    display: inline;
    cursor: pointer;
    margin-left: 25px;
}
.question-card-wrapper .question-comment-response .ui-input-control:before {
    content: "";
    margin: 2px 8px -4px 0;
}
.question-card-wrapper .question-comment-response .ui-input-control:hover {
    text-decoration: underline;
}
.question-card-wrapper .question-comment-response .comment-response-delete {
    margin-left: 8px;
    cursor: pointer;
}
.question-card-wrapper .question-comment-response-insert {
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    color: #aabbc4;
    font-style: italic;
    cursor: pointer;
    margin-left: 40px;
}
.question-card-wrapper .question-comment-response-insert:before {
    content: "";
    margin: 2px 8px -4px 0;
}
.question-card-wrapper .question-comment-response-insert:hover {
    text-decoration: underline;
}

.question-comment-insert,
.icon-comment-response {
    margin-top: 8px;
}

.staticInputText {
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    height: 50px;
    border-radius: 5px;
    border: thin solid #d4dde1;
    padding: 12px 16px 0px 16px;
    display: block;
}

.container-shadow-small {
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 5px;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 2px 5px 0px rgb(101 137 157 / 25%);
    -moz-box-shadow: 0px 2px 5px 0px rgba(101, 137, 157, 0.25);
    box-shadow: 0px 2px 5px 0px rgb(101 137 157 / 25%);
}

.changeLoggingDialog {
    width: 800px !important;
}

.previewHTML {
    opacity: 1 !important;
    padding-top: 12px !important;
}

/* Stepper */
.stepper {
    --brand-primary: #012750;
    --brand-accent: #fd7814;
    --grey-400: #bdbdbd;
}

.stepper-steps {
    background-color: white;
    display: flex;
    justify-content: space-between;
    position: relative;

    counter-reset: step;

    /* Connector line */
    &::after {
        content: "";
        position: absolute;
        bottom: 50%;
        left: 24px;
        right: 24px;
        height: 1px;
        background: var(--grey-400);
        z-index: 1;
    }
}

.stepper-steps .stepper-step {
    padding: 12px;
    cursor: pointer;
    background: transparent;
    border: none;
    text-align: center;
    counter-increment: step;
    z-index: 2;
}

.stepper-steps .stepper-step:focus {
    border: none !important;
    color: inherit !important;
    background: none !important;
}

.stepper-steps .stepper-step:disabled {
    color: rgba(0, 0, 0, 0.38);
    cursor: not-allowed;
    border: none !important;
}

.stepper-steps .stepper-step[aria-selected="true"] {
    font-weight: bold;

    & > :first-child::before {
        background-color: var(--brand-accent);
    }
}

/* Step marker */
.stepper-steps .stepper-step > :first-child {
    padding-inline: 8px;
    background: white;

    &::before {
        content: counter(step);
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-right: 8px;
        text-align: center;
        color: white;
        line-height: 24px;
        background-color: var(--brand-primary);
        border-radius: 24px;
        font-weight: 100;
    }
}

.stepper-step:disabled > :first-child::before {
    background-color: var(--grey-400);
}

.stepper [role="tabpanel"]:not([aria-current="step"]) {
    visibility: hidden;
}

.stacked {
    display: grid;
}

.stacked > * {
    grid-area: 1 / 1;
}
/* End Stepper */

.default-record-set {
    font-size: 15px !important;
    height: auto !important;
}

/* Bug Na $.udb(dsName).setDataSetSize(N); is de selected klasse verdwenen van de geseleceerde rij. In USoft 11 opgelost */
.table--task-list > *:not(:first-child) > .current,
.table--questionnaire > *:not(:first-child) > .current,
.table--my-dashboards > *:not(:first-child) > .current,
.table--top-risks-gaps > *:not(:first-child) > .current,
.current.table-row--inverted {
    background-color: #65899d;
    color: #ffffff;
}
/* Einde Bug Na $.udb(dsName).setDataSetSize(N); is de selected klasse verdwenen van de geseleceerde rij. In USoft 11 opgelost */

.icon-help-attribute {
    display: inline-block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center center;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    border-radius: 10px;
    background-image: url(../images/icon-question-answer.svg);
}

.upper-wrapper .left-wrapper .question p {
    margin: 0px;
}

/* UPGRADE */

.ui-button-control {
    max-width: inherit;
}

.wait {
    background-color: transparent;

    .spinner-border {
        background-image: url(../images/loading.gif);
        width: 32px;
        height: 32px;
        background-repeat: no-repeat;
        background-position: center;
    }

    .wait-message {
        display: none;
    }
}

.ui-grid-control .wait {
    display: none;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.ui-input-control.calendar > span.calendar-icon {
    background-image: url(../images/icon-calendar.svg);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
}

html[lang="en"] {
    .it,
    .nl {
        display: none;
    }
}

html[lang="nl"] {
    .it,
    .en {
        display: none;
    }
}

html[lang="it"] {
    .en,
    .nl {
        display: none;
    }
}
.ui-file-upload-control dialog.upload-dialog,
.ui-file-upload-control dialog.check-dialog {
    min-height: 500px;
}

.ui-file-upload-control dialog.upload-dialog.modal {
    position: fixed;
    background: transparent;

    .uploading-files {
        font-size: 90%;
    }
}
.ui-file-upload-control {
    .file-upload .btn {
        border: 2px solid #012750;
        color: #012750 !important;
    }
}
.question-document-upload {
    flex-direction: row;
    display: flex;

    .file-upload {
        display: flex !important;

        button.btn,
        button.btn:focus:not(.icon-look-up, .btn-close, .btn.lookup) {
            font-family: "Open Sans", sans-serif;
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            color: #aabbc4 !important;
            font-style: italic;
            cursor: pointer;
            display: flex;
            border: none !important;
            background-color: transparent !important;
            padding: 0;
        }
    }
}
/* Start assessment page */
.person-show input {
    width: 100% !important;
}

.ui-grid-control.start-assessment tr {
    flex-direction: row;
    display: flex;
}

/* Dashboard */
.popup:hover .popuptext {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

.popup .popuptext {
    visibility: hidden;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    padding-left: 15px;
    padding-right: 15px;
    position: absolute;
    z-index: 1;
    left: 50%;
    font-size: 12px;
}

.table--register {
    width: 100vw;
    & .grid-header {
        .grid-header-row {
            font-family: "Open Sans", sans-serif;
            font-style: normal;
            font-weight: 800;
            font-size: 14px;

            .grid-header-cell {
                max-width: 320px !important;
                min-width: 160px;
            }
        }
    }

    .grid-row {
        & .grid-cell {
            .ui-input-control {
                max-width: 320px !important;
                min-width: 160px;
                word-wrap: normal;
                word-break: break-word;
                border-collapse: separate;
                text-overflow: clip;
            }
        }
    }
}

.table--register > .grid-body > .grid-row {
    height: 104px;
    vertical-align: middle;
    border-radius: 5px;
    margin-bottom: 13px;
}

.table--register .grid-row.current,
.grid-row.current.--inverted {
    background-color: #65899d;
}

.table--register .grid-row {
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    border-radius: 5px;
    margin-bottom: 8px;
    background-color: #ffffff;
    color: #012750;
}

.ui-tabular-grid-control .filter-selection {
    ul > li {
        display: flex;
        flex-direction: row;
    }
}

.ui-tabular-grid-control .grid-filter-popup {
    & button {
        &:after {
            top: -8px;
            position: relative;
        }
    }
}

.apexcharts-tooltip {
    width: 300px;
}

input[readonly] ~ span.bi-calendar3 {
    display: none;
}