<div class="row">
    <div class="col-12">

        <div class="mail-box-content consult pb-3" style="margin: -15px -15px 15px -15px;">
            <div class="expansion-content pull-right">
                <div class="row">
                    <div class="col-5">
                        <mat-form-field class="full-width">
                            <mat-label>{{'query.filters.startDate' | translate }}</mat-label>
                            <input matInput [ngxMatDatetimePicker]="startPicker" [(ngModel)]="startDateTime" 
                            id="startPickerCIP" (click)="startPicker.open()" onkeyup="this.value=this.value.replace(/.*/gi, '');">
                            <mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
                            <ngx-mat-datetime-picker #startPicker></ngx-mat-datetime-picker>
                        </mat-form-field>
                    </div>
                    <div class="col-4">
                        <mat-form-field class="full-width">
                            <mat-label>{{'query.filters.endDate' | translate }}</mat-label>
                            <input matInput [ngxMatDatetimePicker]="endPicker" [(ngModel)]="endDateTime"
                                (click)="endPicker.open()" onkeyup="this.value=this.value.replace(/.*/gi, '');">
                            <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
                            <ngx-mat-datetime-picker #endPicker></ngx-mat-datetime-picker>
                        </mat-form-field>
                    </div>
                    <div class="col-3">
                        <button class="btn btn-primary btn-sm ng-star-inserted" style="margin-left: 10px;
                        margin-top: 10px !important;"
                            type="button" [disabled]="!startDateTime || !endDateTime" (click)="search()">
                            <i class="fa fa-search"></i><span class="btn-label">Buscar</span>
                        </button>
                    </div>
                </div>


            </div>

            <div class="pull-left icon" *ngIf="icon">
                <div [innerHTML]="icon"></div>
            </div>
            <h3 class="grid-title">
                <span>{{ header | translate }}</span>
            </h3>
            <span *ngIf="headerDesc" class="small">{{ headerDesc | translate }}</span>
        </div>
    </div>
</div>
<router-outlet></router-outlet>