#device-selector
{
    max-height: 150px;
    overflow: auto;
    font-size: 16px;
}

.io-row
{
    margin-top: 9px;
    padding: 3px 0 9px 3px;
}

.io-row:nth-child(odd)
{
    background-color: #F0F0F0;
}

.name-span
{
    padding-top: 5px;
    padding-right: 10px;
    text-align: right;
}

.state-indicator-holder
{
    padding-top: 5px;
}

.state-indicator
{
    padding: 5px;
    min-width: 20px;
    font-size: 10px;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
}

.state-indicator.active
{
    background-color: #5BB75B;
    color: white;
}

.state-indicator.active:before
{
    content: 'high ';
}

.state-indicator.inactive
{
    color: black;
    background-color: #C0C0C0;
}

.state-indicator.inactive:before
{
    content: 'low ';
}

.switch-holder
{
    text-align: center;
    padding-top: 3px;
}

@media screen and (max-width: 800px) {
    .non-responsive-row .span2
    {
        width: 14%;
        float: left;
    }

    .non-responsive-row .span3
    {
        width: 24%;
        float: left;
    }

    .non-responsive-row .span7
    {
        width: 37%;
        float: left;
    }
}

@media screen and (min-width: 950px) {
    .non-responsive-row .span2
    {
        width: 15%;
        float: left;
    }

    .non-responsive-row .span3
    {
        width: 15%;
        float: left;
    }
}