.trade-area-modal{
    .modal-body{
        background-color: #f8f9fa;
        padding: .5rem;
        gap: .5rem

    }
    .zone-entry{
        position: relative;
        background-color: #fff;
        padding: 0.5rem;
        box-shadow: var(--bs-box-shadow-sm);
        align-items: center;
        gap: 0.5rem;
        .form-control{
            margin: 0;
        }
        &__type{
            flex-shrink: 1;
            min-width: 120px;
        }
        &__zone{
            width: 100%;
        }
        &__distance{
            flex-shrink: 1;
            width: 350px;
            margin-right: 2rem;
        }
        &__remove{
            position: absolute;
            right: 0;
            top: 0;
            width: 1.25rem;
            display: flex;
            align-items: center;
            height: 1.25rem;
            justify-content: center;
            border-radius: 50%;
            font-size: 1rem;
            padding:0;
            background-color: var(--bs-danger);
            color: white;
            margin: .25rem;
            visibility: hidden;
        }
        &:hover{
            .zone-entry__remove{
                visibility: visible;
            }
        }
        

    }
}
.trade-area-control.form-control{
    display: flex;
    position: relative;
    align-items: center;
    height: auto;
    flex-wrap: wrap;
    gap: 0.5rem;
    .place-finder{
        flex: 1;
    }
    .zone-entry-badge{
        display: flex;
        align-items: center;
        gap: 0.5rem;
        .zone-entry-badge__zone{
            flex: 1;
        }
    }
    .zone-entry-badge{
        background-color: #C5C5C5;
        line-height: 1;
        color: white;
        border-radius: var(--bs-border-radius);
        font-size: 12px;
        padding: 6px 10px;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
}