@charset "UTF-8";*,:before,:after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb
}

:before,:after {
  --tw-content: ""
}

html,:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent
}

body {
  margin: 0;
  line-height: inherit
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px
}

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

h1,h2,h3,h4,h5,h6 {
  font-size: inherit;
  font-weight: inherit
}

a {
  color: inherit;
  text-decoration: inherit
}

b,strong {
  font-weight: bolder
}

code,kbd,samp,pre {
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em
}

small {
  font-size: 80%
}

sub,sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse
}

button,input,optgroup,select,textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;

  color: #9ca3af
}

button,select {
  text-transform: none
}

button,[type=button],[type=reset],[type=submit] {
  -webkit-appearance: button;
  background-color: #1a1a1ae6;
  background-image: none
}

:-moz-focusring {
  outline: auto
}

:-moz-ui-invalid {
  box-shadow: none
}

progress {
  vertical-align: baseline
}

::-webkit-inner-spin-button,::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

summary {
  display: list-item
}

blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre {
  margin: 0
}

fieldset {
  margin: 0;
  padding: 0
}

legend {
  padding: 0
}

ol,ul,menu {
  list-style: none;
  margin: 0;
  padding: 0
}

dialog {
  padding: 0
}

textarea {
  width: 100%;
  resize: vertical;
  opacity: 1;
  color: #9ca3af

}

input::-moz-placeholder,textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af
}

input::placeholder,textarea::placeholder {
  opacity: 1;
  color: #9ca3af
}

button,[role=button] {
  cursor: pointer
}

:disabled {
  cursor: default
}

img,svg,video,canvas,audio,iframe,embed,object {
  display: block;
  vertical-align: middle
}

img,video {
  max-width: 100%;
  height: auto
}

[hidden] {
  display: none
}

*,:before,:after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia:
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia:
}

.pointer-events-none {
  pointer-events: none
}

.absolute {
  position: absolute
}

.relative {
  position: relative
}

.bottom-0 {
  bottom: 0
}

.bottom-2 {
  bottom: .5rem
}

.bottom-7 {
  bottom: 1.75rem
}

.left-0 {
  left: 0
}

.left-1\/2 {
  left: 50%
}

.left-\[3rem\] {
  left: 3rem
}

.top-0 {
  top: 0
}

.top-1\/2 {
  top: 50%
}

.top-\[-4\.5rem\] {
  top: -4.5rem
}

.z-0 {
  z-index: 0
}

.z-10 {
  z-index: 10
}

.z-50 {
  z-index: 50
}

.m-auto {
  margin: auto
}

.mx-auto {
  margin-left: auto;
  margin-right: auto
}

.my-1 {
  margin-top: .25rem;
  margin-bottom: .25rem
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem
}

.-mt-8 {
  margin-top: -2rem
}

.mb-3 {
  margin-bottom: .75rem
}

.mr-1 {
  margin-right: .25rem
}

.mr-1\.5 {
  margin-right: .375rem
}

.mt-1 {
  margin-top: .25rem
}

.mt-1\.5 {
  margin-top: .375rem
}

.mt-2 {
  margin-top: .5rem
}

.flex {
  display: flex
}

.hidden {
  display: none
}

.h-10 {
  height: 2.5rem
}

.h-24 {
  height: 6rem
}

.h-6 {
  height: 1.5rem
}

.h-\[1px\] {
  height: 1px
}

.h-\[20\%\] {
  height: 20%
}

.h-auto {
  height: auto
}

.h-full {
  height: 100%
}

.h-screen {
  height: 100vh
}

.w-1\/2 {
  width: 50%
}

.w-10 {
  width: 2.5rem
}

.w-24 {
  width: 6rem
}

.w-6 {
  width: 1.5rem
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content
}

.w-full {
  width: 100%
}

.w-screen {
  width: 100vw
}

.max-w-full {
  max-width: 100%
}

.flex-1 {
  flex: 1 1 0%
}

.flex-auto {
  flex: 1 1 auto
}

.flex-none {
  flex: none
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.transform {
  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@keyframes pulse {
  50% {
      opacity: .5
  }
}

.animate-\[pulse_5s_ease-in-out_infinite\] {
  animation: pulse 5s ease-in-out infinite
}

@keyframes spin {
  to {
      transform: rotate(360deg)
  }
}

.animate-spin {
  animation: spin 1s linear infinite
}

.cursor-default {
  cursor: default
}

.cursor-pointer {
  cursor: pointer
}

.select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.select-text {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text
}

.flex-col {
  flex-direction: column
}

.items-end {
  align-items: flex-end
}

.items-center {
  align-items: center
}

.justify-start {
  justify-content: flex-start
}

.justify-end {
  justify-content: flex-end
}

.justify-center {
  justify-content: center
}

.space-x-2>:not([hidden])~:not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(.5rem * var(--tw-space-x-reverse));
  margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
}

.space-x-3>:not([hidden])~:not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(.75rem * var(--tw-space-x-reverse));
  margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)))
}

.space-y-2>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
}

.space-y-3>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(.75rem * var(--tw-space-y-reverse))
}

.space-y-4>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}

.overflow-auto {
  overflow: auto
}

.overflow-hidden {
  overflow: hidden
}

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

.break-normal {
  overflow-wrap: normal;
  word-break: normal
}

.break-words {
  overflow-wrap: break-word
}

.rounded-2xl {
  border-radius: 1rem
}

.rounded-3xl {
  border-radius: 1.5rem
}

.rounded-full {
  border-radius: 9999px
}

.rounded-xl {
  border-radius: .75rem
}

.border {
  border-width: 1px
}

.border-none {
  border-style: none
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity))
}

.bg-black\/50 {
  background-color: #00000080
}

.bg-black\/\[0\.18\] {
  background-color: #0000002e
}

.bg-blue-700\/80 {
  background-color: #1d4ed8cc
}

.bg-neutral-400\/20 {
  background-color: #a3a3a333
}

.bg-rose-100\/40 {
  background-color: #ffe4e666
}

.bg-rose-700\/80 {
  background-color: #be123ccc
}

.bg-white\/20 {
  background-color: #fff3
}

.bg-white\/40 {
  background-color: #fff6
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top,var(--tw-gradient-stops))
}

.from-black\/80 {
  --tw-gradient-from: rgb(0 0 0 / .8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position)
}

.object-contain {
  -o-object-fit: contain;
  object-fit: contain
}

.object-cover {
  -o-object-fit: cover;
  object-fit: cover
}

.object-center {
  -o-object-position: center;
  object-position: center
}

.p-2 {
  padding: .5rem
}

.p-3 {
  padding: .75rem
}

.p-4 {
  padding: 1rem
}

.px-2 {
  padding-left: .5rem;
  padding-right: .5rem
}

.px-3 {
  padding-left: .75rem;
  padding-right: .75rem
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}

.py-2 {
  padding-top: .5rem;
  padding-bottom: .5rem
}

.py-2\.5 {
  padding-top: .625rem;
  padding-bottom: .625rem
}

.py-3 {
  padding-top: .75rem;
  padding-bottom: .75rem
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem
}

.pl-\[0rem\] {
  padding-left: 0rem
}

.pr-4 {
  padding-right: 1rem
}

.text-left {
  text-align: left
}

.text-center {
  text-align: center
}

.\!text-5xl {
  font-size: 3rem!important;
  line-height: 1!important
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem
}

.text-5xl {
  font-size: 3rem;
  line-height: 1
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem
}

.text-sm {
  font-size: .875rem;
  line-height: 1.25rem
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem
}

.font-bold {
  font-weight: 700
}

.font-normal {
  font-weight: 400
}

.font-semibold {
  font-weight: 600
}

.text-black\/80 {
  color: #000c
}

.text-black\/90 {
  color: #000000e6
}

.text-black\/\[0\.95\] {
  color: #000000f2
}

.text-neutral-200\/80 {
  color: #e5e5e5cc
}

.text-neutral-950 {
  --tw-text-opacity: 1;
  color: rgb(10 10 10 / var(--tw-text-opacity))
}

.text-rose-700 {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity))
}

.text-rose-800 {
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / var(--tw-text-opacity))
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.text-white\/50 {
  color: #000000e0
}

.text-white\/80 {
  color: #fffc
}

.underline {
  text-decoration-line: underline
}

.underline-offset-4 {
  text-underline-offset: 4px
}

.opacity-0 {
  opacity: 0
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.backdrop-blur-lg {
  --tw-backdrop-blur: blur(16px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.transition {
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s
}

.duration-100 {
  transition-duration: .1s
}

.duration-150 {
  transition-duration: .15s
}

.duration-200 {
  transition-duration: .2s
}

.duration-500 {
  transition-duration: .5s
}

body {
  font-family: Noto Sans Thai;
  padding: 0;
  margin: 0
}

* {
  outline: none
}

button {
  outline: none!important
}

.smooth {
  transition: background-image 5s linear
}

video {
  -o-object-fit: contain;
  object-fit: contain;
  overflow-clip-margin: content-box;
  overflow: clip
}

.placeholder\:text-neutral-900::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity))
}

.placeholder\:text-neutral-900::placeholder {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity))
}

.hover\:cursor-pointer:hover {
  cursor: pointer
}

.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity))
}

.hover\:bg-rose-100\/50:hover {
  background-color: #ffe4e680
}

.hover\:bg-rose-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(225 29 72 / var(--tw-bg-opacity))
}

.hover\:bg-white\/20:hover {
  background-color: #fff3
}

.hover\:bg-white\/50:hover {
  background-color: #ffffff80
}

.hover\:text-neutral-200\/80:hover {
  color: #e5e5e5cc
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.hover\:text-white\/80:hover {
  color: #fffc
}

.hover\:underline:hover {
  text-decoration-line: underline
}

.hover\:backdrop-blur-md:hover {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.focus\:bg-neutral-300\/40:focus {
  background-color: #d4d4d466
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px
}

.disabled\:bg-neutral-600\/80:disabled {
  background-color: #525252cc
}

.disabled\:opacity-80:disabled {
  opacity: .8
}

.disabled\:hover\:bg-neutral-600\/80:hover:disabled {
  background-color: #525252cc
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1
}

@media (min-width: 640px) {
  .sm\:h-\[80vh\] {
      height:80vh
  }

  .sm\:w-\[24\%\] {
      width: 24%
  }

  .sm\:w-\[32rem\] {
      width: 32rem
  }

  .sm\:max-w-\[32rem\] {
      max-width: 32rem
  }
}

/*!
* animate.css - https://animate.style/
* Version - 4.1.1
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2020 Animate.css
*/
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1
}

.animate__animated {
  animation-duration: 1s;
  animation-duration: var(--animate-duration);
  animation-fill-mode: both
}

.animate__animated.animate__infinite {
  animation-iteration-count: infinite
}

.animate__animated.animate__repeat-1 {
  animation-iteration-count: 1;
  animation-iteration-count: var(--animate-repeat)
}

.animate__animated.animate__repeat-2 {
  animation-iteration-count: 2;
  animation-iteration-count: calc(var(--animate-repeat)*2)
}

.animate__animated.animate__repeat-3 {
  animation-iteration-count: 3;
  animation-iteration-count: calc(var(--animate-repeat)*3)
}

.animate__animated.animate__delay-1s {
  animation-delay: 1s;
  animation-delay: var(--animate-delay)
}

.animate__animated.animate__delay-2s {
  animation-delay: 2s;
  animation-delay: calc(var(--animate-delay)*2)
}

.animate__animated.animate__delay-3s {
  animation-delay: 3s;
  animation-delay: calc(var(--animate-delay)*3)
}

.animate__animated.animate__delay-4s {
  animation-delay: 4s;
  animation-delay: calc(var(--animate-delay)*4)
}

.animate__animated.animate__delay-5s {
  animation-delay: 5s;
  animation-delay: calc(var(--animate-delay)*5)
}

.animate__animated.animate__faster {
  animation-duration: .5s;
  animation-duration: calc(var(--animate-duration)/2)
}

.animate__animated.animate__fast {
  animation-duration: .8s;
  animation-duration: calc(var(--animate-duration)*.8)
}

.animate__animated.animate__slow {
  animation-duration: 2s;
  animation-duration: calc(var(--animate-duration)*2)
}

.animate__animated.animate__slower {
  animation-duration: 3s;
  animation-duration: calc(var(--animate-duration)*3)
}

@media (prefers-reduced-motion:reduce),print {
  .animate__animated {
      animation-duration: 1ms!important;
      transition-duration: 1ms!important;
      animation-iteration-count: 1!important
  }

  .animate__animated[class*=Out] {
      opacity: 0
  }
}

@keyframes bounce {
  0%,20%,53%,to {
      animation-timing-function: cubic-bezier(.215,.61,.355,1);
      transform: translateZ(0)
  }

  40%,43% {
      animation-timing-function: cubic-bezier(.755,.05,.855,.06);
      transform: translate3d(0,-30px,0) scaleY(1.1)
  }

  70% {
      animation-timing-function: cubic-bezier(.755,.05,.855,.06);
      transform: translate3d(0,-15px,0) scaleY(1.05)
  }

  80% {
      transition-timing-function: cubic-bezier(.215,.61,.355,1);
      transform: translateZ(0) scaleY(.95)
  }

  90% {
      transform: translate3d(0,-4px,0) scaleY(1.02)
  }
}

.animate__bounce {
  animation-name: bounce;
  transform-origin: center bottom
}

@keyframes flash {
  0%,50%,to {
      opacity: 1
  }

  25%,75% {
      opacity: 0
  }
}

.animate__flash {
  animation-name: flash
}

@keyframes pulse1 {
  0% {
      transform: scaleX(1)
  }

  50% {
      transform: scale3d(1.05,1.05,1.05)
  }

  to {
      transform: scaleX(1)
  }
}

.animate__pulse {
  animation-name: pulse1;
  animation-timing-function: ease-in-out
}

@keyframes rubberBand {
  0% {
      transform: scaleX(1)
  }

  30% {
      transform: scale3d(1.25,.75,1)
  }

  40% {
      transform: scale3d(.75,1.25,1)
  }

  50% {
      transform: scale3d(1.15,.85,1)
  }

  65% {
      transform: scale3d(.95,1.05,1)
  }

  75% {
      transform: scale3d(1.05,.95,1)
  }

  to {
      transform: scaleX(1)
  }
}

.animate__rubberBand {
  animation-name: rubberBand
}

@keyframes shakeX {
  0%,to {
      transform: translateZ(0)
  }

  10%,30%,50%,70%,90% {
      transform: translate3d(-10px,0,0)
  }

  20%,40%,60%,80% {
      transform: translate3d(10px,0,0)
  }
}

.animate__shakeX {
  animation-name: shakeX
}

@keyframes shakeY {
  0%,to {
      transform: translateZ(0)
  }

  10%,30%,50%,70%,90% {
      transform: translate3d(0,-10px,0)
  }

  20%,40%,60%,80% {
      transform: translate3d(0,10px,0)
  }
}

.animate__shakeY {
  animation-name: shakeY
}

@keyframes headShake {
  0% {
      transform: translate(0)
  }

  6.5% {
      transform: translate(-6px) rotateY(-9deg)
  }

  18.5% {
      transform: translate(5px) rotateY(7deg)
  }

  31.5% {
      transform: translate(-3px) rotateY(-5deg)
  }

  43.5% {
      transform: translate(2px) rotateY(3deg)
  }

  50% {
      transform: translate(0)
  }
}

.animate__headShake {
  animation-timing-function: ease-in-out;
  animation-name: headShake
}

@keyframes swing {
  20% {
      transform: rotate(15deg)
  }

  40% {
      transform: rotate(-10deg)
  }

  60% {
      transform: rotate(5deg)
  }

  80% {
      transform: rotate(-5deg)
  }

  to {
      transform: rotate(0)
  }
}

.animate__swing {
  transform-origin: top center;
  animation-name: swing
}

@keyframes tada {
  0% {
      transform: scaleX(1)
  }

  10%,20% {
      transform: scale3d(.9,.9,.9) rotate(-3deg)
  }

  30%,50%,70%,90% {
      transform: scale3d(1.1,1.1,1.1) rotate(3deg)
  }

  40%,60%,80% {
      transform: scale3d(1.1,1.1,1.1) rotate(-3deg)
  }

  to {
      transform: scaleX(1)
  }
}

.animate__tada {
  animation-name: tada
}

@keyframes wobble {
  0% {
      transform: translateZ(0)
  }

  15% {
      transform: translate3d(-25%,0,0) rotate(-5deg)
  }

  30% {
      transform: translate3d(20%,0,0) rotate(3deg)
  }

  45% {
      transform: translate3d(-15%,0,0) rotate(-3deg)
  }

  60% {
      transform: translate3d(10%,0,0) rotate(2deg)
  }

  75% {
      transform: translate3d(-5%,0,0) rotate(-1deg)
  }

  to {
      transform: translateZ(0)
  }
}

.animate__wobble {
  animation-name: wobble
}

@keyframes jello {
  0%,11.1%,to {
      transform: translateZ(0)
  }

  22.2% {
      transform: skew(-12.5deg) skewY(-12.5deg)
  }

  33.3% {
      transform: skew(6.25deg) skewY(6.25deg)
  }

  44.4% {
      transform: skew(-3.125deg) skewY(-3.125deg)
  }

  55.5% {
      transform: skew(1.5625deg) skewY(1.5625deg)
  }

  66.6% {
      transform: skew(-.78125deg) skewY(-.78125deg)
  }

  77.7% {
      transform: skew(.390625deg) skewY(.390625deg)
  }

  88.8% {
      transform: skew(-.1953125deg) skewY(-.1953125deg)
  }
}

.animate__jello {
  animation-name: jello;
  transform-origin: center
}

@keyframes heartBeat {
  0% {
      transform: scale(1)
  }

  14% {
      transform: scale(1.3)
  }

  28% {
      transform: scale(1)
  }

  42% {
      transform: scale(1.3)
  }

  70% {
      transform: scale(1)
  }
}

.animate__heartBeat {
  animation-name: heartBeat;
  animation-duration: 1.3s;
  animation-duration: calc(var(--animate-duration)*1.3);
  animation-timing-function: ease-in-out
}

@keyframes backInDown {
  0% {
      transform: translateY(-1200px) scale(.7);
      opacity: .7
  }

  80% {
      transform: translateY(0) scale(.7);
      opacity: .7
  }

  to {
      transform: scale(1);
      opacity: 1
  }
}

.animate__backInDown {
  animation-name: backInDown
}

@keyframes backInLeft {
  0% {
      transform: translate(-2000px) scale(.7);
      opacity: .7
  }

  80% {
      transform: translate(0) scale(.7);
      opacity: .7
  }

  to {
      transform: scale(1);
      opacity: 1
  }
}

.animate__backInLeft {
  animation-name: backInLeft
}

@keyframes backInRight {
  0% {
      transform: translate(2000px) scale(.7);
      opacity: .7
  }

  80% {
      transform: translate(0) scale(.7);
      opacity: .7
  }

  to {
      transform: scale(1);
      opacity: 1
  }
}

.animate__backInRight {
  animation-name: backInRight
}

@keyframes backInUp {
  0% {
      transform: translateY(1200px) scale(.7);
      opacity: .7
  }

  80% {
      transform: translateY(0) scale(.7);
      opacity: .7
  }

  to {
      transform: scale(1);
      opacity: 1
  }
}

.animate__backInUp {
  animation-name: backInUp
}

@keyframes backOutDown {
  0% {
      transform: scale(1);
      opacity: 1
  }

  20% {
      transform: translateY(0) scale(.7);
      opacity: .7
  }

  to {
      transform: translateY(700px) scale(.7);
      opacity: .7
  }
}

.animate__backOutDown {
  animation-name: backOutDown
}

@keyframes backOutLeft {
  0% {
      transform: scale(1);
      opacity: 1
  }

  20% {
      transform: translate(0) scale(.7);
      opacity: .7
  }

  to {
      transform: translate(-2000px) scale(.7);
      opacity: .7
  }
}

.animate__backOutLeft {
  animation-name: backOutLeft
}

@keyframes backOutRight {
  0% {
      transform: scale(1);
      opacity: 1
  }

  20% {
      transform: translate(0) scale(.7);
      opacity: .7
  }

  to {
      transform: translate(2000px) scale(.7);
      opacity: .7
  }
}

.animate__backOutRight {
  animation-name: backOutRight
}

@keyframes backOutUp {
  0% {
      transform: scale(1);
      opacity: 1
  }

  20% {
      transform: translateY(0) scale(.7);
      opacity: .7
  }

  to {
      transform: translateY(-700px) scale(.7);
      opacity: .7
  }
}

.animate__backOutUp {
  animation-name: backOutUp
}

@keyframes bounceIn {
  0%,20%,40%,60%,80%,to {
      animation-timing-function: cubic-bezier(.215,.61,.355,1)
  }

  0% {
      opacity: 0;
      transform: scale3d(.3,.3,.3)
  }

  20% {
      transform: scale3d(1.1,1.1,1.1)
  }

  40% {
      transform: scale3d(.9,.9,.9)
  }

  60% {
      opacity: 1;
      transform: scale3d(1.03,1.03,1.03)
  }

  80% {
      transform: scale3d(.97,.97,.97)
  }

  to {
      opacity: 1;
      transform: scaleX(1)
  }
}

.animate__bounceIn {
  animation-duration: .75s;
  animation-duration: calc(var(--animate-duration)*.75);
  animation-name: bounceIn
}

@keyframes bounceInDown {
  0%,60%,75%,90%,to {
      animation-timing-function: cubic-bezier(.215,.61,.355,1)
  }

  0% {
      opacity: 0;
      transform: translate3d(0,-3000px,0) scaleY(3)
  }

  60% {
      opacity: 1;
      transform: translate3d(0,25px,0) scaleY(.9)
  }

  75% {
      transform: translate3d(0,-10px,0) scaleY(.95)
  }

  90% {
      transform: translate3d(0,5px,0) scaleY(.985)
  }

  to {
      transform: translateZ(0)
  }
}

.animate__bounceInDown {
  animation-name: bounceInDown
}

@keyframes bounceInLeft {
  0%,60%,75%,90%,to {
      animation-timing-function: cubic-bezier(.215,.61,.355,1)
  }

  0% {
      opacity: 0;
      transform: translate3d(-3000px,0,0) scaleX(3)
  }

  60% {
      opacity: 1;
      transform: translate3d(25px,0,0) scaleX(1)
  }

  75% {
      transform: translate3d(-10px,0,0) scaleX(.98)
  }

  90% {
      transform: translate3d(5px,0,0) scaleX(.995)
  }

  to {
      transform: translateZ(0)
  }
}

.animate__bounceInLeft {
  animation-name: bounceInLeft
}

@keyframes bounceInRight {
  0%,60%,75%,90%,to {
      animation-timing-function: cubic-bezier(.215,.61,.355,1)
  }

  0% {
      opacity: 0;
      transform: translate3d(3000px,0,0) scaleX(3)
  }

  60% {
      opacity: 1;
      transform: translate3d(-25px,0,0) scaleX(1)
  }

  75% {
      transform: translate3d(10px,0,0) scaleX(.98)
  }

  90% {
      transform: translate3d(-5px,0,0) scaleX(.995)
  }

  to {
      transform: translateZ(0)
  }
}

.animate__bounceInRight {
  animation-name: bounceInRight
}

@keyframes bounceInUp {
  0%,60%,75%,90%,to {
      animation-timing-function: cubic-bezier(.215,.61,.355,1)
  }

  0% {
      opacity: 0;
      transform: translate3d(0,3000px,0) scaleY(5)
  }

  60% {
      opacity: 1;
      transform: translate3d(0,-20px,0) scaleY(.9)
  }

  75% {
      transform: translate3d(0,10px,0) scaleY(.95)
  }

  90% {
      transform: translate3d(0,-5px,0) scaleY(.985)
  }

  to {
      transform: translateZ(0)
  }
}

.animate__bounceInUp {
  animation-name: bounceInUp
}

@keyframes bounceOut {
  20% {
      transform: scale3d(.9,.9,.9)
  }

  50%,55% {
      opacity: 1;
      transform: scale3d(1.1,1.1,1.1)
  }

  to {
      opacity: 0;
      transform: scale3d(.3,.3,.3)
  }
}

.animate__bounceOut {
  animation-duration: .75s;
  animation-duration: calc(var(--animate-duration)*.75);
  animation-name: bounceOut
}

@keyframes bounceOutDown {
  20% {
      transform: translate3d(0,10px,0) scaleY(.985)
  }

  40%,45% {
      opacity: 1;
      transform: translate3d(0,-20px,0) scaleY(.9)
  }

  to {
      opacity: 0;
      transform: translate3d(0,2000px,0) scaleY(3)
  }
}

.animate__bounceOutDown {
  animation-name: bounceOutDown
}

@keyframes bounceOutLeft {
  20% {
      opacity: 1;
      transform: translate3d(20px,0,0) scaleX(.9)
  }

  to {
      opacity: 0;
      transform: translate3d(-2000px,0,0) scaleX(2)
  }
}

.animate__bounceOutLeft {
  animation-name: bounceOutLeft
}

@keyframes bounceOutRight {
  20% {
      opacity: 1;
      transform: translate3d(-20px,0,0) scaleX(.9)
  }

  to {
      opacity: 0;
      transform: translate3d(2000px,0,0) scaleX(2)
  }
}

.animate__bounceOutRight {
  animation-name: bounceOutRight
}

@keyframes bounceOutUp {
  20% {
      transform: translate3d(0,-10px,0) scaleY(.985)
  }

  40%,45% {
      opacity: 1;
      transform: translate3d(0,20px,0) scaleY(.9)
  }

  to {
      opacity: 0;
      transform: translate3d(0,-2000px,0) scaleY(3)
  }
}

.animate__bounceOutUp {
  animation-name: bounceOutUp
}

@keyframes fadeIn {
  0% {
      opacity: 0
  }

  to {
      opacity: 1
  }
}

.animate__fadeIn {
  animation-name: fadeIn
}

@keyframes fadeInDown {
  0% {
      opacity: 0;
      transform: translate3d(0,-100%,0)
  }

  to {
      opacity: 1;
      transform: translateZ(0)
  }
}

.animate__fadeInDown {
  animation-name: fadeInDown
}

@keyframes fadeInDownBig {
  0% {
      opacity: 0;
      transform: translate3d(0,-2000px,0)
  }

  to {
      opacity: 1;
      transform: translateZ(0)
  }
}

.animate__fadeInDownBig {
  animation-name: fadeInDownBig
}

@keyframes fadeInLeft {
  0% {
      opacity: 0;
      transform: translate3d(-100%,0,0)
  }

  to {
      opacity: 1;
      transform: translateZ(0)
  }
}

.animate__fadeInLeft {
  animation-name: fadeInLeft
}

@keyframes fadeInLeftBig {
  0% {
      opacity: 0;
      transform: translate3d(-2000px,0,0)
  }

  to {
      opacity: 1;
      transform: translateZ(0)
  }
}

.animate__fadeInLeftBig {
  animation-name: fadeInLeftBig
}

@keyframes fadeInRight {
  0% {
      opacity: 0;
      transform: translate3d(100%,0,0)
  }

  to {
      opacity: 1;
      transform: translateZ(0)
  }
}

.animate__fadeInRight {
  animation-name: fadeInRight
}

@keyframes fadeInRightBig {
  0% {
      opacity: 0;
      transform: translate3d(2000px,0,0)
  }

  to {
      opacity: 1;
      transform: translateZ(0)
  }
}

.animate__fadeInRightBig {
  animation-name: fadeInRightBig
}

@keyframes fadeInUp {
  0% {
      opacity: 0;
      transform: translate3d(0,100%,0)
  }

  to {
      opacity: 1;
      transform: translateZ(0)
  }
}

.animate__fadeInUp {
  animation-name: fadeInUp
}

@keyframes fadeInUpBig {
  0% {
      opacity: 0;
      transform: translate3d(0,2000px,0)
  }

  to {
      opacity: 1;
      transform: translateZ(0)
  }
}

.animate__fadeInUpBig {
  animation-name: fadeInUpBig
}

@keyframes fadeInTopLeft {
  0% {
      opacity: 0;
      transform: translate3d(-100%,-100%,0)
  }

  to {
      opacity: 1;
      transform: translateZ(0)
  }
}

.animate__fadeInTopLeft {
  animation-name: fadeInTopLeft
}

@keyframes fadeInTopRight {
  0% {
      opacity: 0;
      transform: translate3d(100%,-100%,0)
  }

  to {
      opacity: 1;
      transform: translateZ(0)
  }
}

.animate__fadeInTopRight {
  animation-name: fadeInTopRight
}

@keyframes fadeInBottomLeft {
  0% {
      opacity: 0;
      transform: translate3d(-100%,100%,0)
  }

  to {
      opacity: 1;
      transform: translateZ(0)
  }
}

.animate__fadeInBottomLeft {
  animation-name: fadeInBottomLeft
}

@keyframes fadeInBottomRight {
  0% {
      opacity: 0;
      transform: translate3d(100%,100%,0)
  }

  to {
      opacity: 1;
      transform: translateZ(0)
  }
}

.animate__fadeInBottomRight {
  animation-name: fadeInBottomRight
}

@keyframes fadeOut {
  0% {
      opacity: 1
  }

  to {
      opacity: 0
  }
}

.animate__fadeOut {
  animation-name: fadeOut
}

@keyframes fadeOutDown {
  0% {
      opacity: 1
  }

  to {
      opacity: 0;
      transform: translate3d(0,100%,0)
  }
}

.animate__fadeOutDown {
  animation-name: fadeOutDown
}

@keyframes fadeOutDownBig {
  0% {
      opacity: 1
  }

  to {
      opacity: 0;
      transform: translate3d(0,2000px,0)
  }
}

.animate__fadeOutDownBig {
  animation-name: fadeOutDownBig
}

@keyframes fadeOutLeft {
  0% {
      opacity: 1
  }

  to {
      opacity: 0;
      transform: translate3d(-100%,0,0)
  }
}

.animate__fadeOutLeft {
  animation-name: fadeOutLeft
}

@keyframes fadeOutLeftBig {
  0% {
      opacity: 1
  }

  to {
      opacity: 0;
      transform: translate3d(-2000px,0,0)
  }
}

.animate__fadeOutLeftBig {
  animation-name: fadeOutLeftBig
}

@keyframes fadeOutRight {
  0% {
      opacity: 1
  }

  to {
      opacity: 0;
      transform: translate3d(100%,0,0)
  }
}

.animate__fadeOutRight {
  animation-name: fadeOutRight
}

@keyframes fadeOutRightBig {
  0% {
      opacity: 1
  }

  to {
      opacity: 0;
      transform: translate3d(2000px,0,0)
  }
}

.animate__fadeOutRightBig {
  animation-name: fadeOutRightBig
}

@keyframes fadeOutUp {
  0% {
      opacity: 1
  }

  to {
      opacity: 0;
      transform: translate3d(0,-100%,0)
  }
}

.animate__fadeOutUp {
  animation-name: fadeOutUp
}

@keyframes fadeOutUpBig {
  0% {
      opacity: 1
  }

  to {
      opacity: 0;
      transform: translate3d(0,-2000px,0)
  }
}

.animate__fadeOutUpBig {
  animation-name: fadeOutUpBig
}

@keyframes fadeOutTopLeft {
  0% {
      opacity: 1;
      transform: translateZ(0)
  }

  to {
      opacity: 0;
      transform: translate3d(-100%,-100%,0)
  }
}

.animate__fadeOutTopLeft {
  animation-name: fadeOutTopLeft
}

@keyframes fadeOutTopRight {
  0% {
      opacity: 1;
      transform: translateZ(0)
  }

  to {
      opacity: 0;
      transform: translate3d(100%,-100%,0)
  }
}

.animate__fadeOutTopRight {
  animation-name: fadeOutTopRight
}

@keyframes fadeOutBottomRight {
  0% {
      opacity: 1;
      transform: translateZ(0)
  }

  to {
      opacity: 0;
      transform: translate3d(100%,100%,0)
  }
}

.animate__fadeOutBottomRight {
  animation-name: fadeOutBottomRight
}

@keyframes fadeOutBottomLeft {
  0% {
      opacity: 1;
      transform: translateZ(0)
  }

  to {
      opacity: 0;
      transform: translate3d(-100%,100%,0)
  }
}

.animate__fadeOutBottomLeft {
  animation-name: fadeOutBottomLeft
}

@keyframes flip {
  0% {
      transform: perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);
      animation-timing-function: ease-out
  }

  40% {
      transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);
      animation-timing-function: ease-out
  }

  50% {
      transform: perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);
      animation-timing-function: ease-in
  }

  80% {
      transform: perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0);
      animation-timing-function: ease-in
  }

  to {
      transform: perspective(400px) scaleX(1) translateZ(0) rotateY(0);
      animation-timing-function: ease-in
  }
}

.animate__animated.animate__flip {
  backface-visibility: visible;
  animation-name: flip
}

@keyframes flipInX {
  0% {
      transform: perspective(400px) rotateX(90deg);
      animation-timing-function: ease-in;
      opacity: 0
  }

  40% {
      transform: perspective(400px) rotateX(-20deg);
      animation-timing-function: ease-in
  }

  60% {
      transform: perspective(400px) rotateX(10deg);
      opacity: 1
  }

  80% {
      transform: perspective(400px) rotateX(-5deg)
  }

  to {
      transform: perspective(400px)
  }
}

.animate__flipInX {
  backface-visibility: visible!important;
  animation-name: flipInX
}

@keyframes flipInY {
  0% {
      transform: perspective(400px) rotateY(90deg);
      animation-timing-function: ease-in;
      opacity: 0
  }

  40% {
      transform: perspective(400px) rotateY(-20deg);
      animation-timing-function: ease-in
  }

  60% {
      transform: perspective(400px) rotateY(10deg);
      opacity: 1
  }

  80% {
      transform: perspective(400px) rotateY(-5deg)
  }

  to {
      transform: perspective(400px)
  }
}

.animate__flipInY {
  backface-visibility: visible!important;
  animation-name: flipInY
}

@keyframes flipOutX {
  0% {
      transform: perspective(400px)
  }

  30% {
      transform: perspective(400px) rotateX(-20deg);
      opacity: 1
  }

  to {
      transform: perspective(400px) rotateX(90deg);
      opacity: 0
  }
}

.animate__flipOutX {
  animation-duration: .75s;
  animation-duration: calc(var(--animate-duration)*.75);
  animation-name: flipOutX;
  backface-visibility: visible!important
}

@keyframes flipOutY {
  0% {
      transform: perspective(400px)
  }

  30% {
      transform: perspective(400px) rotateY(-15deg);
      opacity: 1
  }

  to {
      transform: perspective(400px) rotateY(90deg);
      opacity: 0
  }
}

.animate__flipOutY {
  animation-duration: .75s;
  animation-duration: calc(var(--animate-duration)*.75);
  backface-visibility: visible!important;
  animation-name: flipOutY
}

@keyframes lightSpeedInRight {
  0% {
      transform: translate3d(100%,0,0) skew(-30deg);
      opacity: 0
  }

  60% {
      transform: skew(20deg);
      opacity: 1
  }

  80% {
      transform: skew(-5deg)
  }

  to {
      transform: translateZ(0)
  }
}

.animate__lightSpeedInRight {
  animation-name: lightSpeedInRight;
  animation-timing-function: ease-out
}

@keyframes lightSpeedInLeft {
  0% {
      transform: translate3d(-100%,0,0) skew(30deg);
      opacity: 0
  }

  60% {
      transform: skew(-20deg);
      opacity: 1
  }

  80% {
      transform: skew(5deg)
  }

  to {
      transform: translateZ(0)
  }
}

.animate__lightSpeedInLeft {
  animation-name: lightSpeedInLeft;
  animation-timing-function: ease-out
}

@keyframes lightSpeedOutRight {
  0% {
      opacity: 1
  }

  to {
      transform: translate3d(100%,0,0) skew(30deg);
      opacity: 0
  }
}

.animate__lightSpeedOutRight {
  animation-name: lightSpeedOutRight;
  animation-timing-function: ease-in
}

@keyframes lightSpeedOutLeft {
  0% {
      opacity: 1
  }

  to {
      transform: translate3d(-100%,0,0) skew(-30deg);
      opacity: 0
  }
}

.animate__lightSpeedOutLeft {
  animation-name: lightSpeedOutLeft;
  animation-timing-function: ease-in
}

@keyframes rotateIn {
  0% {
      transform: rotate(-200deg);
      opacity: 0
  }

  to {
      transform: translateZ(0);
      opacity: 1
  }
}

.animate__rotateIn {
  animation-name: rotateIn;
  transform-origin: center
}

@keyframes rotateInDownLeft {
  0% {
      transform: rotate(-45deg);
      opacity: 0
  }

  to {
      transform: translateZ(0);
      opacity: 1
  }
}

.animate__rotateInDownLeft {
  animation-name: rotateInDownLeft;
  transform-origin: left bottom
}

@keyframes rotateInDownRight {
  0% {
      transform: rotate(45deg);
      opacity: 0
  }

  to {
      transform: translateZ(0);
      opacity: 1
  }
}

.animate__rotateInDownRight {
  animation-name: rotateInDownRight;
  transform-origin: right bottom
}

@keyframes rotateInUpLeft {
  0% {
      transform: rotate(45deg);
      opacity: 0
  }

  to {
      transform: translateZ(0);
      opacity: 1
  }
}

.animate__rotateInUpLeft {
  animation-name: rotateInUpLeft;
  transform-origin: left bottom
}

@keyframes rotateInUpRight {
  0% {
      transform: rotate(-90deg);
      opacity: 0
  }

  to {
      transform: translateZ(0);
      opacity: 1
  }
}

.animate__rotateInUpRight {
  animation-name: rotateInUpRight;
  transform-origin: right bottom
}

@keyframes rotateOut {
  0% {
      opacity: 1
  }

  to {
      transform: rotate(200deg);
      opacity: 0
  }
}

.animate__rotateOut {
  animation-name: rotateOut;
  transform-origin: center
}

@keyframes rotateOutDownLeft {
  0% {
      opacity: 1
  }

  to {
      transform: rotate(45deg);
      opacity: 0
  }
}

.animate__rotateOutDownLeft {
  animation-name: rotateOutDownLeft;
  transform-origin: left bottom
}

@keyframes rotateOutDownRight {
  0% {
      opacity: 1
  }

  to {
      transform: rotate(-45deg);
      opacity: 0
  }
}

.animate__rotateOutDownRight {
  animation-name: rotateOutDownRight;
  transform-origin: right bottom
}

@keyframes rotateOutUpLeft {
  0% {
      opacity: 1
  }

  to {
      transform: rotate(-45deg);
      opacity: 0
  }
}

.animate__rotateOutUpLeft {
  animation-name: rotateOutUpLeft;
  transform-origin: left bottom
}

@keyframes rotateOutUpRight {
  0% {
      opacity: 1
  }

  to {
      transform: rotate(90deg);
      opacity: 0
  }
}

.animate__rotateOutUpRight {
  animation-name: rotateOutUpRight;
  transform-origin: right bottom
}

@keyframes hinge {
  0% {
      animation-timing-function: ease-in-out
  }

  20%,60% {
      transform: rotate(80deg);
      animation-timing-function: ease-in-out
  }

  40%,80% {
      transform: rotate(60deg);
      animation-timing-function: ease-in-out;
      opacity: 1
  }

  to {
      transform: translate3d(0,700px,0);
      opacity: 0
  }
}

.animate__hinge {
  animation-duration: 2s;
  animation-duration: calc(var(--animate-duration)*2);
  animation-name: hinge;
  transform-origin: top left
}

@keyframes jackInTheBox {
  0% {
      opacity: 0;
      transform: scale(.1) rotate(30deg);
      transform-origin: center bottom
  }

  50% {
      transform: rotate(-10deg)
  }

  70% {
      transform: rotate(3deg)
  }

  to {
      opacity: 1;
      transform: scale(1)
  }
}

.animate__jackInTheBox {
  animation-name: jackInTheBox
}

@keyframes rollIn {
  0% {
      opacity: 0;
      transform: translate3d(-100%,0,0) rotate(-120deg)
  }

  to {
      opacity: 1;
      transform: translateZ(0)
  }
}

.animate__rollIn {
  animation-name: rollIn
}

@keyframes rollOut {
  0% {
      opacity: 1
  }

  to {
      opacity: 0;
      transform: translate3d(100%,0,0) rotate(120deg)
  }
}

.animate__rollOut {
  animation-name: rollOut
}

@keyframes zoomIn {
  0% {
      opacity: 0;
      transform: scale3d(.3,.3,.3)
  }

  50% {
      opacity: 1
  }
}

.animate__zoomIn {
  animation-name: zoomIn
}

@keyframes zoomInDown {
  0% {
      opacity: 0;
      transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
      animation-timing-function: cubic-bezier(.55,.055,.675,.19)
  }

  60% {
      opacity: 1;
      transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
      animation-timing-function: cubic-bezier(.175,.885,.32,1)
  }
}

.animate__zoomInDown {
  animation-name: zoomInDown
}

@keyframes zoomInLeft {
  0% {
      opacity: 0;
      transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0);
      animation-timing-function: cubic-bezier(.55,.055,.675,.19)
  }

  60% {
      opacity: 1;
      transform: scale3d(.475,.475,.475) translate3d(10px,0,0);
      animation-timing-function: cubic-bezier(.175,.885,.32,1)
  }
}

.animate__zoomInLeft {
  animation-name: zoomInLeft
}

@keyframes zoomInRight {
  0% {
      opacity: 0;
      transform: scale3d(.1,.1,.1) translate3d(1000px,0,0);
      animation-timing-function: cubic-bezier(.55,.055,.675,.19)
  }

  60% {
      opacity: 1;
      transform: scale3d(.475,.475,.475) translate3d(-10px,0,0);
      animation-timing-function: cubic-bezier(.175,.885,.32,1)
  }
}

.animate__zoomInRight {
  animation-name: zoomInRight
}

@keyframes zoomInUp {
  0% {
      opacity: 0;
      transform: scale3d(.1,.1,.1) translate3d(0,1000px,0);
      animation-timing-function: cubic-bezier(.55,.055,.675,.19)
  }

  60% {
      opacity: 1;
      transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
      animation-timing-function: cubic-bezier(.175,.885,.32,1)
  }
}

.animate__zoomInUp {
  animation-name: zoomInUp
}

@keyframes zoomOut {
  0% {
      opacity: 1
  }

  50% {
      opacity: 0;
      transform: scale3d(.3,.3,.3)
  }

  to {
      opacity: 0
  }
}

.animate__zoomOut {
  animation-name: zoomOut
}

@keyframes zoomOutDown {
  40% {
      opacity: 1;
      transform: scale3d(.475,.475,.475) translate3d(0,-60px,0);
      animation-timing-function: cubic-bezier(.55,.055,.675,.19)
  }

  to {
      opacity: 0;
      transform: scale3d(.1,.1,.1) translate3d(0,2000px,0);
      animation-timing-function: cubic-bezier(.175,.885,.32,1)
  }
}

.animate__zoomOutDown {
  animation-name: zoomOutDown;
  transform-origin: center bottom
}

@keyframes zoomOutLeft {
  40% {
      opacity: 1;
      transform: scale3d(.475,.475,.475) translate3d(42px,0,0)
  }

  to {
      opacity: 0;
      transform: scale(.1) translate3d(-2000px,0,0)
  }
}

.animate__zoomOutLeft {
  animation-name: zoomOutLeft;
  transform-origin: left center
}

@keyframes zoomOutRight {
  40% {
      opacity: 1;
      transform: scale3d(.475,.475,.475) translate3d(-42px,0,0)
  }

  to {
      opacity: 0;
      transform: scale(.1) translate3d(2000px,0,0)
  }
}

.animate__zoomOutRight {
  animation-name: zoomOutRight;
  transform-origin: right center
}

@keyframes zoomOutUp {
  40% {
      opacity: 1;
      transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
      animation-timing-function: cubic-bezier(.55,.055,.675,.19)
  }

  to {
      opacity: 0;
      transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0);
      animation-timing-function: cubic-bezier(.175,.885,.32,1)
  }
}

.animate__zoomOutUp {
  animation-name: zoomOutUp;
  transform-origin: center bottom
}

@keyframes slideInDown {
  0% {
      transform: translate3d(0,-100%,0);
      visibility: visible
  }

  to {
      transform: translateZ(0)
  }
}

.animate__slideInDown {
  animation-name: slideInDown
}

@keyframes slideInLeft {
  0% {
      transform: translate3d(-100%,0,0);
      visibility: visible
  }

  to {
      transform: translateZ(0)
  }
}

.animate__slideInLeft {
  animation-name: slideInLeft
}

@keyframes slideInRight {
  0% {
      transform: translate3d(100%,0,0);
      visibility: visible
  }

  to {
      transform: translateZ(0)
  }
}

.animate__slideInRight {
  animation-name: slideInRight
}

@keyframes slideInUp {
  0% {
      transform: translate3d(0,100%,0);
      visibility: visible
  }

  to {
      transform: translateZ(0)
  }
}

.animate__slideInUp {
  animation-name: slideInUp
}

@keyframes slideOutDown {
  0% {
      transform: translateZ(0)
  }

  to {
      visibility: hidden;
      transform: translate3d(0,100%,0)
  }
}

.animate__slideOutDown {
  animation-name: slideOutDown
}

@keyframes slideOutLeft {
  0% {
      transform: translateZ(0)
  }

  to {
      visibility: hidden;
      transform: translate3d(-100%,0,0)
  }
}

.animate__slideOutLeft {
  animation-name: slideOutLeft
}

@keyframes slideOutRight {
  0% {
      transform: translateZ(0)
  }

  to {
      visibility: hidden;
      transform: translate3d(100%,0,0)
  }
}

.animate__slideOutRight {
  animation-name: slideOutRight
}

@keyframes slideOutUp {
  0% {
      transform: translateZ(0)
  }

  to {
      visibility: hidden;
      transform: translate3d(0,-100%,0)
  }
}

.animate__slideOutUp {
  animation-name: slideOutUp
}

._sound-icon_1u4p8_1 {
  display: flex;
  flex-direction: column;
  align-items: center
}

._sound-wave_1u4p8_13 {
  width: auto;
  height: 23px;
  display: flex;
  justify-content: space-around;
  align-items: center
}

._sound-bar_1u4p8_29 {
  display: block;
  width: 4px;
  margin-right: 4px;
  height: 23px;
  border-radius: 20px;
  background: #fff;
  animation: _sound_1u4p8_1 0ms -.8s linear infinite alternate;
  transition: height .8s
}

@keyframes _sound_1u4p8_1 {
  0% {
      opacity: .35;
      height: 3px
  }

  to {
      opacity: 1;
      height: 23px
  }
}

._sound-bar_1u4p8_29:nth-child(1) {
  height: 1px;
  animation-duration: 574ms
}

._sound-bar_1u4p8_29:nth-child(2) {
  height: 5px;
  animation-duration: 533ms
}

._sound-bar_1u4p8_29:nth-child(3) {
  height: 9px;
  animation-duration: 507ms
}

._sound-bar_1u4p8_29:nth-child(4) {
  height: 13px;
  animation-duration: 558ms
}

._sound-bar_1u4p8_29:nth-child(5) {
  height: 15px;
  animation-duration: .5s
}

._sound-bar_1u4p8_29:nth-child(6) {
  height: 16px;
  animation-duration: 527ms
}

._sound-bar_1u4p8_29:nth-child(7) {
  height: 17px;
  animation-duration: 541ms
}

._sound-bar_1u4p8_29:nth-child(8) {
  height: 18px;
  animation-duration: 519ms
}

._sound-bar_1u4p8_29:nth-child(9) {
  height: 20px;
  animation-duration: 587ms
}

._sound-bar_1u4p8_29:nth-child(10) {
  height: 23px;
  animation-duration: 542ms
}

.ReactVirtualized__Table__headerRow {
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
  align-items: center
}

.ReactVirtualized__Table__row {
  display: flex;
  flex-direction: row;
  align-items: center
}

.ReactVirtualized__Table__headerTruncatedText {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden
}

.ReactVirtualized__Table__headerColumn,.ReactVirtualized__Table__rowColumn {
  margin-right: 10px;
  min-width: 0px
}

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

.ReactVirtualized__Table__headerColumn:first-of-type,.ReactVirtualized__Table__rowColumn:first-of-type {
  margin-left: 10px
}

.ReactVirtualized__Table__sortableHeaderColumn {
  cursor: pointer
}

.ReactVirtualized__Table__sortableHeaderIconContainer {
  display: flex;
  align-items: center
}

.ReactVirtualized__Table__sortableHeaderIcon {
  flex: 0 0 24px;
  height: 1em;
  width: 1em;
  fill: currentColor
}

:root {
  font-family: Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: #ffffffde;
  background-color: #242424;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit
}

a:hover {
  color: #535bf2
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh
}

h1 {
  font-size: 3.2em;
  line-height: 1.1
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: .6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  /* background-color: #1a1a1a; */
  cursor: pointer;
  transition: border-color .25s
}

button:hover {
  border-color: #646cff
}

button:focus,button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color
}

@media (prefers-color-scheme: light) {
  :root {
      color:#213547;
      background-color: #fff
  }

  a:hover {
      color: #747bff
  }

  button {
      background-color: #f9f9f9
  }
}


.journal-entries-container {
  max-height: 512px; /* ตั้งค่าความสูงสูงสุดของกล่องข้อความ */
  overflow-y: auto; /* เพื่อให้มีการเลื่อนเมื่อมีเนื้อหามากกว่าที่จอสามารถแสดงได้ */
  display: flex; /* เพื่อให้เนื้อหายืดหยุ่นเพื่อให้แสดงเนื้อหาทั้งหมด */
  flex-direction: column; /* ให้เนื้อหาแสดงเรียงตามแนวดิ่ง */
}

.journal-entry {
  margin-bottom: 4px; /* ให้กล่องข้อความมีระยะห่างด้านล่างเพื่อความเป็นระเบียบ */
}



#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);


  z-index: 1000;
  display: none;
  max-width: 90%; /* ปรับขนาด max-width เพื่อไม่ให้ล้นจอ */
  width: 100%;

}


#codePopup {
  position: fixed;
  display: none;
  z-index: 99;
}


.btn-small {
  padding: 5px 10px; /* ปรับขนาดของ padding เพื่อทำให้ปุ่มเล็กลง */
  font-size: 25px; /* ปรับขนาดตัวอักษรเพื่อให้เข้ากับขนาดของปุ่ม */
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.scroll-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

.scroll-indicator svg {
  width: 1.5rem;
  height: 1.5rem;
  color: #4B5563;
}

@media (max-width: 640px) {
  .sm\:w-\[32rem\] {
    width: 100%;
  }
}