/* Should you need to overwrite any of our SCSS or LESS or SASS code need to add any custom code, We recommend that you add your code into this file, so whenever theme update is available and you update the theme, You will not lose your hard work :) */


/* Change PayDollar logo Dimension (Header)
   1. Css - Change the .navbar-band img size
   2. JS - change the main.js too  */
   
/* General Font styles and color */
@font-face {
  font-family:poppins;
  src: url(../fonts/Poppins-Regular.ttf);
}

@font-face {
  font-family:poppins-bold;
  src: url(../fonts/Poppins-Bold.ttf);
}

@font-face {
  font-family:poppins-medium;
  src: url(../fonts/Poppins-Medium.ttf);
}
@font-face {
  font-family:poppins-light;
  src: url(../fonts/Poppins-Light.ttf);
}

@font-face {
  font-family:poppins-thin;
  src: url(../fonts/Poppins-Thin.ttf);
}

@font-face {
  font-family:lato;
  src: url(../fonts/Lato-Regular.ttf);
}
@font-face {
  font-family:roboto;
  src: url(../fonts/Roboto-Regular.ttf);
}

@font-face {
  font-family:raleway-light;
  src: url(../fonts/Raleway-Light.ttf);
}

@font-face {
  font-family:raleway;
  src: url(../fonts/Raleway-Regular.ttf);
}

@font-face {
  font-family:lato;
  src: url(../fonts/Lato-Regular.ttf);
}
@font-face {
  font-family:Lato-Bold;
  src: url(../fonts/Lato-Bold.ttf);
}



body {font-family:lato; color:#000; letter-spacing:0.01rem; min-height: 100vh; display: flex; flex-direction: column;}
h1 {font-family: 'poppins-bold' !important; color:#000; text-transform:capitalize;}
h2, h3, h2.h4 {font-family:'poppins' !important; color:#000; text-transform:capitalize;}
h4 {font-family:'poppins' !important;}
h5 {font-family:'poppins' !important;}
h6 {font-family:'poppins' !important; color:#000;}
.text-primay {font-family: 'roboto' !important;}
.btn-link h4 {color:#1b3281 !important; font-size:1.2rem;}
.btn-link:hover h4 {color:#0d6efd !important;}
.btn-link:focus h4{color:#faa61a !important;}

.sm-title {font-family:poppins-bold !important;}

.ff-poppins-light {font-family:'poppins-light' !important; letter-spacing:0.01rem !important;}
.ff-poppins-thin {font-family:'poppins-thin' !important; }
.ff-poppins-medium {font-family:'poppins-medium' !important; }
.ff-poppins-bold {font-family:'poppins-bold' !important; letter-spacing:0.01rem !important;}
.ff-raleway-light {font-family:'raleway-light' !important; }
.ff-raleway {font-family:'raleway' !important; }
.ff-poppins {font-family:poppins !important;}
.ff-lato {font-family:lato !important;}
.ff-lato-bold {font-family:Lato-Bold !important;}
.ff-roboto {font-family:roboto !important;}
.ff-roboto-bold {font-family:roboto !important; font-weight:500 !important;}

.fs-10 {font-size:10pt !important;}
.fs-11 {font-size:11pt !important;}
.fs-12 {font-size:11pt !important;}
.fs-13 {font-size:12pt !important; line-height:8pt;}
.fs-14 {font-size:14pt !important;}
.fs-15 {font-size:15pt !important;}
.fs-16 {font-size:16pt !important;}
.fs-18 {font-size:18pt !important;}
.fs-20 {font-size:20pt !important;}
.fs-23 {font-size:15pt !important;}
.fs-25 {font-size:25pt !important;}
.fs-30 {font-size:30pt !important;}
.fs-xs  {font-size:8pt !important;}
.fc-blk {color:#000 !important;} 
.fc-white {color:#fff !important;} 
.fc-ap-blue {color:#061f75 !important;} 
.fc-ap-yellow {color:#faa61a !important;}
.fc-banner-blue {color:#0a35a9;}
.fc-lightBlue {color:#30cffd !important;}
.fc-grey {color:#777 !important;}
.fc-blue {color:#4369bd;}
.fc-red {color:#dc3545;}
.fw-normal {font-weight:normal !important;}
.fw-0 {font-weight:400 !important;}
.fw-1 {font-weight:600;}
.fw-2 {font-weight:700;}
.bg-primary {background-color: #002c55}
.bg-dark {background-color: #002c55 !important;  background-color:#0a35a9 !important; background-color:#0a2540;}
.bg-LBlue {background-color:#f3f6f9;}
.bg-APYellow {background-color:#faa61a !important;}
.bg-APBlue {background-color:#061f75 !important;}
.bg-dark-blue {background-color:#001856  !important;}
.bg-blk {background-color:#000;}
.bg-gradient-blue 
	{background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,1) 44%, rgba(226,243,255,1) 100%);}
.size35 {width:35px; height:35px;}
.opacity8 {opacity:0.8}
.opacity9 {opacity:0.9}
.fcase-none {text-transform: none}

.pb-5 {padding-bottom:5rem;}
.pb-10 {padding-bottom:10rem;}
.px-6 {padding-left:6rem; padding-right:6rem;}
.mt-6 {margin-top:6rem;}
.p-top-3 {padding-top:2.5rem}

.btn-light {border:1px solid #c8c8c8  !important; border-radius:5px; background-color:#fff !important; box-sizing: border-box; width:74px !important; height:50px !important; text-align:center; vertical-align:middle; padding:0 !important;}
.btn-secondary {background-color:#c8c8c8; border-color:#c8c8c8; width:110px;}
.btn-primary {background-color:#061f75; border-color:#061f75; width:110px;}

.form-group {margin-bottom: 0.5rem}
.form-control {background-color:#fff; border-color:#d1d1d1;}
.box-shadow {box-shadow: 0 0 26px rgba(0, 0, 0, 0.17);}
.form-floating label {color:#999;}

.border-bottom-header {border-bottom:1px solid #e8e8e8;}
.btnPayMthd {height: 50px !important; width: 22% !important; margin:0.2rem; padding:0.3rem !important; }
.btnPayMthd img {height:35px; width:100%}
.btn-expand {height: 40px !Important; width:45px !Important; margin: 0.2rem;}
.btn-fail{width:150px}
.border-gray {border-left:6px solid #d1d1d1;}
.btn-continue {background-color:#fcb131; border-color:#fcb131;} 

.payLogoList img {height: 30px;}
.payLogoList img+img {margin-left: 5px;}

.logoMer {max-height: 3.5rem;}
.logoPart {max-height: 2.5rem;}
.lineHeight {line-height: 22pt;}
.customWidth {width:100%; margin: 0 auto;};
.waves-effect {position: relative; overflow: hidden; transform: translate3d(0, 0, 0); transition: background-color 0.6s, transform 0.6s;}
.waves-effect:hover {background-color: #26a69a; transform: scale(1.05);}
label {white-space:nowrap}
::placeholder {color:#aaa !important;}
.content {  flex: 1; margin-bottom: 20px;}
.cardicon {position: absolute; top: 34px; right: -37px;}
.custom-popover {background-color: #e7ecff; color: #333; border-color: #e7ecff;}
.waves-effect {position: relative; overflow: hidden; transform: translate3d(0, 0, 0); transition: background-color 0.6s, transform 0.6s;}
.waves-effect:hover {background-color: #26a69a; transform: scale(1.05);}
.border-left-gray-bg {background-color:#f5f5f5; border-left:6px solid #d1d1d1;}
.h-auto {height:auto}
.footer-border-top {border-top:1px solid #e8e8e8;}
.footer-font-color {color:#b1b0b0;}
.cursor-pointer {cursor:pointer}
.info-msg {color:#888; border-top:1px solid #e8e8e8; padding-top:30px;}
.qr-code-img {padding:15px; box-shadow:1px;}
.paymet-expire-label {color:#555; padding-bottom:5px;}
.timer-font-color {color:#555;}
.txn-success-container{width:85% !important; margin-top:30px}
.txn-success-box {color:#888; border-top:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8; padding:15px 0; text-align:center;}
.tnx-success-font-color {color:#19338f}


@media (min-width: 576px) {
.border-gray {border-left:0px solid #d1d1d1;}
.fs-10 {font-size:10pt !important;}
.fs-11 {font-size:11pt !important;}
.fs-12 {font-size:12pt !important;}
.fs-13 {font-size:13pt !important; line-height:20pt;}
.fs-14 {font-size:14pt !important;}
.fs-15 {font-size:15pt !important;}
.fs-16 {font-size:16pt !important;}
.fs-18 {font-size:18pt !important;}
.fs-20 {font-size:20pt !important;}
.fs-23 {font-size:23pt !important;}
.fs-25 {font-size:25pt !important;}
.fs-30 {font-size:30pt !important;}
.logo {height: 4.7rem;}
.btnPayMthd {  height: 50px !important; width: 100px !important; margin: 0.2rem; padding: 0.3rem !important;}
.customWidth {width:90%; margin: 0 auto;};
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .custom-p-x {padding-right: 2.3rem; padding-left: 2.3rem;}
  .fs-23 {font-size:18pt !important;}
  .border-gray {border-left:6px solid #d1d1d1;}
}

@media (min-width: 768px) and (max-width: 991.98px) { 
}

@media (min-width: 992px) {
}


@media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1320px;
}
}