@import "def";

#singleline {
    text {
        @include themify($themes) {
            fill: themed("txtcolor100");
        }
    }

    line,
    circle,
    polyline,
    polygon,
    rect,
    path {
        @include themify($themes) {
            stroke: themed("txtcolor100");
        }

        &.filled {
            @include themify($themes) {
                fill: themed("txtcolor100");
            }
            stroke: none;
        }

        &.vertswitch,
        &.switch {
            transform-origin: 100% 100%;
            transition: all 0.4s;

            @include themify($themes) {
                stroke: themed("txtcolor100");
            }

            &.open {
                stroke: #55ff55;
            }
        }

        &.leftswitch {
            &.open {
                stroke: #55ff55;
            }
        }

        &.leftswitch.open {
            transform: rotate(-20deg);
        }

        &.switch.open {
            transform: rotate(20deg);
        }

        &.vertswitch.open {
            transform: rotate(-20deg);
        }
    }

    circle.filled {
        @include themify($themes) {
            fill: themed("txtcolor100");
        }
    }

    .switchbg {
        @include themify($themes) {
            stroke: themed("trBorderColor");
        }
    }
}

.singlelinewrapper {
    @include themify($themes) {
        background-color: themed("barbg");
        padding: 15px;
        border-radius: 10px;
    }
}

.singlelinedata {
    padding-top: 10px;

    table {
        margin-bottom: 5px;
        @include themify($themes) {
            background-color: themed("cardbg");
            border: 1px solid themed("txtcolor3");
        }
        border-radius: 10px;
        border-collapse: initial;

        tr {
            border-bottom: none !important;
            height: auto;
            margin-top: 10px;

            th {
                padding-bottom: 2px;
                padding-top: 5px;
                padding-left: 10px;

                h6 {
                    display: inline-block;
                    font-weight: bold;
                    font-size: 14px;
                    margin: 0;
                    white-space: initial;
                }
            }

            td {
                padding: 0px 10px;
            }
        }
    }
    .red {
        color: red;
    }

    .subdata {
        font-size: 14px;
        margin-bottom: 15px;
        @include themify($themes) {
            background-color: themed("bodybg");
        }
        border-radius: 6px;
        padding: 5px 0;

        h3 {
            font-size: 14px;
            font-weight: bold;
            margin: 8px 25px;
        }

        table {
            @include themify($themes) {
                background-color: themed("navbg");
            }
            border: none !important;
            padding: 10px 5px;
            width: 100%;
            margin: 7px 0;

            td {
                padding: 0px 2px;
                border-bottom: none;

                &.bold {
                    font-weight: bold;
                }
            }
        }

        .buildingstatus {
            p {
                margin-bottom: 4px;
            }
            .icon-stack {
                width: 25px;
                vertical-align: top;
                display: inline-block;
            }

            .status {
                display: inline-block;
            }
        }
    }
}

#singleline.summitWind, #singleline.peakWind {
    .summitWindSVG, .peakWindSVG {
        line,
        path,
        circle {
            fill: none;
        }

        .breaker {
            stroke: #ff0000;
            stroke-width: 4px;
        
            &.open {
            stroke: #0f8c3e;
            }

            &.hidden {
                display: none;
            }
        }

        .red {
            @include themify($themes) {
                stroke: themed("alert");
            }
        }

        .green {
            @include themify($themes) {
                stroke: themed("grassgreen");
            }
        }

        .grey {
            @include themify($themes) {
                stroke: themed("focusborder");
            }
        }

        .gen {
            &.red {
                circle {
                    @include themify($themes) {
                        stroke: themed("alert");
                    }
                }

                text {
                    stroke: none;
                    @include themify($themes) {
                        fill: themed("alert");
                    }
                }
            }

            &.green {
                circle {
                    @include themify($themes) {
                        stroke: themed("grassgreen");
                    }
                }
                text {
                    stroke: none;
                    @include themify($themes) {
                        fill: themed("grassgreen");
                    }
                }
            }

            &.grey {
                circle {
                    @include themify($themes) {
                        stroke: themed("focusborder");
                    }
                }
                text {
                    stroke: none;
                    @include themify($themes) {
                        fill: themed("focusborder");
                    }
                }
            }
        }

        text {
            font-size: 14px;
            &.bigG {
                font-weight: 900;
                font-size: 19px;
            }
        }

        .button {
            @include themify($themes) {
                fill: themed("bodybg");
            }
            stroke-width: 0px;
            cursor: pointer;
            text {
                cursor: pointer;
            }
        }

        .disabled {
            opacity: 0.2;
            pointer-events: none;
        }

        .turbine * {
            stroke-width: 0px;
            @include themify($themes) {
                fill: themed("txtcolor100");
            }
        }

        .hidden {
            display: none;
        }

        .infoicon {
            cursor: pointer;
            stroke-width: 0px;
            @include themify($themes) {
                fill: themed("txtcolor100");
            }
        }
        .info {
            font-size: 11px;
            font-family: Montserrat-Bold, Montserrat;
            font-weight: 700;
            @include themify($themes) {
                fill: themed("color0");
            }
            cursor: pointer;
        }
    }
}

hr.subdatadivider {
    margin: 5px 15px 10px 15px;
    padding: 0;
    border-top: 1px solid #777;
}
