/** DIRECT EMBEDDED DEMO **/
.pawtunes {
    --accent-color: #62a8ea;
    --alt-color:    #b2b0b0ff;
    --paw-height:   42rem;
    position:       relative;
    /*background:     radial-gradient(circle, #fafafa, #f0f0f0);*/
}

.pawtunes .preloader {
    font-size:       .8rem;
    position:        absolute;
    z-index:         999;
    top:             0;
    right:           0;
    bottom:          0;
    left:            0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      all 500ms cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align:      center;
    color:           #2f2f2f;
    background:      #fff;
}

.pawtunes .preloader.hidden {
    visibility: hidden;
    opacity:    0;
}

.pawtunes .pawtunes .preloader .text_area {
    position:   absolute;
    top:        40%;
    right:      0;
    left:       0;
    display:    block;
    height:     3.2rem;
    margin-top: -1.5rem;
}

.pawtunes .preloader-spinner {
    display:   inline-block;
    width:     50px;
    height:    50px;
    animation: rotate 2s infinite;
}

.pawtunes .preloader-spinner::after,
.pawtunes .preloader-spinner::before {
    display:       block;
    width:         20px;
    height:        20px;
    content:       "";
    border-radius: 50%;
}

.pawtunes .preloader-spinner::before {
    margin-bottom:    10px;
    animation:        ball1 1s infinite;
    background-color: var(--alt-color);
    box-shadow:       30px 0 0 var(--accent-color);
}

.pawtunes .preloader-spinner::after {
    animation:        ball2 1s infinite;
    background-color: var(--accent-color);
    box-shadow:       30px 0 0 var(--alt-color);
}

@keyframes ball1 {
    0% {
        box-shadow: 30px 0 0 var(--accent-color);
    }
    50% {
        box-shadow:    0 0 0 var(--accent-color);
        margin-bottom: 0;
        transform:     translate(15px, 15px);
    }
    100% {
        box-shadow:    30px 0 0 var(--accent-color);
        margin-bottom: 10px;
    }
}

@keyframes ball2 {
    0% {
        box-shadow: 30px 0 0 var(--alt-color);
    }
    50% {
        box-shadow: 0 0 0 var(--alt-color);
        margin-top: -20px;
        transform:  translate(15px, 15px);
    }
    100% {
        box-shadow: 30px 0 0 var(--alt-color);
        margin-top: 0;
    }
}

.pawtunes a {
    text-decoration: none;
    color:           inherit;
    outline-width:   0;
    outline-style:   none
}

.pawtunes b, .pawtunes strong {
    font-weight: 400
}

.pawtunes .pointer {
    cursor: pointer
}

.pawtunes h1, .pawtunes h2, .pawtunes h3, .pawtunes h4, .pawtunes h5, .pawtunes h6 {
    font-weight: 400
}

.pawtunes h3 {
    font-size: 1.5rem
}

.pawtunes .text-center {
    text-align: center
}

.pawtunes .mb-2 {
    margin-bottom: 1rem
}

.pawtunes .mt-3 {
    margin-top: 1.5rem
}

.pawtunes .mb-4 {
    margin-bottom: 2rem
}

.pawtunes .cursor-pointer {
    cursor: pointer
}

.pawtunes .icon-fill {
    fill: #919191
}

.pawtunes .btn {
    font-size:           .8rem;
    font-weight:         400;
    line-height:         1.42857143;
    display:             -webkit-inline-box;
    display:             -ms-inline-flexbox;
    display:             inline-flex;
    -webkit-box-align:   center;
    -ms-flex-align:      center;
    align-items:         center;
    padding:             .5rem 1rem;
    cursor:              pointer;
    -webkit-user-select: none;
    -moz-user-select:    none;
    -ms-user-select:     none;
    user-select:         none;
    -webkit-transition:  background-color 250ms ease-out;
    transition:          background-color 250ms ease-out;
    text-align:          center;
    vertical-align:      middle;
    white-space:         nowrap;
    text-decoration:     none;
    color:               #fff;
    border:              0;
    border-radius:       .25rem;
    background-image:    none;
    -webkit-box-shadow:  inset 0 -0.1rem 0 rgba(0, 0, 0, .1);
    box-shadow:          inset 0 -0.1rem 0 rgba(0, 0, 0, .1)
}

.pawtunes .btn:hover {
    -webkit-transition: background-color 0ms ease;
    transition:         background-color 0ms ease
}

.pawtunes .btn-danger {
    background-color: #f44336
}

.pawtunes .btn-danger:hover {
    background-color: #ef5350
}

.pawtunes .btn-danger:focus, .pawtunes .btn-danger:active, .pawtunes .btn-danger.active, .pawtunes .open > .dropdown-toggle.btn-danger {
    background-color: #e53935
}

.pawtunes .btn-danger:active, .pawtunes .btn-danger.active, .pawtunes .open > .dropdown-toggle.btn-danger {
    background-image: none
}

.pawtunes .css-hint {
    position: relative
}

.pawtunes .css-hint:before {
    position:                    absolute;
    z-index:                     14;
    top:                         -0.2rem;
    left:                        50%;
    width:                       0;
    height:                      0;
    content:                     " ";
    pointer-events:              none;
    border:                      .4rem solid rgba(0, 0, 0, 0);
    border-top-color:            rgba(0, 0, 0, .85);
    -webkit-backface-visibility: hidden;
    backface-visibility:         hidden
}

.pawtunes .css-hint:after {
    font-size:                   .8rem;
    position:                    absolute;
    z-index:                     15;
    top:                         -2.1rem;
    left:                        50%;
    display:                     block;
    width:                       -webkit-max-content;
    width:                       -moz-max-content;
    width:                       max-content;
    max-width:                   22rem;
    margin-bottom:               -0.4rem;
    padding:                     .4rem .5rem;
    content:                     attr(data-title);
    color:                       #fff;
    border-radius:               .2rem;
    background:                  #111;
    background:                  rgba(0, 0, 0, .85);
    -webkit-backface-visibility: hidden;
    backface-visibility:         hidden
}

.pawtunes .css-hint:after, .pawtunes .css-hint:before {
    visibility:         hidden;
    -webkit-transition: all 350ms cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:         all 350ms cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-transform:  translateX(-50%);
    transform:          translateX(-50%);
    pointer-events:     none;
    opacity:            0
}

.pawtunes .css-hint:hover:before, .pawtunes .css-hint:hover:after {
    visibility:        visible;
    margin-bottom:     0;
    -webkit-transform: translateX(-50%);
    transform:         translateX(-50%);
    opacity:           1
}

.pawtunes .dropdown {
    position: relative
}

.pawtunes .dropdown .dropdown-menu {
    font-size:                   .8rem;
    position:                    absolute;
    z-index:                     99;
    top:                         75%;
    right:                       0;
    visibility:                  hidden;
    overflow-x:                  hidden;
    overflow-y:                  auto;
    min-width:                   12.5rem;
    max-height:                  13.2rem;
    margin:                      0;
    padding:                     0;
    list-style:                  none;
    -webkit-transition:          top 250ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 350ms cubic-bezier(0.25, 0.8, 0.25, 1), visibility 350ms cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:                  top 250ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 350ms cubic-bezier(0.25, 0.8, 0.25, 1), visibility 350ms cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-transform:           translate3d(0, 0, 0);
    transform:                   translate3d(0, 0, 0);
    opacity:                     0;
    border-bottom-right-radius:  .2rem;
    border-bottom-left-radius:   .2rem;
    background:                  #7db7ee;
    -webkit-box-shadow:          0 .2rem .35rem rgba(0, 0, 0, .15);
    box-shadow:                  0 .2rem .35rem rgba(0, 0, 0, .15);
    -webkit-backface-visibility: hidden;
    backface-visibility:         hidden
}

.pawtunes .dropdown .dropdown-menu li {
    display: block;
    margin:  0;
    padding: 0
}

.pawtunes .dropdown .dropdown-menu li > a {
    line-height:        normal;
    display:            block;
    width:              auto;
    height:             auto;
    padding:            .625rem 1rem;
    -webkit-transition: none;
    transition:         none;
    text-align:         left;
    white-space:        nowrap;
    text-decoration:    none;
    color:              #e9f3fc
}

.pawtunes .dropdown .dropdown-menu li > a:hover {
    background: rgba(255, 255, 255, .15)
}

.pawtunes .dropdown .dropdown-menu li > a.active {
    font-weight: 400;
    color:       #fff
}

.pawtunes .dropdown.active > a {
    background: #7db7ee
}

.pawtunes .dropdown.active .dropdown-menu {
    top:        100%;
    visibility: visible;
    opacity:    1
}

.pawtunes .dropdown.open-up .dropdown-menu {
    top:                auto;
    bottom:             75%;
    -webkit-transition: bottom 250ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 350ms cubic-bezier(0.25, 0.8, 0.25, 1), visibility 350ms cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:         bottom 250ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 350ms cubic-bezier(0.25, 0.8, 0.25, 1), visibility 350ms cubic-bezier(0.25, 0.8, 0.25, 1)
}

.pawtunes .dropdown.open-up.active .dropdown-menu {
    top:    auto;
    bottom: 100%
}

.pawtunes .preloader.loadComplete {
    visibility: hidden;
    opacity:    0
}

.pawtunes .player-message {
    font-size:          .8rem;
    position:           fixed;
    z-index:            99;
    right:              0;
    bottom:             15%;
    left:               0;
    -webkit-transition: opacity 250ms ease, visibility 250ms ease;
    transition:         opacity 250ms ease, visibility 250ms ease;
    text-align:         center
}

.pawtunes .player-message.hidden {
    visibility: hidden;
    opacity:    0
}

.pawtunes .player-message .text {
    display:          inline-block;
    visibility:       visible;
    padding:          .5rem .625rem;
    text-align:       center;
    pointer-events:   none;
    opacity:          .85;
    color:            #fff;
    border-radius:    .25rem;
    background-color: rgba(0, 0, 0, .85)
}

.pawtunes #analyzer {
    position:           absolute;
    z-index:            0;
    top:                0;
    right:              0;
    bottom:             0;
    left:               0;
    display:            block;
    -webkit-transition: all 500ms cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:         all 500ms cubic-bezier(0.25, 0.8, 0.25, 1);
    text-align:         center
}

.pawtunes [data-toggle=dropdown] #channels-icon {
    -webkit-transition: fill 250ms ease;
    transition:         fill 250ms ease;
    fill:               #525252
}

.pawtunes [data-toggle=dropdown]:hover #channels-icon {
    -webkit-transition: none;
    transition:         none;
    fill:               #62a8ea
}

.pawtunes .main-container {
    position:              relative;
    z-index:               10;
    display:               -webkit-box;
    display:               -ms-flexbox;
    display:               flex;
    -webkit-box-align:     stretch;
    -ms-flex-align:        stretch;
    align-items:           stretch;
    -webkit-box-orient:    vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction:    column;
    flex-direction:        column;
    -webkit-box-pack:      justify;
    -ms-flex-pack:         justify;
    justify-content:       space-between;
    height:                var(--paw-height);
}

.pawtunes .container {
    z-index:  9;
    display:  block;
    overflow: hidden;
    height:   100%;
}

.pawtunes .container .container-inner {
    overflow:           hidden;
    -webkit-transition: -webkit-transform 600ms cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:         -webkit-transform 600ms cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:         transform 600ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.pawtunes .container .page {
    font-size:             .8rem;
    display:               -webkit-box;
    display:               -ms-flexbox;
    display:               flex;
    overflow-x:            hidden;
    overflow-y:            auto;
    -webkit-box-align:     center;
    -ms-flex-align:        center;
    align-items:           center;
    -webkit-box-orient:    vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction:    column;
    flex-direction:        column;
    -webkit-box-flex:      1;
    -ms-flex-positive:     1;
    flex-grow:             1;
    padding:               1rem;
    height:                calc(var(--paw-height) - 6.3rem);
    width:                 100%;
}

.pawtunes .container .page::before {
    margin:  auto;
    content: ""
}

.pawtunes .container .page::after {
    margin:  auto;
    content: ""
}

.pawtunes .container .page::-webkit-scrollbar {
    width:  .5rem;
    height: .5rem
}

.pawtunes .container .page::-webkit-scrollbar-track {
    border-radius: .1rem;
    background:    rgba(0, 0, 0, 0)
}

.pawtunes .container .page::-webkit-scrollbar-thumb {
    border-radius:    .1rem;
    background-color: #bcdaf6
}

.pawtunes .container .page::-webkit-scrollbar-thumb:hover {
    background: #d2e6f9
}

.pawtunes .container .page::-webkit-scrollbar-thumb:window-inactive {
    background: #a5cdf3
}

.pawtunes .artwork-image {
    position:      relative;
    display:       inline-block;
    margin-bottom: 3rem;
    opacity:       .9
}

.pawtunes .artwork-image .background-blur {
    position:          absolute;
    z-index:           5;
    top:               -5%;
    left:              50%;
    width:             16rem;
    height:            16rem;
    -webkit-transform: translateX(-50%);
    transform:         translateX(-50%);
    opacity:           .75;
    -webkit-filter:    blur(2rem);
    filter:            blur(2rem)
}

.pawtunes .artwork-image .background-blur img {
    display: block;
    width:   100%;
    height:  auto
}

.pawtunes .artwork-image .artwork-img {
    position:           relative;
    z-index:            10;
    overflow:           hidden;
    width:              16rem;
    height:             16rem;
    border:             none;
    border-radius:      .15rem;
    -webkit-box-shadow: .1rem .1rem .35rem rgba(0, 0, 0, .1);
    box-shadow:         .1rem .1rem .35rem rgba(0, 0, 0, .1)
}

.pawtunes .artwork-image .artwork-img img {
    display:            block;
    width:              100%;
    height:             auto;
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:         -webkit-transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:         transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:         transform 1s cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-transform:  scale(1.05);
    transform:          scale(1.05)
}

.pawtunes .artwork-image .artwork-img .search-indicator {
    position:           absolute;
    z-index:            19;
    top:                0;
    right:              0;
    bottom:             0;
    left:               0;
    visibility:         hidden;
    -webkit-transition: opacity 250ms ease, visibility 250ms ease;
    transition:         opacity 250ms ease, visibility 250ms ease;
    opacity:            0;
    background:         rgba(255, 255, 255, .75)
}

.pawtunes .artwork-image .artwork-img .search-indicator .search-icon {
    position:          absolute;
    top:               50%;
    left:              50%;
    width:             6.4rem;
    height:            6.4rem;
    -webkit-transform: translate(-50%, -50%);
    transform:         translate(-50%, -50%)
}

.pawtunes .artwork-image .artwork-img:hover img {
    -webkit-transform: scale(1);
    transform:         scale(1)
}

.pawtunes .artwork-image .artwork-img:hover.cursor-pointer .search-indicator {
    visibility:               visible;
    -webkit-transition-delay: 750ms;
    transition-delay:         750ms;
    opacity:                  .85
}

.pawtunes .artwork-image .artwork-preloader {
    position:          absolute;
    z-index:           12;
    right:             0;
    bottom:            0;
    left:              0;
    height:            .2rem;
    -webkit-animation: preloader-background linear 3s infinite;
    animation:         preloader-background linear 3s infinite;
    background-color:  #159756
}

.pawtunes .artwork-image .artwork-preloader:after, .pawtunes .artwork-image .artwork-preloader:before {
    position:          absolute;
    z-index:           9;
    bottom:            0;
    display:           block;
    width:             0;
    height:            .2rem;
    content:           "";
    -webkit-animation: preloader-front cubic-bezier(0.55, 0, 0.55, 0.2) 3s infinite;
    animation:         preloader-front cubic-bezier(0.55, 0, 0.55, 0.2) 3s infinite;
    background:        #afa
}

.pawtunes .artwork-image .artwork-preloader:after {
    right: 50%
}

.pawtunes .artwork-image .artwork-preloader:before {
    left: 50%
}

.pawtunes .artwork-image .artwork-preloader.hidden {
    visibility: hidden;
    opacity:    0
}

.pawtunes .onair {
    position:   relative;
    z-index:    6;
    display:    block;
    padding:    0 1.2rem;
    text-align: center
}

.pawtunes .onair .current-track {
    font-size:   1.4rem;
    font-weight: 400
}

.pawtunes .onair .current-channel {
    font-size: 1.3rem
}

.pawtunes .page.history::before {
    margin: 0
}

.pawtunes .page.history .history-unavailable {
    font-size: 1.1rem
}

.pawtunes .page.history .history-unavailable.hidden {
    display: none
}

.pawtunes .page.history .artwork-preloader {
    position:                    relative;
    display:                     inline-block;
    width:                       var(--size);
    height:                      var(--size);
    vertical-align:              middle;
    --size:                      24px;
    --color:                     currentColor;
    --animation-timing-function: linear;
    --animation-duration:        2s
}

.pawtunes .page.history .artwork-preloader:before, .pawtunes .page.history .artwork-preloader:after {
    position:          absolute;
    content:           "";
    -webkit-transform: scale(0);
    transform:         scale(0);
    -webkit-animation: var(--animation-timing-function) var(--animation-duration) infinite circle-pulse-1-animation;
    animation:         var(--animation-timing-function) var(--animation-duration) infinite circle-pulse-1-animation;
    opacity:           1;
    border-radius:     50%;
    background-color:  var(--color);
    inset:             0
}

.pawtunes .page.history .artwork-preloader:after {
    -webkit-animation-delay: calc(var(--animation-duration) / 2);
    animation-delay:         calc(var(--animation-duration) / 2)
}

@-webkit-keyframes circle-pulse-1-animation {
    0% {
        opacity:           1;
        -webkit-transform: scale(0);
        transform:         scale(0)
    }
    100% {
        opacity:           0;
        -webkit-transform: scale(1);
        transform:         scale(1)
    }
}

@keyframes circle-pulse-1-animation {
    0% {
        opacity:           1;
        -webkit-transform: scale(0);
        transform:         scale(0)
    }
    100% {
        opacity:           0;
        -webkit-transform: scale(1);
        transform:         scale(1)
    }
}

.pawtunes .page.history .history-content {
    width: 100%;
}

.pawtunes .page.history table {
    width:           100%;
    border-collapse: collapse;
    text-align:      left
}

.pawtunes .page.history table thead tr th {
    font-weight: normal;
    padding:     .1rem .3rem .3rem
}

.pawtunes .page.history table tr th, .pawtunes .page.history table tr td {
    padding: .5rem .625rem
}

.pawtunes .page.history table tr th.history-time-ago, .pawtunes .page.history table tr td.history-time-ago {
    min-width:     4.7rem;
    padding-right: .4rem;
    text-align:    right
}

.pawtunes .page.history table tr th.history-track, .pawtunes .page.history table tr td.history-track {
    min-width: 60%
}

.pawtunes .page.history table tr th.history-artwork, .pawtunes .page.history table tr td.history-artwork {
    width:          1.6rem;
    text-align:     center;
    vertical-align: middle
}

.pawtunes .page.history table tr th.history-artwork img, .pawtunes .page.history table tr td.history-artwork img {
    display:        block;
    overflow:       hidden;
    width:          1.6rem;
    height:         1.6rem;
    vertical-align: middle;
    border-radius:  .15rem
}

.pawtunes .page.history table tr:hover > td {
    background: rgba(0, 0, 0, .05)
}

.pawtunes .page.settings-page::before {
    margin: 0
}

.pawtunes .page.settings-page .hidden {
    display: none
}

.pawtunes .page.settings-page .channel-list, .pawtunes .page.settings-page .streams-list {
    display:              grid;
    margin:               0;
    padding:              0;
    list-style:           none;
    grid-template-columns:repeat(2, 1fr);
    gap:                  .6rem .6rem
}

.pawtunes .page.settings-page .channel-list li, .pawtunes .page.settings-page .streams-list li {
    display: block
}

.pawtunes .page.settings-page .channel-list li a, .pawtunes .page.settings-page .streams-list li a {
    font-size:          .8rem;
    display:            block;
    padding:            .5rem 1rem;
    -webkit-transition: opacity 250ms ease, background 250ms ease, border-color 250ms ease;
    transition:         opacity 250ms ease, background 250ms ease, border-color 250ms ease;
    opacity:            .9;
    color:              #fff;
    border:             .1rem solid #62a8ea;
    border-radius:      .15rem;
    background:         #62a8ea
}

.pawtunes .page.settings-page .channel-list li:hover a, .pawtunes .page.settings-page .streams-list li:hover a {
    -webkit-transition: none;
    transition:         none;
    opacity:            1;
    background:         #78b4ed
}

.pawtunes .page.settings-page .channel-list li.active a, .pawtunes .page.settings-page .streams-list li.active a {
    -webkit-transition: none;
    transition:         none;
    opacity:            1;
    border-color:       #1b76cb;
    background:         #358fe4
}

@media (max-width: 420px) {
    .pawtunes .page.settings-page .channel-list, .pawtunes .page.settings-page .streams-list {
        width:                92vw;
        grid-template-columns:repeat(1, 1fr)
    }
}

.pawtunes .player {
    font-size:         0;
    position:          relative;
    z-index:           10;
    display:           -webkit-box;
    display:           -ms-flexbox;
    display:           flex;
    -webkit-box-align: center;
    -ms-flex-align:    center;
    align-items:       center;
    height:            6.5rem;
    margin-top:        auto;
    padding:           .4rem 0
}

.pawtunes .player .center-container {
    display:           -webkit-box;
    display:           -ms-flexbox;
    display:           flex;
    -webkit-box-align: center;
    -ms-flex-align:    center;
    align-items:       center;
    -webkit-box-flex:  1;
    -ms-flex:          1 1 auto;
    flex:              1 1 auto;
    -webkit-box-pack:  center;
    -ms-flex-pack:     center;
    justify-content:   center;
    margin-top:        .5rem
}

.pawtunes .player .history-btn-alt.history-btn-alt, .pawtunes .player .history-btn.history-btn-alt {
    display: none
}

.pawtunes .player .open-settings svg path, .pawtunes .player .open-history svg path {
    -webkit-transition:       fill 250ms ease, -webkit-transform 500ms ease;
    transition:               fill 250ms ease, -webkit-transform 500ms ease;
    transition:               transform 500ms ease, fill 250ms ease;
    transition:               transform 500ms ease, fill 250ms ease, -webkit-transform 500ms ease;
    -webkit-transform:        rotate(0deg);
    transform:                rotate(0deg);
    -webkit-transform-origin: center center;
    transform-origin:         center center
}

.pawtunes .player .open-settings.open-settings:hover svg path, .pawtunes .player .open-history.open-settings:hover svg path {
    -webkit-transform: rotate(360deg);
    transform:         rotate(360deg);
    fill:              #62a8ea
}

.pawtunes .player .open-settings.open-history, .pawtunes .player .open-history.open-history {
    margin-right: auto
}

.pawtunes .player .open-settings.open-history:hover svg path, .pawtunes .player .open-history.open-history:hover svg path {
    -webkit-transform: rotate(-360deg);
    transform:         rotate(-360deg);
    fill:              #62a8ea
}

.pawtunes .player.no-volume .history-btn-alt {
    display: block
}

.pawtunes .player.no-volume .history-btn {
    display: none
}

.pawtunes .player .others {
    display:               -webkit-box;
    display:               -ms-flexbox;
    display:               flex;
    -webkit-box-align:     center;
    -ms-flex-align:        center;
    align-items:           center;
    -webkit-box-orient:    horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction:    row;
    flex-direction:        row;
    -webkit-box-pack:      end;
    -ms-flex-pack:         end;
    justify-content:       flex-end;
    width:                 calc(50% - 4.5rem);
    padding:               0 1.25rem;
    color:                 #505050;
    justify-items:         flex-end
}

.pawtunes .player .playback {
    width:      4.5rem;
    height:     4.5rem;
    text-align: center
}

.pawtunes .player .playback .play, .pawtunes .player .playback .stop {
    position:           absolute;
    cursor:             pointer;
    -webkit-transition: opacity 400ms ease, visibility 400ms ease, -webkit-transform 150ms ease;
    transition:         opacity 400ms ease, visibility 400ms ease, -webkit-transform 150ms ease;
    transition:         opacity 400ms ease, visibility 400ms ease, transform 150ms ease;
    transition:         opacity 400ms ease, visibility 400ms ease, transform 150ms ease, -webkit-transform 150ms ease
}

.pawtunes .player .playback .play.hidden, .pawtunes .player .playback .play.hidden, .pawtunes .player .playback .stop.hidden, .pawtunes .player .playback .stop.hidden {
    z-index:           -1;
    visibility:        hidden;
    -webkit-transform: scale(0.8);
    transform:         scale(0.8);
    opacity:           0
}

.pawtunes .player .playback .play svg circle, .pawtunes .player .playback .stop svg circle {
    -webkit-transition: fill 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:         fill 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
    fill:               #62a8ea;
    stroke-width:       0
}

.pawtunes .player .playback .play svg .circle-preloader, .pawtunes .player .playback .stop svg .circle-preloader {
    -webkit-transition:       opacity 250ms ease;
    transition:               opacity 250ms ease;
    -webkit-transform-origin: center center;
    transform-origin:         center center;
    opacity:                  0;
    stroke-dasharray:         8;
    stroke-dashoffset:        0;
    stroke-linecap:           round;
    stroke-width:             .25rem;
    stroke-miterlimit:        10;
    fill:                     none;
    stroke:                   #8fc1f0
}

.pawtunes .player .playback .play svg path, .pawtunes .player .playback .stop svg path {
    fill: #fff
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform:         rotate(360deg)
    }
}

@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform:         rotate(360deg)
    }
}

.pawtunes .player .playback .play:hover svg circle, .pawtunes .player .playback .stop:hover svg circle {
    fill: #8fc1f0
}

.pawtunes .player .volume-control {
    display:           -webkit-box;
    display:           -ms-flexbox;
    display:           flex;
    -webkit-box-align: center;
    -ms-flex-align:    center;
    align-items:       center;
    width:             calc(50% - 4.5rem);
    height:            5rem;
    padding:           0 1.25rem
}

.pawtunes .player .volume-control .hidden {
    display: none
}

.pawtunes .player .volume-control .volume-icon svg {
    cursor:             pointer;
    -webkit-transition: fill 250ms ease;
    transition:         fill 250ms ease
}

.pawtunes .player .volume-control .volume-icon svg.hidden {
    display: none
}

.pawtunes .player .volume-control .volume-slider {
    width:              0;
    -webkit-transition: opacity 150ms cubic-bezier(0.25, 0.8, 0.25, 1) 50ms, width 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:         opacity 150ms cubic-bezier(0.25, 0.8, 0.25, 1) 50ms, width 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity:            0;
    border-radius:      .15rem
}

.pawtunes .player .volume-control .volume-slider .vol-progress {
    height:        .3rem;
    margin:        0 .625rem;
    cursor:        pointer;
    border-radius: .15rem;
    background:    #ccc
}

.pawtunes .player .volume-control .volume-slider .vol-progress .vol-bar {
    position:      relative;
    display:       block;
    width:         50%;
    height:        100%;
    border-radius: .15rem;
    background:    #62a8ea
}

.pawtunes .player .volume-control .volume-slider .vol-progress .circle-control {
    position:           absolute;
    top:                -0.4rem;
    right:              -0.4rem;
    display:            block;
    width:              1rem;
    height:             1rem;
    -webkit-transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:         opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:         transform 250ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
    transition:         transform 250ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity:            0;
    border-radius:      50%;
    background:         #62a8ea
}

.pawtunes .player .volume-control .volume-slider .vol-progress:hover .circle-control {
    cursor:            pointer;
    -webkit-transform: scale(1.4);
    transform:         scale(1.4)
}

.pawtunes .player .volume-control:hover .volume-icon svg {
    fill: #62a8ea
}

.pawtunes .player .volume-control:hover .volume-slider {
    width:   100%;
    opacity: 1
}

.pawtunes .player .volume-control:hover .volume-slider .circle-control {
    opacity: 1
}

.pawtunes .player.paw-seeking .playback .stop svg .circle-preloader {
    -webkit-animation: rotate 3s linear infinite;
    animation:         rotate 3s linear infinite;
    opacity:           1
}

@-webkit-keyframes text-change-anim {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes text-change-anim {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-webkit-keyframes preloader-background {
    0%, 24.9% {
        background-color: #159756
    }
    25%, 49.9% {
        background-color: #da4733
    }
    50%, 74.9% {
        background-color: #3b78e7
    }
    75%, 100% {
        background-color: #fdba2c
    }
}

@keyframes preloader-background {
    0%, 24.9% {
        background-color: #159756
    }
    25%, 49.9% {
        background-color: #da4733
    }
    50%, 74.9% {
        background-color: #3b78e7
    }
    75%, 100% {
        background-color: #fdba2c
    }
}

@-webkit-keyframes preloader-front {
    0% {
        width:            0;
        background-color: #da4733
    }
    24.9% {
        width:            50%;
        background-color: #da4733
    }
    25% {
        width:            0;
        background-color: #3b78e7
    }
    49.9% {
        width:            50%;
        background-color: #3b78e7
    }
    50% {
        width:            0;
        background-color: #fdba2c
    }
    74.9% {
        width:            50%;
        background-color: #fdba2c
    }
    75% {
        width:            0%;
        background-color: #159756
    }
    100% {
        width:            50%;
        background-color: #159756
    }
}

@keyframes preloader-front {
    0% {
        width:            0;
        background-color: #da4733
    }
    24.9% {
        width:            50%;
        background-color: #da4733
    }
    25% {
        width:            0;
        background-color: #3b78e7
    }
    49.9% {
        width:            50%;
        background-color: #3b78e7
    }
    50% {
        width:            0;
        background-color: #fdba2c
    }
    74.9% {
        width:            50%;
        background-color: #fdba2c
    }
    75% {
        width:            0%;
        background-color: #159756
    }
    100% {
        width:            50%;
        background-color: #159756
    }
}

/*# sourceMappingURL=pawtunes.css.map */