/* @CHARSET "ISO-8859-1"; */

html
{
	font-family: verdana;
	font-size: .8rem;
	font-size: 10px;
}
body{
	display: flex;
	justify-content: center;
}
img
{
	border: 0px;
}
a, a:visited{
	color:blue;
}
.faux-link{
	color:blue;
	font-weight: bold;
	cursor: pointer;
}
.edit-assessment-item,
.delete-edit-assessment-item,
.delete-assessment-item{
	cursor:pointer;
}
.Header
{
	background: url("../images/flowerBg.jpg") no-repeat;
	border: 1px solid #c8c8c8;
	border-bottom: none;
	padding: 20px;
	height:110px;
	overflow: hidden;
	text-align: right;
	color: #fff;
	font-weight: bold;
	font-size: 116%;
}

.Page
{
	background: url("../images/bgLined.gif");
	border: 1px solid #c8c8c8;
	border-top: none;
	height: auto;
	padding: 5px;
}

.ui-widget-header {
    font-weight: bold;
    background: dodgerblue;
    color: white;
    font-size: 1.5rem;
}

.top-crumbs{
	border-bottom: 3px dotted #c8c8c8; 
	display: flex;
	font-size:1..2rem;
	height: 25px;
	justify-content: space-between;
	padding: 8px 0 0 0; 
}
.top-crumbs .left-element{
	flex:1;
}
.top-crumbs .right-element{
	flex:1;
	text-align: right;
}

.tbl-discrepancy{
	font-weight: normal;
}
.tbl-discrepancy tr td:last-child{
	font-weight: bold;
}

.inactive-dialog-background{
	background-color: #ffe6e6 !important;
}
.inactive-banner{
	background-color: #d80000;
	color: #fff;
	text-align: center;
    padding: 1px;
}

.dlg-layout-main{
	display: flex;
	justify-content: flex-start;
	align-content: space-between;
}

.dlg-row-basic{
	display: flex;
	align-items: center;
}
.dlg-row-basic label{
	width:100px;
}

.date-controls{
	display: flex;
}
.date-controls input[type=date],
.date-controls input[type=text]{
	flex-grow: 1;
	margin-right: 5px;
}

.delete-lease-item{
	cursor: pointer;
	color: #d80000;
	font-weight: bold;
}

.lease-info-row{
	display: flex;
	flex-direction: row;
	margin-bottom: 6px;
	margin-top: 10px;
	align-items: center;
}
.lease-info-row label{
	color:#888;
	width: 160px;
}
.lease-info-row span{
	font-weight: bold;
}

.rounded-border{
	border:1px solid #222;
	border-radius: .5rem;
	margin-bottom: 1rem;
	padding: .1rem 1.5rem 1rem 1.5rem;
}
.payment-area{
	border-color: goldenrod;
	background-color: palegoldenrod;
}
.info-area{
	border-color: dodgerblue;
	background-color: paleturquoise;
}
.fRow-holder-user-name{
	border: 1px solid #c8c8c8;
    border-radius: 6px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	display: block;
	font-size: 2rem;
    padding: 6px;
	margin-bottom: 20px;;
}
.fRow-holder-user-name .fRow input[type=text]{
	font-size: 2rem;;
}
.fRow-holder{
	border: 1px solid #c8c8c8;
    border-radius: 6px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	display: block;
    padding: 6px;
	min-width:30.7%;
	margin-bottom: 20px;
	margin-right: 20px;
}
.fRow-holder:last-child{
	margin-right: 0;
}
.fRow{
	display: flex;
	flex-direction: column;
	margin-bottom: 6px;
	margin-top: 10px;
}
.fRow span.lbl{
	color: #a8a8a8;
}
.fRow input[type=text], .fRow input[type=file], .fRow input[type=date], .fRow textarea{
	border-width: 1px;
    border-style: solid;
    border-color: transparent transparent rgb(200, 200, 200);
    border-image: initial;
    font-weight: bold;
    font-size: 1.2rem;
	border-top:none !important;
	border-left:none !important;
	border-right:none !important;
	min-height: 30px;
}
.fRow select{
	border-width: 1px;
    border-style: solid;
    border-color: transparent transparent rgb(200, 200, 200);
    border-image: initial;
    font-weight: bold;
    font-size: 1.2rem;
	border-top:none !important;
	border-left:none !important;
	border-right:none !important;
	min-height: 30px;
}
.fRow .chk-and-label{
	display: flex;
	align-items: center;
}
.fRow .help-line{
	padding:0 0 0 7px;
}
.fRow.padding-top{
	padding:20px 0 0 0;
}

.sbsRow{
	display: flex;
	flex-direction: row;
	margin-bottom: 6px;
	margin-top: 10px;
	align-items: center;
}
.sbsRow span.lbl{
	color: #a8a8a8;
	width: 80px;
}
.sbsRow span.val{
	font-weight: bold;
	flex-grow: 1;
}
#dlgAssessmentPayment .sbsRow label{
	width:11rem;
}
#dlgAssessmentPayment .sbsRow select{
	height:2.5rem;
}
#dlgAssessmentPayment .sbsRow input{
	height:2.1rem;
}
#dlgSendNotifications .sbsRow label{
	margin-right: .5rem;
	white-space: nowrap;
	width:11rem;
}
#dlgSendNotifications .sbsRow select{
	height:2.5rem;
}
#dlgSendNotifications .sbsRow input{
	height:2.1rem;
	font-weight: bold;
}
#dlgSendNotifications #txtEmailHolder{
	display: flex;
	flex-grow: 1;
	padding-left: .5rem;
}
#dlgSendNotifications #txtEmailHolder > div{
	width:50%;
	border: 1px solid #888;
	border-radius: 3px;;
	padding: .5rem;
	font-weight: bold;
	margin-right: .5rem;
}
#dlgSendNotifications #txtEmailHolder > div:last-child{
	margin: 0;
}
#dlgSendNotifications #txtEmailHolder > div label{
	font-weight: normal;
}

#usable{
	padding-left: 7px;
    font-size: 1.2rem;
}
.bold
{
	font-weight: bold;
}
.normal
{
	font-weight: normal !important;
}

.no-wrap{
	white-space: nowrap;
}
	/*****************************************************/
	.Header{
		color: #fff;
		text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
	}
	.Header div:nth-child(1){
		font-size: 130%;
	}
	.Header div:nth-child(2){
		font-size: 150%;
	}
	.Header div:nth-child(3){
		font-size: 200%;
	}
	#header {
		float:left;
		width:100%;
		background:yellow;
		font-size:93%;
		line-height:normal;
		background: url("../images/bgTab.gif") repeat-x bottom;
		margin-top:10px;
		}
	#header ul {
		margin:0;
		list-style:none;
		padding:0px 10px 0;
		}
	#header li {
		float:left;
		background:url("../images/norm_left_Y.gif") no-repeat left top;
		margin:0;
		padding:0 0 0 9px;
		}
	#header a {
			float:left;
		display:block;
		background:url("../images/norm_right_Y.gif") no-repeat right top;
		padding:5px 15px 4px 6px;
		font-weight: bold;
		font-size: 1.5rem;
		text-decoration: none;
		color: #765;
		}
	/* Commented Backslash Hack
		hides rule from IE5-Mac \*/
	#header a {float:none;}
	/* End IE5-Mac hack */
	#header .current {
		background-image:url("../images/norm_left_on.gif");
		}
	#header .current a {
		background-image:url("../images/norm_right_on.gif");
		padding-bottom:5px;
		font-weight: bold;
		font-size: 1.5rem;
		text-decoration: none;
		color: #765;
	}
	/*****************************************************/

	#colTable
	{
	}
	#colTable th
	{
		border: 1px solid #c8c8c8;
		background: #e8e8e8;
		font-weight: bold;
		font-size: 90%;
		padding: 0 3px 0 3px;
	}
	#colTable td.ctr,
	#tblDOW td.ctr
	{
		text-align: center;
	}
	#colTable td
	{
		border-bottom: 1px dotted #AFAEA5;
		padding: 0 3px 0 3px;
	}
	.linkCrumb
	{
		font-size:80%;
	}

	.btn-print{
		font-size: 1rem;;
		padding: 5px;
	}

	.align-center{
		text-align:center;
	}
	.align-right{
		text-align:right;
	}
	.align-baseline{
		align-items: baseline;
	}
	.margin-bottom-10{
		margin-bottom: 10px;
	}
	.padding-top-10{
		padding-top:10px;
	}

	.action-row .btn,
	.ui-dialog-buttonset .btn{
		padding:8px;
		font-size: 1.2rem;
		font-weight: bold;
		min-width: 70px;
	}

	.inactive-row{
		display: inline-flex;
		align-items: center;
	}

	.positive
	{
		color: #00F;
	}
	.negative
	{
		color: #F00;
		font-weight: bold;
	}
	.red-text{
		color:#d80000;
	}
	.icon
	{
		border: none;
	}
	.add-payment-icon{
		cursor: pointer;
		font-weight: 900;
		font-size: 2rem;
	}
	.edit-payment-icon{
		cursor: pointer;
		font-weight: 900;
		font-size: 2rem;
	}
	.psiLO
	{
		background: #99FF33;
	}
	.psiML
	{
		background: #D6FFAD;
	}
	.psiMED
	{
		background: #FFFFAD;
	}
	.psiMH
	{
		background: #FFD6AD;
	}
	.psiHI
	{
		background: #FF2929;
		color:#fff;
	}
	.totalError
	{
		color: #d00000;
	}


	.bb
	{
		font-size: 130%;
		font-weight: bold;
	}

	.SRow
	{
		height: 200%;
	}

	td.r
	{
		text-align: right;
	}

	.important{
		background-color: orange;
	}

	#selWaterUser{
		font-weight: bold;
		width: 100%;
	}

	.border-top-bold{
		border-top:2px solid #222;
	}

	.banner-holder{
		display: flex;
		margin: 10px;
		flex-grow: 1;
	}
	.banner-holder div.banner-icon{
		padding: 10px 15px;
		font-size: 150%;

	}
	.banner-holder div.banner-text{
		font-size: 120%;
		font-weight: bold;
		padding: 10px;
	}

	.banner-informative{
		border: 2px solid dodgerblue;
		border-left: 10px solid dodgerblue;
		background-color: #e6f2ff;
	}
	.banner-informative div.banner-icon{
		background-color: #99caff;
	}
	.banner-informative div.banner-icon::before{
		content: "\f129";
		font-family: "Font Awesome 6 Free";
	}


	.banner-important{
		border: 2px solid orange;
		border-left: 10px solid orange;
		background-color: #fff6e6;
	}
	.banner-important div.banner-icon{
		background-color: #ffd280;
		padding: 6px 10px;
		font-size: 24px;
	}
	.banner-important div.banner-icon::before{
		content: "\f071";
		font-family: "Font Awesome 6 Free";
	}
	.banner-important div.banner-text{
		padding:6px
	}

	.banner-critical{
		border: 2px solid #D80000;
		border-left: 10px solid #D80000;
		background-color: #ffe6e6;
	}
	.banner-critical div.banner-icon{
		background-color: #ff9999;
		padding: 6px 10px;
		font-size: 24px;
	}
	.banner-critical div.banner-icon::before{
		content: "\f2d3";
		font-family: "Font Awesome 6 Free";
	}

	.user-selector{
		font-size:1.5rem;
		margin-top: 25px;
		width: 100%;
	}
	.user-selector label{
		font-weight: bold;
		white-space: nowrap;
	}
	.user-selector select{
		flex-grow: 1;
		font-size:1.5rem;
	}

	.divContainerMain{
		padding:0 10px 0 0; 
		margin-bottom:20px;
		width: 320px;
	}

	.removed-water-user{
		background-color: lightpink !important;
	}
	.inactive-cert{
		background-color: lightgoldenrodyellow !important;
	}
	.voided-cert{
		background-color: lightpink !important;
	}
	.deleted-lease{
		background-color: lightpink !important;
	}

	#divIncludeVoidedHolder{
		display: flex;
		align-items: center;
		margin-left: 20px;
	}

	#AddLeaseeRow{
		background-color: lightblue;
		border: 1px solid lightskyblue;
		display: flex;
		align-items: center;
		padding: 4px;
	}
	#AddLeaseeRow select, #AddLeaseeRow input[type=text], #AddLeaseeRow button{
		height: 24px;
		margin-right: 10px;
	}
	#AddLeaseeRow input[type=text]{
		width: 60px;
		height: 20px;
	}

	#AddAssessmentRow{
		background-color: lightblue;
		border: 1px solid lightskyblue;
		display: flex;
		align-items: center;
		padding: 4px;
	}
	#AddAssessmentRow select, #AddAssessmentRow input[type=text], #AddAssessmentRow button{
		height: 24px;
		margin-right: 10px;
	}
	#AddAssessmentRow input[type=text]{
		width: 60px;
		height: 20px;
	}

	#AddAssessmentItemsRow{
		background-color: lightblue;
		border: 1px solid lightskyblue;
		display: flex;
		align-items: center;
		padding: 4px;
	}
	#AddAssessmentItemsRow div{
		display: flex;
		flex-direction: column;
	}
	#AddAssessmentItemsRow select, #AddAssessmentItemsRow input[type=text], #AddAssessmentItemsRow button{
		height: 24px;
		margin-right: 10px;
	}
	#AddAssessmentItemsRow input[type=text]{
		width: 80px;
		height: 20px;
	}
	#AddAssessmentItemsRow #divOtherNote input[type=text]{
		width: 161px;
		height: 20px;
	}
	#selEditAssessmentYear{
		height: 24px;
	}

	.dup-year{
		border: 1px solid #d80000;
		padding: 5px;
		font-weight: bold;
		background-color: pink;
	}

#NewLayout{
	display: flex;
	flex-wrap: wrap;
}
.large-screen-only{
	display: none !important;
}
.small-screen-only{
	/* display: flex !important; */
}
.tile-day{
	background-color: #efefef;
	display: flex;
	border: 1px solid #c8c8c8;
	border-radius: 5px;
	padding: 10px;
	flex-direction: column;
	align-content: stretch ;
	min-width: 100%;
	margin: 5px;
	font-size: 1.5rem;
	box-shadow: 0px 5px #c8c8c8;
}
.tile-day-current-day{
	background-color: #e6f2ff;
}
.tile-day .tile-title{
	font-weight: bold;
	text-align: center;
	color: #fefefe;
	background-color: #222;
	border-radius: 3px 3px 0px 0px;
	padding: 5px 0;
}
.tile-day .tile-title-current-day{
	background-color: dodgerblue;
}
.tile-day table{
	border-collapse: collapse;
	width: 100%;
}
.tile-day table tr{
	border-bottom: 1px dotted #222;
}
.tile-day table tr:last-child{
	border-bottom: none;
}
.tile-day table tr td{
	/* border-bottom: 1px dotted #222; */
	font-size: 1.5rem;
	width: 50%;
}
.tile-day table tr td:first-child{
	color: #888;
	text-align: right;
}
.tile-day table tr td:last-child{
	font-weight: bold;
}
.tile-day table tr:last-child{
	border-bottom: none;
}

.tile-day .tile-day-info{
	display:flex;
	flex-direction: row;
	font-size: 150%;
}
.dotted-top{
	border-top: 1px dotted #666;
}
.tile-day .tile-day-info .tile-day-info-text{
	color: #666;
	text-align: right;
	flex-direction: column;
}
.tile-day .tile-day-info .tile-day-info-text div{
	padding: 1px;
}
.tile-day .tile-day-info .tile-day-info-values{
	text-align: right;
}
.tile-day .tile-day-info .tile-day-info-values div{
	padding: 1px;
}


.sub-tile{
	background-color: #efefef;
	display: flex;
	border: 1px solid #c8c8c8;
	border-radius: 5px;
	padding: 10px;
	flex-direction: column;
	align-content: stretch ;
	min-width: 100%;
	margin: 5px;
	font-size: 1.5rem;
	box-shadow: 0px 5px #c8c8c8;
}
.sub-tile table{
	border-collapse: collapse;
	font-size: 1.2rem;
}
.sub-tile table tr:last-child{
	border-bottom: none;
}
.sub-tile table tr{
	border-bottom: 1px dotted #222;
}
.sub-tile table tr td{
	/* border-bottom: 1px dotted #222; */
	padding: 4px 0;
}
/* .sub-tile table tr:last-child td{
	border-bottom: none;
} */
.sub-tile table tr td{
	vertical-align: top;
}
.sub-tile table tr td:first-child{
	padding-right: 6px;
	white-space: nowrap;
}
.sub-tile table tr td:last-child{
	font-weight: bold;
	width: 100%;
}


@media only screen and (min-width: 768px) {

	.BigRow
	{
		height: 25px;
		font-size: 135%;
	}
	.SectionHeader
	{
		border-bottom: 2px dotted #c8c8c8;
		font-weight: bold;
		font-size: 180%;
		color: #ababab;
		margin: 0 0 6px 0;
		display: flex;
		justify-content: space-between;
		padding-bottom: 5px;
        align-items: center;
	}
	.SubSectionHeader
	{
		border-bottom: 2px dotted #c8c8c8;
		font-weight: bold;
		font-size: 120%;
		color: #ababab;
	}
	.SectionHeader div label{
		color:#222;
		font-weight: normal;
		font-size: 1rem;
	}

	.dcc {
	background-image: url(../images/dc_centre.gif); 
	height: 5px; 
	font-size: 1px; 
	line-height: 1px;
	}
	.dcg {
	float: left; 
	background-image: url(../images/dc_gauche.gif); 
	width: 20px; 
	height: 5px;
	}
	.dcd {
	float: right; 
	background-image: url(../images/dc_droite.gif); 
	width: 20px; 
	height: 5px;
	}

	.divContainerMain{
		padding:0; 
		margin-bottom:20px;
		width: 772px;
	}

	.divContainerMain td{
		font-size:1.3rem;
	}

	.divContainer{
	background: #fafafa;
	color: #000000;
	border: 1px solid #AFAEA5;
	padding: 1px;
	}

	#NewLayout{
		justify-content: space-between;
	}
	.btn-print{
		font-size: 1rem;;
		padding: 10px;
	}

	.user-selector select{
		flex-grow: 1;
		font-size:2rem;
	}

	.large-screen-only{
		display: block !important;
	}
	.small-screen-only{
		display: none !important;
	}
	.tile-day .tile-day-info{
		display:flex;
		flex-direction: row-reverse;
	}
	.tile-day{
		background-color: #efefef;
		display: flex;
		border: 1px solid #c8c8c8;
		border-radius: 0px;
		padding: 3px;
		flex-direction: column;
		align-content: stretch ;
		min-width: 10.8%;
		margin: 0;
		font-size: 65%;
	}
	.tile-day .tile-title{
		border-radius: 0px;
		font-size: 150%;
	}
	
	.tile-day table{
		border-collapse: collapse;
		width: 100%;
	}
	.tile-day table tr{
		border-bottom: 1px dotted #222;
	}
	.tile-day table tr td{
		/* border-bottom: 1px dotted #222; */
		font-size: 1.3rem;
		width: 100%;
	}
	.tile-day table tr td:first-child{
		display: none;
		font-weight: bold;
	}
	
	.sub-tile{
		background-color: #efefef;
		display: flex;
		border: 1px solid #c8c8c8;
		border-radius: 5px;
		padding: 10px;
		flex-direction: column;
		align-content: stretch ;
		min-width: unset;
		margin: 5px;
		font-size: 1rem;
		box-shadow: 0px 5px #c8c8c8;
	}
	.sub-tile table{
		border-collapse: collapse;
		font-size: 1rem;
	}
	.sub-tile table tr td{
		border-bottom: 1px dotted #222;
		padding: 4px 0;
	}
	.sub-tile table tr:last-child td{
		border-bottom: none;
	}
	.sub-tile table tr td{
		vertical-align: top;
	}
	.sub-tile table tr td:first-child{
		padding-right: 6px;
		white-space: nowrap;
	}
	.sub-tile table tr td:last-child{
		font-weight: bold;
		width: 100%;
	}
	
}

.page-main {
    width: 100%;
    margin-left: auto;
    box-sizing: border-box;
    margin-right: auto;
    display: block;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 24px;
    margin-bottom: 16px;
}

@media (min-width: 600px) {
    .page-main {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (min-width: 1200px) {
    .page-main {
        max-width: 1200px;
    }
}
@media print{
	#page #NewLayout, .btn-print, .water-reading, .gallons-per, #header{
		display: none;
	}

	#page #OldLayout{
		display: block !important;
	}
	#page #OldLayout tr td{
		border-bottom: 1px dotted #222 !important;
	}
	#page #OldLayout tr td.rcHdr{
		width: 12% !important;
	}
	#page .sub-tile table{
		font-size: .8rem;
	}
	
}