/* global colour variables */
:root {
  --colour: #a8ad00;
  --colourdarken: #767a00;
  --secondary: #d6d9da;
  --light: #f0f2f5;
}

/* typography */
/*
@font-face {
  font-family: 'Montserrat-Bold';
  font-style: normal;
  font-weight: 700;
  src: 	local('Montserrat-Bold'),
		url('montserrat-bold.woff2') format('woff2'),
       	url('montserrat-bold.woff') format('woff');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: 	local('Montserrat'),
		url('montserrat-regular.woff2') format('woff2'),
       	url('montserrat-regular.woff') format('woff');
}*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');
body, th, td, p, div, span, input, button, select, textarea, form, b, strong, i, u, h5, h6, dl, dd, dt, ul, li, ol, option, optgroup, a {
	font-family: "Montserrat", Arial, sans-serif!important;
	font-size: 1em;
	font-weight: 400 !important;
}

h1, h2, h3, h4, strong, #title_james {
	font-family: Montserrat, Arial, sans-serif!important;
	font-weight: 700 !important;
}


/* global containers styling */
body {
	background-image: url("bg.png");
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
	min-height: 100vh;
	font-size: 14px;
}
p {
	line-height: 1.5;
}
#head {
	background-image: url("payments-banner-green.png");
	background-size: contain;
	background-color: transparent;
	background-position: top;
	border-bottom: none;
}
#head a, #head h2, #head h3 {
	display: none;
}

#disclaimer {
	font-size: 1.1em;
}


/* buttons bonanza */
.Btn2 {
	background-color: white;
	border: 2px solid #d6d9da;
	font-size: 14px;
	color: #333f48;
	padding: 5px 10px;
	background-image: none;
	border-radius: 3px;
	margin-top: 5px;
  	margin-right: 15px;
  	margin-bottom: 0;
}
.Btn2:hover,
.Btn2:focus,
.Btn2Hov {
	background-color: #fff;
	background-image: none;
	padding: 5px 10px;
	border: 2px solid #dcde99;
	border-radius: 3px;
	font-size: 14px;
	margin-top: 5px;
  	margin-right: 15px;
  	margin-bottom: 0;
}

.Btn1,
.ips_continue,
#HWMInvoiceSection .Btn2 {
	background-color: var(--colour);
	border: 2px solid var(--colour);
	font-size: 16px;
	color: #000;
	padding: 10px 20px;
	background-image: none;
	border-radius: 3px;
	float: right;
	cursor: pointer;
}
.Btn1:hover,
.Btn1:focus, 
.Btn1Hov,
#HWMInvoiceSection .Btn2:hover,
#HWMInvoiceSection .Btn2:focus,
.ips_continue:hover,
.ips_continue:focus {
	background-color: #fff;
	background-image: none;
	color: #767900;
	padding: 10px 20px;
	border: 2px solid #cbce66;
	border-radius: 3px;
	font-size: 16px;
	float: right;
}
#HWMInvoiceSection .Btn2:hover,
#HWMInvoiceSection .Btn2:focus {
	float: none;
}

input[name="form1:hwuPayInvoices"],
input[name="form1:hwmPayInvoices"]{
	background-color: var(--colour);
	border: 2px solid var(--colour);
	font-size: 16px;
	color: #000;
	padding: 10px 20px;
	background-image: none;
	border-radius: 3px;
	cursor: not-allowed;
}
input[name="form1:hwuPayInvoices"]:hover,
input[name="form1:hwuPayInvoices"]:focus,
input[name="form1:hwmPayInvoices"]:hover,
input[name="form1:hwmPayInvoices"]:focus {
	background-color: white;  border: 2px solid var(--colour);
	font-size: 16px;
	color: #000;
	padding: 10px 20px;
	background-image: none;
	border-radius: 3px;
	cursor: pointer;
}
input[name="form1:hwmPayInvoices"].Btn2Hov {
	float: right;
}
input[name="form1:hwuPayInvoices"]:disabled,
input[name="form1:hwmPayInvoices"]:disabled,
#HWMInvoiceSection .Btn2DisBtn2DisBtn2Dis,
#HWMInvoiceSection .Btn2:disabled,
#HWMInvoiceSection .Btn2Hov:disabled{
	background-color: var(--secondary);
	border: 2px solid var(--secondary);
	font-size: 16px;
	color: #000;
	padding: 10px 20px;
	background-image: none;
	border-radius: 3px;
	cursor: not-allowed;
}

.ips_content input[name="form1:back"] {
	position: relative;
	z-index: 3;
}


.t_continue {
	background-color: transparent;
}
.t_continue .msg_left {
	display: none;
}



#disclaimer, #bottom {
	background-color: transparent;
}

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

.RbSpn input {
  vertical-align: 7px;
}

.TxtFld,
input[type=text] {
	padding: 5px 10px;
	border: 2px solid var(--secondary);
	border-radius: 3px;
}
.TxtFld:focus {
	border: 2px solid #333f48;
}

select {
	border: 2px solid var(--colour)!important;
	padding: 5px 10px;
	background-color: white;
	border-radius: 3px;
}


input[type=text]{
	color: black;
}
input[type=text]:disabled{
	background-color: var(--light);
	color: #6A6A6C;
	cursor: not-allowed;
}



/* add new person box, shared with other elements on different templates so commented out until a unique class is available */
/* .ConFldSet {
	padding: 20px 40px;
	background-color: #f0f2f5;
}*/

/*@media (prefers-color-scheme: darkREMOVE) {

  html {
    --hw-dark: #333f48;
    --hw-light: #ebeced;
    --hw-link: #4DBAE8;
  }
  
  body {
    line-height: 1.7;
    font-weight: 300;
  }
  
  body {
    background-color: #29323A !important;
	background-image: url("bg-dark.png");
  }
  #disclaimer {
    background-color: #2E3941;
  }
  #content, body, label, #disclaimer #bottom, p.msg {
    color: #eee !important;
  }
  #wrapper,#content {
    background-color: var(--hw-dark);
  }
  img, #head {
    filter:brightness(0.7) contrast(1.3);
  }
  a {
    color: #4DBAE8 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
    
  }
  a:hover, a:focus {
    color: white !important;
  }
  a:hover {
    text-decoration-thickness: 2px !important;
  }
  a:focus {
    outline: 3px solid var(--hw-link);
    outline-offset: 2px;
    text-decoration: none !important;
  }

  .t_continue {
    background-color: transparent;
    color: var(--hw-light) !important;
  }
  
  #updcard a {
    font-weight: 600;
  }
  
  .Btn1, 
  .Btn1Hov,
  .Btn2,
  .Btn2Hov {
    background-image: none !important;
    padding: 10px;
    border:2px solid transparent;
    text-transform: uppercase;
  }
  
  
  .Btn1 {
    background: #ebeced !important;
  }

  .Btn2 {
  	background: #5c656d; 
  	color: white;
  }
  
  .Btn1:hover,
  .Btn1:focus,
  .Btn1Hov,
  .Btn2:hover,
  .Btn2:focus,
  .Btn2Hov {
    background: transparent;
    padding: 10px;
    color: var(--hw-light);
    border: 2px solid var(--hw-light);
  }
}*/

/* login form */
.LblLev2Txt {
  margin-top: 7px;
  display: inline-block;
}

.buttonholder {
	margin-top: 40px;
	clear: both;
}



table.table_payment,
.rounded {
	border: none;
}


.cat_header {
  background: none;
  height: auto;
  position: static;
}
.cat_header h3 {
  float: none;
  background: none;
  font-size: 18px;
}

/* login error */
.login_error {
	display: block;
	padding: 10px;
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}
.login_error.hidden {
	display: none;
}



.RbGrp input[type=radio],
#tandc input[type=checkbox] {
	display: none;
}
.RbGrp input:checked + label, 
.RbGrp label:focus, 
.RbGrp label:hover, 
.RbGrp label:active,
#tandc input:checked + label, 
#tandc label:focus, 
#tandc label:hover, 
#tandc label:active {
	color: var(--colourdarken);
}
.RbGrp input:checked + label:before, 
.RbGrp label:focus:before, 
.RbGrp label:hover:before, 
.RbGrp label:active:before,
#tandc input:checked + label:before, 
#tandc label:focus:before, 
#tandc label:hover:before, 
#tandc label:active:before {
	background: white;
	border-color: var(--colour);
}

.RbGrp label,
#tandc label {
	font-size: 1.1em;
	line-height: 1;
	cursor: pointer;
	display: block;
	padding: 1.2em 1em 1em 3em;
	position: relative;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	background: white;
	whitespace: no-wrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: all 0.15s ease;
}
.RbGrp label:first-of-type,
#tandc label:first-of-type {
	border: 0;
}
.RbGrp label:before,
#tandc label:before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 1rem;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 0.2rem solid #ccc;
}#tandc label:before {
	border-radius: 3px;
}
.RbGrp input:checked + label:before,
#tandc input:checked + label:before {
	border-color: white;
	border: 0.2rem solid var(--colour);
	background: var(--colour);
}
.RbGrp input:disabled + label,
#tandc input:disabled + label {
	background: #efefef;
	color: rgba(0, 0, 0, 0.5);
	cursor: not-allowed;
}
.RbGrp input:disabled + label:hover,
#tandc input:disabled + label:hover {
	border-color: rgba(0, 0, 0, 0.1);
}
.RbGrp input:disabled + label:before,
#tandc input:disabled + label:before {
	border-color: white;
	background: white;
}


.pperm_content .ConFldSet {
	background-color: rgb(240, 242, 245);
	padding: 1em;
	border-radius: 10px;
}

.unselall {float: right;}


#paytype {
	background-color: rgba(255, 255, 255, .99);
	background-color: white;
	top: 215px;
	height: 69%;
	z-index: 2;
}
#paytype h2 {
	font-size: 2em;
}

input.cardpay,
input.bankpay {
	border-color: var(--colour);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;
	width: 200px;
	height: auto;
	padding: 40px 20px 100px 20px;
}
input.cardpay,
input.cardpay:hover,
input.cardpay:focus {
	background-image: url("by-card.gif");
}
input.bankpay,
input.bankpay:hover,
input.bankpay:focus {
	background-image: url("by-bank-transfer.png");
}



.pperm_content input.button.Btn2[value="View and Pay Invoices >>"],
.pperm_content input.button.Btn2Hov[value="View and Pay Invoices >>"] {
	float: right;
	margin-bottom: 30px;
}
.pperm_content .normal {clear: both;}