/* video-gif.blade.php: Tailwind step 2. Utilities live in the markup; built by work/tw/build-tools.sh (content: video-gif.classes). */

/*! tw-utilities */

:where(.cmt) .tw-pointer-events-none {
  pointer-events: none
}

:where(.cmt) .tw-absolute {
  position: absolute
}

:where(.cmt) .tw-relative {
  position: relative
}

:where(.cmt) .tw-inset-\[0\] {
  inset: 0
}

:where(.cmt) .tw-bottom-\[-2px\] {
  bottom: -2px
}

:where(.cmt) .tw-bottom-\[0\] {
  bottom: 0
}

:where(.cmt) .tw-top-\[-2px\] {
  top: -2px
}

:where(.cmt) .tw-top-\[0\] {
  top: 0
}

:where(.cmt) .tw-z-\[2\] {
  z-index: 2
}

:where(.cmt) .tw-z-\[3\] {
  z-index: 3
}

:where(.cmt) .tw-m-\[0_18px\] {
  margin: 0 18px
}

:where(.cmt) .tw-flex {
  display: flex
}

:where(.cmt) .tw-h-\[56px\] {
  height: 56px
}

:where(.cmt) .tw-w-\[18px\] {
  width: 18px
}

:where(.cmt) .tw-w-\[2px\] {
  width: 2px
}

:where(.cmt) .tw-cursor-pointer {
  cursor: pointer
}

:where(.cmt) .tw-items-center {
  align-items: center
}

:where(.cmt) .tw-justify-center {
  justify-content: center
}

:where(.cmt) .tw-overflow-hidden {
  overflow: hidden
}

:where(.cmt) .tw-rounded-\[4px\] {
  border-radius: 4px
}

:where(.cmt) .tw-css-border-\[3px_solid_\#fff\] {
  border: 3px solid #fff
}

:where(.cmt) .tw-css-background-\[\#101828\] {
  background: #101828
}

:where(.cmt) .tw-css-background-\[\#FDB022\] {
  background: #FDB022
}

:where(.cmt) .tw-css-background-\[\#fff\] {
  background: #fff
}

:where(.cmt) .tw-css-background-\[rgba\(11\,_15\,_23\,_\.68\)\] {
  background: rgba(11, 15, 23, .68)
}

:where(.cmt) .tw-css-border-left-width-\[0\] {
  border-left-width: 0
}

:where(.cmt) .tw-css-border-right-width-\[0\] {
  border-right-width: 0
}

:where(.cmt) .tw-css-box-shadow-\[0_0_0_1px_rgba\(0\,_0\,_0\,_\.25\)\] {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25)
}

:where(.cmt) .tw-css-cursor-\[ew-resize\] {
  cursor: ew-resize
}

:where(.cmt) .tw-css-touch-action-\[none\] {
  touch-action: none
}

@media (max-width: 575.98px) {
  :where(.cmt) .mq1-max-575-98\:tw-h-\[48px\] {
    height: 48px
  }
}

:where(.cmt) .\[\&\#vg-drop\.is-dragover\]\:tw-css-box-shadow-\[inset_0_0_0_1\.5px_var\(--ink\2c _\#1D1D1F\)\]#vg-drop.is-dragover {
  box-shadow: inset 0 0 0 1.5px var(--ink, #1D1D1F)
}

:where(.cmt) .\[\&\#vg-fill\]\:tw-h-full#vg-fill {
  height: 100%
}

:where(.cmt) .\[\&\#vg-fill\]\:tw-w-\[0\]#vg-fill {
  width: 0
}

:where(.cmt) .\[\&\#vg-fill\]\:tw-rounded-\[999px\]#vg-fill {
  border-radius: 999px
}

:where(.cmt) .\[\&\#vg-fill\]\:tw-css-background-\[var\(--ink\2c _\#1D1D1F\)\]#vg-fill {
  background: var(--ink, #1D1D1F)
}

:where(.cmt) .\[\&\#vg-fill\]\:tw-css-transition-\[width_\.2s\]#vg-fill {
  transition: width .2s
}

:where(.cmt) .\[\&\#vg-loop\]\:tw-m-\[0\]#vg-loop {
  margin: 0
}

:where(.cmt) .\[\&\#vg-loop\]\:tw-h-\[16px\]#vg-loop {
  height: 16px
}

:where(.cmt) .\[\&\#vg-loop\]\:tw-w-\[16px\]#vg-loop {
  width: 16px
}

:where(.cmt) .\[\&\#vg-loop\]\:tw-css-accent-color-\[var\(--ink\2c _\#1D1D1F\)\]#vg-loop {
  accent-color: var(--ink, #1D1D1F)
}

:where(.cmt) .\[\&\#vg-out-gif\]\:tw-m-\[0_auto\]#vg-out-gif {
  margin: 0 auto
}

:where(.cmt) .\[\&\#vg-out-gif\]\:tw-block#vg-out-gif {
  display: block
}

:where(.cmt) .\[\&\#vg-out-gif\]\:tw-max-h-\[62vh\]#vg-out-gif {
  max-height: 62vh
}

:where(.cmt) .\[\&\#vg-out-gif\]\:tw-max-w-\[100\%\]#vg-out-gif {
  max-width: 100%
}

:where(.cmt) .\[\&\#vg-out-gif\]\:tw-rounded-\[var\(--r-lg\2c _20px\)\]#vg-out-gif {
  border-radius: var(--r-lg, 20px)
}

:where(.cmt) .\[\&\#vg-out-video\]\:tw-m-\[0_auto\]#vg-out-video {
  margin: 0 auto
}

:where(.cmt) .\[\&\#vg-out-video\]\:tw-block#vg-out-video {
  display: block
}

:where(.cmt) .\[\&\#vg-out-video\]\:tw-max-h-\[62vh\]#vg-out-video {
  max-height: 62vh
}

:where(.cmt) .\[\&\#vg-out-video\]\:tw-max-w-\[100\%\]#vg-out-video {
  max-width: 100%
}

:where(.cmt) .\[\&\#vg-out-video\]\:tw-rounded-\[var\(--r-lg\2c _20px\)\]#vg-out-video {
  border-radius: var(--r-lg, 20px)
}

:where(.cmt) .\[\&\#vg-out-video\]\:tw-css-background-\[var\(--inset\2c _\#F5F5F7\)\]#vg-out-video {
  background: var(--inset, #F5F5F7)
}

:where(.cmt) .\[\&\#vg-stats_b\]\:tw-font-medium#vg-stats b {
  font-weight: 500
}

:where(.cmt) .\[\&\#vg-stats_b\]\:tw-css-color-\[var\(--ink\2c _\#1D1D1F\)\]#vg-stats b {
  color: var(--ink, #1D1D1F)
}

:where(.cmt) .\[\&\:\:after\]\:tw-h-\[20px\]::after {
  height: 20px
}

:where(.cmt) .\[\&\:\:after\]\:tw-w-\[3px\]::after {
  width: 3px
}

:where(.cmt) .\[\&\:\:after\]\:tw-rounded-\[2px\]::after {
  border-radius: 2px
}

:where(.cmt) .\[\&\:\:after\]\:tw-css-background-\[\#98A2B3\]::after {
  background: #98A2B3
}

:where(.cmt) .\[\&\:\:after\]\:tw-css-content-\[\'\'\]::after {
  content: ''
}

:where(.cmt) .\[\&\[data-h\=end\]\]\:tw-rounded-\[0_12px_12px_0\][data-h=end] {
  border-radius: 0 12px 12px 0
}

:where(.cmt) .\[\&\[data-h\=start\]\]\:tw-rounded-\[12px_0_0_12px\][data-h=start] {
  border-radius: 12px 0 0 12px
}

:where(.cmt) .\[\&\[data-h\=start\]\]\:tw-css-transform-\[translateX\(-100\%\)\][data-h=start] {
  transform: translateX(-100%)
}

:where(.cmt) .\[\&_button\.active\]\:tw-css-background-\[var\(--surface\2c _\#fff\)\] button.active {
  background: var(--surface, #fff)
}

:where(.cmt) .\[\&_button\.active\]\:tw-css-box-shadow-\[0_1px_2px_rgba\(17\2c _19\2c _21\2c _\.1\)\] button.active {
  box-shadow: 0 1px 2px rgba(17, 19, 21, .1)
}

:where(.cmt) .\[\&_button\.active\]\:tw-css-color-\[var\(--ink\2c _\#1D1D1F\)\] button.active {
  color: var(--ink, #1D1D1F)
}

:where(.cmt) .\[\&_img\]\:tw-absolute img {
  position: absolute
}

:where(.cmt) .\[\&_img\]\:tw-inset-\[0\] img {
  inset: 0
}

:where(.cmt) .\[\&_img\]\:tw-block img {
  display: block
}

:where(.cmt) .\[\&_img\]\:tw-h-full img {
  height: 100%
}

:where(.cmt) .\[\&_img\]\:tw-w-full img {
  width: 100%
}

:where(.cmt) .\[\&_img\]\:tw-min-w-\[0\] img {
  min-width: 0
}

:where(.cmt) .\[\&_img\]\:tw-object-contain img {
  object-fit: contain
}

:where(.cmt) .\[\&_img\]\:tw-object-cover img {
  object-fit: cover
}

:where(.cmt) .\[\&_img\]\:tw-css-flex-\[1\] img {
  flex: 1
}

:where(.cmt) .\[\&_video\]\:tw-absolute video {
  position: absolute
}

:where(.cmt) .\[\&_video\]\:tw-inset-\[0\] video {
  inset: 0
}

:where(.cmt) .\[\&_video\]\:tw-block video {
  display: block
}

:where(.cmt) .\[\&_video\]\:tw-h-full video {
  height: 100%
}

:where(.cmt) .\[\&_video\]\:tw-w-full video {
  width: 100%
}

:where(.cmt) .\[\&_video\]\:tw-object-contain video {
  object-fit: contain
}