body {
    font-family: Lato;
    background: #15172c;
    font-size: 14px;
}

footer {
    background: #212443;
    height: 78px;
    color: #ffffff;
}


.container, .container-fluid {
    padding: 0px 20px 0px 16px;
}


.title .author {
    font-weight: bold;
    height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff;
}

.title .track {
    color: #ced4da;
    height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player .title, .list-item .title {
    margin: 2px;
    height: 50px;
    padding: 2px;
    letter-spacing: 0px;
    color: #ffffff;
    flex-grow: 1;
    flex-shrink: 1;
    max-width: none;
}

.play-button {
    background-image: url("../img/ooofm/play.png");
    background-position: top center;
    background-repeat: no-repeat;
    max-width: 55px;
    min-width: 55px;
    height: 45px;
    margin: 5px;
    cursor: pointer;
}

.play-button.loading {
    background-image: url("../img/ooofm/load.png");
}

.play-button.playing {
    background-image: url("../img/ooofm/pause.png");
}

.prev-button, .next-button, .download-button, .goodok-button, .purchase {
    max-width: 45px;
    min-width: 45px;
    height: 45px;
    margin: 5px;
    cursor: pointer;
}

.purchase {
    margin: 0px;
}

.prev-button.active {
    background-image: url("../img/ooofm/fv.png");
    background-position: top center;
    background-repeat: no-repeat;
}

.next-button.active {
    background-image: url("../img/ooofm/ff.png");
    background-position: top center;
    background-repeat: no-repeat;
}

.download-button {
    background-image: url("../img/ooofm/download.png");
    background-position: top center;
    background-repeat: no-repeat;
}

.goodok-button > .purchase {
    background-image: url("../img/goodok.svg");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 75%;
}

.list-item {
    height: 64px;
}

.header-logo {
    height: 64px;
    background: url("../img/ooofm/ooofm.png") 50% 50% no-repeat;
    width: 100%;
}

.progressbar {
    background: transparent;
}

.progressbar .progressbar-display {
    background: red;
    width: 0%;
}

.item-progress {
    padding-left: 75px;
}

.item-progress .progressbar {
    background: rgba(118, 118, 255, 0.14);
}


/*NEW*/

.header-logo {
    width: 100px;
    background-position: left;
    flex-shrink: 0.6
}


.searchbar {
    border: 1px solid #757575;
    border-radius: 3px;
}

.searchbar__input {
    background: transparent;
    border: none;
    outline: none;
    color: white;
}

.searchbar__btn {
    background: transparent;
    width: 70px;
    color: silver;
    outline: none;
}

.searchbar__btn:hover {
    color: white;
}

@media (max-width: 768px) {

    .searchbar__btn {
        display: inline-block;
    }

    .searchbar__input {
        width: 100%;
    }

}

.searchbar-result {
    color: white;
}

.categories__btn{
    background: white;
    color: #15172c;
}

.categories__btn:not(.is-active):hover {
    background: white;
    color: #e22e49;
}

.categories__btn.is-active {
    background: #e22e49 !important;
}

.categories__toggler {
    background: #e22e49;
}

.slick-dots button {
    border-color: #e22e49;
}

.slick-dots .slick-active button {
    background: #e22e49;
}


@media(max-width: 768px) {
    .categories {
        display: flex !important;
        flex-direction: row;
        height: 32px !important;
    }
    .categories__btn {
        height: 32px;
    }
    .categories__btn.is-active {
        display: flex;
    }

    .categories__toggler {
        display: none;
    }

}
/* categories */



.show-more {
    color: white;
    border-color: white;
    border-width: 1px;
    background: #212443;
}

.footer-banner {
    background: white;
    color: black;
}


.footer-banner__row {
    flex-direction: row;
    align-items: center;
}

.footer-banner__col img {
    max-width: 100%;
}


.footer-banner__col._img {
    margin-right: 20px;
    max-width: 50%;
    flex-shrink: 0;
}

.footer-banner__col._text {
    font-size: 16px;
}

.footer-banner__nav-title {
    margin-top: 32px;
    margin-bottom: 8px;
    font-size: 18px;
    color: #e22e49;
    text-align: center;
    font-weight: 500;
}

.footer-banner__nav-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
}

.footer-banner__nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 50px;
    background: #212443;
    margin: 5px;
    width: calc(33.33333% - 10px);
    color: white;
    font-size: 16px;
    cursor: pointer;
}

.footer-banner__nav-item:hover {
    background: #15172c;
}

.footer-banner__nav-item.is-active {
    background: #e22e49;
}

.footer-banner__links {
    background: #15172c;
    color: #e22e49;
    margin: 20px -16px -25px;
    padding: 16px;
    font-size: 16px;
}

.footer-banner__link-row {
    display: flex;
    justify-content: space-between;
}

.footer-banner__links a {
    color: #e22e49 !important;
}

.copyright {
    color: white;
    text-align: center;
    margin-top: 20px;
}

@media(max-width: 768px) {

    .footer-banner__col._text {
        font-size: 13px;
    }
    .footer-banner__links {
        font-size: 13px
    }
    .footer-banner__col._img {
        margin-right: 16px;
    }

    .footer-banner__nav-item {
        font-size: 12px;
    }
}

@media(max-width: 400px) {

    .footer-banner__col._text {
        font-size: 12px;
        line-height: 1.2;
    }
}


@media(max-width: 330px) {

    .footer-banner__col._img {
        margin-right: 8px;
        margin-left: -11px;
    }
}




/*PLAYER*/

.jp-progress {
    position: absolute;
    width: 100%;
    left: 0;
    top: -5px;
}

.jp-seek-bar, .jp-volume-bar {
    border-color: #e22e49;
    border-radius: 0;
    border: none;
    background: rgba(226, 46, 73, 0.28);
}

.jp-volume-bar-value, .jp-play-bar {
    background: #e22e49;
}

.jp-volume-bar-value:after, .jp-play-bar:after {
    background: #e22e49;
}

.jp-play-bar:after {
    display: none;
}

.jp-play {
    background-image: url(../img/ooofm/play.png);
}

.jp-state-playing .jp-play{
    background-image: url("../img/ooofm/pause.png");

}

.jp-volume-icon {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.717 27.717' width='512' height='512'%3e%3cpath d='M4.637 8.725H0v10.33h4.637l8.766 6.502s1.611 1.346 1.611-.045V2.066c0-1.092-1.418-.025-1.418-.025L4.637 8.725zM20.006 6.709a1.18 1.18 0 00-1.668 0 1.176 1.176 0 000 1.666 7.734 7.734 0 012.273 5.484 7.752 7.752 0 01-2.273 5.495 1.184 1.184 0 000 1.672c.23.23.531.344.836.344.301 0 .602-.113.832-.344a10.107 10.107 0 002.963-7.167 10.075 10.075 0 00-2.963-7.15z' data-original='%23000000' class='active-path' data-old_color='%23000000' fill='%23FFFFFF'/%3e%3cpath d='M23.207 2.994a1.185 1.185 0 00-1.676 0 1.19 1.19 0 000 1.671 12.97 12.97 0 013.824 9.206 13.038 13.038 0 01-3.824 9.25 1.187 1.187 0 000 1.67 1.193 1.193 0 001.676 0 15.434 15.434 0 004.51-10.92c0-3.934-1.514-7.875-4.51-10.877z' data-original='%23000000' class='active-path' data-old_color='%23FFFFFF' fill='%23FFFFFF'/%3e%3c/svg%3e");
}


.jp-details {
    width: 40%;
    display: flex;
    align-items: center;
}

.jp-controls-holder {
    display: flex;
    width: 20%;
    flex-grow: 0;
    margin-left: auto;
    margin-right: 140px;
}


.jp-volume-bar-value:after, .jp-play-bar:after {
    display: none;
}

.jp-stop {
    font-size: 0;
    padding: 0;
    height: 26px;
    width: 26px;
    border: none;
    border-radius: 50%;
    background: #e22e49;
    position: relative;
    outline: none !important;
    cursor: pointer;
}

.jp-stop:before {
    content: "";
    width: 10px;
    height: 10px;
    background: white;
    position: absolute;
    border-radius: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.jp-stop:after {
    content: "";
    width: 36px;
    height: 36px;
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #242e53;
    border-radius: 50%;
}

button.jp-repeat {
    font-size: 0;
    padding: 0;
    height: 26px;
    width: 26px;
    border: none;
    border-radius: 50%;
    background: #e22e49;
    position: relative;
    outline: none;
    cursor: pointer;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .6;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3e%3cpath d='M69.816 256H0l93.096 93.096L186.2 256h-69.816c.224-77.016 62.6-139.4 139.616-139.632 22.672.432 44.952 6 65.16 16.296l34.896-34.896A207.988 207.988 0 00256 69.832C153.296 70.112 70.104 153.296 69.816 256zm325.8 0c-.224 77.016-62.6 139.4-139.616 139.632-22.672-.432-44.952-6-65.16-16.296l-34.896 34.896A207.988 207.988 0 00256 442.168c102.696-.296 185.88-83.472 186.184-186.168H512l-93.096-93.096L325.8 256h69.816z' data-original='%23161C27' class='active-path' data-old_color='%23161C27' fill='%23FFF'/%3e%3c/svg%3e");
}

.jp-repeat:after {
    content: "";
    width: 36px;
    height: 36px;
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #242e53;
    border-radius: 50%;
}


.jp-state-looped .jp-repeat {
    opacity: 1;
}

.jp-plh {
    opacity: .6;
    font-style: italic;
}

@media(max-width: 768px) {
    .jp-interface {
        flex-direction: column-reverse;
        align-items: center;
        padding-top: 4px;
    }

    .jp-controls-holder {
        margin: 0;
        width: auto;
    }

    .jp-details {
        width: 100%;
    }

    .jp-play {
        background-position: center;
    }
    .jp-title {
        margin: auto;
        max-width: 100%;
    }

}

/*PLAYER*/


.song{
    color: white;
}

.song__item {
    height: auto;
}
.song__title {
    color: white;
}
.song__text {
    color: white;
}

.song__btn {
    max-width: 100% !important;
    width: auto;
    border: 2px solid white;
    align-items: center;
    padding: 0 10px;
    background-position: calc(100% - 8px) center;
    background-size: 30px;
    color: white;
    font-size: 18px;
    text-decoration: none !important;
}
.song__btn .purchase {
    background: none;
}

/*loader*/
.loader:after,
.spinner:after {
    background: #15172c;
}

.loader:before,
.spinner:before {
    color: #fff;
}
.song__other {
    color: white !important;
}

.about {
    background: white;
    padding: 16px;
}

.is-about .footer-banner__info {
    display: none;
}

.is-about .footer-banner {
    background: transparent;
    padding-top: 0;
}


.about__title {
    font-size: 16px;
    color: #e22e49;
}

.share {
    margin-top: 20px;
}

.share__title {
    margin-bottom: 10px;
    font-size: 16px;
    color: #e22e49;
}


@media(max-width: 768px) {
    .about {
        margin: 0 -16px;
    }
}