:root {
  --primary-color: #4caf50;
  --secondary-color: #4caf50;
  --background-color: #000;
  --text-color: #fff;
  --text-muted: rgba(255, 255, 255, .75);
  --box-shadow-light: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
  --box-shadow-dark: 0 20px 25px -5px rgba(0, 0, 0, .3), 0 10px 10px -5px rgba(0, 0, 0, .6);
  --border-color-light: rgba(255, 255, 255, .15);
  --border-color-dark: rgb(158 158 161);
  --background-muted: rgba(255, 255, 255, .1);
  --box-shadow-extra-light: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
  --button-hover-scale: 1.2;
  --button-disabled-opacity: .5;
  --tooltip-background: #000;
  --tooltip-text-color: #fff;
  --border-color-hover: rgba(0, 0, 0, .35);
  --launch-background: rgba(255, 255, 255, .1);
  --tooltip-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  --box-shadow-launch: 0 0 10px rgba(0, 0, 0, .1);
  --button-scale-small: .5;
  --button-translate-y: 25%;
  --tooltip-triangle-color: #000;
  --autofill-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset;
  --shortcuts-box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, .1), 0 -1px 2px 0 rgba(0, 0, 0, .06);
  --link-color: #667eea;
}

/* basic text */
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

body.home {
  background-image: url('/assets/geospot/page-background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.3s ease-in-out;
}

h1, h2, h3, h4, h5, h6, 
nav a, 
footer,
input, select, textarea,
#search input,
#form.form-v2 input {
  color: var(--text-color);
}

/* sign up */
.user-avatar.sign-up {
  color: var(--text-color);
}

.user-avatar.sign-up.signed-in::before,
.user-avatar.sign-up.signed-in:hover::before {
  border-color: transparent transparent #888 transparent;
}

.user-avatar.sign-up.signed-in::after,
.user-avatar.sign-up.signed-in:hover::after {
  background-color: #888;
  z-index: 2;
}

.signup {
  background-color: #888 !important;
  background-image: none !important;
}

/* search */
#search,
#search-button {
  background-color: var(--background-muted);
}

/* edit */
#player-editor-toggle {
  background-color: var(--text-color);
}

#image-selector-upload img,
#image-selector-search img,
.ai-add-options img {
  filter: invert(1);
}

.email-preview button img,
#video-player-sharing-create-preview img {
  filter: invert(1);
}

.shortcut img {
  filter: invert(1);
}

/* messages */
#video-player-messages img {
  filter: invert(1);
}

/* launch */
.launch input,
.launch .InputContainer .InputElement,
.launch #card-element {
  background: var(--background-muted);
  color: var(--text-color);
}

body.launch-open .checkout {
  background-image: none;
}

/* nav */
.logo img {
  opacity: 0;
}

.logo {
  background-image: url('/assets/geospot/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(0, 0) !important;
  height: 45px;
}
/* 
.reachtv-faq {
  display: inline-flex;
} */

#video-player-placeholder {
  filter: none !important;
}

.streamr-insights {
  display: none;
}

/* checkout */
#download {
  display: none;
}

.checkout-area.checkout-launch #launch {
  transform: translateX(0) !important;
}

/* my ads */
body .tv-ad {
  border: 1px solid var(--launch-background);
}

body .tv-ad-image {
  background: #000;
}

.tv-ads-main {
  background: var(--launch-background);
}

.tv-ad-more-info *,
.targeting-data-content * {
  color: var(--text-color);
}

.variant-close {
  filter: invert(1);
}

.targeting-data-content .user-avatar {
  color: var(--background-color);
}

#player-draft-toggle {
  border: 1px solid var(--text-color);
  color: var(--background-color);
}

#player-share-toggle {
  border: 1px solid var(--text-color);
  color: var(--background-color);
}

#player-editor-toggle {
  color: var(--background-color);
}

#video-player-drafts-items h4 {
  color: var(--text-color);
  background: var(--background-color);
}

.video-player-drafts-modal {
  background: var(--launch-background);
}

#player-draft-toggle:hover {
  background-position: 173px center;
}

.video-player-draft {
  border: 2px solid var(--launch-background);
}

button#video-player-drafts-close {
  background: var(--background-color);
  color: var(--text-color);
  border: 3px solid var(--text-color);
}

button#video-player-drafts-close:hover {
  background: var(--text-color);
  color: var(--background-color);
}

.logo-picker-img-wrapper {
  background: rgba(255, 255, 255, .5);
}

.white-label-footer {
  display: block;
  width: 100%;
  text-align: center;
}

.hero-subsection {
  text-align: center;
}

#video-player-wrapper {
  border: 4px solid rgb(48 36 28);
}

.video-player-base {
  display: none;
}

.hero-subsection p {
  display: inline-block;
  margin: 10px auto 20px auto;
  font-size: 1.3rem;
  font-weight: 800;
  opacity: 0.9;
  color: #5fff00;
  padding: 7px 40px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

@media screen and (max-width: 920px) {
  .hero-subsection p {
    font-size: 1rem;
    padding: 7px 20px;
  }
}

#search {
  background-color: rgba(0, 0, 0, .75);
  border: 4px solid rgb(48 36 28);
}

#search-button {
  background-color: rgb(207 219 227);
  border: 2px solid var(--border-color-light);
}

#video-player-messages {
  font-size: 1em;
}

body.home.launch-open {
  background-image: url('/assets/geospot/page-background-launch.jpg');
}