@import url(/assets/scss/icons/font-awesome/css/font-awesome.css);
@import url(/assets/scss/icons/simple-line-icons/css/simple-line-icons.css);
@import url(/assets/scss/icons/weather-icons/css/weather-icons.min.css);
@import url(/assets/scss/icons/linea-icons/linea.css);
@import url(/assets/scss/icons/themify-icons/themify-icons.css);
@import url(/assets/scss/icons/flag-icon-css/flag-icon.min.css);
@import url(/assets/scss/icons/material-design-iconic-font/css/materialdesignicons.min.css);
@import url(/assets/css/spinners.css);
@import url(/assets/css/animate.css);
html {
    font-size: 14px;
}

/* Tablet portrait: show mobile layout, hide desktop layout */
.tablet-mobile-view-wrapper {
    display: none;
}

.tablet-mobile-header-wrapper,
.tablet-mobile-header-wrapper .onepip-mobile-header {
    display: none !important;
}

@media (max-width: 1023px) {
    .desktop-view-wrapper {
        display: none !important;
    }
    .tablet-mobile-view-wrapper {
        display: block !important;
    }
    .desktop-nav-wrapper {
        display: none !important;
    }
    .tablet-mobile-header-wrapper,
    .tablet-mobile-header-wrapper .onepip-mobile-header {
        display: flex !important;
    }
    body {
        zoom: 1 !important;
    }
}

@media (min-width: 768px) {
    .onepip-menu {
        display:none;
    }
  html {
    font-size: 16px;
  }
}
html {
  position: relative;
  min-height: 100%;
}
.grecaptcha-badge {
    visibility: hidden;
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.main-banner-icon-contact, .main-banner-icon-rmb{
    position: fixed;
    right: 32px;
    z-index: 5;
}
.main-banner-icon-contact img, .main-banner-icon-rmb img{
    width: 72px;
}
.main-banner-icon-contact{
    bottom: 10px;
    cursor:pointer;
}
.main-banner-icon-rmb{
    bottom: 92px;
}
.language-selector td {
    padding-left: 5px;
}
.language-selector .icon-my {
    height: 24px;
    width: 33px;
    background-size: cover;
}
.navbar-collapse {
    display: flex;
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    margin-left: auto; 
    margin-right: auto; 
/*    max-width: 87%; */
    /*max-width: 1460px;*/
    /* Cap the nav content at the 1920 "Full HD" design width so it stays centered
       and doesn't spread to the screen edges on screens wider than 1920px. */
    max-width: 1920px;
}
.navbar {
/*    top: 25px;
*/    position: fixed;
    width: 100%;
    align-items: center;
    z-index: 5;
    height:76px;
    padding: 0 30px;
}
.navbar-logo {
    width: 163px;
/*    margin-left:50px;
*/}
.navbar-nav{
    flex-direction: row;
}
.navbar-brand {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    /* margin-right: 1rem; */
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
    margin: 10px 22px 10px 0;
}
.navbar-right-wrapper {
  /*  border-top: 2px solid #FFAC00;
    border-bottom: 2px solid #FFAC00;
    border-left: 2px solid #FFAC00;
    border-right: none;
    background: white;
    padding-right: 30px;
    border-top-left-radius: 38px;
    border-bottom-left-radius: 38px;*/
}
.navbar-left {
  /*  padding-left: 30px;
    border-top: 2px solid #FFAC00;
    border-bottom: 2px solid #FFAC00;
    border-right: 2px solid #FFAC00;
    border-left: none;
    background: white;
    border-top-right-radius: 38px;
    border-bottom-right-radius: 38px;*/
}
.navbar-right {
    margin: 0 10px;
}
.language-selected {
    background: none;
    border: none;
    font-family: Helvetica-Neu-Bold;
    font-size: 12px;
    color: #000000;
    letter-spacing: 0.67px;
}
.language-selected:focus{
    outline: none;
}
.language-selected img {
    width: 24px;
    margin-right: 7px;
    margin-bottom: 1px;
}
.dropdown-toggle:after {
    content: none;
}
.language-selected span{
    margin-right: 10px;
}
.loginicon {
    width: 18px;
    margin-right: 9px;
    margin-bottom: 1px;
}
.nav-link {
    font-family: Helvetica-Neu-Bold;
    font-size: 16px;
}
.btn-login-opx {
    color: #FFFFFF !important;
    border: 1px solid #FBAF19 !important;
    padding: 2px 18px 2px 18px !important;
    margin-right: 25px;
    font-family: Helvetica-Neu-Bold;
    font-size: 12px;
    background-color: #FFAC00;
    border-radius: 28px;
    line-height: 25px;
}
.bg-img {
    background-image: none;
    /*height: calc(100vh - 60px);*/
    height: 956px;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    /*display:flex;*/
    padding-top: 60px;
    animation: myfirst 1s;
}
.bg-hkzoomin {
    background-position: center right;
    animation: hk-zoomin 25s forwards;
}
@media screen and (max-width: 1070px){
    .bg-hkzoomin {
        background-position: center;
        animation: hk-zoomin-m 25s forwards;
    }
    /*.hk-background-video {
        height:90vh !important;
    }*/
}
/*@media screen and (min-width: 1070px) {
    .hk-background-video {
        height: 90vh !important;
    }
}
@media screen and (max-height: 1070px) {
    .hk-background-video {
        height: 870px !important;
    }
}
@media screen and (min-height: 1070px) {
    .hk-background-video {
        height: 80vh !important;
    }
}
@media screen and (min-height: 1250px) {
    .hk-background-video {
        height: 70vh !important;
    }
}
@media screen and (min-height: 1420px) {
    .hk-background-video {
        height: 60vh !important;
    }
}
@media screen and (min-height: 1660px) {
    .hk-background-video {
        height: 50vh !important;
    }
}*/
.bg-sgzoomin {
    background-position: center;
    animation: sg-zoomin 25s forwards;
}
@media screen and (min-width: 1990px) {
    .bg-sgzoomin {
        background-position: center 55% !important;
    }
}
@media screen and (max-width: 620px) {
    .bg-sgzoomin {
        background-position: center;
        animation: sg-zoomin-m 25s forwards;
    }
    .globe-arrow{
        display: none;
    }
}
.bg-myzoomin {
    background-position: bottom center;
    animation: my-zoomin 15s forwards;
}

@media screen and (min-width: 1366px) {
    .bg-sgzoomin {
        background-position: center 55% !important;
    }

    .bg-myzoomin {
        background-position: bottom center;
        animation: my-zoomin-m 15s forwards;
    }

    .divLanding {
        transform: scale(0.95);
    }
}

@media screen and (max-width: 1070px) {
    .bg-myzoomin {
        background-position: bottom center;
        animation: my-zoomin-m 15s forwards;
    }
}
@media screen and (max-width: 1215px) {
    .bg-myzoomin {
        background-position: bottom center;
        animation: my-zoomin-l 15s forwards;
    }
}
@keyframes hk-zoomin {
    0% {
        background-size: 100%;
    }
    100% {
        background-size: 120%;
    }
}

@keyframes hk-zoomin-m {
    0% {
        background-size: 150% 100%;
    }

    100% {
        background-size: 200% 150%;
    }
}

@keyframes sg-zoomin {
    from {
        background-size: 150%;
    }

    to {
        background-size: 200%;
    }
}
@keyframes sg-zoomin-m {
    from {
        background-size: 150% 150%;
    }

    to {
        background-size: 200% 200%;
    }
}
@keyframes sg-zoomin-l {
    from {
        background-size: 125% 125%;
    }

    to {
        background-size: 175% 175%;
    }
}
@keyframes my-zoomin {
    from {
        background-size: 100% 110%;
    }
    to {
        background-size:120% 130%;
    }
}
@keyframes my-zoomin-m {
    from {
        background-size: 120% 120%;
    }

    to {
        background-size: 140% 120%;
    }
}
@keyframes my-zoomin-l {
    from {
        background-size: 120% 120%;
    }
    to {
        background-size: 140% 140%;
    }
}
@keyframes myfirst {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
.hk-background-video {
    object-fit: cover;
    z-index: -1;
    height: 1000px !important;
    width: 101% !important;
    position: absolute;
    margin-top: -60px;
}
.sg-background-video {
    object-fit: cover;
    z-index: -1;
    height: 1000px !important;
    width: -webkit-fill-available !important;
    position: absolute;
    margin-top: -60px;
}
.my-background-video {
    object-fit: cover;
    z-index: -1;
    height: 1000px !important;
    width: -webkit-fill-available !important;
    position: absolute;
    margin-top: -60px;
}
.hero-title {
    font-family: Helvetica-Neu-Bold;
    font-size: 42px;
    letter-spacing: -0.88px;
    line-height: 0.8;
    color: white;
    text-shadow: 0px 4px 4px rgba(0,0,0, 1);
    margin-bottom: 15px;
}

.hero-subtitle {
    font-family: Helvetica-Neu-Medium;
    font-size: 36px;
    letter-spacing: -0.75px;
    line-height: 0.8;
    color: white;
    text-shadow: 0px 4px 4px rgba(0,0,0, 1);
/*    border-bottom: 3px solid white;
*/    padding-bottom: 21px;
    margin-bottom: 20px;
    width: max-content;
    margin-left: auto;
}
.currenciesicons {
    width: 235px;
    margin-top: 25%;
}
.flag-icon-rm {
    background-image: url("/assets/scss/icons/flag-icon-css/flags/cn.svg");
}
.banner-button-heading {
    font-family: Helvetica-Neu-Bold;
    font-size: 21px;
    letter-spacing: -0.44px;
    color: #FFFFFF;
    line-height: 1;
    margin-right: 10px;
    text-shadow: 0px 0px 20px rgb(0 0 0 / 50%);
}
/*circle {
    stroke-dasharray: 35;
    stroke-dashoffset: 35;
    animation: circle 1s linear forwards;
    animation-iteration-count: infinite;
    fill: none;
}*/
.bg-img .right-col {
    height: 100%;
}
.phone-outline-svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.iphone-outline {
    stroke-dasharray: 1994;
    stroke-dashoffset: 1994;
    animation: dash 1s linear forwards;
    /*animation-iteration-count: infinite;*/
    fill-opacity: 0;
}
.w-90{
    width: 90% !important;
}
.loader {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader img {
    max-width: 100px;
    max-height: 100px;
}
.loader:before{
    content: '';
    display: block;
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #FCAF17; /* Blue */
    border-radius: 50%;
    width: 20%;
    padding-top: 18%;
    animation: spin 2s linear infinite;
    position: absolute;
}
.loading-text {
    font-size: 11px;
    padding-top: 15px;
    padding-bottom: 15px;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.carousell-wrapper {
    /*width: 330.5px;*/
    /*width: 100%;*/
    margin-left: 6px;
    margin-top: 40px;
}

#cards {
    display: flex;
    position: relative;
    height: 100%;
    margin-top: 60px;
}
.opacity-100{
    opacity: 1 !important;
}

.pallet {
    width: 370px;
    /*height: 530px;*/
    height: 686px;
    /*transition: all 0.5s cubic-bezier(0.4, 0, 1, 1);*/
    transition: transform 0.5s ease 0s, opacity 0.5s ease 0.5s;
    position: absolute;
    background-color: #ffffff;
    left: 23%;
    border-radius: 51px;
    -webkit-border-radius: 51px;
    -moz-border-radius: 51px;
    border: 5px solid #45475C;
}

.pallet:before{
    content: "";
    border: 5px solid white;
    width: 380px;
    height: 697px;
    position: absolute;
    top: -11px;
    border-radius: 53px;
    left: -10px;
    z-index: -1;
}
.p-left, .p-right {
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0s;
}

.p-left {
    transform: perspective(100vh) translateX(-320px) rotateY(-30deg) scale(0.9) translateZ(-200px);
    animation: spinleft 3s 1 ease-out;
    animation-delay: 1s;
}

.p-right {
    transform: perspective(100vh) translateX(320px) rotateY(30deg) scale(0.9) translateZ(-200px);
    animation: spinright 3s 1 ease-out;
    animation-delay: 1s;
}
.p-back {
    opacity: 0;
    visibility: hidden;
    animation: spinback 3s 1 ease-out;
    animation-delay: 1s;
}
.p-back2 {
    opacity: 0;
    visibility: hidden;
    animation: spinback 3s 1 ease-out;
    animation-delay: 1s;
}
.forward {
    z-index: 1;
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.36);
    opacity: 1;
    transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0s;
    animation: spinforward 3s 1 ease-out;
    animation-delay: 1s;
}
@keyframes spinforward {
    /*front*/
    0% {
        transform: unset;
        z-index: 1;
        opacity: 1;
    }
    /*right*/
    25% {
        transform: perspective(100vh) translateX(320px) rotateY(30deg) scale(0.9) translateZ(-200px);
        opacity: 0.4;
    }
    /*back*/
    50% {
        visibility: hidden;
        opacity: 0;
        z-index: -1;
        transform: perspective(100vh) translateX(0px) rotateY(0deg) scale(0.9) translateZ(-200px);
    }
    /*left*/
    75% {
        visibility: visible;
        transform: perspective(100vh) translateX(-320px) rotateY(-30deg) scale(0.9) translateZ(-200px);
        opacity: 0.4;
    }
    /*front*/
    100% {
        transform: unset;
        z-index: 1;
        opacity: 1;
    }
}
@keyframes spinright {
    /*right*/
    0% {
        transform: perspective(100vh) translateX(320px) rotateY(30deg) scale(0.9) translateZ(-200px);
        opacity: 0.4;
    }
    /*back*/
    25% {
        visibility: hidden;
        opacity: 0;
        z-index: -1;
        transform: perspective(100vh) translateX(0px) rotateY(0deg) scale(0.9) translateZ(-200px);
    }
    /*left*/
    50% {
        visibility: visible;
        transform: perspective(100vh) translateX(-320px) rotateY(-30deg) scale(0.9) translateZ(-200px);
        opacity: 0.4;
    }
    /*front*/
    75% {
        transform: unset;
        z-index: 1;
        opacity: 1;
    }
    /*right*/
    100% {
        transform: perspective(100vh) translateX(320px) rotateY(30deg) scale(0.9) translateZ(-200px);
        opacity: 0.4;
    }
}
@keyframes spinback {
    /*back*/
    0% {
        visibility: hidden;
        opacity: 0;
        z-index: -1;
        transform: perspective(100vh) translateX(0px) rotateY(0deg) scale(0.9) translateZ(-200px);
    }
    /*left*/
    25% {
        visibility: visible;
        transform: perspective(100vh) translateX(-320px) rotateY(-30deg) scale(0.9) translateZ(-200px);
        opacity: 0.4;
    }
    /*front*/
    50% {
        transform: unset;
        z-index: 1;
        opacity: 1;
    }
    /*right*/
    75% {
        transform: perspective(100vh) translateX(320px) rotateY(30deg) scale(0.9) translateZ(-200px);
        opacity: 0.4;
    }
    /*back*/
    100% {
        visibility: hidden;
        opacity: 0;
        z-index: -1;
        transform: perspective(100vh) translateX(0px) rotateY(0deg) scale(0.9) translateZ(-200px);
    }
}
@keyframes spinleft {
    /*left*/
    0% {
        visibility: visible;
        transform: perspective(100vh) translateX(-320px) rotateY(-30deg) scale(0.9) translateZ(-200px);
        opacity: 0.4;
    }
    /*front*/
    25%{
        transform: unset;
        z-index: 1;
        opacity: 1;
    }
    /*right*/
    50% {
        transform: perspective(100vh) translateX(320px) rotateY(30deg) scale(0.9) translateZ(-200px);
        opacity: 0.4;
    }
    /*back*/
    75% {
        visibility: hidden;
        opacity: 0;
        z-index: -1;
        transform: perspective(100vh) translateX(0px) rotateY(0deg) scale(0.9) translateZ(-200px);
    }
    /*left*/
    100% {
        visibility: visible;
        transform: perspective(100vh) translateX(-320px) rotateY(-30deg) scale(0.9) translateZ(-200px);
        opacity: 0.4;
    }
}
.result-section {
    display: none;
}
.tracktransaction .tracking-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0px 33px;
    height: 82px;
    align-items: center;
    background-color: #F1F1F1;
    border-radius: 44px 44px 0 0;
}
.owl-item .tracktransaction .tracking-header {
    border-radius: 0;
}
.tracktransaction .tracking-header .header-title {
    font-family: Helvetica-Neu-Bold;
    font-size: 18px;
    width: 58%;
}
.tracktransaction .tracking-header .opx-logo {
    margin: 0;
    width: 72px;
}
.tracktransaction .form-section .form-submission {
   /* padding: 30px;
    background-color: #FFFBF3;*/
    /*margin-top: 95px;*/
    /*display: none;*/
    position: relative;
    padding-bottom: 54px;
}
.tracktransaction .form-section .form-submission > .text-center {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
}
.tracktransaction .form-section .form-submission input:focus::placeholder {
    color: transparent;
}
.tracktransaction .form-section .form-phonesection {
    display: flex;
    width:100%;
  /*  flex-direction: row;
    margin-bottom: 36px;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: space-between;*/
}
#select2-transaction-areacode-results li:first-child, #select2-transaction-areacode-owl-results li:first-child {
    display: none;
}
.tracktransaction .form-section .select2-container .select2-selection--single {
    background-color: unset;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid #FFAC00;
}
.tracktransaction .form-section .select2-container .select2-selection--single.transaction-validation {
    border-bottom: 2px solid #B02330;
}
.tracktransaction .form-section .select2-container .select2-selection__rendered span {
    margin-left: 32px;
    margin-right:20px;
}
.tracktransaction .form-section .select2-container .select2-selection__rendered img {
    width: unset;
    bottom: 9px;
    z-index: 0;
    margin-left:10px;
}
.tracktransaction .form-section .form-phonesection-mobile .select2-container, .tracktransaction .form-section .form-phonesection-mobile #transaction-phoneno {
    width: 100% !important;
    margin-bottom: 10px;
}
.tracktransaction .form-section .transaction-otp {
    /* position: absolute; */
    top: 15%;
    left: 0;
    /* margin: 20px; */
    padding: 10px;
    /* background-color: #FFFBF3;
    /* padding-bottom: 50px; */
    /* box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3); */
    display: none;
    /* width: -webkit-fill-available; */
    height: 218px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
.tracktransaction .form-section .transaction-otp b, .tracktransaction .form-section .transaction-otp p {
    text-align: left;
    padding-inline: 15px;
    display: block;
    font-family: Helvetica-Neu-Medium;
    font-size: 12px;
    margin:0;
}


.tracktransaction .form-section .transaction-otp .fa-times {
    width: 100%;
    margin-bottom: 14px;
}
.tracktransaction .form-section .transaction-otp .fa-times::before {
    float: right;
    cursor: pointer;
}
.transaction-otp #transaction-otp {
    width: 100%;
    margin: auto;
    /*margin-top: 30px;
    margin-bottom: 5px;*/
    text-align: center;
    border-bottom: 1px solid #FFAC00;
}
.tracktransaction .form-section label, .tracktransaction .result-section label {
    font-family: Helvetica-Neu-Bold;
    font-size: 12px;
    margin-bottom: 0;
    width: 100%;
}
.tracktransaction .form-section input {
    border: 0;
    background-color: transparent;
}
#transaction-phoneno {
    margin-bottom: 0;
    min-width: 105px;
    max-width: 181px;
    width: fit-content;
}
#transaction-phoneno-owl {
    margin-bottom: 0;
    width: calc(100% - 120px);
}
#transaction-otp-owl {
    width: 300px;
    margin: auto;
    text-align: center;
}
.tracktransaction .form-section input:focus, .tracktransaction .form-section input:focus-visible {
    border: 0;
    border-bottom: 2px solid #FFAC00;
    outline: none;
}
.tracktransaction .form-section input.transaction-validation {
    border-bottom: 2px solid #B02330;
}
.tracktransaction .tracker-registered {
    position: relative;
    overflow: visible;
}
.tracktransaction .tracker-registered.has-error::after {
    content: attr(data-error);
    position: absolute;
    bottom: calc(100% + 2px);
    right: 0;
    background: #B02330;
    color: #fff;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9px;
    line-height: 1.4;
    font-family: Helvetica-Neu-Medium;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}
.tracktransaction .tracker-registered.has-error::before {
    content: "";
    position: absolute;
    bottom: calc(100% - 2px);
    right: 8px;
    border: 3px solid transparent;
    border-top-color: #B02330;
    z-index: 10;
}
.tracktransaction .form-section img {
    position: absolute;
    width: 75%;
    bottom: 23%;
    left: 0;
    z-index: -1;
}
.tracktransaction .tracking-btn, .tracktransaction .tracking-otp, .tracktransaction .trackingclose-btn {
    border-radius: 4px;
    background-color: #FFAC00;
    color: #FFFFFF;
    font-family: Helvetica-Neu-Bold;
    font-size: 16px;
    letter-spacing: 0px;
    text-align: center;
    border: 0;
    width: 260px;
    height: 37px;
    cursor: pointer;
    margin-top:17px;
}
.tracktransaction .tracking-otp-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 17px;
}
.tracktransaction .tracking-otp-actions .tracking-btn {
    width: 140px;
    margin-top: 0;
}
.tracktransaction .form-section .transaction-otp .otp-instruction {
    color: rgba(254, 163, 9, 1);
    font-family: SFPro-Bold, 'Helvetica-Neu-Bold', sans-serif;
    font-size: 16px;
    margin-bottom: 15px;
}
.tracktransaction .tracking-errormsgotp {
    color: rgba(254, 163, 9, 1);
    font-family: SFPro-Bold, 'Helvetica-Neu-Bold', sans-serif;
    font-size: 12px;
}
.tracktransaction-loading {
    display: none;
}
    .tracktransaction-loading .circular-small {
        margin: auto;
        width: 80px;
        height: 80px;
        margin-top: 15%;
        margin-left: 40%;
    }
.owl-item .tracktransaction-loading .circular-small {
    margin-top: 20%;
}
.tracktransaction .result-section {
/*    margin: 10px 30px;
*/}
.tracktransaction .result-section p {
    font-family: Helvetica-Neu-Light;
    margin: 0;
    white-space:nowrap;
}
.tracktransaction .result-section .transaction-ref {
    font-size: 16px;
    border-bottom: 2px solid #B2B2B2;
    margin-bottom: 4px;
}
.tracktransaction .result-section-completed .transaction-ref {
    border-bottom: 2px solid #008A00;
}
.tracktransaction .result-section-completed .fa-check-circle {
    color: #008A00;
}
.tracktransaction .result-section .transaction-date {
    font-size: 18px;
    margin: 0;
}
.tracktransaction .transaction-details {
    background-color: #ECECEC;
    padding: 5px 10px 10px;
}
.tracktransaction .result-section-completed .transaction-details {
    background-color: #E2FFE2;
}
.tracktransaction .result-section .transaction-description {
    font-family: Helvetica-Neu-Medium;
    font-size: 12px;
    color: #4B4B4B;
    line-height: 1.2;
    margin-top: 10px;
    padding: 0 10px;
    text-align: justify;
    white-space:normal;
}
.tracktransaction .result-section-completed .transaction-description {
    color: #008A00;
}
.tracktransaction .result-section-red .transaction-description {
    color: #B02330;
}
.tracktransaction .trackingclose-btn {
    /*padding: 7px 44px;
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;*/
    display:none;
}
.owl-item .tracktransaction .trackingclose-btn {
    margin:auto;
    margin-top:20px;
}

/* New Transfer Tracker Styles */
.tracktransaction .result-section .tracker-content {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.tracktransaction .result-section .tracker-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 15px;
    border-bottom: none;
    background-color: transparent;
}

.tracktransaction .result-section .tracker-status-row {
    background-color: #F4F4F4;
    border-radius: 0;
    margin-bottom: 3px;
}

.tracktransaction .result-section .tracker-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: Helvetica-Neu-Bold;
    font-size: 13px;
    color: #333;
}

.tracktransaction .result-section .tracker-icon {
    font-size: 18px;
    min-width: 18px;
}

.tracktransaction .result-section .tracker-value {
    font-family: Helvetica-Neu-Medium;
    font-size: 13px;
    text-align: right;
}

.tracktransaction .result-section .tracker-date-row {
    background-color: #FFE8BD;
    margin-top: 3px;
    margin-bottom: 5px;
    padding: 4px 15px;
    border-radius: 8px;
    border-bottom: none;
}

.tracktransaction .result-section .trackingclose-btn {
    display: block !important;
    margin: 15px auto 0 !important;
    width: 290px !important;
    height: 37px;
    font-size: 16px;
    background: linear-gradient(180deg, #FBAF17 0%, #FF9B00 100%) !important;
    font-family: SFPro-Medium !important;
    letter-spacing: 0.8px;
    box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
}

.tracktransaction .result-section .tracker-label-date {
    font-family: Helvetica-Neu-Medium;
    font-size: 11px;
    color: #333;
    flex: 1;
}

.tracktransaction .result-section .tracker-value-date {
    font-family: Helvetica-Neu-Bold;
    font-size: 14px;
    color: #333;
    text-align: right;
}

/* Color classes for dynamic styling */
.tracktransaction .result-section .text-success,
.tracktransaction .result-section .icon-success {
    color: #13501B !important;
}

.tracktransaction .result-section .text-danger {
    color: #FF0000 !important;
}

.tracktransaction .result-section .text-warning {
    color: #FFC000 !important;
}

.tracktransaction .result-section .text-dark {
    color: #333 !important;
}

/* Remove underline from reference value */
.tracktransaction .result-section .tracker-value {
    text-decoration: none !important;
    border-bottom: none !important;
}
.mobile-slide.tracktransaction {
    flex-direction: column;
}
.mobile-slide.tracktransaction .form-section {
    width: 100%;
}
.mobile-slide.tracktransaction .tracking-header {
    padding: 0px 28px;
}
.mobile-slide.tracktransaction .tracking-header .header-title {
    width: 100%;
}
.owl-item .tracktransaction .form-section .transaction-otp {
    top: 90px;
}
.mobile-slide.tracktransaction .form-section .transaction-otp {
    top: 18%;
}
.mobile-slide.tracktransaction .result-section {
    margin: 10px 20px;
    /*width: 100%;*/
}
.mobile-slide.tracktransaction .result-section label {
    line-height: 1.1;
}
.mobile-slide.tracktransaction .result-section p {
    font-size: 20px;
    line-height: 1.1;
}
.mobile-slide.tracktransaction .result-section .transaction-ref {
    font-size: 16px;
}
.mobile-slide.tracktransaction .result-section .transaction-date {
    font-size: 18px;
}
.mobile-slide.tracktransaction .result-section .transaction-description {
    font-size: 14px;
    margin-top: 12px;
}
.mobile-slide.tracktransaction .trackingclose-btn {
    bottom: 30px;
}
.circular-small {
    animation: rotate 2s linear infinite;
    height: 20px;
    transform-origin: center center;
    width: 20px;
}

.payment-section {
    background-color: #FFAC00;
    padding: 12px 21px;
    position: relative;
    margin: 0px 5px 5px;
}
.opx-logo{
    width: 77px;
    margin: 66px auto 22px;
    display: block;
}
.payment-section .heading{
    font-family: Helvetica-Neu-Light;
    font-size: 18px;
    margin-bottom: 0px;
}
.currency-dropdown {
    font-family: SFPro-Regular;
    border: none;
    color: #000000;
    width: 100%;
    margin-left: 19px;
    border-radius: 17px;
    background: transparent;
}
.currency-dropdown:focus, .numberTextbox:focus {
    outline: none;
}
.dummy-box {
    width: 189px;
    height: 30px;
    background-color: #ccc; 
    border: 1px dashed #999; 
}

.dropdown,
.dropleft,
.dropright,
.dropup {
    position: static !important;
}

footer .dropdown{
    position: static !important;
    bottom: 248px;
}

.dropdown-menu {
    /*max-height: 300px;*/
    overflow-y: auto;
    top: 100%;
    left: 0 !important;
    right: 0;
    max-width: none;
    border-radius: 0;
    z-index: 999;
    scroll-behavior: smooth;
    position: absolute;
}

/* Ensure dropdown parent has position relative - must override the static positioning */
.graph-pallet-top .dropdown,
.fxcal-paycurrency .dropdown,
.landing-fxcalculator .dropdown {
    position: relative !important;
}

/* Ensure dropdown containers don't clip dropdowns */
.fxcal-paycurrency,
.fx-rates-exchange-currency {
    overflow: visible !important;
    position: relative;
}

/* Enhanced currency dropdown styles */
.dropdown-menu.fromCurrency,
.dropdown-menu.toCurrency {
    max-height: 280px;
    min-height: 200px;
    height: auto;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    position: absolute !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
    margin-top: 2px;
    transform: none !important;
    z-index: 1050;
    width: 250px;
    min-width: 200px;
}

/* Currency dropdown items */
.dropdown-menu.fromCurrency .dropdown-item,
.dropdown-menu.toCurrency .dropdown-item,
.dropdown-menu.fromCurrency .currency-selector,
.dropdown-menu.toCurrency .currency-selector {
    padding: 10px 16px;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    font-family: SFPro-Regular;
    font-size: 14px;
    display: block;
    width: 100%;
    clear: both;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    color: #212529;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

.dropdown-menu.fromCurrency .dropdown-item:hover,
.dropdown-menu.toCurrency .dropdown-item:hover,
.dropdown-menu.fromCurrency .currency-selector:hover,
.dropdown-menu.toCurrency .currency-selector:hover {
    background-color: #FFF9E6;
    color: #000000;
    font-weight: 500;
}

.dropdown-menu.fromCurrency .dropdown-item:active,
.dropdown-menu.toCurrency .dropdown-item:active,
.dropdown-menu.fromCurrency .currency-selector:active,
.dropdown-menu.toCurrency .currency-selector:active {
    background-color: #FFAC00;
    color: #FFFFFF;
}

/* Currency search box container */
.currency-search-container {
    position: sticky;
    top: 0;
    background: #FFFFFF;
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
    z-index: 1000;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.currency-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #FFAC00;
    border-radius: 6px;
    font-family: SFPro-Regular;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s ease;
}

.currency-search-input:focus {
    border-color: #FF9900;
    box-shadow: 0 0 0 2px rgba(255, 172, 0, 0.1);
}

.currency-search-input::placeholder {
    color: #999999;
    font-style: italic;
}

/* Custom scrollbar for currency dropdowns */
.dropdown-menu.fromCurrency::-webkit-scrollbar,
.dropdown-menu.toCurrency::-webkit-scrollbar {
    width: 8px;
}

.dropdown-menu.fromCurrency::-webkit-scrollbar-track,
.dropdown-menu.toCurrency::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0 8px 8px 0;
}

.dropdown-menu.fromCurrency::-webkit-scrollbar-thumb,
.dropdown-menu.toCurrency::-webkit-scrollbar-thumb {
    background: #FFAC00;
    border-radius: 4px;
}

.dropdown-menu.fromCurrency::-webkit-scrollbar-thumb:hover,
.dropdown-menu.toCurrency::-webkit-scrollbar-thumb:hover {
    background: #FF9900;
}

/* Hide currency items when filtered out */
.dropdown-item.currency-hidden {
    display: none !important;
}

/* No results message */
.currency-no-results {
    padding: 20px;
    text-align: center;
    color: #999999;
    font-family: SFPro-Regular;
    font-size: 13px;
    font-style: italic;
}    


.dropdown-menu .d-flex {
    margin: 0;
}

input.numberTextbox::-webkit-outer-spin-button,
input.numberTextbox::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.numberTextbox {
    background: none;
    border: none;
    font-family: "Open-Sans-Regular";
    text-align: left;
    width: 100%;
    margin-right: 10px;
    margin-left: 10px;
    font-weight: 700;
}
.banner-flag {
    font-size: 20px;
    border: 1px solid lightgrey;
}
.rate-detail {
    background-color: #444444;
    padding: 18px 21px;
    margin: 0px 5px 5px;
}
.rate-detail .text{
    font-family: Helvetica-Neu-Medium;
    font-size: 16px;
    color: #ffffff;
    margin: 0;
}
.fee-detail {
    padding: 18px 21px;
    background-color: #E3E3E3;
    margin: 0px 5px 5px;
}
.fee-detail .text-header{
    font-family: Helvetica-Neu-Bold;
    font-size: 16px;
    margin: 0px;
}
.fee-detail .text{
    font-family: Helvetica-Neu-Medium;
    font-size: 16px;
    margin: 0px;
    text-align: right;
}
.get-section {
    background-color: #FFDB92;
}
.transfer-btn {
    font-family: Helvetica-Neu-Bold;
    border-radius: 4px;
    background-color: #FFAC00;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0px;
    text-align: center;
    width: 317px;
    height: 30px;
}
.transfer-btn:hover{
    text-decoration: none;
    color: #ffffff;
}
.transfer-btn:focus{
    outline: none;
}
.rates-table-pallet{
    padding: 18px 35px;
}
.fx-rates-card-table {
    width: 90%;
    margin: auto;
    margin-top: -10px;
}
    .fx-rates-card-table .card-day {
        color: #4A4A4A;
        font-family: Helvetica-Neu-Bold;
        font-size: 50px;
        letter-spacing: -3px;
        line-height: 0.9;
        font-weight: bold;
        margin-left: 11px;
    }
    .fx-rates-card-table .card-month {
        color: #7C7C7C;
        font-family: Helvetica-Neu-Bold;
        font-size: 17px;
        display: block;
        margin-bottom: 0px;
        text-align: left;
        font-weight: bold;
        line-height: 31px;
        margin-top: -12px;
    }
.fx-rates-card-table .card-year {
    font-family: Helvetica-Neu-Bold;
    color: #454545;
    font-size: 18px;
    text-align: left;
    letter-spacing: 0.49px;
    line-height: 1;
}
    .fx-rates-card-table thead {
        background: linear-gradient(180deg, #D2D2D3, #FFFFFF)
    }
    .fx-rates-card-table .card-sellbuy {
        font-family: Helvetica-Neu-Medium;
        color: #FFAC00;
        font-size: 16px;
        text-align: left;
        letter-spacing: 0.89px;
        line-height: 16px;
        text-align: center;
    }
    .fx-rates-card-table .home-currency {
        font-family: Helvetica-Neu-Bold;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0.67px;
        text-align: center;
        color: #FFAC00;
        padding-bottom:10px;
    }
    .fx-rates-card-table .currency {
        font-size: 15px;
        font-family: SFPro-Bold;
        font-weight: 700;
        line-height: 1.34;
        padding-left: 14px;
        color: #000000;
        letter-spacing: 1px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .fx-rates-card-table .currency-height {
        font-size: 15px;
        font-family: SFPro-Bold;
        font-weight: 700;
        line-height: 1.54;
        padding-left: 14px;
        color: #000000;
        letter-spacing: 1px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    
    .fx-rates-card-table .currency-height-my {
        font-size: 15px;
        font-family: SFPro-Bold;
        font-weight: 700;
        line-height: 1.44;
        padding-left: 14px;
        color: #000000;
        letter-spacing: 1px;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

.fx-rates-card-table .currency:first-of-type{
    min-width: 130px;
}
    .fx-rates-card-table .rateFactor {
        font-family: Helvetica-Neu-Bold;
        font-size: 10px;
        letter-spacing: 0.06px;
        color: #000000;
    }
    .fx-rates-card-table .table-rate {
        font-family: SFPro-Regular;
        font-size: 14px;
        text-align: right;
        color: #000000;
        padding: 0 23px 0px 0;
    }
    .fx-rates-card-table .note, .rates-table-pallet .note, .banner-carousel .note {
        font-size: 11px;
        font-family: Helvetica-Neu-Bold;
        text-align: center;
        color: red;
        margin: 0;
        line-height: 1.4;
    }
.powered-by-note, .g10-note {
    color: #565656;
    font-size: 15px;
    font-family: Helvetica-Neu-Bold;
    text-align: center;
    line-height: 1;
    /*margin-bottom: 5px;
    margin-top: 20px;*/
    position: absolute;
    left: 60px;
    bottom: -5px;
}
.graph-pallet-top {
    justify-content: space-evenly;
    display: flex;
    align-items: center;
    margin-right: -9px;
    margin-top: -3px;
}
.graph-pallet-top img{
   /* opacity: 0.5;*/
}
.graph-data-title {
    font-family: SFPRO-LIGHT;
    color: #242424;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    text-align: left;
    margin-bottom: 0;
}
.graph-data-title-range {
    color: #000000;
    font-family: SFPro-Light;
    font-weight: 400;
    letter-spacing: 0px;
    margin-bottom: 0;
    margin-top: 25px;
    font-size: 12px;
}
.graph-data-title-range:first-of-type{
/*    padding-top: 7px;
*/}
.graph-data-val {
    font-family: SFPRO-Medium;
    font-size: 48px;
    color: #000000;
    margin-bottom: 0px;
    line-height: 1;
    letter-spacing: -0.5px;
}
.graph-data-val-range {
    color: #000000;
    font-family: SFPRO-Medium;
    font-size: 24px;
    letter-spacing: -0.5px;
    text-align: right;
    margin-top: -6px;
}
    .graph-data-val-range small {
        font-family: Helvetica-Neu-Medium;
        color: black;
        font-size: 16px;
    }
.graph-data-val small {
    font-family: Helvetica-Neu-Medium;
    font-size: 70%;
    color: black;
}
.graph-data .right-col .graph-data-val {
    text-align: right;
}
.graph-data {
    padding-bottom: 10px;
    margin: 5px 30px;
    flex-wrap: wrap;
}
#myfirstchart {
    position: relative;
    display: flex;
    align-items: center;
    margin-top:17px;
    padding-bottom: 15px;
}
.straightLine, .hrLine {
    position: absolute;
    transition: transform .05s ease-in-out;
    top: 0px;
}
.hrLine {
    background-image: linear-gradient(to right, #FFAC00 33%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 23px 3px;
    background-repeat: repeat-x;
}
.straightLine {
    background-image: linear-gradient(#FFAC00 33%, rgba(255,255,255,0) 0%);
    /*background-position: right;*/
    background-size: 3px 23px;
    background-repeat: repeat-y;
}
.fx-charges-table thead::after {
    height: 8px;
    display: table-row;
    content: '';
}
.fx-charges-table tbody::after {
    height: 8px;
    display: table-row;
    content: '';
}
.fx-charges-title-top {
    font-family: Helvetica-Neu-Medium;
    color: #858585;
    font-size: 16px;
    text-align: center;
    margin-bottom: 0px;
}
.fx-charges-title-bottom {
    font-family: Helvetica-Neu-Bold;
    font-size: 16px;
    color: #858585;
    text-align: center;
    margin-bottom: 0px;
    width: max-content;
    margin: auto;
}

.fx-charges-title-row-top {
    font-family: Helvetica-Neu-Bold;
    font-size: 14px;
    color: #858585;
    margin-bottom: 0px;
}
.fx-charges-title-row-bottom {
    font-family: Helvetica-Neu-Medium;
    font-size: 12px;
    color: #858585;
}
.incoming-charges {
    background-color: #ECECEC;
    vertical-align: top;
}
.fx-charges-value-top {
    font-family: Helvetica-Neu-Medium;
    font-size: 14px;
    text-align: center;
    margin-bottom: 0px;
    white-space:nowrap;
}
.fx-charges-value-bottom {
    font-family: Helvetica-Neu-Bold;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
}
.fx-charges-table td {
    padding-top: 10px;
    padding-bottom: 10px;
    /*padding-left: 5px; */
/*    padding-right: 5px;
*/}
.fx-charges-table td.trffees {
    font-family: Helvetica-Neu-Bold;
    font-size: 18px;
    line-height: 1;
}
.outgoing-other-currencies {
    padding-bottom: 48px;
}
.fx-charges-table td:first-child{
    padding-left: 15px;
    width: 20%;
}

.fx-charges-table td:nth-child(2) {
    width: 20%;
}

.fx-charges-table td:nth-child(3) {
    width: 20%;
}

.fx-charges-table td:nth-child(4) {
    width: 20%;
}
.fx-charges-table {
    width: 100% !important;
    margin: auto;
    height: 100% !important;
    overflow: auto;
    scrollbar-width: none;
    display: block;
}
.fx-rates-card-table tbody tr:hover {
    background-color: #FFD684;
}
.fx-rates-card-table tbody::before{
    height: 15px;
    display: table-row;
    content: '';
}
.outgoing-charges {
    background-color: #FFEED1;
    vertical-align: top;
}
.fine-print {
    font-family: Helvetica-Neu-Light;
    font-size: 14px;
    color: #040404;
    text-align: left;
    padding-left: 5px !important;
    line-height: 1.2;
}
.emptyrectangle {
    position: absolute;
    height: 122%;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex-direction: column;
}
.incoming-charges-td{
    min-width: 100px;
}
.chart-period-selected, .chart-period-selected:focus {
    background-color: transparent;
    background-image: url("../images/dropdown arrow.svg");
    background-size: 14px;
    background-position: right;
    background-repeat: no-repeat;
    border: none;
    font-family: Helvetica-Neu-Medium;
    font-size: 18px;
    outline: none;
    -webkit-appearance: none;
    padding-right: 20px;
}
.charges-pallet{
    padding: 55px 5px;
}
.deal-section {
    width: 90%;
    margin: auto;
    margin-top: 6.25rem;
    max-width: 91.25rem;
}
    .deal-section h2 {
        font-family: SFPro-Bold;
        font-size: 33px;
        letter-spacing: -0.078rem;
        line-height: 1.389;
        color: #040404;
        margin-bottom: 0px;
        margin-left: 10px;
    }
    .deal-section .text {
        font-family: SFPro-Medium;
        font-size: 20px;
        letter-spacing: -0.04375rem;
        color: #040404;
        margin-left: 10px;
    }
.deal-section .card-slider{
    position: relative;
}
    .deal-section .card {
        border-radius: 1.25rem;
        padding: 24px 24px 0;
        min-height: 32rem;
        max-width: 365px;
        border: 1px solid rgba(213, 213, 213, 1);
        background-color: rgba(255, 255, 255, 1);
    }
    .deal-section .card-title {
        font-family: SFPro-Heavy;
        font-size: 1.625rem;
        letter-spacing: -0.036em;
        line-height: 1.4;
        color: #000000;
        margin-bottom: -0.5rem;
    }
    .deal-section .card-text {
        margin-top: 15px;
        font-family: SFPro-Medium;
        font-size: 14px;
        color: #040404;
        line-height: 17px;
        margin-bottom: 0.5rem;
        letter-spacing: -0.036em;
    }
    .deal-section .card-subtext {
        font-family: SFPro-Medium;
        font-size: 0.75rem;
        color: #6E6E6E;
        letter-spacing: -0.026875rem;
        padding-top: 0.625rem;
    }

.deal-section .owl-stage{
    display: flex;
}
.deal-section .owl-item{
    padding: 0.5rem;
    display: flex;
    flex: 1 0 auto;
}
.deal-section .owl-carousel .owl-dots {
     text-align: center;
     margin-top: 0.9375rem;
}
    .deal-section .owl-carousel button.owl-dot {
        width: 0.75rem;
        height: 0.75rem;
        background-color: #D8D8D8;
        border-radius: 50%;
        margin: 0.5rem;
    }
.deal-section .owl-carousel button.owl-dot.active{
    background-color: #ED7D32;
}
    .deal-section .owl-carousel .owl-nav button.owl-next, .deal-section .owl-carousel .owl-nav button.owl-prev {
        font-size: 3.4375rem;
        line-height: 1;
    }
.deal-section .owl-carousel .owl-nav button.owl-prev.disabled, .deal-section .owl-carousel .owl-nav button.owl-next.disabled{
    color: #E0E0E0;
}
.deal-section .owl-carousel .owl-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    justify-content: space-between;
    display: flex;
    width: 100%;
}
.deal-section .owl-carousel .owl-nav button:focus{
    outline: none;
}
.deal-section .owl-carousel .owl-nav button.owl-prev{
    margin-left: -5%;
}
.deal-section .owl-carousel .owl-nav button.owl-next{
    margin-right: -5%;
}
.deal-section .card-body{
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    padding: 2rem 0px 0px;
}
    .deal-section .card-footer{
        background:transparent;
        border:none;
        padding:0;
        margin:auto;
    }

    .deal-section .card-img-top {
        width: 50% !important;
        margin: 0px auto 0.625rem;
    }
    .deal-section .card-subtitle {
        font-family: Helvetica-Neu-Medium;
        font-size: 1.3125rem;
        color: #040404;
        line-height: 1.875;
        letter-spacing: -0.04125rem;
        padding-bottom: 0.3125rem;
    }
.card-crossborder-cn {
    padding-top: 0 !important;
}
.card-crossborder-cn > img {
    margin-top: 0 !important;
    /*margin-bottom: 0 !important;*/
    height: auto !important;
}
.card-crossborder-en > img {
    height: auto !important;
    margin-bottom: 30px !important;
}
.card-crossborder-cn .card-text {
    /*padding-top: 0 !important;*/
}
.card-crossborder-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 16px;
}
.find-out-more, .find-out-more:focus {
    font-family: SFPro-Bold;
    font-size: 14px;
    color: #000000;
    background-color: rgb(216, 216, 216, 0.45);
    border: none;
    border-radius: 50px;
    width: 203px;
    height: 48px;
    cursor: pointer;
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    text-decoration: none;
    padding: 0 20px;
    white-space: nowrap;
}

    .find-out-more::after {
        content: "+";
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #FAAF1C;
        color: #000000;
        font-size: 16px;
        font-weight: bold;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        margin-left: 10px;
    }



/* ONERISK partner card - the "ONEPIP x ONERISK" lockup (Figma node 364:7570). Built from the two
   brand marks plus a text "x" rather than one flattened image, so it stays sharp at every card
   width and the wordmarks remain real alt text. Sits inside the same 130px logo well the other
   product cards use, so all the card bodies still start on the same line. */
.onerisk-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 100%;
}

/* Owl Carousel ships `.owl-carousel .owl-item img { width: 100% }` at specificity 0-2-1, which is
   why every sibling card has to write `.card-img-top { width: 80% !important }`. Naming the
   carousel wrapper here scores 0-3-0 and wins outright, so the lockup needs no !important. The
   bare .onerisk-lockup selector covers the card being used outside a carousel. */
.onerisk-lockup .onerisk-lockup__onepip,
.owl-carousel .owl-item .onerisk-lockup__onepip {
    width: 160px;
    max-width: 100%;
    height: auto;
}

.onerisk-lockup .onerisk-lockup__onerisk,
.owl-carousel .owl-item .onerisk-lockup__onerisk {
    width: 170px;
    max-width: 100%;
    height: auto;
}

.onerisk-lockup__x {
    font-family: SFPro-Heavy, SFPro-Bold, sans-serif;
    font-size: 20px;
    line-height: 1;
    letter-spacing: -0.5px;
    color: #525252;
}

.deal-section .avail-icon, .deal-section-modal .avail-icon{
    width: 26px !important;
    display: inline-block !important;
}
.deal-section .avail-text {
    font-family: SFPro-Bold;
    font-size: 14px;
    letter-spacing: -0.4px;
    color: #565656;
    padding-top: 10px;
}
.modal-opx-logo {
    margin-bottom: 25px;
    margin-top: 50px;
    margin-left:50px;
}
.modal-opx1account-logo {
    width:115px;
    height:43.97px;
    align-self:center;
    margin-top:10px;
}
.modal-opx1account-separator {
    margin-left:16.5px;
    margin-right:16.5px;
    width:1px;
    height:87px;
    align-self:center;
}
.modal-1account-logo {
    width:364px;
    height:102px;
}
.modal-opx1account-text {
    font-weight:700;
}
.modal-text {
    font-size: 18px;
    font-family: Helvetica-Neu-Medium;
    line-height: 1.2;
}
.deal-section-modal {
    max-width: 976px;
    border: 10px solid #E3E3E3;
}
.deal-section-modal .avail-text{
    margin-bottom: 0px;
    font-size: 18px;
    font-family: Helvetica-Neu-Medium;

}
.deal-section-modal .btn-close{
    border: none;
    background-color: #FAAF1C;
    position: absolute; 
    right: 22px;
    top: 22px;
    z-index: 1;
}

.modal-header .close {
    position: absolute;
    right: 26px;
    top: 25px;
    z-index: 9999;
    pointer-events: auto;
    background-color: #FAAF1C;
    color: #000000;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    opacity: 1;
    padding: 0;
    cursor: pointer;
}

    .modal-header .close span {
        font-weight: bold;
        font-size: 20px;
        color: #000000;
        line-height: 1;
    }


.deal-section-modal .modal-content {
    border: none;
    position: relative;
    padding: 63px 73px 50px;
    max-width: 1495px;
    height: 854px;
}
.opx-carousel button.owl-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #D8D8D8;
    margin: 2px;
}

.deal-section-modal .modal-header{
    border-bottom: none;
}
#bidaskModal .deal-section-modal .modal-title, #opxapiModal .deal-section-modal .modal-title {
    padding-bottom: 36px;
}
#bidaskModal .deal-section-modal .avail-text {
    bottom: 50px;
}
#bidaskModal .deal-section-modal .modal-content{
    padding-bottom: 20px;
}
#contactUsModal .deal-section-modal .address-title {
    font-size: 14px;
    font-family: Helvetica-Neu-Bold;
    margin-bottom: 0px;
    line-height: 1.2;
}
#contactUsModal .deal-section-modal .contact-modal-left .modal-title {
    padding-bottom: 50px;
}
#contactUsModal .deal-section-modal .contact-modal-right .modal-title {
    padding-bottom: 30px;
}
.subscribe-text {
    font-size: 14px;
    color: #565656;
    line-height: 25px;
    font-family: Helvetica-Neu-Bold;
    display: flex;
}
#contactUsModal [type=checkbox]:checked + label:before {
    content: url(/assets/images/check_box_checked.svg);
}
#contactUsModal [type=checkbox] + label:before {
    content: url(/assets/images/check_box_outline_blank_black_24dp.svg);
    border: none;
    transform: rotate(0deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: unset;
    -ms-transform-origin: unset;
    transform-origin: unset;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    top: 0px;
    left: 0px;
    transform: scale(1.2);
}
#contactUsModal .deal-section-modal #btnSubmit {
    background-color: #FFAC00;
    border-radius: 28px;
    color: #ffffff;
    padding: 3px 25px;
    font-family: Helvetica-Neu-Bold;
}
.deal-section-modal .btn-close img {
    width: 80%;
    opacity: 1;
}
.deal-section-modal .modal-content{
    border-radius: 20px;
}
#contactUsModal .deal-section-modal .modal-text {
    line-height: 1.2;
    margin-bottom: 0px;
    font-size: 14px;
}
.contactus-address{
    padding-bottom: 10px;
}
.modal-img {
    width: 65%;
    margin: auto;
    display: block;
}
#bidaskModal .deal-section-modal .modal-img {
    width: 100%;
}
#bidaskModal .deal-section-modal .modal-opx-logo {
     margin-bottom: 0px; 
}
.opx-carousel button.owl-dot.active {
    background-color: #ED7D32;
}
.form-floating {
    position: relative;
}
.form-floating > .form-control {
    padding: 1rem 0.75rem;
    height: calc(3.5rem + 2px);
    line-height: 1.25;
    background-color: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #A4A4A4;
    font-family: Noto-Sans-SC-Bold;
    font-size: 16px;
    color: #000000;
}
.form-floating > .form-control:focus{
    box-shadow: none;
}
.form-floating > .form-control::placeholder {
    color: transparent;
}
.form-floating>.form-control-plaintext:focus, .form-floating>.form-control-plaintext:not(:placeholder-shown), .form-floating>.form-control:focus, .form-floating>.form-control:not(:placeholder-shown){
    padding-top: 1.625rem;
    padding-bottom: 0.625rem;
}
.form-floating > label {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 1rem 0.75rem;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
    color: #6F6F6F;
    font-family: Noto-Sans-SC-Regular;
    font-size: 16px;
}
.form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
    opacity: .65;
    transform: scale(.75) translateY(-0.5rem);
}
    /*#contactUsModal .form-floating > .form-control ~ label {
        background-color: #EFEFEF;
        margin-bottom: 1rem;
        height: auto;
        opacity: 1;
        padding-bottom: 0;
        text-align: left;
        color: #383737;
        margin-left: 20px;
        position: absolute;
        top: 0;
        left: 0;
        padding: 1rem 0.75rem;
        pointer-events: none;
        border: 1px solid transparent;
        transform-origin: 0 0;
        transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
    */}
.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
}
.opx-carousel img{
    padding-bottom: 20px;
    width: 75% !important;
    margin: auto;
}
.opx-carousel .owl-dots {
    display: flex;
    justify-content: center;
    position: relative;
    top: -22px;
    width: 90%;
    margin: auto;
}
.deal-section-modal .modal-title {
    font-size: 36px;
    font-family: Helvetica-Neu-Medium;
    color: #040404;
    line-height: 1;
}
.regulation-section {
    width: 80%;
    margin: 140px auto;
    max-width: 1460px;
    padding: 0 5%;
}
.regulation-section .op-group{
    font-size: 16px;
    font-family: Helvetica-Neu-Bold;
    margin-bottom: 0px;
}
.regulation-slider{
    width: 100%;
    height: 100vh;
}
.regulation-section .slide-title-top {
    font-family: Helvetica-Neu-Bold;
    /*font-size: 2.083vw;*/
    font-size: 36px;
    color: #000000;
    margin-bottom: 0px;
    white-space: nowrap;
}

.regulation-section .slide-title-bottom {
    font-family: Helvetica-Neu-Medium;
    /*font-size: 34px;*/
    font-size: 24px;
    color: #000000;
    margin-bottom: 25px;
}
.regulation-section .slide-text {
    font-family: Helvetica-Neu-Medium;
    font-size: 16px;
    line-height: 1.2;
    color: #646464;
}
.card-slider-img {
    width: 90%;
    margin: auto;
}
.regulation-section .left-col {
    /*background-color: #ED7D31;
    border-top-left-radius: 68px;
    padding: 41px 104px;*/
}
.regulation-section .row {
    /*background-color: #EEEEEE;*/
    /*border-bottom-right-radius: 44px;*/
    overflow: hidden;
    /*border-top-left-radius: 68px;*/
}
.regulation-section .right-col {
    align-items: center;
    display: flex;
    /*padding: 32px;*/
    justify-content: center;
}
.regulation-section .left-col2 {
    padding: 20px;
}
.regulation-section .left-col2 img{
    width: 90%;
    margin: auto;
    display: block;
}
.regulation-section .right-col2 {
    
    background-color: #D0AFAF;
    padding: 59px 46px;
}

.regSwiper {
    width: 100%;
    /*height: 60vh;*/
    /*max-height: 100vh;*/
    margin-bottom: 124px;
}
.regSwiper .swiper-pagination .swiper-pagination-bullet {
    width: 11px;
    height: 11px;
    display: block;
    border-radius: 10px;
    background: #B4B4B4;
    opacity: 0.2;
    transition: all 0.3s;
}
.regSwiper .swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: #ED7D32;
    height: 30px;
    box-shadow: 0px 0px 20px rgb(252 56 56 / 30%);
}
.regSwiper .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets{
    right: 20px;
}
.regSwiper .swiper-slide{
    display: flex;
    align-items: center;
}
.pip-count {
    font-family: Helvetica-Neu-Light;
    font-size: 24px;
    letter-spacing: -0.5px;
    color: #000000;
}
.top-footer {
    background-image: linear-gradient(180deg, rgba(249, 249, 249, 1) 0%, rgba(255, 247, 236, 1) 100%);
    padding: 49px 57px;
}
.address-col {
    display: flex;
    flex-direction: column;
    justify-content: end;
}
.business-hours {
    font-family: Helvetica-Neu-Bold;
    font-size: 16px;
    color: #000000;
}
.business-times {
    font-family: Helvetica-Neu-Medium;
    font-size: 14px;
    color: #000000;
}
.onepiplicense {
    font-family: Helvetica-Neu-Medium;
    font-size: 14px;
    color: #000000;
}

.address-section{
    margin-bottom: 20px;
}
.address-section p {
    margin: 0px;
    text-align: right;
    line-height: 1.2;
    font-size: 16px;
}
.address-section p.business-add {
    font-family: Helvetica-Neu-Light;
    font-size: 14px;
    color: #000000;
}

.address-section p.business-num {
    font-family: Helvetica-Neu-Bold;
    font-size: 14px;
    color: #000000;
}
.bottom-footer {
    background-color: #ffffff;
    padding: 10px 80px
}
.copyright {
    color: #FFAC00;
    font-family: Helvetica-Neu-Medium;
    font-size: 16px;
    letter-spacing: -0.33px;
    margin-bottom: 0px;
}
.footer-links {
    font-family: Helvetica-Neu-Medium;
    font-size: 18px;
    letter-spacing: -0.38px;
}
.constraintscreen{
    max-width: 1460px;
    margin: auto;
}
.swap-icon{
    opacity: 0.8;
}

@media (max-width: 768px) {
    .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .bg-img{
        display: flex;
    }
    
}
@media (max-width: 1280px) {
    .opx-logo {
        width: 50px;
        margin: 32px auto 9px;
    }

    .payment-section {
        padding: 5px 10px;
    }

    .payment-section .heading, .transfer-btn {
        font-size: 14px;
    }

    .currency-dropdown {
        font-size: 18px;
    }

    .numberTextbox {
        font-size: 18px;
    }
    .fee-detail .text{
        font-size: 12px;
    }
   /* .banner-flag {
        font-size: 32px;
    }*/
    .rate-detail {
        padding: 8px 11px;
    }
    .rate-detail .text, .fee-detail .text-header {
        font-size: 12px;
    }
    .fee-detail {
        padding: 8px 11px;
    }
    .pallet {
        width: 244px;
        height: 452px;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
    }
    .pallet:before{
        top: -10px;
        width: 254px;
        height: 462px;
        border-radius: 34px;
        -webkit-border-radius: 34px;
        -moz-border-radius: 34px;
    }
    .tracking-pallet .tracking-header {
        border-radius: 25px 25px 0 0;
        padding: 0px 15px;
        height: 62px;
    }
    .tracking-pallet .tracking-header .header-title {
        font-size: 14px;
        width: 70%;
    }
    .tracking-pallet .tracking-header .opx-logo {
        width: 50px;
    }
    .tracking-pallet .form-section input {
        margin-bottom: 16px;
    }
    .tracking-pallet .tracking-btn, .tracking-pallet .trackingclose-btn {
        font-size: 14px;
        margin-top: 28px;
    }
    .tracking-pallet .result-section {
        margin: 5px 15px;
    }
    .tracking-pallet .result-section label, .tracking-pallet .result-section .transaction-description {
        line-height: 1.1;
    }
    .tracking-pallet .result-section p {
        font-size: 16px;
        margin-bottom: 8px;
    }
    .tracking-pallet .result-section .transaction-ref, .tracking-pallet .result-section .transaction-date {
        font-size: 14px;
    }
    .tracking-pallet .result-section .transaction-description {
        font-size: 12px;
        margin-top: 8px;
    }
    .tracking-pallet .trackingclose-btn {
        padding: 3px 44px;
        bottom: 10px;
    }
    .rates-table-pallet {
        padding: 8px 15px;
    }
    .hero-title {
        font-size: 30px;
        line-height: 0.833;
        margin-right: 20px;
    }

    .hero-subtitle {
        font-size: 25px;
        line-height: 1.389;
        margin-right: 20px;
    }
    .currenciesicons {
        width: 156px;
        margin-right: 20px;
    }
    
   /* .fx-rates-card-table .card-sellbuy {
        font-size: 12px;
        letter-spacing: unset;
    }*/
    /*.fx-rates-card-table .currency:first-of-type {
        min-width: unset;
    }*/
   /* .fx-rates-card-table .currency, .fx-rates-card-table .table-rate {
        font-size: 10px;
    }*/
    /*.fx-rates-card-table .rateFactor {
        font-size: 7px;
    }*/
    /*.graph-data-val {
        font-size: 22px;
    }*/
    .fine-print{
        font-size: 12px;
    }
    .fx-charges-table td {
        padding-top: 5px;
    }

        .fx-charges-table td:first-child{
            padding-left: 5px;
        }

       /* .fx-rates-card-table .card-year, .fx-rates-card-table .card-month {
            font-size: 14px;
        }*/
    /*.fx-rates-card-table .card-day {
        font-size: 28px;
    }*/

   /* .fx-rates-card-table thead tr td:first-of-type {
        width: 40px !important;
        line-height: 1;
    }*/
   /* .fx-rates-card-table .home-currency {
        padding-bottom: 7px;
    }*/
    .fx-rates-card-table tbody::before {
        height: 4px;
    }
    .fx-rates-card-table .note, .rates-table-pallet .note, .banner-carousel .note {
        margin-top: 2px;
        margin-bottom: 5px;
        line-height: 1;
    }
  /*  .rates-table-pallet .note, .g10-note {
        font-size: 10px;
    }*/
    /*.powered-by-note {
        font-size: 10px;
        margin: 0;
    }*/
    .graph-data .col{
        padding: 0px;
    }
    .graph-pallet-top {
/*        margin: 12px 15px 22px;
*/    }
   /* .graph-data-title, .graph-data-title-range {
        font-size: 14px;
    }*/
    .graph-data-title-range:first-of-type {
/*        padding-top: 0px;
*/    }
    .graph-data-val-range{
/*        font-size: 18px;
*/    }
    #myfirstchart {
        /*height: 160px !important;*/
    }
    .graph-data-title{
        line-height: 1;
    }
    .emptyrectangle {
        height: 100%;
        width: 100%;
        overflow: hidden;
    }
    .charges-pallet {
        padding: 10px 10px;
    }
    .incoming-charges-td {
        min-width: auto;
    }
    .fx-charges-table td.trffees, .fx-charges-title-bottom, .fx-charges-value-top, .fx-charges-value-bottom {
        font-size: 10px;
    }

    .fx-charges-title-top, .fx-charges-title-row-top, .fx-charges-title-row-bottom {
        font-size: 12px;
    }
    .outgoing-other-currencies{
        padding-bottom: 10px;
    }
    .deal-section h2 {
        font-size: 36px;
    }

    .deal-section .text {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .deal-section {
        margin-top: 60px;
        width: 80%;
    }
    .deal-section .owl-carousel .owl-nav button.owl-next {
        margin-right: -9%;
    }
    .deal-section .owl-carousel .owl-nav button.owl-prev {
        margin-left: -9%;
    }
        .deal-section .card-title {
            font-size: 18px;
            line-height: 1.3;
        }

        .deal-section .card-text, .deal-section .card-subtitle {
            font-size: 14px;
        }

    .deal-section-modal .avail-text {
        position: relative;
    }
    .deal-section-modal .modal-content {
        padding: 43px 43px 0px;
    }
    .deal-section-modal .btn-close {
        right: 10px;
        top: 10px;
    }
    #bidaskModal .deal-section-modal .avail-text{
        position: relative;
        bottom: unset;
    }
    #bidaskModal .deal-section-modal .modal-opx-logo {
        margin-bottom: 20px;
        margin-top: 0px;
    }
    .card-slider-img {
        width: 90%;
    }
    .regulation-section {
        padding: 0px;
    }
    .regulation-section .slide-title-bottom {
        margin-bottom: 30px;
    }

    .regulation-section .slide-text {
        font-size: 14px;
        line-height: 1.6;
    }

    .regSwiper {
        margin-bottom: 25px;
    }

    .pip-count {
        font-size: 21px;
    }

    .business-hours {
        font-size: 16px;
    }

    .business-add, .business-num {
        font-size: 14px;
    }

    .business-times, .onepiplicense {
        font-size: 16px;
    }

    .onepiplicense {
        line-height: 1.1;
    }

    /*.regulation-section .left-col, .regulation-section .row {
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }*/

    .regSwiper .swiper-pagination .swiper-pagination-bullet-active {
        height: 40px;
    }

    .deal-section .card-img-top {
        height: 109px;
    }


    .address-section p {
        text-align: right;
    }

    .footer-links {
        font-size: 12px;
    }
}
@media (max-width: 992px) {
    .address-section p {
        text-align: left;
    }

    .copyright {
        font-size: 12px;
    }

    .footer-links, .business-add, .business-num, .onepiplicense {
        font-size: 12px;
    }

    .business-hours {
        font-size: 16px;
    }

    .business-times {
        font-size: 14px;
    }

    .bottom-footer {
        padding: 10px 40px;
    }

    footer {
        padding: 38px 40px;
        overflow-x: hidden;
    }
    .banner-carousel .owl-nav button.owl-next, .banner-carousel .owl-nav button.owl-prev {
        font-size: 20px;
        color: #B4B4B4;
    }

    .banner-carousel .fx-rates-card-table {
        margin-left: 15px;
    }

    .banner-carousel .owl-nav {
        display: flex;
        justify-content: space-between;
        padding: 0px 15px;
    }

    .banner-carousel button.owl-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #D8D8D8;
        margin: 2px;
    }

    .banner-carousel button.owl-dot.active {
        background-color: #ED7D32;
    }

    .banner-carousel .owl-dots {
        display: flex;
        justify-content: center;
        position: relative;
        top: -22px;
        width: 90%;
        margin: auto;
    }

    .swap-icon {
        width: 35px !important;
    }

    .fx-rates-card-table .card-sellbuy {
        font-size: 14px;
        line-height: 1;
        padding-top: 10px;
    }
}

@media (max-width: 576px) {
    .navbar {
        padding: 0.5rem 2rem;
    }

    

    .numberTextbox {
        font-size: 18px;
    }

 /*   .banner-flag {
        font-size: 68px;
        top: 36px;
        right: 47px;
    }
*/
    .payment-section {
        padding: 26px 50px;
    }

    .rate-detail, .fee-detail {
        padding: 15px 50px;
    }

    .transfer-btn {
        margin-top: 98px;
        margin-bottom: 130px;
    }

    

    .fx-rates-card-table .currency, .fx-rates-card-table .table-rate {
        font-size: 16px;
    }

    

    .bg-img {
        display: flex;
        justify-content: center;
        background-position: 20% 23%;
    }

    .hero-title {
        font-size: 48px;
        line-height: 1;
        margin-bottom: 10px;
    }

    .hero-subtitle {
        font-size: 24px;
        line-height: 30px;
        letter-spacing: -0.72px;
        width: auto;
    }

    .currenciesicons {
        width: 162px;
    }

    .deal-section h2, .deal-section .text {
        display: none;
    }

    .card-slider .owl-nav.disabled, .card-slider .owl-dots.disabled {
        display: none;
    }
    
    .deal-section {
        margin-top: 80px;
    }

        .deal-section .card-title {
            font-size: 18px;
        }

        .deal-section .card-text {
            font-size: 14px;
        }

        .deal-section .card-img-top {
            height: 109px;
        }
    .deal-section-modal {
        max-width: 100%;
    }
    .modal-opx-logo{
        margin-bottom: 20px;
    }
    .deal-section-modal .avail-text {
        position: relative;
        bottom: unset;
        padding-bottom: 30px;
    }
    .regSwiper {
        height: unset;
    }

    .regulation-section .slide-title-top, .regulation-section .slide-title-bottom {
        font-size: 21px;
    }

    .regulation-section .slide-title-bottom {
        margin-bottom: 40px;
    }

    .regulation-section .slide-text {
        font-size: 14px;
        line-height: 28px;
        margin-bottom: 10px;
    }

    .card-slider-img {
        width: 100%;
    }

   /* .regulation-section .left-col, .regulation-section .row {
        border-top-left-radius: 20px;
        border-bottom-right-radius: 0px;
    }*/

    .regSwiper .swiper-pagination .swiper-pagination-bullet-active {
        height: 11px;
        width: 30px;
    }

    .regSwiper .swiper-pagination {
        display: flex;
        justify-content: center;
    }

    .regulation-section .right-col {
        padding: 56px 32px;
    }

    .regSwiper {
        margin-bottom: 0px;
    }

    .footer-logo {
        width: 87px;
    }

    .pip-count {
        font-size: 16px;
    }

    .top-footer {
        padding: 50px 31px 18px;
    }

    .address-section p {
        line-height: 1.5;
        text-align: left;
    }

    .navbar-logo {
        width: 100px;
    }

    .language-selected span {
        display: none;
    }
}

@media (min-width: 2000px) {
    .bg-img {
        background-position: center left;
    }
}

.helvetica-neu-bold {
    font-family: 'Helvetica-Neu-Bold';
}

.btnonboard {
    width: 500px;
    height: 72px;
    margin-top: 32px;
    box-shadow: 0px 2px 9px 4px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 1);
    color: #040404;
    font-family: Helvetica-Neu-Medium;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.88px;
    text-align: center;
    line-height: 30px;
}

.btnonboard:hover{
    background: #FFAB01;
    color: #FFFFFF;
}

.divonboard{
    margin-top:69px;
    margin-bottom: 94px;
}

.onboardingicon{
    width: 30px;
    margin-right: 7px;
}
.loginBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255, 255, 255, 1);
    width: 120px;
    height: 42px;
    line-height: 1;
    color: #000000;
    font-family: SFPro-Regular;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    border-radius: 38px;
    padding: 6px 7px;
    margin-right: 19px;
}
.loginBtn:active,.loginBtn:focus, .loginBtn:hover{
    color: #000000;
    text-decoration: none;
}
#dropdownService {
    border: 1px solid #38364D;
    background-color: #FFFFFF;
    line-height: 1;
    color: #000000;
    font-size: 16px;
/*    font-weight: 700;*/
    letter-spacing: 0px;
    text-align: center;
    margin-right: 16px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding-left: 14px;
}

.dropdownService-menu {
    background: #FFF7D9;
    overflow: visible;
}

#dropdownService:focus {
    box-shadow: none;
}

.dropdownService-menu a:hover {
    background: #EEE7CD;
    /*border-left: 6px solid #FDD436;*/
    box-shadow: inset 6px 0px 0px 0px #FDD436;
}
@media screen and (max-width: 620px) {
    #dropdownService {
        font-size: 12px;
        margin-right: 5px;
        padding: 5px;
    }
    #dropdownService i{
        margin-left: 5px !important;
    }
    .loginBtn{
        font-size: 12px;
        padding: 6px 17px;
    }
}

.corporate-dropdown-item {
    top: 50%;
    left: 100%;
    background: #FFF7D9;
}

.divLanding {
    margin: auto;
/*    gap: 25px;
*/    margin-top:4%;
}

.landing-fx-card {
    /*background: rgb(255, 255, 255, 0.87); */
    background: rgb(255, 255, 255, 1);
    width: 363px;
    height: 665px;
    box-shadow: 1px 1px 4px 0px #787878;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
    transition: transform .2s;
    margin-right:20px;
    position: relative;
    overflow: hidden;
}

.bg-myzoomin .landing-fx-card {
    height: 680px;
}

.bg-myzoomin .landing-graph {
    height: 680px;
}

.bg-myzoomin .landing-fxcalculator {
    height: 370px;
}

.bg-myzoomin .landing-tracker {
    min-height: 287px;
}

.landing-header {
    height: 7px;
    background: #FFAC00;
}

.fx-rates-card-table .card-week {
    color: #FFAC00;
    font-family: Helvetica-Neu-Bold;
    font-size: 25px;
    font-weight: 800;
    text-align: left;
    margin: 0;
    margin-bottom: -14px;
}

.fx-rates-card-table tbody tr:nth-of-type(even) {
    background: #F6F6F6
}

.landing-fx-card .note {
    color: #FF0000;
    font-size: 10px;
    font-family: Helvetica-Neu-Bold;
    text-align: center;
    margin-top: 19px;
    margin-bottom:1px;
}

.fx-rates-card-table tbody tr:hover {
    background: #FFDB8F;
    cursor:pointer;
    /*border: 1px solid #FFAC00;
    border-radius: 4px;*/
    border-radius:4px;

}

.landing-graph {
    background: rgb(255, 255, 255, 1);
    width: 620px;
    height: 661px;
    box-shadow: 1px 1px 4px 0px #787878;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
    /* flex: 30%; */
    transition: transform .2s;
    overflow-y: hidden;
    margin-right:20px;
}

.landing-fxcalculator {
    background: rgb(255, 255, 255, 1);
    width: 340px;
    height: 367px;
    box-shadow: 1px 1px 4px 0px #787878;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
    transition: transform .2s;
    margin-bottom:5px;
    overflow: visible;
    overflow-x: hidden;
    position: relative;
}

.landing-tracker {
    background: rgb(255, 255, 255, 1);
    width: 340px;
    min-height: 282px;
    box-shadow: 1px 1px 4px 0px #787878;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
    transition: transform .2s;
}

.divRightLanding{
    gap: 7px;
}

@media (min-width: 1940px) {
/*    .navbar .navbar-collapse {
        margin-right: -122px;
    }*/
    .opx-trial-section .opx-container {
        max-width: 1804px;
        margin-left: auto;
        margin-right: auto;
    }

    .opx-trial-section .trial-left {
        margin-left: auto;
        margin-right: auto;
    }

    .footer .d-flex {
        max-width: 1420px;
        margin-left: auto;
        margin-right: auto;
    }

    .footer .p-license {
        width: 631px;
    }
}


@media (max-width: 1570px) {
    /* Shared layout for 1563px, 1440px, and 1366px */
    body {
        zoom: 1;
    }
    .navbar-collapse {
   /*     margin-left: 60px;
        margin-right: 0px;
        max-width: 97%;*/
    }

    .loginBtn {
        font-size: 15px;
        padding: 5px 6px;
/*        margin-right: 79px;
*/    }

    .deal-section {
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 24px;
        margin-top: 96px;
    }

    .opx-trial-section .container {
        max-width: 100%;
        padding: 0 24px;
    }

    .opx-trial-section .contact-wrapper {
        padding: 80px 40px 0 40px;
    }

    .opx-trial-section .contact-title,
    .opx-trial-section .contact-box h5 {
        font-size: 22px;
    }

    .opx-trial-section .contact-box {
        padding: 50px 40px;
    }

        .opx-trial-section .contact-box p {
            font-size: 15px;
        }

/*    #OPXModal .modal-content,
    #OPX1AccountModal .modal-content,
    #opxapiModal .modal-content,
    #RateModal .modal-content,
    #NetworkModal .modal-content {
        max-width: 1200px !important;
        height: 700px !important;
        border-radius: 20px;
    }

    #OPXModal .modal-body img {
        margin: 0 78px !important;
    }

    .modalFindoutMore .modal-body {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 28px;
        height: 100%;
        padding: 0 48px;
    }

        .modalFindoutMore .modal-body img {
            width: 170px;
            height: auto;
            margin: 0;
        }

    .modalFindoutMore .div-middlecontent {
        margin-right: -38px !important;
    }

    .modalFindoutMore .d-flex.flex-column {
        max-width: 982px;
        width: 100%;
    }

    .modalFindoutMore .title,
    .modalFindoutMore .title-grey {
        font-size: 48px !important;
        font-weight: bold;
        margin-bottom: 24px;
    }

    .modalFindoutMore .title-grey {
        color: #797979;
    }

    .modalFindoutMore .left-content {
        line-height: 1.5;
        font-size: 23px !important;
        max-width: 250px !important;
    }

    .modalFindoutMore .right-content-title {
        font-size: 24px !important;
        margin-bottom: 16px;
        font-weight: 600;
    }

    .modalFindoutMore .right-subcontent .mb-0 {
        font-size: 18px !important;
        margin-bottom: 12px;
        line-height: 1.07;
        letter-spacing: -0.06rem;
    }

    .modalFindoutMore .right-subcontent .right-subcontent-currency {
        font-size: 14px;
        color: #565656;
        margin-top: 10px;
        margin-bottom: 20px;
        line-height: 1.5;
        text-align: right;
    }*/

    .opx-trial-section .trial-left {
        margin-left: auto;
        margin-right: auto;
    }
}

/* Screens wider than 1920 (2K / 4K / 8K / ultra-wide): do NOT scale the page up.
   Keep the layout at its natural 1920 "Full HD" size, centered, while full-bleed
   backgrounds (hero video, section backgrounds) keep filling the full screen width. */
@media (min-width: 1921px) {
    body {
        zoom: 1;
    }
}

@media (max-width: 1365px) {
    body {
        zoom: 0.95;
    }
}

@media (max-width: 1330px) {
    body {
        zoom: 0.9;
    }
}

@media (max-width: 1280px) {
    body {
        zoom: 0.85;
    }
    .navbar-collapse {
        max-width: 95%; 
    }

    .loginBtn {
        font-size: 14px;
        padding: 5px 10px;
    }
    .bg-img {
        height:1200px;
        overflow: scroll;
    }
    .divLanding {
      /*  padding-left:50px;
        padding-right:50px;
        flex-wrap:wrap;*/
    }
    .landing-graph {
/*        flex-basis: 40%;
*/    }
    .divRightLandingSpace {
       /* display:block;
        flex-basis:34%;*/
    }
    .divRightLanding {
/*        flex-direction: unset !important;
*/        /*margin-left:371px;*/
        /*position: fixed;*/
    }
    .landing-release, .landing-tracker {
        /*margin-left: 21px;
        height: 379px;*/
    }
    .sg-background-video {
        width:1280px;
    }
}

@media (max-width: 1200px) {
    body {
        zoom: 0.8;
    }
}


@media (max-width: 1135px) {
    body {
        zoom: 0.75;
    }
}


@media (max-width:1115px){
    .divRightLanding {
        /*margin-left:362px;*/
    }
    .bg-img {
        height: 1215px;
    }
}

@media (max-width:1110px) {
    .divLanding {
        padding-left:30px;
        padding-right:30px;
    }
    .divRightLanding {
      /*  margin-left:373px;*/
    }
}

@media (max-width: 1080px) {
    body {
        zoom: 0.7;
    }
}

@media (max-width:1070px) {
    .sg-background-video, my-background-video, hk-background-video {
        width: 1070px !important;
    }
}

@media (max-width: 991px) {
    body{
        zoom:0.65;
    }
    #OPX1AccountModal #opx1AccountDesc{
        margin-right:unset !important;
    }
}

@media(max-width: 850px) {
    #OPX1AccountModal .modal-content {
        max-height:1300px !important;
    }
    #opx1AccountDesc {
        display:contents;
        margin-bottom:265px;
    }
    #opx1AccountImg {
        margin-left:auto;
        margin-right:auto;
    }
/*    #opx1AccountImg .owl-stage-outer {
        width: 285px;
    }*/
}

@media (max-width: 768px) {
    .bg-img {
        height:1900px;
    }
    .divLanding {
        width: 709px;
        padding-left:13px;
        flex-wrap:wrap !important;
        gap: 28px;
    }
    .landing-fx-card {
        margin-left: 20px;
        margin-right: 20px;
        flex-basis: 100%;
    }
    .landing-fx-card-header .flex1{
        margin-right:198px !important;

    }
    .landing-fx-card-header .flex2 {
        margin-right: 112px !important;
    }
    .landing-graph {
        margin-left: 20px;
        margin-right: 20px;
        flex-basis: 100%;
    }
    .divRightLanding {
        flex-direction: unset !important;
        margin-left:20px;
        margin-right:20px;
        margin-top:-26px;
    }
    .landing-tracker .reg-title {
        margin-top:16px !important;
    }
    .divLanding .landing-graph, .divLanding .landing-fxcalculator, .divLanding .landing-tracker {
        width: 297px !important;
    }
    .landing-fxcalculator, .landing-release, .landing-tracker {
        width: 297px !important;
    }
}

@media (max-width:680px) {
    .bg-img {
        height:2250px;
    }
    .divLanding {
        width:396px;
    }
    .landing-fx-card-header .flex1 {
        margin-right: 20px !important;
    }
    .landing-fx-card-header .flex2 {
        margin-right: 20px !important;
    }
    .landing-graph .landing-header, .landing-graph .fxgraph-header {
        width: 476px;
    }
    .divRightLanding{
        flex-direction: column !important;
    }
    .divLanding .landing-graph, .divLanding .landing-fxcalculator, .divLanding .landing-tracker {
        width: 312px !important;
    }
    .landing-fxcalculator, .landing-release, .landing-tracker {
        width: 312px !important;
    }
    .landing-release, .landing-tracker {
        margin-left: 0px;
    }
    .deal-section {
        margin-top:90px;
    }
}

@media (max-width:576px) {
    .divLanding {
        margin-left:16%;
    }
}

@media(max-width: 565px) {
    #contact-us-modal .modal-footer {
        display:unset;
    }
    #contact-us-modal .contactusfooter-info {
        display:unset !important;
    }
}

.landing-fxcalculator .fxcal-title {
    background: linear-gradient(180deg, #D2D2D3, #FFFFFF);
}

.landing-fxcalculator .fxcal-title, .landing-tracker .tracker-title {
    background: linear-gradient(180deg, #D2D2D3, #FFFFFF);
    padding: 20px 30px 0px;
}

.landing-fxcalculator .title, .landing-tracker .title {
    color: #000000;
    font-family: SFPRO-BOLD;
    font-size: 14px;
    letter-spacing: 0.3px;
    text-align: left;
    margin: 0;
}

.landing-fxcalculator .payget-title, .landing-tracker .reg-title {
    color: #FFAC00;
    font-family: SFPro-Bold;
    font-size: 12px;
    letter-spacing: 0px;
    margin: 0;
    padding: 10px 25px 5px;
}

    .landing-tracker .reg-title{
        text-transform:uppercase;
    }

    .landing-fxcalculator .fxcal-paycurrency, .tracker-registered {
        border: 1px solid #FFAC00;
        justify-content: space-around;
        align-items: center;
        white-space: nowrap;
        width: 309px;
        height: 47px;
        margin: auto;
        border-radius: 7px;
        overflow-x: hidden;
    }

.landing-fxcalculator .fxcal-fees {
    width: 309px;
    height: 50px;
    border: 1px solid #FFEABD;
    margin: auto;
    margin-top: 13px;
    border-radius: 7px;
}

.fxcal-fees .fees-title {
    color: #FFAC00;
    font-family: SFPro-Regular;
    font-size: 12px;
    letter-spacing:0px;
    text-align: left;
    margin: 0;
}

.fxcal-fees .fees-value {
    color: #000000;
    font-family: "Open-Sans-Regular";
    font-size: 12px;
    letter-spacing: 0px;
    text-align: right;
    margin: 0;
}

#fxcal-transferbtn {
    border-radius: 4px;
    background: linear-gradient(180deg, #FBAF17 0%, #FF9B00 100%);
    box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
    font-family: SFPro-Medium;
    font-size: 16px;
    letter-spacing: 0.8px;
    text-align: center;
    border: 0;
    width: 290px;
    height: 37px;
    cursor: pointer;
    margin-top: 13px;
}

#btnTrack {
    border-radius: 4px;
    background: linear-gradient(180deg, #FBAF17 0%, #FF9B00 100%);
    color: #FFFFFF;
    font-family: SFPro-Medium;
    font-size: 16px;
    letter-spacing: 0.8px;
    text-align: center;
    border: 0;
    width: 290px;
    height: 37px;
    cursor: pointer;
    margin-top: 15px;
    box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
}


    .tracker-registered .select2-container--default .select2-selection--single {
        background: transparent !important;
        border: 0px !important;
    }

.tracker-registered .select2-selection__rendered{
    margin-top:-5px;
}

.tracker-registered #transaction-otp {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-bottom: 0;
    padding: 0 15px;
    box-sizing: border-box;
    text-align: center;
}

.tracker-registered #transaction-otp:focus,
.tracker-registered #transaction-otp:focus-visible {
    border: 0;
    border-bottom: 2px solid #FFAC00;
    outline: none;
}

#transaction-lastname {
    margin: auto;
}

.fees-spinner {
    text-align: center;
    margin-top: 10px;
}

#transaction-lastname{
    width:100%;
    height: 100%;
    text-align: center;
}

.tracking-errormsg{
    margin:0;
    text-align: center;
    font-size:11.5px;
    line-height: 1.2em;
}

.graph-title {
    font-family: SFPro-Bold;
    color: #000000;
    font-size: 14px;
    letter-spacing: 0.3px;
    text-align: left;
}

#graph-currency {
    color: #000000;
    font-family: SFPRO-LIGHT;
    font-size: 21px;
    letter-spacing: 0px;
    text-align: left;
    white-space: nowrap;
    margin: 0;
    margin-top: -4px;
}

#currency-selector-unit-from, #currency-selector-unit-to {
/*    color: #3B3B3B;
*/    color: #000000;
    font-family: SFPro-Bold;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.85px;
    text-align: right;
}

.graph-period {
    color: #000000;
    font-family: SFPRO-BOLD;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0px;
    text-align: center;
    border: 1px solid #7B7B7B;
    border-radius: 20px;
    min-width: 54px;
    background: transparent;
    margin-left: 15px;
    cursor: pointer;
    height: 25px;
}

    .graph-period:hover, .selected-period, .graph-period:focus {
        background: #FFDB8F;
        border: none;
        outline:none;
    }

.fxgraph {
    margin-left: 8px;
    margin-top: 25px;
}

.fxgraph-header {
    padding: 20px 30px;
    background: linear-gradient( 180deg, rgb(210, 210, 210) 0%, rgba(246, 246, 246, 0.19) 100% );
}

@media (max-width:1050px)
{

    .divLanding {
        width: 100%;
    }

    .sg-background-video, my-background-video, hk-background-video{
        width:100% !important;
    }


    .divLanding .landing-graph, .divLanding .landing-fxcalculator, .divLanding .landing-tracker {
        /*width: 200px;*/
        overflow: auto;
    }

    .fxgraph, .graph-period {
        margin-left: 15px;
    }

    .divLanding .landing-graph .graph-data-title-range {
        text-align: left;
        margin-top: 10px;
    }

    .divLanding .landing-graph .graph-data-val-range {
        padding-left: 0;
        margin-right: 10px;
    }

    .divLanding .landing-fxcalculator .fxcal-paycurrency, .divLanding .landing-fxcalculator .fxcal-fees, .tracker-registered,
    #fxcal-transferbtn, #btnTrack, .trackingclose-btn {
        width: 90%;
    }
}

/*mobile*/
/*.mobile-carousel .tracktransaction .form-section .form-submission
{
    padding:20px;
}*/

/*.mobile-carousel #transaction-lastname, .mobile-carousel #transaction-phoneno {
    border-bottom: 2px solid #FFAC00;
    margin-bottom: 36px;
}*/

.mobile-carousel .tracking-otp {
    text-decoration: none;
    background-color: #FFAC00;
    border-radius: 38px;
    padding: 3px 30px;
    margin: auto;
    font-family: Helvetica-Neu-Bold;
    font-size: 18px;
    color: #FFFFFF;
    margin-top: 58px;
}

.mobile-carousel .currency-dropdown{
    width:unset;
}

.mobile-carousel .numberTextbox {
    width: 100%;
    text-align: right;
}

.mobile-carousel .flag-icon {
  /*  left: 180px;
    top: 0 !important;*/
}

/*.mobile-carousel .transfer-btn, .mobile-carousel .tracking-otp, .mobile-carousel .tracking-btn {
    padding: 7px 20px;
}*/

.mobile-slide.tracktransaction .trackingclose-btn{
    margin: auto;
}

.fxgraph-header #currency-selector-unit-from, .fxgraph-header #currency-selector-unit-to {
    font-size: 16px;

}

.landing-tracker .select2-container--default .select2-selection--single .select2-selection__arrow{
    display:none;
}

.w-30{
    width:30%;
}

.landing-fx-card-header {
    background: linear-gradient(180deg, #D2D2D3, #FFFFFF);
    gap: 28px;
    padding-top: 6px;
    padding-left: 5px;
}

    .landing-fx-card-header .card-day {
        color: #000000;
        font-family: SFPro-Bold;
        font-size: 50px;
        letter-spacing: -3px;
        line-height: 0.9;
        font-weight: 700;
        margin-left: 11px;
        margin-right: -17px;
        margin-top: 10px;
    }

.mobile-fx-card-header .card-day {
    color: #4A4A4A;
    font-family: Helvetica-Neu-Bold;
    font-size: 50px;
    letter-spacing: -3px;
    line-height: 0.9;
    font-weight: bold;
    margin-left: 11px;
    margin-right: -25px;
    margin-top: 10px;
}

.landing-fx-card-header .card-week, .mobile-fx-card-header .card-week {
    color: #FFAC00;
    font-family: SFPRO-Light;
    font-size: 20px;
    text-align: left;
    margin-top: -6px;
    letter-spacing: -0.25px;
    width: 121px;
}

.landing-fx-card-header .card-month, .mobile-fx-card-header .card-month {
    color: #000000;
    font-family: SFPro-Bold;
    font-size: 16px;
    display: block;
    text-align: left;
    line-height: 31px;
    text-transform: uppercase;
    margin-bottom: -7px;
    margin-top: 5px;
    width: 93px;
}
.landing-fx-card-header .card-sellbuy {
    font-family: SFPro-Bold;
    color: #000000;
    font-size: 16px;
    text-align: right;
    line-height: 16px;
    letter-spacing: 0.39px;
}

.landing-fx-card-header .card-sellbuy-buy{
    margin-right:63px;
}

.landing-fx-card-header .home-currency {
    color: #000000;
    font-family: SFPro-Light;
    font-size: 16px;
    line-height: 16px;
    text-align: right;
    letter-spacing: 0.39px;
    margin-right: -4px;
}

.landing-fx-card-header .buy-home-currency{
    margin-right:62px;
}

.landing-fx-card-header .flex1 {
    /*  gap: 8px;
        margin-right:20px*/
}
.landing-fx-card-header .flex2 {
    margin-top: 20px;
    margin-left: -15px;
}

    .landing-fx-card-header .flex3{
        margin-top:20px;
        margin-left:4px;
    }

#deal-section-bg{
    /*width:1200px;*/
    width:100%;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    margin-top:15%;
    z-index:-1;
}

.graph-selected-currency-toCurrency{
    margin-left:0px !important;
}

.imgswapcurrency {
    width: 16px !important;
    margin-left: 6px;
    margin-right: 4px;
}

/* When the current currency pair can't be reversed, block the swap and show a stop cursor. */
.imgswapcurrency.swap-disabled {
    cursor: not-allowed;
}


.mobile-landing-card-header {
    height: 65px;
}


.mobile-carousel .fx-rates-card-table {
    width: 90%;
    margin:unset;
    margin: 5px auto;
}

.mobile_onepipicon {
    width: 126px !important;
    margin: auto;
    padding-top: 15px;
}

.mobile-fx-card-header{
    background: transparent !important;
}


    .mobile-fx-card-header .card-sellbuy {
        font-family: Helvetica-Neu-Medium;
        color: #9E9E9E;
        font-size: 16px;
        letter-spacing: 0.89px;
        line-height: 16px;
        text-align: center;
        padding-right:15px;
    }

    .mobile-fx-card-header .flex1 {
        gap: 8px;
    }

    .mobile-fx-card-header .flex2 {
        margin-right: 15%;
        margin-top: 20px;
        margin-left:8%;
    }

    .mobile-fx-card-header .flex3 {
        margin-top: 20px;
    }

    .mobile-fx-card-header .home-currency {
        font-family: Helvetica-Neu-Bold;
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0.67px;
        text-align: center;
        color: #9E9E9E;
        padding-bottom: 10px;
        padding-right:15px;
    }

.mobile-landing-fx-card .note {
    color: #FF0000;
    font-size: 10px;
    font-family: Helvetica-Neu-Bold;
    text-align: center;
    margin-top: 9px;
    margin-bottom: 1px;
}

.mobile-landing-graph-card .graph-title{
    text-align:center;
}

.mobile-landing-graph-card .emptyrectangle{
    top:0;
}

.w-50{
   width: 50%;
}

.mobile-landing-graph-card .emptyrectangle .loader:before {
    width:32%;
    padding-top:30%;
}

/*.mobile-landing-calculator-card .fxcal-title, .mobile-landing-tracker-card .tracker-title {
    font-family: Helvetica-Neu-Bold;
    color: #000000;
    font-size: 14px;
    letter-spacing: -0px;
    text-align: center;
}

.mobile-landing-calculator-card .payget-title, .mobile-landing-tracker-card .reg-title {
    color: #FFAC00;
    font-family: Helvetica-Neu-Medium;
    font-size: 12px;
    letter-spacing: 0px;
    margin: 0;
    margin-top: 11px;
    margin-left: 33px;
}*/

.mobile-landing-calculator-card .fxcal-paycurrency, .mobile-landing-tracker-card .tracker-registered {
    border: 1px solid #FFAC00;
    justify-content: space-around;
    align-items: center;
    white-space: nowrap;
    width: 90%;
    height: 46.96px;
    margin: auto;
}

.mobile-landing-calculator-card .fxcal-fees {
    width: 90%;
    height: 82px;
    border: 1px solid #DBDBDB;
    margin: auto;
    margin-top: 21px;
}

.mobile-landing-tracker-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

.mobile-landing-tracker-card .tracktransaction .trackingclose-btn {
    display: block;
}

.onepip-menu {
    top: 12px;
    left: 10px;
    flex-basis: 35%;
}

#btnOnepipMenu {
    border: none;
    background: transparent;
}


    #btnOnepipMenu:active {
        border: none;
    }


.imgonepipmenu {
    width: 20px;
}

/*.onepip-menu .dropdown-menu {
    min-height: 679px !important;
    min-width: 276px !important;
    transform: none !important;
    border:2px solid #000000;
}
*/
#imgonepipicon{
    width:126px;
    padding-top:12px;
}

.onepip-menu p {
    font-family: Helvetica-Neu-Bold;
    font-size: 16px;
    color: #000000;
    white-space:nowrap;
}

#btnbackmenu {
    display: none;
    position: absolute;
    top: 28px;
    left: 13px;
}

.onepip-menu button{
    border: none;
    background:transparent;
    color: #000000;
    white-space: nowrap;
}

.pl-26{
    padding-left:26px
}

.pl-20 {
    padding-left: 20px
}

.menu-right-icon {
    margin-left: 140px;
}

.menu-right-icon-2{
    margin-left:86px;
}


.menu-language{
    display:none;
}

.menu-my {
    width: 33px;
}

.menu-switch-language{
    position:absolute;
    bottom:0;
    margin-bottom: 20px;
}

.btnhk{}

.btnsg{

    margin-right: 8px;
}

.btnmy{

    margin-right: 17px;
}

@media (min-width: 768px){
    .mobile-fx-card-header .card-day{
        margin-right:-47px;
    }
}


.onepip-mobile-header {
    background: linear-gradient(180deg, rgba(210, 210, 210, 1) 0%, rgba(246, 246, 246, 0.19) 100%);
    border-top: 7px solid #FFAC00;
    position: fixed;
    z-index: 2;
    width: 100%;
    height: 72px;
}

.tab {
    overflow: hidden;
    border: 0px solid #ccc;
    background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button.active{
    background: linear-gradient(180deg, #D2D2D3, #FFFFFF);
}

.tab button:not(.active) {
  background-color: #E0E0E0;
  color:#B4B4B4;
}

.tablinks {
    width:50%;

}

.spinner-border {
    margin-left:13px;
    margin-right:8px;
    width: 0.5rem;
    height: 0.5rem;
    border: 1px solid currentColor;
    border-right-color:transparent;
    vertical-align:unset;
}

.opxcard-languagecard {
    position: absolute;
    left: 0;
    right: 0;
}

    .opxcard-languagecard small {
        font-size: 21px;
        font-weight: 500;
    }

    .opxcard-languagecard a {
        font-size: 21px;
        font-weight: 400;
    }

    .opxcard-languagecard .language-selector td {
        padding: 1px;
    }


    .opxcard-languagecard table td:nth-child(2), .opxcard-languagecard table td:nth-child(4) {
        padding-left: 10px;
        padding-right: 10px;
    }

    .opxcard-languagecard table td:nth-child(5) {
        padding-right: 10px;
    }

    .opxcard-languagecard .dropdown-menu {
        left: 105px !important;
        border-radius: 12px;
        box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.5);
        background-color: rgba(237, 236, 235, 1);
        overflow: hidden;
    }

        .opxcard-languagecard .dropdown-menu span {
            font-family: SFPro-Bold;
            font-size: 19px;
            color: #000000;
        }

            .opxcard-languagecard .dropdown-menu span img {
                margin-right: 7px;
                margin-left: 10px;
            }


    .opxcard-languagecard .language-selected {
        font-size: 18px;
        letter-spacing: -0.5px;
    }

    .opxcard-languagecard .language-selector td{
        padding: 3px 12px;
    }

.opxcard-breakLine {
    width: 319px;
    height: 1px;
    background: #5C5C5C;
    margin-top: 20px;
}

.opxcard-copyright {
    color: #5C5C5C;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.21px;
    margin-bottom: 15px;
    margin-top: 6px;
}

.data-bottom {
    border-bottom: 1px solid #FFAC00;
    padding-bottom:7px;
}

.data-m-r{
    margin-right:18px;
}

.fxcal-paycurrency .currency-dropdown{
    background:none;
    margin-left:3px;
}

.powered-by-note{
    display:none;
}

.fxcal-title .OP-rate {
    background: #FFAC00;
    color: #000000;
    border-radius: 15px;
    white-space: nowrap;
    font-size: 12px;
    font-family: SFPro-Bold;
    letter-spacing: -0.5px;
    padding: 2px 10px;
    margin: 0;
}

.fxcal-paycurrency .fa-chevron-down {
    color: #FFAC00 !important;
}

#fxcal-charges{
    padding: 5px 7px;
}

.fx-rates-card-table td:nth-child(3) {
    width: 20%;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.btndropdownOnepipMenu {
    border: none;
    background: transparent;
    padding: 10px 15px 0px;
    height: 76px;
    cursor: pointer;
    font-size: 16px;
    color: #000000;
    font-family: 'SFPro-Bold';
    border-bottom: 7px solid transparent;
}

    .btndropdownOnepipMenu:focus {
        border: none;
        outline: none;
        border-bottom: 7px solid #FFAC00;
    }

#ddlaccounServiceDropdown {
    /*    width: 649px;*/
    min-height: 275px;
    margin-top: -1px;
    padding: 0 50%;
    background: linear-gradient(0deg, rgba(99, 99, 99, 1) 0%, rgba(229, 229, 229, 1) 0%, rgba(253, 253, 253, 1) 100%);
}

#ddlcompanyInfoDropdown {
    /*    width: 411px;*/
    min-height: 280px;
    margin-top: -1px;
    background: linear-gradient(0deg, rgba(99, 99, 99, 1) 0%, rgba(229, 229, 229, 1) 0%, rgba(253, 253, 253, 1) 100%);
}

.dropdown-section {
    padding: 7px 29px 10px 22px;
}

    .dropdown-section p {
        margin-left: 10px;
        margin-bottom: 0;
    }

#ddlaccounServiceDropdown a, #ddlcompanyInfoDropdown a {
    cursor: pointer;
    font-family: SFPro-Bold;
    font-size: 19px;
    letter-spacing: 0.3px;
    line-height: 1.5;
    color: #000000;
    padding-bottom: 0px;
    padding-top: 0px;
    font-weight: 500;
    text-decoration: none;
}

#ddlcompanyInfoDropdown p {
/*    color: #AFAFAF;
    font-size: 21px;
    font-family: 'SFPro-Bold';*/
}

#ddlcompanyInfoDropdown a {
    padding: 0 0 1px 74px;
}

#ddlaccounServiceDropdown p {
/*    color: #AAAAAA;
    font-family: Open-Sans-CondBold;
    font-size: 20px;
    letter-spacing: -0.26px;*/
}

#ddlaccounServiceDropdown span {
    color: #000;
    font-family: Open-Sans-CondBold;
    font-size: 20px;
    letter-spacing: -0.26px;
}

.dropdown-company-links {
    display: flex;
    gap: 48px;
    margin-top:-15px;
}

    .dropdown-company-links .column {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }


.dropdown-onboarding-row {
    display: flex;
    gap: 20px; 
    margin-left: 50px;
    margin-top: 10px;
}

.dropdown-onboarding-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .dropdown-onboarding-column .dropdown-title {
        background: #E78F00;
        border-radius: 8px;
        font-family: SFPro-Bold;
        font-size: 12px;
        letter-spacing: -0.33px;
        line-height: 2px;
        color: #4B4B4B;
        text-align: center;
        padding: 11px 29px;
        width: auto;
        text-transform: uppercase;
    }


/*.dropdown-exchange {
    border-right: 2px solid #FFAC00;
    flex-basis: 50%;
    margin-top: 20px;
}*/

.dropdown-accOpening{
    flex-basis:50%;
    margin-top: 20px;
}


    .dropdown-accOpening .corporate {
        font-family: SFPro-Bold;
        font-size: 12px;
        line-height: 2px;
        text-align: center;
        padding: 8px 0px;
        text-transform: uppercase;
        color: #FFFFFF;
        background: #E78F00;
        width: 263px;
    }

    .dropdown-accOpening .dropdown-subtitle {
        font-family: SFPro-Medium;
        color: #000000;
        font-size: 12px;
        letter-spacing: 0.70px;
        margin-left: 1px;
        margin-bottom: -9px;
        margin-top:-15px;
    }

.dropdown-accOpening .dropdown-section{
    padding-bottom:0px;
    margin-left: -34px;
}

.opx-trial-section {  
  width: 100%;  
  background: #fff;  
  font-family: 'SFPro-Medium';  
  margin: 85px 0 90px 0;  
  color: #515151;  
}

.opx-trial-wrapper {
    width: 100%;
    justify-content: center;
}

.opx-trial-section .container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 64px 100px;
    overflow: visible !important;
    position: relative;
    z-index: 0;
    background: linear-gradient( 0deg, hsla(0, 0%, 100%, 0.1) 0%, hsla(40, 92%, 53%, 0.3) 80%, hsla(41, 100%, 50%, 0.17) 100% );
}

.trial-form-wrapper {
    font-family: 'SFPro-Regular';
    max-width: 350px;
    width: 100%;
}

.phone-number-wrapper {
    display: flex;
    gap: 12px;
    width: 100%;
}

.opx-trial-section .form-control,
.opx-trial-section .form-select {
    border: 1px solid #E0E0E0;
    box-shadow: rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background-color: #fff;
    font-size: 15px;
    font-family: 'SFPro-Regular';
}

.form-phonesection-wrapper {
    width: 130px;
    gap: 10px;
    flex-shrink: 0;
}

.opx-trial-section .trial-section-wrapper {
    display: flex;
    gap: 40px;
    flex-wrap: nowrap;
}

.opx-trial-section .trial-left {
    margin-left: 220px;
    width: 700px;
    flex-shrink: 0;
}

.opx-trial-section .trial-right {
    position: relative; 
    z-index: 0;
    overflow: visible;
}

.area-label-inside {
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: 10px;
    color: #6e6e6e;
    background-color: #fff8ea;
    padding: 0 4px;
    z-index: 10;
    pointer-events: none;
    font-family: 'SFPro-Regular';
}

    .opx-trial-section .trial-box {
        background-color: #fff8ea;
        border: 1px solid rgba(252, 175, 23, 0.2);
        border-radius: 20px;
        position: relative;
    }

.trial-form-wrapper {
    font-family: 'SFPro-Regular';
    max-width: 320px;
    width: 100%;
}

.phone-number-wrapper {
    display: flex;
    gap: 10px;
    width: 100%;
    align-items: flex-end;
}

.form-phonesection-wrapper {
    gap: 10px;
    flex-shrink: 0;
}

.area-label-inside {
    position: absolute;
    top: -9px;
    left: 5px;
    font-size: 10px;
    color: #6e6e6e;
    background: #fff8ea;
    padding: 0 4px;
    z-index: 10;
    pointer-events: none;
    font-family: 'SFPro-Regular';
}

.opx-trial-section .h3 {
    font-family: 'SFPro-Bold';
    font-size: 36px;
    color: #000000;
    letter-spacing: -1px;
    line-height: 50px;
}

.form-phonesection-custom {
    position: relative;
    width: 100%;
    height: 42px;
}

.opx-trial-section .input-style {
    width: 450px;
    height: 42px;
    font-size: 12px;
    font-family: 'SFPro-Bold';
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    background-color: #fff;
    box-sizing: border-box;
    margin-left: 6px;
    padding: 10px 12px;
    box-shadow: rgba(0, 0, 0, 0.12);
}

.phone-select {
    padding-top: 18px;
    padding-bottom: 6px;
    height: 42px;
    border: 1px solid #fcaf17;
    border-radius: 8px;
    background-color: #fff;
    font-size: 15px;
    font-family: 'SFPro-Regular';
    width: 100%;
    box-sizing: border-box;
}

.opx-trial-section .phone-select,
.opx-trial-section .phone-input {
    height: 42px;
    font-size: 12px;
    font-family: 'SFPro-Bold';
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    background-color: #fff;
    box-sizing: border-box;
    width: 100%;
    margin-left: 6px;
}

.phone-input {
    flex-grow: 1;
    height: 42px;
    font-size: 14px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    background-color: #fff;
    font-family: 'SFPro-Regular';
}

.phone-number-wrapper .form-phonesection {
    margin-right: 10px;
}

.opx-trial-section .trial-btn {
    background: linear-gradient(180deg, #FBAF17 0%, #FF9B00 100%);
    color: white;
    font-family: 'SFPro-Medium';
    font-size: 14px;
    border-radius: 4px;
    padding: 8px 33px;
    border: none;
    margin-left: 283px;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
}

.opx-trial-section .opx-logo {
    max-height: 25px;
    width: auto;
    margin: 0;
    margin-left: 500px;
}

.opx-trial-section .contact-btn {
    border: 1px solid #fcaf17;
    color: #fcaf17;
    background-color: white;
    font-family: 'SFPro-Bold';
}

    .opx-trial-section .contact-btn:hover {
        background-color: #fcaf17;
        color: white;
    }

.promo-qr-box {
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
    display: inline-block;
}

.opx-trial-section .opx-container {
    display: flex;
    align-items: center;
    gap: 200px;
}

.opx-trial-section .form-floating-label {
    position: relative;
    margin-bottom: 14px;
}

    .opx-trial-section .form-floating-label input,
    .opx-trial-section .form-floating-label .form-select {
        width: 100%;
        height: 42px;
        padding: 12px 12px 8px 12px;
        font-size: 14px;
        font-family: 'SFPro-Regular';
        border: 1px solid #E0E0E0;
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.12);
        box-sizing: border-box;
    }

    .opx-trial-section .form-floating-label label {
        position: absolute;
        top: 0px;
        left: 12px;
        font-size: 12px;
        color: #7A7A7A;
        padding: 0 6px;
        z-index: 2;
        font-family: 'SFPro-Regular';
        pointer-events: none;
    }

.form-floating-label {
    position: relative;
    margin-bottom: 14px;
    width: 398px;
}

.form-control.input-style {
    width: 100%;
    padding: 12px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-family: 'SFPro-Regular';
    font-size: 15px;
    transition: border-color 0.3s;
}

.form-floating-label label {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: 14px;
    color: #7A7A7A;
    padding: 0 4px;
    transition: 0.2s ease;
    pointer-events: none;
}

.form-control:focus + label,
.form-control:not(:placeholder-shown) + label {
    top: 11px;
    left: 10px;
    font-size: 11px;
    color: #7A7A7A;
}

input:invalid {
    border-color: red;
}

.qr-img {
    height: 90px;
    width: auto;
}

.opx-logo-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.opx-logo {
    height: 32px;
    width: auto;
    margin-left: 554px;
}

.onepip-bg-logo {
    position: absolute;
    top: -143px;
    left: -12%;
    transform: translateX(-50%);
    opacity: 0.17;
    z-index: 2;
    width: 252px; 
    height: auto;
}

.trial-phone-img {
    height: 412px;
    width: 398px;
    position: absolute;
    z-index: 4;
    top: -199px;
    margin-left: -175px;
    transform: scale(1.1); 
}

@media (max-width: 1563px) {
    .opx-trial-section .trial-left {
        margin-left: 108px;
        width: 700px;
        flex-shrink: 0;
    }

    /*.modalFindoutMore .modal-body img {
        width: 245px;
        height: auto;
    }*/
}

@media (max-width: 1440px) {

    .deal-section {
        width: 79%;
    }

    .deal-section .card-title {
        font-size: 1.2rem;
    }

    .promo-left-box {
        margin-left: 6rem;
    }

    .promo-phone-img {
        margin-right: 2rem;
        width: 90%; 
        max-height: 78%; 
    }

    .trial-right img {
        max-height: 600px;
    }

    .opx-trial-section .trial-left {
        margin-left: 40px;
        width: 700px;
        flex-shrink: 0;
    }

    /*.modalFindoutMore .left-content {
        max-width: 230px;
    }

    .modalFindoutMore .modal-body img{
        width: 245px;
        height: auto;
    }*/

    .modalFindoutMore .modal-dialog {
        max-width: 95vw;
    }

    .modalFindoutMore .modal-content {
        max-width: 100% !important;
        height: auto !important;
    }

    .modalFindoutMore .title {
        white-space: normal;
        font-size: 36px;
        line-height: 1.1;
    }

    .modalFindoutMore .modal-body {
        padding: 0 40px 30px;
    }

    .modalFindoutMore .modal-body-flex {
        gap: 24px;
    }

    .modalFindoutMore .img-modal-body img {
        max-width: 280px;
    }

    .modalFindoutMore .left-content {
        font-size: 20px !important;
        max-width: 220px !important;
    }

    .modalFindoutMore .right-subcontent {
        font-size: 16px;
        max-width: 380px;
    }

    .modalFindoutMore .right-content-title {
        font-size: 22px;
    }

    .modalFindoutMore .divContentBody {
        max-width: 100%;
    }

    .modalFindoutMore .div-middlecontent {
        margin-right: 0 !important;
    }

    #OPXModal .modal-content,
    #OPX1AccountModal .modal-content,
    #opxapiModal .modal-content,
    #OPXPayModal .modal-content,
    #RateModal .modal-content,
    #NetworkModal .modal-content,
    #ONERISKModal .modal-content {
        max-width: 95vw !important;
        height: auto !important;
        min-height: unset;
    }

    #opxapiModal .modal-body img {
        max-width: 300px;
        width: 100%;
    }

    #RateModal .modal-body img {
        max-width: 300px;
        width: 100%;
    }

    #NetworkModal .modal-body img {
        max-width: 260px;
        width: 100%;
    }
}

@media (max-width: 1280px) {
    .promo-phone-img {
        margin-right: 10rem;
        width: 85%;
        max-height: 85%;
    }

    .modalFindoutMore .modal-body-flex {
        gap: 16px;
    }

    .modalFindoutMore .title {
        font-size: 32px;
        line-height: 1.1;
    }

    .modalFindoutMore .img-modal-body img {
        max-width: 240px;
    }

    .modalFindoutMore .left-content {
        font-size: 18px !important;
        max-width: 200px !important;
    }

    .modalFindoutMore .right-subcontent {
        font-size: 14px;
        max-width: 340px;
    }

    .modalFindoutMore .modal-body {
        padding: 0 30px 20px;
    }

    .modalFindoutMore .right-content-title {
        font-size: 20px;
        width: auto;
    }

    #opxapiModal .modal-body img,
    #RateModal .modal-body img {
        max-width: 250px;
    }

    #NetworkModal .modal-body img {
        max-width: 220px;
    }
}

@media (max-width: 1115px) {
    .promo-phone-img {
        margin-right: 8rem;
        width: 80%;
        max-height: 80%;
    }
}

@media (max-width: 1023px) {
    .modalFindoutMore .modal-dialog {
        max-width: 98vw;
    }

    .modalFindoutMore .modal-body {
        padding: 0 20px 15px;
        flex-direction: column;
    }

    .modalFindoutMore .modal-body-flex {
        flex-direction: column;
        gap: 12px;
    }

    .modalFindoutMore .title {
        font-size: 28px;
    }

    .modalFindoutMore .img-modal-body img {
        max-width: 200px;
    }

    #OPXPayModal .img-modal-body img {
        max-width: 300px;
    }

    .modalFindoutMore .left-content {
        font-size: 16px !important;
        max-width: 100% !important;
        text-align: left;
    }

    .modalFindoutMore .div-middlecontent {
        flex-direction: column;
    }

    .modalFindoutMore .right-subcontent {
        max-width: 100%;
    }

    .modalFindoutMore .right-content-title {
        width: auto;
    }

    #opxapiModal .modal-body img,
    #RateModal .modal-body img,
    #NetworkModal .modal-body img {
        max-width: 200px;
    }
}

@media (max-width: 1110px) {
    .promo-phone-img {
        margin-right: 7rem;
        width: 75%;
        max-height: 75%;
    }
}

@media (max-width: 1070px) {
    .promo-phone-img {
        margin-right: 6rem;
        width: 70%;
        max-height: 70%;
    }
}

@media (max-width: 991px) {
    .promo-phone-img {
        margin-right: 5rem;
        width: 65%;
        max-height: 65%;
    }
}

@media (max-width: 850px) {
    .promo-phone-img {
        margin-right: 4rem;
        width: 60%;
        max-height: 60%;
    }
}

@media (max-width: 768px) {
    .promo-phone-img {
        margin-right: 2rem;
        width: 55%;
        max-height: 55%;
    }
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-top: 2px !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-family: 'SFPro-Regular';
    line-height: 1.2;
}

.select2-container--default .select2-selection--single {
    height: 42px !important;
    border: 1px solid #E0E0E0 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background-color: #fff !important;
}

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: 10px !important;
    }

.select2-results__option img,
.select2-selection__rendered img {
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
}

.opx-trial-section .contact-wrapper {
    width: 100%;
    margin: 0;
    padding: 80px 15px 0 15px;
    padding-bottom: 0 !important;
}

    .opx-trial-section .contact-wrapper h4 {
        font-family: SFPro-Bold;
        font-weight: 800;
        font-size: 46px;
        color: #454036;
        text-align: center;
        margin-bottom: 5px;
        letter-spacing: -1.6px;
        line-height: 50px;
    }

    .opx-trial-section .contact-wrapper p {
        font-family: SFPro-Medium;
        font-size: 21px;
        color: #606060;
        text-align: center;
        margin-bottom: 30px;
        letter-spacing: -1px;
    }

    .opx-trial-section .contact-wrapper .row {
        max-width: 1285px;
        margin: 0 auto;
    }

.opx-trial-section .contact-title {
    font-family: SFPro-Bold;
    font-size: 28px;
    color: #000000;
    text-align: center;
    margin-bottom: 25px;
    letter-spacing: -0.87px;
    font-weight: 900;
}

.opx-trial-section .contact-box {
    width: 700px;
    align-items: center;
    border: none;
    box-shadow: none;
    margin-top: -8px;
}

.opx-trial-section .contact-info-block {
    text-align: center;
    font-size: 16px;
    letter-spacing: -0.57px;
    display: flex;
    flex-direction: row;
    gap: 80px;
}

.opx-trial-section .country-group {
    display: flex;
    flex-direction: column;
}

.opx-trial-section .country-name {
    font-family: 'SFPro-Medium';
    font-size: 21px;
    text-transform: uppercase;
    color: #333;
    letter-spacing: 0.43px;
    margin-bottom: 7px;
}

.opx-trial-section .contact-number {
    font-family: 'SFPro-Bold';
    font-size: 16px;
    color: #000;
    text-shadow: 0 0 0.3px #000;
    letter-spacing: 0.43px;
}

.opx-trial-section .contact-email {
    font-family: 'SFPro-Light';
    font-size: 16px;
    color: #000;
    text-shadow: 0 0 0.3px #000;
    letter-spacing: 0.43px;
    margin-top: -5px;
}

.opx-trial-section .contact-box h5 {
    font: SFPro-Medium;
    text-align: left;
    font-size: 16px;
    letter-spacing: -0.57px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

    .opx-trial-section .contact-box p {
        font-size: 14px;
        color: #333333;
        margin-bottom: 15px;
        line-height: 1.6;
    }

    .opx-trial-section .contact-box img {
        max-width: 250px;
        height: auto;
        z-index: 1;
    }

.opx-trial-section .contact-box a.btn {
    padding: 8px 0px;
    border-radius: 8px;
    font-family: SFPro-Medium;
    font-size: 16px;
    font-weight: 500;
    color: white;
    letter-spacing: 1px;
    background: linear-gradient(180deg, #FBAF17 0%, #FF9B00 100%);
    box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.1);
    width: 128px;
    height: 42px;
    z-index: 4;
    margin-top: -31px;
}

@media (max-width: 1440px) {
    .opx-trial-section .contact-wrapper {
        padding: 80px 40px 0 40px;
    }

    .opx-trial-section .contact-title {
        font-size: 22px;
    }

    .opx-trial-section .trial-left {
        margin-left: auto;
        margin-right: auto;
    }

    .opx-trial-section .contact-box {
        padding: 50px 40px;
    }

        .opx-trial-section .contact-box h5 {
            font-size: 22px;
        }

        .opx-trial-section .contact-box p {
            font-size: 15px;
        }

/*    .onepip-bg-logo {
        top: -143px;
        left: -22%;
        width: 306px;
    }*/
}

@media (max-width: 767px) {
    .opx-trial-section .contact-wrapper {
        padding: 40px 15px 0 15px;
    }

    .opx-trial-section .contact-box {
        padding: 30px 20px;
    }

        .opx-trial-section .contact-box h5 {
            font-size: 18px;
        }

        .opx-trial-section .contact-box p {
            font-size: 13px;
        }

    .opx-trial-section .contact-title {
        font-size: 18px;
    }
}



.custom-success-modal {
    background: linear-gradient(to bottom, #ffffff, #f9f9f9);
    border-radius: 0 0 0.75rem 0.75rem; 
    border: none;
    text-align: center;
    position: relative;
    min-height: 22.5rem; 
    max-width: 23.75rem; 
    margin: 0 auto;
    font-family: 'SFPro-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
    animation: fadeIn 0.4s ease-in-out;
}

.modal-topbar {
    width: 100%;
    height: 0.5rem; 
    background-color: #fcaf17;
}

.modal-logo-wrapper {
    margin-top: 1.15rem; 
    padding-left: 1.5rem; 
    text-align: left;
    display: flex;
    align-items: center;
}

.modal-opx-logo {
   padding-top: 20px;
   padding-left: 20px;
    height: 4rem; 
    width: auto;
    display: block;
    object-fit: contain;
    margin: 0;
}

.modal-body-text {
    padding: 0 1.875rem; 
    margin-top: 1.45rem;
    text-align: center;
}

.modal-text {
    opacity: 1;
    color: rgba(0, 0, 0, 1);
    font-family: "SFPro-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.3rem; 
    font-weight: 400;
    font-style: normal;
    letter-spacing: -0.03125rem; 
    text-align: center;
    line-height: 1.5rem; 
    margin-bottom: 0.5rem; 
}

.modal-button-wrapper {
    padding: 1.25rem 1.875rem; 
    position: absolute;
    bottom: 0.75rem; 
    width: 100%;
}

.btn-homepage {
    font-family: 'SFPro-Bold';
    background-color: #fcaf17;
    color: white;
    padding: 0.625rem 0; 
    border-radius: 0.5rem; 
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    width: 80%;
    transition: background-color 0.3s ease;
}

    .btn-homepage:hover {
        background-color: #e09e10;
        color: white;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}








.was-validated .form-control:invalid {
    border-color: red;
}

footer {
    background: url(../images/newfooter.svg) no-repeat center center / cover, linear-gradient(0deg, hsla(0, 0%, 0%, 0.28) 0%, hsla(0, 0%, 0%, 0.08) 25%, hsla(0, 0%, 0%, 0) 100%);
    background-blend-mode: normal;
    min-height: 423px;
    padding: 38px 150px;
}


.footer-details {
    flex-basis: 65%;
    margin-top: 85px;
}

.footer-contact {
    text-align: right;
}

footer .language-selected {
    background: none;
    border: none;
    font-family: 'SFPRO-BOLD';
    font-size: 21px;
    color: #000000;
    cursor: pointer;
}

footer .language-selector td {
    padding: 3px 12px;
}

footer .splitline {
    padding: 1px !important;
}

footer td:nth-child(2) {
    font-family: SFPro-Medium;
    font-size: 17px;
    color: #000000;
}

footer td:nth-child(n+4):nth-child(-n+6) {
    font-family: SFPro-Regular;
    font-size: 17px;
    color: #000000;
}

footer .dropdown-menu {
    left: 115px !important;
    top: -38px !important;
}

    footer .dropdown-menu span img {
        margin-right: 7px;
        margin-left:10px;
    }

    footer .dropdown-menu span {
        font-family: SFPro-Bold;
        font-size: 19px;
        color: #000000;
    }

footer .p-slogan {
    font-family: SFPro-Bold;
    font-size: 24px;
    color: #000000;
    margin: 0;
    text-transform: uppercase;
    margin-top: 30px;
}

footer .p-subslogan {
    color: #000000;
    font-family: SFPro-Bold;
}

footer .p-license {
    font-family: SFPro-Regular;
    font-size: 14px;
    letter-spacing: 0px;
    color: #000000;
    line-height: 1.2;
    letter-spacing: 0.44px;
    width: 640px;
}


footer .p-sublicense {
    font-family: SFPro-Medium;
    font-size: 16px;
    letter-spacing: 0px;
    color: #000000;
}

footer .footer-conditions {
    font-family: SFPro-Medium;
    font-size: 24px;
    letter-spacing: -0.5px;
    color: #000000;
    margin-top:33px;
}

    footer .footer-conditions a {
        padding: 0 10px;
        white-space: nowrap;
        cursor: pointer;
        color: #000000;
    }

    footer .footer-conditions a:nth-of-type(1) {
        padding-left: 0;
    }

footer .p-copyright {
    font-family: SFPro-Bold;
    font-size: 14px;
    letter-spacing: 0.2px;
    color: #000000;
    margin-top: 4px;
}

footer .p-address {
    font-family: SFPro-Regular;
    font-size: 16px;
    letter-spacing: 0px;
    color: #000000;
    margin: 0;
    line-height: 22px;
    margin-top: 36px;
}

footer .p-contact {
    font-family: SFPro-Bold;
    font-size: 16px;
    letter-spacing: 0px;
    color: #000000;
    margin: 0;
    line-height: 1.3;
    font-weight: 900;
}

footer .divFooterLogo {
    margin-top: 78px;
    cursor: default;
    justify-content: end;
}

footer .divFooterLogo img{
    padding:0 5px;
}

    footer .divFooterLogo a:nth-of-type(5) img{
        padding-right:0px;
    }

.modalFindoutMore .modal-dialog {
    max-width: 1495px;
    height: 854px;
    width: 100%;
    margin: auto;
    border-radius: 20px;
    position: relative;
}

/* Scale down modal to fit smaller viewports */
@media (max-height: 900px) {
    .modalFindoutMore .modal-dialog {
        transform: scale(0.85);
        transform-origin: center center;
    }
}

@media (max-height: 750px) {
    .modalFindoutMore .modal-dialog {
        transform: scale(0.75);
        transform-origin: center center;
    }
}

.modalFindoutMore .title{
    font-family: SFPro-Bold;
    font-size: 48px;
    letter-spacing: -2.14px;
    line-height: 42px;
    color: #000000;
   /* margin-top:-85px;*/
   margin-bottom:3px;
   white-space: normal;
}

.modalFindoutMore .modal-header{
    border-bottom:none;
    padding-bottom: 0
}

/* Content is anchored 32px under the logo, as in Figma (ONERISK 357:5946: logo ends at y=88,
   content starts at y=120), and the spare height of the fixed 700px box falls below it. It used
   to be centred vertically, so the gap under the logo depended on how tall each pop-up's copy
   was - 32px to 107px across the seven pop-ups - and was 0 at <=1440px, where the height is auto. */
.modalFindoutMore .modal-body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    padding: 32px 80px 30px;
    overflow: hidden;
}

.modalFindoutMore .modal-body-flex {
    max-height: 100%;
}

.modalFindoutMore .img-modal-body img {
    max-height: 50vh;
    width: auto;
}

.modalFindoutMore .modal-content {
    max-width: 1200px !important;
    height: 700px !important;
    border-radius: 20px !important;
    overflow: hidden;
}


#OPXModal .modal-content {
    max-width: 1200px;
    height: 700px;
    border-radius: 20px;
}

#OPX1AccountModal .modal-content {
    max-width: 1495px;
    height: 854px;
    border-radius: 20px;
}

/* Desktop: the dialog is a fixed 854px scale-to-fit box, so the outer overlay
   scroll is just dead space. Disable it here only (mobile still needs to scroll). */
@media (min-width: 1024px) {
    .modal-open #OPX1AccountModal {
        overflow: hidden !important;
    }
}

#opxapiModal .modal-content {
    max-width: 1495px;
    height: 854px;
    border-radius: 20px;
}

#OPXPayModal .modal-content {
    max-width: 1495px;
    height: 854px;
    border-radius: 20px;
}

#RateModal .modal-content {
    max-width: 1495px;
    height: 854px;
    border-radius: 20px;
}

/* ONERISK modal. Figma 357:5946 draws it at 1200x750, matching the default .modalFindoutMore
   .modal-content box, so only the logo and the CTA need rules of their own. */
#ONERISKModal .modal-content {
    max-width: 1200px;
    height: 700px;
    border-radius: 20px;
}

/* .img-modal-body computes to display:contents, so the <img> itself is the flex item of the
   .modal-body-flex row - with the default align-items:stretch it was being pulled from its natural
   354px to 500px. align-self has to sit on the image, not the wrapper. Nothing else is overridden
   here so the responsive max-width ladder above (280/240/200px) still shrinks it. */
#ONERISKModal .img-modal-body img {
    align-self: center;
    height: auto;
}

/* Figma puts the logo at 36,36 - the same corner the sibling logos reach, since .modal-opx-logo
   is margin:0 + 20px padding inside the header's 16px. The width deliberately departs from the
   Figma's 240px: it matches the OPXPay logo as rendered (its SVG pads the artwork, which shows at
   162x33), so the two partner pop-ups look alike. No bottom margin: the gap to the content is
   .modal-body's padding-top, the same for every pop-up. mobileweb.css resets these margins and
   the width with an #ONERISKModal rule, so this only reaches the desktop modal. */
.modal-onerisk-logo {
    width: 162px;
    height: auto;
    margin: 20px 0 0 20px;
}

/* Chinese copy. The shared .modalFindoutMore metrics are tuned for Latin text, and at 42px on a
   48px font the two headline lines touch. Figma 362:7053 (Simplified) and 362:7306 (Traditional)
   set the headline to 50px on 48px, the left column to 32px on 24px, the partner list to 1.3, and
   put a blank line between the partner items. Written as ratios so they follow the font-size
   ladder at 1440/1280/1023px. English (357:5946) keeps the shared metrics and has no blank lines.
   .modalFindoutMore keeps this off the phone modal, which reuses the id and .title. */
#ONERISKModal.modalFindoutMore:lang(zh) .title {
    line-height: 1.04;
}

#ONERISKModal.modalFindoutMore:lang(zh) .left-content {
    line-height: 1.33;
}

#ONERISKModal.modalFindoutMore:lang(zh) .right-content-title,
#ONERISKModal.modalFindoutMore:lang(zh) .right-subcontent {
    line-height: 1.3;
}

#ONERISKModal.modalFindoutMore:lang(zh) .right-subcontent p + p {
    margin-top: 1.3em;
}

/* The only card modal with a CTA of its own - this is the click that leaves for onerisk.asia. */
.onerisk-modal-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: stretch;
    max-width: 428px;
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    background-color: #FFAC00;
    font-family: SFPro-SemiBold, Arial, sans-serif;
    font-size: 16px;
    color: #000000;
    text-align: center;
    text-decoration: none;
}

    .onerisk-modal-cta:hover,
    .onerisk-modal-cta:focus {
        background-color: #E69A00;
        color: #000000;
        text-decoration: none;
    }

    .onerisk-modal-cta span {
        flex: 1 0 0;
        min-width: 0;
    }

    .onerisk-modal-cta img {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }

#NetworkModal .modal-content {
    max-width: 1495px;
    height: 854px;
    border-radius: 20px;
}

.modalFindoutMore .div-middlecontent {
    margin-top: 32px;
    gap: 25px;
    align-items: baseline;
}

.modalFindoutMore .left-content {
    color: #272727;
    font-family: Arial;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.28px;
    line-height: 1.04;
/*    margin-right: 45px;
*/    max-width: 250px;
    text-align: right;
    font-family: Open-Sans-CondBold;
    margin-bottom:0;
}


.modalFindoutMore .subcontent {
    color: #FAAF1C;
}

.modalFindoutMore .right-content {
/*    flex-basis:50%;
*/}

.modalFindoutMore .right-content-title {
    font-family: Arial;
    color: #4F4F4F;
    font-size: 26px;
    margin-top: 0px;
    letter-spacing: -1.4px;
    margin-bottom:12px;
    font-weight: 600;
    line-height:22px;
    width: 329px;
}

.modalFindoutMore .right-subcontent {
    font-family: Arial;
    color: #4F4F4F;
    font-size: 18px;
    letter-spacing: -0.7px;
    max-width:428px;
    font-weight: 500;
    line-height: 22px;
/*    margin-top:16px;
*/}

#OPXModal .modal-body img {
/*    margin: 48px 80px;
*/}

/*#OPXModal .modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: auto;
}*/

#OPXModal .modal-content {
    margin: auto;
}

#OPX1AccountModal .modal-content {
    margin: auto;
}

#opxapiModal .modal-content {
    margin: auto;
}

#OPXPayModal .modal-content {
    margin: auto;
}

#RateModal .modal-content {
    margin: auto;
}

#NetworkModal .modal-content {
    margin: auto;
}

/* .modal-content is 1200px inside a 1495px .modal-dialog, so without this it left-aligns in the
   dialog and the pop-up sits off-centre. Every modal above needs the same line - if you add
   another one, add it here too. */
#ONERISKModal .modal-content {
    margin: auto;
}

#OPX1AccountModal .modal-body img {
/*    margin: 48px 58px;
    justify-content: center;*/
}

#opxapiModal .modal-body img{
/*    margin:48px 7px;
*/
width: 362px;
}

#RateModal .modal-body img {
  /*  margin: 48px 14px;
    justify-content: center;*/
  width: 352px;
}

#NetworkModal .modal-body img {
    /*    margin:48px 40px;
*/
    width: 300px;
}

.footer-details .dropdown-menu {
    border-radius: 12px;
    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.5);
    background-color: rgba(237, 236, 235, 1);
    overflow: hidden;
}

.footer-details .dropdown-item{
    margin-top:12px;
    margin-bottom:12px;
}

.footer-details .dropdown-menu div {
    margin: 12px 12px;
}

.footer-details .dropdown-menu a[onclick^="SetLanguage"] {
    cursor: pointer;
}

.footer-my-locations {
    font-family: SFPro-Bold; 
    font-size: 16px;
    letter-spacing: 0px;
    color: #000000;
    margin: 0;
    margin-top: 23px;
    font-weight: 700;
}

.footer-my-address {
    font-family: SFPro-Regular;
    font-size: 16px;
    letter-spacing: 0px;
    color: #000000;
    margin: 0;
    line-height: 17px;
    margin-top: 6px;
}

.footer-my-location .location-tab {
    font-family: SFPro-Bold;
    font-size: 16px;
    letter-spacing: 0px;
    color: #000000;
    margin: 0;
    margin-top: 36px;
    font-weight: 700;
    position: relative;
    cursor: pointer;
}

.footer-my-locations .location-divider {
    margin: 0 8px;
    cursor: default;
    font-weight: normal;
}

.footer-my-locations .location-tab.active {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 3px;
    cursor: pointer;
}

@media (max-width: 1366px) {
    footer .p-address {
        margin-top: 24px;
    }

    footer .divFooterLogo {
        margin-top: 100px;
    }

    footer .p-slogan {
        font-size: 18px !important;
        color: #000000;
        margin: 0;
        margin-top: 37px !important;
    }

    footer .p-license {
        font-size: 13px !important;
    }

    footer .p-address {
        font-size: 15px !important;
        margin-top: 22px !important;
    }

    footer .p-contact {
        font-size: 15px !important;
    }

    footer .divFooterLogo {
        margin-top: 91px !important;
    }

    footer .footer-conditions {
        font-size: 20px;
    }

    footer .p-copyright {
        font-size: 13px;
        letter-spacing: 0.18px;
        margin-top: 0px;
    }
}

@media (max-width: 1023px) {
    footer {
        padding: 30px 40px;
        min-height: auto;
    }

    footer .d-flex {
        flex-wrap: wrap;
    }

    .footer-details {
        flex-basis: 100%;
        margin-top: 30px;
    }

    .footer-contact {
        flex-basis: 100%;
        text-align: left;
        margin-top: 15px;
    }

    footer .divFooterLogo {
        margin-top: 15px !important;
    }

    footer .p-slogan {
        margin-top: 20px !important;
    }

    footer .p-license {
        font-size: 12px !important;
    }

    footer .p-copyright {
        margin-top: 5px;
    }

    .deal-section {
        margin-top: 3rem;
    }

    .deal-section .card {
        min-height: 28rem;
        max-width: 320px;
    }

    .divEngagement {
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .divEngagement .divPadding {
        width: 95%;
        height: auto;
        padding: 30px 20px;
    }

    .divEngagement .divImgPadding {
        flex-basis: 35%;
    }

    .divEngagement .engagementTxt {
        font-size: 32px;
    }

    .divEngagement .engagementTxt2 {
        font-size: 18px;
    }

    .divEngagement button {
        width: 170px;
        height: 42px;
        font-size: 13px;
    }
}

.modalFindoutMore .container-modal {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px; 
}

/* `clip`, not `hidden`. Both stop horizontal overflow, but `overflow-x: hidden` computes
   `overflow-y: auto` and turns <body> into a scroll container, which silently disables
   `position: sticky` for every descendant. That is why the T&C outline had to be written as
   `position: fixed` (tnc.css) and could then never release at the end of the document. `clip`
   clips without creating a scroll container, so sticky works. */
html, body {
    max-width: 100%;
    overflow-x: clip;
}


.imgMYBG{
    background-image: url("../images/bg-1MY.webp");
}

.myCSS{
    position:absolute;
    top:0;
    left: 40%;
}

.bgHeight {
    height: 1060px !important;
}

.bgNav{
    background: #FFFFFF;
}

.layoutMenuDropdown .dropdown-sublabel {
    font-family: SFPRo-Regular;
    font-size: 12px;
    color: #000000;
    margin: 0;
    letter-spacing: 0.5px;
    margin-bottom: -12px;
    margin-top: -2px;
}

.layoutMenuDropdown .dropdown-label {
    font-family: SFPro-Bold;
    font-size: 14px;
    color: #000000;
    padding: .25rem 1.5rem;
    margin: 0;
}

.layoutMenuDropdown .dropdown-section p {
    font-family: Open-Sans-CondBold;
    font-size: 24px;
    letter-spacing: -0.34px;
    color: #AAAAAA;
}

.layoutMenuDropdown .divforgotOPX {
    margin-top: -8px;
    margin-left: 23px;
}

.layoutMenuDropdown .dropdown-section p .span {
    color: #595959;
}

.dropdown-accOpening .individual {
    background: #FFDB90;
    font-family: SFPro-Bold;
    font-size: 12px;
    line-height: 2px;
    text-align: center;
    padding: 8px 0px;
    text-transform: uppercase;
    color: #4B4B4B;
    width: 109px;
}

.layoutMenuDropdown .dropdown-sidetoside{
    padding-right: 0px;
    margin-right: -45px;
}

.layoutMenuDropdown .dropdown-sidetoside-right {
    padding-left: 4px;
    padding-right: 0px;
}

.layoutMenuDropdown .corporate-dropdown-sidetoside{
    padding-right: 0px;
    margin-right:4px;
}

.layoutMenuDropdown .corporate-dropdown-sidetoside-right {
    padding-left: 4px;
    font-size: 16px !important;
    font-family: SFPro-Medium !important;
}

.landing-graph .graph-pallet-top .currency-dropdown {
    background: #d3d0d0;
    width: 70px;
}

.landing-graph .graph-pallet-top .graph-selected-currency-fromCurrency[data-currency="JPY"] {
    width: 90px;
}

.landing-graph #currency-selector-unit-from, #currency-selector-unit-to{
    line-height: 27px;
}

#myfirstchart tspan {
    font-weight: bold;
}


@media screen and (min-width: 2000px)
{
    /* Was "padding: 0 10%" to pull the nav in on big screens; the nav content is now
       capped at 1920px (see .navbar-collapse), so keep the normal 30px padding. */
    .navbar {
        padding: 0 30px;
    }
}



.dropdown-menu a:active, .language-selector .dropdown-item a:active{
    background: transparent;
}

.dropdown-accOpening a{
    padding-left:0px;
}

.dropdown-accOpening .divIndividual{
    margin-left:59px;
}

.dropdown-accOpening .AauthUser{
    margin-top:-13px;
}

#ddlcompanyInfoDropdown a{
    margin-left: -9px;
    margin-top:8px;
}

#ddlaccounServiceDropdown .dropdown-exchange {
    min-width: 290px;
}

#ddlaccounServiceDropdown .divExchangeLogo {
    margin-left: -62px;
    padding: 7px 29px 10px 22px;
}

    #ddlaccounServiceDropdown .divExchangeLogo p {
        font-family: Open-Sans-CondBold;
        font-size: 24px;
        letter-spacing: -0.34px;
        color: #AAAAAA;
    }

.modalFindoutMore .modal-body-flex{
    gap:48px;
}

.layoutMenuDropdown #ddlcompanyInfo{
    letter-spacing: 0.4px;
    margin-right: 10px;
}

#myfirstchart text {
    fill: #FFAC00;
}

.loginBtn img {
    width: 47px;
}

.modalFindoutMore .img-modal-body{
max-width: 362px;
max-height:590px;
display:contents;
}

.modalFindoutMore .divContentBody {
    max-width: 662px;
    max-height: 590px;
}

#ddlaccounServiceDropdown a:hover, #ddlcompanyInfoDropdown a:hover{
    background: transparent;
}

.footer-details .language-selector {
    background: transparent;
}

.footer-details a{
    color: #000000 !important;
}

.divEngagement {
  
    margin:auto;
    margin-top:142px;
    margin-bottom: 141px;
}

    .divEngagement .divPadding {
        width: 1094px;
        height: 426px;
        border-radius: 40px;
        background-color: rgba(208, 208, 208, 0.42);
        padding: 0 70px;
        margin:auto;
    }

    .divEngagement .divImgPadding{
        flex-basis: 50%;
    }


    .divEngagement .engagementTxt {
        color: #FFBD00;
        font-family: SFPro-Heavy;
        font-size: 46px;
        letter-spacing: -1.6px;
        margin-top: -4px;
    }

    .divEngagement .engagementTxt2 {
        color: #535353;
        font-family: SFPro-Light;
        font-size: 24px;
        letter-spacing: -0.34px;
        margin-top: -14px;
    }

    .divEngagement .divengagementBtn{
        margin-top:36px;
    }

    .divEngagement button {
        width: 203px;
        height: 48px;
        background: #FFFFFF;
        border-radius: 24px;
        border: none;
        color: #000000;
        font-size: 16px;
        font-family: SFPro-Bold;
        margin: 0 10px;
        cursor: pointer;
        padding: 0 20px;
        text-transform: uppercase;
        gap: 10px;
    }

    .divEngagement button:focus{
        outline:none;
    }

    .divEngagement button span {
        background: #FAAF1C;
        padding: 2px 6px;
        border-radius: 50%;
        margin-left: 10px;
    }

        .divEngagement button span i {
            color: #535353;
            font-size: 14px;
            padding-left: 2px;
        }

    .divEngagement .imgEngagementLogo {
        position: absolute;
        bottom: 10px;
        width: 40%;
        right: 48px;
    }

    .divEngagement .imgFormLogo {
        position: absolute;
        left: 0;
        top: -59px;
        width: 86%;
    }

.modal-open {
    padding-right: 0px !important;
}

.modal-backdrop {
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
}

.layoutMenuDropdown .doc-required {
    font-size: 16px !important;
    font-family: SFPro-Medium !important;
}

.fxcal-paycurrency .dropdown-menu {
    height: 50%;
    overflow: scroll;
}

.label-chargesinfo {
    font-size: 12px;
    padding: 8px 27px;
    line-height: 1.2;
    font-family: 'SFPro-Light';
    letter-spacing: 0.5px;
}

.redirectFooter{
    cursor: pointer;
}

.divLanding .landing-fx-card-header{
    position: relative;
}

.divLanding .landing-fx-card-header .card-day{
    margin-left:12px;
    margin-right:-14px;
    position: absolute;
}

.divLanding .landing-fx-card-header .flex1{
    margin-left:77px;
}
.divLanding .landing-fx-card-header .flex2{
    margin-left:-24px;
}
.divLanding .landing-fx-card-header .flex3{
    margin-left:19px;
}

.divLanding .fx-rates-card-table .table-rate{
    text-align: right;
}

.divLanding .fx-rates-card-table td:nth-child(2) {
    padding: 0 32px 0 0;
}

.divLanding .fx-rates-card-table td:nth-child(3) {
    padding: 0 12px 0 0;
}

.divLanding .card-sellbuy{
    text-align: right;
}

/* --- SEO ---------------------------------------------------------------- */

/* The FX card's day number is wrapped in <time> so crawlers read it as a date rather
   than as the page's most prominent text (Google was using it as a sitelink label).
   The tag is swapped in place, never wrapped: .card-day is position:absolute inside a
   `d-flex; gap:28px` parent, so an extra wrapper would consume a gap slot and shift
   .flex1/.flex2/.flex3. <time> is inline by default, hence display:block. */
time.card-day {
    display: block;
}

/* Exactly one visible <h1> per page, naming the page topic.

   The navbar is an overlay at the top of every page, so the heading must clear it.
   Two treatments:
     .seo-h1         in flow, below the navbar - used on pages whose content starts
                     immediately (AboutUs, press).
     .seo-h1--hero   absolutely placed in the empty band between the navbar and the FX
                     cards on the home/Business landings, so nothing below it moves.
                     CorpSignUp needs this one too: its hero <video> is page-anchored at a
                     fixed height, so anything in flow above #corpLogin drags the footer
                     past the end of the video. See Views/Home/CorpSignUp.cshtml.
   Horizontal alignment matches .divLanding (1295px centred) on wide viewports; the
   padding only kicks in once that max-width stops binding. */
.seo-h1 {
    max-width: 1295px;
    margin: 0 auto;
    padding: 96px 0 4px;
    font-family: SFPro-Bold, sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.2;
    color: #1a1a1a;
}

.seo-h1--hero {
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0;
}

/* CorpSignUp: the heading introduces the sign-up card rather than a page of content, so it is
   centred over the card instead of left-aligned to .divLanding, and sits just above it.
   .corpSignUp-card starts 160px into #corpLogin and the heading's line box is 36px, so top:100px
   leaves 24px of clear space on each side - below the 76px navbar and above the card. */
.seo-h1--card {
    top: 100px;
    text-align: center;
}

@media (max-width: 1343px) {
    .seo-h1 {
        box-sizing: border-box;
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 991px) {
    .seo-h1 {
        font-size: 22px;
        padding-top: 88px;
    }

    /* Not enough clear band on small screens - fall back to a normal in-flow heading. */
    .seo-h1--hero {
        position: static;
        padding-top: 88px;
        padding-bottom: 4px;
    }
}

/* Descriptive cross-country links in the footer. Sized below .footer-conditions so the
   existing legal links stay the dominant row. */
.footer-markets {
    font-family: SFPro-Medium;
    font-size: 16px;
    letter-spacing: -0.3px;
    color: #000000;
    margin-top: 12px;
}

    .footer-markets a {
        padding: 0 8px;
        white-space: nowrap;
        color: inherit;
    }

.footer-mobile-links + .footer-markets {
    text-align: center;
    font-size: 14px;
}

/* The country/language selector anchors carry a real href so crawlers can follow them to
   each market's landing page (previously the href was written by SetLanguage() on click,
   so it did not exist at crawl time). Bootstrap's `a:not([href])` reset was what kept them
   inheriting the surrounding text colour; with an href they would pick up link blue and a
   pointer cursor. Pin both back so the selector looks and behaves exactly as before.
   Card/_OPXLanguage.cshtml sets `cursor: pointer` inline, which still wins there. */
a[data-country] {
    color: inherit;
    cursor: auto;
    text-decoration: none;
}

/* ==========================================================================
   Footer redesign - Figma "Corporate Website 12" > Footer & Header > Frame 17
   ==========================================================================

   Appended at the end of the file on purpose. Media queries add no specificity, so the four
   earlier footer breakpoints (min-width:1940px at 3243, max-width:1366px at 5992,
   max-width:1280px at 2459, max-width:1023px at 6036) would beat an equal-specificity rule
   placed above them. From here the base rules win everywhere and the overrides below win over
   all of them.

   Deliberately NOT reusing: .footer-links (dead legacy rules at 2437/2770/2783 would force
   Helvetica-Neu-Medium and drop to 12px), .footer-details (its `a { color:#000 !important }`
   at 6316 would override the design's #525252 link colour), and Bootstrap's .d-flex
   (`footer .d-flex` and `.footer .d-flex` are descendant selectors that catch anything).

   Nothing here sets `position: relative` on the footer or on an ancestor of .dropdown-footer:
   that element is `position: static !important` (line 1203) and the language menu resolves its
   offsets against <html>. A new positioned ancestor would move the menu.

   Design tokens (Figma variables):
     Neutral/900 #171717  column headings
     Neutral/600 #525252  links
     Neutral/400 #a3a3a3  sub-captions
     Neutral/300 #d4d4d4  rule
     Neutral/200 #e5e5e5  country chip background
     Type: SF Pro Semibold 14/18 (heading), Regular 16/24 (link), Regular 12/16 (sub-caption)
*/

/* The footer is now ~700px tall instead of ~430px. newfooter.svg is 1920x329 and bottom-anchored,
   so the original `center center / cover` magnified it 2.2x and cropped ~1140px off each side,
   flattening the wave into a grey wash. Pin it to the full width at its natural aspect, sitting on
   the bottom edge, and let the gradient layer fill the space above it. */
footer {
    background-position: center bottom, center center;
    background-size: 100% auto, auto auto;
}

.footer-inner {
    max-width: 1600px;
    margin: 0 auto;
}

.footer-top {
    display: flex;
    flex-direction: column;
    /* Figma 282:2841: the chip is 40px tall at y=0 and the column grid starts at y=64. */
    gap: 24px;
}

/* Country chip: Neutral/200 pill, 8px radius, 12px/8px padding, 8px gap, SF Pro Regular 18px. */
footer .dropdown-footer {
    align-self: flex-start;
}

footer .language-selected {
    display: inline-flex;
    align-items: center;
    /* Figma 288:3143: 16px between the chevron and the flag+name group (chevron ends x24, group
       starts x40), and 288:3148 repeats 16px between the flag and the name (flag ends x33, text
       starts x49). The legacy `.language-selected img` margin at site.css:172 is zeroed below so
       these gaps are the only spacing. */
    gap: 16px;
    background: #e5e5e5;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 240px;
    /* Selected country reads bold at 16px in both states - see the flyout override below.
       24px leading keeps the chip at its 40px Figma height with the 8px padding. */
    font-family: SFPro-Bold;
    font-size: 16px;
    line-height: 24px;
    color: #000000;
    cursor: pointer;
}

    footer .language-selected .globe-arrow {
        font-size: 12px;
    }

    /* site.css:172 `.language-selected img` adds margin-right:7px from the header-era selector;
       the chip uses a flex gap instead, so zero it out. */
    footer .language-selected img {
        margin: 0;
    }

/* .footer-details is no longer emitted - the language section moved to .footer-top - so the four
   rules at 5927-5945 and the one at 6312 that styled the flyout went dead with it. Re-scope them to
   the wrapper the partial actually renders. Deliberately NOT re-scoping `.footer-details a
   { color:#000 !important }` to the whole footer: that would flatten .footer-nav__link. It is
   restricted to the flyout, which is the only place it was ever needed. */
.dropdown-footer .dropdown-menu {
    border-radius: 12px;
    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.5);
    background-color: rgba(237, 236, 235, 1);
    overflow: hidden;
}

.dropdown-footer .dropdown-item {
    margin-top: 12px;
    margin-bottom: 12px;
}

.dropdown-footer .dropdown-menu div {
    margin: 12px 12px;
}

.dropdown-footer .dropdown-menu a[onclick^="SetLanguage"] {
    cursor: pointer;
}

.dropdown-footer .language-selector {
    background: transparent;
}

.dropdown-footer .dropdown-menu a {
    color: #000000;
}

/* The open flyout repeats the selected country above the list, so it has to match the chip in both
   type and spacing. Everything here overrides a legacy `footer .dropdown-menu ...` rule that was
   tuned for the header-era selector: 19px type at site.css:5613 and 10px/7px flag margins at
   site.css:5610. Class-scoped so those rules keep serving any other footer dropdown untouched.
   The <i>'s inline margin-left/font-size had to come out of _LanguageSection.cshtml - inline styles
   beat every selector - leaving the 12px from `.dropdown-footer .dropdown-menu div` as the inset,
   which is what the chip's own 12px padding gives. */
.dropdown-footer .dropdown-menu > .d-flex {
    gap: 16px;
}

    .dropdown-footer .dropdown-menu .globe-arrow {
        font-size: 12px;
    }

.dropdown-footer .dropdown-menu span {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: SFPro-Bold;
    font-size: 16px;
    line-height: 24px;
}

    .dropdown-footer .dropdown-menu span img {
        width: 33px;
        height: 24px;
        object-fit: cover;
        margin: 0;
    }

    footer .language-selected > span {
        display: inline-flex;
        align-items: center;
        gap: 16px;
    }

        footer .language-selected > span img {
            width: 33px;
            height: 24px;
            object-fit: cover;
        }

/* --- Sitemap nav ------------------------------------------------------- */

.footer-nav {
    width: 100%;
}

.footer-nav__grid {
    display: grid;
    /* Figma: 317px + five 240.6px tracks, 16px gutters, 1600px total. */
    grid-template-columns: 317fr repeat(5, 240.6fr);
    gap: 32px 16px;
    align-items: start;
}

.footer-nav__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Figma 288:3153 "ACCOUNT OPENING" and siblings: SF Pro Condensed Bold 18/24, i.e. the variable
   family at wght 760 / wdth 60. Letter spacing stays at 0 here - only the rows below tighten.
   font-stretch only bites on the variable "SF Pro" - see the note at the end of font.css for why
   that family is named bare and what it takes to serve condensed to visitors without it. */
.footer-nav__title {
    margin: 0;
    font-family: "SF Pro", SFPro-Bold, 'Helvetica-Neu-CondensedBold', sans-serif;
    font-size: 18px;
    font-weight: 760;
    font-stretch: 60%;
    font-variation-settings: 'wdth' 60;
    line-height: 24px;
    letter-spacing: 0;
    color: #171717;
    text-transform: uppercase;
}

/* Figma 288:3154 / 283:2916: 6px between rows. With the links' 24px line box that makes the
   30px row step the design lays out (items at y=0, 30, 60...). */
.footer-nav__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
}

    /* Figma 288:3159 / 283:2920: the link and its description share a row frame with no gap,
       so the 16px sub line box hangs directly off the link's 24px one. */
    .footer-nav__list li {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

/* Figma 288:3156 and siblings: SF Pro Bold 14/24 at standard width (wdth 100), so the shipped
   static carries this - no variable file needed. Tracking is Figma's -2%, which lands on the
   -0.28px it reports at 14px; the 24px line box is what puts .footer-nav__list's 6px gap on the
   design's 30px row step. */
.footer-nav__link {
    font-family: SFPro-Bold, 'Helvetica-Neu-Bold', sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #525252;
    text-decoration: none;
    letter-spacing: -0.02em;
}

    .footer-nav__link:hover,
    .footer-nav__link:focus {
        color: #171717;
        text-decoration: underline;
    }

/* Live Chat and Contact Us are actions, not destinations, so they are buttons. Strip the UA
   button chrome so they read as the links beside them. */
.footer-nav__button {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.footer-nav__sub {
    margin-top: -4px;
    font-family: "SF Pro", SFPro-Heavy, 'Helvetica-Neu-BlackCond', sans-serif;
    font-size: 12px;
    font-stretch: 60%;
    font-variation-settings: 'wdth' 60;
    line-height: 16px;
    color: #737373;
    letter-spacing: -0.02em;
}

.footer-nav__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.footer-nav__qr-image {
    width: 160px;
    height: 160px;
    max-width: 100%;
    border-radius: 16px;
    object-fit: cover;
}

/* Figma 285:3121: SF Pro Condensed Regular 14/18 - the variable family at wght 410 / wdth 60.
   It briefly ran at 15px to dodge a wrap; the gutter rule in the responsive block holds the column
   at ~191px now, and condensed at 14px is narrower still, so the caption fits at the design size. */
.footer-nav__qr-caption {
    font-family: "SF Pro", SFPro-Regular, 'Helvetica-Neu-Regular', sans-serif;
    font-stretch: 60%;
    font-variation-settings: 'wdth' 60;
    font-size: 14px;
    line-height: 18px;
    color: #404040;
    text-align: center;
}

/* Phone branch of _FooterNav renders these two store buttons instead of .footer-nav__qr. Both
   badge SVGs are authored at 40px tall (122x40 and 135x40), so pinning the height keeps them on a
   shared baseline and lets each keep its own width. */
.footer-nav__stores {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.footer-nav__store-badge {
    height: 40px;
    width: auto;
    max-width: 100%;
}

/* --- Rule -------------------------------------------------------------- */

.footer-rule {
    height: 1px;
    margin: 24px 0;
    border: 0;
    background: #d4d4d4;
    opacity: 1;
}

/* --- Legal block ------------------------------------------------------- */

.footer-legal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #000000;
}

.footer-legal__slogan {
    margin: 0;
    font-family: SFPro-SemiBold;
    font-size: 16px;
    font-weight: 590;
    line-height: 24px;
    text-transform: uppercase;
}

.footer-legal__license {
    margin: 0;
    font-family: SFPro-Regular;
    font-size: 12px;
    line-height: 16px;
}

    /* .p-sublicense is emitted inside the licence string; keep it at the licence's own size
       rather than the old 16px, which would break the line rhythm at 12px. */
    .footer-legal__license .p-sublicense {
        font-family: SFPro-Medium;
        font-size: 12px;
        line-height: 16px;
    }

.footer-legal__contact {
    margin-top: 12px;
}

    /* Undo the old right-aligned column treatment and the 36px top gap. These are class-only
       selectors on purpose: the mobile branch is <div id="footer-mobile">, not <footer>, so every
       `footer .p-address` / `footer .p-contact` rule in this file misses it entirely. */
    /* Figma 307:79 sets the address and both phone lines in one SF Pro Medium block, 4px apart -
       the phone lines are no longer heavier than the address they sit under. `line-height: normal`
       is what the frame specifies, and it keeps the 4px gap the only spacing between the three. */
    .footer-legal__contact .p-address {
        margin: 0;
        font-family: SFPro-Medium;
        font-size: 16px;
        line-height: normal;
        letter-spacing: -0.57px;
    }

    .footer-legal__contact .p-contact {
        margin: 4px 0 0;
        font-family: SFPro-Medium;
        font-size: 16px;
        line-height: normal;
        font-weight: normal;
        letter-spacing: -0.57px;
        color: #000000;
    }

    .footer-legal__contact .footer-my-locations {
        margin-top: 0;
    }

    .footer-legal__contact .footer-my-address {
        font-family: SFPro-Medium;
        line-height: normal;
        letter-spacing: -0.57px;
    }

.footer-legal__badges {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-top: 12px;
}

.footer-legal__sfa {
    width: 140px;
    height: auto;
}

.footer-legal__social {
    width: 36px;
    height: 36px;
}

.footer-legal__copyright {
    margin: 24px 0 0;
    font-family: SFPro-SemiBold;
    font-size: 12px;
    font-weight: 590;
    line-height: 16px;
}

/* --- Responsive --------------------------------------------------------

   The ladder is driven by the body `zoom` steps (site.css:3404-3509), not by the footer's own
   breakpoints: at 1024px the page lays out at ~1463 CSS px (zoom 0.70) and at 1023px it snaps
   back to 1023px with mobileweb.css joining in. Collapse the grid at 1366px and again at 1024px
   so the nav is not also changing shape at that cliff.
   ---------------------------------------------------------------------- */

/* Trade gutter for grid between the 5-column layout's two ends.

   Figma draws this footer 1600px wide at x=160 on a 1920px canvas, so its 240.6px columns only
   materialise once .footer-inner reaches its own 1600px max-width - which, with the 150px gutters
   at site.css:5563, needs a 1900px viewport. Below that the tracks are `fr` so they shrink
   proportionally while the labels do not: the COMPANY column renders 179px at a 1512px viewport
   and 168px at 1440px, but "Business - Hong Kong (HK)" needs 184px at the design's 16px. The
   three Business links and the QR caption therefore wrapped across 1367-1542px - both common
   MacBook widths. Under 1367px the grid drops to three much wider columns and the problem goes.

   So give the gutter up, but only as much as the grid needs. Holding .footer-inner at 1290px puts
   the COMPANY column at ~191px - 7px clear of the 184px the longest label wants, enough to absorb
   the ~15px that 100vw counts for a scrollbar. The gutter is whatever is left over, capped at its
   normal 150px, so it grows back smoothly and is already a no-op by 1590px: no breakpoint step to
   see, and at the widths that matter it barely moves (111px at 1512px, 75px at 1440px) instead of
   the near-full-bleed a flat 40px would give. */
@media (min-width: 1367px) {
    footer {
        padding-left: min(150px, calc((100vw - 1290px) / 2));
        padding-right: min(150px, calc((100vw - 1290px) / 2));
    }
}

@media (max-width: 1366px) {
    .footer-nav__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px 24px;
    }

    /* Beat the `!important` shrink ladder at site.css:6012-6019, which was tuned for the old
       right-aligned contact column. */
    .footer-legal__contact .p-address {
        margin-top: 0 !important;
        font-size: 16px !important;
    }

    .footer-legal__contact .p-contact {
        font-size: 16px !important;
    }

    .footer-nav__qr {
        align-items: flex-start;
    }

    .footer-nav__qr-caption {
        text-align: left;
    }
}

@media (max-width: 1024px) {
    .footer-nav__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1023px) {
    .footer-inner {
        max-width: none;
    }

    footer .language-selected {
        min-width: 0;
    }

    .footer-legal__badges {
        flex-wrap: wrap;
    }
}

@media (max-width: 700px) {
    .footer-nav__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}