@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --primary-color: #b9bf1c;
    --secondar-color: #354f52;
    --neutral-color: #b6b9ba;
    --neutral-n-20: #f6f6f6;
    --neutral-n-40: #E0E2E2;
    --neutral-n-500: #4A5253;
    --neutral-n-700: #2E3738;
    --black: #000;
    --white: #fff;
    --dark-green-d-300: #354f52;
    --dark-green-d-50: #ebedee;
    --danger: #eb5757;
    --gray-1: #333333;
    --gray-6: #f2f2f2;
    --transparent: transparent;
    --green-g-200: #c5ca43;
    --green-g-300: #B9BF1C;
    --green-light-oo: #D5F6E3;
    --green-27a: #27AE60;
    --neutral-e4e: #E4E6EF;
    --red: #EB5757;
    --neutral-n-300: #646B6B;
    --neutral-n-60: #B6B9BA;
}

* {
    font-family: "Kanit", sans-serif;
    box-sizing: border-box;
}

/* page */
.oge-page {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
}

.oge-page .footer-copyright {
    text-align: center;
    margin-bottom: 8px;
}

/* menu */
nav.uk-navbar-container {
    background-color: var(--white) !important;
}

.main-logo {
    aspect-ratio: 2/1;
    width: 264px;
    height: 48px;
    object-fit: contain;
}

.menu-item.create-new-trip .oge-btn {
    color: var(--white);
    background-color: var(--primary-color);
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 400;
    line-height: 150%;
    min-height: unset;
}

.menu-item.notification.new>span {
    position: relative;
    height: 24px;
    width: 24px;
    cursor: pointer;
    padding-top: 24px;
    padding-bottom: 24px;
}

/* .menu-item.notification.new>span::after {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    background-color: var(--danger);
    border: 2.25px solid var(--gray-6);
    border-radius: 500px;
    top: 34%;
    right: 11%;
} */

.menu-item.profile>a {
    column-gap: 8px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--gray-1);
    min-height: unset;
    padding-top: 24px;
    padding-bottom: 24px;
}

.menu-item.profile .img-profile {
    aspect-ratio: 1/1;
    height: 44px;
    width: 44px;
    object-fit: cover;
    border-radius: 500px;
    margin-right: 8px;
}

@media screen and (max-width: 768px) {
    .oge-hide-768 {
        height: 0;
        width: 0;
        display: inline-block;
        visibility: hidden;
    }

    .menu-item.create-new-trip .oge-btn {
        column-gap: 0;
    }

    .menu-item.profile>a {
        column-gap: 0px;
    }
}

@media screen and (max-width: 480px) {
    .main-logo {
        width: 214px;
    }

    .menu-item.create-new-trip {
        height: 0;
        width: 0;
        display: inline-block;
        visibility: hidden;
    }
}

@media screen and (max-width: 380px) {
    .main-logo {
        width: 150px;
    }
}

/* profile main */
.profile-main {
    padding-top: 63px;
    background: url(../img/main-bg.svg) no-repeat center bottom/cover;
    min-height: 400px;
}

.profile-main .profile-meta-wrapper {
    display: flex;
    justify-content: space-between;
}

.profile-main .wrapper {
    display: flex;
    align-items: center;
    gap: 53px;
}

.profile-main .wrapper .profile-img {
    width: 233px;
    height: 233px;
    border-radius: 500px;
    box-shadow: 0 0 0 7px var(--dark-green-d-300), 0 0 0 11px var(--green-g-300, #B9BF1C);
    position: relative;
    aspect-ratio: 1/1;
}

.profile-main.verified .wrapper .profile-img::after {
    content: url(./../img/verify.svg);
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 3%;
}

.profile-main .wrapper .profile-img img {
    object-fit: cover;
    height: 100%;
    border-radius: 500px;
    aspect-ratio: 1/1
}

.profile-main .uk-container .profile-meta .title {
    color: var(--white);
    font-size: 49px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    margin: 0;
    display: flex;
    align-items: center;
}

.profile-main .uk-container .profile-meta .title span:not(.act-active) {
    color: var(--primary-color);
    margin-right: 23px;
}

.profile-main .uk-container .profile-meta .title span.act-active {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 2.865px;
    background: var(--green-light-oo);
    color: var(--green-27a);
    text-align: center;
    font-family: 'PT Sans', sans-serif;
    font-size: 9.072px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.726px;
    text-transform: uppercase;
    transform: translateY(3.5px);
    border: none;
    user-select: none;
    -webkit-user-select: none;
}

.profile-main .uk-container .profile-meta .sub-title {
    color: var(--neutral-color);
    font-size: 31px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

.profile-main .uk-container .profile-meta .ratings {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
}

.profile-main .uk-container .profile-meta .ratings .stars {
    display: flex;
    gap: 8.07px;
}

.profile-main .uk-container .profile-meta .ratings .stars i {
    color: var(--white);
}

.profile-main .uk-container .profile-meta .ratings .stars i.full,
.profile-main .uk-container .profile-meta .ratings .stars i.partial {
    color: var(--green-g-300);
}

.profile-main .uk-container .profile-meta .ratings .review-count {
    color: var(--neutral-n-20, #F6F6F6);
    font-family: Kanit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.profile-main .uk-container .profile-meta .update-p-img {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--white);
    background: var(--green-g-300);
    outline: none;
    border: none;
    margin-top: 13px;

    /* Paragraph/Small : 13px - Regular */
    font-family: Kanit;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.profile-main .profile-meta-wrapper .stats {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.profile-main .profile-meta-wrapper .stats .stat-block {
    display: inline-block;
    padding: 11px 15px;
    min-width: 130px;
    border-radius: 6px;
    border: 1px dashed var(--neutral-e4e);
    background: var(--white);
}

.profile-main .profile-meta-wrapper .stats .stat-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-main .profile-meta-wrapper .stats .stat-block span:first-child {
    color: var(--green-g-300, #B9BF1C);
    font-family: Kanit;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
}

.profile-main .profile-meta-wrapper .stats .stat-block span:nth-child(2) {
    color: var(--neutral-n-500, #4A5253);
    font-family: Kanit;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

@media screen and (max-width: 1194px) {
    .profile-main {
        padding-bottom: 104px;
    }

    .profile-main .profile-meta-wrapper {
        flex-wrap: wrap;
        gap: 50px;
    }
}

@media screen and (max-width: 759px) {
    .profile-main .uk-container .profile-meta .title {
        flex-wrap: wrap;
    }

    .profile-main .uk-container .profile-meta .title span.act-active {
        transform: unset;
    }
}

@media screen and (max-width: 640px) {
    .profile-main .uk-container .wrapper {
        flex-wrap: wrap;
    }

    .profile-main .wrapper .profile-img {
        margin-left: 15px;
    }
}

@media screen and (max-width: 435px) {
    .profile-main .profile-meta-wrapper .stats {
        flex-wrap: wrap;
    }
}

/* profile-info */
.profile-info {
    margin-bottom: 88px;
}

.profile-info .uk-container {
    transform: translateY(-54px);
}

.profile-info .uk-container .form-n-sidebar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.profile-info .uk-container .profile-cta-block {
    max-width: 528px;
    margin: auto;
}

.profile-info .uk-container .profile-cta-block .back-btn {
    text-decoration: none;
    display: inline-flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--dark-green-d-300, #354F52);

    /* Paragraph/Small : 13px - Bold */
    font-family: Kanit;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    /* 19.5px */
    border-radius: 8px;
    border: 1px solid var(--dark-green-d-300, #354F52);
    background: var(--dark-green-d-50, #EBEDEE);
    margin-bottom: 17px;
}

.profile-info .uk-container .form-n-sidebar .form-block,
.profile-info .uk-container .profile-cta-block .form-block {
    grid-area: 1/1/2/3;
    border-radius: 8px;
    border: 1px solid var(--dark-green-d-300, #354F52);
    background: var(--white, #FFF);
    padding: 32px;
}

.profile-info .uk-container .form-n-sidebar .form-block .form-title,
.profile-info .uk-container .profile-cta-block .form-block .form-title {
    color: var(--dark-green-d-300, #354F52);
    /* Headings/H5 : 25px - Bold */
    font-family: Kanit;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    margin-bottom: 16px;
    margin-top: 0px;
    /* 30px */
}

.profile-info .uk-container .profile-cta-block .form-block .oge-cars-listing {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 500px;
    overflow: hidden;
    overflow-y: auto;
}

.profile-info .uk-container .profile-cta-block .form-block .oge-cars-listing .single-car {
    display: flex;
    padding: 16px;
    /* justify-content: space-between; */
    align-items: flex-start;
    gap: 16px;
    border-radius: 8px;
    background: var(--neutral-n-20, #F5F5F6);
}

.profile-info .uk-container .profile-cta-block .form-block .oge-cars-listing .single-car .img-block {
    width: 160px;
    height: 120px;
    aspect-ratio: 3/2;
    border-radius: 4px;
    border: 1px solid var(--green-g-300, #B9BF1C);
}

.profile-info .uk-container .profile-cta-block .form-block .oge-cars-listing .single-car .img-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.profile-info .uk-container .profile-cta-block .form-block .oge-cars-listing .single-car .vehicle-meta-data {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
}

.profile-info .uk-container .profile-cta-block .form-block .oge-cars-listing .single-car .vehicle-meta-data .mark-name {
    color: var(--dark-green-d-300, #354F52);

    /* Headings/H6 : 20px - Bold */
    font-family: Kanit;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 24px */
    margin: 0;
}

.profile-info .uk-container .profile-cta-block .form-block .oge-cars-listing .single-car .vehicle-meta-data .details-label {
    color: var(--neutral-n-60, #B6B9BA);

    /* Paragraph/Normal : 16px - Regular */
    font-family: Kanit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 24px */
    margin: 0;
    display: flex;
    align-items: center;
}

.profile-info .uk-container .profile-cta-block .form-block .oge-cars-listing .single-car .vehicle-meta-data .details-label:nth-child(2) {
    margin-top: 4px;
    margin-bottom: 8.5px;
}

.profile-info .uk-container .profile-cta-block .form-block .oge-cars-listing .single-car .vehicle-meta-data .details-label span {
    color: var(--dark-green-d-300, #354F52);
}

.profile-info .uk-container .profile-cta-block .form-block .oge-cars-listing .single-car .vehicle-meta-data .details-label span.color {
    width: 19px;
    height: 19px;
    border-radius: 500px;
    display: inline-block;
}

.profile-info .uk-container .profile-cta-block .form-block .oge-cars-listing .single-car .vehicle-meta-data .cta-group {
    display: flex;
    gap: 8px;
    margin-top: 12.5px;
    width: 100%;
}

.profile-info .uk-container .profile-cta-block .form-block .oge-cars-listing .single-car .vehicle-meta-data .cta-group .btn {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--green-g-300, #B9BF1C);
    border: none;
    color: var(--white, #FFF);

    /* Paragraph/Small : 13px - Regular */
    font-family: Kanit;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 19.5px */
}

.profile-info .uk-container .profile-cta-block .form-block .oge-cars-listing .single-car .vehicle-meta-data .cta-group .btn.delete {
    background: var(--red, #EB5757);
}

.profile-info .uk-container .form-n-sidebar .form-block .form-group,
.profile-info .uk-container .profile-cta-block .form-block .form-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.profile-info .uk-container .form-n-sidebar .form-block .form-group .form-control,
.profile-info .uk-container .profile-cta-block .form-block .form-group .form-control {
    grid-column-start: 1;
    grid-column-end: 3;
}

.profile-info .uk-container .profile-cta-block .form-block .form-group .form-control .forgot-password {
    align-self: flex-end;
    color: var(--neutral-n-300, #646B6B);
    /* Paragraph/Normal : 16px - Regular */
    font-family: Kanit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 24px */
}

.profile-info .uk-container .profile-cta-block .form-block .form-group .form-control .forgot-password a {
    color: var(--green-g-300, #B9BF1C);
    text-decoration-line: underline;
}

.profile-info .uk-container .form-n-sidebar .form-block .form-group .form-control.half-left,
.profile-info .uk-container .profile-cta-block .form-block .form-group .form-control.half-left {
    grid-column-start: 1;
    grid-column-end: 2;
}

.profile-info .uk-container .form-n-sidebar .form-block .form-group .form-control.half-right,
.profile-info .uk-container .profile-cta-block .form-block .form-group .form-control.half-right {
    grid-column-start: 2;
    grid-column-end: 3;
}

.profile-info .uk-container .form-n-sidebar .form-block .form-group .form-control label,
.profile-info .uk-container .profile-cta-block .form-block .form-group .form-control label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    color: var(--dark-green-d-300, #354F52);

    /* Paragraph/Normal : 16px - Regular */
    font-family: Kanit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 24px */
}

.profile-info .uk-container .form-n-sidebar .form-block .form-group .form-control label input,
.profile-info .uk-container .profile-cta-block .form-block .form-group .form-control label input {
    /* color: var(--black); */
    color: var(--neutral-n-60, #B6B9BA);
    /* Paragraph/Normal : 16px - Regular */
    font-family: Kanit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 24px */

    border-radius: 6px;
    background: var(--neutral-n-20, #F6F6F6);
    outline: none;
    border: none;
    width: 100%;
}

.profile-info .uk-container .form-n-sidebar .form-block .form-group .form-control label input::placeholder,
.profile-info .uk-container .profile-cta-block .form-block .form-group .form-control label input::placeholder {
    color: var(--neutral-n-60, #B6B9BA);
}

.profile-info .uk-container .form-n-sidebar .form-block .form-group .form-control .update-btn,
.profile-info .uk-container .profile-cta-block .form-block .form-group .form-control .update-btn {
    color: var(--white, #FFF);

    /* Paragraph/Normal : 16px - Bold */
    font-family: Kanit;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    /* 24px */
    display: flex;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--green-g-300, #B9BF1C);
    border: none;
    outline: none;
    margin-top: 16px;
    cursor: pointer;
}

.profile-info .uk-container .profile-cta-block .form-block .form-group .form-control .update-btn {
    width: 100%;
}

.profile-info .uk-container .form-n-sidebar .sidebar-quick-link {
    grid-area: 1/3/2/4;
    display: flex;
    flex-flow: column;
    gap: 20px;
}

.profile-info .uk-container .form-n-sidebar .sidebar-quick-link .dash-menu-item {
    display: flex;
    /* height: 310px; */
    /* min-width: 201px; */
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    border-radius: 8px;
    border: 1px solid var(--dark-green-d-300, #354F52);
    background: var(--white, #FFF);
}

.profile-info .uk-container .form-n-sidebar .sidebar-quick-link .dash-menu-item .head h3 {
    /* Headings/H3 : 39px - Bold */
    font-family: Kanit;
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    margin-bottom: 0;
    /* 46.8px */
}

.profile-info .uk-container .form-n-sidebar .sidebar-quick-link .dash-menu-item .head h3.primary {
    color: var(--primary-color, #B9BF1C);
}

.profile-info .uk-container .form-n-sidebar .sidebar-quick-link .dash-menu-item .head h3.secondary {
    color: var(--dark-green-d-300, #354F52);
}

.profile-info .uk-container .form-n-sidebar .sidebar-quick-link .dash-menu-item .head a {
    width: 32.5px;
    height: 32.5px;
    border-radius: 500px;
    background-color: var(--neutral-n-40, #E0E2E2);
    border: none;
    color: var(--neutral-n-700, #2E3738);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-info .uk-container .form-n-sidebar .sidebar-quick-link .dash-menu-item .body {
    flex: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.profile-info .uk-container .form-n-sidebar .sidebar-quick-link .dash-menu-item .body p {
    color: var(--neutral-n-500, #4A5253);

    /* Paragraph/Normal : 16px - Regular */
    font-family: Kanit;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 24px */
}

.profile-info .uk-container .caution-btn {
    display: flex;
    gap: 16px;
}

.profile-info .uk-container .caution-btn .caution-btn {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 2px solid var(--red, #EB5757);
    background: var(--transparent);

    color: var(--red, #EB5757);

    /* Paragraph/Small : 13px - Regular */
    font-family: Kanit;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 19.5px */
    cursor: pointer;
}

.profile-info .uk-container .caution-btn .caution-btn.log-out {
    color: var(--white, #FFF);
    background-color: var(--red);
}

@media screen and (max-width: 860px) {
    .profile-info .uk-container .form-n-sidebar {
        grid-template-columns: repeat(1, 1fr);
    }

    .profile-info .uk-container .form-n-sidebar .form-block {
        grid-area: 1/1/2/2;
    }

    .profile-info .uk-container .form-n-sidebar .sidebar-quick-link {
        grid-area: 2/1/3/2;
    }
}

@media screen and (max-width: 530px) {

    .profile-info .uk-container .form-n-sidebar .form-block .form-group .form-control.half-left,
    .profile-info .uk-container .form-n-sidebar .form-block .form-group .form-control.half-right,
    .profile-info .uk-container .profile-cta-block .form-block .form-group .form-control.half-left,
    .profile-info .uk-container .profile-cta-block .form-block .form-group .form-control.half-right {
        grid-column-start: 1;
        grid-column-end: 3;

    }

    .profile-info .uk-container .form-n-sidebar .form-block .form-group .form-control .update-btn,
    .profile-info .uk-container .form-n-sidebar .form-block .form-group .form-control .update-btn {
        width: 100%;
    }
}

@media screen and (max-width: 510px) {
    .profile-info .uk-container .profile-cta-block .form-block .oge-cars-listing .single-car {
        display: flex;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 334px) {
    .profile-info .uk-container .profile-cta-block .form-block .oge-cars-listing .single-car .vehicle-meta-data .cta-group {
        flex-wrap: wrap;
    }
}