@font-face {
	font-family: 'ProximaNova';
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/ProximaNova-Regular.otf");
}
@font-face {
	font-family: 'ProximaNova';
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/ProximaNova-Bold.otf");
}
body{
	font-family: 'ProximaNova';
	margin: 0;
	font-size: 16px;
    line-height: 1.2;
	color: #605B71;
}
h3{
	font-size:32px;
}
h4{
	font-size: 18px;
}
ul{
	list-style: none;
}
a{
	color: #593b9d;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
p{
	color: #605B71;
	margin-block-start: 0;
    margin-block-end: 0.75em;
}
input[type=text],
input[type=tell]{
    font-family: 'ProximaNova';
	outline: none;
}
input[type=text],
input[type=tel]{
	height: 46px;
	color: #605B71;
	font-size: 20px;
	border: 1px solid #CAC8CF;
	border-radius: 3px;
	margin-bottom: 15px;
	width: 100%;
	box-sizing: border-box;
}
.paymark_mobile_fram {
	width: 100%;
	margin: auto;
	min-width:300px;
}
.paymark_section{
	width: 100%;
	min-width:300px;
	margin-left: auto;
	margin-right: auto;
	/*min-height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.yhpdesc{
     display: inline-block;
     padding-bottom:10px;
     font-size: 14px;
     font-family: 'ProximaNova';
}
.oe-logo{
	display: flex;
	margin-bottom: 25px;
}
.oe-logo img{
	height: 30px;
}
.oe-payment{
	width: 100%;
	max-width: 300px;
	margin: 15px 0px 15px 0px;
	position: relative;
	border: 1px solid #CAC8CF;
	box-sizing: border-box;
	border-radius: 5px;
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
	background: #FFF;
}
.payment_method_paymark_oe_gateway{
    min-width:300px;
    padding:0px !important;
}
.oe-payment-form{
	padding: 25px 20px 30px;
}
.bank-select{
	margin-bottom: 20px;
}
.bank-select ul{
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.bank-select ul li{
	width: 25%;
	height: 40px;
	border: 1px solid #CAC8CF;
	border-right: none;
	box-sizing: border-box;
	display: flex;
	margin: 0px !important;
}
.bank-select ul li:first-child{
	border-radius: 3px 0 0 3px;
}
.bank-select ul li:last-child{
	border-right: 1px solid #CAC8CF;
	border-bottom: 1px solid #CAC8CF !important;
	border-radius: 0 3px 3px 0;
}
.bank-select ul li.active,
.bank-select ul li:hover{
	border-color: #593b9d;
	background: #f8f8f8;
	border-bottom: 1px solid #593b9d !important;
}
.bank-select ul li.active + li,
.bank-select ul li:hover + li{
	border-left: solid 1px #593b9d;
}
.bank-select ul li label{
	cursor: pointer;
	padding: 10px;
	margin: 0px !important;
}
.bank-select ul li label:focus{
	background: red;
}
.bank-select ul li img{
	width: 100%;
}
ul.focus li:not(.active) svg path{
	fill: #CAC8CF;
}
.bank-select input[type=radio]{
	display: none;
}
input[type=text]#oephone,
input[type=tel]#oephone{
	background: url("../images/phone.png");
	background-repeat: no-repeat;
	background-position: center left 2px;
    background-size: 25px;
	padding: 0 30px;
	letter-spacing: 2px;
	height: 46px !important;
}
input[type=text]#oephone.pherror,
input[type=tel]#oephone.pherror{
	background: url("../images/phone-error.png");
	background-repeat: no-repeat;
	background-position: center left 2px;
    background-size: 25px;
	border-color: #FF554B;
	color: #FF554B;
	height: 46px !important;
}
span.error{
	margin-bottom: 15px;
    padding: 8px 10px;
    display: block;
    color: #FF554B;
    background: #ffe0e0;
	text-align: center;
	font-size: 14px;
	line-height: 16px;
	margin-top: 15px;
}
/* == Request == */

.oe-payment-request{
	padding: 15px 35px 15px;
    text-align: center;
    min-height: 400px;
    box-sizing: border-box;
    display: flex;
	align-items: center;
	font-family: 'ProximaNova';
	font-size: 16px;
	line-height: 1.2;
	color: #605B71;
}
.oe-payment-request h3{
	margin-top: 0;
}
.oe-payment-request img{
	margin: 15px 0;
	display: inline !important;
}
.oe-payment-request span{
	font-weight: bold;
    font-size: 20px;
}
.oe-payment-request .btn{
	background: #fff;
    color: #593b9d;
}

/* == Success Notices == */
.oe-payment-notices{
	width: 100%;
	max-width: 300px;
	min-height: 400px;
	text-align: center;
	position: relative;
	border: 1px solid #CAC8CF;
	box-sizing: border-box;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
	background: #FFF;
}
.oe-payment-notices.error{
	padding: 50px 30px 30px;
}
.oe-payment-notices .content{
	width: 100%;
}
.close,
.remove{
	position: absolute;
    width: 40px;
    height: 40px;
    cursor: pointer;
    top: 20px;
    right: 20px;
}
.close:before,
.close:after,
.remove:before,
.remove:after{
	content: '';
    position: absolute;
    transition: transform 0.3s cubic-bezier(0.17, 0.67, 0.83, 0.67);
	background: #CAC8CF;
    top: 20px;
    left: 5px;
    right: 5px;
    height: 3px;
}
.close:before,
.remove:before{
	-webkit-transform: translate(0, 0px) rotate(45deg);
    -ms-transform: translate(0, 0px) rotate(45deg);
    transform: translate(0, 0px) rotate(45deg);
}
.close:after,
.remove:after{
	-webkit-transform: translate(0, 0px) rotate(-45deg);
    -ms-transform: translate(0, 0px) rotate(-45deg);
    transform: translate(0, 0px) rotate(-45deg);
}
.btn{
	display: block;
    border-radius: 3px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
	font-size: 18px;
	color: #fff;
	margin-bottom: 15px;
}
.btn:hover{
	text-decoration: none;
}
.btn.success{
	background: #20d06e;
	margin-left: 12px;
    margin-right: 12px;
}
.btn.error{
	background: #ff554d;
	margin-left: 12px;
    margin-right: 12px;
}
.btn.error.sec{
	background: none;
	color: #ff554d;
	border: solid 1px #ff554d;
}
.oe-payment-notices .title{
	margin: 0 0 10px
}
.oe-payment-notices.success .title{
	color: #20d06e;
}
.oe-payment-notices.error .title{
	color: #ff554d;
}
.oe-payment-notices .description{
	margin-bottom: 80px;
}
.oe-payment-notices.error .description{
	margin-bottom: 25px;
}
.face-img{
	margin-bottom: 10px;
	display: inline !important;
}
.face-img img{
	max-width: 80px;
	display: inline !important;
}
/* == Autopay == */

.heading{
	display: flex;
	align-items: center;
    margin-bottom: 15px;
}
.heading h4{
	font-size: 16px;
    font-weight: normal;
    margin: 0;
    padding-right: 15px;
    flex-grow: 1;
}
.heading .edit{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 1.2px;
}
.autopay-select ul{
	padding: 0;
    margin-bottom: 30px;
	border: 1px solid #CAC8CF;
    border-radius: 3px;
}
.autopay-select ul li{
	border-bottom: 1px solid #CAC8CF;
}
.autopay-select ul li:last-child{
	border-bottom: none;
}
.autopay-select ul li label{
	display: flex;
    align-items: center;
    padding: 10px;
    line-height: 24px;
	cursor: pointer;
	font-size: 16px;
}
.autopay-select ul input[type="radio"]{
	display: none;
}
.radio{
	display: inline-block;
	position: relative;
    width: 16px;
    height: 16px;
    border: solid 1px #593b9d;
    border-radius: 50%;
}
.active .radio:before{
	content: '';
    width: 10px;
    height: 10px;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    background: #593b9d;
    position: absolute;
    border-radius: 50%;
}
.number{
	flex-grow: 1;
	letter-spacing: 2px;
	padding: 0 10px;
	margin-right: 10px;
	border-right: solid 1px #CAC8CF;
}
.autopay-select img{
	width: 60px;
    height: 20px;
}
.another_account{
	text-align: center;
	margin-top: 20px;
}
.autopay-edit{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
	border-radius: 5px;
	transition: all .3s ease;
	background: #fff;
	visibility: hidden;
	opacity: 0;
	padding: 50px 20px 30px;
}
.oe-payment-form.edit{
	padding: 0;
}
.open .autopay-edit{
	visibility: visible;
	opacity: 1;
}
.oe-payment-form.edit ul{
	padding: 0;
	border: 1px solid #CAC8CF;
    border-radius: 3px;
	margin-bottom: 60px;
}
.save{
	margin: 0 20px;
}
.oe-payment-form.edit li{
	display: flex;
    align-items: center;
	padding: 12px 10px;
    line-height: 24px;
	position: relative;
	border-bottom: 1px solid #CAC8CF; 
}
.oe-payment-form.edit li:last-child{
	border-bottom: none;
}
.oe-payment-form.edit img{
    width: 60px;
    height: 20px;
}
.oe-payment-form.edit input[type=text]{
    width: 100%;
	max-width: 148px;
	height: auto;
    border: none;
    padding: 0;
    margin: 0;
	outline: none;
	padding: 0 10px;
    margin-right: 10px;
	margin-left: 18px;
    border-right: solid 1px #CAC8CF;
	letter-spacing: 2px;
	border-radius: 0;
	font-size: 16px;
}
.remove{
	position: absolute;
    display: block;
    top: 13px;
    left: 10px;
    right: auto;
    width: 18px;
    height: 18px;
    background: #593b9d;
    border-radius: 3px;
}
.remove:before,
.remove:after{
	top: 8px;
    left: 3px;
    right: 3px;
    background: #fff;
    height: 2px;
}
.success_container{ display: none;  }
.failed_container{ display: none;  }
.timer_container{ display: none;  }