body .ui-datatable .ui-paginator.ui-paginator-bottom {
    border: 1px solid #dddddd;
}
body .ui-paginator .ui-paginator-current, body .ui-paginator .ui-paginator-rpp-options {
    height: 30px;
    margin: 0;
    margin-left: 0.5rem;
}
.icon-home img {
    border: 0 none;
    width: 60px;
    height: 60px;
    right: 85px;
    top: 10px;
    position: absolute;
}
.user-image {
    border: 0 none;
    width: 60px;
    height: 60px;
    right: 15px;
    top: 10px;
    position: absolute;
    border-radius: 50%;
}
/*Menu*/
.layout-wrapper .topbar {
    /*   box-shadow: 0 2px 0 0 #15317d;*/

}

body .ajax-loader {
    font-size: 9rem;
    color: red;
}
.disable-scroll .ui-dialog-content {
    overflow: hidden !important;
    background-color: #ffffff !important;
}


.ui-growl {
    left: 50%;
    right: 0;
    margin-left:-225px;
    top: 50px!important;
    width: 550px;
}
.ui-growl-message {
    padding: 0 0 5px 0;
    width: 97%;
    float: left;
}
.topbar-title {
    font-size: 18px;
    font-weight: bold;
    margin: 0 auto;
    float: none;
}
.middle-title {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}
.topbar-program-name {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: white;
}
.topbar-keycode {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: white;
}

.card {
    background: transparent;
}

.ui-lg-1, .ui-lg-2, .ui-lg-3, .ui-lg-4, .ui-lg-5, .ui-lg-6, .ui-lg-7, .ui-lg-8, .ui-lg-9, .ui-lg-10, .ui-lg-11, .ui-lg-12 {
    padding: 1px 4px;
    min-height: 32px;
}

.ui-fluid .ui-button {
    width: 80px;
}
body .ui-button.ui-button-text-only .ui-button-text {
    padding: 6px 12px;
}
.ui-fieldset .ui-fieldset-legend {
    font-weight: bold;
    min-width: 300px;
}
body .ui-fieldset .ui-fieldset-legend {
    padding: .6em 1em;
}
body .ui-fieldset {
    border: 1px solid #15317d;
}
body .ui-fieldset .ui-fieldset-legend {
    background-color: #4472c4;
    border: 1px solid #15317d;
    color: #ffffff;
}

.lbl-14-b-1 {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.lbl-14-b-b {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-weight: bold !important;
}

.lbl-14-b-1-b {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-weight: bold !important;
}

.lbl-30-b-n {
    color: #ffffff !important;
    font-size: 30px !important;
    font-weight: 400 !important;
}
.lbl-30-b-b {
    color: #ffffff !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    font-weight: bold !important;
}
.fieldset-color-1 {
    background-color: #16264C !important;
}
.div-color-1 {
    background-color: #15317d !important;
    color: #ffffff !important;
    border: 5px solid #00165f;
}
.div-color-2 {
    background-color: #4472c4 !important;
    color: #ffffff !important;
    border: 5px solid #00165f;
}

.xit-right {
    text-align: right;
    padding-right: 15px !important;
}
.xit-center {
    text-align: center;
    padding-right: 15px !important;
    padding-left: 15px !important;
}

body .ui-panelgrid .ui-panelgrid-cell {
    background-color: #16264C;
    padding: 2px;
}

body .ui-datatable .ui-datatable-scrollable-header th {
    background-color: #4472c4;
}
body .ui-datatable thead th {
    background-color: #4472c4;
    border: 1px solid #4472c4;
    color: #ffffff;
    height: 40px;
    padding: 1px;
}
.ui-datatable-even td {
    background-color: #ffffff;
}
.ui-datatable-odd td {
    background-color: #f9f9f9;
}
body .ui-datatable .ui-datatable-data > tr > td {
    padding: 6px;
    border: 1px solid #dddddd;
}
.ui-column-filter {
    display: none !important;
}
body .ui-widget, body .ui-widget .ui-widget {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
}
.ui-datatable .ui-datatable-data > tr td > button.ui-button-icon-only {
    width: 20px !important;
    height: 20px !important;
}

.layout-wrapper .layout-menu-container {
    top: 80px;
    /*background-color: #16264C;*/
    /*background-image: -webkit-linear-gradient(left, #16264C, #16264C);*/
    border-right: 1px solid #15317d;
}
.layout-wrapper .layout-menu-container {
    width: 265px;
    height: calc(100vh - 80px) !important;
}
.layout-wrapper .layout-menu li a {
    /*color: #ffffff;*/
}
.layout-wrapper .layout-menu li.active-menuitem > a {
    /*background-color: #4472c4;
    background-color: #16264C;*/
    background-color: #16264C;
    color: #ffffff;
}
.layout-wrapper .layout-menu li a:hover {
    /*background-color: #4472c4;
    background-color: #16264C;*/
    background-color: #16264C;
    color: #ffffff;
}

.layout-wrapper.menu-layout-static .layout-main, .layout-wrapper.menu-layout-static .layout-footer {
    margin-left: 265px;
}


@media (max-width: 1024px){
    .layout-wrapper.menu-layout-static.layout-menu-static-inactive .layout-main, .layout-wrapper.menu-layout-static.layout-menu-static-inactive .layout-footer {
        margin-left: 0;
    }
    .layout-wrapper.menu-layout-static .layout-main, .layout-wrapper.menu-layout-static .layout-footer {
        margin: 0;
    }
}

.layout-wrapper.menu-layout-static.layout-menu-static-inactive .layout-menu-container {
    margin-left: -280px;
}





.layout-wrapper .topbar .topbar-left {
    width: 265px;
}
.layout-wrapper .topbar .topbar-left .topbar-logo {
    width: 265px;
    height: 80px;
}
.layout-wrapper .topbar .topbar-right #menu-button {
    left: 249px;
}
.layout-wrapper .layout-menu li ul li a {
    padding: 5px 5px 5px 10px;
}

.layout-wrapper .layout-main {
    padding-top: 100px;
    min-height: calc(100vh - 40px);
    background-color: #16264C;
}
.layout-wrapper .topbar .topbar-left {
    padding: 0;
    height: 80px;
}

.layout-wrapper .topbar .topbar-right {
    text-align: center;
    height: 80px;
    background-color: #16264C;
    background-image: -webkit-linear-gradient(left, #16264C, #16264C);
}
.layout-wrapper .topbar {
    height: 80px;
}

.layout-wrapper .topbar .topbar-right #menu-button {
    top: 24px;
}
.layout-wrapper .layout-footer {
    background-color: #16264C;
    padding: 5px 20px;
    text-align: center;
}
.layout-wrapper .layout-footer .footer-text-left {
    line-height: 30px;
    vertical-align: middle;
    display: inline-block;
}
.footer-text-left a {
    color: white;
}

.ui-button.default {
    background-color: #4472c4;
    color: #ffffff;
}
.ui-button.save {
    border: 1px solid #ff0000;
    background-color: #ff0000;
    color: #ffffff;
}

.icon-size {
    width: 60px;
    height: 60px;
}

.icon-size-submit {
    width: 65px;
    height: 65px;
}

.icon-size-small {
    width: 30px;
    height: 30px;
}

.ui-panelgrid .ui-panelgrid-cell {
    align-self: center;
}
.panelgrid-top.ui-panelgrid .ui-panelgrid-cell:nth-child() {
    align-self: flex-start;
}

/*Hide the advanced buttons and progress*/
.ui-fileupload-upload, .ui-fileupload-cancel, .ui-fileupload-progress {
    /*display: none;*/
}

body .ui-fileupload .ui-fileupload-buttonbar {
    border: none;
    padding: 0;
    background: none;
}

/*Move the file name and size of file onto same line*/
.ui-fileupload-content {
    /*display: none;*/
}
body .ui-fileupload .ui-fileupload-content {
    padding: 0;
    border: none;
}
.ui-fileupload .ui-widget .ui-fileupload-responsive {

}

/*Remove some of the margin from the file name to align correctly*/
.ui-fileupload-files{
    /*margin: 0;*/
}
/*input text background color for readonly*/
.inputtext-readonly-color {
    background-color: #c4c7ce !important;
    color: #000000 !important;
}

body .ui-fieldset {
    padding: 5px;
}

.widget-overview {
    padding: 15px;
    color: #ffffff;
    min-height: 100px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin: 0 !important;
}
.widget-overview .overview-box-title {
    font-weight: bold;
    width: 100%;
}
.widget-overview .overview-box-title i {
    vertical-align: middle;
    font-size: 20px;
}
.widget-overview .overview-box-title span {
    margin-left: 0.5em;
    vertical-align: middle;
}
.widget-overview .overview-box-count {
    color: #ffffff;
    font-size: 24px;
    width: 100%;
    display: block;
    padding: 5px 0;
}

.widget-overview.overview-box-1 {
    background-color: #808080;
    border: solid 1px #808080;
    color: #ffffff;
}
.widget-overview.overview-box-2 {
    background-color: #00ff00;
    border: solid 1px #00ff00;
    color: #ffffff;
}
.widget-overview.overview-box-3 {
    background-color: #ff0000;
    border: solid 1px #ff0000;
    color: #ffffff;
}
.widget-overview.overview-box-4 {
    background-color: #006400;
    border: solid 1px #006400;
    color: #ffffff;
}
.widget-overview.overview-box-5 {
    background-color: #00dbde;
    border: solid 1px #00dbde;
    color: #ffffff;
}
.widget-overview.overview-box-6 {
    background-color: #0000ff;
    border: solid 1px #0000ff;
    color: #ffffff;
}

.widget-overview.overview-box-7 {
    background-color: #00ff00;
    border: solid 1px #00ff00;
    color: #ffffff;
}

.widget-overview.overview-box-8 {
    background-color: #006400;
    border: solid 1px #006400;
    color: #ffffff;
}

.widget-overview.overview-box-9 {
    background-color: #4472c4;
    border: solid 1px #4472c4;
    color: #ffffff;
}

.widget-overview.overview-box-10 {
    background-color: #c4c7ce;
    border: solid 1px #c4c7ce;
    color: #ffffff;
}




.widget-overview.overview-box-11 {
    background-color: #808080;
    border: solid 1px #808080;
    color: #ffffff;
}
.widget-overview.overview-box-12 {
    background-color: #00ff00;
    border: solid 1px #00ff00;
    color: #ffffff;
}
.widget-overview.overview-box-13 {
    background-color: #ff0000;
    border: solid 1px #ff0000;
    color: #ffffff;
}
.widget-overview.overview-box-14 {
    background-color: #006400;
    border: solid 1px #006400;
    color: #ffffff;
}
.widget-overview.overview-box-15 {
    background-color: #00dbde;
    border: solid 1px #00dbde;
    color: #ffffff;
}
.widget-overview.overview-box-16 {
    background-color: #0000ff;
    border: solid 1px #0000ff;
    color: #ffffff;
}

.widget-overview.overview-box-17 {
    background-color: #00ff00;
    border: solid 1px #00ff00;
    color: #ffffff;
}

.widget-overview.overview-box-18 {
    background-color: #006400;
    border: solid 1px #006400;
    color: #ffffff;
}

.widget-overview.overview-box-19 {
    background-color: #4472c4;
    border: solid 1px #4472c4;
    color: #ffffff;
}

.widget-overview.overview-box-20 {
    background-color: #c4c7ce;
    border: solid 1px #c4c7ce;
    color: #ffffff;
}













.widget-overview.overview-box-21 {
    background-color: #808080;
    border: solid 1px #808080;
    color: #ffffff;
}
.widget-overview.overview-box-22 {
    background-color: #00ff00;
    border: solid 1px #00ff00;
    color: #ffffff;
}
.widget-overview.overview-box-23 {
    background-color: #ff0000;
    border: solid 1px #ff0000;
    color: #ffffff;
}
.widget-overview.overview-box-24 {
    background-color: #006400;
    border: solid 1px #006400;
    color: #ffffff;
}
.widget-overview.overview-box-25 {
    background-color: #00dbde;
    border: solid 1px #00dbde;
    color: #ffffff;
}
.widget-overview.overview-box-26 {
    background-color: #0000ff;
    border: solid 1px #0000ff;
    color: #ffffff;
}

.widget-overview.overview-box-27 {
    background-color: #00ff00;
    border: solid 1px #00ff00;
    color: #ffffff;
}

.widget-overview.overview-box-28 {
    background-color: #006400;
    border: solid 1px #006400;
    color: #ffffff;
}

.widget-overview.overview-box-29 {
    background-color: #4472c4;
    border: solid 1px #4472c4;
    color: #ffffff;
}

.widget-overview.overview-box-30 {
    background-color: #c4c7ce;
    border: solid 1px #c4c7ce;
    color: #ffffff;
}

body .textDisabled.ui-state-disabled {
    color: #000000;
    background-color: #d3d3d3;
    border: 1px solid #d3d3d3;
    opacity: 1;
}
body .selectDisabled.ui-state-disabled {
    background-color: #d3d3d3 !important;
    border: 1px solid #d3d3d3 !important;
    opacity: 1;
}
body .selectDisabled .ui-inputfield {
    color: #000000 !important;
    background-color: #d3d3d3 !important;
    border: 1px solid #d3d3d3 !important;
}

.styleReCheck {
    background-color: #ff0000 !important;
    background-image: none !important;
    color: #ffffff !important;
}
.stylePending {
    background-color: #0000ff !important;
    background-image: none !important;
    color: #ffffff !important;
}


.styleTaskPending {
    background-color: #FFC107 !important;
    background-image: none !important;
    color: #000000 !important;
}
.styleTaskOpen {
    background-color: #F44336 !important;
    background-image: none !important;
    color: #ffffff !important;
}

.styleTaskInProgress {
    background-color: #2196F3 !important;
    background-image: none !important;
    color: #ffffff !important;
}

.styleTaskOnHold {
    background-color: #FF9800 !important;
    background-image: none !important;
    color: #ffffff !important;
}

.styleTaskCancel {
    background-color: #616161 !important;
    background-image: none !important;
    color: #ffffff !important;
}

.styleTaskCompleted {
    background-color: #4CAF50 !important;
    background-image: none !important;
    color: #ffffff !important;
}