@import 'def';


#reportwrapper {

    .selectall {
        float:right;
    }

    .treetoggle i{
        cursor:pointer;
    }

    h3 {
        font-weight:400;
        font-size: 24px;
    }

    input, textarea {
        @include themify($themes) {
            border: 1px solid themed('trBorderColor');
            background-color: themed('bodybg');
            color: themed('txtcolor100');
        }
        font-size:14px;
        padding:5px 10px;
        vertical-align: top; 
        width:auto;
        
        &::placeholder {
            @include themify($themes) {
                font-size:14px;
                font-weight: 300;
                color:themed('txtcolor100');
            }
        }
    }

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

    .contentrow {
        padding-top:10px;
    }

    .recipientwrapper {
    
        @include themify($themes) {
            background:themed('barbg');
        } 
        padding:20px;
        border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;

        input {width:90%;}

        p {margin-bottom:6px;}

        .btn {
            margin-right:10px;
            min-width:140px;
    
            @include themify($themes) {
                color: themed('txtcolor100');
                background-color: themed('navbg');
    
            }
        }

    }

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

    .nav-tabs {
            border-bottom:none;

        .nav-link {
            border:none;
            padding-left:25px;
            padding-right:25px;
            
            @include themify($themes) {
                background:themed('bodybg');
                color:themed('txtcolor100');
            }  
            margin-right:5px;

            &.active {
                @include themify($themes) {
                    background:themed('barbg');
                    color:themed('txtcolor100');
                }   
            }
        }
    }

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

    .noborderbottom {
            border-bottom:none!important;
        }

    ul.selectedrecipients {
       // height:360px;
       height: 315px;
    }

    ul.chooserecipients {
        // height:323px;
        height:278px;
    }

    ul.chooserecipients, ul.selectedrecipients {
        margin:0;
        padding: 0 15px 0 0;
        list-style-type: none;     
        overflow-y:scroll;

         li {
             padding:8px 0;
             cursor:pointer;
             font-size:14px;
             font-weight:400;
             transition: all 0.4s;
            @include themify($themes) {
                border-bottom:1px solid themed('trBorderColor');
            }  
            span {
                float:right;
                img {
                    cursor: pointer;
                    height:14px;
                    transition: all 0.2s;
                    padding-right:5px;
           
                }
            }

            &:hover {
                @include themify($themes) {
                    background-color:themed('bodybg');
                }  
                padding-left:5px;   
            }

            &:hover img {
                height:18px;
            }
            &.disabled:hover i {
                font-size: inherit;
            }
         }
    }

    .reportrow > div {
        padding:10px 15px;
        font-size:14px;
        font-weight:400;
        /*white-space: nowrap;*/

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

        p {
            margin:0px;
            padding-top:5px;
        }
    }

    .reportrow.focusrow {

        @include themify($themes) {
            border:2px solid themed('focusborder');
        }  
    padding:10px;
    margin:20px 0px;
    border-radius:5px;    
        div {
            border:none;
        }
    }

    .inputwrapper {

    }

    .inputwrapper input, .inputwrapper .imageinput {
        width:100%;
        img {
            right:0px;
        }
    }

    button.btn {
        padding:0px 20px;
        font-size:15px;
        height:33px;
        @include themify($themes) {
            color:themed('txtcolor100');
            background-color: themed('navbg');
        }
    }

    .dropdown, .imageinput {
        input { width:90%;
        }
 
    }

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

    .dropdown-menu {
        font-size: 14px;
        min-width: 90%;
        @include themify($themes) {
            border: 1px solid themed('trBorderColor');
            background-color: themed('bodybg');
            color: themed('txtcolor100');
            border-radius: 0px;          
        }

    button {
        width:100%;
    }    

    table {
        tr {
            border-bottom:none;
            height:25px;
            cursor: pointer;
                td {
                    padding: 8px 15px;
                }
            &:hover {
                @include themify($themes) {
                    background-color: themed('navbg');
                }
            }
            }
        }
    }

    

    .imageinput {
        position: relative; 
        display: inline-block;
        margin-right: 20px;
        width:200px;  
        vertical-align: top;

        i {
            position:absolute;
            transform: translate(-28px, 5px);
            &.icon-search {
                transform: translate(-28px, 3px);
            }
        }
        
        &.recipients {
            margin-bottom:4px; 
            width:100%;
            input {
                width:100%;
            }
            img {
                right:0px;
            }
        }

        .dropdown-menu {
            img {
                position: relative;
                margin-right:10px;
                padding:0px;
                height:14px;
            }
        }
        
    }
    .imageinput input {
        padding-right: 30px;
    }

    .imageinput img {
        position: absolute;
        right: -8px;
        padding: 10px 12px;
        pointer-events: none;
        top: 0px;
        z-index:999;
        height: 32px;
    }

   


    /* Custom check boxes */


    .checkboxinline {
        .checkboxwrapper {
            margin-left:2px;
            margin-right:10px;
            width:auto;
        }
    }


    .checkboxwrapper {
        display: inline-block;
        margin-right:25px;
        padding-top:4px;
        label {
            margin-bottom: 5px;
            font-size:14px;


            i {
                margin-left:-10px;
            }
        }

       
    }

    input[type="checkbox"] {
        position: absolute; // take it out of document flow
        opacity: 0; // hide it
    
        & + label {
        position: relative;
        cursor: pointer;
        padding: 0;
        }
        // Box.
        & + label:before {
        content: '';
        margin-right: 10px;
        display: inline-block;
        vertical-align: text-top;
        margin-top:3px;
        width: 12px;
        height: 12px;

        @include themify($themes) {
            border: 1px solid themed('txtcolor100');      
        }
        //background: white;
        }
    
        // Box hover
        &:hover + label:before {
            @include themify($themes) {
                background: themed('txtcolor100');
            }
        }
        
        // Box focus
        &:focus + label:before { 
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
        }
    
        // Box checked
        &:checked + label:before {
            @include themify($themes) {
                background: themed('txtcolor100');
            }
        }
        
        // Disabled state label.
        &:disabled + label {
        color: #b8b8b8;
        cursor: auto;
        }
    
        // Disabled box.
        &:disabled + label:before {
        box-shadow: none;
        background: #ddd;
        }
    
        // Checkmark. Could be replaced with an image
        &:checked + label:after {
        content: '';
        position: absolute;
        left: 1px;
        top: 10px;
        @include themify($themes) {
            background: themed('color0');
            box-shadow: 
            2px 0 0 themed('color0'),
            4px 0 0 themed('color0'),
            4px -2px 0 themed('color0'),
            4px -4px 0 themed('color0'),
            4px -6px 0 themed('color0'),
            4px -8px 0 themed('color0');
        }
        width: 2px;
        height: 2px;
        
        transform: rotate(45deg);
        }
    }

    .reportcontent {
        flex: 0 0 78%;
        max-width: 78%;
        width:78%
    }

    .reportsidebar {

        width:22%!important; 
        max-width:22%!important; 
        flex: 0 0 22%!important;
        overflow-y:scroll;
        overflow-x: hidden;

        h3 {
            margin: 10px 0 15px 8px;
            font-weight:400;
            font-size: 24px;
        }

        &>.checkboxwrapper{
            margin-left: 8px;
        }

        .checkboxwrapper {
            width:100%;
        }
        
        label {
            vertical-align: top;
        white-space: nowrap;
        max-width: 60%;                   /* IE6 needs any width */
        overflow: hidden;              /* "overflow" value must be different from  visible"*/ 
        -o-text-overflow: ellipsis;    /* Opera < 11*/
        text-overflow:    ellipsis;
        }

        ul {
            list-style-type: none;
            width:100%;
            font-size:14px;
            li {
                width:100%;
                display:block;
            }
        }

        .tree {
            .checkboxwrapper {
                margin-left: 32px;
            }
        }

        ul.nav-menu-list-style .nav-header .menu-collapsible-icon {
            position:absolute; 
            right:3px; 
            top:0px; 
            img {
                height:10px;
                cursor:pointer;
            }
        }

        ul.nav-menu-list-style {
            margin:0;
            li {
                .disabled {
                    opacity:0.2;
                }
            }
        }

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

        a {
            color:#fff;
        }

        ul.nav-menu-list-style .nav-header {
            display:block;
            margin:0;
            /*line-height:42px;*/
            padding:0 8px;
            font-weight:600;
        }

        ul.nav-menu-list-style > li{
            position:relative; 
        }

        ul.nav-menu-list-style > li a{
            padding:0 10px;
            line-height:32px;
        }

        ul.nav-menu-list-style > li:first-child a {

        }


        ul.nav-menu-list-style { 
            list-style:none; 
            padding:0px; 
            margin:0px;
        }
        ul.nav-menu-list-style li .badge,ul.nav-menu-list-style li .pull-right,ul.nav-menu-list-style li span.badge,ul.nav-menu-list-style li label.badge{
            float:right;
            margin-top:7px;
        }



    }

}

.configerrorlist {
    list-style-type: none;
    margin: 0;
    padding:0;
    
    li {
        padding: 7px 0;
        @include themify($themes) {
            border-bottom: 1px solid themed('trBorderColor');      
        }
    }
}

.reportloading{
    
    .loader {
    display:block!important;
    margin-bottom:20px;
    margin-top:0px;
    }
}

.reportloadsuccess {
    display:none;
}