@font-face {
  font-family: 'dina';
  src: url('https://d3ep.com/assets/fonts/d3ep-webfont.eot');
  src: url('https://d3ep.com/assets/fonts/d3ep-webfont.eot?#iefix') format('embedded-opentype'),
       url('https://d3ep.com/assets/fonts/d3ep-webfont.woff') format('woff'),
       url('https://d3ep.com/assets/fonts/d3ep-webfont.ttf') format('truetype'),
       url('https://d3ep.com/assets/fonts/d3ep-webfont.svg#din_a') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'bebas';
  src: url('https://d3ep.com/assets/fonts/bebasneue-webfont.eot');
  src: url('https://d3ep.com/assets/fonts/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
       url('https://d3ep.com/assets/fonts/bebasneue-webfont.woff') format('woff'),
       url('https://d3ep.com/assets/fonts/bebasneue-webfont.ttf') format('truetype'),
       url('https://d3ep.com/assets/fonts/bebasneue-webfont.svg#bebas_neueregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('https://d3ep.com/assets/fonts/Roboto-Regular-webfont.eot');
  src: url('https://d3ep.com/assets/fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('https://d3ep.com/assets/fonts/Roboto-Regular-webfont.woff') format('woff'),
       url('https://d3ep.com/assets/fonts/Roboto-Regular-webfont.ttf') format('truetype'),
       url('https://d3ep.com/assets/fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'robotoblack';
  src: url('https://d3ep.com/assets/fonts/Roboto-Black-webfont.eot');
  src: url('https://d3ep.com/assets/fonts/Roboto-Black-webfont.eot?#iefix') format('embedded-opentype'),
       url('https://d3ep.com/assets/fonts/Roboto-Black-webfont.woff') format('woff'),
       url('https://d3ep.com/assets/fonts/Roboto-Black-webfont.ttf') format('truetype'),
       url('https://d3ep.com/assets/fonts/Roboto-Black-webfont.svg#robotoblack') format('svg');
  font-weight: normal;
  font-style: normal;

}

@font-face {
    font-family: 'D3ep';
    src: url('https://d3ep.com/assets/fonts/D3ep-Regular.eot');
    src: url('https://d3ep.com/assets/fonts/D3ep-Regular.eot?#iefix') format('embedded-opentype'),
        url('https://d3ep.com/assets/fonts/D3ep-Regular.woff2') format('woff2'),
        url('https://d3ep.com/assets/fonts/D3ep-Regular.woff') format('woff'),
        url('https://d3ep.com/assets/fonts/D3ep-Regular.ttf') format('truetype'),
        url('https://d3ep.com/assets/fonts/D3ep-Regular.svg#D3ep-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
  background: #1e1e1e;
  color: #fff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', Arial, sans-serif;
}

*:focus {
  outline: 0;
}

button::-moz-focus-inner {
  border: 0;
}

a {
  color: white;
}

h2 {
  margin-top: 0;
}

body.offline {
    background: #1f1f1f;
    padding: 0!important;
    margin: 0!important;
}

.resendActivation .modal__login {
  border-bottom: none!important;
}


.vh-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  box-sizing: border-box;
  font-family: 'abel', sans-serif;
  font-size: 17px;
}

.vh-center img {
  width: 80%;
}

.m-mode-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  box-sizing: border-box;
}

.MM {
  display: none;
}

.m-mode {
  width: 90%;
}

.m-mode img {
  width: 100%;
}

#top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  box-sizing: border-box;
  height: 70px;
  background: #1e1e1e;
}

#footer {
  width: 100%;
  box-sizing: border-box;
  background: #2b2b2b;
  min-height: 200px;
  padding-bottom: 100px;
  display: block;
  font-family: 'abel', sans-serif;
  color: #CCC;
  font-size: 14px;
  box-shadow: 0 50vh 0 50vh #2b2b2b;
  margin-top: 40px;
}

.footer-wrap {
  max-width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  margin: 0 auto;
  overflow: hidden;
  display: block;
}

#footer p {
  padding: 20px 0 10px 0;
}

.footer-flex {
  display: block;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.footer-flex div {
  display: block;
  margin:0 0 20px 0;
  box-sizing: border-box;
}

.footer-flex div a {
  font-size: 15px;
  text-decoration: none;
  color: white;
}

.footer-flex ul {
  list-style-type: none;
  padding: 0;
}

.footer-flex li {
  margin: 0 0 5px 0;
  font-size: 11px;
}



.footer-flex div h4 {
  font-size: 14px;
  color: #9dbac6;
}

.footer-right {
  width: 100px;
  box-sizing: border-box;
  margin-top: 20px;
}

.footer-group {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 20px;
  display: flex;
}

.footer-group .smaller {
  font-size: 13px;
}

.n404 {
  margin: 40px auto;
  width: 600px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
.n404 img {
  width: 100%;
}
.n404iwrap {
  position: absolute;
  width: 100%;
  bottom: 130px;
  box-sizing: border-box;
}
.n404txt {
  text-align: center;
  font-size: 18px;
}

.w404 {
  width: 100%;
  background: #202020;
  box-sizing: border-box;
  text-align: center;
  padding: 20px;
}

.w404 p {
  margin-top: 20px;
}

.w404 .gremlin {
  margin: 40px;
}

#sidebar {
  background: none;
  box-sizing: border-box;
  margin: 0;
  width: 350px;
  max-width: 350px;
  min-width: 350px;
}

.d-con {
  background: #262626;
  color: rgb(225, 225, 225);
  padding: 30px;
  line-height: 1.5rem;
}

.d-con h4 {
  font-family: 'abel', sans-serif;
  font-size: 20px;
  margin: 0;
  padding: 0;
}

.d-con ul {
  line-height: 0.8rem;
  margin: 0;
  padding: 10px 0 0 40px;
}

.d-con li {
  margin: 0;
  padding: 0;
  line-height: 1.3rem;
}

.d-con a {
  text-decoration: none;
  color: #9dbac6;
}


.d-date {
  font-family: 'abel', sans-serif;
  color: rgb(153, 153, 153);
  margin-bottom: 20px;
  text-align: center;
}

.header {
  display: flex;
  padding: 0 0 0 10px;
  box-sizing: border-box;
  justify-content: flex-start;
  height: 70px;
  max-width: 1600px;
  margin: 0 auto;
}

.logo,
.top-search,
.menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  flex-shrink: 0;
}

.fl {
  font-size: 80pt;
  padding: 0!important;
  margin: -14px 0 0 0!important;
  transition: all 0.2s;
  color: #dadada;
}

.fl a {
  text-decoration: none;
}



.top-left {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}

._m-logo {
  width: 40px;
  flex-shrink: 0;
  margin: 10px 20px 0 0px;
}


.logo img {
  width: 100%;
}

.top-search {
  position: relative;
  margin-right: 20px;
}

#_m-search,
#_m-search-close {
  font-size: 22px;
  margin-top: 19px;
  cursor: pointer;
}

#_m-search-close,
#_searchbox {
  display: none;
}

#_m-search-close {
  margin-left: 10px;
  margin-right: 20px;
  color: grey;
}

#_m-search {
  margin-right: 20px;
  display: none;
}

#_user-menu {
  display: none;
}

.s-box {
  background: #0f0f0f;
  color: #797979;
  padding: 7px;
  box-sizing: border-box;
  width: 250px;
  display: flex;
  font-size: 16px;
  border-radius: 6px;
}

.search-input {
  border: 0;
  padding: 3px 5px 0;
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  background: #333;
  color: white;
}

#goSearch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  background: #333;
  transition: all 0.2s;
  padding: 0 5px 0 0;
}

#s-results {
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
  z-index: 100;
  display: none;
  position: absolute;
  top: 60px;
  right: -21px;
  max-height: 275px;
  overflow: hidden;
}

.s-item {
  display: inline-block;
  width: 100%;
  padding: 3px 12px;
  color: rgb(179, 179, 179);
  cursor: pointer;
  font-family: 'abel', sans-serif;
}


#s-results p {
  color: #242424;
  padding: 5px;
}
.searchResults {
  background: #2f2e2e;
  color: white;
  min-width: 300px;
  min-height: 60px;
  padding: 10px;
}

.a_menu {
  display: flex;
  justify-content: space-between;
  margin-left: auto;
}

.a_menu a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 0 10px;
  text-decoration: none;
  border-left: 1px solid #0d0d0d;
  font-size: 12px;
  color: #8a8a8a;
  transition: all 0.2s;
}

.gd-content {
  padding: 20px;
}

.gd-content a {
  display:inline-block;
  color: rgb(199, 199, 199);
  border-left: none;
}

/* Reuseable full width content box */
.genBox {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  display: block;
  background: #262626;
}

#main {
  position: relative;
  box-sizing: border-box;
  max-width: 1600px;
  padding: 0;
  margin: 70px 0 0 0;
}
#player {
  width: 100%;
  height: 90px;
  background: #151515;
  box-sizing: border-box;
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  padding: 0;
  border-top: 1px solid #242424;
}

.player-wrap {
  box-sizing: border-box;
  margin: -25px auto 0 auto;
}

.player-btns {
  display: flex;
  height: 80px;
  margin: 0 10px 0 10px;
}

#volume {
  display: none;
}

#m-title {
  font-size: 12px;
  padding: 10px;
  font-family: 'abel', sans-serif;
  font-weight: bold;
  color: #84b2f7;
  height: 15px;
  position: relative;
  overflow: hidden;
}

#m-scroll {
  position: absolute;
  width: 100%;
  margin: 0;
  line-height: 15px;
  text-align: left;
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -moz-animation: scroll-left 2s linear infinite;
  -webkit-animation: scroll-left 2s linear infinite;
  animation: scroll-left 10s linear infinite;
  white-space: nowrap;
}

/* Front Page */
.fpLogo {
  display: none;
}

@-moz-keyframes scroll-left {
  0% {
      -moz-transform: translateX(100%);
  }
  100% {
      -moz-transform: translateX(-100%);
  }
}

@-webkit-keyframes scroll-left {
  0% {
      -webkit-transform: translateX(100%);
  }
  100% {
      -webkit-transform: translateX(-100%);
  }
}

@keyframes scroll-left {
  0% {
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
  }
  100% {
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
  }
}

.playerMeta {
  display: none;
}

.pl-text {
  display: flex;
  flex-direction: column;
  line-height: 20px;
  flex-grow: 1;
  overflow: hidden;
  margin: 13px 20px 0 0;
}

#pl-title {
  font-size: 12px;
  margin-left:20px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#pl-artist {
  font-size: 12px;
  margin-left:20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

#pl-bottom {
  font-size: 11px;
  margin-left:20px;
  color: rgb(131, 131, 131);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.pl-buy {
  margin: 0 20px 0 auto;
  display: flex;
  height: 80px;
  flex-direction: column;
  justify-content: center;
  width: 50px;
  text-align: right;
  padding-right: 20px;
  border-right: 2px solid #1e1e1e;
}

#pl-btn-buy {
  margin-top: -10px;
}

#pl-artist a, #pl-bottom a {
  color: rgb(158, 158, 158);
}

#pl-title a, #pl-artist a, #pl-bottom a {
  text-decoration: none;
}

#pl-cover {
  width: 60px;
  margin: 13px 0 0 0;
  flex-shrink: 0;
}
#pl-cover img {
  width: 100%;
}

#playPauseBtn {
  background: none;
  border: none;
  color: gray;
  font-size: 40px;
  padding: 0 5px;
  transition: all 0.2s;
  cursor: pointer;
}

#previousBtn {
  background: none;
  border: none;
  color: gray;
  font-size: 25px;
  padding: 0;
  transition: all 0.2s;
  cursor: pointer;
  display: block;
}


#nextBtn {
  background: none;
  border: none;
  color: gray;
  font-size: 25px;
  padding: 0;
  transition: all 0.2s;
  cursor: pointer;
  display: block;
}


.player-wrap {
  display: flex;
}

h3 {
  text-align: center;
  margin: 0 0 20px 0;
  background:#262626;
  padding: 10px 0;
  box-sizing: border-box;
}

#user-dropbtn {
  color: white;
  padding: 20px 16px 11px 16px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  border-left: 1px solid #2b2b2b;
  border-right: 1px solid #2b2b2b;
  transition: all 0.2s;
  position: relative;
}

#_m-user-dropbtn {
  color: white;
  padding: 18px 16px 14px 16px;
  font-size: 22px;
  border: none;
  cursor: pointer;
  border-left: 1px solid #0d0d0d;
  transition: all 0.2s;
  display: inline-block;
}

#_mdropbtn {
  background-color: #383737;
  display: flex;
  transition: all 0.2s;
  font-size: 17px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: #717171;
  margin: 15px 20px 0 0;
}

.una {
  background-color: #515151!important;
}

.mna {
  background-color: #141414!important;
}

.tna {
  background-color: #3c3c3c!important;
  color: white!important;
}

#_mdropdown-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #141414;
  color: white;
  min-width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  transition: 0.2s;
  cursor: pointer;
  font-size: 18px;
  text-align: center;
}

#user-dropdown-content,
#_m-user-dropdown-content {
  display: none;
}

#user-dropdown-content a {
  color: rgb(216, 216, 216);
  padding: 10px 16px 8px;
  text-decoration: none;
  display: block;
  transition: 0.2s;
  cursor: pointer;
  border-bottom: 1px solid black;
  text-transform: uppercase;
  font-size: 12px;
}


#_m-user-dropdown-content {
  background: #1a1919;
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  top: 59px;
  left: 0;
  z-index: 100;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
}

#_m-user-dropdown-content a {
  color: rgb(175, 175, 175);
  padding: 20px 0;
  text-decoration: none;
  display: block;
  transition: 0.2s;
  cursor: pointer;
  color: white;
  font-family: 'abel', sans-serif;
  text-align: center;
  border-bottom: 1px solid#3c3c3c;
  font-size: 20px;
}

#_mdropdown-content a {
  text-decoration: none;
  font-family: 'abel', sans-serif;
  font-size: 18px;
  border-bottom: 1px solid #3c3c3c;
  padding: 5px 0;
  display: block;
}

/*********************************************/
.welmsg {
  color: #8760bf!important;
}
.sysNameWelMsg {
  color: #8760bf!important;
  font-weight: bold;
}
.sb-wel-btn {
  padding: 5px;
  border: 0;
  background: #684799;
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  margin-top: 7px;
}
.sb-wel-btn:hover {
  background: #433060;
}

.btn {
  padding: 10px 15px;
  border: 0;
  background: #435f77;
  color: white;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}


.subscribe .btn,
.profile-wrap .btn {
  background: #435f77;
}

.up_name_wrap {
  display: flex;
  flex-direction: row;
}


#logout {
  cursor: pointer;
}

#login_error {
  text-align: center;
  color: #f47d60;
  margin-top: 10px;
  font-size: 15px;
}

.lng_msg {
  text-align: left!important;
  color: white;
  margin-top: 10px;
  font-size: 12px;
}

.signup_wrap {
  max-width: 100%;
  margin: 0;
}

#signup_form {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 25px;
}

.su_head {
  font-size: 25px;
  margin-bottom: 10px;
  color: #ffad64;
}

#su_accept {
  display: none;
}

#signup_form input {
  padding: 5px;
  margin-bottom: 15px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}

#signupError {
  margin-top: 10px;
  background: #932323;
  color: #f25e4d;
  text-align: center;
  padding: 8px 10px;
}

#signup_error,
#re_activate_msg {
  margin-top: 10px;
  color: #f25e4d;
  text-align: center;
  padding: 8px 10px;
}

.big-notice {
  background: #262626;
  padding: 30px;
  text-align: left;
}

.big-notice .bigicon {
  color: white;
  margin: 0;
}

.login-signup {
  background-color: #353535;
  max-width: 600px;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 0 auto;
}

#act-cd {
  color: #db5dd0;
}

.resendActivation {
  max-width: 450px;
  margin: 30px auto 0 auto;
}

/* CSS Spinners */
.sk-wave {
  width: 6em;
  height: 4em;
  margin: auto;
  text-align: center;
  font-size: 1em;
}
.sk-wave .sk-rect {
  background-color: #db5dd0;
  height: 100%;
  width: .5em;
  display: inline-block;
  -webkit-animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
          animation: sk-wave-stretch-delay 1.2s infinite ease-in-out;
}
.sk-wave .sk-rect-1 {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s;
}
.sk-wave .sk-rect-2 {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}
.sk-wave .sk-rect-3 {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.sk-wave .sk-rect-4 {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.sk-wave .sk-rect-5 {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}

@-webkit-keyframes sk-wave-stretch-delay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

@keyframes sk-wave-stretch-delay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
/* End CSS Spinners */

.items {
  margin-bottom: 10px;
  display: block;
}

.item {
  display: flex;
  flex-direction: row;
  background: #202020;
  color: white;
  margin-bottom: 2px;
  padding: 5px 10px 5px 5px;
  box-sizing: border-box;
  height: 70px;
  transition: all 0.2s;
}

.art img,
.artMo img {
  width: 100%;
}


/* FlexBox Table */
.flex-table {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  flex-direction: column;
  justify-content: space-between;
  border-top: 1px solid #424242;
  border-bottom: 1px solid #424242;
  padding: 0 0 5px 0;
  margin: 15px 0 20px 0;
}

.flex-table .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.flex-table .column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.flex-table .header-column {
  color: #646464;
  padding: 5px 0 3px 0;
}

.flex-table .td-column {
  color: white;
  font-weight: bold;
}

.flex-table .double-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

/* Flex Table Meta */
.flex-table-meta {
  display: none;
  background: #202020;
  width: 100%;
  justify-content: space-between;
  font-size: 13px;
  margin: 15px 0;
}
.flex-table-meta .column {
  display: flex;
  flex-direction: column;
  border-right: 2px solid #0b0b0b;
  padding: 6px 12px;
  align-content: center;
  flex-grow: 1;
}
.flex-table-meta .column-end {
  display: flex;
  flex-direction: column;
  padding: 6px 12px;
  align-content: center;
  flex-grow: 1;
}
.flex-table-meta .header-column {
  color: #626262;
}
.flex-table-meta .td-column {
  font-weight: bold;
}
.flex-table-meta a {
  text-decoration : none;
}

.single a {
  text-decoration : none;
}


.also_purchased .items {
  margin-top: 20px;
}
/*///////////////////////*/

.login-forgot {
  background-color:#353535;
  max-width: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  margin: 20px;
}

.login-forgot .modal__header {
  display: block;
}

.login-forgot .modal__login p {
  font-weight: normal!important;
  font-size: 1rem;
  text-align: center;
}

.login-forgot .modal__login {
  border-right: none!important;
  border-bottom: none!important;
}

#modal-1-title {
  font-family: Arial, Helvetica, sans-serif;
}

.modal {
  font-family: 'abel', sans-serif;
  display: none;
}

#modal-1-content .modal__login {
  padding: 0 20px 10px 0;
}
.modal.is-open {
  display: block;
}

#remember_me {
  margin-left: 5px;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.modal__container {
  background-color: #333;
  width: 100%;
  margin: 0 20px;
  max-height: 100vh;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal__header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #282828;
  padding: 10px 20px;
}

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.25;
  color: #919191;
  box-sizing: border-box;
}

.modal__close {
  background: transparent;
  border: 0;
  color: rgb(199, 199, 199);
  font-size: 1.1rem;
  outline: 0;
  cursor: pointer;
  margin-left: auto;
}


.modal__header .modal__close:before {
  content: '\2715';
}

.modal__content {
  line-height: 1.5;
  color: white;
  display: block;
  padding: 0 20px;
}

.modal__content p {
  font-weight: bold;
  font-size: 1.1rem;
}

.modal__login {
  border-bottom: 1px solid rgb(100, 100, 100);
  padding: 0 0 20px 0;
  width: 100%;
  box-sizing: border-box;
}

.modal__forgot {
  font-size: 0.8rem;
  color: white;
  float: left;
}

.rme input {
  width: auto;
  padding: 0;
  margin: 0;
  font-size: 1rem;
}

.l-bt {
  margin-bottom: 5px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}


.rme {
  display: block;
  font-size: 0.8rem;
  float: right;
}

.l-bt input {
  width: auto!important;
  padding: 0!important;
  margin: 0;
}

.btn-create {
  width: 100%;
  border: 0;
  font-size: 0.9rem;
  cursor: pointer;
  background: #507338;
  border-radius: 5px;
  color: white;
  text-decoration: none;
  display: block;
  box-sizing: border-box;
  text-align: center;
  padding: 9px 7px 7px 7px;
  font-weight: bold;
}

.sinblk {
  border-right: none!important;
  padding: 0!important;
}

.modal__login input {
  width: 100%;
  padding: 6px;
  font-size: 1rem;
  margin-bottom: 8px;
  box-sizing: border-box;
  border: 0;
}
.modal__create {
  flex-grow: 1;
  flex-basis: 0;
  width: 100%;
  padding-bottom: 20px;
  box-sizing: border-box;
}

.modal__btn {
  font-size: 0.9rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.7rem;
  padding-bottom: 0.6rem;
  background-color: #435f77;
  color: #fff;
  border-radius: 0.25rem;
  border-style: none;
  border-width: 0;
  cursor: pointer;
  text-transform: none;
  overflow: visible;
  line-height: 1.15;
  text-align: center;
  margin: 0;
  outline: 0;
  font-weight: bold;
}

.modal__btn:focus {
  background-color: #55728a;
  outline: 0;
}

.modal__btn-primary {
  background-color: #426faa;
  color: #fff;
}

@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden='false'] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden='false'] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden='true'] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden='true'] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

pre {
  background: #f4f4f4;
  color: #666;
  page-break-inside: avoid;
  font-family: monospace;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1em 1.5em;
  display: block;
  word-wrap: break-word;
}


.is_visible {
  display: block !important;
}




.bold {
  color: white;
  font-weight: bold;
}

.profile-wrap {
  background: #262626;
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.profile-wrap textarea {
  width: 100%;
  resize: none;
  height: 200px;
  padding: 10px;
  font-size: 15px;
  font-family: 'Roboto', 'Arial', sans-serif;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}


.p-cell {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}
.p-label {
  font-size: 15px;
  color: gray;
  margin-bottom: 2px;
  font-family: 'abel', sans-serif;
}

.p-input input {
  padding: 5px;
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
  appearance: none !important;
  border-radius: 0;
  border: none;
  outline: 0;
}

.p-error {
  color: #ea7e7e;
  font-size: 14px;
  height: 20px;
  margin-top: 2px;
  padding-top: 3px;
  font-family: 'abel', sans-serif;
}

.p1, .p2 {
  width: 100%;
  box-sizing: border-box;
}

.p2 {
  margin-left: auto;
}

.p-info {
  color: #c1c1c1;
  font-size: 14px;
  background: #3c3c3c;
  padding: 0 10px;
  margin: 10px 0 25px 0;
}

#p-res {
  min-height: 20px;
  color: #6ac16a;
  width: 100%;
  text-align: center;
}

.p-bottom {
  padding: 0 0 30px 0;
}

/* Global */
.show { display: block !important; }
.show-i-block { display: inline-block !important; }
.show-flex { display: flex !important; }
.hide { display: none !important; }
.elip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pad-8-bt {
  margin-bottom: 8px;
}
.pad-20 {
  margin-top: 20px;
}
.ident {
  font-family: 'abel', sans-serif;
  color: #606060;
  font-size: 14px;
}
/**************/



/* Sidebar */
#layout {
  display: flex;
  flex-direction: column;
}

#content {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}




/* grid */
.grid {
  display: block;
}
.grid-item {
  margin: 0 5px 10px;
  width: calc(50% - 10px);
  display: inline-block;
  box-sizing: border-box;
}

.grid-item .art {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

.grid-item .artMo {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

.grid-item .layer-wrap {
  display: flex;
  padding: 5px;
  justify-content: space-around;
  box-sizing: border-box;
}



.grid-item .layer {
  display: none;
  position: absolute;
  bottom:0;
  left:0;
  width: 100%;
  height: 35px;
  background: #202020;
  transition: all 0.2s;
  border-bottom: 1px solid black;
}

.grid-item .rel-meta {
  width: 100%;
  background: #2b2b2b;
  font-size: 13px;
  padding: 10px;
  box-sizing: border-box;
  margin-top: -4px;
}

.grid-item .elip {
  width: calc(100% - 5px);
}

.grid-item a.title {
  text-decoration: none;
  font-weight: bold;
}

.grid-item a.artist {
  text-decoration: none;
}

.grid-item a.label {
  text-decoration: none;
  color: grey;
}



/******** Pagination ***********/
.paginate-wrap {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
}

a.paginate {
  display: inline-block;
  vertical-align: middle;
  padding: 2px 10px;
  background: #333;
  margin: 0 2px;
  text-decoration: none;
  min-width: 20px;
  text-align: center;
  font-size: 13px;
}

.paginate-right {
  margin-left: auto;
}

.paginate {
  display: inline-block;
  vertical-align: middle;
  padding: 2px 15px;
  background: black;
  font-size: 18px;
}

.paginate-nav {
  display: inline-block;
  vertical-align: middle;
  padding: 0 15px;
  background: #333;
  font-size: 17px;
}



.p-active {
  background: rgb(57, 92, 113) !important
}
/*******************************/


/* Support form */
.support-wrap {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.support-wrap p {
  color: #c4c4c4;
}

.support-wrap .p1 {
  background: #353535;
  padding: 5px 20px;
}

.support-wrap .btn {
  background: rgb(189, 60, 178);
}

.support-wrap .p2 {
  background:#202020;
  padding: 20px;
}

.support-wrap input,
.profile-wrap input,
.settings-wrap input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  -ms-appearance: none !important;
  -o-appearance: none !important;
  appearance: none !important;
  border-radius: 0;
  border: none;
  outline: 0;
  padding: 8px;
}

.support-wrap textarea {
  width: 100%;
  height: 150px;
  resize: none;
  font-size: 15px;
  font-family: Arial;
  outline: 0;
  box-sizing: border-box;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  -ms-appearance: none !important;
  -o-appearance: none !important;
  border-radius: 0;
  padding: 8px;
  border: none;
}

#u_order_id {
 margin-bottom: 20px;
}

#m-success {
  margin-top: 20px;
  background:#2a332a;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  display: none;
}

/* global select style */
.select-1 {
  display: block;
  font-size: 15px;
  font-family: sans-serif;
  font-weight: normal;
  color: #444;
  line-height: 1.3;
  padding: 9px 2px 7px 4px;
  width: 100%;
  max-width: 100%; 
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #aaa;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  border-radius: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%, 0 0;
  background-size: .65em auto, 100%;
}
.select-1::-ms-expand {
  display: none;
}

.select-1:focus {
  border-color: #aaa;
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222; 
  outline: none;
}
.select-1 option {
  font-weight:normal;
}

h3 {
  font-family: Arial, Helvetica, sans-serif;
  color: #d5d5d5;
  font-size: 15px;
  text-transform: uppercase;
}

.bigicon {
  font-size: 80px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin: 20px 0;
  color: #646362;
  font-weight: normal;
}

/* alertify stuff */
.alertify .ajs-header {
  display: flex;
  color: #444 !important;
  background: #e6e6e6 !important;
  border-bottom: 0!important;
}

.alertify .ajs-header img {
  margin-right: 5px;
}

.alertify .ajs-body .ajs-content {
  padding: 16px 24px 16px 0!important;
}

.alertify .ajs-footer {
  background:transparent!important;
  border-top:none!important;
  border-radius: 0 0 2px 2px;
}

.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button {
  background: #435f77;
  cursor: pointer;
  transition: 0.2s all;
}



.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-ok {
  color: white!important;
  outline: 0;
}

.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-cancel {
  background: #aaa;
  color: #333;
  transition: 0.2s all;
}



.alertify-notifier .ajs-message.ajs-error {
  background:rgb(196, 76, 76);
  text-shadow: none!important;
}

.alertify-notifier .ajs-message {
  border: 0!important;
  border-radius: 5px!important;
}

.alertify-notifier .ajs-message.ajs-success {
  background:white!important;
  color: #444;
  text-shadow: none!important;
}

.alertify-notifier .ajs-message.ajs-warning {
  background:rgb(0, 0, 0)!important;
  color: rgb(150, 150, 150);
  text-shadow: none!important;
}

.ajs-warning .alert-meta-title {
  color: white;
}

.mini-alert-wrapper {
  display: flex;
  color: #555;
  align-items: center;
  font-size: 14px;
  flex-direction: column;
}

.alert-wrapper {
  display: flex;
  color: #555;
  align-items: center;
  font-size: 14px;
}
.alert-wrapper img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.alert-meta {
  display: flex;
  flex-direction: column;
  color: #838383;
  font-size: 12px;
  text-align: left;
  line-height: 17px;
}

.alert-meta-title {
  color: rgb(49, 49, 49);
}

#analyser_r {
  display: none;
}

.playing .cued {
  display: inline-block;
}

.chb {
  margin: 8px 0 0 2px!important;
}



/* Front Page */
.fpWrap {
  background: #353535;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  font-family: 'Bebas';
  margin-bottom: 20px;
  margin-top: 2px;
}
.fpWrap a {
  text-decoration: none;
}

.oa_dj {
  font-size: 30px;
}
.nx_dj {
  font-size: 20px;
}
.fpMeta {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
#fp_onair .onair {
  text-align: center;
  width: 70px;
  font-size: 15px;
}
.fpNext, .nx_hr {
  font-size: 15px;
  color: #ae976b;
}
.nx_hr {
  display: none;
}
#fpOnImg {
  width: 130px;
  height: 130px;
  padding-top: 10px;
  overflow: hidden;
}
#fpOnImg img {
  width: 100%;
}
.fpMeta {
  margin-top: 20px;
}
.fpRight {
  display: none;
  flex-direction: column;
  margin-left: auto;
}
.fpLogo {
  margin: 21px 20px 0 0;
  width: 140px;
  opacity: 0.2;
}
.fpLogo img {
  width: 100%;
}

#fp_podcasts a.title {
  font-weight: normal;
}
#al_podcasts a.title {
  font-weight: normal;
}
.fpHead {
  font-family: 'bebas';
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
  color: white;
  padding: 5px;
  background: #333333;
}
.alHead {
  font-family: 'bebas';
  font-size: 20px;
  text-align: center;
  color: white;
  padding: 5px;
  background: #333333;
}
.art {
  cursor: pointer;
}
.art img {
  pointer-events: none;
}

.artMo {
  cursor: pointer;
}
/* .artMo img {
  pointer-events: none;
} */

#fp_charts a.title {
  font-weight: normal;
}
.ch-art {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  cursor: pointer;
}
.ch-art img {
  width: 100%;
}

.podUnavailable {
  font-size: 30px;
  margin-top: 30px;
}

/* fp guests */
#fp_guests,
#fp_activity,
#fp_newbies {
  margin-bottom: 20px;
  overflow: hidden;
  box-sizing:border-box;
  width: 100%;
  display: inline-grid;
}
#fp_guests a {
  text-decoration: none;
  font-weight: bold;
}

.fpHead {
  font-family: 'bebas';
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
  color: white;
  padding: 5px;
  background: #333333;
}
.alHead {
  font-family: 'bebas';
  font-size: 20px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 14px;
  color: white;
  padding: 5px;
  background: #333333;
}
.fpGstWrap {
  display : flex;
  width: 100%;
  box-sizing: border-box;
  background: #2b2b2b;
  padding: 10px 10px 5px 10px;
  border-bottom: 2px solid #1e1e1e;
}
.fpGstWrap:nth-child(2n) {
  background: #242424;
}
.fpGstImg {
  width: 100px;
  flex-shrink: 0;
}
.fpGstImg img {
  width: 100%;
}
.fpGstMeta {
  flex-direction: column;
  margin-left: 20px;
  box-sizing: border-box;
}
.fpGstName {
  font-family: 'bebas';
  font-size: 22px;
  color: #a5c6ea;
}
.fpGstHost {
  font-size: 18px;
  color: grey;
}
.fpGstWhen {
  margin-top: 3px;
  font-size: 14px;
  color: #bbd792;
}

.fpGstWhenLive {
  color: #e68c56;
  margin-top: 3px;
  font-size: 14px;
  font-weight: bold;
}

/* Single Chart */
.singleChartWrap {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
}
.singleChartWrap .c-meta {
  width: 100%;
  box-sizing: border-box;
}
.singleChartWrap .c-title {
  font-family: 'bebas', 'Arial', sans-serif;
  font-size: 28px;
}
.singleChartWrap .c-dj a {
  text-decoration: none;
  font-size: 18px;
}

.singleChartWrap .c-date {
  color: grey;
  font-size: 14px;
  margin-top: 3px;
}
.singleChartWrap .c-hype {
  color: #e8e8e8;
  font-size: 15px;
  margin-top: 10px;
  border-top: 1px solid grey;
  padding-top: 10px;
}
.singleChartWrap .c-show {
  color: #f0d775;
  font-size: 15px;
  margin-top: 10px;
  border-top: 1px solid grey;
  padding-top: 10px;
}
.singleChartWrap .c-top {
  display: flex;
  margin-bottom: 20px;
  flex-direction:column;
  padding: 0 10px;
}
.singleChartWrap .c-pos {
  font-family: 'bebas', 'Arial', sans-serif;
  font-size: 30px;
  width: 35px;
  text-align: center;
  margin-top: 10px;
  color: #777;
}
.singleChartWrap .cover {
  width: 150px;
  height: 150px;
  overflow: hidden;
  flex-shrink: 0;
  margin: 10px auto 10px auto;
}
.singleChartWrap .cover img {
  width: 100%;
}
.singleChartWrap .c-item {
  display: flex;
  padding: 10px 10px 10px 0;
  background: #404040;
  border-bottom: 1px solid #1e1e1e;
}
.singleChartWrap .c-item:nth-child(even) {
  background: #393939;
}

.singleChartWrap .c-item:hover .chart-play {
  display: block;
}

.singleChartWrap .c-art {
  width: 50px;
  height: 50px;
  overflow: hidden;
  margin-right: 10px;
  flex-shrink: 0;
  position: relative;
}
.singleChartWrap .c-art img {
  width: 100%;
}
.singleChartWrap .c-it-title a {
  font-weight: bold;
  text-decoration: none;
  transition: all 0.2s;
}

.singleChartWrap .c-it-label {
  color: #a6a6a6;
}
.singleChartWrap .c-content {
  font-size: 13px;
  margin-top: -2px;
}

/* Charts stuff */
.c-date {
  color: grey!important;
}
a.nts {
  color: #b2d3f0;
}



/* Sidebar */
/* D3EP Chart */
#d3epChart {
  display: flex;
  background: #333;
  padding: 0 0 10px 0;
  margin-bottom: 20px;
  font-size: 11px;
}
#d3epChart .c-it-artist {
  font-size: 11px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#d3epChart .c-it-label {
  font-size: 11px;
  color: #797979;
}

#d3epChart .dc_info {
  text-align: center;
  font-size: 12px;
  color: #bfbfbf;
  padding-top: 10px;
}
#d3epChart .podWrapper {
  margin-bottom: 0;
}
#d3epChart .sd-head {
  padding: 10px 0;
  margin: 0;
  text-align: center;
  font-family: 'bebas';
  font-size: 20px;
  border-bottom: 2px solid #1e1e1e;
}
#d3epChart .c-content {
  margin-right: 10px;
}

/* Show Top 10 Pods */
#top10_pods_dj {
  display: flex;
  background: #333;
  padding: 0 0 10px 0;
  margin: 0 0 20x 0;
  font-size: 11px;
}

/* Now Playing */
#top-live {
  cursor: pointer;
}
#onair-avatar, 
#onair-img, 
.top-live-meta, 
.onair, 
#onair-dj {
  pointer-events: none;
}

/* User Menu */
#usr {
  display: flex;
}
#iGuest {
  display: flex;
}
.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  background: white;
}
.user-avatar img {
  width: 100%;
}

#bell {
  float: right;
  margin-top: 6px;
  margin-left: 5px;
  color: #2d2d2d;
  transition: 0.2s all;
}

.nt_active {
  color: #ffffff;
  animation-name: ntani;
  animation-duration: 1s; 
  animation-iteration-count: infinite;
}

@keyframes ntani {
  0% {color: #d12b2b;}
  50% {color: #ffffff;}
  100% {color: #c72727;}
}

.t_login {
  border-left: 1px solid #353535;
  border-right: 1px solid #353535;
  font-size: 14px;
  display: flex;
  transition: all 0.2s;
  box-sizing: border-box;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  padding: 0 10px;
  color: grey;
  margin-left: 20px;
}



/* Forgot password  / Set Password */
#forgot_msg, #setpass_msg {
  margin: 20px 0 10px 0;
  min-height: 20px;
  font-size: 15px;
  text-align: left;
}

.bigico {
  font-size: 30px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin-bottom: 5px;
}

.warntext {
  text-align: center;
  margin-top: 20px;
  color: #aa0202;
}

.warntext a {
  color: black;
  font-weight: bold;
}

.red {
  color: #aa0202;
}

.large {
  font-size: 60px;
}

.bigerror {
  background: #2f2e2e;
  padding: 20px;
  margin: 50px auto;
  width: 500px;
  text-align: center;
}

.sm-ico {
  display: block;
  font-size: 25px;
  text-align: center;
  width:100%;
}

#tnl {
  display: none;
}

#setpass_msg {
  text-align: center;
  font-size: 14px;
}

#setpass_countdown {
  display: none;
  text-align: center;
  font-size: 14px;
}

#setpass_cnt {
  font-weight: bold;
}



/* Chart / List Play */
.item-col.art {
  width: 50px;
  height: 50px;
  margin:5px;
  cursor: pointer;
}
.item-col.artMo {
  width: 50px;
  height: 50px;
  margin:5px;
  cursor: pointer;
}
.chart-play {
  display: none;
  position: absolute;
  top:0;
  left:0;
  width: 50px;
  height: 50px;
  cursor: pointer;
}
.chart-play:hover .play-btn-sm {
  color: white;
}
.play-btn-sm {
  font-size: 20px;
  color: gray;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  font-size: 26px;
  pointer-events: none;
  text-align: center;
  margin: 15px 5px 5px 6px;
  vertical-align: middle;
  position: relative;
}



.playing {
  background: #171717 !important;
}

.playing img {
  opacity: 0;
}

.playing .chart-play {
  display: block;
}

.playing .pl-chart-play {
  display: block!important;
}


.item-col .title,
.item-col .artist,
.cart-item-col .title,
.cart-item-col .artist {
  font-weight: bold;
}

.item-col .mix,
.item-col .mixer,
.cart-item-col .mix,
.cart-item-col .mixer {
  color: #808080;
}

/* Global adjusters */
.w10 {
  width: 10%!important;
}
.w20 {
  width: 20%!important;
}
.w30 {
  width: 30%!important;
}
.w40 {
  width: 40%!important;
}
.w50 {
  width: 50%!important;
}
.w60 {
  width: 60%!important;
}
.w70 {
  width: 70%!important;
}
.w80 {
  width: 80%!important;
}
.w90 {
  width: 90%!important;
}
.w100 {
  width: 100%!important;
}
.wauto {
  width: auto!important;
}

.lgi {
  width: 90%!important;
}

#um-name {
  display: none;
}

.a-activated {
  text-align: center;
  color: #f4cc81;
  font-weight: bold;
}



.cb_container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cb_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}



.cb_container input:checked ~ .checkmark {
  background-color: rgb(67, 95, 119);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.cb_container input:checked ~ .checkmark:after {
  display: block;
}

.cb_container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.p-cell-cb {
  display: flex;
  width: 100%;
  margin-bottom: 30px;
}

.p-desc {
  color: #ddd;
  font-size: 15px;
  margin-bottom: 10px;
}
.p-lbl {
  color: gray;
  font-size: 15px;
  margin-top: 2px;
}

#signup_form label {
  font-family: 'abel', sans-serif;
}

.alerticon {
  text-align: center;
  width: 100%;
  font-size: 35px;
  color: #cc3737;
  margin-bottom: 10px;
}
  
.alerttxt {
  text-align: center;
  color: #cc3737;
}

.pop {
  color: #db5dd0;
}

.o-history {
  display: none;
}




/* FAV DJS */
.djfavs {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.favdjwrap {
  background: #313131;
  margin-bottom: 5px;
  padding: 10px;
  display: flex;
}
.favdjwrap-img {
  width: 55px;
  height: 55px;
  background: black;
  border-radius: 4px;
  overflow: hidden;
}
.favdjwrap-img img {
  width: 100%;
}
.favdj-mid {
  margin-left: 20px;
}

.favdjwrap-name {
  font-family: 'bebas';
  font-size: 28px;
}
.favdj-sched {
  margin-top: 5px;
  font-size: 14px;
}
.favdj-right {
  margin-left: auto;
}
.remove-dj {
  color: #717171;
  font-size: 26px;
  margin-top: 12px;
  transition: all 0.2s;
  cursor: pointer;
}

.favs-hd {
  background: #444;
  padding: 10px;
  font-size: 16px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 5px;
}
.loa {
  color: #8ed08e;
}

/******************/


/* NEW */
.likeBtn {
  cursor:pointer;
}

.al-err {
  font-size: 30px;
  color: #d94141;
}
.al-err-txt {
  padding: 11px;
}
.alertify .ajs-header {
  padding: 8px 23px!important;
}

.share {
  padding: 4px;
  transition: all 0.2s;
  cursor: pointer;
  width: 25px;
  text-align: center;
}
.share.facebook {
  background: #4267b2;
}
.share.twitter {
  margin-left: 10px;
  background: #4099ff;
}
.share.email {
  margin-left: 10px;
  background: #d77834;
}

.shareBox {
  display: inline-block;
  position: relative;
  vertical-align: top;
  height: auto;
  margin: 0 -2px 0 8px;
  padding: 6px 6px;
  left: -1px;
  background: #1e1e1e;
  font-size: 13px;
  color: #dfdfdf;
  transition: all .2s ease;
  min-width: 15px;
  text-align: center;
  box-shadow: 1px 1px 1px #515151;
}
.shareBox:after {
  top: 30%;
  left: -7px;
  content: "";
  position: absolute;
  border-width: 5px 8px 5px 0;
  border-style: solid;
  border-color: transparent #1e1e1e transparent transparent;
  display: block;
  width: 0;
  height: 0;
  transform: translateY(360deg);
}

.btn-play {
  background: #486f2d;
  color: white;
  text-decoration: none;
  padding: 8px 20px 6px 20px;
  font-size: 11px;
  cursor: pointer;
  display: inline-block;
  transition: all 0.2s;
  min-width: 34px;
  text-align: center;
}


.btn-gen {
  background: #34468f;
  color: white;
  text-decoration: none;
  padding: 8px 20px 6px 20px;
  font-size: 11px;
  cursor: pointer;
  display: inline-block;
  transition: all 0.2s;
  margin-left: 20px;
}


/* Dj Profile Page */
.djWrap {
  background: #333333;
  background: -moz-linear-gradient(top,  #282828 0%, #545454 50%, #282828 100%);
  background: -webkit-linear-gradient(top,  #282828 0%,#545454 50%,#282828 100%);
  background: linear-gradient(to bottom,  #282828 0%,#545454 50%,#282828 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#282828',GradientType=0 );
  display: flex;
  padding: 20px;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.djWrap .dj-image {
  width: 220px;
  height: 220px;
  overflow: hidden;
  border-radius: 50%;
  background: #1e1e1e;
  box-shadow: 1px 1px 1px #606060;
  flex-shrink: 0;
}
.djWrap .dj-image img {
  width: 100%;
}
.djWrap .dj-meta {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}
.djWrap .dj-name {
  font-family: 'bebas', 'Arial', sans-serif;
  font-size: 60px;
  display: flex;
  justify-content: center;
}
.djWrap .dj-location {
  display: flex;
  flex-direction: row;
  text-align: center;
  justify-content: center;
}
.djWrap .dj-flag {
  width: 30px;
  overflow: hidden;
}
.djWrap .dj-flag img {
  width: 100%;
}
.djWrap .dj-country {
  font-size: 22px;
  margin-left: 10px;
  margin-top: 3px;
  font-family: 'bebas', 'Arial', sans-serif;
  color: #b3b3b3;
}
.djWrap .dj-schedule {
  font-family: 'bebas', 'Arial', sans-serif;
  font-size: 24px;
  margin-bottom: 10px;
  color: #dfa480;
}

.djWrap .djc_img {
  width: 100%;
}

.djc_img img {
  width: 100%;
}

.djp_meta_wrp {
  background: #282828;
  margin-top: 20px;
}

.djp_headline {
  color: #e6ac79;
  margin-bottom: 20px;
  background: #333;
  padding: 20px;
}

.djp_bio {
  color: #c1c1c1;
  padding: 20px;
  overflow: hidden;
}

.proMeta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    box-sizing: border-box;
}
.pShare {
    display: flex;
    align-items: center;
}
.share.pmrg {
    padding: 2px;
    width: 20px;
    font-size: 14px;
    margin-top: -1px;
}

.ploves {
  border: 1px solid #737373;
  text-align: center;
  font-weight: bold;
  padding: 0 10px;
  font-size: 15px;
  color: #8e8e8e;
  display: inline-block;
  margin-right: 13px;
}

.proRelWrap {
    background: #282828 !important;
    padding: 20px 20px 5px 20px;
}

/* Friends */
.so_meta {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}

.so_btns {
  margin: 20px 0 0 0;
  text-align: center;
}

.fdadd_btn {
  border: 1px solid white;
  color: white;
  padding: 3px 6px;
  height: 18px;
  font-size: 12px;
  display: inline-block;
  cursor: pointer;
  transition: 0.2s all;
}
.fdrem_btn {
  border: 1px solid #aaa;
  background: #aaa;
  color: black;
  padding: 3px 6px;
  height: 18px;
  font-size: 12px;
  display: inline-block;
  cursor: pointer;
  transition: 0.2s all;
}
.fda_btn {
  border: 1px solid #94bb92;
  background: #94bb92;
  color: black;
  padding: 3px 6px;
  height: 18px;
  font-size: 12px;
  display: inline-block;
  cursor: pointer;
  transition: 0.2s all;
}
.fdrm_btn {
  border: 1px solid #9b9b9b;
  background: #9b9b9b;
  color: black;
  padding: 3px 6px;
  height: 18px;
  font-size: 12px;
  display: inline-block;
  cursor: pointer;
  transition: 0.2s all;
}

.fdr_btn {
  border: 1px solid #b56666;
  background: #b56666;
  color: black;
  padding: 3px 6px;
  height: 18px;
  font-size: 12px;
  display: inline-block;
  cursor: pointer;
  transition: 0.2s all;
  margin-left: 10px;
}
.msgbtn {
  border: 1px solid white;
  color: white;
  padding: 3px 6px;
  font-size: 12px;
  height: 18px;
  margin-left: 10px;
  display: inline-block;
  cursor: pointer;
  transition: 0.2s all;
}


.friendsWrap {
  display: flex;
  align-items: center;
}
.fdCirc {
  width: 30px;
  overflow: hidden;
  border-radius:50%;
  cursor: pointer;
  background: #1e1e1e;
}
.fdCirc img {
  width: 100%;
}
a.fcnt {
  display: flex;
  margin-right: 10px;
  text-decoration: none;
  font-size: 14px;
  color: #868686;
  align-items: center;
}


.friendsListWrap {
  display: flex;
  align-items: center;
  padding: 20px 10px;
  flex-wrap: wrap;
}
.fdCircBig {
  width: 80px;
  overflow: hidden;
  border-radius:50%;
  cursor: pointer;
  background: #1c1c1c;
}
.fdCircBig img {
  width: 100%;
}

.f_wrap {
  padding: 20px;
  background: #282828;
  margin-top: 20px;
}

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

.rqBlk {
  margin-bottom: 20px;
}
.rqWrap {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  padding: 10px 20px;
  background: #2b2b2b;
  margin-bottom: 1px;
}
.rqInfo {
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.rqWrap:nth-child(even) {
  background: #333;
}
.rqImg {
  background: white;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid white;
  margin-right: 20px;
  width: 50px;
  height: 50px;
}
.rqImg img {
  width: 100%;
}
.rqName {
  font-size: 30px;
  font-family: 'bebas';
  color: #c1c1c1;
  text-decoration: none;
  transition: 0.2s all;
}

.rqUname {
  font-size: 14px;
  color: #888;
}
.rqButtons{
  margin-left: auto;
  display: flex;
  align-items: center;
}
.rqAccept {
  border: 1px solid #94bb92;
  background: #94bb92;
  color: black;
  padding: 3px 6px;
  height: 18px;
  font-size: 12px;
  display: inline-block;
  cursor: pointer;
  transition: 0.2s all;
}
.rqDeny {
  border: 1px solid #b56666;
  background: #b56666;
  color: black;
  padding: 3px 6px;
  height: 18px;
  font-size: 12px;
  display: inline-block;
  cursor: pointer;
  transition: 0.2s all;
  margin-left: 10px;
}
.rqCancel {
  border: 1px solid #aaa;
  background: #aaa;
  color: black;
  padding: 3px 6px;
  height: 18px;
  font-size: 12px;
  display: inline-block;
  cursor: pointer;
  transition: 0.2s all;
  margin-left: 10px;
}

/* Listener Awards Page */
#awardsView {
  display: flex;
  box-sizing: border-box;
  background: #2d2d2d;
  flex-direction: row;
  padding: 20px;
  flex-wrap: wrap;
}
.awardsInfo {
  box-sizing: border-box;
  font-size: 14px;
  padding: 20px;
  background: #262626;
  border-top: 1px solid #242424;
  border-bottom: 1px solid #212121;
}
.awardWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  margin-bottom: 10px;
}
a.awardWrap {
  text-decoration: none;
}
a.awardWrap:hover {
  text-decoration: underline;
}
.awImg {
  width: 60px;
}
.awImg img {
  width: 100%;
}
.awMeta {
  font-size: 10px;
}
.txtlnk {
  font-weight: bold;
  color: #58a9ff;
}
.awImgs {
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  display: flex;
  margin-top: 20px;
}
.awImgs img {
  width: 100%;
}
.awgImg {
  width: 175px;
  margin: 0 10px;
}
.la-head {
  color: #bf9769;
  font-family: 'bebas';
  text-align: center;
  font-size: 26px;
}
/******************************************/

/* Single Podcast Page */
#podcastView {
  background: #333;
  display: flex;
  flex-direction: column;
}
#podcastView a.podImg {
  display: flex;
  width: 150px;
  height: 150px;
  overflow: hidden;
  flex-shrink: 0;
}
#podcastView a.podImg img {
  width: 100%;
}
#podcastView .podcastMeta {
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0 0 0;
}
#podcastView .podcastPlay {
  font-size: 11px;
  margin: 20px 0 20px 0;
  color: white;
  transition: all 0.2s;
  cursor: pointer;
  background: #486f2d;
  padding: 5px 15px 3px 15px;
  display: inline-block;
}

#podcastView .podcastTop {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
#podcastView .podcastLikes {
  display: flex;
  padding: 0 10px 15px 10px;
  margin-top: -5px;
}

.pod_playlist_wp {
  margin: 0;
  padding: 10px;
  font-size: 13px;
  background: #2b2b2b;
  width: 100%;
  box-sizing: border-box;
}

.pod_playlist_wp:nth-child(2n) {
  background: #242424;
}

.pod_playlist_pos {
  width: 44px;
  font-size: 40px;
  font-family: 'bebas';
  color: #4a4a4a;
}
.pod_playlist_wp a {
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}

.pl_label {
  color: #7b7b7b;
}
.pod_playlist_hd {
  background: #1a1a1a;
  color: white;
  padding: 5px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 20px;
}
.pod_playlist_wp {
  display: flex;
}

#pp_display {
  margin-top: -20px;
}

#podcastView .podcastTitle {
  font-family: 'bebas', 'Arial', sans-serif;
  font-size: 30px;
}
#podcastView .podcastLikeWrap {
  display: inline-block;
  margin-left: 10px;
  position: relative;
}
#podcastView #podcastLikeBtn {
  display: block;
  position: absolute;
  top: -21px;
  font-size: 20px;
  color: grey;
  cursor: pointer;
}

#podcastView #podcastLikeBtn.liked {
  color: white!important;
}
#podcastView .podcastActions {
  display: flex;
}
#podcastView .podcastStats {
  display: flex;
  padding: 6px 0 6px 10px;
  font-size: 13px;
  border: 1px solid #6c6c6c;
  color: #c6c6c6;
}
#podcastView .podcastStats div {
  margin-right: 10px;
}
#podcastView .podcastSharer {
  display: flex;
  color: white;
  margin-left: 20px;
}
.podcastBtnWrap {
  display: flex;
  margin: 10px 0 20px 0;
}
.btn-download.singlePod,
.btn-download-mod.singlePod {
  background: #833799;
  margin: 0 0 0 20px;
  padding: 8px 15px 6px 15px;
}

a.podArtist {
  text-decoration: none;
  color:#c6c6c6;
  transition: all 0.2s;
}


.podcastLikes {
  display: flex;
  flex-wrap: wrap;
}
.userWrapper {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  text-align: center;
}
.userWrapper .userImg {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  background: #b1c4d5;
}
.userWrapper .userImg img {
  width: 100%;
}
.userWrapper .userName {
  font-size: 11px;
  margin-top: 4px;
  color: #bfbfbf;
}

.podcastArtist {
  display: inline-flex;
  text-decoration: none;
  margin-top: 5px;
  color: #acacac;
}
.podcastAvatar {
  background: white;
  border-radius: 50%;
  overflow: hidden;
  height: 25px;
  width: 25px;
}
.podcastAvatar img {
  width: 100%;
}
.podcastName {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
  font-size: 18px;
}

.pod-pos {
  background: #262626;
  padding: 5px;
  text-align: center;
  font-size: 14px;
  margin-bottom: 20px;
}

/* LIKES */
.flip-container {
	perspective: 1000px;
  margin: 5px;
}

.flip-container, .front, .back {
	width: 75px;
  height: 75px;
}

.flip-container img {
  width: 100%;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
  left: 0;
  border-radius: 50%;
  overflow: hidden;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	background: #e1e1e1;
  transform: rotateY(0deg);
  box-shadow: 1px 1px 1px transparent;
}

/* back, initially hidden pane */
.back {
  display: flex;
  transform: rotateY(180deg);
  background: #151515;
  color: #868686;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 11px;
  padding: 0 3px;
  box-sizing: border-box;
  font-weight: 700;
  box-shadow: 1px 1px 1px #4f4f4f;
}

.back a {
  text-decoration: none;
  color: #868686;
  font-size: 11px;
  transition: all 0.2s;
}

/******************************************/

#p-meta {
  display: none;
}

/* DJ Page Mini Podcast */
.mini {
  background: #282828!important;
}
.mini .podcastBtnWrap {
  margin: 23px 0 26px 0!important;
}
.podcastHead,
.awardsHead,
.eventsHead,
.releasesHead {
  text-align : center;
  text-transform: uppercase;
  font-size: 14px;
  background: #333;
  color: #999;
  padding: 5px 0;
  margin: 20px 0 0 0;
}
.mini a.podImg {
  width: 145px!important;
  height: 145px!important;
}
.mini .podcastTitle {
  font-size: 26px!important
}
/******************************************/

.disab {
  padding: 50px 20px;
  text-align: center;
}

.disab img {
  width: 80%;
}

/* Podcast Single Stats */
#stats {
  display: none;
}
.statsWrapper {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin: 0 20px 20px 20px;
}
.statsHeader {
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 20px;
  padding: 5px 0;
  font-size: 14px;
  background: #1a1a1a;
}
.statsWrapper .statsItem {
  display: flex;
}
.statsWrapper canvas {
  width: 200px;
  height: 200px;
  opacity: 1;
  margin-top: 0;
}
.statsWrapper #leg1,
.statsWrapper #leg2,
.statsWrapper #leg5 {
  margin-left: 20px;
  font-size: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.statsWrapper .leg-item {
  margin-bottom: 4px;
}
#statsOverview {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  font-size: 14px;
  padding: 0 20px;
}
#statsOverview .img {
  width: 200px;
  overflow: hidden;
  margin: -35px 20px -20px 0;
}
#statsOverview .img img {
  width: 100%;
}
#statsOverview .sexyWrap {
  display: flex;
  border: 2px solid #c1c1c1;
  overflow: hidden;
  margin-bottom: 5px;
  width: 195px;
}
#statsOverview .sexyWrap .swlegend {
  width: 110px;
  background: #c1c1c1;
  color: #333;
  overflow: hidden;
  padding: 3px;
  font-family: 'bebas', 'Arial', sans-serif;
  font-size: 18px;
}
#statsOverview .sexyWrap .data {
  width: 80px;
  background: none;
  color: #e8e8e8;
  padding: 3px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
}
canvas#plays_bycountry,
canvas#downloads_bycountry {
  width: 100%;
  display: block;
  height: 200px;
  opacity: 1;
  margin-top: 0;
  box-sizing: border-box;
}
.statsItem.flexcol {
  flex-direction: column;
  width: 100%;
}
.statsItem #leg3,
.statsItem #leg4 {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
}
.btn-stats {
  display: inline-block;
  margin: 0 0 0 20px;
  padding: 8px 15px 6px 15px;
  font-size: 11px;
  font-weight: normal;
  background: #a6343f;
}

.statsWrapper.st-center {
  justify-content: center;
}
canvas#st_byhours,
canvas#st_bydays {
  width:500px;
  height: 500px;
  opacity: 1;
  margin-top: 0;
}
.statsItem.ustats {
  min-width: 360px;
  flex-shrink: 0;
}
.statsItem #ustats-info {
  font-size: 14px;
}
/******************************************/

/* Loader Overlay */
#loaderOverlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.7);
}

.loaderOverlay-content {
  position: relative;
  top: 40%;
  width: 100%;
  text-align: center;
}

.loaderOverlay-content img {
  -webkit-animation:spin 1.4s linear infinite;
  -moz-animation:spin 1.4s linear infinite;
  animation:spin 1.4s linear infinite;
}

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

/* DJCP */
.djcp {
  margin-right: 2px!important;
  margin-left: 0px!important;
}
.noPad {
  margin-left:0!important;
  margin-right: 0!important;
}
.cp_head {
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
}
.brick {
  background: #282828;
  margin-bottom: 2px;
  padding: 10px 0 8px 0;
  color: #f9f9f9;
  font-size: 14px;
}
.brickslab {
  background: #282828;
  margin: 2px 0;
  padding: 10px 0 8px 0;
  color: #f9f9f9;
  font-size: 14px;
}
.cp_info {
  text-align: center;
  font-size: 13px;
  color: #848484;
  padding-bottom: 20px;
}
.bpad10 {
  margin-bottom: 10px;
}
.bpad20 {
  margin-bottom: 20px;
}
.big-btn {
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  background: #282828;
  padding: 20px 20px 15px 20px;
  font-family: 'Abel', sans-serif;
  font-size: 14px;
  margin-bottom: 2px;
  transition: 0.2s all;
}

.big-btn-yt {
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  background: #383838;
  padding: 20px 20px 15px 20px;
  font-family: 'Abel', sans-serif;
  font-size: 14px;
  margin-bottom: 2px;
  transition: 0.2s all;
  width: 100%;
  display: block;
  box-sizing: border-box;
  text-decoration: none;
}
.big-btn-yt:hover {
  background: rgb(167, 71, 71);
}

.warn {
  color: #e1a564!important;
}

.ePodPlWrap {
  background: #282828;
  padding: 1px 20px 20px 20px;
}

.ePodDateWrap {
  background: #282828;
  padding: 1px 20px 20px 20px;
}
.pdeWrap {
  display: flex;
}
.btn.eDate {
  padding: 5px 15px;
  font-size: 13px;
  margin-left:20px;
}
.btn.eMixcloud {
  padding: 5px 15px;
  font-size: 13px;
  text-align: center;
  display: inline;
}

.pdeWrap input[type=text] {
  width: 100%;
  padding: 8px 15px;
  margin: 8px 0;
  box-sizing: border-box;
}


.ePodInfoBlk {
  font-size: 14px;
  color: #cacaca;
}

.pp_due_wrap {
  width: 100%;
  border: 1px solid #b9b9b9;
  padding: 10px 10px 20px 10px;
  box-sizing: border-box;
}
.cp_info {
  margin-top: 10px;
  text-align: center;
  color: #ee9063;
  font-size: 12px;
}
.cp_info_white {
  margin-top: 10px;
  text-align: center;
  color: white;
  font-size: 13px;
}
.cp_info_red {
  margin: 10px 0;
  text-align: center;
  font-weight: bold;
  color: #ee6363;
  font-size: 14px;
}
.pp_pay {
  width: 100%;
  text-align: center;
}

.subpodmsg {
  background: white;
  color: #242424;
  padding: 10px;
  margin-top: 10px;
}

.subpodmsg h4 {
  text-align: center;
}

.subpodmsg p {
  color: #444;
}

.subpodmsg a {
  color: #1e53c8;
}

.subpodmsg a:hover {
  color: #0a3289;
}

.sb_overlay {
    margin-top: 20px;
    display: flex;
    flex-direction: row;

}
.sb_overlay div {
    width: 300px;
    cursor: pointer;
}

.djcpbutt {
    width: 100%;
    margin-bottom: 10px;
}
.djcpbutt img {
    width: 100%;
}


/* SHOUTBOX */
/* apply this with js to body tag when shoutbox is full screen */
.background_lock {
  height: 100%!important;
  overflow-y: hidden!important;
}
/************************************************************* */
#shoutbox {
  position: fixed;
  bottom:0;
  right: 0;
  top: 103px;
  width: 100%;
  height: calc(100vh - 90px);
  background: #202020;
  box-sizing: border-box;
  margin-bottom: 90px;
}

/* Mini Shoutbox */
#shoutbox.mini {
  right: 30px;
  width: 370px;
  height: auto;
}

/* Mini Shoutbox */

.shoutbox-wrap {
  position: relative;
  display: flex;
  box-sizing: border-box;
  -webkit-flex-direction: column;
  flex-direction: column;
  transition: width .2s,height .2s;
}
.shoutbox-header {
  display: flex;
  padding: 7px 30px 5px 30px;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
}
.shoutbox-icon {
  font-size: 15px;
  cursor: pointer;
}
.shoutbox-title {
  margin-top: 2px;
}
#sbClose {
  font-size: 18px;
  margin-top: -2px;
  cursor: pointer;
}
.shoutbox-info {
  background:#fff;
  width: 100%;
  height: 30px;
  padding: 0;
  font-size: 13px;
  border-bottom: 1px solid #aaa;
  color: #6c6c6c;
  display: flex;
  box-sizing: border-box;
}
#sbmeta_o {
  color: #76bb7a;
  border-right: 1px solid #aaa;
  padding: 5px 10px;
  font-size: 14px;
  cursor: pointer;
}

#sbsort_o {
    color:rgb(152, 152, 152);
    border-right: 1px solid #000000;
    padding: 5px;
    font-size: 14px;
    cursor: pointer;
    display: none;
    transition: all 0.2s;
}

#sbsort_o:hover {
    color:white;
}

#sbmeta_l {
  padding: 6px 10px 0 10px;
}
#sbmeta {
  margin-left: 10px;
}
#sbmeta_r {
  color: #ff8686;
  border-left: 1px solid #aaa;
  padding: 5px 10px;
  font-size: 14px;
}
#loveCount {
  color: grey;
  margin-right: 5px;
}
#userCount {
  color: grey;
  margin-left: 5px;
  pointer-events: none;
}
#scrollBtnWrap {
  margin-left: auto;
  border-left: 1px solid #aaa;
  padding: 5px 8px;
}
#sbScroll-btn {
  border: 1px solid #aaa;
  font-size: 10px;
  padding: 1px 3px;
  background: white;
  cursor: pointer;
}
.sbsca {
  background: #e86767!important;
  border: 1px solid #e86767!important;
  color: white!important;
}

.shoutbox-content-wrap {
  position: relative;
  display: block;
  box-sizing: border-box;
  display: flex; 
  /* flex-direction: column; */
}
#shoutbox-content {
  background: #fff;
  color: #050505;
  overflow-y: auto;
  box-sizing: border-box;
  position: relative; 
  height: calc(100vh - 313px);
  width: 100%;
}
.shoutbox-msg {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  padding: 5px 10px;
  font-size: 14px;
  box-sizing: border-box;
  border-top: 1px solid #e1e1e1;
  color: #575757;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.shoutbox-avatar,
.shoutbox-avatar-love {
  width: 30px;
  min-width: 30px;
  height: 30px;
  overflow: hidden;
  cursor: copy;
  box-sizing: border-box;
  border-radius: 50%;
  margin-top: 5px;
  background: #e1e1e1;
}
.shoutbox-avatar-love {
  cursor: auto;
}
.shoutbox-right {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  flex-grow: 1;
  box-sizing: border-box;
}
.shoutbox-meta {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}
.shoutbox-name {
  font-weight: 700;
  font-size: 13px;
  box-sizing: border-box;
}
.shoutbox-name a {
  color: #282828;
  text-decoration: none;
}

.shoutbox-time {
  font-size: 10px;
  margin: 3px 0 0 auto;
  color: #656565;
  box-sizing: border-box;
}
.shoutbox-text {
  font-size: 13px;
  margin-top: 2px;
  line-height: 1.3em;
  word-wrap: break-word;
  box-sizing: border-box;
  padding-bottom: 5px;
  /* overflow-wrap: break-word; */
  word-break: break-all;
}
.shoutbox-text a {
  color: #4270b9;
  text-decoration: none;
}

.shoutbox-text img {
  width: 20%;
}
.shoutbox-text.mentioned {
  color: #288a1a !important;
  font-weight: bold!important;
}
.shoutbox-isTyping {
  font-size: 10px;
  text-align: center;
  padding: 3px 0;
  height: 18px;
  background: #fff;
  color:#313131;
  border-top: 1px solid #bbb;
  box-sizing: border-box;
}
.shoutbox-footer {
  display: flex;
  position: fixed;
  border-top: 1px solid #b5b5b5;
  width: 100%;
  /* height: 59px; */
  height: 89px;
  box-sizing: border-box;
  bottom: 0;
}
.emoji-btn-wrap {
  background: #fff;
  box-sizing: border-box;
}
.emoji-btn, .giphy-btn, .animate-btn {
  border: none;
  /* font-size: 13px; */
  font-size: 21px;
  color: #969696;
  margin-top: 2px;
  cursor: pointer;
  transition: .2s;
  box-sizing: border-box;
  padding: 0 10px;
}
.shoutbox-input {
  display: flex;
  width: 100%;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  position: relative;
  background: #fff;
  box-sizing: border-box;
}
.shoutbox-input textarea {
  padding: 5px;
  width: 100%;
  outline: none;
  border: none;
  resize: none;
  font-size: 13px;
  box-sizing: border-box;
  font-family: Arial;
}

.shoutbox-extra {
  background: white;
  display: flex;
  height: 100%;
  padding-right: 5px;
  align-items:  right;
  justify-content: right;
  box-sizing: border-box;
  margin-left: auto;
}

/* .pb-left {
  margin-left: 5px;
} */

.pb-left {
  margin-left: 5px;
  padding: 0;
  display: flex;
}

.love-btn {
  border: none;
  font-size: 30px;
  color: #969696;
  cursor: pointer;
  transition: all .2s;
  box-sizing: border-box;
  background: none;
  transition: all 0.2s;
  padding: 0;
  margin-right: 10px;
}


.love-btn.nolove {
  color: #323232;
}

.bomb-btn,
.bomb-btn-na {
  border: none;
  font-size: 26px;
  color: #969696;
  cursor: pointer;
  transition: all .2s;
  box-sizing: border-box;
  background: none;
  transition: all 0.2s;
  padding: 0;
  margin-right: 10px;
}


.bomb-btn.nolove {
  color: #323232;
}

.bomb-btn:hover {
color: #a076df;
}

.bomb-btn-na:hover {
  color: #626262;
}

.send-btn,
.send-btn-na {
  border: none;
  font-size: 28px;
  color: #969696;
  cursor: pointer;
  box-sizing: border-box;
  background: none;
  transition: all 0.2s;
  padding: 0;
}


.send-btn.nolove {
  color: #323232;
}

.send-btn:hover {
color: #499ec7;
}

.send-btn-na:hover {
  color: #626262;
}

#particle-box,
#particle-box2,
#particle-box3 {
  position: absolute;
  width: 50px;
  height: 50px;
  z-index:2;
  bottom: 0;
  right: 30px;
  display: none;
}

#particle-box4,
#particle-box5,
#particle-box6 {
  position: absolute;
  width: 25px;
  height: 25px;
  z-index:2;
  bottom: 50%;
  right: 50%;
  display: none;
}

#particle-box-panties {
  position: absolute;
  width: 385px;
  height: 306px;
  z-index:2;
  bottom: 30%;
  right: 40%;
  display: none;
}

#particle-box-banger {
  position: absolute;
  width: 300px;
  height: 204px;
  z-index:2;
  bottom: 30%;
  right: 40%;
  display: none;
}

#particle-box13 {
  position: absolute;
  width: 111px;
  height: 350px;
  z-index:2;
  bottom: 30%;
  right: 40%;
  display: none;
}

#particle-box-sausage {
  position: absolute;
  width: 238px;
  height: 275px;
  z-index:2;
  bottom: 30%;
  right: 40%;
  display: none;
}

#particle-box-fire {
  position: absolute;
  width: 350px;
  height: 249px;
  z-index:2;
  bottom: 30%;
  right: 40%;
  display: none;
}

#particle-box-plunger {
  position: absolute;
  width: 219px;
  height: 250px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-incoming {
  position: absolute;
  width: 350px;
  height: 306px;
  z-index:2;
  bottom: 30%;
  right: 50%;
  display: none;
}

#particle-box-tuna {
  position: absolute;
  width: 207px;
  height: 300px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-tune {
  position: absolute;
  width: 300px;
  height: 249px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-oldschool {
  position: absolute;
  width: 350px;
  height: 222px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-pirate {
  position: absolute;
  width: 300px;
  height: 285px;
  z-index:2;
  bottom: 40%;
  right: 60%;
  display: none;
}

#particle-box-oioi {
  position: absolute;
  width: 350px;
  height: 350px;
  z-index:2;
  bottom: 40%;
  right: 60%;
  display: none;
}

#particle-box-diver {
  position: absolute;
  width: 300px;
  height: 243px;
  z-index:2;
  bottom: 40%;
  right: 60%;
  display: none;
}

#particle-box-wicked {
  position: absolute;
  width: 400px;
  height: 260px;
  z-index:2;
  bottom: 40%;
  right: 60%;
  display: none;
}

#particle-box-dollar {
  position: absolute;
  width: 300px;
  height: 323px;
  z-index:2;
  bottom: 30%;
  right: 70%;
  display: none;
}

#particle-box-clap {
  position: absolute;
  width: 300px;
  height: 291px;
  z-index:2;
  bottom: 30%;
  right: 70%;
  display: none;
}

#particle-box-bells {
  position: absolute;
  width: 350px;
  height: 330px;
  z-index:2;
  bottom: 30%;
  right: 70%;
  display: none;
}

#particle-box-smurf {
  position: absolute;
  width: 300px;
  height: 260px;
  z-index:2;
  bottom: 30%;
  right: 70%;
  display: none;
}

#particle-box-cowbell {
  position: absolute;
  width: 300px;
  height: 264px;
  z-index:2;
  bottom: 30%;
  right: 70%;
  display: none;
}

#particle-box-oosh {
  position: absolute;
  -webkit-transform: translateZ(0);
  width: 400px;
  height: 145px;
  z-index:2;
  bottom: 30%;
  left: 40%;
  display: none;
}

#particle-box-riddim {
  position: absolute;
  width: 335px;
  height: 174px;
  z-index:2;
  bottom: 30%;
  right: 70%;
  display: none;
}

#particle-box-chestnuts {
  position: absolute;
  width: 400px;
  height: 298px;
  z-index:2;
  bottom: 30%;
  right: 80%;
  display: none;
}

#particle-box-club {
  position: absolute;
  width: 286px;
  height: 110px;
  z-index:2;
  bottom: 30%;
  right: 70%;
  display: none;
}

#particle-box-balls {
  position: absolute;
  width: 350px;
  height: 396px;
  z-index:2;
  bottom: 30%;
  right: 70%;
  display: none;
}

#particle-box-hipster {
  position: absolute;
  width: 300px;
  height: 278px;
  z-index:2;
  bottom: 30%;
  right: 60%;
  display: none;
}

#particle-box-shots {
  position: absolute;
  width: 302px;
  height: 374px;
  z-index:2;
  bottom: 30%;
  right: 60%;
  display: none;
}

#particle-box-wine {
  position: absolute;
  width: 302px;
  height: 350px;
  z-index:2;
  bottom: 30%;
  right: 60%;
  display: none;
}

#particle-box-ride {
  position: absolute;
  width: 300px;
  height: 350px;
  z-index:2;
  bottom: 30%;
  right: 60%;
  display: none;
}

#particle-box-rewind {
  position: absolute;
  width: 229px;
  height: 300px;
  z-index:2;
  bottom: 30%;
  right: 60%;
  display: none;
}

#particle-box-matron {
  position: absolute;
  width: 350px;
  height: 254px;
  z-index:2;
  bottom: 30%;
  left: 30%;
  display: none;
}

#particle-box-lurkers {
  position: absolute;
  width: 300px;
  height: 326px;
  z-index:2;
  bottom: 30%;
  right: 40%;
  display: none;
}

#particle-box-jacko {
  position: absolute;
  width: 297px;
  height: 338px;
  z-index:2;
  bottom: 30%;
  right: 60%;
  display: none;
}

#particle-box-bounce {
  position: absolute;
  width: 314px;
  height: 350px;
  z-index:2;
  bottom: 30%;
  left: 50%;
  display: none;
}

#particle-box-popeye {
  position: absolute;
  width: 287px;
  height: 249px;
  z-index:2;
  bottom: 30%;
  left: 50%;
  display: none;
}

#particle-box-nawtie {
  position: absolute;
  width: 350px;
  height: 255px;
  z-index:2;
  bottom: 30%;
  right: 60%;
  display: none;
}

#particle-box-newyear {
  position: absolute;
  width: 350px;
  height: 211px;
  z-index:2;
  bottom: 30%;
  right: 60%;
  display: none;
}

#particle-box-santa {
  position: absolute;
  width: 350px;
  height: 203px;
  z-index:2;
  bottom: 30%;
  right: 60%;
  display: none;
}

#particle-box-rolling {
  position: absolute;
  width: 350px;
  height: 302px;
  z-index:2;
  bottom: 30%;
  right: 60%;
  display: none;
}

#particle-box-peach {
  position: absolute;
  width: 300px;
  height: 324px;
  z-index:2;
  bottom: 30%;
  right: 60%;
  display: none;
}

#particle-box-percy {
  position: absolute;
  width: 300px;
  height: 436px;
  z-index:2;
  bottom: 30%;
  right: 70%;
  display: none;
}

#particle-box-abster {
  position: absolute;
  width: 300px;
  height: 300px;
  z-index:2;
  bottom: 30%;
  right: 80%;
  display: none;
}

#particle-box-elf {
  position: absolute;
  width: 251px;
  height: 398px;
  z-index:2;
  bottom: 30%;
  right: 80%;
  display: none;
}

#particle-box-bear {
  position: absolute;
  width: 276px;
  height: 350px;
  z-index:2;
  bottom: 30%;
  right: 70%;
  display: none;
}

#particle-box-chong {
  position: absolute;
  width: 350px;
  height: 306px;
  z-index:2;
  bottom: 30%;
  right: 70%;
  display: none;
}

#particle-box-outta {
  position: absolute;
  width: 350px;
  height: 350px;
  z-index:2;
  bottom: 30%;
  right: 70%;
  display: none;
}

#particle-box-smashing {
  position: absolute;
  width: 349px;
  height: 350px;
  z-index:2;
  bottom: 30%;
  right: 70%;
  display: none;
}

#particle-box-guetta {
  position: absolute;
  width: 248px;
  height: 188px;
  z-index:2;
  bottom: 40%;
  right: 60%;
  display: none;
}

#particle-box-chef {
  position: absolute;
  width: 355px;
  height: 355px;
  z-index:2;
  bottom: 30%;
  right: 60%;
  display: none;
}

#particle-box-greenlight {
  position: absolute;
  width: 306px;
  height: 360px;
  z-index:2;
  bottom: 30%;
  right: 60%;
  display: none;
}

#particle-box-vibe {
  position: absolute;
  width: 350px;
  height: 392px;
  z-index:2;
  bottom: 30%;
  right: 60%;
  display: none;
}

#particle-box-sample {
  position: absolute;
  width: 325px;
  height: 351px;
  z-index:2;
  bottom: 30%;
  right: 60%;
  display: none;
}


#particle-box-bass {
  position: absolute;
  width: 250px;
  height: 275px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-daddy {
  position: absolute;
  width: 245px;
  height: 350px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-jam {
  position: absolute;
  width: 213px;
  height: 300px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-firetruck {
  position: absolute;
  width: 200px;
  height: 65px;
  z-index:2;
  bottom: 20%;
  left: 0%;
  display: none;
}

#particle-box-digger {
  position: absolute;
  width: 200px;
  height: 110px;
  z-index:2;
  bottom: 20%;
  left: 0%;
  display: none;
}

#particle-box-taxi {
  position: absolute;
  width: 215px;
  height: 101px;
  z-index:2;
  bottom: 20%;
  left: 0%;
  display: none;
}

#particle-box-piggy {
  position: absolute;
  width: 320px;
  height: 180px;
  z-index:2;
  bottom: 20%;
  left: 0%;
  display: none;
}

#particle-box-pacman {
  position: absolute;
  width: 150px;
  height: 150px;
  z-index:2;
  bottom: 20%;
  left: 0%;
  display: none;
}


#particle-box-police {
  position: absolute;
  width: 200px;
  height: 100px;
  z-index:2;
  bottom: 20%;
  right: 0%;
  display: none;
}

#particle-box-delorean {
  position: absolute;
  width: 287px;
  height: 108px;
  z-index:2;
  bottom: 20%;
  right: 0%;
  display: none;
}

#particle-box-peperami {
  position: absolute;
  width: 160px;
  height: 216px;
  z-index:2;
  bottom: 20%;
  right: 0%;
  display: none;
}

#particle-box-runningman {
  position: absolute;
  width: 310px;
  height: 480px;
  z-index:2;
  bottom: 20%;
  right: 0%;
  display: none;
}

#particle-box-wrigglin {
  position: absolute;
  width: 500px;
  height: 219px;
  z-index:2;
  bottom: 20%;
  right: 0%;
  display: none;
}

#particle-box-banana {
  position: absolute;
  width: 365px;
  height: 360px;
  z-index:2;
  bottom: 20%;
  right: 0%;
  display: none;
}

#particle-box-icecream {
  position: absolute;
  width: 200px;
  height: 173px;
  z-index:2;
  bottom: 20%;
  right: 0%;
  display: none;
}

#particle-box-oldies {
  position: absolute;
  width: 234px;
  height: 250px;
  z-index:2;
  bottom: 20%;
  right: 0%;
  display: none;
}

#particle-box-bus {
  position: absolute;
  width: 300px;
  height: 156px;
  z-index:2;
  bottom: 20%;
  right: 0%;
  display: none;
}

#particle-box-rocket {
  position: absolute;
  width: 71px;
  height: 200px;
  z-index:2;
  bottom: 20%;
  left: 0%;
  display: none;
}

#particle-box-rockin {
  position: absolute;
  width: 375px;
  height: 285px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-proper {
  position: absolute;
  width: 350px;
  height: 200px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-dope {
  position: absolute;
  width: 250px;
  height: 282px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-shape1 {
  position: absolute;
  width: 250px;
  height: 216px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-shape2 {
  position: absolute;
  width: 250px;
  height: 216px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-shape3 {
  position: absolute;
  width: 209px;
  height: 209px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-street1 {
  position: absolute;
  width: 400px;
  height: 190px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-street2 {
  position: absolute;
  width: 391px;
  height: 345px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-street3 {
  position: absolute;
  width: 400px;
  height: 154px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-beer {
  position: absolute;
  width: 343px;
  height: 400px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-stuffing {
  position: absolute;
  width: 300px;
  height: 239px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-cake {
  position: absolute;
  width: 309px;
  height: 350px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-alien {
  position: absolute;
  width: 303px;
  height: 350px;
  z-index:2;
  bottom: 40%;
  left: 40%;
  display: none;
}

#particle-box-drop {
  position: absolute;
  width: 190px;
  height: 350px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-bee {
  position: absolute;
  width: 350px;
  height: 249px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-bullseye {
  position: absolute;
  width: 350px;
  height: 350px;
  z-index:2;
  bottom: 20%;
  left: 30%;
  display: none;
}

#particle-box-d3ep {
  position: absolute;
  width: 300px;
  height: 300px;
  z-index:2;
  bottom: 20%;
  left: 30%;
  display: none;
}

#particle-box-bassface {
  position: absolute;
  width: 291px;
  height: 339px;
  z-index:2;
  bottom: 20%;
  left: 30%;
  display: none;
}

#particle-box-eddie {
  position: absolute;
  width: 221px;
  height: 350px;
  z-index:2;
  bottom: 20%;
  left: 30%;
  display: none;
}

#particle-box-completed {
  position: absolute;
  width: 340px;
  height: 350px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-sublime {
  position: absolute;
  width: 350px;
  height: 297px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-serious {
  position: absolute;
  width: 320px;
  height: 320px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-mix {
  position: absolute;
  width: 350px;
  height: 275px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particle-box-bullet {
  position: absolute;
  width: 350px;
  height: 218px;
  z-index:2;
  bottom: 40%;
  right: 50%;
  display: none;
}

#particlePanties,
#particle8,
#particle9,
#particleBanger,
#particle13,
#particleSausage,
#particlePlunger,
#particleIncoming,
#particleTuna,
#particleTune,
#particleOldschool,
#particlePirate,
#particleOioi,
#particleBass,
#particleDaddy,
#particleJam,
#particleFiretruck,
#particleDigger,
#particleTaxi,
#particle
#particlePiggy,
#particlePacman,
#particlePolice,
#particleDelorean,
#particlePeperami,
#particleRunningman,
#particleWrigglin,
#particleBanana,
#particleIcecream,
#particleOldies,
#particleBus,
#particleRocket,
#particleProper
#particleShape1,
#particleShape2,
#particleShape3,
#particleStreet1,
#particleStreet2,
#particleStreet3,
#particleBeer,
#particleStuffing,
#particleCake,
#particleDiver,
#particleWicked,
#particleDollar,
#particleClap,
#particleBells,
#particleSmurf,
#particleCowbell,
#particleOosh,
#particleRiddim,
#particleChestnuts,
#particleClub,
#particleBalls,
#particleHipster,
#particleShots,
#particleRide,
#particleRewind,
#particleMatron,
#particleLurkers,
#particleJacko,
#particleBounce,
#particlePopeye,
#particleNawtie,
#particleNewyear,
#particleSanta,
#particleRolling,
#particlePeach,
#particlePercy,
#particleAbster,
#particleElf,
#particleBear,
#particleChong,
#particleSmashing,
#particleGuetta,
#particleChef,
#particleOutta,
#particleGreenlight,
#particleVibe,
#particleSample,
#particleBee,
#particleDrop,
#particleFire,
#particleBullseye,
#particleD3ep,
#particleBassface,
#particleEddie,
#particleAlien,
#particleCompleted,
#particleSublime,
#ParticleSerious,
#ParticleBullet,
#ParticleMix,
#ParticleDope,
#ParticleWine,
#ParticleRockin {
  width:100%; 
  opacity: 1;
  overflow: hidden;
  position: relative;
  top: 0;
}

#particlePanties img,
#particle8 img,
#particle9 img,
#particleBanger img,
#particle13 img,
#particleSausage img,
#particlePlunger img,
#particleIncoming img,
#particleTuna img,
#particleTune img,
#particleOldschool img,
#particlePirate img,
#particleOioi img,
#particleBass img,
#particleDaddy img,
#particleJam img,
#particleFiretruck img,
#particleDigger img,
#particleTaxi img,
#particlePiggy img,
#particlePacman img,
#particlePolice img,
#particleDelorean img,
#particlePeperami img,
#particleRunningman img,
#particleWrigglin img,
#particleBanana img,
#particleIcecream img,
#particleOldies img,
#particleBus img,
#particleRocket img,
#particleProper img,
#particleShape1 img,
#particleShape2 img,
#particleShape3 img,
#particleStreet1 img,
#particleStreet2 img,
#particleStreet3 img,
#particleBeer img,
#particleStuffing img,
#particleCake img,
#particleDiver img,
#particleWicked img,
#particleDollar img,
#particleClap img,
#particleBells img,
#particleSmurf img,
#particleCowbell img,
#particleOosh img,
#particleRiddim img,
#particleChestnuts img,
#particleClub img,
#particleBalls img,
#particleHipster img,
#particleShots img,
#particleRide img,
#particleRewind img,
#particleMatron img,
#particleLurkers img,
#particleJacko img,
#particleBounce img,
#particlePopeye img,
#particleNawtie img,
#particleNewyear img,
#particleSanta img,
#particleGuetta img,
#particleChef img,
#particleGreenlight img,
#particleVibe img,
#particleSample img,
#particleRolling img,
#particlePeach img,
#particlePercy img,
#particleAbster img,
#particleElf img,
#particleBear img,
#particleChong img,
#particleOutta img,
#particleSmashing img,
#particleBee img,
#particleDrop img,
#particleFire img,
#particleBullseye img,
#particleD3ep img,
#particleBassface img,
#particleEddie img,
#particleAlien img,
#particleCompleted img,
#particleSublime img,
#particleSerious img,
#particleBullet img,
#particleMix img,
#particleDope img,
#particleWine img,
#particleRockin img {
  width: 100%;
}

#particle,
#particle2,
#particle3 {
    width: 30px; 
    height: 30px; 
    opacity: 1;
    position: relative;
    bottom: 115px;
}

#particle4,
#particle5,
#particle6 {
  width: 25px; 
  height: 25px; 
  opacity: 1;
  position: relative;
  top: 0;
}

#particle i,
#particle2 i,
#particle3 i {
    position: relative;
    right: 0px;
    opacity: 0.8;
    color: red;
}

#particle4 i,
#particle5 i,
#particle6 i {
  position: relative;
  opacity: 0.8;
  color: #a076df;
}

#particle i.fa-heart-o,
#particle2 i.fa-heart-o,
#particle3 i.fa-heart-o {
    z-index: 2;
    opacity: 1;
    color: red;
}

#particle4 i.fa-bomb-o,
#particle5 i.fa-bomb-o,
#particle6 i.fa-bomb-o {
  z-index: 2;
  opacity: 1;
  color: rgb(255, 157, 0);
}

@keyframes flow {
  0% {
    opacity: 0.2;
    bottom: 0%;
    right: 0%;
  }

  10% {
    opacity: 0.5;
    right: 10%;
    bottom: 20%;
    font-size: 150px;
  }
   
  30% {
    opacity: 1;
    right: 13%;
    bottom: 30%;
    font-size: 30px;
  }
  
  40% {
    font-size: 10px;
    opacity: 0.8;
    right: 15%;
    bottom: 40%;
  }

  50% {
    font-size: 30px;
    opacity: 0.7;
    right: 20%;
    bottom: 50%;
  }
  
  
  60% {
    opacity: 0.5;
    bottom: 60%;
    right: 16%;
    font-size: 20px;
  }
  
  80% {
    font-size: 10px;
    opacity: 0.3;
    right: 19%;
    bottom: 70%;
  }
 
  100% {
    opacity: 0;
    bottom: 80%;
    right: 20%;
  }
}

@keyframes bomb {
  0% {
    opacity: 0.3;
    font-size: 275px;
    right: 60%;
    bottom: 50%;
  }

  1% {
    opacity: 1;
    font-size: 275px;
    right: 60%;
  }

  /* 90% {
    opacity: 0.5;
  } */
 
  100% {
    opacity: 0;
    font-size: 30px;
    bottom: 100%;
    right: 50%;
  }
}

@keyframes anm_tuna {
  0% {
    opacity: 1;
    right: 60%;
    bottom: 20%;
  }

  50% {
    opacity: 1;
    right: 60%;
  }
 
  100% {
    opacity: 0;
    bottom: 30%;
    width: 30px;
    right: 60%;
    rotate: 50deg;
  }
}

@keyframes anm_alien {
  0% {
    opacity: 1;
    left: 40%;
    bottom: 20%;
  }

  50% {
    opacity: 1;
    left: 40%;
  }
 
  100% {
    opacity: 0;
    bottom: 30%;
    width: 30px;
    left: 40%;
    rotate: 50deg;
  }
}

@keyframes anm_tune {
  0% {
    opacity: 1;
    right: 60%;
    bottom: 20%;
  }

  50% {
    opacity: 1;
    right: 60%;
  }
 
  100% {
    opacity: 0;
    bottom: 30%;
    width: 30px;
    right: 60%;
    rotate: 50deg;
  }
}

@keyframes anm_oldschool {
  0% {
    opacity: 1;
    right: 60%;
    bottom: 20%;
  }

  50% {
    opacity: 1;
    right: 60%;
  }
 
  100% {
    opacity: 0;
    bottom: 30%;
    width: 30px;
    right: 60%;
    rotate: 50deg;
  }
}

@keyframes anm_dope {
  0% {
    opacity: 1;
    right: 60%;
    bottom: 20%;
  }

  50% {
    opacity: 1;
    right: 60%;
  }
 
  100% {
    opacity: 0;
    bottom: 30%;
    width: 30px;
    right: 60%;
    rotate: 50deg;
  }
}

@keyframes anm_pirate {
  0% {
    opacity: 1;
    right: 60%;
    bottom: 20%;
  }

  50% {
    opacity: 1;
    right: 60%;
  }
 
  100% {
    opacity: 0;
    bottom: 30%;
    width: 20px;
    right: 60%;
    rotate: -70deg;
  }
}

@keyframes anm_oioi {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 30%;
    width: 276px;
  }

  50% {
    opacity: 1;
    right: 70%;
  }
 
  100% {
    opacity: 0;
    bottom: 30%;
    width: 10px;
    right: 70%;
  }
}

@keyframes anm_bass {
  0% {
    opacity: 1;
    bottom: 20%;
    right: 60%;
  }

  10% {
    rotate: -5deg;
  }

  20% {
    rotate: 0deg;
  }

  30% {
    opacity: 1;
    rotate: 5deg;
  }

  40% {
    opacity: 1;
    rotate: 0deg;
  }

  50% {
    opacity: 1;
    rotate: -10deg;
  }

  60% {
    opacity: 1;
    rotate: 0deg;
  }

  70% {
    opacity: 1;
    rotate: 10deg;
  }

  80% {
    rotate: 0deg;
  }

  90% {
    opacity: 0.5;
    rotate: -10deg;
  }
 
  100% {
    opacity: 0;
    bottom: 20%;
    width: 20px;
    rotate: 0deg;
    right: 60%;
  }
}

@keyframes anm_firetruck {
  0% {
    opacity: 1;
    bottom: 20%;
    left: 0;
  }
 
  100% {
    opacity: 1;
    bottom: 20%;
    left: calc(100% - 10px);
  }
}

@keyframes anm_digger {
  0% {
    opacity: 1;
    bottom: 20%;
    left: 0;
  }
 
  100% {
    opacity: 1;
    bottom: 20%;
    left: calc(100% - 10px);
  }
}

@keyframes anm_taxi {
  0% {
    opacity: 1;
    bottom: 25%;
    left: 0;
  }
 
  100% {
    opacity: 1;
    bottom: 25%;
    left: calc(100% - 10px);
  }
}

@keyframes anm_piggy {
  0% {
    opacity: 1;
    width: 200px;
    bottom: 12%;
    left: 0;
  }
 
  100% {
    opacity: 1;
    width: 200px;
    bottom: 12%;
    left: calc(100% - 10px);
  }
}

@keyframes anm_pacman {
  0% {
    width: 75px;
    opacity: 1;
    bottom: 10%;
    left: 0;
  }
 
  100% {
    width: 75px;
    opacity: 1;
    bottom: 10%;
    left: calc(100% - 10px);
  }
}

@keyframes anm_rocket {
  0% {
    opacity: 1;
    bottom: 12%;
    left: 50%;
  }
 
  100% {
    opacity: 0;
    bottom: 99%;
    left: 50%
  }
}

@keyframes anm_police {
  0% {
    opacity: 1;
    bottom: 19%;
    right: 0;
  }
 
  100% {
    opacity: 1;
    bottom: 19%;
    right: calc(100% - 10px);
  }
}

@keyframes anm_delorean {
  0% {
    opacity: 1;
    bottom: 19%;
    right: 0;
  }
 
  100% {
    opacity: 1;
    bottom: 19%;
    right: calc(100% - 10px);
  }
}

@keyframes anm_icecream {
  0% {
    opacity: 1;
    width: 150px;
    bottom: 15%;
    right: 0;
  }
 
  100% {
    opacity: 1;
    width: 150px;
    bottom: 15%;
    right: calc(100% - 10px);
  }
}

@keyframes anm_oldies {
  0% {
    opacity: 1;
    width: 150px;
    bottom: 9%;
    right: 0;
  }
 
  100% {
    opacity: 1;
    width: 150px;
    bottom: 9%;
    right: calc(100% - 10px);
  }
}

@keyframes anm_bus {
  0% {
    opacity: 1;
    width: 150px;
    bottom: 11%;
    right: 0;
  }
 
  100% {
    opacity: 1;
    width: 150px;
    bottom: 11%;
    right: calc(100% - 10px);
  }
}

@keyframes anm_peperami {
  0% {
    opacity: 1;
    width: 140px;
    bottom: 16%;
    left: 0;
  }
 
  100% {
    opacity: 1;
    width: 140px;
    bottom: 16%;
    left: calc(100% - 10px);
  }
}

@keyframes anm_runningman {
  0% {
    opacity: 1;
    width: 140px;
    bottom: -10%;
    left: 0;
  }
 
  100% {
    opacity: 1;
    width: 140px;
    bottom: -10%;
    left: calc(100% - 10px);
  }
}

@keyframes anm_wrigglin {
  0% {
    opacity: 1;
    width: 200px;
    bottom: 10%;
    right: 0;
  }
 
  100% {
    opacity: 1;
    width: 200px;
    bottom: 10%;
    right: calc(100% - 10px);
  }
}

@keyframes anm_banana {
  0% {
    opacity: 1;
    width: 140px;
    bottom: -5%;
    right: 0;
  }
 
  100% {
    opacity: 1;
    width: 140px;
    bottom: -5%;
    right: calc(100% - 10px);
  }
}

@keyframes anm_daddy {
  0% {
    opacity: 1;
    bottom: 20%;
    right: 60%;
  }

  10% {
    rotate: -5deg;
  }

  20% {
    rotate: 0deg;
  }

  30% {
    opacity: 1;
    rotate: 5deg;
  }

  40% {
    opacity: 1;
    rotate: 0deg;
  }

  50% {
    opacity: 1;
    rotate: -10deg;
  }

  60% {
    opacity: 1;
    rotate: 0deg;
  }

  70% {
    opacity: 1;
    rotate: 10deg;
  }

  80% {
    rotate: 0deg;
  }

  90% {
    opacity: 0.5;
    rotate: -10deg;
  }
 
  100% {
    opacity: 0;
    bottom: 20%;
    width: 20px;
    rotate: 0deg;
    right: 60%;
  }
}

@keyframes anm_jam {
  0% {
    opacity: 1;
    bottom: 20%;
    right: 60%;
  }

  10% {
    rotate: -5deg;
  }

  20% {
    rotate: 0deg;
  }

  30% {
    opacity: 1;
    rotate: 5deg;
  }

  40% {
    opacity: 1;
    rotate: 0deg;
  }

  50% {
    opacity: 1;
    rotate: -10deg;
  }

  60% {
    opacity: 1;
    rotate: 0deg;
  }

  70% {
    opacity: 1;
    rotate: 10deg;
  }

  80% {
    rotate: 0deg;
  }

  90% {
    opacity: 0.5;
    rotate: -10deg;
  }
 
  100% {
    opacity: 0;
    bottom: 20%;
    width: 20px;
    rotate: 0deg;
    right: 60%;
  }
}

@keyframes anm_rockin {
  0% {
    opacity: 1;
    bottom: 20%;
    right: 60%;
  }

  10% {
    rotate: -5deg;
  }

  20% {
    rotate: 0deg;
  }

  30% {
    opacity: 1;
    rotate: 5deg;
  }

  40% {
    opacity: 1;
    rotate: 0deg;
  }

  50% {
    opacity: 1;
    rotate: -10deg;
  }

  60% {
    opacity: 1;
    rotate: 0deg;
  }

  70% {
    opacity: 1;
    rotate: 10deg;
  }

  80% {
    rotate: 0deg;
  }

  90% {
    opacity: 0.5;
    rotate: -10deg;
  }
 
  100% {
    opacity: 0;
    bottom: 20%;
    width: 20px;
    rotate: 0deg;
    right: 60%;
  }
}

@keyframes anm_bullseye {
  0% {
    opacity: 1;
    bottom: 20%;
    left: 30%;
  }

  10% {
    rotate: -5deg;
    bottom: 20%;
    left: 30%;
  }

  20% {
    rotate: 0deg;
    bottom: 20%;
    left: 30%;
  }

  30% {
    opacity: 1;
    rotate: 5deg;
    bottom: 20%;
    left: 30%;
  }

  40% {
    opacity: 1;
    rotate: 0deg;
    bottom: 20%;
    left: 30%;
  }

  50% {
    opacity: 1;
    rotate: -10deg;
    bottom: 20%;
    left: 30%;
  }

  60% {
    opacity: 1;
    rotate: 0deg;
    bottom: 20%;
    left: 30%;
  }

  70% {
    opacity: 1;
    rotate: 10deg;
    bottom: 20%;
    left: 30%;
  }

  80% {
    rotate: 0deg;
    bottom: 20%;
    left: 30%;
  }

  90% {
    opacity: 0.5;
    rotate: -10deg;
    bottom: 20%;
    left: 30%;
  }
 
  100% {
    opacity: 0;
    bottom: 20%;
    width: 20px;
    rotate: 0deg;
    left: 30%;
  }
}

@keyframes anm_d3ep {
  0% {
    opacity: 1;
    rotate: -180deg;
    bottom: 20%;
    left: 30%;
  }
 
  100% {
    opacity: 0;
    bottom: 20%;
    width: 20px;
    rotate: 180deg;
    left: 30%;
  }
}

@keyframes anm_bassface {
  0% {
    opacity: 1;
    bottom: 20%;
    left: 30%;
  }

  10% {
    rotate: -10deg;
    bottom: 20%;
    left: 30%;
  }

  20% {
    rotate: 0deg;
    bottom: 20%;
    left: 30%;
  }

  30% {
    opacity: 1;
    rotate: 10deg;
    bottom: 20%;
    left: 30%;
  }

  40% {
    opacity: 1;
    rotate: 0deg;
    bottom: 20%;
    left: 30%;
  }

  50% {
    opacity: 1;
    rotate: -5deg;
    bottom: 20%;
    left: 30%;
  }

  60% {
    opacity: 1;
    rotate: 0deg;
    bottom: 20%;
    left: 30%;
  }

  70% {
    opacity: 1;
    rotate: 5deg;
    bottom: 20%;
    left: 30%;
  }

  80% {
    rotate: 0deg;
    bottom: 20%;
    left: 30%;
  }

  90% {
    opacity: 0.5;
    rotate: -10deg;
    bottom: 20%;
    left: 30%;
  }
 
  100% {
    opacity: 0;
    bottom: 20%;
    width: 20px;
    rotate: 0deg;
    left: 30%;
  }
}

@keyframes anm_eddie {
  0% {
    opacity: 1;
    bottom: 20%;
    left: 30%;
  }

  10% {
    rotate: -5deg;
    bottom: 20%;
    left: 30%;
  }

  20% {
    rotate: 0deg;
    bottom: 20%;
    left: 30%;
  }

  30% {
    opacity: 1;
    rotate: 5deg;
    bottom: 20%;
    left: 30%;
  }

  40% {
    opacity: 1;
    rotate: 0deg;
    bottom: 20%;
    left: 30%;
  }

  50% {
    opacity: 1;
    rotate: -10deg;
    bottom: 20%;
    left: 30%;
  }

  60% {
    opacity: 1;
    rotate: 0deg;
    bottom: 20%;
    left: 30%;
  }

  70% {
    opacity: 1;
    rotate: 10deg;
    bottom: 20%;
    left: 30%;
  }

  80% {
    rotate: 0deg;
    bottom: 20%;
    left: 30%;
  }

  90% {
    opacity: 0.5;
    rotate: -10deg;
    bottom: 20%;
    left: 30%;
  }
 
  100% {
    opacity: 0;
    bottom: 20%;
    width: 20px;
    rotate: 0deg;
    left: 30%;
  }
}

@keyframes anm_diver {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 30%;
    rotate: -10deg;
  }

  50% {
    opacity: 1;
    right: 70%;
    rotate: 5deg;
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 10px;
    right: 70%;
    rotate: 15deg;
  }
}

@keyframes anm_wicked {
  0% {
    opacity: 1;
    right: 60%;
    bottom: 30%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 5px;
    right: 55%;
  }
}

@keyframes anm_dollar {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 10%;
    rotate: -50deg;
  }

  50% {
    opacity: 1;
    rotate: 0deg;
  }
 
  100% {
    opacity: 0;
    bottom: 60%;
    width: 10px;
    right: 60%;
    rotate: 50deg;
  }
}

@keyframes anm_clap {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 10%;
    rotate: -50deg;
  }

  50% {
    opacity: 1;
    rotate: 0deg;
  }
 
  100% {
    opacity: 0;
    bottom: 60%;
    width: 10px;
    right: 60%;
    rotate: 50deg;
  }
}

@keyframes anm_bells {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 10%;
    rotate: -50deg;
  }

  50% {
    opacity: 1;
    rotate: 0deg;
  }
 
  100% {
    opacity: 0;
    bottom: 60%;
    width: 10px;
    right: 60%;
    rotate: 50deg;
  }
}

@keyframes anm_smurf {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 10%;
    rotate: -50deg;
  }

  50% {
    opacity: 1;
    rotate: 0deg;
  }
 
  100% {
    opacity: 0;
    bottom: 60%;
    width: 10px;
    right: 60%;
    rotate: 50deg;
  }
}

@keyframes anm_cowbell {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 10%;
    rotate: -50deg;
  }

  50% {
    opacity: 1;
    rotate: 0deg;
  }
 
  100% {
    opacity: 0;
    bottom: 60%;
    width: 10px;
    right: 60%;
    rotate: 50deg;
  }
}

@keyframes anm_oosh {
  0% {
    opacity: 1;
    left: 40%;
    bottom: 10%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 60%;
    width: 10px;
    left: 50%;
  }
}

@keyframes anm_riddim {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 10%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 60%;
    width: 10px;
    right: 70%;
  }
}

@keyframes anm_chestnuts {
  0% {
    opacity: 1;
    right: 80%;
    bottom: 10%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 60%;
    width: 10px;
    right: 80%;
  }
}

@keyframes anm_club {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 10%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 60%;
    width: 10px;
    right: 70%;
  }
}

@keyframes anm_balls {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 10%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 60%;
    width: 10px;
    right: 70%;
  }
}

@keyframes anm_hipster {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 10%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 10px;
    right: 70%;
  }
}

@keyframes anm_shots {
  0% {
    opacity: 1;
    right: 80%;
    bottom: 10%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 70%;
    width: 10px;
    right: 70%;
  }
}

@keyframes anm_wine {
  0% {
    opacity: 1;
    right: 80%;
    bottom: 10%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 70%;
    width: 10px;
    right: 70%;
  }
}

@keyframes anm_ride {
  0% {
    opacity: 1;
    right: 80%;
    bottom: 10%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 70%;
    width: 10px;
    right: 70%;
  }
}

@keyframes anm_rewind {
  0% {
    opacity: 1;
    right: 80%;
    bottom: 10%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 5px;
    right: 80%;
  }
}

@keyframes anm_matron {
  0% {
    opacity: 1;
    left: 30%;
    bottom: 10%;
    rotate: 15deg;
  }

  50% {
    opacity: 1;
    
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 5px;
    left: 30%;
    rotate: -15deg;
  }
}

@keyframes anm_lurkers {
  0% {
    opacity: 1;
    right: 40%;
    bottom: 10%;
    rotate: 15deg;
  }

  50% {
    opacity: 1;
    
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 5px;
    right: 40%;
    rotate: -15deg;
  }
}

@keyframes anm_jacko {
  0% {
    opacity: 1;
    right: 80%;
    bottom: 10%;
    rotate: 25deg;
  }

  50% {
    opacity: 1;
    
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 5px;
    right: 80%;
    rotate: -25deg;
  }
}

@keyframes anm_bounce {
  0% {
    opacity: 1;
    left: 40%;
    bottom: 10%;
    rotate: 25deg;
  }

  50% {
    opacity: 1;
    
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 5px;
    left: 40%;
    rotate: -25deg;
  }
}

@keyframes anm_popeye {
  0% {
    opacity: 1;
    left: 40%;
    bottom: 10%;
    rotate: -25deg;
  }

  50% {
    opacity: 1;
    
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 5px;
    left: 40%;
    rotate: 25deg;
  }
}

@keyframes anm_nawtie {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 10%;
    rotate: 25deg;
  }

  50% {
    opacity: 1;
    
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 5px;
    right: 70%;
    rotate: -25deg;
  }
}

@keyframes anm_newyear {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 20%;
    rotate: 10deg;
  }

  50% {
    opacity: 1;
    
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 10px;
    right: 70%;
    rotate: -10deg;
  }
}

@keyframes anm_santa {
  0% {
    opacity: 1;
    right: 80%;
    bottom: 20%;
    rotate: 15deg;
  }

  50% {
    opacity: 1;
    
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 10px;
    right: 80%;
    rotate: -15deg;
  }
}

@keyframes anm_rolling {
  0% {
    opacity: 1;
    right: 60%;
    bottom: 20%;
  }

  50% {
    opacity: 1;
    
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 10px;
    right: 70%;
  }
}

@keyframes anm_peach {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 20%;
    rotate: -80deg;
  }

  50% {
    opacity: 1;
    rotate: 0deg;
  }
 
  100% {
    opacity: 0;
    bottom: 40%;
    width: 10px;
    right: 70%;
    rotate: 50deg;
  }
}

@keyframes anm_percy {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 20%;
    rotate: -40deg;
  }

  50% {
    opacity: 1;
    rotate: 0deg;
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 10px;
    right: 70%;
    rotate: 40deg;
  }
}

@keyframes anm_abster {
  0% {
    opacity: 1;
    right: 60%;
    bottom: 20%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 10px;
    right: 60%;
  }
}

@keyframes anm_elf {
  0% {
    opacity: 1;
    right: 60%;
    bottom: 20%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 10px;
    right: 60%;
  }
}

@keyframes anm_bear {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 10%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 30%;
    width: 10px;
    right: 70%;
  }
}

@keyframes anm_chong {
  0% {
    opacity: 1;
    right: 60%;
    bottom: 20%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 10px;
    right: 60%;
  }
}

@keyframes anm_outta {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 20%;
    rotate: 30deg;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 60%;
    width: 10px;
    right: 70%;
    rotate: -30deg;
  }
}

@keyframes anm_smashing {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 10%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 40%;
    width: 10px;
  }
}


@keyframes anm_guetta {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 30%;
    rotate: 10deg;
  }

  50% {
    opacity: 1;
    
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 10px;
    right: 80%;
    rotate: -10deg;
  }
}

@keyframes anm_chef {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 30%;
  }

  50% {
    opacity: 1;
    
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 10px;
    right: 80%;
  }
}

@keyframes anm_vibe {
  0% {
    opacity: 1;
    right: 75%;
    bottom: 20%;
  }

  50% {
    opacity: 1;
    
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 10px;
    right: 80%;
  }
}

@keyframes anm_sample {
  0% {
    opacity: 1;
    right: 75%;
    bottom: 20%;
  }

  50% {
    opacity: 1;
    
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 10px;
    right: 80%;
  }
}

@keyframes anm_greenlight {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 30%;
  }

  50% {
    opacity: 1;
    
  }
 
  100% {
    opacity: 0;
    bottom: 40%;
    width: 10px;
    right: 70%;
  }
}

@keyframes anm_sausage {
  0% {
    opacity: 1;
    right: 80%;
    bottom: 30%;
  }

  50% {
    opacity: 1;
    right: 60%;
  }
 
  100% {
    opacity: 0;
    bottom: 80%;
    width: 10px;
    right: 60%;
    rotate: 180deg;
  }
}

@keyframes anm_fire {
  0% {
    opacity: 1;
    right: 80%;
    bottom: 30%;
  }
 
  100% {
    opacity: 0;
    bottom: 30%;
    width: 10px;
    right: 60%;
  }
}

@keyframes anm_beer {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 40%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    right: 70%;
    bottom: 30%;
    width: 5px;
  }
}

@keyframes anm_stuffing {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 40%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    right: 70%;
    bottom: 30%;
    width: 5px;
  }
}

@keyframes anm_cake {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 40%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    right: 70%;
    bottom: 30%;
    width: 5px;
  }
}

@keyframes anm_completed {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 40%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    right: 70%;
    bottom: 30%;
    width: 5px;
  }
}

@keyframes anm_sublime {
  0% {
    opacity: 1;
    right: 80%;
    bottom: 40%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    right: 60%;
    bottom: 30%;
    width: 5px;
  }
}

@keyframes anm_serious {
  0% {
    opacity: 1;
    right: 80%;
    bottom: 20%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    right: 70%;
    bottom: 30%;
    width: 5px;
  }
}

@keyframes anm_bullet {
  0% {
    opacity: 1;
    right: 90%;
    bottom: 30%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    right: 10%;
    bottom: 30%;
    width: 5px;
  }
}

@keyframes anm_drop {
  0% {
    opacity: 1;
    right: 80%;
    bottom: 70%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    right: 80%;
    bottom: 10%;
    width: 5px;
  }
}

@keyframes anm_bee {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 40%;
  }

  50% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    right: 70%;
    bottom: 30%;
    width: 5px;
  }
}

@keyframes anm_plunger {
  0% {
    opacity: 1;
    right: 50%;
    bottom: 40%;
  }

  5% {
    rotate: 30deg;
  }

  10% {
    rotate: 0deg;
  }

  15% {
    rotate: -30deg;
  }

  20% {
    rotate: 0deg;
  }

  25% {
    rotate: 30deg;
  }

  30% {
    rotate: 0deg;
  }

  35% {
    rotate: -30deg;
  }

  40% {
    rotate: 0deg;
  }

  45% {
    rotate: 30deg;
  }

  50% {
    rotate: 0deg;
  }

  55% {
    rotate: -20deg;
  }

  60% {
    rotate: 0deg;
  }

  65% {
    rotate: 20deg;
  }

  70% {
    rotate: 0deg;
  }

  75% {
    rotate: -20deg;
  }

  80% {
    rotate: 0deg;
  }

  85% {
    rotate: 15deg;
  }

  90% {
    opacity: 0.7;
    rotate: 0deg;
  }

  95% {
    opacity: 0.5;
    rotate: -15deg;
  }

 
  100% {
    opacity: 0;
    width: 10px;
    rotate: 0deg;
  }
}

@keyframes anm_incoming {
  0% {
    opacity: 1;
  }
 
  80% {
    opacity: 1;
  }
  81% {
    opacity: 0.7
  }
  100% {
    opacity: 0;
    width: 30px;
    rotate: -30deg;
  }
}

@keyframes anm_panties {
  0% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 60%;
    right: 50%;
    rotate: 190deg;
    width: 20px;
  }
}

@keyframes anm_banger {
  0% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 60%;
    right: 50%;
    rotate: 190deg;
    width: 20px;
  }
}

@keyframes anm_shape1 {
  0% {
    opacity: 1;
    right: 40%;
    bottom: 20%;
  }

  90% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 10px;
    right: 80%;
    rotate: 150deg;
  }
}

@keyframes anm_shape2 {
  0% {
    opacity: 1;
    right: 50%;
    bottom: 20%;
  }

  90% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 5px;
    right: 50%;
    rotate: -260deg;
  }
}

@keyframes anm_shape3 {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 30%;
  }

  90% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 40%;
    width: 20px;
    right: 60%;
  }
}

@keyframes anm_street1 {
  0% {
    opacity: 1;
    right: 40%;
    bottom: 20%;
  }

  90% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 10px;
    right: 80%;
    rotate: 150deg;
  }
}

@keyframes anm_street2 {
  0% {
    opacity: 1;
    right: 50%;
    bottom: 20%;
  }

  90% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 50%;
    width: 5px;
    right: 50%;
    rotate: -260deg;
  }
}

@keyframes anm_street3 {
  0% {
    opacity: 1;
    right: 70%;
    bottom: 30%;
  }

  90% {
    opacity: 1;
  }
 
  100% {
    opacity: 0;
    bottom: 40%;
    width: 20px;
    right: 60%;
  }
}

.verified {
  color: #53b5db;
  font-size: 10px;
}

.p_verified {
  color: #53b5db;
  font-size: 15px;
  margin-top: 5px;
  margin-left: 5px;
}

.angel {
  color: #a076df;
  font-size: 10px;
}

.div_angel {
  font-size: 14px; 
  margin-top: 14px; 
  margin-left: 3px;
  color: #a076df;
}

.moderator {
  color: #ffbf00;
  font-size: 10px;
}

.p_moderator {
  color: #ffbf00;
  font-size: 15px;
  margin-top: 5px;
  margin-left: 5px;
}

.div_moderator {
  font-size: 14px; 
  margin-top: 14px; 
  margin-left: 3px;
  color: #ffbf00;
}

.rqTop {
  display: flex;
}

.sm_badge {
  margin: 2px 0 0 3px;
  font-size: 13px;
}

.sysmsg {
  color: #bb3c1e;
  font-size: 13px;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  padding: 0 0 7px 0;
  display: flex;
}

.sysbomb {
  color: #a076df;
  font-size: 13px;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  padding: 0 0 7px 0;
  display: flex;
}

.sysAnim {
  font-size: 13px;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  padding: 0 0 7px 0;
  display: flex;
}

.sysMeta {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 5px;
  width: 100%;
  margin-right: 10px;
}

.sysName {
  color: #282828!important;
  font-weight: bold;
}

.sysmsg.mentioned {
  color: #288a1a !important;
}

.sysIcon {
  width: 30px;
  font-size: 25px;
  font-weight: normal!important;
  cursor: copy;
  margin-right: 5px;
}

.shoutbox-flag {
  width: 16px;
  margin: 1px 3px 0 0;
}

.shoutbox-flag img {
  width: 100%;
}

.systxt {
  box-sizing: border-box;
  margin-top: 3px;
}

#sbLoveHeart {
  position: absolute;
  bottom: 105px;
  right: 13px;
  z-index:3;
  background: transparent;
  color: #f24545;
  font-size: 18px;
  display:none;
}

/* new night mode */
.night_mode {
  background: #171717;
  color: #76d573;
  font-family: courier;
  font-size: 18px;
}

/* EMOJIS */
#emojis {
  position: fixed;
  /* bottom: 150px; */
  bottom: 180px;
  width: 100%;
  height: 300px;
  background: #f7f7f7;
  z-index: 2;
  display: none;
  box-sizing: border-box;
  padding: 10px;
  border-top: 1px solid #d9d9d9;
}
.emojiNav {
  display: flex;
  width: 100%;
  justify-content: space-around;
  margin-bottom: 10px;
}
.emojiNav a {
  background: #e3e3e3;
  color: #777;
  padding: 5px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  margin-right: 10px;
}

#emojiContent {
  overflow-y: auto;
  height: 240px;
  width: 100%;
  box-sizing: border-box;
}
#em_faces, #em_body, #em_animals, #em_food, #em_sport, #em_transport, #em_signs, #em_weather {
  border-bottom: 1px solid #dbdbdb;
}
/***********************/

/* SHOUTBOX USERS ONLINE */
#usersOn-wrap {
  position: relative;
  width: 250px;
  /* height: calc(100vh - 283px); */
  height: calc(100vh - 313px);
  background: white;
  color: #333;
  box-sizing: border-box;
  padding: 10px;
  margin: 0;
  border-right: 1px solid #aaa;
  overflow-y: auto;
  display: none;
}

.sbUserOl {
  display: flex;
  flex-direction: row;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.usersOnline_name {
  cursor: copy;
  font-size: 13px;
  font-weight: 700;
  color: #5e5e5e;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



.usersOnline_flag {
  width: 14px;
  margin-right: 4px;
}

.usersOnline_flag img {
  width: 100%;
}

/* Top Nav Menu */
#topNav {
  width: 100%;
  background: rgb(51,50,50);
  background: linear-gradient(0deg,rgb(51, 50, 50) 0%, rgb(57, 57, 57) 50%, rgb(51, 51, 51) 100%);
  height: 32px;
}
#tnl {
    display: flex;
    height: 100%;
    box-sizing: border-box;
    max-width: 1600px;
    margin: 0 auto;
}
.t_menu {
    width: 100%;
    padding: 0 25px;
    box-sizing: border-box;
}
.tn1 {
    display: flex;
}
.tn2 {
    display: flex;
    margin-top: 6px;
}
#clock {
    font-family: 'bebas', arial, sans-serif;
    font-size: 20px;
    letter-spacing: 0.8px;
    color: #ce9558;
}
#dj_le {
  background: #5b5b5b;
  font-size: 10px;
  padding: 2px 5px 2px 7px;
  color: #151515;
  margin: 2px 10px 0 0;
  height: 13px;
  letter-spacing: 1px;
}
#dj_conn {
  background: #5c754c;
  font-size: 12px;
  color:#fff;
  padding: 5px;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 10px;
}
.atv {
  background: #60a460!important;
  color: #fff!important;
}
.atv2 {
  background: #dc3434;
  color: #fff !important;
  animation-name: liveonair;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
#djcp_switch_display {
  background: #282828;
  padding: 10px 20px;
  margin-bottom: 2px;
}
#djcp_switch_display h4 {
  text-align: center;
  font-size: 15px;
  margin-top: 10px;
  margin-bottom: 15px;
}
.t_menu {
  display: flex;
  justify-content: space-between;
  margin-left: auto;
}

.t_menu a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 0 10px;
  text-decoration: none;
  border-left: 1px solid #0d0d0d;
  font-size: 12px;
  color: #c2c2c2;
  transition: all 0.2s;
  font-family: 'Roboto', sans-serif;
}



.t_menu .lastItem {
  border-right: 1px solid #0d0d0d;
  margin-right: 20px;
}

.t_menu .bcrumb {
  background: #1e1e1e;
  color: white;
}

/* Live On Air Scab */
#top-live {
  display: flex;
  overflow: hidden;
  background: #333;
  overflow: hidden;
  padding: 10px 10px 7px 10px;
  margin-bottom: 20px;
}
#onair-dj {
  margin-top: 7px;
  font-size: 24px;
  text-align: center;
  font-family: 'bebas';
  color: #acacac;
}
#onair-avatar {
  width: 55px;
  height: 55px;
  overflow: hidden;
  border-radius: 50%;
  background: #1e1e1e;
  z-index: 1;
  border: 3px solid #333;
}
#onair-avatar img {
  width: 100%;
}
.top-live-meta {
  display: flex;
  flex-direction: column;
  margin-left: -20px;
}
.top-live-meta .onair {
  width: 280px;
  text-align: center;
}

/* Top Listen Control */
#top-listen {
  margin-left: 30px;
  margin-top: 14px;
  height: 42px;
  overflow: hidden;
  display: none;
}
.tl-streams {
  display: flex;
}
.tl-head {
  font-family: 'Roboto', 'Arial', sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
}
.tl-hd {
  background: #60a460;
  padding: 1px 5px 0 5px;
  margin-right: 2px;
  font-size: 11px;
  color: #151515;
  text-align: center;
  width: 25px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.tl-sd {
  background: #ceb966;
  padding: 1px 5px 0 5px;
  font-size: 11px;
  margin-right: 2px;
  color: #151515;
  text-align: center;
  width: 25px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.tl-sd2 {
  background: #b5548f;
  padding: 1px 5px 0 5px;
  font-size: 11px;
  color: #151515;
  text-align: center;
  width: 25px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}




/* Top 10 Podcasts */
#top10_pods {
  display: flex;
  background: #333;
  padding: 0 0 10px 0;
  margin-bottom: 20px;
  box-sizing: border-box;
}

#top10_pods_dj {
  display: flex;
  background: #333;
  padding: 0 0 10px 0;
  margin-bottom: 20px;
  font-size: 11px;
}

.c-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
}

.c-it-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

#top10_pods .c-it-artist {
  width: 100%;
  text-align: left;
}

#top10_pods_dj {
  display: flex;
  background: #333;
  padding: 10px;
}

.podWrapper {
  width: 100%;
}
.c-item {
  display: flex;
  padding: 5px 5px 5px 0;
  background: #2b2b2b;
  border-bottom: 2px solid #1e1e1e;
  transition: 0.2s all;
}
.podWrapper .c-item:nth-child(even) {
  background: #242424;
}

.podWrapper .c-art {
  width: 50px;
  height: 50px;
  overflow: hidden;
  margin-right: 10px;
  flex-shrink: 0;
  position: relative;
}
.podWrapper .c-art img {
  width: 100%;
}
.podWrapper .c-it-title a {
  text-decoration: none;
  transition: all 0.2s;
  font-size: 12px;
}

.podWrapper .c-item:hover {
  background: #404040;
}
.podWrapper .c-item:hover .c-art img {
  opacity: 0.1;
}
.podWrapper .c-item:hover .chart-play {
  display: block;
}

.podWrapper .c-it-artist a {
  text-decoration: none;
  transition: all 0.2s;
  font-size: 13px;
}

.podWrapper .c-pos {
  font-family: 'bebas', 'Arial', sans-serif;
  font-size: 30px;
  width: 35px;
  text-align: center;
  margin-top: 10px;
  color: #c1c1c1;
  flex-shrink: 0;
}
.podWrapper .chart-play {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
.podWrapper .play-btn-sm {
    font-size: 20px;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    font-size: 26px;
    pointer-events: none;
    text-align: center;
    margin: 15px 5px 5px 6px;
    vertical-align: middle;
    position: relative;
}

.sd-head {
    padding: 10px 0;
    margin: 0;
    text-align: center;
    font-family: 'bebas';
    font-size: 20px;
    border-bottom: 2px solid #1e1e1e;
}



/* All Podcasts */
.podWrapper {
  margin-bottom: 20px;
}
.podWrapperAll {
  margin-bottom: 20px;
}
.pod_head {
  text-align: center;
  margin-bottom: 20px;
}
.podcastWrap {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 2px;
  background: #262626;
  padding: 10px;
}
.podcastWrap:nth-child(even) {
  background: #2f2f2f;
}
.pod_artwork {
  width: 70px;
  height: 70px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.pod_artwork img {
  width: 100%;
}
.pod_play {
  font-size: 44px;
  margin: -7px 10px 0 10px;
  color: #8e8e8e;
  cursor: pointer;
  transition: all 0.2s;
}

.pod_dj {
  font-family: 'abel', 'Arial', sans-serif;
  font-size: 16px;
}
.pod_dj a {
  text-decoration: none;
  transition: all 0.2s;
  color: #c1c1c1;
}

.pod_title {
  font-family: 'bebas', 'Arial', sans-serif;
  font-size: 22px;
  margin-top: 3px;
  color: #d0d0d0;
}
.pod_title a {
  text-decoration: none;
  transition: all 0.2s;
  color: #dbdbdb;
}

.pod_right {
  margin-left: auto;
  text-align: right;
}
.pod_date {
  text-align: right;
  font-size: 13px;
  color: gray;
}
.pod_meta {
  color: #888;
  font-size: 12px;
  margin-top: 7px;
}
.pod_meta_item {
  margin-right: 10px;
}
.btn-download,
.btn-download-mod {
  background: #595959;
  color: white;
  padding: 5px 10px;
  font-size: 10px;
  margin-top: 28px;
  transition: 0.2s all;
}



/* DJ All Podcasts */
.bpad20 {
  margin-bottom: 20px;
}
iframe {
  display: none!important;
}
.pod_head {
  text-align: center;
  margin-bottom: 20px;
}
.podcastWrap {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 2px;
  background: #262626;
  padding: 10px;
}
.podcastWrap:nth-child(even) {
  background: #2f2f2f;
}
.pod_artwork {
  width: 70px;
  height: 70px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.pod_artwork img {
  width: 100%;
}
.pod_play {
  font-size: 44px;
  margin: -7px 10px 0 10px;
  color: #8e8e8e;
  cursor: pointer;
  transition: all 0.2s;
}

.pod_dj {
  font-family: 'abel', 'Arial', sans-serif;
  font-size: 16px;
}
.pod_dj a {
  text-decoration: none;
  transition: all 0.2s;
  color: #c1c1c1;
}

.pod_title {
  font-family: 'bebas', 'Arial', sans-serif;
  font-size: 22px;
  margin-top: 3px;
  color: #d0d0d0;
}
.pod_title a {
  text-decoration: none;
  transition: all 0.2s;
  color: #dbdbdb;
}

.pod_right {
  margin-left: auto;
  text-align: right;
}
.pod_date {
  text-align: right;
  font-size: 13px;
  color: gray;
}
.pod_meta {
  color: #888;
  font-size: 12px;
  margin-top: 7px;
}
.pod_meta_item {
  margin-right: 10px;
}
.btn-download,
.btn-download-mod {
  background: #595959;
  color: white;
  padding: 5px 10px;
  font-size: 10px;
  margin-top: 28px;
  transition: 0.2s all;
}

.dj_pod_head {
    background: #333;
    color: white;
    padding: 20px;
    text-align: center;
    margin: 0 0 20px 0;
}

/* Global Layout */
.split_content {
  display: flex;
  flex-direction: column;
}
.l-content {
  width: 100%;
}
.c-wrap {
  background: #2f2f2f;
  padding: 20px;
  color: #e8e8e8;
}
.c-head {
  color: #a8bf69;
  font-family: 'bebas';
  text-align: center;
  font-size: 26px;
}

/* Search Results */
.s-wrapper {
  padding: 10px;
  background: #171717;
}
.s-head {
  text-align: center;
  margin: 20px 0 30px 0;
  padding-bottom: 30px;
  border-bottom: 1px solid #828282;
  color: #72a269;
}
.s-res {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  flex-direction: row;
  padding: 20px;
  border-bottom: 1px solid #1e1e1e;
}
.s-img {
  width: 40px;
  height: 40px;
  margin-right: 20px;
}
.s-img img {
  width: 100%;
}
.s-meta {
  display: flex;
  flex-direction: column;
}
.s-title a {
  text-decoration: none;
}

.s-url {
  font-size: 13px;
  color: #848484;
}

/*********** D3EP Main Player ***********/
.player-l, .player-r {
  display: flex;
  box-sizing: border-box;
}

.player-r {
  margin-left: 20px;
  margin-top: 35px;
  justify-content: right;
  display: none;
}

.player-m {
  width: 60%;
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
}
  
.p-art {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  margin-top: 10px;
  margin-right: 10px;
  overflow: hidden;
  margin-left: 10px;
  z-index: 100;
}
#p-title {
  font-size: 14px;
}
#p-title a {
  text-decoration: none;
}
#p-artist {
  font-size: 12px;
  margin-top: 5px;
}
#p-artist a {
  text-decoration: none;
  color: #b9b9b9;
}

#p-like {
  margin-top: 13px;
  margin-right: 20px;
  margin: 13px 20px 0 5px;
}
.p-controls {
  display: flex;
  color: #c8c8c8;
  z-index: 100;
}
.progress-wrap {
  display: flex;
  margin: 17px 0 0 17px;
  width: 100%;
}
#p-img {
  width: 100%;
}
#p-playBtn {
  font-size: 35px;
  cursor: pointer;
  z-index: 9999;
}
#p-prevBtn,
#p-nextBtn {
  font-size: 20px;
  cursor: pointer;
  margin: 10px 20px 0 20px;
}
#p-playBtn,
#p-prevBtn,
#p-nextBtn {
  transition: all 0.2s;
}

#p-currentTime {
  margin-right: 10px;
}
#p-duration {
  margin-left: 10px;
}
#p-currentTime, #p-duration {
  font-size: 8pt;
}
#progressBar {
  height: 7px;
  background: black;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  margin-top: 5px;
  border-radius: 3px;
}
#progress {
  position: relative;
  height: 7px;
  background: green;
  width: 0%;
  transition: all 0.2s;
}
.handle {
  position: absolute;
  right: -5px;
  top: -7px;
  opacity: 0;
}


.onair {
  background: #c64242;
  color: white;
  font-size: 7pt;
  padding: 3px;
  animation-name: liveonair;
  animation-duration: 2s; 
  animation-iteration-count: infinite;
}

.volumeWrap {
height: 23px;
box-sizing: border-box;
display: flex;
margin-left: 10px;
}

#volume {
margin: 0;
}

input[type=range] {
  /*removes default webkit styles*/
  -webkit-appearance: none;
  
  /*fix for FF unable to apply focus style bug */
  border: 1px #151515;
  
  /*required for proper track sizing in FF*/
  width: 100%;

  background: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  background: black;
  border: none;
  border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 8px;
  border-radius: 0;
  background: white;
  margin-top: -4px;
  cursor: pointer;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: black;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  background: #333;
  border: none;
  border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
  border: none;
  height: 16px;
  width: 8px;
  border-radius: 0;
  background: white;
  cursor: pointer;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
  outline: 1px #151515;
  outline-offset: -1px;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  
  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;
  
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 6px 0;

  /*remove default tick marks*/
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #777;
  border-radius: 0;
}
input[type=range]::-ms-fill-upper {
  background: #333;
  border-radius: 0;
}
input[type=range]::-ms-thumb {
  border: none;
  height: 16px;
  width: 8px;
  border-radius: 0;
  background: white;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #333;
}
input[type=range]:focus::-ms-fill-upper {
  background: #333;
}

#volumeIcon {
  padding-left: 20px;
  text-align: left;
  width: 25px;
  font-size: 20px;
  margin-top: -3px;
}

.undock-btn {
  font-size: 20px;
  margin-left: 30px;
  margin-top: -3px;
  cursor: pointer;
  color: #444;
  transition: all 0.2s;
}

#shoutbox-tab {
box-sizing: border-box;
cursor: pointer;
font-size: 20px;
margin-left: 30px;
margin-top: -4px;
}

@keyframes liveonair {
  0% {background-color: #8e2929;}
  50% {background-color: #c64242;}
  100% {background-color: #8e2929;}
}

/********* End D3EP Main Player *********/

/* User Profiles */
.usrWrap {
  background: #333333;
  background: -moz-linear-gradient(top, #282828 0%, #545454 50%, #282828 100%);
  background: -webkit-linear-gradient(top, #282828 0%,#545454 50%,#282828 100%);
  background: linear-gradient(to bottom, #282828 0%,#545454 50%,#282828 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282828', endColorstr='#282828',GradientType=0 );
  display: flex;
  padding: 20px;
  width: 100%;
  flex-wrap: wrap;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
}

.usrWrap .usr-image {
  width: 180px;
  height: 180px;
  overflow: hidden;
  border-radius: 50%;
  background: #1e1e1e;
  box-shadow: 1px 1px 1px #606060;
  flex-shrink: 0;
}
.usrWrap .usr-image img {
  width: 100%;
}
.usrWrap .usr-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  flex: 1;
}
.usrWrap .usr-name {
  font-family: 'bebas', 'Arial', sans-serif;
  font-size: 40px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.usrWrap .usr-location {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.usrWrap .usr-flag {
  width: 30px;
  overflow: hidden;
}
.usrWrap .usr-flag img {
  width: 100%;
}
.usrWrap .usr-country {
  font-size: 22px;
  margin-left: 10px;
  margin-top: 3px;
  font-family: 'bebas', 'Arial', sans-serif;
  color: #b3b3b3;
}
.usrWrap .usr-uname {
  font-size: 18px;
  margin-left: 0;
  margin-top: -10px;
  margin-bottom: 5px;
  font-family: 'roboto', 'Arial', sans-serif;
  color: #b3b3b3;
  text-align: center;
}

.p_offline {
  text-align: center;
  margin-top: 30px;
}

.sb_rating {
  padding: 20px;
}
.sbr_item {
  display: flex;
}
.sbr_img {
  width: 50px;
  margin-right: 20px;
}
.sbr_img img {
  width : 100%;
}
.sbr_text {
  margin-top: 15px;
}

.edtpf {
  text-decoration: none;
  padding: 3px 10px;
  width: 80px;
  text-align: center;
  font-size: 12px;
  background: #6c6c6c;
  font-weight: normal;
  margin-top: 3px;
}


#podcastView_usr {
  background: #282828;
  display: flex;
  flex-direction: column;
}
#podcastView_usr .podcastTop {
    flex-direction: row!important;
}
#podcastView_usr .podcastTitle {
  font-family: 'bebas', 'Arial', sans-serif;
  font-size: 30px;
}

#podcastView_usr a.podImg {
    display: flex;
    width: 150px!important;
    height: 150px!important;
    overflow: hidden;
  flex-shrink: 0;
}
#podcastView_usr a.podImg img {
  width: 100%;
}
#podcastView_usr .podcastMeta {
    margin-left: 20px!important;
  }
.podcastHead_usr {
    text-align : center;
    text-transform: uppercase;
    font-size: 14px;
    background: #333;
    color: #999;
    padding: 5px 0;
    margin: 0;
}
#podcastView_usr .podcastTop {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
.podImg {
    width: 150px!important;
}

.prvWrap {
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
}
.prvImg {
  text-align: center;
  width: 300px;
  margin: auto;
}
.prvImg img {
  width: 100%;
}

/******* Messaging ********/
.messagingWrapper {
  width: 100%;
  box-sizing: border-box;
  height: calc(100vh - 90px);
  position: fixed;
  top: 70px;
  bottom: 0;
  right: 0;
  margin-bottom: 90px;
}
.messageLayout {
  position: relative;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  -webkit-flex-direction: row;
  flex-direction: row;
  transition: width .2s,height .2s;
}
.messageList {
  width: 78px;
  background: white;
  overflow-y: scroll;
  overflow-x: hidden;
  color: #262626;
  box-sizing: border-box;
  border-right: 1px solid #d0d0d0;
  height: calc(100vh - 193px);
  -webkit-overflow-scrolling: touch;
}
.messageOpen {
  flex-grow: 1;
  color: #262626;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #fff;
  overflow-y: auto;
  box-sizing: border-box;
  position: absolute;
  position: relative;
  height: calc(100vh - 140px);
  width: 100%;
}
.messages {
  background: white;
  padding: 10px;
  overflow-y: scroll;
  position: relative;
  height: calc(100vh - 375px);
  -webkit-overflow-scrolling: touch;
}
.messageWrite {
  border-top: 1px solid #cacaca;
  background: white;
  display: flex;
  margin:0;
  padding:0;
}
.messageWrite .pb-left {
  margin-left: 0px;
}
.conversationMeta {
  background: white;
  padding: 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #cacaca;
  height: 44px
}
.msgWrap {
  display: flex;
  overflow-y: auto;
  font-size: 15px;
  margin-bottom: 3px;
  flex-direction: column;
}
.msg_to {
  background: #5594cc;
  color: white;
  padding: 7px 10px;
  border-radius: 10px 10px 0 10px;
  display: inline-block;
}
.msg_to a {
  color: white;
}
.msg_from_wrap {
  display: flex;
}
.msg_from_avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #848484;
  overflow: hidden;
  margin-right: 5px;
  margin-top: auto;
  flex-shrink: 0;
}
.msg_from_avatar img {
  width: 100%;
}
.msg_from {
  background: #d5d5d5;
  color: #242424;
  padding: 7px 10px;
  border-radius: 10px 10px 10px 0;
  display: inline-block;
  max-width: 70%;
}
.msg_from a {
  color: #242424;
}
.msg_date_from {
  font-size: 10px;
  color: grey;
  text-align: left;
  margin-left: 35px;
}
.msg_date_to {
  font-size: 10px;
  color: grey;
  text-align: right;
  margin-left: 35px;
}

.msg-input {
  display: flex;
  width: 100%;
  -webkit-flex-grow: 1;
  flex-grow: 1;
  position: relative;
  background: #fff;
  box-sizing: border-box;
}
.msg-input textarea {
  padding: 5px;
  width: 100%;
  outline: none;
  border: none;
  resize: none;
  font-size: 13px;
  box-sizing: border-box;
  font-family: Arial;
}

.msg_list_wrap {
  color: #131313;
  text-decoration: none;
  border-bottom: 1px solid #d5d5d5;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  cursor: pointer;
  transition: 0.2s all;
}

.msg_list_cont {
  padding: 10px;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.msg_list_avatar {
  height: 35px;
  width: 35px;
  overflow: hidden;
  border-radius : 50%;
  background: #848484;
}
.msg_list_avatar img {
  width: 100%;
}
.msg_list_meta {
  margin-left: 5px;
  font-size: 12px;
  color: gray;
  display: none;
}
.msg_list_name {
  color: black;
  font-size: 14px;
}
.msg-active {
  background: #f0f0f0!important;
}
.msg_right {
  display: flex;
  flex-direction: row;
  max-width: 70%;
  margin-left: auto;
}
.msg_to_wrap {
  display: flex;
  flex-direction: column;
  margin-left: auto;
}
.msg_del {
  margin-left: auto;
  color: #d7d7d7;
  margin-top: -12px;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}

.o_msg_del {
  color: #d7d7d7;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
}


.mdshift {
  margin-top: 0;
}

.msg_btn {
  border: 1px solid #aaa;
  background: #aaa;
  color: black;
  padding: 3px 6px;
  height: 18px;
  font-size: 12px;
  display: inline-block;
  cursor: pointer;
  transition: 0.2s all;
  margin-left: 10px;
}
.msg_btn:hover {
  border: 1px solid white;
  background: white;
}

.msg_init {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.msg_bigIcon {
  font-size: 80px;
  color: #b3b3b3;
}
.msg_info {
  margin-top: 10px;
}
.msg_info2 {
  margin-top: 10px;
  font-size: 14px;
  color: #757575;
}
.msg-received {
  background: #e0f3fd !important;
}
#msg_send {
  background: #e1e1e1;
  color: #8a8a8a;
  padding: 10px 15px;
  height: 20px;
  margin-top: 18px;
  cursor: pointer;
  font-size: 14px;
  margin-right: 5px;
  transition: 0.2s all;
}

.cvnAvatar {
  width: 44px;
  height: 44px;
  border-radius:50%;
  overflow: hidden;
  background: #848484;
}
.cvnAvatar img {
  width: 100%;
}
.cvnMeta {
  margin-left: 5px;
}
.cvnName {
  color: #242424;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  font-size: 15px;
  margin-right: 3px;
}

.cvnUname {
  font-size: 13px;
  color: grey;
}
.cvn-delete {
  margin-left: auto;
  font-size: 24px;
  color: #c8c8c8;
  transition: 0.2s all;
  cursor: pointer;
}

.messaging_disabled {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  width: 100%;
  box-sizing: border-box;
}
.md_icon {
  font-size: 30px;
  color: #f26363;
  text-align: center;
}
.md_msg {
  font-size: 13px;
  color: gray;
  text-align: center;
  padding-bottom: 5px;
}

/* Notifications */
.msg_alert_wrap {
  display: flex;
  color: #242424;
  cursor: pointer;
  text-decoration: none;
}
.msg_alert_avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #2b2b2b;
  flex-shrink: 0;
  pointer-events: none;
}
.msg_alert_avatar img {
  width: 100%;
}
.msg_alert_meta {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 10px;
  pointer-events: none;
}
.msg_alert_name {
  font-weight: bold;
  font-size: 15px;
}
.msg_alert_msg {
  font-size: 13px;
}

#msg_emojis {
  position: fixed;
  bottom: 153px;
  height: 300px;
  background: #f7f7f7;
  z-index: 2;
  display: none;
  box-sizing: border-box;
  padding: 10px;
  left: 0;
}

#com_emojis {
  position: absolute;
  bottom: -333px;
  height: 300px;
  background: #f7f7f7;
  z-index: 1;
  display: none;
  box-sizing: border-box;
  padding: 10px;
  left: 0;
}

/**************************/

/********** DJCP **********/
/* Subs */
.sbs_wp {
  display: flex;
  align-content: center;
  width: 100%;
  box-sizing: border-box;
}
.sbs_od {
  display: block;
  margin: 0 auto;
  width: auto;
}
.subs_lock {
  background: #2f2f2f;
  padding: 30px;
  box-sizing: border-box;
  font-size: 15px;
}
.subs_lock .r_icon {
  font-size: 70px;
  text-align: center;
  color: #eee;
}
.pp_btns {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  box-sizing: border-box;
  margin: 30px 0;
}
.ppc {
  display: flex;
  flex-direction: column;
  color: #161616;
  background: white;
  align-items: center;
  font-weight: normal;
  font-size: 13px;
}
.ppc img {
  margin-bottom: 5px;
}
.ppck {
  text-align: center;
  padding: 10px 0;
}
.subs_lock .notify {
  font-weight: bold;
  color: #fff;
  text-align: center;
  margin-bottom: 10px;
}
.subs_lock .multi {
  color: #cec5a0;
}
.subs_lock .warn {
  color: #e16464 !important;
  text-align: center;
}
.sl_reason {
  font-size: 18px;
  color: #92afd5;
  text-align: center;
  margin: 0;
}
.sl_info {
  text-align: center;
  color: #eab168;
  font-size: 14px;
}

/* PODCASTS */
#djPodcasts {
  background: #282828;
  padding: 20px;
  font-family: 'Abel', sans-serif;
  font-size: 14px;
}
#djPodcasts .pod_head {
  text-align: center;
  margin-bottom: 20px;
}
#djPodcasts .podcastWrap {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 2px;
  background: #222;
  padding: 10px;
}
#djPodcasts .podcastWrap:nth-child(even) {
  background: #1c1c1c;
}
#djPodcasts .pod_artwork {
  width: 70px;
  height: 70px;
  box-sizing: border-box;
  flex-shrink: 0;
}
#djPodcasts .pod_artwork img {
  width: 100%;
}
#djPodcasts .pod_play {
  font-size: 44px;
  margin: 15px 10px 0 10px;
  color: #8e8e8e;
  cursor: pointer;
  transition: all 0.2s;
}

#djPodcasts .pod_dj {
  font-family: 'abel', 'Arial', sans-serif;
  font-size: 16px;
}
#djPodcasts .pod_dj a {
  text-decoration: none;
  transition: all 0.2s;
  color: #c1c1c1;
}

#djPodcasts .pod_title {
  font-family: 'bebas', 'Arial', sans-serif;
  font-size: 22px;
  margin-top: 3px;
  color: #d0d0d0;
}
#djPodcasts .pod_title a {
  text-decoration: none;
  transition: all 0.2s;
  color: #dbdbdb;
}

#djPodcasts .pod_right {
  margin-left: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
}

#djPodcasts .pod_meta {
  color: #888;
  font-size: 12px;
  margin-top: 7px;
}
#djPodcasts .pod_meta_item {
  margin-right: 10px;
}
#djPodcasts a.btn-edit {
  background: #595959;
  color: white;
  padding: 5px 10px 2px 10px;
  font-size: 10px;
  transition: 0.2s all;
  margin-right: 10px;
  cursor: pointer;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
  text-decoration: none;
}

#djPodcasts a.btn-mixcld {
  background: #595959;
  color: white;
  padding: 5px 10px 2px 10px;
  font-size: 10px;
  transition: 0.2s all;
  margin-right: 10px;
  cursor: pointer;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  margin-top: 7px;
  text-decoration: none;
}
#djPodcasts .btn-download,
#djPodcasts .btn-download-mod {
  background: #595959;
  color: white;
  padding: 5px 10px 2px 10px;
  font-size: 10px;
  transition: 0.2s all;
  margin-top: 7px;
}

#djPodcasts .dj_pod_head {
    background: #333;
    color: white;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
}

/* PUBLISH PODCAST */
#publishPodcastWrap {
  background: #282828;
  padding: 20px;
  font-family: 'Abel', sans-serif;
  font-size: 14px;
  margin-bottom: 30px;
}

#pca-form {
  max-width: 200px!important;
}
#pca-form .slim {
  padding-bottom: 0!important;
}
#pca-form .slim-area {
  color: black;
}
#pca-form {
  margin: 3px 0 20px 0;
}

.subpodhead {
  background: #171717;
  color: #a6a6a6;
  padding: 10px;
  font-family: 'bebas';
  font-size: 18px;
  margin-top: 20px;
}
.subpodbox {
  padding: 10px;
  background: #202020;
  box-sizing: border-box;
}
.sbflex {
  display: flex;
}
.djcp-play {
  display: inline-block;
  cursor: pointer;
}
.djcp-play .dpr {
  font-size: 40px!important;
}

.play-btn-sm.dpr {
  margin:0;
  cursor: pointer
}
.subselectwp {
  margin-bottom: 10px;
}
.subselmar {
  margin-right: 10px;
}
.sbInfoTxt{
  font-size: 13px;
  color: #adadad;
  margin-bottom: 10px;
}
.s_pod_art {
  width: 100px;
  height: 100px;
  cursor: pointer;
  margin-right: 20px;
}
.s_pod_art img {
  width: 100%;
}

#proText, #mixText {
  font-size: 12px;
  color: #aeaeae;
}

.uploadProgress {
  width: 100%;
  height: 5px;
  background: #1a1a1a;
  margin-top: 20px;
  box-sizing: border-box;
  padding: 1px;
  box-shadow: 1px 1px 1px #4a4a4a;
  overflow: hidden;
  position: relative;
}

#uploadBar {
  width: 0%;
  height: 7px;
  background: #354d5d;
  background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%);
  background: -webkit-linear-gradient(top, #a7cfdf 0%, #23538a 100%);
  background: linear-gradient(to bottom, #a7cfdf 0%, #23538a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 );
  transform: 0.2s;
  -webkit-transition: width 0.2s ease-in-out;
  -moz-transition: width 0.2s ease-in-out;
  -o-transition: width 0.2s ease-in-out;
  transition: width 0.2s ease-in-out;
}

.flexed {
  display: flex;
}

.ulWrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

#uploadSelect {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 5px;
}

.btn-ul, 
.btn-submit, 
.btn-cancel, 
.btn-remove {
  padding: 10px 15px 7px 15px;
  border: 0;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  color: white;
  font-family: 'abel', 'Arial', sans-serif;
  display: inline-block;
}

.btn-submit, 
.btn-ul {
  background: #435f77;
  font-weight: bold;
  margin-right: 20px;
}

.btn-cancel {
  background: #aaa;
  color: #222;
  font-weight: normal;
}



.btn-ul {
  margin: 0 auto;
}

.btn-remove {
  background: #EEEEEE;
  color: #555;
  font-weight: normal;
}



label.btn-ul input[type="file"] {
  position: absolute;
  top: -1000px;
}

#podArtCancel {
  margin-left: 20px;
}

.pulText {
  font-size: 12px;
  color: #aeaeae;
  margin: 0;
  padding: 0 0 5px 0;
}

/* TOGGLE STYLING */
.live_toggle {
  margin: 10px 0;
  box-sizing: border-box;
  font-size: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-flow: row nowrap;
  -webkit-box-pack: start;
  -webkit-box-align: stretch;
  align-items: stretch;
}
.live_toggle input {
  width: 0;
  height: 0;
  position: absolute;
  left: -9999px;
}
.live_toggle input + label {
  margin: 0;
  padding: 8px 20px 5px 20px;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  border: solid 1px #DDD;
  background-color: #FFF;
  font-size: 12px;
  color: black;
  line-height: 100%;
  font-weight: 600;
  text-align: center;
  -webkit-transition: border-color .15s ease-out,  color .25s ease-out,  background-color .15s ease-out, box-shadow .15s ease-out;
  transition: border-color .15s ease-out,  color .25s ease-out,  background-color .15s ease-out, box-shadow .15s ease-out;
  cursor: pointer;
}
.live_toggle input + label:first-of-type {
  border-radius: 6px 0 0 6px;
  border-right: none;
}
.live_toggle input + label:last-of-type {
  border-radius: 0 6px 6px 0;
  border-left: none;
}

.live_toggle input:checked + label {
  background-color: #417731;
  color: #FFF;
  box-shadow: 0 0 10px rgba(65, 119, 49, 0.5);
  border-color: #417731;
  z-index: 1;
}
.live_toggle input:focus + label {
  outline-offset: .45rem;
}

.podBt {
  text-align: center;
  background: #1e1e1e;
  padding: 8px 0 5px 0;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

/* User Images */
.uImgsWrapper {
    box-sizing: border-box;
    width: 100%;
  }
  .img_meta {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    background: #313131;
    padding: 10px 10px;
    width: 100%;
    border-top: 1px solid #0e0e0e;
    border-bottom: 1px solid #000000;
  }
  .uImgWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }
  .uImg {
    width: 200px;
    height: 200px;
    box-sizing: border-box;
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: 20px;
  }
  .uImg img {
    width: 100%;
    height: 100%;
  }
  .uImg_tag {
    background: white;
    border-radius: 5px;
    color: #222;
    padding: 4px 5px;
    margin-right: 5px;
    text-align: center;
    font-size: 10px;
    text-transform: uppercase;
  }
  .uImgTh {
    margin-right : 5px;
  }
  .imgTags {
    display: flex;
  }
  .imgTitle {
    font-size: 14px;
    margin-bottom: 5px;
  }
  .imgBtn {
    box-sizing: border-box;
    background: #3a82bb;
    color: white;
    padding: 5px;
    text-align: center;
    margin: 5px 0 0 0;
    font-size: 10px;
    cursor: pointer;
  }
  .imgBtn:hover {
    background: #296390;
  }
  .imgBtnDel {
    box-sizing: border-box;
    background: #bb3a3a;
    color: white;
    padding: 5px;
    text-align: center;
    margin: 5px 0 5px 0;
    font-size: 10px;
    cursor: pointer;
    width: 150px;
  }
  .imgBtnDel:hover {
    background: #982222;
  }

  .usrImgP {
    font-size: 17px;
    color: white;
  }
  .usrImgP a {
    color: #7cb9d9ff;
  }
  .noPhotos {
    width: 200px;
    overflow: hidden;
    margin: 10px auto;
  }
  .noPhotos img {
    width: 100%;
  }

  #ui-form {
    max-width: 200px!important;
  }

  #ui-form .slim {
    padding-bottom: 0!important;
  }
  #ui-form .slim-area {
    color: black;
  }
  #ui-form {
    margin: 3px 0 20px 0;
  }

  @media (min-width: 900px) {
    .uImgWrap {
      flex-direction: row;
    }
    .imgBtn {
      font-size: 14px;
      border-radius: 5px;
    }
    .imgBtnDel {
      border-radius: 5px;
    }
    .uImg {
      margin-right: 20px;
      width: 173px;
      height: 173px;
      margin-bottom: 0;
      border-radius: 10px;
    }
    .img_meta {
      border-top: none;
      border-bottom: none;
      border-radius: 10px;
      padding: 20px;
      background: #3b3b3b;
    }
  }





/* EDIT PODCAST */
#editPodcast {
  background: #282828;
  padding: 20px 20px 0 20px;
  font-family: 'Abel', sans-serif;
  font-size: 14px;
}
.sect_head {
  text-align: center;
  background: #1e1e1e;
  padding: 8px 0 5px 0;
  font-size: 12px;
  font-weight: bold;
}
.ePodMeta {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    padding: 0;
}
.ePodImg {
    min-width: 150px;
    min-height: 150px;
    overflow: hidden;
}
.ePodImg img {
    width: 100%;
    height: 100%;
}
.ePodInfo {
    margin-left: 10px;
    width: 100%;
    box-sizing: border-box;
}
.epTitle a {
    font-family: 'bebas';
    text-decoration: none;
    font-size: 26px;
}

.epArtist {
    margin-top: 5px;
}
.epArtist a {
    text-decoration: none;
    font-size: 17px;
}

.ePodMeta .pod_play {
    font-size: 50px;
    cursor: pointer;
    margin-left: 20px;
    margin-top: 2px;
}

#editPodcastUploadBar {
  width: 0%;
  height: 7px;
  background: #354d5d;
  background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%);
  background: -webkit-linear-gradient(top, #a7cfdf 0%, #23538a 100%);
  background: linear-gradient(to bottom, #a7cfdf 0%, #23538a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 );
  transform: 0.2s;
  -webkit-transition: width 0.2s ease-in-out;
  -moz-transition: width 0.2s ease-in-out;
  -o-transition: width 0.2s ease-in-out;
  transition: width 0.2s ease-in-out;
}

.podEdit {
  margin-top: 20px;
}
.epPad {
  margin-right: 20px;
}
.epBut {
  background: #795c38;
}
.epBut:hover {
  background: #4f3d28;
}
.delPc {
  text-align: center;
  background: #863f3f;
  padding: 10px 0 7px 0;
  margin-top: 13px;
}



/*** CHARTS ***/
/* EDIT CHART */
#createChartWrap {
  background: #282828;
  margin-bottom: 30px;
  padding-top: 20px;
}
.createChartWrap .cc_head {
  padding: 20px 0 10px 0;
  text-align: center;
}
.ctTkWrap {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px 0 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  border-bottom: 2px solid #1a1a1a;
}

.ctTkWrap .ci_wrap {
  width: 100%;
  box-sizing: border-box;
  margin-right: 10px;
}

.ctTkWrap .ch_pos {
  font-family: 'bebas';
  font-size: 40px;
  width: 50px;
  text-align: center;
  padding-top: 45px;
}

.ctTkWrap .p-input {
  font-size: 14px!important;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 2px;
}
.ctTkWrap .seg {
  display: flex;
  width: 100%;
}
.ctTkWrap .lb {
  width: 70px;
  padding: 8px 0 4px 5px;
  font-size: 12px;
  color: #595959;
}
.ctTkWrap .cont {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  margin-top: 8px;
  align-items: center;
  justify-content: center;
}

.cbtn-wrap {
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  text-align: center;
  padding-bottom: 30px;
}
.btn-csub {
  display: inline-block;
  padding: 6px 20px 3px 20px!important;
  border: 0;
  background: #435f77;
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-clr {
  display: inline-block;
  padding: 6px 20px 3px 20px!important;
  border: 0;
  background: #b9b9b9;
  color: #1e1e1e;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 20px;
}

#ch-form {
max-width: 200px!important;
width: 200px;
}
#ch-form .slim {
padding-bottom: 0!important;
}
#ch-form .slim-area {
color: black;
}

.botMeta {
  color: black;
  padding: 20px;
  font-size: 13px;
  display: flex;
  box-sizing: border-box;
  width: 100%;
}
.ch-meta {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  width: 100%;
  box-sizing: border-box;
  margin-left: 20px;
}
.ch-input {
  width: 100%;
  padding: 5px;
  font-size: 14px;
  box-sizing: border-box;
  border: none;
}
.ch-txa {
  width: 100%;
  padding: 5px;
  font-size: 14px;
  box-sizing: border-box;
  resize: none;
  height: 116px;
  font-family: 'roboto';
  margin-top: 20px;
  border: none;
}
.ch-txa:focus, input:focus{
  outline: none;
}
.tx_active {
  display: flex;
  padding-bottom: 5px;
  color: #5fafff;
  font-size: 13px;
}

/* DJ PROFILE */
#djProfile {
  background: #282828;
  padding: 20px;
  font-family: 'Abel', sans-serif;
  font-size: 14px;
}
#djProfile .p-cell {
  margin-bottom: 20px;
}
#djProfile textarea {
  width: 100%;
  resize: none;
  height: 250px;
  padding: 10px;
  font-size: 15px;
  font-family: 'Roboto', 'Arial', sans-serif;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
}
#djProfile .p-label {
  margin-bottom: 5px;
}
#djProfile .highlight {
  color: #c6c6c6;
}
#djProfile .h-wrap {
  display: flex;
}
#djProfile .so-icon {
  padding: 8px;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 20px;
  text-align: center;
}

.so-icon.so-facebook {
  background: #3B5998;
}
.so-icon.so-twitter {
  background: #4099ff;
}
.so-icon.so-instagram {
  background: #b338ab;
}
.so-icon.so-youtube {
  background: #ff0707;
}
.so-icon.so-spotify {
  background: #1bae50;
}
.so-icon.so-soundcloud {
  background: #f50;
}
.so-icon.so-mixcloud {
  background: #233746;
}
.so-icon.so-twitch {
  background: #9400FF;
}
.so-icon.so-website {
  background: gray;
}
.so-icon.so-traxsource {
  background: #40a0ff;
}
.so-icon.so-traxsource img {
  width: 100%
}
#djProfile .highlight.bold {
  font-weight: bold!important;
  font-size: 17px!important;
  color: white!important;
  margin-bottom: 5px;
}
#djProfile .info {
  color: gray;
  margin: 10px 0;
  padding: 10px 0 0 0;
  text-align: center;
}

#djProfile .btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 15px 7px 15px
}

/* MANAGE EVENTS */
#listEventsWrap {
  background: #282828;
  padding: 20px;
  font-family: 'Abel', sans-serif;
  font-size: 14px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

/* MANAGE GUESTS */
#listGuestsWrap {
  background: #282828;
  padding: 10px 20px 20px 20px;
  font-family: 'Abel', sans-serif;
  font-size: 14px;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.djGuests {
  background: #282828;
  padding: 10px 0;
  font-family: 'Abel', sans-serif;
  font-size: 14px;
}
.djGuests .guestWrap {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 2px;
  background: #222;
  padding: 10px;
}
.djGuests .guestWrap:nth-child(even) {
  background: #1c1c1c;
}
.djGuests .guest_artwork {
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  flex-shrink: 0;
  margin-right: 20px;
}
.djGuests .guest_artwork img {
  width: 100%;
}
.djGuests .guest_title {
  font-family: 'bebas', 'Arial', sans-serif;
  font-size: 22px;
  margin-top: 3px;
  color: #d0d0d0;
}
.djGuests .guest_pub {
  font-size: 14px;
  margin-top: 5px;
  color: #6fac59;
}
.djGuests .guest_done {
  font-size: 14px;
  margin-top: 5px;
  color: #b35b5b;
}
.djGuests .pod_right {
  margin-left: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.djGuests a.btn-edit {
  background: #595959;
  color: white;
  padding: 5px 10px 2px 10px;
  font-size: 10px;
  transition: 0.2s all;
  margin-right: 10px;
  cursor: pointer;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  margin: 1px 0 13px 0;
  text-decoration: none;
}

.djGuests .btn-del {
  background: #595959;
  color: white;
  padding: 5px 10px 2px 10px;
  font-size: 10px;
  transition: 0.2s all;
  cursor: pointer;
}

.djGuests .dj_pod_head {
    background: #333;
    color: white;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
}

/* ADD GUEST */
#addGuestWrap {
  background: #282828;
  padding: 20px;
  font-family: 'Abel', sans-serif;
  font-size: 14px;
  margin-bottom: 20px;
}
#addGuestWrap textarea {
  width: 100%;
  resize: none;
  box-sizing: border-box;
  padding: 10px;
  font-family: 'Abel', sans-serif;
  font-size: 15px;
  height: 200px;
  margin-bottom: 10px;
}
#addGuestWrap .p-label {
  margin-bottom: 3px;
  font-size: 13px;
}
#addGuestWrap input {
  margin-bottom: 10px;
  border: 0;
}
#addGuestWrap .select-1 {
  display: block;
  font-size: 15px;
  font-family: sans-serif;
  font-weight: normal;
  color: #444;
  line-height: 1.3;
  padding: 9px 2px 7px 4px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #aaa;
  border-top-color: rgb(170, 170, 170);
  border-right-color: rgb(170, 170, 170);
  border-bottom-color: rgb(170, 170, 170);
  border-left-color: rgb(170, 170, 170);
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  border-radius: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom,
  #ffffff 0%, #e5e5e5 100%);
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%, 0 0;
  background-size: .65em auto, 100%;
  margin-bottom: 10px;
}

#gst-form, 
#gst-e-form {
  max-width: 200px!important;
  max-height: 200px;
}
#gst-form .slim, 
#gst-e-form .slim {
  padding-bottom: 0!important;
}
#gst-form .slim-area,
#gst-e-form .slim-area
{
  color: black;
}
#gst-form, 
#gst-e-form {
  margin: 3px 0 20px 0;
}
#addGuestWrap .dual {
  width: 100%;
  box-sizing: border-box;
  display: flex!important;
  margin-bottom: 10px;
}
#addGuestWrap .dual input {
  margin-bottom: 0;
}
#addGuestWrap .btn-add {
  padding: 13px 15px 0 15px;
  border: 0;
  background: #435f77;
  color: white;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 20px;
  font-size: 12px;
}



input #ev-adddj {
  width: 100%;
}

#addGuestWrap .djDiv {
  background: #59754d;
  display: inline-block;
  padding: 7px 10px 5px 10px;
  border-radius: 3px;
  margin-bottom: 10px;
  font-size: 12px;
  transition: 0.2s all;
  margin-right: 5px;
  cursor: pointer;
}


#addGuestWrap .dj-stretch {
  min-width: 40%;
}

.gst-error {
  background: #eaa9a9 !important;
}

.gst-slim-error {
  background: rgba(232, 97, 97, 0.5)!important;
}

.gst-btns {
  display: flex;
}

.btn-submit, .btn-cancel {
  padding: 10px 15px 7px 15px;
  border: 0;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'abel', 'Arial', sans-serif;
}

.btn-submit {
  background: #435f77;
  font-weight: bold;
  margin-right: 20px;
}

.btn-cancel {
  background: #aaa;
  color: #222;
  font-weight: normal;
}


/* FAQ */
.djFaq {
  background: #282828;
  padding: 20px;
  font-size: 15px;
}
.djFaq h5 {
  background: none;
  margin-top: 0px;
  margin-bottom: 1px;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  font-size: 16px;
  color: white;
  border-bottom: 1px solid white;
}
.djFaq p {
  margin: 0;
}
.index_list {
  margin: 0;
  padding: 0px;
  list-style: none;
}
ul.index_list {
  padding: 0;
  margin:0;
}
.faq_warn {
  color: #e66464;
}
.djFaq a {
  color: #74aeca;
}


/********* @v4.1 **********/


















.usr-dpl {
  width:30px;
  margin-right: 5px;
  margin-top: 7px;
}
.usr-dpl img {
  width: 100%
}

.pfl-btn-wrap {
  display: flex;
}


/* Responsive */

@media screen and (max-width: 768px) {
  #topNav {
    display: none;
  }
  #sidebar {
    margin-left: 0;
    max-width: 100%;
    width: 100%;
    margin-top: 20px;
  }
  .djlist {
    width: calc(50% - 10px)!important;
  }
  .djimg {
    height: 100px!important;
    width: 100px!important;
  }
  .djblock {
    font-size: 20px!important;
  }
  .djWrap .dj-meta {
    margin-left: 0!important;
  }
  .djWrap .dj-name {
    font-size: 40px;
    margin-top: 10px;
  }
  #shoutbox {
    top: 70px;
  }
  #shoutbox-content {
    /* height: calc(100vh - 158px); */
    height: calc(100vh - 188px);
    /* height: calc(100vh - 179px); */
    /* height: calc(100vh - 233px); */
  }
  #usersOn-wrap {
    /* height: calc(100vh - 159px); */
    height: calc(100vh - 189px);
  }
  #sbmeta_l {
    display: none;
  }
  .sysmsg {
    font-size: 13px;
  }
  #player {
    height: 70px;
  }
  .p-art {
    height: 50px;
    width: 50px;
    margin-top: 0;
  }
  #p-prevBtn, #p-nextBtn {
    display: none;
  }
  #p-like {
    display: none;
  }

  #emojis {
    bottom: 88px;
  }

  .usr-dpl {
    margin-top: 17px;
  }

  .pfl-btn-wrap {
    justify-content: center;
  }
  #um_account {
    margin-right: 10px;
  }
  .top-left {
    margin-left: 5px;
  }
  #um_menu,
  #um_messaging,
  #um_notifs {
    margin-right: 10px;
  }
  .awardWrap {
    width: 95px;
  }
}


/* Start Responsive */

@media (min-width: 768px) { 
  .header {
    padding: 0 25px;
  }
  #mob_listen {
    display: none!important;
  }
  #content {
    margin: 0 20px 0 25px;
  }
  #sidebar {
    margin: 0 25px 0 0;
  }
  #analyser_r {
    display: block;
  }
  canvas {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    display: block;
  }
  #analyser_r {
    margin-top: -45px;
  }
  #p-meta {
    display: block;
    margin-top: 15px;
  }
  .p-art {
    margin-left: 0;
  }
  .player-m {
    margin-top: 0;
    width: 40%;
    flex-direction: column;
  }
  .p-controls {
    display: flex;
    margin: 10px auto 0 auto;
    color: #c8c8c8;
    z-index: 100;
  }
  .progress-wrap {
    margin: 0;
    width: 100%;
  }
  .player-wrap {
    margin: 0 auto;
  }
  #m-title {
    display: none;
  }

  .messagingWrapper {
    top: 103px;
  }
  .messageList {
    height: calc(100vh - 193px);
  }
  .messageOpen {
    height: calc(100vh - 193px);
  }
  #msg_emojis {
    bottom: 164px;
  }

  .fdiv {
    padding-left: 50px;
  }

  .fpWrap {
    margin-top: 0;
    background: #151515;
  }

  #podcastView .podcastTop {
    flex-direction: row!important;
  }

  #podcastView a.podImg {
    width: 200px!important;
    height: 200px!important;
  }

  .podcastBtnWrap {
    margin: 30px 0 29px 0 !important;
  }

  #podcastView .podcastMeta {
    margin-left: 20px!important;
  }

  #fpOnImg {
    width: 180px;
    height: 180px;
  }

  #fp_onair .onair {
    margin-bottom: 10px;
  }

  .fpMeta {
    margin-left: 20px;
  }
  
  ._m-logo {
    display: none;
  }
  #_searchbox {
    display: flex;
  }
  .signup_wrap {
    max-width: 500px;
    margin: 0 auto;
  }
  #tnl {
    display: flex;
  }
  .s-box {
    background: #333;
    color: #797979;
    padding: 7px;
    box-sizing: border-box;
    width: 200px;
    display: flex;
    font-size: 16px;
    border-radius: 3px;
    font-family: 'abel', sans-serif;
  }
  #search {
    font-family: 'abel', sans-serif;
  }
  .search-input {
    width: 100%;
  }
  #_m-search,
  #_m-search-close,
  #_m-nav-menu,
  #_m-user-menu {
    display: none;
  }
  #_user-menu {
    display: flex;
  }

  .signup_wrap {
    background: #333;
    margin-top: 30px;
  }

  .footer-wrap {
    max-width: 1600px;
    padding: 0 30px;
    display: flex;
  }

  .footer-flex {
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
  }

  .footer-flex div h4 {
    font-size: 13px;
  }

  .footer-logo {
    padding-right: 30px;
  }
  
  .footer-flex div {
    display: block;
    margin:0 0 20px 0;
    box-sizing: border-box;
  }

  .f_right {
    display: flex!important;
    margin-left: auto!important;
  }

  .footer-flex div a {
    font-size: 13px;
  }

  .footer-right {
    width: 100px;
    box-sizing: border-box;
    margin-top: 20px;
  }

  .login-forgot {
    max-width: 600px;
    overflow-y: auto;
    box-sizing: border-box;
    margin: 40px auto 20px auto;
  }

  .modal__container {
    width: 600px;
    margin: 0;
  }
  
  .modal__close {
    font-size: 1.4rem;
  }

  .modal__content {
    display: flex;
  }
  
  .modal__login {
    border-bottom: none;
    border-right: 2px solid #222;
    padding: 0 20px 10px 0;
    flex-grow: 1;
    flex-basis: 0;
  }

  #modal-1-content .modal__login { 
    padding: 0 20p 10px 0!important;
  }
  
  .modal__create {
    padding-left: 20px;
    flex-grow: 1;
    flex-basis: 0;
    width: 100%;
  }

  .disab img {
    width: 458px;
  }

  #nav-menu {
    display: flex;
  }
  #layout {
    flex-direction: row;
  }
  #player {
    padding: 0 30px;
  }
  .player-l, .player-r {
    width: 30%;
  }
  .playerMeta {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    min-width: 47%;
    max-width: 47%;
    box-sizing: border-box;
  }
  #pl-toggle {
    margin: 10px 0 0 auto;
  }
  #previousBtn,
  #nextBtn {
    display: block;
  }
  #waveform {
    width: 48%;
    margin: 20px 0 0 20px;
  }
  
  .dropdown {
    position: relative;
  }
  #user-dropdown-content {
    min-width: 160px;
    text-align: left;
    font-size: 15px;
    position: absolute;
    top: 70px;
    background: #515151;
    font-family: 'abel', sans-serif;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 3;
    right: 0;
  }
  
  .right_align {
    margin: 0 0 0 20px!important;
  }
  .single {
    flex-direction: row-reverse;
  }
  .mini-cover {
    display: none!important;
  }
  .single_meta {
    padding: 0;
  }
  .tk-meta-btwrap {
    padding: 0;
    flex-direction: column-reverse;
  }
  .bigwave-wrap {
    margin-bottom: 15px;
  }
  .bigwave {
    height: 120px;
  }
  .bigwave img {
    height: 120px;
  }
  .bt-meta-wrap {
    border-top: none;
    margin-top: 0;
  }
  .single .cover {
    display: inline-block;
    width: 300px;
    min-width: 300px!important;
    outline: none!important;
    text-align: center;
    margin-left: 20px;
  }
  .single_meta {
    display: inline-block;
    height: 300px;
    box-sizing: border-box;
    background: #202020;
    padding: 20px !important;
  }
  .bt-meta-wrap {
    padding: 0;
  }
  .single .cover img {
    width: 100%;
    outline: none!important;
  }
  .flex-table-meta {
    display: flex;
  }
  .mob-table-meta {
    display: none;
  }
  .tk-share-wrap {
    margin: 3px 0 0 15px;
  }
  .tk-btn-wrap {
    margin-top: 20px;
  }
  .grid-item {
    width: calc(16.6666% - 10px);
  }
  .grid-item.fpage {
    width: calc(50% - 10px);
  }
  .single.srel {
    flex-direction: row;
    padding: 0;
  }
  .single.srel .cover {
    margin: 0 20px 0 0;
    padding: 0;
    width: 300px;
  }
  .ident-sm {
    font-family: 'abel', sans-serif;
  }
  .item-col.rtn {
    display: inline-block;
  }
  
  .item-col.c1 {
    width: 25%;
  }
  
  .item-col.c2 {
    width: 25%;
  }
  
  .item-col.c3 {
    width: 20%;
    display: inline-block;
  }
  
  .item-col.c4 {
    width: 10%;
    display: inline-block;
  }

  .btn-download-sm {
    display: none!important;
  }

  .btn-download,
  .btn-download-mod {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
  }

  .ohl {
    float: left;
  }

  .ohr {
    float: right;
    text-align: right;
  }

  .c_offset {
    left: 30px!important;
  }

  .lib {
    width: calc(25% - 10px)!important;
  }

  .item-row {
    line-height: 1.1rem;
  }

  .pl-item-col.c1 {
    width: 30%;
  }

  .pl-item-col.c2 {
    width: 25%;
    display: inline-block;
  }
  .pl-item-col.c3 {
    width: 15%;
    display: inline-block;
  }
  
  .pl-item-col.c4 {
    width: 5%;
    display: inline-block;
  }
  #pl-toggle {
    top: -35px;
    right: 30px;
  }

  .player-btns {
    margin: 0 0 0 17px;
    border-right: 2px solid #1e1e1e;
    padding-right: 17px;
  }
  .support-wrap {
    background:#202020;
    padding: 30px 30px 30px 30px;
    flex-direction: row;
  }

  .playerMeta {
    margin-right: -20px;
  }
  
  .p1 {
    width: 45%;
  }

  .p2 {
    width: 53%
  }
  
  .p2 {
    margin-left: auto;
  }
  
  .support-wrap .p1 {
    background: transparent;
    padding: 0;
  }
  
  .support-wrap .p2 {
    background: transparent;
    padding: 0;
  }

  .profile-wrap {
    flex-direction: row;
  }
  
  .p-info {
    margin: 20px 0 39px 0;
  }

  .vh-center {
    height: 100vh;
  }

  .vh-center img {
    width: 60%;
  }

  .genBox {
    width: 450px;
    margin:0 auto;
  }

  .login-signup {
    max-width: 750px;
    margin: 50px auto;
  }

  .genBox.activated {
    width: 700px!important;
  }

  .big-notice {
    text-align: center;
  }

  .release_hype.coll {
    padding: 0;
    margin: 15px 0 0 0;
  }

  #volume {
    display: block;
  }

  .singleChartWrap {
    padding: 20px;
    background: #333;
  }

  .singleChartWrap .c-top {
    flex-direction: row;
    padding: 0;
  }

  .singleChartWrap .cover {
    width: 200px;
    height: 200px;
    margin: 0 20px 0 0;
  }

  .split_content {
    display: flex;
    flex-direction: row;
  }

  .l-content {
    margin-right: 20px;
  }

  .fpGstImg {
    width: 80px;
  }
  .fpGstName {
    font-size: 30px;
  }
  .messageList {
    width: 350px;
    border: none;
  }
  .msg_list_meta {
    display: block;
  }
  .messages {
    height: calc(100vh - 183px);
  }
  .messageWrite {
    padding: 5px;
  }
  .messageWrite .pb-left {
    margin-left: 5px;
  }
  .cvnMeta {
    margin-left: 10px;
  }
  .usrWrap .usr-meta {
    margin-left: 20px;
  }
  .usrWrap {
    flex-direction: row;
    align-items: left;
  }
  .usrWrap .usr-name {
    margin-top: 0;
  }
  .usrWrap .usr-uname {
    text-align: left;
  }
  .usrWrap .usr-location {
    justify-content: left;
  }
  .so_meta {
    flex-direction: row;
  }
  .so_btns {
    margin: 3px 0 0 auto;
    text-align: right;
  }

  /* refactored from old 800 */
  .fpLogo {
    display: block;
  }
  #top-listen {
    display: block;
  }
  #main {
    margin: 120px auto 0 auto;
  }
  .flex-table .column {
    flex: 1
  }
  .flex-table .double-column {
    flex: 2
  }
  .player-r {
    display: flex;
  }
  .grid {
    margin: 0 -5px 10px -5px;
  }
  .shoutbox-footer {
    bottom: 91px;
    position: fixed;
    /* height: 59px; */
    height: 89px;
  }

  .div_angel {
    margin-top: 3px; 
  }
  
  .div_moderator {
    margin-top: 3px; 
  }
  
}

@media (min-width: 900px) {
  .grid-item.fpage {
    width: calc(33.3333% - 10px);
  }
  .fplr.items.grid>div:last-child {
    display: none;
  }
  .evMeta {
    flex-direction: row!important;
  }
  .evMeta .evmR {
    margin-left: auto;
  }
  .evMeta .evCover {
    width: 300px;
  }
  .evtBar .eTitle {
    font-size: 40px!important;
  }
  .evtBar .eDate {
    font-size: 16px!important;
  }
  .usch_wrap {
    flex-direction:row!important;
  }
  .usch_right {
    margin: 0 0 0 20px!important;
  }
  #uInfo, #dInfo {
    flex-direction: row!important;
  }
  .usch_avatar {
    width: 300px!important;
    height: 300px!important;
  }
  .modOrInfo {
    padding: 0!important;
    font-size: 13px!important;
  }
  .select-mod {
    width: 550px!important;
  }
  .select-mod .djsel {
    width: 300px!important;
  }
  .select-mod-time {
    width: 100px!important;
  }
  .uText {
    width: 550px!important;
  }
  .usch_btn{
    width: 175px!important;
    font-size: 13px!important;
  }
  .modset_btn {
    margin-left: 10px!important;
  }
  .cueInfoText{
    font-size: 13px!important;
    padding: 0!important;
  }
  .orbtns {
    display: flex;
    margin: 0px!important;
  }
  .s-grid-item {
    width: 20%!important;
  }
  .s-stats_wrap {
    padding: 10px 30px!important;
  }
  .love-btn,
  .bomb-btn,
  .send-btn {
    margin-right: 10px;
  }
  #animation-picker {
    top: -132px!important;
  }
  .anim-index {
    padding: 15px 20px!important;
    height: 130px!important;
  }
  
  .anim-select {
    max-width: 40px!important;
    max-height: 30px!important;
  }
  .anim-select img {
    height: 30px!important;
  }
  .awImg {
    width: 60px;
  }
  .awardWrap {
    width: 80px;
  }
  .awMeta {
    font-size: 10px;
  }
  .nowWrap {
    padding: 0px!important;
  }
}

@media (min-width: 1055px) { 
  .fpRight {
    display: flex;
  }
  .oa_dj {
    font-size: 40px;
    margin-bottom: 10px;
  }
  .nx_hr {
    display: block;
  }
  
  .nx_dj {
    font-size: 30px;
  }
  .logo {
    flex-shrink: 0;
    width: 50px;
    margin-left: 6px;
  }

  a.logo:link {
    width: 46px;
    height: 46px;
    margin-top: 12px;
    display: block!important;
    -webkit-transition-duration: 1.4s;
    -moz-transition-duration: 1.4s;
    -o-transition-duration: 1.4s;
    transition-duration: 1.4s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
  }
  .eventRight{
    display: block!important;
  }

  .sbadmin_wrap {
    flex-direction: row!important;
  }
  .sb_admin_l {
    margin-right: 20px!important;
    width: 35%!important;
  }
  #sbadmin_info_btn {
    margin: 0 0 20px 0!important;
  }
  .sbadmin_info {
    margin-top: -19px!important;
  }
  .sb_admin_r {
    width: 65%!important;
  }
}

@media (min-width: 1200px) { 
  #um-name {
    display: inline-block;
    margin: 6px 0 0 7px;
  }
  .grid-item.fpage {
    width: calc(25% - 10px);
  }
  .fplr.items.grid>div:last-child {
    display: inline-block;
  }
}
.pp_btns {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  box-sizing: border-box;
  margin: 30px 0;
}
.ppc {
  display: flex;
  flex-direction: column;
  color: #161616;
  background: white;
  align-items: center;
  font-weight: normal;
  font-size: 13px;
}
.ppc img {
  margin-bottom: 5px;
}


/* DJCP Mixtapes */
#mixtapes {
  background: #282828;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  padding-top: 20px;
}
.mxtWrap {
  padding: 10px 0px;
  border-top: 3px solid #1e1e1e;
}
.mxtTitle {
  font-weight: bold;
  font-size: 16px;
  padding: 0 10px;
  margin-bottom: 5px;
}
.mxtEnabled {
  background: #2d482d;
  color: white;
  padding: 5px;
  font-size:12px;
  text-align: center;
  margin: 8px 0 3px 0;
}
.mxtDisabled {
  background: #795739;
  color: white;
  padding: 5px;
  font-size:12px;
  text-align: center;
  margin: 8px 0 3px 0;
}
.mxtDuration, .mxtUploaded, .mxtPlayCount, .mxtLastPlayed {
  color: grey;
  padding: 0 10px;
}
.mxtBright {
  color: white;
}
.mxtPad {
  margin-bottom: 20px!important;
}
.mxtLnk {
  margin-top: 10px;
  text-align: center;
  display: block;
  text-decoration: none;
  font-size: 13px;
  color: #6ba2c4;
}


/* DJCP Shifts */
.schedule-wrap {
  padding: 0;
  box-sizing: border-box;
}
.schedule-wrap .legend {
  background: #e4e4e4;
  border-left: 1px solid #131313;
  border-right: 1px solid #131313;
  color: #242424;
  padding: 5px;
  font-size: 10px;
  font-weight: 700;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: left;
  justify-content: left;
  margin-bottom: 20px;
}
.legend .l-info {
  margin: 2px 10px 0;
}
.legend .l-biwk, .legend .l-week {
  color: #fff;
  padding: 2px 5px;
  margin-right: 10px;
}
.legend .l-week {
  background: #000;
}
.legend .l-biwk {
  background: #333194;
}
.legend .l-mont {
  background: #b32929;
  color: #fff;
  padding: 2px 5px;
  margin-right: 10px;
}
.legend .l-live {
  background: #b5682e;
  color: #fff;
  padding: 2px 5px;
}
.legend .l-plist, .legend .l-shft {
  color: #fff;
  padding: 2px 5px;
  margin-left: 10px;
}
.legend .l-shft {
  background: green;
}
.shift {
padding-bottom: 20px;
width: 100%;
box-sizing: border-box;
}
.shift .banner {
text-align: center;
background: #775a3d;
padding: 4px 0 3px;
border: 1px solid #131313;
font-size: 14px;
color: #fff;
font-weight: 700;
}
.sch-table {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.sch-table, .shift {
  width: 100%;
  box-sizing: border-box;
}
.sch-table .col1, .sch-table .col2, .sch-table .col3, .sch-table .col4, .sch-table .col5, .sch-table .col6, .sch-table .col7 {
  border: 1px solid #131313;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-width: 14.28%;
  box-sizing: border-box;
  background: #bfbfbf;
}
.sch-table .col-hr {
  border-bottom: 2px solid #131313;
  padding: 5px;
  text-align: center;
  background: #616161;
  color: #fff;
  font-size: 14px;
  margin-bottom: 2px;
  font-weight: 700;
}
.sch-table .col-cell {
  background: #000;
  color: #fff;
  border-bottom: 1px solid #bfbfbf;
  border-left: 2px solid #bfbfbf;
  border-right: 2px solid #bfbfbf;
  padding: 2px 5px;
  font-size: 10px;
}
.sch-table .weekly {
  background: #000;
}
.sch-table .bi-weekly {
  background: #333194;
}
.sch-table .monthly {
  background: #b32929;
}
.shift .active {
  background: green;
}
.shift .b-live {
  font-size: 7px;
  color: #b5682e;
  margin-right: 5px;
}

/* Animation Picker */
#animation-picker {
  position: absolute;
  top: -242px;
  width: 100%;
  background: #f7f7f7;
  z-index: 1;
  padding: 0;
  border-top: 1px solid #d9d9d9;
  box-sizing: border-box;
  display: none;
}

.anim-index {
  width: 100%;
  height: 240px;
  padding: 10px;
  overflow-y: auto;
  box-sizing: border-box;
}

.anim-select {
  max-width: 30px;
  max-height:30px;
  overflow: hidden;
  cursor: pointer;
  display: inline-block;
  margin-right: 10px;
}

.anim-select img {
  width: 100%;
  height: auto;
}

/* giphy search new */
#giphy-picker {
  position: absolute;
  top: -301px;
  width: 100%;
  background: #f7f7f7;
  z-index: 1;
  padding: 0;
  border-top: 1px solid #d9d9d9;
  box-sizing: border-box;
  display: none;
}
#gip-results {
  overflow-y: auto;
  height: 223px;
  box-sizing: border-box;
  padding: 0 8px;
}
#gip-results img {
  cursor: pointer;
  opacity: 0.7;
  max-height: 150px;
  margin: 0 2px;
  transition: 0.2s all;
}

#giphySearch {
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  /* margin-bottom: 5px; */
  border-bottom: 1px solid #d2d1d1;
  background: #eaeaea;
}
#giphy-s {
  padding: 5px; 
  box-sizing: border-box;
  border: 1px solid #d0d0d0;
  flex-grow: 1;
}
.giphy-close {
  outline: none;
  border: 0;
  padding: 0;
  font-size: 22px;
  background: none;
  cursor: pointer;
  color: #d04f4f;
}
input[type=submit] {
    background: #55728a;
    color: white;
    border: none;
    font-weight: bold;
    cursor: pointer;
    -webkit-border-radius: 0px;
    border-radius: 0px; 
    font-size: 12px;
    margin: 0 10px;
    padding: 0 10px;
    box-sizing: border-box;
    transition: all 0.2s;
}

.giphybrand {
  height: 20px;
  background: #474747;
  text-align: center;
  padding: 3px 0 5px 0;
  width: 100%;
}
.giphybrand img {
  height: 100%;
}
.resIni {
  text-align: center;
  color: #acacac;
  margin: auto;
  margin-top: 90px;
}

.gSwitch {
  position: relative;
  display: flex;
  width: 54px;
  margin-left: 10px;
}

*:focus
{
    outline: none;
}

.button-cover, .knobs, .layer
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.button
{
    position: relative;
    top: 50%;
    width: 54px;
    height: 30px;
    margin: -15px auto 0 auto;
    overflow: hidden;
}

.button.r, .button.r .layer
{
    border-radius: 100px;
}

.button.b2
{
    border-radius: 2px;
}

.checkbox
{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.knobs
{
    z-index: 2;
}

.layer
{
    width: 100%;
    background-color: #bdccd9;
    transition: 0.3s ease all;
    z-index: 1;
}

/* Button 1 */
#button-1 .knobs:before
{
    content: 'G';
    position: absolute;
    top: 3px;
    left: 4px;
    width: 16px;
    height: 6px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 0.6;
    padding: 9px 4px;
    background-color: #517593;
    border-radius: 50%;
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#button-1 .checkbox:checked + .knobs:before
{
    content: 'D';
    left: 26px;
    background-color: #589153;
}

#button-1 .checkbox:checked ~ .layer
{
    background-color: #c5cec4;
}

#button-1 .knobs, #button-1 .knobs:before, #button-1 .layer
{
    transition: 0.3s ease all;
}
/**************************** */

.blur {
  filter: blur(7px);
}

/* Comments */
.postComment {
  padding: 10px;
  display: flex;
  flex-direction: column;
  border-bottom: 5px solid #1e1e1e;
  margin-top: -20px;
  background: white;
}
.podComPost {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  resize: none;
  font-family: 'Robot', Arial, sans-serif;
  border: none;
}
.postCommentActs {
  display: flex;
}
.comBtn {
  font-size: 13px;
  padding: 5px 15px;
  margin-left: auto;
}
.sinCom {
  display: flex;
  box-sizing: border-box;
  border-top: 2px solid #1e1e1e;
  border-bottom: 2px solid #1e1e1e;
  padding: 10px 0;
}

.sinCom:nth-child(odd) {
  background: #282828;
}
.comMeta {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}
.comAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 10px;
  background: #e1e1e1;
  flex-shrink: 0;
}

.comAvatar img {
  width: 100%;
}

.comName {
  font-size: 14px;
}

.comName a {
  text-decoration: none;
  font-weight: bold;
}
.comAt {
  margin: -3px 0 5px 0;
  font-size: 12px;
  color: grey;
}

.comMsg {
  border-bottom: 1px solid #686868;
  font-size: 14px;
  color: #dbdbdb;
  padding: 8px 0;
  margin: 0 10px 0 0;
}

.comBot {
  display:flex;
  padding-top: 5px;
  margin-right: 10px;
  align-items: center;
}
.comDate{
  font-size: 11px;
  color: gray;
  margin-left: auto;
}
.comAct {
  font-size: 11px;
  color: gray;
  margin-right: 10px;
  transition: 0.2s all;
  cursor: pointer;
}

.com-edit-acts {
  display: flex;
}
.com-guest {
  text-align: center;
  margin: -10px 0 20px 0;
}
.gst_icon {
  font-size: 50px;
}
.comReplyIco {
  font-size: 20px;
  padding: 0px 15px 0 15px;
  color: #7b7b7b;
}
.postReply {
  display: flex;
  padding: 20px;
  box-sizing: border-box;
}
.repAvatar {
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 10px;
  background: #e1e1e1;
}
.repAvatar img {
  width: 100%;
}
.repName {
  font-size: 13px;
}

.repName a {
  text-decoration: none;
  font-weight: bold;
}

.rep-message {
  margin-bottom: 0;
}
.repBtn {
  display: flex;
  align-items:center;
  padding: 0 15px;
}
.repCom {
  display: flex;
  box-sizing: border-box;
  border-bottom: 1px solid #1e1e1e;
  padding: 10px 0;
  background: #2b2f33;
}

.repCom:nth-child(even) {
  background: #343a40;
}
.podComRep {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font-size: 14px;
  resize: none;
  font-family: 'Robot', Arial, sans-serif;
  border: none;
}

/* DJCP Podcasts */
.pyTkWrap {
  width: 100%;
  box-sizing: border-box;
  margin-top: 20px;
  background: #1c1c1c;
  padding: 10px;
}

.pyTkWrap .p-input {
  font-size: 14px!important;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 2px;
}

.pyTkWrap .seg {
  display: flex;
}
.pyTkWrap .lb {
  width: 70px;
  padding: 8px 0 4px 5px;
  font-size: 12px;
  color: #595959;
}
.pyTkWrap .cont {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  margin-top: 8px;
  align-items: center;
  justify-content: center;
}
.pyTkWrap .btn-add {
  display: inline;
  padding: 7px 15px 3px 15px!important;
  border: 0;
  background: #3a5e2d;
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.pyTkWrap .btn-del {
  display: inline;
  padding: 7px 15px 3px 15px!important;
  border: 0;
  background: #404040;
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.pyTkWrap .btn-rem {
  display: inline;
  padding: 7px 15px 3px 15px!important;
  border: 0;
  background: #404040;
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 20px;
}

/* DJCP Podcasts */
.pyReleasesWrap {
  width: 100%;
  box-sizing: border-box;
  margin-top: 20px;
  background: #1c1c1c;
  padding: 10px;
}

.pyReleasesWrap .p-input {
  font-size: 14px!important;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 2px;
}

.pyReleasesWrap .seg {
  display: flex;
}
.pyReleasesWrap .lb {
  width: 110px;
  padding: 8px 0 4px 5px;
  font-size: 12px;
  color: #595959;
}
.pyReleasesWrap .cont {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  margin-top: 8px;
  align-items: center;
  justify-content: center;
}
.pyReleasesWrap .btn-add {
  display: inline;
  padding: 7px 15px 3px 15px!important;
  border: 0;
  background: #3a5e2d;
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.pyReleasesWrap .btn-del {
  display: inline;
  padding: 7px 15px 3px 15px!important;
  border: 0;
  background: #404040;
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.pyReleasesWrap .btn-rem {
  display: inline;
  padding: 7px 15px 3px 15px!important;
  border: 0;
  background: #404040;
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 20px;
}

.pchead {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  font-size: 15px;
}
#pcount {
  font-weight: bold;
}

.bbtn-wrap {
  width: 100%;
  box-sizing: border-box;
  margin-top: 20px;
  text-align: center;
}
.btn-psub {
  display: block;
  padding: 7px 0 3px 0!important;
  border: 0;
  background: #435f77;
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}


/* New Notifications */
#top_actions {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  position: relative;
}
#um_notifs, 
#um_messaging, 
#um_account,
#um_menu {
  background: #383737;
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  text-align: center;
  align-items: center;
  font-size: 17px;
  color: #717171;
  cursor: pointer;
  transition: 0.2s;
  margin-left: 20px;
}

#user_avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
  background: #d5d5d5;
}
.um_alert{
  background: #9d4343;
  color: white;
  font-size: 11px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: -18px -10px 0 -10px;
}
.top-search {
  margin-right: 0!important;
}
.s-box {
  padding: 12px;
  border-radius: 0;
  width: 250px;
}
#um_dropdown_acc,
#um_dropdown_not,
#um_dropdown_msg,
#um_dropdown_menu {
  position: absolute;
  top: 65px;
  background: white;
  border-radius: 3px;
  padding: 10px;
  color: #333;
  font-size: 14px;
  min-height: 250px;
  min-width: 300px;
  box-shadow: -1px 10px 15px #131313;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  right: 0;
  z-index: 100;
  overscroll-behavior: contain;
}
#um_dropdown_menu {
  padding: 0!important;
}
#um_dropdown_not {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

#um_dropdown_acc .profile {
  display: flex;
  width: 100%;
  align-items: center;
  padding:5px;
  transition: 0.2s all;
  box-sizing: border-box;
  cursor: pointer;
  color: black;
  text-decoration: none;
}

#um_dropdown_acc .left {
  border-radius: 50%;
  width:50px;
  height:50px;
  overflow: hidden;
  margin-right: 10px;
}
#um_dropdown_acc img {
  width: 100%;
}
#um_dropdown_acc .name {
  font-weight: bold;
  font-size: 15px;
}
#um_dropdown_acc .txt {
  font-size: 11px;
  color: gray;
}
.menu_spacer {
  width: 100%;
  height: 1px;
  border-bottom:1px solid #d5d5d5;
  margin: 5px 0;
}
.m_item, .nt_item {
  display:flex;
  width: 100%;
  align-items: center;
  padding:5px;
  transition: 0.2s all;
  box-sizing: border-box;
  cursor: pointer;
}
.m_item a, .nt_item a {
  text-decoration: none;
}
.nt_item {
  padding: 10px;
}
.mi_left {
  background: #a2a2a2;
  border-radius: 50%;
  width: 27px;
  height: 27px;
  overflow: hidden;
  align-items: center;
  display:flex;
  justify-content: center;
  margin-right: 10px;
}
.mi_icon {
  font-size: 16px;
  color: #f2f2f2;
}
.mi_right{
  color: #353535;
}
.nt_item {
  flex-direction: column;
  flex-shrink: 0;
}
.nt_left {
  background: #a2a2a2;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  overflow: hidden;
  align-items: center;
  display:flex;
  justify-content: center;
  margin-right: 10px;
  flex-shrink: 0;
}
.nt_left img {
  width: 100%;
}
.nt_right {
  font-size: 14px;
  width: 200px;
}
.nt_date {
  font-size: 12px;
  color: #435f77;
}
.nt_top {
  display: flex;
  flex-direction: row;
}
.nt_btns {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 0 0 60px;
}
.nt_name {
  text-decoration: none;
  font-weight: bold;
  color: black;
  cursor: pointer;
}
.btn.nta {
  padding: 5px 25px;
  font-weight: normal;
}
.btn.ntr {
  padding: 5px 25px;
  font-weight: normal;
  margin-left: auto;
  background: grey;
}
.nt_empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ccc;
  padding-top: 50px;
}
.nt_ico {
  font-size: 55px;
  margin-bottom: 10px;
}
#not_alert,
#msg_alert {
  display :none;
}
#um_dropdown_msg {
  width: 350px;
  max-height: calc(100vh - 150px);
  overflow: auto;
}
#um_dropdown_not {
  max-height: calc(100vh - 150px);
}
.msg_item{
  display: flex;
  color: black;
  font-size: 14px;
  text-decoration: none;
  padding: 10px;
  box-sizing: border-box;
  max-width: 360px;
  align-items: center;
  cursor: pointer;
  flex-shrink:0;
}
.msg_avt {
  display: flex;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #d5d5d5;
}
.msg_avt img {
  width: 100%;
}
.msg_blk {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin-left: 10px;
}
.msg_fname {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 230px;
}
.msg_msg {
  color: #444;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 230px;
}
.msg_dte {
  font-size: 11px;
  color: #375b8a;
}
.msg_seen {
  margin-left: auto;
  color: #d5d5d5;
  font-size: 10px;
}
.msg_not_seen {
  margin-left: auto;
  color: #436b9f;
  font-size: 10px;
}
.msg_index {
  color: grey;
  text-decoration: none;
  text-align: center;
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg_left {
  background: #a2a2a2;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  overflow: hidden;
  align-items: center;
  display: flex;
  justify-content: center;
  margin-right: 10px;
}
.msg_icon {
  color: white;
}
.msg_me {
  color: #a6a6a6;
}
.fade {
  opacity: 0.6;
}

.tab_active {
  background: #4f4f4f!important;
  color: white!important;
}
#um_menu {
  display: none;
}
.umenu_item {
  display: flex;
  color: black;
  font-size: 14px;
  text-decoration: none;
  padding: 10px;
  box-sizing: border-box;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
#um_dropdown_menu {
  min-width: 100%;
  border-radius: 0;
  height: calc(100vh - 50px);
  background: #282828;
}
.umenu_a {
  color: #d7d7d7;
  text-decoration: none;
  font-size: 26px;
  padding: 5px 5px;
  text-align: center;
  border-bottom: 1px solid #111111;
  border-top: 1px solid #404040;
}


@media screen and (max-width: 768px) {
  #top_actions {
    margin-right: 5px;
  }
  #um_dropdown_msg,
  #um_dropdown_not {
    max-height: calc(100vh - 225px);
    -webkit-overflow-scrolling: touch;
  }
  .msg_item,
  .nt_tem {
    padding: 5px;
  }
  #um_menu {
    display: flex;
    margin-top: 15px;
  }
}
.d_loader {
  display: flex;
  justify-content: center;
  padding-top: 80px;
}



/* Spreadshirt Stuff */
.SprdMain .sprd-header__title {
  line-height: 38px!important;
  background: #151515;
  font-size: 1.1em!important;
  padding: 0 15px!important;
}
.SprdMain .sprd-header__burgerbutton {
  background: #151515!important;
  color: #fff!important;
}
.sprd-bg-s3 {
  background-color: #fff!important;
}
.SprdMain .sprd-navigation {
  border-top-style: none!important;
  border-top-width: 0!important;
}
.SprdMain .sprd-department-filter {
  background: #333!important;
}
.SprdMain .sprd-breadcrumb__item {
  color: white!important;
}
.SprdMain .sprd-header__actions {
  background: #151515!important;
}
.SprdMain .sprd-department-filter__openmenu > .sprd-nav-link {
  font-weight: 400!important;
  color: #d5d5d5!important;
  font-size: 0.9em!important;
}
.SprdMain .sprd-basket-indicator__icon {
  height: 1.7em!important;
  width: 1.7em!important;
}
.SprdMain .sprd-product-list-item {
  background: #151515!important;
}
.SprdMain .sprd-listpage {
  margin: 0 0 0 0!important;
}
.SprdMain h1 {
  font-size: 1em!important;
}
.SprdMain .sprd-product-list-item {
  width: calc(25% - 20px)!important;
}
.sprd-c-s2 {
  color: #FFF!important;
}
.customPageBackground {
  background-color: #282828!important;
  box-sizing:border-box!important;
}
.SprdMain {
  margin: 10px auto!important;
  max-width: 1600px!important;
  width: 100%;
  box-sizing: border-box!important;
}
.SprdMain .sprd-detail-images__large-images {
  max-width: 600px!important;
}
.SprdMain .sprd-detail-block__images {
  width: 50%!important;
}
.sprd-footer {
  max-width: 1600px!important;
}

.SprdMain #sprd-content {
  max-width: 1600px!important;
}
#myShop {
  box-sizing: border-box!important;
  max-width: 1600px!important;
}

.SprdMain .sprd-detail-page {
  width: calc(100% - 50px)!important;
}

@media only screen and (max-width: 1000px) {
  .SprdMain .sprd-product-list-item {
    width: calc(33.3333% - 20px)!important;
  }
}

#liked_podcasts {
  margin-bottom: 120px;
}

/* reactions */
.react {
  background: #f0f0f0;
  margin-right: 10px;
  transition: 0.2s all;
  width: 20px;
  text-align: center;
  display: flex;
  font-size: 12px;
}
.react .open {
  margin: 2px 5px 0 4px;
  cursor: pointer;
  color: #959595;
}
.reWrap {
  padding: 1px 0 0 0;
  display: flex;
  font-size: 13px;
  height: 20px;
}
.rct_icon {
  padding: 0 4px;
  cursor: pointer;
}

.uo_divider {
  width: 100%;
  height: 1px;
  background: #9f9f9f;
  margin: 20px 0;
}

/* Waveform */
.waveHolder {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px 20px 20px;
  height:50px;
  margin-bottom: 20px;
}
#waveWrapper {
  width: 100%;
  box-sizing: border-box;
  height: 50px;
  max-width: 1140px;
}
#defaultBar {
  width: 100%;
  position: relative;
  height: 50px;
}
#waveProgressBar {
  position: absolute;
  height: 50px;
  background: white;
  width: 0;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.2s;
}

 /* Tooltip container */
 .tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  color: white;
  text-align: left;
  font-size: 11px;
  background: #262626;
  padding: 5px;
  position: absolute;
  z-index: 1;
  white-space: nowrap;
  top: -25px;
  text-align: center;
  width: auto;
  opacity: 0;
  transition: opacity 0.3s;
}

.tt_cnt {
  display: flex;
}

.tt_name {
  text-decoration: none;
  color: #688ad0;
  font-size: 11px;
}
.tt_msg {
  margin-left: 5px;
  color: #ccc;
}

#waveLoading {
  display: none;
  width: 100%;
  text-align: center;
  background: #242424;
  height: 50px;
}
#waveLoading img {
  height: 30px;
  width: 30px;
  margin-top: 12px;
}
#timedComments {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  margin-top: -20px;
}
.tcom {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
.tc_avatar {
  width: 20px;
  height: 20px;
  background: white;
}
.tc_avatar img {
  width: 100%;
}

/* Djs List */
.djslist {
  width: 100%;
  box-sizing: border-box;
}
.djlist {
  width: calc(33.333333% - 10px);
}
.djblock {
  background: #333;
  color: #c4c4c4;
  padding: 20px;
  box-sizing: border-box;
  font-family: 'bebas', 'Arial', sans-serif;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  display: block;
  transition: 0.4s all;
}
.djblock:hover {
  background: #484848;
  color: white;
  transform: scale(1.07);
  z-index: 1;
}
.djimg {
  height: 150px;
  width: 150px;
  overflow: hidden;
  background: #121212;
  box-shadow: 1px 1px 1px #797979;
  border-radius: 50%;
  margin: 0 auto 20px auto;
  box-sizing: border-box;
}
.djimg img {
  width: 100%;
}

/* Dj Profiles */
.mdjsWrap {
  margin-bottom: 10px;
}
.mdjsWrap a {
  text-decoration: none;
  margin-right: 10px;
}
.mdjsWrap a:hover {
  color: #7aa9d2;
}

/* Wrapper */
.icon-button {
	background-color: #1e1e1e;
	border-radius: 2.6rem;
	cursor: pointer;
	display: inline-block;
	font-size: 1.5rem;
	height: 2.6rem;
	line-height: 2.6rem;
	margin: 0 5px 0 5px;
	position: relative;
	text-align: center;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	width: 2.6rem;
  box-shadow: 1px 1px 1px #606060;
}

/* Circle */
.icon-button span {
	border-radius: 0;
	display: block;
	height: 0;
	left: 50%;
	margin: 0;
	position: absolute;
	top: 50%;
	-webkit-transition: all 0.2s;
	   -moz-transition: all 0.2s;
	     -o-transition: all 0.2s;
	        transition: all 0.2s;
	width: 0;
}
.icon-button:hover span {
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 2.6rem;
	margin: -1.3rem;
  box-shadow: 1px 1px 1px #3e3e3e;
}
.twitter span {
	background-color: #4099ff;
}
.facebook span {
	background-color: #4267b2;
}
.instagram span {
	background-color: #b338ab;
}
.youtube span {
	background-color: #ff0707
}
.twitch span {
	background-color: #9400FF;
}
.spotify span {
	background-color: #1bae50;
}
.soundcloud span {
	background-color: #f50;
}
.mixcloud span {
	background-color: #233746;
}

.bandcamp span {
	background-color: #389fc2;
}
.website span {
	background-color: gray;
}

/* Icons */
.icon-button i {
	background: none;
	color: #737373;
	height: 2.6rem;
	left: 0;
	line-height: 2.6rem;
	position: absolute;
	top: 0;
	-webkit-transition: all 0.2s;
	   -moz-transition: all 0.2s;
	     -o-transition: all 0.2s;
	        transition: all 0.2s;
	width: 2.6rem;
	z-index: 1;
}
.icon-button:hover .fa-facebook-f,
.icon-button:hover .fa-twitter,
.icon-button:hover .fa-instagram,
.icon-button:hover .fa-youtube,
.icon-button:hover .fa-twitch,
.icon-button:hover .fa-spotify,
.icon-button:hover .fa-soundcloud,
.icon-button-ts:hover .traxsourcefont,
.icon-button:hover .fa-mixcloud,
.icon-button:hover .fa-bandcamp,
.icon-button:hover .fa-globe {
	color: white;
}

.icon-button-ts {
	background-color: #1e1e1e;
	border-radius: 2.6rem;
	cursor: pointer;
	display: inline-block;
	font-size: 1.5rem;
	height: 2.6rem;
	line-height: 2.6rem;
	margin: 0 5px 0 5px;
	position: relative;
	text-align: center;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	width: 2.6rem;
  box-shadow: 1px 1px 1px #606060;
}

.icon-button-ts span {
	border-radius: 0;
	display: block;
	height: 0;
	left: 23%;
	margin: 0;
	position: absolute;
	-webkit-transition: all 0.2s;
	   -moz-transition: all 0.2s;
	     -o-transition: all 0.2s;
	        transition: all 0.2s;
	width: 0;
}

.icon-button-ts:hover {
  color: white;
  background-color: #40a0ff;
}


/* Events List */
.eventsWrap {
  box-sizing: border-box;
  width: 100%;
}
.eventItem a {
  text-decoration: none;
  transition: 0.2s all;
}
.eventItem a:hover {
  color: #7497cc;
}
.eventItem {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
}
.eventHeader {
  background: #2d2d2d;
  font-family: 'bebas';
  color: white;
  font-size: 20px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.evIcon {
  margin-right: 10px;
  color: grey;
}
.veIcon {
  margin-right: 5px;
  color: #93b752;
}
.eventContent {
  background: #424141;
  padding: 10px;
  box-sizing: border-box;
}
a.eventTitle {
  font-family: 'bebas';
  font-size: 30px;
}
.eventVenue {
  margin-top: 20px;
  font-size: 14px;
  color: #b9b9b9;
}
.venueName {
  color: white;
  margin-right: 5px;
  font-weight: 700;
}
.eventLeft {
  width: 100%;
}
.eventRight{
  margin-left: auto;
  display: none;
}
.eventFlyer {
  width: 135px;
  height: 135px;
  overflow: hidden;
}
.eventFlyer img {
  width: 100%;
}

/* Single Event */
.evtBar .eTitle {
  font-family: 'bebas';
  font-size: 26px;
  margin-bottom: 20px;
}
.evtBar .eDate {
  font-size: 14px;
}
.evtBar .sevIcon {
  color: white;
  margin-right: 5px;
}
.evtBar .eVenue {
  font-size: 17px;
  text-decoration: none;
  font-weight: bold;
}
.evtBar a.eVenue:hover {
  text-decoration: underline;
}
.evtBar .eAddress {
  font-size: 14px;
  margin-top: 5px;
}
.evtBar .eDate {
  margin-bottom: 20px;
}
.evtBar .ebarR {
  margin-left: auto;
  display: flex;
  flex-direction: column;
}
.evMeta {
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.evMeta .evmL {
  display: flex;
  flex-direction: column;
  margin-right: 20px;
  width: 100%;
  box-sizing: border-box;
}


.evMeta .evmR {
  margin-left: 0;
  box-sizing: border-box;
}
.evMeta .evCover {
  width: 100%;
  overflow: hidden;
}
.evCover img {
  width: 100%;
}
.evMeta .lineUp {
  font-family: 'bebas';
  font-size: 28px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #6a6a6a;
  color: #373737;
}
.evMeta .eInfo {
  font-size: 15px;
  color: #444;
}
.evMeta .luHead {
  font-family: 'roboto';
  font-size: 15px;
  color: #888;
}
.attending {
  border: 1px solid white;
  border-radius: 5px;
  padding: 5px 20px;
  text-align: center;
  font-size: 14px;
}
.attending .atText {
  font-size: 10px;
}
.evtBar .evBut {
  background: white;
  color: #212121;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  border-radius: 5px;
  margin-bottom: 10px;
  transition: 0.2s all;
  margin-bottom: auto;
}
.evtBar .evBut:hover {
  background: #1e1e1e;
  color: white;
}
.evtBar .attBut {
  background: white;
  color: #212121;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  border-radius: 5px;
  margin-bottom: 10px;
  transition: 0.2s all;
  cursor: pointer;
}
.attBut .sevIcon {
  color: #212121;
}
.rem {
  background: #b34444!important;
  color: white!important;
}
.rem:hover {
  background: #6a4141!important;
}
.rem .sevIcon {
  color: white!important;
}

/* Listen Live Mobile */
#mob_listen {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  margin-bottom: 25px;
}
.tlh_m {
  font-size: 28px;
  letter-spacing: 2px;
}
.tlhd_m, .tlsd_m, .tlsd2_m {
  font-size: 17px;
  width: 70px;
  height: 25px;
  padding: 8px 0 5px 0;
}

/* Schedule */
.sch-head {
  text-align: center;
  margin-bottom: 20px;
}
.sch-head h2 {
  font-family: 'bebas', Arial, sans-serif;
  font-size: 28px;
  font-weight: normal;
}
.sch-head p {
  font-size: 14px;
}
.schedule {
  width: 100%;
  box-sizing: border-box;
}
.sched-legend {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.sc-tab {
  background: #373737;
  width: 14.285%;
  padding: 5px;
  text-align: center;
  font-family: 'bebas', Arial, sans-serif;
  cursor: pointer;
  border-right: 1px solid #1e1e1e;
  transition: 0.2s all;
  color: #b9b9b9;
}
.sc-tab:hover {
  background: #1e1e1e;
  color: white;
}
.sc-active {
  background: #1e1e1e!important;
  color: white!important;
}
.sc-last {
  border-right: none!important;
}
#sc-1, #sc-2, #sc-3, #sc-4, #sc-5, #sc-6, #sc-7 {
  display: none;
}
.sched-item {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  background: #282828;
  padding: 10px;
  margin-bottom: 2px;
}
.sched-item:nth-child(even) {
  background: #353535;
}

.sched-time {
  font-family: 'bebas', Arial, sans-serif;
  font-size: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-right: 20px;
}

.sched-avatar {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: #1e1e1e;
  overflow: hidden;
  box-shadow: 1px 1px 1px #5e5e5e;
  margin-right: 20px;
  flex-shrink: 0;
}
.sched-avatar img {
  width: 100%;
}
.sched-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sched-dj {
  font-family: 'bebas', Arial, sans-serif;
  font-size: 30px;
}
.sched-dj a {
  text-decoration: none;
}
.sched-dj a:hover {
  text-decoration: underline;
}
.sched-info {
  margin-top: 5px;
  font-size: 15px;
}





/* Another fix for shitty iOS */
@media (hover) {
  #um_notifs:hover, 
  #um_messaging:hover,
  #um_account:hover,
  #um_menu:hover {
      background: #4f4f4f;
      color: white;
  }
  .umenu_a:hover {
      color: white;
      background: #313131;
  }
  .fade:hover {
      opacity: 1;
  }
  #um_dropdown_acc .profile:hover,
  #um_dropdown_acc .m_item:hover {
      background: #f0f0f0;
      border-radius: 5px;
      text-decoration: none;
  }
  .msg_index:hover {
      background: #f0f0f0;
      border-radius: 5px;
      text-decoration: none; 
  }
  .msg_item:hover {
      background: #f0f0f0;
      border-radius: 5px;
      text-decoration: none; 
  }
  .btn.ntr:hover {
      background: #4d4d4d;
  }
  .nt_name:hover {
      text-decoration: underline;
  }
  .nt_item:hover {
      background: #f0f0f0;
      border-radius: 5px;
      text-decoration: none;
  }
  .footer-flex div a:hover {
      color: #9dbac6;
  }
  .d-con a:hover {
      text-decoration: underline;
  }
  .fl a:hover {
      color: red;
  }
  #goSearch:hover {
      color: white;
  }
  .s-item:hover {
      color: white;
  }
  .a_menu a:hover {
      background: #0d0d0d;
      color: white;
  }
  .gd-content a:hover {
      background: none;
      color: #9dbac6;
  }
  #pl-title a:hover, #pl-artist a:hover, #pl-bottom a:hover {
      color: #9dbac6;
  }
  #playPauseBtn:hover {
      color: white;
  }
  #previousBtn:hover {
      color: white;
  }
  #nextBtn:hover {
      color: white;
  }
  #user-dropbtn:hover {
      background: #3a3a3a;
  }
  #user-dropdown-content a:hover {
      background-color: #202020;
      color: white;
  }
  #_mdropdown-content a:hover {
      background-color:#3c3c3c;
  }
  .btn:hover {
      background: #2c4153;
  }
  .subscribe .btn:hover,
  .profile-wrap .btn:hover {
      background: #55728a;
  }
  .flex-table-meta a:hover {
      color: #86a9cc;
  }
  .single a:hover {
      color: rgb(223, 102, 213);
      text-decoration: none;
  }
  .modal__close:hover {
      color: white;
  }
  .btn-create:hover {
      background: #638849;
  }
  .modal__btn:hover {
      background-color: #55728a;
      outline: 0;
  }
  .modal__btn-primary:hover {
      background-color: #3f608a;
  }
  .settings-wrap .btn:hover {
      background: #f949ea;
  }
  .grid-item:hover .layer {
      display: block;
      transition: all 0.2s;
  }
  .grid-item a.title:hover,
  .grid-item a.artist:hover,
  .grid-item a.label:hover {
      color: #729ed7;
  }
  a.paginate:hover, .paginate-nav:hover {
      background: rgb(57, 92, 113);
  }
  .support-wrap .btn:hover {
      background: #f949ea;
  }
  .select-1:hover {
      border-color: #888;
  }
  .alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button:hover {
      background: #2c4153;
  }
  .alertify .ajs-footer .ajs-buttons .ajs-button.ajs-cancel:hover {
      background: rgb(148, 148, 148);
  }
  .ci:hover .art img {
      opacity: 0.1!important;
  }
  .fpWrap a:hover {
      text-decoration: underline;
  }
  #fp_guests a:hover {
      text-decoration: underline;
  }
  .singleChartWrap .c-dj a:hover {
      color: #729ed7;
  }
  .singleChartWrap .c-item:hover {
      background: #252525;
  }
  .singleChartWrap .c-item:hover .c-art img {
      opacity: 0.1;
  }
  /* .singleChartWrap .c-item:hover .chart-play {
      display: block;
  } */
  .singleChartWrap .c-it-title a:hover {
      color: #729ed7;
  }
  .t_login:hover {
      background: #383838;
      color: white;
  }
  .ab-play-btn:hover {
      color: white;
  }
  /* .chart-play:hover .play-btn-sm {
      color: white;
  } */
  .cb_container:hover input ~ .checkmark {
      background-color: #ccc;
  }
  .remove-dj:hover {
      color: #ce3838;
  }
  .share.facebook:hover {
      background: #6287d2;
  }
  .share.twitter:hover {
      background: #77b1f2;
  }
  .share.email:hover {
      background: #e39e6c;
  }
  .btn-play:hover {
      background: #689549;
  }
  .btn-gen:hover {
      background: #494f95;
  }
  .fdadd_btn:hover, .fdbtn:hover, .msgbtn:hover, .fdrm_btn:hover, .fda_btn:hover, .fdr_btn:hover, .fdrem_btn:hover {
      border: 1px solid white;
      background: white;
      color: black;
  }
  a.fcnt:hover {
      text-decoration: underline;
      color: white;
  }
  .rqName:hover {
      text-decoration: underline;
      color: white;
  }
  .rqAccept:hover, .rqDeny:hover, .rqCancel:hover {
      border: 1px solid white;
      background: white;
  }
  #podcastView .podcastPlay:hover {
      background: #689549;
  }
  .pod_playlist_wp a:hover {
      color: #729ed7;
  }
  #podcastView #podcastLikeBtn:hover {
      color: white;
  }
  .btn-download.singlePod:hover,
  .btn-download-mod.singlePod:hover {
      background: #ab56c4;
  }
  a.podArtist:hover {
      color: white;
  }
  .userWrapper:hover .userImg {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
  }
  .userWrapper:hover .userName {
      color: white;
  }
  a.podcastArtist:hover {
      text-decoration: underline;
  }
  /* flip the pane when hovered */
  .flip-container:hover .flipper, .flip-container.hover .flipper {
      transform: rotateY(180deg);
  }
  .back a:hover {
      color: white
  }
  .btn-stats:hover {
      background: #cc4f5b;
  }
  .big-btn:hover {
      background: #3d5360;
  }
  .shoutbox-name a:hover {
      text-decoration: underline;
  }
  .shoutbox-text a:hover {
      text-decoration: underline;
  }
  .love-btn:hover {
      color: #ff5a5a;
  }
  .emojiNav a:hover {
      background: #c1c1c1;
  }
  .usersOnline_name:hover {
      color: black;
  }
  .t_menu a:hover {
      background: #1e1e1e;
      color: white;
  }
  .tl-hd:hover {
      background: white
  }
  .tl-sd:hover {
      background: white
  }
  .tl-sd2:hover {
      background: white
  }
  /* .podWrapper .c-item:hover {
      background: #404040;
  }
  .podWrapper .c-item:hover .c-art img {
      opacity: 0.1;
  }
  .podWrapper .c-item:hover .chart-play {
      display: block;
  } */
  .podWrapper .c-it-title a:hover {
      color: #729ed7;
  }
  .podWrapper .c-it-artist a:hover {
      color: #729ed7;
  }
  .podWrapper .play-btn-sm:hover {
      color: #729ed7!important;
  }
  .pod_play:hover {
      color: white;
  }
  .pod_dj a:hover {
      text-decoration: underline;
      color: white;
  }
  .pod_title a:hover {
      text-decoration: underline;
      color: white;
  }
  .btn-download:hover,
  .btn-download-mod:hover {
      background: #39537b;
  }
  .pod_play:hover {
      color: white;
  }
  .pod_dj a:hover {
      text-decoration: underline;
      color: white;
  }
  .pod_title a:hover {
      text-decoration: underline;
      color: white;
  }
  .btn-download:hover,
  .btn-download-mod:hover {
      background: #39537b;
  }
  .s-title a:hover {
      color: #729ed7;
  }
  #p-artist a:hover, #p-title a:hover {
      text-decoration: underline;
  }
  #p-playBtn:hover,
  #p-prevBtn:hover,
  #p-nextBtn:hover {
      color: white;
  }
  #progressBar:hover .handle {
      opacity: 1;
  }
  .undock-btn:hover {
      color: white;
  }
  .edtpf:hover {
      background: #575757!important;
  }
  .msg_list_wrap:hover {
      background: #d5d5d5;
  }
  .msg_del:hover,
  .o_msg_del:hover {
      color: #757575;
  }
  #msg_send:hover {
      background: #c6c6c6;
      color: #4a4a4a;
  }
  .cvnName:hover {
      text-decoration: underline;
  }
  .cvn-delete:hover {
      color: #e14f4f;
  }
  #djPodcasts .pod_play:hover {
      color: white;
  }
  #djPodcasts .pod_dj a:hover {
      text-decoration: underline;
      color: white;
  }
  #djPodcasts .pod_title a:hover {
      text-decoration: underline;
      color: white;
  }
  #djPodcasts a.btn-edit:hover,
  #djPodcasts a.btn-mixcld:hover {
      background: #39537b;
  }
  #djPodcasts .btn-download:hover,
  #djPodcasts .btn-download-mod:hover {
      background: #39537b;
  }
  .djcp-play:hover .dpr {
      color: white!important
  }
  .btn-submit:hover, 
  .btn-ul:hover {
      background: #2c4153;
  }

  .btn-cancel:hover {
      background: #8a8a8a;
  }
  .btn-remove:hover {
      background: #B7B7B7;
  }
  .live_toggle input:hover + label {
      border-color: white;
  }
  .podBt:hover {
      background: #2c4153;
  }
  .epTitle a:hover {
      text-decoration: underline;
  }
  .epArtist a:hover {
      text-decoration: underline;
  }
  .delPc:hover {
      background: #593535;
  }
  .btn-csub:hover {
      background: #2c4153;
  }
  .btn-clr:hover {
      background: #7d7d7d;
  }
  .djGuests a.btn-edit:hover {
      background: #39537b;
  }
  .djGuests .btn-del:hover {
      background: #9d2727;
  }
  .select-1:hover {
      border-color: #888;
  }
  #addGuestWrap .btn-add:hover {
      background: #2c4153;
  }
  #addGuestWrap .djDiv:hover {
      background: #9b4b4b;
  }
  .btn-submit:hover {
      background: #2c4153;
  }
  .btn-cancel:hover {
      background: #8a8a8a;
  }
  a.logo:hover {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
  }
  .ppc:hover {
      background: #cecece;
  }
  .mxtLnk:hover {
      text-decoration: underline;
  }
  #gip-results img:hover {
      opacity: 1;
      filter: blur(0px);
  }
  input[type=submit]:hover {
      background: #435f77;
  }
  .comName a:hover {
      text-decoration: underline;
  }
  .comAct:hover {
      color: white;
      text-decoration: underline;
  }
  .repName a:hover {
      text-decoration: underline;
  }
  .pyTkWrap .btn-add:hover {
      background: #54a238;
  }
  .pyTkWrap .btn-del:hover {
      background: #843b3b;
  }
  .pyTkWrap .btn-rem:hover {
      background: #843b3b;
  }
  .btn-psub:hover {
      background: #2c4153;
  }
  .tt_name:hover {
      text-decoration: underline;
  }
  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
  } 
}

.purp {
  background: #8d439f!important;
}

/* .usr_modal {
  position: absolute;
  top:1px;
  right: 1px;
  z-index: 999;
  background: red;
}

.pfl_wrap {
  position: relative;
} */

/* SbAd */
#sbadmin_info_btn {
  font-family: Arial, Helvetica, sans-serif;
  color: #d5d5d5;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  margin: 0 0 3px 0;
  background: #303d48;
  padding: 10px 0;
  cursor: pointer;
  transition: 0.2s all;
}

#sbadmin_info_btn:hover {
  background: #384f64;
}

#sbadmin_div{
  display: none;
}
.sbadmin_info {
  background: #242424;
  padding: 20px;
  font-size: 15px;
  margin-bottom: 20px;
  border-bottom: 1px solid #171717;
}
.sbadmin_wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}
.sb_admin_l {
  box-sizing: border-box;
  width:100%;
}
.sb_admin_r {
  box-sizing: border-box;
  width: 100%;
}

.ruser_wrap {
  background: #242424;
  padding: 10px;
  font-size: 15px;
  margin-bottom: 3px;
  display: flex;
}
.ruser_avatar {
  background: #121212;
  border-radius: 50%;
  overflow: hidden;
  width: 50px;
  height: 50px;
  margin-right: 10px;
  flex-shrink: 0;
}
.ruser_avatar img {
  width: 100%;
}
.ruser_meta {

}

h6 {
  font-family: Arial, Helvetica, sans-serif;
  color: #d5d5d5;
  font-size: 15px;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 3px 0;
  background: #262626;
  padding: 10px 0;
}



.ru_muted {
  background: #532020!important;
}
.ruser_at {
  font-size: 13px;
  color: grey;
}
.ruser_time {
  margin-top: 3px;
  font-size: 12px;
}
a.ruser_name {
  text-decoration: none;
}
a.ruser_name:hover {
  color: #60a9ea;
}
.ruser_btn {
  display: inline-block;
  padding: 3px 5px;
  border-radius: 3px;
  font-size: 11px;
  background: #9B9B9B;
  color: #242424;
  margin-right: 5px;
  cursor: pointer;
  transition: 0.2s all;
  margin-top: 5px;
}
.ruser_btn:hover {
  background: white;
}

.rmsg_wrap {
  background: white;
  color: #222;
  margin-bottom: 1px;
  padding: 10px;
  font-size: 14px;
  display: flex;
}    
.rgif img {
  max-width: 200px;
}
.rmsg_top {
  display: flex;
}
.rmsg_avatar {
  width: 30px;
  min-width: 30px;
  height: 30px;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 50%;
  margin-top: 5px;
  margin-right: 10px;
  background: #e1e1e1;
}
.rmsg_avatar img {
  width: 30px;
}
.rmsg_meta {
  display: flex;
  flex-direction: column;
}
.rmsg_msg {
  font-size: 13px;
}
.rmsg_bt_meta {
  margin-top: 5px;
  display: flex;
}
.rmsg_date {
  color: grey;
  font-size: 13px;
}
.rmsg_btn {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  background: #c19696;
  color: white;
  margin-left: 10px;
  cursor: pointer;
  transition: 0.2s all;
}
.rmsg_btn:hover {
  background: #cc4040;
}

/* Shoutbox Dark Mode */
body.dark-mode #shoutbox {
  scrollbar-color: #444 #2c2c2c;
  scrollbar-width: thin;
}
body.dark-mode #shoutbox ::-webkit-scrollbar {
  background-color: #2c2c2c;
  width: 12px;
  height: 12px;
}
body.dark-mode #shoutbox ::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 8px;
}
body.dark-mode #shoutbox-content {
  background: #151515;
  color: #e6e6e6;
}
body.dark-mode .shoutbox-name a {
  color: #6b7f9d;
}
body.dark-mode .shoutbox-msg {
  color: #b3b3b3;
  border-top: 1px solid #090909;
}
body.dark-mode .sysName {
  color: #d0c98a !important;
}
body.dark-mode .sysmsg {
  color: #9d9658;
}
body.dark-mode .shoutbox-info {
  background: #151515;
  border-bottom: 1px solid #060606;
}
body.dark-mode #scrollBtnWrap {
  border-left: 1px solid #060606;
}
body.dark-mode #sbmeta_r {
  border-left: 1px solid #060606;
}
body.dark-mode #sbmeta_o {
  border-right: 1px solid #060606;
}
body.dark-mode #usersOn-wrap {
	background: #151515;
	border-right: 1px solid #060606;
}
body.dark-mode .usersOnline_name:hover {
  color: white;
}
body.dark-mode .shoutbox-footer {
  border-top: 1px solid #060606;
}
body.dark-mode .shoutbox-extra,
body.dark-mode .shoutbox-input {
  background: #151515;
}

body.dark-mode .shoutbox-footer .emoji-btn-wrap {
  background: #151515;
}

body.dark-mode .shoutbox-footer .emoji-btn,
body.dark-mode .shoutbox-footer .giphy-btn,
body.dark-mode .shoutbox-footer .animate-btn {
  background: #121212;
  color: #7a7a7a;
}

body.dark-mode .shoutbox-footer .emoji-btn:hover,
body.dark-mode .shoutbox-footer .giphy-btn:hover,
body.dark-mode .shoutbox-footer .animate-btn:hover {
  background: #323232;
  color: #969696;
}

body.dark-mode .shoutbox-input textarea {
  background: #151515;
  color: #aaa;
}
body.dark-mode #particle i,
body.dark-mode #particle2 i,
body.dark-mode #particle3 i,
body.dark-mode #particle i.fa-heart-o,
body.dark-mode #particle2 i.fa-heart-o,
body.dark-mode #particle3 i.fa-heart-o,
body.dark-mode #particle4 i.fa-bomb-o {
  color: #f24545!important;
}

body.dark-mode #shoutbox #emojis {
  background: #262626;
  border-top: 1px solid #3c3c3c;
}
body.dark-mode .shoutbox-footer #em_body,
body.dark-mode .shoutbox-footer #em_faces,
body.dark-mode .shoutbox-footer #em_animals,
body.dark-mode .shoutbox-footer #em_food,
body.dark-mode .shoutbox-footer #em_sport,
body.dark-mode .shoutbox-footer #em_transport,
body.dark-mode .shoutbox-footer #em_signs,
body.dark-mode .shoutbox-footer #em_weather {
  border-bottom: 1px solid #3e3e3e;
}
body.dark-mode .shoutbox-footer .emojiNav a {
  background: #393939;
  color: #a8a8a8;
}
body.dark-mode #giphySearch {
  border-bottom: 1px solid #171717;
  background: #222;
}
body.dark-mode #gip-results {
  background: #262626;
}
body.dark-mode #giphy-picker {
  background: #222;
  border-top: 1px solid #353535;
}
body.dark-mode .shoutbox-text.mentioned {
  color: #7bb073 !important;
}
body.dark-mode .u_guest {
  color: #4a4a4a !important;
}
body.dark-mode .usersOnline_name {
  color: #9d9d9d;
}
body.dark-mode #animation-picker {
  border-top: 1px solid #3c3c3c;
  background: #222;
}

body.easy-read .shoutbox-text,
body.easy-read .systxt,
body.easy-read .shoutbox-input textarea{
  font-size: 18px;
}

/* djcp accs */
.djcp_balance {
  width: 100%;
  background: #282828;
  box-sizing: border-box;
  margin-bottom: 2px;
  display: flex;
  font-size: 11px;
  line-height: 11px;
  color: #808080;
}
.cpbl_txt {
  padding: 5px 10px;
}
.cpbl_ico {
  padding: 3px 0 3px 10px;
  font-size: 15px;
}
.djcp-navi-tu {
  text-decoration: none;
  border-left: 2px solid #1e1e1e;
  border-right: 2px solid #1e1e1e;
  padding: 5px 10px;
  color: #aaa;
  transition: all 0.2s;
}
.djcp-navi-tx {
  text-decoration: none;
  border-right: 2px solid #1e1e1e;
  padding: 5px 10px;
  color: #aaa;
  transition: all 0.2s;
}
.djcp-navi-tu:hover,
.djcp-navi-tx:hover {
  background: #1e1e1e;
  color: white;
}
.tx_history {
  width: 100%;
  box-sizing: border-box;
  margin-top: -18px;
  padding: 20px;
  background: #242424;
}
.single_tx {
  width: 100%;
  box-sizing: border-box;
  background: #643f3f;
  margin-bottom: 2px;
  padding: 10px;
  color: white;
  display: flex;
}
.crd {
  background: #3b4f3d;
}
.tx_ico {
  font-size: 50px;
  color: #1e1e1e;
  margin-right: 20px;
  text-shadow: 1px 1px 1px #737373;
}
.tx_meta {
  display : flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}
.tx_m_top {
  display: flex;
  font-size: 12px;
  justify-content: space-between;
}
.tx_type {
  text-transform: uppercase;
}
.tx_date {
  margin-left: auto;
}
.tx_amt {
  font-size: 20px;
}
.tx_comments {
  font-size: 12px;
}
.tx_txnid {
  margin-left: auto;
  font-size: 12px;
}
.jt_gone {
  text-align: center;
}
.tx_none {
  margin-top: 20px;
  text-align: center;
}
.af_wrap {
  background: #262626;
  padding: 20px;
  margin-top: -18px;
}
.djcp_blank {
  background: #282828;
  padding: 20px;
  box-sizing: border-box;
}

.chartSharer{
  display: flex;
  margin-top: 10px;
}

/* Mod */
#lct_action {
  background: #2b353c;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  transition: 0.2s all;
  cursor: pointer;
  font-size: 13px;
}
#lct_action:hover {
  background: #3b4d59;
}
#lct_list {
  display: none;
  margin-top: 20px;
}
#unac_action {
  background: #2b353c;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  transition: 0.2s all;
  cursor: pointer;
  font-size: 13px;
}
#unac_action:hover {
  background: #3b4d59;
}
#unac_list {
  display: none;
  margin-top: 20px;
}
.unac_usr {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  background: #151515;
  padding: 10px;
  border-bottom: 1px solid #242424;
  font-size: 15px;
}
.unac_lbl {
  display: flex;
  text-transform: uppercase;
  font-size: 11px;
  color: #555;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  background: #111;
}
.unac_meta {
  display: flex;
  flex-direction: column;
}
.grey {
  color: grey;
}
.shrt {
  width: 135px;
  font-size: 12px;
  justify-content: center;
  align-items: center;
}
.unac_btn {
  display: flex;
  background: #2e3c2f;
  padding: 5px 20px;
  cursor: pointer;
  font-size: 12px;
  margin: 0 10px 0 auto;
  justify-content: center;
  align-items: center;
  transition: 0.2s all;
}
.unac_btn:hover {
  background: #3e553f;
}
.cslp_wrap {
  box-sizing: border-box;
  border: #ccc;
  background: #ccc;
  display: inline-block;
  margin-bottom: 20px;
}
.cslp_lbl {
  display: flex;
  box-sizing: border-box;
  background: #484848;
  color: #bdbdbd;
  padding: 5px 20px;
  font-size: 13px;
  justify-content: center;
  align-items: center;
}
.cslp_meta {
  display: flex;
  box-sizing: border-box;
  color: #242424;
  padding: 5px 20px;
  font-size: 13px;
  font-weight: bold;
  justify-content: center;
  align-items: center;
}
.uText {
  padding: 10px 10px 10px 15px;
  border: none;
  outline: none;
  border-radius: 0;
  box-sizing: border-box;
  font-size: 15px;
  width: 100%;
  line-height: 1.7;
}
.tpad20 {
  margin-top: 20px;
}
#uInfo,
#dInfo {
  background: #111;
  padding: 20px;
  display: none;
  margin-bottom: 20px;
  flex-direction: column;
}
#uInfo a,
#dInfo a {
  text-decoration: none;
}
#uInfo a:hover,
#dInfo a:hover {
  text-decoration: underline;
}
/* global select style */
.select-mod {
  display: block;
  font-size: 15px;
  font-family: sans-serif;
  font-weight: normal;
  color: #444;
  line-height: 1.7;
  padding: 9px 2px 7px 15px;
  width: 100%;
  max-width: 100%; 
  box-sizing: border-box;
  margin: 0;
  border: 1px solid white;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  border-radius: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%, 0 0;
  background-size: .65em auto, 100%;
}

.select-mod::-ms-expand {
  display: none;
}

.select-mod:focus {
  border-color: #aaa;
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222; 
  outline: none;
}
.select-mod option {
  font-weight:normal;
}
.usch_wrap {
  display: flex;
  flex-direction:column;
  box-sizing: border-box;
  width: 100%;
  margin-top: 20px;
}
.usch_lbl {
  color: #484848;
  font-size: 11px;
  padding: 2px 0 0 0;
  text-transform: uppercase;
  display: inline-block;
}
.usch_meta {
  color: white;
  font-size: 13px;
  padding: 0 0 0 10px;
  display: inline-block;
}
.usch_flag {
  width: 22px;
  margin: -2px 0 0 10px;
  display: inline-block;
}
.usch_flag img {
  width: 100%;
}
.usch_avatar {
  width: 220px;
  height: 220px;
  overflow: hidden;
  background: #ececec;
  flex-shrink: 0;
}
.usch_avatar img {
  width: 100%;
}
.usch_right {
  display: block;
  width: 100%;
  margin: 20px 0 0 0;
}
.usch_display_name {
  font-family: 'bebas';
  font-size: 40px;
  display: flex;
}
.usch_data {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}
.usch_strip {
  display: flex;
}
.usch_btn {
  display: inline-block;
  padding: 10px;
  font-weight: bold;
  text-align: center;
  transition: 0.2s all;
  cursor: pointer;
  font-size: 15px;
  background: #475d6c;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.7;
}
.usch_btn:hover {
  background: #3b4d59;
}
.orbtns {
  display: flex;
  margin: 5px 0 10px 0;
}
.clear_btn {
  margin-left: 10px;
  background: #792b2b;
  color: white;
  line-height: 1.7;
  font-size: 15px;
}
.clear_btn:hover {
  background: #9d4646;
}
.modset_btn {
  background: #344d37;
  color: white;
  line-height: 1.7;
  font-size: 15px;
}
.modset_btn:hover {
  background: #486f4d;
}
.modOWrap {
  box-sizing: border-box;
  width: 100%;
  color: #b7b7b7;
}
.modOrInfo {
  padding: 0 20px;
  font-size: 17px;
}
.mod_list {
  background: #131313;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 20px;
}
.mod_header {
  color: #4a4a4a;
  font-size: 12px;
  margin-bottom: 10px;
}
.mod_group {
  display: flex;
  flex-wrap: wrap;
}
.mod_wrap {
  display: flex;
  flex-direction: column;
  margin-right: 20px;
  cursor: pointer;
  transition: 0.2s all;
  text-decoration: none;
}
.mod_wrap:hover > .mod_name {
  color: white;
}
.cueInfoText {
  font-size: 17px;
  color: #8a8a8a;
  padding: 0 20px;
}
.cue_wrap {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid white;
  display: flex;
  margin: 20px 0 5px 0;
  font-size: 14px;
}
.cue_meta {
  background: white;
  color: #242424;
  padding: 5px 10px;
}
.cue_info {
  color: white;
  padding: 5px 10px;
}
a.cue-btn {
    font-size: 12px;
    padding: 7px 10px 0 10px;
    font-weight: normal;
    text-decoration: none;
    margin-left: auto;
    background: #713a68;
}
.cue-btn:hover {
    background: #b556a6;
}
.mod_avatar {
  width: 75px;
  height: 75px;
  overflow: hidden;
  border-radius: 50%;
  background: #202020;
}
.mod_avatar img {
  width: 100%;
}
.mod_name {
  text-align: center;
  font-size: 13px;
  margin-top: 5px;
  color: grey;
}

.mod_flag_wrap {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
}
.mod_flag {
  width: 20px;
}
.mod_flag img {
  width: 100%;
}

#d3eptv-btn {
  display: block;
  padding: 10px 20px;
  font-weight: bold;
  text-align: center;
  transition: 0.2s all;
  cursor: pointer;
  font-size: 13px;
  background: #2b353c;
  margin-top: 20px;
}
#d3eptv-btn:hover {
background: #3b4d59;
}
#d3eptv_content {
  width: 100%;
  display: none;
  box-sizing: border-box;
}
.d3eptv_info {
  background: #151515;
  font-size: 15px;
  padding: 10px;
  color: #686868;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.d3eptv_guide {
  display: flex;
}
a.d3eptv_img {
  width: 100px!important;
  overflow: hidden;
  cursor: pointer;
  display: block;
  margin-right: 20px;
}
a.d3eptv_img img {
  width: 100%;
}

.sml {
  font-size: 12px;
  margin-top: -10px;
  color: #7bafdd;
}

.topPad {
  margin-top: 20px;
}
.modGood {
  width: 100%;
  text-align: center;
  color: white;
  background: #272727;
  padding: 10px;
  font-size: 15px;
}


.modPodWrapper {
  width: 100%;
  box-sizing: border-box;
}
.mpWrap {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  background: #313131;
  padding: 10px;
  font-size: 15px;
  margin-bottom: 3px;
}
.mpArt {
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.mpArt img {
  width: 100%;
}
.mpMeta {
  margin-left: 10px;
}
.mpUrl {
  color: #8bccf2;
  text-decoration: none;
  font-weight: bold;
}
.mpUrl:hover {
  text-decoration: underline;
}
.mpSubmitted{
  font-size: 13px;
  color: #b3b3b3;
  margin-top: 3px;
}
.reuploaded {
  background: #282828;
}
.mpReuploaded {
  color: #8de68d;
  font-size: 13px;
  margin-top: 17px;
}
.mpWarn {
  background: #862b2b;
  color: white;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 10px;
  font-size: 13px;
  margin: -3px 0 3px 0;
}
.mpButton {
  background: #395e3d;
  padding: 5px 10px;
  text-align: center;
  font-size: 13px;
  display: inline-block;
  margin-top: 9px;
  transition: 0.2s all;
  cursor: pointer;
}
.mpButton:hover {
  background: #4f8a55;
}

/* Angels List */
.angels-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-around;
}
.single_angel {
  background: white;
  padding: 10px;
  font-family: 'bebas';
  font-size: 18px;
  color: white;
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
  text-decoration: none;
  transition: 0.2s all;
}
.single_angel:hover {
  
}
.single_angel_avatar {
  width: 180px;
}
.single_angel_avatar img {
  width: 100%;
}
.single_angel_name {
  text-align: center;
  color: #242424;
  margin-top: 10px;
}
.ag-info {
  font-size: 15px;
  margin: 20px 0 30px 0;
}

/* M stats */
.s-stats-h3 {
  text-align: center;
  margin: 20px 0 0 0;
  background: #262626;
  padding: 10px 0;
  font-weight: bold;
  color: #acacac;
}   
.s-stats_wrap {
   width: 100%;
   box-sizing: border-box;
   margin: 0 auto;
   background: #262626;
}
.s-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 12px;
    box-sizing: border-box;
}
.s-grid-item {
    background: #171717;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    color: #555;
    transition: all 0.2s;
    margin: 10px;
}
.s-grid-item:hover {
    color: white;
    background: #000;
}
.s-icon {
    font-size: 24px;
}
a.s-grid-item {
    text-decoration: none;
}

/* djs */
.subsWrap {
  padding: 20px;
  background: #282828;
}
.sbHead{
  text-align: center;
  margin-bottom: 20px;
}
.sbDue, .sbLast, .sbBtns {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.sbl {
  background : white;
  color: black;
  font-size: 13px;
  padding: 5px 20px;
  border: 1px solid white;
  font-weight: bold;
  width: 50%;
}
.sbr {
  background: #282828;
  border: 1px solid white;
  padding: 5px 20px;
  color: white;
  font-size: 13px;
  font-weight: bold;
  width: 50%;
}
.sbf {
  background: #282828;
  border: 1px solid #e8b860;
  padding: 5px 20px;
  color: #e8b860;;
  font-size: 13px;
  font-weight: bold;
  width: 100%;
  text-align: center;
}

/* MOdertaion */
.nowWrap {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}
.butt_img {
    width: 100%;
    box-sizing: border-box;
}
.butt_img img {
    width: 100%;
}
.light_green {
    color: #4aff4a;
}
.light_red {
    color: #ff4a4a;
}

p {
    font-family: 'Arial';
}

.deep_orange {
    color: #ff6a00;
    font-weight: bold;
}

.djcheck_head {
    font-family: Arial, Helvetica, sans-serif;
    color: #83e0fd;
    font-size: 15px;
    text-transform: uppercase;
    text-align: left;
    background: none;
    padding: 10px 0;
    font-weight: bold;
}

.check_item_head {
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(255 215 34);
    font-size: 15px;
    text-transform: uppercase;
    text-align: left;
    background: none;
    font-weight: bold;
}
.icecast_wrap {
  width: 100%;
  box-sizing: border-box;
  padding : 0;
  border: 1px solid white;
  display: flex;
  margin: 20px 0 5px 0;
  font-size: 14px;
}
.icecast_meta {
  background: white;
  color: #242424;
  padding: 8px 10px;
}
.icecast_info {
  color: white;
  padding: 5px 10px;
}

/* MOD */
.ModsbMsg_wrap {
  border-bottom: 1px solid #aaa;
  padding-bottom: 3px;
  margin-bottom: 3px;
}
.mod_msg_list {
  background: white;
  color: #242424;
  padding: 10px;
  font-size: 13px;
  margin-top: 5px;
}

#displaySbMsgs {
  display: none;
}

.msg_date {
  font-size: 10px;
  color: grey;
}

.sbMsgHead {
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

.mod_btn {
  margin-top: 10px;
  background: #2b353c;
}
.mod_btn:hover {
  background: #3b4d59;
}

.mod_wrapper {
  margin-top: 20px;
  box-sizing: border-box;
}

.mod_bg {
  box-sizing: border-box;
  background: #181818;
}

.newb_list {
  padding: 20px;
  background: #151515;
  margin-top: 20px;
  color: white;
}
.newb_header {
  font-size: 15px;
  margin-bottom: 20px;
}
.newb_avatar {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
  background: #202020;
}
.newb_avatar img {
  width: 100%;
}
.padt20 {
  margin-top: 20px!important;
}
.padb20 {
  margin-bottom: 20px!important;
}

/* Mod Cue Component */
.cue_wrap {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid white;
  display: flex;
  margin: 20px 0 5px 0;
  font-size: 14px;
}
.cue_meta {
  background: white;
  color: #242424;
  padding: 5px 10px;
}
.cue_info {
  color: white;
  padding: 5px 10px;
}
a.cue-btn {
    font-size: 12px;
    padding: 7px 10px 0 10px;
    font-weight: normal;
    text-decoration: none;
    margin-left: auto;
    background: #713a68;
}
.cue-btn:hover {
    background: #b556a6;
}

/* DJCP btn */
.big-btn-dis {
  text-align: center;
  font-weight: bold;
  background: #282828;
  padding: 20px 20px 15px 20px;
  font-family: 'Abel', sans-serif;
  font-size: 14px;
  margin-bottom: 2px;
  color: #898787;
}
.sbmeta-url {
  color: #6a8bae;
  text-decoration: none;
}
.sbmeta-url:hover {
  text-decoration: underline;
}
/* DJCP Current Track Notification */
.sb-msg-wrap{
  box-sizing: border-box;
  margin-bottom: 20px;
  width: 100%;
}
#current-msg {
  width: 100%;
  border: 0;
  resize: none;
  padding: 10px;
  box-sizing: border-box;
}
.npSbInfo {
  font-size: 14px;
  color: #c4c4c4;
  margin-bottom: 10px;
  line-height: 1.2;
}
.sb-msg {
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  padding: 10px 5px 8px 10px;
}

/* Filthometer */
.filthometerWrap {
  box-sizing: border-box;
  width: 100%;
  margin-top: 5px;
}
.filthometera {
  width: 100%;
  border-radius: 20px !important;
  height: 20px;
  overflow: hidden;
  background-color: #111111;
  line-height: 20px;
  border: 1px solid transparent;
}
.filthometerb {
  background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
  background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
  -webkit-background-size: 40px 40px;
  background-size: 40px 40px;
  -webkit-transition: width 1.5s ease,height 1.5s ease,font-size 1.5s ease;
  -moz-transition: width 1.5s ease,height 1.5s ease,font-size 1.5s ease;
  -ms-transition: width 1.5s ease,height 1.5s ease,font-size 1.5s ease;
  -o-transition: width 1.5s ease,height 1.5s ease,font-size 1.5s ease;
  transition: width 1.5s ease,height 1.5s ease,font-size 1.5s ease;
  width: 0;
  padding: 20px 0;
  font-family: 'Open Sans',sans-serif !important;
  animation: filth-bar-stripes 2s linear infinite reverse;
}

@keyframes filth-bar-stripes{
  0% {
      background-position: 40px 0;
  }
  100% {
      background-position: 0 0;
  }
}
/* Snowflakes */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px #000;
}

.snowflake,.snowflake .inner {
  animation-iteration-count:infinite;
  animation-play-state:running
}
@keyframes snowflakes-fall{
  0%{
    transform:translateY(0)
  }
  100%{
    transform:translateY(110vh)
  }
}
@keyframes snowflakes-shake{
  0%,100%{
    transform:translateX(0)
  }
  50%{
    transform:translateX(80px)
  }
}
.snowflake {
  position:fixed;
  top:-10%;
  z-index:9999;
  -webkit-user-select:none;
  user-select:none;
  cursor:default;
  animation-name:snowflakes-shake;
  animation-duration:3s;
  animation-timing-function:ease-in-out
}
.snowflake .inner {
  animation-duration:10s;
  animation-name:snowflakes-fall;
  animation-timing-function:linear
}
.snowflake:nth-of-type(0){
  left:1%;animation-delay:0s
}
.snowflake:nth-of-type(0) .inner {
  animation-delay:0s
}
.snowflake:first-of-type{
  left:10%;animation-delay:1s
}
.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{
  animation-delay:1s
}
.snowflake:nth-of-type(2){
  left:20%;animation-delay:.5s
}
.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{
  animation-delay:6s
}.snowflake:nth-of-type(3){
  left:30%;animation-delay:2s
}
.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{
  animation-delay:4s
}
.snowflake:nth-of-type(4){
  left:40%;animation-delay:2s
}
.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{
  animation-delay:2s
}
.snowflake:nth-of-type(5){
  left:50%;animation-delay:3s
}
.snowflake:nth-of-type(5) .inner{
  animation-delay:8s
}
.snowflake:nth-of-type(6){
  left:60%;animation-delay:2s
}
.snowflake:nth-of-type(7){
  left:70%;animation-delay:1s
}
.snowflake:nth-of-type(7) .inner{
  animation-delay:2.5s
}
.snowflake:nth-of-type(8){
  left:80%;animation-delay:0s
}
.snowflake:nth-of-type(9){
  left:90%;animation-delay:1.5s
}
.snowflake:nth-of-type(9) .inner{
  animation-delay:3s
}
.snowflake:nth-of-type(10){
  left:25%;animation-delay:0s
}
.snowflake:nth-of-type(11){
  left:65%;animation-delay:2.5s
}

/* M Angels */
.mAngelHead {
  margin-top: 20px;
  background: #131313;
  margin-bottom: 3px;
  padding: 10px;
  text-align: center;
  font-size: 15px;
}
.mAngel {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  background: #131313;
  margin-bottom: 3px;
  padding: 10px;
}
.mAngelAvatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
}
.mAngelAvatar img {
  width: 100%;
}
.mAngelName {
  font-weight: bold;
  font-size: 17px;
  text-decoration: none;
}
.mAngelName a {
  transition: 0.2s all;
  text-decoration: none;
}
.mAngelName a:hover {
  text-decoration: underline;
}
.mAngelUname {
  color: grey;
  font-size: 14px;
}

.wt_ad {
  width: 100%;
  box-sizing: border-box;
  margin-top: 20px;
}
.wt_ad img {
  width: 100%;
}
.pt10 {
  margin-top: 15px!important;
}

.modd_wrap {
  background: #151515;
  padding: 20px;
  margin-bottom: 20px;
  font-size: 13px;
  color: #b7b7b7;
  box-sizing: border-box;
  width: 100%;
}
.inlinebtn {
  display: inline-block!important;
}
.mod_alt {
  background: #7e2727;
  padding: 5px;
  font-size: 11px;
  color: white;
  margin-top: -5px;
  margin-bottom: 15px;
  text-align: center;
}

/* DJ Releases */
#djReleases {
  background: #282828;
  padding: 0;
  font-family: 'Abel', sans-serif;
  font-size: 14px;
}
#djReleases .pod_head {
  text-align: center;
  margin-bottom: 20px;
}
#djReleases .podcastWrap {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 2px;
  background: #222;
  padding: 10px;
}
#djReleases .podcastWrap:nth-child(even) {
  background: #1c1c1c;
}
#djReleases .pod_artwork {
  width: 125px;
  height: 125px;
  box-sizing: border-box;
  flex-shrink: 0;
  margin-right: 20px;
  overflow: hidden
}
#djReleases .pod_artwork img {
  width: 100%;
}
#djReleases .pod_title {
  font-family: 'bebas', 'Arial', sans-serif;
  font-size: 22px;
  margin-top: 3px;
}
#djReleases .pod_artist {
  font-size: 15px;
  margin-top: 3px;
}
#djReleases .pod_label {
  font-size: 13px;
  margin-top: 3px;
  color: gray;
}
#djReleases .pod_url {
  margin-top: 5px;
}

#djReleases .pod_url a {
  text-decoration: none;
  color: #6198ee;
}

#djReleases .pod_url a:hover {
  text-decoration: underline;
}

#djReleases .pod_pub_txt {
  font-size: 13px;
  margin-top: 5px;
  color: #ac8c4e;
}
#djReleases .pod_pub {
  font-size: 13px;
  margin-top: 5px;
  color: #6fac59;
}
#djReleases .pod_right {
  margin-left: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
}

#djReleases .pod_meta {
  color: #888;
  font-size: 12px;
  margin-top: 7px;
}
#djReleases .pod_meta_item {
  margin-right: 10px;
}
#djReleases a.btn-edit {
  background: #595959;
  color: white;
  padding: 5px 10px 2px 10px;
  font-size: 10px;
  transition: 0.2s all;
  margin-right: 10px;
  cursor: pointer;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  margin: 1px 0 13px 0;
  text-decoration: none;
}
#djReleases a.btn-edit:hover {
  background: #39537b;
}
#djReleases .btn-del {
  background: #595959;
  color: white;
  padding: 5px 10px 2px 10px;
  font-size: 10px;
  transition: 0.2s all;
  cursor: pointer;
}
#djReleases .btn-del:hover {
  background: #9d2727;
}
#djReleases .dj_pod_head {
    background: #333;
    color: white;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
}

#modReleases {
  background: #323232;
  padding: 0;
  font-family: 'Abel', sans-serif;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

#modReleases .pod_artwork {
  width: 90px;
  height: 90px;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
  margin:10px auto;
}
#modReleases .pod_artwork img {
  width: 100%;
}

#modReleases .btn-comp {
  background: #4a804a;
  color: white;
  padding: 8px 10px 8px 10px;
  font-size: 13px;
  transition: 0.2s all;
  cursor: pointer;
}
#modReleases .btn-comp:hover {
  background: #9d2727;
}

#modReleases .btn-comp-no {
  background: #d17b1a;
  color: white;
  margin-left: 10px;
  padding: 8px 10px 8px 10px;
  font-size: 13px;
  transition: 0.2s all;
  cursor: pointer;
}
#modReleases .btn-comp-no:hover {
  background: #7e4607;
}

#modReleases .podcastWrap {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 5px solid black;
  background: #333;
  padding: 10px;
  flex-direction: column;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#modReleases .pod_title {
  font-family: 'Arial', sans-serif;
  font-size: 15px;
  margin-top: 3px;
  color: white;
}

#modReleases .pod_artist {
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  color: #dbdbdb;
}

#modReleases .pod_right {
  margin: 30px auto 20px auto;
  text-align: center;
}

#modReleases .pod_url {
  margin-top: 10px;
}
#modReleases .pod_label {
  font-size: 13px;
  color: #bdbdbd;
}
#modReleases .modDates {
  margin-top: 10px;
}

#modReleases .pod_pub {
  font-size: 12px;
  margin-top: 5px;
  color: #89c478;
}

#modReleases .pod_pub_txt {
  font-size: 12px;
  color: #76bece;
}
#modReleases .submitted_by {
  margin-top: 10px;
  font-size: 13px;
  color: #ff8300;
}
.modRelHead {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 3px;
  background: #305191;
  color: white;
  padding: 7px 5px 5px 5px;
  box-sizing: border-box;
  text-align: center;
}



.g_banner {
  width: 80%;
  font-size: 14px;
  margin: 140px auto 30px auto;
  text-align: center;
  box-sizing: border-box;
  color: #ffac62;
}

/* Shop */
.shopimage {
  width: 100%;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}
.shopimage img {
  width: 100%;
}
.shopact {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  margin-top: 40px;
}
.shop {
  font-size: 18px;
  text-decoration: none;
  border-radius: 5px;
  background: white;
  color: #212121;
  padding: 5px 20px;
}
.shop:hover {
  background: #adadad;
}
.shopblurb {
  margin-top: 40px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 30px;
}

.btn-download-mod {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
}

@media (min-width: 768px) { 
  .shopblurb {
    margin-top: 40px;
    margin-left: 0px!important;
    margin-right: 0px!important;
  }
}

.fs-head {
  color: #e9d4bb;
  font-family: 'bebas';
  text-align: center;
  font-size: 22px;
  margin-bottom: 20px;
}
.featured-shop {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.sf {
  width:24%;
  margin-bottom: 5px;
}
.sf img {
  width: 100%;
}
.d3epfont {
  font-family: 'D3ep'!important;
}

/* modcasts */
.modcasts {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}
.modpod {
    display: flex;
    flex-direction: row;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #565656;
    padding: 20px;
    margin-bottom: 5px;
}
.modpodimg {
    width: 150px;
    margin-right: 20px;
}
.modpodimg img {
    width: 100%;
}
.modpoddata {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    margin-right: 20px;
}
.modpodtitle {
    display: inline-block;
    background: white;
    color: #212121;
    font-size: 13px;
    padding: 5px;
    margin-bottom: 10px;
    cursor: pointer;
}
.modpodtags {
    display: flex;
    flex-direction: row;
}
.modpodtag {
    background: white;
    color: #212121;
    font-size: 11px;
    padding: 5px;
    margin-right: 10px;
    cursor: pointer;
}
.modpodinfo {
    display: inline-block;
    background: white;
    color: #212121;
    font-size: 13px;
    padding: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    width: auto;
}
.modpodbtn {
    display: flex;
    background: #638f4eff;
    color: white;
    text-align: center;
    cursor: pointer;
    padding: 10px;
    font-size: 14px;
    align-items: center;
}
.modpodbtn:hover {
    background: #3f5e30ff;
}
.modpodtag:hover,
.modpodtitle:hover,
.modpodinfo:hover {
    background: #6eb0d6ff;
}
a.modpoddownloadbtn {
display: flex;
    background: #ce8c30ff;
    color: white;
    text-align: center;
    cursor: pointer;
    padding: 10px;
    font-size: 50px;
    align-items: center;
    margin-right: 20px;
    text-decoration: none;
}
a.modpoddownloadbtn:hover {
    background: #92611eff;
}