@import 'variables.module.scss'

.HarPage
    width: 100%
    display: flex
    flex-direction: column
    overflow: hidden
    flex-grow: 1
    height: calc(100vh - 70px)

    .harPageHeader
        padding: 20px 24px
        display: flex
        align-items: center
        background-color: $header-background-color

.HarPage-Header
    display: flex
    height: 2.5%
    justify-content: space-between
    align-items: center
    padding: 18px 15px

.HarPage-Header-Image
    width: 22px
    height: 22px

.HarPage-Header-Text
    margin-left: 10px
    font-family: 'Source Sans Pro', serif
    font-size: 14px
    font-weight: bold
    color: #f7f9fc

.HarPage-Header-Actions
    margin-left: auto

.HarPage-Header-Actions-Image
    width: 22px
    height: 22px
    cursor: pointer
    padding-right: 1.2vw
    margin-left: auto
    transform: translate(0 ,25%)

.HarPage-Viewer
    height: 96.5%
    overflow: auto

    > iframe
        width: 100%
        height: 96.5%
        display: block
        overflow-y: auto

.harContent
    box-sizing: border-box
    height: calc(100% - 60px)
    overflow: scroll

.HarPage-Container
    display: flex
    flex-grow: 1
    overflow: hidden
    background-color: $data-background-color

.HarPage-ListContainer
    display: flex
    flex-grow: 1
    overflow: hidden
    padding-left: 24px
    flex-direction: column

.HarPage-DetailContainer
    width: 45vw
    background-color: #171c30
    flex: 0 0 50%
    padding: 12px 24px

.indicatorContainer
    border-radius: 50%
    padding: 2px
    margin-left: 10px

.indicator
    height: 8px
    width: 8px
    border-radius: 50%

.greenIndicatorContainer
    border: 2px #6fcf9770 solid

.greenIndicator
    background-color: #27AE60

.orangeIndicatorContainer
    border: 2px #fabd5970 solid

.orangeIndicator
    background-color: #ffb530

.redIndicatorContainer
    border: 2px #ff3a3045 solid

.redIndicator
    background-color: #ff3a30

.connectionText
    display: flex
    align-items: center
    height: 17px
    font-size: 16px
