/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/
/* GENERAL MORPHIC CSS */
/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/
/*-=- html fixes -=-*/
html {
  overflow: visible;
}

textarea.lively-text-input.debug {
  z-index: 20 !important;
  opacity: 1 !important;
  background: rgba(0,255,0,0.5) !important;
}

.hiddenScrollbar::-webkit-scrollbar {
  /* This is the magic bit */
  display: none;
}

.hiddenScrollbar {
  scrollbar-width: none;
}

/*-=- generic morphic -=-*/
.Morph {
  outline: none;
  /*for aliasing issue in chrome: http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome*/
  /* -webkit-backface-visibility: hidden; */

  /*include border size in extent of element*/
  box-sizing: border-box;

  /*don't use dom selection on morphs*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.Morph img {
  -moz-user-select: none;
}

.Tooltip {
  z-index: 3;
}

.Hand {
  z-index: 5;
}

/*-=- halos -=-*/

.Halo {
  z-index: 2;
}

.FlexLayoutHalo, .GridLayoutHalo, .TilingLayoutHalo {
  z-index: auto;
}

.HaloItem:not(.NameHaloItem) {
  /*FIXME: we shouldn't need to hardcode the size...*/
  line-height: 24px !important;
  text-align: center;
  vertical-align: middle;
}

.halo-mesh {
  background-color:transparent;
  background-image: linear-gradient(rgba(0,0,0,.1) 2px, transparent 2px),
  linear-gradient(90deg, rgba(0,0,0,.1) 2px, transparent 2px),
  linear-gradient(rgba(0,0,0,.1) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0,0,0,.1) 1px, transparent 1px);
  background-size:100px 100px, 100px 100px, 10px 10px, 10px 10px;
  background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

/*-=- text -=-*/
.center-text {
  text-align: center;
}

.v-center-text {
  position: relative;
  top: 50%;
}

div.text-layer span {
  line-height: normal;
}

:root {
  --annotation-spacing: 50%;
}

.Text .annotation {
  position: relative;
  float: right;
  top: var(--annotation-spacing);
  text-align: right;
}

.List.clipped .annotation {
  text-overflow: ellipsis;
  overflow: hidden;
  flex-grow: 1;
}

.List.clipped .ListItemMorph .line {
  display: flex;
}

.List.clipped .ListItemMorph .newtext-text-layer.actual {
  width: 100%;
}

.truncated-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*-=- input elements -=-*/

.Popups {
  z-index: 3;
}

input::-webkit-input-placeholder {
  color: rgb(202, 202, 202);
}
input::-moz-placeholder {
  color: rgb(202, 202, 202);
}
input:-ms-input-placeholder {
  color: rgb(202, 202, 202);
}
input:-moz-placeholder {
  color: rgb(202, 202, 202);
}
input:placeholder {
  color: rgb(202, 202, 202);
}

/*-=- input elements -=-*/
.Morph svg .path-point {
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  fill: red;
}

/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/
/* TEXT CSS */
/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/

/* markers */

.newtext-marker-layer {
  position: absolute;
}

/* selection / cursor */

.newtext-cursor {
  z-index: 100;
  pointer-events: none;
  position: absolute;
  background-color: black;
}

.hidden-cursor .newtext-cursor {
  background-color: transparent !important;
}

.newtext-cursor.diminished {
  background-color: gray;
}

.newtext-selection-layer {
  position: absolute;
}

/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/
/* text layer / content */
.font-measure {
  visibility: hidden;
}

.newtext-text-layer {
  box-sizing: border-box;
  position: absolute;
  white-space: pre;
  z-index: 10; /* fixme: hackz */
  min-width: 100%;
  pointer-events: none;
}

.newtext-text-layer.wrap-by-words {
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
}

.newtext-text-layer.only-wrap-by-words {
  white-space: pre-wrap;
  word-break: normal;
  max-width: 100%;
}

.newtext-text-layer.wrap-by-chars {
  white-space: pre-wrap;
  line-break: anywhere;
  max-width: 100%;
}


.newtext-text-layer a {
   pointer-events: auto;
}

.newtext-text-layer .line {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-variant-ligatures: contextual;
  font-variant-ligatures: contextual;
}

.line > .Morph {
  display: inline-block !important;
  vertical-align: top !important;
}

blockquote {
  margin: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
}

.newtext-text-layer blockquote {
  margin-left: 2em;
  margin-right: 2em;
  border-left: 2px lightgray solid;
  padding-left: 2%;
}

.selectable {
  user-select: text;
  pointer-events: all;
}

::selection  {
  background: rgba(212,230,241,0.8);
}

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/
/* debug styling */

.debug-info {
  position: absolute;
  outline: 1px solid green;
  pointer-events: none;
  z-index: 4;
  text-align: center;
  font-family: monospace;
  color: green;
  background-color: rgb(255 255 255 / 80%);
  font-size: small;
  vertical-align: baseline;
}

.debug-line {
  position: absolute;
  outline: 1px solid red;
  pointer-events: none;
  z-index: 4;
  text-align: right;
  font-family: monospace;
  font-size: small;
  vertical-align: baseline;
  color: red;
}

.debug-char {
  position: absolute;
  outline: 1px solid orange;
  pointer-events: none;
  z-index: 3
}

/* https://davidwalsh.name/detect-scrollbar-width */
.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}

/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/
/* SPINNER CSS */
/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-*/

.spinner {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.spinner div {
  transform-origin: 32px 32px;
  animation: spinner .6s linear infinite;
}
.spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3px;
  left: 29px;
  width: 5px;
  height: 14px;
  border-radius: 20%;
  background: white
}
.black-spinner div:after {
  background: black;
 }
.spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -.55s;
}
.spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -.5s;
}
.spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.45s;
}
.spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.4s;
}
.spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.35s;
}
.spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.3s;
}
.spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.25s;
}
.spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.2s;
}
.spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.15s;
}
.spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.1s;
}
.spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.05s;
}
.spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*
BELOW COMES THE NECESSARY CSS FOR https://github.com/paulirish/lite-youtube-embed

Copyright 2019 Paul Irish

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
lite-youtube {
  background-color: #000;
  position: relative;
  display: block;
  contain: content;
  background-position: center center;
  background-size: cover;
  cursor: pointer;
  max-width: 720px;
  top: 50%;
  transform: translateY(-50%);
  position: relative;
}

/* gradient */
lite-youtube::before {
  content: attr(data-title);
  display: block;
  position: absolute;
  top: 0;
  /* Pixel-perfect port of YT's gradient PNG, using https://github.com/bluesmoon/pngtocss plus optimizations */
  background-image: linear-gradient(180deg, rgb(0 0 0 / 67%) 0%, rgb(0 0 0 / 54%) 14%, rgb(0 0 0 / 15%) 54%, rgb(0 0 0 / 5%) 72%, rgb(0 0 0 / 0%) 94%);
  height: 99px;
  width: 100%;
  font-family: "YouTube Noto",Roboto,Arial,Helvetica,sans-serif;
  color: hsl(0deg 0% 93.33%);
  text-shadow: 0 0 2px rgba(0,0,0,.5);
  font-size: 18px;
  padding: 25px 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

lite-youtube:hover::before {
  color: white;
}

/* responsive iframe with a 16:9 aspect ratio
  thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
  content: "";
  display: block;
  padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

/* play button */
lite-youtube > .lty-playbtn {
  display: block;
  /* Make the button element cover the whole area for a large hover/click target… */
  width: 100%;
  height: 100%;
  /* …but visually it's still the same size */
  background: no-repeat center/68px 48px;
  /* YT's actual play button svg */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
  position: absolute;
  cursor: pointer;
  z-index: 1;
  filter: grayscale(100%);
  transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
  border: 0;
}

lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
  filter: none;
}

/* Post-click styles */
lite-youtube.lyt-activated {
  cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
  opacity: 0;
  pointer-events: none;
}

.lyt-visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}