@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}
div:focus {outline:none !important;} /*disable blue border on click menu bar*/
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }/*disable blue cover on click menu bar in mobile browser*/
button, select, html, textarea, input {
    font-family: Roboto, "Helvetica Neue", "Microsoft JhengHei", sans-serif;
}
.mdl-cover{
    height : 100%;
    width : 100%;
    background-image : url('../../../image/bg_gradient_piclogo1080x1920.png');
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.index-cover{
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
md-input-container.md-input-focused label:not(.md-no-float),
md-input-container.md-input-has-placeholder label:not(.md-no-float),
md-input-container.md-input-has-value label:not(.md-no-float) {
    -webkit-transform: translate3d(0, 6px, 0) scale(1);
    transform: translate3d(0, 6px, 0) scale(1);
}
.md-button, md-switch, .md-list-item-inner > P{
    font-size: 16px;
}
md-input-container{
    margin : 18px 0px 0px 0px;
}
md-list-item > md-icon:first-child:not(.md-avatar-icon), md-list-item .md-list-item-inner > md-icon:first-child:not(.md-avatar-icon) {
    margin-right: 16px;
}
._md-datepicker-floating-label._md-datepicker-has-calendar-icon > label:not(.md-no-float):not(.md-container-ignore) {
    right: 65px;
    left: auto;
    width: calc(100% - 84px);
}
.md-icon-button + .md-datepicker-input-container {
    margin-left: 0px;
}
md-sidenav {
     max-width: 250px;
}
[scroll] {
  position:fixed;
  top:0;
}
@media (max-width: 456px) {
  md-sidenav {
    width: calc(100% - 180px);
    min-width: calc(100% - 180px);
    max-width: calc(100% - 180px);
  }
}
.mdl-navigation__link{
  font-size : 18px;
  cursor: pointer;
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */

  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

html, body{
    font-size: 16px;
    font-family: Roboto, "Helvetica Neue", "Microsoft JhengHei", sans-serif;
}
p, textarea {
    border:rgb(235,238,241);
    font-size: 16px;
    font-family: Roboto, "Helvetica Neue", "Microsoft JhengHei", sans-serif;
}
.mdl-tabs__tab{
    font-size: 16px;
}
.mdl-button{
    font-size: 16px;
    font-family: Roboto, "Helvetica Neue", "Microsoft JhengHei", sans-serif;
}
.mdl-menu__item{
    font-size: 16px;
}
.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
    /*color: #3f51b5;*/
    font-size: 16px;
    top: 2px;
    visibility: visible;
    font-family: Roboto, "Helvetica Neue", "Microsoft JhengHei", sans-serif;
}
.mdl-textfield--floating-label.is-invalid .mdl-textfield__label{
    font-size : 16px;
}
.mdl-textfield__error{
    font-size: 16px;
}
fieldset[disabled] .mdl-textfield .mdl-textfield__label, .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label {
    color: rgba(0,0,0,.5);
}
fieldset[disabled] .mdl-textfield .mdl-textfield__input, .mdl-textfield.is-disabled .mdl-textfield__input {
    color: rgba(0,0,0,.5);
}
.mdl-layout__title, .mdl-layout-title, .mdl-button, .mdl-textfield__input {
    font-family: Roboto, "Helvetica Neue", "Microsoft JhengHei", sans-serif;
}
/* .dialog-background{
    height:100%;
    width:100%;
    background-color:rgba(0,0,0,0.38);
    position: absolute;
    top: 0;
    left:0;
    z-index: 9;   
} */

/* sMES優化變更 */
.dialog-background{
    height:100%;
    width: 100%;
    background-color:rgba(0,0,0,0.10);
    position: absolute;
    top: 0;
    right:0;
    z-index: 10;   
    justify-content: center;
    display: flex;
}

.dialog-background .SMT-content{
    margin-top: 20%;
    height: 89%;
    width: 100%;
    animation: comein .3s linear;
}

@keyframes comein{
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0%);
    }
}

/* .move-to-bottom{
    margin-top: 100%;
    transition: .3s;
} */

.dialog-lay{
    height:100%;
    width:100%;
    
    /* SMT優化時刪除 */
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    position: absolute; 
    background: rgba(0,0,0,0.2);
    z-index: 1;
}
/* SMES優化變更跳窗大小 */
.dialog-lay-background{
    height:100%;
    width:100%;
    position: absolute;
    top: 0;
    right:0;
    z-index: 0;
}

/* SMT優化時新增-start */
.dialog_main .kmi-row-fields-SMT-head{
    display: flex;
    justify-content: flex-start;
    height: 42px;
    width: 90%;
    padding:0 4.89%;
}

.dialog_main .kmi-row-fields-SMT{
    padding:0 4.89% ;
    width: 90%;
    color:rgb(0, 0, 0);
    text-align: left;
    line-height: 42px;
    letter-spacing: 1px;
    font-size: 14px;
    align-items: center;
    justify-content: space-between;
}

.inner-select-title{
    color:rgb(235, 172, 78);
    font-weight: 700;
    line-height: 42px;
    letter-spacing: 1px;
}

.inner-select-content-title{
   font-weight: 400;
}

.inner-select-content{
    font-weight: 100;
}

.inner-done{
    display: none;
    width: 24px;
    height: 24px;
}
.dialog_main .select-content .kmi-row-fields-SMT:hover {
    background-color: rgb(104, 134, 189);
    color: rgb(255,255,255);
}

.select-content .kmi-row-fields-SMT{
    position: relative;
}

.dialog_main .select-content .kmi-row-fields-SMT:hover .inner-done{
    display: block;
}

/* SMT優化時新增-end */

.dialog-container{
    position : absolute;
    width:410px;
	right:0px;
    height:100%;
    background-color: rgb(238,241,247);
    border-radius: 15px 0 0 15px;
    display:flex;
    flex-direction:column;
}
.dialog-content{
    padding: 24px 24px 0 24px;
    margin-bottom: 44px;
    box-sizing: border-box;
    overflow: auto;
}
.dialog-button{
    display:flex;
    flex-direction:row;
    /* justify-content:flex-end; */
    padding: 0 16px 8px 16px;
    flex: 0 0 32px;
    align-self: center;
}
.dialog-container .mdl-layout__header{
    border-radius : 5px 5px 0px 0px;
}
.dialog-container .mdl-layout__header-row{
    padding-left:0px;
}
.alert-dialog{  
    /*position: relative;*/
    max-width: 90%;
    min-width: 60%;
    max-height: 80%;
    height: auto;
    width: auto;
    right:auto;
    border-radius: 6px;    
    background-color: rgb(244,176,77) !important;
    color: rgb(255,255,255);
    bottom: 40px;
    position: absolute;
}
.alert-dialog .header{
   display:flex;
   align-items:center;
   max-height: 50%;
   padding: 4px;
}
.alert-dialog .dialog-content{
    z-index: 0;
}
.alert_full-dialog{
    bottom: 40px;
    width: auto;
    min-width: 40%;
    max-width: 95%;
    max-height: 95%;
    position: absolute;
    height: auto;
    right: auto;
    border-radius: 6px 6px 6px 6px;  
    background-color: rgb(219, 76, 61);
    color: rgb(255,255,255);
}
.alert_full-dialog .ps-container > .ps-scrollbar-x-rail,
.alert_full-dialog .ps-container > .ps-scrollbar-y-rail {   opacity: 0.6; }
.alert_full-dialog .detail_top{
    display:flex;
    /*flex-direction:row;*/
    flex-direction:column;
}
.alert_full-dialog .detail_left_label{
    display:flex;
    flex-direction:column;
}
.alert_full-dialog .detail_right_label{
    margin-left:16px;    
    display:flex;
    flex-direction:column;
}
.alert_full-dialog > i {
    border-radius:10px;
}
.alert_full-dialog .content{
    background:rgb(255,255,255);
    color:rgb(219, 76, 61);
    border-radius: 0px 0px 4px 4px;
}




.alert_full-dialog .content .Showblock .posR{
   line-height: 48px;
   height: 48px;
   Font-Size: 18px;
   Color: rgb(0, 0, 0);
   Font-Style: normal;
   Text-Align: left;
   Letter-Spacing: 1px;
   font-weight: Bold;
   display: flex;
  }
  
  .alert_full-dialog .content .Showblock .posR .open {
   float: left;
   line-height: 48px;
   transition: all linear 0.3s;
  }
  
  .alert_full-dialog .content .Showblock .posR .close.open{
   transform: rotate(180deg);
   transition: all linear 0.3s;
  
  }
  
  
  .alert_full-dialog .content .Showblock {
   height: 180px;
   width: 100%;
   overflow: hidden;
   transition: all linear 0.3s;
  }
  
  .alert_full-dialog .content .Showblock.close {
   height: 48px;
   transition: all linear 0.3s;
  }
  




.alert_full-dialog .header{
   height:42px;  
   display:flex;
   align-items:center;
   border-radius: 6px 6px 0px 0px;
   background-color: rgb(219, 76, 61);
}
.alert_top_right-dialog{
    position: absolute;
    top: 16px;
    right: 16px;
    width: 482px;
    height: 116px;
    border-radius: 16px;
    background-color: rgb(255,255,255);
}
.alert_top_right-dialog .left-side{
    margin-top: 16px;
    margin-left: 32px;
}
.alert_top_right-dialog .message{
    margin-top: 32px;
}
.alert_top_right-dialog .right-side {
    position: absolute;
    top: 16px;
    right: 16px;
}
.alert_top_right-dialog .kmi-button-confirm{
    margin: 0px !important;
    height: 84px !important;
    width: 84px !important;
}
.dialog-lay.confirm-background{
    background-color: transparent;
}
.confirm-dialog{
    position: absolute;
    /*left: calc( 50% - 288px);*/
    bottom: 80px;

    display:flex;
    flex-direction: row;
    align-self: flex-end;

    padding: 0px;
    border-radius: 5px;
    background:#ffffff;
    color:#4e4e4e;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.35);

    min-width: 60%;
    max-width: calc(100% - 40px);
    max-height: calc(80% - 64px);
    white-space: normal;
    word-break: break-word;
    overflow: hidden;
    right: auto;
    height:auto;
}
.confirm-dialog .dialog-content{
    flex: 1;
    padding: 12px 16px;
    margin: 0px;
    align-items: center;
    display: flex;
}
.confirm-dialog .dialog-content p{
    padding: 0px;
    margin: 0px;
    font-weight: 600;
}
.confirm-dialog .dialog-button{
    padding: 2px 8px 2px;
    margin: 0px;
    display: flex;
    align-items: flex-end;
    /*flex: 0 0 160px;*/
    box-sizing: border-box;
}
.confirm-dialog .dialog-button .kmi-button{
    flex: 0 0 68px;
}
.confirm-dialog .dialog-button .kmi-button.kmi-button-confirm{
    /*color:#68bd84;
    background:#FFFFFF;
    font-weight: 600;
    box-shadow: none;*/
    min-width: 110px; /*2020/07/08 Grace 調整按鈕大小以符合PDA*/
    margin: 8px;
}
.SMT-login{
    height: 44px;
}
.confirm-dialog .dialog-button .kmi-button.kmi-button-cancel{
    /*color:#db4d3e;
    background:#FFFFFF;
    font-weight: 600;
    box-shadow: none;*/
    margin: 8px;
    min-width: 90px; /*2020/07/08 Grace 調整按鈕大小以符合PDA*/
}
.mdl-layout__content{
    height: 100%;
}
.page-content.row-content{
    /*height: 100%;*/
    /*
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    */
}
.mdl-navigation button{
    font-size:16px;
    color:white;
}
.mdl-ripple-effect-content{
    position: absolute;
    top : 0;

    overflow: hidden;;
    height: 100%;
    width: 100%;
}
div.mdl-data-table{
   border-left-width: 0px;
   border-right-width: 0px;
   font-size: 16px;
}
div.mdl-data-table-thead>div{
    display:flex;
    font-size:16px;
    flex-direction:row;
    justify-content : space-between;
    flex-wrap : wrap;
    border-bottom: rgba(0,0,0,0.2) 0.5px solid;
    align-items : center;
    padding: 10px 0px 10px 5px;
}
div.mdl-data-table-th{
    padding : 0px 10px;
    overflow: hidden;
}
div.mdl-data-table-tbody .mdl-data-table-column-content{
    display:flex;
    font-size:16px;
    flex-direction:row;
    justify-content : space-between;
    flex-wrap : wrap;
    border-bottom: rgba(0,0,0,0.2) 0.5px solid;
    align-items : center;
    padding: 10px 0px 10px 5px;
}
div.mdl-data-table-td{
    padding : 0px 10px;
    overflow: hidden;
}
.mdl-datepicker-title{
    background-color: #3E4EB8;
    width: 230px;
    height: 40px;
    margin: -10px -10px 10px -10px;
    border-radius: 4px 4px 0 0;
    color: white;
    text-align: left;
    padding: 10px 20px 20px 20px;
    cursor: pointer;
}
@media (max-height: 360px) {
    .mdl-datepicker-title{
        display: none;
    }
}
.mdl-datepicker-month{
    position: relative;
    margin-bottom: 10px;
    font-size : 13pt;
    font-weight: bold;
    color:black;
}
.mdl-datepicker-week{
    display: inline-block;
    vertical-align: text-top;
    text-align: center;

    width:calc(100% / 7);
    height: 35px;
    line-height: 30px;

    color:#b3b3b3;
    font-size : 13pt;
}
.mdl-datepicker-date{
    display: inline-block;
    vertical-align: text-top;
    text-align: center;

    width:calc(100% / 7);
    height: 35px;
    line-height: 33px;
    font-size : 13pt;
    color:black;
    cursor: pointer;
}

.mdl-datepicker-date.is-checked{
    background-color:rgb(255,64,129);
    border-radius: 100%;
    color:white;
}
.mdl-datepicker-date[disabled]{
    color:#b3b3b3;
    cursor: auto;
}

.mdl-datepicker-date.mdl-datepicker-date__today{
    color:#3E4EB8;
    font-weight: bold;
}
.mdl-datepicker-date.mdl-datepicker-date__today.is-checked{
    color:white;
}
.mdl-datepicker-button{
    color:#2196f3;
}
.mdl-datePicker-input{
    position: absolute;
    top : 20px;
}
.mdl-datePicker-input > span{
    float : left;
    margin-top : 6px;
}
.mdl-datePicker-input > span > i{
    float : left;
    margin-top : -2px;
}
.mdl-checkbox{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.page-refresh{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    position: absolute;
    width:100%;
    height: 48px;
    box-size : box-size;
    padding-bottom : 8px;
    z-index:2;
}
.page-refresh__icon{
    border-radius : 22px;
    padding:4px;
    background-color: white;
    display:flex;
}
.page-refresh__icon>i{
    font-size: 36px;
    color : #ff4081;
}
.mdl-textfield__icons{
    position: absolute;
    top: 20px;
    right: 0px;
    color:rgba(0,0,0,.26);
}
.mdl-textfield--floating-label.is-focused .mdl-textfield__icons,
.mdl-textfield--floating-label.is-dirty .mdl-textfield__icons,
.mdl-textfield--floating-label.has-placeholder .mdl-textfield__icons{
    color:#3f51b5;
}
.dialog-container .mdl-layout__header-row{
    padding-right: 16px;
}
.dialog-title-button{
    cursor: pointer;
    position: relative;
}
.mdl-layout__bottom-panel{
    z-index: 1;
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 8px;
}
.mdl-dashboard{

}
.mdl-dashboard .mdl-dashboard-cicle{
    min-height: 80px;
}
.mdl-dashboard .mdl-dashboard-bottom{
    text-align: center;
    font-size:20px;
    font-weight: 600;
    width: 100%;
    color: #ffffff;
    background: #68bd84;
    padding: 4px 0;
    box-sizing: border-box;
}
.mdl-dashboard.is-warn .mdl-dashboard-cicle{
    border:2px #db4b3c solid;
}
.mdl-dashboard.is-warn .mdl-dashboard-bottom{
    background: #db4b3c;
}

.mdl-piechart{
    text-align: center;
}
.dialog-lay.calculater-background{
    /*background:none;*/
}
.dialog-container.calculater-content{
    width:300px;
    max-height: 100%;
    border-radius: 4px 4px 0 0;
}
.dialog-container.calculater-content .kmi-header-row{
    color: gray;
    justify-content: flex-start;
    padding-left: 8px;
}
.calculater-content.dialog-container .kmi-layout-main-content{
    padding: 0px;
    height: 100%;
}
.calculater-content.dialog-container .kmi-layout-page{
    /*background: #f1f1f1;*/
}
.calculater-content .display-content,
.calculater-content .display-content.time{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    width: 100%;
    padding: 0 28px;
    background: #f1f1f1;
    position: relative;
    box-sizing: border-box;
}
.calculater-content .display-content .display{
    text-align: right;
    height: 100%;
    border: 0px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    background: #f1f1f1;
    color:gray;
    font-size: 28px;
}
.calculater-content .display-content.time .display{
    text-align: center;
    flex:1;
    padding: 0;
}
.calculater-content .display-content.time .display.focus{
    color:#1ab7cd;
}
.calculater-content .display-content.time label{
    font-weight: 600;
    line-height: 34px;
    color:gray;
    font-size: 28px;
}
.calculater-content .control-btn{
    position: relative;

}
.calculater-content .numBtn-content{
    display: flex;
    flex-wrap: wrap;
    padding: 2px;
    padding-right: 0px;
    padding-top: 0px;
    box-sizing: border-box;
    flex: 1;
}
.calculater-content .numBtn-content .numBtn-item{
    width: calc(100% / 3);
    text-align: center;
    height: 56px;
    line-height: 56px;
    position: relative;
    color: gray;
    background: #ffffff;
    /*border: 2px solid #f1f1f1;*/
    box-sizing: border-box;
    font-size: 24px;
    position: relative;
}
.calculater-content .control-content{
    display: flex;
    width:68px;
    flex-direction: column;
    padding: 2px;
    padding-left: 0px;
    padding-top: 0px;
    text-align: center;

}
.calculater-content .control-content .control-btn{
    height: 56px;
    line-height: 66px;
    color: gray;
    background: #ffffff;
    /*border: 2px solid #f1f1f1;*/
    box-sizing: border-box;
}
.calculater-content .numBtn-content .numBtn-item.zero-btn{
    width: calc(100% / 3 * 2);
}
.calculater-content .numBtn-content .numBtn-item.zero-btn.big{
    width: 100%;
}
.dialog-container.mdl-radio-dialog  .kmi-header-row{
    border-bottom: 0.5px solid rgba(0,0,0,0.1);
}
.mdl-radio-dialog .filter-fields{

    background:#efefef;
    border-bottom: 0.5px solid rgba(0,0,0,0.1);
    padding: 8px;
    display: flex;
    justify-content: center;
    flex: 0 0 44px;
    box-sizing: border-box;
}
.mdl-radio-dialog .filter-fields input{
    border: 0px;
    border-bottom: 2px solid #cccccc;
    background: transparent;
    text-align: center;
    outline: none;
    flex: 1;
    padding-left: 4px;
    font-size: 16px;
}
.mdl-radio-dialog .filter-fields .tip{
    position: relative;
    left:-22px;
    width: 0px;
    cursor: pointer;
    color: gray;
}
.mdl-radio-list{
    /*
    display: flex;
    flex-direction: column;
    */
}
.mdl-radio-list__item{
    flex : 0 1 50px;
    box-sizing: border-box;
    /*border-bottom: 0.5px solid rgba(0,0,0,0.1);*/
    text-align: center;
}
.mdl-radio-list__item:hover{
    flex : 0 1 50px;
    box-sizing: border-box;
    border-bottom: 0.5px solid rgba(0,0,0,0.1);
    text-align: center;
    color:white;
    background-color:rgba(71,111,183,2);
}
.mdl-radio-list__item .material-icons{
    display: none;
}
.mdl-radio-list__title{
    padding: 16px;
    flex: 1;
}
.mdl-radio-list__item.is-selected{
    background: rgb(71,111,183);
    color: white;
}
.mdl-radio-list__item.is-selected .material-icons{
    display: initial;
    position: absolute;
    left: 16px;
    top: 12px;
}
.radioList-content .singal_value{
    position: inherit;
    margin: 0px auto;
}
.radioList-content .multi_value{
    /* position: fixed; */
    right: 0px;
    flex: 1;
}

.mdl-check-list{
    /*
    display: flex;
    flex-direction: column;
    */
}
.mdl-check-list__item{
    flex: 0 1 50px;
    box-sizing: border-box;
    border-bottom: 0.5px solid rgba(0,0,0,0.1);
    text-align: center;
    display: flex;
    align-items: center;
    position: relative;
}
.mdl-check-list__item.is-disabed{
    background: #eaebeb;
}
.mdl-check-list__item.is-can-check{
    padding-left: 20px;
}
.mdl-check-list__item .mdl-check-list__checkbox,
.mdl-check-list__item .kmi-can-click{
    display: none;
}
.mdl-check-list__item.is-can-check .mdl-check-list__checkbox,
.mdl-check-list__item.is-can-check .kmi-can-click{
    display: initial;
}
.mdl-check-list__item .mdl-check-list__checkbox>img{
    object-fit: cover;
    width: 24px;
    height: 24px;
}
.mdl-check-list__title{
    padding: 16px;
}
.mdl-check-list__icon{
    position: absolute;
    right:4px;
    top:calc(50% - 12px);
    color:gray;
    z-index: 2;
    cursor: pointer;
}
.LoadingMsg{
    color:gray;
    padding-left: 8px;
    user-select: none;
    /*text-shadow: 0px 0px 1px #fff, 0px 0px 1px #fff, 0px 0px 1px #fff, 0px 0px 1px #fff, 0px 0px 1px #fff, 0px 0px 1px #fff, 0px 0px 1px #fff;*/
}
.kmi-list.column-selector .btn-selector{
    /*
    position: absolute;
    top: 7px;
    right: 8px;
    background: #eaeaea;
    border-radius: 50%;
    */
    cursor: pointer;
    z-index: 2;
    user-select: none;
    color: black;
    flex:0 0 32px;
    margin-left: 8px;
    margin-top: 2px;
    margin-bottom: 3px;
    height: 32px;
    background: rgba(0,0,0,0);
}
.kmi-list.column-selector .kmi-list__header.selector_hide_0>.kmi-list__column:nth-child(1),
.kmi-list.column-selector .kmi-list__header.selector_hide_1>.kmi-list__column:nth-child(2),
.kmi-list.column-selector .kmi-list__header.selector_hide_2>.kmi-list__column:nth-child(3),
.kmi-list.column-selector .kmi-list__header.selector_hide_3>.kmi-list__column:nth-child(4),
.kmi-list.column-selector .kmi-list__header.selector_hide_4>.kmi-list__column:nth-child(5),
.kmi-list.column-selector .kmi-list__header.selector_hide_5>.kmi-list__column:nth-child(6),
.kmi-list.column-selector .kmi-list__header.selector_hide_6>.kmi-list__column:nth-child(7),
.kmi-list.column-selector .kmi-list__header.selector_hide_7>.kmi-list__column:nth-child(8),
.kmi-list.column-selector .kmi-list__header.selector_hide_8>.kmi-list__column:nth-child(9),
.kmi-list.column-selector .kmi-list__header.selector_hide_9>.kmi-list__column:nth-child(10)
{
    display: none;
}
.kmi-list.column-selector .kmi-list__row-content.selector_hide_0 .kmi-list__row>.kmi-list__column:nth-child(1),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_1 .kmi-list__row>.kmi-list__column:nth-child(2),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_2 .kmi-list__row>.kmi-list__column:nth-child(3),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_3 .kmi-list__row>.kmi-list__column:nth-child(4),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_4 .kmi-list__row>.kmi-list__column:nth-child(5),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_5 .kmi-list__row>.kmi-list__column:nth-child(6),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_6 .kmi-list__row>.kmi-list__column:nth-child(7),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_7 .kmi-list__row>.kmi-list__column:nth-child(8),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_8 .kmi-list__row>.kmi-list__column:nth-child(9),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_9 .kmi-list__row>.kmi-list__column:nth-child(10)
{
    display: none;
}
.kmi-list.column-selector .kmi-list__header.selector_hide_10>.kmi-list__column:nth-child(11),
.kmi-list.column-selector .kmi-list__header.selector_hide_11>.kmi-list__column:nth-child(12),
.kmi-list.column-selector .kmi-list__header.selector_hide_12>.kmi-list__column:nth-child(13),
.kmi-list.column-selector .kmi-list__header.selector_hide_13>.kmi-list__column:nth-child(14),
.kmi-list.column-selector .kmi-list__header.selector_hide_14>.kmi-list__column:nth-child(15),
.kmi-list.column-selector .kmi-list__header.selector_hide_15>.kmi-list__column:nth-child(16),
.kmi-list.column-selector .kmi-list__header.selector_hide_16>.kmi-list__column:nth-child(17),
.kmi-list.column-selector .kmi-list__header.selector_hide_17>.kmi-list__column:nth-child(18),
.kmi-list.column-selector .kmi-list__header.selector_hide_18>.kmi-list__column:nth-child(19),
.kmi-list.column-selector .kmi-list__header.selector_hide_19>.kmi-list__column:nth-child(20)
{
    display: none;
}
.kmi-list.column-selector .kmi-list__row-content.selector_hide_10 .kmi-list__row>.kmi-list__column:nth-child(11),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_11 .kmi-list__row>.kmi-list__column:nth-child(12),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_12 .kmi-list__row>.kmi-list__column:nth-child(13),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_13 .kmi-list__row>.kmi-list__column:nth-child(14),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_14 .kmi-list__row>.kmi-list__column:nth-child(15),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_15 .kmi-list__row>.kmi-list__column:nth-child(16),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_16 .kmi-list__row>.kmi-list__column:nth-child(17),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_17 .kmi-list__row>.kmi-list__column:nth-child(18),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_18 .kmi-list__row>.kmi-list__column:nth-child(19),
.kmi-list.column-selector .kmi-list__row-content.selector_hide_19 .kmi-list__row>.kmi-list__column:nth-child(20)
{
    display: none;
}
.kmiScrollbar-content{
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#kmi-tooltip{
    position: fixed;
    border-radius: 4px;
    display: none;
    padding: 8px;
    font-size: 16px;
    background: #1ab7cd;
    color : white;
    box-shadow: 4px 4px 4px 0px #9E9E9E;
    z-index: 10;
}
#kmi-toast{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10;
    display: flex;
    justify-content: center;

}
#kmi-toast.toast-hide{
    display: none;
    pointer-events: none;
}
#kmi-toast.toast-tooltip{
    pointer-events: none;
}
#kmi-toast #toast-panel{
    border-radius: 4px;
    /*padding: 12px;*/
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.35);
    min-width: 40%;
    max-width: calc(100% - 40px);
    max-height: calc(80% - 64px);
    overflow: hidden;
    background: #68bd84;;
    color: #ffffff;
    position: absolute;
    bottom: 80px;
    white-space: normal;
    word-break: break-word;
    opacity: 1;
    transition: all .2s ease-in-out;
    display: flex;
    flex-direction: column;
}
#kmi-toast #toast-panel.warning{
    background: #f2ba11;
    color : white;
}
#kmi-toast #toast-panel.error{
    background: #db4c3d;
    color : white;
}
#kmi-toast.toast-hide #toast-panel{
    opacity: 0;
}
/**********************************************************************************************************/
.kmi-marquee{
    position: absolute;
    top: 2px;
    left: 50px;
    width: calc(100% - 58px);
    height: 41px;
    line-height: 41px;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 6px;
    transition: all .2s ease-in-out;
    background: rgba(12, 81, 90, 0.8);
    border-radius: 6px;
    /*background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%,  #ffffff 1%,  #ffffff 99%, rgba(255, 255, 255, 0) 100%);*/
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 10;
}
.kmi-marquee .marquee-msg{
    margin:0px;
    position: absolute;
    top:0px;
    left:0px;
    color:#f6cf5a;
    font-size: 22px;
    font-weight: 600;
    white-space:nowrap;
    animation: marqee 20s linear infinite;
}
@keyframes marqee{
    0% {
        left:100%;
        transform: translateX(0%);
    }
    100% {
        left:0%;
        transform: translateX(-100%);
    }
}
.kmi-marquee.marquee-hide{
    /*width: 0px;*/
    height: 0px;
    opacity: 0;
}
#kmi-toast #toast-panel .main-panel{
    display: flex;
    padding: 12px;
    padding-right: 56px;
}
#kmi-toast.tool-hide #toast-panel .main-panel{
    padding-right: 12px;
}
#kmi-toast #toast-panel .main-panel #toast-msg{
    flex: 1;
    justify-self: center;
    align-self: center;
}
#kmi-toast #toast-panel #detail-panel{
    padding: 12px;
    font-size: 12px;
    transition:all .2s ease-in-out;
    opacity: 1;

    color: #68bd84;
    background: #FFFFFF;

    display: flex;
    flex-direction: column;
    overflow: auto;
    box-sizing: border-box;
}
#kmi-toast #toast-panel.warning #detail-panel{
    color: #f2ba11;
}
#kmi-toast #toast-panel.error #detail-panel{
    color: #db4c3d;
}
#kmi-toast.stack-hide #toast-panel #detail-panel{
    margin: initial;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 0px;
    width: 0px;
    opacity: 0;
    flex: 0 0 0px;
    overflow: hidden;
}
#kmi-toast #toast-panel #detail-panel #exception-info,
#kmi-toast #toast-panel #detail-panel #stack-trace{
    user-select: text;
    white-space:pre;
    padding: 8px;
    font-size: 14px;
}
#kmi-toast #toast-panel #detail-panel #exception-info{
    padding: 0px;
}
#kmi-toast #toast-panel #detail-panel #stack-trace{
    padding-top: 0px;
}
#kmi-toast #toast-panel .main-panel #toast-tool,
#kmi-toast.tool-hide #toast-panel.error .main-panel #toast-tool,
#kmi-toast.tool-hide #toast-panel.warning .main-panel #toast-tool{
    display: none;
}
#kmi-toast #toast-panel.error .main-panel #toast-tool,
#kmi-toast #toast-panel.warning .main-panel #toast-tool{
    display: flex;
    justify-content: right;
    border-left: 1px solid #ffffff;
    color:#ffffff;
    position: absolute;
    right: 0;
    top: 0;
}
#kmi-toast #toast-panel.error .main-panel #toast-tool>.toast-btn,
#kmi-toast #toast-panel.warning .main-panel #toast-tool>.toast-btn{
    position: relative;
    align-items: center;
    justify-content: center;
    display: flex;
    flex: 0 0 44px;

    width: 44px;
    height: 44px;
}
#kmi-toast #toast-panel.error .main-panel #toast-tool>.toast-btn>i.material-icons,
#kmi-toast #toast-panel.warning .main-panel #toast-tool>.toast-btn>i.material-icons{
    font-size: 28px;
}

#kmi-toast #toast-panel.error .main-panel #toast-tool>.toast-btn>i.material-icons.close,
#kmi-toast #toast-panel.warning .main-panel #toast-tool>.toast-btn>i.material-icons.close{
    display: initial;
}
#kmi-toast #toast-panel.error .main-panel #toast-tool>.toast-btn>i.material-icons.open,
#kmi-toast #toast-panel.warning .main-panel #toast-tool>.toast-btn>i.material-icons.open{
    display: none;
}
#kmi-toast.stack-hide #toast-panel.error .main-panel #toast-tool>.toast-btn>i.material-icons.close,
#kmi-toast.stack-hide #toast-panel.warning .main-panel #toast-tool>.toast-btn>i.material-icons.close{
    display: none;
}
#kmi-toast.stack-hide #toast-panel.error .main-panel #toast-tool>.toast-btn>i.material-icons.open,
#kmi-toast.stack-hide #toast-panel.warning .main-panel #toast-tool>.toast-btn>i.material-icons.open{
    display: initial;
}
/**load Program********************************************************************************************/
.load-program.ng-enter{
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out;
  Z-index : 2;
}
.load-program.ng-leave{
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out;
  Z-index : 1;
}

.load-program.ng-enter{
  opacity: 0;

  /* -webkit-transform:translate(0 , 60px);
  -moz-transform:translate(0 , 60px);
  transform:translate(0 , 60px); */
}

.load-program.ng-enter-active {
  opacity: 1;

  -webkit-transform:translate(0, 0);
  -moz-transform:translate(0, 0);
  transform:translate(0, 0);

}

.load-program.ng-leave {
  opacity: 1;
  /*
  -webkit-transform:translate(0, 0);
  -moz-transform:translate(0, 0);
  transform:translate(0, 0);
  */
}
.load-program.ng-leave-active {
  opacity: 0.9;
  /*
  -webkit-transform:translate(-60px,0);
  -moz-transform:translate(-60px, 0);
  transform:translate(-60px, 0);
  */
}
/****leave Program*******************************************************************************************/
.leave-program.ng-enter{
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out;
  Z-index : 0;
}
.leave-program.ng-leave{
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out;
  Z-index : 2;
}

.leave-program.ng-enter{
  opacity: 0.9;
}

.leave-program.ng-enter-active {
  opacity: 1;
}

.leave-program.ng-leave {
  opacity: 1;

  -webkit-transform:translate(0, 0);
  -moz-transform:translate(0, 0);
  transform:translate(0, 0);

}
.leave-program.ng-leave-active {
  opacity: 0;

  -webkit-transform:translate(0px, 60px);
  -moz-transform:translate(0px , 60px);
  transform:translate(0px , 60px);

}


/****Gallery*******************************************************************************************/
.Gallery-Content.ng-hide{
  -webkit-transition:all .2s ease-in-out;
  -moz-transition:all .2s ease-in-out;
  -o-transition:all .2s ease-in-out;
  transition:all .2s ease-in-out;

  opacity: 0;

  -webkit-transform:scale3d(.8 , .8, .8) translate3d(0, 200px, 0);
  -moz-transform:scale3d(.8, .8, .8) translate3d(0, 200px, 0);
  transform:scale3d(.8, .8, .8) translate3d(0, 200px, 0);
}

.Gallery-Content {
  -webkit-transition:all .2s ease-in-out;
  -moz-transition:all .2s ease-in-out;
  -o-transition:all .2s ease-in-out;
  transition:all .2s ease-in-out;

  opacity: 1;
  -webkit-transform:scale3d(1 , 1, 1) translate3d(0, 0, 0);
  -moz-transform:scale3d(1, 1, 1) translate3d(0, 0, 0);
  transform:scale3d(1, 1, 1) translate3d(0, 0, 0);
}
/**Dialog*******************************/
.dialog-lay{
    transition:all .2s ease-in-out;
    opacity: 1;
}
.dialog-lay.lay-hide{
    transition:all .2s ease-in-out;
    opacity: 0;
}
/**Loading***********************************/
.Loading-contain, .LoadingMsg{
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out;

  opacity: 1;
  /*
  -webkit-transform:scale3d(1 , 1, 1);
  -moz-transform:scale3d(1, 1, 1);
  transform:scale3d(1, 1, 1);
  */
}
.Loading-contain.ng-hide, .LoadingMsg.ng-hide {

  opacity: 0;
  /*
  -webkit-transform:scale3d(.2, .2, .2);
  -moz-transform:scale3d(.2, .2, .2);
  transform:scale3d(.2, .2, .2);
  */
}
.check-point-switch{
    width: 44px;
    height: 24px;
    background: #dedede;
    border:1px solid #dedede;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition:all .2s ease-in-out;
}
.check-point-switch:hover{
    border:1px solid #1ab7cd;
}
.check-point-switch>div{
    position: absolute;
    top: 0px;
    left: 0px;
    width:24px;
    height:24px;
    background: url('../../image/icons/not1.png');
    background-size: cover;
    transition:all .2s ease-in-out;
}
.check-point-switch.is-selected>div{
    left: 21px;
    background: url('../../image/icons/check1.png');
    background-size: cover;
}
/*******************/
.treeList-dialog{
    width: 100%;
    height: 100%;
}
.treeList-dialog .kmi-layout-page{
    display: flex;
    flex-direction: row;
}
.treeList-dialog .kmi-list.type-list>.kmi-list__row-content>.kmi-list__row,
.treeList-dialog .kmi-list.type-list>.kmi-list__row-content>.ps-scrollbar-content>.kmi-list__row{
    background: #ffffff;
}
.treeList-dialog .kmi-list.type-list>.kmi-list__row-content>.kmi-list__row:nth-child(even),
.treeList-dialog .kmi-list.type-list>.kmi-list__row-content>.ps-scrollbar-content>.kmi-list__row:nth-child(even) {
    background: #ffffff;
}
.treeList-dialog .kmi-list__row-content .kmi-list__row.is-select:nth-child(odd){
    background: rgba(245, 248, 250, 1);
    color: #000000;
}
.treeList-dialog .kmi-list__row-content .kmi-list__row.is-select:nth-child(even){
    background: #ffffff;
    color: #000000;
}
.treeList-dialog.normal .kmi-list .kmi-list__row-content>.kmi-list__row .checkbox{
    display: none;
}
.treeList-dialog .kmi-list .kmi-list__row-content>.kmi-list__row .mdl-button>img.checked,
.treeList-dialog .kmi-list .kmi-list__row-content>.kmi-list__row.is-select .mdl-button>img.unchecked{
    display: none;
}
.treeList-dialog .kmi-list .kmi-list__row-content>.kmi-list__row.is-select  .mdl-button>img.checked,
.treeList-dialog .kmi-list .kmi-list__row-content>.kmi-list__row .mdl-button>img.unchecked{
    display: inherit;
}
.treeList-dialog .kmi-list.type-list .kmi-list__row .material-icons{
    color: #1ab7cd;
    margin-right: 4px;
}
.treeList-dialog .kmi-list.type-list .kmi-list__row .material-icons.open{
    display: none;
}
.treeList-dialog .kmi-list.type-list .kmi-list__row.is-close .material-icons.open{
    display: initial;
}
.treeList-dialog .kmi-list.type-list .kmi-list__row .material-icons.close{
    display: initial;
}
.treeList-dialog .kmi-list.type-list .kmi-list__row.is-close .material-icons.close{
    display: none;
}
.treeList-dialog .kmi-list.inner-list{
    border-radius: 0px;
    border: 0px;
    transition:all ease-in-out .25s;
}
.treeList-dialog .kmi-list.inner-list.is-close{
    height: 0px;
}
.treeList-dialog .kmi-list.inner-list .kmi-list__row{
    padding-left: 28px;
}
.treeList-dialog .kmi-list__header .kmi-text-fields{
    flex: 1;
    padding: 0 0 2px;
    margin: 0px;
}
.treeList-dialog .kmi-list__header .kmi-text-fields>input:focus{
    box-shadow: none;
}

@media screen and (max-width:320px) {
    .dialog-background .SMT-content {
        margin-top: 23.5%;
        height: 87%;
    }
}