.d4p-group {
    background: var(--d4p-color-main-background);
    border: 1px solid var(--d4p-color-main-border);
    color: var(--d4p-color-main-text);
    border-radius: var(--d4p-layout-main-border-radius);
    margin: 0 0 2em;
    text-align: center;
    max-width: 955px;
    width: 100%;

    h3 {
        margin: 0;
        background: #{$color-header-background};
        color: #{$color-header-text};
        border-bottom: 1px solid #{$color-main-border};
        text-align: left;
        padding: .75em 1em;
        line-height: 1.4;
        font-size: 1.4em;
        font-weight: 400;
        vertical-align: top;
        border-radius: var(--d4p-layout-main-border-radius) var(--d4p-layout-main-border-radius) 0 0;

        i {
            float: right;
            cursor: pointer;
        }

        textarea {
            height: 160px;
        }

        .d4p-kb-group {
            float: right;
            background: #C00;
            color: #FFF;
            padding: 2px 8px;
            border-radius: var(--d4p-layout-badge-border-radius);
            text-decoration: none;
            font-size: 14px;
        }

        .d4p-toggle-control-wrapper {
            input {
                display: none;
            }

            button {
                border: 0;
                padding: 0;
                background: 0 0;
                vertical-align: top;
                cursor: pointer;
                font-size: 1.4em;
                margin: 0 .5em 0 0;

                i.d4p-ui-toggle-on {
                    color: green;
                }

                i.d4p-ui-toggle-off {
                    color: red;
                }
            }
        }
    }

    &.d4p-group-card-upsell {
        border-color: var(--d4p-color-layout-accent);

        > h3 {
            background-color: var(--d4p-color-layout-accent);
            color: #FFF;
        }
    }

    &.d4p-group-tools {
        label {
            display: block;
            line-height: 1.8;
        }
    }

    &.d4p-hidden-group {
        display: none;
    }

    .d4p-group-inner {
        text-align: left;
        font-size: 15px;
        line-height: 1.7;

        h4.d4p-bar-title {
            margin: 0 0 1em;
            padding: .2em .8em;
            font-size: 1.2em;
            background: #{$color-header-background};
        }

        p {
            font-size: 1em;
            line-height: 1.7;
        }

        ul {
            list-style: none;
            margin: 0;

            li {
                margin: 3px 0;
            }

            &.d4p-with-bullets {
                list-style: outside disc;
                margin-left: 20px;

                li {
                    list-style: inherit;
                }
            }
        }

        .d4p-group-footer {
            border-top: 1px solid #DDD;
            background: #F8F8F8;
            padding: 1em;
            text-align: left;
            width: 100%;
            border-radius: 0 0 var(--d4p-layout-main-border-radius) var(--d4p-layout-main-border-radius);
        }

        .d4p-group-notice {
            padding: 1em;
            margin: 0;
            font-size: 1.1em;
            font-weight: 500;
            border: none;
            border-bottom: 1px solid #DDD;
            background-color: #E9F5FF;
            color: #003252;

            &.d4p-notice-warning {
                background-color: #FFE5E5;
                color: #4B0000;
            }
        }

        .d4p-card-badge {
            border-radius: var(--d4p-layout-badge-border-radius);
            color: #FFF;
            padding: 1px 10px 3px 8px;
            line-height: 1.5;

            .d4p-icon {
                font-size: 90%;
                vertical-align: top;
                margin: 6px 6px 0 0;
            }

            &.d4p-badge-green,
            &.d4p-badge-ok {
                background: #090;
            }

            &.d4p-badge-red,
            &.d4p-badge-error {
                background: #900;
            }

            &.d4p-badge-purple,
            &.d4p-badge-maintenance {
                background: #813E99;
            }

            &.d4p-badge-blue,
            &.d4p-badge-upgrade {
                background: #0A63A5;
            }

            &.d4p-badge-orange,
            &.d4p-badge-notice {
                background: #FC0;
                color: #900;
            }
        }

        .d4p-group-elements {
            display: flex;
            flex-wrap: wrap;
            row-gap: .75em;
            margin: 0 -1.5em 1.5em;

            > div {
                flex-basis: 50%;
                padding: 0 1.5em;

                &.d4p-group-element-full {
                    flex-basis: 100%;
                    border-bottom: 1px solid #DDD;
                    padding-bottom: 0.75em;
                }

                &.d4p-group-element-wide {
                    flex-basis: 100%;
                }

                &.d4p-group-element-last {
                    flex-basis: 100%;
                    border-top: 1px solid #DDD;
                    padding-top: 0.75em;
                }

                display: flex;
                justify-content: space-between;

                @media screen and (max-width: 768px) {
                    flex-basis: 100%;
                }
            }

            &:last-child {
                margin-bottom: 0;
            }

            &.d4p-elements-next {
                border-top: 1px solid #DDD;
                padding-top: 1em;
            }
        }
    }

    &.d4p-group-with-toggle {
        .d4p-group-inner {
            .d4p-settings-on,
            .d4p-settings-off {
                padding: 1.5em;

                p {
                    &:first-child {
                        margin-top: 0;
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }

            .d4p-settings-off {
                display: none;
            }

            .d4p-settings-on {
                display: block;
                border-bottom: 1px solid var(--d4p-color-main-border);
            }
        }

        &.d4p-group-toggle-off {
            .d4p-group-inner {
                .d4p-settings-on,
                .d4p-settings-section,
                .d4p-group-notice {
                    display: none;
                }

                .d4p-settings-off {
                    display: block;
                }
            }
        }
    }

    &:not(.d4p-group-with-settings) {
        .d4p-group-inner {
            padding: 1.5em;

            > *:first-child {
                margin-top: 0;
            }

            > *:last-child {
                margin-bottom: 0;
            }
        }
    }

    &.d4p-group-with-tabs {
        .d4p-header-tabs {
            margin: 0;
            background: #{$color-header-background};
            color: #{$color-header-text};
            border-bottom: 1px solid #{$color-main-border};
            padding: .4em 1em .4em;
            text-align: left;
            line-height: 1.6;
            font-size: 1.4em;
            font-weight: 400;
            border-radius: var(--d4p-layout-main-border-radius) var(--d4p-layout-main-border-radius) 0 0;
            box-sizing: border-box;

            div[role="tablist"] {
                button[role="tab"] {
                    padding: .3em 1em .4em;
                    margin: 0;
                    border: 0;
                    background: transparent;
                    cursor: pointer;
                    border-radius: var(--d4p-layout-main-border-radius);
                }

                button[role="tab"][aria-selected="true"] {
                    border: 1px solid var(--d4p-color-main-border);
                    background-color: #{$color-ctrl-tabs-background};
                }
            }
        }

        .d4p-group-inner {
            .wp-tab-panel {
                padding: 0;
                margin: 0;
                border: 0;
                background-color: transparent;
            }
        }
    }
}

.d4p-group-error {
    border-color: #D00;

    h3 {
        background: #D00;
        color: #FFF;
    }

    .d4p-group-inner {
        text-align: left;

        p {
            margin-top: 0;
            font-weight: bold;
        }
    }
}