/************************************************************************
Copyright (C) Ayushya Amitabh - All Rights Reserved
Unauthorized copying of this file, via any medium is strictly prohibited
Proprietary and confidential
Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020 
https://www.chromewatchparty.com/copyright
=========================================================================
ALL CONTENT ON IN WATCH PARTY'S CHROME EXTENSION APP, UNLESS OTHERWISE
CITED ARE THE SOLE INTELECTUAL PROPERTY OF AYUSHYA AMITABH, AND MAY NOT BE
COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.

Netflix logo is a trademark and intellectual property of Netflix, Inc.
Disney+ logo is a trademark and intellectual property of The Walt Disney Company
Prime logo is a trademark and intellectual property of Amazon.com, Inc.
YouTube logo is a trademark and intellectual property of Google, Inc.
Hulu logo is a trademark and intellectual property of Hulu, LLC.
HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia Direct,LLC.
************************************************************************/
:root {
  --party-width: 400px;
  --neg-party-width: -400px;
  --body-width: calc(100% - var(--party-width));
}
body {
  margin: 0 !important;
  background-color: black;
  transition: max-width ease-in-out 0.35s;
}
body.local {
  background-color: white;
}
body.visible {
  width: var(--body-width);
}
body.visible .watch-party-fab {
  right: var(--party-width) !important;
  transform: translateX(0);
  top: 1.5rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #424242 !important;
  box-shadow: none;
  background-blend-mode: lighten;
}
body.visible .party-notification-container {
  display: block !important;
}

body.netflix.visible .AkiraPlayer, /* NETFLIX */
body.hulu.visible .Player__container,/* HULU */
body.amazon-prime.visible #dv-web-player.dv-player-fullscreen, /* AMAZON PRIME */
body.disney.visible #hudson-wrapper, /* DISNEY */
body.youtube.visible #content.ytd-app, /* YOUTUBE */
body.youtube.visible #masthead-container /* YOUTUBE HEADER */ {
  max-width: var(--body-width) !important;
}
/* HULU MINIMIZED VIDEO */
body.hulu.visible #__player__ .Player__container.Player__container--modal {
  right: calc(var(--party-width) + 2rem) !important;
  z-index: 99999 !important;
}
/* HULU, DISNEY & AMAZON PRIME FIX */
body.disney #party-routes-wrapper,
body.hulu #party-routes-wrapper,
body.amazon-prime #party-routes-wrapper {
  width: var(--party-width) !important;
  height: 100% !important;
}
/* DISNEY FULL SCREEN VIDEO FIX */
body.disney #hudson-wrapper {
  left: 0;
}
/* YOUTUBE VIDEO SIZING FIX */
body.youtube.visible video {
  max-width: 100%;
  height: auto !important;
}
body.youtube.visible .ytp-chrome-bottom {
  max-width: 100% !important;
  width: calc(100% - 24px) !important;
}
body.youtube.visible .ytp-chapter-hover-container {
  max-width: 100% !important;
}
body.youtube.visible .ytp-tooltip.ytp-bottom.ytp-preview {
  bottom: 100px !important;
  top: unset !important;
}
body.youtube.visible td-two-column-browse-results-renderer.grid:not(.grid-disabled) {
  max-width: calc(100% - 48px);
}
/* AMAZON STYLING FIX */
body.amazon-prime #party-routes-wrapper input,
body.amazon-prime #party-routes-wrapper textarea {
  background-color: transparent !important;
  border: initial !important;
  box-shadow: none !important;
}
body.amazon-prime input.MuiInputBase-input {
  height: 24px !important;
  padding: 6px !important;
}
body.amazon-prime input.MuiFilledInput-inputAdornedEnd {
  padding-right: 0 !important;
}
body.amazon-prime input.MuiFilledInput-input {
  padding: 27px 12px 10px !important;
}
body.amazon-prime input:focus,
body.amazon-prime textarea:focus {
  border: none !important;
  box-shadow: none !important;
}
/* PEACOCK STYLING FIX */
body.peacock.visible .header-buttons {
  max-width: calc(100% - calc(var(--party-width) + 50px));
}
body.peacock.visible #mount {
  position: relative;
}
body.peacock.visible .playback-overlay__container.vod {
  position: absolute;
  max-width: 100%;
}
body.peacock.visible .playback-header__container {
  position: relative;
  max-width: 100%;
}
#party-loading {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
}
#party-loading.inactive .MuiSvgIcon-root {
  font-size: 50px !important;
}
#party-loading.inactive {
  flex-direction: column;
  text-align: center;
  padding: 2rem;
  width: calc(100% - 4rem);
  background: #424242;
  height: calc(100% - 4rem);
  white-space: break-spaces;
}
#party-loading.inactive .MuiTypography-overline {
  font-size: 13px !important;
}
#party-loading.inactive .MuiTypography-caption {
  font-size: 11px !important;
}
#party-routes-wrapper {
  margin: 0;
  position: fixed;
  background-color: rgb(27, 27, 27);
  bottom: 0;
  right: var(--neg-party-width);
  transition: all ease-in-out 0.3s;
  width: var(--party-width);
  height: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  z-index: 9999;
}
#party-routes-wrapper.visible {
  right: 0;
}
.party-notification-container {
  z-index: 99999 !important;
  bottom: 0.8rem !important;
  right: 1rem !important;
  width: calc(var(--party-width) - 2rem) !important;
}
.party-notification-container .MuiPaper-root {
  color: white;
  background-color: black;
  font-size: 1rem !important;
}
@keyframes showbutton {
  0% {
    right: 1rem;
  }
  50% {
    transform: scale(5) translateX(-100%) translateY(-100%);
  }
  100% {
    right: -1rem;
    transform: scale(1);
  }
}
.watch-party-fab {
  z-index: 9999;
  position: fixed !important;
  bottom: 1rem !important;
  right: -2rem !important;
  border: 1px solid white;
  background-color: black !important;
  /* background-image: url('/android-icon-192x192.png'); */
  background-image: url('chrome-extension://__MSG_@@extension_id__/android-icon-192x192.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 75%;
  animation-name: showbutton;
  animation-iteration-count: 1;
  animation-duration: 2s;
  transition: all ease-in-out 0.3s !important;
}
.watch-party-fab:hover {
  right: 0rem !important;
  background-size: 90%;
}
.watch-party-fab .fab-logo {
  max-width: 75%;
  max-height: 75%;
}

.party-create-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #424242;
  padding: 0;
}
.party-create-container .brand-title {
  padding: 36px;
}

.party-create-container .create-input-card {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  margin: 0;
  flex: 1;
  display: flex;
  justify-content: center;
  background: #424242;
}
.create-input-card * {
  font-size: 12px !important;
}
.party-create-container .create-input-card .create-mode-select {
  margin-bottom: 36px;
}
.party-create-container .create-input-card .create-name,
.party-create-container .create-input-card .create-pin {
  margin-bottom: 1rem;
}
.party-create-container .create-input-card {
  background-color: #2d2d2d;
}
.create-bottom-card {
  background-color: #202020;
  padding: 30px 15px;
  display: flex;
  justify-content: space-evenly;
}
.create-bottom-card * {
  letter-spacing: 1.5px !important;
  font-size: 11px;
}
.create-bottom-card a:hover {
  color: #c0f300;
}
.thread-container {
  max-height: 100%;
  flex: 1;
  overflow-y: auto;
  margin-bottom: 1rem;
  padding: 0 15px;
  margin-top: 1rem;
}
.room-title {
  text-overflow: ellipsis !important;
  word-break: break-word !important;
  overflow: hidden !important;
  padding-right: 1rem !important;
  font-size: 18px !important;
}
.thread-container::-webkit-scrollbar {
  width: 5px;
}
.thread-container::-webkit-scrollbar-track {
  background-color: rgb(90, 90, 90);
  border-radius: 1rem;
}
.thread-container::-webkit-scrollbar-thumb {
  background-color: rgb(180, 180, 180);
  border-radius: 13px;
}
textarea::-webkit-scrollbar {
  display: none;
}
.chat-message-box {
  flex: 1;
}
.chat-message-box > div {
  border-radius: 26px;
  background-color: #424242;
}
.chat-message-box .MuiFormHelperText-root {
  font-size: 10px !important;
}
.chat-message-box textarea {
  min-height: 12px !important;
  font-size: 12px !important;
}

.party-chat-container {
  display: flex;
  max-height: 100%;
  flex-direction: column;
  flex: 1;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.party-chat-header {
  display: flex;
  align-items: flex-start;
  padding-left: 0;
  flex-direction: column;
}

.party-chat-header .expander {
  flex: 1;
  width: 100%;
  margin-bottom: 0 !important;
}
.party-chat-header .expander .MuiExpansionPanelDetails-root {
  flex-direction: column;
}

.party-chat-header-text {
  flex: 1;
}
.party-chat-header-text .brand-title {
  font-size: 10px;
}
.party-controls {
  margin-top: 18px;
}
.party-controls .MuiButton-startIcon {
  margin-right: 0px !important;
}
.party-control-button-text {
  font-size: 10px !important;
  display: none;
}
.party-controls button:hover .party-control-button-text {
  display: initial;
}
.party-controls button:hover .MuiButton-startIcon {
  margin-right: 8px !important;
}
.party-controls-users-container {
  max-height: 100px;
  overflow-y: auto;
}
.party-controls-users-container::-webkit-scrollbar-thumb {
  background-color: #c0f300 !important;
  border-radius: 13px;
}
.party-controls-users-container::-webkit-scrollbar {
  width: 5px;
}
.party-controls-users-title {
  margin-top: 25px !important;
}
.party-controls-users-chip {
  font-size: 11px !important;
  letter-spacing: 1.1px !important;
  margin-bottom: 3.5px !important;
  margin-right: 7px !important;
}
.media-info-card {
  width: 100%;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  padding: 0 24px !important;
  padding-bottom: 12px !important;
  box-sizing: border-box !important;
}
.media-info-card .MuiCardContent-root {
  padding: 0 !important;
}
.party-controls-users-title,
.media-info-at {
  font-size: 10px !important;
  padding-left: 3px !important;
}
.media-info-container {
  display: flex;
  flex-direction: row;
}
.media-info-icon {
  width: 48px !important;
  height: 48px !important;
}
.media-info-right {
  flex: 1;
  padding-left: 1rem;
}
.media-info-right .show-name {
  font-size: 12px;
  line-height: 16px;
  white-space: break-spaces !important;
}
.media-info-link {
  color: inherit !important;
  font-size: 10px !important;
}

.giphy-carousel::before {
  position: relative;
  bottom: 40%;
  content: url('./Giphy.png');
}
.giphy-carousel {
  margin-top: 1rem;
  min-height: fit-content;
}
.giphy-carousel img {
  border-radius: 1rem;
  transform: scale(0.85);
  transition: all ease-in-out 0.2s;
  opacity: 0.7;
}
.giphy-carousel img:hover {
  opacity: 1;
  transform: scale(0.9);
}

.giphy-carousel::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.giphy-carousel::-webkit-scrollbar-track {
  background-color: rgb(90, 90, 90);
  border-radius: 1rem;
}
.giphy-carousel::-webkit-scrollbar-thumb {
  background-color: rgb(118, 182, 255);
  border-radius: 13px;
}
.message-send svg {
  transform: scale(0.55);
  transition: all ease 0.5s !important;
}
.message-active svg {
  transform: rotate(-90deg) scale(0.75);
}
.message-send.gif-active {
  display: none !important;
}
.text-phone-panel {
  display: flex;
  align-items: center;
  margin: 0 15px 15px 15px;
  border-radius: 26px;
}

.MuiTooltip-popper {
  z-index: 99999 !important;
}
.MuiTooltip-popper * {
  font-size: 1rem !important;
}

.MuiFormControlLabel-root.notification-switch {
  margin-top: 18px;
}

body.amazon-prime .notification-switch .MuiSwitch-thumb {
  position: absolute !important;
  top: 9px !important;
}

.notification-switch .MuiTypography-body1 {
  font-size: 12px !important;
}

.share-textbox textarea {
  font-size: 12px !important;
  height: 34px !important;
  line-height: 1.5 !important;
}

.share-textbox label {
  font-size: 12px !important;
}

.alerts-container {
  margin: 5px 0;
}

.alert-card-content {
  display: flex;
  padding: 5px !important;
}

.alert-card-content p {
  padding-left: 5px;
  font-size: 10px;
  line-height: 1.5;
  display: flex;
  letter-spacing: 1.1px;
  align-items: center;
}

.mic-permission-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: block;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  color: white;
  font-size: 95px;
}