zoff/server/public/assets/css/style.css

/*
1. Global styles
2. Entry page
3. Channel page
3.0 Page
3.1 Video
3.2 Playlist
3.3 Search
*/

.material-icons {
  display: none;
  width: 24px;
}

html {
  background: #2d2d2d;
}

body {
  background: white;
}

a {
  outline: 0 !important;
}

.pride-background {
  background: linear-gradient(
      90deg,
      #f00000,
      #f00000 16.67%,
      #ff8000 16.67%,
      #ff8000 33.33%,
      #ffff00 33.33%,
      #ffff00 50%,
      #007940 50%,
      #007940 66.67%,
      #4040ff 66.67%,
      #4040ff 83.33%,
      #a000c0 83.33%,
      #a000c0
    )
    fixed;
}

.initial-line-height {
  line-height: initial;
}

.error-code-container {
  background: lightgrey;
  border: 1px solid darkgrey;
  margin-bottom: 20px;
}

.admin_panel {
  margin-top: 100px;
}

.current_number {
  color: black;
}

#descriptions_cont,
#thumbnails_cont {
  display: flex;
  flex-direction: column;
}

.card-duration {
  border-top-right-radius: 4px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0 5px;
}

.badge.admin-panel {
  margin: 0px;
  margin-top: 13px;
}

.width25 {
  width: 25% !important;
}

.width100 {
  width: 100% !important;
}

.snow {
  -webkit-filter: brightness(100%);
  -moz-filter: brightness(100%);
  -o-filter: brightness(100%);
  filter: brightness(100%);
  width: 5px;
  height: 5px;
  background-color: white;
  z-index: 1000000;
  pointer-events: none;
  position: absolute;
  border: 1px solid white;
  border-radius: 100px;
}
.drag-target {
  pointer-events: none;
}
.settings_embed {
  width: 40px !important;
  padding: 0 10px !important;
  border: none !important;
}

.header-buttons {
  display: block;
}

#player_overlay_controls {
  font-size: 7rem;
  width: 100%;
  height: 100%;
}

#volume-button-overlay,
#playpause-overlay {
  display: inline-block;
  margin: auto;
  cursor: pointer;
}

#pageButtons {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-shrink: initial;
  justify-content: space-between;
  height: 32px;
  background: inherit;
  z-index: 9;
}

.token-container {
  padding-top: 64px;
  word-wrap: break-word;
  overflow: hidden;
}

.token-form {
  position: relative;
}

.full-form-token {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.center-loader-token {
  margin: auto;
}

.soundcloud_info_container {
  position: absolute;
  bottom: 20px;
  right: 0px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
}

.soundcloud_info_container a {
  margin: 0 10px;
}

#player_loader_container {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
}
#player_loader {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

#send-loader {
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

#pageButtons,
#pageButtons a {
  color: white !important;
  width: 100%;
  justify-content: center;
}

#pageButtons span {
  width: 100%;
  justify-content: center;
}

#pageNumber {
  width: auto !important;
  margin: 0 5px;
}

.first_page,
.first_page_hide,
.last_page,
.last_page_hide {
  width: 50% !important;
}

.hide-playlist-button {
  position: absolute;
  top: 128px;
  background: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  font-size: 1rem;
  padding: 10px;
  color: white;
}

#pageNumber {
  cursor: default;
  color: white;
  padding: 0;
  line-height: 36px;
}

#channel-share-modal {
  overflow: hidden;
  background: transparent !important;
  text-align: center !important;
  margin: auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  box-shadow: none;
}

#embed {
  max-height: max-content !important;
}

.chan.tap-target-origin {
  display: none;
}

.tap-target-join {
  color: white;
}

#channel-share-modal p {
  color: white;
  font-size: 2rem;
}

#channel-share-modal.open {
  display: flex !important;
}

#playing_on {
  display: none;
  text-align: left;
  position: absolute;
  bottom: 0px;
  padding-left: 10px;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
}

#playing_on #chromecast_icon i {
  font-size: 70px;
}

#playing_on #chromecast_text {
  font-size: 20px;
  padding-left: 55px;
}

.prev_page,
.next_page,
.last_page,
.first_page {
  cursor: pointer;
}

.prev_page_hide,
.next_page_hide,
.last_page_hide,
.first_page_hide {
  visibility: visible !important;
  color: gray;
  cursor: default;
}

#chat-container,
#suggestions {
  height: calc(100vh - 48px - 64px);
}

.channel-info-all-chat {
  color: lightgrey;
  font-size: 0.75rem;
}

.chat-icon {
  width: 16px;
  margin-right: 2px;
  vertical-align: middle;
}

#chatForm {
  padding-left: 14px;
}

.close-settings {
  color: #2d2d2d;
}

.chan-link,
.chan-link-element {
  width: 100%;
  padding: 0;
  color: orange !important;
  margin: 0;
}

li.disabled span {
  color: orange !important;
}

.prev_page_hide,
.prev_page,
.first_page,
.first_page_hide {
  padding: 0 1px;
}

.next_page_hide,
.next_page,
.last_page,
.last_page_hide {
  padding: 0 0px;
  display: flex;
}

.first_page,
.first_page_hide {
  padding: 0 0 0 10px;
}

.last_page,
.last_page_hide {
  padding: 0 10px 0 0;
}

.settings_embed:focus {
  border: none !important;
  box-shadow: none !important;
}

.padding_right_26 {
  padding-right: 26px !important;
}

.padding_left_6 {
  padding-left: 6px !important;
}

.embed-label {
  font-size: 1rem !important;
}

#embed-button {
  display: none;
}

.not-imported,
.not-exported {
  border-top: 1px solid lightgrey;
  margin-top: 15px;
  color: black;
}

.not-exported-element {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.not-imported-element {
  height: 60px;
}

.extra-add-text {
  width: 165px;
  display: inline-block;
  height: 30px;
  line-height: 30px;
}

.not-exported-container .not-imported-element .extra-add-text {
  width: 215px;
}

.playlist-search-button {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  cursor: pointer;
  padding-right: 7px;
  margin-left: -7px;
  margin-top: 5px;
}

.filter-pagination-container {
  display: flex;
  justify-content: space-evenly;
  width: 50%;
  margin: auto;
}

.category-advanced {
  margin-top: 0px;
}

.bottom-filter-container {
  padding-top: 15px;
}

.top-filter-container {
  padding-bottom: 15px;
}

.extra-button {
  margin: 0 4px !important;
  padding: 0px !important;
  width: 37px;
  height: 40px !important;
  line-height: 40px !important;
  color: white !important;
  display: flex !important;
  justify-content: center;
}

.search-extra {
  height: 40px !important;
  line-height: 40px !important;
  margin: 0 !important;
  color: white !important;
}

.import-spotify-auth,
.import-youtube,
.export-spotify-auth,
.export-youtube,
.exported-playlist,
.import-zoff,
.import-soundcloud,
.export-soundcloud {
  color: white !important;
  height: 40px !important;
  line-height: 40px !important;
  margin: 0 4rem 0 0 !important;
  width: 76%;
}

.import-soundcloud,
.import-soundcloud:active,
.import-soundcloud:visited,
.export-soundcloud,
.export-soundcloud:visited,
.exported-soundcloud-list {
  background: #f96200;
}

.import-soundcloud:hover,
.export-soundcloud:hover {
  background: #f97f30;
}

.soundcloud_logo {
  height: 100%;
}

.export-soundcloud,
.import-soundcloud {
  display: flex;
  justify-content: center;
}

.import-spotify-auth {
  padding-left: 5px;
}

.youtube_logo {
  height: 75%;
  margin-top: 5px;
}

.spotify_logo {
  height: 90%;
  margin-top: 2px;
}

.import-buttons,
.export-buttons {
  padding: 10px;
}

#chat-container {
  overflow: hidden;
}

/* GLOBAL STYLES */

#playbar {
  display: none;
}

#frontpage-viewer-counter {
  position: absolute;
  top: 0px;
  left: 125px;
  height: 100%;
  display: flex;
}

.frontpage-viewers {
  margin-right: 5px;
}

#toast-container {
  left: 2%;
  cursor: pointer;
  width: 70vw;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  /*pointer-events:none;*/
}

::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 0px;
}

::-webkit-scrollbar {
  width: 8px;
  border-radius: 0px;
}

::-webkit-scrollbar-thumb {
  background-color: #3e3e3e;
  border-radius: 0px;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.select {
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.auto-pointer {
  cursor: auto !important;
}

#chatchannel li:nth-child(even),
#chatall li:nth-child(even) {
  background: rgba(0, 0, 0, 0.1);
}

#chatchannel li:nth-child(odd),
#chatall li:nth-child(odd) {
  background: rgba(0, 0, 0, 0.2);
}

#chatchannel li,
#chatall li {
  cursor: text;
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  padding: 4px;
  margin-left: 0px;
}

#chatchannel li span,
#chatall li span {
  padding-right: 1px;
}

.addedJoinBox {
  position: absolute;
  bottom: 50px;
  z-index: 99;
  left: 0px;
  text-align: left;
  background: #2d2d2d;
  padding: 20px;
  color: white;
}

#closePlayer {
  position: fixed;
  top: 7px;
  right: 7px;
  z-index: 999999999999999;
  font-size: 18px;
  color: white;
  text-shadow: 0px 0px 2px black;
  cursor: pointer;
}

#player_bottom_overlay {
  z-index: 999999999999;
  cursor: pointer;
  top: 0px;
  left: 0px;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.frontpage_modified_heights {
  height: 0px !important;
  margin-bottom: 0px !important;
}

.player_bottom {
  position: fixed !important;
  transform: translate(calc(100vw - 260px), calc(100vh - 210px)) !important;
  /* left: calc(100vw - 270px) !important; */
  /* top: calc(100vh - 210px) !important; */
  /* bottom: 10px; */
  /* top: 0px; */
  width: 250px !important;
  height: 200px !important;
  display: block !important;
  /* right: 10px; */
  z-index: 10;
  left: 0;
  /*transition: 1s;*/
}

.generate-channel-name {
  margin-left: -24px;
  padding-right: 5px;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.select-wrapper input.select-dropdown {
  position: initial;
}

#frontpage_player {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 10;
  cursor: pointer;
}

#frontpage_player #player {
  width: 200px;
  cursor: pointer;
}

#text-chat-input {
  border-top: 1px solid #9e9e9e;
}

#channel-load {
  /*display:none;*/
  position: absolute;
  z-index: 1;
  top: 52px;
  background-color: rgba(0, 0, 0, 0);
}

#channel-load-move {
  background-color: #ffffff !important;
}

.rounded {
  border-radius: 4px;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-transition: background-color 1s;
  -moz-transition: background-color 1s;
  -ms-transition: background-color 1s;
  -o-transition: background-color 1s;
  transition: background-color 1s;
  overflow-y: scroll !important;
}

#main-container {
  flex: auto;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  -ms-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.main,
#main-row,
.video-container,
#playlist {
  height: calc(100vh - 64px);
}

footer {
  margin-top: 0px !important;
}

.left-embed {
  margin-left: -9px !important;
  margin-right: 1px !important;
}

.right-embed {
  margin-right: 3px !important;
  margin-left: -17px !important;
}

/* global colors */

.modal-overlay {
  z-index: 999999 !important;
}

.modal {
  outline: 0 !important;
  z-index: 999999999 !important;
}

.material-tooltip {
  z-index: 999999 !important;
}

#toast-container {
  z-index: 999999 !important;
}

#user_password {
  width: 50% !important;
}

.modal-header-fixed {
  position: fixed;
  width: 100px;
  right: 0px;
}

.help-button-footer,
.embed-button-footer,
.contact-button-footer {
  width: 17em;
  background: #1e88e5;
  border-radius: 2px;
  color: white;
  text-align: center;
}

.footer-buttons li a {
  margin-top: 10px;
  padding-left: 10px;
}

.footer-button-icon {
  font-size: 33px !important;
  margin-right: 10px;
}

.sidenav {
  overflow-x: hidden;
  width: 315px;
}

footer.page-footer,
nav,
.tabs .tab a,
.sidenav .collapsible-body li.active,
.sidenav.fixed .collapsible-body li.active,
.pagination li.active {
  background-color: #2d2d2d;
}

.sidenav .collapsible-header,
.sidenav.fixed .collapsible-header {
  outline: none !important;
}

.sidenav .collapsible li,
.sidenav.fixed .collapsible li {
  color: #2d2d2d;
}

.tabs .tab a {
  padding: 0px;
}

.secondary-content,
.dropdown-content li > a,
.dropdown-content li > span,
.input-field .prefix.active,
input[type="text"]:focus:not([readonly]) + label,
input[type="password"]:focus:not([readonly]) + label,
input[type="email"]:focus:not([readonly]) + label,
input[type="url"]:focus:not([readonly]) + label,
input[type="time"]:focus:not([readonly]) + label,
input[type="date"]:focus:not([readonly]) + label,
input[type="datetime-local"]:focus:not([readonly]) + label,
input[type="tel"]:focus:not([readonly]) + label,
input[type="number"]:focus:not([readonly]) + label,
input[type="search"]:focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
  color: #2d2d2d;
}

.pin {
  position: absolute;
  right: 15px;
  width: 25px;
  font-size: 25px;
  text-align: right;
}

.spotify_authenticated,
.soundcloud_authenticated {
  display: none;
}

.field-settings {
  margin-left: 25px !important;
  color: rgb(68, 68, 68);
  display: flex;
  align-items: center;
  height: 64px !important;
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
}

.soundcloud_authenticated {
  height: auto !important;
}

.soundcloud-disclaimer {
  line-height: 20px;
  padding-right: 40px;
}

.not-imported-container {
  display: block;
  height: 100% !important;
}

.not-exported-container {
  display: block !important;
  margin-left: 0px !important;
}

.not-exported-container,
.not-imported-container {
  height: auto !important;
}

.youtube_clicked {
  display: none;
}

.import-icon {
  position: absolute;
}

#preloader.progress.frontpage-preloader .indeterminate {
  background-color: #ff9800 !important;
}

#import,
#import_spotify,
#import_zoff,
#import_soundcloud {
  width: 65%;
  padding-left: 35px;
  color: rgb(68, 68, 68);
  border-bottom: 1px solid lightgrey;
  padding-bottom: 0px;
  height: 64px;
}

#import_zoff,
#listImportSoundCloud {
  width: 100%;
}

#password,
#strict-input-number {
  width: 84%;
  margin-left: 30px;
  margin-bottom: 0;
}

#strict-input-number {
  width: 50px;
  border-bottom: transparent;
}

.strict-skip-info {
  width: 1000px;
}

span.badge.new,
.progress .determinate,
.progress .indeterminate,
.switch label input[type="checkbox"]:checked + .lever:after {
  background-color: #2d2d2d;
}

span.badge.new.white {
  color: black;
  margin-top: 12px;
  background: white;
  margin-left: -15px;
}

.suggested-link span.badge.new.white {
  min-width: initial;
  margin-left: 0px;
}

.suggested-link {
  display: flex !important;
  justify-content: space-around;
}

.suggested-link span.badge:after {
  content: "";
}

input[type="text"]:focus:not([readonly]),
input[type="password"]:focus:not([readonly]),
input[type="email"]:focus:not([readonly]),
input[type="url"]:focus:not([readonly]),
input[type="time"]:focus:not([readonly]),
input[type="date"]:focus:not([readonly]),
input[type="datetime-local"]:focus:not([readonly]),
input[type="tel"]:focus:not([readonly]),
input[type="number"]:focus:not([readonly]),
input[type="search"]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid #9d9d9d;
  box-shadow: 0 1px 0 0 #9d9d9d;
}

/* End global colors */

nav .brand-logo {
  padding-left: 20px;
  position: relative;
  height: 100%;
}

nav .brand-logo-navigate {
  padding-left: 0px;
}

#fp-nav {
  background-color: rgba(45, 45, 45, 1);
  position: fixed;
  z-index: 10;
  /*width: calc(100vw - 8px);*/
  overflow: hidden;
}

.import-a,
.suggested {
  width: 100%;
}

#nav-mobile .green:hover {
  background-color: #38803c !important;
}

.footer-copyright {
  /*text-align: center;*/
}

.footer-copyright a {
  color: #fff;
}
.footer-copyright a:hover {
  color: #6699ff;
}

main {
  flex: auto;
}

nav .zbrand {
  min-width: 200px;
  overflow: hidden;
  position: relative;
  font-size: 30px;
  padding: 0 20px;
  left: initial;
  display: inline-flex;
}

.navbar-fixed {
  z-index: 999999;
  height: 64px;
}

.fullwidth {
  width: 100%;
}

.highlighted {
  font-weight: 300;
}

.invisible {
  opacity: 0;
}

.auto-margin {
  margin-left: auto !important;
  margin-right: auto !important;
}

.clickable,
.modal-trigger {
  cursor: pointer;
}

.cardbg {
  background-repeat: no-repeat;
  background-size: 124%;
  background-size: cover;
  background-position: 50% 50%;
  background-color: #171717;
  height: 120px;
}

.no-jump-select {
  height: calc(3rem + 1px) !important;
  margin: 0 0 8px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #9e9e9e;
  align-items: center;
  font-size: 16px;

  line-height: 3rem;
  color: #000;
}

.description_text {
  color: #2d2d2d;
  text-align: left;
  word-break: break-word;
}

.white-bg {
  background-color: white !important;
}

.white-bg:hover {
  background-color: white !important;
}

.card .card-content {
  padding: 10px 20px;
  color: rgba(0, 0, 0, 0.870588);
}

.card .card-action {
  padding: 0;
  background: white;
}

#description_form div .character-counter {
  /*margin-top: -30px;*/
  color: black;
}

.spinner-white,
.spinner-white-only {
  border-color: white;
}

.description_text:first-letter {
  text-transform: uppercase;
}

.card .card-action a {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-action .delete_button {
  color: white !important;
}
.card-action .delete_button:hover {
  color: grey !important;
}

.share,
.shareface {
  padding-left: 10px !important;
  width: 17em;
}

.shareface {
  background-color: rgb(42, 134, 200) !important;
}

.share img {
  height: 50px;
  margin-right: 10px;
}

/*
play mdi-av-play-arrow
pause mdi-av-pause
remove mdi-content-clear
search mdi-action-search
password mdi-communication-vpn-key
volume mdi-av-volume-up s
kip mdi-av-skip-next
shuffle mdi-av-shuffle
settings mdi-action-settings
errors mdi-alert-warning mdi-alert-error mdi-action-info
success mdi-action-done
vote mdi-action-thumb-up
hide mdi-action-visibility mdi-action-visibility-off
*/
/*Global style for commit container*/

#latest-commit {
  font-size: 12px !important;
  padding-left: 15px !important;
  /*padding-top: 40px !important;*/
}

#latest-commit a {
  color: rgba(255, 255, 255, 0.8);
}

/* INDEX PAGE */

.zicon {
  height: 64px;
  transition: padding 1s ease;
}

.mdi-navigation-close {
  text-align: right !important;
}

.chan-name {
  text-transform: capitalize;
  display: inline-block;
  width: 100%;
  font-weight: 300;
}

#player_bottom_overlay::after {
  background: rgba(0, 0, 0, 0.8);
  content: "To Channel";
  width: 100%;
  position: absolute;
  left: 0px;
  height: 100%;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: opacity 0.5s;
  opacity: 0;
}

#player_bottom_overlay:hover#player_bottom_overlay::after {
  opacity: 1;
  cursor: pointer;
}

/*#nav-mobile{
margin:-1px;
}*/

.mega {
  padding: 6% 0px;
  /* height: 100%; */
  position: relative;
  z-index: 1;
  background-color: #191919;
  margin-top: 64px;
  -webkit-transition: transform 0.5s;
  -moz-transition: transform 0.5s;
  transition: transform 0.5s;
}

#wrapper {
  overflow: hidden;
}

.remote-container {
  margin-top: 64px;
}

#mega-background {
  -webkit-transition: background 0.5s, opacity 0.5s;
  -moz-transition: background 0.5s, opacity 0.5s;
  -o-transition: background 0.5s, opacity 0.5s;
  transition: background 0.5s, opacity 0.5s;
  height: 400px;
  width: 400px;
  position: absolute;
  opacity: 0;
  top: 0px;
  left: 0px;
  z-index: -1;
  height: 100%;
  width: 100%;
  background-size: 200% !important;
  background-position: 50% 50% !important;
  -webkit-filter: brightness(0.8);
  -moz-filter: brightness(0.8);
  -o-filter: brightness(0.8);
  filter: brightness(0.8);
}

#find_div {
  position: absolute;
  background: #282828;
  z-index: 2;
  width: calc(100% - 18px);
  padding: 0 15px;
  top: 0;
  color: white;
}

#find_form {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
}

.num_of_found {
  display: flex;
  align-self: center;
  color: white;
  padding-left: 8px;
}

#close_find_form_button,
#open_advanced_filter {
  display: flex;
  align-self: center;
  padding-left: 10px;
  color: white;
}

.highlight {
  background: rgba(255, 255, 255, 0.2) !important;
}

.mega h5 {
  color: rgb(255, 255, 255);
  cursor: default;
  display: inline;
  font-size: 50px;
  font-weight: 100;
  height: auto;
  line-height: 90.069229px;
  text-align: center;
  text-shadow: rgba(18, 18, 18, 0.76) 0px 1px 4px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
}

.mega form {
  display: flex;
  justify-content: center;
  /*-webkit-background-clip: border-box;   -webkit-background-origin: padding-box;   -webkit-background-size: auto;   -webkit-box-shadow: rgb(68, 68, 68) 0px 0px 8px 0px;   background-attachment: scroll;   background-clip: border-box;   background-color: rgb(255, 255, 255);   background-image: none;   background-origin: padding-box;   background-size: auto;   border-bottom-left-radius: 3px;   border-bottom-right-radius: 3px;   border-top-left-radius: 3px;   border-top-right-radius: 3px;   box-shadow: rgb(68, 68, 68) 0px 0px 8px 0px;   box-sizing: border-box;   color: rgb(255, 255, 255);   cursor: text;   display: flex;   font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;   font-size: 17px;   font-weight: normal;   height: 50px;   line-height: 24.2857151031494px;   margin-top: 0px;   padding-bottom: 5px;   padding-left: 20px;   padding-right: 5px;   padding-top: 5px;   text-align: center;   width: 507.8125px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1%;
    margin-bottom: 2%;*/
  width: 47%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.mega .prething {
  box-sizing: border-box;
  /*color: rgb(155, 155, 155);*/
  cursor: text;
  display: block;
  text-shadow: rgba(18, 18, 18, 0.76) 0px 1px 4px;
  color: rgb(255, 255, 255);
  /*font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;   */
  font-size: 17px;
  /*font-weight: 200; */
  height: 24px;
  line-height: 26px;
  margin-bottom: 8px;
  margin-left: 29px;
  margin-right: 8.5px;
  margin-top: 8px;
  min-width: 56px;
  text-align: center;
  width: 40px;
  margin-right: -85px;
}

.mega input {
  /*color: rgb(0, 0, 0);*/
  /*font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;*/
  font-size: 17px !important;
  height: 42px;
  line-height: 24px;
  min-width: 307px;
  /*width: 400px;*/
  word-spacing: 0px;
  box-shadow: none !important;
  border: none !important;
  color: rgb(255, 255, 255);
  text-shadow: rgba(18, 18, 18, 0.76) 0px 1px 4px;
  border-bottom: 1px solid white !important;
  padding-left: 69px !important;
}

.label-for-mobile-frontpage {
  display: none;
}

.listen-button {
  background: #2d2d2d !important;
  display: flex;
  justify-content: center;
  min-width: 100px;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.contact-button-submit:hover {
  background-color: #2d2d2d;
  color: white;
  border-left: 1px solid #2d2d2d;
  border-right: 1px solid #2d2d2d;
  border-top: 1px solid #2d2d2d;
  border-bottom: 1px solid #2d2d2d;
  border-radius: 2px;
}

.contact-button-submit:focus {
  background-color: #fafafa;
  color: #2d2d2d;
  border-left: 1px solid #2d2d2d;
  border-right: 1px solid #2d2d2d;
  border-top: 1px solid #2d2d2d;
  border-bottom: 1px solid #2d2d2d;
  border-radius: 2px;
  text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
}

.mega .pitch {
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.85);
  display: inline;
  /* font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; */
  font-size: 18px;
  font-weight: 300;
  height: auto;
  /*line-height: 24.2857151031494px;*/
  text-align: center;
  text-shadow: rgba(81, 81, 81, 0.05) 0px 1px 4px;
  width: auto;
  margin-top: 20px;
}

/*#channels li{opacity: 0;}*/

/*------------------- Channel page ---------------------------------------------------------------------------- */

.collapsible-header {
  font-weight: 400 !important;
  height: 64px !important;
  line-height: 64px !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.collapsible-body {
  padding: 0rem;
}

.suggest_thumb {
  width: 25%;
  float: left;
}

#empty-channel-message {
  font-size: 22px;
  color: white;
  font-weight: 300;
  position: relative;
  top: 20px;
}

.zoff-image-import {
  height: 36px;
}

.zoff-color {
  background: #2d2d2d !important;
}

.side_away {
  -webkit-transition: all 0.3s !important;
  -moz-transition: all 0.3s !important;
  -o-transition: all 0.3s !important;
  transition: all 0.3s !important;
}

.video-container {
  padding-left: 0px !important;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
  overflow: visible;
  padding-right: 0px !important;
}

.no-opacity {
  opacity: 0;
}

.suggest_bar {
  /*margin-left:5px !important;*/
  color: rgb(68, 68, 68);
}

.suggest_buttons button {
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin-right: 20px;
  width: 90px;
}

.inner-suggest {
  padding-left: 20px;
}

.suggest-songs:nth-child(odd) {
  background: rgba(204, 204, 204, 0.4);
}
.suggest-songs:nth-child(even) {
  background: #fff;
}

.info_change_button_container,
.suggest-songs {
  padding-top: 20px;
}
.suggest-songs {
  border-bottom: 1px solid black;
}

#thumbnail_form,
#description_form {
  width: 100%;
  padding: 0 10px;
}

#chan_thumbnail,
#chan_description {
  color: black;
  width: 100%;
  border-bottom: 1px solid transparent;
  -webkit-box-shadow: 0 1px 0 0 transparent;
  box-shadow: 0 1px 0 0 transparent;
}

#chan_thumbnail:focus,
#chan_description:focus {
  border-bottom: 1px solid orange !important;
  -webkit-box-shadow: 0 1px 0 0 orange !important;
  box-shadow: 0 1px 0 0 orange !important;
}
#thumbnail_image_channel {
  max-width: 200px;
  max-height: 400px;
}

.autocomplete-content.dropdown-content {
  position: absolute;
  width: 100% !important;
  margin-left: 0px !important;
  /*top: 57px;*/
}

.card-title {
  text-transform: capitalize;
}

.card .card-reveal {
  padding: 10px;
  transition: transform 0.1s;
  display: none;
  transform: translateY(0%);
}

.room-namer.autocomplete {
  /*margin-left: 72px !important;*/
  margin-top: -1px !important;
}

.channel-finder {
  margin-bottom: 0px !important;
}

.channel-finder .input-field {
  display: flex;
  margin-left: 0px !important;
  width: max-content !important;
  justify-content: center;
  padding: 0;
}

.room-namer {
  margin-left: 0px !important;
}

.channel-finder .input-field .prefix {
  color: white;
  font-size: 17px;
  /*margin-left: -215px;*/
  left: 0;
}

.autocomplete-content li .highlight {
  color: orange;
}

.channel_info_container {
  padding-top: 18px !important;
}

#thumbnail_image {
  text-align: center;
}

#thumbnail_image,
#description_area {
  width: 80%;
  margin: auto;
  color: black;
  justify-content: center;
  line-height: 30px;
}

#chan_thumbnail:disabled {
  border-bottom: none;
}

.suggest_title,
.duration-song {
  padding-left: 10px;
  line-height: 24px;
}

.playlist-tabs .indicator,
.playlist-tabs-loggedIn .indicator {
  background-color: white !important;
}

.tabs {
  overflow: hidden;
}

.btn.white {
  color: black;
}

.playlist-tabs .indicator,
.tabs .indicator {
  /*width:50%;*/
  bottom: 0px;
}

.chatTabs .indicator {
  width: 50%;
}

.playlist-tab-links {
  color: white !important;
}

.playlist-tabs-loggedIn {
  width: calc(100% - 7px) !important;
}

.playlist-tabs {
  width: calc(100% - 8px) !important;
}

.chat-link {
  -webkit-transition: color 1s !important;
  -moz-transition: color 1s !important;
  -o-transition: color 1s !important;
  transition: color 1s !important;
}

.playlist-tabs,
.playlist-tabs-loggedIn {
  background-color: rgba(0, 0, 0, 0) !important;
  margin: 0;
  border-bottom: 1px solid white;
}

.duration-song {
  font-size: 12px;
}

.suggest-title-info {
  color: white;
  padding: 10px 0 10px 10px !important;
  line-height: 34px;
  margin: 0 0 -10px 0 !important;
}

#description,
#desc-title {
  color: #444;
}

#main-row {
  margin-bottom: -64px;
  display: flex;
}

.toast {
  word-break: normal;
  cursor: pointer;
}

@media only screen and (min-width: 993px) {
  .toast {
    float: left;
  }

  nav .zbrand {
    left: 0px !important;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  #wrapper {
    padding-right: 0vh !important;
    width: 100% !important;
    overflow: hidden;
  }
}

#list-song-html {
  display: none;
}

.result-start-end-container {
  display: inline-flex;
  align-items: center;
}

.result-start-end-container input.result-start,
.result-start-end-container input.result-end {
  width: 50px;
  margin: 0px 10px 0px 10px;
  text-align: center;
  border: 1px solid #d3d3d342;
  height: 24px;
}

#inner-results {
  height: calc(100vh - 64px - 76px - 64px);
  overflow-y: scroll;
  overflow-x: hidden;
}

.empty-inner-results {
  height: calc(100vh - 64px) !important;
}

#empty-results {
  text-align: center;
  height: calc(100vh - 64px);
  cursor: default;
}

.pagination-results {
  display: flex;
  justify-content: center;
}

.pagination-results a {
  margin: 20px;
}

#empty-results span {
  margin: auto;
}

#donate_form a {
  padding-right: 10px;
}

.tab a {
  background-color: rgba(0, 0, 0, 0) !important;
}

.chat-tab,
.chat-tab-li {
  color: white !important;
  margin: 0 !important;
}

.chatTabs {
  color: white !important;
  background-color: rgba(0, 0, 0, 0);
  height: 44px;
  border-bottom: 1px solid white;
}

#text-chat-input {
  /*width:95%;*/
  color: white;
  border: none;
}

#text-chat-input:focus {
  box-shadow: none;
}

#chat_submit,
#chat_help {
  margin-top: 4px;
  margin-left: 2%;
  width: 12.45%;
  padding: 0;
}

.indicator {
  background-color: white !important;
}

#channelchat,
#all_chat {
  height: calc(100vh - 241px);
  margin: 0px 0px;
}

#chatchannel,
#chatall {
  height: inherit;
  overflow-y: auto;
  text-align: left;
  word-wrap: break-word;
}

#chat {
  /*height: calc(100% - 121px);*/
  text-align: left;
  word-wrap: break-word;
}

#chat-bar {
  margin: 0;
  overflow-x: hidden;
  width: 98%;
}

#chat-btn i {
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

ul #chat-log {
  color: white;
  /*padding: 0px 0px 0px 11px !important;*/
}

#chat li {
  margin-left: 5px;
}

#chat-input {
  /*background-color: rgba(0,0,0,0.1);*/
  border-top: 1px solid grey;
  border-bottom: 1px solid grey;
  height: 46px;
}

#search_loader {
  height: 64px;
  display: flex;
  justify-content: center;
  /* padding: 15px 15px; */
  /* margin-top: 15px; */
  align-items: center;
}

.search_results {
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  width: 100vw;
  top: 64px;
  /* height: 100vh; */
}

.results-tabs li {
  width: 50%;
  text-align: center;
}

.results-tabs .indicator {
  height: 2px;
  z-index: 9;
  position: absolute;
  margin-left: -16px;
  margin-top: 64px;
  width: 50%;
}

#results_soundcloud {
  padding: 0;
}

#results_soundcloud #inner-results {
  height: calc(100vh - 64px - 64px);
}

#search_loader_inner {
  display: flex;
}

.playlist_loader_padding {
  padding: 10px 0px 0px 70px;
  background-color: white !important;
}

#search_loader:hover {
  background-color: rgba(0, 0, 0, 0);
}

.progress .indeterminate {
  background-color: #26a69a !important;
}

.channel_preloader {
  background-color: #2d2d2d;
}

.channel_preloader .indeterminate {
  background-color: white !important;
}

#player_overlay {
  background-color: black;
  position: absolute;
  /*top: calc(-100vh + 64px + 26px);*/
  top: 0px;
  z-index: 99;
  width: 100%;
  color: white;
  height: calc(100vh - 64px - 32px);
  transition: transform 0.5s ease-out, width 0.5s ease-out, height 0.5s ease-out,
    opacity 1s;
  -moz-transition: transform 0.5s ease-out, width 0.5s ease-out,
    height 0.5s ease-out, opacity 1s;
  -o-transition: transform 0.5s ease-out, width 0.5s ease-out,
    height 0.5s ease-out, opacity 1s;
}

#player_overlay_text {
  width: 100%;
}

#searchform {
  width: 50%;
  margin-left: 25%;
}

nav .zbrand.channel-logo-container {
  overflow: visible;
}

.channelpage {
  background-color: #2d2d2d;
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
  transition: background-color 0.5s ease;
}

.main {
  width: 100%;
  max-width: 100%;
  margin: 0px;
  padding: 0px;
}

#nav {
  background-color: #2d2d2d;
}

.control-list {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
}

.title-container {
  position: initial;
  display: inline-block;
  margin-top: initial;
  width: 65%;
  width: calc(90% - 180px - 130px);
  left: 25%;
}

.title-container li {
  height: 64px;
  height: 100%;
  padding: 0 15px;
  width: 100%;
}

.search-container {
  display: block;
}

.song-title {
  font-size: 22px;
  font-weight: 300;
}

.second-title {
  width: 100%;
}

.second-title-container {
  padding: 0 10%;
  width: 100%;
}

#playlist {
  /*padding:0px 15px;*/
  flex: 1;
  z-index: 9;
  position: relative;
  height: calc(100vh - 64px);
  min-width: 338px;
  /*background-color:rgba(0,0,0,0.2);*/
}

.castButton {
  /* display: none; !important*/
  height: 32px;
  width: 32px;
  padding-top: 3px;
  padding-bottom: 2px;
  background: transparent;
  border: none;
  float: right;
  --disconnected-color: white;
  --connected-color: #ff9800;
}

.castButton:focus {
  background: transparent;
}

.castButton-white-active {
  --connected-color: white !important;
}

.castButton-unactive,
.castButton-unactive:active,
.castButton-unactive:focus,
.castButton-unactive:hover,
.castButton-active,
.castButton-active:active,
.castButton-active:hover,
.castButton-active:focus {
  width: 33px;
  height: 33px;
  float: right;
  /*margin: 0px 25px 0px -10px;*/
  background: transparent;
  border: none;
  background: transparent;
  color: white;
  border: none;
  font-size: 18px;
  /*padding-right: 1%;*/
}

.castButton-unactive i,
.castButton-active i {
  font-size: 20px;
  margin-top: 3px;
}

/*.castButton-active, .castButton-active:active, .castButton-active:hover, .castButton-active:focus{
font-size: 5rem;
margin-top: -70px;
margin-right: 52%;
}*/

.chat-link {
  -webkit-transition: color 1s;
  -moz-transition: color 1s;
  -o-transition: color 1s;
  transition: color 1s;
}

#player {
  height: 95%;
  height: calc(100% - 32px);
  position: relative;
  transform: translate(0%, 0%);
  z-index: 99;
  opacity: 0;
  -webkit-transition: transform 0.5s ease-out, width 0.5s ease-out,
    height 0.5s ease-out, opacity 1s;
  transition: transform 0.5s ease-out, width 0.5s ease-out, height 0.5s ease-out,
    opacity 1s;
  -moz-transition: transform 0.5s ease-out, width 0.5s ease-out,
    height 0.5s ease-out, opacity 1s;
  -o-transition: transform 0.5s ease-out, width 0.5s ease-out,
    height 0.5s ease-out, opacity 1s;
}

#fireplace_player {
  z-index: 999;
  /*width: calc(100% - .75rem);*/
  height: calc(100% - 32px);
  position: absolute;
  display: none;
  pointer-events: none;
}

.chan {
  padding-right: 10px;
  /*max-width:22vw;*/
  text-shadow: 4px 4px 9px rgba(0, 0, 0, 0.42);
}

.nav-btn {
  transition: background-color 0.2s;
  min-width: 50px;
  float: right;
  text-align: center;
  display: flex;
  justify-content: center;
  cursor: pointer;
}

.settings-hamburger {
  min-width: 50px;
}
.nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.6);
}
.hover-text {
  display: none;
}
.nav-btn:hover > .hover-text {
  display: flex;
  justify-content: center;
}

nav ul li:hover,
nav ul li.active {
  background-color: rgba(0, 0, 0, 0.1);
}

.song-title:hover,
.search-container:hover {
  /* background-color: rgba(0,0,0,0.1); */
  -webkit-filter: brightness(90%);
  filter: brightness(90%);
  background-color: inherit;
}

.change_user_pass:hover,
.delete-all:hover {
  background-color: initial;
}

.list-image,
.list-suggested-image {
  width: 34%;
  height: 100%;
  float: left;
}

.add-suggested {
  height: 100%;
  width: 90%;
}

.list-image:after {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  font-family: "Material Icons";
  content: "thumb_up";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  color: white;
  font-size: -webkit-xxx-large;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  /*transition: all .1s ease;*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-suggested-image:after {
  font-family: "Material Icons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "check";
  color: white;
  font-size: calc(100vh / 15);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: all 0.1s ease;
}

.vote-container,
.deleted-vote-container {
  height: 100%;
  width: 90%;
}

.vote-container:hover .list-image:after,
.add-suggested:hover .list-suggested-image:after {
  opacity: 1;
}

.vote-span {
  opacity: 0.7;
  padding: 0 0 0 10px;
  color: white !important;
}

.list-song .card-content {
  padding: 0;
}
.list-title {
  display: block;
  color: white;
  font-size: 1em;
  text-align: left;
  padding: 0 10px 0 10px;
  line-height: 2.6rem;
  /* width: 57%; */
}

.add-suggested .card-content .list-title {
  /*line-height: 3.5rem;*/
}

.card-image {
  cursor: pointer;
}
.card {
  margin: 2.5px 0 2.5px 0 !important;
  overflow: hidden;
  transition: box-shadow 0s;
}
.list-song {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.04);
  color: white;
  font: 12px Arial, sans-serif;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s;
  height: 66px;
  margin: 2.5px 0 2.5px -1px !important;
}
.filtered-search-element {
  background-color: #2d2d2d;
  display: flex;
}
.card:hover {
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.16), 0 5px 10px 0 rgba(0, 0, 0, 0.12);
}
.result img {
  float: left;
  height: 70px;
  width: 124.44px;
  border-radius: 3px;
  margin: 15px 20px;
}

.result-info-title-length {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.result {
  height: 100px;
  /*margin-left: 40px;
    margin-right: 40px;*/
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.result-info-buttons {
  width: 13rem;
}

.chan-card {
  margin-bottom: 20px;
}

.result-info-no-buttons {
  display: flex;
  width: calc(100% - 13rem);
  align-items: center;
}

.thumb-and-info {
  display: flex;
  flex-direction: row;
}

#add-many {
  float: none;
  color: white;
}
#add-many:hover {
  color: orange;
}
#add-many i {
  line-height: 36px !important;
}

.open-externally {
  float: none;
  color: white;
}

.open-externally:hover {
  color: orange;
}

.open-externally i {
  line-height: 36px !important;
}

#results {
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  width: 100%;
  top: 64px;
  max-height: calc(100vh - 128px);
  overflow: overlay;
  overflow-x: hidden;
  /* z-index: 99999999; */
}

#results_soundcloud {
  max-height: calc(100vh - 64px - 64px);
}
.result:hover,
.hoverResults {
  background-color: rgba(0, 0, 0, 0.4);
}

.search-title {
  height: 40px;
  width: 70vw;
  /*padding-top: 33px;
    margin-bottom: -16px;
    line-height: initial;*/
}

.list-remove {
  width: 70px;
  /*margin-top: -19px;*/
  font-size: 12px;
  display: inline-table;
  float: right;
  padding-left: 10px;
  height: 100%;
}

.playlist-element .list-remove {
  display: flex;
  justify-content: center;
  align-items: center;
  /*margin-top: -32px;*/
  margin-left: 0px;
  width: 10%;
}

.tap-target {
  color: white;
  background-color: #2d2d2d;
}

.tap-target-wave::before,
.tap-target-wave::after {
  background-color: grey;
}

.playlist-element .list-remove a {
  color: white !important;
  margin-right: 0px !important;
}

.list-song .card-action {
  border-top: none !important;
  background: transparent;
  font-size: 1em;
}

.delete_button,
.del_suggested,
.del_user_suggested {
  position: absolute;
  text-align: right;
  right: -35%;
  /* top: 45%; */
  height: 19px;
  font-size: 0.85rem;
  line-height: normal;
  padding: 2px 12px !important;
  color: white !important;
  background: transparent;
  width: initial;
  border-top: 1px solid rgba(160, 160, 160, 0.2);
}

.result {
  /*border-bottom: solid 1px rgba(229, 229, 229, 0.5);*/
  cursor: pointer;
  /*width:93%;*/
}
.result_info {
  opacity: 0.8;
  margin-left: -144.44px;
  margin-top: 64px;
  margin-right: 90px;
  background: black;
  height: 21px;
  padding: 0px 7px;
  line-height: initial;
  border-top-right-radius: 3px;
  display: flex;
  align-items: center;
}

#suggestions {
  padding-bottom: 20px;
  min-height: calc(100vh - 64px - 64px - 87px);
}

#wrapper.tabs_height,
#suggestions.tabs_height {
  height: calc(100vh - 48px - 64px - 32px);
  overflow: auto;
}

#wrapper.tabs_height {
  overflow: hidden;
}

.client-wrapper {
  height: calc(100vh - 48px - 64px) !important;
}

.host-mode-wrapper {
  height: calc(65vh - 48px + 15px) !important;
}

#host-title {
  color: white;
  position: absolute;
  z-index: 999999;
  padding: 20px;
  font-size: 1.5rem;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  text-align: left;
}

/** settings **/

.admin-information {
  padding-right: 1em;
  margin-left: 2em;
}

.switch-text {
  font-size: 13px !important;
  padding: 0 !important;
  margin-left: 2em;
  color: #444;
}

#settings-button {
  color: white !important;
}

.admin-settings {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

#context-menu-overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 99999999;
}

.context-menu-list {
  z-index: 999999999 !important;
  position: absolute;
  background: #2d2d2d;
  border: 1px solid #2d2d2d;
  width: 200px;
  border-radius: 3px;
}

.context-menu-separator {
  background: white !important;
  height: 1px;
  padding: 0px !important;
}

.context-menu-item {
  color: white;
  padding: 5px 15px;
  background: #2d2d2d;
  cursor: pointer;
}

.context-menu-item:hover {
  background: rgba(0, 0, 0, 0.5);
}

.context-menu-item.context-menu-hover {
  background: #484848;
}

.context-menu-item.context-menu-disabled {
  background-color: #353535 !important;
  cursor: auto;
}

.close-settings {
  float: right;
  width: 73px;
  text-align: center;
  display: flex;
  align-items: center;
  height: 64px;
}

.setting-text {
  font-size: 13px !important;
  padding: 0 !important;
}
.switch {
  display: flex;
  float: right;
  /*position: absolute;*/
  margin-right: 10px;
}
.switch label .lever {
  background-color: #00b2ff;
}

.switch label input[type="checkbox"]:checked + .lever {
  background-color: #5adb74;
}

.switch label input[type="checkbox"]:checked + .lever:after {
  background-color: white;
}
.switch input[type="checkbox"][disabled] + .lever,
.switch label input[type="checkbox"]:checked[disabled] + .lever {
  cursor: default;
  background-color: #939393;
}

.switch label {
  color: #848484;
}

.collapsible-body ul li.white-bg {
  background-color: white !important;
}

.left-span,
.right-span {
  display: inline-block;
  width: 40px;
  text-align: center;
}

.time_color {
  color: lightgrey;
}

#admin-lock,
#strict-skip-lock {
  position: absolute;
  display: flex;
  align-self: center;
}

.ui-resizable-e {
  width: 15px;
  cursor: col-resize;
}

.rounded-bottom {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.rounded-top {
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

.polyfill-color {
  border: none;
  background: white;
  border-radius: 2px;
  padding: 12px 12px 0px 12px;
  min-width: 300px;
  display: flex;
  justify-content: center;
}

.sp-picker-container {
  width: auto;
}

.sp-container button,
.sp-container button:hover,
.sp-container button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: black;
  font-size: inherit;
  line-height: inherit;
  box-shadow: none;
}

.sp-replacer {
  border: none;
  background: none;
}

#embed.modal.open {
  overflow-y: visible;
}

#top-button,
#bottom-button {
  color: white;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  background-color: #2d2d2d;
  width: 70px;
  height: 27px;
  z-index: 1;
  cursor: pointer;
}

#top-button {
  top: 0px;
}

.top-button-with-tabs {
  top: 48px !important;
}

#bottom-button {
  bottom: 35px;
}

/************** Youtube controls **************/

#controls {
  overflow: hidden;
  z-index: 99999999999;
  opacity: 0;
  height: 32px;
  /* background-color:rgba(255, 255, 255, 0.1); */
  width: 100%;
  color: white;
  margin-top: -6px;
}

.playbar {
  color: white;
}

.playbar-btn {
  cursor: pointer;
  transition: background-color 0.2s;
}

.playbar-btn:hover {
  background-color: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.5);
}

#playpause,
#duration,
#volume-button {
  float: left;
  color: white;
}

.prev.playbar,
#playpause,
.skip.playbar {
  padding: 0 2.5px;
}

.skip.playbar,
.prev.playbar {
  float: left;
  font-size: 24px;
  cursor: pointer;
  height: 32px;
  line-height: 31px;
  padding-top: 3px;
}

.margin-playbar {
  margin-left: 10px;
}

.skip_next_client {
  float: left;
}

#volume-button {
  padding-top: 3px;
  padding-left: 2px;
  padding-right: 5px;
  margin-left: 5px;
}

#playpause:hover,
#volume-button:hover,
#fullscreen:hover,
#addToOtherList {
  color: rgba(255, 255, 255, 0.5);
}

#fullscreen,
#addToOtherList {
  float: right;
  color: white;
  margin-right: 0px;
  /* margin-top: 2px; */
  padding-top: 4px;
  padding-right: 3px;
  padding-left: 3px;
}

#addToOtherList {
  margin-right: 5px;
  height: 100% !important;
}

#duration,
#viewers {
  margin-top: 5px;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  margin-left: 15px;
}

#viewers {
  float: right;
  height: 32px;
  line-height: 33px;
  display: flex;
  align-items: center;
  margin: 0px;
  padding-right: 1%;
}

#viewers .material-icons {
  margin-right: 5px;
}

#play,
#pause,
#volume-button,
#fullscreen,
#addToOtherList {
  font-size: 24px;
  cursor: pointer;
  height: 32px;
  line-height: 31px;
}

.ui-slider-vertical {
  width: 0.8em;
  height: 100px;
}
.ui-slider {
  position: relative;
  text-align: left;
}

.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}
.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
  border-radius: 0px !important;
}
.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}

.ui-slider-vertical .ui-slider-handle {
  left: -0.3em;
  margin-left: 0;
  margin-bottom: -0.6em;
}
.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}
.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -0.3em;
  margin-left: -0.6em;
}

#volume,
#volume-control-remote {
  border-radius: 10px;
  cursor: pointer;
  float: left;
  position: relative;
  left: 10px;
  margin: 13px auto;
  height: 5px;
  width: 75px;
  /*background-color:rgba(0, 0, 0, 0.5);*/
  background: rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
  border: none;
  outline: none;
  /*border-radius: 2px;*/
}

#volume.rc,
#volume-control-remote {
  width: 100%;
  height: auto;
  margin-top: 30px;
  background: darkgrey;
}

#volume.vertical {
  border-radius: 0px;
}

#volume .volume-slid,
#volume-control-remote .volume-slid-remote {
  border-radius: 10px;
  background: white;
  height: 5px;
  width: 0%;
}

#volume.rc .volume-slid,
#volume-control-remote .volume-slid-remote {
  background: black;
}

#volume .volume-slid.vertical {
  width: 100%;
  height: 0%;
  border-radius: 0px;
  bottom: 0px;
  position: absolute;
}

#volume .volume-handle,
#volume-control-remote .volume-handle-remote {
  height: 15px;
  width: 15px;
  background: white;
  border-radius: 15px;
  border: 1px solid lightgrey;
  margin-top: -9.75px;
  position: absolute;
  left: 0%;
  margin-left: -5.75px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

#volume.rc .volume-handle,
#volume-control-remote .volume-handle-remote {
  background: black;
}

#volume .volume-handle.vertical {
  bottom: 0%;
  display: none;
}

#volume .volume-handle.ui-state-active,
#volume .volume-handle-remote.ui-state-active {
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01),
    0 0 0 7px rgba(255, 255, 255, 0.3);
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 21px;
  background: #dadada;
}

#volume.rc .volume-handle.ui-state-active,
#volume .volume-handle-remote.ui-state-active {
  background: #2d2d2d;
}

#volume-control-remote .ui-state-active,
#volume-control .ui-state-active {
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.01), 0 0 0 15px rgba(1, 1, 1, 0.15);
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 21px;
  background: #464646 !important;
}

.play {
  background-size: auto;
  width: 55px;
  height: 27px;
}

.pause {
  background-size: auto;
  width: 55px;
  height: 27px;
}

.embed-preview iframe {
  border: none;
}

.disabled-vote {
  cursor: not-allowed !important;
  background: rgba(255, 255, 255, 0.2);
}

.hide {
  display: none !important;
}
.google-play-image-list a {
  padding-left: 0px !important;
}

.google-play-image-list {
  margin-left: -17px;
  width: calc(17rem + 26px);
}

.google-play-image-list a img {
  width: 100%;
}

.apple-appstore-image-list {
  margin-left: -16px;
  width: calc(17em + 32px);
  margin-top: -8px;
}

#join-sidebar #share-join-qr {
  height: 25vh;
}

.apple-image-link {
  padding-left: 0 !important;
}

.apple-appstore-image-list a img {
  width: 100%;
  padding: 0 23px 0 14px;
}
#bar {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

#offline-info,
#host-info {
  color: black;
  line-height: 20px;
  margin: 0 24px;
  padding-bottom: 15px;
}

.host-mode-height {
  height: 100vh !important;
}

.host-mode-height #player_overlay {
  height: calc(100vh - 32px);
}

.host-mode-width {
  width: 100vw !important;
}

#seekToDuration,
#addToListInput {
  position: absolute;
  background: #2d2d2d;
  color: white;

  padding: 10px 8px;
  z-index: 2000;
  background-color: #2d2d2d;
  border-radius: 2px;
  color: #fff;
  min-height: 36px;
  text-align: center;
  max-width: calc(100% - 4px);
  pointer-events: none;
}

#addToListInput {
  top: -125px;
  right: 10px;
  z-index: 999999;
  pointer-events: all;
}

#addToListInput .input-field {
  margin-right: 25px;
  margin-bottom: 15px !important;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

#addToListInput span {
  color: white;
}

#addToListInput .input-field input {
  color: white;
}

.ewresize {
  cursor: ew-resize;
}

#main_components {
  position: absolute;
  top: calc(100% - 26px);
  width: 100%;
  z-index: 99;
}

.mobile-delete {
  display: none;
}

/* HAMBURGER */

.settings-hamburger {
  cursor: pointer;
}

.room-namer::-webkit-input-placeholder {
  /*color:rgb(155, 155, 155) !important;*/
  -webkit-transition: opacity 0.5s;
  color: lightgrey !important;
}

.result-get-more-info {
  display: none;
}

.result-object {
  border-bottom: solid 1px rgba(229, 229, 229, 0.5);
}

.hamburger-sidenav {
  width: 24px;
  height: 24px;
  position: relative;
  margin: 24px 20px 16px 20px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: position 0.5s ease-in-out;
  -moz-transition: position 0.5s ease-in-out;
  -o-transition: position 0.5s ease-in-out;
  transition: position 0.5s ease-in-out;
  cursor: pointer;
}

.control-list li:last-child:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.hamburger-sidenav span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  border-radius: 0px;
  opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.hamburger-sidenav span:nth-child(1) {
  top: 2px;
}

.hamburger-sidenav span:nth-child(2) {
  top: 8px;
}

.hamburger-sidenav span:nth-child(3) {
  top: 14px;
}

.hamburger-sidenav.open span:nth-child(1) {
  top: 8px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.hamburger-sidenav.open span:nth-child(2) {
  opacity: 0;
}

.hamburger-sidenav.open span:nth-child(3) {
  top: 8px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.mobile-search {
  display: none;
}
.show-only-mobile {
  display: none;
}

.remote-button {
  line-height: 21px;
}

.remote-button i {
  height: 36px !important;
  line-height: 36px !important;
}

#remote-controls {
  font-size: 50px !important;
}

#remote-controls i {
  cursor: pointer;
}

#code-text {
  color: #000;
  text-transform: uppercase;
}
#code-link {
  height: auto !important;
  text-align: center;
  display: block !important;
}

.remote-panel p {
  padding: 0 42px;
  color: #000;
  text-align: center;
  line-height: initial;
}

#code-link + a {
  line-height: normal;
  color: black;
  text-align: center;
}

#volume-control,
#volume-control-remote {
  cursor: pointer;
  float: left;
  position: relative;
  left: 10px;
  margin: 13px auto;
  height: 5px;
  width: 97%;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  outline: none;
  border-radius: 2px;
}

#volume-control .ui-slider-handle,
,
#volume-control-remote .ui-slider-range-min {
  height: 5px;
  width: 75px;
  position: absolute;
  background: rgba(47, 47, 47, 1);
  border: none;
  outline: none;
  border-radius: 2px;
}

#volume-control .ui-slider-range-min,
#volume-control-remote .ui-slider-range-min {
  height: 15px;
  width: 36px;
  background: rgb(255, 44, 44);
  position: absolute;
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: 17px;
  margin-left: -17px;
  margin-top: 0px;
}

.volume-elements {
  display: flex;
}

#volume-control {
  float: none;
  /*width: 90%;*/
  margin: auto;
  margin-left: 10px;
  margin-right: 0;
  margin-top: 30px;
  height: 5px;
  border-radius: 4px;
  margin-bottom: 20px;
  cursor: pointer;
  float: left;
  position: relative;
  background: rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
  border: none;
  outline: none;
}

#volume-control .ui-slider-range-min {
  margin-left: 0px;
  height: 5px;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  border: none;
  outline: none;
}

#volume-control .ui-slider-handle {
  margin-left: -12.5px !important;
  width: 40px;
  margin-top: -3px;
  background: #2d2d2d;
  border: none;
  height: 20px;
  padding: 0;
  border: 1px solid white;
  width: 20px;
  background: #000 50% 50% repeat-x;
  position: absolute;
  cursor: pointer;
  outline: none;
  margin-left: -7.5px;
  border-radius: 1000px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

#volume-control-remote {
  float: none;
  width: 70%;
  margin: auto;
  margin-left: 10px;
  margin-right: 0;
  margin-top: 30px;
  height: 5px;
  border-radius: 4px;
  margin-bottom: 20px;
  cursor: pointer;
  float: left;
  position: relative;
  /* left: 10px; */
  /* margin: 13px auto; */
  /* height:5px; */
  /* width: 75px; */
  /*background-color:rgba(0, 0, 0, 0.5);*/
  background: rgba(0, 0, 0, 0.5) 50% 50% repeat-x;
  border: none;
  outline: none;
  /*border-radius: 2px;*/
}

#volume-control-remote .ui-slider-range-min {
  margin-left: 0px;
  /* margin-top: 0px; */
  /* height:10px; */
  /* background: black; */
  height: 5px;
  /* width: 75px; */
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  border: none;
  outline: none;
}

#volume-control-remote .ui-slider-handle {
  margin-left: -12.5px !important;
  width: 40px;
  margin-top: -3px;
  background: #2d2d2d;
  border: none;
  /* display: none; */
  /* height: 14px; */
  /* width: 10px; */
  height: 20px;
  padding: 0;
  border: 1px solid white;
  width: 20px;
  background: #000 50% 50% repeat-x;
  position: absolute;
  cursor: pointer;
  outline: none;
  /* border: none; */
  margin-left: -7.5px;
  /* margin-top: 0px; */
  border-radius: 1000px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.slider-vol,
.slider-vol-mobile {
  float: right;
  color: black;
  font-size: 22px;
  margin-right: 20px;
  padding-left: 35px;
  margin-top: 22px;
}

.slider-vol-mobile {
  margin-top: 5px;
}

.about-remote {
  padding-top: 50px;
}

.rc {
  display: none;
}

.select-wrapper input.select-dropdown:focus,
input:not([type]):focus:not([readonly]),
input[type="text"]:not(.browser-default):focus:not([readonly]),
input[type="password"]:not(.browser-default):focus:not([readonly]),
input[type="email"]:not(.browser-default):focus:not([readonly]),
input[type="url"]:not(.browser-default):focus:not([readonly]),
input[type="time"]:not(.browser-default):focus:not([readonly]),
input[type="date"]:not(.browser-default):focus:not([readonly]),
input[type="datetime"]:not(.browser-default):focus:not([readonly]),
input[type="datetime-local"]:not(.browser-default):focus:not([readonly]),
input[type="tel"]:not(.browser-default):focus:not([readonly]),
input[type="number"]:not(.browser-default):focus:not([readonly]),
input[type="search"]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid orange;
  -webkit-box-shadow: 0 1px 0 0 orange;
  box-shadow: 0 1px 0 0 orange;
}

input:not([type]):focus:not([readonly]) + label,
input[type="text"]:not(.browser-default):focus:not([readonly]) + label,
input[type="password"]:not(.browser-default):focus:not([readonly]) + label,
input[type="email"]:not(.browser-default):focus:not([readonly]) + label,
input[type="url"]:not(.browser-default):focus:not([readonly]) + label,
input[type="time"]:not(.browser-default):focus:not([readonly]) + label,
input[type="date"]:not(.browser-default):focus:not([readonly]) + label,
input[type="datetime"]:not(.browser-default):focus:not([readonly]) + label,
input[type="datetime-local"]:not(.browser-default):focus:not([readonly])
  + label,
input[type="tel"]:not(.browser-default):focus:not([readonly]) + label,
input[type="number"]:not(.browser-default):focus:not([readonly]) + label,
input[type="search"]:not(.browser-default):focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
  color: orange;
}

.search_input {
  height: 50% !important;
}

.search_input:focus {
  border-bottom: 1px solid #9e9e9e !important;
  -webkit-box-shadow: 0 1px 0 0 #9e9e9e !important;
  box-shadow: 0 1px 0 0 #9e9e9e !important;
}

#search::-webkit-input-placeholder,
#searchFrontpage::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #fff;
}
#search:-moz-placeholder,
#searchFrontpage:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #fff;
  opacity: 1;
}
#search::-moz-placeholder,
#searchFrontpage::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #fff;
  opacity: 1;
}
#search:-ms-input-placeholder,
#searchFrontpage:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #fff;
}

.select-all {
  -webkit-user-select: all !important; /* Chrome 49+ */
  -moz-user-select: all !important; /* Firefox 43+ */
  -ms-user-select: all !important; /* No support yet */
  user-select: all !important; /* Likely future */
}