@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;
            white-space: nowrap;
        }
    }

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

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

}

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

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

    .pitchgraph {
        position:absolute;
        left:0px;
        bottom:0px;
        top:0px;
        width:100%; 
    }
}

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


.svgwingwrapper {
    width:100%;
    padding-right:10px;
    position:absolute;
    bottom:0px; 
    float:left;
    @include themify($themes) {
        .axis { fill:themed('txtcolor2');}
        .axisvalue, .wingborder {fill:themed('txtcolor100');}
        .wing {transform-origin: 66% 32%}
        .wingfill {fill:themed('barbg');}
    }

    svg {
        max-height: 310px;
    }
}



  @keyframes spin {
      0% { transform:  rotate(0deg); }
      40% { transform:  rotate(90deg); }
      50% { transform:  rotate(90deg); }
        90%{ transform:  rotate(0deg); }    
        100% { transform:  rotate(0deg); }
}
.spin{
  animation: spin 13.5s linear 0s infinite normal;

}
