article{
/* width: 765px !important; */
width: 100% !important;
margin: auto;
font-size: 14px !important;
}
#bc_content h2 {
font-size: 18px;
font-weight: 700;
line-height: 19px;
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
#bc_content h3 {
display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
#bc_content p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
#toronto_content h2 {
font-size: 24px;
color: #222;
padding: 5px;
border-bottom: 1px solid #dadada;
font-weight: 400;
margin: 0;
}
#toronto_content p {
line-height: 1.5em;
color: #414141;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin: 0;
}
#national_content .PageHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
color: #666666;
}
#national_content p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
line-height: 1.1em;
font-size: 15px;
}
#national_content h2 {
font-size: 24px;
color: #222;
padding: 5px;
border-bottom: 1px solid #dadada;
font-weight: 400;
margin: 0;
}
body{
font-family: Verdana, sans-serif;
}
/*Hide Wordpress Title*/
h1.wp-block-post-title {
display: none;
}
/*General*/
button,
fieldset,
input,
legend,
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
padding: 0;
margin: 0;
box-sizing: border-box;
}
input,
select,
textarea {
border: 2px solid #333;
background-color: white;
border-radius: 0.25rem;
}
input[type="number"],
input[type="text"],
input[type="email"],
select,
textarea {
font: 1rem  sans-serif;
display: block;
box-sizing: border-box;
width: 100%;
padding: 0.5rem 0.75rem;
}
.btn {
display: inline-block;
font-family: "chivo", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight: 700;
color: #ffffff !important;
font-size: 150%;
white-space: break-spaces;
background: #da3838;
text-align: center;
margin: 0 0 0.5rem 0;
padding: 0.4rem 1.5rem;
padding-bottom: 0.45rem;
border-radius: 0.4rem;
border: 2px solid transparent;
vertical-align: middle;
text-shadow: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
width: 250px;
margin: 15px auto;
line-height: 1;
}
.btn:hover {
background: #ffffff;
color: #da3838 !important;
border-color: #da3838;
cursor: pointer;
}
div#merchant-header {
transform: translateX(30%);
}
div#merchant-logo {
margin: 0;
padding: 0;
text-align: center;
}
.load-panel.static-header {
background: #fff;
}
.hide {
display: none !important;
}
/*Payment Container*/
#paymentWrapper {
box-sizing: border-box;
padding: 1rem;
border-radius: 1rem;
background-color: hsl(0, 0%, 100%);
border: 4px solid hsl(0, 0%, 90%);
display: grid;
/* grid-template-columns: 1fr; */
grid-template-columns: minmax(10vw, 1fr);
gap: 2rem;
padding-top: 15px;
padding-bottom: 0;
/* width: 50%;
margin: 25px auto; */
/* width: 50vw; */
/* margin: 25px auto; */
/* position: absolute; */
/* align-items: center;
justify-items: center;
justify-content: center;
align-content: center; */
width: 80%;
margin: auto;
/* height: 360px; */
height: 100%;
}
.paymentForm {
display: flex;
align-items: center;
}
.paymentForm label {
width: 100%;
}
.paymentForm small {
display: none;
}
#paymentWrapper form {
display: flex;
flex-direction: column;
gap: .1rem;
}
#paymentWrapper form error {
/* display: none; */
}
/*Payment Container Header*/
#paymentWrapper form header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 25px;
/* display: none; */
}
#paymentWrapper form header img {
width: 40%;
}
#paymentWrapper form header h1 {
font-size: 1rem;
text-align: center;
}
/*Payment Form Labels*/
#paymentWrapper form label {
font-size: 1rem;
font-weight: 900;
}
#paymentWrapper form label span {
font-size: 1rem;
font-weight: 100;
}
/*Payment Section*/
#paymentWrapper section {
/* height: 100vh !important; */
margin: 50px 0;
}
#paymentWrapper section header {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem
}
#paymentWrapper section header * {
margin: 0;
padding: 0;
text-align: center;
/* background-color: #fff; */
}
#paymentWrapper section header img {
width: 70%;
}
#paymentWrapper section header h1 {
font-size: 2rem;
}
#paymentWrapper section header a {
margin: 0 0 0.5rem 0;
padding: 0.4rem 1.5rem;
padding-bottom: 0.45rem;
}
/*Payment Container*/
.paymentContainer {
display: block;
position: relative;
max-width: 100%;
/* height: 100vh; */
/* height: 1212px; */
margin: auto;
text-align: center;
box-sizing: border-box;
padding: 0rem;
/* overflow: hidden; */
}
#payment {
/* display: none !important; */
/* position: relative !important; */
margin-bottom: 20px;
z-index: 99999;
}
div#payment:not(.toggleRelative) {
width: 1500px !important;
margin-left: -50px !important;
}
body.payment #payment {
height: 1135px !important;
}
error {
padding: 20px;
border-radius: 15px;
color: #000;
}
.info-msg {
/* color: #059; */
border: 1px solid #000;
background-color: #BEF;
}
.success-msg {
/* color: #270; */
border: 1px solid #000;
background-color: #DFF2BF;
}
.warning-msg {
/* color: #9F6000; */
border: 1px solid #000;
background-color: #FEEFB3;
}
.error-msg {
/* color: #D8000C; */
border: 1px solid #000;
background-color: #FFBABA;
}
.toggleRelative{
position: relative !important;
}
.membershipFormButtons{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 25px;
}
.membershipFormButtons .btn{
width: 45%;;
}
div#payment:not(.toggleRelative) iframe#payment-Frame {
width: 1000px !important;
margin-top: 125px;
height: 100vh !important;
float: left;
}
.memberInfo{
display: flex;
flex-direction: column;
/* align-items: flex-start; */
width: 500px;
background-color: #ccc;
border: 2px solid;
/* border-bottom: 0; */
}
.memberInfo h3{
width: 25%;
text-align: left !important;
/* font-weight: 900; */
/* font-size: 1rem; */
}
.memberInfo * {font-family: Verdana, sans-serif !important;font-size: 12px;margin: 0;}
.memberInfo .memberName ,
.memberInfo .memberID *{
/* font-size: 1rem; */
}
.memberInfo .paymentInfo,
.memberInfo .memberName,
.memberInfo .memberID,
.memberInfo .memberBranch,
.memberInfo .paymentErrorMessage{
display: flex;
align-items: center; 
width: 100%;
gap: 15px;
/*justify-content: space-between;*/
justify-content: flex-start;
/* border-bottom: 2px solid; */
}
.memberInfo .paymentInfo,
.memberInfo .memberName,
.memberInfo .memberID{
}
.memberInfo .memberName,
.memberInfo .memberID,
.memberInfo .memberBranch,
.memberInfo .paymentErrorMessage {
border-bottom: 2px solid;
}
.memberMsg{
width: 85%;
display: flex;
/* align-items: flex-start; */
align-items: center;
flex-direction: column;
}
.memberMsg *{
text-align: left !important;
padding: 0 !important;
margin: 0;
}
#paymentWrapper section header span {
font-weight: 900;
text-decoration: underline;
font-size: 1rem;
}
.paymentErrorMessage{
background: #fff;
text-align: left !important;
line-height: 1.5;
padding: 10px !important;
flex-direction: column;
}
.paymentErrorMessage p:nth-of-type(1){
font-size: 2.0rem;    
font-weight: 900;
}
.paymentErrorMessage p {
width: 80%;
margin: auto !important;
font-size: 1rem;
}
.paymentErrorMessage p a {
padding: 0 !important;
}
.paymentMessage{
}
.paymentMessage h2.error-amex {
border-radius: 15px;
font-size: 1.5rem;
color: #000;
border: 5px solid #000;
padding: 1rem !important;
}
body.toronto #paymentDone {
background-color: #006eb5;
}
body.toronto #paymentDone:hover{
background-color: #fff;
color: #006eb5 !important;
border-color: #006eb5;
}
body.bc #paymentDone {
background-color: #F3A517;
}
body.bc #paymentDone:hover{
background-color: #fff;
color: #f3a517 !important;
border-color: #f3a517;
}
body.toronto #installmentContainer button.btn {
background: #006eb5;
}
body.toronto #installmentContainer button.btn:hover {
background-color: #fff;
color: #006eb5 !important;
border-color: #006eb5;
}
#paymentInfoResult,
body.national #paymentInfoResult {
background-color: #da3838;
color: #fff;
border-color: #fff;
}
body.national #paymentInfoResult *{
background-color: #da3838 !important;
}
body.toronto #paymentInfoResult {
background-color: #006eb5;
color: #fff;
border-color: #fff;
}
body.toronto #paymentInfoResult * {
background-color: #006eb5 !important;
}
body.bc #paymentInfoResult {
background-color: #F3A517;
color: #fff;
border-color: #fff;
}
body.bc #paymentInfoResult *{
background-color: #F3A517 !important;
}
body.national .paymentMessage h2 {
background-color: #da3838 !important;
}
body.toronto .paymentMessage h2 {
background-color: #006eb5 !important;
}
body.bc .paymentMessage h2 {
background-color: #F3A517 !important;
}
body.national #paymentInfoResult h3,
body.toronto #paymentInfoResult h3,
body.bc #paymentInfoResult h3 {
border-color: #fff;
}
body.national .paymentInfoContainer .paymentInfo > h3,
body.national .memberInfo > * > h3 {
border-color: #da3838;
}
body.toronto .paymentInfoContainer .paymentInfo > h3,
body.toronto .memberInfo > * > h3 {
border-color: #006eb5;
}
body.bc .paymentInfoContainer .paymentInfo > h3,
body.bc .memberInfo > * > h3 {
border-color: #F3A517;
}
.ppaymentHide {
border-top: 5px solid;
padding-top: 25px;
align-items: center;
width: 100%;
}
.paymentMessage h2{
border-top: 5px solid #000;
border-bottom: 5px solid #000;
background-color: #006eb5;
color: #fff;
text-transform: uppercase;
font-weight: 900;
}
.paymentInfo{
/* display: none !important; */
background-color: #fff;
}
.showInfo{
display: block !important;
}
.displayMessage.printInfo img {
display: none;
}
.displayMessage.printInfo h1 {
text-align: center;
}
/*UBCP member selection*/
.membershipContainer > div:nth-of-type(1) {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0;
grid-row-gap: 0;
}
.membershipContainer > div:nth-of-type(1) button {
grid-area: 2/2/2/3;
/* height: 50%; */
margin: auto;
margin-left: 15px;
}
.membershipContainer > div {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(1, 1fr);
grid-column-gap: 0;
grid-row-gap: 0;
}
.membershipContainer div div:nth-of-type(1) {
grid-area: 1/1/1/1;
width: 100%;
}
.membershipContainer div div:nth-of-type(2) {
grid-area: 2/1/2/1;
margin: auto 0;
font-size: 1.2rem;
font-weight: 900;
}
.membershipContainer div div:nth-of-type(3) {
grid-area: 3/1/3/1;
width: 100%;
}
.membershipContainer div button {
grid-area: 1/2/3/2;
height: 100%;
margin: auto;
margin-left: 15px;
}
.membershipButtonContainer {
display: flex;
gap: 5%;
margin: 5%;
justify-content: center;    
}
.membershipContainer{
/* display: none; */
}
#membershipButtonContaineLabel{
margin: 15px auto -15px auto;
text-align: center;
}
.memFull,
.memApp,
.memBackground{
border: 1px solid #000;
border-radius: 15px;
margin: 25px;
padding: 25px;
}
#paymentWrapper form:has(.membershipButtonContainer) .membershipFormButtons {
display: none;
text-align: center;
}
@page {
size: A4 portrait;
}
@media print {
@page {
   size: portrait;
   margin: 0 !important;
}
}
@media print {
/* visible when printed */
.print {
    display: block;
}
#paymentWrapper {
    break-before: always;
}
.g-container {
    margin: 0 !important;
    Width: 100% !important;
}
div#g-footer,
div#g-navigation{
    display: none !important;
}
}
.fullname input#member_name_first, .fullname input#member_name_last {
width: 50%;
}
.fullname {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
@media only screen and (max-width: 1039px){
	.memberInfo{
		width: 100%;	
	}
	.modal-content{
		width: 90%;
		padding: 50px;
	}
.fullname input#member_name_first, .fullname input#member_name_last {
    width: 100%;
}
article{
}
#paymentWrapper{
    margin: auto;
    width: 90%;
}
.membershipButtonContainer{
    flex-direction: column;
    align-items: center;
}
.membershipFormButtons{
    flex-direction: column;
}
.membershipFormButtons .btn{
    width: 100%;
}
.membershipContainer > div:nth-of-type(1),
.membershipContainer > div:nth-of-type(2),
.membershipContainer > div:nth-of-type(3){
    display: flex;
    flex-direction: column;
    align-items: center;
}
.membershipContainer div button{
    margin: auto !important;
    margin-top: 25px !important;
    width: 100%;
}
.memberInfo .memberName, .memberInfo .memberID{
    justify-content: space-between;
}
.memberName p {
    text-align: right !important;
}
.memberInfo div {
    border: 1px solid;
}
}
.paymentInfoContainer > * {
border-bottom: 2px solid;
}
.paymentInfoContainer .paymentInfo > h3,
.memberInfo > * > h3{
border-right: 2px solid #006eb5;
/*width: 150px;*/
width: 30%;
font-weight: 900;
margin-left: 1rem !important;
}
.memberInfo .paymentInfo {
display: flex;
/*justify-content: space-between;*/
}

dialog button.close {
    border: 1px solid;
    height: 30px;
    width: 30px;
    position: absolute;
    top: 0;
    right: 0;
    background: black;
}
dialog button.close::before {
    content: 'X';
    color: white;
    top: 0;
    margin: 0;
    padding: 0;
    display: block;
    position: absolute;
    font-size: 1rem;
    font-weight: 900;
    width: 100%;
}