#layout-header {
    z-index: 1020;
}

#layout-portlets-footer {
    background-color: rgba(255, 255, 255, .7);
    overflow-y: hidden;
    padding-top: 0px;
    color: #72828B;
    overflow-x: hidden;
    width: 80%;
}

#layout-portlets-cover-head {
    background-color: rgba(255, 255, 255, .7);
    overflow-y: hidden;
    padding-top: 0px;
    color: #72828B;
    overflow-x: hidden;
    width: 80%;
}

#layout-portlets-cover {
    background-color: rgba(255, 255, 255, .7);
    overflow-y: hidden;
    padding-top: 0px;
    color: #72828B;
    overflow-x: hidden;
    width: 80%;
}

.sopsbody {
    margin: 0px;
    background-image: url("/offender/javax.faces.resource/images/lighthouse_left.png.jsf?ln=sops-layout");
    min-height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.sopsbodyNoImage {
    margin: 0px;
    background-color: rgba(255, 255, 255, 1);
    min-height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.layout-header-widgets li {
    width: auto;
    font-weight: normal;
}

.layout-header-widgets li:hover {
    font-weight: bold;
}

.layout-header-widgets-submenu {
    width: auto;
    max-height: 425px;
}

.layout-header-widgets-submenu li a {
    padding: 10px;
    display: block;
    text-align: left;
    font-weight: normal !important;
    text-decoration: none !important;
}

.layout-header-widgets-submenu li a:hover {
    font-weight: bold !important;
    text-decoration: none !important;
}

.layout-header-widgets li a {
    font-weight: normal !important;
}

.layout-header-widgets li a:hover {
    font-weight: bold !important;
    text-decoration: none !important;
}

.Container15 {
    width: 15%;
    float: left;
}

@media ( min-width :220px) and (max-width: 1024px) {
    .sopsbody {
        background: #3987c6;
    }
    #layout-portlets-cover {
        width: 100%;
    }
    #layout-portlets-footer {
        width: 100%;
    }
    .customFlyer {
        width: 90% !important;
    }
    .customDialogWidth {
        width: 90% !important;
    }
}

.customPrintWidth {
    width: 50%;
    max-width: 800px;
    height: auto;
    overflow: hidden;
}

@media ( min-width :220px) and (max-width: 1300px) {
    .customPrintWidth {
        width: 100% !important;
    }
}

@media ( min-width : 760px) and (max-width: 780px) {
    /* responsive support */
    .ResponsiveFlyer50 {
        width: 50%;
        float: left;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}

@media ( min-width : 760px) and (max-width:1024px) {
    /* responsive support */
    .ResponsiveImage30 {
        width: 30%;
        float: left;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}

@media ( min-width : 760px) and (max-width: 780px) {
    /* responsive support */
    .ResponsiveFlyer50 {
        width: 50%;
        float: left;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}

@media ( min-width : 760px) and (max-width:1024px) {
    /* responsive support */
    .ResponsiveImage30 {
        width: 30%;
        float: left;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}

.black {
    color: #000000 !important;
}

.red {
    color: #CC3000 !important;
}

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
    background: #ccdcea;
}

.webnameNoDisplay {
    display: none;
}

.FontBoldUnderLine {
    font-weight: bold;
    text-decoration: underline;
}

.rowcolorodd {
    background: #ffffff !important;
}

.rowcoloreven {
    background: #F0F0F0 !important;
}

.ui-fieldset {
    background: none;
}

.ui-accordion {
    background: none;
}

.ui-panel .ui-panel-titlebar {
    font-family: 'titillium_webregular' !important;
    font-weight: normal;
}

.ui-inputfield, .ui-button-text, .ui-widget, .ui-widget .ui-widget, .ui-tree .ui-treenode .ui-treenode-label,
    .ui-datatable .ui-datatable-tablewrapper table, #layout-menubar li {
    font-size: 14px;
    font-family: 'titillium_webregular' !important;
}

.ui-panelgrid tbody tr td {
    border: solid 1px #C0C5C7 !important;
}

.imageBorderRed {
    padding: 3px;
    background-color: #CC3000;
    border: 1px solid #2D465A;
}

.imageBorderBlue {
    padding: 3px;
    background-color: #527EA3;
    border: 1px solid #2D465A;
}

.imageBorderGreen {
    padding: 3px;
    background-color: #527EA3;
    border: 1px solid #008000;
}

.boldBlack {
    font-weight: bold !important;
    color: #000000 !important;
}

.ui-selectcheckboxmenu-label {
    font-size: 14px;
    color: #4d4d4d !important;
}
/*  .ui-fieldset .ui-state-default {
    background: none;
} 

.ui-fieldset .ui-icon-minusthick {
	display : none;
}*/
li.square {
    list-style: square;
}

li.alpha {
    list-style: lower-alpha;
}

li.circle {
    list-style: circle;
}

.ui-datatable table thead tr th.wrapHead {
    white-space: normal;
}

.ui-datatable tbody td.wrap {
    white-space: normal;
}

.ui-datatable-resizable tbody td.wrap {
    white-space: normal;
}

.indivcheckbox .ui-chkbox-icon {
    background-color: white
}

/* rgba(139, 216, 177, 1); */
.ui-datatable .ui-datatable-tablewrapper table tbody .ui-state-highlight td {
    background-color: rgba(177, 205, 235, 1)
}

.padleft5 {
    padding-left: 5px;
}

;
.ui-datatable-scrollable table tbody .ui-state-highlight td {
    background-color: rgba(177, 205, 235, 1);
}

.customTable {
    border-collapse: collapse;
    border: 1px black;
}

.customTable th {
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    background-color: #3371FF;
    color: white;
    font-weight: bold;
    font-size: 14px !important;
    padding: 8px;
}

.customTable td {
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    background-color: #ccc;
    color: #545247;
    color: black;
    padding: 6px;
    background-image: url(/images/data_table_Bg.gif);
}

.ui-fluid .ui-selectcheckboxmenu-trigger {
    height: 31px !important;
}

.Wid15 {
    width: 15%;
}

.Wid12 {
    width: 12%;
}

.Wid10 {
    width: 10%;
}

.Wid7 {
    width: 7%;
}

.Wid5 {
    width: 5%;
}

.ui-accordion .ui-accordion-header {
    margin-top: 5px
}

.ui-chkbox .ui-chkbox-box {
    border-color: gray;
}

.Container45 {
    width: 45%;
    float: left;
}

.centered {
    position: relative;
    margin: 0 auto;
    padding: 10% 0;
}

.PadNone {
    padding: 0;
}

.ui-widget-content a {
    text-decoration: none !important;
}

.EmptyBox25 {
    display: block;
    width: 100%;
    height: 25px;
    overflow: hidden;
}

.preformatted {
    white-space: pre;
}

.firstColumn {
    width: 25%;
}

.secondColumn {
    width: 75%;
}

.overFlowAuto {
    max-height: calc(100% - 15%);
    overflow-y: auto;
}

.ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-header .ui-chkbox {
    margin-top: 0px !important;
    margin-left: 1px !important;
    padding-top: 0px !important;
}

.ui-selectcheckboxmenu-header .ui-selectcheckboxmenu-filter-container {
    margin-left: 0px;
    margin-top: 10px;
}

.ui-selectcheckboxmenu-header:before {
    content: "Select/Unselect All";
    color: #4D4D4D;
    font-weight: normal !important;
    padding-left: 6px;
    display: inline;
    vertical-align: -webkit-baseline-middle;
    vertical-align: -moz-baseline-middle;
    vertical-align: -o-baseline-middle;
    vertical-align: -ms-baseline-middle;
}

.ui-carousel .ui-carousel-dropdown, .ui-carousel .ui-carousel-mobiledropdown {
    display: none;
}

a {
    font-weight: bold !important;
    color: rgb(10, 42, 238) !important;
    text-decoration: none !important;
}

a:hover {
    text-decoration: underline !important;
}

.customLink {
    font-weight: bold !important;
    color: rgb(10, 42, 238) !important;
    text-decoration: none !important;
}

.customLink:hover {
    text-decoration: underline !important;
}

.MarLeft10 {
    margin-left: 10px;
}

.MarLeft15 {
    margin-left: 15px;
}

.MarLeft20 {
    margin-left: 20px;
}

.MarLeft30 {
    margin-left: 30px;
}

.notextdecoration {
    text-decoration: none !important;
}

.notextdecoration:hover {
    text-decoration: none !important;
}

.overFlowAuto {
    max-height: calc(100% - 15%);
    overflow-y: auto;
}

.ui-carousel {
    background-color: rgba(255, 255, 255, 0) !important;
}

.ui-carousel:hover {
    border-color: #d1d3d4 !important;
}

.Fs36 {
    font-size: 36px !important;
}

.ui-radiobutton .ui-radiobutton-box {
    border: solid 1px black;
}

.ui-datatable-empty-message {
    font-weight: bold !important;
    color: black !important;
}

div.scrollDiv {
    width: 100%;
    height: calc(100vh - 300px);
    max-height: 500px;
    overflow: auto;
}

div.scrollDiv400 {
    width: 100%;
    height: calc(100vh - 300px);
    max-height: 400px;
    overflow: auto;
}

div.scrollDiv300 {
    width: 100%;
    height: calc(100vh - 300px);
    max-height: 300px;
    overflow: auto;
}

div.scrollDiv350 {
    width: 100%;
    height: calc(100vh - 300px);
    max-height: 350px;
    overflow: auto;
}

div.scrollDiv200 {
    width: 100%;
    height: calc(100vh - 300px);
    max-height: 200px;
    overflow: auto;
}

div.scrollDiv150 {
    width: 100%;
    height: calc(100vh - 300px);
    max-height: 150px;
    overflow: auto;
}

div.scrollDiv100 {
    width: 100%;
    height: calc(100vh - 300px);
    max-height: 100px;
    overflow: auto;
}

div.scrollFlyerDiv {
    width: 100%;
    height: calc(100vh - 210px);
    max-height: 600px;
    overflow: auto;
}

div.scrollMapDiv {
    width: 100%;
    height: calc(100vh - 210px);
    max-height: 650px;
    overflow: auto;
}

.TexAlJustify {
    text-align: justify;
}

/* style sheet for "A4" printing */
@media print {
    .no-print {
        display: none !important;
    }
    @page {
        margin: 0cm;
    }
    body {
        margin: 25mm 25mm 25mm 25mm;
    }
}
/* style sheet for "letter" printing */
@media print and (width: 8.5in) and (height: 11in) {
    .no-print {
        display: none !important;
    }
    @page {
        margin: 0cm;
    }
    body {
        margin: 25mm 25mm 25mm 25mm;
    }
}

.ui-outputlabel, table tbody tr td {
    color: #000000 !important;
}

.ui-datagrid .ui-paginator .ui-paginator-current {
    color: #000000 !important;
}

.ui-datatable .ui-paginator .ui-paginator-current {
    color: #000000 !important;
}

.ui-datatable .ui-datatable-tablewrapper table thead tr th, .ui-datatable .ui-datatable-tablewrapper table tfoot tr td,
    .ui-datatable-scrollable-footer-box table tfoot tr td, .ui-datatable table thead tr th {
    color: #000000 !important;
}

.ui-datatable .ui-paginator .ui-paginator-rpp-options {
    color: #000000 !important;
}

ul.columns  {
   -webkit-columns: 60px 4;
   -moz-columns: 60px 4;
    columns: 60px 4;
   -moz-column-fill: auto;
   column-fill: auto;
 }
 
 .ui-datagrid {
 background-color: #FFFFFF;
 }
 
 @media print {
    #layout-header {
        position: absolute;
    }
    #layout-menubar {
        display: none;
    }
    .Wid80 {
        width: 100%;
    }
    .ui-g-12 {
        width: 33.33%;
    }
    #layout-portlets-cover {
        overflow: visible;
    }
    .sopsbody {
        /*     background-image: url("/offender/javax.faces.resource/images/lighthouse_left.png.jsf?ln=sops-layout"); */
        background-color: #ffffff;
    }
    ui-datatable thead th, .ui-datatable tbody td, .ui-datatable tfoot td, .ui-datatable tfoot th {
        padding: 0px 1px 0px 2px;
    }
    .ui-panelgrid .ui-panelgrid-cell {
        padding: 0px 1px 0px 2px;
    }
}

.ui-inputfield.ui-state-hover, .ui-inputfield.ui-state-focus {
    color: #000000 !important;
}

.ui-datepicker-calendar thead tr th {
    color: #000000 !important;
}
.ui-datepicker-calendar tbody tr td a {
       color: #000000 !important;
 }
 
 .ui-selectonemenu-panel .ui-selectonemenu-list-item, .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item {
   color: #000000 !important;
 }