/******************** Start :: Variables ******************************** */
:root {
--rei-dev-color: #CCCCCC;
--rei-test-color: #E4D00A;
--rei-input-background: #BDF0FE;
--custom-0A0A0A: #0A0A0A;
--custom-2181FA: #2181FA;
--custom-FDFDFD: #FDFDFD;
--custom-EDEDED: #EDEDED;
--custom-A3A3A3: #A3A3A3;
--custom-DBDBDB: #DBDBDB;
--custom-3B4752: #3B4752;
--custom-333333: #333333;
--custom-F5F9FF: #F5F9FF;
--custom-696F79: #696F79;
--custom-737373: #737373;
--custom-F1F1F1: #F1F1F1;
--custom-EBF4FF: #EBF4FF;
--custom-F0F7FF: #F0F7FF;
--custom-00B800: #00B800;
--custom-FFFCEB: #FFFCEB;
--custom-252525: #252525;
--custom-FF0000: #FF0000;
--custom-EBFFEB: #EBFFEB;
--custom-7E8299: #7E8299;
--custom-F7F7F7: #F7F7F7;
--custom-94969C: #94969C;
--custom-A3A3A31A: #A3A3A31A;
--custom-F8F9FA: #F8F9FA;
/* Controls background of dashboard content */
--content-color: #EDF2FB;
--custom-011228: #011228;
--custom-CDE3FE: #CDE3FE;
--custom-2525251F: #2525251F;
--custom-596375: #596375;
--custom-F2F2F2: #F2F2F2;
--custom-404040: #404040;
--custom-FAFCFF: #FAFCFF;
--custom-1DAD05: #1DAD05;
--custom-6F6C90: #6F6C90;
--custom-D9DBE9: #D9DBE9;
--custom-170F49: #170F49;
--custom-D9D9D9: #D9D9D9;
--custom-DFE3E8: #DFE3E8;
--custom-212B36: #212B36;
--custom-919EAB: #919EAB;
--custom-595959: #595959;
--custom-E0E4EE: #E0E4EE;
--custom-25282D: #25282D;
--custom-F1F1F2: #F1F1F2;
--custom-EEFEEB: #EEFEEB;
--custom-F5F5F5: #F5F5F5;
--custom-111928: #111928;
--custom-BDD4F1: #BDD4F1;
--custom-FFB6AE: #FFB6AE;
--custom-FF99FF: #FF99FF;
--custom-F6CCFF: #F6CCFF;
--custom-FFFAE0: #FFFAE0;
--custom-FAFFFA: #FAFFFA;
--custom-FFFAFA: #FFFAFA;
--custom-rgba1: rgba(37, 37, 37, 0.08);
--custom-rgba2: rgba(37, 37, 37, 0.04);
--custom-rgba3: rgba(37, 37, 37, 0.08);
--custom-rgba4: rgba(22, 34, 51, 0.08);
--custom-rgba5: rgba(37, 37, 37, 0.16);
--custom-rgba6: rgba(37, 37, 37, 0.12);
--custom-rgba7: rgba(37, 37, 37, 0.32);
--custom-rgba8: rgba(255, 255, 255, 1);
--custom-rgba9: rgba(255, 255, 255, 0.8);
--custom-rgba10: rgba(255, 255, 255, 0.2);
--custom-rgba11: rgba(22, 34, 51, 0.08);
--custom-rgba12: rgba(33, 129, 250, 0.16);
--custom-rgba13: rgba(20, 76, 148, 0.0768);
--custom-rgba14: rgba(24, 39, 75, 0.1);
--custom-rgba15: rgba(24, 39, 75, 0.12);
--custom-rgba16: rgba(22, 34, 51, 0.08);
--mobile-padding: 16px;
}
/* ******************* End :: Variables ******************************** */
/******************** Start :: Main Styles ******************************** */
@font-face {
font-family: "SourceSans3-Regular";
src: url("/css/fonts/SourceSans3-Regular.ttf") format("truetype");
font-weight: 400;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "SourceSans3-Medium";
src: url("/css/fonts/SourceSans3-Medium.ttf") format("truetype");
font-weight: 500;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "SourceSans3-SemiBold";
src: url("/css/fonts/SourceSans3-SemiBold.ttf") format("truetype");
font-weight: 600;
font-display: swap;
font-style: normal;
}
@font-face {
font-family: "SourceSans3-Bold";
src: url("/css/fonts/SourceSans3-Bold.ttf") format("truetype");
font-weight: 700;
font-display: swap;
font-style: normal;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-family: "SourceSans3-Regular";
}
button {
border: none;
outline: none;
background-color: transparent;
}
.spinner-body {
position: relative;
top: 0;
right: 0;
height: 100dvh;
background-color: white;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 99999999999;
}
button,
a {
cursor: pointer;
outline: none;
transition: all 0.3s ease, transform 0.3s ease;
}
a {
text-decoration: none;
}
button:hover,
a:hover {
transform: scale(1.05);
}
.loader {
transform: rotateZ(45deg);
perspective: 1000px;
border-radius: 50%;
width: 48px;
height: 48px;
color: var(--custom-2181FA);
}
.loader:before,
.loader:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
border-radius: 50%;
transform: rotateX(70deg);
animation: 1s spin linear infinite;
}
.loader:after {
color: var(--custom-0A0A0A);
transform: rotateY(70deg);
animation-delay: .4s;
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotateZ(0deg);
}
100% {
transform: translate(-50%, -50%) rotateZ(360deg);
}
}
@keyframes rotateccw {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
@keyframes spin {
0%,
100% {
box-shadow: .2em 0px 0 0px currentcolor;
}
12% {
box-shadow: .2em .2em 0 0 currentcolor;
}
25% {
box-shadow: 0 .2em 0 0px currentcolor;
}
37% {
box-shadow: -.2em .2em 0 0 currentcolor;
}
50% {
box-shadow: -.2em 0 0 0 currentcolor;
}
62% {
box-shadow: -.2em -.2em 0 0 currentcolor;
}
75% {
box-shadow: 0px -.2em 0 0 currentcolor;
}
87% {
box-shadow: .2em -.2em 0 0 currentcolor;
}
}
.box {
opacity: 0;
transition: opacity 1s, transform 1s;
}
.box.visible-ani {
opacity: 1;
}
@keyframes animation1 {
from {
transform: translateY(50px);
}
to {
transform: translateY(0);
}
}
@keyframes animation2 {
from {
transform: translateX(-50px);
}
to {
transform: translateX(0);
}
}
@keyframes animation3 {
from {
transform: translateX(50px);
}
to {
transform: translateX(0);
}
}
@keyframes animation4 {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes animation5 {
from {
transform: translate(0, 50px);
}
to {
transform: translate(0, 0);
}
}
@keyframes animation6 {
from {
transform: translateY(-50px);
}
to {
transform: translateY(0);
}
}
.box.animation1.visible-ani {
animation: animation1 1s forwards;
}
.box.animation2.visible-ani {
animation: animation2 1s forwards;
}
.box.animation3.visible-ani {
animation: animation3 1s forwards;
}
.box.animation4.visible-ani {
animation: animation4 4s forwards;
}
.box.animation5.visible-ani {
animation: animation5 1s forwards;
}
.box.animation6.visible-ani {
animation: animation6 1s forwards;
}
/* ******************* End :: Main Styles ******************************** */
/******************** Start :: Images ******************************** */
.full_width_image {
width: calc(100%);
margin:auto;
}
.seventy_width_image {
width: calc(70%);
margin:auto;
}
.half_width_image {
width: calc(50%);
margin:auto;
}
.rei_img_dropdown {
width: 100%;
margin-right:24px;
}
.rei_img_dropdown option {
width:100%;
margin-right:24px;
}
/* ******************* End :: Images ******************************** */
/******************** Start :: Toggle ******************************** */
.toggle-input {
display: none;
}
.toggle-label {
display: block;
width: 24px;
height: 24px;
background: url('/svgs/rei20/icons/toggle-inactive.svg') no-repeat center/contain;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
.toggle-input:checked + .toggle-label {
background: url('/svgs/rei20/icons/toggle-active.svg') no-repeat center/contain;
}
/* ******************* End :: Toggle ******************************** */
/******************** Start :: Titles ******************************** */
.general_undertitle {
font-size: 14px;
font-family: "SourceSans3-Regular";
color: black;
margin-top: 12px;
margin-bottom: 8px;
}
.general_text {
font-size: 18px;
font-family: "SourceSans3-Regular";
color: black;
margin-bottom: 4px;
}
}
.nav-tle {
font-size: 14px;
font-family: "SourceSans3-Regular";
color: black;
text-transform: uppercase;
margin-top: 12px;
margin-bottom: 8px;
margin-left: 16px;
}
.sct-one-foot-pf-tle {
font-size: 16px;
font-family: "SourceSans3-SemiBold";
color: black;
transition: all 0.4s ease;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.dash-hd-tle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: black;
margin-bottom: 4px;
}
.dash-card-tle {
font-family: "SourceSans3-Regular";
font-size: 16px;
color: var(--custom-737373);
margin-bottom: 2px;
line-height: 25.6px;
}
.curre-rate-ind-tle {
font-family: "SourceSans3-Regular";
font-size: 28px;
color: var(--custom-00B800);
line-height: 44.28px;
}
.dash-card-foot-cont-tle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-737373);
}
.dash-card-cont-two-item-tle {
font-size: 20px;
color: black;
font-family: "SourceSans3-SemiBold";
margin-bottom: 8px;
text-align: center;
}
.lea-abt-inv-tle {
font-size: 16px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
}
.youtube-vid-tle {
font-size: 28px;
line-height: 44.8px;
color: black;
font-family: "SourceSans3-SemiBold";
margin-bottom: 12px;
}
.blog-card-tle,
.forum-card-tle {
font-family: "SourceSans3-SemiBold";
font-size: 16px;
color: var(--custom-252525);
}
.blog-card-lnk-tle,
.forum-card-lnk-tle {
font-size: 16px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-2181FA);
}
.comple-kyc-cont-tle {
font-size: 16px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
transition: all 0.4s ease;
white-space: nowrap;
}
.forum-comment-sect-tle {
font-size: 12px;
color: var(--custom-252525);
font-family: "SourceSans3-Regular";
}
.forum-pf-tle {
font-size: 12px;
color: var(--custom-252525);
}
.forum-pf-sect-one-tle {
font-size: 16px;
color: var(--custom-252525);
font-family: "SourceSans3-SemiBold";
}
.forum-com-desc-card-tle {
font-size: 16px;
font-family: "SourceSans3-SemiBold";
color: black;
margin-bottom: 8px;
box-sizing: border-box;
}
.forum-com-desc-card-foot-tle {
font-size: 14px;
font-family: "SourceSans3-Regular";
line-height: 22.4px;
color: var(--custom-252525);
}
.bottom-sheet-hd-tle {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: black;
}
.bottom-sheet-nav-tle-nav-tle {
text-transform: uppercase;
font-size: 12px;
font-family: "SourceSans3-Regular";
color: black;
margin-bottom: 4px;
}
.bottom-sheet-foot-pf-tle {
font-size: 14px;
font-family: "SourceSans3-SemiBold";
color: black;
}
.install-app-modal-tle {
font-size: 24px;
color: var(--custom-FDFDFD);
font-family: "SourceSans3-SemiBold";
margin-top: 12px;
line-height: 38.4px;
}
.push-notify-tle {
font-size: 24px;
color: black;
font-family: "SourceSans3-SemiBold";
margin-bottom: 4px;
margin-top: 35px;
}
.support-modal-hd-tle, .redemption-modal-hd-tle {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: black;
}
.logout-modal-tle {
color: black;
font-size: 24px;
font-family: "SourceSans3-SemiBold";
margin-bottom: 4px;
}
@media only screen and (max-width: 1210px) {
.comple-kyc-cont-tle {
font-size: 14px;
}
}
@media only screen and (max-width: 733px) {
.install-app-modal-tle {
font-size: 20px;
margin-top: 8px;
line-height: 32px;
}
.support-modal-hd-tle, .redemption-modal-hd-btn-tle {
font-size: 12px;
}
}
@media only screen and (max-width: 600px) {
.dash-hd-tle {
font-size: 12px;
}
.dash-card-tle {
font-size: 12px;
line-height: 19.2px;
}
.curre-rate-ind-tle {
font-size: 14px;
line-height: 22.4px;
}
.dash-card-foot-cont-tle {
font-size: 12px;
}
.dash-card-cont-two-item-tle {
font-size: 14px;
margin-bottom: 2px;
}
.lea-abt-inv-tle,
.lea-abt-inv-desc,
.lea-abt-inv-prof-tle,
.lea-abt-inv-prof-lnk-tle {
font-size: 12px;
}
.youtube-vid-tle {
font-size: 16px;
line-height: 25.6px;
}
.blog-card-tle,
.forum-card-tle {
font-size: 12px;
margin-bottom: 3px;
}
.blog-card-lnk-tle,
.forum-card-lnk-tle {
font-size: 14px;
}
.forum-pf-sect-one-tle {
font-size: 14px;
}
.forum-pf-tle {
font-size: 10px;
}
.forum-com-desc-card-tle {
font-size: 14px;
line-height: 22.4px;
}
.push-notify-tle {
font-size: 16px;
margin-top: 40px;
}
.logout-modal-tle {
font-size: 16px;
}
}
/* ******************* End :: Titles ******************************** */
/******************** Start :: Debug Styles ******************************** */
.debug_mode {
font-weight:bold;
border: 1px solid #FF0000;
border-radius:8px;
color:#FF0000;
padding:10px;
margin-top:8px;
}
/* ******************* End :: Debug Styles ******************************** */
/******************** Start :: Dashboard Styles ******************************** */
.sct-one {
width: 280px;
height: 100%;
background-color: white;
transition: width 0.4s ease;
padding: 0px 16px 16px 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-y: auto;
border-right: 1px solid var(--custom-EDEDED);
}
.sct-one-foot.add-pad {
padding-left: 7px;
}
.sct-one.mini {
width: 56px;
padding-left: 0px;
padding-right: 0px;
}
.sct-two {
height: 100%;
flex: 1;
overflow-y: scroll;
}
.dash-hd {
width: 100%;
position: sticky;
left: 0;
top: 0;
right: 0;
height: 86px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: white;
border-bottom: 1px solid var(--custom-EDEDED);
padding-left: 24px;
padding-right: 40px;
z-index: 99999;
}
.dash-logo-cont {
display: block;
width: 146.72px;
height: 48px;
transition: all 0.8s ease;
}
.dash-logo-cont.shrink-resize {
height: 30px;
width: 40px;
}
.dash-logo-cont>img {
height: 100%;
width: 100%;
}
.rsz-cont {
height: 24px;
width: 24px;
}
.rsz-con>img {
width: 100%;
height: 100%;
}
.nav-cont {
padding-bottom: 8px;
border-bottom: 1px solid var(--custom-EDEDED);
}
.sect-hd-cont {
display: flex;
flex-direction: row;
align-items: center;
height: 82px;
justify-content: space-between;
}
.sect-hd-cont.add-col {
flex-direction: column;
height: 70px;
margin-top: 16px;
margin-bottom: 59px;
}
.sct-one-foot {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.sct-one-foot-sct-one {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.sct-one-pf-img {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
border-radius: 100%;
border: 1px solid var(--custom-2181FA);
overflow: hidden;
flex-shrink: 0;
}
.sct-one-pf-img>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.sct-one-foot-pf-stle {
font-family: "SourceSans3-Regular";
font-size: 14px;
color: black;
text-decoration: underline;
transition: all 0.4s ease;
white-space: nowrap;
}
.logout-btn {
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.logout-btn>img {
height: 100%;
width: 100%;
}
.dash-hd-stle {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: black;
}
.dash-hd-sect-two {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
}
.profile-image-cont,
.cus-care-cont {
height: 40px;
width: 40px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.cus-care-cont {
border: 1px solid var(--custom-EDEDED);
}
.profile-image-cont {
border: 1px solid var(--custom-2181FA);
}
.profile-image-cont>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.alerts-cont {
height: 40px;
width: 40px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.notification-ico-cont {
height: 20px;
width: 20px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.notification-ico-cont-img,
.cus-care-cont>img {
height: 24px;
width: 24px;
}
.notification-indicator {
border-radius: 100%;
height: 8px;
width: 8px;
background-color: var(--custom-FF0000);
position: absolute;
right: 2px;
top: -2px;
}
.dash-white {
padding-left: 24px;
padding-right: 24px;
}
.dash-full {
border-radius: 8px;
width:calc(100% - 48px);
background: #FFFFFF;
margin-left: 24px;
margin-right:24px;
margin-top:20px;
margin-bottom:5px;
padding-top:20px;
padding-left: 24px;
padding-right: 24px;
padding-bottom:20px;
/* border: solid 1px #FFFFFF;*/
}
@media only screen and (max-width: 600px) {
.dash-full {
padding:12px;
width:calc(100% - 24px);
margin: 0px;
margin-left:12px;
margin-right:12px;
margin-top:10px;
margin-bottom:10px;
}
}
.dash-content {
display: flex;
flex-direction: row;
padding-left: 24px;
padding-right: 24px;
padding-top: 16px;
gap: 24px;
flex: 1;
box-sizing: content-box;
margin-bottom: 100px;
}
.listed-details-dash {
gap: 0;
}
.dash-content-sect-one {
width: 67%;
}
.dash-content-sect-one-cre {
width: 100%;
}
.dash-content-sect-two {
border-radius: 8px;
width: 33%;
display: flex;
flex-direction: column;
gap: 20px;
}
.dash-card {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2px;
border-radius: 12px;
padding-top: 10px;
padding-left: 12px;
padding-right: 12px;
background-color: white;
padding-bottom: 9px;
}
.dash-card-ico {
height: 40px;
width: 40px;
}
.dash-card-ico>img {
height: 100%;
width: 100%;
}
.dash-card-inner-one {
display: flex;
flex-direction: column;
gap: 8px;
}
.dash-card-stle {
font-family: "SourceSans3-SemiBold";
font-size: 28px;
color: var(--custom-252525);
line-height: 44.28px;
}
.dash-card-cont-one {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 17px;
margin-bottom: 24px;
}
.dash-card-foot-cont {
display: flex;
align-items: center;
flex-direction: row;
gap: 8px;
}
.curre-rate-ind-cont {
display: flex;
flex-direction: row;
align-items: center;
gap: 1px;
padding: 4px 7px;
background-color: var(--custom-EBFFEB);
border-radius: 4px;
}
.curre-rate-ind-ico {
height: 12px;
width: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.curre-rate-ind-ico>img {
height: 100%;
width: 100%;
}
.dash-card-cont-two,
.dash-card-cont-two,
.chart-wrapper {
margin-bottom: 24px;
}
.dash-card-cont-two-hd {
font-size: 24px;
font-family: "SourceSans3-SemiBold";
color: black;
margin-bottom: 12px;
}
.dash-card-cont-two-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.dash-card-cont-two-item {
padding: 24px 12px;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 8px;
}
.dash-card-cont-two-ico {
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--custom-EBF4FF);
margin-bottom: 12px;
border-radius: 8px;
}
.dash-card-cont-two-ico>img {
height: 100%;
width: 100%;
}
.dash-card-cont-two-item-stle {
font-size: 14px;
color: var(--custom-737373);
font-family: "SourceSans3-Regular";
text-align: center;
}
.chart-container, .stacked-bar-chart {
background: white;
margin-top: 20px;
}
.chart-container {
background: white;
padding: 28.5px 20px;
border-radius: 8px;
}
.chart-caption-hd {
color: var(--custom-7E8299);
font-family: "SourceSans3-Regular";
font-size: 16px;
text-align: center;
margin-top: 20px;
margin-left: 15px;
}
.learn-about-investing-container {
padding: 12px;
background-color: white;
border-radius: 12px;
}
.lea-abt-inv-img {
width: 100%;
height: 200px;
border-radius: 8px;
overflow: hidden;
margin-bottom: 16px;
}
.lea-abt-inv-img>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.lea-abt-inv-tle {
font-size: 16px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
}
.lea-abt-inv-stle {
font-size: 24px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
}
.lea-abt-inv-desc {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-737373);
}
.lea-abt-inv-prof-card {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
}
.lea-abt-inv-prof-card,
.lea-abt-inv-desc,
.lea-abt-inv-stle,
.lea-abt-inv-tle {
margin-bottom: 10px;
}
.learn-about-investing-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 17px;
margin-bottom: 50px;
}
.lea-abt-inv-prof-img {
height: 32px;
width: 32px;
border-radius: 100%;
overflow: hidden;
}
.lea-abt-inv-prof-img>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.lea-abt-inv-prof-tle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-252525);
}
.lea-abt-inv-prof-lnk {
border: 0.5px solid var(--custom-2181FA);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
height: 42px;
gap: 8px;
background-color: white;
}
.lea-abt-inv-prof-lnk-tle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-2181FA);
}
.lea-abt-inv-prof-lnk-ico {
height: 20px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.lea-abt-inv-prof-lnk-ico>img {
height: 100%;
width: 100%;
}
.youtube-vid-cont {
padding: 16px;
border-radius: 8px;
border: 1px solid var(--custom-EDEDED);
background-color: white;
}
.youtube-vid-hd {
font-size: 16px;
color: var(--custom-252525);
font-family: "SourceSans3-SemiBold";
line-height: 25.6px;
}
.youtube-vid {
height: 160px;
border-radius: 8px;
border: 1px solid var(--custom-EDEDED);
overflow: hidden;
}
.youtube-vid>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.blog-card {
border-radius: 8px;
border: 1px solid var(--custom-EDEDED);
padding: 20px 16px;
display: flex;
flex-direction: column;
gap: 3px;
background-color: white;
}
.blog-card-stle {
font-size: 28px;
color: black;
font-family: "SourceSans3-SemiBold";
line-height: 44.8px;
}
.blog-card-lnk {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
width: max-content;
}
.blog-card-lnk-icon {
height: 20px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.blog-card-lnk-icon>img {
height: 100%;
width: 100%;
}
.blog-card-img {
height: 320px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.blog-card-img>video {
width: 100%;
height: 100%;
}
.comple-kyc-cont {
background-color: var(--custom-F7F7F7);
border-radius: 12px;
padding: 12px 16px;
margin-top: 39px;
}
.comple-kyc-cont-hd {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
.comple-kyc-cont-stle {
font-size: 14px;
font-family: "SourceSans3-Regular";
}
.kyc-desc,
.comple-kyc-cont-stle {
color: var(--custom-94969C);
}
.kyc-desc {
font-size: 14px;
font-family: "SourceSans3-Regular";
transition: all 0.4s ease;
margin-bottom: 12px;
}
.progress-container {
width: 100%;
border-radius: 25px;
margin-bottom: 12px;
overflow: hidden;
border-radius: 8px;
background-color: var(--custom-A3A3A31A);
}
.progress-bar {
width: 0;
height: 8px;
background-color: var(--custom-2181FA);
border-radius: 8px;
transition: width 0.4s ease;
}
.comple-kyc-cont.hide-prog {
display: none;
}
.comp-kyc-lnk {
height: 42px;
border: 1px solid var(--custom-DBDBDB);
display: flex;
align-items: center;
justify-content: center;
color: var(--custom-2181FA);
font-family: "SourceSans3-SemiBold";
font-size: 14px;
border-radius: 32px;
}
.dash-hd-sect-one-mb {
flex-direction: column;
gap: 4px;
}
.mobile-view-logo {
width: 58px;
height: 24px;
}
.mobile-view-logo>img {
height: 100%;
width: 100%;
}
.dash-hd-sect-one-mb,
.mobile-view-logo {
display: none;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--custom-rgba5);
display: none;
justify-content: center;
align-items: flex-end;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
backdrop-filter: blur(4px);
z-index: 999999;
}
.overlay.show {
opacity: 1;
visibility: visible;
}
.overlay.hide {
opacity: 0;
visibility: hidden;
}
.logout-btn {
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.logout-btn>img {
height: 100%;
width: 100%;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--custom-rgba7);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
padding: 0px var(--mobile-padding);
z-index: 999999999;
}
.install-app-modal {
background: var(--custom-011228);
width: 100%;
max-width: 765px;
border-radius: 12px;
transform: translateY(-20px);
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
opacity: 0;
background-image: url("/svgs/rei20/images/dashboard/install-app-bg-image.svg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 34px 0px 0px 31px;
display: flex;
flex-direction: row;
gap: 82px;
overflow: hidden;
padding-right: 62px;
}
.notification-modal,
.support-modal,
.logout-modal,
.redemption-modal {
background: white;
width: 100%;
border-radius: 16px;
text-align: center;
box-shadow: 24px 24px 48px 0px var(--custom-2525251F),
-24px -24px 48px 0px var(--custom-2525251F);
transform: translateY(-20px);
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
opacity: 0;
text-align: center;
}
.support-modal {
max-width: 515px;
}
.redemption-modal {
max-width: 540px;
}
.support-modal, .logout-modal, .redemption-modal {
padding: 20px;
background-color: white !important;
background: linear-gradient(180deg, rgba(33, 129, 250, 0.0096) 0%, rgba(33, 129, 250, 0.0224) 38.63%, rgba(33, 129, 250, 0.0602353) 57%, rgba(33, 129, 250, 0.0512) 93%);
}
.logout-modal {
max-width: 490px;
}
.notification-modal {
max-width: 490px;
padding-top: 80px;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
/* Show Modal */
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-overlay.active .notification-modal {
transform: translateY(0);
opacity: 1;
}
.modal-overlay.active .install-app-modal {
transform: translateY(0);
opacity: 1;
}
.modal-overlay.active .support-modal, .redemption-modal {
transform: translateY(0);
opacity: 1;
}
.modal-overlay.active .logout-modal {
transform: translateY(0);
opacity: 1;
}
.install-app-modal-sect-two {
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
padding-bottom: 10px;
}
.install-app-modal-app-img {
width: 260px;
height: max-content;
margin-bottom: -5px;
}
.install-app-modal-logo {
width: 122px;
height: 40px;
}
.install-app-modal-logo>img {
height: 100%;
width: 100%;
}
.install-app-modal-stle {
margin-top: 4px;
font-family: "SourceSans3-Regular";
font-size: 16px;
color: var(--custom-FDFDFD);
margin-bottom: 12px;
line-height: 25.6px;
}
.install-app-modal-btns-cont {
display: flex;
flex-direction: row;
gap: 12px;
}
.maybe-later-btn,
.install-app-link {
height: 50px;
padding-left: 24px;
padding-right: 24px;
border-radius: 32px;
font-size: 16px;
font-family: "SourceSans3-SemiBold";
}
.install-app-link {
border: 1px solid var(--custom-A3A3A3);
display: flex;
align-items: center;
justify-content: center;
color: var(--custom-DBDBDB);
}
.maybe-later-btn {
background-color: var(--custom-2181FA);
color: var(--custom-FDFDFD);
}
.notification-wrapper {
position: relative;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.notification {
position: relative;
width: 73.33px;
height: 73.33px;
background: var(--custom-CDE3FE);
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.notification-bell {
height: 33px;
width: 33px;
animation: shake 1s ease-in-out infinite;
margin: auto;
}
.notification-bell>img {
height: 100%;
width: 100%;
}
.ripple {
position: absolute;
width: 100%;
height: 100%;
border: 2px solid rgba(48, 137, 252, 0.5);
border-radius: 50%;
animation: ripple 2s infinite ease-out;
}
.ripple:nth-child(2) {
animation-delay: 0.5s;
}
.ripple:nth-child(3) {
animation-delay: 1s;
}
@keyframes ripple {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
@keyframes shake {
0% {
transform: rotate(0);
}
20% {
transform: rotate(-10deg);
}
40% {
transform: rotate(10deg);
}
60% {
transform: rotate(-10deg);
}
80% {
transform: rotate(10deg);
}
100% {
transform: rotate(0);
}
}
.push-notify-stle {
font-size: 16px;
color: var(--custom-596375);
font-family: "SourceSans3-Regular";
margin-bottom: 24px;
line-height: 25.6px;
}
.push-notify-allow-btn,
.push-notify-dnt-allow-btn {
height: 50px;
border-radius: 32px;
font-family: "SourceSans3-Medium";
display: block;
width: 100%;
font-size: 16px;
}
.push-notify-allow-btn {
color: var(--custom-FDFDFD);
background-color: var(--custom-2181FA);
margin-bottom: 20px;
}
.push-notify-dnt-allow-btn {
border: 1px solid var(--custom-A3A3A3);
color: var(--custom-252525);
}
.support-modal-hd, .redemption-modal-hd {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.support-modal-hd-btn, .redemption-modal-hd-btn {
height: 24px;
width: 24px;
}
.support-modal-hd-btn>img, .redemption-modal-hd-btn>img {
height: 100%;
width: 100%;
}
.support-form-item {
display: flex;
flex-direction: column;
align-items: start;
gap: 8px;
margin-bottom: 20px;
}
.support-form-item>label {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-333333);
line-height: 25.6px;
}
.support-form-item>input,
.support-form-item>textarea {
width: 100%;
font-size: 14px;
font-family: "SourceSans3-Regular";
border: none;
box-sizing: border-box;
padding-left: 16px;
background-color: white;
}
.support-form-item>input {
height: 50px;
border-radius: 32px;
}
.support-form-item>textarea {
border-radius: 12px;
padding: 16px;
resize: none;
}
.support-form-item>textarea:focus,
.support-form-item>input:focus {
outline: none;
border: none;
}
.support-btn, .redem-btn {
width: 100%;
height: 50px;
border-radius: 32px;
box-shadow: 0px 8px 16px -4px var(--custom-rgba4);
background-color: var(--custom-2181FA);
font-size: 16px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-FDFDFD);
}
.logout-modal-img {
height: 80px;
width: 80px;
margin: auto;
margin-bottom: 4px;
}
.logout-modal-stle {
color: black;
font-size: 16px;
font-family: "SourceSans3-Regular";
margin-bottom: 40px;
}
.logout-modal-img>img {
height: 100%;
width: 100%;
}
.submit-logout-btn, .logout-cancel-btn {
height: 50px;
border-radius: 32px;
font-size: 16px;
font-family: "SourceSans3-SemiBold";
width: 100%;
}
.submit-logout-btn {
background-color: var(--custom-2181FA);
color: var(--custom-FDFDFD);
margin-bottom: 20px;
}
.logout-cancel-btn {
border: 1px solid var(--custom-A3A3A3);
color: var(--custom-252525);
}
.rei-cap-inv-dash {
gap: 0px;
margin-top: 16px;
}
@media only screen and (max-width: 1316px) {
.sct-one {
width: 200px;
}
}
@media only screen and (max-width: 1210px) {
.sct-one {
display: none;
}
.overlay {
display: flex;
}
.comple-kyc-cont {
padding: 12px;
margin-top: 12px;
}
.comple-kyc-cont-stle,
.kyc-desc {
font-size: 12px;
font-family: "SourceSans3-Regular";
}
.comp-kyc-lnk {
height: 38px;
}
}
@media only screen and (max-width: 1124px) {
.dash-card-cont-one {
grid-template-columns: repeat(2, 1fr);
}
.dash-card-cont-two-wrapper {
grid-template-columns: repeat(3, 1fr);
}
.dash-card-cont-one div:last-child {
grid-column: span 2;
}
}
@media only screen and (max-width: 981px) {
.youtube-vid {
height: 260px;
}
.dash-content-sect-one {
width: 100%;
}
.dash-card-cont-two-wrapper {
grid-template-columns: repeat(3, 1fr);
}
.dash-content-sect-two {
width: 100%;
gap: 12px;
}
.dash-content {
flex-direction: column;
}
}
@media only screen and (max-width: 733px) {
.install-app-modal-app-img {
display: none;
}
.install-app-modal-sect-two {
width: 100%;
padding: 0;
}
.install-app-modal {
padding: 20px;
}
.install-app-modal-logo {
width: 73px;
height: 24px;
}
.install-app-modal-stle {
margin-top: 4px;
font-family: "SourceSans3-Regular";
font-size: 14px;
line-height: 22.4px;
}
.install-app-modal-btns-cont {
flex-direction: column;
width: 100%;
}
.maybe-later-btn,
.install-app-link {
height: 39px;
width: 100%;
padding-left: 16px;
padding-right: 16px;
font-size: 12px;
}
.maybe-later-btn {
background-color: var(--custom-2181FA);
color: var(--custom-FDFDFD);
}
.support-modal, .redemption-modal {
padding: 15px;
}
.logout-modal {
padding: 12px;
}
.support-modal-hd {
margin-bottom: 16px;
}
.support-modal-hd .redemption-modal-hd{
margin-bottom: 12px;
}
.support-modal-hd-btn, .redemption-modal-hd-btn {
height: 20px;
width: 20px;
}
.support-form-item {
margin-bottom: 12px;
}
.support-form-item>label {
font-size: 12px;
line-height: 19.2px;
}
.support-form-item>input,
.support-form-item>textarea {
width: 100%;
font-size: 14px;
font-family: "SourceSans3-Regular";
border: none;
box-sizing: border-box;
background-color: white;
}
.support-form-item>input {
height: 43px;
padding-left: 12px;
}
.support-form-item>textarea {
border-radius: 12px;
padding: 12px;
}
.support-btn, .redem-btn {
height: 39px;
font-size: 12px;
}
.support-btn{
margin-top: 20px;
}
}
@media only screen and (max-width: 600px) {
.dash-card-cont-one {
grid-template-columns: repeat(1, 1fr);
}
.dash-card-cont-one div:last-child {
grid-column: auto;
}
.dash-card-cont-two-wrapper {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.learn-about-investing-grid {
grid-template-columns: repeat(1, 1fr);
}
.dash-hd-sect-one {
display: none;
}
.mobile-view-logo {
display: block;
}
.dash-hd {
height: 48px;
border: none;
padding-left: var(--mobile-padding);
padding-right: var(--mobile-padding);
background-color: var(--content-color);
}
.profile-image-cont {
height: 32px;
width: 32px;
}
.notification-ico-cont-img {
height: 20px;
width: 20px;
}
.notification-indicator {
height: 6px;
width: 6px;
right: 4px;
top: -1px;
}
.dash-hd-sect-one-mb {
display: flex;
}
.dash-hd-stle {
font-size: 16px;
margin-bottom: 12px;
}
.dash-content {
padding-left: var(--mobile-padding);
padding-right: var(--mobile-padding);
padding-top: 8px;
gap: 12px;
margin-bottom: 12px;
}
.dash-card-inner-one {
flex-direction: row;
gap: 12px;
}
.dash-card-stle {
font-size: 14px;
line-height: 22.4px;
}
.dash-card {
flex-direction: row;
border-radius: 12px;
padding: 8px 12px;
padding-bottom: 9px;
}
.dash-card-foot-cont {
flex-direction: column;
align-items: end;
gap: 4px;
}
.dash-card-cont-one,
.dash-card-cont-two,
.dash-card-cont-two,
.chart-wrapper {
margin-bottom: 13px;
}
.dash-card-cont-two-hd {
font-size: 16px;
margin-bottom: 8px;
}
.dash-card-cont-two-item {
padding: 12px;
}
.rei-cap-inv-dash {
gap: 0px;
margin-top: 0px;
}
.dash-card-cont-two-ico {
margin-bottom: 8px;
}
.dash-card-cont-two-item-stle {
font-size: 12px;
}
.chart-caption-hd {
font-size: 12px;
margin-top: 10px;
padding-bottom: 14px;
}
.learn-about-investing-grid {
gap: 8px;
margin-bottom: 12px;
}
.lea-abt-inv-img {
height: 120px;
margin-bottom: 8px;
}
.chart-container {
padding: 16px 8px;
margin-top: 0px;
}
.lea-abt-inv-stle {
font-size: 14px;
}
.lea-abt-inv-prof-card,
.lea-abt-inv-desc,
.lea-abt-inv-stle,
.lea-abt-inv-tle {
margin-bottom: 6px;
}
.lea-abt-inv-prof-img {
height: 20px;
width: 20px;
}
.lea-abt-inv-prof-lnk {
height: 38px;
}
.youtube-vid-cont {
padding: 12px;
}
.youtube-vid-hd {
font-size: 12px;
line-height: 19.2px;
}
.youtube-vid {
height: 160px;
}
.blog-card {
padding: 14px;
flex-direction: row-reverse;
gap: 16px;
justify-content: start;
align-items: center;
}
.blog-card,
.blog-card-img {
height: 100px;
width: 100px;
}
/* .... */
.blog-card-stle {
font-size: 16px;
line-height: 25.5px;
margin-bottom: 3px;
}
.notification-bell {
height: 24.31px;
width: 24.31px;
}
.notification-wrapper {
position: relative;
width: 70px;
height: 70px;
}
.notification {
position: relative;
width: 55.56px;
height: 55.56px;
}
.push-notify-stle {
font-size: 12px;
margin: auto;
margin-bottom: 12px;
line-height: 19.2px;
max-width: 300px;
}
.push-notify-allow-btn,
.push-notify-dnt-allow-btn {
height: 39px;
font-size: 12px;
}
.push-notify-allow-btn {
margin-bottom: 12px;
}
.notification-modal {
padding: 30px 12px 12px 12px;
}
.logout-modal-img {
height: 64px;
width: 64px;
}
.logout-modal-stle {
font-size: 12px;
margin-bottom: 20px;
}
.submit-logout-btn, .logout-cancel-btn {
height: 42px;
font-size: 14px;
}
.submit-logout-btn {
margin-bottom: 12px;
}
}
/* ******************* End :: Dashboard Styles ******************************** */
/******************** Start :: Bottom Sheet ******************************** */
.bottom-sheet {
width: 100%;
background: white;
border-radius: 16px 16px 0 0;
padding: 20px 16px;
position: relative;
transform: translateY(100%);
transition: transform 0.3s ease-in-out;
box-shadow: -24px -24px 48px 0px var(--custom-rgba6);
z-index: 9999999;
margin-bottom: 50px;
}
.overlay.show .bottom-sheet {
transform: translateY(0);
}
.overlay.hide .bottom-sheet {
transform: translateY(100%);
}
.bottom-sheet-hd {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
margin-bottom: 12px;
}
.bottom-sheet-nav-lnk {
display: flex;
height: 42px;
align-items: center;
flex-direction: row;
gap: 8px;
width: max-content;
}
.bottom-sheet-nav-lnk-icon {
height: 20px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.bottom-sheet-nav-lnk-icon>img {
height: 100%;
width: 100%;
}
.bottom-sheet-nav-lnk>p {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: black;
}
.bottom-sheet-foot {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 12px;
margin-bottom: 12px;
}
.bottom-sheet-pf-img {
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
overflow: hidden;
border: 1px solid var(--custom-2181FA);
}
.bottom-sheet-foot-sct-one {
display: flex;
align-items: center;
flex-direction: row;
gap: 8px;
}
.bottom-sheet-pf-img>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.bottom-sheet-foot-pf-stle {
font-size: 14px;
font-family: "SourceSans3-Regular";
color: black;
text-decoration: underline;
}
.close-bottom-sheet {
height: 24px;
width: 24px;
}
.close-bottom-sheet>img {
height: 100%;
width: 100%;
}
.bottom-sheet-hr {
border: none;
height: 1px;
background-color: #DBDBDB;
width: 100%;
}
.bottom-sheet-hr {
margin-top: 12px;
margin-bottom: 12px;
}
/* ******************* End :: Bottom Sheet ******************************** */
/******************** Start :: Forum ******************************** */
.forum-card {
border-radius: 8px;
border: 1px solid var(--custom-EDEDED);
padding: 20px 16px;
display: flex;
flex-direction: column;
gap: 3px;
background-color: white;
}
.forum-card-stle {
font-size: 28px;
color: black;
font-family: "SourceSans3-SemiBold";
line-height: 44.8px;
}
.forum-card-lnk {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
width: max-content;
}
.forum-card-lnk-icon {
height: 20px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.forum-card-lnk-icon>img {
height: 100%;
width: 100%;
}
.forum-comm-cont {
display: flex;
flex-direction: row;
gap: 8px;
margin-top: 20px;
margin-bottom: 18px;
}
.forum-comm-pf-img {
height: 24px;
width: 24px;
border-radius: 100%;
overflow: hidden;
}
.forum-comm-pf-img>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.forum-comment-sect-pin {
height: 16px;
width: 16px;
}
.forum-comment-sect-pin>img {
height: 100%;
width: 100%;
}
.forum-comment-sect-hd {
display: flex;
gap: 4px;
flex-direction: row;
align-items: center;
margin-bottom: 4px;
}
.form-comment-sect {
flex: 1;
width: 100%;
}
.forum-pf-sect {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.forum-pf-sect-one {
display: flex;
align-items: center;
gap: 4px;
}
.forum-pf-sect-verify-icon {
height: 20px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.forum-pf-sect-verify-icon>img {
height: 100%;
width: 100%;
}
.forum-com-desc {
padding: 8px;
background-color: var(--custom-EBF4FF);
}
.forum-com-desc-card {
padding: 8px;
border-radius: 8px;
background-color: var(--custom-EBF4FF);
width: 100%;
margin-bottom: 8px;
}
.forum-com-desc-card-stle {
font-size: 14px;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.forum-comm-hr {
border: none;
height: 1px;
background-color: #DBDBDB;
width: 100%;
}
@media only screen and (max-width: 600px) {
.forum-card {
padding: 12px;
margin-bottom: 70px;
}
.forum-card-stle {
font-size: 16px;
line-height: 25.5px;
margin-bottom: 3px;
}
.forum-comm-cont {
margin: 12px 12px;
}
.forum-comm-pf-img {
height: 32px;
width: 32px;
}
.forum-pf-sect-verify-icon {
height: 18px;
width: 18px;
}
.forum-com-desc-card-stle {
font-size: 12px;
line-height: 19.2px;
}
}
/* ******************* End :: Forum ******************************** */
/******************** Start :: Auth Styles ******************************** */
.wel-sect,
.wel-sect-pf {
width: 66%;
padding: 40px;
/* background-color: var(--custom-0A0A0A); */
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
height: 100vh;
background: radial-gradient(circle, black, #172038);
}
.wel-sect-pf {
background-color: var(--custom-EBF4FF);
}
.wel-img-sect {
width: 45%;
overflow: hidden;
box-sizing: border-box;
background-image: url('/images/home/onboarding.png');;
background-height: 1024px;
background-repeat: no-repeat;
background-position: top right;
background-size: cover;
}
.wel-img-sect>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.logo-cont {
display: block;
width: 146.72px;
height: 48px;
margin-bottom: 92px;
}
.logo-cont>img {
height: 100%;
width: 100%;
}
.wel-sect-hd,
.pf-st-hd {
color: var(--custom-FDFDFD);
font-size: 40px;
font-family: "SourceSans3-SemiBold";
margin-bottom: 12px;
line-height: 64px;
}
.pf-st-hd {
color: white;
}
.wel-sect-tle,
.pf-st-tle {
color: var(--custom-EDEDED);
font-family: "SourceSans3-Regular";
font-size: 20px;
line-height: 32px;
}
.pf-st-tle {
color: var(--custom-737373);
}
.pf-st-cont {
padding-left: 24px;
}
.ft-tle,
.pf-st-ft-tle,
.pd-tcpp-cont {
font-size: 20px;
font-family: "SourceSans3-Regular";
color: var(--custom-FDFDFD);
padding-left: 24px;
}
.ft-tle-iner {
font-family: "SourceSans3-SemiBold";
text-decoration: underline solid;
text-decoration-skip-ink: auto;
}
.auth-form {
position: absolute;
width: 539px;
top: 50%;
left: 60%;
transform: translate(-50%, -50%);
box-sizing: border-box;
z-index: 1000;
background: #ffffff;
border-radius: 12px;
padding: 32px;
overflow: hidden;
max-height: 0;
animation: expandHeight 1s ease-in-out forwards;
box-shadow: 12px 12px 40px 0px var(--custom-rgba1);
}
.two-fac {
width: max-content;
}
.auth-form-fa {
width: 539px;
}
@keyframes expandHeight {
from {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
}
to {
max-height: 800px;
padding-top: 32px;
padding-bottom: 32px;
opacity: 1;
}
}
.auth-hd {
font-family: "SourceSans3-SemiBold";
color: black;
font-size: 24px;
line-height: 38.4px;
}
.auth-tle {
font-family: "SourceSans3-Regular";
font-size: 16px;
color: var(--custom-737373);
margin-bottom: 20px;
margin-top: 2px;
}
.gle-auth {
width: 100%;
height: 50px;
border: 1px solid var(--custom-DBDBDB);
border-radius: 32px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
justify-items: center;
gap: 10px;
margin-top: 20px;
}
.gle-auth-cont {
height: 20px;
width: 20px;
}
.gle-auth-cont>img {
height: 100%;
width: 100%;
}
.gle-auth-tle {
font-size: 16px;
color: var(--custom-3B4752);
font-family: "SourceSans3-Regular";
}
.or-sect {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
height: 26px;
margin-top: 20px;
}
.or-sect-dv {
border: 0;
height: 1px;
background: var(--custom-EDEDED);
flex: 1;
}
.or-sect-tle {
text-transform: uppercase;
color: var(--custom-333333);
font-size: 16px;
font-family: "SourceSans3-Regular";
}
.auth-prcd,
.rsd-cde {
font-family: "SourceSans3-SemiBold";
font-size: 16px;
height: 50px;
width: 100%;
border-radius: 32px;
}
.auth-prcd {
color: var(--custom-FDFDFD);
margin-top: 20px;
background-color: var(--custom-2181FA);
}
.rsd-cde {
margin-top: 12px;
border: 1px solid var(--custom-DBDBDB);
color: var(--custom-2181FA);
}
.ahav-cont {
font-size: 16px;
color: var(--custom-737373);
font-family: "SourceSans3-Regular";
margin-top: 20px;
}
.ahav-lnk {
color: var(--custom-2181FA);
}
.mb-logo {
display: none;
width: 58px;
height: 24px;
margin-bottom: 28px;
}
.mb-logo>img {
width: 100%;
height: 100%;
}
.otp-inputs {
display: flex;
justify-content: space-between;
gap: 12px;
}
.otp-inputs input {
width: 72px;
height: 72px;
font-size: 30px;
font-family: "SourceSans3-SemiBold";
text-align: center;
border: 2px solid var(--custom-EDEDED);
border-radius: 5px;
outline: none;
background-color: var(--custom-F1F1F1);
transition: all 0.3s ease;
}
.otp-inputs input:focus {
outline: none;
}
.submit-btn:hover {
background-color: #0056b3;
}
@media only screen and (max-width: 1341px) {
.wel-sect-hd,
.pf-st-hd {
font-size: 35px;
line-height: 57px;
}
.wel-sect-tle,
.pf-st-tle {
font-size: 17px;
}
}
@media only screen and (max-width: 1255px) {
.ind-cont {
padding-left: 0px;
margin-top: 12px;
}
.pf-st-cont {
padding-left: 0;
}
.ft-tle,
.pf-st-ft-tle,
.pd-tcpp-cont {
font-size: 16px;
padding-left: 0px;
}
}
@media only screen and (max-width: 911px) {
.wel-sect-hd,
.pf-st-hd {
font-size: 20px;
margin-bottom: 12px;
line-height: 32px;
}
.wel-img-sect {
display: none;
}
.wel-sect,
.wel-sect-pf {
width: 100%;
flex: 1;
height: 500px;
}
.auth-form {
position: static;
width: 100%;
height: 60%;
top: 0;
left: 0;
transform: translate(0, 0);
}
.two-fac {
height: max-content !important;
}
.wel-sect,
.wel-sect-pf {
padding-left: 18px;
}
.otp-inputs {
justify-content: center;
gap: 12px;
}
.otp-inputs input {
width: 60px;
height: 60px;
font-size: 20px;
}
.mb-logo {
display: block;
}
.logo-cont,
.gradient-2,
.gradient-3 {
display: none;
}
}
@media only screen and (max-height: 536px) {
.wel-sect-pf {
overflow-y: auto;
}
}
@media only screen and (max-width: 600px) {
.auth-hd {
font-size: 20px;
line-height: 32px;
}
.auth-tle {
font-size: 14px;
color: var(--custom-737373);
line-height: 22.4px;
margin-bottom: 12px;
}
.gle-auth {
height: 50px;
margin-top: 12px;
}
.gle-auth-tle {
font-size: 14px;
}
.or-sect {
height: 19px;
margin-top: 16px;
}
.or-sect-tle {
font-size: 12px;
}
.auth-prcd {
font-size: 14px;
height: 46px;
margin-top: 16px;
}
.ahav-cont {
margin-top: 16px;
font-size: 14px;
line-height: 22.4px;
}
.auth-form {
padding: var(--mobile-padding);
}
.wel-sect-tle,
.pf-st-tle {
font-size: 14px;
}
.ft-tle,
.pf-st-ft-tle {
font-size: 14px;
}
.wel-sect-tle,
.pf-st-tle {
line-height: 22.4px;
}
.otp-inputs {
gap: 8px;
}
.otp-inputs input {
width: 53px;
height: 53px;
font-size: 14px;
}
}
@media only screen and (max-width: 400px) {
.otp-inputs {
justify-content: space-between;
gap: 8px;
}
.otp-inputs input {
width: 100%;
flex: 1;
height: 53px;
font-size: 14px;
}
}
/* ******************* End :: Auth Styles ******************************** */
/******************** Start :: Main Content Styles ******************************** */
/* main_content replaces #content */
.main_content {
display: flex;
flex-direction: row;
height: 100dvh;
position: relative;
background-color: var(--content-color);
}
@media only screen and (max-width: 911px) {
.main_content {
flex-direction: column;
overflow-y: auto;
}
} /* end media */
@media only screen and (max-height: 536px) {
.main_content {
height: max-content;
}
}
@media only screen and (max-width: 700px) and (max-height: 735px) {
.main_content {
height: max-content;
}
}
@media only screen and (max-width: 911px) and (max-height: 820px) {
.main_content {
height: max-content;
}
}
/* ******************* End :: Main Content Styles ******************************** */
/******************** Start :: Profile Status Styles ******************************** */
/* Exterior profile status */
.profile_status {
display: flex;
gap: 16px;
margin-top: 40px;
margin-bottom: 148px;
overflow: hidden;
padding-left: 40px;
border-top-left-radius: 20px;
}
@media only screen and (max-width: 1086px) {
.profile_status {
padding-left: 20px;
}
}
@media only screen and (max-width: 1255px) {
.profile_status {
padding-left: 0px;
}
}
@media only screen and (max-width: 911px) {
.profile_status,.profile_status_instructions {
display: none !important;
background-color: white;
}
}
/* ******************* End :: Profile Status Styles ******************************** */
/******************** Start :: Profile Status Styles ******************************** */
/* Right hand status bar */
.onboard_status {
display: flex;
flex-direction: row;
padding-left: 12px;
padding-right: 12px;
}
/* this is the green indicator bar on the right */
.onboard_beanstalk {
flex: 1;
height: 574px;
display: flex;
flex-direction: column;
align-items: center;
}
/* These are the actual status labels */
.onboard_status_labels {
flex: 1;
margin-top: 32px;
}
/* only display the status section if not mobile */
@media only screen and (max-width: 600px) {
.onboard_status {
display:none;
}
}
/* ******************* End :: Profile Status Styles ******************************** */
/******************** Start :: Profile Setup Styles ******************************** */
.pf-st-ind-img>img {
width: 100%;
height: 100%;
}
.pf-st-ind-img {
height: 352px;
width: 28px;
margin-top: 6px;
}
.pf-st-sect-item-tle {
font-family: "SourceSans3-SemiBold";
font-size: 16px;
color: #FFFFFF;
line-height: 25.6px;
text-transform: uppercase;
}
.pf-st-sect-item-stle {
font-family: "SourceSans3-SemiBold";
font-size: 20px;
color: #FFFFFF;
line-height: 32px;
}
.pf-st-ft-tle {
color: var(--custom-252525);
}
.pd-tcpp-cont {
display: flex;
flex-direction: row;
gap: 21px;
margin-top: 24px;
}
.pf-st-hd {
line-height: 50px;
}
.pf-t-n-c,
.pf-st-pp {
font-size: 20px;
color: var(--custom-737373);
font-family: "SourceSans3-Regular";
}
.rsd-cde-cont {
height: 50px;
background-color: var(--custom-F0F7FF);
border-radius: 8px;
padding-left: 12px;
padding-right: 12px;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
.rsd-cde-ntc-ico {
height: 20px;
width: 20px;
}
.rsd-cde-ntc-ico>img {
height: 100%;
width: 100%;
}
.rsd-cde-cont-sct-one {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
}
.rsd-cde-tle {
font-size: 16px;
color: var(--custom-252525);
font-family: "SourceSans3-Regular";
}
.rsd-cde-btn {
font-size: 16px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-2181FA);
}
.pf-st-cont-mb {
display: none;
box-shadow:
4px 4px 12px 0px var(--custom-rgba2),
-4px -4px 12px 0px var(--custom-rgba2);
border-radius: 12px;
padding-bottom: 10px;
}
@media only screen and (max-width: 1255px) {
.pf-t-n-c,
.pf-st-pp {
font-size: 16px;
}
}
@media only screen and (max-width: 911px) {
.two-fac, .rm-sd {
box-shadow: none;
}
.pf-st-cont-mb {
display: block;
margin-bottom: 24px;
}
.slide-item-mb {
display: flex !important;
flex-direction: column;
padding-top: 10px;
padding-right: 16px;
padding-left: 16px;
}
.pf-st-hd-mb {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: black;
}
.pf-st-tle-mb {
margin-top: 4px;
font-size: 14px;
font-family: "SourceSans3-Regular";
color: var(--custom-737373);
}
.pf-st-ind-cont-mb {
display: flex;
flex-direction: row;
align-items: center;
height: 24px;
margin-top: 10px;
}
.pf-st-img {
height: 24px;
width: 24px;
flex-shrink: 0;
}
.pf-st-img>img {
width: 100%;
height: 100%;
}
.pf-st-ind-img-mb {
width: 100%;
height: 200px;
display: flex;
}
.pf-st-ind-mb-ln {
height: 2px;
width: 100%;
}
.pf-st-ind-mb-ln-active {
background-color: var(--custom-00B800);
}
.pf-st-ind-mb-ln-inactive {
background-color: var(--custom-DBDBDB);
}
.pf-st-ind-img-mb>img {
width: 100%;
height: 24px;
object-fit: contain;
}
}
@media only screen and (max-width: 600px) {
.pf-st-hd-mb {
font-size: 14px;
}
.pf-st-tle-mb {
font-size: 12px;
}
.pf-st-ind-img-mb>img {
width: 100%;
height: 24px;
object-fit: cover;
}
.pf-t-n-c,
.pf-st-pp {
font-size: 14px;
}
.pd-tcpp-cont,
.pf-st-ft-tle {
padding-left: 0px;
}
.rsd-cde-cont {
height: 46px;
}
.rsd-cde-cont-sct-one {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
}
.rsd-cde-tle,
.rsd-cde-btn {
font-size: 14px;
}
.pd-tcpp-cont {
gap: 16px;
margin-top: 16px;
}
}
/* ******************* End :: Profile Setup Styles ******************************** */
/******************** Start :: Calculator Styles ******************************** */
.calc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 17px;
padding: 16px 24px 24px 24px;
}
.calc-grid-item,
.support-team-grid-item {
padding: 16px;
border-radius: 12px;
border: 1px solid var(--custom-FDFDFD);
background-color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.calc-grid-item-img,
.support-team-grid-item-img {
width: 100%;
height: 170px;
border-radius: 12px;
overflow: hidden;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.calc-grid-item-img,
.support-team-grid-item-img {
width: 100%;
border-radius: 12px;
overflow: hidden;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.calc-grid-item-img {
height: 170px;
}
.support-team-grid-item-img {
height: 200px;
}
.capital-growth-calc-image {
width: 200px;
height: 66.23px;
}
.capital-growth-calc-image {
width: 200px;
height: 66.23px;
}
.capital-growth-calc-bg {
background-color: var(--custom-EEFEEB);
}
.capital-income-bond-calc-bg {
background-color: var(--custom-EBF4FF);
}
.noi-calc-bg {
background-color: var(--custom-F5F5F5);
}
.support-team-bg {
background-color: transparent;
}
.noi-calc-vid {
width: 170px;
height: 170px;
}
.calc-grid-item-tle,
.calc-grid-item-stle {
margin-bottom: 12px;
}
.calc-grid-item-tle,
.support-team-grid-item-tle {
font-family: "SourceSans3-SemiBold";
}
.calc-grid-item-tle {
color: black;
font-size: 20px;
}
.support-team-grid-item-tle,
.support-team-grid-item-stle {
color: white;
margin-bottom: 6px;
font-size: 24px;
}
.calc-grid-item-stle {
color: var(--custom-737373);
font-size: 16px;
font-family: "SourceSans3-Regular";
}
.calc-grid-item-stle,
.support-team-grid-item-stle {
font-size: 16px;
font-family: "SourceSans3-Regular";
}
.calc-grid-item-stle {
color: var(--custom-737373);
}
.calc-grid-item-user-card {
display: flex;
flex-direction: row;
gap: 6px;
align-items: center;
margin-bottom: 14px;
}
.calc-grid-item-icon {
height: 18px;
width: 18px;
}
.calc-grid-item-icon>img {
height: 100%;
width: 100%;
}
.calc-grid-item-user-label {
font-size: 14px;
font-family: "SourceSans3-Regular";
color: var(--custom-737373);
}
.calc_link {
width: 100%;
height: 46px;
border-radius: 32px;
box-shadow: 0px 8px 16px -4px var(--custom-rgba11);
display: flex;
align-items: center;
justify-content: center;
color: var(--custom-FDFDFD);
font-size: 16px;
font-family: "SourceSans3-SemiBold";
border-radius: 32px;
background-color: var(--custom-252525);
}
.support-team-image {
height: 150.83px;
width: 166.14px;
}
.support-team-grid-item {
background-color: var(--custom-111928);
}
.support-team-grid-item-lnk-img {
height: 20px;
width: 20px;
}
.support-team-grid-item-lnk-img>img {
width: 100%;
height: 100%;
}
.support-team-grid-item-lnk {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 4px;
height: 42px;
width: 100%;
color: white;
border-radius: 32px;
border: 1px solid var(--custom-DBDBDB);
}
.support-team-grid-item-lnk-tle {
font-size: 16px;
color: white;
font-family: "SourceSans3-Regular";
}
.chart-container {
width: 100%;
}
.calculator-details-sect-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 100%;
gap: 16px;
margin-bottom: 20px;
}
.calculator-details-sect-grid-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 5px;
padding: 10px 12px;
color: var(--custom-333333);
border-radius: 8px;
background-color: var(--custom-FDFDFD);
border: 1px solid var(--custom-F7F7F7);
}
.calculator-details-sect-grid-item-tle {
font-family: "SourceSans3-Regular";
font-size: 14px;
}
.calculator-details-sect-grid-item-stle {
font-family: "SourceSans3-SemiBold";
font-size: 16px;
}
.chart-indicator-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
}
.chart-indicator-tle {
color: black;
font-size: 14px;
font-family: "SourceSans3-Regular";
}
.chart-indicator-container {
display: flex;
flex-direction: row;
gap: 12px;
flex-wrap: wrap;
}
.chart-indicator {
height: 12px;
width: 12px;
border-radius: 100%;
flex-shrink: 0;
}
.pg-growth-indicator {
background-color: var(--custom-BDD4F1);
}
.vari-below-indicator {
background-color: var(--custom-FFB6AE);
}
.vari-above-indicator {
background-color: var(--custom-FF99FF);
}
.amt-inv-indicator {
background-color: var(--custom-F6CCFF);
}
.calc-details-wrapper {
margin-top: 16px;
}
.total-contribute-cont {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
margin-bottom: 20px;
}
.total-contribute-tle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-737373);
}
.total-contribute-stle {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
}
.income-inv-cont {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
}
.income-inv-tle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-333333);
}
.income-inv-cont-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 32px;
}
.income-goal-icon {
height: 17px;
width: 17px;
}
.income-goal-icon>img {
height: 100%;
width: 100%;
}
.label-quest-section {
display: flex;
align-items: center;
gap: 6px;
}
.no-of-bond-reinvested-imp {
color: var(--custom-A3A3A3);
}
.cre-calc-video {
width: 100%;
height: 350px;
border-radius: 8px;
overflow: hidden;
}
.cre-calc-video>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.investment-graph-container {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px;
background-color: white;
border-radius: 12px;
}
.investment-graph-tle {
font-size: 20px;
color: var(--custom-252525);
font-family: "SourceSans3-SemiBold";
margin-bottom: 8px;
}
.investment-graph-price-cont {
display: flex;
align-items: center;
flex-direction: row;
gap: 6px;
margin-bottom: 12px;
}
.investment-graph-price {
color: var(--custom-252525);
font-size: 28px;
font-family: "SourceSans3-Bold";
}
.investment-graph-price-cont-sect {
display: flex;
flex-direction: row;
align-items: center;
gap: 1px;
padding: 4px 7px;
background-color: var(--custom-EBFFEB);
border-radius: 4px;
}
.investment-graph-price-icon {
width: 12px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.investment-graph-price-icon>img {
width: 100%;
height: 100%;
}
.investment-graph-price-percentage {
font-size: 12px;
font-family: "SourceSans3-Regular";
color: var(--custom-00B800);
}
.investment-graph-container-sect-two-hd {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 54px;
}
.investment-graph-container-sect-two-hd-tle {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
}
.investment-graph-container-sect-two-hd-lnk {
font-size: 14px;
font-family: "SourceSans3-Regular";
color: var(--custom-252525);
}
.invest-amt {
font-size: 48px;
font-family: "SourceSans3-SemiBold";
color: black;
}
.invest-amt-currency {
font-size: 16px;
color: var(--custom-333333);
font-family: "SourceSans3-Regular";
}
.invest-prices-cont {
display: flex;
align-items: center;
flex-direction: row;
gap: 12px;
margin-bottom: 20px;
}
.invest-prices-cont>span {
flex: 1;
}
.invest-amt-cont {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
height: max-content;
gap: 8px;
margin-bottom: 54px;
}
.proceed-payment-btn {
height: 46px;
width: 100%;
border-radius: 32px;
box-shadow: 0px 8px 16px -4px var(--custom-rgba11);
background-color: var(--custom-2181FA);
display: flex;
align-items: center;
justify-content: center;
color: var(--custom-FDFDFD);
font-size: 16px;
font-family: "SourceSans3-SemiBold";
}
.investment-graph-container-sect-one {
width: 67%;
}
.investment-graph-container-sect-two {
padding: 12px;
border: 1px solid var(--custom-F2F2F2);
border-radius: 12px;
width: 33%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 40px;
}
.line-chart {
height: 260px !important;
max-width: 609px;
}
.abt-inv-hd {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: black;
margin-bottom: 7px;
}
.abt-inve-cont,
.inv-details-card-cont {
padding: 20px;
background-color: white;
border-radius: 12px;
}
.abt-inve-cont {
width: 70%;
}
.inv-details-card-cont {
display: flex;
flex-direction: column;
gap: 12px;
width: 30%;
}
.inv-details-card {
display: flex;
flex-direction: row;
justify-content: space-between;
color: var(--custom-404040);
font-size: 20px;
}
.inv-details-card-tle {
font-family: "SourceSans3-Regular";
}
.inv-details-card-stle,
.inv-details-card-hd {
font-family: "SourceSans3-SemiBold";
}
.inv-details-card-hd {
font-family: "SourceSans3-SemiBold";
font-size: 20px;
}
.abt-inv-cont {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 20px;
}
.abt-inv-content {
font-size: 16px;
}
.inv-youtube-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.inv-youtube-grid-item {
padding: 16px;
border: 1px solid var(--custom-EDEDED);
border-radius: 12px;
background-color: white;
}
.inv-youtube-grid-item-tle {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: black;
margin-bottom: 3px;
}
.inv-youtube-grid-item-stle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-252525);
margin-bottom: 12px;
}
.inv-youtube-grid-item-vid {
width: 100%;
height: 160px;
border-radius: 8px;
overflow: hidden;
}
.inv-youtube-grid-item-vid>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.inv-detiail-container {
display: flex;
flex-direction: row;
border: 1px solid var(--custom-F2F2F2);
padding: 12px;
border-radius: 8px;
justify-content: space-between;
align-items: center;
margin: 8px 0px;
background-color: var(--custom-FAFCFF);
}
.inv-detiail-container-sct-one {
display: flex;
align-items: center;
flex-direction: row;
gap: 4px;
}
.inv-detiail-container-sct-one-img {
height: 40px;
width: 40px;
border-radius: 50%;
background-color: var(--custom-F2F2F2);
display: flex;
align-items: center;
justify-content: center;
}
.inv-detiail-container-sct-one-img>img {
height: 20px;
width: 20px;
}
.inv-detiail-container-sct-two-label {
display: flex;
flex-direction: row;
gap: 4px;
align-items: center;
}
.inv-detiail-container-sct-two-amt {
font-size: 16px;
color: var(--custom-333333);
font-family: "SourceSans3-SemiBold";
}
.inv-detiail-container-sct-two-tle {
font-size: 12px;
color: var(--custom-FF0000);
font-family: "SourceSans3-Regular";
}
.inv-detiail-container-dte {
font-size: 12px;
color: var(--custom-333333);
font-family: "SourceSans3-Regular";
}
.cont-inv-link {
height: 38px;
padding: 0px 16px;
box-shadow: 0px 8px 16px -4px var(--custom-rgba16);
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--custom-252525);
font-family: "SourceSans3-SemiBold";
font-size: 14px;
color: var(--custom-FDFDFD);
}
.inv-detiail-container-wrapper {
display: none;
padding: 0px var(--mobile-padding);
}
@media only screen and (max-width: 1041px) {
.calculator-details-sect-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 996px) {
.investment-graph-container {
flex-direction: column-reverse;
gap: 8px;
padding: 0px;
}
.financial-overview-container {
flex-direction: column;
gap: 8px;
padding: 0px;
}
.investment-graph-container-sect-one,
.investment-graph-container-sect-two {
width: 100%;
}
.investment-graph-container-sect-two {
margin-top: 0px;
}
}
@media only screen and (max-width: 948px) {
.calc-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 881px) {
.abt-inv-cont {
flex-direction: column;
}
.abt-inve-cont,
.inv-details-card-cont {
width: 100%;
}
.inv-youtube-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 600px) {
.investment-graph-container-sect-two,
.investment-graph-container-sect-one {
padding: 12px 16px;
border-radius: 0px;
border: none;
}
.investment-graph-container-sect-two {
border-bottom: 1px solid var(--custom-F2F2F2);
}
.inv-youtube-grid {
grid-template-columns: repeat(1, 1fr);
}
.cre-calc-video {
height: 200px;
}
.calculator-details-sect-grid-item {
padding: 8px;
}
.calculator-details-sect-grid-item-tle,
.calculator-details-sect-grid-item-stle {
font-size: 12px;
}
.calculator-details-sect-grid {
margin-bottom: 12px;
}
.noi-calcu-wrapper {
margin-bottom: 0px;
}
.calc-details-wrapper {
margin-top: 0px;
}
.calc-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 12px;
padding: 20px var(--mobile-padding) 40px var(--mobile-padding);
}
.calc-grid-item,
.support-team-grid-item {
padding: 12px;
}
.calc-grid-item-img {
height: 100px;
}
.abt-inv-cont {
gap: 12px;
}
.capital-growth-calc-image {
width: 120.8px;
height: 40px;
}
.calc-grid-item-tle,
.calc-grid-item-stle,
.calc-grid-item-user-card {
margin-bottom: 8px;
}
.calc-grid-item-tle {
font-size: 16px;
}
.calc-grid-item-stle,
.support-team-grid-item-stle {
font-size: 14px;
}
.calc-grid-item-icon {
height: 16px;
width: 16px;
}
.calc-grid-item-user-label {
font-size: 12px;
}
.calc_link {
height: 42px;
font-size: 14px;
}
.support-team-grid-item-img {
height: 180px;
}
.support-team-grid-item-tle {
font-size: 16px;
}
.support-team-grid-item-stle {
font-size: 14px;
margin-bottom: 10px;
}
.support-team-grid-item-lnk {
height: 38px;
margin-bottom: 18px;
}
.support-team-grid-item-lnk-tle,
.active-tab,
.total-contribute-tle,
.total-contribute-stle,
.income-inv-tle {
font-size: 14px !important;
}
.noi-calc-vid {
width: 80px;
height: 80px;
}
.chart-indicator {
height: 8px;
width: 8px;
}
.chart-indicator-tle {
font-size: 12px;
}
.line-chart {
height: auto !important;
width: auto;
}
.investment-graph-tle {
font-size: 14px;
margin-bottom: 4px;
}
.investment-graph-price-cont {
margin-bottom: 8px;
}
.inv-details-card-cont {
padding: 16px;
}
.investment-graph-price {
font-size: 20px;
}
.investment-graph-container-sect-two-hd,
.invest-amt-cont {
margin-bottom: 24px;
}
.investment-graph-container-sect-two-hd-tle,
.invest-amt-currency,
.investment-graph-container-sect-two-hd-lnk,
.abt-inv-hd,
.abt-inv-content,
.inv-details-card-hd,
.inv-details-card {
font-size: 14px;
}
.inv-details-card-cont {
margin-bottom: 8px;
}
.invest-amt {
font-size: 24px;
}
.proceed-payment-btn {
height: 42px;
font-size: 14px;
}
.inv-youtube-grid-item {
padding: 12px var(--mobile-padding);
border: 1px solid var(--custom-EDEDED);
border-radius: 0px;
}
.inv-youtube-grid-item-tle {
font-size: 14px;
}
.inv-youtube-grid-item-stle {
font-size: 12px;
margin-bottom: 8px;
}
.inv-youtube-grid-item-vid {
height: 160px;
}
.inv-youtube-grid {
gap: 12px;
}
.inv-detiail-container-wrapper {
display: block;
}
}
/* ******************* End :: Calculator Styles ******************************** */
/******************** Start :: Courses ******************************** */
.course-details-content {
padding: 0px 24px 0px 0px;
gap: 20px;
margin-bottom: 0px;
}
.settings-details {
gap: 20px;
padding: 0px;
}
.courses-tab-btns {
display: flex;
flex-direction: row;
gap: 16px;
margin-bottom: 24px;
z-index: 10;
}
.course-content-wrapper {
padding: 20px 24px;
}
.course-details-main {
background: white !important;
}
/* .dash-content-sect-one {
position: sticky;
top: 86px;
right: 0px;
left: 0px;
z-index: 99;
background-color: var(--custom-F8F9FA);
} */
.all-courses-btn,
.pending-courses-btn,
.completed-courses-btn {
height: 36px;
font-size: 20px;
color: var(--custom-252525);
border-bottom: 2px solid transparent;
font-family: "SourceSans3-Regular";
transition: color 0.5s ease, border-bottom 0.5s ease, all 0.5s ease;
}
.active-course-btn {
font-family: "SourceSans3-SemiBold" !important;
border-bottom: 2px solid var(--custom-2181FA)
}
.all-courses-section,
.pending-courses-section,
.completed-courses-section,
.course-desc-section,
.course-resou-section {
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
opacity: 0;
transform: translateY(10px);
display: none;
}
.all-courses-section.active,
.pending-courses-section.active,
.completed-courses-section.active,
.course-desc-section.active,
.course-resou-section.active {
opacity: 1;
transform: translateY(0);
display: block;
}
.courses-section {
display: flex;
flex-direction: row;
gap: 20px;
height: max-content;
}
.courses-section-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.courses-grid-item {
background-color: white;
border: 1px solid var(--custom-FDFDFD);
border-radius: 12px;
padding: 12px;
flex:1;
}
.courses-grid-item-img {
height: 200px;
width: 100%;
border-radius: 8px;
overflow: hidden;
margin-bottom: 16px;
}
.courses-grid-item-img>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.courses-grid-item-tle,
.courses-grid-item-stle,
.courses-grid-item-desc,
.course-tutor-card,
.course-progress {
margin-bottom: 10px;
}
.courses-grid-item-tle {
color: var(--custom-252525);
font-family: "SourceSans3-SemiBold";
font-size: 16px;
}
.courses-grid-item-stle {
color: var(--custom-252525);
font-family: "SourceSans3-SemiBold";
font-size: 24px;
}
.courses-grid-item-desc {
color: var(--custom-737373);
font-family: "SourceSans3-Regular";
font-size: 16px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.course-tutor-card {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
}
.course-tutor-img {
height: 32px;
width: 32px;
border-radius: 100%;
overflow: hidden;
}
.course-tutor-img>img {
object-fit: cover;
height: 100%;
width: 100%;
}
.course-tutor-tle {
color: var(--custom-252525);
font-size: 16px;
font-family: "SourceSans3-Regular";
}
.take-course-link {
display: flex;
align-items: center;
justify-content: center;
height: 42px;
gap: 4px;
border: 0.5px solid var(--custom-2181FA);
border-radius: 8px;
}
.take-course-lnk-tle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-2181FA);
}
.take-course-lnk-icon {
height: 20px;
width: 20px;
}
.take-course-lnk-icon>img {
height: 100%;
width: 100%;
}
.course-progress-label {
font-size: 14px;
color: var(--custom-252525);
font-family: "SourceSans3-SemiBold";
margin-bottom: 3px;
}
.course-progress-cont {
display: flex;
flex-direction: row;
gap: 2px;
}
.course-progress-cont>span {
flex: 1;
background-color: var(--custom-EBF4FF);
height: 4px;
width: 100%;
}
.active-course-progess {
background-color: var(--custom-2181FA) !important;
}
.course-progress-label-cont {
display: flex;
align-items: center;
flex-direction: row;
gap: 4px;
margin-bottom: 5px;
}
.course-progress-comp-icon {
height: 20px;
width: 20px;
}
.course-progress-comp-icon>img {
height: 100%;
width: 100%;
}
.courses-section-two,
.courses-details-section-two {
width: 33%;
height: max-content;
}
.courses-details-section-two {
padding: 20px 12.5px;
border-left: 1px solid var(--custom-EDEDED);
}
.courses-section-two-card {
background: white;
border: 1px solid var(--custom-FDFDFD);
border-radius: 12px;
padding: 16px 12px;
}
.courses-section-two-card {
margin-bottom: 20px;
}
.money-img {
width: 80px;
height: 70.01px;
margin-bottom: 14px;
}
.money-img>img {
height: 100%;
width: 100%;
}
.money-img-tle {
font-size: 20px;
color: black;
font-family: "SourceSans3-Regular";
}
.course-details-tle {
margin-bottom: 4px;
font-size: 24px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
}
.course-details-stle-cont {
display: flex;
align-items: center;
flex-direction: row;
gap: 8px;
margin-bottom: 16px;
}
.course-details-stle-cont>span {
font-size: 16px;
color: var(--custom-737373);
font-family: "SourceSans3-SemiBold";
}
.course-details-stle-ind {
height: 6px;
width: 6px;
border-radius: 100%;
background-color: var(--custom-D9D9D9);
}
.course-details-image {
height: 350px;
border-radius: 8px;
width: 100%;
overflow: hidden;
margin-bottom: 16px;
}
.course-details-image>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.descr-resource-btns {
display: flex;
align-items: center;
flex-direction: row;
gap: 16px;
margin-bottom: 16px;
}
.course-desc-btn,
.course-resource-btn {
height: 36px;
border-bottom: 2px solid transparent;
font-size: 20px;
color: var(--custom-252525);
font-family: "SourceSans3-Regular";
transition: color 0.5s ease, border-bottom 0.5s ease, all 0.5s ease;
}
.course-details-active-btn {
border-bottom: 2px solid var(--custom-2181FA);
font-family: "SourceSans3-SemiBold";
}
.course-details-wrapper {
position: relative;
height: max-content;
transition: height 5s ease;
}
.active-course-btn {
border-bottom: 1.5px solid var(--custom-2181FA) !important;
}
.course-desc-section-content {
display: flex;
flex-direction: row;
gap: 16px;
justify-content: space-between;
}
.course-desc-section-one {
color: var(--custom-737373);
font-family: "SourceSans3-Regular";
font-size: 16px;
line-height: 25.6px;
}
.bottom-section-one {
width: 60%;
}
.course-desc-section-two {
padding: 12px;
background-color: var(--custom-F5F9FF);
border: 1px solid var(--custom-FDFDFD);
border-radius: 12px;
width: 40%;
}
.course-resou-section-hd {
font-size: 16px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
margin-bottom: 10px;
}
.course-resou-section-pf-card {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 13px;
}
.course-resou-section-pf-img {
height: 32px;
width: 32px;
border-radius: 50%;
overflow: hidden;
}
.course-resou-section-pf-img>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.course-resou-section-pf-tle {
font-size: 16px;
color: var(--custom-252525);
font-family: "SourceSans3-Regular";
}
.course-resou-section-pf-desc {
font-size: 16px;
color: var(--custom-737373);
font-family: "SourceSans3-Regular";
line-height: 25.6px;
}
.courses-details-section-two-tle {
font-size: 20px;
color: black;
font-family: "SourceSans3-SemiBold";
margin-bottom: 8px;
}
.courses-details-cont-tle {
margin-bottom: 6px;
font-size: 14px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-737373);
}
.courses-details-prog {
display: flex;
align-items: center;
gap: 2px;
margin-bottom: 8px;
}
.courses-details-prog>span {
height: 4px;
flex: 1;
background-color: var(--custom-EBF4FF);
}
.active-courses-details-prog {
background-color: var(--custom-2181FA) !important;
}
.courses-details-prog-card {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 7px;
}
.progress-circle-cont {
position: relative;
}
.progress-circle-cont-label {
position: absolute;
top: 41%;
font-size: 16px;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
color: var(--custom-737373);
font-family: "SourceSans3-SemiBold";
}
.progress-circle {
width: 40px;
height: 40px;
transform: rotate(-90deg);
}
circle {
stroke-width: 4;
fill: transparent;
}
.bg {
stroke: #f0f0f0;
}
.progress-full,
.progress-half {
stroke: var(--custom-2181FA);
stroke-linecap: round;
stroke-dashoffset: 47.1;
transition: stroke-dashoffset 0.5s ease;
}
.progress-full {
stroke-dasharray: 200;
}
.progress-half {
stroke-dasharray: 60.2;
}
.courses-details-prog-tle {
font-size: 16px;
color: black;
font-family: "SourceSans3-Regular";
margin-bottom: 4px;
}
.courses-details-lck {
height: 20px;
width: 20px;
margin-bottom: 6px;
}
.courses-details-lck>img {
height: 100%;
width: 100%;
}
.courses-details-prog-empty {
display: flex;
flex-direction: row;
align-items: center;
gap: 2px;
}
.inv-rgt-way-sct {
padding-bottom: 5px;
border-bottom: 1px solid var(--custom-DBDBDB);
}
.discussion-comment-sect {
flex: 1;
width: 100%;
}
.discussion-section-cont {
display: flex;
flex-direction: row;
gap: 8px;
margin-top: 8px;
}
.discussion-section-hd {
font-size: 20px;
color: var(--custom-252525);
font-family: "SourceSans3-SemiBold";
}
.discussion-section-pf-img {
height: 44px;
width: 44px;
border-radius: 50%;
overflow: hidden;
}
.discussion-section-pf-img>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.discussion-comment-sect-hd {
display: flex;
gap: 4px;
flex-direction: row;
align-items: center;
}
.discussion-pf-sect {
margin-top: 4px;
}
.discussion-comment-sect-pin {
height: 16px;
width: 16px;
}
.discussion-comment-sect-pin>img {
height: 100%;
width: 100%;
}
.discussion-comment-sect-tle {
font-size: 12px;
color: var(--custom-252525);
font-family: "SourceSans3-Regular";
}
.discussion-pf-sect {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.discussion-pf-sect-one {
display: flex;
align-items: center;
gap: 4px;
}
.discussion-pf-sect-one-tle {
font-size: 16px;
color: var(--custom-252525);
font-family: "SourceSans3-SemiBold";
}
.discussion-pf-sect-verify-icon {
height: 20px;
width: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.discussion-pf-sect-verify-icon>img {
height: 100%;
width: 100%;
}
.discussion-pf-tle {
font-size: 12px;
color: var(--custom-252525);
padding-top: 4px;
}
.discussion-pf-sect-verify-icon>img {
height: 100%;
width: 100%;
}
.discussion-com-desc-card {
padding: 8px;
border-radius: 8px;
background-color: var(--custom-EBF4FF);
width: 100%;
margin-bottom: 8px;
}
.discussion-com-desc-card-foot-tle {
font-size: 14px;
font-family: "SourceSans3-Regular";
line-height: 22.4px;
color: var(--custom-252525);
}
.discussion-section {
padding: 12px 0px 8px 0px;
}
.replies-section {
padding-top: 12px;
}
.discussion-section,
.reply-content {
border-bottom: 1px solid var(--custom-DBDBDB);
}
.reply-content-last {
border-bottom: none;
}
.reply-content {
padding-bottom: 8px;
}
.discussion-content,
.reply-content {
font-size: 14px;
color: var(--custom-252525);
font-family: "SourceSans3-Regular";
line-height: 22.4px;
}
.discussion-content {
margin-bottom: 8px;
}
.discussion-action-button {
display: flex;
align-items: center;
flex-direction: row;
gap: 12px;
}
.discuss-reply-btn {
display: flex;
align-items: center;
flex-direction: row;
gap: 4px;
}
.discuss-reply-btn-icon {
height: 16px;
width: 16px;
}
.discuss-reply-btn-icon>img {
height: 100%;
width: 100%;
}
.discuss-reply-btn-tle,
.discussion-action-label {
font-size: 14px;
color: var(--custom-252525);
font-family: "SourceSans3-Regular";
}
.discussion-action-divider {
height: 6px;
width: 6px;
border-radius: 50%;
background-color: var(--custom-DBDBDB);
}
.discussion-action-label {
font-size: 14px;
}
.replies-section-hd {
font-size: 16px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
}
.bottom-section-wrapper {
display: flex;
flex-direction: row;
gap: 16px;
justify-content: space-between;
}
.resources-card {
display: flex;
flex-direction: row;
gap: 5px;
justify-content: space-between;
align-items: center;
border: 1px solid var(--custom-EDEDED);
border-radius: 8px;
padding: 14px 12px;
margin-bottom: 12px
}
.resources-card-sect-one {
display: flex;
flex-direction: row;
align-items: center;
gap: 9px;
}
.resources-card-img {
height: 48px;
width: 48px;
}
.resources-card-img>img {
height: 100%;
width: 100%;
}
.resources-card-tle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: black;
}
.resources-card-stle {
font-size: 14px;
font-family: "SourceSans3-Regular";
color: black;
}
.resources-card-btn {
height: 14px;
width: 14px;
}
.resources-card-btn>img {
height: 100%;
width: 100%;
}
.chat-icon {
position: fixed;
bottom: 32px;
right: 32px;
background-color: var(--custom-2181FA);
color: white;
border-radius: 50%;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 24px;
box-shadow: 0px 10px 32px -4px var(--custom-rgba14),
0px 6px 14px -6px var(--custom-rgba15);
z-index: 99999;
}
.chat-icon>img {
height: 40px;
width: 40px;
}
.chat-popup {
position: fixed;
bottom: 128px;
right: 12px;
width: 450px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transform: translateY(100%);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
z-index: 9999999999;
}
.chat-popup.active {
transform: translateY(0);
opacity: 1;
}
.chat-header {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
height: 56px;
padding: 0px 20px;
position: sticky;
top: 0;
right: 0;
left: 0;
}
.chat-header-tle {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: black;
}
.chat-header-btn {
height: 24px;
width: 24px;
}
.chat-header-btn>img {
height: 100%;
width: 100%;
}
.chat-footer {
position: relative;
padding: 10px 12px 20px 20px;
}
.send-msg-icon {
height: 24px;
width: 24px;
position: absolute;
top: 11px;
right: 23px;
}
.send-msg-icon>img {
height: 100%;
width: 100%;
}
.chat-footer>input {
flex: 1;
height: 46px;
width: 100%;
border-radius: 32px;
border: 1px solid var(--custom-F2F2F2);
background-color: white;
font-size: 14px;
padding: 0px 16px;
}
.chat-footer>input:focus {
outline: none;
}
.chat-body {
height: 300px;
width: 100%;
overflow: scroll;
display: flex;
flex-direction: column;
flex-direction: column-reverse;
gap: 14px;
padding: 0px 12px 20px 20px;
}
.your-chat,
.recipient-chat {
display: flex;
flex-direction: row;
}
.your-chat>p,
.recipient-chat>p {
background-color: var(--custom-F5F9FF);
padding: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
font-size: 16px;
line-height: 25.6px;
}
.your-chat>p {
background-color: var(--custom-F5F9FF);
border-bottom-right-radius: 8px;
}
.recipient-chat>p {
background-color: var(--custom-2181FA);
border-bottom-left-radius: 8px;
color: var(--custom-FDFDFD);
}
.recipient-chat {
justify-content: end;
}
@media only screen and (max-width: 961px) {
.course-details-content {
flex-direction: column;
margin-bottom: 70px;
}
.course-content-wrapper,
.courses-details-section-two {
width: 100%;
}
.course-details-content {
padding: 0px;
}
}
@media only screen and (max-width: 927px) {
.courses-section-two {
display: none;
}
.courses-section {
flex-direction: column;
gap: 8px;
}
.cre-analyst-details-search-mobile {
display: block;
}
.cre-analyst-details-search-mobile>input {
height: 38px;
}
}
@media only screen and (max-width: 600px) {
.course-details-content,
.course-content-wrapper {
padding: 0px;
}
.courses-section-grid {
grid-template-columns: repeat(1, 1fr);
gap: 8px;
}
.dash-content {
padding-left: var(--mobile-padding);
padding-right: var(--mobile-padding);
padding-top: 8px;
}
.courses-tab-btns {
gap: 12px;
margin-bottom: 12px;
}
.all-courses-btn,
.pending-courses-btn,
.completed-courses-btn {
height: 26px;
font-size: 14px;
color: var(--custom-252525);
}
.courses-grid-item-img {
height: 120px;
margin-bottom: 6px;
}
.courses-grid-item-tle,
.courses-grid-item-stle,
.courses-grid-item-desc,
.course-tutor-card,
.course-progress {
margin-bottom: 6px;
}
.courses-grid-item-tle {
font-size: 12px;
}
.courses-grid-item-stle {
font-size: 14px;
}
.courses-grid-item-desc {
font-size: 12px;
line-height: 19.2px;
}
.course-tutor-img {
height: 20px;
width: 20px;
}
.course-tutor-tle {
color: var(--custom-252525);
font-size: 12px;
}
.take-course-link {
height: 38px;
}
.take-course-lnk-tle {
font-size: 14px;
}
.course-progress-label {
font-size: 12px;
}
.course-progress-label-comp {
margin-top: 2px;
margin-bottom: 0px;
}
.course-progress-cont>span {
height: 3px;
}
.course-progress-comp-icon {
height: 15px;
width: 15px;
}
.bottom-section-wrapper {
flex-direction: column;
}
.bottom-section-one,
.course-desc-section-two {
width: 100%;
}
.course-details-tle {
font-size: 16px;
}
.course-details-stle-cont,
.descr-resource-btns {
margin-bottom: 12px;
}
.course-details-stle-cont>span {
font-size: 12px;
}
.course-details-image {
height: 200px;
margin-bottom: 12px;
}
.descr-resource-btns {
gap: 12px;
}
.course-desc-btn,
.course-resource-btn {
height: 26px;
font-size: 14px;
}
.bottom-section-wrapper {
gap: 8px;
}
.course-resou-section-hd {
font-size: 14px;
margin-bottom: 8px;
}
.course-resou-section-pf-card {
margin-bottom: 9px;
}
.course-resou-section-pf-img {
height: 20px;
width: 20px;
}
.course-resou-section-pf-tle {
font-size: 14px;
}
.course-resou-section-pf-desc {
font-size: 14px;
line-height: 22.4px;
}
.course-details-content {
gap: 12px;
}
.courses-details-prog {
margin-bottom: 12px;
}
.courses-details-section-two {
padding: 0px;
border-left: none;
}
.courses-details-section-two-tle {
font-size: 14px;
}
.progress-circle {
width: 32px;
height: 32px;
}
.progress-circle-cont-label {
font-size: 14px;
top: 41%;
}
.discussion-section-hd {
font-size: 14px;
}
.discussion-section-pf-img {
height: 32px;
width: 32px;
}
.discussion-pf-sect,
.discussion-content {
margin-bottom: 4px;
}
.discussion-pf-sect-one-tle {
font-size: 14px;
}
.discussion-pf-sect-verify-icon {
height: 18px;
width: 18px;
}
.discussion-pf-tle {
font-size: 10px;
padding-top: 0px;
}
.replies-section {
padding-top: 8px;
}
.inv-rgt-way-sct {
padding-left: 4px;
padding-right: 4px;
}
.resources-card {
padding: 12px;
}
.resources-card-img {
height: 40px;
width: 40px;
}
.resources-card-stle,
.resources-card-tle {
font-size: 14px;
}
.resources-card-btn {
height: 11.67px;
width: 11.67px;
}
.chat-popup {
position: fixed;
bottom: 0px;
right: 0;
left: 0;
height: 50%;
width: 100%;
overflow-y: auto;
height: calc(50vh);
}
.chat-icon {
bottom: 70px;
right: 32px;
border-radius: 50%;
width: 50px;
height: 50px;
}
.chat-icon>img {
height: 25px;
width: 25px;
}
.your-chat>p,
.recipient-chat>p {
font-size: 14px;
line-height: 22.4px;
}
}
/* ******************* End :: Courses ******************************** */
/******************** Start :: REI Courses ******************************** */
.courses_grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 24px;
width: calc(100% - 48px);
}
.course_img {
width: 100%;
border-radius: 8px;
overflow: hidden;
margin-bottom: 16px;
}
.courses_item {
background-color: white;
border: 1px solid var(--custom-FDFDFD);
border-radius: 12px;
padding: 12px;
flex:1;
}
/* ******************* End :: REI Courses ******************************** */
/******************** Start :: GRID ******************************** */
.grid2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
flex-wrap: wrap;
gap: 16px;
margin-bottom: 24px;
width: calc(100% - 48px);
}
.grid2_item {
background-color: white;
border: 1px solid var(--custom-FDFDFD);
border-radius: 12px;
padding: 12px;
flex:1 1 450px;
}
@media only screen and (max-width: 600px) {
.grid2 {
display: flex;
flex-direction:column;
gap: 8px;
width: 100%;
}
.grid2_item {
width: 100%;
padding-bottom: 12px;
flex:1 1 0px;
}
}
/* ******************* End :: GRID ******************************** */
/******************** Start :: Exterior ******************************** */
.reidocs_heading {
font-size:18px;
font-family: "Times New Roman", serif;
line-height:22px;
font-weight:600;
margin-top:2rem;
margin-bottom:5px;
}
.reidocs_text {
margin-bottom:5px;
text-align:justify;
}
.reidocs_link {
text-align:justify;
font-weight:800;
color: #0563c1;
font-size: 16px;
text-decoration:underline;
margin-bottom: 25px;
}
/* ******************* End :: Exterior ******************************** */
/******************** Start :: Investment Styles ******************************** */
.overview-info {
display: flex;
align-items: center;
flex-direction: row;
gap: 8px;
justify-content: space-between;
padding: 12px 16px;
background-color: var(--custom-FFFAE0);
border-radius: 12px;
}
.overview-info-sct-one {
display: flex;
align-items: center;
flex-direction: row;
gap: 12px;
}
.go-course-btn {
display: flex;
align-items: center;
flex-direction: row;
gap: 6px;
}
.go-course-btn-tle {
font-size: 20px;
color: var(--custom-2181FA);
font-family: "SourceSans3-Regular";
white-space: nowrap;
}
.go-course-btn-icon {
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.go-course-btn-icon>img {
height: 100%;
width: 100%;
}
.overview-info-icon {
height: 32px;
width: 32px;
flex-shrink: 0;
}
.overview-info-icon>img {
height: 100%;
width: 100%;
}
.overview-info-tle {
font-size: 20px;
color: black;
font-family: "SourceSans3-Regular";
}
.tb-wrapper {
width: 100%;
height: 100%;
overflow: auto;
}
.mytb {
flex: 1;
border-collapse: collapse;
width: 100%;
display: none;
}
.mytb.active-table {
display: table;
/* Show active table */
}
th {
text-align: start;
height: 56px;
padding-left: 16px;
padding-right: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-404040);
font-size: 20px;
}
tbody>tr {
height: 56px;
}
tbody>tr>td {
padding-left: 16px;
padding-right: 16px;
white-space: nowrap;
font-size: 20px;
font-family: "SourceSans3-Regular";
}
.sn-hd {
width: 30px;
}
.type-sect-icon {
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.type-sect-icon>img {
height: 100%;
width: 100%;
}
.type-sect {
display: flex;
align-items: center;
gap: 4px;
}
.success-row {
background-color: var(--custom-FAFFFA);
}
.success-row>td:last-child {
color: var(--custom-00B800);
font-family: "SourceSans3-SemiBold";
}
.error-row {
background-color: var(--custom-FFFAFA);
}
.error-row>td:last-child {
color: var(--custom-FF0000);
font-family: "SourceSans3-SemiBold";
}
.trans-header-buttons {
display: flex;
align-items: center;
gap: 16px;
border-bottom: 1px solid var(--custom-EDEDED);
}
.trans-header-buttons>button {
height: 40px;
font-size: 20px;
color: var(--custom-737373);
font-family: "SourceSans3-Regular";
border-bottom: 2px solid transparent;
transition: color 0.2s ease, border-bottom 0.2s ease, all 0.2s ease;
}
.trans-header-button-active {
color: var(--custom-2181FA) !important;
border-bottom: 2px solid var(--custom-2181FA) !important;
font-family: "SourceSans3-SemiBold" !important;
}
.inve-detail-cont-sect-one-tle {
font-size: 20px;
color: var(--custom-FDFDFD);
font-family: "SourceSans3-SemiBold";
}
.inve-detail-cont-sect-one-stle {
font-size: 16px;
color: var(--custom-FDFDFD);
font-family: "SourceSans3-Regular";
margin-bottom: 18px;
line-height: 25.6px;
}
.inve-detail-cont-sect-one-card {
display: flex;
flex-direction: row;
align-items: center;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.inve-detail-cont-sect-one-card>p {
font-size: 16px;
color: var(--custom-A3A3A3);
font-family: "SourceSans3-Regular";
}
.inve-detail-cont-sect-one-card>span {
height: 4px;
width: 20px;
border-radius: 32px;
background-color: var(--custom-A3A3A3);
}
.inve-detail-cont-sect-one-card-active>span {
background-color: var(--custom-1DAD05) !important;
}
.inve-detail-cont-sect-one-card-active>p {
color: var(--custom-FDFDFD) !important;
font-family: "SourceSans3-SemiBold" !important;
}
.inve-detail-cont-sect-two-tle {
font-size: 24px;
color: black;
font-family: "SourceSans3-SemiBold";
margin-bottom: 20px;
}
.rei-offer-card {
padding: 12px 16px;
border-radius: 12px;
display: flex;
flex-direction: row;
gap: 8px;
cursor: pointer;
}
.rei-offer-card.offer-active {
background-color: var(--custom-F5F9FF) !important;
}
.rei-offer-card-cont {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
.rei-offer-card-cont-tle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: black;
}
.invest-prices-cont {
display: flex;
align-items: center;
flex-direction: row;
gap: 12px;
margin-bottom: 8px;
}
.invest-amt-label {
text-align: center;
padding: 4px 8px;
border-radius: 8px;
border-radius: 8px;
font-size: 20px;
background-color: var(--custom-F7F7F7);
color: black;
font-family: "SourceSans3-Regular";
cursor: pointer;
}
.invest-price-tle {
font-family: "SourceSans3-Regular";
font-size: 16px;
color: black;
margin-bottom: 8px;
}
.acc-type-card,
.payment-mtd-card {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 8px;
border-radius: 12px;
cursor: pointer;
}
.acc-type-card {
padding: 12px 16px;
background-color: var(--custom-FDFDFD);
}
.payment-mtd-card {
background-color: var(--custom-F7F7F7);
height: 56px;
padding: 0px 16px;
}
.acc-type-card.offer-active {
background-color: var(--custom-F5F9FF) !important;
}
.payment-mtd-card.offer-active {
background-color: var(--custom-F5F9FF) !important;
}
.acc-type-wrapper {
margin-bottom: 20px;
}
.acc-type-card-cont,
.payment-mtd-card-cont {
display: flex;
flex-direction: column;
gap: 8px;
}
.payment-mtd-card-cont {
padding-bottom: 20px;
border-bottom: 1px solid var(--custom-DBDBDB);
margin-bottom: 20px;
}
.acc-type-cont-tle {
font-size: 16px;
color: var(--custom-252525);
font-family: "SourceSans3-Regular";
margin-bottom: 8px;
}
.inve-detail-review-sect-two {
padding: 32px 40px;
}
.inve-detail-review-sect-two-tle {
font-size: 24px;
font-family: "SourceSans3-SemiBold";
color: black;
margin-bottom: 4px;
}
.inve-detail-review-sect-two-stle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-737373);
line-height: 25.6px;
margin-bottom: 12px;
}
.review-container {
padding: 12px;
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 12px;
background-color: var(--custom-F5F9FF);
margin-bottom: 12px;
}
.review-card {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.review-card>p {
font-size: 16px;
color: black;
}
.review-card-tle {
font-family: "SourceSans3-Regular";
}
.review-card-stle {
font-family: "SourceSans3-SemiBold";
}
.review-link-cont {
display: flex;
flex-direction: column;
gap: 12px;
}
.review-edit-link,
.review-proceed-link {
height: 46px;
width: 100%;
font-size: 16px;
font-family: "SourceSans3-SemiBold";
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.review-edit-link {
margin-bottom: 12px;
border: 1px solid var(--custom-DBDBDB);
color: var(--custom-252525);
}
.review-proceed-link {
color: var(--custom-FDFDFD);
background-color: var(--custom-2181FA);
box-shadow: 0px 8px 16px -4px var(--custom-rgba11);
}
.inve-detail-agree-sect-two-logo {
width: 122px;
height: 40px;
margin-bottom: 12px;
}
.inve-detail-agree-sect-two-logo>img {
height: 100%;
width: 100%;
}
.inve-detail-agree-sect-two-tle {
font-size: 24px;
color: var(--custom-252525);
font-family: "SourceSans3-SemiBold";
margin-bottom: 12px;
}
.invest-agreement {
font-size: 20px;
color: var(--custom-252525);
font-family: "SourceSans3-Regular";
line-height: 32px;
margin-bottom: 12px;
}
.checkbox-container {
display: flex;
align-items: center;
gap: 9px;
font-size: 18px;
cursor: pointer;
position: relative;
margin-bottom: 16px;
width: 100%;
}
.iagree-terms {
font-family: "SourceSans3-Regular";
font-size: 20px;
color: var(--custom-252525);
white-space: wrap;
}
.proceed-cont {
display: flex;
flex-direction: row;
gap: 12px;
}
.agree-prev,
.agree-proceed {
height: 46px;
border-radius: 32px;
font-size: 16px;
font-family: "SourceSans3-SemiBold";
border-radius: 32px;
padding: 0px 32px;
display: flex;
align-items: center;
justify-content: center;
}
.agree-proceed {
color: var(--custom-FDFDFD);
background-color: var(--custom-2181FA);
}
.agree-prev {
border: 1px solid var(--custom-DBDBDB);
color: var(--custom-252525);
}
.inve-detail-completed-sect-two-img {
height: 272px;
width: 320px;
margin-bottom: 12px;
}
.inve-detail-completed-sect-two-img>img {
height: 100%;
width: 100%;
}
.inve-detail-completed-sect-two-tle {
font-size: 24px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
margin-bottom: 12px;
}
.inve-detail-completed-sect-two-stle {
font-size: 20px;
font-family: "SourceSans3-Regular";
color: var(--custom-252525);
line-height: 32px;
margin-bottom: 12px;
}
.inve-detail-completed-sect-two-lnk {
width: 100%;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--custom-2181FA);
color: var(--custom-FDFDFD);
box-shadow: 0px 8px 16px -4px var(--custom-rgba11);
font-size: 16px;
font-family: "SourceSans3-SemiBold";
border-radius: 32px;
}
.inve-detail-agree-sect-two-tle {
font-size: 20px;
color: black;
font-family: "SourceSans3-SemiBold";
margin-bottom: 12px;
}
.payment-mtd-card-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.card-det-tle {
font-size: 20px;
color: black;
font-family: "SourceSans3-SemiBold";
margin-bottom: 20px;
}
@media only screen and (max-width: 823px) {
.inve-detail-cont-sect-one,
.inve-detail-cont-sect-two {
padding: 89px 40px;
}
.inve-detail-cont-sect-two,
.inve-detail-review-sect-two,
.inve-detail-agree-sect-two,
.inve-detail-completed-sect-two,
.inve-detail-payment-sect-two {
width: 100%;
}
}
@media only screen and (max-width: 600px) {
.overview-info,
.overview-info-sct-one {
flex-direction: column;
align-items: start;
}
.overview-info {
padding: 12px;
}
.overview-info-icon {
height: 20px;
width: 20px;
}
.overview-info-tle {
font-size: 14px;
}
.go-course-btn-tle {
font-size: 12px;
}
.go-course-btn-icon {
height: 20px;
width: 20px;
margin-top: 0px;
}
tbody>tr>td,
th {
font-size: 14px;
}
th,
tbody>tr {
height: 46px;
height: 46px;
}
.type-sect-icon {
height: 20px;
width: 20px;
}
.trans-header-buttons {
padding-bottom: 5px;
}
.trans-header-buttons>button {
height: 30px;
font-size: 14px;
}
.inve-detail-cont-sect-two,
.inve-detail-review-sect-two,
.inve-detail-agree-sect-two,
.inve-detail-completed-sect-two,
.inve-detail-payment-sect-two {
padding: 10px 16px;
}
.inve-detail-wrapper,
.inve-ack-wrapper {
padding: 0px;
margin-bottom: 80px;
}
.inve-detail-cont {
border: none;
border-radius: 0px;
}
.inve-detail-cont-sect-two-tle {
font-size: 16px;
margin-bottom: 12px;
}
.rei-offer-card-cont-tle,
.invest-price-tle,
.acc-type-cont-tle {
font-size: 12px;
}
.rei-offer-card-cont,
.acc-type-wrapper,
.inv-off-form-input {
margin-bottom: 12px;
}
.rei-offer-card {
padding: 12px;
}
.invest-amt-label,
.review-card>p,
.iagree-terms {
font-size: 14px;
}
.acc-type-card {
padding: 12px;
}
.payment-mtd-card {
height: 48px;
}
.pf-st-cont-mb-wrapper {
padding: 12px var(--mobile-padding) 8px var(--mobile-padding);
}
.pf-st-cont-mb-inv-details {
margin-bottom: 0px;
}
.inve-detail-review-sect-two-tle {
font-size: 16px;
}
.inve-detail-review-sect-two-stle {
font-size: 12px;
line-height: 19.2px;
}
.review-container {
gap: 8px;
}
.review-link-cont {
flex-direction: row;
}
.review-edit-link,
.review-proceed-link {
height: 42px;
font-size: 14px;
}
.inve-detail-agree-sect-two-tle {
font-size: 16px;
}
.invest-agreement {
font-size: 14px;
line-height: 22.4px;
}
.checkbox-container {
margin-bottom: 12px;
}
.agree-prev,
.agree-proceed {
height: 42px;
font-size: 14px;
padding: 0px var(--mobile-padding);
flex: 1;
}
.inve-detail-completed-sect-two-img {
height: 200px;
width: 235.29px;
}
.inve-detail-completed-sect-two-stle {
font-size: 14px;
line-height: 22.4px;
}
.inve-detail-completed-sect-two-lnk {
height: 42px;
font-size: 14px;
}
.inve-detail-completed-sect-two-tle {
font-size: 24px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
margin-bottom: 12px;
}
.card-det-tle {
font-size: 16px;
color: black;
font-family: "SourceSans3-SemiBold";
margin-bottom: 16px;
}
.card-det-tle {
font-size: 16px;
margin-bottom: 16px;
}
.form-item-sect {
margin-bottom: 0px;
}
.card-form-item {
margin-bottom: 16px;
}
}
/* ******************* End :: Investment Styles ******************************** */
/******************** Start :: KYC Styles ******************************** */
.kyc-cont {
display: flex;
flex-direction: row;
box-shadow:
24px 24px 40px 0px var(--custom-rgba3),
-24px -24px 40px 0px var(--custom-rgba3);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
margin-top: 12px;
flex: 1;
background-color: var(--custom-F5F9FF);
/* overflow: hidden; */
}
.form-tle {
font-size: 14px;
color: var(--custom-737373);
font-family: "SourceSans3-Regular";
}
.kyc-desk-ind-active-start {
width: 4px;
height: 42px;
background-color: var(--custom-00B800);
}
.kyc-desk-ind-active, .kyc-desk-ind-inactive {
width: 4px;
flex: 1;
}
.kyc-desk-ind-active {
background-color: var(--custom-00B800);
}
.kyc-desk-ind-inactive {
background-color: var(--custom-DBDBDB);
}
.kyc-desk-ind-icon {
height: 28px;
width: 28px;
}
.kyc-desk-ind-icon>img {
height: 100%;
width: 100%;
}
.pf-st-sect-item-st-two {
margin-top: 63px;
}
.pf-st-sect-item-st-three,
.pf-st-sect-item-st-four, .pf-st-sect-item-st-five {
margin-top: 70px;
}
.pf-st-ind-img {
height: 512px;
margin-top: -32px;
}
.pf-st-ind-img-2 {
margin-top: 0px;
}
.kyc-cont-sect-one {
width: 40%;
padding-bottom: 41px;
border-top-left-radius: 20px;
background-color: white;
}
.kyc-cont-sect-two {
flex: 1;
padding-top: 24px;
padding-left: 24px;
padding-right: 24px;
padding-bottom: 24px;
}
.p-info-form {
flex: 1;
height: max-content;
box-shadow: 12px 12px 40px 0px var(--custom-rgba3);
background-color: white;
border-radius: 12px;
padding: 32px;
}
.key-p-inf-tle {
font-size: 24px;
font-family: "SourceSans3-SemiBold";
color: black;
}
.key-p-inf-stle {
margin-top: 2px;
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-737373);
margin-bottom: 20px;
}
.kyc-resd-btn-cont-mt {
margin-top: 20px;
}
.checkbox-container {
display: flex;
align-items: center;
gap: 9px;
font-size: 18px;
cursor: pointer;
user-select: none;
width: max-content;
position: relative;
}
.toggle-cont {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.lbl-text {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-333333);
margin-left: 6px;
}
.sw-dv {
width: 1px;
height: 24px;
background-color: var(--custom-EDEDED);
}
.pf-st-hd-lnk {
font-size: 14px;
font-family: "SourceSans3-Regular";
color: var(--custom-252525);
text-decoration: underline;
}
.pf-st-cont-mb {
display: none;
margin-top: 16px;
box-shadow:
4px 4px 12px 0px var(--custom-rgba2),
-4px -4px 12px 0px var(--custom-rgba2);
border-radius: 12px;
padding-bottom: 10px;
}
.pf-info-cont {
display: flex !important;
flex-direction: row;
justify-content: space-between;
padding-top: 10px;
padding-right: 16px;
padding-left: 16px;
}
.pf-st-ind-cont-mb {
display: flex;
flex-direction: row;
align-items: center;
height: 24px;
margin-top: 10px;
}
.pf-st-img {
height: 24px;
width: 24px;
flex-shrink: 0;
}
.pf-st-img>img {
width: 100%;
height: 100%;
}
.pf-st-ind-img-mb {
width: 100%;
height: 200px;
display: flex;
}
.pf-st-ind-mb-ln {
height: 2px;
width: 100%;
}
.pf-st-ind-mb-ln-active {
background-color: var(--custom-00B800);
}
.pf-st-hd-mb {
font-size: 14px;
}
.pf-st-ind-mb-ln-inactive {
background-color: var(--custom-DBDBDB);
}
.pf-st-ind-img-mb>img {
width: 100%;
height: 24px;
object-fit: contain;
}
.profile-image-cont {
height: 32px;
width: 32px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.profile-image-cont {
border: 1px solid var(--custom-2181FA);
}
.profile-image-cont>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.notification-indicator {
border-radius: 100%;
height: 6px;
width: 6px;
background-color: var(--custom-FF0000);
position: absolute;
right: 4px;
top: 0px;
}
.kyc-resd-btn-cont {
display: flex;
flex-direction: row;
gap: 16px;
}
@media only screen and (max-width: 1137px) {
.pf-st-sect-item-stle {
font-size: 16px;
}
}
@media only screen and (max-width: 1086px) {
.kyc-cont-sect-two {
padding-left: 20px;
padding-right: 20px;
}
}
@media only screen and (max-width: 965px) {
.kyc-cont-sect-one {
display: none;
}
.pf-st-cont-mb {
display: block;
background-color: white;
}
}
@media only screen and (max-width: 763px) {
.kyc-cont-sect-two {
padding: 0px;
}
}
@media only screen and (max-width: 600px) {
.kyc-cont-sect-two {
padding-top: 0px;
}
.p-info-form {
flex: 1;
box-shadow: none;
background-color: transparent;
border-radius: 0px;
padding: 0px;
}
.kyc-cont {
display: flex;
flex-direction: row;
box-shadow: none;
margin-top: 0px;
flex: 1;
background-color: transparent;
}
.key-p-inf-tle {
font-size: 16px;
}
.key-p-inf-stle {
font-size: 14px;
margin-bottom: 0px;
}
.kyc-auth-prcd, .kyc-auth-bk {
font-size: 14px;
height: 46px;
}
.kyc-resd-btn-cont-mt {
margin-top: 12px;
}
}
/* ******************* End :: KYC Styles ******************************** */
/******************** Start :: USDC ******************************** */
.usd_price {
font-size: 20px;
color: black;
font-family: "SourceSans3-SemiBold";
margin-bottom: 12px;
}
.usd_amount {
font-size: 20px;
color: black;
font-family: "SourceSans3-Bold";
margin-bottom: 8px;
}
@media only screen and (max-width: 600px) {
.usdc_price {
font-size:16px;
}
.usdc_amount {
font-size:16px;
}
}
/* ******************* End :: USDC ******************************** */
/******************** Start :: REI Styles ******************************** */
.gle-map-container {
width: 100%;
height: 200px;
margin-bottom: 20px;
}
.cre-analyst-details-tab-btn,
.inv-tab-button-cont {
display: flex;
flex-direction: row;
gap: 12px;
margin-bottom: 24px;
z-index: 10;
}
.inv-tab-button-cont>a {
white-space: nowrap;
}
.inv-tab-button-cont>a {
height: 50px;
padding: 0 24px;
font-size: 16px;
color: var(--custom-252525);
transition: background 0.3s, transform 0.2s;
}
.inv-tab-button-cont>a {
display: flex;
align-items: center;
justify-content: center;
}
.inv-tab-button-cont>a {
border-radius: 14px;
background-color: var(--custom-F2F2F2);
font-family: "SourceSans3-Regular";
}
.inv-tab-button-cont>a {
background-color: var(--custom-EDEDED);
}
.inv-tab-button-cont>a {
border-radius: 14px;
font-family: "SourceSans3-Regular";
}
.sections-wrapper {
position: relative;
width: 67%;
height: max-content;
}
.active-tab {
color: var(--custom-2181FA) !important;
font-family: "SourceSans3-SemiBold" !important;
font-size: 16px !important;
background-color: var(--custom-EBF4FF) !important;
}
.map-section {
height: 762px;
background-color: var(--custom-F2F2F2);
}
.listing-section,
.map-section,
.all-section,
.financial-tab-section,
.rei-capital-income-section,
.rei-capital-growth-section {
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
opacity: 0;
transform: translateY(10px);
display: none;
}
.listing-section.active,
.map-section.active,
.all-section.active,
.financial-tab-section.active,
.rei-capital-income-section.active,
.rei-capital-income-growth.active {
opacity: 1;
transform: translateY(0);
display: block;
}
.checkbox-container {
display: flex;
align-items: center;
gap: 9px;
font-size: 18px;
cursor: pointer;
user-select: none;
width: max-content;
position: relative;
}
.cat-check-tle {
font-family: "SourceSans3-Regular";
font-size: 20px;
color: var(--custom-252525);
}
.cat-checkbox-label {
height: 30px;
border-radius: 32px;
background-color: var(--custom-EBF4FF);
border-radius: 32px;
display: flex;
align-items: center;
justify-content: center;
color: var(--custom-252525);
padding: 0 12px;
font-size: 16px;
}
.cat-hd-content,
.cat-hd {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
height: 52px;
}
.cat-hd {
border-bottom: 1px solid var(--custom-EDEDED);
}
.listed-item-desc-card-wrapper {
padding: 24px 24px 0px 24px;
}
.listed-item-desc-card {
padding: 20px;
border-radius: 12px;
background-color: white;
}
.listed-item-desc-card-hd {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.listed-item-desc-card-hd-tle {
font-size: 24px;
color: black;
font-family: "SourceSans3-SemiBold";
}
.listed-item-desc-card-btn {
display: flex;
align-items: center;
flex-direction: row;
gap: 8px;
}
.listed-item-desc-card-stle-img {
height: 24px;
width: 24px;
}
.listed-item-desc-card-stle-img>img {
height: 100%;
width: 100%;
}
.listed-item-desc-card-stle {
font-size: 20px;
font-family: "SourceSans3-Regular";
color: var(--custom-737373);
}
.listed-item-desc-loca {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
margin-bottom: 23px;
}
.listed-item-desc-loca-icon {
height: 20px;
width: 20px;
}
.listed-item-desc-loca-icon>img {
height: 100%;
width: 100%;
}
.listed-item-desc-loca-tle {
font-size: 16px;
color: var(--custom-737373);
font-family: "SourceSans3-Regular";
}
.listed-item-desc-tle {
margin-bottom: 16px;
font-size: 24px;
font-family: "SourceSans3-SemiBold";
}
.listed-item-desc-cont {
font-size: 16px;
color: var(--custom-404040);
font-family: "SourceSans3-Regular";
line-height: 25.6px;
margin-bottom: 20px;
}
.listed-item-feat-tle {
font-size: 24px;
color: var(--custom-252525);
font-family: "SourceSans3-SemiBold";
margin-bottom: 16px;
}
.listed-item-feat-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
margin-bottom: 20px;
}
.listed-item-feat-grid-card {
background-color: var(--custom-F7F7F7);
color: var(--custom-252525);
border-radius: 8px;
padding: 8px 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.listed-item-feat-grid-card-tle {
font-size: 16px;
color: var(--custom-252525);
font-family: "SourceSans3-Regular";
line-height: 25.6px;
}
.listed-item-feat-grid-card-stle {
font-size: 24px;
font-family: "SourceSans3-SemiBold";
line-height: 38.4px;
}
.list-item-grid-item-pictures-cont {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 13px;
flex: 1;
flex-grow: 1;
height: 100%;
padding: 0px;
box-sizing: border-box;
}
.list-item-grid-item-picture>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.list-item-grid-item-picture>img,
.list-item-grid-item-picture-span>img {
flex: 1;
border-radius: 8px;
overflow: hidden;
}
.list-item-grid-item-picture>img,
.list-item-grid-item-picture-span>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.list-item-grid-item-picture {
height: 100%;
width: 100%;
}
.list-item-grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.list-item-grid-item-picture-span {
grid-row: span 2;
grid-column: span 2;
}
.noi-calcu-wrapper, .cre-calc-video-wrapper, .abt-inv-wrapper, .inv-youtube-wrapper, .monetary-section-wrapper {
padding: 0px 24px;
margin-bottom: 20px;
}
.noi-calcu-container {
display: flex;
flex-direction: row;
gap: 20px;
width: 100%;
padding: 20px;
background-color: white;
border-radius: 12px;
}
.noi-calcu-sect-one {
width: 60%;
background-color: white;
}
.noi-calcu-sect-two {
width: 39%;
height: max-content;
}
.noi-calcu-sect-one-hd {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: black;
line-height: 32px;
}
.noi-calcu-sect-one-tle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-737373);
margin-bottom: 20px;
}
.gross-income-cont {
padding: 12px;
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
background-color: var(--custom-F7F7F7);
border-radius: 8px;
margin-bottom: 20px;
}
.gross-income-notice-icon {
height: 24px;
width: 24px;
}
.gross-income-notice-icon>img {
height: 100%;
width: 100%;
}
.gross-income-tle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-333333);
}
.opera-incom-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.opera-incom-item-cont {
padding: 16px 20px;
border-radius: 8px;
background-color: var(--custom-FAFCFF);
flex: 1;
}
.opera-incom-item-tle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-252525);
}
.opera-incom-item-stle {
font-size: 32px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
}
.donot-chart-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
}
.donut-chart {
height: 200px;
width: 200px;
}
.donot-chart-ind-tle {
font-size: 20px;
color: var(--custom-252525);
font-family: "SourceSans3-SemiBold";
margin-bottom: 12px;
}
.donot-chat-ind-container {
display: flex;
flex-direction: row;
gap: 20px;
}
.donot-chart-ind-item {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.net-oper-ind,
.gross-oper-ind {
height: 20px;
width: 12px;
border-radius: 3px;
}
.net-oper-ind {
background-color: var(--custom-2181FA);
}
.gross-oper-ind {
background-color: var(--custom-1DAD05);
}
.net-oper-ind-tle {
color: var(--custom-7E8299);
font-size: 16px;
font-family: "SourceSans3-Regular";
}
.donot-chart-ind-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
}
.noi-calcu-sect-two {
border: 1px solid var(--custom-F2F2F2);
border-radius: 12px;
padding: 12px;
}
.redemption-modal-form-item>input {
background-color: white;
}
.calcu-btn {
width: 100%;
height: 46px;
box-shadow: 0px 8px 16px -4px var(--custom-rgba4);
background-color: var(--custom-2181FA);
border-radius: 32px;
font-size: 16px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-FDFDFD);
}
.financial-analysis-wrapper,
.feat-prop-wrapper {
margin-bottom: 20px;
padding: 0px 24px;
}
.financial-analysis-cont,
.feat-prop-cont {
padding: 20px;
border-radius: 12px;
background-color: white;
}
.financial-analysis-hd {
font-size: 20px;
color: black;
font-family: "SourceSans3-SemiBold";
margin-bottom: 20px;
}
.financial-analysis-grid-item {
display: flex;
flex-direction: column;
padding: 18px 12px;
border-radius: 12px;
background-color: var(--custom-FAFCFF);
}
.financial-analysis-grid-tle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-252525);
margin-bottom: 4px;
}
.financial-analysis-grid-stle {
color: var(--custom-252525);
font-family: "SourceSans3-SemiBold";
font-size: 24px;
line-height: 38.4px;
line-height: 25.6px;
margin-bottom: 8px;
}
.financial-analysis-grid-desc {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-737373);
}
.financial-analysis-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.accordion {
width: 100%;
background-color: #fff;
overflow: hidden;
}
.accordion-item {
/* border-top: 1px solid var(--custom-D9DBE9); */
}
.accordion-item-one {
border: none;
}
.accordion-header {
color: var(--custom-404040);
padding: 17px 0px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.3s ease;
font-family: "SourceSans3-SemiBold";
}
/* .accordion-header:hover {
background: #0056b3;
} */
.icon {
font-size: 28px;
transition: transform 0.3s ease;
color: var(--custom-170F49);
margin-left: 10px;
}
.accordion-content {
max-height: 0;
padding: 0px;
background: #fff;
color: #333;
overflow: hidden;
transition: max-height 0.5s ease, padding 0.5s ease;
}
.accordion-tle {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-404040);
}
.accordion-item.active-accordion .accordion-content {
max-height: 200px;
/* padding: 0px; */
}
.accordion-item.active-accordion .icon {
transform: rotate(180deg);
color: var(--custom-2181FA);
}
.accordion-item.active-accordion .accordion-tle {
color: var(--custom-2181FA);
}
.accordion-content>p {
font-size: 16px;
font-family: "SourceSans3-Regular";
padding-bottom: 20px;
}
.feat-prop-tle {
font-size: 24px;
color: black;
font-family: "SourceSans3-SemiBold";
margin-bottom: 20px;
}
.feat-prop-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.pagination-cont {
padding: 20px 0px;
margin-top: 24px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border-top: 1px solid var(--custom-DBDBDB);
}
.pagination-cont>button {
height: 32px;
width: 32px;
border: 1px solid var(--custom-DFE3E8);
border-radius: 4px;
font-size: 14px;
font-family: "SourceSans3-Regular";
color: var(--custom-212B36);
}
.page-prev {
background-color: var(--custom-919EAB);
}
.page-prev,
.page-next {
display: flex;
align-items: center;
justify-content: center;
}
.page-prev>img,
.page-next>img {
height: 24px;
width: 24px;
}
.sct-inv-opt-sect-hd {
margin-bottom: 8px;
font-size: 14px;
color: black;
font-family: "SourceSans3-Regular";
text-align: start;
}
.sct-inv-opt-sect-cont {
display: flex;
flex-direction: row;
gap: 8px;
margin-bottom: 20px;
}
.sct-inv-opt-sect-cont-card {
display: flex;
flex-direction: row;
text-align: start;
gap: 8px;
padding: 12px 16px;
background-color: white;
border-radius: 12px;
cursor: pointer;
}
.sct-inv-opt-sect-cont-card-tle {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
}
.sct-inv-opt-sect-cont-card-stle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-737373);
}
.pay-type-cont {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
.payment-card {
border-radius: 12px;
background-color: var(--custom-FDFDFD);
padding: 12px 16px;
display: flex;
flex-direction: row;
gap: 8px;
cursor: pointer;
}
.payment-card-tle {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
}
.pay-type-cont-tle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: black;
margin-bottom: 8px;
text-align: start;
}
@media only screen and (max-width: 1050px) {
.listed-item-feat-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media only screen and (max-width: 966px) {
.feat-prop-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
@media only screen and (max-width: 996px) {
.noi-calcu-container {
flex-direction: column;
}
.noi-calcu-sect-one {
width: 100%;
}
.noi-calcu-sect-two {
width: 100%;
}
}
@media only screen and (max-width: 927px) {
.cre-analyst-details-section {
flex-direction: column;
margin-bottom: 70px;
}
.sections-wrapper,
.cre-analyst-details-section-two {
width: 100%;
}
.cre-analyst-details-search-mobile {
display: block;
}
.cre-analyst-details-search-mobile>input {
height: 38px;
}
.cre-analyst-details-search-icon-mobile,
.cre-analyst-details-search-icon-filler {
top: 10px;
}
}
@media only screen and (max-width: 800px) {
.financial-analysis-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 687px) {
.cre-analyst-tool-sect-two-cont {
padding: 16px;
border-radius: 16px;
flex-direction: column;
}
.cre-analyst-tool-sect-one {
height: 500px;
background-size: 2100px;
}
.cre-analyst-tool-sect-one-tle {
font-size: 24px;
font-family: "SourceSans3-SemiBold";
line-height: 38.4px;
}
.cre-analyst-tool-sect-one-stle {
font-size: 14px;
margin-top: 4px;
margin-bottom: 20px;
}
.cre-analyst-tool-sect-two-item-one,
.cre-analyst-tool-sect-two-item-two,
.cre-analyst-tool-sect-two-item-three {
padding: 0px;
width: 100%;
padding-top: 8px;
padding-bottom: 8px;
}
.cre-analyst-tool-sect-two-item-three {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.cre-analyst-tool-sect-two-item-one {
flex: 1;
}
.cre-analyst-tool-sect-two-item-one,
.cre-analyst-tool-sect-two-item-two {
border-bottom: 1px solid var(--custom-EDEDED);
border-right: none;
}
.cre-analyst-tool-sect-tle,
.cre-analyst-tool-sect-stle {
font-size: 12px;
line-height: 19.2px;
}
.cre-analyst-tool-search-btn {
height: 42px;
padding-left: var(--mobile-padding);
padding-right: var(--mobile-padding);
margin-top: 12px;
background-color: var(--custom-2181FA);
gap: 8px;
justify-content: center;
}
.cre-analyst-tool-search-btn-icon {
height: 20px;
width: 20px;
}
.cre-analyst-tool-search-btn-item-tle {
font-size: 14px;
}
.cre-analyst-tool-sect-two-cont-wrapper,
.cre-analyst-tool-sect-one-cont {
padding: 0px var(--mobile-padding);
}
.cre-analyst-tool-sect-one {
height: 480px;
}
}
@media only screen and (max-width: 644px) {
.cre-analyst-tool-sect-two-grid {
grid-template-columns: repeat(1, 1fr);
}
}
@media only screen and (max-width: 600px) {
.listed-item-desc-card-wrapper {
padding: 0px;
margin-top: 20px;
}
.cat-checkbox-label {
height: 26px;
padding: 0 10px;
font-size: 14px;
}
.cat-hd-content,
.cat-hd {
height: 45px;
}
.cre-analyst-details-section-two-tle,
.cre-analyst-cat-tle {
font-size: 18px;
}
.cat-check-tle {
font-size: 14px;
}
.dash-content-cre-ana-details {
padding-left: var(--mobile-padding);
padding-right: var(--mobile-padding);
}
.cre-analyst-details-listing-btn,
.cre-analyst-details-map-btn {
height: 38px;
padding: 0 20px;
font-size: 14px !important;
}
.cre-analyst-details-tab-btn,
.inv-tab-button-cont {
gap: 8px;
margin-bottom: 12px;
}
.inv-tab-button-cont {
margin-top: 12px;
padding-bottom: 20px;
}
.inv-tab-button-cont>a {
height: 38px;
width: 98px;
font-size: 14px;
}
.cre-analyst-details-title {
font-size: 14px;
margin-top: 0px;
margin-bottom: 8px;
}
.cre-analyst-tool-sect-two-cont-wrapper,
.cre-analyst-tool-sect-two-grid-wrapper, .inv-tab-button-cont {
padding: 0px var(--mobile-padding);
}
.cre-analyst-tool-sect-two {
padding: 0px;
}
.gle-map-container {
margin-bottom: 0px;
}
.cre-analyst-tool-sect-two-grid-item-img {
height: 200px;
}
.cre-analyst-tool-sect-two-grid-item-img-cont {
bottom: 12px;
right: 11px;
left: 11px;
padding: 8px 12px;
}
.active-tab {
font-size: 14px !important;
}
.cre-analyst-tool-sect-two-grid-item-img-cont-item-tle {
font-size: 12px;
line-height: 19.2px;
}
.cre-analyst-tool-sect-two-grid-item-img-cont-item-stle {
font-size: 14px;
line-height: 22.4px;
}
.cre-analyst-tool-sect-two-grid-item-tle {
font-size: 14px;
}
.cre-analyst-tool-sect-two-grid-item-stle {
font-size: 12px;
}
.cre-analyst-tool-sect-two-grid-item-desc {
font-size: 12px;
}
.listed-item-feat-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.listed-item-desc-card-hd-tle {
font-size: 16px;
}
.listed-item-desc-card-stle-img {
height: 20px;
width: 20px;
}
.listed-item-desc-card-stle {
font-size: 14px;
}
.listed-item-desc-loca-icon {
height: 20px;
width: 20px;
}
.listed-item-desc-loca-tle {
font-size: 12px;
}
.listed-item-desc-tle {
margin-bottom: 8px;
font-size: 16px;
}
.listed-item-desc-cont {
font-size: 12px;
line-height: 19.2px;
}
.listed-item-feat-tle {
font-size: 16px;
margin-bottom: 8px;
}
.listed-item-feat-grid-card-tle {
font-size: 12px;
line-height: 19.2px;
}
.listed-item-feat-grid-card-stle {
font-size: 16px;
line-height: 25.6px;
}
.list-item-grid-item-pictures-cont {
display: grid;
grid-template-columns: repeat(2, 1fr);
background-color: red !important;
}
.list-item-grid-item-picture>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.list-item-grid-item-picture>img,
.list-item-grid-item-picture-span>img {
flex: 1;
border-radius: 8px;
overflow: hidden;
}
.list-item-grid-item-picture>img,
.list-item-grid-item-picture-span>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.inv-tab-button-cont {
overflow-x: auto;
overflow-y: hidden;
}
.list-item-grid-item-picture {
height: 100%;
width: 100%;
}
.list-item-grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.list-item-grid-item-picture-span {
height: 360px;
}
.list-item-grid-item-picture {
height: 173px;
}
.listed-item-desc-card, .cre-calc-video-wrapper, .abt-inv-wrapper {
padding-bottom: 0px;
padding-left: var(--mobile-padding);
padding-right: var(--mobile-padding);
}
.cre-calc-video-wrapper, .abt-inv-wrapper, .inv-youtube-wrapper {
margin-bottom: 0px;
}
.inv-youtube-wrapper {
padding: 0px;
margin-top: 8px;
}
.listed-item-desc-loca {
margin-bottom: 12px;
}
.noi-calcu-wrapper, .monetary-section-wrapper {
padding: 0px;
margin-bottom: 8px;
}
.noi-calcu-container {
padding: 16px;
}
.noi-calcu-sect-one-hd {
font-size: 14px;
line-height: 22.4px;
}
.noi-calcu-sect-one-tle {
font-size: 14px;
}
.gross-income-notice-icon {
height: 20px;
width: 20px;
}
.gross-income-tle {
font-size: 12px;
}
.opera-incom-item-cont {
padding: 12px;
}
.opera-incom-item-tle {
font-size: 12px;
}
.opera-incom-item-stle {
font-size: 20px;
}
.donut-chart {
height: max-content;
width: 150px;
margin-top: 8px;
}
.donot-chart-ind-tle {
font-size: 16px;
margin-bottom: 0px;
}
.donot-chart-ind-container {
gap: 8px;
flex-direction: column;
align-items: start;
}
.net-oper-ind,
.gross-oper-ind {
height: 16px;
width: 8px;
}
.net-oper-ind-tle {
font-size: 12px;
}
.calcu-btn {
height: 42px;
font-size: 14px;
}
.financial-analysis-wrapper,
.feat-prop-wrapper {
margin-bottom: 0px;
padding: 0px;
}
.financial-analysis-hd {
font-size: 16px;
margin-bottom: 12px;
}
.financial-analysis-grid {
grid-template-columns: repeat(1, 1fr);
gap: 12px;
}
.financial-analysis-grid-tle {
font-size: 14px;
margin-bottom: 2px;
}
.financial-analysis-grid-stle {
font-size: 16px;
margin-bottom: 2px;
}
.financial-analysis-grid-desc {
font-size: 14px;
}
.financial-analysis-cont,
.feat-prop-cont {
padding: 6px var(--mobile-padding);
}
.accordion-tle {
font-size: 14px;
}
.accordion-header {
padding: 8px 0px;
}
.accordion-content>p {
font-size: 14px;
padding-bottom: 10px;
}
.icon {
font-size: 22px;
}
.feat-prop-tle {
font-size: 16px;
margin-bottom: 16px;
}
.feat-prop-grid {
grid-template-columns: repeat(1, 1fr);
}
.feat-prop-wrapper {
margin-bottom: 30px;
}
.inv-tab-button-cont>button {
height: 35px;
padding: 0px var(--mobile-padding);
font-size: 12px;
}
.sct-inv-opt-sect-hd, .sct-inv-opt-sect-cont-card-stle {
font-size: 12px;
}
.sct-inv-opt-sect-cont {
flex-direction: column;
margin-bottom: 12px;
}
.sct-inv-opt-sect-cont-card {
padding: 12px;
}
.sct-inv-opt-sect-cont-card-tle {
font-size: 14px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
}
.pay-type-cont {
margin-bottom: 12px;
}
.payment-card {
padding: 12px;
display: flex;
flex-direction: row;
gap: 8px;
cursor: pointer;
}
.payment-card-tle, .sct-inv-opt-sect-cont-card-tle {
font-size: 14px;
}
.sct-inv-opt-sect-cont-card-stle {
font-size: 12px;
}
}
/* ******************* End :: REI Styles ******************************** */
/******************** Start :: FAQs ******************************** */
.faqs_section {
display:none;
border: 1px solid var(--custom-F2F2F2);
border-radius: 12px;
padding: 0 20px 0px 20px;
}
.faqs_section.active_faq {
display:block;
}
/* ******************* End :: FAQs ******************************** */
/******************** Start :: Fields ******************************** */
.form-item-sect {
display: flex;
flex-direction: row;
gap: 20px;
}
/* form-item is the wrapper around the field */
.form-item {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
flex: 1;
justify-content: space-between;
}
.form-item>label {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-333333);
line-height: 25.6px;
text-align: start;
}
.form-item>select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('/svgs/rei20/icons/formkit_down.svg');
background-repeat: no-repeat;
background-position: calc(100% - 16px) center;
background-size: 18px;
cursor: pointer;
}
.form-item>input,
.form-item>select {
height: 50px;
width: 100%;
font-size: 14px;
border-radius: 32px;
font-family: "SourceSans3-Regular";
border: none;
box-sizing: border-box;
padding: 0 16px;
background-color: var(--rei-input-background);
outline: none;
}
.form-item>input::placeholder {
color: var(--custom-737373);
}
.form-item>input:focus {
outline: none;
}
@media only screen and (max-width: 600px) {
.form-item {
margin-bottom:8px;
}
.form-item>label
{
font-size:14px;
line-height: 22.4px;
}
.form-item>input,
.form-item>select {
height: 46px;
font-size: 14px;
}
.form-item-sect {
flex-direction: column;
gap: 0px;
}
}
/* end media < 600 */
/* ******************* End :: Fields ******************************** */
/******************** Start :: FAQs ******************************** */
.pulse_button {
/* Apply the pulse animation */
animation: pulse 1s infinite;
background-color:#FFFFC5;
color: #000000;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
/* ******************* End :: FAQs ******************************** */
/******************** Start :: REI Styles ******************************** */
.basic_link {
font-family: "SourceSans3-SemiBold";
text-decoration:underline;
font-size:18px;
line-height:24px;
color:#000000;
cursor:pointer;
}
/****************** Error messages ******************** */
.error_message, .errormsg {
padding-top:10px;
color:#FF0000;
font-size: 18px;
font-family: "SourceSans3-SemiBold";
padding-bottom:10px;
}
.required, .required_fields, .aste {
color:var(--custom-FF0000);
font-family: "SourceSans3-SemiBold";
}
/****************** REI SUBMIT ******************** */
.rei_submit {
background-color: var(--custom-2181FA);
color: var(--custom-FDFDFD);
font-size: 16px;
height: 46px;
width: 100%;
border-radius: 32px;
font-family: "SourceSans3-SemiBold";
box-shadow: 0px 8px 16px -4px var(--custom-rgba4);
cursor:pointer;
align-items:center;
justify-content:center;
}
@media only screen and (max-width: 600px) {
.rei_submit {
font-size: 14px;
height: 46px;
}
}
.rei_submit:hover {
background-color: #0056b3;
}
.rei_submit_white {
background-color: #FFFFFF;
color: var(--custom-2181FA);
font-size: 16px;
height: 46px;
width: 100%;
border-radius: 32px;
font-family: "SourceSans3-SemiBold";
box-shadow: 0px 8px 16px -4px var(--custom-rgba4);
cursor:pointer;
align-items:center;
justify-content:center;
}
.rei_submit_white:hover {
background-color: #0056b3;
}
.rei_submit_link {
background-color: var(--custom-2181FA);
color: var(--custom-FDFDFD);
font-size: 16px;
padding-top:10px;
height: 46px;
width: 100%;
border-radius: 32px;
font-family: "SourceSans3-SemiBold";
box-shadow: 0px 8px 16px -4px var(--custom-rgba4);
cursor:pointer;
text-align:center;
align-items:center;
justify-content:center;
}
.rei_submit_link:hover {
background-color: #0056b3;
}
.submit_inactive {
background-color:#666666;
color:#CCCCCC;
}
.submit_inactive:hover {
background-color:#666666;
color:#CCCCCC;
}
/****************** REI_INPUT ******************** */
.rei_input {
height: 50px;
width: 100%;
font-size: 14px;
border-radius: 32px;
font-family: "SourceSans3-Regular";
border: none;
box-sizing: border-box;
padding-left: 16px;
background-color: var(--rei-input-background);
}
.rei_input:focus {
outline: none;
}
@media only screen and (max-width: 600px) {
.rei_input {
height: 46px;
font-size: 14px;
}
}
/****************** REI_FIELD_EMBED - for fields with icon on the left.*** */
.rei_field_embed {
position:absolute;
display:flex;
top: 0px;
bottom:0px;
align-items: center;
padding-inline-start: 0.75rem;
pointer-events: none;
}
/******************* action complete onboard ************************/
.complete_border {
border: 2px solid #EAECF0;
border-radius:10px;
padding:10px;
}
.complete_text {
color:#344054;
font-weight: 600;
font-size:16px;
line-height: 24px;
margin-top:0.75rem;
}
.complete_instructions {
font-size:16px;
line-height:24px;
color:#475467;
}
.complete_ul {
display:flex;
flex-direction:column;
}
.complete_ul li {
display:flex;
-moz-column-gap: 16px;
column-gap: 16px;
}
.complete_container {
width:100%;
}
@media (min-width: 640px) {
.complete_container {
width: 50%;
}
}
.complete_holder {
display:flex;
flex-direction:column;
justify-content: space-between;
}
/******************* report *********************************/
/******************* investment_mode *********************************/
.mode_intro {
display:block;
color:#475467;
font-size:14px;
line-height:20px;
font-weight: 700;
}
.mode_amount {
display:block;
color:#344054;
font-size:14px;
line-height:20px;
margin-bottom: 0.5rem;
font-weight: 500;
}
.mode_wrap {
display:flex;
flex-wrap: wrap;
gap: 12px;
}
.mode_box {
border: solid 1px #D0D5DD;
padding-left: 14px;
border-radius: 4px;
}
.mode_svg {
}
.mode_item {
display:inline-flex;
align-items: center;
}
.mode_text {
margin-top: 1px;
font-weight: 300;
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.mode_label_basic {
/* relative flex items-center p-3 rounded-full cursor-pointer */
position:relative;
display:flex;
align-items: center;
padding:0.75rem;
cursor: pointer;
border-radius: 9999px;
}
.mode_label_text {
display:block;
font-family: Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
line-height: 1.5rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
line-height: 1.625;
color: #101828;
}
/******************* payments *********************************/
.paychoice_method {
margin-top:2rem;
margin-bottom:2rem;
}
.paychoice_div {
border:solid 1px #D0D5DD;
margin-top:3rem;
display:inline;
padding:10px;
margin-right:15px;
}
.paychoice_img {
height:46px;
display:block;
}
.rei_flex_wrap {
display:flex;
flex-wrap: wrap;
-moz-column-gap: 10px;
column-gap: 10px;
--tw-space-y-reverse: 0;
}
/* toggle-switch */
.rei_toggle_switch {
position: relative;
width: 24px;
height: 24px;
display: flex;
flex-direction: row;
align-items: center;
}
.rei_toggle_input {
display:none;
}
.rei_toggle_label {
display: block;
width: 24px;
height: 24px;
background: url('/svgs/rei20/icons/toggle-inactive.svg') no-repeat center/contain;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
.rei_toggle_input:checked + .rei_toggle_label {
background: url('/svgs/rei20/icons/toggle-active.svg') no-repeat center/contain;
}
@media only screen and (max-width: 600px) {
.rei_toggle_switch {
width: 20px;
height: 20px;
}
}
.rei_toggle_title {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
}
@media only screen and (max-width: 600px) {
.rei_toggle_title {
font-size:14px;
}
} /* end media */
/* from lib/html/select.php */
.rei_select_radio {
display:flex;
width:100%;
border:solid 1px #FF0000;
}
.rei_active {
background-color: var(--custom-F5F9FF) !important;
}
.kyc-cont-sect-two {
width:30%;
}
.kyc-cont-sect-one {
width:70%;
}
/******************* cards *********************************/
.card {
display:flex;
flex-direction:column;
z-index: 6;
background-color: white;
border-radius:8px;
}
.card_border {
border: 2px solid #EAECF0;
}
.card_third {
min-width:240px;
max-width:316px;
width: calc(33.333333% - 5px);
}
.card_half {
width: calc(50% - 5px);
}
.card_full {
width:100%;
max-width: var(--rei_max_width);
}
.card_submit_container {
margin-left: 1rem;
margin-right: 1rem;
margin-bottom:1rem;
}
.card_submit {
color:#FFFFFF;
background-color:#365AB2;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
margin-left:auto;
margin-right:0px;
font-weight: 500;
border-radius: 0.125rem;
font-size:16px;
margin-top:10px;
width:100%;
display:block;
text-decoration:none;
}
.card_submit:hover {
background: var(--rei_button_hover);
}
.card_title {
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 1rem;
padding-right: 1rem;
font-size:16px;
color: #101828;
font-weight: 600;
}
.card_label {
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 1rem;
padding-right: 1rem;
}
.card_img_container {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.card_img_container img {
margin:auto;
}
.card_sub {
margin-top: 0.5rem;
font-weight: 500;
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 1rem;
padding-right: 1rem;
}
/******************* flex plugin *********************************/
.rei_flex_half {
width: 50%;
}
.rei_flex_container {
display:flex;
flex-direction: column;
-moz-column-gap: 10px;
column-gap: 10px;
--tw-space-y-reverse: 0;
margin-top: calc(24px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(24px * var(--tw-space-y-reverse));
}
.rei_flex_wrap {
display:flex;
flex-wrap: wrap;
-moz-column-gap: 10px;
column-gap: 10px;
--tw-space-y-reverse: 0;
}
.rei_flex_normal {
margin-top:32px;
display:flex;
flex-direction:column;
--tw-space-y-reverse: 0;
margin-top: calc(24px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(24px * var(--tw-space-y-reverse));
}
@media only screen and (max-width: 600px) {
.rei_flex_normal {
margin-top:0px;
margin-bottom:0px;
}
}
@media (min-width: 768px) {
.rei_flex_container {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
}
/************************** Elements of the page ******************/
.subtitle {
font-size: 24px;
font-family: "SourceSans3-SemiBold";
color: black;
margin-bottom: 12px;
}
@media only screen and (max-width: 600px) {
.subtitle {
font-size: 16px;
margin-bottom: 8px;
}
}
/************************** Investor status ******************/
.istatus {
width: 38%;
box-sizing: border-box;
background-image: url('/svgs/rei20/images/dashboard/investment-bg-img.svg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
padding: 40px;
}
.istatus_title {
font-size: 20px;
color: var(--custom-FDFDFD);
font-family: "SourceSans3-SemiBold";
}
@media only screen and (max-width: 600px) {
.status_title {
font-size: 16px;
color: var(--custom-FDFDFD);
font-family: "SourceSans3-Regular";
margin-bottom: 18px;
line-height: 25.6px;
}
}
.istatus_subsection {
font-size: 16px;
color: var(--custom-FDFDFD);
font-family: "SourceSans3-Regular";
margin-bottom: 18px;
line-height: 25.6px;
}
.istatus_card {
display: flex;
flex-direction: row;
align-items: center;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.istatus_card > p {
font-size: 16px;
color: var(--custom-A3A3A3);
font-family: "SourceSans3-Regular";
}
.status_card > span {
height: 4px;
width: 20px;
border-radius: 32px;
background-color: var(--custom-A3A3A3);
}
.istatus_active>span {
background-color: var(--custom-1DAD05) !important;
}
.istatus_active>p {
color: var(--custom-FDFDFD) !important;
font-family: "SourceSans3-SemiBold" !important;
}
/* Active button */
.active_button {
background-color: var(--custom-F5F9FF) !important;
border:solid 1px #000000;
}
.rei_linelist_container {
display:flex;
flex-direction:row;
}
/* rei20_radio */
.rei_radio_card {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 8px;
border-radius: 12px;
cursor: pointer;
padding: 12px 16px;
background-color: var(--custom-FDFDFD);
}
.rei_radio_active {
background-color: var(--custom-F5F9FF) !important;
border: solid 1px var(--custom-2181FA);
}
.rei_linelist_container {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
/******* 5digit field CSS *******************/
.digit_container {
display: flex;
justify-content: space-between;
gap: 12px;
}
.digit_class {
width: 60px;
height: 60px;
font-size: 30px;
font-family: "SourceSans3-SemiBold";
text-align: center;
border: 2px solid var(--custom-EDEDED);
border-radius: 5px;
outline: none;
background-color: var(--custom-F1F1F1);
transition: all 0.3s ease;
margin: 3px;
}
.digit_class input:focus {
outline: none;
}
@media only screen and (max-width: 911px) {
.digit_container {
justify-content: center;
gap: 6px;
}
.digit_class {
width: 40px;
height: 40px;
font-size: 20px;
}
}
/****************** Color coded borders ******************** */
.rei_dev_border {
border:1px solid var(--rei-dev-color);
}
.rei_test_border {
border: 1px solid var(--rei-test-color);
}
/** used in content pages */
.rei_nl {
padding-top:1rem;
}
/* exterior links */
.exterior_link {
color: #FFFFFF;
font-size:16px;
text-decoration:underline;
}
.exterior_link:visited {
color: #FFFFFF;
}
@media only screen and (max-width: 600px) {
.exterior_link {
font-size:14px;
}
}
/***** white background *******************/
.white_container {
background-color: white;
border-radius: 12px;
width:100%;
padding:12px;
}
.blue_container {
width: 62%;
}
.section_pad {
padding: 12px 24px 12px 24px;
}
.padleft40 {
padding-left:40px;
}
@media only screen and (max-width: 600px) {
.section_pad {
padding:12px 0px 12px 0px;
}
.padleft40 {
padding-left:0px;
}
} /* end media */
/****************** Investment Wrapper ******************** */
.non-mobile {
display:block;
}
.mobile_only {
display:none;
}
@media only screen and (max-width: 600px) {
.non-mobile {
display:none;
}
.mobile_only {
display:block;
}
}
/************** Close button on full screen exterior ******/
.x_button {
font-size: 36px;
color:#FFFFFF;
float:right;
padding: 12px;
}
/****************** max dash ******************** */
.max-dash {
width:calc(100% - 48px);
}
@media only screen and (max-width: 600px) {
.max-dash {
width:calc(100% - 24px);
}
}
/* ******************* End :: REI Styles ******************************** */
/******************** Start :: Settings ******************************** */
.sct-two {
padding-bottom: 70px;
}
.settings-content {
padding-left: 24px;
padding-right: 24px;
padding-top: 16px;
flex: 1;
box-sizing: content-box;
margin-bottom: 100px;
height: max-content;
}
.setting-profile-card-pic {
height: 92px;
width: 92px;
border-radius: 50%;
overflow: hidden;
}
.setting-profile-card-pic > img {
height: 100%;
width: 100%;
object-fit: cover;
}
.setting-profile-card-tle {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: black
}
.setting-profile-card-mail, .setting-profile-card-no {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: black
}
.settings-sections {
position: relative;
height: max-content;
background-color: rebeccapurple !important;
}
.section {
position: absolute;
top: 0;
left: 24px;
width: calc(100% - 48px);
height: 100%;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
z-index:1000;
}
.section_active {
visibility: visible;
}
@media only screen and (max-width: 600px) {
.section {
position: absolute;
top: 0;
left: 12px;
width: calc(100% - 24px);
height: 100%;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
}
.section.fade-in {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
.section.fade-out {
opacity: 0;
transform: translateY(20px);
}
.personal-info-cont-sect, .invite-earn-instruction-cont {
padding: 20px;
border-radius: 12px;
background-color: white;
height: max-content;
}
.personal-info-cont {
}
.referrals-cont-sect-one, .referrals-cont-sect-two {
flex: 1;
}
.referrals-cont-sect-two {
padding: 16px;
background-color: var(--custom-FDFDFD);
border: 1px solid var(--custom-F2F2F2);
border-radius: 12px;
}
.personal-info-tle {
font-size: 20px;
color: var(--custom-252525);
font-family: "SourceSans3-SemiBold";
margin-bottom: 12px;
}
.profile-photo-section, .settings-personal-info-card {
display: flex;
flex-direction: row;
justify-content: space-between;
border-top: 1.5px solid var(--custom-E0E4EE);
padding: 12px 0px;
}
.profile-photo-section-one-tle {
margin-bottom: 4px;
font-size: 14px;
color: var(--custom-252525);
font-family: "SourceSans3-Medium";
}
.profile-photo-section-one-stle {
font-family: "SourceSans3-Regular";
font-size: 12px;
color: var(--custom-595959);
}
.profile-photo-section-one,
.profile-photo-section-two,
.settings-personal-info-card-one,
.settings-personal-info-card-two {
flex: 1;
}
.settings-personal-info-card-two {
display: flex;
flex-direction: column;
}
.profile-photo-section-two-img {
height: 58px;
width: 58px;
border-radius: 50%;
overflow: hidden;
}
.profile-photo-section-two-img>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.profile-photo-section-two {
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
}
.profile-photo-section-img-upload {
height: 38px;
padding: 0px 23.5px;
border-radius: 32px;
border: 1px solid var(--custom-E0E4EE);
color: var(--custom-595959);
font-size: 14px;
font-family: "SourceSans3-SemiBold";
}
.settings-personal-info-tle {
font-size: 16px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
margin-bottom: 4px;
}
.settings-personal-info-stle {
font-size: 14px;
font-family: "SourceSans3-Regular";
color: var(--custom-595959);
}
.profile-edit-btn {
display: flex;
align-items: center;
gap: 2px;
width: max-content;
}
.profile-content-input {
height: 26px;
flex: 1;
width: 100%;
margin-right: 16px;
color: var(--custom-252525);
font-size: 16px;
font-family: "SourceSans3-Regular";
margin-bottom: 8px;
}
.profile-content-input[readonly] {
cursor: not-allowed;
}
.profile-content-input:focus, .profile-content-input {
border: none;
outline: none;
}
.profile-edit-btn-icon {
height: 20px;
width: 20px;
}
.profile-edit-btn-icon>img {
height: 100%;
width: 100%;
}
.profile-edit-btn-tle {
color: var(--custom-2181FA);
font-size: 14px;
font-family: "SourceSans3-Medium";
}
.referrals-cont {
color: white;
height: max-content;
}
.settings-logout-btn {
border-radius: 12px;
padding: 0px 20px;
color: var(--custom-FF0000);
background-color: white;
font-family: "SourceSans3-SemiBold";
font-size: 16px;
margin-bottom: 70px;
height: 50px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
margin-top: 16px;
}
.settings-logout-btn:hover {
transform: none !important;
}
.notification-cont {
background-color: white;
height: max-content;
padding: 24px;
}
.notifcation-cont-tle {
font-size: 20px;
color: var(--custom-25282D);
font-family: "SourceSans3-SemiBold";
padding-bottom: 18px;
border-bottom: 1.5px solid var(--custom-E0E4EE);
}
.toggle-cont {
display: flex;
flex-direction: column;
gap: 24px;
}
.toggle-switch {
position: relative;
width: 24px;
height: 24px;
display: flex;
flex-direction: row;
align-items: center;
}
.notify-switch-cont {
display: flex;
flex-direction: row;
gap: 12px;
}
.toggle-switch-tle {
font-family: "SourceSans3-SemiBold";
font-size: 16px;
color: var(--custom-25282D);
margin-bottom: 6px;
}
.toggle-switch-stle {
font-family: "SourceSans3-Regular";
font-size: 14px;
color: var(--custom-596375);
}
.setting-email-sect {
padding: 17px 0px;
}
.notify-container {
border-bottom: 1px solid var(--custom-E0E4EE);
margin-bottom: 16px;
}
.checkbox-container {
display: flex;
align-items: center;
gap: 9px;
font-size: 18px;
cursor: pointer;
user-select: none;
width: max-content;
height: max-content;
position: relative;
margin-top: 1px;
}
.toggle-switch-container {
position: relative;
width: 37px;
height: 20px;
}
.toggle-switch-input {
display: none;
}
.toggle-switch-label {
display: block;
width: 100%;
height: 100%;
background: #ccc;
border-radius: 20px;
position: relative;
cursor: pointer;
transition: background 0.3s ease;
}
.toggle-switch-label::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
top: 50%;
left: 3px;
transform: translateY(-50%);
transition: all 0.3s ease;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.toggle-switch-input:checked + .toggle-switch-label {
background: var(--custom-2181FA);
}
.toggle-switch-input:checked + .toggle-switch-label::after {
left: calc(100% - 19px);
}
.invite-earn-instruction-cont {
display: flex;
flex-direction: row;
gap: 38px;
align-items: center;
margin-bottom: 12px;
}
.invite-earn-instruction-sect-one-tle {
margin-bottom: 16px;
font-size: 24px;
color: black;
font-family: "SourceSans3-SemiBold";
}
.invite-earn-instruction-sect-one-stle {
font-size: 16px;
color: var(--custom-252525);
font-family: "SourceSans3-Regular";
margin-bottom: 12px;
}
.referral-code-cont {
padding: 12px;
background-color: var(--custom-F5F9FF);
border-radius: 12px;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
justify-content: space-between;
}
.referral-code-tle {
font-size: 14px;
color: var(--custom-595959);
font-family: "SourceSans3-Regular";
}
.referral-code-stle {
font-family: "SourceSans3-SemiBold";
font-size: 20px;
color: black;
}
.cpy-ref-code-btn {
height: 38px;
display: flex;
align-items: center;
gap: 12px;
flex-direction: row;
background-color: var(--custom-2181FA);
border-radius: 32px;
padding: 0px 12px;
}
.cpy-ref-code-ico {
height: 20px;
width: 20px;
}
.cpy-ref-code-ico>img {
height: 100%;
width: 100%;
}
.cpy-ref-code-tle {
font-size: 16px;
color: var(--custom-FDFDFD);
font-family: "SourceSans3-SemiBold";
}
.instruct-icon {
height: 120px;
width: 120px;
margin-bottom: 8px;
}
.instruct-icon>img {
height: 100%;
width: 100%;
}
.instruct-tle {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: black;
margin-bottom: 8px;
}
.instruct-stle {
font-size: 16px;
color: var(--custom-252525);
font-family: "SourceSans3-Regular";
}
.invite-referral-section {
display: flex;
flex-direction: row;
gap: 12px;
}
.invite-referral-section-one {
flex: 1;
padding: 34px 24px;
border-radius: 12px;
background-color: white;
}
.invite-referral-section-two {
flex: 1;
padding: 12px 20px;
border-radius: 12px;
background-color: white;
height: 288px;
overflow-y: auto;
}
.invite-referral-section-one-img {
height: 103.08px;
width: 103.08px;
margin: auto;
}
.invite-referral-section-one-img>img {
height: 100%;
width: 100%;
}
.invite-referral-section-one-tle {
font-size: 40px;
color: black;
font-family: "SourceSans3-Bold";
text-align: center;
}
.invite-referral-section-one-stle {
font-size: 16px;
color: black;
font-family: "SourceSans3-Regular";
text-align: center;
color: var(--custom-404040);
}
.invite-referral-date-cont {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.invite-referral-date-tle {
font-size: 20px;
color: black;
font-family: "SourceSans3-SemiBold";
}
.invite-referral-date-icon {
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.invite-referral-date-ico>img {
height: 100%;
width: 100%;
}
.invite-referral-date-sect {
display: flex;
align-items: center;
flex-direction: row;
gap: 4px;
height: 40px;
padding: 0px 12px;
background-color: var(--custom-F1F1F2);
border-radius: 6px;
}
.invite-referral-date {
font-size: 14px;
color: var(--custom-252525);
font-family: "SourceSans3-Regular";
}
.referral-list-card {
height: 72px;
border-bottom: 1px solid var(--custom-EDEDED);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.referral-list-card-end {
border-bottom: none;
}
.referral-list-card-sect-one {
display: flex;
flex-direction: row;
gap: 12px;
align-items: center;
}
.referral-list-card-profile-picture {
height: 48px;
width: 48px;
border-radius: 100%;
overflow: hidden;
}
.referral-list-card-profile-picture>img {
object-fit: cover;
height: 100%;
width: 100%;
}
.referral-list-card-name {
font-size: 16px;
font-family: "SourceSans3-SemiBold";
color: black;
}
.referral-list-card-date {
color: var(--custom-595959);
font-size: 14px;
font-family: "SourceSans3-Regular";
}
.referral-list-card-trailing {
font-size: 16px;
color: var(--custom-252525);
font-family: "SourceSans3-SemiBold";
}
.no-referral-invite-cont {
flex: 1;
background-color: white;
padding: 77px 24px;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.no-referral-invite-tle {
font-size: 20px;
color: black;
font-family: "SourceSans3-SemiBold";
text-align: center;
}
.no-referral-invite-stle {
font-size: 16px;
color: black;
font-family: "SourceSans3-Regular";
text-align: center;
}
.no-referral-invite-img {
height: 72px;
width: 72px;
margin-bottom: 4px;
}
.no-referral-invite-img>video {
height: 100%;
width: 100%;
}
.save-notify-settings-btn {
height: 46px;
padding: 0px 24px;
color: var(--custom-FDFDFD);
font-size: 16px;
font-family: "SourceSans3-SemiBold";
background-color: var(--custom-2181FA);
border-radius: 32px;
box-shadow: 0px 8px 16px -4px var(--custom-rgba11);
}
@media only screen and (max-width: 760px) {
.invite-earn-instruction-cont, .invite-referral-section {
flex-direction: column;
}
}
@media only screen and (max-width: 600px) {
.settings-content {
padding-left: 0px;
padding-right: 0px;
padding-top: 8px;
gap: 12px;
}
.setting-profile-card {
padding: 16px;
margin-bottom: 8px;
}
.setting-profile-card-pic {
height: 70px;
width: 70px;
}
.setting-profile-card-tle {
font-size: 16px;
}
.setting-profile-card-mail, .setting-profile-card-no {
font-size: 14px;
}
.settings-tab-buttons {
gap: 8px;
height: 50px;
padding: 0px 12px;
}
.settings-tab-buttons > button {
height: 38px;
padding: 0px 8px;
font-size: 14px;
}
.personal-info-cont-sect, .invite-earn-instruction-cont, .notification-cont {
padding: 20px var(--mobile-padding) 0px var(--mobile-padding);
}
.invite-earn-instruction-cont, .notification-cont {
padding-bottom: var(--mobile-padding);
}
.notification-cont {
height: max-content;
margin-bottom: 200px;
}
.personal-info-tle {
font-size: 16px;
margin-bottom: 11px;
}
.profile-photo-section, .settings-personal-info-card {
flex-direction: column;
gap: 8px;
padding: 10px 0px;
}
.settings-personal-info-tle {
font-size: 14px;
}
.settings-personal-info-stle {
font-size: 12px;
}
.profile-content-input {
color: var(--custom-252525);
font-size: 14px;
}
.settings-personal-info-card-two {
gap: 10px;
flex-direction: row;
margin-bottom: 2px;
}
.settings-logout-btn {
padding: 0px var(--mobile-padding);
font-size: 14px;
height: 46px;
margin-top: 8px;
}
.notifcation-cont-tle {
font-size: 16px;
padding-bottom: 10px;
}
.setting-email-sect {
padding: 10px 0px;
}
.toggle-cont {
gap: 14px;
}
.notify-switch-cont {
gap: 8px;
}
.toggle-switch {
width: 20px;
height: 20px;
}
.toggle-switch-tle {
font-size: 14px;
margin-bottom: 4px;
}
.toggle-switch-stle {
font-size: 12px;
}
.custom-label {
width: 16px;
height: 16px;
}
.notify-container {
margin-bottom: 9px;
}
.custom-label::after {
top: 1.5px;
}
.save-notify-settings-btn {
height: 42px;
padding: 0px 20px;
font-size: 14px;
}
.settings-sections {
margin-bottom: 970px;
height: max-content;
}
.invite-earn-instruction-sect-one-tle {
margin-bottom: 8px;
font-size: 16px;
}
.invite-earn-instruction-sect-one-stle {
font-size: 14px;
}
.referral-code-tle {
font-size: 12px;
}
.referral-code-stle {
font-size: 16px;
}
.cpy-ref-code-btn {
height: 34px;
}
.cpy-ref-code-tle {
font-size: 14px;
}
.invite-earn-instruction-cont {
gap: 20px;
}
.referrals-cont-sect-two {
padding: 12px;
}
.instruct-icon {
height: 80px;
width: 80px;
}
.instruct-tle, .instruct-stle {
font-size: 14px;
}
.no-referral-invite-img {
height: 40px;
width: 40px;
}
.no-referral-invite-tle {
font-size: 16px;
}
.no-referral-invite-stle {
font-size: 14px;
}
.invite-referral-section-one {
padding: 20px var(--mobile-padding);
}
.invite-referral-section-one-img {
height: 73.39px;
width: 90px;
}
.invite-referral-section-one-tle {
font-size: 24px;
}
.invite-referral-section-one-stle {
font-size: 14px;
}
.invite-referral-section-two {
padding: 16px;
height: 490px !important;
}
.invite-referral-date-tle {
font-size: 16px;
}
.invite-referral-date {
font-size: 12px;
padding-top: 1px;
}
.invite-referral-date-icon {
height: 20px;
width: 20px;
}
.referral-list-card {
height: 57px;
}
.referral-list-card-profile-picture {
height: 40px;
width: 40px;
}
.referral-list-card-name, .referral-list-card-trailing {
font-size: 14px;
}
.referral-list-card-date {
font-size: 12px;
}
}
/* ******************* End :: Settings ******************************** */
/******************** Start :: REI Video Styles ******************************** */
.video_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
width:calc(100% - 48px);
margin-left:24px;
margin-right:24px;
margin-top:0px;
margin-bottom:5px;
padding-top:20px;
}
/* controls size of iframe in video popup */
.rei_video {
width:350px;
height:260px;
}
.rei_popup {
width:400px;
height:400px;
}
@media only screen and (max-width: 881px) {
.video_grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 600px) {
.video_grid {
grid-template-columns: repeat(1, 1fr);
width:calc(100% - 24px);
margin-left:12px;
margin-right:12px;
margin-top:10px;
margin-bottom:5px;
padding-top:10px;
}
.rei_video {
width:100%;
height:260px;
}
.rei_popup {
width:100%;
height:80%;
}
}
.video_item {
padding: 16px;
border: 1px solid var(--custom-EDEDED);
border-radius: 12px;
background-color: white;
}
.video_title {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: black;
margin-bottom: 3px;
}
.video_subtitle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-252525);
margin-bottom: 12px;
}
.video_vid {
width: 100%;
height: 160px;
border-radius: 8px;
overflow: hidden;
}
.video_vid>img {
height: 100%;
width: 100%;
cursor: pointer;
}
.video_red_arrow {
position:relative;
top:-100%;
cursor: pointer;
width:100%;
height:100%;
opacity:50%;
}
.video_red_arrow:hover {
opacity:80%;
}
@media only screen and (max-width: 600px) {
.video_item {
padding: 12px var(--mobile-padding);
border: 1px solid var(--custom-EDEDED);
border-radius: 0px;
}
.video_title {
font-size: 14px;
}
.video_subtitle {
font-size: 12px;
margin-bottom: 8px;
}
.video_vid {
height: 160px;
}
.video_grid {
gap: 12px;
}
}
/* ******************* End :: REI Video Styles ******************************** */
/******************** Start :: Label Styles ******************************** */
.label_status {
font-family: "SourceSans3-SemiBold";
font-size: 16px;
color: var(--custom-737373);
line-height: 25.6px;
text-transform: uppercase;
}
.label_title {
font-size: 20px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
line-height:32px;
}
@media only screen and (max-width: 600px) {
.label_title {
font-size: 14px;
}
}
/* ******************* End :: Label Styles ******************************** */
/******************** Start :: Label Styles ******************************** */
/*This should be abstract to a container */
.payment_item {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.payment_card {
background-color: var(--custom-F7F7F7);
height: 56px;
padding: 0px 16px;
}
.payment_logo>img {
height: 100%;
width: 100%;
}
/* ******************* End :: Label Styles ******************************** */
/******************** Start :: Status Styles ******************************** */
.status_container {
display: flex;
gap: 16px;
margin-top: 40px;
margin-bottom: 148px;
}
@media only screen and (max-width: 1086px) {
.status_container {
padding-left: 20px;
}
}
.status_indicators {
height: 574px;
display: flex;
flex-direction: column;
align-items: center;
}
.status_title {
font-family: "SourceSans3-SemiBold";
font-size: 16px;
color: var(--custom-737373);
line-height: 25.6px;
text-transform: uppercase;
}
.status_subtitle {
font-family: "SourceSans3-SemiBold";
font-size: 20px;
color: var(--custom-252525);
line-height: 32px;
}
.status_active {
width: 4px;
flex: 1;
background-color: var(--custom-00B800);
height: 32px;
}
.status_inactive {
width: 4px;
flex: 1;
background-color: var(--custom-DBDBDB);
height:28px;
}
.status_section {
}
.status_item {
height: 88px;
margin-top:28px;
padding-top:28px;
}
.status_icon {
height: 28px;
width: 28px;
}
.status_icon>img {
height: 100%;
width: 100%;
}
/* ******************* End :: Status Styles ******************************** */
/******************** Start :: Layout Styles ******************************** */
/******************** Invest container ****************/
.content_container {
display: flex;
flex-direction: row;
border: 1px solid var(--custom-EDEDED);
overflow: hidden;
}
.investment_left {
width:75%;
/* padding: 89px 40px; */
background-color: var(--content-color);
}
@media only screen and (max-width: 600px) {
.investment_left {
width:100%;
}
}
.investment_right {
flex:1;
width:25%;
padding-left:12px;
background-color: var(--content-color);
}
/* welcome page container layout */
.welcome_container {
display: flex;
flex-flow: row wrap;
padding-left: 24px;
padding-right: 24px;
padding-top: 16px;
gap: 24px;
/* flex: 1; */
width:100%;
box-sizing: content-box;
}
.welcome_left {
min-width: 250px;
width: 60%;
}
.welcome_right {
border-radius: 8px;
width: 33%;
display: flex;
flex-direction: column;
gap: 20px;
}
@media only screen and (max-width: 600px) {
.welcome_container {
padding-left:12px;
padding-right:12px;
}
.welcome_left {
width:calc(100% - 24px);
}
.welcome_right {
width:calc(100% - 24px);
}
}
.dash_card {
border-radius: 8px;
width:calc(100% - 24px);
background: #FFFFFF;
margin-left: 12px;
margin-right:12px;
margin-top:20px;
margin-bottom:5px;
padding-top:20px;
padding-left: 24px;
padding-right: 24px;
padding-bottom:20px;
/* border: solid 1px #FFFFFF;*/
}
.pad_dash {
padding-left:24px;
padding-top:12px;
padding-bottom:12px;
padding-right:24px;
}
@media only screen and (max-width: 600px) {
.pad_dash {
padding-left:12px;
padding-top:12px;
padding-bottom:12px;
padding-right:12px;
}
}
.nav_pad {
padding-left:24px;
padding-top:12px;
padding-bottom:0px;
padding-right:24px;
}
@media only screen and (max-width: 600px) {
.nav_pad {
padding-left:12px;
padding-top:12px;
padding-bottom:0px;
padding-right:12px;
}
}
/* max_dash used for images that need to take up full width */
.max_dash {
width:80%;
margin:auto;
}
@media only screen and (max-width: 600px) {
.max_dash {
width: calc(100% - 12px);
padding-left:6px;
}
}
/* ******************* End :: Layout Styles ******************************** */
/******************** Start :: Investor Updates ******************************** */
/******************* investor updates *********************************/
.investor_filter {
background:#FFF;
height:40px;
padding:5px;
}
.upd_container {
display:flex;
flex-direction:column;
border: solid 1px #D0D5DD;
border-radius: 4px;
/* space-y-16px */
--tw-space-y-reverse: 0;
margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(16px * var(--tw-space-y-reverse));
}
/* class="relative bg-[#0C111D] h-[280px]"> DIV 1.1 */
.upd_sub {
position:relative;
background-color:#0C111D;
height:280px;
}
.upd_img {
margin:auto;
margin-top:10px;
}
.upd_inline_img {
height:140px;
z-index:5;
}
.upd_text_container {
width:100%;
position: absolute;
bottom:0px;
background-image: linear-gradient(to top, var(--tw-gradient-stops));
font-size: 14px;
--tw-gradient-from: rgb(0 0 0 / 0) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
--tw-gradient-to: rgb(0 0 0 / 0.4) var(--tw-gradient-to-position);
}
.upd_text_box {
display:flex;
justify-content: space-between;
}
/*border-t border-t-[#fff]/30 ">*/
.upd_text_sub {
width:100%;
height: 100%;
background-color: rgb(255 255 255 / 0.3);
padding: 24px;
border-top: 1px solid rgb(255 255 255 / 0.6);
}
.upd_filename {
color:#FFFFFF;
font-size:14px;
font-weight: 600;
}
.upd_published {
color:#FFFFFF;
font-size:14px;
font-weight: 400;
}
.upd_category {
color:#FFFFFF;
font-size:14px;
font-weight: 600;
}
.upd_subject_blurb {
padding-left:16px;
padding-right:16px;
padding-bottom:16px;
}
.upd_subject {
font-size:22px;
line-height:32px;
color:#101828;
font-weight: 600;
}
.upd_blurb {
font-size:14px;
color:#475467;
}
.upd_file_loaded {
margin-top: 24px;
font-size:16px;
color:#6941C6;
font-weight: 600;
display:flex;
}
/* ******************* End :: Investor Updates ******************************** */
/******************** Start :: Scroll Messages ******************************** */
.scrollmsg_container {
display: flex;
gap: 8px;
flex-direction: row;
padding-left: 24px;
margin-top: 12px;
margin-bottom: 28px;
}
@media only screen and (max-width: 1255px) {
.scrollmsg_container {
padding-left: 0px;
margin-top: 12px;
}
}
.scrollmsg_item {
height: 4px;
width: 6px;
background-color: var(--custom-A3A3A3);
border-radius: 8px;
}
.scrollmsg_active {
width: 42px;
background-color: var(--custom-2181FA);
}
/* slide-item */
.slide-item {
display: none;
max-width: 490px;
padding-left: 24px;
position: relative;
max-width: 490px;
}
@media only screen and (max-width: 600px) {
.slide-item {
max-width: 100%;
}
}
@media only screen and (max-width: 911px) {
.slide-item {
max-width: 60%;
padding-left: 0;
}
}
@media only screen and (max-width: 1170px) {
.slide-item {
max-width: 215px;
}
}
@media only screen and (max-width: 1255px) {
.slide-item {
max-width: 340px;
padding-left: 0px;
}
}
.slide-item.active {
display: block;
}
.slide-item:not(.active) h1,
.slide-item:not(.active) h2 {
opacity: 0;
transform: translateY(50px);
}
.slide-item.active h1 {
animation: slideUp 2.3s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.slide-item.active h2 {
animation: slideUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
animation-delay: 0.6s;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.slide-item-mb {
padding: 0px;
}
/* ******************* End :: Scroll Messages ******************************** */
/******************** Start :: Private Offers ******************************** */
/******************* Private offering *********************************/
.privateoffer_title {
margin-top:15px;
font-weight:bold;
font-size:24px;
padding-bottom:20px;
font-family:Helvetica;
}
.private_stat_container {
text-align:center;
margin-top:20px;
border:dashed 1px #CCCCFF;
border-radius:8px;
padding-bottom: 5px;
padding-top: 5px;
background: #FFFFFF;
font-size:16px;
line-height:18px;
}
.private_stat_label {
font-weight:bold;
height:0px;
}
.private_status {
display:inline-block;
margin:auto;
color: var(--rei_button_blue);
}
.private_stat_title {
font-weight: 700;
font-size:20px;
line-height:24px;
}
.private_status_item {
width: 120px;
padding:0px;
padding-left:2px;
padding-right:2px;
display:inline-block;
}
.private_status_holder {
margin-bottom: 8px;
}
.private_ptr_img_holder {
padding:0px;
padding-top: 4px;
}
.private_pointer_img {
width: 100%;
margin:0px;
}
.private_pointer {
width: 100%;
}
.private_text {
font-size: 16px;
font-weight:700;
}
@media (max-width: 640px) {
.private_stat_container {
margin:auto;
}
.private_text {
font-size: 10px;
font-weight:700;
}
.private_status {
transform: scale(0.9);
}
.private_status_item {
width: 74px;
}
}
/* ******************* End :: Private Offers ******************************** */
/******************** Start :: Selects ******************************** */
/******************* selects *********************************/
.rei_select {
background-color: #FFF;
border: solid 1px #6B7280;
padding-left: 4px;
height:44px;
font-size:24px;
background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 0.75em 0.75em;
padding-right: 2.5rem;
appearance:none;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.rei_select option {
background-color:#FFF;
}
/******************* selects *********************************/
.rei_checkbox {
background-color: #FFF;
border: solid 1px #6B7280;
padding-left: 4px;
height:22px;
width:22px;
font-size:24px;
background-size: 0.75em 0.75em;
padding-right: 2.5rem;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.rei_checkbox option {
background-color:#FFF;
}
/* ******************* End :: Selects ******************************** */
/******************** Start :: Blogs ******************************** */
.blogs-section-one {
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
top: 0;
right: 0;
}
.blogs-section-one {
background-image: url('/svgs/rei20/images/dashboard/blogs-image.svg');
height: 240px;
}
.blogs-section-one-overlay {
position: absolute;
top: 0px;
right: 0px;
height: 100%;
width: 100%;
background: linear-gradient(185.97deg, rgba(0, 0, 0, 0.4) 5.08%, rgba(0, 0, 0, 0.256) 92.26%);
}
.blog-section-one-hd {
font-size: 32px;
color: white;
font-family: "SourceSans3-Bold";
line-height: 51.2px;
text-align: center;
}
.blogs-section-one-tle {
font-size: 20px;
color: white;
line-height: 22px;
font-family: "SourceSans3-Regular";
margin-top: 8px;
text-align: center;
margin-bottom: 26px;
}
.blog-tab-button-cont {
display: flex;
flex-direction: row;
gap: 12px;
margin-bottom: 24px;
z-index: 10;
}
.blog-tab-button-cont>button {
flex-shrink: 0;
}
.blog-tab-button-cont {
overflow-y: hidden;
overflow-x: auto;
}
.all-blogs-tab-btn,
.finacial-tab-btn,
.rei-capital-income-tab-btn,
.rei-capital-growth-tab-btn {
height: 50px;
padding: 0 24px;
font-size: 16px;
color: var(--custom-252525);
transition: background 0.3s, transform 0.2s;
background-color: var(--custom-EDEDED);
border-radius: 32px;
font-family: "SourceSans3-SemiBold";
}
.active-blog-tab {
background-color: var(--custom-CDE3FE) !important;
}
.blogs-section-one-cont {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.blog-card-cont-img {
height: 200px;
width: 100%;
position: relative;
margin-bottom: 16px;
border-radius: 8px;
overflow: hidden;
}
.blog-card-cont-img>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.blog-card-cont-img-label {
position: absolute;
top: 12px;
left: 12px;
height: 42px;
padding: 0px 20px;
border-radius: 32px;
background: var(--custom-rgba10);
backdrop-filter: blur(24px);
color: var(--custom-FDFDFD);
font-family: "SourceSans3-SemiBold";
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.blog-card-cont-dte-time {
display: flex;
align-items: center;
flex-direction: row;
gap: 8px;
margin-bottom: 8px;
}
.blog-card-cont-date {
color: var(--custom-252525);
font-size: 16px;
font-family: "SourceSans3-SemiBold";
}
.blog-card-cont-ind {
height: 6px;
width: 6px;
background-color: var(--custom-D9D9D9);
border-radius: 100%;
}
.blog-card-cont-tle {
font-size: 24px;
font-family: "SourceSans3-SemiBold";
color: var(--custom-252525);
margin-bottom: 12px;
}
.blog-card-cont-stle {
font-size: 16px;
color: var(--custom-737373);
font-family: "SourceSans3-Regular";
margin-bottom: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.blog-profile-card {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
}
.blog-profile-card-img {
height: 32px;
width: 32px;
border-radius: 100%;
overflow: hidden;
}
.blog-profile-card-img>img {
height: 100%;
width: 100%;
object-fit: cover;
}
.blog-profile-card-tle {
font-size: 16px;
font-family: "SourceSans3-Regular";
color: var(--custom-252525);
}
.blog-section-wrapper {
padding-top:24px;
padding-left:12px;
padding-right:0px;
}
.blogs-section-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media only screen and (max-width: 800px) {
.blogs-section-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width: 687px) {
.blog-section-one-hd {
font-size: 24px;
font-family: "SourceSans3-SemiBold";
margin-top: 28px;
line-height: 23.4px;
}
.blogs-section-one-tle {
font-size: 14px;
}
}
@media only screen and (max-width: 600px) {
.blogs-section-grid {
grid-template-columns: repeat(1, 1fr);
}
.all-blogs-tab-btn,
.finacial-tab-btn,
.rei-capital-income-tab-btn,
.rei-capital-growth-tab-btn {
height: 38px;
padding: 0 20px;
font-size: 14px !important;
}
.blog-tab-button-cont {
gap: 8px;
padding-bottom: 10px;
margin-bottom: 10px;
}
.blogs-section-one {
height: 160px;
}
.blog-section-wrapper {
padding: 0px var(--mobile-padding);
}
.blog-card-cont-img {
height: 120px;
margin-bottom: 8px;
}
.blog-card-cont-img-label {
position: absolute;
top: 8px;
left: 8px;
height: 31px;
padding: 0px 12px;
font-size: 12px;
}
.blog-card-cont-dte-time {
margin-bottom: 6px;
}
.blog-card-cont-date {
font-size: 12px;
}
.blog-card-cont-tle {
font-size: 14px;
margin-bottom: 6px;
}
.blog-card-cont-stle {
font-size: 12px;
margin-bottom: 6px;
}
.blog-profile-card-img {
height: 20px;
width: 20px;
}
.blog-profile-card-tle {
font-size: 12px;
}
}
/* ******************* End :: Blogs ******************************** */
/******************** Start :: REI Settings ******************************** */
.setting_toggle_cont {
display: flex;
flex-direction: column;
gap: 24px;
}
/* settings in settingsfiles/trust_item.tpl */
.setting_trust_container {
border:solid 1px #000000;
border-radius:10px;
padding:10px;
padding-bottom:20px;
margin-bottom:20px;
}
.setting_trust_name {
font-size:24px;
font-weight:bold;
}
/* ******************* End :: REI Settings ******************************** */
/******************** Start :: NAVs ******************************** */
.subnav {
height: 50px;
padding: 0 24px;
font-size: 16px;
color: var(--custom-252525);
transition: background 0.3s, transform 0.2s;
background-color: var(--custom-EDEDED);
border-radius: 32px;
font-family: "SourceSans3-SemiBold";
}
.subnav_active {
background-color: var(--custom-CDE3FE) !important;
}
.rei_navbar_container {
display: flex;
flex-direction: row;
gap: 12px;
margin-bottom: 24px;
}
.navbar_container {
display: flex;
flex-direction: row;
gap: 12px;
margin-bottom: 24px;
flex-wrap: wrap;
width:100%;
}
.navbar_item {
height: 50px;
padding: 0 24px;
font-size: 16px;
color: var(--custom-252525);
border-radius:14px;
font-family: "SourceSans3-Regular";
background-color: var(--custom-EDEDED);
display:inline;
flex:1 1 150px;
}
.navbar_item:hover {
background-color:var(--custom-919EAB);
}
.navbar_item_active {
color: var(--custom-2181FA) !important;
}
/* from dashboard_styles */
.nav-lnk {
height: 50px;
width: 100%;
border-radius: 32px;
padding-left: 16px;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
flex-shrink: 0;
transition: all 0.4s ease;
white-space: nowrap;
}
.nav-collapse-item-hide.hide-title {
display: none;
transition: width 0.4s ease;
}
.nav-lnk.hide-pad {
padding: 0px;
align-items: center;
justify-content: center;
}
.nav-lnk>p {
color: var(--custom-252525);
transition: all 0.4s ease;
white-space: nowrap;
}
.nav-lnk-icon {
height: 24px;
width: 24px;
flex-shrink: 0;
}
.nav-lnk-icon>img {
width: 100%;
height: 100%;
}
.nav-lnk-active {
background-color: var(--custom-EBF4FF);
}
.nav-lnk-active>p {
color: var(--custom-2181FA);
font-family: "SourceSans3-SemiBold";
}
/* ******************* End :: NAVs ******************************** */
/******************** Start :: Mobile NAVs ******************************** */
.mobile-nav {
height: 65px;
width: 100%;
position: fixed;
bottom: 0px;
right: 0px;
left: 0px;
border-top: 1px solid var(--custom-F7F7F7);
display: none;
flex-direction: row;
background-color: white;
justify-content: space-between;
padding: 0px 204px;
z-index: 999999;
}
.mobile-nav-lnk {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2px;
pointer-events: auto;
}
.mobile-nav-lnk>p {
font-family: "SourceSans3-SemiBold";
font-size: 12px;
color: var(--custom-252525);
}
.mobile-nav-lnk-icon {
height: 20px;
width: 20px;
}
.mobile-nav-lnk-icon>img {
width: 100%;
height: 100%;
}
.mobile-nav-active>p {
color: var(--custom-2181FA);
}
@media only screen and (max-width: 1210px) {
.mobile-nav {
display:flex;
}
}
@media only screen and (max-width: 981px) {
.mobile-nav {
padding: 0px 50px;
}
}
@media only screen and (max-width: 600px) {
.mobile-nav {
padding: 0px 20px;
}
}
/* ******************* End :: Mobile NAVs ******************************** */
/******************** Start :: Modal ******************************** */
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 100; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
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.5); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
position: relative;
background-color: #fff;
margin: 15% auto; /* 15% from the top and centered */
z-index:200;
height:400px;
padding-left:1.5rem;
padding-right:1.5rem;
padding-top:1.5rem;
width: 400px;
}
.modal-background {
z-index:55;
opacity: 0.8;
margin-top: -1.5rem;
margin-left:-1.5rem;
position:absolute;
}
.modal-iframe {
position:absolute;
z-index:60;
margin-top:2rem;
}
/* The Close Button */
.close {
color: #aaa;
position: absolute;
right:20px;
top:15px;
font-size: 28px;
font-weight: normal;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* ******************* End :: Modal ******************************** */
/******************** Start :: Page Title ******************************** */
.mobile_page_title {
position: absolute;
left: 45px;
top: 30px;
font-size: 16px;
font-family: "SourceSans3-SemiBold";
color: black;
margin-bottom: 4px;
display:none ;
}
@media only screen and (max-width: 600px) {
.mobile_page_title
{
display:block;
}
}
/* ******************* End :: Page Title ******************************** */
/******************** Start :: Checkbox ******************************** */
:root {
--checkbox-border-color: #8b8c89;
--checkbox-checked-color: #274c77;
--checkbox-hover-color: #a3cef1;
--checkbox-disabled-bg-color: #d9d9d9;
}
.checkrequired {
box-sizing: border-box;
width: 20px;
height: 20px;
margin: 6px;
padding: 0;
border: 2px solid var(--checkbox-border-color);
appearance: none;
background-color: transparent;
outline: none;
transition: outline 0.1s;
}
.checkrequired:checked {
background-size: cover;
padding: 2px;
}
.checkrequired:not(:disabled):checked {
border-color: var(--checkbox-checked-color);
background-image: url('data:image/svg+xml;utf8,');
}
.checkrequired:disabled {
background-color: var(--checkbox-disabled-bg-color);
}
.checkrequired:disabled:checked {
background-image: url('data:image/svg+xml;utf8,');
}
.required_fields {
padding-top:10px;
color:#FF0000;
font-size: 16px;
padding-bottom:10px;
}
/* custom-checkbox */
/* from common.css */
.custom-checkbox {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
left: 9px;
}
.custom-label {
width: 17px;
height: 17px;
border: 1px solid var(--custom-737373);
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in-out;
position: relative;
}
.custom-label::after {
content: "";
width: 4px;
height: 7px;
top: 1.9px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(35deg);
position: absolute;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.custom-checkbox:checked+.custom-label {
background-color: var(--custom-2181FA);
border-color: transparent;
}
.custom-checkbox:checked+.custom-label::after {
opacity: 1;
}
/* from kyc_styles.css */
.custom-checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
}
.custom-checkbox .checkmark {
position: relative;
height: 18px;
width: 18px;
background-color: transparent;
border: 1px solid #ccc;
border-radius: 3px;
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
flex-shrink: 0;
}
.custom-checkbox input[type="checkbox"]:checked+.checkmark::after {
content: "";
position: absolute;
top: 6px;
left: 50%;
width: 3px;
height: 7px;
border: solid white;
border-width: 0 2px 2px 0;
transform: translate(-50%, -50%) rotate(45deg);
}
/* from auth styles */
.custom-checkbox {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 14px;
color: var(--custom-696F79);
font-family: "SourceSans3-Regular";
margin-top: 17px;
}
.custom-checkbox a {
color: var(--custom-696F79);
}
@media only screen and (max-width: 655px) {
.custom-checkbox {
gap: 6px;
font-size: 14px;
}
}
@media only screen and (max-width: 490px) {
.custom-checkbox {
align-items: start;
}
}
/* ******************* End :: Checkbox ******************************** */