@posiwise/shared-components 0.0.10 → 0.0.11

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

@@ -0,0 +1,5100 @@
+* {
+    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;
+}