:root {
    --banner-font: 'Proxima Nova', Arial, sans-serif;
    --font: 'Proxima Nova', Arial, sans-serif;

    --primary-color: #d41217;
    --secondary-color: #bfdcf733;

    --primary-background-color: #ffffff;
    --secondary-background-color: #f8f8f8;

    --primary-text-color: #262626;
    --secondary-text-color: #b0b0b0;

    --box-shadow-color: var(--primary-color);

    --active-background-color: var(--primary-color);
    --active-border-color: var(--primary-color);
    --active-text-color: var(--primary-background-color);

    --inactive-background-color: var(--secondary-color);
    --inactive-border-color: var(--secondary-color);
    --inactive-text-color: var(--primary-text-color);
}

::-webkit-scrollbar {
    width: 12px !important;
    background-color: var(--primary-background-color);
}

::-webkit-scrollbar-track {
    -webkit-border-radius: 10px !important;
    border-radius: 10px !important;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
    background-color: var(--primary-background-color);
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px !important;
    border-radius: 10px !important;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5) !important;
    background-color: var(--primary-color);
}

::selection {
    background-color: var(--primary-color);
    color: var(--active-text-color);
}

body {
    background-color: var(--primary-background-color);

    *:not(pi) {
        font-family: var(--font);
    }

    *:link {
        color: var(--primary-color);
    }

    *:visited {
        color: var(--primary-color);
    }

    .hidden-div {
        background-color: transparent;
    }

    div, .tab-menu.ui-tabs-left, .tab-menu.ui-tabs-left .ui-tabmenu-nav, .ui-inputfield,
    .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item, .ui-panelgrid .ui-panelgrid-cell,
    .data-content .ui-panel-content, .data-content .ui-panel-content .ui-panelgrid-content .ui-panelgrid-cell,
    .info-display .ui-panel-content div, .info-display .ui-panel-footer .ui-panelgrid-cell,
    .step-by-step div .ui-panelgrid, .faq details, .faq .ui-panel-footer .ui-panelgrid-cell,
    .ui-datatable .ui-datatable-header, form .ui-datatable .ui-datatable-header,
    .data-table > .ui-panel-content .ui-selectonemenu, .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon,
    form .data-table > .ui-panel-content .ui-selectonemenu, .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon,
    .ui-dialog .ui-dialog-titlebar, .ui-dialog .ui-dialog-content, .ui-dialog .ui-dialog-content .ui-panel-content,
    .ui-dialog .ui-dialog-content .ui-panel-content .ui-panelgrid-cell,
    .ui-dialog .ui-dialog-content .ui-panel-footer, .ui-dialog .ui-dialog-content .ui-panel-footer .ui-panelgrid-cell {
        background-color: var(--primary-background-color);
        color: var(--primary-text-color);
    }

    .ui-divider.ui-divider-horizontal:before, .faq .ui-panel-content .ui-divider.ui-divider-horizontal:before {
        border-color: var(--secondary-text-color);
    }

    .tab-menu.ui-tabs-left .ui-tabmenu-nav .ui-tabmenuitem, .ui-tabmenuitem.ui-state-active {
        background-color: var(--primary-background-color);

        .ui-menuitem-link {
            background-color: var(--inactive-background-color);
            border: solid 1px var(--inactive-border-color);

            .ui-menuitem-text, .ui-menuitem-icon {
                color: var(--inactive-text-color);
            }
        }

        &.ui-state-active .ui-menuitem-link {
            background-color: var(--active-background-color);
            border: solid 1px var(--active-border-color);

            .ui-menuitem-text, .ui-menuitem-icon {
                color: var(--active-text-color);
            }
        }

        &:hover .ui-menuitem-link {
            box-shadow: 0 0 0 2px var(--box-shadow-color);
        }
    }

    #_id_page {
        @media screen and (min-width: 1025px) {
            border-left: solid 1px var(--secondary-text-color);
        }
    }

    #_id_titlebar {
        background-color: var(--primary-background-color);
        border-bottom: solid 1px var(--secondary-text-color);

        h1, h4 {
            font-family: var(--banner-font);
        }
    }

    #_id_footer {
        background-color: var(--secondary-color);
        color: var(--secondary-text-color);
        border-top: solid 1px var(--secondary-text-color);
    }

    .error-content {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #262626;
        border-radius: 10px;

        & > .ui-panel-titlebar {
            color: #262626;
            font-size: x-large;
            font-weight: lighter;
        }

        & > .ui-panel-titlebar, & > .ui-panel-content, & > .ui-panel-footer {
            background-color: transparent;
            border: none;
        }
    }

    .ui-growl {
        background-color: transparent;
    }

    .ui-inputfield {
        border-color: var(--secondary-text-color);

        &.ui-state-hover {
            border-color: var(--primary-color);
        }

        &.ui-state-focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px var(--primary-color);
        }
    }

    .ui-selectonemenu-panel {
        border-color: var(--secondary-text-color);

        .ui-selectonemenu-items {
            padding: 0;

            .ui-selectonemenu-item {

                &.ui-state-hover {
                    background-color: var(--active-background-color);
                    color: var(--active-text-color);
                }

                &.ui-state-highlight {
                    background-color: var(--inactive-background-color);
                    border: solid 1px var(--inactive-border-color);
                    color: var(--inactive-text-color);
                }
            }
        }
    }

    .ui-chkbox, .data-table > .ui-panel-content .order-item-table .ui-panel-content .ui-datatable .ui-datatable-data > tr .ui-chkbox,
    form .data-table > .ui-panel-content .order-item-table .ui-panel-content .ui-datatable .ui-datatable-data > tr .ui-chkbox {
        .ui-chkbox-box {
            &.ui-state-focus {
                box-shadow: none;
            }

            &.ui-state-hover {
                border-color: transparent;
                box-shadow: 0 0 0 2px var(--box-shadow-color);
            }
        }

        .ui-state-default {
            background-color: transparent;
            border-color: var(--secondary-text-color);
        }

        .ui-state-active {
            background-color: var(--active-background-color);
            border-color: var(--active-border-color);

            .ui-chkbox-icon {
                color: var(--primary-background-color);
            }
        }
    }

    .ui-button {
        background-color: var(--primary-color);
        color: var(--primary-text-color);
        border-color: var(--primary-color);

        &.ui-state-hover, &.ui-state-focus, &.ui-state-active {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            color: var(--active-text-color);
            box-shadow: 0 0 0 2px var(--primary-color);
        }

        &.ui-button-text-only {
            &.ui-state-focus {
                box-shadow: none;
            }

            &.ui-state-hover, &.ui-state-active {
                box-shadow: 0 0 0 2px var(--box-shadow-color);
            }
        }

        &.ui-button-flat {
            background-color: transparent;
            border: none;
            box-shadow: none;

            &.ui-state-hover, &.ui-state-active {
                background-color: transparent;
                box-shadow: 0 0 0 2px var(--box-shadow-color);
            }
        }
    }

    .back-button, .back-button.ui-state-hover, .back-button.ui-state-focus, .back-button.ui-state-active {
        background-color: transparent;
        border-color: var(--primary-color);
        color: var(--inactive-text-color);
    }

    .continue-button, .continue-button.ui-state-hover {
        background-color: var(--active-background-color);
        border-color: var(--active-border-color);
        color: var(--active-text-color);
    }

    .data-content {
        background-color: var(--primary-background-color);
        border-color: var(--primary-background-color);

        & > .ui-panel-titlebar {
            color: var(--primary-text-color);
        }

        & > .ui-panel-titlebar, & > .ui-panel-content, & > .ui-panel-footer {
            background-color: transparent;
            border: none;
        }
    }

    .ui-breadcrumb {
        background-color: transparent;
        border: none;

        .ui-breadcrumb-items li {
            .ui-icon::before, &::before, .ui-menuitem-link .ui-menuitem-text {
                color: var(--primary-text-color) !important;
            }

            .ui-menuitem-link:focus {
                box-shadow: 0 0 0 2px var(--box-shadow-color);
            }
        }
    }

    .step-by-step div .ui-panelgrid .ui-panelgrid-cell div {
        background-color: var(--secondary-background-color);
    }

    .data-scroller .ui-datascroller, form .data-scroller .ui-datascroller {
        .ui-datascroller-header, .ui-datascroller-content .ui-datascroller-item > div {
            background-color: var(--primary-background-color);
            border: none;
        }

        div {
            background-color: var(--primary-background-color);
            color: var(--secondary-text-color);
        }

        .ui-datascroller-content .ui-datascroller-item > div .ui-panelgrid {
            background-color: var(--secondary-background-color);
            border-color: var(--secondary-background-color);

            .ui-panelgrid-content {
                background-color: transparent;

                div {
                    background-color: transparent;

                    .ui-panelgrid-cell {
                        color: var(--primary-text-color);
                        font-size: large;

                        .ui-icon {
                            color: var(--primary-color);
                        }
                    }
                }
            }
        }
    }

    .data-scroller .custom-empty-message > p, form .data-scroller .custom-empty-message > p {
        background-color: var(--secondary-background-color);
    }

    ::placeholder {
        color: var(--secondary-text-color);
    }

    .data-table > .ui-panel-content, form .data-table > .ui-panel-content {
        .order-item-table, .label-table {
            .ui-panel-titlebar, .ui-panel-content, .ui-panel-content .ui-datatable,
            .ui-datatable-header,
            .ui-panel-content .ui-datatable .ui-datatable-tablewrapper,
            .ui-panel-content .ui-datatable .ui-datatable-data {
                background-color: transparent;
                border: none;
            }

            .ui-panel-content .ui-datatable .ui-datatable-data > tr {
                background-color: var(--secondary-background-color);
                border-color: var(--primary-background-color);
                color: var(--primary-text-color);

                .ui-row-toggler {
                    color: var(--primary-text-color);

                    &:focus {
                        box-shadow: none;
                    }
                }

                &.ui-expanded-row-content {
                    .ui-chronoline {
                        background-color: transparent;

                        div {
                            background-color: transparent;
                        }

                        .ui-chronoline-event-marker {
                            background-color: var(--active-background-color);
                            border-color: var(--active-border-color);
                        }

                        .ui-chronoline-event:first-child .ui-chronoline-event-marker {
                            background-color: var(--primary-background-color);
                        }

                        .ui-chronoline-event-connector {
                            background-color: var(--active-background-color);
                        }
                    }
                }
            }
        }

        .ui-selectonemenu {
            border-color: var(--secondary-text-color);

            &.ui-state-focus {
                box-shadow: none;
            }
        }
    }

    .primaryText {
        color: var(--primary-text-color);
    }

    .secondaryText {
        color: var(--secondary-text-color);
    }

    .ui-tooltip {
        background-color: transparent;

        .ui-tooltip-text {
            background-color: var(--active-background-color);
            border-color: var(--active-border-color);
            color: var(--active-text-color);
        }

        &.ui-tooltip-top .ui-tooltip-arrow {
            border-top-color: var(--active-background-color);
        }
    }

    .ui-dialog {
        .ui-dialog-titlebar .ui-dialog-titlebar-icon {
            background-color: var(--secondary-background-color);
            color: var(--primary-text-color);

            &:focus {
                box-shadow: none;
            }

            &:hover {
                box-shadow: 0 0 0 1px var(--box-shadow-color);
                background-color: var(--secondary-background-color);
                color: var(--primary-text-color);
            }
        }
    }

}