/*Root*/
:root {
--black : #000;
--white: #fff;
--gray : #747A80;
--border-color-one : #DDE6E2;
--bg-light-one : #F1F5F5;
--bg-light-two : #F8FAF9;
--color-blue: #3D3F65;
--color-a: #000000;
}
body {
font-family: 'Inter', sans-serif;
font-weight: 400;
line-height: 1.5;
font-size: 14px;
}
a {
text-decoration: none;
}
.supportlink {
text-decoration: underline;
font-weight: bold;
color: var(--color-a);
}
a:focus,
img:focus,
input:focus,
.form-control:focus,
.form-select:focus ,
.accordion-button:focus {
outline: none;
box-shadow: none;
}
/* .d-block {
display: block !important;
} */
.logo {
width: auto;
max-width: 100%;
}
.inline-link {
transition: all 0.3s ease;
}
.inline-link:hover {
opacity: 0.8;
}
.fw-bolder {
font-weight: 800 !important;
}
.btn-block {
width: 100%;
}
.cursor-pointer {
cursor: pointer;
}
.card {
border-color: var(--border-color-one) !important;
}
/*Text Colors*/
.text-black {
color: var(--black) !important;
}
.text-white {
color: var(--white) !important;
}
.text-gray {
color: var(--gray) !important;
}
.text-blue {
color: var(--color-blue) !important;
}
#loader {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.8);
width: 100%;
height: 100%;
}
.loader {
width: 65px;
aspect-ratio: 1;
position: relative;
}
.loader:before,
.loader:after {
content: "";
position: absolute;
border-radius: 50px;
box-shadow: 0 0 0 3px inset #000;
animation: l5 2.5s infinite;
}
.loader:after {
animation-delay: -1.25s;
border-radius: 0;
}
@keyframes l5 {
0% {
inset: 0 35px 35px 0
}
12.5% {
inset: 0 35px 0 0
}
25% {
inset: 35px 35px 0 0
}
37.5% {
inset: 35px 0 0 0
}
50% {
inset: 35px 0 0 35px
}
62.5% {
inset: 0 0 0 35px
}
75% {
inset: 0 0 35px 35px
}
87.5% {
inset: 0 0 35px 0
}
100% {
inset: 0 35px 35px 0
}
}
/*Font sizez*/
h1 {
font-size: 42px;
}
.fs-8 {
font-size: 8px !important;
}
.fs-10 {
font-size: 10px !important;
}
.fs-11 {
font-size: 11px !important;
}
.fs-12 {
font-size: 12px !important;
}
.fs-13 {
font-size: 13px !important;
}
.fs-14 {
font-size: 14px !important;
}
.fs-16 {
font-size: 16px !important;
}
.fs-18 {
font-size: 18px !important;
}
.fs-20 {
font-size: 20px !important;
}
.fs-24 {
font-size: 24px !important;
}
.fs-28 {
font-size: 28px !important;
}
.fs-42 {
font-size: 42px !important;
}
.fs-56 {
font-size: 56px !important;
}
.img-full {
width: 100%;
height: auto;
}
label {
/*font-size: 12px !important;
font-weight: bold !important; */
font-size: 14px !important;
font-weight: 500 !important;
margin-bottom: 0.375rem;
}
.form-control ,
.form-select {
font-size: 14px;
color: #000;
border-color: var(--border-color-one);
/* padding: 20px 26px;*/
padding: 20px 20px;
}
.input-group .form-control ,
.input-group .form-select {
border-right: 0;
}
.input-group .input-group-text {
background-color: #fff;
border-left: 0;
padding-right: 26px;
}
.input-group .form-control:focus + .input-group-text ,
.input-group .form-select:focus + .input-group-text {
border-color: #000000;
transition: border-color 0.15s;
/* transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;*/
}
/*for Form Check*/
.form-check input {
width: 20px;
height: 20px;
margin-right: 0.5rem;
margin-top: 0;
}
/*for Buttons*/
.btn-lg-one {
padding: 16px 20px;
}
.dbCenteral {
min-height: calc(100% - 140px);
}
/*Scroll Bar*/
/*https://stackoverflow.com/questions/44334106/how-can-i-style-horizontal-scrollbar-by-css*/
::-webkit-scrollbar {
height: 4px;
width: 4px;
background: gray;
}
/* Track */
::-webkit-scrollbar-track {
background: #ffffff;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
::-webkit-scrollbar-thumb:horizontal {
background: #dddddd;
border-radius: 10px;
}
/*PAGE - SIGN IN*/
.divider_body_wrap {
display: flex;
height: 100vh;
flex-direction: column;
}
.divider_body_wrap .divider_body_side_x ,
.divider_body_wrap .divider_body_side_y {
width: 100%;
padding: 30px;
}
.divider_body_wrap .divider_body_side_x .divider_body_side_x_cont {
width: 500px;
margin: 0 auto;
max-width: 100%;
display: flex;
flex-direction: column;
height: 100%;
}
.divider_body_wrap .divider_body_side_x .divider_body_side_x_cont .divider_body_side_x_b {
flex-grow: 1;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
h1.heading_one {
font-size: 36px;
}
.divider_body_wrap .divider_body_side_y {
background: hsla(225, 78%, 59%, 1);
background: linear-gradient(90deg, hsla(225, 78%, 59%, 1) 0%, hsla(197, 85%, 51%, 1) 100%);
background: -moz-linear-gradient(90deg, hsla(225, 78%, 59%, 1) 0%, hsla(197, 85%, 51%, 1) 100%);
background: -webkit-linear-gradient(90deg, hsla(225, 78%, 59%, 1) 0%, hsla(197, 85%, 51%, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#456FE8", endColorstr="#19B0EC", GradientType=1 );
}
.or_text {
position: relative;
margin: 1rem auto;
color: var(--gray);
font-size: 14px;
font-weight: normal;
text-align: center;
width: 240px;
max-width: 100%;
}
.or_text:before ,
.or_text:after {
content: "";
background-color: #CFDBD5;
position: absolute;
top: 50%;
width: 100px;
height: 1px;
}
.or_text:before {
left: 0;
}
.or_text:after {
right: 0;
}
.UserTestimonialsSlider {
text-align: center;
color: var(--white);
width: 500px;
max-width: 100%;
margin: 0 auto;
}
.UserTestimonialsSlider .UserTestimonialsItem {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.UserTestimonialsSlider .UserTestimonialsItem .UserTestimonialsItem_Thumbnail {
width: 100%;
height: auto;
max-height: 50vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.UserTestimonialsSlider .UserTestimonialsItem .UserTestimonialsItem_Thumbnail img {
width: 100%;
height: auto;
height: 100%;
max-width: 100%;
max-height: inherit;
}
.UserTestimonialsSlider .UserTestimonialsItem .UserTestimonialsItem_Message {
margin: 1.5rem 0;
text-align: center;
}
.UserTestimonialsSlider .UserTestimonialsItem .UserTestimonialsItem_Message p {
/* font-size: 24px;*/
font-weight: 800;
margin: 0;
}
.UserTestimonialsSlider .UserTestimonialsItem .UserTestimonialsItem_UserInfo {
text-align: center;
}
.UserTestimonialsSlider .UserTestimonialsItem .UserTestimonialsItem_UserInfo h6 {
font-size: 18px;
font-weight: 800;
margin: 0;
}
.UserTestimonialsSlider .UserTestimonialsItem .UserTestimonialsItem_UserInfo p {
color: #bbdafb;
font-size: 14px;
font-weight: normal;
margin: 0;
}
.UserTestimonialsSlider .slick-dots li.slick-active button:before {
color: #fff;
opacity: 1;
}
.UserTestimonialsSlider .slick-dots li button:before {
font-size: 10px;
}
.UserTestimonialsSlider .slick-dots li {
margin: 0 2px;
}
/*Slider Stacking Issue*/
.UserTestimonialsSlider {
opacity: 0;
visibility: hidden;
transition: opacity 1s ease;
-webkit-transition: opacity 1s ease;
}
.UserTestimonialsSlider.slick-initialized {
visibility: visible;
opacity: 1;
}
.accordion.signin_accordion .accordion-button::after {
display: none;
}
.accordion.signin_accordion .accordion-button {
background-color: #fff;
border: 1px solid var(--border-color-one);
border-radius: var(--bs-accordion-inner-border-radius);
font-size: 14px;
font-weight: 800;
color: #000;
text-align: center;
justify-content: center;
}
.accordion.signin_accordion .accordion-item {
border: none;
}
.accordion.signin_accordion .accordion-item .accordion-body {
padding-left: 0;
padding-right: 0;
}
/*PAGE - SIGN IN - ENDS*/
/*PAGE - SIGN UP*/
.form-select {
background-position: right 1.65rem center;
}
.form-check .form-check-input:checked + label {
color: #000 !important;
}
/*PAGE - SIGN UP - ENDS*/
/*PAGE - EMPTY*/
.dbMain {
display: flex;
height: 100%;
min-height: 100vh;
}
.dbSidebar {
/* position: relative;*/
/*width: 260px;
flex-shrink: 0;*/
width: 260px;
background-color: #F1F5F5;
border-right: 1px solid var(--border-color-one);
/*display: flex;
flex-direction: column;*/
}
.dbSidebar .dbSidebar_logo_wrap {
padding: 1rem 1.5rem;
}
.dbSidebar .dbSidebar_logo_wrap .logo {
width: 44px;
height: 44px;
}
.dbSidebar .dbSidebar_logo_wrap a {
transition: all 0.3s ease;
}
.dbSidebar .dbSidebar_logo_wrap a:hover {
opacity: 0.8;
}
.dbSidebar .dbSidebar_nav_wrap {
flex-grow: 1;
overflow: auto;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
height: calc(100vh - 182px);
}
.dbSidebar .dbSidebar_nav_wrap ul ,
.dbSidebar .dbSidebar_footer_wrap ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.dbSidebar .dbSidebar_nav_wrap ul li ,
.dbSidebar .dbSidebar_footer_wrap ul li {
margin: 0;
padding: 0;
list-style-type: none;
display: block;
transition: all 0.3s ease;
}
.dbSidebar .dbSidebar_nav_wrap ul li:hover ,
.dbSidebar .dbSidebar_nav_wrap ul li.active:hover ,
.dbSidebar .dbSidebar_footer_wrap ul li:hover ,
.dbSidebar .dbSidebar_footer_wrap ul li.active:hover {
background-color: #ECF4F4;
}
.dbSidebar .dbSidebar_nav_wrap ul li:hover a ,
.dbSidebar .dbSidebar_nav_wrap ul li.active a ,
.dbSidebar .dbSidebar_footer_wrap ul li:hover a ,
.dbSidebar .dbSidebar_footer_wrap ul li.active a {
color: #000;
}
.dbSidebar .dbSidebar_nav_wrap ul li a ,
.dbSidebar .dbSidebar_footer_wrap ul li a {
display: flex;
align-items: center;
padding: 1rem 1rem 1rem 1.5rem;
color: var(--gray);
background-color: transparent;
position: relative;
}
.dbSidebar .dbSidebar_nav_wrap ul li.active a:after ,
.dbSidebar .dbSidebar_footer_wrap ul li.active a:after {
content: "";
background-color: var(--black);
width: 2px;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
.dbSidebar .dbSidebar_nav_wrap ul li a p ,
.dbSidebar .dbSidebar_footer_wrap ul li a p {
margin: 0;
font-size: 14px;
font-weight: 800;
}
.dbSidebar .dbSidebar_nav_wrap ul li a span ,
.dbSidebar .dbSidebar_footer_wrap ul li a span {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 0.5rem;
}
.dbSidebar .dbSidebar_footer_wrap {
padding: 1rem 0;
}
.dbMainContent {
width: 100%;
}
.db_padd_x {
padding-left: 20px;
padding-right: 20px;
}
.dbHeader {
padding-top: 1rem;
padding-bottom: 1rem;
/* border-bottom: 1px solid var(--border-color-one); */
/* making sticky*/
/*position: sticky;
top: 0;*/
z-index: 10;
background-color: #fff;
}
.nav_dropdown.user_dropdown figure ,
.user_thumb {
width: 40px;
height: 40px;
margin: 0;
border-radius: 40px;
overflow: hidden;
}
.nav_dropdown.user_dropdown figure img ,
.user_thumb img {
width: 36px;
height: 36px;
border-radius: 36px;
object-fit: cover;
}
.nav_dropdown .dropdown-menu {
padding: 0.75rem;
border-radius: .75rem;
width: 320px;
border-color: var(--border-color-one);
}
.nav_dropdown .dropdown-menu.notification-dropdown {
width: 360px;
}
@media screen and (max-width: 480px) {
.nav_dropdown .dropdown-menu ,
.nav_dropdown .dropdown-menu.notification-dropdown {
width: 300px;
}
}
.nav_dropdown .dropdown-menu a {
color: var(--gray);
transition: all 0.3s ease;
}
.nav_dropdown .dropdown-menu a:hover {
color: var(--black);
}
.icon-24 {
width: 24px;
height: 24px;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
.nav_dropdown .dropdown-toggle {
cursor: pointer;
}
.nav_dropdown .dropdown-toggle:after {
display: none;
}
.notification-item a {
transition: all 0.3s ease;
background-color: #fff;
}
.notification-item a:hover {
background-color: #f8f9fa;
background-color: #EDEDF1;
}
.notification-dropdown {
height: auto;
max-height: 340px;
overflow: auto;
}
.dbSidebar_offcanvas .offcanvas-header {
padding: 0;
position: absolute;
right: 1rem;
top: 1rem;
}
.dbSidebar_offcanvas .offcanvas-header .btn-close {
width: 24px;
height: 24px;
padding: 0;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
}
.dbSidebar_offcanvas .offcanvas-body {
padding: 0;
}
.dbFooter ul.footer_links {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
justify-content: center;
}
.dbFooter ul.footer_links li {
margin: 0 0 0 1rem;
padding: 0;
list-style-type: none;
}
.dbFooter ul.footer_links li a {
text-decoration: none;
font-size: 12px;
font-weight: 800;
color: #000;
}
.dbMainContent.dbMainContentEmpty {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.dbMainContent.dbMainContentEmpty .dbCenteral {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
/*PAGE - EMPTY ENDS*/
/*PAGE - DASHBOARD*/
.asset_row {
background-color: var(--white);
}
/*PAGE - DASHBOARD ENDS*/
/*PAGE - ACCOUNTS*/
/*.accountCard {
display: flex;
flex-direction: row;
}*/
.accountCard a {
display: flex;
flex-direction: row;
width: 100%;
}
.accountCard .accCardOptions {
display: none;
}
.accountCard .accCardCol_2 ,
.accountCard .accCardCol_3,
.accountCard .accCardCol_4 ,
.accountCard .accCardCol_5 {
display: none;
}
.accountCard .accCardCol_1 {
width: 40%;
}
.accountCard .accCardCol_6 {
width: 60%;
}
.badge.badge-lg {
font-size: 12px;
font-weight: 600;
}
.text-bg-success-custom ,
.text-bg-warning-custom {
line-height: 1;
padding: 10px 12px;
}
.text-bg-success-custom {
background-color: #E9FCEC;
padding: 10px 12px;
color: #11b413;
border-radius: 4px;
}
.text-bg-warning-custom {
background-color: #fff3cd;
color: #d6a104;
border-radius: 4px;
padding: 10px 12px;
}
.dotsMenuDropdown .dropdown-toggle:after {
display: none;
}
.dotsMenuDropdown .dropdown-toggle {
width: 40px;
height: 40px;
padding: 8px;
text-align: center;
border-radius: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.dotsMenuDropdown .dropdown-menu .dropdown-item {
font-size: 12px;
font-weight: 500;
color: #949CA9;
padding: 0.5rem 0.75rem;
}
.dotsMenuDropdown .dropdown-menu .dropdown-item:hover {
background-color: #ECECEC;
color: #010101;
}
/*PAGE - ACCOUNTS ENDS*/
/*PAGE - ACCOUNT DETAILS*/
.icon-40 {
width: 40px;
height: 40px;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
.accounts_details_nav ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: nowrap;
gap: 1rem;
overflow-x: auto;
width: 100%;
}
.accounts_details_nav ul li {
margin: 0;
padding: 0;
list-style-type: none;
display: block;
}
.accounts_details_nav ul li a {
display: flex;
align-items: center;
text-decoration: none;
padding: 14px 4px;
line-height: 1;
color: var(--black);
white-space: nowrap;
}
.accounts_details_nav ul li a:hover {
opacity: 0.8;
}
.accounts_details_nav ul li a p {
margin: 0;
font-size: 14px;
font-weight: 800;
}
.visa_card_thumbnail {
width: 90px;
height: auto;
max-height: 60px;
}
.bg-light-one {
background-color: var(--bg-light-one);
}
.textEllipssis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*PAGE - ACCOUNT DETAILS ENDS*/
/*PAGE - CARD*/
.virtualPhysicalTabControl {
gap: 0.25rem;
}
.virtualPhysicalTabControl .nav-item .nav-link {
color: var(--black);
background-color: transparent;
}
.virtualPhysicalTabControl .nav-item .nav-link.active {
color: var(--white);
background-color: var(--black);
}
/*PAGE - CARD ENDS*/
/*PAGE - CARD DETAILS*/
.cardTemplate {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0049ff+0,20e1c4+100 */
background: linear-gradient(to bottom, #0049ff 0%,#20e1c4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.icon-18 {
width: 18px;
height: 18px;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
/*PAGE - CARD DETAILS END*/
/*PAGE - TRANSACTIONS*/
.siteSearch {
position: relative;
width: 100%;
max-width: 100%;
}
.siteSearch .form-control {
/* padding: 10px 20px 10px 60px;*/
padding: 10px 60px 10px 20px;
height: 44px;
}
.siteSearch button[type='submit'] {
position: absolute;
/* left: 1px;*/
right: 1px;
top: 1px;
height: 42px;
background-color: #fff;
border: 0;
}
.siteSearch button[type='submit'] ,
.siteSearch button[type='submit']:hover ,
.siteSearch button[type='submit']:focus {
border: 0;
background-color: var(--bg-light-one);
}
.searchForm {
display: flex;
/* flex-direction: column;*/
gap: 0.5rem;
}
.searchForm .btn {
height: 44px;
}
.searchForm .searchFormFilters {
display: flex;
justify-content: space-between;
}
/*PAGE - TRANSACTIONS END*/
/*PAGE - INVOICES*/
.invoices_cards_slider .slick-slide {
/* margin-right: 1rem; */
margin: 0 0.5rem;
}
.invTableHead {
display: flex;
font-size: 14px;
font-weight: 800;
color: var(--black);
}
.invTableHead .invTableHeadCol_1 ,
.invTableCardDsktp .invTableCardDsktpCol_1 {
width: 35%;
}
.invTableHead .invTableHeadCol_2 ,
.invTableCardDsktp .invTableCardDsktpCol_2 {
width: 15%;
}
.invTableHead .invTableHeadCol_3 ,
.invTableCardDsktp .invTableCardDsktpCol_3 {
width: 15%;
}
.invTableHead .invTableHeadCol_4 ,
.invTableCardDsktp .invTableCardDsktpCol_4 {
width: 15%;
}
.invTableHead .invTableHeadCol_5 ,
.invTableCardDsktp .invTableCardDsktpCol_5 {
width: 20%;
}
.invTableCardDsktp {
display: flex;
align-items: center;
flex-direction: row;
}
.badge-wide-one {
width: 80px;
max-width: 100%;
}
.text-bg-danger-custom {
line-height: 1;
padding: 10px 12px;
background-color: #fee0e0;
color: #f20000;
border-radius: 4px;
}
.invoiceDetailsModal .btn-close {
position: absolute;
right: 1.5rem;
top: 1.25rem;
}
.invoiceDetailsModal .modal-header .invDetMod_x {
border-top-left-radius: 1rem;
}
.invoiceDetailsModal .modal-header ,
.invoiceDetailsModal .modal-body {
padding: 0;
display: flex;
flex-direction: row;
}
.invoiceDetailsModal .modal-body .invDetMod_x {
border-bottom-left-radius: 1rem;
}
.invoiceDetailsModal .modal-body .invDetMod_y {
border-bottom-right-radius: 1rem;
}
.invoiceDetailsModal .modal-body .invDetMod_y {
display: flex;
flex-direction: column;
}
.invoiceDetailsModal .modal-body .invDetMod_y .invDetMod_Body {
flex-grow: 1;
}
.invoiceDetailsModal .modal-body .invDetMod_y .invDetMod_Body th,
.invoiceDetailsModal .modal-body .invDetMod_y .invDetMod_Body td {
border-bottom-style: dashed;
}
.invoiceDetailsModal .modal-body .invDetMod_y .invDetMod_Body th {
font-size: 12px;
font-weight: 500 !important;
}
.invoiceDetailsModal .modal-body .invDetMod_y .invDetMod_Body td {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.invoiceDetailsModal .invDetMod_x {
background-color: #EBF0F0;
width: 30%;
}
.invoiceDetailsModal .invDetMod_y {
background-color: #fff;
width: 70%;
}
.subtotal_area {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.subtotal_area .subtotal_row {
width: 220px;
max-width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
text-align: right;
}
.icon-14 {
width: 14px;
height: 14px;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
/*Modal Width*/
.modal-dialog.modal-xl-custom {
width: 94%;
max-width: 100%;
}
/*For Mobile*/
/*Bottom Modal*/
.bottomModal .modal-dialog {
position: fixed;
bottom: 0;
left: 0%;
right: 0%;
margin: 0;
transform: translate(0,100%) !important;
}
.bottomModal.modal.show .modal-dialog {
transform: none !important;
max-width: 100%;
}
.bottomModal .modal-content {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.invTableCardMob {
cursor: pointer;
}
.invoiceDetailsModalMobile .modal-header {
background-color: #EBF0F0;
}
.invoiceDetailsModalMobile .invoiceDetailsModalMobile_header_child {
text-align: center;
padding: 60px 1rem 1rem 1rem;
position: relative;
}
.invoiceDetailsModalMobile .invoiceDetailsModalMobile_header_child:before {
content: "";
background-color: #EBF0F0;
position: absolute;
left: 0;
top: 0;
width: 100%;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
height: 40%;
}
.invoiceDetailsModalMobile .invoiceDetailsModalMobile_header_child figure {
width: 70px;
height: 70px;
border-radius: 70px;
background-color: #E8ECEF;
position: relative;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #fff;
position: relative;
z-index: 1;
}
.invoiceDetailsModalMobile .invoiceDetailsModalMobile_header_child figure img {
width: 100%;
height: 100%;
}
.invoiceDetailsModalMobile .invoiceDetailsModalMobile_header_child figcaption {
font-size: 20px;
font-weight: 800;
color: var(--black);
position: relative;
z-index: 1;
}
/*PAGE - INVOICES END*/
/*PAGE - ADD INVOICE*/
.fancy_divider {
position: relative;
}
.fancy_divider .btn {
margin: 0 auto;
width: 200px;
max-width: 100%;
display: block;
position: relative;
z-index: 1;
pointer-events: none;
}
.fancy_divider:before ,
.fancy_divider:after {
content: "";
background: linear-gradient(to right, #cfdbd5 0%,#cfdbd5 50%,#ffffff 50%,#ffffff 100%);
position: absolute;
top: 50%;
width: calc(50% - 120px);
height: 1px;
background-size: 12px 1px;
}
.fancy_divider:before {
left: 0;
}
.fancy_divider:after {
right: 0;
}
ul.addItemList {
margin: 0;
padding: 0;
list-style-type: none;
border-left: 1px solid var(--border-color-one);
}
ul.addItemList li {
margin: 0.25rem 0;
padding: 0.5rem 0 0.5rem 2rem;
list-style-type: none;
display: flex;
align-items: center;
position: relative;
}
ul.addItemList li:before {
content: "";
background-color: var(--border-color-one);
width: 20px;
height: 1px;
position: absolute;
left: 0;
top: 50%;
}
ul.addItemList li:after {
content: "";
background-color: #747A80;
width: 8px;
height: 8px;
border-radius: 8px;
position: absolute;
left: 1rem;
top: calc(50% - 4px);
}
ul.addItemList li span {
width: 100px;
max-width: 100%;
}
/*PAGE - ADD INVOICE ENDS*/
/* PAGE - PAYMENTS */
.receipentCard {
padding-right: 60px;
display: flex;
flex-direction: column;
}
.receipentCard .receipentCardHeader .receipCardCol_1 {
width: 100%;
}
.receipentCard .receipentCardHeader .receipCardCol_2 ,
.receipentCard .receipentCardHeader .receipCardCol_3 {
display: none;
}
.receipentCard .accCardOptions {
position: absolute;
top: 2.25rem;
right: 1.5rem;
display: block;
width: 18px;
height: 18px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
transform-origin: center;
}
.receipentCardHeader[aria-expanded="true"] .accCardOptions {
transform: rotate(180deg);
}
.btn-wide-one {
width: 160px;
max-width: 100%;
}
.fileUploadArea {
background-color: #EBF0F0;
border: 1px dashed #B0B2B2;
border-radius: 0.75rem;
padding: 1rem;
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.receipentCard .receipentCardHeader {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 1.5rem;
padding-right: 50px;
}
.receipentCard .receipentCardBody {
border-top: 1px solid var(--border-color-one);
padding-top: 1rem;
}
/* PAGE - PAYMENTS ENDS */
/* PAGE - SEND MONEY */
/* PAGE - SEND MONEY ENDS */
/* PAGE - PROFILE SETTINGS */
.userImage {
width: 100px;
height: 100px;
border-radius: 100px;
max-width: 100%;
position: relative;
}
.userImage > img {
width: 100%;
height: 100%;
border-radius: 100%;
object-fit: cover;
}
.userImage span {
position: absolute;
bottom: 0;
right: 0;
}
.profile_nav_pills .nav-item {
margin-bottom: 0.25rem;
}
.profile_nav_pills .nav-item .nav-link {
width: 100%;
display: flex;
align-items: center;
position: relative;
padding: 0.85rem;
border-radius: 10px;
}
.profile_nav_pills .nav-item .nav-link:after {
content: "";
background: url(../images/icons/chevron-right.svg) no-repeat center center;
background-size: 14px 14px;
width: 14px;
height: 14px;
position: absolute;
right: 1rem;
top: calc(50% - 6px);
}
.profile_nav_pills .nav-item .nav-link {
background-color: transparent;
font-size: 14px;
font-weight: 800;
color: var(--black);
text-align: left;
}
.profile_nav_pills .nav-item .nav-link span {
margin-right: 0.65rem;
}
.profile_nav_pills .nav-item .nav-link:hover ,
.profile_nav_pills .nav-item .nav-link.active ,
.profile_nav_pills .nav-item .nav-link.active:hover {
background-color: #D9E3DF;
}
/* PAGE - PROFILE SETTINGS ENDS */
/* Card Body Overlapp Effect */
/*.card-body.overlapper ,
.overlapper {
position: relative;
}
.card-body.overlapper:after ,
.overlapper:after {
content: "";
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%);
height: 160px;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-bottom-left-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}*/
/* PAGE - REPORTS */
.reports_slick_mobile {
display: block;
}
/* PAGE - REPORTS END */
/* ADDING FILTERS IN TRANSACTION PAGE */
.tr_filters_wrap {
display: flex;
flex-wrap: wrap;
}
.tr_filters_wrap .tr_filter_ind {
width: auto;
max-width: 100%;
margin: 0 0.5rem 0 0;
}
.clear_filter_button {
background-color: #EFEFEF;
}
.clear_filter_button:hover {
background-color: #D3D3D3;
}
.tr_filters_wrap .tr_filter_ind .dropdown .btn-light {
font-size: 13px;
font-weight: 400;
background-color: #fff;
color: #979797;
width: 100%;
}
.tr_filters_wrap .tr_filter_ind .dropdown .btn-light:hover ,
.tr_filters_wrap .tr_filter_ind .dropdown .btn-light:active ,
.tr_filters_wrap .tr_filter_ind .dropdown .btn-light[aria-expanded = "true"] {
background-color: #f8f8f8;
color: var(--black);
}
.tr_filters_wrap .dropdown-menu.show {
width: auto;
min-width: 180px;
padding: 0;
}
.tr_filters_wrap .dropdown-menu li label {
/* font-weight: 500 !important;*/
margin: 0;
font-weight: normal !important;
font-size: 14px !important;
color: #2F2F2F;
}
.tr_filters_wrap .form-check-input:checked {
background-color: transparent;
border-color: transparent;
}
.tr_filters_wrap .form-check-input:checked[type=checkbox] {
--bs-form-check-bg-image : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
--bs-form-check-bg-image : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-check2' viewBox='0 0 16 16'%3e %3cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e");
}
.tr_filters_wrap .dropdown-menu .filterLi {
padding: 0.675rem 1rem;
}
.hasHover {
transition: all 0.3s ease;
cursor: pointer;
}
.hasHover:hover {
background-color: var(--bg-light-one);
background-color: var(--border-color-one);
cursor: pointer;
}
.tr_filters_wrap .dropdown-menu .filterLi:hover ,
.tr_filters_wrap .dropdown-menu .filterLi:has(.form-check-input:checked) {
background-color: var(--border-color-one);
}
.tr_filters_wrap .tr_filter_ind .form-control-sm {
padding: 8px 10px;
}
.tr_filters_wrap .filter_selection {
width: 100%;
}
.tagDot {
width: 8px;
height: 8px;
min-width: 8px;
border-radius: 8px;
background-color: var(--gray);
}
.tagDotColor1 {
background-color: #FF7A00;
}
.tagDotColor2 {
background-color: #FF0000;
}
.tagDotColor3 {
background-color: #00FF38;
}
.tagDotColor4 {
background-color: #0075FF;
}
.tagDotColor5 {
background-color: #FF006B;
}
.tagDotColor6 {
background-color: #00FFF0;
}
/* for Date Range Picker */
.daterangepicker .ranges li.active ,
.daterangepicker td.active,
.daterangepicker td.active:hover {
background-color: #222 !important;
}
.daterangepicker td.in-range:not(.active) {
background-color: #ebebeb !important;
}
/* ADDING FILTERS IN TRANSACTION PAGE ENDS */
/*PAGE - PAYMENT PRIVATE TRANSFER - SEND*/
.pvt_trnsfr_main_card {
width: 500px;
max-width: 100%;
margin: 2rem auto;
}
.pvt_trnsfr_main_card {
display: flex;
flex-direction: column;
}
.pvt_trnsfr_main_card .pvt_trnsfr_main_card_heading_box {
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
}
.pvt_trnsfr_main_card .pvt_trnsfr_main_card_info_box {
margin: 1rem 0;
background-color: var(--bg-light-one);
}
.pvt_trnsfr_main_card .pvt_trnsfr_main_card_info_box hr {
opacity: 0.15;
}
/*PAGE - PAYMENT PRIVATE TRANSFER - SEND ends*/
/*PAGE - CRYPTO - FIAT*/
.smPageLinks {
display: flex;
flex-wrap: nowrap;
}
.smPageLinks a {
flex: 1;
width: 100%;
font-size: 16px;
font-weight: normal;
color: var(--gray);
background-color: #F6F6F6;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
border: 0;
outline: 0;
transition: all 0.3s ease;
}
.smPageLinks a:not(.active):hover {
background-color: #f8f8f8;
color: var(--black);
}
.smPageLinks a.active {
background-color: #ffffff;
font-weight: bolder;
color: var(--black);
}
.smPageLinks a:first-child {
border-radius: 0.5rem 0 0 0;
}
.smPageLinks a:last-child {
border-radius: 0 0.5rem 0 0;
}
.feesTag {
background-color: #26AB78;
border-radius: 2px;
color: #fff;
text-transform: uppercase;
font-weight: normal;
padding: 2px 6px;
margin-left: 4px;
}
.epaTabs {
background-color: #F6F6F6;
display: flex;
align-items: center;
}
.epaTabs .nav-item {
width: 100%;
flex: 1;
}
.epaTabs .nav-link {
color: var(--gray);
font-weight: normal;
font-size: 14px !important;
width: 100%;
font-weight: normal !important;
}
.epaTabs .nav-link.active {
background-color: #fff;
color: var(--black);
}
/*https://jsfiddle.net/the94air/awzqtd4w/*/
.paymentAccountSelectionWrap .select2 {
width: 100% !important;
}
.paymentAccountSelectionWrap .select2-container--default .select2-selection--single .select2-selection__rendered {
height: 64px;
display: flex;
align-items: center;
justify-content: center;
}
.paymentAccountSelectionWrap .select2-container .select2-selection--single {
height: 64px;
}
.paymentAccountSelectionWrap .select2-container--default .select2-selection--single .select2-selection__arrow {
display: none;
}
ul#select2-paymentAccountSelection-results .select2-results__option {
padding: 1rem;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #f1f5f5 !important;
}
.letterCaptionWrap figure {
margin: 0 1rem 0 0;
width: 32px;
height: 32px;
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
color: var(--black);
background-color: #EBF0F0;
}
.letterCaptionWrap figcaption {
font-size: 14px;
font-weight: normal;
color: var(--black);
}
.paymentAccountSelectionWrap .select2-container--default .select2-selection--single #select2-recipientSelection-container.select2-selection__rendered {
justify-content: flex-start;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid var(--border-color-one);
border-radius: 0.375rem;
font-size: 14px;
padding: 20px 26px;
line-height: 1;
}
/*PAGE - CRYPTO - FIAT ENDS*/
@media screen and (max-width: 575px) {
.icon-24-left-padd-sm {
padding-left: 30px;
}
.icon-32-left-padd-sm {
padding-left: 46px;
}
}
.nav_dropdown .btn-light.dropdown-toggle {
background-color: #fff;
width: 36px;
height: 36px;
padding: 0.25rem !important;
}
.nav_dropdown .btn-light.dropdown-toggle:hover {
background-color: var(--bg-light-one);
}
/*.invoiceModalMobileContentArea {
height: auto;
max-height: 300px;
overflow-x: hidden;
overflow-y: auto;
}
@media screen and (max-height: 679px) {
.invoiceModalMobileContentArea {
height: auto;
max-height: 200px;
}
}*/
.icon-32 {
width: 32px;
height: 32px;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
.icon-32 img {
width: 100%;
height: 100%;
max-width: 100%;
}
@media screen and (min-width: 1200px) {
.cpr_1 {
padding-right: 80px;
}
}
.letterFigA ,
.letterFigB ,
.letterFigC ,
.letterFigD {
border-radius: 50px;
font-size: 18px;
font-weight: 800;
}
.letterFigA {
background-color: #ddd;
color: var(--gray);
}
.letterFigB {
background-color: #D9C0EF;
color: #802BCA;
}
.letterFigC {
background-color: #B1CBD4;
color: #1B4555;
}
.letterFigD {
background-color: #ADF5AD;
color: #038004;
}
.border-bottom {
border-bottom-color: #E2E9E6 !important;
}
/*Transaction Modal*/
.transactionModal .modal-header {
background-color: #000;
}
.transactionModal .transactionDetailsModalMobile_header_child {
text-align: center;
padding: 60px 1rem 1rem 1rem;
position: relative;
}
.transactionModal .transactionDetailsModalMobile_header_child:before {
content: "";
background-color: #000;
position: absolute;
left: 0;
top: 0;
width: 100%;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
height: 40%;
}
.transactionModal .transactionDetailsModalMobile_header_child figure {
width: 70px;
height: 70px;
border-radius: 70px;
background-color: #E8ECEF;
position: relative;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #fff;
position: relative;
z-index: 1;
overflow: hidden;
}
.transactionModal .transactionDetailsModalMobile_header_child figure img {
width: 100%;
height: 100%;
}
.transactionModal .transactionDetailsModalMobile_header_child figcaption {
font-size: 20px;
font-weight: 800;
color: var(--black);
position: relative;
z-index: 1;
}
.transactionModalMobileContentArea {
background-color: white;
}
.transactionModal .modal-header .btn-close {
filter: contrast(0);
}
.dropdown.dropdown_noarrow .dropdown-toggle::after ,
.currencyInputCustom .dropdown-toggle::after ,
.transfer_fields_wrap .switcher .dropdown-toggle::after {
display: none;
}
.btn-white {
background-color: white;
color: #000;
}
.currencyInputCustom ,
.transfer_fields_wrap {
width: 260px;
margin: 0 auto;
}
.transfer_fields_wrap {
width: 360px;
max-width: 100%;
}
.currencyInputCustom input ,
.currencyInputCustom .btn ,
.transfer_fields_wrap .switcher:first-child input ,
.transfer_fields_wrap .switcher:first-child .btn {
font-size: 56px;
font-weight: 900;
}
.currencyInputCustom input ,
.currencyInputCustom .btn ,
.transfer_fields_wrap .switcher input ,
.transfer_fields_wrap .switcher .btn {
padding: 0;
line-height: 1;
}
.transfer_fields_wrap .switcher input ,
.transfer_fields_wrap .switcher .btn {
font-size: 18px;
}
@media screen and (max-width: 480px) {
.currencyInputCustom input ,
.currencyInputCustom .btn ,
.transfer_fields_wrap .switcher input ,
.transfer_fields_wrap .switcher .btn {
font-size: 36px;
font-weight: 900;
}
.currencyInputCustom {
width: 100%;
}
}
.text_overflow_custom ,
.text_overflow_custom h5,
.text_overflow_custom h6,
.text_overflow_custom p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*.pendingTransactionCard {
background-color: #fff5e7;
opacity: 1;
}
.pendingTransactionCard:hover {
opacity: 1;
}*/
.pendingTransactionCard ,
.pendingTransactionCard:hover {
opacity: 0.45;
}
/*for Scrollbar*/
.dbSidebar .dbSidebar_nav_wrap::-webkit-scrollbar {
display: none;
}
/* for FireFox*/
.dbSidebar .dbSidebar_nav_wrap {
scrollbar-width: none;
}
/*for Payment Verification Popup*/
#paymentVerificationModal .modal-footer {
border-top-color: #EBEEF1;
}
#paymentVerificationModal .modal-header {
border-bottom-color: #EBEEF1;
}
#paymentVerificationModal .modal-header ,
#paymentVerificationModal .modal-body {
/* background-color: transparent;*/
background-color: #fff;
}
form.verification_form .input-field {
flex-direction: row;
column-gap: 10px;
display: flex;
justify-content: center;
}
form.verification_form .input-field input {
height: 60px;
width: 60px;
width: 100%;
border-radius: 10px;
background-color: #fff;
outline: none;
font-size: 1.5rem;
font-weight: 800;
text-align: center;
border: 1px solid #ddd;
}
form.verification_form .input-field input:active ,
form.verification_form .input-field input:focus {
border-color: var(--black);
}
@media screen and (min-width: 768px) {
form.verification_form .input-field input:nth-child(3) {
margin-right: 50px;
}
form.verification_form .input-field {
position: relative;
}
form.verification_form .input-field:after {
content: "";
background-color: #7D7D7D;
width: 24px;
height: 2px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50% , -50%);
}
}
form.verification_form .input-field input:focus {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
form.verification_form .input-field input::-webkit-inner-spin-button,
form.verification_form .input-field input::-webkit-outer-spin-button {
display: none;
}
.veributton {
transition: all 0.2s ease;
opacity: 0.4;
}
.veributton.active {
pointer-events: auto;
opacity: 1;
}
/*form.verification_form button:hover {
background: #0e4bf1;
}*/
/*New Edits*/
.userImageSmall {
width: 60px;
height: 60px;
}
.userImage span {
width: 22px;
height: 22px;
right: -4px;
}
.c_fileupload label {
margin: 0;
cursor: pointer;
}
.c_fileupload label:hover {
opacity: 0.95;
}
.c_fileupload #upload-photo ,
.fileUploadBoxLarge #upload-photo {
opacity: 0;
position: absolute;
z-index: -1;
}
.bg-light-two {
background-color: var(--bg-light-two);
}
.rounded {
border-radius: 8px !important;
}
.form-switch .form-check-input {
width: 2.8em;
}
.verify_button_abs {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
}
.verify_button_abs_field {
padding-right: 170px;
}
/*KYC*/
.datepickerCustom + .btn-outline-secondary {
border-color: var(--border-color-one);
border-left: 0;
background-color: transparent;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
}
.datepickerCustom + .btn-outline-secondary i {
top: 50% !important;
left: 50% !important;
transform: translate(-50% , -50%);
color: #747A80;
}
.datepickerCustom + .btn-outline-secondary:hover {
background-color: #f8f8f8;
}
.datepickerCustom + .btn-outline-secondary:hover i {
color: #747A80;
}
.datepickerCustom:active + .btn-outline-secondary ,
.datepickerCustom:focus + .btn-outline-secondary {
border-color: #000;
}
.gj-picker-bootstrap {
background-color: #F5F5F5;
}
.gj-picker-bootstrap table tr td div,
.gj-picker-bootstrap table tr th div {
background-color: white;
border: 1px solid #F5F5F5;
border-radius: 6px;
width: 40px;
height: 34px;
}
.gj-picker-bootstrap div[role=navigator] .gj-icon,
.gj-picker-bootstrap div[role=navigator] .material-icons {
background-color: #fff;
}
.gj-picker-bootstrap table tr td.selected.gj-cursor-pointer div {
background-color: #000 !important;
}
/*KYC Progress Bar*/
.kyc_progress_wrap {
position: relative;
width: 700px;
max-width: calc(100% - 50px);
margin-left: auto;
margin-right: auto;
}
.kyc_progress_wrap .progress-bar {
background-color: #000;
transition: width 1s ease;
}
.kyc_progress_wrap .circle {
width: 24px;
height: 24px;
background-color: #DBE4E0;
border: 4px solid #DBE4E0;
border-radius: 24px;
position: absolute;
top: 50%;
transform: translateY(-12px);
z-index: 1;
}
.kyc_progress_wrap .circle.active {
background-color: transparent;
background-color: #F8FAF9;
border-color: #000;
display: flex;
align-items: center;
justify-content: center;
}
.kyc_progress_wrap .circle.active svg {
display: none;
}
.kyc_progress_wrap .circle.active.completed {
background-color: #000;
}
.kyc_progress_wrap .circle.active.completed svg {
display: block;
}
.kyc_progress_wrap .circle.one {
left: 0;
}
.kyc_progress_wrap .circle.two {
left: calc(50% - 12px);
}
.kyc_progress_wrap .circle.three {
right: 0;
}
.kyc_progress_wrap .progress {
background-color: #DBE4E0;
}
/*File Upload Box*/
/*.fileUploadBoxLarge > label {
background-color: #fff;
border-radius: 6px;
border: 1px dashed #000;
width: 100%;
height: 200px;
padding: 1rem;
text-align: center;
font-weight: normal;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
transition: all 0.3s ease;
}
.fileUploadBoxLarge > label:hover {
background-color: #fefefe;
border-width: 2px;
}*/
.pe-none {
pointer-events: none;
}
.icon-250 {
width: 250px;
height: 250px;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
.phoneFieldWrap .form-control {
font-weight: 600;
}
.iti {
width: 100%;
}
.iti__flag {
border-radius: 4px;
}
.iti__country .iti__dial-code {
margin-left: auto;
}
.iti__country-name {
font-size: 14px;
font-weight: 600;
}
.iti__dial-code {
font-size: 14px;
font-weight: 600;
}
.iti__country-list {
padding: 0.5rem;
}
.iti__country {
border-radius: 8px;
padding: 12px;
}
.iti--inline-dropdown .iti__dropdown-content {
border-radius: 8px;
padding: 4px;
}
.iti__country.iti__highlight .iti__dial-code {
color: #000;
}
.fieldError {
margin: 2px 0;
color: #B03F3F;
font-size: 10px;
}
.iti--allow-dropdown .iti__flag-container:after,
.iti--show-selected-dial-code .iti__flag-container:after {
content: "";
background-color: #CECECE;
width: 2px;
height: 24px;
top: 50%;
right: -4px;
position: absolute;
display: block;
z-index: 1;
transform: translateY(-50%);;
}
.iti--allow-dropdown input.iti__tel-input,
.iti--allow-dropdown input.iti__tel-input[type=text],
.iti--allow-dropdown input.iti__tel-input[type=tel],
.iti--show-selected-dial-code input.iti__tel-input,
.iti--show-selected-dial-code input.iti__tel-input[type=text],
.iti--show-selected-dial-code input.iti__tel-input[type=tel] {
padding-left: 94px !important;
}
.timer_button {
width: 60px;
}
.fs-20 {
font-size: 20px;
}
.alert-warning {
background-color: #FFF8EC !important;
}
.alert-danger {
background-color: #ffebeb !important;
border: 1px solid #ff0000 !important;
color: #ff0000;
}
.icon-100 {
width: 100px;
height: 100px;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
.custom_alert_one {
background-color: #fff;
border: 1px solid #000;
border-radius: 8px;
border-left: 8px solid #FF7A00;
}
.custom_alert_one_inner {
display: flex;
align-items: center;
justify-content: center;
}
.custom_alert_one_inner .fig_wrap {
width: 100px;
margin-right: 1.5rem;
margin-bottom: 0;
}
.custom_alert_one_inner .cont_wrap {
width: 100%;
}
.icon-60 {
width: 60px;
height: 60px;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
/*for Avatar Upload*/
.avatar-upload {
position: relative;
max-width: 100%;
margin: 0;
}
.avatar-upload .avatar-edit {
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
}
.avatar-upload .avatar-edit input {
display: none;
}
.avatar-upload .avatar-edit input + label {
display: inline-block;
width: 34px;
height: 34px;
margin-bottom: 0;
border-radius: 100%;
background: #FFFFFF;
border: 1px solid transparent;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
cursor: pointer;
font-weight: normal;
transition: all 0.2s ease-in-out;
}
.avatar-upload .avatar-edit input + label:hover {
background: #f1f1f1;
border-color: #d6d6d6;
}
.avatar-upload .avatar-preview {
width: 100px;
height: 100px;
position: relative;
border-radius: 100%;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}
.avatar-upload .avatar-preview > div {
width: 100%;
height: 100%;
border-radius: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
/*for Dropzone*/
.dropzone {
background: white;
border-radius: 8px;
border: 1px dashed #000;
border-image: none;
max-width: 100%;
min-height: 220px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.dropzone .dz-message {
margin: 0;
}
.dropzone .dz-preview .dz-image {
width: 80px;
height: 80px;
}
.dropzone .dz-preview {
min-height: 80px;
}
.dropzone .dz-preview {
margin: 5px 5px 26px 5px;
}
.radio_button_cont {
border: 1px solid #DDE6E2;
}
.radio_button_cont figure {
width: 40px;
height: 40px;
background-color: #CFDBD5;
padding: 4px;
border-radius: 40px;
position: relative;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.radio_button_cont figure img {
width: 32px;
height: 32px;
border-radius: 32px;
max-width: 100%;
}
.radio_button_radio {
position: absolute;
right: 1rem;
top: 1rem;
width: 1rem;
height: 1rem;
display: block;
}
.radio_button_radio:after {
display: inline-block;
content: "";
vertical-align: -.125em;
/* background-image: url("data:image/svg+xml,");*/
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: 1rem 1rem;
position: absolute;
width: 1rem;
height: 1rem;
top: 0;
right: 0;
opacity: 0.3;
}
.walletRadioWrap .btn-check:checked+.btn,
.walletRadioWrap .btn.active,
.walletRadioWrap .btn.show,
.walletRadioWrap .btn:first-child:active,
:not(.btn-check)+.btn:active {
background-color: #F1F4F2;
border-color: #000;
box-shadow: inset 0 0 0px 1px black;
}
.walletRadioWrap .btn-check:checked+.btn .radio_button_radio:after {
background-image: url("data:image/svg+xml,");
opacity: 1;
}
.otp-fake-input .otp-content {
font-size: 36px !important;
font-weight: 400 !important;
}
.custom_dropdown_wrap ,
.custom_dropdown_wrap1 {
display: block;
}
.custom_dropdown_wrap .custom_dropdown_wrap_content ,
.custom_dropdown_wrap1 .custom_dropdown_wrap_content1 {
display: none;
}
.custom_dropdown_wrap .custom_dropdown_wrap_content.active ,
.custom_dropdown_wrap1 .custom_dropdown_wrap_content1.active {
display: block;
}
.custom_dropdown_wrap .custom_dropdown_wrap_content ,
.custom_dropdown_wrap1 .custom_dropdown_wrap_content1 {
background-color: teal;
width: 100%;
height: 400px;
}
.select2-container--bootstrap-5 .select2-selection--single {
padding: 20px 26px;
}
.select2-container .select2-selection--single {
height: 62px;
}
.select2-container--bootstrap-5 .select2-selection {
border-radius: 8px;
border-color: var(--border-color-one);
font-size: 14px;
}
.select2-container--bootstrap-5 .select2-selection--single {
background-position: right 1.2rem center;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
background-color: #E5F2FF;
color: #000;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
position: relative;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted):after {
display: inline-block;
content: "";
vertical-align: -.125em;
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: 1rem 1rem;
position: absolute;
right: 1rem;
top: 1rem;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
}
.iti--show-selected-dial-code .iti__selected-flag {
background-color: transparent;
}
.status_image {
position: absolute;
right: -4px;
bottom: -2px;
width: 18px !important;
height: 18px !important;
}
/*Country Flags List*/
/*https://codepen.io/arekuki/pen/XWMYjLW?editors=1010*/
.f-dropdown {
--max-scroll: 4;
position: relative;
z-index: 10;
}
.f-dropdown select {
display: none;
}
.f-dropdown > span {
cursor: pointer;
padding: 18px 20px;
height: 62px;
border-radius: 8px;
display: flex;
align-items: center;
position: relative;
color: #667085;
border: 1px solid var(--border-color-one);
background: #fff;
transition: color 0.2s ease, border-color 0.2s ease;
font-size: 14px;
font-weight: 400;
color: #000;
}
.f-dropdown > span > span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 12px;
}
.f-dropdown > span img {
width: 24px;
margin-right: 10px;
}
.f-dropdown > span:before, .f-dropdown > span:after {
content: "";
display: block;
position: absolute;
width: 8px;
height: 2px;
border-radius: 1px;
top: 50%;
right: 18px;
background: #373d43;
transition: all 0.3s ease;
}
.f-dropdown > span:before {
margin-right: 4px;
transform: scale(0.96, 0.8) rotate(50deg);
}
.f-dropdown > span:after {
transform: scale(0.96, 0.8) rotate(-50deg);
}
.f-dropdown ul {
margin: 0;
padding: 40px 0.5rem 0.5rem 0.5rem;
list-style: none;
opacity: 0;
visibility: hidden;
position: absolute;
max-height: calc(var(--max-scroll) * 64px);
top: 54px;
left: 0;
z-index: 1;
right: 0;
background: #FFF;
border: 1px solid #CCC;
border-radius: 6px;
overflow-x: hidden;
overflow-y: auto;
transform-origin: 0 0;
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
transform: translate(0, 5px);
}
.f-dropdown ul:before {
content: "Select Currency";
font-size: 12px;
color: #979797;
font-weight: 500;
position: absolute;
left: 1rem;
top: 1rem;
}
.f-dropdown ul li {
padding: 0 0 4px 0;
margin: 0;
}
.f-dropdown ul li a {
cursor: pointer;
display: block;
padding: 8px 12px;
color: #000;
text-decoration: none;
outline: none;
position: relative;
transition: all 0.2s ease;
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
border-radius: 6px;
}
.f-dropdown ul li a img {
width: 30px;
margin-right: 10px;
}
.f-dropdown ul li a:hover {
color: #000;
background: #F7F8F9;
}
.f-dropdown ul li.active a {
color: #000;
background: #F7F8F9;
}
.f-dropdown ul li.active a:before, .f-dropdown ul li.active a:after {
--scale: 0.6;
content: "";
display: block;
width: 10px;
height: 2px;
position: absolute;
right: 12px;
top: 50%;
opacity: 0;
background: #FFF;
transition: all 0.2s ease;
}
.f-dropdown ul li.active a:before {
transform: rotate(45deg) scale(var(--scale));
}
.f-dropdown ul li.active a:after {
transform: rotate(-45deg) scale(var(--scale));
}
.f-dropdown ul li.active a:hover:before, .f-dropdown ul li.active a:hover:after {
--scale: 0.9;
opacity: 1;
}
/*.f-dropdown ul li:first-child a {
border-radius: 6px 6px 0 0;
}
.f-dropdown ul li:last-child a {
border-radius: 0 0 6px 6px;
}*/
.f-dropdown.disabled {
opacity: 0.7;
}
.f-dropdown.disabled > span {
cursor: not-allowed;
}
.f-dropdown.filled > span {
color: #000;
}
.f-dropdown.open {
z-index: 15;
}
.f-dropdown.open > span {
border-color: #AAA;
}
/*.f-dropdown.open > span:before, .f-dropdown.open > span:after {
background: #000;
}
.f-dropdown.open > span:before {
transform: scale(0.96, 0.8) rotate(-50deg);
}
.f-dropdown.open > span:after {
transform: scale(0.96, 0.8) rotate(50deg);
}*/
.f-dropdown.open ul {
opacity: 1;
visibility: visible;
transform: translate(0, 12px);
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32);
}
/* --------------------------- */
.f-group {
max-width: 250px;
margin: 0 auto;
text-align: left;
}
.f-group select {
width: 100%;
}
.f-control {
font-size: 14px;
line-height: normal;
color: #000;
display: inline-block;
background-color: #ffffff;
border: #ccc 1px solid;
border-radius: 6px;
padding: 8px 12px;
outline: none;
max-width: 250px;
}
.transaction_icon {
background-color: #e8ecef;
border-radius: 50px;
}
/* selectfield custom steling */
.select2-container--bootstrap-5 .select2-dropdown {
z-index: 1056;
overflow: hidden;
color: #212529;
background-color: #fff;
border-color: #000000;
border-radius: .25rem;
}
/* custom-select2.css */
.select2-container--bootstrap-5.select2-container--open .select2-selection {
border-color: #000000; /* Border color when focused or open */
box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 25%);
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
border-color: #000000; /* Border color when focused or open */
box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 25%);
}
/***************************************************************************************************
*
*
*
*
* NEW UPDATES FOR V-2*/
:root {
--bg-light-custom : #F7F9FB;
}
.account_type_rb {
background-color: var(--bg-light-custom);
border-radius: 10px;
border: 2px solid transparent;
padding: 0.75rem 2rem 0.75rem 0.75rem;
position: relative;
}
.account_type_rb:has(.form-check-input:checked) {
border-color: #000;
}
.account_type_rb .form-check-input {
top: 1rem;
right: 1rem;
}
.account_type_rb .form-check-label figure {
margin: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.account_type_rb .form-check-label figure svg {
width: 32px;
height: 32px;
}
.otplink {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
font-weight: 500;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
}
.otplink:hover {
text-decoration: underline;
}
.otplink .btn-loader {
margin-left: 4px;
}
.divider_body_wrap .divider_body_side_y2 {
margin: 1rem;
height: auto;
border-radius: 20px;
}
.divider_body_wrap .divider_body_side_y2 .y2inner {
background: hsla(225, 78%, 59%, 1);
background: linear-gradient(90deg, hsla(225, 78%, 59%, 1) 0%, hsla(197, 85%, 51%, 1) 100%);
background: -moz-linear-gradient(90deg, hsla(225, 78%, 59%, 1) 0%, hsla(197, 85%, 51%, 1) 100%);
background: -webkit-linear-gradient(90deg, hsla(225, 78%, 59%, 1) 0%, hsla(197, 85%, 51%, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#456FE8", endColorstr="#19B0EC", GradientType=1 );
background-size: cover;
width: 100%;
height: 100%;
padding: 50px 50px 110px 50px;
display: flex;
flex-direction: column;
justify-content: end;
border-radius: 20px;
position: relative;
overflow: hidden;
}
.divider_body_wrap .divider_body_side_y2 .y2inner h1 {
color: #fff;
font-size: 56px;
line-height: 1.2;
font-weight: 900;
}
.divider_body_wrap .divider_body_side_y2 .y2inner .action_row {
background-color: #313751;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 0.75rem 50px;
}
.btn-blue {
background-color: #3E7EFF;
color: #fff;
}
.btn-blue:hover ,
.btn-blue:focus ,
.btn-blue:active {
background-color: #3E7EFF;
color: #fff;
opacity: 0.8;
}
/* PAGE - ADD INVOICE */
.panel-light-custom {
background-color: #fff;
border: 1px solid #EDF2F7;
}
.form-control-sm, .form-select-sm {
font-size: 13px;
padding: 14px 16px;
border-radius: 0.375rem;
}
.product_type_radio_box label {
width: 100%;
}
.product_type_radio_box .form-check-input {
position: relative;
left: -10px;
top: 4px;
}
.product_type_radio_box:has(input[type='radio']:checked) {
box-shadow: inset 0 0 0px 2px black;
}
.discount_panel {
background-color: #F9FBFB;
}
.discount_panel table th ,
.discount_panel table td {
background-color: transparent;
color: #1A202C;
border-bottom: 0;
padding: 0.375rem 0;
}
.discount_panel table td {
font-weight: normal;
}
.discount_panel table th {
font-weight: 600;
text-align: right;
}
.discount_panel table .total td ,
.discount_panel table .total th {
border-top: 1px solid #E2E8F0;
padding-top: 0.5rem;
}
.pmntMthdCheck label {
margin: 0;
}
.pmntMthdCheck {
padding-right: 50px;
padding-left: 0;
text-align: left;
padding-top: 1rem;
padding-bottom: 1rem;
}
.pmntMthdCheck label {
display: flex;
align-items: center;
gap: 1rem;
/* padding: 1rem 0; */
}
.pmntMthdCheck .pmntMthdCheckIcon {
width: 42px;
height: 42px;
border-radius: 50px;
background-color: #fff;
border: 1px solid #E4E4E7;
display: flex;
align-items: center;
justify-content: center;
}
.pmntMthdCheck .pmntMthdCheckIcon img {
width: 24px;
height: 24px;
}
.pmntMthdCheck small {
font-size: 12px;
font-weight: normal;
color: #898989;
width: 100%;
display: block;
}
.pmntMthdCheck strong {
color: #000;
font-size: 15px;
font-weight: 600;
}
.pmntMthdCheck .form-check-input {
margin-top: 0.85rem;
}
.pmntMthdCheckBorder {
border-bottom: 1px solid #E0E2E2;
}
/* PAGE - ADD INVOICE ENDS */
/* PAGE - PAYMENT */
.payment_panel {
border: 1px solid #E4E6E8;
height: 100%;
}
.payment_panel figure ,
.payment_panel p {
margin: 0;
}
.payment_panel figure {
width: 50px;
height: 50px;
border-radius: 50px;
flex-shrink: 0;
background-color: #EDF1F1;
display: flex;
align-items: center;
justify-content: center;
}
.payment_panel h5 {
font-size: 18px;
font-weight: 600;
margin-bottom: 4px;
}
.payment_panel p {
font-size: 13px;
color: #8083A3;
font-weight: 500;
}
.pmntMthdCheck2 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.pmntMthdCheck2 label {
/* padding: 1rem 0; */
display: flex;
flex-direction: column;
margin: 0;
}
.pmntMthdCheck2 label strong {
display: block;
width: 100%;
color: #000;
font-size: 15px;
font-weight: 600;
}
.pmntMthdCheck2 label small {
font-size: 12px;
font-weight: normal;
color: #898989;
width: 100%;
display: block;
}
.pmntMthdCheck2 .form-check-input {
margin-top: 0.18rem;
margin-right: 1.18rem;
margin-left: -0.6rem;
}
.input-group.input-group-wide .form-control {
border-right: 1px solid var(--border-color-one);
}
.input-group.input-group-wide .input-group-text {
border-left: 1px solid var(--border-color-one);
width: 100px;
}
.muted-2 {
color: #888E9E;
}
.secretKey .input-group-text {
width: 90px;
}
.secretKeyBadge {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
text-align: center;
background-color: #000;
border-radius: 20px;
line-height: 1;
padding: 6px 10px;
color: #fff;
}
/* PAGE - PAYMENT ENDS */
/* PAGE - ACCOUNT SETUP */
.panel-light {
background-color: #F8FAFB;
}
.illus-one {
width: 200px;
max-width: 100%;
margin: 0 auto;
}
.checkItemList {
margin: 1rem 0;
padding: 0;
list-style-type: none;
}
.checkItemList li {
margin: 0 0 0.75rem 0;
padding: 0 0 0 1.5rem;
list-style-type: none;
position: relative;
color: #323741;
font-size: 14px;
}
.checkItemList li:before {
content: "";
background: url(../images/check-circle.svg) no-repeat center center;
background-size: 100% 100%;
width: 18px;
height: 18px;
position: absolute;
left: 0;
top: 2px;
}
.theme-border {
border: 1px solid #EAEDF2;
}
.group_ill_Wrap {
position: relative;
}
.group_ill_Wrap .group_ill_one ,
.group_ill_Wrap .group_ill_two ,
.group_ill_Wrap .group_ill_three {
position: absolute;
margin: 0;
}
.group_ill_Wrap .group_ill_one {
top: 1.375rem;
left: 0;
}
.group_ill_Wrap .group_ill_two {
top: 0;
left: 50%;
transform: translateX(-30%);
}
.group_ill_Wrap .group_ill_three {
top: 80px;
left: -120px;
}
.trunc-line-one {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.circular_icon_wrap {
width: 36px;
height: 36px;
overflow: hidden;
}
.accent-one {
color: #323741;
}
.panel-light-2 {
background-color: #F5F3FF;
}
.panel-light-3 {
background-color: #FAFAFA;
}
.circular_icon {
width: 42px;
height: 42px;
border-radius: 50px;
background-color: #fff;
border: 1px solid #E4E4E7;
display: flex;
align-items: center;
justify-content: center;
}
.muted-3 {
color: #3F3F46;
}
.img_coins {
margin: 0 auto;
width: 150px;
max-width: 100%;
}
.app_table table {
margin: 0;
}
.app_table th ,
.app_table td {
vertical-align: middle;
white-space: nowrap;
padding-left: 1rem;
padding-right: 1rem;
}
.app_table td {
font-size: 14px;
color: #0F0F10;
}
.app_table th {
background-color: #F8FAFB;
color: #323741;
font-weight: 400;
font-size: 14px;
}
.app_table thead th:first-child {
border-top-left-radius: 8px;
}
.app_table thead th:last-child {
border-top-right-radius: 8px;
}
.app_table tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
.app_table tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}
.text-app-id {
width: 220px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.app_table {
box-shadow: 0 0 0 1px #e3e3e3 inset;
padding: 1px;
border-radius: 8px;
}
.icon-50 {
width: 50px;
height: 50px;
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
}
.panel-light-4 {
background-color: #F9FAFB;
}
.badge-black {
font-size: 12px;
text-align: center;
background-color: #000;
border-radius: 20px;
line-height: 1;
padding: 6px 10px;
color: #fff;
}
.custom-badge-success {
background-color: #F0FDF4;
color: #22C55E;
font-weight: normal;
border-radius: 50px;
line-height: 1.25;
padding: 6px 10px;
font-size: 12px;
}
/* PAGE - ACCOUNT SETUP ENDS */
/* MODAL - ORDER DETAILS */
.orderDetails .btn-close {
position: absolute;
right: 2rem;
top: 2rem;
padding: 1rem;
border: 1px solid #E4E6E8;
border-radius: 10px;
z-index: 1;
}
.orderDetails .btn-close:hover {
background-color: #FFF9F6;
}
.orderDetails .orderHeader {
position: relative;
padding: 6.5rem 1rem 1rem 1rem;
margin-bottom: 1.5rem;
}
.orderDetails .orderHeader:before {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ebeef9+0,f6f1ef+100 */
background: linear-gradient(45deg, #ebeef9 0%,#f6f1ef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border-radius: 14px;
width: 100%;
height: 140px;
position: absolute;
left: 0;
top: 0;
content: "";
}
.orderDetails .orderHeader * {
position: relative;
z-index: 1;
}
.orderDetails .orderHeader .orderBadge {
position: absolute;
top: 1rem;
left: 1rem;
}
.orderBadge {
font-size: 12px;
line-height: 1;
border-radius: 50px;
border: 1px solid #E4E6E8;
color: #010101;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 1rem 1.25rem;
}
.orderBadge i {
width: 8px;
height: 8px;
border-radius: 8px;
background-color: #FBB0BF;
}
.orderDetails .companyInfo {
margin: 0 auto;
text-align: center;
}
.orderDetails .companyInfo figure {
border: 1px solid #E4E6E8;
width: 64px;
height: 64px;
border-radius: 64px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.65rem;
background-color: #fff;
}
.orderDetails .companyInfo figure img {
width: 24px;
height: 24px;
}
.orderDetails .companyInfo h6 {
color: #171721;
font-size: 20px;
font-weight: 600;
margin: 0 0 0.25rem 0;
}
.orderDetails .companyInfo p {
font-size: 12px;
}
.od_sprite {
width: 24px;
height: 24px;
margin: 2px 0 0 0;
min-width: 24px;
background: url(../images/od-sprite.svg) no-repeat left top;
}
.od_sprite.od_sprite_one {
background-position: 0 0px;
}
.od_sprite.od_sprite_two {
background-position: -24px 0px;
}
.od_sprite.od_sprite_three {
background-position: -48px 0px;
}
.od_sprite.od_sprite_four {
background-position: -72px 0px;
}
.od_sprite.od_sprite_five {
background-position: -96px 0px;
}
.od_sprite.od_sprite_six {
background-position: -120px 0px;
}
.od_sprite.od_sprite_seven {
background-position: -144px 0px;
}
.od_sprite.od_sprite_eight {
background-position: -168px 0px;
}
.custom_ruler {
border-color: #E4E6E8;
}
.panel-light-5 {
background-color: #F8F8FB;
}
.productInfoTable td {
padding: 0;
background-color: transparent;
border: 0;
}
.btn-light-custom {
background-color: #F5F5FA;
color: #8083A3;
}
.btn-light-custom:hover {
background-color: #F3F3F5;
color: #505369;
}
/* MODAL - ORDER DETAILS ENDS */
/* SETTINGS OFFCANVAS */
.settingsOffcanvas {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.offcanvas.offcanvas-bottom.settingsOffcanvas {
height: calc(100vh - 100px);
}
.settingsOffcanvas .offcanvas-header ,
.settingsOffcanvas .offcanvas-body {
padding-left: 50px;
padding-right: 50px;
}
.settingsOffcanvas .offcanvas-header {
padding-top: 1.5rem;
background-color: #FAFAFA;
}
.so_wrap {
display: flex;
/* position: absolute; */
left: 0;
bottom: 0;
width: 100%;
background: #fff;
z-index: 12;
height: calc(100% - 60px);
border-radius: 10px 10px 0 0;
overflow: hidden;
flex-direction: column;
}
.so_wrap .so_wrap_inner {
flex-direction: column;
display: flex;
}
@media screen and (min-width: 768px) {
.so_wrap .so_wrap_inner {
flex-direction: row;
/* height: calc(100% - 80px); */
height: calc(100% - 30px);
}
}
.so_wrap .so_x {
width: 40%;
flex-shrink: 0;
background-color: #FAFAFA;
padding: 50px;
overflow: auto;
}
.so_wrap .so_y {
width: 60%;
flex-shrink: 0;
background-color: #FFF;
overflow: auto;
}
.steps_list {
margin: 0;
padding: 0;
list-style-type: none;
}
.steps_list li {
margin: 0;
padding: 0;
list-style-type: none;
}
.steps_list li a {
margin: 0 0 50px 0;
padding: 0;
list-style-type: none;
position: relative;
display: flex;
align-items: center;
gap: 1.25rem;
}
.steps_list li:not(:last-child) a::after {
content: "";
background-color: #00AD43;
width: 2px;
height: 50px;
position: absolute;
left: 20px;
top: 100%;
}
.steps_list li figure ,
.steps_list li figcaption ,
.steps_list li h6 ,
.steps_list li p {
margin: 0;
}
.steps_list li h6 {
margin-top: 4px;
}
.steps_list li figure {
width: 42px;
height: 42px;
border-radius: 42px;
background-color: #f8f8f8;
overflow: hidden;
min-width: 42px;
border: 1px solid #0151EC;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 600;
color: #0151EC;
}
.steps_list li figure > img {
width: 100%;
height: 100%;
}
.steps_list li figure.numCircle {
border: 1px solid #0151EC;
background-color: transparent;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 600;
color: #0151EC;
}
.stepper_content {
margin: 0 auto;
width: 640px;
max-width: calc(100% - 2rem);
}
.fieldError {
margin: 2px 0;
color: #B03F3F;
font-size: 10px;
}
/*for Dropzone*/
.dropzone {
background: white;
border-radius: 8px;
border: 1px dashed #000;
border-image: none;
max-width: 100%;
min-height: 220px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.dropzone .dz-message {
margin: 0;
}
.dropzone .dz-preview .dz-image {
width: 80px;
height: 80px;
}
.dropzone .dz-preview {
min-height: 80px;
}
.dropzone .dz-preview {
margin: 5px 5px 26px 5px;
}
.dropzone .dz-message {
text-align: center;
width: 100%;
}
.uploaded_file {
background-color: #fff;
border: 1px solid #B2B2B2;
border-radius: 10px;
padding: 1rem;
position: relative;
}
.uploaded_file .close {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.paymentTabWrap {
position: relative;
}
.payment_buttons_wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
@media screen and (max-width: 575px) {
.payment_buttons_wrap {
flex-wrap: wrap;
}
}
.pt-button {
background-color: #fafafa;
border: 1px solid #e4e4e7;
border-radius: 6px;
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 14px;
font-weight: normal;
color: #09090b;
}
.pt-button figure {
margin: 0;
width: 36px;
height: 36px;
border-radius: 36px;
flex-shrink: 0;
background-color: var(--white);
border: 1px solid #e4e4e7;
display: flex;
align-items: center;
justify-content: center;
}
.pt-button figure svg {
width: 24px;
height: 24px;
}
.pt-button.active {
background-color: #fafafa !important;
color: #09090b !important;
border-color: #111;
box-shadow: 0 0 4px 1px #111;
}
.pt-button:hover {
color: #111;
}
.cardInfoFields {
display: flex;
flex-direction: column;
}
.cardInfoFields .cardInfoFields_top,
.cardInfoFields .cardInfoFields_bottom {
width: 100%;
}
.cardInfoFields .cardInfoFields_top .input-group .form-control,
.cardInfoFields .cardInfoFields_bottom .input-group .form-control {
border-bottom-left-radius: 0;
}
.cardInfoFields .cardInfoFields_top .input-group .input-group-text,
.cardInfoFields .cardInfoFields_bottom .input-group .input-group-text {
border-bottom-right-radius: 0;
}
.cardInfoFields .cardInfoFields_bottom {
display: flex;
flex-direction: row;
margin-top: -1px;
}
.cardInfoFields .cardInfoFields_bottom > div {
width: 100%;
}
.cardInfoFields .cardInfoFields_bottom > div:first-child .form-control {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
.cardInfoFields .cardInfoFields_bottom > div:last-child .form-control {
border-top-left-radius: 0;
}
.cardInfoFields .cardInfoFields_bottom > div:last-child .input-group-text {
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 0.5rem;
}
.btn-gr-black {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7d58f7+0,6037ed+100 */
background: linear-gradient(to bottom, #777 0%, #000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color: var(--white);
}
.btn-gr-black:hover, .btn-gr-black:focus, .btn-gr-black:active {
opacity: 0.85;
color: var(--white);
}
.alert-success-custom {
background-color: #F2FDD5;
border: 1px solid #B6F310;
}
/* SETTINGS OFFCANVAS ENDS */
.signup_type .accordion-button::after {
display: none;
}
.signup_type .accordion-item {
margin-bottom: 1rem;
border-radius: 10px;
border: 0;
}
.signup_type .accordion-item .accordion-button {
border-radius: 10px;
border: 2px solid transparent;
background-color: var(--bg-light-custom);
position: relative;
padding: 1.375rem;
}
.signup_type .accordion-item .accordion-button[aria-expanded="true"] {
border-color: var(--black);
}
.signup_type .accordion-item .accordion-button .rrr {
position: absolute;
right: 1rem;
top: 1rem;
background-color: transparent;
border-radius: 50px;
border: 5px solid transparent;
width: 20px;
height: 20px;
transition: all 0.3s ease;
}
.signup_type .accordion-item .accordion-button[aria-expanded="true"] .rrr {
border-color: var(--black);
transition: all 0.3s ease;
}
.btn-primary:active ,
.btn-primary:focus {
background-color: #000 !important;
}
.signuppromp {
background-color: #F5F5FA;
width: 100%;
/* position: fixed;
left: 0;
bottom: 0; */
width: 100%;
color: #8083A3;
text-align: center;
padding: 1.5rem 1rem;
z-index: 10;
border-radius: 10px;
margin-bottom: 2rem;
}
.signuppromp a {
color: #8083A3;
}
body.gotOverlay:before {
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 11;
pointer-events: none;
overflow: hidden;
}
.so_wrap .so_wrap_title {
flex-grow: 1;
background-color: #FAFAFA;
padding: 1rem 50px 0;
}
@media screen and (min-width: 768px) {
.so_wrap .so_wrap_title {
height: 40px;
}
}
.so_wrap .so_wrap_title .btn-close {
position: absolute;
top: 0.65rem;
right: 50px;
}
.ruler-one {
border-top-color: #E2E8F0;
opacity: 1;
}
.currencySelection .select2-container {
width: 100% !important;
}
.currencySelection .select2-container--default .select2-selection--single {
height: auto;
border-radius: 0.375rem;
border-color: var(--border-color-one);
}
.currencySelection .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 32px;
}
.currencySelection .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 50px;
width: 46px;
}
.secretKey.secretKey2 .form-control ,
.secretKey.secretKey2 .input-group-text {
/* pointer-events: none; */
background-color: transparent;
border: 0;
padding: 0;
}
.secretKey.secretKey2 .secretKeyBadge {
top: -1rem;
}
.offcanvas.offcanvas-end.orderDetails {
width: 600px;
max-width: 100%;
}
.stpButtonsWrap {
margin: 1.25rem auto;
width: 640px;
max-width: calc(100% - 2rem);
}
.steps_list {
display: flex;
flex-direction: column;
border-bottom: 0;
}
.steps_list li.stepCompleted figure span {
display: none;
}
.steps_list li.stepCompleted figure {
border: 0;
background: url(../images/check-green.png) no-repeat center center;
background-size: 100% 100%;
}
.steps_list li.stepCurrent figure {
background-color: #ededed;
}
.steps_list li.stepCurrent h6 {
color: var(--black);
}
.signupRadio {
position: relative;
padding: 0;
}
.signupRadio .form-check-input {
position: absolute;
right: 1rem;
top: 1rem;
}
.signupRadio .form-check-label {
background-color: #F7F9FB;
margin: 0;
width: 100%;
padding: 1.25rem 2rem 1.25rem 1.5rem;
display: flex;
align-items: start;
gap: 1rem;
border-radius: 10px;
}
.signupRadio .form-check-label figure {
margin: 4px 0 0 0;
}
.signupRadio .form-check-input:checked + label {
box-shadow: 0 0 0 3px #000;
}
.signupRadio .form-check-input:checked + label .text-gray {
color: #949597 !important;
}
.datepicker .form-control {
padding: 0.85rem 1rem;
}
/*KYC Steps Progress*/
.steps_list {
margin: 0 0 3rem;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
position: relative;
max-width: 700px;
margin: 0 auto 3rem;
}
.steps_list:after {
content: '';
position: absolute;
background: #DBE4E0;
height: 2px;
width: 100%;
top: 15px;
left: 0;
z-index: 0;
}
.steps_list li {
position: relative;
z-index: 1;
width: 100px;
text-align: center;
}
.steps_list li span {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #DBE4E0;
margin: 0 auto 10px;
color: #747A80;
font-weight: 600;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.steps_list li.active span {
background: #000;
color: #fff;
}
.steps_list li.completed span {
background: #000;
color: #fff;
}
.steps_list li.completed span:after {
content: '✓';
display: block;
}
.steps_list li.completed span i {
display: none;
}
.steps_list li p {
font-size: 12px;
color: #747A80;
margin: 0;
font-weight: 500;
}
.steps_list li.active p,
.steps_list li.completed p {
color: #000;
font-weight: 600;
}
/* Remove old progress bar styles */
.kyc_progress_wrap {
display: none;
}
/* KYC Steps Progress Bar */
.kyc-steps-list {
margin: 0 0 3rem;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
position: relative;
max-width: 700px;
margin: 0 auto 3rem;
}
.kyc-steps-list:after {
content: '';
position: absolute;
background: #DBE4E0;
height: 2px;
width: 100%;
top: 15px;
left: 0;
z-index: 0;
}
.kyc-steps-list li {
position: relative;
z-index: 1;
width: 100px;
text-align: center;
}
.kyc-steps-list li span {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #DBE4E0;
margin: 0 auto 10px;
color: #747A80;
font-weight: 600;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.kyc-steps-list li.active span {
background: #000;
color: #fff;
}
.kyc-steps-list li.completed span {
background: #000;
color: #fff;
}
.kyc-steps-list li.completed span:after {
content: '✓';
display: block;
}
.kyc-steps-list li.completed span i {
display: none;
}
.kyc-steps-list li p {
font-size: 12px;
color: #747A80;
margin: 0;
font-weight: 500;
}
.kyc-steps-list li.active p,
.kyc-steps-list li.completed p {
color: #000;
font-weight: 600;
}
/* Remove old progress bar styles */
.kyc_progress_wrap,
.steps_list {
display: none !important;
}
/* KYC Step Form Styles */
.phone-input-container {
position: relative;
}
.phone-field {
height: 50px;
font-size: 15px;
padding-right: 130px;
border: 2px solid #E5E7EB;
border-radius: 8px;
transition: all 0.3s ease;
}
.phone-field:focus {
border-color: #000;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}
.verify-btn {
position: absolute;
right: 5px;
top: 5px;
height: 40px;
min-width: 100px;
border-radius: 6px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.verified-badge {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: #10B981;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
}
.verified-badge i {
font-size: 18px;
}
.verification-status {
display: flex;
align-items: center;
gap: 6px;
color: #6B7280;
font-size: 13px;
}
.verification-status i {
font-size: 16px;
}
.otp-section {
background: #F9FAFB;
border-radius: 8px;
padding: 20px;
margin-top: 15px;
}
.otp-field {
height: 50px;
font-size: 18px;
letter-spacing: 4px;
font-weight: 600;
padding-right: 130px;
border: 2px solid #E5E7EB;
border-radius: 8px;
transition: all 0.3s ease;
}
.otp-field:focus {
border-color: #000;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}
.otp-message {
display: flex;
align-items: center;
gap: 6px;
color: #6B7280;
font-size: 13px;
}
.otp-message i {
font-size: 16px;
}
/* IntlTel Input Customization */
.iti {
width: 100%;
}
.iti__flag-container {
padding: 2px;
}
.iti__selected-flag {
background-color: #F9FAFB !important;
border-radius: 6px 0 0 6px;
}
.iti--separate-dial-code .iti__selected-flag {
background-color: #F9FAFB !important;
border-right: 2px solid #E5E7EB;
}
.iti__country-list {
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
margin-top: 4px;
}
.iti__country {
padding: 10px 12px;
display: flex;
align-items: center;
}
.iti__country.iti__highlight {
background-color: #F3F4F6;
}
/* Loading Animation */
.btn-loader {
position: absolute;
}
.btn-text {
transition: all 0.3s ease;
}
.verify-btn:disabled {
background-color: #E5E7EB;
border-color: #E5E7EB;
cursor: not-allowed;
}
.verify-btn:disabled .btn-text {
opacity: 0;
}
.verify-btn:disabled .btn-loader {
display: block !important;
}
/* Verification Alert Styling */
.verification-alert {
background-color: #FEF2F2;
border: 1px solid #FEE2E2;
border-radius: 8px;
padding: 12px 16px;
}
.verification-alert .alert-content {
display: flex;
align-items: center;
gap: 10px;
}
.verification-alert i {
color: #DC2626;
font-size: 16px;
}
.verification-alert span {
color: #991B1B;
font-size: 14px;
font-weight: 500;
}
/* Other Details Section Styling */
.fancy_divider {
position: relative;
text-align: center;
border-bottom: 1px solid #E5E7EB;
margin: 40px 0;
}
.fancy_divider .btn {
position: relative;
top: 50%;
transform: translateY(-50%);
padding: 8px 24px;
border-radius: 20px;
font-weight: 600;
color: #4B5563;
background-color: #F3F4F6;
border: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* Custom Select Styling */
.custom-select {
height: 50px;
border: 2px solid #E5E7EB;
border-radius: 8px;
padding: 0 16px;
font-size: 15px;
background-color: white;
transition: all 0.3s ease;
}
.custom-select:focus {
border-color: #000;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}
.form-label {
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.custom-select {
height: 45px;
font-size: 14px;
}
.fancy_divider .btn {
font-size: 12px;
padding: 6px 18px;
}
}
/* Action Bar Styling */
.action-bar {
background: #FFFFFF;
border-top: 1px solid #E5E7EB;
padding: 20px;
margin-top: 2rem;
box-shadow: 0 -10px 15px -3px rgba(0, 0, 0, 0.05);
border-radius: 16px;
position: relative;
overflow: hidden;
}
.action-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #000000, #1a1a1a);
}
.action-bar-content {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.step-info {
display: flex;
flex-direction: column;
gap: 6px;
position: relative;
padding-left: 20px;
}
.step-info::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 75%;
background: linear-gradient(180deg, #000000, #1a1a1a);
border-radius: 4px;
}
.step-count {
font-size: 14px;
font-weight: 600;
color: #6B7280;
display: flex;
align-items: center;
gap: 8px;
}
.step-count::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background: #000;
border-radius: 50%;
}
.step-title {
font-size: 18px;
font-weight: 700;
color: #111827;
letter-spacing: -0.02em;
}
.action-button {
min-width: 180px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 15px;
font-weight: 600;
border-radius: 12px;
transition: all 0.3s ease;
background: linear-gradient(135deg, #000000, #1a1a1a);
border: none;
color: white;
position: relative;
overflow: hidden;
}
.action-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
}
.action-button:hover::before {
left: 100%;
}
.action-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg, #1a1a1a, #000000);
}
.action-button i {
transition: transform 0.3s ease;
font-size: 16px;
}
.action-button:hover i {
transform: translateX(4px);
}
.action-button:disabled {
background: #E5E7EB;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.action-button:disabled::before {
display: none;
}
@media (max-width: 768px) {
.action-bar {
padding: 16px;
margin-top: 1.5rem;
}
.step-info {
padding-left: 15px;
}
.step-count {
font-size: 13px;
}
.step-title {
font-size: 16px;
}
.action-button {
min-width: 150px;
height: 48px;
font-size: 14px;
}
}