/deep/ .mdTabLabel {
    /*TODO: adjust mdTabLabel size by class*/
    text-align: center;
    /*decrease width of mat-tab labels*/
    min-width: 50px !important;
}

.play-group {
    padding: 30px;
}

.circle-before-start {
    fill: #B3E5FC;
}

.circle-Stopped {
    fill: #F44336;
}

.circle-Follower {
    fill: #40C4FF;
}

.circle-Leader {
    fill: #2E7D32;
}

.client-card {
    min-height: 390px;
}

.select-node-checkbox {
    font-size: 12px;
    color: darkgrey;
    font-family: 'Inconsolata', monospace;
    font-weight: 300;
    padding-right: 8px;
}

.prefix-checkbox {
    font-size: 10px;
    color: darkgrey;
    font-family: 'Inconsolata', monospace;
    font-weight: 300;
}

.client-card-text-status {
    text-align: center;
    font-size: 12px;
    color: #000;
    font-family: 'Inconsolata', monospace;
    font-weight: 300;
}

.client-card-text-list-title {
    font-size: 15px;
    color: #000;
    font-family: 'Inconsolata', monospace;
    font-weight: 300;
}

.client-card-text-id {
    font-size: 13px;
    color: #000;
    font-family: 'Inconsolata', monospace;
    font-weight: 300;
}

.client-card-text-endpoint {
    font-size: 13px;
    color: #000;
    font-family: 'Inconsolata', monospace;
    font-weight: 300;
}

.client-card-text-dbsize {
    font-size: 15px;
    color: #000;
    font-family: 'Inconsolata', monospace;
    font-weight: 300;
}

.client-card-text-hash {
    font-size: 15px;
    color: black;
    font-family: 'Roboto', Helvetica, sans-serif;
    font-weight: bold;
}

.client-card-text-Stopped {
    font-size: 15px;
    color: #FF1744;
    font-family: 'Inconsolata', monospace;
    font-weight: bold;
}

.client-card-text-Follower {
    font-size: 15px;
    color: #3F51B5;
    font-family: 'Inconsolata', monospace;
    font-weight: bold;
}

.client-card-text-Leader {
    font-size: 15px;
    color: #388E3C;
    font-family: 'Inconsolata', monospace;
    font-weight: bold;
}

.log-box {
    padding-top: 15px;
    padding-left: 5px;
    border: 1px solid black;
    height: 250px;
    overflow: scroll;
}

#logContainer {
    overflow: scroll;
    font-family: 'Roboto', Helvetica, sans-serif;
    font-weight: 300;
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
}

.log-output {
    font-size: 15px;
    color: black;
    font-family: 'Inconsolata', monospace;
}

.log-output-prefix-OK {
    font-size: 13px;
    color: #2196F3;
    font-family: 'Inconsolata', monospace;
    font-weight: bold;
}

.log-output-prefix-INFO {
    font-size: 13px;
    color: #3949AB;
    font-family: 'Inconsolata', monospace;
    font-weight: bold;
}

.log-output-prefix-WARN {
    font-size: 13px;
    color: #F44336;
    font-family: 'Inconsolata', monospace;
    font-weight: bold;
}


/*Reference https://www.tensorflow.org*/

body {
    font-family: 'Roboto', Helvetica, sans-serif;
    font-weight: 300;
    color: #000
}

section.features .feature-grid {
    display: table;
    border-collapse: collapse
}

section.features .feature-grid .table-row {
    display: table-row
}

@media screen and (min-width: 960px) {
    section.features .feature-grid .table-row:nth-child(1) .feature:nth-of-type(1) {
        border-right: 1px solid #eceff1
    }
}

@media screen and (min-width: 960px) {
    section.features .feature-grid .table-row:nth-child(1) .feature:nth-of-type(2) {
        border-right: 1px solid #eceff1
    }
}

@media screen and (min-width: 960px) {
    section.features .feature-grid .table-row:nth-child(2) .feature:nth-of-type(1) {
        border-right: 1px solid #eceff1
    }
}

@media screen and (min-width: 960px) {
    section.features .feature-grid .table-row:nth-child(2) .feature:nth-of-type(2) {
        border-right: 1px solid #eceff1
    }
}

section.features .feature-grid .feature {
    padding: 10px 5px;
    text-align: center;
    vertical-align: top
}

@media screen and (min-width: 960px) {
    section.features .feature-grid .feature {
        display: table-cell;
        width: 33.33%;
        padding: 45px
    }
}

section.features .feature-grid .feature h3 {
    margin-bottom: 5px
}

section.features .feature-grid .feature p {
    font-size: .875rem;
    line-height: 1.5rem;
    color: #000
}

.inner {
    max-width: 1170px;
    margin-left: 0px;
    margin-right: auto;
    padding: 0 5px
}

.inner::after {
    clear: both;
    content: "";
    display: table
}

@media screen and (min-width: 768px) {
    .inner {
        padding: 0 10px
    }
}

section {
    padding: 10px 0
}

@media screen and (min-width: 768px) {
    section {
        padding: 10px 0
    }
}

@media screen and (min-width: 768px) {
    .block.half {
        margin-top: 0
    }
}

@media screen and (min-width: 768px) {
    .block-copy.half {
        float: left;
        display: block;
        margin-right: 4.34783%;
        width: 47.82609%
    }
    .block-copy.half:last-child {
        margin-right: 0
    }
}

.block-copy p {
    margin-top: 15px;
    line-height: 1.75rem;
    color: #000
}

@media screen and (min-width: 768px) {
    section.more-about .inner {
        display: table;
        max-width: 1100px
    }
}

@media screen and (min-width: 768px) {
    section.more-about .inner .block-copy {
        float: left;
        display: block;
        margin-right: 4.34783%;
        width: 47.82609%;
        padding-right: 35px
    }
    section.more-about .inner .block-copy:last-child {
        margin-right: 0
    }
}