#togglePrivacyPopup .featuresList {
  list-style-type: disc;
  padding-left: 13px;
  max-width: 500px;
}
#togglePrivacyPopup .featuresList li {
  margin-bottom: 6px;
}
#togglePrivacyPopup .featuresList li span {
  color: gray;
  font-size: 0.9rem;
}
#togglePrivacyPopup footer {
  margin-top: 5px;
  text-align: center;
}

#subscribableCasesList .subscribableCase {
  flex-direction: column;
  align-items: flex-start;
  padding: 10px 14px 9px;
}
#subscribableCasesList .subscribableCase > div {
  display: flex;
  width: 100%;
  justify-content: space-between;
  cursor: default;
}
#subscribableCasesList .subscribableCase > div > div {
  text-align: left;
  display: flex;
  align-items: center;
}
#subscribableCasesList .subscribableCase > div > div img {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  margin-right: 10px;
}
#subscribableCasesList .subscribableCase > div > div > div {
  display: flex;
  text-align: left;
  font-size: 1.2rem;
  flex-direction: column;
}
#subscribableCasesList .subscribableCase > div > div > div > div {
  display: flex;
  margin-bottom: 2px;
}
#subscribableCasesList .subscribableCase > div button {
  font-weight: normal;
  padding: 1px 11px 3px;
  height: 25px;
}
#subscribableCasesList .subscribableCase > div button.subscribed {
  background-color: rgba(0, 0, 0, 0.5);
}
#subscribableCasesList .subscribableCase > div button span {
  display: flex;
  align-items: center;
}
#subscribableCasesList .subscribableCase > div .stats {
  margin: 0 8px;
  font-weight: normal;
  font-size: 1rem;
}
#subscribableCasesList .subscribableCase > div b {
  text-overflow: ellipsis;
  max-width: 300px;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}
#subscribableCasesList .subscribableCase > div .caseOwner {
  margin-left: 3px;
}
#subscribableCasesList .subscribableCase > div .caseOwner a {
  color: #0c7cd5;
}
#subscribableCasesList .subscribableCase > div .caseOwner a:hover {
  text-decoration: underline;
}
#subscribableCasesList .subscribableCase > div span {
  font-weight: normal;
  position: relative;
}
#subscribableCasesList .subscribableCase p {
  margin: 1px 0;
  color: #666666;
  font-weight: normal;
  font-size: 1rem !important;
}

#subscribeToUserBeatCasesPopup .modal-header {
  padding-bottom: 10px;
}
#subscribeToUserBeatCasesPopup .modal-body {
  padding: 0;
}
#subscribeToUserBeatCasesPopup .modal-body .spinnerHolder {
  text-align: center;
  padding-bottom: 17px;
}
#subscribeToUserBeatCasesPopup .modal-body #explanationTxt {
  text-align: center;
  margin: 0 50px;
}
#subscribeToUserBeatCasesPopup .modal-body #explanationTxt small {
  font-size: 1rem;
}
#subscribeToUserBeatCasesPopup .modal-body #explanationTxt a {
  color: #0c7cd5;
}
#subscribeToUserBeatCasesPopup .modal-body .listHolder {
  border-radius: 20px;
}
#subscribeToUserBeatCasesPopup .modal-body .ctaButton {
  text-align: center;
  padding: 15px;
}

#postFavoritePopup {
  text-align: center;
}
#postFavoritePopup p i,
#postFavoritePopup p a {
  color: #2196F3;
}
#postFavoritePopup p i {
  font-size: 1.2rem;
}
#postFavoritePopup p a {
  text-decoration: underline;
}
#postFavoritePopup .buttonsHolder {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
#postFavoritePopup .buttonsHolder button {
  margin: 10px 10px;
  padding-top: 5px;
  padding-bottom: 8px;
  width: 100px;
}

#connectCaseToRoomPopup {
  text-align: center;
}
#connectCaseToRoomPopup p i,
#connectCaseToRoomPopup p a {
  color: #2196F3;
}
#connectCaseToRoomPopup p i {
  font-size: 1.2rem;
}
#connectCaseToRoomPopup p a {
  text-decoration: underline;
}
#connectCaseToRoomPopup .buttonsHolder {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
#connectCaseToRoomPopup .buttonsHolder button {
  margin: 10px 10px;
  padding-top: 5px;
  padding-bottom: 8px;
  width: 100px;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*Animations*/
.noblink {
  -webkit-animation-iteration-count: 0 !important;
  animation-iteration-count: 0 !important;
}
.rotate-90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.rotate-180 {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.flip {
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: fliph;
  /*IE*/
  filter: fliph;
  /*IE*/
}
.clickable {
  cursor: pointer;
}
.notclickable {
  text-decoration: none !important;
  cursor: default !important;
}
.unlink {
  text-decoration: none !important;
}
.grid > * {
  width: 20%;
  display: inline-block;
}
@media screen and (max-width: 1600px) {
  .grid > * {
    width: 25%;
  }
}
@media screen and (max-width: 1250px) {
  .grid > * {
    width: 33%;
  }
}
@media screen and (max-width: 950px) {
  .grid > * {
    width: 50%;
  }
}
.giantText {
  font-size: 1.8rem;
}
.biggerText {
  font-size: 1.6rem;
}
.bigText {
  font-size: 1.4rem;
}
.mediumText {
  font-size: 1.2rem;
}
.normalText {
  font-size: 1.1rem;
}
.semiSmallText {
  font-size: 0.95rem;
}
.smallText {
  font-size: 0.9rem;
}
.smallerText {
  font-size: 0.8rem;
}
.tinyText {
  font-size: 0.75rem;
}
.smallestText {
  font-size: 0.65rem;
}
#jammingPartners {
  background-color: white;
}
#jammingPartners h3 {
  margin: 0px;
  text-align: center;
  padding: 25px;
  font-size: 1.6rem;
}
#jammingPartners .resultsHolder {
  display: flex;
  align-items: center;
  justify-content: center;
}
#jammingPartners .resultsHolder .paginationIcon {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  color: #2196F3;
  padding: 5px;
  height: 80px;
  font-size: 4rem;
  text-shadow: 3px 2px #f32196;
}
#jammingPartners .resultsHolder .listHolder {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 1450px;
}
#jammingPartners .resultsHolder .listHolder .partnerBox {
  display: flex;
  margin-bottom: 30px;
  margin-right: 20px;
}
#jammingPartners .resultsHolder .listHolder .partnerBox:hover {
  text-decoration: none;
}
#jammingPartners .resultsHolder .listHolder .partnerBox .userImage {
  margin-right: 10px;
}
#jammingPartners .resultsHolder .listHolder .partnerBox .userImage img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
}
#jammingPartners .resultsHolder .listHolder .partnerBox > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
#jammingPartners .resultsHolder .listHolder .partnerBox > div > div {
  display: flex;
  font-size: 1.2rem;
}
#jammingPartners .resultsHolder .listHolder .partnerBox > div > div span {
  margin-right: 5px;
}
#jammingPartners .resultsHolder .listHolder .partnerBox > div > div a {
  color: #0c7cd5;
  max-width: 114px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}
#jammingPartners .resultsHolder .listHolder .partnerBox > div > div > div {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 120px;
  color: #0c7cd5;
  font-weight: bold;
}
#jammingPartners .resultsHolder .listHolder .partnerBox > div > div > div:hover {
  text-decoration: underline;
}
#jammingPartners .resultsHolder .listHolder .partnerBox > div .roomTags {
  font-size: 0.9rem;
  color: #6f6f6f;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 200px;
  display: inline;
  white-space: nowrap;
}

#loginOptions .login-bnt {
  color: #FFFFFF;
  display: table;
  line-height: 41px;
  margin-bottom: 9px;
  background-color: #3B5998;
  border-radius: 20px;
  padding-bottom: 1px;
  width: 100%;
  text-align: center;
}
#loginOptions .login-bnt:hover {
  background-color: #35518a;
}
#loginOptions .login-bnt > div {
  float: left;
}
#loginOptions .login-bnt > .login-option-logo {
  border-radius: 4px 0px 0px 4px;
  width: 40px;
  background-color: #31487b;
  position: absolute;
}
#loginOptions .login-bnt > .login-option-logo > i {
  line-height: inherit;
  font-size: 1.2rem;
}
#loginOptions .login-bnt > .login-option-label {
  padding: 0 15px;
  width: 100%;
}
#loginOptions .login-bnt.twitter {
  background-color: black;
}
#loginOptions .login-bnt.twitter:hover {
  background-color: #3b3b3b;
}
#loginOptions .login-bnt.twitter > .login-option-logo {
  background-color: black;
}
#loginOptions .login-bnt.google {
  background-color: #D54934;
}
#loginOptions .login-bnt.google:hover {
  background-color: #c54330;
}
#loginOptions .login-bnt.google > .login-option-logo {
  background-color: #b93d2a;
}
#loginOptions .login-bnt.email {
  background-color: #239fa7;
}
#loginOptions .login-bnt.email:hover {
  background-color: #21979f;
}
#loginOptions .login-bnt.email > .login-option-logo {
  background-color: #1d8b92;
}
#loginOptions .login-bnt.twitter,
#loginOptions .login-bnt.google {
  margin-top: 1px;
}

#songModal .modal-body .songNotFoundError {
  color: red;
  text-align: center;
}
#songModal .modal-body .songNotFoundError button {
  margin-top: 10px;
}
#songModal .spinnerHolder {
  text-align: center;
  padding-top: 132px;
}
#songModal .spinnerHolder #mySpinner {
  font-size: 5em;
}

#userAlertsOpener {
  position: relative;
}
#userAlertsOpener i {
  font-size: 1.1rem;
}
#userAlertsOpener > .unread {
  position: absolute;
  background: #FF8181;
  width: 13px;
  height: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
  z-index: 1;
  top: 9px;
  left: 8px;
}

#userAlertsHolder {
  position: fixed;
  top: 48px;
  right: calc((100vw - 1150px) / 2);
  z-index: 2;
}
#userAlertsHolder .ps-scrollbar-y-rail {
  display: none;
}
#userAlertsHolder .loaderHolder {
  right: 43px;
  position: absolute;
}
#userAlertsHolder .loaderHolder > i {
  margin-top: 7px;
}
#userAlertsHolder .noAlerts {
  text-align: center;
  color: #404040;
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  background-color: white;
  padding: 10px;
}
#userAlertsHolder .list {
  max-height: 76vh;
  margin-bottom: 2px;
}
#userAlertsHolder .userAlertHolder {
  position: relative;
  background-color: white;
  padding: 12px;
  display: flex;
  min-width: 200px;
  margin-bottom: 2px;
  color: #404040;
}
#userAlertsHolder .userAlertHolder a {
  cursor: pointer;
}
#userAlertsHolder .userAlertHolder a.btn {
  margin-top: 5px;
  padding: 3px 10px 6px;
}
#userAlertsHolder .userAlertHolder.unread {
  background-color: #e6e6e6;
}
#userAlertsHolder .userAlertHolder .iconWrapper,
#userAlertsHolder .userAlertHolder .imageWrapper {
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px 0 2px;
}
#userAlertsHolder .userAlertHolder .iconWrapper i,
#userAlertsHolder .userAlertHolder .imageWrapper i {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin: 0px;
  font-size: 25px;
  background-color: #e6e6e6;
  border-radius: 50%;
  padding: 10px 8px;
  width: 40px;
  height: 40px;
}
#userAlertsHolder .userAlertHolder .imageWrapper img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
#userAlertsHolder .userAlertHolder .contentWrapper {
  line-height: 20px;
}
#userAlertsHolder .userAlertHolder .contentWrapper .alertMessage {
  white-space: normal;
  max-width: 300px;
  padding-right: 10px;
}
#userAlertsHolder .userAlertHolder .contentWrapper .alertMessage a {
  color: #f32196;
}
#userAlertsHolder .userAlertHolder .contentWrapper .alertAddedAt {
  opacity: 0.7;
  font-size: 0.9rem;
}
#userAlertsHolder .userAlertHolder .contentWrapper .actionsHolder {
  display: flex;
  margin-bottom: 1px;
}
#userAlertsHolder .userAlertHolder .contentWrapper .actionsHolder :not(:last-child) {
  margin-right: 5px;
}
#userAlertsHolder .userAlertHolder .contentWrapper .actionsHolder button {
  padding: 3px 10px 6px;
  white-space: nowrap;
  margin-top: 5px;
}
#userAlertsHolder .userAlertHolder .loaderHolder {
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  height: 100%;
}
#userAlertsHolder .userAlertHolder .loaderHolder .bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.5;
}
#userAlertsHolder .userAlertHolder .loaderHolder > i {
  margin-top: 14px;
  color: #fff;
}
#userAlertsHolder .userAlertHolder .btnDelete {
  position: absolute;
  top: 5px;
  right: 9px;
  font-size: 0.9rem;
}
#userAlertsHolder #clearAll {
  background-color: #2196F3;
  display: block;
  color: white;
  text-align: center;
  padding: 3px 0 4px;
  font-weight: bold;
  width: 100%;
  font-size: 0.9rem;
}
#userAlertsHolder #clearAll:hover {
  text-decoration: none;
  background-color: #0c7cd5;
}
.inRoom #userAlertsHolder {
  right: 5px;
}

.myCustomSwitch {
  display: flex;
  align-items: baseline;
}
.myCustomSwitch.inline {
  display: inline-flex;
}
.myCustomSwitch h6 {
  margin: 0px;
  font-weight: normal;
  cursor: default;
  padding-top: 1px;
}
.myCustomSwitch.disabled .switch button {
  cursor: default !important;
  opacity: 0.7;
}
.myCustomSwitch .switch {
  margin-right: 5px;
  display: flex;
}
.myCustomSwitch .switch button {
  background-color: white !important;
  color: #000 !important;
  padding: 2px 0px 2px !important;
  min-width: 35px !important;
  height: 17px !important;
  font-size: 9px !important;
  border-radius: 0px !important;
  z-index: 2 !important;
}
.myCustomSwitch .switch button.active {
  background-color: #2196F3 !important;
  color: white !important;
}
.myCustomSwitch .switch button:first-of-type {
  border-radius: 4px 0px 0px 4px !important;
  border: 1px solid #D2D2D2 !important;
}
.myCustomSwitch .switch button:last-of-type {
  border-radius: 0px 4px 4px 0px !important;
  border: 1px solid #D2D2D2 !important;
}

#cookiesApproval {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  z-index: 1002;
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 10px;
  border-top: #f32196 3px solid;
}
#cookiesApproval button {
  font-weight: lighter;
}
#cookiesApproval a {
  color: blue;
  margin-right: 5px;
}

.longSongModal {
  text-align: center;
}

.musicTagSearch {
  position: relative;
}
.musicTagSearch .spinner {
  position: absolute;
  top: 0;
  left: 0;
}

.songMoodsSearch {
  position: relative;
}
.songMoodsSearch .spinner {
  position: absolute;
  top: 0;
  left: 0;
}

.languagesSearch {
  position: relative;
}
.languagesSearch .spinner {
  position: absolute;
  top: 0;
  left: 0;
}


#myGifsModal .modal-body {
  padding-top: 20px;
  height: 592px;
  width: 620px;
}
#myGifsModal .modal-body > .fa-times {
  float: right;
  font-size: 1.2rem;
}
#myGifsModal .modal-body .gifsModalSearchBox {
  width: 100%;
  margin: 12px 0;
}
#myGifsModal .modal-body .gifsModalSearchBox > input,
#myGifsModal .modal-body .gifsModalSearchBox > i {
  font-size: 1.2rem;
}
#myGifsModal .modal-body .gifsModalSearchBox > input {
  height: 40px;
  width: 100%;
  max-width: initial;
}
#myGifsModal .modal-body .listHolder {
  display: flex;
  flex-flow: row wrap;
  max-height: 462px;
  overflow-y: auto;
}
#myGifsModal .modal-body .listHolder .gifItem {
  width: 116px;
  height: 116px;
  position: relative;
  cursor: pointer;
}
#myGifsModal .modal-body .listHolder .gifItem img {
  height: 100%;
  width: 100%;
}
#myGifsModal .modal-body .listHolder .gifItem .infoHolder {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
}
#myGifsModal .modal-body .listHolder .gifItem .infoHolder .bg,
#myGifsModal .modal-body .listHolder .gifItem .infoHolder .price,
#myGifsModal .modal-body .listHolder .gifItem .infoHolder .user {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#myGifsModal .modal-body .listHolder .gifItem .infoHolder .bg {
  background-color: #000;
  opacity: 0.5;
}
#myGifsModal .modal-body .listHolder .gifItem .infoHolder .price {
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
#myGifsModal .modal-body .listHolder .gifItem .infoHolder .price .txt {
  font-size: 1.4rem;
}
#myGifsModal .modal-body .listHolder .gifItem .infoHolder .price .amount {
  margin-left: 8px;
  position: relative;
  top: 1px;
  font-size: 1.2rem;
}
#myGifsModal .modal-body .listHolder .gifItem .infoHolder .user {
  top: auto;
  bottom: 0;
  color: #fff;
  height: auto;
  padding: 5px;
  font-size: 0.8rem;
}
#myGifsModal .modal-body .listHolder .gifItem:hover .infoHolder {
  display: block;
}
#myGifsModal .modal-body .poweredByHolder {
  margin-top: 5px;
  font-size: 0.75em;
  font-weight: bold;
}
#myGifsModal .modal-body .poweredByHolder > img {
  width: 60px;
}

#chats {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 11;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0 45px;
}
#chats.mobile {
  margin-right: 0px;
  bottom: 105px;
  z-index: 1002;
  padding: 0;
}

#chats .chat {
  pointer-events: auto;
  margin-right: 10px;
  width: 320px;
}
#chats .chat .chatHeader {
  position: relative;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 3px 2px 5px 5px;
  width: 320px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 4px 4px -4px;
}
#chats .chat .chatHeader > * {
  display: flex;
  align-items: center;
}
#chats .chat .chatHeader > * > * {
  display: flex;
  align-items: center;
  margin-right: 13px;
}
#chats .chat .chatHeader.focus {
  background-color: #efefef;
}
#chats .chat .chatHeader .userImage {
  height: 25px;
  width: 25px;
  border-radius: 50%;
}
#chats .chat .chatHeader .userName {
  margin-left: 5px;
  display: inherit;
}
#chats .chat .chatHeader .unreads {
  background-color: #53bd87;
  width: 16px;
  height: 16px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  padding-left: 1px;
  position: relative;
  top: 1px;
}
#chats .chat .chatHeader .btnClose {
  cursor: pointer;
}
#chats .chat .chatHeader .fa-shield-alt {
  opacity: 0.4;
}
#chats .chat .chatHeader .blocked {
  color: #FF8181;
  font-size: 1.2rem;
  opacity: 1;
}
#chats .chat .chatBody {
  height: 256px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
}
#chats .chat .chatBody .messagesHolder {
  height: 225px;
  position: relative;
}
#chats .chat .chatBody .messagesHolder .scrollArea {
  position: absolute;
  bottom: 0;
  left: 0;
  max-height: 225px;
  width: 100%;
}
#chats .chat .chatBody .messagesHolder .scrollArea .chatMessageRow {
  background-color: rgba(0, 0, 0, 0.9);
}
#chats .chat .chatBody .messagesHolder .scrollArea :nth-child(even) .chatMessageRow {
  background-color: rgba(0, 0, 0, 0.8);
}
#chats .chat .chatBody .loader {
  width: 100%;
  height: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
  text-align: center;
}
#chats .chat .chatBody .loader > i {
  font-size: 6em;
  margin-top: 73px;
  color: #fff;
}
#chats .chat.mobile {
  width: 100vw;
  font-size: 16px;
  margin-right: 0px;
}
#chats .chat.mobile .chatBody,
#chats .chat.mobile .chatBody .messagesHolder {
  height: auto !important;
}
#chats .chat.mobile .chatBody {
  background-color: #04527e;
}
#chats .chat.mobile .chatBody .messagesHolder .scrollArea {
  height: 45vh !important;
  max-height: initial !important;
  width: 100%;
  overflow-y: auto !important;
  position: relative;
  bottom: auto;
  left: auto;
}
#chats .chat.mobile .chatInputHolder input {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid lightgrey;
}
#chats .chat.mobile .chatInputHolder .chatEmojisOpener {
  right: 45px;
  font-size: 18px;
  top: 3px;
}
#chats .chat.mobile .chatInputHolder .gifsOpener {
  right: 8px;
  font-size: 18px;
  padding: 4px;
  top: 3px;
}
#chats .chat.mobile .chatHeader {
  width: inherit;
}

.chatMessageRow {
  padding: 3px 9px 7px 9px;
  position: relative;
  width: 100%;
  color: white;
  background-color: rgba(0, 0, 0, 0.8);
}
.chatMessageRow.rtl {
  direction: rtl;
}
.chatMessageRow.rtl .sendIndicator {
  left: 6px;
  right: auto;
}
.chatMessageRow.rtl .messageColor {
  margin-right: 14px;
}
.chatMessageRow .messageColor {
  min-width: 4px;
  height: 100%;
  position: absolute;
  left: 2px;
  top: 0;
}
.chatMessageRow .userName a {
  color: #97daf7;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 80px;
  display: inline-block;
  line-height: 16px;
  top: 3px;
  position: relative;
}
.chatMessageRow .separator {
  position: relative;
  right: 2px;
}
.chatMessageRow .msgTxt a:not(.user-link-inline) {
  color: #00aced;
}
.chatMessageRow .msgTxt a:not(.user-link-inline):hover {
  text-decoration: underline;
}
.chatMessageRow .msgTxt .user-link-inline {
  color: #f32196;
}
.chatMessageRow img {
  max-height: 110px;
}
.chatMessageRow .sendIndicator {
  position: absolute;
  bottom: 1px;
  right: 16px;
}
.chatMessageRow .sendIndicator > i {
  font-size: 0.7em;
}
.chatMessageRow .sendIndicator.read {
  color: yellow;
}
.chatMessageRow:hover .chatMessageHoverOptions {
  display: flex;
}
.chatMessageColorTooltip {
  max-width: 160px;
}

.chatInputHolder {
  position: relative;
}
.chatInputHolder input {
  height: 32px;
  width: 261px;
  padding: 0px 1px 3px 9px;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  background: #d9d8d8;
  background: linear-gradient(15deg, #d9d8d8 0%, #faecec 9%, #f7f6f6 15%, #ffffff 30%);
}
.chatInputHolder .unreadIndicator {
  color: #f32196;
  position: absolute;
  top: 9px;
  right: 65px;
  -webkit-animation: blink 1.5s infinite;
  animation: blink 1.5s infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  cursor: pointer;
}
.chatInputHolder .unreadIndicator .blinkFunc from {
  opacity: 0;
}
.chatInputHolder .unreadIndicator .blinkFunc to {
  opacity: 0.5;
}
@-webkit-keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}
@keyframes blink {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.5;
  }
}
.chatInputHolder .gifsOpener,
.chatInputHolder .chatEmojisOpener {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 0.9rem;
  color: #2196F3;
  padding: 7px 7px 6px;
  font-weight: bold;
  height: 32px;
  background-color: white;
}
.chatInputHolder .chatEmojisOpener {
  right: 30px;
  font-size: 15px;
  padding: 5px 7px 6px;
}
.chatInputHolder.private #chatInputSuggestedUsersHolder {
  bottom: 0;
  top: auto;
}

#inboxOpener {
  position: relative;
}
#inboxOpener i {
  font-size: 1.15rem;
}

#inboxHolder {
  position: fixed;
  top: 50px;
  right: calc((100vw - 1150px) / 2);
  z-index: 2;
  width: 300px;
  max-height: 80vh;
  color: #404040;
}
#inboxHolder #noMessages {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 10px 20px;
}
#inboxHolder #noMessages .loader {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
}
#inboxHolder #noMessages .loader > i {
  font-size: 2em;
}
#inboxHolder .threadsScrollable {
  max-height: 80vh;
}
#inboxHolder #buttonsHolder > * {
  background-color: #2196F3;
  display: block;
  text-align: center;
  padding: 1px 0 4px;
  width: 100%;
  font-size: 0.9rem;
  cursor: pointer;
  margin-top: 2px;
}
#inboxHolder #buttonsHolder > *:hover {
  text-decoration: none;
  background-color: #0c7cd5;
}
.inRoom #inboxHolder {
  right: 0;
}

.threadHolder {
  position: relative;
  min-width: 200px;
  background-color: white;
  margin-bottom: 4px;
  padding: 6px 8px 8px;
  cursor: pointer;
}
.threadHolder.unread {
  background-color: #e6e6e6;
}
.threadHolder .upperRow {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}
.threadHolder .upperRow .userImage {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: 5px;
}
.threadHolder .upperRow .userName {
  color: #f32196;
  margin-right: 2px;
  white-space: nowrap;
}
.threadHolder .upperRow .message {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding-right: 10px;
  white-space: nowrap;
}
.threadHolder .upperRow .message img {
  height: 20px;
  width: auto;
}
.threadHolder .addedAtAndMarkAsRead {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  opacity: 0.7;
}
.threadHolder .addedAtAndMarkAsRead .btnMarkAsRead:hover {
  text-decoration: underline;
}
.threadHolder:hover .btnMarkAsRead {
  display: block;
}


#musicMatchesPopup {
  width: 600px;
}
#musicMatchesPopup .musicTagSearch {
  margin-bottom: 8px;
}
#musicMatchesPopup #matches {
  max-height: 395px;
}
#musicMatchesPopup #matches .match {
  display: flex;
  padding: 10px 5px;
  justify-content: space-between;
}
#musicMatchesPopup #matches .match:hover {
  background-color: #e6e6e6;
}
#musicMatchesPopup #matches .match > div {
  display: flex;
}
#musicMatchesPopup #matches .match img {
  width: 60px;
  height: 60px;
  margin-right: 10px;
  border-radius: 50%;
}
#musicMatchesPopup #matches .match img.isNew {
  border: 5px solid #2196F3;
}
#musicMatchesPopup #matches .match .matchName {
  font-size: 1.4rem;
  font-weight: bold;
  display: flex;
  align-items: center;
}
#musicMatchesPopup #matches .match .matchName .onlineMatch {
  font-size: 0.9rem;
  margin-left: 10px;
  position: relative;
  top: 2px;
}
#musicMatchesPopup #matches .match .matchName .onlineMatch .fa-circle {
  color: #39e737;
}
#musicMatchesPopup #matches .match .matchTags {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
#musicMatchesPopup #matches .match .matchTags > div {
  color: white;
  margin-right: 5px;
  font-size: 0.9rem;
  background-color: rgba(249, 44, 243, 0.9);
  border-radius: 70px;
  padding: 0 10px;
}
#musicMatchesPopup #matches .match .matchTags > div.match {
  background-color: #53bd87;
}
#musicMatchesPopup #matches .match .superMatch {
  margin-left: 20px;
  font-weight: 100;
  color: #f32196;
  text-shadow: 2px 0px 0px #2196F3;
  float: right;
  font-size: 1.4rem;
  position: relative;
  top: 1px;
}
#musicMatchesPopup .fa-spin {
  text-align: center;
  width: 100%;
  font-size: 2rem;
}
#musicMatchesPopup #noMatches {
  font-size: 1.2rem;
}

#profileWatchesPopup {
  text-align: center;
}
#profileWatchesPopup .modal-body {
  padding: 0px 10px 20px;
}
#profileWatchesPopup .modal-body h3 {
  font-weight: normal;
}
#profileWatchesPopup .modal-body h3 b {
  font-weight: 100;
}
#profileWatchesPopup .modal-body h4 {
  font-size: 1.2rem;
  font-weight: normal;
  padding: 12px;
}
#profileWatchesPopup .modal-body button {
  font-size: 1.2rem;
}
#profileWatchesPopup .watchersList li {
  padding: 8px 6px 10px;
  font-size: 1.2rem;
}
#profileWatchesPopup .watchersList li .userNameAndDate {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: relative;
  bottom: 2px;
}
#profileWatchesPopup .watchersList li .userNameAndDate .userName {
  color: #0c7cd5;
}
#profileWatchesPopup .watchersList li .userNameAndDate .watchDate {
  color: gray;
  font-size: 0.9rem;
}
#profileWatchesPopup .watchersList li .userImageHolder img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 8px;
}

.usersModal .modal-content {
  max-width: 500px !important;
}
#usersPopup .modal-body .searchHolder {
  display: flex;
  justify-content: stretch;
  align-items: center;
}
#usersPopup .modal-body .searchHolder .homeColumnSearch {
  flex-grow: 2;
  margin-right: 10px;
}
#usersPopup .modal-body .listHolder {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  margin-top: 25px;
}
#usersPopup .modal-body .listHolder #user {
  padding-right: 20px;
}
#usersPopup .modal-body .listHolder #user > a .details {
  width: 150px;
}


#create-room-modal #roomManagementHolder.themesDisplayed {
  width: 582px;
}
#create-room-modal #roomManagementHolder #roomThemesManagement {
  padding: 0 12px;
}
#create-room-modal .modal-body {
  width: 500px;
  padding: 0px;
  padding-bottom: 14px;
}
#create-room-modal .modal-body .subTitle {
  margin: 25px 0;
  text-align: center;
  padding: 0 30px;
}
#create-room-modal .modal-body #createRoomForm {
  margin-top: -6px;
  margin-bottom: 0px;
}
#create-room-modal .modal-body #createRoomForm section {
  margin-bottom: 22px;
  padding: 0 12px;
}
#create-room-modal .modal-body #createRoomForm .inputArea {
  display: flex;
  white-space: nowrap;
  margin-bottom: 5px;
}
#create-room-modal .modal-body #createRoomForm .inputArea #projectUrl {
  color: gray;
  font-weight: normal;
}
#create-room-modal .modal-body #createRoomForm tags-input[disabled] .tags,
#create-room-modal .modal-body #createRoomForm tags-input[disabled] .tags .input {
  background-color: #f8f8f8;
}
#create-room-modal .modal-body #createRoomForm input {
  border: none;
  border-bottom: 1px solid #D2D2D2;
  padding: 0px;
  background-color: inherit;
  margin: 0 0 0 5px;
  height: 24px;
  position: relative;
  top: 1px;
}
#create-room-modal .modal-body #createRoomForm input[type=checkbox] {
  margin: 0;
}
#create-room-modal .modal-body #createRoomForm label {
  margin: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}
#create-room-modal .modal-body #createRoomForm .btn {
  padding: 8px 22px 9px;
}
#create-room-modal .modal-body #createRoomForm input[type="checkbox"],
#create-room-modal .modal-body #createRoomForm input[type="radio"] {
  margin-right: 4px;
}
#create-room-modal .modal-body #createRoomForm tags-input .host {
  margin: 0;
}
#create-room-modal .modal-body #createRoomForm tags-input .tags {
  box-shadow: none;
  border: none;
}
#create-room-modal .modal-body #createRoomForm tags-input .tags input {
  color: #4a4a4a;
  width: 353px !important;
}
#create-room-modal .modal-body #createRoomForm #roomTags .field-error {
  margin-top: 5px;
  font-weight: bold;
  padding-bottom: 0px;
}
#create-room-modal .modal-body #createRoomForm #roomTags .autocomplete {
  margin-top: 0px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-top: 0px;
}
#create-room-modal .modal-body #createRoomForm #roomTags .autocomplete .suggestion-list {
  max-height: 168px;
  overflow-y: scroll;
}
#create-room-modal .modal-body #createRoomForm #roomTags .autocomplete .suggestion-item.selected {
  background-color: #eaeaea;
  color: black;
}
#create-room-modal .modal-body #createRoomForm #roomTags .autocomplete .suggestion-item.selected em {
  background-color: transparent;
  color: black;
}
#create-room-modal .modal-body #createRoomForm #roomTags #everything {
  display: flex;
  align-items: center;
  color: gray;
}
#create-room-modal .modal-body #createRoomForm #roomTags #everything .chkAllTagsLabel {
  font-weight: normal;
  font-size: 1rem;
  position: relative;
  top: 1px;
}
#create-room-modal .modal-body #createRoomForm #roomTags #everything .mixtape {
  color: #404040;
}
#create-room-modal .modal-body #createRoomForm #roomTags .tagsSpinner {
  position: absolute;
  top: 43px;
  right: 10px;
}
#create-room-modal .modal-body #createRoomForm .outlineSection {
  border: 4px solid #2196F3;
  padding: 3px 7px;
}
#create-room-modal .modal-body #createRoomForm #autoPlaySettings label {
  display: flex;
  align-items: center;
}
#create-room-modal .modal-body #createRoomForm #autoPlaySettings label .fa-question-circle {
  margin-left: 4px;
  top: 1px;
  position: relative;
  font-size: 1rem;
}
#create-room-modal .modal-body #createRoomForm #autoPlaySettings #autoPlaySettings_radios {
  display: flex;
  margin-top: 7px;
}
#create-room-modal .modal-body #createRoomForm #autoPlaySettings #autoPlaySettings_radios.disabledArea {
  opacity: 0.5;
}
#create-room-modal .modal-body #createRoomForm #autoPlaySettings #autoPlaySettings_radios > div {
  display: inline-flex;
  align-items: center;
}
#create-room-modal .modal-body #createRoomForm #autoPlaySettings #autoPlaySettings_radios > div > label {
  margin-right: 10px;
  position: relative;
  top: 2px;
  font-size: 0.9rem;
  color: #6f6f6f;
  font-weight: normal;
  white-space: nowrap;
}
#create-room-modal .modal-body #createRoomForm #roomDescriptionToggler {
  flex-direction: column;
}
#create-room-modal .modal-body #createRoomForm #roomDescriptionToggler #descriptionArea {
  margin-top: 5px;
}
#create-room-modal .modal-body #createRoomForm #roomDescriptionToggler #descriptionArea #txtDescription {
  width: 100%;
  height: 60px;
  padding: 3px 5px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  font-size: 0.95rem;
}
#create-room-modal .modal-body #createRoomForm #btnShowDescription,
#create-room-modal .modal-body #createRoomForm #btnSelectATheme {
  display: flex;
  align-items: center;
}
#create-room-modal .modal-body #createRoomForm #btnShowDescription i,
#create-room-modal .modal-body #createRoomForm #btnSelectATheme i {
  margin-right: 5px;
  position: relative;
  top: 1px;
}
#create-room-modal .modal-body #createRoomForm #themeOptions {
  display: flex;
  align-items: center;
}
#create-room-modal .modal-body #createRoomForm #themeOptions a {
  margin-right: 10px;
}
#create-room-modal .modal-body #createRoomForm #themeOptions a i {
  margin-right: 3px;
}
#create-room-modal .modal-body #createRoomForm #themeOptions img,
#create-room-modal .modal-body #createRoomForm #themeOptions video {
  width: 50px;
}
#create-room-modal .modal-body #createRoomForm #blockOthersSongsSwitch {
  display: flex;
  justify-content: space-between;
}
#create-room-modal .modal-body #createRoomForm #roomType {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#create-room-modal .modal-body #createRoomForm #roomType #roomTypesRadios {
  display: flex;
  width: 100%;
  align-items: baseline;
}
#create-room-modal .modal-body #createRoomForm #roomType #roomTypesRadios > div {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
#create-room-modal .modal-body #createRoomForm #roomType #roomTypesRadios label {
  margin-right: 8px;
  font-size: 0.9rem;
  position: relative;
  top: 1px;
}
#create-room-modal .modal-body #createRoomForm #roomType #roomTypesRadios label span {
  margin-right: 5px;
}
#create-room-modal .modal-body #createRoomForm #roomType #roomTypesRadios label i:not(.fa-bolt) {
  color: #2196F3;
  margin-right: 5px;
}
#create-room-modal .modal-body #createRoomForm #roomType #roomTypesRadios label span {
  margin-right: 2px;
}
#create-room-modal .modal-body #createRoomForm #createEditRoomBtnWrapper {
  margin-top: 15px;
  margin-bottom: 5px;
  text-align: center;
}
#create-room-modal .modal-body #createRoomForm #createEditRoomBtnWrapper #beatsBalance {
  font-size: 0.9rem;
  margin-top: 10px;
}
#create-room-modal .modal-body #createRoomForm #createEditRoomBtnWrapper #beatsBalance b {
  font-weight: 100;
}
#create-room-modal .modal-body #createRoomForm #create-room_room-type {
  margin-top: 14px !important;
}
#create-room-modal .modal-body #createRoomForm #create-room_room-type label {
  font-weight: inherit;
  margin-top: 0px;
}
#create-room-modal .modal-body #createRoomForm #create-room_room-type input[type=radio] {
  position: relative;
  top: 1px;
}

.chargeForRoomEntrance {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.chargeForRoomEntrance input[type=number] {
  border: 1px solid #e8e8e8 !important;
  font-size: 1.1rem;
  width: 42px;
  height: 20px;
  padding: 0 4px !important;
  margin: 0px !important;
}
.chargeForRoomEntrance input {
  margin-right: 3px !important;
}
.chargeForRoomEntrance label {
  font-weight: normal !important;
  font-size: 1rem !important;
}
.chargeForRoomEntrance .beatsIcon {
  margin-right: 5px;
}

#roomLevelsHolder .roomLevelSwitch {
  align-items: center;
  display: flex;
}
#roomLevelsHolder .roomLevelSwitch > div {
  display: flex;
  align-items: center;
}
#roomLevelsHolder .roomLevelSwitch > div label {
  font-weight: normal;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}
#roomLevelsHolder .roomLevelSwitch > div label b {
  font-weight: bold;
  margin: 0 3px;
}
#roomLevelsHolder .roomLevelSwitch .beatsIcon {
  font-size: 0.9rem;
  margin-left: 3px;
  position: relative;
  top: 1px;
}
#roomLevelsHolder .roomLevelSwitch .proInfo {
  margin-left: 7px;
}

.leveledRoomBadge {
  color: white;
  font-size: 0.8rem;
  border-radius: 20px;
  display: inline;
  padding: 0px 8px 1px;
  margin-left: 5px;
  font-weight: normal;
  cursor: default;
  position: relative;
  bottom: 2px;
}
.leveledRoomBadge.roomLevel_2 {
  background-color: #eccc1b;
}
.leveledRoomBadge.roomLevel_3 {
  background-color: #a1944d;
}
.leveledRoomBadge.roomLevel_4 {
  background-color: black;
}
.leveledRoomBadge.disabled {
  background-color: gray;
  cursor: pointer;
}

#roomLevelPopup #roomLevelFeatures .roomLevelFeature {
  margin-bottom: 10px;
}
#roomLevelPopup #roomLevelFeatures .roomLevelFeature .fa-check {
  margin-right: 5px;
}
#roomLevelPopup #buttonsArea {
  margin-top: 15px;
  text-align: center;
}

#mySubscriptionModal .modal-body {
  padding: 0 27px 18px;
}
#mySubscriptionModal .modal-body h4 {
  font-weight: bold;
}
#mySubscriptionModal .modal-body ul {
  font-size: 1.2rem;
}
#mySubscriptionModal .modal-body .transferMsg {
  color: blue;
}
#mySubscriptionModal .modal-body .existsSubscriptionNotification {
  color: #219820;
  text-align: center;
  margin: 0 auto;
}
#mySubscriptionModal .modal-body #subscriptionFeatures {
  padding: 0;
  margin-top: 20px;
}
#mySubscriptionModal .modal-body #subscriptionFeatures li {
  font-size: 1.2rem;
  margin-bottom: 3px;
}
#mySubscriptionModal .modal-body #subscriptionFeatures li i {
  font-weight: bold;
  margin-right: 8px;
}
#mySubscriptionModal .modal-body #subscriptions {
  margin-top: 25px;
}
#mySubscriptionModal .modal-body #subscriptions .subscription {
  font-size: 1.2rem;
}
#mySubscriptionModal .modal-body #subscriptions .subscription td {
  padding: 0 8px 14px 0;
  font-weight: bold;
}
#mySubscriptionModal .modal-body #subscriptions .subscription td.packageName {
  font-weight: normal;
}
#mySubscriptionModal .modal-body #subscriptions .subscription td.packageName b {
  font-weight: bold;
}
#mySubscriptionModal .modal-body #subscriptions .subscription td.subscriptionPrice {
  font-size: 1rem;
}
#mySubscriptionModal .modal-body #subscriptions .subscription td.subscriptionPrice .subscriptionTxt {
  font-weight: normal;
  color: #219820;
}
#mySubscriptionModal .modal-body #subscriptions .subscription button {
  border: 0 none;
  border-radius: 4px;
  font-weight: bold;
  margin-top: 2px;
  padding: 3px 9px 6px;
  margin-left: 6px;
  background-color: #55DA96;
  color: white;
  white-space: nowrap;
}
#mySubscriptionModal .modal-body #autorenew {
  text-align: center;
}
#mySubscriptionModal .modal-body #autorenew b {
  font-weight: 100;
}
#mySubscriptionModal .modal-body .loader {
  font-size: 3.5em;
  margin: 0 auto;
  display: block;
  text-align: center;
}

#mySubscriptionPurchaseModal .modal-body {
  text-align: center;
  font-weight: bold;
  font-size: 1.2rem;
}
#mySubscriptionPurchaseModal .modal-body .fa-bolt {
  margin-top: 10px;
  font-size: 30px;
}


.bGPT {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: purple;
  border-radius: 50px;
  color: white;
  padding: 3px;
  font-family: 'OleoScript';
  cursor: default;
}

.subscriptionBattery {
  line-height: 0.7;
  text-align: center;
}
.subscriptionBattery .text {
  font-size: 0.8em;
}
.subscriptionBattery .icon {
  font-size: 1.4em;
}
.subscriptionBattery .icon.fa-battery-empty {
  color: #404040;
}
.subscriptionBattery .icon.fa-battery-quarter {
  color: #FF8181;
}
.subscriptionBattery .icon.fa-battery-half {
  color: #f32196;
}
.subscriptionBattery .icon.fa-battery-three-quarters {
  color: #2196F3;
}
.subscriptionBattery .icon.fa-battery-full {
  color: #4CAF50;
}
.inRoom .subscriptionBattery .icon.fa-battery-empty {
  color: white;
}

.songsCarousel.scroller {
  height: 91px;
  position: relative;
  overflow: hidden;
}
.songsCarousel.scroller .scrollButton {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 35px;
  width: 35px;
  font-size: 20px;
  top: 19px;
  color: #0c7cd5;
  cursor: pointer;
}
.songsCarousel.scroller .scrollButton.prev {
  left: 0;
  box-shadow: 5px 0px 1px #f32196;
  text-shadow: -4px 0px 1px #f32196;
}
.songsCarousel.scroller .scrollButton.next {
  right: 0px;
  box-shadow: -5px 0px 1px #f32196;
  text-shadow: 4px 0px 1px #f32196;
}
.songsCarousel.scroller .results {
  white-space: nowrap;
  position: absolute;
  top: 0;
  left: 0;
}
.songsCarousel.scroller .results.centered {
  display: flex;
  justify-content: center;
  width: 100%;
}
.songsCarousel.scroller .results > .result {
  display: inline-block;
  margin-right: 8px;
  width: 125px;
  position: relative;
}
.songsCarousel.scroller .results > .result .song-thumb-wraper {
  height: 75px;
  overflow: hidden;
  border-radius: 20px;
}
.songsCarousel.scroller .results > .result .song-thumb-wraper img.song-thumb {
  position: relative;
  top: -12px;
  width: 130px;
}
.songsCarousel.scroller .results > .result .duration {
  position: absolute;
  right: 0;
  top: 0px;
  padding: 0 9px;
  border-radius: 0 20px 0 20px;
  line-height: 17px;
  font-size: 0.8rem;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
}
.songsCarousel.scroller .results > .result .name {
  font-size: 0.8rem;
  text-align: left;
  bottom: -19px;
  position: absolute;
  width: 100%;
  line-height: 14px;
  padding-bottom: 2px;
}
.songsCarousel.scroller .results > .result a:hover {
  text-decoration: none;
}
.songsCarousel.scroller .results .result:last-of-type {
  margin-right: 0;
}

#slidingWindow {
  position: fixed;
  top: 0;
  left: 0;
  width: 620px;
  z-index: 1000;
  animation: fadeIn 1s;
  min-height: 100vh;
  background-color: white;
}
#slidingWindow .slidingWindowHeader {
  position: relative;
  z-index: 1;
  font-size: 1.4rem;
  background-color: #e6e6e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 15px;
  color: #404040;
  direction: rtl;
}
#slidingWindow .slidingWindowHeader .btnBack {
  order: 2;
}
#slidingWindow .slidingWindowContent #feed header {
  justify-content: right;
}
#slidingWindow .slidingWindowContent #feedDrop {
  border: none;
  height: 100vh;
}
#slidingWindow .preloaderWrapper {
  width: 100%;
  justify-content: center;
  display: flex;
  font-size: 50px;
  padding: 20px 0px;
  color: #6f6f6f;
}

#debugInfo {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 80%;
  width: 30%;
  z-index: 1;
}
#debugInfo > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#debugInfo .bg {
  background-color: #000;
  opacity: 0.9;
}
#debugInfo .content {
  padding: 10px;
  overflow-y: auto;
  color: #fff;
}
#debugInfo .content .btnClose {
  position: absolute;
  top: 5px;
  right: 5px;
}
#debugInfo .content .item .title {
  font-weight: bold;
  text-decoration: underline;
}
#debugInfo .content .item .label {
  font-weight: bold;
  font-size: 1em;
  color: gray;
}
#debugInfo .content .item ul {
  list-style-type: disc;
}

#userProfile {
  padding: 18px 20px;
  height: 100vh;
  position: relative;
  background-color: #f8f8f8;
}
#userProfile .userProfileHeader {
  display: flex;
  margin-bottom: 15px;
}
#userProfile .userProfileHeader article {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}
#userProfile .userProfileHeader article .iconsHolder {
  position: absolute;
  top: 10px;
  right: 0px;
}
#userProfile .userProfileHeader article .iconsHolder > div > div {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}
#userProfile .userProfileHeader article .iconsHolder > div > div .profileAction {
  color: white;
  margin-right: 7px;
  background-color: #2196F3;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  padding-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 0.9rem;
}
#userProfile .userProfileHeader article .iconsHolder > div > div .profileAction.disabled {
  background-color: #9b9898;
  cursor: default;
}
#userProfile .userProfileHeader article .iconsHolder > div > div .profileAction.fa-envelope {
  background-color: #f32196;
}
#userProfile .userProfileHeader article .iconsHolder > div > div .profileAction.donateBeats {
  margin-right: 7px;
  cursor: pointer;
}
#userProfile .userProfileHeader article .iconsHolder > div > div .profileAction.donateBeats .donationAmount {
  font-size: 0.9rem;
}
#userProfile .userProfileHeader article .iconsHolder > div > div .profileAction.donateBeats .fa-bolt {
  margin-left: 2px;
}
#userProfile .userProfileHeader article .iconsHolder > div > div .profileAction.donateBeats.admin {
  color: red;
}
#userProfile .userProfileHeader article .iconsHolder > div > div .profileAction.donateBeats.admin .fa-bolt {
  color: red;
}
#userProfile .userProfileBody {
  display: flex;
  flex-direction: column;
  padding-bottom: 0px !important;
}
#userProfile .userProfileBody > section,
#userProfile #musicTags {
  padding: 0 10px 10px;
  border-bottom: 10px;
  background-color: #f8f8f8;
  margin-bottom: 10px;
}
#userProfile #profileFeed {
  padding-bottom: 25px;
}
#userProfile #loadingProfile {
  text-align: center;
  width: 100%;
  color: #6f6f6f;
  margin-top: 16px;
  font-size: 50px;
}
#userProfile #userModalBanning {
  position: absolute;
  top: 52px;
}
#userProfile #userModalBanning button {
  background-color: red;
  padding: 0px 8px 4px;
  border-radius: 20px;
}
#userProfile #userData h3 {
  display: flex;
  font-size: 1.1rem;
  align-items: center;
}
#userProfile #userData h3 > * .countryIcon {
  margin-right: 5px;
  position: relative;
  bottom: -1px;
}
#userProfile #userData h3 .userName {
  font-weight: 100;
  color: #f32196;
  margin-right: 10px;
  font-size: 1.4rem;
}
#userProfile #userData h3 .icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
#userProfile #userData h3 .icons i {
  font-size: 0.9rem;
  margin-top: 4px;
  color: rgba(33, 150, 243, 0.5);
}
#userProfile #userData h3 .icons .adminData {
  color: black;
}
#userProfile #userData h3 .icons .userBanned {
  color: red;
}
#userProfile #userData .prevUserName {
  position: relative;
  top: -5px;
  color: gray;
  font-size: 0.9rem;
}
#userProfile #userData #follows {
  font-size: 0.9rem;
}
#userProfile #userData #follows > span {
  margin-right: 20px;
}
#userProfile #userData #follows > span b {
  font-weight: 100;
}
#userProfile #userData #rank {
  color: #0c7cd5;
  margin-top: 6px;
  font-size: 0.9rem;
}
#userProfile #userData #rank:hover {
  text-decoration: underline;
}
#userProfile #userData #rank a {
  text-decoration: none;
}
#userProfile #userData #rank a .smallText strong {
  text-decoration: underline;
}
#userProfile #userData #rank i.fa-star {
  color: #f32196;
  margin-right: 2px;
}
#userProfile .modalRooms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  line-height: 24px;
}
#userProfile .modalRooms .modalRoom {
  display: flex;
  align-items: baseline;
}
#userProfile .modalRooms .modalRoom .roomName {
  color: #0c7cd5;
  max-width: 200px;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}
#userProfile .modalRooms .modalRoom:hover {
  text-decoration: none;
}
#userProfile .modalRooms .modalRoom:hover .roomName {
  text-decoration: underline;
}
#userProfile .modalRooms .modalRoom .fa-lock {
  margin-right: 5px;
}
#userProfile .roomName {
  max-width: 366px;
  display: flex;
  align-items: center;
}
#userProfile .roomName i {
  color: #6f6f6f;
  margin-right: 4px;
  font-size: 0.8rem;
}
#userProfile .score {
  color: gray;
  font-size: 0.9rem;
  margin-left: 5px;
}
#userProfile .userProfile_label {
  margin: 15px 0 10px;
  width: 100%;
  font-weight: bold;
  color: #6f6f6f;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
#userProfile .userProfile_label i {
  position: relative;
  top: 1px;
  margin-right: 5px;
}
#userProfile .userProfile_label a {
  text-decoration: underline;
}
#userProfile .userProfile_label strong {
  font-weight: 100;
}
#userProfile #feed header {
  display: none;
}
#userProfile #noDrops {
  width: 100%;
  text-align: center;
  color: gray;
}
#userProfile #onlinePresence #imOnline > i {
  color: #39e737;
  font-size: 0.9rem;
  position: relative;
  bottom: 1px;
}
#userProfile #onlinePresence .otherPlatform {
  margin-right: 4px;
  font-size: 1.2rem;
}
#userProfile #musicTags {
  background-color: #f8f8f8;
  padding: 8px;
  line-height: 22px;
}
#userProfile #musicTags #since {
  font-family: 'OleoScript', cursive;
  font-size: 1.2rem;
  color: #6f6f6f;
  text-align: center;
}
#userProfile #musicTags #tagsHolder {
  text-align: center;
  margin: 2px 0;
}
#userProfile #musicTags #tagsHolder .tag {
  white-space: nowrap;
  color: #f32196;
  display: inline-block;
}
#userProfile .social-link:hover {
  text-decoration: none;
}
#userProfile .user-image-holder {
  margin-right: 10px;
}
#userProfile .user-image-holder img {
  border-radius: 50%;
  height: 100px;
  width: 100px;
  border: 4px solid #f8f8f8;
}
#userProfile #featuredSongs {
  text-align: center;
  padding: 2px 6px 3px 2px;
}
#userProfile #featuredSongs p .fa-question-circle {
  bottom: 1px;
  font-size: 0.9rem;
}
#userProfile #featuredSongs p a {
  color: #0c7cd5;
  text-decoration: underline;
  cursor: pointer;
  font-weight: normal;
}
#userProfile #featuredSongs .zebraList {
  transition: opacity 1s ease-out;
  opacity: 0;
  height: 0;
  overflow: hidden;
}
#userProfile #featuredSongs .featuredSongOpened {
  opacity: 1;
  height: auto;
}
#userProfile #userSoundtracks label {
  margin-bottom: 15px;
}
#userProfile #userSoundtracks .soundtrack {
  padding: 2px 6px 3px 2px;
  display: flex;
  align-items: center;
}
#userProfile #userSoundtracks .soundtrack .roomName {
  margin-right: 3px;
}
#userProfile #userSoundtracks .soundtrack i {
  line-height: 20px;
  font-size: 0.8rem;
}
#userProfile #userSoundtracks .soundtrack img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-right: 3px;
}
#userProfile #madeMyDaySong {
  text-align: center;
}
#userProfile #madeMyDaySong a {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  white-space: pre-wrap;
  font-size: 1.1rem;
  background-color: #fff7cc;
  padding: 8px 20px;
  border-radius: 20px;
}
#userProfile #madeMyDaySong a img {
  border-radius: 20px;
  margin-right: 15px;
}
#userProfile #adminSection {
  position: absolute;
  z-index: 1000;
  left: 20px;
  top: 108px;
}
#userProfile #adminSection .userData {
  background-color: lightgrey;
  padding: 3px 20px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}
#userProfile .userNotFound {
  text-align: center;
  margin-top: 30px;
  font-size: 1.5em;
  font-weight: bold;
}
.inRoom .userProfileBody > section,
.inRoom #musicTags {
  background-color: white !important;
}

.roomTileHolder {
  text-align: left;
  position: relative;
  overflow: hidden;
  transition-property: box-shadow;
  transition-duration: 0.2s;
}
.roomTileHolder .overlay {
  transition-duration: 0.4s;
  background-color: #f32196;
  opacity: 0.4;
  border-radius: 5px;
}
.roomTileHolder:hover {
  box-shadow: 5px 1px 6px rgba(25, 25, 34, 0.26);
}
.roomTileHolder:hover .overlay {
  background-color: transparent;
}
.roomTileHolder .tooltip {
  font-size: 0.75rem;
}
.roomTileHolder .room-header {
  color: #fff;
  padding: 6px 10px;
  position: absolute;
  width: 100%;
  z-index: 1;
  top: 0px;
  display: flex;
  justify-content: space-between;
}
.roomTileHolder .room-header .add-to-favorites {
  cursor: pointer;
}
.roomTileHolder .room-header .num-of-online-users-in-room {
  font-weight: 100;
}
.roomTileHolder .holder {
  height: 100%;
  width: 250px;
}
.roomTileHolder:hover a {
  text-decoration: none;
}
.roomTileHolder:hover .room-image .tilePlay {
  animation: myanim 1s infinite;
}
@keyframes myanim {
  50% {
    padding-bottom: 30px;
  }
}
.roomTileHolder .tileFloatIcon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  text-align: center;
}
.roomTileHolder .overlay {
  background-color: #333;
  height: 100%;
  left: 0;
  opacity: 0.4;
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.roomTileHolder .room-image {
  position: relative;
  height: 140px;
  width: 250px;
}
.roomTileHolder .room-image .overlayWrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roomTileHolder .room-image .overlayWrapper .fa-lock {
  color: #fff;
  font-size: 3em;
  opacity: 0.8;
  padding-bottom: 42px;
}
.roomTileHolder .room-image .overlayWrapper .entranceFeeBtn {
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-right: 8px;
  color: white;
  line-height: 26px;
  padding-bottom: 33px;
}
.roomTileHolder .room-image .overlayWrapper .entranceFeeBtn .fa-key {
  font-size: 1.4rem;
}
.roomTileHolder .room-image .tilePlayWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roomTileHolder .room-image .tilePlayWrapper .tilePlay {
  display: flex;
  align-items: center;
  font-size: 3em;
  justify-content: center;
  padding-bottom: 42px;
  color: rgba(255, 255, 255, 0.8);
}
.roomTileHolder .room-image .tileThumbnail {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 5px;
}
.roomTileHolder .room-image .overlayWrapper i.premium,
.roomTileHolder .room-image .tilePlayWrapper i.premium {
  color: #2196F3;
}
.roomTileHolder .roomTile_defaultImg {
  height: 270px;
}
.roomTileHolder .curr-song-name {
  color: white;
  height: 25px;
  background-color: rgba(249, 44, 243, 0.9);
  padding: 2px 10px 0px;
  position: relative;
}
.roomTileHolder .curr-song-name b {
  font-weight: 100;
}
.roomTileHolder .roomTile_songName {
  display: block;
}
.roomTileHolder .roomTile_songName:hover {
  text-decoration: none;
}
.roomTileHolder .tileBottom .usersEllipsis {
  color: white;
  font-weight: bold;
  position: relative;
  top: 10px;
}
.roomTileHolder .tileBottom .room-name {
  padding: 5px 8px;
  position: absolute;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.75);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  justify-content: space-between;
}
.roomTileHolder .tileBottom .room-name > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roomTileHolder .tileBottom .room-name > div .nameAndLock {
  display: flex;
  align-items: center;
  font-weight: bold;
  max-width: 100px;
}
.roomTileHolder .tileBottom .room-name > div .nameAndLock .privateRoomLock {
  margin-right: 5px;
  font-size: 0.9rem;
}
.roomTileHolder .tileBottom .room-name .user-image {
  border-radius: 50%;
  width: 35px;
  height: 35px;
}
.roomTileHolder .tileBottom .room-name h3 {
  font-weight: normal;
  display: flex;
  justify-content: left;
  align-items: center;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roomTileHolder .tileBottom .room-name h3 a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roomTileHolder .tileBottom .room-name h3 i {
  margin-right: 5px;
}
.roomTileHolder .tileBottom .room-name h3 .name-holder {
  display: block;
  line-height: 20px;
}
.roomTileHolder .tileBottom .room-name .room-tags {
  font-size: 0.9rem;
  color: #f32196;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roomTileHolder .tileBottom .room-name .room-tags a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room-users-images {
  padding: 0 5px;
  display: flex;
  position: absolute;
  top: 61px;
  left: 3px;
}
.room-users-images .room-user-image {
  margin-right: 5px;
  margin-bottom: 5px;
}
.room-users-images .room-user-image img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin-right: -8px;
}
.room-users-images .room-user-image span {
  color: white;
  font-weight: bold;
  font-size: 1.6rem;
  vertical-align: bottom;
}

#feedDrop {
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  background-color: white;
  padding: 10px;
}
#feedDrop .feedItem {
  margin-bottom: 0;
}
#feedDrop #dropArea {
  margin: 0 0 20px;
  padding: 0;
  border: none;
  background-color: #f8f8f8;
  padding: 10px;
  border-radius: 0;
}
#feedDrop .repliesHolder {
  padding-left: 40px;
}


#feedDropPopup .modal-header {
  margin-bottom: 0;
}
#feedDropPopup .modal-body {
  padding: 0px;
}
#feedDropPopup .modal-body #dropArea {
  margin-bottom: 20px;
  border: none;
}
#feedDropPopup .btn-close {
  font-size: 1.2rem;
}

#dropArea {
  background-color: white;
  display: flex;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid #e8e8e8;
  margin-top: 5px;
}
#dropArea #dropAreaProfileImg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
#dropArea #dropInput {
  width: 471px;
  padding-left: 12px;
}
#dropArea #dropInput #dropTypeSelection {
  font-weight: bold;
  display: flex;
  flex-wrap: wrap;
}
#dropArea #dropInput #dropTypeSelection label {
  font-size: inherit;
  margin-right: 5px;
}
#dropArea #dropInput #dropContent {
  cursor: text;
  font-size: 1.1rem;
  min-height: 48px;
  padding-top: 12px;
  border-bottom: #eaeaea 1px solid;
  margin-bottom: 12px;
}
#dropArea #dropInput #dropContent:empty::before {
  content: attr(data-placeholder);
  color: gray;
}
#dropArea #dropInput footer {
  color: #2196F3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#dropArea #dropInput footer button {
  font-size: 1.2rem;
  border-radius: 50px;
  padding: 5px 15px 8px;
}
#dropArea #dropInput footer button.disabledBtn {
  opacity: 0.5;
  cursor: default;
}
#dropArea #dropInput footer #enrichments {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
}
#dropArea #dropInput footer #enrichments a {
  margin-right: 20px;
  line-height: 12px;
  color: black;
}
#dropArea #dropInput footer #enrichments a:hover {
  text-decoration: none;
}
#dropArea #dropInput footer #enrichments a.disabled {
  color: lightgrey;
}
#dropArea #dropInput footer #enrichments #dropImg {
  font-size: 1.6rem;
  position: relative;
  top: 1px;
}
#dropArea #dropInput footer #enrichments #dropGif {
  font-size: 0.8rem;
  font-weight: bold;
  padding: 2px 2px 3px;
  border: 2px solid black;
  line-height: 10px;
}
#dropArea #dropPollBuilder {
  width: 100%;
  position: relative;
}
#dropArea #dropPollBuilder #dropPollBtnRemove {
  position: absolute;
  right: 0px;
  z-index: 11;
}
#dropArea #dropAttachment {
  width: 100%;
  position: relative;
  margin-bottom: 20px;
}
#dropArea #dropAttachment #attachmentBlocker {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}
#dropArea #dropAttachment #dropAttachmentBtnRemove {
  position: absolute;
  right: 0px;
  z-index: 11;
}
#dropArea #dropAttachment #dropAttachmentContent {
  text-align: center;
}
#dropArea #dropAttachment #dropAttachmentContent .feedDropItemImage img {
  max-width: 350px;
  max-height: 500px;
}

.feedDropItemGif img {
  border-radius: 20px;
}

.feedDropItemRoom {
  margin: 0 auto;
}

.feedDropItemSong {
  align-items: center;
  justify-content: left;
}
.feedDropItemSong > a {
  display: flex;
  align-items: center;
}
.feedDropItemSong > a:hover {
  text-decoration: none;
}
.feedDropItemSong .imageHolder {
  position: relative;
}
.feedDropItemSong .imageHolder > img {
  border-radius: 20px;
  margin-right: 15px;
}
.feedDropItemSong .imageHolder > i {
  position: absolute;
  color: rgba(255, 255, 255, 0.9);
  font-size: 3em;
  left: 46px;
  top: 23px;
}
.feedDropItemSong .songName {
  font-size: 1.1rem;
}
.feedDropItemSong .footer {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  justify-content: space-between;
  font-size: 0.8rem;
}
.feedDropItemSong .footer .playedInRoom {
  color: #f32196;
}
.feedDropItemSong .footer .playedInRoom a {
  text-decoration: underline;
  margin-left: 3px;
  font-weight: bold;
}
.feedDropItemSong .footer .playedInRoom a:hover {
  font-weight: 100;
}
.feedDropItemSong .footer .hashtags .hashtag {
  margin-left: 10px;
}

.feedDropItemGif img {
  border-radius: 20px;
}

.pollBuilder {
  text-align: left;
}
.pollBuilder .pollOption {
  display: flex;
  margin-bottom: 3px;
  align-items: center;
}
.pollBuilder .pollOption label {
  margin-right: 12px;
  display: flex;
  width: 61px;
  white-space: nowrap;
  font-weight: bold;
  font-size: 1.1rem !important;
}
.pollBuilder .pollOption input {
  width: 220px;
  border: 1px solid #979797;
}
.pollBuilder .pollOption .fa-trash-alt {
  color: #979797;
  font-size: 0.9rem;
  margin-left: 5px;
  position: relative;
  top: 1px;
  cursor: pointer;
}
.pollBuilder .link {
  margin: 8px 0;
}
.pollBuilder .link a {
  color: #0c7cd5;
  font-size: 0.9rem;
}

#feed > header {
  text-align: right;
  color: #6f6f6f;
  position: relative;
  padding: 7px 9px 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#feed > header .leftEnd {
  font-size: 0.9rem;
}
#feed > header .rightEnd {
  display: flex;
  align-items: center;
}
#feed > header:hover .reloadNewest {
  text-decoration: none;
}
#feed > header .reloadNewest {
  margin-right: 10px;
}
#feed > header .selectedHashtags {
  display: flex;
  justify-content: flex-end;
}
#feed > header .selectedHashtags .selectedHashtag {
  border-radius: 50px;
  padding: 3px 8px 4px;
  margin-right: 12px;
  background-color: #f32196;
  color: white;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  font-size: 0.9rem;
}
#feed > header .selectedHashtags .selectedHashtag i {
  margin-right: 3px;
  position: relative;
  top: 1px;
}
#feed > header #dropsFilterMenu {
  position: absolute;
  top: 22px;
  right: 0px;
  z-index: 1;
  text-align: left;
  background-color: #f8f8f8;
  padding: 10px 12px 5px;
}
#feed > header #dropsFilterMenu > div {
  margin-bottom: 5px;
}
#feed > header #dropsFilterMenu > div input {
  margin-right: 5px;
}
#feed > header .featuredDrop {
  float: left;
  color: #0c7cd5;
  margin-right: 30px;
}
#feed > header .featuredDrop i {
  margin-right: 2px;
}
#feed #drops {
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  background-color: white;
  padding: 10px;
}
#feed #drops .emptyList {
  text-align: center;
  font-weight: bold;
}

.feedItem {
  display: flex;
  padding: 13px 6px 13px 0;
  position: relative;
  border-bottom: 1px solid #eaeaea;
}
.feedItem .dropperImg {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 12px;
}
.feedItem .feedContent {
  width: 100%;
}
.feedItem .feedContent header .dropperName {
  font-weight: bold;
  font-size: 1.2rem;
}
.feedItem .feedContent header .separator {
  margin: 0 5px;
}
.feedItem .feedContent header .addedAt {
  color: #6f6f6f;
  font-size: 0.9rem;
}
.feedItem .feedContent header .actionButtons > a {
  float: right;
  color: lightgray;
  margin-left: 10px;
}
.feedItem .feedContent header .actionButtons > a:hover {
  color: #6f6f6f;
}
.feedItem .feedContent header .redroppedLabel {
  color: #f32196;
  font-size: 0.9rem;
}
.feedItem .feedContent .dropContent {
  margin-top: 10px;
  display: inline-block;
}
.feedItem .feedContent .dropContent a {
  color: #0c7cd5;
}
.feedItem .feedContent .attachment {
  margin-top: 14px;
  justify-content: left;
  display: flex;
}
.feedItem .feedContent .attachment img {
  border-radius: 20px;
}
.feedItem .feedContent .attachment .feedDropItemImage img {
  max-width: 350px;
  max-height: 350px;
}
.feedItem .feedContent .originalFeedDrop {
  padding: 10px;
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  margin-top: 12px;
  display: flex;
}
.feedItem .feedContent footer {
  margin-top: 15px;
}
.feedItem .feedContent footer .dropAction {
  text-decoration: none;
  cursor: pointer;
}
.feedItem .feedContent footer .dropAction i {
  color: black;
  margin-right: 20px;
  font-size: 1.2rem;
}
.feedItem .feedContent footer .dropAction.disabled {
  color: lightgrey;
}
.feedItem .feedContent footer .dropAction.disabled i {
  color: lightgrey;
}
.feedItem .feedContent footer .dropAction:hover i {
  transition-duration: 0.3s;
  transition-property: text-shadow;
  text-shadow: 2px 1px 0px #f32196;
}
.feedItem .feedContent footer .dropAction .amount {
  margin-right: 6px;
  font-size: 0.9rem;
}
.feedItem .blocker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.pollViewer .pollQuestion {
  margin-bottom: 10px;
}
.pollViewer .pollOption {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
  margin-bottom: 2px;
  width: 300px;
  white-space: nowrap;
  line-height: 23px;
}
.pollViewer .pollOption label {
  margin-bottom: 0px;
}
.pollViewer .pollOption .ratioBar {
  position: absolute;
  height: 100%;
  background-color: #e6e6e6;
  border-radius: 4px;
  z-index: 0;
}
.pollViewer .pollOption .ratioBar.selected {
  background-color: #dfdfdf;
}
.pollViewer .pollOption .optionTxt {
  position: relative;
  z-index: 1;
  margin-left: 2px;
}
.pollViewer .pollOption .ratio {
  font-weight: 100;
  margin: 0 3px 0 5px;
}
.pollViewer .pollOption > label {
  width: 100%;
}

#feedReDropPopup {
  width: 550px;
}
#feedReDropPopup .modal-body {
  padding: 0;
}
#feedReDropPopup .modal-body .modal-header {
  margin-bottom: 0;
}
#feedReDropPopup .modal-body .modal-header .btn-close {
  font-size: 1.2rem;
  margin: 10px 0;
}
#feedReDropPopup .modal-body #dropArea {
  border: none;
}
#feedReDropPopup .modal-body .feedItem {
  padding: 20px;
  border: none;
}

#feedReDropPopup {
  width: 550px;
}
#feedReDropPopup .btn-close {
  font-size: 1.2rem;
  margin: 10px 0;
}


.wikiOpener {
  position: relative;
  text-decoration: none !important;
}
.wikiOpener .fa-lightbulb {
  margin-right: 2px;
}
.wikiOpener .fa-lightbulb.cool {
  color: #eccc1b;
}
.wikiOpener .fire-gif {
  width: 35px;
  position: absolute;
  bottom: 15px;
  right: -5px;
  z-index: 100;
}
.wikiOpener .cool-data-gif {
  font-size: 22px;
  top: -1px;
  position: absolute;
  right: 0;
  color: #2196F3;
}

#roomAccessRequestPopup {
  text-align: center;
}
#roomAccessRequestPopup .modal-body {
  font-size: 1.2rem;
}
#roomAccessRequestPopup .modal-body section {
  margin-bottom: 15px;
}
#roomAccessRequestPopup .modal-body section a {
  color: #0c7cd5;
}
#roomAccessRequestPopup .modal-body #notEnoughBeats {
  font-size: 0.9rem;
  color: #f53c56;
  margin-top: 10px;
}
#roomAccessRequestPopup .modal-body #notEnoughBeats a {
  color: #404040;
  text-decoration: underline;
}

#myPrivilegedFeatureModal .modal-body {
  font-size: 1.1rem;
}
#myPrivilegedFeatureModal .modal-body h2 {
  font-weight: bold;
}
#myPrivilegedFeatureModal .modal-body .transferMsg {
  color: blue;
}
#myPrivilegedFeatureModal .buttonsHolder {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  margin: 22px 0 10px;
}
#myPrivilegedFeatureModal .buttonsHolder > div {
  font-size: 0.9rem;
}
#myPrivilegedFeatureModal .buttonsHolder > button {
  margin: 0 10px;
}
#myPrivilegedFeatureModal .buttonsHolder > button .fa-mug-hot {
  margin-left: 3px;
  position: relative;
  bottom: 1px;
}
#myPrivilegedFeatureModal .buttonsHolder > button.glow-on-hover {
  background-color: #53bd87;
}

#paymentPopup .modal-body {
  position: relative;
}
#paymentPopup .modal-body .customButton button {
  width: 100%;
  color: #404040;
  background-repeat: no-repeat;
  background-position: left;
  background-size: 70px auto;
  background-color: white;
  font-weight: normal;
  font-size: 1.2rem;
  position: relative;
  padding: 22px 0;
  border-radius: 0;
}
#paymentPopup .modal-body .customButton button:hover {
  background-color: rgba(238, 238, 238, 0.8);
}
#paymentPopup .modal-body .customButton button .chevronHolder {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
#paymentPopup .modal-body #googlePay {
  width: 292px;
  height: 48px;
  margin: 10px 0;
}
#paymentPopup .modal-body #paypalButton {
  border-top: 1px solid lightgrey;
}
#paymentPopup .modal-body #paypalButton button {
  background-image: url(https://cdn.beatsense.com/static/assets/48e007fa057ea0032890449ffb160cd5.svg);
}
#paymentPopup .modal-body #paymentRedirect {
  position: absolute;
  width: 100%;
  height: 150px;
  border-radius: 9px;
  left: 0;
  top: 0;
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background-color: #f32196;
}
#paymentPopup .modal-body #paymentRedirect i {
  margin-right: 5px;
}
#paymentPopup .modal-body #mobileAppError {
  padding: 0 15px 20px;
}
#paymentPopup .modal-body #mobileAppError a {
  text-decoration: underline;
  color: blue;
}

.songOpinion span {
  white-space: break-spaces;
}
.songOpinion .doNotPlay {
  color: red;
}
.songOpinion .neutral {
  color: blue;
}
.songOpinion .meh {
  color: #FF8181;
}
.songOpinion .nothingExiting {
  color: blue;
}
.songOpinion .safeBet {
  color: purple;
}
.songOpinion .pettyGood {
  color: #53bd87;
}
.songOpinion .fuckingAwesome {
  color: #219820;
}

.copyPasteInput {
  position: relative;
}
.copyPasteInput > input {
  width: 100%;
  padding-right: 20px;
}
.copyPasteInput .copy {
  position: absolute;
  top: 4px;
  right: 5px;
}

.shareButton {
  display: inline-flex;
  flex-direction: row-reverse;
}
.shareButton .list {
  display: inline-flex;
  flex-direction: row-reverse;
}
.shareButton .list .option {
  margin-left: 5px;
}

.closeButton {
  display: inline-flex;
}


.shareTargets .shareURL {
  text-align: center;
}
.shareTargets .shareURL p {
  font-weight: bold;
}
.shareTargets .shareURL input {
  width: 100%;
  color: black;
}
.shareTargets .buttons {
  --button-size: 36px;
  --icon-size: 20px;
  --padding-ver: calc(0.3 * var(--icon-size));
  --padding-hor: calc(var(--icon-size) / 2);
  --padding-icon: calc((var(--button-size) - var(--icon-size)) / 2);
  --height: calc(var(--button-size) - 2 * var(--padding-ver));
  --width: calc(var(--button-size) - 2 * var(--padding-hor));
}
.shareTargets .buttons > * {
  display: inline-block;
  position: relative;
  height: var(--height);
  min-width: var(--width);
  margin: calc(var(--padding-ver) / 2);
  padding: var(--padding-ver) var(--padding-hor);
  background-color: #ccc;
  border-radius: calc(var(--icon-size) / 6);
  border: none;
  box-sizing: content-box;
  color: white;
  line-height: 1.5;
  transition: opacity 300ms ease;
  vertical-align: middle;
}
.shareTargets .buttons > *:hover {
  border: none;
  cursor: pointer;
  opacity: 0.7;
}
.shareTargets .buttons > *:not(:empty) {
  font-size: calc(0.8 * var(--icon-size));
  text-decoration: none;
}
.shareTargets .buttons > *:not(:empty)::before {
  position: relative;
  height: 100%;
  width: calc(var(--icon-size) + var(--padding-icon));
  top: 0;
  left: 0;
  background-position: 0 50%;
}
.shareTargets .buttons > *.svgable {
  font-size: 0 !important;
}
.shareTargets .buttons > *.svgable::before {
  display: inline-block;
  position: absolute;
  height: var(--icon-size);
  width: var(--icon-size);
  top: var(--padding-icon);
  left: var(--padding-icon);
  background-repeat: no-repeat;
  background-size: var(--icon-size) var(--icon-size);
  content: "";
  vertical-align: bottom;
}
.shareTargets .buttons > *.iconable {
  background-color: gray;
  text-decoration: none;
  padding: 5px 10px 7px 12px;
  font-size: 1.2em;
}
.shareTargets .buttons > *.facebook {
  background-color: #4A66A0;
}
.shareTargets .buttons > *.facebook:before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}
.shareTargets .buttons > *.linkedin {
  background-color: #0a66c2;
}
.shareTargets .buttons > *.linkedin:before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.722 23.72h-4.91v-7.692c0-1.834-.038-4.194-2.559-4.194-2.56 0-2.95 1.995-2.95 4.06v7.827H8.394V7.902h4.716v2.157h.063c.659-1.244 2.261-2.556 4.655-2.556 4.974 0 5.894 3.274 5.894 7.535v8.683ZM.388 7.902h4.923v15.819H.388zM2.85 5.738A2.849 2.849 0 0 1 0 2.886a2.851 2.851 0 1 1 2.85 2.852Z'/%3E%3C/svg%3E");
}
.shareTargets .buttons > *.linkedin:not(:empty):before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
}
.shareTargets .buttons > *.mastodon {
  background-color: #3088d4;
}
.shareTargets .buttons > *.mastodon:before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z'/%3E%3C/svg%3E");
}
.shareTargets .buttons > *.messenger {
  background-color: #00b2ff;
}
.shareTargets .buttons > *.messenger:before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.001 11.639C.001 4.949 5.241 0 12.001 0S24 4.95 24 11.639c0 6.689-5.24 11.638-12 11.638-1.21 0-2.38-.16-3.47-.46a.96.96 0 0 0-.64.05l-2.39 1.05a.96.96 0 0 1-1.35-.85l-.07-2.14a.97.97 0 0 0-.32-.68A11.39 11.389 0 0 1 .002 11.64zm8.32-2.19-3.52 5.6c-.35.53.32 1.139.82.75l3.79-2.87c.26-.2.6-.2.87 0l2.8 2.1c.84.63 2.04.4 2.6-.48l3.52-5.6c.35-.53-.32-1.13-.82-.75l-3.79 2.87c-.25.2-.6.2-.86 0l-2.8-2.1a1.8 1.8 0 0 0-2.61.48z'/%3E%3C/svg%3E");
}
.shareTargets .buttons > *.odnoklassniki {
  background-color: #ee8208;
}
.shareTargets .buttons > *.odnoklassniki:before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0a6.2 6.2 0 0 0-6.194 6.195 6.2 6.2 0 0 0 6.195 6.192 6.2 6.2 0 0 0 6.193-6.192A6.2 6.2 0 0 0 12.001 0zm0 3.63a2.567 2.567 0 0 1 2.565 2.565 2.568 2.568 0 0 1-2.564 2.564 2.568 2.568 0 0 1-2.565-2.564 2.567 2.567 0 0 1 2.565-2.564zM6.807 12.6a1.814 1.814 0 0 0-.91 3.35 11.611 11.611 0 0 0 3.597 1.49l-3.462 3.463a1.815 1.815 0 0 0 2.567 2.566L12 20.066l3.405 3.403a1.813 1.813 0 0 0 2.564 0c.71-.709.71-1.858 0-2.566l-3.462-3.462a11.593 11.593 0 0 0 3.596-1.49 1.814 1.814 0 1 0-1.932-3.073 7.867 7.867 0 0 1-8.34 0c-.318-.2-.674-.29-1.024-.278z'/%3E%3C/svg%3E");
}
.shareTargets .buttons > *.pinterest {
  background-color: #bd081c;
}
.shareTargets .buttons > *.pinterest:before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z'/%3E%3C/svg%3E");
}
.shareTargets .buttons > *.pocket {
  background-color: #ef3f56;
}
.shareTargets .buttons > *.pocket:before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m18.813 10.259-5.646 5.419a1.649 1.649 0 0 1-2.282 0l-5.646-5.419a1.645 1.645 0 0 1 2.276-2.376l4.511 4.322 4.517-4.322a1.643 1.643 0 0 1 2.326.049 1.64 1.64 0 0 1-.045 2.326l-.011.001zm5.083-7.546a2.163 2.163 0 0 0-2.041-1.436H2.179c-.9 0-1.717.564-2.037 1.405-.094.25-.142.511-.142.774v7.245l.084 1.441c.348 3.277 2.047 6.142 4.682 8.139.045.036.094.07.143.105l.03.023a11.899 11.899 0 0 0 4.694 2.072c.786.158 1.591.24 2.389.24.739 0 1.481-.067 2.209-.204.088-.029.176-.045.264-.06.023 0 .049-.015.074-.029a12.002 12.002 0 0 0 4.508-2.025l.029-.031.135-.105c2.627-1.995 4.324-4.862 4.686-8.148L24 10.678V3.445c0-.251-.031-.5-.121-.742l.017.01z'/%3E%3C/svg%3E");
}
.shareTargets .buttons > *.reddit {
  background-color: #ff4500;
}
.shareTargets .buttons > *.reddit:before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.512 1.173a1.88 1.88 0 0 1 1.877 1.874 1.884 1.884 0 0 1-1.877 1.857c-.99 0-1.817-.783-1.873-1.773l-3.897-.82-1.201 5.623c2.737.105 5.223.949 7.015 2.234a2.525 2.525 0 0 1 1.812-.737A2.634 2.634 0 0 1 24 12.063c0 1.075-.653 2-1.516 2.423.044.258.065.519.063.78 0 4.043-4.698 7.31-10.512 7.31s-10.512-3.267-10.512-7.31c0-.275.022-.55.064-.801a2.627 2.627 0 0 1-1.559-2.402 2.634 2.634 0 0 1 2.633-2.632c.694 0 1.347.294 1.811.735 1.812-1.325 4.32-2.146 7.12-2.232l1.329-6.276a.513.513 0 0 1 .21-.296.521.521 0 0 1 .357-.063l4.361.926c.3-.644.952-1.057 1.663-1.052ZM7.917 18.052c-.13 0-.254.05-.347.14a.497.497 0 0 0 0 .696c1.264 1.263 3.728 1.37 4.444 1.37.716 0 3.16-.084 4.444-1.37a.545.545 0 0 0 .044-.695.498.498 0 0 0-.697 0c-.82.8-2.527 1.095-3.77 1.095-1.243 0-2.97-.294-3.77-1.095a.49.49 0 0 0-.348-.143v.002Zm-.051-5.989A1.88 1.88 0 0 0 5.99 13.94c0 1.031.842 1.873 1.876 1.873a1.878 1.878 0 0 0 1.873-1.874 1.878 1.878 0 0 0-1.873-1.875Zm8.254 0a1.878 1.878 0 0 0-1.873 1.876c0 1.031.842 1.873 1.875 1.873a1.878 1.878 0 0 0 1.875-1.874 1.88 1.88 0 0 0-1.877-1.875Z'/%3E%3C/svg%3E");
}
.shareTargets .buttons > *.telegram {
  background-color: #26a5e4;
}
.shareTargets .buttons > *.telegram:before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.888 3.551c.168-.003.54.039.781.235.162.14.264.335.288.547.026.156.06.514.033.793-.302 3.189-1.616 10.924-2.285 14.495-.282 1.512-.838 2.017-1.378 2.066-1.17.11-2.058-.773-3.192-1.515-1.774-1.165-2.777-1.889-4.5-3.025-1.99-1.31-.7-2.033.434-3.209.297-.309 5.455-5.002 5.556-5.427.012-.054.024-.252-.094-.356-.117-.104-.292-.069-.418-.04-.178.04-3.013 1.915-8.504 5.62-.806.554-1.534.823-2.187.806-.72-.013-2.104-.405-3.134-.739C1.025 13.39.022 13.174.11 12.476c.045-.363.546-.734 1.5-1.114 5.878-2.56 9.796-4.249 11.758-5.064 5.599-2.328 6.763-2.733 7.521-2.747Z'/%3E%3C/svg%3E");
}
.shareTargets .buttons > *.twitter {
  background-color: #1da1f2;
}
.shareTargets .buttons > *.twitter:before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.953 4.57a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.06a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.936 4.936 0 0 0 4.604 3.417 9.867 9.867 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0 0 24 4.59z'/%3E%3C/svg%3E");
}
.shareTargets .buttons > *.viber {
  background-color: #7360f2;
}
.shareTargets .buttons > *.viber:before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.4 0C9.473.028 5.333.344 3.02 2.467 1.302 4.187.696 6.7.633 9.817.57 12.933.488 18.776 6.12 20.36h.003l-.004 2.416s-.037.977.61 1.177c.777.242 1.234-.5 1.98-1.302.407-.44.972-1.084 1.397-1.58 3.85.326 6.812-.416 7.15-.525.776-.252 5.176-.816 5.892-6.657.74-6.02-.36-9.83-2.34-11.546-.596-.55-3.006-2.3-8.375-2.323 0 0-.395-.025-1.037-.017zm.058 1.693c.545-.004.88.017.88.017 4.542.02 6.717 1.388 7.222 1.846 1.675 1.435 2.53 4.868 1.906 9.897v.002c-.604 4.878-4.174 5.184-4.832 5.395-.28.09-2.882.737-6.153.524 0 0-2.436 2.94-3.197 3.704-.12.12-.26.167-.352.144-.13-.033-.166-.188-.165-.414l.02-4.018c-4.762-1.32-4.485-6.292-4.43-8.895.054-2.604.543-4.738 1.996-6.173 1.96-1.773 5.474-2.018 7.11-2.03zm.38 2.602a.304.304 0 0 0-.004.607c1.624.01 2.946.537 4.028 1.592 1.073 1.046 1.62 2.468 1.633 4.334.002.167.14.3.307.3a.304.304 0 0 0 .3-.304c-.014-1.984-.618-3.596-1.816-4.764-1.19-1.16-2.692-1.753-4.447-1.765zm-3.96.695a.981.981 0 0 0-.616.117l-.01.002c-.43.247-.816.562-1.146.932-.002.004-.006.004-.008.008-.267.323-.42.638-.46.948a.596.596 0 0 0-.007.14c0 .136.022.27.065.4l.013.01c.135.48.473 1.276 1.205 2.604.42.768.903 1.5 1.446 2.186.27.344.56.673.87.984l.132.132c.31.308.64.6.984.87a15.524 15.524 0 0 0 2.186 1.447c1.328.733 2.126 1.07 2.604 1.206l.01.014a1.275 1.275 0 0 0 .54.055c.31-.036.627-.19.948-.46.004 0 .003-.002.008-.005.37-.33.683-.72.93-1.148l.003-.01c.225-.432.15-.842-.18-1.12-.004 0-.698-.58-1.037-.83-.36-.255-.73-.492-1.113-.71-.51-.285-1.032-.106-1.248.174l-.447.564c-.23.283-.657.246-.657.246-3.12-.796-3.955-3.955-3.955-3.955s-.037-.426.248-.656l.563-.448c.277-.215.456-.737.17-1.248a12.73 12.73 0 0 0-.71-1.115 28.35 28.35 0 0 0-.83-1.035.822.822 0 0 0-.502-.297zm4.49.88a.303.303 0 0 0-.018.606c1.16.085 2.017.466 2.645 1.15.63.688.93 1.524.906 2.57a.306.306 0 0 0 .61.013c.025-1.175-.334-2.193-1.067-2.994-.74-.81-1.777-1.253-3.05-1.346h-.024zm.463 1.63a.305.305 0 0 0-.3.287c-.008.167.12.31.288.32.523.028.875.175 1.113.422.24.245.388.62.416 1.164a.304.304 0 0 0 .605-.03c-.03-.644-.215-1.178-.58-1.557-.367-.378-.893-.574-1.52-.607h-.018z'/%3E%3C/svg%3E");
}
.shareTargets .buttons > *.vkontakte {
  background-color: #0077ff;
}
.shareTargets .buttons > *.vkontakte:before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.199 4.841H.11c.194 9.312 4.85 14.907 13.012 14.907h.462v-5.327c3 .299 5.268 2.492 6.178 5.327H24c-1.164-4.237-4.223-6.58-6.133-7.475 1.91-1.105 4.596-3.79 5.238-7.432h-3.85c-.836 2.955-3.313 5.641-5.67 5.895V4.84h-3.85v10.326C7.347 14.57 4.333 11.675 4.199 4.84Z'/%3E%3C/svg%3E");
}
.shareTargets .buttons > *.whatsapp {
  background-color: #25d366;
}
.shareTargets .buttons > *.whatsapp:before {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z'/%3E%3C/svg%3E");
}
.shareTargets .buttons > *.line {
  background-image: url(https://cdn.beatsense.com/static/assets/4c233962da00fee5f0f6ae89a3e1876d.png);
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: auto 100%;
  background-color: #02C755;
}
.shareTargets .buttons > *.beatsense {
  background-image: url(https://cdn.beatsense.com/static/assets/079b2d9fcdf9dbe15b81493fe7a03d4b.png);
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: auto 100%;
  background-color: #f32196;
}
.shareTargets .buttons > *.email {
  background-color: #C5221F;
}
.shareTargets .buttons > *.link {
  background-color: #2196F3;
}
.shareTargets .buttons > *.moreOptions {
  background-color: #0c7cd5;
  float: right;
}

#approveTosPopup {
  text-align: center;
}
#approveTosPopup a {
  color: #0c7cd5;
  text-decoration: underline;
}

#userReportPopup .modal-body {
  text-align: right;
}
#userReportPopup .modal-body textarea {
  width: 100%;
  height: 100px;
}
#userReportPopup .modal-body button {
  margin-top: 10px;
}

.header {
  letter-spacing: 0;
  left: 0;
  background-color: white;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 1000;
  height: 40px;
  padding: 22px 0px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.header article {
  width: 1150px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  position: relative;
}
.header .title-holder {
  float: left;
}
.header h1.page-title {
  margin-top: 0;
}
.header #header_rightContainer,
.header #header_leftContainer {
  display: flex;
  align-items: center;
  height: 100%;
  position: absolute;
}
.header #header_leftContainer {
  left: 0px;
}
.header #header_leftContainer #mainLogo {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding-bottom: 2px;
}
.header #header_leftContainer #mainLogo .logoLink:hover {
  text-decoration: none;
}
.header #header_leftContainer #mainLogo .logoLink #txtLogo {
  position: relative;
  top: 1px;
  font-size: 26px;
  font-weight: bold;
  display: inline;
}
.header #header_leftContainer #mainLogo .logoLink #logo {
  cursor: pointer;
  width: 100px;
  bottom: 1px;
  position: relative;
}
.header #header_leftContainer #mainLogo .logoLink span {
  margin-left: 5px;
  font-size: 1.2rem;
  text-shadow: 1px 1px 2px #f32196;
}
.header #header_leftContainer #plugdj {
  background-color: white;
  color: #f32196;
  margin-left: 20px;
  height: 12px;
  padding: 0 8px 19px;
  position: relative;
  font-weight: bold;
  font-size: 0.9rem;
  box-shadow: 2px 2px #f32196;
  border-radius: 20px;
}
.header #header_leftContainer #plugdj:hover {
  text-decoration: none;
}
.header #header_centerContainer #room-details {
  display: flex;
}
.header #header_centerContainer #room-details #roomActions {
  display: flex;
  align-items: center;
}
.header #header_centerContainer #room-details #roomActions i {
  cursor: pointer;
  margin-right: 10px;
  position: relative;
  top: 1px;
}
.header #header_centerContainer #room-details #roomActions i#introJStrigger {
  color: #97daf7;
}
.header #header_centerContainer #room-details #roomActions #christmasModeButton i.off {
  color: #bbbaba;
}
.header #header_centerContainer #room-details .name {
  font-size: 1.2rem;
}
.header #header_centerContainer #room-details .fa-lock {
  margin-right: 6px;
  color: rgba(255, 255, 255, 0.5);
}
.header #header_centerContainer #headerPauseBtn {
  position: relative;
  font-size: 0.6em !important;
  border: 1px solid white;
  border-radius: 2px;
  padding: 2px 2px;
}
.header #header_rightContainer {
  padding-bottom: 1px;
  right: 0px;
}
.header #header_rightContainer #beats {
  position: relative;
}
.header #header_rightContainer #beats a {
  text-decoration: none;
}
.header #header_rightContainer #beats a img {
  height: 16px;
  bottom: 1px;
  position: relative;
}
.header #header_rightContainer #beats a .beatsAmount {
  position: relative;
  left: 3px;
  margin-left: 2px;
}
.header #header_rightContainer .login-holder {
  text-align: right;
  display: flex;
  justify-content: space-between;
  width: 80px;
  position: relative;
  bottom: 1px;
  font-weight: bold;
}
.header #header_rightContainer .user-details {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.header #header_rightContainer .user-details .user-image img {
  width: 25px;
  height: 25px;
  top: 1px;
  position: relative;
}
.header #header_rightContainer .user-details > * {
  margin-left: 17px;
}
.header #header_rightContainer .user-details .noMarginItem {
  margin-left: 0;
}
.header .musicMatchOpener {
  border-radius: 50%;
}
.header .musicMatchOpener img {
  cursor: pointer;
}
.header .musicMatchOpener.newMatches {
  box-shadow: -5px 0px 5px #f32196;
}
.header #impersonatedNotification {
  position: absolute;
  top: 51px;
  left: 0;
  width: 200px;
  height: 50px;
  background-color: red;
  color: white;
  text-align: center;
  z-index: 1000;
}
.header #impersonatedNotification .title {
  font-size: 16px;
  font-weight: bold;
}
.header #impersonatedNotification .logout {
  margin-top: 2px;
}
.inRoom {
  font-weight: normal;
}
.inRoom .header {
  font-weight: normal;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  padding: 22px 10px;
}
.inRoom .header article {
  width: 100%;
}
.inRoom .header #header_leftContainer #mainLogo .logoLink #txtLogo {
  font-weight: normal;
}
.inRoom .header #header_leftContainer #mainLogo #topMenu .opener {
  color: white;
}

#moodsOpener .curr-mood {
  display: flex;
  align-items: baseline;
}
#moodsOpener .curr-mood div {
  display: inline-block;
  text-decoration: underline;
  border-radius: 4px;
  height: 21px;
  top: 1px;
  position: relative;
  margin: 2px 3px;
}
#moodsOpener .curr-mood div span {
  position: relative;
  bottom: 1px;
}
#moodsOpener .curr-mood div:hover {
  transition-duration: 0.3s;
  background-color: rgba(255, 255, 255, 0.1);
}
.mood {
  color: #f5f59b;
}
.mood.bouncy,
.mood.in_love,
.mood.energized,
.mood.loved,
.mood.jolly,
.mood.awesome,
.mood.metal {
  color: #7cea7b;
}
.mood.amused,
.mood.crazy,
.mood.high,
.mood.happy,
.mood.rejuvenated,
.mood.pleased,
.mood.naughty,
.mood.nostalgic {
  color: #b8fff3;
}
.mood.angry,
.mood.confused,
.mood.discontent,
.mood.sick,
.mood.stressed,
.mood.tired,
.mood.bluesy,
.mood.dark,
.mood.scared {
  color: #bed6fc;
}
.mood.exhausted,
.mood.lonely,
.mood.melancholy,
.mood.very_angry {
  color: #ffd4d4;
}

#moodsPopup .modal-body {
  color: #404040;
  z-index: 1;
  padding: 0px 15px 15px;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.2rem;
}
#moodsPopup .modal-body .moodsGroup {
  display: flex;
  flex-wrap: wrap;
  line-height: 25px;
  color: white;
  border-bottom: 1px dotted lightgray;
  padding: 13px 0;
}
#moodsPopup .modal-body .moodsGroup .mood {
  margin: 4px 10px;
  display: inline-block;
  color: white;
  font-size: 1rem;
  padding: 0 10px;
  border-radius: 20px;
  background-color: #b7b73d;
}
#moodsPopup .modal-body .moodsGroup .mood:hover {
  text-decoration: underline;
}
#moodsPopup .modal-body .moodsGroup .mood.bouncy,
#moodsPopup .modal-body .moodsGroup .mood.in_love,
#moodsPopup .modal-body .moodsGroup .mood.energized,
#moodsPopup .modal-body .moodsGroup .mood.loved,
#moodsPopup .modal-body .moodsGroup .mood.jolly,
#moodsPopup .modal-body .moodsGroup .mood.awesome,
#moodsPopup .modal-body .moodsGroup .mood.metal {
  background-color: #5ecc5d;
}
#moodsPopup .modal-body .moodsGroup .mood.amused,
#moodsPopup .modal-body .moodsGroup .mood.crazy,
#moodsPopup .modal-body .moodsGroup .mood.high,
#moodsPopup .modal-body .moodsGroup .mood.happy,
#moodsPopup .modal-body .moodsGroup .mood.rejuvenated,
#moodsPopup .modal-body .moodsGroup .mood.pleased,
#moodsPopup .modal-body .moodsGroup .mood.naughty,
#moodsPopup .modal-body .moodsGroup .mood.nostalgic {
  background-color: #48d9c2;
}
#moodsPopup .modal-body .moodsGroup .mood.angry,
#moodsPopup .modal-body .moodsGroup .mood.confused,
#moodsPopup .modal-body .moodsGroup .mood.discontent,
#moodsPopup .modal-body .moodsGroup .mood.sick,
#moodsPopup .modal-body .moodsGroup .mood.stressed,
#moodsPopup .modal-body .moodsGroup .mood.tired,
#moodsPopup .modal-body .moodsGroup .mood.bluesy,
#moodsPopup .modal-body .moodsGroup .mood.dark,
#moodsPopup .modal-body .moodsGroup .mood.scared {
  background-color: #93b2ec;
}
#moodsPopup .modal-body .moodsGroup .mood.exhausted,
#moodsPopup .modal-body .moodsGroup .mood.lonely,
#moodsPopup .modal-body .moodsGroup .mood.melancholy,
#moodsPopup .modal-body .moodsGroup .mood.very_angry {
  background-color: #e89b9b;
}

#beatzonePopup {
  min-width: 550px !important;
  position: relative;
}
#beatzonePopup .modal-body .error {
  font-size: 0.9rem;
}
#beatzonePopup .modal-body .my-row.upload-photo-buttons-holder,
#beatzonePopup .modal-body .my-row.error-and-notification {
  margin-top: 6px;
}
#beatzonePopup .modal-body .my-row.upload-photo-buttons-holder .notification,
#beatzonePopup .modal-body .my-row.error-and-notification .notification {
  color: #219820;
}
#beatzonePopup .modal-body .edit-user-modal-user-image-holder {
  position: relative;
  padding: 0px;
  margin-right: 15px;
}
#beatzonePopup .modal-body .edit-user-modal-user-image-holder .user-photo-options {
  position: absolute;
  top: -2px;
  z-index: 3;
}
#beatzonePopup .modal-body .edit-user-modal-user-image-holder .user-photo-options .fa-camera-retro {
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 1.2rem;
  color: #2196F3;
}
#beatzonePopup .modal-body .edit-user-modal-user-image-holder .user-photo-options > .options-holder {
  background-color: white;
  padding: 5px 5px 8px 8px;
  width: 187px;
  font-size: 0.9rem;
  margin-top: 16px;
  color: black;
}
#beatzonePopup .modal-body .edit-user-modal-user-image-holder > img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
#beatzonePopup .modal-body .edit-user-modal-user-image-holder .userImageUploadSpinner {
  position: absolute;
  top: 20px;
  left: 26px;
  font-size: 2em;
}
#beatzonePopup .modal-body .upload-photo-buttons-holder {
  margin-top: 8px;
  font-size: 0.9rem;
}
#beatzonePopup .modal-body .upload-photo-buttons-holder .btn-use-fb-image {
  cursor: pointer;
}
#beatzonePopup .modal-body .upload-photo-buttons-holder .btn-use-fb-image:hover {
  text-decoration: underline;
}
#beatzonePopup .modal-body .upload-photo-buttons-holder .btn-use-fb-image i {
  margin-right: 1px;
}
#beatzonePopup .modal-body .upload-photo-buttons-holder .btn-upload-image a {
  color: #3D3C49 !important;
  text-decoration: underline;
}
#beatzonePopup .modal-body #edit-user-details-modal_top {
  display: flex;
  position: relative;
  margin-bottom: 15px;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder > div .fa-pen {
  font-size: 1.2rem;
  color: #2196F3;
  margin-left: 5px;
  cursor: pointer;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder #usernameAndCountry {
  display: flex;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder #usernameAndCountry .countryHolder {
  margin-left: 15px;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder .my-row.user-name,
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder .my-row.user-email {
  position: relative;
  display: flex;
  align-items: baseline;
  height: 30px;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder .my-row.user-name b,
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder .my-row.user-email b {
  margin-right: 3px;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder .my-row.user-name #txtUsername,
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder .my-row.user-email #txtUsername,
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder .my-row.user-name #txtEmail,
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder .my-row.user-email #txtEmail {
  display: inline-block;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder .my-row.user-name #txtUsername,
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder .my-row.user-email #txtUsername {
  width: 210px;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder .my-row.user-name #txtEmail,
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder .my-row.user-email #txtEmail {
  width: 247px;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder .my-row.user-name label,
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder .my-row.user-email label {
  margin-right: 2px;
  margin-bottom: 0px;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder .my-row.user-name span,
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder .my-row.user-email span {
  max-width: 280px;
  float: left;
  position: relative;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder #logoutAndPasswordChange {
  font-size: 0.9rem;
  display: flex;
  font-size: 0.8rem;
  margin-top: 12px;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder #logoutAndPasswordChange .logout {
  margin-right: 10px;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder #logoutAndPasswordChange .logout #logout-link {
  color: #f53c56;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder #logoutAndPasswordChange #change-password-group {
  margin-top: 5px;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder #logoutAndPasswordChange #change-password-group > div {
  display: flex;
  white-space: nowrap;
  align-items: baseline;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder #logoutAndPasswordChange #change-password-group > div b {
  font-size: 1rem;
  margin-right: 4px;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder #logoutAndPasswordChange #change-password-group > div input {
  height: 28px;
  padding-left: 7px;
  font-size: 0.9rem;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder #logoutAndPasswordChange .change-password #change-password-link {
  cursor: pointer;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder #logoutAndPasswordChange .change-password #change-password-link:hover {
  text-decoration: underline;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder #privacy {
  display: flex;
  align-items: baseline;
}
#beatzonePopup .modal-body #edit-user-details-modal_top .user-details-holder #privacy span {
  font-size: 0.8rem;
  margin-left: 1px;
}
#beatzonePopup .modal-body #howPplSeeMyProfile {
  position: absolute;
  top: 2px;
  right: 32px;
}
#beatzonePopup .modal-body #profileWatchesOpener {
  position: absolute;
  top: 2px;
  right: 55px;
}
#beatzonePopup .modal-body .scrobble-holder {
  position: absolute;
  top: -3px;
  right: 0;
}
#beatzonePopup .modal-body .scrobble-holder > button {
  font-size: 0.9em !important;
  font-weight: normal !important;
  padding: 0px 5px 2px !important;
  background-color: #B00000;
}
#beatzonePopup .modal-body .scrobble-holder > button.startScrobbling {
  background-color: #AE6868;
}
#beatzonePopup .modal-body #beatZone_roomLists {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
}
#beatzonePopup .modal-body #beatZone_roomLists h3 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 14px;
}
#beatzonePopup .modal-body #beatZone_roomLists .beatZone_roomLists_room {
  padding: 5px 7px 7px;
  font-size: 1rem;
}
#beatzonePopup .modal-body #beatZone_roomLists .beatZone_roomLists_room .fa-lock {
  margin-right: 5px;
  font-size: 0.9rem;
  position: relative;
  top: 1px;
}
#beatzonePopup .modal-body #beatZone_roomLists .beatZone_roomLists_room .roomName {
  display: inline-block;
  max-width: 302px;
}
#beatzonePopup .modal-body #beatZone_roomLists .beatZone_roomLists_room .roomOpener {
  color: #3D3C49;
  max-width: 116px;
  display: inline-block;
}
#beatzonePopup .modal-body #beatZone_roomLists .beatZone_roomLists_room .roomScore,
#beatzonePopup .modal-body #beatZone_roomLists .beatZone_roomLists_room .roomOpener {
  color: gray;
  margin-left: 5px;
}
#beatzonePopup .modal-body #beatZone_roomLists .beatZone_roomLists_room:nth-child(odd) {
  background-color: #e6e6e6;
}
#beatzonePopup .modal-body #beatZone_roomLists .beatZone_roomLists_room:nth-child(even) {
  background-color: #f8f8f8;
}
#beatzonePopup .modal-body #beatZone_roomLists .beatZone_roomLists_room:hover {
  background-color: #E3EEEE;
  text-decoration: none;
}
#beatzonePopup .modal-body #beatZone_roomLists .beatZone_roomLists_room:hover i {
  text-decoration: none;
}
#beatzonePopup .modal-body #beatZone_roomLists .rooms-tabs {
  position: relative;
}
#beatzonePopup .modal-body #beatZone_roomLists .rooms-tabs .tab {
  padding: 2px 14px 6px;
  width: auto;
  line-height: 27px;
  font-weight: bold;
}
#beatzonePopup .modal-body #beatZone_roomLists .rooms-tabs .tab.active {
  background-color: #e6e6e6;
}
#beatzonePopup .modal-body #beatZone_roomLists .rooms-tabs .globalScores {
  right: 0px;
  top: 6px;
  position: absolute;
  font-size: 0.9rem;
}
#beatzonePopup .modal-body #beatZone_roomLists .rooms-tabs .globalScores a {
  text-decoration: underline;
}
#beatzonePopup .modal-body #beatZone_roomLists .rooms-tabs .globalScores .fa-star {
  color: #f32196;
}
#beatzonePopup .modal-body #beatZone_roomLists #roomListsHolder {
  max-height: 171px;
  background-color: #f8f8f8;
}
#beatzonePopup .modal-body #beatZone_roomLists #roomListsHolder .my-row a:focus {
  color: #337ab7 !important;
}
#beatzonePopup .modal-body #beatZone_roomLists #roomListsHolder .my-row .noBeatRooms {
  font-size: 0.9rem;
  text-align: center;
  padding: 8px 17px !important;
  color: black;
}
#beatzonePopup .modal-body #beatZone_roomLists #roomListsHolder .my-row.my-favorites-beatrooms .beatZone_roomLists_room {
  position: relative;
}
#beatzonePopup .modal-body #beatZone_roomLists #roomListsHolder .my-row.my-favorites-beatrooms .beatZone_roomLists_room .btn-remove-from-favorites {
  position: absolute;
  right: 14px;
  padding: -2px 15px;
}
#beatzonePopup .modal-body #userSoundtracks {
  margin-top: 16px;
}
#beatzonePopup .modal-body #userSoundtracks label i {
  margin-right: 5px;
}
#beatzonePopup .modal-body #userSoundtracks .soundtrack,
#beatzonePopup .modal-body #userSoundtracks .featuredSong {
  display: flex;
  padding: 5px 7px 7px;
  justify-content: space-between;
  font-size: 1rem;
}
#beatzonePopup .modal-body #userSoundtracks .soundtrack i,
#beatzonePopup .modal-body #userSoundtracks .featuredSong i {
  line-height: 20px;
}
#beatzonePopup .modal-body #biographyHolder {
  margin-top: 15px;
}
#beatzonePopup .modal-body #biographyHolder #noBiography {
  cursor: pointer;
  color: gray;
}
#beatzonePopup .modal-body #biographyHolder .biography,
#beatzonePopup .modal-body #biographyHolder #noBiography {
  padding-left: 6px;
  font-size: 1rem;
}
#beatzonePopup .modal-body #biographyHolder .view {
  margin-top: 5px;
  background-color: #e6e6e6;
  border-radius: 25px;
}
#beatzonePopup .modal-body #biographyHolder .view:hover {
  background-color: #f8f8f8;
}
#beatzonePopup .modal-body #biographyHolder textarea {
  width: 100%;
  margin-top: 5px;
  height: 120px;
  padding: 5px 10px;
  margin-bottom: 5px;
}
#beatzonePopup .modal-body #biographyHolder .edit {
  text-align: right;
}
#beatzonePopup .modal-footer {
  padding: 12px 8px 27px;
  margin-top: 20px !important;
  text-align: center;
  background-color: #f8f8f8;
}
#beatzonePopup .modal-footer #beatsBalance {
  padding-bottom: 16px;
}
#beatzonePopup .modal-footer #beatsBalance i {
  margin-left: 1px;
  color: #79A2A1;
}
#beatzonePopup button {
  font-size: 0.95em;
  padding: 2px 15px 5px;
}
#beatzonePopup .adminIconsHolder {
  position: absolute;
  z-index: 4;
}
#beatzonePopup .adminIconsHolder .buttonsHolder {
  top: 10px;
  left: 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
}
#beatzonePopup .adminIconsHolder .buttonsHolder a {
  text-decoration: none;
}
#beatzonePopup .adminIconsHolder .impersonateForm {
  background-color: white;
  border: 1px solid;
  padding: 10px;
}
#beatzonePopup .modal-body {
  display: table;
  width: 100%;
}
#beatzonePopup .modal-body .upload-image-holder {
  padding-right: 0px;
}
#beatzonePopup .modal-body .upload-image-holder > img {
  max-width: 150px;
}
#beatzonePopup .modal-body .upload-image-holder .btn-upload-image {
  margin-top: 3px;
  cursor: pointer;
  font-size: 0.85em;
}
#beatzonePopup .modal-body .upload-image-holder .btn-upload-image:hover {
  text-decoration: underline;
}
#beatzonePopup .modal-body .upload-image-holder .buttons-holder {
  margin-top: 8px;
  font-size: 0.8em;
}
#beatzonePopup .modal-body .upload-image-holder .buttons-holder .btn-use-fb-image {
  cursor: pointer;
  font-size: 0.85em;
}
#beatzonePopup .modal-body .upload-image-holder .buttons-holder .btn-use-fb-image i {
  margin-right: 1px;
}
#beatzonePopup .modal-body .upload-image-holder .buttons-holder .btn-use-fb-image:hover {
  text-decoration: underline;
}
#beatzonePopup .modal-body #accountDeletion {
  color: #f53c56;
  font-size: 0.8rem;
  margin-top: 15px;
  display: inline-block;
  float: right;
}

#deleteAccountPopup {
  text-align: center;
}
#deleteAccountPopup h3 {
  color: #f53c56;
}
#deleteAccountPopup p {
  margin: 16px 0 20px;
}
#deleteAccountPopup button {
  margin: 0 5px;
}

#changeUserCountryPopup input {
  border: 1px solid #D2D2D2;
  width: 100%;
  padding: 10px;
}
#changeUserCountryPopup .countries {
  margin-top: 10px;
  text-align: left;
  max-height: 350px;
}
#changeUserCountryPopup .countries .country {
  padding: 6px 0;
}
#changeUserCountryPopup .countries .country .flag {
  margin-right: 5px;
}
#changeUserCountryPopup .countries .country:hover {
  background-color: #dfdfdf;
}
#changeUserCountryPopup #selectedCountry {
  margin-top: 10px;
  font-size: 1.2rem;
}
#changeUserCountryPopup #selectedCountry .flag-icon {
  margin-right: 4px;
}
#changeUserCountryPopup #selectedCountry button {
  margin-top: 10px;
}

#redirectToPlatformPopup {
  text-align: center;
  font-size: 1.2rem;
}
#redirectToPlatformPopup p {
  font-size: 1rem;
  margin-top: 15px;
  color: gray;
}
#redirectToPlatformPopup button {
  margin-top: 18px;
}
#redirectToPlatformPopup button a:hover {
  text-decoration: none;
}

.ambassadorProgramOpener {
  position: relative;
  top: 2px;
}
.ambassadorProgramOpener i {
  font-size: 17px;
}

#ambassadorProgramPopup .modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  white-space: inherit;
  flex-direction: column;
  text-align: center;
}
#ambassadorProgramPopup .modal-body p {
  font-size: 1.1rem;
}
#ambassadorProgramPopup .modal-body #ambassadorLink {
  width: 100%;
}
#ambassadorProgramPopup .modal-body #ambassadorLink .copyPasteInput {
  position: relative;
  margin: 15px 10px 6px;
}
#ambassadorProgramPopup .modal-body #shareOptions {
  width: 285px;
}
#ambassadorProgramPopup .modal-body #tip {
  font-size: 0.9rem;
  margin-bottom: 5px;
}
#ambassadorProgramPopup .modal-body #tip i {
  color: #c1b368;
  margin-right: 5px;
}
#ambassadorProgramPopup .modal-body #thatSimple {
  margin: 15px 0;
  color: #2196F3;
  text-decoration: underline;
}
#ambassadorProgramPopup .modal-body #thatSimpleParagraph {
  width: 100%;
  white-space: break-spaces;
  text-align: center;
}
#ambassadorProgramPopup .modal-body #thatSimpleParagraph a {
  color: blue;
}
#ambassadorProgramPopup .modal-body #totalSignUps {
  font-size: 40px;
}
#ambassadorProgramPopup .modal-body p#instructions {
  font-size: 0.9rem;
  margin: 15px 0px 0;
}
#ambassadorProgramPopup .modal-body p#instructions a {
  color: blue;
}
#ambassadorProgramPopup .modal-body button {
  margin-top: 15px;
}

.chatMessageInputReply {
  position: absolute;
  background-color: #4ba7dd;
  bottom: 0;
  width: 100%;
  color: white;
  padding: 3px 5px 5px;
  display: flex;
}
.chatMessageInputReply .btnClose {
  position: absolute;
  top: 6px;
  right: 15px;
}
.chatMessageInputReply .userName {
  margin-right: 2px;
}
.chatMessageInputReply .text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: inline-block;
}

.chatMessageRowReply {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 1px 5px 3px;
  margin: 4px 4px 4px 2px;
  max-width: 310px;
  text-align: left;
  border-radius: 5px 5px 5px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chatMessageRowReply .username {
  color: #aed0cf;
}
.chatMessageRowReply .text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 92%;
}

.chatMessageHoverOptions {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 10px;
  height: 100%;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  color: #2196F3;
}
.chatMessageHoverOptions i {
  width: 100%;
  margin: 0 10px;
}

#chatInputSuggestedUsersHolder {
  position: absolute;
  top: 31px;
  left: 0;
  background-color: #efefef;
  width: 100%;
  z-index: 1;
  max-height: 80px;
}
#chatInputSuggestedUsersHolder .suggestedUser {
  padding: 4px 0 4px 5px;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
}
#chatInputSuggestedUsersHolder .suggestedUser img {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  margin-right: 5px;
}
#chatInputSuggestedUsersHolder .suggestedUser.selected {
  font-weight: 100;
  background-color: white;
}

#mobileLayer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 1000;
  padding-top: 41px;
}

#mobileFooter {
  display: flex;
  align-items: center;
  border-radius: 50px;
  justify-content: flex-end;
  padding-right: 2px;
  background-color: white;
  border: 2px solid lightgrey;
}
#mobileFooter button {
  border-radius: 50% 50% 0;
  position: relative;
  bottom: 2px;
  height: 60px;
  width: 60px;
  font-size: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-shadow: 2px 2px 0px #f32196;
  box-shadow: 4px 2px 0px #f32196;
}
#mobileFooter button.createRoomBtn {
  font-size: 50px;
}
#mobileFooter button span {
  transform: rotate(0deg);
  transition: transform 0.15s;
}
#mobileFooter button.songSearchDisplayed {
  background-color: #6f6f6f;
  text-shadow: 2px 2px 0px #333;
  box-shadow: 2px 2px 0px #333;
}
#mobileFooter button.songSearchDisplayed span {
  transform: rotate(45deg);
  left: 4px;
  top: 1px;
  position: relative;
}
#mobileFooter #homePageMobileButtons {
  display: flex;
  align-items: center;
}
#mobileFooter #homePageMobileButtons > * {
  margin: 8px;
  font-size: 0.9rem;
  font-weight: bold;
}
#mobileFooter #homePageMobileButtons .active {
  font-weight: 200;
  text-decoration: underline;
  font-size: 1.2rem;
}
#mobileFooter #roomFooterActions > * {
  font-size: 30px;
  font-size: 25px;
  margin: 15px;
  display: inline;
}
#mobileFooter #roomFooterActions > * .fa-sign-out-alt {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
#mobileFooter #roomChatOpener i.opened {
  color: #2196F3;
}
#mobileFooter #roomChatOpener i.closed {
  color: #404040;
}
#mobileFooter #roomChatOpener i.unread {
  -webkit-animation: blinkBgFunc2 2s infinite;
  animation: blinkBgFunc2 2s infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
#mobileFooter #roomChatOpener i.unread .blinkBgFunc from {
  color: #404040;
}
#mobileFooter #roomChatOpener i.unread .blinkBgFunc to {
  color: #f32196;
}
@-webkit-keyframes blinkBgFunc2 {
  from {
    color: #404040;
  }
  to {
    color: #f32196;
  }
}
@keyframes blinkBgFunc2 {
  from {
    color: #404040;
  }
  to {
    color: #f32196;
  }
}

#mobileRightMenu {
  position: absolute;
  top: 40px;
  right: 0;
  background-color: #fff;
  color: #404040;
  height: 100vh;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 1.2rem;
}
#mobileRightMenu i {
  font-size: 1.8rem;
}
#mobileRightMenu section > div {
  padding: 13px 10px;
  text-align: center;
}
#mobileRightMenu #profile {
  padding: 10px;
  text-align: center;
  background-color: #e6e6e6;
  max-width: 73px;
}
#mobileRightMenu #profile img.user-image {
  width: 35px;
  height: 35px;
}
#mobileRightMenu .subscriptionBattery .icon.fa-battery-empty {
  color: #404040;
}
#mobileRightMenu .subscriptionBattery .subscription .subscriptionBattery {
  text-align: left;
}
#mobileRightMenu #inboxOpener {
  display: inline-flex;
}
#mobileRightMenu #userAlertsOpener {
  margin: 0;
}

#mobileCurrSongControls {
  background-color: rgba(0, 0, 0, 0.6);
  font-size: 1.8rem;
  color: white;
  margin-top: 1px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 7px 0;
}
#mobileCurrSongControls .skip.disabled,
#mobileCurrSongControls .fa-pause.disabled {
  color: lightgrey;
}


/*# sourceMappingURL=2532.d56b634ff1b43e59796c.css.map*/