floating panel frame after setting background

[mr.xprt]

hi ,

i have floating panel like that :


Ext.setup({

glossOnIcon: false,
onReady :function(){
var showSectionsPanel=function (){
var showSectionsPanel = new Ext.Panel({
width:265, flex: 1,
height:315,
scroll:'vertical',
centered: true,
bodyPadding:5,
id:'showSectionsPanel',
style : {
position : 'absolute ',
backgroundColor:'white',
},
enterAnimation: 'pop',
exitAnimation: 'pop',
hideOnMaskTap: true,
floating: true,
modal: true,
renderHidden: true,
autoShow : true,
});
var buttonsGroupSP = [
{
xtype:'button',
text: 'btn1',
margin:'5',
}, {
xtype:'button',
text: 'btn2',
margin:'5',
}];
showSectionsPanel.add(buttonsGroupSP);
showSectionsPanel.show( );
showSectionsPanel.doLayout();
}
panel=new Ext.Panel({
fullscreen:true,
items:{
xtype:'button',
text:'pressME',
handler:showSectionsPanel,
}

});

}

});


with style :


#showSectionsPanel .x-panel-body{
background-color: #454546;
}

this appear like that :
https://lh4.googleusercontent.com/_VchlsZcdk48/Tb58HJCBh6I/AAAAAAAAEqs/mvPMCVhWPVQ/s512/senchaQ.png

so u can see a thick white frame around the floating panel ,

how to modify it {delete , make it smaller , ... etc}

thanks alot

[mr.xprt]

i got the solution

it's :

.x-floating.x-panel, .x-floating.x-carousel {
padding:0px !important;
}

but i love it with 2px


thanks