diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
index f60c82d..4964950 100644
--- a/src/app/pages/pages.module.ts
+++ b/src/app/pages/pages.module.ts
@@ -43,7 +43,7 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
 import { PlanAdminComponent } from './plan-admin/plan-admin.component';
 import { GetOutOfLineDetailsComponent } from './today-warning/get-out-of-line-details/get-out-of-line-details.component';
 import { WarningDetailsComponent } from './today-warning-admin/warning-details/warning-details.component';
-
+import { NzTableModule } from 'ng-zorro-antd/table';
 
 
 @NgModule({
@@ -81,7 +81,8 @@ import { WarningDetailsComponent } from './today-warning-admin/warning-details/w
     NzTreeModule,
     NzTreeSelectModule,
     NzCollapseModule,
-    NzStepsModule
+    NzStepsModule,
+    NzTableModule 
   ],
   entryComponents: [AddequipmentComponent, EditequipmentComponent,GetOutOfLineDetailsComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
diff --git a/src/app/pages/plan-admin/plan-admin.component.html b/src/app/pages/plan-admin/plan-admin.component.html
index c5ce805..3965769 100644
--- a/src/app/pages/plan-admin/plan-admin.component.html
+++ b/src/app/pages/plan-admin/plan-admin.component.html
@@ -7,7 +7,7 @@
         <div class="or">
             <nz-tree [nzExpandedKeys]="nzExpandedKeys" [nzShowExpand]="false" #nzTreeComponent
                 [nzExpandAll]="nzExpandAll" nzBlockNode [nzData]="nodes" (nzClick)="activeNode($event)"
-                [nzTreeTemplate]="nzTreeTemplate"[nzMultiple]="false"></nz-tree>
+                [nzTreeTemplate]="nzTreeTemplate" [nzMultiple]="false"></nz-tree>
             <ng-template #nzTreeTemplate let-node let-origin="origin">
                 <ng-container *ngIf="node.origin.parentId == null; else elseTemplate">
                     <img style="vertical-align: bottom;" src="../../../assets/images/flower.png" alt="">
@@ -36,23 +36,6 @@
                         </nz-input-group>
                     </nz-form-control>
                 </nz-form-item>
-
-                <!-- <nz-form-item class="searchParams">
-                    <nz-form-control>
-                        <nz-input-group>
-                            <input required nz-input type="text" formControlName="linkman" placeholder="请输入联系人" />
-                        </nz-input-group>
-                    </nz-form-control>
-                </nz-form-item>
-
-                <nz-form-item class="searchParams">
-                    <nz-form-control>
-                        <nz-input-group>
-                            <input required nz-input type="text" formControlName="phone" placeholder="请输入电话" />
-                        </nz-input-group>
-                    </nz-form-control>
-                </nz-form-item> -->
-
                 <nz-form-item class="btn">
                     <nz-form-control>
                         <button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
@@ -68,56 +51,42 @@
             </form>
         </div>
         <div class="tablebox">
-            <div class="table">
-                <div nz-row class="th">
-                    <div nz-col nzSpan="1" style="text-align: right;box-sizing: border-box;padding-right: 20px;">
 
-                    </div>
-                    <div nz-col nzSpan="6">
-                        加油站名称
-                    </div>
-                    <div nz-col nzSpan="4">
-                        区域
-                    </div>
-                    <div nz-col nzSpan="4">
-                        所属公司
-                    </div>
-                    <div nz-col nzSpan="3">
-                        联系人
-                    </div>
-                    <div nz-col nzSpan="4">
-                        联系电话
-                    </div>
-                    <div nz-col nzSpan="2">
-                        操作
-                    </div>
-                </div>
-                <div class="tbody">
-                    <div nz-row class="tr" *ngFor="let item of list">
-                        <div nz-col nzSpan="1" style="text-align: right;box-sizing: border-box;padding-right: 20px;">
-                            <!-- <span class="ziying">自营</span> -->
-                        </div>
-                        <div nz-col nzSpan="6">
-                            中化山东省淄博市第6加油站
-                        </div>
-                        <div nz-col nzSpan="4">
-                            山东-淄博
-                        </div>
-                        <div nz-col nzSpan="4">
-                            中化某某公司
-                        </div>
-                        <div nz-col nzSpan="3">
-                            张三三
-                        </div>
-                        <div nz-col nzSpan="4">
-                            0566-5897888
-                        </div>
-                        <div nz-col nzSpan="2">
-                            <span class="look" (click)="look()">查看</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
+            <nz-table #basicTable [nzData]="list" [nzShowPagination]="false">
+                <thead>
+                    <tr>
+                        <th>加油站名称</th>
+                        <th>区域</th>
+                        <th>所属公司</th>
+                        <th>联系人</th>
+                        <th>联系电话</th>
+                        <th>油站等级</th>
+                        <th>经营品类</th>
+                        <th>油机数量</th>
+                        <th>车道数量</th>
+                        <th>油罐容积</th>
+                        <th>操作</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let data of basicTable.data">
+                        <th>加油站名称</th>
+                        <th>区域</th>
+                        <th>所属公司</th>
+                        <th>联系人</th>
+                        <th>联系电话</th>
+                        <th>油站等级</th>
+                        <th>经营品类</th>
+                        <th>油机数量</th>
+                        <th>车道数量</th>
+                        <th>油罐容积</th>
+                        <th (click)="look()">查看</th>
+                    </tr>
+                </tbody>
+            </nz-table>
+
+
+
             <div class="pagination">
                 <nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate"
                     nzShowQuickJumper></nz-pagination>
diff --git a/src/app/pages/plan-admin/plan-admin.component.scss b/src/app/pages/plan-admin/plan-admin.component.scss
index 8d23276..2b58047 100644
--- a/src/app/pages/plan-admin/plan-admin.component.scss
+++ b/src/app/pages/plan-admin/plan-admin.component.scss
@@ -81,47 +81,7 @@
     align-items: center;
     overflow: hidden;
 
-    .table {
-      color: white;
-      flex: 1;
-      width: 96%;
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-
-      .th {
-        height: 40px;
-        line-height: 40px;
-        background: rgba(35, 153, 255, 0.2);
-        border: 1px solid rgba(35, 217, 255, 0.4);
-        box-shadow: 0 0 3px 0 rgba(35, 217, 255, 0.4) inset;
-        color: #23D9FF;
-      }
-
-      .tbody {
-        flex: 1;
-        overflow-y: auto;
-
-        .tr {
-          height: 40px;
-          line-height: 40px;
-          border-bottom: 1px solid #0d3761;
-
-          div {
-            color: #91CCFF;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-
-            .look {
-              color: #36A2FF;
-              cursor: pointer;
-            }
-          }
-
-        }
-      }
-    }
+   
 
     .pagination {
       margin-top: 26px;
diff --git a/src/app/pages/today-warning-admin/today-warning-admin.component.html b/src/app/pages/today-warning-admin/today-warning-admin.component.html
index 117dfd3..27a0dfc 100644
--- a/src/app/pages/today-warning-admin/today-warning-admin.component.html
+++ b/src/app/pages/today-warning-admin/today-warning-admin.component.html
@@ -101,19 +101,27 @@
       <div nz-col nzSpan="3">
         <span *ngIf="item.violation.violationType == '卸油作业检查'">
           <img src="../../../assets/images/warning2.png">
-          Ⅰ级
         </span>
         <span
           *ngIf="item.violation.violationType != '卸油作业检查' && item.violation.violationType != '证件临期' && item.violation.violationType != '器材临期' ">
           <img src=" ../../../assets/images/warning1.png">
-          Ⅱ级
         </span>
         <span *ngIf="item.violation.violationType === '证件临期'">
           <img src="../../../assets/images/warning3.png">
-          Ⅲ级
         </span>
         <span *ngIf="item.violation.violationType === '器材临期'">
           <img src="../../../assets/images/warning3.png">
+        </span>
+        <span *ngIf="item.violation.level == 1">
+          Ⅰ级
+        </span>
+        <span *ngIf="item.violation.level == 2">
+          Ⅱ级
+        </span>
+        <span *ngIf="item.violation.level == 3">
+          Ⅲ级
+        </span>
+        <span *ngIf="item.violation.level == 4">
           Ⅳ级
         </span>
       </div>
diff --git a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
index 7b55b3b..b93caea 100644
--- a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
+++ b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
@@ -60,6 +60,7 @@
   box-sizing: border-box;
   padding: 18px;
   overflow: hidden;
+
   .imgbox {
     display: flex;
     width: 100%;
@@ -180,7 +181,7 @@
           img {
             width: 158px;
             height: 158px;
-            border: 1px solid rgba(0,0,0,0);
+            border: 1px solid rgba(0, 0, 0, 0);
             cursor: pointer;
           }
 
diff --git a/src/app/pages/today-warning/today-warning.component.html b/src/app/pages/today-warning/today-warning.component.html
index cc6ecf4..e2959f9 100644
--- a/src/app/pages/today-warning/today-warning.component.html
+++ b/src/app/pages/today-warning/today-warning.component.html
@@ -17,28 +17,28 @@
 
       <nz-form-item class="searchParams">
         <nz-form-control>
-          <nz-select id="type" formControlName="type" nzPlaceHolder="请选择预警类型">
-            <nz-option *ngFor="let item of yujingTypes" [nzValue]="item.id" [nzLabel]="item.violationName"></nz-option>
+          <nz-select id="type" (ngModelChange)="typeChange($event)" formControlName="type" nzPlaceHolder="请选择预警类型">
+            <nz-option *ngFor="let item of warningTypes" [nzValue]="item.key" [nzLabel]="item.key"></nz-option>
           </nz-select>
         </nz-form-control>
       </nz-form-item>
 
       <nz-form-item class="searchParams">
         <nz-form-control>
-          <nz-select id="site" formControlName="site" nzPlaceHolder="请选择区域">
-            <nz-option nzValue="0" nzLabel="出入口"></nz-option>
-            <nz-option nzValue="1" nzLabel="加油区"></nz-option>
-            <nz-option nzValue="2" nzLabel="油罐区"></nz-option>
-            <nz-option nzValue="3" nzLabel="便利店"></nz-option>
-            <nz-option nzValue="4" nzLabel="办公区"></nz-option>
-            <nz-option nzValue="5" nzLabel="其他区域"></nz-option>
+          <nz-select formControlName="area" nzPlaceHolder="请选择区域">
+            <nz-option nzValue="出入口" nzLabel="出入口"></nz-option>
+            <nz-option nzValue="加油区" nzLabel="加油区"></nz-option>
+            <nz-option nzValue="油罐区" nzLabel="油罐区"></nz-option>
+            <nz-option nzValue="便利店" nzLabel="便利店"></nz-option>
+            <nz-option nzValue="办公区" nzLabel="办公区"></nz-option>
+            <nz-option nzValue="其他区域" nzLabel="其他区域"></nz-option>
           </nz-select>
         </nz-form-control>
       </nz-form-item>
 
       <nz-form-item class="searchParams">
         <nz-form-control>
-          <nz-date-picker id="datePicker" formControlName="datePicker" nzPlaceHolder="请选择时间"></nz-date-picker>
+          <nz-range-picker formControlName="datePicker"></nz-range-picker>
         </nz-form-control>
       </nz-form-item>
 
@@ -61,33 +61,46 @@
   <div class="listbox">
     <div nz-row class="listitem" *ngFor="let item of list">
       <div nz-col nzSpan="3">
-        <span *ngIf="item.level === 1" style="color: #FF4B65;">
-          <img src="../../../assets/images/level1.png">
-          Ⅰ级违法事件
+        <span *ngIf="item.violation.violationType == '卸油作业检查'">
+          <img src="../../../assets/images/warning2.png">
         </span>
-        <span *ngIf="item.level === 2" style="color: #FFBD4B;">
-          <img src="../../../assets/images/level2.png">
-          Ⅱ级违法事件
+        <span
+          *ngIf="item.violation.violationType != '卸油作业检查' && item.violation.violationType != '证件临期' && item.violation.violationType != '器材临期' ">
+          <img src=" ../../../assets/images/warning1.png">
         </span>
-        <span *ngIf="item.level === 3" style="color: #23D9FF;">
-          <img src="../../../assets/images/level3.png">
-          Ⅲ级违法事件
+        <span *ngIf="item.violation.violationType === '证件临期'">
+          <img src="../../../assets/images/warning3.png">
+        </span>
+        <span *ngIf="item.violation.violationType === '器材临期'">
+          <img src="../../../assets/images/warning3.png">
+        </span>
+        <span *ngIf="item.violation.level == 1">
+          Ⅰ级
+        </span>
+        <span *ngIf="item.violation.level == 2">
+          Ⅱ级
+        </span>
+        <span *ngIf="item.violation.level == 3">
+          Ⅲ级
+        </span>
+        <span *ngIf="item.violation.level == 4">
+          Ⅳ级
         </span>
       </div>
       <div nz-col nzSpan="4">
-        预警类型: {{item.type}}
+        事件类型: {{item.violation.violationType}}
       </div>
       <div nz-col nzSpan="5">
-        预警信息: {{item.content}}
+        事件信息: {{item.violation.violationName}}
       </div>
       <div nz-col nzSpan="5">
-        摄像头: {{item.site}}
+        区域: {{item.violateArea}}
       </div>
       <div nz-col nzSpan="5">
-        预警时间: {{item.time}}
+        {{item.violateTime | date:"yyyy-MM-dd HH:mm:ss"}}
       </div>
       <div nz-col nzSpan="2">
-        <button nz-button (click)="showModal()">查看</button>
+        <button nz-button (click)="look(item)">查看</button>
         <!-- <img style="margin-left: 24px;cursor: pointer;" src="../../../assets/images/excel.png" alt=""> -->
       </div>
     </div>
diff --git a/src/app/pages/today-warning/today-warning.component.scss b/src/app/pages/today-warning/today-warning.component.scss
index f1e6667..412dff8 100644
--- a/src/app/pages/today-warning/today-warning.component.scss
+++ b/src/app/pages/today-warning/today-warning.component.scss
@@ -43,10 +43,14 @@
         width: 100%;
       }
 
+      nz-range-picker {
+        background-color: rgba(0, 0, 0, 0);
+        width: 100%;
+      }
     }
   }
 
-  
+
 
   .listbox {
     flex: 1;
@@ -81,4 +85,3 @@
 
   }
 }
-
diff --git a/src/app/pages/today-warning/today-warning.component.ts b/src/app/pages/today-warning/today-warning.component.ts
index 5ca8c93..9dd0a96 100644
--- a/src/app/pages/today-warning/today-warning.component.ts
+++ b/src/app/pages/today-warning/today-warning.component.ts
@@ -4,6 +4,8 @@ import { HttpClient } from '@angular/common/http';
 import { NzModalService } from 'ng-zorro-antd/modal';
 import { GetOutOfLineDetailsComponent } from './get-out-of-line-details/get-out-of-line-details.component';
 import { TreeService } from 'src/app/service/tree.service';
+import { NavChangeService } from 'src/app/service/navChange.service';
+import * as moment from 'moment';
 @Component({
   selector: 'app-today-warning',
   templateUrl: './today-warning.component.html',
@@ -11,36 +13,81 @@ import { TreeService } from 'src/app/service/tree.service';
 })
 export class TodayWarningComponent implements OnInit {
   validateForm!: FormGroup;
-  constructor(private http: HttpClient, private fb: FormBuilder, private toTree: TreeService, private modal: NzModalService, private viewContainerRef: ViewContainerRef) { }
+  constructor(private http: HttpClient, private fb: FormBuilder, private toTree: TreeService, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private navChangeService: NavChangeService) { }
 
   ngOnInit(): void {
     this.validateForm = this.fb.group({
       level: [null],
       type: [null],
-      site: [null],
+      area: [null],
       datePicker: [null]
     });
-    this.yujingType()
-    //this.getAllOrganization()
+    this.warningType()
+    this.getEarlyWarningList()
   }
 
   //预警类型接口
-  yujingTypes: any //预警接口数据
-  yujingType() {
+  warningTypes: any //预警接口数据
+  warningTypesDetails: any
+  warningType() {
     this.http.get('/api/services/app/Violation/GetAllList').subscribe((data: any) => {
-      this.yujingTypes = data.result
-    }
-    )
+      this.warningTypesDetails = data.result
+      this.warningTypes = (data.result as any).groupBy((t) => { return t.violationType });
+    })
+  }
+
+  typeChange(e) {
+    this.warningTypes.forEach(element => {
+      if (element.key == e) {
+        this.warningTypesDetails = element
+      }
+    });
   }
 
+  //获得预警列表    
+  list: any = [
+  ]
+  totalCount: string //预警总数    
+  getEarlyWarningList() {
+    let ViolationIds = []
+    if(this.validateForm.value.type){
+      this.warningTypesDetails.forEach(item => {
+        item.id ? ViolationIds.push(item.id) : null
+      });
+    }
+    let params = {
+      Level: this.validateForm.value.level,
+      ViolationIds: ViolationIds,
+      ViolateArea: this.validateForm.value.area,
+      organizationUnitId: JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id  ,
+      ViolateTime: this.validateForm.value.datePicker ? [moment(this.validateForm.value.datePicker[0]).format('YYYY-MM-DD'), moment(this.validateForm.value.datePicker[1]).format('YYYY-MM-DD')] : null,
+      SkipCount: '0',
+      MaxResultCount: '9999'
+    }
+    this.http.get('/api/services/app/ViolateRecord/GetAll', {
+      params: params
+    }).subscribe((data: any) => {
+      this.list = data.result.items
+      this.totalCount = data.result.totalCount
+      console.log('预警列表', this.list)
+
+      let obj = {
+        name: '改变数量',
+        num: this.totalCount
+      }
+      setTimeout(() => {
+        this.navChangeService.sendMessage(obj);//发布一条消息
+      }, 0);
+
+    })
+  }
 
   submitForm(): void {
     for (const i in this.validateForm.controls) {
       this.validateForm.controls[i].markAsDirty();
       this.validateForm.controls[i].updateValueAndValidity();
     }
-
-    console.log(this.validateForm)
+    this.getEarlyWarningList()
   }
   resetForm(e: MouseEvent): void {
     e.preventDefault();
@@ -49,29 +96,12 @@ export class TodayWarningComponent implements OnInit {
       this.validateForm.controls[key].markAsPristine();
       this.validateForm.controls[key].updateValueAndValidity();
     }
+    this.getEarlyWarningList()
   }
 
-  list: any = [
-    { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
-    { level: 2, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
-    { level: 3, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
-    { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
-    { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
-    { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
-    { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
-    { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
-    { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
-    { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
-    { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' },
-    { level: 1, type: '加油区预警', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12  09:28:13' }
-  ]
-
-
-
 
 
-
-  showModal(): void {
+  look(item) {
     const modal = this.modal.create({
       nzContent: GetOutOfLineDetailsComponent,
       nzViewContainerRef: this.viewContainerRef,
@@ -84,9 +114,7 @@ export class TodayWarningComponent implements OnInit {
         'background': '#000D21',
       },
       nzComponentParams: {
-        data: {
-          type: 1
-        }
+        data: item
       },
       nzFooter: null,
       nzOnOk: async () => {
@@ -95,5 +123,4 @@ export class TodayWarningComponent implements OnInit {
     });
     const instance = modal.getContentComponent();
   }
-
 }
diff --git a/src/theme.less b/src/theme.less
index ed42a31..a61fb85 100644
--- a/src/theme.less
+++ b/src/theme.less
@@ -159,11 +159,15 @@
     background: rgba(145, 204, 255, 0.15);
   }
 }
-#hostbox{
-  .ant-table-thead > tr > th,.ant-table-tbody > tr > td{
+
+#hostbox {
+
+  .ant-table-thead>tr>th,
+  .ant-table-tbody>tr>td {
     text-align: center;
   }
 }
+
 @select-background: transparent;
 @border-color-base: #91CCFF;
 
@@ -274,25 +278,76 @@
 
 
 #stationPlanBox {
-  .ant-tree .ant-tree-node-content-wrapper:hover ,.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{
+
+  .ant-tree .ant-tree-node-content-wrapper:hover,
+  .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
     background: linear-gradient(90deg, rgba(0, 13, 33, 0) 0%, #2399FF 50%, rgba(0, 13, 33, 0) 100%);
   }
-  .ant-tree .ant-tree-node-content-wrapper{
+
+  .ant-tree .ant-tree-node-content-wrapper {
     padding: 2px 20px;
     // margin-left: 30px;
   }
-  nz-tree{
-    nz-tree-node{
+
+  nz-tree {
+    nz-tree-node {
       margin-left: 20px;
     }
-    nz-tree-node:nth-child(1){
+
+    nz-tree-node:nth-child(1) {
       margin-left: 0px;
     }
   }
-  
+  .ant-table table{
+    border-collapse: collapse;
+  }
+  nz-table {
+    flex: 1;
+    width: 96%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: none;
+
+    .ant-table {
+      background: none;
+    }
+
+    thead {
+      tr {
+        height: 40px;
+        line-height: 40px;
+        background: rgba(35, 153, 255, 0.2);
+        border: 1px solid rgba(35, 217, 255, 0.4);
+        box-shadow: 0 0 3px 0 rgba(35, 217, 255, 0.4) inset;
+        th {
+          text-align: left;
+          padding: 0;
+          background: none;
+
+          color: #23D9FF;
+        }
+      }
+    }
+
+    tbody {
+      flex: 1;
+      overflow-y: auto;
+      tr {
+        height: 40px;
+        line-height: 40px;
+        border-bottom: 1px solid #0d3761;
+        color: #91CCFF;
+        .look {
+          color: #36A2FF;
+          cursor: pointer;
+        }
+      }
+    }
+  }
 }
 
 
-.ant-modal-close-x{
+.ant-modal-close-x {
   color: #fff;
-}
\ No newline at end of file
+}