/*
0-600px:  phone
600-900px:  tablet portrait
900-1200px:  tablet landscape
1200-1800px: normal style is being applied.
1800px +  big desktop

1em = 16px
*/
.mb4 {
  margin-bottom: 4rem;
}

.mb2 {
  margin-bottom: 2rem;
}

.mt4 {
  margin-top: 4rem;
}

.mt2 {
  margin-top: 2rem;
}

.mt6 {
  margin-top: 6rem;
}

.ml4 {
  margin-left: 4rem;
}

.mr4 {
  margin-right: 4rem;
}

*,
*::after,
*::before {
  /* since we add ::after and ::before element here, so now those element will also have the same property as normal elements have */
  box-sizing: inherit;
  /* added Box sizing Inherit, so it inherited through all the page */
  margin: 0;
  padding: 0;
}

@media (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
}
@media (max-width: 56.25em) {
  html {
    font-size: 50%;
  }
}
@media (min-width: 141.9em) {
  html {
    font-size: 70%;
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield !important;
}

body {
  box-sizing: border-box;
  /* added from * to body. */
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.7;
  height: auto;
  min-height: 50rem;
  display: flex;
}

.btn {
  display: block;
  margin: 1rem auto;
  border-radius: 1rem;
  cursor: pointer;
  transition: ease-in-out 0.1s;
  font-weight: bold;
  font-size: 2.7rem;
  height: 75px;
  width: 225px;
  color: white;
}
.btn:active {
  transform: scale(0.95);
}
.btn_pay {
  background-color: #ff443a;
}
.btn_choose_payment {
  margin-top: 2rem;
  background-color: #ff443a;
}
.btn_secondary {
  background-color: #4d55a6;
  color: white;
}

label {
  display: block;
  margin: 1rem auto;
}

input {
  border: none;
  border-radius: 0.3rem;
  padding: 0.5rem;
  height: 40px;
}

.table {
  margin: 2rem auto;
  width: 70%;
}
@media (max-width: 37.5em) {
  .table {
    width: 100%;
  }
}
.table > tr {
  padding: 0.5rem 1rem;
}

.tableUserInfo {
  display: grid;
  grid-template-rows: repeat(4, min-content);
  grid-template-columns: minmax(72px, 5fr) minmax(72px, 5fr)!important;
/*  grid-template-columns: max-content max-content;*/
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
/*  justify-content: space-evenly;*/
  margin: auto;
  width: 100%;
}

.tableUserPayment {
  display: grid;
  gap: 0px;

  /*    background-color: #2196F3;*/
  padding: 0px;
  grid-template-rows: repeat(4, min-content);
  grid-template-columns: max-content max-content;
}

.main_card {
  margin: 2rem auto;
/*  border-radius: 0.25rem;*/
  padding: 2rem;
  display: grid;
  grid-template-rows: min-content auto 1fr;
  width: 500px;
  background-color: aliceblue;
  border-radius: 10px;
}
@media (max-width: 37.5em) {
  .main_card {
    min-width: 360px;
    width: 95%;
  }
}

.brand {
  text-align: center;
  display: block;
  position: absolute;
  left: 50%;
  top: 2.5%;
  transform: translate(-50%, 100%);
  width: auto;
  min-width: 15rem;
  height: auto;
}
.brand_logo {
  padding: 1rem;
  margin-bottom: 1rem;
  display: inline-block;
  width: 15rem;
  height: auto;
}
.brand_moveUp {
  display: none;
  transition: all 0.3s ease-in-out;
}
.brand_moveDown {
  display: inline-block;
  transition: all 0.3s ease-in-out;
}

.agent {
  display: block;
  text-align: center;
}
.agent_video {
  padding: 1rem;
  margin-bottom: 1rem;
  display: inline-block;
  width: 10rem;
  height: auto;
}
@media (max-width: 37.5em) {
  .agent_video {
    width: 20rem;
  }
}

.customer_name {
  margin: 1rem auto;
}

.dynamic_data_login {
  text-align: center;
}
.dynamic_data_login form {
  margin-top: 1rem;
}

.confirm_message {
  text-align: center;
}

#card_expiry_div {
  display: grid;
  gap: 65px;
  grid-template-columns: max-content max-content max-content;
  margin-bottom: 10px;
}

@media (max-width: 600px) {
  #card_expiry_div {
    display: grid;
    gap: 18px; /* Adjust gap for better spacing on small screens (phones) */
    grid-template-columns: max-content max-content max-content;
    margin-bottom: 10px;
  }
}

#card_num_div {
  display: grid;
  gap: 5px;
  /*    background-color: #2196F3;*/
  padding: 0px;
  grid-template-columns: max-content max-content;
}

.input_pin {
  width: 8rem;
  height: 2rem;
  text-align: center;
  margin-top: 1rem;
  border: 1px solid black;
  color: black;
}
@media (max-width: 37.5em) {
  .input_pin {
    height: 3.4rem;
    background-color: white;
    font-size: 18px;
    border: 1px solid black;
    color: black;
    width: 110px;
  }
}

.resend_pin_link {
  font-size: 0.7rem;
  margin-top: -1rem;
}

.btn_submit_login {
  width: 250px!important;
  height: 100px!important;
/*  width: 225px;*/
  margin: 1rem auto;
 /* background-color: #7952B3;*/
  color: white;
}

.btn_send_pin {
  margin-top: 2rem;
  background-color: #FFC107;
  color: #333;
}

.btn_send_pin_disabled {
  margin-top: 2rem;
  background-color: #a2a3a9;
  color: #333;
}

#introduction_video {
  margin: 2rem auto auto;
  clip-path: ellipse(37% 50% at 50% 50%);
}

.call_assistance {
  display: flex;
  width: 42%;
  justify-content: center;
 align-items: center;
  margin: 1rem auto auto;
}
@media (max-width: 37.5em) {
  .call_assistance {
    width: 55%;
  }
}

.need_assistance {
  display: flex;
/*  width: 50%;*/
  margin: auto;
}
@media (max-width: 37.5em) {
  .need_assistance {
    width: 63%;
  }
}
.need_assistance img {
  width: 40px;
  height: 40px;
}

.need_assistance_div {
  display: flex;
    width: 50%;
  margin: auto;
}
.need_assistance_div img {
  width: 55px;
  height: 55px;
}

.hide_default {
  display: none;
  transition: all 0.3s ease-in-out;
}

.hide_video_default {
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.show_default {
  display: block;
  transition: all 0.3s ease-in-out;
  margin: auto;
}

.show_video {
  height: 240px;
  opacity: 0;
  overflow: hidden;
  -moz-animation: show_slide 1s ease forwards;
  -webkit-animation: show_slide 1s ease forwards;
  -o-animation: show_slide 1s ease forwards;
  -ms-animation: show_slide 1s ease forwards;
  animation: show_slide 1s ease forwards;
}

@keyframes moveUp {
  0% {
    transform: translate(-50%, 200%);
  }
  100% {
    transform: translate(-50%, 2%);
  }
}
@keyframes moveDown {
  0% {
    transform: translate(-50%, 2%);
  }
  100% {
    transform: translate(-50%, 200%);
  }
}
@-moz-keyframes show_slide /* Firefox */ {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes show_slide /* Safari and Chrome */ {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-o-keyframes show_slide /* Opera */ {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-ms-keyframes show_slide /* IE10 */ {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes show_slide {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.hide_video {
  height: 240px;
  opacity: 1;
  overflow: hidden;
  -moz-animation: hide_slide 1s ease forwards;
  -webkit-animation: hide_slide 1s ease forwards;
  -o-animation: hide_slide 1s ease forwards;
  -ms-animation: hide_slide 1s ease forwards;
  animation: hide_slide 1s ease forwards;
}

@-moz-keyframes hide_slide /* Firefox */ {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes hide_slide /* Safari and Chrome */ {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-o-keyframes hide_slide /* Opera */ {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-ms-keyframes hide_slide /* IE10 */ {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes hide_slide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
#start_video,
#stop_video {
  cursor: pointer;
}

.partial_payment_selection {
  margin-top: 1rem;
}

.payment_selection {
  margin-top: 1rem;
/*  display: grid;
  grid-template-rows: max-content min-content min-content;*/
}
.payment_selection a {
  font-size: 0.6rem;
}

#payingAmount_duplicate {
  width: 110px;
  text-align: left;
  font-size: 18px;
  border: 1px solid black;
  background-color: white;
  color: black;
  height: 34px;
}

#frmPaymentMethodSelectionddd {
  display: grid;
  grid-template-columns: min-content max-content;
  grid-template-rows: repeat(2, 1fr);
  column-gap: 2rem;
  align-items: center;
  justify-content: center;
  text-align: left;
}
#frmPaymentMethodSelection input.btn {
  grid-column: 1/-1;
}
#frmPaymentMethodSelection label {
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 0.9rem;
  width: 247px;
  text-align: center;
}

#institutions_list {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1.5rem;
  justify-items: center;
  width: 75%;
  margin: auto;
}
#institutions_list img{
width: 60px;
  height: 60px;
}

@media (max-width: 37.5em) {
  #institutions_list {
    width: 600px;
  }
}
@media (max-width: 75em) {
  #institutions_list {
    width: 100%;
  }
}
#institutions_list > * {
  cursor: pointer;
}

.frm_credit_eft_info {
  display: grid;
/*  grid-template-columns: repeat(6, 1fr);*/
  grid-template-rows: repeat(5, max-content);
  align-items: baseline;
  grid-column-gap: 1rem;
  width: 100%;
  max-width: 460px;
  margin: auto;
  justify-content: center;
  font-size: 18px;
}
.frm_credit_card_info {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(5, max-content);
  align-items: baseline;
  grid-column-gap: 1rem;
  width: 100%;
  max-width: 360px;
  margin: auto;
  justify-content: center;
  font-size: 18px;
}
@media (max-width: 75em) {
  .frm_credit_card_info {
    grid-column-gap: 0.4rem;
    max-width: 300px;
  }
  .frm_credit_eft_info {
    grid-column-gap: 0.4rem;
    max-width: 300px;
  }
}
@media (max-width: 112.5em) {
  .frm_credit_card_info {
    max-width: 100%;
  }
  .frm_credit_eft_info {
    max-width: 100%;
  }
}
.frm_credit_card_info .g-recaptcha {
  margin-top: 1rem;
}
.frm_credit_eft_info .g-recaptcha {
  margin-top: 1rem;
}
.frm_credit_card_info input:not(:last-child) {
  border: 1px solid black;
  color: black;
  height: 50px;
  width: 100%;
  margin: auto;
  font-size: 18px;
}
.frm_credit_eft_info input{
  border: 1px solid black;
  color: black;
  height: 50px;
  width: 100%;
  margin: auto;
  font-size: 18px;
}
@media (max-width: 75em) {
  .frm_credit_card_info input:not(:last-child) {
    height: 40px;
  }
  .frm_credit_eft_info input {
    height: 40px;
  }
}
.frm_credit_card_info select {
  background-color: #e7dcdc;
  border-radius: 0.3rem;
  border: 1px solid black;
  font-size: 18px;
}
.frm_credit_card_info .card_name {
  grid-row: 1/2;
  grid-column: 1/5;
  margin-left: 1.875rem!important;
}
.frm_credit_card_info .card_number {
  grid-row: 2/3;
  grid-column: 1/5;
  margin-left: 1.875rem!important;
}
.frm_credit_card_info .ccicon_web_pay {
  width: 67px;
  height: 100px;
  grid-row: 2/3;
  grid-column: 5/-1;
  margin-left: 1.875rem!important;
}
.frm_credit_card_info .card_mm {
  grid-row: 3/4;
  grid-column: 1/3;
  margin-left: 1.875rem!important;
}
.frm_credit_card_info .card_yy {
  grid-row: 3/4;
  grid-column: 3/5;
  margin-left: 1.25rem!important;
}
.frm_credit_card_info .card_cvv {
  grid-row: 3/4;
  grid-column: 5/7;
  margin-left: 10px;
}
.frm_credit_card_info #cvv {
  padding: 0.9rem;
  margin: 0;
  width: 70px;
  margin-left: .625rem!important;
}
.frm_credit_card_info .g-recaptcha {
  grid-row: 4/5;
  grid-column: 1/-1;
  margin-left: 1.875rem!important;
}
.frm_credit_card_info .card_pay_btn {
  grid-row: 5/-1;
  grid-column: 1/-1;
}

.declined_checkmark,
.checkmark {
  padding: 0;
}
@media (max-width: 37.5em) {
  .declined_checkmark,
.checkmark {
    width: 100px;
    height: auto;
  }
}

.payment_declined {
  padding: 0;
  font-size: 40px;
}
@media (max-width: 37.5em) {
  .payment_declined {
    font-size: 30px;
  }
}

.payment_declined_reason,
.payment_declined_status_code {
  padding: 0;
  font-size: 25px;
}
@media (max-width: 37.5em) {
  .payment_declined_reason,
.payment_declined_status_code {
    font-size: 20px;
  }
}

.payment_confirmation_code {
  font-size: 40px;
}
@media (max-width: 37.5em) {
  .payment_confirmation_code {
    font-size: 30px;
  }
}

.payment_confirmation_code_sms {
  font-size: 25px;
  width: 66%;
}
@media (max-width: 37.5em) {
  .payment_confirmation_code_sms {
    font-size: 20px;
  }
}

.bambora_msg {
  font-size: 25px;
}
@media (max-width: 37.5em) {
  .bambora_msg {
    font-size: 20px;
  }
}

.conf_btn {
/*  width: auto !important;*/
  width: 300px !important;
  padding: 0.5rem 1rem;
}
/*@media (max-width: 37.5em) {
  .conf_btn {
    width: 50% !important;
  }
}*/

.declined_wrapper.fade_in_img,
.approved_wrapper.fade_in_img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: auto;
  transform: translate(-50%, 38%);
  animation: show_slide 1s ease forwards;
}
@media (max-width: 37.5em) {
  .declined_wrapper.fade_in_img,
.approved_wrapper.fade_in_img {
    transform: translate(-50%, 5%);
  }
}

.approved_wrapper.fade_in_img {
  top: -100px;
}

.declined_wrapper.fade_out_img,
.approved_wrapper.fade_out_img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: auto;
  transform: translate(-50%, 38%);
  animation: hide_slide 1s ease forwards;
}
@media (max-width: 37.5em) {
  .declined_wrapper.fade_out_img,
.approved_wrapper.fade_out_img {
    transform: translate(-50%, 5%);
  }
}

.approved_wrapper.fade_out_img {
  top: -100px;
}

.pay_now_button {
  width: 250px!important;
  height: 100px!important;
}

.pay_method_button {
  width: 250px!important;
  height: 100px!important;
}

.pay_button {
  width: 250px!important;
  height: 100px!important;
  border: none!important;
}

.send_pin_button {
  margin-top: 2rem;
  width: 250px!important;
  height: 100px!important;
}

.send_pin_button_input_disabled {
  margin-top: 2rem;
  border-radius: 25px;
  height: 45px;
  width: 310px;
  background: #D9D9D9;
  color: white;
  font-size: 20px;
  cursor: default;
}

.send_pin_button_input_green {
  margin-top: 2rem;
  border-radius: 25px;
  height: 45px;
  width: 310px;
  background: #7Ed957;
  color: white;
  font-size: 20px;
  cursor: default;
}

.send_pin_button_input_purple {
  margin-top: 2rem;
  border-radius: 25px;
  height: 45px;
  width: 310px;
  background: #6B73C4;
  color: white;
  font-size: 20px;
}

.send_pin_button_input_red {
  margin-top: 2rem!important;
  border-radius: 25px!important;
  height: 45px!important;
  width: 310px!important;
  background: red!important;
  color: white!important;
  font-size: 20px!important;
  border: unset!important;;
}

.partial_payment_button_input_grey {
  margin-top: 2rem!important;
  border-radius: 25px!important;
  height: 45px!important;
  width: 310px!important;
  background: #D9D9D9!important;
  font-size: 20px!important;
  border: unset!important;
  color: white!important;
}

.card_payment_button {
  width: 250px!important;
  height: 100px!important;
}

.bank_transfer_button {
  width: 250px!important;
  height: 100px!important;
}

.tooltipLink {
  position: relative;
  display: inline-block;
}

.tooltipLink .tooltipLinktext {
  visibility: hidden;
  width: 120px;
  background-color: #b8daff;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltipLink:hover .tooltipLinktext {
  visibility: visible;
}

.company_logo {
  height: 100px;
  width: 300px;
}

.input_defaults{
  border: 1px solid #45BDEE;
  border-radius: 6px;
  height: 30px;
  padding-left: 5px;
  color: #45BDEE!important;
  background-color: white!important;
}
/*# sourceMappingURL=styles.css.map */

/*#main-container {
  display: flex;
  width: 100%;
  justify-content: center;
  !*background-color: #0666a3;*!
}
#main-container div {
  !*    background-color: #8ebf42;*!
  padding: 2px!important;
}*/