/* =============================================== Main =================================================== */

main {
    background-color: #fbfbfb;
}

    main #section-1 {
        background-color: rgba(8, 166, 226, 0.05);
    }

        main #section-1 .location {
            position: absolute;
            right: 0;
            width: 150px;
            font-size: 0.875rem;
        }


        main #section-1 .form-control {
            border: 1px solid #f1be94;
            font-size: 0.875rem;
            padding-right: 140px;
        }

            main #section-1 .form-control:focus {
                border-color: #f1be94;
                box-shadow: 0 0 0 0.15rem rgba(241, 190, 148, 0.45);
            }

            main #section-1 .form-control::placeholder {
                color: #bdbdbd;
            }

        main #section-1 .dropdown-menu.city-dropdown {
            min-width: 138px;
            border: 1px solid #f1be94;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            transform: translate(0px, 7px) !important;
            max-height: 160px;
            overflow-y: scroll;
        }

            main #section-1 .dropdown-menu.city-dropdown.show {
                display: block !important;
            }

            main #section-1 .dropdown-menu.city-dropdown li a {
                font-size: 0.875rem;
            }

.search-result {
    position: absolute;
    top: 100%;
    flex-direction: column;
    width: 100%;
    margin-top: 1px;
    /* padding: 8px 16px; */
    border: 1px solid orange;
    background: white;
    border-radius: 4px;
    font-size: 0.875rem;
    z-index: 1;
}

    .search-result a {
        color: #333333;
        padding: 8px 16px;
        border-bottom: 1px solid rgba(184, 184, 184, 0.4);
    }

    .search-result span {
        color: #333333;
        padding: 8px 16px;
    }

    .search-result a:hover {
        color: #ec7c1d;
    }

main #all-services-main .search-btn, main #section-1 .search-btn {
    border: 1px solid #f1be94;
    border-right: none;
    outline: none;
    font-size: 0.875rem;
    background-color: #EC7C1D;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
    padding: 8px 16px;
}

#all-services-main #section-1 .search-input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.search-input-main {
    font-size: 1.6rem !important;
}

main #section-2 {
    background-color: #fbfbfb;
}

    main #section-2 .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: end;
        /*background-color: #f9a116;*/
        border-radius: 8px;
        box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.1);
        padding: 20px 0px;
        color: #333333;
    }

        main #section-2 .category-item img {
            max-width: 45px;
        }

        main #section-2 .category-item span {
            font-size: 0.75rem;
            margin-top: 16px;
            text-align: center;
        }

main #section-3 {
    background-color: rgba(8, 166, 226, 0.16);
}

    main #section-3 .item {
        display: flex;
        align-items: flex-start;
    }

        main #section-3 .item .item-box {
            background-color: #08a6e2;
            border-radius: 8px;
            padding: 18px 14px;
            margin-left: 12px;
            margin-top: 6px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            main #section-3 .item .item-box img {
                min-width: 60px;
            }

        main #section-3 .item p {
            font-size: 0.875rem;
            margin-bottom: 0px;
        }

main .slider-title {
    font-size: 1.4rem;
}

    main .slider-title::after {
        content: "";
        width: 50%;
        height: 3px;
        background-color: #08a6e2;
        border-radius: 3px;
        display: flex;
        margin-top: 10px;
    }

main .service-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid #bdbdbd;
    border-radius: 8px;
    color: #9e9e9e;
    font-size: 0.75rem;
    margin-left: 8px;
    cursor: pointer;
}

    main .service-item.active {
        background-color: rgba(8, 166, 226, 0.16);
        color: #08a6e2;
        border: 1px solid #08a6e2;
    }

main #section-4 .popular-service .item,
main #section-5 .automobile-service .item,
main #section-6 .special-service .item {
    cursor: pointer;
}

main .popular-service-slider .item img,
main .automobile-service-slider .item img,
main .special-service-slider .item img {
    border-radius: 8px;
    margin-bottom: 16px;
    /* max-width: 220px; */
    box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.1);
}

main .item .main-image {
    min-height: 225px;
    object-fit: cover;
}

@media (min-width: 1200px) {
    main .item .main-image, .all_services_main .item .flex-column > img {
        min-height: 175px !important;
    }

    .dashboard-main-icon {
        display: none;
    }
}

@media (min-width: 1400px) {
    main .item .main-image, .all_services_main .item .flex-column > img {
        min-height: 205px !important;
    }

    .dashboard-main-icon {
        display: none;
    }
}

@media (min-width: 992px) {
    .dashboard-main-icon {
        display: none;
    }
}

@media (max-width: 767px) {
    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.45rem !important;
    }

    h3 {
        font-size: 1.4rem !important;
    }

    h4 {
        font-size: 1.3rem !important;
    }

    h5 {
        font-size: 1.2rem !important;
    }

    h6 {
        font-size: 1.1rem !important;
    }

    main .item .main-image {
        min-height: 242px;
    }
}

main .popular-service-slider .item span,
main .automobile-service-slider .item span,
main .special-service-slider .item span {
    color: #333333;
    font-size: 0.875rem;
}

main .popular-service-slider .owl-nav .owl-prev,
main .popular-service-slider .owl-nav .owl-next,
main .automobile-service-slider .owl-nav .owl-prev,
main .automobile-service-slider .owl-nav .owl-next,
main .special-service-slider .owl-nav .owl-prev,
main .special-service-slider .owl-nav .owl-next {
    position: absolute;
    background-color: #ffffff;
    border-radius: 100%;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    color: #ec7c1d;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    font-size: 1.2rem;
}

main .popular-service-slider .owl-nav .owl-prev,
main .automobile-service-slider .owl-nav .owl-prev,
main .special-service-slider .owl-nav .owl-prev {
    top: 35%;
    right: -3%;
}

main .popular-service-slider .owl-nav .owl-next,
main .automobile-service-slider .owl-nav .owl-next,
main .special-service-slider .owl-nav .owl-next {
    top: 35%;
    left: -3%;
}

main #section-4 .popular-service .item .main-btn,
main #section-5 .automobile-service .item .main-btn,
main #section-6 .special-service .item .main-btn,
main .special-service .item .main-btn {
    z-index: 100;
    justify-content: space-between;
    align-items: center;
    padding: 0px 8px;
    width: 110px;
    height: 40px;
}

    main #section-4 .popular-service .item .main-btn.service_register_mobile,
    main #section-5 .automobile-service .item .main-btn.service_register_mobile,
    main #section-6 .special-service .item .main-btn.service_register_mobile,
    main .special-service .item .main-btn.service_register_mobile {
        display: flex;
    }

    main #section-4 .popular-service .item .main-btn.service_register_desktop,
    main #section-5 .automobile-service .item .main-btn.service_register_desktop,
    main #section-6 .special-service .item .main-btn.service_register_desktop,
    main .special-service .item .main-btn.service_register_desktop {
        display: none;
    }

    main #section-4 .popular-service .item .main-btn span,
    main #section-5 .automobile-service .item .main-btn span,
    main #section-6 .special-service .item .main-btn span,
    main .special-service .item .main-btn span {
        color: white;
        font-size: 0.75rem;
    }

    main #section-4 .popular-service .item .main-btn img,
    main #section-5 .automobile-service .item .main-btn img,
    main #section-6 .special-service .item .main-btn img,
    main .special-service .item .main-btn img {
        max-width: 16px;
    }

#section-7 .why-us .why-us-icon {
    background-color: #08a6e2;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 12px;
    margin-left: 10px;
}

    #section-7 .why-us .why-us-icon img {
        max-width: 45px;
    }

#section-7 .why-us .why-us-slider .item img {
    border-radius: 8px;
    width: 100%;
    max-height: 500px;
}

#section-7 .why-us .why-us-slider .owl-nav .owl-next,
#section-7 .why-us .why-us-slider .owl-nav .owl-prev {
    position: absolute;
    font-size: 1.4rem;
    background-color: #ffffff;
    color: #08a6e2;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    border-radius: 100%;
    height: 25px;
    width: 25px;
    margin-top: 16px;
}

#section-7 .why-us .why-us-slider .owl-nav .owl-next {
    left: 0%;
}

#section-7 .why-us .why-us-slider .owl-nav .owl-prev {
    left: 6%;
}

#section-7 .why-us .why-us-line {
    height: 2px;
    background-color: #08a6e2;
    width: calc(94% - 40px);
    position: absolute;
    right: 0%;
    margin-top: 30px;
}

#section-8 .about-us .about-us-item {
    display: flex;
    align-items: center;
}

#section-8 .about-us .main-btn {
    max-width: 12rem;
}

#section-9 {
    background-color: #ebebeb;
}

#section-10 .app-bg img {
    max-height: 500px;
    min-height: 330px;
}

#section-10 .bg-overlay {
    position: absolute;
    top: 0%;
    width: 100%;
    height: 100%;
    background: rgba(8, 166, 226, 0.47);
    background: -webkit-linear-gradient( to left, rgba(8, 166, 226, 0.47), rgba(8, 166, 226, 1) );
    background: linear-gradient( to left, rgba(8, 166, 226, 0.47), rgba(8, 166, 226, 1) );
}

#section-10 .app-form {
    position: relative;
    display: flex;
    justify-content: center;
}

#section-10 .app-input {
    max-width: 70%;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

    #section-10 .app-input:focus {
        border-color: #ec7c1d;
        /*box-shadow: 0 0 0 0.25rem rgb(236 124 29 / 25%);*/
    }

#section-10 .app-btn {
    background-color: #ec7c1d;
    color: white;
    font-size: 0.875rem;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1px solid #ec7c1d;
    padding: 0px 16px;
}

#section-10 .app-text {
    font-size: 0.875rem;
}

#section-11 .main-btn {
    width: 100%;
}

#section-12 .divider {
    width: 100%;
    height: 2px;
    background-color: #b8b8b8;
}

#section-13 #comment-slider .item {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 36px;
    border-radius: 16px;
    box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
    max-width: 96%;
}

#section-13 #comment-slider .comment-user {
    display: flex;
    border-radius: 8px;
    background-color: #d8ecf3;
    padding: 16px;
    width: 100%;
}

    #section-13 #comment-slider .comment-user .username {
        font-size: 0.875rem;
        margin-bottom: 8px;
        font-weight: bold;
    }

    #section-13 #comment-slider .comment-user .user-role {
        font-size: 0.75rem;
        opacity: 0.9;
    }

    #section-13 #comment-slider .comment-user .comment-image {
        border-radius: 100%;
        margin-left: 8px;
        width: 50px;
        height: 50px;
    }

#section-13 #comment-slider .owl-stage-outer {
    padding: 20px 10px;
}

#section-13 #comment-slider .item p {
    line-height: 2;
    font-size: 0.875rem;
}

#section-13 #comment-slider .owl-dots {
    position: absolute;
    right: 50%;
}

    #section-13 #comment-slider .owl-dots .owl-dot {
        height: 10px;
        width: 10px;
        border-radius: 100%;
        border: 1px solid #ec7c1d;
        background-color: transparent;
        margin-left: 5px;
    }

        #section-13 #comment-slider .owl-dots .owl-dot.active {
            background-color: #ec7c1d;
        }

/* ======================================== End Index Page =======================================  */

/* ========================================= Other Pages Main =====================================  */

#bread-crump a,
#bread-crump span {
    color: #8f8f8f;
}

    #bread-crump a.active {
        color: #08a6e2;
    }

#section-14 .divider {
    width: 100%;
    height: 1px;
    background-color: #b8b8b8;
}

#search-result-main .search-result-link {
    color: #0081b4;
    display: flex;
    align-items: center;
    font-weight: bold;
}

    #search-result-main .search-result-link span {
        border-bottom: 2px dashed;
        padding-bottom: 8px;
    }

    #search-result-main .search-result-link img {
        padding-bottom: 5px;
    }

#search-result-main .divider {
    width: 100%;
    height: 1px;
    background-color: #b8b8b8;
}

#search-result-main .item,
#all-services-main .item {
    cursor: pointer;
}

    #search-result-main .item img,
    #all-services-main .item img {
        border-radius: 8px;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    }

#search-result-main .service-register,
#all-services-main .service-register {
    display: none;
    align-items: center;
    justify-content: space-between;
    background-color: #ec7c1d;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    width: 10rem;
    position: absolute;
    bottom: 18%;
    right: 15%;
}

#all-services-main .all-services-register {
    display: none;
    align-items: center;
    justify-content: space-between;
    background-color: #ec7c1d;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    width: 10rem;
    position: absolute;
    bottom: 18%;
    right: 15%;
}

#all-services-main .all-services-mobile-register {
    display: flex;
}

#search-result-main .service-register span,
#all-services-main .service-register span,
#all-services-main .all-services-register span {
    font-size: 0.875rem;
}

#all-services-main .all-services-link,
#all-services-main .continue {
    border: 1px solid #0081b4;
    border-radius: 6px;
    padding: 12px 12px;
    color: #0081b4;
    box-shadow: 0px 0px 8px rgba(0,129,180,0.2);
    text-align: center;
}

    #all-services-main .continue.disabled {
        border: 1px solid #aa5a16;
        border-radius: 6px;
        padding: 8px 12px;
        color: white;
        background-color: #aa5a16;
        box-shadow: 0px 0px 8px rgba(170,90,22,0.2);
        text-align: center;
    }

#privacy-main .privacy-box,
#price-main .price-box {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
    padding: 16px 24px;
}

#privacy-main .privacy-link {
    color: #08a6e2;
    border-bottom: 2px dashed;
    padding-bottom: 5px;
}

#about-us-main .about-us-banner {
    width: 100%;
    border-radius: 8px;
}

#about-us-main .about-us-icon {
    /*background-color: #08a6e2;*/
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 12px;
    margin-left: 10px;
}

    #about-us-main .about-us-icon img {
        max-width: 45px;
    }

#about-us-main .left-side img {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 130px;
    height: 610px;
    width: 100%;
}

#about-us-main .right-side .right-side-image {
    border-top-right-radius: 130px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    height: 390px;
}

#about-us-main .right-side .help img {
    border-radius: 8px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
    width: 80%;
    margin: 10px auto;
}

#about-us-main .activity-years {
    font-size: 48px;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #F5811E;
    -moz-text-stroke-width: 2px;
    -moz-text-stroke-color: #F5811E;
    color: white;
}

#about-us-main .right-side .right-side-text {
    font-size: 0.875rem;
}

#login-main .login-box {
    margin: 10px 0px;
    padding: 16px;
    border: 1px solid #0081b4;
    border-radius: 10px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
    background-color: #f5f5f5;
}

    #login-main .login-box .login-box-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: 0px auto;
    }

        #login-main .login-box .login-box-content input {
            margin: 16px;
        }

            #login-main .login-box .login-box-content input.invalid {
                margin: 8px 16px;
                border: 1px solid #ec1717;
            }

#contact-us-main .info-input input.invalid {
    margin: 8px 0px;
    border: 1px solid #ec1717;
}

#login-main .login-box .login-box-content input::placeholder,
#contact-us-main .info-input input::placeholder {
    font-size: 0.875rem;
}

#login-main .login-box .login-box-content input.invalid:focus,
#contact-us-main .info-input input.invalid:focus {
    /*box-shadow: 0 0 0 0.15rem rgb(236 23 23 / 25%);*/
}

#login-main .login-box .login-box-content input.invalid::placeholder,
#contact-us-main input.invalid::placeholder {
    color: #ec1717;
}

#login-main .login-box .login-box-content .invalid-text,
#contact-us-main .invalid-text {
    color: #ec1717;
    font-size: 0.875rem;
    width: 100%;
    text-align: start;
    margin: 8px 0px;
}

#login-main .login-box .login-box-content .captcha-number,
#contact-us-main .captcha-number {
    border: 1px solid #979797;
    border-radius: 4px;
    background-color: white;
    padding: 6px;
    width: 25%;
    display: flex;
    justify-content: center;
    font-family: "Times New Roman", Times, serif;
}

#login-main .login-box .login-box-content .captcha-input,
#contact-us-main .captcha-input {
    width: 85%;
}

#login-main .login-box .login-box-content .reload-captcha,
#contact-us-main .reload-captcha {
    width: 20%;
    border: 1px solid #08a6e2;
    border-radius: 4px;
    color: #08a6e2;
    background-color: #fafafa;
    padding: 6px 0px;
    box-shadow: 0px 0px 8px rgba(0,129,180,0.2);
}

#login-main .login-box .login-box-content .resend-code,
#contact-us-main .resend-code {
    font-size: 0.875rem;
}

    #login-main .login-box .login-box-content .resend-code.disabled,
    #contact-us-main .resend-code.disabled {
        pointer-events: none;
        cursor: default;
        color: #333333;
    }

#login-main .login-box .login-box-content .edit-number {
    border-radius: 6px;
    border: 1px solid #08a6e2;
    color: #08a6e2;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 12px;
    font-size: 0.875rem;
}

#contact-us-main {
    background-color: #fafafa;
}

#contact-us-header .contact-us-text {
    margin: 0px auto;
    line-height: 2.2;
}

#contact-us-header .contact-us-header-items {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: 16px 0px;
}

#contact-us-header .contact-us-header-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 42px;
}

    #contact-us-header .contact-us-header-item .contact-us-header-icon {
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #0081B4;
        background-color: #E7F4F9;
        width: 65px;
        height: 65px;
        margin-left: 12px;
        margin-bottom: 0px;
    }

    #contact-us-header .contact-us-header-item a,
    #contact-us-header .contact-us-header-item span {
        color: #333333;
        font-size: 0.875rem;
    }

#contact-us-main .contact-us-image {
    width: 100%;
    border-radius: 10px;
}

#price-main .accordion-item:not(:first-of-type),
#faq-main .accordion-item:not(:first-of-type) {
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

#price-main .accordion-item,
#faq-main .accordion-item {
    border: 1px solid #b8b8b8;
    border-radius: 8px;
    overflow: hidden;
}

#price-main .accordion-button::after,
#faq-main .accordion-button::after {
    content: "";
    display: none;
}

#price-main .accordion-button,
#faq-main .accordion-button {
    display: flex;
    align-items: center;
}

    #price-main .accordion-button span,
    #faq-main .accordion-button span {
        margin-left: 10px;
        width: 20px;
        color: #f5811e;
    }

    #price-main .accordion-button:not(.collapsed) {
        background-color: white;
        color: #f5811e;
    }

    #faq-main .accordion-button:not(.collapsed) {
        background-color: #f5811e;
        color: white;
    }

        #faq-main .accordion-button:not(.collapsed) span {
            color: white;
        }

    #price-main .accordion-button:focus,
    #faq-main .accordion-button:focus {
        box-shadow: none;
    }

    #price-main .accordion-button:not(.collapsed) span.open,
    #faq-main .accordion-button:not(.collapsed) span.open {
        display: none;
    }

    #price-main .accordion-button:not(.collapsed) span.close,
    #faq-main .accordion-button:not(.collapsed) span.close {
        display: flex;
    }

    #price-main .accordion-button.collapsed span.open,
    #faq-main .accordion-button.collapsed span.open {
        display: flex;
    }

    #price-main .accordion-button.collapsed span.close,
    #faq-main .accordion-button.collapsed span.close {
        display: none;
    }

    #price-main .accordion-button span.open,
    #faq-main .accordion-button span.open {
        margin-top: 5px;
    }

    #price-main .accordion-button span.close,
    #faq-main .accordion-button span.close {
        margin-bottom: 5px;
    }

#price-main .price-table {
    border: 1px solid rgba(66, 158, 171, 0.2);
    border-radius: 5px;
    min-width: 600px;
}

    #price-main .price-table thead {
        background-color: #e4f1f3 !important;
    }

    #price-main .price-table tr {
        margin: auto 0;
    }

    #price-main .price-table th {
        color: #28424d;
        font-weight: normal;
        font-size: 1rem;
    }

    #price-main .price-table.table > :not(:first-child) {
        border-top: none;
    }

#faq-main .banner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#faq-main .faq-banner {
    width: 100%;
    border-radius: 8px;
}

#faq-main .bg-overlay {
    position: absolute;
    background-color: rgba(51, 51, 51, 0.5);
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

#faq-main .search-box {
    position: absolute;
    z-index: 10;
    width: 90%;
}

#faq-main .faq-box {
    background-color: white;
    border-radius: 8px;
    /*box-shadow: 0px 0px 16px rgb(0 0 0 / 10%);*/
    padding: 20px 10px;
    width: 96%;
    margin: 16px auto 16px;
}

#faq-main .faq-not-found {
    background-color: white;
    border-radius: 8px;
    /*box-shadow: 0px 0px 16px rgb(0 0 0 / 10%);*/
    padding: 20px 10px;
    width: 96%;
    margin: 16px auto 16px;
}

    #faq-main .faq-not-found .backup-link {
        color: #08a6e2;
        margin: 0px 5px;
        border-bottom: 2px dashed;
    }

#service-detail-main .service-detail-right img {
    border-radius: 20px;
}

#service-detail-main .service-detail-left .tag {
    color: #9e9e9e;
    border: 1px solid;
    border-radius: 8px;
    padding: 5px 6px;
    margin-left: 6px;
    font-size: 0.8rem;
    margin-bottom: 6px;
}

#service-detail-main .service-detail-left p {
    font-size: 1rem;
}

#bread-crump a {
    font-size: 0.875rem;
}

.discount_percent {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ec1717;
    left: 6%;
    top: 0%;
    width: 50px;
    height: 35px;
    box-sizing: content-box;
    padding-top: 10px;
    text-align: center;
}

    .discount_percent .percent_amount {
        z-index: 10000;
        font-size: large !important;
    }

    /* .discount_percent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 13px solid #eee;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
} */

    .discount_percent span {
        color: #fafafa !important;
        font-size: 0.75rem !important;
        margin-bottom: 4px;
    }

.triangle_bottomright {
    width: 0;
    height: 0;
    border-bottom: 10px solid #ec1717;
    border-left: 11px solid transparent;
    top: -2px;
    left: 3%;
    position: absolute;
    z-index: -100;
}

.triangle_topleft {
    width: 0;
    height: 0;
    border-top: 35px solid #ec1717;
    border-right: 50px solid transparent;
    position: absolute;
    top: 80%;
}

.triangle_topright {
    width: 0;
    height: 0;
    border-top: 35px solid #ec1717;
    border-left: 50px solid transparent;
    position: absolute;
    top: 80%;
}

/* ===================================================== End of Other Pages ==========================================  */

/* ====================================================== Order Pages ================================================  */

#order-main .order-steps {
    color: #0081b4;
    font-weight: bold;
}

    #order-main .order-steps span.current {
        font-size: 1.3rem;
    }

#order-main .order-box {
    background-color: #f5f5f5;
    border: 1px solid #b8b8b8;
    border-radius: 10px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
}

    #order-main .order-box .service-name {
        color: #0081b4;
        border-bottom: 2px dashed;
    }

#order-main .upload-image-input,
#dashboard-main .upload-image-input {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

#order-main .upload-image-btn,
#dashboard-main .upload-image-btn {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    max-height: 35px;
}

#order-main #order-uploaded-image,
#dashboard-main #order-uploaded-image {
    width: 100%;
    max-height: 200px;
}

#order-main .delete-image-icon {
    display: none;
    position: absolute;
    left: -15%;
    top: 2%;
    border: 1px solid #ec1717;
    z-index: 10;
    padding: 5px 10px;
    border-radius: 4px;
    color: #ec1717;
    cursor: pointer;
    background-color: white;
}

#order-main .progress-bar,
#dashboard-main .progress-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    background-color: #e2f3f9;
    border: 1px solid #0081b4;
    border-radius: 8px;
    padding: 7px 10px;
}

    #dashboard-main .progress-bar.success {
        background-color: #efefef;
        border: 1px solid #1d9d0a;
    }

    #dashboard-main .progress-bar.unsuccess {
        background-color: #efefef;
        border: 1px solid #ec1717;
    }

#dashboard-main span.delete-image,
#ticketModal span.delete-image,
#order-main span.delete-image {
    display: none;
    position: absolute;
    left: -2%;
    top: 2%;
    border: 1px solid #ec1717;
    z-index: 10;
    padding: 5px 10px;
    border-radius: 4px;
    color: #ec1717;
    cursor: pointer;
    background-color: white;
}

#order-main .progress-bar span,
#dashboard-main .progress-bar span {
    color: #333333;
}

#order-main .progress-bar button,
#dashboard-main .progress-bar button {
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0px;
    color: #333333;
}

#order-main .progress-bar .image-title,
#dashboard-main .progress-bar .image-title {
    width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
}

#order-main .progress-bar .progress,
#dashboard-main .progress-bar .progress {
    height: 8px;
    width: 70%;
    background-color: #fafafa;
    border-radius: 3px;
    border: 1px solid #0081b4;
    margin-right: 5px;
}

#dashboard-main .progress-bar.success .progress {
    border: 1px solid #1d9d0a;
}

#dashboard-main .progress-bar.unsuccess .progress {
    border: 1px solid #ec1717;
}

#order-main .progress-bar .progress .uploaded-percent,
#dashboard-main .progress-bar .progress .uploaded-percent {
    height: 100%;
    background-color: #0081b4;
}

#dashboard-main .progress-bar.success .progress .uploaded-percent {
    background-color: #1d9d0a;
    width: 100%;
}

#dashboard-main .progress-bar.unsuccess .progress .uploaded-percent {
    background-color: #ec1717;
    width: 60%;
}

#order-main .address-box {
    padding: 16px 10px;
    background-color: #fafafa;
    border: 1px solid #b8b8b8;
    border-radius: 12px;
    margin-bottom: 16px;
    width: 96%;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: space-between;
}

    #order-main .address-box.selected {
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.125);
    }

#order-main .add-address-box {
    width: 96%;
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

#order-main .day-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #b8b8b8;
    border-radius: 8px;
    background-color: #fafafa;
    cursor: pointer;
    height: 100px;
}

    #order-main .day-box.active {
        background-color: #0081b4;
        color: #fafafa;
    }

    #order-main .day-box:hover {
        background-color: #0081b4;
        color: #fafafa;
    }

#order-main .time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #b8b8b8;
    border-radius: 8px;
    background-color: #fafafa;
    cursor: pointer;
    height: 100px;
    overflow: hidden;
}

    #order-main .time-box input {
        border: none;
        outline: none;
        max-width: 100%;
        height: 100%;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        text-align: center;
    }

        #order-main .time-box input::placeholder {
            text-align: center;
        }

#order-main .day-box span {
    padding: 8px 0px;
}

#order-main select option {
    color: #b8b8b8;
}

#order-main form textarea {
    border: 1px solid #b8b8b8;
    border-radius: 8px;
    padding: 10px;
}

    #order-main form textarea::placeholder {
        color: #b8b8b8;
    }

#map {
    height: 300px;
    border: 1px solid #b8b8b8;
    border-radius: 8px;
}

.mapNeshan {
    height: 300px;
    border: 1px solid #b8b8b8;
    border-radius: 8px;
}

#order-main .order-alert {
    background-color: #e7f4f9;
    border: 1px solid #0081b4;
    border-radius: 10px;
    width: 100%;
    padding: 6px;
    text-align: center;
    margin-top: 16px;
    color: #0081b4;
}

#order-main .hurry {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #0081b4;
    background-color: #0081b4;
    color: #fafafa;
    border-radius: 8px;
    padding: 9px 30px;
    /*box-shadow: 0px 0px 8px rgb(0 129 180 / 30%);*/
    font-size: 0.75rem;
}

#order-main .not-hurry {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #0081b4;
    background-color: #f5f5f5;
    color: #0081b4;
    border-radius: 8px;
    padding: 9px 30px;
    /*box-shadow: 0px 0px 8px rgb(0 129 180 / 30%);*/
    font-size: 0.75rem;
}

#order-main #hurry-text {
    border-bottom: 1px solid #b8b8b8;
    display: none;
}

#order-main #review-image {
    border-radius: 5px;
}

#paymentModal .modal-btn:disabled {
    background-color: #aa5a16;
    border: none;
    outline: none;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 30px;
    color: #fafafa;
}

#paymentModal .modal-btn {
    background-color: #ec7c1d;
    border: none;
    outline: none;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 30px;
    color: #fafafa;
}

#order-main .order-box .waiting-time {
    display: flex;
}

#order-main .order-box .waiting-text {
    display: none;
}

#order-main .order-box .more-waiting .waiting-time {
    display: none;
}

#order-main .order-box .more-waiting .waiting-text {
    display: flex;
}

#order-main .choose-expert .choose-expert-item {
    padding: 16px 10px;
    background-color: #f5f5f5;
    border: 1px solid rgba(184, 184, 184, 0.4);
    box-shadow: 0px 3px 6px #b8b8b8;
    border-radius: 8px;
    margin-bottom: 16px;
}

    #order-main .choose-expert .choose-expert-item img,
    #order-main .expert-resume .expert-resume-right img {
        /* border-radius: 100%;
        height: 120px;
        width: 120px;
        border: 1px solid #0081b4;*/
    }

#order-main .expert-resume .mobile_back_btn {
    position: absolute;
    left: 4%;
    top: 4%;
}

#order-main .choose-expert .choose-expert-item .expert-name,
#order-main .expert-resume .expert-resume-right .expert-name {
    font-size: 1rem;
    font-size: bold;
    margin: 16px 0px;
}

#order-main .choose-expert .choose-expert-item .expert-info,
#order-main .expert-resume .expert-resume-right .expert-info {
    font-size: 0.875rem;
    color: #b8b8b8;
}

#order-main .choose-expert .choose-expert-item .expert-rate,
#order-main .expert-resume .expert-resume-right .expert-rate {
    font-size: 0.875rem;
    color: #e3d309;
    margin: 16px 0px;
}

    #order-main .choose-expert .choose-expert-item .expert-rate span i,
    #order-main .expert-resume .expert-resume-right .expert-rate span i {
        margin-left: 3px;
        box-shadow: 0px 3px 30px rgba(227,169,9, 0.4);
    }

#order-main .expert-resume .expert-resume-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 10px 20px;
    border-radius: 12px;
    background-color: #f5f5f5;
    border: 1px solid rgba(184, 184, 184, 0.4);
    box-shadow: 0px 3px 6px #b8b8b8;
}

#order-main .expert-resume .expert-resume-left {
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-radius: 8px;
    background-color: #f5f5f5;
    border: 1px solid rgba(184, 184, 184, 0.4);
    box-shadow: 0px 3px 6px #b8b8b8;
}

    #order-main .expert-resume .expert-resume-left .resume-service {
        /*border: 1px solid #0081b4;*/
        border-radius: 8px;
        margin: 16px 0px;
        overflow: hidden;
    }

    #order-main .expert-resume .expert-resume-left .resume-service-item {
        background-color: #f5f5f5;
        padding: 20px 10px;
        display: flex;
        flex-direction: column;
    }

        #order-main
        .expert-resume
        .expert-resume-left
        .resume-service-item:not(:last-child) {
            margin-bottom: 15px;
            background-color: white;
            border-radius: 20px;
        }

        #order-main .expert-resume .expert-resume-left .resume-service-item.active {
            background-color: #e2e2e2;
        }

        #order-main .expert-resume .expert-resume-left .resume-service-item i {
            color: #e3d309;
        }

    #order-main .expert-resume .expert-resume-left .resume-pagination {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        margin-top: 16px;
        flex-wrap: wrap;
    }

        #order-main .expert-resume .expert-resume-left .resume-pagination .next,
        #order-main .expert-resume .expert-resume-left .resume-pagination .previous {
            display: flex;
            align-items: center;
            color: #212121;
        }

#order-main .expert-resume .resume-pagination .next.disabled,
#order-main .expert-resume .resume-pagination .previous.disabled {
    color: #b8b8b8;
    pointer-events: none;
    cursor: default;
}

#order-main .expert-resume .resume-pagination .resume-pages {
    display: flex;
    align-items: center;
    margin-bottom: 0px;
    padding-right: 0px;
}

#order-main .expert-resume .resume-pagination .resume-page {
    margin-left: 5px;
}

    #order-main .expert-resume .resume-pagination .resume-page a {
        color: #0081b4;
        border: 1px solid;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        height: 25px;
        width: 25px;
        font-size: 0.75rem;
    }

        #order-main .expert-resume .resume-pagination .resume-page a.active {
            color: #fafafa;
            background-color: #0081b4;
            border: 1px solid #0081b4;
        }

        #order-main .expert-resume .resume-pagination .resume-page a:hover {
            color: #fafafa;
            background-color: #0081b4;
            border: 1px solid #0081b4;
        }

#order-main .invoice-order .service-step span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    background-color: white;
    border: 1px solid #b8b8b8;
}

    #order-main .invoice-order .service-step span.active {
        border: 1px solid #0081b4;
    }

#order-main .invoice-order .service-progress {
    width: 90px;
    height: 2px;
    background-color: #b8b8b8;
}

    #order-main .invoice-order .service-progress.active {
        background-color: #0081b4;
    }

#order-main .invoice-order .service-step span.active svg {
    stroke: #0081b4;
}

#order-main .invoice-order .service-step span.current {
    background-color: #0081b4;
    border: 1px solid #0081b4;
    color: #ffffff;
}

    #order-main .invoice-order .service-step span.current svg {
        stroke: #ffffff;
    }

#order-main .invoice-order .service-steps {
    margin-top: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#order-main .invoice-order .service-step {
    display: flex;
    align-items: center;
}

    #order-main .invoice-order .service-step p.current,
    #order-main .invoice-order .titles p.current {
        color: #0081b4;
    }

#order-main .invoice-order .expert-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#order-main .send-message {
    display: none;
}

#detailModal .phone-number {
    display: none;
    width: 100%;
    margin: 20px auto;
}

#detailModal .title {
    min-width: 150px;
}

#detailModal .detail-modal-image {
    border-radius: 8px;
    max-width: 120px;
}

#detailModal .detail-modal-image-2 {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #b8b8b8;
}

#detailModal #map {
    height: 300px;
    border: 1px solid #b8b8b8;
    border-radius: 8px;
}

/* ===================================================== End of Order Pages ================================================  */

/* =================================================== Normal User Pages ==================================================== */

#dashboard-main #dashboard-aside {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
    padding: 10px 0px 30px;
}

    #dashboard-main #dashboard-aside .dashboard-avatar {
        /* padding: 5px; */
        border-radius: 100%;
        overflow: hidden;
        background-color: #e8e8e8;
        border: 1px solid #ec7c1d;
        height: 65px;
        width: 65px;
        margin-left: 10px;
    }

header .dashboard-avatar {
    height: 40px;
    width: 40px;
    border: 1px solid #ec7c1d;
    border-radius: 100%;
}

#dashboard-main #dashboard-aside #dashboard-aside-list {
    margin-top: 10px;
}

    #dashboard-main #dashboard-aside #dashboard-aside-list li.active {
        background-color: #f3e5d9;
    }

    #dashboard-main #dashboard-aside #dashboard-aside-list li a {
        color: #333333;
        display: flex;
        align-items: center;
        padding: 0.875rem 1rem;
    }

    #dashboard-main
    #dashboard-aside
    #dashboard-aside-list
    #dashboard-backup
    .backup-submenu,
    #dashboard-main
    #dashboard-aside
    #dashboard-aside-list
    #dashboard-profile
    .profile-submenu,
    #dashboard-main #dashboard-aside #dashboard-wallet .wallet-submenu {
        display: none;
        padding-right: 35px;
    }

    #dashboard-main
    #dashboard-aside
    #dashboard-aside-list
    #dashboard-backup
    .close-submenu,
    #dashboard-main
    #dashboard-aside
    #dashboard-aside-list
    #dashboard-profile
    .close-submenu,
    #dashboard-main #dashboard-aside #dashboard-wallet .close-submenu {
        display: none;
    }

#dashboard-main .dashboard-alert {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #d8ffd2;
    border: 1px solid #1d9d0a;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
}

#dashboard-main .service-steps {
    background-color: #fedcc0;
    padding: 10px;
    margin: 16px 0px;
    border-radius: 8px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

    #dashboard-main .service-steps .service-icon {
        background-color: white;
        border-radius: 4px;
        height: 25px;
        width: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #0081b4;
        margin-left: 8px;
        cursor: pointer;
    }

        #dashboard-main .service-steps .service-icon i {
            color: #0081b4;
        }

    #dashboard-main .service-steps .service-icon-menu {
        flex-direction: column;
        position: absolute;
        top: 0%;
        right: 10%;
        background: white;
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 0.875rem;
    }

        #dashboard-main .service-steps .service-icon-menu a {
            padding-bottom: 8px;
            color: #333333;
        }

    #dashboard-main .service-steps .service-name {
        color: #084d68;
        font-size: 0.875rem;
    }

#dashboard-main .service-steps-list span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    background-color: white;
    border: 1px solid #b8b8b8;
}

    #dashboard-main .service-steps-list span.active {
        border: 1px solid #0081b4;
    }

#dashboard-main .service-steps-list .service-progress {
    width: 25px;
    height: 2px;
    background-color: #b8b8b8;
}

    #dashboard-main .service-steps-list .service-progress.active {
        background-color: #0081B4;
    }

#dashboard-main .service-steps-list span.active svg {
    stroke: #0081b4;
}

#dashboard-main .service-steps-list span.current {
    background-color: #0081b4;
    border: 1px solid #0081b4;
    color: #ffffff;
}

    #dashboard-main .service-steps-list span.current svg {
        stroke: #ffffff;
    }

#dashboard-main .dashboard-items {
    display: flex;
    flex-wrap: wrap;
}

#dashboard-main .dashboard-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 16px 10px;
    margin-bottom: 16px;
    border-radius: 8px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.225);
    width: 96%;
    height: 120px;
    color: #fafafa;
}

    #dashboard-main .dashboard-item a {
        color: #fafafa;
    }

    #dashboard-main .dashboard-item .add-user-info {
        background-color: #fafafa;
        border-radius: 8px;
        color: #0081b4;
        padding: 7px 30px;
    }

#dashboard-main .dashboard-last-messages {
    background-color: #fafafa;
    border-radius: 8px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
    padding: 20px 0px 10px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

#dashboard-main .messages-table,
.price_view_table {
    border: 1px solid rgba(66, 158, 171, 0.2);
    border-radius: 5px;
    /* min-width: 600px; */
}

#dashboard-main #mobile-messages-table .table {
    border: 1px solid rgba(66, 158, 171, 0.2);
    border-radius: 5px;
}

#dashboard-main .messages-table th,
#dashboard-main #mobile-messages-table th,
.price_view_table th {
    color: #28424d;
    font-weight: normal;
    font-size: 1rem;
}

#dashboard-main .messages-table thead,
#dashboard-main #mobile-messages-table thead,
.price_view_table thead {
    background-color: #e4f1f3 !important;
}

#dashboard-main .messages-table.table > :not(:first-child),
#dashboard-main #mobile-messages-table .table > :not(:first-child),
.price_view_table.table > :not(:first-child) {
    border-top: none;
}

#dashboard-main .messages-table tr,
#dashboard-main #mobile-messages-table tr,
.price_view_table tr {
    margin: auto 0;
}

#dashboard-main #mobile-messages-table {
    flex-direction: column;
    margin-top: 20px;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.125);
}

#dashboard-main .user-info,
#dashboard-main .user-wallet {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 16px 16px 56px 16px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.125);
    height: fit-content;
}

#dashboard-main .dashboard-discount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: #e1f1f8;
    border: 1px solid #0081b4;
    border-radius: 8px;
    padding: 10px 16px;
}

#dashboard-main .user-form .invalid-text,
.end-service .invalid-text,
.estate-ads .invalid-text {
    display: none;
}

#dashboard-main .user-form .invalid .invalid-text,
.end-service .invalid .invalid-text,
.estate-ads .invalid .invalid-text {
    color: #ec1717;
    display: flex;
}

#dashboard-main .user-form input:only-of-type(text) {
    background-color: #efefef;
}

#dashboard-main .user-form input::placeholder {
    font-size: 0.875rem;
}

#dashboard-main .user-form .invalid input,
.end-service .invalid input,
.estate-ads .invalid input {
    border: 1px solid #ec1717;
    background-color: #fafafa;
}

    #dashboard-main .user-form .invalid input::placeholder,
    .end-service .invalid input::placeholder,
    .estate-ads .invalid input::placeholder {
        color: #ec1717;
    }

#dashboard-main .user-wallet form input {
    background-color: #fafafa;
}

    #dashboard-main .user-wallet form input::placeholder {
        color: #b8b8b8;
        font-size: 0.875rem;
    }

#dashboard-main .user-wallet form {
    margin-top: 1rem;
}

#dashboard-main .user-wallet .search-icon {
    position: absolute;
    top: 20%;
    left: 3%;
    color: #b8b8b8;
}

#dashboard-main .user-wallet .search-input {
    width: 100%;
    border: 1px solid #f1be94;
    border-radius: 8px;
}

    #dashboard-main .user-wallet .search-input:focus {
        /*box-shadow: 0 0 0 0.25rem rgb(241 190 148 / 25%);*/
    }

    #dashboard-main .user-wallet .search-input::placeholder {
        padding-right: 20px;
        color: #b8b8b8;
    }

#dashboard-main .user-wallet .search-result {
    position: absolute;
    z-index: 10;
    border: 1px solid #f1be94;
    display: none;
    flex-direction: column;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 10px;
    width: 100%;
    margin-top: 2px;
    background-color: #fafafa;
}

#dashboard-main .user-wallet .transaction-state {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #f1be94;
    border-radius: 8px;
    padding: 4px;
}

#dashboard-main .user-wallet .transaction-state-result {
    position: absolute;
    z-index: 10;
    border: 1px solid #f1be94;
    display: none;
    flex-direction: column;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 10px;
    width: 100%;
    margin-top: 2px;
    background-color: #fafafa;
}

#dashboard-main .user-wallet .sort-btn,
#dashboard-main .user-wallet .filter-btn {
    border: 1px solid #F1BE94;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 10px 16px;
    border-radius: 8px;
}

#dashboard-main .user-wallet .selected-filter {
    background-color: #FAFAFA;
    border: 1px solid #0081B4;
    color: #0081B4;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    font-size: 0.75rem;
}

#dashboard-main .pagination {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin-top: 16px;
    flex-wrap: wrap;
}

    #dashboard-main .pagination .next,
    #dashboard-main .pagination .previous {
        display: flex;
        align-items: center;
        color: #212121;
    }

        #dashboard-main .pagination .next.disabled,
        #dashboard-main .pagination .previous.disabled {
            color: #b8b8b8;
            pointer-events: none;
            cursor: default;
        }

    #dashboard-main .pagination .pages {
        display: flex;
        align-items: center;
        margin-bottom: 0px;
        padding-right: 0px;
    }

    #dashboard-main .pagination .page {
        margin-left: 5px;
    }

        #dashboard-main .pagination .page a {
            color: #0081b4;
            border: 1px solid;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 100%;
            height: 25px;
            width: 25px;
            font-size: 0.75rem;
        }

            #dashboard-main .pagination .page a.active {
                color: #fafafa;
                background-color: #0081b4;
                border: 1px solid #0081b4;
            }

#dashboard-main .accordion-button:not(.collapsed) {
    color: #333333;
    /*box-shadow: inset 0 0px 0 rgb(0 0 0 / 0%);*/
}

#dashboard-main .accordion-button:focus {
    border: none;
    /*box-shadow: 0 0 0 0rem rgb(13 110 253 / 0%);*/
}

#addAddressModal #map {
    height: 300px;
    border: 1px solid #b8b8b8;
    border-radius: 8px;
}

#addAddressModal form textarea {
    border: 1px solid #b8b8b8;
    border-radius: 8px;
    padding: 10px;
}

#dashboard-main .more-icon {
    background-color: white;
    border-radius: 4px;
    height: 25px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #0081b4;
    margin: 0px auto;
    cursor: pointer;
}

    #dashboard-main .more-icon i {
        color: #0081b4;
    }

#dashboard-main .more-details.open .more-detail-items {
    display: flex;
    position: absolute;
    flex-direction: column;
    z-index: 10;
    background-color: white;
    border-radius: 6px;
    left: 70%;
    width: 120px;
    border: 1px solid #b8b8b8;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.125);
}

    #dashboard-main .more-details.open .more-detail-items a {
        color: #212121;
        padding: 10px;
        font-size: 0.875rem;
    }

        #dashboard-main .more-details.open .more-detail-items a:first-child {
            color: #212121;
            border-bottom: 1px solid #b8b8b8;
        }

#dashboard-main .more-details .more-detail-items {
    display: none;
}

#dashboard-main .mobile-table {
    border: 1px solid #b8b8b8;
    border-radius: 8px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.125);
    margin: 16px 0px;
    overflow: hidden;
}

    #dashboard-main .mobile-table .mobile-table-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #e4f1f3;
        padding: 8px 10px;
        font-weight: bold;
        border-bottom: 1px solid rgba(66, 158, 171, 0.2);
    }

    #dashboard-main .mobile-table .mobile-table-row {
        background-color: #eeeeee;
        /* border-bottom: 1px solid rgba(66, 158, 171, 0.2); */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
    }

        #dashboard-main .mobile-table .mobile-table-row + .sub-items {
            display: none;
        }

        #dashboard-main .mobile-table .mobile-table-row.open + .sub-items {
            display: flex;
            flex-direction: column;
            padding: 10px;
        }

#dashboard-main form textarea,
#order-main form textarea {
    border: 1px solid #b8b8b8;
    border-radius: 8px;
    padding: 10px;
}

#ticketModal .message {
    display: flex;
    flex-direction: column;
}

#ticketModal .message-response {
    display: flex;
    flex-direction: column;
    background-color: #eeeeee;
    border-top: 1px solid #b8b8b8;
    border-bottom: 1px solid #b8b8b8;
    direction: ltr;
}

#ticketModal .user-icon {
    border-radius: 100%;
    overflow: hidden;
    background-color: #e8e8e8;
    border: 1px solid #ec7c1d;
    height: 25px;
    width: 25px;
    margin-left: 10px;
    margin-right: 10px;
}

#ticketModal .backup-icon {
    border-radius: 100%;
    overflow: hidden;
    background-color: #e8e8e8;
    border: 1px solid #0081B4;
    height: 25px;
    width: 25px;
    margin-left: 10px;
    margin-right: 10px;
}

#ticketModal .upload-image-input,
#ticketModal .upload-image-input {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

#ticketModal .upload-image-btn,
#ticketModal .upload-image-btn {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

#section-5 .full-width-video {
    display: grid;
    grid-template-rows: 80vh;
    overflow: hidden;
}

#section-5 .video-full {
    /* height: 100%; */
    position: absolute;
    background-color: #091b43;
    opacity: 0.4;
    display: flex;
    justify-content: center;
    align-items: center;
}

#section-5 #video-content {
    position: absolute;
    top: 20%;
}

#section-5 .video-overlay {
    position: absolute;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* top: 20%; */
    z-index: 10;
}

#section-5 .image-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 45px;
    background-color: #ec7c1d;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
}

.success-alert {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    color: white;
    background-color: #4eae40;
    border-radius: 8px;
    /*box-shadow: 0px 0px 16px rgb(0 0 0 / 13%);*/
    width: 100%;
    font-size: 0.875rem;
    margin: 16px 0px;
    position: fixed;
    bottom: 0%;
    width: 94%;
    margin-right: 2%;
    margin-left: 2%;
    z-index: 10000;
}

.recieve_message {
    display: flex;
    align-items: center;
}

    .recieve_message .switch {
        position: relative;
        display: inline-block;
        width: 55px;
        height: 26px;
    }

        .recieve_message .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .recieve_message .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #FAFAFA;
        border: 1px solid #0081B4;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .recieve_message input:checked + .slider {
        background-color: #FAFAFA;
    }

    .recieve_message input:focus + .slider {
        box-shadow: 0 0 1px #FAFAFA;
    }

    .recieve_message .slider::before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 2px;
        background-color: #0081B4;
        -webkit-transition: .4s;
        transition: .4s;
    }

    .recieve_message input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }

    .recieve_message .slider.round {
        border-radius: 26px;
    }

        .recieve_message .slider.round:before {
            border-radius: 50%;
        }

/* ================================================== End of Normal User Pages ============================================= */

/* ==================================================== Expert User Pages =============================================== */

#dashboard-main .expert-dashboard-alert {
    background-color: #ffd1d1;
    border: 1px solid #ec1717;
    display: flex;
    justify-content: center;
    padding: 10px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.875rem;
    text-align: center;
}

#dashboard-main #dashboard-aside .suggestions-number {
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: #ec7c1d;
    height: 25px;
    width: 25px;
    font-size: 0.75rem;
}

#dashboard-main .new-suggestions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    font-size: 0.875rem;
    background-color: #e2f3f9;
    border: 1px solid #0081b4;
    border-radius: 8px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.125);
    margin-bottom: 16px;
}

    #dashboard-main .new-suggestions a {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        background-color: #fafafa;
        border: 1px solid #0081b4;
        color: #0081b4;
        padding: 6px 16px;
        border-radius: 8px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.125);
    }

#dashboard-main .active-service {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: #e2f3f9;
    border: 1px solid #0081b4;
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.125);
    margin-bottom: 24px;
}

#dashboard-main form input[type="text"],
.estate-ads form input[type="text"] {
    background-color: #fafafa;
}

#dashboard-main form textarea,
.estate-ads form textarea {
    background-color: #fafafa;
}

#dashboard-main .expert-image-box {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background-color: #f6f6f6;
    border: 1px solid #b8b8b8;
    height: 120px;
    width: 120px;
    overflow: hidden;
}

#dashboard-main .image-edit-icon {
    border-radius: 6px;
    border: 1px solid #0081b4;
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#dashboard-main .image-delete-icon {
    border-radius: 6px;
    border: 1px solid #ec1717;
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#dashboard-main .new-suggest {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.125);
    margin-bottom: 16px;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
}

#dashboard-main .expertise .expertise-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: fit-content;
}

    #dashboard-main .expertise .expertise-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

#dashboard-main .expertise .checkmark {
    position: absolute;
    top: 0;
    height: 20px;
    border-radius: 100%;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #b8b8b8;
    background: #fafafa;
}

#dashboard-main .expertise .expertise-container:hover input ~ .checkmark {
    background-color: #ccc;
}

#dashboard-main .expertise .expertise-container input:checked ~ .checkmark {
    background-color: white;
    border: 1px solid #0081b4;
    display: flex;
    justify-content: center;
    align-items: center;
}

#dashboard-main .expertise .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

#dashboard-main
.expertise
.expertise-container
input:checked ~ .checkmark:after {
    display: block;
}

#dashboard-main .expertise .expertise-container .checkmark:after {
    background-color: #0081b4;
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

#dashboard-main .expertise .sub-items {
    display: none;
}

#dashboard-main .expertise.open .sub-items {
    display: flex;
    flex-direction: column;
    margin-right: 30px;
}

#dashboard-main .form-check-input:checked {
    background-color: #0081b4;
    border-color: #0081b4;
}

#dashboard-main .expertise-item {
    font-size: 0.875rem;
    padding: 6px 16px;
    margin-left: 16px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid #ec7c1d;
}

.filter-multi-select > .viewbar > .selected-items > .item {
    padding: 0px 0.5em 0px 0.5em;
}

/* ================================================== Estate Pages ========================================================= */

.estate-ads .estate-ads-image {
    border-radius: 20px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.125);
}

.estate-user .number-info {
    display: none;
    margin: 16px 0px;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    width: 100%;
}

.estate-user .copy-icon {
    cursor: pointer;
}

.success-message {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    color: white;
    background-color: #4eae40;
    border-radius: 8px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.125);
    width: 100%;
    font-size: 0.875rem;
    margin: 16px 0px;
}

.estate-user .estate-image {
    border-radius: 5px;
    margin-left: 10px;
    max-width: 100px;
}

.charge-wallet-alert {
    margin: 16px 0px;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    border-radius: 8px;
    background-color: #eb4040;
    color: white;
}

    .charge-wallet-alert .close-icon {
        cursor: pointer;
        margin-right: 10px;
    }

#areaName .dropdown-menu.show {
    width: 100%;
}

.estate-ads .tag {
    color: #9e9e9e;
    border: 1px solid;
    border-radius: 8px;
    padding: 7px 16px;
    margin-left: 8px;
    font-size: 0.875rem;
    margin-bottom: 16px;
}

.state {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    background-color: #fafafa;
    border: 1px solid #0081b4;
    border-radius: 8px;
    padding: 5px 10px;
    min-width: 6rem;
    margin-left: 8px;
    cursor: pointer;
}

.more-address-detail {
    display: none;
}

.phoneNumber,
.phone-number,
.state a {
    color: #333333;
}

.modal-slider-image {
    max-height: 420px;
    border-radius: 6px;
    width: 100% !important;
}

#staticBackdrop button.owl-prev,
#staticBackdrop button.owl-next {
    position: absolute;
    height: 30px;
    width: 30px;
    background-color: #FAFAFA;
    border-radius: 100%;
}

#staticBackdrop button.owl-prev {
    top: 46%;
    right: 0;
}

#staticBackdrop button.owl-next {
    top: 46%;
    left: 0;
}

/* ==================== multi select ======================== */

.filter-multi-select .items {
    display: table-caption;
}

.filter-multi-select .dropdown-item .custom-control-label::before {
    left: 4.5rem;
}

.filter-multi-select .dropdown-item .custom-control-label::after {
    left: 4.5rem;
}


.dark-row {
    padding: 5px;
    /*background-color: rgb(0 0 0 / 3%);*/
}

.light-row {
    padding: 5px;
}



/*------------DatePicker-----------*/
.datePicker {
    width: 300px;
}

.datePickerRow {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.dateDay {
    width: 70px;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.dateMonth {
    width: 115px;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.dateYear {
    width: 85px;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.price-sticky {
    position: sticky;
    top: 30px;
}

h1 {
    font-size: 2.0rem;
}

h2 {
    font-size: 1.5rem;
    color: #4e4e4e;
}

h3 {
    font-size: 1.3rem;
    color: #4e4e4e;
}

h4 {
    font-size: 1.1rem;
    color: #4e4e4e;
}

h5 {
    font-size: 1.05rem;
    color: #4e4e4e;
}

h6 {
    font-size: 1.03rem;
    color: #4e4e4e;
}



#service-detail-text li {
    list-style: disc;
}

.p-brif {
    border: 1px solid #80808017;
    padding: 4px;
    background-color: #fedcc029;
}


td {
    font-size: 0.8rem;
}

th {
    font-size: 0.8rem;
}

.list-group-item a {
    color: #08a6e2;
}


p {
    text-align: justify;
}

.event-slider {
    height: 50px;
}

@media (min-width: 1200px) {
    .event-slider {
        height: 60px;
    }
}


.small-justify {
    text-align: justify;
}


article ul {
    list-style: disc;
}

.bg-color-orange {
    background-color: #EC7C1D;
}

.color-orange {
    color: #EC7C1D;
}

.bg-color-blue {
    background-color: #08A6E2;
}

.color-blue {
    color: #08A6E2;
}



/*Call*/
#call .btn-check:focus + .btn,
.btn:focus {
    box-shadow: unset;
}

#call .fa-close {
    position: relative;
    bottom: 13px;
    right: 6px;
    color: white;
    font-size: 13px;
}

    #call .fa-close:hover {
        cursor: pointer;
    }

#call a {
    text-decoration: none;
}

#call .btn-phone {
    background-color: green;
    border: 1px solid green;
    border-radius: 50%;
    color: #fff;
    width: 3em;
    height: 3em;
    margin-left: 4px;
}

    #call .btn-phone i {
        font-size: 23px;
        padding-top: 5px;
    }

    #call .btn-phone:hover {
        background-color: #2bb0d4;
        color: #fff;
        border: 1px solid #2bb0d4;
    }

#call {
    position: fixed;
    right: 4px;
    bottom: 4px;
    z-index: 1000;
}

    #call #tooltip {
        background-color: #999999b8;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        padding: 10px;
        z-index: 100000;
        border-radius: 5px;
    }

        #call #tooltip a {
            color: #fff;
        }

        #call #tooltip::before,
        #call #tooltip::after {
            content: "";
            position: absolute;
            z-index: 100000;
            right: 48px;
            top: 19px;
            border-top: 8px solid #9d9d9d52;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 0;
            transform: rotate(270deg);
        }

.pb-footer-copyright {
    padding-bottom: 4rem !important
}


@media (min-width:991px) {
    header .header-baner {
        height: 3em !important;
        min-height: 3em !important;
        max-height: 3em !important;
    }
}

@media (min-width:1400px) {
    header .header-baner {
        height: 4em !important;
        min-height: 4em !important;
        max-height: 4em !important;
    }
}

header .header-baner {
    height: 40px;
    min-height: 40px;
    max-height: 40px;
}

    header .header-baner img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }