@font-face {
  font-family: 'Your Doodle Font';
  font-style: normal;
  font-weight: 400;
  src: local('Your Doodle Font'), url('../font/Your Doodle Font.woff') format('woff');
}

@font-face {
  font-family: 'Aero';
  font-style: normal;
  font-weight: 400;
  src: local('Aero'), url('../font/Aero.woff') format('woff');
}

@font-face {
  font-family: 'Radio Space';
  font-style: normal;
  font-weight: 400;
  src: local('Radio Space'), url('../font/radiospace.woff') format('woff');
}

@font-face {
  font-family: 'Radio Space Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Radio Space Condensed'), url('../font/Radiofc.woff') format('woff');
}

@font-face {
  font-family: 'Radio Space Italic';
  font-style: italic;
  font-weight: 400;
  src: local('Radio Space Italic'), url('../font/Radiofi.woff') format('woff');
}

@font-face {
  font-family: 'Radio Space Bold';
  font-style: normal;
  font-weight: 700;
  src: local('Radio Space Bold'), url('../font/Radiofb.woff') format('woff');
}

@font-face {
  font-family: 'Radio Space Bold Italic';
  font-style: italic;
  font-weight: 700;
  src: local('Radio Space Bold Italic'), url('../font/Radiofbi.woff') format('woff');
}

@font-face {
  font-family: 'ARLRDBD';
  font-style: normal;
  font-weight: 400;
  src: local('ARLRDBD'), url('../font/ARLRDBD.woff') format('woff');
}

@font-face {
  font-family: 'Milk Tea';
  font-style: normal;
  font-weight: 400;
  src: local('Milk Tea'), url('../font/milk-tea-normal.woff') format('woff');
}


body {
  overflow-y: overlay;
}

body::-webkit-scrollbar {
  width: 7px;
}

/* Track */
body::-webkit-scrollbar-track {
  background-color: #00000000;
}

/* Handle */
body::-webkit-scrollbar-thumb {
  background-color: #00000044;
  border-radius: 20px;
  transition: 1s;
}

body::-webkit-scrollbar-thumb:hover {
  transition: 1s;
  background-color: #aaaaaa99;
}

.white-preload {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  /* background-color: #000000 !important; */
  background: rgb(0, 0, 0);
  width: 100% !important;
  height: 100% !important;
  z-index: 9999 !important;
  /* background-color: white; */
  /* background-image: url("../img/main-map/bg.png"); */
  /* background-position: center;
  background-repeat: no-repeat;
  background-size: cover; */
}

/* .white-outro {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  background-color: #FFFFFF !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 9999 !important;
  background-color: white;
  display: none;
} */
.course-map-main {
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
  padding-bottom: 10vw;
  padding-top: 20vw;
}

.course-map-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  object-position: center;
}

.course-map-bg-top {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.course-map-bg-bottom {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.course-map-content {
  position: relative;
  width: 70%;
  max-width: 1000px;
  left: 50%;
  transform: translateX(-50%);
}

.course-map-content img {
  width: 100%;
}

.course-map-line {
  position: relative;
  width: 100%;
}

.course-map-top {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 30px);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 30px);
}

.course-map-planet-wrap {
  position: absolute;
  width: 10%;
  cursor: pointer;
}

.course-map-planet {
  position: absolute;
  width: 100% !important;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.course-map-base {
  position: absolute;
  width: 200% !important;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.course-map-mons {
  position: absolute;
  width: 150% !important;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(-10%);
  animation: course-map-mons-anim 3s infinite;
}

.course-map-planet-wrap .base-number {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 5%;
  font-family: 'Radio Space', sans-serif;
  font-style: italic;
  font-size: min(1.5vw, 20px);
  color: white;
  text-align: center;
  text-shadow: 0px 0px 0.5vw #ffffff;
  z-index: 1;
}

.video-canvas {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  background-color: #17174b;
}

.video-canvas2 {
  position: fixed;
  width: 80%;
  height: 100%;
  top: 0%;
  left: 10%;
  scale: 0.8;
}

.video-frame {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

.close-video-button {
  width: 8%;
  height: 7.5%;
  position: absolute;
  right: 14.5%;
  bottom: 1%;
  z-index: 20;
  cursor: pointer;
}

.close-video-button:active {
  content: url("../img/video-page/close-btn-pressed.png");
}

.quiz-canvas {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: none;
  background-color: #000000CC;
  background: url("../img/quiz/quiz-bg.png");
  background-size: cover;
}

.quiz-content {
  width: 70% !important;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.quiz-bg {
  width: 100%;
}

.layout-mark-debug {
  /* background-color: #FF000088 !important; */
}

.quiz-question {
  position: absolute;
  width: 55%;
  /* height: 60%; */
  height: 47%;
  left: 5.5%;
  /* top: 8.5vw; */
  top: 13vw;
  color: black;
  font-size: 2vw;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 0%;
  font-family: "ARLRDBD", 'Milk Tea';
}

.quiz-question .quiz-question-inner {
  max-height: 100%;
  margin-bottom: 0px !important;
  overflow: auto;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 91% 100%, 7% 100%, 0 82%);
  padding: 2%;
}

/* width */
.quiz-question::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* Track */
.quiz-question::-webkit-scrollbar-track {
  background: #01ffff33;
  border-radius: 10px;
}

/* Handle */
.quiz-question::-webkit-scrollbar-thumb {
  background: #01ffff77;
  border-radius: 10px;
}

/* Handle on hover */
.quiz-question::-webkit-scrollbar-thumb:hover {
  background: #01ffff;
  border-radius: 10px;
}

/* width */
.quiz-question-inner::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* Track */
.quiz-question-inner::-webkit-scrollbar-track {
  background: #01ffff33;
  border-radius: 10px;
}

/* Handle */
.quiz-question-inner::-webkit-scrollbar-thumb {
  background: #01ffff77;
  border-radius: 10px;
}

/* Handle on hover */
.quiz-question-inner::-webkit-scrollbar-thumb:hover {
  background: #01ffff;
  border-radius: 10px;
}

.quiz-input {
  position: absolute;
  width: 25%;
  height: 60%;
  right: 10%;
  top: 7.25vw;
  color: black;
  padding: 2%;
  font-size: 1.5vw;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  resize: none;
  background-color: #00000000;
  /* background-color: #ffffff; */
  border-style: none;
  font-family: "ARLRDBD", 'Milk Tea';
}

/* width */
.quiz-input::-webkit-scrollbar {
  width: 7px;
}

/* Track */
.quiz-input::-webkit-scrollbar-track {
  background: #01ffff33;
  border-radius: 10px;
}

/* Handle */
.quiz-input::-webkit-scrollbar-thumb {
  background: #01ffff77;
  border-radius: 10px;
}

/* Handle on hover */
.quiz-input::-webkit-scrollbar-thumb:hover {
  background: #01ffff;
  border-radius: 10px;
}

.quiz-next-btn {
  position: absolute;
  width: 19%;
  right: 12.5%;
  bottom: 2.75vw;
  cursor: pointer;
}

.quiz-exit {
  position: absolute;
  right: -0vw;
  top: -0.5vw;
  width: 3.5vw;
  height: 3.5vw;
  background-color: #00000000;
  cursor: pointer;
  background-image: url("../img/quiz/X-open.png");
  background-size: 100%;
  background-repeat: no-repeat;

}

.quiz-exit:hover {

  border: inherit;
  border-radius: 100%;
  box-shadow: 0px 0px 85px 60px rgba(0, 180, 255, 0.4)
}

.quiz-exit:active {
  background-image: url("../img/quiz/X-close.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

#quiz-time-text {
  position: absolute;
  left: 6vw;
  top: -1vw;
  /* top: 3.25vw; */
  color: #00ffff;
  font-size: 2.5vw;
  font-family: "Aero";
}

.quiz-number-bullets {
  position: absolute;
  /* left: -1vw; */
  bottom: 5vw;
  text-align: center;
  /* left: 8.5%; */
  width: 70%;
  height: 2vw;
}

.quiz-number-bullet {
  background: url("../img/quiz/Number-New.png");
  font-family: "Aero";
  display: inline-block;
  width: 2.5vw;
  background-position: center;
  background-size: 97%;
  background-repeat: no-repeat;
  font-size: 1.5vw;
  color: #00ffff;
  text-decoration: none;
  margin-right: 1%;
  text-align: center;
  transition: color 0.5s;
  cursor: pointer;

}

.quiz-number-bullet:hover {

  background: url("../img/quiz/Number-select-New.png");
  font-family: "Aero";
  display: inline-block;
  width: 2.5vw;
  background-position: center;
  background-size: 97%;
  background-repeat: no-repeat;
  font-size: 1.5vw;
  text-decoration: none;
  margin-right: 1%;
  text-align: center;
  transition: color 0.5s;
  cursor: pointer;

}

.quiz-arrow {
  display: inline-block;
  height: 2.5vw;
  width: 2vw;
  font-size: 1.5vw;
  color: #00ffff;
  text-decoration: none;
  text-align: center;
  transition: color 0.5s;
  cursor: pointer;
  margin-top: 2px;

}

.quiz-choices {
  position: absolute;
  width: 30%;
  height: 70%;
  right: 7.5%;
  top: 4.5vw;
  color: black;
  font-size: 1.5vw;
  text-align: center;
  overflow-y: auto;
}

.quiz-choice-bullet {
  width: 100%;
  min-height: 25%;
  background: url("../img/quiz/Choice-New.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* padding-top: 1.5vw;
  padding-bottom: 1.5vw; */
  padding: 1.5vw;
  cursor: pointer;
  font-family: "ARLRDBD", 'Milk Tea';
}

.quiz-choice-bullet-b {
  width: 100%;
  min-height: 25%;
  background: url("../img/quiz/choice-b.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* padding-top: 1.5vw;
  padding-bottom: 1.5vw; */
  padding: 1.5vw;
  cursor: pointer;
  font-family: "ARLRDBD", 'Milk Tea';
}

.quiz-choice-bullet img {
  width: 100%;
  border-radius: 10px;
  padding-top: 0.5vw;
  padding-bottom: 0.75vw;
  max-height: 10vw;
  object-fit: contain;
}

.quiz-choice-bullet-b img {
  width: 100%;
  border-radius: 10px;
  padding-top: 0.5vw;
  padding-bottom: 0.75vw;
  max-height: 10vw;
  object-fit: contain;
}

.quiz-choice-select {
  width: 100%;
  min-height: 25%;
  background: url("../img/quiz/Choice-selected-New.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* padding-top: 1.5vw;
  padding-bottom: 1.5vw; */
  padding: 1.5vw;
  cursor: pointer;
  font-family: "ARLRDBD", 'Milk Tea';
}

.quiz-choice-select-b {
  width: 100%;
  min-height: 25%;
  background: url("../img/quiz/choice-selected-b.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* padding-top: 1.5vw;
  padding-bottom: 1.5vw; */
  padding: 1.5vw;
  cursor: pointer;
  font-family: "ARLRDBD", 'Milk Tea';
}

.quiz-choice-select img {
  width: 100%;
  border-radius: 10px;
  padding-top: 0.5vw;
  padding-bottom: 0.75vw;
  max-height: 10vw;
  object-fit: contain;
}

.quiz-choice-select-b img {
  width: 100%;
  border-radius: 10px;
  padding-top: 0.5vw;
  padding-bottom: 0.75vw;
  max-height: 10vw;
  object-fit: contain;
}

#video-player-wrapper {
  position: relative;
  padding: 5vh 0vw 10vh 0vw !important;
  width: auto;
  height: 100%;
}

#video-player-wrapper:fullscreen {
  padding: 0px !important;
  width: 100%;
  height: 100%;
}

.video-controls-wrapper {
  padding: inherit;
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 30px;
  z-index: 10;
}

.video-controls-wrapper2 {
  padding: inherit;
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: 18%;
  z-index: 1;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0%;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
}

.video-controls {
  background-color: #FFFFFF88;
  width: 100%;
  height: 50px;
  border-radius: 10px;
  z-index: 10;
  position: relative;
  padding: 5px;
  transition: 1s;
}

.video-controls2 {
  position: absolute;
  bottom: 3%;
  left: 8%;
  width: 85%;
  /* ให้เต็มความกว้าง player */
  z-index: 9999;
  /* อยู่บนสุด */
  display: flex;
  /* จัดปุ่มเรียง */
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* ระยะห่างปุ่ม */
  /* background: #cccaca23; */
  /* พื้นหลังโปร่งดำให้อ่านง่าย */
  padding: 48px;
  box-sizing: border-box;
}

.video-controls2 {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.video-controls2.hidden {
  opacity: 0;
  pointer-events: none;
  /* กันไม่ให้คลิกโดนตอนซ่อน */
}

#video-play-btn {
  width: 50px;
  height: 100%;
}

#video-speed-btn {
  width: 50px;
  height: 100%;
  font-size: 20px;
  text-align: center;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

#video-full-screen-btn {
  width: 50px;
  height: 100%;
}

#video-timestamp {
  background-color: grey;
  border-radius: 10px;
  color: white;
  width: 100px;
  display: inline-block;
  text-align: center;
  margin-left: 3px;
}

#video-slider {
  -webkit-appearance: none;
  width: calc(100% - 365px);
  height: 20px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  border-radius: 10px;
  transform: translateY(25%);
}

#video-slider:hover {
  opacity: 1;
}

#video-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #04AA6D;
  cursor: pointer;
  border-radius: 10px;
  transition: 1s;
}

#video-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #04AA6D;
  cursor: pointer;
  border-radius: 10px;
  transition: 1s;
}

#video-volumn-btn {
  width: 50px;
  height: 100%;
  font-size: 20px;
  text-align: center;
  padding-left: 0px !important;
  padding-right: 0px !important;
  background-color: #ffffff00;
  cursor: default;
  border: 0;
}

#video-volumn-slider {
  -webkit-appearance: none;
  width: 95%;
  height: 20px;
  background: #6c757d;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity 0.15s, background-color 0.15s;
  transform: translateY(20%);
  overflow: hidden;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

#video-volumn-slider:hover {
  background: #5c656d;
  opacity: 0.8;
}

#video-volumn-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1px;
  height: 20px;
  background: #04AA6D;
  cursor: pointer;
  transition: 1s;
  box-shadow: -80px 0 0 80px #04AA6D;
}

#video-volumn-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #04AA6D00;
  cursor: pointer;
  transition: 1s;
}

#video-volumn-slider::-webkit-slider-runnable-track {
  height: 10px;
  -webkit-appearance: none;
  color: #13bba4;
  margin-top: -1px;
}

#video-play-btn2 {
  width: 50px;
  height: 100%;
}

#video-speed-btn2 {
  width: 50px;
  height: 100%;
  font-size: 20px;
  text-align: center;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

#video-full-screen-btn2 {
  width: 50px;
  height: 100%;
}

#video-timestamp2 {
  background-color: grey;
  border-radius: 10px;
  color: white;
  width: 100px;
  display: inline-block;
  text-align: center;
  margin-left: 3px;
}

#video-slider2 {
  -webkit-appearance: none;
  width: calc(100% - 365px);
  height: 20px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  border-radius: 10px;
  transform: translateY(25%);
}

#video-slider2:hover {
  opacity: 1;
}

#video-slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #04AA6D;
  cursor: pointer;
  border-radius: 10px;
  transition: 1s;
}

#video-slider2::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #04AA6D;
  cursor: pointer;
  border-radius: 10px;
  transition: 1s;
}

#video-volumn-btn2 {
  width: 50px;
  height: 100%;
  font-size: 20px;
  text-align: center;
  padding-left: 0px !important;
  padding-right: 0px !important;
  background-color: #ffffff00;
  cursor: default;
  border: 0;
}

#video-volumn-slider2 {
  -webkit-appearance: none;
  width: 95%;
  height: 20px;
  background: #6c757d;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity 0.15s, background-color 0.15s;
  transform: translateY(20%);
  overflow: hidden;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

#video-volumn-slider2:hover {
  background: #5c656d;
  opacity: 0.8;
}

#video-volumn-slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1px;
  height: 20px;
  background: #04AA6D;
  cursor: pointer;
  transition: 1s;
  box-shadow: -80px 0 0 80px #04AA6D;
}

#video-volumn-slider2::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #04AA6D00;
  cursor: pointer;
  transition: 1s;
}

#video-volumn-slider2::-webkit-slider-runnable-track {
  height: 10px;
  -webkit-appearance: none;
  color: #13bba4;
  margin-top: -1px;
}

/* width */
.quiz-choices::-webkit-scrollbar {
  width: 7px;
}

/* Track */
.quiz-choices::-webkit-scrollbar-track {
  background: #01ffff33;
  border-radius: 10px;
}

/* Handle */
.quiz-choices::-webkit-scrollbar-thumb {
  background: #01ffff77;
  border-radius: 10px;
}

/* Handle on hover */
.quiz-choices::-webkit-scrollbar-thumb:hover {
  background: #01ffff;
  border-radius: 10px;
}

.dummy-video-overlay {
  opacity: 0;
  width: 100%;
  height: 100%;
  padding: inherit;
  position: absolute;
  left: 0;
  top: 0;
}

#ufo-canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  display: none;
}

#ufo-canvas .ufo-beam {
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  bottom: 0;
  animation: beam-anim-in 3s;
  opacity: 0.7;
}

#ufo-canvas .ufo {
  position: absolute;
  width: 100%;
  height: 75%;
  left: 0;
  bottom: 40%;
  object-fit: contain;
  animation: ufo-anim-in 2s;
}

#ufo-desc {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  width: 30%;
  height: 45%;
  text-align: center;
  overflow-y: auto;
  animation: ufo-content-fade-in 3s;
}

#ufo-start-btn {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 12%;
  cursor: pointer;
  animation: ufo-content-fade-in 3s;
}

#ufo-start-btn:active {
  content: url("../img/course-map/ui/start-press.png");
}

#result-canvas {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #00000088;
  display: none;
}

.result-canvas-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.result-canvas-content img {
  height: 80vh;
  max-height: 500px;
}

.result-canvas-content .star-anim {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  object-fit: contain;
  object-position: bottom;
}

#result-distance {
  position: absolute;
  bottom: 7.5%;
  right: 38%;
  transform: translateY(50%);
  font-size: min(3.5vh, 25px);
  color: white;
}

#bottom-left-back-button {
  width: 4%;
  max-width: 50px;
  position: fixed;
  left: 10px;
  bottom: 10px;
  cursor: pointer;
  opacity: 0.5;
  transition: 0.5s;
}

#bottom-left-back-button:hover {
  opacity: 1;
}

.profile-watermark {
  opacity: 0.5;
  position: absolute;
  font-size: 24px;
  color: white;
  z-index: 999;
  user-select: none;
}

.profile-watermark-no-image {
  opacity: 0.5;
  position: absolute;
  font-size: 24px;
  color: white;
  z-index: 999;
  user-select: none;
}

.profile-watermark img {
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 100px;
  transform: translate(-120%, -50%);
}

.result-con-1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: confetti 3.3s linear infinite;
}

.result-con-2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: confetti 2s linear infinite;
  animation-delay: 1s;
  opacity: 0;
}

.result-con-3 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: confetti 2.75s linear infinite;
  animation-delay: 2s;
  opacity: 0;
}

.quiz-question a {
  color: #00DDDD;
  transition: color 0.2s;
}

.quiz-question a:hover {
  color: #00FFFF;
}

.congraz-canvas {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(100vh, 100vw);
  height: min(100vh, 100vw);
  transform: translate(-50%, -50%);
  /* background-color: #FF000088; */
  overflow: visible;
  display: none;
}

.congraz-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  transform: translateX(-50%);
  background: rgb(0, 0, 0);
  background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 10%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.4) 90%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 10%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.4) 90%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 10%, rgba(0, 0, 0, 0.6) 30%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.4) 90%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=1);
}

.congraz-monster {
  position: absolute;
  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.6);
}

@keyframes ufo-anim-in {
  0% {
    bottom: 100%;
  }

  100% {
    bottom: 40%;
  }
}

@keyframes beam-anim-in {
  0% {
    transform: translateY(0) scaleX(0) scaleY(0);
  }

  50% {
    transform: translateY(-20%) scaleX(0) scaleY(0);
  }

  75% {
    transform: translateY(0) scaleX(0.1) scaleY(1);
  }

  100% {
    transform: translateY(0) scaleX(1) scaleY(1);
  }
}

@keyframes side-bar-slide-in {
  0% {
    right: -100%;
  }

  100% {
    right: 0;
  }
}

@keyframes side-bar-slide-out {
  0% {
    right: 0%;
  }

  100% {
    right: -100;
  }
}

@keyframes ufo-content-fade-in {
  0% {
    opacity: 0;
  }

  75% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes course-map-mons-anim {
  0% {
    transform: translateX(-50%) translateY(-10%);
  }

  50% {
    transform: translateX(-50%) translateY(-20%);
  }

  100% {
    transform: translateX(-50%) translateY(-10%);
  }
}

@keyframes confetti {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }

  50% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(10%);
  }
}

@keyframes congraz-monster {
  0% {
    transform: translateY(0%);
  }

  50% {
    transform: translateY(-7.5%);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes congraz-monster-center {
  0% {
    transform: translateY(0%) translateX(-50%);
  }

  50% {
    transform: translateY(-7.5%) translateX(-50%);
  }

  100% {
    transform: translateY(0%) translateX(-50%);
  }
}

/* ------------------------------------------- */
/* .video-forward-notify{
  text-align: center;
  width:100%;
  height:200%;
  border-radius:100% 0 0 100%;
  position: absolute;
  display:flex;
  flex-direction: row;
  right: -50%;
  top:-50%;
}

.video-forward-notify .icon{
  justify-content:flex-start;
  align-items:center;
  margin: auto 0 auto 15%;
  color: rgba(255,255,255, 1);
}
.video-rewind-notify{
  text-align: center;
  width:100%;
  height:200%;
  border-radius:0 100% 100% 0;
  position: absolute;
  display:flex;
  flex-direction: row;
  left: -50%;
  top:-50%;
}

.video-rewind-notify .icon{
  justify-content:flex-start;
  align-items:center;
  margin: auto 0 auto 60%;
  color: rgba(255,255,255, 1);
}
.icon i{
  display:block;
}
.notification{
  transition: background 0.8s;
  background: rgba(200,200,200,.4) radial-gradient(circle, transparent 1%, rgba(200,200,200,.4) 1%) center/15000%;
  pointer-events:none;
  display: none;
}
i{
  font-style:normal;
}
.animate-in{
  display:flex;
  animation: ripple 1s forwards;
}
.animate-in i{
  display:block;
}
.animate-in.forward i{
  padding-bottom:2px;
}
.animate-in.forward i{
  animation: fadeInLeft .7s;
}
.animate-in.rewind i{
  animation: fadeInRight .7s;
}
@keyframes ripple{
  0%   { 
    background-color: rgba(200,200,200,.4);
    background-size: 100%;
    transition: background 0s;
    opacity:1;
  }
  100% { 
  transition: background 0.8s;
  background: rgba(200,200,200,.4) radial-gradient(circle, transparent 1%, rgba(200,200,200,.4) 1%) center/15000%;
  display: flex;
    opacity:0;
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(0px);
  }
  100% {
    opacity: 1;
    transform: translateX(-20px);
  }
}
span{
  font-size:12px;
} */