.layout-wrapper {
    .layout-main {
        .layout-topbar {
            background-color: $topBgColor;
            box-shadow: 0 0px 1px #888;
        }
    }
}

.ui-menuitem-link {
    .fa {
        color: $textColor !important;
    }
}

.ui-toolbar {
    background-color: $toolbarBgColor !important;
    box-shadow: none !important;

    .ui-toolbar-group-right {
        .ui-button {
            &:not(.ui-state-disabled):not(.secondary-btn):not(.ui-state-active){
                background-color: $accentColor !important;
                color: $accentTextColor !important;
                .pi{
                    color: $accentTextColor !important;
                }
            }
            &:not(.ui-state-disabled):not(.secondary-btn):not(.ui-state-active):hover {
                background-color: $accentDarkColor !important;
            }
        }

        .secondary-btn {
            &:enabled:not(:focus) {
                background-color: $primaryLightColor !important;
                color: $primaryTextColor !important;
                .pi{
                    color: $primaryTextColor !important;
                }
            }
            &:enabled:not(:focus):hover {
                background-color: $primaryDarkColor !important;
            }
        }
    }
}

.ui-toolbar.ui-widget-header {
    border-color: $toolbarBgColor !important;
}

.ui-toolbar-group-left {
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
}

.layout-wrapper {
    .layout-main {
        .layout-footer {
            padding: 0px 10px;
        }
    }
}

body {
    .ui-tabview {
        .ui-tabview-nav {
            > li {
                &.ui-state-active {
                    a {
                        font-weight: bold !important;
                    }
                }
            }
        }
    }
    .ui-button, .ui-datepicker-buttonpane > button {
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    .ui-chkbox {
        .ui-chkbox-box {
            &.ui-state-active {
                .pi {
                    color: $primaryTextColor;   //Because background color is Primary for Checkbox
                }
            }
        }
    }

    .ui-selectbutton {
        .ui-button {
            background-color: $selectButtonBgColor !important;
            color: $selectButtonColor !important;

            &.ui-state-active{
                background-color: $primaryColor !important;
                color: $primaryTextColor !important;
            }
        }
    }

    .ui-widget-header:not(.ui-dataview-header) {
        .ui-inputtext {
            background-image: none;
        }
    }

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

@media (max-width: $mobileBreakpoint) {
    .topbar-menu{
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
}

@media (min-width: $mobileBreakpoint) {
    .user-menu{
        margin-left: 30px !important;
    }

    .user-menu > a > i {
        font-size: 20px !important;
    }

    .active-topmenuitem ul {
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }

    .badge-icon {
        font-size: 32px !important;
    }
}