.AddHighlightProjectionModal {
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    pointer-events: none;

    &-container {
        flex-basis: 500px;
        pointer-events: auto;
    }

    &-header {
        display: flex;
        position: relative;
    }

    &-content {
        min-height: 60px;

        .Icons-close-round {
            height: 16px;
            width: 16px;
        }

        .ListHeaderSearch-close {
            margin-top: 8px;
        }

        .ListHeaderSearch-field {
            border-radius: 5px;

            /* stylelint-disable max-nesting-depth */
            &:focus {
                border-color: $blue-medium;
                box-shadow: inset 0 1px 1px rgb(0 0 0 / 7%), 0 0 8px $blue-medium;
            }
            /* stylelint-enable max-nesting-depth */
        }
    }

    &-x-icon {
        fill: $grey_800;
        height: 14px;
        vertical-align: bottom;
        width: 14px;
    }

    &-heading {
        flex: 1;
        font-size: 18px;
        font-weight: $weight_bold;
        margin: 0 10px 0 20px;
    }

    &-filter-form-field {
        margin-bottom: 0;
    }

    &-territories-list {
        border-bottom: 1px solid $grey_200;
        border-left: 1px solid $grey_200;
        border-right: 1px solid $grey_200;
        height: 250px;
        overflow-y: scroll;
    }

    &-territories-list-category {
        color: $grey_300;
        font-weight: $weight_bold;
        margin-top: 15px;
        padding-left: 10px;
        text-transform: uppercase;
    }

    &-territories-list-item {
        border-top: 1px solid $grey_100;
        padding-bottom: 1px;
        padding-left: 10px;
        /* stylelint-disable selector-class-pattern */
        &.selected {
            background-color: $bluejay_light;
        }
        /* stylelint-enable selector-class-pattern */
    }

    &-footer {
        border-top: 1px solid $grey_200;
        display: flex;
        padding: 10px 20px;
    }

    &-button-wrapper {
        font-size: 13px;
        text-align: right;
    }

    &-selected-territories-indicator {
        align-items: center;
        display: flex;
        flex: 1;
        margin: 0;
    }

    &-close {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 15px;
    }

    &-button {
        margin-left: 10px;
    }

    @include h-lte(465px) {

        &-container {
            height: 100%;
            overflow: auto;
        }
    }
}