.Metriom-add-list{
    padding-bottom: 6rem;

    .card-item {
        width: 100%;
        height: 100%;
        background: var(--white);
        border-radius: var(--radius-12);
        overflow: hidden;
        box-shadow: var(--light-shadow-3);

        .img-box {
            aspect-ratio: 2/1.5;
            flex-shrink: 0;
            overflow: hidden;

            &:after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background: linear-gradient(180deg, rgba(0, 54, 102, 0.00) 0%, rgba(0, 54, 102, 0.30) 100%);
                mix-blend-mode: hard-light;
                pointer-events: none;
                opacity: 0.35;
            }


            .swiper {
                width: 100%;
                height: 100%;
                z-index: 1;

                img {
                    border-radius: 0.57rem 0.57rem 0.57rem 0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;


                }

                .row-border {
                    border-radius: 0 0.57rem 0.57rem 0;

                }

                .slider-nav {
                    position: absolute;
                    top: calc(50% - 0.5rem);
                    z-index: 2;

                    svg {
                        fill: var(--White);
                    }

                    &.next {
                        right: .57rem;
                    }

                    &.prev {
                        right: auto;
                        left: .57rem;
                    }
                }

                .slider-pagination {
                    position: absolute;
                    bottom: 1rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    right: 0;
                    left: 0;
                    z-index: 2;

                    .swiper-pagination-bullet {
                        background: var(--secondary-lighter);
                        opacity: 0.5;

                        &.swiper-pagination-bullet-active {
                            opacity: 1;
                        }
                    }
                }
            }

            .top-action {
                top: 0;
                right: 0;
                left: 0;
                padding: 1rem;
                z-index: 2;

                .booking-type {
                    color: var(--bg-ff);
                    background-color: var(--primary-light-1);

                    svg {
                        max-width: 1.28rem;
                        max-height: 1.28rem;
                    }

                    &.accept {
                        svg {
                            fill: var(--system-teal-0);
                        }
                    }

                    &.instant {
                        svg {
                            fill: var(--system-orange-0);
                        }
                    }

                    &.prime {
                        svg {
                            fill: var(--system-purple-0);
                        }
                    }
                }
            }

            .bottom-action {
                width: 100%;
                bottom: 0;
                left: 0;
                padding: 0.5rem 1rem;
                cursor: pointer;
                z-index: 2;

                svg {
                    max-width: 1.28rem;
                    max-height: 1.28rem;
                    fill: var(--White);
                }
            }

            .edit {
                bottom: .57rem;
                right: .57rem;
                padding: 0.2rem .57rem;
                font-size: 0.91rem;
                background: var(--White);
                color: var(--secondary-lighter);
                border-radius: var(--radius-8);
                cursor: pointer;
                -webkit-border-radius: var(--radius-8);
                -moz-border-radius: var(--radius-8);
                -ms-border-radius: var(--radius-8);
                -o-border-radius: var(--radius-8);
                z-index: 2;

                svg {
                    max-width: 1.28rem;
                    max-height: 1.28rem;
                    stroke: var(--secondary-lighter);
                }
            }


        }

        .content-box {
            width: 100%;
            padding: 1.14rem;
            color: var(--Black);

            .Description {
                overflow: hidden;

            }

            .title {
                display: -webkit-box;
                -webkit-line-clamp: 1;
                font-size: 1rem;
                font-weight: 700;
                color: var(--Black);
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .property-rate {
                .property {
                    svg {
                        max-width: 1.5rem;
                        max-height: 1.5rem;
                        fill: var(--primary-light-1);
                    }

                    span {
                        color: var(--text-color-3);
                    }
                }
            }

            .options {
                .item {
                    line-height: 0;

                    svg {
                        max-width: 1.42rem;
                        max-height: 1.42rem;
                        stroke: var(--secondary-lighter);
                        fill: var(--secondary-lighter);
                    }
                }
            }


        }
    }

    .column-sort {

        display: flex;
        flex-direction: column;
    }

    .row-sort {

        display: flex;
        flex-direction: row;
    }

    .table-sort {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .block-sort {
        margin-bottom: 1rem;
        flex: 0 0 auto;
        width: 100%;
    }


    .section-title-wraper {
        .sorting {
            display: flex;
            gap: 0.5rem
        }

        .title {
            font-size: 1.28rem;
            color: var(--text-dark-0);
        }

        .subtitle {
            font-size: 0.91rem;
            color: var(--text-dark-0);
        }

        .fill-icon {

            fill: var(--primary-light-1);
        }

        .null-icon {

            fill: var(--bg-e0);
        }




    }

    @media(max-width:780px) {
        .table-sort {
            flex: 0 0 auto;
            width: 50%;
        }

        .section-title-wraper {
            .search{
                width: 100%;
            }
            .sorting {
                display: none;
            }
        }
    }

    @media(max-width:540px) {
        .table-sort {
            flex: 0 0 auto;
            width: 100%;
        }
    }

    .search {
        background-color: #fff;
        margin-bottom: 2rem;
        gap: 1.71rem;
        width: 80%;

        .searchbtn {
            background-color: var(--primary-light-1);

            svg {
                width: 1.5rem;
                height: 1.5rem;
                fill: #fff;
                stroke: #fff;
            }
        }

        .searchbar {
            .label {
                display: block;
                font-size: 0.87rem;
                font-weight: 700;
            }

            select {
                width: 100%;
                border: none;
                border-bottom: 1px solid var(--bg-e0);
                font-size: 0.87rem;
                color: var(--text-color-5);
                padding-bottom: 0.3rem;
            }
        }
    }
}