/** Main color pink : #DB0522  **/



@font-face {

  font-family: 'HPSimplified-Regular';

  src: url('../fonts/HPSimplified-Regular.eot?#iefix') format('embedded-opentype'), 

         url('../fonts/HPSimplified-Regular.woff') format('woff'), 

         url('../fonts/HPSimplified-Regular.ttf')  format('truetype'), 

         url('../fonts/HPSimplified-Regular.svg#HPSimplified-Regular') format('svg');

  font-weight: normal;

  font-style: normal;

}



*

{

    border:0;

    margin:0;

    padding:0;

    outline:0;

    box-sizing: border-box;

}



a

{

    text-decoration:none;

    color:#2698cd;    

}



a > img

{

    outline:0;

}

ul{

	list-style:none;

	margin:0;

	padding:0;

}

h1,h2,h3,h4,h5,h6,p{

	margin:0;

}

body

{

    font-size:15px;

    font-weight:normal;

    font-family:HPSimplified-Regular;

    background:#fff;

	overflow-x:hidden;

}



.wrapper

{

    width:1280px;

    margin:0 auto;

	position:relative;

}



header {

    background: rgba(255,255,255,0);

	position:fixed;

	padding:50px 0;

	z-index:999;

	width:100%;

	box-shadow:0 0 5px rgba(0,0,0,0);

	transition:background 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, padding 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, border 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, margin 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, box-shadow 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, -webkit-transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, -moz-transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, -o-transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, visibility 0.2s ease 0s;

}

header.fixed

{

	position:fixed;

	background: rgba(255,255,255,0.9);

	padding:10px 0;

	box-shadow:0 0 5px rgba(0,0,0,0.3);

	transition:background 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, padding 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, border 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, margin 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, box-shadow 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, -webkit-transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, -moz-transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, -o-transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, visibility 0.2s ease 0s;

}

.logoImg{

	height:50px;

	transition:height 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;

}

header.fixed .logoImg{

	height:36px;

}

/*

nav {

    display: flex;

    width: 60%;

}

*/

ul.navUl {

    align-content: center;

    display: flex;

    justify-content: right;

    text-align: center;

    width: 100%;

	align-items:center;

}

header.fixed .navUl li{

	xpadding:0;

}

header .navUl li{

	padding:7px 0;

}

.navUl a {

    display: block;

    line-height: 28px;

    padding: 0 16px;

	font-size:16px;

	min-width:124px;

    text-align: center;

	color:#fff;

	text-shadow:0 1px 0 rgba(0,0,0,0.3);

	position:relative;

}

.navUl a::before {

    background: transparent none repeat scroll 0 0;

    bottom: 0;

    content: "";

    height: 2px;

    left: 0;

    margin: 0 auto;

    position: absolute;

    right: 0;

    width: 0px;

	transition:all 0.2s 0s ease;

}

.navUl a.active::before{

	background: #481a4c none repeat scroll 0 0;

	width: 90px;

	transition:all 0.2s 0s ease;

}

header.fixed .navUl a{

	color:#333;

	text-shadow:0 1px 0 rgba(0,0,0,0);

}

header .navUl a.contactLink{

	background:#481A4C;

	color:#fff;

	border-radius:20px;

	border:2px solid #fff;

	box-shadow:0 3px 3px rgba(0,0,0,0.2);

}

.headTop{

	background:#DB0522;

	text-align:right;

}

.headTopUl{

	width:1150px;

	margin:0 auto;

	padding:5px 0;

	position:relative;

}

.headTopUl li{

	display:inline-block;

	padding:0 10px;

	border-right:1px solid rgba(0,0,0,0.2);

	position:relative;

}

.headTopUl li:last-child{

	border-right:0px solid rgba(0,0,0,0.2);

}

.headTopUl li a{

	display:block;

	line-height:22px;

	color:#fff;

}

.bannerCont{

	position:absolute;

	height:100vh;

	width:100%;

	left:0;

	right:0;

	overflow:hidden;

}

.bannerCarousel .owl-stage

{

	height:100vh;

}

.bannerCarousel .owl-item,.bannerCarousel .item, .bannerCarousel .item img{

	height:100%;

}

.section{

	min-height:100vh;

	position:relative;

}

.enquirySection{

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#26083a+0,7d346c+43,ebac8d+74,f8d591+100 */

	background: rgb(38,8,58); /* Old browsers */

	background: -moz-linear-gradient(-45deg,  rgba(38,8,58,1) 0%, rgba(125,52,108,1) 43%, rgba(235,172,141,1) 74%, rgba(248,213,145,1) 100%); /* FF3.6-15 */

	background: -webkit-linear-gradient(-45deg,  rgba(38,8,58,1) 0%,rgba(125,52,108,1) 43%,rgba(235,172,141,1) 74%,rgba(248,213,145,1) 100%); /* Chrome10-25,Safari5.1-6 */

	background: linear-gradient(135deg,  rgba(38,8,58,1) 0%,rgba(125,52,108,1) 43%,rgba(235,172,141,1) 74%,rgba(248,213,145,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26083a', endColorstr='#f8d591',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

.tpImg{

	position:absolute;top:0;bottom:0;height:100vh;width:100vw;left:0;right:0;opacity:0.05;

}



header .wrapper {

    display: flex;

    justify-content: space-between;

    vertical-align: middle;

}

.enquirySection .wrapper{

	padding-top:116px;

}

.enqTitle{

	font-size:32px;

	color:aqua;

	font-family:Rancho;

	border-bottom:1px dashed aqua;

	line-height:2;

}



form.enqForm {

    background: rgba(255,255,255,0.3) none repeat scroll 0 0;

	border:1px solid rgba(255,255,255,0.5);

	padding:15px;

    margin: 15px auto;

    width: 50%;

	bottom: 210px;

    position: relative;

}



form.enqForm div {

    display: flex;

    justify-content: space-around;

    margin: 10px 0;

    vertical-align: middle;

}

.formLabel {

    color: #fff;

    font-size: 16px;

    line-height: 44px;

    padding-right: 16px;

    text-align: right;

    width: 100%;

}

.inputBox {

    font-weight: bold;

    line-height: 24px;

    padding: 10px;

    width: 100%;

	background:transparent;

	border:1px solid #fff;

	color:#fff;

	font-family:arial;

	font-size:13px;

}

textarea.inputBox{

	resize:none;

	font-family:arial;

}

.mandatory{

	color:red;

	padding:0 3px;

}

.button{

	background:#481A4C;

	color:#fff;

	width:100%;

	line-height:24px;

	padding:10px;

	text-align:center;

	font-weight:bold;

	font-size: 16px;

}

.footer {

    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);

}



.copyrightCont {

    background: #fff none repeat scroll 0 0;

    color: rgba(0,0,0,0.6);

    height: 36px;

    line-height: 36px;

}

.copyright {

    display: inline-block;

    padding-left: 10px;

    text-align: left;

}

.lobaa {

    display: inline-block;

    float: right;

    padding-right: 10px;

}



/*.copyrightCont .wrapper {

    display: flex;

    justify-content: space-between;

} */

.copyrightCont a{

	color:#481A4C;

	font-weight:bold;

	position:relative;

}

.lobaasoft-image {

    height: 0;

    overflow: hidden;

    position: absolute;

    right: 0;

    top: 0;

    transition: all 0.3s ease-in-out 0s;

    width: 100px;

    z-index: 1001;

}

.copy-url:hover > .lobaasoft-image {

    height: 55px;

    margin-top: -55px;

    transition: all 0.3s 0s ease-in-out;

}

.has-error{

	box-shadow:0 0 4px rgba(255,0,0,0.7);

}

.disabled{

	opacity:0.6;

	pointer-events:none;

}

.formMsg {

    background: transparent none repeat scroll 0 0;

    border: 1px solid transparent;

    border-radius: 5px;

    color: rgba(0, 0, 0, 0.7);

    font-size: 15px;

    line-height: 24px;

    padding: 5px 10px;
    
    margin-bottom:15px;

	display:none;

}

.formMsg.successMsg {

    background: rgba(212, 255, 165, 0.8) none repeat scroll 0 0;

    border: 1px solid rgba(0,255,0,0.1);

	display:block;

}

.formMsg.errorMsg {

    background: rgba(255, 27, 0, 0.6) none repeat scroll 0 0;

    border: 1px solid rgba(255,0,0,0.1);

	display:block;

}

/** About section **/

.aboutSection{

	padding-top:100px;

}

.textContent {

    color: rgba(0, 0, 0, 0.6);

    line-height: 26px;

	overflow:hidden;

}

/*.textContent p{

	margin-bottom:16px;

}*/

.withIndent{

	text-indent:50px;

}

.subTitle{

	margin-bottom:24px;

	color:#481A4C;

	font-weight:normal;

}



.appScreenUl {

    display: flex;

    flex-wrap: wrap;

}



.appScreenUl li {

    margin-bottom: 24px;

    min-width: 160px;

    text-align: center;

}

.appScreenUl a {

    width: 96px;

	display:block;

	margin:0 auto;

}

.appScreenUl img {

    width: 96px;

}

#fancybox-wrap{

	xbackground:#fff;

}

#fancybox-content{

	margin:0 auto;

	background:#fff;

}



/** feature section **/

.featureSection{

	padding-top:100px;

	background:#4CB5AB;

}

.featureCont{

	display:flex;

	align-items:center;

}

.featureUl{

	display:flex;

	width:100%;

	align-items:top;

	flex-wrap:wrap;

	justify-content:space-around;

}

.featureUl li{

	min-width:25%;

	text-align:center;

	margin-bottom:64px;

	padding:0 15px;

}

.featureUl a{

	display:block;

	color:#fff;

}

.iconImgCont{

	background: rgba(255, 255, 255, 1) none repeat scroll 0 0;

    box-shadow:0px 0 0 5px rgba(0,0,0,0.1);

    border-radius: 50%;

    display: block;

    margin: 0 auto;

    padding: 16px;

    width: 96px;

	height:96px;

}

.featureUl img {

    width:100%;

}

.featureUl span{

	display:block;

	font-weight:bold;

	line-height:32px;

	padding-top:5px;

	letter-spacing:0.5px;

	

}

.featureListCont{

	height:350px;

	

}



/** Animation **/

  

/*.iconImgCont {*/

.featureUl li{

    /* Chrome, Safari, Opera */

    transform-origin: 50% 0%;

    -webkit-transform-origin: 50% 0%;

    

    -webkit-animation-name: shake;

    -webkit-animation-duration: 1s;

    -webkit-animation-timing-function: linear;

    -webkit-animation-delay: 0s;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-direction: alternate;

    -webkit-animation-play-state: running;

    /* Standard syntax */

    animation-name: shake1;

    animation-duration: 4s;

    animation-timing-function: linear;

    animation-delay: 0s;

    animation-iteration-count: infinite;

    animation-direction: alternate;

    animation-play-state: running;

} 

.featureUl li:hover {

    -webkit-animation-play-state: paused;

    -moz-animation-play-state: paused;

    -o-animation-play-state: paused;

    animation-play-state: paused;

}

/*** Animation queries  ***/



@-webkit-keyframes shake1 {

    0%   {transform:rotate(0deg);}

    50%  {transform:rotate(8deg);}

    100% {transform:rotate(-8deg);}

}



/* Standard syntax */

@keyframes shake1 {

    0%   {transform:rotate(0deg);}

    50%  {transform:rotate(8deg);}

    100% {transform:rotate(-8deg);}

}

.smWrapper{

	width:80%;

	margin:0 auto;

}

.textCenter{

	text-align:center;

}

h2.subTitle{

	font-size:2.4rem;

}

h3.subTitle{

	font-size:1.6rem;

}

.textContent{

	font-size:1rem;

}

.txtAbtSub{

	width:75%;

	margin:0 auto;

}

.flexUl{

	display:flex;

	align-items:center;

	-webkit-align-items:center;

	flex-wrap:nowrap;

	-webkit-flex-wrap:nowrap;

	xbackground: rgba(0, 0, 0, 0.05) none repeat scroll 0 0;

	padding:16px;

}

.flexUl:nth-child(even){

	xbackground:rgba(0,0,0,0.02);

}

.flexImgLi{

	width:200px;

	margin: 0 24px;

}

.flexUl li img{

	width:100%;

	xborder:5px solid #8292A9;

	xbox-shadow:0 2px 4px rgba(0,0,0,0.5);

}

.app{

	margin-top:24px;

}

.subsubtitle{

	border-bottom:2px solid #481a4c;

	padding-bottom:16px;

	margin-top:16px;

}



.modal {

    background: rgba(255,255,255,0.4) none repeat scroll 0 0;

    height: 100vh;

    left: 0;

    position: fixed;

    top: 0;

    width: 100vw;

    z-index: 999;

	opacity:0;

	pointer-events:none;

	transition:all 0.2s 0s ease;

}

.modal.active{

	opacity:1;

	pointer-events:auto;

	transition:all 0.2s 0s ease;

}



.modalInner {

    background: #fff none repeat scroll 0 0;

    border-radius: 10px;

    bottom: 0;

    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);

    left: 0;

    margin: auto;

    max-height: 300px;

    padding: 15px;

    position: absolute;

    right: 0;

    top: 0;

    width: 380px;

	opacity:0;

	transform:translate(0,-60px);

	transition:all 0.2s 0s ease;

}

.modal.active .modalInner{

	opacity:1;

	transform:translate(0,0px);

	transition:all 0.3s 0.3s ease;

}

.modalTitle {

    background: transparent none repeat scroll 0 0;

    border-bottom: 2px solid #481A4C;

    line-height: 48px;

    padding-bottom: 0;

	color:#481A4C;

	text-align:center;

}



.modalBody {

    background: transparent none repeat scroll 0 0;

    height: 100%;

    padding-bottom: 48px;

}

.modalFooter {

    align-items: stretch;

    bottom: 0;

    display: flex;

    height: 48px;

    justify-content: end;

    left: 0;

    position: absolute;

    width: 100%;

	border-radius:0 0 10px 10px;

	overflow:hidden;

}



.payLoginForm .inputBox {

    border: 1px solid rgba(0, 0, 0, 0.1);

    border-radius: 4px;

    display: block;

    font-size: 20px;

    font-weight: bold;

    letter-spacing: 10px;

    line-height: 36px;

    margin: 10px auto;

    padding: 0 10px;

    text-align: center;

    width: 80%;

	color:#000;

}

.modalContent {

    line-height: 1.5;

    padding: 10px 0;

}



.modalClose {

    background: #481A4C none repeat scroll 0 0;

    border: 2px solid #fff;

    border-radius: 50%;

    color: #fff;

    display: block;

    height: 32px;

    line-height: 28px;

    position: absolute;

    right: -16px;

    text-align: center;

    top: -16px;

    width: 32px;

	box-shadow:0 3px 3px rgba(0,0,0,0.3);

}



/** Payment paeg **/



.payProfCont {

    background: #f5f5f5 none repeat scroll 0 0;

    margin: 0 auto;

    overflow: hidden;

    width: 360px;

	height:calc(100vh - 150px);

	min-height:500px;

	border:5px solid #fff;

	border-radius:10px;

	overflow:hidden;

	box-shadow:0 0px 5px rgba(0,0,0,0.3); 

}

.profTop {

    min-height: 230px;

    position: relative;

}

.profTop > img {

    height: 100%;

    position: absolute;

}

.profNameCont {

    background: rgb(255, 255, 255) none repeat scroll 0 0;

    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    bottom: 0;

    padding: 5px 10px;

    position: absolute;

    width: 100%;

}

.profNameCont > h3 {

    font-size: 16px;

    line-height: 32px;

}

.profNameCont > span {

    color: #666;

    font-style: italic;

}

.profBody {

    height: calc(100% - 230px);

    overflow: auto;

}

.connUl {

    align-items: center;

    display: flex;

    justify-content: space-around;

}



.connUl > li {

    padding: 5px 10px;

    width: 33.33%;

}



.connUl > li:nth-child(2){

	text-align:right;

}

.connUl > li:last-child{

	text-align:center;

}



.connHeadUl.connUl,.connFootUl.connUl {

    background: #f9f9f9 none repeat scroll 0 0;

    font-weight: bold;

}

.connList {

    background: #fff none repeat scroll 0 0;

    border-radius: 5px;

    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.1);

    margin: 0 auto 10px;

    padding: 5px;

    width: 96%;

	border:1px solid rgba(0,0,0,0.07);

}

.connBodyCont ul.connBodyUl:first-child .payBtn {

	opacity:1;

	pointer-events:auto;

	cursor:pointer;

}

.payBtn.enabled {

	opacity:1 !important;

	pointer-events:auto !important;

	cursor:pointer !important;

}

.payBtn.disabled {

	opacity:0.5 !important;

	pointer-events:none !important;

	cursor:not-allowed !important;

}

.connNo {

    border-bottom: 2px solid #481A4C;

    color: #ccc;

    line-height: 32px;

    text-align: left;

	margin-bottom:5px;

	letter-spacing:1px;

}

.connNo span{

	color:#481A4C;

}

.payBtn {

    background: #481a4c none repeat scroll 0 0;

    border-radius: 5px;

    color: #fff;

    display: inline-block;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 1px;

    line-height: 22px;

    padding: 0 10px;

	opacity:0.5;

	pointer-events:none;

	cursor:not-allowed;

}

.disabled{

	opacity:0.5 !important;

	pointer-events:none !important;

	cursor:not-allowed !important;

}

.profBodyHeader{

	text-align:center;

	font-size:13px;

	text-transform:uppercase;

	line-height:32px;

	letter-spacing:1px;

}

.connBodyCont{

	border-top:1px solid rgba(0,0,0,0.05);

	border-bottom:1px solid rgba(0,0,0,0.05);

}

.connFootUl .payBtn{

	opacity:1;

	pointer-events:auto;

	cursor:pointer;

}

/** Loader  **/

.loader,

.loader:before,

.loader:after {

  border-radius: 50%;

  width: 2.5em;

  height: 2.5em;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

  -webkit-animation: load7 1.8s infinite ease-in-out;

  animation: load7 1.8s infinite ease-in-out;

}

.loader {

  color: #d4d4d4;

  font-size: 10px;

  margin: 36px auto;

  position: relative;

  text-indent: -9999em;

  -webkit-transform: translateZ(0);

  -ms-transform: translateZ(0);

  transform: translateZ(0);

  -webkit-animation-delay: -0.16s;

  animation-delay: -0.16s;

}

.loader:before,

.loader:after {

  content: '';

  position: absolute;

  top: 0;

}

.loader:before {

  left: -3.5em;

  -webkit-animation-delay: -0.32s;

  animation-delay: -0.32s;

}

.loader:after {

  left: 3.5em;

}

@-webkit-keyframes load7 {

  0%,

  80%,

  100% {

    box-shadow: 0 2.5em 0 -1.3em;

  }

  40% {

    box-shadow: 0 2.5em 0 0;

  }

}

@keyframes load7 {

  0%,

  80%,

  100% {

    box-shadow: 0 2.5em 0 -1.3em;

  }

  40% {

    box-shadow: 0 2.5em 0 0;

  }

}

.emptyMsg{

	text-align:center;

	font-size:16px;

	margin:16px auto;

	color:#999;

}



.connAddrs {

    color: #666;

    font-size: 11px;

    font-weight: normal;

    letter-spacing: 0.5px;

    line-height: 16px;

    padding-left: 50px;

	margin-top:-5px;

}

.connName{

	font-weight:bold;

}

.paySuccess {

    background: rgba(0, 255, 0, 0.4) none repeat scroll 0 0;

    display: block;

    line-height: 24px;

    margin: 3px 0;

    overflow-wrap: break-word;

    padding: 3px;

    text-align: center;

    width: 100%;

}

.section-content {

    color: white;

    position: relative;

    top: 100px;

}

.textContent.text-center {

    color: rgba(0,0,0,0.6);

    line-height: 26px;

    overflow: hidden;

    font-size: 1em;

}


.paymentSection{
    background:rgba(0,0,0,0.2);
    padding:32px;
}

.paymentWrapper {
    background: #fff;
    border-radius: 15px;
    height: calc(100vh - 64px);
    width: 70vw;
    margin: 0 auto;
    display: flex;
    overflow:hidden;
    box-shadow:0 0 10px rgba(0,0,0,0.3);
}

.paymenu {
    width: 35%;
    background: url(../img/banner1.png) no-repeat center center/auto 100%;
    display:flex;
}
.paymenuInner{
    xpadding:15px;
    background:rgba(72,26,72,0.9);
    height:100%;
    width:100%;
}

.payform{
    width:65%;
    padding:15px;
}

.payLogoImgBox {
    /* background: red; */
    text-align: center;
    border-bottom: 1px dashed #e9e9e9;
    padding-bottom: 15px;
    margin-bottom: 15px;
    margin-top: -15px;
    padding-top: 15px;
    margin-left: -15px;
    margin-right: -15px;
    position:relative;
}

img.payLogoImg {
    height: 24px;
}
form.paymentform {
    display: flex;
    height: calc(100% - 59px);
    width: 100%;
}
fieldset {
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: 4px;
    /* padding: 10px; */
    text-align: center;
    min-height: calc(100% - 150px);
    background: #fcfcfc;
    width: 100%;
    overflow-y:auto;
    position:relative;
    min-height:50vh;
}

legend {
    padding: 5px 15px;
    text-transform: uppercase;
    font-size: 18px;
    background: #fff;
    font-family: HPSimplified-Regular;
    /* text-shadow: 0 1px 0px #fff, 0 1px 2px rgb(255, 77, 23); */
    /* color: #fff; */
    border: 1px solid rgba(0,0,0,0.03);
    border-radius: 23px;
    box-shadow: 0 0 2px rgba(0,0,0,0.1);
}

.payform .inputCont {
    position: relative;
    border: 1px solid rgb(152, 146, 247);
    margin: 10px;
    border-radius: 6px;
    background: #fff;
    padding: 0 10px;
    margin-bottom:32px;
}

.payform .inputCont label {
    position: absolute;
    top: -12px;
    left: 10px;
    background: #fcfcfc;
    display: inline-block;
    padding: 0 10px;
    white-space: nowrap;
}

.payform .inputBox {
    font-weight: bold;
    line-height: 40px;
    width: 100%;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    font-family: arial;
    font-size: 13px;
    height: 40px;
    color: #000;
    margin: 0;
    padding:0;
}

.payform .inputMsg{
    position: absolute;
    right: 10px;
    bottom: -8px;
    background: #fcfcfc;
    padding: 0 5px;
    font-size: 12px;
    display:none;
}

.inputMsg.errorMsg{
    color: #ff5454;
    display:inline-block;
}

a.menuCont {
    background: #481b4c;
    position: absolute;
    display: block;
    height: 42px;
    width: 42px;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    padding: 5px;
    border-radius: 0 10px 10px 0;
    display:none;
}
.closeMenu.menuCont{
    left:100%;
    top:10px;
    bottom: auto;
    z-index:999;
}

.respPaymentWrapper.menuOpened .closeMenu.menuCont{
    display: block;
}
.menuCont img {
    height: 100%;
    width: 100%;
}

.respPaymentWrapper a.menuCont{
    display:block;
}
.respPaymentWrapper .paymenu
{
    position: absolute;
    width:280px;
    left: 0;
    height: 100%;
    z-index: 99;
    transform: translate(-100px,0);
    transition: all 0.2s 0s ease;
    opacity: 0;
    pointer-events:none;
    box-shadow:0 0 0px rgba(0,0,0,0);
}

.respPaymentWrapper.menuOpened .paymenu{
    transform: translate(0,0);
    transition: all 0.2s 0s ease;
    opacity: 1;
    pointer-events:auto;
    box-shadow:0 0 20px rgba(0,0,0,0.1);
}

.overlay{
    width:calc(100% - 280px);
    height:100%;
    position:absolute;
    left:280px;
    transform: translate(100px,0);
    transition: all 0.2s 0s ease;
    opacity: 0;
    z-index:98;
    background:rgba(255,255,255,0.9);
    pointer-events:none;
}

.respPaymentWrapper.menuOpened .overlay{
    transform: translate(0,0);
    transition: all 0.2s 0s ease;
    opacity: 1;
    pointer-events:auto;

}

.respPaymentWrapper .payform{
    width:100%;
}
.respPaymentWrapper.paymentWrapper{
    width:calc(100vw - 64px);
}

.payNumberInput{
    letter-spacing:10px;
    /*
    letter-spacing:15px;
    font-weight:bold;
    text-align:center;*/
}

.buttonCont{
    border-radius:6px;
    overflow:hidden;
    margin:0 10px;
}

.sideMenuUl{
    height:100%;
}
.sideMenuUl li {
    min-height: 42px;
    border-bottom: 1px dashed rgba(255,255,255,0.3);
    padding: 10px 10px;
    
    color:rgba(255,255,255,0.6);
}
.sideMenuUl li a{
    color:#fff;
}

.ui-helper-hidden-accessible { position: absolute; left: -9999px; }

div.autoCompleteCont{
    width:100%;
    position: absolute;
    top: calc(100% - 4px);
    background: #fff;
    width: calc(100% + 2px);
    left: -1px;
    line-height: 24px;
    z-index: 999;
    border-radius: 0 0 5px 5px;
    box-shadow:0 3px 3px rgba(0,0,0,0.1);
}
div.autoCompleteCont ul {
    top:0 !important;
    left:0 !important;
    border: 1px solid rgb(152, 146, 247);
    border-top: 0;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
    overflow-y: auto;
    max-height: 100px;
}

div.autoCompleteCont ul li{
    padding:0 32px;
    text-align:left;

}
div.autoCompleteCont ul li:nth-child(even){
    background:#f9f9f9;
}
div.autoCompleteCont a{
    color:#481b4c;
}
@media screen and (max-width:1024px)
{
    .paymentWrapper{
        width:calc(100vw - 64px);
    }
}
@media screen and (max-width:480px)
{
    .paymentSection{
        padding:16px;
    }
    .respPaymentWrapper.paymentWrapper{
        width:calc(100vw - 32px);
        height: calc(100vh - 32px);
    }
    legend{
        font-size:16px;
    }
    a.menuCont{
        height:36px;
        width:36px;
    }
}
.dTable{
    width:100%;
    text-align:left;
}
.dTable thead{
    width:100%;
    text-align:left;
}
.dTable thead th, .dTable thead td{
    padding:10px;
    text-align:left;
}

.dTableTHead th{
    padding:5px 10px !important;
}
.dataTables_scrollBody thead th, .dataTables_scrollBody thead td{
    padding:0 !important;
}

table.dataTable thead th, table.dataTable thead td{
    xborder-bottom:1px solid rgba(0,0,0,0.1) !important;
    background: #481b4c;
    color: #fff;
    font-weight: normal !important;
}

.dtCont{
    width:96%;
    margin:15px auto;
}

.backIco {
    background: #fff;
    display: inline-block;
    height: 26px;
    line-height: 26px;
    min-width: 64px;
    padding:0 10px;
    white-space: nowrap;
    text-align: center;
    border-radius: 26px;
    border: 1px solid #e5e5e5;
    position: absolute;
    top: 4px;
    left: 10px;
    font-size: 13px !important;
    color: #481b4c;
}

table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before{
    background:#481b4c;
}
.payGdCont{
    position:relative;
    height:100%;
    width:100%;
}

.payGdCont img{
    height:100%;
    width:100%;
    position:absolute;
    left:0;
    top:0;
}

.linkLeft{
    position:absolute;
    left:15px;
    bottom:10px;
    height:24px;
}


.linkRight{
    position:absolute;
    right:15px;
    bottom:10px;
    height:24px;
}
.linkLeft a,.linkRight a{
    color:rgba(255,255,255,0.8);
}

.modalBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2);
}


.modalCont {
    background: #fff;
    min-width: 360px;
    width: 100%;
    min-height: 50vh;
}

.responseTitle {
    height: 100px;
    text-align: center;
    position: relative;
    border-bottom:1px solid rgba(0,0,0,0.2);
}
span.responsePlaceholder {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100px;
    /* background: blue; */
    width: 100%;
    left: 0;
    line-height: 100px;
    font-size: 7vw;
    color: rgba(0,0,0,0.04) !important;
}

.responseTitle i {
    font-size: 28px;
    line-height: 100px;
}

.statusMsg{
    line-height: 100px;
    font-size: 28px;
}

.success .responseTitle *{
    color:rgb(28, 193, 49);
}

.error .responseTitle *{
    color:rgb(255, 88, 88);
}


.responseMsg{
    padding:20px 0;
}
.responseMsg h3{
    margin:15px 0;
    text-align:center;
}
.rowFlex{

    position: relative;
    overflow: hidden;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    
}
.respCol .rowFlex{
    border-bottom:1px dashed rgba(0,0,0,0.1);
}
.rowFlex .button{
    margin:0 10px;
}



.respCol {
    min-width: 320px;
    border: 1px solid rgba(0,0,0,0.04);
    box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 5px;
    margin: 15px auto;
    padding: 15px;
    width: 70%;
}

.success .respCol{
    background: rgba(0,255,0,0.07);
}
.error .respCol{
    background: rgba(255,0,0,0.07);
}
.rowFlex .listLabel {
    display: block;
    line-height: 35px;
    font-weight: bold;
    white-space: nowrap;
}

.dTable thead{
	background:#481a4c;
	color:#fff;
}
.loaderTxt{
	display:inline-block;
	height:8px;
	background:#e9e9e9;
	width:100px;
	margin:10px 0;
}
.customerBody
{
	min-height:calc(100vh - 296px);
}



/* lcopayment 1 */
.paymentSection1{
    background:rgb(241 235 250);
    padding:16px;
}

.paymentWrapper1 {
    background: #fff;
    width: 30vw;
    margin: 6vh auto;
    display: flex;
    overflow:hidden;
    min-width:300px;
    box-shadow: 0 0 10px rgb(0 0 0 / 30%);
}

.paymenu {
    width: 35%;
    background: url(../img/banner1.png) no-repeat center center/auto 100%;
    display:flex;
}
.paymenuInner{
    xpadding:15px;
    background:rgba(72,26,72,0.9);
    height:100%;
    width:100%;
}

.payform1{
    width:100%;
    padding:15px;
}

.payLogoImgBox1 {
    /* background: red; */
    text-align: center;
    border-bottom: 1px dashed #e9e9e9;
    padding-bottom: 15px;
    margin-bottom: 15px;
    margin-top: -15px;
    padding-top: 15px;
    margin-left: -15px;
    margin-right: -15px;
    position:relative;
}

img.payLogoImg {
    height: 24px;
}
form.paymentform1 {
    display: flex;
    min-height: 35vh;
    width: 100%;
}

.payform1 .inputCont {
    position: relative;
    border: 1px solid #ffef94;
    margin: 32px 10px;
    border-radius: 6px;
    background: #fff;
    padding: 0 10px;
}

.payform1 .inputCont label {
    position: absolute;
    top: -12px;
    left: 10px;
    background: #fcfcfc;
    display: inline-block;
    padding: 0 10px;
    white-space: nowrap;
}

.payform1 .inputBox {
    font-weight: bold;
    line-height: 40px;
    width: 100%;
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    font-family: arial;
    font-size: 13px;
    height: 40px;
    color: #000;
    margin: 0;
    padding:0;
}

.payform1 .inputMsg{
    position: absolute;
    right: 10px;
    bottom: -8px;
    background: #fcfcfc;
    padding: 0 5px;
    font-size: 12px;
    display:none;
}
.halfCircle{
    border-bottom-right-radius: 500px;
    border-top-right-radius: 500px;
    width: 25vw;
    height: 90vh;
    background-color: #ffd800;
    position: absolute;
    left:50%;
    min-width: 200px;
}
.companyname{
    padding: 10px 20px;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    border: 0.5px dotted #ffd800;
    background: #fff;
    border-right: 0;
    text-transform: uppercase;
}
.companydiv{
    background-color: #ffd800;
    margin: 20px 25px 0px 25px;
}
.paymobileBtn1{
	background:#ffd800;
	color:#fff;
	width:100%;
	line-height:24px;
	padding:10px;
	text-align:center;
	font-weight:bold;
	font-size: 16px;
}

.CaptchaWrap { 
    position: relative;
    margin-bottom: 20px;
    margin-left: 10px;
 }
.CaptchaTxtField { 
  border-radius: 5px; 
  border: 1px solid #ccc; 
  display: block;  
  box-sizing: border-box;
}

#UserCaptchaCode { 
  font-weight: normal; 
}
#CaptchaImageCode { 
  text-align:center;
  margin-top: 15px;
  padding: 0px 0;
  width: 300px;
  overflow: hidden;
}

.capcode { 
  font-size: 46px; 
  display: block; 
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none; 
  cursor: default;
  letter-spacing: 1px;
  color: #ccc;
  font-family: 'Roboto Slab', serif;
  font-weight: 100;
  font-style: italic;
}

.ReloadBtn { 
  background:url('https://cdn3.iconfinder.com/data/icons/basic-interface/100/update-64.png') left top no-repeat;   
  background-size : 100%;
  width: 32px; 
  height: 32px;
  border: 0px; 
  outline: none;
  position: absolute; 
  bottom: 30px;
  left : 310px;
  outline: none;
  cursor: pointer; /**/
}
.error { 
  color: red; 
  font-size: 12px; 
  display: none; 
}
.success {
  color: green;
  font-size: 18px;
  margin-bottom: 15px;
  display: none;
}