.ProductModal-Components-ViewDeliveryRestrictions {
    &-subgroup {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        align-items: stretch;

        .SuiteCard {
            box-shadow: none;
            &-header {
                &-content {
                    display: flex;
                    justify-content: space-between;
                    flex-direction: row;
                    margin: 0.8rem 0 0.5rem;
                }
            }

            &-title {
                font-size: medium;
            }

            .header-subtext {
                font-size: small;
                font-weight: 100;
                color: $gray-700;
            }

            .header-subtext-with-icon {
                font-size: small;
                font-weight: 100;
                color: $gray-700;
                padding-left: 12px;
            }

            .icon {
                vertical-align: middle;
                padding-left: 6px;
            }
        }
        .notDeliveringInfo {
            color: #0563c2;
            margin-bottom: 2px;
        }
        .notDeliveringLabel {
            margin-right: 3px;
        }
    }

    .CountryXServicePairing-delivering,
    .CountryXServicePairing-notDelivering {
        background: $gray-100;

        .SuiteListView-filter-input,
        .SuiteListView-group {
            background: $gray-100;
        }
    }

    .SuiteCard-title {
        font-weight: 450;
    }

    .SuiteListView-list-overlay-start,
    .SuiteListView-list-overlay-end {
        background: none;
    }

    .header {
        display: flex;
        align-items: flex-start;

        h3 {
            font-size: 1.286rem;
            font-weight: 400;
            margin-right: 1.5rem;
        }

        .tabs {
            display: flex;
            align-items: flex-start;
            margin: 0.2rem 0;

            .tabName {
                color: var(--midnight-650);
                font-weight: normal;
                padding-bottom: 0.1rem;
                margin: 0;
                display: inline-block;
            }

            .nav-item {
                display: flex;
                align-items: flex-start;

                &:not(:last-child)::after {
                    content: '|';
                    font-size: medium;
                    margin: 0 1rem;
                    color: var(--gray-200);
                }
            }

            .nav-link {
                padding: 0;
                margin: 0;
                border: none !important;
                background: none !important;

                &.active .tabName {
                    color: var(--midnight-600);
                    border-bottom: 1px solid var(--midnight-600);
                }
            }
        }
    }

    .CountryRestrictions,
    .ServiceRestrictions,
    .CountryXServicePairing {
        display: flex;
        flex-direction: row;
        gap: 1rem;

        &-card-separator {
            height: 450px;
            margin: 14px 10px;
            border-right: 2px solid var(--gray-100);
            display: inline-block;
        }
        &-card-separator-x {
            height: 450px;
            margin-right: 10px;
            margin-left: 10px;
            border-right: 2px solid var(--gray-100);
            display: inline-block;
        }

        &-card {
            border: none;
            display: flex;
            flex: 1;
            flex-direction: column;

            &-subtitle {
                font-weight: 300;
                font-size: small;
                color: $gray-700;
            }
        }

        &-delivering-subtext-with-icon {
            display: flex;
            align-items: center;
            gap: 4px;

            .subtext {
                color: $gray-700;
                font-size: small;
            }
        }
    }

    .serviceXCountryEmptyState {
        display: flex;
        height: 500px;

        .InfoMessage {
            width: 100%;

            &-body {
                width: 300px;
            }
        }
    }
}