/*!******************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-nav-opts/poster-nav-opts.module.scss ***!
  \******************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.lASCESW1YbqCcfOeX2F8 {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.BH3Sa_LYxKpBEBXhP0RQ {
  background-color: #FFFFFF;
  -webkit-transition: bottom 0.35s cubic-bezier(0.23, 1, 0.32, 1) 0.5s, width 0.2s ease-out;
  transition: bottom 0.35s cubic-bezier(0.23, 1, 0.32, 1) 0.5s, width 0.2s ease-out;
  bottom: -60px;
  box-shadow: 0 0 12px rgba(20, 19, 37, 0.1);
  box-sizing: border-box;
  color: #2C2B44;
  height: 40px;
  position: fixed;
}
.BH3Sa_LYxKpBEBXhP0RQ.xHkBMrvYJ9mgPxcSq7f9.AGIbS3LUPPcQ9EnXZH0Q {
  bottom: 72px;
}
.BH3Sa_LYxKpBEBXhP0RQ.xHkBMrvYJ9mgPxcSq7f9.AGIbS3LUPPcQ9EnXZH0Q.Pth_5lzgFzaSPUwQd0Rd {
  bottom: 76px;
}
.BH3Sa_LYxKpBEBXhP0RQ.AGIbS3LUPPcQ9EnXZH0Q {
  bottom: 12px;
}
.BH3Sa_LYxKpBEBXhP0RQ.AGIbS3LUPPcQ9EnXZH0Q.Pth_5lzgFzaSPUwQd0Rd {
  bottom: 20px;
}
.BH3Sa_LYxKpBEBXhP0RQ .ppJfTKymItay2QRvqcKq.HHD6DzUltG4lesUMxNkQ {
  background-color: rgba(1, 1, 1, 0);
  height: initial;
  width: 30px;
}

.WGx3VtWxDkJWJOPluQww {
  gap: 4px;
}

.tLuXbYjmsSJ9oVByYF4c {
  justify-content: flex-end;
  overflow: hidden;
  position: absolute !important;
  right: 336px;
  transition: right 200ms ease-in-out, width 200ms ease-in-out;
}
.tLuXbYjmsSJ9oVByYF4c.JIewxz5asc5GboyoqYgG {
  right: 330px;
}
.tLuXbYjmsSJ9oVByYF4c.SxoQWd_cLiwe6z37X4Ug {
  right: 40px;
}
.tLuXbYjmsSJ9oVByYF4c.SxoQWd_cLiwe6z37X4Ug.SOJaRA29U_440iWUA7fn {
  right: 44px;
}
/*!**************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/audio-playlist-item/audio-playlist-item.module.scss ***!
  \**************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.CumeNdX2nolUPmOP1xqU {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.N6KAs7DtxHkpzv53DHNx {
  position: absolute !important;
  right: 334px;
  top: 76px;
  transition: right 0.2s ease-in-out;
  z-index: 101;
}
.N6KAs7DtxHkpzv53DHNx.eqLGIktIpaWLpjwVvNXl {
  right: 40px;
}

._BX9NdO3AwCM4k35eRvt {
  position: relative;
}

.e2Pt_U8GezY3XvU_GEeI {
  position: absolute;
  right: -6px;
  top: -12px;
}
/*!***************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/save-reminder-notification/save-reminder-notification.module.scss ***!
  \***************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.j_ThBOJ7QMXDLSVl6IwW {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
/*
Animation styles and keyframes
*/
.N4Om3SwiwssYPomVy86B {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.N4Om3SwiwssYPomVy86B.XoY83c1ryjkxvIfsKlCj {
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
.N4Om3SwiwssYPomVy86B.onj6tMuZM4kOeatx6_zW {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.N4Om3SwiwssYPomVy86B.x0a_vldXlfADqwFDLn_P {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}

.N4Om3SwiwssYPomVy86B.DBsJJt3MThqXIe0oOLlc {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

.N4Om3SwiwssYPomVy86B.PiRjiEDYNrNhYSUF8utH {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

.N4Om3SwiwssYPomVy86B.yoNLsdWZWKzOqU6XAx8X {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.N4Om3SwiwssYPomVy86B.XverCfsGT7fcUo69vGvt {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
}

.N4Om3SwiwssYPomVy86B.XQ78UhON9IuG0AxL8rzc {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.N4Om3SwiwssYPomVy86B.C2DF4i5nRokk204A2Low {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
}

.FtWm1F4Y3bDLWlUoTKfw {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.l17jY3_FCGLSzJlaQEV1 {
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

.A4S_ycjB81erogrABjjN {
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.knk3jSNEmraMMs2qvkWt .EWPknZjjlaVdX0e6YN4u, .knk3jSNEmraMMs2qvkWt .diGjtOKkfVc1GksaD0Mv {
  overflow: hidden;
}
.knk3jSNEmraMMs2qvkWt:hover .EWPknZjjlaVdX0e6YN4u::before, .knk3jSNEmraMMs2qvkWt:hover .diGjtOKkfVc1GksaD0Mv::before, .knk3jSNEmraMMs2qvkWt:focus .EWPknZjjlaVdX0e6YN4u::before, .knk3jSNEmraMMs2qvkWt:focus .diGjtOKkfVc1GksaD0Mv::before, .knk3jSNEmraMMs2qvkWt:focus-within .EWPknZjjlaVdX0e6YN4u::before, .knk3jSNEmraMMs2qvkWt:focus-within .diGjtOKkfVc1GksaD0Mv::before {
  animation: LWMwPGbLAqcAk2bQDuDG 1800ms cubic-bezier(0.68, -0.6, 0.32, 1.6) 1;
  display: block;
  transform-box: fill-box;
  transform-origin: center;
}

.q6lqrHurZoYoIqxSYfu5 .EWPknZjjlaVdX0e6YN4u {
  overflow: hidden;
}
.q6lqrHurZoYoIqxSYfu5 .EWPknZjjlaVdX0e6YN4u::before {
  animation: yBb2RQ02dOhXOYgWpLVw 2500ms cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
  display: block;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes LWMwPGbLAqcAk2bQDuDG {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  30% {
    transform: rotate(-56deg) translateX(0);
  }
  34% {
    transform: rotate(-38deg) translateX(0);
  }
  38% {
    transform: rotate(-50deg) translateX(0);
  }
  42% {
    transform: rotate(-45deg) translateX(0);
  }
  47% {
    transform: rotate(-45deg) translateX(0);
  }
  57% {
    opacity: 1;
    transform: rotate(-45deg) translateX(20px);
  }
  58% {
    opacity: 0;
    transform: rotate(-45deg) translateX(20px);
  }
  59% {
    opacity: 0;
    transform: rotate(-45deg) translateX(-20px);
  }
  60% {
    opacity: 1;
    transform: rotate(-45deg) translateX(-20px);
  }
  73% {
    transform: rotate(-45deg) translateX(0);
  }
  78% {
    transform: rotate(-45deg) translateX(0);
  }
  88% {
    transform: rotate(12deg) translateX(0);
  }
  93% {
    transform: rotate(-8deg) translateX(0);
  }
  96% {
    transform: rotate(3deg) translateX(0);
  }
  100% {
    transform: rotate(0) translateX(0);
  }
}
@keyframes yBb2RQ02dOhXOYgWpLVw {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  30% {
    transform: rotate(-56deg) translateX(0);
  }
  34% {
    transform: rotate(-38deg) translateX(0);
  }
  38% {
    transform: rotate(-50deg) translateX(0);
  }
  42% {
    transform: rotate(-45deg) translateX(0);
  }
  47% {
    transform: rotate(-45deg) translateX(0);
  }
  57% {
    opacity: 1;
    transform: rotate(-45deg) translateX(50px);
  }
  58% {
    opacity: 0;
    transform: rotate(-45deg) translateX(50px);
  }
  59% {
    opacity: 0;
    transform: rotate(-45deg) translateX(-50px);
  }
  60% {
    opacity: 1;
    transform: rotate(-45deg) translateX(-50px);
  }
  73% {
    transform: rotate(-45deg) translateX(0);
  }
  78% {
    transform: rotate(-45deg) translateX(0);
  }
  88% {
    transform: rotate(12deg) translateX(0);
  }
  93% {
    transform: rotate(-8deg) translateX(0);
  }
  96% {
    transform: rotate(3deg) translateX(0);
  }
  100% {
    transform: rotate(0) translateX(0);
  }
}
.QAvlCvr5RdLuUWXh8nfl {
  -webkit-transform-origin: left; /* Chrome, Safari, Opera */
  transform-origin: left;
}

.xkJ7rAdqLPlfsYUZ0V5Q {
  -webkit-transform-origin: right; /* Chrome, Safari, Opera */
  transform-origin: right;
}

.Pm5UEgWoc59hB3ntaAjr {
  -webkit-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
}
.Pm5UEgWoc59hB3ntaAjr:hover {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
}

.zqHH5ylUw6g9zYGDAV07 {
  -webkit-transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
}
.zqHH5ylUw6g9zYGDAV07:hover, .zqHH5ylUw6g9zYGDAV07:focus, .zqHH5ylUw6g9zYGDAV07:focus-within {
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Chrome, Safari, Opera */
  transform: scale(1.05);
}

.UBvrfQHKea7knFj_OKYl {
  -webkit-transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.UBvrfQHKea7knFj_OKYl.Op6p9WfNUHUsyRICOaS5 {
  transition-duration: 100ms;
}
.UBvrfQHKea7knFj_OKYl:hover, .UBvrfQHKea7knFj_OKYl:focus, .UBvrfQHKea7knFj_OKYl:focus-within {
  -ms-transform: translate(0, -2%); /* IE 9 */
  -webkit-transform: translate(0, -2%); /* Chrome, Safari, Opera */
  transform: translate(0, -2%);
}

.EF1JNXm0T7X5_UUT0IQO {
  -webkit-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  opacity: 1;
}
.EF1JNXm0T7X5_UUT0IQO:hover {
  opacity: 0.8;
}

.Pwe8m77wjRpKZXk2xEy4 {
  opacity: 1;
  -webkit-transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.Pwe8m77wjRpKZXk2xEy4:hover {
  -ms-transform: scale3d(1.15, 1.15, 1.15); /* IE 9 */
  -webkit-transform: scale3d(1.15, 1.15, 1.15); /* Chrome, Safari, Opera */
  transform: scale3d(1.15, 1.15, 1.15);
}

.GS3ToB2fuQDq56PV7dgW {
  -webkit-transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
  transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
}

@-webkit-keyframes N88zm1JFAELODdiXeJ1r {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes N88zm1JFAELODdiXeJ1r {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.N88zm1JFAELODdiXeJ1r {
  -webkit-animation-name: N88zm1JFAELODdiXeJ1r;
  animation-name: N88zm1JFAELODdiXeJ1r;
}

@-webkit-keyframes _NbdhSTsptQNMeuCLbS_ {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@keyframes _NbdhSTsptQNMeuCLbS_ {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@-webkit-keyframes OQ2sEGTZD_XcTTUC9qhG {
  11.1% {
    transform: none;
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
  100% {
    transform: none;
  }
}
@keyframes OQ2sEGTZD_XcTTUC9qhG {
  11.1% {
    transform: none;
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
  100% {
    transform: none;
  }
}
@-webkit-keyframes SAztqHAIEmIQUw31yxfC {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes SAztqHAIEmIQUw31yxfC {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes kUd9uEfKO77DGWprXQ7x {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@keyframes kUd9uEfKO77DGWprXQ7x {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@-webkit-keyframes xyEKyIzvHrsT0tcJZ_cl {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@keyframes xyEKyIzvHrsT0tcJZ_cl {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@-webkit-keyframes RkiuGJUqsx57WBHlW6pK {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@keyframes RkiuGJUqsx57WBHlW6pK {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes DVF_YrsZ87GZBqrvtc2a {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@keyframes DVF_YrsZ87GZBqrvtc2a {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes h7N9ELn5eX2oHFYCZcvY {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@keyframes h7N9ELn5eX2oHFYCZcvY {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@-webkit-keyframes JneGg1RtClc7VJTb3j4x {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@keyframes JneGg1RtClc7VJTb3j4x {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@-webkit-keyframes BH1eY7PuL4uLYGJ1tLC4 {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@keyframes BH1eY7PuL4uLYGJ1tLC4 {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes qnOmRrWJxJpX30Myd7Ex {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@keyframes qnOmRrWJxJpX30Myd7Ex {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes _YVxo3h6bUGcQmdd1DiC {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@keyframes _YVxo3h6bUGcQmdd1DiC {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@-webkit-keyframes jjtWnRUn6kWQaZo4UHUl {
  0% {
    transform: scale(0.3);
    opacity: 0.4;
  }
  25% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(0.7);
    opacity: 0.6;
  }
  75% {
    transform: scale(1);
    opacity: 0.8;
  }
  90%, 100% {
    transform: scale(0.8);
    opacity: 1;
  }
}
@keyframes jjtWnRUn6kWQaZo4UHUl {
  0% {
    transform: scale(0.3);
    opacity: 0.4;
  }
  25% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(0.7);
    opacity: 0.6;
  }
  75% {
    transform: scale(1);
    opacity: 0.8;
  }
  90%, 100% {
    transform: scale(0.8);
    opacity: 1;
  }
}
@-webkit-keyframes PFMCCyfB5184MexzRJfT {
  0% {
    opacity: 1;
    transform: scale(1.5) translateX(40px) translateY(15px);
  }
  60%, 100% {
    transform: scale(1.5) translateX(-30px) translateY(30px) rotate(90deg);
    opacity: 1;
  }
}
@keyframes PFMCCyfB5184MexzRJfT {
  0% {
    opacity: 1;
    transform: scale(1.5) translateX(40px) translateY(15px);
  }
  60%, 100% {
    transform: scale(1.5) translateX(-30px) translateY(30px) rotate(90deg);
    opacity: 1;
  }
}
@-webkit-keyframes RfoDY_rGEwK2N4ffQPxT {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes RfoDY_rGEwK2N4ffQPxT {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes x92GyAX7vfLNtoOGH9Oo {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes x92GyAX7vfLNtoOGH9Oo {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes JqHpU0VE4I58m4MBmFKp {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes JqHpU0VE4I58m4MBmFKp {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes _ErxtoxyGc9DPYszHcBR {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes _ErxtoxyGc9DPYszHcBR {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes zo1IiVOQtC05Sdr8gNyZ {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@keyframes zo1IiVOQtC05Sdr8gNyZ {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@-webkit-keyframes nzmm3IiVniY00VEiMCD8 {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@keyframes nzmm3IiVniY00VEiMCD8 {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@-webkit-keyframes aKHiBIM7fowj7cTsZn9H {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes aKHiBIM7fowj7cTsZn9H {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.aKHiBIM7fowj7cTsZn9H {
  -webkit-animation-name: aKHiBIM7fowj7cTsZn9H;
  animation-name: aKHiBIM7fowj7cTsZn9H;
}

@-webkit-keyframes UlsnL0CYHml5P0B2KH7z {
  0% {
    top: -100px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
@keyframes UlsnL0CYHml5P0B2KH7z {
  0% {
    top: -100px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
.UlsnL0CYHml5P0B2KH7z {
  -webkit-animation-name: UlsnL0CYHml5P0B2KH7z;
  animation-name: UlsnL0CYHml5P0B2KH7z;
}

@keyframes WhvvuFj4dQ1vUk1jjh93 {
  0% {
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
  }
  100% {
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
  }
}
@-webkit-keyframes WhvvuFj4dQ1vUk1jjh93 {
  0% {
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
  }
  100% {
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
  }
}
@keyframes UIoFOzQPLooAvCGStCSo {
  0% {
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
  }
  100% {
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
  }
}
@-webkit-keyframes UIoFOzQPLooAvCGStCSo {
  0% {
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
  }
  100% {
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
  }
}
@-webkit-keyframes _qfFmgrg2J_D8q9Ylhtx {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes _qfFmgrg2J_D8q9Ylhtx {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
._qfFmgrg2J_D8q9Ylhtx {
  -webkit-animation-name: _qfFmgrg2J_D8q9Ylhtx;
  animation-name: _qfFmgrg2J_D8q9Ylhtx;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes hBvscx0FP1NhWZ6aXcgf {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes hBvscx0FP1NhWZ6aXcgf {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.hBvscx0FP1NhWZ6aXcgf {
  -webkit-animation-name: hBvscx0FP1NhWZ6aXcgf;
  animation-name: hBvscx0FP1NhWZ6aXcgf;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes wpzhNu3SHptWAH2cQrpS {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes wpzhNu3SHptWAH2cQrpS {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.Tvfo6E47BPSbxpi5H9A1 {
  -webkit-transition: background 200ms ease-in-out;
  transition: background 200ms ease-in-out;
}

.wpzhNu3SHptWAH2cQrpS {
  -webkit-animation-name: wpzhNu3SHptWAH2cQrpS;
  animation-name: wpzhNu3SHptWAH2cQrpS;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes y10GLwJZxeL6NAqZJzIw {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes y10GLwJZxeL6NAqZJzIw {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.y10GLwJZxeL6NAqZJzIw {
  -webkit-animation-name: y10GLwJZxeL6NAqZJzIw;
  animation-name: y10GLwJZxeL6NAqZJzIw;
}

@-webkit-keyframes _u1YXlxEf4zKlxYiNMkr {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes _u1YXlxEf4zKlxYiNMkr {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
._u1YXlxEf4zKlxYiNMkr {
  -webkit-animation-name: _u1YXlxEf4zKlxYiNMkr;
  animation-name: _u1YXlxEf4zKlxYiNMkr;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes r06C0v3tLJ9xRBjHHwSx {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes r06C0v3tLJ9xRBjHHwSx {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.r06C0v3tLJ9xRBjHHwSx {
  -webkit-animation-name: r06C0v3tLJ9xRBjHHwSx;
  animation-name: r06C0v3tLJ9xRBjHHwSx;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.gSo_J4k5R4jZVRntgYfW {
  opacity: 0;
  overflow-y: hidden;
  transition-duration: 1s;
  transition-property: all;
  transition-timing-function: ease-in-out;
}
.gSo_J4k5R4jZVRntgYfW:hover {
  opacity: 1;
}

.MD0kQQiA_p_0PcbCzqGh {
  max-height: 250px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.MD0kQQiA_p_0PcbCzqGh.JbkMHSQ3ctfqfevsdoMN {
  max-height: 0;
}

.M4DCSlJlDEm1RJ2pbhCZ {
  max-height: 200px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.M4DCSlJlDEm1RJ2pbhCZ.JbkMHSQ3ctfqfevsdoMN {
  max-height: 0;
}

.cVbpIQKXeSMeuWl0Lgfd {
  max-height: 400px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.cVbpIQKXeSMeuWl0Lgfd.JbkMHSQ3ctfqfevsdoMN {
  max-height: 0;
}

.Mhv36a_mrjhRudteAsMX {
  max-height: 150px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.Mhv36a_mrjhRudteAsMX.JbkMHSQ3ctfqfevsdoMN {
  max-height: 0;
}

.RhKExdWALyl7ja4n9Sdj {
  max-height: 40px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.RhKExdWALyl7ja4n9Sdj.JbkMHSQ3ctfqfevsdoMN {
  max-height: 0;
}

.pWd5b6T29ocHfpZx_NLL {
  transition-duration: 0.4s;
}

.BhPdi6jW9I434DbCboTQ {
  transition-duration: 0.2s;
}

.kUcOQtrHjoYfNtbGS4nF {
  transition-duration: 0.1s;
}

@-webkit-keyframes ERHRPovanzsD9JlJL21O {
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes ERHRPovanzsD9JlJL21O {
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.ERHRPovanzsD9JlJL21O {
  -webkit-animation-name: ERHRPovanzsD9JlJL21O;
  animation-name: ERHRPovanzsD9JlJL21O;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes tRdhlVZgs1Tv1ZCvvOhc {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tRdhlVZgs1Tv1ZCvvOhc {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.tRdhlVZgs1Tv1ZCvvOhc {
  -webkit-animation-name: tRdhlVZgs1Tv1ZCvvOhc;
  animation-name: tRdhlVZgs1Tv1ZCvvOhc;
}

@-webkit-keyframes IUepXnO3v2jq6fWVQPHx {
  0% {
    opacity: 1;
    -ms-transform: scale3d(1, 1, 1); /* IE 9 */
    -webkit-transform: scale3d(1, 1, 1); /* Chrome, Safari, Opera */
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0;
    -ms-transform: scale3d(0.5, 0.5, 0.5); /* IE 9 */
    -webkit-transform: scale3d(0.5, 0.5, 0.5); /* Chrome, Safari, Opera */
    transform: scale3d(0.5, 0.5, 0.5);
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes IUepXnO3v2jq6fWVQPHx {
  0% {
    opacity: 1;
    -ms-transform: scale3d(1, 1, 1); /* IE 9 */
    -webkit-transform: scale3d(1, 1, 1); /* Chrome, Safari, Opera */
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0;
    -ms-transform: scale3d(0.5, 0.5, 0.5); /* IE 9 */
    -webkit-transform: scale3d(0.5, 0.5, 0.5); /* Chrome, Safari, Opera */
    transform: scale3d(0.5, 0.5, 0.5);
  }
  100% {
    opacity: 0;
  }
}
@keyframes IUepXnO3v2jq6fWVQPHx {
  0% {
    opacity: 1;
    -ms-transform: scale3d(1, 1, 1); /* IE 9 */
    -webkit-transform: scale3d(1, 1, 1); /* Chrome, Safari, Opera */
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0;
    -ms-transform: scale3d(0.5, 0.5, 0.5); /* IE 9 */
    -webkit-transform: scale3d(0.5, 0.5, 0.5); /* Chrome, Safari, Opera */
    transform: scale3d(0.5, 0.5, 0.5);
  }
  100% {
    opacity: 0;
  }
}
.IUepXnO3v2jq6fWVQPHx {
  -webkit-animation-name: IUepXnO3v2jq6fWVQPHx;
  animation-name: IUepXnO3v2jq6fWVQPHx;
}

@-webkit-keyframes KJUCiZ8hl3GTUKW94umT {
  0% {
    opacity: 0;
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);
  }
}
@-moz-keyframes KJUCiZ8hl3GTUKW94umT {
  0% {
    opacity: 0;
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);
  }
}
@keyframes KJUCiZ8hl3GTUKW94umT {
  0% {
    opacity: 0;
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);
  }
}
.KJUCiZ8hl3GTUKW94umT {
  -webkit-animation-name: KJUCiZ8hl3GTUKW94umT;
  animation-name: KJUCiZ8hl3GTUKW94umT;
}

.E_OeYsWzBQc_MdhocrUD {
  -webkit-animation-name: E_OeYsWzBQc_MdhocrUD;
  animation-name: E_OeYsWzBQc_MdhocrUD;
  animation-timing-function: ease-in-out;
}

@keyframes E_OeYsWzBQc_MdhocrUD {
  0% {
    top: -30px;
  }
  100% {
    top: 0;
  }
}
.jdIeUjRvVAWP8qBQxI3R {
  -webkit-animation-name: jdIeUjRvVAWP8qBQxI3R;
  animation-name: jdIeUjRvVAWP8qBQxI3R;
  animation-timing-function: ease-in-out;
}

@keyframes jdIeUjRvVAWP8qBQxI3R {
  0% {
    bottom: -60px;
    left: 0;
  }
  100% {
    bottom: -30px;
    left: 30px;
  }
}
.OQ_JBoKsBp8MzCP0b9Z6 {
  -webkit-animation-name: OQ_JBoKsBp8MzCP0b9Z6;
  animation-name: OQ_JBoKsBp8MzCP0b9Z6;
  animation-timing-function: ease-in-out;
}

@keyframes OQ_JBoKsBp8MzCP0b9Z6 {
  0% {
    bottom: -60px;
    right: -30px;
  }
  100% {
    bottom: -30px;
    right: 0;
  }
}
/* Bouncing Loading Box */
@keyframes g_p6hcsNEW9y851BREOR {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 39px;
  }
  75% {
    transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    transform: translateY(0) rotate(90deg);
  }
}
@-webkit-keyframes g_p6hcsNEW9y851BREOR {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    -webkit-transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    -webkit-transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 39px;
  }
  75% {
    -webkit-transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(90deg);
  }
}
@keyframes IfRGpIi5YHOhZ1mdAnTU {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}
@-webkit-keyframes IfRGpIi5YHOhZ1mdAnTU {
  0%, 100% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1);
  }
}
.ZZh1LYT2I0mKx3NycuTh {
  bottom: 0;
  height: 75px;
  left: 0;
  margin: auto;
  position: relative;
  right: 0;
  top: 0;
  width: 49px;
}

.ZZh1LYT2I0mKx3NycuTh:before {
  -webkit-animation: IfRGpIi5YHOhZ1mdAnTU 0.58s linear infinite;
  animation: IfRGpIi5YHOhZ1mdAnTU 0.58s linear infinite;
  background: rgb(0, 0, 0);
  border-radius: 50%;
  content: "";
  height: 5px;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 58px;
  width: 49px;
}

.ZZh1LYT2I0mKx3NycuTh:after {
  -webkit-animation: g_p6hcsNEW9y851BREOR 0.58s linear infinite;
  animation: g_p6hcsNEW9y851BREOR 0.58s linear infinite;
  background: rgb(63, 189, 231);
  border-radius: 3px;
  content: "";
  height: 49px;
  left: 0;
  position: absolute;
  top: 0;
  width: 49px;
}

.ZZh1LYT2I0mKx3NycuTh.rvCcFaj3JjNC5lESvjeV:after {
  background: #fff;
}

/* End of Bouncing Loading Box */
@-webkit-keyframes NTFViaGiytX17B_k0lzD {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-moz-keyframes NTFViaGiytX17B_k0lzD {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes NTFViaGiytX17B_k0lzD {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-webkit-keyframes s6c8dUGEqKBHNbXkcxHO {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes s6c8dUGEqKBHNbXkcxHO {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 50%, 90% {
    -webkit-transform: translate3d(-2px, 0, 0);
    transform: translate3d(-2px, 0, 0);
  }
  30%, 70% {
    -webkit-transform: translate3d(2px, 0, 0);
    transform: translate3d(2px, 0, 0);
  }
}
.s6c8dUGEqKBHNbXkcxHO {
  -webkit-animation-name: s6c8dUGEqKBHNbXkcxHO;
  animation-name: s6c8dUGEqKBHNbXkcxHO;
}

.y7XZskM_eFvXiSmrfw8N {
  -webkit-transform-box: fill-box;
  transform-box: fill-box;
  transform-origin: center;
}

.Oj0v6tTHjtkPzD__rUO3 {
  -webkit-animation: cr0RaQWdEEFj1hHa6Hcr 2.5s linear infinite;
  animation: cr0RaQWdEEFj1hHa6Hcr 2.5s linear infinite;
}

.tSS6BBNSIGgKQMycxZaC {
  -webkit-animation: yz61dDwgUAGrMVJAX1P9 2.5s linear infinite;
  animation: yz61dDwgUAGrMVJAX1P9 2.5s linear infinite;
}

.cskPf1yQM6_TrBD5CzUA {
  -webkit-animation: yz61dDwgUAGrMVJAX1P9 2s linear infinite;
  animation: yz61dDwgUAGrMVJAX1P9 2s linear infinite;
}

.qTotUq8VhrbyMTK6Z1Y0 {
  -webkit-animation: IS6wsbN3rAmVs1MVoERR 1.5s linear infinite;
  animation: IS6wsbN3rAmVs1MVoERR 1.5s linear infinite;
}

@keyframes IS6wsbN3rAmVs1MVoERR {
  0% {
    -ms-transform: translate(-50%, -50%) rotate(0); /* IE 9 */
    -webkit-transform: translate(-50%, -50%) rotate(0); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -ms-transform: translate(-50%, -50%) rotate(360deg); /* IE 9 */
    -webkit-transform: translate(-50%, -50%) rotate(360deg); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes IS6wsbN3rAmVs1MVoERR {
  0% {
    -ms-transform: translate(-50%, -50%) rotate(0); /* IE 9 */
    -webkit-transform: translate(-50%, -50%) rotate(0); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -ms-transform: translate(-50%, -50%) rotate(360deg); /* IE 9 */
    -webkit-transform: translate(-50%, -50%) rotate(360deg); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes cr0RaQWdEEFj1hHa6Hcr {
  0% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
  100% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
}
@-webkit-keyframes cr0RaQWdEEFj1hHa6Hcr {
  0% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
  100% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
}
@-moz-keyframes cr0RaQWdEEFj1hHa6Hcr {
  0% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
  100% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
}
@keyframes yz61dDwgUAGrMVJAX1P9 {
  0% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
}
@-webkit-keyframes yz61dDwgUAGrMVJAX1P9 {
  0% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
}
@-moz-keyframes yz61dDwgUAGrMVJAX1P9 {
  0% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
}
@-webkit-keyframes HzaSPJJNf9tWYNoFkGqa {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes HzaSPJJNf9tWYNoFkGqa {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.HzaSPJJNf9tWYNoFkGqa {
  -webkit-animation-name: HzaSPJJNf9tWYNoFkGqa;
  animation-name: HzaSPJJNf9tWYNoFkGqa;
}

@-webkit-keyframes RIzfd9NRmD5zvYlpdJZL {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes RIzfd9NRmD5zvYlpdJZL {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.RIzfd9NRmD5zvYlpdJZL {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: RIzfd9NRmD5zvYlpdJZL;
  animation-name: RIzfd9NRmD5zvYlpdJZL;
}

@-webkit-keyframes RqetJFeoY2LooL8qmt8w {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes RqetJFeoY2LooL8qmt8w {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.RqetJFeoY2LooL8qmt8w {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: RqetJFeoY2LooL8qmt8w;
  animation-name: RqetJFeoY2LooL8qmt8w;
}

@-webkit-keyframes dc77a_lTdZuEpNwi4U6a {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}
@keyframes dc77a_lTdZuEpNwi4U6a {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}
.dc77a_lTdZuEpNwi4U6a {
  -webkit-animation-name: dc77a_lTdZuEpNwi4U6a;
  animation-name: dc77a_lTdZuEpNwi4U6a;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes MTEJIreNrONiC7lIX02c {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes SCUTfDMNBDRMBr3FCNPC {
  from {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  43% {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  45% {
    -ms-transform: scaleY(0); /* IE 9 */
    -webkit-transform: scaleY(0); /* Chrome, Safari, Opera */
    transform: scaleY(0);
  }
  47% {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  55% {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  57% {
    -ms-transform: scaleY(0); /* IE 9 */
    -webkit-transform: scaleY(0); /* Chrome, Safari, Opera */
    transform: scaleY(0);
  }
  59% {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  to {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
}
@keyframes MTEJIreNrONiC7lIX02c {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.MTEJIreNrONiC7lIX02c {
  -webkit-animation-name: MTEJIreNrONiC7lIX02c;
  animation-name: MTEJIreNrONiC7lIX02c;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes oF5xTa5Rnj8sUVaqpShw {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(0);
  }
}
.oF5xTa5Rnj8sUVaqpShw {
  -webkit-animation-name: oF5xTa5Rnj8sUVaqpShw;
  animation-name: oF5xTa5Rnj8sUVaqpShw;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@keyframes oF5xTa5Rnj8sUVaqpShw {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(0);
  }
}
.SfopPQJQ3sRqXl4rswOy {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: SfopPQJQ3sRqXl4rswOy 3s ease-in-out infinite;
  -webkit-animation: SfopPQJQ3sRqXl4rswOy 3s ease-in-out infinite; /* Chrome, Safari, Opera */
}

@-webkit-keyframes SfopPQJQ3sRqXl4rswOy {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewY(8deg);
  }
}
@keyframes SfopPQJQ3sRqXl4rswOy {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewY(8deg);
  }
}
.A7xK8eHBPTDvLW4k3zjT {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: A7xK8eHBPTDvLW4k3zjT 2s ease-in-out infinite;
  -webkit-animation: A7xK8eHBPTDvLW4k3zjT 2s ease-in-out infinite; /* Chrome, Safari, Opera */
}

.gqOSXv6CMqWbvqQasez4 {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: gqOSXv6CMqWbvqQasez4 2s ease-in-out infinite;
  -webkit-animation: gqOSXv6CMqWbvqQasez4 2s ease-in-out infinite; /* Chrome, Safari, Opera */
}

@-webkit-keyframes A7xK8eHBPTDvLW4k3zjT {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewX(35deg);
  }
}
@keyframes A7xK8eHBPTDvLW4k3zjT {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewX(35deg);
  }
}
@-webkit-keyframes gqOSXv6CMqWbvqQasez4 {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewY(2deg);
  }
}
@keyframes gqOSXv6CMqWbvqQasez4 {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewY(2deg);
  }
}
.gmeJMQ2t6SDAnfBmFHtS {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: C6k7YA4C93JX6z5p1H1y 20s ease-in-out infinite;
  -webkit-animation: C6k7YA4C93JX6z5p1H1y 20s ease-in-out infinite; /* Chrome, Safari, Opera */
}

@-webkit-keyframes C6k7YA4C93JX6z5p1H1y {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewX(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewX(3deg);
  }
}
@keyframes C6k7YA4C93JX6z5p1H1y {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewX(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewX(3deg);
  }
}
.O3f_O0iN3dKYGO7LBd8O {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: qpeDB06rUDJb3oljBs49 5s ease-in-out infinite;
  -webkit-animation: qpeDB06rUDJb3oljBs49 5s ease-in-out infinite; /* Chrome, Safari, Opera */
}

.TlVx9TYakVWeLYpzWTKS {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: wvvUHKPAZ0atCjW1oa5b 20s linear infinite;
  -webkit-animation: wvvUHKPAZ0atCjW1oa5b 20s linear infinite; /* Chrome, Safari, Opera */
}

.l3VyjJ16xPDFtx4_mWRA {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: wvvUHKPAZ0atCjW1oa5b 5s linear infinite;
  -webkit-animation: wvvUHKPAZ0atCjW1oa5b 5s linear infinite; /* Chrome, Safari, Opera */
}

.IrXuQTdqhvZDwMoL7_OR.reF65pjjxWcouezPXiU_ {
  animation: _UJLqxqTSw0c4yIMg8NH 0.25s linear;
  -webkit-animation: _UJLqxqTSw0c4yIMg8NH 0.25s linear; /* Chrome, Safari, Opera */
}
.IrXuQTdqhvZDwMoL7_OR.DWVX1v6YkbbfQWVmD91u {
  animation: WW4vmuVFd6LRt0LUkKqv 0.25s linear;
  -webkit-animation: WW4vmuVFd6LRt0LUkKqv 0.25s linear; /* Chrome, Safari, Opera */
}
.IrXuQTdqhvZDwMoL7_OR.CxxhJShXuRTdc_ZTa51n {
  animation: Aw2WCpYbUurzP3ckjme4 0.15s linear;
  -webkit-animation: Aw2WCpYbUurzP3ckjme4 0.15s linear; /* Chrome, Safari, Opera */
}
.IrXuQTdqhvZDwMoL7_OR.BC0okOOtuo_IviVzojnj {
  animation: _24RuTy88ZtCgqgWbU6ld 0.15s linear;
  -webkit-animation: _24RuTy88ZtCgqgWbU6ld 0.15s linear; /* Chrome, Safari, Opera */
}
.IrXuQTdqhvZDwMoL7_OR.C88VcJVRoD2g_e8Mt8lv {
  animation: _UJLqxqTSw0c4yIMg8NH 0.4s linear;
  -webkit-animation: _UJLqxqTSw0c4yIMg8NH 0.4s linear; /* Chrome, Safari, Opera */
}
.IrXuQTdqhvZDwMoL7_OR.UFdlQfQJsfr5YeAJPBcN {
  animation: WW4vmuVFd6LRt0LUkKqv 0.4s linear;
  -webkit-animation: WW4vmuVFd6LRt0LUkKqv 0.4s linear; /* Chrome, Safari, Opera */
}

.gX5gXtR0T88sdtghVBCN.s2GBSqM22GNj3U9tm6l5 {
  animation: XcdCzjMOlTOlTropohwV 0.25s linear;
  -webkit-animation: XcdCzjMOlTOlTropohwV 0.25s linear; /* Chrome, Safari, Opera */
}
.gX5gXtR0T88sdtghVBCN.qFB_riZCyrL730gLNs1i {
  animation: XP1_5sybHfhoCp_HTQkb 0.25s linear;
  -webkit-animation: XP1_5sybHfhoCp_HTQkb 0.25s linear; /* Chrome, Safari, Opera */
}
.gX5gXtR0T88sdtghVBCN._tvHwonnJt8mpV3zUtIE {
  animation: mzaWxR1MxhK0P2gwOPOk 0.15s linear;
  -webkit-animation: mzaWxR1MxhK0P2gwOPOk 0.15s linear; /* Chrome, Safari, Opera */
}
.gX5gXtR0T88sdtghVBCN.Dp_CvbsZxhpybN6j2MSn {
  animation: Fk_S3a_wA6TmKbd5i5qK 0.15s linear;
  -webkit-animation: Fk_S3a_wA6TmKbd5i5qK 0.15s linear; /* Chrome, Safari, Opera */
}
.gX5gXtR0T88sdtghVBCN.vxU0HOEnLlvOSh5ZA5FN {
  animation: XcdCzjMOlTOlTropohwV 0.4s linear;
  -webkit-animation: XcdCzjMOlTOlTropohwV 0.4s linear; /* Chrome, Safari, Opera */
}
.gX5gXtR0T88sdtghVBCN.nwWjoJgCWHgmWD0PcoiS {
  animation: XP1_5sybHfhoCp_HTQkb 0.4s linear;
  -webkit-animation: XP1_5sybHfhoCp_HTQkb 0.4s linear; /* Chrome, Safari, Opera */
}

@-webkit-keyframes qpeDB06rUDJb3oljBs49 {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}
@keyframes qpeDB06rUDJb3oljBs49 {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes wvvUHKPAZ0atCjW1oa5b {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes wvvUHKPAZ0atCjW1oa5b {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes WW4vmuVFd6LRt0LUkKqv {
  0% {
    transform: translateX(150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes _UJLqxqTSw0c4yIMg8NH {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@-webkit-keyframes _UJLqxqTSw0c4yIMg8NH {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes Aw2WCpYbUurzP3ckjme4 {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes Aw2WCpYbUurzP3ckjme4 {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes _24RuTy88ZtCgqgWbU6ld {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes _24RuTy88ZtCgqgWbU6ld {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes XP1_5sybHfhoCp_HTQkb {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@-webkit-keyframes XP1_5sybHfhoCp_HTQkb {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@keyframes XcdCzjMOlTOlTropohwV {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@-webkit-keyframes XcdCzjMOlTOlTropohwV {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@keyframes mzaWxR1MxhK0P2gwOPOk {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@-webkit-keyframes mzaWxR1MxhK0P2gwOPOk {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@keyframes Fk_S3a_wA6TmKbd5i5qK {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@-webkit-keyframes Fk_S3a_wA6TmKbd5i5qK {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@keyframes X7R8gVZbGUVqKOkxWA65 {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@-webkit-keyframes X7R8gVZbGUVqKOkxWA65 {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@keyframes p4x_ZUe0XFOc7eQ19iME {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0.5;
  }
}
@keyframes sJ7r0Kx9Bd8XYcdxvQlm {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0;
  }
}
@keyframes wnx5yMVnjjDqn4zOeZGc {
  0%, 19%, 40%, 60%, 80%, 100% {
    opacity: 0;
  }
  20%, 39% {
    opacity: 1;
  }
}
@keyframes JF66Bgrgr8hXwP5HT9AA {
  0%, 20%, 39%, 60%, 80%, 100% {
    opacity: 0;
  }
  40%, 59% {
    opacity: 1;
  }
}
@keyframes ii1GVt1IIptBhjLaUCBP {
  0%, 20%, 40%, 59%, 80%, 100% {
    opacity: 0;
  }
  60%, 79% {
    opacity: 1;
  }
}
@keyframes WMqk2aVLThZaSVf0pkdm {
  0%, 20%, 40%, 60%, 79%, 100% {
    opacity: 0;
  }
  80%, 99% {
    opacity: 1;
  }
}
@keyframes EwSF5J1wybd3J4ddOFvq {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@-webkit-keyframes EwSF5J1wybd3J4ddOFvq {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@keyframes _NjZYw1JsiNd_Uncwtje {
  0% {
    -ms-transform: scale(0, 0); /* IE 9 */
    -webkit-transform: scale(0, 0); /* Chrome, Safari, Opera */
    transform: scale(0, 0);
  }
  100% {
    -ms-transform: scale(1, 1); /* IE 9 */
    -webkit-transform: scale(1, 1); /* Chrome, Safari, Opera */
    transform: scale(1, 1);
  }
}
@-webkit-keyframes _NjZYw1JsiNd_Uncwtje {
  0% {
    -ms-transform: scale(0, 0); /* IE 9 */
    -webkit-transform: scale(0, 0); /* Chrome, Safari, Opera */
    transform: scale(0, 0);
  }
  100% {
    -ms-transform: scale(1, 1); /* IE 9 */
    -webkit-transform: scale(1, 1); /* Chrome, Safari, Opera */
    transform: scale(1, 1);
  }
}
@-webkit-keyframes lcRFBardBRWcFlaGzRqy {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  25% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes lcRFBardBRWcFlaGzRqy {
  0% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
  25% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes FRW279Xia_j7TipfLhAb {
  0% {
    transform: scaleY(0.2);
  }
  4% {
    transform: scaleY(0.77);
  }
  5% {
    transform: scaleY(0.84);
  }
  6% {
    transform: scaleY(0.81);
  }
  7% {
    transform: scaleY(0.84);
  }
  8% {
    transform: scaleY(0.82);
  }
  9% {
    transform: scaleY(0.84);
  }
  10% {
    transform: scaleY(0.83);
  }
  11% {
    transform: scaleY(0.84);
  }
  40% {
    transform: scaleY(0.84);
  }
  41% {
    transform: scaleY(0.84);
  }
  45% {
    transform: scaleY(0.13);
  }
  49% {
    transform: scaleY(0.18);
  }
  100% {
    transform: scaleY(0.18);
  }
}
@keyframes sKB_1eu45OACASpmeQMK {
  0% {
    transform: translateY(-124px);
  }
  5% {
    transform: translateY(-24px);
  }
  6% {
    transform: translateY(-36px);
  }
  7% {
    transform: translateY(-24px);
  }
  8% {
    transform: translateY(-32px);
  }
  9% {
    transform: translateY(-24px);
  }
  10% {
    transform: translateY(-28px);
  }
  11% {
    transform: translateY(-24px);
  }
  40% {
    transform: translateY(-24px);
  }
  41% {
    transform: translateY(-24px);
  }
  45% {
    transform: translateY(-136px);
  }
  46% {
    transform: translateY(-124px);
  }
  47% {
    transform: translateY(-132px);
  }
  48% {
    transform: translateY(-124px);
  }
  49% {
    transform: translateY(-128px);
  }
  50% {
    transform: translateY(-124px);
  }
  100% {
    transform: translateY(-124px);
  }
}
.w8giKSGN5upLUm2MZv0g {
  background: #FAFAFA;
  border-radius: 0 0 8px 8px;
}

.FMmNDGq17UF3DibwERlJ {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  background: #FFFFFF;
  bottom: 16px;
  box-shadow: 0 6px 16px 0 rgba(20, 19, 37, 0.1);
  color: #403F5D;
  height: 137px;
  position: absolute;
  transition: bottom 0.3s ease-in-out;
  width: 300px;
  z-index: 6000;
}
.FMmNDGq17UF3DibwERlJ.V__YrB4eXUWLD4FezoW4 {
  -webkit-animation-name: hBvscx0FP1NhWZ6aXcgf;
  animation-name: hBvscx0FP1NhWZ6aXcgf;
  left: 16px;
}
.FMmNDGq17UF3DibwERlJ.YrRGfL0vdnHkUyB4quGY {
  -webkit-animation-name: _u1YXlxEf4zKlxYiNMkr;
  animation-name: _u1YXlxEf4zKlxYiNMkr;
}

._tiQ1jxRyQuF24LDAk1L {
  position: absolute !important;
  right: 8px;
  top: 8px;
}
/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-mobile-small-seekbar/poster-mobile-small-seekbar.module.scss ***!
  \******************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.zdT99nJz9fl009AUS17K {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
/*
Animation styles and keyframes
*/
.tXNx_E7l2aIgcasmi1GM {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.tXNx_E7l2aIgcasmi1GM.OzAyCWrIY_dgVihfSDeg {
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
.tXNx_E7l2aIgcasmi1GM.Fs5fCpclLfFpwTmXETBS {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.tXNx_E7l2aIgcasmi1GM.bChd8HZ2_KnXeJET5NO_ {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}

.tXNx_E7l2aIgcasmi1GM.AYrGaOdFiqs_3oT9SRkr {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

.tXNx_E7l2aIgcasmi1GM.Q04KXOhEUxfPmh5pAfzp {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

.tXNx_E7l2aIgcasmi1GM.H2q_EOySVUWc71gmDZi5 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.tXNx_E7l2aIgcasmi1GM.x9dpZD29dPP2LhAkX63b {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
}

.tXNx_E7l2aIgcasmi1GM.fUAnxlZB60sU2iLiGZGI {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.tXNx_E7l2aIgcasmi1GM.W92VMXBXLPBOnWbpO9T7 {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
}

.Ew4Hisk1fATlsgZkbR3M {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.ZjH14PBVBVRUSWPVSQnz {
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

._Ica42f7zxf73uEHcz5H {
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.B4fwaqFTvUKbbPU_J0Z0 .WpHiwkQbLai_7L38YQde, .B4fwaqFTvUKbbPU_J0Z0 .t5BlMPGa1U3sBP9vRMly {
  overflow: hidden;
}
.B4fwaqFTvUKbbPU_J0Z0:hover .WpHiwkQbLai_7L38YQde::before, .B4fwaqFTvUKbbPU_J0Z0:hover .t5BlMPGa1U3sBP9vRMly::before, .B4fwaqFTvUKbbPU_J0Z0:focus .WpHiwkQbLai_7L38YQde::before, .B4fwaqFTvUKbbPU_J0Z0:focus .t5BlMPGa1U3sBP9vRMly::before, .B4fwaqFTvUKbbPU_J0Z0:focus-within .WpHiwkQbLai_7L38YQde::before, .B4fwaqFTvUKbbPU_J0Z0:focus-within .t5BlMPGa1U3sBP9vRMly::before {
  animation: kEk1W4n615n4c7s3RCFt 1800ms cubic-bezier(0.68, -0.6, 0.32, 1.6) 1;
  display: block;
  transform-box: fill-box;
  transform-origin: center;
}

.zbPapALDRTXMD73bxrLs .WpHiwkQbLai_7L38YQde {
  overflow: hidden;
}
.zbPapALDRTXMD73bxrLs .WpHiwkQbLai_7L38YQde::before {
  animation: TZwkhtkAWBG9MgVMqkj0 2500ms cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
  display: block;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes kEk1W4n615n4c7s3RCFt {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  30% {
    transform: rotate(-56deg) translateX(0);
  }
  34% {
    transform: rotate(-38deg) translateX(0);
  }
  38% {
    transform: rotate(-50deg) translateX(0);
  }
  42% {
    transform: rotate(-45deg) translateX(0);
  }
  47% {
    transform: rotate(-45deg) translateX(0);
  }
  57% {
    opacity: 1;
    transform: rotate(-45deg) translateX(20px);
  }
  58% {
    opacity: 0;
    transform: rotate(-45deg) translateX(20px);
  }
  59% {
    opacity: 0;
    transform: rotate(-45deg) translateX(-20px);
  }
  60% {
    opacity: 1;
    transform: rotate(-45deg) translateX(-20px);
  }
  73% {
    transform: rotate(-45deg) translateX(0);
  }
  78% {
    transform: rotate(-45deg) translateX(0);
  }
  88% {
    transform: rotate(12deg) translateX(0);
  }
  93% {
    transform: rotate(-8deg) translateX(0);
  }
  96% {
    transform: rotate(3deg) translateX(0);
  }
  100% {
    transform: rotate(0) translateX(0);
  }
}
@keyframes TZwkhtkAWBG9MgVMqkj0 {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  30% {
    transform: rotate(-56deg) translateX(0);
  }
  34% {
    transform: rotate(-38deg) translateX(0);
  }
  38% {
    transform: rotate(-50deg) translateX(0);
  }
  42% {
    transform: rotate(-45deg) translateX(0);
  }
  47% {
    transform: rotate(-45deg) translateX(0);
  }
  57% {
    opacity: 1;
    transform: rotate(-45deg) translateX(50px);
  }
  58% {
    opacity: 0;
    transform: rotate(-45deg) translateX(50px);
  }
  59% {
    opacity: 0;
    transform: rotate(-45deg) translateX(-50px);
  }
  60% {
    opacity: 1;
    transform: rotate(-45deg) translateX(-50px);
  }
  73% {
    transform: rotate(-45deg) translateX(0);
  }
  78% {
    transform: rotate(-45deg) translateX(0);
  }
  88% {
    transform: rotate(12deg) translateX(0);
  }
  93% {
    transform: rotate(-8deg) translateX(0);
  }
  96% {
    transform: rotate(3deg) translateX(0);
  }
  100% {
    transform: rotate(0) translateX(0);
  }
}
.gbWY1BEfiOkf4lPQ1OtN {
  -webkit-transform-origin: left; /* Chrome, Safari, Opera */
  transform-origin: left;
}

.J1Deq4J24D6PvZn5MiTH {
  -webkit-transform-origin: right; /* Chrome, Safari, Opera */
  transform-origin: right;
}

.MSbdH9KRdP6HWPrlP3Wq {
  -webkit-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
}
.MSbdH9KRdP6HWPrlP3Wq:hover {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
}

.g6el3KuLBr5FrHm_OCJk {
  -webkit-transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
}
.g6el3KuLBr5FrHm_OCJk:hover, .g6el3KuLBr5FrHm_OCJk:focus, .g6el3KuLBr5FrHm_OCJk:focus-within {
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Chrome, Safari, Opera */
  transform: scale(1.05);
}

.AWX13F_abo8_JHsDHmMN {
  -webkit-transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.AWX13F_abo8_JHsDHmMN.bidBYOTxXiiykPm3Yjwt {
  transition-duration: 100ms;
}
.AWX13F_abo8_JHsDHmMN:hover, .AWX13F_abo8_JHsDHmMN:focus, .AWX13F_abo8_JHsDHmMN:focus-within {
  -ms-transform: translate(0, -2%); /* IE 9 */
  -webkit-transform: translate(0, -2%); /* Chrome, Safari, Opera */
  transform: translate(0, -2%);
}

.Df5gqHSHAK8eVYNt80xy {
  -webkit-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  opacity: 1;
}
.Df5gqHSHAK8eVYNt80xy:hover {
  opacity: 0.8;
}

.lGt__lv7Frg4WUkloZDK {
  opacity: 1;
  -webkit-transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.lGt__lv7Frg4WUkloZDK:hover {
  -ms-transform: scale3d(1.15, 1.15, 1.15); /* IE 9 */
  -webkit-transform: scale3d(1.15, 1.15, 1.15); /* Chrome, Safari, Opera */
  transform: scale3d(1.15, 1.15, 1.15);
}

.BTkUFJZQuLmXIFD3UrBf {
  -webkit-transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
  transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
}

@-webkit-keyframes Z3nqwBeRojNiVMmKu17Y {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes Z3nqwBeRojNiVMmKu17Y {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.Z3nqwBeRojNiVMmKu17Y {
  -webkit-animation-name: Z3nqwBeRojNiVMmKu17Y;
  animation-name: Z3nqwBeRojNiVMmKu17Y;
}

@-webkit-keyframes QWQmK9KzlhYNh22pwpXL {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@keyframes QWQmK9KzlhYNh22pwpXL {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@-webkit-keyframes emby8kJZdxAiEHfpBfgT {
  11.1% {
    transform: none;
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
  100% {
    transform: none;
  }
}
@keyframes emby8kJZdxAiEHfpBfgT {
  11.1% {
    transform: none;
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
  100% {
    transform: none;
  }
}
@-webkit-keyframes OUOi72W8Vya2aBQ4elni {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes OUOi72W8Vya2aBQ4elni {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes nRanvgQD2TV6Ea_OGYkQ {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@keyframes nRanvgQD2TV6Ea_OGYkQ {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@-webkit-keyframes TBwHVlUX_da8gxkY7XD7 {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@keyframes TBwHVlUX_da8gxkY7XD7 {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@-webkit-keyframes VpWtbO7D46nw474OlWRc {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@keyframes VpWtbO7D46nw474OlWRc {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes lQyuVmxANfoGdrqijd8k {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@keyframes lQyuVmxANfoGdrqijd8k {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes D5vrmlrqqD7LkVb3ru_f {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@keyframes D5vrmlrqqD7LkVb3ru_f {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@-webkit-keyframes mWPncNE0dcB7FRs2WA9o {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@keyframes mWPncNE0dcB7FRs2WA9o {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@-webkit-keyframes QbtfV_XaTpRjoKVLUtNR {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@keyframes QbtfV_XaTpRjoKVLUtNR {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes ggCHLMbz6_7PGnUl3t5k {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@keyframes ggCHLMbz6_7PGnUl3t5k {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes zElmGHO0jmSsrXTum2QE {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@keyframes zElmGHO0jmSsrXTum2QE {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@-webkit-keyframes c9XtpA0pfrqHD1nfaXZY {
  0% {
    transform: scale(0.3);
    opacity: 0.4;
  }
  25% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(0.7);
    opacity: 0.6;
  }
  75% {
    transform: scale(1);
    opacity: 0.8;
  }
  90%, 100% {
    transform: scale(0.8);
    opacity: 1;
  }
}
@keyframes c9XtpA0pfrqHD1nfaXZY {
  0% {
    transform: scale(0.3);
    opacity: 0.4;
  }
  25% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(0.7);
    opacity: 0.6;
  }
  75% {
    transform: scale(1);
    opacity: 0.8;
  }
  90%, 100% {
    transform: scale(0.8);
    opacity: 1;
  }
}
@-webkit-keyframes QLvVFUtsAkGqUWNUmbhw {
  0% {
    opacity: 1;
    transform: scale(1.5) translateX(40px) translateY(15px);
  }
  60%, 100% {
    transform: scale(1.5) translateX(-30px) translateY(30px) rotate(90deg);
    opacity: 1;
  }
}
@keyframes QLvVFUtsAkGqUWNUmbhw {
  0% {
    opacity: 1;
    transform: scale(1.5) translateX(40px) translateY(15px);
  }
  60%, 100% {
    transform: scale(1.5) translateX(-30px) translateY(30px) rotate(90deg);
    opacity: 1;
  }
}
@-webkit-keyframes iBUaFBHpOBByEa7iJtBz {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes iBUaFBHpOBByEa7iJtBz {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes P_9Xoidezz2bhxYAaBEu {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes P_9Xoidezz2bhxYAaBEu {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes VSBM5d_3W3XnToeWp6mM {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes VSBM5d_3W3XnToeWp6mM {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes e38QH0uuRxCxS2dqjctY {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes e38QH0uuRxCxS2dqjctY {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes PVPmSPPEEAgVRlcAwNZs {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@keyframes PVPmSPPEEAgVRlcAwNZs {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@-webkit-keyframes OetflziEAhVE2ih0J3tK {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@keyframes OetflziEAhVE2ih0J3tK {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@-webkit-keyframes HPxWFH3gFEaiW0lgnsAH {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes HPxWFH3gFEaiW0lgnsAH {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.HPxWFH3gFEaiW0lgnsAH {
  -webkit-animation-name: HPxWFH3gFEaiW0lgnsAH;
  animation-name: HPxWFH3gFEaiW0lgnsAH;
}

@-webkit-keyframes f7mR6rEFt2yV6uqKddRG {
  0% {
    top: -100px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
@keyframes f7mR6rEFt2yV6uqKddRG {
  0% {
    top: -100px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
.f7mR6rEFt2yV6uqKddRG {
  -webkit-animation-name: f7mR6rEFt2yV6uqKddRG;
  animation-name: f7mR6rEFt2yV6uqKddRG;
}

@keyframes NIIPGpETEYdY7NT9EEJ5 {
  0% {
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
  }
  100% {
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
  }
}
@-webkit-keyframes NIIPGpETEYdY7NT9EEJ5 {
  0% {
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
  }
  100% {
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
  }
}
@keyframes zdlOAJ6BC8XYbsRphTLd {
  0% {
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
  }
  100% {
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
  }
}
@-webkit-keyframes zdlOAJ6BC8XYbsRphTLd {
  0% {
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
  }
  100% {
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
  }
}
@-webkit-keyframes z326tklzR0xMmpZruGpo {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes z326tklzR0xMmpZruGpo {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.z326tklzR0xMmpZruGpo {
  -webkit-animation-name: z326tklzR0xMmpZruGpo;
  animation-name: z326tklzR0xMmpZruGpo;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes OrQ2YK1kYLBEGbnCKFEb {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes OrQ2YK1kYLBEGbnCKFEb {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.OrQ2YK1kYLBEGbnCKFEb {
  -webkit-animation-name: OrQ2YK1kYLBEGbnCKFEb;
  animation-name: OrQ2YK1kYLBEGbnCKFEb;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes GAzFjD8ZP4Z9vD_8EBWA {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes GAzFjD8ZP4Z9vD_8EBWA {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.ixJczCzmDM6LgcnNJdsT {
  -webkit-transition: background 200ms ease-in-out;
  transition: background 200ms ease-in-out;
}

.GAzFjD8ZP4Z9vD_8EBWA {
  -webkit-animation-name: GAzFjD8ZP4Z9vD_8EBWA;
  animation-name: GAzFjD8ZP4Z9vD_8EBWA;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes KcKgVOGX7FKGpwD8PGxJ {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes KcKgVOGX7FKGpwD8PGxJ {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.KcKgVOGX7FKGpwD8PGxJ {
  -webkit-animation-name: KcKgVOGX7FKGpwD8PGxJ;
  animation-name: KcKgVOGX7FKGpwD8PGxJ;
}

@-webkit-keyframes B8jSJAzIlqQVgiAaNlf0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes B8jSJAzIlqQVgiAaNlf0 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.B8jSJAzIlqQVgiAaNlf0 {
  -webkit-animation-name: B8jSJAzIlqQVgiAaNlf0;
  animation-name: B8jSJAzIlqQVgiAaNlf0;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes FvY8gPIwCipmQ18M7NrB {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes FvY8gPIwCipmQ18M7NrB {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.FvY8gPIwCipmQ18M7NrB {
  -webkit-animation-name: FvY8gPIwCipmQ18M7NrB;
  animation-name: FvY8gPIwCipmQ18M7NrB;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.Y8RkKtOufkojXvYgCNQ1 {
  opacity: 0;
  overflow-y: hidden;
  transition-duration: 1s;
  transition-property: all;
  transition-timing-function: ease-in-out;
}
.Y8RkKtOufkojXvYgCNQ1:hover {
  opacity: 1;
}

.kiKCYuwDYWKiczFaBTD7 {
  max-height: 250px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.kiKCYuwDYWKiczFaBTD7.hkCWu4JID8lxHjYyYb06 {
  max-height: 0;
}

.oHkG78qu3xyNIgcU3ute {
  max-height: 200px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.oHkG78qu3xyNIgcU3ute.hkCWu4JID8lxHjYyYb06 {
  max-height: 0;
}

.UuwsdX7qrBDn4EVsNk6C {
  max-height: 400px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.UuwsdX7qrBDn4EVsNk6C.hkCWu4JID8lxHjYyYb06 {
  max-height: 0;
}

.qDee9WTW8mV7eVHUPeMs {
  max-height: 150px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.qDee9WTW8mV7eVHUPeMs.hkCWu4JID8lxHjYyYb06 {
  max-height: 0;
}

.orbDUnH8XHAcnmDRQajQ {
  max-height: 40px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.orbDUnH8XHAcnmDRQajQ.hkCWu4JID8lxHjYyYb06 {
  max-height: 0;
}

.VGKlKqB9x1AiBPzEA96B {
  transition-duration: 0.4s;
}

.pRgUZ4pIMHEdJ5pWc9DM {
  transition-duration: 0.2s;
}

.a8JcbD1H6VVliTyhfWGA {
  transition-duration: 0.1s;
}

@-webkit-keyframes NkBpjC2QagtZ3xDJlgb7 {
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes NkBpjC2QagtZ3xDJlgb7 {
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.NkBpjC2QagtZ3xDJlgb7 {
  -webkit-animation-name: NkBpjC2QagtZ3xDJlgb7;
  animation-name: NkBpjC2QagtZ3xDJlgb7;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes n5bXSXmhhDabDgeY9hFQ {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes n5bXSXmhhDabDgeY9hFQ {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.n5bXSXmhhDabDgeY9hFQ {
  -webkit-animation-name: n5bXSXmhhDabDgeY9hFQ;
  animation-name: n5bXSXmhhDabDgeY9hFQ;
}

@-webkit-keyframes iuCf6PazrZ64ATOI4d4y {
  0% {
    opacity: 1;
    -ms-transform: scale3d(1, 1, 1); /* IE 9 */
    -webkit-transform: scale3d(1, 1, 1); /* Chrome, Safari, Opera */
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0;
    -ms-transform: scale3d(0.5, 0.5, 0.5); /* IE 9 */
    -webkit-transform: scale3d(0.5, 0.5, 0.5); /* Chrome, Safari, Opera */
    transform: scale3d(0.5, 0.5, 0.5);
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes iuCf6PazrZ64ATOI4d4y {
  0% {
    opacity: 1;
    -ms-transform: scale3d(1, 1, 1); /* IE 9 */
    -webkit-transform: scale3d(1, 1, 1); /* Chrome, Safari, Opera */
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0;
    -ms-transform: scale3d(0.5, 0.5, 0.5); /* IE 9 */
    -webkit-transform: scale3d(0.5, 0.5, 0.5); /* Chrome, Safari, Opera */
    transform: scale3d(0.5, 0.5, 0.5);
  }
  100% {
    opacity: 0;
  }
}
@keyframes iuCf6PazrZ64ATOI4d4y {
  0% {
    opacity: 1;
    -ms-transform: scale3d(1, 1, 1); /* IE 9 */
    -webkit-transform: scale3d(1, 1, 1); /* Chrome, Safari, Opera */
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0;
    -ms-transform: scale3d(0.5, 0.5, 0.5); /* IE 9 */
    -webkit-transform: scale3d(0.5, 0.5, 0.5); /* Chrome, Safari, Opera */
    transform: scale3d(0.5, 0.5, 0.5);
  }
  100% {
    opacity: 0;
  }
}
.iuCf6PazrZ64ATOI4d4y {
  -webkit-animation-name: iuCf6PazrZ64ATOI4d4y;
  animation-name: iuCf6PazrZ64ATOI4d4y;
}

@-webkit-keyframes Rbq9v5T0Ll9fnIrQ8Upr {
  0% {
    opacity: 0;
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);
  }
}
@-moz-keyframes Rbq9v5T0Ll9fnIrQ8Upr {
  0% {
    opacity: 0;
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);
  }
}
@keyframes Rbq9v5T0Ll9fnIrQ8Upr {
  0% {
    opacity: 0;
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);
  }
}
.Rbq9v5T0Ll9fnIrQ8Upr {
  -webkit-animation-name: Rbq9v5T0Ll9fnIrQ8Upr;
  animation-name: Rbq9v5T0Ll9fnIrQ8Upr;
}

.UT4t7XXGnM4UWYo47VFs {
  -webkit-animation-name: UT4t7XXGnM4UWYo47VFs;
  animation-name: UT4t7XXGnM4UWYo47VFs;
  animation-timing-function: ease-in-out;
}

@keyframes UT4t7XXGnM4UWYo47VFs {
  0% {
    top: -30px;
  }
  100% {
    top: 0;
  }
}
.Ps9wmhDmFF5ibw1_kqkJ {
  -webkit-animation-name: Ps9wmhDmFF5ibw1_kqkJ;
  animation-name: Ps9wmhDmFF5ibw1_kqkJ;
  animation-timing-function: ease-in-out;
}

@keyframes Ps9wmhDmFF5ibw1_kqkJ {
  0% {
    bottom: -60px;
    left: 0;
  }
  100% {
    bottom: -30px;
    left: 30px;
  }
}
.ojcGjVimHm7UiW2b8_nU {
  -webkit-animation-name: ojcGjVimHm7UiW2b8_nU;
  animation-name: ojcGjVimHm7UiW2b8_nU;
  animation-timing-function: ease-in-out;
}

@keyframes ojcGjVimHm7UiW2b8_nU {
  0% {
    bottom: -60px;
    right: -30px;
  }
  100% {
    bottom: -30px;
    right: 0;
  }
}
/* Bouncing Loading Box */
@keyframes JZ8pKj3w8iusMz18XTT3 {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 39px;
  }
  75% {
    transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    transform: translateY(0) rotate(90deg);
  }
}
@-webkit-keyframes JZ8pKj3w8iusMz18XTT3 {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    -webkit-transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    -webkit-transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 39px;
  }
  75% {
    -webkit-transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(90deg);
  }
}
@keyframes Puk9YhVTbf35N9HJTEJl {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}
@-webkit-keyframes Puk9YhVTbf35N9HJTEJl {
  0%, 100% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1);
  }
}
.u8efyXY5BoH_3W89iAbg {
  bottom: 0;
  height: 75px;
  left: 0;
  margin: auto;
  position: relative;
  right: 0;
  top: 0;
  width: 49px;
}

.u8efyXY5BoH_3W89iAbg:before {
  -webkit-animation: Puk9YhVTbf35N9HJTEJl 0.58s linear infinite;
  animation: Puk9YhVTbf35N9HJTEJl 0.58s linear infinite;
  background: rgb(0, 0, 0);
  border-radius: 50%;
  content: "";
  height: 5px;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 58px;
  width: 49px;
}

.u8efyXY5BoH_3W89iAbg:after {
  -webkit-animation: JZ8pKj3w8iusMz18XTT3 0.58s linear infinite;
  animation: JZ8pKj3w8iusMz18XTT3 0.58s linear infinite;
  background: rgb(63, 189, 231);
  border-radius: 3px;
  content: "";
  height: 49px;
  left: 0;
  position: absolute;
  top: 0;
  width: 49px;
}

.u8efyXY5BoH_3W89iAbg.fqCbHxZn8zhu4iQZkt3u:after {
  background: #fff;
}

/* End of Bouncing Loading Box */
@-webkit-keyframes XRsNahJfX1QfNNwZaNYA {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-moz-keyframes XRsNahJfX1QfNNwZaNYA {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes XRsNahJfX1QfNNwZaNYA {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-webkit-keyframes N9zGJSxAL4mnJX6xhOjA {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes N9zGJSxAL4mnJX6xhOjA {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 50%, 90% {
    -webkit-transform: translate3d(-2px, 0, 0);
    transform: translate3d(-2px, 0, 0);
  }
  30%, 70% {
    -webkit-transform: translate3d(2px, 0, 0);
    transform: translate3d(2px, 0, 0);
  }
}
.N9zGJSxAL4mnJX6xhOjA {
  -webkit-animation-name: N9zGJSxAL4mnJX6xhOjA;
  animation-name: N9zGJSxAL4mnJX6xhOjA;
}

.c5eBgI2TT4kVy4dl7YAW {
  -webkit-transform-box: fill-box;
  transform-box: fill-box;
  transform-origin: center;
}

.GL72JbZjJJUAgTWcSziY {
  -webkit-animation: F0m3qHNWPrCg1TWRZAj7 2.5s linear infinite;
  animation: F0m3qHNWPrCg1TWRZAj7 2.5s linear infinite;
}

.hMOtvo7GWEEDYPCc1Zmu {
  -webkit-animation: qjFpx9ctmWJyEBhYr49h 2.5s linear infinite;
  animation: qjFpx9ctmWJyEBhYr49h 2.5s linear infinite;
}

.fkRRrGScGWr8zoDEt4O8 {
  -webkit-animation: qjFpx9ctmWJyEBhYr49h 2s linear infinite;
  animation: qjFpx9ctmWJyEBhYr49h 2s linear infinite;
}

.BPuxeBDO113oKWvkUdtl {
  -webkit-animation: mIqWuvOf0sXaqHcgPHEw 1.5s linear infinite;
  animation: mIqWuvOf0sXaqHcgPHEw 1.5s linear infinite;
}

@keyframes mIqWuvOf0sXaqHcgPHEw {
  0% {
    -ms-transform: translate(-50%, -50%) rotate(0); /* IE 9 */
    -webkit-transform: translate(-50%, -50%) rotate(0); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -ms-transform: translate(-50%, -50%) rotate(360deg); /* IE 9 */
    -webkit-transform: translate(-50%, -50%) rotate(360deg); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes mIqWuvOf0sXaqHcgPHEw {
  0% {
    -ms-transform: translate(-50%, -50%) rotate(0); /* IE 9 */
    -webkit-transform: translate(-50%, -50%) rotate(0); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -ms-transform: translate(-50%, -50%) rotate(360deg); /* IE 9 */
    -webkit-transform: translate(-50%, -50%) rotate(360deg); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes F0m3qHNWPrCg1TWRZAj7 {
  0% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
  100% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
}
@-webkit-keyframes F0m3qHNWPrCg1TWRZAj7 {
  0% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
  100% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
}
@-moz-keyframes F0m3qHNWPrCg1TWRZAj7 {
  0% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
  100% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
}
@keyframes qjFpx9ctmWJyEBhYr49h {
  0% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
}
@-webkit-keyframes qjFpx9ctmWJyEBhYr49h {
  0% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
}
@-moz-keyframes qjFpx9ctmWJyEBhYr49h {
  0% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
}
@-webkit-keyframes bAl78vFL7w6ZKM_h9mkq {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes bAl78vFL7w6ZKM_h9mkq {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.bAl78vFL7w6ZKM_h9mkq {
  -webkit-animation-name: bAl78vFL7w6ZKM_h9mkq;
  animation-name: bAl78vFL7w6ZKM_h9mkq;
}

@-webkit-keyframes rLTU6xZWY6znjvePvnSg {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes rLTU6xZWY6znjvePvnSg {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.rLTU6xZWY6znjvePvnSg {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: rLTU6xZWY6znjvePvnSg;
  animation-name: rLTU6xZWY6znjvePvnSg;
}

@-webkit-keyframes lRfnnWo19NUodzISVaZw {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes lRfnnWo19NUodzISVaZw {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.lRfnnWo19NUodzISVaZw {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: lRfnnWo19NUodzISVaZw;
  animation-name: lRfnnWo19NUodzISVaZw;
}

@-webkit-keyframes jvBfWbm22K62qemuhicO {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}
@keyframes jvBfWbm22K62qemuhicO {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}
.jvBfWbm22K62qemuhicO {
  -webkit-animation-name: jvBfWbm22K62qemuhicO;
  animation-name: jvBfWbm22K62qemuhicO;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes FwNsvoDgMlGnMaXUP6TD {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes YrbHZrmwqjeKF7IG9Nb2 {
  from {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  43% {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  45% {
    -ms-transform: scaleY(0); /* IE 9 */
    -webkit-transform: scaleY(0); /* Chrome, Safari, Opera */
    transform: scaleY(0);
  }
  47% {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  55% {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  57% {
    -ms-transform: scaleY(0); /* IE 9 */
    -webkit-transform: scaleY(0); /* Chrome, Safari, Opera */
    transform: scaleY(0);
  }
  59% {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  to {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
}
@keyframes FwNsvoDgMlGnMaXUP6TD {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.FwNsvoDgMlGnMaXUP6TD {
  -webkit-animation-name: FwNsvoDgMlGnMaXUP6TD;
  animation-name: FwNsvoDgMlGnMaXUP6TD;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes bKp0pouq6p4B4j6mKuyh {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(0);
  }
}
.bKp0pouq6p4B4j6mKuyh {
  -webkit-animation-name: bKp0pouq6p4B4j6mKuyh;
  animation-name: bKp0pouq6p4B4j6mKuyh;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@keyframes bKp0pouq6p4B4j6mKuyh {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(0);
  }
}
.DVlkn3AwztCF7EzPmBI2 {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: DVlkn3AwztCF7EzPmBI2 3s ease-in-out infinite;
  -webkit-animation: DVlkn3AwztCF7EzPmBI2 3s ease-in-out infinite; /* Chrome, Safari, Opera */
}

@-webkit-keyframes DVlkn3AwztCF7EzPmBI2 {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewY(8deg);
  }
}
@keyframes DVlkn3AwztCF7EzPmBI2 {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewY(8deg);
  }
}
.iPghsZf0Hlf8iZCfdjSO {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: iPghsZf0Hlf8iZCfdjSO 2s ease-in-out infinite;
  -webkit-animation: iPghsZf0Hlf8iZCfdjSO 2s ease-in-out infinite; /* Chrome, Safari, Opera */
}

.ejEA9rsug1LxFDVhguRb {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: ejEA9rsug1LxFDVhguRb 2s ease-in-out infinite;
  -webkit-animation: ejEA9rsug1LxFDVhguRb 2s ease-in-out infinite; /* Chrome, Safari, Opera */
}

@-webkit-keyframes iPghsZf0Hlf8iZCfdjSO {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewX(35deg);
  }
}
@keyframes iPghsZf0Hlf8iZCfdjSO {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewX(35deg);
  }
}
@-webkit-keyframes ejEA9rsug1LxFDVhguRb {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewY(2deg);
  }
}
@keyframes ejEA9rsug1LxFDVhguRb {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewY(2deg);
  }
}
.LUbMRrVD3ICU4WKaPOYN {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: LNIBjEC1sF1RfEdB4upi 20s ease-in-out infinite;
  -webkit-animation: LNIBjEC1sF1RfEdB4upi 20s ease-in-out infinite; /* Chrome, Safari, Opera */
}

@-webkit-keyframes LNIBjEC1sF1RfEdB4upi {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewX(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewX(3deg);
  }
}
@keyframes LNIBjEC1sF1RfEdB4upi {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewX(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewX(3deg);
  }
}
.g09lRhxz1WmO715tqSEg {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: nClVk73nFZnzekyplatN 5s ease-in-out infinite;
  -webkit-animation: nClVk73nFZnzekyplatN 5s ease-in-out infinite; /* Chrome, Safari, Opera */
}

.PsLDXsR67A5qyf2gjq7h {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: TJJ4UPcxYt2SiJqb3UBa 20s linear infinite;
  -webkit-animation: TJJ4UPcxYt2SiJqb3UBa 20s linear infinite; /* Chrome, Safari, Opera */
}

.ezCgiW1A47PXjnP4qSYS {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: TJJ4UPcxYt2SiJqb3UBa 5s linear infinite;
  -webkit-animation: TJJ4UPcxYt2SiJqb3UBa 5s linear infinite; /* Chrome, Safari, Opera */
}

.ubWsKVwRDS0fB8eSel5S.MYa6ab58XQm3JguqmI0E {
  animation: rdpOamPGsuRxD8QV3Fu3 0.25s linear;
  -webkit-animation: rdpOamPGsuRxD8QV3Fu3 0.25s linear; /* Chrome, Safari, Opera */
}
.ubWsKVwRDS0fB8eSel5S.Kz8BqPGFpnAJbTqINeOg {
  animation: PzXHRSfttj45whbVagju 0.25s linear;
  -webkit-animation: PzXHRSfttj45whbVagju 0.25s linear; /* Chrome, Safari, Opera */
}
.ubWsKVwRDS0fB8eSel5S.jYuCLhT_KfAjk5K6QRwE {
  animation: FBJYZg8CHLx0oiKSosOp 0.15s linear;
  -webkit-animation: FBJYZg8CHLx0oiKSosOp 0.15s linear; /* Chrome, Safari, Opera */
}
.ubWsKVwRDS0fB8eSel5S.mAABnl1eSmgYyGc41roR {
  animation: PpNBYOCfnV1GG4eyYKh_ 0.15s linear;
  -webkit-animation: PpNBYOCfnV1GG4eyYKh_ 0.15s linear; /* Chrome, Safari, Opera */
}
.ubWsKVwRDS0fB8eSel5S.X_BRt5osg2jIJfpZxnhf {
  animation: rdpOamPGsuRxD8QV3Fu3 0.4s linear;
  -webkit-animation: rdpOamPGsuRxD8QV3Fu3 0.4s linear; /* Chrome, Safari, Opera */
}
.ubWsKVwRDS0fB8eSel5S.Wlrq1ZXbnK33bHSYNwu6 {
  animation: PzXHRSfttj45whbVagju 0.4s linear;
  -webkit-animation: PzXHRSfttj45whbVagju 0.4s linear; /* Chrome, Safari, Opera */
}

.rZaZOpc4RLo_cYuo9aHd.vdavQqIRhQv5RInnr6Lt {
  animation: FYWM8Hu6TCTuOhcL70PQ 0.25s linear;
  -webkit-animation: FYWM8Hu6TCTuOhcL70PQ 0.25s linear; /* Chrome, Safari, Opera */
}
.rZaZOpc4RLo_cYuo9aHd.boZD43wHnB3PuqrpcNMF {
  animation: Gf_54BoLUzwxjN_uiYF2 0.25s linear;
  -webkit-animation: Gf_54BoLUzwxjN_uiYF2 0.25s linear; /* Chrome, Safari, Opera */
}
.rZaZOpc4RLo_cYuo9aHd.SaY87edExJVFUcLz2w5G {
  animation: ICId9ArEMNfZR4RjpxA9 0.15s linear;
  -webkit-animation: ICId9ArEMNfZR4RjpxA9 0.15s linear; /* Chrome, Safari, Opera */
}
.rZaZOpc4RLo_cYuo9aHd.WLzyrkncefd5N9W3QYo9 {
  animation: CjqG9HkQnLVJrniEi3Vt 0.15s linear;
  -webkit-animation: CjqG9HkQnLVJrniEi3Vt 0.15s linear; /* Chrome, Safari, Opera */
}
.rZaZOpc4RLo_cYuo9aHd.f6sQ0oTqiPl1mP4aV4__ {
  animation: FYWM8Hu6TCTuOhcL70PQ 0.4s linear;
  -webkit-animation: FYWM8Hu6TCTuOhcL70PQ 0.4s linear; /* Chrome, Safari, Opera */
}
.rZaZOpc4RLo_cYuo9aHd.Q8V6NQk4vbhg7KSuVyDS {
  animation: Gf_54BoLUzwxjN_uiYF2 0.4s linear;
  -webkit-animation: Gf_54BoLUzwxjN_uiYF2 0.4s linear; /* Chrome, Safari, Opera */
}

@-webkit-keyframes nClVk73nFZnzekyplatN {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}
@keyframes nClVk73nFZnzekyplatN {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes TJJ4UPcxYt2SiJqb3UBa {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes TJJ4UPcxYt2SiJqb3UBa {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes PzXHRSfttj45whbVagju {
  0% {
    transform: translateX(150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes rdpOamPGsuRxD8QV3Fu3 {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@-webkit-keyframes rdpOamPGsuRxD8QV3Fu3 {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes FBJYZg8CHLx0oiKSosOp {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes FBJYZg8CHLx0oiKSosOp {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes PpNBYOCfnV1GG4eyYKh_ {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes PpNBYOCfnV1GG4eyYKh_ {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes Gf_54BoLUzwxjN_uiYF2 {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@-webkit-keyframes Gf_54BoLUzwxjN_uiYF2 {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@keyframes FYWM8Hu6TCTuOhcL70PQ {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@-webkit-keyframes FYWM8Hu6TCTuOhcL70PQ {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@keyframes ICId9ArEMNfZR4RjpxA9 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@-webkit-keyframes ICId9ArEMNfZR4RjpxA9 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@keyframes CjqG9HkQnLVJrniEi3Vt {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@-webkit-keyframes CjqG9HkQnLVJrniEi3Vt {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@keyframes vrRoRG16EPvdGvKm0Nll {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@-webkit-keyframes vrRoRG16EPvdGvKm0Nll {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@keyframes w_FzO5P29ai3kZrZ21l4 {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0.5;
  }
}
@keyframes sAfWXfI_CnEtDndCSd29 {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0;
  }
}
@keyframes FmKnsm6jwanCnXqAF55_ {
  0%, 19%, 40%, 60%, 80%, 100% {
    opacity: 0;
  }
  20%, 39% {
    opacity: 1;
  }
}
@keyframes zuEf3uyqLCUToasrwCwI {
  0%, 20%, 39%, 60%, 80%, 100% {
    opacity: 0;
  }
  40%, 59% {
    opacity: 1;
  }
}
@keyframes tDuNPAO2x55s71jwq4K0 {
  0%, 20%, 40%, 59%, 80%, 100% {
    opacity: 0;
  }
  60%, 79% {
    opacity: 1;
  }
}
@keyframes OjkU46V5eHrU_4fx0VX2 {
  0%, 20%, 40%, 60%, 79%, 100% {
    opacity: 0;
  }
  80%, 99% {
    opacity: 1;
  }
}
@keyframes Hu6hY42qGgYd5IygCxy0 {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@-webkit-keyframes Hu6hY42qGgYd5IygCxy0 {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@keyframes M2NqjSVl6ooAJK5prZ6R {
  0% {
    -ms-transform: scale(0, 0); /* IE 9 */
    -webkit-transform: scale(0, 0); /* Chrome, Safari, Opera */
    transform: scale(0, 0);
  }
  100% {
    -ms-transform: scale(1, 1); /* IE 9 */
    -webkit-transform: scale(1, 1); /* Chrome, Safari, Opera */
    transform: scale(1, 1);
  }
}
@-webkit-keyframes M2NqjSVl6ooAJK5prZ6R {
  0% {
    -ms-transform: scale(0, 0); /* IE 9 */
    -webkit-transform: scale(0, 0); /* Chrome, Safari, Opera */
    transform: scale(0, 0);
  }
  100% {
    -ms-transform: scale(1, 1); /* IE 9 */
    -webkit-transform: scale(1, 1); /* Chrome, Safari, Opera */
    transform: scale(1, 1);
  }
}
@-webkit-keyframes sX7wVwSuaKZciyzGzBxS {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  25% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes sX7wVwSuaKZciyzGzBxS {
  0% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
  25% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes d9FcrsXDjfehABPkRuc3 {
  0% {
    transform: scaleY(0.2);
  }
  4% {
    transform: scaleY(0.77);
  }
  5% {
    transform: scaleY(0.84);
  }
  6% {
    transform: scaleY(0.81);
  }
  7% {
    transform: scaleY(0.84);
  }
  8% {
    transform: scaleY(0.82);
  }
  9% {
    transform: scaleY(0.84);
  }
  10% {
    transform: scaleY(0.83);
  }
  11% {
    transform: scaleY(0.84);
  }
  40% {
    transform: scaleY(0.84);
  }
  41% {
    transform: scaleY(0.84);
  }
  45% {
    transform: scaleY(0.13);
  }
  49% {
    transform: scaleY(0.18);
  }
  100% {
    transform: scaleY(0.18);
  }
}
@keyframes wQ8aZERIlntzcBl4sun3 {
  0% {
    transform: translateY(-124px);
  }
  5% {
    transform: translateY(-24px);
  }
  6% {
    transform: translateY(-36px);
  }
  7% {
    transform: translateY(-24px);
  }
  8% {
    transform: translateY(-32px);
  }
  9% {
    transform: translateY(-24px);
  }
  10% {
    transform: translateY(-28px);
  }
  11% {
    transform: translateY(-24px);
  }
  40% {
    transform: translateY(-24px);
  }
  41% {
    transform: translateY(-24px);
  }
  45% {
    transform: translateY(-136px);
  }
  46% {
    transform: translateY(-124px);
  }
  47% {
    transform: translateY(-132px);
  }
  48% {
    transform: translateY(-124px);
  }
  49% {
    transform: translateY(-128px);
  }
  50% {
    transform: translateY(-124px);
  }
  100% {
    transform: translateY(-124px);
  }
}
.e5LOWraMrfVfY7fDwdsY {
  animation: HPxWFH3gFEaiW0lgnsAH 0.1s ease-in;
  -webkit-animation: HPxWFH3gFEaiW0lgnsAH 0.1s ease-in; /* Chrome, Safari, Opera */
  background: #FFFFFF;
  bottom: 16px;
  box-shadow: 0 2px 16px rgba(20, 19, 37, 0.15);
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
/*!**********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/contextual-menu/components/bottom-bar/bottom-bar.module.scss ***!
  \**********************************************************************************************************************************************************************/
.AiaFeuQOfMYcKn1fcGxg {
  gap: 12px;
  overflow: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.AiaFeuQOfMYcKn1fcGxg::-webkit-scrollbar {
  display: none;
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/menu-bottom-bar/menu-bottom-bar.module.scss ***!
  \******************************************************************************************************************************************************************************************************************/
.ohBB3fodJM_ISZaSSqcB {
  top: 5px;
  right: -7px;
}
/*!*******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/add-button/add-button.module.scss ***!
  \*******************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.uOhzFNB6E3qoYxxe6_ed {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.VNbf0zIRTJruPMFJLNo3 {
  background: linear-gradient(90deg, #3FBCE7 0%, #007DE1 100%);
  cursor: pointer;
  height: 40px;
  width: 40px;
}

.mtIKgU44so1FwM7r3FL_ {
  overflow: hidden;
  position: relative;
}
.mtIKgU44so1FwM7r3FL_:after {
  animation: Z_oDJ2E1p5X48eKXZftA 0.7s ease;
  animation-iteration-count: 1;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.13) 77%, rgba(255, 255, 255, 0.5) 92%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 200%;
  left: -210%;
  position: absolute;
  top: -110%;
  transform: rotate(30deg);
  width: 200%;
}

@keyframes Z_oDJ2E1p5X48eKXZftA {
  0% {
    opacity: 1;
    left: -210%;
    top: -110%;
  }
  100% {
    opacity: 1;
    top: -30%;
    left: -30%;
  }
}
/*!**********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/poster-editor-add-item-button/poster-editor-add-item-button.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************/
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
.WVbJSnlg0qROkp7eFVmw {
  height: 78px;
  min-width: 80px;
  padding-top: 6px;
  position: relative;
}

.Y9llQEkV5wCcXXkDiQcq {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.jAu21zPxjO1zuG8cJHNZ {
  border-right: 1px solid #DCDCE1;
}

.lxe9dogPtcakEHZj0Znd {
  margin-right: 1px;
  margin-top: 3px;
}

.j_ywxQj9kfPDEX_Mr7qv {
  left: 22px;
  padding-bottom: 6px !important;
  padding-top: 5px !important;
  position: absolute;
  top: -42px;
  width: 210px;
  z-index: 4999 !important;
}
/*!**************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/background-item-fill-item/background-item-fill-item.module.scss ***!
  \**************************************************************************************************************************************************************************************************************************************/
.I63_wr0wErOwiquibX0p {
  height: 24px;
  object-fit: cover;
  width: 24px;
}
/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/vector-bottom-bar/vector-bottom-bar.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************/
.toDlPmlaDnJitbiAqA2g {
  top: 5px;
  right: -7px;
}
/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/qr-bottom-bar/qr-bottom-bar.module.scss ***!
  \**************************************************************************************************************************************************************************************************************/
.xbCNqpHvdhlmcMTi8Cj3 {
  top: 5px;
  right: -7px;
}
/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/remove-image-background-notification-tag/remove-image-background-notification-tag.module.scss ***!
  \********************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.BdOmGj1KGPUkJFnIb3oJ {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.uwUoA4RnHdhKTb35VnKQ {
  display: flex;
  justify-content: flex-end;
}

.r1w330bfqnvNvzWVt5M7 {
  border-radius: 4px;
  margin-left: auto;
}

.ydJul5jojLcLNXQibrrN {
  background: #6D48D0 !important;
}

.vmqmKwoQXdVbbsjXYVDB {
  background: #A1A1AA !important;
}

.Nu6WOU_zJ4EPAfEzz02h {
  background: #4017AF !important;
}

.g0wKlaLJ3aIZwhJltTGl {
  background: #757589 !important;
}

.NrGikcdTLtl0ZylI9mje {
  top: -69px;
  right: -103px;
  width: 240px;
}

.t5TfCiLzbnUncpeKXDgm {
  overflow: hidden;
}
/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/image-bottom-bar/image-bottom-bar.module.scss ***!
  \********************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.tQLCl2VTOGmLjwGPhF_3 {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.F1rGc_90Nv1QWR_LHFxU {
  background: linear-gradient(90deg, #EEFAFF 0%, #ECE9FF 100%) !important;
}

.lyRnJ2dV82p5XhV2oa9I {
  background: linear-gradient(90deg, #2CAAD6 0%, #5628D8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.d3oTEUyuBBNQTqaH4uBY {
  top: 5px;
  right: -7px;
}
/*!*******************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/free-bgr-mobile-notification/free-bgr-mobile-notification.module.scss ***!
  \*******************************************************************************************************************************************************************************/
.lvXwAYvs1zWqqDNWdu5w {
  background: rgba(20, 19, 37, 0.8);
  left: 50%;
  min-width: 201px;
  position: fixed;
  top: 72px;
  transform: translate(-50%, 0);
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/text-bottom-bar/text-bottom-bar.module.scss ***!
  \******************************************************************************************************************************************************************************************************************/
.IpyOINs5pJmaMKyJ_xyz {
  top: 5px;
  right: -7px;
}
/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/fancy-text-bottom-bar/fancy-text-bottom-bar.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************/
.nnn6lFMUNOZ8ANxMjCvx {
  top: 5px;
  right: -7px;
}
/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/remove-video-background-notification-tag/remove-video-background-notification-tag.module.scss ***!
  \********************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.wPFm8_8LT9UOU4We1DqZ {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.LW8WpqbGTIZy37QJvwsk {
  display: flex;
  justify-content: flex-end;
}

.Z2vWPqEwmcBKFPVJ9vyx {
  border-radius: 4px;
  margin-left: auto;
}

.tW17kj81gGL5ZCWwM357 {
  background: #6D48D0 !important;
}

.OjVGGlCRPRTCGWeHJk9w {
  background: #A1A1AA !important;
}

._u64vmJApbvpy900a0y6 {
  background: #4017AF !important;
}

.bxhLzCtW1xHteQzXwjSC {
  background: #757589 !important;
}

.vR232PYpx6rx5mhlfnQW {
  top: -69px;
  right: -103px;
  width: 240px;
}

.PhDtS4NNWvU9bmG9D4j2 {
  overflow: hidden;
}
/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/video-bottom-bar/video-bottom-bar.module.scss ***!
  \********************************************************************************************************************************************************************************************************************/
.RkCbv_h8Xg5MbBMoN8IP {
  top: 5px;
  right: -7px;
}

.zUPlZ8O7ib59qVE8JUZr {
  top: 5px;
  right: -7px;
}
/*!********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/table-bottom-bar/table-bottom-bar.module.scss ***!
  \********************************************************************************************************************************************************************************************************************/
.kQ4Q5ge1xL8phhL2AzJU {
  top: 5px;
  right: -7px;
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/tabs-bottom-bar/tabs-bottom-bar.module.scss ***!
  \******************************************************************************************************************************************************************************************************************/
.EGoUFW2Ud1eV1Yrsxjt1 {
  top: 5px;
  right: -7px;
}
/*!***********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/text-slide-bottom-bar/text-slide-bar.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************/
.hpr9uKvoD7JEvWfc2PRI {
  top: 5px;
  right: -7px;
}
/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/media-slide-bottom-bar/media-slide-bottom-bar.module.scss ***!
  \********************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.kK0RDyPxorYUzjwEdcN9 {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.KNs6_83Qz6xslBPvTXI3 {
  background: linear-gradient(90deg, #EEFAFF 0%, #ECE9FF 100%) !important;
}

.KjxTeJJwcSDnjpzAlusz {
  background: linear-gradient(90deg, #2CAAD6 0%, #5628D8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.Fuha5lewtUCgwjb6jPq2 {
  top: 5px;
  right: -7px;
}
/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/rectangle-bottom-bar/rectangle-bottom-bar.module.scss ***!
  \****************************************************************************************************************************************************************************************************************************/
._o3XUFomibKgEwurtlnh {
  top: 5px;
  right: -7px;
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/line-bottom-bar/line-bottom-bar.module.scss ***!
  \******************************************************************************************************************************************************************************************************************/
.frsXK1p_vJgkQi_20zjE {
  top: 5px;
  right: -7px;
}
/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/transcript-bottom-bar/transcript-bottom-bar.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************/
.z_cGdJTTH9ntURA7T7OR {
  top: 5px;
  right: -7px;
}
/*!*************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/poster-editing-bottom-bar.module.scss ***!
  \*************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.ATarfB_fbqR91rKnYarY {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.Q6bdgIRoeFR8wGiNw5dS {
  background-color: #FAFAFA;
  border-top: 1px solid rgba(48, 47, 59, 0);
  transition: background-color 0.2s ease-in-out;
}

.oVz6_bf6YjaCsIbmVhRC {
  background-color: #FFFFFF;
  border-top: 1px solid #E6E6EC;
  box-shadow: 0 0 12px rgba(20, 19, 37, 0.1);
}

.LrYWKxDL9pQhHd1cIBfi {
  margin: 8px 16px 16px 16px;
}

.PXHzic7ryP5TX2iFkzTJ {
  position: relative;
}
/*!*******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-mobile-big-seekbar/poster-mobile-big-seekbar.scss ***!
  \*******************************************************************************************************************************************************************************************/

/*!*****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/media-control-buttons/media-control-buttons.module.scss ***!
  \*****************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.sDlhY7gXS6cmnP988lBh {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.XAXE0SEwcfB1oX4mZi6E {
  display: flex;
  width: fit-content;
}

.xTtYzVfiV90yN5RkkB2i {
  display: flex;
  justify-content: space-between;
  width: 90px;
}

.t2sEAxIL1cc9oKs0hjIY {
  transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
}

.xWmhlYk7vn5OQr8GZATD {
  background: none;
  padding: 0;
}
/*!***************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/audio-waveform/audio-waveform.module.scss ***!
  \***************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.s24dsZ_lKtZK3sYTHpFw {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.GzPCogdVRjKTiSJ35Inb {
  margin-left: calc(50% - 30px);
  margin-top: 15px;
}

.K68ahQJ2n1xvC41jzpQw {
  width: 100%;
  height: 100%;
}

._NxVT6AdBuOfSZGH1ByA {
  background-color: #F2F2F5;
  height: 44px;
  left: 24px;
  position: absolute;
  top: 6px;
  width: calc(100% - 49px);
}
._NxVT6AdBuOfSZGH1ByA wave {
  overflow: hidden !important;
}
/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/duration-notification/duration-notification.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
.wSumKryDvImFJOgoRKAb {
  background: rgba(20, 19, 37, 0.6);
  bottom: 6.5px;
  color: #FFFFFF;
  height: 18px;
  opacity: 1;
  padding: 2px 4px;
  position: absolute;
  right: 4px;
  transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
  visibility: unset;
  width: fit-content;
  z-index: 1;
}

.CqzOfVpp9bT6nmhk_byz {
  background: rgba(20, 19, 37, 0.6);
}

.fxvRu6pc4SnnlnNNx0iS {
  background: rgba(64, 23, 175, 0.6);
}

.KGcsdSTExhfz9ojSFeWL {
  background: rgba(0, 104, 140, 0.6);
}

.vM_oQPaCzCQidFr5EAxW {
  background: rgba(0, 133, 101, 0.6);
}

.I3AYa1eVys2Db9Yrc684 {
  display: block;
  height: 14px;
}
/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/timeline-item-handle/timeline-item-handle.module.scss ***!
  \********************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
.FTeW2s_dRvhFamGEsTAK {
  cursor: col-resize;
  flex-shrink: 0;
  height: calc(100% - 4px);
  position: absolute;
  top: 2px;
  transition: all 0.2s ease-in-out;
  width: 12px;
  z-index: 4;
}
.FTeW2s_dRvhFamGEsTAK.HWxeFZqzgNyADZmn3LOY {
  border-radius: 6px 1px 1px 6px;
  left: 2px;
}
.FTeW2s_dRvhFamGEsTAK.k1q64oQIvmTvdqXARI7k {
  border-radius: 1px 6px 6px 1px;
  right: 2px;
}

.emwIMf2oSRR6TM1ghyVs {
  background: rgba(20, 19, 37, 0.5);
}
.emwIMf2oSRR6TM1ghyVs:hover, .emwIMf2oSRR6TM1ghyVs:focus, .emwIMf2oSRR6TM1ghyVs:focus-within {
  background: rgba(20, 19, 37, 0.7);
}

.yKdTEKbXaMADL4VJMYOy {
  background: #19AD89;
}
.yKdTEKbXaMADL4VJMYOy:hover, .yKdTEKbXaMADL4VJMYOy:focus, .yKdTEKbXaMADL4VJMYOy:focus-within {
  background: #008565;
}

.vf5naDpbgS_H5IvVoeTQ {
  background: #23A6D4;
}
.vf5naDpbgS_H5IvVoeTQ:hover, .vf5naDpbgS_H5IvVoeTQ:focus, .vf5naDpbgS_H5IvVoeTQ:focus-within {
  background: #00688C;
}

.vlHH6OuIeewnBLbuwmfv {
  background: #6D48D0;
}
.vlHH6OuIeewnBLbuwmfv:hover, .vlHH6OuIeewnBLbuwmfv:focus, .vlHH6OuIeewnBLbuwmfv:focus-within {
  background: #4017AF;
}

.Fn27LDsUIoOtpdScKGq7 {
  background: #FFFFFF;
  height: 14px;
  width: 2px;
}
/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/base-timeline-item/base-timeline-item.module.scss ***!
  \****************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
.gcLjN8mT8jJnOK4t1Fda {
  background: #D5C9F5;
  border: 1px solid #CABBF3;
  cursor: grab;
}
.gcLjN8mT8jJnOK4t1Fda._f6wygODeFm9hgfgSmPl {
  background: #EBFBF7;
  border: 1px solid #96E9D5;
}
.gcLjN8mT8jJnOK4t1Fda.js3G0rgyZaltrdLR7N2w {
  border: 1px solid #FFFFFF;
}
.gcLjN8mT8jJnOK4t1Fda.js3G0rgyZaltrdLR7N2w._f6wygODeFm9hgfgSmPl {
  box-shadow: 0 0 0 2px #19AD89;
}
.gcLjN8mT8jJnOK4t1Fda.js3G0rgyZaltrdLR7N2w.E3Q6mZWiRJwPreSDGxqr {
  box-shadow: 0 0 0 2px #9577E7;
}
.gcLjN8mT8jJnOK4t1Fda.js3G0rgyZaltrdLR7N2w.CdXC8qwJZmYGqDMoAtB_ {
  box-shadow: 0 0 0 2px #23A6D4;
}

.jOJWeYupbM_XczBpVjuh {
  background: #F4F1FD;
  border: 1px solid #F4F1FD;
  margin-right: 2px;
  padding: 4px;
  position: relative;
}
.jOJWeYupbM_XczBpVjuh.u8eyN7kFO3nSqRNtPxef {
  background: #FFFFFF;
}
.jOJWeYupbM_XczBpVjuh._f6wygODeFm9hgfgSmPl {
  background: #EBFBF7;
  border: 1px solid #EBFBF7;
}
.jOJWeYupbM_XczBpVjuh:not(.js3G0rgyZaltrdLR7N2w):hover, .jOJWeYupbM_XczBpVjuh:not(.js3G0rgyZaltrdLR7N2w):focus, .jOJWeYupbM_XczBpVjuh:not(.js3G0rgyZaltrdLR7N2w):focus-within {
  border: 1px solid #FFFFFF;
  box-shadow: 0 0 0 2px #CBCBD0;
  padding-left: 16px;
}
.jOJWeYupbM_XczBpVjuh:not(.js3G0rgyZaltrdLR7N2w):hover .v45lYh6tVKJJ0JPfqUWH, .jOJWeYupbM_XczBpVjuh:not(.js3G0rgyZaltrdLR7N2w):focus .v45lYh6tVKJJ0JPfqUWH, .jOJWeYupbM_XczBpVjuh:not(.js3G0rgyZaltrdLR7N2w):focus-within .v45lYh6tVKJJ0JPfqUWH {
  display: flex;
}
.jOJWeYupbM_XczBpVjuh:not(.js3G0rgyZaltrdLR7N2w):hover .Rws3D8SmJAwAxI2KAwNh, .jOJWeYupbM_XczBpVjuh:not(.js3G0rgyZaltrdLR7N2w):focus .Rws3D8SmJAwAxI2KAwNh, .jOJWeYupbM_XczBpVjuh:not(.js3G0rgyZaltrdLR7N2w):focus-within .Rws3D8SmJAwAxI2KAwNh {
  display: flex;
}
.jOJWeYupbM_XczBpVjuh:not(.js3G0rgyZaltrdLR7N2w):hover .LdsyrTGrxBwKtU4xwKTN, .jOJWeYupbM_XczBpVjuh:not(.js3G0rgyZaltrdLR7N2w):focus .LdsyrTGrxBwKtU4xwKTN, .jOJWeYupbM_XczBpVjuh:not(.js3G0rgyZaltrdLR7N2w):focus-within .LdsyrTGrxBwKtU4xwKTN {
  opacity: 0;
  visibility: hidden;
}
.jOJWeYupbM_XczBpVjuh.js3G0rgyZaltrdLR7N2w {
  border: 1px solid #FFFFFF;
  padding-left: 16px;
}
.jOJWeYupbM_XczBpVjuh.js3G0rgyZaltrdLR7N2w._f6wygODeFm9hgfgSmPl {
  box-shadow: 0 0 0 2px #19AD89;
}
.jOJWeYupbM_XczBpVjuh.js3G0rgyZaltrdLR7N2w.E3Q6mZWiRJwPreSDGxqr {
  box-shadow: 0 0 0 2px #9577E7;
}
.jOJWeYupbM_XczBpVjuh.js3G0rgyZaltrdLR7N2w.CdXC8qwJZmYGqDMoAtB_ {
  box-shadow: 0 0 0 2px #23A6D4;
}
.jOJWeYupbM_XczBpVjuh.js3G0rgyZaltrdLR7N2w .v45lYh6tVKJJ0JPfqUWH {
  display: flex;
}
.jOJWeYupbM_XczBpVjuh.js3G0rgyZaltrdLR7N2w .Rws3D8SmJAwAxI2KAwNh {
  display: flex;
}
.jOJWeYupbM_XczBpVjuh.js3G0rgyZaltrdLR7N2w .LdsyrTGrxBwKtU4xwKTN {
  opacity: 0;
  visibility: hidden;
}
.jOJWeYupbM_XczBpVjuh .v45lYh6tVKJJ0JPfqUWH {
  display: none;
}
.jOJWeYupbM_XczBpVjuh .Rws3D8SmJAwAxI2KAwNh {
  display: none;
}
.jOJWeYupbM_XczBpVjuh .LdsyrTGrxBwKtU4xwKTN {
  visibility: unset;
  z-index: 4;
}

.akTsT3NFJDz6B6x8hc4S {
  position: fixed !important;
}

.E9c9tBx2wZV1KfOGVvb4 {
  position: absolute !important;
  right: -56px;
  top: 2px !important;
  width: 48px;
}

.wdM_8GgpV82oe8204oow {
  cursor: col-resize;
}
/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/fade-background/fade-background.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.wEJZn3wP8LkZ0FxfVmTi {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.o4ky4qLaMGjvufdDDT1H {
  position: relative;
  box-shadow: 0 6px 16px 0 rgba(20, 19, 37, 0.1);
  opacity: 1;
  border-radius: 8px 4px 4px 8px;
}

.jHSPPxR7053z7qOjsDeR {
  border-radius: inherit;
  position: absolute;
  background: white;
  opacity: 1;
  z-index: 1;
}

.N55k9m2N1hSbUwcVLP8Q {
  border-radius: inherit;
  position: absolute;
  z-index: 2;
  opacity: 0.7;
  background: linear-gradient(270deg, rgba(149, 119, 231, 0.6) 0%, rgba(149, 119, 231, 0.2) 100%);
}
.N55k9m2N1hSbUwcVLP8Q.PFf_ZLLQIzOF3Ij7eUrw {
  background: linear-gradient(90deg, rgba(149, 119, 231, 0.6) 0%, rgba(149, 119, 231, 0.2) 100%);
}
/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/audio-item-fade-background/audio-item-fade-background.module.scss ***!
  \********************************************************************************************************************************************************************************************************************************************/
.ajA2fQbyT4ANLB0ZByk6 {
  position: absolute;
  z-index: 1;
}
.ajA2fQbyT4ANLB0ZByk6.JTN8egqkuUDu6MNs8m0k {
  right: 0;
}
.ajA2fQbyT4ANLB0ZByk6.yMUxJ2h52I7yuPlYs63N {
  left: 0;
}
/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/audio-item-fade-slider/audio-item-fade-slider.scss ***!
  \*****************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.-large {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.audio-item-fade-slider {
  cursor: grab;
  width: unset;
}
.audio-item-fade-slider.rc-slider {
  height: 0 !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}
.audio-item-fade-slider.reverse .rc-slider-handle {
  top: -8.5px;
}
.audio-item-fade-slider .rc-slider-handle {
  background: #6D48D0;
  border: 2px solid #FFFFFF !important;
  border-radius: 4px;
  box-shadow: 0 6px 16px 0 rgba(20, 19, 37, 0.1) !important;
  cursor: col-resize;
  height: 16px;
  opacity: 1;
  outline: none;
  rotate: 45deg;
  top: 2.5px;
  width: 16px;
  z-index: 100;
}
.audio-item-fade-slider .rc-slider-handle:hover, .audio-item-fade-slider .rc-slider-handle:focus-within, .audio-item-fade-slider .rc-slider-handle:focus {
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 6px 16px 0 rgba(20, 19, 37, 0.1) !important;
}
.audio-item-fade-slider .rc-slider-rail, .audio-item-fade-slider .rc-slider-track, .audio-item-fade-slider .rc-slider-step {
  cursor: grab;
  display: none;
  visibility: hidden;
}
/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/timeline-audio-item/timeline-audio-item.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
.osMzVA3FkC6c7hAodkG8 {
  color: #6D48D0;
  min-width: 12px !important;
}

.sDlaIf6mGP5zpr9KJ91h {
  cursor: grab;
  height: 32px;
  position: absolute;
  z-index: 2;
}

.okLTIiMQMM7rnqlWCvRk {
  cursor: grab !important;
  height: 32px !important;
  z-index: 1 !important;
}
.okLTIiMQMM7rnqlWCvRk.Bow9h0CydAGl2pGRYNkG {
  background: #FFFFFF;
}

.Or7WYJJBQs985vL_pgEF {
  background: linear-gradient(90deg, #F4F1FD 0%, #F4F1FD 61.48%, rgba(234, 228, 250, 0) 100%, rgba(244, 241, 253, 0) 100%);
  padding-right: 50px;
  z-index: 3;
}
.Or7WYJJBQs985vL_pgEF.Bow9h0CydAGl2pGRYNkG {
  background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 61.48%, rgba(255, 255, 255, 0) 100%);
}
.Or7WYJJBQs985vL_pgEF.nKxh5MNEYWkIg5qTUSHz {
  background: transparent !important;
}

.KxE1Hx_LwBIqmpbWTeHG {
  left: 22px;
  position: absolute;
  width: calc(50% - 8px - 22px - 4px);
  z-index: 10;
}

.sUMun0kPrnPr6rgl0FaX {
  position: absolute;
  right: 22px;
  width: calc(50% - 8px - 22px - 4px);
  z-index: 10;
}
/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/design-seek-item-background-container/design-seek-item-background-container.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
.ZTCCY1Pi_6Y7Kky3wcKQ {
  background-repeat: repeat-x;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 0;
}
/*!************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/timeline-subtitle-item/timeline-subtitle-item.module.scss ***!
  \************************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
.eQ2JGs_vYRi1igtMvE2q {
  color: #19AD89;
  min-width: 16px !important;
}

.YGMFKzxiYkcJC2IN_QEq {
  width: calc(100% - 32px);
}

.aXz20HborjrPAmSSIJZ4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/base-timeline-content/base-timeline-content.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************/
.nH3IQ2mhAQljQYKTqR5n {
  row-gap: 8px;
}

.I9VGnr6oIgwou7ssj0EP {
  transition: width 300ms ease-in-out;
}
/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/base-timestamps/base-timestamps.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
.vQBzxZGuPNoEJ2blz1zv {
  color: #A1A1AA;
}

.CEln6rKH3uTrNere8RaV {
  background: #DCDCE1;
  height: 2px;
  position: absolute;
  right: -2px;
  top: 7px;
  width: 2px;
}

.hnQIDaFbho1aejTX047l {
  right: -6px;
}

.LjaAdEGp8pq5xTpKUz3p {
  position: absolute;
  top: 2px;
}

.Q32dKQ9815QxS6ne7r96 {
  font-size: 8px;
  font-style: normal !important;
  font-weight: 300 !important;
  letter-spacing: normal !important;
  line-height: 150% !important;
}

.TVhuFq2EMgNW26Ka8zic {
  position: relative;
}

.ZRZHdn817PgjzryYeMfm {
  right: -2.5px;
}

.U5R9gl0VLcxhek2bcjLS {
  transition: width 300ms ease-in-out;
}

.QBYWadngZxzQtm3gpL1O {
  left: 7.5px;
  position: absolute;
  top: 7px;
}
.QBYWadngZxzQtm3gpL1O.vRCYx_rsmqahhrruD0Ff {
  top: 3px;
}
/*!**********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-mobile-timeline/poster-editor-mobile-timeline.module.scss ***!
  \**********************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.ENPc9RsDCpSqxJco12kA {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.yIvUYpuuvX0EFbk356M5 {
  position: relative;
}

.VHNL5W4zwWHUjDWjXo2q {
  -ms-overflow-style: none; /* IE and Edge */
  overflow-x: auto;
  overflow-y: auto;
  padding-left: 50%;
  scrollbar-width: none; /* Firefox */
}

.VHNL5W4zwWHUjDWjXo2q::-webkit-scrollbar {
  display: none;
}

.EmUnIL7XkVYp2z5BH7Gv {
  height: 15px;
  max-height: 15px;
  position: relative;
}

.vjMWoaT4sQAJ0WAuQpx4 {
  background: #FFFFFF;
  left: calc(50% + 4px);
  position: absolute;
  top: 20px;
  width: 4px;
  z-index: 20;
}
.vjMWoaT4sQAJ0WAuQpx4 .pXf2096zUVHXXgDuX2R9 {
  background: #2C2B44;
  height: 75%;
  position: absolute;
  width: 2px;
}
.vjMWoaT4sQAJ0WAuQpx4 .zP7tWbuq7qrru33dCjxa {
  background-image: linear-gradient(#2C2B44, #FFFFFF);
  height: 25%;
  position: absolute;
  top: 75%;
  width: 2px;
}

.MvUu_e6_wvxLUQMhaLUs {
  transition: margin-top 0.3s ease-in-out;
}
/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-mobile-big-seekbar/poster-mobile-big-seekbar.module.scss ***!
  \**************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.UEqbJhXoXWgyXotWS4Q0 {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
/*
Animation styles and keyframes
*/
.HqiDh27VNiiDrvrXe1g5 {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.HqiDh27VNiiDrvrXe1g5.cLNd9lvhxWy1lLF8CzPg {
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
.HqiDh27VNiiDrvrXe1g5.xQjbGOXBA79sDhpWAa6h {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.HqiDh27VNiiDrvrXe1g5.p312qxpTkmeDv45iL1BT {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}

.HqiDh27VNiiDrvrXe1g5.StHwrazxZtjnvd1la6jo {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

.HqiDh27VNiiDrvrXe1g5.GiEJSRPsEoPow0Ni_KwR {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

.HqiDh27VNiiDrvrXe1g5.JVOdXN0VtN66JJ4zZwOe {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.HqiDh27VNiiDrvrXe1g5.qhq07pn5YnZDNBUtAEWu {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
}

.HqiDh27VNiiDrvrXe1g5.NKhnwMQNHk9ipsyr9sIY {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.HqiDh27VNiiDrvrXe1g5.MxYfwL3KxGB_VpnQhoZt {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
}

.SgqiRrrQV9_cP9lVchF1 {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.Lvhf5DQis8rJwYsQSpVI {
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

.ABoPMqYDRFGhoBnne3lH {
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.vgBeQh1F_UTT9H0b0pvK .MR6SemdstbNMeUnvoRNI, .vgBeQh1F_UTT9H0b0pvK .bG37Er8anu9dFAcPDk7e {
  overflow: hidden;
}
.vgBeQh1F_UTT9H0b0pvK:hover .MR6SemdstbNMeUnvoRNI::before, .vgBeQh1F_UTT9H0b0pvK:hover .bG37Er8anu9dFAcPDk7e::before, .vgBeQh1F_UTT9H0b0pvK:focus .MR6SemdstbNMeUnvoRNI::before, .vgBeQh1F_UTT9H0b0pvK:focus .bG37Er8anu9dFAcPDk7e::before, .vgBeQh1F_UTT9H0b0pvK:focus-within .MR6SemdstbNMeUnvoRNI::before, .vgBeQh1F_UTT9H0b0pvK:focus-within .bG37Er8anu9dFAcPDk7e::before {
  animation: hlaoSvPw9A4ExmNKAHAb 1800ms cubic-bezier(0.68, -0.6, 0.32, 1.6) 1;
  display: block;
  transform-box: fill-box;
  transform-origin: center;
}

.lhwZSTqppObCSJclnERN .MR6SemdstbNMeUnvoRNI {
  overflow: hidden;
}
.lhwZSTqppObCSJclnERN .MR6SemdstbNMeUnvoRNI::before {
  animation: mDXTvafCOji7C_2i_thF 2500ms cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
  display: block;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes hlaoSvPw9A4ExmNKAHAb {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  30% {
    transform: rotate(-56deg) translateX(0);
  }
  34% {
    transform: rotate(-38deg) translateX(0);
  }
  38% {
    transform: rotate(-50deg) translateX(0);
  }
  42% {
    transform: rotate(-45deg) translateX(0);
  }
  47% {
    transform: rotate(-45deg) translateX(0);
  }
  57% {
    opacity: 1;
    transform: rotate(-45deg) translateX(20px);
  }
  58% {
    opacity: 0;
    transform: rotate(-45deg) translateX(20px);
  }
  59% {
    opacity: 0;
    transform: rotate(-45deg) translateX(-20px);
  }
  60% {
    opacity: 1;
    transform: rotate(-45deg) translateX(-20px);
  }
  73% {
    transform: rotate(-45deg) translateX(0);
  }
  78% {
    transform: rotate(-45deg) translateX(0);
  }
  88% {
    transform: rotate(12deg) translateX(0);
  }
  93% {
    transform: rotate(-8deg) translateX(0);
  }
  96% {
    transform: rotate(3deg) translateX(0);
  }
  100% {
    transform: rotate(0) translateX(0);
  }
}
@keyframes mDXTvafCOji7C_2i_thF {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  30% {
    transform: rotate(-56deg) translateX(0);
  }
  34% {
    transform: rotate(-38deg) translateX(0);
  }
  38% {
    transform: rotate(-50deg) translateX(0);
  }
  42% {
    transform: rotate(-45deg) translateX(0);
  }
  47% {
    transform: rotate(-45deg) translateX(0);
  }
  57% {
    opacity: 1;
    transform: rotate(-45deg) translateX(50px);
  }
  58% {
    opacity: 0;
    transform: rotate(-45deg) translateX(50px);
  }
  59% {
    opacity: 0;
    transform: rotate(-45deg) translateX(-50px);
  }
  60% {
    opacity: 1;
    transform: rotate(-45deg) translateX(-50px);
  }
  73% {
    transform: rotate(-45deg) translateX(0);
  }
  78% {
    transform: rotate(-45deg) translateX(0);
  }
  88% {
    transform: rotate(12deg) translateX(0);
  }
  93% {
    transform: rotate(-8deg) translateX(0);
  }
  96% {
    transform: rotate(3deg) translateX(0);
  }
  100% {
    transform: rotate(0) translateX(0);
  }
}
.RGTWlAEkE6ktQ178Yno1 {
  -webkit-transform-origin: left; /* Chrome, Safari, Opera */
  transform-origin: left;
}

.c1GCXydctulymIOoYzJg {
  -webkit-transform-origin: right; /* Chrome, Safari, Opera */
  transform-origin: right;
}

.nllcmlK8pg9H1RICr26d {
  -webkit-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
}
.nllcmlK8pg9H1RICr26d:hover {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
}

.gdOuAAx3p42LohCWZTe9 {
  -webkit-transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
}
.gdOuAAx3p42LohCWZTe9:hover, .gdOuAAx3p42LohCWZTe9:focus, .gdOuAAx3p42LohCWZTe9:focus-within {
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Chrome, Safari, Opera */
  transform: scale(1.05);
}

.Q4_bIVNMV5NLZRgGnHFr {
  -webkit-transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.Q4_bIVNMV5NLZRgGnHFr._mWelXXvltq19vU6fVNQ {
  transition-duration: 100ms;
}
.Q4_bIVNMV5NLZRgGnHFr:hover, .Q4_bIVNMV5NLZRgGnHFr:focus, .Q4_bIVNMV5NLZRgGnHFr:focus-within {
  -ms-transform: translate(0, -2%); /* IE 9 */
  -webkit-transform: translate(0, -2%); /* Chrome, Safari, Opera */
  transform: translate(0, -2%);
}

.R_zrm35L0SSaFokL5E5b {
  -webkit-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  opacity: 1;
}
.R_zrm35L0SSaFokL5E5b:hover {
  opacity: 0.8;
}

.SXCAM185RW0DiEojeEG1 {
  opacity: 1;
  -webkit-transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.SXCAM185RW0DiEojeEG1:hover {
  -ms-transform: scale3d(1.15, 1.15, 1.15); /* IE 9 */
  -webkit-transform: scale3d(1.15, 1.15, 1.15); /* Chrome, Safari, Opera */
  transform: scale3d(1.15, 1.15, 1.15);
}

.TsJqzOxdZSUh0Rda38xJ {
  -webkit-transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
  transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
}

@-webkit-keyframes oB_F1_6OImpqG74O7Co2 {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes oB_F1_6OImpqG74O7Co2 {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.oB_F1_6OImpqG74O7Co2 {
  -webkit-animation-name: oB_F1_6OImpqG74O7Co2;
  animation-name: oB_F1_6OImpqG74O7Co2;
}

@-webkit-keyframes C_IrImNbj6LSLuMmS2z0 {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@keyframes C_IrImNbj6LSLuMmS2z0 {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@-webkit-keyframes C1zDpUV8cnBw1rPF14_E {
  11.1% {
    transform: none;
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
  100% {
    transform: none;
  }
}
@keyframes C1zDpUV8cnBw1rPF14_E {
  11.1% {
    transform: none;
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
  100% {
    transform: none;
  }
}
@-webkit-keyframes kyfrFJLNRVORCMFKJIny {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes kyfrFJLNRVORCMFKJIny {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes i648mJGupxmvonxq9iEu {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@keyframes i648mJGupxmvonxq9iEu {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@-webkit-keyframes UOuHUk_I5TNnM8d2mb56 {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@keyframes UOuHUk_I5TNnM8d2mb56 {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@-webkit-keyframes iRklpF4JpdBnWaZzsjSs {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@keyframes iRklpF4JpdBnWaZzsjSs {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes nlbG55Q4aP3Fv7bWELIp {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@keyframes nlbG55Q4aP3Fv7bWELIp {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes UZPYM1OVecLuAFvgX3R_ {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@keyframes UZPYM1OVecLuAFvgX3R_ {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@-webkit-keyframes UGmH9TYT8UI2RpfhnCQZ {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@keyframes UGmH9TYT8UI2RpfhnCQZ {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@-webkit-keyframes iE50A6klb4dImxIYAM9d {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@keyframes iE50A6klb4dImxIYAM9d {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes v9ni3nJW65NfWNfS6066 {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@keyframes v9ni3nJW65NfWNfS6066 {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes ww8qyiCyoX9PpP8kiRxM {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@keyframes ww8qyiCyoX9PpP8kiRxM {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@-webkit-keyframes cYwSmt0RaRy8vM_v5wgC {
  0% {
    transform: scale(0.3);
    opacity: 0.4;
  }
  25% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(0.7);
    opacity: 0.6;
  }
  75% {
    transform: scale(1);
    opacity: 0.8;
  }
  90%, 100% {
    transform: scale(0.8);
    opacity: 1;
  }
}
@keyframes cYwSmt0RaRy8vM_v5wgC {
  0% {
    transform: scale(0.3);
    opacity: 0.4;
  }
  25% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(0.7);
    opacity: 0.6;
  }
  75% {
    transform: scale(1);
    opacity: 0.8;
  }
  90%, 100% {
    transform: scale(0.8);
    opacity: 1;
  }
}
@-webkit-keyframes lwIw_NEo6z_2gM1mx5CQ {
  0% {
    opacity: 1;
    transform: scale(1.5) translateX(40px) translateY(15px);
  }
  60%, 100% {
    transform: scale(1.5) translateX(-30px) translateY(30px) rotate(90deg);
    opacity: 1;
  }
}
@keyframes lwIw_NEo6z_2gM1mx5CQ {
  0% {
    opacity: 1;
    transform: scale(1.5) translateX(40px) translateY(15px);
  }
  60%, 100% {
    transform: scale(1.5) translateX(-30px) translateY(30px) rotate(90deg);
    opacity: 1;
  }
}
@-webkit-keyframes OfugohCIwdefyhbHR5dh {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes OfugohCIwdefyhbHR5dh {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes lhpl33Oot7CZT0XB6fbp {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes lhpl33Oot7CZT0XB6fbp {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes l0sQzH4uM1ciolayWudT {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes l0sQzH4uM1ciolayWudT {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes ImSyXBErPnLcfmMIc2yA {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes ImSyXBErPnLcfmMIc2yA {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes YfJdKwMXBHLTuWZ_T67w {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@keyframes YfJdKwMXBHLTuWZ_T67w {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@-webkit-keyframes vZJt4Bth2ReARndF4gDE {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@keyframes vZJt4Bth2ReARndF4gDE {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@-webkit-keyframes jV6dC1Xy0PCRLNOyuYmA {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes jV6dC1Xy0PCRLNOyuYmA {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.jV6dC1Xy0PCRLNOyuYmA {
  -webkit-animation-name: jV6dC1Xy0PCRLNOyuYmA;
  animation-name: jV6dC1Xy0PCRLNOyuYmA;
}

@-webkit-keyframes t0LyzXaqKliIPVyQiPx_ {
  0% {
    top: -100px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
@keyframes t0LyzXaqKliIPVyQiPx_ {
  0% {
    top: -100px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
.t0LyzXaqKliIPVyQiPx_ {
  -webkit-animation-name: t0LyzXaqKliIPVyQiPx_;
  animation-name: t0LyzXaqKliIPVyQiPx_;
}

@keyframes _6leNbzo7dRgLfpS9wXe {
  0% {
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
  }
  100% {
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
  }
}
@-webkit-keyframes _6leNbzo7dRgLfpS9wXe {
  0% {
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
  }
  100% {
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
  }
}
@keyframes kGKZnwQiu6z7tX7o5hOq {
  0% {
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
  }
  100% {
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
  }
}
@-webkit-keyframes kGKZnwQiu6z7tX7o5hOq {
  0% {
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
  }
  100% {
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
  }
}
@-webkit-keyframes Acb4OoURF09TKvc0ej2m {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes Acb4OoURF09TKvc0ej2m {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.Acb4OoURF09TKvc0ej2m {
  -webkit-animation-name: Acb4OoURF09TKvc0ej2m;
  animation-name: Acb4OoURF09TKvc0ej2m;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes iN8p_eYjl9nSPSeAY3O3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes iN8p_eYjl9nSPSeAY3O3 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.iN8p_eYjl9nSPSeAY3O3 {
  -webkit-animation-name: iN8p_eYjl9nSPSeAY3O3;
  animation-name: iN8p_eYjl9nSPSeAY3O3;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes J7Rbqa5M3jUMGS_CPAbM {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes J7Rbqa5M3jUMGS_CPAbM {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.qZ0ssu4nx5HtL5_DlocS {
  -webkit-transition: background 200ms ease-in-out;
  transition: background 200ms ease-in-out;
}

.J7Rbqa5M3jUMGS_CPAbM {
  -webkit-animation-name: J7Rbqa5M3jUMGS_CPAbM;
  animation-name: J7Rbqa5M3jUMGS_CPAbM;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes wjM08tVNifm8x9tJWh94 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes wjM08tVNifm8x9tJWh94 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.wjM08tVNifm8x9tJWh94 {
  -webkit-animation-name: wjM08tVNifm8x9tJWh94;
  animation-name: wjM08tVNifm8x9tJWh94;
}

@-webkit-keyframes AHcJCGAHwYBiPjFYIGPH {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes AHcJCGAHwYBiPjFYIGPH {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.AHcJCGAHwYBiPjFYIGPH {
  -webkit-animation-name: AHcJCGAHwYBiPjFYIGPH;
  animation-name: AHcJCGAHwYBiPjFYIGPH;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes Be7Jo20rW4vpVoM6ka5x {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes Be7Jo20rW4vpVoM6ka5x {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.Be7Jo20rW4vpVoM6ka5x {
  -webkit-animation-name: Be7Jo20rW4vpVoM6ka5x;
  animation-name: Be7Jo20rW4vpVoM6ka5x;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.OoJzYteR2KWwf1ZJcDRA {
  opacity: 0;
  overflow-y: hidden;
  transition-duration: 1s;
  transition-property: all;
  transition-timing-function: ease-in-out;
}
.OoJzYteR2KWwf1ZJcDRA:hover {
  opacity: 1;
}

.fZiyqHyWsdtmIixWDTas {
  max-height: 250px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.fZiyqHyWsdtmIixWDTas.sKMi2TK1aBC_oHqeBnpa {
  max-height: 0;
}

.sKRTGGcyMpY0hvdvW94S {
  max-height: 200px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.sKRTGGcyMpY0hvdvW94S.sKMi2TK1aBC_oHqeBnpa {
  max-height: 0;
}

.abNF9WH0ugWd2XoZqV3H {
  max-height: 400px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.abNF9WH0ugWd2XoZqV3H.sKMi2TK1aBC_oHqeBnpa {
  max-height: 0;
}

.FcLM9F3WOvmLTkcWKKEO {
  max-height: 150px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.FcLM9F3WOvmLTkcWKKEO.sKMi2TK1aBC_oHqeBnpa {
  max-height: 0;
}

.Ei4qUMBVj_RudOFebiFI {
  max-height: 40px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.Ei4qUMBVj_RudOFebiFI.sKMi2TK1aBC_oHqeBnpa {
  max-height: 0;
}

.Zfw86fQMtGx3BHx9l8LG {
  transition-duration: 0.4s;
}

.iIH1OtUnepMZ_ZQ8sVNw {
  transition-duration: 0.2s;
}

.ZMZ9Eot9TfDJOX9aVucY {
  transition-duration: 0.1s;
}

@-webkit-keyframes JdlJIBpCh69cCGBJYEQF {
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes JdlJIBpCh69cCGBJYEQF {
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.JdlJIBpCh69cCGBJYEQF {
  -webkit-animation-name: JdlJIBpCh69cCGBJYEQF;
  animation-name: JdlJIBpCh69cCGBJYEQF;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes jrtM30fBdXkukRwZr4Cp {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes jrtM30fBdXkukRwZr4Cp {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.jrtM30fBdXkukRwZr4Cp {
  -webkit-animation-name: jrtM30fBdXkukRwZr4Cp;
  animation-name: jrtM30fBdXkukRwZr4Cp;
}

@-webkit-keyframes VFcHOMO8ZhHBPa11sh9j {
  0% {
    opacity: 1;
    -ms-transform: scale3d(1, 1, 1); /* IE 9 */
    -webkit-transform: scale3d(1, 1, 1); /* Chrome, Safari, Opera */
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0;
    -ms-transform: scale3d(0.5, 0.5, 0.5); /* IE 9 */
    -webkit-transform: scale3d(0.5, 0.5, 0.5); /* Chrome, Safari, Opera */
    transform: scale3d(0.5, 0.5, 0.5);
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes VFcHOMO8ZhHBPa11sh9j {
  0% {
    opacity: 1;
    -ms-transform: scale3d(1, 1, 1); /* IE 9 */
    -webkit-transform: scale3d(1, 1, 1); /* Chrome, Safari, Opera */
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0;
    -ms-transform: scale3d(0.5, 0.5, 0.5); /* IE 9 */
    -webkit-transform: scale3d(0.5, 0.5, 0.5); /* Chrome, Safari, Opera */
    transform: scale3d(0.5, 0.5, 0.5);
  }
  100% {
    opacity: 0;
  }
}
@keyframes VFcHOMO8ZhHBPa11sh9j {
  0% {
    opacity: 1;
    -ms-transform: scale3d(1, 1, 1); /* IE 9 */
    -webkit-transform: scale3d(1, 1, 1); /* Chrome, Safari, Opera */
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0;
    -ms-transform: scale3d(0.5, 0.5, 0.5); /* IE 9 */
    -webkit-transform: scale3d(0.5, 0.5, 0.5); /* Chrome, Safari, Opera */
    transform: scale3d(0.5, 0.5, 0.5);
  }
  100% {
    opacity: 0;
  }
}
.VFcHOMO8ZhHBPa11sh9j {
  -webkit-animation-name: VFcHOMO8ZhHBPa11sh9j;
  animation-name: VFcHOMO8ZhHBPa11sh9j;
}

@-webkit-keyframes QGRcFxKjOnWPkCaCWeuW {
  0% {
    opacity: 0;
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);
  }
}
@-moz-keyframes QGRcFxKjOnWPkCaCWeuW {
  0% {
    opacity: 0;
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);
  }
}
@keyframes QGRcFxKjOnWPkCaCWeuW {
  0% {
    opacity: 0;
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);
  }
}
.QGRcFxKjOnWPkCaCWeuW {
  -webkit-animation-name: QGRcFxKjOnWPkCaCWeuW;
  animation-name: QGRcFxKjOnWPkCaCWeuW;
}

.Ff2EUpXWvGZsyTBfdgpX {
  -webkit-animation-name: Ff2EUpXWvGZsyTBfdgpX;
  animation-name: Ff2EUpXWvGZsyTBfdgpX;
  animation-timing-function: ease-in-out;
}

@keyframes Ff2EUpXWvGZsyTBfdgpX {
  0% {
    top: -30px;
  }
  100% {
    top: 0;
  }
}
.oKBvD34vCWVM1Jayx9HZ {
  -webkit-animation-name: oKBvD34vCWVM1Jayx9HZ;
  animation-name: oKBvD34vCWVM1Jayx9HZ;
  animation-timing-function: ease-in-out;
}

@keyframes oKBvD34vCWVM1Jayx9HZ {
  0% {
    bottom: -60px;
    left: 0;
  }
  100% {
    bottom: -30px;
    left: 30px;
  }
}
.v_SebMKmLoot4dmd8LOh {
  -webkit-animation-name: v_SebMKmLoot4dmd8LOh;
  animation-name: v_SebMKmLoot4dmd8LOh;
  animation-timing-function: ease-in-out;
}

@keyframes v_SebMKmLoot4dmd8LOh {
  0% {
    bottom: -60px;
    right: -30px;
  }
  100% {
    bottom: -30px;
    right: 0;
  }
}
/* Bouncing Loading Box */
@keyframes VwN407WFPfb_qgJLOogw {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 39px;
  }
  75% {
    transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    transform: translateY(0) rotate(90deg);
  }
}
@-webkit-keyframes VwN407WFPfb_qgJLOogw {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    -webkit-transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    -webkit-transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 39px;
  }
  75% {
    -webkit-transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(90deg);
  }
}
@keyframes ddni75Sm7uu2imavXQTS {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}
@-webkit-keyframes ddni75Sm7uu2imavXQTS {
  0%, 100% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1);
  }
}
.piZbOzVJzasfUXpgR1QW {
  bottom: 0;
  height: 75px;
  left: 0;
  margin: auto;
  position: relative;
  right: 0;
  top: 0;
  width: 49px;
}

.piZbOzVJzasfUXpgR1QW:before {
  -webkit-animation: ddni75Sm7uu2imavXQTS 0.58s linear infinite;
  animation: ddni75Sm7uu2imavXQTS 0.58s linear infinite;
  background: rgb(0, 0, 0);
  border-radius: 50%;
  content: "";
  height: 5px;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 58px;
  width: 49px;
}

.piZbOzVJzasfUXpgR1QW:after {
  -webkit-animation: VwN407WFPfb_qgJLOogw 0.58s linear infinite;
  animation: VwN407WFPfb_qgJLOogw 0.58s linear infinite;
  background: rgb(63, 189, 231);
  border-radius: 3px;
  content: "";
  height: 49px;
  left: 0;
  position: absolute;
  top: 0;
  width: 49px;
}

.piZbOzVJzasfUXpgR1QW.phm6ipuHgrs4g3eB3N1s:after {
  background: #fff;
}

/* End of Bouncing Loading Box */
@-webkit-keyframes ITdAPyGgipvz1wEZMVPa {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-moz-keyframes ITdAPyGgipvz1wEZMVPa {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes ITdAPyGgipvz1wEZMVPa {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-webkit-keyframes mpUNTFJhPCjVsGvB4zZk {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes mpUNTFJhPCjVsGvB4zZk {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 50%, 90% {
    -webkit-transform: translate3d(-2px, 0, 0);
    transform: translate3d(-2px, 0, 0);
  }
  30%, 70% {
    -webkit-transform: translate3d(2px, 0, 0);
    transform: translate3d(2px, 0, 0);
  }
}
.mpUNTFJhPCjVsGvB4zZk {
  -webkit-animation-name: mpUNTFJhPCjVsGvB4zZk;
  animation-name: mpUNTFJhPCjVsGvB4zZk;
}

.klWRHsa1x3IvX4PjswCA {
  -webkit-transform-box: fill-box;
  transform-box: fill-box;
  transform-origin: center;
}

.MhQ_CDHTlAnWkXoBYgwi {
  -webkit-animation: MLA3FEsInma3_5FObmJo 2.5s linear infinite;
  animation: MLA3FEsInma3_5FObmJo 2.5s linear infinite;
}

.UrQ06w9FtAwFj789N3d3 {
  -webkit-animation: EVkSvMTXhlu25k6oos4Y 2.5s linear infinite;
  animation: EVkSvMTXhlu25k6oos4Y 2.5s linear infinite;
}

.xXbVlRpCaGgHQTIV3Lp1 {
  -webkit-animation: EVkSvMTXhlu25k6oos4Y 2s linear infinite;
  animation: EVkSvMTXhlu25k6oos4Y 2s linear infinite;
}

.q7OwnEJuvcLLwaBQvM1L {
  -webkit-animation: zgjJwS7aCJfDW_Llp_Bh 1.5s linear infinite;
  animation: zgjJwS7aCJfDW_Llp_Bh 1.5s linear infinite;
}

@keyframes zgjJwS7aCJfDW_Llp_Bh {
  0% {
    -ms-transform: translate(-50%, -50%) rotate(0); /* IE 9 */
    -webkit-transform: translate(-50%, -50%) rotate(0); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -ms-transform: translate(-50%, -50%) rotate(360deg); /* IE 9 */
    -webkit-transform: translate(-50%, -50%) rotate(360deg); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes zgjJwS7aCJfDW_Llp_Bh {
  0% {
    -ms-transform: translate(-50%, -50%) rotate(0); /* IE 9 */
    -webkit-transform: translate(-50%, -50%) rotate(0); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -ms-transform: translate(-50%, -50%) rotate(360deg); /* IE 9 */
    -webkit-transform: translate(-50%, -50%) rotate(360deg); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes MLA3FEsInma3_5FObmJo {
  0% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
  100% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
}
@-webkit-keyframes MLA3FEsInma3_5FObmJo {
  0% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
  100% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
}
@-moz-keyframes MLA3FEsInma3_5FObmJo {
  0% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
  100% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
}
@keyframes EVkSvMTXhlu25k6oos4Y {
  0% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
}
@-webkit-keyframes EVkSvMTXhlu25k6oos4Y {
  0% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
}
@-moz-keyframes EVkSvMTXhlu25k6oos4Y {
  0% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
}
@-webkit-keyframes CPLRtbU09cFpgTD3r_8B {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes CPLRtbU09cFpgTD3r_8B {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.CPLRtbU09cFpgTD3r_8B {
  -webkit-animation-name: CPLRtbU09cFpgTD3r_8B;
  animation-name: CPLRtbU09cFpgTD3r_8B;
}

@-webkit-keyframes Le07d2T82N_1xeDowMuo {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes Le07d2T82N_1xeDowMuo {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.Le07d2T82N_1xeDowMuo {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: Le07d2T82N_1xeDowMuo;
  animation-name: Le07d2T82N_1xeDowMuo;
}

@-webkit-keyframes ZzV93Cnowr075fChIaRS {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes ZzV93Cnowr075fChIaRS {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.ZzV93Cnowr075fChIaRS {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: ZzV93Cnowr075fChIaRS;
  animation-name: ZzV93Cnowr075fChIaRS;
}

@-webkit-keyframes g4Ifqo4ZZvnngRgw6Kgc {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}
@keyframes g4Ifqo4ZZvnngRgw6Kgc {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}
.g4Ifqo4ZZvnngRgw6Kgc {
  -webkit-animation-name: g4Ifqo4ZZvnngRgw6Kgc;
  animation-name: g4Ifqo4ZZvnngRgw6Kgc;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes gCtGvshRAeotAfQLacrx {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes BXdqjE1cBQ_0IOaYKpMK {
  from {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  43% {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  45% {
    -ms-transform: scaleY(0); /* IE 9 */
    -webkit-transform: scaleY(0); /* Chrome, Safari, Opera */
    transform: scaleY(0);
  }
  47% {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  55% {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  57% {
    -ms-transform: scaleY(0); /* IE 9 */
    -webkit-transform: scaleY(0); /* Chrome, Safari, Opera */
    transform: scaleY(0);
  }
  59% {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  to {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
}
@keyframes gCtGvshRAeotAfQLacrx {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.gCtGvshRAeotAfQLacrx {
  -webkit-animation-name: gCtGvshRAeotAfQLacrx;
  animation-name: gCtGvshRAeotAfQLacrx;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes iLCbMoBepGSmzd1IMTT6 {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(0);
  }
}
.iLCbMoBepGSmzd1IMTT6 {
  -webkit-animation-name: iLCbMoBepGSmzd1IMTT6;
  animation-name: iLCbMoBepGSmzd1IMTT6;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@keyframes iLCbMoBepGSmzd1IMTT6 {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(0);
  }
}
.PTRxbMJViAwsb_dJpsDM {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: PTRxbMJViAwsb_dJpsDM 3s ease-in-out infinite;
  -webkit-animation: PTRxbMJViAwsb_dJpsDM 3s ease-in-out infinite; /* Chrome, Safari, Opera */
}

@-webkit-keyframes PTRxbMJViAwsb_dJpsDM {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewY(8deg);
  }
}
@keyframes PTRxbMJViAwsb_dJpsDM {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewY(8deg);
  }
}
.Ym1uFpkWFXo6dLxfcAHf {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: Ym1uFpkWFXo6dLxfcAHf 2s ease-in-out infinite;
  -webkit-animation: Ym1uFpkWFXo6dLxfcAHf 2s ease-in-out infinite; /* Chrome, Safari, Opera */
}

.HXpvGzkGn21rPhVB5PwZ {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: HXpvGzkGn21rPhVB5PwZ 2s ease-in-out infinite;
  -webkit-animation: HXpvGzkGn21rPhVB5PwZ 2s ease-in-out infinite; /* Chrome, Safari, Opera */
}

@-webkit-keyframes Ym1uFpkWFXo6dLxfcAHf {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewX(35deg);
  }
}
@keyframes Ym1uFpkWFXo6dLxfcAHf {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewX(35deg);
  }
}
@-webkit-keyframes HXpvGzkGn21rPhVB5PwZ {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewY(2deg);
  }
}
@keyframes HXpvGzkGn21rPhVB5PwZ {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewY(2deg);
  }
}
._1yjI299b0ilWpsvj7UM {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: Pa6VBWDQsI0OJAons8Xf 20s ease-in-out infinite;
  -webkit-animation: Pa6VBWDQsI0OJAons8Xf 20s ease-in-out infinite; /* Chrome, Safari, Opera */
}

@-webkit-keyframes Pa6VBWDQsI0OJAons8Xf {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewX(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewX(3deg);
  }
}
@keyframes Pa6VBWDQsI0OJAons8Xf {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewX(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewX(3deg);
  }
}
.McEWRUmnex5PmoNVQbVg {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: Qp_uFC9knYDuEOLcPjKj 5s ease-in-out infinite;
  -webkit-animation: Qp_uFC9knYDuEOLcPjKj 5s ease-in-out infinite; /* Chrome, Safari, Opera */
}

.mHKnlEnSHSYQMtztMG69 {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: AaInYQ_5Hzg3GXnwCryj 20s linear infinite;
  -webkit-animation: AaInYQ_5Hzg3GXnwCryj 20s linear infinite; /* Chrome, Safari, Opera */
}

.aSz0eHiRi_mdwILi0lqQ {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: AaInYQ_5Hzg3GXnwCryj 5s linear infinite;
  -webkit-animation: AaInYQ_5Hzg3GXnwCryj 5s linear infinite; /* Chrome, Safari, Opera */
}

.uC5mVZzHUdj9fE1Zcmhy.F_5MGCpfqYFc14sp2lm_ {
  animation: VKn4Ei253dKMXnRW6R2l 0.25s linear;
  -webkit-animation: VKn4Ei253dKMXnRW6R2l 0.25s linear; /* Chrome, Safari, Opera */
}
.uC5mVZzHUdj9fE1Zcmhy.QdNDkSPvV9Tvvp3FKNrR {
  animation: E2gMonU4cxNCWFK8Xv8d 0.25s linear;
  -webkit-animation: E2gMonU4cxNCWFK8Xv8d 0.25s linear; /* Chrome, Safari, Opera */
}
.uC5mVZzHUdj9fE1Zcmhy.B0CtYQGXdiMzQ6sC9AYC {
  animation: mepsHFcmd8PbyOnPOt9P 0.15s linear;
  -webkit-animation: mepsHFcmd8PbyOnPOt9P 0.15s linear; /* Chrome, Safari, Opera */
}
.uC5mVZzHUdj9fE1Zcmhy.tDItZsOQmFNVKBJP6ihu {
  animation: JqJ9AIGm9hmaSENSuctu 0.15s linear;
  -webkit-animation: JqJ9AIGm9hmaSENSuctu 0.15s linear; /* Chrome, Safari, Opera */
}
.uC5mVZzHUdj9fE1Zcmhy.tKONYoG24UHAPdRqK1Jw {
  animation: VKn4Ei253dKMXnRW6R2l 0.4s linear;
  -webkit-animation: VKn4Ei253dKMXnRW6R2l 0.4s linear; /* Chrome, Safari, Opera */
}
.uC5mVZzHUdj9fE1Zcmhy.rLOzZOc35yZde9dUBjBp {
  animation: E2gMonU4cxNCWFK8Xv8d 0.4s linear;
  -webkit-animation: E2gMonU4cxNCWFK8Xv8d 0.4s linear; /* Chrome, Safari, Opera */
}

.HjSZrscWGOgUQ__JHCkg.TwKai0PNZFAei3QSbI6O {
  animation: A0Q2zAvJkex16pqCAD8d 0.25s linear;
  -webkit-animation: A0Q2zAvJkex16pqCAD8d 0.25s linear; /* Chrome, Safari, Opera */
}
.HjSZrscWGOgUQ__JHCkg._Xy1cZB2Yll4UDRHEOg5 {
  animation: YQnwDL6noZo48vC8opBO 0.25s linear;
  -webkit-animation: YQnwDL6noZo48vC8opBO 0.25s linear; /* Chrome, Safari, Opera */
}
.HjSZrscWGOgUQ__JHCkg.ysjrjgarYX2ehDTClCLp {
  animation: yEQOEEZD_RR5vtCOVv4B 0.15s linear;
  -webkit-animation: yEQOEEZD_RR5vtCOVv4B 0.15s linear; /* Chrome, Safari, Opera */
}
.HjSZrscWGOgUQ__JHCkg._F9nhZIy1atPOjSm6mnj {
  animation: tu0VcRvm8U9gjcnVRzEw 0.15s linear;
  -webkit-animation: tu0VcRvm8U9gjcnVRzEw 0.15s linear; /* Chrome, Safari, Opera */
}
.HjSZrscWGOgUQ__JHCkg.Ke4dnDd0A_PtEaxcWRNQ {
  animation: A0Q2zAvJkex16pqCAD8d 0.4s linear;
  -webkit-animation: A0Q2zAvJkex16pqCAD8d 0.4s linear; /* Chrome, Safari, Opera */
}
.HjSZrscWGOgUQ__JHCkg.FeyB9064HMwauRKIG1UV {
  animation: YQnwDL6noZo48vC8opBO 0.4s linear;
  -webkit-animation: YQnwDL6noZo48vC8opBO 0.4s linear; /* Chrome, Safari, Opera */
}

@-webkit-keyframes Qp_uFC9knYDuEOLcPjKj {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}
@keyframes Qp_uFC9knYDuEOLcPjKj {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes AaInYQ_5Hzg3GXnwCryj {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes AaInYQ_5Hzg3GXnwCryj {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes E2gMonU4cxNCWFK8Xv8d {
  0% {
    transform: translateX(150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes VKn4Ei253dKMXnRW6R2l {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@-webkit-keyframes VKn4Ei253dKMXnRW6R2l {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes mepsHFcmd8PbyOnPOt9P {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes mepsHFcmd8PbyOnPOt9P {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes JqJ9AIGm9hmaSENSuctu {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes JqJ9AIGm9hmaSENSuctu {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes YQnwDL6noZo48vC8opBO {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@-webkit-keyframes YQnwDL6noZo48vC8opBO {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@keyframes A0Q2zAvJkex16pqCAD8d {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@-webkit-keyframes A0Q2zAvJkex16pqCAD8d {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@keyframes yEQOEEZD_RR5vtCOVv4B {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@-webkit-keyframes yEQOEEZD_RR5vtCOVv4B {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@keyframes tu0VcRvm8U9gjcnVRzEw {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@-webkit-keyframes tu0VcRvm8U9gjcnVRzEw {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@keyframes IKIJoi8UPzz6bk1Q9Scx {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@-webkit-keyframes IKIJoi8UPzz6bk1Q9Scx {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@keyframes RaeP3aLGEnq_qMLJzGoc {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0.5;
  }
}
@keyframes P0LzXTX_ZO0eBNiYOQWn {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0;
  }
}
@keyframes yNL_zWrLD2E_h63hqDgh {
  0%, 19%, 40%, 60%, 80%, 100% {
    opacity: 0;
  }
  20%, 39% {
    opacity: 1;
  }
}
@keyframes KbnsYmOzYyAWg3C6omTm {
  0%, 20%, 39%, 60%, 80%, 100% {
    opacity: 0;
  }
  40%, 59% {
    opacity: 1;
  }
}
@keyframes vn2i2x7Q1bZq2DRtl9pH {
  0%, 20%, 40%, 59%, 80%, 100% {
    opacity: 0;
  }
  60%, 79% {
    opacity: 1;
  }
}
@keyframes bh45M4wtAWjvDHKmqib2 {
  0%, 20%, 40%, 60%, 79%, 100% {
    opacity: 0;
  }
  80%, 99% {
    opacity: 1;
  }
}
@keyframes X20V9lGxScT5Eps7sZWA {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@-webkit-keyframes X20V9lGxScT5Eps7sZWA {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@keyframes ib4eZiRwGDEOnimgrJbx {
  0% {
    -ms-transform: scale(0, 0); /* IE 9 */
    -webkit-transform: scale(0, 0); /* Chrome, Safari, Opera */
    transform: scale(0, 0);
  }
  100% {
    -ms-transform: scale(1, 1); /* IE 9 */
    -webkit-transform: scale(1, 1); /* Chrome, Safari, Opera */
    transform: scale(1, 1);
  }
}
@-webkit-keyframes ib4eZiRwGDEOnimgrJbx {
  0% {
    -ms-transform: scale(0, 0); /* IE 9 */
    -webkit-transform: scale(0, 0); /* Chrome, Safari, Opera */
    transform: scale(0, 0);
  }
  100% {
    -ms-transform: scale(1, 1); /* IE 9 */
    -webkit-transform: scale(1, 1); /* Chrome, Safari, Opera */
    transform: scale(1, 1);
  }
}
@-webkit-keyframes dIs7c6fWIBTTWP_kfVkW {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  25% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes dIs7c6fWIBTTWP_kfVkW {
  0% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
  25% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes VCaIcvhYErhSIvsSDtzt {
  0% {
    transform: scaleY(0.2);
  }
  4% {
    transform: scaleY(0.77);
  }
  5% {
    transform: scaleY(0.84);
  }
  6% {
    transform: scaleY(0.81);
  }
  7% {
    transform: scaleY(0.84);
  }
  8% {
    transform: scaleY(0.82);
  }
  9% {
    transform: scaleY(0.84);
  }
  10% {
    transform: scaleY(0.83);
  }
  11% {
    transform: scaleY(0.84);
  }
  40% {
    transform: scaleY(0.84);
  }
  41% {
    transform: scaleY(0.84);
  }
  45% {
    transform: scaleY(0.13);
  }
  49% {
    transform: scaleY(0.18);
  }
  100% {
    transform: scaleY(0.18);
  }
}
@keyframes GDSPe9P9HIF92SmMmITf {
  0% {
    transform: translateY(-124px);
  }
  5% {
    transform: translateY(-24px);
  }
  6% {
    transform: translateY(-36px);
  }
  7% {
    transform: translateY(-24px);
  }
  8% {
    transform: translateY(-32px);
  }
  9% {
    transform: translateY(-24px);
  }
  10% {
    transform: translateY(-28px);
  }
  11% {
    transform: translateY(-24px);
  }
  40% {
    transform: translateY(-24px);
  }
  41% {
    transform: translateY(-24px);
  }
  45% {
    transform: translateY(-136px);
  }
  46% {
    transform: translateY(-124px);
  }
  47% {
    transform: translateY(-132px);
  }
  48% {
    transform: translateY(-124px);
  }
  49% {
    transform: translateY(-128px);
  }
  50% {
    transform: translateY(-124px);
  }
  100% {
    transform: translateY(-124px);
  }
}
.vm8HBK8juut14YHo5UIJ {
  animation: jV6dC1Xy0PCRLNOyuYmA 0.1s ease-in;
  -webkit-animation: jV6dC1Xy0PCRLNOyuYmA 0.1s ease-in; /* Chrome, Safari, Opera */
  opacity: 1;
  transition: visibility 0s, opacity 0.1s ease-in;
  visibility: visible;
}

.DXrKxQNziPb3nbH9lE4a {
  opacity: 0;
  visibility: hidden;
}

.E7eVoJIlDenh9RHcDerF {
  background: #F2F2F5;
  padding: 8px 16px;
}

.ss3QtPV52wnQ3kqoyG3k {
  white-space: nowrap;
}

.Wi5wd0NVUQvR9raSjMw4 {
  flex-grow: 1;
}

.bAEFYZyEamnO0Eg7m311 {
  height: 68px;
}

@keyframes E7MbKrosme0G14c64mxE {
  0% {
    left: 60%;
  }
  100% {
    left: 77%;
  }
}
.nIuNCnbrWu9gZnjSBYYR {
  background: #FFFFFF;
  height: 40px;
}

.x5vZ4BJoZRwrb53MqPt8 {
  animation: E7MbKrosme0G14c64mxE 300ms ease-in-out;
  left: 77%;
  position: fixed;
  width: 100%;
}

@keyframes Ap1p8_k2n9vn2U5kfZQA {
  0% {
    visibility: visible;
  }
  50% {
    visibility: visible;
  }
  100% {
    visibility: visible;
  }
}
.rq0z758AW6pNzFbx4Rww {
  animation: Ap1p8_k2n9vn2U5kfZQA 300ms ease-in-out;
  visibility: hidden;
}

.G8hgSfuXT9dpwN4ST7LY {
  width: 90%;
}
/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/post-poster-modal-spacer/post-poster-modal-spacer.module.scss ***!
  \************************************************************************************************************************************************************************************************/
.XviMm_LDGiaQtJCWEfTo {
  transition: height 0.2s ease-in-out;
}
/*!***************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/snackbar/snackbar.module.scss ***!
  \***************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.XTLO1AIMPDf33u_SQ2RQ {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.u1ifZUt3CZaupifmncDi {
  background: rgba(20, 19, 37, 0.8);
  height: fit-content;
  max-width: 80%;
  padding: 6px 12px 8px 12px;
  position: absolute;
  top: -400px;
  transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out;
  width: fit-content;
  z-index: 20;
}

.c0D9Fv0TIrajLEvjiu7Q {
  opacity: 1;
  top: 12px;
}

.vWsX2fYoowAnlmW5Qg7N {
  opacity: 0;
  top: 12px;
}

.kA3abHKQf0oQakPgSvGZ {
  top: -400px;
}
/*!*******************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/snackbar-message-growl/snackbar-message-growl.module.scss ***!
  \*******************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.KDBxcO2mI_zPRJjWZZUq {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.d1OB06H2F2ahNRgNreUc {
  background: rgba(20, 19, 37, 0.8);
  height: fit-content;
  max-width: 80%;
  padding: 6px 12px 8px 12px;
  position: absolute;
  top: -400px;
  transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out;
  width: fit-content;
  z-index: 20;
}
.d1OB06H2F2ahNRgNreUc.VutoLLmAo5y_C5RKPwwI {
  background: rgba(156, 0, 47, 0.8);
}
.d1OB06H2F2ahNRgNreUc.YfDdVHvkPaY0AIqwh4GZ {
  background: rgba(0, 133, 101, 0.8);
}
.d1OB06H2F2ahNRgNreUc.v_weo3qOHCaprbyo1Rvk {
  background: rgba(126, 76, 1, 0.8);
}
.d1OB06H2F2ahNRgNreUc.sE6vRaYvzcyRDCbRXWKi {
  background: rgba(64, 23, 175, 0.8);
}
.d1OB06H2F2ahNRgNreUc.Bmz4soWBz8NkmkgSEHNZ {
  background: rgba(20, 19, 37, 0.8);
}

.j5XvinGmKfkqcUMMBZra {
  opacity: 1;
  top: 12px;
}

.N45WAj4RWBgwYA5KSJMw {
  opacity: 0;
  top: 12px;
}

.GozlAjsZNYrd3PLrXJNm {
  top: -400px;
}
/*!************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-whiteboard/components/canvas-zoom-pinch-onboarding/canvas-zoom-pinch-onboarding.module.scss ***!
  \************************************************************************************************************************************************************************************************************/
.zld40hcR7JaGne7csmr_ {
  margin-right: 6px !important;
}

.YbG5KrkCn1QsBorEhjVz {
  height: 32px;
  padding-bottom: 6px !important;
  padding-top: 5px !important;
  width: 294px;
  z-index: 4999 !important;
}

.YbG5KrkCn1QsBorEhjVz::after {
  border-radius: 6px 0 4px 0 !important;
  top: -8px !important;
}
/*!******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/poster-zoom-options/poster-zoom-options.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
.VZ22KMqPX41snfyXa23c {
  gap: 4px;
}

.Q9ICYDwGe3XXcCE9wKTm {
  overflow: hidden;
  transition: width 200ms linear;
}
.Q9ICYDwGe3XXcCE9wKTm.GeoJdWk4ViPWYsm4mfNx {
  right: 330px;
}
.Q9ICYDwGe3XXcCE9wKTm.F7qywrVB2bjoB2DQD4jm {
  right: 40px;
}
.Q9ICYDwGe3XXcCE9wKTm.F7qywrVB2bjoB2DQD4jm.wuNRzDGBk6mTdofExQd8 {
  right: 44px;
}

.wLF0l5Up3aOhxNkwVcyj {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.BnCJAPBRn9gkEB6kIIyq {
  min-width: 32px !important;
}

.M_zs7fffTilT9Xo4kw0c {
  background: #FFFFFF;
  cursor: pointer;
  height: 32px;
  outline: none;
  position: relative;
  width: 32px;
}
.M_zs7fffTilT9Xo4kw0c:hover, .M_zs7fffTilT9Xo4kw0c:focus, .M_zs7fffTilT9Xo4kw0c:focus-within {
  background: #F2F2F5;
}
.M_zs7fffTilT9Xo4kw0c:hover .Qk4_ZMezX44WKy1Nba6D, .M_zs7fffTilT9Xo4kw0c:focus .Qk4_ZMezX44WKy1Nba6D, .M_zs7fffTilT9Xo4kw0c:focus-within .Qk4_ZMezX44WKy1Nba6D {
  display: unset;
  opacity: 1;
}
.M_zs7fffTilT9Xo4kw0c:active {
  background: #E6E6EC;
}
.M_zs7fffTilT9Xo4kw0c .Qk4_ZMezX44WKy1Nba6D {
  display: none;
  opacity: 0;
  position: fixed;
  transition: opacity 500ms ease-in-out;
}
/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/hover-overlay/hover-overlay.module.scss ***!
  \******************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
.nTcn6TPStd8PdJbL4Ieo {
  background: transparent;
  cursor: pointer;
  height: 4px;
  position: absolute;
  right: 0;
  top: -1px;
  width: 10px;
  z-index: 4;
}

.CKeAuoFoDf4jg_oC5b0n {
  background: #EBF9FF;
  border-top: 1px solid #B2E4F6;
  cursor: pointer;
  height: 5px;
  left: 0;
  padding: 0 4px;
  position: absolute;
  top: -1px;
  z-index: 2;
}
/*!******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/poster-bottom-bar-seekbar/poster-bottom-bar-seekbar.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
.Woh2oQ4RZudUbdNcBgEZ {
  left: 10px;
  position: absolute;
  top: -6px;
  width: calc(100% - 20px);
  z-index: 12;
}
.Woh2oQ4RZudUbdNcBgEZ.QKT1pqNQd_ymcz_1T6o_ {
  left: 8px !important;
  width: 100% !important;
}

.I3WSyGrUlUnBL8eRdZoa {
  background: #3FBCE7;
  border-radius: 8px 0 0 0;
  cursor: pointer;
  height: 4px;
  left: 0;
  position: absolute;
  top: -1px;
  width: 10px;
  z-index: 4;
}
.I3WSyGrUlUnBL8eRdZoa.dsFrhMbAMvwyx2J99FVs {
  left: 0;
}

.IcNAm5ru8Cj3WCug2BBE {
  transition: height 300ms ease-in-out;
}
/*!***********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/poster-bottom-bar-seekbar/poster-bottom-bar-seekbar.scss ***!
  \***********************************************************************************************************************************************************************************************************************************/
.poster-bottom-bar-seekbar {
  left: 10px !important;
  position: absolute !important;
  top: -6px !important;
  width: calc(100% - 20px) !important;
}
.poster-bottom-bar-seekbar .rc-slider-track {
  border-radius: 0 !important;
  height: 4px !important;
  z-index: 4 !important;
}
.poster-bottom-bar-seekbar .rc-slider-rail {
  background: transparent !important;
  border-radius: 0 !important;
  height: 4px !important;
}
.poster-bottom-bar-seekbar .rc-slider-handle {
  z-index: 5 !important;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/timeline/timeline.module.scss ***!
  \********************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
.Dzt4wm936Fkpcqn2dAXz {
  transition: width 300ms ease-in-out;
}

.gqmfl8RUemsLpwwtHN2N {
  box-shadow: inset 0 -10px 10px -10px rgba(20, 19, 37, 0.2);
}

.K05P249am_03cBs4o88D {
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  width: 100%;
}

.nILUfuqjvRhRMTV3k8fP {
  background: white;
  height: 16px;
  position: sticky;
  top: 0;
  z-index: 11;
}

.VVQJaqJQxcmg1U20dLWA {
  position: absolute;
  z-index: 12;
}
/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/components/play-button/play-button.module.scss ***!
  \**************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
.oxMLQN33AFW0d4lGb8aC {
  transition: width 0.2s ease-in-out;
  white-space: nowrap;
}
.oxMLQN33AFW0d4lGb8aC.mQdstBQmFIXY40zxSnZJ {
  width: 112px;
}

.hagLgvHKUNYQLbri5Avp {
  background: #FFFFFF;
  color: #403F5D;
  cursor: pointer;
  height: 32px;
  padding: 7px 8px;
}
.hagLgvHKUNYQLbri5Avp.syGzBFSA6nt9KCttWCRg {
  background: #3FBCE7;
  color: #FFFFFF;
}
.hagLgvHKUNYQLbri5Avp.syGzBFSA6nt9KCttWCRg:hover, .hagLgvHKUNYQLbri5Avp.syGzBFSA6nt9KCttWCRg:focus, .hagLgvHKUNYQLbri5Avp.syGzBFSA6nt9KCttWCRg:focus-within {
  background: #23A6D4;
}
.hagLgvHKUNYQLbri5Avp.syGzBFSA6nt9KCttWCRg:active {
  background: #00688C;
}
.hagLgvHKUNYQLbri5Avp:not(.syGzBFSA6nt9KCttWCRg):hover, .hagLgvHKUNYQLbri5Avp:not(.syGzBFSA6nt9KCttWCRg):focus, .hagLgvHKUNYQLbri5Avp:not(.syGzBFSA6nt9KCttWCRg):focus-within {
  background: #F2F2F5;
}
.hagLgvHKUNYQLbri5Avp:not(.syGzBFSA6nt9KCttWCRg):active {
  background: #E6E6EC;
}

.nVxWZIn3MDBboDVo_7Hm {
  border-left: 1px solid #DCDCE1;
  transition: all 0.3s ease-in-out;
}
.nVxWZIn3MDBboDVo_7Hm.rJ1B2mPPK_EkGSYCzWQQ {
  border-left: 1px solid #23A6D4;
}

.YngG3RicfiCaOIZ4LrCN {
  min-width: 40px !important;
}

.NNO3Qic7k8xigQjjvnQM {
  width: 266px;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-web-bottom-bar/poster-editor-web-bottom-bar.module.scss ***!
  \********************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.sc6B2d2ajPjNLyPTFo8T {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.GGB5zGLOf2MVh6GlNvfN {
  background-color: #FFFFFF;
  bottom: 12px;
  height: 60px;
  left: 12px;
  min-height: 60px;
  position: absolute;
  transition: height 300ms ease-in-out;
  z-index: 3;
}

.Nzjw4GM4kbrGpvaRmnqA {
  max-height: 56px;
  min-height: 56px;
}

.AsTK2EhgfeQC03m1LDti {
  box-shadow: 0px -11px 30px 0px rgba(20, 19, 37, 0.1);
  z-index: 100;
}
/*!*************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/poster-editor.module.scss ***!
  \*************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.bT9R0KqE9uqMWSSGIxu8 {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.c7WOjhT54l2_P7WSuFPY {
  background: #FAFAFA;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  position: fixed;
  -webkit-tap-highlight-color: transparent;
  width: 100%;
}

.RHmUOdDNvnh4aannDT9w {
  align-items: center;
  background: #FAFAFA;
  display: flex;
  height: calc(100% - 60px);
  justify-content: space-between;
  position: relative;
  width: 100%;
}
.RHmUOdDNvnh4aannDT9w.MSn4CSNx_q0bHEr1zsKs {
  flex-direction: column;
}

.YKCrrHQzMkDDSN0qVgDh {
  margin: 8px;
}

.DlS14ce_LAtRe91l4geb {
  border: 1px solid #DCDCE1;
  height: 250px;
  overflow: scroll;
  padding: 4px;
  width: 300px;
}
.DlS14ce_LAtRe91l4geb p {
  font-family: Courier, serif;
  font-size: 14px;
  margin: 4px;
}

.MscsEO8uxO_mimvk2Hwx {
  position: relative;
}

.Qorzvp6e1MsTelNEu_8l {
  transition: height 300ms ease-in-out;
}

.Wk3tbcAXKDFsREgZ5NBl {
  background-color: #FAFAFA;
  background-image: radial-gradient(circle, #EEEEF0 1px, transparent 1px);
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 16px 16px;
  overflow: clip;
}
/*!*******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-add-item-bar/components/add-item-container/add-item-container.module.scss ***!
  \*******************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.JFuphNROqzs5vm3m3mCj {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.Z5iwLQ8MIVZU6U56TuIT {
  cursor: pointer;
  gap: 2px;
  height: 58px;
  min-height: 58px;
  position: relative;
  width: 70px;
}

.gKPsJ5EONRXI3723IGrv {
  position: absolute;
  right: 13px;
  top: 3px;
}

.fQE8h3QM1uu8hLbaiFkr:not(.AOQ172y72MPW0Zw_Z3nH):not(.JU3FhvtlgICKHnoRhQbU):hover, .fQE8h3QM1uu8hLbaiFkr:not(.AOQ172y72MPW0Zw_Z3nH):not(.JU3FhvtlgICKHnoRhQbU):focus-within, .fQE8h3QM1uu8hLbaiFkr:not(.AOQ172y72MPW0Zw_Z3nH):not(.JU3FhvtlgICKHnoRhQbU):focus {
  background: #F2F2F5;
}
.fQE8h3QM1uu8hLbaiFkr:not(.AOQ172y72MPW0Zw_Z3nH):not(.JU3FhvtlgICKHnoRhQbU):active {
  background: #E6E6EC;
}
.fQE8h3QM1uu8hLbaiFkr:not(.AOQ172y72MPW0Zw_Z3nH).JU3FhvtlgICKHnoRhQbU {
  background: #CDF0FB;
}
.fQE8h3QM1uu8hLbaiFkr.AOQ172y72MPW0Zw_Z3nH {
  cursor: not-allowed;
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-add-item-bar/components/add-item-button/add-item-button.module.scss ***!
  \*************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.raPAb3vgxV8KgYOGql2m {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.rCK6SjETvucoZRk6ivgS {
  cursor: pointer;
  gap: 2px;
  height: 58px;
  width: 82px;
}

.xSxpLSj5kA0BXbTaPDwS:not(.eI5lGz7AjGqA4zCEy_PB):not(.KpxPBd__85ePfu8HBoWj):hover, .xSxpLSj5kA0BXbTaPDwS:not(.eI5lGz7AjGqA4zCEy_PB):not(.KpxPBd__85ePfu8HBoWj):focus-within, .xSxpLSj5kA0BXbTaPDwS:not(.eI5lGz7AjGqA4zCEy_PB):not(.KpxPBd__85ePfu8HBoWj):focus {
  background: #F2F2F5;
}
.xSxpLSj5kA0BXbTaPDwS:not(.eI5lGz7AjGqA4zCEy_PB):not(.KpxPBd__85ePfu8HBoWj):active {
  background: #E6E6EC;
}
.xSxpLSj5kA0BXbTaPDwS:not(.eI5lGz7AjGqA4zCEy_PB).KpxPBd__85ePfu8HBoWj {
  background: #CDF0FB;
}
.xSxpLSj5kA0BXbTaPDwS.eI5lGz7AjGqA4zCEy_PB {
  cursor: not-allowed;
}

.DWGOkGB1vLYbkSEDzwSg {
  position: absolute;
  right: 28px;
  top: 6px;
}

.RsACcgJXy8o8OoadlUCE {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*!*********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-add-item-bar/components/add-text-dropdown-options/add-text-dropdown-options.module.scss ***!
  \*********************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.LLQJX564knaCVwb83OYF {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.nwLQL7V9WXrfYm0jLGdA {
  background: linear-gradient(135deg, #EEFAFF 0%, #ECE9FF 100%);
  position: relative;
}

.JXsxiJZLSWHasCMiizS7 {
  background: linear-gradient(90deg, #0384B4 0%, #3C0ACD 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.oGd8LZMEtVLPncWU2Uwg {
  border: 1px solid #E6E6EC;
  border-radius: 8px;
  overflow: visible !important;
  width: 374px !important;
}

.ZCxKGfGQ2ben8PbCa2uA {
  height: 200px;
}

.jAkp8v_TwTXItANPvinp {
  max-height: 380px;
}

.IAxIzLrS7ne1urtgLJOg {
  transition: height 0.3s ease-out, width 0.3s ease-out;
}
/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-add-item-bar/components/subtitles-dropdown-list/subtitles-dropdown-list.module.scss ***!
  \*****************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.zf7sMYAnLg6t4bilFpQV {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.MIljo_RkQhzXd1pevTF9 {
  color: #D69923;
}

.TVQBJoPxm2txsgNYkA8Z {
  background: linear-gradient(135deg, #EEFAFF 0%, #ECE9FF 100%);
  position: relative;
}

.rcGlO9xpQbQzA0gX5zQZ {
  background: linear-gradient(90deg, #0384B4 0%, #3C0ACD 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

._iNgFX8ay64FFLiFfkfm {
  width: 360px !important;
}

.pB19affqZLKwCZLGxs1Z {
  max-height: 380px;
}

.jqnRbLqgndFeW3a05uZ1 {
  transition: height 0.3s ease-out, width 0.3s ease-out;
}
/*!**********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/panels/ai-image-panel/ai-image-panel.module.scss ***!
  \**********************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.sO5LrMjshD7DhrLhsjyF {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.omVrMechKSAPKOf3I7eg {
  height: 80px !important;
}

.omVrMechKSAPKOf3I7eg::placeholder {
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 300 !important;
  line-height: 150% !important;
  letter-spacing: normal !important;
}

.omVrMechKSAPKOf3I7eg::-ms-input-placeholder {
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 300 !important;
  line-height: 150% !important;
  letter-spacing: normal !important;
}

._RcE0SMhGClF0E5Q_fC4 {
  gap: 12px;
}

.TNCnMKeWensOCLWeeL8B {
  gap: 8px;
}

.c60bt8toNtGfvvroUjxA {
  display: grid;
  grid-gap: 12px;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

.WE0FaaGSbvk9C5trr7w2 {
  height: 96px;
}

.rju2Y8hnBFzZCgfGjkjH {
  max-width: 240px;
}

.HaUQT5KfBp663sgKTgBQ {
  background-color: #FFFFFF;
  min-width: 22px;
}

.wy5Sz2iWsDkvjOzXMSGy {
  overflow: auto !important;
}

.KLMDRmpr4YpMmm2CnRR2 {
  background: linear-gradient(90deg, #0384B4 0%, #3C0ACD 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.wuMwAtkjU66C6ajZIQts {
  background: linear-gradient(90deg, #00A2DB 0%, #0037C5 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.k8i6ItJqMcQww1YffQzO {
  height: 24px;
  width: 24px;
}
/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-add-item-bar/components/add-ai-image-button/add-ai-images-button.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.rKUrozGd22jRn8jp0iMQ {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.Ijyer7GF_ejRCesUH6p5, .PANA_MzgB2XxNju8ztUr, .c3QOfyy2AD7Vp88cCg8E {
  background: linear-gradient(90deg, #0384B4 0%, #3C0ACD 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.woYmDHvLCaroKbcX1VeO {
  background: linear-gradient(90deg, #24C19C 0%, #005E47 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mpv0XQGyN9NNGqM184lV {
  cursor: pointer;
  background: linear-gradient(135deg, #D5F3FF 6.58%, #CBC2FF 99.88%) !important;
}
.mpv0XQGyN9NNGqM184lV:not(.j6MX55DAI_PcsnutgySc):not(.HnwRYHWAfibyekNVOL6u):hover, .mpv0XQGyN9NNGqM184lV:not(.j6MX55DAI_PcsnutgySc):not(.HnwRYHWAfibyekNVOL6u):focus-within, .mpv0XQGyN9NNGqM184lV:not(.j6MX55DAI_PcsnutgySc):not(.HnwRYHWAfibyekNVOL6u):focus {
  background: #F2F2F5;
}
.mpv0XQGyN9NNGqM184lV:not(.j6MX55DAI_PcsnutgySc):not(.HnwRYHWAfibyekNVOL6u):active {
  background: #E6E6EC;
}
.mpv0XQGyN9NNGqM184lV.j6MX55DAI_PcsnutgySc {
  cursor: not-allowed;
}

.w3iP9JlSGTLP8a0jHFA_ {
  height: 606px;
}

.nbaSojsjaSKJzutoxKLg {
  height: 436px;
}

.vGvW9Qdv8mARy88k8q2s {
  transition: height 0.3s ease-out;
}
/*!*****************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-add-item-bar/components/add-item-skeleton/add-item-skeleton.module.scss ***!
  \*****************************************************************************************************************************************************************************************************************/
.iRfBS3axTpmGZk5B0kjO {
  gap: 2px;
  height: 58px;
  width: 82px;
}
/*!*********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/upload-icon/upload-icon.module.scss ***!
  \*********************************************************************************************************************************************/
@keyframes MycMsRVxQvVczXZ4cLeV {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
.kR37ryM1YFUGirfjw3iv {
  animation: MycMsRVxQvVczXZ4cLeV 3s infinite ease-in-out;
}

.sLBZPWEQo4WVEO9jwxzh {
  transform: translateY(-4px);
}
/*!*************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-add-item-bar/components/add-user-media-button/add-user-media-button.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.jspokPKMWv6dGMnx9A51 {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.EVVfBDaPljteXjVajt0g {
  background: linear-gradient(90deg, #0384B4 0%, #3C0ACD 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.THRQQWihHqcHzJKqZoOD {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*!*************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/add-ai-item-button/components/add-ai-item-dropdown-popup-content/add-ai-item-dropdown-popup-content.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.uSZ56vb0Jm6FMqmkh4VO {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.Egv86rvyrDaXzNo8DXf7 {
  color: #D69923;
}

.hlTELUt5OQhg8tiMemTi {
  background: linear-gradient(90deg, #0384B4 0%, #3C0ACD 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.gWTTJMPvtnBKZT7xpucF {
  background: linear-gradient(135deg, #EEFAFF 0%, #ECE9FF 100%) !important;
  position: relative;
}

.M2M0o9knAqiQKttGNieQ {
  max-height: 380px;
}
/*!*****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-template-panel/poster-template-panel.module.scss ***!
  \*****************************************************************************************************************************************************************/
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
.rK8cwkCXtD5FUlSVi39R {
  width: auto;
}

.tnGsRpBF2JzodmepWP9x {
  border-top: 1px solid #E6E6EC;
  box-shadow: inset 0 7px 12px -7px rgba(20, 19, 37, 0.1);
}

.DVd1f1euYO74qx8D9D0h {
  gap: 8px;
}
/*!***************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-add-item-bar/components/template-filters/template-filters.module.scss ***!
  \***************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.sUtCGVNm8x4_IWqD1vkF {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.Sdt3Uss4uZvuOGaU3ZXR {
  margin-left: 6px;
}

.Sxlfpw6p4seQSageucfI {
  border: 1px solid #DCDCE1;
  color: #403F5D;
  height: 32px;
  text-wrap: nowrap;
  transition: width 0.3s ease-in-out;
  width: fit-content;
}
.Sxlfpw6p4seQSageucfI:hover, .Sxlfpw6p4seQSageucfI:focus-within, .Sxlfpw6p4seQSageucfI:focus-within {
  background: #F2F2F5;
}
.Sxlfpw6p4seQSageucfI._2nrFkYS3nI5qwylQNSqq {
  background: #ECF8FD;
  border: 1px solid #3FBCE7;
  color: #00688C;
}
.Sxlfpw6p4seQSageucfI:not(._2nrFkYS3nI5qwylQNSqq).U5luMmDwGmcSwyGC105J {
  background: #E6E6EC;
}

.fzDaSShMYAMjL3LO2Wlf {
  height: 32px;
  margin-right: 8px;
}
.fzDaSShMYAMjL3LO2Wlf:last-child {
  margin-right: 0px;
}

.fkX6_pD7ZVhSc3Ex1MFg {
  min-height: 32px;
  -ms-overflow-style: none;
  overflow-y: scroll;
  scrollbar-width: none;
}
.fkX6_pD7ZVhSc3Ex1MFg::-webkit-scrollbar {
  display: none;
}

.Oc0ebaUYUL_yNCSYVele {
  width: 193px !important;
}
.Oc0ebaUYUL_yNCSYVele.kNKBMTYGWTYn4zcwG1Du {
  height: 200px !important;
  width: 210px !important;
}

.lU113aeJ6cLEHwkeyfnb {
  margin-right: 8px;
}
.lU113aeJ6cLEHwkeyfnb:last-child {
  margin-right: 0px;
}

.ycRdXBDQyBSye_asKCjZ {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, 40px);
  justify-content: space-between;
}

.sHzOIU1SnDQP699hZqb4 {
  min-width: 16px !important;
}

.RUyRspZFwKbx6f1rNiaM {
  height: 40px;
  width: 40px;
}
/*!*******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-add-item-bar/components/template-filters-scroll-button/template-filters-scroll-button.module.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
.YnuxyEsxEM5KocayMY9I {
  pointer-events: none;
  position: absolute !important;
  z-index: 12;
}
.YnuxyEsxEM5KocayMY9I.RlTHp2PUW6ZvH6NWhRbm {
  background: linear-gradient(90deg, #FFFFFF 46.5%, rgba(255, 255, 255, 0) 100%);
  left: 0;
  padding-left: 16px;
  padding-right: 32px;
}
.YnuxyEsxEM5KocayMY9I.FwYzJhYNUSp_IPJoVkom {
  background: linear-gradient(270deg, #FFFFFF 46.5%, rgba(255, 255, 255, 0) 100%);
  padding-left: 32px;
  padding-right: 16px;
  right: 0;
}

.xHC_W4L0lWuJgMsyRPuT {
  pointer-events: auto;
}
/*!*********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-add-item-bar/components/no-template-results/no-template-results.module.scss ***!
  \*********************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
.fUhVZ7UP_SP2yYSN0ftD {
  background-color: #CBCBD0 !important;
}
/*!**************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-add-item-bar/poster-add-item-bar.module.scss ***!
  \**************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p._ZB4PC0EeFxMem4EG3p8 {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.fpzKcT6eJHeA6b4Ckd3Q {
  border: 1px solid #E6E6EC;
  border-radius: 12px;
  overflow: visible !important;
  width: 278px;
}

.DPBCw8NAotvk7DBDdIhc {
  border: 1px solid #E6E6EC;
  border-radius: 8px;
  overflow: visible !important;
  width: 312px;
}

.pBmnG2z0f9BSTlFnGj2B {
  border: 1px solid #E6E6EC;
  border-radius: 12px;
  overflow: visible !important;
  width: 340px;
}

.FRrcWj8jebQObBP1VR1U {
  height: 20px;
  width: 20px;
}

.jXIQd6i6SF1HSF7wtJWz {
  background: #FFFFFF;
  left: 12px;
  position: absolute;
  top: 12px;
  width: 88px;
  z-index: 13;
}
/*!*****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor-toolbar/poster-editor-toolbar.module.scss ***!
  \*****************************************************************************************************************************************************************/
.N6sL2gKzrZb_nX1cNjjx {
  transition: height 0.15s ease-in-out;
}
/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/contextual-menu/components/contextual-menu-skeleton/contextual-menu-skeleton.module.scss ***!
  \**************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.Xh74En2KDkVVKBjBheYs {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.LziizfMb7a4hm1Ty1HNq {
  height: 100%;
  width: 100%;
}

.Q8jsycZdAXVkKmHKZ3P6 {
  width: 40% !important;
}

.aLKOoAJrlJB9kBKpitYQ {
  width: 32% !important;
}

.VGFBlDUhij85Nxz1BYvJ {
  width: 50% !important;
}

.kupO17vlADTFzYVp4oH7 {
  margin-bottom: 32px;
}
.kupO17vlADTFzYVp4oH7:last-child {
  margin-bottom: 0;
}

.HnqjWno4WwWrsr54qbgJ {
  border-bottom: 1px solid #DCDCE1;
  height: 60px;
}

.QptPUIFPYx3R57hYpLxj {
  padding: 20px 20px 0 20px;
}
/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/contextual-menu/components/contextual-menu-header/contextual-menu-header.module.scss ***!
  \**********************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.TfvjOh_jG_OPrK3iitAg {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.AxzLJXXpstEQGcFSBPCu {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #DCDCE1;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/contextual-menu/components/contextual-menu-text-header/contextual-menu-text-header.module.scss ***!
  \********************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.x5DspqbDHRcfUTeHuKFH {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.qeLzvsDkOR0CqQHAvyv7 {
  position: relative;
  width: 100%;
}
.qeLzvsDkOR0CqQHAvyv7 .__PjoMrzLAi_cB3UQURQ {
  left: 10px;
  position: absolute;
}
/*!******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/group-items-spacing-options/group-item-spacing-options.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************************/
.oQdRmEq__a3vi3SfmlvV {
  width: 130px;
}
/*!*********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/item-alignment-options/item-alignment-options.module.scss ***!
  \*********************************************************************************************************************************************************************************************************************************/
.BEQBHzdefXbunApqJxOM {
  width: calc(33% - 5px);
}

.pSFxDI7lrmOD4xJD2TTK {
  gap: 16px 8px;
}
/*!***********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/group-items-alignment-options/group-items-alignment-options.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************/
.iLa48QcU49zQdyI0y9R5 {
  width: calc(33% - 5px);
}

.iDTfiSBW4K18hDRJKPQQ {
  gap: 16px 8px;
}
/*!********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/contextual-menu/components/button-item-secondary/button-item-secondary.module.scss ***!
  \********************************************************************************************************************************************************************************************/
.CvTJajbijJAH98bWYXZW {
  width: 100%;
}
/*!********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/contextual-menu/components/button-svg-item/button-svg-item.module.scss ***!
  \********************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.zMNwTpG9OxcVns7NiEe_ {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.PoFOW183p75NJhMwl9WA {
  width: 100%;
}

.ep0YYHeNm5R8yuqOyHm2 {
  background: #FFFFFF;
  border: 1px solid #DCDCE1;
  border-radius: 4px;
  cursor: pointer;
  height: 40px;
  width: 100%;
}
.ep0YYHeNm5R8yuqOyHm2.QhfmZZXu57BqWksL7NiJ {
  cursor: not-allowed;
  color: #DCDCE1;
}
.ep0YYHeNm5R8yuqOyHm2:not(.KgAYIuCnKgZkmhQOAEBd):hover, .ep0YYHeNm5R8yuqOyHm2:not(.KgAYIuCnKgZkmhQOAEBd):focus, .ep0YYHeNm5R8yuqOyHm2:not(.KgAYIuCnKgZkmhQOAEBd):focus-within, .ep0YYHeNm5R8yuqOyHm2:not(.QhfmZZXu57BqWksL7NiJ):hover, .ep0YYHeNm5R8yuqOyHm2:not(.QhfmZZXu57BqWksL7NiJ):focus, .ep0YYHeNm5R8yuqOyHm2:not(.QhfmZZXu57BqWksL7NiJ):focus-within {
  background: #F2F2F5;
}
.ep0YYHeNm5R8yuqOyHm2:not(.KgAYIuCnKgZkmhQOAEBd):active, .ep0YYHeNm5R8yuqOyHm2:not(.QhfmZZXu57BqWksL7NiJ):active {
  background: #E6E6EC;
}
.ep0YYHeNm5R8yuqOyHm2:not(.QhfmZZXu57BqWksL7NiJ).KgAYIuCnKgZkmhQOAEBd {
  background: #ECF8FD;
  border: 1px solid #3FBCE7;
}

.gFyA7slkVk2irpjmYy4P.bh_T0_r_nSCDYTcHYqL7 {
  filter: invert(95%) sepia(8%) saturate(101%) hue-rotate(201deg) brightness(86%) contrast(88%);
}
.gFyA7slkVk2irpjmYy4P:not(.bh_T0_r_nSCDYTcHYqL7).tZfm_IoMObA1k3cCUm7p {
  filter: invert(30%) sepia(92%) saturate(1068%) hue-rotate(165deg) brightness(96%) contrast(101%);
}
/*!**************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/contextual-menu/components/button-items/button-items.module.scss ***!
  \**************************************************************************************************************************************************************************/
.hhx4Q06kZNjJPdZOZzPh {
  display: flex;
  gap: 4px;
}

.koe2Vi_e0ethbMDcjVcM {
  width: 100%;
}
/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/contextual-menu/components/contextual-menu-divider/contextual-menu-divider.module.scss ***!
  \************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.F4gQu3AyHiBe05D8c8AH {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.CorsV3hZDdCPcTKDHYMI {
  background: #E6E6EC;
  height: 2px;
  width: 100%;
}
/*!***************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/audio-item-controls/audio-item-controls.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.DRyL0Rdn2PjELSQHBS7J {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.mwviKjRRUV0CrIOFxT4D:before {
  color: #00688C !important;
}

.UIOgCum4vXDxEZgZoB3j {
  width: 280px;
}

.lUb0WOyIfEPFzyj7fSaQ {
  flex: 1;
}

.Z9jKq8DC6IJ0MnKIQ6vZ {
  position: relative;
}

.DeiInicWbgd4RomDeWM3 {
  position: absolute;
  left: 40px;
  top: 6px;
}

.kG4jhXdvitmjFvId3Svn {
  background: #F2F2F5 !important;
}

.kVHP3wrWIrRDDK6HmHxK {
  height: 235px;
}

.GxMHf2lfIyrxfMEyu5J9 {
  width: 30px;
}

.erRfVK8KAs7lMBSjTlh4 {
  position: relative;
}
/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/timeline-audio-onboarding/timeline-audio-onboarding.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
.vb8r4X9GRtNJeJM9nytN {
  height: 40px;
}

.gebJye4ngI7oOJnIuxwK {
  background: #ECF8FD;
}

.IPjrgLq_dEmqrpOvYNpr {
  height: 120px;
  width: 100%;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/generate-ai-subtitles-option/components/base-generate-ai-subtitles-option/base-generate-ai-subtitles-option.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
._QEd3Q8eliO2eA_p2JQQ {
  max-width: 120px;
}
/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/audio-playlist-editing-options/audio-playlist-editing-options.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.B_U1AHHAaahJ6wbItryv {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.hTGkIpzdI4AJfv3Xfhvi {
  border: 1px dashed #A1A1AA;
}

.qJL7t8B5QmWB3aWiDLpp {
  flex-grow: unset;
}
/*!******************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/contextual-menu/components/text-with-info/text-with-info.module.scss ***!
  \******************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.dhEpTe4KHmV6t6jH3OTj {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.V2Yf_z4eYKv8GHELjgQ7 {
  cursor: pointer;
  gap: 2px;
  height: 48px;
  text-align: right;
}
.V2Yf_z4eYKv8GHELjgQ7:hover, .V2Yf_z4eYKv8GHELjgQ7:focus, .V2Yf_z4eYKv8GHELjgQ7:focus-within {
  background: #F2F2F5;
}
.V2Yf_z4eYKv8GHELjgQ7:active {
  background: #E6E6EC;
}
/*!***********************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/page-folds-option/page-folds-option.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************/
.VTH6oSq69B6jFjuNZWvg {
  width: 254px;
}
/*!***************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/background-image-media-controls/background-image-media-controls.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************/
.SZGcWy2OpcuoFUOk7qtN {
  border-top: none;
}

.vdGVy4CaVvLUPHgnbBWL {
  height: 235px;
}
/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/designer-attribution/designer-attribution.module.scss ***!
  \*****************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
.e2aYRB6VqEnkrufR4px3 {
  height: 36px;
}

.Pgt_0jSPoAKsOwDjRBFy {
  background: linear-gradient(to right, #FAFAFA 0%, #E6E6EC 50%, #FAFAFA 100%);
  height: 1px;
  width: 100%;
}

.YCgZegRq_FPzWxXMiUU2 {
  border: 1px solid #E6E6EC;
  border-radius: 6px;
  height: 24px;
  margin-right: 6px;
  width: 24px;
}

.WoOgdPoL2bjt1ySrZwMG {
  cursor: pointer;
}

.kjuLOBK5JR9G2xRb8j7u {
  margin-left: 2px;
}
/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/poster-editing-default-options/poster-editing-default-options.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************/
.prVqveBL4ZT6Gqnw1VX8 {
  flex-grow: unset;
}
/*!***********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/ai-text-re-write-option/ai-text-re-write-option.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.hGuZDJpvk94VbgQwFpja {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.Dgty8rm6vTV2ZauTgKfd {
  box-shadow: 0 6px 16px 0 rgba(20, 19, 37, 0.1) !important;
  left: 0;
  top: calc((100% - 32px) / 2);
}

.CFfYCwHP5sc5yzs_s5qr {
  box-shadow: 0 6px 16px 0 rgba(20, 19, 37, 0.1) !important;
  right: 0;
  top: calc((100% - 32px) / 2);
}

.Gz4fvLWcoO2IjRJr5WDc {
  background: linear-gradient(135deg, #EEFAFF 0%, #ECE9FF 100%) !important;
}

.RUt4vGd_1lyBtx7D5GZI {
  gap: 8px;
}

.uC6yc3od0JQZLQx7A1yR {
  background-color: #FFFFFF;
  gap: 8px;
  top: calc(100% + 6px);
  width: 200px;
  z-index: 20;
}

.cqjNHrDn4Dgonaqop5KD::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
  width: 100px;
  content: "";
  left: 0;
  top: 0;
  position: absolute;
  pointer-events: none;
  z-index: 9;
  height: 100%;
}

.h47sz9pIS4YOiaOS5ONu {
  gap: 12px;
}

.LJu753jpKj1ofhlDMGzy::after {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
  width: 100px;
  content: "";
  right: 0;
  position: absolute;
  pointer-events: none;
  z-index: 9;
  top: 0;
  height: 100%;
}

.rXxGmBWFmclOhVnvzvYD {
  background: linear-gradient(135deg, #DCF5FF -1.78%, #D8D1FF 100%) !important;
}

.FSHs0EuVV7oDxEAKQdwW {
  background-color: #F2F2F5;
  -webkit-transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
  transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
}
.FSHs0EuVV7oDxEAKQdwW:hover {
  background-color: #CDF0FB;
  border-color: #CDF0FB;
}
.lvd9lqn5bKduyE0dGwE2 {
  background-color: #CDF0FB;
}
/*!*************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/default-animation-option/default-animation-option.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.Mw1AafHKYNw4lciEIdrd {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.R9reGVJ2XCezbNzkWhOf {
  gap: 8px;
  height: 86px;
}

.wFXd8hWRPdsjGc61_Fcn {
  background-clip: content-box;
  background-image: url("data:image/svg+xml,%3csvg width=%27100%25%27 height=%27100%25%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3crect width=%27100%25%27 height=%27100%25%27 fill=%27none%27 rx=%278%27 ry=%278%27 stroke=%27%23A1A1A1%27 stroke-width=%272%27 stroke-dasharray=%272%2c 6%27 stroke-dashoffset=%270%27 stroke-linecap=%27square%27/%3e%3c/svg%3e");
  cursor: pointer;
  height: 56px;
}

.FhJ9IyayjXOW5rzYlI9V {
  background: #FFFFFF;
  height: calc(100% - 2px);
  width: calc(100% - 2px);
}
.FhJ9IyayjXOW5rzYlI9V:hover {
  background: #F2F2F5;
}
.FhJ9IyayjXOW5rzYlI9V:active {
  background: #E6E6EC;
}

.YR1B_dqzYXHcW3pp14Ki {
  border: 1px solid #DCDCE1;
  cursor: pointer;
  height: 56px;
  padding: 6px;
}

.TFeAmn1zrlXGWDxIvgXu {
  background: #ECF8FD;
  object-fit: contain;
}
/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/poster-item-controls/poster-item-controls.module.scss ***!
  \*****************************************************************************************************************************************************************************************************************************/
.Ln9ZHh216CnsniU6UXup {
  max-width: 50% !important;
}

.N74TEkkuERasF2Y2Qtuf {
  color: #D32559 !important;
}
/*!********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/contextual-menu/components/information-box/information-box.module.scss ***!
  \********************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.uoX55I2Tx8TlvVPc2TxR {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.dvmmX3Y1HBqsyaGMfR13 {
  width: 100%;
}

.v9Jq8W_3u9xM0e1628gA {
  background: #FAFAFA;
}

.Vn3twCVtRjY5Vn0gfUPN {
  background: #F2F2F5;
}

.klVjtCdDLYqkZFI1z8id {
  background: #FAF1D9;
}

.oFq_1nIm86CAPSG0S_oX {
  background: #ECF8FD;
}
/*!***********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/information-link-option/information-link-option.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************************/
.xNCOBx5V43k_Qv_r9Wrs {
  cursor: pointer;
}
/*!******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/input-suggestions-dropdown/suggestion-list-item/suggestion-list-item.module.scss ***!
  \******************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.PYQ6MLe0t2EgU0MuRz2B {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.hF6JJuKFeTqXkks4Wc9Y {
  height: 3px;
  width: 3px;
}

.WNTowmC_4vW1PeQEOcl_ {
  margin-bottom: 2px;
  padding-right: 6px;
}

.dGURU_fRdUeJvBTMEgO_ {
  background: #FFFFFF;
  cursor: pointer;
  padding-top: 10px;
  padding-bottom: 10px;
}
.dGURU_fRdUeJvBTMEgO_:not(.iGWEutqII8XBw_jOoVsw):hover {
  background: #F2F2F5;
  transition: 0.2s;
}
.dGURU_fRdUeJvBTMEgO_.iGWEutqII8XBw_jOoVsw {
  background: #ECF8FD;
}

.EJW6hddk9l_RC8YRgZyB {
  max-width: 50%;
  min-width: 0;
}

.NnDyZnn4u5pfqJdLckli {
  max-width: 100px;
}
/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/item-interactivity-link-option/item-interactivity-link-option.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************/
.AztQpIf0gmECQOSB7i88 {
  min-width: 320px;
}
/*!***********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/item-flip-and-stretch-options/item-flip-and-stretch-options.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************/
.BaNWqz83nRKqDYgzgynP {
  width: calc(50% - 4px);
}

.rEYCFFCOqZT2JO0oZemg {
  gap: 16px 8px;
}
/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/item-lock-information-box/item-lock-information-box.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************/
.TF4QcAAJUX66ShuRuSJA {
  height: inherit;
  overflow: hidden;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/contextual-menu/components/contextual-menu-tabs-header/contextual-menu-tabs-header.module.scss ***!
  \********************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.hN5pBZdrJw4gxBhlruPr {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.UEd8EfUO8KCbX9nEJHNc {
  width: 100%;
  justify-content: center;
}
/*!***************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/input-suggestions-dropdown/input-suggestions-dropdown.module.scss ***!
  \***************************************************************************************************************************************************************************/
.sLSSyCVKXLHsiQTbbj1g {
  min-width: 320px;
}

.MmJrUBxLcoDxaldLV1rh {
  width: calc(100% - 32px);
}
/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/base-image-media-controls/base-image-media-controls.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.EeRHEgi5GFJ06kb13ugs {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.F31vkboirOf1mKBhsv00 {
  background: linear-gradient(90deg, #EEFAFF 0%, #ECE9FF 100%) !important;
}

.XRPktOrDb2AnaPZu46xQ {
  background: linear-gradient(90deg, #2CAAD6 0%, #5628D8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vumiXWHqWm3UE0S04fzg {
  display: flex;
  justify-content: flex-end;
}

.yfdTROBdJeSFowoSbM0U {
  height: 240px;
}
/*!***************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/free-bgr-popup/free-bgr-popup.module.scss ***!
  \***************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.s1j95pOlGCUl2HNSyFUR {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.YqQ1H8CEp2MBRanDnav_ {
  background: #FFFFFF;
  border: 1px solid #E6E6EC;
  box-shadow: 0 6px 16px 0 rgba(20, 19, 37, 0.1);
  max-width: 328px;
}

.kRQCadeFDJxfy17bDGZw {
  max-width: 296px;
}
/*!*****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/base-styling-options/base-styling-options.module.scss ***!
  \*****************************************************************************************************************************************************************************************************************************/
.xsuGcd_zBWUXuADINUNR {
  position: relative;
}

.t8ggZQVBgifpI5EworY_ {
  position: absolute;
  right: 17px;
  top: -47px;
}
/*!***************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/exponential-slider-options/exponential-slider-options.module.scss ***!
  \***************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.KUAi8KIAhaK7OrLu2tXa {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.kzErDy4MN1QZJ5Qf3fAJ {
  overflow: hidden;
  text-overflow: ellipsis;
}

.AdhOZ_xvAgzhcAs3x7IL {
  white-space: nowrap;
}

.OBhkjxuysR2B0i01tiaZ {
  white-space: normal;
}

.WOugRJJfcQeR3p5zcZ22 {
  min-width: 120px;
  width: 160px;
}
/*!*******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/base-font-size-option/base-font-size-option.module.scss ***!
  \*******************************************************************************************************************************************************************************************************************************/
.UWbgobqQ686Q5vLWEdij {
  width: 120px !important;
}
/*!************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/contextual-menu/components/font-button/font-button.module.scss ***!
  \************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.vRnXDtgOyayEGFIpXAbf {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.et1HJ1iKbk1rRq_Dy4k9 {
  height: 100%;
  object-fit: contain;
  width: 100%;
}
.et1HJ1iKbk1rRq_Dy4k9.FTEnMIzsmURIdBPRWsNu {
  filter: invert(18%) sepia(90%) saturate(4135%) hue-rotate(327deg) brightness(59%) contrast(128%);
  width: calc(100% - 36px);
}
.et1HJ1iKbk1rRq_Dy4k9:not(.FTEnMIzsmURIdBPRWsNu) {
  filter: invert(26%) sepia(84%) saturate(703%) hue-rotate(155deg) brightness(105%) contrast(104%);
}

.P8QQAUW1x7adIJmBuJr_ {
  background: #FFFFFF;
  cursor: pointer;
  height: 40px;
  max-width: 180px;
}
.P8QQAUW1x7adIJmBuJr_.siVQAThWbagAfIovGM7N:hover, .P8QQAUW1x7adIJmBuJr_.siVQAThWbagAfIovGM7N:focus, .P8QQAUW1x7adIJmBuJr_.siVQAThWbagAfIovGM7N:focus-within {
  background: #FEF3F6;
}
.P8QQAUW1x7adIJmBuJr_:not(.siVQAThWbagAfIovGM7N):hover, .P8QQAUW1x7adIJmBuJr_:not(.siVQAThWbagAfIovGM7N):focus, .P8QQAUW1x7adIJmBuJr_:not(.siVQAThWbagAfIovGM7N):focus-within {
  background: #ECF8FD;
}
/*!*************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/base-text-outline-option/base-text-outline-option.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************/
.HCoEMoG4uf4R3xhqN_id {
  position: relative;
}

.a2SFejUawo_vnmfSlpXA {
  top: -48px;
  right: 12px;
}
/*!*************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/icon-dropdown-group/icon-dropdown-group.module.scss ***!
  \*************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.jFlCHyHYW9ynmpm3yNAh {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.XdUHgav28banWm9u0QnJ {
  cursor: pointer;
  flex-wrap: wrap;
  height: 40px;
  width: fit-content;
}

.aO048kmYt3mGVO74VXOB {
  background: #FFFFFF;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  height: 40px;
  padding: 9px 10px;
}
.aO048kmYt3mGVO74VXOB:not(.EGMlJg7puVeb09zCBWfp):hover, .aO048kmYt3mGVO74VXOB:not(.EGMlJg7puVeb09zCBWfp):focus, .aO048kmYt3mGVO74VXOB:not(.EGMlJg7puVeb09zCBWfp):focus-within {
  background: #F2F2F5;
}
.aO048kmYt3mGVO74VXOB:not(.EGMlJg7puVeb09zCBWfp):active {
  background: #E6E6EC;
}
.aO048kmYt3mGVO74VXOB.EGMlJg7puVeb09zCBWfp {
  background: #ECF8FD;
  color: #00688C;
}

.mArMeROx4yYhAwNXCyTs {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  height: 40px;
  width: 28px;
}
.mArMeROx4yYhAwNXCyTs:not(.vLhYOk1fuxbUtc8Y85JN):hover, .mArMeROx4yYhAwNXCyTs:not(.vLhYOk1fuxbUtc8Y85JN):focus, .mArMeROx4yYhAwNXCyTs:not(.vLhYOk1fuxbUtc8Y85JN):focus-within {
  background: #F2F2F5;
}
.mArMeROx4yYhAwNXCyTs:not(.vLhYOk1fuxbUtc8Y85JN):active {
  background: #E6E6EC;
}
.mArMeROx4yYhAwNXCyTs.vLhYOk1fuxbUtc8Y85JN {
  background: #ECF8FD;
  color: #00688C;
}
/*!*******************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/base-text-list-option/base-text-list-option.module.scss ***!
  \*******************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.VhGZ3aKpP0L2NEpcTxD7 {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.NElZdsDcMLsHkPhpOW_V {
  object-position: -47px -2px;
}

.YDbJFWLkCCdNLNn_ICSQ {
  object-position: -47px -24px;
}

.pKPgdm7cufk0i8COwVhx {
  object-position: -1px -47px;
}

.VnxTngRkAvVMGIX3tJjc {
  object-position: -69px -47px;
}

.g2Yjr0yMyzf5kQYKc4A7 {
  object-position: -69px -24px;
}

.kprALePEDwMeOku9zrdS {
  object-position: -1px -69px;
}

.UWlzqCxhNXpKNWptTRQD {
  object-position: -24px -69px;
}

.kvp2OwaeEJklcSLBpWA7 {
  object-position: -24px -2px;
}

.KFunspG3mn_zKzRXrelh {
  object-position: -2px -24px;
}

.o_MirPYmUJBHafRr_Xo7 {
  object-position: -24px -24px;
}

.Zg9cjvm5o1dvRT3xHtMy {
  object-position: -69px -69px;
}

.Fk3FrsOEiY8UQizsMtCw {
  object-position: -92px -2px;
}

.eyqifx3yKOBCRipEBXld {
  object-position: -47px -69px;
}

.ljj5WQQF1L_hOgFmkzv9 {
  object-position: -24px -47px;
}

.kpNiQ7qGBRuDPVvTgMxZ {
  object-position: -47px -47px;
}

.fBFKbg5o7kePwIiqtmDy {
  object-position: -2px -2px;
}

.hRrzCvZLAnaCjoqDcSCb {
  object-position: -69px -2px;
}

.a7xChbbSDdeatjC64ywl {
  object-position: -103px -69px;
}

.VlO3rNMznDyvwDN0avj8 {
  object-position: 0 -6px;
}

.rrzOHXKr8PEiOrmVNsNh {
  object-position: 4px -70px;
}

.QwE9RAoBMnNPeBqHc3NI {
  object-position: -50px -72px;
}

.Oy36svRoTDG_immFPyMd {
  object-position: -55px -7px;
}

.Ya429XfVN6MJfDEfVUzS {
  object-position: -111px -6px;
}

.xEtTRwGzDGVb6pO6j2gw {
  background: #FFFFFF;
  cursor: pointer;
  height: 40px;
  width: 40px;
}
.xEtTRwGzDGVb6pO6j2gw:not(.ExqZS3VThmkHyZKZHowZ):hover, .xEtTRwGzDGVb6pO6j2gw:not(.ExqZS3VThmkHyZKZHowZ):focus, .xEtTRwGzDGVb6pO6j2gw:not(.ExqZS3VThmkHyZKZHowZ):focus-within {
  background: #F2F2F5;
}
.xEtTRwGzDGVb6pO6j2gw:not(.ExqZS3VThmkHyZKZHowZ):active {
  background: #E6E6EC;
}
.xEtTRwGzDGVb6pO6j2gw.ExqZS3VThmkHyZKZHowZ {
  background: #ECF8FD;
  color: #00688C;
}

.DOj1ctIFdwuk0ApqbaPp {
  background: #FFFFFF;
  cursor: pointer;
  height: 64px;
  width: 123px;
}
.DOj1ctIFdwuk0ApqbaPp:not(.ExqZS3VThmkHyZKZHowZ):hover, .DOj1ctIFdwuk0ApqbaPp:not(.ExqZS3VThmkHyZKZHowZ):focus, .DOj1ctIFdwuk0ApqbaPp:not(.ExqZS3VThmkHyZKZHowZ):focus-within {
  background: #F2F2F5;
}
.DOj1ctIFdwuk0ApqbaPp:not(.ExqZS3VThmkHyZKZHowZ):active {
  background: #E6E6EC;
}
.DOj1ctIFdwuk0ApqbaPp.ExqZS3VThmkHyZKZHowZ {
  background: #ECF8FD;
  color: #00688C;
}

.C_3iiozVL6jcZRFxjqlA {
  height: 20px;
  object-fit: none;
  width: 20px;
}

.fYn6FqnDSEfMH6pQsuhZ {
  cursor: default;
  flex-wrap: wrap;
  gap: 8px;
}
.fYn6FqnDSEfMH6pQsuhZ.xzxZTKnnI3J8o8TmS8eA {
  gap: 2px;
}
.fYn6FqnDSEfMH6pQsuhZ.ViINibC_oQoDGYIIzPSw {
  gap: 0;
}

.kr6JyuS2i1ifGSkollCQ {
  height: 100%;
  width: 254px;
}
.kr6JyuS2i1ifGSkollCQ.W0GviZoNDUxcWxFyxxSF {
  height: auto;
  width: 200px;
}

.FNYy65aNggLs_bZ8814R {
  height: 100%;
  width: 254px;
}
.FNYy65aNggLs_bZ8814R.W0GviZoNDUxcWxFyxxSF {
  height: auto;
  width: 200px;
}

.UdxP7dJYgjLPjjspZ4ja {
  height: 64px;
  object-fit: none;
  width: 50px;
}
/*!*********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/fancy-text-font-option/fancy-text-font-option.module.scss ***!
  \*********************************************************************************************************************************************************************************************************************************/
.I3mypwrgaO0fRJTpyiXS {
  width: 254px;
}
/*!***********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/fancy-text-style-option/fancy-text-style-option.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************************/
.LePkvnKFi4Hl6483xGHO {
  width: 254px;
}
/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/base-video-media-controls/base-video-media-controls.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.iyUcrIkGcTP3nISK7Roe {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.BwIWdDj5gZ2AhZLB4WUk {
  background: linear-gradient(90deg, #EEFAFF 0%, #ECE9FF 100%) !important;
}

.vy_dJTgCfqbNtpjXiYby {
  background: linear-gradient(90deg, #2CAAD6 0%, #5628D8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rMD9wo9bP7CjOU9es80U {
  background: #403F5D;
  height: 2px;
  position: absolute;
  rotate: 45deg;
  top: 40%;
  transition: width 200ms ease;
}
.rMD9wo9bP7CjOU9es80U.GD7TI2SN9BGwHPalHXjz {
  background: #CBCBD0;
}
.rMD9wo9bP7CjOU9es80U.ch0CAjvNdlczLcgUIN9w {
  width: 24px;
}
.rMD9wo9bP7CjOU9es80U.UVBo23tYXe0hyk4YmG5A {
  width: 0;
}

.DaSA5o0Hk14C9rnjLZAW {
  height: 240px;
}
/*!*********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/poster-editing-video-options/poster-editing-video-options.module.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************/
.DvnepCzX03ZsQ1g7SqbS {
  flex-grow: unset;
}
/*!*******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/item-with-dual-font-options/item-with-dual-font-options.module.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************/
.XvCz6v0qMplh5vNStW_R {
  right: 16px;
  top: -46px;
}
/*!******************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/contextual-menu/components/contextual-menu-slides-options/contextual-menu-slides-option.scss ***!
  \******************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.-large {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.add-slideshow-dotted-button {
  height: 40px !important;
}
/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/contextual-menu/components/contextual-menu-slides-options/contextual-menu-slides-options.module.scss ***!
  \**************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.b_j7RUcOnpzdK6HjYibA {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.i8blhXGDzJSRFyO0HAxf {
  position: relative;
}

.V5wlXFr6rCedmEpVstXi {
  height: 40px;
  margin-right: 12px;
}
.V5wlXFr6rCedmEpVstXi:last-child {
  margin-right: 0px;
}

.Mtsofj0uLJeET425K6Mh {
  left: -16px;
  max-height: 224px;
  overflow: auto;
  position: absolute;
  width: calc(100% + 40px - 8px);
}

.K6sFHIPlwyp3DSh8pfLD {
  max-height: 224px;
  position: relative;
  transition: height 200ms ease-in-out;
}

.oIJ5uh0QCNSqafivS_0y {
  height: 40px;
  margin-right: 12px;
  position: relative;
  width: 100%;
}
.oIJ5uh0QCNSqafivS_0y:last-child {
  margin-right: 0px;
}

.DJqEfRYDrswBMnp7M3YV {
  width: 75%;
}

.SDfZGk0Wxb1SYmcd6eQL {
  width: 275px;
}

.M2GPxGN09n25roJ0FTcN {
  width: 54px;
}

.f9u9GChA4Mt3xGbME0Bt {
  left: -5px;
  top: -45px;
  white-space: nowrap;
}

.PuwOrA3oYttT84XWtkHU {
  left: -8px;
  top: -45px;
  white-space: nowrap;
}
/*!*******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/slideshow-transition-option/slideshow-transition-option.module.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.OlAy8qHNnsYy0pYyXd5w {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.OA5OIcnlh1m52Omm1uJh {
  margin: 0px;
  width: 254px;
}
.OA5OIcnlh1m52Omm1uJh.UvW0ew1A42EYqwLHFN7b {
  max-height: 250px;
  width: 184px;
}
/*!*********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/media-slide-alignment-option/media-slide-alignment-option.module.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************/
.awau9LG9d0OWNGVaU3Ty {
  transform: rotate(270deg);
}
/*!******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/contextual-menu/components/contextual-menu-horizontal-scrolling-section/contextual-menu-horizontal-scrolling-section.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************************/
.rgGnsQuAg5PQm4i8aZTL {
  -ms-overflow-style: none; /* IE and Edge */
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  width: 100%;
}

.rgGnsQuAg5PQm4i8aZTL::-webkit-scrollbar {
  display: none;
}

.GF643o1K0nlsDU3xUFtV {
  position: absolute !important;
  right: 20px;
  z-index: 1;
}

.mL8PIKnhwgIFmLcjM2br {
  position: absolute !important;
  left: 20px;
  z-index: 1;
}
/*!**************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/poster-editing-transcript-options/components/template-style-thumbnail-options/template-style-thumbnail-options.module.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************/
.QB5mcLKsISBqYqxByYyp {
  height: 78px;
  left: -20px;
  position: relative;
  width: calc(100% + 40px) !important;
}

.yKPzf2KajTcvaN4FYW5v {
  gap: 16px;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/poster-editing-transcript-options/components/template-style-thumbnail/template-style-thumbnail.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
.lxmejWmaxCVBcpQunF1N {
  max-height: 72px !important;
  max-width: 72px !important;
  min-height: 72px !important;
  min-width: 72px !important;
  height: 72px !important;
  width: 72px !important;
}

.JoGA3IASReEgnBRhiSar {
  max-height: 56px !important;
  max-width: 56px !important;
  min-height: 56px !important;
  min-width: 56px !important;
  height: 56px !important;
  width: 56px !important;
}

._Ia4pn2vK2UlgIEoqMfQ {
  max-height: 60px !important;
  max-width: 60px !important;
  min-height: 60px !important;
  min-width: 60px !important;
  height: 60px !important;
  width: 60px !important;
}

.QQhtZEcnsYqoUUoct8B5 {
  max-height: 52px !important;
  max-width: 52px !important;
  min-height: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  width: 52px !important;
}
/*!******************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/poster-editing-transcript-options/components/subtitles-animation-style-dropdown/subtitles-animation-style-dropdown.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************/
.cF2pUWPgm44EbIrrIn2g {
  max-width: 175px;
}

.o9wp973GgD6yx_snFwGm {
  width: 230px;
}

.HLR5rVtpplooLbb0pONk {
  width: 54px;
  height: 54px;
}
/*!********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/contextual-menu/components/contextual-menu-heading-option-with-view-all-button/contextual-menu-heading-option-with-view-all-button.module.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.ZG4juB3o7rrS5eWdqzHi {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.FUkQhdVFLTBRgB_tbHRz {
  background: #DCDCE1;
  height: 1px;
}

.r5rOdWContWodTDWf7iH {
  color: #00688C;
}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/transcript-templates-panel/components/transcript-templates-panel-content/transcript-templates-panel-content.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
.OlNQ6EYwtTn9B7CYTBuI {
  width: 60px;
  height: 60px;
}
/*!*******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/components/poster-editing-transcript-options/poster-editing-transcript-options.module.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************/
.FQ0yG3mHlayuns0f0O_Q {
  overflow-x: hidden;
}
/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editing-side-panel/poster-editing-side-panel.module.scss ***!
  \**************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.tKM8CAUAQt__QV_Lt9Zl {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
.PIpNCf6DaeP4woWMkW4c {
  background: #FFFFFF;
  border: 1px solid #DCDCE1;
  border-radius: 8px;
  bottom: 12px;
  box-shadow: 0 4px 12px 0 rgba(20, 19, 37, 0.07);
  height: calc(100% - 24px);
  overflow: hidden;
  position: absolute;
  right: 12px;
  top: 12px;
  transition: width 200ms ease-in-out;
  width: 310px;
  z-index: 12;
}
.PIpNCf6DaeP4woWMkW4c:not(.XF5GV8pyQs29ES9Gw2i8) {
  min-width: 310px;
}
.PIpNCf6DaeP4woWMkW4c.XF5GV8pyQs29ES9Gw2i8 {
  border-radius: 8px 0 0 8px;
  height: 100%;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}
.PIpNCf6DaeP4woWMkW4c.UdpA3unyzN2UkbyjATLB {
  height: 100%;
  width: 24px;
}

.ZOVAX1_xng6OTmbvineH {
  height: 100%;
  min-width: 24px;
}

.YD3POc1oQOnAj8in7nYA {
  background: #FFFFFF;
  cursor: pointer;
  height: 100%;
  min-width: 24px;
  overflow: hidden;
  width: 24px;
}

.lidcCLogpVlkmyHwZrbH {
  background-color: #FFFFFF;
  border: 1px solid #DCDCE1;
  border-radius: 8px 0 0 8px;
  border-right: none;
  cursor: pointer;
  height: 64px;
  position: absolute;
  right: 309px;
  top: calc(50% - 32px);
  transition: right 200ms ease-in-out;
  width: 16px;
  z-index: 200;
}
.lidcCLogpVlkmyHwZrbH.UdpA3unyzN2UkbyjATLB {
  right: 23px;
}

.xp084VclOL6qL0pDno8t {
  height: 100%;
}

.G9_9uVSA2tKuP6R4Ebci {
  left: 2px !important;
  position: relative !important;
  transform: rotate(0deg);
  transition: all 200ms ease-in-out !important;
}
.G9_9uVSA2tKuP6R4Ebci.jUhQKGtukkImKbN2vBu6 {
  left: 6px !important;
  transform: rotate(180deg);
}

.lX9rjou7BnwSuBLqMWIK {
  position: relative;
}

.JJkTrTCWaPRDvnnrU3RU {
  box-shadow: 0 4px 12px 0 rgba(20, 19, 37, 0.07);
}
/*!**************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/react-slidedown/lib/slidedown.css ***!
  \**************************************************************************************************/
.react-slidedown {
    height: 0;
    transition-property: none;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
}

.react-slidedown.transitioning {
    overflow-y: hidden;
}

.react-slidedown.closed {
    display: none;
}
/*!****************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/cursor-overlay/cursor-overlay.module.scss ***!
  \****************************************************************************************************************************************************************************/
.wCVZuXMfha5in1vkd5GN {
  position: absolute;
  text-align: center;
  z-index: 500;
  width: 100%;
  height: 100%;
}

.jLE2wtpbjKp7eowoAYbz {
  display: none;
}

.VJCG3mau9ZOUa_dsODKR {
  cursor: url(49f4bd95169a816fb2f7.ico) 0 16, crosshair;
}

.NYVKWuQPQMwhhgL2t479 {
  cursor: url(14595220c41478a4580c.png) 0 16, crosshair;
}
/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/inital-poster-items-load-error/inital-poster-items-load-error-notification.module.scss ***!
  \************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * Please use these percentages of color alphas for the existing colors in our style sheets. Do NOT add more alphas here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
/**
 * https://www.figma.com/file/MzIAjkeTlL4K5ogldAAz9M/Borders?node-id=1%3A2
 */
/* Border strokes */
/* Border Radii */
/* Border styles */
/*
 Adds the given gradient as the border of the element, this is done by making the elements background as the provided linear gradient, then some boxshadow magic
 to fill the element background - hence the backgroundColor param is necessary if you want to change the bg of this element.

 Takes another optional param backgroundColor - which defaults to white.
 */
/**
 * @see https://www.figma.com/file/UXVmv6ZHvQVcRo9InK8aE7/Icon?node-id=308%3A363
 */
/**
 * https://www.figma.com/file/nx75ykPwbtybUL1s6fzA5o/Spacing?node-id=0%3A1
 * Use the following classes to add uniform margins/paddings:
 * Padding: .spacing-p-1, .spacing-p-2, ... .spacing-p-20
 * Margin: .spacing-m-1, .spacing-m-2, ... .spacing-m-20
 */
/*
Defines our default font.
$style can either be 'regular' or 'light' or 'bold'.
*/
/*
Gives the block level container of text the ability to truncate it with ellipsis.
*/
p.KDYbzdCsJRkPXJ0vU1vg {
  font-size: 18px;
}

/**
 Design System - Typography
 @link https://www.figma.com/file/4DEA9D0uwSWSXosbK0bZ0Z/Typography?node-id=686%3A113
 */
/**
 * Note: Added !important in all of these classes since we're moving towards strict typography rules, where we don't
 * ID's or more specific selectors to take precedence
 */
/* Google */
/* Facebook */
/* Instagram */
/* Pinterest */
/* Twitter */
/* Youtube */
/* Component border */
/* Typography */
/* Color Theme */
/* Navigation */
/* Search bar */
/* Editor view colors */
/* Poster Maker Contextual Sidebar (right sidebar) styles  */
/* Modal dialog styles */
/* Panel styles */
/* Facebook media modal styles */
/** Media grid item styles */
/* Poster Maker Toolbar (left sidebar) styles */
/* Text link styles */
/* Grid item (posters, folders etc) styles */
/* Popups and thumbnail options */
/* Error, Warning colors */
/* z-index */
/* Various dimensions */
/* Media Query Dimensions */
/* Buttons */
/* Form Elements - Poster Maker*/
/* Form Elements - Website */
/* Designer Themes */
/* Accent colours */
/* Tooltip */
/* Social icons */
/* Animations */
/* Custom Shadows */
/* clears the default 'X' from Chrome */
/* Nicolas Gallagher's micro clearfix */
/**
  Makes an element with the provided selector visible only when its parent element is hovered on.
  The element is visible by default on touch devices
  $parent-selector: the selector of the parent to attach the hover on
  $selector-for-item-to-show: the selector of the item whose visibility is getting toggled
  $visible-on-classes: any extra classes (space separated) which, when applied to either the parent or the child item (that needs to be shown) should also show the item getting toggled. This param is optional
                        sample usage: '.-selected', or '.-selected' '.open'
  $hide-on-class: any extra class which, when applied should also hide the item getting toggled. This param is optional
  $display-property-value: the value to give for the display property when showing the item. Default is flex
 */
/**
 Helper mixin to give a 'display' property to a selector.
 $item-to-show: the selector for the item to show
 $display-property-value: the value to give to the display property. default: flex
 */
/**
 $item: selector of the item to hide
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a row
  (top-right, bottom-right for first child , bottom-left, top-left for second child etc)
 */
/*
  for the given selector, remove the border-radius from the sides of the element as if it was placed in a column
  (bottom-left, bottom-right for first child , top-left, top-right for second child etc)
 */
/*
 adds the given box-shadow only at the top of the container using clip-path.
  The clip-path makes space only at the top of the container according to the blur-radius of the shadow
 */
/*
 adds the given box-shadow only at the bottom of the container using clip-path.
  The clip-path makes space only at the bottom of the container according to the blur-radius of the shadow
 */
/* Width constants for media queries */
/* Wizard Specific Variables */
/*
Animation styles and keyframes
*/
.s3QlILTcA3u9T6jZ2kSD {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.s3QlILTcA3u9T6jZ2kSD.Nteg5L8lF1i67FpvRMmL {
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
.s3QlILTcA3u9T6jZ2kSD.YoDyvqXOVXEalT3b_p_F {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.s3QlILTcA3u9T6jZ2kSD.qU8HIPdBY7WsxXMoEAN6 {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}

.s3QlILTcA3u9T6jZ2kSD.kP_geDbR6PtXmpTdjU2Y {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

.s3QlILTcA3u9T6jZ2kSD.TxtEYx1IiO8lD6Sj7mzD {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

.s3QlILTcA3u9T6jZ2kSD.IHx1idMkBh5LtYXcL4Q5 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.s3QlILTcA3u9T6jZ2kSD.lr5C4pkGZwG79VrBaD7c {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
}

.s3QlILTcA3u9T6jZ2kSD.vM3BdXQ9lhloda7tTa16 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.s3QlILTcA3u9T6jZ2kSD.mKGGit_F8ygpdFCStAJO {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
}

.eOxDeQlh5lsheI2zJ2fd {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.XEibygNEGR3bDC27ssBy {
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

.LKrdmK06wtXoIw8i8bIg {
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

.RFIBuG3hqXOPFQTziy7m .ZfocWTOLwbvrIE3LjF__, .RFIBuG3hqXOPFQTziy7m .grrmvjznjaXa8NCDn0EC {
  overflow: hidden;
}
.RFIBuG3hqXOPFQTziy7m:hover .ZfocWTOLwbvrIE3LjF__::before, .RFIBuG3hqXOPFQTziy7m:hover .grrmvjznjaXa8NCDn0EC::before, .RFIBuG3hqXOPFQTziy7m:focus .ZfocWTOLwbvrIE3LjF__::before, .RFIBuG3hqXOPFQTziy7m:focus .grrmvjznjaXa8NCDn0EC::before, .RFIBuG3hqXOPFQTziy7m:focus-within .ZfocWTOLwbvrIE3LjF__::before, .RFIBuG3hqXOPFQTziy7m:focus-within .grrmvjznjaXa8NCDn0EC::before {
  animation: cl1YzS6_DmxyGGeBbPji 1800ms cubic-bezier(0.68, -0.6, 0.32, 1.6) 1;
  display: block;
  transform-box: fill-box;
  transform-origin: center;
}

.FkiT0HQwBgnY7dDiASDQ .ZfocWTOLwbvrIE3LjF__ {
  overflow: hidden;
}
.FkiT0HQwBgnY7dDiASDQ .ZfocWTOLwbvrIE3LjF__::before {
  animation: AEjDUzGRCI0o2YvR4hya 2500ms cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
  display: block;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes cl1YzS6_DmxyGGeBbPji {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  30% {
    transform: rotate(-56deg) translateX(0);
  }
  34% {
    transform: rotate(-38deg) translateX(0);
  }
  38% {
    transform: rotate(-50deg) translateX(0);
  }
  42% {
    transform: rotate(-45deg) translateX(0);
  }
  47% {
    transform: rotate(-45deg) translateX(0);
  }
  57% {
    opacity: 1;
    transform: rotate(-45deg) translateX(20px);
  }
  58% {
    opacity: 0;
    transform: rotate(-45deg) translateX(20px);
  }
  59% {
    opacity: 0;
    transform: rotate(-45deg) translateX(-20px);
  }
  60% {
    opacity: 1;
    transform: rotate(-45deg) translateX(-20px);
  }
  73% {
    transform: rotate(-45deg) translateX(0);
  }
  78% {
    transform: rotate(-45deg) translateX(0);
  }
  88% {
    transform: rotate(12deg) translateX(0);
  }
  93% {
    transform: rotate(-8deg) translateX(0);
  }
  96% {
    transform: rotate(3deg) translateX(0);
  }
  100% {
    transform: rotate(0) translateX(0);
  }
}
@keyframes AEjDUzGRCI0o2YvR4hya {
  0% {
    transform: rotate(0deg) translateX(0);
  }
  30% {
    transform: rotate(-56deg) translateX(0);
  }
  34% {
    transform: rotate(-38deg) translateX(0);
  }
  38% {
    transform: rotate(-50deg) translateX(0);
  }
  42% {
    transform: rotate(-45deg) translateX(0);
  }
  47% {
    transform: rotate(-45deg) translateX(0);
  }
  57% {
    opacity: 1;
    transform: rotate(-45deg) translateX(50px);
  }
  58% {
    opacity: 0;
    transform: rotate(-45deg) translateX(50px);
  }
  59% {
    opacity: 0;
    transform: rotate(-45deg) translateX(-50px);
  }
  60% {
    opacity: 1;
    transform: rotate(-45deg) translateX(-50px);
  }
  73% {
    transform: rotate(-45deg) translateX(0);
  }
  78% {
    transform: rotate(-45deg) translateX(0);
  }
  88% {
    transform: rotate(12deg) translateX(0);
  }
  93% {
    transform: rotate(-8deg) translateX(0);
  }
  96% {
    transform: rotate(3deg) translateX(0);
  }
  100% {
    transform: rotate(0) translateX(0);
  }
}
.UuMtEvdTFHcBGTJRXcdV {
  -webkit-transform-origin: left; /* Chrome, Safari, Opera */
  transform-origin: left;
}

.S3JcWYjN2wTCraZeVbf1 {
  -webkit-transform-origin: right; /* Chrome, Safari, Opera */
  transform-origin: right;
}

.PHFjdJ_B2d1AlyxplBWi {
  -webkit-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
}
.PHFjdJ_B2d1AlyxplBWi:hover {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  transform: rotate(90deg);
}

.i86483FidU00POgUYb2m {
  -webkit-transition: transform 200ms ease-in-out;
  transition: transform 200ms ease-in-out;
}
.i86483FidU00POgUYb2m:hover, .i86483FidU00POgUYb2m:focus, .i86483FidU00POgUYb2m:focus-within {
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Chrome, Safari, Opera */
  transform: scale(1.05);
}

.yK27poasyG19tD6mDpK8 {
  -webkit-transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.yK27poasyG19tD6mDpK8.T9kfTZGfQCaLLZX8qiu8 {
  transition-duration: 100ms;
}
.yK27poasyG19tD6mDpK8:hover, .yK27poasyG19tD6mDpK8:focus, .yK27poasyG19tD6mDpK8:focus-within {
  -ms-transform: translate(0, -2%); /* IE 9 */
  -webkit-transform: translate(0, -2%); /* Chrome, Safari, Opera */
  transform: translate(0, -2%);
}

.lbVAVPjzq5M1yCduTHva {
  -webkit-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  opacity: 1;
}
.lbVAVPjzq5M1yCduTHva:hover {
  opacity: 0.8;
}

.m2cF6nWAuRT4MOFzuwRG {
  opacity: 1;
  -webkit-transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.m2cF6nWAuRT4MOFzuwRG:hover {
  -ms-transform: scale3d(1.15, 1.15, 1.15); /* IE 9 */
  -webkit-transform: scale3d(1.15, 1.15, 1.15); /* Chrome, Safari, Opera */
  transform: scale3d(1.15, 1.15, 1.15);
}

.Po0B0zAp4d0xtk4uh3bA {
  -webkit-transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
  transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
}

@-webkit-keyframes pd8fwUHaFrntEzUxvHnw {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes pd8fwUHaFrntEzUxvHnw {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.pd8fwUHaFrntEzUxvHnw {
  -webkit-animation-name: pd8fwUHaFrntEzUxvHnw;
  animation-name: pd8fwUHaFrntEzUxvHnw;
}

@-webkit-keyframes cMPG3SLbO1TqmtNIWGsZ {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@keyframes cMPG3SLbO1TqmtNIWGsZ {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@-webkit-keyframes DGQa268PhI414Os_lkLO {
  11.1% {
    transform: none;
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
  100% {
    transform: none;
  }
}
@keyframes DGQa268PhI414Os_lkLO {
  11.1% {
    transform: none;
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
  100% {
    transform: none;
  }
}
@-webkit-keyframes snc2riucnYKjljB4fUw6 {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes snc2riucnYKjljB4fUw6 {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes k1AEl4udmPPe2c45Fstb {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@keyframes k1AEl4udmPPe2c45Fstb {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@-webkit-keyframes akE2OoqT6JkWpeVC6P3b {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@keyframes akE2OoqT6JkWpeVC6P3b {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@-webkit-keyframes uSOsEWaWopjPPHVlfBTy {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@keyframes uSOsEWaWopjPPHVlfBTy {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes YR5nhM7Ooj3WsCO3JUSb {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@keyframes YR5nhM7Ooj3WsCO3JUSb {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes hZ68a9ub8pNWM1oqt60K {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@keyframes hZ68a9ub8pNWM1oqt60K {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@-webkit-keyframes RmAaEAddvBUf0fL3g2PE {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@keyframes RmAaEAddvBUf0fL3g2PE {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@-webkit-keyframes x38MoWuAjLa3JyxRTLqU {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@keyframes x38MoWuAjLa3JyxRTLqU {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes y37UahlislJuV3r4XBMK {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@keyframes y37UahlislJuV3r4XBMK {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes DoD4PAzhc5a8KJzgW4w7 {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@keyframes DoD4PAzhc5a8KJzgW4w7 {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@-webkit-keyframes JzEwNTzFSzGId9S_ocNt {
  0% {
    transform: scale(0.3);
    opacity: 0.4;
  }
  25% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(0.7);
    opacity: 0.6;
  }
  75% {
    transform: scale(1);
    opacity: 0.8;
  }
  90%, 100% {
    transform: scale(0.8);
    opacity: 1;
  }
}
@keyframes JzEwNTzFSzGId9S_ocNt {
  0% {
    transform: scale(0.3);
    opacity: 0.4;
  }
  25% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(0.7);
    opacity: 0.6;
  }
  75% {
    transform: scale(1);
    opacity: 0.8;
  }
  90%, 100% {
    transform: scale(0.8);
    opacity: 1;
  }
}
@-webkit-keyframes XqfdC7rCxk7BxwL9AjWA {
  0% {
    opacity: 1;
    transform: scale(1.5) translateX(40px) translateY(15px);
  }
  60%, 100% {
    transform: scale(1.5) translateX(-30px) translateY(30px) rotate(90deg);
    opacity: 1;
  }
}
@keyframes XqfdC7rCxk7BxwL9AjWA {
  0% {
    opacity: 1;
    transform: scale(1.5) translateX(40px) translateY(15px);
  }
  60%, 100% {
    transform: scale(1.5) translateX(-30px) translateY(30px) rotate(90deg);
    opacity: 1;
  }
}
@-webkit-keyframes HEQKsDc1eqUhydKFBr6Q {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes HEQKsDc1eqUhydKFBr6Q {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes eqbEYSGs3GXepODi_GId {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes eqbEYSGs3GXepODi_GId {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes EPqdYPjY_UOqFu3rKRMQ {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes EPqdYPjY_UOqFu3rKRMQ {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes HRizkdqh1UaSn7fMr9qW {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes HRizkdqh1UaSn7fMr9qW {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes WMPAQSa5MNijtkxgvcyQ {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@keyframes WMPAQSa5MNijtkxgvcyQ {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@-webkit-keyframes A8ACCRs2WgPAiQsFaQpL {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@keyframes A8ACCRs2WgPAiQsFaQpL {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@-webkit-keyframes iqX7icb_jbAXk7Ezlo3Q {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes iqX7icb_jbAXk7Ezlo3Q {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.iqX7icb_jbAXk7Ezlo3Q {
  -webkit-animation-name: iqX7icb_jbAXk7Ezlo3Q;
  animation-name: iqX7icb_jbAXk7Ezlo3Q;
}

@-webkit-keyframes bFpJ63_0wkLMsVlk8fw8 {
  0% {
    top: -100px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
@keyframes bFpJ63_0wkLMsVlk8fw8 {
  0% {
    top: -100px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}
.bFpJ63_0wkLMsVlk8fw8 {
  -webkit-animation-name: bFpJ63_0wkLMsVlk8fw8;
  animation-name: bFpJ63_0wkLMsVlk8fw8;
}

@keyframes Xu5QwnBxDpYKaEopsjB3 {
  0% {
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
  }
  100% {
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
  }
}
@-webkit-keyframes Xu5QwnBxDpYKaEopsjB3 {
  0% {
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
  }
  100% {
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
  }
}
@keyframes RPPXmhpl5npqddc9ZAQ_ {
  0% {
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
  }
  100% {
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
  }
}
@-webkit-keyframes RPPXmhpl5npqddc9ZAQ_ {
  0% {
    backdrop-filter: blur(4px) opacity(1);
    -webkit-backdrop-filter: blur(4px) opacity(1);
  }
  100% {
    backdrop-filter: blur(4px) opacity(0);
    -webkit-backdrop-filter: blur(4px) opacity(0);
  }
}
@-webkit-keyframes lBrCqx8LnLMOr7PK_0wL {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes lBrCqx8LnLMOr7PK_0wL {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.lBrCqx8LnLMOr7PK_0wL {
  -webkit-animation-name: lBrCqx8LnLMOr7PK_0wL;
  animation-name: lBrCqx8LnLMOr7PK_0wL;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes svtUxvrlxTCPdOfXRNsQ {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes svtUxvrlxTCPdOfXRNsQ {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.svtUxvrlxTCPdOfXRNsQ {
  -webkit-animation-name: svtUxvrlxTCPdOfXRNsQ;
  animation-name: svtUxvrlxTCPdOfXRNsQ;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes VCaBsnO6oIF2GGPz55jr {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes VCaBsnO6oIF2GGPz55jr {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.SkKIvw7DaMOfn8lfAhc_ {
  -webkit-transition: background 200ms ease-in-out;
  transition: background 200ms ease-in-out;
}

.VCaBsnO6oIF2GGPz55jr {
  -webkit-animation-name: VCaBsnO6oIF2GGPz55jr;
  animation-name: VCaBsnO6oIF2GGPz55jr;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes QnD7EfhOUWyXOi4cNAk1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes QnD7EfhOUWyXOi4cNAk1 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.QnD7EfhOUWyXOi4cNAk1 {
  -webkit-animation-name: QnD7EfhOUWyXOi4cNAk1;
  animation-name: QnD7EfhOUWyXOi4cNAk1;
}

@-webkit-keyframes ojIHM0wcXg7kA0zBiJ22 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ojIHM0wcXg7kA0zBiJ22 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.ojIHM0wcXg7kA0zBiJ22 {
  -webkit-animation-name: ojIHM0wcXg7kA0zBiJ22;
  animation-name: ojIHM0wcXg7kA0zBiJ22;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes z59CMNYX_1gmN4cD6IC8 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes z59CMNYX_1gmN4cD6IC8 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.z59CMNYX_1gmN4cD6IC8 {
  -webkit-animation-name: z59CMNYX_1gmN4cD6IC8;
  animation-name: z59CMNYX_1gmN4cD6IC8;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.hKzHT_yldQvgau8hYE88 {
  opacity: 0;
  overflow-y: hidden;
  transition-duration: 1s;
  transition-property: all;
  transition-timing-function: ease-in-out;
}
.hKzHT_yldQvgau8hYE88:hover {
  opacity: 1;
}

.n87a9S3LLmhBWCm5XqjA {
  max-height: 250px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.n87a9S3LLmhBWCm5XqjA.hlJaqneetgvBjnnWUHIk {
  max-height: 0;
}

.r4QIYT_hEJlx4i4RyzNO {
  max-height: 200px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.r4QIYT_hEJlx4i4RyzNO.hlJaqneetgvBjnnWUHIk {
  max-height: 0;
}

.Bodxcys2Q35cFlUxklnS {
  max-height: 400px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.Bodxcys2Q35cFlUxklnS.hlJaqneetgvBjnnWUHIk {
  max-height: 0;
}

.qzqoFPT2d56_3wCMjKrv {
  max-height: 150px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.qzqoFPT2d56_3wCMjKrv.hlJaqneetgvBjnnWUHIk {
  max-height: 0;
}

.Cdord3AooKC4J45DVoK3 {
  max-height: 40px;
  overflow-y: hidden;
  transition-property: all;
  transition-timing-function: ease-out;
}
.Cdord3AooKC4J45DVoK3.hlJaqneetgvBjnnWUHIk {
  max-height: 0;
}

.zkFVZ1EogW3kQfIlVfxY {
  transition-duration: 0.4s;
}

.KJVDFZVYR18E9C_SPIRs {
  transition-duration: 0.2s;
}

.kSBc3wL5SXscbE2xiQxD {
  transition-duration: 0.1s;
}

@-webkit-keyframes ItaAPRKcgbPEoTV4BJtd {
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes ItaAPRKcgbPEoTV4BJtd {
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.ItaAPRKcgbPEoTV4BJtd {
  -webkit-animation-name: ItaAPRKcgbPEoTV4BJtd;
  animation-name: ItaAPRKcgbPEoTV4BJtd;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

@-webkit-keyframes QMt8plWYradG9iYYAgSB {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes QMt8plWYradG9iYYAgSB {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.QMt8plWYradG9iYYAgSB {
  -webkit-animation-name: QMt8plWYradG9iYYAgSB;
  animation-name: QMt8plWYradG9iYYAgSB;
}

@-webkit-keyframes IkQT8UxMCrsjBYtbgiy8 {
  0% {
    opacity: 1;
    -ms-transform: scale3d(1, 1, 1); /* IE 9 */
    -webkit-transform: scale3d(1, 1, 1); /* Chrome, Safari, Opera */
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0;
    -ms-transform: scale3d(0.5, 0.5, 0.5); /* IE 9 */
    -webkit-transform: scale3d(0.5, 0.5, 0.5); /* Chrome, Safari, Opera */
    transform: scale3d(0.5, 0.5, 0.5);
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes IkQT8UxMCrsjBYtbgiy8 {
  0% {
    opacity: 1;
    -ms-transform: scale3d(1, 1, 1); /* IE 9 */
    -webkit-transform: scale3d(1, 1, 1); /* Chrome, Safari, Opera */
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0;
    -ms-transform: scale3d(0.5, 0.5, 0.5); /* IE 9 */
    -webkit-transform: scale3d(0.5, 0.5, 0.5); /* Chrome, Safari, Opera */
    transform: scale3d(0.5, 0.5, 0.5);
  }
  100% {
    opacity: 0;
  }
}
@keyframes IkQT8UxMCrsjBYtbgiy8 {
  0% {
    opacity: 1;
    -ms-transform: scale3d(1, 1, 1); /* IE 9 */
    -webkit-transform: scale3d(1, 1, 1); /* Chrome, Safari, Opera */
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0;
    -ms-transform: scale3d(0.5, 0.5, 0.5); /* IE 9 */
    -webkit-transform: scale3d(0.5, 0.5, 0.5); /* Chrome, Safari, Opera */
    transform: scale3d(0.5, 0.5, 0.5);
  }
  100% {
    opacity: 0;
  }
}
.IkQT8UxMCrsjBYtbgiy8 {
  -webkit-animation-name: IkQT8UxMCrsjBYtbgiy8;
  animation-name: IkQT8UxMCrsjBYtbgiy8;
}

@-webkit-keyframes wlg17Ec88V49awtOnklh {
  0% {
    opacity: 0;
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);
  }
}
@-moz-keyframes wlg17Ec88V49awtOnklh {
  0% {
    opacity: 0;
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);
  }
}
@keyframes wlg17Ec88V49awtOnklh {
  0% {
    opacity: 0;
    -ms-transform: scale(0.5); /* IE 9 */
    -webkit-transform: scale(0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);
  }
}
.wlg17Ec88V49awtOnklh {
  -webkit-animation-name: wlg17Ec88V49awtOnklh;
  animation-name: wlg17Ec88V49awtOnklh;
}

.ml4mmObkAgBDVuhAFbLq {
  -webkit-animation-name: ml4mmObkAgBDVuhAFbLq;
  animation-name: ml4mmObkAgBDVuhAFbLq;
  animation-timing-function: ease-in-out;
}

@keyframes ml4mmObkAgBDVuhAFbLq {
  0% {
    top: -30px;
  }
  100% {
    top: 0;
  }
}
.JZZ2y8tEA4kwd8j5g57V {
  -webkit-animation-name: JZZ2y8tEA4kwd8j5g57V;
  animation-name: JZZ2y8tEA4kwd8j5g57V;
  animation-timing-function: ease-in-out;
}

@keyframes JZZ2y8tEA4kwd8j5g57V {
  0% {
    bottom: -60px;
    left: 0;
  }
  100% {
    bottom: -30px;
    left: 30px;
  }
}
.B9kwpUP6wItSWrW3L11j {
  -webkit-animation-name: B9kwpUP6wItSWrW3L11j;
  animation-name: B9kwpUP6wItSWrW3L11j;
  animation-timing-function: ease-in-out;
}

@keyframes B9kwpUP6wItSWrW3L11j {
  0% {
    bottom: -60px;
    right: -30px;
  }
  100% {
    bottom: -30px;
    right: 0;
  }
}
/* Bouncing Loading Box */
@keyframes wWtwCPSRd6454c3w8zYU {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 39px;
  }
  75% {
    transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    transform: translateY(0) rotate(90deg);
  }
}
@-webkit-keyframes wWtwCPSRd6454c3w8zYU {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    -webkit-transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    -webkit-transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 39px;
  }
  75% {
    -webkit-transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(90deg);
  }
}
@keyframes XUpfe0K9XBcLF0SIWvzl {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}
@-webkit-keyframes XUpfe0K9XBcLF0SIWvzl {
  0%, 100% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1);
  }
}
.otZaEctQiPlL0wRixuzA {
  bottom: 0;
  height: 75px;
  left: 0;
  margin: auto;
  position: relative;
  right: 0;
  top: 0;
  width: 49px;
}

.otZaEctQiPlL0wRixuzA:before {
  -webkit-animation: XUpfe0K9XBcLF0SIWvzl 0.58s linear infinite;
  animation: XUpfe0K9XBcLF0SIWvzl 0.58s linear infinite;
  background: rgb(0, 0, 0);
  border-radius: 50%;
  content: "";
  height: 5px;
  left: 0;
  opacity: 0.1;
  position: absolute;
  top: 58px;
  width: 49px;
}

.otZaEctQiPlL0wRixuzA:after {
  -webkit-animation: wWtwCPSRd6454c3w8zYU 0.58s linear infinite;
  animation: wWtwCPSRd6454c3w8zYU 0.58s linear infinite;
  background: rgb(63, 189, 231);
  border-radius: 3px;
  content: "";
  height: 49px;
  left: 0;
  position: absolute;
  top: 0;
  width: 49px;
}

.otZaEctQiPlL0wRixuzA.ey2STBlDEN9bDWOw4ObA:after {
  background: #fff;
}

/* End of Bouncing Loading Box */
@-webkit-keyframes rFrzm72JGKFemsOUtEjC {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-moz-keyframes rFrzm72JGKFemsOUtEjC {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes rFrzm72JGKFemsOUtEjC {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-webkit-keyframes llX_BbeD_sAY5g6WIb6g {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes llX_BbeD_sAY5g6WIb6g {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 50%, 90% {
    -webkit-transform: translate3d(-2px, 0, 0);
    transform: translate3d(-2px, 0, 0);
  }
  30%, 70% {
    -webkit-transform: translate3d(2px, 0, 0);
    transform: translate3d(2px, 0, 0);
  }
}
.llX_BbeD_sAY5g6WIb6g {
  -webkit-animation-name: llX_BbeD_sAY5g6WIb6g;
  animation-name: llX_BbeD_sAY5g6WIb6g;
}

.AT9ZnjXr6PLN7qU7Cb0w {
  -webkit-transform-box: fill-box;
  transform-box: fill-box;
  transform-origin: center;
}

.Mqs7CLrHn3U5WijzsRgT {
  -webkit-animation: g5Ym1kgesieDSVyXkdmU 2.5s linear infinite;
  animation: g5Ym1kgesieDSVyXkdmU 2.5s linear infinite;
}

.f3UWkNU2mk5LYSIA2klh {
  -webkit-animation: U08ofgDyxbewMmCO_Frn 2.5s linear infinite;
  animation: U08ofgDyxbewMmCO_Frn 2.5s linear infinite;
}

.NuLf8ItPSrlGz4X8eGiq {
  -webkit-animation: U08ofgDyxbewMmCO_Frn 2s linear infinite;
  animation: U08ofgDyxbewMmCO_Frn 2s linear infinite;
}

.T8PcTGTDlHK7vi19E0Nh {
  -webkit-animation: dQJHGrwUp1WqUhVbKNlI 1.5s linear infinite;
  animation: dQJHGrwUp1WqUhVbKNlI 1.5s linear infinite;
}

@keyframes dQJHGrwUp1WqUhVbKNlI {
  0% {
    -ms-transform: translate(-50%, -50%) rotate(0); /* IE 9 */
    -webkit-transform: translate(-50%, -50%) rotate(0); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -ms-transform: translate(-50%, -50%) rotate(360deg); /* IE 9 */
    -webkit-transform: translate(-50%, -50%) rotate(360deg); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes dQJHGrwUp1WqUhVbKNlI {
  0% {
    -ms-transform: translate(-50%, -50%) rotate(0); /* IE 9 */
    -webkit-transform: translate(-50%, -50%) rotate(0); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -ms-transform: translate(-50%, -50%) rotate(360deg); /* IE 9 */
    -webkit-transform: translate(-50%, -50%) rotate(360deg); /* Chrome, Safari, Opera */
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes g5Ym1kgesieDSVyXkdmU {
  0% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
  100% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
}
@-webkit-keyframes g5Ym1kgesieDSVyXkdmU {
  0% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
  100% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
}
@-moz-keyframes g5Ym1kgesieDSVyXkdmU {
  0% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
  100% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
}
@keyframes U08ofgDyxbewMmCO_Frn {
  0% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
}
@-webkit-keyframes U08ofgDyxbewMmCO_Frn {
  0% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
}
@-moz-keyframes U08ofgDyxbewMmCO_Frn {
  0% {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
  }
  100% {
    -ms-transform: rotate(0); /* IE 9 */
    -webkit-transform: rotate(0); /* Chrome, Safari, Opera */
    transform: rotate(0);
  }
}
@-webkit-keyframes n4TPrAQmBpRIN1RWVNNC {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes n4TPrAQmBpRIN1RWVNNC {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.n4TPrAQmBpRIN1RWVNNC {
  -webkit-animation-name: n4TPrAQmBpRIN1RWVNNC;
  animation-name: n4TPrAQmBpRIN1RWVNNC;
}

@-webkit-keyframes N8zw3ktJZiT3QsmhjHsc {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes N8zw3ktJZiT3QsmhjHsc {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.N8zw3ktJZiT3QsmhjHsc {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: N8zw3ktJZiT3QsmhjHsc;
  animation-name: N8zw3ktJZiT3QsmhjHsc;
}

@-webkit-keyframes VNupDfHiXFjI7pdbOPO6 {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes VNupDfHiXFjI7pdbOPO6 {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.VNupDfHiXFjI7pdbOPO6 {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: VNupDfHiXFjI7pdbOPO6;
  animation-name: VNupDfHiXFjI7pdbOPO6;
}

@-webkit-keyframes YdNNhHwjBa9Hf3DLrQuM {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}
@keyframes YdNNhHwjBa9Hf3DLrQuM {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}
.YdNNhHwjBa9Hf3DLrQuM {
  -webkit-animation-name: YdNNhHwjBa9Hf3DLrQuM;
  animation-name: YdNNhHwjBa9Hf3DLrQuM;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes U3KaLM7x7OL8y2s2ZKFk {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes ZSzfOwAph2QjrYipoley {
  from {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  43% {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  45% {
    -ms-transform: scaleY(0); /* IE 9 */
    -webkit-transform: scaleY(0); /* Chrome, Safari, Opera */
    transform: scaleY(0);
  }
  47% {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  55% {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  57% {
    -ms-transform: scaleY(0); /* IE 9 */
    -webkit-transform: scaleY(0); /* Chrome, Safari, Opera */
    transform: scaleY(0);
  }
  59% {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
  to {
    -ms-transform: scaleY(1); /* IE 9 */
    -webkit-transform: scaleY(1); /* Chrome, Safari, Opera */
    transform: scaleY(1);
  }
}
@keyframes U3KaLM7x7OL8y2s2ZKFk {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.U3KaLM7x7OL8y2s2ZKFk {
  -webkit-animation-name: U3KaLM7x7OL8y2s2ZKFk;
  animation-name: U3KaLM7x7OL8y2s2ZKFk;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes JWAOtpPv5wV9lPAhVxdF {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(0);
  }
}
.JWAOtpPv5wV9lPAhVxdF {
  -webkit-animation-name: JWAOtpPv5wV9lPAhVxdF;
  animation-name: JWAOtpPv5wV9lPAhVxdF;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@keyframes JWAOtpPv5wV9lPAhVxdF {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(0);
  }
}
.yB94GUxfqtJTGq0jRhRA {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: yB94GUxfqtJTGq0jRhRA 3s ease-in-out infinite;
  -webkit-animation: yB94GUxfqtJTGq0jRhRA 3s ease-in-out infinite; /* Chrome, Safari, Opera */
}

@-webkit-keyframes yB94GUxfqtJTGq0jRhRA {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewY(8deg);
  }
}
@keyframes yB94GUxfqtJTGq0jRhRA {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewY(8deg);
  }
}
.m60DpphaztZ3Ulzb9Cez {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: m60DpphaztZ3Ulzb9Cez 2s ease-in-out infinite;
  -webkit-animation: m60DpphaztZ3Ulzb9Cez 2s ease-in-out infinite; /* Chrome, Safari, Opera */
}

.zvSmYZpb3KCUnOj9LyWL {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: zvSmYZpb3KCUnOj9LyWL 2s ease-in-out infinite;
  -webkit-animation: zvSmYZpb3KCUnOj9LyWL 2s ease-in-out infinite; /* Chrome, Safari, Opera */
}

@-webkit-keyframes m60DpphaztZ3Ulzb9Cez {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewX(35deg);
  }
}
@keyframes m60DpphaztZ3Ulzb9Cez {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewX(35deg);
  }
}
@-webkit-keyframes zvSmYZpb3KCUnOj9LyWL {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewY(2deg);
  }
}
@keyframes zvSmYZpb3KCUnOj9LyWL {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewY(2deg);
  }
}
.Y3gj1mZXCSLi5R1hRft9 {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: Lyt0LAn6dzcakaam8Kl6 20s ease-in-out infinite;
  -webkit-animation: Lyt0LAn6dzcakaam8Kl6 20s ease-in-out infinite; /* Chrome, Safari, Opera */
}

@-webkit-keyframes Lyt0LAn6dzcakaam8Kl6 {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewX(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewX(3deg);
  }
}
@keyframes Lyt0LAn6dzcakaam8Kl6 {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: skewX(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: skewX(3deg);
  }
}
.oDgmM0aFFIFrZBot_5DQ {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: YC8bLbCCD4huIRT_MHjb 5s ease-in-out infinite;
  -webkit-animation: YC8bLbCCD4huIRT_MHjb 5s ease-in-out infinite; /* Chrome, Safari, Opera */
}

.kgp2XBqdmzhHkvutHYAu {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: rmdHa0vQ08lUupEsXPBF 20s linear infinite;
  -webkit-animation: rmdHa0vQ08lUupEsXPBF 20s linear infinite; /* Chrome, Safari, Opera */
}

.wcs7q10sTmTw8pW41KS5 {
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: rmdHa0vQ08lUupEsXPBF 5s linear infinite;
  -webkit-animation: rmdHa0vQ08lUupEsXPBF 5s linear infinite; /* Chrome, Safari, Opera */
}

.v8jwudFN3vH6oiAb85SA.IQ2SbS0A53mTrCpKyCwb {
  animation: Qgw939yIUlsIxEzaQy_W 0.25s linear;
  -webkit-animation: Qgw939yIUlsIxEzaQy_W 0.25s linear; /* Chrome, Safari, Opera */
}
.v8jwudFN3vH6oiAb85SA.NpGvsH4FRhN3SCwNngGo {
  animation: TqhhB90yTV2kRHzvSgnQ 0.25s linear;
  -webkit-animation: TqhhB90yTV2kRHzvSgnQ 0.25s linear; /* Chrome, Safari, Opera */
}
.v8jwudFN3vH6oiAb85SA.ePjlniPDgEmLWVQJfwHQ {
  animation: vwn2m23giGwf7FU5bsMk 0.15s linear;
  -webkit-animation: vwn2m23giGwf7FU5bsMk 0.15s linear; /* Chrome, Safari, Opera */
}
.v8jwudFN3vH6oiAb85SA.fikrY7UNQqgF5QNeV1GF {
  animation: jrlvTfQ2VpEJnvcdCQNF 0.15s linear;
  -webkit-animation: jrlvTfQ2VpEJnvcdCQNF 0.15s linear; /* Chrome, Safari, Opera */
}
.v8jwudFN3vH6oiAb85SA.oaJ6cKj41k1xReQ4AH4q {
  animation: Qgw939yIUlsIxEzaQy_W 0.4s linear;
  -webkit-animation: Qgw939yIUlsIxEzaQy_W 0.4s linear; /* Chrome, Safari, Opera */
}
.v8jwudFN3vH6oiAb85SA.dslgqZiBTx2hK3o3n0zw {
  animation: TqhhB90yTV2kRHzvSgnQ 0.4s linear;
  -webkit-animation: TqhhB90yTV2kRHzvSgnQ 0.4s linear; /* Chrome, Safari, Opera */
}

._6Su6heuxtQCfenUchCyZ.sV1FRkENeSr45ySKXVfd {
  animation: iLgsxtDCZPneWJ_ZpjSE 0.25s linear;
  -webkit-animation: iLgsxtDCZPneWJ_ZpjSE 0.25s linear; /* Chrome, Safari, Opera */
}
._6Su6heuxtQCfenUchCyZ.l6XCf13hRlaAK1xKx5mg {
  animation: gHjl1zgQeNhigMOT_5BF 0.25s linear;
  -webkit-animation: gHjl1zgQeNhigMOT_5BF 0.25s linear; /* Chrome, Safari, Opera */
}
._6Su6heuxtQCfenUchCyZ.HntkiIhzmCdSB8UJVFm5 {
  animation: A6XxE2zrr41XARvBeu41 0.15s linear;
  -webkit-animation: A6XxE2zrr41XARvBeu41 0.15s linear; /* Chrome, Safari, Opera */
}
._6Su6heuxtQCfenUchCyZ.zM5XH2N75z4xRFZdVAIE {
  animation: qf1PkbPOqKspuB7tn1t0 0.15s linear;
  -webkit-animation: qf1PkbPOqKspuB7tn1t0 0.15s linear; /* Chrome, Safari, Opera */
}
._6Su6heuxtQCfenUchCyZ.E7N04IPozbkplnQWK69c {
  animation: iLgsxtDCZPneWJ_ZpjSE 0.4s linear;
  -webkit-animation: iLgsxtDCZPneWJ_ZpjSE 0.4s linear; /* Chrome, Safari, Opera */
}
._6Su6heuxtQCfenUchCyZ.dK7EFe1uVtpL4DpFYink {
  animation: gHjl1zgQeNhigMOT_5BF 0.4s linear;
  -webkit-animation: gHjl1zgQeNhigMOT_5BF 0.4s linear; /* Chrome, Safari, Opera */
}

@-webkit-keyframes YC8bLbCCD4huIRT_MHjb {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}
@keyframes YC8bLbCCD4huIRT_MHjb {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes rmdHa0vQ08lUupEsXPBF {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes rmdHa0vQ08lUupEsXPBF {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes TqhhB90yTV2kRHzvSgnQ {
  0% {
    transform: translateX(150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes Qgw939yIUlsIxEzaQy_W {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@-webkit-keyframes Qgw939yIUlsIxEzaQy_W {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes vwn2m23giGwf7FU5bsMk {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes vwn2m23giGwf7FU5bsMk {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes jrlvTfQ2VpEJnvcdCQNF {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes jrlvTfQ2VpEJnvcdCQNF {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes gHjl1zgQeNhigMOT_5BF {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@-webkit-keyframes gHjl1zgQeNhigMOT_5BF {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@keyframes iLgsxtDCZPneWJ_ZpjSE {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@-webkit-keyframes iLgsxtDCZPneWJ_ZpjSE {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@keyframes A6XxE2zrr41XARvBeu41 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@-webkit-keyframes A6XxE2zrr41XARvBeu41 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@keyframes qf1PkbPOqKspuB7tn1t0 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@-webkit-keyframes qf1PkbPOqKspuB7tn1t0 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@keyframes gMHaRE0XxI6fGl7kmbY9 {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@-webkit-keyframes gMHaRE0XxI6fGl7kmbY9 {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@keyframes IYbyh_zPLwfGDjXSI6lw {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0.5;
  }
}
@keyframes A8aKF6rks__Hjp3cBG7f {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0;
  }
}
@keyframes TEvmd9a2NGxQxHuzeK7c {
  0%, 19%, 40%, 60%, 80%, 100% {
    opacity: 0;
  }
  20%, 39% {
    opacity: 1;
  }
}
@keyframes codgUjCIQnUe3yU2CzYq {
  0%, 20%, 39%, 60%, 80%, 100% {
    opacity: 0;
  }
  40%, 59% {
    opacity: 1;
  }
}
@keyframes sU7CxjfjYi_jluKZtPv2 {
  0%, 20%, 40%, 59%, 80%, 100% {
    opacity: 0;
  }
  60%, 79% {
    opacity: 1;
  }
}
@keyframes eVSt8w6vj7Iu9yF9NdjD {
  0%, 20%, 40%, 60%, 79%, 100% {
    opacity: 0;
  }
  80%, 99% {
    opacity: 1;
  }
}
@keyframes xjVOm2qj3aOIhkCADXMp {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@-webkit-keyframes xjVOm2qj3aOIhkCADXMp {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@keyframes Mqs6m2EiY91iXAKUdf9H {
  0% {
    -ms-transform: scale(0, 0); /* IE 9 */
    -webkit-transform: scale(0, 0); /* Chrome, Safari, Opera */
    transform: scale(0, 0);
  }
  100% {
    -ms-transform: scale(1, 1); /* IE 9 */
    -webkit-transform: scale(1, 1); /* Chrome, Safari, Opera */
    transform: scale(1, 1);
  }
}
@-webkit-keyframes Mqs6m2EiY91iXAKUdf9H {
  0% {
    -ms-transform: scale(0, 0); /* IE 9 */
    -webkit-transform: scale(0, 0); /* Chrome, Safari, Opera */
    transform: scale(0, 0);
  }
  100% {
    -ms-transform: scale(1, 1); /* IE 9 */
    -webkit-transform: scale(1, 1); /* Chrome, Safari, Opera */
    transform: scale(1, 1);
  }
}
@-webkit-keyframes FdpqU2hn93JCoiS_XRD8 {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  25% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes FdpqU2hn93JCoiS_XRD8 {
  0% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
  25% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  60% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes z3Xde_XMmFHQgYy6CyFp {
  0% {
    transform: scaleY(0.2);
  }
  4% {
    transform: scaleY(0.77);
  }
  5% {
    transform: scaleY(0.84);
  }
  6% {
    transform: scaleY(0.81);
  }
  7% {
    transform: scaleY(0.84);
  }
  8% {
    transform: scaleY(0.82);
  }
  9% {
    transform: scaleY(0.84);
  }
  10% {
    transform: scaleY(0.83);
  }
  11% {
    transform: scaleY(0.84);
  }
  40% {
    transform: scaleY(0.84);
  }
  41% {
    transform: scaleY(0.84);
  }
  45% {
    transform: scaleY(0.13);
  }
  49% {
    transform: scaleY(0.18);
  }
  100% {
    transform: scaleY(0.18);
  }
}
@keyframes FgbaS3g7eqSNiT_Opfwf {
  0% {
    transform: translateY(-124px);
  }
  5% {
    transform: translateY(-24px);
  }
  6% {
    transform: translateY(-36px);
  }
  7% {
    transform: translateY(-24px);
  }
  8% {
    transform: translateY(-32px);
  }
  9% {
    transform: translateY(-24px);
  }
  10% {
    transform: translateY(-28px);
  }
  11% {
    transform: translateY(-24px);
  }
  40% {
    transform: translateY(-24px);
  }
  41% {
    transform: translateY(-24px);
  }
  45% {
    transform: translateY(-136px);
  }
  46% {
    transform: translateY(-124px);
  }
  47% {
    transform: translateY(-132px);
  }
  48% {
    transform: translateY(-124px);
  }
  49% {
    transform: translateY(-128px);
  }
  50% {
    transform: translateY(-124px);
  }
  100% {
    transform: translateY(-124px);
  }
}
.XdEx388ECqoFXtXafvOM {
  background: #FAFAFA;
  border-radius: 0 0 8px 8px;
}

.I38kBqZs9OKjKU5etNGU {
  border-radius: 4px 0 0 4px;
  background: #D32559;
  min-width: 4px;
}

@media screen and (max-width: 600px) {
  .XzjBWnMFjxppjdxWX3mF {
    width: 100%;
    bottom: 0;
    left: 0 !important;
  }
  .I38kBqZs9OKjKU5etNGU {
    display: none;
  }
}
@media screen and (min-width: 601px) {
  .XzjBWnMFjxppjdxWX3mF {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    width: 300px;
    bottom: 16px;
  }
}
.XzjBWnMFjxppjdxWX3mF {
  background: #FFFFFF;
  box-shadow: 0 6px 16px 0 rgba(20, 19, 37, 0.1);
  color: #403F5D;
  height: 200px;
  position: absolute;
  transition: bottom 0.3s ease-in-out;
  z-index: 6001;
}
.XzjBWnMFjxppjdxWX3mF.GdlyCrWOFX8A6WUN3ti3 {
  -webkit-animation-name: svtUxvrlxTCPdOfXRNsQ;
  animation-name: svtUxvrlxTCPdOfXRNsQ;
  left: 16px;
}
.XzjBWnMFjxppjdxWX3mF.nAWqXCbYoYsQtz9q6rjh {
  -webkit-animation-name: ojIHM0wcXg7kA0zBiJ22;
  animation-name: ojIHM0wcXg7kA0zBiJ22;
}

.ZN2K7WYbtlthdmqqA5fM {
  position: absolute !important;
  right: 8px;
  top: 8px;
}
/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor/components/poster-editor-bottom-bar/components/timeline-mobile-onboarding/timeline-mobile-onboarding.module.scss ***!
  \****************************************************************************************************************************************************************************************************************************************/
/**
 * Please use only these colours in our style sheets. Do NOT add more colours here, unless approved by the
 * design team.
 * @url https://www.figma.com/file/czOHWM3ykDD7XQPpwIBINf/Colors?node-id=0%3A1
 */
.b2TDsHAPd8B9LhXsjf_S {
  height: 80px;
  padding: 8px 12px !important;
  width: 194px;
  z-index: 4999 !important;
}

.b2TDsHAPd8B9LhXsjf_S::after {
  border-radius: 6px 0 4px 0 !important;
}

.En9kWzbpoMvRB5vAz9H_ {
  color: #CABBF3;
}

.HGoL7WLL3wUfr0iXgL37 {
  margin-bottom: 6px;
}
/*!***********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/poster-editor-page/poster-editor-page.module.scss ***!
  \***********************************************************************************************************************************************************/
.PZHeUSM6BolGkDpKVdtW {
  height: 100vh;
  width: 100vw;
}

/*# sourceMappingURL=postermaker-react.3ac1a12c2452b00dc612.bundle.css.map*/