@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('menudropitemhover');
        }
    }

    .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; 
        opacity: 0; 
    
        & + 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');      
        }
        }
    
        &:hover + label:before {
            @include themify($themes) {
                background: themed('txtcolor100');
            }
        }
        
        &:focus + label:before { 
        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
        }
    
        &:checked + label:before {
            @include themify($themes) {
                background: themed('txtcolor100');
            }
        }
        
        &:disabled + label {
        color: #b8b8b8;
        cursor: auto;
        }
    
        &:disabled + label:before {
        box-shadow: none;
        background: #ddd;
        }
    
        &: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;
        }



    }

    .templatesettings {

        p {
            margin:0 0 3px 0;
        }

        textarea, input[type="text"] {
            width:90%;
        }
    }

}

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


#reportsettings, #subscriptionsettings {
    @include themify($themes) {
        background:themed('barbg');
    } 
    padding:20px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    border-top-right-radius:10px;

}



.dropzone {

    ul, li {
    list-style-type: none;
    margin:0;
    padding:0;
    }

    .mainsectionwrapper {
        @include themify($themes) {
            background:themed('bodybg');
        }
        border-radius:10px;
        margin-bottom:15px;

        i {
            cursor:pointer;
        }
        
        .drag{
            padding-right:0;
            padding-left:15px;
            cursor: grab;
            i {
                cursor: grab;

            }
        }



      
    }

    .templateMainSection {
        display: flex;
        align-items: baseline;
        flex-direction: row;
        width: 100%;
        border-radius: 10px;


        &.hassubsection {
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }

        @include themify($themes) {
            background:themed('barbg');
        }

        h4, p, button {
            margin:0;
        }

        div {
            padding:8px 10px;
        
            &.nodrag {
                width:38px;
            }


            &.name{
                min-width:0;
                width:300px;
            
                h4 {
                    font-size: 18px;
                    height:33px;
                    line-height:33px;
                    margin:0;
                    padding:0;
                    white-space: nowrap; 
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            &.iconwrapper {
                padding: 0 2px 0 5px;
                &:last-child {
                    padding-right:15px;
                }
            }

            &.description {
                @include themify($themes) {
                    color:themed('txtcolor2');
                }
                min-width:0;
                flex:1;
                font-size:14px;
                font-weight:300;
                p {
                    white-space: nowrap; 
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }

    .subsection {
        padding: 5px 0 10px 0;

        li {
            @include themify($themes) {
                border-bottom:1px solid themed('txtcolor3');
            }
            margin: 15px;
            padding: 0 0 12px 0;
            display: flex;


            .drag {
                padding-right:10px;
                padding-left:0;
            }

            div {
                padding:0 10px;


            &.name{
                padding-left:0px;
                width:325px;
                white-space: nowrap; 
                overflow: hidden;
                text-overflow: ellipsis;
            }

            &.description {
                @include themify($themes) {
                    color:themed('txtcolor2');
                }
                flex:1;
                font-size:14px;
                font-weight:300;
                white-space: nowrap; 
                overflow: hidden;
                text-overflow: ellipsis;

            }

            &.iconwrapper {
                padding:0 2px 0 5px;
                &:last-child {
                    padding-right:0px;
                }
            }

        }


        }
    }
}

.addtemplatesection{
    p {
        margin: 0 0 5px 0;
    }

    h4 {
        margin-bottom:15px;
    }


    .material-input, .imageinput {
        width:100%;
    }

    .imageinput {
        input {
            margin-bottom:5px;
            width:90%;
        }

        .addtagdropdown {
            width:90%;
        }
        &+i {
            position: absolute;
            right: 20px;
            transform: translateY(-32px);
        }
    }

    textarea {
        font-size: 14px;
        padding:10px;
        @include themify($themes) {
            color: themed('txtcolor100');
            background-color: themed('bodybg');
            border: 1px solid themed('trBorderColor');

        }
        width:100%;
    }

    .editordiv {
        font-size:14px;
        padding:10px;
        @include themify($themes) {
            color: themed('txtcolor100');
            background-color: themed('bodybg');
            border: 1px solid themed('trBorderColor');

        }
     
        height: 150px;
        overflow: auto;
        resize: both;
        width: 100%;


        a.tag { 
          
                float:left;
                height:20px;
                line-height:20px;
                position:relative;
                font-size:12px;
                font-weight:700;        
                margin:0 10px;
                padding:0 5px 0 12px;
                @include themify($themes) {
                    color: themed('label-count');
                    background-color: themed('label-count-bg');
                }
                text-decoration:none;
                border-bottom-right-radius:4px;
                 border-top-right-radius:4px;	
            
             &:before{
                content:"";
                float:left;
                position:absolute;
                top:0;
                left:-10px;
                width:0;
                height:0;
                @include themify($themes) {
                    border-color: transparent themed('label-count-bg') transparent transparent;
                }
                border-style:solid;
                border-width:10px 10px 10px 0;		
                }	

            &:after{
                content:"";
                position:absolute;
                top:8px;
                left:0;
                float:left;
                width:4px;
                height:4px;
                border-radius:2px;

                @include themify($themes) {
                    box-shadow:-1px -1px 2px themed('label-count-bg');
                    background: themed('label-count');
       
                }
            }		
            
            &:hover{
                @include themify($themes) {                   
                    background: themed('color0');
                    color: themed('txtcolor1');
                }
                i {
                    color:red;
                }	
            }   
            &:hover:before{
                border-color:transparent #999 transparent transparent;

                @include themify($themes) {                   
                    border-color:transparent themed('color0') transparent transparent;
                }
            }
          }
    }

    .pageorientation {
        text-align:center;
        margin-bottom:15px;
        display:inline-block;
        padding:0 10px;
        opacity:0.3;
        transition: all 0.4s;
        cursor:pointer;
        
        &.active, &:hover {
            opacity:1;
        }

        svg {
            height:30px;
            width:auto;

            path {
                @include themify($themes) {
                    fill: themed('txtcolor100');
                }
            }
        }
    }
}

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

    }
    &:last-child {
        td {
            border-bottom:none;
        }
    }
}

    i {
        position:relative;
    }
}

.sectiontypeselector {
    tr {
        td {
                font-size:13px;
            padding: 3px 15px!important;
        }
    }
}

.downloadreport {

    display:flex; 
    align-items: center;
    p {
        font-size:14px;

    }
    i {
        font-size:24px;
    }
}



/* Front page preview */

.previewWhitebox {
    fill: #fff;
}
.previewTitlebox {
    opacity: 0.8;
    mix-blend-mode: multiply;
}

.previewDatebox {
    opacity: 0.69;
}

.previewIntro {
    font-size: 9px;
    font-family: Montserrat-Light, Montserrat;
    font-weight: 300;
    fill: #949494;
}

.previewDate {
    font-size: 10px;
    font-family: Montserrat-Light, Montserrat;
    font-weight: 300;
    fill: #1d1d1b;
}

.previewTitle {
    font-size: 24px;
    font-family: Montserrat-Black, Montserrat;
    font-weight: 800;
    fill: #fff;
}

.previewLocation {
    font-size: 36px;
    font-family: Montserrat-Light, Montserrat;
    font-weight: 300;
    fill: #fff;
}

.previewLogo {
    fill: #ddd;
}

/* Report wizard */

.loading:before {
    content:"";
    width:38px; 
    height:38px;
    left:10px;
    top:6px;
    position:absolute; 
    z-index:999;
    background-repeat: no-repeat;
    background-image:url('/app/core/images/loader_small.gif');
}

#generateReportModal, #subscribeReportModal{

    .modal-content {
        background-color: transparent;
    }
    .material-input, .imageinput {
        width:100%;
    }

    input, textarea {
        width:90%!important;
    }

    .datafile {
        text-align:center;
        margin-bottom:15px;
        display:inline-block;
        padding:0 10px;
        opacity:0.3;
        transition: all 0.4s;
        cursor:pointer;
        
        &.active, &:hover {
            opacity:1;
        }

        svg {
            height:30px;
            width:auto;

            path {
                @include themify($themes) {
                    fill: themed('txtcolor100');
                }
            }
        }
    }

    .imageinput {
        input {
            margin-bottom:5px;
            width:90%;
        }

        &.dropdown {
            width:100%;
           
        }

    }

    .editortools {
        text-align:center;
        border-top-right-radius: 6px;
        border-top-left-radius: 6px;
        @include themify($themes) {
            background-color: themed('barbg');

        }
        padding:7px;
    }

    .editor {
        font-size:14px;
        padding:15px;
        height:400px;
        width:100%;
        @include themify($themes) {
            border: 1px solid themed('trBorderColor');

        }

    }

    textarea {
        font-size: 14px;
        padding:10px;
        @include themify($themes) {
            color: themed('txtcolor100');
            background-color: themed('bodybg');
            border: 1px solid themed('trBorderColor');

        }
        width:100%;
    }

    .container-fluid > .row {
        margin-top: 0px;
        padding-top:25px;
    }

    .stepwizard-row {
    // display: table-row;
    }
    .stepwizard {
        display: table;
        width: 100%;
        position: relative;
    }


    .stepwizard-step button[disabled] {
        opacity: 1 !important;
        filter: alpha(opacity=100) !important;
    }
    .stepwizard-row:before {
    /* top: 14px;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 100%;
        height: 1px;
        background-color: #ccc;
        z-order: 0;*/
    }
    .stepwizard-step {
        display: inline-block;

         a {

            @include themify($themes) {
                background-color:themed('cardbg');
                color:themed('txtcolor100');
            }
    
            display: block;
             border-radius: 15px;
             width: 30px;
             height: 30px;
             text-align: center;
             padding: 6px 0;
             font-size: 12px;
             line-height: 1.428571429;
             &.primary {
                @include themify($themes) {
                    background-color:themed('color0');
                    color:themed('txtcolor100');
                }
             }
         }

    /* display: table-cell;
        text-align: center;
        position: relative;*/
    }
    a.btn-circle {
        width: 30px;
        height: 30px;
        text-align: center;
        padding: 6px 0;
        font-size: 12px;
        line-height: 1.428571429;
        border-radius: 15px;
    }

    .modal-footer {
        width:calc(100% + 50px);
        margin:0 -25px;
    }




}

#tablewrapper {

    .datarow {
        &.disabled {
            opacity:0.3;
        }

        i.icon-cog-alt {
            font-size:18px;
            margin-left:35px;
        }
    }

    button.btn.lockswitch {
        height:23px!important;
        margin: 0 1.5rem;

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

        &.active {
            @include themify($themes) {
                background-color:themed('trBorderColor')!important;
            }
        } 

        &.btn-toggle:before, .btn-toggle:after {
            @include themify($themes) {
                color:themed('txtcolor100')!important;
            }
        }


        &.btn-toggle:before {
            font-size:18px;
            left: -3rem;
            font-family: "scadaicons";
            font-style: normal;
            font-weight: normal;
            content: '\f13e';

        }

        &.btn-toggle:after {
            font-size:18px;
            right: -3rem;
            font-family: "scadaicons";
            font-style: normal;
            font-weight: normal;
            content: '\e819';
        }

        &.btn-toggle.active:before, &.btn-toggle:after {
            opacity: 0.3;
        } 

        &.btn-toggle.active:after {
            opacity:1;
        }
    }
        .btn-toggle:before, .btn-toggle:after {
            @include themify($themes) {
                color:themed('txtcolor100')!important;
            }
        }

 
}

#reportGenerating {
    width:100%;

    .progress{
        overflow:visible;
        height:40px;
        border-radius:20px;
        padding:4px;
        @include themify($themes) {
            background-color:themed('navbg');
        }

      }

      .progress-bar{
        border-radius:18px;
      width:10%;
        @include themify($themes) {
            background-color:themed('barvalue');
        }
  

        transition: width 5s ease-in-out;
      }
}




.dataManualValue {
    input {
        width:calc(100% - 45px);
    }
    
    span {
        font-size:14px;
        padding-left:5px;
        line-height:34px;
    }
}

.dataCategory {
    .imageinput {
        margin-right:-35px;
        width:99%;
        input {
            width:90%;
        }

    
    }   
    i.icon-help {
        position: absolute;    
        font-size:24px;
        transform: translate(3px, -2px);
    } 
}

.generatedData {
    font-size:14px;
    font-weight:300;
    margin-bottom:15px;



    td {
        padding:5px 5px 5px 0;

    }
}


.reportUnitSelector {



   /* width:22%!important; 
    max-width:22%!important; 
    flex: 0 0 22%!important;*/
    max-height:600px;
    overflow-y:scroll;
    overflow-x: hidden;

    .selectall {
        float:right;
    }


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



}
