@posiwise/shared-components 0.0.37 → 0.0.39

package/assets/scss/shared/_prime-ng.scss

@@ -1,5100 +0,0 @@
-* {
-    box-sizing: border-box;
-}
-
-body {
-    .ui-widget {
-        font-family: $mainFontFamily;
-        text-decoration: none;
-
-        .ui-widget {
-            font-family: $mainFontFamily;
-            text-decoration: none;
-        }
-
-        &:disabled {
-            filter: alpha(opacity=50);
-            opacity: 0.5;
-        }
-    }
-
-    .ui-corner-all {
-        border-radius: 2px;
-    }
-
-    a {
-        color: $ng-primary-color;
-
-        &:hover {
-            color: $anchorHover;
-        }
-
-        &:active {
-            color: $anchorActive;
-        }
-    }
-
-    .ui-helper-reset {
-        line-height: normal;
-    }
-
-    .ui-state-disabled {
-        filter: alpha(opacity=50);
-        opacity: 0.5;
-    }
-
-    .ui-inputtext {
-        appearance: none;
-        background: rgb(255 255 255);
-        border: 1px solid $uiinputText;
-        color: $font-color-main;
-        font-size: 13px;
-        padding: 0.429em;
-        transition: border-color 0.3s, box-shadow 0.3s;
-
-        &:enabled {
-            &:hover {
-                &:not(.ui-state-error) {
-                    border-color: $toggleButton;
-                }
-            }
-
-            &:focus {
-                &:not(.ui-state-error) {
-                    border-color: $toggleButton;
-                    box-shadow: 0 0 6px 0 rgb(0 0 0 / 16%);
-                    outline: 0 none;
-                }
-            }
-        }
-    }
-
-    .ui-inputtext.ng-dirty {
-        border-color: $invalidInput;
-    }
-
-    .ui-chkbox {
-        display: inline-block;
-        height: 20px;
-        margin: 0;
-        vertical-align: middle;
-        width: 20px;
-
-        .ui-chkbox-box {
-            background-color: rgb(255 255 255);
-            border: 1px solid $uiinputText;
-            border-radius: 0;
-            height: 20px;
-            text-align: center;
-            transition: background-color 0.3s, border-color 0.3s;
-            width: 20px;
-
-            &:not(.ui-state-disabled) {
-                &:hover {
-                    border-color: $toggleButton;
-                }
-            }
-
-            .ui-chkbox-icon {
-                font-size: 16px;
-                overflow: hidden;
-                position: relative;
-            }
-        }
-
-        .ui-chkbox-box.ui-state-focus {
-            background-color: rgb(255 255 255);
-            border-color: $ng-primary-color;
-            color: $ng-primary-color;
-        }
-
-        .ui-chkbox-box.ui-state-active {
-            background-color: $ng-primary-color;
-            border-color: $ng-primary-color;
-            color: rgb(255 255 255);
-
-            &:not(.ui-state-disabled) {
-                &:hover {
-                    background-color: $anchorActive;
-                    border-color: $anchorActive;
-                    color: rgb(255 255 255);
-                }
-            }
-        }
-
-        .ui-chkbox-box.ui-state-active.ui-state-focus {
-            background-color: $anchorHover;
-            border-color: $anchorHover;
-            color: rgb(255 255 255);
-        }
-    }
-
-    .ui-chkbox-label {
-        margin: 0 0 0 0.429em;
-    }
-
-    .ui-radiobutton {
-        display: inline-block;
-        height: 20px;
-        margin: 0;
-        vertical-align: middle;
-        width: 20px;
-
-        .ui-radiobutton-box {
-            background-color: rgb(255 255 255);
-            border: 1px solid $uiinputText;
-            border-radius: 50%;
-            height: 20px;
-            position: relative;
-            text-align: center;
-            transition: background-color 0.3s, border-color 0.3s;
-            width: 20px;
-
-            &:not(.ui-state-disabled) {
-                &:not(.ui-state-active) {
-                    &:hover {
-                        border-color: $toggleButton;
-                    }
-                }
-            }
-
-            .ui-radiobutton-icon {
-                background: transparent;
-                border-radius: 50%;
-                display: inline-block;
-                height: 10px;
-                left: 50%;
-                margin-left: -5px;
-                margin-top: -5px;
-                position: absolute;
-                top: 50%;
-                transition: background-color 0.3s;
-                width: 10px;
-
-                &::before {
-                    display: none;
-                }
-            }
-        }
-
-        .ui-radiobutton-box.ui-state-focus {
-            background-color: rgb(255 255 255);
-            border-color: $ng-primary-color;
-            color: $ng-primary-color;
-        }
-
-        .ui-radiobutton-box.ui-state-active {
-            background-color: $ng-primary-color;
-            border-color: $ng-primary-color;
-            color: rgb(255 255 255);
-
-            .ui-radiobutton-icon {
-                background-color: rgb(255 255 255);
-            }
-
-            &:not(.ui-state-disabled) {
-                &:hover {
-                    background-color: $anchorActive;
-                    border-color: $anchorActive;
-                    color: rgb(255 255 255);
-                }
-            }
-        }
-
-        .ui-radiobutton-box.ui-state-active.ui-state-focus {
-            background-color: $anchorHover;
-            border-color: $anchorHover;
-            color: rgb(255 255 255);
-        }
-    }
-
-    .ui-radiobutton-label {
-        margin: 0 0 0 0.5em;
-    }
-
-    .p-inputswitch {
-        height: 1em;
-        width: 2.615em !important;
-
-        .p-inputswitch-slider {
-            background-color: rgb(255 255 255);
-            border: 1px solid $uiinputText;
-            border-radius: 8px;
-            transition: border-color 0.3s;
-
-            &::before {
-                background-color: $inputswitchSlider;
-                border-radius: 50%;
-                bottom: -0.308em;
-                height: 1.538em;
-                left: 0;
-                margin-top: -0.7rem;
-                transition: 0.3s;
-                width: 1.538em;
-            }
-        }
-
-        &:not(.p-state-disabled) {
-            &:hover {
-                .p-inputswitch-slider {
-                    background-color: rgb(255 255 255);
-                }
-            }
-        }
-    }
-
-    .p-inputswitch.p-inputswitch-checked {
-        .p-inputswitch-slider {
-            background-color: $inputSwitchSldr;
-            border-color: $inputSwitchSldr;
-
-            &::before {
-                background-color: $enabledFocus;
-                transform: translateX(1.25em);
-            }
-        }
-
-        &:not(.p-state-disabled) {
-            &:hover {
-                .p-inputswitch-slider {
-                    background-color: $inputSwitchSldr;
-                    border-color: $inputSwitchSldr;
-                }
-            }
-        }
-    }
-
-    .p-inputswitch.p-focus {
-        .p-inputswitch-slider {
-            box-shadow: none;
-        }
-    }
-
-    .p-inputswitch.p-inputswitch-checked.p-inputswitch-focus {
-        .p-inputswitch-slider {
-            background: $inputSwitchSldr;
-            border-color: $inputSwitchSldr;
-        }
-    }
-
-    .p-autocomplete-input {
-        border: 1px solid rgb(128 128 128) !important;
-    }
-
-    .p-autocomplete-input.is-invalid {
-        border: 1px solid rgb(255 88 107) !important;
-    }
-
-    .skills-dropdown {
-        .p-autocomplete-multiple-container {
-            display: block;
-        }
-
-        .p-autocomplete-token {
-            margin-bottom: 5px;
-        }
-    }
-
-    .p-autocomplete.ui-autocomplete-multiple {
-        .p-autocomplete-multiple-container {
-            padding: 0.2145em 0.429em;
-
-            &:not(.ui-state-disabled) {
-                &:hover {
-                    border-color: $toggleButton;
-                }
-            }
-
-            &:not(.ui-state-disabled).ui-state-focus {
-                border-color: $toggleButton;
-                box-shadow: 0 0 6px 0 rgb(0 0 0 / 16%);
-                outline: 0 none;
-            }
-
-            .p-autocomplete-input-token {
-                margin: 0;
-                padding: 0.2145em 0;
-
-                input {
-                    font-family: $mainFontFamily;
-                    font-size: 13px;
-                    margin: 0;
-                    padding: 0;
-                }
-            }
-
-            .p-autocomplete-token {
-                background-color: $autoCompletebk;
-                background-image: linear-gradient($autoCompletebk, $tabColor);
-                border-color: rgb(0 0 0 / 8%);
-                color: $autoColor;
-                font-size: 13px;
-                margin: 0 0.286em 0 0;
-                padding: 0.2145em 0.429em;
-            }
-
-            .p-autocomplete-token-icon {
-                background: $autoCompleteicon;
-                border-radius: 50%;
-                color: rgb(255 255 255);
-                margin-right: 4px;
-                margin-top: -9px;
-                padding: 2px;
-            }
-        }
-    }
-
-    .p-autocomplete-panel {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
-        padding: 0;
-
-        .p-autocomplete-items {
-            padding: 0;
-
-            .p-autocomplete-list-item {
-                background-color: transparent;
-                border: 0 0;
-                border-radius: 0;
-                color: $font-color-main;
-                margin: 0;
-                padding: 0.429em 0.857em;
-            }
-
-            .p-autocomplete-list-item.p-state-highlight {
-                background-color: $ng-primary-color;
-                color: rgb(255 255 255);
-            }
-
-            .p-autocomplete-group {
-                background-color: $autoCompletegrp;
-                color: $font-color-main;
-                padding: 0.429em 0.857em;
-            }
-        }
-    }
-
-    .p-autocomplete-multiple-container,
-    .ui-fluid.skills-modal p-autocomplete {
-        background: transparent;
-
-        .p-autocomplete-input {
-            background: transparent;
-            border: 1px solid rgb(128 128 128);
-        }
-
-        .p-button-icon-only {
-            height: 34px;
-        }
-    }
-
-    .mb-3.ui-fluid.skills-modal.col-sm-4 {
-        padding-left: 0 !important;
-    }
-
-    span.ng-tns-c3-0.w-100.p-autocomplete.p-widget.p-autocomplete-dd {
-        width: calc(100% - 1em) !important;
-    }
-
-    .p-fluid {
-        .p-autocomplete-multiple.p-autocomplete-dd {
-            .p-autocomplete-multiple-container {
-                border-right: 0 0;
-                width: calc(100% - 2em);
-            }
-        }
-
-        .p-autocomplete-dd {
-            .p-inputtext {
-                border-right: 0 0;
-                float: left;
-                width: calc(100% - 2em);
-            }
-
-            .p-autocomplete-dropdown {
-                float: right;
-                transform: translateY(-100%);
-            }
-        }
-
-        .p-spinner {
-            .ui-spinner-input {
-                padding-right: 1.858em;
-            }
-
-            .p-spinner-button {
-                width: 1.429em;
-
-                .p-spinner-button-icon {
-                    left: 50%;
-                }
-            }
-        }
-
-        .ui-button-icon-only {
-            width: 2.143em;
-        }
-
-        .fc {
-            .fc-toolbar {
-                .ui-button {
-                    width: auto;
-                }
-            }
-        }
-    }
-
-    .ui-chips {
-        > ul.ui-inputtext {
-            display: inline-block;
-            padding: 0.2145em 0.429em;
-
-            &:not(.ui-state-disabled) {
-                &:hover {
-                    border-color: $toggleButton;
-                }
-            }
-
-            &:not(.ui-state-disabled).ui-state-focus {
-                border-color: $toggleButton;
-                box-shadow: 0 0 6px 0 rgb(0 0 0 / 16%);
-                outline: 0 none;
-            }
-
-            .ui-chips-input-token {
-                padding: 0.2145em 0;
-
-                input {
-                    font-family: $mainFontFamily;
-                    font-size: 13px;
-                    margin: 0;
-                    padding: 0;
-
-                    &:hover {
-                        border: 0 0;
-                    }
-
-                    &:focus {
-                        border: 0 0;
-                    }
-                }
-            }
-
-            .ui-chips-token {
-                background: $ng-primary-color;
-                color: rgb(255 255 255);
-                font-size: 13px;
-                margin: 0 0.286em 0 0;
-                padding: 0.2145em 0.429em;
-            }
-        }
-    }
-
-    .is-invalid {
-        .ui-dropdown,
-        .ql-snow {
-            border-color: rgb(255 88 107);
-        }
-    }
-
-    .p-multiselect.p-component {
-        height: 36px;
-        width: 100%;
-    }
-
-    .ui-dropdown {
-        background: rgb(255 255 255);
-        border: 1px solid $uiinputText;
-        transition: border-color 0.3s, box-shadow 0.3s;
-
-        &:not(.ui-state-disabled) {
-            &:hover {
-                border-color: $toggleButton;
-            }
-
-            &:focus {
-                border-color: $toggleButton;
-                box-shadow: 0 0 6px 0 rgb(0 0 0 / 16%);
-                outline: 0 none;
-            }
-        }
-
-        .ui-dropdown-label {
-            padding-right: 2em;
-        }
-
-        .ui-dropdown-trigger {
-            background-color: rgb(255 255 255);
-            color: $font-color-main;
-            line-height: 2em;
-            padding: 0;
-            text-align: center;
-            width: 2em;
-        }
-
-        &:not(.ui-state-disabled).ui-state-focus {
-            border-color: $toggleButton;
-            box-shadow: 0 0 6px 0 rgb(0 0 0 / 16%);
-            outline: 0 none;
-        }
-    }
-
-    .ui-dropdown-panel {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
-        padding: 0;
-
-        .ui-dropdown-filter-container {
-            background-color: rgb(255 255 255);
-            border-bottom: 1px solid $paginationHover;
-            color: $font-color-main;
-            margin: 0;
-            padding: 0.429em 0.857em;
-
-            .ui-dropdown-filter {
-                padding-right: 2em;
-                width: 100%;
-            }
-
-            .ui-dropdown-filter-icon {
-                color: $ng-primary-color;
-                margin-top: -0.5em;
-                right: 1.357em;
-                top: 50%;
-            }
-        }
-
-        .ui-dropdown-items {
-            padding: 0;
-
-            .ui-dropdown-item {
-                background-color: transparent;
-                border: 0 0;
-                border-radius: 0;
-                color: $font-color-main;
-                margin: 0;
-                padding: 0.429em 0.857em;
-
-                &:not(.ui-state-highlight) {
-                    &:not(.ui-state-disabled) {
-                        &:hover {
-                            background-color: $paginationHover;
-                            color: $font-color-main;
-                        }
-                    }
-                }
-            }
-
-            .ui-dropdown-item-group {
-                background-color: transparent;
-                border: 0 0;
-                border-radius: 0;
-                color: $font-color-main;
-                margin: 0;
-                padding: 0.429em 0.857em;
-
-                &:not(.ui-state-highlight) {
-                    &:not(.ui-state-disabled) {
-                        &:hover {
-                            background-color: $paginationHover;
-                            color: $font-color-main;
-                        }
-                    }
-                }
-            }
-
-            .ui-dropdown-item.ui-state-highlight {
-                background-color: $ng-primary-color;
-                color: rgb(255 255 255);
-            }
-
-            .ui-dropdown-item-group.ui-state-highlight {
-                background-color: $ng-primary-color;
-                color: rgb(255 255 255);
-            }
-        }
-    }
-
-    .ui-multiselect {
-        background: rgb(255 255 255);
-        border: 1px solid $uiinputText;
-        transition: border-color 0.3s, box-shadow 0.3s;
-
-        &:not(.ui-state-disabled) {
-            &:hover {
-                border-color: $toggleButton;
-            }
-
-            &:focus {
-                border-color: $toggleButton;
-                box-shadow: 0 0 6px 0 rgb(0 0 0 / 16%);
-                outline: 0 none;
-            }
-        }
-
-        .ui-multiselect-label {
-            padding: 0.429em;
-            padding-right: 2em;
-        }
-
-        .ui-multiselect-trigger {
-            background-color: rgb(255 255 255);
-            color: $font-color-main;
-            line-height: 2em;
-            padding: 0;
-            text-align: center;
-            width: 2em;
-        }
-    }
-
-    .ui-multiselect-panel {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
-        padding: 0;
-
-        .ui-multiselect-header {
-            background-color: rgb(255 255 255);
-            border-bottom: 1px solid $paginationHover;
-            color: $font-color-main;
-            margin: 0;
-            padding: 0.429em 0.857em;
-
-            .ui-multiselect-filter-container {
-                display: inline-block;
-                float: none;
-                margin-left: 0;
-                vertical-align: middle;
-                width: 70%;
-
-                .ui-inputtext {
-                    padding: 0.429em;
-                    padding-right: 2em;
-                }
-
-                .ui-multiselect-filter-icon {
-                    color: $ng-primary-color;
-                    left: auto;
-                    margin-top: -0.5em;
-                    right: 0.5em;
-                    top: 50%;
-                }
-            }
-
-            .ui-chkbox {
-                float: none;
-                margin-right: 0.429em;
-                vertical-align: middle;
-            }
-
-            .ui-multiselect-close {
-                color: $font-color-main;
-                margin-top: -0.5em;
-                right: 0.857em;
-                top: 50%;
-                transition: color 0.3s;
-
-                &:hover {
-                    color: $ng-primary-color;
-                }
-
-                &:focus {
-                    color: $ng-primary-color;
-                    outline: 0 none;
-                }
-            }
-        }
-
-        .ui-multiselect-items {
-            padding: 0;
-
-            .ui-multiselect-item {
-                background-color: transparent;
-                border: 0 0;
-                border-radius: 0;
-                color: $font-color-main;
-                margin: 0;
-                padding: 0.429em 0.857em;
-
-                span {
-                    color: rgb(0 0 0);
-                }
-
-                &:not(.ui-state-highlight) {
-                    &:not(.ui-state-disabled) {
-                        &:hover {
-                            background-color: $paginationHover;
-                            color: $font-color-main;
-                        }
-                    }
-                }
-
-                .ui-chkbox {
-                    display: inline-block;
-                    margin: 0 0.429em 0 0;
-                    position: static;
-                    vertical-align: middle;
-                }
-
-                label {
-                    display: inline-block;
-                    vertical-align: middle;
-                }
-            }
-
-            .ui-multiselect-item.ui-state-highlight {
-                background-color: $ng-primary-color;
-                color: rgb(255 255 255);
-            }
-        }
-    }
-
-    .ui-listbox {
-        background: rgb(255 255 255);
-        border: 1px solid $uiinputText;
-        min-width: 12em;
-        padding: 0;
-
-        .ui-chkbox {
-            margin: 0 0.429em 0 0;
-        }
-
-        .ui-listbox-header {
-            background-color: rgb(255 255 255);
-            border-bottom: 1px solid $paginationHover;
-            color: $font-color-main;
-            margin: 0;
-            padding: 0.429em 0.857em;
-
-            .ui-listbox-filter-container {
-                width: calc(100% - (0.857em + 0.857em + 0.429em));
-
-                input {
-                    padding: 0.429em;
-                    padding-right: 2em;
-                }
-
-                .ui-listbox-filter-icon {
-                    color: $ng-primary-color;
-                    left: auto;
-                    margin-top: -0.5em;
-                    right: 0.5em;
-                    top: 50%;
-                }
-            }
-        }
-
-        .ui-listbox-list {
-            .ui-listbox-item {
-                background-color: transparent;
-                border: 0 0;
-                border-radius: 0;
-                color: $font-color-main;
-                margin: 0;
-                padding: 0.429em 0.857em;
-
-                .ui-chkbox {
-                    display: inline-block;
-                    margin: 0 0.429em 0 0;
-                    position: static;
-                    vertical-align: middle;
-                }
-
-                label {
-                    display: inline-block;
-                    vertical-align: middle;
-                }
-            }
-
-            .ui-listbox-item.ui-state-highlight {
-                background-color: $ng-primary-color;
-                color: rgb(255 255 255);
-            }
-        }
-
-        &:not(.ui-state-disabled) {
-            .ui-listbox-item {
-                &:not(.ui-state-highlight) {
-                    &:hover {
-                        background-color: $paginationHover;
-                        color: $font-color-main;
-                    }
-                }
-            }
-        }
-    }
-
-    .ui-listbox.ui-state-disabled {
-        .ui-chkbox-box {
-            &:not(.ui-state-disabled) {
-                &:not(.ui-state-active) {
-                    &:hover {
-                        border: 1px solid $uiinputText;
-                    }
-                }
-            }
-        }
-    }
-
-    .ui-editor-container {
-        .ui-editor-toolbar {
-            background-color: rgb(239 239 239);
-        }
-
-        .ql-picker.ql-expanded {
-            .ql-picker-label {
-                color: $font-color-main;
-            }
-        }
-
-        .ql-stroke {
-            stroke: $font-color-main;
-        }
-
-        .ql-picker-label {
-            color: $font-color-main;
-        }
-
-        .ql-snow.ql-toolbar {
-            button {
-                &:hover {
-                    color: $carouselPagelink;
-
-                    .ql-stroke {
-                        stroke: $carouselPagelink;
-                    }
-
-                    .ql-stroke-miter {
-                        stroke: $carouselPagelink;
-                    }
-                }
-            }
-
-            button.ql-active {
-                color: $carouselPagelink;
-
-                .ql-stroke {
-                    stroke: $carouselPagelink;
-                }
-
-                .ql-stroke-miter {
-                    stroke: $carouselPagelink;
-                }
-            }
-
-            .ql-picker-label {
-                &:hover {
-                    color: $carouselPagelink;
-
-                    .ql-stroke {
-                        stroke: $carouselPagelink;
-                    }
-
-                    .ql-stroke-miter {
-                        stroke: $carouselPagelink;
-                    }
-                }
-            }
-
-            .ql-picker-label.ql-active {
-                color: $carouselPagelink;
-
-                .ql-stroke {
-                    stroke: $carouselPagelink;
-                }
-
-                .ql-stroke-miter {
-                    stroke: $carouselPagelink;
-                }
-            }
-
-            .ql-picker-item {
-                &:hover {
-                    color: $carouselPagelink;
-
-                    .ql-stroke {
-                        stroke: $carouselPagelink;
-                    }
-
-                    .ql-stroke-miter {
-                        stroke: $carouselPagelink;
-                    }
-                }
-            }
-
-            .ql-picker-item.ql-selected {
-                color: $carouselPagelink;
-
-                .ql-stroke {
-                    stroke: $carouselPagelink;
-                }
-
-                .ql-stroke-miter {
-                    stroke: $carouselPagelink;
-                }
-            }
-        }
-
-        .ql-snow {
-            .ql-toolbar {
-                button {
-                    &:hover {
-                        color: $carouselPagelink;
-
-                        .ql-stroke {
-                            stroke: $carouselPagelink;
-                        }
-
-                        .ql-stroke-miter {
-                            stroke: $carouselPagelink;
-                        }
-                    }
-                }
-
-                button.ql-active {
-                    color: $carouselPagelink;
-
-                    .ql-stroke {
-                        stroke: $carouselPagelink;
-                    }
-
-                    .ql-stroke-miter {
-                        stroke: $carouselPagelink;
-                    }
-                }
-
-                .ql-picker-label {
-                    &:hover {
-                        color: $carouselPagelink;
-
-                        .ql-stroke {
-                            stroke: $carouselPagelink;
-                        }
-
-                        .ql-stroke-miter {
-                            stroke: $carouselPagelink;
-                        }
-                    }
-                }
-
-                .ql-picker-label.ql-active {
-                    color: $carouselPagelink;
-
-                    .ql-stroke {
-                        stroke: $carouselPagelink;
-                    }
-
-                    .ql-stroke-miter {
-                        stroke: $carouselPagelink;
-                    }
-                }
-
-                .ql-picker-item {
-                    &:hover {
-                        color: $carouselPagelink;
-
-                        .ql-stroke {
-                            stroke: $carouselPagelink;
-                        }
-
-                        .ql-stroke-miter {
-                            stroke: $carouselPagelink;
-                        }
-                    }
-                }
-
-                .ql-picker-item.ql-selected {
-                    color: $carouselPagelink;
-
-                    .ql-stroke {
-                        stroke: $carouselPagelink;
-                    }
-
-                    .ql-stroke-miter {
-                        stroke: $carouselPagelink;
-                    }
-                }
-            }
-        }
-    }
-
-    .ui-rating {
-        a {
-            color: $font-color-main;
-            display: inline-block;
-            text-align: center;
-            transition: color 0.3s;
-
-            &:hover {
-                color: $anchorActive;
-            }
-
-            .pi-star {
-                color: $ng-primary-color;
-            }
-
-            .ui-rating-icon {
-                font-size: 1.429em;
-            }
-        }
-
-        a.ui-rating-cancel {
-            color: $ratingCancel;
-
-            &:hover {
-                color: $ratingHover;
-            }
-        }
-    }
-
-    .ui-spinner {
-        .ui-spinner-input {
-            padding-right: 1.858em;
-        }
-
-        .ui-spinner-button {
-            width: 1.429em;
-
-            .ui-spinner-button-icon {
-                left: 50%;
-                margin-left: -0.5em;
-                margin-top: -0.5em;
-                position: absolute;
-                top: 50%;
-                width: 1em;
-            }
-        }
-    }
-
-    .ui-progress-spinner {
-        height: 70px !important;
-        width: 70px !important;
-    }
-
-    .ui-slider {
-        background-color: $uiinputText;
-        border: 0 0;
-
-        .ui-slider-handle {
-            background-color: rgb(255 255 255);
-            border: 2px solid $toggleButton;
-            border-radius: 50%;
-            height: 1.429em;
-            transition: background-color 0.3s;
-            width: 1.429em;
-        }
-
-        .ui-slider-range {
-            background-color: $ng-primary-color;
-        }
-
-        &:not(.ui-state-disabled) {
-            .ui-slider-handle {
-                &:hover {
-                    background-color: 2px solid $toggleButton;
-                    border: 2px solid $ng-primary-color;
-                }
-            }
-        }
-    }
-
-    .ui-slider.ui-slider-horizontal {
-        height: 0.286em;
-
-        .ui-slider-handle {
-            margin-top: -0.7145em;
-            top: 50%;
-        }
-    }
-
-    .ui-slider.ui-slider-vertical {
-        width: 0.286em;
-
-        .ui-slider-handle {
-            left: 50%;
-            margin-left: -0.7145em;
-        }
-    }
-
-    .ui-calendar .ui-datepicker {
-        min-width: auto;
-    }
-
-    .ui-datepicker {
-        background-color: rgb(255 255 255);
-        border: 1px solid $datePickerBorder;
-        padding: 0.857em;
-        width: 20em;
-
-        &:not(.ui-datepicker-inline) {
-            border: 1px solid $selectButton;
-            box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);
-        }
-
-        &:not(.ui-state-disabled) {
-            .ui-datepicker-header {
-                .ui-datepicker-prev:hover,
-                .ui-datepicker-next:hover {
-                    color: $ng-primary-color;
-                }
-
-                .ui-datepicker-prev:focus,
-                .ui-datepicker-next:focus {
-                    color: $ng-primary-color;
-                    outline: 0 none;
-                }
-            }
-
-            table td:not(.ui-state-disabled) a:not(.ui-state-active):not(.ui-state-highlight):hover,
-            .ui-monthpicker a.ui-monthpicker-month:not(.ui-state-active):hover {
-                background-color: $paginationHover;
-            }
-        }
-
-        .ui-datepicker-header {
-            background-color: rgb(255 255 255);
-            border-radius: 0;
-            color: $font-color-main;
-            padding: 0.429em 0.857em;
-
-            .ui-datepicker-prev,
-            .ui-datepicker-next {
-                color: $datePickerBorder;
-                cursor: pointer;
-                top: 0;
-                transition: color 0.3s;
-            }
-
-            .ui-datepicker-title {
-                line-height: 1;
-                margin: 0;
-                padding: 0;
-            }
-        }
-
-        table {
-            font-size: 14px;
-            margin: 0.857em 0 0;
-
-            th {
-                padding: 0.286em;
-            }
-
-            td {
-                padding: 0.286em;
-
-                > {
-                    a,
-                    span {
-                        border-radius: 2px;
-                        color: $font-color-main;
-                        display: block;
-                        height: 2em;
-                        padding: 0.2em;
-                        text-align: center;
-                        width: 2em;
-                    }
-
-                    a {
-                        border-radius: 50%;
-                        cursor: pointer;
-
-                        &.ui-state-active {
-                            background-color: $ng-primary-color;
-                            color: rgb(255 255 255);
-                        }
-
-                        &.ui-state-highlight {
-                            background-color: $dateHighLight;
-                            color: $font-color-main;
-                        }
-                    }
-                }
-
-                &.ui-datepicker-today a {
-                    background-color: $dateHighLight;
-                    border-radius: 50%;
-                    color: $font-color-main;
-                }
-            }
-        }
-
-        .ui-timepicker {
-            border: 0 0;
-            border-top: 1px solid $autoCompletegrp;
-            padding: 0.857em;
-
-            a {
-                color: $font-color-main;
-                font-size: 1.286em;
-
-                &:hover {
-                    color: $ng-primary-color;
-                }
-            }
-
-            span {
-                font-size: 1.286em;
-            }
-        }
-
-        .ui-monthpicker .ui-monthpicker-month {
-            color: $font-color-main;
-
-            &.ui-state-active {
-                background-color: $ng-primary-color;
-                color: rgb(255 255 255);
-            }
-        }
-
-        &.ui-datepicker-timeonly {
-            padding: 0;
-
-            .ui-timepicker {
-                border-top: 0 0;
-            }
-        }
-
-        &.ui-datepicker-multiple-month {
-            width: auto;
-
-            .ui-datepicker-group {
-                border-right: 1px solid $datePickerBorder;
-                padding-bottom: 0;
-                padding-left: 0.857em;
-                padding-right: 0.857em;
-                padding-top: 0;
-
-                &:first-child {
-                    padding-left: 0;
-                }
-
-                &:last-child {
-                    border-right: 0 0;
-                    padding-right: 0;
-                }
-            }
-        }
-    }
-
-    .ui-calendar.ui-calendar-w-btn {
-        .ui-inputtext {
-            border-bottom-right-radius: 0;
-            -moz-border-radius-bottomright: 0;
-            -moz-border-radius-topright: 0;
-            border-right: 0 0;
-            border-top-right-radius: 0;
-
-            &:enabled {
-                &:hover:not(.ui-state-error),
-                &:focus:not(.ui-state-error) {
-                    border-right: 0 0;
-                }
-            }
-        }
-
-        .ui-datepicker-trigger.ui-button {
-            border-bottom-left-radius: 0;
-            -moz-border-radius-bottomleft: 0;
-            -moz-border-radius-topleft: 0;
-            border-top-left-radius: 0;
-            position: absolute;
-            width: 2.357em;
-        }
-    }
-
-    .ui-inplace {
-        min-height: 2.143em;
-
-        .ui-inplace-display {
-            border-radius: 0;
-            padding: 0.429em;
-            transition: background-color 0.3s;
-
-            &:not(.ui-state-disabled) {
-                &:hover {
-                    background-color: $paginationHover;
-                    color: $font-color-main;
-                }
-            }
-        }
-
-        .ui-inplace-content {
-            > * {
-                vertical-align: middle;
-            }
-        }
-    }
-
-    .ui-fileupload {
-        .ui-fileupload-buttonbar {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-            border-bottom: 0 0;
-            color: $font-color-main;
-            padding: 0.857em 1em;
-
-            .ui-button {
-                margin-right: 8px;
-            }
-        }
-
-        .ui-fileupload-content {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            padding: 0.571em 1em;
-        }
-
-        .ui-progressbar {
-            top: 0;
-        }
-    }
-
-    .ui-fileupload-choose {
-        &:not(.ui-state-disabled) {
-            &:hover {
-                background-color: $anchorHover;
-                border-color: $anchorHover;
-                color: rgb(255 255 255);
-            }
-
-            &:active {
-                background-color: $anchorActive;
-                border-color: $anchorActive;
-                color: rgb(255 255 255);
-            }
-        }
-    }
-
-    .ui-fileupload-choose.ui-state-focus {
-        outline: 1px solid $ng-primary-color;
-        outline-offset: 1px;
-    }
-
-    .ui-password-panel {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
-        color: $font-color-main;
-        padding: 0.857em;
-    }
-
-    .ui-inputgroup {
-        .ui-inputgroup-addon {
-            background-color: $inputGroundaddon;
-            border-color: $uiinputText;
-            color: $font-color-main;
-            min-width: 2em;
-            padding: 0.429em;
-
-            &:first-child {
-                border-bottom-left-radius: 0;
-                -moz-border-radius-bottomleft: 0;
-                -moz-border-radius-topleft: 0;
-                border-top-left-radius: 0;
-            }
-
-            &:last-child {
-                border-bottom-right-radius: 0;
-                -moz-border-radius-bottomright: 0;
-                -moz-border-radius-topright: 0;
-                border-top-right-radius: 0;
-            }
-        }
-
-        .ui-inputgroup-addon.ui-inputgroup-addon-checkbox {
-            position: relative;
-
-            .ui-chkbox {
-                left: 50%;
-                margin-left: -10px;
-                margin-top: -10px;
-                position: absolute;
-                top: 50%;
-            }
-        }
-
-        .ui-inputgroup-addon.ui-inputgroup-addon-radiobutton {
-            position: relative;
-
-            .ui-radiobutton {
-                left: 50%;
-                margin-left: -10px;
-                margin-top: -10px;
-                position: absolute;
-                top: 50%;
-            }
-        }
-
-        .ui-button {
-            &:first-child {
-                border-bottom-left-radius: 0;
-                -moz-border-radius-bottomleft: 0;
-                -moz-border-radius-topleft: 0;
-                border-top-left-radius: 0;
-            }
-
-            &:last-child {
-                border-bottom-right-radius: 0;
-                -moz-border-radius-bottomright: 0;
-                -moz-border-radius-topright: 0;
-                border-top-right-radius: 0;
-            }
-        }
-    }
-
-    /* &::input-placeholder {
-        color: $placeHolder;
-    } */
-
-    &:placeholder {
-        color: $placeHolder;
-    }
-
-    &::placeholder {
-        color: $placeHolder;
-    }
-
-    /*
-    &:input-placeholder {
-        color: $placeHolder;
-    } */
-
-    .ui-inputtext.ng-dirty.ng-invalid {
-        border-color: $invalidInput;
-    }
-
-    p-dropdown.ng-dirty.ng-invalid {
-        > .ui-dropdown {
-            border-color: $invalidInput;
-        }
-    }
-
-    p-autocomplete.ng-dirty.ng-invalid {
-        > .ui-autocomplete {
-            > .ui-inputtext {
-                border-color: $invalidInput;
-            }
-        }
-    }
-
-    p-calendar.ng-dirty.ng-invalid {
-        > .ui-calendar {
-            > .ui-inputtext {
-                border-color: $invalidInput;
-            }
-        }
-    }
-
-    p-chips.ng-dirty.ng-invalid {
-        > .ui-inputtext {
-            border-color: $invalidInput;
-        }
-    }
-
-    p-inputmask.ng-dirty.ng-invalid {
-        > .ui-inputtext {
-            border-color: $invalidInput;
-        }
-    }
-
-    p-checkbox.ng-dirty.ng-invalid {
-        .ui-chkbox-box {
-            border-color: $invalidInput;
-        }
-    }
-
-    p-radiobutton.ng-dirty.ng-invalid {
-        .ui-radiobutton-box {
-            border-color: $invalidInput;
-        }
-    }
-
-    p-inputswitch.ng-dirty.ng-invalid {
-        .p-inputswitch {
-            border-color: $invalidInput;
-        }
-    }
-
-    p-listbox.ng-dirty.ng-invalid {
-        .ui-inputtext {
-            border-color: $invalidInput;
-        }
-    }
-
-    p-multiselect.ng-dirty.ng-invalid {
-        > .ui-multiselect {
-            border-color: $invalidInput;
-        }
-    }
-
-    p-spinner.ng-dirty.ng-invalid {
-        > .ui-inputtext {
-            border-color: $invalidInput;
-        }
-    }
-
-    p-selectbutton.ng-dirty.ng-invalid {
-        .ui-button {
-            border-color: $invalidInput;
-        }
-    }
-
-    p-togglebutton.ng-dirty.ng-invalid {
-        .ui-button {
-            border-color: $invalidInput;
-        }
-    }
-
-    .ui-button {
-        background-color: $ng-primary-color;
-        border: 1px solid $ng-primary-color;
-        color: rgb(255 255 255);
-        font-size: 13px;
-        margin: 0;
-        transition: background-color 0.3s;
-
-        &:enabled {
-            &:hover {
-                background-color: $anchorHover;
-                border-color: $anchorHover;
-                color: rgb(255 255 255);
-            }
-
-            &:focus {
-                background-color: $enabledFocus;
-                outline: 1px solid $ng-primary-color;
-                outline-offset: 1px;
-            }
-
-            &:active {
-                background-color: $anchorActive;
-                border-color: $anchorActive;
-                color: rgb(255 255 255);
-            }
-        }
-    }
-
-    .ui-button.ui-button-text-only {
-        .ui-button-text {
-            padding: 0.429em 1em;
-        }
-    }
-
-    .ui-button.ui-button-text-icon-left {
-        .ui-button-text {
-            padding: 0.429em 1em 0.429em 2em;
-        }
-    }
-
-    .ui-button.ui-button-text-icon-right {
-        .ui-button-text {
-            padding: 0.429em 2em 0.429em 1em;
-        }
-    }
-
-    .ui-button.ui-button-icon-only {
-        width: 2.143em;
-
-        .ui-button-text {
-            padding: 0.429em;
-        }
-    }
-
-    .ui-button.ui-button-raised {
-        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
-    }
-
-    .ui-button.ui-button-rounded {
-        border-radius: 1em;
-    }
-
-    .ui-togglebutton {
-        background-color: $tabView;
-        border: 1px solid $tabView;
-        color: $font-color-main;
-        transition: background-color 0.3s;
-
-        .ui-button-icon-left {
-            color: $placeHolder;
-        }
-
-        &:not(.ui-state-disabled) {
-            &:not(.ui-state-active) {
-                &:hover {
-                    background-color: $selectButton;
-                    border-color: $selectButton;
-                    color: $font-color-main;
-
-                    .ui-button-icon-left {
-                        color: $toastmsgSuccess;
-                    }
-                }
-            }
-
-            &:not(.ui-state-active).ui-state-focus {
-                background-color: $selectButton;
-                border-color: $toggleButton;
-                color: $font-color-main;
-                outline: 0 none;
-
-                .ui-button-icon-left {
-                    color: $toastmsgSuccess;
-                }
-            }
-        }
-    }
-
-    .ui-togglebutton.ui-state-active {
-        background-color: $ng-primary-color;
-        border-color: $ng-primary-color;
-        color: rgb(255 255 255);
-
-        .ui-button-icon-left {
-            color: rgb(255 255 255);
-        }
-
-        &:hover {
-            background-color: $anchorActive;
-            border-color: $anchorActive;
-            color: rgb(255 255 255);
-
-            .ui-button-icon-left {
-                color: rgb(255 255 255);
-            }
-        }
-    }
-
-    .ui-togglebutton.ui-state-active.ui-state-focus {
-        background-color: $ng-primary-color;
-        border-color: $toggleButton;
-        color: rgb(255 255 255);
-
-        .ui-button-icon-left {
-            color: rgb(255 255 255);
-        }
-    }
-
-    .p-selectbutton {
-        .p-button {
-            background-color: $tabView;
-            border: 1px solid $tabView;
-            color: $font-color-main;
-            transition: background-color 0.3s;
-
-            .p-button-icon-left {
-                color: $placeHolder;
-            }
-
-            &:not(.p-state-disabled) {
-                &:not(.p-highlight) {
-                    &:hover {
-                        background-color: $selectButton;
-                        color: $font-color-main;
-
-                        .p-button-icon-left {
-                            color: $toastmsgSuccess;
-                        }
-                    }
-                }
-
-                &:not(.p-highlight) {
-                    background-color: $selectButton;
-                    color: $font-color-main;
-                    outline: 0 none;
-
-                    .p-button-icon-left {
-                        color: $toastmsgSuccess;
-                    }
-                }
-            }
-
-            &:first-child {
-                border-bottom-left-radius: 0;
-                -moz-border-radius-bottom-left: 0;
-                -moz-border-radius-top-left: 0;
-                border-top-left-radius: 0;
-            }
-
-            &:last-child {
-                border-bottom-right-radius: 0;
-                -moz-border-radius-bottomright: 0;
-                -moz-border-radius-topright: 0;
-                border-top-right-radius: 0;
-            }
-
-            &:focus {
-                box-shadow: none;
-            }
-        }
-
-        .p-button.p-highlight {
-            background-color: $ng-primary-color;
-            border-color: $ng-primary-color;
-            color: rgb(255 255 255);
-
-            .p-button-icon-left {
-                color: rgb(255 255 255);
-            }
-
-            &:hover {
-                background-color: $anchorActive;
-                border-color: $anchorActive;
-                color: rgb(255 255 255);
-
-                .p-button-icon-left {
-                    color: rgb(255 255 255);
-                }
-            }
-        }
-
-        .p-button.p-state-active.p-state-focus {
-            background-color: $ng-primary-color;
-            border-color: $toggleButton;
-            color: rgb(255 255 255);
-
-            .p-button-icon-left {
-                color: rgb(255 255 255);
-            }
-        }
-    }
-
-    .ui-splitbutton.ui-buttonset {
-        .ui-button {
-            border: 1px solid transparent;
-        }
-
-        .ui-menu {
-            min-width: 12.5em;
-            width: 100%;
-        }
-    }
-
-    .ui-button.ui-state-default.ui-button-secondary {
-        background-color: $primeSecondaryButton;
-        border: 1px solid $primeSecondaryButton;
-        color: $font-color-main;
-
-        &:enabled {
-            &:hover {
-                background-color: $tabView;
-                border-color: $tabView;
-                color: $toastmsgSuccess;
-            }
-
-            &:focus {
-                background-color: $ng-gray;
-            }
-
-            &:active {
-                background-color: $ng-primary-color;
-                border-color: $ng-primary-color;
-                color: rgb(255 255 255);
-            }
-        }
-    }
-
-    .ui-buttonset.ui-button-secondary {
-        > .ui-button.ui-state-default {
-            background-color: $primeSecondaryButton;
-            border: 1px solid $primeSecondaryButton;
-            color: $font-color-main;
-
-            &:enabled {
-                &:hover {
-                    background-color: $tabView;
-                    border-color: $tabView;
-                    color: $toastmsgSuccess;
-                }
-
-                &:focus {
-                    background-color: $ng-gray;
-                }
-
-                &:active {
-                    background-color: $ng-primary-color;
-                    border-color: $ng-primary-color;
-                    color: rgb(255 255 255);
-                }
-            }
-        }
-    }
-
-    .ui-button.ui-state-default.ui-button-info {
-        background-color: $buttonState;
-        border: 1px solid $buttonState;
-        color: rgb(255 255 255);
-
-        &:enabled {
-            &:hover {
-                background-color: $buttonInfohover;
-                border-color: $buttonInfohover;
-                color: rgb(255 255 255);
-            }
-
-            &:focus {
-                background-color: $buttonInfofocus;
-            }
-
-            &:active {
-                background-color: $buttonInfo;
-                border-color: $buttonInfo;
-                color: rgb(255 255 255);
-            }
-        }
-    }
-
-    .ui-buttonset.ui-button-info {
-        > .ui-button.ui-state-default {
-            background-color: $buttonState;
-            border: 1px solid $buttonState;
-            color: rgb(255 255 255);
-
-            &:enabled {
-                &:hover {
-                    background-color: $buttonInfohover;
-                    border-color: $buttonInfohover;
-                    color: rgb(255 255 255);
-                }
-
-                &:focus {
-                    background-color: $buttonInfofocus;
-                }
-
-                &:active {
-                    background-color: $buttonInfo;
-                    border-color: $buttonInfo;
-                    color: rgb(255 255 255);
-                }
-            }
-        }
-    }
-
-    .ui-button.ui-state-default.ui-button-success {
-        background-color: $buttonSetColor;
-        border: 1px solid $buttonSetColor;
-        color: rgb(255 255 255);
-
-        &:enabled {
-            &:hover {
-                background-color: $primeStateButtonSuccess;
-                border-color: $primeStateButtonSuccess;
-                color: rgb(255 255 255);
-            }
-
-            &:focus {
-                background-color: $primeStateButtonfocus;
-            }
-
-            &:active {
-                background-color: $primeStateButtonactive;
-                border-color: $primeStateButtonactive;
-                color: rgb(255 255 255);
-            }
-        }
-    }
-
-    .ui-buttonset.ui-button-success {
-        > .ui-button.ui-state-default {
-            background-color: $buttonSetColor;
-            border: 1px solid $buttonSetColor;
-            color: rgb(255 255 255);
-
-            &:enabled {
-                &:hover {
-                    background-color: $primeStateButtonSuccess;
-                    border-color: $primeStateButtonSuccess;
-                    color: rgb(255 255 255);
-                }
-
-                &:focus {
-                    background-color: $primeStateButtonfocus;
-                }
-
-                &:active {
-                    background-color: $primeStateButtonactive;
-                    border-color: $primeStateButtonactive;
-                    color: rgb(255 255 255);
-                }
-            }
-        }
-    }
-
-    .ui-button.ui-state-default.ui-button-warning {
-        background-color: $buttonWarning;
-        border: 1px solid $buttonWarning;
-        color: $font-color-main;
-
-        &:enabled {
-            &:hover {
-                background-color: $primeStateButtonwarning;
-                border-color: $primeStateButtonwarning;
-                color: $font-color-main;
-            }
-
-            &:focus {
-                background-color: $primeButtonwarningFocus;
-            }
-
-            &:active {
-                background-color: $primeButtonwarningactive;
-                border-color: $primeButtonwarningactive;
-                color: $font-color-main;
-            }
-        }
-    }
-
-    .ui-buttonset.ui-button-warning {
-        > .ui-button.ui-state-default {
-            background-color: $buttonWarning;
-            border: 1px solid $buttonWarning;
-            color: $font-color-main;
-
-            &:enabled {
-                &:hover {
-                    background-color: $primeStateButtonwarning;
-                    border-color: $primeStateButtonwarning;
-                    color: $font-color-main;
-                }
-
-                &:focus {
-                    background-color: $primeButtonwarningFocus;
-                }
-
-                &:active {
-                    background-color: $primeButtonwarningactive;
-                    border-color: $primeButtonwarningactive;
-                    color: $font-color-main;
-                }
-            }
-        }
-    }
-
-    .ui-button.ui-state-default.ui-button-danger {
-        background-color: $primeButtonDangeractive;
-        border: 1px solid $primeButtonDangeractive;
-        color: rgb(255 255 255);
-
-        &:enabled {
-            &:hover {
-                background-color: $primeButtonSethover;
-                border-color: $primeButtonSethover;
-                color: rgb(255 255 255);
-            }
-
-            &:focus {
-                background-color: $primeButtonSetFocus;
-            }
-
-            &:active {
-                background-color: $primeButtonSetactive;
-                border-color: $primeButtonSetactive;
-                color: rgb(255 255 255);
-            }
-        }
-    }
-
-    .ui-buttonset.ui-button-danger {
-        > .ui-button.ui-state-default {
-            background-color: $primeButtonDangeractive;
-            border: 1px solid $primeButtonDangeractive;
-            color: rgb(255 255 255);
-
-            &:enabled {
-                &:hover {
-                    background-color: $primeButtonSethover;
-                    border-color: $primeButtonSethover;
-                    color: rgb(255 255 255);
-                }
-
-                &:focus {
-                    background-color: $primeButtonSetFocus;
-                }
-
-                &:active {
-                    background-color: $primeButtonSetactive;
-                    border-color: $primeButtonSetactive;
-                    color: rgb(255 255 255);
-                }
-            }
-        }
-    }
-
-    .ui-widget-content {
-        p {
-            line-height: 1.5;
-            margin: 0;
-        }
-    }
-
-    .ui-panel {
-        border: 0 0;
-        padding: 0;
-
-        .ui-panel-titlebar {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-            -moz-border-radius-bottomleft: 0;
-            -moz-border-radius-bottomright: 0;
-            -moz-border-radius-topleft: 0;
-            -moz-border-radius-topright: 0;
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
-            color: $font-color-main;
-            padding: 0.857em 1em;
-
-            .ui-panel-title {
-                font-weight: 700;
-                vertical-align: middle;
-            }
-
-            .ui-panel-titlebar-icon {
-                border: 1px solid transparent;
-                color: $titleBarIcon;
-                font-size: 13px;
-                margin: 0;
-                position: relative;
-                transition: color 0.3s;
-
-                &:hover {
-                    color: $carouselPagelink;
-                }
-            }
-        }
-
-        .ui-panel-content {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            border-top: 0 0;
-            color: $font-color-main;
-            padding: 0.571em 1em;
-        }
-
-        .ui-panel-footer {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            border-top: 0 0;
-            color: $font-color-main;
-            margin: 0;
-            padding: 0.571em 1em;
-        }
-    }
-
-    .ui-fieldset {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        color: $font-color-main;
-
-        .ui-fieldset-legend {
-            a {
-                background-color: rgb(239 239 239);
-                border: 1px solid $ng-gray;
-                color: $font-color-main;
-                padding: 0.857em 1em;
-
-                .ui-fieldset-toggler {
-                    color: $titleBarIcon;
-                    display: inline-block;
-                    float: none;
-                    margin-right: 0.5em;
-                    vertical-align: middle;
-                }
-
-                .ui-fieldset-legend-text {
-                    padding: 0;
-                }
-            }
-        }
-
-        .ui-fieldset-content {
-            padding: 0;
-        }
-    }
-
-    .ui-fieldset.ui-fieldset-toggleable {
-        .ui-fieldset-legend {
-            a {
-                &:hover {
-                    background-color: $tabView;
-                    border: 1px solid $tabView;
-                    color: $font-color-main;
-
-                    .ui-fieldset-toggler {
-                        color: $font-color-main;
-                    }
-                }
-            }
-        }
-    }
-
-    .ui-accordion {
-        .ui-accordion-header {
-            margin-bottom: 2px;
-
-            a {
-                background-color: rgb(239 239 239);
-                border: 1px solid $ng-gray;
-                color: $font-color-main;
-                padding: 0.857em 1em;
-
-                .ui-accordion-toggle-icon {
-                    color: $titleBarIcon;
-                }
-            }
-
-            &:not(.ui-state-active) {
-                &:not(.ui-state-disabled) {
-                    &:hover {
-                        a {
-                            background-color: $tabView;
-                            border: 1px solid $tabView;
-                            color: $font-color-main;
-
-                            .ui-accordion-toggle-icon {
-                                color: $font-color-main;
-                            }
-                        }
-                    }
-                }
-            }
-
-            &:not(.ui-state-disabled).ui-state-active {
-                a {
-                    background-color: $ng-primary-color;
-                    border: 1px solid $ng-primary-color;
-                    color: rgb(255 255 255);
-
-                    .ui-accordion-toggle-icon {
-                        color: rgb(255 255 255);
-                    }
-                }
-
-                &:hover {
-                    a {
-                        background-color: $anchorHover;
-                        border: 1px solid $anchorHover;
-                        color: rgb(255 255 255);
-
-                        .ui-accordion-toggle-icon {
-                            color: rgb(255 255 255);
-                        }
-                    }
-                }
-            }
-        }
-
-        .ui-accordion-content {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            padding: 0.571em 1em;
-        }
-    }
-
-    .ui-tabview.ui-tabview-top {
-        border: 0 0;
-
-        .ui-tabview-nav {
-            background: rgb(255 255 255);
-            margin-bottom: -1px;
-            padding: 0;
-
-            li {
-                background-color: rgb(239 239 239);
-                border: 1px solid $ng-gray;
-                margin-right: 0.214em;
-
-                a {
-                    color: $font-color-main;
-                    display: inline-block;
-                    float: none;
-                    padding: 0.857em 1em;
-
-                    .ui-tabview-left-icon {
-                        color: $titleBarIcon;
-                        margin-right: 0.429em;
-                    }
-
-                    .ui-tabview-right-icon {
-                        color: $titleBarIcon;
-                        margin-left: 0.429em;
-                    }
-                }
-
-                .ui-tabview-close {
-                    color: $titleBarIcon;
-                    margin: 0 0.429em 0 -0.429em;
-                }
-
-                &:not(.ui-state-active) {
-                    &:not(.ui-state-disabled) {
-                        &:hover {
-                            background-color: $tabView;
-                            border: 1px solid $tabView;
-
-                            a {
-                                color: $font-color-main;
-
-                                .ui-tabview-left-icon {
-                                    color: $carouselPagelink;
-                                }
-
-                                .ui-tabview-right-icon {
-                                    color: $carouselPagelink;
-                                }
-                            }
-
-                            .ui-tabview-close {
-                                color: $font-color-main;
-                            }
-                        }
-                    }
-                }
-            }
-
-            li.ui-state-active {
-                background-color: $ng-primary-color;
-                border: 1px solid $ng-primary-color;
-
-                a {
-                    color: rgb(255 255 255);
-
-                    .ui-tabview-left-icon {
-                        color: rgb(255 255 255);
-                    }
-
-                    .ui-tabview-right-icon {
-                        color: rgb(255 255 255);
-                    }
-                }
-
-                .ui-tabview-close {
-                    color: rgb(255 255 255);
-                }
-
-                &:hover {
-                    background-color: $anchorHover;
-                    border: 1px solid $anchorHover;
-
-                    a {
-                        color: rgb(255 255 255);
-
-                        .ui-tabview-left-icon {
-                            color: rgb(255 255 255);
-                        }
-
-                        .ui-tabview-right-icon {
-                            color: rgb(255 255 255);
-                        }
-                    }
-                }
-            }
-
-            li.ui-tabview-selected {
-                a {
-                    cursor: pointer;
-                }
-            }
-        }
-    }
-
-    .ui-tabview.ui-tabview-bottom {
-        border: 0 0;
-
-        .ui-tabview-nav {
-            background: rgb(255 255 255);
-            margin-top: -1px;
-            padding: 0;
-
-            li {
-                background-color: rgb(239 239 239);
-                border: 1px solid $ng-gray;
-                margin-right: 0.214em;
-
-                a {
-                    color: $font-color-main;
-                    display: inline-block;
-                    float: none;
-                    padding: 0.857em 1em;
-
-                    .ui-tabview-left-icon {
-                        color: $titleBarIcon;
-                        margin-right: 0.429em;
-                    }
-
-                    .ui-tabview-right-icon {
-                        color: $titleBarIcon;
-                        margin-left: 0.429em;
-                    }
-                }
-
-                .ui-tabview-close {
-                    color: $titleBarIcon;
-                    margin: 0 0.429em 0 -0.429em;
-                }
-
-                &:not(.ui-state-active) {
-                    &:not(.ui-state-disabled) {
-                        &:hover {
-                            background-color: $tabView;
-                            border: 1px solid $tabView;
-
-                            a {
-                                color: $font-color-main;
-
-                                .ui-tabview-left-icon {
-                                    color: $carouselPagelink;
-                                }
-
-                                .ui-tabview-right-icon {
-                                    color: $carouselPagelink;
-                                }
-                            }
-
-                            .ui-tabview-close {
-                                color: $font-color-main;
-                            }
-                        }
-                    }
-                }
-            }
-
-            li.ui-state-active {
-                background-color: $ng-primary-color;
-                border: 1px solid $ng-primary-color;
-
-                a {
-                    color: rgb(255 255 255);
-
-                    .ui-tabview-left-icon {
-                        color: rgb(255 255 255);
-                    }
-
-                    .ui-tabview-right-icon {
-                        color: rgb(255 255 255);
-                    }
-                }
-
-                .ui-tabview-close {
-                    color: rgb(255 255 255);
-                }
-
-                &:hover {
-                    background-color: $anchorHover;
-                    border: 1px solid $anchorHover;
-
-                    a {
-                        color: rgb(255 255 255);
-
-                        .ui-tabview-left-icon {
-                            color: rgb(255 255 255);
-                        }
-
-                        .ui-tabview-right-icon {
-                            color: rgb(255 255 255);
-                        }
-                    }
-                }
-            }
-
-            li.ui-tabview-selected {
-                a {
-                    cursor: pointer;
-                }
-            }
-        }
-    }
-
-    .ui-tabview.ui-tabview-left {
-        border: 0 0;
-
-        .ui-tabview-nav {
-            background: rgb(255 255 255);
-            margin-right: -px;
-            padding: 0;
-
-            li {
-                background-color: rgb(239 239 239);
-                border: 1px solid $ng-gray;
-                margin-bottom: 0.214em;
-
-                a {
-                    color: $font-color-main;
-                    display: inline-block;
-                    float: none;
-                    padding: 0.857em 1em;
-
-                    .ui-tabview-left-icon {
-                        color: $titleBarIcon;
-                        margin-right: 0.429em;
-                    }
-
-                    .ui-tabview-right-icon {
-                        color: $titleBarIcon;
-                        margin-left: 0.429em;
-                    }
-                }
-
-                .ui-tabview-close {
-                    color: $titleBarIcon;
-                    margin: 0 0.429em 0 -0.429em;
-                }
-
-                &:not(.ui-state-active) {
-                    &:not(.ui-state-disabled) {
-                        &:hover {
-                            background-color: $tabView;
-                            border: 1px solid $tabView;
-
-                            a {
-                                color: $font-color-main;
-
-                                .ui-tabview-left-icon {
-                                    color: $carouselPagelink;
-                                }
-
-                                .ui-tabview-right-icon {
-                                    color: $carouselPagelink;
-                                }
-                            }
-
-                            .ui-tabview-close {
-                                color: $font-color-main;
-                            }
-                        }
-                    }
-                }
-            }
-
-            li.ui-state-active {
-                background-color: $ng-primary-color;
-                border: 1px solid $ng-primary-color;
-
-                a {
-                    color: rgb(255 255 255);
-
-                    .ui-tabview-left-icon {
-                        color: rgb(255 255 255);
-                    }
-
-                    .ui-tabview-right-icon {
-                        color: rgb(255 255 255);
-                    }
-                }
-
-                .ui-tabview-close {
-                    color: rgb(255 255 255);
-                }
-
-                &:hover {
-                    background-color: $anchorHover;
-                    border: 1px solid $anchorHover;
-
-                    a {
-                        color: rgb(255 255 255);
-
-                        .ui-tabview-left-icon {
-                            color: rgb(255 255 255);
-                        }
-
-                        .ui-tabview-right-icon {
-                            color: rgb(255 255 255);
-                        }
-                    }
-                }
-            }
-
-            li.ui-tabview-selected {
-                a {
-                    cursor: pointer;
-                }
-            }
-        }
-    }
-
-    .ui-tabview.ui-tabview-right {
-        border: 0 0;
-
-        .ui-tabview-nav {
-            background: rgb(255 255 255);
-            margin-right: -1px;
-            padding: 0;
-
-            li {
-                background-color: rgb(239 239 239);
-                border: 1px solid $ng-gray;
-                margin-bottom: 0.214em;
-
-                a {
-                    color: $font-color-main;
-                    display: inline-block;
-                    float: none;
-                    padding: 0.857em 1em;
-
-                    .ui-tabview-left-icon {
-                        color: $titleBarIcon;
-                        margin-right: 0.429em;
-                    }
-
-                    .ui-tabview-right-icon {
-                        color: $titleBarIcon;
-                        margin-left: 0.429em;
-                    }
-                }
-
-                .ui-tabview-close {
-                    color: $titleBarIcon;
-                    margin: 0 0.429em 0 -0.429em;
-                }
-
-                &:not(.ui-state-active) {
-                    &:not(.ui-state-disabled) {
-                        &:hover {
-                            background-color: $tabView;
-                            border: 1px solid $tabView;
-
-                            a {
-                                color: $font-color-main;
-
-                                .ui-tabview-left-icon {
-                                    color: $carouselPagelink;
-                                }
-
-                                .ui-tabview-right-icon {
-                                    color: $carouselPagelink;
-                                }
-                            }
-
-                            .ui-tabview-close {
-                                color: $font-color-main;
-                            }
-                        }
-                    }
-                }
-            }
-
-            li.ui-state-active {
-                background-color: $ng-primary-color;
-                border: 1px solid $ng-primary-color;
-
-                a {
-                    color: rgb(255 255 255);
-
-                    .ui-tabview-left-icon {
-                        color: rgb(255 255 255);
-                    }
-
-                    .ui-tabview-right-icon {
-                        color: rgb(255 255 255);
-                    }
-                }
-
-                .ui-tabview-close {
-                    color: rgb(255 255 255);
-                }
-
-                &:hover {
-                    background-color: $anchorHover;
-                    border: 1px solid $anchorHover;
-
-                    a {
-                        color: rgb(255 255 255);
-
-                        .ui-tabview-left-icon {
-                            color: rgb(255 255 255);
-                        }
-
-                        .ui-tabview-right-icon {
-                            color: rgb(255 255 255);
-                        }
-                    }
-                }
-            }
-
-            li.ui-tabview-selected {
-                a {
-                    cursor: pointer;
-                }
-            }
-        }
-    }
-
-    .ui-tabview {
-        .ui-tabview-panels {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            padding: 0.571em 1em;
-
-            .ui-tabview-panel {
-                padding: 0;
-            }
-        }
-    }
-
-    .ui-toolbar {
-        background-color: rgb(239 239 239);
-        border: 1px solid $ng-gray;
-        padding: 0.857em 1em;
-
-        button {
-            vertical-align: middle;
-        }
-    }
-
-    .p-paginator {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        float: right;
-        padding: 0;
-
-        .p-paginator-first {
-            border: 0 0;
-            color: $galleriaNavText;
-            height: 2.308em;
-            line-height: 2.308em;
-            margin: 0;
-            min-width: 2.308em;
-            padding: 0;
-            vertical-align: top;
-
-            &:not(.p-disabled) {
-                &:not(.p-highlight) {
-                    &:hover {
-                        background-color: $paginationHover;
-                        color: $font-color-main;
-                    }
-                }
-            }
-
-            &::before {
-                position: relative;
-                top: 1px;
-            }
-        }
-
-        .p-paginator-prev {
-            border: 0 0;
-            color: $galleriaNavText;
-            height: 2.308em;
-            line-height: 2.308em;
-            margin: 0;
-            min-width: 2.308em;
-            padding: 0;
-            vertical-align: top;
-
-            &:not(.p-disabled) {
-                &:not(.p-highlight) {
-                    &:hover {
-                        background-color: $paginationHover;
-                        color: $font-color-main;
-                    }
-                }
-            }
-
-            &::before {
-                position: relative;
-            }
-        }
-
-        .p-paginator-next {
-            border: 0 0;
-            color: $galleriaNavText;
-            height: 2.308em;
-            line-height: 2.308em;
-            margin: 0;
-            min-width: 2.308em;
-            padding: 0;
-            vertical-align: top;
-
-            &:not(.p-disabled) {
-                &:not(.p-highlight) {
-                    &:hover {
-                        background-color: $paginationHover;
-                        color: $font-color-main;
-                    }
-                }
-            }
-
-            &::before {
-                position: relative;
-                top: 1px;
-            }
-        }
-
-        .p-paginator-last {
-            border: 0 0;
-            color: $galleriaNavText;
-            height: 2.308em;
-            line-height: 2.308em;
-            margin: 0;
-            min-width: 2.308em;
-            padding: 0;
-            vertical-align: top;
-
-            &:not(.p-disabled) {
-                &:not(.p-highlight) {
-                    &:hover {
-                        background-color: $paginationHover;
-                        color: $font-color-main;
-                    }
-                }
-            }
-
-            &::before {
-                position: relative;
-                top: 1px;
-            }
-        }
-
-        .p-paginator-pages {
-            display: inline-block;
-            padding: 0;
-            vertical-align: top;
-
-            .p-paginator-page {
-                border: 0 0;
-                color: $galleriaNavText;
-                height: 2.308em;
-                line-height: 2.308em;
-                margin: 0;
-                min-width: 2.308em;
-                padding: 0;
-                vertical-align: top;
-
-                &:not(.p-highlight) {
-                    &:hover {
-                        background-color: $paginationHover;
-                        color: $font-color-main;
-                    }
-                }
-            }
-
-            .p-paginator-page.p-highlight {
-                background-color: $ng-primary-color;
-                border-radius: 50%;
-                color: rgb(255 255 255);
-            }
-        }
-
-        .p-dropdown {
-            height: 2.308em;
-            margin-left: 0.429em;
-            min-width: auto;
-        }
-    }
-
-    .p-datatable {
-        .p-datatable-caption {
-            background-color: transparent;
-            border: 1px solid $ng-gray;
-            border-bottom: 0 0;
-            color: $font-color-main;
-            font-weight: 700;
-            text-align: center;
-        }
-
-        .p-datatable-summary {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-            border-top: 0 0;
-            color: $font-color-main;
-            font-weight: 700;
-            padding: 0.857em 1em;
-            text-align: center;
-        }
-
-        .p-component-overlay {
-            background: none !important;
-        }
-
-        .p-datatable-header {
-            background: transparent !important;
-            border: 0;
-            padding: 0.25em 0.5em;
-        }
-
-        .p-datatable-thead {
-            > tr {
-                > th {
-                    background-color: rgb(255 255 255);
-                    border: 1px solid $ng-gray;
-                    color: $font-color-main;
-                    font-family: $mainFontFamily;
-                    font-weight: 400;
-                    padding: 0.3em 1em;
-                }
-            }
-        }
-
-        .p-datatable-tbody {
-            > tr {
-                background: rgb(255 255 255);
-                color: $font-color-main;
-                font-weight: 300;
-
-                > td {
-                    background: inherit;
-                    border: 1px solid $ng-gray;
-                    padding: 0.5em;
-                }
-
-                &:nth-child(even) {
-                    background-color: $ng-gray !important;
-                }
-
-                &:nth-child(even).p-highlight {
-                    background-color: $ng-primary-color;
-                    color: rgb(255 255 255);
-                }
-
-                &:nth-child(even).ui-contextmenu-selected {
-                    background-color: $ng-primary-color;
-                    color: rgb(255 255 255);
-                }
-            }
-
-            > tr.p-highlight {
-                background-color: $ng-primary-color;
-                color: rgb(255 255 255);
-            }
-
-            > tr.ui-contextmenu-selected {
-                background-color: $ng-primary-color;
-                color: rgb(255 255 255);
-            }
-        }
-
-        .p-datatable-tfoot {
-            > tr {
-                > td {
-                    background-color: rgb(255 255 255);
-                    border: 1px solid $ng-gray;
-                    color: $font-color-main;
-                    font-weight: 500;
-                    padding: 0.3em 1em;
-                }
-            }
-        }
-
-        .p-sortable-column-icon {
-            color: rgb(255 255 255) !important;
-
-            &:hover {
-                color: rgb(255 255 255) !important;
-            }
-        }
-
-        .p-sortable-column-icon.p-highlight {
-            background-color: $ng-primary-color !important;
-            color: rgb(255 255 255) !important;
-
-            &:hover {
-                color: rgb(255 255 255) !important;
-            }
-        }
-
-        .ui-column-resizer-helper {
-            background-color: $ng-primary-color;
-        }
-    }
-
-    .p-datatable.p-datatable-hoverable-rows {
-        .p-datatable-tbody {
-            > tr {
-                &:not(.p-highlight) {
-                    &:not(.ui-contextmenu-selected) {
-                        &:hover {
-                            background-color: $satetHover;
-                            color: $font-color-main;
-                            cursor: pointer;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .ui-datagrid {
-        .ui-datagrid-header {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-            border-bottom: 0 0;
-            color: $font-color-main;
-            font-weight: 700;
-            padding: 0.857em 1em;
-        }
-
-        .ui-datagrid-content {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            padding: 0.571em 1em;
-        }
-
-        .ui-datagrid-footer {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            border-top: 0 0;
-            color: $font-color-main;
-            padding: 0.571em 1em;
-        }
-    }
-
-    .ui-datalist {
-        .ui-datalist-header {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-            border-bottom: 0 0;
-            color: $font-color-main;
-            font-weight: 700;
-            padding: 0.857em 1em;
-        }
-
-        .ui-datalist-content {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            padding: 0.571em 1em;
-        }
-
-        .ui-datalist-footer {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            border-top: 0 0;
-            color: $font-color-main;
-            padding: 0.571em 1em;
-        }
-    }
-
-    .ui-datascroller {
-        .ui-datascroller-header {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-            border-bottom: 0 0;
-            color: $font-color-main;
-            font-weight: 700;
-            padding: 0.857em 1em;
-        }
-
-        .ui-datascroller-content {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            padding: 0.571em 1em;
-        }
-
-        .ui-datascroller-footer {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            border-top: 0 0;
-            color: $font-color-main;
-            padding: 0.571em 1em;
-        }
-    }
-
-    .ui-dataview {
-        .ui-dataview-header {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-            border-bottom: 0 0;
-            color: $font-color-main;
-            font-weight: 700;
-            padding: 0.857em 1em;
-        }
-
-        .ui-dataview-content {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            padding: 0.571em 1em;
-        }
-
-        .ui-dataview-footer {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            border-top: 0 0;
-            color: $font-color-main;
-            padding: 0.571em 1em;
-        }
-    }
-
-    .fc {
-        th {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            padding: 0.857em 1em;
-        }
-
-        td.ui-widget-content {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-        }
-
-        td.fc-head-container {
-            border: 1px solid $ng-gray;
-        }
-
-        .fc-event {
-            background-color: $anchorActive;
-            border: 1px solid $anchorActive;
-            color: rgb(255 255 255);
-        }
-
-        .fc-toolbar {
-            .ui-button {
-                .ui-icon-circle-triangle-w {
-                    background: none !important;
-                    display: inline-block;
-                    font-family: $mainFontFamily;
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    font-style: normal;
-                    font-variant: normal;
-                    font-weight: normal;
-                    line-height: 1;
-                    margin-top: 0.214em;
-                    text-align: center;
-                    text-indent: 0 !important;
-                    text-transform: none;
-
-                    &::before {
-                        content: '\e900';
-                    }
-                }
-
-                .ui-icon-circle-triangle-e {
-                    background: none !important;
-                    display: inline-block;
-                    font-family: $mainFontFamily;
-                    -moz-osx-font-smoothing: grayscale;
-                    -webkit-font-smoothing: antialiased;
-                    font-style: normal;
-                    font-variant: normal;
-                    font-weight: normal;
-                    line-height: 1;
-                    margin-top: 0.214em;
-                    text-align: center;
-                    text-indent: 0 !important;
-                    text-transform: none;
-
-                    &::before {
-                        content: '\e901';
-                    }
-                }
-
-                &:focus {
-                    outline: 0 none;
-                }
-            }
-        }
-
-        .fc-divider {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-        }
-    }
-
-    .ui-picklist {
-        .ui-picklist-buttons {
-            padding: 0.571em 1em;
-
-            button {
-                font-size: 15px;
-            }
-        }
-
-        .ui-picklist-caption {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            font-weight: 700;
-            padding: 0.857em 1em;
-        }
-
-        .ui-picklist-filter-container {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            border-bottom: 0 0;
-            border-top: 0 0;
-            color: $font-color-main;
-            margin: 0;
-            padding: 0.429em 0.857em;
-
-            input {
-                padding-right: 2em;
-                width: 100%;
-            }
-
-            .pi {
-                color: $ng-primary-color;
-                left: auto;
-                margin-top: -0.5em;
-                right: 1.357em;
-                top: 50%;
-            }
-        }
-
-        .ui-picklist-list {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            padding: 0;
-
-            .ui-picklist-item {
-                background-color: transparent;
-                border: 0 0;
-                color: $font-color-main;
-                margin: 0;
-                padding: 0.429em 0.857em;
-
-                &:not(.ui-state-highlight) {
-                    &:hover {
-                        background-color: $paginationHover;
-                        color: $font-color-main;
-                    }
-                }
-            }
-
-            .ui-picklist-item.ui-state-highlight {
-                background-color: $ng-primary-color;
-                color: rgb(255 255 255);
-            }
-        }
-    }
-
-    .ui-orderlist {
-        .ui-orderlist-controls {
-            padding: 0.571em 1em;
-
-            button {
-                font-size: 15px;
-            }
-        }
-
-        .ui-orderlist-caption {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            font-weight: 700;
-            padding: 0.857em 1em;
-        }
-
-        .ui-orderlist-filter-container {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            border-bottom: 0 0;
-            border-top: 0 0;
-            color: $font-color-main;
-            margin: 0;
-            padding: 0.429em 0.857em;
-
-            input {
-                padding-right: 2em;
-                width: 100%;
-            }
-
-            .pi {
-                color: $ng-primary-color;
-                left: auto;
-                margin-top: -0.5em;
-                right: 1.357em;
-                top: 50%;
-            }
-        }
-
-        .ui-orderlist-list {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            padding: 0;
-
-            .ui-orderlist-item {
-                background-color: transparent;
-                border: 0 0;
-                color: $font-color-main;
-                margin: 0;
-                padding: 0.429em 0.857em;
-
-                &:not(.ui-state-highlight) {
-                    &:hover {
-                        background-color: $paginationHover;
-                        color: $font-color-main;
-                    }
-                }
-            }
-
-            .ui-orderlist-item.ui-state-highlight {
-                background-color: $ng-primary-color;
-                color: rgb(255 255 255);
-            }
-        }
-    }
-
-    .ui-tree {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        color: $font-color-main;
-        padding: 0.571em 1em;
-
-        .ui-tree-container {
-            margin: 0;
-            padding: 0;
-
-            .ui-treenode {
-                padding: 0.143em 0;
-
-                .ui-treenode-content {
-                    padding: 0;
-
-                    .ui-tree-toggler {
-                        color: $galleriaNavText;
-                        display: inline-block;
-                        float: none;
-                        font-size: 15px;
-                        margin: 0 0.143em 0 0;
-                        vertical-align: middle;
-                    }
-
-                    .ui-treenode-icon {
-                        color: $galleriaNavText;
-                        display: inline-block;
-                        font-size: 15px;
-                        margin: 0 0.143em 0 0;
-                        vertical-align: middle;
-                    }
-
-                    .ui-treenode-label {
-                        display: inline-block;
-                        margin: 0;
-                        padding: 0.286em;
-                        vertical-align: middle;
-                    }
-
-                    .ui-treenode-label.ui-state-highlight {
-                        background-color: $ng-primary-color;
-                        color: rgb(255 255 255);
-                    }
-
-                    .ui-chkbox {
-                        margin: 0 0.429em 0 0;
-
-                        .ui-chkbox-icon {
-                            margin: 1px 0 0;
-                        }
-                    }
-
-                    > span {
-                        line-height: inherit;
-                    }
-                }
-
-                .ui-treenode-content.ui-treenode-selectable {
-                    .ui-treenode-label {
-                        &:not(.ui-state-highlight) {
-                            &:hover {
-                                background-color: $paginationHover;
-                                color: $font-color-main;
-                            }
-                        }
-                    }
-                }
-
-                .ui-treenode-content.ui-treenode-dragover {
-                    background-color: $paginationHover;
-                    color: $font-color-main;
-                }
-            }
-
-            .ui-treenode-droppoint.ui-treenode-droppoint-active {
-                background-color: $ng-primary-color;
-            }
-        }
-    }
-
-    .ui-tree.ui-tree-horizontal {
-        padding-left: 0;
-        padding-right: 0;
-
-        .ui-treenode {
-            .ui-treenode-content {
-                background-color: rgb(255 255 255);
-                border: 1px solid $ng-gray;
-                color: $font-color-main;
-                padding: 0.571em 1em;
-
-                .ui-chkbox {
-                    .ui-icon {
-                        color: $ng-primary-color;
-                    }
-                }
-
-                .ui-treenode-label {
-                    &:not(.ui-state-highlight) {
-                        &:hover {
-                            background-color: inherit;
-                            color: inherit;
-                        }
-                    }
-                }
-            }
-
-            .ui-treenode-content.ui-state-highlight {
-                background-color: $ng-primary-color;
-                color: rgb(255 255 255);
-            }
-
-            .ui-treenode-content.ui-treenode-selectable {
-                &:not(.ui-state-highlight) {
-                    &:hover {
-                        background-color: $paginationHover;
-                        color: $font-color-main;
-                    }
-                }
-            }
-        }
-    }
-
-    .ui-organizationchart {
-        .ui-organizationchart-node-content.ui-organizationchart-selectable-node {
-            &:not(.ui-state-highlight) {
-                &:hover {
-                    background-color: $paginationHover;
-                    color: $font-color-main;
-                }
-            }
-        }
-
-        .ui-organizationchart-node-content.ui-state-highlight {
-            background-color: $ng-primary-color;
-            color: rgb(255 255 255);
-
-            .ui-node-toggler {
-                i {
-                    color: $nodeToggle;
-                }
-            }
-        }
-
-        .ui-organizationchart-line-down {
-            background-color: $selectButton;
-        }
-
-        .ui-organizationchart-line-left {
-            border-color: $selectButton;
-            border-right: 1px solid $ng-gray;
-        }
-
-        .ui-organizationchart-line-top {
-            border-color: $selectButton;
-            border-top: 1px solid $ng-gray;
-        }
-
-        .ui-organizationchart-node-content {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            padding: 0.571em 1em;
-
-            .ui-node-toggler {
-                bottom: -0.7em;
-                color: $galleriaNavText;
-                margin-left: -0.46em;
-            }
-        }
-    }
-
-    .ui-carousel {
-        padding: 0;
-
-        .ui-carousel-header {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            font-weight: 700;
-            margin: 0;
-            padding: 0.857em 1em;
-
-            .ui-carousel-header-title {
-                padding: 0;
-            }
-        }
-
-        .ui-carousel-viewport {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            padding: 0;
-
-            .ui-carousel-items {
-                .ui-carousel-item {
-                    border: 1px solid $ng-gray;
-                }
-            }
-        }
-
-        .ui-carousel-footer {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            margin: 0;
-            padding: 0.857em 1em;
-        }
-
-        .ui-carousel-button {
-            color: $titleBarIcon;
-            font-size: 15px;
-            margin: 0.125em 0.429em;
-            transition: color 0.3s;
-
-            &:not(.ui-state-disabled) {
-                &:hover {
-                    color: $carouselPagelink;
-                }
-            }
-        }
-
-        .ui-carousel-page-links {
-            margin: 0.125em 0.429em;
-
-            .ui-carousel-page-link {
-                color: $titleBarIcon;
-                font-size: 15px;
-                transition: color 0.3s;
-
-                &:hover {
-                    color: $carouselPagelink;
-                }
-            }
-
-            .ui-carousel-page-link.pi-circle-off {
-                color: $titleBarIcon;
-                font-size: 15px;
-            }
-
-            .ui-carousel-page-link.pi-circle-on {
-                color: $titleBarIcon;
-                font-size: 15px;
-            }
-        }
-    }
-
-    .ui-treetable {
-        .ui-treetable-caption {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-            border-bottom: 0 0;
-            color: $font-color-main;
-            font-weight: 700;
-            padding: 0.857em 1em;
-            text-align: center;
-        }
-
-        .ui-treetable-summary {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-            border-top: 0 0;
-            color: $font-color-main;
-            font-weight: 700;
-            padding: 0.857em 1em;
-            text-align: center;
-        }
-
-        .ui-treetable-thead {
-            > tr {
-                > th {
-                    background-color: rgb(255 255 255);
-                    border: 1px solid $ng-gray;
-                    color: $font-color-main;
-                    font-weight: 700;
-                    padding: 0.3em 1em;
-                }
-            }
-        }
-
-        .ui-treetable-tbody {
-            > tr {
-                background: rgb(255 255 255);
-                color: $font-color-main;
-
-                > td {
-                    background: inherit;
-                    border: 1px solid $ng-gray;
-                    padding: 0.3em 1em;
-
-                    .ui-treetable-toggler {
-                        color: $galleriaNavText;
-                        font-size: 15px;
-                        line-height: 1.5;
-                        vertical-align: middle;
-                    }
-
-                    .ui-treetable-chkbox {
-                        margin-right: 0.429em;
-                        vertical-align: middle;
-                    }
-                }
-            }
-
-            > tr.ui-state-highlight {
-                background-color: $ng-primary-color;
-                color: rgb(255 255 255);
-
-                > td {
-                    background: inherit;
-                    border: 1px solid $ng-gray;
-
-                    .ui-treetable-toggler {
-                        color: rgb(255 255 255);
-                    }
-                }
-            }
-
-            > tr.ui-contextmenu-selected {
-                background-color: $ng-primary-color;
-                color: rgb(255 255 255);
-
-                > td {
-                    background: inherit;
-                    border: 1px solid $ng-gray;
-
-                    .ui-treetable-toggler {
-                        color: rgb(255 255 255);
-                    }
-                }
-            }
-        }
-
-        .ui-treetable-tfoot {
-            > tr {
-                > td {
-                    background-color: rgb(255 255 255);
-                    border: 1px solid $ng-gray;
-                    color: $font-color-main;
-                    font-weight: 500;
-                    padding: 0.3em 1em;
-                }
-            }
-        }
-
-        .ui-sortable-column {
-            a {
-                color: $font-color-main;
-
-                &:hover {
-                    color: $font-color-main;
-                }
-            }
-
-            &:not(.ui-state-highlight) {
-                &:hover {
-                    background-color: $satetHover;
-                    color: $font-color-main;
-
-                    a {
-                        color: $font-color-main;
-
-                        &:hover {
-                            color: $font-color-main;
-                        }
-                    }
-                }
-            }
-        }
-
-        .ui-sortable-column.ui-state-highlight {
-            background-color: $ng-primary-color;
-            color: rgb(255 255 255);
-
-            a {
-                color: rgb(255 255 255);
-
-                &:hover {
-                    color: rgb(255 255 255);
-                }
-            }
-        }
-
-        .ui-column-resizer-helper {
-            background-color: $ng-primary-color;
-        }
-    }
-
-    .ui-treetable.ui-treetable-hoverable-rows {
-        .ui-treetable-tbody {
-            > tr {
-                &:not(.ui-state-highlight) {
-                    &:not(.ui-contextmenu-selected) {
-                        &:hover {
-                            background-color: $satetHover;
-                            color: $font-color-main;
-                            cursor: pointer;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .ui-messages {
-        margin: 1em 0;
-        padding: 1em;
-
-        .ui-messages-close {
-            font-size: 1.5em;
-            right: 0.5em;
-            top: 0.25em;
-        }
-
-        .ui-messages-icon {
-            font-size: 1.714em;
-        }
-    }
-
-    .ui-messages.ui-messages-info {
-        background-color: $growlMsgInfoBackground;
-        border: 1px solid $growlMsgInfo;
-        color: $toastInfo;
-
-        .ui-messages-icon {
-            color: $toastInfo;
-        }
-
-        .ui-messages-close {
-            color: $toastInfo;
-        }
-    }
-
-    .ui-messages.ui-messages-success {
-        background-color: $toastmsgScessbg;
-        border: 0 0;
-        color: $toastmsgSuccess;
-
-        .ui-messages-icon {
-            color: $toastmsgSuccess;
-        }
-
-        .ui-messages-close {
-            color: $toastmsgSuccess;
-        }
-    }
-
-    .ui-messages.ui-messages-warn {
-        background-color: $toastmsgWarning;
-        border: 1px solid $toastmsgWarnbdr;
-        color: $toastIconClose;
-
-        .ui-messages-icon {
-            color: $toastIconClose;
-        }
-
-        .ui-messages-close {
-            color: $toastIconClose;
-        }
-    }
-
-    .ui-messages.ui-messages-error {
-        background-color: $growlerrorMsg;
-        border: 1px solid $growlerrorMsgbdr;
-        color: $growlColor;
-
-        .ui-messages-icon {
-            color: $growlColor;
-        }
-
-        .ui-messages-close {
-            color: $growlColor;
-        }
-    }
-
-    .ui-message.ui-message-info {
-        background-color: $growlMsgInfoBackground;
-        border: 1px solid $growlMsgInfo;
-        color: $toastInfo;
-    }
-
-    .ui-message.ui-message-warn {
-        background-color: $toastmsgWarning;
-        border: 1px solid $toastmsgWarnbdr;
-        color: $toastIconClose;
-    }
-
-    .ui-message.ui-message-error {
-        background-color: $growlerrorMsg;
-        border: 1px solid $growlerrorMsgbdr;
-        color: $growlColor;
-    }
-
-    .ui-message.ui-message-success {
-        background-color: $toastmsgScessbg;
-        border: 0 0;
-        color: $toastmsgSuccess;
-    }
-
-    .ui-message {
-        .ui-message-close {
-            color: rgb(255 255 255);
-            right: 0.25em;
-            text-decoration: none;
-        }
-    }
-
-    .ui-growl {
-        top: 120px;
-
-        .ui-growl-item-container {
-            box-shadow: 0 3px 0.429em 0 rgb(0 0 0 / 16%);
-            filter: alpha(opacity=90);
-            margin: 0 0 1em;
-            opacity: 0.9;
-
-            .ui-growl-item {
-                padding: 1em;
-
-                .ui-growl-message {
-                    margin: 0 0 0 4em;
-                }
-
-                .ui-growl-image {
-                    font-size: 3.429em;
-                }
-            }
-        }
-
-        .ui-growl-item-container.ui-growl-message-info {
-            background-color: $growlMsgInfoBackground;
-            border: 1px solid $growlMsgInfo;
-            color: $toastInfo;
-
-            .ui-growl-image {
-                color: $toastInfo;
-            }
-        }
-
-        .ui-growl-item-container.ui-growl-message-success {
-            background-color: $toastmsgScessbg;
-            border: 0 0;
-            color: $toastmsgSuccess;
-
-            .ui-growl-image {
-                color: $toastmsgSuccess;
-            }
-        }
-
-        .ui-growl-item-container.ui-growl-message-warn {
-            background-color: $toastmsgWarning;
-            border: 1px solid $toastmsgWarnbdr;
-            color: $toastIconClose;
-
-            .ui-growl-image {
-                color: $toastIconClose;
-            }
-        }
-
-        .ui-growl-item-container.ui-growl-message-error {
-            background-color: $growlerrorMsg;
-            border: 1px solid $growlerrorMsgbdr;
-            color: $growlColor;
-
-            .ui-growl-image {
-                color: $growlColor;
-            }
-        }
-    }
-
-    .ui-toast {
-        .ui-toast-message {
-            box-shadow: 0 3px 0.429em 0 rgb(0 0 0 / 16%);
-        }
-
-        .ui-toast-message.ui-toast-message-info {
-            background-color: $growlMsgInfoBackground;
-            border: 1px solid $growlMsgInfo;
-            color: $toastInfo;
-
-            .ui-toast-close-icon {
-                color: $toastInfo;
-            }
-
-            .ui-toast-icon {
-                color: $toastIconInfo;
-            }
-        }
-
-        .ui-toast-message.ui-toast-message-success {
-            background-color: $toastmsgScessbg;
-            border: 0 0;
-            color: $toastmsgSuccess;
-
-            .ui-toast-close-icon {
-                color: $toastmsgSuccess;
-            }
-
-            .ui-toast-icon {
-                color: $toastIconSuccess;
-            }
-        }
-
-        .ui-toast-message.ui-toast-message-warn {
-            background-color: $toastmsgWarning;
-            border: 1px solid $toastmsgWarnbdr;
-            color: $toastIconClose;
-
-            .ui-toast-close-icon {
-                color: $toastIconClose;
-            }
-
-            .ui-toast-icon {
-                color: $toastIcon;
-            }
-        }
-
-        .ui-toast-message.ui-toast-message-error {
-            background-color: $growlerrorMsg;
-            border: 1px solid $growlerrorMsgbdr;
-            color: $growlColor;
-
-            .ui-toast-close-icon {
-                color: $growlColor;
-            }
-
-            .ui-toast-icon {
-                color: $toastIcon2;
-            }
-        }
-    }
-
-    .ui-widget-overlay {
-        background-color: rgb(0 0 0 / 40%);
-    }
-
-    .ui-overlaypanel {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        box-shadow: 0 0 0.429em 0 rgb(0 0 0 / 16%);
-        color: $font-color-main;
-        padding: 0;
-
-        .ui-overlaypanel-content {
-            padding: 0.571em 1em;
-        }
-
-        .ui-overlaypanel-close {
-            background-color: $ng-primary-color;
-            color: rgb(255 255 255);
-            height: 1.538em;
-            line-height: 1.538em;
-            position: absolute;
-            right: -0.769em;
-            text-align: center;
-            top: -0.769em;
-            width: 1.538em;
-
-            &:hover {
-                background-color: $anchorActive;
-                color: rgb(255 255 255);
-            }
-        }
-    }
-
-    .ui-dialog {
-        box-shadow: 0 0 0.429em 0 rgb(0 0 0 / 16%);
-        padding: 0;
-
-        .ui-dialog-titlebar {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-            border-bottom: 0 0;
-            color: $font-color-main;
-            font-weight: 700;
-            padding: 1em;
-
-            .ui-dialog-title {
-                float: none;
-                margin: 0;
-            }
-
-            .ui-dialog-titlebar-icon {
-                border: 0 0;
-                color: $titleBarIcon;
-                margin-left: 0.429em;
-                padding: 0;
-                transition: color 0.3s;
-
-                &:hover {
-                    color: $carouselPagelink;
-                }
-            }
-        }
-
-        .ui-dialog-content {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            padding: 0.571em 1em;
-        }
-
-        .ui-dialog-footer {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            border-top: 0 0;
-            color: $font-color-main;
-            margin: 0;
-            padding: 0.571em 1em;
-            text-align: right;
-
-            button {
-                margin: 0 0.429em 0 0;
-                width: auto;
-            }
-        }
-    }
-
-    .ui-dialog.ui-confirm-dialog {
-        .ui-dialog-content {
-            padding: 1.5em;
-
-            > span {
-                display: inline-block;
-                float: none;
-                line-height: 13px;
-                margin: 0;
-                vertical-align: middle;
-            }
-
-            > span.ui-icon {
-                font-size: 15px;
-                margin-right: 0.35em;
-            }
-        }
-    }
-
-    .ui-sidebar {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        box-shadow: 0 0 0.429em 0 rgb(0 0 0 / 16%);
-        color: $font-color-main;
-        padding: 0.571em 1em;
-    }
-
-    .ui-tooltip {
-        .ui-tooltip-text {
-            background-color: $font-color-main;
-            box-shadow: 0 0 0.429em 0 rgb(0 0 0 / 16%);
-            color: rgb(255 255 255);
-            padding: 0.429em;
-        }
-    }
-
-    .ui-tooltip.ui-tooltip-right {
-        .ui-tooltip-arrow {
-            border-right-color: $font-color-main;
-        }
-    }
-
-    .ui-tooltip.ui-tooltip-left {
-        .ui-tooltip-arrow {
-            border-left-color: $font-color-main;
-        }
-    }
-
-    .ui-tooltip.ui-tooltip-top {
-        .ui-tooltip-arrow {
-            border-top-color: $font-color-main;
-        }
-    }
-
-    .ui-tooltip.ui-tooltip-bottom {
-        .ui-tooltip-arrow {
-            border-bottom-color: $font-color-main;
-        }
-    }
-
-    .ui-lightbox {
-        box-shadow: 0 0 0.429em 0 rgb(0 0 0 / 16%);
-
-        .ui-lightbox-caption {
-            background-color: rgb(239 239 239);
-            border: 1px solid $ng-gray;
-            color: $font-color-main;
-            font-weight: 700;
-            padding: 0.857em 1em;
-
-            .ui-lightbox-caption-text {
-                color: $font-color-main;
-                margin: 0;
-            }
-
-            .ui-lightbox-close {
-                color: $titleBarIcon;
-                padding: 0;
-                transition: color 0.3s;
-
-                &:hover {
-                    color: $carouselPagelink;
-                }
-            }
-        }
-
-        .ui-lightbox-content-wrapper {
-            background-color: rgb(255 255 255);
-            border: 0 0;
-            color: $font-color-main;
-            overflow: hidden;
-            padding: 0;
-
-            .ui-lightbox-nav-left {
-                color: rgb(255 255 255);
-                font-size: 3em;
-                margin-top: -0.5em;
-                transition: all 0.3s;
-
-                &:hover {
-                    transform: scale(1.2);
-                }
-            }
-
-            .ui-lightbox-nav-right {
-                color: rgb(255 255 255);
-                font-size: 3em;
-                margin-top: -0.5em;
-                transition: all 0.3s;
-
-                &:hover {
-                    transform: scale(1.2);
-                }
-            }
-
-            .ui-lightbox-content.ui-lightbox-loading {
-                ~ {
-                    a {
-                        display: none;
-                    }
-                }
-            }
-        }
-    }
-
-    .ui-breadcrumb {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        padding: 0.571em 1em;
-
-        ul {
-            li {
-                display: inline-block;
-                float: none;
-                vertical-align: middle;
-
-                .ui-menuitem-link {
-                    color: $font-color-main;
-                    float: none;
-                    margin: 0;
-                }
-
-                &:first-child {
-                    a {
-                        color: $galleriaNavText;
-                        font-size: 17px;
-                        margin: 0;
-                    }
-                }
-            }
-
-            li.ui-breadcrumb-chevron {
-                color: $galleriaNavText;
-                margin: 0 0.429em;
-            }
-        }
-    }
-
-    .ui-steps {
-        position: relative;
-
-        .ui-steps-item {
-            background-color: transparent;
-            text-align: center;
-
-            .ui-menuitem-link {
-                background-color: transparent;
-                display: inline-block;
-                overflow: hidden;
-                text-align: center;
-
-                .ui-steps-number {
-                    background-color: rgb(255 255 255);
-                    border: 1px solid $ng-gray;
-                    border-radius: 50%;
-                    color: $font-color-main;
-                    display: inline-block;
-                    font-size: 15px;
-                    height: 2em;
-                    line-height: -2em;
-                    margin-bottom: 13px;
-                    padding-top: 0.25em;
-                    position: relative;
-                    text-align: center;
-                    top: 13px;
-                    width: 2em;
-                }
-
-                .ui-steps-title {
-                    color: $galleriaNavText;
-                    display: block;
-                    margin-top: 6px;
-                }
-            }
-
-            &:last-child {
-                .ui-menuitem-link {
-                    display: block;
-                }
-            }
-        }
-
-        .ui-steps-item.ui-state-highlight {
-            .ui-steps-number {
-                background: $ng-primary-color;
-                color: rgb(255 255 255);
-            }
-
-            .ui-steps-title {
-                color: $font-color-main;
-                font-weight: 700;
-            }
-        }
-
-        &::before {
-            border-top: 1px solid $ng-gray;
-            content: ' ';
-            display: block;
-            left: 0;
-            position: absolute;
-            top: 45%;
-            width: 100%;
-        }
-    }
-
-    .ui-menu {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        padding: 0;
-
-        .ui-menuitem-link {
-            border-radius: 0;
-            color: $font-color-main;
-            font-weight: normal;
-            padding: 0.571em 0.857em;
-
-            .ui-menuitem-text {
-                color: $font-color-main;
-            }
-
-            .ui-menuitem-icon {
-                color: $font-color-main;
-            }
-
-            &:hover {
-                background-color: $paginationHover;
-
-                .ui-menuitem-text {
-                    color: $font-color-main;
-                }
-
-                .ui-menuitem-icon {
-                    color: $font-color-main;
-                }
-            }
-        }
-
-        .ui-menuitem {
-            margin: 0;
-        }
-
-        .ui-submenu-header {
-            background-color: rgb(239 239 239);
-            border: 0 0;
-            color: $font-color-main;
-            font-weight: 700;
-            margin: 0;
-            padding: 0.857em 1em;
-        }
-    }
-
-    .ui-menubar {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        padding: 0;
-
-        .ui-menuitem-link {
-            border-radius: 0;
-            color: $font-color-main;
-            font-weight: normal;
-            padding: 0.571em 0.857em;
-
-            .ui-menuitem-text {
-                color: $font-color-main;
-            }
-
-            .ui-menuitem-icon {
-                color: $font-color-main;
-            }
-
-            &:hover {
-                background-color: $paginationHover;
-
-                .ui-menuitem-text {
-                    color: $font-color-main;
-                }
-
-                .ui-menuitem-icon {
-                    color: $font-color-main;
-                }
-            }
-        }
-
-        .ui-menubar-root-list {
-            > .ui-menuitem {
-                > .ui-menuitem-link {
-                    padding: 0.571em 0.857em;
-                }
-            }
-        }
-
-        .ui-submenu-list {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
-            padding: 0;
-        }
-
-        .ui-menuitem {
-            margin: 0;
-
-            .ui-menuitem-link {
-                .ui-submenu-icon {
-                    right: 0.429em;
-                    vertical-align: middle;
-                }
-            }
-        }
-
-        .ui-menuitem.ui-menuitem-active {
-            > .ui-menuitem-link {
-                background-color: $paginationHover;
-
-                .ui-menuitem-text {
-                    color: $font-color-main;
-                }
-
-                .ui-menuitem-icon {
-                    color: $font-color-main;
-                }
-            }
-        }
-    }
-
-    .ui-tieredmenu {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        padding: 0;
-
-        .ui-menuitem-link {
-            border-radius: 0;
-            color: $font-color-main;
-            font-weight: normal;
-            padding: 0.571em 0.857em;
-
-            .ui-menuitem-text {
-                color: $font-color-main;
-            }
-
-            .ui-menuitem-icon {
-                color: $font-color-main;
-            }
-
-            &:hover {
-                background-color: $paginationHover;
-
-                .ui-menuitem-text {
-                    color: $font-color-main;
-                }
-
-                .ui-menuitem-icon {
-                    color: $font-color-main;
-                }
-            }
-        }
-
-        .ui-submenu-list {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
-            padding: 0;
-        }
-
-        .ui-menuitem {
-            margin: 0;
-
-            .ui-menuitem-link {
-                .ui-submenu-icon {
-                    right: 0.429em;
-                }
-            }
-        }
-
-        .ui-menuitem.ui-menuitem-active {
-            > .ui-menuitem-link {
-                background-color: $paginationHover;
-
-                .ui-menuitem-text {
-                    color: $font-color-main;
-                }
-
-                .ui-menuitem-icon {
-                    color: $font-color-main;
-                }
-            }
-        }
-    }
-
-    .ui-contextmenu {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
-        padding: 0;
-
-        .ui-menuitem-link {
-            border-radius: 0;
-            color: $font-color-main;
-            font-weight: normal;
-            padding: 0.571em 0.857em;
-
-            .ui-menuitem-text {
-                color: $font-color-main;
-            }
-
-            .ui-menuitem-icon {
-                color: $font-color-main;
-            }
-
-            &:hover {
-                background-color: $paginationHover;
-
-                .ui-menuitem-text {
-                    color: $font-color-main;
-                }
-
-                .ui-menuitem-icon {
-                    color: $font-color-main;
-                }
-            }
-        }
-
-        .ui-submenu-list {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
-            padding: 0;
-        }
-
-        .ui-menuitem {
-            margin: 0;
-
-            .ui-menuitem-link {
-                .ui-submenu-icon {
-                    right: 0.429em;
-                }
-            }
-        }
-
-        .ui-menuitem.ui-menuitem-active {
-            > .ui-menuitem-link {
-                background-color: $paginationHover;
-
-                .ui-menuitem-text {
-                    color: $font-color-main;
-                }
-
-                .ui-menuitem-icon {
-                    color: $font-color-main;
-                }
-            }
-        }
-    }
-
-    .ui-megamenu {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        padding: 0;
-
-        .ui-menuitem-link {
-            border-radius: 0;
-            color: $font-color-main;
-            font-weight: normal;
-            padding: 0.571em 0.857em;
-
-            .ui-menuitem-text {
-                color: $font-color-main;
-            }
-
-            .ui-menuitem-icon {
-                color: $font-color-main;
-            }
-
-            &:hover {
-                background-color: $paginationHover;
-
-                .ui-menuitem-text {
-                    color: $font-color-main;
-                }
-
-                .ui-menuitem-icon {
-                    color: $font-color-main;
-                }
-            }
-        }
-
-        .ui-megamenu-submenu-header {
-            background-color: rgb(239 239 239);
-            border: 0 0;
-            color: $font-color-main;
-            font-weight: 700;
-            margin: 0;
-            padding: 0.857em 1em;
-        }
-
-        .ui-megamenu-panel {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
-            padding: 0;
-        }
-
-        .ui-menuitem {
-            margin: 0;
-
-            .ui-menuitem-link {
-                .ui-submenu-icon {
-                    right: 0.429em;
-                }
-            }
-        }
-
-        .ui-menuitem.ui-menuitem-active {
-            > .ui-menuitem-link {
-                background-color: $paginationHover;
-
-                .ui-menuitem-text {
-                    color: $font-color-main;
-                }
-
-                .ui-menuitem-icon {
-                    color: $font-color-main;
-                }
-            }
-        }
-    }
-
-    .ui-slidemenu {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        padding: 0;
-
-        .ui-menuitem-link {
-            border-radius: 0;
-            color: $font-color-main;
-            font-weight: normal;
-            padding: 0.571em 0.857em;
-
-            .ui-menuitem-text {
-                color: $font-color-main;
-            }
-
-            .ui-menuitem-icon {
-                color: $font-color-main;
-            }
-
-            &:hover {
-                background-color: $paginationHover;
-
-                .ui-menuitem-text {
-                    color: $font-color-main;
-                }
-
-                .ui-menuitem-icon {
-                    color: $font-color-main;
-                }
-            }
-        }
-
-        .ui-submenu-list {
-            background-color: rgb(255 255 255);
-            border: 0 0;
-            padding: 0;
-        }
-
-        .ui-menuitem {
-            margin: 0;
-
-            .ui-menuitem-link {
-                .ui-submenu-icon {
-                    right: 0.429em;
-                }
-            }
-        }
-
-        .ui-menuitem.ui-menuitem-active {
-            > .ui-menuitem-link {
-                background-color: $paginationHover;
-
-                .ui-menuitem-text {
-                    color: $font-color-main;
-                }
-
-                .ui-menuitem-icon {
-                    color: $font-color-main;
-                }
-            }
-        }
-
-        .ui-slidemenu-backward {
-            background-color: rgb(239 239 239);
-            border: 0 0;
-            color: $font-color-main;
-            font-weight: 700;
-            margin: 0;
-            padding: 0.857em 1em;
-
-            &:hover {
-                background-color: $tabView;
-                color: $font-color-main;
-            }
-        }
-    }
-
-    .ui-menu.ui-shadow {
-        border: 1px solid $ng-gray;
-        box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
-    }
-
-    .ui-tabmenu {
-        border: 0 0;
-
-        .ui-tabmenu-nav {
-            background: rgb(255 255 255);
-            border-bottom: 1px solid $ng-gray;
-            padding: 0;
-
-            .ui-tabmenuitem {
-                margin-bottom: -1px;
-                margin-right: 0.214em;
-                position: static;
-
-                .ui-menuitem-link {
-                    color: $font-color-main;
-                    padding: 0.75em;
-
-                    .ui-menuitem-text {
-                        color: $font-color-main;
-                        margin-right: 0.429em;
-                    }
-
-                    .ui-menuitem-icon {
-                        color: $titleBarIcon;
-                    }
-                }
-
-                &:not(.ui-state-active) {
-                    &:not(.ui-state-disabled) {
-                        &:hover {
-                            background-color: $tabView;
-                            border: 1px solid $tabView;
-
-                            .ui-menuitem-link {
-                                .ui-menuitem-text {
-                                    color: $font-color-main;
-                                }
-
-                                .ui-menuitem-icon {
-                                    color: $carouselPagelink;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-
-            .ui-tabmenuitem.ui-state-active {
-                // background-color: $ng-primary-color;
-                border-bottom: 3px solid $ng-primary-color;
-
-                .ui-menuitem-link {
-                    .ui-menuitem-text {
-                        color: rgb(0 0 0);
-                        font-weight: 600px;
-                    }
-
-                    .ui-menuitem-icon {
-                        color: rgb(0 0 0);
-                    }
-                }
-            }
-        }
-    }
-
-    .ui-megamenu.ui-megamenu-vertical {
-        .ui-megamenu-root-list {
-            > .ui-menuitem {
-                > .ui-menuitem-link {
-                    > .ui-submenu-icon {
-                        right: 0.429em;
-                        vertical-align: middle;
-                    }
-                }
-            }
-        }
-    }
-
-    .ui-panelmenu {
-        .ui-icon {
-            position: static;
-        }
-
-        .ui-panelmenu-header {
-            padding: 0;
-
-            > a {
-                background-color: rgb(239 239 239);
-                border: 1px solid $ng-gray;
-                color: $font-color-main;
-                font-size: 13px;
-                font-weight: 700;
-                padding: 0.857em 1em;
-                position: static;
-
-                .ui-panelmenu-icon {
-                    color: $titleBarIcon;
-                    display: inline-block;
-                    margin-right: 0.429em;
-                    position: static;
-                }
-            }
-
-            &:not(.ui-state-active) {
-                > a {
-                    &:hover {
-                        background-color: $tabView;
-                        border: 1px solid $tabView;
-                        color: $font-color-main;
-                        outline: 0 none;
-
-                        .ui-panelmenu-icon {
-                            color: $font-color-main;
-                        }
-                    }
-                }
-            }
-        }
-
-        .ui-panelmenu-header.ui-state-active {
-            > a {
-                background-color: $ng-primary-color;
-                border: 1px solid $ng-primary-color;
-                color: rgb(255 255 255);
-
-                .ui-panelmenu-icon {
-                    color: rgb(255 255 255);
-                }
-
-                &:hover {
-                    background-color: $anchorHover;
-                    border: 1px solid $anchorHover;
-                    color: rgb(255 255 255);
-                    outline: 0 none;
-
-                    .ui-panelmenu-icon {
-                        color: rgb(255 255 255);
-                    }
-                }
-            }
-        }
-
-        .ui-panelmenu-panel {
-            margin-top: 2px;
-
-            &:first-child {
-                margin-top: 0;
-            }
-        }
-
-        .ui-panelmenu-content {
-            background-color: rgb(255 255 255);
-            border: 1px solid $ng-gray;
-            border-top: 0 0;
-            margin-top: 0;
-            padding: 0;
-            position: static;
-
-            .ui-menuitem {
-                margin: 0;
-
-                .ui-menuitem-link {
-                    color: $font-color-main;
-                    padding: 0.571em 0.857em;
-
-                    &:hover {
-                        background-color: $paginationHover;
-
-                        .ui-menuitem-icon {
-                            color: $font-color-main;
-                        }
-
-                        .ui-panelmenu-icon {
-                            color: $font-color-main;
-                        }
-
-                        .ui-menuitem-text {
-                            color: $font-color-main;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .ui-progressbar {
-        background-color: rgb(239 239 239);
-        border: 0 0;
-        height: 1.714em;
-
-        .ui-progressbar-value {
-            background: $ng-primary-color;
-            border: 0 0;
-            margin: 0;
-        }
-
-        .ui-progressbar-label {
-            color: $font-color-main;
-            display: none !important;
-            margin-top: 0;
-        }
-    }
-
-    .ui-galleria {
-        .ui-galleria-nav-prev {
-            color: $galleriaNavText;
-            font-size: 15px;
-            position: absolute;
-            transition: all 0.3s;
-
-            &:hover {
-                transform: scale(1.2);
-            }
-        }
-
-        .ui-galleria-nav-next {
-            color: $galleriaNavText;
-            font-size: 15px;
-            position: absolute;
-            transition: all 0.3s;
-
-            &:hover {
-                transform: scale(1.2);
-            }
-        }
-    }
-
-    .ui-terminal {
-        background-color: rgb(255 255 255);
-        border: 1px solid $ng-gray;
-        color: $font-color-main;
-        padding: 0.571em 1em;
-
-        .ui-terminal-input {
-            font-family: $mainFontFamily;
-            font-size: 13px;
-            height: 15px;
-        }
-
-        .ui-terminal-command {
-            height: 15px;
-        }
-    }
-}
-
-@media (max-width: 640px) {
-    body {
-        .ui-buttonset {
-            .ui-button {
-                border-radius: 0;
-                margin-bottom: 1px;
-            }
-        }
-    }
-}
-
-@media screen and (max-width: 40em) {
-    body {
-        .p-datatable.p-datatable-responsive {
-            .ui-paginator-top {
-                border-bottom: 1px solid $ng-gray;
-            }
-
-            .ui-paginator-bottom {
-                border-top: 1px solid $ng-gray;
-            }
-
-            .p-datatable-tbody {
-                > tr {
-                    &:nth-child(odd) {
-                        background-color: rgb(221 221 221) !important;
-                    }
-
-                    > td {
-                        border: 0 0;
-                        display: block;
-                        font-family: $mainFontFamily;
-                        font-size: 16px;
-                        min-height: 35px;
-                        padding-left: 33% !important;
-                        position: relative;
-                        text-align: right !important;
-                        width: 100%;
-
-                        &::after {
-                            content: attr(data-head);
-
-                            // font-family: 'Roboto', sans-serif;
-                            font-family: $mainFontFamily;
-                            font-size: 15px;
-                            font-weight: 600;
-                            left: 3px;
-                            position: absolute;
-                            top: 10px;
-                            word-break: break-all;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-@media (max-width: 40em) {
-    body {
-        .ui-picklist.ui-picklist-responsive {
-            .ui-picklist-buttons {
-                padding: 0.571em 1em;
-            }
-        }
-    }
-}
-
-@media screen and (max-width: 960px) {
-    body {
-        .p-datatable-thead > tr > th,
-        .p-datatable-tfoot > tr > td {
-            display: none !important;
-        }
-        .p-datatable-tbody > tr > td:not(:last-child) {
-            border: 0 none;
-        }
-    }
-}
-
-.m-subheader .m-subheader__title.m-subheader__title--separator {
-    border-right: 1px solid $primeSeprator;
-}
-
-.m-subheader .m-subheader__title {
-    color: $primeSubheader;
-    display: inline-block;
-    font-family: $mainFontFamily;
-    font-size: 1.55rem;
-    font-weight: 500;
-    margin: 0 15px 0 0;
-    padding: 7px 25px 7px 0;
-    vertical-align: middle;
-}
-
-.m-subheader .m-section__sub {
-    position: relative;
-    top: 3px;
-}
-
-.primeng-datatable-container {
-    background: rgb(249 249 249);
-    border: 1px solid rgb(238 238 238);
-    margin: 15px 0;
-    padding: 5px;
-
-    .total-records-count {
-        bottom: -8px;
-        float: left;
-        position: relative;
-    }
-
-    .search-filter {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .actions-list-two {
-        min-width: 95px;
-    }
-
-    .actions-list-three {
-        min-width: 135px;
-    }
-
-    .actions-list-four {
-        min-width: 170px;
-    }
-
-    @media (max-width: 425px) {
-        .search-filter {
-            display: block;
-        }
-    }
-
-    @media (max-width: 425px) {
-        .col-sm-4,
-        .col-sm-3 {
-            padding: 0 5px;
-        }
-    }
-}
-
-@media (min-width: 320px) and (max-width: 720px) {
-    .primeng-datatable-container {
-        .search-contact {
-            display: block;
-        }
-    }
-}
-
-.primeng-datatable-container table thead tr th {
-    background-color: $branding-color-1 !important;
-    color: rgb(255 255 255) !important;
-}
-
-.analytics {
-    padding-bottom: 30px;
-
-    .primeng-datatable-container table thead tr th {
-        background-color: $form-control-color !important;
-        padding: 3px 10px;
-    }
-}
-
-.modal-content {
-    .modal-title {
-        font-size: 20px;
-    }
-}
-
-.skills-modal {
-    .ui-autocomplete-multiple {
-        border: 1px solid $uiinputText;
-    }
-}
-
-.skills-modal {
-    p-autocomplete {
-        ul.p-autocomplete-multiple-container {
-            width: 100%;
-        }
-    }
-}
-
-body
-    .ui-tabmenu
-    .ui-tabmenu-nav
-    .ui-tabmenuitem:not(.ui-state-active):not(.ui-state-disabled):hover {
-    background-color: $tabColor;
-    border: 0;
-}
-
-body .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
-    background: rgb(255 255 255);
-}
-
-body .ui-rating a .pi-star {
-    color: $piStart;
-}
-
-.recommendation {
-    .ui-rating {
-        a {
-            font-size: 14px;
-        }
-    }
-}
-
-.ui-multiselect-item label {
-    color: rgb(0 0 0);
-}
-
-.ui-tooltip .ui-tooltip-text {
-    font-size: 14px;
-}
-
-p-table {
-    td {
-        word-break: break-all;
-    }
-}
-
-.p-menuitem-link-active {
-    color: map-get($danger, base) !important;
-    font-weight: 600;
-}
-
-@media (min-width: 641px) {
-    .w-md-50 {
-        width: 50% !important;
-    }
-}
-
-.chat-sidebar-content {
-    p-autocomplete,
-    span.p-autocomplete,
-    .p-autocomplete input {
-        display: flex;
-        width: 100%;
-    }
-}
-
-.input-file-upload {
-    .p-fileupload-content {
-        .p-fileupload-files {
-            .p-fileupload-row > :first-child {
-                display: none;
-            }
-        }
-    }
-}
-
-p-fileupload {
-    .preview-wrapper {
-        align-items: center;
-        div {
-            padding: 1rem;
-            flex: 1 1 auto;
-            width: 25%;
-            word-break: break-all;
-        }
-    }
-}
-
-.p-button-label {
-    margin-left: 5px;
-}