.transition {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.wpb_el_type_bb_responsive {
    .wpb_element_label {
        padding: 10px;
        background: #cccccc; /* For browsers that do not support gradients */
        background: linear-gradient(90deg, #cccccc, #ffffff); /* Standard syntax (must be last) */
    }
}

.bb-responsive-field {
    
    .bb-responsive-container {
        display: none;
    }
    
    .child-label {
        font-weight: 600;
        margin-bottom: 5px;
        margin-top: 10px;
        display: block;
    }
    
    .bb-responsive-container {
        .bb-responsive-group-container {
            background: #fff;
            margin: 0;
            padding: 0;
            font-size: 14px;
            color: #5e5e5e;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            
            .bb-responsive-section {
                position: relative;
                margin-right: 10px;
                white-space: nowrap;
                float: left;
                display: inline-block;
                margin-bottom: 10px;
                
                .bb-list-radio {
                    max-height: 28px;
                    .bbradio-responsive:first-child {
                        label {
                            border-left: 1px solid rgba(0, 0, 0, 0.2);
                        }
                    }
                    input {
                        position: absolute !important;
                        clip: rect(0, 0, 0, 0);
                        height: 1px;
                        width: 1px;
                        border: 0;
                        overflow: hidden;
                    }
                    label {
                        width: 60px;
                        background-color: #e4e4e4;
                        color: rgba(0, 0, 0, 0.6);
                        font-size: 14px;
                        font-weight: normal;
                        text-align: center;
                        text-shadow: none;
                        padding: 3px 14px;
                        border: 1px solid rgba(0, 0, 0, 0.2);
                        border-left: none;
                        display: inline-block;
                        width: auto;
                        height: 20px;
                        float: left;
                        @extend .transition;
                        @for $i from 1 through 9 {
                            .bb-fontweight-#{$i * 100} {
                                font-weight: ($i * 100)!important;
                            }
                        }
                        .bb-text-decoration-none {
                            text-decoration: none!important;
                        }
                        .bb-text-decoration-overline {
                            text-decoration: overline!important;
                        }
                        .bb-text-decoration-underline {
                            text-decoration: underline!important;
                        }
                        .bb-text-decoration-line-through {
                            text-decoration: line-through!important;
                        }
                    }
                    input:checked + label {
                        background-color: #2c3e50;
                        -webkit-box-shadow: none;
                        box-shadow: none;
                        color: #fff;
                    }
                }
                
                .wp-picker-container {
                    display: inline-block;
                    vertical-align: top;
                    > button {
                        margin: 0;
                        height: 28px;
                        .wp-color-result-text {
                            line-height: 27px;
                        }
                    }
                    .bb-tiny-input.bb-color-picker {
                        margin-left: 5px;
                    }
                }
            }
        }
    }

    .bb-field-icon {
        width: auto;
        float: left;
        display: inline-block;
        min-width: 16px;
        padding: 3px 4px;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        text-align: center;
        text-shadow: 0 1px 0 #fff;
        background-color: #eee;
        border: 1px solid #ccc;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
    }
    select.bb-tiny-input {
        height: 28px;
        width: auto!important;
        max-width: none;
    }
    .bb-tiny-input[type=radio] {
        width: auto!important;
        max-width: none;
    }
    .bb-tiny-input[type="text"]:not(.bb-color-picker){
        min-height: 28px;
        border-left: 0;
        margin-bottom: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        margin-left: -4px;
        padding-top: 2px;
        padding-bottom: 5px;
        line-height: 19px;
        display: inline-block;
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
        box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
        background-color: #fff;
        color: #333;
        -webkit-transition: .05s border-color ease-in-out;
        transition: .05s border-color ease-in-out;
        width: 65px;
        text-align: center;
    }
    .bb-normal-input {
        width: 369px!important;
        text-align: left!important;
        padding-left: 10px!important;
    }
    .bb-text-examples {
        margin-top: 10px;
    }
    
    .wpb_vc_param_value {
        display: none;
    }
}