:root {
    --branded-company-logo: url(/pdb/image/sb_logo.svg);
    /*
        Cannot use relative paths to CSS file location
        because of Safari consider the path to be relative to the current page URL
        Edge (Chromium) as well as Firefox consider the path relative to the location of this CSS file.
        --branded-company-logo: url(../image/sb_logo.svg);
     */
    --branded-background-color: rgb(213, 239, 203); /* B9ABCC => D5EFCB */
    --branded-accent-color: rgb(83, 129, 53); /* 4F2D7F => 538135 */
    --branded-highlight-color: rgb(243, 249, 233);
    --branded-hover-color: rgb(143, 169, 133); /* DCD5E5 => 8FA985 */
    --branded-border-color: rgb(183, 209, 173);
    --branded-note-color: rgb(118, 146, 60);
/* 7030A0 => 538135 */
    --branded-text-color-on-accent-color: #ffffff;
    --branded-field-text-color: #000000;

    --body-text-color: #1a1a1a;
    --body-background-color: #ffffff;
    --body-highlight-color: #cccccc;


    --highlight-red-background-color: #ff0000;
    --highlight-red-text-color: #ffffff;

    --highlight-green-background-color: #008000;
    --highlight-green-text-color: #ffffff;


    --notification-error-background-color: #990000;
    --notification-error-text-color: #ffffff;
    --notification-error-border-color: #660000;

    --notification-info-background-color: var(--branded-highlight-color);
    --notification-info-text-color: #ffffff;
    --notification-info-border-color: var(--branded-highlight-color);


    --severity-fine-background-color: var(--branded-background-color);
    --severity-fine-text-color: var(--branded-note-color);

    --severity-info-background-color: var(--branded-background-color);
    --severity-info-text-color: var(--body-text-color);

    --severity-warning-background-color: #ffeec6;
    --severity-warning-text-color: var(--body-text-color);

    --severity-error-background-color: #ffcccc;
    --severity-error-text-color: var(--body-text-color);
}

body {
    font-family: Arial, Verdana, sans-serif;
    background-color: var(--body-background-color);
    color: var(--body-text-color);
    padding: 0;
    margin: 0;
}

.hidden,
.-hidden {
    display: none;
}

div.print_only {
    display: none;
}

div.body {
    margin: 0;
    padding: 0;
}

div.mainGrid {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 10em auto;
    grid-template-rows: auto min-content;
}

/* NAVIGATION */

div.navigation {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    margin: 15px 0 0 15px;
    font-size: 0.8em;
}

div.navigation img.navigation_logo {
    content: var(--branded-company-logo);
    max-width: 80%;
}

div.navigation form fieldset {
    padding-left: 0;
}

div.navigation_inner {
    margin: 0 0.2em 0.2em 0;
}

div.navigation nav ul {
    list-style: none;
}

div.navigation nav > div > div {
    display: none;
}

div.navigation div[data-bodyNavigation="collapsible"] > div:hover {
    background-color: var(--body-highlight-color);
}

div.navigation div[data-bodyNavigation="collapsible"] > div > span {
    float: right;
    padding-right: 0.5em;
}

div.navigation nav > div > ul {
    margin-left: 0;
    padding: 0;
    margin-bottom: 1em;
}

div.navigation nav > div > ul > li {
    padding: 0;
    margin: 0 0 0.5em;
    font-size: 1.0em;
}

div.navigation nav > div > ul > li > div > ul {
    margin-left: 1em;
    padding-left: 0;
}

div.navigation nav > div > ul > li > div > ul > li {
    font-size: 0.8em;
    margin-bottom: 0.2em;
}

div.navigation a,
div.navigation a:link {
    color: var(--branded-accent-color);
    text-decoration: underline;
}

div.navigation a:visited {
    color: var(--branded-accent-color);
}

div.navigation a:hover,
div.navigation a:focus,
div.navigation a:active {
    text-decoration: none;
}

/* MAIN */

div.main {
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
    padding: 0 1em 1em 1em;
    background: var(--branded-background-color);
}

div.main div.login_info {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: min-content;

    font-size: 0.7em;
    color: var(--branded-background-color);
    background: var(--branded-accent-color);
    margin: 0 0 1em 0;
    padding: 0.5em;
}

div.main div.login_info > div {
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
}

div.login_info > ul {
    grid-row: 1 / span 1;
    grid-column: 2 / span 1;
    margin: 0;
    text-align: right;
}

div.login_info ul li {
    display: inline;
}

div.main div.login_info p {
    margin: 0;
    padding: 0;
}

div.main div.directIdForm {
    float: right;
}

div.main div.document {
    font-size: 0.7em;
    margin-bottom: 1em;
}

div.main div.document h1 {
    color: var(--branded-accent-color);
    font-size: 1.3em;
    margin-top: 0.1em;
}

div.main div.document h2.subtitle {
    font-size: 1em;
}

div.main div.document h2:not(.subtitle) {
    font-size: 1.25em;
    font-weight: normal;
    margin: 2em 0 1em 0;
}

div.main div.document h1 + h2:not(.subtitle) {
    margin-top: 1em;
}

div.main div.document h3 {
    font-size: 1.25em;
    font-weight: normal;
    margin: 2em 0 1em 0;
}

div.main div.document h2 + h3 {
    margin-top: 1em;
}

div.main div.document h4 {
    font-size: 1em;
}

div.main div.document h5 {
    font-size: 1em;
    color: var(--branded-accent-color);
}

div.main div.document h6 {
    font-size: 1em;
    color: var(--branded-note-color);
}

div.main div.document div.id {
    text-align: right;
    color: var(--branded-note-color);
    font-size: 0.8em;
    margin-top: 1em;
}

div.main div.document .note {
    color: var(--branded-note-color);
}

div.main a,
div.main a:link {
    text-decoration: underline;
    color: var(--branded-accent-color);
}

div.main a:visited {
    color: var(--branded-accent-color);
}

div.main a:hover,
div.main a:focus,
div.main a:active {
    text-decoration: none;
}

div.main div.login_info a,
div.main div.login_info a:link,
div.main div.login_info a:visited {
    color: var(--branded-background-color);
}

div.main div.document div.expand_link {
    text-align: right;
    margin-bottom: 1em;
}

div.main div.document div#no_more_info {
    text-align: right;
}

/* FOOTER */

div.footer_navigation {
    grid-row: 2 / span 1;
    grid-column: 1 / span 1;
    background: var(--branded-accent-color);
    color: var(--branded-background-color);
    margin-right: 2px;
}

div.footer {
    grid-row: 2 / span 1;
    grid-column: 2 / span 1;
    background: var(--branded-accent-color);
    color: var(--branded-background-color);
}

div.footer_inner {
    padding: 0.3em;
    font-size: 0.8em;
}

div.copyright {
    text-align: right;
}

div.footer a,
div.footer a:link {
    color: var(--branded-background-color);
    text-decoration: underline;
}

div.footer a:visited {
    color: var(--branded-background-color);
}

div.footer a:hover,
div.footer a:focus,
div.footer a:active {
    text-decoration: none;
}

/* FORM */

form {
}

form label {
    display: block;
}

form label.inline {
    display: inline;
}

form label.mandatory,
form .mandatory label {
    font-weight: bold;
}

form input.mandatory,
form textarea.mandatory,
form select.mandatory,
form .mandatory input,
form .mandatory textarea,
form .mandatory select,
form .mandatory .k-dropdown,
form .mandatory.k-textbox,
form .mandatory.k-textarea,
form .mandatory.k-upload,
form .mandatory.k-upload .k-dropzone,
form .mandatory.k-dropdown .k-dropdown-wrap:not(:hover), .mandatory.k-dropdowntree .k-dropdown-wrap:not(:hover) {
    background-color: var(--branded-highlight-color);
    background-image: none;
}

form .mandatory .k-dropdown .k-dropdown-wrap .k-select,
form .mandatory .k-ie .k-dropdown .k-dropdown-wrap .k-select,
form .mandatory .k-ff .k-dropdown .k-dropdown-wrap .k-select {
    background-color: var(--branded-highlight-color);
}

form .mandatory.k-textbox input {
    background: none !important;
}

form br {
}

form fieldset {
    padding: 0;
    border: none;
    border-top: var(--branded-border-color) 1px solid;

    margin: 2em 0 0 0;
}

form fieldset legend {
    padding: 0 0.8em 0 0;
    margin: 1em 0;
    font-size: 1.25em;
}

input[type=number]:invalid:not(.doNotHighlightOnInvalid),
input[type=date]:invalid,
input[type=email]:invalid {
    background-color: var(--highlight-red-background-color) !important;
}

form div.rowItem {
    display: flex;
}

form div.fieldItem {
    float: left;
    margin-right: 2em;
    margin-bottom: 1em;
}

form div.fieldItem.-fill {
    overflow: auto;
    flex-grow: 1;
}

form div.fieldItem div.note {
}


/* MESSAGE */

div.message h2 {
    display: none;
}

div.message ul {
    margin-left: 0;
    padding-left: 0;
}

div.message ul li {
    list-style: none;
    padding: 0.3em;
}

div.message ul li.error {
    background-color: var(--notification-error-background-color);
    color: var(--notification-error-text-color);
    border: var(--notification-error-border-color) solid 1px;
}

div.message ul li.info {
    background-color: var(--notification-info-background-color);
    color: var(--notification-error-info-color);
    border: var(--notification-info-border-color) solid 1px;
}

/* TABLE */

table {
    border-collapse: collapse;
    width: 99%;
}

table td,
table th {
    padding: 0.2em 0.4em;
    text-align: left;
    vertical-align: top;
}

table tr td:first-child,
table tr th:first-child {
    padding-left: 0;
}

table tr td:last-child,
table tr th:last-child {
    padding-right: 0;
}

table tr {
    border-bottom: 1px dotted var(--branded-border-color);
}

table .-solid-bottom-border {
    border-bottom: 1px solid var(--branded-border-color);
}

table .-dotted-left-border {
    border-left: 1px dotted var(--branded-border-color);
}

table tr:hover {
    background-color: var(--branded-highlight-color);
}

table.noHighlight tr,
table.noHighlight tr:hover {
    border-bottom: 0;
    background: none;
}

table.long {
    font-size: 0.8em;
}

table th.detail_link,
table td.detail_link {
    font-weight: bold;
}

/* SPECIFIC: ACTION LOG */

table.log tr.severity_fine:not(:hover),
table.log tr.severity_fine:not(:hover) td {
    background-color: var(--severity-fine-background-color);
    color: var(--severity-fine-text-color);
}

table.log tr.severity_info:not(:hover),
table.log tr.severity_info:not(:hover) td {
    background-color: var(--severity-info-background-color);
    color: var(--severity-info-text-color);
}

table.log tr.severity_warning:not(:hover),
table.log tr.severity_warning:not(:hover) td {
    background-color: var(--severity-warning-background-color);
    color: var(--severity-warning-text-color);
}

table.log tr.severity_error:not(:hover),
table.log tr.severity_error:not(:hover) td {
    background-color: var(--severity-error-background-color);
    color: var(--severity-error-text-color);
}

/* SPECIFIC: SAVE_SPACE */

div.save_space h1 {
    margin-bottom: 0;
}

div.save_space form fieldset {
    padding: 0;
    border-width: 0;
    margin-right: 1em;
}

div.save_space form {
    margin: 0;
    padding: 0;
}

div.save_space p {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

div.save_space form label,
div.save_space form select,
div.save_space form input {
    font-size: 0.8em;
}

div.navigation form fieldset.save_space,
div.navigation form fieldset.save_space label,
div.navigation form fieldset.save_space select,
div.navigation form fieldset.save_space input {
    font-size: 0.9em;
}

div.navigation form fieldset.save_space select {
    width: 100px;
}

/* OTHER */

div.paging_navigation {
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: center;
}

a image {
    border: none;
}

.-highlight-red,
.-highlight-negative {
    background-color: var(--highlight-red-background-color);
    color: var(--highlight-red-text-color);
}

.-highlight-green {
    background-color: var(--highlight-green-background-color);
    color: var(--highlight-green-text-color);
}





/* kendo */

.k-widget,
.k-input,
.k-button,
input.k-textbox,
.k-input.k-textbox
{
    font-size: inherit;
}

.k-textbox,
.k-input.k-textbox {
    height: calc( 8px + 1.42857em);
}

.k-dropdown {
    min-width: 12em;
    width: auto;
}

.k-switch-handle {
    height: 1.8em;
    width: 1.8em;
}

.km-switch {
    height: 1.7rem;
}

.k-switch-label-on, .k-switch-label-off {
    line-height: 2em;
}

.k-switch-label-on {
    left: -3.2em;
}

form input.mc-filter-textbox {
    width: 100%;
    min-height: 2.165em !important;
}

div.save_space input.mc-filter-textbox {
    font-size: 1em;
}

.k-autocomplete,
.k-dropdown-wrap,
.k-multiselect-wrap,
.k-numeric-wrap,
.k-picker-wrap,
input.k-textbox,
.k-input.k-textbox
{
    border-style: none;
}

.k-multiselect .k-multiselect-wrap .k-button
{
    padding: .1em 1.6em .1em .4em;
}

.k-autocomplete .k-clear-value, .k-dropdown-wrap .k-clear-value, .k-multiselect-wrap .k-clear-value
{
    height: auto;
}

.k-combobox .k-dropdown-wrap > .k-i-close, .k-combobox .k-dropdown-wrap > .k-i-group-delete::before
{
    right: calc(8px + 1.42857em + 4px);
}

.k-autocomplete .k-input, .k-dateinput-wrap .k-input, .k-dropdown-wrap .k-input, .k-picker-wrap .k-input, .k-multiselect-wrap .k-input, .k-numeric-wrap .k-input
{
    padding-right: calc(1.4285714286em + 8px);
}

.k-dropdown .k-dropdown-wrap.k-state:hover,
.k-dropdown .k-dropdown-wrap.k-state-hover {
    color: var(--branded-text-color-on-accent-color);
}

.k-textbox,
.k-textbox:hover,
.k-numerictextbox .k-numeric-wrap,
.k-numerictextbox .k-numeric-wrap:hover, .k-numerictextbox .k-numeric-wrap.k-state-hover,
.k-numerictextbox .k-numeric-wrap.k-state-focused,
.k-datepicker .k-picker-wrap, .k-timepicker .k-picker-wrap, .k-datetimepicker .k-picker-wrap,
.k-datepicker .k-picker-wrap:hover, .k-datepicker .k-picker-wrap.k-state-hover, .k-timepicker .k-picker-wrap:hover, .k-timepicker .k-picker-wrap.k-state-hover, .k-datetimepicker .k-picker-wrap:hover, .k-datetimepicker .k-picker-wrap.k-state-hover,
.k-datepicker .k-picker-wrap.k-state-focused, .k-datepicker .k-picker-wrap.k-state-active, .k-timepicker .k-picker-wrap.k-state-focused, .k-timepicker .k-picker-wrap.k-state-active, .k-datetimepicker .k-picker-wrap.k-state-focused, .k-datetimepicker .k-picker-wrap.k-state-active {
    color: var(--branded-field-text-color);
}

/* Remove unintended border inside a text-field */
.k-textbox > .k-input {
    border: none;
}

/* Workaround for Kendo UI bug, Telerik ticket 1363981, Git hub https://github.com/telerik/kendo-ui-core/issues/4706 */
.k-widget.k-datepicker.k-input {
    display: inline-flex;
}