// All Extension style are here.
.dnxte_dashb_extension_wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.dnxte_dashb_extension_wrap_item {
    background: #FFFFFF;
    border: 1px solid $dash-white;
    box-shadow: 0px 1px 2px rgba(93, 107, 152, 0.08);
    border-radius: 4px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s;

    .extensin_top_wrap {
        display: inline-flex;
        align-items: center;
        gap: 10px;

        img {}

        .dnxte_dash_ex_title {
            font-size: 14px;
            line-height: 24px;
            font-weight: 600;
            color: $dash-main-title;
            text-transform: capitalize;
            padding: 2px 4px;
            margin: 0;
            font-family: 'Inter', Helvetica, Arial, Lucida, sans-serif;
        }

        .dnxte_dash_ex_badge {
            font-size: 11px;
            line-height: 1;
            font-weight: 500;

            text-transform: capitalize;
            padding: 2px 4px;
            border-radius: 1px;
            border-style: solid;
            border-width: 0.5px;

            &.new {
                color: $dash-success;
                border-color: #63e6be;
            }

            &.coming_soon {
                color: $dash-active;
                background: #F3F0FF;
                border-color: $dash-active;
            }
        }

        .dnxte_dash_ex_badge {}
    }

    .ex_pra {
        margin: 0 0 20px;
    }

    .switch_demo_dcos {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding: 16px 0 0;

        &::before {
            position: absolute;
            content: "";
            top: 0;
            height: 1px;
            background: #EFF1F5;
            left: -20px;
            right: -20px;
            transition: all 0.3s;
        }

        .dnxte_dashb_toggle_control {
            input {}

            .control {
                top: -6px;
                left: 0;

                &::after {}
            }
        }

        .demo_docs {
            a {
                font-size: 12px;
                line-height: 14px;
                font-weight: 500;
                color: #7D89B0;
                text-transform: capitalize;
                text-decoration: none;
                margin-right: 16px;
                position: relative;
                border-bottom: 1px solid transparent;

                &::before {
                    position: absolute;
                    content: "";
                    right: -10px;
                    width: 1px;
                    height: 10px;
                    width: 1px;
                    height: 12px;
                    top: 50%;
                    transform: translateY(-50%);
                    background: #DCDFEA;

                }

                &:last-child {
                    margin-right: 0;

                    &::before {
                        display: none;
                    }
                }

                &:focus {
                    box-shadow: none;
                    outline: none;
                }

                &:hover {
                    color: $dash-active-two;
                    border-bottom: 1px solid $dash-active-two;
                }
            }
        }
    }

    &:hover {
        border: 1px solid #7D89B0;

        .switch_demo_dcos {
            &::before {
                background: #7D89B0;
            }
        }
    }
}

.divi-essential_page_dnxte-essential-extensions #wpbody-content {
    overflow: hidden;
}