@import "fontawesome.css";
@import "reset.css";

/*----------------*/

.no_transition * {
  -webkit-transition: none !important;
  transition: none !important;
}

input[type=file] {
  display: none;
}

.warning {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--background-color);
  z-index: 9999;
}

.warning p {
  max-width: 75vw;
}

.hidden {
  display: none !important;
}

.invisible {
  opacity: 0 !important;
}

.button {
  display: inline-block;
  padding: 6px 8px;
  min-width: 4rem;
  border: 1px solid var(--border-color);
  -webkit-transition: color 0.2s ease, border-color 0.2s ease;
  transition: color 0.2s ease, border-color 0.2s ease;
  font-size: 0.9em;
  text-align: center;
}

.button:active {
  color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
}

input[type=number],
input[type=text] {
  padding: 6px 8px;
  width: 8rem;
  border: 1px solid var(--border-color);
  -webkit-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
  font-size: 0.9em;
  text-align: center;
}

input[type=number]:focus,
input[type=text]:focus {
  border: 1px solid var(--theme-color);
}

.setting_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0.65rem 0;
  width: 100%;
}

.setting_item i::before {
  text-align: center;
}

.range {
  --height: 0.75rem;

  background: transparent;
  outline: none;
}

.range::-webkit-slider-runnable-track {
  height: var(--height);
  background: #A0A0A0;
  border-radius: 50px;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: calc(var(--height) * 1.5);
  height: calc(var(--height) * 1.5);
  margin-top: calc(0rem - var(--height) / 4);
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 50px;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

.range::-moz-range-track {
  height: var(--height);
  background: #A0A0A0;
  border-radius: 50px;
}

.range::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  width: calc(var(--height) * 1.5);
  height: calc(var(--height) * 1.5);
  margin-top: calc(0rem - var(--height) / 4);
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 50px;
  -moz-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}

.range:disabled {
  opacity: 0.75;
}

/*----------------*/

:root {
  --dialog-background: #FFFFFF;
}

body {
  --tp-size: 1rem;
  --tp-alpha: 127;
  --tp-color-r: 255;
  --tp-color-g: 255;
  --tp-color-b: 255;
  --tp-border-color-r: max(calc(var(--tp-color-r) - 75), 30);
  --tp-border-color-g: max(calc(var(--tp-color-g) - 75), 30);
  --tp-border-color-b: max(calc(var(--tp-color-b) - 75), 30);
  --tp-scale: 1;
  --tp-shadow-r: var(--tp-color-r);
  --tp-shadow-g: var(--tp-color-g);
  --tp-shadow-b: var(--tp-color-b);

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: color 0.2s ease, background 0.2s ease;
  transition: color 0.2s ease, background 0.2s ease;
}

body.dark_mode {
  --text-color: #F0F0F0;
  --background-color: #1A1A1A;
  --dialog-background: #252525;
}

.hidden_2 {
  display: none;
}

body[s-lang=zh] #about_zh {
  display: initial !important;
}

body[s-lang=en] #about_en {
  display: initial !important;
}

.tips_en {
  display: none;
}

body[s-lang=en] .tips_en {
  display: initial !important;
}

.fas::before {
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.fas:active::before {
  color: var(--theme-color) !important;
}

nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 calc((100vw - var(--main-width)) / 2);
  width: 100%;
  height: 50px;
  border-bottom: 1px solid var(--border-color);
}

nav .title {
  font-size: 1.15em;
}

main {
  padding: 2.5vw 0;
  width: var(--main-width);
  min-height: calc(100vh - 50px);
  word-wrap: break-word;
}

main>* {
  margin: 0.65rem 0;
  border: 1px solid transparent;
}

main,
#outer_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

#outer_container {
  --ui-spacing: 0.6em;
  --margin: var(--ui-spacing);
  --font-size: 1rem;
  --background-1: rgba(0, 0, 0, 0.65);
  --background-opacity: 0.25;

  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  margin: 0.65rem 0;
  width: 100%;
  background: #252525;
  font-size: var(--font-size);
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#outer_container * {
  color: #F0F0F0;
}

#outer_container>*:not(#container) {
  position: absolute;
  text-align: center;
}

#outer_container i::before {
  display: inline-block;
  min-width: 20px;
  text-align: center;
}

#outer_container.playing #play {
  text-shadow: rgba(0, 0, 0, 0.75) 0 0 4px;
}

#speed,
#right_box,
#outer_container.playing #top_control,
#outer_container.playing #bottom_control {
  --background-opacity: 0;
  text-shadow: rgba(0, 0, 0, 0.75) 0 0 4px;
}

#outer_container.playing #progress {
  border-radius: 50px;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.5);
}

#top_control,
#bottom_control {
  -webkit-transition: text-shadow 0.35s ease;
  transition: text-shadow 0.35s ease;
}

#container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

#cover,
#video,
#canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  border: none;
  outline: none;
}

#cover i,
.touchpoint_preview i {
  position: absolute;
  width: var(--tp-size);
  height: var(--tp-size);
  background: rgb(var(--tp-color-r), var(--tp-color-g), var(--tp-color-b));
  opacity: var(--tp-alpha);
  border: calc(var(--tp-size) / 16) solid rgba(var(--tp-border-color-r), var(--tp-border-color-g), var(--tp-border-color-b));
  border-radius: 50px;
  -webkit-transform: translateX(-50%) translateY(-50%) scale(var(--tp-scale));
  transform: translateX(-50%) translateY(-50%) scale(var(--tp-scale));
  -webkit-transition: opacity 0.25s;
  transition: opacity 0.25s;
  -webkit-box-shadow: 0 0 0.25em 0.05em rgba(var(--tp-shadow-r), var(--tp-shadow-g), var(--tp-shadow-b), 0.5);
  box-shadow: 0 0 0.25em 0.05em rgba(var(--tp-shadow-r), var(--tp-shadow-g), var(--tp-shadow-b), 0.5);
}

.touchpoint_preview {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: calc(var(--tp-size) * 2);
  height: var(--tp-size);
  background: #252525;
}

.touchpoint_preview i {
  display: block;
  position: relative;
  -webkit-transition: none;
  transition: none;
  -webkit-transform: scale(var(--tp-scale));
  transform: scale(var(--tp-scale));
}

#cover i.removed {
  opacity: 0;
}

#cover {
  z-index: 921;
}

#video {
  z-index: 920;
}

#canvas {
  z-index: 919;
}

#outer_container.horizontal_flipped #video,
#outer_container.horizontal_flipped #canvas {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

#outer_container.vertical_flipped #video,
#outer_container.vertical_flipped #canvas {
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

#outer_container.horizontal_flipped.vertical_flipped #video,
#outer_container.horizontal_flipped.vertical_flipped #canvas {
  -webkit-transform: rotateX(180deg) rotateY(180deg);
  transform: rotateX(180deg) rotateY(180deg);
}

.message {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  padding: var(--ui-spacing);
  top: 50%;
  left: 50%;
  min-width: 40%;
  min-height: 20%;
  background: var(--background-1);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: top 0.35s;
  transition: top 0.35s;
  font-size: 0.9em;
  z-index: 1111;
}

.box_1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  margin: var(--ui-spacing) 0;
}

.box_2>* {
  margin: 0 var(--ui-spacing);
}

#replay {
  margin-top: calc(var(--ui-spacing) * 1.25);
  font-size: 1em;
}

#change_speed {
  font-size: 0.75em;
  z-index: 998;
}

#speed_rate {
  display: inline-block;
  padding: 2px 4px;
  text-align: center;
}

#select_loop {
  z-index: 997;
}

#select_loop_box>* {
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

#select_loop_box .selected {
  color: var(--theme-color);
}

#change_speed,
#select_loop {
  -webkit-transition: top 0.35s;
  transition: top 0.35s;
}

#sidebar_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: left;
  -ms-flex-pack: left;
  justify-content: left;
  overflow-y: scroll;
  padding: var(--ui-spacing) var(--margin) var(--ui-spacing) var(--ui-spacing);
  top: 0%;
  right: 0%;
  width: calc((100% - var(--margin)) * 0.35 + var(--margin));
  height: 100%;
  background: var(--background-1);
  -webkit-transition: right 0.35s;
  transition: right 0.35s;
  z-index: 996;
}

#sidebar_box i::before {
  font-size: 0.9em;
}

#sidebar_box .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  margin-bottom: calc(var(--ui-spacing) / 1.25);
  align-items: center;
  font-size: 0.9em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#sidebar_box .title:not(:first-of-type) {
  margin-top: calc(var(--ui-spacing) / 1.25);
}

#video_settings .setting_item {
  margin: 0;
  font-size: 0.75em;
  overflow: hidden;
}

#video_settings .setting_item span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#video_settings .setting_item:not(:last-of-type) {
  margin-bottom: var(--ui-spacing);
}

#video_settings .button {
  min-width: 4em;
  padding: 3px 0;
  font-size: 0.85em;
}

#bookmark_list {
  -webkit-box-flex: 1;
  -ms-flex: 1 1;
  flex: 1 1;
  position: relative;
  font-size: 0.75em;
}

#bookmark_list>span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #A0A0A0;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.list_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
}

.list_item:not(:last-of-type) {
  margin-bottom: var(--ui-spacing);
}

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

.message.hidden,
#change_speed.hidden,
#select_loop.hidden {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  top: -50%;
}

#sidebar_box.hidden {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  right: calc(((100% - var(--margin)) * 0.35 + var(--margin)) * -1);
}

#play {
  left: var(--margin);
  top: var(--ui-spacing);
  z-index: 995;
}

#right_box {
  right: var(--margin);
  top: 50%;
  -webkit-transition: right 0.35s,
    -webkit-transform 0.2s;
  transition: right 0.35s,
    -webkit-transform 0.2s;
  transition: transform 0.2s,
    right 0.35s;
  transition: transform 0.2s,
    right 0.35s,
    -webkit-transform 0.2s;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 995;
}

#right_box.hidden {
  display: initial !important;
  right: -20%;
}

#right_box>*:not(:last-of-type) {
  margin-bottom: var(--ui-spacing);
}

#speed {
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 999;
}

#speed.fixed {
  top: 50% !important;
  left: var(--margin) !important;
  -webkit-transition: left 0.35s, top 0.35s, -webkit-transform 0.2s ease;
  transition: left 0.35s, top 0.35s, -webkit-transform 0.2s ease;
  transition: transform 0.2s ease, left 0.35s, top 0.35s;
  transition: transform 0.2s ease, left 0.35s, top 0.35s, -webkit-transform 0.2s ease;
}

#top_control,
#bottom_control {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: var(--ui-spacing) var(--margin);
  width: 100%;
  background: rgba(0, 0, 0, var(--background-opacity));
  z-index: 990;
}

#top_control {
  top: 0%;
  -webkit-transition: background 0.35s ease, top 0.35s;
  transition: background 0.35s ease, top 0.35s;
}

#bottom_control {
  bottom: 0%;
  -webkit-transition: background 0.35s ease, bottom 0.35s;
  transition: background 0.35s ease, bottom 0.35s;
}

#top_control.hidden,
#bottom_control.hidden {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

#top_control.hidden {
  top: -20%;
}

#bottom_control.hidden {
  bottom: -20%;
}

#play_2 {
  opacity: 0;
}

#time,
#progress {
  width: 45%;
  font-size: 0.8em;
}

#progress {
  background: transparent;
  outline: none;
}

#progress::-webkit-slider-runnable-track {
  height: var(--ui-spacing);
  background: #A0A0A0;
  border-radius: 50px;
}

#progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: calc(var(--ui-spacing) * 1.5);
  height: calc(var(--ui-spacing) * 1.5);
  margin-top: calc(0rem - var(--ui-spacing) / 4);
  background: #FFFFFF;
  border-radius: 50px;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

#progress::-moz-range-track {
  height: var(--ui-spacing);
  background: #A0A0A0;
  border-radius: 50px;
}

#progress::-moz-range-thumb {
  -moz-appearance: none;
  appearance: none;
  width: calc(var(--ui-spacing) * 1.5);
  height: calc(var(--ui-spacing) * 1.5);
  margin-top: calc(0rem - var(--ui-spacing) / 4);
  background: #FFFFFF;
  border-radius: 50px;
  -moz-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

#progress:disabled {
  opacity: 0.75;
}

#buttons_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

#buttons_box .button {
  width: 23%;
}

.box_cover {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 0.25s;
  transition: opacity 0.25s;
  z-index: 9919;
}

.hide_cover:checked+.box_cover,
.box_cover.hidden {
  display: initial !important;
  opacity: 0;
  pointer-events: none;
}

.box_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  min-height: 25vh;
  max-height: 75vh;
  top: 40%;
  width: var(--main-width);
  opacity: 0;
  background: var(--dialog-background);
  -webkit-transform: translateY(-50%) scale(90%);
  transform: translateY(-50%) scale(90%);
  -webkit-transition: top 0.25s cubic-bezier(0.75, -0.5, 1, 0.5),
    opacity 0.25s ease-in,
    -webkit-transform 0.25s ease-in,
    background 0.2s ease, color 0.2s ease;
  transition: top 0.25s cubic-bezier(0.75, -0.5, 1, 0.5),
    opacity 0.25s ease-in,
    -webkit-transform 0.25s ease-in,
    background 0.2s ease, color 0.2s ease;
  transition: top 0.25s cubic-bezier(0.75, -0.5, 1, 0.5),
    opacity 0.25s ease-in,
    transform 0.25s ease-in,
    background 0.2s ease, color 0.2s ease;
  z-index: 9920;
  pointer-events: none;
}

.show_dialogs:checked+.box_container,
.box_container.display {
  top: 50%;
  opacity: 1;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition-timing-function: cubic-bezier(0, 0.5, 0.25, 1.5), ease-out, ease-out;
  transition-timing-function: cubic-bezier(0, 0.5, 0.25, 1.5), ease-out, ease-out;
  pointer-events: initial;
}

input[name=touchpoint]+.box_cover {
  z-index: 9921;
}

input[name=touchpoint]+.box_container {
  z-index: 9922;
}

.tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 5%;
  height: 2.5rem;
  border-bottom: 1px solid var(--border-color);
  font-weight: bold;
}

.tab label {
  line-height: 2.5rem;
}

.tab label:not(.close_box) {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
}

.close_box {
  padding: 0 5%;
  text-align: right;
}

.box {
  overflow-y: scroll;
  padding: 0 5%;
  height: 100%;
}

.box_container.dialog .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 20vh;
  text-align: center;
}

.box>* {
  margin: 1rem 0;
}

.box .setting_item {
  min-height: 2em;
}

/*----------------*/

@media screen and (max-width: 575px) {
  :root {
    --main-width: 92%;
  }
}

@media screen and (min-width: 576px) {
  :root {
    --main-width: 540px;
  }
}

@media screen and (min-width: 768px) {
  :root {
    --main-width: 720px;
  }
}

@media screen and (min-width: 992px) {
  :root {
    --main-width: 960px;
  }
}

@media screen and (min-width: 1200px) {
  :root {
    --main-width: 1140px;
  }
}