/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Jul 14, 2017, 7:53:01 AM
    Author     : cedba
*/

/* colors

// original dark blue/green, and orange

COG green: #7fb337
COG red: #a0270f
COG blue: #2d66cd
COG yellow: #e3b73d

// new TCVCOG logo colors

// yellow-ish
#cde162

// skyish blue
#00b5ec

//earthy:
#5a5754


*/

body{
    margin: 0 auto;
    font-family: 'Heebo';
}

/*---------------- HEADERS -------------------*/

h1{
    font-family: 'Heebo', sans-serif;
    font-size: 1.5em;
    color: #5a5754;
    font-weight: normal;
    display: block;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 3px solid #5a5754;

    margin-bottom: 20px;

}

.title-container{

}

.page-title{

    font-family: 'Heebo', sans-serif;
    font-size: 1.5em;
    color: #5a5754;
    font-weight: normal;
    display: inline-block;
    clear:none;
    float: left;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: 3px solid #5a5754;

    margin-bottom: 20px;
}

h2{
    font-size: 1.4em;
    /* color: #00b5ec;  sky blue*/

    /*darker sky*/
    color: #00637F;
    font-weight: bold;
}

h3{
    font-size: 1.2em;
    font-weight: bold;
    color: #4F361E;
    text-decoration: underline;



}

h4{
    color: #343434;
    font-style: italic;
}


.logoBox{
    float:left;
    display: inline-block;
    margin-left: 10px;
    margin-top: 10px;

}

.logoBox h2{
    color: white;
}

.sys-title{
    font-size: 1.3em;
    color: #cde162;
}

.sys-title-sub{
    font-size: 1.1em;
    font-style: italic;
    color: #00b5ec;
}


.darkFont{
    color:#163F8A;
}

.property-blue{
    color: #03305C;

}

.person-maroon{
    color: #710040;
}

.code-enforcement-orange{
    color: #B36A00;
}

.occupancy-green{

}

.action-request-header{
    display: block;
    font-weight: bold;
    font-size: 1.2em;
    padding-left:5px;



}

.action-request-subheader{
    display: block;
    clear: both;
    font-size: 1.1em;

}

.logoBox{

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding:5px;
}

.logo-image-wrapper{

}





/*************** END HEADERS ****************/

/*********** MENUS and TABS*********************/
.ui-panelmenu-header {
    font-size: 0.8em;
    font-weight: normal;
    font-style: normal;
    background-color: #04284A;
    color: green;


}

.tabText{
    color:orange;
}

.menuLabel{
    color:white;

}


/* Main accordion menu on left */
.ui-panelmenu .ui-panelmenu-header a{
    text-shadow: none;
    color:white;
}

/*Case profile coloring */
.ui-tabs-nav li a {
    color: black;
}

.bold-menu-item{
    color:green;
}

.ui-menu .ui-menuitem-text{
    font-weight: bold;

}





/*--------------- ICONS --------------------*/

i.material-icons{
    color: #57ACFF;
    width: 100%;
}

.inline-icon{
    display: inline-block;
    float: left;
    clear: none;
    margin-right: 10px;
}

.icon-box-centered .material-icons{
    font-size: 150%;
}

/* PrimeFaces icon reset */
.ui-widget .ui-icon.fa,
.ui-icon.fa {
    background-image: none;
    text-indent: 0px;
    background-repeat: no-repeat;
    display: block;
    overflow: visible;
    text-indent: 0px;
}

.ui-menu .ui-menuitem-link .ui-menuitem-icon, .ui-menu .ui-submenu-icon{
    padding-right: 8px;

}

/*
.icon-box-centered{
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    box-sizing: content-box;
    
}*/

.userToolBar-icon{
    font-size: 1.5em;

}

/*used from demo on Mozilla site*/
/*https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content*/

.icon-container {
    display: grid;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    clear: none;
}

.icon-box-centered {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;

}

i.material-icons.icon-large {
    font-size: 3em;
}
i.material-icons.mega-icon {
    font-size: 10em;
}



/***************** end icons *******************/


/* ------------LINKS ------------------------- */

a:link.command-link-text{
    color: blue;
    font-weight: bold;
}

a:link{
    /*text-decoration: none;*/
    color: #181F36;
}

a:visited{
    color: #181F36;
}

a:hover{
    color:#04284A;
    text-decoration: underline;
}

.sblink{
    text-decoration: none;
    font-size: 11pt;
}

a.sblink:link{
    color: #57ACFF;
}

a.sblink:visited{
    color: #4774A0;
}

a.sblink:hover{
    color:gray;
}




.headerLink{
    font-weight: bold;
    font-size: 11px;
    float:left;
    clear:none;

}


a.headerLink:link {
    color: #57ACFF;
    text-decoration: none;
}

a.headerLink:hover {
    color: white;
    text-decoration: none;
}

a.headerLink:visited {
    color: white;
    text-decoration: none;
}

a.headerLinks {
    display: inline-block;
    float: left;
}


div.headerLink a:before, a:visited{
    /*color: green;*/


}

.tight-grid-padding div{
    padding: 2px;
}

.tight-bottom-padding div{
    padding-bottom: 2px;
}

.top-spaced{
    margin-top:10px;
}

/************** END LINKS ******************/


/* ------------------- START EVENT CALENDAR -AND EVENT MISC------------------ */


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

.evcal-evrow{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding:5px;
}


.event-followup-required{
    background-color:  #DEE461;
}

.event-followup-required-addflag{
    font-weight: bold;
    font-size: 1.1em;
}

tr.followup {
    background-color:  #DEE461 !important;
}

.event-general{
    background-color: lightgreen;
}



/* ******************* END EVENT CAL  ******************************/


/* ------------------- START PAGE LAYOUT  ------------------- */



.two-column-page-flex-container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding:5px;

}

.list-column{
    flex-basis:auto;
    flex-shrink: 1;
    min-width: 750px;
    max-width: 750px;
    padding-right:10px;


}

.list-column-persons{
    flex-basis:auto;
    flex-shrink: 1;
    min-width: 600px;
    max-width: 600px;
    padding-right:10px;


}

.object-column{
    flex-basis: auto;
    flex-grow: 1;
    padding-left: 10px;


}

/* **************** END PAGE LAYOUT  *********************/


/* ----------- Printing and reports-------- */


.report-trailblaze-headerbox{
    margin-top:10px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;


}

.report-trailblaze-headerbox div{
    color: white;
    font-size: 1.5em;
    padding: 10px;
    border-bottom: 6px solid #2bb3e9;


}

.report-trailblaze-headerbox-title{
    font-weight: bold;
    background: #2bb3e9;
    border: none;
    clear: none;
    margin-right: 0px;
    flex-grow: 1;

}

.report-trailblaze-headerbox-tail {
    background: white;
    clear: none;
    margin-left: 0px;
    flex-grow: 3;

}

.report-trailblaze-objecttitle {



}

div.report-data-label-tight {
    padding-bottom: 2px;
}

div.report-data-value-tight{
    padding-top: 2px;
}

.report-kpi-aggregate-container{


}

.report-tb-kpi-icon{


}

.report-muni{
    font-size: 1.8em;
    font-weight: bold;
}

.report-daterange{
    font-size: 1.3em;
}

.report-tb-kpi-title{
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 8px;
}

.report-tb-kpi-value{
    margin-bottom: 8px;
    font-size: 1.5em;

}

.report-pie-title{
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;

}



.report-legend-item{
    display: flex;
    flex-direction: row;
    margin-bottom: 8px;
}

.report-legend-colorbox{
    margin-right: 8px;


}

.report-legend-title{
    margin-right: 8px;
    font-size: 1.2em;

}

.report-legend-count{
    font-size: 1.2em;

}

.report-legend-perc{


}

.report-generatorandtimestamp{
    font-size: 1.1em;
}

.report-icon{

    margin-right: 8px;
}

.report-pie-container{
    display: block;
    width: 300px;
}


.cases-report-citations-2cols{
    width: 50%;
    border: none;
    vertical-align: top;
}


.report-title{
    font-size: 1.3em;
    font-weight: bold;
    color: #cde162;

}

.report-title-sub{
    font-size: 1.1em;
    color: #00b5ec;
    font-style: italic;

}

.report-bodyfont-smaller{
    font-size: 0.7em;
}

.report-bodyfont-medium{
    font-size: 0.9em;
}

div.report-fieldvalue-tightpadding {
    padding:2px;
}

.intermediate-report-header{
    margin-top: 0px;
    font-size: 1.4em;
    /*darker sky*/
    color: #00637F;
    font-weight: bold;
}

.restrict-data-field-report{
    padding: 2px;
}

.printing-page-break-before {
    page-break-before: always;

}

.printing-page-break-after{
    page-break-after: always;
}


div.printer-friendly-report .ui-widget-content{
    border: none;

}

.event-ds-box-report{
    font-size: .7em;
    margin: 3px;
    padding: 5px;
    border: thin solid #4774A0;
    background-color: white;
}

.event-list-halfwidth{
    width: 50%;
    border: none;
    vertical-align: top;
}

.report-header-info{
    font-size: small;
    font-family: Heebo;
}

.report-cear-requestbox{
    font-size: .7em;
    padding: 5px;
    background-color: white;
    margin: 15px;
    border: thin solid #4774A0;
    padding: 10px;
    /*    These two attributes are taken from .rowExpansion to see if we can use
        only .outlinedBox divs for the row expansion*/
    white-space: normal;
    overflow-wrap: normal;
}

.ui-widget-content{
    border: none;
}

.cear-request-titlehead{
    font-size: 2em;
    font-weight: bold;
    font-family: Heebo;
}

.reportconfig-header{
    text-align: left;

}



.report-inspection-itemstatus{
    font-weight: bold;
    font-size: 1.3em;
}

.report-photo-header{
    font-weight: bold;
    margin-bottom: 2px;

}

.report-photo-caption{
    margin-top:  2px;
    font-size: 0.9em;
    font-style: italic;
}

.report-citation-violation-status{
    font-style: italic;
}

.report-indented-line{
    margin-left: 25px;
}

.report-property-addresss{
    font-weight: bold;
    font-size: 1.2em;
}

.report-text-rightaligned{
    text-align: right;
}

.signature{
    border-bottom: thin solid black;
    width: 180px;
    margin-right: 10px;
}

.centered-header-image{
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/*collapsed padding on report tables*/
body table.report-table td {
    padding: 1.5px !important;
    font-size: 1.1em !important;
}

.report-note{
    font-style: italic;
    font-size: 0.7em;
    line-height: normal;
}


/* *********** end Printing and reports******** */






/* ----------- Case Priorities -------- */

.cse-priority-openblue{
    background-color: #afeafc !important;
    background-image: none !important;
    color: #000000 !important;

}

.cse-priority-monitoringgreen{
    background-color: #99fb4e !important;
    background-image: none !important;
    color: #000000 !important;

}

.cse-priority-actionrequiredyellow{
    background-color: #f9e14c !important;
    background-image: none !important;
    color: #000000 !important;


}

.cse-priority-actionpastduered{
    background-color: #a9392d !important;
    background-image: none !important;
    color: #ffffff !important;


}

.cse-priority-citation{
    background-color: #962af5 !important;
    background-image: none !important;
    color: #ffffff !important;


}

.cse-priority-review{
    background-color: #1c484e !important;
    background-image: none !important;
    color: #ffffff !important;


}

.cse-priority-abandoneddarkyellow{
    background-color: #e0ae3b !important;
    background-image: none !important;
    color: #ffffff !important;


}

.cse-priority-closedgray{
    background-color: #ababb3 !important;
    background-image: none !important;
    color: #000000 !important;


}

.cse-priority-unknowngray{
    background-color: #ababb3 !important;
    background-image: none !important;
    color: #000000 !important;


}

.cse-priority-containergray{
    background-color: #ababb3 !important;
    background-image: none !important;
    color: #000000 !important;


}

/* ------------ CASE CITATIONS and other junk---------- */

.citation-violation-status{
    font-weight: bold;
    font-size: 1.2em;
}

.citation-violation-status-lastupdated{
    font-style: italic;
    font-size: 0.8em;
}

.citation-violation-status-terminal{
    background-color: #5792F6 !important;
    background-image: none !important;
    color: #FFFFFF!important;

}

.citation-violation-status-inprocess{
    background-color: #FFAE1B !important;
    background-image: none !important;
    color: #000000 !important;

}

.citation-panel-container .ui-panel .ui-panel-titlebar {
    background-color: #480681 !important;
    color: white !important; /* For readability */
}


/* ------------ CODE VIOLATION PRIORITIES and other junk---------- */

.violated-ord-header{
    font-size: 1.2em;
}

.violation-status-openblue{
    background-color: #afeafc !important;
    background-image: none !important;
    color: #000000 !important;

}

.violation-status-compliancegreen{
    background-color: #99fb4e !important;
    background-image: none !important;
    color: #000000 !important;

}

.violation-status-actionrequiredyellow{
    background-color: #f9e14c !important;
    background-image: none !important;
    color: #000000 !important;


}

.violation-status-actionpastduered{
    background-color: #a9392d !important;
    background-image: none !important;
    color: #ffffff !important;


}

.violation-status-citation{
    background-color: #962af5 !important;
    background-image: none !important;
    color: #ffffff !important;


}

.violation-status-citation-resolved{
    background-color: #310656 !important;
    background-image: none !important;
    color: #ffffff !important;


}

.violation-status-review{
    background-color: #1c484e !important;
    background-image: none !important;
    color: #ffffff !important;


}

.violation-status-abandoneddarkyellow{
    background-color: #e0ae3b !important;
    background-image: none !important;
    color: #ffffff !important;


}



.violation-status-nullifiedtransferred{
    background-color: #ababb3 !important;
    background-image: none !important;
    color: #000000 !important;


}


.violation-status-unknown{
    background-color: #ababb3 !important;
    background-image: none !important;
    color: #000000 !important;


}




/* ----------- OCC period Priorities -------- */

.per-priority-textinstatusbox{
    font-size: 1.5em;
}

.per-priority-openblue{
    background-color: #afeafc !important;
    background-image: none !important;
    color: #000000 !important;

}

.per-priority-monitoringgreen{
    background-color: #99fb4e !important;
    background-image: none !important;
    color: #000000 !important;

}

.per-priority-actionrequiredyellow{
    background-color: #f9e14c !important;
    background-image: none !important;
    color: #000000 !important;


}

.per-priority-actionpastduered{
    background-color: #a9392d !important;
    background-image: none !important;
    color: #ffffff !important;


}

.per-priority-citation{
    background-color: #962af5 !important;
    background-image: none !important;
    color: #ffffff !important;


}

.per-priority-review{
    background-color: #1c484e !important;
    background-image: none !important;
    color: #ffffff !important;


}

.per-priority-abandoneddarkyellow{
    background-color: #e0ae3b !important;
    background-image: none !important;
    color: #ffffff !important;


}

.per-priority-closedgray{
    background-color: #90A4AE !important;
    background-image: none !important;
    color: #000000 !important;


}

.per-priority-unknowngray{
    background-color: #ababb3 !important;
    background-image: none !important;
    color: #000000 !important;


}

.per-priority-containergray{
    background-color: #ababb3 !important;
    background-image: none !important;
    color: #000000 !important;


}


/* ----------- Horizontal bars: LAYOUT BOXES  (OLD)-------- */



.flex-box-container{
    position:relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;

    justify-content: flex-start;

    font-family: 'Heebo', sans-serif;
    margin-left: 0px;
    margin-right:0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
    position: relative;

}

.flex-box-container-interior{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    justify-content: flex-start;

    font-family: 'Heebo', sans-serif;
    margin-left: 0px;
    margin-right:0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;

}

.narrow-content-container{
    max-width: 800px;
}

.flexing-box-topbar{
    flex-grow: 1;
    flex-basis: 100%;
    flex-shrink: 1;

    background-color: #2F2F2F;
}



.flexing-box-sidebar{

    flex-grow: 0;
    flex-basis: 200px;
    flex-shrink: 1;
    background-color: #CECECE;
    padding: 10px;

}

.flexing-box-sessioninfo{

    flex-grow: 1;
    flex-basis: 100%;
    flex-shrink: 1;
    height: 50px;

    background-color: #181F36;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 0px;
    color: white;
    font-weight: normal;

}

.flexing-box-pagecontent{


    flex-grow: 1;
    flex-basis: max-content;
    flex-shrink: 1;


    margin-left: 0px;
    padding: 10px;
}

.flexing-box-footer{

    flex-grow: 1;
    flex-basis: 100%;
    flex-shrink: 1;

    background-color: #1B1D20;

    color: white;

}

.flexing-box-interior{


    flex-grow: 1;
    flex-basis: 80%;
    flex-shrink: 3;


}

.split-page-panelgrid{
    width: 100%;
}

.split-page-list-side{
    width: 40%;
}

.split-page-manage-side{
    width: 60%;
}




#logoHeader{
    margin-top: 3px;
    color: #FFA35A;
}

.clearFix{
    clear: both;
}

.plainText{
    font-weight: normal;

}

/*this mainContainer class is the containing bins on each user page*/
.mainContainer{
}

.mainContainerDashboard{

    display:block;
}


.primaryContentContainer{

}

.footer{
    font-family: 'Heebo', sans-serif;
    color: grey;
}

.foot{
    height: 100px;
}


p.note{
    font-size: .9em;
    font-style: italic;
}

div.headerLinkCont{
    display: inline-block;
    float: right;
    clear: none;
    /*width: 100px;*/
    height: 100%;
    margin-left: 15px;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-right: 15px;
}

.userToolBar{
    display: block;
    float: right;
    clear: none;
    height: 90px;
}

.gridTd-splitPage{
    max-width: 600px;
    vertical-align: top;
}


.noalerts-text{
    color: #00C853;
    font-style: italic;
}

/* *********END MAIN PAGE LAYOUT BOXES ***************/


/* --------- Cross-muni Xmuni system ------------------- */
.xmuni-banner {
    background-color: lightsalmon !important;
}

.xmuni-muniname-authorized {
    text-decoration: line-through;
}

.xmuni-muniname-foreignmuniname {
    color:salmon;
    font-weight: bold;
}

/* *********END XMUNI ***************/


/* --------- BUSINESS OBJECTS AND STATUS ------------------- */


/*  https://m1.material.io/style/color.html#color-color-palette */

.focus-dashboard{
    background-color: #80CBC4;  /*  teal 200 ish */
}

.focus-code{
    background-color: #F48FB1; /*  magenta ish (pink 200) */

}

.focus-property{
    background-color: #FFF59D;    /*  yellow ish (yellow 200)*/
}

.focus-person{
    background-color: #B39DDB;    /* deep purple 200 */
}

.focus-cecase{
    background-color: #A5D6A7; /*  green 200 */

}

.focus-occperiod{
    background-color: #90CAF9; /*  blue 200 */
}

.focus-notinfocus{
    background-color: white;
}


.mced-status-investigation{
    font-weight: bold;
    color:blue;
}
.mced-status-enforcement{
    font-weight: bold;
    color: blueviolet;

}
.mced-status-citation{
    font-weight: bold;
    color: red;

}
.mced-status-closed{
    font-weight: bold;
    color: black;
}
.mced-status-holding{

}

.status-list{
    list-style-type: none;
    padding-top: 0px;
    padding-left: 0px;
    margin-left: 10px;
    margin-top: 0px;

}

i.status-display-icon-i{
    color: inherit;
}

.status-display-container{
    display: flex;
    flex-direction: row;
    flex-basis: auto;

}

.status-display-icon-container{
    width: auto;
    margin-right: 5px;


}

.action-request-icon i.material-icons{
    font-size: 3em;
    display: block;
    margin-right: 15px;
}


.status-display-icon-container i.material-icons{
    font-size: 5em;
}


.status-display-status-list-container{
    flex-grow: 1;
    flex-basis: auto;


}

.status-item{
    font-size: 1em;
    color: gray;
    font-weight: normal;

}

.stage-inactive{
    font-weight: normal;
    color:grey;
}

.cear-notice-text{
    color: #E91E63;
    font-weight: bold;
}

a.pagejump-link:link{
    text-decoration: none;
}

.cear-notice-text-noqueuedrequests{
    color: #00C853;
    font-weight: bold;
}



/* ********* end BUSINESS OBJECTS AND STATUS *******************

/*----------------  TEXT AND SPANS ----------------------------*/


.mono{
    font-family: Heebo;
}

.monospace{
    font-family: monospace;
    font-size: 1.3em;
}

.datum-label{
    font-weight: bold;
}

.ui-label{
    font-weight: bold;
}

.datum-data{

}

.bold {
    font-weight: bold;
}

.underline{
    text-decoration: underline;
}

.note{
    font-style: italic;
    font-size: 0.8em;
}

.italic{
    font-style: italic;
}

.infoBarData{
    font-size: .9em;
    font-family: Heebo;
    font-weight: normal;
}

.weight-normal{
    font-weight:normal;
}

.logoutput{
    padding: 5px;
    font-size: 0.9em;

}

.compliance-date-stipulated{
    color: orange;
    font-weight: bold;
}

.compliance-date{
    color: green;
    font-weight: bold;
}

.compliance-date-nullified{
    color: darkslategray;
    font-weight: bold;
}

.gentleUserReminder{
    font-size: 0.85em;
    font-style: italic;
    color: blue;
}

.larger-text{
    font-size: 1.5em;
}

.text-red{
    color: darkred;
}

.text-gray{
    color:darkgray;
}

.text-green{
    color:darkgreen;
}

.text-blue{
    color:darkblue;
}

/*gives us a left indent in the div*/
.reverseindented{
    padding-left: 15px;
}

.deactivated-text{
    color: lightgray;
}

.grayed-out{
    color:lightgray;
}

/***************** CLOSE TEXT AND SPANS ***********************/

/* --------------- SEARCH ---------------------------*/

.search-inputtext{

}




/* --------------- DIVS and P-GRID ---------------------------*/

div.padding-low-bottom {
    padding-bottom: 1px;
}
div.padding-low-top {
    padding-top: 1px;
}

.low-padding-top div{
    padding-top: 1px;
    
}


.rowExpansion{
    white-space: normal;
    overflow-wrap: normal;
    text-align: left;
    font-weight: normal;
}

.row-expansion-threesided-box{
    margin-top: 0px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 10px;
    border-top: none;
    border-bottom: 6px solid #004864;
    border-left: 6px solid #004864;
    border-right: 6px solid #004864;
    padding-top: 2px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 8px;



}


.wrapText{
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.roomy-top-margin{
    margin-top: 15px;
}

.outlinedBox{
    margin: 15px;
    border: thin solid #4774A0;
    padding: 10px;
    background-color: white;
    /*    These two attributes are taken from .rowExpansion to see if we can use
        only .outlinedBox divs for the row expansion*/
    white-space: normal;
    overflow-wrap: normal;
}

.activeObjectBox{
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 15px;
    margin-right: 15px;
    border: thin solid #4774A0;
    padding: 5px;
    font-size:small;
    display: inline-block;



}
.compact-violation-list-container{
    margin-top: 5px;

}

.activeObjectBox h4{
    margin-top: 3px;
    margin-bottom: 8px;

}

.publicInfoBundleContainer{
    margin: 15px;
    border: #04284A solid thick;
    padding: 10px;

}




div.headerLinks{
    display: block;
    height:40px;
    width: 100%;
    /*height: 100px;*/
    margin: 10px 10px 10px 10px;
}

.ord-text{
    font-weight: normal;
    font-family: monospace;
    white-space: normal;
    overflow-wrap: normal;
    padding: 5px;
    text-align:  left;

}





/*will be deprecated when Adams public pages come online*/
/*control code green box*/
div.ccBox{
    height: 25%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 4em;
    font-weight: bold;
    background-color: lightgreen;
    border-color: darkgray;
    border-width: 1px;
    text-align: center;
    padding: 15px;
    border-top: 30px;
    border-bottom: 30px;
}


/* ****************** CLOSE DIVS ************************/




/* --------------- IMAGES ---------------------------*/


img{
    display: block;
}

img.header{
    margin-top: 15px;
    margin-bottom: 15px;
}


img.headerImg{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*added by wwalk 3.28.23*/

img.thumbnail{
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    width: 500px;
}

img.thumbnail:hover{
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

/*end 3.28.23 add - wwalk */


.photo-gallery-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.photo-gallery-dialog-body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.photo-gallery-image-container {
    flex-grow: 1;
    /* This is the crucial fix for the 0x0 image size issue in a flex column */
    min-height: 0; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.photo-gallery-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.photo-gallery-footer {
    flex-shrink: 0;
    border-top: 1px solid #ddd;
    padding: 10px;
}


/*************** END IMAGES ****************************/



/* ------------------ Primefaces Overrides ----------------------*/




.ui-widget, .ui-widget .ui-widget {
    font-size: 95% !important;
}


.ui-state-hover{

}

/*these make the up and down circles on time input down and up buttons orange and green respectively*/

body .ui-datepicker .ui-picker-up{
    background-color: orange;
}

body .ui-datepicker .ui-picker-down{
    background-color: green;
}

.ui-selectlistbox-list td, tr{
    border: none;
}


/*STYLING TEXT EDITOR BUTTONS AFTER PF 14 UPGRADE!!*/


/* Style SVG icons within buttons */
.ql-toolbar button svg,
.ql-toolbar .ql-picker-label svg,
.ql-toolbar .ql-picker-item svg {
    width: 100%;
    height: 100%;
}


/* Set the toolbar background to black */
.ql-toolbar {
    background-color: black !important;
}

/* Apply white stroke to paths that should only have a stroke */
.ql-toolbar .ql-stroke {
    stroke: white !important;
    fill: none !important; /* Ensure fill is not applied */
}

/* Apply white fill to paths that should only have a fill */
.ql-toolbar .ql-fill {
    fill: white !important;
    stroke: none !important; /* Ensure stroke is not applied */
}

/* Apply both stroke and fill to paths that require both */
.ql-toolbar .ql-stroke-miter {
    stroke: white !important;
    fill: white !important;
}

/*END STYLING FOR TEXT EDITOR*/

/*TREE NODE STYLING*/
/* Adjust the .wrapText class to allow text wrapping */
/* Allow the label to grow and shrink, and set min-width to 0 */
.ui-tree .ui-tree-container .ui-treenode .ui-treenode-content .ui-treenode-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Enable text wrapping within the wrapText div */
.treeWrapText {
    white-space: normal !important;
    word-wrap: break-word;        /* For older browsers */
    overflow-wrap: break-word;    /* For modern browsers */
}



/* ****************** END Primefaces Overrides ***********************/


/* ------------------DASHBOARD STYLES ----------------------*/

.bignum{
    font-size: 600%;
    font-weight: bold;
}

.bignum-header{
    font-weight: bold;
}

.mainContainerDashboard{

    display:block;
}





.ui-dashboard-column {
    width:33%;

}

.ui-widget-content{
    /*background-color: gray;*/
}


/*************** END DASHBOARD ****************************/


/* ------------------GRID FLOW BOXES ----------------------*/

.tight-padding div{
    padding: 2px;
}



/* ------------------TABLE STYLES ----------------------*/


.td-dense{
    padding: 1px;
    margin: 0px;
}


.object-info-box thead{
    text-align: left;
    font-weight: normal;
}

.no-border{
    border: none;

}

.ui-expanded-row-content{
    background-color: #04284A;

}

.spacier-rows{
    height: 150%;

}


table.primeDataTable td{
    font-size: 0.9em;
    white-space: normal;
    word-wrap: normal;
}


.primeDataTable {
    border-collapse: collapse;
}


/*this stupid css is to prevent address table cells from getting blue borders
when clicked even out of select mode!!*/

.primeDataTable :focus,
.primeDataTable .ui-state-focus,
.primeDataTable .ui-state-hover {
    outline: none !important;
    box-shadow: none !important;
}

.focus-background{
    background-color: #DEE461
}

.table-select-box-col{
    width:16px;
    text-align:center;
}

table.borders{

}

table.borders {
    border-collapse: collapse;
}

table.borders th, td {
    border: 1px solid black;
    padding: 10px;
}

table.borders th{
    background-color: lightblue;
}

tr.resolved{
    background-color: lightgreen;

}

tr.pending{
    background-color: lightyellow;

}

tr.pastdeadline{
    background-color: lightpink;
}

tr.reinspect{
    background-color: lightpink
}

.ui-datatable thead th{
    text-align: center;
}

/*PF 14 upgrades*/
.ui-datatable .ui-datatable-data {
    border-spacing: 0;
    border-collapse: collapse;
}

.ui-datatable .ui-datatable-data td {
    border-spacing: 0;
    border: none;
    border-collapse: collapse;
}


svg {
    display: block;
    margin: 0;      /* Remove any default margin */
    padding: 0;     /* Remove any padding */
    width: 0px;     /* Explicitly set width to zero if it’s unnecessary */
    height: 0px;    /* Explicitly set height to zero if it’s unnecessary */
    line-height: 0;
    float: none;    /* Remove any floating behavior */
    position: relative; /* Ensure it respects its normal flow */
    vertical-align: baseline;
}

/*

temporarily paints red boxes around all elements

* {
    border: 1px solid red !important;  Highlights all element boundaries 
}*/

span.ui-column-title{
    display: block;
}

/*td.gridTd {*/
.gridTd {
    border: none;
    vertical-align: top;
    padding: 7px;
}

.topbottom-lines-left{
    text-align: right;
    border-right: none;
    color: black;
    margin:0;

}

.topbottom-lines-right{
    text-align: left;
    border-left: none;
    color:black;
}


.gridTd-solid-back{
    border:none;
    background-color: rgba(12,12,12,0);
    z-index: 100;
    opacity: 1;
}

.panelGridData{
    border-collapse: collapse;
    margin: 0px;
    border: 1px solid black;
}

td.gridFooter {
    border: none;

}

.thick-borders .ui-datatable-data td,
.thick-borders .ui-datatable-data th {
    border-width: 3px; /* Adjust the thickness as needed */
    border-style: solid;
}

td.userBarTd{
    align-content: center;
    border: none;

}

td.centeredColumnContent{
    text-align: center;
}

.userBarTd .material-icons{
    margin-left: auto;
    margin-right: auto;
}


.leftalign{
    text-align: left;
}

gridTd-bignum{
}

.gridTd-mccontainer{
    background-color: #181F36;

}

.action-requests-search{
    background-color: bisque;
}

td.rowcolor-lightgreen{
    background-color: lightgreen !important;

}

td.rowcolor-lightgray{
    background-color: lightgrey !important;
}


td.rowcolor-lightblue{
    background-color: lightblue !important;
}

td.rowcolor-lightblue{
    background-color: lightblue !important;
}

td.rowcolor-lightred{
    background-color: lightcoral !important;
}

td.rowcolor-yellow{
    background-color: lightyellow !important;
}

td.rowcolor-orange{
    background-color: orange !important;
}

.small-text{
    font-size: 0.8em;
}






/***********************CLOSE TABLE STYLES**********************/


/*---------------------CHARTS ---------------------------*/

.jqplot-table-legend{
    border: none;
}


/***********************CLOSE CHARTS **********************/



/*---------------------BUTTONS & CONTROLS---------------------------*/

.ui-state-hover{


}

.ui-button-text{
    margin-left: 5px;
}

/* injects a larger space to my left, and a little to my right for the check box */
.inline-spaced-control-label{
    margin-left: 8px;
    margin-right: 3px;

}

.full-width{
    width:100%;
}

.hover-none:hover{

    margin: auto;
    background-color: green;

}

/* this styling is for use w/ command button on codeSourceManage.xhtml */
.manButton{
    margin-bottom: 15px;
}

.inline-button{
    margin-left:10px;

}



/* formatting command buttons completeCodeSourceList & codeSourceTable on codeSourceManage.xhtml  */
.buttonOwnLine1{
    margin-top: 10px;
    margin-bottom: 10px;
}

/* formatting command buttons for inspectableCodeElementManage.xhtml */
.iceButton{
    margin-top: 10px;
}


.commandButton{
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;

}

.button-size-small {
    font-size: small;
    font-weight: normal;
}

.cear-actions-button {

}


.buttonOwnLine{
    display: block;
    margin-bottom: 10px;
    margin-top: 5px;
    clear: left;
    /*    color: blue;
        background-color: green;*/
}

.noFill{
    background-color: white;
}

.button-float-right{
    display: block;
    float:right;
}
.sessionInfoButton{
    background: none;

}

.sessionInfoButton span{
    color: white;
}


.link-button{
    display: inline-block;
    font-weight: bold;
    color:blue;
    padding: 5px;
    text-decoration: none;

}

.link-button-container a{
    color:white;
}

.commandlink-container .commandlink-webstd a:link{


}

button.button-help{
    background-color: white;
    color: blue;
    border: none;
    display: inline-block;
}


.inline-control{
    margin-left: 8px;
}


.nudge-right{
    margin-right: 8px;
}

.button-row-container {
    display: flex;
    justify-content: flex-start;
}


.button-row-container button {
    margin-right: 10px;
}

/* ****************** CLOSE BUTTON STYLES ********************/




/* -------------------- DIALOGS ----------------------- */

.object-metadata{
    font-style: italic;
    margin-top: 3px;
}


/* -------------------- CLOSE DIALOGS ----------------------- */

/* -------------------- ACTIVE BOBS ----------------------- */
.activebob-container{
    display: inline-block;
    float: left;
    width: 100%;
    color:black;
    background-color: white;
    padding: 10px;
    border: solid black;
    margin: 5px;
    height: 100%;

}
/* -------------------- CLOSE ACTIVE BOBS ----------------------- */



/* -------------------- PROPOSALS AND CHOICES ----------------------- */

.proposal-choice-button{
    margin-top: 5px;

}

.proposal-prophead{
    font-weight: bold;
    font-size: 1.2em;
    display: block;
    float: left;
}

.proposal-description{
    font-style: italic;
    font-size: 0.9em;
}

.proposal-choicehead{
    font-weight: bold;
    font-size: 1.2em;
}

.proposal-metadata-container{
    display: block;
    width: 100%;
}

.proposal-propbuttoncontainer{
    display: block;
    float: right;
}


.proposal-infotable-box{
    display: block;
    width: 100%;
    clear: both;
}

/* ****************** END PROPOSALS AND CHOICES ********************/




/* -------------------- INSPECTION AND OCC PERMIT----------------------- */


.reinspection-flag{
    background-color:  #DEE461;
}

.required-person-alert{
    background-color:  #DEE461;
}

.permit-flow-container-step{
    border: none;
    padding: 15px;
}

.non-clickable{
    pointer-events: none;
}

.view-active {
    text-decoration: underline;
}



.occperiod-inspace-info{
    display: block;
    clear: both;

}

.ui-datascroller-item{
    clear:both;
}

.ui-datascroller{
    border: none;
}

.occinsspace-metadata-container{
    display: block;
    width: 100%;
}

.occspace-button-container{
    display: block;
    float: right;
}

.finalized{
    color:darkblue;
    font-size: 1.3em;
}

.inprocess{
    color:darkred;
    font-size: 1.3em;
}

i.inspection-pass{
    color: forestgreen;
}

i.inspection-fail{
    color: #B36A00;
}

i.inspection-notinspected{
    color: #1a237e;
}

.occperiod-inspace-header{
    font-size: 1.4em;
    font-weight: bold;
    color: #163F8A;
    margin-bottom: 15px;
    display: block;
    float: left;
}

.occperiod-inelement-header{
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 5px;
    clear:both;
}


.inspection-notinspected{
    color: #1a237e;
    font-weight: bold;

}

.inspection-pass{
    color: forestgreen;
    font-weight: bold;
}

.inspection-fail{
    /*dark red*/
    color:#950025;
    font-weight: bold;
}

.inspection-documentation{
    /*dark blue*/
    color: #260c99;
}

/*For space dimensions in FINs*/
.small-width-input .ui-inputfield{
    width: 50px;
}

/*For space dimensions in FINs*/
.med-width-input .ui-inputfield{
    width: 100px;
}


.green-button .ui-button{
    background-color: darkgreen;
    color: white;
    border:1px solid #6C6D70;
    width: 100%;
}


.occpermit-borderbox{
    display: block;
    width: 100%;
    border: #00637F double medium;
    padding: 10px;
}

.occpermit-datagrid{


}

.gridTd-permit {
    border: none;
    vertical-align: top;
    padding: 10px;
}


.occpermit-title{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
}

.occpermit-titlesub{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.1em;
    font-style: italic;
}

.occpermit-criticaldata-label{
    display: block;
    clear: right;
    font-weight: bold;
    font-size: 1.2em;

}

.occpermit-criticaldata-value{
    font-size: 1.2em;
}

.occpermit-minordata-label{
    font-size: 1em;

}

.occpermit-minordata-value{
    font-size: 1em;

}

.occpermit-admindata-label{
    font-size: .8em;
    font-weight: bold;
    color: darkgrey;
}

.occpermit-admindata-value{
    font-size: .8em;

}

.occpermit-additionalnotes{

}

.occpermit-muniheader{
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
}

/*class given to <h:outputText ... components which are nested in an <hx of some kind*/
.occperiod-periodlabel{
    font-weight: bold;
    color: darkgrey;
    font-size: 1.1em;
}

.occperiod-periodvalue{


}

.occperiod-address{
    font-weight: bold;
    font-size: 1.3em;
}

.occinspection-reportheader{

}

.occpermit-referencenointable {
    font-weight: bold;
    font-size: 1.3em;
    color:darkgreen;
}

.occpermit-finalizedintable{
    color: darkgreen;
}

.occpermit-finalizedintable-nullified{
    color: darkgray;
    text-decoration: line-through;
}

.occpermit-finalizedintable-revoked{
    color: darkred;
}

.field-init-inspection-routing div{
    background-color: #DEE461;
}

.inspection-routing-highlighted{
    background-color: #DEE461;

}

.margin-buffered {
    margin:10px;
}


.permit-amendment-mode{
    background-color:  #DEE461;
    font-weight: bold;
}



.fieldinitfin-notice-text{
    color: #E91E63;
    font-weight: bold;
}

.fieldinitfin-text-noqueuedrequests{
    color: #00C853;
    font-weight: bold;
    font-style: italic;
}

.dispatched-highlight{
    /*lilac ish*/
    background-color: #E6A5CA;
}
.inspection-flag {
  border: 2px solid black;
  display: flex;          /* allows side-by-side icon area + text area */
  margin: 1rem 0;
  font-family: sans-serif; 
  width: 100%;
  box-sizing: border-box;  /* ensure padding etc. stay within set width */
}

.inspection-flag-icon {
  background-color: #222;  /* dark background for “inverted” effect */
  color: #fff;             /* light/white icon or text on dark background */
  padding: 0.5rem;
  display: flex;
  justify-content: center; 
  align-items: center;     
  width: 3rem;             /* square-ish icon region */
  min-width: 3rem;
}

.inspection-flag-text {
  padding: 0.5rem 1rem;
  flex-grow: 1;            /* let the text area expand as needed */
}

.inspection-flag-text .flag-title {
  font-weight: bold;
  text-transform: uppercase;
}

.inspection-flag-text .flag-subtext {
  margin-top: 0.3rem;
  font-weight: normal;  /* regular text for subtext */
}


/* Force icon color to bright red, overriding other icon rules */
.inspection-flag-icon .material-icons {
  color: #B36A00! important;
}

/* ****************** CLOSE INSPECTION AND OCC PERMIT *************************/



/* -------------------- PERSONS / HUMANS ------------------------------------ */

.act90flag-linkonly{
    background-color:  #DEE461;
    
}

.act90flag-guilty{
    background-color: #644D9E;
    color: white;
}

.act90-miniflag{
    background-color:  #DEE461;
    display: block;
    
}



/* ****************** END PERSONS / HUMANS ************************************/


/* ----------------------------------- MISC --------------------------------- */

/**
For sneaky text on pages -- usually to load a backing bean by page EL eval
*/
.white-text{
    color:white;
}

.content-align-center{
    text-align: center;
}

.nov-chosen-recipeint{
    margin: 10px;
    font-family: Heebo;
}
.nov-viol-ds{
    border: none;
}

.nov-header-image{
    margin-left: auto;
    margin-right: auto;
}

.ui-datascroller-content{
    border: none !important;

}

p.footer{
    font-style: italic;
    size: 0.8em;
    color: #e3b73d;
}

/* UI Controls Styling*/

.inputText{
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

.fullwidth-component{
    width: 100%;
}

a.outputLink{
    display: block;
    margin-bottom: 10px;
}


.textArea{
    width: 400px;
    margin-bottom: 10px;
    min-height: 120px;
}

select.selectOneListbox{
    margin-bottom: 10px;
}

span.uiLabel{
    display: block;
    clear: left;
    margin-bottom: 10px;
    font-weight: bold;

}

input.selectBooleanCheckbox{
    display: inline-block;
    float: left;
}

div.checkBoxLabel{
    display: block;
    float: left;
    margin-top: 0px;
    margin-bottom: 10px;
}

.requested-action-status {
    font-size: 1.3em;
    font-weight: bold;
}

.action-needed{
    color:red;

}

.action-complete{
    color:blue;
}

.nov-builder-halfwidth{
    width: 50%;
    border: none;
    vertical-align: top;
}

.preview-violations-box{
    display: block;
    width:1000px;
}

.newpasswd-cont{


}

.newpsswd-lead{


}

.newpasswd-text{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.newpsswd{
    font-size: 3em;
    color: darkslateblue;
    font-weight: bold;
}


/* ******************** CLOSE MISC ********************************/



/* Error Styling */

.msgWarn{
    color: darkgoldenrod;
}

.msgInfo{
    color: blue;
}

.msgFatal{
    color: orange;
}

.msgError{
    color: orangered;
}

/* Property Profile Styling */

.footnote{
    font-style: italic;
    font-size: 0.8em;
}

table.cases{
    border-collapse: collapse;
    border: 1px solid black;

}

table.cases th{
    text-align: left;
    border: 1px solid blue;
    background-color: green;
}

table.cases td{
    text-align: left;
    border: 1px solid blue;
    padding: 5px;
}

tr.caseClosed{
    background-color: #66ff66;
}

tr.caseOpen{
    background-color: #9999ff;
}

/* CSS for creating a diagonal striped background in a div
   Source: Guidance provided by ChatGPT
   Pattern: Diagonal stripes resembling a hazard sign
   Colors: Light yellow and light orange
*/

.alert-background {
    margin: 10px;
    padding: 5px;

    /* Create a linear gradient with light yellow and light orange stripes */
    background-image: linear-gradient(
        45deg,      /* Angle of the gradient */
        #ffffe0 0%,  /* Light yellow; start of yellow stripe */
        #ffffe0 50%, /* Light yellow; end of yellow stripe */
        #ffcc99 50%, /* Light orange; start of orange stripe */
        #ffcc99 100% /* Light orange; end of orange stripe */
        );
    background-size: 80px 80px;

}

.alert-text{
    font-weight: bold;
    font-size: 1.5em;
}

.alert-container {
    width: 100%;
    margin-top: 15px;
}

/* fieldset */

.ui-fieldset-toggleable .ui-fieldset-legend{
    background-color: white !important;
    color:black !important;
    font-weight: normal !important;

}

.ui-fieldset-legend{
    background-color: white;
    font-weight: normal;

}

/* tab views */
.ui-tabs-nav{
    color:black;
    background-color: green;
}


/* Documentation styling */
.docContainer{
    max-width: 800px;

}

.pageContentsList{
    list-style-type: none;
}


.pageContentsList li{
    font-size: 1.2em;
    margin-bottom: 10px;
}

.unit_number {
    font-size: 1.4em;
    font-weight: bold;
}

/*Next three classes created with help from chatGPT model 03*/
/* portal links styling */
.property-info .portal-logo{          /* ← use the normal hyphen */
    display:block;          /* removes inline‑image gaps          */
    width:100%;             /* follow the column width            */
    max-width:200px;        /* never grow larger than the original*/
    height:auto;            /* keep aspect ratio                  */
    object-fit:contain;     /* just in case browsers misbehave    */
}

/* --- B. Mask anything that would still hang over ------------------ */
.property-info .right-column-mask{    /* ← normal hyphen again     */
    background:#fff;
    position:relative;
    z-index:1;
    overflow:hidden;
}

/* optional : a quick media query to make the logos even smaller
   on *very* narrow screens / high zoom                           */
@media (max-width:600px){
    .property-info .portal-logo{max-width:140px;}
}

/* ******************* TOP NAVIGATION BAR *************************/

/* Top nav bar - responsive */
@media screen and (max-width: 640px) {

    .navbar .nav_containner{
        display: block;
    }

    .navbar .nav_containner .nav_content{
        display: none;
    }

    .navbar .navbar_toggler_button{
        float: right;
        display: block;
        position: absolute;
        right: 0px;
        top: 0px;
    }

    .responsive {
        position: relative;
    }

    .responsive .nav_containner .nav_content{
        float: none;
        display: block;
        text-align: left;
        border-bottom: 1px solid #E6E7E8;
    }

    .responsive .nav_containner .nav_active{
        box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.3);
    }

    .responsive .nav_containner .subnav_containner{
        top:0px;
        left:200px;
        width: 100%;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    }

    .responsive .nav_containner .subnav_containner .subnav_content{
        border-top: 0px solid #E6E7E8;
        border-bottom: 1px solid #E6E7E8;
    }

}

/* Top nav bar */
.navbar{
    min-height: 40px;
    color: white;
    background-color: #6C6D70;
    position: relative;
    z-index: 10;
}

.nav_containner{
    display: inline-flex;
    margin-right: -4px;
    position: relative;
}

.nav_containner:hover {
    color: #6C6D70;
    background-color: #CECECE;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}

.nav_content{
    height:40px;
    padding: 10px 10px;
    min-width: 200px;
    float: left;
    display: block;
    text-align: center;
}

.nav_containner:hover .subnav_containner{
    display: block;
}

.navbar_toggler_button{
    font-size: 25px;
    height:40px;
    padding: 5px 5px;
    display: none;
    cursor: pointer;
}

.navbar_toggler_button:hover{
    color: #00B4ED;
}

.subnav_containner{
    display: none;
    position: absolute;
    top:40px;
    width: 200px;
    z-index: 15;
}

.subnav_content{
    float: left;
    height: 40px;
    width: 100%;
    padding: 10px 10px;
    border-top: 1px solid #2F6381;
    color: #6C6D70;
    background-color: #CECECE;
}

.currentinfo{
    float: left;
    font-size: 14px;
    height: 40px;
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-left:1px solid #2F6381;
    border-right:1px solid #2F6381;
}

.nav_font i{
    padding-right: 5px;
}

.subnav_content:hover{
    background-color:#00B4ED;
    color:#000000;
}

.nav_active{
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.3);
}

.nav_button{
    float: right;
    font-size: 14px;
    height: 40px;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    position: relative;
}

.subnav_containner_stable{
    min-height: 40px;
    position: relative;
    font-family: inherit;
    color:#6C6D70;
    background-color: #EEEEEE;
    width: 100%;
    z-index: 3;
}

.nav_display{
    display:inline-block;
    z-index: 2;
}
.nav_hide{
    display: none;
}

.navsub_active{
    color:#000000;
    border-top: 2px solid #6C6D70;
}

/* ******************* SIDE NAVIGATION BAR *************************/

/* Side nav bar */
.sidebar {
    min-height: 95vh;
    height: 100%;
    width: 35px;
    position: absolute;
    left: 0;
    background-color: #6C6D70;
    transition: 0s;
}

#maincontent{
    margin-left: 40px;
}

.toolSidebarCollapse{
    height: 40px;
    color: #E6E7E8;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-bottom: 1px solid #E6E7E8;
}

.toolSidebarExpansion{
    height: 40px;
    color: #E6E7E8;
    font-size: 25px;
    display:none;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #E6E7E8;
    padding-right: 15px;
    align-items: flex-end;
}

.toolSidebarTitle{
    padding-left: 10px;
    position: absolute;
    align-self: flex-start;
    font-size: 15px;
}

.toolSidebarCollapse i,.toolSidebarExpansion i{
    cursor: pointer;
}

.toolSidebarCollapse i:hover,.toolSidebarExpansion i:hover{
    color: #00B4ED;
}

.sidebar_item{
    color: white;
    display: initial;
}

.sidebar_firstmenu_item{
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #E6E7E8;
}

.sidebar_firstmenu_item i{
    padding-left: 10px;
    width: 25px;
}

.sidebar_firstmenu_font{
    padding-left: 20px;
    font-size: 14px;
    display: none;
    cursor: pointer;
}

.sidebar_firstmenu_item:hover{
    border-bottom: 1px solid #00B4ED;
}

.sidebar_firstmenu_font_active{
    background-color: #6C6D70;
}

.sidebar_secondmenu{
    display: none;
}

.sidebar_secondmenu_item{
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #2F6381;
    color: #6C6D70;
    background-color: #CECECE;
}

.sidebar_secondmenu_item:hover{
    background-color:#00B4ED;
    color:#000000;
}

.sidebar_secondmenu_item i{
    width: 25px;
    padding-left: 10px;
    cursor: pointer;
}

.sidebar_secondmenu_font{
    padding-left: 20px;
    font-size: 16px;
    display: none;
    cursor: pointer;
}

/* ****************** PRIMEFACE STYLING RESETING *******************/

/*body .ui-panel .ui-panel-titlebar{
    background-color: #6C6D70;
    border: 1px solid #6C6D70;
}*/

div.advanced-search div.ui-panel-titlebar{
    background-color: white;
    color:black;
}

body .ui-panel .ui-panel-titlebar{
    background-color: #004864;
    border: 1px solid #004864;
    color:white;
}

body .ui-panel-titlebar-cecase{


}

body .ui-panel-titlebar-occperiod{

    background-color: #31004C;

}




body .ui-dialog .ui-dialog-titlebar{
    background-color: #6C6D70;
    border: 1px solid #6C6D70;
}

body .ui-messages .ui-messages-info{
    background-color: #99C221;
}

body .ui-selectonemenu{
    width: 100%;
}

body .ui-inputfield{
    width: 100%;
}

body .ui-widget:not(.pi), body .ui-widget .ui-widget:not(.pi) {
    font-family: 'heebo';
}

body .ui-steps .ui-steps-item .ui-menuitem-link .ui-steps-number {
    width: 3.5em;
    height: 3.5em;
}

body .ui-steps .ui-steps-item.complete .ui-menuitem-link .ui-steps-number {
    border: 0;
}


body .ui-steps .ui-steps-item.ui-state-disabled {
    opacity: 1
}


body .ui-calendar.ui-trigger-calendar{
    display: inline-flex;
}

body .ui-calendar.ui-trigger-calendar .ui-button{
    background-color: #6C6D70;
    border: 1px solid #6C6D70;
}

body .ui-fileupload-cancel{
    background-color: #6C6D70;
    border: 1px solid #6C6D70;
}

body .ui-fileupload-choose{
    background-color: #6C6D70;
    border: 1px solid #6C6D70;
}

body .ui-panel {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 40px;
}


/*body .ui-button{
    background-color: #00B4ED;
    border: 1px solid #00B4ED;
}*/


/*button*/

.selectButton{
    min-width: 70px;
}
.editButton{
    min-width: 60px;
}





.MuniReadTableOutputLabel{
    width: 100%;
    border-bottom: 1px black solid;
    background-color: #F0F0F0;
    padding-top: 10px;
}
.MuniReadTableInputText{
    width: 100%;
}
body .ui-inputfield{
    font-size: 100%;
}

body .ui-datatable .ui-datatable-header, body .ui-datatable .ui-datatable-footer{
    background-color: #6C6D70;
    border:1px solid #6C6D70;
}

#muniManage-panel .ui-panelgrid .ui-panelgrid-content{
    border: none;
}

/* feeManage.xhtml page (shares many rules with muniManage.xhtml) */

.FeeReadTableOutputLabel{
    width: 100%;
    border-bottom: 1px black solid;
    background-color: #F0F0F0;
    padding-top: 10px;
}
.FeeReadTableInputText{
    width: 100%;
    padding-top: 10px;
}

#feeManage-panel .ui-panelgrid .ui-panelgrid-content{
    border: none;
}

/* **************** PUBLIC NAV CONTAINER PAGE **********************/

.public-container{

}

.public-menu-container{
    width: 25%;
    min-height: 100vh;
    background-color:#2F2F2F;
    position: fixed;
}

.public-menu-content{
    height: 100vh;
    background-color:#2F2F2F;
    padding-top: 75px;
}

.public-menu-logo{
    padding-bottom: 30%;
    width: 95%;
    margin: 0 auto;
}

.public-menu-button{
    padding-bottom: 2%;
    width: 95%;
    margin: 0 auto;
}

.public-menu-nav-container{
    width: 75%;
    float: right;

}

.public-menu-nav-title{
    color: #00B4ED;
    font-size:125%!important;
    padding-bottom: 30px;
    font-weight: 700;
}

.public-menu-nav-seperateline{
    padding-top: 20px;
    padding-bottom: 20px;
}

.public-menu-nav .ui-commandlink{
    font-size: 115%!important;
    color:white;
}

.public-menu-nav:hover{
    border-bottom: 1px solid #00B4ED
}

.public-menu-nav a:hover{
    text-decoration: none;
}

.public-arrow-container{
    display: inline-block;
    vertical-align: top;
    min-width: 30px;
}

.public-arrow{
    vertical-align: top;
    color: #DEE461;
    font-weight: 900;
    display: none;
}

.public-menu-active{
    display: inline-block;
}

.public-menu-button .ui-button {
    width: 100%;
}

.public-menu-text{
    bottom: 1rem;
    position: absolute;
    display: flex;
    justify-content: center;
    text-align:center;
    margin: 0 2%;
    color: grey;
}

.public-content-container{
    min-height: 100vh;
    width: 75%;
    position: absolute;
    left: 25%;
}

.public-content{
    position: relative;
    width: 95%;
    min-height: 100vh;
    margin: 0 auto;
}

.mainContainer{
    height: 100%;
}

.public-title{
    padding-top: 75px;
    width: 71.25%;
    position: fixed;
    top:0;
    min-height: 10vh;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 99;
}

.public-title-main {

    font-size: 3em;
    font-weight: bold;
}

.public-title-sub{
    font-size: 1em;
    z-index: 120;
}

.public-main-contents-containner{
    position: absolute;
    top:15vh;
    width: 100%;
}

.public-guide{
    padding-top: 3%;
    padding-bottom: 3%;
    min-height: 10vh;
    width: 100%;

}

.public-main-contents{
    width: 100%;
}

.public-main-contents-io{
    position: relative;
    width: 100%;
    padding: 2%;
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #F3F3F3;
}

.public-main-contents-io-title{
    position: absolute;
    top:25px;
    min-height: 30px;
    font-weight: 600;
}

.public-main-contents-io-content{
    padding-top: 30px;
}

.public-main-contents-button-left{
    padding: 0.5%;
    float:left;
    min-width: 15%;

}

.public-main-contents-button-right{
    padding: 0.5%;
    float:right;
    min-width: 25%;

}

.data_field_title{
    font-size: 1.2em;
    padding-top: 1%;
    padding-bottom: 0.5%;
    font-weight: bold;

}

.mainContainer .ui-steps .ui-steps-item{
    width: 16.6%;
}

.mainContainer .occpermit .ui-steps .ui-steps-item{
    width: 14.285%;
}

.mainContainer .ui-steps.custom .ui-steps-item.complete .ui-menuitem-link .ui-steps-number {
    background-color: #00B4ED;
    color: #FFF;
}

.mainContainer .ui-steps-title{
    font-weight: 700;
    font-size: 90%;
    color: #333;
}


.mainContainer .ui-steps .ui-steps-title{
    white-space:normal;
}

.mainContainer .ui-steps::before{
    top: 55px;
}

.public-menu-toggler-button{
    position: fixed;
    top:0;
    right: 0;
    font-size: 2.5em;
    padding-right: 2.5%;
    padding-top: 1.5%;
    cursor: pointer;
    z-index: 102;
    display: none;
}

.public-menu-toggler-button-white i{
    color: white;
}

.public-login-logo{
    padding-bottom: 80px;
    width: 9%;
    min-width: 100px;
    margin: 0 auto;
}

.publi-login-container{
    margin: 0 auto;
    width:550px;
}

.publi-login-title{
    color: #2F2F2F;
    letter-spacing: 3px;
    padding-bottom: 30px;
    ;
    font-size: 2em;
    width: 100%;
    text-align: left;
    font-weight: bold;
    display: inline-block;
}

.public-login-button{
    font-size: 1.3em;
    width: 100%;
    padding-top: 1em;
}

.public-login-text{
    text-align: left;
    width: 100%;
}

.public-main-contents-login{
    background-color: white;
}

input{
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.login-button {
    display: inline-block;
    border-radius: 4px;
    background-color: #007AD9;
    color: #FFFFFF;
    text-align: center;
    font-size: 1.1em;
    padding: 0.3em;
    width: 100%;
    transition: all 0.5s;
    cursor: pointer;
    border: none;
}

.login-button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.login-button span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.login-button:hover span {
    padding-right: 25px;
}

.login-button:hover span:after {
    opacity: 1;
    right: 0;
}

.filter-box-container{
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: white;
    margin-bottom: 3em;
    box-shadow: 0 3px 10px 2px rgba(0, 0, 0, 0.2);
}
.paccode{
    display: inline-block;
    font-size: 3em;
    font-weight: bold;
    padding: 15px;
    border-top: 30px;
    border-bottom: 30px;
}

.link a:link {
    color: #00B4ED;
    text-decoration: underline;
}

.link-entity{
    position: absolute;
    bottom: 0.5em;
}



@media screen and (max-device-width:640px),(max-width: 640px){
    .publi-login-container{
        margin: 0 auto;
        width:80%;
    }

    .public-title{
        position: relative;
    }

    .public-menu-container{
        position: relative;
        width: 100%;
    }


    .public-content-container{
        width: 100%;
    }

    .public-content-container{
        position: relative;
        width: 100%;
        left: 0%;
    }
    .public-menu-container{
        height: 100px;
        display: none;
    }

    .public-menu-toggler-button{
        display: block;
    }

    .public-menu-toggler-responsive{
        display: block;
        position: fixed;
        z-index: 101;
    }



}


/*code pages*/
.gridTd_code{
    border: none;
    padding: 7px;

}

.gridTd_code_inputTextarea{
    border: none;
    padding: 7px;
    width: 1100px;
}

.system_admin_only{

    background-color:  #DEE461;
}


/* ************* UI PATTERN FOR DATA LABEL AND VALUE ***************/

.data-container{
    padding-top: 10px;
    padding-bottom: 20px;
}

.data_table_header{
    font-weight: bold;
    font-size: 20px;
}

.data_edit_button{
    min-width: 120px;
    float:right;
    padding: 5px;
}

.data_field{
    border-bottom: 1px solid #CECECE;
    min-height: 80px;
}
.data_container_nested_public{
    width: 100%;
    min-height: 100px;
}

.data_field_card{
    background-color: #E6E7E8;
    text-align: center;
    text-align: justify;
    min-height: 80px;
    padding: 5%;
    margin: 4%;
    min-height: 45vh;
}

.data_field_card_title{
    font-size: 1.5em;
    font-weight: bold;

}

.data_field_label{
    font-weight: 500;
    padding-bottom: 5px;
    display: block;
}

.data_field_value{
    color: #6C6D70;
    display: block;
    width: 100%;
}

.gray_button .ui-button{
    background-color: #6C6D70;
    border:1px solid #6C6D70;
}

.red_button .ui-button{
    background-color: darkred;
    color: white;
    border:1px solid #6C6D70;
}





/* **************** TASK Management *******************/

.task-title{
    font-weight: bold;
    font-size: 1.2em;
}

.task-description{
    font-style: italic;

}

.occperiod-tasks-container{
    clear:  both;
    display: inline-block;
}




/* **************** RESTRICT PAGE -- SEARCH PAGE *******************/

.list-data-container{
    min-height: 100vh;
}

.object-data-container{

}

.list-data-container .ui-selectbooleanbutton,
.list-data-container .ui-buttonset:not(.ui-splitbutton)>.ui-button {
    width: 25%;
    border: 1px white solid;
    font-size: 1.1em!important;
    padding-top: 5px;
    padding-bottom: 5px;
}

.list-data-container .ui-selectbooleanbutton.ui-state-active,
.list-data-container .ui-buttonset:not(.ui-splitbutton)>.ui-button.ui-state-active{
    background-color: #99C221;
    border:1px solid #99C221;
}

.list-data-container .ui-panel .ui-panel-content{
    background-color: #EEEEEE;
}

.restrict-main-list-mode-button{
    width: 100%;
    min-height: 50px;
}
.restrict-main-object-title{
    min-height: 50px;
    width: 100%;
    font-size: 1.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    font-weight: 700;
    color: #6C6D70;
    padding: 5px;
}

.data_container_nested_restrict{
    width: 100%;
    /*removed by ECD in haste to get more head room on cecaseprofile*/
    /*padding-top: 15px;*/
    margin-bottom: 20px;
}

.data_container_nested_restrict_report{
    width: 100%;
    padding-top: 1px;
    margin-bottom: 1px;
    font-family: sans-serif;
}

.restrict-main-contents-io-title{
    font-weight: 700;
    padding-bottom: 10px;
}

.restrict-main-contents-help-link{
    color:blue;
    /*display: inline-block;*/
    float: left;
    display: inline-block;
    text-decoration: none;
    clear: none;

    /*    float: next;*/
    /*text-decoration: underline;*/
    font-weight: 200;
    /*border-bottom: 1px solid #6C6D70;*/
    margin-left:10px;

}

.float-right{
    display: block;
    float:right;
}

.float-left{
    display: block;
    float: left;
}

.help-icon-tightright{
    padding-right: 0px;
    margin-right: 0px;
}

.help-text-tightleft{
    padding-left: 0px;
    margin-left: 0px;
}

.restrict-main-contents-help-link a{
    color:blue;

    text-decoration: none;

    /*text-decoration: underline;*/
    font-weight: bold;
    /*border-bottom: 1px solid #6C6D70;*/
    margin-left:10px;

    /*changed in haste by ECD Jan 2021 for cecase profile facelift*/
    border-bottom: 1px solid blue;
}

.restrict-main-contents-io-link a{
    /*color: #6C6D70;*/
    color:blue;
    font-weight: bold;

}
.restrict-main-contents-io-link a:hover{
    /*color: #6C6D70;*/
    color:lightskyblue;
    font-weight: bold;

}

.restrict-main-contents-io-link a:disabled{
    /*color: #6C6D70;*/
    color:darkgray;


}

.restrict-main-contents-io-content{
    min-height: 40px;
}

.restrict-main-contents-io-filter{
    display: inline-block;
    padding-top:15px;
}
.restrict-main-contents-io-filter .checkbox{

    padding-right: 10px;
}

.restrict-main-contents-io-button{
    width: 250px;
    float: right;
    margin-left: 5px;
}

.restrict-main-contents-io-button-maxwidth{

    float: right;
    margin-left: 5px;
}

.restrict-main-contents-io-button-left{
    float: left;
    margin-right: 5px;
}

.restrict-data-field{
    margin-top: 5px;
    margin-bottom: 10px;
}

.restrict-data-field_report{
    margin-top: 1px;
    margin-bottom: 1px;
}

.restrict-data-field-label-inline{
    font-weight: 700;
    display: inline-block;
    min-width:180px;
}

.restrict-data-field-value-inline{
    color: #6C6D70;
    display: inline-block;
    vertical-align: top;
}

.restrict-data-field-multi-line{
    margin-top: 5px;
    margin-bottom: 10px;
}

.restrict-data-field-multi-line .restrict-data-field-label-inline{
    display: block;
}
.restrict-data-field-multi-line .restrict-data-field-value-inline{
    display: block;

}


.restrict-data-field-label-vertical{
    min-height: 30px;
    font-weight: 700;
    border-bottom: 1px solid #CECECE;
}

.restrict-data-field-value-vertical{
    padding-top: 15px;
    display: block;
}

/** RULES MADE FOR EDITABLE TABLES

    These rules are made for tables with editable rows. The rows used to turn blue, and that was hard to read. Now they turn not blue. Please put this rule wherever it should be.
**/

body .ui-datatable.editTable .ui-datatable-data>tr.ui-state-highlight {
    border:1px solid #c8c8c8;
    background-color:#cde162;
    color:#262626;
    cursor:default
}

/* css added by benchmark on 23/04/2023 */
* {
    box-sizing: border-box;
}
.navbar {
    min-height: 70px;
    background-color: #2F2F2F;
}
.logo-image-wrapper {
    padding: 10px;
}
.logo-image-wrapper img{

}
.logo-image-wrapper-home img{
    height: 50px;
}
.activebob-container{
    margin: 0;
}
.box-icon-wrap{
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}
.box-icon-wrap i, .page-title-wrap i{
    width: auto;
}
.restrict-main-contents-io-link a {
    font-size: 14px !important;
}
.setting-bar{
    font-size: 14px;
    padding: 0 5px;
    text-align: right;
}
.page-title-wrap{
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    gap: 10px;
}
.page-title-wrap{
    margin: 0;
}
.page-title-wrap h1{
    margin: 0;
    font-size: 20px;
}
.flexing-box-pagecontent{
    padding: 0;
}
body .ui-panel {
    margin-top: 0;
    margin-bottom: 20px;
}

@media screen and (max-width: 576px){
    body{
        padding-left: 35px;
    }
    #maincontent{
        margin-left: 0 !important;
    }
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transition: .3s;
        z-index: 999;
    }
    .p-sm-12 {
        width: 100%;
    }
    .activebob-container{
        height: auto;
    }
    body .ui-selectonemenu{
        width: 100% !important;
        min-width: 100% !important;
        padding-right: 30px !important;
    }
    .ui-selectonemenu .ui-selectonemenu-label {
        white-space: normal !important;
    }
    #map-thumbnail-link img.thumbnail{
        width: 100%;
    }
    body .ui-panel .ui-panel-titlebar {
        position: relative;
    }
    body .ui-panel .ui-panel-titlebar .ui-panel-titlebar-icon {
        margin-top: 0;
        margin-bottom: 0;
        position: absolute;
        right: 10px;
        top: 10px;
    }
}


@media screen and (max-width: 200px){
    .p-sm-12 {
        width: 100% !important;
    }
}
@media screen and (max-width: 576px){
    .p-sm-12 {
        width: 100%!important;
    }
    #inspection-profile-dialog{
        width: 100% !important;
    }
}
@media (max-width: 640px){
    body .ui-datatable-reflow .ui-datatable-data tr {
        border-bottom: 1px solid #c8c8c8 !important;
    }
    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden) {
        border: 1px solid #c8c8c8 !important;
    }
    .ui-reflow-dropdown{
        width: 100%;
        height: 38px;
        border-radius: 5px;
        border: 1px solid #c8c8c8;
        margin-left: 0 !important;
    }
    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"]:not(.ui-helper-hidden) {
        width: 100% !important;
    }

}
p-dialog .ui-dialog {
    overflow: scroll;
    max-height: 100%;
}
.blob-upload-dialog-wrap{
    width: 100% !important;
}
body .ui-fileupload .ui-fileupload-content .ui-fileupload-files .ui-fileupload-row > div {
    padding: 0 !important;
}
.ui-fileupload-files .ui-fileupload-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

@media screen and (max-width: 40em){
    .ui-fileupload-buttonbar .ui-button {
        padding: 16px !important;
    }
    body .ui-button.ui-button-text-only .ui-button-text {
        padding: 0.429rem !important;
        margin: 0;
    }
    body .ui-button.ui-button-text-icon-left .ui-button-text {
        margin: 0;
    }
    body .ui-dialog .ui-dialog-titlebar {
        position: relative;
        padding-right: 30px !important;
    }
    body .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-icon {
        position: absolute;
        right: 0;
        top: 11px;
    }
    #confirmdialog-global .ui-dialog-content{
        justify-content: center !important;
    }
    #confirmdialog-global .ui-button-text {
        padding: 0.429rem 1rem;
    }
}
body .ui-datatable .ui-datatable-data > tr > td {
    white-space: normal;
}
.text-muted{
    color: #595959;
}