.pagination {
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn.paged {
    color: black;
    padding: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 400;
}

.btn.paged.active{
    color:#fff;
    background:#000;
}

.pagination a:active {
    background: black;
    color: white;
}

.pagination a:hover {
    background: black;
    color: white;
}

.btn{
    -webkit-appearance: none;
    -webkit-border-radius: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 16px;
    background-color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    transition: 300ms;
    font-weight: bold;
    height: 56px;
    min-width: 56px;
    z-index: 1;
    color: #000;
    border-radius: 4px;
    font-size: 16px;
    letter-spacing: 1px;
    white-space: nowrap;
}
.btn.smooth{
    text-transform: none;
    font-weight: normal;
    height: 40px;
    font-size: 14px;
}
.btn.smooth svg{
    color:inherit;
    width: 16px;
    margin-right: 8px;
}
.btn.smooth.btn-dark svg path{
    fill:#fff;
}
.btn.btn-dark{
    background-color:#2a2a2a;
    color:#fff;
}
.btn.btn-dark:hover{
    color:#2a2a2a;
}

.btn.btn-small{
    height: 32px;
    min-width: 32px;
}
.btn.large{
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    text-transform: uppercase;
    position: relative;
    /* overflow: hidden; */
    cursor: pointer;
    /* box-shadow: 0px 8px 20px rgb(0 0 0 / 30%); */
    border-radius: 4px;
    background-color: white;
    font-size: 24px;
    height: 56px;
    min-width: 56px;
    padding: 0px 28px;
    font-weight: bold;
}

.btn.medium{
    height: 48px;
    min-width: 56px;
    padding: 0px 28px;
    font-size: 16px;
    /* box-shadow: rgb(0 0 0 / 15%) 0px 4px 4px; */
    border-radius: 4px;
    border:none;
}

.btn.small{
    height: 32px;
    min-width: 56px;
    padding: 0px 28px;
    font-size: 16px;
    /* box-shadow: rgb(0 0 0 / 15%) 0px 4px 4px; */
    border-radius: 4px;
    background-color: white;
    border:none;
}

.btn.large.square{
    width: 56px;
    /* box-shadow:0px 8px 20px rgb(0 0 0 / 30%); */
}

.btn.large.square span{
    width: 100%;
}

.btn.large:hover{
    /* box-shadow: 0px 3px 10px rgb(0 0 0 / 25%); */
}

.btn-sublabel{
    margin-top: 8px;
    text-align: center;
    width: 100%;
    text-transform: capitalize;
    display: block;
    font-size: 12px;
    line-height: 1.4em;
    letter-spacing: 0.2px;
    position: absolute;
    bottom: -25px;
    font-weight: lighter;
    left:0;
}

.btn:hover{
    background-color: #f4f4f4;
}

.btns-add-to {
    background-color: #fff;
    padding: 0;
    border-radius: 4px;
    /*  box-shadow: 0px 7px 20px rgb(0 0 0 / 15%); */
    left: 0;
    display: none;
    overflow: hidden;
    z-index: 11;
    position: relative;
    width: 100%;
    width: 220px;
}

.btns-add-to.inline{
    display:block;
}

.btns-add-to.horizontal{
    min-width:auto;
    box-shadow: none;
    display: flex !important;
    justify-content: flex-start;
    background: transparent;
    overflow: visible;
    width: auto;
}

.btns-add-to.horizontal a span{

    justify-content: center;
}
.btn.social-btn {
    height: 56px;
    padding: 0px 17px;
    cursor: pointer;
    transition: 300ms;
    border-radius: 4px;
    justify-content: left;
    color: #000;
    opacity: 1;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.15px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    width: 100%;
    text-align: left;
    font-weight: bold;
    box-shadow: none;
}

.inline .btn .blank-link-img{
    top: 50%;
    margin-top: -6px;
}

.social-btn.spotify.added path.idle{
    display:none;
}

.social-btn.spotify.added path.added{
    display:block;
}

.btn.shadowed{
    box-shadow: 0px 7px 20px rgb(0 0 0 / 15%);
}

.btns-add-to.horizontal .btn{
    float:left;
    margin-right: 16px;
    padding: 0;
}

.addToPlaylistAction.added svg .vertical{
    opacity: 0;
    transition: 500ms;
    position: absolute;
    top: 50%;
    left: 50%;
}

.addToPlaylistAction svg{
    transform: rotate(0deg);
    transition: 500ms;
}

.addToPlaylistAction.added.plus svg{
    transform: rotate(180deg);
}

.addToPlaylistAction.loading{
    opacity:0.5;
}

.btns-add-to .add-to::after{
    content:' ';
    border-bottom:1px solid #ddd;
    width:100%;
    height:1px;
    z-index:1;
    position:absolute;
    left:0;
    bottom:0;
}
.btns-add-to .add-to:last-child{
    border-bottom:none;
}
.btn.social-btn:not(.square) span{
    width: 36px;
    text-align: left;
    display: flex;
}
.btns-add-to a span svg{
    height: 20px;
    fill:#000;
    opacity:1;
}

.post-mobile-play-btn{
    margin-top: -26px;
}

.btns-add-to .add-to.fav.added svg path:first-child{
    display: none;
}

.btns-add-to .add-to.spotify.added svg path:first-child{
    fill: #1db954;
}

.btn-play{
    /* box-shadow: 0px 4px 8px rgb(0 0 0 / 25%); */
    border-radius: 4px;
}

.btn-play:before{
    content: " ";
    position: absolute;
    height: 16px;
    width: 16px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNjAgMzIwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNjAgMzIwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTEzOCwyMjkuOWM4LjUsNS4zLDguNSwxNy44LDAsMjMuMUwzNS4yLDMxNi45Yy05LDUuNi0yMC42LTAuOS0yMC42LTExLjVWMTc3LjZjMC0xMC42LDExLjYtMTcuMSwyMC42LTExLjVMMTM4LDIyOS45eiIvPgoJPGc+CgkJPHBhdGggZD0iTTExLDE0LjhDMTEsNy4yLDE3LjEsMSwyNC44LDFoMjAuN2M3LjYsMCwxMy44LDYuMiwxMy44LDEzLjh2MTE3LjRjMCw3LjYtNi4yLDEzLjgtMTMuOCwxMy44SDI0LjgKCQkJYy03LjYsMC0xMy44LTYuMi0xMy44LTEzLjhWMTQuOHoiLz4KCQk8cGF0aCBkPSJNMTAwLjcsMTQuOGMwLTcuNiw2LjItMTMuOCwxMy44LTEzLjhoMjAuN2M3LjYsMCwxMy44LDYuMiwxMy44LDEzLjh2MTE3LjRjMCw3LjYtNi4yLDEzLjgtMTMuOCwxMy44aC0yMC43CgkJCWMtNy42LDAtMTMuOC02LjItMTMuOC0xMy44VjE0Ljh6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==);
    background-repeat: no-repeat;
    -webkit-background-position: bottom left;
    background-position: bottom left;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}


.btn-play.large:not(.no-text)::before{
    left:0;
    height: 27px;
    min-width: 28px;
    position: relative;
    margin-right: 16px;
}
.btn-play.large:before{
    height: 28px;
    width: 28px;
}

.btn-play.big-play-icon::before{
    height: 28px;
    width: 28px;
}

.btn-play.playing:before {
    -webkit-background-position: top left;
    background-position: top left;
}

.link{
    font-weight: bold;
    text-transform: uppercase;
    display: block;
    height: 100%;
    padding: 8px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}

.link.with-border{
    border: 1px solid #C6C6C6;
    border-radius:4px;
}

.btn-list{

}
.btn.stripped{
    font-size: 18px;
    text-transform:
        capitalize;
    background:
        none;
    color: #666;
    padding: 8px 0px;
    min-width: auto;
    height: auto;
}

.btn.stripped.active{
    color:#000;
    position:relative;
}

.btn.stripped.active::after{
    color:#000;
    text-decoration: underline;
    content:
        ' ';
    width:100%;
    position:
        absolute;
    height:3px;
    background:#000;
    bottom: 0;
}

.btn.tabbed{
    border: none;
    height: 36px;
    font-size: 14px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 0px 15px;
    cursor: pointer;
    background: transparent;
    transition: 300ms;
    font-weight: 400;
    text-transform: capitalize;
    white-space: nowrap;
}

.btn.tabbed:hover{
    background:#fff;
}

.btn.tabbed.active{
    background:#fff;
}

.btn.bold{
    font-weight:600;
}

.btn .blank-link-img{
    position: absolute;
    top: 6px;
    right: 6px;
}


.btn.btn-inline{
    width:32px;
    height:32px;
    box-shadow:none;
    padding: 0;
    max-width: 32px;
    min-width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.share-buttons{
    gap: 8px;
    transform: translate(-2px, 0%);
    position: absolute;
    transition:300ms;
    background: #fff;
    top: -100%;
}
.share-buttons.active{
    top: 0;
}
.share-holder{
    position:
        relative;
    overflow: hidden;
    width: 50%;
    height: 25px;
    display: flex;
    justify-content: left;
    align-items: center;
}

.share-button{
    display: flex;
    justify-content: center;
    align-items: center;
}
.share-button .share-icon{
    width: 24px;
}
.share-button .copy-icon{
    width: 18px;
}

.share-button .close-icon{
    width: 18px;
}

.floating-add-to-menu{
    z-index: 101;
    position: absolute;
    overflow: visible;
    top: 0;
    left: -16px;
    transition: 300ms;
    min-height: 168px;
    display: block;
    left: -50%;
    top: -174px;
    display: none;
}
#m-btns-add-to .floating-add-to-menu{
    top:0;
}
.floating-add-to-menu.active{
    display: block;
}
.floating-add-to-menu.active::after{
    content: " ";
    border: 10px solid transparent;
    width: 0;
    height: 0;
    position:absolute;
    bottom: -22px;
    z-index: 101;
    border-top: 12px solid hsl(0deg 0% 100% / 89%);
    left: 22px;
}

.add-to-toggle-parent{
    position: relative;
    z-index: 4;
    /* left: 23px; */
}

.btn.btn-dark:hover svg path{
    fill:#000;
}