Как установить разные стили для вкладок во вложенном UIB-аккордеоне?

Question

Есть ли способ установить разные стили (цвет текста, шрифт, цвет фона, высоту и т. Д. c) для всех вкладок вложенного пользовательского интерфейса. bootstrap .accordion. Я использую аккордеон для отображения табличных данных, которые могут быть расширены до 2-х уровней, поэтому у меня есть что-то вроде:

<uib-accordion style ="border-color: #707070; border-radius: 9px 9px 9px 9px;" >
            <uib-accordion-group  id="main-heading"  is-open="vm.oneAtATimeOuter">             
                <uib-accordion-heading >
                    <div class="col-md-5 col-sm-10" style="pointer-events: none;"><b>My Heading</b></div>

                    <div class="pull-right" ng-show="vm.oneAtATimeOuter"><a href="">Close All</a></div>
                    <div class="pull-right" ng-show="!vm.oneAtATimeOuter"><a href="">Expand</a></div>
                </uib-accordion-heading>      
                <uib-accordion  close-others="true"  is-open="status.openinner" >                  
                    <div  ng-repeat="submenu in vm.item.listChilds" ng-include="'smenuTree'"></div>                   
                </uib-accordion>
            </uib-accordion-group>

        </uib-accordion>
        <script type="text/ng-template" id="smenuTree">
                <uib-accordion-group id="my-accordion-title" style ="border-color: #707070; border-radius: 0px 0px 0px 0px;"   close-others="true" is-open="isopen" >
                    <div ng-class="item.tabs" >
                    <uib-accordion-heading >
                        <div class="col-md-5 col-sm-10" style="pointer-events: none">{{submenu.label}}</div>

                        <div ng-click="vm.fetchInnerDataForSelectedVal(submenu.label)"><a href="{{menu.href}}"><i class="pull-right" ng-class="{'fa fa-plus': !isopen, 'fa fa-minus': isopen}"></i></a></div>
                    </uib-accordion-heading>
                    </div>
                    <uib-accordion >
                        <div class="status-left-cascade" ng-show="submenu.listChilds" ng-repeat="item in submenu.listChilds">
                          <div class ="job-subheading" ng-show="{{$index == 0 }}"><span style=" padding-left: 15px;"><b>Job Status</b></span></div>
                            <uib-accordion-group  id="my-accordion-title-innertabs" ng-click="vm.selectDetails(submenu.label,item.label)" style ="border-color: #707070; border-radius: 0px 0px 0px 0px;" close-others="true" is-open="false">
                               <div >
                                <uib-accordion-heading  >
                                    <div class="col-md-5 col-sm-10">{{item.label}}</div>
                                    <div class="col-md-2 col-sm-4">{{item.count}}</div>
                                </uib-accordion-heading >
                               </div>
                            </div>
                        </div>
                    </uib-accordion >  

                </uib-accordion-group>

        </script>

, и вот мой файл css:

.ui-accordion .ui-accordion-content{
    border-top: 0 none;
    border-spacing: 0;
    margin-bottom: 0 !important;
    margin-top: -2px;
    overflow: auto;
    padding-bottom: 0 px !important ;
    position: relative;
    top: 1px;
    font-family: Helvetica Neue !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 20px !important;
}
.panel-body {
    padding: 0px !important;
    padding-bottom: 0px !important;
    /*    font-family: Helvetica Neue !important;
        font-style: normal !important;
        font-weight: 500 !important;
        font-size: 20px !important;*/
    border-color: #707070; 
}

.panel-group {
    margin-bottom: 0px !important ;
}
.panel-group .panel-heading {
    border-bottom: 1px;
}

.panel-default > .panel-heading {
    padding: 10px 15px;
    padding-top: 14px !important;
    padding-right: 15px;
    padding-bottom: 21px !important;
    padding-left: 33px !important;
    /*font-family: Helvetica Neue !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 20px !important;*/
    border-color: #707070; 
    border-radius: 0px 0px 0px 0px;
    background-image: none !important;
    background-color: #F0F0F0 !important;
    color: #707070 !important;

}



#my-accordion-title .panel-heading {
    background-image: none !important;
    background-color: #FFFFFF !important;
    padding-top:-34px !important;
    padding-bottom:-44px !important;
}
#my-accordion-title-innertabs .panel-heading {
    background-image: none !important;
    background-color:  #F0F0F0 !important;
    margin-bottom:-44px;*/
    padding-top:-34px !important;
    padding-bottom:-44px !important;
}
#main-heading .panel-heading {
    background: #F5F5F5;
    border-color: #707070; 
    border-radius: 9px 9px 0px 0px;
    padding-top: 34px !important;
    padding-bottom: 44px !important; 
}

.status-left-cascade {
    position: relative;
    padding-left: 58.5px !important;
}

.job-subheading {
    background: #676767;
    color:#ffffff;
}

.submit_btn {
    background: #FFFFFF;
    border-color: #707070 !important;
} 
.highlight {
    background-image: none !important;
    background-color:  cyan !important;
}

Теперь я хочу установить свойства -

padding-top: 34px !important;
padding-bottom: 44px !important;

для самой внешней вкладки аккордеона с заголовком. Я попытался добавить класс (с отступом) в внешняя див-гармошка, но это не повлияло. После добавления id = 'main-heading' и выбора класса CSS по id в файле CSS, а затем добавления к нему свойств заполнения, кажется, работает для вкладки заголовка, но также применяется ко всей панели аккордеона. заголовки внутри. Поскольку я в значительной степени новичок в HTML и CSS, поэтому любая помощь будет весьма ощутимой.