@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);

.play {
    /* display: block; */
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 11px solid #2196F3;
    /* margin: 100px auto 50px auto; */
    position: relative;
    z-index: 1;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    left: 22px;
}

.play:before {
    content: '';
    position: absolute;
    top: -18px;
    left: -27px;
    bottom: -18px;
    right: -9px;
    border-radius: 50%;
    border: 4px solid #2196F3;
    z-index: 2;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
}

.play:after {
    content: '';
    opacity: 0;
    transition: opacity 0.6s;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
}

.play:hover:before, .play:focus:before {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
}

.play.active {
    border-color: transparent;
}

.play.active:after {
    content: '';
    opacity: 1;
    width: 15px;
    height: 17px;
    background: #2196F3;
    position: absolute;
    right: 1px;
    top: -8px;
    border-left: 5px solid #2196F3;
    box-shadow: inset 5px 0 0 0 #f9f9f9;
}

/* detail station */
.micro-radio {
    background-position-y: -234px;
    background-size: cover;
    background-image: url('../microphone-radio.jpg')
}

/* Lecteur */
.list-stations {
    padding: 0;
    text-align: justify
}

.to-flex {
    display: flex
}

body {
    padding-bottom: 45px;
    background: #00f
}

.hm-blue {
    background-color: #00f
}

.list-stations div img, .station-overlay-radius {
    width: 100%;
    border-radius: 10px
}

ul {
    list-style-type: none
}

.list-stations li {
    float: left;
    width: 10%;
    padding: .5%;
    transition: all .2s ease-in-out
}

@media screen and (max-width: 1024px) {
    .list-stations li {
        width: 11%
    }
}

@media screen and (max-width: 768px) {
    .list-stations li {
        width: 20%
    }
}

@media screen and (max-width: 600px) {
    .list-stations li {
        width: 25%
    }
}

@media screen and (max-width: 375px) {
    .list-stations li {
        width: 33%
    }
}

@media screen and (max-width: 320px) {
    .list-stations li {
        width: 25%
    }
}

.search-from-width {
    width: 50%
}

.input-search-width, .search-div-width {
    width: 100%
}

.mouse-pointer {
    cursor: pointer
}

.align {
    display: flex;
    align-items: center;
    width: 100%
}

.align-btn {
    display: flex;
    align-items: center
}

.volume-container {
    width: auto;
    margin-left: auto;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
    padding: 0 10px
}

.volume-container input {
    margin-right: 10px
}

.player-station-name {
    margin-left: 40px;
    white-space: nowrap;
    padding: 0 10px
}

.stream-img img {
    height: 39px;
    border: 2px solid #4285f4;
    margin: 0 10px
}

.no-padding {
    padding: 0
}

.padding-left {
    padding-left: 10px
}

.btn-rounded {
    border-radius: 150px
}

/* logo */
.logo-header {
    width: 125px;
}

/* general css */
html {
    height: 100%
}

.hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0, #e3eeff 99%, #e3eeff 100%)
}

.navbar .dropdown-menu a:hover {
    color: #616161 !important
}

.darken-grey-text {
    color: #2e2e2e
}

.content-margen-top {
    padding-top: 15px;
}

/* station details */
.station-details {
    margin-bottom: 10px;
}