<div class="{{roundedgeclass}}">
<div for="boxText" id="{{componentId}}" class="box-content {{themeCss}}"  *ngIf="close" [style.height]="height ? height:'none'" [style.width]="width ? width:'none'" [style.align]="align ? align:'none'" [ngClass]="{
'box-default': borderColor=='default' || borderColor ==null,
'border-topbar': border=='top',
'border-bottombar': border =='bottom',
'border-rightbar': border =='right',
'border-leftbar': border =='left',
'border-all' : border =='all',
'border-top-bottom' : border =='top-bottom' || border =='bottom-top',
'border-right-left' : border =='right-left' || border =='left-right',

'bg-brown': bgColor=='brown', 
'bg-red': bgColor=='red',
'bg-green': bgColor=='green',
'bg-yellow': bgColor=='yellow',
'bg-blue': bgColor=='blue',
'bg-purple': bgColor=='purple',
'bg-theme-color' : bgColor =='theme-color',
'bg-black' : bgColor == 'black',
'box-transparent' : bgColor =='transparent',

'border-theme-color' : borderColor =='theme-color',
'border-red' : borderColor =='red',
'border-yellow' : borderColor =='yellow',
'border-green' : borderColor =='green',
'border-blue' : borderColor =='blue',
'border-brown' : borderColor =='brown',
'border-purple' : borderColor =='purple',
'border-transparent' : borderColor =='transparent',
'padding' : padding,
'border-dotted' : borderDotted
 }">
    <span *ngIf="closable" class="box-close">
 <amexio-c-icon key="tab_close" (onClick)="closeBox($event)"></amexio-c-icon>
 </span>
    <span role="tooltip" tabindex="0" id="boxText" name="boxText" attr.aria-labelledby="{{componentId}}">
  <ng-content ></ng-content>
</span>
</div>
</div>