/* Josh's Custom CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); :root{ --primary-color:#161768; --primary-color2:#16176871; --bg-primary:#e5d7f3; --abstract-bg-primary:#e5d7f324; --secondary-color:#372181; --secondary-color-2:#8c96a9; --secondary-color-3:#3721814a; --tertiary-color:#030318; --quatenary-color:#e9e9ea1a; --quatenary-color2:#e9e9ea3a; --border-color-1:#919191; --icon-bg:#9191912a; --text-color:#212427; --text-secondary:#919191; --border-light:#b8b8b8bb; --border-light-2:#b8b8b86d; --danger-1:#bc0a0a; --danger-1-light:#bc0a0a4d; --disabled-color:#2c2c2c7b; --overlay-bg-1:#49494932; --overlay-bg-2:#272727a7; --success1:#30990d; --success1-light:#30990d31; --box-shadow1: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12); --box-shadow2: 0 1px 1px rgba(0,0,0,0.12), 0 1px 1px rgba(0, 0, 0, 0.06); } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; font-family: "Poppins", sans-serif; /* background-color: var(--bg-primary); */ /* background-color: rgba(222, 222, 222, 0.556); */ color: var(--text-color); } /* 1️⃣ Chrome, Edge, Safari */ ::-webkit-scrollbar { display: none; } /* 2️⃣ Firefox */ * { scrollbar-width: none; /* Hides scrollbar */ -ms-overflow-style: none; /* IE 10+ */ } /* 3️⃣ Apply to or container */ html, body { overflow: -moz-scrollbars-none; /* Older Firefox */ scrollbar-width: none; -ms-overflow-style: none; overflow: auto; /* Still allow scrolling */ } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } select { -webkit-appearance: none; -moz-appearance: none; } /* For IE10 */ select::-ms-expand { display: none; } .custom-select{ position: relative; } .custom-select select{ color: var(--placeholder-color); } .custom-select svg{ position: absolute; top: 18; right: 15; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } p { text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } #root, #__next { isolation: isolate; } /* Slider */ .switch { position: relative; display: inline-block; width: 48px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 8px; bottom: 3px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: var(--success1); } input:focus + .slider { box-shadow: 0 0 1px var(--success1); } input:checked + .slider:before { -webkit-transform: translateX(18px); -ms-transform: translateX(18px); transform: translateX(18px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } .flex-switch{ display: flex; justify-content: space-between; align-items: center; } /* End */ /* Bottom Navs */ .bottom-navs{ /* height: 60px; */ width: 100%; max-width: 480px; position: fixed; padding: 15px; bottom: 0; background-color: var(--primary-color); z-index: 999; display: flex; align-items: center; justify-content: space-around; } .bottom-navs a{ text-decoration: none; } .bottom-navs .nav-item{ width: 72px; height: 44px; /* background-color: #919191; */ border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .bottom-navs .nav-item p{ font-size: 0.55em; color: #FFF; margin-top: 5px; } /* Error Feedback */ .validation-container{ margin-top: 6px; display: none; } .validation-container p, .validationError{ color: var(--danger-1); font-size: 0.7em; } .error-feedback{ display: none; } .transaction-error{ width: 90%; margin: 20px auto; border-radius: 12px; background-color: var(--danger-1); /* background-color: #b70c15d8; */ color: white; display: flex; /* justify-content: center; */ align-items: center; padding: 10px 5px; } .transaction-error svg, .transaction-success svg{ flex-shrink: 0; margin-right: 5px; } .transaction-error svg path, .transaction-success svg path{ stroke: white; } .transaction-error p, .transaction-success p{ font-size: 0.9em; font-weight: 400; } .transaction-success p{ font-size: 0.8em; } .transaction-success{ width: 90%; margin: 20px auto; border-radius: 12px; background-color: var(--success1); color: white; display: flex; /* justify-content: center; */ align-items: center; padding: 10px 5px; } /* End */ /* Dashboard Image Slider */ .marquee--3 { --marquee-item-width: 280px; --marquee-item-height: 98.82px; --marquee-duration: 32s; --marquee-items: 3; } .marquee--3 .marquee__item:nth-of-type(1) { --marquee-item-index: 1; } .marquee--3 .marquee__item:nth-of-type(2) { --marquee-item-index: 2; } .marquee--3 .marquee__item:nth-of-type(3) { --marquee-item-index: 3; } .marquee { --marquee-max-width: 90vw; display: flex; block-size: var(--marquee-item-height); max-inline-size: var(--marquee-max-width); overflow-x: hidden; position: relative; /* mask-image: linear-gradient( to right, hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0) ); */ margin: 20px; } .marquee__item { --marquee-item-offset: calc(min( calc(var(--marquee-item-width) * var(--marquee-items)), calc(100% + var(--marquee-item-width)) ) - 20px); --marquee-delay: calc(var(--marquee-duration) / var(--marquee-items) * (var(--marquee-items) - var(--marquee-item-index)) * -1); position: absolute; inset-inline-start: var(--marquee-item-offset); transform: translateX(-30%); animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite; } @keyframes go { to { inset-inline-start: calc(var(--marquee-item-width) * -1); } } .primary-btn{ width: 100%; margin-top: 30px; padding: 12px; border-radius: 8px; background-color: var(--primary-color); color: #FFF; font-size: 1em; font-weight: 500; border: none; } .primary-btn.disabled{ background-color: var(--disabled-color); color: #FFF; } .secondary-btn-2{ width: 100%; display: block; margin: 0 auto; margin-top: 30px !important; background-color: #2a2828f1; color: var(--primary-color); font-size: 1em; padding: 15px 15px; border-radius: 12px; text-align: center; } /* LOADER END */ .loader-overlay{ width: 100%; max-width: 480px; height: 100%; position: fixed; top: 0; /* left: 0; */ background-color: var(--overlay-bg-1); display: none; justify-content: center; align-items: center; z-index: 999999999999; } .loader-overlay .container{ background-color: #FFF; width: fit-content; padding: 30px; border-radius: 8px; } .loader { width: 17px; aspect-ratio: 1; border-radius: 50%; background: #000; display: grid; animation: l22-0 2s infinite linear; } .loader:before, .loader:after { content: ""; grid-area: 1/1; margin: 15%; border-radius: 50%; background: inherit; transform: rotate(0deg) translate(150%); animation: l22 1s infinite; } .loader:after { animation-delay: -.5s } @keyframes l22-0 { 100% {transform: rotate(1turn)} } @keyframes l22 { 100% {transform: rotate(1turn) translate(150%)} } .brand-logo{ width: 64px; height: 64px; margin: 0 auto; margin-bottom: 40px; } .input-validation{ color: var(--danger-1); font-size: 0.7em; } /* Main CSS */ .main-container{ width: 100%; height: 100%; max-width: 480px; background-color: rgba(222, 222, 222, 0.556); position: relative; margin: 0 auto; } .main-container.white-bg{ background-color: #FFF; } /* Auth */ .main-container .auth-form{ padding-top: 60px; } .main-container .auth-form.login{ padding-top: 120px; } .main-container .auth-form h3{ font-size: 2em; text-align: center; margin-bottom: 10px; } .main-container .auth-form .tag{ font-size: 0.8em; color: var(--text-secondary); text-align: center; margin-bottom: 20px; } .main-container .auth-form form{ width: 80%; margin: 0 auto; } .main-container form .input-group{ margin-bottom: 20px; } .main-container form .input-group .icon-input{ position: relative; } .main-container form .input-group .icon-input svg{ position: absolute; top: 16px; } .main-container form .input-group .icon-input .icon-left{ left: 6px; } .main-container form .input-group .icon-input .icon-right{ right: 14px; } .main-container form .input-group label{ display: block; margin-bottom: 5px; display: none; } .main-container form input, .main-container form select{ width: 100%; padding: 12px 30px; border: 1px solid var(--text-secondary); border-radius: 8px; outline: none; } .main-container form .auth-prompt{ margin-top: 24px; text-align: center; font-size: 0.9em; } .main-container form .auth-prompt a{ text-decoration: none; color: var(--primary-color); font-weight: 600; } .main-container form .forgot-password-propmt{ font-size: 0.9em; text-align: right; } .main-container form .forgot-password-propmt a{ text-decoration: none; color: inherit; display: block; } /* Feedback */ .main-container .feedback-container{ padding: 0 30px; padding-top: 120px; } .main-container .feedback-container .img-container{ width: 160px; height: 160px; margin: 0 auto; } .main-container .feedback-container h3{ font-size: 1.4em; text-align: center; line-height: 1.4; margin-top: 40px; font-weight: 600; } .main-container .feedback-container .tag{ font-size: 1em; color: var(--text-secondary); line-height: 1.3; text-align: center; margin-top: 20px; } .main-container .feedback-container button{ margin-top: 60px; } .main-container .feedback-container button:hover{ cursor: pointer; } .main-container .top-bar{ padding: 20px; } .main-container .top-bar .icon-container{ width: 36px; height: 36px; border-radius: 50%; background-color: #FFF; display: flex; justify-content: center; align-items: center; } /* Dashboard */ .main-container .hero{ width: 100%; background-color: var(--primary-color); border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding: 40px 20px; padding-bottom: 24px; color: #FFF; position: fixed; z-index: 10; } .main-container .hero .header{ font-size: 1.1em; font-weight: 600; } .main-container .hero .filter-container{ margin-top: 20px; display: flex; align-items: center; background-color: var(--abstract-bg-primary); padding: 18px 20px; border-radius: 12px; } .main-container .hero .filter-container p{ font-size: 0.9em; margin-right: 12px; } .main-container .hero .filter-container select{ padding: 2px !important; background-color: transparent; border: none; color: #FFF; width: fit-content !important; border-bottom: .3px solid var(--text-secondary); border-radius: 0; } .main-container .hero .user-data{ display: flex; justify-content: space-between; align-items: center; } .main-container .hero .user-data .left{ display: flex; align-items: center; } .main-container .hero .user-data .left .img-container{ width: 36px; height: 36px; border-radius: 50%; margin-right: 5px; background-color: var(--quatenary-color); } .main-container .hero .user-data .left p{ font-size: 0.6em; color: whitesmoke; line-height: 1.4; } .main-container .hero .user-data .left h3{ font-size: 0.7em; font-weight: 400; color: whitesmoke; } .main-container .hero .user-data .icon-container{ width: 32px; height: 32px; border-radius: 50%; background-color: var(--quatenary-color); display: flex; justify-content: center; align-items: center; } .main-container .hero .wallet-data{ width: 100%; padding: 15px; padding-bottom: 24px; margin-top: 20px; background-color: var(--quatenary-color); border-radius: 12px; } .main-container .hero .wallet-data .balance-info{ display: flex; justify-content: space-between; align-items: center; } .main-container .hero .wallet-data .balance-info .left .header{ font-size: 0.6em; font-weight: 300; opacity: 0.7; line-height: 1.3; /* font-weight: 500; */ } .main-container .hero .wallet-data .balance-info .left .balance{ font-size: 0.9em; font-weight: 600; } .main-container .hero .wallet-data .balance-info .cta { position: relative; display: inline-block; background-color: #FFF; color: var(--primary-color); text-align: center; padding: 7px 20px; border-radius: 8px; text-decoration: none; font-size: 0.7em; font-weight: 500; box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); overflow: hidden; animation: pulseFloat 3s ease-in-out infinite; transition: all 0.3s ease; } /* Pulse + Float Motion */ @keyframes pulseFloat { 0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } 50% { transform: translateY(-3px) scale(1.05); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); } } /* Shimmer Light Sweep */ .main-container .hero .wallet-data .balance-info .cta::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.6), transparent ); animation: shine 4s infinite; } @keyframes shine { 0% { left: -75%; } 100% { left: 125%; } } .main-container .hero .wallet-data .balance-info .right p{ font-size: 0.6em; margin-right: 12px; } .main-container .hero .wallet-data .bank-details .header{ display: flex; align-items: center; } .main-container .hero .wallet-data .bank-details .header p{ font-size: 0.6em; margin-right: 20px; font-weight: 400; opacity: 0.7; } .main-container .hero .wallet-data .bank-details{ margin-top: 10px; } .main-container .hero .wallet-data .bank-details .header select{ background-color: var(--quatenary-color2); color: whitesmoke; padding: 8px; border: none; border-radius: 24px; font-size: 0.5em; } .main-container .hero .wallet-data .bank-details .account-info{ display: flex; align-items: center; /* margin-top: 10px; */ padding-top: 3px; } .main-container .hero .wallet-data .bank-details .account-info p{ font-size: 0.7em; line-height: 1.2; margin: 0; margin-right: 8px; opacity: 0.9; } .main-container .hero .wallet-data .bank-details .account-info svg{ opacity: 0.8; } .main-container .dashboard-content{ padding-top: 260px; padding-bottom:100px; overflow-y: scroll; background-color: rgba(222, 222, 222, 0.556); } .main-container .services{ padding: 16px; } .main-container .services .header{ font-size: 0.8em; font-weight: 500; } .main-container .services .nav-container{ margin-top: 15px; display: grid; grid-template-columns: repeat(4,1fr); /* row-gap: 15px; */ } .main-container .services .nav-container a{ color: var(--text-color); text-decoration: none; } .main-container .services .nav-container .item{ width: 72px; height: 72px; margin: 0 auto; /* background-color: #21242724; */ } .main-container .services .nav-container .item .icon-container{ width: 42px; height: 42px; display: flex; justify-content: center; align-items: center; margin: 0 auto; } .main-container .services .nav-container .item p{ font-size: 0.7em; font-weight: 500; text-align: center; } .main-container .transactions{ padding: 16px; } /* .main-container .transactions.history{ margin-top: 20px; } */ .main-container .transactions .header{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .main-container .transactions .header h3{ font-size: 0.8em; font-weight: 500; } .main-container .transactions .header a{ font-size: 0.8em; font-weight: 500; color: var(--secondary-color); } .main-container .transactions .record{ display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #FFF; border-radius: 10px; /* box-shadow: var(--box-shadow2); */ margin-bottom: 16px; } .main-container .transactions .record .left{ display: flex; align-items: center; } .main-container .transactions .record .left .icon-container{ width: 32px; height: 32px; border-radius: 50%; margin-right: 6px; display: flex; justify-content: center; align-items: center; } .main-container .transactions .record.credit .left .icon-container{ background-color: var(--success1-light); } .main-container .transactions .record.debit .left .icon-container{ background-color: var(--danger-1-light); } .main-container .transactions .record .left .detail .transaction-type{ font-size: 0.8em; font-weight: 500; margin-bottom: 5px; } .main-container .transactions .record .left .detail .date{ font-size: 0.6em; color: var(--text-secondary); } .main-container .transactions .record .value{ font-size: 0.8em; font-weight: 500; } /* Transaction Page */ .main-container .transaction-form{ margin-top: 20px; padding: 15px 30px; position: relative; } .main-container .transaction-form a{ text-decoration: none; } .main-container .transaction-form .tag{ font-size: 0.8em; margin-bottom: 15px; padding-left: 10px; } .main-container .transaction-form label{ font-size: 0.9em; font-weight: 500; } .main-container .transaction-form .operator-container{ position: relative; z-index: 10; } .main-container .transaction-form .network-selector{ width: 100%; /* height: 50px; */ border-radius: 12px; /* background-color: var(--quatenary-color1); */ background-color: #FFF; /* background-color: var(--border-light); */ margin-top: 8px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; padding: 16px 15px ; font-size: 0.9em; } .main-container .transaction-form .network-selector .network-group{ display: flex; align-items: center; } .main-container .transaction-form .network-selector .icon-box, .main-container .transaction-form .operator-container .icon-box{ width: 24px; height: 24px; background-color: white; border-radius: 8px; overflow: hidden; margin-right: 10px; } .main-container .transaction-form .network-selector .network-group .icon-box{ display: none; } .main-container .transaction-form .network-selector p{ font-size: 0.9em; font-weight: 500; color: var(--tertiary-color); opacity: 0.6; /* color: var(--overlay-bg-1); */ } .main-container .transaction-form input, .main-container .transaction-form select, .form-container input, .form-container select{ width: 100%; /* height: 50px; */ border: none; /* background-color: var(--quatenary-color1); */ background-color: #FFF; margin-bottom: 12px; padding: 14px 15px; border-radius: 12px; padding-left: 15px; } #changePasswordModal .form-container input, #changePasswordModal .form-container input{ background-color: var(--border-light-2); } .main-container .transaction-form input::placeholder{ font-size: 0.9em; font-weight: 500; color: var(--tertiary-color); } .transaction-form form input:focus, .transaction-form form select:focus { outline: 1px solid var(--primary-color); } /* TODO Select option Style */ .main-container .transaction-form select{ font-size: 0.9em; /* color: var(--text-color2); */ } .main-container .transaction-form .operator-container a{ color: inherit; } .main-container .transaction-form .operator-container .dropdown{ width: 100%; background-color: white; position: absolute; left: 0; top: 52; border-radius: 4px; padding: 10px 15px; box-shadow: var(--box-shadow1); display: none; } .main-container .transaction-form .operator-container .dropdown.bills{ height: 400px; overflow-y: scroll; } .main-container .transaction-form .operator-container .dropdown a{ color: inherit; } .main-container .transaction-form .operator-container .dropdown .item{ display: flex; padding: 10px 0; border-bottom: 1px solid var(--light-bg1); } .main-container .transaction-form .operator-container .dropdown .item p{ font-weight: 500; } .main-container .transaction-form .operator-container .dropdown .item small{ font-size: 0.6em; font-weight: 300; margin-top: 5px; display: block; } .transaction-form form .input-group{ position: relative; margin-bottom: 12px ; } .transaction-form form .input-group input{ margin-bottom: 0; } .transaction-form form .input-group.left-float input{ padding-left: 54px; } .transaction-form form .input-group.left-float .tel-prefix{ position: absolute; top: 19; left: 15; font-size: 0.9em; color: var(--success1); } .transaction-form form .input-group.right-float{ position: relative; } .transaction-form form .input-group.right-float input{ padding-right: 50px; } .transaction-form form .input-group.right-float svg{ position: absolute; top: 20; right: 10; } .transaction-form form .input-group.right-float svg path, .transaction-form form .input-group.right-float svg polygon{ fill: var(--tertiary-color); } .transaction-form form .input-group.icon input{ padding-left: 38px !important; } .transaction-form form .input-group.icon svg{ position: absolute; left: 8; top: 16; } .transaction-form .flex-switch p{ font-size: 0.8em; } .transaction-form .primary-btn{ padding: 13px; } /*Popover */ .popover { display: none; justify-content: center; align-items: center; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* background-color: rgba(0,0,0,0.4); */ background-color: #FFF; z-index: 99999999; } .popover .modal-content { border-radius: 10px; position: relative; /* background-color: var(--container-bg); */ margin: auto; padding: 10px; padding-bottom: 20px; /* border: 1px solid #888; */ width: 60%; max-width: 600px; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; } @-webkit-keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } @keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } .popover .modal-content .title{ text-align: center; font-size: 1em; font-weight: 500; margin-bottom: 20px; } .popover .modal-content .feedback{ text-align: center; margin-top: 0; } .popover .modal-content .feedback p{ font-size: .9em; font-weight: 700; line-height: 1.2; } .popover .modal-content .feedback small{ font-size: 0.9em; line-height: 1.2; color: var(--disabled-color); margin-top: 20px; display: block; } .popover .modal-body { padding:5px 10px; background-color: #FFF; } .popover .modal-body .flex-data{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .popover .modal-body .flex-data .data-title{ font-size: 0.6em; } .popover .modal-body .flex-data .data-info{ font-size: 0.7em; font-weight: 500; } .popover .modal-body .flex-data .info-flex{ display: flex; align-items: center; } .popover .modal-body .flex-data .info-flex .img-container{ width: 32px; height: 32px; border-radius: 8px; overflow: hidden; display: flex; justify-content: center; align-items: center; margin-right: 5px; } .popover .modal-body .flex-data .info-flex .img-container img{ width: 32px; } .popover .modal-body hr{ margin: 30px auto; } .popover .button-group{ margin-top: 60px; } .popover button{ padding: 12px; border-radius: 8px; } .popover .secondary-btn-2{ color: #FFF; } .popover .fcontainer{ height: 80%; width: 95%; margin: 0 auto; padding: 0 20px; /* background-color: #11A861; */ } /* .popover .fcontainer .img-container{ width: 96px; height: 96px; margin: 0 auto; } */ .popover .fcontainer .img-container { width: 96px; height: 96px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } .popover .fcontainer .img-container img { width: 100%; height: 100%; border-radius: 50%; transform: scale(0); opacity: 0; animation: popInGlow 1s cubic-bezier(0.25, 1.5, 0.5, 1) forwards, softPulse 3s ease-in-out 1s infinite; /* starts pulsing after 1s */ } /* Pop-in + Glow animation */ @keyframes popInGlow { 0% { transform: scale(0); opacity: 0; filter: drop-shadow(0 0 0 var(--primary-color)); } 60% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 8px var(--primary-color)); } 80% { transform: scale(0.95); filter: drop-shadow(0 0 15px var(--primary-color)); } 100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 0 var(--primary-color)); } } /* Gentle continuous pulse effect */ @keyframes softPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 var(--primary-color)); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 6px var(--primary-color)); } } .popover .fcontainer .header{ font-size: 0.9em; font-weight: 600; text-align: center; margin-top: 20px; } .popover .fcontainer hr{ margin: 20px auto; border: 0.2px solid gray; } .popover .fcontainer .tran-data{ padding-top: 5px; padding-bottom: 5px; } .popover .fcontainer .tran-data .flex-data{ display: flex; justify-content: space-between; align-items: end; margin-bottom: 12px; } .popover .fcontainer .tran-data .flex-data .data-title{ font-size: 0.8em; font-weight: 500; } .popover .fcontainer .tran-data .flex-data .data-info{ font-size: 0.8em; } .popover .fcontainer .button-group{ margin-top: 100px; } /* Popover responsiveness */ @media screen and (max-width:600px){ /* .popover .modal-body { height: 400px; } */ .popover .modal-content { width: 80%; } } /* Popover end */ /* Slide up Modal */ .setting-modal { color: inherit; display: none; /* Hidden by default */ position: fixed; /* Stay in place */ left: 0; top: 0; width: 100%; /* Full width */ max-width: 480px; height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ -webkit-animation-name: fadeIn; /* Fade in the background */ -webkit-animation-duration: 0.4s; animation-name: fadeIn; animation-duration: 0.4s; z-index: 999999; } .setting-modal .top-border{ width:60px; margin-bottom: 10px; } .setting-modal .top-border hr{ border: 3px solid gray; } /* --primary-color:#161768; --primary-color2:#16176871; --bg-primary:#e5d7f3; --abstract-bg-primary:#e5d7f324; --secondary-color:#372181; --secondary-color-2:#8c96a9; */ .setting-modal .content{ position: fixed; bottom: 0; background-color: #16176836; color: #FFF; width: 100%; max-width: 480px; /* min-height: 300px; */ -webkit-animation-name: slideIn; -webkit-animation-duration: 0.4s; animation-name: slideIn; animation-duration: 0.4s; border-top-left-radius: 24px; border-top-right-radius: 24px; padding:20px 20px 50px 20px; } .setting-modal .content .modal-indicator{ background-color: #ffffff; height: 4px; width: 60px; margin: 0 auto; transform: translateY(-30px); border-radius: 16px; } .setting-modal .content .header{ text-align: center; font-size: 1em; margin-bottom: 5px; } .setting-modal .content .tag{ text-align: center; font-size: 0.8em; line-height: 1.3; } /* Slide up end */ /* Wallet Page */ .wallet-menu{ padding: 20px; } .wallet-menu .wallet-nav{ font-size: 0.8em; padding: 10px 20px; background-color: var(--primary-color2); border: none; color: #FFF; } .wallet-menu .wallet-nav.active{ background-color: var(--primary-color); } .wallet-data-container{ width: 90%; margin: 0 auto; background-color: var(--secondary-color-3); padding: 20px; font-size: 0.8em; } /* Support Page */ .main-container .support-container{ width: 90%; margin: 0 auto; padding-top: 80px; } .main-container .support-container .option{ padding: 20px; background-color: #29292919; border-radius: 8px; } .main-container .support-container .option img{ width: 30%; margin: 0 auto; } .main-container .support-container .option .title{ font-size: 0.9em; font-weight: 500; text-align: center; margin: 12px 0; } .main-container .support-container .option .content{ font-size: 0.8em; text-align: justify; } .main-container .support-container .option a{ display: inline-block; width: 100%; text-align: center; text-decoration: none; }