@import url("../font/stylesheet.css");

* {
  touch-action: manipulation;
}
:root {
  --font-family-normal: "fc_iconicregular", sans-serif;
  --font-family-italic: "fc_iconicitalic", sans-serif;
  --font-family-bold: "fc_iconicbold", sans-serif;
  --font-family-bold-italic: "fc_iconicbold_italic", sans-serif;
  --whitecicle: #e8e9ed;
  --gray: #01110b42;
  --green: #00dc7373;
}

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a {
  color: #0fa175;
  transition: all 0.3s ease;
  text-decoration: underline;
}
a:hover {
  color: #deece5;
}
.btnLink {
  text-decoration: none;
}
.topNav {
  display: flex;
  align-items: center;
}
.topNavPage {
  flex: 1;
  text-align: center;
  font-size: 24px;
  color: #0fa175;
  font-family: var(--font-family-bold);
}

body {
  background: url(../img/bg-body.png);
  background-color: #053834;
  color: #deece5;
  font-family: var(--font-family-normal);
  font-size: 20px;
  font-weight: 300;
  position: relative;
  min-height: 100%;
  padding-top: 80px;
  padding-bottom: 76px;
  background-size: cover;
  background-attachment: fixed;
  line-height: 20px;
}

.logo {
  max-width: 240px;
  max-height: 240px;
  height: auto;
  margin-bottom: 25px;
}

.titlebox {
  font-size: 26px;
}
.titleboxSmall {
  font-size: 22px;
}
.refNum {
  color: #0fa175;
}

.rowPin {
  display: flex;
  margin-bottom: 30px;
  align-items: center;
}
.colPin {
  flex: 1;
  text-align: center;
  margin-left: 8px;
  margin-right: 8px;
}
.colPin:first-child {
  margin-left: 0px;
}
.colPin:last-child {
  margin-right: 0px;
}
.rowUsername {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
.userPhoto img {
  width: 76px;
  border-radius: 50%;
  -webkit-box-shadow: 0px 20px 29px 1px rgba(0, 0, 0, 0.46);
  -moz-box-shadow: 0px 20px 29px 1px rgba(0, 0, 0, 0.46);
  box-shadow: 0px 20px 29px 1px rgba(0, 0, 0, 0.46);
}
.userName {
  flex: 1;
  font-size: 18px;
  margin-bottom: 10px;
}
.userName h6 {
  font-size: 22px;
  color: #ffd000;
  margin-bottom: 0;
  line-height: 20px;
}

.rowCreditBox {
  display: flex;
  align-items: center;
}
.creditSum {
  flex: 1;
  text-align: right;
  margin-left: 15px;
  margin-right: 15px;
  font-size: 40px;
  color: #ffd004;
  padding-bottom: 12px;
  padding-top: 12px;
  font-family: var(--font-family-bold);
}
.boxButton {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 15px;
}
.boxButton a {
  display: block;
  flex: 1;
}
.boxButton a img {
  margin-right: 10px;
}

.boxmain,
.boxModal {
  border-radius: 20px;
  padding: 15px;
  -webkit-box-shadow: 0px 10px 16px 3px rgba(0, 0, 0, 0.49);
  -moz-box-shadow: 0px 10px 16px 3px rgba(0, 0, 0, 0.49);
  box-shadow: 0px 10px 16px 3px rgba(0, 0, 0, 0.49);
  background: rgb(0, 104, 55);
  background: linear-gradient(
    180deg,
    rgba(0, 104, 55, 1) 0%,
    rgba(1, 46, 11, 1) 100%
  );
  border: 0;
}
.boxModal h6 {
  font-size: 28px;
}
.form-control-1 {
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid #ecce21;
  color: #deece5;
  border-radius: 50px;
  transition: all 0.3s ease;
}

.form-control-1:focus {
  color: #deece5;
  background-color: rgba(0, 0, 0, 0.8);
  border: 2px solid #deece5;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25);
}

.inputPin {
  border-radius: 16px;
  min-height: 72px;
  font-size: 40px;
}

.form-control-1::-webkit-input-placeholder {
  color: #c3b796;
  opacity: 1;
}

.form-control-1::-moz-placeholder {
  color: #c3b796;
  opacity: 1;
}

.form-control-1:-ms-input-placeholder {
  color: #c3b796;
  opacity: 1;
}

.form-control-1::-ms-input-placeholder {
  color: #c3b796;
  opacity: 1;
}

.form-control-1::placeholder {
  color: #c3b796;
  opacity: 1;
}

a.btnCredit {
  font-size: 22px !important;
  margin-right: 8px;
  margin-left: 8px;
}
a.btnCredit:last-child {
  margin-right: 0px;
}
a.btnCredit:first-child {
  margin-left: 0px;
}

.rowfreeCredit {
  display: flex;
  align-items: center;
  margin-top: 20px;
  background-color: #00000054;
  padding: 10px 15px;
  border-radius: 15px;
}
.mr0 {
  margin-right: 0 !important;
}
.colFreecredit,
.colTurnover {
  flex: 1;
}
.colTurnover {
  text-align: right;
}
.rowCrefree {
  display: flex;
  align-items: center;
}
.itemCreditfree {
  margin-right: 15px;
}
.itemCreditfree span {
  font-size: 18px;
}
.itemCreditfree h5 {
  margin-bottom: 0;
  color: #ffd004;
  font-size: 28px;
  font-family: var(--font-family-bold);
  line-height: 20px;
}
.btnLineNone {
  text-decoration: none;
}
.itemCreditfree h5 span {
  color: #ffffff;
  font-size: 28px;
}
.listMenu {
  align-items: center;
  margin-bottom: 0;
}
.listMenu li {
  flex: 1;
}
.listMenu li a {
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  padding: 6px 3px;
}
.listMenu li a:hover {
  text-decoration: none;
}
.listMenu li a.active {
  color: #fff;
}
.listMenu li a.active img {
  filter: brightness(3.5);
}

.listMenu li a span {
  display: block;
}
.menuBottom {
  background: rgb(0, 104, 55);
  background: linear-gradient(
    180deg,
    rgba(0, 104, 55, 1) 0%,
    rgba(1, 46, 11, 1) 100%
  );
  position: fixed;
  width: 100%;
  bottom: 0;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.menuBoxMain .col-4 {
  padding-right: 6px;
  padding-left: 6px;
}
.menuBoxMain .firstCol {
  padding-left: 15px;
}
.menuBoxMain .lastCol {
  padding-right: 15px;
}
.rowDeposit {
  display: flex;
  align-items: center;
}
.colAccount {
  padding-left: 10px;
  padding-right: 10px;
  flex: 1;
}
.imgBank img {
  width: 48px;
}
.colAccount h6 {
  margin-bottom: 0;
  font-size: 22px;
  font-family: var(--font-family-bold);
}
.colAccount h6 span {
  color: #ffd004;
}
.copyNum {
  text-align: center;
}
.copyNum a {
  display: inline-block;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
.copyNum a span {
  display: block;
  line-height: 3px;
}
.footnoteText {
  color: #0fa175;
  font-size: 15px;
  font-family: var(--font-family-italic);
  line-height: 18px;
}
.form-control:disabled,
.form-control[readonly] {
  background-color: #07322c91;
  border: 2px solid #227368;
  color: #3da395;
}
.formIconright {
  padding-right: 48px;
}
.iconRight {
  position: relative;
}
.iconRight .iCopy {
  position: absolute;
  display: inline-block;
  right: 20px;
  top: 40px;
}
.rowtitleBank {
  display: flex;
}
.rowtitleBank img {
  width: 40px;
}
.colBankName {
  flex: 1;
  margin-left: 15px;
  text-align: right;
}
.colAccountName {
  margin-top: 20px;
  margin-bottom: 30px;
}
.colAccountName h2 {
  margin-bottom: 0;
  line-height: 28px;
  color: #ffd004;
  font-family: var(--font-family-bold);
}
.colAccountName h4 {
  margin-bottom: 0;
}
.rowActive {
  background-color: #00000038;
  padding: 10px 15px;
  border-radius: 50px;
}
.rowActive img {
  margin-right: 10px;
}
.listRemark {
  font-size: 16px;
  line-height: 14px;
  color: #0fa175;
  padding-left: 20px;
  font-family: var(--font-family-italic);
}
.listRemark li {
  margin-bottom: 10px;
}
.headModal {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.modalTitlte {
  flex: 1;
}
.modalTitlte h6 {
  margin-bottom: 0;
}
.iconUserRegis {
  width: 80px;
  border-radius: 50%;
  -webkit-box-shadow: 0px 10px 16px 3px rgba(0, 0, 0, 0.49);
  -moz-box-shadow: 0px 10px 16px 3px rgba(0, 0, 0, 0.49);
  box-shadow: 0px 10px 16px 3px rgba(0, 0, 0, 0.49);
}
.btn-block {
  display: block;
}
.form-check label {
  line-height: 34px;
}
.form-check-input,
.form-check-input:checked {
  background-color: #081811b8;
  border: 2px solid rgb(236 206 32);
  width: 1.3em;
  height: 1.3em;
  margin-right: 10px;
}
.boxLine {
  padding: 14px;
  text-align: center;
  font-size: 16px;
  line-height: 18px;
  border: 1px solid #ecce20;
  margin-top: 15px;
  border-radius: 15px;
  margin-bottom: 15px;
}
.select7__drop {
  display: none;
  position: absolute;
  top: -2px;
  left: 0;
  z-index: 1000;
  min-width: 100%;
  padding: 35px 0 5px;
  margin: 0;
  border-radius: 14px;
  box-shadow: 0 3px 4px rgb(0 0 0 / 10%);
  background-clip: padding-box;
  -webkit-box-shadow: 0px 10px 16px 3px rgb(0 0 0 / 49%);
  -moz-box-shadow: 0px 10px 16px 3px rgba(0, 0, 0, 0.49);
  box-shadow: 0px 10px 16px 3px rgb(0 0 0 / 49%);
  background: rgb(0, 104, 55);
  background: linear-gradient(
    180deg,
    rgba(0, 104, 55, 1) 0%,
    rgba(1, 46, 11, 1) 100%
  );
  left: 50%;
  transform: translate(-50%, 0);
  border-width: 0;
  font-size: 20px;
}
.select7__option,
.select7__optgroup {
  display: block;
  overflow: hidden;
  padding: 4px 10px;
  clear: both;
  text-decoration: none;
  font-weight: normal;
  color: #d9e7e0;
  white-space: nowrap;
}
.select7_open .select7__current:hover .select7__caret {
  border-color: transparent transparent #ecce20;
}
.select7_open .select7__caret {
  border-width: 0 6px 8px 6px;
}
.contentProBo {
  font-size: 20px;
}

/*SWITCH*/
ol {
  list-style: none;
}

label {
  cursor: pointer;
}

.switches [type="checkbox"] {
  position: absolute;
  left: -9999px;
}

.switches {
  width: 100%;
  border-radius: 5px;
  margin-bottom: 0;
  padding-left: 0;
}

.switches li {
  position: relative;
}

.switches li:not(:last-child) {
  border-bottom: 1px solid var(--gray);
}

.switches li::before {
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
}

.switches label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.switches span:last-child {
  position: relative;
  width: 50px;
  height: 26px;
  border-radius: 15px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
  background: var(--gray);
  transition: all 0.3s;
}

.switches span:last-child::before,
.switches span:last-child::after {
  content: "";
  position: absolute;
}

.switches span:last-child::before {
  left: 1px;
  top: 1px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  z-index: 1;
  transition: transform 0.3s;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(83, 81, 99, 1) 100%
  );
}

.switches span:last-child::after {
  top: 50%;
  right: 8px;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/uncheck-switcher.svg);
  background-size: 12px 12px;
}

.switches [type="checkbox"]:checked + label span:last-child {
  background: var(--green);
}

.switches [type="checkbox"]:checked + label span:last-child::before {
  transform: translateX(24px);
  background: rgb(255, 208, 4);
  background: linear-gradient(
    90deg,
    rgba(255, 208, 4, 1) 0%,
    rgba(247, 107, 41, 1) 61%,
    rgba(217, 5, 118, 1) 100%
  );
}

.switches [type="checkbox"]:checked + label span:last-child::after {
  width: 14px;
  height: 14px;
  /*right: auto;*/
  left: 8px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/checkmark-switcher.svg);
  background-size: 14px 14px;
}

.pos-relative {
  position: relative;
  padding-top: 40px;
}
.userPhoto {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translate(-50%, 0);
}
.btn-default {
  border-radius: 50px;
  padding: 4px 10px;
  -webkit-box-shadow: 0px 10px 16px 3px rgba(0, 0, 0, 0.49);
  -moz-box-shadow: 0px 10px 16px 3px rgba(0, 0, 0, 0.49);
  box-shadow: 0px 10px 16px 3px rgba(0, 0, 0, 0.49);
  color: #fff;
  font-size: 26px;
  background: rgb(255, 208, 4);
  background: linear-gradient(
    90deg,
    rgba(255, 208, 4, 1) 0%,
    rgba(247, 107, 41, 1) 61%,
    rgba(217, 5, 118, 1) 100%
  );
  transition: all 0.3s ease;
  border: 0;
}
.btn-default:focus,
.btn-default.focus {
  background: rgb(255, 208, 4);
  background: linear-gradient(
    270deg,
    rgba(255, 208, 4, 1) 0%,
    rgba(247, 107, 41, 1) 61%,
    rgba(217, 5, 118, 1) 100%
  );
  color: #fff;
  text-decoration: none;
}
.btn-default:hover {
  background: rgb(255, 208, 4);
  background: linear-gradient(
    270deg,
    rgba(255, 208, 4, 1) 0%,
    rgba(247, 107, 41, 1) 61%,
    rgba(217, 5, 118, 1) 100%
  );
  color: #fff;
  text-decoration: none;
}

.btn-pin {
  border-radius: 50px;
  padding: 4px 10px;
  -webkit-box-shadow: 0px 10px 16px 3px rgba(0, 0, 0, 0.49);
  -moz-box-shadow: 0px 10px 16px 3px rgba(0, 0, 0, 0.49);
  box-shadow: 0px 10px 16px 3px rgba(0, 0, 0, 0.49);
  color: #fff;
  font-size: 26px;
  background: #41464b;
  transition: all 0.3s ease;
  border: 0;
}

.btn-pin:hover {
  color: #fff;
}

.footer {
  font-size: 16px;
  color: #deece4;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding-bottom: 20px;
  line-height: 16px;
}

.header {
  position: absolute;
  top: 0;
  padding-top: 15px;
  width: 100%;
}

.userProfile {
  position: absolute;
  top: -50px;
  left: 0;
  right: 0;
}
.imgUser {
  width: 80px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 50%;
  border: 2px solid #e2b9af;
  -webkit-box-shadow: 0px 20px 20px -9px rgba(0, 0, 0, 0.48);
  -moz-box-shadow: 0px 20px 20px -9px rgba(0, 0, 0, 0.48);
  box-shadow: 0px 20px 20px -9px rgba(0, 0, 0, 0.48);
}
.topContainer {
  margin-top: 150px;
}
.topContainer50 {
  margin-top: 50px;
}
.topContainer30 {
  margin-top: 30px;
}
.width20 {
  width: 54px;
  text-align: center;
  display: inline;
  height: 70px;
}
.linkBack {
  font-size: 30px;
}
.topPage {
  position: absolute;
  left: 50px;
  right: 50px;
  text-align: center;
  top: 28px;
}
.linkUnderline {
  text-decoration: underline;
}
.textsmall {
  font-size: 13px;
  font-weight: 300;
  line-height: 18px;
}
.font14 {
  font-size: 14px;
  height: 50px;
}

.boxBank {
  display: flex;
  position: relative;
}
.bankLogo img {
  width: 50px;
  margin-right: 15px;
}
.bankName {
  margin-top: 8px;
}
.bankName h6 {
  margin-bottom: 0;
  font-weight: 300;
  font-size: 14px;
}
.bankName h4 {
  font-size: 20px;
  margin-bottom: 0;
}
.bankCopy {
  position: absolute;
  right: 8px;
  top: 14px;
  font-size: 16px;
  background-color: #000;
  padding: 3px 7px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  opacity: 0.6;
}
.btnRefresh {
  position: absolute;
  right: 13px;
  top: 8px;
  font-size: 16px;
  background-color: #000;
  padding: 3px 7px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  opacity: 0.6;
}
.credit {
  position: relative;
}
.btnGetcredit {
  right: 13px;
  top: 8px;
  font-size: 16px;
  background-color: #000;
  padding: 3px 7px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  opacity: 0.6;
  display: inline;
}
.bankDetail {
  font-size: 12px;
  text-align: center;
  padding: 30px 30px 0 30px;
}
.bannerPromotion a img {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: 0px 10px 16px 3px rgb(0 0 0 / 49%);
  -moz-box-shadow: 0px 10px 16px 3px rgba(0, 0, 0, 0.49);
  box-shadow: 0px 10px 16px 3px rgb(0 0 0 / 49%);
}
.input1 {
  border: 1px solid #848484;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}
.input2 {
  border: 1px solid #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 10px;
}
.titleboxMain {
  font-weight: 300;
  font-size: 14px;
}
.textboxDisable {
  position: relative;
}
.textboxDisable a {
  position: absolute;
  right: 15px;
}
.hrLine {
  margin-top: 10px;
  margin-bottom: 10px;
  border-top: 1px solid #fff;
}
.listRemark {
  padding-top: 15px;
}
.listRemark > .list-group-item {
  position: relative;
  display: block;
  font-style: italic;
  font-size: 12px;
  line-height: 14px;
  padding: 8px 0 0px 14px;
  background-color: transparent;
  border: 0px solid rgba(0, 0, 0, 0.125);
}
.listRemark > .list-group-item.itemOneLine {
  padding: 2px 0 0px 14px;
}
.listRemark > .list-group-item.itemListLine {
  padding: 10px 0 0px 14px;
  font-size: 14px;
}

.closeBtn {
  position: absolute;
  top: -44px;
  font-size: 28px;
  right: -4px;
}
.colRadio {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
}
.balance {
  font-size: 32px;
}
.icoBtn {
  height: 32px;
}
.iconBox {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  height: 122px;
  background-color: #194f3d80;
  text-decoration: none;
  color: #deece5;
  font-size: 18px;
}
.iconBox:hover {
  text-decoration: none;
  color: #ffd004;
  background-color: #194f3dad;
}
.iconBox img {
  width: 70px;
  text-align: center;
  margin-bottom: 20px;
}
.iconBox span {
  display: block;
  line-height: 16px;
  margin-top: -10px;
}

i.bank {
  display: inline-block;
  border-radius: 20%;
  background-color: grey;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  padding: 0.1em;
  background-repeat: no-repeat;
  background-size: 75%;
  background-position: center;
  background-origin: content-box;
  overflow: hidden;
  vertical-align: -0.23em;
}
i.bank.round {
  border-radius: 50%;
}
i.bank.shadow {
  box-shadow: 0px 0px 5px grey;
}
i.bank.huge {
  width: 64px;
  height: 64px;
}
i.bank.big {
  width: 100%;
  height: 250px;
}
h1 > i.bank,
i.bank.xxxl {
  width: 32px;
  height: 32px;
}
h2 > i.bank,
i.bank.xxl {
  width: 22px;
  height: 22px;
}
h3 > i.bank,
i.bank.xl {
  width: 18px;
  height: 18px;
}
h4 > i.bank,
i.bank.l {
  width: 16px;
  height: 16px;
}
h5 > i.bank,
i.bank.s {
  width: 12px;
  height: 12px;
}
h6 > i.bank,
i.bank.xs {
  width: 10px;
  height: 10px;
}

i.bank.bank-bbl {
  background-color: #1e4598;
  background-image: url("./svg/bbl.svg");
}
i.bank.bank-kbank {
  background-color: #138f2d;
  background-image: url("svg/kbank.svg");
}
i.bank.bank-rbs {
  background-color: #032952;
  background-image: url("svg/rbs.svg");
}
i.bank.bank-ktb {
  background-color: #1ba5e1;
  background-image: url("svg/ktb.svg");
}
i.bank.bank-jpm {
  background-color: #321c10;
  background-image: url("svg/jpm.svg");
}
i.bank.bank-mufg {
  background-color: #d61323;
  background-image: url("svg/mufg.svg");
}
i.bank.bank-tmb {
  background-color: #1279be;
  background-image: url("svg/tmb.svg");
}
i.bank.bank-scb {
  background-color: #4e2e7f;
  background-image: url("svg/scb.svg");
}
i.bank.bank-citi {
  background-color: #1583c7;
  background-image: url("svg/citi.svg");
}
i.bank.bank-smbc {
  background-color: #a0d235;
  background-image: url("svg/smbc.svg");
}
i.bank.bank-scbt {
  background-color: #0f6ea1;
  background-image: url("svg/sc.svg");
}
i.bank.bank-cimb {
  background-color: #7e2f36;
  background-image: url("svg/cimb.svg");
}
i.bank.bank-uob {
  background-color: #0b3979;
  background-image: url("svg/uob.svg");
}
i.bank.bank-uob {
  background-color: #0b3979;
  background-image: url("svg/uob.svg");
}
i.bank.bank-bay {
  background-color: #fec43b;
  background-image: url("svg/bay.svg");
}
i.bank.bank-mega {
  background-color: #815e3b;
  background-image: url("svg/mega.svg");
}
i.bank.bank-boa {
  background-color: #e11e3c;
  background-image: url("svg/boa.svg");
}
i.bank.bank-cacib {
  background-color: #0e765b;
  background-image: url("svg/cacib.svg");
}
i.bank.bank-gsb {
  background-color: #eb198d;
  background-image: url("svg/gsb.svg");
}
i.bank.bank-hsbc {
  background-color: #fd0d1b;
  background-image: url("svg/hsbc.svg");
}
i.bank.bank-db {
  background-color: #0522a5;
  background-image: url("svg/db.svg");
}
i.bank.bank-ghb {
  background-color: #f57d23;
  background-image: url("svg/ghb.svg");
}
i.bank.bank-baac {
  background-color: #4b9b1d;
  background-image: url("svg/baac.svg");
}
i.bank.bank-mhcb {
  background-color: #150b78;
  background-image: url("svg/mb.svg");
}
i.bank.bank-bnp {
  background-color: #14925e;
  background-image: url("svg/bnp.svg");
}
i.bank.bank-tbank {
  background-color: #fc4f1f;
  background-image: url("svg/tbank.svg");
}
i.bank.bank-ibank {
  background-color: #184615;
  background-image: url("svg/ibank.svg");
}
i.bank.bank-tsco {
  background-color: #12549f;
  background-image: url("svg/tisco.svg");
}
i.bank.bank-kkp {
  background-color: #199cc5;
  background-image: url("svg/kk.svg");
}
i.bank.bank-icbc {
  background-color: #c50f1c;
  background-image: url("svg/icbc.svg");
}
i.bank.bank-tcrb {
  background-color: #0a4ab3;
  background-image: url("svg/tcrb.svg");
}
i.bank.bank-lhbank {
  background-color: #6d6e71;
  background-image: url("svg/lhb.svg");
}
i.bank.bank-ttb {
  background-color: #ecf0f1;
  background-image: url("svg/ttb.svg");
}
i.bank.bank-true {
  background-color: #ecf0f1;
  background-image: url("svg/true.svg");
}
i.bank.bank-pp {
  background-color: #00427a;
  background-image: url("svg/pp.svg");
}

i.bank.bank-pc {
  background-color: #ecf0f1;
  background-image: url("svg/pc.png");
}

.btn-black {
  border-radius: 50px;
  padding: 4px 25px;
  -webkit-box-shadow: 0px 10px 16px 3px rgb(0 0 0 / 49%);
  -moz-box-shadow: 0px 10px 16px 3px rgba(0, 0, 0, 0.49);
  box-shadow: 0px 10px 16px 3px rgb(0 0 0 / 49%);
  color: #fff;
  font-size: 26px;
  background: rgb(0, 0, 0);
  transition: all 0.3s ease;
  border: 0;
}

.btn-black:hover {
  color: orange;
}