body {
    .ui-picklist {
        .ui-picklist-caption {
            font-size: $inputHeaderFontSize;
            padding: $inputHeaderPadding;
        }

        .ui-picklist-list {
            padding: 0;
        }

        .ui-picklist-filter-container {
            .pi {
              left: 0.3em;
            }

            .ui-picklist-filter {
                text-indent: 1.5em;
            }
        }

        li.ui-picklist-item {
            font-size: $inputOptionFontSize;
            padding: $inputOptionPadding;
            margin: 0;
            @include border-radius(0);
            color: $textColor;

            &:not(.ui-state-highlight):hover {
                @include hover-element();
            }

            &.ui-state-highlight {
                background-color: $accentColor;
                color: $accentTextColor;
            }
        }

        .ui-picklist-buttons {
            width: 3em;

            .ui-button {
                &.ui-button-icon-only {
                    width: 2.5em;
                    margin-right: 0;
                    display: inline-block;
                    margin-bottom: .5em;
                }
            }
        }

        .ui-picklist-buttons-cell {
            text-align: center;
        }

        &.ui-picklist-responsive {
            .ui-picklist-buttons {
                .ui-button {
                    &.ui-button-icon-only {
                        margin: 0 auto;
                        display: block;
                        margin-bottom: .5em;
                    }
                }
            }

            .ui-picklist-list {
                .ui-picklist-item {
                    .ui-chkbox {
                        margin-right: .5em;
                        vertical-align: top;
                    }

                    .ui-chkbox,.ui-chkbox * {
                        box-sizing: content-box;
                    }
                }
            }
        }
    }

    .ui-organizationchart {
        .ui-organizationchart-node-content {
            &.ui-organizationchart-selectable-node:not(.ui-state-highlight):hover {
                @include hover-element();
            }

            &.ui-state-highlight {
                .ui-node-toggler {
                    i {
                        color: darken($accentColor, 25%);
                    }
                }
            }
        }
        .ui-organizationchart-line-down {
            background-color: $dividerColor;
        }

        .ui-organizationchart-line-left {
            border-right: 1px solid $dividerColor;
        }

        .ui-organizationchart-line-right {

        }

        .ui-organizationchart-line-top {
            border-top: 1px solid $dividerColor;
        }

        .ui-organizationchart-node-content {
            border-color: $dividerColor;
        }

        .ui-organizationchart-node-content .ui-node-toggler {
            bottom: -1.3em;
            margin-left: -.75em;
            color: $dividerColor;

            .pi-chevron-down {
                @include material-icon("keyboard_arrow_down");
            }

            .pi-chevron-up {
                @include material-icon("keyboard_arrow_up");
            }
        }
    }

    .ui-orderlist {
        .ui-orderlist-caption {
            font-size: $inputHeaderFontSize;
            padding: $inputHeaderPadding;
            box-sizing: border-box;
        }

        .ui-orderlist-list {
            padding: 0;
            box-sizing: border-box;

            li.ui-orderlist-item {
                font-size: $inputOptionFontSize;
                padding: $inputOptionPadding;
                margin: 0;
                @include border-radius(0);
                color: $textColor;

                &:not(.ui-state-highlight):hover {
                    @include hover-element();
                }

                &.ui-state-highlight {
                    background-color: $accentColor;
                    color: $accentTextColor;
                }
            }
        }

        &.ui-orderlist-responsive {
            .ui-orderlist-controls {
                width: 3.75em;
            }
        }

        .ui-orderlist-controls {
            width: 3.75em;
            text-align: center;

            .ui-button {
                &.ui-button-icon-only {
                    width: 2.5em;
                    margin-bottom: .5em;
                    margin-right: 0;
                }
            }
        }
    }

    .ui-paginator {
        background-color: $primaryDarkColor;
        padding: $headerPadding;

        > a {
            box-sizing: border-box;
            color: $paginatorIconColor;

            .pi {
                display: none;
            }

            &:not(.ui-state-disabled):not(.ui-state-active):hover {
                background-color: $primaryLightColor;
                @include border-radius(50%);
                @include transition(background-color .3s);
            }
        }

        .ui-paginator-next {
            padding: 0;
            vertical-align: middle;
            @include material-icon("navigate_next");
        }

        .ui-paginator-last {
            padding: 0;
            vertical-align: middle;
            @include material-icon("last_page");
        }

        .ui-paginator-prev {
            padding: 0;
            vertical-align: middle;
            @include material-icon("navigate_before");
        }

        .ui-paginator-first {
            padding: 0;
            vertical-align: middle;
            @include material-icon("first_page");
        }

        .ui-paginator-pages {
            vertical-align: middle;
            margin: 0 .375em 0 .375em;

            a {
                padding: 0;
                color: $paginatorIconColor;
                min-width: 1.5em;
                min-height: 1.5em;
                line-height: 1.5em;
                @include border-radius(50%);
                @include transition(background-color .3s);

                &:not(.ui-state-active):hover {
                    background-color: $primaryLightColor;
                }

                &.ui-state-active {
                    background-color: $accentColor;
                    color: $accentTextColor;
                }
            }
        }

        .ui-dropdown {
            background-image: linear-gradient(to bottom, $headerBgColor, $headerBgColor), linear-gradient(to bottom, $headerTextColor, $headerTextColor);

            .ui-dropdown-trigger {
                .pi{
                    color: $headerTextColor;
                }
            }

            .ui-dropdown-label {
                background: none;
                padding-right: 1.5em;

            }
        }
    }

    .ui-datagrid {
        .ui-datagrid-header {
            padding: $headerPadding;
        }

        .ui-panel {
            .ui-panel-titlebar {
                background-color: $tableHeaderCellBgColor;
                color: $tableHeaderCellTextColor;
                border-color: $dividerColor;
            }
        }
    }

    .ui-datalist {
        .ui-datalist-header {
            padding: $headerPadding;
        }
    }

    .ui-table {
        .ui-table-caption,
        .ui-table-summary {
          padding: $headerPadding;
          text-align: center;
          font-weight: normal;
        }

        .ui-table-caption {
          border-bottom: 0 none;
        }

        .ui-table-summary {
          border-top: 0 none;
        }

        .ui-table-thead > tr > th,
        .ui-table-tbody > tr > td,
        .ui-table-tfoot > tr > td {
            padding: $contentPadding;
        }

        .ui-table-thead > tr > th,
        .ui-table-tfoot > tr > td {
            font-weight: 400;
            color: $tableHeaderCellTextColor;
            background-color: $tableHeaderCellBgColor;
            border: 1px solid $dividerLightColor;
        }

        .ui-table-thead tr .ui-inputtext {
             width: 100%;
        }

        .ui-table-scrollable-header {
            border: none;

            .ui-sortable-column {
                .ui-sortable-column-icon {
                    color: $textColor;
                }

                &.ui-state-highlight {
                    .ui-sortable-column-icon {
                        color: $accentTextColor;
                    }
                }
            }
        }

        .ui-table-loading-content {
            .pi-spin {
                -webkit-animation: 2s linear infinite fa-spin;
                animation: 2s linear infinite fa-spin;
                color: $tableContentLoadIconColor;
            }
        }

        .ui-sortable-column {
            color: $tableHeaderCellTextColor;

            a, a:hover {
                color: $textSecondaryColor;
            }

            &:not(.ui-state-highlight):hover {
                @include hover-element();

                a, a:hover {
                    @include hover-element();
                }
            }

            &.ui-state-highlight {
                background-color: $accentColor;
                color: $accentTextColor;
                border-top-color: $accentColor;

                a, a:hover {
                    color: $accentTextColor;
                }
            }

            .ui-sortable-column-icon {
                vertical-align: middle;
            }
        }

        .ui-table-tbody {
            > tr {
                background: $tableBodyRowBgColor;

                > td {
                  background: inherit;
                  border: 1px solid $dividerLightColor;
                }

                &.ui-state-highlight {
                  background-color: $accentColor;
                  color: $accentTextColor;
                }

                &.ui-contextmenu-selected {
                  background-color: $accentColor;
                  color: $accentTextColor;
                }
            }

            > tr:nth-child(odd) {
                background-color: $tableOddRowBgColor;

                &.ui-state-highlight {
                  background-color: $accentColor;
                  color: $accentTextColor;
                }

                &.ui-contextmenu-selected {
                  background-color: $accentColor;
                  color: $accentTextColor;
                }
            }
        }

        &.ui-table-hoverable-rows {
            .ui-table-tbody > tr:not(.ui-state-highlight):not(.ui-contextmenu-selected):hover {
              cursor: pointer;
              @include hover-element();
            }
        }

        .ui-table-reorder-indicator-down, .ui-table-reorder-indicator-up {
            position: absolute;
            display: none;
        }
    }

    @media ( max-width: 35em ) {
        .ui-table-responsive .ui-table-tbody > tr {
            border-top: 1px solid $dividerLightColor;
            border-bottom: 1px solid $dividerLightColor;

            &.ui-state-highlight {
                background-color: $accentColor;
                color: $accentTextColor;
            }
        }
    }

    @media screen and (max-width: 40em) {
        .ui-table-responsive .ui-table-tbody > tr > td {
            border: 0 none;
        }
    }

    .ui-datatable {
        .ui-datatable-header,
        .ui-datatable-footer {
            padding: $headerPadding;

            .ui-inputtext {
                color: $datatableHeaderCellBgColor;

                &:focus {
                    border-color: $datatableHeaderCellBgColor;
                }
            }
        }

        .ui-paginator {
            padding: $headerPadding;
        }

        .ui-datatable-thead {
            > tr {
                 border-color: $dividerLightColor;

                 th {
                    padding: .625em .875em;
                    background-color: $datatableHeaderCellBgColor;

                    &.ui-sortable-column:not(.ui-state-active):hover {
                        @include hover-element();
                    }

                    .ui-column-title {
                        display: inline-block;
                        vertical-align: middle;
                    }

                    .ui-sortable-column-icon {
                        vertical-align: middle;
                        color: $textSecondaryColor;
                    }

                    &.ui-state-active,&.ui-state-highlight {
                        background-color: $accentColor;
                        color: $accentTextColor;
                        border-top-color: $accentColor;

                        .pi {
                            color: $accentTextColor;
                        }

                        .ui-inputtext {
                            color: $accentTextColor;

                            &.ui-state-focus {
                                border-color: $accentTextColor;
                            }
                        }
                    }

                    &.ui-selection-column {
                        .ui-chkbox-box {
                            box-sizing: content-box;
                        }
                    }
                }
            }
        }

        tfoot {
            th {
                padding: .625em .875em;
                border: 1px solid $dividerColor;
                background-color: $datatableHeaderCellBgColor;
            }
        }

        .ui-datatable-data {
            tr.ui-datatable-even {
                background-color: $datatableEvenRowBgColor;

                &.ui-state-highlight {
                    background-color: $accentColor;
                    color: $accentTextColor;
                }
            }

            tr {
                border: 1px solid $dividerLightColor;

                td {
                    padding: .625em .875em;

                    .ui-row-toggler  {
                        display: inherit;
                    }

                    &.ui-state-highlight {
                        .ui-inputtext {
                            color: $datatableHighlightTextColor;
                            border-color: $datatableHighlightTextColor;

                            &:focus {
                                border-color: $datatableHighlightTextColor;
                            }
                        }
                    }

                    &.ui-state-error {
                        background-color: $errorMessageBgColor;
                        border-color: $errorMessageBorderColor;
                        color: $errorMessageTextColor;
                    }

                    input.ui-cell-editor {
                        padding: 2px 2px 1px 2px;
                        font-size: $inputFontSize;
                    }

                    &.ui-selection-column {
                        .ui-chkbox-box, .ui-radiobutton-box {
                            box-sizing: content-box;
                        }
                    }
                }

                &.ui-state-highlight{
                    background-color: $accentColor;
                    border-color: $accentColor;
                    color: $accentTextColor;
                }

                .ui-cell-editor-input {
                    input {
                        color: $accentTextColor;
                    }
                }
            }

            tr.ui-state-error {
                background-color: $errorMessageBgColor;
                border-color: $errorMessageBorderColor;
                color: $errorMessageTextColor;

                .ui-inputtext,
                .ui-inputtext.ui-state-error {
                    border-color: $errorMessageTextColor;
                }
            }

            tr.ui-state-highlight {
                td.ui-selection-column {
                    .ui-radiobutton-box {
                        border-color: $datatableHighlightTextColor;

                        .ui-radiobutton-icon {
                            background-color: $datatableHighlightTextColor;
                        }
                    }

                    .ui-chkbox-box {
                        border-color: $datatableHighlightTextColor;
                        background-color: $datatableHighlightTextColor;

                        .ui-chkbox-icon {
                            color: $textSecondaryColor;
                        }
                    }
                }

                .ui-inputtext {
                    color: $datatableHighlightTextColor;
                    border-color: $datatableHighlightTextColor;

                    &:focus {
                        border-color: $datatableHighlightTextColor;
                    }
                }
            }

            tr.ui-rowgroup-header {
                td {
                    a {
                        height: 1.5em;
                        vertical-align: top;
                        display: inline-block;
                    }
                }
            }

            &.ui-datatable-hoverable-rows {
                > tr.ui-widget-content:not(.ui-state-highlight):hover {
                    cursor: pointer;
                    @include hover-element();
                }
            }
        }

        &.ui-datatable-scrollable {
            .ui-datatable-scrollable-header,  .ui-datatable-scrollable-footer {
                border: 0 none;
                background-color: transparent;

                .ui-datatable-data {
                    td {
                        color: $textColor;
                    }
                }
            }

            thead {
                tr {
                    th {
                        color: $textColor;
                        font-size: $fontSize;
                    }
                }
            }

            tfoot {
                tr {
                    td {
                        color: $textColor;
                        font-size: $fontSize;
                    }
                }
            }
        }

        .ui-datatable-loading {
            @include opacity(.3);
        }

        .ui-datatable-loading-content {
            top: 35%;

            .pi {
                @include material-icon('refresh');
                @include animation(0, 1000ms, spin);
                font-size: 2em;
            }
        }
    }

    .ui-dataview {
        .ui-dataview-header {
            background-color: $dataviewHeaderBgColor;
            color: $textColor;
            padding: $headerPadding;
            border: 1px solid $dividerLightColor;
            border-bottom: 0 none;

            .ui-button {
                &.ui-state-active {
                    &:hover {
                        background-color: $accentColor;
                        color: $accentTextColor;
                    }
                }
            }
        }

        .ui-dataview-content {
            background-color: $contentBgColor;
            color: $textColor;
            border: 1px solid $dividerLightColor;
        }

        .ui-dataview-footer {
            background-color: $dataviewHeaderBgColor;
            color: $textColor;
            padding: $headerPadding;
            border: 1px solid $dividerLightColor;
            border-top: 0 none;
        }
    }

    .ui-carousel {
        padding: 0;

        .ui-carousel-header{
            padding: $headerPadding;
            font-size: $headerFontSize;
            overflow: visible;

            .ui-carousel-header-title {
                overflow: visible;
            }

            .pi {
                color: $panelHeaderIconColor;
            }

            .ui-carousel-button {
                margin: -1px 0 0 0;
            }

            .ui-carousel-page-links {
                margin: -1px 0 0 0;
            }
        }
    }

    .ui-tree {
        padding: $contentPadding / 2;

        .ui-treenode-children {
            padding-left: 1.75em;
        }

        .ui-treenode-content {

            .ui-chkbox {
                margin-right: .5em;

                .pi {
                    color: $contentIconColor;
                }
            }

            .ui-tree-toggler {
                vertical-align: middle;
                margin: 0 0 0 .25em;
            }

            .ui-treenode-icon  {
                vertical-align: middle;
                margin: 0 .25em;
            }

            .ui-chkbox {
                margin: 0 .25em;
            }

            .ui-treenode-label {
                margin: 0;
                vertical-align: middle;
            }

            &.ui-treenode-selectable {
                &:not(.ui-state-highlight):hover {
                    @include hover-element();
                }
            }
        }

        &.ui-tree-horizontal {
            padding-left: 0;
            padding-right: 0;

            .ui-treenode-content {
                background-color: $contentBgColor;
                border: 1px solid $dividerColor;

                .ui-tree-toggler {
                    vertical-align: bottom;
                }

                .ui-treenode-icon  {
                    vertical-align: top;
                    margin-right: .25em;
                }

                &.ui-treenode-selectable {
                    &:not(.ui-state-highlight):hover {
                        @include hover-element();
                    }
                }

                &.ui-state-highlight {
                    background-color: $accentColor;
                    color: $accentTextColor;
                }
            }
        }
    }

    .ui-tree-draghelper {
        border: 1px solid $primaryColor;
    }

    .fc {
        .fc-toolbar {
            .ui-icon-circle-triangle-e {
                @include material-icon("play_circle_outline");
                margin-top: .15em;
            }

            .ui-icon-circle-triangle-w {
                @include material-icon("play_circle_outline"); @include rotate(180deg);
                margin-top: .15em;
            }

            .ui-state-active {
                background-color: $accentColor;
            }
        }

        .fc-event {
            background-color: $primaryLightColor;
            color: $scheduleEventTextColor;
        }

        table {
            box-sizing: border-box;
        }
    }

    .ui-treetable {
        .ui-treetable-caption,
        .ui-treetable-summary {
            padding: $headerPadding;
            text-align: center;
            font-weight: normal;
        }

        .ui-treetable-caption {
            border-bottom: 0 none;
        }

        .ui-treetable-summary {
            border-top: 0 none;
        }

        .ui-treetable-thead > tr > th,
        .ui-treetable-tbody > tr > td,
        .ui-treetable-tfoot > tr > td {
            padding: $contentPadding;
        }

        .ui-treetable-thead > tr > th,
        .ui-treetable-tfoot > tr > td {
            font-weight: 400;
            color: $tableHeaderCellTextColor;
            background-color: $tableHeaderCellBgColor;
            border: 1px solid $dividerLightColor;
        }

        .ui-treetable-thead tr .ui-inputtext {
            width: 100%;
        }

        .ui-treetable-scrollable-header {
            border: none;
        }

        .ui-treetable-loading-content {
            .pi-spin {
                -webkit-animation: 2s linear infinite fa-spin;
                animation: 2s linear infinite fa-spin;
                color: $tableContentLoadIconColor;
            }
        }

        .ui-sortable-column {
            color: $tableHeaderCellTextColor;

            a, a:hover {
                color: $textSecondaryColor;
            }

            &:not(.ui-state-highlight):hover {
                @include hover-element();

                a, a:hover {
                    @include hover-element();
                }
            }

            &.ui-state-highlight {
                background-color: $accentColor;
                color: $accentTextColor;
                border-top-color: $accentColor;

                a, a:hover {
                    color: $accentTextColor;
                }
            }

            .ui-sortable-column-icon {
                vertical-align: middle;
            }
        }

        .ui-treetable-tbody {
            > tr {
                background: $tableBodyRowBgColor;

                > td {
                    background: inherit;
                    border: 1px solid $dividerLightColor;

                    .ui-treetable-toggler {
                        color: $textSecondaryColor;
                        .pi.pi-chevron-right {
                            vertical-align: top;
                        }
                        .pi.pi-chevron-down {
                            vertical-align: middle;
                        }
                    }

                    .ui-treetable-chkbox {
                        vertical-align: middle;
                        margin-right: .4em;
                    }
                }

                &.ui-state-highlight {
                    background-color: $accentColor;
                    color: $accentTextColor;

                    > td {
                        background: inherit;
                        border: $dividerColor;

                        .ui-treetable-toggler {
                            color: $accentTextColor;
                        }
                    }
                }

                &.ui-contextmenu-selected {
                    background-color: $accentColor;
                    color: $accentTextColor;

                    > td {
                        background: inherit;
                        border: $dividerColor;

                        .ui-treetable-toggler {
                            color: $accentTextColor;
                        }
                    }
                }
            }
        }

        &.ui-treetable-hoverable-rows {
            .ui-treetable-tbody > tr:not(.ui-state-highlight):not(.ui-contextmenu-selected):hover {
                cursor: pointer;
                @include hover-element();
            }
        }
    }

}

@media (max-width: 40em) {
    body {
        .ui-orderlist {
            &.ui-orderlist-responsive {
                .ui-orderlist-controls {
                    width: 100%;
                }
            }
        }
    }
}

@media (max-width: 640px) {
    body {
        .ui-picklist {
            &.ui-picklist-responsive {
                .ui-picklist-list-wrapper {
                    margin-bottom: .5em;
                }

                .ui-picklist-buttons {
                    padding: .5em 0;

                    .ui-button {
                        &.ui-button-icon-only {
                            display: inline-block;
                            margin-right: .25em;
                            margin-bottom: 0;
                        }
                    }

                    .pi-angle-right {
                        @include icon-override("play_arrow"); @include rotate(90deg);
                    }

                    .pi-angle-double-right {
                        @include icon-override("skip_previous"); @include rotate(-90deg);

                    }

                    .pi-angle-left {
                        @include icon-override("play_arrow"); @include rotate(-90deg);
                    }

                    .pi-angle-double-left {
                        @include icon-override("skip_next"); @include rotate(-90deg);
                    }
                }
            }
        }

        .ui-orderlist {
            &.ui-grid-responsive {
                .ui-orderlist-controls {
                    text-align: center;
                    width: auto;

                    .ui-button {
                        margin-right: .25em;
                    }
                }
            }
        }
    }
}