@import url("font.css");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root {
--primary-color: #3661ff;
--primary-color-light: #a3b7ff;
--primary-hover-color: #0e41fc;
--white-color: #ffffff;
--off-white-color: #fafbff;
--mobile-background: #f9f9f9;
--border-color: #eaeaea;
--black-color: #000000;
--gray-color: #5c5c5c;
--text-color: #131313;
--form-btn-hover: rgba(255, 255, 255, 0.8);
--red-color: #ff0000;
--dark-red-color: #c40000;
--font-family: "Outfit", sans-serif;
--profile-popup-font-family: "Inter", sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-family);
letter-spacing: 0;
}
body.popup_open {
position: relative;
overflow: hidden;
}
body.popup_open::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
z-index: 999;
}
main {
min-height: calc(100dvh - 224px);
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
padding: 0;
margin: 0;
}
a {
display: inline-block;
text-decoration: none;
}
span {
display: inline-block;
}
img {
max-width: 100%;
height: auto;
display: inline-block;
vertical-align: top;
}
.container {
max-width: 1176px;
padding-left: 24px;
padding-right: 24px;
margin-left: auto;
margin-right: auto;
}
input,
button,
textarea,
select {
border: none;
outline: none;
background-color: transparent;
box-shadow: none;
}
input::placeholder,
textarea::placeholder,
select::placeholder {
color: var(--white-color);
opacity: 1;
}
input:is(:focus, :focus-visible, :focus-within),
button:is(:focus, :focus-visible, :focus-within),
textarea:is(:focus, :focus-visible, :focus-within),
select:is(:focus, :focus-visible, :focus-within) {
outline: none;
box-shadow: none;
}
#createTripBtn .create_trip_btn {
width: 80%;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 12px;
color: var(--white-color);
background-color: var(--primary-color);
border: 1px solid var(--primary-color);
padding: 20px;
width: 100%;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
text-align: center;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#createTripBtn .create_trip_btn:hover {
color: var(--black-color);
background-color: transparent;
border-color: var(--primary-color);
}
@media (max-width: 1199px) {
#createTripBtn .create_trip_btn {
width: 100%;
}
}
@media (min-width: 481px) {
.manage_expense_page {
display: flex;
flex-direction: column;
gap: 30px;
justify-content: space-between;
}
}
@media (max-width: 480px) {
body {
background: var(--mobile-background);
}
#createTripBtn {
width: 100%;
position: fixed;
bottom: 0;
padding: 32px 0;
background-color: var(--mobile-background);
}
#createTripBtn .create_trip_btn {
gap: 6px;
font-size: 14px;
line-height: 10px;
width: fit-content;
padding: 15px 35px;
margin: 0 0 0 auto;
}
}
/* =============== FORM-PAGE START =============== */
.form_body {
height: 100dvh;
min-height: 100dvh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.form_wrapper {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background: radial-gradient(circle at top right,
var(--primary-color-light) 0%,
var(--primary-color) 55%);
height: 100%;
}
.form_wrapper .form_img,
.form_wrapper .form_content_wrapper {
width: 50%;
}
.form_wrapper .login_form_wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.form_wrapper .form_img {
position: relative;
height: 100%;
min-height: 100%;
}
.form_wrapper .form_img .form_page_img {
width: 100%;
height: 100%;
min-height: 100%;
object-fit: cover;
}
.form_wrapper .form_img .page_content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 65px 65px 115px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 30px;
}
.form_wrapper .form_img .page_content .logo {
max-width: 148px;
height: auto;
}
.form_wrapper .form_img .page_content .page_title {
font-family: var(--font-family);
font-weight: 300;
font-size: 64px;
line-height: 73px;
color: var(--white-color);
}
.form_wrapper .form_img .page_content .page_title b,
.form_wrapper .form_img .page_content .page_title strong {
font-weight: 600;
}
.form_wrapper .form_content_wrapper form {
margin: 70px;
max-width: 70%;
}
.form_wrapper .form_content_wrapper .form_title {
font-family: var(--font-family);
font-weight: 500;
font-size: 40px;
color: var(--white-color);
margin: 0 0 24px;
}
.form_wrapper .form_content_wrapper .form_description {
font-family: var(--font-family);
font-weight: 400;
font-size: 14px;
line-height: 21px;
color: var(--white-color);
margin: 0 0 20px;
}
.form_wrapper .form_content_wrapper form .form_half_row {
display: flex;
justify-content: space-between;
gap: 16px;
width: 100%;
}
.form_wrapper .form_content_wrapper form .form_half_row .form_input {
width: calc(50% - 8px);
}
.form_wrapper .form_content_wrapper form .form_input {
width: 100%;
display: block;
margin: 0 0 20px;
position: relative;
}
.form_wrapper .form_content_wrapper form .form_input .password_icon_wrapper {
position: absolute;
top: 50%;
left: auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
right: 20px;
color: var(--white-color);
cursor: pointer;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
max-width: 24px;
max-height: 24px;
}
.form_wrapper .form_content_wrapper form .form_input .icon_wrapper {
position: absolute;
top: 50%;
left: auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
left: 20px;
color: var(--white-color);
cursor: pointer;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
max-width: 24px;
max-height: 24px;
}
.form_wrapper .form_content_wrapper form .form_input input {
width: 100%;
font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
color: var(--white-color);
border: 2px solid var(--white-color);
padding: 23px 20px;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
}
.form_wrapper .form_content_wrapper form .form_input.icon_input input {
padding-left: 52px;
}
.form_wrapper .form_content_wrapper form .form_input.password input {
padding-right: 52px;
}
.form_wrapper .form_content_wrapper form .forgot_password {
font-family: var(--font-family);
font-weight: 400;
font-size: 14px;
color: var(--white-color);
margin: 0 0 20px;
text-align: right;
width: 100%;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
.form_wrapper .form_content_wrapper form .forgot_password:hover {
opacity: 0.8;
}
.form_wrapper .form_content_wrapper form .form_btn {
background-color: var(--white-color);
padding: 20px;
width: 100%;
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
color: var(--primary-color);
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
.form_wrapper .form_content_wrapper form .form_btn:hover {
background-color: var(--form-btn-hover);
}
.form_wrapper .form_content_wrapper .form_bottom_content {
text-align: center;
display: flex;
flex-direction: column;
gap: 5px;
margin: 0 70px 40px;
max-width: 70%;
}
.form_wrapper .form_content_wrapper .form_bottom_content span {
font-family: var(--font-family);
font-weight: 300;
font-size: 12px;
line-height: 100%;
letter-spacing: 0;
color: var(--white-color);
}
.form_wrapper .form_content_wrapper .form_bottom_content a {
font-family: var(--font-family);
font-weight: 700;
font-size: 14px;
line-height: 100%;
letter-spacing: 0;
text-decoration: underline;
color: var(--white-color);
text-underline-offset: 3px;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
.form_wrapper .form_content_wrapper .form_bottom_content a:hover {
opacity: 0.8;
}
@media (max-width: 1499px) {
.form_wrapper .form_img .page_content {
padding: 65px 65px 90px;
}
.form_wrapper .form_img .page_content .page_title {
font-size: 60px;
line-height: 64px;
}
}
@media (max-width: 1399px) {
.form_wrapper .form_content_wrapper form,
.form_wrapper .form_content_wrapper .form_bottom_content {
max-width: 100%;
}
.form_wrapper .form_content_wrapper form {
margin: 50px;
}
.form_wrapper .form_content_wrapper .form_bottom_content {
margin: 0 50px 40px;
}
}
@media (max-width: 1299px) {
.form_wrapper .form_img .page_content {
padding: 50px 50px 70px;
}
.form_wrapper .form_img .page_content .page_title {
font-size: 54px;
line-height: 56px;
}
.form_wrapper .form_content_wrapper form .form_half_row {
display: inline-block;
width: 100%;
}
.form_wrapper .form_content_wrapper form .form_half_row .form_input {
width: 100%;
}
}
@media (max-width: 1199px) {
.form_wrapper .form_img .page_content .page_title {
font-size: 50px;
line-height: 54px;
}
.form_wrapper .form_img .page_content .page_title br {
display: none;
}
}
@media (max-width: 991px) {
.form_body {
height: auto;
min-height: 100dvh;
overflow: auto;
}
.form_wrapper {
flex-direction: column;
padding: 50px;
gap: 50px;
}
.form_wrapper .form_img,
.form_wrapper .form_content_wrapper {
width: 100%;
}
.form_wrapper .form_img {
height: auto;
min-height: auto;
}
.form_wrapper .form_img .page_content {
position: static;
padding: 0;
}
.form_wrapper .form_img .form_page_img {
width: 100%;
height: 100%;
min-height: 100%;
object-fit: cover;
display: none;
}
.form_wrapper .form_img .page_content .page_title {
font-size: 44px;
line-height: 46px;
}
.form_wrapper .form_content_wrapper form {
margin: 0;
}
.form_wrapper .form_content_wrapper .form_bottom_content {
margin: 40px 0 0;
}
}
@media (max-width: 575px) {
.form_wrapper {
padding: 30px;
gap: 30px;
}
.form_wrapper .form_img .page_content {
gap: 20px;
}
}
@media (max-width: 480px) {
.form_wrapper {
padding: 24px;
gap: 24px;
}
.form_wrapper .form_img .page_content .page_title {
font-size: 34px;
line-height: 36px;
margin: 0 0 14px;
}
.form_wrapper .form_content_wrapper .form_title {
font-size: 32px;
}
}
@media (max-width: 360px) {
.form_wrapper .form_img .page_content .page_title {
font-size: 30px;
line-height: 32px;
}
.form_wrapper .form_content_wrapper .form_title {
font-size: 28px;
}
}
#signupForm .intl-tel-input,
#signupForm .iti {
width: 100%;
}
#signupForm .iti__selected-flag {
padding: 0 11px 0 23px;
color: #fff;
}
#signupForm .form_wrapper .form_content_wrapper form .form_input #mobile_code {
padding-left: 110px !important;
}
#signupForm .iti--separate-dial-code .iti__selected-flag {
background-color: transparent;
font-weight: 600;
font-size: 14px;
}
#signupForm .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
background-color: transparent;
}
#signupForm .iti__arrow {
border: none;
background-image: url("../image/down-arrow.svg");
background-size: contain;
width: 10px;
height: 6px;
background-repeat: no-repeat;
background-position: center;
}
#signupForm .iti__arrow.iti__arrow--up {
transform: rotate(180deg);
}
#signupForm .iti__country-list {
left: 0;
width: 35vw;
max-width: 35vw;
}
@media (max-width: 1399px) {
#signupForm .iti__country-list {
width: 43vw;
max-width: 43vw;
}
}
@media (max-width: 1299px) {
#signupForm .iti__country-list {
width: 42vw;
max-width: 42vw;
}
}
@media (max-width: 1199px) {
#signupForm .iti__country-list {
width: 40vw;
max-width: 40vw;
}
}
@media (max-width: 991px) {
#signupForm .iti__country-list {
width: 86vw;
max-width: 86vw;
}
}
/* =============== FORM-PAGE END =============== */
/* =============== HEADER START =============== */
header {
position: sticky;
top: 0;
background-color: var(--white-color);
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
z-index: 9;
}
header.header_scroll {
box-shadow: 4px 4px 7.2px -2px #0000000f;
}
header .header_wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
padding: 32px 0;
}
header .header_wrapper .logo {
max-width: 94px;
height: auto;
}
header .header_wrapper .profile_img {
max-width: 64px;
max-height: 64px;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
position: relative;
}
header .header_wrapper .profile_img .notification {
width: 10px;
height: 10px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
background-color: var(--red-color);
position: absolute;
top: 0;
right: 5px;
}
header .mobile_header .mobile_header_header_wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
padding: 28px 0 20px;
}
header .mobile_header .logo h1 {
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
text-transform: uppercase;
color: var(--primary-color);
}
header .mobile_header .header_content {
display: flex;
align-items: center;
gap: 12px;
}
.custom_select_wrapper {
position: relative;
width: 100%;
}
.custom_select_wrapper select {
font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
line-height: 100%;
color: var(--text-color);
border: 1px solid #31313166;
padding: 8px 44px 8px 22px;
border-radius: 24px;
background: none;
width: fit-content;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
.custom_select_wrapper .select_arrow {
position: absolute;
top: 50%;
right: 23px;
transform: translateY(-50%);
width: 18px;
height: 18px;
background-image: url("../image/dark-down-arrow.svg");
background-repeat: no-repeat;
background-size: contains;
pointer-events: none;
}
header .mobile_header .page_title {
display: flex;
align-items: center;
gap: 24px;
font-family: var(--font-family);
font-weight: 500;
font-size: 20px;
color: var(--primary-color);
}
header .mobile_header .page_title .icon_wrapper {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-color);
}
header .mobile_header .header_content .account_icon {
min-width: 38px;
height: 38px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--primary-color);
color: var(--white-color);
}
header .mobile_header .header_content account_icon svg {
max-width: 16px;
}
@media (min-width: 481px) {
header .mobile_header {
display: none;
}
}
@media (max-width: 767px) {
header .header_wrapper .profile_img {
max-width: 50px;
max-height: 50px;
}
}
@media (max-width: 480px) {
header {
background-color: var(--off-white-color);
}
header.header_shadow {
box-shadow: 4px 4px 7.2px -2px #0000000f;
background-color: var(--white-color);
}
header .desktop_header {
display: none;
}
}
@media (max-width: 360px) {
header .mobile_header .page_title {
gap: 15px;
font-size: 16px;
}
}
/* =============== HEADER END =============== */
/* =============== FOOTER START =============== */
footer .footer_wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
padding: 38px 0;
}
footer .footer_wrapper p,
footer .footer_wrapper a {
font-family: var(--font-family);
font-weight: 300;
font-size: 16px;
color: var(--text-color);
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
footer .footer_wrapper a:hover {
color: var(--primary-color);
}
footer .footer_wrapper ul {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}
footer .footer_wrapper ul li:not(:first-child) {
padding-left: 8px;
}
footer .footer_wrapper ul li:not(:last-child) {
padding-right: 8px;
border-right: 1px solid var(--text-color);
}
@media (max-width: 480px) {
footer {
display: none;
}
}
/* =============== FOOTER END =============== */
/* =============== TOTAL-EXPENSE START =============== */
#totalExpense {
margin: 24px 0 48px;
}
#totalExpense .total_expense_wrapper {
background-color: var(--primary-color);
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
}
#totalExpense .total_expense_wrapper .total_expense_box {
background-image: url("../image/bg-vector.png");
background-repeat: no-repeat;
background-size: cover;
background-position: left center;
padding: 10px 122px 0 162px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}
#totalExpense .total_expense_wrapper .total_expense_content {
display: flex;
align-items: center;
gap: 32px;
}
#totalExpense .total_expense_wrapper .total_expense_content .total_expense_title {
font-family: var(--font-family);
font-weight: 500;
font-size: 28px;
color: var(--white-color);
}
#totalExpense .total_expense_wrapper .total_expense_content .total_expense_amount {
font-family: var(--font-family);
font-weight: 700;
font-size: 64px;
color: var(--white-color);
}
@media (max-width: 1199px) {
#totalExpense .total_expense_wrapper .total_expense_box {
padding: 10px 80px 0 100px;
}
}
@media (max-width: 991px) {
#totalExpense {
margin: 24px 0 38px;
}
#totalExpense .total_expense_wrapper .total_expense_box {
padding: 10px 50px 0;
}
}
@media (max-width: 767px) {
#totalExpense .total_expense_wrapper .total_expense_img {
order: 2;
}
#totalExpense .total_expense_wrapper .total_expense_content {
gap: 4px;
flex-direction: column;
}
#totalExpense .total_expense_wrapper .total_expense_box {
padding: 0 30px;
}
#totalExpense .total_expense_wrapper .total_expense_content .total_expense_title br {
display: none;
}
#totalExpense .total_expense_wrapper .total_expense_content .total_expense_title {
font-size: 24px;
}
#totalExpense .total_expense_wrapper .total_expense_content .total_expense_amount {
font-size: 50px;
}
}
@media (max-width: 480px) {
#totalExpense {
margin: 35px 0 24px;
}
#totalExpense .total_expense_wrapper .total_expense_content .total_expense_title {
font-weight: 300;
font-size: 17px;
}
#totalExpense .total_expense_wrapper .total_expense_content .total_expense_amount {
font-size: 36px;
}
#totalExpense .total_expense_wrapper .total_expense_box {
padding: 0 24px;
align-items: end;
}
#totalExpense .total_expense_wrapper .total_expense_img {
order: 2;
margin: -30px 0 0;
}
#totalExpense .total_expense_wrapper .total_expense_content {
gap: 4px;
flex-direction: column;
padding: 18px 0;
margin: auto;
}
}
@media (max-width: 360px) {
#totalExpense {
margin: 24px 0;
}
#totalExpense .total_expense_wrapper .total_expense_img {
margin: -30px -20px 0;
}
}
/* =============== TOTAL-EXPENSE END =============== */
/* =============== MONTHLY-EXPENSES START =============== */
#monthlyExpenses {
margin: 0 0 26px;
}
#monthlyExpenses .monthly_expenses_wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
padding: 0 36px;
}
#monthlyExpenses .monthly_expenses_wrapper .monthly_expenses_box {
background-color: var(--off-white-color);
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border-color);
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 72px;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#monthlyExpenses .monthly_expenses_wrapper .monthly_expenses_box:hover {
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
#monthlyExpenses .monthly_expenses_box .monthly_expenses_amount {
font-family: var(--font-family);
font-weight: 700;
font-size: 36px;
color: var(--primary-color);
}
#monthlyExpenses .monthly_expenses_box .month_wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
color: var(--text-color);
}
#monthlyExpenses .monthly_expenses_box .month_wrapper .month_name {
font-family: var(--font-family);
font-weight: 500;
font-size: 28px;
text-transform: capitalize;
}
#monthlyExpenses .monthly_expenses_box .month_wrapper .icon_wrapper {
max-width: 28px;
max-height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 1299px) {
#monthlyExpenses .monthly_expenses_wrapper {
gap: 30px;
}
}
@media (max-width: 1199px) {
#monthlyExpenses .monthly_expenses_wrapper {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 991px) {
#monthlyExpenses .monthly_expenses_wrapper {
padding: 0;
}
#monthlyExpenses .monthly_expenses_wrapper .monthly_expenses_box {
padding: 18px;
gap: 45px;
}
#monthlyExpenses .monthly_expenses_box .monthly_expenses_amount {
font-size: 30px;
}
#monthlyExpenses .monthly_expenses_box .month_wrapper .month_name {
font-size: 24px;
}
}
@media (max-width: 767px) {
#monthlyExpenses .monthly_expenses_wrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
#monthlyExpenses {
margin: 0 0 19px;
}
#monthlyExpenses .monthly_expenses_wrapper {
grid-template-columns: 1fr;
gap: 8px;
}
#monthlyExpenses .monthly_expenses_wrapper .monthly_expenses_box {
gap: 30px;
flex-direction: row;
background-color: var(--white-color);
border: none;
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
-o-border-radius: 12px;
}
#monthlyExpenses .monthly_expenses_box .month_wrapper .icon_wrapper {
display: none;
}
#monthlyExpenses .monthly_expenses_box .monthly_expenses_amount {
font-weight: 500;
font-size: 16px;
order: 2;
color: var(--text-color);
}
#monthlyExpenses .monthly_expenses_box .month_wrapper .month_name {
font-size: 16px;
}
}
/* =============== MONTHLY-EXPENSES END =============== */
/* =============== PAGE-TITLE START =============== */
#pageTitle .page_title_wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 50px;
margin: 40px 0 24px;
}
#pageTitle .page_title_wrapper .page_title {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
#pageTitle .page_title_wrapper .page_title .icon_wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: var(--text-color);
}
#pageTitle .page_title_wrapper .page_title .title_text {
font-family: var(--font-family);
font-weight: 500;
font-size: 32px;
color: var(--text-color);
}
#pageTitle .page_title_wrapper .page_title_btn {
display: flex;
align-items: center;
gap: 24px;
}
#pageTitle .page_title_wrapper .page_title_btn .export_btn,
#pageTitle .page_title_wrapper .page_title_btn .create_btn {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
border-width: 1px;
border-style: solid;
border-color: var(--primary-color);
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#pageTitle .page_title_wrapper .page_title_btn .export_btn svg,
#pageTitle .page_title_wrapper .page_title_btn .create_btn svg {
width: 18px;
height: 18px;
}
#pageTitle .page_title_wrapper .page_title_btn .export_btn {
color: var(--text-color);
background-color: transparent;
padding: 15px 23px;
}
#pageTitle .page_title_wrapper .page_title_btn .export_btn:hover {
color: var(--white-color);
background-color: var(--primary-color);
}
#pageTitle .page_title_wrapper .page_title_btn .create_btn {
color: var(--white-color);
background-color: var(--primary-color);
padding: 15px 35px;
}
#pageTitle .page_title_wrapper .page_title_btn .create_btn:hover {
color: var(--black-color);
background-color: transparent;
border-color: var(--primary-color);
}
@media (max-width: 767px) {
#pageTitle .page_title_wrapper {
align-items: start;
gap: 20px;
flex-direction: column;
}
}
@media (max-width: 480px) {
#pageTitle {
display: none;
}
}
/* =============== PAGE-TITLE END =============== */
/* =============== EXPENSE START =============== */
#expense {
margin: 24px 0 48px;
}
#expense .expense_wrapper {
background-color: var(--primary-color);
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
}
#expense .expense_wrapper .expense_box {
background-image: url("../image/bg-vector.png");
background-repeat: no-repeat;
background-size: cover;
background-position: left center;
padding: 10px 120px 0 90px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}
#expense .expense_wrapper .expense_content {
display: flex;
align-items: center;
flex-direction: column;
gap: 5px;
}
#expense .expense_wrapper .expense_content .expense_title {
font-family: var(--font-family);
font-weight: 500;
font-size: 28px;
color: var(--white-color);
}
#expense .expense_wrapper .expense_content .expense_amount {
font-family: var(--font-family);
font-weight: 700;
font-size: 64px;
color: var(--white-color);
}
#expense.expense_page .mobile_chart_wrapper {
opacity: 0;
max-height: 0;
/* Start with no visible height */
user-select: none;
pointer-events: none;
overflow: hidden;
/* Prevents content from overflowing */
transition: all 400ms ease-in-out;
/* Smooth transition for opacity and max-height */
}
#expense.expense_page.active .mobile_chart_wrapper {
opacity: 1;
max-height: 500px;
/* Set a max height value that suits your content size */
user-select: auto;
pointer-events: all;
}
@media (max-width: 1199px) {
#expense .expense_wrapper .expense_box {
padding: 10px 80px 0 100px;
}
}
@media (max-width: 991px) {
#expense {
margin: 24px 0 38px;
}
#expense .expense_wrapper .expense_box {
padding: 10px 50px 0;
}
}
@media (max-width: 767px) {
#expense .expense_wrapper .expense_img {
order: 2;
}
#expense .expense_wrapper .expense_content {
gap: 4px;
flex-direction: column;
}
#expense .expense_wrapper .expense_box {
padding: 10px 30px 0;
}
#expense .expense_wrapper .expense_content .expense_title br {
display: none;
}
#expense .expense_wrapper .expense_content .expense_title {
font-size: 24px;
}
#expense .expense_wrapper .expense_content .expense_amount {
font-size: 50px;
}
}
@media (min-width: 481px) {
#expense.expense_page .expense_amount .icon_wrapper {
display: none;
}
}
@media (max-width: 480px) {
#expense {
margin: 50px 0 16px;
}
#expense .expense_wrapper .expense_content .expense_title {
font-weight: 300;
font-size: 15px;
}
#expense .expense_wrapper .expense_content .expense_amount {
font-size: 36px;
}
#expense .expense_wrapper .expense_box {
padding: 0 0 0 24px;
align-items: end;
gap: 10px;
}
#expense .expense_wrapper .expense_img {
order: 2;
margin: -60px 0 0;
}
#expense .expense_wrapper .expense_content {
gap: 4px;
flex-direction: column;
padding: 35px 0;
margin: auto 0;
align-items: start;
}
#expense.expense_page .expense_amount {
display: flex;
align-items: center;
gap: 13px;
}
#expense.expense_page .expense_amount .icon_wrapper {
width: 13px;
height: 13px;
display: flex;
flex-direction: column;
align-items: center;
}
#expense.expense_page .expense_amount .icon_wrapper svg {
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#expense.expense_page.active .icon_wrapper svg {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
}
@media (max-width: 360px) {
#expense .expense_wrapper .expense_box {
padding: 0 0 0 15px;
}
#expense .expense_wrapper .expense_content {
padding: 30px 0;
}
}
/* =============== EXPENSE END =============== */
/* =============== EXPENSE-BOX START =============== */
#expenseBox {
margin: 0 0 60px;
}
#expenseBox .expense_wrapper {
display: flex;
gap: 40px;
}
#expenseBox .expense_chart {
width: calc(35% - 20px);
padding: 25px;
background-color: var(--off-white-color);
border: 1px solid var(--border-color);
border-radius: 16px;
overflow: visible;
position: relative;
height: fit-content;
}
#expenseBox .expense_chart #pie-chart {
margin: 0;
padding: 0;
height: 330px;
width: 100%;
}
#main-chart {
margin: 0;
padding: 0;
height: 330px;
width: 100%;
}
#expenseBox .expense_box_wrapper {
width: calc(65% - 20px);
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
#expenseBox .expense_box_wrapper .expense_box {
background-color: var(--white-color);
border: 1px solid var(--border-color);
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
padding: 24px;
display: flex;
justify-content: space-between;
gap: 50px;
align-items: start;
height: fit-content;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#expenseBox .expense_box_wrapper .expense_box:hover {
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
#expenseBox .expense_box .expense_box_content {
display: flex;
flex-direction: column;
gap: 8px;
}
#expenseBox .expense_box_content .expense_box_title {
font-family: var(--font-family);
font-weight: 700;
font-size: 20px;
color: var(--primary-color);
}
#expenseBox .expense_box_content .expense_box_price {
font-family: var(--font-family);
font-weight: 500;
font-size: 36px;
color: var(--text-color);
}
#expenseBox .expense_box .expense_box_location {
display: flex;
gap: 4px;
font-family: var(--font-family);
font-weight: 300;
font-size: 14px;
color: var(--text-color);
margin-top: 5px;
width: 100px;
text-align: start;
}
#expenseBox .expense_box .expense_box_location .location_icon {
width: 18px;
height: 18px;
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 1299px) {
#expenseBox .expense_wrapper {
gap: 30px;
}
}
@media (max-width: 1199px) {
#expenseBox .expense_wrapper {
flex-direction: column;
}
#expenseBox .expense_chart,
#expenseBox .expense_box_wrapper {
width: 100%;
}
#expenseBox .expense_chart {
padding: 0 25px;
}
#expenseBox .expense_chart #pie-chart {
height: 500px;
}
#main-chart {
height: 500px;
}
}
@media (max-width: 991px) {
#expenseBox {
margin: 0 0 40px;
}
}
@media (max-width: 767px) {
#expenseBox {
margin: 0 0 40px;
}
#expenseBox .expense_box .expense_box_content {
gap: 2px;
}
#expenseBox .expense_box_wrapper .expense_box {
gap: 2px;
flex-direction: column;
}
}
@media (max-width: 480px) {
#expenseBox {
margin: 0 0 20px;
}
#expenseBox .expense_chart {
display: none;
}
#expenseBox .expense_wrapper,
#expenseBox .expense_box_wrapper {
gap: 16px;
}
#expenseBox .expense_box_wrapper .expense_box {
border: none;
padding: 16px;
}
#expenseBox .expense_box_content .expense_box_title {
font-size: 16px;
}
#expenseBox .expense_box_content .expense_box_price {
font-size: 32px;
}
#expenseBox .expense_box .expense_box_location {
width: auto;
text-align: start;
}
}
@media (max-width: 360px) {
#expenseBox .expense_box_wrapper {
grid-template-columns: 1fr;
}
}
/* =============== EXPENSE-BOX END =============== */
/* =============== PAGE-BUTTON START =============== */
#pageButton {
position: sticky;
bottom: 0;
z-index: 2;
padding: 32px 0;
background-color: var(--mobile-background);
}
#pageButton .page_btn {
display: flex;
align-items: center;
gap: 15px;
}
#pageButton .page_btn .export_btn,
#pageButton .page_btn .create_trip_btn {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
border-width: 1px;
border-style: solid;
border-color: var(--primary-color);
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
width: 100%;
}
#pageButton .page_btn .export_btn svg,
#pageButton .page_btn .create_trip_btn svg {
width: 18px;
height: 18px;
}
#pageButton .page_btn .export_btn {
color: var(--text-color);
background-color: transparent;
padding: 15px 23px;
}
#pageButton .page_btn .export_btn:hover {
color: var(--white-color);
background-color: var(--primary-color);
}
#pageButton .page_btn .create_trip_btn {
color: var(--white-color);
background-color: var(--primary-color);
padding: 15px 35px;
}
#pageButton .page_btn .create_trip_btn:hover {
color: var(--black-color);
background-color: transparent;
border-color: var(--primary-color);
}
@media (min-width: 481px) {
#pageButton {
display: none;
}
}
@media (max-width: 360px) {
#pageButton {
padding: 15px 0;
}
#pageButton .page_btn {
gap: 8px;
}
#pageButton .page_btn .export_btn,
#pageButton .page_btn .create_trip_btn {
gap: 4px;
font-size: 12px;
}
#pageButton .page_btn .export_btn {
padding: 10px 13px;
}
#pageButton .page_btn .create_trip_btn {
padding: 10px 15px;
}
}
/* =============== PAGE-BUTTON END =============== */
/* =============== POPUP START =============== */
.popup {
display: none;
background-color: var(--white-color);
padding: 40px;
border-radius: 24px;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
-ms-border-radius: 24px;
-o-border-radius: 24px;
overflow: hidden;
width: 650px;
height: fit-content;
position: fixed;
inset: 0;
margin: auto;
z-index: 999;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
overflow-y: scroll;
max-height: 90dvh;
}
.popup .popup_content {
width: 100%;
}
.popup .popup_title {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
margin: 0 0 24px;
font-family: var(--font-family);
font-weight: 700;
font-size: 32px;
color: var(--text-color);
}
.popup .popup_title.mobile {
display: none;
}
.popup .popup_title .close_btn {
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
color: var(--gray-color);
cursor: pointer;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
.popup .popup_title .close_btn:hover {
color: var(--text-color);
}
.popup .popup_btns {
display: flex;
flex-direction: column;
gap: 8px;
}
.popup .popup_btns .popup_btn {
display: flex;
gap: 8px;
width: 100%;
background-color: var(--off-white-color);
border: 1px solid var(--border-color);
padding: 20px;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: var(--text-color);
}
.popup .popup_btns .popup_btn .icon_wrapper {
width: 23px;
height: 23px;
display: flex;
justify-content: center;
align-items: center;
color: var(--primary-color);
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
.popup .popup_btns .popup_btn:hover {
background-color: var(--primary-color);
border: 1px solid var(--primary-color);
color: var(--white-color);
}
.popup .popup_btns .popup_btn:hover .icon_wrapper {
color: var(--white-color);
}
.popup#createTripPopup .popup_title {
padding: 0 0 16px;
margin: 0 0 36px;
border-bottom: 1px solid var(--border-color);
}
.popup #createTripForm .input_field {
margin-bottom: 20px;
}
.popup #createTripForm .input_field label {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
text-transform: capitalize;
color: var(--black-color);
margin-bottom: 14px;
}
.popup #createTripForm .input_field label .icon_wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
}
.popup #createTripForm .input_field input {
background-color: transparent;
border: 1px solid var(--border-color);
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
padding: 23px 20px;
font-family: var(--font-family);
font-weight: 300;
font-size: 14px;
color: var(--text-color);
width: 100%;
}
.popup #createTripForm .input_field input::placeholder {
color: var(--text-color);
opacity: 1;
}
.popup #createTripForm button {
padding: 20px;
width: 100%;
margin-top: 10px;
background-color: var(--primary-color);
color: var(--white-color);
border: 1px solid var(--primary-color);
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
text-transform: capitalize;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
.popup #createTripForm button:hover {
background-color: var(--primary-hover-color);
color: var(--white-color);
border-color: var(--primary-hover-color);
}
@media (max-width: 767px) {
.popup {
width: 80%;
}
}
@media (max-width: 575px) {
.popup {
width: calc(100% - 48px);
padding: 30px;
}
.popup .popup_title {
font-size: 26px;
}
}
@media (max-width: 480px) {
#exportPopup {
max-width: 238px;
padding: 20px;
}
.popup .popup_title {
font-size: 22px;
margin: 0 0 16px;
}
.popup .popup_title.desktop {
display: none;
}
.popup .popup_title.mobile {
display: flex;
}
#exportPopup .popup_title {
font-weight: 500;
font-size: 18px;
}
#exportPopup .close_btn {
width: 23px;
height: 23px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--off-white-color);
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
color: var(--text-color);
}
#exportPopup .close_btn svg {
width: 9px;
height: 9px;
}
#exportPopup .popup_btns .popup_btn {
padding: 8px;
font-weight: 300;
font-size: 14px;
gap: 4px;
border: none;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
}
.popup .popup_btns .popup_btn {
padding: 15px;
font-size: 14px;
}
.popup .popup_title .close_btn {
width: 26px;
height: 26px;
}
.popup#createTripPopup {
display: none !important;
}
}
@media (max-width: 360px) {
.popup {
padding: 20px;
}
.popup .popup_title {
font-size: 18px;
}
.popup .popup_title .close_btn {
width: 24px;
height: 24px;
}
.popup .popup_btns .popup_btn {
padding: 15px;
font-size: 14px;
}
}
@media (max-width: 320px) {
#exportPopup {
width: calc(100% - 48px);
}
}
/* PROFILE POPUP */
#ProfileSetting {
width: 860px;
}
#ProfileSetting .popup_title {
margin-bottom: 30px;
}
#ProfileSetting .profile_content {
display: flex;
align-items: center;
gap: 66px;
}
#ProfileSetting .profile_fields {
display: flex;
flex-direction: column;
gap: 24px;
width: 480px;
}
#ProfileSetting .profile_field .profile_field_title {
margin-bottom: 14px;
font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--text-color);
}
#ProfileSetting .profile_field .popup .popup_btns {
gap: 16px;
}
#ProfileSetting .profile_info {
text-align: center;
width: calc(100% - 546px);
}
#ProfileSetting .profile_info .profile_img_wrapper {
max-width: 160px;
max-height: 160px;
aspect-ratio: 1 / 1;
object-fit: cover;
margin: auto;
display: inline-block;
margin-bottom: 18px;
}
#ProfileSetting .profile_info .username {
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
color: var(--text-color);
margin-bottom: 8px;
}
#ProfileSetting .profile_info .edit_profile {
font-family: var(--font-family);
font-weight: 300;
font-size: 12px;
color: var(--text-color);
display: flex;
justify-content: center;
margin-bottom: 32px;
}
#ProfileSetting .profile_info .edit_profile .icon_wrapper {
width: 15px;
height: 15px;
display: flex;
justify-content: center;
align-items: center;
}
#ProfileSetting .profile_info .profile_btn {
display: flex;
flex-direction: column;
gap: 20px;
}
#ProfileSetting .profile_info .popup_logout_btn {
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
padding: 20px 80px;
background-color: var(--primary-color);
color: var(--white-color);
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#ProfileSetting .profile_info .popup_logout_btn:hover {
background-color: var(--primary-hover-color);
color: var(--white-color);
}
#ProfileSetting .profile_info .popup_delete_account {
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
color: var(--red-color);
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#ProfileSetting .profile_info .popup_delete_account:hover {
color: var(--dark-red-color);
}
@media (max-width: 991px) {
#ProfileSetting {
width: calc(100% - 48px);
}
#ProfileSetting .popup_title {
margin-bottom: 20px;
}
#ProfileSetting .profile_content {
gap: 40px;
}
#ProfileSetting .profile_field .profile_field_title {
margin-bottom: 8px;
}
#ProfileSetting .profile_fields {
gap: 18px;
width: calc(60% - 20px);
}
#ProfileSetting .profile_info {
width: calc(40% - 20px);
}
.popup .popup_btns .popup_btn {
padding: 16px;
}
}
@media (max-width: 767px) {
#ProfileSetting .profile_info .popup_logout_btn {
padding: 20px 38px;
}
}
@media (max-width: 575px) {
#ProfileSetting .profile_content {
gap: 20px;
}
#ProfileSetting .profile_fields {
gap: 18px;
width: calc(60% - 10px);
}
#ProfileSetting .profile_info {
width: calc(40% - 10px);
}
#ProfileSetting .profile_info .profile_img_wrapper {
margin-bottom: 15px;
}
#ProfileSetting .profile_info .edit_profile {
margin-bottom: 25px;
}
#ProfileSetting .profile_info .popup_logout_btn {
padding: 15px 30px;
}
#ProfileSetting .profile_info .popup_logout_btn,
#ProfileSetting .profile_info .popup_delete_account {
font-size: 14px;
}
}
@media (max-width: 480px) {
#ProfileSetting .profile_content {
flex-direction: column;
}
#ProfileSetting .profile_fields,
#ProfileSetting .profile_info {
width: 100%;
}
#ProfileSetting .profile_info {
width: 100%;
margin-bottom: 30px;
}
}
/* CHANGE-PASSWORD-POPUP */
#changePassword,
#resetPasswordPopup,
#forgotPasswordPopup {
width: 560px;
}
#changePasswordForm label,
#resetPasswordForm label,
#forgotPasswordPopup label {
font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--text-color);
margin-bottom: 14px;
display: inline-block;
}
#changePasswordForm .input_field,
#resetPasswordForm .input_field,
#forgotPasswordPopup .input_field {
width: 100%;
display: block;
margin: 0 0 20px;
position: relative;
}
#changePasswordForm .input_field .password_icon_wrapper,
#resetPasswordForm .input_field .password_icon_wrapper,
#forgotPasswordPopup .input_field .password_icon_wrapper {
position: absolute;
top: 50%;
left: auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
right: 20px;
color: var(--text-color);
cursor: pointer;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
max-width: 24px;
max-height: 24px;
}
#changePasswordForm .input_field input,
#resetPasswordForm .input_field input,
#forgotPasswordPopup .input_field input {
width: 100%;
font-family: var(--font-family);
font-weight: 300;
font-size: 14px;
color: var(--text-color);
border: 1px solid var(--border-color);
padding: 23px 20px;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
}
#changePasswordForm .input_field input::placeholder,
#resetPasswordForm .input_field input::placeholder,
#forgotPasswordPopup .input_field input::placeholder {
color: var(--text-color);
opacity: 1;
}
#changePasswordForm .input_field.icon_input input,
#resetPasswordForm .input_field.icon_input input,
#forgotPasswordPopup .input_field.icon_input input {
padding-left: 52px;
}
#changePasswordForm .input_field.password input,
#resetPasswordForm .input_field.password input,
#forgotPasswordPopup .input_field.password input {
padding-right: 52px;
}
#changePasswordForm .forgot_password_wrapper,
#resetPasswordForm .forgot_password_wrapper,
#forgotPasswordPopup .forgot_password_wrapper {
text-align: right;
margin-bottom: 16px;
}
#changePasswordForm .forgot_password_popup_link,
#resetPasswordForm .forgot_password_popup_link,
#forgotPasswordPopup .forgot_password_popup_link {
font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--primary-color);
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#changePasswordForm .forgot_password:hover,
#resetPasswordForm .forgot_password:hover,
#forgotPasswordPopup .forgot_password:hover {
color: var(--primary-hover-color);
}
#changePasswordForm .button_wrapper button,
#resetPasswordForm .button_wrapper button,
#forgotPasswordPopup .button_wrapper button {
margin-top: 16px;
padding: 20px;
width: 100%;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
text-align: center;
background-color: var(--primary-color);
color: var(--white-color);
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#changePasswordForm .button_wrapper button:hover,
#resetPasswordForm .button_wrapper button:hover,
#forgotPasswordPopup .button_wrapper button:hover {
background-color: var(--primary-hover-color);
color: var(--white-color);
}
@media (max-width: 767px) {
#changePassword,
#resetPasswordPopup,
#forgotPasswordPopup {
width: calc(100% - 48px);
}
#changePasswordForm label,
#resetPasswordForm label,
#forgotPasswordPopupForm label {
font-size: 14px;
margin-bottom: 10px;
}
#changePasswordForm .input_field input,
#resetPasswordForm .input_field input,
#forgotPasswordPopupForm .input_field input {
padding: 20px;
}
#changePasswordForm .input_field,
#resetPasswordForm .input_field,
#forgotPasswordPopupForm .input_field {
margin: 0 0 16px;
}
#changePasswordForm .forgot_password_popup_link,
#resetPasswordForm .forgot_password_popup_link,
#forgotPasswordPopupForm .forgot_password_popup_link {
font-size: 14px;
}
#changePasswordForm .button_wrapper button,
#resetPasswordForm .button_wrapper button,
#forgotPasswordPopupForm .button_wrapper button {
margin-top: 14px;
padding: 16px;
font-size: 14px;
}
}
/* =============== POPUP END =============== */
/* =============== MOBILE-HEADER START =============== */
#mobileHeader {
background-color: var(--primary-color);
background-image: url("../image/bg-vector.png");
background-repeat: no-repeat;
background-size: cover;
background-position: left center;
margin: 0 0 32px;
padding: 42px 0 32px;
}
#mobileHeader .mobile_header_wrapper .icon_wrapper {
width: 20px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
color: var(--white-color);
}
#mobileHeader.mobile_profile_header .mobile_header_wrapper .icon_wrapper {
margin-bottom: 35px;
}
#mobileHeader .mobile_header_wrapper .time {
margin: 17px 0 8px;
font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
color: var(--white-color);
}
#mobileHeader .mobile_header_wrapper .page_title {
font-family: var(--font-family);
font-weight: 700;
font-size: 32px;
color: var(--white-color);
}
#mobileHeader .mobile_header_wrapper .page_description {
font-family: var(--font-family);
font-weight: 300;
font-size: 12px;
color: var(--white-color);
margin-top: 8px;
}
@media (min-width: 481px) {
#mobileHeader.mobile {
display: none;
}
}
@media (max-width: 320px) {
#mobileHeader .mobile_header_wrapper .page_description br {
display: none;
}
}
/* =============== MOBILE-HEADER END =============== */
/* =============== CREATE-TRIP-FORM START =============== */
#createTripFormWrapper #createTripForm .input_field {
margin-bottom: 24px;
}
#createTripFormWrapper #createTripForm .input_field label {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
text-transform: capitalize;
color: var(--black-color);
margin-bottom: 8px;
}
#createTripFormWrapper #createTripForm .input_field label .icon_wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
}
#createTripFormWrapper #createTripForm .input_field input {
background-color: transparent;
border: 1px solid var(--border-color);
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
padding: 16px;
font-family: var(--font-family);
font-weight: 300;
font-size: 12px;
color: var(--text-color);
width: 100%;
}
#createTripFormWrapper #createTripForm .input_field input::placeholder {
color: var(--text-color);
opacity: 1;
}
#createTripFormWrapper #createTripForm .button_wrapper {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 32px 24px;
background-color: var(--mobile-background);
}
#createTripFormWrapper #createTripForm button {
padding: 15px;
width: 100%;
background-color: var(--primary-color);
color: var(--white-color);
border: 1px solid var(--primary-color);
font-family: var(--font-family);
font-weight: 700;
font-size: 14px;
text-transform: capitalize;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#createTripFormWrapper #createTripForm button:hover {
background-color: var(--primary-hover-color);
color: var(--white-color);
border-color: var(--primary-hover-color);
}
/* =============== CREATE-TRIP-FORM END =============== */
/* =============== MANAGE-EXPENSE START =============== */
#manageExpense .manage_expense_wrapper {
width: 80%;
margin: auto;
}
#manageExpense .manage_expense_wrapper .manage_expense_box_wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 48px;
}
#manageExpense .manage_expense_wrapper .manage_expense_box {
background-color: var(--white-color);
border: 1px solid var(--border-color);
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
padding: 24px;
display: flex;
justify-content: space-between;
gap: 50px;
align-items: start;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#manageExpense .manage_expense_wrapper .manage_expense_box:hover {
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
#manageExpense .manage_expense_box .manage_expense_box_content {
display: flex;
flex-direction: column;
gap: 13px;
}
#manageExpense .manage_expense_box_content .manage_expense_subtitle {
font-family: var(--font-family);
font-weight: 300;
font-size: 20px;
color: var(--text-color);
}
#manageExpense .manage_expense_box_content .manage_expense_title {
font-family: var(--font-family);
font-weight: 500;
font-size: 28px;
color: var(--text-color);
}
#manageExpense .manage_expense_price_wrapper {
display: flex;
flex-direction: column;
align-items: end;
gap: 9px;
}
#manageExpense .manage_expense_price_wrapper .icon_wrapper {
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
color: var(--dark-red-color);
cursor: pointer;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#manageExpense .manage_expense_price_wrapper .icon_wrapper:hover {
transform: scale(1.3);
-webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3);
-o-transform: scale(1.3);
}
#manageExpense .manage_expense_price_wrapper .manage_expense_price {
font-family: var(--font-family);
font-weight: 700;
font-size: 36px;
color: var(--primary-color);
}
@media (max-width: 1299px) {
#manageExpense .manage_expense_wrapper .manage_expense_box_wrapper {
gap: 30px;
}
}
@media (max-width: 1199px) {
#manageExpense .manage_expense_wrapper {
width: 100%;
}
}
@media (max-width: 991px) {
#manageExpense .manage_expense_wrapper .manage_expense_box {
gap: 20px;
}
#manageExpense .manage_expense_box_content .manage_expense_subtitle {
font-size: 16px;
}
#manageExpense .manage_expense_box_content .manage_expense_title {
font-size: 22px;
}
#manageExpense .manage_expense_price_wrapper {
gap: 6px;
}
#manageExpense .manage_expense_price_wrapper .manage_expense_price {
font-size: 26px;
}
}
@media (max-width: 767px) {
#manageExpense .manage_expense_wrapper .manage_expense_box_wrapper {
grid-template-columns: 1fr;
gap: 20px;
}
#manageExpense .manage_expense_wrapper .manage_expense_box {
gap: 30px;
align-items: center;
padding: 18px;
}
#manageExpense .manage_expense_box .manage_expense_box_content {
gap: 10px;
}
#manageExpense .manage_expense_price_wrapper {
gap: 18px;
flex-direction: row;
align-items: center;
}
#manageExpense .manage_expense_price_wrapper .icon_wrapper {
order: 2;
}
}
@media (max-width: 480px) {
#manageExpense .manage_expense_wrapper .manage_expense_box_wrapper {
gap: 8px;
}
#manageExpense .manage_expense_wrapper .manage_expense_box {
background-color: var(--white-color);
border: none;
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
-o-border-radius: 12px;
padding: 12px 8px 12px 18px;
}
#manageExpense .manage_expense_box .manage_expense_box_content {
gap: 4px;
}
#manageExpense .manage_expense_box_content .manage_expense_subtitle {
font-size: 12px;
}
#manageExpense .manage_expense_box_content .manage_expense_title {
font-size: 16px;
}
#manageExpense .manage_expense_price_wrapper .manage_expense_price {
font-weight: 500;
font-size: 16px;
color: var(--text-color);
}
}
/* =============== MANAGE-EXPENSE END =============== */
/* =============== PROFILE-PAGE START =============== */
#ProfilePage .profile_info {
background-color: var(--white-color);
padding: 12px 16px;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 24px;
}
#ProfilePage .profile_info .profile_img {
max-width: 76px;
max-height: 76px;
aspect-ratio: 1 / 1;
object-fit: cover;
}
#ProfilePage .profile_info .profile_info_text {
display: flex;
flex-direction: column;
gap: 3px;
}
#ProfilePage .profile_info .profile_info_text .username {
font-family: var(--font-family);
font-weight: 700;
font-size: 18px;
color: var(--text-color);
}
#ProfilePage .profile_info .profile_info_text .edit_profile {
font-family: var(--font-family);
font-weight: 300;
font-size: 12px;
display: flex;
align-items: center;
color: var(--black-color);
}
#ProfilePage .profile_info .profile_info_text .edit_profile {
font-family: var(--font-family);
font-weight: 300;
font-size: 12px;
display: flex;
align-items: center;
color: var(--black-color);
}
#ProfilePage .profile_info .profile_info_text .edit_profile .icon_wrapper {
width: 15px;
height: 15px;
display: flex;
justify-content: center;
align-items: center;
color: var(--primary-color);
}
#ProfilePage .profile_fields {
display: flex;
flex-direction: column;
gap: 16px;
}
#ProfilePage .profile_fields .profile_field_title {
margin-bottom: 12px;
font-family: var(--font-family);
font-weight: 700;
font-size: 14px;
color: var(--text-color);
}
#ProfilePage .profile_fields .popup_btns {
display: flex;
flex-direction: column;
gap: 12px;
}
#ProfilePage .profile_fields .popup_btns .popup_btn {
border: 1px solid var(--text-color);
color: var(--text-color);
font-weight: 500;
font-size: 12px;
padding: 16px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
overflow: hidden;
}
#profileBtns {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 30px 0;
background-color: var(--mobile-background);
}
#profileBtns .profile_btns_wrapper {
display: flex;
flex-direction: column;
gap: 15px;
text-align: center;
}
#profileBtns .profile_btns_wrapper .logout_btn {
padding: 15px;
width: 100%;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
text-align: center;
background-color: var(--primary-color);
color: var(--white-color);
font-family: var(--font-family);
font-weight: 700;
font-size: 14px;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#profileBtns .profile_btns_wrapper .logout_btn:hover {
background-color: var(--primary-hover-color);
color: var(--white-color);
}
#profileBtns .profile_btns_wrapper .delete_account {
font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
color: var(--red-color);
}
#profileBtns .profile_btns_wrapper .delete_account:hover {
color: var(--dark-red-color);
}
.profile_popup {
display: none;
max-width: 270px;
background: #e5e5e5;
border-radius: 14px;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
-ms-border-radius: 14px;
-o-border-radius: 14px;
text-align: center;
justify-content: center;
align-items: center;
inset: 0;
margin: auto;
z-index: 999;
overflow: hidden;
position: absolute;
height: fit-content;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.profile_popup .profile_popup_title {
padding: 20px 20px;
font-family: var(--profile-popup-font-family);
font-weight: 600;
font-size: 17px;
line-height: 22px;
}
.profile_popup .profile_btns {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-around;
}
.profile_popup .profile_btns .profile_popup_btn {
padding: 11px 15px;
font-family: var(--profile-popup-font-family);
font-weight: 400;
font-size: 17px;
line-height: 22px;
color: var(--primary-color);
border-top: 1px solid #3c3c435c;
width: 50%;
}
.profile_popup .profile_btns .profile_popup_btn.close_btn {
font-weight: 600;
color: var(--red-color);
border-left: 1px solid #3c3c435c;
}
@media (min-width: 481px) {
#ProfilePage {
margin-top: 24px;
}
}
@media (max-width: 320px) {
.profile_popup {
max-width: calc(100% - 24px);
}
}
/* =============== PROFILE-PAGE END =============== */
/* =============== MOBILE-PROFILE-SETTING-FORMS START =============== */
.profile_setting_form_wrapper .profileForm_setting_form label {
margin-bottom: 8px;
font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
color: var(--black-color);
display: inline-block;
}
.profile_setting_form_wrapper .profileForm_setting_form .input_field {
width: 100%;
display: block;
margin: 0 0 16px;
position: relative;
}
.profile_setting_form_wrapper .profileForm_setting_form .input_field .password_icon_wrapper {
position: absolute;
top: 50%;
left: auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
right: 20px;
color: var(--text-color);
cursor: pointer;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
max-width: 24px;
max-height: 24px;
}
.profile_setting_form_wrapper .profileForm_setting_form .input_field .icon_wrapper {
position: absolute;
top: 50%;
left: auto;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
left: 20px;
color: var(--text-color);
cursor: pointer;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
max-width: 24px;
max-height: 24px;
}
.profile_setting_form_wrapper .profileForm_setting_form .input_field input {
width: 100%;
font-family: var(--font-family);
font-weight: 300;
font-size: 12px;
color: var(--text-color);
border: 1px solid var(--text-color);
padding: 16px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
}
.profile_setting_form_wrapper .profileForm_setting_form .input_field input::placeholder {
color: var(--text-color);
opacity: 1;
}
.profile_setting_form_wrapper .profileForm_setting_form .input_field.icon_input input {
padding-left: 52px;
}
.profile_setting_form_wrapper .profileForm_setting_form .input_field.password input {
padding-right: 52px;
}
.profile_setting_form_wrapper .profileForm_setting_form .forgot_password_wrapper {
text-align: right;
}
.profile_setting_form_wrapper .profileForm_setting_form .forgot_password {
font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
color: var(--primary-color);
margin-bottom: 16px;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
.profile_setting_form_wrapper .profileForm_setting_form .forgot_password:hover {
color: var(--primary-hover-color);
}
.profile_setting_form_wrapper .profileForm_setting_form .button_wrapper button {
padding: 15px;
width: 100%;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
text-align: center;
background-color: var(--primary-color);
color: var(--white-color);
font-family: var(--font-family);
font-weight: 700;
font-size: 14px;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
.profile_setting_form_wrapper .profileForm_setting_form .button_wrapper button:hover {
background-color: var(--primary-hover-color);
color: var(--white-color);
}
#mobileChangePassword #mobileChangePasswordForm .button_wrapper {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 32px 24px 64px;
background-color: var(--mobile-background);
}
#forgotPassword #forgotPasswordForm .button_wrapper {
margin-top: 24px;
}
#deleteAccount #deleteAccountForm .input_field input {
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
}
#deleteAccount #deleteAccountForm .checkbox_input_field_wrapper {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}
#deleteAccount #deleteAccountForm .check_box_wrapper {
display: flex;
gap: 8px;
max-width: 200px;
}
#deleteAccount #deleteAccountForm .check_box_wrapper input[type="checkbox"] {
position: relative;
border: 1px solid var(--text-color);
background: none;
cursor: pointer;
line-height: 0;
outline: 0;
padding: 0 !important;
vertical-align: text-top;
height: 16px;
min-width: 16px;
appearance: none;
-webkit-appearance: none;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#deleteAccount #deleteAccountForm .check_box_wrapper input[type="checkbox"]:hover {
opacity: 1;
}
#deleteAccount #deleteAccountForm .check_box_wrapper input[type="checkbox"]:checked {
background-color: var(--primary-color);
opacity: 1;
}
#deleteAccount #deleteAccountForm .check_box_wrapper input[type="checkbox"]:checked {
border-color: var(--primary-color);
}
#deleteAccount #deleteAccountForm .check_box_wrapper input[type="checkbox"]:before {
content: "";
position: absolute;
right: 52%;
top: 50%;
width: 2px;
height: 6px;
border: solid #fff;
border-width: 0 2px 2px 0;
margin: -1px -1px 0 -1px;
transform: rotate(45deg) translate(-50%, -50%);
z-index: 2;
}
#deleteAccount #deleteAccountForm .check_box_wrapper label {
margin: 0;
font-family: var(--font-family);
font-weight: 300;
font-size: 12px;
line-height: 17px;
color: var(--text-color);
}
#deleteAccount #deleteAccountForm .forgot_password {
font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
color: var(--primary-color);
margin: 0;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
width: fit-content;
}
#deleteAccount #deleteAccountForm .forgot_password:hover {
color: var(--primary-hover-color);
}
#deleteAccount #deleteAccountForm .button_wrapper {
margin-top: 15px;
}
/* =============== MOBILE-PROFILE-SETTING-FORMS END =============== */
/* =============== CREATE-TRIP-EXPENSES START =============== */
#createTripExpenses .create_trip_expenses_content {
margin: 40px auto 0;
width: 80%;
}
#createTripExpenses .images_input_wrapper {
display: flex;
align-items: center;
gap: 52px;
margin-bottom: 40px;
}
#createTripExpenses .file_input_wrapper {
width: 64%;
}
#createTripExpenses .upload-box .desktop {
border: 2px dashed #cbcbcb;
padding: 40px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
cursor: pointer;
border-radius: 24px;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
-ms-border-radius: 24px;
-o-border-radius: 24px;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#createTripExpenses .upload-box .desktop:hover {
background-color: #f9f9f9;
}
#createTripExpenses .upload-box .mobile {
display: none;
}
#createTripExpenses .upload-box svg {
width: 46px;
height: 51px;
margin-bottom: 10px;
}
#createTripExpenses .upload-box p {
margin: 0;
font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
color: var(--text-color);
}
#createTripExpenses .upload-box small {
margin-top: 12px;
font-family: var(--font-family);
font-weight: 300;
font-size: 12px;
color: var(--text-color);
}
#createTripExpenses small.mobile {
display: none;
margin-top: 8px;
font-family: var(--font-family);
font-weight: 300;
font-size: 10px;
color: var(--text-color);
}
#createTripExpenses #file-upload {
display: none;
}
#createTripExpenses .images_input_wrapper .images_wrapper {
display: flex;
align-items: center;
gap: 25px;
}
#createTripExpenses .images_wrapper .img_wrapper {
position: relative;
max-width: 125px;
}
#createTripExpenses .images_wrapper .img_wrapper .remove_btn {
position: absolute;
width: 27px;
height: 27px;
display: flex;
justify-content: center;
align-items: center;
top: -10px;
right: -10px;
cursor: pointer;
}
#createTripExpenses .input_field_wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
#createTripExpenses .input_field_wrapper .input_field label {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
text-transform: capitalize;
color: var(--text-color);
margin-bottom: 14px;
}
#createTripExpenses .input_field_wrapper .input_field label .icon_wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 18px;
height: 18px;
}
#createTripExpenses .input_field_wrapper .input_field .input_icon_wrapper {
position: relative;
}
#createTripExpenses .input_field_wrapper .input_field .input_icon_wrapper span {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
color: var(--text-color);
}
#createTripExpenses .input_field_wrapper .input_field input,
#createTripExpenses .input_field_wrapper .input_field select {
background-color: transparent;
border: 1px solid var(--border-color);
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
padding: 23px 20px;
font-family: var(--font-family);
font-weight: 300;
font-size: 14px;
color: var(--text-color);
width: 100%;
}
#createTripExpenses .input_field_wrapper .input_field .input_icon_wrapper input {
padding-left: 40px;
}
#createTripExpenses .input_field_wrapper .input_field input::placeholder {
color: var(--text-color);
opacity: 1;
}
#createTripExpenses .input_field_wrapper .input_field .select_wrapper {
position: relative;
width: 100%;
}
.select_wrapper select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
padding-right: 60px !important;
}
#createTripExpenses .input_field_wrapper .input_field .select_wrapper .select_arrow {
position: absolute;
top: 50%;
right: 23px;
transform: translateY(-50%);
width: 18px;
height: 18px;
background-image: url("../image/dark-down-arrow.svg");
background-repeat: no-repeat;
background-size: contains;
pointer-events: none;
}
#createTripExpenses .create_trip_btn {
padding: 20px;
width: 100%;
margin: 56px 0;
background-color: var(--primary-color);
color: var(--white-color);
border: 1px solid var(--primary-color);
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
text-transform: capitalize;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#createTripExpenses .create_trip_btn:hover {
background-color: var(--primary-hover-color);
border-color: var(--primary-hover-color);
color: var(--white-color);
}
@media (max-width: 1199px) {
#createTripExpenses .create_trip_expenses_content {
width: 100%;
}
}
@media (max-width: 767px) {
#createTripExpenses .images_input_wrapper {
gap: 30px;
}
#createTripExpenses .input_field_wrapper {
grid-template-columns: 1fr;
gap: 30px;
}
#createTripExpenses .create_trip_btn {
margin: 40px 0;
}
}
@media (max-width: 480px) {
#createTripExpenses .images_input_wrapper {
flex-direction: column;
gap: 20px;
align-items: start;
margin-bottom: 32px;
}
#createTripExpenses .file_input_wrapper {
width: 100%;
}
#createTripExpenses small.mobile {
display: inline-block;
border: none;
padding: 0;
}
#createTripExpenses .upload-box .desktop {
display: none;
}
#createTripExpenses .upload-box .mobile {
display: flex;
align-items: center;
gap: 12px;
border: 2px dashed #cbcbcb;
padding: 20px 24px;
width: 100%;
height: 100%;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
cursor: pointer;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#createTripExpenses .upload-box .mobile:hover {
background-color: #f9f9f9;
}
#createTripExpenses .upload-box .mobile svg {
width: 14px;
height: 18px;
}
#createTripExpenses .upload-box .mobile p {
font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
color: var(--text-color);
margin: 0;
}
#createTripExpenses .images_wrapper .img_wrapper .remove_btn {
width: 20px;
height: 20px;
top: -6px;
right: -6px;
}
#createTripExpenses .input_field_wrapper {
gap: 24px;
}
#createTripExpenses .input_field_wrapper .input_field label {
gap: 6px;
font-size: 14px;
margin-bottom: 8px;
}
#createTripExpenses .input_field_wrapper .input_field input,
#createTripExpenses .input_field_wrapper .input_field select {
padding: 16px;
font-size: 12px;
}
#createTripExpenses .create_trip_btn {
padding: 15px;
margin: 32px 0;
font-size: 14px;
}
}
/* =============== CREATE-TRIP-EXPENSES END =============== */
/* =============== POLICY-CONTENT START =============== */
#policyContent ul {
padding-left: 25px;
}
#policyContent p,
#policyContent ul li {
font-family: var(--font-family);
font-weight: 300;
font-size: 16px;
color: var(--text-color);
}
#policyContent p:not(:last-child),
#policyContent ul li:not(:last-child) {
margin-bottom: 16px;
}
#policyContent #supportForm {
margin: 35px 0 45px;
}
#policyContent #supportForm input,
#policyContent #supportForm textarea {
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border: 1px solid var(--text-color);
font-family: var(--font-family);
font-weight: 300;
font-size: 16px;
color: var(--text-color);
padding: 23px 20px;
resize: none;
width: 100%;
margin-bottom: 16px;
}
#policyContent #supportForm input::placeholder,
#policyContent #supportForm textarea::placeholder {
color: var(--text-color);
opacity: 1;
}
#policyContent #supportForm .button_wrapper {
margin: 8px 0 0;
}
#policyContent #supportForm .button_wrapper button {
padding: 20px;
width: 100%;
background-color: var(--primary-color);
color: var(--white-color);
border: 1px solid var(--primary-color);
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
text-transform: capitalize;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#policyContent #supportForm .button_wrapper button:hover {
background-color: var(--primary-hover-color);
border-color: var(--primary-hover-color);
color: var(--white-color);
}
#supportContact .support_contact_title {
font-family: var(--font-family);
font-weight: 500;
font-size: 20px;
color: var(--primary-color);
margin-bottom: 17px;
}
#supportContact .support_detail {
width: fit-content;
font-family: var(--font-family);
font-weight: 300;
font-size: 16px;
color: var(--text-color);
display: flex;
align-items: center;
gap: 8px;
}
#supportContact .support_detail:not(:last-child) {
margin-bottom: 16px;
}
#supportContact .support_detail .icon_wrapper {
width: 10px;
height: 10px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 480px) {
#policyContent p,
#policyContent ul li {
font-size: 12px;
}
#policyContent #supportForm {
margin: 16px 0 30px;
}
#policyContent #supportForm input,
#policyContent #supportForm textarea {
font-size: 12px;
padding: 16px;
}
#policyContent #supportForm .button_wrapper {
margin: 0;
}
#policyContent #supportForm .button_wrapper button {
font-size: 14px;
padding: 15px;
}
#supportContact .support_contact_title {
font-size: 16px;
}
#supportContact .support_detail {
font-size: 12px;
}
}
.input_field.error {
border-color: #ff0000;
}
.input_field.error input {
border-color: #ff0000;
}
.error-message {
color: #ff0000;
font-size: 12px;
margin-top: 5px;
display: block;
}
.amount-suggestion {
color: #3661FF;
text-decoration: underline;
cursor: pointer;
margin: 0 5px;
}
.amount-suggestion:hover {
color: #2a4fd3;
}
.suggestions-container {
margin-top: 8px;
}
.suggestion-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
.suggestion-btn {
padding: 4px 8px;
background: #f0f0f0;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}
.suggestion-btn:hover {
background: #e0e0e0;
}
.suggestion-btn.active {
background: #3661FF;
color: white;
border-color: #3661FF;
}
/* =============== POLICY-CONTENT END =============== */
/* =============== SUBSCRIPTION START =============== */
#subscription {
margin-top: 80px;
margin-bottom: calc(80px - 38px);
}
#subscription .mobile_navigation {
display: none;
color: var(--text-color);
}
#subscription .subscription_row {
display: flex;
gap: 50px;
justify-content: space-between;
}
#subscription .subscription_row .subscription_img {
width: calc(38% - 25px);
margin-top: 50px;
}
#subscription .subscription_row .subscription_content {
width: calc(62% - 25px);
}
#subscription .subscription_content .subscription_heading {
font-weight: 500;
font-family: var(--font-family);
font-size: 64px;
line-height: 73px;
letter-spacing: 0;
color: var(--text-color);
margin-bottom: 40px;
}
#subscription .subscription_content .subscription_heading span {
color: var(--primary-color);
}
#subscription .subscription_content .subscription_details span {
font-weight: 500;
font-family: var(--font-family);
font-size: 28px;
letter-spacing: 0;
color: var(--text-color);
margin-bottom: 24px;
}
#subscription .subscription_content .subscription_details ul {
font-weight: 300;
font-family: var(--font-family);
font-size: 20px;
letter-spacing: 0;
color: var(--text-color);
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
padding-left: 25px;
}
#subscription .subscription_content .subscription_details ul li::marker {
font-size: 14px;
}
#subscription .subscription_content .subscription_details .subscription_btns {
display: flex;
flex-direction: column;
gap: 16px;
}
#subscription .subscription_content .subscription_btns button {
padding: 20px;
width: 100%;
background-color: var(--primary-color);
color: var(--white-color);
border: 1px solid var(--primary-color);
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
text-transform: capitalize;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
}
#subscription .subscription_content .subscription_btns button:hover {
background-color: var(--primary-hover-color);
border-color: var(--primary-hover-color);
color: var(--white-color);
}
#subscription .subscription_content .subscription_details .subscription_note {
font-weight: 300;
font-family: var(--font-family);
font-size: 20px;
letter-spacing: 0;
color: var(--text-color);
text-align: center;
list-style: none;
padding: 0;
margin: 0;
margin-top: 19px;
}
@media (max-width: 1499px) {
#subscription {
margin-top: 60px;
margin-bottom: calc(60px - 38px);
}
}
@media (max-width: 1299px) {
#subscription {
margin-top: 40px;
margin-bottom: calc(50px - 38px);
}
#subscription .subscription_content .subscription_heading {
font-size: 60px;
line-height: 68px;
}
#subscription .subscription_content .subscription_details span {
font-size: 26px;
}
#subscription .subscription_content .subscription_details .subscription_note {
font-size: 18px;
}
}
@media (max-width: 1199px) {
#subscription {
margin-top: 25px;
}
#subscription .subscription_content .subscription_heading {
font-size: 54px;
line-height: 60px;
margin-bottom: 30px;
}
#subscription .subscription_content .subscription_details span {
font-size: 24px;
}
#subscription .subscription_content .subscription_details ul {
font-size: 18px;
}
#subscription .subscription_content .subscription_details .subscription_note {
font-size: 16px;
}
}
@media (max-width: 991px) {
#subscription .subscription_row {
flex-direction: column;
gap: 30px;
}
#subscription .subscription_row .subscription_img,
#subscription .subscription_row .subscription_content {
width: 100%;
}
#subscription .subscription_row .subscription_img {
text-align: center;
}
#subscription .subscription_content .subscription_heading {
font-size: 50px;
line-height: 56px;
margin-bottom: 25px;
}
#subscription .subscription_content .subscription_heading br {
display: none;
}
#subscription .subscription_content .subscription_details span {
font-size: 18px;
}
}
@media (max-width: 575px) {
#subscription .subscription_content .subscription_heading {
font-size: 42px;
line-height: 48px;
margin-bottom: 20px;
}
#subscription .subscription_content .subscription_details span {
font-size: 20px;
}
}
@media (max-width: 480px) {
#subscription {
margin-bottom: 0;
}
#subscription .mobile_navigation {
display: inline-block;
}
#subscription .subscription_row .subscription_img {
margin-top: 0;
}
#subscription .subscription_content .subscription_heading {
font-size: 28px;
line-height: 34px;
}
#subscription .subscription_content .subscription_details {
margin-left: -24px;
margin-right: -24px;
padding: 26px 24px 38px;
background-color: var(--primary-color);
}
#subscription .subscription_content .subscription_details span,
#subscription .subscription_content .subscription_details ul,
#subscription .subscription_content .subscription_details .subscription_note {
color: var(--white-color);
}
#subscription .subscription_content .subscription_details span {
font-size: 16px;
margin-bottom: 16px;
}
#subscription .subscription_content .subscription_details ul {
font-size: 12px;
gap: 12px;
margin-bottom: 35px;
}
#subscription .subscription_content .subscription_details ul li::marker {
font-size: 12px;
}
#subscription .subscription_content .subscription_details .subscription_note {
font-size: 12px;
margin-top: 30px;
padding-left: 25px;
list-style: disc;
text-align: left;
}
#subscription .subscription_content .subscription_btns button {
background-color: var(--white-color);
color: var(--text-color);
border: 1px solid var(--white-color);
font-size: 14px;
padding: 15px;
}
#subscription .subscription_content .subscription_btns button:hover {
background-color: transparent;
border-color: var(--white-color);
color: var(--white-color);
}
}
@media (max-width: 360px) {
#subscription .subscription_content .subscription_heading {
font-size: 26px;
line-height: 30px;
}
}
/* =============== SUBSCRIPTION END =============== */