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

:root {
    /* --main-color: #4299e1; */
    --main-color: #1FB6FF;
    --main-color-secound: #00406c;
    --bg-body: #ffffff;
    --bg-card: #f6fcff;
    --bg-input: #f4f5f6;
    --main-text: #1a1a1a;
    --white-color: #ffffff;
    --text-paragraph: #768298;
    --border-color: #D6DBE6;
    --shadow: 10px 5px 10px #f1f1f1;
    --margin-inline: 12rem;
    --margin-inline-single: 7rem;
}

/* Start Root */

*,
body {
    font-family: "Outfit", sans-serif;
}

body {
    background-color: var(--bg-body);
    color: var(--main-text);
}

.page-body {
    margin: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

svg {
    animation: strok 1.5s reverse;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;
}

::placeholder {
    color: #60606089 !important;
    font-weight: 400;
}

.card {
    border: none;
}

.card-header {
    padding-bottom: 0.5rem;
}

/* End Root */
/* Start Reset Tag */
a {
    color: var(--main-text);
    border-color: var(--border-color) !important;
}

a:hover {
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-unstyled {
    list-style: none !important;
}

input,
select,
textarea {
    box-shadow: none !important;
    outline: none !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--main-color-secound) !important;
}

html[dir="rtl"] .input-icon-addon {
    right: auto;
    left: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.1;
    font-weight: 500;
    margin-bottom: 0;
}

section {
    min-height: 100vh;
}

hr {
    margin: 0.5rem auto !important;
}

/* End Reset Tag */

/* Start Var */
.btn-info {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.btn-link {
    color: var(--main-text);
}

.manage_request_area .form-selectgroup {
    display: flex;
}

.manage_request_area .form-selectgroup .form-selectgroup-item {
    width: 100%;
}

.manage_request_area .form-selectgroup .form-selectgroup-input+.form-selectgroup-label {
    padding-block: 0.6rem;
    border-radius: 12px;
    border-width: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.manage_request_area .form-selectgroup .form-selectgroup-input:checked+.form-selectgroup-label {
    border-color: var(--main-text);
}

.copy {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.list_languages a.active {
    background-color: var(--main-color);
    color: white;
}

.btn-app {
    background-color: var(--main-color);
    color: var(--white-color);
}

.btn-app:active,
.btn-app:hover {
    background-color: var(--main-color);
    color: white;
    opacity: .9;
}

.buttons_tab_area a.active {
    background-color: var(--main-color);
    color: white;
}

.send_sos_alert {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 3rem;
    height: 2.5rem;
    border-radius: 12px;
}

.send_sos_alert svg {
    --aous-aw-btn-icon-size: 2rem;
}

/* End Var */

/* Start App navbar */
.app_navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-inline: calc(var(--margin-inline) - 0.5rem);
    padding-block: 0.3rem;
}

.app_navbar.single_navbar {
    margin-inline: var(--margin-inline-single);
}

.app_navbar a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.7rem 1rem;
}

.app_navbar a:hover {
    color: var(--main-color);
}

.app_navbar.account_navbar a {
    padding: 0.6rem;
}

.app_navbar .left_area {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.app_navbar .left_area .logo_area a {
    font-size: 1.45rem;
    font-weight: 600;
}

.app_navbar .links_area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.app_navbar .links_area .auth_action_link {
    position: relative;
}

.app_navbar .links_area .auth_action_link a {
    display: inline-flex;
}

.app_navbar .links_area .auth_action_link a img {
    background-color: var(--main-color);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.app_navbar .links_area .auth_action_link .auth_links {
    position: absolute;
    left: 0.5rem;
    top: 3.5rem;
    width: 10rem;
    border: 1px solid var(--border-color);
    background: var(--bg-body);
    border-radius: 12px;
    padding-block: 0.5rem;
    z-index: 99;
    visibility: hidden;
    opacity: 0;
    transform: translateY(1rem);
    transition: all 0.2s ease-in-out;
}

.app_navbar .links_area .auth_action_link .auth_links.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.app_navbar .links_area .auth_action_link .auth_links a {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.4rem 0.75rem;
}

/* End App navbar */

/* Start App Image */
.app_image {
    position: relative;
    height: 23rem;
    padding-top: 5rem;
    padding-bottom: 3rem;
    /* background-color: var(--bg-card); */
}

.app_image.hero_image {
    height: 26rem;
    user-select: none;
}

.app_image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.app_image.hero_image img {
    position: absolute;
    top: -12px;
    height: 140%;
}

.app_text {
    text-align: center;
    font-size: 2.25rem;
    font-weight: 600;
    width: 50%;
    margin: auto;
}

.app_text .hero_title {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-size: 3.5rem;
    font-weight: 600;
    color: var(--main-text);
    margin: 0;
}

.app_text .word_slider {
    position: relative;
    height: 1.4em;
    margin-inline-start: 0;
    display: inline-grid;
    align-items: center;
    overflow: hidden;
    text-align: start;
    color: var(--main-color);
}

.app_text .word {
    grid-area: 1 / 1;
    white-space: nowrap;
    line-height: 1.4;
    transform: translateY(100%);
    transition: transform 0.6s ease;
}

.app_text .word.active {
    transform: translateY(0);
}

.app_text .word.exit {
    transform: translateY(-100%);
}

.app_text span:not(.word_slider, .word) {
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 300;
    color: var(--text-paragraph);
    display: block;
    margin-top: 1rem;
    text-align: center;
}

/* End App Image */

/* Start Search form */

.form_landing {
    position: relative;
    margin-top: 2rem;
    z-index: 99;
    background: white;
    box-shadow: 1px 1px 10px #ebebeb;
    border-radius: 16px;
    margin-inline: var(--margin-inline);
    padding-block: 1.25rem;
    padding-inline: 0.75rem;
}

.form_landing .action_buttons_hero {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.form_landing .action_buttons_hero a {
    color: #1a1a1a;
    background-color: var(--bg-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 30px !important;
}

.form_landing .action_buttons_hero a.active {
    background: var(--main-color);
    color: white;
}

.form_landing .action_buttons_hero a:not(.active) {
    color: var(--main-color);
}

.search_form_area .search_form_content {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr 15% 15% 15%;
    gap: 8px;
    padding-inline-start: 0.15rem;
}

.search_form_area .search_form_content .input_area {
    position: relative;
}

.search_form_area .input-icon .switch_cities {
    position: absolute;
    top: 50%;
    right: -18px;
    transform: translate(-50%, -50%);
    z-index: 999;
    padding: 8px;
    display: none;
}

.search_form_area .search_form_content input.city_input {
    cursor: pointer;
    font-weight: 600;
}

.search_form_area .search_form_content .passenger_area button,
.search_form_area .search_form_content .calendar_area button {
    text-align: start;
    justify-content: start;
}

.search_form_area .search_form_content .input_area button,
.search_form_area .search_form_content .input_area input {
    color: var(--main-text);
    border: 1px solid var(--border-color);
    box-shadow: unset;
    background-color: transparent;
    padding: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    border-radius: 14px;
}

.search_form_area .search_form_content .input_area .input-icon input {
    padding-left: 2.5rem;
}

.search_form_area .search_form_content .input_area .input-icon input.error {
    border: 1px solid var(--aous-aw-danger);
}

.search_form_area .search_form_content .input_area svg {
    color: var(--main-text);
    --aous-aw-icon-size: 1.35rem;
    --aous-aw-btn-icon-size: 1.35rem;
    stroke-width: 2;
}

.search_form_area .search_form_content .input_area button {
    width: 100%;
}

.search_form_area .search_form_content .input_area input:hover,
.search_form_area .search_form_content .input_area button:hover,
.search_form_area .search_form_content .input_area input:focus,
.search_form_area .search_form_content .input_area button:focus {
    background-color: var(--bg-input);
}

.search_form_area .search_form_content .input_area .action_button_area {
    background-color: var(--main-color);
    color: var(--white-color);
    font-size: 1rem;
    font-weight: 500;
}

.search_form_area .search_form_content .input_area .action_button_area:hover {
    background-color: var(--main-color-secound);
}

.search_form_area .search_form_content .input_area .action_button_area svg {
    color: white;
}

.search_form_area .search_form_content .input_area .dropdown_list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    max-height: 320px;
    overflow-y: auto;
    background: var(--white-color);
    border-radius: 1rem;
    padding: 0.5rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    opacity: 0;
    transform: translateX(10px);
    visibility: hidden;
    transition: all 0.2s ease-in-out;
}

.search_form_area .search_form_content .input_area.active .dropdown_list {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.search_form_area .search_form_content .input_area .dropdown_list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.6rem;
    margin-bottom: 0.5rem;
    border-radius: 12px;
}

.search_form_area .search_form_content .input_area .dropdown_list a:hover,
.search_form_area .search_form_content .input_area .dropdown_list a.active {
    background: var(--bg-input);
}

.search_form_area .search_form_content .input_area .dropdown_list a .text_area span {
    display: block;
    font-size: 0.9rem;
}

.search_form_area .search_form_content .input_area .dropdown_list a .text_area .city_name {
    font-weight: 500;
}

.search_form_area .search_form_content .input_area .dropdown_list a .text_area .country_name {
    color: var(--text-paragraph);
    margin-top: 0.25rem;
}

.search_form_area .search_form_content .input_area .dropdown_list .no_results {
    width: 100%;
    padding: 0.6rem;
    margin-bottom: 0.5rem;
    border-radius: 12px;
    font-size: 1rem;
}

.search_form_area .search_form_content .input_area .calendar_area {
    position: relative;
}

.search_form_area .search_form_content .input_area .calendar_popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    width: 320px;
    background: var(--white-color);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
    z-index: 9999;
    display: block;
    transform: translateX(-45%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
}

.search_form_area .search_form_content .calendar_area.active .calendar_popup {
    transform: translateX(-50%);
    opacity: 1;
    visibility: visible;
}

.search_form_area .search_form_content .input_area .calendar_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 1rem;
}

.search_form_area .search_form_content .input_area .calendar_header .nav {
    display: flex;
    gap: .5rem;
}

html[dir="rtl"] .search_form_area .search_form_content .input_area .calendar_popup {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

.search_form_area .search_form_content .input_area .calendar_dates span.disabled {
    pointer-events: none;
    opacity: .35;
}

.search_form_area .search_form_content .input_area .calendar_dates span.today {
    background-color: var(--main-color);
    color: var(--white-color);
}

.search_form_area .search_form_content .input_area .calendar_dates span.active {
    background: var(--main-color);
    color: var(--white-color);
}

.search_form_area .search_form_content .input_area .calendar_header button {
    border: none;
    background: none;
    cursor: pointer;
}

.search_form_area .search_form_content .input_area .calendar_days,
.search_form_area .search_form_content .input_area .calendar_dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.search_form_area .search_form_content .input_area .calendar_days span {
    font-size: .8rem;
    color: var(--text-paragraph);
    margin-bottom: .5rem;
}

.search_form_area .search_form_content .input_area .calendar_dates span {
    padding: .6rem;
    border-radius: 50%;
    cursor: pointer;
    transition: .2s;
}

.search_form_area .search_form_content .input_area .calendar_dates span:hover {
    background: var(--bg-input);
}

.search_form_area .search_form_content .input_area .calendar_dates span.active {
    background: var(--main-color);
    color: var(--white-color);
}

.search_form_area .search_form_content .passenger_area {
    position: relative;
}

.search_form_area .search_form_content .passenger_popup {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 260px;
    background: var(--white-color);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
    display: block;
    transform: translateX(0);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    z-index: 9999;
}

html[dir="rtl"] .search_form_area .search_form_content .passenger_popup {
    right: auto;
    left: unset;
    top: calc(100% + -2px);
}

.search_form_area .search_form_content .passenger_area.active .passenger_popup {
    transform: translateX(-10px);
    opacity: 1;
    visibility: visible;
}

.search_form_area .search_form_content .passenger_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search_form_area .search_form_content .passenger_row .controls {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.search_form_area .search_form_content .passenger_row button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--white-color);
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search_form_area .search_form_content .passenger_row button svg {
    --aous-aw-icon-size: 1rem;
}

.search_form_area .search_form_content .passenger_row button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.search_form_area .search_form_content .passenger_row .count {
    font-size: 1rem;
    min-width: 20px;
    text-align: center;
    font-weight: 600;
}

/* End Search form */

/* Start How travelling */
.how_travelling {
    margin-top: 8rem;
    margin-inline: var(--margin-inline);
}

.how_travelling .header_section {
    text-align: center;
}

.how_travelling .header_section h1 {
    font-size: 2.1rem;
    font-weight: 600;
}

.how_travelling .cards_area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 3rem;
}

.how_travelling .cards_area a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.how_travelling .cards_area a .text_area {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.how_travelling .cards_area a .text_area .icon_area {
    padding: 1rem;
}

.how_travelling .cards_area a .text_area .icon_area svg {
    --aous-aw-icon-size: 3rem;
    color: var(--main-text);
}

.how_travelling .cards_area a .text_area span {
    display: block;
}

.how_travelling .cards_area a .text_area span.title_area {
    font-size: 1.1rem;
    font-weight: 500;
}

.how_travelling .cards_area a .text_area span.description_area {
    font-size: 0.9rem;
    color: var(--text-paragraph);
}

.how_travelling .cards_area a .icon_action_area {
    padding: 0.3rem;
    margin-inline: 1rem;
    border-radius: 50%;
}

.how_travelling .cards_area a .icon_action_area svg {
    --aous-aw-icon-size: 1.7rem;
    color: var(--main-color-secound);
}

/* End How travelling */

/* Start Share Ride Card */
.share_ride_card_area {
    margin-block: 6rem;
    margin-inline: var(--margin-inline);
    background-color: var(--bg-card);
    padding: 3rem;
    border-radius: 25px;
    text-align: center;
}

.share_ride_card_area h1 {
    font-size: 2.25rem;
    color: var(--main-text);
    margin-bottom: 1rem;
}

.share_ride_card_area p {
    font-size: 1rem;
    color: var(--text-paragraph);
    width: 70%;
    margin: auto;
    margin-bottom: 1.5rem;
}

.share_ride_card_area .btn {
    font-size: 1.1rem;
    padding-inline: 1rem;
    border-radius: 30px;
    padding-block: 0.7rem;
}

.share_ride_card_area .btn svg {
    --aous-aw-btn-icon-size: 1.5rem;
}

/* End Share Ride Card */

/* Start Service cards */
.service_cards_area {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-block: 6rem;
    margin-inline: var(--margin-inline);
}

.service_cards_area .service_card {
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: 18px;
}

.single_page_area .service_cards_area .service_card {
    border: unset;
    box-shadow: 0px 4px 10px var(--bg-input);
    text-align: center;
}

.single_page_area.publish_ride_info_area .service_cards_area {
    margin-block: 3rem;
}

.service_cards_area .service_card .icon_area {
    width: 50px;
    background-color: var(--bg-card);
    border-radius: 50%;
    margin: auto;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service_cards_area .service_card .icon_area svg {
    --aous-aw-icon-size: 2rem;
    stroke-width: 2;
    color: var(--main-text);
}

.service_cards_area .service_card .text_area {
    margin-top: 1rem;
    text-align: center;
}

.service_cards_area .service_card .text_area .title_content {
    font-size: 1.2rem;
    font-weight: 500;
    display: block;
    margin-bottom: 0.5rem;
}

.service_cards_area .service_card .text_area .description_content {
    font-size: 0.9rem;
    display: block;
    color: var(--text-paragraph);
}

.single_page_area .action_buttons_area {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 4rem;
    background: white;
    text-align: center;
}

.single_page_area .action_buttons_area a {
    font-size: 1rem;
    font-weight: 500;
    padding-block: 0.85rem;
    padding-inline: 1.25rem;
    margin-top: 0.5rem;
    border-radius: 30px;
    background-color: var(--main-color);
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

/* End Service cards */

/* Start Footer */
.web_footer {
    background-color: #fbfbfb;
    padding-inline: var(--margin-inline);
    padding-top: 5rem;
    padding-bottom: 1rem;
}

.web_footer .sections_card {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr 1fr;
}

.web_footer .section_content .section_title {
    display: block;
    font-size: 1.25rem;
    color: var(--main-text);
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.web_footer .section_content ul {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.web_footer .section_content ul li a {
    color: var(--main-text);
    font-weight: 500;
    font-size: 1rem;
}

.web_footer .section_content ul li a:hover {
    color: var(--main-color-secound);
}

.web_footer .other_links {
    padding-top: 4.5rem;
    display: grid;
    grid-template-columns: 3fr 0.65fr;
    align-items: center;
}

.web_footer .other_links .social_media ul {
    display: flex;
    gap: 1rem;
}

.web_footer .other_links .social_media ul li a {
    color: var(--main-text);
    font-weight: 500;
}

.web_footer .other_links .social_media ul li a svg {
    --aous-aw-icon-size: 1.5rem;
}

.web_footer .other_links .language_links ul li a {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--main-text);
    font-weight: 600;
    font-size: 1rem;
    background: #f5f5f5;
    padding: 0.75rem;
    border-radius: 12px;
    text-align: center;
    justify-content: center;
    width: max-content;
}

.web_footer .other_links .language_links ul li a svg {
    stroke-width: 2;
    --aous-aw-icon-size: 1.3rem;
}

.web_footer .app_stores {
    padding-top: 2.5rem;
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.web_footer .app_stores a img {
    width: 8rem;
    height: 3rem;
    object-fit: contain;
}

.web_footer .copyright {
    padding-top: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* End Footer */


/* Start Faqs section */

.faqs_area {
    margin-top: 8rem;
    padding-bottom: 4rem;
    margin-inline: var(--margin-inline);
}

.faqs_area .header_title {
    margin-bottom: 2.5rem;
}

.faqs_area .header_title h1 {
    font-size: 2.25rem;
    line-height: normal;
    text-align: center;
}

.faqs_area .header_title p {
    font-size: 1.1rem;
}

.faqs_area .question_area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1rem;
}

.faqs_area .question_area .accordion-item {
    border: 1px solid var(--border-color);
    box-shadow: 1px 2px 10px #f6f6f6;
    border-radius: 12px;
    padding: 0.3rem;
}

.faqs_area .question_area .accordion-item:first-of-type .accordion-button {
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--main-text);
}

.faqs_area .question_area .accordion-item .accordion-body {
    font-size: 0.9rem;
    line-height: 1.6;
}

.faqs_area .question_area .accordion {
    margin-bottom: 1rem;
}

.faqs_area .question_area .accordion-button:after,
.faqs_area .question_area .accordion-button:not(.collapsed)::after {
    background-image: unset
}

/* End Faqs section */

/* Start Safe info */
.safe_info_area {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    margin-inline: var(--margin-inline);
    align-items: center;
    gap: 2rem;
    margin-top: 8rem;
}

.safe_info_area h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.safe_info_area p {
    font-size: 1.1rem;
    color: var(--text-paragraph);
}

.safe_info_area .btn {
    margin-top: 1rem;
    font-size: 1rem;
    padding-block: 0.85rem;
    padding-inline: 1rem;
    border-radius: 30px;
    background-color: var(--main-color);
    color: white;
}

/* End Safe info */

/* Start Safe info */
.start_carpooling_area {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    margin-inline: var(--margin-inline);
    align-items: center;
    gap: 4rem;
    margin-top: 5rem;
}

.start_carpooling_area h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.start_carpooling_area p {
    font-size: 1.1rem;
    color: var(--text-paragraph);
}

.start_carpooling_area .btn {
    margin-top: 1rem;
    font-size: 1rem;
    padding-block: 0.85rem;
    padding-inline: 1rem;
    border-radius: 30px;
    background-color: var(--main-color);
    color: white;
}

.start_carpooling_area .image_area img {
    border-radius: 12px;
}

/* End Safe info */

/* Start Search */
.search_area {
    min-height: 100vh;
    background-color: var(--bg-body);
}

.search_area .header_title_page {
    text-align: center;
    font-size: 2.5rem;
    padding-block: 1.5rem;
    background-color: white;
}

.search_area .search_form_area {
    background: white;
    padding-bottom: 1.25rem;
}

.search_area.do_search_action .search_form_area {
    margin-top: 2rem;
}

.search_area .search_form_area .search_form_content {
    margin-top: 0;
}

.search_area .search_content_area {
    margin-top: 3rem;
    margin-inline: var(--margin-inline);
    display: grid;
    grid-template-columns: 25% 1fr;
    gap: 5rem;
}

.search_area .search_content_area .option_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.search_area .search_content_area .filter_area .filter_options {
    position: relative;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
}

.search_area .search_content_area .filter_area .filter_options::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: var(--border-color);
    opacity: 0.5;
}

.search_area .search_content_area .filter_area .filter_options .title_text {
    font-size: 1.1rem;
    font-weight: 600;
    display: block;
    margin-bottom: 1.5rem;
    text-align: start;
}

.search_area .search_content_area .option_area .form-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    cursor: pointer;
    padding-block: 0.6rem;
    margin-inline: 1.1rem
}

.search_area .search_content_area .option_area .form-check-input {
    border-color: var(--main-text) !important;
    border-width: 2px;
    width: 20px;
    height: 20px;
}

.search_area .search_content_area .option_area .form-check-input:checked {
    background-color: var(--main-text);
    background-size: 1.5rem;
}

.search_area .search_content_area .option_area .form-check-label {
    font-size: 1rem;
    font-weight: 600;
}

.search_area .search_content_area .option_area svg {
    --aous-aw-icon-size: 1.5rem;
}

.search_area .search_content_area .ride_info_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search_area .search_content_area .ride_info_area .text_info_area {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search_area .search_content_area .ride_info_area span {
    font-size: 1rem;
}

.search_area .search_content_area .ride_info_area .time_area span {
    font-weight: 600;
}

.search_area .search_content_area .ride_info_area .location_area svg,
.search_area .search_content_area .ride_info_area .location_area span {
    color: var(--text-paragraph);
}

.search_area .search_content_area .rides_cards_area {
    margin-top: 0.75rem;
}

.search_area .search_content_area .rides_cards_area .ride_card {
    display: block;
    background-color: var(--bg-body);
    border-radius: 14px;
    box-shadow: 1px 1px 10px #ebebeb !important;
    margin-bottom: 1rem;
}

.search_area .search_content_area .rides_cards_area .ride_card.complete {
    opacity: .4;
    user-select: none;
    cursor: unset;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    padding: 1.1rem;
    padding-bottom: 0.6rem;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card {
    width: 20rem;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card .time_line {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card .time_line .line_content {
    position: relative;
    display: block;
    width: 90px;
    background: var(--main-text);
    height: 3px;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card .time_line .line_content::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--main-text);
    background-color: white;
    z-index: 99;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card .time_line .line_content:first-of-type::before {
    top: -3px;
    left: -2px;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card .time_line .line_content:last-of-type::before {
    top: -3px;
    right: -2px;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .location_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card .start_time,
.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card .end_time,
.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .location_card .from_location,
.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .location_card .to_location {
    font-size: 0.95rem;
    font-weight: 500;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .location_card {
    align-items: start;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .location_card .from_location,
.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .location_card .to_location {
    min-width: 10rem;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .header_info_card .time_card .total_time {
    font-size: 0.85rem;
}

.search_area .search_content_area .rides_cards_area .ride_card .header_card .ride_price_area .ride_price {
    font-size: 1.4rem;
    font-weight: 600;
}

.search_area .search_content_area .rides_cards_area .ride_card .driver_info {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
}

.search_area .search_content_area .rides_cards_area .ride_card .driver_info .type_car svg {
    --aous-aw-icon-size: 1.6rem;
}

.search_area .search_content_area .rides_cards_area .ride_card .driver_info .driver_name,
.search_area .search_content_area .rides_cards_area .ride_card .driver_info .driver_rate {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 500;
    font-size: 1rem;
}

.search_area .search_content_area .rides_cards_area .ride_card .driver_info .driver_name img {
    width: 35px;
    border-radius: 50%;
}

.search_area .search_content_area .rides_cards_area .ride_card .driver_info .driver_rate svg {
    --aous-aw-icon-size: 1.1rem;
}

.search_area .search_history_area {
    margin-inline: var(--margin-inline);
    width: 35%;
    margin: auto;
    padding-top: 2rem;
}

.search_area .search_history_area .search_history_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

.search_area .search_history_area .search_history_empty .icon {
    margin-bottom: 0.5rem;
}

.search_area .search_history_area .search_history_empty .icon svg {
    --aous-aw-icon-size: 2rem;
}

.search_area .search_history_area .search_history_empty h3 {
    font-size: 1.5rem;
}

.search_area .search_history_area .search_history_empty p {
    font-size: 1rem;
}

.search_area .search_history_area .search_history_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 1rem;
    transition: all 0.2s ease-in-out;
    padding: 0.75rem;
    border-radius: 14px;
    box-shadow: 1px 1px 10px #f5f5f5;
    background-color: var(--bg-body);
}

.search_area .search_history_area .search_history_item:hover {
    background-color: #e5e5e5;
}

.search_area .search_history_area .search_history_item .left_content>svg {
    --aous-aw-icon-size: 1.5rem;
}

.search_area .search_history_area .search_history_item .left_content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.search_area .search_history_area .search_history_item .left_content .content .route {
    font-size: 1rem;
    font-weight: 500;
}

.search_area .search_history_area .search_history_item .left_content .content .route svg {
    --aous-aw-icon-size: 1.35rem;
}

.search_area .search_history_area .search_history_item .right_content svg {
    --aous-aw-icon-size: 1.5rem;
}

/* End Search */

/* Start Auth */
.auth_area {
    min-height: 100vh;
}

.auth_area .auth_navbar {
    max-width: 50%;
    padding: 1rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10.5rem;
}

.auth_area .auth_navbar .logo_area a {
    font-size: 1.3rem;
    font-weight: 700;
    display: inline-block;
    padding: 0.5rem;
}

.auth_area .auth_navbar .tools_action_area {
    display: flex;
    align-items: center;
}

.auth_area .auth_navbar .tools_action_area a {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 500;
    font-size: 1.1rem;
}

.auth_area .auth_app_area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.auth_area .form_area .header_section {
    margin-bottom: 2rem;
}

.auth_area .form_area .header_section h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--main-text);
}

.auth_area .form_area .header_section p {
    font-size: 1rem;
    color: var(--text-paragraph);
}

.auth_area .form_area .with_col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.auth_area .form_area .input_content {
    margin-bottom: 1.25rem;
    position: relative;
}

.auth_area .form_area .input_content label {
    font-size: .9rem;
}

.auth_area .form_area .input_content .form-selectgroup-input+.form-selectgroup-label {
    color: var(--text-paragraph);
    border: 1px solid var(--border-color);
    min-width: 6rem;
    border-radius: 0.4rem;
    font-size: 1rem;
}

.auth_area .form_area .input_content .form-selectgroup-input:checked+.form-selectgroup-label {
    color: var(--white-color);
    background: var(--main-color);
}

.auth_area .form_area .input_content a.help_link {
    display: block;
    margin-top: 4px;
    text-align: end;
    color: var(--text-paragraph);
}

.auth_area .form_area .phone_number_area {
    display: grid;
    align-items: center;
    grid-template-columns: 40% 1fr;
    gap: 1rem;
}

.auth_area .form_area .note_area span {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-paragraph);
}

.auth_area .form_area .external_link_area {
    margin-top: 1rem;
    text-align: center;
}

.auth_area .form_area .external_link_area span {
    font-size: 1rem;
}

.auth_area .form_area .external_link_area span a {
    font-weight: 500;
}

.auth_area .form_area .show_hidden {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, 15%);
    z-index: 9999;
    cursor: pointer;
    display: none;
}

.auth_area .form_area .login_password .show_hidden {
    top: 40%;
}

.auth_area .addon_content .show_hidden.active {
    display: block;
}

.auth_area .form_area .show_hidden svg {
    --aous-aw-icon-size: 1.4rem;
}

.auth_area .submit_action {
    border-radius: 30px;
    background-color: var(--main-color);
    color: white;
    font-size: 1rem;
    padding-block: 0.7rem;
    width: 100%;
}

.auth_area .image_area {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
}

.auth_area .image_area img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}

/* End Auth */

/* Start Wizard */
.form_area {
    position: relative;
    padding-inline: 11rem;
    margin-top: 5rem;
}

.form_area .wizard_step {
    opacity: 1;
    display: none;
    width: 100%;
    transition: all 0.3s ease;
}

.form_area .wizard_step.active {
    display: block;
    position: relative;
}

.form_area .wizard_step .wizard_header {
    margin-bottom: 2.5rem;
}

.form_area .wizard_step .wizard_title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--main-text);
}

.form_area .wizard_step .wizard_description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-paragraph);
    max-width: 560px;
}

.form_area .wizard_step .wizard_actions {
    margin-top: 3rem;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.form_area .wizard_step .wizard_actions button {
    min-width: 10rem;
    font-size: 1rem;
    padding-block: 0.7rem;
}

.form_area .wizard_step .wizard_actions button.wizard_next {
    background-color: var(--main-color);
    color: white;
}

.form_area .wizard_step .wizard_actions button.wizard_back {
    border-color: transparent;
    box-shadow: none;
    min-width: unset;
}

.form_area .wizard_step .wizard_actions .get_started_btn {
    border-radius: 30px;
    background-color: var(--main-color);
    color: white;
    width: 100%;
}

.form_area .wizard_step .wizard_actions.center {
    justify-content: center;
}

.form_area .wizard_step .wizard_step.leaving {
    opacity: 0;
    transform: translateY(-10px);
    transition: all .3s ease;
}

.form_area .wizard_step .wizard_body {
    min-height: 10rem;
}

.form_area .wizard_step .wizard_body .our_logo {
    width: 10rem;
    height: 10rem;
    object-fit: cover;
    border-radius: 50%;
}

.form_area .wizard_step .wizard_body .options_area {
    display: grid;
    gap: 0.5rem;
}

.form_area .wizard_step .wizard_body .options_area.one_grid {
    grid-template-columns: repeat(1, 1fr);
}

.form_area .wizard_step .wizard_body .options_area.tow_grid {
    grid-template-columns: repeat(2, 1fr);
}

.form_area .wizard_step .wizard_body .options_area.three_grid {
    grid-template-columns: repeat(3, 1fr);
}

.form_area .wizard_step .wizard_body .options_area .form-selectgroup-item .form-selectgroup-label {
    font-size: 1rem;
    padding-block: 0.8rem;
    color: var(--main-text);
}

.form_area .wizard_step .wizard_body .options_area .form-selectgroup-input:checked+.form-selectgroup-label {
    color: var(--white-color);
    border-color: var(--main-color);
    background: var(--main-color);
}

.form_area .wizard_step .wizard_body .input_area {
    text-align: start;
    margin-bottom: 1rem;
}

.form_area .wizard_step .wizard_body .input_area label {
    font-size: 1rem;
}

.form_area .wizard_step .wizard_body .input_area input {
    padding-block: 0.85rem;
    font-size: 1rem;
}

.wizard_body.has-error {
    animation: shake 0.3s;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    50% {
        transform: translateX(6px);
    }

    75% {
        transform: translateX(-4px);
    }

    100% {
        transform: translateX(0);
    }
}

/* End Wizard */

/* Start Dashboard */
.dashboard_app {
    padding-top: 3rem;
    padding-bottom: 3rem;
    min-height: 100vh;
    margin-inline: calc(var(--margin-inline));
    display: grid;
    grid-template-columns: 25% 1fr;
    gap: 5rem;
}

.dashboard_app .dashboard_aside .type_work {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bg-input);
    gap: 1rem;
    padding: 0.25rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
}

.dashboard_app .dashboard_aside .type_work a {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: 12px;
    font-weight: 500;
    justify-content: center;
    gap: 0.25rem;
}

.dashboard_app .dashboard_aside .type_work a.active {
    background: var(--bg-body);
}

.dashboard_app .dashboard_aside ul li {
    margin-bottom: 0.25rem;
}

.dashboard_app .dashboard_aside ul li.space_list {
    margin-top: 1.5rem;
}

.dashboard_app .dashboard_aside ul li a {
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-weight: 500;
}

.dashboard_app .dashboard_aside ul li a .text_link {
    display: grid;
    grid-template-columns: 13% 1fr;
    width: 100%;
}

.dashboard_app .dashboard_aside ul li a.active {
    background: var(--bg-input);
}

.dashboard_app .dashboard_aside ul li a:hover {
    background: var(--bg-input);
}

.dashboard_app .dashboard_aside ul li a svg {
    stroke-width: 2;
    --aous-aw-icon-size: 1.4rem;
}

.dashboard_app .dashboard_aside ul li a .count_badge {
    font-size: 0.8rem;
    color: #1a1a1a;
}

.dashboard_app .user_account_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}

.dashboard_app .user_account_header .user_account_action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dashboard_app .user_account_header .user_account_action a {
    position: relative;
}

.dashboard_app .user_account_header .user_account_action a svg {
    --aous-aw-icon-size: 1.3rem;
}

.dashboard_app .user_account_header .user_account_action a .count_new_messages {
    position: absolute;
    top: -10px;
    right: -10px;
    background: var(--bg-input);
    width: 18px;
    height: 18px;
    text-align: center;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 0.75rem;
}

.dashboard_app .user_account_header .text_content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dashboard_app .user_account_header img {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
}

.dashboard_app .user_account_header .user_account_text h2 {
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.dashboard_app .dashboard_content .card_info {
    position: relative;
    margin-bottom: 3rem;
}

.dashboard_app .dashboard_content .card_info::after {
    content: '';
    position: absolute;
    left: 2%;
    bottom: -1rem;
    height: 3px;
    width: 96%;
    background-color: var(--bg-input);
}

.dashboard_app .dashboard_content .card_info .card_title {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    padding: 0.6rem;
}

.dashboard_app .dashboard_content .card_info .links_list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.dashboard_app .dashboard_content .card_info .links_list a {
    font-size: 1rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem;
    color: var(--main-text);
    border-radius: 8px;
}

.dashboard_app .dashboard_content .card_info .links_list a:hover {
    background-color: var(--bg-input);
}

.dashboard_app .dashboard_content .card_info .links_list a svg {
    color: var(--main-text);
}

.dashboard_app .dashboard_content .back_action_area {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.dashboard_app .dashboard_content .back_action_area a {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 1rem;
    font-weight: 500;
}

.dashboard_app .dashboard_content .back_action_area a svg {
    --aous-aw-icon-size: 1.5rem;
    stroke-width: 1.75;
}

.dashboard_app .dashboard_content .single_details_screen {
    margin-top: 1rem;
}

.dashboard_app .dashboard_content .single_details_screen .screen_title_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    margin-bottom: 1rem;
}

.dashboard_app .dashboard_content .single_details_screen .screen_title_area .screen_title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
}

.dashboard_app .dashboard_content .single_details_screen .screen_title_area .screen_description {
    display: block;
    font-size: 1rem;
    margin-top: 0.25rem;
    color: var(--text-paragraph);
}

.dashboard_app .dashboard_content .single_details_screen .screen_title_area a {
    display: inline-flex;
    font-size: 1rem;
    align-items: center;
    gap: 3px;
    font-weight: 500;
}

/* End Dashboard */

/* Start System Message */
.alert_message_area {
    width: 50%;
    margin: auto;
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex;
}

.alert_message_card {
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.alert_message_area .alert_message_card {
    padding: 1.5rem 2rem;
    border-radius: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: unset;
    text-align: center;
}

.alert_message_area .alert_message_card .alert_icon {
    margin-top: 3px;
}

.alert_message_area .alert_message_card .alert_icon svg {
    --aous-aw-icon-size: 2rem;
}

.alert_message_area .alert_message_card .alert_text .title_message {
    display: block;
    font-size: 1.1rem;
    font-weight: 500;
}

.alert_message_area .alert_message_card .alert_text .description_message {
    display: block;
    font-size: 1rem;
}

.alert_message_area .alert_message_card .alert_text .list_message li {
    display: block;
    font-size: 1rem;
    margin-top: 0.5rem;
}

.alert_message_area .alert_message_card .alert_text .list_message li.done {
    text-decoration: line-through;
}

.alert_message_area .alert_message_card .alert_text a {
    display: block;
    font-weight: 500;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

/* End System Message */

/* Start Profile photo */

.dashboard_app .dashboard_content .single_details_screen .profiel_photo_img img {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
}

.dropzone_card .dropzone .dz-preview .dz-image {
    display: none;
}

.dropzone_card .dropzone .dz-preview {
    background-color: #eaf9f0;
    border: 2px dashed #28a745;
    border-radius: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8rem;
}

.dropzone_card .dropzone .dz-preview .dz-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 8rem;
}

.dropzone_card .dropzone .dz-preview .dz-progress {
    height: 10px;
    bottom: 1.25rem;
    border: 3px solid var(--aous-aw-success);
    background: var(--aous-aw-success);
    top: unset;
}

.dropzone_card .dropzone .dz-preview:not(.dz-processing) .dz-progress {
    animation: unset
}

.dz-message {
    border: 3px dashed var(--border-color);
    padding-block: 3rem;
    border-radius: 8px;
    margin-top: 0;
}

.theme-dark .dz-message {
    border-color: #262d33 !important;
}

.dz-message .dropzone-msg-title svg {
    --aous-aw-icon-size: 2.5rem;
}

.dz-message .dropzone-msg-desc {
    font-size: 1rem;
    width: 40%;
    display: block;
    margin: auto;
}

.dz-message .dropzone-msg-small {
    display: block;
    margin-top: 1rem !important;
    color: var(--paragraph-color);
}

#cropper_modal .modal-body {
    padding: 0;
}

.cropper-container-wrapper {
    width: 100%;
    height: 70vh;
    max-height: 700px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

#cropper_image {
    max-width: none !important;
    width: auto !important;
    height: 100% !important;
    display: block;
}

.profile-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

/* End Profile Photo */

/* Start Travel preferences */
.options_area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.options_area .options_content {
    margin-bottom: 1.5rem;
}

.options_area .options_content h3 {
    margin-bottom: 1rem;
}

.options_area .options_content .form-check-input {
    border-color: var(--main-text);
}

.options_area .options_content .form-check-input:checked {
    background-color: var(--main-text);
    background-size: 1.25rem;
}

/* Start Travel preferences */

/* Start Personal details */
.form_info_area .personal_details_inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.form_info_area .input_content {
    margin-bottom: 1rem;
}

.form_info_area .personal_details_inputs .form-selectgroup-input+.form-selectgroup-label {
    color: var(--text-paragraph);
    border: 1px solid var(--border-color);
    min-width: 6rem;
    border-radius: 0.4rem;
    font-size: 1rem;
}

.form_info_area .personal_details_inputs .form-selectgroup-input:checked+.form-selectgroup-label {
    color: var(--white-color);
    background: var(--main-color);
}

.form_info_area .input_content label {
    font-size: .9rem;
}

.form_info_area .input_content select,
.form_info_area .input_content .tom_select .ts-control,
.form_info_area .input_content input {
    border-radius: 12px !important;
    max-height: 42px;
}


/* End Personal details */

/* Start Personal identity */

.upload_screen_area .dropzone {
    position: relative;
    min-height: 220px;
}

.upload_screen_area .dropzone .dz-message {
    position: absolute;
    inset: 0;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 3px dashed var(--border-color);
    border-radius: 8px;
    pointer-events: auto;
    transition: opacity .25s ease;
    background: transparent;
}

.upload_screen_area .dropzone.dz-started .dz-message {
    opacity: 0.25;
}

.upload_screen_area .dropzone .dz-preview {
    position: relative;
    z-index: 2;
    margin-top: 1rem;
}

.upload_screen_area .dropzone.dz-started .dz-message .dropzone-msg-desc,
.upload_screen_area .dropzone.dz-started .dz-message .dropzone-msg-small {
    display: none;
}

.upload_screen_area .file_cards_area {
    margin-block: 2rem;
}

.upload_screen_area .file_cards_area .file_card {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 6%;
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.upload_screen_area .file_cards_area .file_card .file_info {
    display: flex;
    gap: 1rem;
}

.upload_screen_area .file_cards_area .file_card .file_info img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.upload_screen_area .file_cards_area .file_card .file_info .file_text {
    width: 100%;
    padding-top: 0.5rem;
}

.upload_screen_area .file_cards_area .file_card .file_info .file_text .text-body {
    font-size: 1rem;
}

.upload_screen_area .file_cards_area .file_card .file_action a svg {
    --aous-aw-icon-size: 1.5rem;
}

/* End Personal identity */

/* Start New Ride */
.new_ride_area .new_ride_form_area {
    display: flex;
}

.new_ride_area .new_ride_form_area .form_content_area {
    width: 50%;
    min-height: 100vh;
    padding-inline: 8rem;
    padding-top: 3rem;
}

.new_ride_area .new_ride_form_area .form_content_area .text_section {
    text-align: center;
    margin-bottom: 1.75rem;
}

.new_ride_area .new_ride_form_area .form_content_area .text_section .title_section {
    display: block;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.new_ride_area .new_ride_form_area .form_content_area .text_section .description_section {
    display: block;
    text-align: center;
    font-size: 1rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step {
    margin-bottom: 2rem;
    display: none;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step.active {
    display: block;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .form_filed_section .ts-control,
.new_ride_area .new_ride_form_area .form_content_area .wizard_step .form_filed_section input[type="text"] {
    border-radius: 1rem;
    font-size: 1rem;
    background-color: var(--bg-input);
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .wizard_actions {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .wizard_actions.first_action {
    justify-content: center;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .wizard_actions .wizard_next,
.new_ride_area .new_ride_form_area .form_content_area .wizard_step .wizard_actions .wizard_back {
    font-size: 1rem;
    font-weight: 500;
    padding-block: 0.65rem;
    padding-inline: 1.25rem;
    border-radius: 30px;
    color: var(--main-text);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .wizard_actions .wizard_next,
.new_ride_area .new_ride_form_area .form_content_area .wizard_step .wizard_actions .get_started_btn {
    background-color: var(--main-color);
    color: white;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .routes_list .route_item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    margin-top: 10px;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .routes_list .route_item.active {
    border-color: var(--main-color);
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .routes_list .route_radio {
    margin-top: 3px;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .pickup_points_list .pickup_point_item {
    padding-inline: 2rem;
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-block: 0.35rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .pickup_points_list .form-check-input {
    border-color: var(--main-color) !important;
    border-width: 1.5px;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .pickup_points_list .form-check-input:disabled {
    border-color: var(--aous-aw-muted);
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .pickup_points_list .form-check-input:checked {
    background-color: var(--main-color);
}

.new_ride_area .map_content_area {
    position: relative;
    width: 50%;
}

.new_ride_area .map_content_area #map {
    position: fixed !important;
    top: 0;
    right: 0;
    width: 50%;
    height: 100vh;
    border: none;
    border-radius: 0;
    z-index: 10;
}

.new_ride_area .map_content_area .map_pin_wrapper {
    position: fixed;
    top: 50%;
    right: 25%;
    transform: translate(50%, -100%);
    pointer-events: none;
    z-index: 20;
}

.new_ride_area .map_content_area .map_pin_wrapper.hidden {
    display: none !important;
}

.new_ride_area .map_content_area .map_pin {
    width: 28px;
    height: 28px;
    background: #00406c;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    position: relative;
    transition: transform 0.25s ease;
}

.new_ride_area .map_content_area .map_pin::after {
    content: '';
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: 8px;
}

.new_ride_area .map_content_area .map_pin_shadow {
    width: 1rem;
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    margin: 6px auto 0;
    transition: all 0.25s ease;
}

.pac-container {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    border: 1px solid var(--border-color);
    margin-top: 8px;
    font-family: inherit;
    z-index: 99999 !important;
}

.pac-icon {
    display: none !important;
}

.pac-item {
    padding: 14px 18px;
    font-size: 15px;
    border-top: 1px solid var(--border-color);
    cursor: pointer;
}

.pac-item:first-child {
    border-top: none;
}

.pac-item:hover,
.pac-item.pac-item-selected {
    background-color: var(--bg-input);
}

.pac-item .pac-item-query {
    font-weight: 600;
    color: var(--main-text);
}

.pac-item span:not(.pac-item-query) {
    color: #64748b;
    font-size: 13px;
}

.pac-logo:after {
    margin: 8px 12px;
    opacity: 0.5;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_popup {
    width: 340px;
    background: var(--white-color);
    border-radius: 18px;
    padding: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
    transition: all 0.2s ease-in-out;
    margin: 3rem auto;
}

html[dir="rtl"] .new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_popup {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 1rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_header .nav {
    display: flex;
    gap: .5rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_dates span {
    padding: .75rem;
    border-radius: 50%;
    cursor: pointer;
    transition: .2s;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_dates span.disabled {
    pointer-events: none;
    opacity: .35;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_dates span.today {
    background-color: var(--main-color);
    color: var(--white-color);
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_dates span.active {
    background: var(--main-color);
    color: var(--white-color);
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_header button {
    border: none;
    background: none;
    cursor: pointer;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_days,
.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_days span {
    font-size: .8rem;
    color: var(--text-paragraph);
    margin-bottom: .5rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_dates span:hover {
    background: var(--bg-input);
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .calendar_dates span.active {
    background: var(--main-color);
    color: var(--white-color);
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .passenger_counter {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 48px;
    margin-top: 40px;
    margin-bottom: 2rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .counter_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #0ea5e9;
    background: transparent;
    font-size: 28px;
    color: #0ea5e9;
    cursor: pointer;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .counter_btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .counter_btn svg {
    stroke-width: 3.5;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .counter_value {
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--main-text);
    min-width: 80px;
    text-align: center;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .price_counter {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 48px;
    margin: 40px 0 24px;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .price_value {
    position: relative;
    font-size: 3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .price_value .currency {
    font-size: 1.7rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .price_hint {
    margin-top: 24px;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .price_badge {
    display: inline-block;
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .price_message {
    margin-top: 10px;
    color: #64748b;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .final_option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    background: var(--main-color);
    border-radius: 40px;
    text-align: center;
    color: white;
    margin-bottom: 0.75rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .final_option svg {
    --aous-aw-icon-size: 1.4rem;
}

.new_ride_area .new_ride_form_area .form_content_area .wizard_step .save_as_draft {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-paragraph);
    cursor: pointer;
}

/* End New Ride */

/* Start Ride details area */
.page_details_area {
    margin-inline: var(--margin-inline);
    padding-inline: 1rem;
    padding-block: 2rem;
}

.page_details_area h1 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.page_details_area .ride_details_body {
    display: grid;
    align-items: flex-start;
    grid-template-columns: 1fr 30%;
    gap: 2.5%;
}

.page_details_area .ride_details_body .ride_details_content_left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details {
    background-color: var(--bg-body);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1.65rem;
    box-shadow: 1px 1px 10px #e6e6e6;
    padding: 1rem 1.5rem;
    border-radius: 18px;
    overflow: hidden;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .ride_timeline_card {
    display: grid;
    grid-template-columns: 45px 20px 1fr;
    gap: 0.3rem;
    border-radius: 18px;
    width: 100%;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_times {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_time {
    font-weight: 600;
    font-size: 0.9rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_duration {
    font-size: 0.8rem;
    color: var(--text-paragraph);
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_line {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_line::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--main-color-secound);
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_dot {
    width: 12px;
    height: 12px;
    background: var(--bg-body);
    border: 2.5px solid var(--main-text);
    border-radius: 50%;
    z-index: 1;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_locations {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.3rem;
    width: 100%;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_location {
    padding: 0.2rem 0.3rem;
    border-radius: 10px;
    cursor: pointer;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_location:hover {
    background: #f4f4f4;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .timeline_location.muted {
    opacity: 0.45;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .location_name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .location_map {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: var(--main-color);
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .location_map svg {
    --aous-aw-icon-size: 1rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content {
    width: 100%;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .driver_info_link {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .driver_info_link:hover {
    background-color: var(--bg-input);
    border-radius: 12px;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .driver_info_body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .driver_photo img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .driver_info_text .driver_name {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .driver_info_text .driver_rating_content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-paragraph);
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .driver_info_text .driver_rating_content .rating_info {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-weight: 500;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .driver_info_text .driver_rating_content svg {
    --aous-aw-icon-size: 1rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .cancel_notes {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .features_list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-block: 1.5rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .features_list li {
    display: grid;
    grid-template-columns: 3% 1fr;
    align-items: center;
    gap: 1rem;
    color: var(--text-paragraph);
    font-weight: 500;
    font-size: 0.95rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .driver_info_content .btn {
    padding-inline: 1.25rem;
    padding-block: 0.75rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details .section_title {
    display: block;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.7rem;
}

.page_details_area .ride_details_body .ride_details_content_left .stopovers_card .stopovers_area {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details.stopovers_card {
    display: block;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details.stopovers_card .stopover_city {
    display: flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
}

.page_details_area .ride_details_body .ride_details_content_left .card_details.stopovers_card .stopover_city svg {
    --aous-aw-icon-size: 1rem;
}

.page_details_area .ride_details_body .ride_details_content_right {
    position: sticky;
    top: 1rem;
}

.page_details_area .ride_details_body .ride_details_content_right .date_content_body,
.page_details_area .ride_details_body .ride_details_content_right .price_ride_content {
    display: flex;
    background-color: var(--bg-body);
    box-shadow: 1px 1px 10px #e6e6e6;
    padding: 1rem 1.5rem;
    border-radius: 18px;
}

.page_details_area .ride_details_body .ride_details_content_right .date_content_body {
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.page_details_area .ride_details_body .ride_details_content_right .price_ride_content {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
    font-weight: 500;
}

.page_details_area .ride_details_body .ride_details_content_right .price_ride_content .price_text {
    font-size: 1.2rem;
    font-weight: 600;
}

.page_details_area .ride_details_body .ride_details_content_right .date_content_body span {
    font-size: 0.95rem;
}

.page_details_area .ride_details_body .ride_details_content_right .date_content_body .date_text {
    font-size: 1.1rem;
    font-weight: 500;
}

.page_details_area .ride_details_body .ride_details_content_right .date_content_body .driver_small_card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.page_details_area .ride_details_body .ride_details_content_right .date_content_body .driver_small_card .vehicle_info svg {
    --aous-aw-icon-size: 2.25rem;
}

.page_details_area .ride_details_body .ride_details_content_right .date_content_body .driver_small_card img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.page_details_area .ride_details_body .ride_details_content_right .rating_info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page_details_area .ride_details_body .ride_details_content_right .rating_info svg {
    --aous-aw-icon-size: 1rem;
}

.page_details_area.form_booking_details .ride_details_body .ride_details_content_right .action_ride_content p {
    margin-top: 3rem;
}

.page_details_area .ride_details_body .ride_details_content_right .action_ride_content a,
.page_details_area .ride_details_body .ride_details_content_right .action_ride_content button {
    width: 100%;
    padding-block: 0.75rem;
    font-size: 1rem;
    border-radius: 30px;
    margin-bottom: 0.75rem;
}

/* End Ride details area */

/* Start Empty card */
.empty_card {
    text-align: center;
    padding: 1rem;
    border-radius: 12px;
}

.empty_card svg {
    --aous-aw-icon-size: 2.25rem;
}

.empty_card h2 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.empty_card p {
    font-size: 0.9rem;
    color: var(--text-paragraph);
}

/* End Empty card */

/* Start Rides list */
.rides_list .ride_item {
    border: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.rides_list .ride_item .left_content_item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rides_list .ride_item .left_content_item .icon_info svg {
    --aous-aw-icon-size: 1.75rem;
}

.rides_list .ride_item .left_content_item .item_info_content .route_info {
    display: flex;
    gap: 2rem;
    margin-bottom: 10px;
}

.rides_list .ride_item .left_content_item .item_info_content .route_info .pick_up,
.rides_list .ride_item .left_content_item .item_info_content .route_info .drop_off {
    display: flex;
    align-items: center;
    gap: 3px;
}


.rides_list .ride_item .left_content_item .item_info_content .route_info .pick_up svg,
.rides_list .ride_item .left_content_item .item_info_content .route_info .drop_off svg {
    --aous-aw-icon-size: 1rem;
}

.rides_list .ride_item .left_content_item .item_info_content .route_info .pick_up .info_area span,
.rides_list .ride_item .left_content_item .item_info_content .route_info .drop_off .info_area span {
    display: block;
}

.rides_list .ride_item .left_content_item .item_info_content .ride_info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.rides_list .ride_item .left_content_item .item_info_content .ride_info .col_info {
    padding: 5px 1rem;
    display: block;
    border-radius: 12px;
}

/* End Rides list */

/* Start Ride Details */
.ride_profile_details .title_section {
    margin-bottom: 0.2rem;
}

.ride_profile_details hr {
    margin-block: 2rem !important;
}

.info_section .value {
    font-size: 1rem;
    font-weight: 500;
}

.info_section .title {
    color: var(--text-paragraph);
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
}

/* End Ride Details */

/* Start Details area */
.page_details_area .driver_info_area {
    position: relative;
    min-height: 100vh;
    width: 50%;
    margin: auto;
}

.page_details_area .driver_info_area .back_action_area {
    text-align: end;
}

.page_details_area .driver_info_area .driver_info_body {
    padding-top: 2rem;
}

.page_details_area .driver_info_area .driver_info_body .name_content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page_details_area .driver_info_area .driver_info_body .name_content .driver_photo img {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
}

.page_details_area .driver_info_area .driver_info_body .name_content .driver_info_text .driver_name {
    display: block;
    font-size: 1.35rem;
    font-weight: 500;
}

.page_details_area .driver_info_area .driver_info_body .name_content .driver_info_text .driver_age {
    display: block;
    font-size: 1rem;
}

.page_details_area .driver_info_area .driver_info_body hr {
    border: 2.5px solid var(--aous-aw-dark-border-subtle) !important;
}

.page_details_area .driver_info_area .driver_info_body .list_area {
    margin-top: 2rem;
}

.page_details_area .driver_info_area .driver_info_body .list_area .title_list {
    margin-bottom: 0.5rem;
    font-size: 1.15rem;
}

.page_details_area .driver_info_area .driver_info_body .list_area .bio_text {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--text-paragraph);
}

.page_details_area .driver_info_area .driver_info_body .list_area .item_list {
    display: grid;
    gap: 1rem;
    grid-template-columns: 3% 1fr;
    padding-block: 0.5rem;
    align-items: center;
    font-size: 1rem;
    color: var(--text-paragraph);
}

.page_details_area .driver_info_area .driver_info_body .list_area .item_list b {
    color: var(--main-color-secound);
}

.page_details_area .driver_info_area .driver_info_body .list_area .item_list .icon_content svg {
    --aous-aw-icon-size: 1.3rem;
    color: var(--text-paragraph);
    stroke-width: 2;
}

/* End Details area */

/* Start Messages */
.page_details_area .driver_info_card_area .driver_info_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page_details_area .driver_info_card_area .driver_info_card .left_content_info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page_details_area .driver_info_card_area .driver_info_card .left_content_info .driver_info_content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page_details_area .driver_info_card_area .driver_info_card .left_content_info .driver_info_content .driver_photo img {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: cover;
    border-radius: 50%;
}

.page_details_area .driver_info_card_area .driver_info_card .left_content_info .driver_info_content .driver_name_content .driver_name {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.page_details_area .driver_info_card_area .driver_info_card .left_content_info .driver_info_content .driver_name_content .driver_rating_content {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--text-paragraph);
}

.page_details_area .driver_info_card_area .driver_info_card .left_content_info .driver_info_content .driver_name_content .driver_rating_content svg {
    --aous-aw-icon-size: 1rem;
}

.page_details_area .driver_info_card_area .route_info_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.page_details_area .driver_info_card_area .route_info_card .route_info_card_link .cities_content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page_details_area .driver_info_card_area .route_info_card .route_info_card_link .cities_content span {
    font-weight: 600;
}

.page_details_area .driver_info_card_area .route_info_card .route_info_card_link .seats_content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-paragraph);
    font-size: 0.8rem;
}

.page_details_area .driver_info_card_area .route_info_card .arrow_icon {
    --aous-aw-icon-size: 1.5rem;
    color: var(--text-paragraph);
}

.page_details_area .driver_info_card_area .request_to_book_action {
    width: 100%;
    margin-bottom: 1.5rem;
    padding-block: 0.75rem;
    border-radius: 30px;
}

.page_details_area .messages_body {
    margin-top: 1rem;
    overflow: auto;
    max-height: 400px;
    min-height: 400px;
    height: 100%;
    padding-bottom: 3rem;
}

.page_details_area .messages_body .no_messages {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page_details_area .messages_body .no_messages p {
    font-size: 1rem;
    font-weight: 500;
}

.send_message_area {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    z-index: 99;
    overflow: hidden;
}

.send_message_area button {
    background-color: transparent;
    border: unset;
}

.send_message_area .input-group input,
.send_message_area .input-group,
.send_message_area .input-group .input-group-text {
    border: unset;
}

.send_message_area .input-group {
    padding-block: 0.2rem !important;
    background: var(--bg-input);
}

.send_message_area .input-group input {
    padding-left: 1.25rem;
    background: var(--bg-input)
}

.send_message_area .input-group svg {
    color: var(--main-color);
    --aous-aw-icon-size: 1.5rem;
}

.send_message_area .input-group .input-group-text {
    background-color: transparent;
}

.page_details_area .message_item {
    display: flex;
    margin-bottom: 10px;
}

.page_details_area .message_item.me {
    justify-content: flex-end;
}

.page_details_area .message_item.him {
    justify-content: flex-start;
}

.page_details_area .message_bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 1rem;
    font-size: 14px;
    position: relative;
}

.page_details_area .message_item.me .message_bubble {
    background: #d6f3ff;
    border-bottom-right-radius: 4px;
}

.page_details_area .message_item.me .message_bubble p {
    margin-bottom: 0.5rem;
}

.page_details_area .message_item.him .message_bubble {
    background: #f1f1f1;
    border-bottom-left-radius: 4px;
}

.page_details_area .message_time {
    display: block;
    font-size: 11px;
    color: #777;
    margin-top: 4px;
    text-align: right;
}

/* End Messages */

/* Start No data card */
.no_data_card {
    text-align: center;
    width: 75%;
    margin: 3rem auto;
}

.no_data_card .image_message {
    width: 23rem;
    border-radius: 12px;
    margin: auto;
    margin-block: 1rem;
}

.no_data_card span {
    display: block;
    font-size: 1rem;
    line-height: 1.5;
}

.no_data_card .icon_message {
    margin-bottom: 1rem;
}

.no_data_card .icon_message svg {
    --aous-aw-icon-size: 2.25rem;
}

.no_data_card .title_message {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.7rem;
}

.no_data_card .action_message {
    background-color: var(--main-color);
    color: white;
    border-radius: 30px;
    padding: 0.7rem 1rem;
    display: inline-block;
    margin-top: 1rem;
}

/* End No data card */

/* Start Messages */
.single_details_screen .messages_area .message_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.single_details_screen .messages_area .message_item:hover {
    background-color: var(--bg-input);
}

.single_details_screen .messages_area .message_item .message_info {
    display: flex;
    gap: 0.5rem;
}

.single_details_screen .messages_area .message_item .message_info .message_icon svg {
    --aous-aw-icon-size: 1.5rem;
}

.single_details_screen .messages_area .message_item .message_info .message_content span {
    display: block;
}

.single_details_screen .messages_area .message_item .message_info .message_content .driver_info {
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.single_details_screen .messages_area .message_item .message_info .message_content .driver_info .last_message {
    font-weight: 300;
}

.single_details_screen .messages_area .message_item .message_info .message_content .ride_info {
    color: var(--text-paragraph);
    font-size: 0.8rem;
}

/* End Messages */

/* Start Message Details */
.messages_details_area {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
}

.messages_details_area .messages_header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 1rem;
    border-bottom: 1px solid #eee;
    background: var(--bg-body);
}

.messages_details_area .user_avatar img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

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

.messages_details_area .user_name {
    font-weight: 600;
    font-size: 15px;
}

.messages_details_area .ride_info {
    font-size: 12px;
    color: #888;
}

.messages_details_area .messages_body {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    margin-top: 1rem;
    overflow: auto;
    max-height: 400px;
    height: 100%;
    padding-bottom: 3rem;
}

.messages_details_area .message_row {
    display: flex;
    margin-bottom: 10px;
}

.messages_details_area .message_row.me {
    justify-content: flex-end;
}

.messages_details_area .message_row.other {
    justify-content: flex-start;
}

.messages_details_area .message_sender {
    font-size: 12px;
    font-weight: 500;
    color: #777;
    margin-bottom: 4px;
}

.messages_details_area .message_row.me .message_sender {
    text-align: right;
}

.messages_details_area .message_row.other .message_sender {
    text-align: left;
}

.messages_details_area .message_bubble {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 1rem;
    font-size: 14px;
    line-height: 1.4;
    position: relative;
}

.messages_details_area .message_row.me .message_bubble {
    background: #d6f3ff;
    border-bottom-right-radius: 4px;
}

.messages_details_area .message_row.other .message_bubble {
    background: var(--bg-input);
    color: #222;
    border-bottom-left-radius: 4px;
}

.messages_details_area .message_meta {
    text-align: right;
    margin-top: 4px;
}

.messages_details_area .message_time {
    font-size: 11px;
    opacity: 0.7;
}

/* End Message Details */

/* Start Bookings */
.bookings_area .booking_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
}

.bookings_area .booking_card .booking_content {
    display: flex;
    gap: 2rem;
}

.bookings_area .booking_card .booking_content .booking_number_area .booking_number {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.bookings_area .booking_card .booking_content .booking_info .ride_date {
    display: block;
    font-size: 0.8rem;
    color: var(--text-paragraph);
}

.bookings_area .booking_card .booking_content .booking_info .booking_ride {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bookings_area .booking_card .booking_content .booking_info .booking_ride span {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.bookings_area .booking_card .booking_content .booking_info .booking_ride svg {
    --aous-aw-icon-size: 1rem;
}

/* End Bookings */

/* Start Booking details */
.booking_details_area .card_details_header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.booking_details_area .card_details_header .card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.booking_details_area .booking_details_content {
    margin-top: 1rem;
}

.booking_details_area .booking_details_content .title_section {
    margin-bottom: 0.5rem;
}

.booking_details_area .booking_details_content hr {
    margin-block: 2rem !important;
}

.warning_details_area {
    margin-bottom: 1rem;
}

.warning_details_area .booking_message_warning {
    padding: 1rem;
    border-radius: 12px;
}

.warning_details_area .booking_message_warning span {
    font-size: 0.9rem;
}

.warning_details_area .booking_message_warning a {
    font-size: 1rem;
    text-decoration: underline;
}

/* End Booking details */

/* Start How to area */
.how_to_area .title_screen {
    display: block;
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.how_to_area ul {
    list-style: decimal;
    padding-inline: 1.75rem;
}

.how_to_area ul li {
    margin-bottom: 1.25rem;
}

.how_to_area ul li span {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.how_to_area ul li span b {
    display: inline-flex;
    align-items: center;
}

/* End How to area */

/* Start Instructions screen */
.instructions_screen .instructions_section_list {
    margin-bottom: 3rem;
}

.instructions_screen .instructions_section_list h3 {
    font-size: 1.1rem;
}

.instructions_screen .instructions_section_list span {
    display: block;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.instructions_screen .instructions_section_list ul {
    list-style: disc;
    padding-inline: 2rem;
}

.instructions_screen .instructions_section_list ul li {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
    color: var(--text-paragraph);
}

/* End Instructions screen */

/* Start Wallet area */
.wallet_area .section_info_card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 1.5rem;
}

.wallet_area .section_info_card .section_info_wallet .value_info {
    font-size: 1.25rem;
    font-weight: 500;
}

.wallet_area .section_info_card.section_info_wallet .title_info {
    font-size: 1rem;
}

/* End Wallet area */

/* Start Rating */
.rating_modal .title_text {
    display: block;
    font-size: 1rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.rating_modal .section_rate {
    margin-bottom: 1rem;
}

.rating_modal .section_rate svg {
    --aous-aw-icon-size: 1.25rem;
}

#order_rating .section_rate svg {
    --aous-aw-icon-size: 2.25rem;
}

.rating_modal .section_rate .section_title {
    display: block;
}

/* End Rating */

/* Start Live area */

.live_navbar {
    margin-inline: 4rem;
}

.live_content_screen {
    display: grid;
    grid-template-columns: 30% 35% 1fr;
    gap: 2rem;
    height: 90vh;
    overflow: hidden;
}

.main_screen {
    grid-template-columns: 30% 1fr;
}

.live_content_screen .form_options_area {
    padding-left: 5rem;
    padding-right: 1rem;
    overflow-y: scroll;
    scrollbar-width: none;
}

.live_content_screen .form_options_area form {
    border: 1.5px solid var(--border-color);
    padding: 1.5rem 1rem;
    border-radius: 12px;
}

.live_content_screen .form_options_area form>h2 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.live_content_screen .form_options_area form .input_content {
    margin-bottom: 0.7rem;
}

.live_content_screen .form_options_area form .radio_type_options {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    margin-bottom: 1rem;
}

.live_content_screen .form_options_area form .radio_type_options .form-selectgroup {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    width: 100%;
}

.live_content_screen .form_options_area form .radio_type_options .form-selectgroup .form-selectgroup-item {
    margin: 0.25rem;
}

.live_content_screen .form_options_area form .radio_type_options .avatar {
    box-shadow: unset;
    border-radius: 50%;
}

.live_content_screen .form_options_area form .radio_type_options:not(.gender_options) .avatar {
    --aous-aw-avatar-size: 3.5rem;
}

.live_content_screen .form_options_area form .radio_type_options .form-selectgroup-input+.form-selectgroup-label span {
    background-color: transparent;
}

.live_content_screen .form_options_area form .radio_type_options .form-selectgroup-input:checked+.form-selectgroup-label {
    border: 1.5px solid var(--main-text);
    background-color: white;
}

.live_content_screen .form_options_area form .radio_type_options .form-selectgroup-input:checked+.form-selectgroup-label .form-selectgroup-check {
    background-color: var(--main-text);
}

.live_content_screen .form_options_area form .radio_type_options .form-selectgroup-input+.form-selectgroup-label {
    padding: 0.25rem !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--border-color);
}


.live_content_screen .form_options_area form .radio_type_options .form-selectgroup-input+.form-selectgroup-label .form-selectgroup-check {
    display: none;
}

.live_content_screen .form_options_area form .input_content input {
    background: var(--bg-input);
    border: 2px solid transparent !important;
    padding-block: 0.68rem;
    border-radius: 10px;
    font-size: 1rem;
}

.live_content_screen .form_options_area form .input_content input:active,
.live_content_screen .form_options_area form .input_content input:focus {
    border-color: var(--main-text) !important;
}

.live_content_screen .form_options_area form .action_button_form a,
.live_content_screen .form_options_area form .action_button_form button {
    width: 100%;
    padding-block: 0.7rem;
    font-size: 1rem;
    border-radius: 12px;
}

.live_content_screen .form_options_area form .action_button_form button {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.live_content_screen .form_options_area form .action_button_form a {
    display: block;
    text-align: center;
}

.live_content_screen .map_area {
    height: 100%;
}

.live_content_screen .map_area .map_card {
    height: 100%;
    position: relative;
}

.live_content_screen .map_area .map_card .map_back_btn {
    display: none;
}

.live_content_screen .map_area .map_card .live_map {
    height: 100%;
    border-radius: 12px;
    border: 2px solid var(--aous-aw-border-color-translucent);
    direction: ltr;
}

.live_content_screen .map_area .map_card .map_action_button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
}

.live_content_screen .map_area .map_card .map_action_button button {
    background: var(--main-color);
    color: white;
    padding: 0.75rem;
    border-radius: 12px;
}

html[dir="rtl"] .live_content_screen .map_area .map_card .map_action_button svg {
    margin: 0 !important;
}

.live_content_screen .rahashare-marker {
    position: absolute;
    transform: translate(-50%, -100%);
    pointer-events: auto;
    z-index: 999;
}

.live_content_screen .rahashare-marker .anchor {
    width: 1rem;
    height: 17px;
    background: #111;
    border-radius: 50%;
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
}

.live_content_screen .rahashare-marker .anchor.drop_off {
    width: 14px;
    height: 14px;
    border-radius: 0;
}

.live_content_screen .rahashare-marker .anchor.pick_up::after,
.rahashare-marker .anchor.drop_off::after {
    content: '';
    position: absolute;
    background-color: #fff;
    width: 5px;
    height: 5px;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
}

.live_content_screen .marker-card {
    background: #fff;
    padding: 5px 14px;
    min-width: 175px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-left: 11rem;
    border-radius: 8px;
}

.live_content_screen .marker-card .label {
    font-size: 13px;
    font-weight: 700;
    color: #000000;
}

.live_content_screen .marker-card .text {
    font-size: 14px;
    color: #000000;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live_content_screen .marker-card .arrow {
    font-size: 20px;
    color: #000000;
}

.live_content_screen .cars_list_items {
    position: relative;
    overflow: auto;
    height: 100%;
    padding-right: 36px;
    margin-left: -18px;
    padding-left: 18px;
    scrollbar-width: thin;
}

.live_content_screen .cars_list_items .cars_list_header {
    margin-bottom: 0.75rem;
}

.live_content_screen .cars_list_items .cars_list_header span {
    display: block;
}

.live_content_screen .cars_list_items .cars_list_header .title_list {
    font-size: 1.5rem;
    font-weight: 600;
}

.live_content_screen .cars_list_items .cars_list_header .title_description {
    font-size: 1.1rem;
    color: var(--text-paragraph);
}

.live_content_screen .cars_list_items .list_content {
    overflow-y: scroll;
    height: calc(100vh - 180px);
    padding-right: 1rem;
    scrollbar-width: none;
    padding-top: 0.5rem;
}

.live_content_screen .cars_list_items .list_content .car_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem;
    border: 2.5px solid var(--border-color);
    border-radius: 1rem;
    margin-bottom: 1rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    cursor: pointer;
}

.live_content_screen .cars_list_items .list_content .car_item.selected {
    border-color: #1a1a1a !important;
    background: #f9f9f9;
}

.live_content_screen .cars_list_items .list_content .car_item:hover {
    border-color: rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.live_content_screen .cars_list_items .list_content .car_item .car_content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.live_content_screen .cars_list_items .list_content .car_item .car_content .img_content img {
    width: 4.5rem;
    object-fit: cover;
}

.live_content_screen .cars_list_items .list_content .car_item .car_content .text_content .car_note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.live_content_screen .cars_list_items .list_content .car_item .car_content .text_content span {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--text-paragraph);
    font-size: 1rem;
}

.live_content_screen .cars_list_items .list_content .car_item .car_content .text_content .car_name {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--main-text);
}

.live_content_screen .cars_list_items .list_content .car_item .price_content b {
    font-size: 1.3rem;
    font-weight: 700;
}

.live_content_screen .cars_list_items .action_choose_car {
    background-color: rgb(255, 255, 255);
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    bottom: 0px;
    position: sticky;
    padding-top: 1rem;
}

.live_content_screen .cars_list_items .action_choose_car button {
    width: 100%;
    padding-block: 0.75rem;
    font-size: 1rem;
    border-radius: 10px;
    background: var(--main-color);
    border-color: var(--main-color);
}

.live_content_screen .empty_state {
    text-align: center;
    margin-top: 2rem;
}

.live_content_screen .empty_state .icon_content svg {
    --aous-aw-icon-size: 3.5rem;
    color: var(--aous-aw-yellow);
}

.live_content_screen .empty_state .title {
    font-size: 1.3rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

.live_content_screen .empty_state span {
    display: block;
    font-size: 1rem;
}


/* End Live area */

/* Start Price breakdown */

#price_breakdown .modal-body {
    padding: 2rem !important;
}

#price_breakdown .modal-content {
    border-radius: 20px;
}

#price_breakdown .modal-body h1 {
    font-size: 1.75rem;
    font-weight: 600;
}

#price_breakdown .price_note {
    margin-top: 1rem;
    font-size: 1rem;
}

#price_breakdown .border_dashed {
    border-top: 2px dashed rgba(0, 0, 0, 0.12);
    margin-left: 1rem;
    margin-right: 1rem;
    width: 100%;
}

#price_breakdown .price_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

#price_breakdown .price_row span {
    font-size: 1.1rem;
    font-weight: 500;
    display: block;
    white-space: nowrap;
}

#price_breakdown .price_row b {
    font-weight: 600;
    display: block;
    white-space: nowrap;
}

#price_breakdown .price_row.total {
    font-size: 1.2rem;
    font-weight: 700;
}

#price_breakdown .price_row.total b {
    font-size: 1.3rem;
}

#price_breakdown .modal-content button {
    padding-block: 0.75rem;
    font-size: 1rem;
    border-radius: 10px;
}

/* End Price breakdown */
/* Start Switch */
.online_status_toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    padding: 0.3rem 0.5rem;
}

.online_status_toggle.status_online {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.online_status_toggle.status_online:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    transform: translateY(-2px);
}

.online_status_toggle.status_offline {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.online_status_toggle.status_offline:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
    transform: translateY(-2px);
}

.online_status_toggle .status_text {
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

/* End Switch */

/* Start Activity Passenger */

.account_activity #activity_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.account_activity .activity_card {
    background: #fff;
    border-radius: 1rem;
    padding: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}

.account_activity .activity_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account_activity .activity_id {
    font-weight: 700;
    font-size: 15px;
    color: #111;
}

.account_activity .activity_type {
    margin-top: 6px;
    font-size: 14px;
    color: #666;
}

.account_activity .activity_timeline {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
}

.account_activity .activity_timeline::before {
    content: '';
    position: absolute;
    left: 75px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: #e5e7eb;
}

.account_activity .timeline_item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
}

.account_activity .timeline_date {
    width: 60px;
    font-size: 12px;
    color: #888;
    text-align: right;
    flex-shrink: 0;
}

.account_activity .timeline_dot {
    width: 8px;
    height: 8px;
    background: #111;
    border-radius: 50%;
    margin-top: 4px;
    z-index: 1;
}

.account_activity .timeline_address {
    font-size: 14px;
    color: #111;
    line-height: 1.4;
}

.account_activity .driver_rating {
    color: #f5a623;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}

.account_activity .activity_price {
    margin-top: 10px;
    text-align: right;
    font-size: 1rem;
    font-weight: 700;
    color: #111;
}

.account_activity .activity_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.account_activity .activity_info_line {
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.account_activity .driver_name {
    font-weight: 600;
    color: #111;
}

.account_activity .dot_sep {
    color: var(--text-paragraph);
}

.account_activity .order_actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.account_activity .action_btn {
    border: 1px solid #e5e7eb;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}

.account_activity .action_btn:active {
    transform: scale(.98);
}


/* Edn Activity Passenger */

/* Start Result Status Order */

.result_status_order {
    padding: 20px;
    width: 35rem;
    margin: auto;
}

.result_status_order .order_card_inner {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 12px 30px rgb(0 0 0 / 6%);
    text-align: center;
}

.result_status_order .order_card_inner .icon_area {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: #16a34a;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result_status_order .order_card_inner .icon_area svg {
    --aous-aw-icon-size: 2rem;
}

.result_status_order .order_card_inner .order_info {
    margin: 20px 0;
    text-align: left;
}

.result_status_order .order_card_inner .order_info div {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 15px;
}

.result_status_order .order_card_inner .order_status_hint {
    background: #f6fcff;
    border-radius: 12px;
    padding: 14px;
    font-size: 14px;
    color: #555;
    margin-bottom: 18px;
}

.result_status_order .order_card_inner .btn {
    width: 100%;
    padding-block: 0.7rem;
    font-size: 1rem;
}

/* End Result Status Order */

/* Start On The Map */

.on_the_map_area {
    position: relative;
}

.on_the_map_area #map {
    height: 84vh;
}

.on_the_map_area .on_map_info_card {
    position: absolute;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: min(92%, 520px);
    background: #fff;
    border-radius: 1rem;
    padding: 14px 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}


.on_the_map_area .on_map_info_card .arrival_timer {
    text-align: center;
    padding-top: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
}

.on_the_map_area .card_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.on_the_map_area .driver_info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.on_the_map_area .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.on_the_map_area .driver_info .name {
    font-weight: 600;
}

.on_the_map_area .driver_info .action_link {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--aous-aw-warning);
}

.on_the_map_area .driver_info .action_link svg {
    --aous-aw-icon-size: 1.1rem;
}

.on_the_map_area .status {
    font-size: 0.85rem;
    color: #16a34a;
    display: flex;
    align-items: center;
    gap: 6px;
}

.on_the_map_area .driver_info .dot {
    width: 8px;
    height: 8px;
    background: #16a34a;
    border-radius: 50%;
}

.on_the_map_area .price {
    font-weight: 700;
    font-size: 1.1rem;
}

.on_the_map_area .card_stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.on_the_map_area .stat {
    background: var(--bg-input);
    border-radius: 12px;
    padding: 8px;
    text-align: center;
}

.on_the_map_area .stat .label {
    font-size: 0.75rem;
    color: #6b7280;
}

.on_the_map_area .stat .value {
    font-weight: 600;
    margin-top: 2px;
    display: block;
}

.card_actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.card_actions .btn {
    flex: 1;
    padding: 10px;
    border-radius: 12px;
    font-weight: 600;
}


/* End On The Map */

.ride_summary_card {
    max-width: 34rem;
    margin: 2rem auto;
    background: #fff;
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

.ride_summary_card .icon_area {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: #16a34a;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ride_summary_card .icon_area svg {
    --aous-aw-icon-size: 2rem;
}

.ride_summary_card .summary_title {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.ride_summary_card .summary_section .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.ride_summary_card .summary_section.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.ride_summary_card .summary_section .box {
    background: var(--bg-input);
    padding: 10px;
    border-radius: 12px;
    text-align: center;
}

.ride_summary_card .summary_total {
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
    font-weight: 700;
    padding-block: 0.5rem;
}

.ride_summary_card a {
    padding-block: 0.7rem !important;
    font-size: 1rem !important;
    align-items: center;
    justify-content: center;
    display: flex;
    gap: 0.25rem;
}

/* Start Manage live work */
.manage_live_work_modal .location-status {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.manage_live_work_modal .control_btn {
    width: 2.5rem;
    border-radius: 50%;
    font-size: 1.25rem;
    height: 2.5rem;
}

/* End Manage live work */

/* Start Call to action live ride */
#call_to_action_live_ride #confirmMessage {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    text-align: center;
}

#call_to_action_live_ride .reasons_options {
    margin-top: 1rem;
}

#call_to_action_live_ride .reasons_options .form-check {
    font-size: 0.9rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

/* End Call to action live ride */

.car_overlay {
    position: absolute;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    transition: transform 0.1s linear;
}

.car_overlay img {
    width: 100%;
    height: 100%;
}

.star_ratings_rating {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px 0;
}

.star_rating {
    cursor: pointer;
    transition: transform 0.2s ease;
    display: inline-block;
    width: 40px;
    height: 40px;
}

.star_rating:hover {
    transform: scale(1.2);
}

.star_rating svg {
    width: 100%;
    height: 100%;
    fill: #ddd;
    transition: fill 0.2s ease;
}

.star_rating.active svg,
.star_rating.filled svg {
    fill: #ffc107;
}

.star_rating:hover svg,
.star_rating.hover svg {
    fill: #ffb300;
}

.section_rate {
    text-align: center;
}

.title_text {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    text-align: center;
}