From 9c6b79d18e9145fa38c0c10653948c706906d7e8 Mon Sep 17 00:00:00 2001
From: Alessandro <a.francia@teamdev.it>
Date: Wed, 23 Jan 2019 10:30:51 +0100
Subject: [PATCH 1/9] start refactoring

---
 Step/wwwroot/assets/styles/base/card.less     | 631 +++++++++++++++++
 Step/wwwroot/assets/styles/style.css          | 664 ++++++++++++++++++
 .../components/card-report-production.ts      |  80 +++
 .../components/card-report-production.vue     | 384 ++++++++++
 .../app_modules/reports/components/reports.ts |   5 +-
 .../reports/components/reports.vue            | 402 +----------
 6 files changed, 1772 insertions(+), 394 deletions(-)
 create mode 100644 Step/wwwroot/src/app_modules/reports/components/card-report-production.ts
 create mode 100644 Step/wwwroot/src/app_modules/reports/components/card-report-production.vue

diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less
index 5bafcd78..55daa6fc 100644
--- a/Step/wwwroot/assets/styles/base/card.less
+++ b/Step/wwwroot/assets/styles/base/card.less
@@ -1793,3 +1793,634 @@
         align-items: center;
     }
 }
+
+.card-report-production{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    .reports-box-body-left {
+        width: 1455px;
+        height: 100%;
+        .body-left-header, .body-left-header-machinestatus{
+            width: 100%;
+            height: 70px;
+            display: flex;
+            flex-flow: row;
+            margin-top: 18px;
+            border-right: solid 2px @color-whitegrey;
+            position: relative;
+            margin-bottom: 16px;
+            .mx-datepicker-range{
+              width: 170px;
+              height: 70px;
+              .mx-input-wrapper{
+                margin-right: 24px;
+                width: 253px;
+                .mx-input{
+                  width: 253px;
+                  height: 50px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                  border: solid 1px @color-silver;                     
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                  padding-left: 16px;
+                }
+              }
+            }
+            > div {
+              display: flex;
+              flex-flow: column;
+              height: 70px;
+              margin-right: 24px;
+              label.intervaldate{
+                width: 253px;
+              }
+              select{
+                width: 192px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+                border: solid 1px @color-silver;                     
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                padding-left: 16px; 
+              }
+              div.interval-time{
+                display: flex;
+                flex-flow: row;
+                input[type="time"]{
+                  width: 112px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: inset 0 1px 3px 0 @color-black-50;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-silver;
+                  border: none;
+                }
+                input[type="time"]:first-child{
+                  margin-right: 16px;
+                }
+                input[type="time"]::-webkit-inner-spin-button {
+                  -webkit-appearance: none;
+                  display: none;
+                  border:none;
+                }
+              }
+              input.program{
+                width: 256px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: inset 0 1px 3px 0 @color-black-50;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-silver;
+                padding-left: 16px;
+                border: none;
+              }
+              .reports-select-operator{
+                width: 192px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+              }
+              .reports-select-shift{
+                width: 144px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+              }
+              label.label_advanced_filters{
+                margin-top: 35px; 
+                font-size: 18px;
+                line-height: 1;
+                color: @color-darkish-blue;
+                cursor: pointer;
+                span{
+                  text-decoration-line: underline;
+                  text-decoration-color: @color-darkish-blue;
+                  text-decoration-style: solid;
+                }
+              }
+            }
+            div.advanced-filters{
+              z-index: 100;
+              height: 80px;
+              width: 100%;
+              display: flex;
+              flex-flow: row;
+              background-color: @color-background-white;
+              position: absolute;
+              top: 80px;
+              > div {
+                display: flex;
+                flex-flow: column;
+                height: 70px;
+                margin-right: 24px;
+                label.intervaldate{
+                  width: 253px;
+                }
+                select{
+                  width: 192px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                  border: solid 1px @color-silver;                     
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                  padding-left: 16px; 
+                }
+                div.interval-time{
+                  display: flex;
+                  flex-flow: row;
+                  input[type="time"]{
+                    width: 112px;
+                    height: 48px;
+                    border-radius: 2px;
+                    box-shadow: inset 0 1px 3px 0 @color-black-50;
+                    font-size: 18px;
+                    line-height: 1.11;
+                    color: @color-silver;
+                    border: none;
+                  }
+                  input[type="time"]:first-child{
+                    margin-right: 16px;
+                  }
+                  input[type="time"]::-webkit-inner-spin-button {
+                    -webkit-appearance: none;
+                    display: none;
+                    border:none;
+                  }
+                }
+                input.program{
+                  width: 256px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: inset 0 1px 3px 0 @color-black-50;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-silver;
+                  padding-left: 16px;
+                  border: none;
+                }
+                .reports-select-operator{
+                  width: 192px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                }
+                .reports-select-shift{
+                  width: 144px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                }
+                label.label_advanced_filters{
+                  margin-top: 35px; 
+                  font-size: 18px;
+                  line-height: 1;
+                  color: @color-darkish-blue;
+                  span{
+                    text-decoration-line: underline;
+                    text-decoration-color: @color-darkish-blue;
+                    text-decoration-style: solid;
+                  }
+                }
+              }
+            }
+        }
+        .body-left-header-machinestatus{
+          border-right: 0px;
+        }
+        .body-left-center {
+          width: 1448px;
+          max-height: 681px;
+          display: flex;
+          flex-flow: column;
+          .body-left-center-container{
+            width: 100%;
+            table{
+              table-layout: fixed;
+              width: 100%;
+              border-collapse: collapse;
+            }
+            thead{
+                border-bottom: solid 2px @color-label-grey;
+                font-size: 14px;
+                line-height: 1.29;
+                color: @color-darkish-blue;
+                display: block;
+                width: 1431px;
+            }
+            thead tr th{
+                height: 48px;
+            }
+            tr:nth-child(even) {background: #FFF }
+            tr:nth-child(odd) {background: #dddddd }
+
+            // thead tr{
+            //   width: 1448px;
+            // }
+
+            thead tr:nth-child(odd){
+              background: #FFF
+            }
+
+            th:nth-child(1), td:nth-child(1){
+                width:162px;
+                max-width: 162px;
+                text-align: center;
+            }  
+            th:nth-child(2), td:nth-child(2){
+              width:139px;
+              max-width: 139px;
+              text-align: center;
+            }
+            th:nth-child(3), td:nth-child(3){
+                width:83px;
+                max-width:83px;
+                text-align: center;
+            }
+            th:nth-child(4), td:nth-child(4){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(5), td:nth-child(5){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(6), td:nth-child(6){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(7), td:nth-child(7){
+                width:97px;
+                max-width:97px;
+                text-align: center;
+            }
+            th:nth-child(8), td:nth-child(8){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(9), td:nth-child(9){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(10), td:nth-child(10){
+              width:115px;
+              max-width:115px;
+              text-align: center;
+            }
+            th:nth-child(11), td:nth-child(11){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(12), td:nth-child(12){
+              width:148px;
+              max-width:148px;
+              text-align: center;
+            }
+            th:nth-child(13), td:nth-child(13){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:last-child{
+              font-size: 23px;
+              font-weight: bold;
+              cursor: pointer;
+            }
+            th, td{
+                overflow: hidden;
+                div{
+                    overflow: hidden;
+                            max-height: 64px;
+                }
+            }
+            tbody{
+                display: block;
+                height: 631px;
+                width: 1448px;
+                overflow: scroll;
+                tr{
+                    cursor: pointer;
+                    height:  64px;
+                    padding: 10px;
+                    font-size: 14px;
+                    line-height: 1.29;
+                    color: @color-greyish-brown;
+                    td{
+                        text-align: center;
+                        &.green{
+                          color: @color-apple-green;
+                        }
+                        &.red{
+                          color: @color-scarlet;
+                        }
+                    }
+                    td:last-child{
+                      width: 10px;
+                    }
+                    &.selected{
+                        background-color: rgba(23, 145, 255, 0.75);
+                        color: @color-white;
+                        font-weight: 600;
+                    }
+                }
+            }
+            .body-left-center-left{
+              width: 360px;
+              height: 616px;
+              display: flex;
+              flex-flow: column;
+              align-items: center;
+              border: solid 1px @color-whitegrey;
+              overflow-y: auto;
+              .multiselect{
+                z-index: 100;
+                margin-bottom: 24px;
+                margin-top: 16px;
+                label{
+                  font-size: 14px;
+                  line-height: 1.29;
+                  color: @color-warm-grey;
+                }
+              }
+              .selectBox{
+                  position: relative;
+                  width: 328px;
+                  height: 64px;
+              }
+              .selectBox select{
+                width: 100%;
+                padding: 8px;
+                cursor: pointer;
+                height: 64px;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                margin-bottom: 0;
+                margin-top: 0;
+                  option{
+                      display: none;
+                  }
+              }
+              .overSelect{
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+            }
+            .checkboxes, .checkboxesU{
+                display: none;
+            }
+            .checkboxesView, .checkboxesViewUser{
+                width: calc(~"100% - 8px");;
+                background-color: #fff;
+                display: block;
+                z-index: 100;
+                padding: 6px 4px;
+                box-shadow: 0 3px 5px 0 @color-black-40;
+                label{
+                    font-size: 18px;
+                    margin:2px;
+                    display: flex;
+                    flex-flow: row;
+                }
+                .label-state{
+                    margin-left: 12px;
+                }
+            }
+              div{
+                select{
+                  width: 328px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                  margin-bottom: 24px;
+                  margin-top: 16px;
+                  padding-left: 16px;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                }
+                .accordion-dropdown{
+                  header {
+                    height: 64px;
+                    width: 312px;
+                    border-radius: 2px;
+                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    color: @color-darkish-blue;
+                    line-height: 1;
+                    font-size: 18px;
+                    padding-left: 16px;
+                    cursor: pointer;
+                    span {
+                        width: 100%;
+                    }
+                    .expander {
+                        margin: 0 12px;
+                        line-height: 28px;
+                        height: 28px;
+                        width: 28px;
+                        font-size: 28px;
+                    }
+                  }
+                  section {
+                    width: 328px;
+                    min-height: 0;
+                    max-height: 0;
+                    transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
+                    overflow: hidden;
+                    &.expanded {
+                      min-height: 64px;
+                      background-color: rgba(255, 255, 255, 0.1);
+                      max-height: 1000px;
+                    }
+                    .item {
+                        height: 64px;
+                        width: 100%;
+                        line-height: 64px;
+                        background-color: @color-white2;
+                    }
+            
+                    .dropdown{
+                      // background-color: @color-white2;
+                      height: 100%;
+                      margin-top: 2px;
+                      .filename{
+                          display: flex;
+                          height: 64px;
+                          align-items: center;
+                          cursor: pointer;
+                          i{
+                            color: @color-cyan-blue;
+                            margin: 0 20px 0 20px;
+                          }
+                          span{
+                              width: 100%;
+                              font-size: 18px;
+                              line-height: 1;
+                              color: @color-darkish-blue;
+                          }
+            
+                          &.selected{
+                            span, i{
+                              color:#4b4b4b;
+                            }
+                          }
+                      }
+                      .filename.selected{
+                          background-color: rgba(255, 255, 255, 0.8);
+                      }
+                      
+                    } 
+                  }
+                }
+              }
+            }
+          }
+
+          .body-left-center-footer{
+            height: 64px;
+            width: 100%;
+            border: solid 1px @color-whitegrey;
+            .header-title{
+              width: 360px;
+              height: 64px;
+              display: flex;
+              flex-flow: column;
+              align-items: center;
+              justify-content: center;
+              .title{
+                font-size: 14px;
+                color: @color-warm-grey;
+              }
+              .data-temporal{
+                font-size: 18px;
+                line-height: 1;
+                color: @color-greyish-brown;
+              }
+            }
+          }
+        }
+    }
+    .reports-box-body-right {
+        width: 327px;
+        height: 100%;
+        .body-right-header{
+          width: 100%;
+          height: 70px;
+          display: flex;
+          flex-flow: row;
+          margin-top: 18px;
+          justify-content: flex-end;
+          .body-right-header-left {
+            width: 158px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-right: solid 2px @color-whitegrey;
+            button{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: 0 1px 2px 0 @color-black-40;
+              background-image: linear-gradient(to bottom,@color-white2, @color-silver);
+              border: none;
+            }
+            button.active{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: inset 0 1px 3px 0 @color-black-40;
+              background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+              color: @color-clear-blue;
+              border: none;
+            }
+          }
+          .body-right-header-right {
+            width: calc(~"100% - 158px");
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            button{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: 0 1px 2px 0 @color-black-40;
+              background-image: linear-gradient(to bottom,@color-white2, @color-silver);
+              border:none;
+            }
+            button:first-child{
+              margin-right: 16px;
+            }
+            button:active{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: inset 0 1px 3px 0 @color-black-40;
+              background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+              border: none;
+            }
+          }
+        }
+        .body-right-card{
+          width: 100%;
+          height: calc(~"100% - 70px");
+          display: flex;
+          flex-flow: column;
+          align-items: center;
+          .card-report{
+            > section {
+              display: flex;
+              align-items: center;
+              justify-content: center; 
+              .rectangle_gray{
+                width: 256px;
+                height: 120px;
+                border-radius: 2px;
+                display: flex;
+                flex-flow: column;
+                align-items: center;
+                justify-content: center;
+                background-color: @color-white2;
+                label{
+                  font-size: 18px;
+                  color: @color-warm-grey;
+                  margin-bottom: 30px;
+                }
+                span{
+                  font-size: 48px;
+                  font-weight: bold;
+                  line-height: 0.38;
+                  color: @color-clear-blue;
+                }
+              }
+            }
+          }
+        }
+    }
+}
\ No newline at end of file
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 3ecea226..159977b5 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -7947,6 +7947,670 @@ footer .container button.big:before {
   justify-content: center;
   align-items: center;
 }
+.card-report-production {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.card-report-production .reports-box-body-left {
+  width: 1455px;
+  height: 100%;
+}
+.card-report-production .reports-box-body-left .body-left-header,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  flex-flow: row;
+  margin-top: 18px;
+  border-right: solid 2px #dddddd;
+  position: relative;
+  margin-bottom: 16px;
+}
+.card-report-production .reports-box-body-left .body-left-header .mx-datepicker-range,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range {
+  width: 170px;
+  height: 70px;
+}
+.card-report-production .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper {
+  margin-right: 24px;
+  width: 253px;
+}
+.card-report-production .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper .mx-input,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper .mx-input {
+  width: 253px;
+  height: 50px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  border: solid 1px #bbbcbc;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  padding-left: 16px;
+}
+.card-report-production .reports-box-body-left .body-left-header > div,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus > div {
+  display: flex;
+  flex-flow: column;
+  height: 70px;
+  margin-right: 24px;
+}
+.card-report-production .reports-box-body-left .body-left-header > div label.intervaldate,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus > div label.intervaldate {
+  width: 253px;
+}
+.card-report-production .reports-box-body-left .body-left-header > div select,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus > div select {
+  width: 192px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  border: solid 1px #bbbcbc;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  padding-left: 16px;
+}
+.card-report-production .reports-box-body-left .body-left-header > div div.interval-time,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus > div div.interval-time {
+  display: flex;
+  flex-flow: row;
+}
+.card-report-production .reports-box-body-left .body-left-header > div div.interval-time input[type="time"],
+.card-report-production .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"] {
+  width: 112px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #bbbcbc;
+  border: none;
+}
+.card-report-production .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]:first-child,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]:first-child {
+  margin-right: 16px;
+}
+.card-report-production .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]::-webkit-inner-spin-button,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  display: none;
+  border: none;
+}
+.card-report-production .reports-box-body-left .body-left-header > div input.program,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus > div input.program {
+  width: 256px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #bbbcbc;
+  padding-left: 16px;
+  border: none;
+}
+.card-report-production .reports-box-body-left .body-left-header > div .reports-select-operator,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus > div .reports-select-operator {
+  width: 192px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.card-report-production .reports-box-body-left .body-left-header > div .reports-select-shift,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus > div .reports-select-shift {
+  width: 144px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+}
+.card-report-production .reports-box-body-left .body-left-header > div label.label_advanced_filters,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus > div label.label_advanced_filters {
+  margin-top: 35px;
+  font-size: 18px;
+  line-height: 1;
+  color: #002680;
+  cursor: pointer;
+}
+.card-report-production .reports-box-body-left .body-left-header > div label.label_advanced_filters span,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus > div label.label_advanced_filters span {
+  text-decoration-line: underline;
+  text-decoration-color: #002680;
+  text-decoration-style: solid;
+}
+.card-report-production .reports-box-body-left .body-left-header div.advanced-filters,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters {
+  z-index: 100;
+  height: 80px;
+  width: 100%;
+  display: flex;
+  flex-flow: row;
+  background-color: #fff;
+  position: absolute;
+  top: 80px;
+}
+.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div {
+  display: flex;
+  flex-flow: column;
+  height: 70px;
+  margin-right: 24px;
+}
+.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div label.intervaldate,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div label.intervaldate {
+  width: 253px;
+}
+.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div select,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div select {
+  width: 192px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  border: solid 1px #bbbcbc;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  padding-left: 16px;
+}
+.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div div.interval-time {
+  display: flex;
+  flex-flow: row;
+}
+.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"],
+.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div div.interval-time input[type="time"] {
+  width: 112px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #bbbcbc;
+  border: none;
+}
+.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"]:first-child,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div div.interval-time input[type="time"]:first-child {
+  margin-right: 16px;
+}
+.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"]::-webkit-inner-spin-button,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div div.interval-time input[type="time"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  display: none;
+  border: none;
+}
+.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div input.program,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div input.program {
+  width: 256px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #bbbcbc;
+  padding-left: 16px;
+  border: none;
+}
+.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div .reports-select-operator,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div .reports-select-operator {
+  width: 192px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div .reports-select-shift,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div .reports-select-shift {
+  width: 144px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+}
+.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div label.label_advanced_filters,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div label.label_advanced_filters {
+  margin-top: 35px;
+  font-size: 18px;
+  line-height: 1;
+  color: #002680;
+}
+.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div label.label_advanced_filters span,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div label.label_advanced_filters span {
+  text-decoration-line: underline;
+  text-decoration-color: #002680;
+  text-decoration-style: solid;
+}
+.card-report-production .reports-box-body-left .body-left-header-machinestatus {
+  border-right: 0px;
+}
+.card-report-production .reports-box-body-left .body-left-center {
+  width: 1448px;
+  max-height: 681px;
+  display: flex;
+  flex-flow: column;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container {
+  width: 100%;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container thead {
+  border-bottom: solid 2px #979797;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #002680;
+  display: block;
+  width: 1431px;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container thead tr th {
+  height: 48px;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(even) {
+  background: #FFF;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(odd) {
+  background: #dddddd;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container thead tr:nth-child(odd) {
+  background: #FFF;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(1),
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(1) {
+  width: 162px;
+  max-width: 162px;
+  text-align: center;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(2),
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(2) {
+  width: 139px;
+  max-width: 139px;
+  text-align: center;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(3),
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(3) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(4),
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(4) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(5),
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(5) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(6),
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(6) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(7),
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(7) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(8),
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(8) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(9),
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(9) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(10),
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(10) {
+  width: 115px;
+  max-width: 115px;
+  text-align: center;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(11),
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(11) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(12),
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(12) {
+  width: 148px;
+  max-width: 148px;
+  text-align: center;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(13),
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(13) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:last-child {
+  font-size: 23px;
+  font-weight: bold;
+  cursor: pointer;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th,
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td {
+  overflow: hidden;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th div,
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td div {
+  overflow: hidden;
+  max-height: 64px;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody {
+  display: block;
+  height: 631px;
+  width: 1448px;
+  overflow: scroll;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr {
+  cursor: pointer;
+  height: 64px;
+  padding: 10px;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #4b4b4b;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr td {
+  text-align: center;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.green {
+  color: #7ed321;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.red {
+  color: #d0021b;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child {
+  width: 10px;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr.selected {
+  background-color: rgba(23, 145, 255, 0.75);
+  color: #fff;
+  font-weight: 600;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left {
+  width: 360px;
+  height: 616px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  border: solid 1px #dddddd;
+  overflow-y: auto;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect {
+  z-index: 100;
+  margin-bottom: 24px;
+  margin-top: 16px;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect label {
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox {
+  position: relative;
+  width: 328px;
+  height: 64px;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select {
+  width: 100%;
+  padding: 8px;
+  cursor: pointer;
+  height: 64px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select option {
+  display: none;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .overSelect {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxes,
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesU {
+  display: none;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView,
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser {
+  width: calc(100% - 8px);
+  background-color: #fff;
+  display: block;
+  z-index: 100;
+  padding: 6px 4px;
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView label,
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser label {
+  font-size: 18px;
+  margin: 2px;
+  display: flex;
+  flex-flow: row;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView .label-state,
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser .label-state {
+  margin-left: 12px;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div select {
+  width: 328px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  margin-bottom: 24px;
+  margin-top: 16px;
+  padding-left: 16px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header {
+  height: 64px;
+  width: 312px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #002680;
+  line-height: 1;
+  font-size: 18px;
+  padding-left: 16px;
+  cursor: pointer;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header span {
+  width: 100%;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header .expander {
+  margin: 0 12px;
+  line-height: 28px;
+  height: 28px;
+  width: 28px;
+  font-size: 28px;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section {
+  width: 328px;
+  min-height: 0;
+  max-height: 0;
+  transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
+  overflow: hidden;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section.expanded {
+  min-height: 64px;
+  background-color: rgba(255, 255, 255, 0.1);
+  max-height: 1000px;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .item {
+  height: 64px;
+  width: 100%;
+  line-height: 64px;
+  background-color: #f1f1f1;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown {
+  height: 100%;
+  margin-top: 2px;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename {
+  display: flex;
+  height: 64px;
+  align-items: center;
+  cursor: pointer;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename i {
+  color: #002e6e;
+  margin: 0 20px 0 20px;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename span {
+  width: 100%;
+  font-size: 18px;
+  line-height: 1;
+  color: #002680;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected span,
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected i {
+  color: #4b4b4b;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-footer {
+  height: 64px;
+  width: 100%;
+  border: solid 1px #dddddd;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-footer .header-title {
+  width: 360px;
+  height: 64px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-footer .header-title .title {
+  font-size: 14px;
+  color: #878787;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-footer .header-title .data-temporal {
+  font-size: 18px;
+  line-height: 1;
+  color: #4b4b4b;
+}
+.card-report-production .reports-box-body-right {
+  width: 327px;
+  height: 100%;
+}
+.card-report-production .reports-box-body-right .body-right-header {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  flex-flow: row;
+  margin-top: 18px;
+  justify-content: flex-end;
+}
+.card-report-production .reports-box-body-right .body-right-header .body-right-header-left {
+  width: 158px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-right: solid 2px #dddddd;
+}
+.card-report-production .reports-box-body-right .body-right-header .body-right-header-left button {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
+  border: none;
+}
+.card-report-production .reports-box-body-right .body-right-header .body-right-header-left button.active {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
+  color: #1791ff;
+  border: none;
+}
+.card-report-production .reports-box-body-right .body-right-header .body-right-header-right {
+  width: calc(100% - 158px);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-report-production .reports-box-body-right .body-right-header .body-right-header-right button {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
+  border: none;
+}
+.card-report-production .reports-box-body-right .body-right-header .body-right-header-right button:first-child {
+  margin-right: 16px;
+}
+.card-report-production .reports-box-body-right .body-right-header .body-right-header-right button:active {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
+  border: none;
+}
+.card-report-production .reports-box-body-right .body-right-card {
+  width: 100%;
+  height: calc(100% - 70px);
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}
+.card-report-production .reports-box-body-right .body-right-card .card-report > section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-report-production .reports-box-body-right .body-right-card .card-report > section .rectangle_gray {
+  width: 256px;
+  height: 120px;
+  border-radius: 2px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f1f1f1;
+}
+.card-report-production .reports-box-body-right .body-right-card .card-report > section .rectangle_gray label {
+  font-size: 18px;
+  color: #878787;
+  margin-bottom: 30px;
+}
+.card-report-production .reports-box-body-right .body-right-card .card-report > section .rectangle_gray span {
+  font-size: 48px;
+  font-weight: bold;
+  line-height: 0.38;
+  color: #1791ff;
+}
 @keyframes selectedanimation {
   0% {
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts
new file mode 100644
index 00000000..33f29418
--- /dev/null
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts
@@ -0,0 +1,80 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import {cardReport} from "../../../modules/base-components/cards/index";
+import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
+import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
+import { Accordion } from "src/modules/base-components";
+import DatePicker from "vue2-datepicker";
+import moment from "moment";
+import { ModalHelper } from "src/components/modals";
+
+declare let $: any;
+@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
+export default class CardReportProduction extends Vue {
+
+    lang = {
+        days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
+        placeholder: {
+          date: 'Select Date',
+          dateRange: 'Select Date Range'
+        }
+    }
+
+    filter: {
+        interval?: Date[],
+        timelineMacro: Array<string>
+    } = {
+        timelineMacro: ["Eventi","Allarmi","Stato macchina","Programmi"],
+        interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
+    };
+    
+
+    public selectedTab: string = "Production";
+    selectDiagram: boolean = false;
+    selectMoreFilter: boolean = false;
+    selectTable: boolean = true;
+
+    public selectTab(value){
+        this.selectedTab = value;
+    }
+    timeformat() {
+        return (moment() as any)._locale._longDateFormat.LT;
+    }
+
+    viewDiagram(){
+        if(!this.selectDiagram){
+            this.selectDiagram = true;
+            this.selectTable = false;
+        }
+        console.log("Diagram active");
+    }
+
+    viewTable(){
+        if(!this.selectTable){
+            this.selectDiagram = false;
+            this.selectTable = true;
+        }
+        console.log("Diagram active");
+    }
+
+    viewMoreFilter(){
+        if(!this.selectMoreFilter){
+            this.selectMoreFilter = true;
+        }
+        else{
+            this.selectMoreFilter = false;
+        }
+    }
+
+    openModalSelectField(){
+        ModalHelper.ShowModal(modalReportSelectColumn);
+    }
+    public openSelectState() {
+        if (!$('.checkboxes').hasClass('checkboxesView'))
+          $('.checkboxes').addClass('checkboxesView');
+        else
+          $('.checkboxes').removeClass('checkboxesView');
+    }
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
new file mode 100644
index 00000000..8aad7800
--- /dev/null
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
@@ -0,0 +1,384 @@
+<template>
+<div class="card-report-production">
+    <div class="reports-box-body-left">
+        <div class="body-left-header" v-if="selectDiagram">
+            <div>
+                <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
+                <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
+            </div>
+            <div>
+                <label>{{'reports_body_header_axes_x' | localize("Asse X")}}</label>
+                <select><option>{{'reports_body_header_option_axes_x_program_name' | localize("Nome Programma")}}</option></select>
+            </div>
+            <div>
+                <label>{{'reports_body_header_axes_y' | localize("Asse Y")}}</label>
+                <select><option>{{'reports_body_header_option_axes_y_frequency' | localize("Frequenza")}}</option></select>
+            </div>
+            <div>
+                <label class="label_advanced_filters" @click="viewMoreFilter()" v-if="!selectMoreFilter"><span>{{'reports_body_header_diagram_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
+                <label class="label_advanced_filters" @click="viewMoreFilter()" v-if="selectMoreFilter"><span>{{'reports_body_header_diagram_label_hide_advanced_filters' | localize("Nascondi filtri avanzati")}}</span> <i class="fa fa-caret-up"></i></label>
+            </div>
+            <div class="advanced-filters" v-if="selectMoreFilter">
+                <div>
+                    <label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
+                    <div class="interval-time">
+                        <input type="time"/>
+                        <input type="time"/>
+                    </div>
+                </div>
+                <div>
+                    <label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
+                    <input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
+                </div>
+                <div>
+                    <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
+                    <select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
+                </div>
+                <div>
+                    <label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
+                    <select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
+                </div>
+            </div>
+        </div>
+    <div class="body-left-header" v-if="!selectDiagram">
+        <div>
+            <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
+            <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
+        </div>
+        <div>
+            <label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
+            <div class="interval-time">
+                <input type="time"/>
+                <input type="time"/>
+            </div>
+        </div>
+        <div>
+            <label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
+            <input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
+        </div>
+        <div>
+            <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
+            <select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
+        </div>
+        <div>
+            <label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
+            <select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
+        </div>
+        <div>
+            <label class="label_advanced_filters"><span>{{'reports_body_header_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
+        </div>
+    </div>
+    <div class="body-left-center">
+        <div class="body-left-center-container">
+          <table>
+              <thead>
+                  <tr>
+                      <th>{{'reports_table_program_name' | localize("Nome programma")}}</th>
+                      <th>{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
+                      <th>{{'reports_table_quantity' | localize("Quantity")}}</th>
+                      <th>{{'reports_table_start_now' | localize("Ora inizio")}}</th>
+                      <th>{{'reports_table_end_time' | localize("Ora fine")}}</th>
+                      <th>{{'reports_table_date' | localize("Data")}}</th>
+                      <th>{{'reports_table_effective_time' | localize("T effettivo")}}</th>
+                      <th>{{'reports_table_average_time' | localize("T medio")}}</th>
+                      <th>{{'reports_table_theoretical_time' | localize("T teorico")}}</th>
+                      <th>{{'reports_table_deviation' | localize("Scostamento")}}</th>
+                      <th>{{'reports_table_quality' | localize("Qualità")}}</th>
+                      <th>{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
+                      <th>{{'reports_table_shift' | localize("Turno")}}</th>
+                      <th @click="openModalSelectField()"><i class="fa fa-angle-double-right"></i></th>
+                  </tr>
+              </thead>
+              <tbody>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <!-- <tr v-for="(row,index) in data" :key="index" @click="selectAlarm(row)" :class="{selected: selectedAlarm == row}">
+                  <td colspan="1">{{row.id}}</td>
+                  <td colspan="1">{{filter.sources[row.source]}}</td>
+                  <td colspan="1" v-if="row.source == 0 ">{{row.title}}</td>
+                  <td colspan="1" v-if="row.source == 1 ">{{'alarm_'+ row.alarmId | localize('alarm_'+ row.alarmId)}}</td>
+                  <td colspan="1">{{row.description}}</td>
+                  <td colspan="1">{{row.timeStamp | date('DD-MM-YYYY HH:mm:ss')}}</td>
+                  <td colspan="1">
+                      <span v-for="(iduser, index) in row.users" :key="iduser">
+                      {{user(iduser).username}}
+                      <text v-if="index < row.users.length -1">, </text>
+                      </span>
+                  </td>
+                  </tr> -->
+              </tbody>
+          </table>
+          </div>
+    </div>
+</div>
+    <div class="reports-box-body-right">
+        <div class="body-right-header">
+            <div class="body-right-header-left">
+                <button :class="{'active': selectTable}" @click="viewTable()"><i class="fa fa-bars fa-2x"></i></button>
+                <button :class="{'active': selectDiagram}" @click="viewDiagram()"><i class="fa fa-signal fa-2x"></i></button>
+            </div>
+            <div class="body-right-header-right">
+                <button><i class="fa fa-print fa-2x"></i></button>
+                <button><i class="fa fa-upload fa-2x"></i></button>
+            </div>
+            </div>
+        <div class="body-right-card">
+            <card-report :title="'Valore assoluto (%)'">
+            </card-report>
+            <card-report :title="'Valore assoluto'">
+                <div class="rectangle_gray">
+                    <label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
+                    <span>10.000</span>
+                </div>
+            </card-report>
+            <card-report :title="'Valore assoluto'">
+                <div class="rectangle_gray">
+                    <label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
+                    <span>4</span>
+                </div>
+            </card-report>
+        </div>
+    </div>
+</div>
+
+</template>
+
+<script src="./card-report-production.ts" lang="ts"></script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/app_modules/reports/components/reports.ts b/Step/wwwroot/src/app_modules/reports/components/reports.ts
index e1da5ca9..0ba7340f 100644
--- a/Step/wwwroot/src/app_modules/reports/components/reports.ts
+++ b/Step/wwwroot/src/app_modules/reports/components/reports.ts
@@ -8,8 +8,11 @@ import DatePicker from "vue2-datepicker";
 import moment from "moment";
 import { ModalHelper } from "src/components/modals";
 
+import cardReportProduction from "src/app_modules/reports/components/card-report-production.vue";
+
 declare let $: any;
-@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
+@Component({ components: { datePicker: DatePicker, cardReport: cardReport,
+    accordionDropdown: accordionDropdown, accordion: Accordion, cardReportProduction: cardReportProduction } })
 export default class Reports extends Vue {
 
     lang = {
diff --git a/Step/wwwroot/src/app_modules/reports/components/reports.vue b/Step/wwwroot/src/app_modules/reports/components/reports.vue
index 74d7b5cf..c4c598cd 100644
--- a/Step/wwwroot/src/app_modules/reports/components/reports.vue
+++ b/Step/wwwroot/src/app_modules/reports/components/reports.vue
@@ -20,387 +20,10 @@
                 </button>
           </div>
           <div class="reports-box-body" v-if="selectedTab == 'Production'">
-              <div class="reports-box-body-left">
-                  <div class="body-left-header" v-if="selectDiagram">
-                    <div>
-                        <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
-                        <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
-                    </div>
-                    <div>
-                        <label>{{'reports_body_header_axes_x' | localize("Asse X")}}</label>
-                        <select><option>{{'reports_body_header_option_axes_x_program_name' | localize("Nome Programma")}}</option></select>
-                    </div>
-                    <div>
-                        <label>{{'reports_body_header_axes_y' | localize("Asse Y")}}</label>
-                        <select><option>{{'reports_body_header_option_axes_y_frequency' | localize("Frequenza")}}</option></select>
-                    </div>
-                    <div>
-                        <label class="label_advanced_filters" @click="viewMoreFilter()" v-if="!selectMoreFilter"><span>{{'reports_body_header_diagram_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
-                        <label class="label_advanced_filters" @click="viewMoreFilter()" v-if="selectMoreFilter"><span>{{'reports_body_header_diagram_label_hide_advanced_filters' | localize("Nascondi filtri avanzati")}}</span> <i class="fa fa-caret-up"></i></label>
-                    </div>
-                    <div class="advanced-filters" v-if="selectMoreFilter">
-                        <div>
-                            <label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
-                            <div class="interval-time">
-                                <input type="time"/>
-                                <input type="time"/>
-                            </div>
-                        </div>
-                        <div>
-                            <label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
-                            <input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
-                        </div>
-                        <div>
-                            <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
-                            <select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
-                        </div>
-                        <div>
-                            <label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
-                            <select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
-                        </div>
-                    </div>
-                  </div>
-                  <div class="body-left-header" v-if="!selectDiagram">
-                    <div>
-                        <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
-                        <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
-                    </div>
-                    <div>
-                        <label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
-                        <div class="interval-time">
-                            <input type="time"/>
-                            <input type="time"/>
-                        </div>
-                    </div>
-                    <div>
-                        <label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
-                        <input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
-                    </div>
-                    <div>
-                        <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
-                        <select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
-                    </div>
-                    <div>
-                        <label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
-                        <select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
-                    </div>
-                    <div>
-                        <label class="label_advanced_filters"><span>{{'reports_body_header_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
-                    </div>
-                  </div>
-                  <div class="body-left-center">
-                      <div class="body-left-center-container">
-                        <table>
-                            <thead>
-                                <tr>
-                                    <th>{{'reports_table_program_name' | localize("Nome programma")}}</th>
-                                    <th>{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
-                                    <th>{{'reports_table_quantity' | localize("Quantity")}}</th>
-                                    <th>{{'reports_table_start_now' | localize("Ora inizio")}}</th>
-                                    <th>{{'reports_table_end_time' | localize("Ora fine")}}</th>
-                                    <th>{{'reports_table_date' | localize("Data")}}</th>
-                                    <th>{{'reports_table_effective_time' | localize("T effettivo")}}</th>
-                                    <th>{{'reports_table_average_time' | localize("T medio")}}</th>
-                                    <th>{{'reports_table_theoretical_time' | localize("T teorico")}}</th>
-                                    <th>{{'reports_table_deviation' | localize("Scostamento")}}</th>
-                                    <th>{{'reports_table_quality' | localize("Qualità")}}</th>
-                                    <th>{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
-                                    <th>{{'reports_table_shift' | localize("Turno")}}</th>
-                                    <th @click="openModalSelectField()"><i class="fa fa-angle-double-right"></i></th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td colspan="1">Finestra02.pgm</td>
-                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                                    <td colspan="1">1</td>
-                                    <td colspan="1">11:25:00</td>
-                                    <td colspan="1">13:10:00</td>
-                                    <td colspan="1">12/04/2017</td>
-                                    <td colspan="1">01:45:00</td>
-                                    <td colspan="1">01:25:00</td>
-                                    <td colspan="1">01:20:00</td>
-                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                                    <td colspan="1">Buono</td>
-                                    <td colspan="1">Nome utente</td>
-                                    <td colspan="1">1°</td>
-                                    <td></td>
-                                </tr>
-                                <tr>
-                                    <td colspan="1">Finestra02.pgm</td>
-                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                                    <td colspan="1">1</td>
-                                    <td colspan="1">11:25:00</td>
-                                    <td colspan="1">13:10:00</td>
-                                    <td colspan="1">12/04/2017</td>
-                                    <td colspan="1">01:45:00</td>
-                                    <td colspan="1">01:25:00</td>
-                                    <td colspan="1">01:20:00</td>
-                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                                    <td colspan="1">Buono</td>
-                                    <td colspan="1">Nome utente</td>
-                                    <td colspan="1">1°</td>
-                                    <td></td>
-                                </tr>
-                                <tr>
-                                    <td colspan="1">Finestra02.pgm</td>
-                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                                    <td colspan="1">1</td>
-                                    <td colspan="1">11:25:00</td>
-                                    <td colspan="1">13:10:00</td>
-                                    <td colspan="1">12/04/2017</td>
-                                    <td colspan="1">01:45:00</td>
-                                    <td colspan="1">01:25:00</td>
-                                    <td colspan="1">01:20:00</td>
-                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                                    <td colspan="1">Buono</td>
-                                    <td colspan="1">Nome utente</td>
-                                    <td colspan="1">1°</td>
-                                    <td></td>
-                                </tr>
-                                <tr>
-                                    <td colspan="1">Finestra02.pgm</td>
-                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                                    <td colspan="1">1</td>
-                                    <td colspan="1">11:25:00</td>
-                                    <td colspan="1">13:10:00</td>
-                                    <td colspan="1">12/04/2017</td>
-                                    <td colspan="1">01:45:00</td>
-                                    <td colspan="1">01:25:00</td>
-                                    <td colspan="1">01:20:00</td>
-                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                                    <td colspan="1">Buono</td>
-                                    <td colspan="1">Nome utente</td>
-                                    <td colspan="1">1°</td>
-                                    <td></td>
-                                </tr>
-                                <tr>
-                                    <td colspan="1">Finestra02.pgm</td>
-                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                                    <td colspan="1">1</td>
-                                    <td colspan="1">11:25:00</td>
-                                    <td colspan="1">13:10:00</td>
-                                    <td colspan="1">12/04/2017</td>
-                                    <td colspan="1">01:45:00</td>
-                                    <td colspan="1">01:25:00</td>
-                                    <td colspan="1">01:20:00</td>
-                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                                    <td colspan="1">Buono</td>
-                                    <td colspan="1">Nome utente</td>
-                                    <td colspan="1">1°</td>
-                                    <td></td>
-                                </tr>
-                                <tr>
-                                    <td colspan="1">Finestra02.pgm</td>
-                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                                    <td colspan="1">1</td>
-                                    <td colspan="1">11:25:00</td>
-                                    <td colspan="1">13:10:00</td>
-                                    <td colspan="1">12/04/2017</td>
-                                    <td colspan="1">01:45:00</td>
-                                    <td colspan="1">01:25:00</td>
-                                    <td colspan="1">01:20:00</td>
-                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                                    <td colspan="1">Buono</td>
-                                    <td colspan="1">Nome utente</td>
-                                    <td colspan="1">1°</td>
-                                    <td></td>
-                                </tr>
-                                <tr>
-                                    <td colspan="1">Finestra02.pgm</td>
-                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                                    <td colspan="1">1</td>
-                                    <td colspan="1">11:25:00</td>
-                                    <td colspan="1">13:10:00</td>
-                                    <td colspan="1">12/04/2017</td>
-                                    <td colspan="1">01:45:00</td>
-                                    <td colspan="1">01:25:00</td>
-                                    <td colspan="1">01:20:00</td>
-                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                                    <td colspan="1">Buono</td>
-                                    <td colspan="1">Nome utente</td>
-                                    <td colspan="1">1°</td>
-                                    <td></td>
-                                </tr>
-                                <tr>
-                                    <td colspan="1">Finestra02.pgm</td>
-                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                                    <td colspan="1">1</td>
-                                    <td colspan="1">11:25:00</td>
-                                    <td colspan="1">13:10:00</td>
-                                    <td colspan="1">12/04/2017</td>
-                                    <td colspan="1">01:45:00</td>
-                                    <td colspan="1">01:25:00</td>
-                                    <td colspan="1">01:20:00</td>
-                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                                    <td colspan="1">Buono</td>
-                                    <td colspan="1">Nome utente</td>
-                                    <td colspan="1">1°</td>
-                                    <td></td>
-                                </tr>
-                                <tr>
-                                    <td colspan="1">Finestra02.pgm</td>
-                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                                    <td colspan="1">1</td>
-                                    <td colspan="1">11:25:00</td>
-                                    <td colspan="1">13:10:00</td>
-                                    <td colspan="1">12/04/2017</td>
-                                    <td colspan="1">01:45:00</td>
-                                    <td colspan="1">01:25:00</td>
-                                    <td colspan="1">01:20:00</td>
-                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                                    <td colspan="1">Buono</td>
-                                    <td colspan="1">Nome utente</td>
-                                    <td colspan="1">1°</td>
-                                    <td></td>
-                                </tr>
-                                <tr>
-                                    <td colspan="1">Finestra02.pgm</td>
-                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                                    <td colspan="1">1</td>
-                                    <td colspan="1">11:25:00</td>
-                                    <td colspan="1">13:10:00</td>
-                                    <td colspan="1">12/04/2017</td>
-                                    <td colspan="1">01:45:00</td>
-                                    <td colspan="1">01:25:00</td>
-                                    <td colspan="1">01:20:00</td>
-                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                                    <td colspan="1">Buono</td>
-                                    <td colspan="1">Nome utente</td>
-                                    <td colspan="1">1°</td>
-                                    <td></td>
-                                </tr>
-                                <tr>
-                                    <td colspan="1">Finestra02.pgm</td>
-                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                                    <td colspan="1">1</td>
-                                    <td colspan="1">11:25:00</td>
-                                    <td colspan="1">13:10:00</td>
-                                    <td colspan="1">12/04/2017</td>
-                                    <td colspan="1">01:45:00</td>
-                                    <td colspan="1">01:25:00</td>
-                                    <td colspan="1">01:20:00</td>
-                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                                    <td colspan="1">Buono</td>
-                                    <td colspan="1">Nome utente</td>
-                                    <td colspan="1">1°</td>
-                                    <td></td>
-                                </tr>
-                                <tr>
-                                    <td colspan="1">Finestra02.pgm</td>
-                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                                    <td colspan="1">1</td>
-                                    <td colspan="1">11:25:00</td>
-                                    <td colspan="1">13:10:00</td>
-                                    <td colspan="1">12/04/2017</td>
-                                    <td colspan="1">01:45:00</td>
-                                    <td colspan="1">01:25:00</td>
-                                    <td colspan="1">01:20:00</td>
-                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                                    <td colspan="1">Buono</td>
-                                    <td colspan="1">Nome utente</td>
-                                    <td colspan="1">1°</td>
-                                    <td></td>
-                                </tr>
-                                <tr>
-                                    <td colspan="1">Finestra02.pgm</td>
-                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                                    <td colspan="1">1</td>
-                                    <td colspan="1">11:25:00</td>
-                                    <td colspan="1">13:10:00</td>
-                                    <td colspan="1">12/04/2017</td>
-                                    <td colspan="1">01:45:00</td>
-                                    <td colspan="1">01:25:00</td>
-                                    <td colspan="1">01:20:00</td>
-                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                                    <td colspan="1">Buono</td>
-                                    <td colspan="1">Nome utente</td>
-                                    <td colspan="1">1°</td>
-                                    <td></td>
-                                </tr>
-                                <tr>
-                                    <td colspan="1">Finestra02.pgm</td>
-                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                                    <td colspan="1">1</td>
-                                    <td colspan="1">11:25:00</td>
-                                    <td colspan="1">13:10:00</td>
-                                    <td colspan="1">12/04/2017</td>
-                                    <td colspan="1">01:45:00</td>
-                                    <td colspan="1">01:25:00</td>
-                                    <td colspan="1">01:20:00</td>
-                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                                    <td colspan="1">Buono</td>
-                                    <td colspan="1">Nome utente</td>
-                                    <td colspan="1">1°</td>
-                                    <td></td>
-                                </tr>
-                                <tr>
-                                    <td colspan="1">Finestra02.pgm</td>
-                                    <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                                    <td colspan="1">1</td>
-                                    <td colspan="1">11:25:00</td>
-                                    <td colspan="1">13:10:00</td>
-                                    <td colspan="1">12/04/2017</td>
-                                    <td colspan="1">01:45:00</td>
-                                    <td colspan="1">01:25:00</td>
-                                    <td colspan="1">01:20:00</td>
-                                    <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                                    <td colspan="1">Buono</td>
-                                    <td colspan="1">Nome utente</td>
-                                    <td colspan="1">1°</td>
-                                    <td></td>
-                                </tr>
-                                <!-- <tr v-for="(row,index) in data" :key="index" @click="selectAlarm(row)" :class="{selected: selectedAlarm == row}">
-                                <td colspan="1">{{row.id}}</td>
-                                <td colspan="1">{{filter.sources[row.source]}}</td>
-                                <td colspan="1" v-if="row.source == 0 ">{{row.title}}</td>
-                                <td colspan="1" v-if="row.source == 1 ">{{'alarm_'+ row.alarmId | localize('alarm_'+ row.alarmId)}}</td>
-                                <td colspan="1">{{row.description}}</td>
-                                <td colspan="1">{{row.timeStamp | date('DD-MM-YYYY HH:mm:ss')}}</td>
-                                <td colspan="1">
-                                    <span v-for="(iduser, index) in row.users" :key="iduser">
-                                    {{user(iduser).username}}
-                                    <text v-if="index < row.users.length -1">, </text>
-                                    </span>
-                                </td>
-                                </tr> -->
-                            </tbody>
-                        </table>
-                        </div>
-                  </div>
-              </div>
-              <div class="reports-box-body-right">
-                <div class="body-right-header">
-                    <div class="body-right-header-left">
-                        <button :class="{'active': selectTable}" @click="viewTable()"><i class="fa fa-bars fa-2x"></i></button>
-                        <button :class="{'active': selectDiagram}" @click="viewDiagram()"><i class="fa fa-signal fa-2x"></i></button>
-                    </div>
-                    <div class="body-right-header-right">
-                        <button><i class="fa fa-print fa-2x"></i></button>
-                        <button><i class="fa fa-upload fa-2x"></i></button>
-                    </div>
-                </div>
-                <div class="body-right-card">
-                    <card-report :title="'Valore assoluto (%)'">
-
-                    </card-report>
-                    <card-report :title="'Valore assoluto'">
-                        <div class="rectangle_gray">
-                            <label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
-                            <span>10.000</span>
-                        </div>
-                    </card-report>
-                    <card-report :title="'Valore assoluto'">
-                        <div class="rectangle_gray">
-                            <label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
-                            <span>4</span>
-                        </div>
-                    </card-report>
-                </div>
-              </div>
+              <card-report-production></card-report-production>
           </div>
           <div class="reports-box-body" v-if="selectedTab == 'Events'">
-                <div class="reports-box-body-left">
+                <!-- <div class="reports-box-body-left">
                   <div class="body-left-header">
                     <div>
                         <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
@@ -461,19 +84,15 @@
                         </div>
                     </card-report>
                 </div>
-              </div>
+              </div> -->
           </div>
           <div class="reports-box-body" v-if="selectedTab == 'Alarms'">
-              <div class="reports-box-body-left">
+              <!-- <div class="reports-box-body-left">
                   <div class="body-left-header">
                     <div>
                         <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
                         <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
                     </div>
-                    <!-- <div>
-                        <label>{{'reports_body_header_label_date' | localize("Intervallo date")}}</label>
-                        <select class="reports-select-interval-date"><option>{{'reports_body_header_option_date_lastmonth' | localize("Ultimo mese")}}</option></select>
-                    </div> -->
                     <div>
                         <label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
                         <div class="interval-time">
@@ -529,10 +148,10 @@
                         </div>
                     </card-report>
                 </div>
-              </div>
+              </div> -->
           </div>
           <div class="reports-box-body" v-if="selectedTab == 'MachineStatus'">
-              <div class="reports-box-body-left">
+              <!-- <div class="reports-box-body-left">
                   <div class="body-left-header-machinestatus">
                     <div>
                         <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
@@ -567,10 +186,10 @@
                         </div>
                     </card-report>
                 </div>
-              </div>
+              </div> -->
           </div>
           <div class="reports-box-body" v-if="selectedTab == 'Timeline'">
-              <div class="reports-box-body-left">
+              <!-- <div class="reports-box-body-left">
                   <div class="body-left-header" v-if="selectDiagram">
                     <div>
                         <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
@@ -688,9 +307,6 @@
                                     </div>
                                 </div>
                             </div>
-                            <!-- <div>
-                                <select><option disabled selected>{{'reports_body_left_center_left_placeholder_select_object' | localize('Seleziona oggetti')}}</option></select>
-                            </div> -->
                             <div>
                                 <accordion-dropdown :title="'reports_body_left_center_left_dropdown_title_events' | localize('Eventi')">
                                     <div class="dropdown">
@@ -771,7 +387,7 @@
                         </div>
                     </card-report>
                 </div>
-              </div>
+              </div> -->
           </div>
       </div>
   </div>

From 9ef6d77ab85c0dd1d8e39586ef20043bec336679 Mon Sep 17 00:00:00 2001
From: Alessandro <a.francia@teamdev.it>
Date: Wed, 23 Jan 2019 11:39:12 +0100
Subject: [PATCH 2/9] card-report-production

---
 Step/wwwroot/assets/styles/base/card.less     | 166 +++++------
 Step/wwwroot/assets/styles/style.css          | 192 ++++++------
 .../components/card-report-production.ts      |  26 +-
 .../components/card-report-production.vue     | 275 ++----------------
 4 files changed, 196 insertions(+), 463 deletions(-)

diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less
index 55daa6fc..04fad574 100644
--- a/Step/wwwroot/assets/styles/base/card.less
+++ b/Step/wwwroot/assets/styles/base/card.less
@@ -1896,108 +1896,80 @@
                 border-radius: 2px;
                 box-shadow: 0 1px 2px 0 @color-black-40;
               }
-              label.label_advanced_filters{
-                margin-top: 35px; 
-                font-size: 18px;
-                line-height: 1;
-                color: @color-darkish-blue;
-                cursor: pointer;
-                span{
-                  text-decoration-line: underline;
-                  text-decoration-color: @color-darkish-blue;
-                  text-decoration-style: solid;
+            }
+
+
+            .multiselect{
+                z-index: 100;
+                label{
+                  font-size: 14px;
+                  line-height: 1.29;
+                  color: @color-warm-grey;
                 }
               }
-            }
-            div.advanced-filters{
-              z-index: 100;
-              height: 80px;
-              width: 100%;
-              display: flex;
-              flex-flow: row;
-              background-color: @color-background-white;
-              position: absolute;
-              top: 80px;
-              > div {
-                display: flex;
-                flex-flow: column;
-                height: 70px;
-                margin-right: 24px;
-                label.intervaldate{
-                  width: 253px;
-                }
-                select{
-                  width: 192px;
-                  height: 48px;
-                  border-radius: 2px;
-                  box-shadow: 0 1px 2px 0 @color-black-40;
-                  border: solid 1px @color-silver;                     
-                  font-size: 18px;
-                  line-height: 1.11;
-                  color: @color-greyish-brown;
-                  padding-left: 16px; 
-                }
-                div.interval-time{
-                  display: flex;
-                  flex-flow: row;
-                  input[type="time"]{
-                    width: 112px;
-                    height: 48px;
-                    border-radius: 2px;
-                    box-shadow: inset 0 1px 3px 0 @color-black-50;
-                    font-size: 18px;
-                    line-height: 1.11;
-                    color: @color-silver;
-                    border: none;
-                  }
-                  input[type="time"]:first-child{
-                    margin-right: 16px;
-                  }
-                  input[type="time"]::-webkit-inner-spin-button {
-                    -webkit-appearance: none;
-                    display: none;
-                    border:none;
-                  }
-                }
-                input.program{
-                  width: 256px;
-                  height: 48px;
-                  border-radius: 2px;
-                  box-shadow: inset 0 1px 3px 0 @color-black-50;
-                  font-size: 18px;
-                  line-height: 1.11;
-                  color: @color-silver;
-                  padding-left: 16px;
-                  border: none;
-                }
-                .reports-select-operator{
-                  width: 192px;
-                  height: 48px;
-                  border-radius: 2px;
-                  box-shadow: 0 1px 2px 0 @color-black-40;
-                  font-size: 18px;
-                  line-height: 1.11;
-                  color: @color-greyish-brown;
-                }
-                .reports-select-shift{
+              .selectBox{
+                  position: relative;
                   width: 144px;
-                  height: 48px;
-                  border-radius: 2px;
-                  box-shadow: 0 1px 2px 0 @color-black-40;
-                }
-                label.label_advanced_filters{
-                  margin-top: 35px; 
-                  font-size: 18px;
-                  line-height: 1;
-                  color: @color-darkish-blue;
-                  span{
-                    text-decoration-line: underline;
-                    text-decoration-color: @color-darkish-blue;
-                    text-decoration-style: solid;
-                  }
-                }
               }
+              .selectBox select{
+                width: 100%;
+                padding: 8px;
+                cursor: pointer;
+                height: 49px;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                box-shadow: 0 1px 2px @color-black-40;
+                border-radius: 2px;
+                  option{
+                      display: none;
+                  }
+              }
+              .selectBoxU{
+                position: relative;
+                width: 180px;
             }
+            .selectBoxU select{
+              width: 100%;
+              padding: 8px;
+              cursor: pointer;
+              height: 49px;
+              font-size: 18px;
+              line-height: 1.11;
+              color: @color-greyish-brown;
+              box-shadow: 0 1px 2px @color-black-40;
+              border-radius: 2px;
+                option{
+                    display: none;
+                }
+            }
+              .overSelect{
+                  position: absolute;
+                  left: 0;
+                  right: 0;
+                  top: 0;
+                  bottom: 0;
+              }
+              .checkboxes, .checkboxesU{
+                  display: none;
+              }
+              .checkboxesView, .checkboxesViewUser{
+                  width: calc(~"100% - 8px");;
+                  background-color: #fff;
+                  display: block;
+                  z-index: 100;
+                  padding: 6px 4px;
+                  box-shadow: 0 3px 5px 0 @color-black-40;
+                  label{
+                      font-size: 18px;
+                      margin:2px;
+                      display: flex;
+                      flex-flow: row;
+                  }
+                  .label-state{
+                      margin-left: 12px;
+                  }
+              }
         }
         .body-left-header-machinestatus{
           border-right: 0px;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 159977b5..1fe9f7b2 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -8067,121 +8067,97 @@ footer .container button.big:before {
   border-radius: 2px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
 }
-.card-report-production .reports-box-body-left .body-left-header > div label.label_advanced_filters,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus > div label.label_advanced_filters {
-  margin-top: 35px;
-  font-size: 18px;
-  line-height: 1;
-  color: #002680;
-  cursor: pointer;
-}
-.card-report-production .reports-box-body-left .body-left-header > div label.label_advanced_filters span,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus > div label.label_advanced_filters span {
-  text-decoration-line: underline;
-  text-decoration-color: #002680;
-  text-decoration-style: solid;
-}
-.card-report-production .reports-box-body-left .body-left-header div.advanced-filters,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters {
+.card-report-production .reports-box-body-left .body-left-header .multiselect,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .multiselect {
   z-index: 100;
-  height: 80px;
-  width: 100%;
-  display: flex;
-  flex-flow: row;
-  background-color: #fff;
-  position: absolute;
-  top: 80px;
 }
-.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div {
-  display: flex;
-  flex-flow: column;
-  height: 70px;
-  margin-right: 24px;
+.card-report-production .reports-box-body-left .body-left-header .multiselect label,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .multiselect label {
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
 }
-.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div label.intervaldate,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div label.intervaldate {
-  width: 253px;
-}
-.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div select,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div select {
-  width: 192px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  border: solid 1px #bbbcbc;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-  padding-left: 16px;
-}
-.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div div.interval-time {
-  display: flex;
-  flex-flow: row;
-}
-.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"],
-.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div div.interval-time input[type="time"] {
-  width: 112px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
-  font-size: 18px;
-  line-height: 1.11;
-  color: #bbbcbc;
-  border: none;
-}
-.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"]:first-child,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div div.interval-time input[type="time"]:first-child {
-  margin-right: 16px;
-}
-.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"]::-webkit-inner-spin-button,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div div.interval-time input[type="time"]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  display: none;
-  border: none;
-}
-.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div input.program,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div input.program {
-  width: 256px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
-  font-size: 18px;
-  line-height: 1.11;
-  color: #bbbcbc;
-  padding-left: 16px;
-  border: none;
-}
-.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div .reports-select-operator,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div .reports-select-operator {
-  width: 192px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-}
-.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div .reports-select-shift,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div .reports-select-shift {
+.card-report-production .reports-box-body-left .body-left-header .selectBox,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .selectBox {
+  position: relative;
   width: 144px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
 }
-.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div label.label_advanced_filters,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div label.label_advanced_filters {
-  margin-top: 35px;
+.card-report-production .reports-box-body-left .body-left-header .selectBox select,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .selectBox select {
+  width: 100%;
+  padding: 8px;
+  cursor: pointer;
+  height: 49px;
   font-size: 18px;
-  line-height: 1;
-  color: #002680;
+  line-height: 1.11;
+  color: #4b4b4b;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  border-radius: 2px;
 }
-.card-report-production .reports-box-body-left .body-left-header div.advanced-filters > div label.label_advanced_filters span,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div label.label_advanced_filters span {
-  text-decoration-line: underline;
-  text-decoration-color: #002680;
-  text-decoration-style: solid;
+.card-report-production .reports-box-body-left .body-left-header .selectBox select option,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .selectBox select option {
+  display: none;
+}
+.card-report-production .reports-box-body-left .body-left-header .selectBoxU,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .selectBoxU {
+  position: relative;
+  width: 180px;
+}
+.card-report-production .reports-box-body-left .body-left-header .selectBoxU select,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .selectBoxU select {
+  width: 100%;
+  padding: 8px;
+  cursor: pointer;
+  height: 49px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  border-radius: 2px;
+}
+.card-report-production .reports-box-body-left .body-left-header .selectBoxU select option,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .selectBoxU select option {
+  display: none;
+}
+.card-report-production .reports-box-body-left .body-left-header .overSelect,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .overSelect {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.card-report-production .reports-box-body-left .body-left-header .checkboxes,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .checkboxes,
+.card-report-production .reports-box-body-left .body-left-header .checkboxesU,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .checkboxesU {
+  display: none;
+}
+.card-report-production .reports-box-body-left .body-left-header .checkboxesView,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .checkboxesView,
+.card-report-production .reports-box-body-left .body-left-header .checkboxesViewUser,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser {
+  width: calc(100% - 8px);
+  background-color: #fff;
+  display: block;
+  z-index: 100;
+  padding: 6px 4px;
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
+}
+.card-report-production .reports-box-body-left .body-left-header .checkboxesView label,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .checkboxesView label,
+.card-report-production .reports-box-body-left .body-left-header .checkboxesViewUser label,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser label {
+  font-size: 18px;
+  margin: 2px;
+  display: flex;
+  flex-flow: row;
+}
+.card-report-production .reports-box-body-left .body-left-header .checkboxesView .label-state,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .checkboxesView .label-state,
+.card-report-production .reports-box-body-left .body-left-header .checkboxesViewUser .label-state,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser .label-state {
+  margin-left: 12px;
 }
 .card-report-production .reports-box-body-left .body-left-header-machinestatus {
   border-right: 0px;
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts
index 33f29418..5ca0ae21 100644
--- a/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts
@@ -4,6 +4,7 @@ import {cardReport} from "../../../modules/base-components/cards/index";
 import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
 import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
 import { Accordion } from "src/modules/base-components";
+import { loginService } from "src/services";
 import DatePicker from "vue2-datepicker";
 import moment from "moment";
 import { ModalHelper } from "src/components/modals";
@@ -24,9 +25,11 @@ export default class CardReportProduction extends Vue {
 
     filter: {
         interval?: Date[],
-        timelineMacro: Array<string>
+        timelineMacro: Array<string>,
+        multiUser: Array<any>
     } = {
         timelineMacro: ["Eventi","Allarmi","Stato macchina","Programmi"],
+        multiUser: [],
         interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
     };
     
@@ -35,6 +38,17 @@ export default class CardReportProduction extends Vue {
     selectDiagram: boolean = false;
     selectMoreFilter: boolean = false;
     selectTable: boolean = true;
+    users: Array<any> = [];
+
+    get currentUser() {
+        return this.$store.state.currentUser;
+    }
+
+    async mounted() {
+        this.users = await loginService.getAllUsers();
+        this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
+        this.filter.multiUser.push(this.currentUser.username);
+      }
 
     public selectTab(value){
         this.selectedTab = value;
@@ -71,10 +85,10 @@ export default class CardReportProduction extends Vue {
     openModalSelectField(){
         ModalHelper.ShowModal(modalReportSelectColumn);
     }
-    public openSelectState() {
-        if (!$('.checkboxes').hasClass('checkboxesView'))
-          $('.checkboxes').addClass('checkboxesView');
+    public openSelectStateU() {
+        if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
+          $('.checkboxesU').addClass('checkboxesViewUser');
         else
-          $('.checkboxes').removeClass('checkboxesView');
-    }
+          $('.checkboxesU').removeClass('checkboxesViewUser');
+      }
 }
\ No newline at end of file
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
index 8aad7800..cc32e686 100644
--- a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
@@ -14,31 +14,6 @@
                 <label>{{'reports_body_header_axes_y' | localize("Asse Y")}}</label>
                 <select><option>{{'reports_body_header_option_axes_y_frequency' | localize("Frequenza")}}</option></select>
             </div>
-            <div>
-                <label class="label_advanced_filters" @click="viewMoreFilter()" v-if="!selectMoreFilter"><span>{{'reports_body_header_diagram_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
-                <label class="label_advanced_filters" @click="viewMoreFilter()" v-if="selectMoreFilter"><span>{{'reports_body_header_diagram_label_hide_advanced_filters' | localize("Nascondi filtri avanzati")}}</span> <i class="fa fa-caret-up"></i></label>
-            </div>
-            <div class="advanced-filters" v-if="selectMoreFilter">
-                <div>
-                    <label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
-                    <div class="interval-time">
-                        <input type="time"/>
-                        <input type="time"/>
-                    </div>
-                </div>
-                <div>
-                    <label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
-                    <input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
-                </div>
-                <div>
-                    <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
-                    <select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
-                </div>
-                <div>
-                    <label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
-                    <select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
-                </div>
-            </div>
         </div>
     <div class="body-left-header" v-if="!selectDiagram">
         <div>
@@ -56,17 +31,35 @@
             <label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
             <input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
         </div>
-        <div>
+        <div class="multiselect">
+          <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
+          <div class="selectBoxU" @click="openSelectStateU()">
+            <select id="selectListCheckboxes">
+              <option><span v-for="(item, index) in filter.multiUser" :key="item" >{{'reports_filter_operator_'+item | localize(item)}}{{(index==filter.multiUser.length-1)?'':', '}}</span></option>
+              <div class="overSelect"></div>
+            </select>
+          </div>
+
+          <div class="checkboxesU">
+            <div v-for="item in users" :key="item.id">
+              <label :for="item.username">
+              <div class="custom-checkbox">
+                <input type="checkbox"  v-model="filter.multiUser" :value="item.username" :id="item.username" />
+                <label :for="item.username"></label>
+              </div>
+              <label class="label-state">{{item.username}}</label>
+              </label>
+            </div>
+          </div>
+        </div>
+        <!-- <div>
             <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
             <select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
-        </div>
+        </div> -->
         <div>
             <label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
             <select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
         </div>
-        <div>
-            <label class="label_advanced_filters"><span>{{'reports_body_header_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
-        </div>
     </div>
     <div class="body-left-center">
         <div class="body-left-center-container">
@@ -122,228 +115,6 @@
                       <td colspan="1">1°</td>
                       <td></td>
                   </tr>
-                  <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
-                      <td></td>
-                  </tr>
-                  <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
-                      <td></td>
-                  </tr>
-                  <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
-                      <td></td>
-                  </tr>
-                  <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
-                      <td></td>
-                  </tr>
-                  <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
-                      <td></td>
-                  </tr>
-                  <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
-                      <td></td>
-                  </tr>
-                  <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
-                      <td></td>
-                  </tr>
-                  <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
-                      <td></td>
-                  </tr>
-                  <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
-                      <td></td>
-                  </tr>
-                  <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
-                      <td></td>
-                  </tr>
-                  <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
-                      <td></td>
-                  </tr>
-                  <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
-                      <td></td>
-                  </tr>
-                  <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
-                      <td></td>
-                  </tr>
-                  <!-- <tr v-for="(row,index) in data" :key="index" @click="selectAlarm(row)" :class="{selected: selectedAlarm == row}">
-                  <td colspan="1">{{row.id}}</td>
-                  <td colspan="1">{{filter.sources[row.source]}}</td>
-                  <td colspan="1" v-if="row.source == 0 ">{{row.title}}</td>
-                  <td colspan="1" v-if="row.source == 1 ">{{'alarm_'+ row.alarmId | localize('alarm_'+ row.alarmId)}}</td>
-                  <td colspan="1">{{row.description}}</td>
-                  <td colspan="1">{{row.timeStamp | date('DD-MM-YYYY HH:mm:ss')}}</td>
-                  <td colspan="1">
-                      <span v-for="(iduser, index) in row.users" :key="iduser">
-                      {{user(iduser).username}}
-                      <text v-if="index < row.users.length -1">, </text>
-                      </span>
-                  </td>
-                  </tr> -->
               </tbody>
           </table>
           </div>

From d00cc5efc1cd4cce576c6d19e968fb9b1f4f22e4 Mon Sep 17 00:00:00 2001
From: Alessandro <a.francia@teamdev.it>
Date: Wed, 23 Jan 2019 15:11:28 +0100
Subject: [PATCH 3/9] fix modal-report-select-column

---
 .../components/card-report-production.vue     |   2 +-
 .../modal-report-select-column.ts             |  30 +++++
 .../modal-report-select-column.vue            | 104 +-----------------
 3 files changed, 37 insertions(+), 99 deletions(-)

diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
index cc32e686..dba60ab9 100644
--- a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
@@ -44,7 +44,7 @@
             <div v-for="item in users" :key="item.id">
               <label :for="item.username">
               <div class="custom-checkbox">
-                <input type="checkbox"  v-model="filter.multiUser" :value="item.username" :id="item.username" />
+                <input type="checkbox" v-model="filter.multiUser" :value="item.username" :id="item.username" />
                 <label :for="item.username"></label>
               </div>
               <label class="label-state">{{item.username}}</label>
diff --git a/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts b/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts
index 55f9bc16..ee2c8c9a 100644
--- a/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts
+++ b/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts
@@ -2,6 +2,7 @@ import Vue from "vue";
 import Component from "vue-class-component";
 import { ModalHelper,Modal } from "src/components/modals";
 import { Factory, MessageService } from "src/_base";
+import { Watch } from "vue-property-decorator";
 
 declare var cmsClient: any;
 
@@ -13,6 +14,35 @@ declare var cmsClient: any;
 
 export default class ModalReportSelectColumn extends Vue {
 
+  maxRow: number = 3;
+
+  checkboxes: Array<any> = [{id: "ProgramName", label: this.$options.filters.localize("modal_report_select_column_program_name", "Nome programma")},
+                            {id: "Date", label: this.$options.filters.localize("modal_report_select_column_date", "Data")},
+                            {id: "Deviation", label: this.$options.filters.localize("modal_report_select_column_deviation", "Scostamento")},
+                            {id: "Dimensions", label: this.$options.filters.localize("modal_report_select_column_dimensions", "Dimensioni")},
+                            {id: "EffectiveTime", label: this.$options.filters.localize("modal_report_select_column_effective_time", "Tempo effettivo")},
+                            {id: "Quality", label: this.$options.filters.localize("modal_report_select_column_quality", "Qualità")},
+                            {id: "Quantity", label: this.$options.filters.localize("modal_report_select_column_quantity", "Quantità")},
+                            {id: "AverageTime", label: this.$options.filters.localize("modal_report_select_column_average_time", "Tempo medio")},
+                            {id: "OperatorName", label: this.$options.filters.localize("modal_report_select_column_operator_name", "Nome operatore")},
+                            {id: "StartTime", label: this.$options.filters.localize("modal_report_select_column_start_time", "Ora inizio")},
+                            {id: "TheoreticalTime", label: this.$options.filters.localize("modal_report_select_column_theoretical_time", "Tempo teorico")},
+                            {id: "Shift", label: this.$options.filters.localize("modal_report_select_column_shift", "Turno")},
+                            {id: "EndTime", label: this.$options.filters.localize("modal_report_select_column_end_time", "Ora fine")}];
+  
+  allSelectedColumn = false;
+  columnSelected = [];
+
+  selectAll() {
+    this.columnSelected = [];
+
+    if (!this.allSelectedColumn) {
+        for (let checkbox in this.checkboxes) {
+            this.columnSelected.push(this.checkboxes[checkbox].id);
+        }
+    }
+  }
+
   close() {
     Factory.Get(MessageService).deleteChannel("esc_pressed");
     ModalHelper.HideModal();
diff --git a/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue b/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue
index 887fc887..a413f3d8 100644
--- a/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue
+++ b/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue
@@ -5,112 +5,20 @@
         <label>{{'modal_report_select_column_body_title' | localize("Scegli le colonne che vuoi visualizzare:")}}</label>
         <div>
             <div class="modal-report-select-column-checkbox">
-                <input type="checkbox" value="1" id="modalReportSelectAll" name="" />
+                <input type="checkbox" @click="selectAll()" v-model="allSelectedColumn" value="1" id="modalReportSelectAll" name="" />
                 <label for="modalReportSelectAll"></label>
             </div>
             <label for="modalReportSelectAll" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_select_all' | localize("Seleziona tutte")}}</label>
         </div>
     </div>
     <div class="modal-report-body-center">
-        <div class="modal-report-body-center-row">
-            <div>
+        <div class="modal-report-body-center-row" v-for="i in Math.ceil(checkboxes.length / maxRow)" :key="i">
+            <div v-for="(checkbox, idx) in checkboxes.slice((i-1) * maxRow, i * maxRow)" :key="idx">
                 <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportProgramName" name="" />
-                    <label for="modalReportProgramName"></label>
+                    <input type="checkbox" v-model="columnSelected" :value="checkbox.id" :id="checkbox.id" />
+                    <label :for="checkbox.id"></label>
                 </div>
-                <label for="modalReportProgramName" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_program_name' | localize("Nome programma")}}</label>
-            </div>
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportDate" name="" />
-                    <label for="modalReportDate"></label>
-                </div>
-                <label for="modalReportDate" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_date' | localize("Data")}}</label>
-            </div>
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportDeviation" name="" />
-                    <label for="modalReportDeviation"></label>
-                </div>
-                <label for="modalReportDeviation" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_deviation' | localize("Scostamento")}}</label>
-            </div>
-        </div>
-        <div class="modal-report-body-center-row">
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportDimensions" name="" />
-                    <label for="modalReportDimensions"></label>
-                </div>
-                <label for="modalReportDimensions" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_dimensions' | localize("Dimensioni")}}</label>
-            </div>
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportEffectiveTime" name="" />
-                    <label for="modalReportEffectiveTime"></label>
-                </div>
-                <label for="modalReportEffectiveTime" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_effective_time' | localize("Tempo effettivo")}}</label>
-            </div>
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportQuality" name="" />
-                    <label for="modalReportQuality"></label>
-                </div>
-                <label for="modalReportQuality" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_quality' | localize("Qualità")}}</label>
-            </div>
-        </div>
-        <div class="modal-report-body-center-row">
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportQuantity" name="" />
-                    <label for="modalReportQuantity"></label>
-                </div>
-                <label for="modalReportQuantity" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_quantity' | localize("Quantità")}}</label>
-            </div>
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportAverageTime" name="" />
-                    <label for="modalReportAverageTime"></label>
-                </div>
-                <label for="modalReportAverageTime" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_average_time' | localize("Tempo medio")}}</label>
-            </div>
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportOperatorName" name="" />
-                    <label for="modalReportOperatorName"></label>
-                </div>
-                <label for="modalReportOperatorName" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_operator_name' | localize("Nome operatore")}}</label>
-            </div>
-        </div>
-        <div class="modal-report-body-center-row">
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportStartNow" name="" />
-                    <label for="modalReportStartNow"></label>
-                </div>
-                <label for="modalReportStartNow" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_start_now' | localize("Ora inizio")}}</label>
-            </div>
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportTheoreticalTime" name="" />
-                    <label for="modalReportTheoreticalTime"></label>
-                </div>
-                <label for="modalReportTheoreticalTime" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_theoretical_time' | localize("Tempo teorico")}}</label>
-            </div>
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportShift" name="" />
-                    <label for="modalReportShift"></label>
-                </div>
-                <label for="modalReportShift" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_shift' | localize("Turno")}}</label>
-            </div>
-        </div>
-        <div class="modal-report-body-center-row">
-            <div>
-                <div class="modal-report-select-column-checkbox">
-                    <input type="checkbox" value="1" id="modalReportEndTime" name="" />
-                    <label for="modalReportEndTime"></label>
-                </div>
-                <label for="modalReportEndTime" class="modal-report-select-column-checkbox-label">{{'modal_report_select_column_end_time' | localize("Ora fine")}}</label>
+                <label :for="checkbox.id" class="modal-report-select-column-checkbox-label">{{checkbox.label}}</label>
             </div>
         </div>
     </div>

From bd35d6467ef8c2ae167313772fa1607631df7922 Mon Sep 17 00:00:00 2001
From: Alessandro <a.francia@teamdev.it>
Date: Wed, 23 Jan 2019 17:02:26 +0100
Subject: [PATCH 4/9] more card-report events alarms machine status

---
 Step/wwwroot/assets/styles/base/card.less     | 1796 ++++++++++++++-
 Step/wwwroot/assets/styles/base/report.less   |    6 +-
 Step/wwwroot/assets/styles/style.css          | 1948 ++++++++++++++++-
 .../reports/components/card-report-alarms.ts  |   94 +
 .../reports/components/card-report-alarms.vue |  155 ++
 .../reports/components/card-report-events.ts  |   94 +
 .../reports/components/card-report-events.vue |  155 ++
 .../components/card-report-machine-status.ts  |   94 +
 .../components/card-report-machine-status.vue |   43 +
 .../app_modules/reports/components/reports.ts |    6 +-
 .../reports/components/reports.vue            |  127 +-
 11 files changed, 4363 insertions(+), 155 deletions(-)
 create mode 100644 Step/wwwroot/src/app_modules/reports/components/card-report-alarms.ts
 create mode 100644 Step/wwwroot/src/app_modules/reports/components/card-report-alarms.vue
 create mode 100644 Step/wwwroot/src/app_modules/reports/components/card-report-events.ts
 create mode 100644 Step/wwwroot/src/app_modules/reports/components/card-report-events.vue
 create mode 100644 Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts
 create mode 100644 Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue

diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less
index 04fad574..655fd6ea 100644
--- a/Step/wwwroot/assets/styles/base/card.less
+++ b/Step/wwwroot/assets/styles/base/card.less
@@ -1899,6 +1899,593 @@
             }
 
 
+            .multiselect{
+                z-index: 100;
+                label{
+                  font-size: 14px;
+                  line-height: 1.29;
+                  color: @color-warm-grey;
+                }
+              }
+              .selectBoxU{
+                position: relative;
+                width: 192px;
+            }
+            .selectBoxU select{
+              width: 100%;
+              padding: 8px;
+              cursor: pointer;
+              height: 49px;
+              font-size: 18px;
+              line-height: 1.11;
+              color: @color-greyish-brown;
+              box-shadow: 0 1px 2px @color-black-40;
+              border-radius: 2px;
+                option{
+                    display: none;
+                }
+            }
+              .overSelect{
+                  position: absolute;
+                  left: 0;
+                  right: 0;
+                  top: 0;
+                  bottom: 0;
+              }
+              .checkboxes, .checkboxesU{
+                  display: none;
+              }
+              .checkboxesView, .checkboxesViewUser{
+                  width: calc(~"100% - 8px");;
+                  background-color: #fff;
+                  display: block;
+                  z-index: 100;
+                  padding: 6px 4px;
+                  box-shadow: 0 3px 5px 0 @color-black-40;
+                  label{
+                      font-size: 18px;
+                      margin:2px;
+                      display: flex;
+                      flex-flow: row;
+                  }
+                  .label-state{
+                      margin-left: 12px;
+                  }
+              }
+        }
+        .body-left-header-machinestatus{
+          border-right: 0px;
+        }
+        .body-left-center {
+          width: 1448px;
+          max-height: 681px;
+          display: flex;
+          flex-flow: column;
+          .body-left-center-container{
+            width: 100%;
+            table{
+              table-layout: fixed;
+              width: 100%;
+              border-collapse: collapse;
+            }
+            thead{
+                border-bottom: solid 2px @color-label-grey;
+                font-size: 14px;
+                line-height: 1.29;
+                color: @color-darkish-blue;
+                display: block;
+                width: 1431px;
+            }
+            thead tr th{
+                height: 48px;
+            }
+            tr:nth-child(even) {background: #FFF }
+            tr:nth-child(odd) {background: #dddddd }
+
+            // thead tr{
+            //   width: 1448px;
+            // }
+
+            thead tr:nth-child(odd){
+              background: #FFF
+            }
+
+            th:nth-child(1), td:nth-child(1){
+                width:162px;
+                max-width: 162px;
+                text-align: center;
+            }  
+            th:nth-child(2), td:nth-child(2){
+              width:139px;
+              max-width: 139px;
+              text-align: center;
+            }
+            th:nth-child(3), td:nth-child(3){
+                width:83px;
+                max-width:83px;
+                text-align: center;
+            }
+            th:nth-child(4), td:nth-child(4){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(5), td:nth-child(5){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(6), td:nth-child(6){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(7), td:nth-child(7){
+                width:97px;
+                max-width:97px;
+                text-align: center;
+            }
+            th:nth-child(8), td:nth-child(8){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(9), td:nth-child(9){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(10), td:nth-child(10){
+              width:115px;
+              max-width:115px;
+              text-align: center;
+            }
+            th:nth-child(11), td:nth-child(11){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(12), td:nth-child(12){
+              width:148px;
+              max-width:148px;
+              text-align: center;
+            }
+            th:nth-child(13), td:nth-child(13){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:last-child{
+              font-size: 23px;
+              font-weight: bold;
+              cursor: pointer;
+            }
+            th, td{
+                overflow: hidden;
+                div{
+                    overflow: hidden;
+                            max-height: 64px;
+                }
+            }
+            tbody{
+                display: block;
+                height: 631px;
+                width: 1448px;
+                overflow: scroll;
+                tr{
+                    // cursor: pointer;
+                    height:  64px;
+                    padding: 10px;
+                    font-size: 14px;
+                    line-height: 1.29;
+                    color: @color-greyish-brown;
+                    td{
+                        text-align: center;
+                        &.green{
+                          color: @color-apple-green;
+                        }
+                        &.red{
+                          color: @color-scarlet;
+                        }
+                    }
+                    td:last-child{
+                      width: 10px;
+                    }
+                    &.selected{
+                        background-color: rgba(23, 145, 255, 0.75);
+                        color: @color-white;
+                        font-weight: 600;
+                    }
+                }
+            }
+            .body-left-center-left{
+              width: 360px;
+              height: 616px;
+              display: flex;
+              flex-flow: column;
+              align-items: center;
+              border: solid 1px @color-whitegrey;
+              overflow-y: auto;
+              .multiselect{
+                z-index: 100;
+                margin-bottom: 24px;
+                margin-top: 16px;
+                label{
+                  font-size: 14px;
+                  line-height: 1.29;
+                  color: @color-warm-grey;
+                }
+              }
+              .selectBox{
+                  position: relative;
+                  width: 328px;
+                  height: 64px;
+              }
+              .selectBox select{
+                width: 100%;
+                padding: 8px;
+                cursor: pointer;
+                height: 64px;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                margin-bottom: 0;
+                margin-top: 0;
+                  option{
+                      display: none;
+                  }
+              }
+              .overSelect{
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+            }
+            .checkboxes, .checkboxesU{
+                display: none;
+            }
+            .checkboxesView, .checkboxesViewUser{
+                width: calc(~"100% - 8px");;
+                background-color: #fff;
+                display: block;
+                z-index: 100;
+                padding: 6px 4px;
+                box-shadow: 0 3px 5px 0 @color-black-40;
+                label{
+                    font-size: 18px;
+                    margin:2px;
+                    display: flex;
+                    flex-flow: row;
+                }
+                .label-state{
+                    margin-left: 12px;
+                }
+            }
+              div{
+                select{
+                  width: 328px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                  margin-bottom: 24px;
+                  margin-top: 16px;
+                  padding-left: 16px;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                }
+                .accordion-dropdown{
+                  header {
+                    height: 64px;
+                    width: 312px;
+                    border-radius: 2px;
+                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    color: @color-darkish-blue;
+                    line-height: 1;
+                    font-size: 18px;
+                    padding-left: 16px;
+                    cursor: pointer;
+                    span {
+                        width: 100%;
+                    }
+                    .expander {
+                        margin: 0 12px;
+                        line-height: 28px;
+                        height: 28px;
+                        width: 28px;
+                        font-size: 28px;
+                    }
+                  }
+                  section {
+                    width: 328px;
+                    min-height: 0;
+                    max-height: 0;
+                    transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
+                    overflow: hidden;
+                    &.expanded {
+                      min-height: 64px;
+                      background-color: rgba(255, 255, 255, 0.1);
+                      max-height: 1000px;
+                    }
+                    .item {
+                        height: 64px;
+                        width: 100%;
+                        line-height: 64px;
+                        background-color: @color-white2;
+                    }
+            
+                    .dropdown{
+                      // background-color: @color-white2;
+                      height: 100%;
+                      margin-top: 2px;
+                      .filename{
+                          display: flex;
+                          height: 64px;
+                          align-items: center;
+                          cursor: pointer;
+                          i{
+                            color: @color-cyan-blue;
+                            margin: 0 20px 0 20px;
+                          }
+                          span{
+                              width: 100%;
+                              font-size: 18px;
+                              line-height: 1;
+                              color: @color-darkish-blue;
+                          }
+            
+                          &.selected{
+                            span, i{
+                              color:#4b4b4b;
+                            }
+                          }
+                      }
+                      .filename.selected{
+                          background-color: rgba(255, 255, 255, 0.8);
+                      }
+                      
+                    } 
+                  }
+                }
+              }
+            }
+          }
+
+          .body-left-center-footer{
+            height: 64px;
+            width: 100%;
+            border: solid 1px @color-whitegrey;
+            .header-title{
+              width: 360px;
+              height: 64px;
+              display: flex;
+              flex-flow: column;
+              align-items: center;
+              justify-content: center;
+              .title{
+                font-size: 14px;
+                color: @color-warm-grey;
+              }
+              .data-temporal{
+                font-size: 18px;
+                line-height: 1;
+                color: @color-greyish-brown;
+              }
+            }
+          }
+        }
+    }
+    .reports-box-body-right {
+        width: 327px;
+        height: 100%;
+        .body-right-header{
+          width: 100%;
+          height: 70px;
+          display: flex;
+          flex-flow: row;
+          margin-top: 18px;
+          justify-content: flex-end;
+          .body-right-header-left {
+            width: 158px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-right: solid 2px @color-whitegrey;
+            button{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: 0 1px 2px 0 @color-black-40;
+              background-image: linear-gradient(to bottom,@color-white2, @color-silver);
+              border: none;
+            }
+            button.active{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: inset 0 1px 3px 0 @color-black-40;
+              background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+              color: @color-clear-blue;
+              border: none;
+            }
+          }
+          .body-right-header-right {
+            width: calc(~"100% - 158px");
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            button{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: 0 1px 2px 0 @color-black-40;
+              background-image: linear-gradient(to bottom,@color-white2, @color-silver);
+              border:none;
+            }
+            button:first-child{
+              margin-right: 16px;
+            }
+            button:active{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: inset 0 1px 3px 0 @color-black-40;
+              background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+              border: none;
+            }
+          }
+        }
+        .body-right-card{
+          width: 100%;
+          height: calc(~"100% - 70px");
+          display: flex;
+          flex-flow: column;
+          align-items: center;
+          .card-report{
+            > section {
+              display: flex;
+              align-items: center;
+              justify-content: center; 
+              .rectangle_gray{
+                width: 256px;
+                height: 120px;
+                border-radius: 2px;
+                display: flex;
+                flex-flow: column;
+                align-items: center;
+                justify-content: center;
+                background-color: @color-white2;
+                label{
+                  font-size: 18px;
+                  color: @color-warm-grey;
+                  margin-bottom: 30px;
+                }
+                span{
+                  font-size: 48px;
+                  font-weight: bold;
+                  line-height: 0.38;
+                  color: @color-clear-blue;
+                }
+              }
+            }
+          }
+        }
+    }
+}
+
+
+
+.card-report-events{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    .reports-box-body-left {
+        width: 1455px;
+        height: 100%;
+        .body-left-header, .body-left-header-machinestatus{
+            width: 100%;
+            height: 70px;
+            display: flex;
+            flex-flow: row;
+            margin-top: 18px;
+            border-right: solid 2px @color-whitegrey;
+            position: relative;
+            margin-bottom: 16px;
+            .mx-datepicker-range{
+              width: 170px;
+              height: 70px;
+              .mx-input-wrapper{
+                margin-right: 24px;
+                width: 253px;
+                .mx-input{
+                  width: 253px;
+                  height: 50px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                  border: solid 1px @color-silver;                     
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                  padding-left: 16px;
+                }
+              }
+            }
+            > div {
+              display: flex;
+              flex-flow: column;
+              height: 70px;
+              margin-right: 24px;
+              label.intervaldate{
+                width: 253px;
+              }
+              select{
+                width: 192px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+                border: solid 1px @color-silver;                     
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                padding-left: 16px; 
+              }
+              div.interval-time{
+                display: flex;
+                flex-flow: row;
+                input[type="time"]{
+                  width: 112px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: inset 0 1px 3px 0 @color-black-50;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-silver;
+                  border: none;
+                }
+                input[type="time"]:first-child{
+                  margin-right: 16px;
+                }
+                input[type="time"]::-webkit-inner-spin-button {
+                  -webkit-appearance: none;
+                  display: none;
+                  border:none;
+                }
+              }
+              input.program{
+                width: 256px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: inset 0 1px 3px 0 @color-black-50;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-silver;
+                padding-left: 16px;
+                border: none;
+              }
+              .reports-select-operator{
+                width: 192px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+              }
+              .reports-select-shift{
+                width: 144px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+              }
+            }
+
+
             .multiselect{
                 z-index: 100;
                 label{
@@ -1927,7 +2514,1214 @@
               }
               .selectBoxU{
                 position: relative;
-                width: 180px;
+                width: 192px;
+            }
+            .selectBoxU select{
+              width: 100%;
+              padding: 8px;
+              cursor: pointer;
+              height: 49px;
+              font-size: 18px;
+              line-height: 1.11;
+              color: @color-greyish-brown;
+              box-shadow: 0 1px 2px @color-black-40;
+              border-radius: 2px;
+                option{
+                    display: none;
+                }
+            }
+              .overSelect{
+                  position: absolute;
+                  left: 0;
+                  right: 0;
+                  top: 0;
+                  bottom: 0;
+              }
+              .checkboxes, .checkboxesU{
+                  display: none;
+              }
+              .checkboxesView, .checkboxesViewUser{
+                  width: calc(~"100% - 8px");;
+                  background-color: #fff;
+                  display: block;
+                  z-index: 100;
+                  padding: 6px 4px;
+                  box-shadow: 0 3px 5px 0 @color-black-40;
+                  label{
+                      font-size: 18px;
+                      margin:2px;
+                      display: flex;
+                      flex-flow: row;
+                  }
+                  .label-state{
+                      margin-left: 12px;
+                  }
+              }
+        }
+        .body-left-header-machinestatus{
+          border-right: 0px;
+        }
+        .body-left-center {
+          width: 1448px;
+          max-height: 681px;
+          display: flex;
+          flex-flow: column;
+          .body-left-center-container{
+            width: 100%;
+            table{
+              table-layout: fixed;
+              width: 100%;
+              border-collapse: collapse;
+            }
+            thead{
+                border-bottom: solid 2px @color-label-grey;
+                font-size: 14px;
+                line-height: 1.29;
+                color: @color-darkish-blue;
+                display: block;
+                width: 1431px;
+            }
+            thead tr th{
+                height: 48px;
+            }
+            tr:nth-child(even) {background: #FFF }
+            tr:nth-child(odd) {background: #dddddd }
+
+            // thead tr{
+            //   width: 1448px;
+            // }
+
+            thead tr:nth-child(odd){
+              background: #FFF
+            }
+
+            th:nth-child(1), td:nth-child(1){
+                width:162px;
+                max-width: 162px;
+                text-align: center;
+            }  
+            th:nth-child(2), td:nth-child(2){
+              width:139px;
+              max-width: 139px;
+              text-align: center;
+            }
+            th:nth-child(3), td:nth-child(3){
+                width:83px;
+                max-width:83px;
+                text-align: center;
+            }
+            th:nth-child(4), td:nth-child(4){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(5), td:nth-child(5){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(6), td:nth-child(6){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(7), td:nth-child(7){
+                width:97px;
+                max-width:97px;
+                text-align: center;
+            }
+            th:nth-child(8), td:nth-child(8){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(9), td:nth-child(9){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(10), td:nth-child(10){
+              width:115px;
+              max-width:115px;
+              text-align: center;
+            }
+            th:nth-child(11), td:nth-child(11){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(12), td:nth-child(12){
+              width:148px;
+              max-width:148px;
+              text-align: center;
+            }
+            th:nth-child(13), td:nth-child(13){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:last-child{
+              font-size: 23px;
+              font-weight: bold;
+              cursor: pointer;
+            }
+            th, td{
+                overflow: hidden;
+                div{
+                    overflow: hidden;
+                            max-height: 64px;
+                }
+            }
+            tbody{
+                display: block;
+                height: 631px;
+                width: 1448px;
+                overflow: scroll;
+                tr{
+                    // cursor: pointer;
+                    height:  64px;
+                    padding: 10px;
+                    font-size: 14px;
+                    line-height: 1.29;
+                    color: @color-greyish-brown;
+                    td{
+                        text-align: center;
+                        &.green{
+                          color: @color-apple-green;
+                        }
+                        &.red{
+                          color: @color-scarlet;
+                        }
+                    }
+                    td:last-child{
+                      width: 10px;
+                    }
+                    &.selected{
+                        background-color: rgba(23, 145, 255, 0.75);
+                        color: @color-white;
+                        font-weight: 600;
+                    }
+                }
+            }
+            .body-left-center-left{
+              width: 360px;
+              height: 616px;
+              display: flex;
+              flex-flow: column;
+              align-items: center;
+              border: solid 1px @color-whitegrey;
+              overflow-y: auto;
+              .multiselect{
+                z-index: 100;
+                margin-bottom: 24px;
+                margin-top: 16px;
+                label{
+                  font-size: 14px;
+                  line-height: 1.29;
+                  color: @color-warm-grey;
+                }
+              }
+              .selectBox{
+                  position: relative;
+                  width: 328px;
+                  height: 64px;
+              }
+              .selectBox select{
+                width: 100%;
+                padding: 8px;
+                cursor: pointer;
+                height: 64px;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                margin-bottom: 0;
+                margin-top: 0;
+                  option{
+                      display: none;
+                  }
+              }
+              .overSelect{
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+            }
+            .checkboxes, .checkboxesU{
+                display: none;
+            }
+            .checkboxesView, .checkboxesViewUser{
+                width: calc(~"100% - 8px");;
+                background-color: #fff;
+                display: block;
+                z-index: 100;
+                padding: 6px 4px;
+                box-shadow: 0 3px 5px 0 @color-black-40;
+                label{
+                    font-size: 18px;
+                    margin:2px;
+                    display: flex;
+                    flex-flow: row;
+                }
+                .label-state{
+                    margin-left: 12px;
+                }
+            }
+              div{
+                select{
+                  width: 328px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                  margin-bottom: 24px;
+                  margin-top: 16px;
+                  padding-left: 16px;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                }
+                .accordion-dropdown{
+                  header {
+                    height: 64px;
+                    width: 312px;
+                    border-radius: 2px;
+                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    color: @color-darkish-blue;
+                    line-height: 1;
+                    font-size: 18px;
+                    padding-left: 16px;
+                    cursor: pointer;
+                    span {
+                        width: 100%;
+                    }
+                    .expander {
+                        margin: 0 12px;
+                        line-height: 28px;
+                        height: 28px;
+                        width: 28px;
+                        font-size: 28px;
+                    }
+                  }
+                  section {
+                    width: 328px;
+                    min-height: 0;
+                    max-height: 0;
+                    transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
+                    overflow: hidden;
+                    &.expanded {
+                      min-height: 64px;
+                      background-color: rgba(255, 255, 255, 0.1);
+                      max-height: 1000px;
+                    }
+                    .item {
+                        height: 64px;
+                        width: 100%;
+                        line-height: 64px;
+                        background-color: @color-white2;
+                    }
+            
+                    .dropdown{
+                      // background-color: @color-white2;
+                      height: 100%;
+                      margin-top: 2px;
+                      .filename{
+                          display: flex;
+                          height: 64px;
+                          align-items: center;
+                          cursor: pointer;
+                          i{
+                            color: @color-cyan-blue;
+                            margin: 0 20px 0 20px;
+                          }
+                          span{
+                              width: 100%;
+                              font-size: 18px;
+                              line-height: 1;
+                              color: @color-darkish-blue;
+                          }
+            
+                          &.selected{
+                            span, i{
+                              color:#4b4b4b;
+                            }
+                          }
+                      }
+                      .filename.selected{
+                          background-color: rgba(255, 255, 255, 0.8);
+                      }
+                      
+                    } 
+                  }
+                }
+              }
+            }
+          }
+
+          .body-left-center-footer{
+            height: 64px;
+            width: 100%;
+            border: solid 1px @color-whitegrey;
+            .header-title{
+              width: 360px;
+              height: 64px;
+              display: flex;
+              flex-flow: column;
+              align-items: center;
+              justify-content: center;
+              .title{
+                font-size: 14px;
+                color: @color-warm-grey;
+              }
+              .data-temporal{
+                font-size: 18px;
+                line-height: 1;
+                color: @color-greyish-brown;
+              }
+            }
+          }
+        }
+    }
+    .reports-box-body-right {
+        width: 327px;
+        height: 100%;
+        .body-right-header{
+          width: 100%;
+          height: 70px;
+          display: flex;
+          flex-flow: row;
+          margin-top: 18px;
+          justify-content: flex-end;
+          .body-right-header-left {
+            width: 158px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-right: solid 2px @color-whitegrey;
+            button{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: 0 1px 2px 0 @color-black-40;
+              background-image: linear-gradient(to bottom,@color-white2, @color-silver);
+              border: none;
+            }
+            button.active{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: inset 0 1px 3px 0 @color-black-40;
+              background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+              color: @color-clear-blue;
+              border: none;
+            }
+          }
+          .body-right-header-right {
+            width: calc(~"100% - 158px");
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            button{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: 0 1px 2px 0 @color-black-40;
+              background-image: linear-gradient(to bottom,@color-white2, @color-silver);
+              border:none;
+            }
+            button:first-child{
+              margin-right: 16px;
+            }
+            button:active{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: inset 0 1px 3px 0 @color-black-40;
+              background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+              border: none;
+            }
+          }
+        }
+        .body-right-card{
+          width: 100%;
+          height: calc(~"100% - 70px");
+          display: flex;
+          flex-flow: column;
+          align-items: center;
+          .card-report{
+            > section {
+              display: flex;
+              align-items: center;
+              justify-content: center; 
+              .rectangle_gray{
+                width: 256px;
+                height: 120px;
+                border-radius: 2px;
+                display: flex;
+                flex-flow: column;
+                align-items: center;
+                justify-content: center;
+                background-color: @color-white2;
+                label{
+                  font-size: 18px;
+                  color: @color-warm-grey;
+                  margin-bottom: 30px;
+                }
+                span{
+                  font-size: 48px;
+                  font-weight: bold;
+                  line-height: 0.38;
+                  color: @color-clear-blue;
+                }
+              }
+            }
+          }
+        }
+    }
+}
+
+
+.card-report-alarms{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    .reports-box-body-left {
+        width: 1455px;
+        height: 100%;
+        .body-left-header, .body-left-header-machinestatus{
+            width: 100%;
+            height: 70px;
+            display: flex;
+            flex-flow: row;
+            margin-top: 18px;
+            border-right: solid 2px @color-whitegrey;
+            position: relative;
+            margin-bottom: 16px;
+            .mx-datepicker-range{
+              width: 170px;
+              height: 70px;
+              .mx-input-wrapper{
+                margin-right: 24px;
+                width: 253px;
+                .mx-input{
+                  width: 253px;
+                  height: 50px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                  border: solid 1px @color-silver;                     
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                  padding-left: 16px;
+                }
+              }
+            }
+            > div {
+              display: flex;
+              flex-flow: column;
+              height: 70px;
+              margin-right: 24px;
+              label.intervaldate{
+                width: 253px;
+              }
+              select{
+                width: 192px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+                border: solid 1px @color-silver;                     
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                padding-left: 16px; 
+              }
+              div.interval-time{
+                display: flex;
+                flex-flow: row;
+                input[type="time"]{
+                  width: 112px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: inset 0 1px 3px 0 @color-black-50;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-silver;
+                  border: none;
+                }
+                input[type="time"]:first-child{
+                  margin-right: 16px;
+                }
+                input[type="time"]::-webkit-inner-spin-button {
+                  -webkit-appearance: none;
+                  display: none;
+                  border:none;
+                }
+              }
+              input.program{
+                width: 256px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: inset 0 1px 3px 0 @color-black-50;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-silver;
+                padding-left: 16px;
+                border: none;
+              }
+              .reports-select-operator{
+                width: 192px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+              }
+              .reports-select-shift{
+                width: 144px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+              }
+            }
+
+
+            .multiselect{
+                z-index: 100;
+                label{
+                  font-size: 14px;
+                  line-height: 1.29;
+                  color: @color-warm-grey;
+                }
+              }
+              .selectBox{
+                  position: relative;
+                  width: 144px;
+              }
+              .selectBox select{
+                width: 100%;
+                padding: 8px;
+                cursor: pointer;
+                height: 49px;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                box-shadow: 0 1px 2px @color-black-40;
+                border-radius: 2px;
+                  option{
+                      display: none;
+                  }
+              }
+              .selectBoxU{
+                position: relative;
+                width: 192px;
+            }
+            .selectBoxU select{
+              width: 100%;
+              padding: 8px;
+              cursor: pointer;
+              height: 49px;
+              font-size: 18px;
+              line-height: 1.11;
+              color: @color-greyish-brown;
+              box-shadow: 0 1px 2px @color-black-40;
+              border-radius: 2px;
+                option{
+                    display: none;
+                }
+            }
+              .overSelect{
+                  position: absolute;
+                  left: 0;
+                  right: 0;
+                  top: 0;
+                  bottom: 0;
+              }
+              .checkboxes, .checkboxesU{
+                  display: none;
+              }
+              .checkboxesView, .checkboxesViewUser{
+                  width: calc(~"100% - 8px");;
+                  background-color: #fff;
+                  display: block;
+                  z-index: 100;
+                  padding: 6px 4px;
+                  box-shadow: 0 3px 5px 0 @color-black-40;
+                  label{
+                      font-size: 18px;
+                      margin:2px;
+                      display: flex;
+                      flex-flow: row;
+                  }
+                  .label-state{
+                      margin-left: 12px;
+                  }
+              }
+        }
+        .body-left-header-machinestatus{
+          border-right: 0px;
+        }
+        .body-left-center {
+          width: 1448px;
+          max-height: 681px;
+          display: flex;
+          flex-flow: column;
+          .body-left-center-container{
+            width: 100%;
+            table{
+              table-layout: fixed;
+              width: 100%;
+              border-collapse: collapse;
+            }
+            thead{
+                border-bottom: solid 2px @color-label-grey;
+                font-size: 14px;
+                line-height: 1.29;
+                color: @color-darkish-blue;
+                display: block;
+                width: 1431px;
+            }
+            thead tr th{
+                height: 48px;
+            }
+            tr:nth-child(even) {background: #FFF }
+            tr:nth-child(odd) {background: #dddddd }
+
+            // thead tr{
+            //   width: 1448px;
+            // }
+
+            thead tr:nth-child(odd){
+              background: #FFF
+            }
+
+            th:nth-child(1), td:nth-child(1){
+                width:162px;
+                max-width: 162px;
+                text-align: center;
+            }  
+            th:nth-child(2), td:nth-child(2){
+              width:139px;
+              max-width: 139px;
+              text-align: center;
+            }
+            th:nth-child(3), td:nth-child(3){
+                width:83px;
+                max-width:83px;
+                text-align: center;
+            }
+            th:nth-child(4), td:nth-child(4){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(5), td:nth-child(5){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(6), td:nth-child(6){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(7), td:nth-child(7){
+                width:97px;
+                max-width:97px;
+                text-align: center;
+            }
+            th:nth-child(8), td:nth-child(8){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(9), td:nth-child(9){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(10), td:nth-child(10){
+              width:115px;
+              max-width:115px;
+              text-align: center;
+            }
+            th:nth-child(11), td:nth-child(11){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(12), td:nth-child(12){
+              width:148px;
+              max-width:148px;
+              text-align: center;
+            }
+            th:nth-child(13), td:nth-child(13){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:last-child{
+              font-size: 23px;
+              font-weight: bold;
+              cursor: pointer;
+            }
+            th, td{
+                overflow: hidden;
+                div{
+                    overflow: hidden;
+                            max-height: 64px;
+                }
+            }
+            tbody{
+                display: block;
+                height: 631px;
+                width: 1448px;
+                overflow: scroll;
+                tr{
+                    cursor: pointer;
+                    height:  64px;
+                    padding: 10px;
+                    font-size: 14px;
+                    line-height: 1.29;
+                    color: @color-greyish-brown;
+                    td{
+                        text-align: center;
+                        &.green{
+                          color: @color-apple-green;
+                        }
+                        &.red{
+                          color: @color-scarlet;
+                        }
+                    }
+                    td:last-child{
+                      width: 10px;
+                    }
+                    &.selected{
+                        background-color: rgba(23, 145, 255, 0.75);
+                        color: @color-white;
+                        font-weight: 600;
+                    }
+                }
+            }
+            .body-left-center-left{
+              width: 360px;
+              height: 616px;
+              display: flex;
+              flex-flow: column;
+              align-items: center;
+              border: solid 1px @color-whitegrey;
+              overflow-y: auto;
+              .multiselect{
+                z-index: 100;
+                margin-bottom: 24px;
+                margin-top: 16px;
+                label{
+                  font-size: 14px;
+                  line-height: 1.29;
+                  color: @color-warm-grey;
+                }
+              }
+              .selectBox{
+                  position: relative;
+                  width: 328px;
+                  height: 64px;
+              }
+              .selectBox select{
+                width: 100%;
+                padding: 8px;
+                cursor: pointer;
+                height: 64px;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                margin-bottom: 0;
+                margin-top: 0;
+                  option{
+                      display: none;
+                  }
+              }
+              .overSelect{
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+            }
+            .checkboxes, .checkboxesU{
+                display: none;
+            }
+            .checkboxesView, .checkboxesViewUser{
+                width: calc(~"100% - 8px");;
+                background-color: #fff;
+                display: block;
+                z-index: 100;
+                padding: 6px 4px;
+                box-shadow: 0 3px 5px 0 @color-black-40;
+                label{
+                    font-size: 18px;
+                    margin:2px;
+                    display: flex;
+                    flex-flow: row;
+                }
+                .label-state{
+                    margin-left: 12px;
+                }
+            }
+              div{
+                select{
+                  width: 328px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                  margin-bottom: 24px;
+                  margin-top: 16px;
+                  padding-left: 16px;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                }
+                .accordion-dropdown{
+                  header {
+                    height: 64px;
+                    width: 312px;
+                    border-radius: 2px;
+                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    color: @color-darkish-blue;
+                    line-height: 1;
+                    font-size: 18px;
+                    padding-left: 16px;
+                    cursor: pointer;
+                    span {
+                        width: 100%;
+                    }
+                    .expander {
+                        margin: 0 12px;
+                        line-height: 28px;
+                        height: 28px;
+                        width: 28px;
+                        font-size: 28px;
+                    }
+                  }
+                  section {
+                    width: 328px;
+                    min-height: 0;
+                    max-height: 0;
+                    transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
+                    overflow: hidden;
+                    &.expanded {
+                      min-height: 64px;
+                      background-color: rgba(255, 255, 255, 0.1);
+                      max-height: 1000px;
+                    }
+                    .item {
+                        height: 64px;
+                        width: 100%;
+                        line-height: 64px;
+                        background-color: @color-white2;
+                    }
+            
+                    .dropdown{
+                      // background-color: @color-white2;
+                      height: 100%;
+                      margin-top: 2px;
+                      .filename{
+                          display: flex;
+                          height: 64px;
+                          align-items: center;
+                          cursor: pointer;
+                          i{
+                            color: @color-cyan-blue;
+                            margin: 0 20px 0 20px;
+                          }
+                          span{
+                              width: 100%;
+                              font-size: 18px;
+                              line-height: 1;
+                              color: @color-darkish-blue;
+                          }
+            
+                          &.selected{
+                            span, i{
+                              color:#4b4b4b;
+                            }
+                          }
+                      }
+                      .filename.selected{
+                          background-color: rgba(255, 255, 255, 0.8);
+                      }
+                      
+                    } 
+                  }
+                }
+              }
+            }
+          }
+
+          .body-left-center-footer{
+            height: 64px;
+            width: 100%;
+            border: solid 1px @color-whitegrey;
+            .header-title{
+              width: 360px;
+              height: 64px;
+              display: flex;
+              flex-flow: column;
+              align-items: center;
+              justify-content: center;
+              .title{
+                font-size: 14px;
+                color: @color-warm-grey;
+              }
+              .data-temporal{
+                font-size: 18px;
+                line-height: 1;
+                color: @color-greyish-brown;
+              }
+            }
+          }
+        }
+    }
+    .reports-box-body-right {
+        width: 327px;
+        height: 100%;
+        .body-right-header{
+          width: 100%;
+          height: 70px;
+          display: flex;
+          flex-flow: row;
+          margin-top: 18px;
+          justify-content: flex-end;
+          .body-right-header-left {
+            width: 158px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-right: solid 2px @color-whitegrey;
+            button{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: 0 1px 2px 0 @color-black-40;
+              background-image: linear-gradient(to bottom,@color-white2, @color-silver);
+              border: none;
+            }
+            button.active{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: inset 0 1px 3px 0 @color-black-40;
+              background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+              color: @color-clear-blue;
+              border: none;
+            }
+          }
+          .body-right-header-right {
+            width: calc(~"100% - 158px");
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            button{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: 0 1px 2px 0 @color-black-40;
+              background-image: linear-gradient(to bottom,@color-white2, @color-silver);
+              border:none;
+            }
+            button:first-child{
+              margin-right: 16px;
+            }
+            button:active{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: inset 0 1px 3px 0 @color-black-40;
+              background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+              border: none;
+            }
+          }
+        }
+        .body-right-card{
+          width: 100%;
+          height: calc(~"100% - 70px");
+          display: flex;
+          flex-flow: column;
+          align-items: center;
+          .card-report{
+            > section {
+              display: flex;
+              align-items: center;
+              justify-content: center; 
+              .rectangle_gray{
+                width: 256px;
+                height: 120px;
+                border-radius: 2px;
+                display: flex;
+                flex-flow: column;
+                align-items: center;
+                justify-content: center;
+                background-color: @color-white2;
+                label{
+                  font-size: 18px;
+                  color: @color-warm-grey;
+                  margin-bottom: 30px;
+                }
+                span{
+                  font-size: 48px;
+                  font-weight: bold;
+                  line-height: 0.38;
+                  color: @color-clear-blue;
+                }
+              }
+            }
+          }
+        }
+    }
+}
+
+.card-report-machine-status{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    .reports-box-body-left {
+        width: 1455px;
+        height: 100%;
+        .body-left-header, .body-left-header-machinestatus{
+            width: 100%;
+            height: 70px;
+            display: flex;
+            flex-flow: row;
+            margin-top: 18px;
+            border-right: solid 2px @color-whitegrey;
+            position: relative;
+            margin-bottom: 16px;
+            .mx-datepicker-range{
+              width: 170px;
+              height: 70px;
+              .mx-input-wrapper{
+                margin-right: 24px;
+                width: 253px;
+                .mx-input{
+                  width: 253px;
+                  height: 50px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                  border: solid 1px @color-silver;                     
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                  padding-left: 16px;
+                }
+              }
+            }
+            > div {
+              display: flex;
+              flex-flow: column;
+              height: 70px;
+              margin-right: 24px;
+              label.intervaldate{
+                width: 253px;
+              }
+              select{
+                width: 192px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+                border: solid 1px @color-silver;                     
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                padding-left: 16px; 
+              }
+              div.interval-time{
+                display: flex;
+                flex-flow: row;
+                input[type="time"]{
+                  width: 112px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: inset 0 1px 3px 0 @color-black-50;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-silver;
+                  border: none;
+                }
+                input[type="time"]:first-child{
+                  margin-right: 16px;
+                }
+                input[type="time"]::-webkit-inner-spin-button {
+                  -webkit-appearance: none;
+                  display: none;
+                  border:none;
+                }
+              }
+              input.program{
+                width: 256px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: inset 0 1px 3px 0 @color-black-50;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-silver;
+                padding-left: 16px;
+                border: none;
+              }
+              .reports-select-operator{
+                width: 192px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+              }
+              .reports-select-shift{
+                width: 144px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+              }
+            }
+
+
+            .multiselect{
+                z-index: 100;
+                label{
+                  font-size: 14px;
+                  line-height: 1.29;
+                  color: @color-warm-grey;
+                }
+              }
+              .selectBox{
+                  position: relative;
+                  width: 144px;
+              }
+              .selectBox select{
+                width: 100%;
+                padding: 8px;
+                cursor: pointer;
+                height: 49px;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                box-shadow: 0 1px 2px @color-black-40;
+                border-radius: 2px;
+                  option{
+                      display: none;
+                  }
+              }
+              .selectBoxU{
+                position: relative;
+                width: 192px;
             }
             .selectBoxU select{
               width: 100%;
diff --git a/Step/wwwroot/assets/styles/base/report.less b/Step/wwwroot/assets/styles/base/report.less
index 698cd2e1..c5b37d54 100644
--- a/Step/wwwroot/assets/styles/base/report.less
+++ b/Step/wwwroot/assets/styles/base/report.less
@@ -101,7 +101,7 @@
                         width: 253px;
                         .mx-input{
                           width: 253px;
-                          height: 50px;
+                          height: 48px;
                           border-radius: 2px;
                           box-shadow: 0 1px 2px 0 @color-black-40;
                           border: solid 1px @color-silver;                     
@@ -155,7 +155,7 @@
                       }
                       input.program{
                         width: 256px;
-                        height: 48px;
+                        height: 46px;
                         border-radius: 2px;
                         box-shadow: inset 0 1px 3px 0 @color-black-50;
                         font-size: 18px;
@@ -402,7 +402,7 @@
                         width: 1448px;
                         overflow: scroll;
                         tr{
-                            cursor: pointer;
+                            // cursor: pointer;
                             height:  64px;
                             padding: 10px;
                             font-size: 14px;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index 1fe9f7b2..c2dabdaa 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -8077,31 +8077,10 @@ footer .container button.big:before {
   line-height: 1.29;
   color: #878787;
 }
-.card-report-production .reports-box-body-left .body-left-header .selectBox,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus .selectBox {
-  position: relative;
-  width: 144px;
-}
-.card-report-production .reports-box-body-left .body-left-header .selectBox select,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus .selectBox select {
-  width: 100%;
-  padding: 8px;
-  cursor: pointer;
-  height: 49px;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-  border-radius: 2px;
-}
-.card-report-production .reports-box-body-left .body-left-header .selectBox select option,
-.card-report-production .reports-box-body-left .body-left-header-machinestatus .selectBox select option {
-  display: none;
-}
 .card-report-production .reports-box-body-left .body-left-header .selectBoxU,
 .card-report-production .reports-box-body-left .body-left-header-machinestatus .selectBoxU {
   position: relative;
-  width: 180px;
+  width: 192px;
 }
 .card-report-production .reports-box-body-left .body-left-header .selectBoxU select,
 .card-report-production .reports-box-body-left .body-left-header-machinestatus .selectBoxU select {
@@ -8295,7 +8274,6 @@ footer .container button.big:before {
   overflow: scroll;
 }
 .card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr {
-  cursor: pointer;
   height: 64px;
   padding: 10px;
   font-size: 14px;
@@ -8587,6 +8565,1925 @@ footer .container button.big:before {
   line-height: 0.38;
   color: #1791ff;
 }
+.card-report-events {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.card-report-events .reports-box-body-left {
+  width: 1455px;
+  height: 100%;
+}
+.card-report-events .reports-box-body-left .body-left-header,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  flex-flow: row;
+  margin-top: 18px;
+  border-right: solid 2px #dddddd;
+  position: relative;
+  margin-bottom: 16px;
+}
+.card-report-events .reports-box-body-left .body-left-header .mx-datepicker-range,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range {
+  width: 170px;
+  height: 70px;
+}
+.card-report-events .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper {
+  margin-right: 24px;
+  width: 253px;
+}
+.card-report-events .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper .mx-input,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper .mx-input {
+  width: 253px;
+  height: 50px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  border: solid 1px #bbbcbc;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  padding-left: 16px;
+}
+.card-report-events .reports-box-body-left .body-left-header > div,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus > div {
+  display: flex;
+  flex-flow: column;
+  height: 70px;
+  margin-right: 24px;
+}
+.card-report-events .reports-box-body-left .body-left-header > div label.intervaldate,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus > div label.intervaldate {
+  width: 253px;
+}
+.card-report-events .reports-box-body-left .body-left-header > div select,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus > div select {
+  width: 192px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  border: solid 1px #bbbcbc;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  padding-left: 16px;
+}
+.card-report-events .reports-box-body-left .body-left-header > div div.interval-time,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus > div div.interval-time {
+  display: flex;
+  flex-flow: row;
+}
+.card-report-events .reports-box-body-left .body-left-header > div div.interval-time input[type="time"],
+.card-report-events .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"] {
+  width: 112px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #bbbcbc;
+  border: none;
+}
+.card-report-events .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]:first-child,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]:first-child {
+  margin-right: 16px;
+}
+.card-report-events .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]::-webkit-inner-spin-button,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  display: none;
+  border: none;
+}
+.card-report-events .reports-box-body-left .body-left-header > div input.program,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus > div input.program {
+  width: 256px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #bbbcbc;
+  padding-left: 16px;
+  border: none;
+}
+.card-report-events .reports-box-body-left .body-left-header > div .reports-select-operator,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus > div .reports-select-operator {
+  width: 192px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.card-report-events .reports-box-body-left .body-left-header > div .reports-select-shift,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus > div .reports-select-shift {
+  width: 144px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+}
+.card-report-events .reports-box-body-left .body-left-header .multiselect,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .multiselect {
+  z-index: 100;
+}
+.card-report-events .reports-box-body-left .body-left-header .multiselect label,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .multiselect label {
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
+}
+.card-report-events .reports-box-body-left .body-left-header .selectBox,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .selectBox {
+  position: relative;
+  width: 144px;
+}
+.card-report-events .reports-box-body-left .body-left-header .selectBox select,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .selectBox select {
+  width: 100%;
+  padding: 8px;
+  cursor: pointer;
+  height: 49px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  border-radius: 2px;
+}
+.card-report-events .reports-box-body-left .body-left-header .selectBox select option,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .selectBox select option {
+  display: none;
+}
+.card-report-events .reports-box-body-left .body-left-header .selectBoxU,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .selectBoxU {
+  position: relative;
+  width: 192px;
+}
+.card-report-events .reports-box-body-left .body-left-header .selectBoxU select,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .selectBoxU select {
+  width: 100%;
+  padding: 8px;
+  cursor: pointer;
+  height: 49px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  border-radius: 2px;
+}
+.card-report-events .reports-box-body-left .body-left-header .selectBoxU select option,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .selectBoxU select option {
+  display: none;
+}
+.card-report-events .reports-box-body-left .body-left-header .overSelect,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .overSelect {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.card-report-events .reports-box-body-left .body-left-header .checkboxes,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .checkboxes,
+.card-report-events .reports-box-body-left .body-left-header .checkboxesU,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .checkboxesU {
+  display: none;
+}
+.card-report-events .reports-box-body-left .body-left-header .checkboxesView,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .checkboxesView,
+.card-report-events .reports-box-body-left .body-left-header .checkboxesViewUser,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser {
+  width: calc(100% - 8px);
+  background-color: #fff;
+  display: block;
+  z-index: 100;
+  padding: 6px 4px;
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
+}
+.card-report-events .reports-box-body-left .body-left-header .checkboxesView label,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .checkboxesView label,
+.card-report-events .reports-box-body-left .body-left-header .checkboxesViewUser label,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser label {
+  font-size: 18px;
+  margin: 2px;
+  display: flex;
+  flex-flow: row;
+}
+.card-report-events .reports-box-body-left .body-left-header .checkboxesView .label-state,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .checkboxesView .label-state,
+.card-report-events .reports-box-body-left .body-left-header .checkboxesViewUser .label-state,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser .label-state {
+  margin-left: 12px;
+}
+.card-report-events .reports-box-body-left .body-left-header-machinestatus {
+  border-right: 0px;
+}
+.card-report-events .reports-box-body-left .body-left-center {
+  width: 1448px;
+  max-height: 681px;
+  display: flex;
+  flex-flow: column;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container {
+  width: 100%;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container thead {
+  border-bottom: solid 2px #979797;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #002680;
+  display: block;
+  width: 1431px;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container thead tr th {
+  height: 48px;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(even) {
+  background: #FFF;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(odd) {
+  background: #dddddd;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container thead tr:nth-child(odd) {
+  background: #FFF;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(1),
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(1) {
+  width: 162px;
+  max-width: 162px;
+  text-align: center;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(2),
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(2) {
+  width: 139px;
+  max-width: 139px;
+  text-align: center;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(3),
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(3) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(4),
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(4) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(5),
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(5) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(6),
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(6) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(7),
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(7) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(8),
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(8) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(9),
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(9) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(10),
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(10) {
+  width: 115px;
+  max-width: 115px;
+  text-align: center;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(11),
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(11) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(12),
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(12) {
+  width: 148px;
+  max-width: 148px;
+  text-align: center;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(13),
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(13) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:last-child {
+  font-size: 23px;
+  font-weight: bold;
+  cursor: pointer;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th,
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td {
+  overflow: hidden;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th div,
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td div {
+  overflow: hidden;
+  max-height: 64px;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody {
+  display: block;
+  height: 631px;
+  width: 1448px;
+  overflow: scroll;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody tr {
+  height: 64px;
+  padding: 10px;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #4b4b4b;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody tr td {
+  text-align: center;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.green {
+  color: #7ed321;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.red {
+  color: #d0021b;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child {
+  width: 10px;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody tr.selected {
+  background-color: rgba(23, 145, 255, 0.75);
+  color: #fff;
+  font-weight: 600;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left {
+  width: 360px;
+  height: 616px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  border: solid 1px #dddddd;
+  overflow-y: auto;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect {
+  z-index: 100;
+  margin-bottom: 24px;
+  margin-top: 16px;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect label {
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox {
+  position: relative;
+  width: 328px;
+  height: 64px;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select {
+  width: 100%;
+  padding: 8px;
+  cursor: pointer;
+  height: 64px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select option {
+  display: none;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .overSelect {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxes,
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesU {
+  display: none;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView,
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser {
+  width: calc(100% - 8px);
+  background-color: #fff;
+  display: block;
+  z-index: 100;
+  padding: 6px 4px;
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView label,
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser label {
+  font-size: 18px;
+  margin: 2px;
+  display: flex;
+  flex-flow: row;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView .label-state,
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser .label-state {
+  margin-left: 12px;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div select {
+  width: 328px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  margin-bottom: 24px;
+  margin-top: 16px;
+  padding-left: 16px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header {
+  height: 64px;
+  width: 312px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #002680;
+  line-height: 1;
+  font-size: 18px;
+  padding-left: 16px;
+  cursor: pointer;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header span {
+  width: 100%;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header .expander {
+  margin: 0 12px;
+  line-height: 28px;
+  height: 28px;
+  width: 28px;
+  font-size: 28px;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section {
+  width: 328px;
+  min-height: 0;
+  max-height: 0;
+  transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
+  overflow: hidden;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section.expanded {
+  min-height: 64px;
+  background-color: rgba(255, 255, 255, 0.1);
+  max-height: 1000px;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .item {
+  height: 64px;
+  width: 100%;
+  line-height: 64px;
+  background-color: #f1f1f1;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown {
+  height: 100%;
+  margin-top: 2px;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename {
+  display: flex;
+  height: 64px;
+  align-items: center;
+  cursor: pointer;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename i {
+  color: #002e6e;
+  margin: 0 20px 0 20px;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename span {
+  width: 100%;
+  font-size: 18px;
+  line-height: 1;
+  color: #002680;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected span,
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected i {
+  color: #4b4b4b;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-footer {
+  height: 64px;
+  width: 100%;
+  border: solid 1px #dddddd;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-footer .header-title {
+  width: 360px;
+  height: 64px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-footer .header-title .title {
+  font-size: 14px;
+  color: #878787;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-footer .header-title .data-temporal {
+  font-size: 18px;
+  line-height: 1;
+  color: #4b4b4b;
+}
+.card-report-events .reports-box-body-right {
+  width: 327px;
+  height: 100%;
+}
+.card-report-events .reports-box-body-right .body-right-header {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  flex-flow: row;
+  margin-top: 18px;
+  justify-content: flex-end;
+}
+.card-report-events .reports-box-body-right .body-right-header .body-right-header-left {
+  width: 158px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-right: solid 2px #dddddd;
+}
+.card-report-events .reports-box-body-right .body-right-header .body-right-header-left button {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
+  border: none;
+}
+.card-report-events .reports-box-body-right .body-right-header .body-right-header-left button.active {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
+  color: #1791ff;
+  border: none;
+}
+.card-report-events .reports-box-body-right .body-right-header .body-right-header-right {
+  width: calc(100% - 158px);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-report-events .reports-box-body-right .body-right-header .body-right-header-right button {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
+  border: none;
+}
+.card-report-events .reports-box-body-right .body-right-header .body-right-header-right button:first-child {
+  margin-right: 16px;
+}
+.card-report-events .reports-box-body-right .body-right-header .body-right-header-right button:active {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
+  border: none;
+}
+.card-report-events .reports-box-body-right .body-right-card {
+  width: 100%;
+  height: calc(100% - 70px);
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}
+.card-report-events .reports-box-body-right .body-right-card .card-report > section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-report-events .reports-box-body-right .body-right-card .card-report > section .rectangle_gray {
+  width: 256px;
+  height: 120px;
+  border-radius: 2px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f1f1f1;
+}
+.card-report-events .reports-box-body-right .body-right-card .card-report > section .rectangle_gray label {
+  font-size: 18px;
+  color: #878787;
+  margin-bottom: 30px;
+}
+.card-report-events .reports-box-body-right .body-right-card .card-report > section .rectangle_gray span {
+  font-size: 48px;
+  font-weight: bold;
+  line-height: 0.38;
+  color: #1791ff;
+}
+.card-report-alarms {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.card-report-alarms .reports-box-body-left {
+  width: 1455px;
+  height: 100%;
+}
+.card-report-alarms .reports-box-body-left .body-left-header,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  flex-flow: row;
+  margin-top: 18px;
+  border-right: solid 2px #dddddd;
+  position: relative;
+  margin-bottom: 16px;
+}
+.card-report-alarms .reports-box-body-left .body-left-header .mx-datepicker-range,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range {
+  width: 170px;
+  height: 70px;
+}
+.card-report-alarms .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper {
+  margin-right: 24px;
+  width: 253px;
+}
+.card-report-alarms .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper .mx-input,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper .mx-input {
+  width: 253px;
+  height: 50px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  border: solid 1px #bbbcbc;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  padding-left: 16px;
+}
+.card-report-alarms .reports-box-body-left .body-left-header > div,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div {
+  display: flex;
+  flex-flow: column;
+  height: 70px;
+  margin-right: 24px;
+}
+.card-report-alarms .reports-box-body-left .body-left-header > div label.intervaldate,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div label.intervaldate {
+  width: 253px;
+}
+.card-report-alarms .reports-box-body-left .body-left-header > div select,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div select {
+  width: 192px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  border: solid 1px #bbbcbc;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  padding-left: 16px;
+}
+.card-report-alarms .reports-box-body-left .body-left-header > div div.interval-time,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div div.interval-time {
+  display: flex;
+  flex-flow: row;
+}
+.card-report-alarms .reports-box-body-left .body-left-header > div div.interval-time input[type="time"],
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"] {
+  width: 112px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #bbbcbc;
+  border: none;
+}
+.card-report-alarms .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]:first-child,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]:first-child {
+  margin-right: 16px;
+}
+.card-report-alarms .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]::-webkit-inner-spin-button,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  display: none;
+  border: none;
+}
+.card-report-alarms .reports-box-body-left .body-left-header > div input.program,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div input.program {
+  width: 256px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #bbbcbc;
+  padding-left: 16px;
+  border: none;
+}
+.card-report-alarms .reports-box-body-left .body-left-header > div .reports-select-operator,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div .reports-select-operator {
+  width: 192px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.card-report-alarms .reports-box-body-left .body-left-header > div .reports-select-shift,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus > div .reports-select-shift {
+  width: 144px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+}
+.card-report-alarms .reports-box-body-left .body-left-header .multiselect,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .multiselect {
+  z-index: 100;
+}
+.card-report-alarms .reports-box-body-left .body-left-header .multiselect label,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .multiselect label {
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
+}
+.card-report-alarms .reports-box-body-left .body-left-header .selectBox,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .selectBox {
+  position: relative;
+  width: 144px;
+}
+.card-report-alarms .reports-box-body-left .body-left-header .selectBox select,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .selectBox select {
+  width: 100%;
+  padding: 8px;
+  cursor: pointer;
+  height: 49px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  border-radius: 2px;
+}
+.card-report-alarms .reports-box-body-left .body-left-header .selectBox select option,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .selectBox select option {
+  display: none;
+}
+.card-report-alarms .reports-box-body-left .body-left-header .selectBoxU,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .selectBoxU {
+  position: relative;
+  width: 192px;
+}
+.card-report-alarms .reports-box-body-left .body-left-header .selectBoxU select,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .selectBoxU select {
+  width: 100%;
+  padding: 8px;
+  cursor: pointer;
+  height: 49px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  border-radius: 2px;
+}
+.card-report-alarms .reports-box-body-left .body-left-header .selectBoxU select option,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .selectBoxU select option {
+  display: none;
+}
+.card-report-alarms .reports-box-body-left .body-left-header .overSelect,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .overSelect {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.card-report-alarms .reports-box-body-left .body-left-header .checkboxes,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .checkboxes,
+.card-report-alarms .reports-box-body-left .body-left-header .checkboxesU,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .checkboxesU {
+  display: none;
+}
+.card-report-alarms .reports-box-body-left .body-left-header .checkboxesView,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .checkboxesView,
+.card-report-alarms .reports-box-body-left .body-left-header .checkboxesViewUser,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser {
+  width: calc(100% - 8px);
+  background-color: #fff;
+  display: block;
+  z-index: 100;
+  padding: 6px 4px;
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
+}
+.card-report-alarms .reports-box-body-left .body-left-header .checkboxesView label,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .checkboxesView label,
+.card-report-alarms .reports-box-body-left .body-left-header .checkboxesViewUser label,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser label {
+  font-size: 18px;
+  margin: 2px;
+  display: flex;
+  flex-flow: row;
+}
+.card-report-alarms .reports-box-body-left .body-left-header .checkboxesView .label-state,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .checkboxesView .label-state,
+.card-report-alarms .reports-box-body-left .body-left-header .checkboxesViewUser .label-state,
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser .label-state {
+  margin-left: 12px;
+}
+.card-report-alarms .reports-box-body-left .body-left-header-machinestatus {
+  border-right: 0px;
+}
+.card-report-alarms .reports-box-body-left .body-left-center {
+  width: 1448px;
+  max-height: 681px;
+  display: flex;
+  flex-flow: column;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container {
+  width: 100%;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container thead {
+  border-bottom: solid 2px #979797;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #002680;
+  display: block;
+  width: 1431px;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container thead tr th {
+  height: 48px;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(even) {
+  background: #FFF;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(odd) {
+  background: #dddddd;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container thead tr:nth-child(odd) {
+  background: #FFF;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(1),
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(1) {
+  width: 162px;
+  max-width: 162px;
+  text-align: center;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(2),
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(2) {
+  width: 139px;
+  max-width: 139px;
+  text-align: center;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(3),
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(3) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(4),
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(4) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(5),
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(5) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(6),
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(6) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(7),
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(7) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(8),
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(8) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(9),
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(9) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(10),
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(10) {
+  width: 115px;
+  max-width: 115px;
+  text-align: center;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(11),
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(11) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(12),
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(12) {
+  width: 148px;
+  max-width: 148px;
+  text-align: center;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(13),
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(13) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th:last-child {
+  font-size: 23px;
+  font-weight: bold;
+  cursor: pointer;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th,
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td {
+  overflow: hidden;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container th div,
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container td div {
+  overflow: hidden;
+  max-height: 64px;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tbody {
+  display: block;
+  height: 631px;
+  width: 1448px;
+  overflow: scroll;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tbody tr {
+  cursor: pointer;
+  height: 64px;
+  padding: 10px;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #4b4b4b;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tbody tr td {
+  text-align: center;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.green {
+  color: #7ed321;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.red {
+  color: #d0021b;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child {
+  width: 10px;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container tbody tr.selected {
+  background-color: rgba(23, 145, 255, 0.75);
+  color: #fff;
+  font-weight: 600;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left {
+  width: 360px;
+  height: 616px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  border: solid 1px #dddddd;
+  overflow-y: auto;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect {
+  z-index: 100;
+  margin-bottom: 24px;
+  margin-top: 16px;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect label {
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox {
+  position: relative;
+  width: 328px;
+  height: 64px;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select {
+  width: 100%;
+  padding: 8px;
+  cursor: pointer;
+  height: 64px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select option {
+  display: none;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .overSelect {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxes,
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesU {
+  display: none;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView,
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser {
+  width: calc(100% - 8px);
+  background-color: #fff;
+  display: block;
+  z-index: 100;
+  padding: 6px 4px;
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView label,
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser label {
+  font-size: 18px;
+  margin: 2px;
+  display: flex;
+  flex-flow: row;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView .label-state,
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser .label-state {
+  margin-left: 12px;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div select {
+  width: 328px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  margin-bottom: 24px;
+  margin-top: 16px;
+  padding-left: 16px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header {
+  height: 64px;
+  width: 312px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #002680;
+  line-height: 1;
+  font-size: 18px;
+  padding-left: 16px;
+  cursor: pointer;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header span {
+  width: 100%;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header .expander {
+  margin: 0 12px;
+  line-height: 28px;
+  height: 28px;
+  width: 28px;
+  font-size: 28px;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section {
+  width: 328px;
+  min-height: 0;
+  max-height: 0;
+  transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
+  overflow: hidden;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section.expanded {
+  min-height: 64px;
+  background-color: rgba(255, 255, 255, 0.1);
+  max-height: 1000px;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .item {
+  height: 64px;
+  width: 100%;
+  line-height: 64px;
+  background-color: #f1f1f1;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown {
+  height: 100%;
+  margin-top: 2px;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename {
+  display: flex;
+  height: 64px;
+  align-items: center;
+  cursor: pointer;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename i {
+  color: #002e6e;
+  margin: 0 20px 0 20px;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename span {
+  width: 100%;
+  font-size: 18px;
+  line-height: 1;
+  color: #002680;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected span,
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected i {
+  color: #4b4b4b;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-footer {
+  height: 64px;
+  width: 100%;
+  border: solid 1px #dddddd;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-footer .header-title {
+  width: 360px;
+  height: 64px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-footer .header-title .title {
+  font-size: 14px;
+  color: #878787;
+}
+.card-report-alarms .reports-box-body-left .body-left-center .body-left-center-footer .header-title .data-temporal {
+  font-size: 18px;
+  line-height: 1;
+  color: #4b4b4b;
+}
+.card-report-alarms .reports-box-body-right {
+  width: 327px;
+  height: 100%;
+}
+.card-report-alarms .reports-box-body-right .body-right-header {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  flex-flow: row;
+  margin-top: 18px;
+  justify-content: flex-end;
+}
+.card-report-alarms .reports-box-body-right .body-right-header .body-right-header-left {
+  width: 158px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-right: solid 2px #dddddd;
+}
+.card-report-alarms .reports-box-body-right .body-right-header .body-right-header-left button {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
+  border: none;
+}
+.card-report-alarms .reports-box-body-right .body-right-header .body-right-header-left button.active {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
+  color: #1791ff;
+  border: none;
+}
+.card-report-alarms .reports-box-body-right .body-right-header .body-right-header-right {
+  width: calc(100% - 158px);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-report-alarms .reports-box-body-right .body-right-header .body-right-header-right button {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
+  border: none;
+}
+.card-report-alarms .reports-box-body-right .body-right-header .body-right-header-right button:first-child {
+  margin-right: 16px;
+}
+.card-report-alarms .reports-box-body-right .body-right-header .body-right-header-right button:active {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
+  border: none;
+}
+.card-report-alarms .reports-box-body-right .body-right-card {
+  width: 100%;
+  height: calc(100% - 70px);
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}
+.card-report-alarms .reports-box-body-right .body-right-card .card-report > section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-report-alarms .reports-box-body-right .body-right-card .card-report > section .rectangle_gray {
+  width: 256px;
+  height: 120px;
+  border-radius: 2px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f1f1f1;
+}
+.card-report-alarms .reports-box-body-right .body-right-card .card-report > section .rectangle_gray label {
+  font-size: 18px;
+  color: #878787;
+  margin-bottom: 30px;
+}
+.card-report-alarms .reports-box-body-right .body-right-card .card-report > section .rectangle_gray span {
+  font-size: 48px;
+  font-weight: bold;
+  line-height: 0.38;
+  color: #1791ff;
+}
+.card-report-machine-status {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.card-report-machine-status .reports-box-body-left {
+  width: 1455px;
+  height: 100%;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  flex-flow: row;
+  margin-top: 18px;
+  border-right: solid 2px #dddddd;
+  position: relative;
+  margin-bottom: 16px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header .mx-datepicker-range,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range {
+  width: 170px;
+  height: 70px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper {
+  margin-right: 24px;
+  width: 253px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper .mx-input,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper .mx-input {
+  width: 253px;
+  height: 50px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  border: solid 1px #bbbcbc;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  padding-left: 16px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header > div,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div {
+  display: flex;
+  flex-flow: column;
+  height: 70px;
+  margin-right: 24px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header > div label.intervaldate,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div label.intervaldate {
+  width: 253px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header > div select,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div select {
+  width: 192px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  border: solid 1px #bbbcbc;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  padding-left: 16px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header > div div.interval-time,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div div.interval-time {
+  display: flex;
+  flex-flow: row;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header > div div.interval-time input[type="time"],
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"] {
+  width: 112px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #bbbcbc;
+  border: none;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]:first-child,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]:first-child {
+  margin-right: 16px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]::-webkit-inner-spin-button,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  display: none;
+  border: none;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header > div input.program,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div input.program {
+  width: 256px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #bbbcbc;
+  padding-left: 16px;
+  border: none;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header > div .reports-select-operator,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div .reports-select-operator {
+  width: 192px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header > div .reports-select-shift,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div .reports-select-shift {
+  width: 144px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+}
+.card-report-machine-status .reports-box-body-left .body-left-header .multiselect,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .multiselect {
+  z-index: 100;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header .multiselect label,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .multiselect label {
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header .selectBox,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .selectBox {
+  position: relative;
+  width: 144px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header .selectBox select,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .selectBox select {
+  width: 100%;
+  padding: 8px;
+  cursor: pointer;
+  height: 49px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  border-radius: 2px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header .selectBox select option,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .selectBox select option {
+  display: none;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header .selectBoxU,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .selectBoxU {
+  position: relative;
+  width: 192px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header .selectBoxU select,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .selectBoxU select {
+  width: 100%;
+  padding: 8px;
+  cursor: pointer;
+  height: 49px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  border-radius: 2px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header .selectBoxU select option,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .selectBoxU select option {
+  display: none;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header .overSelect,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .overSelect {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header .checkboxes,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .checkboxes,
+.card-report-machine-status .reports-box-body-left .body-left-header .checkboxesU,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .checkboxesU {
+  display: none;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header .checkboxesView,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .checkboxesView,
+.card-report-machine-status .reports-box-body-left .body-left-header .checkboxesViewUser,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser {
+  width: calc(100% - 8px);
+  background-color: #fff;
+  display: block;
+  z-index: 100;
+  padding: 6px 4px;
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
+}
+.card-report-machine-status .reports-box-body-left .body-left-header .checkboxesView label,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .checkboxesView label,
+.card-report-machine-status .reports-box-body-left .body-left-header .checkboxesViewUser label,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser label {
+  font-size: 18px;
+  margin: 2px;
+  display: flex;
+  flex-flow: row;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header .checkboxesView .label-state,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .checkboxesView .label-state,
+.card-report-machine-status .reports-box-body-left .body-left-header .checkboxesViewUser .label-state,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser .label-state {
+  margin-left: 12px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus {
+  border-right: 0px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center {
+  width: 1448px;
+  max-height: 681px;
+  display: flex;
+  flex-flow: column;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container {
+  width: 100%;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container thead {
+  border-bottom: solid 2px #979797;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #002680;
+  display: block;
+  width: 1431px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container thead tr th {
+  height: 48px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(even) {
+  background: #FFF;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(odd) {
+  background: #dddddd;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container thead tr:nth-child(odd) {
+  background: #FFF;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(1),
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(1) {
+  width: 162px;
+  max-width: 162px;
+  text-align: center;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(2),
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(2) {
+  width: 139px;
+  max-width: 139px;
+  text-align: center;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(3),
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(3) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(4),
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(4) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(5),
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(5) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(6),
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(6) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(7),
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(7) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(8),
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(8) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(9),
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(9) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(10),
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(10) {
+  width: 115px;
+  max-width: 115px;
+  text-align: center;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(11),
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(11) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(12),
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(12) {
+  width: 148px;
+  max-width: 148px;
+  text-align: center;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(13),
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(13) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:last-child {
+  font-size: 23px;
+  font-weight: bold;
+  cursor: pointer;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th,
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td {
+  overflow: hidden;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th div,
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td div {
+  overflow: hidden;
+  max-height: 64px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody {
+  display: block;
+  height: 631px;
+  width: 1448px;
+  overflow: scroll;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr {
+  cursor: pointer;
+  height: 64px;
+  padding: 10px;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #4b4b4b;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr td {
+  text-align: center;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.green {
+  color: #7ed321;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.red {
+  color: #d0021b;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child {
+  width: 10px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr.selected {
+  background-color: rgba(23, 145, 255, 0.75);
+  color: #fff;
+  font-weight: 600;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left {
+  width: 360px;
+  height: 616px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  border: solid 1px #dddddd;
+  overflow-y: auto;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect {
+  z-index: 100;
+  margin-bottom: 24px;
+  margin-top: 16px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect label {
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox {
+  position: relative;
+  width: 328px;
+  height: 64px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select {
+  width: 100%;
+  padding: 8px;
+  cursor: pointer;
+  height: 64px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select option {
+  display: none;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .overSelect {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxes,
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesU {
+  display: none;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView,
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser {
+  width: calc(100% - 8px);
+  background-color: #fff;
+  display: block;
+  z-index: 100;
+  padding: 6px 4px;
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView label,
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser label {
+  font-size: 18px;
+  margin: 2px;
+  display: flex;
+  flex-flow: row;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView .label-state,
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser .label-state {
+  margin-left: 12px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div select {
+  width: 328px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  margin-bottom: 24px;
+  margin-top: 16px;
+  padding-left: 16px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header {
+  height: 64px;
+  width: 312px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #002680;
+  line-height: 1;
+  font-size: 18px;
+  padding-left: 16px;
+  cursor: pointer;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header span {
+  width: 100%;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header .expander {
+  margin: 0 12px;
+  line-height: 28px;
+  height: 28px;
+  width: 28px;
+  font-size: 28px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section {
+  width: 328px;
+  min-height: 0;
+  max-height: 0;
+  transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
+  overflow: hidden;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section.expanded {
+  min-height: 64px;
+  background-color: rgba(255, 255, 255, 0.1);
+  max-height: 1000px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .item {
+  height: 64px;
+  width: 100%;
+  line-height: 64px;
+  background-color: #f1f1f1;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown {
+  height: 100%;
+  margin-top: 2px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename {
+  display: flex;
+  height: 64px;
+  align-items: center;
+  cursor: pointer;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename i {
+  color: #002e6e;
+  margin: 0 20px 0 20px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename span {
+  width: 100%;
+  font-size: 18px;
+  line-height: 1;
+  color: #002680;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected span,
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected i {
+  color: #4b4b4b;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-footer {
+  height: 64px;
+  width: 100%;
+  border: solid 1px #dddddd;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-footer .header-title {
+  width: 360px;
+  height: 64px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-footer .header-title .title {
+  font-size: 14px;
+  color: #878787;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-footer .header-title .data-temporal {
+  font-size: 18px;
+  line-height: 1;
+  color: #4b4b4b;
+}
+.card-report-machine-status .reports-box-body-right {
+  width: 327px;
+  height: 100%;
+}
+.card-report-machine-status .reports-box-body-right .body-right-header {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  flex-flow: row;
+  margin-top: 18px;
+  justify-content: flex-end;
+}
+.card-report-machine-status .reports-box-body-right .body-right-header .body-right-header-left {
+  width: 158px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-right: solid 2px #dddddd;
+}
+.card-report-machine-status .reports-box-body-right .body-right-header .body-right-header-left button {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
+  border: none;
+}
+.card-report-machine-status .reports-box-body-right .body-right-header .body-right-header-left button.active {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
+  color: #1791ff;
+  border: none;
+}
+.card-report-machine-status .reports-box-body-right .body-right-header .body-right-header-right {
+  width: calc(100% - 158px);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-report-machine-status .reports-box-body-right .body-right-header .body-right-header-right button {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
+  border: none;
+}
+.card-report-machine-status .reports-box-body-right .body-right-header .body-right-header-right button:first-child {
+  margin-right: 16px;
+}
+.card-report-machine-status .reports-box-body-right .body-right-header .body-right-header-right button:active {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
+  border: none;
+}
+.card-report-machine-status .reports-box-body-right .body-right-card {
+  width: 100%;
+  height: calc(100% - 70px);
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}
+.card-report-machine-status .reports-box-body-right .body-right-card .card-report > section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-report-machine-status .reports-box-body-right .body-right-card .card-report > section .rectangle_gray {
+  width: 256px;
+  height: 120px;
+  border-radius: 2px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f1f1f1;
+}
+.card-report-machine-status .reports-box-body-right .body-right-card .card-report > section .rectangle_gray label {
+  font-size: 18px;
+  color: #878787;
+  margin-bottom: 30px;
+}
+.card-report-machine-status .reports-box-body-right .body-right-card .card-report > section .rectangle_gray span {
+  font-size: 48px;
+  font-weight: bold;
+  line-height: 0.38;
+  color: #1791ff;
+}
 @keyframes selectedanimation {
   0% {
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
@@ -15654,7 +17551,7 @@ footer .container button.big:before {
 .reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper .mx-input,
 .reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper .mx-input {
   width: 253px;
-  height: 50px;
+  height: 48px;
   border-radius: 2px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
   border: solid 1px #bbbcbc;
@@ -15715,7 +17612,7 @@ footer .container button.big:before {
 .reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div input.program,
 .reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div input.program {
   width: 256px;
-  height: 48px;
+  height: 46px;
   border-radius: 2px;
   box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
   font-size: 18px;
@@ -15993,7 +17890,6 @@ footer .container button.big:before {
   overflow: scroll;
 }
 .reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tbody tr {
-  cursor: pointer;
   height: 64px;
   padding: 10px;
   font-size: 14px;
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-alarms.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-alarms.ts
new file mode 100644
index 00000000..cb8ced5f
--- /dev/null
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-alarms.ts
@@ -0,0 +1,94 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import {cardReport} from "../../../modules/base-components/cards/index";
+import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
+import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
+import { Accordion } from "src/modules/base-components";
+import { loginService } from "src/services";
+import DatePicker from "vue2-datepicker";
+import moment from "moment";
+import { ModalHelper } from "src/components/modals";
+
+declare let $: any;
+@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
+export default class CardReportAlarms extends Vue {
+
+    lang = {
+        days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
+        placeholder: {
+          date: 'Select Date',
+          dateRange: 'Select Date Range'
+        }
+    }
+
+    filter: {
+        interval?: Date[],
+        timelineMacro: Array<string>,
+        multiUser: Array<any>
+    } = {
+        timelineMacro: ["Eventi","Allarmi","Stato macchina","Programmi"],
+        multiUser: [],
+        interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
+    };
+    
+
+    public selectedTab: string = "Production";
+    selectDiagram: boolean = false;
+    selectMoreFilter: boolean = false;
+    selectTable: boolean = true;
+    users: Array<any> = [];
+
+    get currentUser() {
+        return this.$store.state.currentUser;
+    }
+
+    async mounted() {
+        this.users = await loginService.getAllUsers();
+        this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
+        this.filter.multiUser.push(this.currentUser.username);
+      }
+
+    public selectTab(value){
+        this.selectedTab = value;
+    }
+    timeformat() {
+        return (moment() as any)._locale._longDateFormat.LT;
+    }
+
+    viewDiagram(){
+        if(!this.selectDiagram){
+            this.selectDiagram = true;
+            this.selectTable = false;
+        }
+        console.log("Diagram active");
+    }
+
+    viewTable(){
+        if(!this.selectTable){
+            this.selectDiagram = false;
+            this.selectTable = true;
+        }
+        console.log("Diagram active");
+    }
+
+    viewMoreFilter(){
+        if(!this.selectMoreFilter){
+            this.selectMoreFilter = true;
+        }
+        else{
+            this.selectMoreFilter = false;
+        }
+    }
+
+    openModalSelectField(){
+        ModalHelper.ShowModal(modalReportSelectColumn);
+    }
+    public openSelectStateU() {
+        if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
+          $('.checkboxesU').addClass('checkboxesViewUser');
+        else
+          $('.checkboxesU').removeClass('checkboxesViewUser');
+      }
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-alarms.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-alarms.vue
new file mode 100644
index 00000000..9d2b8ab5
--- /dev/null
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-alarms.vue
@@ -0,0 +1,155 @@
+<template>
+<div class="card-report-alarms">
+    <div class="reports-box-body-left">
+        <div class="body-left-header" v-if="selectDiagram">
+            <div>
+                <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
+                <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
+            </div>
+            <div>
+                <label>{{'reports_body_header_axes_x' | localize("Asse X")}}</label>
+                <select><option>{{'reports_body_header_option_axes_x_program_name' | localize("Nome Programma")}}</option></select>
+            </div>
+            <div>
+                <label>{{'reports_body_header_axes_y' | localize("Asse Y")}}</label>
+                <select><option>{{'reports_body_header_option_axes_y_frequency' | localize("Frequenza")}}</option></select>
+            </div>
+        </div>
+    <div class="body-left-header" v-if="!selectDiagram">
+        <div>
+            <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
+            <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
+        </div>
+        <div>
+            <label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
+            <div class="interval-time">
+                <input type="time"/>
+                <input type="time"/>
+            </div>
+        </div>
+        <div>
+            <label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
+            <input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
+        </div>
+        <div class="multiselect">
+          <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
+          <div class="selectBoxU" @click="openSelectStateU()">
+            <select id="selectListCheckboxes">
+              <option><span v-for="(item, index) in filter.multiUser" :key="item" >{{'reports_filter_operator_'+item | localize(item)}}{{(index==filter.multiUser.length-1)?'':', '}}</span></option>
+              <div class="overSelect"></div>
+            </select>
+          </div>
+
+          <div class="checkboxesU">
+            <div v-for="item in users" :key="item.id">
+              <label :for="item.username">
+              <div class="custom-checkbox">
+                <input type="checkbox" v-model="filter.multiUser" :value="item.username" :id="item.username" />
+                <label :for="item.username"></label>
+              </div>
+              <label class="label-state">{{item.username}}</label>
+              </label>
+            </div>
+          </div>
+        </div>
+        <!-- <div>
+            <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
+            <select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
+        </div> -->
+        <div>
+            <label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
+            <select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
+        </div>
+    </div>
+    <div class="body-left-center">
+        <div class="body-left-center-container">
+          <table>
+              <thead>
+                  <tr>
+                      <th>{{'reports_table_program_name' | localize("Nome programma")}}</th>
+                      <th>{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
+                      <th>{{'reports_table_quantity' | localize("Quantity")}}</th>
+                      <th>{{'reports_table_start_now' | localize("Ora inizio")}}</th>
+                      <th>{{'reports_table_end_time' | localize("Ora fine")}}</th>
+                      <th>{{'reports_table_date' | localize("Data")}}</th>
+                      <th>{{'reports_table_effective_time' | localize("T effettivo")}}</th>
+                      <th>{{'reports_table_average_time' | localize("T medio")}}</th>
+                      <th>{{'reports_table_theoretical_time' | localize("T teorico")}}</th>
+                      <th>{{'reports_table_deviation' | localize("Scostamento")}}</th>
+                      <th>{{'reports_table_quality' | localize("Qualità")}}</th>
+                      <th>{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
+                      <th>{{'reports_table_shift' | localize("Turno")}}</th>
+                      <th @click="openModalSelectField()"><i class="fa fa-angle-double-right"></i></th>
+                  </tr>
+              </thead>
+              <tbody>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+              </tbody>
+          </table>
+          </div>
+    </div>
+</div>
+    <div class="reports-box-body-right">
+        <div class="body-right-header">
+            <div class="body-right-header-left">
+                <button :class="{'active': selectTable}" @click="viewTable()"><i class="fa fa-bars fa-2x"></i></button>
+                <button :class="{'active': selectDiagram}" @click="viewDiagram()"><i class="fa fa-signal fa-2x"></i></button>
+            </div>
+            <div class="body-right-header-right">
+                <button><i class="fa fa-print fa-2x"></i></button>
+                <button><i class="fa fa-upload fa-2x"></i></button>
+            </div>
+            </div>
+        <div class="body-right-card">
+            <card-report :title="'Valore assoluto (%)'">
+            </card-report>
+            <card-report :title="'Valore assoluto'">
+                <div class="rectangle_gray">
+                    <label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
+                    <span>10.000</span>
+                </div>
+            </card-report>
+            <card-report :title="'Valore assoluto'">
+                <div class="rectangle_gray">
+                    <label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
+                    <span>4</span>
+                </div>
+            </card-report>
+        </div>
+    </div>
+</div>
+
+</template>
+
+<script src="./card-report-alarms.ts" lang="ts"></script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-events.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-events.ts
new file mode 100644
index 00000000..d0d3f913
--- /dev/null
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-events.ts
@@ -0,0 +1,94 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import {cardReport} from "../../../modules/base-components/cards/index";
+import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
+import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
+import { Accordion } from "src/modules/base-components";
+import { loginService } from "src/services";
+import DatePicker from "vue2-datepicker";
+import moment from "moment";
+import { ModalHelper } from "src/components/modals";
+
+declare let $: any;
+@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
+export default class CardReportEvents extends Vue {
+
+    lang = {
+        days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
+        placeholder: {
+          date: 'Select Date',
+          dateRange: 'Select Date Range'
+        }
+    }
+
+    filter: {
+        interval?: Date[],
+        timelineMacro: Array<string>,
+        multiUser: Array<any>
+    } = {
+        timelineMacro: ["Eventi","Allarmi","Stato macchina","Programmi"],
+        multiUser: [],
+        interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
+    };
+    
+
+    public selectedTab: string = "Production";
+    selectDiagram: boolean = false;
+    selectMoreFilter: boolean = false;
+    selectTable: boolean = true;
+    users: Array<any> = [];
+
+    get currentUser() {
+        return this.$store.state.currentUser;
+    }
+
+    async mounted() {
+        this.users = await loginService.getAllUsers();
+        this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
+        this.filter.multiUser.push(this.currentUser.username);
+      }
+
+    public selectTab(value){
+        this.selectedTab = value;
+    }
+    timeformat() {
+        return (moment() as any)._locale._longDateFormat.LT;
+    }
+
+    viewDiagram(){
+        if(!this.selectDiagram){
+            this.selectDiagram = true;
+            this.selectTable = false;
+        }
+        console.log("Diagram active");
+    }
+
+    viewTable(){
+        if(!this.selectTable){
+            this.selectDiagram = false;
+            this.selectTable = true;
+        }
+        console.log("Diagram active");
+    }
+
+    viewMoreFilter(){
+        if(!this.selectMoreFilter){
+            this.selectMoreFilter = true;
+        }
+        else{
+            this.selectMoreFilter = false;
+        }
+    }
+
+    openModalSelectField(){
+        ModalHelper.ShowModal(modalReportSelectColumn);
+    }
+    public openSelectStateU() {
+        if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
+          $('.checkboxesU').addClass('checkboxesViewUser');
+        else
+          $('.checkboxesU').removeClass('checkboxesViewUser');
+      }
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-events.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-events.vue
new file mode 100644
index 00000000..0d4c4a34
--- /dev/null
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-events.vue
@@ -0,0 +1,155 @@
+<template>
+<div class="card-report-events">
+    <div class="reports-box-body-left">
+        <div class="body-left-header" v-if="selectDiagram">
+            <div>
+                <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
+                <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
+            </div>
+            <div>
+                <label>{{'reports_body_header_axes_x' | localize("Asse X")}}</label>
+                <select><option>{{'reports_body_header_option_axes_x_program_name' | localize("Nome Programma")}}</option></select>
+            </div>
+            <div>
+                <label>{{'reports_body_header_axes_y' | localize("Asse Y")}}</label>
+                <select><option>{{'reports_body_header_option_axes_y_frequency' | localize("Frequenza")}}</option></select>
+            </div>
+        </div>
+    <div class="body-left-header" v-if="!selectDiagram">
+        <div>
+            <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
+            <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
+        </div>
+        <div>
+            <label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
+            <div class="interval-time">
+                <input type="time"/>
+                <input type="time"/>
+            </div>
+        </div>
+        <div>
+            <label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
+            <input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
+        </div>
+        <div class="multiselect">
+          <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
+          <div class="selectBoxU" @click="openSelectStateU()">
+            <select id="selectListCheckboxes">
+              <option><span v-for="(item, index) in filter.multiUser" :key="item" >{{'reports_filter_operator_'+item | localize(item)}}{{(index==filter.multiUser.length-1)?'':', '}}</span></option>
+              <div class="overSelect"></div>
+            </select>
+          </div>
+
+          <div class="checkboxesU">
+            <div v-for="item in users" :key="item.id">
+              <label :for="item.username">
+              <div class="custom-checkbox">
+                <input type="checkbox" v-model="filter.multiUser" :value="item.username" :id="item.username" />
+                <label :for="item.username"></label>
+              </div>
+              <label class="label-state">{{item.username}}</label>
+              </label>
+            </div>
+          </div>
+        </div>
+        <!-- <div>
+            <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
+            <select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
+        </div> -->
+        <div>
+            <label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
+            <select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
+        </div>
+    </div>
+    <div class="body-left-center">
+        <div class="body-left-center-container">
+          <table>
+              <thead>
+                  <tr>
+                      <th>{{'reports_table_program_name' | localize("Nome programma")}}</th>
+                      <th>{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
+                      <th>{{'reports_table_quantity' | localize("Quantity")}}</th>
+                      <th>{{'reports_table_start_now' | localize("Ora inizio")}}</th>
+                      <th>{{'reports_table_end_time' | localize("Ora fine")}}</th>
+                      <th>{{'reports_table_date' | localize("Data")}}</th>
+                      <th>{{'reports_table_effective_time' | localize("T effettivo")}}</th>
+                      <th>{{'reports_table_average_time' | localize("T medio")}}</th>
+                      <th>{{'reports_table_theoretical_time' | localize("T teorico")}}</th>
+                      <th>{{'reports_table_deviation' | localize("Scostamento")}}</th>
+                      <th>{{'reports_table_quality' | localize("Qualità")}}</th>
+                      <th>{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
+                      <th>{{'reports_table_shift' | localize("Turno")}}</th>
+                      <th @click="openModalSelectField()"><i class="fa fa-angle-double-right"></i></th>
+                  </tr>
+              </thead>
+              <tbody>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+                  <tr>
+                      <td colspan="1">Finestra02.pgm</td>
+                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
+                      <td colspan="1">1</td>
+                      <td colspan="1">11:25:00</td>
+                      <td colspan="1">13:10:00</td>
+                      <td colspan="1">12/04/2017</td>
+                      <td colspan="1">01:45:00</td>
+                      <td colspan="1">01:25:00</td>
+                      <td colspan="1">01:20:00</td>
+                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td colspan="1">Buono</td>
+                      <td colspan="1">Nome utente</td>
+                      <td colspan="1">1°</td>
+                      <td></td>
+                  </tr>
+              </tbody>
+          </table>
+          </div>
+    </div>
+</div>
+    <div class="reports-box-body-right">
+        <div class="body-right-header">
+            <div class="body-right-header-left">
+                <button :class="{'active': selectTable}" @click="viewTable()"><i class="fa fa-bars fa-2x"></i></button>
+                <button :class="{'active': selectDiagram}" @click="viewDiagram()"><i class="fa fa-signal fa-2x"></i></button>
+            </div>
+            <div class="body-right-header-right">
+                <button><i class="fa fa-print fa-2x"></i></button>
+                <button><i class="fa fa-upload fa-2x"></i></button>
+            </div>
+            </div>
+        <div class="body-right-card">
+            <card-report :title="'Valore assoluto (%)'">
+            </card-report>
+            <card-report :title="'Valore assoluto'">
+                <div class="rectangle_gray">
+                    <label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
+                    <span>10.000</span>
+                </div>
+            </card-report>
+            <card-report :title="'Valore assoluto'">
+                <div class="rectangle_gray">
+                    <label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
+                    <span>4</span>
+                </div>
+            </card-report>
+        </div>
+    </div>
+</div>
+
+</template>
+
+<script src="./card-report-events.ts" lang="ts"></script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts
new file mode 100644
index 00000000..a5f87943
--- /dev/null
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts
@@ -0,0 +1,94 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import {cardReport} from "../../../modules/base-components/cards/index";
+import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
+import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
+import { Accordion } from "src/modules/base-components";
+import { loginService } from "src/services";
+import DatePicker from "vue2-datepicker";
+import moment from "moment";
+import { ModalHelper } from "src/components/modals";
+
+declare let $: any;
+@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
+export default class CardReportMachineStatus extends Vue {
+
+    lang = {
+        days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
+        placeholder: {
+          date: 'Select Date',
+          dateRange: 'Select Date Range'
+        }
+    }
+
+    filter: {
+        interval?: Date[],
+        timelineMacro: Array<string>,
+        multiUser: Array<any>
+    } = {
+        timelineMacro: ["Eventi","Allarmi","Stato macchina","Programmi"],
+        multiUser: [],
+        interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
+    };
+    
+
+    public selectedTab: string = "Production";
+    selectDiagram: boolean = false;
+    selectMoreFilter: boolean = false;
+    selectTable: boolean = true;
+    users: Array<any> = [];
+
+    get currentUser() {
+        return this.$store.state.currentUser;
+    }
+
+    async mounted() {
+        this.users = await loginService.getAllUsers();
+        this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
+        this.filter.multiUser.push(this.currentUser.username);
+      }
+
+    public selectTab(value){
+        this.selectedTab = value;
+    }
+    timeformat() {
+        return (moment() as any)._locale._longDateFormat.LT;
+    }
+
+    viewDiagram(){
+        if(!this.selectDiagram){
+            this.selectDiagram = true;
+            this.selectTable = false;
+        }
+        console.log("Diagram active");
+    }
+
+    viewTable(){
+        if(!this.selectTable){
+            this.selectDiagram = false;
+            this.selectTable = true;
+        }
+        console.log("Diagram active");
+    }
+
+    viewMoreFilter(){
+        if(!this.selectMoreFilter){
+            this.selectMoreFilter = true;
+        }
+        else{
+            this.selectMoreFilter = false;
+        }
+    }
+
+    openModalSelectField(){
+        ModalHelper.ShowModal(modalReportSelectColumn);
+    }
+    public openSelectStateU() {
+        if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
+          $('.checkboxesU').addClass('checkboxesViewUser');
+        else
+          $('.checkboxesU').removeClass('checkboxesViewUser');
+      }
+}
\ No newline at end of file
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue
new file mode 100644
index 00000000..39bc2660
--- /dev/null
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue
@@ -0,0 +1,43 @@
+<template>
+<div class="card-report-machine-status">
+                  <div class="reports-box-body-left">
+                  <div class="body-left-header-machinestatus">
+                    <div>
+                        <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
+                        <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
+                    </div>
+                  </div>
+                  <div class="body-left-center">
+                      MachineStatus
+                  </div>
+              </div>
+              <div class="reports-box-body-right">
+                <div class="body-right-header">
+                    <div class="body-right-header-right">
+                        <button><i class="fa fa-print fa-2x"></i></button>
+                        <button><i class="fa fa-upload fa-2x"></i></button>
+                    </div>
+                </div>
+                <div class="body-right-card">
+                    <card-report :title="'Valore assoluto (%)'">
+
+                    </card-report>
+                    <card-report :title="'Valore assoluto'">
+                        <div class="rectangle_gray">
+                            <label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
+                            <span>10.000</span>
+                        </div>
+                    </card-report>
+                    <card-report :title="'Valore assoluto'">
+                        <div class="rectangle_gray">
+                            <label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
+                            <span>4</span>
+                        </div>
+                    </card-report>
+                </div>
+              </div>
+</div>
+
+</template>
+
+<script src="./card-report-machine-status.ts" lang="ts"></script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/app_modules/reports/components/reports.ts b/Step/wwwroot/src/app_modules/reports/components/reports.ts
index 0ba7340f..bf31799b 100644
--- a/Step/wwwroot/src/app_modules/reports/components/reports.ts
+++ b/Step/wwwroot/src/app_modules/reports/components/reports.ts
@@ -9,10 +9,14 @@ import moment from "moment";
 import { ModalHelper } from "src/components/modals";
 
 import cardReportProduction from "src/app_modules/reports/components/card-report-production.vue";
+import cardReportEvents from "src/app_modules/reports/components/card-report-events.vue";
+import cardReportAlarms from "src/app_modules/reports/components/card-report-alarms.vue";
+import cardReportMachineStatus from "src/app_modules/reports/components/card-report-machine-status.vue";
 
 declare let $: any;
 @Component({ components: { datePicker: DatePicker, cardReport: cardReport,
-    accordionDropdown: accordionDropdown, accordion: Accordion, cardReportProduction: cardReportProduction } })
+    accordionDropdown: accordionDropdown, accordion: Accordion, cardReportProduction: cardReportProduction,
+    cardReportEvents: cardReportEvents, cardReportAlarms: cardReportAlarms, cardReportMachineStatus: cardReportMachineStatus } })
 export default class Reports extends Vue {
 
     lang = {
diff --git a/Step/wwwroot/src/app_modules/reports/components/reports.vue b/Step/wwwroot/src/app_modules/reports/components/reports.vue
index c4c598cd..070719cb 100644
--- a/Step/wwwroot/src/app_modules/reports/components/reports.vue
+++ b/Step/wwwroot/src/app_modules/reports/components/reports.vue
@@ -23,134 +23,13 @@
               <card-report-production></card-report-production>
           </div>
           <div class="reports-box-body" v-if="selectedTab == 'Events'">
-                <!-- <div class="reports-box-body-left">
-                  <div class="body-left-header">
-                    <div>
-                        <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
-                        <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
-                    </div>
-                    <div>
-                        <label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
-                        <div class="interval-time">
-                            <input type="time"/>
-                            <input type="time"/>
-                        </div>
-                    </div>
-                    <div>
-                        <label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
-                        <input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
-                    </div>
-                    <div>
-                        <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
-                        <select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
-                    </div>
-                    <div>
-                        <label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
-                        <select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
-                    </div>
-                    <div>
-                        <label class="label_advanced_filters"><span>{{'reports_body_header_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
-                    </div>
-                  </div>
-                  <div class="body-left-center">
-                      Events
-                  </div>
-              </div>
-              <div class="reports-box-body-right">
-                <div class="body-right-header">
-                    <div class="body-right-header-left">
-                        <button><i class="fa fa-bars fa-2x"></i></button>
-                        <button><i class="fa fa-signal fa-2x"></i></button>
-                    </div>
-                    <div class="body-right-header-right">
-                        <button><i class="fa fa-print fa-2x"></i></button>
-                        <button><i class="fa fa-upload fa-2x"></i></button>
-                    </div>
-                </div>
-                <div class="body-right-card">
-                    <card-report :title="'Valore assoluto (%)'">
-
-                    </card-report>
-                    <card-report :title="'Valore assoluto'">
-                        <div class="rectangle_gray">
-                            <label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
-                            <span>10.000</span>
-                        </div>
-                    </card-report>
-                    <card-report :title="'Valore assoluto'">
-                        <div class="rectangle_gray">
-                            <label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
-                            <span>4</span>
-                        </div>
-                    </card-report>
-                </div>
-              </div> -->
+              <card-report-events></card-report-events>
           </div>
           <div class="reports-box-body" v-if="selectedTab == 'Alarms'">
-              <!-- <div class="reports-box-body-left">
-                  <div class="body-left-header">
-                    <div>
-                        <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
-                        <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
-                    </div>
-                    <div>
-                        <label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
-                        <div class="interval-time">
-                            <input type="time"/>
-                            <input type="time"/>
-                        </div>
-                    </div>
-                    <div>
-                        <label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
-                        <input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
-                    </div>
-                    <div>
-                        <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
-                        <select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
-                    </div>
-                    <div>
-                        <label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
-                        <select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
-                    </div>
-                    <div>
-                        <label class="label_advanced_filters"><span>{{'reports_body_header_label_advanced_filters' | localize("Mostra filtri avanzati")}}</span> <i class="fa fa-caret-down"></i></label>
-                    </div>
-                  </div>
-                  <div class="body-left-center">
-                      Alarms
-                  </div>
-              </div>
-              <div class="reports-box-body-right">
-                <div class="body-right-header">
-                    <div class="body-right-header-left">
-                        <button><i class="fa fa-bars fa-2x"></i></button>
-                        <button><i class="fa fa-signal fa-2x"></i></button>
-                    </div>
-                    <div class="body-right-header-right">
-                        <button><i class="fa fa-print fa-2x"></i></button>
-                        <button><i class="fa fa-upload fa-2x"></i></button>
-                    </div>
-                </div>
-                <div class="body-right-card">
-                    <card-report :title="'Valore assoluto (%)'">
-
-                    </card-report>
-                    <card-report :title="'Valore assoluto'">
-                        <div class="rectangle_gray">
-                            <label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
-                            <span>10.000</span>
-                        </div>
-                    </card-report>
-                    <card-report :title="'Valore assoluto'">
-                        <div class="rectangle_gray">
-                            <label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
-                            <span>4</span>
-                        </div>
-                    </card-report>
-                </div>
-              </div> -->
+              <card-report-alarms></card-report-alarms>
           </div>
           <div class="reports-box-body" v-if="selectedTab == 'MachineStatus'">
+              <card-report-machine-status></card-report-machine-status>
               <!-- <div class="reports-box-body-left">
                   <div class="body-left-header-machinestatus">
                     <div>

From 5c59642da2da86e1d6094273f54c22069e279807 Mon Sep 17 00:00:00 2001
From: Alessandro <a.francia@teamdev.it>
Date: Thu, 24 Jan 2019 09:37:31 +0100
Subject: [PATCH 5/9] fix

---
 .../src/app_modules/reports/components/reports.vue        | 8 ++++----
 .../base-components/modal-report-select-column.vue        | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Step/wwwroot/src/app_modules/reports/components/reports.vue b/Step/wwwroot/src/app_modules/reports/components/reports.vue
index 070719cb..1c61fd79 100644
--- a/Step/wwwroot/src/app_modules/reports/components/reports.vue
+++ b/Step/wwwroot/src/app_modules/reports/components/reports.vue
@@ -9,9 +9,9 @@
                 <button class="tab" :class="{'active': selectedTab == 'Events'}" @click="selectTab('Events')">
                     <span>{{'reports_lbl_events' | localize("Eventi")}}</span>
                 </button>
-                <button class="tab" :class="{'active': selectedTab == 'Alarms'}" @click="selectTab('Alarms')">
+                <!-- <button class="tab" :class="{'active': selectedTab == 'Alarms'}" @click="selectTab('Alarms')">
                     <span>{{'reports_lbl_alarms' | localize("Allarmi")}}</span>
-                </button>
+                </button> -->
                 <button class="tab" :class="{'active': selectedTab == 'MachineStatus'}" @click="selectTab('MachineStatus')">
                     <span>{{'reports_lbl_machine_status' | localize("Stato Macchina")}}</span>
                 </button>
@@ -25,9 +25,9 @@
           <div class="reports-box-body" v-if="selectedTab == 'Events'">
               <card-report-events></card-report-events>
           </div>
-          <div class="reports-box-body" v-if="selectedTab == 'Alarms'">
+          <!-- <div class="reports-box-body" v-if="selectedTab == 'Alarms'">
               <card-report-alarms></card-report-alarms>
-          </div>
+          </div> -->
           <div class="reports-box-body" v-if="selectedTab == 'MachineStatus'">
               <card-report-machine-status></card-report-machine-status>
               <!-- <div class="reports-box-body-left">
diff --git a/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue b/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue
index a413f3d8..bb996353 100644
--- a/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue
+++ b/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue
@@ -23,7 +23,7 @@
         </div>
     </div>
     <div class="modal-report-body-footer">
-        <button class="btn btn-primary">{{'modal_report_select_column_btn_cancel' | localize("Annulla")}}</button>
+        <button class="btn btn-primary" @click="close()">{{'modal_report_select_column_btn_cancel' | localize("Annulla")}}</button>
         <button class="btn btn-success">{{'modal_report_select_column_btn_confirm' | localize("Conferma")}}</button>
     </div>
   </modal>

From 2dfc725dcca1b7766dc2b4ed276c4f47c4adbef5 Mon Sep 17 00:00:00 2001
From: Paolo Possanzini <paolo@teamdev.it>
Date: Thu, 24 Jan 2019 10:22:07 +0100
Subject: [PATCH 6/9] fix modale

---
 .../components/card-report-production.ts      | 144 +++++++++---------
 .../components/card-report-production.vue     |  46 ++----
 .../modal-report-select-column.ts             |  33 +++-
 .../modal-report-select-column.vue            |   4 +-
 4 files changed, 123 insertions(+), 104 deletions(-)

diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts
index 5ca0ae21..c9685ac3 100644
--- a/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts
@@ -1,6 +1,6 @@
 import Vue from "vue";
 import Component from "vue-class-component";
-import {cardReport} from "../../../modules/base-components/cards/index";
+import { cardReport } from "../../../modules/base-components/cards/index";
 import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
 import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
 import { Accordion } from "src/modules/base-components";
@@ -13,82 +13,88 @@ declare let $: any;
 @Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
 export default class CardReportProduction extends Vue {
 
-    lang = {
-        days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-        months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-        pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
-        placeholder: {
-          date: 'Select Date',
-          dateRange: 'Select Date Range'
-        }
+  lang = {
+    days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
+    placeholder: {
+      date: 'Select Date',
+      dateRange: 'Select Date Range'
     }
+  }
 
-    filter: {
-        interval?: Date[],
-        timelineMacro: Array<string>,
-        multiUser: Array<any>
-    } = {
-        timelineMacro: ["Eventi","Allarmi","Stato macchina","Programmi"],
-        multiUser: [],
-        interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
+  filter: {
+    interval?: Date[],
+    timelineMacro: Array<string>,
+    multiUser: Array<any>
+  } = {
+      timelineMacro: ["Eventi", "Allarmi", "Stato macchina", "Programmi"],
+      multiUser: [],
+      interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
     };
-    
 
-    public selectedTab: string = "Production";
-    selectDiagram: boolean = false;
-    selectMoreFilter: boolean = false;
-    selectTable: boolean = true;
-    users: Array<any> = [];
 
-    get currentUser() {
-        return this.$store.state.currentUser;
+  visibleColumns: string[] = ["ProgramName","Date","Deviation","Dimensions","EffectiveTime","Quality","Quantity","AverageTime","OperatorName","StartTime","TheoreticalTime","Shift","EndTime",];
+
+  isVisible(value){
+    return this.visibleColumns.some(c => c == value);
+  }
+
+  public selectedTab: string = "Production";
+  selectDiagram: boolean = false;
+  selectMoreFilter: boolean = false;
+  selectTable: boolean = true;
+  users: Array<any> = [];
+
+  get currentUser() {
+    return this.$store.state.currentUser;
+  }
+
+  async mounted() {
+    this.users = await loginService.getAllUsers();
+    this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
+    this.filter.multiUser.push(this.currentUser.username);
+  }
+
+  public selectTab(value) {
+    this.selectedTab = value;
+  }
+  timeformat() {
+    return (moment() as any)._locale._longDateFormat.LT;
+  }
+
+  viewDiagram() {
+    if (!this.selectDiagram) {
+      this.selectDiagram = true;
+      this.selectTable = false;
     }
+    console.log("Diagram active");
+  }
 
-    async mounted() {
-        this.users = await loginService.getAllUsers();
-        this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
-        this.filter.multiUser.push(this.currentUser.username);
-      }
+  viewTable() {
+    if (!this.selectTable) {
+      this.selectDiagram = false;
+      this.selectTable = true;
+    }
+    console.log("Diagram active");
+  }
 
-    public selectTab(value){
-        this.selectedTab = value;
+  viewMoreFilter() {
+    if (!this.selectMoreFilter) {
+      this.selectMoreFilter = true;
     }
-    timeformat() {
-        return (moment() as any)._locale._longDateFormat.LT;
+    else {
+      this.selectMoreFilter = false;
     }
+  }
 
-    viewDiagram(){
-        if(!this.selectDiagram){
-            this.selectDiagram = true;
-            this.selectTable = false;
-        }
-        console.log("Diagram active");
-    }
-
-    viewTable(){
-        if(!this.selectTable){
-            this.selectDiagram = false;
-            this.selectTable = true;
-        }
-        console.log("Diagram active");
-    }
-
-    viewMoreFilter(){
-        if(!this.selectMoreFilter){
-            this.selectMoreFilter = true;
-        }
-        else{
-            this.selectMoreFilter = false;
-        }
-    }
-
-    openModalSelectField(){
-        ModalHelper.ShowModal(modalReportSelectColumn);
-    }
-    public openSelectStateU() {
-        if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
-          $('.checkboxesU').addClass('checkboxesViewUser');
-        else
-          $('.checkboxesU').removeClass('checkboxesViewUser');
-      }
-}
\ No newline at end of file
+  async openModalSelectField() {
+    this.visibleColumns = await ModalHelper.ShowModalAsync(modalReportSelectColumn, this.visibleColumns);
+  }
+  public openSelectStateU() {
+    if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
+      $('.checkboxesU').addClass('checkboxesViewUser');
+    else
+      $('.checkboxesU').removeClass('checkboxesViewUser');
+  }
+}
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
index dba60ab9..edc32665 100644
--- a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
@@ -66,7 +66,7 @@
           <table>
               <thead>
                   <tr>
-                      <th>{{'reports_table_program_name' | localize("Nome programma")}}</th>
+                      <th v-if="isVisible('ProgramName')">{{'reports_table_program_name' | localize("Nome programma")}}</th>
                       <th>{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
                       <th>{{'reports_table_quantity' | localize("Quantity")}}</th>
                       <th>{{'reports_table_start_now' | localize("Ora inizio")}}</th>
@@ -84,35 +84,19 @@
               </thead>
               <tbody>
                   <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
-                      <td></td>
-                  </tr>
-                  <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
+                      <td v-if="isVisible('ProgramName')" >Finestra02.pgm</td>
+                      <td>X: 1210; Y:900; Z: 63</td>
+                      <td>1</td>
+                      <td>11:25:00</td>
+                      <td>13:10:00</td>
+                      <td>12/04/2017</td>
+                      <td>01:45:00</td>
+                      <td>01:25:00</td>
+                      <td>01:20:00</td>
+                      <td :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td>Buono</td>
+                      <td>Nome utente</td>
+                      <td>1°</td>
                       <td></td>
                   </tr>
               </tbody>
@@ -152,4 +136,4 @@
 
 </template>
 
-<script src="./card-report-production.ts" lang="ts"></script>
\ No newline at end of file
+<script src="./card-report-production.ts" lang="ts"></script>
diff --git a/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts b/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts
index ee2c8c9a..61a4a3e8 100644
--- a/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts
+++ b/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts
@@ -2,7 +2,8 @@ import Vue from "vue";
 import Component from "vue-class-component";
 import { ModalHelper,Modal } from "src/components/modals";
 import { Factory, MessageService } from "src/_base";
-import { Watch } from "vue-property-decorator";
+import { Watch, Prop } from "vue-property-decorator";
+import { Deferred } from "src/services";
 
 declare var cmsClient: any;
 
@@ -14,6 +15,14 @@ declare var cmsClient: any;
 
 export default class ModalReportSelectColumn extends Vue {
 
+  // gestisce la risposta
+  @Prop()
+  deferred: Deferred<any>;
+
+  // gestisce il parametro in ingresso
+  @Prop()
+  value: any[];
+
   maxRow: number = 3;
 
   checkboxes: Array<any> = [{id: "ProgramName", label: this.$options.filters.localize("modal_report_select_column_program_name", "Nome programma")},
@@ -29,10 +38,23 @@ export default class ModalReportSelectColumn extends Vue {
                             {id: "TheoreticalTime", label: this.$options.filters.localize("modal_report_select_column_theoretical_time", "Tempo teorico")},
                             {id: "Shift", label: this.$options.filters.localize("modal_report_select_column_shift", "Turno")},
                             {id: "EndTime", label: this.$options.filters.localize("modal_report_select_column_end_time", "Ora fine")}];
-  
+
   allSelectedColumn = false;
   columnSelected = [];
 
+  @Watch("value")
+  initializeSelectedcolums(){
+    this.columnSelected.splice(0, this.columnSelected.length);
+
+    this.value.forEach(element => {
+      this.columnSelected.push(element);
+    });
+  }
+
+  mounted() {
+    this.initializeSelectedcolums();
+  }
+
   selectAll() {
     this.columnSelected = [];
 
@@ -46,6 +68,13 @@ export default class ModalReportSelectColumn extends Vue {
   close() {
     Factory.Get(MessageService).deleteChannel("esc_pressed");
     ModalHelper.HideModal();
+    this.deferred.resolve(this.value);
+  }
+
+  confirm(){
+    Factory.Get(MessageService).deleteChannel("esc_pressed");
+    ModalHelper.HideModal();
+    this.deferred.resolve(this.columnSelected);
   }
 
 }
diff --git a/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue b/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue
index bb996353..a8fce786 100644
--- a/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue
+++ b/Step/wwwroot/src/modules/base-components/modal-report-select-column.vue
@@ -24,8 +24,8 @@
     </div>
     <div class="modal-report-body-footer">
         <button class="btn btn-primary" @click="close()">{{'modal_report_select_column_btn_cancel' | localize("Annulla")}}</button>
-        <button class="btn btn-success">{{'modal_report_select_column_btn_confirm' | localize("Conferma")}}</button>
+        <button class="btn btn-success" @click="confirm()">{{'modal_report_select_column_btn_confirm' | localize("Conferma")}}</button>
     </div>
   </modal>
 </template>
-<script src="./modal-report-select-column.ts" lang="ts"></script>
\ No newline at end of file
+<script src="./modal-report-select-column.ts" lang="ts"></script>

From 977949aed366086ef357f473be3341357d89dea0 Mon Sep 17 00:00:00 2001
From: Alessandro <a.francia@teamdev.it>
Date: Thu, 24 Jan 2019 16:04:15 +0100
Subject: [PATCH 7/9] card-report-production, events, machinestatus

---
 Step/wwwroot/assets/styles/base/alarms.less   |    4 +-
 Step/wwwroot/assets/styles/base/card.less     | 1226 +++++++++++++----
 Step/wwwroot/assets/styles/base/report.less   |  625 ---------
 Step/wwwroot/assets/styles/style.css          | 1116 +++------------
 .../reports/components/card-report-events.ts  |  158 ++-
 .../reports/components/card-report-events.vue |   79 +-
 .../components/card-report-machine-status.ts  |  261 +++-
 .../components/card-report-machine-status.vue |  147 +-
 .../components/card-report-production.ts      |   20 +-
 .../components/card-report-production.vue     |   63 +-
 .../modal-report-select-column.ts             |    2 +-
 11 files changed, 1652 insertions(+), 2049 deletions(-)

diff --git a/Step/wwwroot/assets/styles/base/alarms.less b/Step/wwwroot/assets/styles/base/alarms.less
index 131d629c..2e6fa93e 100644
--- a/Step/wwwroot/assets/styles/base/alarms.less
+++ b/Step/wwwroot/assets/styles/base/alarms.less
@@ -854,7 +854,9 @@
                     color: @color-white;
                 }
 
-                .pagination button:hover:not(.active) {background-color: @color-whitegrey;}
+                .pagination button:hover:not(.active) {
+                    background-color: @color-whitegrey;
+                }
             }
         }
 
diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less
index 655fd6ea..6377a4ba 100644
--- a/Step/wwwroot/assets/styles/base/card.less
+++ b/Step/wwwroot/assets/styles/base/card.less
@@ -1818,7 +1818,7 @@
                 width: 253px;
                 .mx-input{
                   width: 253px;
-                  height: 50px;
+                  height: 48px;
                   border-radius: 2px;
                   box-shadow: 0 1px 2px 0 @color-black-40;
                   border: solid 1px @color-silver;                     
@@ -1834,8 +1834,16 @@
               flex-flow: column;
               height: 70px;
               margin-right: 24px;
+              label{
+                font-size: 14px;
+                line-height: 1.29;
+                color: @color-warm-grey;
+              }
               label.intervaldate{
                 width: 253px;
+                font-size: 14px;
+                line-height: 1.29;
+                color: @color-warm-grey;
               }
               select{
                 width: 192px;
@@ -1852,7 +1860,7 @@
                 display: flex;
                 flex-flow: row;
                 input[type="time"]{
-                  width: 112px;
+                  width: 96px;
                   height: 48px;
                   border-radius: 2px;
                   box-shadow: inset 0 1px 3px 0 @color-black-50;
@@ -1860,6 +1868,7 @@
                   line-height: 1.11;
                   color: @color-silver;
                   border: none;
+                  padding-left: 16px;
                 }
                 input[type="time"]:first-child{
                   margin-right: 16px;
@@ -1872,7 +1881,7 @@
               }
               input.program{
                 width: 256px;
-                height: 48px;
+                height: 46px;
                 border-radius: 2px;
                 box-shadow: inset 0 1px 3px 0 @color-black-50;
                 font-size: 18px;
@@ -1915,7 +1924,7 @@
               width: 100%;
               padding: 8px;
               cursor: pointer;
-              height: 49px;
+              height: 48px;
               font-size: 18px;
               line-height: 1.11;
               color: @color-greyish-brown;
@@ -1990,72 +1999,78 @@
               background: #FFF
             }
 
-            th:nth-child(1), td:nth-child(1){
-                width:162px;
-                max-width: 162px;
-                text-align: center;
-            }  
-            th:nth-child(2), td:nth-child(2){
-              width:139px;
-              max-width: 139px;
-              text-align: center;
-            }
-            th:nth-child(3), td:nth-child(3){
-                width:83px;
-                max-width:83px;
-                text-align: center;
-            }
-            th:nth-child(4), td:nth-child(4){
-              width:83px;
-              max-width:83px;
-              text-align: center;
-            }
-            th:nth-child(5), td:nth-child(5){
-              width:83px;
-              max-width:83px;
-              text-align: center;
-            }
-            th:nth-child(6), td:nth-child(6){
-              width:83px;
-              max-width:83px;
-              text-align: center;
-            }
-            th:nth-child(7), td:nth-child(7){
-                width:97px;
-                max-width:97px;
-                text-align: center;
-            }
-            th:nth-child(8), td:nth-child(8){
-              width:97px;
-              max-width:97px;
-              text-align: center;
-            }
-            th:nth-child(9), td:nth-child(9){
-              width:97px;
-              max-width:97px;
-              text-align: center;
-            }
-            th:nth-child(10), td:nth-child(10){
-              width:115px;
-              max-width:115px;
-              text-align: center;
-            }
-            th:nth-child(11), td:nth-child(11){
-              width:97px;
-              max-width:97px;
-              text-align: center;
-            }
-            th:nth-child(12), td:nth-child(12){
-              width:148px;
-              max-width:148px;
-              text-align: center;
-            }
-            th:nth-child(13), td:nth-child(13){
-              width:97px;
-              max-width:97px;
-              text-align: center;
+            th, td{
+                width: auto;
             }
+            // th:nth-child(1), td:nth-child(1){
+            //     width:162px;
+            //     max-width: 162px;
+            //     text-align: center;
+            // }  
+            // th:nth-child(2), td:nth-child(2){
+            //   width:139px;
+            //   max-width: 139px;
+            //   text-align: center;
+            // }
+            // th:nth-child(3), td:nth-child(3){
+            //     width:83px;
+            //     max-width:83px;
+            //     text-align: center;
+            // }
+            // th:nth-child(4), td:nth-child(4){
+            //   width:83px;
+            //   max-width:83px;
+            //   text-align: center;
+            // }
+            // th:nth-child(5), td:nth-child(5){
+            //   width:83px;
+            //   max-width:83px;
+            //   text-align: center;
+            // }
+            // th:nth-child(6), td:nth-child(6){
+            //   width:83px;
+            //   max-width:83px;
+            //   text-align: center;
+            // }
+            // th:nth-child(7), td:nth-child(7){
+            //     width:97px;
+            //     max-width:97px;
+            //     text-align: center;
+            // }
+            // th:nth-child(8), td:nth-child(8){
+            //   width:97px;
+            //   max-width:97px;
+            //   text-align: center;
+            // }
+            // th:nth-child(9), td:nth-child(9){
+            //   width:97px;
+            //   max-width:97px;
+            //   text-align: center;
+            // }
+            // th:nth-child(10), td:nth-child(10){
+            //   width:115px;
+            //   max-width:115px;
+            //   text-align: center;
+            // }
+            // th:nth-child(11), td:nth-child(11){
+            //   width:97px;
+            //   max-width:97px;
+            //   text-align: center;
+            // }
+            // th:nth-child(12), td:nth-child(12){
+            //   width:148px;
+            //   max-width:148px;
+            //   text-align: center;
+            // }
+            // th:nth-child(13), td:nth-child(13){
+            //   width:97px;
+            //   max-width:97px;
+            //   text-align: center;
+            // }
             th:last-child{
+              display: flex;
+              align-items: center;
+              float: right;
               font-size: 23px;
               font-weight: bold;
               cursor: pointer;
@@ -2064,14 +2079,13 @@
                 overflow: hidden;
                 div{
                     overflow: hidden;
-                            max-height: 64px;
+                    max-height: 64px;
                 }
             }
             tbody{
                 display: block;
-                height: 631px;
-                width: 1448px;
-                overflow: scroll;
+                height: 598px;
+                width: 1431px;
                 tr{
                     // cursor: pointer;
                     height:  64px;
@@ -2089,7 +2103,8 @@
                         }
                     }
                     td:last-child{
-                      width: 10px;
+                        width: 16px;
+                        display: flex;
                     }
                     &.selected{
                         background-color: rgba(23, 145, 255, 0.75);
@@ -2098,6 +2113,38 @@
                     }
                 }
             }
+            .pagination {
+                display: inline-block;
+            }
+
+            .pagination button {
+                padding: 0;
+                border: none;
+                background: none;
+                color: @color-black-40;
+                float: left;
+                padding: 8px 16px;
+                text-decoration: none;
+                border: 1px solid @color-whitegrey;
+                margin: 0 4px;
+            }
+            .pagination button:first-child {
+                border-top-left-radius: 5px;
+                border-bottom-left-radius: 5px;
+            }
+
+            .pagination button:last-child {
+                border-top-right-radius: 5px;
+                border-bottom-right-radius: 5px;
+            }
+            .pagination button.active {
+                background-color: @color-warm-grey;
+                color: @color-white;
+            }
+
+            .pagination button:hover:not(.active) {
+                background-color: @color-whitegrey;
+            }
             .body-left-center-left{
               width: 360px;
               height: 616px;
@@ -2405,7 +2452,7 @@
                 width: 253px;
                 .mx-input{
                   width: 253px;
-                  height: 50px;
+                  height: 48px;
                   border-radius: 2px;
                   box-shadow: 0 1px 2px 0 @color-black-40;
                   border: solid 1px @color-silver;                     
@@ -2421,8 +2468,16 @@
               flex-flow: column;
               height: 70px;
               margin-right: 24px;
+              label{
+                font-size: 14px;
+                line-height: 1.29;
+                color: @color-warm-grey;
+              }
               label.intervaldate{
                 width: 253px;
+                font-size: 14px;
+                line-height: 1.29;
+                color: @color-warm-grey;
               }
               select{
                 width: 192px;
@@ -2439,7 +2494,7 @@
                 display: flex;
                 flex-flow: row;
                 input[type="time"]{
-                  width: 112px;
+                  width: 96px;
                   height: 48px;
                   border-radius: 2px;
                   box-shadow: inset 0 1px 3px 0 @color-black-50;
@@ -2447,6 +2502,7 @@
                   line-height: 1.11;
                   color: @color-silver;
                   border: none;
+                  padding-left: 16px;
                 }
                 input[type="time"]:first-child{
                   margin-right: 16px;
@@ -2459,7 +2515,7 @@
               }
               input.program{
                 width: 256px;
-                height: 48px;
+                height: 46px;
                 border-radius: 2px;
                 box-shadow: inset 0 1px 3px 0 @color-black-50;
                 font-size: 18px;
@@ -2494,24 +2550,6 @@
                   color: @color-warm-grey;
                 }
               }
-              .selectBox{
-                  position: relative;
-                  width: 144px;
-              }
-              .selectBox select{
-                width: 100%;
-                padding: 8px;
-                cursor: pointer;
-                height: 49px;
-                font-size: 18px;
-                line-height: 1.11;
-                color: @color-greyish-brown;
-                box-shadow: 0 1px 2px @color-black-40;
-                border-radius: 2px;
-                  option{
-                      display: none;
-                  }
-              }
               .selectBoxU{
                 position: relative;
                 width: 192px;
@@ -2520,7 +2558,7 @@
               width: 100%;
               padding: 8px;
               cursor: pointer;
-              height: 49px;
+              height: 48px;
               font-size: 18px;
               line-height: 1.11;
               color: @color-greyish-brown;
@@ -2595,72 +2633,78 @@
               background: #FFF
             }
 
-            th:nth-child(1), td:nth-child(1){
-                width:162px;
-                max-width: 162px;
-                text-align: center;
-            }  
-            th:nth-child(2), td:nth-child(2){
-              width:139px;
-              max-width: 139px;
-              text-align: center;
-            }
-            th:nth-child(3), td:nth-child(3){
-                width:83px;
-                max-width:83px;
-                text-align: center;
-            }
-            th:nth-child(4), td:nth-child(4){
-              width:83px;
-              max-width:83px;
-              text-align: center;
-            }
-            th:nth-child(5), td:nth-child(5){
-              width:83px;
-              max-width:83px;
-              text-align: center;
-            }
-            th:nth-child(6), td:nth-child(6){
-              width:83px;
-              max-width:83px;
-              text-align: center;
-            }
-            th:nth-child(7), td:nth-child(7){
-                width:97px;
-                max-width:97px;
-                text-align: center;
-            }
-            th:nth-child(8), td:nth-child(8){
-              width:97px;
-              max-width:97px;
-              text-align: center;
-            }
-            th:nth-child(9), td:nth-child(9){
-              width:97px;
-              max-width:97px;
-              text-align: center;
-            }
-            th:nth-child(10), td:nth-child(10){
-              width:115px;
-              max-width:115px;
-              text-align: center;
-            }
-            th:nth-child(11), td:nth-child(11){
-              width:97px;
-              max-width:97px;
-              text-align: center;
-            }
-            th:nth-child(12), td:nth-child(12){
-              width:148px;
-              max-width:148px;
-              text-align: center;
-            }
-            th:nth-child(13), td:nth-child(13){
-              width:97px;
-              max-width:97px;
-              text-align: center;
+            th, td{
+                width: auto;
             }
+            // th:nth-child(1), td:nth-child(1){
+            //     width:162px;
+            //     max-width: 162px;
+            //     text-align: center;
+            // }  
+            // th:nth-child(2), td:nth-child(2){
+            //   width:139px;
+            //   max-width: 139px;
+            //   text-align: center;
+            // }
+            // th:nth-child(3), td:nth-child(3){
+            //     width:83px;
+            //     max-width:83px;
+            //     text-align: center;
+            // }
+            // th:nth-child(4), td:nth-child(4){
+            //   width:83px;
+            //   max-width:83px;
+            //   text-align: center;
+            // }
+            // th:nth-child(5), td:nth-child(5){
+            //   width:83px;
+            //   max-width:83px;
+            //   text-align: center;
+            // }
+            // th:nth-child(6), td:nth-child(6){
+            //   width:83px;
+            //   max-width:83px;
+            //   text-align: center;
+            // }
+            // th:nth-child(7), td:nth-child(7){
+            //     width:97px;
+            //     max-width:97px;
+            //     text-align: center;
+            // }
+            // th:nth-child(8), td:nth-child(8){
+            //   width:97px;
+            //   max-width:97px;
+            //   text-align: center;
+            // }
+            // th:nth-child(9), td:nth-child(9){
+            //   width:97px;
+            //   max-width:97px;
+            //   text-align: center;
+            // }
+            // th:nth-child(10), td:nth-child(10){
+            //   width:115px;
+            //   max-width:115px;
+            //   text-align: center;
+            // }
+            // th:nth-child(11), td:nth-child(11){
+            //   width:97px;
+            //   max-width:97px;
+            //   text-align: center;
+            // }
+            // th:nth-child(12), td:nth-child(12){
+            //   width:148px;
+            //   max-width:148px;
+            //   text-align: center;
+            // }
+            // th:nth-child(13), td:nth-child(13){
+            //   width:97px;
+            //   max-width:97px;
+            //   text-align: center;
+            // }
             th:last-child{
+              display: flex;
+              align-items: center;
+              float: right;
               font-size: 23px;
               font-weight: bold;
               cursor: pointer;
@@ -2669,14 +2713,13 @@
                 overflow: hidden;
                 div{
                     overflow: hidden;
-                            max-height: 64px;
+                    max-height: 64px;
                 }
             }
             tbody{
                 display: block;
-                height: 631px;
-                width: 1448px;
-                overflow: scroll;
+                height: 598px;
+                width: 1431px;
                 tr{
                     // cursor: pointer;
                     height:  64px;
@@ -2694,7 +2737,8 @@
                         }
                     }
                     td:last-child{
-                      width: 10px;
+                        width: 16px;
+                        display: flex;
                     }
                     &.selected{
                         background-color: rgba(23, 145, 255, 0.75);
@@ -2703,6 +2747,38 @@
                     }
                 }
             }
+            .pagination {
+                display: inline-block;
+            }
+
+            .pagination button {
+                padding: 0;
+                border: none;
+                background: none;
+                color: @color-black-40;
+                float: left;
+                padding: 8px 16px;
+                text-decoration: none;
+                border: 1px solid @color-whitegrey;
+                margin: 0 4px;
+            }
+            .pagination button:first-child {
+                border-top-left-radius: 5px;
+                border-bottom-left-radius: 5px;
+            }
+
+            .pagination button:last-child {
+                border-top-right-radius: 5px;
+                border-bottom-right-radius: 5px;
+            }
+            .pagination button.active {
+                background-color: @color-warm-grey;
+                color: @color-white;
+            }
+
+            .pagination button:hover:not(.active) {
+                background-color: @color-whitegrey;
+            }
             .body-left-center-left{
               width: 360px;
               height: 616px;
@@ -3588,6 +3664,7 @@
     }
 }
 
+
 .card-report-machine-status{
     width: 100%;
     height: 100%;
@@ -3612,7 +3689,7 @@
                 width: 253px;
                 .mx-input{
                   width: 253px;
-                  height: 50px;
+                  height: 48px;
                   border-radius: 2px;
                   box-shadow: 0 1px 2px 0 @color-black-40;
                   border: solid 1px @color-silver;                     
@@ -3628,8 +3705,16 @@
               flex-flow: column;
               height: 70px;
               margin-right: 24px;
+              label{
+                font-size: 14px;
+                line-height: 1.29;
+                color: @color-warm-grey;
+              }
               label.intervaldate{
                 width: 253px;
+                font-size: 14px;
+                line-height: 1.29;
+                color: @color-warm-grey;
               }
               select{
                 width: 192px;
@@ -3646,7 +3731,7 @@
                 display: flex;
                 flex-flow: row;
                 input[type="time"]{
-                  width: 112px;
+                  width: 96px;
                   height: 48px;
                   border-radius: 2px;
                   box-shadow: inset 0 1px 3px 0 @color-black-50;
@@ -3654,6 +3739,7 @@
                   line-height: 1.11;
                   color: @color-silver;
                   border: none;
+                  padding-left: 16px;
                 }
                 input[type="time"]:first-child{
                   margin-right: 16px;
@@ -3666,7 +3752,7 @@
               }
               input.program{
                 width: 256px;
-                height: 48px;
+                height: 46px;
                 border-radius: 2px;
                 box-shadow: inset 0 1px 3px 0 @color-black-50;
                 font-size: 18px;
@@ -3701,24 +3787,6 @@
                   color: @color-warm-grey;
                 }
               }
-              .selectBox{
-                  position: relative;
-                  width: 144px;
-              }
-              .selectBox select{
-                width: 100%;
-                padding: 8px;
-                cursor: pointer;
-                height: 49px;
-                font-size: 18px;
-                line-height: 1.11;
-                color: @color-greyish-brown;
-                box-shadow: 0 1px 2px @color-black-40;
-                border-radius: 2px;
-                  option{
-                      display: none;
-                  }
-              }
               .selectBoxU{
                 position: relative;
                 width: 192px;
@@ -3727,7 +3795,7 @@
               width: 100%;
               padding: 8px;
               cursor: pointer;
-              height: 49px;
+              height: 48px;
               font-size: 18px;
               line-height: 1.11;
               color: @color-greyish-brown;
@@ -3802,72 +3870,78 @@
               background: #FFF
             }
 
-            th:nth-child(1), td:nth-child(1){
-                width:162px;
-                max-width: 162px;
-                text-align: center;
-            }  
-            th:nth-child(2), td:nth-child(2){
-              width:139px;
-              max-width: 139px;
-              text-align: center;
-            }
-            th:nth-child(3), td:nth-child(3){
-                width:83px;
-                max-width:83px;
-                text-align: center;
-            }
-            th:nth-child(4), td:nth-child(4){
-              width:83px;
-              max-width:83px;
-              text-align: center;
-            }
-            th:nth-child(5), td:nth-child(5){
-              width:83px;
-              max-width:83px;
-              text-align: center;
-            }
-            th:nth-child(6), td:nth-child(6){
-              width:83px;
-              max-width:83px;
-              text-align: center;
-            }
-            th:nth-child(7), td:nth-child(7){
-                width:97px;
-                max-width:97px;
-                text-align: center;
-            }
-            th:nth-child(8), td:nth-child(8){
-              width:97px;
-              max-width:97px;
-              text-align: center;
-            }
-            th:nth-child(9), td:nth-child(9){
-              width:97px;
-              max-width:97px;
-              text-align: center;
-            }
-            th:nth-child(10), td:nth-child(10){
-              width:115px;
-              max-width:115px;
-              text-align: center;
-            }
-            th:nth-child(11), td:nth-child(11){
-              width:97px;
-              max-width:97px;
-              text-align: center;
-            }
-            th:nth-child(12), td:nth-child(12){
-              width:148px;
-              max-width:148px;
-              text-align: center;
-            }
-            th:nth-child(13), td:nth-child(13){
-              width:97px;
-              max-width:97px;
-              text-align: center;
+            th, td{
+                width: auto;
             }
+            // th:nth-child(1), td:nth-child(1){
+            //     width:162px;
+            //     max-width: 162px;
+            //     text-align: center;
+            // }  
+            // th:nth-child(2), td:nth-child(2){
+            //   width:139px;
+            //   max-width: 139px;
+            //   text-align: center;
+            // }
+            // th:nth-child(3), td:nth-child(3){
+            //     width:83px;
+            //     max-width:83px;
+            //     text-align: center;
+            // }
+            // th:nth-child(4), td:nth-child(4){
+            //   width:83px;
+            //   max-width:83px;
+            //   text-align: center;
+            // }
+            // th:nth-child(5), td:nth-child(5){
+            //   width:83px;
+            //   max-width:83px;
+            //   text-align: center;
+            // }
+            // th:nth-child(6), td:nth-child(6){
+            //   width:83px;
+            //   max-width:83px;
+            //   text-align: center;
+            // }
+            // th:nth-child(7), td:nth-child(7){
+            //     width:97px;
+            //     max-width:97px;
+            //     text-align: center;
+            // }
+            // th:nth-child(8), td:nth-child(8){
+            //   width:97px;
+            //   max-width:97px;
+            //   text-align: center;
+            // }
+            // th:nth-child(9), td:nth-child(9){
+            //   width:97px;
+            //   max-width:97px;
+            //   text-align: center;
+            // }
+            // th:nth-child(10), td:nth-child(10){
+            //   width:115px;
+            //   max-width:115px;
+            //   text-align: center;
+            // }
+            // th:nth-child(11), td:nth-child(11){
+            //   width:97px;
+            //   max-width:97px;
+            //   text-align: center;
+            // }
+            // th:nth-child(12), td:nth-child(12){
+            //   width:148px;
+            //   max-width:148px;
+            //   text-align: center;
+            // }
+            // th:nth-child(13), td:nth-child(13){
+            //   width:97px;
+            //   max-width:97px;
+            //   text-align: center;
+            // }
             th:last-child{
+              display: flex;
+              align-items: center;
+              float: right;
               font-size: 23px;
               font-weight: bold;
               cursor: pointer;
@@ -3876,16 +3950,15 @@
                 overflow: hidden;
                 div{
                     overflow: hidden;
-                            max-height: 64px;
+                    max-height: 64px;
                 }
             }
             tbody{
                 display: block;
-                height: 631px;
-                width: 1448px;
-                overflow: scroll;
+                height: 598px;
+                width: 1431px;
                 tr{
-                    cursor: pointer;
+                    // cursor: pointer;
                     height:  64px;
                     padding: 10px;
                     font-size: 14px;
@@ -3901,7 +3974,8 @@
                         }
                     }
                     td:last-child{
-                      width: 10px;
+                        width: 16px;
+                        display: flex;
                     }
                     &.selected{
                         background-color: rgba(23, 145, 255, 0.75);
@@ -3910,6 +3984,38 @@
                     }
                 }
             }
+            .pagination {
+                display: inline-block;
+            }
+
+            .pagination button {
+                padding: 0;
+                border: none;
+                background: none;
+                color: @color-black-40;
+                float: left;
+                padding: 8px 16px;
+                text-decoration: none;
+                border: 1px solid @color-whitegrey;
+                margin: 0 4px;
+            }
+            .pagination button:first-child {
+                border-top-left-radius: 5px;
+                border-bottom-left-radius: 5px;
+            }
+
+            .pagination button:last-child {
+                border-top-right-radius: 5px;
+                border-bottom-right-radius: 5px;
+            }
+            .pagination button.active {
+                background-color: @color-warm-grey;
+                color: @color-white;
+            }
+
+            .pagination button:hover:not(.active) {
+                background-color: @color-whitegrey;
+            }
             .body-left-center-left{
               width: 360px;
               height: 616px;
@@ -4189,4 +4295,610 @@
           }
         }
     }
-}
\ No newline at end of file
+}
+
+
+/* Versione zeplin machine status non cancellare*/
+
+// .card-report-machine-status{
+//     width: 100%;
+//     height: 100%;
+//     display: flex;
+//     .reports-box-body-left {
+//         width: 1455px;
+//         height: 100%;
+//         .body-left-header, .body-left-header-machinestatus{
+//             width: 100%;
+//             height: 70px;
+//             display: flex;
+//             flex-flow: row;
+//             margin-top: 18px;
+//             border-right: solid 2px @color-whitegrey;
+//             position: relative;
+//             margin-bottom: 16px;
+//             .mx-datepicker-range{
+//               width: 170px;
+//               height: 70px;
+//               .mx-input-wrapper{
+//                 margin-right: 24px;
+//                 width: 253px;
+//                 .mx-input{
+//                   width: 253px;
+//                   height: 50px;
+//                   border-radius: 2px;
+//                   box-shadow: 0 1px 2px 0 @color-black-40;
+//                   border: solid 1px @color-silver;                     
+//                   font-size: 18px;
+//                   line-height: 1.11;
+//                   color: @color-greyish-brown;
+//                   padding-left: 16px;
+//                 }
+//               }
+//             }
+//             > div {
+//               display: flex;
+//               flex-flow: column;
+//               height: 70px;
+//               margin-right: 24px;
+//               label.intervaldate{
+//                 width: 253px;
+//               }
+//               select{
+//                 width: 192px;
+//                 height: 48px;
+//                 border-radius: 2px;
+//                 box-shadow: 0 1px 2px 0 @color-black-40;
+//                 border: solid 1px @color-silver;                     
+//                 font-size: 18px;
+//                 line-height: 1.11;
+//                 color: @color-greyish-brown;
+//                 padding-left: 16px; 
+//               }
+//               div.interval-time{
+//                 display: flex;
+//                 flex-flow: row;
+//                 input[type="time"]{
+//                   width: 112px;
+//                   height: 48px;
+//                   border-radius: 2px;
+//                   box-shadow: inset 0 1px 3px 0 @color-black-50;
+//                   font-size: 18px;
+//                   line-height: 1.11;
+//                   color: @color-silver;
+//                   border: none;
+//                 }
+//                 input[type="time"]:first-child{
+//                   margin-right: 16px;
+//                 }
+//                 input[type="time"]::-webkit-inner-spin-button {
+//                   -webkit-appearance: none;
+//                   display: none;
+//                   border:none;
+//                 }
+//               }
+//               input.program{
+//                 width: 256px;
+//                 height: 48px;
+//                 border-radius: 2px;
+//                 box-shadow: inset 0 1px 3px 0 @color-black-50;
+//                 font-size: 18px;
+//                 line-height: 1.11;
+//                 color: @color-silver;
+//                 padding-left: 16px;
+//                 border: none;
+//               }
+//               .reports-select-operator{
+//                 width: 192px;
+//                 height: 48px;
+//                 border-radius: 2px;
+//                 box-shadow: 0 1px 2px 0 @color-black-40;
+//                 font-size: 18px;
+//                 line-height: 1.11;
+//                 color: @color-greyish-brown;
+//               }
+//               .reports-select-shift{
+//                 width: 144px;
+//                 height: 48px;
+//                 border-radius: 2px;
+//                 box-shadow: 0 1px 2px 0 @color-black-40;
+//               }
+//             }
+
+
+//             .multiselect{
+//                 z-index: 100;
+//                 label{
+//                   font-size: 14px;
+//                   line-height: 1.29;
+//                   color: @color-warm-grey;
+//                 }
+//               }
+//               .selectBox{
+//                   position: relative;
+//                   width: 144px;
+//               }
+//               .selectBox select{
+//                 width: 100%;
+//                 padding: 8px;
+//                 cursor: pointer;
+//                 height: 49px;
+//                 font-size: 18px;
+//                 line-height: 1.11;
+//                 color: @color-greyish-brown;
+//                 box-shadow: 0 1px 2px @color-black-40;
+//                 border-radius: 2px;
+//                   option{
+//                       display: none;
+//                   }
+//               }
+//               .selectBoxU{
+//                 position: relative;
+//                 width: 192px;
+//             }
+//             .selectBoxU select{
+//               width: 100%;
+//               padding: 8px;
+//               cursor: pointer;
+//               height: 49px;
+//               font-size: 18px;
+//               line-height: 1.11;
+//               color: @color-greyish-brown;
+//               box-shadow: 0 1px 2px @color-black-40;
+//               border-radius: 2px;
+//                 option{
+//                     display: none;
+//                 }
+//             }
+//               .overSelect{
+//                   position: absolute;
+//                   left: 0;
+//                   right: 0;
+//                   top: 0;
+//                   bottom: 0;
+//               }
+//               .checkboxes, .checkboxesU{
+//                   display: none;
+//               }
+//               .checkboxesView, .checkboxesViewUser{
+//                   width: calc(~"100% - 8px");;
+//                   background-color: #fff;
+//                   display: block;
+//                   z-index: 100;
+//                   padding: 6px 4px;
+//                   box-shadow: 0 3px 5px 0 @color-black-40;
+//                   label{
+//                       font-size: 18px;
+//                       margin:2px;
+//                       display: flex;
+//                       flex-flow: row;
+//                   }
+//                   .label-state{
+//                       margin-left: 12px;
+//                   }
+//               }
+//         }
+//         .body-left-header-machinestatus{
+//           border-right: 0px;
+//         }
+//         .body-left-center {
+//           width: 1448px;
+//           max-height: 681px;
+//           display: flex;
+//           flex-flow: column;
+//           .body-left-center-container{
+//             width: 100%;
+//             table{
+//               table-layout: fixed;
+//               width: 100%;
+//               border-collapse: collapse;
+//             }
+//             thead{
+//                 border-bottom: solid 2px @color-label-grey;
+//                 font-size: 14px;
+//                 line-height: 1.29;
+//                 color: @color-darkish-blue;
+//                 display: block;
+//                 width: 1431px;
+//             }
+//             thead tr th{
+//                 height: 48px;
+//             }
+//             tr:nth-child(even) {background: #FFF }
+//             tr:nth-child(odd) {background: #dddddd }
+
+//             // thead tr{
+//             //   width: 1448px;
+//             // }
+
+//             thead tr:nth-child(odd){
+//               background: #FFF
+//             }
+
+//             th:nth-child(1), td:nth-child(1){
+//                 width:162px;
+//                 max-width: 162px;
+//                 text-align: center;
+//             }  
+//             th:nth-child(2), td:nth-child(2){
+//               width:139px;
+//               max-width: 139px;
+//               text-align: center;
+//             }
+//             th:nth-child(3), td:nth-child(3){
+//                 width:83px;
+//                 max-width:83px;
+//                 text-align: center;
+//             }
+//             th:nth-child(4), td:nth-child(4){
+//               width:83px;
+//               max-width:83px;
+//               text-align: center;
+//             }
+//             th:nth-child(5), td:nth-child(5){
+//               width:83px;
+//               max-width:83px;
+//               text-align: center;
+//             }
+//             th:nth-child(6), td:nth-child(6){
+//               width:83px;
+//               max-width:83px;
+//               text-align: center;
+//             }
+//             th:nth-child(7), td:nth-child(7){
+//                 width:97px;
+//                 max-width:97px;
+//                 text-align: center;
+//             }
+//             th:nth-child(8), td:nth-child(8){
+//               width:97px;
+//               max-width:97px;
+//               text-align: center;
+//             }
+//             th:nth-child(9), td:nth-child(9){
+//               width:97px;
+//               max-width:97px;
+//               text-align: center;
+//             }
+//             th:nth-child(10), td:nth-child(10){
+//               width:115px;
+//               max-width:115px;
+//               text-align: center;
+//             }
+//             th:nth-child(11), td:nth-child(11){
+//               width:97px;
+//               max-width:97px;
+//               text-align: center;
+//             }
+//             th:nth-child(12), td:nth-child(12){
+//               width:148px;
+//               max-width:148px;
+//               text-align: center;
+//             }
+//             th:nth-child(13), td:nth-child(13){
+//               width:97px;
+//               max-width:97px;
+//               text-align: center;
+//             }
+//             th:last-child{
+//               font-size: 23px;
+//               font-weight: bold;
+//               cursor: pointer;
+//             }
+//             th, td{
+//                 overflow: hidden;
+//                 div{
+//                     overflow: hidden;
+//                             max-height: 64px;
+//                 }
+//             }
+//             tbody{
+//                 display: block;
+//                 height: 631px;
+//                 width: 1448px;
+//                 overflow: scroll;
+//                 tr{
+//                     cursor: pointer;
+//                     height:  64px;
+//                     padding: 10px;
+//                     font-size: 14px;
+//                     line-height: 1.29;
+//                     color: @color-greyish-brown;
+//                     td{
+//                         text-align: center;
+//                         &.green{
+//                           color: @color-apple-green;
+//                         }
+//                         &.red{
+//                           color: @color-scarlet;
+//                         }
+//                     }
+//                     td:last-child{
+//                       width: 10px;
+//                     }
+//                     &.selected{
+//                         background-color: rgba(23, 145, 255, 0.75);
+//                         color: @color-white;
+//                         font-weight: 600;
+//                     }
+//                 }
+//             }
+//             .body-left-center-left{
+//               width: 360px;
+//               height: 616px;
+//               display: flex;
+//               flex-flow: column;
+//               align-items: center;
+//               border: solid 1px @color-whitegrey;
+//               overflow-y: auto;
+//               .multiselect{
+//                 z-index: 100;
+//                 margin-bottom: 24px;
+//                 margin-top: 16px;
+//                 label{
+//                   font-size: 14px;
+//                   line-height: 1.29;
+//                   color: @color-warm-grey;
+//                 }
+//               }
+//               .selectBox{
+//                   position: relative;
+//                   width: 328px;
+//                   height: 64px;
+//               }
+//               .selectBox select{
+//                 width: 100%;
+//                 padding: 8px;
+//                 cursor: pointer;
+//                 height: 64px;
+//                 font-size: 18px;
+//                 line-height: 1.11;
+//                 color: @color-greyish-brown;
+//                 margin-bottom: 0;
+//                 margin-top: 0;
+//                   option{
+//                       display: none;
+//                   }
+//               }
+//               .overSelect{
+//                 position: absolute;
+//                 left: 0;
+//                 right: 0;
+//                 top: 0;
+//                 bottom: 0;
+//             }
+//             .checkboxes, .checkboxesU{
+//                 display: none;
+//             }
+//             .checkboxesView, .checkboxesViewUser{
+//                 width: calc(~"100% - 8px");;
+//                 background-color: #fff;
+//                 display: block;
+//                 z-index: 100;
+//                 padding: 6px 4px;
+//                 box-shadow: 0 3px 5px 0 @color-black-40;
+//                 label{
+//                     font-size: 18px;
+//                     margin:2px;
+//                     display: flex;
+//                     flex-flow: row;
+//                 }
+//                 .label-state{
+//                     margin-left: 12px;
+//                 }
+//             }
+//               div{
+//                 select{
+//                   width: 328px;
+//                   height: 48px;
+//                   border-radius: 2px;
+//                   box-shadow: 0 1px 2px 0 @color-black-40;
+//                   margin-bottom: 24px;
+//                   margin-top: 16px;
+//                   padding-left: 16px;
+//                   font-size: 18px;
+//                   line-height: 1.11;
+//                   color: @color-greyish-brown;
+//                 }
+//                 .accordion-dropdown{
+//                   header {
+//                     height: 64px;
+//                     width: 312px;
+//                     border-radius: 2px;
+//                     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+//                     display: flex;
+//                     justify-content: space-between;
+//                     align-items: center;
+//                     color: @color-darkish-blue;
+//                     line-height: 1;
+//                     font-size: 18px;
+//                     padding-left: 16px;
+//                     cursor: pointer;
+//                     span {
+//                         width: 100%;
+//                     }
+//                     .expander {
+//                         margin: 0 12px;
+//                         line-height: 28px;
+//                         height: 28px;
+//                         width: 28px;
+//                         font-size: 28px;
+//                     }
+//                   }
+//                   section {
+//                     width: 328px;
+//                     min-height: 0;
+//                     max-height: 0;
+//                     transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
+//                     overflow: hidden;
+//                     &.expanded {
+//                       min-height: 64px;
+//                       background-color: rgba(255, 255, 255, 0.1);
+//                       max-height: 1000px;
+//                     }
+//                     .item {
+//                         height: 64px;
+//                         width: 100%;
+//                         line-height: 64px;
+//                         background-color: @color-white2;
+//                     }
+            
+//                     .dropdown{
+//                       // background-color: @color-white2;
+//                       height: 100%;
+//                       margin-top: 2px;
+//                       .filename{
+//                           display: flex;
+//                           height: 64px;
+//                           align-items: center;
+//                           cursor: pointer;
+//                           i{
+//                             color: @color-cyan-blue;
+//                             margin: 0 20px 0 20px;
+//                           }
+//                           span{
+//                               width: 100%;
+//                               font-size: 18px;
+//                               line-height: 1;
+//                               color: @color-darkish-blue;
+//                           }
+            
+//                           &.selected{
+//                             span, i{
+//                               color:#4b4b4b;
+//                             }
+//                           }
+//                       }
+//                       .filename.selected{
+//                           background-color: rgba(255, 255, 255, 0.8);
+//                       }
+                      
+//                     } 
+//                   }
+//                 }
+//               }
+//             }
+//           }
+
+//           .body-left-center-footer{
+//             height: 64px;
+//             width: 100%;
+//             border: solid 1px @color-whitegrey;
+//             .header-title{
+//               width: 360px;
+//               height: 64px;
+//               display: flex;
+//               flex-flow: column;
+//               align-items: center;
+//               justify-content: center;
+//               .title{
+//                 font-size: 14px;
+//                 color: @color-warm-grey;
+//               }
+//               .data-temporal{
+//                 font-size: 18px;
+//                 line-height: 1;
+//                 color: @color-greyish-brown;
+//               }
+//             }
+//           }
+//         }
+//     }
+//     .reports-box-body-right {
+//         width: 327px;
+//         height: 100%;
+//         .body-right-header{
+//           width: 100%;
+//           height: 70px;
+//           display: flex;
+//           flex-flow: row;
+//           margin-top: 18px;
+//           justify-content: flex-end;
+//           .body-right-header-left {
+//             width: 158px;
+//             height: 100%;
+//             display: flex;
+//             align-items: center;
+//             justify-content: center;
+//             border-right: solid 2px @color-whitegrey;
+//             button{
+//               width: 48px;
+//               height: 48px;
+//               border-radius: 2px;
+//               box-shadow: 0 1px 2px 0 @color-black-40;
+//               background-image: linear-gradient(to bottom,@color-white2, @color-silver);
+//               border: none;
+//             }
+//             button.active{
+//               width: 48px;
+//               height: 48px;
+//               border-radius: 2px;
+//               box-shadow: inset 0 1px 3px 0 @color-black-40;
+//               background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+//               color: @color-clear-blue;
+//               border: none;
+//             }
+//           }
+//           .body-right-header-right {
+//             width: calc(~"100% - 158px");
+//             height: 100%;
+//             display: flex;
+//             align-items: center;
+//             justify-content: center;
+//             button{
+//               width: 48px;
+//               height: 48px;
+//               border-radius: 2px;
+//               box-shadow: 0 1px 2px 0 @color-black-40;
+//               background-image: linear-gradient(to bottom,@color-white2, @color-silver);
+//               border:none;
+//             }
+//             button:first-child{
+//               margin-right: 16px;
+//             }
+//             button:active{
+//               width: 48px;
+//               height: 48px;
+//               border-radius: 2px;
+//               box-shadow: inset 0 1px 3px 0 @color-black-40;
+//               background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+//               border: none;
+//             }
+//           }
+//         }
+//         .body-right-card{
+//           width: 100%;
+//           height: calc(~"100% - 70px");
+//           display: flex;
+//           flex-flow: column;
+//           align-items: center;
+//           .card-report{
+//             > section {
+//               display: flex;
+//               align-items: center;
+//               justify-content: center; 
+//               .rectangle_gray{
+//                 width: 256px;
+//                 height: 120px;
+//                 border-radius: 2px;
+//                 display: flex;
+//                 flex-flow: column;
+//                 align-items: center;
+//                 justify-content: center;
+//                 background-color: @color-white2;
+//                 label{
+//                   font-size: 18px;
+//                   color: @color-warm-grey;
+//                   margin-bottom: 30px;
+//                 }
+//                 span{
+//                   font-size: 48px;
+//                   font-weight: bold;
+//                   line-height: 0.38;
+//                   color: @color-clear-blue;
+//                 }
+//               }
+//             }
+//           }
+//         }
+//     }
+// }
\ No newline at end of file
diff --git a/Step/wwwroot/assets/styles/base/report.less b/Step/wwwroot/assets/styles/base/report.less
index c5b37d54..609e6b21 100644
--- a/Step/wwwroot/assets/styles/base/report.less
+++ b/Step/wwwroot/assets/styles/base/report.less
@@ -81,631 +81,6 @@
             padding: 0 24px 24px 24px;
             display: flex;
             flex-flow: row;
-            .reports-box-body-left {
-                width: 1455px;
-                height: 100%;
-                .body-left-header, .body-left-header-machinestatus{
-                    width: 100%;
-                    height: 70px;
-                    display: flex;
-                    flex-flow: row;
-                    margin-top: 18px;
-                    border-right: solid 2px @color-whitegrey;
-                    position: relative;
-                    margin-bottom: 16px;
-                    .mx-datepicker-range{
-                      width: 170px;
-                      height: 70px;
-                      .mx-input-wrapper{
-                        margin-right: 24px;
-                        width: 253px;
-                        .mx-input{
-                          width: 253px;
-                          height: 48px;
-                          border-radius: 2px;
-                          box-shadow: 0 1px 2px 0 @color-black-40;
-                          border: solid 1px @color-silver;                     
-                          font-size: 18px;
-                          line-height: 1.11;
-                          color: @color-greyish-brown;
-                          padding-left: 16px;
-                        }
-                      }
-                    }
-                    > div {
-                      display: flex;
-                      flex-flow: column;
-                      height: 70px;
-                      margin-right: 24px;
-                      label.intervaldate{
-                        width: 253px;
-                      }
-                      select{
-                        width: 192px;
-                        height: 48px;
-                        border-radius: 2px;
-                        box-shadow: 0 1px 2px 0 @color-black-40;
-                        border: solid 1px @color-silver;                     
-                        font-size: 18px;
-                        line-height: 1.11;
-                        color: @color-greyish-brown;
-                        padding-left: 16px; 
-                      }
-                      div.interval-time{
-                        display: flex;
-                        flex-flow: row;
-                        input[type="time"]{
-                          width: 112px;
-                          height: 48px;
-                          border-radius: 2px;
-                          box-shadow: inset 0 1px 3px 0 @color-black-50;
-                          font-size: 18px;
-                          line-height: 1.11;
-                          color: @color-silver;
-                          border: none;
-                        }
-                        input[type="time"]:first-child{
-                          margin-right: 16px;
-                        }
-                        input[type="time"]::-webkit-inner-spin-button {
-                          -webkit-appearance: none;
-                          display: none;
-                          border:none;
-                        }
-                      }
-                      input.program{
-                        width: 256px;
-                        height: 46px;
-                        border-radius: 2px;
-                        box-shadow: inset 0 1px 3px 0 @color-black-50;
-                        font-size: 18px;
-                        line-height: 1.11;
-                        color: @color-silver;
-                        padding-left: 16px;
-                        border: none;
-                      }
-                      .reports-select-operator{
-                        width: 192px;
-                        height: 48px;
-                        border-radius: 2px;
-                        box-shadow: 0 1px 2px 0 @color-black-40;
-                        font-size: 18px;
-                        line-height: 1.11;
-                        color: @color-greyish-brown;
-                      }
-                      .reports-select-shift{
-                        width: 144px;
-                        height: 48px;
-                        border-radius: 2px;
-                        box-shadow: 0 1px 2px 0 @color-black-40;
-                      }
-                      label.label_advanced_filters{
-                        margin-top: 35px; 
-                        font-size: 18px;
-                        line-height: 1;
-                        color: @color-darkish-blue;
-                        cursor: pointer;
-                        span{
-                          text-decoration-line: underline;
-                          text-decoration-color: @color-darkish-blue;
-                          text-decoration-style: solid;
-                        }
-                      }
-                    }
-                    div.advanced-filters{
-                      z-index: 100;
-                      height: 80px;
-                      width: 100%;
-                      display: flex;
-                      flex-flow: row;
-                      background-color: @color-background-white;
-                      position: absolute;
-                      top: 80px;
-                      > div {
-                        display: flex;
-                        flex-flow: column;
-                        height: 70px;
-                        margin-right: 24px;
-                        label.intervaldate{
-                          width: 253px;
-                        }
-                        select{
-                          width: 192px;
-                          height: 48px;
-                          border-radius: 2px;
-                          box-shadow: 0 1px 2px 0 @color-black-40;
-                          border: solid 1px @color-silver;                     
-                          font-size: 18px;
-                          line-height: 1.11;
-                          color: @color-greyish-brown;
-                          padding-left: 16px; 
-                        }
-                        div.interval-time{
-                          display: flex;
-                          flex-flow: row;
-                          input[type="time"]{
-                            width: 112px;
-                            height: 48px;
-                            border-radius: 2px;
-                            box-shadow: inset 0 1px 3px 0 @color-black-50;
-                            font-size: 18px;
-                            line-height: 1.11;
-                            color: @color-silver;
-                            border: none;
-                          }
-                          input[type="time"]:first-child{
-                            margin-right: 16px;
-                          }
-                          input[type="time"]::-webkit-inner-spin-button {
-                            -webkit-appearance: none;
-                            display: none;
-                            border:none;
-                          }
-                        }
-                        input.program{
-                          width: 256px;
-                          height: 48px;
-                          border-radius: 2px;
-                          box-shadow: inset 0 1px 3px 0 @color-black-50;
-                          font-size: 18px;
-                          line-height: 1.11;
-                          color: @color-silver;
-                          padding-left: 16px;
-                          border: none;
-                        }
-                        .reports-select-operator{
-                          width: 192px;
-                          height: 48px;
-                          border-radius: 2px;
-                          box-shadow: 0 1px 2px 0 @color-black-40;
-                          font-size: 18px;
-                          line-height: 1.11;
-                          color: @color-greyish-brown;
-                        }
-                        .reports-select-shift{
-                          width: 144px;
-                          height: 48px;
-                          border-radius: 2px;
-                          box-shadow: 0 1px 2px 0 @color-black-40;
-                        }
-                        label.label_advanced_filters{
-                          margin-top: 35px; 
-                          font-size: 18px;
-                          line-height: 1;
-                          color: @color-darkish-blue;
-                          span{
-                            text-decoration-line: underline;
-                            text-decoration-color: @color-darkish-blue;
-                            text-decoration-style: solid;
-                          }
-                        }
-                      }
-                    }
-                }
-                .body-left-header-machinestatus{
-                  border-right: 0px;
-                }
-                .body-left-center {
-                  width: 1448px;
-                  max-height: 681px;
-                  display: flex;
-                  flex-flow: column;
-                  .body-left-center-container{
-                    width: 100%;
-                    table{
-                      table-layout: fixed;
-                      width: 100%;
-                      border-collapse: collapse;
-                    }
-                    thead{
-                        border-bottom: solid 2px @color-label-grey;
-                        font-size: 14px;
-                        line-height: 1.29;
-                        color: @color-darkish-blue;
-                        display: block;
-                        width: 1431px;
-                    }
-                    thead tr th{
-                        height: 48px;
-                    }
-                    tr:nth-child(even) {background: #FFF }
-                    tr:nth-child(odd) {background: #dddddd }
-  
-                    // thead tr{
-                    //   width: 1448px;
-                    // }
-  
-                    thead tr:nth-child(odd){
-                      background: #FFF
-                    }
-    
-                    th:nth-child(1), td:nth-child(1){
-                        width:162px;
-                        max-width: 162px;
-                        text-align: center;
-                    }  
-                    th:nth-child(2), td:nth-child(2){
-                      width:139px;
-                      max-width: 139px;
-                      text-align: center;
-                    }
-                    th:nth-child(3), td:nth-child(3){
-                        width:83px;
-                        max-width:83px;
-                        text-align: center;
-                    }
-                    th:nth-child(4), td:nth-child(4){
-                      width:83px;
-                      max-width:83px;
-                      text-align: center;
-                    }
-                    th:nth-child(5), td:nth-child(5){
-                      width:83px;
-                      max-width:83px;
-                      text-align: center;
-                    }
-                    th:nth-child(6), td:nth-child(6){
-                      width:83px;
-                      max-width:83px;
-                      text-align: center;
-                    }
-                    th:nth-child(7), td:nth-child(7){
-                        width:97px;
-                        max-width:97px;
-                        text-align: center;
-                    }
-                    th:nth-child(8), td:nth-child(8){
-                      width:97px;
-                      max-width:97px;
-                      text-align: center;
-                    }
-                    th:nth-child(9), td:nth-child(9){
-                      width:97px;
-                      max-width:97px;
-                      text-align: center;
-                    }
-                    th:nth-child(10), td:nth-child(10){
-                      width:115px;
-                      max-width:115px;
-                      text-align: center;
-                    }
-                    th:nth-child(11), td:nth-child(11){
-                      width:97px;
-                      max-width:97px;
-                      text-align: center;
-                    }
-                    th:nth-child(12), td:nth-child(12){
-                      width:148px;
-                      max-width:148px;
-                      text-align: center;
-                    }
-                    th:nth-child(13), td:nth-child(13){
-                      width:97px;
-                      max-width:97px;
-                      text-align: center;
-                    }
-                    th:last-child{
-                      font-size: 23px;
-                      font-weight: bold;
-                      cursor: pointer;
-                    }
-                    th, td{
-                        overflow: hidden;
-                        div{
-                            overflow: hidden;
-                                    max-height: 64px;
-                        }
-                    }
-                    tbody{
-                        display: block;
-                        height: 631px;
-                        width: 1448px;
-                        overflow: scroll;
-                        tr{
-                            // cursor: pointer;
-                            height:  64px;
-                            padding: 10px;
-                            font-size: 14px;
-                            line-height: 1.29;
-                            color: @color-greyish-brown;
-                            td{
-                                text-align: center;
-                                &.green{
-                                  color: @color-apple-green;
-                                }
-                                &.red{
-                                  color: @color-scarlet;
-                                }
-                            }
-                            td:last-child{
-                              width: 10px;
-                            }
-                            &.selected{
-                                background-color: rgba(23, 145, 255, 0.75);
-                                color: @color-white;
-                                font-weight: 600;
-                            }
-                        }
-                    }
-                    .body-left-center-left{
-                      width: 360px;
-                      height: 616px;
-                      display: flex;
-                      flex-flow: column;
-                      align-items: center;
-                      border: solid 1px @color-whitegrey;
-                      overflow-y: auto;
-                      .multiselect{
-                        z-index: 100;
-                        margin-bottom: 24px;
-                        margin-top: 16px;
-                        label{
-                          font-size: 14px;
-                          line-height: 1.29;
-                          color: @color-warm-grey;
-                        }
-                      }
-                      .selectBox{
-                          position: relative;
-                          width: 328px;
-                          height: 64px;
-                      }
-                      .selectBox select{
-                        width: 100%;
-                        padding: 8px;
-                        cursor: pointer;
-                        height: 64px;
-                        font-size: 18px;
-                        line-height: 1.11;
-                        color: @color-greyish-brown;
-                        margin-bottom: 0;
-                        margin-top: 0;
-                          option{
-                              display: none;
-                          }
-                      }
-                      .overSelect{
-                        position: absolute;
-                        left: 0;
-                        right: 0;
-                        top: 0;
-                        bottom: 0;
-                    }
-                    .checkboxes, .checkboxesU{
-                        display: none;
-                    }
-                    .checkboxesView, .checkboxesViewUser{
-                        width: calc(~"100% - 8px");;
-                        background-color: #fff;
-                        display: block;
-                        z-index: 100;
-                        padding: 6px 4px;
-                        box-shadow: 0 3px 5px 0 @color-black-40;
-                        label{
-                            font-size: 18px;
-                            margin:2px;
-                            display: flex;
-                            flex-flow: row;
-                        }
-                        .label-state{
-                            margin-left: 12px;
-                        }
-                    }
-                      div{
-                        select{
-                          width: 328px;
-                          height: 48px;
-                          border-radius: 2px;
-                          box-shadow: 0 1px 2px 0 @color-black-40;
-                          margin-bottom: 24px;
-                          margin-top: 16px;
-                          padding-left: 16px;
-                          font-size: 18px;
-                          line-height: 1.11;
-                          color: @color-greyish-brown;
-                        }
-                        .accordion-dropdown{
-                          header {
-                            height: 64px;
-                            width: 312px;
-                            border-radius: 2px;
-                            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-                            display: flex;
-                            justify-content: space-between;
-                            align-items: center;
-                            color: @color-darkish-blue;
-                            line-height: 1;
-                            font-size: 18px;
-                            padding-left: 16px;
-                            cursor: pointer;
-                            span {
-                                width: 100%;
-                            }
-                            .expander {
-                                margin: 0 12px;
-                                line-height: 28px;
-                                height: 28px;
-                                width: 28px;
-                                font-size: 28px;
-                            }
-                          }
-                          section {
-                            width: 328px;
-                            min-height: 0;
-                            max-height: 0;
-                            transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
-                            overflow: hidden;
-                            &.expanded {
-                              min-height: 64px;
-                              background-color: rgba(255, 255, 255, 0.1);
-                              max-height: 1000px;
-                            }
-                            .item {
-                                height: 64px;
-                                width: 100%;
-                                line-height: 64px;
-                                background-color: @color-white2;
-                            }
-                    
-                            .dropdown{
-                              // background-color: @color-white2;
-                              height: 100%;
-                              margin-top: 2px;
-                              .filename{
-                                  display: flex;
-                                  height: 64px;
-                                  align-items: center;
-                                  cursor: pointer;
-                                  i{
-                                    color: @color-cyan-blue;
-                                    margin: 0 20px 0 20px;
-                                  }
-                                  span{
-                                      width: 100%;
-                                      font-size: 18px;
-                                      line-height: 1;
-                                      color: @color-darkish-blue;
-                                  }
-                    
-                                  &.selected{
-                                    span, i{
-                                      color:#4b4b4b;
-                                    }
-                                  }
-                              }
-                              .filename.selected{
-                                  background-color: rgba(255, 255, 255, 0.8);
-                              }
-                              
-                            } 
-                          }
-                        }
-                      }
-                    }
-                  }
-
-                  .body-left-center-footer{
-                    height: 64px;
-                    width: 100%;
-                    border: solid 1px @color-whitegrey;
-                    .header-title{
-                      width: 360px;
-                      height: 64px;
-                      display: flex;
-                      flex-flow: column;
-                      align-items: center;
-                      justify-content: center;
-                      .title{
-                        font-size: 14px;
-                        color: @color-warm-grey;
-                      }
-                      .data-temporal{
-                        font-size: 18px;
-                        line-height: 1;
-                        color: @color-greyish-brown;
-                      }
-                    }
-                  }
-                }
-            }
-            .reports-box-body-right {
-                width: 327px;
-                height: 100%;
-                .body-right-header{
-                  width: 100%;
-                  height: 70px;
-                  display: flex;
-                  flex-flow: row;
-                  margin-top: 18px;
-                  justify-content: flex-end;
-                  .body-right-header-left {
-                    width: 158px;
-                    height: 100%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    border-right: solid 2px @color-whitegrey;
-                    button{
-                      width: 48px;
-                      height: 48px;
-                      border-radius: 2px;
-                      box-shadow: 0 1px 2px 0 @color-black-40;
-                      background-image: linear-gradient(to bottom,@color-white2, @color-silver);
-                      border: none;
-                    }
-                    button.active{
-                      width: 48px;
-                      height: 48px;
-                      border-radius: 2px;
-                      box-shadow: inset 0 1px 3px 0 @color-black-40;
-                      background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
-                      color: @color-clear-blue;
-                      border: none;
-                    }
-                  }
-                  .body-right-header-right {
-                    width: calc(~"100% - 158px");
-                    height: 100%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    button{
-                      width: 48px;
-                      height: 48px;
-                      border-radius: 2px;
-                      box-shadow: 0 1px 2px 0 @color-black-40;
-                      background-image: linear-gradient(to bottom,@color-white2, @color-silver);
-                      border:none;
-                    }
-                    button:first-child{
-                      margin-right: 16px;
-                    }
-                    button:active{
-                      width: 48px;
-                      height: 48px;
-                      border-radius: 2px;
-                      box-shadow: inset 0 1px 3px 0 @color-black-40;
-                      background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
-                      border: none;
-                    }
-                  }
-                }
-                .body-right-card{
-                  width: 100%;
-                  height: calc(~"100% - 70px");
-                  display: flex;
-                  flex-flow: column;
-                  align-items: center;
-                  .card-report{
-                    > section {
-                      display: flex;
-                      align-items: center;
-                      justify-content: center; 
-                      .rectangle_gray{
-                        width: 256px;
-                        height: 120px;
-                        border-radius: 2px;
-                        display: flex;
-                        flex-flow: column;
-                        align-items: center;
-                        justify-content: center;
-                        background-color: @color-white2;
-                        label{
-                          font-size: 18px;
-                          color: @color-warm-grey;
-                          margin-bottom: 30px;
-                        }
-                        span{
-                          font-size: 48px;
-                          font-weight: bold;
-                          line-height: 0.38;
-                          color: @color-clear-blue;
-                        }
-                      }
-                    }
-                  }
-                }
-            }
         }
     }
 }
\ No newline at end of file
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index c2dabdaa..a2e345cf 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -7980,7 +7980,7 @@ footer .container button.big:before {
 .card-report-production .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper .mx-input,
 .card-report-production .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper .mx-input {
   width: 253px;
-  height: 50px;
+  height: 48px;
   border-radius: 2px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
   border: solid 1px #bbbcbc;
@@ -7996,9 +7996,18 @@ footer .container button.big:before {
   height: 70px;
   margin-right: 24px;
 }
+.card-report-production .reports-box-body-left .body-left-header > div label,
+.card-report-production .reports-box-body-left .body-left-header-machinestatus > div label {
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
+}
 .card-report-production .reports-box-body-left .body-left-header > div label.intervaldate,
 .card-report-production .reports-box-body-left .body-left-header-machinestatus > div label.intervaldate {
   width: 253px;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
 }
 .card-report-production .reports-box-body-left .body-left-header > div select,
 .card-report-production .reports-box-body-left .body-left-header-machinestatus > div select {
@@ -8019,7 +8028,7 @@ footer .container button.big:before {
 }
 .card-report-production .reports-box-body-left .body-left-header > div div.interval-time input[type="time"],
 .card-report-production .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"] {
-  width: 112px;
+  width: 96px;
   height: 48px;
   border-radius: 2px;
   box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
@@ -8027,6 +8036,7 @@ footer .container button.big:before {
   line-height: 1.11;
   color: #bbbcbc;
   border: none;
+  padding-left: 16px;
 }
 .card-report-production .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]:first-child,
 .card-report-production .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]:first-child {
@@ -8041,7 +8051,7 @@ footer .container button.big:before {
 .card-report-production .reports-box-body-left .body-left-header > div input.program,
 .card-report-production .reports-box-body-left .body-left-header-machinestatus > div input.program {
   width: 256px;
-  height: 48px;
+  height: 46px;
   border-radius: 2px;
   box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
   font-size: 18px;
@@ -8087,7 +8097,7 @@ footer .container button.big:before {
   width: 100%;
   padding: 8px;
   cursor: pointer;
-  height: 49px;
+  height: 48px;
   font-size: 18px;
   line-height: 1.11;
   color: #4b4b4b;
@@ -8175,85 +8185,14 @@ footer .container button.big:before {
 .card-report-production .reports-box-body-left .body-left-center .body-left-center-container thead tr:nth-child(odd) {
   background: #FFF;
 }
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(1),
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(1) {
-  width: 162px;
-  max-width: 162px;
-  text-align: center;
-}
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(2),
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(2) {
-  width: 139px;
-  max-width: 139px;
-  text-align: center;
-}
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(3),
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(3) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(4),
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(4) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(5),
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(5) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(6),
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(6) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(7),
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(7) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(8),
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(8) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(9),
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(9) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(10),
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(10) {
-  width: 115px;
-  max-width: 115px;
-  text-align: center;
-}
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(11),
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(11) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(12),
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(12) {
-  width: 148px;
-  max-width: 148px;
-  text-align: center;
-}
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(13),
-.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(13) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container th,
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container td {
+  width: auto;
 }
 .card-report-production .reports-box-body-left .body-left-center .body-left-center-container th:last-child {
+  display: flex;
+  align-items: center;
+  float: right;
   font-size: 23px;
   font-weight: bold;
   cursor: pointer;
@@ -8269,9 +8208,8 @@ footer .container button.big:before {
 }
 .card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody {
   display: block;
-  height: 631px;
-  width: 1448px;
-  overflow: scroll;
+  height: 598px;
+  width: 1431px;
 }
 .card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr {
   height: 64px;
@@ -8290,13 +8228,43 @@ footer .container button.big:before {
   color: #d0021b;
 }
 .card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child {
-  width: 10px;
+  width: 16px;
+  display: flex;
 }
 .card-report-production .reports-box-body-left .body-left-center .body-left-center-container tbody tr.selected {
   background-color: rgba(23, 145, 255, 0.75);
   color: #fff;
   font-weight: 600;
 }
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination {
+  display: inline-block;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination button {
+  padding: 0;
+  border: none;
+  background: none;
+  color: rgba(0, 0, 0, 0.4);
+  float: left;
+  padding: 8px 16px;
+  text-decoration: none;
+  border: 1px solid #dddddd;
+  margin: 0 4px;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination button:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination button:last-child {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination button.active {
+  background-color: #878787;
+  color: #fff;
+}
+.card-report-production .reports-box-body-left .body-left-center .body-left-center-container .pagination button:hover:not(.active) {
+  background-color: #dddddd;
+}
 .card-report-production .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left {
   width: 360px;
   height: 616px;
@@ -8598,7 +8566,7 @@ footer .container button.big:before {
 .card-report-events .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper .mx-input,
 .card-report-events .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper .mx-input {
   width: 253px;
-  height: 50px;
+  height: 48px;
   border-radius: 2px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
   border: solid 1px #bbbcbc;
@@ -8614,9 +8582,18 @@ footer .container button.big:before {
   height: 70px;
   margin-right: 24px;
 }
+.card-report-events .reports-box-body-left .body-left-header > div label,
+.card-report-events .reports-box-body-left .body-left-header-machinestatus > div label {
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
+}
 .card-report-events .reports-box-body-left .body-left-header > div label.intervaldate,
 .card-report-events .reports-box-body-left .body-left-header-machinestatus > div label.intervaldate {
   width: 253px;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
 }
 .card-report-events .reports-box-body-left .body-left-header > div select,
 .card-report-events .reports-box-body-left .body-left-header-machinestatus > div select {
@@ -8637,7 +8614,7 @@ footer .container button.big:before {
 }
 .card-report-events .reports-box-body-left .body-left-header > div div.interval-time input[type="time"],
 .card-report-events .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"] {
-  width: 112px;
+  width: 96px;
   height: 48px;
   border-radius: 2px;
   box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
@@ -8645,6 +8622,7 @@ footer .container button.big:before {
   line-height: 1.11;
   color: #bbbcbc;
   border: none;
+  padding-left: 16px;
 }
 .card-report-events .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]:first-child,
 .card-report-events .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]:first-child {
@@ -8659,7 +8637,7 @@ footer .container button.big:before {
 .card-report-events .reports-box-body-left .body-left-header > div input.program,
 .card-report-events .reports-box-body-left .body-left-header-machinestatus > div input.program {
   width: 256px;
-  height: 48px;
+  height: 46px;
   border-radius: 2px;
   box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
   font-size: 18px;
@@ -8695,27 +8673,6 @@ footer .container button.big:before {
   line-height: 1.29;
   color: #878787;
 }
-.card-report-events .reports-box-body-left .body-left-header .selectBox,
-.card-report-events .reports-box-body-left .body-left-header-machinestatus .selectBox {
-  position: relative;
-  width: 144px;
-}
-.card-report-events .reports-box-body-left .body-left-header .selectBox select,
-.card-report-events .reports-box-body-left .body-left-header-machinestatus .selectBox select {
-  width: 100%;
-  padding: 8px;
-  cursor: pointer;
-  height: 49px;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-  border-radius: 2px;
-}
-.card-report-events .reports-box-body-left .body-left-header .selectBox select option,
-.card-report-events .reports-box-body-left .body-left-header-machinestatus .selectBox select option {
-  display: none;
-}
 .card-report-events .reports-box-body-left .body-left-header .selectBoxU,
 .card-report-events .reports-box-body-left .body-left-header-machinestatus .selectBoxU {
   position: relative;
@@ -8726,7 +8683,7 @@ footer .container button.big:before {
   width: 100%;
   padding: 8px;
   cursor: pointer;
-  height: 49px;
+  height: 48px;
   font-size: 18px;
   line-height: 1.11;
   color: #4b4b4b;
@@ -8814,85 +8771,14 @@ footer .container button.big:before {
 .card-report-events .reports-box-body-left .body-left-center .body-left-center-container thead tr:nth-child(odd) {
   background: #FFF;
 }
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(1),
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(1) {
-  width: 162px;
-  max-width: 162px;
-  text-align: center;
-}
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(2),
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(2) {
-  width: 139px;
-  max-width: 139px;
-  text-align: center;
-}
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(3),
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(3) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(4),
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(4) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(5),
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(5) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(6),
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(6) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(7),
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(7) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(8),
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(8) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(9),
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(9) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(10),
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(10) {
-  width: 115px;
-  max-width: 115px;
-  text-align: center;
-}
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(11),
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(11) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(12),
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(12) {
-  width: 148px;
-  max-width: 148px;
-  text-align: center;
-}
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(13),
-.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(13) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container th,
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container td {
+  width: auto;
 }
 .card-report-events .reports-box-body-left .body-left-center .body-left-center-container th:last-child {
+  display: flex;
+  align-items: center;
+  float: right;
   font-size: 23px;
   font-weight: bold;
   cursor: pointer;
@@ -8908,9 +8794,8 @@ footer .container button.big:before {
 }
 .card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody {
   display: block;
-  height: 631px;
-  width: 1448px;
-  overflow: scroll;
+  height: 598px;
+  width: 1431px;
 }
 .card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody tr {
   height: 64px;
@@ -8929,13 +8814,43 @@ footer .container button.big:before {
   color: #d0021b;
 }
 .card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child {
-  width: 10px;
+  width: 16px;
+  display: flex;
 }
 .card-report-events .reports-box-body-left .body-left-center .body-left-center-container tbody tr.selected {
   background-color: rgba(23, 145, 255, 0.75);
   color: #fff;
   font-weight: 600;
 }
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .pagination {
+  display: inline-block;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .pagination button {
+  padding: 0;
+  border: none;
+  background: none;
+  color: rgba(0, 0, 0, 0.4);
+  float: left;
+  padding: 8px 16px;
+  text-decoration: none;
+  border: 1px solid #dddddd;
+  margin: 0 4px;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .pagination button:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .pagination button:last-child {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .pagination button.active {
+  background-color: #878787;
+  color: #fff;
+}
+.card-report-events .reports-box-body-left .body-left-center .body-left-center-container .pagination button:hover:not(.active) {
+  background-color: #dddddd;
+}
 .card-report-events .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left {
   width: 360px;
   height: 616px;
@@ -9877,7 +9792,7 @@ footer .container button.big:before {
 .card-report-machine-status .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper .mx-input,
 .card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper .mx-input {
   width: 253px;
-  height: 50px;
+  height: 48px;
   border-radius: 2px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
   border: solid 1px #bbbcbc;
@@ -9893,9 +9808,18 @@ footer .container button.big:before {
   height: 70px;
   margin-right: 24px;
 }
+.card-report-machine-status .reports-box-body-left .body-left-header > div label,
+.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div label {
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
+}
 .card-report-machine-status .reports-box-body-left .body-left-header > div label.intervaldate,
 .card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div label.intervaldate {
   width: 253px;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
 }
 .card-report-machine-status .reports-box-body-left .body-left-header > div select,
 .card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div select {
@@ -9916,7 +9840,7 @@ footer .container button.big:before {
 }
 .card-report-machine-status .reports-box-body-left .body-left-header > div div.interval-time input[type="time"],
 .card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"] {
-  width: 112px;
+  width: 96px;
   height: 48px;
   border-radius: 2px;
   box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
@@ -9924,6 +9848,7 @@ footer .container button.big:before {
   line-height: 1.11;
   color: #bbbcbc;
   border: none;
+  padding-left: 16px;
 }
 .card-report-machine-status .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]:first-child,
 .card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]:first-child {
@@ -9938,7 +9863,7 @@ footer .container button.big:before {
 .card-report-machine-status .reports-box-body-left .body-left-header > div input.program,
 .card-report-machine-status .reports-box-body-left .body-left-header-machinestatus > div input.program {
   width: 256px;
-  height: 48px;
+  height: 46px;
   border-radius: 2px;
   box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
   font-size: 18px;
@@ -9974,27 +9899,6 @@ footer .container button.big:before {
   line-height: 1.29;
   color: #878787;
 }
-.card-report-machine-status .reports-box-body-left .body-left-header .selectBox,
-.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .selectBox {
-  position: relative;
-  width: 144px;
-}
-.card-report-machine-status .reports-box-body-left .body-left-header .selectBox select,
-.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .selectBox select {
-  width: 100%;
-  padding: 8px;
-  cursor: pointer;
-  height: 49px;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-  border-radius: 2px;
-}
-.card-report-machine-status .reports-box-body-left .body-left-header .selectBox select option,
-.card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .selectBox select option {
-  display: none;
-}
 .card-report-machine-status .reports-box-body-left .body-left-header .selectBoxU,
 .card-report-machine-status .reports-box-body-left .body-left-header-machinestatus .selectBoxU {
   position: relative;
@@ -10005,7 +9909,7 @@ footer .container button.big:before {
   width: 100%;
   padding: 8px;
   cursor: pointer;
-  height: 49px;
+  height: 48px;
   font-size: 18px;
   line-height: 1.11;
   color: #4b4b4b;
@@ -10093,85 +9997,14 @@ footer .container button.big:before {
 .card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container thead tr:nth-child(odd) {
   background: #FFF;
 }
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(1),
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(1) {
-  width: 162px;
-  max-width: 162px;
-  text-align: center;
-}
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(2),
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(2) {
-  width: 139px;
-  max-width: 139px;
-  text-align: center;
-}
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(3),
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(3) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(4),
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(4) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(5),
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(5) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(6),
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(6) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(7),
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(7) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(8),
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(8) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(9),
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(9) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(10),
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(10) {
-  width: 115px;
-  max-width: 115px;
-  text-align: center;
-}
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(11),
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(11) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(12),
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(12) {
-  width: 148px;
-  max-width: 148px;
-  text-align: center;
-}
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(13),
-.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(13) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th,
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container td {
+  width: auto;
 }
 .card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container th:last-child {
+  display: flex;
+  align-items: center;
+  float: right;
   font-size: 23px;
   font-weight: bold;
   cursor: pointer;
@@ -10187,12 +10020,10 @@ footer .container button.big:before {
 }
 .card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody {
   display: block;
-  height: 631px;
-  width: 1448px;
-  overflow: scroll;
+  height: 598px;
+  width: 1431px;
 }
 .card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr {
-  cursor: pointer;
   height: 64px;
   padding: 10px;
   font-size: 14px;
@@ -10209,13 +10040,43 @@ footer .container button.big:before {
   color: #d0021b;
 }
 .card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child {
-  width: 10px;
+  width: 16px;
+  display: flex;
 }
 .card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container tbody tr.selected {
   background-color: rgba(23, 145, 255, 0.75);
   color: #fff;
   font-weight: 600;
 }
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .pagination {
+  display: inline-block;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .pagination button {
+  padding: 0;
+  border: none;
+  background: none;
+  color: rgba(0, 0, 0, 0.4);
+  float: left;
+  padding: 8px 16px;
+  text-decoration: none;
+  border: 1px solid #dddddd;
+  margin: 0 4px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .pagination button:first-child {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .pagination button:last-child {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .pagination button.active {
+  background-color: #878787;
+  color: #fff;
+}
+.card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .pagination button:hover:not(.active) {
+  background-color: #dddddd;
+}
 .card-report-machine-status .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left {
   width: 360px;
   height: 616px;
@@ -10484,6 +10345,7 @@ footer .container button.big:before {
   line-height: 0.38;
   color: #1791ff;
 }
+/* Versione zeplin machine status non cancellare*/
 @keyframes selectedanimation {
   0% {
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
@@ -17523,664 +17385,6 @@ footer .container button.big:before {
   display: flex;
   flex-flow: row;
 }
-.reports-container .reports-box .reports-box-body .reports-box-body-left {
-  width: 1455px;
-  height: 100%;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus {
-  width: 100%;
-  height: 70px;
-  display: flex;
-  flex-flow: row;
-  margin-top: 18px;
-  border-right: solid 2px #dddddd;
-  position: relative;
-  margin-bottom: 16px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header .mx-datepicker-range,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range {
-  width: 170px;
-  height: 70px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper {
-  margin-right: 24px;
-  width: 253px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper .mx-input,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper .mx-input {
-  width: 253px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  border: solid 1px #bbbcbc;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-  padding-left: 16px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div {
-  display: flex;
-  flex-flow: column;
-  height: 70px;
-  margin-right: 24px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div label.intervaldate,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div label.intervaldate {
-  width: 253px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div select,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div select {
-  width: 192px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  border: solid 1px #bbbcbc;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-  padding-left: 16px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div div.interval-time,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div div.interval-time {
-  display: flex;
-  flex-flow: row;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div div.interval-time input[type="time"],
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"] {
-  width: 112px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
-  font-size: 18px;
-  line-height: 1.11;
-  color: #bbbcbc;
-  border: none;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]:first-child,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]:first-child {
-  margin-right: 16px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]::-webkit-inner-spin-button,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  display: none;
-  border: none;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div input.program,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div input.program {
-  width: 256px;
-  height: 46px;
-  border-radius: 2px;
-  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
-  font-size: 18px;
-  line-height: 1.11;
-  color: #bbbcbc;
-  padding-left: 16px;
-  border: none;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div .reports-select-operator,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div .reports-select-operator {
-  width: 192px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div .reports-select-shift,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div .reports-select-shift {
-  width: 144px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div label.label_advanced_filters,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div label.label_advanced_filters {
-  margin-top: 35px;
-  font-size: 18px;
-  line-height: 1;
-  color: #002680;
-  cursor: pointer;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header > div label.label_advanced_filters span,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus > div label.label_advanced_filters span {
-  text-decoration-line: underline;
-  text-decoration-color: #002680;
-  text-decoration-style: solid;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters {
-  z-index: 100;
-  height: 80px;
-  width: 100%;
-  display: flex;
-  flex-flow: row;
-  background-color: #fff;
-  position: absolute;
-  top: 80px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div {
-  display: flex;
-  flex-flow: column;
-  height: 70px;
-  margin-right: 24px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div label.intervaldate,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div label.intervaldate {
-  width: 253px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div select,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div select {
-  width: 192px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  border: solid 1px #bbbcbc;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-  padding-left: 16px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div div.interval-time {
-  display: flex;
-  flex-flow: row;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"],
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div div.interval-time input[type="time"] {
-  width: 112px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
-  font-size: 18px;
-  line-height: 1.11;
-  color: #bbbcbc;
-  border: none;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"]:first-child,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div div.interval-time input[type="time"]:first-child {
-  margin-right: 16px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div div.interval-time input[type="time"]::-webkit-inner-spin-button,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div div.interval-time input[type="time"]::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  display: none;
-  border: none;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div input.program,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div input.program {
-  width: 256px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
-  font-size: 18px;
-  line-height: 1.11;
-  color: #bbbcbc;
-  padding-left: 16px;
-  border: none;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div .reports-select-operator,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div .reports-select-operator {
-  width: 192px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div .reports-select-shift,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div .reports-select-shift {
-  width: 144px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div label.label_advanced_filters,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div label.label_advanced_filters {
-  margin-top: 35px;
-  font-size: 18px;
-  line-height: 1;
-  color: #002680;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header div.advanced-filters > div label.label_advanced_filters span,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus div.advanced-filters > div label.label_advanced_filters span {
-  text-decoration-line: underline;
-  text-decoration-color: #002680;
-  text-decoration-style: solid;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-header-machinestatus {
-  border-right: 0px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center {
-  width: 1448px;
-  max-height: 681px;
-  display: flex;
-  flex-flow: column;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container {
-  width: 100%;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container table {
-  table-layout: fixed;
-  width: 100%;
-  border-collapse: collapse;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container thead {
-  border-bottom: solid 2px #979797;
-  font-size: 14px;
-  line-height: 1.29;
-  color: #002680;
-  display: block;
-  width: 1431px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container thead tr th {
-  height: 48px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(even) {
-  background: #FFF;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(odd) {
-  background: #dddddd;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container thead tr:nth-child(odd) {
-  background: #FFF;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(1),
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(1) {
-  width: 162px;
-  max-width: 162px;
-  text-align: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(2),
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(2) {
-  width: 139px;
-  max-width: 139px;
-  text-align: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(3),
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(3) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(4),
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(4) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(5),
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(5) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(6),
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(6) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(7),
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(7) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(8),
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(8) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(9),
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(9) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(10),
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(10) {
-  width: 115px;
-  max-width: 115px;
-  text-align: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(11),
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(11) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(12),
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(12) {
-  width: 148px;
-  max-width: 148px;
-  text-align: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(13),
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(13) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th:last-child {
-  font-size: 23px;
-  font-weight: bold;
-  cursor: pointer;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td {
-  overflow: hidden;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container th div,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container td div {
-  overflow: hidden;
-  max-height: 64px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tbody {
-  display: block;
-  height: 631px;
-  width: 1448px;
-  overflow: scroll;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tbody tr {
-  height: 64px;
-  padding: 10px;
-  font-size: 14px;
-  line-height: 1.29;
-  color: #4b4b4b;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tbody tr td {
-  text-align: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.green {
-  color: #7ed321;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.red {
-  color: #d0021b;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child {
-  width: 10px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container tbody tr.selected {
-  background-color: rgba(23, 145, 255, 0.75);
-  color: #fff;
-  font-weight: 600;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left {
-  width: 360px;
-  height: 616px;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  border: solid 1px #dddddd;
-  overflow-y: auto;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect {
-  z-index: 100;
-  margin-bottom: 24px;
-  margin-top: 16px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect label {
-  font-size: 14px;
-  line-height: 1.29;
-  color: #878787;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox {
-  position: relative;
-  width: 328px;
-  height: 64px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select {
-  width: 100%;
-  padding: 8px;
-  cursor: pointer;
-  height: 64px;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-  margin-bottom: 0;
-  margin-top: 0;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select option {
-  display: none;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .overSelect {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxes,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesU {
-  display: none;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser {
-  width: calc(100% - 8px);
-  background-color: #fff;
-  display: block;
-  z-index: 100;
-  padding: 6px 4px;
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView label,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser label {
-  font-size: 18px;
-  margin: 2px;
-  display: flex;
-  flex-flow: row;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView .label-state,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser .label-state {
-  margin-left: 12px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div select {
-  width: 328px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  margin-bottom: 24px;
-  margin-top: 16px;
-  padding-left: 16px;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header {
-  height: 64px;
-  width: 312px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: #002680;
-  line-height: 1;
-  font-size: 18px;
-  padding-left: 16px;
-  cursor: pointer;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header span {
-  width: 100%;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header .expander {
-  margin: 0 12px;
-  line-height: 28px;
-  height: 28px;
-  width: 28px;
-  font-size: 28px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section {
-  width: 328px;
-  min-height: 0;
-  max-height: 0;
-  transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
-  overflow: hidden;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section.expanded {
-  min-height: 64px;
-  background-color: rgba(255, 255, 255, 0.1);
-  max-height: 1000px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .item {
-  height: 64px;
-  width: 100%;
-  line-height: 64px;
-  background-color: #f1f1f1;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown {
-  height: 100%;
-  margin-top: 2px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename {
-  display: flex;
-  height: 64px;
-  align-items: center;
-  cursor: pointer;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename i {
-  color: #002e6e;
-  margin: 0 20px 0 20px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename span {
-  width: 100%;
-  font-size: 18px;
-  line-height: 1;
-  color: #002680;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected span,
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected i {
-  color: #4b4b4b;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected {
-  background-color: rgba(255, 255, 255, 0.8);
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-footer {
-  height: 64px;
-  width: 100%;
-  border: solid 1px #dddddd;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-footer .header-title {
-  width: 360px;
-  height: 64px;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  justify-content: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-footer .header-title .title {
-  font-size: 14px;
-  color: #878787;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-left .body-left-center .body-left-center-footer .header-title .data-temporal {
-  font-size: 18px;
-  line-height: 1;
-  color: #4b4b4b;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-right {
-  width: 327px;
-  height: 100%;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header {
-  width: 100%;
-  height: 70px;
-  display: flex;
-  flex-flow: row;
-  margin-top: 18px;
-  justify-content: flex-end;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-left {
-  width: 158px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-right: solid 2px #dddddd;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-left button {
-  width: 48px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
-  border: none;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-left button.active {
-  width: 48px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4);
-  background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
-  color: #1791ff;
-  border: none;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-right {
-  width: calc(100% - 158px);
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-right button {
-  width: 48px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
-  border: none;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-right button:first-child {
-  margin-right: 16px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-header .body-right-header-right button:active {
-  width: 48px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4);
-  background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
-  border: none;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-card {
-  width: 100%;
-  height: calc(100% - 70px);
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-card .card-report > section {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-card .card-report > section .rectangle_gray {
-  width: 256px;
-  height: 120px;
-  border-radius: 2px;
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  justify-content: center;
-  background-color: #f1f1f1;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-card .card-report > section .rectangle_gray label {
-  font-size: 18px;
-  color: #878787;
-  margin-bottom: 30px;
-}
-.reports-container .reports-box .reports-box-body .reports-box-body-right .body-right-card .card-report > section .rectangle_gray span {
-  font-size: 48px;
-  font-weight: bold;
-  line-height: 0.38;
-  color: #1791ff;
-}
 a,
 a:visited,
 a:hover,
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-events.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-events.ts
index d0d3f913..f2942b19 100644
--- a/Step/wwwroot/src/app_modules/reports/components/card-report-events.ts
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-events.ts
@@ -1,6 +1,6 @@
 import Vue from "vue";
 import Component from "vue-class-component";
-import {cardReport} from "../../../modules/base-components/cards/index";
+import { cardReport } from "../../../modules/base-components/cards/index";
 import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
 import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
 import { Accordion } from "src/modules/base-components";
@@ -13,82 +13,106 @@ declare let $: any;
 @Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
 export default class CardReportEvents extends Vue {
 
-    lang = {
-        days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-        months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-        pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
-        placeholder: {
-          date: 'Select Date',
-          dateRange: 'Select Date Range'
-        }
+  lang = {
+    days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
+    placeholder: {
+      date: 'Select Date',
+      dateRange: 'Select Date Range'
     }
+  }
 
-    filter: {
-        interval?: Date[],
-        timelineMacro: Array<string>,
-        multiUser: Array<any>
-    } = {
-        timelineMacro: ["Eventi","Allarmi","Stato macchina","Programmi"],
-        multiUser: [],
-        interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
+  filter: {
+    interval?: Date[],
+    timelineMacro: Array<string>,
+    multiUser: Array<any>
+  } = {
+      timelineMacro: ["Eventi", "Allarmi", "Stato macchina", "Programmi"],
+      multiUser: [],
+      interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
     };
-    
 
-    public selectedTab: string = "Production";
-    selectDiagram: boolean = false;
-    selectMoreFilter: boolean = false;
-    selectTable: boolean = true;
-    users: Array<any> = [];
 
-    get currentUser() {
-        return this.$store.state.currentUser;
+  visibleColumns: string[] = ["ProgramName","Date","Deviation","Dimensions","EffectiveTime","Quality","Quantity","AverageTime","OperatorName","StartTime","TheoreticalTime","EndTime",];
+
+  isVisible(value){
+    return this.visibleColumns.some(c => c == value);
+  }
+
+  public selectedTab: string = "Production";
+  selectDiagram: boolean = false;
+  selectMoreFilter: boolean = false;
+  selectTable: boolean = true;
+  users: Array<any> = [];
+  selectedPage = 1;
+  paginationData: { firstDate: any, pages: number } = {firstDate: new Date(), pages: 6};
+
+  get paginator() {
+
+    let min = Math.max(this.selectedPage - 4, 0);
+    let max = Math.min(this.selectedPage + 5, this.paginationData.pages);
+
+    return { min: min, max: max, count: (max - min) }
+
+  }
+
+  get currentUser() {
+    return this.$store.state.currentUser;
+  }
+
+  async mounted() {
+    this.users = await loginService.getAllUsers();
+    this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
+    this.filter.multiUser.push(this.currentUser.username);
+  }
+
+  public selectTab(value) {
+    this.selectedTab = value;
+  }
+  timeformat() {
+    return (moment() as any)._locale._longDateFormat.LT;
+  }
+
+  viewDiagram() {
+    if (!this.selectDiagram) {
+      this.selectDiagram = true;
+      this.selectTable = false;
     }
+    console.log("Diagram active");
+  }
 
-    async mounted() {
-        this.users = await loginService.getAllUsers();
-        this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
-        this.filter.multiUser.push(this.currentUser.username);
-      }
+  viewTable() {
+    if (!this.selectTable) {
+      this.selectDiagram = false;
+      this.selectTable = true;
+    }
+    console.log("Diagram active");
+  }
 
-    public selectTab(value){
-        this.selectedTab = value;
+  viewMoreFilter() {
+    if (!this.selectMoreFilter) {
+      this.selectMoreFilter = true;
     }
-    timeformat() {
-        return (moment() as any)._locale._longDateFormat.LT;
+    else {
+      this.selectMoreFilter = false;
     }
+  }
 
-    viewDiagram(){
-        if(!this.selectDiagram){
-            this.selectDiagram = true;
-            this.selectTable = false;
-        }
-        console.log("Diagram active");
-    }
+  async openModalSelectField() {
+    this.visibleColumns = await ModalHelper.ShowModalAsync(modalReportSelectColumn, this.visibleColumns);
 
-    viewTable(){
-        if(!this.selectTable){
-            this.selectDiagram = false;
-            this.selectTable = true;
-        }
-        console.log("Diagram active");
-    }
+    console.log(this.visibleColumns);
+  }
+  public openSelectStateU() {
+    if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
+      $('.checkboxesU').addClass('checkboxesViewUser');
+    else
+      $('.checkboxesU').removeClass('checkboxesViewUser');
+  }
 
-    viewMoreFilter(){
-        if(!this.selectMoreFilter){
-            this.selectMoreFilter = true;
-        }
-        else{
-            this.selectMoreFilter = false;
-        }
-    }
-
-    openModalSelectField(){
-        ModalHelper.ShowModal(modalReportSelectColumn);
-    }
-    public openSelectStateU() {
-        if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
-          $('.checkboxesU').addClass('checkboxesViewUser');
-        else
-          $('.checkboxesU').removeClass('checkboxesViewUser');
-      }
-}
\ No newline at end of file
+  public selectPage(page) {
+    debugger
+    this.selectedPage = Math.min(Math.max(page,1), this.paginationData.pages);
+  }
+}
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-events.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-events.vue
index 0d4c4a34..485160ea 100644
--- a/Step/wwwroot/src/app_modules/reports/components/card-report-events.vue
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-events.vue
@@ -56,67 +56,58 @@
             <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
             <select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
         </div> -->
-        <div>
+        <!-- <div>
             <label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
             <select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
-        </div>
+        </div> -->
     </div>
     <div class="body-left-center">
         <div class="body-left-center-container">
           <table>
               <thead>
                   <tr>
-                      <th>{{'reports_table_program_name' | localize("Nome programma")}}</th>
-                      <th>{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
-                      <th>{{'reports_table_quantity' | localize("Quantity")}}</th>
-                      <th>{{'reports_table_start_now' | localize("Ora inizio")}}</th>
-                      <th>{{'reports_table_end_time' | localize("Ora fine")}}</th>
-                      <th>{{'reports_table_date' | localize("Data")}}</th>
-                      <th>{{'reports_table_effective_time' | localize("T effettivo")}}</th>
-                      <th>{{'reports_table_average_time' | localize("T medio")}}</th>
-                      <th>{{'reports_table_theoretical_time' | localize("T teorico")}}</th>
-                      <th>{{'reports_table_deviation' | localize("Scostamento")}}</th>
-                      <th>{{'reports_table_quality' | localize("Qualità")}}</th>
-                      <th>{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
-                      <th>{{'reports_table_shift' | localize("Turno")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('ProgramName')">{{'reports_table_program_name' | localize("Nome programma")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}"  v-if="isVisible('Dimensions')">{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quantity')">{{'reports_table_quantity' | localize("Quantity")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('StartTime')">{{'reports_table_start_now' | localize("Ora inizio")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EndTime')">{{'reports_table_end_time' | localize("Ora fine")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Date')">{{'reports_table_date' | localize("Data")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EffectiveTime')">{{'reports_table_effective_time' | localize("T effettivo")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('AverageTime')">{{'reports_table_average_time' | localize("T medio")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('TheoreticalTime')">{{'reports_table_theoretical_time' | localize("T teorico")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Deviation')">{{'reports_table_deviation' | localize("Scostamento")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quality')">{{'reports_table_quality' | localize("Qualità")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('OperatorName')">{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
+                      <!-- <th v-if="isVisible('Shift')">{{'reports_table_shift' | localize("Turno")}}</th> -->
                       <th @click="openModalSelectField()"><i class="fa fa-angle-double-right"></i></th>
                   </tr>
               </thead>
               <tbody>
                   <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
-                      <td></td>
-                  </tr>
-                  <tr>
-                      <td colspan="1">Finestra02.pgm</td>
-                      <td colspan="1">X: 1210; Y:900; Z: 63</td>
-                      <td colspan="1">1</td>
-                      <td colspan="1">11:25:00</td>
-                      <td colspan="1">13:10:00</td>
-                      <td colspan="1">12/04/2017</td>
-                      <td colspan="1">01:45:00</td>
-                      <td colspan="1">01:25:00</td>
-                      <td colspan="1">01:20:00</td>
-                      <td colspan="1" :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td colspan="1">Buono</td>
-                      <td colspan="1">Nome utente</td>
-                      <td colspan="1">1°</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('ProgramName')">Finestra02.pgm</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Dimensions')">X: 1210; Y:900; Z: 63</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quantity')">1</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('StartTime')">11:25:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EndTime')">13:10:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Date')">12/04/2017</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EffectiveTime')">01:45:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('AverageTime')">01:25:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('TheoreticalTime')">01:20:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Deviation')" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quality')">Buono</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('OperatorName')">Nome utente</td>
+                      <!-- <td v-if="isVisible('Shift')">1°</td> -->
                       <td></td>
                   </tr>
               </tbody>
           </table>
+          <div class="pagination">
+              <button  @click="selectPage(selectedPage-1)"><i class="fa fa-angle-double-left"></i></button>
+              <button class="page" :class="{active: selectedPage == paginator.min + p}"
+                      v-for="(p, idx) in paginator.count" :key="'page' + idx"
+                      @click="selectPage(paginator.min + p)">{{paginator.min + p}}</button>
+              <button @click="selectPage(selectedPage+1)"><i class="fa fa-angle-double-right"></i></button>
+            </div>
           </div>
     </div>
 </div>
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts
index a5f87943..73564554 100644
--- a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts
@@ -1,6 +1,6 @@
 import Vue from "vue";
 import Component from "vue-class-component";
-import {cardReport} from "../../../modules/base-components/cards/index";
+import { cardReport } from "../../../modules/base-components/cards/index";
 import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
 import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
 import { Accordion } from "src/modules/base-components";
@@ -13,82 +13,207 @@ declare let $: any;
 @Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
 export default class CardReportMachineStatus extends Vue {
 
-    lang = {
-        days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-        months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-        pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
-        placeholder: {
-          date: 'Select Date',
-          dateRange: 'Select Date Range'
-        }
+  lang = {
+    days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
+    placeholder: {
+      date: 'Select Date',
+      dateRange: 'Select Date Range'
     }
+  }
 
-    filter: {
-        interval?: Date[],
-        timelineMacro: Array<string>,
-        multiUser: Array<any>
-    } = {
-        timelineMacro: ["Eventi","Allarmi","Stato macchina","Programmi"],
-        multiUser: [],
-        interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
+  filter: {
+    interval?: Date[],
+    timelineMacro: Array<string>,
+    multiUser: Array<any>
+  } = {
+      timelineMacro: ["Eventi", "Allarmi", "Stato macchina", "Programmi"],
+      multiUser: [],
+      interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
     };
+
+
+  visibleColumns: string[] = ["ProgramName","Date","Deviation","Dimensions","EffectiveTime","Quality","Quantity","AverageTime","OperatorName","StartTime","TheoreticalTime","EndTime",];
+
+  isVisible(value){
+    return this.visibleColumns.some(c => c == value);
+  }
+
+  public selectedTab: string = "Production";
+  selectDiagram: boolean = false;
+  selectMoreFilter: boolean = false;
+  selectTable: boolean = true;
+  users: Array<any> = [];
+  selectedPage = 1;
+  paginationData: { firstDate: any, pages: number } = {firstDate: new Date(), pages: 6};
+
+  get paginator() {
+
+    let min = Math.max(this.selectedPage - 4, 0);
+    let max = Math.min(this.selectedPage + 5, this.paginationData.pages);
+
+    return { min: min, max: max, count: (max - min) }
+
+  }
+
+  get currentUser() {
+    return this.$store.state.currentUser;
+  }
+
+  async mounted() {
+    this.users = await loginService.getAllUsers();
+    this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
+    this.filter.multiUser.push(this.currentUser.username);
+  }
+
+  public selectTab(value) {
+    this.selectedTab = value;
+  }
+  timeformat() {
+    return (moment() as any)._locale._longDateFormat.LT;
+  }
+
+  viewDiagram() {
+    if (!this.selectDiagram) {
+      this.selectDiagram = true;
+      this.selectTable = false;
+    }
+    console.log("Diagram active");
+  }
+
+  viewTable() {
+    if (!this.selectTable) {
+      this.selectDiagram = false;
+      this.selectTable = true;
+    }
+    console.log("Diagram active");
+  }
+
+  viewMoreFilter() {
+    if (!this.selectMoreFilter) {
+      this.selectMoreFilter = true;
+    }
+    else {
+      this.selectMoreFilter = false;
+    }
+  }
+
+  async openModalSelectField() {
+    this.visibleColumns = await ModalHelper.ShowModalAsync(modalReportSelectColumn, this.visibleColumns);
+
+    console.log(this.visibleColumns);
+  }
+  public openSelectStateU() {
+    if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
+      $('.checkboxesU').addClass('checkboxesViewUser');
+    else
+      $('.checkboxesU').removeClass('checkboxesViewUser');
+  }
+
+  public selectPage(page) {
+    debugger
+    this.selectedPage = Math.min(Math.max(page,1), this.paginationData.pages);
+  }
+}
+
+
+
+
+
+/** versione zeplin non cancellare */
+
+// import Vue from "vue";
+// import Component from "vue-class-component";
+// import {cardReport} from "../../../modules/base-components/cards/index";
+// import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
+// import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
+// import { Accordion } from "src/modules/base-components";
+// import { loginService } from "src/services";
+// import DatePicker from "vue2-datepicker";
+// import moment from "moment";
+// import { ModalHelper } from "src/components/modals";
+
+// declare let $: any;
+// @Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
+// export default class CardReportMachineStatus extends Vue {
+
+//     lang = {
+//         days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+//         months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+//         pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
+//         placeholder: {
+//           date: 'Select Date',
+//           dateRange: 'Select Date Range'
+//         }
+//     }
+
+//     filter: {
+//         interval?: Date[],
+//         timelineMacro: Array<string>,
+//         multiUser: Array<any>
+//     } = {
+//         timelineMacro: ["Eventi","Allarmi","Stato macchina","Programmi"],
+//         multiUser: [],
+//         interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
+//     };
     
 
-    public selectedTab: string = "Production";
-    selectDiagram: boolean = false;
-    selectMoreFilter: boolean = false;
-    selectTable: boolean = true;
-    users: Array<any> = [];
+//     public selectedTab: string = "Production";
+//     selectDiagram: boolean = false;
+//     selectMoreFilter: boolean = false;
+//     selectTable: boolean = true;
+//     users: Array<any> = [];
 
-    get currentUser() {
-        return this.$store.state.currentUser;
-    }
+//     get currentUser() {
+//         return this.$store.state.currentUser;
+//     }
 
-    async mounted() {
-        this.users = await loginService.getAllUsers();
-        this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
-        this.filter.multiUser.push(this.currentUser.username);
-      }
+//     async mounted() {
+//         this.users = await loginService.getAllUsers();
+//         this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
+//         this.filter.multiUser.push(this.currentUser.username);
+//       }
 
-    public selectTab(value){
-        this.selectedTab = value;
-    }
-    timeformat() {
-        return (moment() as any)._locale._longDateFormat.LT;
-    }
+//     public selectTab(value){
+//         this.selectedTab = value;
+//     }
+//     timeformat() {
+//         return (moment() as any)._locale._longDateFormat.LT;
+//     }
 
-    viewDiagram(){
-        if(!this.selectDiagram){
-            this.selectDiagram = true;
-            this.selectTable = false;
-        }
-        console.log("Diagram active");
-    }
+//     viewDiagram(){
+//         if(!this.selectDiagram){
+//             this.selectDiagram = true;
+//             this.selectTable = false;
+//         }
+//         console.log("Diagram active");
+//     }
 
-    viewTable(){
-        if(!this.selectTable){
-            this.selectDiagram = false;
-            this.selectTable = true;
-        }
-        console.log("Diagram active");
-    }
+//     viewTable(){
+//         if(!this.selectTable){
+//             this.selectDiagram = false;
+//             this.selectTable = true;
+//         }
+//         console.log("Diagram active");
+//     }
 
-    viewMoreFilter(){
-        if(!this.selectMoreFilter){
-            this.selectMoreFilter = true;
-        }
-        else{
-            this.selectMoreFilter = false;
-        }
-    }
+//     viewMoreFilter(){
+//         if(!this.selectMoreFilter){
+//             this.selectMoreFilter = true;
+//         }
+//         else{
+//             this.selectMoreFilter = false;
+//         }
+//     }
 
-    openModalSelectField(){
-        ModalHelper.ShowModal(modalReportSelectColumn);
-    }
-    public openSelectStateU() {
-        if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
-          $('.checkboxesU').addClass('checkboxesViewUser');
-        else
-          $('.checkboxesU').removeClass('checkboxesViewUser');
-      }
-}
\ No newline at end of file
+//     openModalSelectField(){
+//         ModalHelper.ShowModal(modalReportSelectColumn);
+//     }
+//     public openSelectStateU() {
+//         if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
+//           $('.checkboxesU').addClass('checkboxesViewUser');
+//         else
+//           $('.checkboxesU').removeClass('checkboxesViewUser');
+//       }
+// }
\ No newline at end of file
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue
index 39bc2660..ea4da612 100644
--- a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.vue
@@ -1,5 +1,150 @@
 <template>
 <div class="card-report-machine-status">
+    <div class="reports-box-body-left">
+        <div class="body-left-header" v-if="selectDiagram">
+            <div>
+                <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
+                <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
+            </div>
+            <div>
+                <label>{{'reports_body_header_axes_x' | localize("Asse X")}}</label>
+                <select><option>{{'reports_body_header_option_axes_x_program_name' | localize("Nome Programma")}}</option></select>
+            </div>
+            <div>
+                <label>{{'reports_body_header_axes_y' | localize("Asse Y")}}</label>
+                <select><option>{{'reports_body_header_option_axes_y_frequency' | localize("Frequenza")}}</option></select>
+            </div>
+        </div>
+    <div class="body-left-header" v-if="!selectDiagram">
+        <div>
+            <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
+            <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
+        </div>
+        <div>
+            <label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
+            <div class="interval-time">
+                <input type="time"/>
+                <input type="time"/>
+            </div>
+        </div>
+        <div>
+            <label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
+            <input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
+        </div>
+        <div class="multiselect">
+          <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
+          <div class="selectBoxU" @click="openSelectStateU()">
+            <select id="selectListCheckboxes">
+              <option><span v-for="(item, index) in filter.multiUser" :key="item" >{{'reports_filter_operator_'+item | localize(item)}}{{(index==filter.multiUser.length-1)?'':', '}}</span></option>
+              <div class="overSelect"></div>
+            </select>
+          </div>
+
+          <div class="checkboxesU">
+            <div v-for="item in users" :key="item.id">
+              <label :for="item.username">
+              <div class="custom-checkbox">
+                <input type="checkbox" v-model="filter.multiUser" :value="item.username" :id="item.username" />
+                <label :for="item.username"></label>
+              </div>
+              <label class="label-state">{{item.username}}</label>
+              </label>
+            </div>
+          </div>
+        </div>
+        <!-- <div>
+            <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
+            <select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
+        </div> -->
+        <!-- <div>
+            <label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
+            <select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
+        </div> -->
+    </div>
+    <div class="body-left-center">
+        <div class="body-left-center-container">
+          <table>
+              <thead>
+                  <tr>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('ProgramName')">{{'reports_table_program_name' | localize("Nome programma")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}"  v-if="isVisible('Dimensions')">{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quantity')">{{'reports_table_quantity' | localize("Quantity")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('StartTime')">{{'reports_table_start_now' | localize("Ora inizio")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EndTime')">{{'reports_table_end_time' | localize("Ora fine")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Date')">{{'reports_table_date' | localize("Data")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EffectiveTime')">{{'reports_table_effective_time' | localize("T effettivo")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('AverageTime')">{{'reports_table_average_time' | localize("T medio")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('TheoreticalTime')">{{'reports_table_theoretical_time' | localize("T teorico")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Deviation')">{{'reports_table_deviation' | localize("Scostamento")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quality')">{{'reports_table_quality' | localize("Qualità")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('OperatorName')">{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
+                      <!-- <th v-if="isVisible('Shift')">{{'reports_table_shift' | localize("Turno")}}</th> -->
+                      <th @click="openModalSelectField()"><i class="fa fa-angle-double-right"></i></th>
+                  </tr>
+              </thead>
+              <tbody>
+                  <tr>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('ProgramName')">Finestra02.pgm</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Dimensions')">X: 1210; Y:900; Z: 63</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quantity')">1</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('StartTime')">11:25:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EndTime')">13:10:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Date')">12/04/2017</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EffectiveTime')">01:45:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('AverageTime')">01:25:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('TheoreticalTime')">01:20:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Deviation')" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quality')">Buono</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('OperatorName')">Nome utente</td>
+                      <!-- <td v-if="isVisible('Shift')">1°</td> -->
+                      <td></td>
+                  </tr>
+              </tbody>
+          </table>
+          <div class="pagination">
+              <button  @click="selectPage(selectedPage-1)"><i class="fa fa-angle-double-left"></i></button>
+              <button class="page" :class="{active: selectedPage == paginator.min + p}"
+                      v-for="(p, idx) in paginator.count" :key="'page' + idx"
+                      @click="selectPage(paginator.min + p)">{{paginator.min + p}}</button>
+              <button @click="selectPage(selectedPage+1)"><i class="fa fa-angle-double-right"></i></button>
+            </div>
+          </div>
+    </div>
+</div>
+    <div class="reports-box-body-right">
+        <div class="body-right-header">
+            <div class="body-right-header-left">
+                <button :class="{'active': selectTable}" @click="viewTable()"><i class="fa fa-bars fa-2x"></i></button>
+                <button :class="{'active': selectDiagram}" @click="viewDiagram()"><i class="fa fa-signal fa-2x"></i></button>
+            </div>
+            <div class="body-right-header-right">
+                <button><i class="fa fa-print fa-2x"></i></button>
+                <button><i class="fa fa-upload fa-2x"></i></button>
+            </div>
+            </div>
+        <div class="body-right-card">
+            <card-report :title="'Valore assoluto (%)'">
+            </card-report>
+            <card-report :title="'Valore assoluto'">
+                <div class="rectangle_gray">
+                    <label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
+                    <span>10.000</span>
+                </div>
+            </card-report>
+            <card-report :title="'Valore assoluto'">
+                <div class="rectangle_gray">
+                    <label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
+                    <span>4</span>
+                </div>
+            </card-report>
+        </div>
+    </div>
+</div>
+
+
+<!-- VERSIONE ZEPLIN non cancellare -->
+
+<!-- <div class="card-report-machine-status">
                   <div class="reports-box-body-left">
                   <div class="body-left-header-machinestatus">
                     <div>
@@ -36,7 +181,7 @@
                     </card-report>
                 </div>
               </div>
-</div>
+</div> -->
 
 </template>
 
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts
index c9685ac3..aab4a78c 100644
--- a/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts
@@ -34,7 +34,7 @@ export default class CardReportProduction extends Vue {
     };
 
 
-  visibleColumns: string[] = ["ProgramName","Date","Deviation","Dimensions","EffectiveTime","Quality","Quantity","AverageTime","OperatorName","StartTime","TheoreticalTime","Shift","EndTime",];
+  visibleColumns: string[] = ["ProgramName","Date","Deviation","Dimensions","EffectiveTime","Quality","Quantity","AverageTime","OperatorName","StartTime","TheoreticalTime","EndTime",];
 
   isVisible(value){
     return this.visibleColumns.some(c => c == value);
@@ -45,6 +45,17 @@ export default class CardReportProduction extends Vue {
   selectMoreFilter: boolean = false;
   selectTable: boolean = true;
   users: Array<any> = [];
+  selectedPage = 1;
+  paginationData: { firstDate: any, pages: number } = {firstDate: new Date(), pages: 6};
+
+  get paginator() {
+
+    let min = Math.max(this.selectedPage - 4, 0);
+    let max = Math.min(this.selectedPage + 5, this.paginationData.pages);
+
+    return { min: min, max: max, count: (max - min) }
+
+  }
 
   get currentUser() {
     return this.$store.state.currentUser;
@@ -90,6 +101,8 @@ export default class CardReportProduction extends Vue {
 
   async openModalSelectField() {
     this.visibleColumns = await ModalHelper.ShowModalAsync(modalReportSelectColumn, this.visibleColumns);
+
+    console.log(this.visibleColumns);
   }
   public openSelectStateU() {
     if (!$('.checkboxesU').hasClass('checkboxesViewUser'))
@@ -97,4 +110,9 @@ export default class CardReportProduction extends Vue {
     else
       $('.checkboxesU').removeClass('checkboxesViewUser');
   }
+
+  public selectPage(page) {
+    debugger
+    this.selectedPage = Math.min(Math.max(page,1), this.paginationData.pages);
+  }
 }
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
index edc32665..7e96849c 100644
--- a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue
@@ -56,51 +56,58 @@
             <label>{{'reports_body_header_label_operator' | localize("Operatore")}}</label>
             <select class="reports-select-operator"><option>{{'reports_body_header_option_operator_all' | localize("tutti")}}</option></select>
         </div> -->
-        <div>
+        <!-- <div>
             <label>{{'reports_body_header_label_shift' | localize("Turno")}}</label>
             <select class="reports-select-shift"><option>{{'reports_body_header_option_shift_first' | localize("1°")}}</option></select>
-        </div>
+        </div> -->
     </div>
     <div class="body-left-center">
         <div class="body-left-center-container">
           <table>
               <thead>
                   <tr>
-                      <th v-if="isVisible('ProgramName')">{{'reports_table_program_name' | localize("Nome programma")}}</th>
-                      <th>{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
-                      <th>{{'reports_table_quantity' | localize("Quantity")}}</th>
-                      <th>{{'reports_table_start_now' | localize("Ora inizio")}}</th>
-                      <th>{{'reports_table_end_time' | localize("Ora fine")}}</th>
-                      <th>{{'reports_table_date' | localize("Data")}}</th>
-                      <th>{{'reports_table_effective_time' | localize("T effettivo")}}</th>
-                      <th>{{'reports_table_average_time' | localize("T medio")}}</th>
-                      <th>{{'reports_table_theoretical_time' | localize("T teorico")}}</th>
-                      <th>{{'reports_table_deviation' | localize("Scostamento")}}</th>
-                      <th>{{'reports_table_quality' | localize("Qualità")}}</th>
-                      <th>{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
-                      <th>{{'reports_table_shift' | localize("Turno")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('ProgramName')">{{'reports_table_program_name' | localize("Nome programma")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}"  v-if="isVisible('Dimensions')">{{'reports_table_dimensions' | localize("Dimensioni")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quantity')">{{'reports_table_quantity' | localize("Quantity")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('StartTime')">{{'reports_table_start_now' | localize("Ora inizio")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EndTime')">{{'reports_table_end_time' | localize("Ora fine")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Date')">{{'reports_table_date' | localize("Data")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EffectiveTime')">{{'reports_table_effective_time' | localize("T effettivo")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('AverageTime')">{{'reports_table_average_time' | localize("T medio")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('TheoreticalTime')">{{'reports_table_theoretical_time' | localize("T teorico")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Deviation')">{{'reports_table_deviation' | localize("Scostamento")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quality')">{{'reports_table_quality' | localize("Qualità")}}</th>
+                      <th :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('OperatorName')">{{'reports_table_operator_name' | localize("Nome operatore")}}</th>
+                      <!-- <th v-if="isVisible('Shift')">{{'reports_table_shift' | localize("Turno")}}</th> -->
                       <th @click="openModalSelectField()"><i class="fa fa-angle-double-right"></i></th>
                   </tr>
               </thead>
               <tbody>
                   <tr>
-                      <td v-if="isVisible('ProgramName')" >Finestra02.pgm</td>
-                      <td>X: 1210; Y:900; Z: 63</td>
-                      <td>1</td>
-                      <td>11:25:00</td>
-                      <td>13:10:00</td>
-                      <td>12/04/2017</td>
-                      <td>01:45:00</td>
-                      <td>01:25:00</td>
-                      <td>01:20:00</td>
-                      <td :class="{'green': false, 'red': true}">+00:20:00</td>
-                      <td>Buono</td>
-                      <td>Nome utente</td>
-                      <td>1°</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('ProgramName')">Finestra02.pgm</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Dimensions')">X: 1210; Y:900; Z: 63</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quantity')">1</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('StartTime')">11:25:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EndTime')">13:10:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Date')">12/04/2017</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('EffectiveTime')">01:45:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('AverageTime')">01:25:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('TheoreticalTime')">01:20:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Deviation')" :class="{'green': false, 'red': true}">+00:20:00</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('Quality')">Buono</td>
+                      <td :style="{width:(100/visibleColumns.length)+'%'}" v-if="isVisible('OperatorName')">Nome utente</td>
+                      <!-- <td v-if="isVisible('Shift')">1°</td> -->
                       <td></td>
                   </tr>
               </tbody>
           </table>
+          <div class="pagination">
+              <button  @click="selectPage(selectedPage-1)"><i class="fa fa-angle-double-left"></i></button>
+              <button class="page" :class="{active: selectedPage == paginator.min + p}"
+                      v-for="(p, idx) in paginator.count" :key="'page' + idx"
+                      @click="selectPage(paginator.min + p)">{{paginator.min + p}}</button>
+              <button @click="selectPage(selectedPage+1)"><i class="fa fa-angle-double-right"></i></button>
+            </div>
           </div>
     </div>
 </div>
diff --git a/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts b/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts
index 61a4a3e8..dbe2589c 100644
--- a/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts
+++ b/Step/wwwroot/src/modules/base-components/modal-report-select-column.ts
@@ -36,7 +36,7 @@ export default class ModalReportSelectColumn extends Vue {
                             {id: "OperatorName", label: this.$options.filters.localize("modal_report_select_column_operator_name", "Nome operatore")},
                             {id: "StartTime", label: this.$options.filters.localize("modal_report_select_column_start_time", "Ora inizio")},
                             {id: "TheoreticalTime", label: this.$options.filters.localize("modal_report_select_column_theoretical_time", "Tempo teorico")},
-                            {id: "Shift", label: this.$options.filters.localize("modal_report_select_column_shift", "Turno")},
+                            // {id: "Shift", label: this.$options.filters.localize("modal_report_select_column_shift", "Turno")},
                             {id: "EndTime", label: this.$options.filters.localize("modal_report_select_column_end_time", "Ora fine")}];
 
   allSelectedColumn = false;

From a5a586224e063f6e45ce93cae8ace89fadc54e6e Mon Sep 17 00:00:00 2001
From: Alessandro <a.francia@teamdev.it>
Date: Thu, 24 Jan 2019 17:48:12 +0100
Subject: [PATCH 8/9] card-report-timeline

---
 Step/wwwroot/assets/styles/base/card.less     | 1784 +++++++++++------
 Step/wwwroot/assets/styles/style.css          | 1226 ++++++++++-
 .../components/card-report-timeline.ts        |   97 +
 .../components/card-report-timeline.vue       |  152 ++
 .../app_modules/reports/components/reports.ts |    4 +-
 .../reports/components/reports.vue            |    1 +
 6 files changed, 2663 insertions(+), 601 deletions(-)
 create mode 100644 Step/wwwroot/src/app_modules/reports/components/card-report-timeline.ts
 create mode 100644 Step/wwwroot/src/app_modules/reports/components/card-report-timeline.vue

diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less
index 6377a4ba..b74511f7 100644
--- a/Step/wwwroot/assets/styles/base/card.less
+++ b/Step/wwwroot/assets/styles/base/card.less
@@ -4297,608 +4297,1194 @@
     }
 }
 
-
-/* Versione zeplin machine status non cancellare*/
-
-// .card-report-machine-status{
-//     width: 100%;
-//     height: 100%;
-//     display: flex;
-//     .reports-box-body-left {
-//         width: 1455px;
-//         height: 100%;
-//         .body-left-header, .body-left-header-machinestatus{
-//             width: 100%;
-//             height: 70px;
-//             display: flex;
-//             flex-flow: row;
-//             margin-top: 18px;
-//             border-right: solid 2px @color-whitegrey;
-//             position: relative;
-//             margin-bottom: 16px;
-//             .mx-datepicker-range{
-//               width: 170px;
-//               height: 70px;
-//               .mx-input-wrapper{
-//                 margin-right: 24px;
-//                 width: 253px;
-//                 .mx-input{
-//                   width: 253px;
-//                   height: 50px;
-//                   border-radius: 2px;
-//                   box-shadow: 0 1px 2px 0 @color-black-40;
-//                   border: solid 1px @color-silver;                     
-//                   font-size: 18px;
-//                   line-height: 1.11;
-//                   color: @color-greyish-brown;
-//                   padding-left: 16px;
-//                 }
-//               }
-//             }
-//             > div {
-//               display: flex;
-//               flex-flow: column;
-//               height: 70px;
-//               margin-right: 24px;
-//               label.intervaldate{
-//                 width: 253px;
-//               }
-//               select{
-//                 width: 192px;
-//                 height: 48px;
-//                 border-radius: 2px;
-//                 box-shadow: 0 1px 2px 0 @color-black-40;
-//                 border: solid 1px @color-silver;                     
-//                 font-size: 18px;
-//                 line-height: 1.11;
-//                 color: @color-greyish-brown;
-//                 padding-left: 16px; 
-//               }
-//               div.interval-time{
-//                 display: flex;
-//                 flex-flow: row;
-//                 input[type="time"]{
-//                   width: 112px;
-//                   height: 48px;
-//                   border-radius: 2px;
-//                   box-shadow: inset 0 1px 3px 0 @color-black-50;
-//                   font-size: 18px;
-//                   line-height: 1.11;
-//                   color: @color-silver;
-//                   border: none;
-//                 }
-//                 input[type="time"]:first-child{
-//                   margin-right: 16px;
-//                 }
-//                 input[type="time"]::-webkit-inner-spin-button {
-//                   -webkit-appearance: none;
-//                   display: none;
-//                   border:none;
-//                 }
-//               }
-//               input.program{
-//                 width: 256px;
-//                 height: 48px;
-//                 border-radius: 2px;
-//                 box-shadow: inset 0 1px 3px 0 @color-black-50;
-//                 font-size: 18px;
-//                 line-height: 1.11;
-//                 color: @color-silver;
-//                 padding-left: 16px;
-//                 border: none;
-//               }
-//               .reports-select-operator{
-//                 width: 192px;
-//                 height: 48px;
-//                 border-radius: 2px;
-//                 box-shadow: 0 1px 2px 0 @color-black-40;
-//                 font-size: 18px;
-//                 line-height: 1.11;
-//                 color: @color-greyish-brown;
-//               }
-//               .reports-select-shift{
-//                 width: 144px;
-//                 height: 48px;
-//                 border-radius: 2px;
-//                 box-shadow: 0 1px 2px 0 @color-black-40;
-//               }
-//             }
+.card-report-timeline{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    .reports-box-body-left {
+        width: 1455px;
+        height: 100%;
+        .body-left-header, .body-left-header-machinestatus{
+            width: 100%;
+            height: 70px;
+            display: flex;
+            flex-flow: row;
+            margin-top: 18px;
+            position: relative;
+            margin-bottom: 16px;
+            .mx-datepicker-range{
+              width: 170px;
+              height: 70px;
+              .mx-input-wrapper{
+                margin-right: 24px;
+                width: 253px;
+                .mx-input{
+                  width: 253px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                  border: solid 1px @color-silver;                     
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                  padding-left: 16px;
+                }
+              }
+            }
+            > div {
+              display: flex;
+              flex-flow: column;
+              height: 70px;
+              margin-right: 24px;
+              label{
+                font-size: 14px;
+                line-height: 1.29;
+                color: @color-warm-grey;
+              }
+              label.intervaldate{
+                width: 253px;
+                font-size: 14px;
+                line-height: 1.29;
+                color: @color-warm-grey;
+              }
+              select{
+                width: 192px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+                border: solid 1px @color-silver;                     
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                padding-left: 16px; 
+              }
+              div.interval-time{
+                display: flex;
+                flex-flow: row;
+                input[type="time"]{
+                  width: 96px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: inset 0 1px 3px 0 @color-black-50;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-silver;
+                  border: none;
+                  padding-left: 16px;
+                }
+                input[type="time"]:first-child{
+                  margin-right: 16px;
+                }
+                input[type="time"]::-webkit-inner-spin-button {
+                  -webkit-appearance: none;
+                  display: none;
+                  border:none;
+                }
+              }
+              input.program{
+                width: 256px;
+                height: 46px;
+                border-radius: 2px;
+                box-shadow: inset 0 1px 3px 0 @color-black-50;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-silver;
+                padding-left: 16px;
+                border: none;
+              }
+              .reports-select-operator{
+                width: 192px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+              }
+              .reports-select-shift{
+                width: 144px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+              }
+            }
 
 
-//             .multiselect{
-//                 z-index: 100;
-//                 label{
-//                   font-size: 14px;
-//                   line-height: 1.29;
-//                   color: @color-warm-grey;
-//                 }
-//               }
-//               .selectBox{
-//                   position: relative;
-//                   width: 144px;
-//               }
-//               .selectBox select{
-//                 width: 100%;
-//                 padding: 8px;
-//                 cursor: pointer;
-//                 height: 49px;
-//                 font-size: 18px;
-//                 line-height: 1.11;
-//                 color: @color-greyish-brown;
-//                 box-shadow: 0 1px 2px @color-black-40;
-//                 border-radius: 2px;
-//                   option{
-//                       display: none;
-//                   }
-//               }
-//               .selectBoxU{
-//                 position: relative;
-//                 width: 192px;
-//             }
-//             .selectBoxU select{
-//               width: 100%;
-//               padding: 8px;
-//               cursor: pointer;
-//               height: 49px;
-//               font-size: 18px;
-//               line-height: 1.11;
-//               color: @color-greyish-brown;
-//               box-shadow: 0 1px 2px @color-black-40;
-//               border-radius: 2px;
-//                 option{
-//                     display: none;
-//                 }
-//             }
-//               .overSelect{
-//                   position: absolute;
-//                   left: 0;
-//                   right: 0;
-//                   top: 0;
-//                   bottom: 0;
-//               }
-//               .checkboxes, .checkboxesU{
-//                   display: none;
-//               }
-//               .checkboxesView, .checkboxesViewUser{
-//                   width: calc(~"100% - 8px");;
-//                   background-color: #fff;
-//                   display: block;
-//                   z-index: 100;
-//                   padding: 6px 4px;
-//                   box-shadow: 0 3px 5px 0 @color-black-40;
-//                   label{
-//                       font-size: 18px;
-//                       margin:2px;
-//                       display: flex;
-//                       flex-flow: row;
-//                   }
-//                   .label-state{
-//                       margin-left: 12px;
-//                   }
-//               }
-//         }
-//         .body-left-header-machinestatus{
-//           border-right: 0px;
-//         }
-//         .body-left-center {
-//           width: 1448px;
-//           max-height: 681px;
-//           display: flex;
-//           flex-flow: column;
-//           .body-left-center-container{
-//             width: 100%;
-//             table{
-//               table-layout: fixed;
-//               width: 100%;
-//               border-collapse: collapse;
-//             }
-//             thead{
-//                 border-bottom: solid 2px @color-label-grey;
-//                 font-size: 14px;
-//                 line-height: 1.29;
-//                 color: @color-darkish-blue;
-//                 display: block;
-//                 width: 1431px;
-//             }
-//             thead tr th{
-//                 height: 48px;
-//             }
-//             tr:nth-child(even) {background: #FFF }
-//             tr:nth-child(odd) {background: #dddddd }
+            .multiselect{
+                z-index: 100;
+                label{
+                  font-size: 14px;
+                  line-height: 1.29;
+                  color: @color-warm-grey;
+                }
+              }
+              .selectBoxU{
+                position: relative;
+                width: 192px;
+            }
+            .selectBoxU select{
+              width: 100%;
+              padding: 8px;
+              cursor: pointer;
+              height: 48px;
+              font-size: 18px;
+              line-height: 1.11;
+              color: @color-greyish-brown;
+              box-shadow: 0 1px 2px @color-black-40;
+              border-radius: 2px;
+                option{
+                    display: none;
+                }
+            }
+              .overSelect{
+                  position: absolute;
+                  left: 0;
+                  right: 0;
+                  top: 0;
+                  bottom: 0;
+              }
+              .checkboxes, .checkboxesU{
+                  display: none;
+              }
+              .checkboxesView, .checkboxesViewUser{
+                  width: calc(~"100% - 8px");;
+                  background-color: #fff;
+                  display: block;
+                  z-index: 100;
+                  padding: 6px 4px;
+                  box-shadow: 0 3px 5px 0 @color-black-40;
+                  label{
+                      font-size: 18px;
+                      margin:2px;
+                      display: flex;
+                      flex-flow: row;
+                  }
+                  .label-state{
+                      margin-left: 12px;
+                  }
+              }
+        }
+        .body-left-header-machinestatus{
+          border-right: 0px;
+        }
+        .body-left-center {
+            width: 1448px;
+            max-height: 681px;
+            display: flex;
+            flex-flow: column;
+            .body-left-center-container{
+              width: 100%;
+              table{
+                table-layout: fixed;
+                width: 100%;
+                border-collapse: collapse;
+              }
+              thead{
+                  border-bottom: solid 2px @color-label-grey;
+                  font-size: 14px;
+                  line-height: 1.29;
+                  color: @color-darkish-blue;
+                  display: block;
+                  width: 1431px;
+              }
+              thead tr th{
+                  height: 48px;
+              }
+              tr:nth-child(even) {background: #FFF }
+              tr:nth-child(odd) {background: #dddddd }
 
-//             // thead tr{
-//             //   width: 1448px;
-//             // }
+              // thead tr{
+              //   width: 1448px;
+              // }
 
-//             thead tr:nth-child(odd){
-//               background: #FFF
-//             }
+              thead tr:nth-child(odd){
+                background: #FFF
+              }
 
-//             th:nth-child(1), td:nth-child(1){
-//                 width:162px;
-//                 max-width: 162px;
-//                 text-align: center;
-//             }  
-//             th:nth-child(2), td:nth-child(2){
-//               width:139px;
-//               max-width: 139px;
-//               text-align: center;
-//             }
-//             th:nth-child(3), td:nth-child(3){
-//                 width:83px;
-//                 max-width:83px;
-//                 text-align: center;
-//             }
-//             th:nth-child(4), td:nth-child(4){
-//               width:83px;
-//               max-width:83px;
-//               text-align: center;
-//             }
-//             th:nth-child(5), td:nth-child(5){
-//               width:83px;
-//               max-width:83px;
-//               text-align: center;
-//             }
-//             th:nth-child(6), td:nth-child(6){
-//               width:83px;
-//               max-width:83px;
-//               text-align: center;
-//             }
-//             th:nth-child(7), td:nth-child(7){
-//                 width:97px;
-//                 max-width:97px;
-//                 text-align: center;
-//             }
-//             th:nth-child(8), td:nth-child(8){
-//               width:97px;
-//               max-width:97px;
-//               text-align: center;
-//             }
-//             th:nth-child(9), td:nth-child(9){
-//               width:97px;
-//               max-width:97px;
-//               text-align: center;
-//             }
-//             th:nth-child(10), td:nth-child(10){
-//               width:115px;
-//               max-width:115px;
-//               text-align: center;
-//             }
-//             th:nth-child(11), td:nth-child(11){
-//               width:97px;
-//               max-width:97px;
-//               text-align: center;
-//             }
-//             th:nth-child(12), td:nth-child(12){
-//               width:148px;
-//               max-width:148px;
-//               text-align: center;
-//             }
-//             th:nth-child(13), td:nth-child(13){
-//               width:97px;
-//               max-width:97px;
-//               text-align: center;
-//             }
-//             th:last-child{
-//               font-size: 23px;
-//               font-weight: bold;
-//               cursor: pointer;
-//             }
-//             th, td{
-//                 overflow: hidden;
-//                 div{
-//                     overflow: hidden;
-//                             max-height: 64px;
-//                 }
-//             }
-//             tbody{
-//                 display: block;
-//                 height: 631px;
-//                 width: 1448px;
-//                 overflow: scroll;
-//                 tr{
-//                     cursor: pointer;
-//                     height:  64px;
-//                     padding: 10px;
-//                     font-size: 14px;
-//                     line-height: 1.29;
-//                     color: @color-greyish-brown;
-//                     td{
-//                         text-align: center;
-//                         &.green{
-//                           color: @color-apple-green;
-//                         }
-//                         &.red{
-//                           color: @color-scarlet;
-//                         }
-//                     }
-//                     td:last-child{
-//                       width: 10px;
-//                     }
-//                     &.selected{
-//                         background-color: rgba(23, 145, 255, 0.75);
-//                         color: @color-white;
-//                         font-weight: 600;
-//                     }
-//                 }
-//             }
-//             .body-left-center-left{
-//               width: 360px;
-//               height: 616px;
-//               display: flex;
-//               flex-flow: column;
-//               align-items: center;
-//               border: solid 1px @color-whitegrey;
-//               overflow-y: auto;
-//               .multiselect{
-//                 z-index: 100;
-//                 margin-bottom: 24px;
-//                 margin-top: 16px;
-//                 label{
-//                   font-size: 14px;
-//                   line-height: 1.29;
-//                   color: @color-warm-grey;
-//                 }
-//               }
-//               .selectBox{
-//                   position: relative;
-//                   width: 328px;
-//                   height: 64px;
-//               }
-//               .selectBox select{
-//                 width: 100%;
-//                 padding: 8px;
-//                 cursor: pointer;
-//                 height: 64px;
-//                 font-size: 18px;
-//                 line-height: 1.11;
-//                 color: @color-greyish-brown;
-//                 margin-bottom: 0;
-//                 margin-top: 0;
-//                   option{
-//                       display: none;
-//                   }
-//               }
-//               .overSelect{
-//                 position: absolute;
-//                 left: 0;
-//                 right: 0;
-//                 top: 0;
-//                 bottom: 0;
-//             }
-//             .checkboxes, .checkboxesU{
-//                 display: none;
-//             }
-//             .checkboxesView, .checkboxesViewUser{
-//                 width: calc(~"100% - 8px");;
-//                 background-color: #fff;
-//                 display: block;
-//                 z-index: 100;
-//                 padding: 6px 4px;
-//                 box-shadow: 0 3px 5px 0 @color-black-40;
-//                 label{
-//                     font-size: 18px;
-//                     margin:2px;
-//                     display: flex;
-//                     flex-flow: row;
-//                 }
-//                 .label-state{
-//                     margin-left: 12px;
-//                 }
-//             }
-//               div{
-//                 select{
-//                   width: 328px;
-//                   height: 48px;
-//                   border-radius: 2px;
-//                   box-shadow: 0 1px 2px 0 @color-black-40;
-//                   margin-bottom: 24px;
-//                   margin-top: 16px;
-//                   padding-left: 16px;
-//                   font-size: 18px;
-//                   line-height: 1.11;
-//                   color: @color-greyish-brown;
-//                 }
-//                 .accordion-dropdown{
-//                   header {
-//                     height: 64px;
-//                     width: 312px;
-//                     border-radius: 2px;
-//                     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-//                     display: flex;
-//                     justify-content: space-between;
-//                     align-items: center;
-//                     color: @color-darkish-blue;
-//                     line-height: 1;
-//                     font-size: 18px;
-//                     padding-left: 16px;
-//                     cursor: pointer;
-//                     span {
-//                         width: 100%;
-//                     }
-//                     .expander {
-//                         margin: 0 12px;
-//                         line-height: 28px;
-//                         height: 28px;
-//                         width: 28px;
-//                         font-size: 28px;
-//                     }
-//                   }
-//                   section {
-//                     width: 328px;
-//                     min-height: 0;
-//                     max-height: 0;
-//                     transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
-//                     overflow: hidden;
-//                     &.expanded {
-//                       min-height: 64px;
-//                       background-color: rgba(255, 255, 255, 0.1);
-//                       max-height: 1000px;
-//                     }
-//                     .item {
-//                         height: 64px;
-//                         width: 100%;
-//                         line-height: 64px;
-//                         background-color: @color-white2;
-//                     }
-            
-//                     .dropdown{
-//                       // background-color: @color-white2;
-//                       height: 100%;
-//                       margin-top: 2px;
-//                       .filename{
-//                           display: flex;
-//                           height: 64px;
-//                           align-items: center;
-//                           cursor: pointer;
-//                           i{
-//                             color: @color-cyan-blue;
-//                             margin: 0 20px 0 20px;
-//                           }
-//                           span{
-//                               width: 100%;
-//                               font-size: 18px;
-//                               line-height: 1;
-//                               color: @color-darkish-blue;
-//                           }
-            
-//                           &.selected{
-//                             span, i{
-//                               color:#4b4b4b;
-//                             }
-//                           }
-//                       }
-//                       .filename.selected{
-//                           background-color: rgba(255, 255, 255, 0.8);
-//                       }
-                      
-//                     } 
-//                   }
-//                 }
-//               }
-//             }
-//           }
+              th:nth-child(1), td:nth-child(1){
+                  width:162px;
+                  max-width: 162px;
+                  text-align: center;
+              }  
+              th:nth-child(2), td:nth-child(2){
+                width:139px;
+                max-width: 139px;
+                text-align: center;
+              }
+              th:nth-child(3), td:nth-child(3){
+                  width:83px;
+                  max-width:83px;
+                  text-align: center;
+              }
+              th:nth-child(4), td:nth-child(4){
+                width:83px;
+                max-width:83px;
+                text-align: center;
+              }
+              th:nth-child(5), td:nth-child(5){
+                width:83px;
+                max-width:83px;
+                text-align: center;
+              }
+              th:nth-child(6), td:nth-child(6){
+                width:83px;
+                max-width:83px;
+                text-align: center;
+              }
+              th:nth-child(7), td:nth-child(7){
+                  width:97px;
+                  max-width:97px;
+                  text-align: center;
+              }
+              th:nth-child(8), td:nth-child(8){
+                width:97px;
+                max-width:97px;
+                text-align: center;
+              }
+              th:nth-child(9), td:nth-child(9){
+                width:97px;
+                max-width:97px;
+                text-align: center;
+              }
+              th:nth-child(10), td:nth-child(10){
+                width:115px;
+                max-width:115px;
+                text-align: center;
+              }
+              th:nth-child(11), td:nth-child(11){
+                width:97px;
+                max-width:97px;
+                text-align: center;
+              }
+              th:nth-child(12), td:nth-child(12){
+                width:148px;
+                max-width:148px;
+                text-align: center;
+              }
+              th:nth-child(13), td:nth-child(13){
+                width:97px;
+                max-width:97px;
+                text-align: center;
+              }
+              th:last-child{
+                font-size: 23px;
+                font-weight: bold;
+                cursor: pointer;
+              }
+              th, td{
+                  overflow: hidden;
+                  div{
+                      overflow: hidden;
+                              max-height: 64px;
+                  }
+              }
+              tbody{
+                  display: block;
+                  height: 631px;
+                  width: 1448px;
+                  overflow: scroll;
+                  tr{
+                      // cursor: pointer;
+                      height:  64px;
+                      padding: 10px;
+                      font-size: 14px;
+                      line-height: 1.29;
+                      color: @color-greyish-brown;
+                      td{
+                          text-align: center;
+                          &.green{
+                            color: @color-apple-green;
+                          }
+                          &.red{
+                            color: @color-scarlet;
+                          }
+                      }
+                      td:last-child{
+                        width: 10px;
+                      }
+                      &.selected{
+                          background-color: rgba(23, 145, 255, 0.75);
+                          color: @color-white;
+                          font-weight: 600;
+                      }
+                  }
+              }
+              .body-left-center-left{
+                width: 360px;
+                height: 616px;
+                display: flex;
+                flex-flow: column;
+                align-items: center;
+                border: solid 1px @color-whitegrey;
+                overflow-y: auto;
+                .multiselect{
+                  z-index: 100;
+                  margin-bottom: 24px;
+                  margin-top: 16px;
+                  label{
+                    font-size: 14px;
+                    line-height: 1.29;
+                    color: @color-warm-grey;
+                  }
+                }
+                .selectBox{
+                    position: relative;
+                    width: 328px;
+                    height: 64px;
+                }
+                .selectBox select{
+                  width: 100%;
+                  padding: 8px;
+                  cursor: pointer;
+                  height: 64px;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                  margin-bottom: 0;
+                  margin-top: 0;
+                    option{
+                        display: none;
+                    }
+                }
+                .overSelect{
+                  position: absolute;
+                  left: 0;
+                  right: 0;
+                  top: 0;
+                  bottom: 0;
+              }
+              .checkboxes, .checkboxesU{
+                  display: none;
+              }
+              .checkboxesView, .checkboxesViewUser{
+                  width: calc(~"100% - 8px");;
+                  background-color: #fff;
+                  display: block;
+                  z-index: 100;
+                  padding: 6px 4px;
+                  box-shadow: 0 3px 5px 0 @color-black-40;
+                  label{
+                      font-size: 18px;
+                      margin:2px;
+                      display: flex;
+                      flex-flow: row;
+                  }
+                  .label-state{
+                      margin-left: 12px;
+                  }
+              }
+                div{
+                  select{
+                    width: 328px;
+                    height: 48px;
+                    border-radius: 2px;
+                    box-shadow: 0 1px 2px 0 @color-black-40;
+                    margin-bottom: 24px;
+                    margin-top: 16px;
+                    padding-left: 16px;
+                    font-size: 18px;
+                    line-height: 1.11;
+                    color: @color-greyish-brown;
+                  }
+                  .accordion-dropdown{
+                    header {
+                      height: 64px;
+                      width: 312px;
+                      border-radius: 2px;
+                      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+                      display: flex;
+                      justify-content: space-between;
+                      align-items: center;
+                      color: @color-darkish-blue;
+                      line-height: 1;
+                      font-size: 18px;
+                      padding-left: 16px;
+                      cursor: pointer;
+                      span {
+                          width: 100%;
+                      }
+                      .expander {
+                          margin: 0 12px;
+                          line-height: 28px;
+                          height: 28px;
+                          width: 28px;
+                          font-size: 28px;
+                      }
+                    }
+                    section {
+                      width: 328px;
+                      min-height: 0;
+                      max-height: 0;
+                      transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
+                      overflow: hidden;
+                      &.expanded {
+                        min-height: 64px;
+                        background-color: rgba(255, 255, 255, 0.1);
+                        max-height: 1000px;
+                      }
+                      .item {
+                          height: 64px;
+                          width: 100%;
+                          line-height: 64px;
+                          background-color: @color-white2;
+                      }
+              
+                      .dropdown{
+                        // background-color: @color-white2;
+                        height: 100%;
+                        margin-top: 2px;
+                        .filename{
+                            display: flex;
+                            height: 64px;
+                            align-items: center;
+                            cursor: pointer;
+                            i{
+                              color: @color-cyan-blue;
+                              margin: 0 20px 0 20px;
+                            }
+                            span{
+                                width: 100%;
+                                font-size: 18px;
+                                line-height: 1;
+                                color: @color-darkish-blue;
+                            }
+              
+                            &.selected{
+                              span, i{
+                                color:#4b4b4b;
+                              }
+                            }
+                        }
+                        .filename.selected{
+                            background-color: rgba(255, 255, 255, 0.8);
+                        }
+                        
+                      } 
+                    }
+                  }
+                }
+              }
+            }
 
-//           .body-left-center-footer{
-//             height: 64px;
-//             width: 100%;
-//             border: solid 1px @color-whitegrey;
-//             .header-title{
-//               width: 360px;
-//               height: 64px;
-//               display: flex;
-//               flex-flow: column;
-//               align-items: center;
-//               justify-content: center;
-//               .title{
-//                 font-size: 14px;
-//                 color: @color-warm-grey;
-//               }
-//               .data-temporal{
-//                 font-size: 18px;
-//                 line-height: 1;
-//                 color: @color-greyish-brown;
-//               }
-//             }
-//           }
-//         }
-//     }
-//     .reports-box-body-right {
-//         width: 327px;
-//         height: 100%;
-//         .body-right-header{
-//           width: 100%;
-//           height: 70px;
-//           display: flex;
-//           flex-flow: row;
-//           margin-top: 18px;
-//           justify-content: flex-end;
-//           .body-right-header-left {
-//             width: 158px;
-//             height: 100%;
-//             display: flex;
-//             align-items: center;
-//             justify-content: center;
-//             border-right: solid 2px @color-whitegrey;
-//             button{
-//               width: 48px;
-//               height: 48px;
-//               border-radius: 2px;
-//               box-shadow: 0 1px 2px 0 @color-black-40;
-//               background-image: linear-gradient(to bottom,@color-white2, @color-silver);
-//               border: none;
-//             }
-//             button.active{
-//               width: 48px;
-//               height: 48px;
-//               border-radius: 2px;
-//               box-shadow: inset 0 1px 3px 0 @color-black-40;
-//               background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
-//               color: @color-clear-blue;
-//               border: none;
-//             }
-//           }
-//           .body-right-header-right {
-//             width: calc(~"100% - 158px");
-//             height: 100%;
-//             display: flex;
-//             align-items: center;
-//             justify-content: center;
-//             button{
-//               width: 48px;
-//               height: 48px;
-//               border-radius: 2px;
-//               box-shadow: 0 1px 2px 0 @color-black-40;
-//               background-image: linear-gradient(to bottom,@color-white2, @color-silver);
-//               border:none;
-//             }
-//             button:first-child{
-//               margin-right: 16px;
-//             }
-//             button:active{
-//               width: 48px;
-//               height: 48px;
-//               border-radius: 2px;
-//               box-shadow: inset 0 1px 3px 0 @color-black-40;
-//               background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
-//               border: none;
-//             }
-//           }
-//         }
-//         .body-right-card{
-//           width: 100%;
-//           height: calc(~"100% - 70px");
-//           display: flex;
-//           flex-flow: column;
-//           align-items: center;
-//           .card-report{
-//             > section {
-//               display: flex;
-//               align-items: center;
-//               justify-content: center; 
-//               .rectangle_gray{
-//                 width: 256px;
-//                 height: 120px;
-//                 border-radius: 2px;
-//                 display: flex;
-//                 flex-flow: column;
-//                 align-items: center;
-//                 justify-content: center;
-//                 background-color: @color-white2;
-//                 label{
-//                   font-size: 18px;
-//                   color: @color-warm-grey;
-//                   margin-bottom: 30px;
-//                 }
-//                 span{
-//                   font-size: 48px;
-//                   font-weight: bold;
-//                   line-height: 0.38;
-//                   color: @color-clear-blue;
-//                 }
-//               }
-//             }
-//           }
-//         }
-//     }
-// }
\ No newline at end of file
+            .body-left-center-footer{
+              height: 64px;
+              width: 100%;
+              border: solid 1px @color-whitegrey;
+              .header-title{
+                width: 360px;
+                height: 64px;
+                display: flex;
+                flex-flow: column;
+                align-items: center;
+                justify-content: center;
+                .title{
+                  font-size: 14px;
+                  color: @color-warm-grey;
+                }
+                .data-temporal{
+                  font-size: 18px;
+                  line-height: 1;
+                  color: @color-greyish-brown;
+                }
+              }
+            }
+          }
+    }
+    .reports-box-body-right {
+        width: 327px;
+        height: 100%;
+        .body-right-header{
+          width: 100%;
+          height: 70px;
+          display: flex;
+          flex-flow: row;
+          margin-top: 18px;
+          justify-content: flex-end;
+          .body-right-header-left {
+            width: 158px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-right: solid 2px @color-whitegrey;
+            button{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: 0 1px 2px 0 @color-black-40;
+              background-image: linear-gradient(to bottom,@color-white2, @color-silver);
+              border: none;
+            }
+            button.active{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: inset 0 1px 3px 0 @color-black-40;
+              background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+              color: @color-clear-blue;
+              border: none;
+            }
+          }
+          .body-right-header-right {
+            width: calc(~"100% - 158px");
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            button{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: 0 1px 2px 0 @color-black-40;
+              background-image: linear-gradient(to bottom,@color-white2, @color-silver);
+              border:none;
+            }
+            button:first-child{
+              margin-right: 16px;
+            }
+            button:active{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: inset 0 1px 3px 0 @color-black-40;
+              background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+              border: none;
+            }
+          }
+        }
+        .body-right-card{
+          width: 100%;
+          height: calc(~"100% - 70px");
+          display: flex;
+          flex-flow: column;
+          align-items: center;
+          .card-report{
+            > section {
+              display: flex;
+              align-items: center;
+              justify-content: center; 
+              .rectangle_gray{
+                width: 256px;
+                height: 120px;
+                border-radius: 2px;
+                display: flex;
+                flex-flow: column;
+                align-items: center;
+                justify-content: center;
+                background-color: @color-white2;
+                label{
+                  font-size: 18px;
+                  color: @color-warm-grey;
+                  margin-bottom: 30px;
+                }
+                span{
+                  font-size: 48px;
+                  font-weight: bold;
+                  line-height: 0.38;
+                  color: @color-clear-blue;
+                }
+              }
+            }
+          }
+        }
+    }
+}
+
+/** Versione zeplin machine status non cancellare
+
+.card-report-machine-status{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    .reports-box-body-left {
+        width: 1455px;
+        height: 100%;
+        .body-left-header, .body-left-header-machinestatus{
+            width: 100%;
+            height: 70px;
+            display: flex;
+            flex-flow: row;
+            margin-top: 18px;
+            border-right: solid 2px @color-whitegrey;
+            position: relative;
+            margin-bottom: 16px;
+            .mx-datepicker-range{
+              width: 170px;
+              height: 70px;
+              .mx-input-wrapper{
+                margin-right: 24px;
+                width: 253px;
+                .mx-input{
+                  width: 253px;
+                  height: 50px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                  border: solid 1px @color-silver;                     
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                  padding-left: 16px;
+                }
+              }
+            }
+            > div {
+              display: flex;
+              flex-flow: column;
+              height: 70px;
+              margin-right: 24px;
+              label.intervaldate{
+                width: 253px;
+              }
+              select{
+                width: 192px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+                border: solid 1px @color-silver;                     
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                padding-left: 16px; 
+              }
+              div.interval-time{
+                display: flex;
+                flex-flow: row;
+                input[type="time"]{
+                  width: 112px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: inset 0 1px 3px 0 @color-black-50;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-silver;
+                  border: none;
+                }
+                input[type="time"]:first-child{
+                  margin-right: 16px;
+                }
+                input[type="time"]::-webkit-inner-spin-button {
+                  -webkit-appearance: none;
+                  display: none;
+                  border:none;
+                }
+              }
+              input.program{
+                width: 256px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: inset 0 1px 3px 0 @color-black-50;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-silver;
+                padding-left: 16px;
+                border: none;
+              }
+              .reports-select-operator{
+                width: 192px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+              }
+              .reports-select-shift{
+                width: 144px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+              }
+            }
+            .multiselect{
+                z-index: 100;
+                label{
+                  font-size: 14px;
+                  line-height: 1.29;
+                  color: @color-warm-grey;
+                }
+              }
+              .selectBox{
+                  position: relative;
+                  width: 144px;
+              }
+              .selectBox select{
+                width: 100%;
+                padding: 8px;
+                cursor: pointer;
+                height: 49px;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                box-shadow: 0 1px 2px @color-black-40;
+                border-radius: 2px;
+                  option{
+                      display: none;
+                  }
+              }
+              .selectBoxU{
+                position: relative;
+                width: 192px;
+            }
+            .selectBoxU select{
+              width: 100%;
+              padding: 8px;
+              cursor: pointer;
+              height: 49px;
+              font-size: 18px;
+              line-height: 1.11;
+              color: @color-greyish-brown;
+              box-shadow: 0 1px 2px @color-black-40;
+              border-radius: 2px;
+                option{
+                    display: none;
+                }
+            }
+              .overSelect{
+                  position: absolute;
+                  left: 0;
+                  right: 0;
+                  top: 0;
+                  bottom: 0;
+              }
+              .checkboxes, .checkboxesU{
+                  display: none;
+              }
+              .checkboxesView, .checkboxesViewUser{
+                  width: calc(~"100% - 8px");;
+                  background-color: #fff;
+                  display: block;
+                  z-index: 100;
+                  padding: 6px 4px;
+                  box-shadow: 0 3px 5px 0 @color-black-40;
+                  label{
+                      font-size: 18px;
+                      margin:2px;
+                      display: flex;
+                      flex-flow: row;
+                  }
+                  .label-state{
+                      margin-left: 12px;
+                  }
+              }
+        }
+        .body-left-header-machinestatus{
+          border-right: 0px;
+        }
+        .body-left-center {
+          width: 1448px;
+          max-height: 681px;
+          display: flex;
+          flex-flow: column;
+          .body-left-center-container{
+            width: 100%;
+            table{
+              table-layout: fixed;
+              width: 100%;
+              border-collapse: collapse;
+            }
+            thead{
+                border-bottom: solid 2px @color-label-grey;
+                font-size: 14px;
+                line-height: 1.29;
+                color: @color-darkish-blue;
+                display: block;
+                width: 1431px;
+            }
+            thead tr th{
+                height: 48px;
+            }
+            tr:nth-child(even) {background: #FFF }
+            tr:nth-child(odd) {background: #dddddd }
+            // thead tr{
+            //   width: 1448px;
+            // }
+            thead tr:nth-child(odd){
+              background: #FFF
+            }
+            th:nth-child(1), td:nth-child(1){
+                width:162px;
+                max-width: 162px;
+                text-align: center;
+            }  
+            th:nth-child(2), td:nth-child(2){
+              width:139px;
+              max-width: 139px;
+              text-align: center;
+            }
+            th:nth-child(3), td:nth-child(3){
+                width:83px;
+                max-width:83px;
+                text-align: center;
+            }
+            th:nth-child(4), td:nth-child(4){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(5), td:nth-child(5){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(6), td:nth-child(6){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(7), td:nth-child(7){
+                width:97px;
+                max-width:97px;
+                text-align: center;
+            }
+            th:nth-child(8), td:nth-child(8){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(9), td:nth-child(9){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(10), td:nth-child(10){
+              width:115px;
+              max-width:115px;
+              text-align: center;
+            }
+            th:nth-child(11), td:nth-child(11){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(12), td:nth-child(12){
+              width:148px;
+              max-width:148px;
+              text-align: center;
+            }
+            th:nth-child(13), td:nth-child(13){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:last-child{
+              font-size: 23px;
+              font-weight: bold;
+              cursor: pointer;
+            }
+            th, td{
+                overflow: hidden;
+                div{
+                    overflow: hidden;
+                            max-height: 64px;
+                }
+            }
+            tbody{
+                display: block;
+                height: 631px;
+                width: 1448px;
+                overflow: scroll;
+                tr{
+                    cursor: pointer;
+                    height:  64px;
+                    padding: 10px;
+                    font-size: 14px;
+                    line-height: 1.29;
+                    color: @color-greyish-brown;
+                    td{
+                        text-align: center;
+                        &.green{
+                          color: @color-apple-green;
+                        }
+                        &.red{
+                          color: @color-scarlet;
+                        }
+                    }
+                    td:last-child{
+                      width: 10px;
+                    }
+                    &.selected{
+                        background-color: rgba(23, 145, 255, 0.75);
+                        color: @color-white;
+                        font-weight: 600;
+                    }
+                }
+            }
+            .body-left-center-left{
+              width: 360px;
+              height: 616px;
+              display: flex;
+              flex-flow: column;
+              align-items: center;
+              border: solid 1px @color-whitegrey;
+              overflow-y: auto;
+              .multiselect{
+                z-index: 100;
+                margin-bottom: 24px;
+                margin-top: 16px;
+                label{
+                  font-size: 14px;
+                  line-height: 1.29;
+                  color: @color-warm-grey;
+                }
+              }
+              .selectBox{
+                  position: relative;
+                  width: 328px;
+                  height: 64px;
+              }
+              .selectBox select{
+                width: 100%;
+                padding: 8px;
+                cursor: pointer;
+                height: 64px;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                margin-bottom: 0;
+                margin-top: 0;
+                  option{
+                      display: none;
+                  }
+              }
+              .overSelect{
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+            }
+            .checkboxes, .checkboxesU{
+                display: none;
+            }
+            .checkboxesView, .checkboxesViewUser{
+                width: calc(~"100% - 8px");;
+                background-color: #fff;
+                display: block;
+                z-index: 100;
+                padding: 6px 4px;
+                box-shadow: 0 3px 5px 0 @color-black-40;
+                label{
+                    font-size: 18px;
+                    margin:2px;
+                    display: flex;
+                    flex-flow: row;
+                }
+                .label-state{
+                    margin-left: 12px;
+                }
+            }
+              div{
+                select{
+                  width: 328px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                  margin-bottom: 24px;
+                  margin-top: 16px;
+                  padding-left: 16px;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                }
+                .accordion-dropdown{
+                  header {
+                    height: 64px;
+                    width: 312px;
+                    border-radius: 2px;
+                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    color: @color-darkish-blue;
+                    line-height: 1;
+                    font-size: 18px;
+                    padding-left: 16px;
+                    cursor: pointer;
+                    span {
+                        width: 100%;
+                    }
+                    .expander {
+                        margin: 0 12px;
+                        line-height: 28px;
+                        height: 28px;
+                        width: 28px;
+                        font-size: 28px;
+                    }
+                  }
+                  section {
+                    width: 328px;
+                    min-height: 0;
+                    max-height: 0;
+                    transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
+                    overflow: hidden;
+                    &.expanded {
+                      min-height: 64px;
+                      background-color: rgba(255, 255, 255, 0.1);
+                      max-height: 1000px;
+                    }
+                    .item {
+                        height: 64px;
+                        width: 100%;
+                        line-height: 64px;
+                        background-color: @color-white2;
+                    }
+         
+                    .dropdown{
+                      // background-color: @color-white2;
+                      height: 100%;
+                      margin-top: 2px;
+                      .filename{
+                          display: flex;
+                          height: 64px;
+                          align-items: center;
+                          cursor: pointer;
+                          i{
+                            color: @color-cyan-blue;
+                            margin: 0 20px 0 20px;
+                          }
+                          span{
+                              width: 100%;
+                              font-size: 18px;
+                              line-height: 1;
+                              color: @color-darkish-blue;
+                          }
+         
+                          &.selected{
+                            span, i{
+                              color:#4b4b4b;
+                            }
+                          }
+                      }
+                      .filename.selected{
+                          background-color: rgba(255, 255, 255, 0.8);
+                      }
+                   
+                    } 
+                  }
+                }
+              }
+            }
+          }
+          .body-left-center-footer{
+            height: 64px;
+            width: 100%;
+            border: solid 1px @color-whitegrey;
+            .header-title{
+              width: 360px;
+              height: 64px;
+              display: flex;
+              flex-flow: column;
+              align-items: center;
+              justify-content: center;
+              .title{
+                font-size: 14px;
+                color: @color-warm-grey;
+              }
+              .data-temporal{
+                font-size: 18px;
+                line-height: 1;
+                color: @color-greyish-brown;
+              }
+            }
+          }
+        }
+    }
+    .reports-box-body-right {
+        width: 327px;
+        height: 100%;
+        .body-right-header{
+          width: 100%;
+          height: 70px;
+          display: flex;
+          flex-flow: row;
+          margin-top: 18px;
+          justify-content: flex-end;
+          .body-right-header-left {
+            width: 158px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-right: solid 2px @color-whitegrey;
+            button{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: 0 1px 2px 0 @color-black-40;
+              background-image: linear-gradient(to bottom,@color-white2, @color-silver);
+              border: none;
+            }
+            button.active{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: inset 0 1px 3px 0 @color-black-40;
+              background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+              color: @color-clear-blue;
+              border: none;
+            }
+          }
+          .body-right-header-right {
+            width: calc(~"100% - 158px");
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            button{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: 0 1px 2px 0 @color-black-40;
+              background-image: linear-gradient(to bottom,@color-white2, @color-silver);
+              border:none;
+            }
+            button:first-child{
+              margin-right: 16px;
+            }
+            button:active{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: inset 0 1px 3px 0 @color-black-40;
+              background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+              border: none;
+            }
+          }
+        }
+        .body-right-card{
+          width: 100%;
+          height: calc(~"100% - 70px");
+          display: flex;
+          flex-flow: column;
+          align-items: center;
+          .card-report{
+            > section {
+              display: flex;
+              align-items: center;
+              justify-content: center; 
+              .rectangle_gray{
+                width: 256px;
+                height: 120px;
+                border-radius: 2px;
+                display: flex;
+                flex-flow: column;
+                align-items: center;
+                justify-content: center;
+                background-color: @color-white2;
+                label{
+                  font-size: 18px;
+                  color: @color-warm-grey;
+                  margin-bottom: 30px;
+                }
+                span{
+                  font-size: 48px;
+                  font-weight: bold;
+                  line-height: 0.38;
+                  color: @color-clear-blue;
+                }
+              }
+            }
+          }
+        }
+    }
+} */
\ No newline at end of file
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index a2e345cf..b7357e39 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -10345,7 +10345,1231 @@ footer .container button.big:before {
   line-height: 0.38;
   color: #1791ff;
 }
-/* Versione zeplin machine status non cancellare*/
+.card-report-timeline {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.card-report-timeline .reports-box-body-left {
+  width: 1455px;
+  height: 100%;
+}
+.card-report-timeline .reports-box-body-left .body-left-header,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  flex-flow: row;
+  margin-top: 18px;
+  position: relative;
+  margin-bottom: 16px;
+}
+.card-report-timeline .reports-box-body-left .body-left-header .mx-datepicker-range,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range {
+  width: 170px;
+  height: 70px;
+}
+.card-report-timeline .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper {
+  margin-right: 24px;
+  width: 253px;
+}
+.card-report-timeline .reports-box-body-left .body-left-header .mx-datepicker-range .mx-input-wrapper .mx-input,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .mx-datepicker-range .mx-input-wrapper .mx-input {
+  width: 253px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  border: solid 1px #bbbcbc;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  padding-left: 16px;
+}
+.card-report-timeline .reports-box-body-left .body-left-header > div,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div {
+  display: flex;
+  flex-flow: column;
+  height: 70px;
+  margin-right: 24px;
+}
+.card-report-timeline .reports-box-body-left .body-left-header > div label,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div label {
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
+}
+.card-report-timeline .reports-box-body-left .body-left-header > div label.intervaldate,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div label.intervaldate {
+  width: 253px;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
+}
+.card-report-timeline .reports-box-body-left .body-left-header > div select,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div select {
+  width: 192px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  border: solid 1px #bbbcbc;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  padding-left: 16px;
+}
+.card-report-timeline .reports-box-body-left .body-left-header > div div.interval-time,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div div.interval-time {
+  display: flex;
+  flex-flow: row;
+}
+.card-report-timeline .reports-box-body-left .body-left-header > div div.interval-time input[type="time"],
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"] {
+  width: 96px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #bbbcbc;
+  border: none;
+  padding-left: 16px;
+}
+.card-report-timeline .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]:first-child,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]:first-child {
+  margin-right: 16px;
+}
+.card-report-timeline .reports-box-body-left .body-left-header > div div.interval-time input[type="time"]::-webkit-inner-spin-button,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div div.interval-time input[type="time"]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  display: none;
+  border: none;
+}
+.card-report-timeline .reports-box-body-left .body-left-header > div input.program,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div input.program {
+  width: 256px;
+  height: 46px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #bbbcbc;
+  padding-left: 16px;
+  border: none;
+}
+.card-report-timeline .reports-box-body-left .body-left-header > div .reports-select-operator,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div .reports-select-operator {
+  width: 192px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.card-report-timeline .reports-box-body-left .body-left-header > div .reports-select-shift,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div .reports-select-shift {
+  width: 144px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+}
+.card-report-timeline .reports-box-body-left .body-left-header .multiselect,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .multiselect {
+  z-index: 100;
+}
+.card-report-timeline .reports-box-body-left .body-left-header .multiselect label,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .multiselect label {
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
+}
+.card-report-timeline .reports-box-body-left .body-left-header .selectBoxU,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .selectBoxU {
+  position: relative;
+  width: 192px;
+}
+.card-report-timeline .reports-box-body-left .body-left-header .selectBoxU select,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .selectBoxU select {
+  width: 100%;
+  padding: 8px;
+  cursor: pointer;
+  height: 48px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
+  border-radius: 2px;
+}
+.card-report-timeline .reports-box-body-left .body-left-header .selectBoxU select option,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .selectBoxU select option {
+  display: none;
+}
+.card-report-timeline .reports-box-body-left .body-left-header .overSelect,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .overSelect {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.card-report-timeline .reports-box-body-left .body-left-header .checkboxes,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .checkboxes,
+.card-report-timeline .reports-box-body-left .body-left-header .checkboxesU,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .checkboxesU {
+  display: none;
+}
+.card-report-timeline .reports-box-body-left .body-left-header .checkboxesView,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .checkboxesView,
+.card-report-timeline .reports-box-body-left .body-left-header .checkboxesViewUser,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser {
+  width: calc(100% - 8px);
+  background-color: #fff;
+  display: block;
+  z-index: 100;
+  padding: 6px 4px;
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
+}
+.card-report-timeline .reports-box-body-left .body-left-header .checkboxesView label,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .checkboxesView label,
+.card-report-timeline .reports-box-body-left .body-left-header .checkboxesViewUser label,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser label {
+  font-size: 18px;
+  margin: 2px;
+  display: flex;
+  flex-flow: row;
+}
+.card-report-timeline .reports-box-body-left .body-left-header .checkboxesView .label-state,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .checkboxesView .label-state,
+.card-report-timeline .reports-box-body-left .body-left-header .checkboxesViewUser .label-state,
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser .label-state {
+  margin-left: 12px;
+}
+.card-report-timeline .reports-box-body-left .body-left-header-machinestatus {
+  border-right: 0px;
+}
+.card-report-timeline .reports-box-body-left .body-left-center {
+  width: 1448px;
+  max-height: 681px;
+  display: flex;
+  flex-flow: column;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container {
+  width: 100%;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container thead {
+  border-bottom: solid 2px #979797;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #002680;
+  display: block;
+  width: 1431px;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container thead tr th {
+  height: 48px;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(even) {
+  background: #FFF;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(odd) {
+  background: #dddddd;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container thead tr:nth-child(odd) {
+  background: #FFF;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(1),
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(1) {
+  width: 162px;
+  max-width: 162px;
+  text-align: center;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(2),
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(2) {
+  width: 139px;
+  max-width: 139px;
+  text-align: center;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(3),
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(3) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(4),
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(4) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(5),
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(5) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(6),
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(6) {
+  width: 83px;
+  max-width: 83px;
+  text-align: center;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(7),
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(7) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(8),
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(8) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(9),
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(9) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(10),
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(10) {
+  width: 115px;
+  max-width: 115px;
+  text-align: center;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(11),
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(11) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(12),
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(12) {
+  width: 148px;
+  max-width: 148px;
+  text-align: center;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(13),
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(13) {
+  width: 97px;
+  max-width: 97px;
+  text-align: center;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:last-child {
+  font-size: 23px;
+  font-weight: bold;
+  cursor: pointer;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th,
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td {
+  overflow: hidden;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th div,
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td div {
+  overflow: hidden;
+  max-height: 64px;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tbody {
+  display: block;
+  height: 631px;
+  width: 1448px;
+  overflow: scroll;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tbody tr {
+  height: 64px;
+  padding: 10px;
+  font-size: 14px;
+  line-height: 1.29;
+  color: #4b4b4b;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tbody tr td {
+  text-align: center;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.green {
+  color: #7ed321;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.red {
+  color: #d0021b;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child {
+  width: 10px;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tbody tr.selected {
+  background-color: rgba(23, 145, 255, 0.75);
+  color: #fff;
+  font-weight: 600;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left {
+  width: 360px;
+  height: 616px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  border: solid 1px #dddddd;
+  overflow-y: auto;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect {
+  z-index: 100;
+  margin-bottom: 24px;
+  margin-top: 16px;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .multiselect label {
+  font-size: 14px;
+  line-height: 1.29;
+  color: #878787;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox {
+  position: relative;
+  width: 328px;
+  height: 64px;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select {
+  width: 100%;
+  padding: 8px;
+  cursor: pointer;
+  height: 64px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .selectBox select option {
+  display: none;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .overSelect {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxes,
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesU {
+  display: none;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView,
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser {
+  width: calc(100% - 8px);
+  background-color: #fff;
+  display: block;
+  z-index: 100;
+  padding: 6px 4px;
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView label,
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser label {
+  font-size: 18px;
+  margin: 2px;
+  display: flex;
+  flex-flow: row;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView .label-state,
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser .label-state {
+  margin-left: 12px;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div select {
+  width: 328px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  margin-bottom: 24px;
+  margin-top: 16px;
+  padding-left: 16px;
+  font-size: 18px;
+  line-height: 1.11;
+  color: #4b4b4b;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header {
+  height: 64px;
+  width: 312px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #002680;
+  line-height: 1;
+  font-size: 18px;
+  padding-left: 16px;
+  cursor: pointer;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header span {
+  width: 100%;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown header .expander {
+  margin: 0 12px;
+  line-height: 28px;
+  height: 28px;
+  width: 28px;
+  font-size: 28px;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section {
+  width: 328px;
+  min-height: 0;
+  max-height: 0;
+  transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
+  overflow: hidden;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section.expanded {
+  min-height: 64px;
+  background-color: rgba(255, 255, 255, 0.1);
+  max-height: 1000px;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .item {
+  height: 64px;
+  width: 100%;
+  line-height: 64px;
+  background-color: #f1f1f1;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown {
+  height: 100%;
+  margin-top: 2px;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename {
+  display: flex;
+  height: 64px;
+  align-items: center;
+  cursor: pointer;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename i {
+  color: #002e6e;
+  margin: 0 20px 0 20px;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename span {
+  width: 100%;
+  font-size: 18px;
+  line-height: 1;
+  color: #002680;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected span,
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected i {
+  color: #4b4b4b;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div .accordion-dropdown section .dropdown .filename.selected {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-footer {
+  height: 64px;
+  width: 100%;
+  border: solid 1px #dddddd;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-footer .header-title {
+  width: 360px;
+  height: 64px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-footer .header-title .title {
+  font-size: 14px;
+  color: #878787;
+}
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-footer .header-title .data-temporal {
+  font-size: 18px;
+  line-height: 1;
+  color: #4b4b4b;
+}
+.card-report-timeline .reports-box-body-right {
+  width: 327px;
+  height: 100%;
+}
+.card-report-timeline .reports-box-body-right .body-right-header {
+  width: 100%;
+  height: 70px;
+  display: flex;
+  flex-flow: row;
+  margin-top: 18px;
+  justify-content: flex-end;
+}
+.card-report-timeline .reports-box-body-right .body-right-header .body-right-header-left {
+  width: 158px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-right: solid 2px #dddddd;
+}
+.card-report-timeline .reports-box-body-right .body-right-header .body-right-header-left button {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
+  border: none;
+}
+.card-report-timeline .reports-box-body-right .body-right-header .body-right-header-left button.active {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
+  color: #1791ff;
+  border: none;
+}
+.card-report-timeline .reports-box-body-right .body-right-header .body-right-header-right {
+  width: calc(100% - 158px);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-report-timeline .reports-box-body-right .body-right-header .body-right-header-right button {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
+  border: none;
+}
+.card-report-timeline .reports-box-body-right .body-right-header .body-right-header-right button:first-child {
+  margin-right: 16px;
+}
+.card-report-timeline .reports-box-body-right .body-right-header .body-right-header-right button:active {
+  width: 48px;
+  height: 48px;
+  border-radius: 2px;
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4);
+  background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
+  border: none;
+}
+.card-report-timeline .reports-box-body-right .body-right-card {
+  width: 100%;
+  height: calc(100% - 70px);
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}
+.card-report-timeline .reports-box-body-right .body-right-card .card-report > section {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.card-report-timeline .reports-box-body-right .body-right-card .card-report > section .rectangle_gray {
+  width: 256px;
+  height: 120px;
+  border-radius: 2px;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #f1f1f1;
+}
+.card-report-timeline .reports-box-body-right .body-right-card .card-report > section .rectangle_gray label {
+  font-size: 18px;
+  color: #878787;
+  margin-bottom: 30px;
+}
+.card-report-timeline .reports-box-body-right .body-right-card .card-report > section .rectangle_gray span {
+  font-size: 48px;
+  font-weight: bold;
+  line-height: 0.38;
+  color: #1791ff;
+}
+/** Versione zeplin machine status non cancellare
+
+.card-report-machine-status{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    .reports-box-body-left {
+        width: 1455px;
+        height: 100%;
+        .body-left-header, .body-left-header-machinestatus{
+            width: 100%;
+            height: 70px;
+            display: flex;
+            flex-flow: row;
+            margin-top: 18px;
+            border-right: solid 2px @color-whitegrey;
+            position: relative;
+            margin-bottom: 16px;
+            .mx-datepicker-range{
+              width: 170px;
+              height: 70px;
+              .mx-input-wrapper{
+                margin-right: 24px;
+                width: 253px;
+                .mx-input{
+                  width: 253px;
+                  height: 50px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                  border: solid 1px @color-silver;                     
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                  padding-left: 16px;
+                }
+              }
+            }
+            > div {
+              display: flex;
+              flex-flow: column;
+              height: 70px;
+              margin-right: 24px;
+              label.intervaldate{
+                width: 253px;
+              }
+              select{
+                width: 192px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+                border: solid 1px @color-silver;                     
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                padding-left: 16px; 
+              }
+              div.interval-time{
+                display: flex;
+                flex-flow: row;
+                input[type="time"]{
+                  width: 112px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: inset 0 1px 3px 0 @color-black-50;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-silver;
+                  border: none;
+                }
+                input[type="time"]:first-child{
+                  margin-right: 16px;
+                }
+                input[type="time"]::-webkit-inner-spin-button {
+                  -webkit-appearance: none;
+                  display: none;
+                  border:none;
+                }
+              }
+              input.program{
+                width: 256px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: inset 0 1px 3px 0 @color-black-50;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-silver;
+                padding-left: 16px;
+                border: none;
+              }
+              .reports-select-operator{
+                width: 192px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+              }
+              .reports-select-shift{
+                width: 144px;
+                height: 48px;
+                border-radius: 2px;
+                box-shadow: 0 1px 2px 0 @color-black-40;
+              }
+            }
+            .multiselect{
+                z-index: 100;
+                label{
+                  font-size: 14px;
+                  line-height: 1.29;
+                  color: @color-warm-grey;
+                }
+              }
+              .selectBox{
+                  position: relative;
+                  width: 144px;
+              }
+              .selectBox select{
+                width: 100%;
+                padding: 8px;
+                cursor: pointer;
+                height: 49px;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                box-shadow: 0 1px 2px @color-black-40;
+                border-radius: 2px;
+                  option{
+                      display: none;
+                  }
+              }
+              .selectBoxU{
+                position: relative;
+                width: 192px;
+            }
+            .selectBoxU select{
+              width: 100%;
+              padding: 8px;
+              cursor: pointer;
+              height: 49px;
+              font-size: 18px;
+              line-height: 1.11;
+              color: @color-greyish-brown;
+              box-shadow: 0 1px 2px @color-black-40;
+              border-radius: 2px;
+                option{
+                    display: none;
+                }
+            }
+              .overSelect{
+                  position: absolute;
+                  left: 0;
+                  right: 0;
+                  top: 0;
+                  bottom: 0;
+              }
+              .checkboxes, .checkboxesU{
+                  display: none;
+              }
+              .checkboxesView, .checkboxesViewUser{
+                  width: calc(~"100% - 8px");;
+                  background-color: #fff;
+                  display: block;
+                  z-index: 100;
+                  padding: 6px 4px;
+                  box-shadow: 0 3px 5px 0 @color-black-40;
+                  label{
+                      font-size: 18px;
+                      margin:2px;
+                      display: flex;
+                      flex-flow: row;
+                  }
+                  .label-state{
+                      margin-left: 12px;
+                  }
+              }
+        }
+        .body-left-header-machinestatus{
+          border-right: 0px;
+        }
+        .body-left-center {
+          width: 1448px;
+          max-height: 681px;
+          display: flex;
+          flex-flow: column;
+          .body-left-center-container{
+            width: 100%;
+            table{
+              table-layout: fixed;
+              width: 100%;
+              border-collapse: collapse;
+            }
+            thead{
+                border-bottom: solid 2px @color-label-grey;
+                font-size: 14px;
+                line-height: 1.29;
+                color: @color-darkish-blue;
+                display: block;
+                width: 1431px;
+            }
+            thead tr th{
+                height: 48px;
+            }
+            tr:nth-child(even) {background: #FFF }
+            tr:nth-child(odd) {background: #dddddd }
+            // thead tr{
+            //   width: 1448px;
+            // }
+            thead tr:nth-child(odd){
+              background: #FFF
+            }
+            th:nth-child(1), td:nth-child(1){
+                width:162px;
+                max-width: 162px;
+                text-align: center;
+            }  
+            th:nth-child(2), td:nth-child(2){
+              width:139px;
+              max-width: 139px;
+              text-align: center;
+            }
+            th:nth-child(3), td:nth-child(3){
+                width:83px;
+                max-width:83px;
+                text-align: center;
+            }
+            th:nth-child(4), td:nth-child(4){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(5), td:nth-child(5){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(6), td:nth-child(6){
+              width:83px;
+              max-width:83px;
+              text-align: center;
+            }
+            th:nth-child(7), td:nth-child(7){
+                width:97px;
+                max-width:97px;
+                text-align: center;
+            }
+            th:nth-child(8), td:nth-child(8){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(9), td:nth-child(9){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(10), td:nth-child(10){
+              width:115px;
+              max-width:115px;
+              text-align: center;
+            }
+            th:nth-child(11), td:nth-child(11){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:nth-child(12), td:nth-child(12){
+              width:148px;
+              max-width:148px;
+              text-align: center;
+            }
+            th:nth-child(13), td:nth-child(13){
+              width:97px;
+              max-width:97px;
+              text-align: center;
+            }
+            th:last-child{
+              font-size: 23px;
+              font-weight: bold;
+              cursor: pointer;
+            }
+            th, td{
+                overflow: hidden;
+                div{
+                    overflow: hidden;
+                            max-height: 64px;
+                }
+            }
+            tbody{
+                display: block;
+                height: 631px;
+                width: 1448px;
+                overflow: scroll;
+                tr{
+                    cursor: pointer;
+                    height:  64px;
+                    padding: 10px;
+                    font-size: 14px;
+                    line-height: 1.29;
+                    color: @color-greyish-brown;
+                    td{
+                        text-align: center;
+                        &.green{
+                          color: @color-apple-green;
+                        }
+                        &.red{
+                          color: @color-scarlet;
+                        }
+                    }
+                    td:last-child{
+                      width: 10px;
+                    }
+                    &.selected{
+                        background-color: rgba(23, 145, 255, 0.75);
+                        color: @color-white;
+                        font-weight: 600;
+                    }
+                }
+            }
+            .body-left-center-left{
+              width: 360px;
+              height: 616px;
+              display: flex;
+              flex-flow: column;
+              align-items: center;
+              border: solid 1px @color-whitegrey;
+              overflow-y: auto;
+              .multiselect{
+                z-index: 100;
+                margin-bottom: 24px;
+                margin-top: 16px;
+                label{
+                  font-size: 14px;
+                  line-height: 1.29;
+                  color: @color-warm-grey;
+                }
+              }
+              .selectBox{
+                  position: relative;
+                  width: 328px;
+                  height: 64px;
+              }
+              .selectBox select{
+                width: 100%;
+                padding: 8px;
+                cursor: pointer;
+                height: 64px;
+                font-size: 18px;
+                line-height: 1.11;
+                color: @color-greyish-brown;
+                margin-bottom: 0;
+                margin-top: 0;
+                  option{
+                      display: none;
+                  }
+              }
+              .overSelect{
+                position: absolute;
+                left: 0;
+                right: 0;
+                top: 0;
+                bottom: 0;
+            }
+            .checkboxes, .checkboxesU{
+                display: none;
+            }
+            .checkboxesView, .checkboxesViewUser{
+                width: calc(~"100% - 8px");;
+                background-color: #fff;
+                display: block;
+                z-index: 100;
+                padding: 6px 4px;
+                box-shadow: 0 3px 5px 0 @color-black-40;
+                label{
+                    font-size: 18px;
+                    margin:2px;
+                    display: flex;
+                    flex-flow: row;
+                }
+                .label-state{
+                    margin-left: 12px;
+                }
+            }
+              div{
+                select{
+                  width: 328px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                  margin-bottom: 24px;
+                  margin-top: 16px;
+                  padding-left: 16px;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                }
+                .accordion-dropdown{
+                  header {
+                    height: 64px;
+                    width: 312px;
+                    border-radius: 2px;
+                    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    color: @color-darkish-blue;
+                    line-height: 1;
+                    font-size: 18px;
+                    padding-left: 16px;
+                    cursor: pointer;
+                    span {
+                        width: 100%;
+                    }
+                    .expander {
+                        margin: 0 12px;
+                        line-height: 28px;
+                        height: 28px;
+                        width: 28px;
+                        font-size: 28px;
+                    }
+                  }
+                  section {
+                    width: 328px;
+                    min-height: 0;
+                    max-height: 0;
+                    transition: max-height 100ms ease-in-out, min-height 200ms ease-in-out;
+                    overflow: hidden;
+                    &.expanded {
+                      min-height: 64px;
+                      background-color: rgba(255, 255, 255, 0.1);
+                      max-height: 1000px;
+                    }
+                    .item {
+                        height: 64px;
+                        width: 100%;
+                        line-height: 64px;
+                        background-color: @color-white2;
+                    }
+         
+                    .dropdown{
+                      // background-color: @color-white2;
+                      height: 100%;
+                      margin-top: 2px;
+                      .filename{
+                          display: flex;
+                          height: 64px;
+                          align-items: center;
+                          cursor: pointer;
+                          i{
+                            color: @color-cyan-blue;
+                            margin: 0 20px 0 20px;
+                          }
+                          span{
+                              width: 100%;
+                              font-size: 18px;
+                              line-height: 1;
+                              color: @color-darkish-blue;
+                          }
+         
+                          &.selected{
+                            span, i{
+                              color:#4b4b4b;
+                            }
+                          }
+                      }
+                      .filename.selected{
+                          background-color: rgba(255, 255, 255, 0.8);
+                      }
+                   
+                    } 
+                  }
+                }
+              }
+            }
+          }
+          .body-left-center-footer{
+            height: 64px;
+            width: 100%;
+            border: solid 1px @color-whitegrey;
+            .header-title{
+              width: 360px;
+              height: 64px;
+              display: flex;
+              flex-flow: column;
+              align-items: center;
+              justify-content: center;
+              .title{
+                font-size: 14px;
+                color: @color-warm-grey;
+              }
+              .data-temporal{
+                font-size: 18px;
+                line-height: 1;
+                color: @color-greyish-brown;
+              }
+            }
+          }
+        }
+    }
+    .reports-box-body-right {
+        width: 327px;
+        height: 100%;
+        .body-right-header{
+          width: 100%;
+          height: 70px;
+          display: flex;
+          flex-flow: row;
+          margin-top: 18px;
+          justify-content: flex-end;
+          .body-right-header-left {
+            width: 158px;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-right: solid 2px @color-whitegrey;
+            button{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: 0 1px 2px 0 @color-black-40;
+              background-image: linear-gradient(to bottom,@color-white2, @color-silver);
+              border: none;
+            }
+            button.active{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: inset 0 1px 3px 0 @color-black-40;
+              background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+              color: @color-clear-blue;
+              border: none;
+            }
+          }
+          .body-right-header-right {
+            width: calc(~"100% - 158px");
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            button{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: 0 1px 2px 0 @color-black-40;
+              background-image: linear-gradient(to bottom,@color-white2, @color-silver);
+              border:none;
+            }
+            button:first-child{
+              margin-right: 16px;
+            }
+            button:active{
+              width: 48px;
+              height: 48px;
+              border-radius: 2px;
+              box-shadow: inset 0 1px 3px 0 @color-black-40;
+              background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
+              border: none;
+            }
+          }
+        }
+        .body-right-card{
+          width: 100%;
+          height: calc(~"100% - 70px");
+          display: flex;
+          flex-flow: column;
+          align-items: center;
+          .card-report{
+            > section {
+              display: flex;
+              align-items: center;
+              justify-content: center; 
+              .rectangle_gray{
+                width: 256px;
+                height: 120px;
+                border-radius: 2px;
+                display: flex;
+                flex-flow: column;
+                align-items: center;
+                justify-content: center;
+                background-color: @color-white2;
+                label{
+                  font-size: 18px;
+                  color: @color-warm-grey;
+                  margin-bottom: 30px;
+                }
+                span{
+                  font-size: 48px;
+                  font-weight: bold;
+                  line-height: 0.38;
+                  color: @color-clear-blue;
+                }
+              }
+            }
+          }
+        }
+    }
+} */
 @keyframes selectedanimation {
   0% {
     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.ts
new file mode 100644
index 00000000..b0b53c79
--- /dev/null
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.ts
@@ -0,0 +1,97 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import { cardReport } from "../../../modules/base-components/cards/index";
+import accordionDropdown from "../../../modules/base-components/accordion-dropdown.vue";
+import modalReportSelectColumn from "../../../modules/base-components/modal-report-select-column.vue";
+import { Accordion } from "src/modules/base-components";
+import { loginService } from "src/services";
+import DatePicker from "vue2-datepicker";
+import moment from "moment";
+import { ModalHelper } from "src/components/modals";
+
+declare let $: any;
+@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
+export default class CardReportTimeline extends Vue {
+
+  lang = {
+    days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    pickers: ['next 7 days', 'next 30 days', 'previous 7 days', 'previous 30 days'],
+    placeholder: {
+      date: 'Select Date',
+      dateRange: 'Select Date Range'
+    }
+  }
+
+  filter: {
+    interval?: Date[],
+    timelineMacro: Array<string>,
+    multiUser: Array<any>
+  } = {
+      timelineMacro: ["Eventi", "Allarmi", "Stato macchina", "Programmi"],
+      multiUser: [],
+      interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
+    };
+
+
+
+  isVisible(value){
+    return this.filter.timelineMacro.some(c => c == value);
+  }
+
+  public selectedTab: string = "Production";
+  selectDiagram: boolean = false;
+  selectMoreFilter: boolean = false;
+  selectTable: boolean = true;
+  users: Array<any> = [];
+
+  get currentUser() {
+    return this.$store.state.currentUser;
+  }
+
+  async mounted() {
+    this.users = await loginService.getAllUsers();
+    this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
+    this.filter.multiUser.push(this.currentUser.username);
+  }
+
+  public selectTab(value) {
+    this.selectedTab = value;
+  }
+  timeformat() {
+    return (moment() as any)._locale._longDateFormat.LT;
+  }
+
+  viewDiagram() {
+    if (!this.selectDiagram) {
+      this.selectDiagram = true;
+      this.selectTable = false;
+    }
+    console.log("Diagram active");
+  }
+
+  viewTable() {
+    if (!this.selectTable) {
+      this.selectDiagram = false;
+      this.selectTable = true;
+    }
+    console.log("Diagram active");
+  }
+
+  viewMoreFilter() {
+    if (!this.selectMoreFilter) {
+      this.selectMoreFilter = true;
+    }
+    else {
+      this.selectMoreFilter = false;
+    }
+  }
+
+  public openSelectState() {
+    if (!$('.checkboxes').hasClass('checkboxesView'))
+      $('.checkboxes').addClass('checkboxesView');
+    else
+      $('.checkboxes').removeClass('checkboxesView');
+  }
+
+}
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.vue
new file mode 100644
index 00000000..00f88a78
--- /dev/null
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.vue
@@ -0,0 +1,152 @@
+<template>
+<div class="card-report-timeline">
+              <div class="reports-box-body-left">
+                  <div class="body-left-header">
+                    <div>
+                        <label class="intervaldate">{{'reports_body_header_date_range' | localize("Intervallo date")}}</label>
+                        <date-picker v-model="filter.interval" range type="daterange" :lang="lang"></date-picker>
+                    </div>
+                    <div>
+                        <label>{{'reports_body_header_label_hour' | localize("Intervallo orario")}}</label>
+                        <div class="interval-time">
+                            <input type="time"/>
+                            <input type="time"/>
+                        </div>
+                    </div>
+                    <div>
+                        <label>{{'reports_body_header_label_program' | localize("Programma")}}</label>
+                        <input type="text" class="program" :placeholder="'reports_body_header_placeholder_program' | localize('Nome del programma')" />
+                    </div>
+                  </div>
+                  <div class="body-left-center">
+                      <div class="body-left-center-container">
+                        <div class="body-left-center-left">
+                            <div class="multiselect">
+                                <div class="selectBox" @click="openSelectState()">
+                                    <select id="selectListCheckboxes">
+                                    <option><span v-for="(item, index) in filter.timelineMacro" :key="item" >{{'report_state_'+item | localize(item)}}{{(index==filter.timelineMacro.length-1)?'':', '}}</span></option>
+                                    <div class="overSelect"></div>
+                                    </select>
+                                </div>
+
+                                <div class="checkboxes">
+                                    <div>
+                                    <label for="Eventi">
+                                    <div class="custom-checkbox">
+                                        <input type="checkbox"  v-model="filter.timelineMacro" value="Eventi" id="Eventi" />
+                                        <label for="Eventi"></label>
+                                    </div>
+                                    <label class="label-state">{{'report_timeline_filter_events' | localize("Eventi")}}</label>
+                                    </label>
+                                    </div>
+                                    <div>
+                                    <label for="Allarmi">
+                                    <div class="custom-checkbox">
+                                        <input type="checkbox"  v-model="filter.timelineMacro" value="Allarmi" id="Allarmi" />
+                                        <label for="Allarmi"></label>
+                                    </div>
+                                        <label class="label-state">{{'report_timeline_filter_alarms' | localize("Allarmi")}}</label>
+                                    </label>
+                                    </div>
+                                    <div>
+                                    <label for="Stato macchina">
+                                    <div class="custom-checkbox">
+                                        <input type="checkbox"  v-model="filter.timelineMacro" value="Stato macchina" id="Stato macchina" />
+                                        <label for="Stato macchina"></label>
+                                    </div>
+                                        <label class="label-state">{{'report_timeline_filter_machine_status' | localize("Stato macchina")}}</label>
+                                    </label>
+                                    </div>
+                                    <div>
+                                    <label for="Programmi">
+                                    <div class="custom-checkbox">
+                                        <input type="checkbox"  v-model="filter.timelineMacro" value="Programmi" id="Programmi" />
+                                        <label for="Programmi"></label>
+                                    </div>
+                                        <label class="label-state">{{'report_timeline_filter_programs' | localize("Programmi")}}</label>
+                                    </label>
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-if="isVisible('Eventi')">
+                                <accordion-dropdown :title="'reports_body_left_center_left_dropdown_title_events' | localize('Eventi')">
+                                    <div class="dropdown">
+                                        <div class="item">
+                                            <div class="filename"><i class="fa fa-file"></i><span>Test</span></div>
+                                        </div>
+                                    </div>
+                                </accordion-dropdown>
+                            </div>
+                            <div v-if="isVisible('Allarmi')">
+                                <accordion-dropdown :title="'reports_body_left_center_left_dropdown_title_alarms' | localize('Allarmi')">
+                                    <div class="dropdown">
+                                        <div class="item">
+                                            <div class="filename"><i class="fa fa-file"></i><span>Test</span></div>
+                                        </div>
+                                    </div>
+                                </accordion-dropdown>
+                            </div>
+                            <div v-if="isVisible('Stato macchina')">
+                                <accordion-dropdown :title="'reports_body_left_center_left_dropdown_title_machine_status' | localize('Stato macchina')">
+                                    <div class="dropdown">
+                                        <div class="item">
+                                            <div class="filename"><i class="fa fa-file"></i><span>Test</span></div>
+                                        </div>
+                                    </div>
+                                </accordion-dropdown>
+                            </div>
+                            <div v-if="isVisible('Programmi')">
+                                <accordion-dropdown :title="'reports_body_left_center_left_dropdown_title_programs' | localize('Programmi')">
+                                    <div class="dropdown">
+                                        <div class="item">
+                                            <div class="filename"><i class="fa fa-file"></i><span>Test</span></div>
+                                        </div>
+                                    </div>
+                                </accordion-dropdown>
+                            </div>
+                        </div>
+                        <div class="body-left-center-right">
+                        </div>
+                      </div>
+                      <div class="body-left-center-footer">
+                          <div class="header-title">
+                              <div class="title">
+                                  {{'reports_body_left_center_footer_title_time_slider' | localize('Cursore temporale')}}
+                              </div>
+                              <div class="data-temporal">
+                                  09 Aprile 2017 - 23:14
+                              </div>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+              <div class="reports-box-body-right">
+                <div class="body-right-header">
+                    <div class="body-right-header-right">
+                        <button><i class="fa fa-print fa-2x"></i></button>
+                        <button><i class="fa fa-upload fa-2x"></i></button>
+                    </div>
+                </div>
+                <div class="body-right-card">
+                    <card-report :title="'Valore assoluto (%)'">
+
+                    </card-report>
+                    <card-report :title="'Valore assoluto'">
+                        <div class="rectangle_gray">
+                            <label>{{'reports_body_rectangle_label_pieces produced' | localize("Pezzi prodotti")}}</label>
+                            <span>10.000</span>
+                        </div>
+                    </card-report>
+                    <card-report :title="'Valore assoluto'">
+                        <div class="rectangle_gray">
+                            <label>{{'reports_body_rectangle_label_discarded_pieces' | localize("Pezzi scartati")}}</label>
+                            <span>4</span>
+                        </div>
+                    </card-report>
+                </div>
+              </div>
+</div>
+
+</template>
+
+<script src="./card-report-timeline.ts" lang="ts"></script>
\ No newline at end of file
diff --git a/Step/wwwroot/src/app_modules/reports/components/reports.ts b/Step/wwwroot/src/app_modules/reports/components/reports.ts
index bf31799b..893ac18b 100644
--- a/Step/wwwroot/src/app_modules/reports/components/reports.ts
+++ b/Step/wwwroot/src/app_modules/reports/components/reports.ts
@@ -12,11 +12,13 @@ import cardReportProduction from "src/app_modules/reports/components/card-report
 import cardReportEvents from "src/app_modules/reports/components/card-report-events.vue";
 import cardReportAlarms from "src/app_modules/reports/components/card-report-alarms.vue";
 import cardReportMachineStatus from "src/app_modules/reports/components/card-report-machine-status.vue";
+import cardReportTimeline from "src/app_modules/reports/components/card-report-timeline.vue";
 
 declare let $: any;
 @Component({ components: { datePicker: DatePicker, cardReport: cardReport,
     accordionDropdown: accordionDropdown, accordion: Accordion, cardReportProduction: cardReportProduction,
-    cardReportEvents: cardReportEvents, cardReportAlarms: cardReportAlarms, cardReportMachineStatus: cardReportMachineStatus } })
+    cardReportEvents: cardReportEvents, cardReportAlarms: cardReportAlarms, cardReportMachineStatus: cardReportMachineStatus,
+    cardReportTimeline: cardReportTimeline } })
 export default class Reports extends Vue {
 
     lang = {
diff --git a/Step/wwwroot/src/app_modules/reports/components/reports.vue b/Step/wwwroot/src/app_modules/reports/components/reports.vue
index 1c61fd79..e6ceeb95 100644
--- a/Step/wwwroot/src/app_modules/reports/components/reports.vue
+++ b/Step/wwwroot/src/app_modules/reports/components/reports.vue
@@ -68,6 +68,7 @@
               </div> -->
           </div>
           <div class="reports-box-body" v-if="selectedTab == 'Timeline'">
+              <card-report-timeline></card-report-timeline>
               <!-- <div class="reports-box-body-left">
                   <div class="body-left-header" v-if="selectDiagram">
                     <div>

From 6513d6c4164cbad1deacb04f9069c6867cdc8151 Mon Sep 17 00:00:00 2001
From: Alessandro <a.francia@teamdev.it>
Date: Fri, 25 Jan 2019 09:13:14 +0100
Subject: [PATCH 9/9] fix card-report-timeline

---
 Step/wwwroot/assets/styles/base/card.less     | 248 +--------------
 Step/wwwroot/assets/styles/style.css          | 287 +-----------------
 .../components/card-report-timeline.ts        |  58 +---
 3 files changed, 10 insertions(+), 583 deletions(-)

diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less
index b74511f7..32a0f8d0 100644
--- a/Step/wwwroot/assets/styles/base/card.less
+++ b/Step/wwwroot/assets/styles/base/card.less
@@ -4347,17 +4347,6 @@
                 line-height: 1.29;
                 color: @color-warm-grey;
               }
-              select{
-                width: 192px;
-                height: 48px;
-                border-radius: 2px;
-                box-shadow: 0 1px 2px 0 @color-black-40;
-                border: solid 1px @color-silver;                     
-                font-size: 18px;
-                line-height: 1.11;
-                color: @color-greyish-brown;
-                padding-left: 16px; 
-              }
               div.interval-time{
                 display: flex;
                 flex-flow: row;
@@ -4392,80 +4381,7 @@
                 padding-left: 16px;
                 border: none;
               }
-              .reports-select-operator{
-                width: 192px;
-                height: 48px;
-                border-radius: 2px;
-                box-shadow: 0 1px 2px 0 @color-black-40;
-                font-size: 18px;
-                line-height: 1.11;
-                color: @color-greyish-brown;
-              }
-              .reports-select-shift{
-                width: 144px;
-                height: 48px;
-                border-radius: 2px;
-                box-shadow: 0 1px 2px 0 @color-black-40;
-              }
             }
-
-
-            .multiselect{
-                z-index: 100;
-                label{
-                  font-size: 14px;
-                  line-height: 1.29;
-                  color: @color-warm-grey;
-                }
-              }
-              .selectBoxU{
-                position: relative;
-                width: 192px;
-            }
-            .selectBoxU select{
-              width: 100%;
-              padding: 8px;
-              cursor: pointer;
-              height: 48px;
-              font-size: 18px;
-              line-height: 1.11;
-              color: @color-greyish-brown;
-              box-shadow: 0 1px 2px @color-black-40;
-              border-radius: 2px;
-                option{
-                    display: none;
-                }
-            }
-              .overSelect{
-                  position: absolute;
-                  left: 0;
-                  right: 0;
-                  top: 0;
-                  bottom: 0;
-              }
-              .checkboxes, .checkboxesU{
-                  display: none;
-              }
-              .checkboxesView, .checkboxesViewUser{
-                  width: calc(~"100% - 8px");;
-                  background-color: #fff;
-                  display: block;
-                  z-index: 100;
-                  padding: 6px 4px;
-                  box-shadow: 0 3px 5px 0 @color-black-40;
-                  label{
-                      font-size: 18px;
-                      margin:2px;
-                      display: flex;
-                      flex-flow: row;
-                  }
-                  .label-state{
-                      margin-left: 12px;
-                  }
-              }
-        }
-        .body-left-header-machinestatus{
-          border-right: 0px;
         }
         .body-left-center {
             width: 1448px;
@@ -4474,141 +4390,6 @@
             flex-flow: column;
             .body-left-center-container{
               width: 100%;
-              table{
-                table-layout: fixed;
-                width: 100%;
-                border-collapse: collapse;
-              }
-              thead{
-                  border-bottom: solid 2px @color-label-grey;
-                  font-size: 14px;
-                  line-height: 1.29;
-                  color: @color-darkish-blue;
-                  display: block;
-                  width: 1431px;
-              }
-              thead tr th{
-                  height: 48px;
-              }
-              tr:nth-child(even) {background: #FFF }
-              tr:nth-child(odd) {background: #dddddd }
-
-              // thead tr{
-              //   width: 1448px;
-              // }
-
-              thead tr:nth-child(odd){
-                background: #FFF
-              }
-
-              th:nth-child(1), td:nth-child(1){
-                  width:162px;
-                  max-width: 162px;
-                  text-align: center;
-              }  
-              th:nth-child(2), td:nth-child(2){
-                width:139px;
-                max-width: 139px;
-                text-align: center;
-              }
-              th:nth-child(3), td:nth-child(3){
-                  width:83px;
-                  max-width:83px;
-                  text-align: center;
-              }
-              th:nth-child(4), td:nth-child(4){
-                width:83px;
-                max-width:83px;
-                text-align: center;
-              }
-              th:nth-child(5), td:nth-child(5){
-                width:83px;
-                max-width:83px;
-                text-align: center;
-              }
-              th:nth-child(6), td:nth-child(6){
-                width:83px;
-                max-width:83px;
-                text-align: center;
-              }
-              th:nth-child(7), td:nth-child(7){
-                  width:97px;
-                  max-width:97px;
-                  text-align: center;
-              }
-              th:nth-child(8), td:nth-child(8){
-                width:97px;
-                max-width:97px;
-                text-align: center;
-              }
-              th:nth-child(9), td:nth-child(9){
-                width:97px;
-                max-width:97px;
-                text-align: center;
-              }
-              th:nth-child(10), td:nth-child(10){
-                width:115px;
-                max-width:115px;
-                text-align: center;
-              }
-              th:nth-child(11), td:nth-child(11){
-                width:97px;
-                max-width:97px;
-                text-align: center;
-              }
-              th:nth-child(12), td:nth-child(12){
-                width:148px;
-                max-width:148px;
-                text-align: center;
-              }
-              th:nth-child(13), td:nth-child(13){
-                width:97px;
-                max-width:97px;
-                text-align: center;
-              }
-              th:last-child{
-                font-size: 23px;
-                font-weight: bold;
-                cursor: pointer;
-              }
-              th, td{
-                  overflow: hidden;
-                  div{
-                      overflow: hidden;
-                              max-height: 64px;
-                  }
-              }
-              tbody{
-                  display: block;
-                  height: 631px;
-                  width: 1448px;
-                  overflow: scroll;
-                  tr{
-                      // cursor: pointer;
-                      height:  64px;
-                      padding: 10px;
-                      font-size: 14px;
-                      line-height: 1.29;
-                      color: @color-greyish-brown;
-                      td{
-                          text-align: center;
-                          &.green{
-                            color: @color-apple-green;
-                          }
-                          &.red{
-                            color: @color-scarlet;
-                          }
-                      }
-                      td:last-child{
-                        width: 10px;
-                      }
-                      &.selected{
-                          background-color: rgba(23, 145, 255, 0.75);
-                          color: @color-white;
-                          font-weight: 600;
-                      }
-                  }
-              }
               .body-left-center-left{
                 width: 360px;
                 height: 616px;
@@ -4653,10 +4434,10 @@
                   top: 0;
                   bottom: 0;
               }
-              .checkboxes, .checkboxesU{
+              .checkboxes{
                   display: none;
               }
-              .checkboxesView, .checkboxesViewUser{
+              .checkboxesView{
                   width: calc(~"100% - 8px");;
                   background-color: #fff;
                   display: block;
@@ -4800,31 +4581,6 @@
           flex-flow: row;
           margin-top: 18px;
           justify-content: flex-end;
-          .body-right-header-left {
-            width: 158px;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-right: solid 2px @color-whitegrey;
-            button{
-              width: 48px;
-              height: 48px;
-              border-radius: 2px;
-              box-shadow: 0 1px 2px 0 @color-black-40;
-              background-image: linear-gradient(to bottom,@color-white2, @color-silver);
-              border: none;
-            }
-            button.active{
-              width: 48px;
-              height: 48px;
-              border-radius: 2px;
-              box-shadow: inset 0 1px 3px 0 @color-black-40;
-              background-image: linear-gradient(to bottom, @color-silver, @color-white2 );
-              color: @color-clear-blue;
-              border: none;
-            }
-          }
           .body-right-header-right {
             width: calc(~"100% - 158px");
             height: 100%;
diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css
index b7357e39..5a512dad 100644
--- a/Step/wwwroot/assets/styles/style.css
+++ b/Step/wwwroot/assets/styles/style.css
@@ -10406,18 +10406,6 @@ footer .container button.big:before {
   line-height: 1.29;
   color: #878787;
 }
-.card-report-timeline .reports-box-body-left .body-left-header > div select,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div select {
-  width: 192px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  border: solid 1px #bbbcbc;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-  padding-left: 16px;
-}
 .card-report-timeline .reports-box-body-left .body-left-header > div div.interval-time,
 .card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div div.interval-time {
   display: flex;
@@ -10457,97 +10445,6 @@ footer .container button.big:before {
   padding-left: 16px;
   border: none;
 }
-.card-report-timeline .reports-box-body-left .body-left-header > div .reports-select-operator,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div .reports-select-operator {
-  width: 192px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-}
-.card-report-timeline .reports-box-body-left .body-left-header > div .reports-select-shift,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus > div .reports-select-shift {
-  width: 144px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-}
-.card-report-timeline .reports-box-body-left .body-left-header .multiselect,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .multiselect {
-  z-index: 100;
-}
-.card-report-timeline .reports-box-body-left .body-left-header .multiselect label,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .multiselect label {
-  font-size: 14px;
-  line-height: 1.29;
-  color: #878787;
-}
-.card-report-timeline .reports-box-body-left .body-left-header .selectBoxU,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .selectBoxU {
-  position: relative;
-  width: 192px;
-}
-.card-report-timeline .reports-box-body-left .body-left-header .selectBoxU select,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .selectBoxU select {
-  width: 100%;
-  padding: 8px;
-  cursor: pointer;
-  height: 48px;
-  font-size: 18px;
-  line-height: 1.11;
-  color: #4b4b4b;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-  border-radius: 2px;
-}
-.card-report-timeline .reports-box-body-left .body-left-header .selectBoxU select option,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .selectBoxU select option {
-  display: none;
-}
-.card-report-timeline .reports-box-body-left .body-left-header .overSelect,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .overSelect {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-}
-.card-report-timeline .reports-box-body-left .body-left-header .checkboxes,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .checkboxes,
-.card-report-timeline .reports-box-body-left .body-left-header .checkboxesU,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .checkboxesU {
-  display: none;
-}
-.card-report-timeline .reports-box-body-left .body-left-header .checkboxesView,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .checkboxesView,
-.card-report-timeline .reports-box-body-left .body-left-header .checkboxesViewUser,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser {
-  width: calc(100% - 8px);
-  background-color: #fff;
-  display: block;
-  z-index: 100;
-  padding: 6px 4px;
-  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
-}
-.card-report-timeline .reports-box-body-left .body-left-header .checkboxesView label,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .checkboxesView label,
-.card-report-timeline .reports-box-body-left .body-left-header .checkboxesViewUser label,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser label {
-  font-size: 18px;
-  margin: 2px;
-  display: flex;
-  flex-flow: row;
-}
-.card-report-timeline .reports-box-body-left .body-left-header .checkboxesView .label-state,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .checkboxesView .label-state,
-.card-report-timeline .reports-box-body-left .body-left-header .checkboxesViewUser .label-state,
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus .checkboxesViewUser .label-state {
-  margin-left: 12px;
-}
-.card-report-timeline .reports-box-body-left .body-left-header-machinestatus {
-  border-right: 0px;
-}
 .card-report-timeline .reports-box-body-left .body-left-center {
   width: 1448px;
   max-height: 681px;
@@ -10557,153 +10454,6 @@ footer .container button.big:before {
 .card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container {
   width: 100%;
 }
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container table {
-  table-layout: fixed;
-  width: 100%;
-  border-collapse: collapse;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container thead {
-  border-bottom: solid 2px #979797;
-  font-size: 14px;
-  line-height: 1.29;
-  color: #002680;
-  display: block;
-  width: 1431px;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container thead tr th {
-  height: 48px;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(even) {
-  background: #FFF;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tr:nth-child(odd) {
-  background: #dddddd;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container thead tr:nth-child(odd) {
-  background: #FFF;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(1),
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(1) {
-  width: 162px;
-  max-width: 162px;
-  text-align: center;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(2),
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(2) {
-  width: 139px;
-  max-width: 139px;
-  text-align: center;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(3),
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(3) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(4),
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(4) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(5),
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(5) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(6),
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(6) {
-  width: 83px;
-  max-width: 83px;
-  text-align: center;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(7),
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(7) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(8),
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(8) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(9),
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(9) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(10),
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(10) {
-  width: 115px;
-  max-width: 115px;
-  text-align: center;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(11),
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(11) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(12),
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(12) {
-  width: 148px;
-  max-width: 148px;
-  text-align: center;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:nth-child(13),
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td:nth-child(13) {
-  width: 97px;
-  max-width: 97px;
-  text-align: center;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th:last-child {
-  font-size: 23px;
-  font-weight: bold;
-  cursor: pointer;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th,
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td {
-  overflow: hidden;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container th div,
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container td div {
-  overflow: hidden;
-  max-height: 64px;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tbody {
-  display: block;
-  height: 631px;
-  width: 1448px;
-  overflow: scroll;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tbody tr {
-  height: 64px;
-  padding: 10px;
-  font-size: 14px;
-  line-height: 1.29;
-  color: #4b4b4b;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tbody tr td {
-  text-align: center;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.green {
-  color: #7ed321;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tbody tr td.red {
-  color: #d0021b;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tbody tr td:last-child {
-  width: 10px;
-}
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container tbody tr.selected {
-  background-color: rgba(23, 145, 255, 0.75);
-  color: #fff;
-  font-weight: 600;
-}
 .card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left {
   width: 360px;
   height: 616px;
@@ -10749,12 +10499,10 @@ footer .container button.big:before {
   top: 0;
   bottom: 0;
 }
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxes,
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesU {
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxes {
   display: none;
 }
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView,
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser {
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView {
   width: calc(100% - 8px);
   background-color: #fff;
   display: block;
@@ -10762,15 +10510,13 @@ footer .container button.big:before {
   padding: 6px 4px;
   box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.4);
 }
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView label,
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser label {
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView label {
   font-size: 18px;
   margin: 2px;
   display: flex;
   flex-flow: row;
 }
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView .label-state,
-.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesViewUser .label-state {
+.card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left .checkboxesView .label-state {
   margin-left: 12px;
 }
 .card-report-timeline .reports-box-body-left .body-left-center .body-left-center-container .body-left-center-left div select {
@@ -10888,31 +10634,6 @@ footer .container button.big:before {
   margin-top: 18px;
   justify-content: flex-end;
 }
-.card-report-timeline .reports-box-body-right .body-right-header .body-right-header-left {
-  width: 158px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-right: solid 2px #dddddd;
-}
-.card-report-timeline .reports-box-body-right .body-right-header .body-right-header-left button {
-  width: 48px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
-  background-image: linear-gradient(to bottom, #f1f1f1, #bbbcbc);
-  border: none;
-}
-.card-report-timeline .reports-box-body-right .body-right-header .body-right-header-left button.active {
-  width: 48px;
-  height: 48px;
-  border-radius: 2px;
-  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.4);
-  background-image: linear-gradient(to bottom, #bbbcbc, #f1f1f1);
-  color: #1791ff;
-  border: none;
-}
 .card-report-timeline .reports-box-body-right .body-right-header .body-right-header-right {
   width: calc(100% - 158px);
   height: 100%;
diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.ts
index b0b53c79..4340ca78 100644
--- a/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.ts
+++ b/Step/wwwroot/src/app_modules/reports/components/card-report-timeline.ts
@@ -10,7 +10,7 @@ import moment from "moment";
 import { ModalHelper } from "src/components/modals";
 
 declare let $: any;
-@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } })
+@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown } })
 export default class CardReportTimeline extends Vue {
 
   lang = {
@@ -26,12 +26,10 @@ export default class CardReportTimeline extends Vue {
   filter: {
     interval?: Date[],
     timelineMacro: Array<string>,
-    multiUser: Array<any>
   } = {
-      timelineMacro: ["Eventi", "Allarmi", "Stato macchina", "Programmi"],
-      multiUser: [],
-      interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
-    };
+    timelineMacro: ["Eventi", "Allarmi", "Stato macchina", "Programmi"],
+    interval: [new Date(new Date().setDate(new Date().getDate() - 6)), new Date(new Date().setDate(new Date().getDate() + 1))]
+  };
 
 
 
@@ -39,54 +37,6 @@ export default class CardReportTimeline extends Vue {
     return this.filter.timelineMacro.some(c => c == value);
   }
 
-  public selectedTab: string = "Production";
-  selectDiagram: boolean = false;
-  selectMoreFilter: boolean = false;
-  selectTable: boolean = true;
-  users: Array<any> = [];
-
-  get currentUser() {
-    return this.$store.state.currentUser;
-  }
-
-  async mounted() {
-    this.users = await loginService.getAllUsers();
-    this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") });
-    this.filter.multiUser.push(this.currentUser.username);
-  }
-
-  public selectTab(value) {
-    this.selectedTab = value;
-  }
-  timeformat() {
-    return (moment() as any)._locale._longDateFormat.LT;
-  }
-
-  viewDiagram() {
-    if (!this.selectDiagram) {
-      this.selectDiagram = true;
-      this.selectTable = false;
-    }
-    console.log("Diagram active");
-  }
-
-  viewTable() {
-    if (!this.selectTable) {
-      this.selectDiagram = false;
-      this.selectTable = true;
-    }
-    console.log("Diagram active");
-  }
-
-  viewMoreFilter() {
-    if (!this.selectMoreFilter) {
-      this.selectMoreFilter = true;
-    }
-    else {
-      this.selectMoreFilter = false;
-    }
-  }
-
   public openSelectState() {
     if (!$('.checkboxes').hasClass('checkboxesView'))
       $('.checkboxes').addClass('checkboxesView');