@import 'def';

#unitdetails {
    top:10px;

    i.icon-unit_solar {
        position:absolute;
        left:-45px;
        top:35px;
        font-size: 150px;
        line-height: 10px;
        margin: 0;
        padding:0;
        overflow-y: hidden;
        overflow-x: visible;
        max-height:200px;
        width:300px;
        display: block;
        z-index:0;
        
        @include themify($themes) {
            color: themed('bodybg');
        }
        &:before {
        }
    }

    .icon-cirk_bg {
        left: -10px !important;
        top: -1px !important;
    }

.unitdescription {
    p {
    @include themify($themes) {
        color: themed('txtcolor2');
        }
    }

    h3 {
        margin-bottom:0px;
    }
}

.status {
    h1 {
        font-size: 48px;
    }

    table {
        padding:0;
        margin:0;
        display:block;
        width:100%;
        max-width:100%;

        tr {
            border:none;
        }

        td {
            vertical-align: top;
            padding:0;
            white-space: initial;
        }
    }

    .statusicon {
        width:70px;
        text-align: center;
        span{
            display: block;
            transform: translateY(4px) translateX(5px);
        }
    }

    .statustext {
        padding-top:10px;
    }
}

    .frame {
        border-radius:10px;
        margin:10px;
        padding:15px;
        width:36%;
        position: relative;
        @include themify($themes) {
            background-color: themed('barbg');
        }

        &.environment {
            i {
                font-size:42px;
                line-height:0px;
                padding:0;
                margin:0;
                display: block;
                transform: translateY(3px);
            }

            h6 {
                margin-bottom:29px;
            }

            .row:last-of-type h6 {
                margin-bottom:0;
            }
        }
        
        &.narrow {
            width:22%;
        }

        &.wide {
            width:59.3%;
        }

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

        h4 {
            font-size:32px;
            margin-bottom:0px;
            font-weight:400;

            span {
                font-size:18px;
            }
        }

        h6 {
            font-size: 14px;
            padding:0 0 21px 0;
            @include themify($themes) {
                color: themed('txtcolor2');
            }

            &:last-of-type {
                padding-bottom:0;
            }
        }

        .yawrose {
            background-position: center;
            background-repeat: no-repeat;
            padding: 0 35px;
            
            img.nacelle {
              position:absolute;
            }
        }

      
    }
}

.theme-light {
    .yawrose {            
        background-image: url(/app/core/images/yaw_black.svg);
    }

    .pitchgraph {
        background-image: url(/app/core/images/pitch_graph_black.svg);
    }

    .nacelle {
        content: url(/app/core/images/yaw_nacelle_black.svg);
    }

    .arrow > img {
        content: url(/app/core/images/pitch_wing_black.svg);
    }
}

.theme-dark {
    .yawrose {            
        background-image: url(/app/core/images/yaw.svg);
    }

    .pitchgraph {
        background-image: url(/app/core/images/pitch_graph.svg);
    }
}

/* Graphs */
.pitchgraphwrapper {
    position: relative;
    min-height:242px;

    .pitchgraph {
        position:absolute;
        left:0px;
        bottom:0px;
        width:100%; 
        background-size:75%;
        background-position: top left;
        background-repeat: no-repeat;

        .arrow {
            
         transform: translateX(56%) translateY(-20%);   
        }
        img {
            transform-origin:80% 30%;
            height:110px; 
       }
    }
}



.unitgraphwrapper {
    position: relative;
    margin: 10px 0 10px 0;
    


    &.power {
        height:81%;

     
    }

    &.pitch {
        height:100%;
    }

    &.met {
        height:110px;
    }

    &.drive {
        height:150px;
        margin-bottom:0px;
        margin-top:6px;
    }
      

        .base {
            display: block;
            float:left;
            width:32px;
            position: relative;
            margin-left:9px;
            height:100%;
            @include themify($themes) {
                background-color: themed('bodybg');
            }


            .valuebar, .value  {
                height:30%;
                width:100%;
                position: absolute;
                bottom:0px;
                overflow-x:visible;
                background: #369894;

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

                &.power {
                    @include themify($themes) {
                        background-color: themed('barvalue');
                    } 
                }
            }
            .value {
                background: transparent;
                white-space: nowrap;
                width:130%;

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

                overflow:visible;
                h4 {
                    transform: translateX(45px) translateY(-12px);
                    line-height:18px;
                }
            }
        }

        .min, .max {
            position:absolute;
            left:55px;
            white-space: nowrap;
        }
        .min {
            bottom:-15px;
        }

        .max {top:-9px;}

        .valuelines {
            display: block;
            float:left;
            height:100%;
            width:4px;
          

          @include themify($themes) {

            background: repeating-linear-gradient(
                transparent,
                transparent 6px,
                themed('txtcolor2') 6px,
                themed('txtcolor2') 7px
              );
        } 



      
    }
    .graphtop, .graphbottom {
        position:absolute;
        left:0px;
        bottom:0px;
        height:1px;
        width:50px;

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

    .graphtop {
        top:0px;
    }
}