body {
    background-color: rgb(31, 31, 31);
}

.main {
    background-color: rgb(49, 49, 49);
    height: 110vh;
}

.centerall {
    display: flex;
    justify-content: center;
    align-items: center;
}

.player {
    border-top: 3px red solid;
    height: 70px;
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    width: 100%;
    bottom: 0px;
    margin: 0px;
    padding: 0px;
}

.player-offcanvas {
    right: 0;
    left: 0;
    height: 45vh;
    max-height: 100%;
    border-top: 1px solid rgba(0, 0, 0, .2);
    transform: translateY(100%);
    bottom: 70px;
}

.card-channel {
    height: 222px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px red solid; */
}

.card-channel:hover {
    background-color: rgba(0, 0, 0, 0.45);
}

.card-content {
    height: 100%;
    width: 100%;
    background-size: cover !important;
    background-position: center !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.poster {
    background-size: cover !important;
    background-position: center !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.poster:hover {
    /* background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../images/mock.jpg'); */
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}