/* --------------------------------------------------- */
.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
  opacity: 0;
  pointer-events: none;
  width: 5px;
}

*:focus {
	outline: none !important;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

h2 {
	color: rgba(0,0,0,0.8);
  text-align: left;
	font-family: Roboto;
	font-weight: 500;
	line-height: 26px;
}

textarea:focus, input:focus{
  outline: none;
}

.invert {
  -webkit-filter: invert(100%);
  filter: invert(100%);
	transition: filter 0.4s ease-in-out;
}

.hand-cursor {
  cursor: pointer;
}

#loadOverlay{display: none;}

button, input {
  -webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important;
}

.no-select {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.cursor-none {
  cursor: none !important;
}

.box {
  position: absolute;
  left: 0px; right: 0px; bottom: 0px; top: 0px;
}

.grow {flex-grow: 1}

html, body {
  font-family: 'Roboto', sans-serif !important;
  font-size: 100%;
}

html {
  box-sizing: border-box;
}

body{
  background-color: black;
  position: fixed;
  left: 0px; right: 0px; bottom: 0px; top: 0px;
}

#app{
  position: fixed;
  left: 0px; right: 0px; bottom: 0px; top: 0px;
}

.layout-container {
  position: fixed;
  left: 0px; right: 0px; bottom: 0px; top: 0px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.underline {
  text-decoration: underline;
}

.left-column {
  flex-grow: 1;
}

.right-column {
  flex-grow: 1;
}

.form-page {
  display: flex;
  flex-grow: 1;
}

form {
  flex-grow: 1;
  margin: 0px auto;
  flex-direction: column;
}

form h1 {
  margin-top: 20px;
  text-align: center;
}

.video-player-box {
  position: absolute;
  left: 0px; right: 0px; top: 0px; bottom: 0px;
  text-align: center;
  overflow: hidden;
	transition: opacity 0.4s ease-in-out;
  overflow: hidden;
  opacity: 1.0;
}

.video-player {
  object-fit: cover;
}

::-webkit-input-placeholder {
	color: #000000;
  font-weight: 400px;
  opacity: 0.5;
}

.mobile-query {
  display: none;
}

:root {
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}

@media screen and (prefers-color-scheme: light) {
  .invert-when-light {
    filter: invert(1);
  }
  html {
    --background: white;
    --foreground: black;
    --invert-color-50: rgba(0,0,0,0.5);
    --menu-background: #EFEFF4;
    --menu-foreground: #007AFF;
  }
}

@media screen and (prefers-color-scheme: dark) {
  .invert-when-light {
  }
  html {
    --background: black;
    --foreground: white;
    --invert-color-50: rgba(255,255,255,0.5);
    --menu-background: #1C1C1E;
    --menu-foreground: #007AFF;
  }
}

@-prefix-keyframes slide {
  from {height: 0;}
  to {height: 300px;}
}