/* Small devices (phones, 576px and up):
* @media (min-width: 576px) { ... } */
/* Medium devices (tablets, 768px and up):
* @media (min-width: 768px) { ... } */
/* Large devices (desktops, 992px and up):
* @media (min-width: 992px) { ... } */
/* Extra large devices (large desktops, 1200px and up):
* @media (min-width: 1200px) { ... } */
/* Chromium (Webkit) scrollbars suck */
::-webkit-scrollbar {
background: transparent;
width: 0;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
}
:root {
--theme-blue: #040a5e;
--theme-light-blue: #e5e5ff;
--theme-dark-blue: #111827;
--theme-soft-blue: #929bca;
--theme-faint-blue: #d1d5db;
--theme-dark-pink: #cf3d60;
--theme-light-pink: #ffadbc;
--theme-soft-pink: #f9ecff;
--theme-soft-peach: #fce6ec;
--theme-purple: #822384;
--theme-soft-purple: #e5e5ff;
--theme-border-color: #e5e7eb;
--theme-fallback-100: var(--theme-border-color);
--theme-fallback-400: #abb2bf;
--theme-fallback-700: #454c59;
--theme-gradient-pink: var(--theme-soft-pink);
--theme-gradient-peach: var(--theme-soft-peach);
--theme-gradient-purple: var(--theme-soft-purple);
--theme-nav-menu-width: 80px;
--theme-button-padding-x: 0.75rem;
--theme-button-padding-y: 0.375rem;
}
.contact-yellow {
--_fill: #fff9ed;
--_border: #eac57b;
--_color: #5b4417;
}
.contact-blue {
--_fill: #ecf9ff;
--_border: #7dc1df;
--_color: #104358;
}
.contact-pink {
--_fill: #fde9ff;
--_border: #c692ca;
--_color: #4d1552;
}
.contact-green {
--_fill: #e9ffe8;
--_border: #93ca92;
--_color: #144d13;
}
.contact-purple {
--_fill: #ebeeff;
--_border: #929bca;
--_color: #040a5e;
}
/* @media (max-width: 992px) { */
/* body::before { */
/* display: flex; */
/* position: fixed; */
/* justify-content: center; */
/* align-items: center; */
/* z-index: 999; */
/* inset: 0; */
/* background: linear-gradient( */
/* 180deg, */
/* var(--theme-gradient-peach) 19.89%, */
/* var(--theme-gradient-pink) 39.38%, */
/* var(--theme-gradient-purple) 61.71% */
/* ); */
/* padding: 2rem; */
/* content: 'The current screen size or orientation is not supported. Please use a device with a larger screen, like a desktop or laptop, to access the dashboard.'; */
/* color: var(--theme-blue); */
/* font-weight: bold; */
/* text-align: center; */
/* } */
/**/
/* body { */
/* overflow: hidden; */
/* } */
/**/
/* .all-section-area { */
/* display: none; */
/* } */
/* } */
.__full-height {
height: 100%;
}
body {
background-color: var(--theme-soft-purple);
}
.mt-4 {
margin-top: 14px;
}
.mb-4 {
margin-bottom: 14px;
}
/* FORMS */
input[type='text'].form-control,
input[type='date'].form-control,
input[type='email'].form-control,
select.form-control,
textarea.form-control {
transition: box-shadow 0.2s;
outline: 0;
box-shadow: 0px 0px 0px 1px var(--theme-faint-blue);
border: 0;
background-color: #ffffff;
padding: 0.6rem 0.8rem;
height: initial;
}
input[type='text'].form-control:focus,
input[type='date'].form-control:focus,
input[type='email'].form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
box-shadow:
0px 0px 0px 1px var(--theme-soft-blue),
0px 0px 0px 4px var(--theme-soft-purple);
}
input[type='text'].form-control:disabled,
input[type='date'].form-control:disabled,
input[type='email'].form-control:disabled,
select.form-control:disabled,
textarea.form-control:disabled {
box-shadow: none;
background-color: #f3f4f6;
}
.form-check-input:checked {
border-color: var(--theme-dark-pink);
background-color: var(--theme-dark-pink);
}
.form-check-input:focus {
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(241, 14, 99, 0.25);
border-color: var(--theme-dark-pink);
}
.form-control:hover:focus,
.form-control:focus {
outline: 0;
box-shadow:
0px 0px 0px 1px var(--theme-soft-blue),
0px 0px 0px 4px var(--theme-soft-purple);
}
/* MODALS */
.modal.show {
display: grid !important;
place-items: center;
}
.modal .modal-dialog {
margin: 0;
}
/* .modal .modal-content { } */
.modal .modal-content .modal-header {
border: none;
padding-bottom: 0;
}
.modal .modal-content .modal-header .modal-title {
color: var(--theme-blue);
}
/* .modal .modal-content .modal-body { } */
.modal .modal-content .modal-footer {
margin: 0 1rem 1rem 1rem;
padding: 0;
padding-top: 0.6rem;
}
.modal .modal-footer button {
/* display: flex; */
/* gap: 0.4rem; */
/* align-items: center; */
border-radius: 999px;
background-color: var(--theme-dark-pink);
color: #ffffff;
}
.modal .modal-footer button.btn-outline {
box-shadow: inset 0px 0px 0px 1px var(--theme-dark-pink);
background-color: #ffffff;
color: var(--theme-dark-pink);
}
.swal2-popup .swal2-styled.swal2-confirm {
border: 1px solid var(--theme-dark-pink);
border-radius: 999px;
background: none;
padding: 0.4rem 2.4rem;
color: var(--theme-dark-pink);
}
.__navigation{
background-color: var(--theme-blue);
}
/* MAIN STYLES */
.myallMainApp {
display: flex;
flex-direction: column;
margin: 0;
background: linear-gradient(
180deg,
var(--theme-gradient-peach) 19.89%,
var(--theme-gradient-pink) 39.38%,
var(--theme-gradient-purple) 61.71%
);
padding: 0px 0px 60px 0px;
min-height: 100vh;
flex-wrap: wrap;
}
@media (min-width: 992px) {
.myallMainApp {
padding-bottom: 0;
}
}
.myallMainApp .myallMainAppInner {
/* NOTE: Might cause issues elsewhere */
display: flex;
flex-grow: 1;
flex-direction: column;
padding: 0.6rem;
}
@media (min-width: 992px) {
.myallMainApp {
margin-left: var(--theme-nav-menu-width);
background: linear-gradient(
270deg,
var(--theme-gradient-peach) 19.89%,
var(--theme-gradient-pink) 39.38%,
var(--theme-gradient-purple) 61.71%
);
}
}
.main-content-wrap {
padding-top: 0px;
}
/* DASHBOARD STYLES */
/* === NAVIGATION === */
/* # MOBILE*/
.myallNav.__mobile {
--height: 60px;
display: flex;
position: fixed;
right: 0;
bottom: 0;
left: 0;
flex-direction: column;
justify-content: space-between;
z-index: 1;
transition: all ease 0.25s;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
background-color: var(--theme-blue);
min-height: var(--height);
}
.myallNav.__mobile.active {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
min-height: 100svh;
}
.myallNav.__mobile .__panel {
visibility: hidden;
height: 0;
}
.myallNav.__mobile .__panel .__profile {
padding-top: 2rem;
padding-bottom: 1rem;
}
.myallNav.__mobile .__panel .__profile .__avatar {
--size: 60px;
margin: auto;
border: 2px solid #ffffff;
border-radius: 50%;
width: var(--size);
height: var(--size);
overflow: hidden;
position: relative; /* Added for proper image positioning */
}
/* Add this rule to properly handle the image inside */
.myallNav.__mobile .__panel .__profile .__avatar img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensures the image covers the area without distortion */
display: block; /* Removes any default inline spacing */
}
.myallNav.__mobile .__panel .__profile .__name {
margin-top: 0.6rem;
color: #ffffff;
text-align: center;
}
.myallNav.__mobile .__panel .__close {
display: flex;
justify-content: end;
padding: 0.6rem;
}
.myallNav.__mobile .__panel .__close svg {
fill: var(--theme-light-pink);
}
.myallNav.__mobile .__panel .__links {
display: flex;
flex-direction: column;
gap: 1.6rem;
}
.myallNav.__mobile .__panel .__links a {
display: block;
color: var(--theme-light-pink);
text-align: center;
}
.myallNav.__mobile .__panel .__links a.font-sm {
font-size: smaller;
color: white; /* Set color to white as requested */
}
.myallNav.__mobile .__panel .__links hr {
opacity: 0.1;
margin: 0;
color: #ffffff;
}
.myallNav.__mobile .__panel .__copy {
display: flex;
justify-content: center;
gap: 0.6rem;
padding-inline: 1rem;
font-size: 0.8rem;
}
.myallNav.__mobile .__panel .__copy a {
display: grid;
place-items: center center;
border-radius: 50%;
}
.floating-footer-bar_menu {
margin: 20px 10px; /* Add some margin instead */
padding: 10px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
z-index: 990; /* Keep z-index if still needed for stacking context */
transition: all 0.3s ease;
background-color: transparent;
border-top: 1px solid var(--_border);
}
/* For iPhone 11 and similar sizes (414px width and up) */
@media only screen and (max-width: 414px) {
.floating-footer-bar_menu {
bottom: 80px; /* Adjust as needed */
}
}
/* For Samsung S8 and similar small screens (360px width and up) */
@media only screen and (max-width: 360px) {
.floating-footer-bar_menu {
bottom: 80px; /* Adjust as needed */
}
}
.myallNav.__mobile .__panel .__socials {
display: flex;
justify-content: center;
gap: 0.6rem;
padding-inline: 4rem;
}
.myallNav.__mobile .__panel .__socials a {
--size: 32px;
display: grid;
place-items: center center;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
width: var(--size);
height: var(--size);
}
.myallNav.__mobile .__panel .__socials svg {
fill: var(--theme-light-pink);
}
.myallNav.__mobile .__menu {
display: grid;
grid-template-columns: repeat(5, 1fr);
height: var(--height);
}
.myallNav.__mobile .__menu .__avatar {
--size: 30px;
margin: auto;
border: 2px solid var(--theme-light-pink);
border-radius: 50%;
width: var(--size);
height: var(--size);
overflow: hidden;
}
.myallNav.__mobile .mobile-footer-menu-item a {
display: grid;
place-items: center center;
height: 100%;
}
.myallNav.__mobile .mobile-footer-menu-item a div {
display: flex;
flex-direction: column;
align-items: center;
}
.myallNav.__mobile .mobile-footer-menu-item .menu-title {
color: var(--theme-light-pink);
font-size: 10px;
}
.myallNav.__mobile .mobile-footer-menu-item svg {
fill: var(--theme-light-pink);
}
.myallNav.__mobile .mobile-footer-menu-item.mobile-active .menu-title {
color: var(--theme-soft-blue);
}
.myallNav.__mobile .mobile-footer-menu-item.mobile-active svg {
fill: var(--theme-soft-blue);
}
@media (min-width: 992px) {
.myallNav.__mobile {
display: none;
}
}
/* # DESKTOP */
.myallNav.__desktop {
display: none;
}
#nav-burger-menu {
display: none;
}
@media (min-width: 992px) {
.myallNav.__desktop {
display: block;
position: fixed;
top: 0;
width: var(--theme-nav-menu-width);
}
.simplebar-content {
display: flex;
flex-direction: column;
height: 100%;
}
.side-menu-area {
left: 0;
}
.side-menu-area .sidebar-nav {
border: 0;
border-radius: 0;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
background-color: var(--theme-blue);
}
#sidebar-menu {
padding-top: 0 !important;
}
.myallNavSidebar {
--height: 1.4rem;
--padding: 1rem;
--border-radius: 20px;
--curve: 40px;
--background: var(--theme-blue);
--active: var(--theme-light-blue);
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.myallNavSidebarLogo {
position: relative;
z-index: 999999;
padding: 1.4rem;
}
.myallNavSidebarLink {
padding: 0.8rem 0.5rem !important;
}
.myallNavSidebar li {
position: relative;
z-index: 1;
}
.myallNavSidebar li.mm-active {
z-index: 0;
}
.myallNavSidebar li a {
position: relative;
z-index: 91;
transition: none;
margin-left: 4px;
}
.myallNavSidebar li.mm-active a {
border-top-left-radius: 999px;
border-bottom-left-radius: 999px;
background-color: var(--active);
}
.myallNavSidebar li.mm-active a.__organiser {
background-color: #ffffff;
}
.myallNavSidebar li a div span {
color: var(--theme-light-pink);
font-size: 10px;
}
.myallNavSidebar li a div {
display: flex;
flex-direction: column;
align-items: center;
}
.myallNavSidebar li.disabled a svg {
fill: var(--theme-fallback-400);
}
.myallNavSidebar li.disabled a span {
color: var(--theme-fallback-400);
}
.myallNavSidebar li.mm-active a::before,
.myallNavSidebar li.mm-active a::after,
.myallNavSidebar li.mm-active a div::before,
.myallNavSidebar li.mm-active a div::after {
position: absolute;
width: var(--curve);
height: var(--curve);
content: '';
}
.myallNavSidebar li.mm-active a::before,
.myallNavSidebar li.mm-active a div::before {
top: calc(var(--curve) * -1);
right: 0;
}
.myallNavSidebar li.mm-active a::after,
.myallNavSidebar li.mm-active a div::after {
right: 0;
bottom: calc(var(--curve) * -1);
background-color: var(--active);
}
.myallNavSidebar li.mm-active a::before {
top: calc((var(--curve) / 2) * -1);
background-color: var(--active);
width: calc(var(--curve) / 2);
height: calc(var(--curve) / 2);
}
.myallNavSidebar li.mm-active a.__organiser::after,
.myallNavSidebar li.mm-active a.__organiser::before {
background-color: #ffffff;
}
.myallNavSidebar li.mm-active a div::before {
background-color: var(--background);
}
.myallNavSidebar li.mm-active a::after {
bottom: calc((var(--curve) / 2) * -1);
width: calc(var(--curve) / 2);
height: calc(var(--curve) / 2);
}
.myallNavSidebar li.mm-active a div::after {
background-color: var(--background);
}
.myallNavSidebar li.mm-active a div::before,
.myallNavSidebar li.mm-active a div::after {
z-index: 2;
border-radius: var(--curve);
}
.myallNavSidebar li.mm-active a span {
color: var(--theme-blue);
}
.myallNavIcon {
fill: var(--theme-light-pink);
}
.myallNavSidebar li.mm-active .myallNavIcon {
fill: var(--theme-blue);
}
.myallNavSidebarFooter {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-block: 2rem;
padding: 0 !important;
}
.myallNavSidebarFooterIcons {
display: flex;
flex-direction: column;
gap: 0.5rem;
border-radius: 99px;
background-color: rgba(255, 255, 255, 0.1);
padding: 0.5rem;
}
.myallNavSidebarFooterIcons svg,
.myallNavSidebarFooter svg {
fill: var(--theme-light-pink);
}
#myallProfileLanguage {
position: relative;
cursor: pointer;
border-right: 1px solid rgba(255, 255, 255, 0.5);
padding-right: 0.5rem;
}
#myallProfileLanguage .__content {
display: flex;
align-items: center;
gap: 0.2rem;
}
#myallProfileLanguage .__menu {
display: none;
position: absolute;
right: 0;
z-index: 99;
box-shadow: 0px 2px 10px 0px #00000026;
border-radius: 8px;
background-color: #ffffff;
padding: 1rem;
white-space: nowrap;
}
#nav-burger-menu {
display: none;
position: fixed;
bottom: 100px;
left: calc(var(--theme-nav-menu-width) - 0.6rem);
box-shadow: 0px 2px 10px 0px #00000026;
border-radius: 8px;
background: #ffffff;
z-index: 1000; /* Ensure the menu is above other elements */
}
.myallNavBottomLogo {
/* --size: 60; */
position: fixed;
bottom: 30px;
/* width: var(--size);
height: var(--size); */
}
#profile-burger {
position: relative;
}
#profile-burger-menu {
display: none;
position: absolute;
right: 0;
z-index: 99;
box-shadow: 0px 2px 10px 0px #00000026;
border-radius: 8px;
background-color: #ffffff;
white-space: nowrap;
}
#nav-burger-menu .links,
#profile-burger-menu .links {
border-bottom: 1px solid var(--theme-border-color);
padding: 0.4rem 0.6rem;
display: inline-block;
white-space: nowrap;
}
#nav-burger-menu .links,
#profile-burger-menu .links .links-buttons {
display: inline-block;
white-space: nowrap;
}
#nav-burger-menu .links:last-of-type,
#profile-burger-menu .links:last-of-type {
border: 0;
}
}
/* # PROFILE */
.myallProfileContainer {
display: flex;
flex-grow: 1;
flex-direction: column;
gap: 1rem;
margin-top: 1rem;
}
@media (min-width: 992px) {
.myallProfileContainer {
display: grid;
grid-template-columns: 20rem 2fr 20rem;
}
}
.myallProfileContainer > section {
border-radius: 20px;
background: #ffffff80;
padding: 1rem;
}
.myallProfileContainer .contacts-section {
display: flex;
flex-direction: column;
}
.myallProfileContainer .contacts-section h3 {
margin: 0;
color: var(--theme-blue);
font-weight: 700;
font-size: 1rem;
}
.myallProfileContainer .contacts-section .__heading {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 1rem;
}
.myallProfileContainer .contacts-section .__heading button {
display: flex;
align-items: center;
gap: 0.2rem;
border-radius: 999px;
background-color: var(--theme-blue);
padding-inline: var(--theme-button-padding-x);
padding-block: var(--theme-button-padding-y);
color: #ffffff;
}
.myallProfileContainer .contacts-section .__tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.myallProfileContainer .contacts-section .__tab > div {
display: flex;
align-items: center;
gap: 0.2rem;
}
.myallProfileContainer .contacts-section .__tabs .__tab {
display: flex;
position: relative;
flex-grow: 1;
justify-content: center;
align-items: center;
gap: 0.4rem;
cursor: pointer;
border: none;
border-radius: 20px 0px 0px 0px;
background-color: transparent;
height: 40px;
color: var(--theme-blue);
font-weight: 700;
font-size: 0.8rem;
}
.myallProfileContainer .contacts-section .__tabs .__tab.active {
background-color: var(--theme-blue);
color: #ffffff;
}
.myallProfileContainer .contacts-section .__tabs .__tab svg {
fill: var(--theme-blue);
}
.myallProfileContainer .contacts-section .__tabs .__tab.active svg {
fill: #ffffff;
}
.myallProfileContainer
.contacts-section
.__tabs
.__tab.active:not(:first-child)::before {
position: absolute;
bottom: 0;
left: -40px;
mask-image: url('data:image/svg+xml;utf8,');
mask-position: bottom;
mask-repeat: no-repeat;
background-color: inherit;
width: 40px;
height: 100%;
content: '';
}
.myallProfileContainer
.contacts-section
.__tabs
.active:not(:last-child)::after {
position: absolute;
right: -40px;
bottom: 0;
mask-image: url('data:image/svg+xml;utf8,');
mask-position: bottom;
mask-repeat: no-repeat;
background-color: inherit;
width: 40px;
height: 100%;
content: '';
}
.myallProfileContainer .contacts-section .__tabs .active:last-child {
border-radius: 0px 20px 0px 0px;
}
.myallProfileContainer .contacts-section .__tabs .__tab:first-child div {
padding-left: 20px;
}
.myallProfileContainer .contacts-section .__tabs .__tab:last-child div {
padding-right: 20px;
}
.myallProfileContainer .contacts-section .__tab-content {
display: flex;
flex-grow: 1;
flex-direction: column;
gap: 0.6rem;
border-radius: 0px 0px 20px 20px;
background: linear-gradient(
var(--theme-blue) 0%,
var(--theme-purple) 45%,
var(--theme-dark-pink)
);
padding: 1rem;
}
.myallProfileContainer .contacts-section .__tab-content button {
display: block;
border: 0;
border-radius: 8px;
background: rgba(255, 255, 255, 0.2);
padding: 1rem;
text-align: initial;
}
.myallProfileContainer .contacts-section .__tab-content .__share {
justify-content: space-between;
align-items: center;
}
.myallProfileContainer .contacts-section .__tab-content .__details {
display: flex;
align-items: center;
gap: 0.6rem;
}
.myallProfileContainer .contacts-section .__tab-content .__share .__text {
line-height: 1.2;
}
.myallProfileContainer .contacts-section .__tab-content .__share svg {
fill: var(--_border, #ffffff);
}
.myallProfileContainer .contacts-section .__content {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.myallProfileContainer .contacts-section .__contact {
/* Variables added to .__contact (div) as inline styles. --_fill; --_font;
* --_border */
display: flex;
align-items: center;
gap: 0.4rem;
border-radius: 8px;
background-color: #ffffff;
padding: 0.7rem;
}
.myallProfileContainer .contacts-section .__avatar {
--_size: 3.2rem;
display: grid;
position: relative;
flex-shrink: 0;
place-items: center center;
border: 4px solid;
border-color: var(--_border, #ffffff);
border-radius: 100%;
background-color: var(--_fill, var(--theme-border-color));
width: var(--_size);
height: var(--_size);
overflow: hidden;
color: var(--_color);
/* color: color-mix( */
/* in hsl shorter hue, */
/* var(--_border, #ffffff) 80%, */
/* var(--theme-purple) 30% */
/* ); */
font-weight: 700;
font-size: 1rem;
}
.myallProfileContainer .contacts-section .__avatar img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.myallProfileContainer .contacts-section .__name-container {
display: flex;
justify-content: space-between;
width: 100%;
min-width: 0;
}
.myallProfileContainer .contacts-section .__name {
flex: 1;
min-width: 0;
overflow: hidden;
color: var(--_fill, #ffffff);
/* color: color-mix( */
/* in oklch shorter hue, */
/* var(--_border, #ffffff) 60%, */
/* #ffffff 100% */
/* ); */
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.myallProfileContainer .contacts-section .__relation {
color: #ffffff;
}
.myallProfileContainer .contacts-section .__type {
border-radius: 999px;
background: var(--_fill);
padding: 0.2rem 0.7rem;
color: var(--_font);
font-size: 0.6rem;
}
.myallProfileContainer .contacts-section .__relation {
font-size: 0.7rem;
}
/* .myallProfileContainer .timeline-section { */
/* } */
.myallProfileContainer .timeline-section .__date-group {
display: flex;
align-items: center;
gap: 0.4rem;
color: var(--theme-soft-blue);
}
.myallProfileContainer .timeline-section .__date-group span {
display: block;
flex-grow: 1;
opacity: 0.2;
background-color: var(--theme-soft-blue);
height: 1px;
}
.myallProfileContainer .timeline-section h3 {
margin: 0;
margin-bottom: 1rem;
color: var(--theme-blue);
font-weight: 700;
font-size: 1rem;
}
.myallProfileContainer .timeline-section .__events-grouped {
display: flex;
flex-direction: column;
gap: 1rem;
}
.myallProfileContainer .timeline-section .__events {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.myallProfileContainer .timeline-section .__event-container {
display: flex;
align-items: center;
gap: 0.6rem;
border-radius: 8px;
background-color: #ffffff;
padding: 1rem;
line-height: 1rem;
}
.myallProfileContainer .timeline-section .__avatar {
--_size: 32px;
position: relative;
flex-shrink: 0;
outline: 2px solid var(--theme-soft-blue);
border-radius: 100%;
width: var(--_size);
height: var(--_size);
overflow: hidden;
}
.myallProfileContainer .timeline-section .__shared {
outline: 1px solid var(--theme-soft-purple);
}
.myallProfileContainer .timeline-section .__avatar img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.myallProfileContainer .timeline-section .__description {
color: var(--theme-blue);
font-weight: 600;
}
.myallProfileContainer .timeline-section .__timestamp {
font-size: 0.8rem;
}
.myallProfileContainer .organiser-section,
.myallProfileContainer .organiser-section > div {
display: flex;
flex-direction: column;
gap: 1rem;
}
.myallProfileContainer .organiser-section h3 {
display: flex;
margin: 0;
color: var(--theme-blue);
font-weight: 700;
font-size: 1rem;
}
.myallProfileContainer .organiser-section .__heading button {
display: flex;
align-items: center;
justify-content: center; /* Center the icon horizontally */
gap: 0.2rem;
border-radius: 999px;
background-color: var(--theme-dark-pink);
padding-inline: var(--theme-button-padding-x);
padding-block: var(--theme-button-padding-y);
color: #ffffff;
border: none; /* Remove unwanted borders */
margin-top: 0%;
margin-left: auto;
}
.myallProfileContainer .organiser-section .__heading button svg {
--size: 20px;
fill: white; /* Ensure the icon remains white */
width: var(--size);
height: var(--size);
}
.myallProfileContainer .organiser-section .__status-indicator {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
border-radius: 20px;
background: white;
padding: 1rem;
}
.myallProfileContainer .organiser-section .__status-indicator .__heading {
display: flex;
align-items: center;
gap: 0.4rem;
width: 100%;
}
.myallProfileContainer .organiser-section .__status-indicator .__heading h4 {
margin: 0;
color: var(--theme-blue);
font-size: 0.85rem;
}
.myallProfileContainer .organiser-section .__status-indicator hr {
margin: 0;
width: 100%;
}
.myallProfileContainer .organiser-section .__status-indicator .__options a {
display: flex;
align-items: center;
gap: 0.2rem;
color: var(--theme-dark-pink);
}
.myallProfileContainer .organiser-section .__progress-container {
--size: 300px; /* Default size for most devices */
position: relative;
width: var(--size);
height: var(--size);
}
/* Small screens: iPhone 5/SE, iPhone 4 (320px and above) */
@media (max-width: 320px) {
.myallProfileContainer .organiser-section .__progress-container {
--size: 60px; /* Reduced size for very small screens */
}
}
/* Medium screens: iPhone 6/7/8, iPhone SE (375px and above) */
@media (min-width: 321px) and (max-width: 374px) {
.myallProfileContainer .organiser-section .__progress-container {
--size: 80px; /* Slightly smaller for medium devices */
}
}
/* Larger screens: iPhone XR, iPhone 6/7/8 Plus (414px and above) */
@media (min-width: 375px) and (max-width: 768px) {
.myallProfileContainer .organiser-section .__progress-container {
--size: 90px; /* Adjust size for larger phones and tablets */
}
}
/* Tablets and small laptops: 768px and above */
@media (min-width: 769px) and (max-width: 1024px) {
.myallProfileContainer .organiser-section .__progress-container {
--size: 110px; /* Slightly larger for tablets */
}
}
/* Laptops and desktops: 1024px and above */
@media (min-width: 1025px) {
.myallProfileContainer .organiser-section .__progress-container {
--size: 120px; /* Larger size for desktops and large screens */
}
}
/* Large desktops: 1440px and above */
@media (min-width: 1440px) {
.myallProfileContainer .organiser-section .__progress-container {
--size: 140px; /* Maximum size for large screens */
}
}
.myallProfileContainer
.organiser-section
.__organiser-progress
.__organiser-link
svg {
fill: var(--theme-dark-pink);
}
.myallProfileContainer .organiser-section .__progress-container {
position: relative;
width: 100%; /* Adjust to desired container width */
height: auto; /* Adjust height dynamically based on content */
display: flex;
flex-direction: column; /* Stack elements vertically */
align-items: center; /* Center elements horizontally */
}
.myallProfileContainer .organiser-section .__progress-bar {
width: 100%; /* Make the SVG take up the full container width */
height: 15px; /* Define the height of the bar */
max-width: 300px; /* Set a maximum width */
min-width: 150px; /* Set a minimum width */
display: block; /* Ensure proper layout */
margin: 0 auto; /* Center the SVG within the container */
}
.myallProfileContainer .organiser-section .__bar-bg {
fill: #e5e7eb; /* Background color */
rx: 5; /* Rounded corners for the background */
}
.myallProfileContainer .organiser-section .__bar {
fill: url(#gradient); /* Gradient fill for the progress */
rx: 5; /* Rounded corners for the progress */
}
.myallProfileContainer .organiser-section .__progress-text {
margin-top: 8px; /* Space between the bar and text */
text-align: center; /* Center align the text */
display: flex;
flex-direction: column;
line-height: 1.1;
}
/* region organiser links */
.myallProfileContainer .organiser-section .__organiser-link {
margin-top: 8px; /* Space between the bar and text */
text-align: left; /* Align text to the left */
display: block;
font-size: 16px; /* Default font size */
font-weight: 400;
line-height: 1.6;
}
/* Small screens: iPhone 5/SE, iPhone 4 (320px and above) */
@media (max-width: 320px) {
.myallProfileContainer .organiser-section .__organiser-link {
font-size: 12px; /* Smaller font for very small screens */
}
}
/* Medium screens: iPhone 6/7/8, iPhone SE (375px and above) */
@media (min-width: 321px) and (max-width: 374px) {
.myallProfileContainer .organiser-section .__organiser-link {
font-size: 14px; /* Slightly smaller font for medium devices */
}
}
/* Larger screens: iPhone XR, iPhone 6/7/8 Plus (414px and above) */
@media (min-width: 375px) and (max-width: 768px) {
.myallProfileContainer .organiser-section .__organiser-link {
font-size: 15px; /* Adjust font size for larger phones and tablets */
}
}
/* Tablets and small laptops: 768px and above */
@media (min-width: 769px) and (max-width: 1024px) {
.myallProfileContainer .organiser-section .__organiser-link {
font-size: 16px; /* Default font size for tablets */
}
}
/* Laptops and desktops: 1024px and above */
@media (min-width: 1025px) {
.myallProfileContainer .organiser-section .__organiser-link {
font-size: 18px; /* Larger font size for desktops and larger screens */
}
}
/* Large desktops: 1440px and above */
@media (min-width: 1440px) {
.myallProfileContainer .organiser-section .__organiser-link {
font-size: 16px; /* Max font size for large screens */
}
}
/* endregion organiser links */
.myallProfileContainer .organiser-section .__circle-bg {
fill: none;
stroke: #e5e7eb;
stroke-width: var(--stroke-width);
}
.myallProfileContainer .organiser-section .__circle {
fill: none;
stroke: url(#gradient);
stroke-width: var(--stroke-width);
stroke-linecap: round;
transform: rotate(0.25turn);
transform-origin: center;
transition: stroke-dashoffset 0.35s;
}
.myallProfileContainer .organiser-section .__progress-number {
color: #1a237e; /* Progress number color */
font-weight: 700;
font-size: 1.2rem;
}
.myallProfileContainer .organiser-section .__progress-label {
color: #1a237e; /* Progress label color */
font-size: 0.9rem; /* Slightly increase the font size for visibility */
}
.myallProfileContainer .organiser-section .__progress-text2 {
display: flex;
position: absolute;
top: 50%;
left: 50%;
flex-direction: column;
transform: translate(-50%, -50%);
line-height: 1.1;
text-align: center;
}
.myallProfileContainer .organiser-section .__progress-number2 {
color: #1a237e;
font-weight: 700;
font-size: 1.2rem;
}
.myallProfileContainer .organiser-section .__progress-label2 {
color: #1a237e;
font-size: 0.5rem;
}
.myallEditProfileContainer {
display: flex;
flex-grow: 1;
flex-direction: column;
margin-top: 1rem;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.5);
padding: 1rem;
}
@media (min-width: 992px) {
.myallEditProfileContainer {
padding: 2rem;
}
}
.myallEditProfileContainer .__heading {
display: flex;
justify-content: space-between;
align-items: center;
}
.myallEditProfileContainer .__heading h3 {
margin: 0;
color: var(--theme-blue);
font-weight: 700;
}
.myallEditProfileContainer .__heading .__home {
display: flex;
align-items: center;
gap: 0.2rem;
box-shadow: 0px 0px 0px 1px var(--theme-dark-pink);
border-radius: 999px;
color: var(--theme-dark-pink);
}
.myallEditProfileContent {
display: flex;
flex-grow: 1;
flex-direction: column;
gap: 1rem;
margin-top: 2rem;
}
@media (min-width: 992px) {
.myallEditProfileContent {
display: grid;
grid-template-columns: 1fr 3fr;
}
}
.myallEditProfileContent aside,
.myallEditProfileContent section {
border-radius: 20px;
background-color: #ffffff;
}
.myallEditProfileContent .__sidebar aside {
padding-inline: 1rem;
padding-block: 2rem;
}
.myallEditProfileContent .__content {
display: flex;
flex-direction: column;
}
.myallEditProfileContent section {
flex-grow: 1;
padding: 1rem;
}
.myallEditProfileContent .__sidebar aside .__avatar-container {
position: relative;
border-radius: 100%;
aspect-ratio: 1 / 1;
width: 80%;
overflow: hidden;
}
.myallEditProfileContent .__sidebar aside .__avatar {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.myallEditProfileContent .__sidebar aside hr {
width: 100%;
}
.myallEditProfileContent .__sidebar aside .__user-fullname {
margin-top: 1rem;
color: var(--theme-blue);
font-weight: 700;
font-size: 1.1rem;
text-align: center;
}
.myallEditProfileContent .__sidebar form {
display: flex;
flex-direction: column;
align-items: center;
}
.myallEditProfileContent .__sidebar form .__inputs {
display: flex;
flex-direction: column;
}
.myallEditProfileContent .__sidebar form .__file-input {
display: none;
}
.myallEditProfileContent .__sidebar form .__upload-btn {
display: flex;
justify-content: center;
}
.myallEditProfileContent .__sidebar form .__custom-label {
display: flex;
gap: 0.2rem;
box-shadow: 0px 0px 0px 1px inset var(--theme-dark-pink);
border-radius: 999px;
color: var(--theme-dark-pink);
}
.myallEditProfileContent .__sidebar form .__custom-label.__save {
background-color: var(--theme-dark-pink);
color: #ffffff;
}
.myallEditProfileContent .__sidebar form .__subtext {
font-size: 0.7rem;
text-align: center;
}
.myallEditProfileContent .__sidebar form .error {
color: var(--theme-dark-pink);
line-height: 1.2;
text-align: center;
}
.myallEditProfileContent .__content form {
padding: 0.8rem 1rem;
}
.myallEditProfileContent .__content .__note {
display: flex;
align-items: center;
gap: 0.4rem;
border-radius: 8px;
background-color: var(--theme-soft-purple);
padding: 0.6rem 0.8rem;
color: var(--theme-blue);
}
.myallEditProfileContent .__content .__title {
color: var(--theme-dark-pink);
font-weight: 700;
}
.myallEditProfileContent input[type='text'].form-control:disabled,
.myallEditProfileContent input[type='date'].form-control:disabled,
.myallEditProfileContent input[type='email'].form-control:disabled,
.myallEditProfileContent select.form-control:disabled,
.myallEditProfileContent textarea.form-control:disabled {
background: #ffffff;
padding: 0;
font-weight: 600;
}
/* # ORGANISER */
.myallOrganiserMain {
flex-grow: 1;
}
@media (max-width: 992px) {
.myallOrgMenuContainer {
position: fixed;
bottom: 60px;
z-index: 999;
border-radius: 20px 20px 0px 0px;
background: var(--theme-blue);
padding-block: 0.4rem;
width: 100%;
overflow: hidden;
}
.myallOrgMenuContainer .__close {
display: none;
}
.myallOrgMenuInner {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.myallOrgMenuContainer.active {
inset: 0;
border-radius: 0;
}
.myallOrgMenuContainer.active .__close {
display: flex;
margin-right: 1rem;
margin-left: auto;
}
.myallOrgMenuInner .__heading {
display: none;
}
.org_menu_link:not(.active) {
display: none;
color: var(--theme-light-pink);
}
.myallOrgMenuContainer.active .org_menu_link:not(.active) {
display: flex;
}
.myallOrgMenuInner a svg {
fill: var(--theme-soft-blue);
}
.myallOrgMenuInner a {
display: flex;
width: 60%;
color: var(--theme-soft-blue);
text-align: center;
}
.myallOrgMenuInner a svg {
fill: var(--theme-soft-blue);
}
.org_menu_link:not(.active) svg {
fill: var(--theme-light-pink);
}
}
@media (min-width: 992px) {
.myallOrganiserMain {
display: grid;
grid-template-columns: 2fr 7fr;
gap: 1rem;
}
.myallOrganiserMain .__close {
display: none;
}
.myallOrganiserMainInner {
display: flex;
flex-direction: column;
gap: 1rem;
padding-top: 0.6rem;
padding-right: 0.6rem;
height: 100vh;
overflow-y: scroll;
width: 100%;
}
.myallOrgMenuContainer {
--curve: 40px;
--background: #ffffff;
--active: #e5e5ff;
/* position: initial; */
border-radius: 0px 20px 20px 0px;
background-color: #ffffff;
height: 100vh;
}
.myallOrgMenuInner {
display: block;
padding: 1rem 0rem 1rem 1rem;
}
.myallOrgMenuInner .__heading {
/* display: initial; */
color: var(--theme-blue);
font-weight: 700;
font-size: 1.2rem;
}
.myallOrgMenuInner a {
display: block;
position: relative;
transition: none;
padding: 0.8rem 1.2rem;
color: var(--theme-dark-pink);
font-weight: 500;
}
.myallOrgMenuInner div {
display: flex;
align-items: center;
gap: 0.6rem;
}
.myallOrgMenuInner a svg {
fill: var(--theme-dark-pink);
}
.myallOrgMenuInner a.active svg {
fill: var(--theme-blue);
}
.myallOrgMenuInner a.active {
border-top-left-radius: var(--curve);
border-bottom-left-radius: var(--curve);
background: var(--active);
color: var(--theme-blue);
}
.myallOrgMenuInner a.active::before,
.myallOrgMenuInner a.active::after,
.myallOrgMenuInner a.active div::before,
.myallOrgMenuInner a.active div::after {
position: absolute;
width: var(--curve);
height: var(--curve);
content: '';
}
.myallOrgMenuInner a.active::before,
.myallOrgMenuInner a.active div::before {
top: calc(var(--curve) * -1);
right: 0;
}
.myallOrgMenuInner a.active::after,
.myallOrgMenuInner a.active div::after {
right: 0;
bottom: calc(var(--curve) * -1);
background-color: var(--active);
}
.myallOrgMenuInner a.active::before {
top: calc((var(--curve) / 2) * -1);
background-color: var(--active);
width: calc(var(--curve) / 2);
height: calc(var(--curve) / 2);
}
.myallOrgMenuInner a.active div::before {
background-color: var(--background);
}
.myallOrgMenuInner a.active::after {
bottom: calc((var(--curve) / 2) * -1);
width: calc(var(--curve) / 2);
height: calc(var(--curve) / 2);
}
.myallOrgMenuInner a.active div::after {
background-color: var(--background);
}
.myallOrgMenuInner a.active div::before,
.myallOrgMenuInner a.active div::after {
z-index: 2;
border-radius: var(--curve);
}
}
/* # ORGANISER MAIN CONTENT */
.myallOrganiserMainInner .card-box-style {
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.5);
padding: 10px;
}
.myallOrganiserMainInner .card-box-style-theme {
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.5);
}
.myallOrganiserMainInner .__heading {
margin-bottom: 1rem;
}
.myallOrganiserMainInner .__heading h3 {
margin: 0;
color: var(--theme-blue);
font-weight: 700;
}
.myallOrganiserMainInner .__heading p {
color: var(--theme-dark-blue);
}
.myallOrganiserMainInner .accordion-item {
border-radius: 8px !important;
background-color: #ffffff;
}
.myallOrganiserMainInner .accordion-button {
border: none;
border-radius: 8px;
padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
color: var(--theme-dark-pink);
}
.myallOrganiserMainInner .accordion-button:not(.collapsed):focus {
color: var(--theme-dark-pink) !important;
}
.myallOrganiserMainInner .accordion-button::after {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_447_110)'%3E%3Cpath d='M7.11508 8.29508L5.70508 9.70508L11.7051 15.7051L17.7051 9.70508L16.2951 8.29508L11.7051 12.8751L7.11508 8.29508Z' fill='%23CF3D60'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_447_110'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.myallOrganiserMainInner .accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_447_110)'%3E%3Cpath d='M7.11508 8.29508L5.70508 9.70508L11.7051 15.7051L17.7051 9.70508L16.2951 8.29508L11.7051 12.8751L7.11508 8.29508Z' fill='%23CF3D60'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_447_110'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") !important;
}
.myallOrganiserMainInner .accordion-button,
.myallOrganiserMainInner .accordion-button:not(.collapsed) {
background-color: #ffffff;
}
.myallOrganiserMainInner .accordion-item .accordion-body {
border-radius: 8px !important;
background-color: #ffffff;
padding: 20px 30px;
}
.myallOrganiserMainInner .accordion-item .accordion-body .btm-border-input {
transition: box-shadow 0.2s;
outline: 0;
box-shadow: 0px 0px 0px 1px var(--theme-faint-blue);
border: 0;
border-radius: 8px;
padding: 0.6rem 0.8rem;
}
.myallOrganiserMainInner
.accordion-item
.accordion-body
.btm-border-input:focus {
box-shadow:
0px 0px 0px 1px var(--theme-soft-blue),
0px 0px 0px 4px var(--theme-soft-purple);
}
.myallOrganiserMainInner .accordion-item .accordion-body .__note {
border-radius: 8px;
background-color: var(--theme-soft-purple);
padding: 0.6rem 0.8rem;
color: var(--theme-blue);
}
.myallOrganiserMainInner .accordion-item .accordion-body .__note span {
display: flex;
align-items: center;
gap: 0.4rem;
}
.myallOrganiserMainInner .accordion-item .accordion-body .__note svg {
min-width: 20px;
}
/* # ONLINE WILL*/
.myallWill .card-box-style {
box-shadow: none;
border: 0;
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.5);
padding: 2rem;
}
.myallWill .__heading h3,
.myallWill .__heading h4 {
margin: 0;
color: var(--theme-blue);
font-weight: 700;
}
.myallWill .__note {
border-radius: 8px;
background-color: var(--theme-soft-purple);
padding: 0.6rem 0.8rem;
color: var(--theme-blue);
}
.myallWill .__note span {
display: flex;
gap: 0.4rem;
}
.myallWill .__note svg {
min-width: 20px;
}
.myallWill .__note a {
color: var(--theme-blue);
font-weight: 700;
}
.myallWill .__will-start-options {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 992px) {
.myallWill .__will-start-options {
flex-direction: row;
}
}
.myallWill .__will-start-heading h3 {
color: var(--theme-blue);
}
.myallWill .__will-start-options .__will-option {
flex: 1;
border-radius: 8px;
background-color: #ffffff;
overflow: hidden;
}
.myallWill .__will-start-options .__will-option .__inner {
padding: 1rem;
text-align: center;
}
.myallWill .__will-start-options .__will-option .__inner h6 {
color: var(--theme-dark-pink);
}
.myallWill .__will-start-options .__will-option .__inner .__links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.2rem;
}
.myallWill .__links a,
.myallWill .__will-start-options .__will-option .__inner .__redo button {
display: flex;
align-items: center;
gap: 0.4rem;
border-radius: 999px;
background-color: var(--theme-dark-pink);
color: #ffffff;
}
.myallWill .__links .__redo a,
.myallWill .__will-start-options .__will-option .__inner .__redo button {
box-shadow: inset 0px 0px 0px 1px var(--theme-dark-pink);
background-color: #fff;
color: var(--theme-dark-pink);
}
.myallWill .__interview .__panel {
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.5);
padding: 2rem;
}
.myallWill .__interview .__note {
display: flex;
justify-content: space-between;
border: 1px solid var(--theme-soft-blue);
}
.myallWill .__interview .__panel .__island {
border-radius: 8px;
background-color: #ffffff;
padding: 1.4rem;
}
.myallWill .__interview .__panel .__heading,
.myallWill .myallWillPage .__panel .__heading {
display: flex;
justify-content: space-between;
align-items: center;
}
.myallWill .__interview .__panel .__heading h4 {
color: var(--theme-blue);
}
.myallWill .__interview .__panel .__subtitle,
.myallWill .myallWillPage .__panel .__subtitle {
display: flex;
align-items: center;
gap: 0.4rem;
background: none;
color: var(--theme-dark-pink);
}
.myallWill .myallWillPage .myallFooter {
display: flex;
justify-content: end;
margin-top: 0.6rem !important;
margin-bottom: -2.6rem !important;
border: 0 !important;
padding: 0 !important;
}
.myallWill .myallWillPage .myallFooter > div {
margin: 0 !important;
border: 0 !important;
padding: 0 !important;
}
.myallWill .myallWillPage .myallFooter a {
color: var(--theme-dark-pink);
}
.myallWill .__interview .__panel .__island .__question {
display: flex;
flex-direction: column;
gap: 1rem;
margin-block: 0.4rem;
}
.myallWill .__interview .__panel .__island .__question h3 {
color: var(--theme-dark-pink);
font-size: 1.4rem;
}
.myallWill .__interview .__panel .__island .__question .form-control:focus {
border-color: var(--theme-dark-pink);
}
.myallWill .__interview .__panel .__island .__question a {
border-radius: 999px;
background-color: var(--theme-dark-pink);
min-width: 8.2rem;
color: #ffffff;
}
.myallWill .__interview .__panel .__island .__question a.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.myallWill .__footer {
margin-top: 0.6rem;
margin-bottom: -1.2rem;
}
.myallWill .__footer a {
color: var(--theme-dark-pink);
}
.myallWill .__step-heading h3 {
margin: 0;
margin-bottom: 0.6rem;
color: var(--theme-blue);
font-weight: 700;
font-size: 1.2rem;
}
.myallWill .__menu_items {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.myallWill .org_menu_item {
display: flex;
align-items: center;
gap: 0.6rem;
}
.myallWill .org_menu_item.__completed .org_menu_name {
color: var(--theme-blue);
}
.myallWill .org_menu_item.__todo .org_menu_name {
color: var(--theme-soft-blue);
user-select: none;
}
.myallWill .org_menu_item .__marker {
display: inline-block;
background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2217%22%20viewBox%3D%220%200%2016%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.5%22%20y%3D%221%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%227.5%22%20fill%3D%22%23040A5E%22%20%2F%3E%3Crect%20x%3D%220.5%22%20y%3D%221%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%227.5%22%20stroke%3D%22%23040A5E%22%20%2F%3E%3Cpath%20d%3D%22M6.39754%2010.4375L4.31254%208.35246L3.60254%209.05746L6.39754%2011.8525L12.3975%205.85246L11.6925%205.14746L6.39754%2010.4375Z%22%20fill%3D%22white%22%20%2F%3E%3C%2Fsvg%3E');
background-size: contain;
background-repeat: no-repeat;
width: 16px;
height: 17px;
}
.myallWill .org_menu_item.active .__marker {
background: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2217%22%20viewBox%3D%220%200%2016%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%220.5%22%20y%3D%221%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%227.5%22%20stroke%3D%22%23929BCA%22%2F%3E%3Cmask%20id%3D%22mask0_140_1673%22%20style%3D%22mask-type%3Aalpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%222%22%20y%3D%222%22%20width%3D%2212%22%20height%3D%2213%22%3E%3Crect%20x%3D%222%22%20y%3D%222.5%22%20width%3D%2212%22%20height%3D%2212%22%20fill%3D%22%23D9D9D9%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23mask0_140_1673%29%22%3E%3Cpath%20d%3D%22M5%209.5C4.725%209.5%204.48958%209.40208%204.29375%209.20625C4.09792%209.01042%204%208.775%204%208.5C4%208.225%204.09792%207.98958%204.29375%207.79375C4.48958%207.59792%204.725%207.5%205%207.5C5.275%207.5%205.51042%207.59792%205.70625%207.79375C5.90208%207.98958%206%208.225%206%208.5C6%208.775%205.90208%209.01042%205.70625%209.20625C5.51042%209.40208%205.275%209.5%205%209.5ZM8%209.5C7.725%209.5%207.48958%209.40208%207.29375%209.20625C7.09792%209.01042%207%208.775%207%208.5C7%208.225%207.09792%207.98958%207.29375%207.79375C7.48958%207.59792%207.725%207.5%208%207.5C8.275%207.5%208.51042%207.59792%208.70625%207.79375C8.90208%207.98958%209%208.225%209%208.5C9%208.775%208.90208%209.01042%208.70625%209.20625C8.51042%209.40208%208.275%209.5%208%209.5ZM11%209.5C10.725%209.5%2010.4896%209.40208%2010.2938%209.20625C10.0979%209.01042%2010%208.775%2010%208.5C10%208.225%2010.0979%207.98958%2010.2938%207.79375C10.4896%207.59792%2010.725%207.5%2011%207.5C11.275%207.5%2011.5104%207.59792%2011.7063%207.79375C11.9021%207.98958%2012%208.225%2012%208.5C12%208.775%2011.9021%209.01042%2011.7063%209.20625C11.5104%209.40208%2011.275%209.5%2011%209.5Z%22%20fill%3D%22%23040A5E%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E ');
}
.myallWill .myallWillPage {
display: flex;
gap: 1rem;
}
.myallWill .myallWillPage .__interview {
flex-grow: 1;
}
.myallWill .myallWillPage .__island {
border-radius: 8px;
background-color: #ffffff;
padding: 1rem;
}
.myallWill .myallWillPage .__island h5 {
margin: 0;
color: var(--theme-dark-pink);
font-size: 1.1rem;
}
.myallWill .myallWillPage .__panel {
flex-grow: 1;
}
.myallWill .myallWillPage .__island a.btn,
.myallWill .myallWillPage .__island button.btn {
border-radius: 999px;
background-color: var(--theme-dark-pink);
min-width: 8.2rem;
color: #ffffff;
}
.myallWill .myallWillPage .__island a.outline,
.myallWill .myallWillPage .__island button.outline {
box-shadow: inset 0px 0px 0px 1px var(--theme-dark-pink);
background-color: #ffffff;
color: var(--theme-dark-pink);
}
.myallWill .myallWillPage .__island a.redo {
display: flex;
align-items: center;
gap: 0.4rem;
background: #ffffff;
padding-inline: 0;
min-width: initial;
color: var(--theme-dark-pink);
}
.myallWill .myallWillPage .__simultaneous a.redo {
padding-block: 0.2rem;
}
.myallWill .myallWillPage .__simultaneous a.view-inheritance {
border: 1px solid;
padding: 0.4rem 0.8rem;
}
.myallWill .myallWillPage .__island a.redo.__margin {
border-right: 1px solid var(--theme-dark-pink);
border-radius: 0;
padding-right: 0.6rem;
}
.myallWill .myallWillPage .__island .__spouse,
.myallWill .myallWillPage .__island .__child,
.myallWill .myallWillPage .__island .__trustee,
.myallWill .myallWillPage .__island .__beneficiary,
.myallWill .myallWillPage .__island .__remainder {
margin-inline: 0.2rem;
margin-bottom: 1rem;
border: 1px solid var(--theme-faint-blue);
border-radius: 8px;
padding: 0.6rem;
}
.myallWill .myallWillPage .__island a.__action-button {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: #ffffff;
padding-inline: 0;
min-width: initial;
color: var(--theme-dark-pink);
}
.myallWill .myallWillPage .__island a.__action-button-outline {
display: inline-flex;
align-items: center;
gap: 0.4rem;
box-shadow: inset 0px 0px 0px 1px var(--theme-dark-pink);
background: #ffffff;
min-width: initial;
color: var(--theme-dark-pink);
}
.myallWill .myallWillPage .__island .__trust-options {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
margin-block: 1rem;
}
.myallWill .myallWillPage .__island .__trust-options div label {
display: flex;
gap: 0.4rem;
}
.myallWill .myallWillPage .__allocated-inheritance {
min-width: 39rem;
}
.myallWill .myallWillPage .__island .list-group-item {
border-bottom: 0;
}
.myallWill .myallWillPage .__island .list-group-item:last-of-type {
border-bottom: 1px solid var(--bs-list-group-border-color);
}
.myallWill .myallWillPage .__island .list-group-item.active {
border-color: var(--bs-list-group-border-color);
background-color: #ffffff;
color: var(--theme-dark-pink);
font-weight: 700;
}
.myallWill .myallWillPage .__island .list-group-item.active b {
color: var(--theme-dark-pink);
}
.myallWill .myallWillPage .__island h3 {
color: var(--theme-dark-pink);
}
/* # BUSINESS WEALTH */
.myallBusinessWealth {
border-radius: 20px;
background: rgba(255, 255, 255, 0.5);
padding: 2rem;
}
.myallBusinessWealth .__island {
border-radius: 8px;
background-color: #ffffff;
padding: 10px;
}
.myallBusinessWealth .__island .outline {
display: flex;
align-items: flex-start;
gap: 0.2rem;
box-shadow: inset 0px 0px 0px 1px var(--theme-dark-pink);
border-radius: 999px;
background-color: #ffffff;
color: var(--theme-dark-pink);
}
.myallBusinessWealth .__list .__business-name {
color: var(--theme-dark-pink);
}
/* .myallBusinessWealth .__list .__actions.__border { */
.__list .__actions.__border {
/* border-right: 1px solid var(--theme-dark-pink); */
}
/* .myallBusinessWealth .__list .__actions a { */
.__list .__actions a {
display: inline-flex;
align-items: center;
gap: 0.2rem;
display: inline-block;
}
.__list .btn.btn-outline-two {
display: flex;
align-items: center;
gap: 0.4rem;
border: 1px solid var(--theme-dark-pink);
border-radius: 999px;
}
.myallBusinessWealth .__island h5 {
color: var(--theme-dark-pink);
}
.myallBusinessWealth .__island .__debtor.__wrapper,
.myallBusinessWealth .__island .__creditor.__wrapper {
margin-bottom: 1rem;
}
.myallBusinessWealth .__island .__debtor .__inner,
.myallBusinessWealth .__island .__creditor .__inner {
display: flex;
gap: 1rem;
border: 1px solid var(--theme-border-color);
border-radius: 8px;
padding: 1rem;
}
/* # CONTACT US */
.myallContactUs {
display: flex;
flex-direction: column;
gap: 1rem;
}
.myallContactUsInner.card-box-style {
border-radius: 20px;
background-color: rgba(255, 255, 255, 0.5);
padding: 1rem;
}
@media (min-width: 992px) {
.myallContactUsInner.card-box-style {
padding: 2rem;
}
}
.myallContactUsInner .__heading h3 {
margin: 0;
margin-bottom: 1rem;
color: var(--theme-blue);
font-weight: 700;
}
.myallContactUsInner .__island {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 0.6rem;
border-radius: 8px;
background-color: #ffffff;
padding: 0.6rem;
}
@media (min-width: 992px) {
.myallContactUsInner .__island {
grid-template-columns: repeat(2, 1fr);
}
}
.myallContactUsInner .__island > div {
border: 1px solid var(--theme-faint-blue);
border-radius: 8px;
padding: 1rem;
overflow: hidden;
}
.myallContactUsInner .__island .__info {
padding: 0;
}
.myallContactUsInner .__island .__info-inner {
padding: 1rem;
}
.myallContactUsInner .__island .__info .__title {
font-weight: 700;
}
.myallContactUsInner .__island .__info a,
.myallContactUsInner .__island .__info svg {
color: var(--theme-dark-pink);
fill: var(--theme-dark-pink);
}
.myallContactUsInner .__island .__textarea {
display: flex;
flex-direction: column;
}
.myallContactUsInner .__island .__textarea textarea {
transition: box-shadow 0.2s;
outline: 0;
box-shadow: 0px 0px 0px 1px var(--theme-faint-blue);
border: 0;
border-radius: 8px;
padding: 0.6rem;
min-height: 12rem;
}
.myallContactUsInner .__island .__textarea textarea:focus {
box-shadow:
0px 0px 0px 1px var(--theme-soft-blue),
0px 0px 0px 4px var(--theme-soft-purple);
}
.myallContactUsInner .__accept-terms {
display: flex;
}
.myallContactUsInner .__accept-terms p {
line-height: 1.2;
}
.myallContactUsInner .__accept-terms a {
color: var(--theme-dark-pink);
}
.myallContactUsInner .__message {
display: flex;
flex-direction: column;
gap: 1rem;
}
.myallContactUsInner .__message h3 {
margin: 0;
color: var(--theme-dark-pink);
font-weight: 700;
font-size: 1.4rem;
}
.myallContactUsInner .__island .__message hr {
margin: 0;
}
.myallContactUsInner .__message .__submit {
display: flex;
justify-content: end;
}
.myallContactUsInner .__message .__submit .btn {
border-radius: 999px;
background: var(--theme-dark-pink);
color: #ffffff;
}
/* # SEARCH BAR */
.myallSearchFormContainer {
display: none;
}
/* Large devices */
@media (min-width: 992px) {
.myallSearchFormContainer {
--height: 45px;
--padding: 0.3rem;
display: flex;
justify-content: end;
align-items: center;
border-radius: 999px;
background: linear-gradient(
/* NOTE: Change these to variables */ 90deg,
#040a5e 0%,
#822384 33%,
#cf3d60 66%,
#f5adba 100%
);
padding: var(--padding);
height: var(--height);
}
.myallSearchFormContainer .myallSearchForm {
border-radius: 999px;
background: rgba(255, 255, 255, 0.2);
}
.myallSearchFormContainer .myallSearchForm input {
border: none;
background: transparent;
color: var(--theme-light-pink);
}
.myallSearchFormContainer .myallSearchForm input::placeholder {
color: var(--theme-light-pink);
}
.myallSearchFormContainer .myallProfile {
display: flex;
align-items: center;
gap: 0.5rem;
height: 100%;
color: #ffffff;
}
.myallSearchFormContainer .myallSearchForm form {
align-items: center;
}
.myallSearchFormContainer .myallSearchForm input {
padding: 0.375rem 0.75rem;
}
.myallSearchFormContainer .myallSearchForm input:focus {
outline: 0;
}
.myallSearchFormContainer .myallSearchForm svg {
padding: 0px 20px;
/* TODO: Look at this again. */
/* NOTE: Hacky method to make this SVG fit the container */
width: 67px;
height: auto;
}
.pad-vodacom-logo {
display: flex;
/* Enables flexbox layout */
align-items: center;
/* Vertically centers content */
justify-content: flex-start;
/* Aligns content to the start of the container */
padding-left: 0;
/* Optional: Adjust padding to your liking */
padding-right: 1rem;
/* Optional: Adjust padding to your liking */
}
.vodacom-container img {
margin-right: auto;
/* Pushes the image to the start of the container */
}
.myallProfile .myallNotificationIcon svg {
padding: 3px;
/* background-color: var(--theme-dark-pink); */
color: var(--theme-soft-pink);
border-radius: 100%;
width: 24px;
height: 24px;
}
.myallSearchFormContainer .myallProfile .myallProfile-img {
position: relative;
border: 2px solid #fff;
border-radius: 100%;
aspect-ratio: 1;
width: calc(var(--height) - (var(--padding) * 2));
height: calc(var(--height) - (var(--padding) * 2));
overflow: hidden;
}
.myallSearchFormContainer .myallProfile .myallProfile-img img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
/* === FORMS === */
.f-w-input {
display: flex;
flex-direction: column;
}
@media (min-width: 992px) {
.f-w-input.capped-width.mb-3 {
width: 20rem;
}
}
.myallOrganiserMainInner
.accordion-item
.accordion-body
.btm-border-input:disabled {
box-shadow: none;
background-color: #f3f4f6;
}
input[type='submit'][value='save'] {
border-radius: 999px;
background-image: url('data:image/svg+xml;utf8,');
background-position: 20px center;
background-size: 1.6rem;
background-repeat: no-repeat;
background-color: var(--theme-dark-pink);
padding-left: 53px;
max-width: 7.2rem;
color: #fff;
text-transform: capitalize;
}
.__steps-save input[type='submit'][value='save'],
.__steps-save a.save,
.__steps-save button.save {
border-right: 1px solid var(--theme-dark-pink);
border-radius: 0;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cpath d='M14.6667 2.5H4.66667C3.74167 2.5 3 3.25 3 4.16667V15.8333C3 16.75 3.74167 17.5 4.66667 17.5H16.3333C17.25 17.5 18 16.75 18 15.8333V5.83333L14.6667 2.5ZM16.3333 15.8333H4.66667V4.16667H13.975L16.3333 6.525V15.8333ZM10.5 10C9.11667 10 8 11.1167 8 12.5C8 13.8833 9.11667 15 10.5 15C11.8833 15 13 13.8833 13 12.5C13 11.1167 11.8833 10 10.5 10ZM5.5 5H13V8.33333H5.5V5Z' fill='%23cf3d60'/%3E%3C/svg%3E");
background-size: 1.2rem;
background-repeat: no-repeat;
background-color: transparent;
padding-block: 0;
padding-right: 14px;
padding-left: 2.8rem;
max-width: initial;
color: var(--theme-dark-pink);
font-weight: 500;
font-size: initial;
}
.__steps-save a.save,
.__steps-save button.save {
background-position: 20px center;
}
.accordion-item .accordion-body a {
color: var(--theme-dark-pink);
}
.accordion-item .accordion-body a b {
font-weight: normal;
}
.myallButtons {
display: flex;
justify-content: end;
gap: 1rem;
}
.myallButtons .__cancel button {
border: 1px solid var(--theme-dark-pink);
border-radius: 999px;
max-width: 7.2rem;
color: var(--theme-dark-pink);
}
.__item.__education,
.__item.__spouse,
.__item.__child,
.__item.__contact {
border: 1px solid var(--theme-faint-blue);
border-radius: 8px;
padding: 1.2rem;
}
.__item.__education .__inputs {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.__item.__education .__inputs .col-md-6 {
width: calc(50% - 0.5rem);
}
.__item.__education .__item-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.__item.__education .__item-title {
font-weight: 700;
}
/* =================================
# MY CONTACTS
================================= */
.myallContactsTabs {
display: flex;
gap: 40px;
margin-top: 1rem;
}
.myallContactsTabs .__tab {
display: flex;
position: relative;
align-items: center;
gap: 0.4rem;
cursor: pointer;
border-radius: 20px 0px 0px 0px;
height: 40px;
}
.myallContactsTabs .__tab.active::after {
position: absolute;
right: -40px;
bottom: 0;
mask-image: url('data:image/svg+xml;utf8,');
mask-position: bottom;
mask-repeat: no-repeat;
background-color: inherit;
width: 40px;
height: 100%;
content: '';
}
.myallContactsTabs .__tab.active:not(:first-child)::before {
position: absolute;
bottom: 0;
left: -40px;
mask-image: url('data:image/svg+xml;utf8,');
mask-position: bottom;
mask-repeat: no-repeat;
background-color: inherit;
width: 40px;
height: 100%;
content: '';
}
.myallContactsTabs .__tab.active:not(:first-child) {
border-radius: 0px;
}
.myallContactsTabs .__tab:first-child {
padding-left: 1rem;
}
.myallContactsTabs .__tab span {
color: var(--theme-blue);
font-weight: 700;
}
.myallContactsTabs .__tab.active {
background-color: rgba(255, 255, 255, 0.5);
}
.myallContactsMainInner {
display: flex;
flex-grow: 1;
flex-direction: column;
border-radius: 0px 20px 20px 20px;
background-color: rgba(255, 255, 255, 0.5);
padding: 1rem;
}
@media (min-width: 992px) {
.myallContactsMainInner {
padding: 2rem;
}
}
.myallContactsMainInner .__heading {
margin-bottom: 0;
}
.myallContactsMainInner .__heading h3 {
margin: 0;
color: var(--theme-blue);
font-weight: 700;
}
.myallContactsMainInner .__heading > div {
display: none;
}
@media (min-width: 992px) {
.myallContactsMainInner .__heading > div {
display: block;
}
}
.myallContactsMainInner .__heading p {
color: var(--theme-dark-blue);
}
.myallContactsMainInner .__header {
display: flex;
justify-content: space-between;
margin-bottom: 1.2rem;
}
.myallContactsMainInner .__header .__new-share {
flex-shrink: 0;
}
.myallContactsMainInner .__header .__new-share a {
display: flex;
align-items: center;
gap: 0.4rem;
box-shadow: inset 0px 0px 0px 1px var(--theme-dark-pink);
border-radius: 999px;
color: var(--theme-dark-pink);
}
.myallContactsMainInner .__content {
flex-grow: 1;
}
@media (min-width: 992px) {
.myallContactsMainInner .__content {
display: grid;
grid-template-columns: 1fr 4fr;
}
}
.myallContactsMainInner .__island {
display: flex;
flex-direction: column;
gap: 1rem;
}
.myallContactsMainInner .__island .__section-heading {
margin-bottom: 1rem;
}
.myallContactsMainInner .__island h4 {
margin: 0;
color: var(--theme-dark-pink);
font-weight: 700;
font-size: 1rem;
}
.myallContactsMainInner .__island > div {
border-radius: 8px;
background-color: #ffffff;
padding: 1.4rem;
}
.myallContactsMainInner .__island .__contacts-container {
display: flex;
flex-direction: column;
gap: 1rem;
line-height: 1;
}
@media (min-width: 992px) {
.myallContactsMainInner .__island .__contacts-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
.myallContactsMainInner .__island .network-content-block {
gap: 1rem;
border: 1px solid var(--theme-border-color);
border-radius: 8px;
background-color: #ffffff;
padding: 1rem;
}
.myallContactsMainInner .__island .network-cnt-pic {
--_width: 74px;
position: relative;
flex-shrink: 0;
border: 4px solid var(--_border, var(--theme-border-color));
border-radius: 100%;
width: var(--_width);
height: var(--_width);
overflow: hidden;
}
.myallContactsMainInner .__island .network-cnt-pic .__avatar {
display: grid;
place-content: center;
background: var(--_fill);
width: 100%;
height: 100%;
color: var(--_color);
font-weight: 700;
font-size: 1.2rem;
}
.myallContactsMainInner .__contacts-container .network-cnt-content {
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: space-between;
}
.myallContactsMainInner .__contacts-container .__details {
display: flex;
justify-content: space-between;
}
.myallContactsMainInner .__contacts-container .__actions {
display: flex;
justify-content: space-between;
align-items: center;
}
.myallContactsMainInner .__island .network-cnt-pic img,
.myallContactsMainInner .__island .network-cnt-pic svg {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* .draggable--original { */
/* display: none; */
/* } */
.myallContactsMainInner .__island .__placeholder-user rect {
fill: var(--_fill, #ffffff);
}
.myallContactsMainInner .__island .__placeholder-user path {
fill: var(--_border, var(--theme-fallback-400));
}
.myallContactsMainInner .__contacts-container .__edit-visibility button {
background-color: initial;
color: var(--theme-dark-pink);
}
.myallContactsMainInner .__contacts-container .__color-tools {
--_size: 16px;
}
.myallContactsMainInner .__contacts-container .__contact-color-container {
display: none;
position: absolute;
align-items: center;
gap: 0.2rem;
box-shadow: 0px 2px 10px 0px #00000026;
border-radius: 8px;
background: white;
padding: 0.4rem;
}
.myallContactsMainInner .__contacts-container .__color-selector {
outline: 2px solid var(--theme-border-color);
border: 1px solid white;
border-radius: 100%;
background: var(--_border, var(--theme-border-color));
width: var(--_size);
height: var(--_size);
}
.myallContactsMainInner .__contact-color-container button {
border-radius: 100%;
background-color: var(--_border);
width: var(--_size);
height: var(--_size);
}
.myallContactsMainInner .__contact-color-container button.__remove-color {
display: flex;
box-shadow: inset 0px 0px 0px 2px var(--theme-border-color);
background-color: #ffffff;
}
.myallContactsMainInner .__contacts-container .__cnt-name {
margin-bottom: 0.2rem;
color: var(--_color);
font-weight: 700;
}
.myallContactsMainInner .__contacts-container .__badge {
flex-shrink: 0;
}
.myallContactsMainInner .__contacts-container .__badge span {
display: flex;
align-items: center;
gap: 0.2rem;
border-radius: 999px;
background: var(--_fill, var(--theme-border-color));
padding: 0.2rem 0.7rem;
color: var(--_color);
font-size: 0.6rem;
}
.myallContactsMainInner .__contacts-container .__badge span svg {
fill: var(--_color);
}
.myallContactsMainInner .__contacts-container .__cnt-relation {
font-size: 0.7rem;
}
.myallContactsMainInner .__details {
border-radius: 20px;
background-color: #ffffff;
}
.myallContactsMainInner .__shares h4 {
margin: 1rem;
color: var(--theme-blue);
font-size: 1rem;
}
.myallContactsMainInner .__share-wrapper {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.myallContactsMainInner .__share-wrapper .__share {
align-items: center;
gap: 0.5rem;
padding: 0.6rem;
}
.myallContactsMainInner .__share-wrapper .__share.active {
position: relative;
border-radius: 100px 0px 0px 100px;
background-color: #ffffff;
}
.myallContactsMainInner .__share-wrapper .__share.active::before,
.myallContactsMainInner .__share-wrapper .__share.active::after {
position: absolute;
background: inherit;
width: 20px;
height: 20px;
content: '';
}
.myallContactsMainInner .__share-wrapper .__share.active::before {
top: -20px;
right: 0;
mask-image: radial-gradient(
circle at top left,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 71%,
rgb(0, 0, 0) 0%
);
}
.myallContactsMainInner .__share-wrapper .__share.active::after {
right: 0;
bottom: -20px;
mask-image: radial-gradient(
circle at bottom left,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 71%,
rgb(0, 0, 0) 0%
);
}
.myallContactsMainInner .__share-wrapper .__share .__avatar {
display: grid;
position: relative;
flex-shrink: 0;
place-items: center center;
border: 4px solid var(--_border, var(--theme-fallback-400));
border-radius: 100%;
background-color: var(--_fill, var(--theme-fallback-100));
width: 40px;
height: 40px;
overflow: hidden;
color: var(--_color, var(--theme-fallback-700));
font-weight: 700;
font-size: 0.8rem;
}
.myallContactsMainInner .__share-wrapper .__share .__avatar img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.myallContactsMainInner .__share-wrapper .__share .__text {
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: center;
line-height: 1.1;
}
.myallContactsMainInner .__share-wrapper .__share .__name {
display: flex;
justify-content: space-between;
color: var(--_color, var(--theme-fallback-700));
font-weight: 700;
}
.myallContactsMainInner .__share-wrapper .__share .__badge {
display: flex;
align-items: center;
gap: 0.2rem;
border-radius: 100px;
padding: 0rem 0.6rem;
font-weight: 400;
font-size: 0.6rem;
}
.myallContactsMainInner .__share-wrapper .__share .__relation {
font-weight: 400;
font-size: 0.7rem;
}
.myallContactsMainInner .__save-share-wrapper {
display: flex;
justify-content: center;
}
@media (min-width: 992px) {
.myallContactsMainInner .__save-share-wrapper {
justify-content: end;
}
}
.myallContactsMainInner .__save-share-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
@media (min-width: 992px) {
.myallContactsMainInner .__save-share-content {
flex-direction: row;
align-items: start;
}
}
.myallContactsMainInner .__save-share-content .btn {
border-radius: 999px;
}
.myallContactsMainInner .__save-share-content .btn-red {
background-color: var(--theme-dark-pink);
color: #ffffff;
}
.myallContactsMainInner .__save-share-content .btn-outline-two {
box-shadow: inset 0px 0px 0px 1px var(--theme-dark-pink);
background-color: #ffffff;
color: var(--theme-dark-pink);
}
/* # MEMORIES */
.myallMemories {
border-radius: 20px;
background: rgba(255, 255, 255, 0.5);
padding: 2rem;
}
.myallMemories .__island {
border-radius: 8px;
background-color: #ffffff;
padding: 1.4rem;
}
/* # MODALS */
.modal .btn.btn-red,
.modal .btn.btn-outline-two {
border: 1px solid var(--theme-dark-pink);
border-radius: 999px;
/* color: var(--theme-dark-pink); */
}
/* # SAFEKEEPING */
.myallSafeKeeping .btn.btn-outline-two {
border: 1px solid var(--theme-dark-pink);
border-radius: 999px;
color: var(--theme-dark-pink);
}
.myallSafeKeeping .__item {
margin-bottom: 1rem;
border: 1px solid var(--theme-border-color);
border-radius: 8px;
}
/* # Memories */
.myallMemories .__item {
margin-bottom: 1rem;
border: 1px solid var(--theme-border-color);
border-radius: 8px;
}
.myallPersonal .btn-outline-one,
.myallPersonal .btn-outline-two,
.myallMemories .btn.btn-outline-two,
.myallConnections .btn.btn-outline-two {
border: 1px solid var(--theme-dark-pink);
border-radius: 999px;
color: var(--theme-dark-pink);
}
.myallMemories .btn.btn-remove {
display: flex;
align-items: center;
border-radius: 999px;
color: var(--theme-dark-pink);
}
#accordion-memories {
border: 1px solid var(--theme-border-color);
border-radius: 8px;
}
/* # SOCIAL MEDIA */
.myallSocialMedia .__title {
display: flex;
}
.myallSocialMedia .btn.btn-outline {
border: 1px solid var(--theme-dark-pink);
border-radius: 999px;
color: var(--theme-dark-pink);
}
.myallSocialMedia .__sm-edit {
display: flex;
gap: 1rem;
}
.myallSocialMedia .__sm-edit span {
background-color: var(--theme-dark-pink);
width: 1px;
}
.myallSocialMedia .__sm-item {
margin-bottom: 0.6rem;
border: 1px solid var(--theme-border-color);
border-radius: 8px;
padding: 1rem;
}
.myallSocialMedia .__details {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
}
.myallSocialMedia .__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.myallSocialMedia .__sm-username {
display: flex;
align-items: center;
gap: 0.6rem;
font-weight: 600;
}
.myallSocialMedia .__grid > div {
display: flex;
flex-direction: column;
}
.myallSocialMedia .__grid .__data {
font-weight: 600;
}
.nav-link.dropdown-toggle,
.nav-link.dropdown-toggle.active {
color: var(--theme-dark-pink);
font-weight: 700;
}
.__hr {
margin: 0;
background-color: var(--theme-border-color);
}
/* # Org Views */
.__shared-with-me {
display: flex;
flex-direction: column;
height: 100%;
}
.__shared-with-me .accordion {
--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23cf3d60'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23cf3d60'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.__shared-with-me .accordion .accordion-button.collapsed {
border-radius: 8px;
color: var(--theme-dark-pink);
}
.__shared-with-me .accordion .accordion-button:not(.collapsed) {
border-bottom: 0px;
background-color: #ffffff;
color: var(--theme-dark-pink);
}
.__shared-with-me .accordion .accordion-button:not(.collapsed):focus {
box-shadow: none;
border-color: var(--theme-border-color);
}
.__shared-with-me .accordion .accordion-button:focus {
border-color: var(--theme-border-color);
}
.__shared-with-me .accordion .accordion-button {
padding-left: 1.25rem;
}
.__shared-with-me .accordion .accordion-item .accordion-body {
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-style: solid;
border-color: var(--theme-border-color);
border-radius: 0px 0px 8px 8px;
}
.__shared-with-me .accordion .accordion-item .accordion-body ul li {
margin-bottom: 0px;
}
.__shared-with-me .__delete {
padding-inline: 1rem;
}
.__shared-with-me .__delete .btn-outline-two {
border: 1px solid var(--theme-dark-pink);
border-radius: 999px;
color: var(--theme-dark-pink);
}
.__shared-with-me .dropdown-menu.burger-menu {
box-shadow: 0px 2px 10px 0px #00000026;
border: none;
border-radius: 8px;
background: #ffffff;
padding: 0;
}
.__shared-with-me .dropdown-menu.burger-menu li {
border-bottom: 1px solid var(--theme-border-color);
}
.__shared-with-me .dropdown-menu.burger-menu li:last-of-type {
border: 0;
}
.__shared-with-me .dropdown-menu.burger-menu li a {
padding: 0.4rem 0.6rem;
}
.__shared-with-me .dropdown-menu.burger-menu .dropdown-item:hover {
background-color: initial;
color: initial;
}
.__org-views {
margin-top: 1rem;
}
.__org-views .__content {
display: grid;
grid-template-columns: 1fr 3fr;
}
.__org-views .__avatar-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
border: 1px solid var(--theme-border-color);
border-radius: 20px;
padding: 1rem;
}
.__org-views .__avatar {
--size: 7rem;
display: grid;
position: relative;
flex-shrink: 0;
place-items: center center;
border: 4px solid var(--theme-fallback-400);
border-radius: 100%;
width: var(--size);
height: var(--size);
overflow: hidden;
}
.__org-views .__avatar img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.__org-views .__name {
color: var(--theme-blue);
font-weight: 700;
}
.__org-views .__details {
display: flex;
flex-direction: column;
gap: 1rem;
padding-inline: 1rem;
}
.__org-views .__details > div {
display: grid;
}
.__org-views .__details .__c-1 {
grid-template-columns: 1fr;
}
.__org-views .__details .__c-2 {
grid-template-columns: 1fr 1fr;
}
.__org-views .__details .__c-3 {
grid-template-columns: 1fr 1fr 1fr;
}
.__org-views .__details .__item {
display: flex;
flex-direction: column;
}
.__org-views .__details .__data {
font-weight: 600;
}
#medical_aid .__dependents {
display: flex;
flex-direction: column;
gap: 1rem;
}
#medical_aid .__dependent {
border: 1px solid var(--theme-border-color);
border-radius: 8px;
padding: 1rem 0rem;
}
/* .myallProfileContainer .timeline-section .__empty-state, */
/* .myallProfileContainer .organiser-section .__empty-state { */
.__empty-state,
.__empty-state {
display: grid !important;
place-items: center;
align-items: start;
height: 100%;
}
/* .myallProfileContainer .timeline-section .__empty-state > div, */
/* .myallProfileContainer .organiser-section .__empty-state > div { */
.__empty-state > div,
.__empty-state > div {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
width: 15ch;
color: var(--theme-dark-pink);
line-height: 1.2;
text-align: center;
}
@media (min-width: 992px) {
.__empty-state > div,
.__empty-state > div {
margin-top: 9rem;
}
}
/* .myallProfileContainer .timeline-section .__empty-state a, */
/* .myallProfileContainer .organiser-section .__empty-state a { */
.__empty-state a,
.__empty-state a {
color: var(--theme-dark-pink);
}
/* Modal body */
/* Styling the "license card" */
.license-card {
background: linear-gradient(
/* NOTE: Change these to variables */ 45deg,
#040a5e 0%,
#822384 33%,
#cf3d60 66%,
#f5adba 100%
);
padding: var(--padding);
border-radius: 10px; /* Rounded corners for a card-like look */
padding: 25px; /* Space inside the card */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
max-width: 100%; /* Ensure it scales well */
display: flex; /* Use flexbox to align avatar and details */
min-width: 300px;
}
/* Avatar Section */
.avatar-section {
flex-shrink: 0; /* Prevent the avatar from shrinking */
}
.avatar-img {
--size: 150px;
margin: auto;
border: 2px solid #FFADBC;
border-radius: 50%;
width: var(--size);
height: var(--size);
overflow: hidden;
}
/* Card Details Section */
.card-details {
flex-grow: 1; /* Allow the text content to take up the remaining space */
padding-left: 10px; /* Space between the avatar and the text */
padding-right: 30px;
}
/* Heading styles inside the card */
.license-card h6 {
font-size: 16px;
font-weight: 400;
margin-bottom: 10px;
color: #FFADBC; /* Dark text for readability */
}
/* Modal Title */
.modal-body h5 {
font-size: 18px;
font-weight: 600;
color: #040A5E;
margin-bottom: 10px;
}
/* Close Button styling */
.btn-close {
border: none;
border-radius: 50%;
font-size: 1.5rem;
color: #FFF;
}
.btn-close:hover {
color: #FBECF0; /* Darker color when hovered */
}
/* Add spacing between the title and content */
.d-flex {
justify-content: space-between;
align-items: center;
}
/* Optional: Add custom colors for text */
.license-card h6:nth-child(1) {
color: #FBECF0; /* Slightly muted text for company name */
font-size: 1.4rem;
font-weight: 500;
}
.license-card h6:nth-child(2) {
color: #FBECF0; /* Highlighted color for the Medical Aid number */
}
.license-card h6:nth-child(3) {
color: #FBECF0; /* Green color for Policy Type */
}
.license-card h6:nth-child(4) {
color: #FFF; /* Green color for Policy Type */
}
.license-card h6:nth-child(5) {
color: #FFF; /* Green color for Policy Type */
}
.license-card h6:nth-child(6) {
color: #FFF; /* Green color for Policy Type */
}
.license-card h6:nth-child(7) {
color: #FFF; /* Green color for Policy Type */
}
.emergency-info {
display: flex;
justify-content: space-between; /* Space between text and icon */
align-items: center; /* Align items vertically centered */
}
.emergency-call-link {
display: flex;
align-items: center; /* Ensure icon and text are aligned in the center */
text-decoration: none;
color: inherit; /* Ensure the link doesn't change text color */
}
.emergency-call-link svg {
margin-left: 8px; /* Space between text and icon */
float: right; /* Ensure the icon floats to the right */
fill: var(--theme-soft-pink); /* Optional: Color for the icon */
}
/* region Shop CSS */
.two-col-example {
margin-bottom: 2em;
}
.com-button {
background-color: var(--theme-blue);
font-weight: 300;
font-size: 18px;
padding: .7em 2em;
border-radius: 100px;
}
.main-button {
margin-top: 1em;
text-align: center;
}
.card-deck .card {
display: flex;
flex-direction: column;
margin-right: 6px;
margin-bottom: 0;
margin-left: 6px;
transition: background-color 0.3s, color 0.3s; /* Smooth transition */
border-radius: 20px;
}
/* On hover, change card background and text color */
.card-deck .card:hover {
background-color: var(--theme-blue); /* Background color change on hover */
color: white; /* Change text color to white on hover */
border-radius: 20px;
}
/* Icon color change on hover */
.card-deck .card:hover .com-icon path {
fill: white; /* Change the icon fill color to white on hover */
}
/* Default icon color */
.com-icon path {
fill: var(--theme-blue); /* Default fill color (blue) */
transition: fill 0.3s; /* Smooth transition for color change */
}
/* Default text color for title and paragraph */
.card-title, .card-body p {
color: var(--theme-blue); /* Default text color (blue) */
transition: color 0.3s; /* Smooth color transition */
}
/* Change text color to white on card hover */
.card-deck .card:hover .card-title,
.card-deck .card:hover .card-body p, h4 {
color: white; /* Change text color to white on hover */
}
/* Specifically target */
.card-title {
color: var(--theme-dark-pink); /* Ensure gets the theme blue color */
font-size: 1.5rem; /* Adjust size if needed */
margin-top: 0.5rem;
}
/* Target hover styles */
.card-deck .card:hover .card-title {
color: white; /* Change to white on hover */
}
/* region Shop CSS */
.myallPersonal .card-box-style{
padding: 10px 15px !important; /* Apply 5px padding on the left and right, no padding on top and bottom */
}
/* Ensure myallPersonal is full width on both mobile and desktop */
.myallPersonal {
width: 100% !important;
max-width: 100% !important;
}
/* Mobile view - ensure full width */
@media screen and (max-width: 768px) {
.myallPersonal {
width: 100% !important;
max-width: 100% !important;
}
}
/* Desktop view - ensure full width */
@media (min-width: 992px) {
.myallPersonal {
width: 100% !important;
max-width: 100% !important;
}
}
#place_of_work .accordion-body {
padding: 0 5px 10px !important; /* Apply 5px padding on the left and right, 10px padding at the bottom, and no padding on top */
}
#medical_aid .accordion-body {
padding: 10px 5px 10px !important; /* Apply 5px padding on the left and right, 10px padding at the bottom, and no padding on top */
}
/* region Payslips Accordion CSS */
/* Ensure content inside the #payslips section is centered and responsive */
#payslips .accordion-body {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem; /* Default padding */
}
/* On small screens (mobile view), reduce padding for a more compact layout */
@media (max-width: 767px) {
#payslips .accordion-body {
padding: 10px !important; /* Slightly smaller padding for mobile */
}
/* Ensure form fields are not too wide and properly aligned */
#payslips .f-w-input,
#payslips .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#payslips .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* Adjust button styling on small screens */
#payslips .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#payslips .file-input-rad {
width: 100%;
}
#payslips .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* For small screens: iPhone 5/SE, iPhone 4 (320px and above) */
@media (max-width: 320px) {
#payslips .accordion-body {
padding: 10px !important; /* Even smaller padding for tiny screens */
}
#payslips .f-w-input,
#payslips .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#payslips .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#payslips .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#payslips .file-input-rad {
width: 100%;
}
#payslips .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Medium screens: iPhone 6/7/8, iPhone SE (375px and above) */
@media (min-width: 321px) and (max-width: 374px) {
#payslips .accordion-body {
padding: 10px !important; /* Slightly smaller padding */
}
#payslips .f-w-input,
#payslips .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#payslips .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#payslips .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#payslips .file-input-rad {
width: 100%;
}
#payslips .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Larger screens: iPhone XR, iPhone 6/7/8 Plus (414px and above) */
@media (min-width: 375px) and (max-width: 768px) {
#payslips .accordion-body {
padding: 10px !important;
}
#payslips .f-w-input,
#payslips .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#payslips .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#payslips .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#payslips .file-input-rad {
width: 100%;
}
#payslips .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Tablets and small laptops: 768px and above */
@media (min-width: 769px) and (max-width: 1024px) {
#payslips .accordion-body {
padding: 1.25rem; /* Padding for tablet/laptop */
}
#payslips .f-w-input,
#payslips .row.child-cont {
width: 48%;
margin-bottom: 1rem;
}
#payslips .myallButtons {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
}
#payslips .myallButtons .btn {
width: auto;
margin: 0 0.5rem;
}
#payslips .file-input-rad {
width: auto;
}
#payslips .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* endregion Payslips Accordion CSS */
/* region Employer Accordion CSS */
/* Ensure content inside the #payslips section is centered and responsive */
#employer .accordion-body {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem; /* Default padding */
}
/* On small screens (mobile view), reduce padding for a more compact layout */
@media (max-width: 767px) {
#employer .accordion-body {
padding: 10px !important; /* Slightly smaller padding for mobile */
}
/* Ensure form fields are not too wide and properly aligned */
#employer .f-w-input,
#employer .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#employer .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* Adjust button styling on small screens */
#employer .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#employer .file-input-rad {
width: 100%;
}
#employer .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* For small screens: iPhone 5/SE, iPhone 4 (320px and above) */
@media (max-width: 320px) {
#employer .accordion-body {
padding: 10px !important; /* Even smaller padding for tiny screens */
}
#employer .f-w-input,
#employer .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#employer .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#employer .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#employer .file-input-rad {
width: 100%;
}
#employer .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Medium screens: iPhone 6/7/8, iPhone SE (375px and above) */
@media (min-width: 321px) and (max-width: 374px) {
#employer .accordion-body {
padding: 10px !important; /* Slightly smaller padding */
}
#employer .f-w-input,
#employer .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#employer .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#employer .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#employer .file-input-rad {
width: 100%;
}
#employer .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Larger screens: iPhone XR, iPhone 6/7/8 Plus (414px and above) */
@media (min-width: 375px) and (max-width: 768px) {
#employer .accordion-body {
padding: 10px !important;
}
#employer .f-w-input,
#employer .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#employer .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#employer .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#employer .file-input-rad {
width: 100%;
}
#employer .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Tablets and small laptops: 768px and above */
@media (min-width: 769px) and (max-width: 1024px) {
#employer .accordion-body {
padding: 1.25rem; /* Padding for tablet/laptop */
}
#employer .f-w-input,
#employer .row.child-cont {
width: 48%;
margin-bottom: 1rem;
}
#employer .myallButtons {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
}
#employer .myallButtons .btn {
width: auto;
margin: 0 0.5rem;
}
#employer .file-input-rad {
width: auto;
}
#employer .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* endregion Employer Accordion CSS */
/* region CV Accordion CSS */
/* Ensure content inside the #payslips section is centered and responsive */
#cv .accordion-body {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem; /* Default padding */
}
/* On small screens (mobile view), reduce padding for a more compact layout */
@media (max-width: 767px) {
#cv .accordion-body {
padding: 10px !important; /* Slightly smaller padding for mobile */
}
/* Ensure form fields are not too wide and properly aligned */
#cv .f-w-input,
#cv .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#cv .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* Adjust button styling on small screens */
#cv .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#cv .file-input-rad {
width: 100%;
}
#cv .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* For small screens: iPhone 5/SE, iPhone 4 (320px and above) */
@media (max-width: 320px) {
#cv .accordion-body {
padding: 10px !important; /* Even smaller padding for tiny screens */
}
#cv .f-w-input,
#cv .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#cv .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#cv .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#cv .file-input-rad {
width: 100%;
}
#cv .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Medium screens: iPhone 6/7/8, iPhone SE (375px and above) */
@media (min-width: 321px) and (max-width: 374px) {
#cv .accordion-body {
padding: 10px !important; /* Slightly smaller padding */
}
#cv .f-w-input,
#cv .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#cv .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#cv .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#cv .file-input-rad {
width: 100%;
}
#cv .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Larger screens: iPhone XR, iPhone 6/7/8 Plus (414px and above) */
@media (min-width: 375px) and (max-width: 768px) {
#cv .accordion-body {
padding: 10px !important;
}
#cv .f-w-input,
#cv .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#cv .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#cv .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#cv .file-input-rad {
width: 100%;
}
#cv .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Tablets and small laptops: 768px and above */
@media (min-width: 769px) and (max-width: 1024px) {
#cv .accordion-body {
padding: 1.25rem; /* Padding for tablet/laptop */
}
#cv .f-w-input,
#cv .row.child-cont {
width: 48%;
margin-bottom: 1rem;
}
#cv .myallButtons {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
}
#cv .myallButtons .btn {
width: auto;
margin: 0 0.5rem;
}
#cv .file-input-rad {
width: auto;
}
#cv .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* endregion CV Accordion CSS */
/* region Education Accordion CSS */
/* Ensure content inside the #payslips section is centered and responsive */
#education .accordion-body {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem; /* Default padding */
}
/* On small screens (mobile view), reduce padding for a more compact layout */
@media (max-width: 767px) {
#education .accordion-body {
padding: 10px !important; /* Slightly smaller padding for mobile */
}
/* Ensure form fields are not too wide and properly aligned */
#education .f-w-input,
#education .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#education .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* Adjust button styling on small screens */
#education .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#education .file-input-rad {
width: 100%;
}
#education .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* For small screens: iPhone 5/SE, iPhone 4 (320px and above) */
@media (max-width: 320px) {
#education .accordion-body {
padding: 10px !important; /* Even smaller padding for tiny screens */
}
#education .f-w-input,
#education .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#education .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#education .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#education .file-input-rad {
width: 100%;
}
#education .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Medium screens: iPhone 6/7/8, iPhone SE (375px and above) */
@media (min-width: 321px) and (max-width: 374px) {
#education .accordion-body {
padding: 10px !important; /* Slightly smaller padding */
}
#education .f-w-input,
#education .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#education .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#education .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#education .file-input-rad {
width: 100%;
}
#education .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Larger screens: iPhone XR, iPhone 6/7/8 Plus (414px and above) */
@media (min-width: 375px) and (max-width: 768px) {
#education .accordion-body {
padding: 10px !important;
}
#education .f-w-input,
#education .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#education .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#education .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#education .file-input-rad {
width: 100%;
}
#education .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Tablets and small laptops: 768px and above */
@media (min-width: 769px) and (max-width: 1024px) {
#education .accordion-body {
padding: 1.25rem; /* Padding for tablet/laptop */
}
#education .f-w-input,
#education .row.child-cont {
width: 48%;
margin-bottom: 1rem;
}
#education .myallButtons {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
}
#education .myallButtons .btn {
width: auto;
margin: 0 0.5rem;
}
#education .file-input-rad {
width: auto;
}
#education .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* endregion Education Accordion CSS */
/* region Medical Aid Accordion CSS */
/* Ensure content inside the #payslips section is centered and responsive */
#medical_aid .accordion-body {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem; /* Default padding */
}
/* On small screens (mobile view), reduce padding for a more compact layout */
@media (max-width: 767px) {
#medical_aid .accordion-body {
padding: 10px !important; /* Slightly smaller padding for mobile */
}
/* Ensure form fields are not too wide and properly aligned */
#medical_aid .f-w-input,
#medical_aid .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#medical_aid .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* Adjust button styling on small screens */
#medical_aid .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#medical_aid .file-input-rad {
width: 100%;
}
#medical_aid .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* For small screens: iPhone 5/SE, iPhone 4 (320px and above) */
@media (max-width: 320px) {
#medical_aid .accordion-body {
padding: 10px !important; /* Even smaller padding for tiny screens */
}
#medical_aid .f-w-input,
#medical_aid .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#medical_aid .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#medical_aid .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#medical_aid .file-input-rad {
width: 100%;
}
#medical_aid .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Medium screens: iPhone 6/7/8, iPhone SE (375px and above) */
@media (min-width: 321px) and (max-width: 374px) {
#medical_aid .accordion-body {
padding: 10px !important; /* Slightly smaller padding */
}
#medical_aid .f-w-input,
#medical_aid .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#medical_aid .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#medical_aid .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#medical_aid .file-input-rad {
width: 100%;
}
#medical_aid .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Larger screens: iPhone XR, iPhone 6/7/8 Plus (414px and above) */
@media (min-width: 375px) and (max-width: 768px) {
#medical_aid .accordion-body {
padding: 10px !important;
}
#medical_aid .f-w-input,
#medical_aid .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#medical_aid .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#medical_aid .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#medical_aid .file-input-rad {
width: 100%;
}
#medical_aid .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Tablets and small laptops: 768px and above */
@media (min-width: 769px) and (max-width: 1024px) {
#medical_aid .accordion-body {
padding: 1.25rem; /* Padding for tablet/laptop */
}
#medical_aid .f-w-input,
#medical_aid .row.child-cont {
width: 48%;
margin-bottom: 1rem;
}
#medical_aid .myallButtons {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
}
#medical_aid .myallButtons .btn {
width: auto;
margin: 0 0.5rem;
}
#medical_aid .file-input-rad {
width: auto;
}
#medical_aid .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* endregion Medical Aid Accordion CSS */
/* region Children Accordion CSS */
/* Ensure content inside the #payslips section is centered and responsive */
#children .accordion-body {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem; /* Default padding */
}
/* On small screens (mobile view), reduce padding for a more compact layout */
@media (max-width: 767px) {
#children .accordion-body {
padding: 10px !important; /* Slightly smaller padding for mobile */
}
/* Ensure form fields are not too wide and properly aligned */
#children .f-w-input,
#children .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#children .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* Adjust button styling on small screens */
#children .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#children .file-input-rad {
width: 100%;
}
#children .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* For small screens: iPhone 5/SE, iPhone 4 (320px and above) */
@media (max-width: 320px) {
#children .accordion-body {
padding: 10px !important; /* Even smaller padding for tiny screens */
}
#children .f-w-input,
#children .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#children .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#children .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#children .file-input-rad {
width: 100%;
}
#children .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Medium screens: iPhone 6/7/8, iPhone SE (375px and above) */
@media (min-width: 321px) and (max-width: 374px) {
#children .accordion-body {
padding: 10px !important; /* Slightly smaller padding */
}
#children .f-w-input,
#children .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#children .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#children .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#children .file-input-rad {
width: 100%;
}
#children .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Larger screens: iPhone XR, iPhone 6/7/8 Plus (414px and above) */
@media (min-width: 375px) and (max-width: 768px) {
#children .accordion-body {
padding: 10px !important;
}
#children .f-w-input,
#children .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#children .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#children .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#children .file-input-rad {
width: 100%;
}
#children .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Tablets and small laptops: 768px and above */
@media (min-width: 769px) and (max-width: 1024px) {
#children .accordion-body {
padding: 1.25rem; /* Padding for tablet/laptop */
}
#children .f-w-input,
#children .row.child-cont {
width: 48%;
margin-bottom: 1rem;
}
#children .myallButtons {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
}
#children .myallButtons .btn {
width: auto;
margin: 0 0.5rem;
}
#children .file-input-rad {
width: auto;
}
#children .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* endregion Children Accordion CSS */
/* region Me Accordion CSS */
/* Ensure content inside the #payslips section is centered and responsive */
#me .accordion-body {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem; /* Default padding */
}
/* On small screens (mobile view), reduce padding for a more compact layout */
@media (max-width: 767px) {
#me .accordion-body {
padding: 10px !important; /* Slightly smaller padding for mobile */
}
/* Ensure form fields are not too wide and properly aligned */
#me .f-w-input,
#me .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#me .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
/* Adjust button styling on small screens */
#me .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#me .file-input-rad {
width: 100%;
}
#me .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* For small screens: iPhone 5/SE, iPhone 4 (320px and above) */
@media (max-width: 320px) {
#me .accordion-body {
padding: 10px !important; /* Even smaller padding for tiny screens */
}
#me .f-w-input,
#me .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#me .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#me .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#me .file-input-rad {
width: 100%;
}
#me .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Medium screens: iPhone 6/7/8, iPhone SE (375px and above) */
@media (min-width: 321px) and (max-width: 374px) {
#me .accordion-body {
padding: 10px !important; /* Slightly smaller padding */
}
#me .f-w-input,
#me .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#me .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#me .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#me .file-input-rad {
width: 100%;
}
#me .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Larger screens: iPhone XR, iPhone 6/7/8 Plus (414px and above) */
@media (min-width: 375px) and (max-width: 768px) {
#me .accordion-body {
padding: 10px !important;
}
#me .f-w-input,
#me .row.child-cont {
width: 100%;
margin-bottom: 1rem;
}
#me .myallButtons {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#me .myallButtons .btn {
width: 100%;
margin-bottom: 0.5rem;
}
#me .file-input-rad {
width: 100%;
}
#me .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* Tablets and small laptops: 768px and above */
@media (min-width: 769px) and (max-width: 1024px) {
#me .accordion-body {
padding: 1.25rem; /* Padding for tablet/laptop */
}
#me .f-w-input,
#me .row.child-cont {
width: 48%;
margin-bottom: 1rem;
}
#me .myallButtons {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
}
#me .myallButtons .btn {
width: auto;
margin: 0 0.5rem;
}
#me .file-input-rad {
width: auto;
}
#me .btn-outline-two {
margin-top: 1rem;
text-align: center;
}
}
/* endregion Me Accordion CSS */
/* Ensure accordion header uses flexbox for layout */
#accordionPersonal .accordion-header {
display: flex;
justify-content: space-between; /* Align content at both ends */
align-items: center; /* Center vertically */
text-align: left;
color: var(--theme-blue);
padding: 0.5em; /* Optional: Add padding for better spacing */
}
/* Ensure accordion button aligns to the right */
#accordionPersonal .accordion-header .accordion-button {
margin-left: auto; /* Push the button to the far right */
color: inherit; /* Keep text color consistent */
background-color: transparent; /* Maintain background transparency */
border: none; /* Remove borders */
text-align: left; /* Keep text left-aligned */
}
/* Prevent button background and focus styles on expand */
#accordionPersonal .accordion-header .accordion-button:not(.collapsed) {
color: inherit;
background-color: transparent;
box-shadow: none;
}
/* Add hover styles for the button */
#accordionPersonal .accordion-header .accordion-button:hover {
background-color: var(--theme-soft-pink); /* Optional: Light background */
color: var(--theme-blue); /* Optional: Change text color on hover */
}
/* Optional: Add focus styles for accessibility */
#accordionPersonal .accordion-header .accordion-button:focus {
outline: 2px solid var(--theme-soft-pink); /* Focus outline */
}
/* Ensure accordion header uses flexbox for layout */
#safeKeepingAccordion .accordion-header {
display: flex;
justify-content: space-between; /* Align content at both ends */
align-items: center; /* Center vertically */
text-align: left;
color: var(--theme-blue);
padding: 0.5em; /* Optional: Add padding for better spacing */
}
/* Ensure accordion button aligns to the right */
#safeKeepingAccordion .accordion-header .accordion-button {
margin-left: auto; /* Push the button to the far right */
color: inherit; /* Keep text color consistent */
background-color: transparent; /* Maintain background transparency */
border: none; /* Remove borders */
text-align: left; /* Keep text left-aligned */
}
/* Prevent button background and focus styles on expand */
#safeKeepingAccordion .accordion-header .accordion-button:not(.collapsed) {
color: inherit;
background-color: transparent;
box-shadow: none;
}
/* Add hover styles for the button */
#safeKeepingAccordion .accordion-header .accordion-button:hover {
background-color: var(--theme-soft-pink); /* Optional: Light background */
color: var(--theme-blue); /* Optional: Change text color on hover */
}
/* Optional: Add focus styles for accessibility */
#safeKeepingAccordion .accordion-header .accordion-button:focus {
outline: 2px solid var(--theme-soft-pink); /* Focus outline */
}
/* Default styles for all screen sizes (desktop and mobile) */
.menu-section {
display: none; /* Hide by default on all screen sizes */
}
.timeline-section-mobile2 {
display: flex; /* Keep the items in a horizontal row */
align-items: center; /* Vertically align the items in the row */
justify-content: space-between; /* Distribute space between items */
width: 100%; /* Ensure it spans the full width */
padding: 5px; /* Add padding inside the card */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
}
.__header_menu2 {
display: flex;
justify-content: space-between; /* Space between items */
width: 100%;
align-items: center; /* Vertically center the items */
border-radius: 50%;
}
.__heading_menu2 h5 {
font-size: 14px;
margin: 0;
color: var(--theme-blue);
align-items: start;
text-align: left;
}
.__heading_menu2 p {
font-size: 12px;
margin: 0;
color: var(--theme-dark-blue);
align-items: start;
text-align: left;
}
.timeline-section-mobile3 {
display: flex; /* Keep the items in a horizontal row */
align-items: center; /* Vertically align the items in the row */
justify-content: space-between; /* Distribute space between items */
width: 100%; /* Ensure it spans the full width */
padding: 5px; /* Add padding inside the card */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
background-color: #FBA7B7;
color: #f0f9ff;
}
.__header_menu3 {
display: flex;
justify-content: space-between; /* Space between items */
width: 100%;
align-items: center; /* Vertically center the items */
}
.__heading_menu3 h5 {
font-size: 14px;
margin: 0;
color: var(--theme-faint-blue);
align-items: start;
text-align: left;
}
.__heading_menu3 p {
font-size: 12px;
margin: 0;
color: var(--theme-faint-blue);
align-items: start;
text-align: left;
}
.timeline-section-mobile {
display: flex; /* Keep the items in a horizontal row */
align-items: center; /* Vertically align the items in the row */
justify-content: space-between; /* Distribute space between items */
width: 100%; /* Ensure it spans the full width */
background-color: var(--theme-soft-peach); /* Set a white background */
border: 1px solid #ddd; /* Add a light border */
border-radius: 12px; /* Round the corners of the card */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
}
.__header_menu {
display: flex;
justify-content: space-between; /* Space between items */
width: 100%;
align-items: center; /* Vertically center the items */
border-radius: 30px;
}
/* .__header_menu_life {
display: flex;
justify-content: space-between;
width: 100%;
align-items: center;
} */
.__avatar_menu,
.__welcome-text_menu,
.__messenger-icon {
display: flex;
align-items: center;
justify-content: center;
}
.avatar-img_menu {
width: 55px;
height: 55px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--theme-blue, #007bff); /* Fallback color */
}
.__welcome-text_menu {
flex: 1; /* Take the remaining space */
text-align: center; /* Center text */
margin: 0 20px; /* Add spacing between avatar and messenger icon */
}
.__welcome-text_menu h6 {
margin: 0;
font-size: 16px;
color: var(--theme-blue, #007bff); /* Fallback color */
}
.__messenger-icon svg {
width: 60px;
height: 60px;
cursor: pointer;
transition: transform 0.3s ease;
border-radius: 50%;
padding: 5px;
background-color: var(--theme-dark-pink);
}
.__messenger-icon svg:hover {
transform: scale(1.1);
}
.__header_menu {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #fff;
border-radius: 25px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.__header_menu_intro2 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #4b1a75;
border-radius: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
}
.__header_menu_intro3 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #822381;
border-radius: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
}
.__header_menu_intro4 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #b23171;
border-radius: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
}
.__header_menu_intro {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #ffacbc;
border-radius: 30px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
}
/* .__intro_icon svg {
color: var(--theme-blue);
cursor: pointer;
width: 24px;
height: 24px;
margin-left: 8px;
background-color: var(--_fill);
border-radius: 50%;
} */
.__intro_icon svg{
color: var(--theme-blue);
cursor: pointer;
width: 34px;
height: 34px;
background-color: var(--theme-soft-pink) !important;
border-radius: 50%;
padding: 6px;
margin-left: 0;
}
.__header_menu_life {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
}
.__back_button svg {
color: var(--theme-blue);
cursor: pointer;
}
.__heading_menu h5 {
font-size: 18px;
margin: 0;
color: var(--theme-blue);
align-items: start;
text-align: left;
}
.__heading_menu p {
font-size: 15px;
margin: 0;
color: var(--theme-dark-blue);
align-items: start;
text-align: left;
}
.__heading_menu_intro h5 {
font-size: 15px;
margin: 0;
color: var(--theme-blue);
align-items: start;
text-align: left;
}
.__heading_menu_intro h4 {
font-size: 20px;
margin: 0;
color: var(--theme-blue);
align-items: center;
text-align: start;
}
.__heading_menu_intro p {
font-size: 12px;
margin: 0;
color: var(--theme-dark-blue);
align-items: start;
text-align: left;
}
.__header_menu_life h5 {
font-size: 18px;
margin: 0;
color: var(--theme-blue);
align-items: start;
text-align: left;
}
.__header_menu_life p {
font-size: 15px;
margin: 0;
color: var(--theme-dark-blue);
align-items: start;
text-align: left;
}
.__notification-icon svg {
color: var(--theme-blue);
cursor: pointer;
}
/* Show only on mobile devices */
@media screen and (max-width: 768px) {
.menu-section {
display: block; /* Display only on mobile */
}
.timeline-section-mobile {
display: flex; /* Keep inline columns */
justify-content: space-between; /* Keep spacing */
width: 100%;
padding: 10px;
}
.__avatar_menu,
.__welcome-text_menu,
.__messenger-icon {
display: flex;
align-items: center;
justify-content: center;
}
.avatar-img_menu {
width: 50px; /* Adjust avatar size for smaller screens */
height: 50px;
}
.__welcome-text_menu {
flex: 1;
text-align: center;
margin: 0 15px;
}
.__messenger-icon svg {
width: 34px;
height: 34px;
}
}
/* Hide on laptops, desktops, and larger screens */
@media screen and (min-width: 769px) {
.menu-section {
display: none; /* Hide on larger devices */
}
}
/* General styles */
.timeline-section-mobile_nav {
display: flex; /* Use flexbox for the parent container */
justify-content: space-between; /* Distribute space between columns */
align-items: start; /* Vertically align the columns */
width: 100%; /* Ensure it spans the full width */
padding: 10px; /* Add padding for some spacing */
box-sizing: border-box; /* Include padding in the total width calculation */
}
.timeline-section-mobile_life {
display: flex; /* Use flexbox for the parent container */
justify-content: space-between; /* Distribute space between columns */
align-items: start; /* Vertically align the columns */
width: 100%; /* Ensure it spans the full width */
padding: 10px; /* Add padding for some spacing */
box-sizing: border-box; /* Include padding in the total width calculation */
}
/* Header Menu */
.__header_menu2 {
display: flex; /* Use flexbox for the header menu */
justify-content: space-between; /* Distribute the columns across the container */
align-items: left; /* Vertically align the columns */
width: 100%; /* Ensure it takes the full width */
background-color: #fff; /* White background */
padding: 15px; /* Padding inside */
border-radius: 8px; /* Rounded corners */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
.__header_menu3 {
display: flex; /* Use flexbox for the header menu */
justify-content: space-between; /* Distribute the columns across the container */
align-items: left; /* Vertically align the columns */
width: 100%; /* Ensure it takes the full width */
background-color: #fff; /* White background */
padding: 15px; /* Padding inside */
border-radius: 8px; /* Rounded corners */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
/* Welcome Text Menu */
.timeline-section-mobile_nav .__header_menu2 {
display: flex;
align-items: center;
width: 100%;
}
.__welcome-text_menu2 {
display: flex;
align-items: center;
flex: 1; /* Takes up remaining space */
}
.__welcome-text_menu2 h6 {
font-size: 124px;
color: #040A5E;
margin: 0;
display: flex;
align-items: center;
width: 100%;
}
.__welcome-text_menu2 a {
display: flex;
align-items: center;
margin-right: 8px; /* Space between icon and text */
}
.__welcome-text_menu2 svg {
flex-shrink: 0; /* Prevent icon from shrinking */
}
.__progress-container_menu {
width: 50%; /* Takes exactly 50% of the parent */
display: flex;
flex-direction: column;
align-items: flex-end; /* Align progress to the right */
justify-content: center;
margin-top: 20px;
}
.__progress-bar-menu {
width: 100%;
height: 10px;
}
.__progress-text {
margin-top: 8px;
}
.__progress-number {
font-size: 14px;
font-weight: bold;
}
/* Messenger Icon */
.__messenger-icon2 {
flex: 0 0 auto; /* Prevent shrinking */
display: flex; /* Ensure inline display */
justify-content: flex-end; /* Align to the right */
align-items: center; /* Vertically center the icon */
}
/* Mobile-specific styles */
@media only screen and (max-width: 768px) {
/* Ensure the 3 columns are displayed inline in mobile view */
.timeline-section-mobile_nav {
flex-wrap: wrap; /* Allow items to wrap in case they exceed the screen width */
justify-content: space-between; /* Keep space between items */
}
.timeline-section-mobile_life {
flex-wrap: wrap; /* Allow items to wrap in case they exceed the screen width */
justify-content: space-between; /* Keep space between items */
}
.__header_menu2 {
display: flex; /* Ensure the header remains flex */
justify-content: space-between;
width: 100%; /* Take full width */
flex-wrap: wrap; /* Allow wrapping if needed */
}
.__header_menu3 {
display: flex; /* Ensure the header remains flex */
justify-content: space-between;
width: 100%; /* Take full width */
flex-wrap: wrap; /* Allow wrapping if needed */
}
/* Ensure the columns maintain the 3-column layout in mobile view */
.__welcome-text_menu2,
.__progress-container_menu,
.__messenger-icon2 {
flex: 1 1 30%; /* Set each item to take up 30% of the available space */
display: flex; /* Ensure inline layout */
align-items: center; /* Vertically center items */
justify-content: center; /* Center content horizontally */
margin-bottom: 10px; /* Add some space between rows */
}
/* Adjustments for smaller icons */
.__messenger-icon2 svg {
width: 20px;
height: 20px;
}
}
/* region File Upload logic */
/* Main form container */
form {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Each payslip item container */
.child-cont {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
background-color: #fff;
}
/* Inner row layout */
.child-cont .row {
display: flex;
flex-wrap: wrap;
margin: 0 -10px; /* Adjust gutter */
}
/* Columns */
.child-cont .col-md-12 {
flex: 0 0 100%;
max-width: 100%;
padding: 0 10px; /* Adjust gutter */
}
/* Form inputs */
.f-w-input {
margin-bottom: 15px;
}
.btm-border-input {
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
}
/* File upload section */
.file-upload {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Buttons */
.btn-outline-two,
.btn-outline-one {
padding: 8px 16px;
border-radius: 4px;
white-space: nowrap;
}
/* Add payslip button container */
.row.mb-3 {
flex: 0 0 auto;
}
/* Bottom action buttons */
.myallButtons {
display: flex;
justify-content: flex-end;
gap: 15px;
margin-top: 20px;
}
/*****************************************
upload button styles
******************************************/
.file-upload {
border: 2px dashed #e9ecef;
text-align: center;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.3s;
}
.file-upload__label {
display: block;
padding: 1em 2em;
color: var(--theme-blue);
background: #f8f9fa;
border-radius: 20px;
transition: background .3s;
border: 2px dashed var(--theme-blue);
&:hover {
cursor: pointer;
border-color: var(--theme-blue);
background-color: #f8f9fa;
}
}
.file-upload__input {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
font-size: 1;
width:0;
height: 100%;
opacity: 0;
}
/* endregion File Upload logic */
/* Floating Action Bar Styles */
.floating-action-bar {
position: fixed;
bottom: 65px;
right: 20px;
display: none; /* Initially hidden */
z-index: 1000;
}
.floating-language-bar {
position: fixed;
bottom: 65px;
left: 20px;
display: none; /* Initially hidden */
z-index: 1000;
}
/* Floating Footer Styles */
.floating-footer-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: white;
padding: 10px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
z-index: 990; /* Below language selector but above most content */
transition: all 0.3s ease;
background-color: transparent;
}
/* Adjust footer when language selector is open */
.lang-menu-open .floating-footer-bar {
transform: translateY(100%);
}
/* region Language Menu MobileView */
.__lang-menu {
display: none; /* Hide initially */
position: absolute;
top: 40px;
right: 0;
background: white;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.__lang-menu.show {
display: block; /* Show when class is added */
}
/* endregion Language Menu MobileView */
.language-button {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background-color: var(--theme-blue);
color: #ffffff;
border-radius: 50%;
text-decoration: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, transform 0.2s ease;
}
.action-button {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background-color: var(--theme-dark-pink);
color: #ffffff;
border-radius: 50%;
text-decoration: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease, transform 0.2s ease;
}
.action-button:hover {
background-color: var(--theme-dark-blue);
transform: scale(1.1);
}
.action-button:active {
transform: scale(0.9);
}
/* SVG Icon Styling */
.icon {
width: 24px;
height: 24px;
}
.bottom-dialog {
display: none;
}
/* Show on Mobile Only */
@media screen and (max-width: 768px) {
.floating-action-bar {
display: block;
}
.floating-language-bar {
display: block;
}
.floating-footer-bar {
display: block;
}
/* Backdrop Overlay */
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 995; /* Between footer and dialog */
}
/* Bottom Dialog */
.bottom-dialog {
display: block;
position: fixed;
bottom: -100%;
left: 0;
width: 100%;
background: white;
border-radius: 15px 15px 0 0;
box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.2);
transition: bottom 0.3s ease-in-out;
text-align: center;
padding: 20px;
z-index: 1000; /* Above footer */
}
/* Show the dialog */
.bottom-dialog.show {
bottom: 0;
z-index: 1000; /* Above footer */
}
/* Close button */
.close-button {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
color: #333;
}
}
.mobileviewonly {
display: none;
}
@media screen and (max-width: 768px) {
.mobileviewonly {
display: block;
}
}
/* Show only on mobile (max-width: 768px) */
@media (max-width: 768px) {
/* .floating-language-bar {
display: block;
position: fixed;
bottom: 20px;
right: 20px;
background-color: #fff;
border-radius: 50%;
padding: 10px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
} */
}
/* region Gmail type of messaging */
.app {
user-select: none;
width: 100%;
height: 562px;
overflow-y: auto;
&::-webkit-scrollbar {
display: none;
}
-ms-overflow-style: none;
scrollbar-width: none;
.statusbar {
z-index: 5;
display: flex;
align-items: center;
width: 100%;
height: 31px;
position: sticky;
top: 0;
background: rgba(255, 255, 255, 1);
.statusbar-time {
padding-left: 10px;
font-size: 12px;
}
.statusbar-icons {
flex: 1;
padding-right: 10px;
text-align: right;
.material-icons {
font-size: 13px;
}
}
}
.gmail {
width: 100%;
height: 531px;
.gmail-search {
z-index: 2;
background: var(--theme-border-color);
position: sticky;
top: 41px;
display: flex;
width: auto;
height: 40px;
border-radius: 15px;
border-bottom: 1px solid var(--theme-blue) ;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.8);
.gmail-menu__button {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
.material-icons {
opacity: 0.7;
font-size: 1.3rem;
}
}
.gmail-search__title {
display: flex;
opacity: 0.7;
flex: 1;
align-items: center;
font-family: "Product Sans", sans-serif;
}
.gmail-account__button {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
.gmail-account__preview {
object-fit: cover;
border-radius: 50%;
width: 27px;
height: 27px;
}
}
}
.gmail__fab-button {
color: #cb2a21;
height: 38px;
padding: 0 10px 0 0;
border-radius: 50px;
background: white;
position: absolute;
display: flex;
align-items: center;
bottom: 15px;
right: 10px;
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
.gmail__fab-button_mizimized {
width: 50px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
.material-icons {
font-size: 20px;
}
}
.gmail__fab-button_title {
font-size: 14px;
text-shadow: 0 0 0 #d82f25;
font-family: "Product Sans", serif-sans;
}
}
.title-item {
font-weight: 400;
text-transform: uppercase;
padding: 10px 5px 10px 10px;
opacity: 0.5;
letter-spacing: 1px;
font-size: 12px;
}
.gmail__item {
margin: 5px 0;
padding: 5px 0;
display: flex;
align-items: flex-start;
border-radius: 20px;
background-color: var(--theme-light-blue);
&.gmail__item_unread {
.gmail__message {
.gmail__message-header {
font-weight: 400;
background-color: var(--_fill);
padding: 5px;
}
.gmail__message-text {
span {
font-weight: 200;
}
}
}
}
.gmail__message-avatar {
width: 35px;
height: 35px;
border-radius: 50%;
margin: 0 10px 0 10px;
background-image: linear-gradient(to right top, #3a0f2a, #471736, #542042, #62294f, #70325c, #743560, #793864, #7d3b68, #793864, #753560, #71325c, #6d2f58);
}
.gmail__message-avatar1 {
width: 35px;
height: 35px;
border-radius: 50%;
margin: 0 5px 0 5px;
background-color: var(--theme-soft-blue);
text-align: center;
font-size: 18px;
font-weight: 400;
color: whitesmoke;
align-items: center;
padding: 5px;
}
.gmail__message-avatar2 {
width: 35px;
height: 35px;
border-radius: 50%;
margin: 0 10px 0 10px;
background-color: #4CB6AC;
text-align: center;
font-size: 18px;
font-weight: 400;
color: whitesmoke;
align-items: center;
padding: 5px;
}
.gmail__message-avatar3 {
width: 35px;
height: 35px;
border-radius: 50%;
margin: 0 10px 0 10px;
background-color: #5F97F6;
text-align: center;
font-size: 18px;
font-weight: 400;
color: whitesmoke;
align-items: center;
padding: 5px;
}
.gmail__message-avatar4 {
width: 35px;
height: 35px;
border-radius: 50%;
margin: 0 10px 0 10px;
background-color: #9675CE;
text-align: center;
font-size: 18px;
font-weight: 400;
color: whitesmoke;
align-items: center;
padding: 5px;
}
.gmail__message-avatar5 {
width: 35px;
height: 35px;
border-radius: 50%;
margin: 0 10px 0 10px;
background-color: #D7EBC1;
text-align: center;
font-size: 18px;
font-weight: 400;
color: whitesmoke;
align-items: center;
padding: 5px;
}
.gmail__message-avatar6 {
width: 35px;
height: 35px;
border-radius: 50%;
margin: 0 10px 0 10px;
background-color: #D7EBC1;
text-align: center;
font-size: 18px;
font-weight: 400;
color: whitesmoke;
align-items: center;
padding: 5px;
}
.gmail__message {
flex: 1;
.gmail__message-header {
display: flex;
align-items: left;
.gmail__message-title {
flex: 1;
font-size: 13px;
color: var(--theme-blue);
}
.gmail__mesage-timestamp {
padding-right: 10px;
font-size: 14px;
font-family: "Inter", sans-serif;
}
}
.gmail__message-content {
display: flex;
align-items: flex-end;
.gmail__message-text {
flex: 1;
padding-top: 3px;
font-size: 14px;
text-align: left;
align-items: start;
}
.gmail__message-action {
opacity: 0.5;
width: 50px;
height: 100%;
display: flex;
justify-content: center;
&.gmail__message-action_active {
opacity: 1;
color: #fabd03;
}
}
}
}
}
}
}
/* endregion Gmail type of messaging */
.sectors-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
max-width: 1200px; /* let it expand on desktops */
margin: 0 auto;
}
/* Tablet view */
@media (min-width: 768px) {
.sectors-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop view */
@media (min-width: 1024px) {
.sectors-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Large desktops */
@media (min-width: 1440px) {
.sectors-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.sectors-grid a {
text-decoration: none;
color: inherit;
}
.sector-card {
border-radius: 16px;
padding: 24px 20px;
background-color: white;
position: relative;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.03);
}
.sector-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.sector-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
}
.sector-name {
font-size: 17px;
font-weight: 600;
text-align: center;
width: 100%;
}
/* Password Toggle Styles */
.password-group {
position: relative;
}
.password-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #666;
width: 20px;
height: 20px;
}
.password-toggle:hover {
color: #333;
}
/* Adjust input padding to make space for the icon */
.password-group input[type="password"],
.password-group input[type="text"] {
padding-right: 40px;
}
/* Pastel color schemes */
.business {
background-color: #100E61;
color: #f0f9ff;
background: url(../patterns/theme.webp) #100E61;
background-blend-mode: overlay;
background-size: 400px;
}
.business::before {
background-color: #100E61;
}
.entrepreneurship {
background-color: #441772;
color: #f0f9ff;
background: url(../patterns/theme.webp) #441772;
background-blend-mode: overlay;
background-size: 400px;
}
.entrepreneurship::before {
background-color: #441772;
}
.microsoft-office {
background-color: #8E287F;
color: #f0f9ff;
background: url(../patterns/theme.webp) #8E287F;
background-blend-mode: overlay;
background-size: 400px;
}
.microsoft-office::before {
background-color: #8E287F;
}
.it-software {
background-color: #AF3170;
color: #f0f9ff;
background: url(../patterns/theme.webp) #AF3170 ;
background-blend-mode: overlay;
background-size: 400px;
}
.it-software::before {
background-color: #AF3170;
}
.personal-development {
background-color: #C93B63;
color: #f0f9ff;
background: url(../patterns/theme.webp) #C93B63;
background-blend-mode: overlay;
background-size: 400px;
}
.personal-development::before {
background-color: #C93B63;
}
.soft-skills {
background-color: #DE607D;
color: #f0f9ff;
background: url(../patterns/theme.webp) #DE607D;
background-blend-mode: overlay;
background-size: 400px;
}
.soft-skills::before {
background-color: #DE607D;
}
/* Mobile-only enforcement */
.header {
width: 100%;
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 0 0 5px 5px; /* Only bottom-left and bottom-right corners */
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.course_card {
width: 100%;
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.course_card img {
width: 100%;
display: block;
}
.price-tag {
position: absolute;
background-color: #DE607D;
color: white;
font-weight: bold;
font-size: 14px;
top: 10px;
left: 10px;
padding: 3px 8px;
border-radius: 3px;
}
.card-image-container {
position: relative;
}
.category {
position: absolute;
bottom: 0;
background-color: #1C0F66;
color: white;
padding: 3px 10px;
font-size: 14px;
}
.card-content {
padding: 15px;
}
.card-content h3 {
margin: 0;
font-size: 18px;
color: #333;
}
.card-content p {
margin: 10px 0;
font-size: 14px;
color: #555;
line-height: 1.5em;
max-height: 3em;
overflow: hidden;
}
.read-more {
color: #0d3c61;
font-size: 14px;
text-decoration: underline;
cursor: pointer;
}
@media (max-width: 768px) {
.__desktop{
display: none;
}
}