@import 'def';
.scadacard {

    table {
        width: 100%;
        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;
            &:hover {
                @include themify($themes) {
                    background-color: themed('barbg');
                    color: themed('trHoverColor');
                }
            }
        }

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

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

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

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

            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;
                padding-top:7px;
        
                .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('txtcolor3');
                    }
                    margin-bottom: 3px;
                    &.active {
                        @include themify($themes) {
                            border-bottom-color: themed('txtcolor100');
                        }
                    }
                }
                
                .arrow-down { 
                    @include themify($themes) {
                        border-top: 8px solid themed('txtcolor3');
                    }
                    &.active {
                        @include themify($themes) {
                            border-top-color: themed('txtcolor100');
                        }
                    }
                }
            }
        }

        .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;
        }
    }
}

.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;
     }

     .dropdown-menu {
        @include themify($themes) {
            background-color: themed('bodybg');
        }
        padding:10px 0;
        margin-left:20px;
        border:none;
        min-width: 20px;
        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: 20px;    
    z-index:99;
    @include themify($themes) {
        background-color: themed('cardbg');
    }

    width: calc(100% - 400px); 

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

#tablewrapper {
    overflow: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;
    }
}