@charset "UTF-8";
@import "libs/_lib";

.aside-main-col {
    flex: 0 0 100%;
    display: none;
    @media(min-width: 768px) {
        flex-basis: 33.333334%;
        display: block;
    }
    @media(min-width: 1039px) {
        flex-basis: 25%;
    }
    @media(min-width: 1469px) {
        flex-basis: 20%;

    }
    & + .main-col {
        flex: 1 0 100%;
        @media(min-width: 768px) {
            flex-basis: 66.666667%;
        }
        @media(min-width: 1039px) {
            flex-basis: 75%;
        }
        @media(min-width: 1469px) {
            flex-basis: 80%;

        }

    }

}

.filter-box {
    display: block;
    margin-bottom: 2 * $col-padding;

}
.filter-header {
    line-height: 33px;
    padding: 0 15px;
    text-transform: uppercase;
    background-color: #1e1e1e;
    .sub-label {
        color: #474747;
        text-transform: none;

    }

}
.filter-content {
    background-color: #161616;
    padding: 10px 15px;
    .channels-list {
        height: 425px;
        ul {
            max-width: 100%;

        }

    }

}

.filter-type {
    display: flex;
    flex-flow: row wrap;

}
.filter-item {
    flex: 1 0 50%;
    a {
        display: inline-block;
        padding: 0 10px;
        max-width: 80px;
        width: 100%;
        &.active,
        &:hover {
            color: #ffffff;
            background-color: $theme-color-1;

        }

    }

}

#range_length_filter {
    display: none;

}

.filter-trigger-col {
    text-align: right;
    margin-bottom: 2 * $col-padding;

}
.show-filters {
    .-on {
        display: none;

    }
    .-off {
        display: inline-block;

    }
    &.active {
        .-on {
            display: inline-block;

        }
        .-off {
            display: none;

        }

    }

}