@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #ee3577;
    --red: #dc3545;
    --orange: #f68e62;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #767575;
    --gray-dark: #434242;
    --primary: #6f42c1;
    --secondary: #4f4f4f;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #c2c2c2;
    --lightgray: #eeeeee;
    --dark: #434242;

    /* Custom Colors */

    --bg1-500: #F6F9FA;

    --bg2-500: #FDFDFD;

    --p1-100: #E6E6E6;
    --p1-400: #999999;
    --p1-500: #202020;

    --a1-300: #EC7979;
    --a1-500: #E54A4A;

    --a2-400: #FFE733;

    --a3-700: #14852E;

    --a4-100: #CFD1FC;
    --a4-300: #6F76F6;

    /* Navbar */
    --navbar-height: 6rem;
    --navbar-width: 100vw;
}


.dashboard-body {
    color: var(--bg1-500);
    overflow-x: hidden;
}

.dashboard-body a {
    color: var(--a4-300);
}

.btn {
    font-weight: bold;
    padding: .375rem 1rem;
    height: 2.75rem;
    transition: all 0.4s ease-in-out
}

.btn:focus,
.btn.focus {
    box-shadow: none !important
}

.form-control {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
    height: 2.75rem;
    border-color: var(--light)
}

.theme-bg-light {
    background: var(--bg1-500) !important
}

.theme-bg-dark {
    background: var(--dark) !important
}


/* Typography */
.subheading {
    font-family: 'Outfit', sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
}

.submidheading {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 500;
}

.midheading {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
}

.midhighheading {
    font-family: 'Outfit', sans-serif;
    font-size: 1.75rem;
    font-weight: 500;
}

.heading {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    font-weight: 500;
}

.subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 2.75rem;
    font-weight: 500;
}


.title {
    font-family: 'Outfit', sans-serif;
    font-size: 4em;
    font-weight: 500;
}

.body {
    /* font-family: 'Rubik', sans-serif; */
    font-size: 1rem;
    font-weight: 400;
}


.o-body {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 400;
}

.label {
    /* font-family: 'Rubik', sans-serif; */
    font-size: 0.875rem;
    font-weight: 400;
}

/* Header */

.header {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1050;
    height: var(--navbar-height);
    width: var(--navbar-width);
    background: var(--bg1-500);
    color: #202020;
    padding: 1rem 2rem;
}

.header .site-title {
    color: var(--p1-500);
    font-size: 2em;
    display: block;
}

/* Navigation Bar */
.header .navbar-dark .navbar-toggler {
    border: none;
}

.header .navbar-dark .navbar-toggler:hover {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1
}

.header .navbar-dark .navbar-toggler-icon {
    color: var(--p1-500);
}

.collapse {
    display: none;
}

.collapse.show {
    display: block;
}

.header .nav-item.active .nav-link {
    color: var(--a4-300);
    font-weight: 500;
}

.header .nav-item.active .nav-link:hover {
    text-decoration: none;
}

.header .nav-item .nav-link {
    color: var(--p1-500);
    margin-right: 1em;
}

.header .nav-item .nav-link:hover {
    color: var(--p1-400);
}

.header .nav-item.active .nav-link::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background-color: var(--a4-300);
    border-radius: 100%;
    margin: 0 auto;
    margin-top: 0.5em;
}

/* Buttons */
.header .btn-primary,
.contact-us .btn-primary,
.sign-up-form .btn-primary,
.sign-in-form .btn-primary,
#tisari-mumbai a,
.my-satbara .btn-primary,
.site-officer-dashboard .btn-primary,
.reception-dashboard-section .btn-primary,
.payment-information .btn-primary,
.otp-wrapper .btn-primary,
.area-manager .btn-primary,
.accountant-dashboard-section .btn-primary {
    background: var(--a4-300);
    border-radius: 30px;
    border: var(--a4-300) 2px solid;
    padding-left: 2em;
    padding-right: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--bg1-500);
}

.btn-primary i {
    margin-left: 0.5em;
}

.header .btn-primary:hover,
.contact-us .btn-primary:hover,
.sign-up-form .btn-primary:hover,
.sign-in-form .btn-primary:hover,
#tisari-mumbai a:hover,
.my-satbara .btn-primary:hover,
.site-officer-dashboard .btn-primary:hover,
.reception-dashboard-section .btn-primary:hover,
.payment-information .btn-primary:hover,
.otp-wrapper .btn-primary:hover,
.area-manager .btn-primary:hover,
.accountant-dashboard-section .btn-primary:hover {
    background: var(--bg1-500);
    color: var(--a4-300);
}

.lead-statistics .btn-primary,
.manage-profile .btn-primary,
.all-leads .btn-primary,
.self-brand .btn-primary {
    background: var(--p1-500);
    border-radius: 1em;
    border: var(--p1-500) 2px solid;
    width: 100%;
    padding-left: 2em;
    padding-right: 2em;
    padding-top: 1.25em;
    padding-bottom: 1.25em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lead-statistics .btn-primary:hover,
.manage-profile .btn-primary:hover,
.all-leads .btn-primary:hover,
.self-brand .btn-primary:hover {
    background: var(--bg1-500);
    color: var(--p1-500);
}

.danger.btn-primary {
    background: var(--a1-500);
    border: var(--a1-500) 2px solid;
    color: var(--bg1-500);
    border-radius: 30px;
    padding-left: 2em;
    padding-right: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.danger.btn-primary:hover {
    background: var(--bg1-500);
    color: var(--a1-500);
}


button[type=submit].link-button {
    padding: 0rem !important;
    margin: 0rem !important;
    background-color: transparent !important;
    color: var(--a4-300) !important;
    height: 36px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    line-height: 1.25 !important;
}

#add-row {
    cursor: pointer;
}

.area-manager-description {
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
}

/* Do not move above btn-primary class styles */
.header .inverted-btn {
    background: var(--bg1-500);
    color: var(--a4-300);
    border: var(--a4-300) 2px solid;
}

.header .inverted-btn:hover {
    background: var(--a4-300);
    color: var(--bg1-500);
}

/* Main */
.main-wrapper {
    background: var(--bg1-500);
    color: var(--p1-500);
    padding-top: var(--navbar-height);
    padding-left: 6rem;
    padding-right: 1.5rem;
}

.main-wrapper.even-padded {
    padding-left: 3rem;
    padding-right: 3rem;
}

/* Introduction */

.introduction {
    display: flex;
    justify-content: space-between;
    color: var(--p1-500);
    padding-bottom: 1.5rem;
}

.introduction .title,
.introduction-text,
.introduction-image {
    flex: 1;
}

.introduction .title {
    padding-top: 3rem;
}

.introduction-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 6rem;
    padding-bottom: 3rem;
}

.introduction-highlight {
    color: var(--a3-700);
}

.introduction-description {
    text-align: justify;
    line-height: 1.5;
}

.introduction-image {
    text-align: right;
}

.introduction-image img {
    width: 45vw;
    height: calc(100vh - var(--navbar-height) - 1.5rem);
    border-radius: 1rem;
    object-fit: cover;
}

/* About Us */

.about {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-right: 4.5rem;
}

/* Main Quote */

.about .main-quote {
    text-align: center;
    padding-top: 3rem;
    padding-bottom: 6rem;
}

.about .quote-title {
    padding-bottom: 1.5rem;
}

.about .quote-description {
    padding-left: 6rem;
    padding-right: 6rem;
}

/* Vision, Mission */

.about .about-tile {
    display: flex;
    justify-content: space-between;
    padding-bottom: 6rem;
    height: calc((100vh - var(--navbar-height)) / 2);
}

.about-tile img {
    width: 50vw;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
}

#mission-mobile-image {
    display: none;
}

#mission-desktop-image {
    display: block;
}

.about-tile .about-text {
    padding-left: 6rem;
    padding-right: 6rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.about-tile .about-heading {
    padding-bottom: 1.5rem;
}

.separator-line {
    border-top: 1px solid var(--p1-100);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.about .motive {
    display: flex;
    justify-content: space-between;
    height: calc((100vh - var(--navbar-height)) / 2);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.motive .motive-heading {
    display: block;
}

.motive .highlight {
    color: var(--a1-300);
}

.highlight.green {
    color: var(--a3-700);
}

.highlight.red {
    color: var(--a1-300);
}

.highlight.blue {
    color: var(--a4-300);
}

.highlight.yellow {
    color: var(--a2-400);
}

.background grey {
    background-color: var(--p1-100);
}

.background blue {
    background-color: var(--a4-100);
}

.background white {
    background-color: var(--bg1-500);
}

.leads-table input.reception-empty-input {
    background-color: var(--bg2-500) !important;
    border-radius: 5px;
}

.motive .motive-description {
    padding-left: 6rem;
    width: 50vw;
    text-align: justify;
}

/* Review */

.review {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-right: 4.5rem;
    text-align: center;
}

.review .review-heading {
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}

.review .review-title {
    padding-bottom: 3rem;
}

.review .review-carousel {
    display: flex;
    justify-content: space-between;
}

.review .review-body {
    width: calc((100vw - 18rem) / 3);
}

.review .review-quote {
    padding-bottom: 1.5rem;
}

.review .review-rating {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.review .stars .rated {
    color: var(--a2-400);
}

.review .stars {
    color: var(--p1-100);
}

.review .stars .fa-star {
    padding-right: 0.5rem;
}

.review .body-description {
    text-align: justify;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.review .user-information {
    display: flex;
    justify-content: start;
    align-items: center;
}

.review .user-information .user-description {
    padding-left: 1.5rem;
    text-align: left;
}

.review .user-information img {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    object-fit: cover;
}

/* Tisari Mumbai */

.tisari-mumbai {
    display: flex;
    justify-content: space-between;
    color: var(--p1-500);
    padding-bottom: 1.5rem;
    padding-top: 4.5rem;
}

.tisari-mumbai .tisari-mumbai-content {
    flex: 1;
    padding-right: 6rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.tisari-mumbai .welcome-content {
    padding-bottom: 6rem;
}

.tisari-mumbai .welcome-heading {
    padding-bottom: 1.5rem;
}

.welcome-heading .highlight {
    color: var(--a1-300);
}

.tisari-mumbai .interest-heading {
    padding-bottom: 3rem;
}

.interest-heading .highlight {
    color: var(--a3-700);
}

.decorated-list-container {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1.5rem;
}

.decorated-list-container .list-point {
    line-height: 1;
    padding-right: 1.5rem;
}

.tisari-mumbai .welcome-text,
.decorated-list-container .list-text {
    text-align: justify;
}


.tisari-mumbai .welcome-content img {
    width: auto;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.tisari-mumbai .tisari-mumbai-images {
    width: 45vw;
}

.tisari-mumbai-images-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding-bottom: 1.5rem;
}

#tisari-mumbai-image-1 {
    width: calc((45vw - 1.5rem) * .4);
    height: calc((100vh - var(--navbar-height) - 1.5rem) / 2.5);
    border-radius: 1rem;
    object-fit: cover;
}

#tisari-mumbai-image-2 {
    width: calc((45vw - 1.5rem) * .6);
    height: calc((100vh - var(--navbar-height) - 1.5rem) / 2.5 + 1.5rem);
    border-radius: 1rem;
    object-fit: cover;
}

.tisari-mumbai-images-row-2 {
    display: flex;
    justify-content: space-between;
}

.tisari-mumbai-image-column-1 {
    width: calc((45vw - 1.5rem) * .55);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#tisari-mumbai-image-3 {
    width: calc((45vw - 1.5rem) * .55 - 1.5rem);
    height: calc((100vh - var(--navbar-height) - 1.5rem) / 3);
    border-radius: 1rem;
    object-fit: cover;
    margin-bottom: 1.5rem;
}

#tisari-mumbai-image-4 {
    width: calc((45vw - 1.5rem) * .55);
    height: calc((100vh - var(--navbar-height) - 1.5rem));
    border-radius: 1rem 1rem calc(((45vw - 1.5rem) * .55) / 2) calc(((45vw - 1.5rem) * .55) / 2);
    object-fit: cover;
    margin-bottom: 1.5rem;
}

#tisari-mumbai-image-5 {
    width: calc((45vw - 1.5rem) * .55);
    height: calc((45vw - 1.5rem) * .55);
    border-radius: 50%;
    object-fit: cover;
}

.tisari-mumbai-image-column-2 {
    width: calc((45vw - 1.5rem) * .45);
}

#tisari-mumbai-image-6 {
    width: calc((45vw - 1.5rem) * .45);
    height: calc((100vh - var(--navbar-height) - 1.5rem) * 1.65);
    border-radius: 1rem 1rem calc(((45vw - 1.5rem) * .45) / 2) calc(((45vw - 1.5rem) * .45) / 2);
    object-fit: cover;
    margin-bottom: 1.5rem;
}

#tisari-mumbai-image-7 {
    width: calc((45vw - 1.5rem) * .45);
    height: calc((45vw - 1.5rem) * .45);
    border-radius: 50%;
    object-fit: cover;
}

/* Contact Us */

.contact-us {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-right: 4.5rem;
    display: flex;
}

.contact-form {
    flex: 1;
    padding-right: 6rem;
}

.contact-inputs {
    width: 100%;
}

.contact-heading {
    padding-bottom: 3rem;
}

.contact-heading .highlight {
    color: var(--a3-700);
}

.contact-us .names {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1.5rem;
}

.contact-us .names .first-name {
    padding-right: 1.5rem;
}

.contact-us .email {
    padding-bottom: 1.5rem;
}

.contact-us .query {
    padding-bottom: 1.5rem;
}

.contact-points {
    width: calc(45vw - 4.5rem);
}

.form-control {
    -webkit-border-radius: 1rem;
    -moz-border-radius: 1rem;
    border-radius: 1rem;
    color: var(--bg1-500);
    background-color: var(--a4-100);
    border-left: var(--bg1-500) 2px solid;
    border-right: none;
    border-top: none;
    border-bottom: none;
}

.input-group .form-control {
    height: 3rem;
}

.form-control::placeholder {
    color: var(--bg1-500) !important;
    opacity: 1;
}

.input-group-text {
    color: var(--bg1-500);
    background-color: var(--a4-100);
    border-radius: 1rem;
    border: none;
}

.contact-addresses {
    position: relative;
}

.contact-addresses img {
    width: 100%;
    height: calc((100vh - var(--navbar-height) - 1.5rem) / 2);
    border-radius: 1rem;
    filter: brightness(50%);
    object-fit: cover;
}

.contact-addresses .text-content {
    color: var(--bg1-500);
    position: absolute;
    top: 3rem;
    left: 3rem;
    right: 3rem;
}

.contact-addresses .address-heading {
    padding-bottom: 1.5rem;
}

.contact-addresses .primary-contacts {
    display: flex;
    justify-content: space-between;
}

.contact-addresses .separator-line {
    border-top: 1px solid var(--p1-100);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.contact-addresses .primary-contacts i {
    padding-right: 1.5rem;
}

.contact-socials {
    position: relative;
    padding-top: 1.5rem;
}

.contact-socials img {
    width: 100%;
    height: calc((100vh - var(--navbar-height) - 1.5rem) / 2.3);
    border-radius: 1rem;
    filter: brightness(50%);
    object-fit: cover;
}

.contact-socials .text-content {
    color: var(--bg1-500);
    position: absolute;
    top: 4rem;
    left: 3rem;
    right: 3rem;
}

.contact-socials .social-heading {
    padding-bottom: 1.5rem;
}

.contact-socials .social-text {
    padding-bottom: 1.5rem;
}

.contact-socials .socials {
    display: flex;
    justify-content: space-between;
}

.contact-socials .socials a {
    color: var(--bg1-500);
    display: flex;
}

.contact-socials .socials .social-tile {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-socials .facebook {
    background-color: #535693;
}

.contact-socials .instagram {
    background-color: #AD1B6E;
}

.contact-socials .x {
    background-color: var(--p1-500);
}

.contact-socials .linkedIn {
    background-color: #5872AA;
}

.contact-socials .youtube {
    background-color: #991111;
}

.full-page-wrapper {
    width: 100vw;
    height: auto;
    min-height: 100vh;
}

.major-right-container,
.major-left-container {
    display: flex;
    justify-content: space-between;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-right: 4.5rem;
}

.major-right-container .right {
    width: calc(55vw - 4.5rem);
}

.major-left-container .right {
    width: calc(50vw - 4.5rem);
}

.major-right-container .left,
.major-left-container .left {
    flex: 1;
    padding-right: 6rem;
}

.form-title,
.form-text,
.invite-code {
    padding-bottom: 1.5rem;
}

.form-input-title {
    padding-bottom: 1rem;
}


.horizontal {
    display: flex;
    justify-content: space-between;
}

.sign-up-form .form-inputs .input-group,
.sign-up-form .form-inputs .textarea-group,
.sign-up-form .terms-agreement {
    padding-bottom: 1.5rem;
}

.sign-up-form .first-name,
.sign-up-form .state-dropdown,
.sign-up-form .existing-business-dropdown,
.sign-up-form .languages-dropdown {
    padding-right: 1.5rem;
}

.sign-up-form .date-of-birth {
    width: calc(50% - 1.5rem / 2);
}

.sign-up-form .terms-agreement a {
    color: var(--a4-300);
    font-weight: 600;
}

.form-title .highlight {
    color: var(--a3-700);
}

.invite-code {
    color: var(--a4-300);
}

.invite-code-alert {
    color: var(--bg1-500);
    background-color: var(--a1-300);
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

.invite-code-success {
    background-color: var(--a3-700);
    color: var(--bg1-500);
    padding: 1rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}



.invite-code-success i,
.invite-code-alert i {
    margin-right: 0.5em;
}

.proceed-submit {
    width: 25%;
}

.sign-up-form {
    height: calc(100vh - var(--navbar-height) - 3rem);
}

.form-inputs {
    position: relative;
    height: calc(100vh - var(--navbar-height) - 6rem);
}

.form-actions {
    display: flex;
    gap: 1.5rem;
    padding: 1rem 0;
}

.customer-form .btn-primary {
    margin-bottom: 1rem;
}

.form-input {
    left: 0;
    right: 0;
    position: absolute;
    display: none;
    opacity: 0;
    height: 0%;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.form-input.active {
    display: block;
    opacity: 1;
}

.form-input.fade-out-left {
    transform: translateX(-100%);
    opacity: 0;
}

.form-input.fade-in-right {
    transform: translateX(100%);
    opacity: 1;
}

.form-input.fade-in-right.active {
    transform: translateX(0);
    opacity: 1;
}


#toggle-password {
    background-color: var(--a4-100);
    color: var(--bg1-500);
    border-left: 2px solid var(--bg1-500);
    height: 100%;
    border-radius: 0px 10px 10px 0px;
}

.sign-in-form .input-group {
    padding-bottom: 1.5rem;
}

.sign-in-container .form-text {
    padding-bottom: 3rem;
}

.sign-in-form .additional-options {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1.5rem;
}

.sign-in-form .button-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.sign-in-container {
    height: calc(100vh - var(--navbar-height) - 3rem);
    width: 100%;
}

.sign-in-image-container img {
    width: calc(100vh - var(--navbar-height) - 3rem);
    height: calc(100vh - var(--navbar-height) - 3rem);
    border-radius: 1rem;
    object-fit: cover;
}

#signin-button {
    margin-top: 1.5rem;
}

.red-text {
    color: var(--a1-300);
    font-weight: 600;
}

.blue-text {
    color: var(--a4-300);
    font-weight: 600;
}

.form-check .form-check-input {
    margin-right: 1rem;
    accent-color: var(--a4-300);
}

.sign-in-form .additional-options .forgot-password {
    color: var(--a4-300);
}

/* Dashboard */

.dashboard-wrapper {
    display: flex;
}

.dashboard-navigation .nav-menu,
.dashboard-navigation .nav-menu-client,
.dashboard-navigation .nav-menu-reception,
.dashboard-navigation .nav-menu-site-officer,
.dashboard-navigation .nav-menu-accountant {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dashboard-navigation {
    height: calc(100vh - var(--navbar-height) - 1.5rem);
    width: calc(100vw / 5);
    background: var(--bg2-500);
    color: var(--p1-500);
    border-radius: 1.5rem;
    transition: all 0.3s ease-in-out;
}

.dashboard-navigation .dashboard-content {
    padding-left: .5rem;
    padding-right: .5rem;
}

.dashboard-navigation .nav-item {
    border-radius: 1rem;
    transition: all 0.3s ease-in-out;
}

.dashboard-navigation a {
    color: var(--p1-500);
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem;
    border-radius: 1rem;
    text-decoration: none;
}

.dashboard-navigation .nav-item i {
    padding-right: 1rem;
    width: 2.5rem;
}


.dashboard-navigation .close-button {
    visibility: hidden;
}

.dashboard-navigation .close-button a:hover {
    color: var(--a4-300);
    transition: all 0.3s ease-in-out;
}

.dashboard-navigation .nav-item.current,
.dashboard-navigation .nav-item.current a {
    background-color: var(--p1-500);
    color: var(--bg1-500);
}

.dashboard-navigation .nav-item:hover,
.dashboard-navigation .nav-item:hover a {
    background-color: var(--p1-400);
    color: var(--bg2-500);
    transition: all 0.3s ease-in-out;
}

.dashboard-content {
    padding-left: 1.5rem;
}

.dashboard-home {
    display: flex;
    width: calc(100vw / 5 * 4 - 6rem - 1.5rem);
}

.dashboard-column-1 {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--navbar-height) - 1.5rem);
    width: 100%;
}

.dashboard-column-2 {
    padding-left: 1.5rem;
    width: calc(100vw / 5 * 3 - 4.5rem);
}


.dashboard-tile.about-user {
    padding-left: 3rem;
    padding-right: 3rem;
}

.dashboard-tile.lead-statistics {
    padding-left: 3rem;
    padding-right: 3rem;
    height: calc(100vh - var(--navbar-height) - 1.5rem);
}

.dashboard-tile.add-journey {
    padding-left: 3rem;
    padding-right: 3rem;
}

.add-journey {
    margin-top: 1.5rem;
}

.total-earnings {
    background: linear-gradient(135deg, #A6F2B8, #1AB23E);
    color: var(--bg1-500);
    border-radius: 1.5rem;
    padding: 1.5rem;
    width: 100%;
    margin-right: .75rem;
}

.area-sold {
    background: linear-gradient(135deg, #FFF399, #EC7979);
    color: var(--bg1-500);
    border-radius: 1.5rem;
    padding: 1.5rem;
    margin-left: .75rem;
    width: 100%;
}

.dashboard-tile {
    padding: 1.5rem;
    background-color: var(--bg2-500);
    border-radius: 1.5rem;
}

.stats {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    height: 100%;
}

.about-user .user-information,
.about-user .user-dates {
    display: flex;
}

.about-user .user-dates,
.about-user .ref-link-tile {
    justify-content: space-between;
    padding-top: 1.5rem;
}

.about-user .ref-link-tile {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.about-user .user-id,
.about-user .user-rank,
.about-user .date-title,
.about-user .link-title,
.about-user .link-icon,
.lead-statistics .entry-detail-title {
    color: var(--p1-400);
}

.dashboard-wrapper input[type='date'], .form-inputs input[type='date']{
    width: 100% !important;
    outline: none !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    padding: 3px 20px !important;
    min-height: 55px !important;
}

.about-user .link-icon {
    cursor: pointer;
}

.about-user .link-icon:hover {
    color: var(--p1-500);
    transition: all 0.3s ease-in-out;
}

.about-user .user-avatar img {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
}

.about-user .user-avatar {
    padding-right: 1.5rem;
}

.lead-statistics .leads-summary-title {
    padding-bottom: 1.5rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1.5rem;
}

.leads-pie-chart {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    width: calc(100vw / 7.5);
    height: calc(100vw / 7.5);
    background: conic-gradient(var(--a1-300), var(--a2-400), var(--a3-700), var(--a4-300), var(--a1-300));
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.leads-pie-chart .donut-center {
    background-color: var(--bg2-500);
    width: calc(100vw / 10);
    height: calc(100vw / 10);
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pie-chart-wrapper {
    display: flex;
    justify-content: center;
}

.entry {
    width: 5rem;
    display: flex;
    align-items: center;
}

.entry .entry-icon {
    margin-right: 1rem;
}

.entry.pending i {
    color: var(--a1-500);
}

.entry.booked i {
    color: var(--a4-300);
}

.entry.confirmed i {
    color: var(--a2-400);
}

.entry.completed i {
    color: var(--a3-700);
}

.manage-profile,
.self-brand,
.dashboard-tisari-mumbai {
    width: calc(100vw / 5 * 4 - 6rem - 1.5rem);
    display: flex;
}

.main-section {
    width: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.minor-section {
    height: 100%;
    width: calc(100vw / 5 * 2 - 4.5rem);
}

.payment-manager-section {
    padding-left: 1.5rem;
    width: calc(100vw / 5 * 2.5 - 4.5rem);
}

.area-manager-section {
    padding-left: 1.5rem;
    width: calc(100vw / 5 * 3.5 - 4.5rem);
}

.accountant-dashboard-section {
    margin-bottom: 1.5rem;
}

.dashboard-section-half {
    width: calc(100vw / 5 * 3 - 4.5rem);
    padding-bottom: 1.5rem;
}

.dashboard-section,
.client-dashboard-section,
.reception-dashboard-section {
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.dashboard-section.active,
.client-dashboard-section.active,
.reception-dashboard-section.active {
    opacity: 1;
}

.dashboard-section .dashboard-title,
.client-dashboard-section .dashboard-title,
.reception-dashboard-section .dashboard-title {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.dashboard-section .dashboard-description,
.client-dashboard-section .dashboard-description,
.reception-dashboard-section .dashboard-description {
    padding-bottom: 1rem;
}

.profile-section,
.dashboard-section .section-title,
.client-dashboard-section .section-title,
.reception-dashboard-section .section-title {
    padding-bottom: 1rem;
}

.two-fields {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1rem;
    gap: 1rem;
}

.field .label {
    padding-bottom: .5rem;
    color: var(--p1-400);
}

.field {
    display: flex !important;
    flex-direction: column !important;
    width: calc((100vw / 5));
}

.field.full {
    width: 100%;
}

.field select {
    width: 100%;
    height: 54px;
    color: var(--p1-500) !important;
}

.dashboard-section .separator-line,
.client-dashboard-section .separator-line {
    border-top: 1px solid var(--p1-100);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.decorated-file-upload {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.decorated-file-upload input {
    display: none;
}

.decorated-file-upload label {
    cursor: pointer;
    color: var(--p1-400);
    transition: all 0.3s ease-in-out;
}

.decorated-file-upload label:hover {
    color: var(--p1-500);
}

.edit-description {
    padding-bottom: 1.5rem;
    text-align: justify;
}

.news-and-updates {
    width: calc(100vw / 5 * 4 - 6rem - 1.5rem);
}

.vertical-spacer {
    border-left: 2px solid var(--p1-100);
    height: 2rem;
}

.latest-news {
    display: flex;
    flex-direction: row;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: var(--bg2-500);
    border-radius: 1rem;
    align-items: center;
    width: calc(100vw / 5 * 4 - 6rem - 1.5rem);
    overflow: hidden;
    position: relative;
}

.latest-title {
    width: 10rem;
    color: var(--a1-500);
    display: flex;
    justify-content: center;
    background-color: var(--bg2-500);
    z-index: 1;
}

.latest-news-carousel {
    display: inline-block;
    white-space: nowrap;
    animation: slide 15s linear infinite;
    padding-right: 1.5rem;
    position: absolute;
    left: 10rem;
}

.latest-news-carousel .latest-news-titles {
    display: inline-block;
    padding: 0 1.5rem;
    color: var(--p1-500);
}

@keyframes slide {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

.trending-section {
    display: flex;
    width: calc(100vw / 5 * 4 - 6rem - 1.5rem);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.primary-trending {
    position: relative;
    width: calc(100vw / 5 * 8 - 6rem - 3rem);
    height: calc((100vh - var(--navbar-height) - 3rem) / 1.15);
    border-radius: 1rem;
    transition: all 0.3s ease-in-out;
}

.primary-trending:hover {
    .primary-news-image {
        filter: brightness(75%);
    }
}

.primary-trending .primary-news-image {
    width: calc(100vw / 5 * 4 - 6rem - 3rem);
    height: calc((100vh - var(--navbar-height) - 3rem) / 1.15);
    object-fit: cover;
    filter: brightness(50%);
    border-radius: 1rem;
    transition: all 0.3s ease-in-out;
}

.primary-trending .primary-news-details {
    position: absolute;
    color: var(--bg1-500);
    bottom: 1.5rem;
    left: 1.5rem;
}

.primary-trending .primary-news-title {
    padding-bottom: 1rem;
    padding-right: 1.5rem;
}

.secondary-trending {
    width: 100%;
    padding-left: 1.5rem;
}

.secondary-trending .trending-title {
    padding-bottom: 1.5rem;
}

.secondary-trending .secondary-news-container {
    position: relative;
    height: 8rem;
    width: 100%;
    border-radius: 1rem;
    padding-bottom: 1.5rem;
}

.secondary-news-container:hover {
    .secondary-news-image {
        filter: brightness(75%);
    }
}

.secondary-news-container .secondary-news-image {
    height: 8rem;
    width: 100%;
    object-fit: cover;
    filter: brightness(50%);
    border-radius: 1rem;
    transition: all 0.3s ease-in-out;
}

.secondary-trending .secondary-news-details {
    position: absolute;
    color: var(--bg1-500);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    bottom: 0px;
}

.featured-title,
.editors-title {
    display: flex;
    justify-content: space-between;
}

.featured-news,
.editors-news {
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 1.5rem;
    column-gap: 1.5rem;
    width: calc(100vw / 5 * 4 - 6rem - 1.5rem);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.featured-title .navigation-buttons button:hover,
.editors-title .navigation-buttons button:hover {
    background-color: var(--bg1-500);
    transition: all 0.3s ease-in-out;
}

.news-tile {
    border-radius: 1rem;
}

.news-tile.side-image {
    display: flex;
}

.news-tile.hide {
    display: none;
}

.news-tile:hover {
    background-color: var(--bg1-500);
    transition: all 0.3s ease-in-out;
}

.news-tile.side-image img {
    width: 8rem;
    height: 8rem;
    border-radius: 1rem;
    object-fit: cover;
    margin-right: 1.5rem;
}

.news-description a {
    color: var(--p1-500);
}

.news-meta-data {
    padding-top: .5rem;
    color: var(--p1-400);
}

.news-tags {
    padding-bottom: .5rem;
}

.associate-title,
.client-title {
    padding-bottom: 1.5rem;
}

.content-wrapper {
    padding-right: 4.5rem;
    display: flex;
    align-items: center;
}

.content-wrapper img {
    width: calc((100vw - 1.5rem) * .45);
    height: auto;
    border-radius: 1rem;
    object-fit: cover;
}

.associate-content,
.client-content {
    flex: 1;
    padding-right: 6rem;
}

.branch-page-title {
    padding-bottom: 3rem;
}

.branch-wrapper {
    display: flex;
    padding-bottom: 3rem;
}

.branch-wrapper iframe {
    margin-right: 1.5rem;
    width: calc((100vw - 1.5rem) * .25);
    height: auto;
    border-radius: 1rem;
}

.branch-wrapper .branch-title {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.branch-address,
.branch-contacts .phone-number,
.branch-contacts .email,
.branch-timings {
    padding-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

.branch-wrapper i {
    padding-right: 1.5rem;
}

.branch-wrapper .branch-contacts {
    display: flex;
}

.branch-contacts .phone-number {
    padding-right: 3rem;
}

.leads-summary-bar {
    display: flex;
    width: calc(100vw / 5 * 4 - 6rem - 1.5rem);
    justify-content: space-between;
    padding-right: 3rem;
    padding-left: 3rem;
    margin-bottom: 1.5rem;
}

.leads-bar {
    height: 1.5rem;
    border-radius: 1.5rem;
    margin-bottom: 1.5rem;
}

.stats-and-visuals {
    width: 100%;
}

.individual-stats {
    width: 100%;
    justify-content: space-evenly;
}

.total-leads {
    width: 9rem;
    padding-right: 1.5rem;
}

.individual-stats.summary-row {
    padding-bottom: 0;
}

.journey-tabular-list {
    width: calc(4 * 100vw / 5 - 9rem);
    overflow: auto;
}

.leads-table {
    width: auto;
    border-collapse: separate;
    border-spacing: 0 1rem;
    table-layout: fixed;
    border: none;
}

.journeys-table {
    overflow-x: scroll;
    border-collapse: separate;
    border-spacing: 0 1rem;
    table-layout: fixed;
    border: none;
}

.leads-table tr,
.journeys-table tr {
    justify-content: space-evenly;
    border: none;
}

.leads-table th,
.journeys-table th {
    color: var(--p1-400);
    border-bottom: 1px solid var(--p1-100);
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    padding-bottom: 1.5rem;
    font-weight: 400;
}

.leads-table td,
.journeys-table td {
    color: var(--p1-500);
    border: none;
    font-size: 0.7rem;
}

.leads-table td.status {
    display: flex;
    align-items: center;
    justify-content: center;
}

.leads-table .empty-result,
.journeys-table .empty-result {
    text-align: center;
}

.leads-table input,
.leads-table select {
    width: 100%;
    padding: 0.5rem;
    border-radius: 1rem;
    background-color: var(--bg1-500);
    color: var(--p1-400);
    border: none;

}

input[type="date"].editable-text {
    width: 100%;
    padding: 0.5rem;
    border-radius: 1rem;
    background-color: var(--bg1-500);
    color: var(--p1-400);
    border: none;
    height: 2.5rem;
}

.status-circle {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-right: .5rem;
}

.rd {
    background-color: var(--a1-500);
}

.yw {
    background-color: var(--a2-400);
}

.gr {
    background-color: var(--a3-700);
}

.bl {
    background-color: var(--a4-300);
}

.leads-search {
    display: flex;
    justify-content: space-between;
    padding: .5rem;
    border-radius: 1.5rem;
    background-color: var(--bg2-500);
    margin-bottom: 1.5rem;
    align-items: center;
}

.leads-search .results-count {
    display: flex;
    color: var(--p1-400);
}


.search-input {
    width: 24rem !important;
    padding: 14px 40px;
    display: inline-block;
    border: none;
    box-sizing: border-box;
    border-radius: 1rem !important;
    background-color: var(--bg1-500);
    color: var(--p1-400);
}


/* Media Gallery */
.promotional-materials {
    width: calc(100vw / 5 * 4 - 6rem - 1.5rem);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 21rem));
    gap: 1.5rem;
    padding-bottom: 1.5rem;
}

.gallery-date {
    padding-bottom: 1.5rem;
    color: var(--p1-500);
}

.gallery-item {
    position: relative;
    text-align: center;
}

.gallery-item img {
    width: 21rem;
    height: 12rem;
    object-fit: cover;
    border-radius: 1rem;
}

.download-link {
    display: block;
    margin-top: 5px;
    color: #0073aa;
    text-decoration: none;
    font-size: 0.9rem;
}

.download-link:hover {
    text-decoration: underline;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1059;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(3px);
    justify-content: center;
    align-items: center;

}

.modal-content {
    max-width: 80%;
    max-height: 80%;
    height: auto;
    width: auto;
    object-fit: contain;
    display: block;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 8rem));
    gap: 1rem;
    padding-bottom: 1.5rem;
    transition: all 0.3s ease-in-out;
}

.template-grid .template-preview {
    position: relative;
    text-align: center;
}

.template-preview .template-image-wrapper {
    background-color: var(--bg2-500);
    border-radius: 1rem;
    border: 2px solid var(--bg2-500);
    transition: all 0.3s ease-in-out;
}

.template-preview.selected-template {
    .template-image-wrapper {
        border: 2px solid var(--a4-300);
    }

    .template-title {
        font-weight: 500;
        color: var(--p1-500);
    }
}

.template-preview:hover {
    .template-image-wrapper {
        border: 2px solid var(--p1-400);
    }

    .template-title {
        font-weight: 500;
    }
}

.template-preview img {
    width: 8rem;
    height: 8rem;
    object-fit: contain;
    border-radius: 1rem;
}

.template-section {
    text-align: center;
}

#template-view {
    width: 100%;
    height: calc((100vh - var(--navbar-height)) / 2 - 6rem);
    border-radius: 1rem;
    object-fit: contain;
    background-color: var(--bg2-500);
    padding: 1rem;
    margin-bottom: 1rem;
}

#template-title {
    padding-bottom: 1rem;
}

.template-title,
.template-style,
.template-resolution {
    color: var(--p1-400);
    padding-bottom: .5rem;
    display: flex;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

#template-style,
#template-resolution {
    color: var(--p1-500);
    white-space: pre-wrap;
}

.template-resolution {
    padding-bottom: 2rem;
}

/* Client Dashboard */

.dashboard-tisari-mumbai {
    width: calc(100vw / 5 * 4 - 6rem - 1.5rem);
    flex-direction: column;
}

.dashboard-tisari-mumbai .body {
    text-align: justify;
    padding-bottom: 1.5rem;
}

.naina,
.khopta {
    padding-top: 3rem;
    display: flex;
}

.tisari-mumbai-description {
    display: block;
    padding-right: 6rem;
}

.tisari-mumbai-description .title {
    padding-bottom: 1.5rem;
}

.tisari-mumbai-description .highlight {
    color: var(--a1-300);
}

.naina-description .title,
.khopta-description .title {
    color: var(--a3-700);
    padding-bottom: 1.5rem;
}

.tisari-mumbai-information {
    display: flex;
}

.tisari-mumbai-images {
    width: 100%;
}

.naina-map img,
.khopta-map img,
.tisari-mumbai-images img {
    border-radius: 1.5rem;
}

.tisari-mumbai-images img {
    margin-top: 1.5rem;
    width: calc(35vw - 4.5rem);
    height: auto;
}

.major-left-container.about-tisari-mumbai .right {
    width: calc(35vw - 4.5rem);
}

.satbara-data-section {
    width: calc(100vw / 5 * 4 - 6rem - 1.5rem);
    display: flex;
    flex-direction: column;
}

.satbara-data-section btn {
    align-self: flex-start;
}

.payment-title {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.payment-manager-description,
.payment-heading,
.commission-heading {
    padding-bottom: 1.5rem;
}

.manager-horizontal {
    display: flex;
    padding-bottom: 1.5rem;
}

.purpose,
.area-range,
.payment-mode,
.payment-id,
.payment-amount,
.date-of-payment,
.source,
.amount,
.zone {
    width: 100%
}

.source {
    padding-right: 1.5rem;
}



.purpose,
.payment-mode,
.payment-amount {
    padding-right: 1.5rem;
}

.client-list,
.payment_id {
    padding-bottom: 1.5rem;
}

.payment-information .client-list {
    padding-bottom: 0px;
}


.amount {
    padding-left: 1.5rem;
}



.input-group.commission,
.commission-alert {
    padding-bottom: 1.5rem;
}

.site-officer-dashboard {
    width: 100%;
}

.officer-dashboard-title {
    padding-bottom: 1.5rem;
}

.new-journey-details,
.all-journey-details {
    padding-bottom: 1.5rem;
}

.journey-details {
    display: flex;
    justify-content: space-between;
}

.journey-start,
.journey-end,
.client-details {
    display: flex;
    flex-direction: row;
    padding-bottom: 1.5rem;
}

.locations {
    display: flex;
    flex-direction: column;
    padding-left: .5rem;
}

.client-name {
    color: var(--a4-300);
}

.reception-title,
.client-name {
    padding-bottom: 1.5rem;
}

.reception-line {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1.5rem;
}

.reception-line .date-of-inquiry,
.reception-line .invited-by-name,
.reception-line .site-visitor-name {
    padding-right: 1.5rem;
}

.reception-form button {
    margin-top: 1.5rem;
}

.payment-information {
    padding-bottom: 1.5rem;
}

.popup-content {
    width: 50%;
    height: 50%;
    max-width: 600px;
    background-color: var(--bg2-500);
    border-radius: 1.5rem;
    padding: 1.5rem 3rem;
    color: var(--p1-500);
    overflow: hidden;
}

.popup-content .popup-heading {
    padding-bottom: 1.5rem;
    color: var(--a4-300);
}

.popup-content .popup-description {
    padding-bottom: 1.5rem;
}

.popup-content .popup-content {
    padding-bottom: 1.5rem;
}

.action-buttons {
    display: flex;
    justify-content: space-between;
}

.rzpButton {
    display: none;
}

.select2-container--open {
    z-index: 1060;
}

.select2-dropdown {
    z-index: 1061;
    /* Slightly higher than the container */
}

.otp-wrapper {
    position: fixed;
    z-index: 1058;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.otp-modal {
    /* width: 100%;
    height: 100%; */
    max-width: 70vw;
    max-height: 90vh;
    background-color: var(--bg2-500);
    border-radius: 1.5rem;
    padding: 1.5rem 3rem;
    color: var(--p1-500);
}

.otp-actions {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1.5rem;
    padding-top: 1.5rem;
}

.otp-title {
    padding-bottom: 1.5rem;
    color: var(--a4-300);
}

.otp-description {
    padding-bottom: 1.5rem;
}

.otp {
    padding-bottom: 3rem;
}

.area_code {
    padding-left: 1.5rem;
}

.journey-title,
.ongoing-wrapper,
.no-ongoing-wrapper,
.client-id,
.journey-start-time,
.journey-start-location,
.journey-start-image,
.journey-start-reading,
.journey-location-time,
.journey-location-reading,
.journey-location-image {
    padding-bottom: 1.5rem;
}

.add-journey {
    width: calc(100vw / 5 * 4 - 6rem - 1.5rem);
}

#journey-start-button {
    cursor: pointer;
}

.file-data-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}

.file-data-section>* {
    flex: 1 1 0;
}

.file-data-title-desc,
.file-data-name {
    padding-bottom: 1rem;
}

.navigation-toggle {
    display: none;
}

.mobile-title {
    display: none;
}

.mobile-view {
    display: none;
}

.journey-horizontal {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1.5rem;
}

.no_of_passengers {
    padding-right: 1.5rem;
}

.vehicle_number,
.car_type,
.start_km_reading,
.location_km_reading,
.end_km_reading,
.journey-client-dropdown {
    padding-bottom: 1.5rem;
}

.journey-form-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    gap: 1.5rem;
}

.journey-form-body {
    height: 60vh;
    overflow-y: auto;
}

.journey-form-video-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.journey-form-wrapper video,
.journey-form-wrapper canvas {
    height: 300px;
    width: 300px;
    border-radius: 1.5rem;
    object-fit: cover;
}

.journey-form {
    flex: 1;
    overflow-y: auto;
    height: auto;
    max-height: 100vh;
    margin-bottom: 1.5rem;
}

.visit-type {
    padding-bottom: 1.5rem;
}

.table-form input[type="text"] {
    padding: 0px 10px !important;
    height: 44px !important;
}

.table-form .form-button {
    padding: 0px 20px !important;
    height: 44px !important;
    border-radius: 1rem !important;
    background-color: var(--bg1-500) !important;
    color: var(--a4-300) !important;
}

#client-name {
    display: none;
}

.investor_checkbox,
.associate-payment-description,
.staff-payment-description {
    padding-bottom: 1.5rem;
}

#new_investor_checkbox {
    margin-left: 0.5rem !important;
}

/* .searchable {

} */

.select2-selection__rendered {
    line-height: 54px !important;
}

.select2-container .select2-selection--single {
    height: 54px !important;
}

.select2-selection__arrow {
    height: 54px !important;
}

/* Input field */
.select2-selection__rendered {
    line-height: 54px !important;
}

/* Around the search field */
/* .select2-search {
    border: 1px solid #eee;
} */

/* Search field */
.select2-search input {
    border: 1px solid #eee !important;
    border-radius: 10px !important;
}

.select2-dropdown {
    border: 1px solid #eee !important;
    border-radius: 10px;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #eee !important;
    border-radius: 10px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--p1-400) !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    color: var(--p1-400) !important;
}

/* Each result */
.select2-results {
    color: var(--p1-500);
}

/* Higlighted (hover) result */
.select2-results__option--highlighted {
    color: var(--bg1-500);
    background-color: var(--a4-300);
}

/* Selected option */
.select2-results__option[aria-selected=true] {
    color: var(--bg1-500);
    background-color: var(--a4-300);
}


/* Media Queries */
@media (max-width: 991.98px) {
    .header {
        padding: 1rem 1.5rem;
    }

    /* HOME PAGE CSS */

    /* DASHBOARD NAVIGATION */
    .navigation-toggle,
    .close-button {
        visibility: visible !important;
        display: block;
        cursor: pointer;
        padding: 1rem;
        transition: all 0.3s ease-in-out;
    }

    .navigation-toggle:hover,
    .close-button:hover {
        color: var(--a4-300);
    }

    .mobile-background-wrapper {
        z-index: 1057;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
    }

    .dashboard-navigation {
        width: 75vw;
        height: 100%;
        max-width: 991.98px;
        background-color: rgba(246, 249, 250, 0.75);
        backdrop-filter: blur(5px);
        border-radius: 0rem 1.5rem 1.5rem 0rem;
    }

    .header .navbar {
        display: none;
    }

    .navbar-nav {
        flex-direction: column;
        align-items: center;
    }

    .navbar-nav .nav-item {
        margin: 0.5rem 0;
    }

    /* MISCELLANEOUS */
    .main-wrapper.even-padded {
        padding: var(--navbar-height) 1.25rem 0rem 1.25rem;
    }

    .desktop-title {
        display: none !important;
        padding-bottom: 1.5rem !important;
    }

    .desktop-view {
        display: none !important;
    }

    .mobile-view {
        display: block !important;
    }

    .mobile-title {
        display: block !important;
        padding-bottom: 1.5rem !important;
    }

    .major-left-container {
        display: flex;
        flex-direction: column;
        padding: 0rem !important;
    }

    .major-left-container .left {
        width: 100% !important;
        padding-right: 0rem !important;
        padding-bottom: 1.5rem;
    }

    .major-left-container .right {
        width: 100% !important;
    }

    .horizontal {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .dashboard-content {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0rem;
    }

    .dashboard-content>* {
        width: 100%;
    }

    .main-wrapper {
        background: var(--bg1-500);
        margin-left: 0;
        padding-left: 1.5rem;
    }

    .manage-profile {
        display: flex;
        flex-direction: column;
    }

    .main-section {
        width: 100%;
        padding: 0rem;
    }

    .minor-section {
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .dashboard-section-half {
        width: 100%;
    }

    /* CLIENT DASHBOARD */
    .naina-map {
        width: 100%;
        height: auto;
    }

    .tisari-mumbai-images {
        display: none;
    }

    .user-avatar {
        display: none;
    }

    .journey-form-wrapper {
        flex-direction: column !important;
    }

    .video-wrapper {
        width: 100%;
        height: 30vh;
        overflow: hidden;
        position: relative;
    }

    .journey-form-wrapper video,
    .journey-form-wrapper canvas {
        width: 100%;
        max-width: 100%;
        height: 30vh !important;
        min-height: 30vh !important;
        max-height: 30vh !important;
        object-fit: cover;
    }

    .journey-form-body {
        height: 35vh !important;
        overflow-y: auto;
    }

    /* OTP */
    .otp-modal {
        width: 90vw;
        height: auto;
        max-height: 90vh;
        max-width: 90vw;
        padding: 1.5rem 2rem;
    }

    /* MANAGE PROFILE */
    .two-fields {
        display: flex;
        flex-direction: column;
    }

    .two-fields .first {
        padding-bottom: 1rem;
    }

    .field .label {
        width: 100%;
    }

    .field {
        width: 100% !important;
    }

    .field select {
        width: 100% !important;
    }

    /* BOOKING DETAILS */
    .leads-tabular-list {
        overflow: auto;
    }

    .journey-tabular-list {
        overflow: auto;
        width: auto !important;
    }

    .leads-table {
        width: auto;
    }

    .leads-table .empty-result {
        text-align: start;
    }

    .leads-search {
        display: flex;
        flex-direction: column;
    }

    .search-bar {
        width: 100%;
    }

    .search-input {
        width: 100% !important;
    }

    .results-count {
        padding: 1rem;
    }

    /* NEWS SECTION */
    .latest-news {
        width: 100%;
    }

    .trending-section {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .secondary-trending {
        padding-left: 0rem;
        width: 100% !important;
    }

    .primary-trending,
    .primary-news-image {
        width: 100% !important;
    }

    .trending-title {
        padding-top: 1.5rem;
    }

    .featured-news,
    .editors-news {
        width: 100%;
    }

    .news-description .mobile-title,
    .news-tags {
        padding-bottom: .25rem;
    }

    .news-meta-data {
        padding: 0rem;
    }

    .news-description .mobile-title:hover {
        text-decoration: underline;
        color: var(--a4-300);
    }

    /* DOCUMENTS */

    .file-data-name {
        flex: 2;
    }

    .file-data-description {
        flex: 3;
    }

    /* ACCOUNTANT DASHBOARD */
    .area-manager-section,
    .payment-manager-section {
        width: 100% !important;
        padding: 0rem;
    }

    .area_code {
        padding: 0rem;
    }

    .table-responsive select,
    .table-responsive input {
        width: auto !important;
    }

    .manager-horizontal {
        display: flex;
        flex-direction: column;
    }

    .payment-information .client-list,
    .source,
    .date-of-payment {
        padding-bottom: 1.5rem;
    }

    .source {
        padding-right: 0rem;
    }

    .amount {
        padding-left: 0rem;
    }

    /* SITE OFFICER */

    .add-journey {
        width: 100%;
    }

    .profile-section .field {
        width: 100%;
        padding-top: 1.5rem;
    }

    .reception-line {
        display: flex;
        flex-direction: column;
    }

    .date-of-inquiry,
    .invited-by-name,
    .site-visitor-name {
        padding-right: 0rem !important;
        padding-bottom: 1.5rem;
    }

    /* ASSOCIATE DASHBOARD */
    .dashboard-home,
    .stats,
    .user-dates,
    .self-brand {
        display: flex;
        flex-direction: column;
    }

    .date-of-joining {
        padding-bottom: 1.5rem;
    }

    .area-sold {
        margin-left: 0rem;
        margin-top: 1.5rem;
    }

    .dashboard-column-1 {
        height: auto;
        padding-bottom: 1.5rem;
    }

    .dashboard-column-2 {
        padding: 0rem;
        width: 100%;
    }

    .leads-pie-chart {
        width: 70vw;
        height: 70vw;
    }

    .leads-pie-chart .donut-center {
        width: 60vw;
        height: 60vw;
    }

    .dashboard-tile.lead-statistics {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .leads-summary-bar {
        display: none;
    }

    .report-download {
        width: 100%;
    }

    .lead-report {
        width: 100% !important;
    }

    /* SIGN IN */
    .sign-in-image-container img {
        display: none;
    }

    .sign-up-container.major-right-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: auto;
        padding-right: 0rem;
        padding-top: 0rem;
    }

    .sign-up-container.major-right-container .right {
        width: 100%;
    }

    .sign-up-container.major-right-container .left {
        padding-right: 0;
    }

    .sign-up-container .invite-code,
    .sign-up-container .associate-name {
        display: flex;
        flex-direction: column;
        align-items: start;
        text-align: start;
    }

    .sign-up-container .associate-details {
        padding-bottom: 3rem;
    }

    .sign-up-form {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: auto;
    }

    .sign-up-form button {
        width: 100%;
    }

    .form-actions .btn-primary {
        font-family: 'Outfit', sans-serif;
        font-size: 0.7rem;
    }
}

/* Priority classes */

.hidden {
    display: none;
}