body {
    .ui-picklist {
        .ui-picklist-caption {
            padding: $headerPadding;
        }

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

        li.ui-picklist-item {
            padding: $listItemPadding;
            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-filter-container {
            .ui-picklist-filter-icon {
                left: .3em;
            }
        }

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

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

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

        &.ui-picklist-responsive {
            .ui-picklist-buttons {
                width: 3.429em;

                .ui-button {
                    &.ui-button-icon-only {
                        margin: 0 auto;
                        display: block;
                        margin-bottom: 0.571em;
                    }
                }
            }

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

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

    .ui-orderlist {
        .ui-orderlist-caption {
            padding: $headerPadding;
            @include border-box-sizing();
        }

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

            li.ui-orderlist-item {
                padding: $listItemPadding;
                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-filter-container {
            .ui-orderlist-filter-icon {
                left: .3em;
            }
        }

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

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

            .ui-button {
                &.ui-button-icon-only {
                    width: 2.5em;
                    height: 2.5em;
                    margin: 0 auto 0.571em auto;
                }
            }
        }
    }

    .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: darken($contentBorderColor, 10%);
        }

        .ui-organizationchart-line-left {
            border-right: 1px solid darken($contentBorderColor, 10%);
        }

        .ui-organizationchart-line-right {

        }

        .ui-organizationchart-line-top {
            border-top: 1px solid darken($contentBorderColor, 10%);
        }

        .ui-organizationchart-node-content {
            border-color: darken($contentBorderColor, 10%);
        }

        .ui-organizationchart-node-content .ui-node-toggler {
            bottom: -1.143em;
            margin-left: -.825em;
            color: darken($contentBorderColor, 10%);

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

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

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

        > a {
            box-sizing: border-box;
            color: #ffffff;

            .pi {
                display: none;
            }

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

        .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-first, .ui-paginator-prev,
        .ui-paginator-next, .ui-paginator-last {
            min-width: 1.200em;
            width: 1.200em;
            height: 1.200em;
            line-height: 1.2;
        }

        .ui-paginator-pages {
            vertical-align: middle;
            margin: 0 6px 0 12px;
            padding: 0;

            a {
                padding: 0;
                color: $headerTextColor;
                min-width: 1.714em;
                min-height: 1.714em;
                line-height: 1.74em;
                @include border-radius(50%);
                @include transition(background-color $transitionDuration);

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

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

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

        .ui-panel {
            .ui-panel-titlebar {
                background-color: #ffffff;
                color: $textColor;
            }
        }
    }

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

    .ui-dataview {
        .ui-dataview-header {
            background-color: #ffffff;
            color: $textColor;
            padding: $headerPadding;
            border: 1px solid $dividerColor;
            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 $contentBorderColor;
        }

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

    .ui-table {
        .ui-table-caption,
        .ui-table-summary {
            padding: $headerPadding;
            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: $dataTableHeaderPadding;
        }

        .ui-table-thead > tr > th,
        .ui-table-tfoot > tr > td {
            font-weight: $headerFontWeight;
            background-color: #ffffff;
            border: 0 none;
        }

        p-sortIcon {
            display: inline-block;
        }

        .ui-table-thead > tr > th {
            padding: $dataTableHeaderPadding;
            border: 0 none;
            text-align: left;
            font-weight: $headerFontWeight;
            border-top: 1px solid $contentBorderColor;
            background-color: #ffffff;

            &:first-child {
                border-left: 1px solid $contentBorderColor;
            }

            &:last-child {
                border-right: 1px solid $contentBorderColor;
            }

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

            .ui-sortable-column-icon {
                vertical-align: middle;
                margin: -4px 0 0 0;
                color: $textSecondaryColor;

                &.#{$iconPrefix}-carat-2-n-s {
                    margin-left: 4px;
                }
            }

            .ui-column-resizer {
                @include material-icon("\e86f");
                color: $textSecondaryColor;
            }

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

                .#{$iconPrefix} {
                    color: $accentTextColor;
                }

                .ui-inputtext {
                    color: $accentTextColor;

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

        .ui-table-tfoot > tr > td {
            padding: $dataTableHeaderPadding;
            border: 0 none;
            background-color: $contentBgColor;
            text-align: left;
            font-weight: $headerFontWeight;

            &:first-child {
                border-left: 1px solid $contentBorderColor;
            }

            &:last-child {
                border-right: 1px solid $contentBorderColor;
            }
        }

        .ui-table-loading-icon {
            color: #ffffff;
        }

        .ui-table-globalfilter-container {
            .ui-inputtext {
                background-color: transparent;
                background-image: linear-gradient(to bottom, #ffffff, #ffffff), linear-gradient(to bottom, $inputBorderColor, $inputBorderColor);
                border-width: 0;
                padding: 2px;
                color: #ffffff;
            }

            input::-webkit-input-placeholder { /* Edge */
                color: #ffffff;
            }

            input:-ms-input-placeholder { /* Internet Explorer 10-11 */
                color: #ffffff;
            }

            input::placeholder {
                color: #ffffff;
            }
        }

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

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

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

                .ui-sortable-column-icon {
                    @include hover-element();
                }
            }

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

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

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

        .ui-table-tbody {
            > tr {
                background: $contentBgColor;
                border: 1px solid $contentBorderColor;

                > td {
                    background: inherit;
                    padding: $dataTableCellPadding;
                    border: 0 none;

                    &.ui-editing-cell {
                        padding: $dataTableCellPadding;
                    }
                }

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

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

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

            > tr:nth-child(even) {
                background-color: $dataTableRowBgColorEven;

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

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


        .ui-table-scrollable-wrapper {
            .ui-table-scrollable-header,  .ui-table-scrollable-footer {
                border: 0 none;
                background-color: transparent;
                padding: 0px;
            }

            thead {
                tr {
                    th {
                        color: $textColor;
                    }
                }
            }

            tfoot {
                tr {
                    td {
                        color: $textColor;
                    }
                }
            }
        }

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

    .ui-carousel {
        .ui-carousel-content {
            .ui-carousel-prev,
            .ui-carousel-next {
                background-color: #ffffff;
                border: none;
                @include border-radius(50%);
                margin: .2em;
                height: 2.5em;
                width: 2.5em;
                padding: 0;
                color: $textColor;
                @include transition(color $transitionDuration);

                span {
                    color: $textColor;
                    font-size: 26px;
                    vertical-align: middle;
                }

                &:not(.ui-state-disabled) {
                    &:hover {
                        background-color: $hoverBgColor;
                        color: $hoverTextColor;
                        border-color: none;
                    }
                }
            }
        }

        .ui-carousel-dots-container {
            .ui-carousel-dot-item {
                > .ui-button {
                    border-color: transparent;
                    background-color: transparent;
                    @include shadow(none);
                    padding: 0;
                }

                .ui-carousel-dot-icon {
                    width: 20px;
                    height: 6px;
                    background-color: #b2c1cd;
                    margin: 0 .2em;

                    &::before {
                        content: ' ';
                    }
                }

                &.ui-state-highlight {
                    background-color: #ffffff;

                    .ui-carousel-dot-icon {
                        background-color: $primaryColor;
                    }
                }
            }
        }
    }

    .ui-tree {
        padding: $contentPadding;

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

        .ui-treenode-content {
            padding: $listItemPadding;
            padding-left: 0;
            padding-right: 0;
            display: inline-block;

            .ui-chkbox {
                margin: 0 0.286em 0 0.286em;

                .pi {
                    color: #757575;
                }
            }

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

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

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

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

            &.ui-treenode-dragover {
                background: $primaryLightColor;

                > span {
                    color: $primaryTextColor;
                }
            }
        }

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

            .ui-treenode-content {
                background-color: $contentBgColor;
                border: 1px solid $contentBorderColor;
                padding: .4em 1em .4em .2em;

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

                .ui-treenode-icon  {
                    margin-right: 0.286em;
                }

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

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

                    .ui-treenode-icon  {
                        color: $accentTextColor;
                    }
                }
            }
        }
    }

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

    .fc {
        .fc-button {
            background-color: $primaryColor;
            color: $buttonTextColor;
            font-family: $fontFamily;
            height: 2.25em;
            padding: 0 1em;
            border: 0 none;

            &:enabled:not(:focus):not(.fc-button-active):hover {
                background-color: $primaryDarkColor;
            }

            &:enabled:not(.fc-button-active):focus {
                outline: 0 none;
                background-color: lighten($primaryColor,10%);
                box-shadow: none;
            }

            &.fc-button-active {
                background-color: $accentColor;
                color: $accentTextColor;
                &:focus {
                    box-shadow: none;
                }
            }
        }

        .fc-head {
            th {
                border-color: $primaryColor;
                padding: $headerPadding;
            }

            .fc-row {
                background-color: $primaryColor;
                color: $headerTextColor;
                border: 1px solid $primaryColor;
                font-weight: $headerFontWeight;
            }
        }

        td.fc-today {
            background-color: $accentColor;
            color: $accentTextColor;
        }

        .fc-toolbar {
            .fc-icon-chevron-right {
                font-family: 'Material Icons' !important;
                @include material-icon("play_circle_outline");
                text-indent: 0;
                position: relative;
                top: 1px;
            }

            .fc-icon-chevron-left {
                font-family: 'Material Icons' !important;
                @include material-icon("play_circle_outline");
                @include rotate(180deg);
                text-indent: 0;
                position: relative;
                top: 1px;
            }

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

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

        table {
            box-sizing: border-box;
        }

        div.ui-widget-content {
            padding-left: 0px;
            padding-right: 0px;
        }
    }

    .ui-treetable {
        .ui-treetable-caption,
        .ui-treetable-summary {
            padding: $headerPadding;
        }

        .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: $dataTableHeaderPadding;
        }

        .ui-treetable-thead > tr > th,
        .ui-treetable-tfoot > tr > td {
            font-weight: $headerFontWeight;
            background-color: #ffffff;
            border: 0 none;
        }

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

        .ui-treetable-thead > tr > th {
            padding: $dataTableHeaderPadding;
            border: 0 none;
            text-align: left;
            font-weight: $headerFontWeight;
            border-top: 1px solid $contentBorderColor;
            background-color: #ffffff;

            &:first-child {
                border-left: 1px solid $contentBorderColor;
            }

            &:last-child {
                border-right: 1px solid $contentBorderColor;
            }

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

            .ui-sortable-column-icon {
                vertical-align: middle;
                margin: -4px 0 0 0;
                color: $textSecondaryColor;

                &.#{$iconPrefix}-carat-2-n-s {
                    margin-left: 4px;
                }
            }

            .ui-column-resizer {
                @include material-icon("\e86f");
                color: $textSecondaryColor;
            }

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

                .#{$iconPrefix} {
                    color: $accentTextColor;
                }

                .ui-inputtext {
                    color: $accentTextColor;

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

        .ui-treetable-tfoot > tr > td {
            padding: $dataTableHeaderPadding;
            border: 0 none;
            background-color: $contentBgColor;
            text-align: left;
            font-weight: $headerFontWeight;

            &:first-child {
                border-left: 1px solid $contentBorderColor;
            }

            &:last-child {
                border-right: 1px solid $contentBorderColor;
            }
        }

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

        .ui-treetable-loading-content {
            .pi-spin {
                -webkit-animation: 2s linear infinite spin;
                animation: 2s linear infinite spin;
                color: #ffffff;
            }
        }

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

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

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

                .ui-sortable-column-icon {
                    @include hover-element();
                }
            }

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

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

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

        .ui-treetable-tbody {
            > tr {
                background: $contentBgColor;
                border: 1px solid $contentBorderColor;

                > td {
                    padding: $dataTableCellPadding;
                    border: 0 none;

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

                    .ui-treetable-chkbox {
                        margin-right: .75em;
                        margin-top: 2px;

                        .ui-chkbox-box.ui-state-active {
                            &:before {
                                -webkit-animation: none;
                                animation: none;
                            }
                        }
                    }
                }

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

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

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

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

                            .ui-chkbox-icon {
                                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();
            }
        }

        .ui-treetable-scrollable-wrapper {
            .ui-treetable-scrollable-header,  .ui-treetable-scrollable-footer {
                border: 0 none;
                background-color: transparent;
                padding: 0px;
            }

            thead {
                tr {
                    th {
                        background-color: #ffffff;
                        color: $textColor;
                        border-bottom: 1px solid $dividerColor;
                        border-top: 1px solid $dividerColor;

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

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

    .ui-virtualscroller {
        .ui-virtualscroller-content {
            padding: 0;
        }

        .ui-virtualscroller-list {
            li {
                border-bottom: 1px solid $dividerColor;
            }
        }
    }
}

@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;
                    }
                }
            }
        }
    }
}
