.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-triangl