/*!
Theme Name: iPay
Theme URI: http://underscores.me/
Author: featherwebs
Author URI: http://featherwebs.com/
Description: Description
Version: 2.2.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ipay-website
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ipay-website is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/

*/
.fw-hero-background {
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.3),
      transparent
    ),
    url("/wp-content/themes/ipay/assets/hero-background.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
}

.background-image {
  background-image: url("/wp-content/themes/ipay/assets/ipay-features.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100%;
  width: 100%;
}

.fw-text-underline {
  text-decoration: underline;
  text-underline-offset: 1.5px;
  text-decoration-skip-ink: none;
  text-decoration-thickness: 1px;
}

.fw-sideNavbar.active {
  right: 0;
  transition: all 0.5s ease-in-out;
}

.fw-sideNavbar.inactive {
  right: -100%;
  transition: all 0.5s ease-in-out;
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: 100% !important;
}

.swiper-slide {
  display: flex !important;
}

.fw-line {
  position: absolute;
  height: 120%;
  width: 3px;
  background-color: #f6921f;
  top: 16px;
}
.fw-policy-timeline-item:first-child .fw-line {
  top: 50px;
}

.fw-policy-timeline-item:last-child .fw-line {
  top: 0;
  height: 50px;
}

.select2-container{
  width: 100% !important;
}

@media (min-width: 1024px) {
  .fw-policy-timeline-item:last-child .fw-line {
    height: 55px;
  }
}

details > summary {
  list-style-image: url("./assets/arrow-left.svg");
}
details[open] > summary {
  list-style-image: url("./assets/arrow-down.svg");
}

details > summary::-webkit-details-marker {
  display: none;
}

.fw-footer-mob-link details > summary {
  list-style: none;
}
.fw-footer-mob-link details[open] > summary {
  list-style: none;
}

.dropdown {
  box-sizing: border-box;
  position: relative;
  margin-bottom: 24px;
}
.input-box {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
.input-box::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7' fill='none'%3E%3Cpath d='M8.57751 0.744141L5 4.32164L1.4225 0.744141L0.244171 1.92247L5 6.67831L9.75584 1.92247L8.57751 0.744141Z' fill='%23484848'/%3E%3C/svg%3E");
  position: absolute;
  font-size: 18px;
  top: 50%;
  right: 15px;
  transform: translate(0, -50%);
  width: fit-content;
  height: fit-content;
}

.input-box:empty::after {
  content: attr(data-title);
  color: rgba(0, 0, 0, 0.5);
}
.list {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  width: 100%;
  height: fit-content;
  background: white;
  margin-top: 10px;
  border-radius: 2mm;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  max-height: 0;
  transition: 0.25s ease-out;
  height: 200px;
  overflow-y: auto;
}
.list input {
  display: none;
}
.list label {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  padding: 10px 15px;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}
.list label .material-icons-outlined,
.input-box .material-icons-outlined {
  margin-right: 5px;
  font-size: 22px;
}
.list label:hover {
  background: rgba(0, 0, 0, 0.08);
}
input:checked + label {
  color: rgb(20, 117, 213);
  background: rgb(238, 245, 252);
}
input:checked + label::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translate(0, -50%);
  font-size: 18px;
}
.open {
  outline: 0.7mm solid rgb(20, 117, 213);
}

/* Move reCAPTCHA v3 badge to the left */
.grecaptcha-badge {
  width: 70px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  left: 0px !important;
}
.grecaptcha-badge:hover {
  width: 256px !important;
}

.fw-red-star {
  color: red;
}

/* button primary animation */
.button {
  pointer-events: auto;
  cursor: pointer;
  border: none;
  position: relative;
}

.button::before,
.button::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.button--pan {
  border: 2px solid #2d4acc;
  overflow: hidden;
  color: #fff;
}

.button--pan span {
  position: relative;
  /* z-index: 999; */
  /* mix-blend-mode: difference; */
  color: #fff;
  transition: all 0.6s ease-in-out;
}
.button--pan:hover span {
  /* mix-blend-mode: difference; */
  color: #2d4acc;
}

.button--pan::before {
  content: "";
  background: #2d4acc;
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}

.button--pan:hover::before {
  transform: translate3d(0, -100%, 0);
}

/* header nav link animation */
.link {
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}

.link::before,
.link::after {
  position: absolute;
  width: 100%;
  height: 1px;
  background: currentColor;
  top: 100%;
  left: 0;
  pointer-events: none;
}

.link::before {
  content: "";
}

.fw-underline-animation::before {
  transform-origin: 50% 100%;
  transition: clip-path 0.3s, transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
  clip-path: polygon(
    0% 0%,
    0% 100%,
    0 100%,
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    0 100%,
    100% 100%,
    100% 0%
  );
}

.fw-underline-animation:hover::before {
  transform: translate3d(0, 2px, 0) scale3d(1.08, 1, 1);
  clip-path: polygon(
    0% 0%,
    0% 100%,
    50% 100%,
    50% 0,
    50% 0,
    50% 100%,
    50% 100%,
    0 100%,
    100% 100%,
    100% 0%
  );
}
.fw-underline-animation.active::before {
  transform: translate3d(0, 1px, 0) scale3d(1.08, 1, 1);
  clip-path: polygon(
    0% 0%,
    0% 100%,
    50% 100%,
    50% 0,
    50% 0,
    50% 100%,
    50% 100%,
    0 100%,
    100% 100%,
    100% 0%
  );
}
.fw-underline-animation span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.2, 1, 0.8, 1);
}

.fw-underline-animation:hover span {
  transform: translate3d(0, -2px, 0);
}

/* sidenav bar */
.no-scroll {
  overflow: hidden;
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  display: none;
}

.overlay.active {
  display: block;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

/* datatable */
#agent-table--js_filter {
  float: left;
  margin-bottom: 32px;
}
#agent-table--js_filter input {
  display: flex;
  width: 280px;
  padding: 8px 16px 8px 42px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  border: 1px solid var(--component-outline, #b4b4b4);
  position: relative;
  background: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 18C11.775 17.9996 13.4988 17.4054 14.897 16.312L19.293 20.708L20.707 19.294L16.311 14.898C17.405 13.4997 17.9996 11.7754 18 10C18 5.589 14.411 2 10 2C5.589 2 2 5.589 2 10C2 14.411 5.589 18 10 18ZM10 4C13.309 4 16 6.691 16 10C16 13.309 13.309 16 10 16C6.691 16 4 13.309 4 10C4 6.691 6.691 4 10 4Z' fill='%231C1C1C' /%3E%3C/svg%3E")
    no-repeat left 8px center / 24px;
  background-size: 24px;
  outline: none;
}
.fw-search-icon {
  /* position: absolute; */
  top: 0;
  left: 0;
}

/* #agent-table--js_length {
  display: none;
} */

table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
  padding: 12px 16px !important;
  border-bottom: none !important;
}

table.dataTable tbody th,
table.dataTable tbody td {
  padding: 12px 16px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 6px !important;
  border: none !important;
}

.paginate_button .current {
  background: linear-gradient(
    to bottom,
    rgba(230, 230, 230, 0.05) 0%,
    rgba(0, 0, 0, 0.05) 100%
  ) !important;
}

/* 
.datatable {
  margin-bottom: 2rem;
} */

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  color: white !important;
}

.dataTables_wrapper no-footer {
  margin-bottom: 1rem;
}

table.dataTable tbody tr {
  border: 1px solid #888 !important;
}

table.dataTable.no-footer {
  border-bottom: none !important;
}

#agent-table--js_info {
  margin-top: 2.3rem;
}

.dataTables_wrapper .dataTables_info {
  padding: 0 !important;
}
/* pagination datatable */
#agent-table--js_paginate {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

#agent-table--js_previous {
  margin-left: 1rem;
}

#agent-table--js_previous,
#agent-table--js_next {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  height: 40px;
  width: 40px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: white !important;
}

#agent-table--js_paginate span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.paginate_button {
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  border-radius: 4px !important;
  border: 1px solid #888 !important;
}

.paginate_button.current {
  background-color: #2d4acc !important;
  color: white !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    #2d4acc
  ) !important;
  /* Chrome,Safari4+ */
  background: #2d4acc !important;
  background-color: #2d4acc !important;
  color: white !important;
}

/* rows per page datatable */
.dataTables_wrapper .dataTables_length select {
  padding: 9px 12px !important;
  border-radius: 4px !important;
  border: 1px solid #888 !important;
  margin-left: 8px !important;
}

.pull-bottom {
  margin-top: 1rem;
}

#agent-table--js_info,
#agent-table--js_length {
  color: #484848;
}
#agent-table--js_paginate {
  display: flex;
  justify-content: center;
}
@media (min-width: 768px) {
  #agent-table--js_filter input {
    width: 370px;
  }
  .pull-bottom {
    display: flex;
    justify-content: end;
  }
  #agent-table--js_paginate span {
    margin-top: 1.5rem;
  }
  .pull-bottom {
    margin-top: 1.9rem;
  }
}

.fw-sidenavbar-hidden {
  opacity: 0 !important;
}

.select2-selection__rendered {
  line-height: 44px !important;
}
.select2-container .select2-selection--single {
  height: 46px !important;
  border-radius: 8px !important;
}
.select2-selection__arrow {
  height: 46px !important;
}

.select2-container--default .select2-selection--single {
  /* 209 213 219 */
  border: 1px solid #d1d5db !important;
}

.select2-container--default .select2-results__option--disabled {
  display: none;
}

/* contact form button */
.fw-contact-btn {
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 9999px;
  padding: 0.5rem 2rem;
  background-color: #2d4acc !important;
  border: 2px solid #2d4acc !important;
  color: #ffffff;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fw-contact-btn:hover {
  background-color: #ffffff !important;
  border-color: #2d4acc !important;
  color: #2d4acc !important;
}

/* selectize */
.selectize-input{
  width: 100% !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 14px 1rem !important;
  font-size: 0.875rem !important;
}

.fw-home-agents-name{
  padding: .7rem 1rem;
}
.name{
  font-size: 0.8rem;
  color: #1c1c1c;
}

.selectize-control.single .selectize-input{
  background-image: none !important;
  background-color: white !important;
}

.selectize-dropdown .selected{
  background-color: #f0f2fb !important;
  color: white !important;
}

.selectize-dropdown-content{
  position: relative !important;
  z-index: 10 !important;
}
.partner-marquee {
  overflow: hidden;
  width: 100%;
}

.partner-track {
  display: flex;
  gap: 20px;
}

.partner-item {
  flex: 0 0 auto;
  width: 220px;
  display: flex;
  justify-content: center;
}
.partner-item img {
  object-fit: contain !important;
  height: unset;
}