@import "mixins"
@import "base"
@import "tables"

.top
    background: linear-gradient(to bottom, #ffffff 0%,#e7e7e7 100%)
    width: 100%
    height: 93px
    color: #000
    position: fixed
    top: 0px
    left: 0px
    z-index: 2
    a
        color: #308dbf
    .top-content
        padding-top: 20px
    
        .logo
            float: left
            width: 200px
            height: 48px
            margin-top: 2px
        
        .boxes
            float: right
            .box_running
                display: none
                body.spawning &, body.running &
                    display: block
                body.stopped &, body.stopping &
                    display: block
            .box_stop
                body.stopped &, body.stopping &
                    display: none
            .top_box
                float: left
                border-left: 1px solid #d9d9d9
                padding-left: 20px
                padding-right: 20px
                height: 53px
                &:first-child
                    border: none
                .label
                    color: #7a7a7a
                    font-size: 11px
                    font-weight: bold
                .value
                    color: #000
                    font-size: 16px
                    font-weight: bold
                    max-width: 165px
                    word-wrap: break-word
                &.box_url .value
                    font-size: 14px
                    font-weight: normal
                &.box_rps .value, &.box_workers .value
                    font-size: 32px
                &.box_fail .value
                    font-size: 22px
                &.box_status
                    .value
                        text-transform: uppercase
                    .new-test
                        display: none
                        body.stopped &, body.stopping &
                            display: block
                    .edit-test
                        display: none
                        body.running &, body.spawning &
                            display: inline
                .stop-button
                    display: block
                    float: left
                    background: #d81212
                    border-radius: 5px
                    color: #fff
                    padding: 9px 18px
                    text-align: center
                    font-size: 11px
                    font-weight: bold
                    margin-right: 12px
                    &:hover
                        background: #c80202
                    i
                        display: block
                        background: #fff
                        width: 17px
                        height: 17px
                        margin-left: auto
                        margin-right: auto
                        margin-bottom: 7px
                        box-shadow: 0 0 20px rgba(255,255,255, 0.5)
                .reset-button
                    display: block
                    float: left
                    background: #5a4b4b
                    border-radius: 5px
                    color: #fff
                    padding: 11px 16px
                    line-height: 1.5em
                    text-align: center
                    font-size: 11px
                    font-weight: bold
                    &:hover
                        background: #4e4141

.container
    max-width: 1800px
    min-width: 1000px
    margin-left: auto
    margin-right: auto
    box-sizing: border-box
    padding-left: 10px
    padding-right: 10px

.dialogs
    position: relative
    .dialog
        width: 398px
        position: absolute
        left: 50%
        top: 60px
        margin-left: -169px
        z-index: 1
    
        .padder
            padding: 30px
            padding-top: 0px
        
        h2
            color: #addf82
            font-size: 26px
            font-weight: bold
    
        label
            display: block
            margin-bottom: 10px
            margin-top: 20px
            font-size: 16px
        
        input
            &.val
                border: none
                background: #fff
                height: 52px
                width: 328px
                font-size: 24px
                padding-left: 10px
            &.val_disabled
                border: none
                background: #cccccc
                height: 52px
                width: 328px
                font-size: 24px
                padding-left: 10px
    
        button
            margin-top: 20px
            float: right
            font-size: 16px
            font-weight: bold
            background: #8adaba
            padding: 14px 30px
            border-style: none
            border-radius: 5px
            cursor: pointer
            &:hover
                background: #74b99d
    
    .start
        body.ready &
            display: block
            .close_link
                display: none
        body.stopped &, body.stopping &
            display: none
            border-radius: 5px
            -moz-border-radius: 5px
            -webkit-border-radisu: 5px
            border: 3px solid #eee
            background: #132b21
            box-shadow: 0 0 60px rgba(0,0,0,0.3)
        body.running &, body.spawning &
            display: none
    .edit
        body.ready &
            display: none
        body.stopped &, body.stopping &
            display: none
        body.running &, body.spawning &
            display: none
            border-radius: 5px
            -moz-border-radius: 5px
            -webkit-border-radisu: 5px
            border: 3px solid #eee
            background: #132b21
            box-shadow: 0 0 60px rgba(0,0,0,0.3)

.main
    position: relative
    display: block
    body.ready &
        display: none
    nav.menu
        background: #132b21
    
        ul.tabs
            overflow: hidden
        
            > li
                display: block
                float: left
                font-size: 16px
        
                a
                    padding: 14px 10px
                    display: inline-block
                    color: #b3c3bc
                    position: relative
                    font-weight: 600
                    font-size: 14px
                    &:hover
                        background: #10211a
                    &.current
                        color: #fff
                        &:after
                            content: ""
                            display: block
                            position: absolute
                            left: 0
                            bottom: 0
                            right: 0
                            height: 3px
                            background: #fff
        
    .panes
        margin-top: 30px
        > div
            overflow: hidden

    #errors td, #errors th
        text-align: left
        th.error_count
            width: 70px
    
    #exceptions 
        th.exception_occurrences
            width: 110px
            text-align: center
        th.exception_traceback
            text-align: left
        td.occurrences
            text-align: center
        td.traceback
            font-size: 12px
            line-height: 18px
            font-family: monospace
            white-space: pre
    
    #charts
        width: 100%
        .chart
            height: 350px
            margin-bottom: 30px
            box-sizing: border-box
            border: 1px solid #11271e
            border-radius: 3px
        
        .note
            color: #b3c3bc
            margin-bottom: 30px
            border-radius: 3px
            background: #132b21
            padding: 10px
            display: inline-block

.about
    width: 398px
    position: absolute
    left: 50%
    top: 5px
    margin-left: -169px
    border-radius: 5px
    -moz-border-radius: 5px
    -webkit-border-radius: 5px
    border: 3px solid #eee
    background: #132b21
    box-shadow: 0 0 60px rgba(0,0,0,0.3)
    z-index: 1
    
    a.close_link
        position: absolute
        right: 10px
        top: 10px
    .padder
        padding: 30px
        padding-top: 0px

.footer
    position: absolute
    bottom: 0
    padding: 12px 0
    background: #132b21
    width: 100%
    text-align: right
    box-sizing: border-box
    height: 40px
    
    a
        margin-right: 10px
        color: #48a584

