.md-inputfield .ui-selectonemenu > label {
    color: transparent;
}

.md-inputfield .ui-selectonemenu.ui-state-filled > label {
    color: #212121;
}

body .md-inputfield.md-inputfield-fill textarea {
    background-color: #f7f7f7;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 4px;
}

body .ui-inputgroup .ui-autocomplete .ui-autocomplete-dropdown.ui-button {
    padding: 0;
}

.columnTop20-right {
    vertical-align: top;
    width: 20%;
    text-align: right;
}


.columnTop60 {
    vertical-align: top;
    width: 60%;
}

.columnTop20 {
    vertical-align: top;
    width: 20%;
}

.columnBottom20 {
    vertical-align: bottom;
    width: 20%;
}

.columnTop80 {
    vertical-align: top;
    width: 80%;
}

.text-align-left {
    text-align: left;
}

.text-align-right {
    text-align: right;
}

.text-align-center {
    text-align: center;
}

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

.vertical-align-bottom {
    vertical-align: bottom;
}

.nowrap {
    white-space: nowrap;
}

.nowrapHeader th {
    white-space: nowrap;
}

.topRight {
    vertical-align: top;
    text-align: right;
}

.right {
    text-align: right;
}

.topLeft {
    vertical-align: top;
    text-align: left;
}

.bottomLeft {
    vertical-align: bottom;
    text-align: left;
}

.bottomRight {
    vertical-align: bottom;
    text-align: right;
}

.middleLeft {
    vertical-align: middle;
    text-align: left;
}

button.defaultWidth {
    min-width: 120px;
    max-width: 120px;
}

body .ui-button.removeBtn {
    background-color: #F44336;
}

body .ui-button.deleteBtn {
    background-color: #F44336;
}

.topRightNarrow {
    vertical-align: top;
    text-align: right;
    width: 1px;
}

.btnColumn {
    text-align: right;
    width: 52px;
}


.ui-inputtext.longWidth {
    width: 400px;
}
.ui-calendar.defaultWidth,
.ui-inputtext.defaultWidth,
.ui-inputmask.defaultWidth {
    width: 250px;
}

.ui-inputtext.shortWidth {
    width: 100px;
}

.ui-inputnumber.defaultWidth input {
    width: 250px;
}

.ui-selectonemenu.shortWidth {
    width: 100px;
}

.ui-selectonemenu.defaultWidth {
    width: 250px;
}

.ui-selectonemenu.longWidth {
    width: 400px;
}

.ui-selectmanymenu.defaultWidth {
    width: 250px;
}

.ui-inputtextarea.defaultWidth {
    width: 250px;
}

.ui-inputtextarea.longWidth {
    width: 400px;
}
.ui-autocomplete.defaultWidth input.ui-autocomplete-dd-input {
    width: 210px;
}
.ui-autocomplete.defaultWidth input {
    width: 250px;
}

.ui-autocomplete-multiple.defaultWidth ul {
    width: 250px;
}


.ui-password.defaultWidth {
    width: 250px;
}
.ui-inputgroup.defaultWidth {
    width: 250px;
}

.dynamicTable table {
    table-layout: auto !important;
}

.noHeader.ui-datatable table thead tr {
    display: none;
}

.w180px {
    width: 160px;
}

.labelValueTable {
    border: 1px;
    border-collapse: collapse;
}

.labelValueTable .label {
    border: 1px solid #bdbdbd;
    background-color: #f4f4f4;
    padding-left: 3px;
    min-width: 10em;
}


.labelValueTable .value {
    border: 1px solid #bdbdbd;
    padding-left: 3px;
    min-width: 10em;
}

.subtable .ui-column-title {
    display: inline !important;
}

.v-align-top {
    vertical-align: top !important;
}

.formLayoutInput {
}

/*
Required for showing time-picker icons
*/
.p-datepicker-panel .ui-timepicker .ui-icon {
    text-indent: 0px;
}

.infoMessage3 {
  color: green;
}

.warnMessage {
  color: orange;
}
.errorMessage {
    color: #D32F2F;
}

.field {
    margin-bottom: 0.5rem
}

.field label {
    margin-bottom: 0.1rem
}

.dynamicSearchField {
    flex-basis: 26em;
    max-width: 26em;
}

.fullWidthSteps .ui-wizard-step-titles {
    display: flex;
}

.fullWidthSteps .ui-wizard-step-title {
    flex-grow: 1;
    flex-basis: 0;
}

.wizardInDialog {
    height: 600px;
    width: 800px;
}

.wizardInDialog .ui-wizard-content {
    height: 100%;
    overflow: auto;
}

.media {
    align-items: flex-start;
    display: flex;
}

.media-left {
    margin-right: 0.5rem;
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
}

.media-content {
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 1;
}

.dashboardWidget {
    margin: 10px;
}

.dashboardWidget .ui-widget-content {
    height: calc(100% - 42px)
}

.dashboardLayoutImg {
    padding: 4px;
    display: flex;
    margin: 0 0 4px 0;
    background: lightgray;
}

.dashboardLayoutImg div {
    border: 2px solid gray;
    border-radius: 3px;
    height: 100%;
    margin: 0 2px;
}

.table-footer-icon {
    font-size: 1.5em;
}

.ui-inputgroup .ui-inputgroup-addon.icon-addon {
    padding: 0.1em 0.1em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-addon .las {
    font-size: 1.4em;
}

i.alert50,
span.alert50 {
    background: -webkit-linear-gradient(red, white);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

i.bookingShipped,
span.bookingShipped {
    animation-name: icon_alternate_gray_blue;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    color: gray;
}

.iconColumn {
    padding: 0.1rem 0.1rem !important;
    text-align: center;
}

.stickyHeader thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
}

.stickyHeader .ui-datatable-tablewrapper {
    max-height: var(--scrollHeight);
}

.stickyFirstColumn tbody td:first-child {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    left: 0;
    background-color: white;
    background-clip: padding-box;
    z-index: 1;
}

.stickyFirstColumn thead th:first-child {
    left: 0;
    top: 0;
    z-index: 2;
    background-clip: padding-box;
}

tr.ui-datatable-selectable td * {
    pointer-events: none;
}

.clickableTable tr td * {
    pointer-events: auto;
}

.unclickable {
    pointer-events: none !important;
}

.clickable {
    pointer-events: auto !important;
}

tr.ui-datatable-selectable td.clickableColumn * {
    pointer-events: auto;
}

@keyframes icon_alternate_gray_blue {
    0% {
        color: gray;
    }
    25% {
        color: blue;
    }
    75% {
        color: gray;
    }
}

@media screen and (min-width: 768px) {
    .inputMaskContainer {
        display: table;
    }

    .inputMaskRow {
        display: table-row;
    }

    .inputMaskLabel {
        display: table-cell;
        vertical-align: middle;
    }

    .inputMaskField {
        display: table-cell;
        padding-bottom: 3px;
    }

    .ui-selectonemenu-items-wrapper {
        max-height: 600px !important;
    }
}


.scql-autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
    max-height: 500px;
    overflow-y: auto;
}

.scql-autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

/*when hovering an item:*/
.scql-autocomplete-items div:hover {
    background-color: #e9e9e9;
}

/*when navigating through the items using the arrow keys:*/
.scql-autocomplete-active {
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.float-left-list li {
    float: left;
}

.cs-value {
    min-height: 1em;
}

.cs-label {
    font-weight: 600 !important;
    text-overflow: ellipsis !important;
    display: inline !important;
    overflow: hidden !important;
}

.overflow-hidden {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dynamicFormBlockDashboardElement .ui-panel-titlebar span {
    font-size: 1rem !important;
}

.dynamicFormBlockDashboardElement .ui-panel-titlebar {
    padding: 2px !important;
}

.dynamicFormBlockDashboardElement .ui-panel-content {
    display: none;
}

.tooltip {
    position: relative;
}

body .ui-panel {
    background-color: var(--content-bgcolor);
}

body .ui-panel .ui-panel-content {
    padding-top: 0;
}

body .ui-datatable thead th .ui-sortable-column-icon.ui-icon-carat-2-n-s:not(body .ui-datatable thead th .ui-sortable-column-icon.ui-icon-triangle-1-n):not(body .ui-datatable thead th .ui-sortable-column-icon.ui-icon-triangle-1-s) {
    opacity: 30%;
}

.login-body-sea {
    background: url("\/jakarta.faces.resource/images/vessel.jpg.xhtml?ln=gla") top left no-repeat #f7f7f7;
    background-size: 100% auto;
    padding-top: 1px;
}

.login-body-road {
    background: url("\/jakarta.faces.resource/images/truck.jpg.xhtml?ln=gla") top left no-repeat #f7f7f7;
    background-size: 100% auto;
    padding-top: 1px;
}

.login-body-sea {
    background: url("\/jakarta.faces.resource/images/vessel.jpg.xhtml?ln=gla") top left no-repeat #f7f7f7;
    background-size: 100% auto;
    padding-top: 1px;
}

.login-body-custom {
    background: url("\/jakarta.faces.resource/loginBackground.jpg.xhtml?ln=dynamicResources") top left no-repeat #f7f7f7;
    background-size: 100% auto;
    padding-top: 1px;
}

.login-panel {
    text-align: center;
    width: 350px;
    padding: 50px 20px;
    margin: 100px auto 0 auto;
}

.login-panel .grid .col-12 {
    padding: 25px 40px;
}

.login-footer {
    font-size: 16px;
    width: 100%;
    text-align: center;
    color: rgba(0, 0, 0, 0.6);
    margin-top: 20px;
    padding-bottom: 10px;
}

.chatMessagePanel {
    width: 100%;
    flex-grow: 1;
    overflow: auto;
}

.chatMessagePanel .incomingChatMessage {
    align-self: start;
    margin: 10px 4px;
    padding: 7px;
    border-radius: 8px 8px 8px 0;
    background-color: var(--primary-400);
    color: var(--primary-color-text);
}

.chatMessagePanel .outgoingChatMessage {
    align-self: end;
    text-align: right;
    margin: 10px 4px;
    padding: 7px;
    border-radius: 8px 8px 0 8px;
    background-color: var(--primary-600);
    color: var(--primary-color-text);
}

.chatMessagePanel .chatMessageHeader {
    opacity: 60%;
    font-size: 0.8em;
}

.chatMessagePanel .chatMessageText {
    white-space: pre-line;
}

.chatSelector {
    padding: 5px;
}

.chatSelector.selected {
    background-color: var(--primary-500);
    color: var(--primary-color-text);
}

.chatSelector:hover {
    background-color: var(--hover-bgcolor);
}

.colorOption {
    width: 1.75rem;
    height: 1.75rem;
    display: block;
    position: relative;
}

.colorOption .color {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid #E4E4E4;
}

.colorOption .check {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

body .ui-button.ui-button-icon-only .ui-icon.las {
    font-size: 1.5em;
    /*top: 22%;
    left: 23%;*/
    margin-top: -0.7rem;
    margin-left: -0.7rem;
}

body .ui-button.ui-button-icon-only .ui-icon.csi {
    font-size: 1.5em;
    /*top: 22%;
    left: 23%;*/
    margin-top: -0.7rem;
    margin-left: -0.7rem;
}

.exception-body {
    background-color: #f7f7f7;
    height: auto;
    margin: 0px;
    font-family: Roboto, "Helvetica Neue", sans-serif;
}

.exception-body .exception-type {
    background-color: #3f51b5;
}

.exception-body .exception-type {
    width: 100%;
    height: 50%;
    padding: 100px 100px 0 100px;
    box-sizing: border-box;
    text-align: center;
}

.exception-body .exception-panel {
    text-align: center;
    width: 350px;
    padding: 35px;
    margin: -10% auto 0 auto;
    z-index: 100;
}

.exception-body .exception-panel .exception-detail {
    margin: 20px 0px 100px 0px;
    color: rgba(0, 0, 0, 0.6);
}

.exception-body .exception-panel h1 {
    font-size: 36px;
    line-height: 36px;
    color: rgba(0, 0, 0, 0.6);
    margin-top: 2.5rem;
}

.exception-body .exception-panel i {
    font-size: 72px;
}

.exception-panel {
    background: #ffffff;
    padding: 1.25rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}

.exception-body .exception-panel i {
    color: #ec4b4b;
}

#page .ui-inputgroup .ui-button .ui-button-text {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.ui-state-disabled.show-tooltip {
    pointer-events: all;
}


/* Select Boolean Buttons */
.layout-wrapper.layout-menu-dark .ui-selectbooleanbutton.ui-state-active {
    background-color: var(--primary-color);
    color: var(--body-bgcolor);
}

.layout-wrapper.layout-menu-dark .ui-selectbooleanbutton.ui-state-active .ui-icon {
    color: var(--body-bgcolor);
}

.layout-wrapper.layout-menu-dark .ui-selectbooleanbutton.ui-state-active:hover {
    background-color: var(--primary-600);
    color: var(--body-bgcolor);
}

.layout-wrapper.layout-menu-dark .ui-selectbooleanbutton.ui-state-active:hover .ui-icon {
    color: var(--body-bgcolor);
}

.layout-wrapper.layout-menu-light .ui-selectbooleanbutton.ui-state-active {
    background-color: var(--primary-dark-color);
    border-color: var(--primary-dark-color);
    color: var(--primary-color-text);
}

.layout-wrapper.layout-menu-light .ui-selectbooleanbutton.ui-state-active .ui-icon {
    color: var(--primary-color-text);
}

.layout-wrapper.layout-menu-light .ui-selectbooleanbutton.ui-state-active:hover {
    background-color: var(--primary-400);
    border-color: var(--primary-400);
    color: var(--primary-color-text);
}

.ui-inputgroup.mot-selection-group .ui-selectbooleanbutton.ui-state-active.ui-state-focus {
    background-color: var(--primary-400);
}

.ui-inputgroup.mot-selection-group .ui-selectbooleanbutton.ui-state-active.ui-state-focus:hover {
    background-color: var(--primary-400);
}

.ui-inputgroup.mot-selection-group .ui-selectbooleanbutton:not(.ui-state-active).ui-state-focus {
    background-color: var(--hover-bgcolor);
}

.ui-inputgroup.mot-selection-group .ui-selectbooleanbutton:not(.ui-state-active).ui-state-focus:hover {
    background-color: var(--hover-bgcolor);
}

.layout-wrapper.layout-menu-light .ui-selectbooleanbutton.ui-state-active:hover .ui-icon {
    color: var(--primary-color-text);
}

.ui-inputgroup.mot-selection-group .ui-selectbooleanbutton:nth-child(1) {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.ui-inputgroup.mot-selection-group .ui-selectbooleanbutton:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.ui-inputgroup.mot-selection-group .ui-selectbooleanbutton .ui-button-text {
    font-weight: normal;
}

.ui-inputgroup.mot-selection-group .ui-selectbooleanbutton.ui-state-active:nth-last-child(n+2) {
    border-right-color: var(--primary-color-text);
}

.ui-inputgroup.mot-selection-group .ui-selectbooleanbutton.ui-state-active:hover:nth-last-child(n+2) {
    border-right-color: var(--primary-color-text);
}

body .ui-messages .ui-messages-close {
    position: relative;
    right: -2rem;
    top: -1.6rem;
}

body .ui-messages-sticked .ui-messages-warn,
body .ui-messages-sticked .ui-messages-info,
body .ui-messages-sticked .ui-messages-error {
    position: fixed;
    left: 5%;
    top: 6em;
    width: 90%;
    z-index: 1100;
    box-shadow: 0 4px 10px black;
}

body .ui-messages-sticked .ui-messages-warn .ui-messages-close,
body .ui-messages-sticked .ui-messages-info .ui-messages-close,
body .ui-messages-sticked .ui-messages-error .ui-messages-close {
    box-shadow: 0 2px 5px black;
}

/* Labeled Input */
@media screen and (min-width: 991px) {
    .cs-labeledinput-default {
        flex-basis: 15em;
        max-width: 30em;
    }

    .cs-labeledinput-slim {
        flex-basis: 15em;
        max-width: 30em;
    }

    .cs-labeledinput-wide {
        max-width: none;
    }

    .cs-labeledinput-unlimited {
        flex-basis: 15em;
    }
}

.cs-labeledinput-default {
    flex-grow: 1;
    flex-shrink: 0;
}

.cs-labeledinput-slim {
    flex-grow: 1;
    flex-shrink: 0;
}

.cs-labeledinput-unlimited {
    flex-grow: 1;
}

/* Table action icons */
body .ui-datatable .ui-datatable-data > tr .table-action, .table-action > a {
    width: 2rem;
    height: 2rem;
    background: transparent;
    color: rgba(0, 0, 0, 0.6);
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
    border-radius: 50%;
    border: 0 none;
    text-align: center;
    line-height: 2rem;
    padding: 0;
    user-select: none;
}

body .ui-datatable .