:root {
    --orange: #ea6016;
}

.blog-post .blog-thumb {
    text-align: center;
}
.blog-post .title {
    font-size: 20px;
    text-align: center;
}
.chapter-content {
    line-height: 1.5em;
    font-size: 18px;
}
.comic-description {
    font-size: 18px;
    line-height: 1.5em;
}

.comic-background-header {
    filter: blur(8px);
    -webkit-filter: blur(8px);
    height: 300px;
}

.comic-thumb-wrap{
    position: absolute;
    top: 15px;
    left: 15px;
}

.rhap_container {
    background-color: transparent!important;
}
.rhap_container .rhap_progress-indicator,
.rhap_container .rhap_volume-indicator{
    background: var(--orange);
}
.rhap_container .rhap_main-controls-button,
.rhap_container .rhap_volume-button{
    color: var(--orange);
}
.rhap_container .rhap_progress-filled {
    background-color: var(--orange);
}
.rhap_container .rhap_time{
    color: #8195a6;
}
.rhap_container .rhap_header{
    text-overflow: ellipsis;

    /* Needed to make it work */
    overflow: hidden;
    white-space: nowrap;
}
.chapter-playing-modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #0F1C2F;
    overflow: auto;
}

.chapter-playing-modal.compact-mode {
    top: auto;
    bottom: 57px;
    z-index: 1;
}
.chapter-playing-modal.compact-mode #appCapsule{
    padding: 10px 0;
}
.chapter-playing-modal.compact-mode #appCapsule .rhap_container {
    border: 0;
    box-shadow: none;
    padding: 0;
}
.bg-blue {
    background: #50D0ECFF;
}
.bg-transparent {
    background: transparent;
}