﻿
#rightMenu
{
	background: url("../images/menuBack.jpg") repeat-y scroll 0 0 transparent;
	border: 1px solid #0F446C;
	border-bottom-left-radius: 10px;
	border-top-left-radius: 10px;
	float: right;
	margin: 260px 0 0;
	width: 160px;
}
#rightMenu ul li
{
	float: right;
	height: 30px;
	list-style: none outside none;
	position: relative;
	text-align: right;
	width: 160px;
}
#rightMenu ul li:hover > a
{
	background: url("../images/hover.jpg") repeat-x scroll 0 0 transparent;
	text-decoration: none;
}
#rightMenu ul li:hover > ul, #rightMenu ul li:hover > ul ul
{
	background: none repeat scroll 0 0 blue;
	display: block;
	position: absolute;
	right: 150px;
	top: 10px;
}
#rightMenu ul ul
{
	display: none;
}
#rightMenu ul li:hover > ul.menu-level2
{
	display: block;
}
#rightMenu ul li a
{
	color: #000000;
	display: block;
	font-size: 15px;
	height: 30px;
	line-height: 150%;
	padding-right: 10px;
	text-align: right;
	text-decoration: none;
}
#rightMenu ul li.last
{
	background: none repeat scroll 0 0 transparent;
}
#rightMenu ul li.last:hover
{
	background-image: url("../images/hoverCustom2.png");
}
#rightMenu ul li.first:hover
{
	background: url("../images/hoverCustom.png") no-repeat scroll 0 0 transparent;
}
#rightMenu ul li:hover, #rightMenu ul li.selected
{
	background: url("../images/hover.jpg") repeat-x scroll 0 0 transparent;
}
#rightMenu ul li:hover a, #rightMenu ul li.selected a
{
	color: #fff;
}
#tag {
	float: left;
	margin: 150px 0 0 50px;
}
#waterBack {
	background-image: url("../images/waterBack.png");
	float: left;
	height: 1220px;
	width: 1127px;
}
#main {
	background-color: #fff;
	float: left;
	height: 924px;
	margin: 20px 0 0;
	width: 907px;
}


/*********************************************  Login  **********************************************/
#login {
	width:100%;
	margin:0px 0px 20px auto;
	padding:0 0 0 620px;
	text-align:center;
	background:#fff url('../images/login-img.png') no-repeat left top / 600px 100%;
	border-radius:15px;
	box-sizing: border-box;
}

#login-box {
	background:#fff;
	max-width:485px;
	padding:45px 20px 40px 20px;
	margin:0 auto;
	box-sizing:border-box;
}

@media screen and (max-width: 1200px) {
	#login		{padding:0;}
	#login-box	{margin:0 0 0 auto;}

}

@media screen and (max-width: 600px) {
	#login		{background:#fff;}
	#login-box	{margin:0 auto; background:transparent;}

}

#login .page-title {
	padding-top:75px;
	background:url('../images/blue-dots.png') no-repeat center top;
}
#login .page-title H1 {
	color:#707070;
	font-size:33px;
	font-weight:600;
}
#login .page-title H1 SPAN		{display:block; text-align:center; font-size:18px; line-height:160%;}

#login1 {
	width:100%;
	text-align:right;
	box-sizing:border-box;
}

#login1 .form-group	{padding-top:10px;}
#login1 .row		{margin-bottom:15px;}


#login1 input.text1,
#login1 select			{width:100%; height:38px; margin-bottom:0px;}

#login1 input.button {
	width:100%;
	margin-bottom:10px;
	background-color:#005175;
	color:#fff;
}
#login1 input.button:hover, #login1 input.button:focus {
	background-color:#009dc4;
}

#login1 label {
	display:table;
	margin-bottom:3px;
	line-height:115%;
	color:#A6A6A6;
}

#login button {
	width:100%;
	height:38px;
	padding:0px 20px 0px 45px;
	font-size:23px;
	line-height:100%;
	font-weight:bold;
	color:#fff;
	background-color: #009dc4;
	border-radius:5px;
	border:0;
	margin:auto;
	box-sizing:border-box; 
}

#send_again_verification	{margin-top:20px;}

#login1 .form-links {
	padding:10px 0 30px 0;
	border-bottom:#b3b3b3 1px dashed;
	margin-bottom:30px;
}
#login1 .link {
	width:45%; height:38px;
	display:block;
	background:#fff;
	color:#005175;
	font-size:23px;
	line-height:36px;
	font-weight:600;
	padding:0px 20px 0px 20px;
	border:#005175 1px solid;
	border-radius:5px;
	text-align:center;
	box-sizing:border-box;
	text-decoration:none;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#login1 .link:nth-of-type(2n+1)	{float:right;}
#login1 .link:nth-of-type(2n+2)	{float:left;}
#login1 .link:hover, #login1 .link:focus {
	background:#009dc4;
	color:#fff;
	text-decoration:none;
}

@media screen and (max-width: 450px) and (min-width: 391px) {
	#login1 .link		{width:47%; padding:0px 12px 0px 12px;}

}

@media screen and (max-width: 390px) {
	#login1 .link		{width:70%; margin:0 auto 12px auto; float:none !important;}

}

#forget_password {position:relative;}

.pass-to-email {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 38px;
	font-weight:600;
	font-size:23px;
	background: #005175;
	color:#fff;
	padding: 0px 20px;
	line-height: 38px;
	border-radius:5px;
	text-decoration:none;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.pass-to-email:hover, .pass-to-email:focus {
	background-color:#009dc4;
	color:#fff;
	text-decoration:none;
}

#verification_code_forget_pass {
	width: calc(100% - 97px) !important;
}
.pass-to-code {
	float: left;
    display: table;
	margin-bottom: 10px;
    width: 92px;
    height: 38px;
	font-weight:600;
	font-size:23px;
	background: #005175;
	color:#fff;
	padding: 0px 20px;
	line-height: 38px;
	border-radius:5px;
	text-decoration:none;
    box-sizing: border-box;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.pass-to-code:hover, .pass-to-code:focus {
	background-color:#009dc4;
	color:#fff;
	text-decoration:none;
}

.contact-link {
    display: table;
	margin: 40px auto 0 auto;
	font-weight:600;
	color:#A6A6A6;
	line-height: 115%;
	text-decoration:none;
}
.contact-link:hover, .contact-link:focus {
	color:#707070;
	text-decoration:underline;
}

/*****************  Register.aspx / Details.aspx / ChangePassword.aspx / CustomerCall.aspx / CasualPayment.aspx / LoginCasualPayment.aspx  *****************/
b.mark {
	position:absolute;
    top: 0px;
    right: -10px;
    line-height: 25px;
}
.red_border {
    border: 1px solid red !important;
}

.form-msg {
	margin-bottom:20px;
	color:#707070;
	font-size:18px;
	line-height:115%;
}

.form-area {
}

.form-area .row {
	margin-bottom:20px;
	position:relative;
}
.form-area .row INPUT.text1,
.form-area .row INPUT.captchaVal,
.form-area .row, SELECT,
.form-area .row TEXTAREA	{width:100%;}
.form-area .captchaVal		{margin-bottom:5px;}

#details1 fieldset .check-row {
	width:100%;
	float:none !important;
	clear:both;
}

.form-area fieldset {
	width:100%;
	background-color:#fff;
	padding:0;
	text-align:right;
	margin-bottom:30px;
	border:0;
	box-sizing:border-box;
}

.form-area legend {
	background-color:transparent;
	font-weight:bold;
	border:0;
	margin:0 0 30px 0;
	padding:0;
}

.form-area .text1, .form-area select	{width:100%;}
.form-area textarea.text1		{width:100%; height:120px;}

.form-area .col-md-offset-2.col-md-10 { /* captcha */
    margin-bottom: 20px;
	padding-top: 40px;
}

.form-area label	{display:table; margin-bottom:3px; line-height:115%;}

/** buttons **/
input.button-home {
	float:right;
}
.right-buttons input.button-home,
.right-buttons input.button-print {
	margin-left: 10px;
}
input.button-pay {
	float:left;
}
input.button-submit {
	float:left;
}

/***** LoginCasualPayment.aspx *****/
@media screen and (min-width: 1041px) {
	#LoginCasualPayment #site-wrap	{padding-right:320px !important;}
	#LoginCasualPayment #header		{padding-top:60px;}
	#LoginCasualPayment #header:after {
		content:"";
		width: 270px;
		background: #fff;
		padding: 250px 0 100px 0;
		position: fixed;
		top: 0;
		right: 0;
		height: 100vw;
		display: block;
		box-sizing: border-box;	
	}
	#LoginCasualPayment #hareshut_logo {
		top:50vh !important;
		margin-top:-100px;
	}
}
#LoginCasualPayment #nav {
	display:none;	
}
#LoginCasualPayment .page-title {
	margin-bottom:40px;
}

#casual1 {
	width: 100%;
    margin-bottom: 50px;
    padding: 30px;
    background: #fff;
    border-radius: 15px;
    box-sizing: border-box;
}
#casual-right {
	float:right;
	width:440px;
	padding-top:10px;
	margin:0 10% 0 12%;
	box-sizing:border-box;
}
#stub_file {
	float:right;
	width:500px;
}

@media screen and (max-width: 1660px) {
	#casual-right	{width:40%; margin:0;}
	#stub_file		{width:50%; max-width:500px; float:left;}
}

#casual1 .row	{}

.CasualPayment .form-area		{margin-bottom:30px;}
.CasualPayment .content-box		{min-height:0;}

#casual-right .buttons		{margin-top:50px;}
#casual-right .button		{margin-bottom:10px;}
#stub_file img				{width:100%; height:auto; display:block;}

@media screen and (max-width: 960px) {
	#casual-right .buttons		{margin-top:30px;}
}

@media screen and (max-width: 740px) {
	#casual-right	{float:none; width:100%; margin-bottom:20px;}
	#stub_file		{float:none; width:100%;}
}

/** the buttons **/
#casual1 .buttons input.button	{width:45%;}

@media screen and (max-width: 1290px) and (min-width: 741px) {
	#casual1 .buttons input.button	{width:100% !important; float:none !important; margin-bottom:10px;}
}

@media screen and (max-width: 420px) {
	#casual1 .buttons input.button	{width:100% !important; float:none !important; margin-bottom:10px;}
}


/***** ChangePassword.aspx *****/
#ChangePassword .page-title	{margin-bottom:40px;}

#password1	{
	width: 100%;
    margin-bottom: 50px;
    padding: 6% 30px 40px 30px;
    background: #fff;
    border-radius: 15px;
    box-sizing: border-box;
}

#password1 form		{width:100%; display:table; margin:0 auto; max-width:1230px;}
#password1 .form-group {
	width: 100%;
	display:flex;
	justify-content:space-between;
}
#password1 .form-msg	{margin:-20px 0 40px 0;}

#password1 .part-1	{width:445px; box-sizing:border-box;}
#password1 .sep		{width:2px; background-color:#bababa;}
#password1 .part-2	{width:445px;}

@media screen and (max-width: 1450px) {
	#password1 .part-1	{width:42%;}
	#password1 .part-2	{width:42%;}
	#password1 .sep		{margin:0 7%;}
}

@media screen and (max-width: 740px) {
	#password1				{padding:50px 30px 20px 30px;}
	#password1 .form-group	{flex-direction:column;}
	#password1 .part-1		{width:100%; margin-bottom:20px;}
	#password1 .part-2		{width:100%;}
	#password1 .sep			{width:100%; height:1px; margin:0 0 40px 0;}
}

#password1 .title-number	{text-align:center; margin-bottom:40px; font-weight:bold;}
#password1 .title-number span	{display:table; width:45px; height:45px; line-height:42px; background-color:#b3b3b3; color:#fff; font-size:25px; margin:0 auto 5px auto; font-weight:bold; text-align:center; border-radius:50%;}

#password1 .row			{}
#password1 HR			{margin-bottom:40px; padding-top:10px;}
#password1.form-area .col-md-offset-2.col-md-10	{padding-top:0;}

/** the buttons **/
#password1 .buttons		{padding-top:30px;}
#password1 .buttons input.button	{width:45%;}

@media screen and (max-width: 1290px) and (min-width: 741px) {
	#password1 .buttons input.button	{width:100% !important; float:none !important; margin-bottom:10px;}
}

@media screen and (max-width: 420px) {
	#password1 .buttons input.button	{width:100% !important; float:none !important; margin-bottom:10px;}
}


/***** Register.aspx *****/
#Register .page-title	{text-align:center; margin-bottom:40px;}
#register	{padding-top:60px;}

#register1	{
	width: 100%;
    margin-bottom: 50px;
    padding: 6% 30px 40px 30px;
    background: #fff;
    border-radius: 15px;
    box-sizing: border-box;
}

#register1 form			{width:100%; display:table; margin:0 auto; max-width:1200px;}
#register1 .form-msg	{margin:-20px 0 30px 0;}
#register1 .form-group	{width: 100%; display:flex; justify-content:space-between;}

#register1 .part-1		{width:445px; box-sizing:border-box;}
#register1 .long-sep	{height:2px; background-color:#bababa; margin-bottom:40px;}
#register1 .sep			{width:2px; background-color:#fff;}
#register1 .part-2		{width:445px;}

#register1 .row			{}

@media screen and (max-width: 1450px) {
	#register1 .part-1	{width:42%;}
	#register1 .part-2	{width:42%;}
	#register1 .sep		{margin:0 7%;}
}

@media screen and (max-width: 740px) {
	#register1				{padding:50px 30px 40px 30px;}
	#register1 .form-group	{flex-direction:column;}
	#register1 .part-1		{width:100%;}
	#register1 .part-2		{width:100%;}
	#register1 .sep			{display:none;}
	#register1 .form-msg	{margin:-10px 0 30px 0;}
}
	
/** the buttons **/
#register1 .buttons		{text-align:center;}
#register1 .buttons input.button	{width:165px; display:inline-block; margin:0 10px; float:none;}


/***** Details.aspx *****/
#Details .page-title	{margin-bottom:15px;}
#details  {}
#details1 {
	width: 100%;
    margin-bottom: 50px;
    padding: 6% 30px 40px 30px;
    background: #fff;
    border-radius: 15px;
    box-sizing: border-box;
}

#details1 form			{width:100%; display:table; margin:0 auto; max-width:1200px;}
#details1 .form-msg		{margin:-20px 0 30px 0;}
#details1 .form-group	{width: 100%; display:flex; justify-content:space-between;}

#details1 .part-1		{width:445px; box-sizing:border-box;}
#details1 .long-sep		{height:2px; background-color:#bababa; margin-bottom:40px;}
#details1 .sep			{width:2px; background-color:#fff;}
#details1 .part-2		{width:445px;}
#details1 .part-3		{width:445px;}

#details1 .row			{}
#details1.form-area .col-md-offset-2.col-md-10	{padding-top:0;}

@media screen and (max-width: 1450px) {
	#details1 .part-1	{width:42%;}
	#details1 .part-2	{width:42%;}
	#details1 .part-3	{width:42%;}
	#details1 .sep		{margin:0 7%;}
}

@media screen and (max-width: 740px) {
	#details1				{padding:50px 30px 40px 30px;}
	#details1 .form-group	{flex-direction:column;}
	#details1 .part-1		{width:100%;}
	#details1 .part-2		{width:100%;}
	#details1 .part-3		{width:100%;}
	#details1 .sep			{display:none;}
	#details1 .form-msg		{margin:-10px 0 30px 0;}
}
	
/** the buttons **/
#details1 .buttons		{align-self: flex-end; margin-bottom:25px;}
#details1 .buttons input.button	{width:45%;}

@media screen and (max-width: 1290px) and (min-width: 741px) {
	#details1 .buttons input.button	{width:100% !important; float:none !important; margin-bottom:10px;}
}

@media screen and (max-width: 740px) {
	#details1 .buttons		{padding-top:40px;}
}

@media screen and (max-width: 420px) {
	#details1 .buttons input.button	{width:100% !important; float:none !important; margin-bottom:10px;}
}


/***** CustomerCall.aspx *****/
#CustomerCall .page-title	{margin-bottom:40px;}

#call1	{
	width: 100%;
    margin-bottom: 50px;
    padding: 6% 30px 40px 30px;
    background: #fff;
    border-radius: 15px;
    box-sizing: border-box;
}

#call1 form		{width:100%; display:table; margin:0 auto; max-width:1230px;}
#call1 .form-group {
	width: 100%;
	display:flex;
	justify-content:space-between;
}
#call1 .form-msg	{margin:-20px 0 40px 0;}

#call1 .part-1	{width:445px; box-sizing:border-box;}
#call1 .sep		{width:2px; background-color:#bababa;}
#call1 .part-2	{width:445px;}

#call1 .row					{}
#call1 .file-msg			{margin-bottom:7px;}
#call1 label.attach-file	{display:inline;}
#call1 #attachFile			{margin-right:7px; opacity:0.6; color:#000;}

@media screen and (max-width: 1450px) {
	#call1 .part-1	{width:42%;}
	#call1 .part-2	{width:42%;}
	#call1 .sep		{margin:0 7%;}
}

@media screen and (max-width: 740px) {
	#call1				{padding:50px 30px 20px 30px;}
	#call1 .form-group	{flex-direction:column;}
	#call1 .part-1		{width:100%; margin-bottom:20px;}
	#call1 .part-2		{width:100%;}
	#call1 .sep			{width:100%; height:1px; margin:0 0 40px 0;}
	#call1 #attachFile	{margin-right:0; width:100%;}
}

/** the buttons **/
#call1 .buttons		{padding-top:30px;}
#call1 .buttons input.button	{width:45%;}

@media screen and (max-width: 1290px) and (min-width: 741px) {
	#call1 .buttons input.button	{width:100% !important; float:none !important; margin-bottom:10px;}
}

@media screen and (max-width: 420px) {
	#call1 .buttons input.button	{width:100% !important; float:none !important; margin-bottom:10px;}
}


/***** ContactUs.aspx *****/
#site-wrap.no-login #contact	{padding-top:60px;}
#ContactUs .page-title	{margin-bottom:40px;}
#site-wrap.no-login #contact .page-title	{text-align:center;}

#contact1	{
	width: 100%;
    margin-bottom: 50px;
    padding: 6% 30px 40px 30px;
    background: #fff;
    border-radius: 15px;
    box-sizing: border-box;
}

#contact1 form		{width:100%; display:table; margin:0 auto; max-width:1230px;}
#contact1 .form-group {
	width: 100%;
	display:flex;
	justify-content:space-between;
}
#contact1 .form-msg	{margin:-20px 0 40px 0;}

#contact1 .part-1	{width:445px; box-sizing:border-box;}
#contact1 .sep		{width:2px; background-color:#bababa;}
#contact1 .part-2	{width:445px;}

@media screen and (max-width: 1450px) {
	#contact1 .part-1	{width:42%;}
	#contact1 .part-2	{width:42%;}
	#contact1 .sep		{margin:0 7%;}
}

@media screen and (max-width: 740px) {
	#contact1				{padding:50px 30px 20px 30px;}
	#contact1 .form-group	{flex-direction:column;}
	#contact1 .part-1		{width:100%; margin-bottom:20px;}
	#contact1 .part-2		{width:100%;}
	#contact1 .sep			{width:100%; height:1px; margin:0 0 40px 0;}
}

#contact1.form-area .col-md-offset-2.col-md-10 {margin-bottom:10px; padding-top:30px;}

/** the buttons **/
#contact1 .buttons		{padding-top:27px;}
#contact1 .buttons input.button	{width:45%;}

@media screen and (max-width: 1290px) and (min-width: 741px) {
	#contact1 .buttons input.button	{width:100% !important; float:none !important; margin-bottom:10px;}
}

@media screen and (max-width: 420px) {
	#contact1 .buttons input.button	{width:100% !important; float:none !important; margin-bottom:10px;}
}


/***** CustomerInquiries.aspx *****/
#customer  {}
#customer1 {}

/** the buttons **/
@media screen and (max-width: 580px) and (min-width: 481px) {
	#customer1 .buttons .right-buttons input.button	{width:180px; float:none !important; display:table; margin:0 0 10px 0 !important;}
}
@media screen and (max-width: 480px) {
	#customer1 .buttons input.button	{width:100% !important; float:none !important; margin:0 0 10px 0 !important;}
	#customer1 .buttons .right-buttons	{width:100% !important; float:none !important;}
}


/***** CasualPayment.aspx *****/
#cp-page {}

#cp-page .form-msg	{font-size:inherit; margin-bottom:40px;}
#cp-page1	{
	width: 100%;
    margin-bottom: 50px;
    padding: 6% 30px 40px 30px;
    background: #fff;
    border-radius: 15px;
    box-sizing: border-box;
}

#cp-page1 form		{width:100%; display:table; margin:0 auto; max-width:1310px;}
#cp-page1 .form-area fieldset	{margin-bottom:50px;}
#cp-page1 .form-area textarea.text1 {height:125px;}

#cp-page1 .form-group {
	width: 100%;
	display:flex;
	justify-content:space-between;
}

#cp-page1 .part-1	{width:580px; box-sizing:border-box;}
#cp-page1 .part-2	{width:680px;}

@media screen and (max-width: 1760px) {
	#cp-page1 .part-1	{width:47%;}
	#cp-page1 .part-2	{width:47%;}
}

@media screen and (max-width: 740px) {
	#cp-page1				{padding:50px 30px 40px 30px;}
	#cp-page1 .form-group	{flex-direction:column;}
	#cp-page1 .part-1		{width:100%;}
	#cp-page1 .part-2		{width:100%;}
}

#cp-page1 div.table {
    width: 100%;
    min-height: 0;
    padding: 25px 0 0 0;
	margin-bottom: 0;
}
#cp-page1 div.table table {
	border-top: #ddd 1px solid;
	padding-top:20px;
	font-size: inherit !important
}

/** the buttons **/
#cp-page1 .buttons		{padding-top:20px;}


/***** PaymentCharges.aspx *****/
#payment1 th.marked-red		{border:#B22222 1px solid; color:#B22222;}
#payment1 td.marked-red		{border:#B22222 1px solid; color:#B22222; border-top:0;}
#payment1 input[type="checkbox"]			{width:20px; height:20px;}
#payment1 input[type="checkbox"]:checked	{outline:#fff 2px solid;}
#payment1 input.amount {
	width:85px; height:38px;
	padding:0 5px;
    font-size: 19px;
    line-height: 36px;
    background-color: #f4f6f8;
    color: #4D4D4D;
    border-radius: 5px;
    border: 0;
	box-sizing:border-box;
}

#paymentPop .property-box	{background-color:#f4f6f8;}

/** the buttons **/
@media screen and (max-width: 560px) {
	#paymentPop .buttons input.button		{width:100% !important; float:none !important; margin:0 0 10px 0 !important;}
	#paymentPop .buttons .right-buttons		{width:100% !important; float:none !important;}
}
@media screen and (max-width: 512px) {
	#payment .buttons input.button		{width:100% !important; float:none !important; margin:0 0 10px 0 !important;}
	#payment .buttons .right-button		{width:100% !important; float:none !important;}
}


/***** Payment.aspx *****/
/** the buttons **/
@media screen and (max-width: 1100px) and (min-width: 481px) {
	#p-page1 .right-buttons input.button	{width:180px; float:none !important; display:table; margin:0 0 10px 0 !important;}
}
@media screen and (max-width: 480px) {
	#p-page1 .buttons input.button		{width:100% !important; float:none !important; margin:0 0 10px 0 !important;}
	#p-page1 .buttons .right-buttons		{width:100% !important; float:none !important;}
}


/***** YearlyAccountStatus.aspx *****/
/** the buttons **/
@media screen and (max-width: 740px) {
	#account1 .buttons input.button	{width:45%;}
}

@media screen and (max-width: 420px) {
	#account1 .buttons input.button	{width:100% !important; float:none !important; margin-bottom:10px;}
}




/*********************************************  Content tables & stuff  **********************************************/
.content-box table caption {
	margin-bottom:6px;
	font-size:18px;
	line-height:115%;
	font-weight:600;
	text-align:right;
}

.property-box {
    padding: 18px 3% 8px 3%;
    position: relative;
    background: #fff;
    border-radius: 15px;
	margin-bottom:35px;
	line-height:115%;
	font-weight:300;
}
.property-box form {
	display:flex;
	justify-content:flex-start;
	align-items: center;
	flex-wrap: wrap;
}
.property-box span {
	display:flex;
	justify-content:flex-start;
	align-items: center;
	margin-bottom:10px;
}
.property-box .button {
	display:table;
	width: 150px;
	align-self: flex-end;
	margin: 0 auto 10px 0;
}
.property-box label {
	white-space: nowrap;
	margin-left: 10px
}
.property-box select {
	width:auto; height:29px;
    border: #e5e5e5 1px solid;
    line-height: 100%;
    padding: 0px 10px 2px 10px;
    background-color: #fff;
}
.property-box span.caption {
	font-weight:bold;
	margin-left:15px;
}
#current_year {
	margin-left:20px;
}
span.prop-block	{
	margin-left:20px;
}
@media screen and (max-width: 620px) {
	.property-box form		{flex-direction:column; align-items:flex-start;}
	.property-box .button	{align-self:flex-start; margin:10px 0 15px 0;}
}

.property-info {
	overflow:hidden;
	margin-bottom:25px;
}
.property-info ul {
	padding:0px; margin:0px;
    display: inline-grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 50px;
    grid-row-gap: 3px;
    overflow: hidden;
}
.property-info ul li {
	font-size:inherit;
	line-height:115%;
	list-style:none;
    position: relative;
    overflow: visible;
}
.property-info ul li:nth-child(3) {
	clear:right;
}
.property-info ul li:before {
	content:"";
    position: absolute;
    top: 0;
    right: -26px;
    width: 1px; height: 55px;
    background-color: #999;
}
.property-info ul li strong {
	font-weight:500;
}
.search-msg {
	margin-bottom:40px;
}

@media screen and (max-width: 1640px) and (min-width: 1041px) {
	.property-info	{margin-top:40px;}
}
@media screen and (max-width: 1260px) and (min-width: 1041px) {
	.property-info ul	{grid-template-columns: auto auto;}
}
@media screen and (max-width: 1040px) {
	.property-info ul	{grid-template-columns: auto auto auto;}
}
@media screen and (max-width: 880px) {
	.property-info ul	{grid-template-columns: auto auto;}
}
@media screen and (max-width: 620px) {
	.property-info ul		{display:block;}
	.property-info ul li	{margin-bottom:5px;}
}


/** ArnonaHistory.aspx **/
@media screen and (min-width: 1201px) {
	#history-ar .property-info ul li	{min-width:192px;}
}
@media screen and (max-width: 768px) {
	#history-ar .property-info ul li	{min-width:0 !important; float:none; margin-left:0px;}
}

/** WaterHistory.aspx **/
#history input.button-home { margin:30px auto 30px auto;}
/*@media screen and (min-width: 1201px) {
	#history-wt .property-info ul li				{min-width:192px;}
	#history-wt .property-info ul li:nth-child(1),
	#history-wt .property-info ul li:nth-child(3)	{min-width:280px;}
}
@media screen and (max-width: 1279px) {
	#history-wt .property-info ul li	{min-width:0 !important; float:none; margin-left:0px;}
}*/

/** WaterHistory.aspx - popup **/
@media screen and (min-width: 821px) {
	#water .property-info ul li:nth-child(1),
	#water .property-info ul li:nth-child(3)	{min-width:280px;}
}
@media screen and (max-width: 768px) {
	#water .property-info ul li			{min-width:0 !important; float:none; margin-left:0px;}
}

/** PaymentCharges.aspx - popup **/
@media screen and (min-width: 661px) {
	#payment1Pop .property-info ul li:nth-child(1),
	#payment1Pop .property-info ul li:nth-child(3)	{min-width:280px;}
}
@media screen and (max-width: 541px) {
	#payment1Pop .property-info ul li			{min-width:0 !important; float:none; margin-left:0px;}
}


/**************************************************/
.no-wrap	{white-space:nowrap;}

div.table {
	width:100%;
	min-height: 500px;
	display: flex;
    flex-direction: column;
    justify-content: flex-start;
	position:relative;
	margin-bottom:50px;
	padding:30px 30px 40px 3%;
	background: #fff;
	border-radius:15px;
	box-sizing:border-box;
}
div.table table {
	width:100%;
	position:relative;
	margin-bottom:20px;
	box-sizing:border-box;
	-webkit-overflow-scrolling:touch;
	border-spacing:0;
	font-size:21px;
}
@media screen and (max-width: 1840px) {
	div.table table	{font-size:17px;}
}

div.table table th {
	padding:15px 5px 25px 5px;
	line-height:110%;
	font-weight:500;
	border-bottom:#ddd 1px solid;
}
#history-wt .content-box div.table table tr:hover td,
#payment1 .content-box div.table table tr:hover td {
	background-color:rgba(0,0,0,0.1);
	cursor:pointer;
}
div.table table td {
	padding:15px 5px 15px 5px;
	font-weight:300;
	border-bottom:#ddd 1px solid;
	line-height:115%;
}
 div.table > p {
	margin-bottom:20px;
}

div.table .buttons {
	align-self: flex-end;
}
 
div.table-long {
	width:100%;
}
div.table-scroll {
	width:100%;
	overflow-x:auto;
	margin-bottom: 15px;
}
div.table-long table {
	width:100%;
}
div.table-long table th {
	padding:15px 10px 25px 10px;
}
.table-scroll-icon {
	display:none;
	width:100%;
	text-align:center;
	position:absolute;
	left:0; top:180px;
	cursor: pointer;
	z-index:11111;
}
.table-scroll-icon .fa-arrows-h {
	margin:auto;
	font-size:15px;
	font-size:80px;
	padding:0px 40px 0px 40px;
	border-radius:20px; color:#fff;
	/*background:rgba(0,0,0,0.3);*/
	background:#157ce9;
	text-shadow:1px 1px 1px #000;
	box-shadow:4px 4px 10px rgba(0,0,0,0.4);
}
.table-scroll-icon:after {
	display:table;
	content:"גלול";
	text-align:center;
	padding:4px 12px 4px 12px;
	/*background-color:#234466;*/
	color:#fff;
	font-weight:bold;
	font-size:15px; line-height:15px;
	border-radius:15px;
	/*margin:-90px auto 0px auto;*/
	margin:-76px auto 0px auto;
}

@media screen and (max-width: 1279px) {
	.table-scroll-icon	{display:block;}
	#water .table2 .table-scroll .table-scroll-icon	{display:none;}
}
@media screen and (max-width: 510px) {
	#water .table2 .table-scroll .table-scroll-icon	{display:block;}
}


/** pageNaver **/
#page-naver {
    display: flex;
    justify-content: center;
}
.pageNaver {
    display: flex;
    justify-content: center;
}
.pageNaver span {
    display: flex;
    justify-content: center;
}
.pageNaver span > * {
    display: flex;
    justify-content: center;
}


/*********************************************  Popups  **********************************************/
.popup	{direction:rtl;}
.popup .property-info ul	{grid-template-columns:auto auto;}
.popup .property-info ul li:before	{display:none;}

.popup div.table		{min-height:20px; font-size:17px; padding:0; border-radius:0;}
.popup div.table table	{min-height:20px;}
 @media screen and (max-width: 1840px) {
	.popup div.table table	{font-size:17px;}
}
#payment1Pop table caption,
#water1 table caption {
	margin-bottom:15px;
	font-size:21px;
	line-height:115%;
	font-weight:500;
	color: #005175;
	text-align:right;
}
.popup div.table th		{padding-top:9px; padding-bottom:9px; background-color:#005175; color:#fff;}
.popup div.table td		{padding-top:9px; padding-bottom:9px;}
.popup div.table td		{padding-top:9px; padding-bottom:9px;}
.popup input.button-home	{margin-left:15px;}

.graphs {
	margin-bottom:20px;
}
.graphs > div {
	direction:ltr;
}
 #chart1		{border:cyan 5px solid;}
 #chart2		{border:blue 5px solid;}
 #chart3		{width:45%; height:220px; float:left;}
 #chart4		{width:45%; height:220px; float:right;}
 #chart5		{border:green 5px solid;}
 #chart6		{border:lightgreen 1px solid;}
 #chart7		{width:433px; height:250px; float:left;}
 #chart8		{width:433px; height:250px; float:right;}
 #chart9		{border:cyan 5px solid;}
 
 @media screen and (max-width: 990px) {
	 #chart3, #chart4		{width:360px; height:200px; float:none; margin:0px auto 30px auto;}
	 #chart7, #chart8		{width:360px; height:200px;}
}
 
 @media screen and (max-width: 860px) {
	 #chart3, #chart4		{width:420px; max-width:90%; height:220px; float:none; margin:0px auto 30px auto;}
}
 @media screen and (max-width: 860px) { /* must be number not % */
	 #chart7, #chart8		{width:420px; height:220px; float:none; margin:0px auto 30px auto;}
}
 @media screen and (max-width: 460px) {
	 #chart7, #chart8		{width:384px;}
}
 @media screen and (max-width: 420px) {
	 #chart7, #chart8		{width:344px;}
}
 @media screen and (max-width: 380px) {
	 #chart7, #chart8		{width:304px;}
}
 @media screen and (max-width: 340px) {
	 #chart7, #chart8		{width:264px;}
}

 #popupShadow, #popupShadow1 {
	background: none repeat scroll 0 0 #005175;
	display: none;
	height: 100vh;
	opacity: 0.5;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99997;
}
#popupWrapper, #popupWrapper1 {
	display: none;
	height: 0;
	width:100%;
	overflow: visible;
	position: absolute;
	z-index: 99998;
}
#popupContent, #popupContent1 {
	background-color:#fff;
	direction:rtl;
	text-align:right;
	padding:40px 30px 40px 30px;
	width: 95%;
	max-width:1140px;
	margin:auto;
	box-sizing:border-box;
}
 @media screen and (max-width: 480px) {
	 #popupContent, #popupContent1	{padding:40px 10px 30px 10px;;}
}

#popupContent h2, #popupContent1 h2 {
	display:table;
	margin-bottom:15px;
	font-size:24px;
	line-height:115%;
	font-weight:bold;
}

#water {
}

.pop-arrow {
	font-size:18px;
	line-height:100%;
	cursor:pointer;
	margin-bottom:10px;
}
.pop-arrow {
	font-size:18px;
	line-height:100%;
}
.pop-arrow.arrow-prev {float:right;}
.pop-arrow.arrow-next {float:left;}
.pop-arrow span {
	display:inline-block;
	vertical-align:top;
}
.pop-arrow.arrow-prev span {padding:24px 12px 0px 0px;}
.pop-arrow.arrow-next span {text-align:left; padding:24px 0px 0px 12px;}
.pop-arrow .fa {
	font-size:60px;
}
@media screen and (max-width: 420px) {
	.pop-arrow span {width:95px; padding-top:14px !important;}
}

div.space {
	flex-grow: 1;
    border-bottom: #ddd 1px solid;
	margin-bottom: 30px;
	min-height: 60px;
}
p.total {
	text-align:left;
	align-self: flex-end;
    width: 100%;
	margin-top: -15px
}
p.total strong {
	font-weight: 500;
}
p.total span {
	display: block;
	color: #005175;
}
.button-back {
	float:left;
}
input.button-pay {
	float:left;
}

.close-pop {
	float:left;
	position:relative;
}
.close-pop a	{text-decoration:none; color:#4D4D4D; font-size:17px;}
.close-pop span	{display:table; padding-left:28px; text-align:left; line-height:25px;}
.iconx			{position:absolute; top:0px; left:0px;}
.iconx:before {
	content:"";
	width:25px; height:25px;
	display:block;
	font:normal normal normal 22px/1 FontAwesome !important;
	background:url('../images/close-x.jpg');
}

/***** tables in WaterHistory.aspx *****/ 
#payment1Pop div.table-long table, #water div.table-long table {
	width:1080px;
}
#water div.table2 div.table-long table {
	width:605px;
}
.table1, .table2 {
	width:100%; max-width:605px;
	float:right;
	margin-bottom:20px;
}
.table3 {
	width:220px;
	float:right;
	margin-right:90px;
	margin-bottom:20px;
}
.table4 {
	width:100%; max-width:605px;
	margin-bottom:40px;
}

 @media screen and (max-width: 1050px) {
	.table3 {margin-right:30px;}
}
 
 @media screen and (max-width: 980px) {
	.table2		{float:none;}
	.table3		{float:none; margin-right:0px; margin-top:-30px;}
}


/** 404.aspx**/
#error-404	{padding-top:40px;}
#error-404 strong	{font-size:80px; line-height:100px;}


/*********************************************  Hp Icons  **********************************************/
@media screen and (min-width: 1041px) {
	#home-page #hareshut_logo	{position:static; margin:0 50px 30px auto;}
	#home-page .logout	{margin-bottom:-80px;}
}

#icons {
    max-width: 1300px;
    display: table;
    margin: 0 auto;
	padding-top:40px;
}
#icons ul {
	margin:0px -20px 0px -20px;
	padding:0;
	font-size:0;
	text-align:center;
}
#icons ul li {
	width:288px;
	height:282px;
	display:inline-block;
	vertical-align:top;
	margin:0 20px 40px 20px;
	list-style:none;
}
#icons ul li a {
	width:100%;
	height:100%;
	display:table;
	color:#4d4d4d;
	padding:60px 45px 0px 45px;
	font-size:28px;
	line-height:115%;
	font-weight:600;
	text-align:center;
	text-decoration:none;
	background: url("../images/white-squre.png") no-repeat center top / 100%;
	box-sizing: border-box;
}
#icons ul li span {
	display:flex;
	flex-direction:column;
	justify-content:center;
	height:80px;
	margin-bottom:30px;
}
#icons ul li a img {
	display:block;
	margin:0px auto;
	filter: grayscale(100%);
}
/*#icons ul li span {
	display:table;
	width:159px;
	height:159px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:121px;
	margin:0px auto 10px auto;
	border-radius:50%;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#icons #pay span		{background-color:#b0ce86; background-image:url('../images/icon-pay-w.png');}
#icons #data span		{background-color:#8991c0; background-image:url('../images/icon-data-w.png');}
#icons #arnona span		{background-color:#81d4f6; background-image:url('../images/icon-arnona-w.png');}
#icons #bill span		{background-color:#77c88d; background-image:url('../images/icon-bill-w.png');}
#icons #graph span		{background-color:#65cdd8; background-image:url('../images/icon-graph-w.png');}
#icons #client span		{background-color:#65cdd8; background-image:url('../images/icon-client-w.png');}
#icons #folder span		{background-color:#77c88d; background-image:url('../images/icon-folder-w.png');}
#icons #pencil span		{background-color:#8991c0; background-image:url('../images/icon-pencil-w.png');}
#icons #password span	{background-color:#b0ce86; background-image:url('../images/icon-password-w.png');}
#icons #form span		{background-color:#81d4f6; background-image:url('../images/icon-form-w.png');}*/

#icons ul li a:hover,
#icons ul li a:active,
#icons ul li a:focus {
	color:#005175;
	text-decoration:none;
	background-position:center bottom; 
}
/*#icons ul li a:hover span,
#icons ul li a:active span,
#icons ul li a:focus span {
	background-color:transparent !important;
	background-size:101px;
	box-shadow:inset 0 0 60px #fff;
}*/
#icons ul li a:hover img,
#icons ul li a:active img,
#icons ul li a:focus img {
	filter: none;
}


@media screen and (max-width: 1360px) and (min-width: 1221px) {
	#icons				{padding-top:30px;}
	#icons ul			{margin:0px -15px 0px -15px;}
	#icons ul li		{width:260px; height:255px; margin:0 15px 30px 15px;}
	#icons ul li a		{padding:50px 40px 0px 40px; font-size:26px; background: url("../images/white-squre.png") no-repeat center top / 100%;}
	#icons ul li a span	{margin-bottom:20px;}
}

@media screen and (max-width: 1220px) and (min-width: 561px) {
	#icons ul			{margin:0px -15px 0px -15px;}
	#icons ul li		{width:240px; height:235px; margin:0 15px 30px 15px;}
	#icons ul li a		{padding:45px 35px 0px 35px; font-size:24px; background: url("../images/white-squre.png") no-repeat center top / 100%;}
	#icons ul li a span	{margin-bottom:20px;}
}

@media screen and (max-width: 560px) and (min-width: 471px) { /* 2 */
	#icons				{padding-top:10px;}
	#icons ul			{margin:0px -10px 0px -10px;}
	#icons ul li		{width:220px; height:215px; margin:0 5px 10px 5px;}
	#icons ul li a		{padding:40px 35px 0px 35px; font-size:21px; background: url("../images/white-squre.png") no-repeat center top / 100%;}
	#icons ul li a span	{margin-bottom:15px;}
}

@media screen and (max-width: 470px) { /* 1 */
	#icons ul			{margin:0px -15px 0px -15px;}
	#icons ul li		{width:260px; height:255px; margin:0 15px 20px 15px;}
	#icons ul li a		{padding:50px 40px 0px 40px; font-size:26px; background: url("../images/white-squre.png") no-repeat center top / 100%;}
	#icons ul li a span	{margin-bottom:20px;}
}

/*******************************************************/
.loading {
	width: 100vw;
	height: 100vh;
	top: 0px;
	left: 0px;
	position: fixed;
	display: block;
	opacity: 0.8;
	/*background-color: #fff;*/
	background: #fff url(../images/slider_loading.gif) no-repeat center center;
	z-index: 99;
	text-align: center;
}

/*Modal Popup*/
.modalBackground {
	background-color:Gray;
	filter:alpha(opacity=70);
	opacity:0.7;
}

.modalPopup {
	background-color:#ffffdd;
	border-width:3px;
	border-style:solid;
	border-color:Gray;
	padding:3px;
	text-align:center;
}
.hidden {display:none}


 
 
 
 
 
 