/home/kueuepay/public_html/public/backend/sass/base/_reset.scss
/*-------------------------------------------------
[ ## reset ]
*/
html {
font-size: 100%;
scroll-behavior: smooth;
}
body {
background-color: $body--bg;
font-family: $font_body;
font-size: $base__font-size;
font-weight: 400;
line-height: $font__line-height-body;
color: $color--text;
overflow-x: hidden;
}
a{
display: inline-block;
}
ul{
list-style-type: none;
padding: 0;
margin: 0;
}
blockquote {
margin: 0 0 1.3em;
}
p {
margin-bottom: 15px;
line-height: $font__line-height-paragraph;
&:last-child {
margin-bottom: 0px;
}
@media only screen and (max-width: 1199px) {
line-height: 1.7em;
}
}
img {
max-width: 100%;
height: auto;
}
button:focus,
input:focus,
textarea:focus {
outline: none;
}
button {
border: none;
cursor: pointer;
}
input,textarea{
padding: 12px 25px;
width: 100%;
}
span{
display: inline-block;
}
a,a:focus, a:hover {
text-decoration: none;
color: inherit;
}
blockquote{
background-color: $bg--gray;
padding: 40px;
border-radius: 10px;
font-weight: 500;
font-style: italic;
position: relative;
.quote-icon{
position: absolute;
top: 0;
left: 5%;
font-size: 120px;
opacity: .1;
}
}
/*-------------------------------------------------
[ ## padding ]
*/
.pt-10{
padding-top: 10px;
}
.pt-20{
padding-top: 20px;
}
.pt-30{
padding-top: 30px;
}
.pt-40{
padding-top: 40px;
}
.pt-50{
padding-top: 50px;
}
.pt-60{
padding-top: 60px;
}
.pt-80{
padding-top: 80px;
}
.pt-100{
padding-top: 100px;
@media only screen and (max-width: 991px){
padding-top: 80px;
}
}
.pt-120{
padding-top: 120px;
@media only screen and (max-width: 991px){
padding-top: 100px;
}
}
.pt-150{
padding-top: 150px;
@media only screen and (max-width: 991px){
padding-top: 100px;
}
}
.pb-10{
padding-bottom: 10px;
}
.pb-20{
padding-bottom: 20px;
}
.pb-30{
padding-bottom: 30px;
}
.pb-40{
padding-bottom: 40px;
}
.pb-50{
padding-bottom: 50px;
}
.pb-60{
padding-bottom: 60px;
}
.pb-80{
padding-bottom: 80px;
}
.pb-100{
padding-bottom: 100px;
@media only screen and (max-width: 991px){
padding-bottom: 80px;
}
}
.pb-120{
padding-bottom: 120px;
@media only screen and (max-width: 991px){
padding-bottom: 100px;
}
}
.pb-150{
padding-bottom: 150px;
@media only screen and (max-width: 991px){
padding-bottom: 100px;
}
}
.ptb-10{
padding: 10px 0;
}
.ptb-20{
padding: 20px 0;
}
.ptb-30{
padding: 30px 0;
}
.ptb-40{
padding: 40px 0;
}
.ptb-50{
padding: 50px 0;
}
.ptb-60{
padding: 60px 0;
}
.ptb-80{
padding: 80px 0;
}
.ptb-100{
padding: 100px 0;
@media only screen and (max-width: 991px){
padding: 80px 0;
}
}
.ptb-120{
padding: 120px 0;
@media only screen and (max-width: 991px){
padding: 100px 0;
}
}
.ptb-150{
padding: 150px 0;
@media only screen and (max-width: 991px){
padding: 100px 0;
}
}
.mt-10{
margin-top: 10px;
}
.mt-15{
margin-top: 15px;
}
.mt-20{
margin-top: 20px;
}
.mt-30{
margin-top: 30px;
}
.mt-40{
margin-top: 40px;
}
.mt-50{
margin-top: 50px;
}
.mt-60{
margin-top: 60px;
}
.mt-80{
margin-top: 80px;
}
.mt-100{
margin-top: 100px;
}
.mt-120{
margin-top: 120px;
}
.mt-150{
margin-top: 150px;
}
.mb-10{
margin-bottom: 10px;
}
.mb-15{
margin-bottom: 15px;
}
.mb-20{
margin-bottom: 20px;
}
.mb-30{
margin-bottom: 30px;
}
.mb-40{
margin-bottom: 40px;
}
.mb-50{
margin-bottom: 50px;
}
.mb-60{
margin-bottom: 60px;
}
.mb-80{
margin-bottom: 80px;
@media only screen and (max-width: 575px) {
margin-bottom: 40px;
}
}
.mb-100{
margin-bottom: 100px;
}
.mb-120{
margin-bottom: 120px;
}
.mb-150{
margin-bottom: 150px;
}
.mt-10-none{
margin-top: -10px;
}
.mt-20-none{
margin-top: -20px;
}
.mt-30-none{
margin-top: -30px;
}
.mt-40-none{
margin-top: -40px;
}
.mt-50-none{
margin-top: -50px;
}
.mt-60-none{
margin-top: -60px;
}
.mt-80-none{
margin-top: -80px;
}
.mt-100-none{
margin-top: -100px;
}
.mt-120-none{
margin-top: -120px;
}
.mt-150-none{
margin-top: -150px;
}
.mb-10-none{
margin-bottom: -10px;
}
.mb-15-none{
margin-bottom: -15px;
}
.mb-20-none{
margin-bottom: -20px;
}
.mb-30-none{
margin-bottom: -30px;
}
.mb-40-none{
margin-bottom: -40px;
}
.mb-50-none{
margin-bottom: -50px;
}
.mb-60-none{
margin-bottom: -60px;
}
.mb-80-none{
margin-bottom: -80px;
@media only screen and (max-width: 575px) {
margin-bottom: -40px;
}
}
.mb-100-none{
margin-bottom: -100px;
}
.mb-120-none{
margin-bottom: -120px;
}
.mb-150-none{
margin-bottom: -150px;
}
/*-------------------------------------------------
[ ## color ]
*/
.bg-primary {
background-color: $base--color !important;
}
.bg--primary{
background-color: #7367f0 !important;
}
.bg--secondary {
background-color: $base--color;
}
.bg--success {
background-color: #28c76f !important;
}
.bg--danger {
background-color: #ea5455 !important;
}
.bg--warning {
background-color: #ff9f43;
}
.bg--info {
background-color: #1e9ff2 !important;
}
.bg--dark {
background-color: #10163A;
}
.bg--base {
background-color: $base--color !important;
}
.text--primary {
color: #7367f0;
}
.text--secondary {
color: $base--color;
}
.text--success {
color: #28c76f !important;
}
.text--danger {
color: #ea5455 !important;
}
.text--warning {
color: #ff9f43 !important;
}
.text--info {
color: #1e9ff2 !important;
}
.text--dark {
color: #10163A;
}
.text--base {
color: $base--color !important;
}
.border--primary {
border: #7367f0;
}
.border--secondary {
border: 1px solid $base--color;
}
.border--success {
border: 1px solid #28c76f;
}
.border--danger {
border: 1px solid #ea5455;
}
.border--warning {
border: 1px solid #ff9f43;
}
.border--info {
border: 1px solid #1e9ff2;
}
.border--dark {
border: 1px solid #10163A;
}
.border--base {
border: 1px solid $base--color;
}
.section--bg {
background-color: $section--bg !important;
}
.bg--gray {
background-color: $bg--gray;
}
.border--rounded{
border-radius: 3px !important;
}
.border--capsule{
border-radius: 100px;
}
.box-shadow{
box-shadow: 0 2px 8px 0 rgba(0,0,0,.08);
}
/*-------------------------------------------------
[ ## scrollbar ]
*/
*::-webkit-scrollbar {
height: 20px;
width: 8px;
background: #f1f1f1;
border-radius: 10px;
}
*::-webkit-scrollbar-thumb {
background: #999;
-webkit-border-radius: 0;
border-radius: 10px;
}
*::-webkit-scrollbar-corner {
background: #999;
border-radius: 10px;
}
.table-responsive{
&::-webkit-scrollbar {
height: 8px;
}
}
/*-------------------------------------------------
[ ## Table ]
*/
.table-area{
background-color: $white;
border-radius: 10px;
padding: 20px;
}
.table-header{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
@media only screen and (max-width: 575px) {
display: block;
}
.title{
margin-bottom: 0;
}
.table-btn-area{
display: flex;
margin: -5px;
@media only screen and (max-width: 575px) {
margin-top: 10px;
display: block;
}
button,a{
margin: 5px;
@media only screen and (max-width: 575px) {
width: 100%;
}
}
.table-search-wrapper {
width: 250px;
border: 1px solid $border--base;
border-radius: 5px;
margin: 5px;
@media only screen and (max-width: 575px) {
width: 100%;
}
input{
border: none;
height: 40px;
padding-left: 35px;
padding-right: 20px;
background-color: transparent;
box-shadow: none;
border-radius: 0;
}
span{
position: absolute;
font-size: 16px;
line-height: 38px;
color: $color--text;
left: 10px;
top: 2px;
}
}
button,a{
padding: 7px 25px;
}
}
.table-switch{
min-width: 200px;
}
}
.table-responsive {
display: block;
width: 100%;
}
.custom-table{
width: 100%;
white-space: nowrap;
&.two{
thead{
tr{
th{
text-align: center;
&:first-child{
text-align: left;
}
}
}
}
tbody{
tr{
td{
text-align: center;
&:first-child{
text-align: left;
}
.toggle-container{
.switch-toggles{
max-width: 200px;
margin: 0 auto;
}
}
}
}
}
}
thead{
tr{
border-bottom: 2px solid #dee2e6;
th{
border: none;
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
padding: 10px 15px;
@media only screen and (max-width: 575px) {
padding: 10px 5px;
font-size: 13px;
}
&:last-child{
text-align: right;
}
}
}
}
tbody{
tr{
border-bottom: 1px solid #dee2e6;
&:nth-of-type(2n){
background-color: rgba(0,0,0,0.04);
}
&:last-child{
border: none;
}
td{
border: none;
font-weight: 500;
color: $color--text;
font-size: 14px;
padding: 10px 15px;
@media only screen and (max-width: 575px) {
padding: 10px 5px;
font-size: 13px;
}
span{
font-weight: 700;
}
&:last-child{
text-align: right;
}
.user-list{
li{
display: inline-block;
transition: all 0.3s;
img{
width: 32px;
border-radius: 50%;
border: 2px solid $white;
box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);
}
&:hover{
transform: translateY(-4px) scale(1.02);
}
span{
font-size: 16px;
}
}
li+li{
margin-left: -10px;
}
}
.author-info{
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
align-items: center;
.thumb{
width: 45px;
height: 45px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
overflow: hidden;
box-shadow: 0 3px 5px rgba(0,0,0,.25);
img{
width: inherit;
height: inherit;
object-fit: cover;
-o-object-fit: cover;
object-position: center;
-o-object-position: center;
}
}
.content{
padding-left: 15px;
width: calc(100% - 45px);
}
}
.btn{
padding: 2px 7px;
font-size: 16px;
}
.toggle-container{
.switch-toggles{
max-width: 200px;
@media only screen and (max-width: 575px) {
min-width: 200px;
}
&.two{
min-width: 200px;
}
&.three{
margin-left: auto;
}
}
}
}
}
}
}
/*-------------------------------------------------
[ ## slider ]
*/
.swiper-notification{
display: none;
}
.swiper-pagination{
position: relative;
display: flex;
margin-top: 60px;
.swiper-pagination-bullet{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: rgba($base--color, 0.2);
opacity: 1;
}
.swiper-pagination-bullet-active{
background-color: $base--color;
width: 25px;
border-radius: 10px;
}
}
.slider-next, .slider-prev{
width: 35px;
height: 35px;
line-height: 35px;
font-size: 12px;
background-color: $white;
border: 1px solid $border--base;
border-radius: 50%;
color: $color--text;
display: inline-block;
text-align: center;
position: relative;
top: 50%;
left: 50%;
transform: translateX(-100%);
cursor: pointer;
margin-top: 60px;
transition: all 0.3s;
&:hover{
background-color: $base--color;
color: $white;
}
}
.slider-next{
margin-left: 10px;
}
/*-------------------------------------------------
[ ## pagination ]
*/
.pagination {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
padding-top: 20px;
.page-item{
text-align: center;
padding: 3px;
a,span{
width: 30px;
height: 30px;
border-radius: 5px;
background: transparent;
border: 1px solid $border--base;
color: $color--text;
padding: 0;
font-weight: 600;
line-height: 30px;
display: block;
margin: 0;
}
&.disabled{
span{
background: transparent;
border: 1px solid $border--base;
color: $color--text;
}
}
.page-link{
transition: all 0.3s;
}
&.active,
&:hover{
.page-link{
background-color: $base--color;
border-color: transparent;
color: $white;
}
}
}
}
/*-------------------------------------------------
[ ## tab ]
*/
.nav-tabs{
margin: 0;
border: 0;
border-bottom: 1px solid $border--base;
margin-bottom: 15px;
.nav-link{
position: relative;
padding: 5px 20px;
border: none;
font-weight: 600;
font-size: 14px;
background-color: transparent;
border-radius: 0;
font-family: $font_heading;
transition: all 0.3s;
@media only screen and (max-width: 575px) {
padding: 5px;
}
&::before{
position: absolute;
content: "";
bottom: -5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 15px;
height: 5px;
background-color: $base--color;
border-radius: 5px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
&:hover{
background-color: transparent;
color: $base--color;
}
&.active{
background-color: transparent;
color: $base--color;
font-weight: 800;
border-bottom: 2px solid $base--color;
&::before{
opacity: 1;
visibility: visible;
}
}
&:not(:last-child){
margin-right: 10px;
@media only screen and (max-width: 1199px) {
margin-right: 5px;
}
}
}
}
/*-------------------------------------------------
[ ## alert ]
*/
.alert{
font-size: 15px;
letter-spacing: 0.3px;
padding: 20px 24px;
}
[data-notify="icon"]{
color: #fff;
margin-right: 5px;
}
.alert.alert-success {
background: #39DA8A!important;
color: #FFF!important;
box-shadow: 0 3px 8px 0 rgba(57,218,138,.4);
border: none;
}
.alert strong{
display: block;
}
.alert span{
line-height: 1em;
}
.alert .close {
position: absolute;
background-color: transparent;
color: #FFF;
opacity: 1;
top: -4px;
text-shadow: none;
font-weight: 400;
font-size: 24px;
}
/*-------------------------------------------------
[ ## card ]
*/
.custom-card{
border: none;
background: $white;
border-radius: 10px;
.card-header{
display: flex;
align-items: center;
justify-content: space-between;
background: $white;
padding: 15px;
border-radius: 10px 10px 0 0;
.title{
margin-bottom: 0;
}
.card-btn{
a{
font-size: 12px;
padding: 5px 15px;
font-weight: 600;
i{
margin-right: 5px;
}
}
}
}
.card-body{
padding: 15px;
.card-form{
label{
color: $color--heading;
font-weight: 600;
}
.form--control{
font-size: 12px;
}
.toggle-container{
.switch-toggles{
position: relative;
width: 100%;
height: 35px;
border-radius: 5px;
background-color: $white;
box-shadow: 0 2px 15px rgb(0 0 0 / 10%);
&::after{
position: absolute;
content: "";
width: 50%;
height: 35px;
background: #ea5455;
box-shadow: 0 5px 5px 0px rgba(234,84,85,0.75);
right: -1px;
top: 0;
border-radius: 0 5px 5px 0;
transition: all 0.7s cubic-bezier(0.545, 0, 0.05, 1);
}
.switch{
position: relative;
width: 50%;
line-height: 35px;
float: left;
text-align: center;
z-index: 2;
cursor: pointer;
transition: color 0.7s cubic-bezier(0.545, 0, 0.05, 1);
font-weight: 600;
border-radius: 5px;
color: $color--text;
margin-bottom: 0;
&:nth-child(odd){
color: $white;
}
}
&.active{
&::after{
background: $base--color;
box-shadow: 0 5px 5px 0px rgba(90,82,120,0.75);
right: 50%;
border-radius: 5px 0 0 5px;
}
.switch{
color: $color--text;
&:nth-child(even){
color: $white;
}
}
}
}
}
}
}
}
.custom-inner-card{
background-color: #f1f1f1;
border: 1px solid $border--base;
border-radius: 5px;
.card-inner-header{
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
border-bottom: 1px solid #dadbdd;
.title{
margin-bottom: 0;
}
}
.card-inner-body{
padding: 20px;
}
}
/*-------------------------------------------------
[ ## chart ]
*/
.chart-wrapper{
background-color: $white;
border-radius: 10px;
padding: 20px;
overflow: hidden;
}
.chart-area-header{
display: flex;
justify-content: space-between;
}
.chart-area-footer{
border-top: 1px solid $border--base;
padding-top: 20px;
margin-top: 25px;
}
.apexcharts-canvas{
margin: 0 auto;
}
// Modal
.modal-form{
label{
color: $color--heading;
font-weight: 600;
}
.form--control{
font-size: 12px;
font-weight: 500;
}
}
.modal-footer{
justify-content: center;
button{
padding: 9px 20px;
font-size: 16px;
width: 48%;
}
}
// rte-editor
.rte-modern.rte-desktop.rte-toolbar-default{
border: 1px solid $border--base;
}
.header-search-area .header-search-form {
background-color: transparent;
padding: 0;
}
.header-search-area .header-search-form .search-icon {
position: relative;
left: 40px;
}
.header-search-area .header-search-form input {
background-color: #f5f5f5;
padding: 25px 45px;
}
/*-------------------------------------------------
[ ## switch ]
*/
.toggle-container{
.switch-toggles{
position: relative;
width: 100%;
height: 35px;
border-radius: 5px;
background-color: $white;
box-shadow: 0 2px 15px rgb(0 0 0 / 10%);
&::after{
position: absolute;
content: "";
width: 50%;
height: 35px;
background: #ea5455;
box-shadow: 0 5px 5px 0px rgba(234,84,85,0.75);
right: -1px;
top: 0;
border-radius: 0 5px 5px 0;
transition: all 0.7s cubic-bezier(0.545, 0, 0.05, 1);
}
.switch{
position: relative;
width: 50%;
line-height: 35px;
float: left;
text-align: center;
z-index: 2;
cursor: pointer;
transition: color 0.7s cubic-bezier(0.545, 0, 0.05, 1);
font-weight: 600;
border-radius: 5px;
color: $color--text;
margin-bottom: 0;
&:nth-child(odd){
color: $white;
}
}
&.active{
&::after{
background: $base--color;
box-shadow: 0 5px 5px 0px rgba(90,82,120,0.75);
right: 50%;
border-radius: 5px 0 0 5px;
}
.switch{
color: $color--text;
&:nth-child(even){
color: $white;
}
}
}
}
}
Service
top
Our Services: Streamlining Your Payment Experience with Excellence
Discover how our services are designed to enhance your NFC Pay experience with convenience, security, and innovative solutions. From managing transactions to secure payments, we are dedicated to providing seamless support every step of the way.
Secure Card Storage
Easily save your credit and debit card details within our app for quick and secure transactions. This feature ensures that your payment information is protected with advanced encryption and can be used for future purchases with just a tap.
Effortless Money Transfers
Transfer funds quickly and securely between users with our streamlined money transfer service. Simply select the recipient, enter the amount, and authorize the transaction for instant, hassle-free transfers.
Merchant Account Setup
Activate your merchant account effortlessly to start receiving payments. Our intuitive setup process ensures that you can begin accepting transactions smoothly, helping your business thrive with minimal setup time.
Real-Time Transaction Tracking
Keep track of all your transactions in real time through our app. Monitor payment statuses, view transaction history, and manage your account efficiently, ensuring complete control over your financial activities.
Customer Support
Our dedicated support team is available to assist you with any queries or issues. Whether you need help with setting up your account or resolving transaction-related questions, we’re here to provide prompt and reliable assistance.
In the digital age, privacy concerns have become increasingly paramount, prompting the European Union to enact the General Data Protection Regulation (GDPR) in 2018. Among its many provisions, GDPR sets strict guidelines for the collection and processing of personal data, including the use of cookies on websites. Privacy Policy
Allow
Decline
