.w_route_card {
    padding: 20px;

    --route-date_splitter-bg: #F1F1F1;
    --route-date_splitter-width: 134px;
    --route-date_splitter-height: 1.5px;
    --route-date_splitter-margin: 5px 0;

    --route-card-bg: #FFFFFF;
    --route-card-margin: 20px 0;
    --route-card-box_shadow: 0 -1px 10px rgba(198, 199, 203, 0.2), -1px 4px 10px rgba(198, 199, 203, 0.2);
    --route-text-color: #272424;

    --big-font-size: 16px;
    --medium-font-size: 14px;
    --small-font-size: 10px;

    --route-text-container-bg: #F1F1F1;
    --route-text-container-padding: 15px;
    --route-text-container-margin: 0 0 0 51px;
    --route-text-container-border-radius: 10px;
    --route-text-img-filter: brightness(0) saturate(100%) invert(100%) sepia(2%) saturate(256%) hue-rotate(113deg) brightness(115%) contrast(89%);

    --route-card-owner-avatar-size: 52px;

    --route-owner-type-color: #065BFF;

    --route-cargo-type-color: #272424;

    --route_card_route_data-margin-top: 30px;

    --route-btn-border: 1.5px solid #FF613A;
    --route-btn-border-radius: 10px;
    --route-btn-padding: 7.5px 0;
    --route-btn-width: 171px;
    --route-btn-height: 100%;
    --route-btn-bg: #FFFFFF;
    --route-btn-hover-bg: #FF613A;
    --route-btn-hover-text-color: #FFFFFF;
    --route-btn-title-color: #272424;
    --route-btn-text-data-color:  #27242499;
    --route-btn-margin: 0;

    --route-date-data-justify: center;
    --route-date-data-margin: 4px 0 0 0;

    --card-splitter-bg: #E6E6E6;

    --route-number-font-size: 12px;
    --route-number-margin-top: 5px;

    --from-to-place-data-width: 205px;
    @media (max-width: 1160px) {
        --from-to-place-data-width: 100%;
    }

    background: var(--route-card-bg);
    margin: var(--route-card-margin);
    box-shadow: var(--route-card-box_shadow);
    border-radius: 10px;
    color: var(--route-text-color);
    &.highlighted{
        --route-card-bg: linear-gradient(90deg, #FBED96 0%, #ABECD6 100%), #FFFFFF;
        --card-splitter-bg: #FFF;
        --route-text-container-bg: #FFFFFF;
        --route-text-img-filter: unset;
    }
    .route_card_info_data{
        &.mobile{display: none}
        @media (max-width: 1024px) {
            display: none;
            &.mobile {
                display: block;
                --route-text-container-margin: 50px 0 0 51px;

                .route_card_owner_info {
                    height: unset;
                    margin-left: 0;
                    margin-bottom: 10px;
                    --medium-font-size: 12px;
                }
                .route_card_text_img{
                    top: 25px;
                }
                .route_card_owner_avatar{
                    top: 31px;
                }
                .card_owner_name{
                    position: absolute;
                    top: 40px;
                    left: 74px;
                    --big-font-size: 12px;
                }
            }
        }

        position: relative;

        .card_owner_name{
            font-weight: 600;
            font-size: var(--big-font-size);
        }
        .route_card_text_img{
            position: absolute;
            top: 5px;
            left: 0;
            filter: var(--route-text-img-filter);
            display: block;
            z-index: 1;
        }
        .route_card_owner_avatar{
            height: var(--route-card-owner-avatar-size);
            width: var(--route-card-owner-avatar-size);
            border-radius: 100%;
            display: block;
            position: absolute;
            top: 11px;
            left: 6px;
            z-index: 10;
            object-fit: cover;
            object-position: center;
        }
        .route_card_text_container{
            position: relative;
            @media (max-width: 992px) {
                --big-font-size: 14px;
            }
            background: var(--route-text-container-bg);
            padding: var(--route-text-container-padding);
            margin: var(--route-text-container-margin);
            border-radius: var(--route-text-container-border-radius);
            font-size: var(--big-font-size);

            &.msg{
                .route_card_text_container_txt{
                    background-image: linear-gradient(94.66deg, rgba(0, 0, 0, 1) 0%, rgba(241, 241, 241, 0) 8.64%, rgba(241, 241, 241, 0.98) 16.62%);
                    color: transparent;
                    background-clip: text;
                    -webkit-background-clip: text;
                }
                .route_msg_for_unregistered_user, .route_clicked_msg_for_unregistered_user{
                    --filter: none;
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    img{
                        width: 32px;
                        height: 32px;
                        display: block;
                        filter: var(--filter);
                    }
                    div{
                        font-size: 12px;
                        width: 215px;
                        overflow-wrap: break-word;
                        color: #27242499;
                    }
                    @media (max-width: 800px) {
                        div{
                            font-size: 10px;
                        }
                        img{
                            width: 24px;
                            height: 24px;
                        }
                    }
                }
                .route_clicked_msg_for_unregistered_user{
                    display: none;
                    div{
                        color: #272424;
                    }
                    --filter: brightness(0) saturate(100%) invert(43%) sepia(55%) saturate(1482%) hue-rotate(336deg) brightness(104%) contrast(101%);
                }
                &.clicked{
                    .route_clicked_msg_for_unregistered_user{
                        display: flex;
                    }
                    .route_msg_for_unregistered_user{
                        display: none;
                    }
                }
            }

        }
        .route_card_owner_info{
            height: 47px;
            margin-left: 75px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .route_card_info_left_part{
                display: flex;
                align-items: center;
                gap: 10px;
                .card_splitter{
                    height: 22px;
                    width: 2px;
                    background: var(--card-splitter-bg);
                }
                .card_owner_type{
                    &.mover{
                        --route-owner-type-color: #45C226;
                    }
                    font-size: var(--medium-font-size);
                    color: var(--route-owner-type-color);
                    font-weight: 600;
                }
                .card_cargo_type{
                    display: flex;
                    align-items: center;
                    gap: 5px;
                    font-size: var(--medium-font-size);
                    color: var(--route-cargo-type-color);
                    font-weight: 600;

                    div.orange{color: #FF613A}
                }
            }
        }
    }
    .route_card_route_data_cont{
        &.mobile{display: none}
        @media (max-width: 1160px) {
            display: none;
            &.mobile{
                display: block;
                .route_card_route_data {
                    display: grid;
                    grid-template-columns: 20px calc(100% - 30px);
                    gap: 10px;

                    .way_progress_line_container {
                        margin-top: 20px;
                        height: calc(100% - 20px);

                        .way_progress_round:first-of-type {
                            left: unset;
                            top: 0;
                        }

                        .way_progress_round:last-of-type {
                            right: unset;
                            top: calc(100% - 20px);
                        }

                        .way_progress_line {
                            background: linear-gradient(180deg, rgba(6, 91, 255, 1) 0%, rgba(69, 194, 38, 1) 100%);
                            height: calc(100% - 10px);
                            width: 4px;
                        }

                        .way_progress_arrows_line {
                            height: calc(100% - 10px);
                            width: 4px;
                            background-repeat: repeat-y;
                            background-image: url("/static/v2/icons/widgets/w_route_card/route_arrow_mobile.svg");
                            background-size: 4px;
                        }
                    }

                    .place_title{
                        width: 100%;
                        --max-width: var(--from-to-place-data-width)!important;
                        background-image: linear-gradient(90deg, rgb(0 0 0) 0%, #FFFFFF var(--max-width))!important;
                    }

                    .route_transport, .route_date_data {
                        &.route_transport {
                            margin-bottom: 0;
                            margin-top: 35px;
                        }

                        &.route_date_data {
                            margin-top: 0;
                            margin-bottom: 5px;

                            &:last-of-type {
                                margin-bottom: 39px;
                            }
                        }

                        justify-content: left !important;
                    }

                    .arrival_to {
                        text-align: left !important;
                    }
                }
            }
        }
        .route_card_route_data{
            margin-top: var(--route_card_route_data-margin-top);
            display: flex;
            justify-content: space-between;
            gap: 60px;

            .from_to_place_data{
                width: var(--from-to-place-data-width);
                @media (max-width: 992px) {
                    --big-font-size: 14px;
                }
                &:has(.arrival_to){
                    .place{justify-content: right}
                } &:has(.departure_from){
                    .place{justify-content: left}
                }
                @media (max-width: 1160px) {.place{justify-content: left!important;}}
                .label{
                    color: #27242499;
                    font-size: var(--big-font-size);
                    font-weight: 600;
                    margin-bottom: 10px;
                    &.departure_from{
                        text-align: left;
                    } &.arrival_to{
                        text-align: right;
                    }
                }
                .place{
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    .country{
                        display: flex;
                        align-items: center;
                        gap: 5px;

                        img{
                            width: 16px;
                            height: 12px;
                            display: block;
                            object-fit: contain;
                            box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
                        }
                        .country_code{
                            color: #27242499;
                            font-size: var(--medium-font-size);
                        }
                    }
                    .place_title{
                        --gradient_100: var(--max-width);
                        --max-width: calc(var(--from-to-place-data-width) - 52.3px);
                        font-size: var(--big-font-size);
                        font-weight: 800;
                        max-width: var(--max-width);
                        overflow: hidden;
                        white-space: nowrap;
                        &.gradient{
                            color: transparent;
                            background-clip: text;
                            -webkit-background-clip: text;
                            background-image: linear-gradient(90deg, rgb(0 0 0) 0%, #FFFFFF var(--gradient_100));
                        }
                    }
                }
            }
            .route_way_data{
                @media (max-width: 992px) {
                    --medium-font-size: 12px;
                }
                flex-grow: 1;
                .route_transport{
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 5px;
                    margin-bottom: 10px;
                    margin-top: 8px;
                    .route_transport_name{
                        font-size: var(--medium-font-size);
                        font-weight: 600;
                    }
                    img{
                        height: 12px;
                        display: block;
                    }
                }
            }
        }
    }
    .dates_inf_cont{
        display: flex;
        justify-content: space-between;
    }
    .way_progress_line_container{
        position: relative;
        width: 100%;
        height: 15px;
        .way_progress_round{
            height: 20px;
            width: 20px;
            background: #FFFFFF;
            border-radius: 100%;
            position: absolute;
            top: -10px;
            z-index: 11;
            &:first-of-type{
                border: 3px solid #065BFF;
                left: 0;
            }
            &:last-of-type{
                border: 3px solid #45C226;
                right: 0;
            }
        }
        .way_progress_line{
            width: calc(100% - 10px);
            margin-left: 10px;
            height: 4px;
            position: absolute;
            top: 2px;
            z-index: 1;
            background: linear-gradient(90deg, rgba(6,91,255,1) 0%, rgba(69,194,38,1) 100%);
        }
        .way_progress_arrows_line{
            width: calc(100% - 10px);
            margin-left: 10px;
            height: 4px;
            position: absolute;
            top: 2px;
            z-index: 10;
            background-image: url("/static/v2/icons/widgets/w_route_card/route_arrow.svg");
            background-repeat: repeat-x;
            background-size: 10px;
        }
    }
    .route_card_actions_container{
        margin-top: 23px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &.mobile{display: none;}
        @media (max-width: 1160px) {
            display: none;
            &.mobile{
                display: block;
                .delete_route{text-align: center}
            }
        }
        .delete_route{
            cursor: pointer;
            color: #27242499;
            font-size: var(--medium-font-size);
            &:hover{
                color: #FF613A;
            }
        }
        .right_part_action_btns{
            display: flex;
            align-items: center;
            gap: 20px;
        }
    }
    .route_btn{
        &.mobile{display: none;}
        @media (max-width: 1160px) {
            &.mobile{display: flex;}
            &.hide_in_mobile{display: none!important;};
        }

        cursor: pointer;
        &.solid{
            --route-btn-width: 222px;
            --route-btn-padding: 12px 0;
            --route-btn-bg: #FF613A;
            --route-btn-title-color: #ffffff;
        }
        &.inactive{
            cursor: default;
            --route-btn-title-color: #27242499;
            --route-btn-border: 1.5px solid #FF613A99;
        }
        width: var(--route-btn-width);
        border: var(--route-btn-border);
        border-radius: var(--route-btn-border-radius);
        padding: var(--route-btn-padding);
        background: var(--route-btn-bg);
        height: var(--route-btn-height);
        margin: var(--route-btn-margin);
        text-align: center;
        justify-content: center;
        transition: 200ms all;
        &:has(img){
            display: flex;
            gap: 5px;
            align-items: center;
            justify-content: center;
            text-align: unset;
        }
        &:not(&.inactive) and &:not(&.unhovered){
            &:hover{
                background: var(--route-btn-hover-bg);
                .route_btn_title{color: var(--route-btn-hover-text-color);}
                .route_btn_data{color: var(--route-btn-hover-text-color);}
                box-shadow: 0 4px 4px rgba(189, 104, 104, 0.25);
            }
        }
        .route_btn_title{
            @media (max-width: 768px) {
                --big-font-size: 14px;
                --medium-font-size: 12px;
            }
            color: var(--route-btn-title-color);
            font-size: var(--medium-font-size);
            &.big{
                font-size: var(--big-font-size);
            }
        }
        .route_btn_data{
            font-size: var(--small-font-size);
            color: var(--route-btn-text-data-color);
        }
        img{
            min-width: 16px;
            display: block;
        }
    }
    .route_date_data{
        display: flex;
        align-items: center;
        gap: 5px;
        justify-content: var(--route-date-data-justify);
        margin: var(--route-date-data-margin);
        font-size: var(--medium-font-size);
        width: 100%;
        .date_data_value{
            font-weight: 600;
        }
    }
    .route_date_splitter{
        background: var(--route-date_splitter-bg);
        width: var(--route-date_splitter-width);
        height: var(--route-date_splitter-height);
        margin: var(--route-date_splitter-margin);
    }
    .container_actions_mobile{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 21px;
        margin: 20px 0;
    }
    .route_number{
        @media (max-width: 1160px) {
            --route-number-font-size: 10px;
            --route-number-margin-top: 10px;
        }
        color: #000000;
        width: 100%;
        text-align: right;
        font-size: var(--route-number-font-size);
        margin-top: var(--route-number-margin-top);
    }
    .respond_route_cont{
        &.mobile{display: none;}
        @media (max-width: 1160px) {
            display: none;
            &.mobile{display: grid;}
        }
        display: grid;
        grid-template-columns: calc(100% - 47px) 37px;
        gap: 10px;
    }
    .chat_btn{
        padding: 6.5px;
        background: #FF613A;
        border-radius: 10px;
        img{
            display: block;
            height: 24px;
            width: 24px;
            filter: invert(1);
        }
    }
}