@import "inc/bootstrap";


.diagnostics-main-area {
    max-width: 768px;
    margin: 40px auto 0 auto;
    background: $canvas;
    @include simple-border();
    padding: 20px;

    h1, h2, h3 {
        font-style: normal;
        font-family: $headingFont;
    }

    h1 {
        margin-bottom: 20px;
        @include font-size(20);
    }

    h2 {
        margin: 0;
        @include font-size(14);
    }

    h3 {
        margin-top: 10px;
        margin-bottom: 5px;
        @include font-size(12);
    }

    .status, .details {
        h2 {
            margin: 1rem 0;
        }
    }

    .legend {
        font-style: italic;
        font-weight: normal;
        font-family: $headingFont;
        @include font-size(11);
    }

    .customMsg {
        margin-top: 10px;
    }

    .quality-bar {
        height: 15px;
       @include linear-gradient(#CE1431 #D57915 #D5A215 #D5CB15 #36B111);
//        @include linear-gradient(#36B111  #D5A215 #CE1431 );
        opacity: .8;
        @include border-radius(2);
        margin: 5px 0 10px;
        position: relative;
    }

    .quality-indicator {
        position: absolute;
        border-width: 10px 8px;
        border-style: solid;
        border-color: $darkBar transparent transparent;
        top: -1px;
        height: 25px;
        width: 0;

        &[title]:before {
            @include font-size(11);
            content: attr(title);
            position: absolute;
            top: -36px;
            left: -12px;
            text-align: center;
            width: 24px;
            height: 24px;
            line-height: 24px;
            display: inline-block;
            background-color: $info;
            color: white(.9);
            @include border-radius(12);
        }

        &.wide[title]:before {
            left: -16px;
            width: 32px;
        }
    }

    [data-result], .bandwidth-box {
        display: none;
    }

    [data-action=bandwidth-launcher] {
      margin: 5px 0 10px;
    }

    li {
        padding-bottom: 10px;
    }

    .intro {
        margin-bottom: 20px;
    }

    table.matrix {
        @include simple-border();
        margin-top: 5px;
    }
}


table.datatable {
    [class^="icon-"] {
        padding: 0;
    }

    td {
        font-size: 90%;
        font-weight: normal;
    }

    .progress {
        .state:not(:first-child):before {
            content: ' - ';
        }
        .item-time:before {
            content: ' (';
        }
        .item-time .total:before {
            content: ' / ';
        }
        .item-time:after {
            content: ')';
        }
    }
}

.diagnostic-scope {
    h1 {
        font-family: $headingFont;
        @include font-size(22);
        font-weight: normal;
    }
    h2 {
        font-family: $headingFont;
        @include font-size(18);
        margin: 30px 0 10px;
    }

    form.daterange {
        label {
            padding : 0;
        }
        input {
            margin: 0 10px;
        }
    }

    table.datatable {
        [class^="icon-"] {
            padding: 0;
        }

        td {
            font-size: 90%;
            font-weight: normal;
        }
    }

    .content {
        margin: auto;
    }

    .diagnostic-index, .diagnostic-runner {
        .content {
            width: 100%;
            padding: 0 20px;
        }
        .message {
            padding: 8px;
            text-align: center;
        }
    }

    .panel {
        .action-bar {
            background: whiten($info, .1);
            padding: 3px;
            overflow: hidden;
            color: whiten($info, .9);
            margin: 40px 0 10px 0;

            .btn-info {
                overflow: hidden;
                background: transparent;
                border: 1px white(.3) solid;
            }
        }
    }

    .diagnostics-main-area {
        margin-top: 0px;
        max-width: 800px;
    }

}

.action-bar {
    .tool-exitButton, [data-control="exitButton"] {
        float:right;
    }
}