:root {
    --width: 100%;
}

div {
    display: block;
}

.header {
    color: var(--titles-font-color);
    padding: 10px 30px;
    border-bottom: thin solid var(--module-container-divider);;
    font-size: 20px;
}

.overflow-hidden-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden !important;
}

.margin-10        { margin:        10px;            }
.margin-20        { margin:        20px;            }
.margin-bottom-0  { margin-bottom:    0 !important; }
.margin-bottom-5  { margin-bottom:  5px !important; }
.margin-bottom-10 { margin-bottom: 10px !important; }
.margin-bottom-20 { margin-bottom: 20px !important; }
.margin-top-0     { margin-top:       0 !important; }
.margin-top-5     { margin-top:     5px !important; }
.margin-top-10    { margin-top:    10px !important; }
.margin-top-20    { margin-top:    20px !important; }
.margin-right-0   { margin-right:     0 !important; }
.margin-right-5   { margin-right:   5px !important; }
.margin-right-10  { margin-right:  10px !important; }
.margin-right-20  { margin-right:  20px !important; }
.margin-left-0    { margin-left:      0 !important; }
.margin-left-5    { margin-left:    5px !important; }
.margin-left-10   { margin-left:   10px !important; }
.margin-left-20   { margin-left:   20px !important; }

.padding-top-10    { padding-top: 10px; }
.padding-top-20    { padding-top: 20px; }
.padding-bottom-10 { padding-bottom: 10px !important; }
.padding-bottom-20 { padding-bottom: 20px !important; }
.padding-right-10  { padding-right: 10px !important; }
.padding-right-20  { padding-right: 20px !important;}

.no-copy p {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none; /* Firefox all */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Likely future */
}

.no-visibility {
    opacity: 0;
    height: 0;
    width: 0;
    position: fixed;
}

.panel {
    border-radius: 5px;
}

fieldset legend {
    font-weight: bold;
}

.max-z-index {
    z-index: 999;
}

.footer {
    margin-top: 2em;
    height: 8em;
    width: 100%;
    font-size: 0.8em;
    padding: 3px;
    text-align: center;
    color: #9e9fa0;
}

.footerContent {
    width: 100%;
    margin: 1em auto;
    padding: 1em;
}

.pointer {
    cursor: pointer;
}

.resultTable {
    margin: 0 auto;
    min-height: 450px;
}

.contents-wrapper {
    transform: translate(-50%, 5%) translate(0px, 0px) !important;
}

div.form-group > div.datepicker {
    width: 100%;
}

.selectContainer {
    --height: 30px;
    --clearSelectBottom: 1px;
    --clearSelectTop: 1px;
    cursor: pointer !important;
}

.selectContainer > input {
    cursor: pointer !important;
}

.vismaicon:before {
    display: inline-table;
    content: "" !important;
    position: relative;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    background-color: transparent;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    vertical-align: middle;
}

.vismaicon-sm:before {
    width: 16px;
    height: 16px;
    margin-left: 10px;
}


/* Override Margin from UX regarding page-header */
.page-header {
    margin: 0 0 -1px;
}

/* Dummy row added to ensure tableRow styling in table */
tr.dummyrow {
    display: none;
}

table.table-compact, table.table-compact > tr > td {
    padding: 0 !important;
}

/* VismaIcons */
span.vismaicon > span.badge {
    position: absolute;
    top: 12px;
    font-size: 10px;
    z-index: 2;
}

/* Required Fields inside Rows/Cols */
.form-group.required > div > label:before, .form-group.required > a:before {
    color: #c72828;
    content: "*";
    font-size: 12px;
    margin-left: -7px;
    position: absolute;
    top: 5px
}

.form-group.required > div > div > label:before, .form-group.required > a:before {
    color: #c72828;
    content: "*";
    font-size: 12px;
    margin-left: -7px;
    position: absolute;
    top: 5px
}

.note-invoice-header {
    max-height: 150px;
    float: left;
    overflow-y: auto;
    background-color: rgb(255, 255, 230) !important;
}

.note-invoice-line {
    border: thin solid #e7e7e7;
    background-color: rgb(255, 255, 230) !important;
    padding: 5px 10px;
    margin-bottom: 5px;
}

/* Copy of Boostrap Warning for Table, with added Boldness of Font */
.table > thead > tr > td.difference,
.table > tbody > tr > td.difference,
.table > tfoot > tr > td.difference,
.table > thead > tr > th.difference,
.table > tbody > tr > th.difference,
.table > tfoot > tr > th.difference,
.table > thead > tr.difference > td,
.table > tbody > tr.difference > td,
.table > tfoot > tr.difference > td,
.table > thead > tr.difference > th,
.table > tbody > tr.difference > th,
.table > tfoot > tr.difference > th {
    font-weight: bold;
    background-color: var(--alert-warning-bg) !important;
    color: var(--alert-warning-text);
    border-color: var(--alert-warning-border);
}

.table-hover > tbody > tr > td.difference:hover,
.table-hover > tbody > tr > th.difference:hover,
.table-hover > tbody > tr.difference:hover > td,
.table-hover > tbody > tr:hover > .difference,
.table-hover > tbody > tr.difference:hover > th {
    background-color: var(--alert-warning-bg) !important;
    color: var(--alert-warning-text);
    border-color: var(--alert-warning-border);
    font-weight: bold;
}

.activeStep {
    font-weight: bold;
}

/* COST CENTRE */
a.required::before,
label.required::before {
    color: #c72828;
    content: "*";
    font-size: 12px;
    margin-left: -7px;
    position: absolute;
}

a.required.disabled::before,
label.required.disabled::before {
    display: none;
}

a.disabled {
    cursor: default;
    text-decoration: none;
    color: #a0a0a0;
}

/* COST CENTRE */
/*input[type=text].ccDimensionField, input[type=text].vatField, input[type=text].mengdeField {*/
/*    width: 100px;*/
/*    border: thin solid #dddddd!important;*/
/*}*/

input[type=text].amountField {
    width: 150px;
}

.costCentreElement {
    float: left;
    display: block;
    overflow: hidden;
    margin: 0 5px 0 0;
    padding: 0;
    clear: none;
}

.modal-dialog {
    position: relative;
    margin: auto;
    pointer-events: all !important;
    border-radius: 20px;
    max-height: calc(100% - 60px);
    top: 150px;
    padding: 30px !important;
    overflow-y: hidden;
    overflow-x: hidden;
}

/*.modal-dialog .panel-body {*/
/*    overflow-y: auto;*/
/*}*/
.dimension-modal .modal-dialog{
    width: 600px !important;
    max-width: 600px !important;
    left: 50% !important;
    margin-left: -300px !important;
}

.upload-documents .modal-dialog,
.send-email .modal-dialog {
    width: 840px !important;
    max-width: 840px !important;
    left: 50% !important;
    margin-left: -420px !important;
}

.dimension-modal .modal-content {
    height: 500px !important;
    overflow-y: auto;
    max-height: 500px !important;
    overflow-x: hidden;
}

.upload-documents .modal-content,
.send-email .modal-content {
    height: 600px;
    overflow-y: auto;
    max-height: 700px;
    overflow-x: hidden;
}

.upload-documents .modal-body,
.send-email .modal-body {
    overflow: hidden!important;
}

.invoice-documents .modal-dialog:first-of-type {
    width: 90% !important;
    --width: 90%;
    top: 50px;
    left: 50%;
    margin-left: calc(-1 * var(--width) / 2);
    overflow-x: auto;
}

.modal-header {
    border-bottom: thin #dddddd solid;
    padding: 0;
    margin: 0 0 30px 0;
}

.modal-header .close {
    top: 0 !important;
    right: 0 !important;
    min-width: 0;
}

.modal-header h3 {
    margin-left: 30px;
    font-size: 20px;
    font-weight: bold;
}


.modal-body {
    overflow-y: inherit;
}

.has-error {
    border: 1px solid #C72828;
    -webkit-box-shadow: 1px 1px 0 #c72828 inset, -1px -1px 0 #c72828 inset;
    box-shadow: 1px 1px 0 #c72828 inset, -1px -1px 0 #c72828 inset;
}

.no-padding {
    padding: 0 0 0 0 !important;
}

.no-margin {
    margin: 0 0 0 0 !important;
}


.display-block {
    display: inline-block !important;
}

.tableView td, .tableView th {
    height: 32px;
}

.tableView td:not(:last-of-type), .tableView th:not(:last-of-type) {
    padding: 4px 0 4px 20px !important;
    text-align: left !important;
}

.tableView td:last-of-type, .tableView th:last-of-type {
    padding: 4px 20px 4px 0 !important;
    text-align: right !important;
}

.tableView a {
    text-decoration: none;
    color: black;
}

.tableView th {
    width: auto;
}

.tableView tr:not(:last-of-type) td {
    border-right: 1px dotted #e5e5e5;
}

.tableView tr:nth-child(odd) {
    background: #f7f7f7
}

.full-width {
    width: 100% !important;
}

input {
    pointer-events: fill;
}

/***********INVOICE DOCUMENTS*********************/

.htmlContainer {
    all: initial; /* blocking inheritance for all properties */
}
.htmlContainer h1,
.htmlContainer h2,
.htmlContainer h3,
.htmlContainer h4,
.htmlContainer h5 {
    font-weight: bold!important;
}
.htmlContainer h3 {
    font-size: 1.17em;
}

tr.selectedRow {
    background: #ebebeb;
    box-shadow: 0 1px 0 #d7d7d7 inset, 0 -1px 0 #d7d7d7 inset;
    border-left: 6px solid #4d8400;
}

@media (min-width: 1680px) {
    .container {
        max-width: 100% !important;
    }
}

.input-group span.input-group-spacer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    height: 3.2rem;
    padding: 0.3rem 0.6rem 0.4rem;
    margin: 0;
    max-width: 100%;
    min-width: 1rem;
    color: var(--button-text-color);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    text-decoration: none;
    text-shadow: none;
    vertical-align: middle;
    white-space: nowrap;
    border-width: 0.1rem;
    border-style: solid;
    user-select: none;
    touch-action: manipulation;
    border-color: var(--button-border-color);
    background-color: var(--button-bg);
    box-shadow: 0 0.2rem 0.4rem 0 var(--button-shadow-color);
    box-sizing: border-box;
}

div.multiselect {
    /* top-level wrapper div */
    color: var(--input-text-color) !important;
    border-radius: 0 !important;
    border: 0.1rem solid var(--input-border-color) !important;
    background-color: var(--input-bg) !important;
}
div.multiselect.open {
    /* top-level wrapper div when dropdown open */
}
div.multiselect.disabled {
    /* top-level wrapper div when in disabled state */
}
div.multiselect > ul.selected {
    /* selected list */
}
div.multiselect > ul.selected > li {
    /* selected list items */
}
div.multiselect button {
    /* target all buttons in this component */
}
div.multiselect > ul.selected > li button, button.remove-all {
    /* buttons to remove a single or all selected options at once */
}
div.multiselect > input[autocomplete] {
    /* input inside the top-level wrapper div */
}
div.multiselect > ul.options {
    /* dropdown options */
    max-height: 200px !important;
    background: var(--bg-default) !important;
}
div.multiselect > ul.options > li {
    /* dropdown list items */
}
div.multiselect > ul.options > li.selected {
    /* selected options in the dropdown list */
}
div.multiselect > ul.options > li:not(.selected):hover {
    /* unselected but hovered options in the dropdown list */
}
div.multiselect > ul.options > li.active {
    /* active means item was navigated to with up/down arrow keys */
    /* ready to be selected by pressing enter */
}
div.multiselect > ul.options > li.disabled {
    /* options with disabled key set to true (see props above) */
}

div.date-input-group > div.datepicker,
div.date-input-group > div.datepicker > div:first-child,
div.date-input-group > div.datepicker > div:first-child > div:first-child,
div.date-input-group > div.datepicker > div:first-child > div:first-child > div:first-child {
    width: 100%;
}

.datepicker input[type=date], .datepicker input[type=text] {
    padding-right: 10px!important;
}
@media (max-width: 1200px) {
    .datepicker input[type=date], .datepicker input[type=text] {
        padding-left: 5px!important;
    }
}

html[data-theme='light'] .show-light { display: block !important; }
html[data-theme='dark']  .show-light { display: none !important; }
html[data-theme='light'] .show-dark { display: none !important; }
html[data-theme='dark']  .show-dark { display: block !important; }

html[data-theme='light'] .light-dark-toggle b.light { font-weight: 700 !important; }
html[data-theme='dark']  .light-dark-toggle b.light { font-weight: 400 !important; }
html[data-theme='light'] .light-dark-toggle b.dark { font-weight: 400 !important; }
html[data-theme='dark']  .light-dark-toggle b.dark { font-weight: 700 !important; }

/* AutoSuggest - AutoComplete - Input */
html[data-theme='light'] input.autosuggested { background-color: var(--blue-05); }
html[data-theme='dark']  input.autosuggested { background-color: var(--blue-90); }
html[data-theme='light'] input.autosuggested:disabled { background-color: var(--blue-05);
    border-width: thin !important;
    border-color: var(--input-disabled-border-color);}
html[data-theme='dark'] input.autosuggested:disabled { background-color: var(--blue-90);
    border-width: thin !important;
    border-color: var(--input-disabled-border-color);}
.form-control-static.autosuggested { color: var(--blue-50); }
/* AutoSuggest - AutoComplete - Dropdown */
html[data-theme='light'] .autocomplete button.prediction { background-color: var(--blue-05); }
html[data-theme='light'] .autocomplete button.prediction.select,
html[data-theme='light'] .autocomplete button.prediction:hover { background-color: var(--blue-10); }
html[data-theme='dark']  .autocomplete button.prediction { background-color: var(--blue-90); }
html[data-theme='dark']  .autocomplete button.prediction.select,
html[data-theme='dark']  .autocomplete button.prediction:hover { background-color: var(--blue-70); }
/* AutoSuggest - DimensionModal */
html[data-theme='light'] .table > tbody > tr.autosuggest,
html[data-theme='light'] .table > tbody > tr.autosuggest:nth-child(even) > td,
html[data-theme='light'] .table > tbody > tr.autosuggest:nth-child(odd) > td { background-color: var(--blue-05); }
html[data-theme='light'] .table > tbody > tr.autosuggest:hover,
html[data-theme='light'] .table > tbody > tr.autosuggest:nth-child(even):hover > td,
html[data-theme='light'] .table > tbody > tr.autosuggest:nth-child(odd):hover > td { background-color: var(--blue-10); }
html[data-theme='dark'] .table > tbody > tr.autosuggest,
html[data-theme='dark'] .table > tbody > tr.autosuggest:nth-child(even) > td,
html[data-theme='dark'] .table > tbody > tr.autosuggest:nth-child(odd) > td { background-color: var(--blue-90); }
html[data-theme='dark'] .table > tbody > tr.autosuggest:hover,
html[data-theme='dark'] .table > tbody > tr.autosuggest:nth-child(even):hover > td,
html[data-theme='dark'] .table > tbody > tr.autosuggest:nth-child(odd):hover > td { background-color: var(--blue-70); }
.table > tbody > tr.autosuggest.disabled,
.table > tbody > tr.autosuggest.disabled:hover,
.table > tbody > tr.autosuggest.disabled:hover > td {
    color: var(--text-disabled) !important;
    border-width: thin !important;
    border-color: var(--table-border-color) !important;
    cursor: not-allowed !important;
}

/* PDF VIEWER */
#documents .viewer {
    margin: auto;
    width: fit-content;
}

#documents canvas {
    position: relative;
    margin: auto!important;
}

/* Table component */
.inline-actions-menu-cell {
    padding-right: 0!important;
}

.tooltip.tooltip-custom {
    min-width: 10rem !important;
    max-width: 30rem !important;
    font-size: 11px !important;
}

.tooltip.left {
    text-align: center !important;
}