@import 'def';

#monitorwrapper {
    padding-bottom:50px;
    overflow-y:hidden;
}

#onlinedata, #historicaldata {  
    .onlinedatadrops {
        .imageinput {
            width:100%;
            input {
                width:95%;
            }
        }
    }

    .dropdown-menu {
        padding:0px;
    }

    .dropdown-menu.taggroups {
        padding:0px;
        
        tr {
            border-bottom:none;
        }

        i {
            position: relative;
            display: inline-block;
            transform: none;
            padding:0px;
        }

        #systemtags {
            @include themify($themes) {
                border-top: 1px solid themed('trBorderColor');
                background-color: themed('navbg');
            }
        }
    }

    #graphwrapper {
        width: calc(100% - 410px);
        //         width: calc(100% - 240px);
        margin-right:15px;
        display: inline-block;
        vertical-align: top;
        transition: all 0.4s;

        &.expanded {
            width: calc(100% - 240px);
        }
        &.tags-expanded {
            width: calc(100% - 400px);
        }

        img {
            margin-bottom: 20px;
        }
    }

    #tags {
        width:220px;
        height:100%;
        display:inline-block;
       transition: all 0.4s;

        @include themify($themes) {
            border: 1px solid themed('trBorderColor');
        }

        table {
            width:100%;
            padding:0px;
            margin:0px;

                tr {
                    height:50px;
                    &.selected {
                        @include themify($themes) {
                            background-color: themed('navbg');
                        }
                    }
                }


            
                td:first-child {
                    padding-left:10px;
                }

                td:last-child {
                    padding-right:10px;
                }
           

        
            td {
                padding:0px;
                margin:0px;
            }

            p {
                margin:0px;
                padding:0px;
                display: inline-block;
            }

            .selection {
                float: right;
                i {
                    font-size: 10px;
                    padding:0px 1px;
                    display: inline-block;
                    margin-right: 2px;
                    cursor:pointer;
                 

                    &.selected, &:hover {
                        @include themify($themes) {
                            color:  themed('color0');
                            background-color: themed('label-count-bg');
                        }
                    }
                }
            }

            .tagname .value {
                width:13px;
                height:13px;
                margin-right: 10px;
                display: inline-block;
            }
        }

        .hidden {
            display:none;
            transition: all 0.4s;
            p {
                transition: all 0.4s;
            }
        }

        i.expander {
            cursor:pointer;
        }
 
        &.expanded {
            width:380px;

            .hidden {
                display: table-cell;
            }

            i.expander {
                display: inline-block;
                transform: rotate(180deg);
            }
        }
    }
}
#historicaldata {
    #tags {
        width: 256px;
    }

    #graphwrapper {
        width: calc(100% - 276px);
        margin-right:15px;
        display: inline-block;
        vertical-align: top;
        transition: all 0.4s;

        &.expanded {
            width: calc(100% - 276px);
        }

        &.tags-expanded {
            width: calc(100% - 395px);
        }

        img {
            margin-bottom: 20px;
        }
    }
}

.tagModal {
    @include themify($themes) {
        color: themed('txtcolor1');
    }
    .taggrouptitle, .taggrouptitle input{
        width:100%;
    }

    .modal-header {
        @include themify($themes) {
            background-color: themed('navbg');
        }
        border:none;

        h5 {
            font-size:15px;
        }
        button span{
            @include themify($themes) {
                color: themed('txtcolor100');
            }
        }
    }

    .addtagmodalheader {
        padding-bottom:5px;
        @include themify($themes) {
            border-bottom: 1px solid themed('trBorderColor');
        }
    }



    .modal-content {

        #selectedtags {
            margin-top:5px;
            overflow-y: scroll;
            padding:0px;

            @include themify($themes) {
                border: 1px solid themed('trBorderColor');
                height:300px;
            }

            table {
                margin:0px;
                padding:0px;
                width:100%;

                thead {
                    @include themify($themes) {
                        border-bottom: 1px solid themed('trBorderColor');
                    }  
                }

                tbody td {
                    padding:13px 0px 5px 13px;
                }
            }
        }

        .modal-body {
            padding:0px;
            border-radius:10px;

        }

        .container-fluid {
            padding:0;
            .row {
                margin:0;
            }

            .dark {
                @include themify($themes) {
                    background-color: themed('navbg');
                }
            }
            .centerdiv, .note {
                padding:20px;
            }

            textarea {
                width:100%;
                height:250px;
                margin-bottom:10px;

                @include themify($themes) {
                    background-color: themed('bodybg');
                    color: themed('txtcolor100');
                    padding:10px;
                    font-size: 14px;
                    border:none;
                }
            }
            .btn {
                @include themify($themes) {
                    background-color: themed('navbg');
                }
                width:100%;     
            }
        }

        .modalscroll {
            overflow-y:scroll;
            height:300px;
            margin-top:0px;

            hr {
                border-color:#666;
            }

            .row {
                padding-top:8px;
                padding-bottom:8px;
                @include themify($themes) {
                    border-bottom: 1px solid themed('trBorderColor');
                }
            }

        }

        @include themify($themes) {
            background-color: themed('bodybg');
        }
        table {
            padding:0;
            margin: 35px 0;
            font-size: 14px;

            tr {
                height: auto;
                border:none;
                td {
                    padding: 8px;
                }
            }
        }


    }

    .modal-lg {
        max-width: 80%;
    }
}
