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>