body {
    font-family: "Helvetica", "Arial", sans-serif;
}

/* Contains all of our content (except footer) */
.overall {
    max-width: 40em;
    margin-left: auto;
    margin-right: auto;
}

/* Allow click events on iOS */
.clickable {
    cursor: point;
}

/* Content above the list of channels - holds title and filter control */
.top {
    width: 100%;
    background-color: #3D9970;
    /*border: 3px solid white;*/
}

.top h1 {
    font-size: 16pt;
    padding-top: 0.5em;
    text-align: center;
}

.top input {
    margin-left: 1em;
    margin-bottom: 1em;
}

.online-filter-label {
    font-size: 9pt;
}

.control-icon {
    float: right;
    margin-right: 0.5em;
}

/* Content below the list of channels - holds additional controls */
#bottom-box {
    width: 100%;
    background-color: #3D9970;
    display: none; /* Toggled on/off in javascript */
    font-size: 9pt;
}

.bottom-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
}

.bottom-label {
    width: 13em;
    margin-left: 1em;
    margin-top: 1em;
}

.bottom-row input {
    margin-left: 1em;
    margin-bottom: 1em;
    margin-top: 1em;
    width: 16em;
}

/* The list of channels */
.list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.no-channels-message-box {
    width: 100%;
    text-align: center;
    padding-top: 1em;
    height: 3em;
    background-color: #3D9970;
}

/* Style for each channel */
.channel {
    min-width: 180px;
    flex: 1 0 180px; /* we would just use flex:1, but this fails on safari 9 due to this bug https://bugs.webkit.org/show_bug.cgi?id=136041 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.channel.dummy {
    height: 0px;
    visibility: hidden;
}

.channel.offline {
    background-color: lightgrey;
    color: slategrey;
}

.channel.online {
    background-color: darkseagreen;
}

.channel.error {
    background-color: lightgrey;
    color: darkred;
    font-size: 8pt;
}

/* Components of each channel */
.channel-top {
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.channel-top-left {
    height: 100%;
    width: 4em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.channel-logo {
    height: 3em;
    width: 3em;
}

.channel-top-right {
    padding-left: 1em;
}

.channel-link {
    text-decoration: none;
}

.channel-info {
    height: 250px;
    width: 100%;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.channel-info.offline {
    justify-content: flex-start;
}

.channel-info-item {
    width: 95%;
    height: 3em;
}

.channel-info-item h4 {
    font-size: 8pt;
    margin: 0px 0px 0.5em 0px;
    font-weight: normal;
}

.channel-info-item p {
    font-size: 10pt;
    margin: 0px;
    text-align: center;
}

.remove-box {
    width: 95%;
    height: 2em;
    font-size: 12pt;
}

.remove-icon {
    float: right;
    margin-top: 0.7em;
    margin-right: 0.3em;
}

.remove-label {
    float: right;
    margin-right: 0.5em;
    margin-top: 1em;
    font-size: 9pt;
}

.footer {
    padding-top: 10em;
    font-size: 8pt;
    text-align: center;
}