diff --git a/src/app/components/auth/email-verified/email-verified.component.html b/src/app/components/auth/email-verified/email-verified.component.html
index 4091dcf..c0a067c 100644
--- a/src/app/components/auth/email-verified/email-verified.component.html
+++ b/src/app/components/auth/email-verified/email-verified.component.html
@@ -8,7 +8,7 @@
         </div>
         <div class="forbidden-btn w-100 d-flex justify-content-around align-items-center ">
             <button class="btn btn-primary return-btn" [routerLink]="['/auth', 'login']">Đăng nhập cửa hàng</button>
-            <a href="https://foodify-fpt.vercel.app/home/login"><button class="btn btn-info return-btn">Đăng nhập
+            <a href="https://foodify-fpt.vercel.app/home/login" class="d-flex justify-content-center align-items-center"><button class="btn btn-info return-btn">Đăng nhập
                     người dùng</button></a>
         </div>
     </div>
diff --git a/src/app/components/auth/email-verified/email-verified.component.scss b/src/app/components/auth/email-verified/email-verified.component.scss
index 5e95d04..593cf21 100644
--- a/src/app/components/auth/email-verified/email-verified.component.scss
+++ b/src/app/components/auth/email-verified/email-verified.component.scss
@@ -55,6 +55,20 @@
       .forbidden-text {
         text-align: center;
       }
+
+      .forbidden-btn {
+        display: flex;
+        flex-direction: column;
+
+        .btn {
+          padding: 10px 12px;
+        }
+
+        .return-btn {
+          margin-bottom: 10px;
+          width: 230px;
+        }
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/src/app/components/auth/login/login.component.html b/src/app/components/auth/login/login.component.html
index f82fad1..da79c70 100644
--- a/src/app/components/auth/login/login.component.html
+++ b/src/app/components/auth/login/login.component.html
@@ -133,7 +133,7 @@
                 </div>
                 <div class="col-md-7 p-0 card-right">
                     <div class="card tab2-card">
-                        <div style="padding: 46px;" class="card-body">
+                        <div style="padding: 29px;" class="card-body">
                             <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
                                 <li [ngbNavItem]="1">
                                     <h3 style="color: lightcoral" ngbNavLink>Đăng nhập</h3>
@@ -187,6 +187,10 @@
                                                     <a class="ml-2" [routerLink]="['/auth', 'signup']">Đăng ký ngay</a>
                                                 </div>
 
+                                                <div class="d-flex justify-content-center align-items-center mt-2">
+                                                    <a class="link-shipper" href="">Tải ứng dụng <span class="font-weight-bold">Shipper</span> tại đây</a>
+                                                </div>
+
                                             </form>
                                         </div>
                                     </ng-template>
diff --git a/src/app/components/auth/login/login.component.scss b/src/app/components/auth/login/login.component.scss
index ebe6719..3021644 100644
--- a/src/app/components/auth/login/login.component.scss
+++ b/src/app/components/auth/login/login.component.scss
@@ -35,5 +35,12 @@
           color: #999a9b;
         }
       }
+
+    .link-shipper {
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
 }
 
diff --git a/src/app/components/auth/signup/signup.component.scss b/src/app/components/auth/signup/signup.component.scss
index 1d09053..31b53bb 100644
--- a/src/app/components/auth/signup/signup.component.scss
+++ b/src/app/components/auth/signup/signup.component.scss
@@ -9,7 +9,7 @@
 }
 
 .change-height {
-  height: 100vh;
+  height: 100%;
 }
 
 
diff --git a/src/app/components/products/physical/category-detail/category-detail.component.html b/src/app/components/products/physical/category-detail/category-detail.component.html
index 0356564..f32d572 100644
--- a/src/app/components/products/physical/category-detail/category-detail.component.html
+++ b/src/app/components/products/physical/category-detail/category-detail.component.html
@@ -26,7 +26,7 @@
                                                 style="width: 20px">
                                         </td>
                                         <td>{{ product.name }}</td>
-                                        <td>{{ product.cost - product.cost * product.discountPercent / 100 }}</td>
+                                        <td>{{ product.cost - product.cost * product.discountPercent / 100 | currency : "VND" }}</td>
                                         <td>
                                             <a [routerLink]="['/products','product-detail', product.id]"><i
                                                     class="fa fa-eye"></i></a>
diff --git a/src/app/components/products/physical/category-detail/category-detail.component.scss b/src/app/components/products/physical/category-detail/category-detail.component.scss
index e69de29..0541f1a 100644
--- a/src/app/components/products/physical/category-detail/category-detail.component.scss
+++ b/src/app/components/products/physical/category-detail/category-detail.component.scss
@@ -0,0 +1,3 @@
+th, td {
+    text-align: center;
+}
\ No newline at end of file
diff --git a/src/app/components/products/physical/category/category.component.html b/src/app/components/products/physical/category/category.component.html
index da6a282..eed6dd1 100644
--- a/src/app/components/products/physical/category/category.component.html
+++ b/src/app/components/products/physical/category/category.component.html
@@ -60,7 +60,7 @@
 <ng-template #productCategoryTemplate>
     <form [formGroup]="categoryForm">
         <div class="modal-header">
-            <h5 class="modal-title f-w-600" id="exampleModalLabel">Edit Product Category</h5>
+            <h5 class="modal-title f-w-600" id="exampleModalLabel">Chỉnh sửa thể loại sản phẩm</h5>
             <button type="button" class="close" aria-label="Close" (click)="decline()">
                 <span aria-hidden="true">&times;</span>
             </button>
diff --git a/src/app/components/products/physical/edit-product/edit-product.component.html b/src/app/components/products/physical/edit-product/edit-product.component.html
index a1cb437..6e75704 100644
--- a/src/app/components/products/physical/edit-product/edit-product.component.html
+++ b/src/app/components/products/physical/edit-product/edit-product.component.html
@@ -340,18 +340,24 @@
 <ng-template #addImg>
     <div class="modal-body text-center">
         <h5 class="text-dark font-weight-bold mb-4">Thêm ảnh</h5>
-        <input class="input-image mb-4" type="file" accept="image/*" (change)="onFileSelected($event)" />
-        <button type="button" class="btn btn-primary" (click)="uploadNewImage(imageSuccess)">Tiếp tục
-        </button>
+        <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileSelected($event)" />
+        <label class="btn btn-warning mb-4 font-weight-normal" for="file">Chọn ảnh</label>
+        <div>
+            <button type="button" class="btn btn-primary" (click)="uploadNewImage(imageSuccess)">Tiếp tục
+            </button>
+        </div>
     </div>
 </ng-template>
 
 <ng-template #updateImg>
     <div class="modal-body text-center">
         <h5 class="text-dark font-weight-bold mb-4">Chỉnh sửa ảnh</h5>
-        <input class="input-image mb-4" type="file" accept="image/*" (change)="onFileSelected($event)" />
-        <button type="button" class="btn btn-primary" (click)="updateImage(imageSuccess)">Tiếp tục
-        </button>
+        <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileSelected($event)" />
+        <label class="btn btn-warning mb-4 font-weight-normal" for="file">Chọn ảnh</label>
+        <div>
+            <button type="button" class="btn btn-primary" (click)="updateImage(imageSuccess)">Tiếp tục
+            </button>
+        </div>
     </div>
 </ng-template>
 
diff --git a/src/app/components/products/physical/edit-product/edit-product.component.scss b/src/app/components/products/physical/edit-product/edit-product.component.scss
index 746e6b6..668be3d 100644
--- a/src/app/components/products/physical/edit-product/edit-product.component.scss
+++ b/src/app/components/products/physical/edit-product/edit-product.component.scss
@@ -1,3 +1,23 @@
 .shadow-box {
     box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
-}
\ No newline at end of file
+}
+
+.input-image {
+    /* visibility: hidden etc. wont work */
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+  
+  .input-image:focus + label {
+    /* keyboard navigation */
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+  
+  .input-image + label * {
+    pointer-events: none;
+  }
\ No newline at end of file
diff --git a/src/app/components/sales/orders/orders.component.html b/src/app/components/sales/orders/orders.component.html
index facec87..f861475 100644
--- a/src/app/components/sales/orders/orders.component.html
+++ b/src/app/components/sales/orders/orders.component.html
@@ -141,14 +141,14 @@
     <h5 class="modal-confirm-text">Cập nhật đơn hàng</h5>
 
     <div class="modal-select-option" *ngIf="!isHaveShipper">
-      <select [(ngModel)]="shipper">
+      <select class="width-select" [(ngModel)]="shipper">
         <option [selected]="true" [ngValue]="undefined">Chọn shipper</option>
         <option *ngFor="let shipper of shippers" [ngValue]="shipper">{{ shipper.user.fullName }}</option>
       </select>
     </div>
 
     <div class="modal-select-option">
-      <select [(ngModel)]="selectedStatus">
+      <select class="width-select" [(ngModel)]="selectedStatus">
         <option value="AWAITING">Chờ xác nhận</option>
         <option value="CONFIRMED">Đã xác nhận</option>
         <option value="SHIPPING">Đang giao hàng</option>
diff --git a/src/app/components/sales/orders/orders.component.scss b/src/app/components/sales/orders/orders.component.scss
index f401908..dd2ef89 100644
--- a/src/app/components/sales/orders/orders.component.scss
+++ b/src/app/components/sales/orders/orders.component.scss
@@ -20,6 +20,8 @@ td {
 
         select {
             padding: 12px 20px;
+            width: 176px;
+            border-radius: 5px;
         }
     }
 
diff --git a/src/app/components/shippers/create-shipper/create-shipper.component.html b/src/app/components/shippers/create-shipper/create-shipper.component.html
index 79f52d5..4d92094 100644
--- a/src/app/components/shippers/create-shipper/create-shipper.component.html
+++ b/src/app/components/shippers/create-shipper/create-shipper.component.html
@@ -401,7 +401,8 @@
 <ng-template #chooseUserImage>
     <div class="modal-body text-center">
         <h5 class="text-dark font-weight-bold mb-4">Vui lòng chọn 1 ảnh</h5>
-        <input type="file" name="avatar" accept="image/*" (change)="onFileChange($event)" />
+        <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileChange($event)" />
+        <label class="btn btn-warning font-weight-normal" for="file">Chọn ảnh</label>
     </div>
 </ng-template>
 
diff --git a/src/app/components/shippers/create-shipper/create-shipper.component.scss b/src/app/components/shippers/create-shipper/create-shipper.component.scss
index 7ed4b6a..33cb41e 100644
--- a/src/app/components/shippers/create-shipper/create-shipper.component.scss
+++ b/src/app/components/shippers/create-shipper/create-shipper.component.scss
@@ -47,4 +47,24 @@
     .icon-holder-eye {
       color: #999a9b;
     }
+  }
+
+  .input-image {
+    /* visibility: hidden etc. wont work */
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+  
+  .input-image:focus + label {
+    /* keyboard navigation */
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+  
+  .input-image + label * {
+    pointer-events: none;
   }
\ No newline at end of file
diff --git a/src/app/components/shippers/edit-shipper/edit-shipper.component.html b/src/app/components/shippers/edit-shipper/edit-shipper.component.html
index 9611c2a..45f8984 100644
--- a/src/app/components/shippers/edit-shipper/edit-shipper.component.html
+++ b/src/app/components/shippers/edit-shipper/edit-shipper.component.html
@@ -207,7 +207,8 @@
 
 <ng-template #chooseUserImage>
   <div class="modal-body text-center">
-    <h4 class="text-dark font-weight-bold mb-4">Vui lòng chọn 1 ảnh</h4>
-    <input class="" type="file" accept="image/*" (change)="onFileSelected($event)" />
+    <h5 class="text-dark font-weight-bold mb-4">Vui lòng chọn 1 ảnh</h5>
+    <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileSelected($event)" />
+      <label class="btn btn-warning font-weight-normal" for="file">Chọn ảnh</label>
   </div>
 </ng-template>
\ No newline at end of file
diff --git a/src/app/components/shippers/edit-shipper/edit-shipper.component.scss b/src/app/components/shippers/edit-shipper/edit-shipper.component.scss
index cbd9747..c40c354 100644
--- a/src/app/components/shippers/edit-shipper/edit-shipper.component.scss
+++ b/src/app/components/shippers/edit-shipper/edit-shipper.component.scss
@@ -52,4 +52,24 @@
     .icon-holder-eye {
       color: #999a9b;
     }
+  }
+
+  .input-image {
+    /* visibility: hidden etc. wont work */
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+  
+  .input-image:focus + label {
+    /* keyboard navigation */
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+  
+  .input-image + label * {
+    pointer-events: none;
   }
\ No newline at end of file
diff --git a/src/app/components/shippers/list-shipper/list-shipper.component.html b/src/app/components/shippers/list-shipper/list-shipper.component.html
index f2c7295..cb616d6 100644
--- a/src/app/components/shippers/list-shipper/list-shipper.component.html
+++ b/src/app/components/shippers/list-shipper/list-shipper.component.html
@@ -168,7 +168,7 @@
 <!-- Confirm delete -->
 <ng-template #confirm_Delete>
     <div class=" modal-confirm-delete">
-        <div class="modal-confirm-text">Bạn chắc chắc muốn xoá shipper này chứ ?</div>
+        <h5 class="text-dark font-weight-bold text-center px-2 py-3">Bạn chắc chắc muốn xoá shipper này chứ ?</h5>
         <div class="modal-btn-option">
             <button type="button" class="btn btn-default width-btn"
                 (click)="confirmBox(shipperId, success)">Xoá</button>
@@ -180,7 +180,7 @@
 <!--Delete success -->
 <ng-template #success>
     <div class="modal-body text-center">
-        <p class="modal-confirm-text text-dark">Xoá shipper thành công</p>
+        <h5 class="text-dark mb-4 font-weight-bold text-center px-2 py-3" class="modal-confirm-text text-dark">Xoá shipper thành công</h5>
         <button type="button" class="btn btn-primary" (click)="successDelete()">Tiếp tục</button>
     </div>
 </ng-template>
\ No newline at end of file
diff --git a/src/app/components/users/create-user/create-user.component.html b/src/app/components/users/create-user/create-user.component.html
index 7c4a872..38cc86b 100644
--- a/src/app/components/users/create-user/create-user.component.html
+++ b/src/app/components/users/create-user/create-user.component.html
@@ -448,7 +448,8 @@
 <ng-template #chooseUserImage>
   <div class="modal-body text-center">
     <h5 class="text-dark font-weight-bold mb-4">Vui lòng chọn 1 ảnh</h5>
-    <input class="input-image" type="file" accept="image/*" (change)="onFileSelected($event)" />
+    <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileSelected($event)" />
+    <label class="btn btn-warning font-weight-normal" for="file">Chọn ảnh</label>
   </div>
 </ng-template>
 
diff --git a/src/app/components/users/create-user/create-user.component.scss b/src/app/components/users/create-user/create-user.component.scss
index 6854bb6..9e09cf7 100644
--- a/src/app/components/users/create-user/create-user.component.scss
+++ b/src/app/components/users/create-user/create-user.component.scss
@@ -121,4 +121,24 @@
     .icon-holder-eye {
       color: #999a9b;
     }
+  }
+
+  .input-image {
+    /* visibility: hidden etc. wont work */
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+  
+  .input-image:focus + label {
+    /* keyboard navigation */
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+  
+  .input-image + label * {
+    pointer-events: none;
   }
\ No newline at end of file
diff --git a/src/app/components/users/edit-user/edit-user.component.html b/src/app/components/users/edit-user/edit-user.component.html
index 3791124..a4c5807 100644
--- a/src/app/components/users/edit-user/edit-user.component.html
+++ b/src/app/components/users/edit-user/edit-user.component.html
@@ -169,7 +169,7 @@
                                             <thead>
                                                 <tr>
                                                     <th scope="col">#</th>
-                                                    <th scope="col">Địa chỉ</th>
+                                                    <th style="text-align: center;" scope="col">Địa chỉ</th>
                                                     <th scope="col">Quận</th>
                                                     <th scope="col">Phường</th>
                                                     <th scope="col"></th>
@@ -178,7 +178,7 @@
                                             <tbody>
                                                 <tr *ngFor="let address of user.addresses; let i = index">
                                                     <th scope="row">{{ i + 1 }}</th>
-                                                    <td>{{ address.address }}</td>
+                                                    <td style="text-align: center;">{{ address.address }}</td>
                                                     <td>{{ address.district }}</td>
                                                     <td>{{ address.ward }}</td>
                                                     <td>
@@ -225,14 +225,15 @@
 
 <ng-template #chooseUserImage>
     <div class="modal-body text-center">
-        <p>Vui lòng chọn 1 ảnh</p>
-        <input class="input-image" type="file" accept="image/*" (change)="onFileSelected($event)" />
+        <h5 class="modal-title f-w-600 mb-4">Vui lòng chọn 1 ảnh</h5>
+        <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileSelected($event)" />
+        <label class="btn btn-warning font-weight-normal" for="file">Chọn ảnh</label>
     </div>
 </ng-template>
 
 <ng-template #updateSuccess>
     <div class="modal-body text-center">
-        <p>Cập nhật thông tin thành công</p>
+        <h5 class="modal-title f-w-600  mb-4">Cập nhật thông tin thành công</h5>
         <button type="button" class="btn btn-primary" (click)="continue()">Tiếp tục</button>
     </div>
 </ng-template>
diff --git a/src/app/components/users/edit-user/edit-user.component.scss b/src/app/components/users/edit-user/edit-user.component.scss
index e69de29..e949a7d 100644
--- a/src/app/components/users/edit-user/edit-user.component.scss
+++ b/src/app/components/users/edit-user/edit-user.component.scss
@@ -0,0 +1,19 @@
+.input-image {
+    /* visibility: hidden etc. wont work */
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+  
+  .input-image:focus + label {
+    /* keyboard navigation */
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+  
+  .input-image + label * {
+    pointer-events: none;
+  }
\ No newline at end of file
diff --git a/src/app/components/users/user-detail/user-detail.component.html b/src/app/components/users/user-detail/user-detail.component.html
index 2656ae3..2c786e8 100644
--- a/src/app/components/users/user-detail/user-detail.component.html
+++ b/src/app/components/users/user-detail/user-detail.component.html
@@ -239,7 +239,7 @@
                                                   'badge-warning': order.status === 'CONFIRMED',
                                                   'badge-info': order.status === 'SHIPPING',
                                                   'badge-success': order.status === 'COMPLETED',
-                                                  'badge-primary': order.status === 'CANCELED'
+                                                  'badge-primary': order.status === 'CANCELED' || order.status === 'REJECT_DELIVERY'
                                                 }">
                                                             {{
                                                             order.status === "AWAITING"
@@ -252,6 +252,8 @@
                                                             ? "Giao thành công"
                                                             : order.status === "CANCELED"
                                                             ? "Đã huỷ đơn"
+                                                            : order.status === "REJECT_DELIVERY"
+                                                            ? "Không nhận hàng"
                                                             : ""
                                                             }}
                                                         </span>
diff --git a/src/app/components/users/user-detail/user-detail.component.scss b/src/app/components/users/user-detail/user-detail.component.scss
index c8f52b1..62cabbc 100644
--- a/src/app/components/users/user-detail/user-detail.component.scss
+++ b/src/app/components/users/user-detail/user-detail.component.scss
@@ -1,3 +1,7 @@
 .text-size {
     font-size: 16px;
+}
+
+th, td {
+    text-align: center;
 }
\ No newline at end of file
diff --git a/src/app/components/utility/list-slider/list-slider.component.html b/src/app/components/utility/list-slider/list-slider.component.html
index 2598023..e4ac3d8 100644
--- a/src/app/components/utility/list-slider/list-slider.component.html
+++ b/src/app/components/utility/list-slider/list-slider.component.html
@@ -37,18 +37,20 @@
 
 <ng-template #chooseNewImage>
     <div class="modal-body text-center">
-        <p>Vui lòng chọn 1 ảnh</p>
-        <input class="input-image" type="file" accept="image/*" (change)="onFileSelected($event)" />
-        <hr>
-        <button type="button" class="btn btn-secondary" (click)="uploadImage()">Tiếp
-            tục</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-        <button type="button" class="btn btn-primary" (click)="closeLayer1()">Huỷ bỏ</button>
+        <h5 class="text-dark font-weight-bold mb-4">Vui lòng chọn 1 ảnh</h5>
+        <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileSelected($event)" />
+        <label class="btn btn-warning mb-4 font-weight-normal" for="file">Chọn ảnh</label>
+        <div>
+            <button type="button" class="btn btn-secondary" (click)="uploadImage()">Tiếp
+                tục</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <button type="button" class="btn btn-primary" (click)="closeLayer1()">Huỷ bỏ</button>
+        </div>
     </div>
 </ng-template>
 
 <ng-template #deleteImage>
     <div class="modal-body text-center">
-        <p>Bạn chắc chắn muốn xoá slider này ?</p>
+        <h5 class="text-dark font-weight-bold mb-4">Bạn chắc chắn muốn xoá slider này ?</h5>
         <button type="button" class="btn btn-secondary" (click)="deleteChooseImage()">Tiếp
             tục</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <button type="button" class="btn btn-primary" (click)="closeLayer1()">Huỷ bỏ</button>
@@ -57,7 +59,7 @@
 
 <ng-template #uploadSuccess>
     <div class="modal-body text-center">
-        <p>{{ sliderAction }} slider thành công</p>
+        <h5 class="text-dark font-weight-bold mb-4">{{ sliderAction }} slider thành công</h5>
         <button type="button" class="btn btn-primary" (click)=" closeLayer1()">Tiếp
             tục</button>
     </div>
diff --git a/src/app/components/utility/list-slider/list-slider.component.scss b/src/app/components/utility/list-slider/list-slider.component.scss
index 5497b3f..3a20d2b 100644
--- a/src/app/components/utility/list-slider/list-slider.component.scss
+++ b/src/app/components/utility/list-slider/list-slider.component.scss
@@ -1,22 +1,22 @@
 /* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
 html {
-    box-sizing: border-box
+  box-sizing: border-box;
 }
 
 *,
 *:before,
 *:after {
-    box-sizing: inherit
+  box-sizing: inherit;
 }
 
 /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
 html {
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
 }
 
 body {
-    margin: 0
+  margin: 0;
 }
 
 article,
@@ -30,103 +30,103 @@ main,
 menu,
 nav,
 section {
-    display: block
+  display: block;
 }
 
 summary {
-    display: list-item
+  display: list-item;
 }
 
 audio,
 canvas,
 progress,
 video {
-    display: inline-block
+  display: inline-block;
 }
 
 progress {
-    vertical-align: baseline
+  vertical-align: baseline;
 }
 
 audio:not([controls]) {
-    display: none;
-    height: 0
+  display: none;
+  height: 0;
 }
 
 [hidden],
 template {
-    display: none
+  display: none;
 }
 
 a {
-    background-color: transparent
+  background-color: transparent;
 }
 
 a:active,
 a:hover {
-    outline-width: 0
+  outline-width: 0;
 }
 
 abbr[title] {
-    border-bottom: none;
-    text-decoration: underline;
-    text-decoration: underline dotted
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
 }
 
 b,
 strong {
-    font-weight: bolder
+  font-weight: bolder;
 }
 
 dfn {
-    font-style: italic
+  font-style: italic;
 }
 
 mark {
-    background: #ff0;
-    color: #000
+  background: #ff0;
+  color: #000;
 }
 
 small {
-    font-size: 80%
+  font-size: 80%;
 }
 
 sub,
 sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
 }
 
 sub {
-    bottom: -0.25em
+  bottom: -0.25em;
 }
 
 sup {
-    top: -0.5em
+  top: -0.5em;
 }
 
 figure {
-    margin: 1em 40px
+  margin: 1em 40px;
 }
 
 img {
-    border-style: none
+  border-style: none;
 }
 
 code,
 kbd,
 pre,
 samp {
-    font-family: monospace, monospace;
-    font-size: 1em
+  font-family: monospace, monospace;
+  font-size: 1em;
 }
 
 hr {
-    box-sizing: content-box;
-    height: 0;
-    overflow: visible
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
 }
 
 button,
@@ -134,138 +134,138 @@ input,
 select,
 textarea,
 optgroup {
-    font: inherit;
-    margin: 0
+  font: inherit;
+  margin: 0;
 }
 
 optgroup {
-    font-weight: bold
+  font-weight: bold;
 }
 
 button,
 input {
-    overflow: visible
+  overflow: visible;
 }
 
 button,
 select {
-    text-transform: none
+  text-transform: none;
 }
 
 button,
-[type=button],
-[type=reset],
-[type=submit] {
-    -webkit-appearance: button
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
 }
 
 button::-moz-focus-inner,
-[type=button]::-moz-focus-inner,
-[type=reset]::-moz-focus-inner,
-[type=submit]::-moz-focus-inner {
-    border-style: none;
-    padding: 0
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
 }
 
 button:-moz-focusring,
-[type=button]:-moz-focusring,
-[type=reset]:-moz-focusring,
-[type=submit]:-moz-focusring {
-    outline: 1px dotted ButtonText
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
 }
 
 fieldset {
-    border: 1px solid #c0c0c0;
-    margin: 0 2px;
-    padding: .35em .625em .75em
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
 }
 
 legend {
-    color: inherit;
-    display: table;
-    max-width: 100%;
-    padding: 0;
-    white-space: normal
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  padding: 0;
+  white-space: normal;
 }
 
 textarea {
-    overflow: auto
+  overflow: auto;
 }
 
-[type=checkbox],
-[type=radio] {
-    padding: 0
+[type="checkbox"],
+[type="radio"] {
+  padding: 0;
 }
 
-[type=number]::-webkit-inner-spin-button,
-[type=number]::-webkit-outer-spin-button {
-    height: auto
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
 }
 
-[type=search] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
 }
 
-[type=search]::-webkit-search-decoration {
-    -webkit-appearance: none
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
 }
 
 ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    font: inherit
+  -webkit-appearance: button;
+  font: inherit;
 }
 
 /* End extract */
 html,
 body {
-    font-family: Verdana, sans-serif;
-    font-size: 15px;
-    line-height: 1.5
+  font-family: Verdana, sans-serif;
+  font-size: 15px;
+  line-height: 1.5;
 }
 
 html {
-    overflow-x: hidden
+  overflow-x: hidden;
 }
 
 h1 {
-    font-size: 36px
+  font-size: 36px;
 }
 
 h2 {
-    font-size: 30px
+  font-size: 30px;
 }
 
 h3 {
-    font-size: 24px
+  font-size: 24px;
 }
 
 h4 {
-    font-size: 20px
+  font-size: 20px;
 }
 
 h5 {
-    font-size: 18px
+  font-size: 18px;
 }
 
 h6 {
-    font-size: 16px
+  font-size: 16px;
 }
 
 .w3-serif {
-    font-family: serif
+  font-family: serif;
 }
 
 .w3-sans-serif {
-    font-family: sans-serif
+  font-family: sans-serif;
 }
 
 .w3-cursive {
-    font-family: cursive
+  font-family: cursive;
 }
 
 .w3-monospace {
-    font-family: monospace
+  font-family: monospace;
 }
 
 h1,
@@ -274,350 +274,350 @@ h3,
 h4,
 h5,
 h6 {
-    font-family: "Segoe UI", Arial, sans-serif;
-    font-weight: 400;
-    margin: 10px 0
+  font-family: "Segoe UI", Arial, sans-serif;
+  font-weight: 400;
+  margin: 10px 0;
 }
 
 .w3-wide {
-    letter-spacing: 4px
+  letter-spacing: 4px;
 }
 
 hr {
-    border: 0;
-    border-top: 1px solid #eee;
-    margin: 20px 0
+  border: 0;
+  border-top: 1px solid #eee;
+  margin: 20px 0;
 }
 
 .w3-image {
-    max-width: 100%;
-    height: auto
+  max-width: 100%;
+  height: auto;
 }
 
 img {
-    vertical-align: middle
+  vertical-align: middle;
 }
 
 a {
-    color: inherit
+  color: inherit;
 }
 
 .w3-table,
 .w3-table-all {
-    border-collapse: collapse;
-    border-spacing: 0;
-    width: 100%;
-    display: table
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  display: table;
 }
 
 .w3-table-all {
-    border: 1px solid #ccc
+  border: 1px solid #ccc;
 }
 
 .w3-bordered tr,
 .w3-table-all tr {
-    border-bottom: 1px solid #ddd
+  border-bottom: 1px solid #ddd;
 }
 
 .w3-striped tbody tr:nth-child(even) {
-    background-color: #f1f1f1
+  background-color: #f1f1f1;
 }
 
 .w3-table-all tr:nth-child(odd) {
-    background-color: #fff
+  background-color: #fff;
 }
 
 .w3-table-all tr:nth-child(even) {
-    background-color: #f1f1f1
+  background-color: #f1f1f1;
 }
 
 .w3-hoverable tbody tr:hover,
 .w3-ul.w3-hoverable li:hover {
-    background-color: #ccc
+  background-color: #ccc;
 }
 
 .w3-centered tr th,
 .w3-centered tr td {
-    text-align: center
+  text-align: center;
 }
 
 .w3-table td,
 .w3-table th,
 .w3-table-all td,
 .w3-table-all th {
-    padding: 8px 8px;
-    display: table-cell;
-    text-align: left;
-    vertical-align: top
+  padding: 8px 8px;
+  display: table-cell;
+  text-align: left;
+  vertical-align: top;
 }
 
 .w3-table th:first-child,
 .w3-table td:first-child,
 .w3-table-all th:first-child,
 .w3-table-all td:first-child {
-    padding-left: 16px
+  padding-left: 16px;
 }
 
 .w3-btn,
 .w3-button {
-    border: none;
-    display: inline-block;
-    padding: 8px 16px;
-    vertical-align: middle;
-    overflow: hidden;
-    text-decoration: none;
-    color: inherit;
-    background-color: inherit;
-    text-align: center;
-    cursor: pointer;
-    white-space: nowrap
+  border: none;
+  display: inline-block;
+  padding: 8px 16px;
+  vertical-align: middle;
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  background-color: inherit;
+  text-align: center;
+  cursor: pointer;
+  white-space: nowrap;
 }
 
 .w3-btn:hover {
-    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 .w3-btn,
 .w3-button {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .w3-disabled,
 .w3-btn:disabled,
 .w3-button:disabled {
-    cursor: not-allowed;
-    opacity: 0.3
+  cursor: not-allowed;
+  opacity: 0.3;
 }
 
 .w3-disabled *,
 :disabled * {
-    pointer-events: none
+  pointer-events: none;
 }
 
 .w3-btn.w3-disabled:hover,
 .w3-btn:disabled:hover {
-    box-shadow: none
+  box-shadow: none;
 }
 
 .w3-badge,
 .w3-tag {
-    background-color: #000;
-    color: #fff;
-    display: inline-block;
-    padding-left: 8px;
-    padding-right: 8px;
-    text-align: center
+  background-color: #000;
+  color: #fff;
+  display: inline-block;
+  padding-left: 8px;
+  padding-right: 8px;
+  text-align: center;
 }
 
 .w3-badge {
-    border-radius: 50%
+  border-radius: 50%;
 }
 
 .w3-ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 0
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
 }
 
 .w3-ul li {
-    padding: 8px 16px;
-    border-bottom: 1px solid #ddd
+  padding: 8px 16px;
+  border-bottom: 1px solid #ddd;
 }
 
 .w3-ul li:last-child {
-    border-bottom: none
+  border-bottom: none;
 }
 
 .w3-tooltip,
 .w3-display-container {
-    position: relative
+  position: relative;
 }
 
 .w3-tooltip .w3-text {
-    display: none
+  display: none;
 }
 
 .w3-tooltip:hover .w3-text {
-    display: inline-block
+  display: inline-block;
 }
 
 .w3-ripple:active {
-    opacity: 0.5
+  opacity: 0.5;
 }
 
 .w3-ripple {
-    transition: opacity 0s
+  transition: opacity 0s;
 }
 
 .w3-input {
-    padding: 8px;
-    display: block;
-    border: none;
-    border-bottom: 1px solid #ccc;
-    width: 100%
+  padding: 8px;
+  display: block;
+  border: none;
+  border-bottom: 1px solid #ccc;
+  width: 100%;
 }
 
 .w3-select {
-    padding: 9px 0;
-    width: 100%;
-    border: none;
-    border-bottom: 1px solid #ccc
+  padding: 9px 0;
+  width: 100%;
+  border: none;
+  border-bottom: 1px solid #ccc;
 }
 
 .w3-dropdown-click,
 .w3-dropdown-hover {
-    position: relative;
-    display: inline-block;
-    cursor: pointer
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
 }
 
 .w3-dropdown-hover:hover .w3-dropdown-content {
-    display: block
+  display: block;
 }
 
 .w3-dropdown-hover:first-child,
 .w3-dropdown-click:hover {
-    background-color: #ccc;
-    color: #000
+  background-color: #ccc;
+  color: #000;
 }
 
-.w3-dropdown-hover:hover>.w3-button:first-child,
-.w3-dropdown-click:hover>.w3-button:first-child {
-    background-color: #ccc;
-    color: #000
+.w3-dropdown-hover:hover > .w3-button:first-child,
+.w3-dropdown-click:hover > .w3-button:first-child {
+  background-color: #ccc;
+  color: #000;
 }
 
 .w3-dropdown-content {
-    cursor: auto;
-    color: #000;
-    background-color: #fff;
-    display: none;
-    position: absolute;
-    min-width: 160px;
-    margin: 0;
-    padding: 0;
-    z-index: 1
+  cursor: auto;
+  color: #000;
+  background-color: #fff;
+  display: none;
+  position: absolute;
+  min-width: 160px;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
 }
 
 .w3-check,
 .w3-radio {
-    width: 24px;
-    height: 24px;
-    position: relative;
-    top: 6px
+  width: 24px;
+  height: 24px;
+  position: relative;
+  top: 6px;
 }
 
 .w3-sidebar {
-    height: 100%;
-    width: 200px;
-    background-color: #fff;
-    position: fixed !important;
-    z-index: 1;
-    overflow: auto
+  height: 100%;
+  width: 200px;
+  background-color: #fff;
+  position: fixed !important;
+  z-index: 1;
+  overflow: auto;
 }
 
 .w3-bar-block .w3-dropdown-hover,
 .w3-bar-block .w3-dropdown-click {
-    width: 100%
+  width: 100%;
 }
 
 .w3-bar-block .w3-dropdown-hover .w3-dropdown-content,
 .w3-bar-block .w3-dropdown-click .w3-dropdown-content {
-    min-width: 100%
+  min-width: 100%;
 }
 
 .w3-bar-block .w3-dropdown-hover .w3-button,
 .w3-bar-block .w3-dropdown-click .w3-button {
-    width: 100%;
-    text-align: left;
-    padding: 8px 16px
+  width: 100%;
+  text-align: left;
+  padding: 8px 16px;
 }
 
 .w3-main,
 #main {
-    transition: margin-left .4s
+  transition: margin-left 0.4s;
 }
 
 .w3-modal {
-    z-index: 3;
-    display: none;
-    padding-top: 100px;
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgb(0, 0, 0);
-    background-color: rgba(0, 0, 0, 0.4)
+  z-index: 3;
+  display: none;
+  padding-top: 100px;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
 .w3-modal-content {
-    margin: auto;
-    background-color: #fff;
-    position: relative;
-    padding: 0;
-    outline: 0;
-    width: 600px
+  margin: auto;
+  background-color: #fff;
+  position: relative;
+  padding: 0;
+  outline: 0;
+  width: 600px;
 }
 
 .w3-bar {
-    width: 100%;
-    overflow: hidden
+  width: 100%;
+  overflow: hidden;
 }
 
 .w3-center .w3-bar {
-    display: inline-block;
-    width: auto
+  display: inline-block;
+  width: auto;
 }
 
 .w3-bar .w3-bar-item {
-    padding: 8px 16px;
-    float: left;
-    width: auto;
-    border: none;
-    display: block;
-    outline: 0
+  padding: 8px 16px;
+  float: left;
+  width: auto;
+  border: none;
+  display: block;
+  outline: 0;
 }
 
 .w3-bar .w3-dropdown-hover,
 .w3-bar .w3-dropdown-click {
-    position: static;
-    float: left
+  position: static;
+  float: left;
 }
 
 .w3-bar .w3-button {
-    white-space: normal
+  white-space: normal;
 }
 
 .w3-bar-block .w3-bar-item {
-    width: 100%;
-    display: block;
-    padding: 8px 16px;
-    text-align: left;
-    border: none;
-    white-space: normal;
-    float: none;
-    outline: 0
+  width: 100%;
+  display: block;
+  padding: 8px 16px;
+  text-align: left;
+  border: none;
+  white-space: normal;
+  float: none;
+  outline: 0;
 }
 
 .w3-bar-block.w3-center .w3-bar-item {
-    text-align: center
+  text-align: center;
 }
 
 .w3-block {
-    display: block;
-    width: 100%
+  display: block;
+  width: 100%;
 }
 
 .w3-responsive {
-    display: block;
-    overflow-x: auto
+  display: block;
+  overflow-x: auto;
 }
 
 .w3-container:after,
@@ -634,9 +634,9 @@ a {
 .w3-clear:before,
 .w3-bar:before,
 .w3-bar:after {
-    content: "";
-    display: table;
-    clear: both
+  content: "";
+  display: table;
+  clear: both;
 }
 
 .w3-col,
@@ -645,1350 +645,1370 @@ a {
 .w3-twothird,
 .w3-threequarter,
 .w3-quarter {
-    float: left;
-    width: 100%
+  float: left;
+  width: 100%;
 }
 
 .w3-col.s1 {
-    width: 8.33333%
+  width: 8.33333%;
 }
 
 .w3-col.s2 {
-    width: 16.66666%
+  width: 16.66666%;
 }
 
 .w3-col.s3 {
-    width: 24.99999%
+  width: 24.99999%;
 }
 
 .w3-col.s4 {
-    width: 33.33333%
+  width: 33.33333%;
 }
 
 .w3-col.s5 {
-    width: 41.66666%
+  width: 41.66666%;
 }
 
 .w3-col.s6 {
-    width: 49.99999%
+  width: 49.99999%;
 }
 
 .w3-col.s7 {
-    width: 58.33333%
+  width: 58.33333%;
 }
 
 .w3-col.s8 {
-    width: 66.66666%
+  width: 66.66666%;
 }
 
 .w3-col.s9 {
-    width: 74.99999%
+  width: 74.99999%;
 }
 
 .w3-col.s10 {
-    width: 83.33333%
+  width: 83.33333%;
 }
 
 .w3-col.s11 {
-    width: 91.66666%
+  width: 91.66666%;
 }
 
 .w3-col.s12 {
-    width: 99.99999%
+  width: 99.99999%;
 }
 
-@media (min-width:601px) {
-    .w3-col.m1 {
-        width: 8.33333%
-    }
+@media (min-width: 601px) {
+  .w3-col.m1 {
+    width: 8.33333%;
+  }
 
-    .w3-col.m2 {
-        width: 16.66666%
-    }
+  .w3-col.m2 {
+    width: 16.66666%;
+  }
 
-    .w3-col.m3,
-    .w3-quarter {
-        width: 24.99999%
-    }
+  .w3-col.m3,
+  .w3-quarter {
+    width: 24.99999%;
+  }
 
-    .w3-col.m4,
-    .w3-third {
-        width: 33.33333%
-    }
+  .w3-col.m4,
+  .w3-third {
+    width: 33.33333%;
+  }
 
-    .w3-col.m5 {
-        width: 41.66666%
-    }
+  .w3-col.m5 {
+    width: 41.66666%;
+  }
 
-    .w3-col.m6,
-    .w3-half {
-        width: 49.99999%
-    }
+  .w3-col.m6,
+  .w3-half {
+    width: 49.99999%;
+  }
 
-    .w3-col.m7 {
-        width: 58.33333%
-    }
+  .w3-col.m7 {
+    width: 58.33333%;
+  }
 
-    .w3-col.m8,
-    .w3-twothird {
-        width: 66.66666%
-    }
+  .w3-col.m8,
+  .w3-twothird {
+    width: 66.66666%;
+  }
 
-    .w3-col.m9,
-    .w3-threequarter {
-        width: 74.99999%
-    }
+  .w3-col.m9,
+  .w3-threequarter {
+    width: 74.99999%;
+  }
 
-    .w3-col.m10 {
-        width: 83.33333%
-    }
+  .w3-col.m10 {
+    width: 83.33333%;
+  }
 
-    .w3-col.m11 {
-        width: 91.66666%
-    }
+  .w3-col.m11 {
+    width: 91.66666%;
+  }
 
-    .w3-col.m12 {
-        width: 99.99999%
-    }
+  .w3-col.m12 {
+    width: 99.99999%;
+  }
 }
 
-@media (min-width:993px) {
-    .w3-col.l1 {
-        width: 8.33333%
-    }
+@media (min-width: 993px) {
+  .w3-col.l1 {
+    width: 8.33333%;
+  }
 
-    .w3-col.l2 {
-        width: 16.66666%
-    }
+  .w3-col.l2 {
+    width: 16.66666%;
+  }
 
-    .w3-col.l3 {
-        width: 24.99999%
-    }
+  .w3-col.l3 {
+    width: 24.99999%;
+  }
 
-    .w3-col.l4 {
-        width: 33.33333%
-    }
+  .w3-col.l4 {
+    width: 33.33333%;
+  }
 
-    .w3-col.l5 {
-        width: 41.66666%
-    }
+  .w3-col.l5 {
+    width: 41.66666%;
+  }
 
-    .w3-col.l6 {
-        width: 49.99999%
-    }
+  .w3-col.l6 {
+    width: 49.99999%;
+  }
 
-    .w3-col.l7 {
-        width: 58.33333%
-    }
+  .w3-col.l7 {
+    width: 58.33333%;
+  }
 
-    .w3-col.l8 {
-        width: 66.66666%
-    }
+  .w3-col.l8 {
+    width: 66.66666%;
+  }
 
-    .w3-col.l9 {
-        width: 74.99999%
-    }
+  .w3-col.l9 {
+    width: 74.99999%;
+  }
 
-    .w3-col.l10 {
-        width: 83.33333%
-    }
+  .w3-col.l10 {
+    width: 83.33333%;
+  }
 
-    .w3-col.l11 {
-        width: 91.66666%
-    }
+  .w3-col.l11 {
+    width: 91.66666%;
+  }
 
-    .w3-col.l12 {
-        width: 99.99999%
-    }
+  .w3-col.l12 {
+    width: 99.99999%;
+  }
 }
 
 .w3-rest {
-    overflow: hidden
+  overflow: hidden;
 }
 
 .w3-stretch {
-    margin-left: -16px;
-    margin-right: -16px
+  margin-left: -16px;
+  margin-right: -16px;
 }
 
 .w3-content,
 .w3-auto {
-    margin-left: auto;
-    margin-right: auto
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .w3-content {
-    max-width: 980px
+  max-width: 980px;
 }
 
 .w3-auto {
-    max-width: 1140px
+  max-width: 1140px;
 }
 
 .w3-cell-row {
-    display: table;
-    width: 100%
+  display: table;
+  width: 100%;
 }
 
 .w3-cell {
-    display: table-cell
+  display: table-cell;
 }
 
 .w3-cell-top {
-    vertical-align: top
+  vertical-align: top;
 }
 
 .w3-cell-middle {
-    vertical-align: middle
+  vertical-align: middle;
 }
 
 .w3-cell-bottom {
-    vertical-align: bottom
+  vertical-align: bottom;
 }
 
 .w3-hide {
-    display: none !important
+  display: none !important;
 }
 
 .w3-show-block,
 .w3-show {
-    display: block !important
+  display: block !important;
 }
 
 .w3-show-inline-block {
-    display: inline-block !important
+  display: inline-block !important;
 }
 
-@media (max-width:1205px) {
-    .w3-auto {
-        max-width: 95%
-    }
+@media (max-width: 1205px) {
+  .w3-auto {
+    max-width: 95%;
+  }
 }
 
-@media (max-width:600px) {
-    .w3-modal-content {
-        margin: 0 10px;
-        width: auto !important
-    }
+@media (max-width: 600px) {
+  .w3-modal-content {
+    margin: 0 10px;
+    width: auto !important;
+  }
 
-    .w3-modal {
-        padding-top: 30px
-    }
+  .w3-modal {
+    padding-top: 30px;
+  }
 
-    .w3-dropdown-hover.w3-mobile .w3-dropdown-content,
-    .w3-dropdown-click.w3-mobile .w3-dropdown-content {
-        position: relative
-    }
+  .w3-dropdown-hover.w3-mobile .w3-dropdown-content,
+  .w3-dropdown-click.w3-mobile .w3-dropdown-content {
+    position: relative;
+  }
 
-    .w3-hide-small {
-        display: none !important
-    }
+  .w3-hide-small {
+    display: none !important;
+  }
 
-    .w3-mobile {
-        display: block;
-        width: 100% !important
-    }
+  .w3-mobile {
+    display: block;
+    width: 100% !important;
+  }
 
-    .w3-bar-item.w3-mobile,
-    .w3-dropdown-hover.w3-mobile,
-    .w3-dropdown-click.w3-mobile {
-        text-align: center
-    }
+  .w3-bar-item.w3-mobile,
+  .w3-dropdown-hover.w3-mobile,
+  .w3-dropdown-click.w3-mobile {
+    text-align: center;
+  }
 
-    .w3-dropdown-hover.w3-mobile,
-    .w3-dropdown-hover.w3-mobile .w3-btn,
-    .w3-dropdown-hover.w3-mobile .w3-button,
-    .w3-dropdown-click.w3-mobile,
-    .w3-dropdown-click.w3-mobile .w3-btn,
-    .w3-dropdown-click.w3-mobile .w3-button {
-        width: 100%
-    }
+  .w3-dropdown-hover.w3-mobile,
+  .w3-dropdown-hover.w3-mobile .w3-btn,
+  .w3-dropdown-hover.w3-mobile .w3-button,
+  .w3-dropdown-click.w3-mobile,
+  .w3-dropdown-click.w3-mobile .w3-btn,
+  .w3-dropdown-click.w3-mobile .w3-button {
+    width: 100%;
+  }
 }
 
-@media (max-width:768px) {
-    .w3-modal-content {
-        width: 500px
-    }
+@media (max-width: 768px) {
+  .w3-modal-content {
+    width: 500px;
+  }
 
-    .w3-modal {
-        padding-top: 50px
-    }
+  .w3-modal {
+    padding-top: 50px;
+  }
 }
 
-@media (min-width:993px) {
-    .w3-modal-content {
-        width: 900px
-    }
+@media (min-width: 993px) {
+  .w3-modal-content {
+    width: 900px;
+  }
 
-    .w3-hide-large {
-        display: none !important
-    }
+  .w3-hide-large {
+    display: none !important;
+  }
 
-    .w3-sidebar.w3-collapse {
-        display: block !important
-    }
+  .w3-sidebar.w3-collapse {
+    display: block !important;
+  }
 }
 
-@media (max-width:992px) and (min-width:601px) {
-    .w3-hide-medium {
-        display: none !important
-    }
+@media (max-width: 992px) and (min-width: 601px) {
+  .w3-hide-medium {
+    display: none !important;
+  }
 }
 
-@media (max-width:992px) {
-    .w3-sidebar.w3-collapse {
-        display: none
-    }
+@media (max-width: 992px) {
+  .w3-sidebar.w3-collapse {
+    display: none;
+  }
 
-    .w3-main {
-        margin-left: 0 !important;
-        margin-right: 0 !important
-    }
+  .w3-main {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
 
-    .w3-auto {
-        max-width: 100%
-    }
+  .w3-auto {
+    max-width: 100%;
+  }
 }
 
 .w3-top,
 .w3-bottom {
-    position: fixed;
-    width: 100%;
-    z-index: 1
+  position: fixed;
+  width: 100%;
+  z-index: 1;
 }
 
 .w3-top {
-    top: 0
+  top: 0;
 }
 
 .w3-bottom {
-    bottom: 0
+  bottom: 0;
 }
 
 .w3-overlay {
-    position: fixed;
-    display: none;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 2
+  position: fixed;
+  display: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2;
 }
 
 .w3-display-topleft {
-    position: absolute;
-    left: 0;
-    top: 0
+  position: absolute;
+  left: 0;
+  top: 0;
 }
 
 .w3-display-topright {
-    position: absolute;
-    right: 0;
-    top: 0
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 
 .w3-display-bottomleft {
-    position: absolute;
-    left: 0;
-    bottom: 0
+  position: absolute;
+  left: 0;
+  bottom: 0;
 }
 
 .w3-display-bottomright {
-    position: absolute;
-    right: 0;
-    bottom: 0
+  position: absolute;
+  right: 0;
+  bottom: 0;
 }
 
 .w3-display-middle {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%)
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
 }
 
 .w3-display-left {
-    position: absolute;
-    top: 50%;
-    left: 0%;
-    transform: translate(0%, -50%);
-    -ms-transform: translate(-0%, -50%)
+  position: absolute;
+  top: 50%;
+  left: 0%;
+  transform: translate(0%, -50%);
+  -ms-transform: translate(-0%, -50%);
 }
 
 .w3-display-right {
-    position: absolute;
-    top: 50%;
-    right: 0%;
-    transform: translate(0%, -50%);
-    -ms-transform: translate(0%, -50%)
+  position: absolute;
+  top: 50%;
+  right: 0%;
+  transform: translate(0%, -50%);
+  -ms-transform: translate(0%, -50%);
 }
 
 .w3-display-topmiddle {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, 0%);
-    -ms-transform: translate(-50%, 0%)
+  position: absolute;
+  left: 50%;
+  top: 0;
+  transform: translate(-50%, 0%);
+  -ms-transform: translate(-50%, 0%);
 }
 
 .w3-display-bottommiddle {
-    position: absolute;
-    left: 50%;
-    bottom: 0;
-    transform: translate(-50%, 0%);
-    -ms-transform: translate(-50%, 0%)
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translate(-50%, 0%);
+  -ms-transform: translate(-50%, 0%);
 }
 
 .w3-display-container:hover .w3-display-hover {
-    display: block
+  display: block;
 }
 
 .w3-display-container:hover span.w3-display-hover {
-    display: inline-block
+  display: inline-block;
 }
 
 .w3-display-hover {
-    display: none
+  display: none;
 }
 
 .w3-display-position {
-    position: absolute
+  position: absolute;
 }
 
 .w3-circle {
-    border-radius: 50%
+  border-radius: 50%;
 }
 
 .w3-round-small {
-    border-radius: 2px
+  border-radius: 2px;
 }
 
 .w3-round,
 .w3-round-medium {
-    border-radius: 4px
+  border-radius: 4px;
 }
 
 .w3-round-large {
-    border-radius: 8px
+  border-radius: 8px;
 }
 
 .w3-round-xlarge {
-    border-radius: 16px
+  border-radius: 16px;
 }
 
 .w3-round-xxlarge {
-    border-radius: 32px
+  border-radius: 32px;
 }
 
 .w3-row-padding,
-.w3-row-padding>.w3-half,
-.w3-row-padding>.w3-third,
-.w3-row-padding>.w3-twothird,
-.w3-row-padding>.w3-threequarter,
-.w3-row-padding>.w3-quarter,
-.w3-row-padding>.w3-col {
-    padding: 0 8px
+.w3-row-padding > .w3-half,
+.w3-row-padding > .w3-third,
+.w3-row-padding > .w3-twothird,
+.w3-row-padding > .w3-threequarter,
+.w3-row-padding > .w3-quarter,
+.w3-row-padding > .w3-col {
+  padding: 0 8px;
 }
 
 .w3-container,
 .w3-panel {
-    padding: 0.01em 16px
+  padding: 0.01em 16px;
 }
 
 .w3-panel {
-    margin-top: 16px;
-    margin-bottom: 16px
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 
 .w3-code,
 .w3-codespan {
-    font-family: Consolas, "courier new";
-    font-size: 16px
+  font-family: Consolas, "courier new";
+  font-size: 16px;
 }
 
 .w3-code {
-    width: auto;
-    background-color: #fff;
-    padding: 8px 12px;
-    border-left: 4px solid #4CAF50;
-    word-wrap: break-word
+  width: auto;
+  background-color: #fff;
+  padding: 8px 12px;
+  border-left: 4px solid #4caf50;
+  word-wrap: break-word;
 }
 
 .w3-codespan {
-    color: crimson;
-    background-color: #f1f1f1;
-    padding-left: 4px;
-    padding-right: 4px;
-    font-size: 110%
+  color: crimson;
+  background-color: #f1f1f1;
+  padding-left: 4px;
+  padding-right: 4px;
+  font-size: 110%;
 }
 
 .w3-card,
 .w3-card-2 {
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 }
 
 .w3-card-4,
 .w3-hover-shadow:hover {
-    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19)
+  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 .w3-spin {
-    animation: w3-spin 2s infinite linear
+  animation: w3-spin 2s infinite linear;
 }
 
 @keyframes w3-spin {
-    0% {
-        transform: rotate(0deg)
-    }
+  0% {
+    transform: rotate(0deg);
+  }
 
-    100% {
-        transform: rotate(359deg)
-    }
+  100% {
+    transform: rotate(359deg);
+  }
 }
 
 .w3-animate-fading {
-    animation: fading 10s infinite
+  animation: fading 10s infinite;
 }
 
 @keyframes fading {
-    0% {
-        opacity: 0
-    }
+  0% {
+    opacity: 0;
+  }
 
-    50% {
-        opacity: 1
-    }
+  50% {
+    opacity: 1;
+  }
 
-    100% {
-        opacity: 0
-    }
+  100% {
+    opacity: 0;
+  }
 }
 
 .w3-animate-opacity {
-    animation: opac 0.8s
+  animation: opac 0.8s;
 }
 
 @keyframes opac {
-    from {
-        opacity: 0
-    }
+  from {
+    opacity: 0;
+  }
 
-    to {
-        opacity: 1
-    }
+  to {
+    opacity: 1;
+  }
 }
 
 .w3-animate-top {
-    position: relative;
-    animation: animatetop 0.4s
+  position: relative;
+  animation: animatetop 0.4s;
 }
 
 @keyframes animatetop {
-    from {
-        top: -300px;
-        opacity: 0
-    }
+  from {
+    top: -300px;
+    opacity: 0;
+  }
 
-    to {
-        top: 0;
-        opacity: 1
-    }
+  to {
+    top: 0;
+    opacity: 1;
+  }
 }
 
 .w3-animate-left {
-    position: relative;
-    animation: animateleft 0.4s
+  position: relative;
+  animation: animateleft 0.4s;
 }
 
 @keyframes animateleft {
-    from {
-        left: -300px;
-        opacity: 0
-    }
+  from {
+    left: -300px;
+    opacity: 0;
+  }
 
-    to {
-        left: 0;
-        opacity: 1
-    }
+  to {
+    left: 0;
+    opacity: 1;
+  }
 }
 
 .w3-animate-right {
-    position: relative;
-    animation: animateright 0.4s
+  position: relative;
+  animation: animateright 0.4s;
 }
 
 @keyframes animateright {
-    from {
-        right: -300px;
-        opacity: 0
-    }
+  from {
+    right: -300px;
+    opacity: 0;
+  }
 
-    to {
-        right: 0;
-        opacity: 1
-    }
+  to {
+    right: 0;
+    opacity: 1;
+  }
 }
 
 .w3-animate-bottom {
-    position: relative;
-    animation: animatebottom 0.4s
+  position: relative;
+  animation: animatebottom 0.4s;
 }
 
 @keyframes animatebottom {
-    from {
-        bottom: -300px;
-        opacity: 0
-    }
+  from {
+    bottom: -300px;
+    opacity: 0;
+  }
 
-    to {
-        bottom: 0;
-        opacity: 1
-    }
+  to {
+    bottom: 0;
+    opacity: 1;
+  }
 }
 
 .w3-animate-zoom {
-    animation: animatezoom 0.6s
+  animation: animatezoom 0.6s;
 }
 
 @keyframes animatezoom {
-    from {
-        transform: scale(0)
-    }
+  from {
+    transform: scale(0);
+  }
 
-    to {
-        transform: scale(1)
-    }
+  to {
+    transform: scale(1);
+  }
 }
 
 .w3-animate-input {
-    transition: width 0.4s ease-in-out
+  transition: width 0.4s ease-in-out;
 }
 
 .w3-animate-input:focus {
-    width: 100% !important
+  width: 100% !important;
 }
 
 .w3-opacity,
 .w3-hover-opacity:hover {
-    opacity: 0.60
+  opacity: 0.6;
 }
 
 .w3-opacity-off,
 .w3-hover-opacity-off:hover {
-    opacity: 1
+  opacity: 1;
 }
 
 .w3-opacity-max {
-    opacity: 0.25
+  opacity: 0.25;
 }
 
 .w3-opacity-min {
-    opacity: 0.75
+  opacity: 0.75;
 }
 
 .w3-greyscale-max,
 .w3-grayscale-max,
 .w3-hover-greyscale:hover,
 .w3-hover-grayscale:hover {
-    filter: grayscale(100%)
+  filter: grayscale(100%);
 }
 
 .w3-greyscale,
 .w3-grayscale {
-    filter: grayscale(75%)
+  filter: grayscale(75%);
 }
 
 .w3-greyscale-min,
 .w3-grayscale-min {
-    filter: grayscale(50%)
+  filter: grayscale(50%);
 }
 
 .w3-sepia {
-    filter: sepia(75%)
+  filter: sepia(75%);
 }
 
 .w3-sepia-max,
 .w3-hover-sepia:hover {
-    filter: sepia(100%)
+  filter: sepia(100%);
 }
 
 .w3-sepia-min {
-    filter: sepia(50%)
+  filter: sepia(50%);
 }
 
 .w3-tiny {
-    font-size: 10px !important
+  font-size: 10px !important;
 }
 
 .w3-small {
-    font-size: 12px !important
+  font-size: 12px !important;
 }
 
 .w3-medium {
-    font-size: 15px !important
+  font-size: 15px !important;
 }
 
 .w3-large {
-    font-size: 18px !important
+  font-size: 18px !important;
 }
 
 .w3-xlarge {
-    font-size: 24px !important
+  font-size: 24px !important;
 }
 
 .w3-xxlarge {
-    font-size: 36px !important
+  font-size: 36px !important;
 }
 
 .w3-xxxlarge {
-    font-size: 48px !important
+  font-size: 48px !important;
 }
 
 .w3-jumbo {
-    font-size: 64px !important
+  font-size: 64px !important;
 }
 
 .w3-left-align {
-    text-align: left !important
+  text-align: left !important;
 }
 
 .w3-right-align {
-    text-align: right !important
+  text-align: right !important;
 }
 
 .w3-justify {
-    text-align: justify !important
+  text-align: justify !important;
 }
 
 .w3-center {
-    text-align: center !important
+  text-align: center !important;
 }
 
 .w3-border-0 {
-    border: 0 !important
+  border: 0 !important;
 }
 
 .w3-border {
-    border: 1px solid #ccc !important
+  border: 1px solid #ccc !important;
 }
 
 .w3-border-top {
-    border-top: 1px solid #ccc !important
+  border-top: 1px solid #ccc !important;
 }
 
 .w3-border-bottom {
-    border-bottom: 1px solid #ccc !important
+  border-bottom: 1px solid #ccc !important;
 }
 
 .w3-border-left {
-    border-left: 1px solid #ccc !important
+  border-left: 1px solid #ccc !important;
 }
 
 .w3-border-right {
-    border-right: 1px solid #ccc !important
+  border-right: 1px solid #ccc !important;
 }
 
 .w3-topbar {
-    border-top: 6px solid #ccc !important
+  border-top: 6px solid #ccc !important;
 }
 
 .w3-bottombar {
-    border-bottom: 6px solid #ccc !important
+  border-bottom: 6px solid #ccc !important;
 }
 
 .w3-leftbar {
-    border-left: 6px solid #ccc !important
+  border-left: 6px solid #ccc !important;
 }
 
 .w3-rightbar {
-    border-right: 6px solid #ccc !important
+  border-right: 6px solid #ccc !important;
 }
 
 .w3-section,
 .w3-code {
-    margin-top: 16px !important;
-    margin-bottom: 16px !important
+  margin-top: 16px !important;
+  margin-bottom: 16px !important;
 }
 
 .w3-margin {
-    margin: 16px !important
+  margin: 16px !important;
 }
 
 .w3-margin-top {
-    margin-top: 16px !important
+  margin-top: 16px !important;
 }
 
 .w3-margin-bottom {
-    margin-bottom: 16px !important
+  margin-bottom: 16px !important;
 }
 
 .w3-margin-left {
-    margin-left: 16px !important
+  margin-left: 16px !important;
 }
 
 .w3-margin-right {
-    margin-right: 16px !important
+  margin-right: 16px !important;
 }
 
 .w3-padding-small {
-    padding: 4px 8px !important
+  padding: 4px 8px !important;
 }
 
 .w3-padding {
-    padding: 8px 16px !important
+  padding: 8px 16px !important;
 }
 
 .w3-padding-large {
-    padding: 12px 24px !important
+  padding: 12px 24px !important;
 }
 
 .w3-padding-16 {
-    padding-top: 16px !important;
-    padding-bottom: 16px !important
+  padding-top: 16px !important;
+  padding-bottom: 16px !important;
 }
 
 .w3-padding-24 {
-    padding-top: 24px !important;
-    padding-bottom: 24px !important
+  padding-top: 24px !important;
+  padding-bottom: 24px !important;
 }
 
 .w3-padding-32 {
-    padding-top: 32px !important;
-    padding-bottom: 32px !important
+  padding-top: 32px !important;
+  padding-bottom: 32px !important;
 }
 
 .w3-padding-48 {
-    padding-top: 48px !important;
-    padding-bottom: 48px !important
+  padding-top: 48px !important;
+  padding-bottom: 48px !important;
 }
 
 .w3-padding-64 {
-    padding-top: 64px !important;
-    padding-bottom: 64px !important
+  padding-top: 64px !important;
+  padding-bottom: 64px !important;
 }
 
 .w3-padding-top-64 {
-    padding-top: 64px !important
+  padding-top: 64px !important;
 }
 
 .w3-padding-top-48 {
-    padding-top: 48px !important
+  padding-top: 48px !important;
 }
 
 .w3-padding-top-32 {
-    padding-top: 32px !important
+  padding-top: 32px !important;
 }
 
 .w3-padding-top-24 {
-    padding-top: 24px !important
+  padding-top: 24px !important;
 }
 
 .w3-left {
-    float: left !important
+  float: left !important;
 }
 
 .w3-right {
-    float: right !important
+  float: right !important;
 }
 
 .w3-button:hover {
-    color: #000 !important;
-    background-color: #ccc !important
+  color: #000 !important;
+  background-color: #ccc !important;
 }
 
 .w3-transparent,
 .w3-hover-none:hover {
-    background-color: transparent !important
+  background-color: transparent !important;
 }
 
 .w3-hover-none:hover {
-    box-shadow: none !important
+  box-shadow: none !important;
 }
 
 /* Colors */
 .w3-amber,
 .w3-hover-amber:hover {
-    color: #000 !important;
-    background-color: #ffc107 !important
+  color: #000 !important;
+  background-color: #ffc107 !important;
 }
 
 .w3-aqua,
 .w3-hover-aqua:hover {
-    color: #000 !important;
-    background-color: #00ffff !important
+  color: #000 !important;
+  background-color: #00ffff !important;
 }
 
 .w3-blue,
 .w3-hover-blue:hover {
-    color: #fff !important;
-    background-color: #2196F3 !important
+  color: #fff !important;
+  background-color: #2196f3 !important;
 }
 
 .w3-light-blue,
 .w3-hover-light-blue:hover {
-    color: #000 !important;
-    background-color: #87CEEB !important
+  color: #000 !important;
+  background-color: #87ceeb !important;
 }
 
 .w3-brown,
 .w3-hover-brown:hover {
-    color: #fff !important;
-    background-color: #795548 !important
+  color: #fff !important;
+  background-color: #795548 !important;
 }
 
 .w3-cyan,
 .w3-hover-cyan:hover {
-    color: #000 !important;
-    background-color: #00bcd4 !important
+  color: #000 !important;
+  background-color: #00bcd4 !important;
 }
 
 .w3-blue-grey,
 .w3-hover-blue-grey:hover,
 .w3-blue-gray,
 .w3-hover-blue-gray:hover {
-    color: #fff !important;
-    background-color: #607d8b !important
+  color: #fff !important;
+  background-color: #607d8b !important;
 }
 
 .w3-green,
 .w3-hover-green:hover {
-    color: #fff !important;
-    background-color: #4CAF50 !important
+  color: #fff !important;
+  background-color: #4caf50 !important;
 }
 
 .w3-light-green,
 .w3-hover-light-green:hover {
-    color: #000 !important;
-    background-color: #8bc34a !important
+  color: #000 !important;
+  background-color: #8bc34a !important;
 }
 
 .w3-indigo,
 .w3-hover-indigo:hover {
-    color: #fff !important;
-    background-color: #3f51b5 !important
+  color: #fff !important;
+  background-color: #3f51b5 !important;
 }
 
 .w3-khaki,
 .w3-hover-khaki:hover {
-    color: #000 !important;
-    background-color: #f0e68c !important
+  color: #000 !important;
+  background-color: #f0e68c !important;
 }
 
 .w3-lime,
 .w3-hover-lime:hover {
-    color: #000 !important;
-    background-color: #cddc39 !important
+  color: #000 !important;
+  background-color: #cddc39 !important;
 }
 
 .w3-orange,
 .w3-hover-orange:hover {
-    color: #000 !important;
-    background-color: #ff9800 !important
+  color: #000 !important;
+  background-color: #ff9800 !important;
 }
 
 .w3-deep-orange,
 .w3-hover-deep-orange:hover {
-    color: #fff !important;
-    background-color: #ff5722 !important
+  color: #fff !important;
+  background-color: #ff5722 !important;
 }
 
 .w3-pink,
 .w3-hover-pink:hover {
-    color: #fff !important;
-    background-color: #e91e63 !important
+  color: #fff !important;
+  background-color: #e91e63 !important;
 }
 
 .w3-purple,
 .w3-hover-purple:hover {
-    color: #fff !important;
-    background-color: #9c27b0 !important
+  color: #fff !important;
+  background-color: #9c27b0 !important;
 }
 
 .w3-deep-purple,
 .w3-hover-deep-purple:hover {
-    color: #fff !important;
-    background-color: #673ab7 !important
+  color: #fff !important;
+  background-color: #673ab7 !important;
 }
 
 .w3-red,
 .w3-hover-red:hover {
-    color: #fff !important;
-    background-color: #f44336 !important
+  color: #fff !important;
+  background-color: #f44336 !important;
 }
 
 .w3-sand,
 .w3-hover-sand:hover {
-    color: #000 !important;
-    background-color: #fdf5e6 !important
+  color: #000 !important;
+  background-color: #fdf5e6 !important;
 }
 
 .w3-teal,
 .w3-hover-teal:hover {
-    color: #fff !important;
-    background-color: #009688 !important
+  color: #fff !important;
+  background-color: #009688 !important;
 }
 
 .w3-yellow,
 .w3-hover-yellow:hover {
-    color: #000 !important;
-    background-color: #ffeb3b !important
+  color: #000 !important;
+  background-color: #ffeb3b !important;
 }
 
 .w3-white,
 .w3-hover-white:hover {
-    color: #000 !important;
-    background-color: #fff !important
+  color: #000 !important;
+  background-color: #fff !important;
 }
 
 .w3-black,
 .w3-hover-black:hover {
-    color: #fff !important;
-    background-color: #000 !important
+  color: #fff !important;
+  background-color: #000 !important;
 }
 
 .w3-grey,
 .w3-hover-grey:hover,
 .w3-gray,
 .w3-hover-gray:hover {
-    color: #000 !important;
-    background-color: #9e9e9e !important
+  color: #000 !important;
+  background-color: #9e9e9e !important;
 }
 
 .w3-light-grey,
 .w3-hover-light-grey:hover,
 .w3-light-gray,
 .w3-hover-light-gray:hover {
-    color: #000 !important;
-    background-color: #f1f1f1 !important
+  color: #000 !important;
+  background-color: #f1f1f1 !important;
 }
 
 .w3-dark-grey,
 .w3-hover-dark-grey:hover,
 .w3-dark-gray,
 .w3-hover-dark-gray:hover {
-    color: #fff !important;
-    background-color: #616161 !important
+  color: #fff !important;
+  background-color: #616161 !important;
 }
 
 .w3-pale-red,
 .w3-hover-pale-red:hover {
-    color: #000 !important;
-    background-color: #ffdddd !important
+  color: #000 !important;
+  background-color: #ffdddd !important;
 }
 
 .w3-pale-green,
 .w3-hover-pale-green:hover {
-    color: #000 !important;
-    background-color: #ddffdd !important
+  color: #000 !important;
+  background-color: #ddffdd !important;
 }
 
 .w3-pale-yellow,
 .w3-hover-pale-yellow:hover {
-    color: #000 !important;
-    background-color: #ffffcc !important
+  color: #000 !important;
+  background-color: #ffffcc !important;
 }
 
 .w3-pale-blue,
 .w3-hover-pale-blue:hover {
-    color: #000 !important;
-    background-color: #ddffff !important
+  color: #000 !important;
+  background-color: #ddffff !important;
 }
 
 .w3-text-amber,
 .w3-hover-text-amber:hover {
-    color: #ffc107 !important
+  color: #ffc107 !important;
 }
 
 .w3-text-aqua,
 .w3-hover-text-aqua:hover {
-    color: #00ffff !important
+  color: #00ffff !important;
 }
 
 .w3-text-blue,
 .w3-hover-text-blue:hover {
-    color: #2196F3 !important
+  color: #2196f3 !important;
 }
 
 .w3-text-light-blue,
 .w3-hover-text-light-blue:hover {
-    color: #87CEEB !important
+  color: #87ceeb !important;
 }
 
 .w3-text-brown,
 .w3-hover-text-brown:hover {
-    color: #795548 !important
+  color: #795548 !important;
 }
 
 .w3-text-cyan,
 .w3-hover-text-cyan:hover {
-    color: #00bcd4 !important
+  color: #00bcd4 !important;
 }
 
 .w3-text-blue-grey,
 .w3-hover-text-blue-grey:hover,
 .w3-text-blue-gray,
 .w3-hover-text-blue-gray:hover {
-    color: #607d8b !important
+  color: #607d8b !important;
 }
 
 .w3-text-green,
 .w3-hover-text-green:hover {
-    color: #4CAF50 !important
+  color: #4caf50 !important;
 }
 
 .w3-text-light-green,
 .w3-hover-text-light-green:hover {
-    color: #8bc34a !important
+  color: #8bc34a !important;
 }
 
 .w3-text-indigo,
 .w3-hover-text-indigo:hover {
-    color: #3f51b5 !important
+  color: #3f51b5 !important;
 }
 
 .w3-text-khaki,
 .w3-hover-text-khaki:hover {
-    color: #b4aa50 !important
+  color: #b4aa50 !important;
 }
 
 .w3-text-lime,
 .w3-hover-text-lime:hover {
-    color: #cddc39 !important
+  color: #cddc39 !important;
 }
 
 .w3-text-orange,
 .w3-hover-text-orange:hover {
-    color: #ff9800 !important
+  color: #ff9800 !important;
 }
 
 .w3-text-deep-orange,
 .w3-hover-text-deep-orange:hover {
-    color: #ff5722 !important
+  color: #ff5722 !important;
 }
 
 .w3-text-pink,
 .w3-hover-text-pink:hover {
-    color: #e91e63 !important
+  color: #e91e63 !important;
 }
 
 .w3-text-purple,
 .w3-hover-text-purple:hover {
-    color: #9c27b0 !important
+  color: #9c27b0 !important;
 }
 
 .w3-text-deep-purple,
 .w3-hover-text-deep-purple:hover {
-    color: #673ab7 !important
+  color: #673ab7 !important;
 }
 
 .w3-text-red,
 .w3-hover-text-red:hover {
-    color: #f44336 !important
+  color: #f44336 !important;
 }
 
 .w3-text-sand,
 .w3-hover-text-sand:hover {
-    color: #fdf5e6 !important
+  color: #fdf5e6 !important;
 }
 
 .w3-text-teal,
 .w3-hover-text-teal:hover {
-    color: #009688 !important
+  color: #009688 !important;
 }
 
 .w3-text-yellow,
 .w3-hover-text-yellow:hover {
-    color: #d2be0e !important
+  color: #d2be0e !important;
 }
 
 .w3-text-white,
 .w3-hover-text-white:hover {
-    color: #fff !important
+  color: #fff !important;
 }
 
 .w3-text-black,
 .w3-hover-text-black:hover {
-    color: #000 !important
+  color: #000 !important;
 }
 
 .w3-text-grey,
 .w3-hover-text-grey:hover,
 .w3-text-gray,
 .w3-hover-text-gray:hover {
-    color: #757575 !important
+  color: #757575 !important;
 }
 
 .w3-text-light-grey,
 .w3-hover-text-light-grey:hover,
 .w3-text-light-gray,
 .w3-hover-text-light-gray:hover {
-    color: #f1f1f1 !important
+  color: #f1f1f1 !important;
 }
 
 .w3-text-dark-grey,
 .w3-hover-text-dark-grey:hover,
 .w3-text-dark-gray,
 .w3-hover-text-dark-gray:hover {
-    color: #3a3a3a !important
+  color: #3a3a3a !important;
 }
 
 .w3-border-amber,
 .w3-hover-border-amber:hover {
-    border-color: #ffc107 !important
+  border-color: #ffc107 !important;
 }
 
 .w3-border-aqua,
 .w3-hover-border-aqua:hover {
-    border-color: #00ffff !important
+  border-color: #00ffff !important;
 }
 
 .w3-border-blue,
 .w3-hover-border-blue:hover {
-    border-color: #2196F3 !important
+  border-color: #2196f3 !important;
 }
 
 .w3-border-light-blue,
 .w3-hover-border-light-blue:hover {
-    border-color: #87CEEB !important
+  border-color: #87ceeb !important;
 }
 
 .w3-border-brown,
 .w3-hover-border-brown:hover {
-    border-color: #795548 !important
+  border-color: #795548 !important;
 }
 
 .w3-border-cyan,
 .w3-hover-border-cyan:hover {
-    border-color: #00bcd4 !important
+  border-color: #00bcd4 !important;
 }
 
 .w3-border-blue-grey,
 .w3-hover-border-blue-grey:hover,
 .w3-border-blue-gray,
 .w3-hover-border-blue-gray:hover {
-    border-color: #607d8b !important
+  border-color: #607d8b !important;
 }
 
 .w3-border-green,
 .w3-hover-border-green:hover {
-    border-color: #4CAF50 !important
+  border-color: #4caf50 !important;
 }
 
 .w3-border-light-green,
 .w3-hover-border-light-green:hover {
-    border-color: #8bc34a !important
+  border-color: #8bc34a !important;
 }
 
 .w3-border-indigo,
 .w3-hover-border-indigo:hover {
-    border-color: #3f51b5 !important
+  border-color: #3f51b5 !important;
 }
 
 .w3-border-khaki,
 .w3-hover-border-khaki:hover {
-    border-color: #f0e68c !important
+  border-color: #f0e68c !important;
 }
 
 .w3-border-lime,
 .w3-hover-border-lime:hover {
-    border-color: #cddc39 !important
+  border-color: #cddc39 !important;
 }
 
 .w3-border-orange,
 .w3-hover-border-orange:hover {
-    border-color: #ff9800 !important
+  border-color: #ff9800 !important;
 }
 
 .w3-border-deep-orange,
 .w3-hover-border-deep-orange:hover {
-    border-color: #ff5722 !important
+  border-color: #ff5722 !important;
 }
 
 .w3-border-pink,
 .w3-hover-border-pink:hover {
-    border-color: #e91e63 !important
+  border-color: #e91e63 !important;
 }
 
 .w3-border-purple,
 .w3-hover-border-purple:hover {
-    border-color: #9c27b0 !important
+  border-color: #9c27b0 !important;
 }
 
 .w3-border-deep-purple,
 .w3-hover-border-deep-purple:hover {
-    border-color: #673ab7 !important
+  border-color: #673ab7 !important;
 }
 
 .w3-border-red,
 .w3-hover-border-red:hover {
-    border-color: #f44336 !important
+  border-color: #f44336 !important;
 }
 
 .w3-border-sand,
 .w3-hover-border-sand:hover {
-    border-color: #fdf5e6 !important
+  border-color: #fdf5e6 !important;
 }
 
 .w3-border-teal,
 .w3-hover-border-teal:hover {
-    border-color: #009688 !important
+  border-color: #009688 !important;
 }
 
 .w3-border-yellow,
 .w3-hover-border-yellow:hover {
-    border-color: #ffeb3b !important
+  border-color: #ffeb3b !important;
 }
 
 .w3-border-white,
 .w3-hover-border-white:hover {
-    border-color: #fff !important
+  border-color: #fff !important;
 }
 
 .w3-border-black,
 .w3-hover-border-black:hover {
-    border-color: #000 !important
+  border-color: #000 !important;
 }
 
 .w3-border-grey,
 .w3-hover-border-grey:hover,
 .w3-border-gray,
 .w3-hover-border-gray:hover {
-    border-color: #9e9e9e !important
+  border-color: #9e9e9e !important;
 }
 
 .w3-border-light-grey,
 .w3-hover-border-light-grey:hover,
 .w3-border-light-gray,
 .w3-hover-border-light-gray:hover {
-    border-color: #f1f1f1 !important
+  border-color: #f1f1f1 !important;
 }
 
 .w3-border-dark-grey,
 .w3-hover-border-dark-grey:hover,
 .w3-border-dark-gray,
 .w3-hover-border-dark-gray:hover {
-    border-color: #616161 !important
+  border-color: #616161 !important;
 }
 
 .w3-border-pale-red,
 .w3-hover-border-pale-red:hover {
-    border-color: #ffe7e7 !important
+  border-color: #ffe7e7 !important;
 }
 
 .w3-border-pale-green,
 .w3-hover-border-pale-green:hover {
-    border-color: #e7ffe7 !important
+  border-color: #e7ffe7 !important;
 }
 
 .w3-border-pale-yellow,
 .w3-hover-border-pale-yellow:hover {
-    border-color: #ffffcc !important
+  border-color: #ffffcc !important;
 }
 
 .w3-border-pale-blue,
 .w3-hover-border-pale-blue:hover {
-    border-color: #e7ffff !important
-}
\ No newline at end of file
+  border-color: #e7ffff !important;
+}
+
+.input-image {
+  /* visibility: hidden etc. wont work */
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+
+.input-image:focus + label {
+  /* keyboard navigation */
+  outline: 1px dotted #000;
+  outline: -webkit-focus-ring-color auto 5px;
+}
+
+.input-image + label * {
+  pointer-events: none;
+}
diff --git a/src/app/components/vendors/create-vendors/create-vendors.component.html b/src/app/components/vendors/create-vendors/create-vendors.component.html
index 5f27208..3187213 100644
--- a/src/app/components/vendors/create-vendors/create-vendors.component.html
+++ b/src/app/components/vendors/create-vendors/create-vendors.component.html
@@ -356,14 +356,16 @@
 <ng-template #chooseUserImage>
   <div class="modal-body text-center">
     <h5 class="text-dark font-weight-bold mb-4">Vui lòng chọn 1 ảnh</h5>
-    <input class="input-image" type="file" accept="image/*" (change)="onFileSelected($event)" />
+    <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileSelected($event)" />
+    <label class="btn btn-warning font-weight-normal" for="file">Chọn ảnh</label>
   </div>
 </ng-template>
 
 <ng-template #chooseShopImage>
   <div class="modal-body text-center">
     <h5 class="text-dark font-weight-bold mb-4">Vui lòng chọn 1 ảnh</h5>
-    <input class="input-image" type="file" accept="image/*" (change)="onShopFileSelected($event)" />
+    <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onShopFileSelected($event)" />
+    <label class="btn btn-warning font-weight-normal" for="file">Chọn ảnh</label>
   </div>
 </ng-template>
 
diff --git a/src/app/components/vendors/create-vendors/create-vendors.component.scss b/src/app/components/vendors/create-vendors/create-vendors.component.scss
index e6014bf..1032c8f 100644
--- a/src/app/components/vendors/create-vendors/create-vendors.component.scss
+++ b/src/app/components/vendors/create-vendors/create-vendors.component.scss
@@ -9,4 +9,24 @@
     .icon-holder-eye {
       color: #999a9b;
     }
+  }
+
+  .input-image {
+    /* visibility: hidden etc. wont work */
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+  
+  .input-image:focus + label {
+    /* keyboard navigation */
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+  
+  .input-image + label * {
+    pointer-events: none;
   }
\ No newline at end of file
diff --git a/src/app/components/vendors/edit-vendor/edit-vendor.component.html b/src/app/components/vendors/edit-vendor/edit-vendor.component.html
index a357904..b87cde9 100644
--- a/src/app/components/vendors/edit-vendor/edit-vendor.component.html
+++ b/src/app/components/vendors/edit-vendor/edit-vendor.component.html
@@ -328,7 +328,8 @@
 <ng-template #chooseUserImage>
     <div class="modal-body text-center">
         <h5 class="text-dark font-weight-bold mb-4">Vui lòng chọn 1 ảnh</h5>
-        <input class="input-image" type="file" accept="image/*" (change)="onFileSelected($event)" />
+        <input class="input-image" name="file" id="file" type="file" accept="image/*" (change)="onFileSelected($event)" />
+        <label class="btn btn-warning font-weight-normal" for="file">Chọn ảnh</label>
     </div>
 </ng-template>
 
diff --git a/src/app/components/vendors/edit-vendor/edit-vendor.component.scss b/src/app/components/vendors/edit-vendor/edit-vendor.component.scss
index e69de29..e949a7d 100644
--- a/src/app/components/vendors/edit-vendor/edit-vendor.component.scss
+++ b/src/app/components/vendors/edit-vendor/edit-vendor.component.scss
@@ -0,0 +1,19 @@
+.input-image {
+    /* visibility: hidden etc. wont work */
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+  }
+  
+  .input-image:focus + label {
+    /* keyboard navigation */
+    outline: 1px dotted #000;
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+  
+  .input-image + label * {
+    pointer-events: none;
+  }
\ No newline at end of file