@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 {
        }
    }

    .nav-tabs {
        border-bottom:none;
        transform: translate(-5px, 10px);

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

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

        &.third {
            width:31.5%;
        }

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

            &.timeunit {
                display:inline-block;
                padding-Right:20px;
                span{
                    @include themify($themes) {
                        color: themed('txtcolor3');
                    }
                    font-size:16px;
                    display:block;
                }
            }
        }

        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, .singlepitchgraph {
        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, .singlepitchgraph {
        background-image: url(/app/core/images/pitch_graph.svg);
    }
}

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

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

        .arrow {
            
             position: absolute;
              right:calc(1.8vw - 4%);

            @media only screen and (min-width: 1600px) {
           
                right:calc(1.8vw - 8%);
            }


            @media only screen and (min-width: 1900px) {
                right:1.5vw;
            }

            @media only screen and (min-width: 2050px) {
                right:1.5vw;
            }

            @media only screen and (min-width: 2200px) {
                right:1.8vw;
            }

            @media only screen and (min-width: 2560px) {
                right:calc(1.7vw);
            }

            @media only screen and (min-width: 2900px) {
                right:calc(1.8vw);
            }

            @media only screen and (min-width: 3000px) {
                right:calc(1.8vw);
            }

            @media only screen and (min-width: 3200px) {
                right:1.85vw;

            }

        }
        img {
            transform-origin:80% 30%;
            height:110px; 
       }



          


    }

    &.singlewing.col-9 {
        .singlepitchgraph {
            position:absolute;
            left:0px;
            bottom:0px;
            top:0px;
            width:100%; 
            height: 100%;
            max-height:242px;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: 45% -10%;


           

  



            .arrow {
             
                transform: translateX(calc(45% + 70px)) translateY(-19%);

               }



            img {
                transform-origin:80% 30%;

                height:200px; 
           }
        }
        }

}



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



@keyframes spin {
    0% { transform:  rotate(-20deg); }
    100% { transform:  rotate(100deg); }
}
.spin img{
    animation: spin 3.5s linear 0s infinite normal;

}
.spin:hover img{
    animation: spin 3.5s linear 0s infinite reverse;
}


