@import 'def';
.scadacard {

        .parksection {
            width:100%;
            @include themify($themes) {
                border-bottom: 1px solid themed('trBorderColor');
             }  
             
                h1 {
                    display:inline-block;
                } 
            }

            i {
                &.disabled, span.disabled {
                    @include themify($themes) {
                        color: themed('txtcolor3')!important;
                    }
                }
            }
    
.itemtable {
    margin-bottom:40px;

    .material-input {
           //width:150px; 
           input {
               max-width:none;
           }
          /* &+.sort-arrows {
               margin-left:3px;
               transform: translateY(-1px);
           }
           */
    }

    .icon-stack {
        display: inline-block;
        vertical-align: top;
        transform: translateX(-17px);

    }

    .icon-ok-circle, .icon-warning, .icon-tri_bg, .icon-alert {
        font-size:20px;
        transform: translateY(-5px);
    }
}

error {
    display:block;
    position:absolute;
    font-weight:700;

    color: #ff0800;
    opacity:0;
    transform: translateX(-5px);
    transition: 0.3s;

    &.shown {
        transform: translateX(0px);
        opacity:1;
    }
}
/*
inlineerror {
    display: block;
    font-weight:700;
    position: absolute;
    left:-999px;
    margin:0px;
    padding:0px;
    height:0px;
    color: #ff0800;
    opacity:0;
    transform: translateX(-10px);
    transition: margin 0.3s;
    transition: height 0.3s;
    transition: opacity 0.3s;
    transition: transform 0.3s;



    &.shown {
        position:relative;
        max-width:100%;
        transform: translateX(0px);

        left:0px;
        margin: -5px 15px 10px 15px;
        height:auto;
        opacity:1;
    }
}
*/

.location {
    td {
        h1 {
        margin-bottom:0px;
        }

        i {
            cursor:pointer;
            margin-left:12px;
            &:before {
                width:auto;
                margin-left:0px;
                margin-right:0px;
            }
        }
    }
}

#actiontd, #titletd {
    .material-input {
        width:150px!important; 
    }
}


    table {
        width: calc(100% - 3px);
        font-weight:400;
        @include themify($themes) {
            color:themed('txtcolor100');
        }

        tr {
            @include themify($themes) {
               border-bottom: 1px solid themed('trBorderColor');
            }
            transition: all 0.4s;
            height:61px;
            &.active {
                @include themify($themes) {
                    background-color: themed('barbg');
                    color: themed('trHoverColor');
                }
            }
        }

        .datarow {
            .uniticon {
                margin-top:-4px;
            }

            i {
                cursor:pointer;
            }

            i.inactive {
                @include themify($themes) {
                    color: themed('focusborder')!important;
                }
            }   

            .icon {
                padding:5px 0;
                transition: all 0.3s;

        

            &:hover, &.active {
                /*background:#000;*/
              /* padding:5px;
                margin: 0px -5px;*/
                cursor:pointer;

                @include themify($themes) {
                    color: themed('txtcolor100')!important;
                }
            } 
        }

        }

        th {
            vertical-align: top;

        }

        td, th {
            white-space: nowrap;
            position: relative;
            padding:14px;
            font-size:14px;
            font-weight: 400;



            &.hidden{
                display:none;
            }
            img {
                height:18px;
                padding-right:4px;
            }

            a {
                @include themify($themes) {
                    color: themed('txtcolor100');
                }
            }
        }

        th { 
            img.filter {
            height:12px;
            vertical-align: top;
            margin: 10px 0px 0 0;
            }

            span {
                vertical-align: top;
                padding-top:5px;
                display: inline-block;
            }

            &.noinput {
                padding-top:19px;
            }

            .btn {
                margin-bottom:0px;
            }

         

            input {
                @include themify($themes) {
                    border: 1px solid themed('trBorderColor');
                    background-color: themed('bodybg');
                    color: themed('txtcolor100');
                }
                    padding:5px 10px;
                vertical-align: top; 
                width:auto;
                max-width:130px;
                
                &::placeholder {
                    @include themify($themes) {
                        font-size:14px;
                        color:themed('txtcolor100');
                    }
                }
            }
            .sort-arrows {
                display:inline-block;
                /* margin-left:12px; */

                margin-left: 3px;
                transform: translateY(-1px);

                padding-top:7px;
                vertical-align: top;
        
                .arrow-up, .arrow-down {
                    width: 0; 
                    height: 0; 
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                    cursor:pointer;
                }

                .arrow-up {
                    @include themify($themes) {
                        border-bottom: 8px solid themed('trBorderColor');
                    }
                    margin-bottom: 3px;
                    &.active {
                        @include themify($themes) {
                            border-bottom-color: themed('txtcolor1');
                        }
                    }
                }
                
                .arrow-down { 
                    @include themify($themes) {
                        border-top: 8px solid themed('trBorderColor');
                    }
                    &.active {
                        @include themify($themes) {
                            border-top-color: themed('txtcolor1');
                        }
                    }
                }
            }
            &.noinput .sort-arrows {
                transform: translateY(-6px);
            }
           
        }

  

        .detailbtn {
            @include themify($themes) {
                color: themed('txtcolor100');
            }

        }

        .actiontd {
            width:150px;
        }

        .windarrow {
            width:20px; 
            margin-top:-5px;
        }

        .statusbox {
            display: inline-block;
            background-color:#999;
            position: relative;
            height:32px;
            padding: 2px 8px 0 8px;
            margin-bottom: 0;
            margin-right:8px;
            border: none;
            border-radius: 5px;
            transition: transform 0.2s;
    
            &:hover {
                box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
                transform: translate(0px,3px);
            }

            a {
                color:#fff;
            
            }

            i {
                padding-right:5px;
            }        
    
            &.alert {
                @include themify($themes) {
                    background-color:themed('alert');
                }
            }
                
            &.warning {
                @include themify($themes) {
                    background-color:themed('warning');
                }
            }
            &.service {
                @include themify($themes) {
                    background-color:themed('service');
                }
            }
            &.radio {
                @include themify($themes) {
                    background-color:themed('comm');
                }
                a,i {
                    @include themify($themes) { 
                        color:themed('txtcolor3');
                    }
                }
            }
        }

        a i {
            color:#fff;
            font-size:18px;      
        }

        .bar {
            text-align: center;
        }

        .barbg {
            @include themify($themes) {
                background-color: themed('barbg');
            }
            width:100%;
            height:32px;
            position:relative;
        }

        .bardisplay {
            @include themify($themes) {
                background-color: themed('barvalue');
            }
            width:0%;
            height:100%;
            position:absolute;
        }

        .barvalue {
            position: relative;
            padding:0 20px;
            width:100%;
            z-index:2;
            top:4px;
        }

        .statusdot{
            width:24px;
            height:24px;
            display: inline-block;
            vertical-align: middle;
            margin-right:10px;
            border-radius: 12px;
        }
    }

    .dropdown-menu {
        @include themify($themes) {
            font-size: themed('bodysize');        
            background-color: themed('cardbg');
            color: themed('txtcolor100');
        }
        font-style:normal;
        font-weight:300;
        margin-right: -140px;
        
        box-shadow:0px 0px 10px rgba(0,0,0,0.2);
        border:none;

        i.icon {
            font-style:normal;
            display:block;
            padding:10px 15px;
            margin:0px;
            transition:all 0.4s;
            border-radius:0;
            &:hover {
                padding:10px 15px; 
                margin:0px;
                @include themify($themes) {
                    background-color: themed('navbg');
                }
            }
        }

        a {
            @include themify($themes) {
                color: themed('txtcolor100');
            }
            transition: all 0.4s;
        }

        .dropdownscrollarea {
            max-height: 305px;
            overflow-y: scroll;

        }

        
    }

    .dropdown-toggle::after {
        display: none;
    } 

    .dropdownheader { 
        i {
            padding-right:1.5rem;
            font-size: 24px;
        }

        p {
            @include themify($themes) {
                font-size: themed('bodysize');
            }
            margin:0;
            font-weight:400;
            padding-left:1.5rem;
        }
    }


}

.drill-drop {

    cursor: pointer;

    &.dropdown-toggle::after {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: .255em;
        vertical-align: .255em;
        content: "";
        border-top: none;
        border-bottom: none;
        border-left: none;
     }

     .drillmenuheader {
         padding:8px 0 ;
         text-align:center;
         margin-top:-10px;
         margin-bottom: 0;
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
         @include themify($themes) {
            background-color:themed('barbg'); 
        }
     }

     .dropdown-menu {
        @include themify($themes) {
            background-color: themed('bodybg');
        }
        padding:10px 0;
        margin-left:20px;
        border:none;
        min-width: 220px;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
        border-radius: 10px;


        a {
            font-size:15px;
            display: block;
            padding: 10px 15px;
            transition: all 0.4s;
            @include themify($themes) {
                color:themed('txtcolor100'); 
            }

            &.active, &:hover  {
                @include themify($themes) {
                    background-color: themed('txtcolor5');
                }
            }
        }
    }
}

.drillcontainer {
    position: absolute;
   /* display:none;*/
    left:100%;
    top: 70px;    
    z-index:999;
    @include themify($themes) {
        background-color: themed('cardbg');
    }

    width: calc(100% - 400px); 

    img.icon {
        height:18px;
        display: inline-block;
        margin-left:10px;
        cursor:pointer;
    }

    .tools {

        ul {
            margin:0;
        }
        li {
            display: inline-block;
            padding-left:5px;
        }

        i,a {
            cursor: pointer;
            @include themify($themes) {
                color: themed('txtcolor100');
            }
        }

        .dropdown-menu {
        p{            
            padding: 5px 15px;
            margin: 0;
        }
            transform: translateX(-50%);
        }
    }
}


#tablewrapper {
    overflow-x:hidden;
    min-height:550px;

    &::-webkit-scrollbar {
        width: 10px; /* 1px wider than Lion. */
        /* This is more usable for users trying to click it. */
        background-color: rgba(0,0,0,0);
        -webkit-border-radius: 100px;
      }
      /* hover effect for both scrollbar area, and scrollbar 'thumb' */
    &::-webkit-scrollbar:hover {
        background-color: rgba(0, 0, 0, 0.09);
      }
       
      /* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
    &::-webkit-scrollbar-thumb:vertical {
        /* This is the EXACT color of Mac OS scrollbars. 
           Yes, I pulled out digital color meter */
        background: rgba(0,0,0,0.5);
        -webkit-border-radius: 100px;
        background-clip: padding-box;
        border: 2px solid rgba(0, 0, 0, 0);
        min-height: 10px; /*Prevent it from getting too small */
      }
    &::-webkit-scrollbar-thumb:vertical:active {
        background: rgba(0,0,0,0.61); /* Some darker color when you click it */
        -webkit-border-radius: 100px;
      }

    .container-fluid {
        padding-left:0px;
        padding-right:0px;
    }

   
}
.filterdrop {
    transform: translateY(-3px);
    display:inline-block;
    &~.sort-arrows {
        display:inline-block;
        transform: translateY(-4px);

    }

    i {
        display: inline-block;
        transform: translateY(1px);
    }
}

.statusfilter {

    tr:last-child {
        border-bottom:none!important;
        &:hover {
            background-color: transparent!important;
        }
    }


    .icon-stack {
    width:10px;
    line-height:24px;
    margin: 0px 5px 0px 0px !important;
        &+span {
            transform: translateY(-2px);
        }

        i {
           font-size:16px!important;
           transform:translateY(0em)!important;
          /*  .cirk-bg {
                transform: scale(90%);
            }
            */
        }
    }

    td:first-child {
        padding-right:0px!important;
    }
    input, img {
        float:left;
    }

    img {margin-right:5px;}

    .btn {
        width:calc(100% - 30px);
        margin:10px;

        @include themify($themes) {
            color: themed('txtcolor100');
            background-color: themed('barbg');

        }
    }
   
}

#filterbuttons,  #drillfilterbuttons {
    text-align: right;
    width:auto;
    float: right;
    display: inline-block;

    button {
        font-size: 15px;
        margin-left:15px;
        color:#fff;
        transition: all 0.2s;
        &:hover {
            transform: translateY(3px);
        }
    }

    .alarm {
        @include themify($themes) {
            background-color: themed('alert');
        }
    }

    .warning {
        @include themify($themes) {
            background-color: themed('warning');
        }
    }

    .operations {
        @include themify($themes) {
            background-color: themed('operations');
        }
    }

    .virtual {
        @include themify($themes) {
            background-color: themed('virtual');
        }
    }

    .communication {
        @include themify($themes) {
            background-color: themed('comm');
        }
    }

    .service {
        @include themify($themes) {
            background-color: themed('service');
        }
    }

    .predictor {
        @include themify($themes) {
            background-color: themed('predictor');
        }
    }

    .ticket {
        @include themify($themes) {
            background-color: themed('ticket');
            color:#666;
        }
    }
}

.datefilter {
    .header  {
        @include themify($themes) {
            border-bottom: 1px solid themed('trBorderColor');
        }
        padding: 0 0 5px 0;
        background-image: url('/app/core/images/filter.svg');
        background-repeat: no-repeat;
        background-position: right 15px top 8px;
        background-size: 11px 11px;  

        input {
            width:85%!important;
            max-width: none;
            padding-left:15px;
            background-color: transparent!important;
            border:none!important;
        }
    }  

    .range {
        padding:15px 0 0 15px;
        @include themify($themes) {
            border-bottom: 1px solid themed('trBorderColor');
        }
    p {
        cursor:pointer;
        transition: all 0.4s;
        &:hover {
            margin-left:5px;
        }
    }    
    &:first-child{
        margin-top:-0.5rem;
    }   
      
    }
}
    
    .calendartable {
        margin: 0 0 -0.5rem 0;
        padding:10px;
        display: block;
        @include themify($themes) {
            background-color: themed('navbg');
        }
        &>p {
            padding-left:5px;
            margin:0;
        }

        .tableheader {
            width:100%;
            margin:0;
            td {
                padding:0px;
            }

      
        }

        input {
            margin:10px 15px; 
            width:calc(100% - 30px)!important;
            max-width: none!important; 
            display: block;
        }

        table {
            margin-top: 10px;
            width:100px;
            font-size: 0.9em;
        

        tr {
            border-bottom:none!important;
            height:auto;
            &:hover {
                background-color:transparent!important;
            }
        }
        
        thead {
            border: none;
        }
        
        th, td {
            @include themify($themes) {
                color: themed('txtcolor100');
            }
            text-align: center;
            border:none;
            padding:8px;
        }

        td:hover {
            @include themify($themes) {
                background-color: themed('barbg');
            }

            border-radius: 5px;
            cursor: pointer;
        }
        
    }
        
        .notthismonth {
            @include themify($themes) {
                color: themed('trBorderColor');
            }
        }
        
        .title {
            font-size: 14px;
            margin: 20px 0 10px 0;
            text-align:center;
        }
        
       
        .today {
            @include themify($themes) {
                background-color: themed('txtcolor2');
                color: themed('txtcolor100');
            }
            border-radius: 5px;
        }
        

            


    }


.icon-setpoint {

    margin-top: -10px!important;
    transform: translateY(10px);
    &:hover {
        border-bottom-left-radius: 10px!important;
        border-bottom-right-radius: 10px!important;
    }
    > span {
      font-size:11px;
      @include themify($themes) {
        color: themed('txtcolor2');
        }
    }

    button {
        cursor:pointer;
    }

    &:hover {
        button {
            @include themify($themes) {
                background-color: themed('bodybg');
                color: themed('txtcolor100');
            }
        }
    }
    .setpoint {
        padding-top:15px;

        span {
            display: inline-block;
            transform: translateY(-3px);
            margin-right:8px;
        }
        input {
            @include themify($themes) {
                border: 1px solid themed('trBorderColor');
                background-color: themed('bodybg');
                color: themed('txtcolor100');
            }
                padding:5px 10px;
            vertical-align: top; 
            width:auto;
            max-width:80px;
            margin-right:5px;
            
            &::placeholder {
                @include themify($themes) {
                    font-size:14px;
                    color:themed('txtcolor100');
                }
            }
        }
    }
}

