diff --git a/packages/Webkul/Admin/src/Http/routes.php b/packages/Webkul/Admin/src/Http/routes.php
index ffa52dcad..a5df6357c 100644
--- a/packages/Webkul/Admin/src/Http/routes.php
+++ b/packages/Webkul/Admin/src/Http/routes.php
@@ -36,6 +36,8 @@ Route::group(['middleware' => ['web']], function () {
                 'redirect' => 'admin.session.create'
             ])->name('admin.session.destroy');
 
+            //orders page
+                
 
             // Dashboard Route
             Route::get('/dashboard', 'Webkul\Admin\Http\Controllers\DashboardController@index')->name('admin.dashboard.index');
diff --git a/packages/Webkul/Admin/src/Resources/assets/sass/app.scss b/packages/Webkul/Admin/src/Resources/assets/sass/app.scss
index 2235e587f..07fdc741d 100644
--- a/packages/Webkul/Admin/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Admin/src/Resources/assets/sass/app.scss
@@ -249,3 +249,28 @@ body {
 //         }
 //     }
 // }
+
+
+
+// admin dashboard css
+
+.dashboard-content {
+
+    .dashboard-stats {
+        display: flex;
+       
+    }
+
+    .graph-category {
+        display: flex;
+        margin-top: 25px;
+    }
+
+    .sale-stock {
+        display: flex;
+        margin-top: 25px;
+    }
+
+}
+
+// admin dashboard css ends here
diff --git a/packages/Webkul/Shop/src/Http/routes.php b/packages/Webkul/Shop/src/Http/routes.php
index ee38ccf4d..87784aa21 100644
--- a/packages/Webkul/Shop/src/Http/routes.php
+++ b/packages/Webkul/Shop/src/Http/routes.php
@@ -10,6 +10,7 @@ Route::group(['middleware' => ['web']], function () {
         'view' => 'shop::products.index'
     ]);
     
+    /* dummy routes */
     Route::view('/customer/order','shop::customers.account.orders.index');
 
     Route::view('/customer/checkout','shop::customers.checkout.index');
@@ -21,7 +22,7 @@ Route::group(['middleware' => ['web']], function () {
     Route::view('/customer/payment_method','shop::customers.checkout.payment-method');
 
     Route::view('/customer/payment_complete','shop::customers.checkout.complete');
-
+    /* dummy routes ends here */
 
     Route::view('/cart', 'shop::store.product.view.cart.index');
 
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index e64447c18..27701e2a7 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -169,6 +169,10 @@ body {
         }
     }
 
+    .search-suggestion {
+        display: none;
+    }
+
     .header-bottom {
         height: 48px;
         margin-left: auto;
@@ -1488,3 +1492,2022 @@ section.cart {
     }
 
 }
+
+// order page css start here
+
+.order {
+    margin-left: 5.5%;
+    margin-top: 1%;
+    width: 100%;
+
+    .order-section-head {
+        .order-number {
+            font-size: 28px;
+            color: #242424;
+            text-transform: capitalize;
+            text-align: left;
+        }
+
+        .order-cancel {
+            font-size: 17px;
+            margin-top: 1%;
+            color: #0031f0;
+            letter-spacing: -0.11px;
+            float: right;
+        }
+
+        .order-status {
+            margin-left: 20px;
+            font-size: 14px;
+            color: #FFFFFF;
+            letter-spacing: -0.12px;
+            padding: 5px 5px 5px 10px;
+            background: #2ED04C;
+            border-radius: 100px;
+        }
+
+        .horizontal-rule {
+            margin-top: 1.1%;
+            width: 100%;
+            height: 1px;
+            vertical-align: middle;
+            background: #e8e8e8;
+        }
+    }
+
+    .order-section-head-small {
+        display: none;
+    }
+
+    .payment-place {
+        font-size: 16px;
+        color: $profile-content-color;
+        margin-top: 1.4%;
+
+        .placed-on {
+            display: flex;
+            flex-direction: row;  
+    
+            .place-text {
+                width: 210px;
+
+                span {
+                    color: #5E5E5E;
+                    letter-spacing: -0.12px;  
+                    font-size: 16px;
+                }
+
+                .processing {
+                    display: none;
+                }
+            }
+
+            .place-date {
+               
+                span {
+                    color: #5E5E5E;
+                    letter-spacing: -0.12px;  
+                    font-size: 16px;
+                }
+            }
+        }
+
+        .payment-status {
+            display: flex;
+            flex-direction: row;  
+            margin-top: 22px;
+    
+            .payment-text {
+                width: 210px;
+
+                span {
+                    color: #5E5E5E;
+                    letter-spacing: -0.12px;  
+                    font-size: 16px;
+                }
+            }
+
+            .status {
+               
+                span {
+                    color: #5E5E5E;
+                    letter-spacing: -0.12px;  
+                    font-size: 16px;
+                }
+            }
+        }
+
+        .horizontal-rule {
+            margin-top: 1.1%;
+            width: 100%;
+            height: 1px;
+            vertical-align: middle;
+            background: #e8e8e8;
+        }
+    }
+
+    .order-details{
+        width:100%; 
+        margin-top: 2.5%;
+        margin-bottom: 2%;
+    
+        .detail{
+            font-size: 18px;
+            color: #8E8E8E;
+        }
+    }
+
+    .table {
+        tbody {
+            tr {
+                height: 50px;
+                border-bottom: 1pt solid #e7e7e7;
+            }
+            td {
+                padding : 16px;
+            }
+        } 
+    }
+
+    .total {
+        margin-top: 2%;
+        height: 130px;
+
+        .calculate {
+            width: 300px;
+            float: right;
+
+            .sub-total {
+            
+                span {
+                    font-size: 14px;  font-size: 14px;
+                    color: #3A3A3A;
+                    color: #3A3A3A;
+                }
+
+                .left {
+                    margin-left: 109px;
+                }
+
+                .middle {
+                    margin-right: 5px;
+                    margin-left: 5px;
+                }
+            }
+
+            .ship-handle {
+                margin-top: 5px;
+
+                span {
+                    font-size: 14px;
+                    color: #3A3A3A;
+                }
+    
+                .left {
+                    margin-left: 24px;
+                }
+    
+                .middle {
+                    margin-right: 5px;
+                    margin-left: 5px;
+                }
+            }
+
+            .discount {
+                margin-top: 5px;
+
+                span {
+                    font-size: 14px;  font-size: 14px;
+                    color: #3A3A3A;
+                }
+
+                .left {
+                    margin-left: 98px;
+                }
+
+                .middle {
+                    margin-right: 5px;
+                    margin-left: 5px;
+                }
+            }
+
+            .grand-total {
+                margin-top: 5px;
+
+                span {
+                    font-size: 14px;  font-size: 14px;
+                    color: #3A3A3A;
+                    font-weight: bold;
+                }
+
+                .left {
+                    margin-left: 87px;
+                }
+
+                .middle {
+                    margin-right: 5px;
+                    margin-left: 5px;
+                }
+            }
+
+            .due {
+                margin-top: 5px;
+
+                span {
+                    font-size: 14px;  font-size: 14px;
+                    color: #3A3A3A;
+                    font-weight: bold;
+                }
+
+                .left {
+                    margin-left: 101px;
+                }
+
+                .middle {
+                    margin-right: 5px;
+                    margin-left: 5px;
+                }
+            }
+        }
+    }
+
+    .product-config {
+        display: none;
+    }
+
+    .horizontal-rule {
+        width: 100%;
+        height: 1px;
+        vertical-align: middle;
+        background: #e8e8e8;
+    }
+    
+    .order-information {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-top: 2.3%;
+        
+        .order-address-method {
+            width : 250px;
+
+            .address-method{
+                font-size: 18px;
+                color: #8E8E8E;
+            }
+        }
+    
+        p {
+            font-size: 16px;
+            color: #3A3A3A;
+
+        }
+    }
+}
+
+// oder page css end here
+
+// responsive order page css start here
+
+@media all and (max-width: 480px) {
+
+    .order {
+        margin-left: 0%;
+
+        .order-section-head {
+            display: none;
+        }
+
+        .order-section-head-small {
+            display: block;
+            margin-top: -15px;
+            
+            span {  
+                display:inline-block;
+                width:33.3%;
+            }
+
+            .icon {
+                float: left;
+
+                img {
+                    margin-top: 11px;
+                }
+            }
+
+            .order-number {
+                text-align: center;
+                font-size: 16px;
+                color: #242424;
+                letter-spacing: -0.38px;
+                text-align: center;
+                margin-top: 13px;
+                margin-bottom: 13px;
+            }
+
+            .cancel {
+                float: right;
+                text-align: right;
+                font-size: 17px;
+                color: #0031F0;
+                letter-spacing: -0.11px;
+                margin-top: 13px;
+                margin-bottom: 13px;
+            }
+
+            .horizon-rule {
+                border: .5px solid #E8E8E8;
+                width: 150%;
+                margin-left: -10%;
+                margin-right: -10%;
+            }
+        }
+
+        .payment-place {
+            font-size: 16px;
+            color: $profile-content-color;
+            margin-top: 4%;
+
+            .placed-on {
+                display: flex;
+                flex-direction: column;  
+
+                .place-text {
+                    width:100%;
+
+                    span {
+                        font-size: 14px;
+                    }
+
+                    .processing {
+                        display: block;
+                        float: right;
+                        background: #2ED04C;
+                        height: 25px;
+                        border-radius: 100px;
+                        font-size: 14px;
+                        color: #FFFFFF;
+                        letter-spacing: -0.12px;
+                        width: 110px;
+                        text-align: center;
+                        padding-top: 3.5px;
+                        padding-left: 5px;
+                        margin-top: 3px;
+                    }
+                }
+
+                .place-date{
+                    margin-top: -5px;
+                }
+            }
+
+            .payment-status {
+                display: flex;
+                flex-direction: column;  
+               
+                .payment-text {
+            
+                    span {
+                        font-size: 14px;
+                    }
+                }
+
+                .status {
+                    margin-top: 2px;
+                }
+            }
+    
+            .horizontal-rule {
+                margin-top: 1.1%;
+                width: 100%;
+                height: 1px;
+                vertical-align: middle;
+                background: #e8e8e8;
+            }
+        }
+
+        .order-details{
+           display: none;
+        }
+
+        .total {
+            margin-top: 5%;
+            height: 130px;
+    
+            .calculate {
+                width: 100%;
+                float: left;
+               
+                .sub-total {
+
+                    .left {
+                        margin-left: 0px;
+                        width:100px;
+                    }
+
+                    .middle {
+                        display: none;
+                    }
+
+                    .right {
+                        float:right;
+                        width:25%;
+                    }
+                }
+    
+                .ship-handle {
+            
+                    .left {
+                        margin-left: 0px;
+                    }
+        
+                    .middle {
+                       display: none;
+                    }
+
+                    .right {
+                        float:right;
+                        width:25%;
+                    }
+                }
+    
+                .discount {
+                    
+                    .left {
+                        margin-left: 0px;
+                    }
+    
+                    .middle {
+                        display: none;
+                    }
+
+                    .right {
+                        float:right;
+                        width:25%;
+                    }
+                }
+    
+                .grand-total {
+                   
+                    .left {
+                        margin-left: 0px;
+                    }
+
+                    .middle {
+                        display: none;
+                    }
+
+                    .right {
+                        float:right;
+                        width:25%;
+                    }
+                }
+    
+                .due {
+                    
+                    .left {
+                        margin-left: 0px;
+                    }
+    
+                    .middle {
+                        display: none;
+                    }
+
+                    .right {
+                        float:right;
+                        width:25%;
+                    }
+                }
+            }
+        }
+
+        .horizontal-rule {
+            display: none;
+        }
+
+        .table {
+            display:none;
+        }
+        
+        .product-config {
+            border: 1px solid #E8E8E8;
+            height: 19%;
+            width:100%;
+            margin-top: 10px;   
+            display: block;
+
+            .product-attribute {
+                display: flex;
+                flex-direction: row; 
+        
+                .product-property {
+                    width: 30%;
+                    margin-top: 10px;
+                    margin-left: 5px;
+                    
+                    span {
+                        font-size: 14px;
+                        color: #5E5E5E;
+                        letter-spacing: -0.11px;
+                    }
+                }
+
+                .property-name {
+                    margin-top: 10px;
+                    width:50%;
+
+                    span {
+                        font-size: 16px;
+                        color: #5E5E5E;
+                        letter-spacing: -0.11px;
+                    }
+                }
+            }
+
+        }
+
+        .order-information {
+            flex-direction: column;
+           
+            .order-address-method {
+                width : 250px;
+            }
+
+            .order-address-method:nth-child(3) {
+                margin-top: 10px;
+            }
+
+            .order-address-method:nth-child(2) {
+                margin-top: 10px;
+            }
+
+            .order-address-method:nth-child(4) {
+                margin-top: 10px;
+            }
+
+        }
+    }
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+
+    .order {
+        margin-left: 0%;
+
+        .order-section-head {
+            display: none;
+        }
+
+        .order-section-head-small {
+            display: block;
+            margin-top: -15px;
+            
+            span {  
+                display:inline-block;
+                width:33.3%;
+            }
+
+            .icon {
+                float: left;
+
+                img {
+                    margin-top: 11px;
+                }
+            }
+
+            .order-number {
+                text-align: center;
+                font-size: 16px;
+                color: #242424;
+                letter-spacing: -0.38px;
+                text-align: center;
+                margin-top: 13px;
+                margin-bottom: 13px;
+            }
+
+            .cancel {
+                float: right;
+                text-align: right;
+                font-size: 17px;
+                color: #0031F0;
+                letter-spacing: -0.11px;
+                margin-top: 13px;
+                margin-bottom: 13px;
+            }
+
+            .horizon-rule {
+                border: .5px solid #E8E8E8;
+                width: 150%;
+                margin-left: -10%;
+                margin-right: -10%;
+            }
+        }
+
+        .payment-place {
+            font-size: 16px;
+            color: $profile-content-color;
+            margin-top: 4%;
+
+            .placed-on {
+                display: flex;
+                flex-direction: column;  
+
+                .place-text {
+                    width:100%;
+
+                    span {
+                        font-size: 14px;
+                    }
+
+                    .processing {
+                        display: block;
+                        float: right;
+                        background: #2ED04C;
+                        height: 25px;
+                        border-radius: 100px;
+                        font-size: 14px;
+                        color: #FFFFFF;
+                        letter-spacing: -0.12px;
+                        width: 110px;
+                        text-align: center;
+                        padding-top: 3.5px;
+                        padding-left: 5px;
+                        margin-top: 3px;
+                    }
+                }
+
+                .place-date{
+                    margin-top: -5px;
+                }
+            }
+
+            .payment-status {
+                display: flex;
+                flex-direction: column;  
+               
+                .payment-text {
+            
+                    span {
+                        font-size: 14px;
+                    }
+                }
+
+                .status {
+                    margin-top: 2px;
+                }
+            }
+    
+            .horizontal-rule {
+                margin-top: 1.1%;
+                width: 100%;
+                height: 1px;
+                vertical-align: middle;
+                background: #e8e8e8;
+            }
+        }
+
+        .order-details{
+           display: none;
+        }
+
+        .total {
+            margin-top: 5%;
+            height: 130px;
+    
+            .calculate {
+                width: 100%;
+                float: left;
+               
+                .sub-total {
+
+                    .left {
+                        margin-left: 0px;
+                        width:100px;
+                    }
+
+                    .middle {
+                        display: none;
+                    }
+
+                    .right {
+                        float:right;
+                        width:25%;
+                    }
+                }
+    
+                .ship-handle {
+            
+                    .left {
+                        margin-left: 0px;
+                    }
+        
+                    .middle {
+                       display: none;
+                    }
+
+                    .right {
+                        float:right;
+                        width:25%;
+                    }
+                }
+    
+                .discount {
+                    
+                    .left {
+                        margin-left: 0px;
+                    }
+    
+                    .middle {
+                        display: none;
+                    }
+
+                    .right {
+                        float:right;
+                        width:25%;
+                    }
+                }
+    
+                .grand-total {
+                   
+                    .left {
+                        margin-left: 0px;
+                    }
+
+                    .middle {
+                        display: none;
+                    }
+
+                    .right {
+                        float:right;
+                        width:25%;
+                    }
+                }
+    
+                .due {
+                    
+                    .left {
+                        margin-left: 0px;
+                    }
+    
+                    .middle {
+                        display: none;
+                    }
+
+                    .right {
+                        float:right;
+                        width:25%;
+                    }
+                }
+            }
+        }
+
+        .horizontal-rule {
+            display: none;
+        }
+
+        .table {
+            display:none;
+        }
+        
+        .product-config {
+            border: 1px solid #E8E8E8;
+            height: 19%;
+            width:100%;
+            margin-top: 10px;   
+            display: block;
+
+            .product-attribute {
+                display: flex;
+                flex-direction: row; 
+        
+                .product-property {
+                    width: 30%;
+                    margin-top: 10px;
+                    margin-left: 5px;
+                    
+                    span {
+                        font-size: 14px;
+                        color: #5E5E5E;
+                        letter-spacing: -0.11px;
+                    }
+                }
+
+                .property-name {
+                    margin-top: 10px;
+                    width:50%;
+
+                    span {
+                        font-size: 16px;
+                        color: #5E5E5E;
+                        letter-spacing: -0.11px;
+                    }
+                }
+            }
+
+        }
+
+        .order-information {
+            flex-direction: column;
+           
+            .order-address-method {
+                width : 250px;
+            }
+
+            .order-address-method:nth-child(3) {
+                margin-top: 10px;
+            }
+
+            .order-address-method:nth-child(2) {
+                margin-top: 10px;
+            }
+
+            .order-address-method:nth-child(4) {
+                margin-top: 10px;
+            }
+
+        }
+    }
+
+}
+
+// responsive order css end here
+
+// checkout starts here
+
+.checkout-process{
+    display: flex;
+    flex-direction: row;    
+    width: 100%;
+    margin-top:3%;
+
+    .left-side {
+        width: 67%;
+        margin-right: 8%;
+        height: 100px;
+
+        .checkout-menu {
+            width: 100%;
+
+            ul.checkout-detail {
+                height: 60px;                    
+                display: inline-flex;
+                justify-content: space-between;
+                width: 100%;
+                padding: 5px;
+
+                
+                li {
+                    height: 48px;                    
+                    
+                    .wrapper {
+                        display:flex;
+
+                        .decorator {
+                            height: 48px;
+                            width: 48px;
+                            border: 1px solid black;
+                            border-radius: 50%;
+                            display: inline-flex;                            
+                            border: 1px solid #E8E8E8;
+                            img {
+                                margin: auto;
+                            }
+                        }
+    
+                        .decorator.active {
+                            border: 1px solid blue;
+                        }
+
+                        span {
+                            margin-left: 7px;
+                            margin-top: auto;
+                            margin-bottom: auto;
+                            font-size: 16px;
+                        }
+
+                    }                    
+                }
+            }
+
+            .horizontal-rule {
+                margin-top: 1%;
+                width: 100%;
+                height: 1px;
+                vertical-align: middle;
+                background: #e8e8e8;
+            }
+        }
+    }
+    
+    .right-side {
+        height: 300px;
+        width: 300px;
+
+        .purchase-detail {
+            margin-top:22px;
+            margin-left:18px;
+
+            .price {
+
+                span{
+                    margin-left: 3px;
+                    font-size: 16px;
+                    color: #242424;
+                    font-weight: bold;
+                }
+            }
+
+            
+            .item-detail {
+                margin-top:12px;
+
+                span {
+                    margin-left: 3px;
+
+                    label {
+                        font-size: 16px;
+                        color: #242424;
+                    }
+                    .right {
+                        float:right;
+                        font-size: 16px;
+                        color: #242424;
+                    }
+                }
+            }
+
+            .horizontal-rule {
+                margin-top: 6%;
+                width: 100%;
+                height: 1px;
+                vertical-align: middle;
+                background: #e8e8e8;
+            }
+
+            .payble-amount {
+                margin-top:12px;
+
+                span {
+                    margin-left: 3px;
+                    font-weight: bold;
+
+                    label {
+                        font-size: 16px;
+                        color: #242424;
+                        font-weight: bold;
+                    }
+                    .right {
+            
+                        float:right;
+                        font-size: 16px;
+                        color: #242424;
+                    }
+                }
+            }
+        }
+    }
+    
+}
+
+.order-info{
+    width: 67%;
+    margin-right: 6%;
+    height: 1350px;
+    margin-top: -190px;
+
+    .order-guest {
+
+        .order-text{
+            font-size: 24px;
+            color: #242424;
+            letter-spacing: -0.58px;
+            font-weight: bold;
+        }
+    }
+
+    .sign-in {
+        float:right;
+        background: #0031F0;
+        font-size: 14px;
+        color: #FFFFFF;
+        letter-spacing: -0.26px;
+        text-align: center;
+        height: 38px;
+        width: 103px;
+        border: none;
+    }
+
+
+    .control-group {
+        margin-top:30px;
+
+        label {
+            font-size:14px;
+        }
+
+        .control {
+            width:600px;
+        }
+
+        span {
+            color:red;
+        }
+       
+    }
+
+    .different-billing-addr {
+        margin-top: 5%;
+
+        span {
+            font-size: 16px;
+            color: #242424;
+            letter-spacing: -0.38px;
+        }
+    }
+
+    .horizontal-rule {
+        margin-top: 6%;
+        width: 100%;
+        height: 1px;
+        vertical-align: middle;
+        background: #e8e8e8;
+    }
+
+    .countinue-button {
+        margin-top: 3%;
+        
+        button { 
+            background: #0031F0;
+            font-size: 14px;
+            color: #FFFFFF;
+            letter-spacing: -0.26px;
+            text-align: center;
+            height: 38px;
+            width: 137px;
+            border: none;
+        }
+    }
+}
+
+// checkout ends here
+
+// responsive checkout start here
+
+@media all and (max-width: 480px) {
+
+    .checkout-process{
+        width: 100%;
+        margin-top:3%;
+
+        .left-side {
+            width: 100%;
+            margin-right: 0%;
+            height: 60px;
+            
+            .checkout-menu {
+                width: 100%;
+    
+                ul.checkout-detail {
+                    height: 60px;                    
+                    width: 100%;
+                    padding: 5px;
+    
+                    li {
+                        height: 48px;   
+                                   
+                        .wrapper {
+                            display:flex;
+    
+                            span {
+                               display: none;
+                            }
+    
+                        }                    
+                    }
+
+                    .line {
+                        margin-top: 23px;
+                        width: 100%;
+                        margin-left: 5px;
+                        margin-right: 5px;
+                        border: 1px solid #E7E7E7;
+                        height: 1px;
+                    }
+                }
+    
+                .horizontal-rule {
+                   display: none;
+                }
+            }
+        }
+
+        .right-side {
+            display:none;
+        }
+    }
+
+    .order-info{
+        width: 100%;
+        margin-right: 0%;
+        margin-top: 10px;
+        height:50px;
+        
+        .control-group {
+
+            .control{
+                width:100%;
+            }
+        }
+
+        .different-billing-addr {
+            margin-top: 5%;
+        }
+    
+        .horizontal-rule {
+            margin-top: 10%;
+        }
+    
+        .countinue-button {
+            margin-top: 8%;
+        }
+    }
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+
+    .checkout-process{
+        width: 100%;
+        margin-top:3%;
+
+        .left-side {
+            width: 100%;
+            margin-right: 0%;
+            height: 60px;
+            
+            .checkout-menu {
+                width: 100%;
+    
+                ul.checkout-detail {
+                    height: 60px;                    
+                    width: 100%;
+                    padding: 5px;
+    
+                    li {
+                        height: 48px;   
+                                   
+                        .wrapper {
+                            display:flex;
+    
+                            span {
+                               display: none;
+                            }
+    
+                        }                    
+                    }
+
+                    .line {
+                        margin-top: 23px;
+                        width: 100%;
+                        margin-left: 10px;
+                        margin-right: 10px;
+                        border: 1px solid #E7E7E7;
+                        height: 1px;
+                    }
+                }
+    
+                .horizontal-rule {
+                   display: none;
+                }
+            }
+        }
+
+        .right-side {
+            display:none;
+        }
+    }
+
+    .order-info{
+        width: 100%;
+        margin-right: 0%;
+        margin-top: 10px;
+        height:50px;
+        
+        .control-group {
+
+            .control{
+                width:100%;
+            }
+        }
+
+        .different-billing-addr {
+            margin-top: 3%;
+        }
+    
+        .horizontal-rule {
+            margin-top: 10%;
+        }
+    
+        .countinue-button {
+            margin-top: 5%;
+        }
+    }
+}
+
+// responsive checkout end here
+
+
+// sign of checkout starts here
+
+.signin-form{
+    width: 67%;
+    margin-right: 6%;
+    height: 520px;
+    margin-top: -190px;
+
+    .signin-guest {
+
+        .signin-text{
+            font-size: 24px;
+            color: #242424;
+            letter-spacing: -0.58px;
+            font-weight: bold;
+        }
+    }
+
+    .order-button {
+        float:right;
+        background: #0031F0;
+        font-size: 14px;
+        color: #FFFFFF;
+        letter-spacing: -0.26px;
+        text-align: center;
+        height: 38px;
+        width: 153px;
+        border: none;
+    }
+
+
+    .control-group {
+        margin-top:30px;
+
+        label {
+            font-size:14px;
+        }
+
+        .control {
+            width:600px;
+        }
+
+        span {
+            color:red;
+        }
+       
+    }
+
+    .forgot-pass {
+
+        span {
+            font-size: 16px;
+            color: #0031F0;
+            letter-spacing: -0.38px;
+        }
+    }
+
+    .horizontal-rule {
+        margin-top: 6%;
+        width: 100%;
+        height: 1px;
+        vertical-align: middle;
+        background: #e8e8e8;
+    }
+
+    .countinue-button {
+        margin-top: 3%;
+        
+        button { 
+            background: #0031F0;
+            font-size: 14px;
+            color: #FFFFFF;
+            letter-spacing: -0.26px;
+            text-align: center;
+            height: 38px;
+            width: 137px;
+            border: none;
+        }
+    }
+}
+
+// sign checkout end here
+
+
+//shipment start here
+
+.ship-method {
+    width: 67%;
+    margin-right: 6%;
+    height: 600px;
+    margin-top: -190px;
+
+    .ship-info {
+
+        .ship-text{
+            font-size: 24px;
+            color: #242424;
+            letter-spacing: -0.58px;
+            font-weight: bold;
+        }
+    }
+
+    .ship-price {
+        margin-top: 31px;
+
+        .price-checkbox {
+            display:flex;
+
+            span {
+                margin-left: 8px;
+                font-size: 16px;
+                color: #242424;
+                line-height: 22px;
+                font-weight: bold;
+            }
+
+        }  
+        
+        .price-checkbox-text {
+            margin-left: 25px;
+            width:580px;
+            height:44px;
+            margin-top: 4px;
+
+            b {
+               font-size: 16px;
+            }
+
+            span {
+                font-size: 16px;
+                color: #242424;
+                line-height: 22px;
+            }
+        }
+        
+      
+    }
+
+    .horizontal-rule {
+        margin-top: 7%;
+        width: 100%;
+        height: 1px;
+        vertical-align: middle;
+        background: #e8e8e8;
+    }
+
+    .countinue-button {
+        margin-top: 3%;
+        
+        button { 
+            background: #0031F0;
+            font-size: 14px;
+            color: #FFFFFF;
+            letter-spacing: -0.26px;
+            text-align: center;
+            height: 38px;
+            width: 137px;
+            border: none;
+        }
+    }
+}
+
+//shipment end here
+
+// payment method start here
+
+.payment-method {
+    width: 67%;
+    margin-right: 6%;
+    height: 600px;
+    margin-top: -190px;
+
+    .payment-info {
+
+        .payment-text{
+            font-size: 24px;
+            color: #242424;
+            letter-spacing: -0.58px;
+            font-weight: bold;
+        }
+    }
+
+    .payment-price {
+        margin-top: 31px;
+
+        .payment-checkbox {
+            display:flex;
+
+            span {
+                margin-left: 8px;
+                font-size: 16px;
+                color: #242424;
+                line-height: 22px;
+                font-weight: bold;
+            }
+
+        }  
+        
+        .payment-checkbox-text {
+            margin-left: 25px;
+            width:580px;
+            height:44px;
+            margin-top: 4px;
+
+            b {
+               font-size: 16px;
+            }
+
+            span {
+                font-size: 16px;
+                color: #242424;
+                line-height: 22px;
+            }
+        }
+        
+      
+    }
+
+    .horizontal-rule {
+        margin-top: 7%;
+        width: 100%;
+        height: 1px;
+        vertical-align: middle;
+        background: #e8e8e8;
+    }
+
+    .countinue-button {
+        margin-top: 3%;
+        
+        button { 
+            background: #0031F0;
+            font-size: 14px; .horizontal-rule {
+                margin-top: 7%;
+                width: 100%;
+                height: 1px;
+                vertical-align: middle;
+                background: #e8e8e8;
+            }
+            color: #FFFFFF;
+            letter-spacing: -0.26px; .horizontal-rule {
+                margin-top: 7%;
+                width: 100%;
+                height: 1px;
+                vertical-align: middle;
+                background: #e8e8e8;
+            }
+            text-align: center;
+            height: 38px;
+            width: 137px;
+            border: none;
+        }
+    }
+}
+
+// payment method end here
+
+
+// complete page start here
+ 
+.complete-page{
+    width:880px;
+    height: 1050px;
+
+    .order-summary {
+    
+        span {
+            font-size: 24px;
+            color: #242424;
+            font-weight: bold;
+            letter-spacing: -0.58px;
+        }
+    }
+
+    .address {
+        display: flex;
+        flex-direction: row; 
+        margin-top: 30px;
+        
+        .shipping-address {
+            height: 100px;
+            width: 415px;
+
+            .shipping-title {
+                
+                span {
+                    font-weight: bold;
+                    font-size: 16px;
+                    color: #242424
+                }
+            }
+
+            .shipping-content {
+                margin-top: 15px;
+                width: 175px;
+               
+                .addr {
+                    margin-top: 5px;
+
+                    span {
+                        font-size: 16px;
+                        color: #121212;
+                    }
+                }
+
+                .horizontal-rule {
+                    margin-top: 7%;
+                    width: 25px;
+                    height: 1px;
+                    vertical-align: middle;
+                    background: #121212;
+                }
+
+                .contact {
+                    margin-top: 10px;
+
+                    span {
+                        font-size: 16px;
+                        color: #121212;
+                    }
+                }
+            }
+        }
+
+        .billing-address {
+            width: 415px;
+           
+            .shipping-title {
+                
+                span {
+                    font-weight: bold;
+                    font-size: 16px;
+                    color: #242424
+                }
+            }
+
+            .shipping-content {
+                margin-top: 15px;
+                width: 175px;
+               
+                .addr {
+                    margin-top: 5px;
+
+                    span {
+                        font-size: 16px;
+                        color: #121212;
+                    }
+                }
+
+                .horizontal-rule {
+                    margin-top: 7%;
+                    width: 25px;
+                    height: 1px;
+                    vertical-align: middle;
+                    background: #121212;
+                }
+
+                .contact {
+                    margin-top: 10px;
+
+                    span {
+                        font-size: 16px;
+                        color: #121212;
+                    }
+                }
+            }
+        }
+    }
+
+    .product-detail {
+        height: 200px;
+        border: 1px solid #E8E8E8;
+        border-radius: 3px;
+        margin-top: 30px;
+        display: flex;
+        flex-direction: row; 
+
+        .product-image {
+            margin: 20px 0px 20px 20px;
+           
+            img {
+                height: 160px;
+                width:160px;
+            }
+        }
+        margin-top: 30px;
+        .product-desc {
+            margin-top: 20px;
+            margin-left: 10px;
+            
+            .product-title {
+
+                span {
+                    font-size: 18px;
+                    color: #242424;
+                    letter-spacing: -0.43px;
+                    font-weight: bold;
+                }
+            }
+
+            .price {
+                margin-top:11px;
+
+                span {
+
+                    label {
+                        font-size: 16px;
+                        color: #5E5E5E;
+                    }
+
+                    label.bold {
+                        margin-left:45px;
+                        font-weight: bold;
+                        font-size: 18px;
+                        color: #242424;
+                    }
+                }
+            }
+
+            .quantity {
+                margin-top:11px;
+
+                span {
+
+                    label {
+                        font-size: 16px;
+                        color: #5E5E5E;
+                    }
+
+                    label.quat-bold {
+                        margin-left:15px;
+                        font-weight: bold;
+                        font-size: 18px;
+                        color: #242424;
+                    }
+                }
+            }
+
+            .pro-attribute {
+                width:413px;
+                margin-top:14px;
+
+                span {
+                    
+                    font-size: 16px;
+                    color: #242424;
+                }
+            }
+        }
+    }
+
+    .order-description {
+        height: 140px;
+        border-radius: 3px;
+        margin-top: 30px;
+        display: flex;
+        flex-direction: row; 
+        justify-content: space-between;
+         
+        .payment {
+           
+            .shipping{
+                display: flex;
+                flex-direction: row; 
+
+                .pay-icon {
+                    height: 48px;
+                    width: 48px;
+                    border-radius: 50%;
+                    border: 1px solid #E8E8E8;
+    
+                    img {
+                        margin-left: 8px;
+                        margin-top: 8px;
+                    }
+    
+                    span {
+                        margin-left: 10px;
+                        font-size: 16px;
+                        color: #242424;
+                        letter-spacing: -0.38px;
+                    }
+                }
+
+                .shipping-text {
+                    display: flex;
+                    flex-direction: column; 
+
+                    .price {
+                        margin-top: 5px;
+                        margin-left: 5px;
+
+                        span {
+                            font-size: 16px;
+                            color: #242424;
+                            letter-spacing: -0.38px;
+                        }
+                    }
+
+                    .fedex-shipping {
+                        margin-left: 5px;
+                        
+                        span {
+                            font-size: 16px;
+                            color: #242424;
+                            letter-spacing: -0.38px;
+                        }
+                    }
+                }
+            }
+
+            .net-banking{
+                margin-top: 23px;
+                display: flex;
+                flex-direction: row; 
+
+                .pay-icon {
+                    height: 48px;
+                    width: 48px;
+                    border-radius: 50%;
+                    border: 1px solid #E8E8E8;
+    
+                    img {
+                        margin-left: 8px;
+                        margin-top: 8px;
+                    }
+                }
+
+                span {
+                    margin-left: 5px;
+                    margin-top: 15px;
+                    font-size: 16px;
+                    color: #242424;
+                    letter-spacing: -0.38px;
+                }
+            }
+        }
+
+        .product-bill {
+            height:200px;
+            width:300px;
+           
+            .sub-total {
+
+                span {
+                    font-size: 16px;
+                    color: #242424;
+                    letter-spacing: -0.38px;   
+                }
+
+                .right{
+                    float:right;
+                }
+            }
+
+            .charge-discount {
+                margin-top: 10px;
+
+                span {
+                    font-size: 16px;
+                    color: #242424;
+                    letter-spacing: -0.38px;   
+                }
+                
+                .right{
+                    float:right;
+                }
+            }
+
+            .horizontal-rule {
+                margin-top: 5%;
+                width: 100%;
+                height: 1px;
+                vertical-align: middle;
+                background: #e8e8e8;
+            }
+
+            .amount-pay {
+                margin-top: 15px;
+
+                span {
+                    font-size: 16px;
+                    color: #242424;
+                    letter-spacing: -0.38px;   
+                }
+                
+                .right{
+                    float:right;
+                }
+            }
+        }        
+    }
+
+    .horizontal-rule {
+        width: 100%;
+        height: 1px;
+        vertical-align: middle;
+        background: #e8e8e8;
+    }
+
+    .palce-order-button {
+        margin-top: 30px;
+
+        button {
+            width:137px;
+            height: 38px;
+            background: #0031F0;
+            font-size: 14px;
+            color: #FFFFFF;
+            letter-spacing: -0.26px;
+            text-align: center;
+            border:none;
+        }
+    }
+}
+
+// complete page end here 
+
+
+// header page responsive css start here
+
+@media all and (max-width: 480px) {
+
+    .header {
+        // border: 1px solid black;
+        margin-top: 16px;
+        margin-bottom: 21px;
+
+        .header-top {
+            margin-bottom: 16px;
+            display: flex;
+            max-width: 92%;
+            width: 100%;
+            margin-left: auto;
+            margin-right: auto;
+            // border: 1px solid indigo;
+            align-items: center;
+            justify-content: space-between;
+
+            div.left-content {
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                align-items: center;
+
+                ul.logo-container {
+                    margin-right: 12px;
+
+                    li {
+                        display: flex;
+                    }
+                }
+
+                ul.search-container {
+                    li.search-group {
+                        display: none;
+                    }
+                }
+            }
+
+            div.right-content {
+                display: none;
+            }
+
+            .right-responsive {
+                display: inherit;
+            }
+        }
+
+        .search-suggestion {
+            display: none;
+
+            .search-content {
+                border-top: 1px solid #e8e8e8;
+                border-bottom: 1px solid #e8e8e8;
+                height: 48px;
+
+                .icon.search-icon {
+                    margin-left: 15px;
+                    margin-top: 12px;
+                }
+
+                span {
+                    font-size: 16px;
+                    color: #242424;
+                    margin-bottom: -7px;
+                    margin-left: 5px;
+                }
+
+                .right {
+                    float: right;
+                    margin-right: 15px;
+                }
+            }
+
+            .suggestion {
+                margin-top: 14px;
+                height: 32px;
+                margin-bottom: 14px;
+                border-bottom: 1px solid #e8e8e8;
+                
+                span {
+                    font-size: 16px;
+                    color: #242424;
+                    margin-left: 48px;
+                }
+            }
+        }
+
+        .header-bottom {
+            height: 200px;
+            margin-left: auto;
+            margin-right: auto;
+            border-top: none;
+            border-bottom: none;
+            display: none;
+
+            ul.nav {
+                width: 100%;
+                height: 100px;
+            }
+    
+            .nav > li {
+                float: none;
+                border-bottom: 1px solid #e8e8e8;
+               
+                a {
+                    margin-left: 10px;
+                }
+
+                .dropdown-right-icon{
+                   float: right;
+                   margin-top: 5px;
+                   margin-right: 5px;
+                } 
+            }
+
+            .nav > li:first-child {
+                border-top: 1px solid #e8e8e8;
+            }
+    
+            .nav > li:last-child {
+                float:none;
+
+                span {
+                    font-size: 16px;
+                    color: #FF6472;
+                    letter-spacing: -0.38px;
+                }
+    
+                img {
+                    margin-left: 20px;
+                }
+            }
+    
+            /* submenu positioning*/
+    
+            .nav ul {
+                position: absolute;
+                white-space: nowrap;
+                border: 1px solid #B1B1B1;
+                background-color:white;
+                z-index: 1;
+                left: -99999em;
+            }
+    
+            .nav > li:hover > ul {
+                left: auto;
+                min-width: 100%;
+            }
+    
+            .nav > li li:hover > ul {
+                left: 100%;
+                margin-left: 1px;
+                top: -1px;
+            }
+    
+            .nav > li:hover > a:first-child:nth-last-child(2):before {
+                margin-top:-5px
+            }
+    
+            .nav li li > a:first-child:nth-last-child(2):before {
+                margin-top: -5px
+            }
+    
+            .nav li li:hover > a:first-child:nth-last-child(2):before {
+                right: 10px;
+            }
+        }
+    }
+
+}
+
+// header page responsive ends here
+
+
diff --git a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
index 6ccb7c819..2a7549353 100644
--- a/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/layouts/header/index.blade.php
@@ -105,6 +105,7 @@
     </div>
 
     
+    {{-- Triggered on responsive mode only --}}
     
     <div class="search-suggestion">
         <div class="search-content">
diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
index 289562d52..596ee7390 100644
--- a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
@@ -1022,3 +1022,254 @@ h2 {
         }
     }
 }
+
+
+
+// admin dashboard component  
+
+    .dashboard-card {
+        height: 100px;
+        width: 22%;
+        background: #FFFFFF;
+        border: 1px solid #E7E7E7;
+        box-shadow: 0 5px 10px 2px rgba(0,0,0,0.08);
+        border-radius: 5px;
+    
+        .visitor-content {
+            padding: 15px;
+    
+            .title {
+            
+                span {
+                    padding-top:10px;
+                    font-size: 14px;
+                    color: #A2A2A2;
+                    letter-spacing: -0.26px;
+                }
+            }
+            
+            .data {
+                padding-top: 3px;
+                
+                span {
+                    font-size: 32px;
+                    color: #0041FF;
+                    letter-spacing: -0.6px;
+    
+                    img {
+                        margin-left: 75px;
+                        height: 24px;
+                        width:24px;
+                    }
+                }
+    
+                span.right {
+                    padding-top: 12px;
+                    float: right;
+                    font-size: 14px;
+                    color: #8E8E8E;
+                    letter-spacing: -0.7px;
+                }
+            }
+        }
+    }
+    
+    .dashboard-card:nth-last-child(1) {
+        margin-left: 30px;
+    } 
+    
+    .dashboard-card:nth-last-child(2) {
+        margin-left: 30px;
+    } 
+    
+    .dashboard-card:nth-last-child(3) {
+        margin-left: 30px;
+    } 
+    
+    
+    .dashboard-graph {
+        height: 413px;
+        width: 70.5%;
+        background: #FFFFFF;
+        border: 1px solid #E7E7E7;
+        box-shadow: 0 5px 10px 2px rgba(0,0,0,0.08);
+        border-radius: 2px;
+    }
+    
+    .performing-category {
+        height: 413px;
+        width: 22%;
+        margin-left: 30px;
+        background: #FFFFFF;
+        border: 1px solid #E7E7E7;
+        box-shadow: 0 5px 10px 2px rgba(0,0,0,0.08);
+        border-radius: 2px;
+    
+        .category {
+            margin-left: 20px;
+            margin-top: 20px;
+    
+            .title {
+    
+                span {
+                    font-size: 14px;
+                    color: #A2A2A2;
+                    letter-spacing: -0.26px;
+                }
+            }
+    
+            .category-info {
+                margin-top: 30px;
+              
+    
+                ul {
+    
+                    li {
+    
+                        .category-list {
+                            margin-top: 10px;
+    
+                            .cat-name {
+    
+                                span {
+                                    font-size: 16px;
+                                    color: #0041FF;
+                                    letter-spacing: -0.3px;
+    
+                                }
+    
+                                .right-side {
+                                    float: right;
+                                    margin-right: 12px;
+                                    margin-top: 10px;
+                                    height: 20px;
+                                    width: 20px;
+                                }
+                            }
+    
+                            .product-info {
+                                margin-top: 5px;
+    
+                                span {
+                                    font-size: 16px;
+                                    color: #3A3A3A;
+                                    letter-spacing: -0.3px;
+                                }
+                            }
+    
+                            .horizon-rule {
+                                margin-top: 8px;
+                                border: .7px solid #D8D8D8;
+                            }
+                        }
+                    }
+    
+                    li:last-child {
+                        
+                        .category-list {
+                            .horizon-rule {
+                                display: none;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+    .sale {
+        height: 465px;
+        width: 30.1%;
+        background: #FFFFFF;
+        border: 1px solid #E7E7E7;
+        box-shadow: 0 5px 10px 2px rgba(0,0,0,0.08);
+        border-radius: 2px;
+    
+        .top-sale {
+            margin-left: 20px;
+            margin-top: 27px;
+        
+            .title {
+    
+                span {
+                    font-size: 14px;
+                    color: #A2A2A2;
+                    letter-spacing: -0.26px;
+                }
+            }
+    
+            .sale-info {
+    
+                ul {
+    
+                    li {
+    
+                        .pro-attribute{
+                            display: flex;
+                            margin-top: 10px;
+    
+                            .pro-img {
+                                height: 60px;
+                                width: 60px;
+                                border: 1px solid green;
+                            }
+        
+                            .product-description {
+                                margin-left: 15px;
+                                margin-top: 8px;
+                                width: 75%;
+    
+                                .product-name {
+    
+                                    span {
+                                        font-size: 14px;
+                                        color: #0041FF;
+                                        letter-spacing: -0.26px;
+                                    }
+    
+                                    .right-side {
+                                        float: right;
+                                        margin-top: 10px;
+                                        height: 20px;
+                                        width: 20px;
+                                    }
+                                }
+    
+                                .product-info {
+    
+                                    span {
+                                        font-size: 14px;
+                                        color: #3A3A3A;
+                                        letter-spacing: -0.26px;
+                                    }
+                                }
+                            }
+                        }
+    
+                        .horizontal-rule {
+                            border: .5px solid #A2A2A2;
+                            opacity: 0.2;
+                            margin-top: 10px;
+                        }
+                    }
+    
+                    li:last-child {
+                        .horizontal-rule {
+                            display: none;
+                        } 
+                    }
+                }
+            }
+        }
+    }
+    
+    .sale:nth-last-child(1) {
+        margin-left: 31px;
+    } 
+    
+    .sale:nth-last-child(2) {
+        margin-left: 31px;
+    } 
+    
+
+    // admin dashboard css ends here
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index bb2659709..ba28f05a1 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -228,6 +228,10 @@ body {
   width: 24px;
 }
 
+.header .search-suggestion {
+  display: none;
+}
+
 .header .header-bottom {
   height: 48px;
   margin-left: auto;
@@ -1592,3 +1596,1827 @@ section.cart .cart-content .right-side .coupon-section .after-coupon-amount .amo
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   grid-gap: 10px;
 }
+
+.order {
+  margin-left: 5.5%;
+  margin-top: 1%;
+  width: 100%;
+}
+
+.order .order-section-head .order-number {
+  font-size: 28px;
+  color: #242424;
+  text-transform: capitalize;
+  text-align: left;
+}
+
+.order .order-section-head .order-cancel {
+  font-size: 17px;
+  margin-top: 1%;
+  color: #0031f0;
+  letter-spacing: -0.11px;
+  float: right;
+}
+
+.order .order-section-head .order-status {
+  margin-left: 20px;
+  font-size: 14px;
+  color: #FFFFFF;
+  letter-spacing: -0.12px;
+  padding: 5px 5px 5px 10px;
+  background: #2ED04C;
+  border-radius: 100px;
+}
+
+.order .order-section-head .horizontal-rule {
+  margin-top: 1.1%;
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #e8e8e8;
+}
+
+.order .order-section-head-small {
+  display: none;
+}
+
+.order .payment-place {
+  font-size: 16px;
+  color: #5e5e5e;
+  margin-top: 1.4%;
+}
+
+.order .payment-place .placed-on {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+
+.order .payment-place .placed-on .place-text {
+  width: 210px;
+}
+
+.order .payment-place .placed-on .place-text span {
+  color: #5E5E5E;
+  letter-spacing: -0.12px;
+  font-size: 16px;
+}
+
+.order .payment-place .placed-on .place-text .processing {
+  display: none;
+}
+
+.order .payment-place .placed-on .place-date span {
+  color: #5E5E5E;
+  letter-spacing: -0.12px;
+  font-size: 16px;
+}
+
+.order .payment-place .payment-status {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  margin-top: 22px;
+}
+
+.order .payment-place .payment-status .payment-text {
+  width: 210px;
+}
+
+.order .payment-place .payment-status .payment-text span {
+  color: #5E5E5E;
+  letter-spacing: -0.12px;
+  font-size: 16px;
+}
+
+.order .payment-place .payment-status .status span {
+  color: #5E5E5E;
+  letter-spacing: -0.12px;
+  font-size: 16px;
+}
+
+.order .payment-place .horizontal-rule {
+  margin-top: 1.1%;
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #e8e8e8;
+}
+
+.order .order-details {
+  width: 100%;
+  margin-top: 2.5%;
+  margin-bottom: 2%;
+}
+
+.order .order-details .detail {
+  font-size: 18px;
+  color: #8E8E8E;
+}
+
+.order .table tbody tr {
+  height: 50px;
+  border-bottom: 1pt solid #e7e7e7;
+}
+
+.order .table tbody td {
+  padding: 16px;
+}
+
+.order .total {
+  margin-top: 2%;
+  height: 130px;
+}
+
+.order .total .calculate {
+  width: 300px;
+  float: right;
+}
+
+.order .total .calculate .sub-total span {
+  font-size: 14px;
+  font-size: 14px;
+  color: #3A3A3A;
+  color: #3A3A3A;
+}
+
+.order .total .calculate .sub-total .left {
+  margin-left: 109px;
+}
+
+.order .total .calculate .sub-total .middle {
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.order .total .calculate .ship-handle {
+  margin-top: 5px;
+}
+
+.order .total .calculate .ship-handle span {
+  font-size: 14px;
+  color: #3A3A3A;
+}
+
+.order .total .calculate .ship-handle .left {
+  margin-left: 24px;
+}
+
+.order .total .calculate .ship-handle .middle {
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.order .total .calculate .discount {
+  margin-top: 5px;
+}
+
+.order .total .calculate .discount span {
+  font-size: 14px;
+  font-size: 14px;
+  color: #3A3A3A;
+}
+
+.order .total .calculate .discount .left {
+  margin-left: 98px;
+}
+
+.order .total .calculate .discount .middle {
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.order .total .calculate .grand-total {
+  margin-top: 5px;
+}
+
+.order .total .calculate .grand-total span {
+  font-size: 14px;
+  font-size: 14px;
+  color: #3A3A3A;
+  font-weight: bold;
+}
+
+.order .total .calculate .grand-total .left {
+  margin-left: 87px;
+}
+
+.order .total .calculate .grand-total .middle {
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.order .total .calculate .due {
+  margin-top: 5px;
+}
+
+.order .total .calculate .due span {
+  font-size: 14px;
+  font-size: 14px;
+  color: #3A3A3A;
+  font-weight: bold;
+}
+
+.order .total .calculate .due .left {
+  margin-left: 101px;
+}
+
+.order .total .calculate .due .middle {
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.order .product-config {
+  display: none;
+}
+
+.order .horizontal-rule {
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #e8e8e8;
+}
+
+.order .order-information {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  margin-top: 2.3%;
+}
+
+.order .order-information .order-address-method {
+  width: 250px;
+}
+
+.order .order-information .order-address-method .address-method {
+  font-size: 18px;
+  color: #8E8E8E;
+}
+
+.order .order-information p {
+  font-size: 16px;
+  color: #3A3A3A;
+}
+
+@media all and (max-width: 480px) {
+  .order {
+    margin-left: 0%;
+  }
+  .order .order-section-head {
+    display: none;
+  }
+  .order .order-section-head-small {
+    display: block;
+    margin-top: -15px;
+  }
+  .order .order-section-head-small span {
+    display: inline-block;
+    width: 33.3%;
+  }
+  .order .order-section-head-small .icon {
+    float: left;
+  }
+  .order .order-section-head-small .icon img {
+    margin-top: 11px;
+  }
+  .order .order-section-head-small .order-number {
+    text-align: center;
+    font-size: 16px;
+    color: #242424;
+    letter-spacing: -0.38px;
+    text-align: center;
+    margin-top: 13px;
+    margin-bottom: 13px;
+  }
+  .order .order-section-head-small .cancel {
+    float: right;
+    text-align: right;
+    font-size: 17px;
+    color: #0031F0;
+    letter-spacing: -0.11px;
+    margin-top: 13px;
+    margin-bottom: 13px;
+  }
+  .order .order-section-head-small .horizon-rule {
+    border: .5px solid #E8E8E8;
+    width: 150%;
+    margin-left: -10%;
+    margin-right: -10%;
+  }
+  .order .payment-place {
+    font-size: 16px;
+    color: #5e5e5e;
+    margin-top: 4%;
+  }
+  .order .payment-place .placed-on {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  .order .payment-place .placed-on .place-text {
+    width: 100%;
+  }
+  .order .payment-place .placed-on .place-text span {
+    font-size: 14px;
+  }
+  .order .payment-place .placed-on .place-text .processing {
+    display: block;
+    float: right;
+    background: #2ED04C;
+    height: 25px;
+    border-radius: 100px;
+    font-size: 14px;
+    color: #FFFFFF;
+    letter-spacing: -0.12px;
+    width: 110px;
+    text-align: center;
+    padding-top: 3.5px;
+    padding-left: 5px;
+    margin-top: 3px;
+  }
+  .order .payment-place .placed-on .place-date {
+    margin-top: -5px;
+  }
+  .order .payment-place .payment-status {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  .order .payment-place .payment-status .payment-text span {
+    font-size: 14px;
+  }
+  .order .payment-place .payment-status .status {
+    margin-top: 2px;
+  }
+  .order .payment-place .horizontal-rule {
+    margin-top: 1.1%;
+    width: 100%;
+    height: 1px;
+    vertical-align: middle;
+    background: #e8e8e8;
+  }
+  .order .order-details {
+    display: none;
+  }
+  .order .total {
+    margin-top: 5%;
+    height: 130px;
+  }
+  .order .total .calculate {
+    width: 100%;
+    float: left;
+  }
+  .order .total .calculate .sub-total .left {
+    margin-left: 0px;
+    width: 100px;
+  }
+  .order .total .calculate .sub-total .middle {
+    display: none;
+  }
+  .order .total .calculate .sub-total .right {
+    float: right;
+    width: 25%;
+  }
+  .order .total .calculate .ship-handle .left {
+    margin-left: 0px;
+  }
+  .order .total .calculate .ship-handle .middle {
+    display: none;
+  }
+  .order .total .calculate .ship-handle .right {
+    float: right;
+    width: 25%;
+  }
+  .order .total .calculate .discount .left {
+    margin-left: 0px;
+  }
+  .order .total .calculate .discount .middle {
+    display: none;
+  }
+  .order .total .calculate .discount .right {
+    float: right;
+    width: 25%;
+  }
+  .order .total .calculate .grand-total .left {
+    margin-left: 0px;
+  }
+  .order .total .calculate .grand-total .middle {
+    display: none;
+  }
+  .order .total .calculate .grand-total .right {
+    float: right;
+    width: 25%;
+  }
+  .order .total .calculate .due .left {
+    margin-left: 0px;
+  }
+  .order .total .calculate .due .middle {
+    display: none;
+  }
+  .order .total .calculate .due .right {
+    float: right;
+    width: 25%;
+  }
+  .order .horizontal-rule {
+    display: none;
+  }
+  .order .table {
+    display: none;
+  }
+  .order .product-config {
+    border: 1px solid #E8E8E8;
+    height: 19%;
+    width: 100%;
+    margin-top: 10px;
+    display: block;
+  }
+  .order .product-config .product-attribute {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+  }
+  .order .product-config .product-attribute .product-property {
+    width: 30%;
+    margin-top: 10px;
+    margin-left: 5px;
+  }
+  .order .product-config .product-attribute .product-property span {
+    font-size: 14px;
+    color: #5E5E5E;
+    letter-spacing: -0.11px;
+  }
+  .order .product-config .product-attribute .property-name {
+    margin-top: 10px;
+    width: 50%;
+  }
+  .order .product-config .product-attribute .property-name span {
+    font-size: 16px;
+    color: #5E5E5E;
+    letter-spacing: -0.11px;
+  }
+  .order .order-information {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  .order .order-information .order-address-method {
+    width: 250px;
+  }
+  .order .order-information .order-address-method:nth-child(3) {
+    margin-top: 10px;
+  }
+  .order .order-information .order-address-method:nth-child(2) {
+    margin-top: 10px;
+  }
+  .order .order-information .order-address-method:nth-child(4) {
+    margin-top: 10px;
+  }
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+  .order {
+    margin-left: 0%;
+  }
+  .order .order-section-head {
+    display: none;
+  }
+  .order .order-section-head-small {
+    display: block;
+    margin-top: -15px;
+  }
+  .order .order-section-head-small span {
+    display: inline-block;
+    width: 33.3%;
+  }
+  .order .order-section-head-small .icon {
+    float: left;
+  }
+  .order .order-section-head-small .icon img {
+    margin-top: 11px;
+  }
+  .order .order-section-head-small .order-number {
+    text-align: center;
+    font-size: 16px;
+    color: #242424;
+    letter-spacing: -0.38px;
+    text-align: center;
+    margin-top: 13px;
+    margin-bottom: 13px;
+  }
+  .order .order-section-head-small .cancel {
+    float: right;
+    text-align: right;
+    font-size: 17px;
+    color: #0031F0;
+    letter-spacing: -0.11px;
+    margin-top: 13px;
+    margin-bottom: 13px;
+  }
+  .order .order-section-head-small .horizon-rule {
+    border: .5px solid #E8E8E8;
+    width: 150%;
+    margin-left: -10%;
+    margin-right: -10%;
+  }
+  .order .payment-place {
+    font-size: 16px;
+    color: #5e5e5e;
+    margin-top: 4%;
+  }
+  .order .payment-place .placed-on {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  .order .payment-place .placed-on .place-text {
+    width: 100%;
+  }
+  .order .payment-place .placed-on .place-text span {
+    font-size: 14px;
+  }
+  .order .payment-place .placed-on .place-text .processing {
+    display: block;
+    float: right;
+    background: #2ED04C;
+    height: 25px;
+    border-radius: 100px;
+    font-size: 14px;
+    color: #FFFFFF;
+    letter-spacing: -0.12px;
+    width: 110px;
+    text-align: center;
+    padding-top: 3.5px;
+    padding-left: 5px;
+    margin-top: 3px;
+  }
+  .order .payment-place .placed-on .place-date {
+    margin-top: -5px;
+  }
+  .order .payment-place .payment-status {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  .order .payment-place .payment-status .payment-text span {
+    font-size: 14px;
+  }
+  .order .payment-place .payment-status .status {
+    margin-top: 2px;
+  }
+  .order .payment-place .horizontal-rule {
+    margin-top: 1.1%;
+    width: 100%;
+    height: 1px;
+    vertical-align: middle;
+    background: #e8e8e8;
+  }
+  .order .order-details {
+    display: none;
+  }
+  .order .total {
+    margin-top: 5%;
+    height: 130px;
+  }
+  .order .total .calculate {
+    width: 100%;
+    float: left;
+  }
+  .order .total .calculate .sub-total .left {
+    margin-left: 0px;
+    width: 100px;
+  }
+  .order .total .calculate .sub-total .middle {
+    display: none;
+  }
+  .order .total .calculate .sub-total .right {
+    float: right;
+    width: 25%;
+  }
+  .order .total .calculate .ship-handle .left {
+    margin-left: 0px;
+  }
+  .order .total .calculate .ship-handle .middle {
+    display: none;
+  }
+  .order .total .calculate .ship-handle .right {
+    float: right;
+    width: 25%;
+  }
+  .order .total .calculate .discount .left {
+    margin-left: 0px;
+  }
+  .order .total .calculate .discount .middle {
+    display: none;
+  }
+  .order .total .calculate .discount .right {
+    float: right;
+    width: 25%;
+  }
+  .order .total .calculate .grand-total .left {
+    margin-left: 0px;
+  }
+  .order .total .calculate .grand-total .middle {
+    display: none;
+  }
+  .order .total .calculate .grand-total .right {
+    float: right;
+    width: 25%;
+  }
+  .order .total .calculate .due .left {
+    margin-left: 0px;
+  }
+  .order .total .calculate .due .middle {
+    display: none;
+  }
+  .order .total .calculate .due .right {
+    float: right;
+    width: 25%;
+  }
+  .order .horizontal-rule {
+    display: none;
+  }
+  .order .table {
+    display: none;
+  }
+  .order .product-config {
+    border: 1px solid #E8E8E8;
+    height: 19%;
+    width: 100%;
+    margin-top: 10px;
+    display: block;
+  }
+  .order .product-config .product-attribute {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+  }
+  .order .product-config .product-attribute .product-property {
+    width: 30%;
+    margin-top: 10px;
+    margin-left: 5px;
+  }
+  .order .product-config .product-attribute .product-property span {
+    font-size: 14px;
+    color: #5E5E5E;
+    letter-spacing: -0.11px;
+  }
+  .order .product-config .product-attribute .property-name {
+    margin-top: 10px;
+    width: 50%;
+  }
+  .order .product-config .product-attribute .property-name span {
+    font-size: 16px;
+    color: #5E5E5E;
+    letter-spacing: -0.11px;
+  }
+  .order .order-information {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+  .order .order-information .order-address-method {
+    width: 250px;
+  }
+  .order .order-information .order-address-method:nth-child(3) {
+    margin-top: 10px;
+  }
+  .order .order-information .order-address-method:nth-child(2) {
+    margin-top: 10px;
+  }
+  .order .order-information .order-address-method:nth-child(4) {
+    margin-top: 10px;
+  }
+}
+
+.checkout-process {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  width: 100%;
+  margin-top: 3%;
+}
+
+.checkout-process .left-side {
+  width: 67%;
+  margin-right: 8%;
+  height: 100px;
+}
+
+.checkout-process .left-side .checkout-menu {
+  width: 100%;
+}
+
+.checkout-process .left-side .checkout-menu ul.checkout-detail {
+  height: 60px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  width: 100%;
+  padding: 5px;
+}
+
+.checkout-process .left-side .checkout-menu ul.checkout-detail li {
+  height: 48px;
+}
+
+.checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper .decorator {
+  height: 48px;
+  width: 48px;
+  border: 1px solid black;
+  border-radius: 50%;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  border: 1px solid #E8E8E8;
+}
+
+.checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper .decorator img {
+  margin: auto;
+}
+
+.checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper .decorator.active {
+  border: 1px solid blue;
+}
+
+.checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper span {
+  margin-left: 7px;
+  margin-top: auto;
+  margin-bottom: auto;
+  font-size: 16px;
+}
+
+.checkout-process .left-side .checkout-menu .horizontal-rule {
+  margin-top: 1%;
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #e8e8e8;
+}
+
+.checkout-process .right-side {
+  height: 300px;
+  width: 300px;
+}
+
+.checkout-process .right-side .purchase-detail {
+  margin-top: 22px;
+  margin-left: 18px;
+}
+
+.checkout-process .right-side .purchase-detail .price span {
+  margin-left: 3px;
+  font-size: 16px;
+  color: #242424;
+  font-weight: bold;
+}
+
+.checkout-process .right-side .purchase-detail .item-detail {
+  margin-top: 12px;
+}
+
+.checkout-process .right-side .purchase-detail .item-detail span {
+  margin-left: 3px;
+}
+
+.checkout-process .right-side .purchase-detail .item-detail span label {
+  font-size: 16px;
+  color: #242424;
+}
+
+.checkout-process .right-side .purchase-detail .item-detail span .right {
+  float: right;
+  font-size: 16px;
+  color: #242424;
+}
+
+.checkout-process .right-side .purchase-detail .horizontal-rule {
+  margin-top: 6%;
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #e8e8e8;
+}
+
+.checkout-process .right-side .purchase-detail .payble-amount {
+  margin-top: 12px;
+}
+
+.checkout-process .right-side .purchase-detail .payble-amount span {
+  margin-left: 3px;
+  font-weight: bold;
+}
+
+.checkout-process .right-side .purchase-detail .payble-amount span label {
+  font-size: 16px;
+  color: #242424;
+  font-weight: bold;
+}
+
+.checkout-process .right-side .purchase-detail .payble-amount span .right {
+  float: right;
+  font-size: 16px;
+  color: #242424;
+}
+
+.order-info {
+  width: 67%;
+  margin-right: 6%;
+  height: 1350px;
+  margin-top: -190px;
+}
+
+.order-info .order-guest .order-text {
+  font-size: 24px;
+  color: #242424;
+  letter-spacing: -0.58px;
+  font-weight: bold;
+}
+
+.order-info .sign-in {
+  float: right;
+  background: #0031F0;
+  font-size: 14px;
+  color: #FFFFFF;
+  letter-spacing: -0.26px;
+  text-align: center;
+  height: 38px;
+  width: 103px;
+  border: none;
+}
+
+.order-info .control-group {
+  margin-top: 30px;
+}
+
+.order-info .control-group label {
+  font-size: 14px;
+}
+
+.order-info .control-group .control {
+  width: 600px;
+}
+
+.order-info .control-group span {
+  color: red;
+}
+
+.order-info .different-billing-addr {
+  margin-top: 5%;
+}
+
+.order-info .different-billing-addr span {
+  font-size: 16px;
+  color: #242424;
+  letter-spacing: -0.38px;
+}
+
+.order-info .horizontal-rule {
+  margin-top: 6%;
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #e8e8e8;
+}
+
+.order-info .countinue-button {
+  margin-top: 3%;
+}
+
+.order-info .countinue-button button {
+  background: #0031F0;
+  font-size: 14px;
+  color: #FFFFFF;
+  letter-spacing: -0.26px;
+  text-align: center;
+  height: 38px;
+  width: 137px;
+  border: none;
+}
+
+@media all and (max-width: 480px) {
+  .checkout-process {
+    width: 100%;
+    margin-top: 3%;
+  }
+  .checkout-process .left-side {
+    width: 100%;
+    margin-right: 0%;
+    height: 60px;
+  }
+  .checkout-process .left-side .checkout-menu {
+    width: 100%;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail {
+    height: 60px;
+    width: 100%;
+    padding: 5px;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li {
+    height: 48px;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper span {
+    display: none;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail .line {
+    margin-top: 23px;
+    width: 100%;
+    margin-left: 5px;
+    margin-right: 5px;
+    border: 1px solid #E7E7E7;
+    height: 1px;
+  }
+  .checkout-process .left-side .checkout-menu .horizontal-rule {
+    display: none;
+  }
+  .checkout-process .right-side {
+    display: none;
+  }
+  .order-info {
+    width: 100%;
+    margin-right: 0%;
+    margin-top: 10px;
+    height: 50px;
+  }
+  .order-info .control-group .control {
+    width: 100%;
+  }
+  .order-info .different-billing-addr {
+    margin-top: 5%;
+  }
+  .order-info .horizontal-rule {
+    margin-top: 10%;
+  }
+  .order-info .countinue-button {
+    margin-top: 8%;
+  }
+}
+
+@media all and (min-width: 481px) and (max-width: 920px) {
+  .checkout-process {
+    width: 100%;
+    margin-top: 3%;
+  }
+  .checkout-process .left-side {
+    width: 100%;
+    margin-right: 0%;
+    height: 60px;
+  }
+  .checkout-process .left-side .checkout-menu {
+    width: 100%;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail {
+    height: 60px;
+    width: 100%;
+    padding: 5px;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li {
+    height: 48px;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail li .wrapper span {
+    display: none;
+  }
+  .checkout-process .left-side .checkout-menu ul.checkout-detail .line {
+    margin-top: 23px;
+    width: 100%;
+    margin-left: 10px;
+    margin-right: 10px;
+    border: 1px solid #E7E7E7;
+    height: 1px;
+  }
+  .checkout-process .left-side .checkout-menu .horizontal-rule {
+    display: none;
+  }
+  .checkout-process .right-side {
+    display: none;
+  }
+  .order-info {
+    width: 100%;
+    margin-right: 0%;
+    margin-top: 10px;
+    height: 50px;
+  }
+  .order-info .control-group .control {
+    width: 100%;
+  }
+  .order-info .different-billing-addr {
+    margin-top: 3%;
+  }
+  .order-info .horizontal-rule {
+    margin-top: 10%;
+  }
+  .order-info .countinue-button {
+    margin-top: 5%;
+  }
+}
+
+.signin-form {
+  width: 67%;
+  margin-right: 6%;
+  height: 520px;
+  margin-top: -190px;
+}
+
+.signin-form .signin-guest .signin-text {
+  font-size: 24px;
+  color: #242424;
+  letter-spacing: -0.58px;
+  font-weight: bold;
+}
+
+.signin-form .order-button {
+  float: right;
+  background: #0031F0;
+  font-size: 14px;
+  color: #FFFFFF;
+  letter-spacing: -0.26px;
+  text-align: center;
+  height: 38px;
+  width: 153px;
+  border: none;
+}
+
+.signin-form .control-group {
+  margin-top: 30px;
+}
+
+.signin-form .control-group label {
+  font-size: 14px;
+}
+
+.signin-form .control-group .control {
+  width: 600px;
+}
+
+.signin-form .control-group span {
+  color: red;
+}
+
+.signin-form .forgot-pass span {
+  font-size: 16px;
+  color: #0031F0;
+  letter-spacing: -0.38px;
+}
+
+.signin-form .horizontal-rule {
+  margin-top: 6%;
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #e8e8e8;
+}
+
+.signin-form .countinue-button {
+  margin-top: 3%;
+}
+
+.signin-form .countinue-button button {
+  background: #0031F0;
+  font-size: 14px;
+  color: #FFFFFF;
+  letter-spacing: -0.26px;
+  text-align: center;
+  height: 38px;
+  width: 137px;
+  border: none;
+}
+
+.ship-method {
+  width: 67%;
+  margin-right: 6%;
+  height: 600px;
+  margin-top: -190px;
+}
+
+.ship-method .ship-info .ship-text {
+  font-size: 24px;
+  color: #242424;
+  letter-spacing: -0.58px;
+  font-weight: bold;
+}
+
+.ship-method .ship-price {
+  margin-top: 31px;
+}
+
+.ship-method .ship-price .price-checkbox {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.ship-method .ship-price .price-checkbox span {
+  margin-left: 8px;
+  font-size: 16px;
+  color: #242424;
+  line-height: 22px;
+  font-weight: bold;
+}
+
+.ship-method .ship-price .price-checkbox-text {
+  margin-left: 25px;
+  width: 580px;
+  height: 44px;
+  margin-top: 4px;
+}
+
+.ship-method .ship-price .price-checkbox-text b {
+  font-size: 16px;
+}
+
+.ship-method .ship-price .price-checkbox-text span {
+  font-size: 16px;
+  color: #242424;
+  line-height: 22px;
+}
+
+.ship-method .horizontal-rule {
+  margin-top: 7%;
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #e8e8e8;
+}
+
+.ship-method .countinue-button {
+  margin-top: 3%;
+}
+
+.ship-method .countinue-button button {
+  background: #0031F0;
+  font-size: 14px;
+  color: #FFFFFF;
+  letter-spacing: -0.26px;
+  text-align: center;
+  height: 38px;
+  width: 137px;
+  border: none;
+}
+
+.payment-method {
+  width: 67%;
+  margin-right: 6%;
+  height: 600px;
+  margin-top: -190px;
+}
+
+.payment-method .payment-info .payment-text {
+  font-size: 24px;
+  color: #242424;
+  letter-spacing: -0.58px;
+  font-weight: bold;
+}
+
+.payment-method .payment-price {
+  margin-top: 31px;
+}
+
+.payment-method .payment-price .payment-checkbox {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.payment-method .payment-price .payment-checkbox span {
+  margin-left: 8px;
+  font-size: 16px;
+  color: #242424;
+  line-height: 22px;
+  font-weight: bold;
+}
+
+.payment-method .payment-price .payment-checkbox-text {
+  margin-left: 25px;
+  width: 580px;
+  height: 44px;
+  margin-top: 4px;
+}
+
+.payment-method .payment-price .payment-checkbox-text b {
+  font-size: 16px;
+}
+
+.payment-method .payment-price .payment-checkbox-text span {
+  font-size: 16px;
+  color: #242424;
+  line-height: 22px;
+}
+
+.payment-method .horizontal-rule {
+  margin-top: 7%;
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #e8e8e8;
+}
+
+.payment-method .countinue-button {
+  margin-top: 3%;
+}
+
+.payment-method .countinue-button button {
+  background: #0031F0;
+  font-size: 14px;
+  color: #FFFFFF;
+  letter-spacing: -0.26px;
+  text-align: center;
+  height: 38px;
+  width: 137px;
+  border: none;
+}
+
+.payment-method .countinue-button button .horizontal-rule {
+  margin-top: 7%;
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #e8e8e8;
+}
+
+.payment-method .countinue-button button .horizontal-rule {
+  margin-top: 7%;
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #e8e8e8;
+}
+
+.complete-page {
+  width: 880px;
+  height: 1050px;
+}
+
+.complete-page .order-summary span {
+  font-size: 24px;
+  color: #242424;
+  font-weight: bold;
+  letter-spacing: -0.58px;
+}
+
+.complete-page .address {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  margin-top: 30px;
+}
+
+.complete-page .address .shipping-address {
+  height: 100px;
+  width: 415px;
+}
+
+.complete-page .address .shipping-address .shipping-title span {
+  font-weight: bold;
+  font-size: 16px;
+  color: #242424;
+}
+
+.complete-page .address .shipping-address .shipping-content {
+  margin-top: 15px;
+  width: 175px;
+}
+
+.complete-page .address .shipping-address .shipping-content .addr {
+  margin-top: 5px;
+}
+
+.complete-page .address .shipping-address .shipping-content .addr span {
+  font-size: 16px;
+  color: #121212;
+}
+
+.complete-page .address .shipping-address .shipping-content .horizontal-rule {
+  margin-top: 7%;
+  width: 25px;
+  height: 1px;
+  vertical-align: middle;
+  background: #121212;
+}
+
+.complete-page .address .shipping-address .shipping-content .contact {
+  margin-top: 10px;
+}
+
+.complete-page .address .shipping-address .shipping-content .contact span {
+  font-size: 16px;
+  color: #121212;
+}
+
+.complete-page .address .billing-address {
+  width: 415px;
+}
+
+.complete-page .address .billing-address .shipping-title span {
+  font-weight: bold;
+  font-size: 16px;
+  color: #242424;
+}
+
+.complete-page .address .billing-address .shipping-content {
+  margin-top: 15px;
+  width: 175px;
+}
+
+.complete-page .address .billing-address .shipping-content .addr {
+  margin-top: 5px;
+}
+
+.complete-page .address .billing-address .shipping-content .addr span {
+  font-size: 16px;
+  color: #121212;
+}
+
+.complete-page .address .billing-address .shipping-content .horizontal-rule {
+  margin-top: 7%;
+  width: 25px;
+  height: 1px;
+  vertical-align: middle;
+  background: #121212;
+}
+
+.complete-page .address .billing-address .shipping-content .contact {
+  margin-top: 10px;
+}
+
+.complete-page .address .billing-address .shipping-content .contact span {
+  font-size: 16px;
+  color: #121212;
+}
+
+.complete-page .product-detail {
+  height: 200px;
+  border: 1px solid #E8E8E8;
+  border-radius: 3px;
+  margin-top: 30px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  margin-top: 30px;
+}
+
+.complete-page .product-detail .product-image {
+  margin: 20px 0px 20px 20px;
+}
+
+.complete-page .product-detail .product-image img {
+  height: 160px;
+  width: 160px;
+}
+
+.complete-page .product-detail .product-desc {
+  margin-top: 20px;
+  margin-left: 10px;
+}
+
+.complete-page .product-detail .product-desc .product-title span {
+  font-size: 18px;
+  color: #242424;
+  letter-spacing: -0.43px;
+  font-weight: bold;
+}
+
+.complete-page .product-detail .product-desc .price {
+  margin-top: 11px;
+}
+
+.complete-page .product-detail .product-desc .price span label {
+  font-size: 16px;
+  color: #5E5E5E;
+}
+
+.complete-page .product-detail .product-desc .price span label.bold {
+  margin-left: 45px;
+  font-weight: bold;
+  font-size: 18px;
+  color: #242424;
+}
+
+.complete-page .product-detail .product-desc .quantity {
+  margin-top: 11px;
+}
+
+.complete-page .product-detail .product-desc .quantity span label {
+  font-size: 16px;
+  color: #5E5E5E;
+}
+
+.complete-page .product-detail .product-desc .quantity span label.quat-bold {
+  margin-left: 15px;
+  font-weight: bold;
+  font-size: 18px;
+  color: #242424;
+}
+
+.complete-page .product-detail .product-desc .pro-attribute {
+  width: 413px;
+  margin-top: 14px;
+}
+
+.complete-page .product-detail .product-desc .pro-attribute span {
+  font-size: 16px;
+  color: #242424;
+}
+
+.complete-page .order-description {
+  height: 140px;
+  border-radius: 3px;
+  margin-top: 30px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+}
+
+.complete-page .order-description .payment .shipping {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+
+.complete-page .order-description .payment .shipping .pay-icon {
+  height: 48px;
+  width: 48px;
+  border-radius: 50%;
+  border: 1px solid #E8E8E8;
+}
+
+.complete-page .order-description .payment .shipping .pay-icon img {
+  margin-left: 8px;
+  margin-top: 8px;
+}
+
+.complete-page .order-description .payment .shipping .pay-icon span {
+  margin-left: 10px;
+  font-size: 16px;
+  color: #242424;
+  letter-spacing: -0.38px;
+}
+
+.complete-page .order-description .payment .shipping .shipping-text {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.complete-page .order-description .payment .shipping .shipping-text .price {
+  margin-top: 5px;
+  margin-left: 5px;
+}
+
+.complete-page .order-description .payment .shipping .shipping-text .price span {
+  font-size: 16px;
+  color: #242424;
+  letter-spacing: -0.38px;
+}
+
+.complete-page .order-description .payment .shipping .shipping-text .fedex-shipping {
+  margin-left: 5px;
+}
+
+.complete-page .order-description .payment .shipping .shipping-text .fedex-shipping span {
+  font-size: 16px;
+  color: #242424;
+  letter-spacing: -0.38px;
+}
+
+.complete-page .order-description .payment .net-banking {
+  margin-top: 23px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+
+.complete-page .order-description .payment .net-banking .pay-icon {
+  height: 48px;
+  width: 48px;
+  border-radius: 50%;
+  border: 1px solid #E8E8E8;
+}
+
+.complete-page .order-description .payment .net-banking .pay-icon img {
+  margin-left: 8px;
+  margin-top: 8px;
+}
+
+.complete-page .order-description .payment .net-banking span {
+  margin-left: 5px;
+  margin-top: 15px;
+  font-size: 16px;
+  color: #242424;
+  letter-spacing: -0.38px;
+}
+
+.complete-page .order-description .product-bill {
+  height: 200px;
+  width: 300px;
+}
+
+.complete-page .order-description .product-bill .sub-total span {
+  font-size: 16px;
+  color: #242424;
+  letter-spacing: -0.38px;
+}
+
+.complete-page .order-description .product-bill .sub-total .right {
+  float: right;
+}
+
+.complete-page .order-description .product-bill .charge-discount {
+  margin-top: 10px;
+}
+
+.complete-page .order-description .product-bill .charge-discount span {
+  font-size: 16px;
+  color: #242424;
+  letter-spacing: -0.38px;
+}
+
+.complete-page .order-description .product-bill .charge-discount .right {
+  float: right;
+}
+
+.complete-page .order-description .product-bill .horizontal-rule {
+  margin-top: 5%;
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #e8e8e8;
+}
+
+.complete-page .order-description .product-bill .amount-pay {
+  margin-top: 15px;
+}
+
+.complete-page .order-description .product-bill .amount-pay span {
+  font-size: 16px;
+  color: #242424;
+  letter-spacing: -0.38px;
+}
+
+.complete-page .order-description .product-bill .amount-pay .right {
+  float: right;
+}
+
+.complete-page .horizontal-rule {
+  width: 100%;
+  height: 1px;
+  vertical-align: middle;
+  background: #e8e8e8;
+}
+
+.complete-page .palce-order-button {
+  margin-top: 30px;
+}
+
+.complete-page .palce-order-button button {
+  width: 137px;
+  height: 38px;
+  background: #0031F0;
+  font-size: 14px;
+  color: #FFFFFF;
+  letter-spacing: -0.26px;
+  text-align: center;
+  border: none;
+}
+
+@media all and (max-width: 480px) {
+  .header {
+    margin-top: 16px;
+    margin-bottom: 21px;
+  }
+  .header .header-top {
+    margin-bottom: 16px;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    max-width: 92%;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+            justify-content: space-between;
+  }
+  .header .header-top div.left-content {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: row;
+            flex-direction: row;
+    -webkit-box-pack: start;
+        -ms-flex-pack: start;
+            justify-content: flex-start;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+  .header .header-top div.left-content ul.logo-container {
+    margin-right: 12px;
+  }
+  .header .header-top div.left-content ul.logo-container li {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+  }
+  .header .header-top div.left-content ul.search-container li.search-group {
+    display: none;
+  }
+  .header .header-top div.right-content {
+    display: none;
+  }
+  .header .header-top .right-responsive {
+    display: inherit;
+  }
+  .header .search-suggestion {
+    display: none;
+  }
+  .header .search-suggestion .search-content {
+    border-top: 1px solid #e8e8e8;
+    border-bottom: 1px solid #e8e8e8;
+    height: 48px;
+  }
+  .header .search-suggestion .search-content .icon.search-icon {
+    margin-left: 15px;
+    margin-top: 12px;
+  }
+  .header .search-suggestion .search-content span {
+    font-size: 16px;
+    color: #242424;
+    margin-bottom: -7px;
+    margin-left: 5px;
+  }
+  .header .search-suggestion .search-content .right {
+    float: right;
+    margin-right: 15px;
+  }
+  .header .search-suggestion .suggestion {
+    margin-top: 14px;
+    height: 32px;
+    margin-bottom: 14px;
+    border-bottom: 1px solid #e8e8e8;
+  }
+  .header .search-suggestion .suggestion span {
+    font-size: 16px;
+    color: #242424;
+    margin-left: 48px;
+  }
+  .header .header-bottom {
+    height: 200px;
+    margin-left: auto;
+    margin-right: auto;
+    border-top: none;
+    border-bottom: none;
+    display: none;
+    /* submenu positioning*/
+  }
+  .header .header-bottom ul.nav {
+    width: 100%;
+    height: 100px;
+  }
+  .header .header-bottom .nav > li {
+    float: none;
+    border-bottom: 1px solid #e8e8e8;
+  }
+  .header .header-bottom .nav > li a {
+    margin-left: 10px;
+  }
+  .header .header-bottom .nav > li .dropdown-right-icon {
+    float: right;
+    margin-top: 5px;
+    margin-right: 5px;
+  }
+  .header .header-bottom .nav > li:first-child {
+    border-top: 1px solid #e8e8e8;
+  }
+  .header .header-bottom .nav > li:last-child {
+    float: none;
+  }
+  .header .header-bottom .nav > li:last-child span {
+    font-size: 16px;
+    color: #FF6472;
+    letter-spacing: -0.38px;
+  }
+  .header .header-bottom .nav > li:last-child img {
+    margin-left: 20px;
+  }
+  .header .header-bottom .nav ul {
+    position: absolute;
+    white-space: nowrap;
+    border: 1px solid #B1B1B1;
+    background-color: white;
+    z-index: 1;
+    left: -99999em;
+  }
+  .header .header-bottom .nav > li:hover > ul {
+    left: auto;
+    min-width: 100%;
+  }
+  .header .header-bottom .nav > li li:hover > ul {
+    left: 100%;
+    margin-left: 1px;
+    top: -1px;
+  }
+  .header .header-bottom .nav > li:hover > a:first-child:nth-last-child(2):before {
+    margin-top: -5px;
+  }
+  .header .header-bottom .nav li li > a:first-child:nth-last-child(2):before {
+    margin-top: -5px;
+  }
+  .header .header-bottom .nav li li:hover > a:first-child:nth-last-child(2):before {
+    right: 10px;
+  }
+}
diff --git a/public/themes/default/assets/js/shop.js b/public/themes/default/assets/js/shop.js
index 48b0343d4..adf670208 100644
--- a/public/themes/default/assets/js/shop.js
+++ b/public/themes/default/assets/js/shop.js
@@ -204,7 +204,7 @@ module.exports = function normalizeComponent (
 /***/ (function(module, exports, __webpack_require__) {
 
 __webpack_require__(3);
-module.exports = __webpack_require__(20);
+module.exports = __webpack_require__(25);
 
 
 /***/ }),
@@ -221,8 +221,8 @@ Vue.use(VeeValidate);
 
 Vue.component("category-nav", __webpack_require__(10));
 Vue.component("category-item", __webpack_require__(13));
-Vue.component("image-slider", __webpack_require__(25));
-Vue.component("vue-slider", __webpack_require__(19));
+Vue.component("image-slider", __webpack_require__(16));
+Vue.component("vue-slider", __webpack_require__(24));
 
 $(document).ready(function () {
 
@@ -29320,23 +29320,98 @@ if (false) {
 }
 
 /***/ }),
-/* 16 */,
-/* 17 */,
-/* 18 */,
-/* 19 */
+/* 16 */
 /***/ (function(module, exports, __webpack_require__) {
 
-!function(t,e){ true?module.exports=e():"function"==typeof define&&define.amd?define("vue-slider-component",[],e):"object"==typeof exports?exports["vue-slider-component"]=e():t["vue-slider-component"]=e()}(this,function(){return function(t){function e(s){if(i[s])return i[s].exports;var r=i[s]={i:s,l:!1,exports:{}};return t[s].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var i={};return e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,s){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:s})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=2)}([function(t,e,i){i(7);var s=i(5)(i(1),i(6),null,null);t.exports=s.exports},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s=function(){var t="undefined"!=typeof window?window.devicePixelRatio||1:1;return function(e){return Math.round(e*t)/t}}();e.default={name:"VueSliderComponent",props:{width:{type:[Number,String],default:"auto"},height:{type:[Number,String],default:6},data:{type:Array,default:null},dotSize:{type:Number,default:16},dotWidth:{type:Number,required:!1},dotHeight:{type:Number,required:!1},min:{type:Number,default:0},max:{type:Number,default:100},interval:{type:Number,default:1},show:{type:Boolean,default:!0},disabled:{type:[Boolean,Array],default:!1},piecewise:{type:Boolean,default:!1},tooltip:{type:[String,Boolean],default:"always"},eventType:{type:String,default:"auto"},direction:{type:String,default:"horizontal"},reverse:{type:Boolean,default:!1},lazy:{type:Boolean,default:!1},clickable:{type:Boolean,default:!0},speed:{type:Number,default:.5},realTime:{type:Boolean,default:!1},stopPropagation:{type:Boolean,default:!1},value:{type:[String,Number,Array,Object],default:0},piecewiseLabel:{type:Boolean,default:!1},debug:{type:Boolean,default:!0},fixed:{type:Boolean,default:!1},processDragable:{type:Boolean,default:!1},useKeyboard:{type:Boolean,default:!1},actionsKeyboard:{type:Array,default:function(){return[function(t){return t-1},function(t){return t+1}]}},tooltipMerge:{type:Boolean,default:!0},startAnimation:{type:Boolean,default:!1},sliderStyle:[Array,Object,Function],focusStyle:[Array,Object,Function],tooltipDir:[Array,String],formatter:[String,Function],mergeFormatter:[String,Function],piecewiseStyle:Object,disabledStyle:Object,piecewiseActiveStyle:Object,processStyle:Object,bgStyle:Object,tooltipStyle:[Array,Object,Function],disabledDotStyle:[Array,Object,Function],labelStyle:Object,labelActiveStyle:Object},data:function(){return{flag:!1,keydownFlag:null,focusFlag:!1,processFlag:!1,processSign:null,size:0,fixedValue:0,focusSlider:0,currentValue:0,currentSlider:0,isComponentExists:!0,isMounted:!1}},computed:{dotWidthVal:function(){return"number"==typeof this.dotWidth?this.dotWidth:this.dotSize},dotHeightVal:function(){return"number"==typeof this.dotHeight?this.dotHeight:this.dotSize},flowDirection:function(){return"vue-slider-"+this.direction+(this.reverse?"-reverse":"")},tooltipMergedPosition:function(){if(!this.isMounted)return{};var t=this.tooltipDirection[0];if(this.$refs.dot0){if("vertical"===this.direction){var e={};return e[t]="-"+(this.dotHeightVal/2-this.width/2+9)+"px",e}var i={};return i[t]="-"+(this.dotWidthVal/2-this.height/2+9)+"px",i.left="50%",i}},tooltipDirection:function(){var t=this.tooltipDir||("vertical"===this.direction?"left":"top");return Array.isArray(t)?this.isRange?t:t[1]:this.isRange?[t,t]:t},tooltipStatus:function(){return"hover"===this.tooltip&&this.flag?"vue-slider-always":this.tooltip?"vue-slider-"+this.tooltip:""},tooltipClass:function(){return["vue-slider-tooltip-"+this.tooltipDirection,"vue-slider-tooltip"]},disabledArray:function(){return Array.isArray(this.disabled)?this.disabled:[this.disabled,this.disabled]},boolDisabled:function(){return this.disabledArray.every(function(t){return!0===t})},isDisabled:function(){return"none"===this.eventType||this.boolDisabled},disabledClass:function(){return this.boolDisabled?"vue-slider-disabled":""},stateClass:function(){return{"vue-slider-state-process-drag":this.processFlag,"vue-slider-state-drag":this.flag&&!this.processFlag&&!this.keydownFlag,"vue-slider-state-focus":this.focusFlag}},isRange:function(){return Array.isArray(this.value)},slider:function(){return this.isRange?[this.$refs.dot0,this.$refs.dot1]:this.$refs.dot},minimum:function(){return this.data?0:this.min},val:{get:function(){return this.data?this.isRange?[this.data[this.currentValue[0]],this.data[this.currentValue[1]]]:this.data[this.currentValue]:this.currentValue},set:function(t){if(this.data)if(this.isRange){var e=this.data.indexOf(t[0]),i=this.data.indexOf(t[1]);e>-1&&i>-1&&(this.currentValue=[e,i])}else{var s=this.data.indexOf(t);s>-1&&(this.currentValue=s)}else this.currentValue=t}},currentIndex:function(){return this.isRange?this.data?this.currentValue:[this.getIndexByValue(this.currentValue[0]),this.getIndexByValue(this.currentValue[1])]:this.getIndexByValue(this.currentValue)},indexRange:function(){return this.isRange?this.currentIndex:[0,this.currentIndex]},maximum:function(){return this.data?this.data.length-1:this.max},multiple:function(){var t=(""+this.interval).split(".")[1];return t?Math.pow(10,t.length):1},spacing:function(){return this.data?1:this.interval},total:function(){return this.data?this.data.length-1:(Math.floor((this.maximum-this.minimum)*this.multiple)%(this.interval*this.multiple)!=0&&this.printError("Prop[interval] is illegal, Please make sure that the interval can be divisible"),(this.maximum-this.minimum)/this.interval)},gap:function(){return this.size/this.total},position:function(){return this.isRange?[(this.currentValue[0]-this.minimum)/this.spacing*this.gap,(this.currentValue[1]-this.minimum)/this.spacing*this.gap]:(this.currentValue-this.minimum)/this.spacing*this.gap},limit:function(){return this.isRange?this.fixed?[[0,(this.total-this.fixedValue)*this.gap],[this.fixedValue*this.gap,this.size]]:[[0,this.position[1]],[this.position[0],this.size]]:[0,this.size]},valueLimit:function(){return this.isRange?this.fixed?[[this.minimum,this.maximum-this.fixedValue*(this.spacing*this.multiple)/this.multiple],[this.minimum+this.fixedValue*(this.spacing*this.multiple)/this.multiple,this.maximum]]:[[this.minimum,this.currentValue[1]],[this.currentValue[0],this.maximum]]:[this.minimum,this.maximum]},idleSlider:function(){return 0===this.currentSlider?1:0},wrapStyles:function(){return"vertical"===this.direction?{height:"number"==typeof this.height?this.height+"px":this.height,padding:this.dotHeightVal/2+"px "+this.dotWidthVal/2+"px"}:{width:"number"==typeof this.width?this.width+"px":this.width,padding:this.dotHeightVal/2+"px "+this.dotWidthVal/2+"px"}},sliderStyles:function(){return Array.isArray(this.sliderStyle)?this.isRange?this.sliderStyle:this.sliderStyle[1]:"function"==typeof this.sliderStyle?this.sliderStyle(this.val,this.currentIndex):this.isRange?[this.sliderStyle,this.sliderStyle]:this.sliderStyle},focusStyles:function(){return Array.isArray(this.focusStyle)?this.isRange?this.focusStyle:this.focusStyle[1]:"function"==typeof this.focusStyle?this.focusStyle(this.val,this.currentIndex):this.isRange?[this.focusStyle,this.focusStyle]:this.focusStyle},disabledDotStyles:function(){var t=this.disabledDotStyle;if(Array.isArray(t))return t;if("function"==typeof t){var e=t(this.val,this.currentIndex);return Array.isArray(e)?e:[e,e]}return t?[t,t]:[{backgroundColor:"#ccc"},{backgroundColor:"#ccc"}]},tooltipStyles:function(){return Array.isArray(this.tooltipStyle)?this.isRange?this.tooltipStyle:this.tooltipStyle[1]:"function"==typeof this.tooltipStyle?this.tooltipStyle(this.val,this.currentIndex):this.isRange?[this.tooltipStyle,this.tooltipStyle]:this.tooltipStyle},elemStyles:function(){return"vertical"===this.direction?{width:this.width+"px",height:"100%"}:{height:this.height+"px"}},dotStyles:function(){return"vertical"===this.direction?{width:this.dotWidthVal+"px",height:this.dotHeightVal+"px",left:-(this.dotWidthVal-this.width)/2+"px"}:{width:this.dotWidthVal+"px",height:this.dotHeightVal+"px",top:-(this.dotHeightVal-this.height)/2+"px"}},piecewiseDotStyle:function(){return"vertical"===this.direction?{width:this.width+"px",height:this.width+"px"}:{width:this.height+"px",height:this.height+"px"}},piecewiseDotWrap:function(){if(!this.piecewise&&!this.piecewiseLabel)return!1;for(var t=[],e=0;e<=this.total;e++){var i="vertical"===this.direction?{bottom:this.gap*e-this.width/2+"px",left:0}:{left:this.gap*e-this.height/2+"px",top:0},s=this.reverse?this.total-e:e,r=this.data?this.data[s]:this.spacing*s+this.min;t.push({style:i,label:this.formatter?this.formatting(r):r,inRange:s>=this.indexRange[0]&&s<=this.indexRange[1]})}return t}},watch:{value:function(t){this.flag||this.setValue(t,!0)},max:function(t){if(t<this.min)return this.printError("The maximum value can not be less than the minimum value.");var e=this.limitValue(this.val);this.setValue(e),this.refresh()},min:function(t){if(t>this.max)return this.printError("The minimum value can not be greater than the maximum value.");var e=this.limitValue(this.val);this.setValue(e),this.refresh()},show:function(t){var e=this;t&&!this.size&&this.$nextTick(function(){e.refresh()})},fixed:function(){this.computedFixedValue()}},methods:{bindEvents:function(){document.addEventListener("touchmove",this.moving,{passive:!1}),document.addEventListener("touchend",this.moveEnd,{passive:!1}),document.addEventListener("mousedown",this.blurSlider),document.addEventListener("mousemove",this.moving),document.addEventListener("mouseup",this.moveEnd),document.addEventListener("mouseleave",this.moveEnd),document.addEventListener("keydown",this.handleKeydown),document.addEventListener("keyup",this.handleKeyup),window.addEventListener("resize",this.refresh),this.isRange&&this.tooltipMerge&&(this.$refs.dot0.addEventListener("transitionend",this.handleOverlapTooltip),this.$refs.dot1.addEventListener("transitionend",this.handleOverlapTooltip))},unbindEvents:function(){document.removeEventListener("touchmove",this.moving),document.removeEventListener("touchend",this.moveEnd),document.removeEventListener("mousedown",this.blurSlider),document.removeEventListener("mousemove",this.moving),document.removeEventListener("mouseup",this.moveEnd),document.removeEventListener("mouseleave",this.moveEnd),document.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("keyup",this.handleKeyup),window.removeEventListener("resize",this.refresh),this.isRange&&this.tooltipMerge&&(this.$refs.dot0.removeEventListener("transitionend",this.handleOverlapTooltip),this.$refs.dot1.removeEventListener("transitionend",this.handleOverlapTooltip))},handleKeydown:function(t){if(!this.useKeyboard||!this.focusFlag)return!1;switch(t.keyCode){case 37:case 40:t.preventDefault(),this.keydownFlag=!0,this.flag=!0,this.changeFocusSlider(this.actionsKeyboard[0]);break;case 38:case 39:t.preventDefault(),this.keydownFlag=!0,this.flag=!0,this.changeFocusSlider(this.actionsKeyboard[1])}},handleKeyup:function(){this.keydownFlag&&(this.keydownFlag=!1,this.flag=!1)},changeFocusSlider:function(t){var e=this;if(this.isRange){var i=this.currentIndex.map(function(i,s){if(s===e.focusSlider||e.fixed){var r=t(i),o=e.fixed?e.valueLimit[s]:[0,e.total];if(r<=o[1]&&r>=o[0])return r}return i});i[0]>i[1]&&(this.focusSlider=0===this.focusSlider?1:0,i=i.reverse()),this.setIndex(i)}else this.setIndex(t(this.currentIndex))},blurSlider:function(t){var e=this.isRange?this.$refs["dot"+this.focusSlider]:this.$refs.dot;if(!e||e===t.target)return!1;this.focusFlag=!1},formatting:function(t){return"string"==typeof this.formatter?this.formatter.replace(/\{value\}/,t):this.formatter(t)},mergeFormatting:function(t,e){return"string"==typeof this.mergeFormatter?this.mergeFormatter.replace(/\{(value1|value2)\}/g,function(i,s){return"value1"===s?t:e}):this.mergeFormatter(t,e)},getPos:function(t){return this.realTime&&this.getStaticData(),"vertical"===this.direction?this.reverse?t.pageY-this.offset:this.size-(t.pageY-this.offset):this.reverse?this.size-(t.clientX-this.offset):t.clientX-this.offset},processClick:function(t){this.fixed&&t.stopPropagation()},wrapClick:function(t){var e=this;if(this.isDisabled||!this.clickable||this.processFlag)return!1;var i=this.getPos(t);if(this.isRange)if(this.disabledArray.every(function(t){return!1===t}))this.currentSlider=i>(this.position[1]-this.position[0])/2+this.position[0]?1:0;else if(this.disabledArray[0]){if(i<this.position[0])return!1;this.currentSlider=1}else if(this.disabledArray[1]){if(i>this.position[1])return!1;this.currentSlider=0}if(this.disabledArray[this.currentSlider])return!1;if(this.setValueOnPos(i),this.isRange&&this.tooltipMerge){var s=setInterval(function(){return e.handleOverlapTooltip()},16.7);setTimeout(function(){return window.clearInterval(s)},1e3*this.speed)}},moveStart:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments[2];if(this.disabledArray[e])return!1;if(this.stopPropagation&&t.stopPropagation(),this.isRange&&(this.currentSlider=e,i)){if(!this.processDragable)return!1;this.processFlag=!0,this.processSign={pos:this.position,start:this.getPos(t.targetTouches&&t.targetTouches[0]?t.targetTouches[0]:t)}}!i&&this.useKeyboard&&(this.focusFlag=!0,this.focusSlider=e),this.flag=!0,this.$emit("drag-start",this)},moving:function(t){if(this.stopPropagation&&t.stopPropagation(),!this.flag)return!1;t.preventDefault(),t.targetTouches&&t.targetTouches[0]&&(t=t.targetTouches[0]),this.processFlag?(this.currentSlider=0,this.setValueOnPos(this.processSign.pos[0]+this.getPos(t)-this.processSign.start,!0),this.currentSlider=1,this.setValueOnPos(this.processSign.pos[1]+this.getPos(t)-this.processSign.start,!0)):this.setValueOnPos(this.getPos(t),!0),this.isRange&&this.tooltipMerge&&this.handleOverlapTooltip()},moveEnd:function(t){var e=this;if(this.stopPropagation&&t.stopPropagation(),!this.flag)return!1;this.$emit("drag-end",this),this.lazy&&this.isDiff(this.val,this.value)&&this.syncValue(),this.flag=!1,window.setTimeout(function(){e.processFlag=!1},0),this.setPosition()},setValueOnPos:function(t,e){var i=this.isRange?this.limit[this.currentSlider]:this.limit,s=this.isRange?this.valueLimit[this.currentSlider]:this.valueLimit;if(t>=i[0]&&t<=i[1]){this.setTransform(t);var r=this.getValueByIndex(Math.round(t/this.gap));this.setCurrentValue(r,e),this.isRange&&this.fixed&&(this.setTransform(t+this.fixedValue*this.gap*(0===this.currentSlider?1:-1),!0),this.setCurrentValue((r*this.multiple+this.fixedValue*this.spacing*this.multiple*(0===this.currentSlider?1:-1))/this.multiple,e,!0))}else t<i[0]?(this.setTransform(i[0]),this.setCurrentValue(s[0]),this.isRange&&this.fixed?(this.setTransform(this.limit[this.idleSlider][0],!0),this.setCurrentValue(this.valueLimit[this.idleSlider][0],e,!0)):this.fixed||this.disabledArray[0]||1!==this.currentSlider||(this.focusSlider=0,this.currentSlider=0)):(this.setTransform(i[1]),this.setCurrentValue(s[1]),this.isRange&&this.fixed?(this.setTransform(this.limit[this.idleSlider][1],!0),this.setCurrentValue(this.valueLimit[this.idleSlider][1],e,!0)):this.fixed||this.disabledArray[1]||0!==this.currentSlider||(this.focusSlider=1,this.currentSlider=1))},isDiff:function(t,e){return Object.prototype.toString.call(t)!==Object.prototype.toString.call(e)||(Array.isArray(t)&&t.length===e.length?t.some(function(t,i){return t!==e[i]}):t!==e)},setCurrentValue:function(t,e,i){var s=i?this.idleSlider:this.currentSlider;if(t<this.minimum||t>this.maximum)return!1;this.isRange?this.isDiff(this.currentValue[s],t)&&(this.currentValue.splice(s,1,t),this.lazy&&this.flag||this.syncValue()):this.isDiff(this.currentValue,t)&&(this.currentValue=t,this.lazy&&this.flag||this.syncValue()),e||this.setPosition()},getValueByIndex:function(t){return(this.spacing*this.multiple*t+this.minimum*this.multiple)/this.multiple},getIndexByValue:function(t){return Math.round((t-this.minimum)*this.multiple)/(this.spacing*this.multiple)},setIndex:function(t){if(Array.isArray(t)&&this.isRange){var e=void 0;e=this.data?[this.data[t[0]],this.data[t[1]]]:[this.getValueByIndex(t[0]),this.getValueByIndex(t[1])],this.setValue(e)}else t=this.getValueByIndex(t),this.isRange&&(this.currentSlider=t>(this.currentValue[1]-this.currentValue[0])/2+this.currentValue[0]?1:0),this.setCurrentValue(t)},setValue:function(t,e,i){var s=this;if(this.isDiff(this.val,t)){var r=this.limitValue(t);this.val=this.isRange?r.concat():r,this.computedFixedValue(),this.syncValue(e)}this.$nextTick(function(){return s.setPosition(i)})},computedFixedValue:function(){if(!this.fixed)return this.fixedValue=0,!1;this.fixedValue=this.currentIndex[1]-this.currentIndex[0]},setPosition:function(t){this.flag||this.setTransitionTime(void 0===t?this.speed:t),this.isRange?(this.setTransform(this.position[0],1===this.currentSlider),this.setTransform(this.position[1],0===this.currentSlider)):this.setTransform(this.position),this.flag||this.setTransitionTime(0)},setTransform:function(t,e){var i=e?this.idleSlider:this.currentSlider,r=s(("vertical"===this.direction?this.dotHeightVal/2-t:t-this.dotWidthVal/2)*(this.reverse?-1:1)),o="vertical"===this.direction?"translateY("+r+"px)":"translateX("+r+"px)",n=this.fixed?this.fixedValue*this.gap+"px":(0===i?this.position[1]-t:t-this.position[0])+"px",l=this.fixed?(0===i?t:t-this.fixedValue*this.gap)+"px":(0===i?t:this.position[0])+"px";this.isRange?(this.slider[i].style.transform=o,this.slider[i].style.WebkitTransform=o,this.slider[i].style.msTransform=o,"vertical"===this.direction?(this.$refs.process.style.height=n,this.$refs.process.style[this.reverse?"top":"bottom"]=l):(this.$refs.process.style.width=n,this.$refs.process.style[this.reverse?"right":"left"]=l)):(this.slider.style.transform=o,this.slider.style.WebkitTransform=o,this.slider.style.msTransform=o,"vertical"===this.direction?(this.$refs.process.style.height=t+"px",this.$refs.process.style[this.reverse?"top":"bottom"]=0):(this.$refs.process.style.width=t+"px",this.$refs.process.style[this.reverse?"right":"left"]=0))},setTransitionTime:function(t){if(t||this.$refs.process.offsetWidth,this.isRange){for(var e=0;e<this.slider.length;e++)this.slider[e].style.transitionDuration=t+"s",this.slider[e].style.WebkitTransitionDuration=t+"s";this.$refs.process.style.transitionDuration=t+"s",this.$refs.process.style.WebkitTransitionDuration=t+"s"}else this.slider.style.transitionDuration=t+"s",this.slider.style.WebkitTransitionDuration=t+"s",this.$refs.process.style.transitionDuration=t+"s",this.$refs.process.style.WebkitTransitionDuration=t+"s"},limitValue:function(t){var e=this;if(this.data)return t;var i=function(i){return i<e.min?(e.printError("The value of the slider is "+t+", the minimum value is "+e.min+", the value of this slider can not be less than the minimum value"),e.min):i>e.max?(e.printError("The value of the slider is "+t+", the maximum value is "+e.max+", the value of this slider can not be greater than the maximum value"),e.max):i};return this.isRange?t.map(function(t){return i(t)}):i(t)},syncValue:function(t){var e=this.isRange?this.val.concat():this.val;this.$emit("input",e),t||this.$emit("callback",e)},getValue:function(){return this.val},getIndex:function(){return this.currentIndex},getStaticData:function(){this.$refs.elem&&(this.size="vertical"===this.direction?this.$refs.elem.offsetHeight:this.$refs.elem.offsetWidth,this.offset="vertical"===this.direction?this.$refs.elem.getBoundingClientRect().top+window.pageYOffset||document.documentElement.scrollTop:this.$refs.elem.getBoundingClientRect().left)},refresh:function(){this.$refs.elem&&(this.getStaticData(),this.computedFixedValue(),this.setPosition())},printError:function(t){this.debug&&console.error("[VueSlider error]: "+t)},handleOverlapTooltip:function(){var t=this.tooltipDirection[0]===this.tooltipDirection[1];if(this.isRange&&t){var e=this.reverse?this.$refs.tooltip1:this.$refs.tooltip0,i=this.reverse?this.$refs.tooltip0:this.$refs.tooltip1,s=e.getBoundingClientRect().right,r=i.getBoundingClientRect().left,o=e.getBoundingClientRect().y,n=i.getBoundingClientRect().y+i.getBoundingClientRect().height,l="horizontal"===this.direction&&s>r,a="vertical"===this.direction&&n>o;l||a?this.handleDisplayMergedTooltip(!0):this.handleDisplayMergedTooltip(!1)}},handleDisplayMergedTooltip:function(t){var e=this.$refs.tooltip0,i=this.$refs.tooltip1,s=this.$refs.process.getElementsByClassName("vue-merged-tooltip")[0];t?(e.style.visibility="hidden",i.style.visibility="hidden",s.style.visibility="visible"):(e.style.visibility="visible",i.style.visibility="visible",s.style.visibility="hidden")}},mounted:function(){var t=this;if(this.isComponentExists=!0,"undefined"==typeof window||"undefined"==typeof document)return this.printError("window or document is undefined, can not be initialization.");this.$nextTick(function(){t.isComponentExists&&(t.getStaticData(),t.setValue(t.limitValue(t.value),!0,t.startAnimation?t.speed:0),t.bindEvents())}),this.isMounted=!0},beforeDestroy:function(){this.isComponentExists=!1,this.unbindEvents()}}},function(t,e,i){"use strict";var s=i(0);t.exports=s},function(t,e,i){e=t.exports=i(4)(),e.push([t.i,'.vue-slider-component{position:relative;box-sizing:border-box;-ms-user-select:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none}.vue-slider-component.vue-slider-disabled{opacity:.5;cursor:not-allowed}.vue-slider-component.vue-slider-has-label{margin-bottom:15px}.vue-slider-component.vue-slider-disabled .vue-slider-dot{cursor:not-allowed}.vue-slider-component .vue-slider{position:relative;display:block;border-radius:15px;background-color:#ccc}.vue-slider-component .vue-slider:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:2}.vue-slider-component .vue-slider-process{position:absolute;border-radius:15px;background-color:#3498db;transition:all 0s;z-index:1}.vue-slider-component .vue-slider-process.vue-slider-process-dragable{cursor:pointer;z-index:3}.vue-slider-component.vue-slider-horizontal .vue-slider-process{width:0;height:100%;top:0;left:0;will-change:width}.vue-slider-component.vue-slider-vertical .vue-slider-process{width:100%;height:0;bottom:0;left:0;will-change:height}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-process{width:0;height:100%;top:0;right:0}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-process{width:100%;height:0;top:0;left:0}.vue-slider-component .vue-slider-dot{position:absolute;border-radius:50%;background-color:#fff;box-shadow:.5px .5px 2px 1px rgba(0,0,0,.32);transition:all 0s;will-change:transform;cursor:pointer;z-index:5}.vue-slider-component .vue-slider-dot.vue-slider-dot-focus{box-shadow:0 0 2px 1px #3498db}.vue-slider-component .vue-slider-dot.vue-slider-dot-dragging{z-index:5}.vue-slider-component .vue-slider-dot.vue-slider-dot-disabled{z-index:4}.vue-slider-component.vue-slider-horizontal .vue-slider-dot{left:0}.vue-slider-component.vue-slider-vertical .vue-slider-dot{bottom:0}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-dot{right:0}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-dot{top:0}.vue-slider-component .vue-slider-tooltip-wrap{display:none;position:absolute;z-index:9}.vue-slider-component .vue-slider-tooltip{display:block;font-size:14px;white-space:nowrap;padding:2px 5px;min-width:20px;text-align:center;color:#fff;border-radius:5px;border:1px solid #3498db;background-color:#3498db}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-top{top:-9px;left:50%;transform:translate(-50%,-100%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-bottom{bottom:-9px;left:50%;transform:translate(-50%,100%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-left{top:50%;left:-9px;transform:translate(-100%,-50%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-right{top:50%;right:-9px;transform:translate(100%,-50%)}.vue-slider-component .vue-slider-tooltip-top .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-top .vue-slider-tooltip:before{content:"";position:absolute;bottom:-10px;left:50%;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-top-color:inherit;transform:translate(-50%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-merged-tooltip{display:block;visibility:hidden}.vue-slider-component .vue-slider-tooltip-bottom .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-bottom .vue-slider-tooltip:before{content:"";position:absolute;top:-10px;left:50%;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-bottom-color:inherit;transform:translate(-50%)}.vue-slider-component .vue-slider-tooltip-left .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-left .vue-slider-tooltip:before{content:"";position:absolute;top:50%;right:-10px;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-left-color:inherit;transform:translateY(-50%)}.vue-slider-component .vue-slider-tooltip-right .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-right .vue-slider-tooltip:before{content:"";position:absolute;top:50%;left:-10px;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-right-color:inherit;transform:translateY(-50%)}.vue-slider-component .vue-slider-dot.vue-slider-hover:hover .vue-slider-tooltip-wrap{display:block}.vue-slider-component .vue-slider-dot.vue-slider-always .vue-slider-tooltip-wrap{display:block!important}.vue-slider-component .vue-slider-piecewise{position:absolute;width:100%;padding:0;margin:0;left:0;top:0;height:100%;list-style:none}.vue-slider-component .vue-slider-piecewise-item{position:absolute;width:8px;height:8px}.vue-slider-component .vue-slider-piecewise-dot{position:absolute;left:50%;top:50%;width:100%;height:100%;display:inline-block;background-color:rgba(0,0,0,.16);border-radius:50%;transform:translate(-50%,-50%);z-index:2;transition:all .3s}.vue-slider-component .vue-slider-piecewise-item:first-child .vue-slider-piecewise-dot,.vue-slider-component .vue-slider-piecewise-item:last-child .vue-slider-piecewise-dot{visibility:hidden}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-piecewise-label,.vue-slider-component.vue-slider-horizontal .vue-slider-piecewise-label{position:absolute;display:inline-block;top:100%;left:50%;white-space:nowrap;font-size:12px;color:#333;transform:translate(-50%,8px);visibility:visible}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-piecewise-label,.vue-slider-component.vue-slider-vertical .vue-slider-piecewise-label{position:absolute;display:inline-block;top:50%;left:100%;white-space:nowrap;font-size:12px;color:#333;transform:translate(8px,-50%);visibility:visible}.vue-slider-component .vue-slider-sr-only{clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute!important}',""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var i=this[e];i[2]?t.push("@media "+i[2]+"{"+i[1]+"}"):t.push(i[1])}return t.join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var s={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(s[o]=!0)}for(r=0;r<e.length;r++){var n=e[r];"number"==typeof n[0]&&s[n[0]]||(i&&!n[2]?n[2]=i:i&&(n[2]="("+n[2]+") and ("+i+")"),t.push(n))}},t}},function(t,e){t.exports=function(t,e,i,s){var r,o=t=t||{},n=typeof t.default;"object"!==n&&"function"!==n||(r=t,o=t.default);var l="function"==typeof o?o.options:o;if(e&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns),i&&(l._scopeId=i),s){var a=Object.create(l.computed||null);Object.keys(s).forEach(function(t){var e=s[t];a[t]=function(){return e}}),l.computed=a}return{esModule:r,exports:o,options:l}}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],ref:"wrap",class:["vue-slider-component",t.flowDirection,t.disabledClass,t.stateClass,{"vue-slider-has-label":t.piecewiseLabel}],style:[t.wrapStyles,t.boolDisabled?t.disabledStyle:null],on:{click:t.wrapClick}},[i("div",{ref:"elem",staticClass:"vue-slider",style:[t.elemStyles,t.bgStyle],attrs:{"aria-hidden":"true"}},[t.isRange?[i("div",{key:"dot0",ref:"dot0",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&0===t.focusSlider,"vue-slider-dot-dragging":t.flag&&0===t.currentSlider,"vue-slider-dot-disabled":!t.boolDisabled&&t.disabledArray[0]}],style:[t.dotStyles,!t.boolDisabled&&t.disabledArray[0]?t.disabledDotStyles[0]:null,t.sliderStyles[0],t.focusFlag&&0===t.focusSlider?t.focusStyles[0]:null],on:{mousedown:function(e){t.moveStart(e,0)},touchstart:function(e){t.moveStart(e,0)}}},[i("div",{ref:"tooltip0",class:["vue-slider-tooltip-"+t.tooltipDirection[0],"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles[0]},[t._v(t._s(t.formatter?t.formatting(t.val[0]):t.val[0]))])],{value:t.val[0],index:0,disabled:!t.boolDisabled&&t.disabledArray[0]})],2)]),t._v(" "),i("div",{key:"dot1",ref:"dot1",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&1===t.focusSlider,"vue-slider-dot-dragging":t.flag&&1===t.currentSlider,"vue-slider-dot-disabled":!t.boolDisabled&&t.disabledArray[1]}],style:[t.dotStyles,!t.boolDisabled&&t.disabledArray[1]?t.disabledDotStyles[1]:null,t.sliderStyles[1],t.focusFlag&&1===t.focusSlider?t.focusStyles[1]:null],on:{mousedown:function(e){t.moveStart(e,1)},touchstart:function(e){t.moveStart(e,1)}}},[i("div",{ref:"tooltip1",class:["vue-slider-tooltip-"+t.tooltipDirection[1],"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles[1]},[t._v(t._s(t.formatter?t.formatting(t.val[1]):t.val[1]))])],{value:t.val[1],index:1,disabled:!t.boolDisabled&&t.disabledArray[1]})],2)])]:[i("div",{key:"dot",ref:"dot",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&0===t.focusSlider,"vue-slider-dot-dragging":t.flag&&0===t.currentSlider}],style:[t.dotStyles,t.sliderStyles,t.focusFlag&&0===t.focusSlider?t.focusStyles:null],on:{mousedown:t.moveStart,touchstart:t.moveStart}},[i("div",{class:["vue-slider-tooltip-"+t.tooltipDirection,"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles},[t._v(t._s(t.formatter?t.formatting(t.val):t.val))])],{value:t.val})],2)])],t._v(" "),i("ul",{staticClass:"vue-slider-piecewise"},t._l(t.piecewiseDotWrap,function(e,s){return i("li",{key:s,staticClass:"vue-slider-piecewise-item",style:[t.piecewiseDotStyle,e.style]},[t._t("piecewise",[t.piecewise?i("span",{staticClass:"vue-slider-piecewise-dot",style:[t.piecewiseStyle,e.inRange?t.piecewiseActiveStyle:null]}):t._e()],{label:e.label,index:s,first:0===s,last:s===t.piecewiseDotWrap.length-1,active:e.inRange}),t._v(" "),t._t("label",[t.piecewiseLabel?i("span",{staticClass:"vue-slider-piecewise-label",style:[t.labelStyle,e.inRange?t.labelActiveStyle:null]},[t._v("\n            "+t._s(e.label)+"\n          ")]):t._e()],{label:e.label,index:s,first:0===s,last:s===t.piecewiseDotWrap.length-1,active:e.inRange})],2)})),t._v(" "),i("div",{ref:"process",class:["vue-slider-process",{"vue-slider-process-dragable":t.isRange&&t.processDragable}],style:t.processStyle,on:{click:t.processClick,mousedown:function(e){t.moveStart(e,0,!0)},touchstart:function(e){t.moveStart(e,0,!0)}}},[i("div",{ref:"mergedTooltip",staticClass:"vue-merged-tooltip",class:["vue-slider-tooltip-"+t.tooltipDirection[0],"vue-slider-tooltip-wrap"],style:t.tooltipMergedPosition},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles},[t._v("\n            "+t._s(t.mergeFormatter?t.mergeFormatting(t.val[0],t.val[1]):t.formatter?t.val[0]===t.val[1]?t.formatting(t.val[0]):t.formatting(t.val[0])+" - "+t.formatting(t.val[1]):t.val[0]===t.val[1]?t.val[0]:t.val[0]+" - "+t.val[1])+"\n          ")])])],2)]),t._v(" "),t.isRange||t.data?t._e():i("input",{directives:[{name:"model",rawName:"v-model",value:t.val,expression:"val"}],staticClass:"vue-slider-sr-only",attrs:{type:"range",min:t.min,max:t.max},domProps:{value:t.val},on:{__r:function(e){t.val=e.target.value}}})],2)])},staticRenderFns:[]}},function(t,e,i){var s=i(3);"string"==typeof s&&(s=[[t.i,s,""]]),s.locals&&(t.exports=s.locals);i(8)("743d98f5",s,!0)},function(t,e,i){function s(t){for(var e=0;e<t.length;e++){var i=t[e],s=d[i.id];if(s){s.refs++;for(var r=0;r<s.parts.length;r++)s.parts[r](i.parts[r]);for(;r<i.parts.length;r++)s.parts.push(o(i.parts[r]));s.parts.length>i.parts.length&&(s.parts.length=i.parts.length)}else{for(var n=[],r=0;r<i.parts.length;r++)n.push(o(i.parts[r]));d[i.id]={id:i.id,refs:1,parts:n}}}}function r(){var t=document.createElement("style");return t.type="text/css",h.appendChild(t),t}function o(t){var e,i,s=document.querySelector('style[data-vue-ssr-id~="'+t.id+'"]');if(s){if(f)return v;s.parentNode.removeChild(s)}if(m){var o=p++;s=c||(c=r()),e=n.bind(null,s,o,!1),i=n.bind(null,s,o,!0)}else s=r(),e=l.bind(null,s),i=function(){s.parentNode.removeChild(s)};return e(t),function(s){if(s){if(s.css===t.css&&s.media===t.media&&s.sourceMap===t.sourceMap)return;e(t=s)}else i()}}function n(t,e,i,s){var r=i?"":s.css;if(t.styleSheet)t.styleSheet.cssText=g(e,r);else{var o=document.createTextNode(r),n=t.childNodes;n[e]&&t.removeChild(n[e]),n.length?t.insertBefore(o,n[e]):t.appendChild(o)}}function l(t,e){var i=e.css,s=e.media,r=e.sourceMap;if(s&&t.setAttribute("media",s),r&&(i+="\n/*# sourceURL="+r.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}var a="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!a)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var u=i(9),d={},h=a&&(document.head||document.getElementsByTagName("head")[0]),c=null,p=0,f=!1,v=function(){},m="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,i){f=i;var r=u(t,e);return s(r),function(e){for(var i=[],o=0;o<r.length;o++){var n=r[o],l=d[n.id];l.refs--,i.push(l)}e?(r=u(t,e),s(r)):r=[];for(var o=0;o<i.length;o++){var l=i[o];if(0===l.refs){for(var a=0;a<l.parts.length;a++)l.parts[a]();delete d[l.id]}}}};var g=function(){var t=[];return function(e,i){return t[e]=i,t.filter(Boolean).join("\n")}}()},function(t,e){t.exports=function(t,e){for(var i=[],s={},r=0;r<e.length;r++){var o=e[r],n=o[0],l=o[1],a=o[2],u=o[3],d={id:t+":"+r,css:l,media:a,sourceMap:u};s[n]?s[n].parts.push(d):i.push(s[n]={id:n,parts:[d]})}return i}}])});
+var disposed = false
+function injectStyle (ssrContext) {
+  if (disposed) return
+  __webpack_require__(17)
+}
+var normalizeComponent = __webpack_require__(1)
+/* script */
+var __vue_script__ = __webpack_require__(22)
+/* template */
+var __vue_template__ = __webpack_require__(23)
+/* template functional */
+var __vue_template_functional__ = false
+/* styles */
+var __vue_styles__ = injectStyle
+/* scopeId */
+var __vue_scopeId__ = null
+/* moduleIdentifier (server only) */
+var __vue_module_identifier__ = null
+var Component = normalizeComponent(
+  __vue_script__,
+  __vue_template__,
+  __vue_template_functional__,
+  __vue_styles__,
+  __vue_scopeId__,
+  __vue_module_identifier__
+)
+Component.options.__file = "src/Resources/assets/js/components/image-slider.vue"
+
+/* hot reload */
+if (false) {(function () {
+  var hotAPI = require("vue-hot-reload-api")
+  hotAPI.install(require("vue"), false)
+  if (!hotAPI.compatible) return
+  module.hot.accept()
+  if (!module.hot.data) {
+    hotAPI.createRecord("data-v-74f1fa5f", Component.options)
+  } else {
+    hotAPI.reload("data-v-74f1fa5f", Component.options)
+  }
+  module.hot.dispose(function (data) {
+    disposed = true
+  })
+})()}
+
+module.exports = Component.exports
+
 
 /***/ }),
-/* 20 */
-/***/ (function(module, exports) {
+/* 17 */
+/***/ (function(module, exports, __webpack_require__) {
 
-// removed by extract-text-webpack-plugin
+// style-loader: Adds some css to the DOM by adding a <style> tag
+
+// load the styles
+var content = __webpack_require__(18);
+if(typeof content === 'string') content = [[module.i, content, '']];
+if(content.locals) module.exports = content.locals;
+// add the styles to the DOM
+var update = __webpack_require__(20)("b16cefe6", content, false, {});
+// Hot Module Replacement
+if(false) {
+ // When the styles change, update the <style> tags
+ if(!content.locals) {
+   module.hot.accept("!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-74f1fa5f\",\"scoped\":false,\"hasInlineConfig\":true}!../../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./image-slider.vue", function() {
+     var newContent = require("!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-74f1fa5f\",\"scoped\":false,\"hasInlineConfig\":true}!../../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./image-slider.vue");
+     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
+     update(newContent);
+   });
+ }
+ // When the module is disposed, remove the <style> tags
+ module.hot.dispose(function() { update(); });
+}
 
 /***/ }),
-/* 21 */,
-/* 22 */
+/* 18 */
+/***/ (function(module, exports, __webpack_require__) {
+
+exports = module.exports = __webpack_require__(19)(false);
+// imports
+
+
+// module
+exports.push([module.i, "\n.slide-enter-active {\n\n    -webkit-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);\n\n    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);\n}\n.slide-leave-active {\n\n    -webkit-transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n\n    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n.slide-enter, .slide-leave-to {\n\n    -webkit-transform: scaleY(0) translateZ(0);\n    transform: scaleY(0) translateZ(0);\n    opacity: 0;\n}\n\n", ""]);
+
+// exports
+
+
+/***/ }),
+/* 19 */
 /***/ (function(module, exports) {
 
 /*
@@ -29418,100 +29493,7 @@ function toComment(sourceMap) {
 
 
 /***/ }),
-/* 23 */,
-/* 24 */,
-/* 25 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var disposed = false
-function injectStyle (ssrContext) {
-  if (disposed) return
-  __webpack_require__(26)
-}
-var normalizeComponent = __webpack_require__(1)
-/* script */
-var __vue_script__ = __webpack_require__(30)
-/* template */
-var __vue_template__ = __webpack_require__(31)
-/* template functional */
-var __vue_template_functional__ = false
-/* styles */
-var __vue_styles__ = injectStyle
-/* scopeId */
-var __vue_scopeId__ = null
-/* moduleIdentifier (server only) */
-var __vue_module_identifier__ = null
-var Component = normalizeComponent(
-  __vue_script__,
-  __vue_template__,
-  __vue_template_functional__,
-  __vue_styles__,
-  __vue_scopeId__,
-  __vue_module_identifier__
-)
-Component.options.__file = "src/Resources/assets/js/components/image-slider.vue"
-
-/* hot reload */
-if (false) {(function () {
-  var hotAPI = require("vue-hot-reload-api")
-  hotAPI.install(require("vue"), false)
-  if (!hotAPI.compatible) return
-  module.hot.accept()
-  if (!module.hot.data) {
-    hotAPI.createRecord("data-v-74f1fa5f", Component.options)
-  } else {
-    hotAPI.reload("data-v-74f1fa5f", Component.options)
-  }
-  module.hot.dispose(function (data) {
-    disposed = true
-  })
-})()}
-
-module.exports = Component.exports
-
-
-/***/ }),
-/* 26 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// style-loader: Adds some css to the DOM by adding a <style> tag
-
-// load the styles
-var content = __webpack_require__(27);
-if(typeof content === 'string') content = [[module.i, content, '']];
-if(content.locals) module.exports = content.locals;
-// add the styles to the DOM
-var update = __webpack_require__(28)("b16cefe6", content, false, {});
-// Hot Module Replacement
-if(false) {
- // When the styles change, update the <style> tags
- if(!content.locals) {
-   module.hot.accept("!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-74f1fa5f\",\"scoped\":false,\"hasInlineConfig\":true}!../../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./image-slider.vue", function() {
-     var newContent = require("!!../../../../../node_modules/css-loader/index.js!../../../../../node_modules/vue-loader/lib/style-compiler/index.js?{\"vue\":true,\"id\":\"data-v-74f1fa5f\",\"scoped\":false,\"hasInlineConfig\":true}!../../../../../node_modules/vue-loader/lib/selector.js?type=styles&index=0!./image-slider.vue");
-     if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
-     update(newContent);
-   });
- }
- // When the module is disposed, remove the <style> tags
- module.hot.dispose(function() { update(); });
-}
-
-/***/ }),
-/* 27 */
-/***/ (function(module, exports, __webpack_require__) {
-
-exports = module.exports = __webpack_require__(22)(false);
-// imports
-
-
-// module
-exports.push([module.i, "\n.slide-enter-active {\n\n    -webkit-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);\n\n    transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);\n}\n.slide-leave-active {\n\n    -webkit-transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n\n    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n.slide-enter, .slide-leave-to {\n\n    -webkit-transform: scaleY(0) translateZ(0);\n    transform: scaleY(0) translateZ(0);\n    opacity: 0;\n}\n\n", ""]);
-
-// exports
-
-
-/***/ }),
-/* 28 */
+/* 20 */
 /***/ (function(module, exports, __webpack_require__) {
 
 /*
@@ -29530,7 +29512,7 @@ if (typeof DEBUG !== 'undefined' && DEBUG) {
   ) }
 }
 
-var listToStyles = __webpack_require__(29)
+var listToStyles = __webpack_require__(21)
 
 /*
 type StyleObject = {
@@ -29739,7 +29721,7 @@ function applyToTag (styleElement, obj) {
 
 
 /***/ }),
-/* 29 */
+/* 21 */
 /***/ (function(module, exports) {
 
 /**
@@ -29772,7 +29754,7 @@ module.exports = function listToStyles (parentId, list) {
 
 
 /***/ }),
-/* 30 */
+/* 22 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -29870,7 +29852,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 });
 
 /***/ }),
-/* 31 */
+/* 23 */
 /***/ (function(module, exports, __webpack_require__) {
 
 var render = function() {
@@ -29924,5 +29906,17 @@ if (false) {
   }
 }
 
+/***/ }),
+/* 24 */
+/***/ (function(module, exports, __webpack_require__) {
+
+!function(t,e){ true?module.exports=e():"function"==typeof define&&define.amd?define("vue-slider-component",[],e):"object"==typeof exports?exports["vue-slider-component"]=e():t["vue-slider-component"]=e()}(this,function(){return function(t){function e(s){if(i[s])return i[s].exports;var r=i[s]={i:s,l:!1,exports:{}};return t[s].call(r.exports,r,r.exports,e),r.l=!0,r.exports}var i={};return e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,s){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:s})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=2)}([function(t,e,i){i(7);var s=i(5)(i(1),i(6),null,null);t.exports=s.exports},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var s=function(){var t="undefined"!=typeof window?window.devicePixelRatio||1:1;return function(e){return Math.round(e*t)/t}}();e.default={name:"VueSliderComponent",props:{width:{type:[Number,String],default:"auto"},height:{type:[Number,String],default:6},data:{type:Array,default:null},dotSize:{type:Number,default:16},dotWidth:{type:Number,required:!1},dotHeight:{type:Number,required:!1},min:{type:Number,default:0},max:{type:Number,default:100},interval:{type:Number,default:1},show:{type:Boolean,default:!0},disabled:{type:[Boolean,Array],default:!1},piecewise:{type:Boolean,default:!1},tooltip:{type:[String,Boolean],default:"always"},eventType:{type:String,default:"auto"},direction:{type:String,default:"horizontal"},reverse:{type:Boolean,default:!1},lazy:{type:Boolean,default:!1},clickable:{type:Boolean,default:!0},speed:{type:Number,default:.5},realTime:{type:Boolean,default:!1},stopPropagation:{type:Boolean,default:!1},value:{type:[String,Number,Array,Object],default:0},piecewiseLabel:{type:Boolean,default:!1},debug:{type:Boolean,default:!0},fixed:{type:Boolean,default:!1},processDragable:{type:Boolean,default:!1},useKeyboard:{type:Boolean,default:!1},actionsKeyboard:{type:Array,default:function(){return[function(t){return t-1},function(t){return t+1}]}},tooltipMerge:{type:Boolean,default:!0},startAnimation:{type:Boolean,default:!1},sliderStyle:[Array,Object,Function],focusStyle:[Array,Object,Function],tooltipDir:[Array,String],formatter:[String,Function],mergeFormatter:[String,Function],piecewiseStyle:Object,disabledStyle:Object,piecewiseActiveStyle:Object,processStyle:Object,bgStyle:Object,tooltipStyle:[Array,Object,Function],disabledDotStyle:[Array,Object,Function],labelStyle:Object,labelActiveStyle:Object},data:function(){return{flag:!1,keydownFlag:null,focusFlag:!1,processFlag:!1,processSign:null,size:0,fixedValue:0,focusSlider:0,currentValue:0,currentSlider:0,isComponentExists:!0,isMounted:!1}},computed:{dotWidthVal:function(){return"number"==typeof this.dotWidth?this.dotWidth:this.dotSize},dotHeightVal:function(){return"number"==typeof this.dotHeight?this.dotHeight:this.dotSize},flowDirection:function(){return"vue-slider-"+this.direction+(this.reverse?"-reverse":"")},tooltipMergedPosition:function(){if(!this.isMounted)return{};var t=this.tooltipDirection[0];if(this.$refs.dot0){if("vertical"===this.direction){var e={};return e[t]="-"+(this.dotHeightVal/2-this.width/2+9)+"px",e}var i={};return i[t]="-"+(this.dotWidthVal/2-this.height/2+9)+"px",i.left="50%",i}},tooltipDirection:function(){var t=this.tooltipDir||("vertical"===this.direction?"left":"top");return Array.isArray(t)?this.isRange?t:t[1]:this.isRange?[t,t]:t},tooltipStatus:function(){return"hover"===this.tooltip&&this.flag?"vue-slider-always":this.tooltip?"vue-slider-"+this.tooltip:""},tooltipClass:function(){return["vue-slider-tooltip-"+this.tooltipDirection,"vue-slider-tooltip"]},disabledArray:function(){return Array.isArray(this.disabled)?this.disabled:[this.disabled,this.disabled]},boolDisabled:function(){return this.disabledArray.every(function(t){return!0===t})},isDisabled:function(){return"none"===this.eventType||this.boolDisabled},disabledClass:function(){return this.boolDisabled?"vue-slider-disabled":""},stateClass:function(){return{"vue-slider-state-process-drag":this.processFlag,"vue-slider-state-drag":this.flag&&!this.processFlag&&!this.keydownFlag,"vue-slider-state-focus":this.focusFlag}},isRange:function(){return Array.isArray(this.value)},slider:function(){return this.isRange?[this.$refs.dot0,this.$refs.dot1]:this.$refs.dot},minimum:function(){return this.data?0:this.min},val:{get:function(){return this.data?this.isRange?[this.data[this.currentValue[0]],this.data[this.currentValue[1]]]:this.data[this.currentValue]:this.currentValue},set:function(t){if(this.data)if(this.isRange){var e=this.data.indexOf(t[0]),i=this.data.indexOf(t[1]);e>-1&&i>-1&&(this.currentValue=[e,i])}else{var s=this.data.indexOf(t);s>-1&&(this.currentValue=s)}else this.currentValue=t}},currentIndex:function(){return this.isRange?this.data?this.currentValue:[this.getIndexByValue(this.currentValue[0]),this.getIndexByValue(this.currentValue[1])]:this.getIndexByValue(this.currentValue)},indexRange:function(){return this.isRange?this.currentIndex:[0,this.currentIndex]},maximum:function(){return this.data?this.data.length-1:this.max},multiple:function(){var t=(""+this.interval).split(".")[1];return t?Math.pow(10,t.length):1},spacing:function(){return this.data?1:this.interval},total:function(){return this.data?this.data.length-1:(Math.floor((this.maximum-this.minimum)*this.multiple)%(this.interval*this.multiple)!=0&&this.printError("Prop[interval] is illegal, Please make sure that the interval can be divisible"),(this.maximum-this.minimum)/this.interval)},gap:function(){return this.size/this.total},position:function(){return this.isRange?[(this.currentValue[0]-this.minimum)/this.spacing*this.gap,(this.currentValue[1]-this.minimum)/this.spacing*this.gap]:(this.currentValue-this.minimum)/this.spacing*this.gap},limit:function(){return this.isRange?this.fixed?[[0,(this.total-this.fixedValue)*this.gap],[this.fixedValue*this.gap,this.size]]:[[0,this.position[1]],[this.position[0],this.size]]:[0,this.size]},valueLimit:function(){return this.isRange?this.fixed?[[this.minimum,this.maximum-this.fixedValue*(this.spacing*this.multiple)/this.multiple],[this.minimum+this.fixedValue*(this.spacing*this.multiple)/this.multiple,this.maximum]]:[[this.minimum,this.currentValue[1]],[this.currentValue[0],this.maximum]]:[this.minimum,this.maximum]},idleSlider:function(){return 0===this.currentSlider?1:0},wrapStyles:function(){return"vertical"===this.direction?{height:"number"==typeof this.height?this.height+"px":this.height,padding:this.dotHeightVal/2+"px "+this.dotWidthVal/2+"px"}:{width:"number"==typeof this.width?this.width+"px":this.width,padding:this.dotHeightVal/2+"px "+this.dotWidthVal/2+"px"}},sliderStyles:function(){return Array.isArray(this.sliderStyle)?this.isRange?this.sliderStyle:this.sliderStyle[1]:"function"==typeof this.sliderStyle?this.sliderStyle(this.val,this.currentIndex):this.isRange?[this.sliderStyle,this.sliderStyle]:this.sliderStyle},focusStyles:function(){return Array.isArray(this.focusStyle)?this.isRange?this.focusStyle:this.focusStyle[1]:"function"==typeof this.focusStyle?this.focusStyle(this.val,this.currentIndex):this.isRange?[this.focusStyle,this.focusStyle]:this.focusStyle},disabledDotStyles:function(){var t=this.disabledDotStyle;if(Array.isArray(t))return t;if("function"==typeof t){var e=t(this.val,this.currentIndex);return Array.isArray(e)?e:[e,e]}return t?[t,t]:[{backgroundColor:"#ccc"},{backgroundColor:"#ccc"}]},tooltipStyles:function(){return Array.isArray(this.tooltipStyle)?this.isRange?this.tooltipStyle:this.tooltipStyle[1]:"function"==typeof this.tooltipStyle?this.tooltipStyle(this.val,this.currentIndex):this.isRange?[this.tooltipStyle,this.tooltipStyle]:this.tooltipStyle},elemStyles:function(){return"vertical"===this.direction?{width:this.width+"px",height:"100%"}:{height:this.height+"px"}},dotStyles:function(){return"vertical"===this.direction?{width:this.dotWidthVal+"px",height:this.dotHeightVal+"px",left:-(this.dotWidthVal-this.width)/2+"px"}:{width:this.dotWidthVal+"px",height:this.dotHeightVal+"px",top:-(this.dotHeightVal-this.height)/2+"px"}},piecewiseDotStyle:function(){return"vertical"===this.direction?{width:this.width+"px",height:this.width+"px"}:{width:this.height+"px",height:this.height+"px"}},piecewiseDotWrap:function(){if(!this.piecewise&&!this.piecewiseLabel)return!1;for(var t=[],e=0;e<=this.total;e++){var i="vertical"===this.direction?{bottom:this.gap*e-this.width/2+"px",left:0}:{left:this.gap*e-this.height/2+"px",top:0},s=this.reverse?this.total-e:e,r=this.data?this.data[s]:this.spacing*s+this.min;t.push({style:i,label:this.formatter?this.formatting(r):r,inRange:s>=this.indexRange[0]&&s<=this.indexRange[1]})}return t}},watch:{value:function(t){this.flag||this.setValue(t,!0)},max:function(t){if(t<this.min)return this.printError("The maximum value can not be less than the minimum value.");var e=this.limitValue(this.val);this.setValue(e),this.refresh()},min:function(t){if(t>this.max)return this.printError("The minimum value can not be greater than the maximum value.");var e=this.limitValue(this.val);this.setValue(e),this.refresh()},show:function(t){var e=this;t&&!this.size&&this.$nextTick(function(){e.refresh()})},fixed:function(){this.computedFixedValue()}},methods:{bindEvents:function(){document.addEventListener("touchmove",this.moving,{passive:!1}),document.addEventListener("touchend",this.moveEnd,{passive:!1}),document.addEventListener("mousedown",this.blurSlider),document.addEventListener("mousemove",this.moving),document.addEventListener("mouseup",this.moveEnd),document.addEventListener("mouseleave",this.moveEnd),document.addEventListener("keydown",this.handleKeydown),document.addEventListener("keyup",this.handleKeyup),window.addEventListener("resize",this.refresh),this.isRange&&this.tooltipMerge&&(this.$refs.dot0.addEventListener("transitionend",this.handleOverlapTooltip),this.$refs.dot1.addEventListener("transitionend",this.handleOverlapTooltip))},unbindEvents:function(){document.removeEventListener("touchmove",this.moving),document.removeEventListener("touchend",this.moveEnd),document.removeEventListener("mousedown",this.blurSlider),document.removeEventListener("mousemove",this.moving),document.removeEventListener("mouseup",this.moveEnd),document.removeEventListener("mouseleave",this.moveEnd),document.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("keyup",this.handleKeyup),window.removeEventListener("resize",this.refresh),this.isRange&&this.tooltipMerge&&(this.$refs.dot0.removeEventListener("transitionend",this.handleOverlapTooltip),this.$refs.dot1.removeEventListener("transitionend",this.handleOverlapTooltip))},handleKeydown:function(t){if(!this.useKeyboard||!this.focusFlag)return!1;switch(t.keyCode){case 37:case 40:t.preventDefault(),this.keydownFlag=!0,this.flag=!0,this.changeFocusSlider(this.actionsKeyboard[0]);break;case 38:case 39:t.preventDefault(),this.keydownFlag=!0,this.flag=!0,this.changeFocusSlider(this.actionsKeyboard[1])}},handleKeyup:function(){this.keydownFlag&&(this.keydownFlag=!1,this.flag=!1)},changeFocusSlider:function(t){var e=this;if(this.isRange){var i=this.currentIndex.map(function(i,s){if(s===e.focusSlider||e.fixed){var r=t(i),o=e.fixed?e.valueLimit[s]:[0,e.total];if(r<=o[1]&&r>=o[0])return r}return i});i[0]>i[1]&&(this.focusSlider=0===this.focusSlider?1:0,i=i.reverse()),this.setIndex(i)}else this.setIndex(t(this.currentIndex))},blurSlider:function(t){var e=this.isRange?this.$refs["dot"+this.focusSlider]:this.$refs.dot;if(!e||e===t.target)return!1;this.focusFlag=!1},formatting:function(t){return"string"==typeof this.formatter?this.formatter.replace(/\{value\}/,t):this.formatter(t)},mergeFormatting:function(t,e){return"string"==typeof this.mergeFormatter?this.mergeFormatter.replace(/\{(value1|value2)\}/g,function(i,s){return"value1"===s?t:e}):this.mergeFormatter(t,e)},getPos:function(t){return this.realTime&&this.getStaticData(),"vertical"===this.direction?this.reverse?t.pageY-this.offset:this.size-(t.pageY-this.offset):this.reverse?this.size-(t.clientX-this.offset):t.clientX-this.offset},processClick:function(t){this.fixed&&t.stopPropagation()},wrapClick:function(t){var e=this;if(this.isDisabled||!this.clickable||this.processFlag)return!1;var i=this.getPos(t);if(this.isRange)if(this.disabledArray.every(function(t){return!1===t}))this.currentSlider=i>(this.position[1]-this.position[0])/2+this.position[0]?1:0;else if(this.disabledArray[0]){if(i<this.position[0])return!1;this.currentSlider=1}else if(this.disabledArray[1]){if(i>this.position[1])return!1;this.currentSlider=0}if(this.disabledArray[this.currentSlider])return!1;if(this.setValueOnPos(i),this.isRange&&this.tooltipMerge){var s=setInterval(function(){return e.handleOverlapTooltip()},16.7);setTimeout(function(){return window.clearInterval(s)},1e3*this.speed)}},moveStart:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments[2];if(this.disabledArray[e])return!1;if(this.stopPropagation&&t.stopPropagation(),this.isRange&&(this.currentSlider=e,i)){if(!this.processDragable)return!1;this.processFlag=!0,this.processSign={pos:this.position,start:this.getPos(t.targetTouches&&t.targetTouches[0]?t.targetTouches[0]:t)}}!i&&this.useKeyboard&&(this.focusFlag=!0,this.focusSlider=e),this.flag=!0,this.$emit("drag-start",this)},moving:function(t){if(this.stopPropagation&&t.stopPropagation(),!this.flag)return!1;t.preventDefault(),t.targetTouches&&t.targetTouches[0]&&(t=t.targetTouches[0]),this.processFlag?(this.currentSlider=0,this.setValueOnPos(this.processSign.pos[0]+this.getPos(t)-this.processSign.start,!0),this.currentSlider=1,this.setValueOnPos(this.processSign.pos[1]+this.getPos(t)-this.processSign.start,!0)):this.setValueOnPos(this.getPos(t),!0),this.isRange&&this.tooltipMerge&&this.handleOverlapTooltip()},moveEnd:function(t){var e=this;if(this.stopPropagation&&t.stopPropagation(),!this.flag)return!1;this.$emit("drag-end",this),this.lazy&&this.isDiff(this.val,this.value)&&this.syncValue(),this.flag=!1,window.setTimeout(function(){e.processFlag=!1},0),this.setPosition()},setValueOnPos:function(t,e){var i=this.isRange?this.limit[this.currentSlider]:this.limit,s=this.isRange?this.valueLimit[this.currentSlider]:this.valueLimit;if(t>=i[0]&&t<=i[1]){this.setTransform(t);var r=this.getValueByIndex(Math.round(t/this.gap));this.setCurrentValue(r,e),this.isRange&&this.fixed&&(this.setTransform(t+this.fixedValue*this.gap*(0===this.currentSlider?1:-1),!0),this.setCurrentValue((r*this.multiple+this.fixedValue*this.spacing*this.multiple*(0===this.currentSlider?1:-1))/this.multiple,e,!0))}else t<i[0]?(this.setTransform(i[0]),this.setCurrentValue(s[0]),this.isRange&&this.fixed?(this.setTransform(this.limit[this.idleSlider][0],!0),this.setCurrentValue(this.valueLimit[this.idleSlider][0],e,!0)):this.fixed||this.disabledArray[0]||1!==this.currentSlider||(this.focusSlider=0,this.currentSlider=0)):(this.setTransform(i[1]),this.setCurrentValue(s[1]),this.isRange&&this.fixed?(this.setTransform(this.limit[this.idleSlider][1],!0),this.setCurrentValue(this.valueLimit[this.idleSlider][1],e,!0)):this.fixed||this.disabledArray[1]||0!==this.currentSlider||(this.focusSlider=1,this.currentSlider=1))},isDiff:function(t,e){return Object.prototype.toString.call(t)!==Object.prototype.toString.call(e)||(Array.isArray(t)&&t.length===e.length?t.some(function(t,i){return t!==e[i]}):t!==e)},setCurrentValue:function(t,e,i){var s=i?this.idleSlider:this.currentSlider;if(t<this.minimum||t>this.maximum)return!1;this.isRange?this.isDiff(this.currentValue[s],t)&&(this.currentValue.splice(s,1,t),this.lazy&&this.flag||this.syncValue()):this.isDiff(this.currentValue,t)&&(this.currentValue=t,this.lazy&&this.flag||this.syncValue()),e||this.setPosition()},getValueByIndex:function(t){return(this.spacing*this.multiple*t+this.minimum*this.multiple)/this.multiple},getIndexByValue:function(t){return Math.round((t-this.minimum)*this.multiple)/(this.spacing*this.multiple)},setIndex:function(t){if(Array.isArray(t)&&this.isRange){var e=void 0;e=this.data?[this.data[t[0]],this.data[t[1]]]:[this.getValueByIndex(t[0]),this.getValueByIndex(t[1])],this.setValue(e)}else t=this.getValueByIndex(t),this.isRange&&(this.currentSlider=t>(this.currentValue[1]-this.currentValue[0])/2+this.currentValue[0]?1:0),this.setCurrentValue(t)},setValue:function(t,e,i){var s=this;if(this.isDiff(this.val,t)){var r=this.limitValue(t);this.val=this.isRange?r.concat():r,this.computedFixedValue(),this.syncValue(e)}this.$nextTick(function(){return s.setPosition(i)})},computedFixedValue:function(){if(!this.fixed)return this.fixedValue=0,!1;this.fixedValue=this.currentIndex[1]-this.currentIndex[0]},setPosition:function(t){this.flag||this.setTransitionTime(void 0===t?this.speed:t),this.isRange?(this.setTransform(this.position[0],1===this.currentSlider),this.setTransform(this.position[1],0===this.currentSlider)):this.setTransform(this.position),this.flag||this.setTransitionTime(0)},setTransform:function(t,e){var i=e?this.idleSlider:this.currentSlider,r=s(("vertical"===this.direction?this.dotHeightVal/2-t:t-this.dotWidthVal/2)*(this.reverse?-1:1)),o="vertical"===this.direction?"translateY("+r+"px)":"translateX("+r+"px)",n=this.fixed?this.fixedValue*this.gap+"px":(0===i?this.position[1]-t:t-this.position[0])+"px",l=this.fixed?(0===i?t:t-this.fixedValue*this.gap)+"px":(0===i?t:this.position[0])+"px";this.isRange?(this.slider[i].style.transform=o,this.slider[i].style.WebkitTransform=o,this.slider[i].style.msTransform=o,"vertical"===this.direction?(this.$refs.process.style.height=n,this.$refs.process.style[this.reverse?"top":"bottom"]=l):(this.$refs.process.style.width=n,this.$refs.process.style[this.reverse?"right":"left"]=l)):(this.slider.style.transform=o,this.slider.style.WebkitTransform=o,this.slider.style.msTransform=o,"vertical"===this.direction?(this.$refs.process.style.height=t+"px",this.$refs.process.style[this.reverse?"top":"bottom"]=0):(this.$refs.process.style.width=t+"px",this.$refs.process.style[this.reverse?"right":"left"]=0))},setTransitionTime:function(t){if(t||this.$refs.process.offsetWidth,this.isRange){for(var e=0;e<this.slider.length;e++)this.slider[e].style.transitionDuration=t+"s",this.slider[e].style.WebkitTransitionDuration=t+"s";this.$refs.process.style.transitionDuration=t+"s",this.$refs.process.style.WebkitTransitionDuration=t+"s"}else this.slider.style.transitionDuration=t+"s",this.slider.style.WebkitTransitionDuration=t+"s",this.$refs.process.style.transitionDuration=t+"s",this.$refs.process.style.WebkitTransitionDuration=t+"s"},limitValue:function(t){var e=this;if(this.data)return t;var i=function(i){return i<e.min?(e.printError("The value of the slider is "+t+", the minimum value is "+e.min+", the value of this slider can not be less than the minimum value"),e.min):i>e.max?(e.printError("The value of the slider is "+t+", the maximum value is "+e.max+", the value of this slider can not be greater than the maximum value"),e.max):i};return this.isRange?t.map(function(t){return i(t)}):i(t)},syncValue:function(t){var e=this.isRange?this.val.concat():this.val;this.$emit("input",e),t||this.$emit("callback",e)},getValue:function(){return this.val},getIndex:function(){return this.currentIndex},getStaticData:function(){this.$refs.elem&&(this.size="vertical"===this.direction?this.$refs.elem.offsetHeight:this.$refs.elem.offsetWidth,this.offset="vertical"===this.direction?this.$refs.elem.getBoundingClientRect().top+window.pageYOffset||document.documentElement.scrollTop:this.$refs.elem.getBoundingClientRect().left)},refresh:function(){this.$refs.elem&&(this.getStaticData(),this.computedFixedValue(),this.setPosition())},printError:function(t){this.debug&&console.error("[VueSlider error]: "+t)},handleOverlapTooltip:function(){var t=this.tooltipDirection[0]===this.tooltipDirection[1];if(this.isRange&&t){var e=this.reverse?this.$refs.tooltip1:this.$refs.tooltip0,i=this.reverse?this.$refs.tooltip0:this.$refs.tooltip1,s=e.getBoundingClientRect().right,r=i.getBoundingClientRect().left,o=e.getBoundingClientRect().y,n=i.getBoundingClientRect().y+i.getBoundingClientRect().height,l="horizontal"===this.direction&&s>r,a="vertical"===this.direction&&n>o;l||a?this.handleDisplayMergedTooltip(!0):this.handleDisplayMergedTooltip(!1)}},handleDisplayMergedTooltip:function(t){var e=this.$refs.tooltip0,i=this.$refs.tooltip1,s=this.$refs.process.getElementsByClassName("vue-merged-tooltip")[0];t?(e.style.visibility="hidden",i.style.visibility="hidden",s.style.visibility="visible"):(e.style.visibility="visible",i.style.visibility="visible",s.style.visibility="hidden")}},mounted:function(){var t=this;if(this.isComponentExists=!0,"undefined"==typeof window||"undefined"==typeof document)return this.printError("window or document is undefined, can not be initialization.");this.$nextTick(function(){t.isComponentExists&&(t.getStaticData(),t.setValue(t.limitValue(t.value),!0,t.startAnimation?t.speed:0),t.bindEvents())}),this.isMounted=!0},beforeDestroy:function(){this.isComponentExists=!1,this.unbindEvents()}}},function(t,e,i){"use strict";var s=i(0);t.exports=s},function(t,e,i){e=t.exports=i(4)(),e.push([t.i,'.vue-slider-component{position:relative;box-sizing:border-box;-ms-user-select:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-o-user-select:none}.vue-slider-component.vue-slider-disabled{opacity:.5;cursor:not-allowed}.vue-slider-component.vue-slider-has-label{margin-bottom:15px}.vue-slider-component.vue-slider-disabled .vue-slider-dot{cursor:not-allowed}.vue-slider-component .vue-slider{position:relative;display:block;border-radius:15px;background-color:#ccc}.vue-slider-component .vue-slider:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;z-index:2}.vue-slider-component .vue-slider-process{position:absolute;border-radius:15px;background-color:#3498db;transition:all 0s;z-index:1}.vue-slider-component .vue-slider-process.vue-slider-process-dragable{cursor:pointer;z-index:3}.vue-slider-component.vue-slider-horizontal .vue-slider-process{width:0;height:100%;top:0;left:0;will-change:width}.vue-slider-component.vue-slider-vertical .vue-slider-process{width:100%;height:0;bottom:0;left:0;will-change:height}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-process{width:0;height:100%;top:0;right:0}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-process{width:100%;height:0;top:0;left:0}.vue-slider-component .vue-slider-dot{position:absolute;border-radius:50%;background-color:#fff;box-shadow:.5px .5px 2px 1px rgba(0,0,0,.32);transition:all 0s;will-change:transform;cursor:pointer;z-index:5}.vue-slider-component .vue-slider-dot.vue-slider-dot-focus{box-shadow:0 0 2px 1px #3498db}.vue-slider-component .vue-slider-dot.vue-slider-dot-dragging{z-index:5}.vue-slider-component .vue-slider-dot.vue-slider-dot-disabled{z-index:4}.vue-slider-component.vue-slider-horizontal .vue-slider-dot{left:0}.vue-slider-component.vue-slider-vertical .vue-slider-dot{bottom:0}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-dot{right:0}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-dot{top:0}.vue-slider-component .vue-slider-tooltip-wrap{display:none;position:absolute;z-index:9}.vue-slider-component .vue-slider-tooltip{display:block;font-size:14px;white-space:nowrap;padding:2px 5px;min-width:20px;text-align:center;color:#fff;border-radius:5px;border:1px solid #3498db;background-color:#3498db}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-top{top:-9px;left:50%;transform:translate(-50%,-100%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-bottom{bottom:-9px;left:50%;transform:translate(-50%,100%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-left{top:50%;left:-9px;transform:translate(-100%,-50%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-right{top:50%;right:-9px;transform:translate(100%,-50%)}.vue-slider-component .vue-slider-tooltip-top .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-top .vue-slider-tooltip:before{content:"";position:absolute;bottom:-10px;left:50%;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-top-color:inherit;transform:translate(-50%)}.vue-slider-component .vue-slider-tooltip-wrap.vue-merged-tooltip{display:block;visibility:hidden}.vue-slider-component .vue-slider-tooltip-bottom .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-bottom .vue-slider-tooltip:before{content:"";position:absolute;top:-10px;left:50%;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-bottom-color:inherit;transform:translate(-50%)}.vue-slider-component .vue-slider-tooltip-left .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-left .vue-slider-tooltip:before{content:"";position:absolute;top:50%;right:-10px;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-left-color:inherit;transform:translateY(-50%)}.vue-slider-component .vue-slider-tooltip-right .vue-merged-tooltip .vue-slider-tooltip:before,.vue-slider-component .vue-slider-tooltip-wrap.vue-slider-tooltip-right .vue-slider-tooltip:before{content:"";position:absolute;top:50%;left:-10px;width:0;height:0;border:5px solid transparent;border:6px solid transparent\\0;border-right-color:inherit;transform:translateY(-50%)}.vue-slider-component .vue-slider-dot.vue-slider-hover:hover .vue-slider-tooltip-wrap{display:block}.vue-slider-component .vue-slider-dot.vue-slider-always .vue-slider-tooltip-wrap{display:block!important}.vue-slider-component .vue-slider-piecewise{position:absolute;width:100%;padding:0;margin:0;left:0;top:0;height:100%;list-style:none}.vue-slider-component .vue-slider-piecewise-item{position:absolute;width:8px;height:8px}.vue-slider-component .vue-slider-piecewise-dot{position:absolute;left:50%;top:50%;width:100%;height:100%;display:inline-block;background-color:rgba(0,0,0,.16);border-radius:50%;transform:translate(-50%,-50%);z-index:2;transition:all .3s}.vue-slider-component .vue-slider-piecewise-item:first-child .vue-slider-piecewise-dot,.vue-slider-component .vue-slider-piecewise-item:last-child .vue-slider-piecewise-dot{visibility:hidden}.vue-slider-component.vue-slider-horizontal-reverse .vue-slider-piecewise-label,.vue-slider-component.vue-slider-horizontal .vue-slider-piecewise-label{position:absolute;display:inline-block;top:100%;left:50%;white-space:nowrap;font-size:12px;color:#333;transform:translate(-50%,8px);visibility:visible}.vue-slider-component.vue-slider-vertical-reverse .vue-slider-piecewise-label,.vue-slider-component.vue-slider-vertical .vue-slider-piecewise-label{position:absolute;display:inline-block;top:50%;left:100%;white-space:nowrap;font-size:12px;color:#333;transform:translate(8px,-50%);visibility:visible}.vue-slider-component .vue-slider-sr-only{clip:rect(1px,1px,1px,1px);height:1px;width:1px;overflow:hidden;position:absolute!important}',""])},function(t,e){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],e=0;e<this.length;e++){var i=this[e];i[2]?t.push("@media "+i[2]+"{"+i[1]+"}"):t.push(i[1])}return t.join("")},t.i=function(e,i){"string"==typeof e&&(e=[[null,e,""]]);for(var s={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(s[o]=!0)}for(r=0;r<e.length;r++){var n=e[r];"number"==typeof n[0]&&s[n[0]]||(i&&!n[2]?n[2]=i:i&&(n[2]="("+n[2]+") and ("+i+")"),t.push(n))}},t}},function(t,e){t.exports=function(t,e,i,s){var r,o=t=t||{},n=typeof t.default;"object"!==n&&"function"!==n||(r=t,o=t.default);var l="function"==typeof o?o.options:o;if(e&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns),i&&(l._scopeId=i),s){var a=Object.create(l.computed||null);Object.keys(s).forEach(function(t){var e=s[t];a[t]=function(){return e}}),l.computed=a}return{esModule:r,exports:o,options:l}}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],ref:"wrap",class:["vue-slider-component",t.flowDirection,t.disabledClass,t.stateClass,{"vue-slider-has-label":t.piecewiseLabel}],style:[t.wrapStyles,t.boolDisabled?t.disabledStyle:null],on:{click:t.wrapClick}},[i("div",{ref:"elem",staticClass:"vue-slider",style:[t.elemStyles,t.bgStyle],attrs:{"aria-hidden":"true"}},[t.isRange?[i("div",{key:"dot0",ref:"dot0",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&0===t.focusSlider,"vue-slider-dot-dragging":t.flag&&0===t.currentSlider,"vue-slider-dot-disabled":!t.boolDisabled&&t.disabledArray[0]}],style:[t.dotStyles,!t.boolDisabled&&t.disabledArray[0]?t.disabledDotStyles[0]:null,t.sliderStyles[0],t.focusFlag&&0===t.focusSlider?t.focusStyles[0]:null],on:{mousedown:function(e){t.moveStart(e,0)},touchstart:function(e){t.moveStart(e,0)}}},[i("div",{ref:"tooltip0",class:["vue-slider-tooltip-"+t.tooltipDirection[0],"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles[0]},[t._v(t._s(t.formatter?t.formatting(t.val[0]):t.val[0]))])],{value:t.val[0],index:0,disabled:!t.boolDisabled&&t.disabledArray[0]})],2)]),t._v(" "),i("div",{key:"dot1",ref:"dot1",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&1===t.focusSlider,"vue-slider-dot-dragging":t.flag&&1===t.currentSlider,"vue-slider-dot-disabled":!t.boolDisabled&&t.disabledArray[1]}],style:[t.dotStyles,!t.boolDisabled&&t.disabledArray[1]?t.disabledDotStyles[1]:null,t.sliderStyles[1],t.focusFlag&&1===t.focusSlider?t.focusStyles[1]:null],on:{mousedown:function(e){t.moveStart(e,1)},touchstart:function(e){t.moveStart(e,1)}}},[i("div",{ref:"tooltip1",class:["vue-slider-tooltip-"+t.tooltipDirection[1],"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles[1]},[t._v(t._s(t.formatter?t.formatting(t.val[1]):t.val[1]))])],{value:t.val[1],index:1,disabled:!t.boolDisabled&&t.disabledArray[1]})],2)])]:[i("div",{key:"dot",ref:"dot",class:[t.tooltipStatus,"vue-slider-dot",{"vue-slider-dot-focus":t.focusFlag&&0===t.focusSlider,"vue-slider-dot-dragging":t.flag&&0===t.currentSlider}],style:[t.dotStyles,t.sliderStyles,t.focusFlag&&0===t.focusSlider?t.focusStyles:null],on:{mousedown:t.moveStart,touchstart:t.moveStart}},[i("div",{class:["vue-slider-tooltip-"+t.tooltipDirection,"vue-slider-tooltip-wrap"]},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles},[t._v(t._s(t.formatter?t.formatting(t.val):t.val))])],{value:t.val})],2)])],t._v(" "),i("ul",{staticClass:"vue-slider-piecewise"},t._l(t.piecewiseDotWrap,function(e,s){return i("li",{key:s,staticClass:"vue-slider-piecewise-item",style:[t.piecewiseDotStyle,e.style]},[t._t("piecewise",[t.piecewise?i("span",{staticClass:"vue-slider-piecewise-dot",style:[t.piecewiseStyle,e.inRange?t.piecewiseActiveStyle:null]}):t._e()],{label:e.label,index:s,first:0===s,last:s===t.piecewiseDotWrap.length-1,active:e.inRange}),t._v(" "),t._t("label",[t.piecewiseLabel?i("span",{staticClass:"vue-slider-piecewise-label",style:[t.labelStyle,e.inRange?t.labelActiveStyle:null]},[t._v("\n            "+t._s(e.label)+"\n          ")]):t._e()],{label:e.label,index:s,first:0===s,last:s===t.piecewiseDotWrap.length-1,active:e.inRange})],2)})),t._v(" "),i("div",{ref:"process",class:["vue-slider-process",{"vue-slider-process-dragable":t.isRange&&t.processDragable}],style:t.processStyle,on:{click:t.processClick,mousedown:function(e){t.moveStart(e,0,!0)},touchstart:function(e){t.moveStart(e,0,!0)}}},[i("div",{ref:"mergedTooltip",staticClass:"vue-merged-tooltip",class:["vue-slider-tooltip-"+t.tooltipDirection[0],"vue-slider-tooltip-wrap"],style:t.tooltipMergedPosition},[t._t("tooltip",[i("span",{staticClass:"vue-slider-tooltip",style:t.tooltipStyles},[t._v("\n            "+t._s(t.mergeFormatter?t.mergeFormatting(t.val[0],t.val[1]):t.formatter?t.val[0]===t.val[1]?t.formatting(t.val[0]):t.formatting(t.val[0])+" - "+t.formatting(t.val[1]):t.val[0]===t.val[1]?t.val[0]:t.val[0]+" - "+t.val[1])+"\n          ")])])],2)]),t._v(" "),t.isRange||t.data?t._e():i("input",{directives:[{name:"model",rawName:"v-model",value:t.val,expression:"val"}],staticClass:"vue-slider-sr-only",attrs:{type:"range",min:t.min,max:t.max},domProps:{value:t.val},on:{__r:function(e){t.val=e.target.value}}})],2)])},staticRenderFns:[]}},function(t,e,i){var s=i(3);"string"==typeof s&&(s=[[t.i,s,""]]),s.locals&&(t.exports=s.locals);i(8)("743d98f5",s,!0)},function(t,e,i){function s(t){for(var e=0;e<t.length;e++){var i=t[e],s=d[i.id];if(s){s.refs++;for(var r=0;r<s.parts.length;r++)s.parts[r](i.parts[r]);for(;r<i.parts.length;r++)s.parts.push(o(i.parts[r]));s.parts.length>i.parts.length&&(s.parts.length=i.parts.length)}else{for(var n=[],r=0;r<i.parts.length;r++)n.push(o(i.parts[r]));d[i.id]={id:i.id,refs:1,parts:n}}}}function r(){var t=document.createElement("style");return t.type="text/css",h.appendChild(t),t}function o(t){var e,i,s=document.querySelector('style[data-vue-ssr-id~="'+t.id+'"]');if(s){if(f)return v;s.parentNode.removeChild(s)}if(m){var o=p++;s=c||(c=r()),e=n.bind(null,s,o,!1),i=n.bind(null,s,o,!0)}else s=r(),e=l.bind(null,s),i=function(){s.parentNode.removeChild(s)};return e(t),function(s){if(s){if(s.css===t.css&&s.media===t.media&&s.sourceMap===t.sourceMap)return;e(t=s)}else i()}}function n(t,e,i,s){var r=i?"":s.css;if(t.styleSheet)t.styleSheet.cssText=g(e,r);else{var o=document.createTextNode(r),n=t.childNodes;n[e]&&t.removeChild(n[e]),n.length?t.insertBefore(o,n[e]):t.appendChild(o)}}function l(t,e){var i=e.css,s=e.media,r=e.sourceMap;if(s&&t.setAttribute("media",s),r&&(i+="\n/*# sourceURL="+r.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),t.styleSheet)t.styleSheet.cssText=i;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(i))}}var a="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!a)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var u=i(9),d={},h=a&&(document.head||document.getElementsByTagName("head")[0]),c=null,p=0,f=!1,v=function(){},m="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());t.exports=function(t,e,i){f=i;var r=u(t,e);return s(r),function(e){for(var i=[],o=0;o<r.length;o++){var n=r[o],l=d[n.id];l.refs--,i.push(l)}e?(r=u(t,e),s(r)):r=[];for(var o=0;o<i.length;o++){var l=i[o];if(0===l.refs){for(var a=0;a<l.parts.length;a++)l.parts[a]();delete d[l.id]}}}};var g=function(){var t=[];return function(e,i){return t[e]=i,t.filter(Boolean).join("\n")}}()},function(t,e){t.exports=function(t,e){for(var i=[],s={},r=0;r<e.length;r++){var o=e[r],n=o[0],l=o[1],a=o[2],u=o[3],d={id:t+":"+r,css:l,media:a,sourceMap:u};s[n]?s[n].parts.push(d):i.push(s[n]={id:n,parts:[d]})}return i}}])});
+
+/***/ }),
+/* 25 */
+/***/ (function(module, exports) {
+
+// removed by extract-text-webpack-plugin
+
 /***/ })
 /******/ ]);
\ No newline at end of file