/*!***************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/icon-v2/icon.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 */
/*!****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/circular-progress-loader/circular-progress-loader.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 */
/**
 Injects all the SCSS such as color/animation name to the css selector
 in which this mixin is called instead of selecting .icon-circular-loader directly in the mixin as in loader-for-color
 */
.icon-circular-loader {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  box-sizing: border-box;
  color: #23A6D4;
  font-size: 8px;
  height: 24px;
  margin-left: auto;
  overflow: hidden;
  width: 24px;
}
.icon-circular-loader.-no-margin {
  margin: 0;
}
.icon-circular-loader.-xxsmall {
  height: 9px;
  width: 9px;
}
.icon-circular-loader.-xsmall {
  height: 16px;
  width: 16px;
}
.icon-circular-loader.-small {
  height: 20px;
  width: 20px;
}
.icon-circular-loader.-medium {
  height: 32px;
  width: 32px;
}
.icon-circular-loader.-large {
  height: 40px;
  width: 40px;
}
.icon-circular-loader.-primary {
  color: #23A6D4;
}
@keyframes loader-rotating-color-primary {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #23A6D4;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #23A6D4;
  }
  100% {
    border-left-color: #23A6D4;
    border-bottom-color: #23A6D4;
    transform: rotate(225deg);
  }
}
.icon-circular-loader.-primary:indeterminate::before, .icon-circular-loader.-primary:indeterminate::-webkit-progress-value {
  animation: loader-rotating-color-primary 0.75s infinite linear alternate;
  border-top-color: #23A6D4;
}
.icon-circular-loader.-primary:indeterminate::-moz-progress-bar {
  animation: loader-rotating-color-primary 0.75s infinite linear alternate;
  border-top-color: #23A6D4;
}
.icon-circular-loader.-primarydark {
  color: #00688C;
}
@keyframes loader-rotating-color-primarydark {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #00688C;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #00688C;
  }
  100% {
    border-left-color: #00688C;
    border-bottom-color: #00688C;
    transform: rotate(225deg);
  }
}
.icon-circular-loader.-primarydark:indeterminate::before, .icon-circular-loader.-primarydark:indeterminate::-webkit-progress-value {
  animation: loader-rotating-color-primarydark 0.75s infinite linear alternate;
  border-top-color: #00688C;
}
.icon-circular-loader.-primarydark:indeterminate::-moz-progress-bar {
  animation: loader-rotating-color-primarydark 0.75s infinite linear alternate;
  border-top-color: #00688C;
}
.icon-circular-loader.-white {
  color: #FFFFFF;
}
@keyframes loader-rotating-color-white {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #FFFFFF;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #FFFFFF;
  }
  100% {
    border-left-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    transform: rotate(225deg);
  }
}
.icon-circular-loader.-white:indeterminate::before, .icon-circular-loader.-white:indeterminate::-webkit-progress-value {
  animation: loader-rotating-color-white 0.75s infinite linear alternate;
  border-top-color: #FFFFFF;
}
.icon-circular-loader.-white:indeterminate::-moz-progress-bar {
  animation: loader-rotating-color-white 0.75s infinite linear alternate;
  border-top-color: #FFFFFF;
}
.icon-circular-loader.-aidark {
  color: #3C0ACD;
}
@keyframes loader-rotating-color-ai-dark {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #3C0ACD;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #3C0ACD;
  }
  100% {
    border-left-color: #3C0ACD;
    border-bottom-color: #3C0ACD;
    transform: rotate(225deg);
  }
}
.icon-circular-loader.-aidark:indeterminate::before, .icon-circular-loader.-aidark:indeterminate::-webkit-progress-value {
  animation: loader-rotating-color-ai-dark 0.75s infinite linear alternate;
  border-top-color: #3C0ACD;
}
.icon-circular-loader.-aidark:indeterminate::-moz-progress-bar {
  animation: loader-rotating-color-ai-dark 0.75s infinite linear alternate;
  border-top-color: #3C0ACD;
}
.icon-circular-loader.-dark {
  color: #403F5D;
}
@keyframes loader-rotating-color-dark {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #403F5D;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #403F5D;
  }
  100% {
    border-left-color: #403F5D;
    border-bottom-color: #403F5D;
    transform: rotate(225deg);
  }
}
.icon-circular-loader.-dark:indeterminate::before, .icon-circular-loader.-dark:indeterminate::-webkit-progress-value {
  animation: loader-rotating-color-dark 0.75s infinite linear alternate;
  border-top-color: #403F5D;
}
.icon-circular-loader.-dark:indeterminate::-moz-progress-bar {
  animation: loader-rotating-color-dark 0.75s infinite linear alternate;
  border-top-color: #403F5D;
}
.icon-circular-loader.-error {
  color: #B70A3E;
}
@keyframes loader-rotating-color-error {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #B70A3E;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #B70A3E;
  }
  100% {
    border-left-color: #B70A3E;
    border-bottom-color: #B70A3E;
    transform: rotate(225deg);
  }
}
.icon-circular-loader.-error:indeterminate::before, .icon-circular-loader.-error:indeterminate::-webkit-progress-value {
  animation: loader-rotating-color-error 0.75s infinite linear alternate;
  border-top-color: #B70A3E;
}
.icon-circular-loader.-error:indeterminate::-moz-progress-bar {
  animation: loader-rotating-color-error 0.75s infinite linear alternate;
  border-top-color: #B70A3E;
}
.icon-circular-loader.-warning {
  color: #D69923;
}
@keyframes loader-color-warning {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #D69923;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #D69923;
  }
  100% {
    border-left-color: #D69923;
    border-bottom-color: #D69923;
    transform: rotate(225deg);
  }
}
.icon-circular-loader.-warning:indeterminate::before, .icon-circular-loader.-warning:indeterminate::-webkit-progress-value {
  animation: loader-color-warning 0.75s infinite linear alternate;
  border-top-color: #D69923;
}
.icon-circular-loader.-warning:indeterminate::-moz-progress-bar {
  animation: loader-color-warning 0.75s infinite linear alternate;
  border-top-color: #D69923;
}
.icon-circular-loader.-success {
  color: #19AD89;
}
@keyframes loader-color-success {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #19AD89;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #19AD89;
  }
  100% {
    border-left-color: #19AD89;
    border-bottom-color: #19AD89;
    transform: rotate(225deg);
  }
}
.icon-circular-loader.-success:indeterminate::before, .icon-circular-loader.-success:indeterminate::-webkit-progress-value {
  animation: loader-color-success 0.75s infinite linear alternate;
  border-top-color: #19AD89;
}
.icon-circular-loader.-success:indeterminate::-moz-progress-bar {
  animation: loader-color-success 0.75s infinite linear alternate;
  border-top-color: #19AD89;
}

.icon-circular-loader.-danger {
  color: #D32559;
}

.icon-circular-loader::-webkit-progress-bar {
  background-color: transparent;
}

.icon-circular-loader:indeterminate {
  animation: pure-material-progress-circular 6s infinite cubic-bezier(0.3, 0.6, 1, 1);
  -webkit-mask-image: linear-gradient(transparent 50%, black 50%), linear-gradient(to right, transparent 50%, black 50%);
  mask-image: linear-gradient(transparent 50%, black 50%), linear-gradient(to right, transparent 50%, black 50%);
}

:-ms-lang(x), .icon-circular-loader:indeterminate {
  animation: none;
}

.icon-circular-loader:indeterminate::before,
.icon-circular-loader:indeterminate::-webkit-progress-value {
  animation: pure-material-progress-circular-pseudo 0.75s infinite linear alternate;
  background-color: transparent;
  border: solid 0.25em transparent;
  border-radius: 50%;
  border-top-color: #23A6D4;
  box-sizing: border-box;
  content: "";
  display: block;
  height: 100%;
  margin-bottom: 0.25em;
  width: 100% !important;
}

.icon-circular-loader:indeterminate::-moz-progress-bar {
  animation: pure-material-progress-circular-pseudo 0.75s infinite linear alternate;
  background-color: transparent;
  border: solid 0.25em transparent;
  border-radius: 50%;
  border-top-color: #23A6D4;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

.icon-circular-loader:indeterminate::-ms-fill {
  animation-name: -ms-ring;
}

@keyframes pure-material-progress-circular {
  0% {
    transform: rotate(0deg);
  }
  12.5% {
    transform: rotate(180deg);
    animation-timing-function: linear;
  }
  25% {
    transform: rotate(630deg);
  }
  37.5% {
    transform: rotate(810deg);
    animation-timing-function: linear;
  }
  50% {
    transform: rotate(1260deg);
  }
  62.5% {
    transform: rotate(1440deg);
    animation-timing-function: linear;
  }
  75% {
    transform: rotate(1890deg);
  }
  87.5% {
    transform: rotate(2070deg);
    animation-timing-function: linear;
  }
  100% {
    transform: rotate(2520deg);
  }
}
@keyframes pure-material-progress-circular-pseudo {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #23A6D4;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #23A6D4;
  }
  100% {
    border-left-color: #23A6D4;
    border-bottom-color: #23A6D4;
    transform: rotate(225deg);
  }
}
/*!**********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/icon-v2/icon.module.scss ***!
  \**********************************************************************************************************************************/
.CRjz3Aeon9jwfn2Wfc3e {
  margin: auto;
}
/*!****************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/button/button.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 */
/**
 Injects all the SCSS such as color/animation name to the css selector
 in which this mixin is called instead of selecting .icon-circular-loader directly in the mixin as in loader-for-color
 */
.icon-circular-loader {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  box-sizing: border-box;
  color: #23A6D4;
  font-size: 8px;
  height: 24px;
  margin-left: auto;
  overflow: hidden;
  width: 24px;
}
.icon-circular-loader.-no-margin {
  margin: 0;
}
.icon-circular-loader.-xxsmall {
  height: 9px;
  width: 9px;
}
.icon-circular-loader.-xsmall {
  height: 16px;
  width: 16px;
}
.icon-circular-loader.-small {
  height: 20px;
  width: 20px;
}
.icon-circular-loader.-medium {
  height: 32px;
  width: 32px;
}
.icon-circular-loader.-large {
  height: 40px;
  width: 40px;
}
.icon-circular-loader.-primary {
  color: #23A6D4;
}
@keyframes loader-rotating-color-primary {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #23A6D4;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #23A6D4;
  }
  100% {
    border-left-color: #23A6D4;
    border-bottom-color: #23A6D4;
    transform: rotate(225deg);
  }
}
.icon-circular-loader.-primary:indeterminate::before, .icon-circular-loader.-primary:indeterminate::-webkit-progress-value {
  animation: loader-rotating-color-primary 0.75s infinite linear alternate;
  border-top-color: #23A6D4;
}
.icon-circular-loader.-primary:indeterminate::-moz-progress-bar {
  animation: loader-rotating-color-primary 0.75s infinite linear alternate;
  border-top-color: #23A6D4;
}
.icon-circular-loader.-primarydark {
  color: #00688C;
}
@keyframes loader-rotating-color-primarydark {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #00688C;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #00688C;
  }
  100% {
    border-left-color: #00688C;
    border-bottom-color: #00688C;
    transform: rotate(225deg);
  }
}
.icon-circular-loader.-primarydark:indeterminate::before, .icon-circular-loader.-primarydark:indeterminate::-webkit-progress-value {
  animation: loader-rotating-color-primarydark 0.75s infinite linear alternate;
  border-top-color: #00688C;
}
.icon-circular-loader.-primarydark:indeterminate::-moz-progress-bar {
  animation: loader-rotating-color-primarydark 0.75s infinite linear alternate;
  border-top-color: #00688C;
}
.icon-circular-loader.-white {
  color: #FFFFFF;
}
@keyframes loader-rotating-color-white {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #FFFFFF;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #FFFFFF;
  }
  100% {
    border-left-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    transform: rotate(225deg);
  }
}
.icon-circular-loader.-white:indeterminate::before, .icon-circular-loader.-white:indeterminate::-webkit-progress-value {
  animation: loader-rotating-color-white 0.75s infinite linear alternate;
  border-top-color: #FFFFFF;
}
.icon-circular-loader.-white:indeterminate::-moz-progress-bar {
  animation: loader-rotating-color-white 0.75s infinite linear alternate;
  border-top-color: #FFFFFF;
}
.icon-circular-loader.-aidark {
  color: #3C0ACD;
}
@keyframes loader-rotating-color-ai-dark {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #3C0ACD;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #3C0ACD;
  }
  100% {
    border-left-color: #3C0ACD;
    border-bottom-color: #3C0ACD;
    transform: rotate(225deg);
  }
}
.icon-circular-loader.-aidark:indeterminate::before, .icon-circular-loader.-aidark:indeterminate::-webkit-progress-value {
  animation: loader-rotating-color-ai-dark 0.75s infinite linear alternate;
  border-top-color: #3C0ACD;
}
.icon-circular-loader.-aidark:indeterminate::-moz-progress-bar {
  animation: loader-rotating-color-ai-dark 0.75s infinite linear alternate;
  border-top-color: #3C0ACD;
}
.icon-circular-loader.-dark {
  color: #403F5D;
}
@keyframes loader-rotating-color-dark {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #403F5D;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #403F5D;
  }
  100% {
    border-left-color: #403F5D;
    border-bottom-color: #403F5D;
    transform: rotate(225deg);
  }
}
.icon-circular-loader.-dark:indeterminate::before, .icon-circular-loader.-dark:indeterminate::-webkit-progress-value {
  animation: loader-rotating-color-dark 0.75s infinite linear alternate;
  border-top-color: #403F5D;
}
.icon-circular-loader.-dark:indeterminate::-moz-progress-bar {
  animation: loader-rotating-color-dark 0.75s infinite linear alternate;
  border-top-color: #403F5D;
}
.icon-circular-loader.-error {
  color: #B70A3E;
}
@keyframes loader-rotating-color-error {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #B70A3E;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #B70A3E;
  }
  100% {
    border-left-color: #B70A3E;
    border-bottom-color: #B70A3E;
    transform: rotate(225deg);
  }
}
.icon-circular-loader.-error:indeterminate::before, .icon-circular-loader.-error:indeterminate::-webkit-progress-value {
  animation: loader-rotating-color-error 0.75s infinite linear alternate;
  border-top-color: #B70A3E;
}
.icon-circular-loader.-error:indeterminate::-moz-progress-bar {
  animation: loader-rotating-color-error 0.75s infinite linear alternate;
  border-top-color: #B70A3E;
}
.icon-circular-loader.-warning {
  color: #D69923;
}
@keyframes loader-color-warning {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #D69923;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #D69923;
  }
  100% {
    border-left-color: #D69923;
    border-bottom-color: #D69923;
    transform: rotate(225deg);
  }
}
.icon-circular-loader.-warning:indeterminate::before, .icon-circular-loader.-warning:indeterminate::-webkit-progress-value {
  animation: loader-color-warning 0.75s infinite linear alternate;
  border-top-color: #D69923;
}
.icon-circular-loader.-warning:indeterminate::-moz-progress-bar {
  animation: loader-color-warning 0.75s infinite linear alternate;
  border-top-color: #D69923;
}
.icon-circular-loader.-success {
  color: #19AD89;
}
@keyframes loader-color-success {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #19AD89;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #19AD89;
  }
  100% {
    border-left-color: #19AD89;
    border-bottom-color: #19AD89;
    transform: rotate(225deg);
  }
}
.icon-circular-loader.-success:indeterminate::before, .icon-circular-loader.-success:indeterminate::-webkit-progress-value {
  animation: loader-color-success 0.75s infinite linear alternate;
  border-top-color: #19AD89;
}
.icon-circular-loader.-success:indeterminate::-moz-progress-bar {
  animation: loader-color-success 0.75s infinite linear alternate;
  border-top-color: #19AD89;
}

.icon-circular-loader.-danger {
  color: #D32559;
}

.icon-circular-loader::-webkit-progress-bar {
  background-color: transparent;
}

.icon-circular-loader:indeterminate {
  animation: pure-material-progress-circular 6s infinite cubic-bezier(0.3, 0.6, 1, 1);
  -webkit-mask-image: linear-gradient(transparent 50%, black 50%), linear-gradient(to right, transparent 50%, black 50%);
  mask-image: linear-gradient(transparent 50%, black 50%), linear-gradient(to right, transparent 50%, black 50%);
}

:-ms-lang(x), .icon-circular-loader:indeterminate {
  animation: none;
}

.icon-circular-loader:indeterminate::before,
.icon-circular-loader:indeterminate::-webkit-progress-value {
  animation: pure-material-progress-circular-pseudo 0.75s infinite linear alternate;
  background-color: transparent;
  border: solid 0.25em transparent;
  border-radius: 50%;
  border-top-color: #23A6D4;
  box-sizing: border-box;
  content: "";
  display: block;
  height: 100%;
  margin-bottom: 0.25em;
  width: 100% !important;
}

.icon-circular-loader:indeterminate::-moz-progress-bar {
  animation: pure-material-progress-circular-pseudo 0.75s infinite linear alternate;
  background-color: transparent;
  border: solid 0.25em transparent;
  border-radius: 50%;
  border-top-color: #23A6D4;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

.icon-circular-loader:indeterminate::-ms-fill {
  animation-name: -ms-ring;
}

@keyframes pure-material-progress-circular {
  0% {
    transform: rotate(0deg);
  }
  12.5% {
    transform: rotate(180deg);
    animation-timing-function: linear;
  }
  25% {
    transform: rotate(630deg);
  }
  37.5% {
    transform: rotate(810deg);
    animation-timing-function: linear;
  }
  50% {
    transform: rotate(1260deg);
  }
  62.5% {
    transform: rotate(1440deg);
    animation-timing-function: linear;
  }
  75% {
    transform: rotate(1890deg);
  }
  87.5% {
    transform: rotate(2070deg);
    animation-timing-function: linear;
  }
  100% {
    transform: rotate(2520deg);
  }
}
@keyframes pure-material-progress-circular-pseudo {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #23A6D4;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #23A6D4;
  }
  100% {
    border-left-color: #23A6D4;
    border-bottom-color: #23A6D4;
    transform: rotate(225deg);
  }
}
/*
 .btn
    .primary
    .secondary
    .danger
    .success
    .premium
    .premium2
    .premium3
    .primarydark
    .dark
    .darkghost
    .darksecondary
    .ghost

 -small
 -medium
 -large
 -icon-left
 -icon-right
 -fullwidth
 -loading
 */
button {
  border: none;
}
button:focus {
  outline: 0;
}

.btn.-secondary-color {
  background: #ECF8FD;
  box-shadow: 0 2px 0 #CDF0FB;
  color: #403F5D;
}
.btn.-secondary-color:hover, .btn.-secondary-color:focus, .btn.-secondary-color:focus-within {
  background: #CDF0FB;
  box-shadow: 0 2px 0 #B2E4F6;
}
.btn.-sharp-edges {
  border-radius: 0 !important;
}
.btn.-no-text .btn-icon {
  margin: 0 !important;
}
.btn.-stacked {
  margin-bottom: 8px;
}
.btn.-round {
  border-radius: 50%;
  box-shadow: none;
  display: flex;
  height: 50px;
  justify-content: center;
  min-width: 50px;
  width: 50px;
}
.btn.-round i {
  align-self: center;
  color: #FFFFFF;
  font-size: 27px;
}

.btn-slide-menu {
  display: flex;
  flex-direction: row;
  position: relative;
}
.btn-slide-menu .btn {
  position: relative;
}
.btn-slide-menu .btn.primary:hover, .btn-slide-menu .btn.primary:focus, .btn-slide-menu .btn.primary:focus-within, .btn-slide-menu .btn-primary:hover, .btn-slide-menu .btn-primary:focus, .btn-slide-menu .btn-primary:focus-within {
  background: #3FBCE7;
}
.btn-slide-menu .btn.primary .slide-btn:hover, .btn-slide-menu .btn.primary .slide-btn:focus, .btn-slide-menu .btn.primary .slide-btn:focus-within, .btn-slide-menu .btn-primary .slide-btn:hover, .btn-slide-menu .btn-primary .slide-btn:focus, .btn-slide-menu .btn-primary .slide-btn:focus-within {
  background: #2FA1C7;
}
.btn-slide-menu .btn.primary .slide-btn:hover ~ .opens-slide-menu, .btn-slide-menu .btn.primary .slide-btn:focus ~ .opens-slide-menu, .btn-slide-menu .btn.primary .slide-btn:focus-within ~ .opens-slide-menu, .btn-slide-menu .btn-primary .slide-btn:hover ~ .opens-slide-menu, .btn-slide-menu .btn-primary .slide-btn:focus ~ .opens-slide-menu, .btn-slide-menu .btn-primary .slide-btn:focus-within ~ .opens-slide-menu {
  background: #3FBCE7;
}
.btn-slide-menu .btn.primary .opens-slide-menu:hover, .btn-slide-menu .btn.primary .opens-slide-menu:focus, .btn-slide-menu .btn.primary .opens-slide-menu:focus-within, .btn-slide-menu .btn-primary .opens-slide-menu:hover, .btn-slide-menu .btn-primary .opens-slide-menu:focus, .btn-slide-menu .btn-primary .opens-slide-menu:focus-within {
  background: #2FA1C7;
}
.btn-slide-menu .btn.primary .opens-slide-menu:hover ~ .slide-btn, .btn-slide-menu .btn.primary .opens-slide-menu:focus ~ .slide-btn, .btn-slide-menu .btn.primary .opens-slide-menu:focus-within ~ .slide-btn, .btn-slide-menu .btn-primary .opens-slide-menu:hover ~ .slide-btn, .btn-slide-menu .btn-primary .opens-slide-menu:focus ~ .slide-btn, .btn-slide-menu .btn-primary .opens-slide-menu:focus-within ~ .slide-btn {
  background: #3FBCE7;
}
.btn-slide-menu .btn.checkout:hover, .btn-slide-menu .btn.checkout:focus, .btn-slide-menu .btn.checkout:focus-within, .btn-slide-menu .btn-secondary:hover, .btn-slide-menu .btn-secondary:focus, .btn-slide-menu .btn-secondary:focus-within {
  background: #e86b12;
}
.btn-slide-menu .btn.checkout .slide-btn:hover,
.btn-slide-menu .btn.checkout .slide-btn:focus,
.btn-slide-menu .btn.checkout .slide-btn:focus-within, .btn-slide-menu .btn-secondary .slide-btn:hover,
.btn-slide-menu .btn-secondary .slide-btn:focus,
.btn-slide-menu .btn-secondary .slide-btn:focus-within {
  background: #f57113;
}
.btn-slide-menu .btn.checkout .opens-slide-menu:hover,
.btn-slide-menu .btn.checkout .opens-slide-menu:focus,
.btn-slide-menu .btn.checkout .opens-slide-menu:focus-within, .btn-slide-menu .btn-secondary .opens-slide-menu:hover,
.btn-slide-menu .btn-secondary .opens-slide-menu:focus,
.btn-slide-menu .btn-secondary .opens-slide-menu:focus-within {
  background: #f57113;
}
.btn-slide-menu .btn {
  display: flex;
  flex-direction: row;
}
.btn-slide-menu .opens-slide-menu {
  align-items: center;
  display: flex;
}
.btn-slide-menu .slide-menu {
  font-size: 13px;
  margin-bottom: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 100;
}
.btn-slide-menu .slide-menu li {
  background: #E8E8E8;
  border-top: none;
  letter-spacing: 0;
  margin: 0;
  padding: 8px;
  text-align: left;
  text-decoration: none;
}
.btn-slide-menu .slide-menu li i {
  float: left;
  font-size: 15px;
  padding: 5px 2px 0 0;
}
.btn-slide-menu .slide-menu li a {
  color: #403F5D;
  font-weight: normal;
  padding: 0;
}
.btn-slide-menu .slide-menu li:hover, .btn-slide-menu .slide-menu li:focus, .btn-slide-menu .slide-menu li:focus-within {
  background: #C1C1C1;
  cursor: pointer;
}
.btn-slide-menu .slide-menu li:hover.disabled, .btn-slide-menu .slide-menu li:focus.disabled, .btn-slide-menu .slide-menu li:focus-within.disabled {
  cursor: not-allowed;
}
.btn-slide-menu .slide-menu li.disabled {
  pointer-events: none;
}
.btn-slide-menu .slide-menu li.disabled a {
  font-style: italic;
}

.modern-btn {
  display: inline-block;
}
.modern-btn .loading-state .lbl {
  color: #FFFFFF;
  text-transform: capitalize;
}
.modern-btn .default-label._hidden, .modern-btn .loading-label._hidden {
  display: initial !important;
  visibility: hidden;
}

.modern-btn.-loading {
  cursor: wait;
}
.modern-btn.-loading .btn {
  background: #2FA1C7;
  pointer-events: none;
}

.modern-btn .btn {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 36px;
  overflow: hidden;
  padding: 0;
  width: auto;
}

.modern-btn .loading-state {
  align-self: center;
  display: flex;
  justify-content: center;
  padding: 5px 18px;
  position: absolute;
}
.modern-btn .loading-state .lbl {
  line-height: 26px;
}
.modern-btn .loading-state .loading-label {
  margin-left: 30px;
}
.modern-btn .loading-state .loaded-label {
  margin-left: 15px;
  position: absolute;
}
.modern-btn .loading-state .loader-container {
  left: 0;
  padding: inherit;
  position: absolute;
  top: 0;
}
.modern-btn .loading-state .loader-container.-animate-loading {
  display: block;
}
.modern-btn .loading-state .loader-container .loader-with-check {
  display: block;
  height: auto;
  width: 26px;
}
.modern-btn .loading-state .loader-container .loader-with-check .loader-dash, .modern-btn .loading-state .loader-container .loader-with-check .check, .modern-btn .loading-state .loader-container .loader-with-check .loader-error {
  display: none;
}
.modern-btn .loading-state .loader-container.-animate-loading .loader-with-check .loader-dash {
  display: block;
  -webkit-transform-origin: center; /* Chrome, Safari, Opera */
  transform-origin: center;
  animation: spin 1s linear infinite;
  -webkit-animation: spin 1s linear infinite; /* Chrome, Safari, Opera */
}
.modern-btn .loading-state .loader-container.-animate-loaded .loader-with-check .check {
  display: block;
  -webkit-transform-origin: center; /* Chrome, Safari, Opera */
  transform-origin: center;
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: scaleIn 0.15s linear;
  -webkit-animation: scaleIn 0.15s linear; /* Chrome, Safari, Opera */
}
.modern-btn .loading-state .loader-container.-animate-failed .loader-with-check .loader-error {
  display: block;
  -webkit-transform-origin: center; /* Chrome, Safari, Opera */
  transform-origin: center;
  -webkit-transform-box: fill-box; /* Chrome, Safari, Opera */
  transform-box: fill-box;
  animation: scaleIn 0.15s linear;
  -webkit-animation: scaleIn 0.15s linear; /* Chrome, Safari, Opera */
}

@media screen and (max-width: 430px) {
  .sso-connect-option.-google {
    flex-wrap: wrap;
  }
  .sso-connect-option.-google .google-connect-button-container {
    margin: 0 0 0 auto;
  }
}
.input-btn {
  align-items: center;
  border: none;
  display: flex;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  justify-content: center;
  line-height: inherit;
  letter-spacing: inherit;
  margin: 0;
  padding: 4px;
  width: 100%;
}
/*!*******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/text/text.module.scss ***!
  \*******************************************************************************************************************************/
.D9AxH6xoV_unw9dLLuMe {
  text-decoration: underline;
}

.laqRrR8oGXCUQd3ONUv8 {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}
/*!**************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/modal/modal.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 */
/*
Animation styles and keyframes
*/
.animated {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.-fill-mode-backwards {
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
.animated.-fill-mode-forwards {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.animated.v-fast {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}

.animated.fast {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

.animated.medium-pace {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

.animated.slow {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.animated.v-slow {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
}

.animated.v-v-slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.v-v-v-slow {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
}

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

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

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

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

.publish-icon-looped-animation .pmw-icon {
  overflow: hidden;
}
.publish-icon-looped-animation .pmw-icon::before {
  animation: publishIconArrowAnimationLooped 2500ms cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
  display: block;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes publishIconArrowAnimation {
  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 publishIconArrowAnimationLooped {
  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);
  }
}
.-origin-left {
  -webkit-transform-origin: left; /* Chrome, Safari, Opera */
  transform-origin: left;
}

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

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

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

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

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

.onHoverEnlarge {
  opacity: 1;
  -webkit-transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.onHoverEnlarge: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);
}

.hover-transition-all {
  -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 flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

@-webkit-keyframes fadeInAnimation {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@keyframes fadeInAnimation {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@-webkit-keyframes jelloAnimation {
  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 jelloAnimation {
  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 rotateAnimation {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rotateAnimation {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes shrinkAnimation {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@keyframes shrinkAnimation {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@-webkit-keyframes panRightAnimation {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@keyframes panRightAnimation {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@-webkit-keyframes panLeftAnimation {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@keyframes panLeftAnimation {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes panUpAnimation {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@keyframes panUpAnimation {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes panDownAnimation {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@keyframes panDownAnimation {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@-webkit-keyframes peekDownAnimation {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@keyframes peekDownAnimation {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@-webkit-keyframes peekUpAnimation {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@keyframes peekUpAnimation {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes peekLeftAnimation {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@keyframes peekLeftAnimation {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes peekRightAnimation {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@keyframes peekRightAnimation {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@-webkit-keyframes popAnimation {
  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 popAnimation {
  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 tumbleAnimation {
  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 tumbleAnimation {
  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 wipeDownAnimation {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes wipeDownAnimation {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes wipeUpAnimation {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes wipeUpAnimation {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes wipeLeftAnimation {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes wipeLeftAnimation {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes wipeRightAnimation {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes wipeRightAnimation {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes blockAnimation {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@keyframes blockAnimation {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@-webkit-keyframes bounceInDownAnimation {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@keyframes bounceInDownAnimation {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

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

@keyframes backdropFadeIn {
  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 backdropFadeIn {
  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 backdropFadeOut {
  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 backdropFadeOut {
  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 fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

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

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

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

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

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

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

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

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

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

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

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

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

.fast-transition {
  transition-duration: 0.4s;
}

.very-fast-transition {
  transition-duration: 0.2s;
}

.super-fast-transition {
  transition-duration: 0.1s;
}

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

@-webkit-keyframes pulse {
  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 pulse {
  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);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes zoomOut {
  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 zoomOut {
  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 zoomOut {
  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;
  }
}
.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomIn {
  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 zoomIn {
  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 zoomIn {
  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);
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

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

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

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

@keyframes animateTTablet {
  0% {
    bottom: -60px;
    right: -30px;
  }
  100% {
    bottom: -30px;
    right: 0;
  }
}
/* Bouncing Loading Box */
@keyframes bouncing-box {
  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 bouncing-box {
  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 shadow {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}
@-webkit-keyframes shadow {
  0%, 100% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1);
  }
}
.box-loading {
  bottom: 0;
  height: 75px;
  left: 0;
  margin: auto;
  position: relative;
  right: 0;
  top: 0;
  width: 49px;
}

.box-loading:before {
  -webkit-animation: shadow 0.58s linear infinite;
  animation: shadow 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;
}

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

.box-loading.-white:after {
  background: #fff;
}

/* End of Bouncing Loading Box */
@-webkit-keyframes gradient-change {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-moz-keyframes gradient-change {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes gradient-change {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-webkit-keyframes shake {
  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 shake {
  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);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

.loading-gear-svg {
  -webkit-transform-box: fill-box;
  transform-box: fill-box;
  transform-origin: center;
}

.gear-clockwise-animation {
  -webkit-animation: spin 2.5s linear infinite;
  animation: spin 2.5s linear infinite;
}

.gear-c-clockwise-animation {
  -webkit-animation: spin-negative 2.5s linear infinite;
  animation: spin-negative 2.5s linear infinite;
}

.gear-c-clockwise-fast-animation {
  -webkit-animation: spin-negative 2s linear infinite;
  animation: spin-negative 2s linear infinite;
}

.infinite-spin-with-centering {
  -webkit-animation: spinWithCenter 1.5s linear infinite;
  animation: spinWithCenter 1.5s linear infinite;
}

@keyframes spinWithCenter {
  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 spinWithCenter {
  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 spin {
  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 spin {
  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 spin {
  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 spin-negative {
  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 spin-negative {
  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 spin-negative {
  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 jackInTheBox {
  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 jackInTheBox {
  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);
  }
}
.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

@-webkit-keyframes bounceOut {
  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 bounceOut {
  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);
  }
}
.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceIn {
  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 bounceIn {
  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);
  }
}
.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes flipInY {
  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 flipInY {
  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;
  }
}
.flipInY {
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  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 doubleBlinkEyes {
  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 flipOutY {
  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;
  }
}
.flipOutY {
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

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

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

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

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

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

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

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

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

.slideIn.-from-left {
  animation: slideInFromLeft 0.25s linear;
  -webkit-animation: slideInFromLeft 0.25s linear; /* Chrome, Safari, Opera */
}
.slideIn.-from-right {
  animation: slideInFromRight 0.25s linear;
  -webkit-animation: slideInFromRight 0.25s linear; /* Chrome, Safari, Opera */
}
.slideIn.-from-top {
  animation: slideInFromTop 0.15s linear;
  -webkit-animation: slideInFromTop 0.15s linear; /* Chrome, Safari, Opera */
}
.slideIn.-from-bottom {
  animation: slideInFromBottom 0.15s linear;
  -webkit-animation: slideInFromBottom 0.15s linear; /* Chrome, Safari, Opera */
}
.slideIn.-from-left-slow {
  animation: slideInFromLeft 0.4s linear;
  -webkit-animation: slideInFromLeft 0.4s linear; /* Chrome, Safari, Opera */
}
.slideIn.-from-right-slow {
  animation: slideInFromRight 0.4s linear;
  -webkit-animation: slideInFromRight 0.4s linear; /* Chrome, Safari, Opera */
}

.slideOut.-to-left {
  animation: slideOutToLeft 0.25s linear;
  -webkit-animation: slideOutToLeft 0.25s linear; /* Chrome, Safari, Opera */
}
.slideOut.-to-right {
  animation: slideOutToRight 0.25s linear;
  -webkit-animation: slideOutToRight 0.25s linear; /* Chrome, Safari, Opera */
}
.slideOut.-to-bottom {
  animation: slideOutToBottom 0.15s linear;
  -webkit-animation: slideOutToBottom 0.15s linear; /* Chrome, Safari, Opera */
}
.slideOut.-to-top {
  animation: slideOutToTop 0.15s linear;
  -webkit-animation: slideOutToTop 0.15s linear; /* Chrome, Safari, Opera */
}
.slideOut.-to-left-slow {
  animation: slideOutToLeft 0.4s linear;
  -webkit-animation: slideOutToLeft 0.4s linear; /* Chrome, Safari, Opera */
}
.slideOut.-to-right-slow {
  animation: slideOutToRight 0.4s linear;
  -webkit-animation: slideOutToRight 0.4s linear; /* Chrome, Safari, Opera */
}

@-webkit-keyframes bob {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}
@keyframes bob {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes reverseBob {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes reverseBob {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes slideInFromRight {
  0% {
    transform: translateX(150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@-webkit-keyframes slideInFromLeft {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes slideInFromTop {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes slideInFromTop {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes slideInFromBottom {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes slideInFromBottom {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes slideOutToRight {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@-webkit-keyframes slideOutToRight {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@keyframes slideOutToLeft {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@-webkit-keyframes slideOutToLeft {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@keyframes slideOutToBottom {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@-webkit-keyframes slideOutToBottom {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@keyframes slideOutToTop {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@-webkit-keyframes slideOutToTop {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@keyframes semiSpin {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@-webkit-keyframes semiSpin {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@keyframes semi-fade {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0.5;
  }
}
@keyframes fade-1 {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0;
  }
}
@keyframes fade-2 {
  0%, 19%, 40%, 60%, 80%, 100% {
    opacity: 0;
  }
  20%, 39% {
    opacity: 1;
  }
}
@keyframes fade-3 {
  0%, 20%, 39%, 60%, 80%, 100% {
    opacity: 0;
  }
  40%, 59% {
    opacity: 1;
  }
}
@keyframes fade-4 {
  0%, 20%, 40%, 59%, 80%, 100% {
    opacity: 0;
  }
  60%, 79% {
    opacity: 1;
  }
}
@keyframes fade-5 {
  0%, 20%, 40%, 60%, 79%, 100% {
    opacity: 0;
  }
  80%, 99% {
    opacity: 1;
  }
}
@keyframes flash-opacity {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@-webkit-keyframes flash-opacity {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@keyframes scaleIn {
  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 scaleIn {
  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 breathing {
  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 breathing {
  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 expand-down-up {
  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 move-down-up-bounce {
  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);
  }
}
.modal, .modal-v2, .modal-popup {
  backdrop-filter: blur(4px) opacity(0);
  -webkit-backdrop-filter: blur(4px) opacity(0);
  -webkit-transition: backdrop-filter 300ms ease-in-out, -webkit-backdrop-filter 300ms ease-in-out;
  transition: backdrop-filter 300ms ease-in-out, -webkit-backdrop-filter 300ms ease-in-out;
}
.modal.modal-open, .modal.-open, .modal.open, .modal-v2.modal-open, .modal-v2.-open, .modal-v2.open, .modal-popup.modal-open, .modal-popup.-open, .modal-popup.open {
  opacity: 1;
  top: 0;
  visibility: visible;
  animation-name: backdropFadeIn;
  animation-duration: 300ms;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.modal.modal-closing, .modal.-closing, .modal-v2.modal-closing, .modal-v2.-closing, .modal-popup.modal-closing, .modal-popup.-closing {
  animation-name: backdropFadeOut;
  animation-duration: 300ms;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.animate-modal-dialog-open {
  -webkit-animation-name: modalDialogOpen;
  animation-name: modalDialogOpen;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-duration: 300ms;
}
.animate-modal-dialog-open.-reverse {
  -webkit-animation-name: modalDialogOpenReverse;
  animation-name: modalDialogOpenReverse;
}

.animate-modal-dialog-close {
  -webkit-animation-name: modalDialogClose;
  animation-name: modalDialogClose;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-duration: 300ms;
}
.animate-modal-dialog-close.-reverse {
  -webkit-animation-name: modalDialogCloseReverse;
  animation-name: modalDialogCloseReverse;
}

@keyframes modalDialogOpen {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes modalDialogOpen {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes modalDialogClose {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes modalDialogClose {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes modalDialogOpenReverse {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes modalDialogOpenReverse {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes modalDialogCloseReverse {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes modalDialogCloseReverse {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@media screen and (max-width: 781px) {
  @keyframes modalDialogOpen {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @-webkit-keyframes modalDialogOpen {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @-webkit-keyframes modalDialogClose {
    0% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  }
  @keyframes modalDialogClose {
    0% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  }
}
.ReactModal__Overlay {
  opacity: 0;
  transition: opacity 2000ms ease-in-out;
  -webkit-transition: backdrop-filter 300ms ease-in-out, -webkit-backdrop-filter 300ms ease-in-out;
  transition: backdrop-filter 300ms ease-in-out, -webkit-backdrop-filter 300ms ease-in-out;
  backdrop-filter: blur(4px) opacity(0);
  -webkit-backdrop-filter: blur(4px) opacity(0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ReactModal__Overlay--after-open {
  opacity: 1;
}

.ReactModal__Content {
  border-radius: 4px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
  color: #757589;
  max-height: calc(100% - 80px);
  max-width: calc(100% - 80px);
}

.ReactModal__Content--after-open {
  -webkit-animation-name: modalDialogOpen;
  animation-name: modalDialogOpen;
  animation-timing-function: ease-in-out;
  animation-fill-mode: unset;
  animation-duration: 300ms;
  outline: none;
}
.ReactModal__Content--after-open.-reverse {
  -webkit-animation-name: modalDialogOpenReverse;
  animation-name: modalDialogOpenReverse;
}

.ReactModal__Content--before-close {
  -webkit-animation-name: modalDialogClose;
  animation-name: modalDialogClose;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-duration: 300ms;
}
.ReactModal__Content--before-close.-reverse {
  -webkit-animation-name: modalDialogCloseReverse;
  animation-name: modalDialogCloseReverse;
}

.ReactModal__Body--open,
.ReactModal__Html--open {
  overflow: hidden;
}

.ReactModalPortal__SmallScreen .ReactModal__Overlay {
  justify-content: end;
}
.ReactModalPortal__SmallScreen .ReactModal__Content {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  max-height: calc(100% - 40px);
  max-width: 100%;
}
.ReactModalPortal__SmallScreen .ReactModal__Content.ReactModalPortal__NonBlockingSmallScreen {
  max-height: 100%;
}
/*!**********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/modal-container/modal-container.scss ***!
  \**********************************************************************************************************************************************/

/*!*******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/color-fill/color-fill.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.mYW7U1gnZF0gLlPf2iDT {
  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 */
.nhvSubUwAFDwknr2wa7E {
  border: 1px solid #CBCBD0;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  outline: 4px solid transparent;
  transition: outline-color 200ms ease-in-out;
}
.nhvSubUwAFDwknr2wa7E.M_6GceoOKpTboTTy9lzq {
  cursor: not-allowed;
}
.nhvSubUwAFDwknr2wa7E.a5lcrJXQl8O__FwK2McX {
  outline: #B2E4F6 solid 4px;
}
.nhvSubUwAFDwknr2wa7E:not(.hUJF7CZwCtKVHlMrRQqq):hover, .nhvSubUwAFDwknr2wa7E:not(.hUJF7CZwCtKVHlMrRQqq):focus, .nhvSubUwAFDwknr2wa7E:not(.hUJF7CZwCtKVHlMrRQqq):focus-within, .nhvSubUwAFDwknr2wa7E:not(.M_6GceoOKpTboTTy9lzq):hover, .nhvSubUwAFDwknr2wa7E:not(.M_6GceoOKpTboTTy9lzq):focus, .nhvSubUwAFDwknr2wa7E:not(.M_6GceoOKpTboTTy9lzq):focus-within {
  outline: #B2E4F6 solid 4px;
}
/*!*****************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/error-boundary-fallback-container/error-boundary-fallback-container.module.scss ***!
  \*****************************************************************************************************************************************************************************************/
.ni79uaRjKX0jUvTUh1L9 {
  text-align: center;
}
/*!*********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/modal/modal.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.juSrCbFNEM0Pg7eYdSDi {
  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
*/
.d9mJDqZJCZlaxV0D7rEi {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.d9mJDqZJCZlaxV0D7rEi.kPeNUndd7Ay6Ixs4kndG {
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
.d9mJDqZJCZlaxV0D7rEi._wkSX_I_6sevxUPQXzL6 {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.d9mJDqZJCZlaxV0D7rEi.DWp14N66Be85cBUElvIy {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}

.d9mJDqZJCZlaxV0D7rEi.D1KudtupHzGUqXyLxOVr {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

.d9mJDqZJCZlaxV0D7rEi.zcqMbhCKGb8iwDTBNafO {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

.d9mJDqZJCZlaxV0D7rEi.X0vvMfG4iB2Q5dSH58BI {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.d9mJDqZJCZlaxV0D7rEi.HVeZKZMFQcNJhah5TSuk {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
}

.d9mJDqZJCZlaxV0D7rEi.PHsjR8jxH5MHrteslv7h {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.d9mJDqZJCZlaxV0D7rEi.uogdvgXhPz0jQsGprXOL {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
}

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

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

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

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

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

@keyframes CqtXFfBiarQYn9IdSdv4 {
  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 ZQS0P95_fmUqekZTrN6E {
  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);
  }
}
.dIXYS8t21BaEJAbcIadx {
  -webkit-transform-origin: left; /* Chrome, Safari, Opera */
  transform-origin: left;
}

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

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

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

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

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

.UtKsnm4gcFNtZCYjoY4P {
  opacity: 1;
  -webkit-transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.UtKsnm4gcFNtZCYjoY4P: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);
}

.tvd_KxOArvJQ3RH9a1T8 {
  -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 L27iotZuEvmZc5ywRD0L {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes L27iotZuEvmZc5ywRD0L {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.L27iotZuEvmZc5ywRD0L {
  -webkit-animation-name: L27iotZuEvmZc5ywRD0L;
  animation-name: L27iotZuEvmZc5ywRD0L;
}

@-webkit-keyframes gQby5SzOfp4Iw1aRcrZw {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@keyframes gQby5SzOfp4Iw1aRcrZw {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@-webkit-keyframes OzzQ0PMEhRhXB2xFNwew {
  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 OzzQ0PMEhRhXB2xFNwew {
  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 q4lzQwtbZPYSPcPJz6oF {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes q4lzQwtbZPYSPcPJz6oF {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes Jca78MifcvhuZStBLOpS {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@keyframes Jca78MifcvhuZStBLOpS {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@-webkit-keyframes y3pXiCRqtw6VdsEQx0Aw {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@keyframes y3pXiCRqtw6VdsEQx0Aw {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@-webkit-keyframes KIpmvgjDH3RY1jotV18Z {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@keyframes KIpmvgjDH3RY1jotV18Z {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes aLJ38Si_Syjj7WxLtcbQ {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@keyframes aLJ38Si_Syjj7WxLtcbQ {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes HM191WbQXUkzH5Ndxaob {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@keyframes HM191WbQXUkzH5Ndxaob {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@-webkit-keyframes zYKhtEKHeVeed1bqmEOA {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@keyframes zYKhtEKHeVeed1bqmEOA {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@-webkit-keyframes jvzoH7OSPKAIvcbziTpw {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@keyframes jvzoH7OSPKAIvcbziTpw {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes SIWtSg4LqjwKa515idLw {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@keyframes SIWtSg4LqjwKa515idLw {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes GDlHBCC9K1wgl7Jsxnmr {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@keyframes GDlHBCC9K1wgl7Jsxnmr {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@-webkit-keyframes UqDAZID8UFqSDX1XDF9E {
  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 UqDAZID8UFqSDX1XDF9E {
  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 XPU0v1nFYk0Ttxh2Hd07 {
  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 XPU0v1nFYk0Ttxh2Hd07 {
  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 XeVuUBjlaAzQqIL54Bmw {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes XeVuUBjlaAzQqIL54Bmw {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes FYfLXfw060wef2_p0aq7 {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes FYfLXfw060wef2_p0aq7 {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes eKk3qRfLtXdIwZQ_75GF {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes eKk3qRfLtXdIwZQ_75GF {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes iIrcUgfE1CCE2tho1VdM {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes iIrcUgfE1CCE2tho1VdM {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes Zxo3Vxot88JDCxIueJh8 {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@keyframes Zxo3Vxot88JDCxIueJh8 {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@-webkit-keyframes u0K3b1OF952xl9Obs0xC {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@keyframes u0K3b1OF952xl9Obs0xC {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@-webkit-keyframes FZKHV9XNsBi1LGxaiTgY {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes FZKHV9XNsBi1LGxaiTgY {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.FZKHV9XNsBi1LGxaiTgY {
  -webkit-animation-name: FZKHV9XNsBi1LGxaiTgY;
  animation-name: FZKHV9XNsBi1LGxaiTgY;
}

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

@keyframes QYb7vDmcO1WjAadI2VRY {
  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 QYb7vDmcO1WjAadI2VRY {
  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 kant7cVtPcv6w4fFo1Dg {
  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 kant7cVtPcv6w4fFo1Dg {
  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 ZibS2Gxb1t7uMfiFd4ty {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes ZibS2Gxb1t7uMfiFd4ty {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.ZibS2Gxb1t7uMfiFd4ty {
  -webkit-animation-name: ZibS2Gxb1t7uMfiFd4ty;
  animation-name: ZibS2Gxb1t7uMfiFd4ty;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

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

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

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

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

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

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

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

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

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

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

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

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

.jnXmXXoSxHeYtq03LfGw {
  transition-duration: 0.4s;
}

.LAvq2UyXh1T5CD6JeLgS {
  transition-duration: 0.2s;
}

.FYKsMu7nT0GuT61CWTyA {
  transition-duration: 0.1s;
}

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

@-webkit-keyframes aqYO9wo2m7ovm7xKlfQA {
  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 aqYO9wo2m7ovm7xKlfQA {
  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);
  }
}
.aqYO9wo2m7ovm7xKlfQA {
  -webkit-animation-name: aqYO9wo2m7ovm7xKlfQA;
  animation-name: aqYO9wo2m7ovm7xKlfQA;
}

@-webkit-keyframes XX1Aqz2E3p4ZV8RBf32p {
  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 XX1Aqz2E3p4ZV8RBf32p {
  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 XX1Aqz2E3p4ZV8RBf32p {
  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;
  }
}
.XX1Aqz2E3p4ZV8RBf32p {
  -webkit-animation-name: XX1Aqz2E3p4ZV8RBf32p;
  animation-name: XX1Aqz2E3p4ZV8RBf32p;
}

@-webkit-keyframes KYKK_Ojpf1AU_qp06oL1 {
  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 KYKK_Ojpf1AU_qp06oL1 {
  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 KYKK_Ojpf1AU_qp06oL1 {
  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);
  }
}
.KYKK_Ojpf1AU_qp06oL1 {
  -webkit-animation-name: KYKK_Ojpf1AU_qp06oL1;
  animation-name: KYKK_Ojpf1AU_qp06oL1;
}

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

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

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

@keyframes PGpvx5VI752KHDrp9qTA {
  0% {
    bottom: -60px;
    right: -30px;
  }
  100% {
    bottom: -30px;
    right: 0;
  }
}
/* Bouncing Loading Box */
@keyframes hAgAAzhB0piJS8KVQIaP {
  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 hAgAAzhB0piJS8KVQIaP {
  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 MbSOG6Y2NFkEWZdoU8qg {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}
@-webkit-keyframes MbSOG6Y2NFkEWZdoU8qg {
  0%, 100% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1);
  }
}
.wuygZiz1cHLBPY8OlrgV {
  bottom: 0;
  height: 75px;
  left: 0;
  margin: auto;
  position: relative;
  right: 0;
  top: 0;
  width: 49px;
}

.wuygZiz1cHLBPY8OlrgV:before {
  -webkit-animation: MbSOG6Y2NFkEWZdoU8qg 0.58s linear infinite;
  animation: MbSOG6Y2NFkEWZdoU8qg 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;
}

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

.wuygZiz1cHLBPY8OlrgV.NwCunv4tsEAVpxpT08H5:after {
  background: #fff;
}

/* End of Bouncing Loading Box */
@-webkit-keyframes H_yIQwxZu56BkHjpQDDu {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-moz-keyframes H_yIQwxZu56BkHjpQDDu {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes H_yIQwxZu56BkHjpQDDu {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-webkit-keyframes K7NtlXIrRcLJ7Z3GSTmB {
  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 K7NtlXIrRcLJ7Z3GSTmB {
  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);
  }
}
.K7NtlXIrRcLJ7Z3GSTmB {
  -webkit-animation-name: K7NtlXIrRcLJ7Z3GSTmB;
  animation-name: K7NtlXIrRcLJ7Z3GSTmB;
}

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

.IGYFNiWyt1zaeNgR_rA2 {
  -webkit-animation: EncFpI3aRFQkSN6crjKg 2.5s linear infinite;
  animation: EncFpI3aRFQkSN6crjKg 2.5s linear infinite;
}

.DRy4mdEatQmIC0RGTckG {
  -webkit-animation: gyy2dXE9YS0TPu0Qrfo4 2.5s linear infinite;
  animation: gyy2dXE9YS0TPu0Qrfo4 2.5s linear infinite;
}

.BEr8ooaIiLTHyw_SaFBz {
  -webkit-animation: gyy2dXE9YS0TPu0Qrfo4 2s linear infinite;
  animation: gyy2dXE9YS0TPu0Qrfo4 2s linear infinite;
}

.adMTjSc5wtlzCg4JPjbd {
  -webkit-animation: eCeWTLuzl0naiVBQGdNV 1.5s linear infinite;
  animation: eCeWTLuzl0naiVBQGdNV 1.5s linear infinite;
}

@keyframes eCeWTLuzl0naiVBQGdNV {
  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 eCeWTLuzl0naiVBQGdNV {
  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 EncFpI3aRFQkSN6crjKg {
  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 EncFpI3aRFQkSN6crjKg {
  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 EncFpI3aRFQkSN6crjKg {
  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 gyy2dXE9YS0TPu0Qrfo4 {
  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 gyy2dXE9YS0TPu0Qrfo4 {
  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 gyy2dXE9YS0TPu0Qrfo4 {
  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 uTgQ_M07itBlsnE8F0tJ {
  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 uTgQ_M07itBlsnE8F0tJ {
  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);
  }
}
.uTgQ_M07itBlsnE8F0tJ {
  -webkit-animation-name: uTgQ_M07itBlsnE8F0tJ;
  animation-name: uTgQ_M07itBlsnE8F0tJ;
}

@-webkit-keyframes ET4efXnM3NJ8_EdY8nAB {
  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 ET4efXnM3NJ8_EdY8nAB {
  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);
  }
}
.ET4efXnM3NJ8_EdY8nAB {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: ET4efXnM3NJ8_EdY8nAB;
  animation-name: ET4efXnM3NJ8_EdY8nAB;
}

@-webkit-keyframes rmelNZqGVgNGW_wTWpgR {
  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 rmelNZqGVgNGW_wTWpgR {
  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);
  }
}
.rmelNZqGVgNGW_wTWpgR {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: rmelNZqGVgNGW_wTWpgR;
  animation-name: rmelNZqGVgNGW_wTWpgR;
}

@-webkit-keyframes MAn0f7leQB6rJO1rT5sk {
  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 MAn0f7leQB6rJO1rT5sk {
  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;
  }
}
.MAn0f7leQB6rJO1rT5sk {
  -webkit-animation-name: MAn0f7leQB6rJO1rT5sk;
  animation-name: MAn0f7leQB6rJO1rT5sk;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes DL42NqChvjGHX8aL_s0N {
  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 V0r1KISjUN64x5rN_tZU {
  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 DL42NqChvjGHX8aL_s0N {
  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;
  }
}
.DL42NqChvjGHX8aL_s0N {
  -webkit-animation-name: DL42NqChvjGHX8aL_s0N;
  animation-name: DL42NqChvjGHX8aL_s0N;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

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

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

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

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

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

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

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

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

.icJWBsG0XcgdBoMA6hjA.qaLr0l744M1OucVRijdk {
  animation: lqyjCNbIWAhuPj7R4xBJ 0.25s linear;
  -webkit-animation: lqyjCNbIWAhuPj7R4xBJ 0.25s linear; /* Chrome, Safari, Opera */
}
.icJWBsG0XcgdBoMA6hjA.Uscu05QNptxxzkRC5Cwe {
  animation: STHOdDz2v8ePp8kZxDeN 0.25s linear;
  -webkit-animation: STHOdDz2v8ePp8kZxDeN 0.25s linear; /* Chrome, Safari, Opera */
}
.icJWBsG0XcgdBoMA6hjA.e8bZPZqcM_2BjUQHJcDv {
  animation: m7jmlMK2zzI1mCVJmwS7 0.15s linear;
  -webkit-animation: m7jmlMK2zzI1mCVJmwS7 0.15s linear; /* Chrome, Safari, Opera */
}
.icJWBsG0XcgdBoMA6hjA.vBW86qJVog1f8XlJ3uWQ {
  animation: RQWrzBauTMaA_qxVHZrW 0.15s linear;
  -webkit-animation: RQWrzBauTMaA_qxVHZrW 0.15s linear; /* Chrome, Safari, Opera */
}
.icJWBsG0XcgdBoMA6hjA.LSHQsOIbW2UBUIzcF0es {
  animation: lqyjCNbIWAhuPj7R4xBJ 0.4s linear;
  -webkit-animation: lqyjCNbIWAhuPj7R4xBJ 0.4s linear; /* Chrome, Safari, Opera */
}
.icJWBsG0XcgdBoMA6hjA.Hjs3eBgF0smIdAooNrgB {
  animation: STHOdDz2v8ePp8kZxDeN 0.4s linear;
  -webkit-animation: STHOdDz2v8ePp8kZxDeN 0.4s linear; /* Chrome, Safari, Opera */
}

.ABbxMCVTBimESQaHk4CP.lhBMI9v87zFJScsSodAT {
  animation: vDPaKvaVijKmTMRw2UlK 0.25s linear;
  -webkit-animation: vDPaKvaVijKmTMRw2UlK 0.25s linear; /* Chrome, Safari, Opera */
}
.ABbxMCVTBimESQaHk4CP.LmT_xhcBl2aFw3TSA6sg {
  animation: SVMtR0HaQQCKuSEZAvK2 0.25s linear;
  -webkit-animation: SVMtR0HaQQCKuSEZAvK2 0.25s linear; /* Chrome, Safari, Opera */
}
.ABbxMCVTBimESQaHk4CP.vNF1k7U3orqbkok2tph7 {
  animation: MqItMfDW58TXXfXwSK9Q 0.15s linear;
  -webkit-animation: MqItMfDW58TXXfXwSK9Q 0.15s linear; /* Chrome, Safari, Opera */
}
.ABbxMCVTBimESQaHk4CP.Ls3OsrTQOdPcRHzYXPiS {
  animation: n9rDOYvoDhWUMoQi8Xxf 0.15s linear;
  -webkit-animation: n9rDOYvoDhWUMoQi8Xxf 0.15s linear; /* Chrome, Safari, Opera */
}
.ABbxMCVTBimESQaHk4CP.QuazpcIf8fsa3EfML9Bg {
  animation: vDPaKvaVijKmTMRw2UlK 0.4s linear;
  -webkit-animation: vDPaKvaVijKmTMRw2UlK 0.4s linear; /* Chrome, Safari, Opera */
}
.ABbxMCVTBimESQaHk4CP.kHnsnc_zQHYRECpLYoLE {
  animation: SVMtR0HaQQCKuSEZAvK2 0.4s linear;
  -webkit-animation: SVMtR0HaQQCKuSEZAvK2 0.4s linear; /* Chrome, Safari, Opera */
}

@-webkit-keyframes VzHU9CodNAyOAop8TCGF {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}
@keyframes VzHU9CodNAyOAop8TCGF {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes sAARraRI2M_0xoSchgyx {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes sAARraRI2M_0xoSchgyx {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes STHOdDz2v8ePp8kZxDeN {
  0% {
    transform: translateX(150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes lqyjCNbIWAhuPj7R4xBJ {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@-webkit-keyframes lqyjCNbIWAhuPj7R4xBJ {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes m7jmlMK2zzI1mCVJmwS7 {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes m7jmlMK2zzI1mCVJmwS7 {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes RQWrzBauTMaA_qxVHZrW {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes RQWrzBauTMaA_qxVHZrW {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes SVMtR0HaQQCKuSEZAvK2 {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@-webkit-keyframes SVMtR0HaQQCKuSEZAvK2 {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@keyframes vDPaKvaVijKmTMRw2UlK {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@-webkit-keyframes vDPaKvaVijKmTMRw2UlK {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@keyframes MqItMfDW58TXXfXwSK9Q {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@-webkit-keyframes MqItMfDW58TXXfXwSK9Q {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@keyframes n9rDOYvoDhWUMoQi8Xxf {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@-webkit-keyframes n9rDOYvoDhWUMoQi8Xxf {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@keyframes wHLXtnedECvJaLwsTGAd {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@-webkit-keyframes wHLXtnedECvJaLwsTGAd {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@keyframes RkBfSgziuNMwgcX269GM {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0.5;
  }
}
@keyframes eWtm94RaV19RW5xbnIkq {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0;
  }
}
@keyframes VmkYntkPoK9bCH4b95mP {
  0%, 19%, 40%, 60%, 80%, 100% {
    opacity: 0;
  }
  20%, 39% {
    opacity: 1;
  }
}
@keyframes TxUvZ0agi34kcJQ1Vikx {
  0%, 20%, 39%, 60%, 80%, 100% {
    opacity: 0;
  }
  40%, 59% {
    opacity: 1;
  }
}
@keyframes sbrcsXl83p0rw5QMljBz {
  0%, 20%, 40%, 59%, 80%, 100% {
    opacity: 0;
  }
  60%, 79% {
    opacity: 1;
  }
}
@keyframes VwgQacRi5Zr9HKpYlCbV {
  0%, 20%, 40%, 60%, 79%, 100% {
    opacity: 0;
  }
  80%, 99% {
    opacity: 1;
  }
}
@keyframes Ikm_jqqDGowC5sGKNQXl {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@-webkit-keyframes Ikm_jqqDGowC5sGKNQXl {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@keyframes vJ1enJOpnc86cEMNf8_E {
  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 vJ1enJOpnc86cEMNf8_E {
  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 _05sqVurOZjSL6nyl7il {
  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 _05sqVurOZjSL6nyl7il {
  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 IZIUqKRwT14sSfDCKChd {
  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 jIGBkSSirlCV9V9ykcan {
  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);
  }
}
.u3A6Yqj30AwOyLW81vGD, .oOLOsGhfbsfjyIh8U2d3, .ieLvd63F4ejtGGgsF4qQ {
  backdrop-filter: blur(4px) opacity(0);
  -webkit-backdrop-filter: blur(4px) opacity(0);
  -webkit-transition: backdrop-filter 300ms ease-in-out, -webkit-backdrop-filter 300ms ease-in-out;
  transition: backdrop-filter 300ms ease-in-out, -webkit-backdrop-filter 300ms ease-in-out;
}
.u3A6Yqj30AwOyLW81vGD.ZLgwQjtBb_3ENWtBuG80, .u3A6Yqj30AwOyLW81vGD.L9fNdcnb5DxUyK7dFXzO, .u3A6Yqj30AwOyLW81vGD.rNAxy51_jfzSxN8pm6RS, .oOLOsGhfbsfjyIh8U2d3.ZLgwQjtBb_3ENWtBuG80, .oOLOsGhfbsfjyIh8U2d3.L9fNdcnb5DxUyK7dFXzO, .oOLOsGhfbsfjyIh8U2d3.rNAxy51_jfzSxN8pm6RS, .ieLvd63F4ejtGGgsF4qQ.ZLgwQjtBb_3ENWtBuG80, .ieLvd63F4ejtGGgsF4qQ.L9fNdcnb5DxUyK7dFXzO, .ieLvd63F4ejtGGgsF4qQ.rNAxy51_jfzSxN8pm6RS {
  opacity: 1;
  top: 0;
  visibility: visible;
  animation-name: QYb7vDmcO1WjAadI2VRY;
  animation-duration: 300ms;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.u3A6Yqj30AwOyLW81vGD.FDww5uDr1hgy1Pafgf1M, .u3A6Yqj30AwOyLW81vGD.OXZiF0_zZyl8b0n_QUhd, .oOLOsGhfbsfjyIh8U2d3.FDww5uDr1hgy1Pafgf1M, .oOLOsGhfbsfjyIh8U2d3.OXZiF0_zZyl8b0n_QUhd, .ieLvd63F4ejtGGgsF4qQ.FDww5uDr1hgy1Pafgf1M, .ieLvd63F4ejtGGgsF4qQ.OXZiF0_zZyl8b0n_QUhd {
  animation-name: kant7cVtPcv6w4fFo1Dg;
  animation-duration: 300ms;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.D0xCVd1hVuctt6Bse67d {
  -webkit-animation-name: NRbimfMKNfTnyFT2a61F;
  animation-name: NRbimfMKNfTnyFT2a61F;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-duration: 300ms;
}
.D0xCVd1hVuctt6Bse67d.rLBy3vBSgoyfvXx0kKHC {
  -webkit-animation-name: _JmEjyhi5rkPoYWH6fWM;
  animation-name: _JmEjyhi5rkPoYWH6fWM;
}

.Y3vn1dJzhSJRmV0UkhcQ {
  -webkit-animation-name: pWOQ2JDH1Iux_YinXmgm;
  animation-name: pWOQ2JDH1Iux_YinXmgm;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-duration: 300ms;
}
.Y3vn1dJzhSJRmV0UkhcQ.rLBy3vBSgoyfvXx0kKHC {
  -webkit-animation-name: ZwDfhphRmdQSvntINePk;
  animation-name: ZwDfhphRmdQSvntINePk;
}

@keyframes NRbimfMKNfTnyFT2a61F {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes NRbimfMKNfTnyFT2a61F {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes pWOQ2JDH1Iux_YinXmgm {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes pWOQ2JDH1Iux_YinXmgm {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes _JmEjyhi5rkPoYWH6fWM {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes _JmEjyhi5rkPoYWH6fWM {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes ZwDfhphRmdQSvntINePk {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes ZwDfhphRmdQSvntINePk {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@media screen and (max-width: 781px) {
  @keyframes NRbimfMKNfTnyFT2a61F {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @-webkit-keyframes NRbimfMKNfTnyFT2a61F {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @-webkit-keyframes pWOQ2JDH1Iux_YinXmgm {
    0% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  }
  @keyframes pWOQ2JDH1Iux_YinXmgm {
    0% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  }
}
.dggmNbFjQ4qtfzbUkTx8 {
  opacity: 0;
  transition: opacity 2000ms ease-in-out;
  -webkit-transition: backdrop-filter 300ms ease-in-out, -webkit-backdrop-filter 300ms ease-in-out;
  transition: backdrop-filter 300ms ease-in-out, -webkit-backdrop-filter 300ms ease-in-out;
  backdrop-filter: blur(4px) opacity(0);
  -webkit-backdrop-filter: blur(4px) opacity(0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dYMIXYfA0Oo5LbkVnhkI {
  opacity: 1;
}

.F_ArQSoA5aRoVvtFHhER {
  border-radius: 4px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
  color: #757589;
  max-height: calc(100% - 80px);
  max-width: calc(100% - 80px);
}

.t1YOiHoV6NBhhzKCkOV1 {
  -webkit-animation-name: NRbimfMKNfTnyFT2a61F;
  animation-name: NRbimfMKNfTnyFT2a61F;
  animation-timing-function: ease-in-out;
  animation-fill-mode: unset;
  animation-duration: 300ms;
  outline: none;
}
.t1YOiHoV6NBhhzKCkOV1.rLBy3vBSgoyfvXx0kKHC {
  -webkit-animation-name: _JmEjyhi5rkPoYWH6fWM;
  animation-name: _JmEjyhi5rkPoYWH6fWM;
}

.StMYUgunRkSYfZ2oiES7 {
  -webkit-animation-name: pWOQ2JDH1Iux_YinXmgm;
  animation-name: pWOQ2JDH1Iux_YinXmgm;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-duration: 300ms;
}
.StMYUgunRkSYfZ2oiES7.rLBy3vBSgoyfvXx0kKHC {
  -webkit-animation-name: ZwDfhphRmdQSvntINePk;
  animation-name: ZwDfhphRmdQSvntINePk;
}

.DkAz42IUPhfocEeH0NM2,
.tOeDbuKRpzdahiHWNH9N {
  overflow: hidden;
}

.KrA4ruMYZ_x6EMBmmaVS .dggmNbFjQ4qtfzbUkTx8 {
  justify-content: end;
}
.KrA4ruMYZ_x6EMBmmaVS .F_ArQSoA5aRoVvtFHhER {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-bottom: 0 !important;
  max-height: calc(100% - 40px);
  max-width: 100%;
}
.KrA4ruMYZ_x6EMBmmaVS .F_ArQSoA5aRoVvtFHhER.JJb_IGt_7IdLZAG5s91Q {
  max-height: 100%;
}

.jTfwdhTv9xG5x19xOEWv {
  background: transparent;
  height: 60px;
  left: 0;
  position: absolute;
  touch-action: none;
  width: 100%;
}

.NSowK1yhn4btobdziBe5 {
  background: #DCDCE1;
  height: 4px;
  left: calc(50% - 24px);
  position: relative;
  top: 6px;
  width: 48px;
}
/*!*********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/panel/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.wiVwTNYNa1m3uwko0vig {
  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 */
.kHBS78JoDwlJeAlRAc9j {
  height: 100%;
  width: 100%;
}

.hxmQyOHo0_8pTzEkQqLw {
  position: relative;
}

.k15IYlL_A5FacKkQx32s {
  background-color: rgba(20, 19, 37, 0.8);
  max-height: 32px;
  max-width: 260px;
  min-height: 32px;
  min-width: 100px;
  position: absolute;
  top: -2200px;
  transition: top 500ms linear;
}
.k15IYlL_A5FacKkQx32s.MRZWrJApDpEbgMdDctQ2 {
  top: 20px;
}

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

.EaFYwSRJpCpuc5Re7zn9 {
  background-color: #FEF3F6;
}
.EaFYwSRJpCpuc5Re7zn9 .TDihWWjqCneupvaCOImw, .EaFYwSRJpCpuc5Re7zn9 .TEcMQ6kUScAxM17Im45Q {
  color: #9C002F;
}

.ILSaDXOpkjwcx17tc0eX {
  background-color: #F2F2F5;
}
.ILSaDXOpkjwcx17tc0eX .TDihWWjqCneupvaCOImw, .ILSaDXOpkjwcx17tc0eX .TEcMQ6kUScAxM17Im45Q {
  color: #403F5D;
}

.hk2wucxasErzwoJHSDGx {
  background-color: #ECF8FD;
}
.hk2wucxasErzwoJHSDGx .TDihWWjqCneupvaCOImw, .hk2wucxasErzwoJHSDGx .TEcMQ6kUScAxM17Im45Q {
  color: #00688C;
}

.s9qTaFdkUS26HnLSYil0 {
  width: 100%;
}

.Eb_Tta5ScwdWjz6OW4N7 {
  flex-grow: 1;
  overflow: hidden;
}

.spn8KpbN_Lpu1j5LmqC7 {
  background-color: #EBFBF7;
}
.spn8KpbN_Lpu1j5LmqC7 .TDihWWjqCneupvaCOImw, .spn8KpbN_Lpu1j5LmqC7 .TEcMQ6kUScAxM17Im45Q {
  color: #008565;
}

.jGhmoA3cVpvdL46NOHfe {
  background-color: #FDF8EC;
}
.jGhmoA3cVpvdL46NOHfe .TDihWWjqCneupvaCOImw, .jGhmoA3cVpvdL46NOHfe .TEcMQ6kUScAxM17Im45Q {
  color: #7E4C01;
}
/*!****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/panel/components/panel-header/panel-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.Y7clmPH8VqJ4P65H3NwY {
  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 */
.HWPu9_I6EBKvm_kDqUo3 {
  align-items: center;
  border-bottom: 1px solid #DCDCE1;
  color: #403F5D;
  display: grid;
  font-size: 16px;
  grid-template-columns: auto 1fr auto;
  height: 60px;
  justify-content: space-between;
  margin-bottom: 0;
  min-height: 60px;
  padding: 0 6px;
}
.HWPu9_I6EBKvm_kDqUo3._zJ5aJU1kh5FyKqRvhjf {
  align-items: flex-end;
  border-bottom: none;
  height: 60px;
  min-height: 60px;
  padding: 0 0 12px 0;
}
.HWPu9_I6EBKvm_kDqUo3.aGp2ekpD68bHhfTmqEeZ {
  border-bottom: none;
}

.BVEc0RuaTTMQsbd505M_ {
  z-index: 12;
}

.rVkQhXgWD0HGvviu5F0R {
  margin-left: 10px;
}

.e2QoR7Ou71sCr52AwA94 {
  align-self: center;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xuZ8AV1ArKofslbhxX9P {
  grid-template-columns: 50px auto 50px;
}

.bOXuYfSVHZncJXNreQJY {
  height: 100%;
  padding-top: 19.5px;
}

.DnmSQAOSDRTBvKXCVhTI {
  gap: 4px;
}
/*!********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/panel/components/panel-header-actions/panel-header-actions.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.YydXOUegVHTx0nrQigJK {
  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 */
.k5tG25E2FD9KaJdnMugN {
  margin-left: 9px;
  position: relative;
}
.k5tG25E2FD9KaJdnMugN:before {
  align-self: center;
  border-left: 1px solid #DCDCE1;
  content: "";
  display: inline-block;
  height: 40px;
  left: -11px;
  margin-left: 5px;
  position: absolute;
  width: 1px;
}

.f5qXT9Ol1qOq5lEzZ75t {
  border-left: 1px solid #E6E6EC;
  height: 40px;
}
/*!*************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/clickable-div/clickable-div.module.scss ***!
  \*************************************************************************************************************************************************/
.XF7MsArAftS8V32N7Q2h {
  outline: 0;
}
/*!****************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/panel/components/panel-bottom-pills/panel-bottom-pills.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.QWgA7SJugEBy8lKWHXFP {
  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 */
.ZhC6GbAN_LAZfSLtCUiS {
  cursor: pointer;
  min-width: 70px;
}

.GeIC8FxgB4nCMMopMdW4 {
  background: #ECF8FD;
}

.ve9O7h2vy77mNiSLJI_W {
  height: 48px;
}

.UF7_0pHQe72KZUoAFaTV {
  gap: 8px;
}

.nGLGezdsvm9f09oiQy8r {
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.nGLGezdsvm9f09oiQy8r::-webkit-scrollbar {
  display: none;
}
/*!****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/panel/components/panel-footer/panel-footer.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.PzhNj0TSNDY0ZQBtmaSl {
  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 */
.UdSDcvP7IL_ZIWxbAJdw {
  flex-wrap: wrap;
  user-select: none;
}
.UdSDcvP7IL_ZIWxbAJdw.GhgXX5LCYl_B3qymvG60 {
  user-select: none;
}

.VqcNBUVouBgQP7lLRV_n {
  border-top: 1px solid #DCDCE1;
}

.ZOvqNSeY6kHok3dAxkxi {
  display: flex;
  gap: 4px;
}

.KATsS7bWchNNWAx7WZe2 {
  gap: 12px;
  padding: 20px 24px;
  width: 100%;
}
/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/panel/components/panel-footer-primary-actions/panel-footer-primary-actions.module.scss ***!
  \************************************************************************************************************************************************************************************************/
.e8L0lPQ7wYacieRhPI0u {
  width: 100%;
}
.e8L0lPQ7wYacieRhPI0u button {
  flex-grow: 1;
}
/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/panel/components/panel-footer-secondary-actions/panel-footer-secondary-actions.module.scss ***!
  \****************************************************************************************************************************************************************************************************/
.nGvjy5inEVA690TEurOd {
  width: 100%;
}
.nGvjy5inEVA690TEurOd button {
  flex-grow: 1;
}
/*!********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/panels/loading-panel/loading-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.Almo22HCTr0SZiy_DTf4 {
  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 */
.MKDjnHM8OnGHxtA3WE2f {
  text-align: center;
}
/*!*******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/pill/pill.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.gd1h1GuI0lKvxuDH90dn {
  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 */
._TV5nLOSAYET8oe4mZix {
  align-items: center;
  border-radius: 100px;
  display: flex;
  flex: none;
  flex-grow: 0;
  justify-content: center;
  order: 0;
  padding: 0 12px 0 12px;
  width: fit-content;
}

.ZHyaGxc0qtbZQvXYV6cY {
  background: #F2F2F5;
}
.ZHyaGxc0qtbZQvXYV6cY:hover {
  background: #E6E6EC;
}
.ZHyaGxc0qtbZQvXYV6cY:active {
  background: #DCDCE1;
}

.znnU06M9AZ86svOmtr9x {
  height: 22px;
}

.mErTN5bx49qwxPwzKvlM {
  height: 26px;
}

.Hs1urg9_zj_y7mWQnqo5 {
  height: 32px;
}

.Svnvd_S83GIxvPAZZmYg {
  height: 40px;
}

.CuEjsmkYEg_nImBuCCJP {
  background: #ECF8FD;
}

.LT8l0vdbHcXb7muzY82M {
  background: #CDF0FB;
}

.ITdqIamVI913fT_8Z1S2 {
  background: #FDF8EC;
}

.kEiFJYYl_tZ1DILp2Hab {
  background: #EBFBF7;
}

.rC28C0YzP77hthcjQi73 {
  background: #F4F1FD;
}

.m6wgz8H1RfFbOHfGz7tJ {
  background: #9577E7;
}

.woXFOZ9565Ig0FFmg3eV {
  background: #FEF3F6;
}

.sIHKMav_Gq6NHGiP8KG9 {
  background: #F2F2F5;
}

.LQRuHIDwVIkh3fenR2Hg {
  background: transparent;
}

.UQ1UOAQRJf4MUcGk6gnM {
  background: linear-gradient(90deg, #EEFAFF 0%, #ECE9FF 100%);
}

.YzZStgxv50t7s9jav4Rs {
  background: #F2F2F5;
}
.YzZStgxv50t7s9jav4Rs .F9TaUhwXKVbfDtruU3nb {
  color: #403F5D;
}
.YzZStgxv50t7s9jav4Rs.AN0vsG4SP5oClunbIGlW {
  background: #E6E6EC;
}

.OppmqExJk2O7Qg6FRhyw {
  background: #ECF8FD;
}
.OppmqExJk2O7Qg6FRhyw .F9TaUhwXKVbfDtruU3nb {
  color: #00688C;
}
.OppmqExJk2O7Qg6FRhyw.AN0vsG4SP5oClunbIGlW {
  background: #CDF0FB;
}

.vQ9mpF0aC58VgLGCts2L {
  background: #FEF3F6;
}
.vQ9mpF0aC58VgLGCts2L .F9TaUhwXKVbfDtruU3nb {
  color: #9C002F;
}
.vQ9mpF0aC58VgLGCts2L.AN0vsG4SP5oClunbIGlW {
  background: #FFE4ED;
}

.DiEn_AYl7GV_m0NDZgCp {
  background: #EBFBF7;
}
.DiEn_AYl7GV_m0NDZgCp .F9TaUhwXKVbfDtruU3nb {
  color: #008565;
}
.DiEn_AYl7GV_m0NDZgCp.AN0vsG4SP5oClunbIGlW {
  background: #D7F8F0;
}

.zz41OUUKCjf0VBQu73fY {
  background: #FDF8EC;
}
.zz41OUUKCjf0VBQu73fY .F9TaUhwXKVbfDtruU3nb {
  color: #7E4C01;
}
.zz41OUUKCjf0VBQu73fY.AN0vsG4SP5oClunbIGlW {
  background: #FAF1D9;
}

.KUkM_Ou4WwO_SwJ5hYJC {
  background: linear-gradient(90deg, #EEFAFF 0%, #ECE9FF 100%);
}
.KUkM_Ou4WwO_SwJ5hYJC .F9TaUhwXKVbfDtruU3nb {
  color: linear-gradient(90deg, #0384B4 0%, #3C0ACD 60.61%);
}
.KUkM_Ou4WwO_SwJ5hYJC.AN0vsG4SP5oClunbIGlW {
  background: linear-gradient(135deg, #DCF5FF -1.78%, #D8D1FF 100%);
}

.k4lOcdT9RRpN68sor7_S:hover {
  background: #E6E6EC;
}

.sCqHM0g9_HK3jB4cZwKd:hover {
  background: #CDF0FB;
}

.BHYQc31FBWJGgtZRBFyE:hover {
  background: #FFE4ED;
}

.v97n8Py6XzfLsih0GTo0:hover {
  background: #D7F8F0;
}

.p8J10H8r1eqiOQlEeOec:hover {
  background: #FAF1D9;
}
/*!************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/dropdown-v2/components/dropdown-text/dropdown-text.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.qoFP2IH3TF_Yd85n5V80 {
  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 */
.kTzGp2Z6xIWZzOrol3l8 {
  margin-left: 6px;
}

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

.QgRmVnwqmV2p6PO8Boa3 {
  color: #A1A1AA;
}

._trHazxYq2tTj9KQMNlV svg {
  height: 16px;
  width: 16px;
}

.QoQafDEMhI3QG1TSZePj svg {
  height: 20px;
  width: 20px;
}
/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/dropdown-v2/components/dropdown-default-select-box/dropdown-default-select-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.ajj2Q1BdwhGUtBkkPskz {
  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 */
.Htw3tsNsqPOyEY6qyNBo {
  background: #FFFFFF;
  border: 1px solid #CBCBD0;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  height: fit-content;
  width: 100%;
}
.Htw3tsNsqPOyEY6qyNBo:not(.oj9nUdtV0vM4sruUMvq6):hover {
  background: #F2F2F5;
}
.Htw3tsNsqPOyEY6qyNBo:not(.oj9nUdtV0vM4sruUMvq6).BOgcFByZXTnPBUB0MGr6 {
  border: 1px solid #A1A1AA;
}
.Htw3tsNsqPOyEY6qyNBo.oj9nUdtV0vM4sruUMvq6 {
  background: #F2F2F5;
  border: 1px solid #F2F2F5;
  cursor: not-allowed;
}

.tMvQzMvsZOtkS1_fRnIN {
  padding: 6px 7px 6px 10px;
}

.dcHVn8UmIp8sg43S_SU7 {
  padding: 9px 10px 8px 10px;
}

.u5ZsDhAt0Xm_EGFgRApT {
  padding: 12px 12px 10px 12px;
}

._PlHtm551N8uFfrkPxXh {
  padding: 7px 12px 10px 12px;
}

.Lgzi3YPwDj57pban1FIU {
  overflow: hidden;
  width: 100%;
}

.PPEXRlHyGfNn7O967eL0 {
  margin-top: 6px;
}

._0yrK2IqsYadfdxG47cb {
  color: #403F5D;
}
/*!*********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/toast/toast.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.in_klI4tmlvWLv_F8PVF {
  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 */
.HFkqfp0Eg8Og3wo4sFu8 {
  display: flex !important;
  height: 32px;
}

.yzCDhMpwE5m8SBgYQQXB {
  background-color: #FFFFFF;
}

.iFDYv22feAFt_Spgcj0O {
  gap: 8px;
}

.erqO_49uS66LwzvoTqEp {
  background-color: #D32559;
}

.lgrW9e8MwVJH2kWLi6uk {
  background-color: #E8B93F;
}

.SdAhGujVXgRCXUQttCLT {
  background-color: #FAFAFA;
}

.x59pWNahuZ4T6jNKvgWo {
  width: 6px;
}

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

.CEVXdJt5_vCdfzJwzMZR {
  background-color: #FFFFFF;
}

.wugfUtT_tw_Z6R16_vJj {
  background-color: #19AD89;
}
/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/dropdown-v2/components/dropdown-ghost-select-box/dropdown-ghost-select-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.xbxBchcL48o3CzZc8kT1 {
  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 */
.YbRGeM9NDA_xS6p6yrgu {
  border: 1px solid #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
  transition: border 200ms ease-in-out;
  width: 100%;
}
.YbRGeM9NDA_xS6p6yrgu:not(.zTvuuB72LVYZAfZhJ16M):hover {
  border: 1px solid #F2F2F5;
  background: #F2F2F5;
}
.YbRGeM9NDA_xS6p6yrgu:not(.zTvuuB72LVYZAfZhJ16M).tH4GW2_tVKm8DKnZxWEX {
  border: 1px solid #A1A1AA;
}
.YbRGeM9NDA_xS6p6yrgu.zTvuuB72LVYZAfZhJ16M {
  background: #F2F2F5;
  border: none;
  cursor: not-allowed;
}

.L4KOfhJwg4jOQ_91SYoC {
  margin-right: 6px;
}

.T_NJheJ7klr3FlDjoSCf {
  margin-left: 6px;
}

.mPnATzm39pDoz1ECT_6l {
  padding: 6px 7px 6px 10px;
}

.muktpb9L90nrJq9OjOCU {
  padding: 9px 10px 8px 10px;
}

.gNhVbETyrfAjljWZE3Og {
  padding: 12px 12px 10px 12px;
}
/*!****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/toast/components/progress-bar/progress-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.lYVcTVrYlwj37e0Smr1W {
  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 */
.zTFEyDo4g9ZE6_dzi5KU {
  background-color: #3FBCE7;
  transition: width 0.3s ease-in-out;
}

.dP0Qawof76eD0hsoJyZK {
  background-color: #F2F2F5;
  height: 4px;
  position: relative;
}
/*!******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/dropdown-v2/dropdown.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.BcFWjYe9OaoYO3VEjs_T {
  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 */
.HU3qNYVTHUIr4ZjjqeAl {
  position: relative;
}

.UrZuHRU_YbDmt1_zIcbv {
  background: #FFFFFF;
  box-shadow: 0 2px 16px rgba(20, 19, 37, 0.15);
  overflow: auto;
  position: absolute;
  top: calc(100% + 12px);
  z-index: 10000;
}

.s7VslUlMNQUUji1YumWg {
  position: fixed;
}

.tAczDxKKb7HMgMVN4JVO {
  left: unset;
  right: 0;
}

.WXnVCS8LgvK_IDgBBaLp {
  visibility: hidden;
}

.NeN37WiRqJDtlb1dJrXV {
  visibility: visible;
}

.vZMZd5KhRI8laPs2dhQR {
  fill: #FFFFFF;
}

.aBzptZTzrs6kqENDXf2z {
  left: -2vw !important;
  opacity: 0;
  top: -2vh !important;
  visibility: hidden;
}
/*!***************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/checkbox/checkbox.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.JXcA7JguxeY_J8nik9mk {
  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 */
.UkIgi_fGljgtw_OeGfP5 {
  align-items: center;
  align-self: center;
  border: 1px solid #CBCBD0;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  height: fit-content;
  width: fit-content;
}
.UkIgi_fGljgtw_OeGfP5.WMHWjZw6qca_KVTuuxWF {
  border-color: #CBCBD0;
}
.UkIgi_fGljgtw_OeGfP5.CY7xBCp42yVoJVEugnph {
  border-color: #403F5D;
}
.UkIgi_fGljgtw_OeGfP5.K4fEh5_VUZ2hi1oBx9pL {
  border-color: #CBCBD0;
}
.UkIgi_fGljgtw_OeGfP5.G7GNZRJEXDNrrlEvVp5x {
  border-color: #23A6D4;
}
.UkIgi_fGljgtw_OeGfP5.EzOZ5ObHTP2qA3eMzAtm {
  border-color: #19AD89;
}
.UkIgi_fGljgtw_OeGfP5.YgWBMP2fr97Ijnt1QDi3 {
  border-color: #D32559;
}
.UkIgi_fGljgtw_OeGfP5.AyA8pjNOtWIiOSAiI8GC {
  border-color: #6D48D0;
}

.UkIgi_fGljgtw_OeGfP5.UQfouDNUICUUSWLA_JkG {
  background-color: #00688C;
  border: 1px solid rgba(48, 47, 59, 0);
}
.UkIgi_fGljgtw_OeGfP5.UQfouDNUICUUSWLA_JkG.WMHWjZw6qca_KVTuuxWF {
  background-color: #CBCBD0;
}
.UkIgi_fGljgtw_OeGfP5.UQfouDNUICUUSWLA_JkG.CY7xBCp42yVoJVEugnph {
  background-color: #403F5D;
}
.UkIgi_fGljgtw_OeGfP5.UQfouDNUICUUSWLA_JkG.K4fEh5_VUZ2hi1oBx9pL {
  background-color: #CBCBD0;
}
.UkIgi_fGljgtw_OeGfP5.UQfouDNUICUUSWLA_JkG.G7GNZRJEXDNrrlEvVp5x {
  background-color: #23A6D4;
}
.UkIgi_fGljgtw_OeGfP5.UQfouDNUICUUSWLA_JkG.EzOZ5ObHTP2qA3eMzAtm {
  background-color: #19AD89;
}
.UkIgi_fGljgtw_OeGfP5.UQfouDNUICUUSWLA_JkG.YgWBMP2fr97Ijnt1QDi3 {
  background-color: #D32559;
}
.UkIgi_fGljgtw_OeGfP5.UQfouDNUICUUSWLA_JkG.AyA8pjNOtWIiOSAiI8GC {
  background-color: #6D48D0;
}
/*!***************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/skeleton-brick/skeleton-brick.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.Ft9MEz3Gd7HDOeAuSuDL {
  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 */
.RnoSPj_iopQ9xP_mUAX7 {
  animation: WzdTpsSsM1FFQ5eLEBzY ease-in-out;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  background: rgba(255, 255, 255, 0.2);
}

.bDwTwUgTrW5YeSS3g8D4 {
  animation: kEPjwT_NQFXSK13Jek3y ease-in-out;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  background: #F2F2F5;
}

@keyframes WzdTpsSsM1FFQ5eLEBzY {
  0% {
    background-color: rgba(255, 255, 255, 0.2);
  }
  15% {
    background-color: rgba(255, 255, 255, 0.2);
  }
  62% {
    background-color: rgba(255, 255, 255, 0.1);
  }
  100% {
    background-color: rgba(255, 255, 255, 0.2);
  }
}
@keyframes kEPjwT_NQFXSK13Jek3y {
  0% {
    background-color: #F2F2F5;
  }
  15% {
    background-color: #F2F2F5;
  }
  62% {
    background-color: #FAFAFA;
  }
  100% {
    background-color: #F2F2F5;
  }
}
@keyframes wPMdIs3_yXa6OV9KxO8u {
  0% {
    background-color: #E6E6EC;
  }
  15% {
    background-color: #E6E6EC;
  }
  62% {
    background-color: #F2F2F5;
  }
  100% {
    background-color: #E6E6EC;
  }
}
@keyframes ke6GASIu0V1TwL9rWEMD {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  62% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.jfiLpNALjwe46KKM6g78 {
  border-radius: 4px;
}

.ZyZPUpgxBvK7rGL8sizc {
  animation: WzdTpsSsM1FFQ5eLEBzY ease-in-out;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  background: rgba(255, 255, 255, 0.2);
}

.YJCd0xcngsepAZZ0_gUh {
  animation: kEPjwT_NQFXSK13Jek3y ease-in-out;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  background: #F2F2F5;
}

.nSTXMOIwZeLOAnOpFAoZ {
  animation: wPMdIs3_yXa6OV9KxO8u ease-in-out;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
  background: #E6E6EC;
}

.gFeN71SBTEslwZOEzua6 {
  background: rgba(255, 255, 255, 0.2);
}

.FaRLnXEiaL4IMaLuymFo {
  background: #F2F2F5;
}

.Q84cUEaUTuKKrWNuqKP_ {
  background: #E6E6EC;
}

.VHRRGCU33AHoTrWyw3bA {
  background: linear-gradient(135deg, #D3C1FF 0%, rgba(176, 223, 255, 0.1) 100%);
  position: relative;
  opacity: 1;
}
.VHRRGCU33AHoTrWyw3bA::before {
  background: linear-gradient(103deg, #D3C1FF 0%, rgba(176, 223, 255, 0.1) 179.72%);
  border-radius: inherit;
  content: "";
  opacity: 0;
  position: absolute;
  inset: 0;
  animation: ke6GASIu0V1TwL9rWEMD ease-in-out;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
}

.yyN4iO9C1lNBBTHiBXm9 {
  height: 16px;
  width: 100%;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/controlled-list/components/controlled-list-item-type-1/controlled-list-item-type-1.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.fz7w_fAWnz1rJJZKSuoc {
  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 */
.foUdrWJpHvwuekMqauRT {
  cursor: pointer;
  margin-bottom: 10px;
}

.rovJaN6tAKsLdccm4vsr {
  color: #2C2B44;
}

.SrrLGmhxF4eEEkEfzXGW {
  border: 1px solid #DCDCE1;
  border-radius: 4px;
  box-sizing: border-box;
  height: 42px;
}
.SrrLGmhxF4eEEkEfzXGW.UNPtPtLKBZ_9AbZ42Wso {
  border: 1px solid #3FBCE7;
}

.AVG96V3THQyEOnLs6Sj4 {
  width: 100%;
}

.fVc460SjHus2p_RDlai6 {
  max-width: calc(100% - 16px);
}

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

.G_2q0bJRZIum7x4_eHJN {
  border-radius: 4px;
  height: 100%;
  overflow: hidden;
  padding-left: 9px;
}
.G_2q0bJRZIum7x4_eHJN:not(.UNPtPtLKBZ_9AbZ42Wso):hover {
  background: #FAFAFA;
}
.G_2q0bJRZIum7x4_eHJN.UNPtPtLKBZ_9AbZ42Wso {
  background: #ECF8FD;
}

.hsRWsL0G7G5g42m0FX5U {
  cursor: pointer;
  height: 100%;
}

.lsZf0f8nIhP3lG_C9Xfz {
  background: #FAFAFA;
  border-left: 1px solid #E6E6EC;
  border-radius: 0 4px 4px 0;
  box-sizing: border-box;
  color: #2C2B44;
  height: 100%;
  width: 40px;
}
.lsZf0f8nIhP3lG_C9Xfz.UNPtPtLKBZ_9AbZ42Wso {
  background: #CDF0FB;
}
.lsZf0f8nIhP3lG_C9Xfz:not(.UNPtPtLKBZ_9AbZ42Wso):hover {
  background: #F2F2F5;
}
.lsZf0f8nIhP3lG_C9Xfz:not(.UNPtPtLKBZ_9AbZ42Wso):active {
  background: #E6E6EC;
  border-left: none;
}

.ySQRVcCeLjSygIkrtT1d {
  color: #403F5D;
  margin-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.V7vGovOCqs4CwxQ8p2Yb {
  height: 22px;
  margin-right: 8px;
}

.w2vGnDfDjVAtbKtvJqkz {
  touch-action: none;
}
/*!***********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/activity-indicator/activity-indicator.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.HfYsiZDYfXXkpApF6w5B {
  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 */
/**
 Injects all the SCSS such as color/animation name to the css selector
 in which this mixin is called instead of selecting .icon-circular-loader directly in the mixin as in loader-for-color
 */
.yXCIs7_1TD6Is6sQKxeZ {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  border-radius: 50%;
  box-sizing: border-box;
  color: #23A6D4;
  font-size: 8px;
  height: 24px;
  margin-left: auto;
  overflow: hidden;
  width: 24px;
}
.yXCIs7_1TD6Is6sQKxeZ.ycE9a63zNe3syCKr9Etc {
  margin: 0;
}
.yXCIs7_1TD6Is6sQKxeZ.uXeGd46ZK5wb5ji8jdtc {
  height: 9px;
  width: 9px;
}
.yXCIs7_1TD6Is6sQKxeZ.pKQMyV1K3JU9evbtLDsZ {
  height: 16px;
  width: 16px;
}
.yXCIs7_1TD6Is6sQKxeZ.xxLTCvDfPYxN_Qw4QVEV {
  height: 20px;
  width: 20px;
}
.yXCIs7_1TD6Is6sQKxeZ.feQtH6FRzeKMNxZTxpJF {
  height: 32px;
  width: 32px;
}
.yXCIs7_1TD6Is6sQKxeZ.HfYsiZDYfXXkpApF6w5B {
  height: 40px;
  width: 40px;
}
.yXCIs7_1TD6Is6sQKxeZ.N7dABKAXHrtHIIO4aGjK {
  color: #23A6D4;
}
@keyframes mw4Ya2K6ld3wcix1JK7U {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #23A6D4;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #23A6D4;
  }
  100% {
    border-left-color: #23A6D4;
    border-bottom-color: #23A6D4;
    transform: rotate(225deg);
  }
}
.yXCIs7_1TD6Is6sQKxeZ.N7dABKAXHrtHIIO4aGjK:indeterminate::before, .yXCIs7_1TD6Is6sQKxeZ.N7dABKAXHrtHIIO4aGjK:indeterminate::-webkit-progress-value {
  animation: mw4Ya2K6ld3wcix1JK7U 0.75s infinite linear alternate;
  border-top-color: #23A6D4;
}
.yXCIs7_1TD6Is6sQKxeZ.N7dABKAXHrtHIIO4aGjK:indeterminate::-moz-progress-bar {
  animation: mw4Ya2K6ld3wcix1JK7U 0.75s infinite linear alternate;
  border-top-color: #23A6D4;
}
.yXCIs7_1TD6Is6sQKxeZ.dTs0Bx3zZJKXsVYyngjh {
  color: #00688C;
}
@keyframes BLr_AGXbwVMQTff_39k5 {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #00688C;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #00688C;
  }
  100% {
    border-left-color: #00688C;
    border-bottom-color: #00688C;
    transform: rotate(225deg);
  }
}
.yXCIs7_1TD6Is6sQKxeZ.dTs0Bx3zZJKXsVYyngjh:indeterminate::before, .yXCIs7_1TD6Is6sQKxeZ.dTs0Bx3zZJKXsVYyngjh:indeterminate::-webkit-progress-value {
  animation: BLr_AGXbwVMQTff_39k5 0.75s infinite linear alternate;
  border-top-color: #00688C;
}
.yXCIs7_1TD6Is6sQKxeZ.dTs0Bx3zZJKXsVYyngjh:indeterminate::-moz-progress-bar {
  animation: BLr_AGXbwVMQTff_39k5 0.75s infinite linear alternate;
  border-top-color: #00688C;
}
.yXCIs7_1TD6Is6sQKxeZ.bDQK7Pmkh__WFlUVhiB3 {
  color: #FFFFFF;
}
@keyframes RdSjRMwjfCmIBhLBXc1j {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #FFFFFF;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #FFFFFF;
  }
  100% {
    border-left-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    transform: rotate(225deg);
  }
}
.yXCIs7_1TD6Is6sQKxeZ.bDQK7Pmkh__WFlUVhiB3:indeterminate::before, .yXCIs7_1TD6Is6sQKxeZ.bDQK7Pmkh__WFlUVhiB3:indeterminate::-webkit-progress-value {
  animation: RdSjRMwjfCmIBhLBXc1j 0.75s infinite linear alternate;
  border-top-color: #FFFFFF;
}
.yXCIs7_1TD6Is6sQKxeZ.bDQK7Pmkh__WFlUVhiB3:indeterminate::-moz-progress-bar {
  animation: RdSjRMwjfCmIBhLBXc1j 0.75s infinite linear alternate;
  border-top-color: #FFFFFF;
}
.yXCIs7_1TD6Is6sQKxeZ.fGNSTVZ5J_qLbva7fDMy {
  color: #3C0ACD;
}
@keyframes bT1Y4fc02ZDLeHfD8Dpi {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #3C0ACD;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #3C0ACD;
  }
  100% {
    border-left-color: #3C0ACD;
    border-bottom-color: #3C0ACD;
    transform: rotate(225deg);
  }
}
.yXCIs7_1TD6Is6sQKxeZ.fGNSTVZ5J_qLbva7fDMy:indeterminate::before, .yXCIs7_1TD6Is6sQKxeZ.fGNSTVZ5J_qLbva7fDMy:indeterminate::-webkit-progress-value {
  animation: bT1Y4fc02ZDLeHfD8Dpi 0.75s infinite linear alternate;
  border-top-color: #3C0ACD;
}
.yXCIs7_1TD6Is6sQKxeZ.fGNSTVZ5J_qLbva7fDMy:indeterminate::-moz-progress-bar {
  animation: bT1Y4fc02ZDLeHfD8Dpi 0.75s infinite linear alternate;
  border-top-color: #3C0ACD;
}
.yXCIs7_1TD6Is6sQKxeZ.EQ9aZsqQ9N4Ju3Dsn8DM {
  color: #403F5D;
}
@keyframes zp0wmjG0qqVObCoe6NXo {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #403F5D;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #403F5D;
  }
  100% {
    border-left-color: #403F5D;
    border-bottom-color: #403F5D;
    transform: rotate(225deg);
  }
}
.yXCIs7_1TD6Is6sQKxeZ.EQ9aZsqQ9N4Ju3Dsn8DM:indeterminate::before, .yXCIs7_1TD6Is6sQKxeZ.EQ9aZsqQ9N4Ju3Dsn8DM:indeterminate::-webkit-progress-value {
  animation: zp0wmjG0qqVObCoe6NXo 0.75s infinite linear alternate;
  border-top-color: #403F5D;
}
.yXCIs7_1TD6Is6sQKxeZ.EQ9aZsqQ9N4Ju3Dsn8DM:indeterminate::-moz-progress-bar {
  animation: zp0wmjG0qqVObCoe6NXo 0.75s infinite linear alternate;
  border-top-color: #403F5D;
}
.yXCIs7_1TD6Is6sQKxeZ.zNuykn5TQt7bbnBcwYNX {
  color: #B70A3E;
}
@keyframes TbTm_yDlJI6tSd9rDVPS {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #B70A3E;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #B70A3E;
  }
  100% {
    border-left-color: #B70A3E;
    border-bottom-color: #B70A3E;
    transform: rotate(225deg);
  }
}
.yXCIs7_1TD6Is6sQKxeZ.zNuykn5TQt7bbnBcwYNX:indeterminate::before, .yXCIs7_1TD6Is6sQKxeZ.zNuykn5TQt7bbnBcwYNX:indeterminate::-webkit-progress-value {
  animation: TbTm_yDlJI6tSd9rDVPS 0.75s infinite linear alternate;
  border-top-color: #B70A3E;
}
.yXCIs7_1TD6Is6sQKxeZ.zNuykn5TQt7bbnBcwYNX:indeterminate::-moz-progress-bar {
  animation: TbTm_yDlJI6tSd9rDVPS 0.75s infinite linear alternate;
  border-top-color: #B70A3E;
}
.yXCIs7_1TD6Is6sQKxeZ.ul1aCRt03E9ZYqq6xgtv {
  color: #D69923;
}
@keyframes peVQDEq4MzbGKiDZ83G5 {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #D69923;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #D69923;
  }
  100% {
    border-left-color: #D69923;
    border-bottom-color: #D69923;
    transform: rotate(225deg);
  }
}
.yXCIs7_1TD6Is6sQKxeZ.ul1aCRt03E9ZYqq6xgtv:indeterminate::before, .yXCIs7_1TD6Is6sQKxeZ.ul1aCRt03E9ZYqq6xgtv:indeterminate::-webkit-progress-value {
  animation: peVQDEq4MzbGKiDZ83G5 0.75s infinite linear alternate;
  border-top-color: #D69923;
}
.yXCIs7_1TD6Is6sQKxeZ.ul1aCRt03E9ZYqq6xgtv:indeterminate::-moz-progress-bar {
  animation: peVQDEq4MzbGKiDZ83G5 0.75s infinite linear alternate;
  border-top-color: #D69923;
}
.yXCIs7_1TD6Is6sQKxeZ.hFE3tRJiCAM5lPQ3iuvJ {
  color: #19AD89;
}
@keyframes HwkvH5JSgNNAk6ZcqESZ {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #19AD89;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #19AD89;
  }
  100% {
    border-left-color: #19AD89;
    border-bottom-color: #19AD89;
    transform: rotate(225deg);
  }
}
.yXCIs7_1TD6Is6sQKxeZ.hFE3tRJiCAM5lPQ3iuvJ:indeterminate::before, .yXCIs7_1TD6Is6sQKxeZ.hFE3tRJiCAM5lPQ3iuvJ:indeterminate::-webkit-progress-value {
  animation: HwkvH5JSgNNAk6ZcqESZ 0.75s infinite linear alternate;
  border-top-color: #19AD89;
}
.yXCIs7_1TD6Is6sQKxeZ.hFE3tRJiCAM5lPQ3iuvJ:indeterminate::-moz-progress-bar {
  animation: HwkvH5JSgNNAk6ZcqESZ 0.75s infinite linear alternate;
  border-top-color: #19AD89;
}

.yXCIs7_1TD6Is6sQKxeZ.rkfyss50f8TPI0wLk319 {
  color: #D32559;
}

.yXCIs7_1TD6Is6sQKxeZ::-webkit-progress-bar {
  background-color: transparent;
}

.yXCIs7_1TD6Is6sQKxeZ:indeterminate {
  animation: CYlsOsF0ITkRzr76rfTh 6s infinite cubic-bezier(0.3, 0.6, 1, 1);
  -webkit-mask-image: linear-gradient(transparent 50%, black 50%), linear-gradient(to right, transparent 50%, black 50%);
  mask-image: linear-gradient(transparent 50%, black 50%), linear-gradient(to right, transparent 50%, black 50%);
}

:-ms-lang(x), .yXCIs7_1TD6Is6sQKxeZ:indeterminate {
  animation: none;
}

.yXCIs7_1TD6Is6sQKxeZ:indeterminate::before,
.yXCIs7_1TD6Is6sQKxeZ:indeterminate::-webkit-progress-value {
  animation: aQa6XJsAhZMOxl80HZWh 0.75s infinite linear alternate;
  background-color: transparent;
  border: solid 0.25em transparent;
  border-radius: 50%;
  border-top-color: #23A6D4;
  box-sizing: border-box;
  content: "";
  display: block;
  height: 100%;
  margin-bottom: 0.25em;
  width: 100% !important;
}

.yXCIs7_1TD6Is6sQKxeZ:indeterminate::-moz-progress-bar {
  animation: aQa6XJsAhZMOxl80HZWh 0.75s infinite linear alternate;
  background-color: transparent;
  border: solid 0.25em transparent;
  border-radius: 50%;
  border-top-color: #23A6D4;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}

.yXCIs7_1TD6Is6sQKxeZ:indeterminate::-ms-fill {
  animation-name: O5822x4B6yWAXkFrjtHV;
}

@keyframes CYlsOsF0ITkRzr76rfTh {
  0% {
    transform: rotate(0deg);
  }
  12.5% {
    transform: rotate(180deg);
    animation-timing-function: linear;
  }
  25% {
    transform: rotate(630deg);
  }
  37.5% {
    transform: rotate(810deg);
    animation-timing-function: linear;
  }
  50% {
    transform: rotate(1260deg);
  }
  62.5% {
    transform: rotate(1440deg);
    animation-timing-function: linear;
  }
  75% {
    transform: rotate(1890deg);
  }
  87.5% {
    transform: rotate(2070deg);
    animation-timing-function: linear;
  }
  100% {
    transform: rotate(2520deg);
  }
}
@keyframes aQa6XJsAhZMOxl80HZWh {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #23A6D4;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #23A6D4;
  }
  100% {
    border-left-color: #23A6D4;
    border-bottom-color: #23A6D4;
    transform: rotate(225deg);
  }
}
.ZMgndQQLLFH8isVtba5K {
  width: 16px;
  height: 16px;
}

.VBxjmIq00wE1dRW_8b_E {
  width: 37.5%;
  height: 37.5%;
  background-color: #9577E7;
  position: absolute;
}

.yoBeUzVp4aXJqsEfA_qr {
  width: 75%;
  height: 75%;
  background-color: rgba(149, 119, 231, 0.3);
  animation: V7C5HGKprbRyUvt4FHtC 1.5s infinite;
  position: absolute;
}

.AtyQBrVtQHKIxFhIincx {
  position: relative;
}

.UX7k7oAjzu7J1886_0WE {
  color: #9577E7;
}
@keyframes PCMAnmyomWy01zm7eWYU {
  0% {
    transform: rotate(-30deg);
  }
  29.4% {
    border-left-color: transparent;
  }
  29.41% {
    border-left-color: #9577E7;
  }
  64.7% {
    border-bottom-color: transparent;
  }
  64.71% {
    border-bottom-color: #9577E7;
  }
  100% {
    border-left-color: #9577E7;
    border-bottom-color: #9577E7;
    transform: rotate(225deg);
  }
}
.UX7k7oAjzu7J1886_0WE:indeterminate::before, .UX7k7oAjzu7J1886_0WE:indeterminate::-webkit-progress-value {
  animation: PCMAnmyomWy01zm7eWYU 0.75s infinite linear alternate;
  border-top-color: #9577E7;
}
.UX7k7oAjzu7J1886_0WE:indeterminate::-moz-progress-bar {
  animation: PCMAnmyomWy01zm7eWYU 0.75s infinite linear alternate;
  border-top-color: #9577E7;
}

@keyframes V7C5HGKprbRyUvt4FHtC {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes HHPHpllNl4Xz6YI4AzJN {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.EUkNpb2inuiWWJ0aCX3I {
  animation: HHPHpllNl4Xz6YI4AzJN 2s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/controlled-list/components/controlled-list-item-type-2/controlled-list-item-type-2.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.hB2H8W8FjCvwXyYceje5 {
  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 */
.AMrn_7pXcLbIjPqU3rC4 {
  border: 1px solid transparent;
  border-radius: 8px;
  height: 56px;
  min-width: 56px;
  width: 56px;
}

.HB5sasdUD7gb40NjiADZ {
  background: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
  height: fit-content;
  margin-bottom: 8px;
  width: 100%;
}
.HB5sasdUD7gb40NjiADZ:last-child {
  margin-bottom: 0px;
}
.HB5sasdUD7gb40NjiADZ:not(.jd8NrNg5t6GFZp8b7O3Q):hover, .HB5sasdUD7gb40NjiADZ:not(.jd8NrNg5t6GFZp8b7O3Q):focus, .HB5sasdUD7gb40NjiADZ:not(.jd8NrNg5t6GFZp8b7O3Q):focus-within {
  background: #F2F2F5;
}
.HB5sasdUD7gb40NjiADZ:not(.jd8NrNg5t6GFZp8b7O3Q):hover .AMrn_7pXcLbIjPqU3rC4, .HB5sasdUD7gb40NjiADZ:not(.jd8NrNg5t6GFZp8b7O3Q):focus .AMrn_7pXcLbIjPqU3rC4, .HB5sasdUD7gb40NjiADZ:not(.jd8NrNg5t6GFZp8b7O3Q):focus-within .AMrn_7pXcLbIjPqU3rC4 {
  border: 1px solid #DCDCE1;
}
.HB5sasdUD7gb40NjiADZ:not(.jd8NrNg5t6GFZp8b7O3Q):active {
  background: #E6E6EC;
}
.HB5sasdUD7gb40NjiADZ:not(.jd8NrNg5t6GFZp8b7O3Q):active .AMrn_7pXcLbIjPqU3rC4 {
  border: 1px solid #DCDCE1;
}
.HB5sasdUD7gb40NjiADZ.jd8NrNg5t6GFZp8b7O3Q {
  background: #ECF8FD;
}
.HB5sasdUD7gb40NjiADZ.jd8NrNg5t6GFZp8b7O3Q .AMrn_7pXcLbIjPqU3rC4 {
  border: 1px solid #E6E6EC;
}

.yGW5e0WHILoi1ZShaQFp {
  cursor: not-allowed;
}

.gWGMxDYCwCAYCwqbRogQ {
  color: #DCDCE1;
  cursor: not-allowed;
}

.Pb3REM3gcXYQEyBzUzqA {
  margin-left: 12px;
}

.YZ5hGmzW33aU2QYWJqKA {
  position: relative;
}

.YdxLReozzlqvpJNVjBgD {
  position: absolute !important;
  right: 9px;
  top: 9px;
  z-index: 1;
}
/*!*************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/divider/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.r5BYtMquFFImbCH7bwzh {
  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 */
.OjnW9hVjHtix3p_1wd85 {
  background-color: #E6E6EC;
  height: 1px;
  width: 100%;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/controlled-list/components/controlled-list-item-type-3/controlled-list-item-type-3.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.XetW0hW9HQwDWx8r5WYQ {
  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 */
.EUs00Sp3Lpobwf5ZhSTc {
  width: 100%;
}

.ivL5V8wI3PQuWN1WXwmQ {
  width: 100%;
}

.pjlpMyJXaNE8w3oYTkbg {
  background: #FFFFFF;
  cursor: pointer;
  height: fit-content;
  margin-bottom: 1px;
  width: 100%;
}
.pjlpMyJXaNE8w3oYTkbg:not(.OF7diKpiczUCm9wXRgqA):hover {
  background: #F2F2F5;
  transition: 0.2s;
}
.pjlpMyJXaNE8w3oYTkbg.OF7diKpiczUCm9wXRgqA {
  background: #ECF8FD;
}
.pjlpMyJXaNE8w3oYTkbg.OF7diKpiczUCm9wXRgqA .UJqc1Sl_TpK6C_4qHGm9 {
  width: calc(100% - 40px);
}

.iEFMLavosouC1TVFl8C8 {
  color: #00688C;
}

.UJqc1Sl_TpK6C_4qHGm9 {
  align-items: self-start;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.qz8Fytggqquo_T5sQ2ZE {
  cursor: pointer;
  margin: 0 0 4px 0;
  width: 100%;
}

.ZaLYCGXjisOdGuFkxrMr {
  background: #FFFFFF;
  height: 48px;
  width: auto;
}
.ZaLYCGXjisOdGuFkxrMr.eFRieqd5BWv79egeYFcr {
  background: #ECF8FD;
}
.ZaLYCGXjisOdGuFkxrMr:not(.eFRieqd5BWv79egeYFcr):hover, .ZaLYCGXjisOdGuFkxrMr:not(.eFRieqd5BWv79egeYFcr):focus {
  background: #F2F2F5;
  transition: 0.2s;
}

.sYMbmlkdVehp6Cyp0LwU {
  border: 1px solid transparent;
  border-radius: 8px;
  height: 56px;
  width: 56px;
}

.pjlpMyJXaNE8w3oYTkbg:not(.OF7diKpiczUCm9wXRgqA):hover .sYMbmlkdVehp6Cyp0LwU, .pjlpMyJXaNE8w3oYTkbg:not(.OF7diKpiczUCm9wXRgqA):focus .sYMbmlkdVehp6Cyp0LwU, .pjlpMyJXaNE8w3oYTkbg:not(.OF7diKpiczUCm9wXRgqA):focus-within .sYMbmlkdVehp6Cyp0LwU {
  border: 1px solid #DCDCE1;
}
.pjlpMyJXaNE8w3oYTkbg:not(.OF7diKpiczUCm9wXRgqA):active .sYMbmlkdVehp6Cyp0LwU {
  border: 1px solid #DCDCE1;
}
.pjlpMyJXaNE8w3oYTkbg.OF7diKpiczUCm9wXRgqA .sYMbmlkdVehp6Cyp0LwU {
  border: 1px solid #CBCBD0;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/controlled-list/components/controlled-list-item-type-4/controlled-list-item-type-4.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.iFPtBHUppVopQlBRqAFw {
  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 */
.tqFakSP8xeQUoCWZhHyg {
  background-color: #FFFFFF;
  border: none;
  cursor: pointer;
  padding: 10px;
}
.tqFakSP8xeQUoCWZhHyg:hover, .tqFakSP8xeQUoCWZhHyg:focus, .tqFakSP8xeQUoCWZhHyg:focus-within {
  background: #F2F2F5;
}
.tqFakSP8xeQUoCWZhHyg:hover .u5hwx7vwXLYZlqrJfE87, .tqFakSP8xeQUoCWZhHyg:focus .u5hwx7vwXLYZlqrJfE87, .tqFakSP8xeQUoCWZhHyg:focus-within .u5hwx7vwXLYZlqrJfE87 {
  visibility: visible;
}
.tqFakSP8xeQUoCWZhHyg .u5hwx7vwXLYZlqrJfE87 {
  visibility: hidden;
}
.tqFakSP8xeQUoCWZhHyg .g4cLdLJSr32_MKibEIdp {
  color: #757589;
  margin-left: 4px;
}

.wyqdR2V0eb5Nh8aU8h70 {
  background-color: #3FBCE7 !important;
  border: none;
  cursor: pointer;
  padding: 10px;
}
.wyqdR2V0eb5Nh8aU8h70 .g4cLdLJSr32_MKibEIdp {
  margin-left: 4px;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/controlled-list/components/controlled-list-item-type-5/controlled-list-item-type-5.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.tZM1_hroUpPgAeCcnvdq {
  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 */
.ZUCdzTvZMMQZ08H7K8J_ {
  align-items: center;
  background-color: #FFFFFF;
  border: 1px solid #E6E6EC;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px;
}
.ZUCdzTvZMMQZ08H7K8J_:hover, .ZUCdzTvZMMQZ08H7K8J_:focus, .ZUCdzTvZMMQZ08H7K8J_:focus-within {
  background: #F2F2F5;
}
.ZUCdzTvZMMQZ08H7K8J_:hover .YO9BXPDxtYfAtVrBrMYL, .ZUCdzTvZMMQZ08H7K8J_:focus .YO9BXPDxtYfAtVrBrMYL, .ZUCdzTvZMMQZ08H7K8J_:focus-within .YO9BXPDxtYfAtVrBrMYL {
  border: 1px solid #DCDCE1;
}

.Qv18QCiI0R9u55O5aOy3 {
  align-items: center;
  background-color: #3FBCE7;
  border: 1px solid #3FBCE7;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10px;
}
.Qv18QCiI0R9u55O5aOy3 .kZYHE5v8nPl1FZCMN8Ax {
  margin-left: 4px;
}
.Qv18QCiI0R9u55O5aOy3 .YO9BXPDxtYfAtVrBrMYL {
  background: #00688C;
  border: 1px solid #00688C;
  color: #FFFFFF;
}
.Qv18QCiI0R9u55O5aOy3 .eVaxiMqyn0ZO5AAnRm0Q {
  color: #FFFFFF;
}
.Qv18QCiI0R9u55O5aOy3 .eVaxiMqyn0ZO5AAnRm0Q :first-child {
  color: #FFFFFF;
}

.gDcytSwOYvKFLG37LfBM {
  align-items: center;
  display: flex;
  justify-content: center;
}

.YO9BXPDxtYfAtVrBrMYL {
  background: #ECF8FD;
  border: 1px solid #ECF8FD;
}

.v1gL8Cqy2yNxiZP2GDik {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  min-width: 50px;
}

.eVaxiMqyn0ZO5AAnRm0Q {
  color: #757589;
}
/*!**********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/controlled-list/components/controlled-list-heading-item/controlled-list-heading-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.Akk6C2PpL2uHEoM2CTXI {
  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 */
.I4hDKqEv7gRVi31LIP2P {
  height: fit-content;
}

.C67kZrkbwezD5vZcmYEQ {
  margin-top: 2px;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/controlled-list/components/controlled-list-item-type-7/controlled-list-item-type-7.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
 */
.uqOSI48bSES34X2wG9Ow {
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 8px;
  width: 100%;
}
.uqOSI48bSES34X2wG9Ow:last-child {
  margin-bottom: 0px;
}
.uqOSI48bSES34X2wG9Ow.zPSWjepx9uIttSmmMRwK {
  height: 40px;
}
.uqOSI48bSES34X2wG9Ow.nkfFifs8cXRg_ZDH0Lce {
  height: 48px;
}
.uqOSI48bSES34X2wG9Ow.hpUPv7zBwz6u4Hga8X9S {
  background-color: transparent;
  box-shadow: none;
  color: #AFAFB7;
  cursor: not-allowed;
}
.uqOSI48bSES34X2wG9Ow.hpUPv7zBwz6u4Hga8X9S .KhxVynDZoy_njXleTY1g {
  color: #AFAFB7;
}

.uqOSI48bSES34X2wG9Ow:not(.hpUPv7zBwz6u4Hga8X9S):hover, .uqOSI48bSES34X2wG9Ow:not(.hpUPv7zBwz6u4Hga8X9S):focus, .uqOSI48bSES34X2wG9Ow:not(.hpUPv7zBwz6u4Hga8X9S):focus-within {
  background: #F2F2F5;
}
.uqOSI48bSES34X2wG9Ow:not(.hpUPv7zBwz6u4Hga8X9S):active {
  background: #E6E6EC;
}

.LpFkee0WMc3llnuxT69m {
  color: #403F5D;
}
.LpFkee0WMc3llnuxT69m.uX22DFtmGfFXPVnddR3B {
  color: #D32559;
}

.KhxVynDZoy_njXleTY1g.uX22DFtmGfFXPVnddR3B {
  color: #D32559;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/controlled-list/components/controlled-list-item-type-6/controlled-list-item-type-6.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
 */
.OE_PyqF3pjXxs5RjHqT2 {
  border-radius: 2px;
  cursor: pointer;
  height: 40px;
  width: 100%;
}
.OE_PyqF3pjXxs5RjHqT2.CqiCiAOSGv32EyhcsleM {
  background-color: transparent;
  box-shadow: none;
  color: #AFAFB7;
  cursor: not-allowed;
}
.OE_PyqF3pjXxs5RjHqT2.CqiCiAOSGv32EyhcsleM .lwlnGYod4qowgdFU7_8W {
  color: #AFAFB7;
}

.OE_PyqF3pjXxs5RjHqT2:not(.CqiCiAOSGv32EyhcsleM).tPu0gTNPASMUz6rviriP {
  background: #ECF8FD;
}
.OE_PyqF3pjXxs5RjHqT2:not(.CqiCiAOSGv32EyhcsleM).tPu0gTNPASMUz6rviriP .lwlnGYod4qowgdFU7_8W {
  color: #00688C;
}

.OE_PyqF3pjXxs5RjHqT2:not(.CqiCiAOSGv32EyhcsleM):not(.tPu0gTNPASMUz6rviriP):hover, .OE_PyqF3pjXxs5RjHqT2:not(.CqiCiAOSGv32EyhcsleM):not(.tPu0gTNPASMUz6rviriP):focus, .OE_PyqF3pjXxs5RjHqT2:not(.CqiCiAOSGv32EyhcsleM):not(.tPu0gTNPASMUz6rviriP):focus-within {
  background: #F2F2F5;
}
.OE_PyqF3pjXxs5RjHqT2:not(.CqiCiAOSGv32EyhcsleM):not(.tPu0gTNPASMUz6rviriP):active {
  background: #E6E6EC;
}

.na9iALRUWEMKuZXjo1lw {
  color: #403F5D;
}
.na9iALRUWEMKuZXjo1lw.N6DvEYG7l9pm4QDICtku {
  color: #D32559;
}

.lwlnGYod4qowgdFU7_8W.N6DvEYG7l9pm4QDICtku {
  color: #D32559;
}
/*!**********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/controlled-list/components/controlled-list-divider-item/controlled-list-divider-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.BBlkg4OKjdHoGxbrzkLw {
  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 */
.Dr0HzXhz7q4VLaEcgGTg {
  border-top: 1px solid #E8E8E8;
  margin: 4px 0;
}
/*!***********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/controlled-list/components/controlled-list-item-type-button/controlled-list-item-type-button.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 */
.btn.dashed.button-container {
  align-items: center;
  display: flex;
  justify-content: center;
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/controlled-list/components/controlled-list-item-type-8/controlled-list-item-type-8.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.W7HmAP4kOVlFlAOwx43E {
  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 */
.pCSlFmuVjMpjC7OXUWQs {
  background: #F2F2F5;
  border-radius: 22px;
  float: left;
  margin-bottom: 8px;
  margin-right: 8px;
  -webkit-transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
  transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
}
.pCSlFmuVjMpjC7OXUWQs .bpxXrPGDQX0U3wBtqBWA {
  justify-content: center;
  padding: 8px 12px;
}
.pCSlFmuVjMpjC7OXUWQs .ZNWSv7wqbxhzpBIT4FnR {
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
  letter-spacing: normal !important;
  color: #403F5D !important;
}
.pCSlFmuVjMpjC7OXUWQs.pAXdNgVSjDo_anD_9hjR {
  background-color: #CDF0FB !important;
}
.pCSlFmuVjMpjC7OXUWQs.pAXdNgVSjDo_anD_9hjR .ZNWSv7wqbxhzpBIT4FnR {
  color: #00688C !important;
}
.pCSlFmuVjMpjC7OXUWQs:hover, .pCSlFmuVjMpjC7OXUWQs:focus, .pCSlFmuVjMpjC7OXUWQs:focus-within {
  background-color: #CDF0FB;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
  transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
}
.pCSlFmuVjMpjC7OXUWQs:last-child {
  margin-right: 0;
}

.xZwWiToHv0GhlwJH3o1U {
  border-radius: 1000px;
}
/*!*************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/loading-toast/loading-toast.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.A_zf79k7ToqNf4vRMJKK {
  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
*/
.M4Up3Nn70YW_jZ5sIuyL {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.M4Up3Nn70YW_jZ5sIuyL.XfpvhFRE9GrM7E9vXEdQ {
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
.M4Up3Nn70YW_jZ5sIuyL.u86CXKIWABCJjtEu6vWW {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.M4Up3Nn70YW_jZ5sIuyL.LZOKeNhCBFhzTmpROD2J {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}

.M4Up3Nn70YW_jZ5sIuyL.aAFRJDPkBf4e6pJrfhH_ {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

.M4Up3Nn70YW_jZ5sIuyL.Ou599A51SfNHwnQ9BHVg {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

.M4Up3Nn70YW_jZ5sIuyL.cdDlTggpXn0Jyicve__N {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.M4Up3Nn70YW_jZ5sIuyL.PkVicdoztG04H_viz_Pa {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
}

.M4Up3Nn70YW_jZ5sIuyL.bp6L6b3zkG3n5fkYdZvw {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.M4Up3Nn70YW_jZ5sIuyL.WYr_tPnY4OaP59N5UPU8 {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
}

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

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

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

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

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

@keyframes Pj9Kl8Cc2Zw4F0AWrB4b {
  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 JIOP0h38A9gjMVIdo7W5 {
  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);
  }
}
.qMEuWYUD0JXA_i3lJGD8 {
  -webkit-transform-origin: left; /* Chrome, Safari, Opera */
  transform-origin: left;
}

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

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

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

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

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

.EDsYoG8tQXJ9sGAQPisI {
  opacity: 1;
  -webkit-transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.EDsYoG8tQXJ9sGAQPisI: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);
}

.lltrGxp03FXBOwIQipah {
  -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 v57eVeA_SAYcBDwSfUFy {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes v57eVeA_SAYcBDwSfUFy {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.v57eVeA_SAYcBDwSfUFy {
  -webkit-animation-name: v57eVeA_SAYcBDwSfUFy;
  animation-name: v57eVeA_SAYcBDwSfUFy;
}

@-webkit-keyframes e8EVrCTw2XQsg06haW_Z {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@keyframes e8EVrCTw2XQsg06haW_Z {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@-webkit-keyframes CX6lYZNu9MUrtbqMRKCi {
  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 CX6lYZNu9MUrtbqMRKCi {
  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 u7tTrHpzoYhokhgt0HLP {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes u7tTrHpzoYhokhgt0HLP {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes YueVoPSPf0Tw7G6ce9J2 {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@keyframes YueVoPSPf0Tw7G6ce9J2 {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@-webkit-keyframes aigVfpPHjvHjrl8Fnhca {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@keyframes aigVfpPHjvHjrl8Fnhca {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@-webkit-keyframes S3Tv1zoxLoTfd44R8s9J {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@keyframes S3Tv1zoxLoTfd44R8s9J {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes QHP7ogoVPqtmZRk418uQ {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@keyframes QHP7ogoVPqtmZRk418uQ {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes Ah6MIPkksnb06bwx57jN {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@keyframes Ah6MIPkksnb06bwx57jN {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@-webkit-keyframes zbT0yhv_oE9wsZtrcMaT {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@keyframes zbT0yhv_oE9wsZtrcMaT {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@-webkit-keyframes FuU52nl0Xfh_6sL4u3YO {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@keyframes FuU52nl0Xfh_6sL4u3YO {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes TWH7O9OGYr2lenx86Phn {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@keyframes TWH7O9OGYr2lenx86Phn {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes IQOxJBZpghfi_KuvCIEC {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@keyframes IQOxJBZpghfi_KuvCIEC {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@-webkit-keyframes Re6cMLs5BoTdVn9XiPrA {
  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 Re6cMLs5BoTdVn9XiPrA {
  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 Y7LaRrU5puAR_5TJauS2 {
  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 Y7LaRrU5puAR_5TJauS2 {
  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 XhvraUn3j4glx4WyF7z8 {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes XhvraUn3j4glx4WyF7z8 {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes ldVpOERQyS7SqQ8Yz6Gh {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes ldVpOERQyS7SqQ8Yz6Gh {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes Difpwdj1DM8Dh0ySmA4V {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes Difpwdj1DM8Dh0ySmA4V {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes b1HokaStiJYOP0vjQmiQ {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes b1HokaStiJYOP0vjQmiQ {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes zJajhjGckaYEpxkkR44U {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@keyframes zJajhjGckaYEpxkkR44U {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@-webkit-keyframes QSbP1UBB2mPrICPtfJbQ {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@keyframes QSbP1UBB2mPrICPtfJbQ {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@-webkit-keyframes uAuZ0FVDP2D4TV_BYReb {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes uAuZ0FVDP2D4TV_BYReb {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.uAuZ0FVDP2D4TV_BYReb {
  -webkit-animation-name: uAuZ0FVDP2D4TV_BYReb;
  animation-name: uAuZ0FVDP2D4TV_BYReb;
}

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

@keyframes FAuG0Dfj5i_Dhhpd4Tth {
  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 FAuG0Dfj5i_Dhhpd4Tth {
  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 rKT2sDYk6kZ3ZOGRzD45 {
  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 rKT2sDYk6kZ3ZOGRzD45 {
  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 a3j3dNxlrYyn_mOj8MVS {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes a3j3dNxlrYyn_mOj8MVS {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.a3j3dNxlrYyn_mOj8MVS {
  -webkit-animation-name: a3j3dNxlrYyn_mOj8MVS;
  animation-name: a3j3dNxlrYyn_mOj8MVS;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

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

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

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

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

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

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

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

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

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

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

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

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

.hsDF13QwEk28Pl954MdG {
  transition-duration: 0.4s;
}

.PRc307DW_eGNJ9UuJILd {
  transition-duration: 0.2s;
}

.D7gz40FEICuDfbO1osmH {
  transition-duration: 0.1s;
}

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

@-webkit-keyframes q_bwpTqhHbnlab2jV8mY {
  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 q_bwpTqhHbnlab2jV8mY {
  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);
  }
}
.q_bwpTqhHbnlab2jV8mY {
  -webkit-animation-name: q_bwpTqhHbnlab2jV8mY;
  animation-name: q_bwpTqhHbnlab2jV8mY;
}

@-webkit-keyframes Uxgj6XEgv9UJ7dkSVBJd {
  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 Uxgj6XEgv9UJ7dkSVBJd {
  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 Uxgj6XEgv9UJ7dkSVBJd {
  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;
  }
}
.Uxgj6XEgv9UJ7dkSVBJd {
  -webkit-animation-name: Uxgj6XEgv9UJ7dkSVBJd;
  animation-name: Uxgj6XEgv9UJ7dkSVBJd;
}

@-webkit-keyframes tzZoHgCeISJLbsxILSFN {
  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 tzZoHgCeISJLbsxILSFN {
  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 tzZoHgCeISJLbsxILSFN {
  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);
  }
}
.tzZoHgCeISJLbsxILSFN {
  -webkit-animation-name: tzZoHgCeISJLbsxILSFN;
  animation-name: tzZoHgCeISJLbsxILSFN;
}

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

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

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

@keyframes BR0W7WRtPHk7o7oq59kQ {
  0% {
    bottom: -60px;
    right: -30px;
  }
  100% {
    bottom: -30px;
    right: 0;
  }
}
/* Bouncing Loading Box */
@keyframes yV7tTrs51D1gZfRwVKaZ {
  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 yV7tTrs51D1gZfRwVKaZ {
  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 IDCPFZ5uJkXC1q8xB2mb {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}
@-webkit-keyframes IDCPFZ5uJkXC1q8xB2mb {
  0%, 100% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1);
  }
}
.Tq26IXJs4IV8WnoR5Eo1 {
  bottom: 0;
  height: 75px;
  left: 0;
  margin: auto;
  position: relative;
  right: 0;
  top: 0;
  width: 49px;
}

.Tq26IXJs4IV8WnoR5Eo1:before {
  -webkit-animation: IDCPFZ5uJkXC1q8xB2mb 0.58s linear infinite;
  animation: IDCPFZ5uJkXC1q8xB2mb 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;
}

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

.Tq26IXJs4IV8WnoR5Eo1.D7SYEQ8vdWhE1NfoOdaM:after {
  background: #fff;
}

/* End of Bouncing Loading Box */
@-webkit-keyframes pjGlwO2P1nT0fCziHayE {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-moz-keyframes pjGlwO2P1nT0fCziHayE {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes pjGlwO2P1nT0fCziHayE {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-webkit-keyframes NyGXUSCjJyZCSeHPT8Ni {
  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 NyGXUSCjJyZCSeHPT8Ni {
  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);
  }
}
.NyGXUSCjJyZCSeHPT8Ni {
  -webkit-animation-name: NyGXUSCjJyZCSeHPT8Ni;
  animation-name: NyGXUSCjJyZCSeHPT8Ni;
}

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

.gDWVHu3_Y6_qmF4JGFcD {
  -webkit-animation: XPsX_epLGBjap2__k6Vu 2.5s linear infinite;
  animation: XPsX_epLGBjap2__k6Vu 2.5s linear infinite;
}

.Dw7m5uRPIDfrA3EQeRUB {
  -webkit-animation: kSGZjfTsH9XiWTw2lfy1 2.5s linear infinite;
  animation: kSGZjfTsH9XiWTw2lfy1 2.5s linear infinite;
}

.F0IN3AdoedUX_csLi9Vb {
  -webkit-animation: kSGZjfTsH9XiWTw2lfy1 2s linear infinite;
  animation: kSGZjfTsH9XiWTw2lfy1 2s linear infinite;
}

.uTdvlmt_5AISlpJeRnEe {
  -webkit-animation: DywsZWCcNY4XjBIVAqIW 1.5s linear infinite;
  animation: DywsZWCcNY4XjBIVAqIW 1.5s linear infinite;
}

@keyframes DywsZWCcNY4XjBIVAqIW {
  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 DywsZWCcNY4XjBIVAqIW {
  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 XPsX_epLGBjap2__k6Vu {
  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 XPsX_epLGBjap2__k6Vu {
  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 XPsX_epLGBjap2__k6Vu {
  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 kSGZjfTsH9XiWTw2lfy1 {
  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 kSGZjfTsH9XiWTw2lfy1 {
  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 kSGZjfTsH9XiWTw2lfy1 {
  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 wvSfrdQD6W4SIoqgvlxT {
  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 wvSfrdQD6W4SIoqgvlxT {
  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);
  }
}
.wvSfrdQD6W4SIoqgvlxT {
  -webkit-animation-name: wvSfrdQD6W4SIoqgvlxT;
  animation-name: wvSfrdQD6W4SIoqgvlxT;
}

@-webkit-keyframes RhZQTxn8thmjyZAkk7ht {
  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 RhZQTxn8thmjyZAkk7ht {
  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);
  }
}
.RhZQTxn8thmjyZAkk7ht {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: RhZQTxn8thmjyZAkk7ht;
  animation-name: RhZQTxn8thmjyZAkk7ht;
}

@-webkit-keyframes CZpStXG8jF4KMkwbwxzN {
  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 CZpStXG8jF4KMkwbwxzN {
  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);
  }
}
.CZpStXG8jF4KMkwbwxzN {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: CZpStXG8jF4KMkwbwxzN;
  animation-name: CZpStXG8jF4KMkwbwxzN;
}

@-webkit-keyframes Ni1ihh4B9NttA15hm3HY {
  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 Ni1ihh4B9NttA15hm3HY {
  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;
  }
}
.Ni1ihh4B9NttA15hm3HY {
  -webkit-animation-name: Ni1ihh4B9NttA15hm3HY;
  animation-name: Ni1ihh4B9NttA15hm3HY;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes woboBR_QBsw59Ll692Q9 {
  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 DrKz0FXqEfQIJs5O37gM {
  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 woboBR_QBsw59Ll692Q9 {
  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;
  }
}
.woboBR_QBsw59Ll692Q9 {
  -webkit-animation-name: woboBR_QBsw59Ll692Q9;
  animation-name: woboBR_QBsw59Ll692Q9;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

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

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

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

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

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

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

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

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

.OrJgxn3Gx2sNXIdOIPwd.wqIbLZMWVnLxqRqCFRUG {
  animation: y2x9klTn4lFC0X1XBdZh 0.25s linear;
  -webkit-animation: y2x9klTn4lFC0X1XBdZh 0.25s linear; /* Chrome, Safari, Opera */
}
.OrJgxn3Gx2sNXIdOIPwd.eUnMGaZn9NB5IwZo0PlK {
  animation: LIuhcM75FH90s8FlLVrK 0.25s linear;
  -webkit-animation: LIuhcM75FH90s8FlLVrK 0.25s linear; /* Chrome, Safari, Opera */
}
.OrJgxn3Gx2sNXIdOIPwd.Ux7H2PFuXhIBwKzk_w6K {
  animation: TkhPiUFoOrwadmXH2Qub 0.15s linear;
  -webkit-animation: TkhPiUFoOrwadmXH2Qub 0.15s linear; /* Chrome, Safari, Opera */
}
.OrJgxn3Gx2sNXIdOIPwd.C5BZ02uNQohuwbZT02Tl {
  animation: a8XIyMEGicyREibnDPXD 0.15s linear;
  -webkit-animation: a8XIyMEGicyREibnDPXD 0.15s linear; /* Chrome, Safari, Opera */
}
.OrJgxn3Gx2sNXIdOIPwd.hK4INm9ex5s2gNtEoPlb {
  animation: y2x9klTn4lFC0X1XBdZh 0.4s linear;
  -webkit-animation: y2x9klTn4lFC0X1XBdZh 0.4s linear; /* Chrome, Safari, Opera */
}
.OrJgxn3Gx2sNXIdOIPwd.gXKVvx878klHYUOFC2HX {
  animation: LIuhcM75FH90s8FlLVrK 0.4s linear;
  -webkit-animation: LIuhcM75FH90s8FlLVrK 0.4s linear; /* Chrome, Safari, Opera */
}

.BGjW5O4ndepiQmENVLB_.ZNPF3lXX7xYkY1AjsGnT {
  animation: FuiRIEqYS_TYnZHRPmtH 0.25s linear;
  -webkit-animation: FuiRIEqYS_TYnZHRPmtH 0.25s linear; /* Chrome, Safari, Opera */
}
.BGjW5O4ndepiQmENVLB_.Vs3MwON2WS3T4475J1I1 {
  animation: OJxV8pmFxqg6vwfwGR_a 0.25s linear;
  -webkit-animation: OJxV8pmFxqg6vwfwGR_a 0.25s linear; /* Chrome, Safari, Opera */
}
.BGjW5O4ndepiQmENVLB_.TzpHsjvSJkmDLQaz3BFp {
  animation: Upse4uKKrcS8oKddfrNf 0.15s linear;
  -webkit-animation: Upse4uKKrcS8oKddfrNf 0.15s linear; /* Chrome, Safari, Opera */
}
.BGjW5O4ndepiQmENVLB_.J2hXAqR6SaXPSGQCQ5cr {
  animation: k73pTBX_03EUAKui9XR4 0.15s linear;
  -webkit-animation: k73pTBX_03EUAKui9XR4 0.15s linear; /* Chrome, Safari, Opera */
}
.BGjW5O4ndepiQmENVLB_.MZxor77QoeO_PBi49V6J {
  animation: FuiRIEqYS_TYnZHRPmtH 0.4s linear;
  -webkit-animation: FuiRIEqYS_TYnZHRPmtH 0.4s linear; /* Chrome, Safari, Opera */
}
.BGjW5O4ndepiQmENVLB_.iHMdm2EgWsz7shh1320a {
  animation: OJxV8pmFxqg6vwfwGR_a 0.4s linear;
  -webkit-animation: OJxV8pmFxqg6vwfwGR_a 0.4s linear; /* Chrome, Safari, Opera */
}

@-webkit-keyframes Z2M8Vs9E3n4tQOnaBz9u {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}
@keyframes Z2M8Vs9E3n4tQOnaBz9u {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes k2qc_kSrWr1z7hyK1ZlW {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes k2qc_kSrWr1z7hyK1ZlW {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes LIuhcM75FH90s8FlLVrK {
  0% {
    transform: translateX(150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes y2x9klTn4lFC0X1XBdZh {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@-webkit-keyframes y2x9klTn4lFC0X1XBdZh {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes TkhPiUFoOrwadmXH2Qub {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes TkhPiUFoOrwadmXH2Qub {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes a8XIyMEGicyREibnDPXD {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes a8XIyMEGicyREibnDPXD {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes OJxV8pmFxqg6vwfwGR_a {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@-webkit-keyframes OJxV8pmFxqg6vwfwGR_a {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@keyframes FuiRIEqYS_TYnZHRPmtH {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@-webkit-keyframes FuiRIEqYS_TYnZHRPmtH {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@keyframes Upse4uKKrcS8oKddfrNf {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@-webkit-keyframes Upse4uKKrcS8oKddfrNf {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@keyframes k73pTBX_03EUAKui9XR4 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@-webkit-keyframes k73pTBX_03EUAKui9XR4 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@keyframes r3e761ZwTQPXlh8hMLUa {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@-webkit-keyframes r3e761ZwTQPXlh8hMLUa {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@keyframes X0X8GeAY3yURw6hvDvIM {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0.5;
  }
}
@keyframes esNlwT8w4llNWSJRE9Fs {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0;
  }
}
@keyframes aVLc8pAqPCM2Iw_ggFPS {
  0%, 19%, 40%, 60%, 80%, 100% {
    opacity: 0;
  }
  20%, 39% {
    opacity: 1;
  }
}
@keyframes iv5dZqjMqhMkyMmsCyaT {
  0%, 20%, 39%, 60%, 80%, 100% {
    opacity: 0;
  }
  40%, 59% {
    opacity: 1;
  }
}
@keyframes hbOMuvOEC6SzMwy2q4aY {
  0%, 20%, 40%, 59%, 80%, 100% {
    opacity: 0;
  }
  60%, 79% {
    opacity: 1;
  }
}
@keyframes khFS43ee1vath3gzP0TK {
  0%, 20%, 40%, 60%, 79%, 100% {
    opacity: 0;
  }
  80%, 99% {
    opacity: 1;
  }
}
@keyframes aypHSsO2t0wIzGgTdimc {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@-webkit-keyframes aypHSsO2t0wIzGgTdimc {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@keyframes HiB8vtA4d73FeKNMuTFQ {
  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 HiB8vtA4d73FeKNMuTFQ {
  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 JKUFrG6o6SBC1q8y1uhy {
  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 JKUFrG6o6SBC1q8y1uhy {
  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 IvDoUx26L0reM0xp2Agq {
  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 uBWVgtTQ9ZpT9LKdbsYI {
  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);
  }
}
.iWhAfmSEAlcFBTdA9sYm {
  background: linear-gradient(135deg, #3FBCE8 0%, #825CEB 100%);
}

.mUP1mzKi2GeYzps0rQYQ {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  bottom: 16px;
  left: 0;
  max-width: 400px;
  min-height: 46px;
  min-width: 205px;
  opacity: 0.9;
  position: fixed;
  transition: bottom 0.3s ease-in-out;
  z-index: 6000;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
}

.mUP1mzKi2GeYzps0rQYQ.h3Rm8CoiP2NuhwNYdueI {
  transform: translate3d(-100%, 0, 0);
}

.mUP1mzKi2GeYzps0rQYQ.h3Rm8CoiP2NuhwNYdueI.UlzY67OKEDD_uYdGM99s {
  animation-name: yuI7i8E4lEpMDJGtYSyf;
  -webkit-animation-name: yuI7i8E4lEpMDJGtYSyf;
  transform: unset;
}

.mUP1mzKi2GeYzps0rQYQ.LyIzQPKbAsOXY7CdoMb0 {
  animation-name: qDb290X_UUEP5PAzGffU;
  -webkit-animation-name: qDb290X_UUEP5PAzGffU;
  left: 16px;
}
/*!*************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/message-growl/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.mcwe9JmZ4c7gTlHj_UW2 {
  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
*/
.TdK5yfzKz_1lA_9vRdxL {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.TdK5yfzKz_1lA_9vRdxL.ccleRF2o44PqrLxvgnGe {
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
.TdK5yfzKz_1lA_9vRdxL._ZAnI9WVE2HiZalsWL6V {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.TdK5yfzKz_1lA_9vRdxL.rHfNNmn6dykWut76yeaM {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}

.TdK5yfzKz_1lA_9vRdxL.dgEJYmX4IxijfC3t0B2g {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

.TdK5yfzKz_1lA_9vRdxL.ethuyOkUbeYVu5hkD0HR {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

.TdK5yfzKz_1lA_9vRdxL.N5ciV0a_X43uCkRYtkD_ {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.TdK5yfzKz_1lA_9vRdxL.MjSw2XmmVQ1OLHTLhT0A {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
}

.TdK5yfzKz_1lA_9vRdxL.PsShnfhb2bW_QpcuuNdO {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.TdK5yfzKz_1lA_9vRdxL.QvYm6EC4y1pSSnQmeBiL {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
}

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

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

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

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

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

@keyframes FaKWbpMlRLtTop6iu6tc {
  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 vqRURpwxoeN4V9q0dGqF {
  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);
  }
}
.FMLihrXSrmnqJP0VTSRj {
  -webkit-transform-origin: left; /* Chrome, Safari, Opera */
  transform-origin: left;
}

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

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

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

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

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

.G_hOUh1idLrGnIvcav5V {
  opacity: 1;
  -webkit-transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.G_hOUh1idLrGnIvcav5V: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);
}

.Dep6eP13XD2fNJ0RWSU8 {
  -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 htpeq5sMtOXsakjXc36m {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes htpeq5sMtOXsakjXc36m {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.htpeq5sMtOXsakjXc36m {
  -webkit-animation-name: htpeq5sMtOXsakjXc36m;
  animation-name: htpeq5sMtOXsakjXc36m;
}

@-webkit-keyframes fc4As54NckujlqGVHTXp {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@keyframes fc4As54NckujlqGVHTXp {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@-webkit-keyframes _0jK7CMM2HEysvDk2m2sC {
  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 _0jK7CMM2HEysvDk2m2sC {
  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 tK6AHQycT2XxO0V4Cqeo {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tK6AHQycT2XxO0V4Cqeo {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes i8ZBzxrccl7yqpR4CCnT {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@keyframes i8ZBzxrccl7yqpR4CCnT {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@-webkit-keyframes hJ2OTmGQuYtADfrGS4uo {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@keyframes hJ2OTmGQuYtADfrGS4uo {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@-webkit-keyframes mbFOjC31mwGdfLeQVDCP {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@keyframes mbFOjC31mwGdfLeQVDCP {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes bT2Kn8tYrPK9anoS4dQg {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@keyframes bT2Kn8tYrPK9anoS4dQg {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes FghQOidB63OZWPRn49I6 {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@keyframes FghQOidB63OZWPRn49I6 {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@-webkit-keyframes A4SD4l6cllWtDVLM33SB {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@keyframes A4SD4l6cllWtDVLM33SB {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@-webkit-keyframes oakIi16EXqbjNgTQguh5 {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@keyframes oakIi16EXqbjNgTQguh5 {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes F0qGV7XMYSZE2wAG0UWD {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@keyframes F0qGV7XMYSZE2wAG0UWD {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes n8yJ7rUc5b2JqfA2ITSt {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@keyframes n8yJ7rUc5b2JqfA2ITSt {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@-webkit-keyframes _DBeyon6874sI6A4xz4z {
  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 _DBeyon6874sI6A4xz4z {
  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 EIOXv11suWn0yizbSL8t {
  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 EIOXv11suWn0yizbSL8t {
  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 OM7cEhkY8_aYTW0okcey {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes OM7cEhkY8_aYTW0okcey {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes AYhlW6kHvwcCriL9r7dx {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes AYhlW6kHvwcCriL9r7dx {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes OqkopXWMkg9cb9PZQc9M {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes OqkopXWMkg9cb9PZQc9M {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes NrQCsBbiokVf5MKTzbou {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes NrQCsBbiokVf5MKTzbou {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes TF7TH21HeuSx6CdAU5vf {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@keyframes TF7TH21HeuSx6CdAU5vf {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@-webkit-keyframes tcWyb74DMhAwHukOjsIZ {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@keyframes tcWyb74DMhAwHukOjsIZ {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@-webkit-keyframes eTXNzbH_HjdrDKOKbdj9 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes eTXNzbH_HjdrDKOKbdj9 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.eTXNzbH_HjdrDKOKbdj9 {
  -webkit-animation-name: eTXNzbH_HjdrDKOKbdj9;
  animation-name: eTXNzbH_HjdrDKOKbdj9;
}

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

@keyframes jDcDYL9H0mIfG0_V9KRE {
  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 jDcDYL9H0mIfG0_V9KRE {
  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 jrcB6UTvmMkAGcDJlF0B {
  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 jrcB6UTvmMkAGcDJlF0B {
  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 CPRGO4KHZDeLu5iFWBgs {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes CPRGO4KHZDeLu5iFWBgs {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.CPRGO4KHZDeLu5iFWBgs {
  -webkit-animation-name: CPRGO4KHZDeLu5iFWBgs;
  animation-name: CPRGO4KHZDeLu5iFWBgs;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

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

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

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

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

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

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

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

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

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

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

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

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

.kfNHiSkyOqIqat4ipx2_ {
  transition-duration: 0.4s;
}

.e3bgNOaqtvG8GPzAEhuN {
  transition-duration: 0.2s;
}

.n6uuelR4IT6SOxkeI_L7 {
  transition-duration: 0.1s;
}

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

@-webkit-keyframes _dgqhzRK5TWKE72hzEcU {
  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 _dgqhzRK5TWKE72hzEcU {
  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);
  }
}
._dgqhzRK5TWKE72hzEcU {
  -webkit-animation-name: _dgqhzRK5TWKE72hzEcU;
  animation-name: _dgqhzRK5TWKE72hzEcU;
}

@-webkit-keyframes RVbsWPwt1lW2TwLlkyXR {
  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 RVbsWPwt1lW2TwLlkyXR {
  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 RVbsWPwt1lW2TwLlkyXR {
  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;
  }
}
.RVbsWPwt1lW2TwLlkyXR {
  -webkit-animation-name: RVbsWPwt1lW2TwLlkyXR;
  animation-name: RVbsWPwt1lW2TwLlkyXR;
}

@-webkit-keyframes QclxwEAObc35ii9ED3Hw {
  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 QclxwEAObc35ii9ED3Hw {
  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 QclxwEAObc35ii9ED3Hw {
  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);
  }
}
.QclxwEAObc35ii9ED3Hw {
  -webkit-animation-name: QclxwEAObc35ii9ED3Hw;
  animation-name: QclxwEAObc35ii9ED3Hw;
}

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

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

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

@keyframes klMzeEIsmQZnzEhtmymZ {
  0% {
    bottom: -60px;
    right: -30px;
  }
  100% {
    bottom: -30px;
    right: 0;
  }
}
/* Bouncing Loading Box */
@keyframes RiJn_QBlVEI0bcvblpgH {
  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 RiJn_QBlVEI0bcvblpgH {
  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 aw1EwYhYmRQOvcsDMny9 {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}
@-webkit-keyframes aw1EwYhYmRQOvcsDMny9 {
  0%, 100% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1);
  }
}
.HbyU9vQck6yszDIT2DuQ {
  bottom: 0;
  height: 75px;
  left: 0;
  margin: auto;
  position: relative;
  right: 0;
  top: 0;
  width: 49px;
}

.HbyU9vQck6yszDIT2DuQ:before {
  -webkit-animation: aw1EwYhYmRQOvcsDMny9 0.58s linear infinite;
  animation: aw1EwYhYmRQOvcsDMny9 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;
}

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

.HbyU9vQck6yszDIT2DuQ.bqt5FjT3nlG9W5YwtJu0:after {
  background: #fff;
}

/* End of Bouncing Loading Box */
@-webkit-keyframes U_6CBfXzSSJ8Hj1RwjCg {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-moz-keyframes U_6CBfXzSSJ8Hj1RwjCg {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes U_6CBfXzSSJ8Hj1RwjCg {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-webkit-keyframes NRiISWS9hkHUS9Dw0t1w {
  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 NRiISWS9hkHUS9Dw0t1w {
  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);
  }
}
.NRiISWS9hkHUS9Dw0t1w {
  -webkit-animation-name: NRiISWS9hkHUS9Dw0t1w;
  animation-name: NRiISWS9hkHUS9Dw0t1w;
}

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

.q5GxUZPAKQ9HunGdeAjA {
  -webkit-animation: a8xT8wOUsa4m9UDFjx6r 2.5s linear infinite;
  animation: a8xT8wOUsa4m9UDFjx6r 2.5s linear infinite;
}

.Nk45_wQ2VC505EDI5P_e {
  -webkit-animation: Ngt4elTFTufvJza435w9 2.5s linear infinite;
  animation: Ngt4elTFTufvJza435w9 2.5s linear infinite;
}

.BKjiUhNNpctPZsKDfgUF {
  -webkit-animation: Ngt4elTFTufvJza435w9 2s linear infinite;
  animation: Ngt4elTFTufvJza435w9 2s linear infinite;
}

.AUbFcObLOH3P9UsA7lO9 {
  -webkit-animation: A5Z6Hs8IMAH7LbcFADg6 1.5s linear infinite;
  animation: A5Z6Hs8IMAH7LbcFADg6 1.5s linear infinite;
}

@keyframes A5Z6Hs8IMAH7LbcFADg6 {
  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 A5Z6Hs8IMAH7LbcFADg6 {
  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 a8xT8wOUsa4m9UDFjx6r {
  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 a8xT8wOUsa4m9UDFjx6r {
  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 a8xT8wOUsa4m9UDFjx6r {
  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 Ngt4elTFTufvJza435w9 {
  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 Ngt4elTFTufvJza435w9 {
  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 Ngt4elTFTufvJza435w9 {
  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 Ss8d_RUoJu3zebUaPNXs {
  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 Ss8d_RUoJu3zebUaPNXs {
  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);
  }
}
.Ss8d_RUoJu3zebUaPNXs {
  -webkit-animation-name: Ss8d_RUoJu3zebUaPNXs;
  animation-name: Ss8d_RUoJu3zebUaPNXs;
}

@-webkit-keyframes BQU8Jb0RaKJHJnNISbs1 {
  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 BQU8Jb0RaKJHJnNISbs1 {
  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);
  }
}
.BQU8Jb0RaKJHJnNISbs1 {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: BQU8Jb0RaKJHJnNISbs1;
  animation-name: BQU8Jb0RaKJHJnNISbs1;
}

@-webkit-keyframes i19eZUnrRQUAwWWvsWXl {
  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 i19eZUnrRQUAwWWvsWXl {
  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);
  }
}
.i19eZUnrRQUAwWWvsWXl {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: i19eZUnrRQUAwWWvsWXl;
  animation-name: i19eZUnrRQUAwWWvsWXl;
}

@-webkit-keyframes Dg0mwKOLeHTpgTOZPpdX {
  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 Dg0mwKOLeHTpgTOZPpdX {
  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;
  }
}
.Dg0mwKOLeHTpgTOZPpdX {
  -webkit-animation-name: Dg0mwKOLeHTpgTOZPpdX;
  animation-name: Dg0mwKOLeHTpgTOZPpdX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes yxHjRKZs3No1DrFodQ8q {
  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 G1ZHhx6K5Nc7y8E3meuR {
  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 yxHjRKZs3No1DrFodQ8q {
  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;
  }
}
.yxHjRKZs3No1DrFodQ8q {
  -webkit-animation-name: yxHjRKZs3No1DrFodQ8q;
  animation-name: yxHjRKZs3No1DrFodQ8q;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

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

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

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

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

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

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

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

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

.kTg0ZzadyhX96orpFHvA.jLm9abCFmzISxn5QRg9G {
  animation: mMQ2RagDGTyvYtOSE9sI 0.25s linear;
  -webkit-animation: mMQ2RagDGTyvYtOSE9sI 0.25s linear; /* Chrome, Safari, Opera */
}
.kTg0ZzadyhX96orpFHvA.zgunvojvxnsCOD4Q6Siq {
  animation: jrWKgghwmIdEyMokPhRu 0.25s linear;
  -webkit-animation: jrWKgghwmIdEyMokPhRu 0.25s linear; /* Chrome, Safari, Opera */
}
.kTg0ZzadyhX96orpFHvA.J2ZlWqNU2dTzoQNezC8Q {
  animation: hIFIeaAOF5DDvK9SGej5 0.15s linear;
  -webkit-animation: hIFIeaAOF5DDvK9SGej5 0.15s linear; /* Chrome, Safari, Opera */
}
.kTg0ZzadyhX96orpFHvA.iBgGsH9vun1pM5RXCRhO {
  animation: ebK25FTgyUs3mbrDbUyb 0.15s linear;
  -webkit-animation: ebK25FTgyUs3mbrDbUyb 0.15s linear; /* Chrome, Safari, Opera */
}
.kTg0ZzadyhX96orpFHvA.MFqhzj429FJpuhUB4dmg {
  animation: mMQ2RagDGTyvYtOSE9sI 0.4s linear;
  -webkit-animation: mMQ2RagDGTyvYtOSE9sI 0.4s linear; /* Chrome, Safari, Opera */
}
.kTg0ZzadyhX96orpFHvA.Kqb4iCsz2USsrdaTdcfh {
  animation: jrWKgghwmIdEyMokPhRu 0.4s linear;
  -webkit-animation: jrWKgghwmIdEyMokPhRu 0.4s linear; /* Chrome, Safari, Opera */
}

.oH__11Db0wDlCD1Sk576.JkVxLvoa8M4_J6ui4Dg_ {
  animation: h8KI1rTtRprl8d0p5RWI 0.25s linear;
  -webkit-animation: h8KI1rTtRprl8d0p5RWI 0.25s linear; /* Chrome, Safari, Opera */
}
.oH__11Db0wDlCD1Sk576.okkZ57umqv18WHrtrLQN {
  animation: JqAR_4rYoOu_1M0aQlbX 0.25s linear;
  -webkit-animation: JqAR_4rYoOu_1M0aQlbX 0.25s linear; /* Chrome, Safari, Opera */
}
.oH__11Db0wDlCD1Sk576.qenRyigQiVeLlndPtYV_ {
  animation: EgZEpFQfymZnqEEjVL_z 0.15s linear;
  -webkit-animation: EgZEpFQfymZnqEEjVL_z 0.15s linear; /* Chrome, Safari, Opera */
}
.oH__11Db0wDlCD1Sk576.j5U3K6r6qZ32parVPWYp {
  animation: XAnfCDHGghiKUsMSPhRS 0.15s linear;
  -webkit-animation: XAnfCDHGghiKUsMSPhRS 0.15s linear; /* Chrome, Safari, Opera */
}
.oH__11Db0wDlCD1Sk576.jRcRAl3NN6EHlBgQrhtl {
  animation: h8KI1rTtRprl8d0p5RWI 0.4s linear;
  -webkit-animation: h8KI1rTtRprl8d0p5RWI 0.4s linear; /* Chrome, Safari, Opera */
}
.oH__11Db0wDlCD1Sk576.xNtKILSHndAJl5emZlri {
  animation: JqAR_4rYoOu_1M0aQlbX 0.4s linear;
  -webkit-animation: JqAR_4rYoOu_1M0aQlbX 0.4s linear; /* Chrome, Safari, Opera */
}

@-webkit-keyframes GRxZqXqnAtiOlBDhrgkP {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}
@keyframes GRxZqXqnAtiOlBDhrgkP {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes U7ex_qrExVbtZ5WFwYaK {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes U7ex_qrExVbtZ5WFwYaK {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes jrWKgghwmIdEyMokPhRu {
  0% {
    transform: translateX(150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes mMQ2RagDGTyvYtOSE9sI {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@-webkit-keyframes mMQ2RagDGTyvYtOSE9sI {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes hIFIeaAOF5DDvK9SGej5 {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes hIFIeaAOF5DDvK9SGej5 {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes ebK25FTgyUs3mbrDbUyb {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes ebK25FTgyUs3mbrDbUyb {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes JqAR_4rYoOu_1M0aQlbX {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@-webkit-keyframes JqAR_4rYoOu_1M0aQlbX {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@keyframes h8KI1rTtRprl8d0p5RWI {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@-webkit-keyframes h8KI1rTtRprl8d0p5RWI {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@keyframes EgZEpFQfymZnqEEjVL_z {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@-webkit-keyframes EgZEpFQfymZnqEEjVL_z {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@keyframes XAnfCDHGghiKUsMSPhRS {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@-webkit-keyframes XAnfCDHGghiKUsMSPhRS {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@keyframes NaBeTNziLCHAePJjsdzg {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@-webkit-keyframes NaBeTNziLCHAePJjsdzg {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@keyframes j0LlZXGiRDIi0LrnPx9j {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0.5;
  }
}
@keyframes quBdNJ45OHu9Jq8wpvxn {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0;
  }
}
@keyframes _WkIAexu3Vvryc5Nxka4 {
  0%, 19%, 40%, 60%, 80%, 100% {
    opacity: 0;
  }
  20%, 39% {
    opacity: 1;
  }
}
@keyframes Bpaa9YHR1wdWvA3o_nIk {
  0%, 20%, 39%, 60%, 80%, 100% {
    opacity: 0;
  }
  40%, 59% {
    opacity: 1;
  }
}
@keyframes DWymHFrF1e_1Z8uRxLTV {
  0%, 20%, 40%, 59%, 80%, 100% {
    opacity: 0;
  }
  60%, 79% {
    opacity: 1;
  }
}
@keyframes EvlGn4_PE2DXu08whEUi {
  0%, 20%, 40%, 60%, 79%, 100% {
    opacity: 0;
  }
  80%, 99% {
    opacity: 1;
  }
}
@keyframes UGNDnxi52gZ63JxVf_aN {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@-webkit-keyframes UGNDnxi52gZ63JxVf_aN {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@keyframes vE2n4uUTRxl6JaZs3FuL {
  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 vE2n4uUTRxl6JaZs3FuL {
  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 kijdWCi_U5JKjxzECvcx {
  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 kijdWCi_U5JKjxzECvcx {
  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 FZ_y9fflPHeUvEVCvKwN {
  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 iBlbLwYwMiKGNw02eBW2 {
  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);
  }
}
.UW8iPb2sLlByQHNGGcYH {
  align-items: stretch;
  -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 4px 20px rgba(0, 0, 0, 0.12);
  height: 64px;
  left: 0;
  max-width: 310px;
  opacity: 0.9;
  position: absolute;
  z-index: 6000;
}
.UW8iPb2sLlByQHNGGcYH.SSzZBUfFrh24zNe1ALJR {
  -webkit-animation-name: M_5HsGTembIPpHwroA7J;
  animation-name: M_5HsGTembIPpHwroA7J;
  left: 16px;
}
.UW8iPb2sLlByQHNGGcYH.IWWRQ6XsQ9ujlK90eWiO {
  transform: translate3d(-100%, 0, 0);
}
.UW8iPb2sLlByQHNGGcYH.IWWRQ6XsQ9ujlK90eWiO.rQl7x9poee2_wY_01Am9 {
  -webkit-animation-name: DLiMmFvzcJ5KRZGEW_Pl;
  animation-name: DLiMmFvzcJ5KRZGEW_Pl;
}
.UW8iPb2sLlByQHNGGcYH.ntS9VXr2lD9GqVoCskp2 {
  bottom: 143px;
}
.UW8iPb2sLlByQHNGGcYH.jYl_zCeIBqAJGvfjFBov {
  bottom: 76px;
}
.UW8iPb2sLlByQHNGGcYH.w6J93Hb7WtASkvs7zdTu {
  bottom: 68px;
}
.UW8iPb2sLlByQHNGGcYH.y8OzSuAXgsSY_wgfIKM0 {
  bottom: 96px;
}
.UW8iPb2sLlByQHNGGcYH.jYl_zCeIBqAJGvfjFBov.ntS9VXr2lD9GqVoCskp2 {
  bottom: 203px;
}
.UW8iPb2sLlByQHNGGcYH.ntS9VXr2lD9GqVoCskp2.w6J93Hb7WtASkvs7zdTu {
  bottom: 200px;
}
.UW8iPb2sLlByQHNGGcYH.ntS9VXr2lD9GqVoCskp2.y8OzSuAXgsSY_wgfIKM0 {
  bottom: 223px;
}
.UW8iPb2sLlByQHNGGcYH.jYl_zCeIBqAJGvfjFBov.w6J93Hb7WtASkvs7zdTu {
  bottom: 133px;
}
.UW8iPb2sLlByQHNGGcYH.jYl_zCeIBqAJGvfjFBov.y8OzSuAXgsSY_wgfIKM0 {
  bottom: 156px;
}
.UW8iPb2sLlByQHNGGcYH.jYl_zCeIBqAJGvfjFBov.ntS9VXr2lD9GqVoCskp2.w6J93Hb7WtASkvs7zdTu {
  bottom: 258px;
}
.UW8iPb2sLlByQHNGGcYH.jYl_zCeIBqAJGvfjFBov.ntS9VXr2lD9GqVoCskp2.y8OzSuAXgsSY_wgfIKM0 {
  bottom: 283px;
}

.Zy8PxpVBbQfqx8SuQT2Q {
  border-radius: 4px 0 0 4px;
  min-width: 4px;
}

.Yn0p1_cHukZkm8nWGgjQ {
  height: 40px;
}

.bAmul3LVthAhQWXChNO1 {
  height: 64px;
}

.Hi6jyyeHvMg9JsbHwzLp {
  background: #24C19C;
}

.Vj97Gu_UTn37itrY8ssG {
  background: #D32559;
}

.RkNXM0AZFcs1VjQb64Gf {
  background: #E8B93F;
}

.BpDfPM1PtbrnQ0_iPQtw {
  background: #9577E7;
}

.D3Z9Q_6UrvYJfYElb6eB {
  background: #2C2B44;
}

.vyKYEdBOrwMhYZWDBdMJ {
  background: linear-gradient(180deg, #3FBCE7 0%, #4A51D3 100%);
}

.fdnnqdrFxL6zYIUQn_15 {
  align-self: center;
  min-width: 178px;
}
/*!**************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-media-item/grid-media-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.aOpoBD4_5Kr_N7V81PjY {
  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 */
.rXCpE2zurvSgug5pdfY8 {
  background: #FAFAFA;
}

.fOR7PkFRxQryaNAbE7L_ {
  background: #F2F2F5;
}

.wVuKgsoYnUW7YWnP7jQh {
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  width: 100%;
}

.pK77om3LqMmbG5f_pr7G {
  max-height: calc(100% - 20px);
  max-width: calc(100% - 20px);
}

.MPxc6mnlw5v58Cz4lLNW {
  overflow: hidden;
  position: absolute;
}

.a1mubqJlCZF1onbjtYNw {
  position: relative;
}

.RPeq_ScRp6MYUG1eOajc {
  position: absolute;
}

.uGs0CIkLrXgIPoIqoGp4 {
  left: auto;
  top: auto;
  z-index: 2;
}

.ElSz6NZDWpHoNJ2LEDu0 {
  background: rgba(20, 19, 37, 0.8);
  border-radius: 12px;
  position: absolute;
  z-index: 1;
}

.kyCy0wAIRTE86_ULBJsl {
  max-width: 162px;
}
/*!**************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-item/grid-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.YM7eKpe2rdJmiP8dfavj {
  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
*/
.tpIG3Hy7AAiyCvSVixsp {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.tpIG3Hy7AAiyCvSVixsp.rf0VGDX9HwpBKjTg1cxo {
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
.tpIG3Hy7AAiyCvSVixsp.w6gfxuIxV0e0gBLnpKwP {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.tpIG3Hy7AAiyCvSVixsp.YylweHiUq5QxRS8wLs6c {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}

.tpIG3Hy7AAiyCvSVixsp.IGmt1sHMBeYAdxszqHCk {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

.tpIG3Hy7AAiyCvSVixsp.CcQeHjzHi5l9BYJ3PZsg {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

.tpIG3Hy7AAiyCvSVixsp.wvHIN3Z_AXLZgEB3IITG {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.tpIG3Hy7AAiyCvSVixsp.lkcy6O9nX3HFu9HEAb1s {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
}

.tpIG3Hy7AAiyCvSVixsp.xPvNFivuZcsRPpzGIckA {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.tpIG3Hy7AAiyCvSVixsp.eD30lBGLHvF9hQ0uGaHi {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
}

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

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

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

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

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

@keyframes axUmBf5Tr7KFAdxSpPfn {
  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 zbomFaSyJzL6HxCKrPd_ {
  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);
  }
}
.uhnPni3FU7N05_wgdS6z {
  -webkit-transform-origin: left; /* Chrome, Safari, Opera */
  transform-origin: left;
}

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

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

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

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

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

.Cg3iTWjJN9kdEYIU9fAl {
  opacity: 1;
  -webkit-transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.Cg3iTWjJN9kdEYIU9fAl: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);
}

.BTnqY7bSTkxNYA1gsRaH {
  -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 aft7VPD4akLk_NNukLWp {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes aft7VPD4akLk_NNukLWp {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.aft7VPD4akLk_NNukLWp {
  -webkit-animation-name: aft7VPD4akLk_NNukLWp;
  animation-name: aft7VPD4akLk_NNukLWp;
}

@-webkit-keyframes qgJVgMtylv3326_Wyxhl {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@keyframes qgJVgMtylv3326_Wyxhl {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@-webkit-keyframes A4Hs14b1iVHbcVnkaeiy {
  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 A4Hs14b1iVHbcVnkaeiy {
  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 Mn4kCaqHAHa3hC9ljl5L {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes Mn4kCaqHAHa3hC9ljl5L {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes tYczhd1ZOElRpeb136iw {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@keyframes tYczhd1ZOElRpeb136iw {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@-webkit-keyframes xgRGecRT0CQ4Q0AktXKZ {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@keyframes xgRGecRT0CQ4Q0AktXKZ {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@-webkit-keyframes G3vpHvfA5CJuoioyWYkq {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@keyframes G3vpHvfA5CJuoioyWYkq {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes jFb5UPFNT24YPxtIdqu0 {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@keyframes jFb5UPFNT24YPxtIdqu0 {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes jVoH3oQryqYQRmBhNHgO {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@keyframes jVoH3oQryqYQRmBhNHgO {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@-webkit-keyframes XvDxMySGiRCLHuhAnWMh {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@keyframes XvDxMySGiRCLHuhAnWMh {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@-webkit-keyframes nJN2qDDrkXRstV1NNxKT {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@keyframes nJN2qDDrkXRstV1NNxKT {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes OVHWwHG_VsZX97Pw26ij {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@keyframes OVHWwHG_VsZX97Pw26ij {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes IV8X0Q3qiMoJmVT0EDTX {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@keyframes IV8X0Q3qiMoJmVT0EDTX {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@-webkit-keyframes rlq9L5qIG3TxTvDZTGo1 {
  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 rlq9L5qIG3TxTvDZTGo1 {
  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 KlgyQMLKibBjoFlGy5Bp {
  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 KlgyQMLKibBjoFlGy5Bp {
  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 NVf4tzw_7nLKMby21Pmu {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes NVf4tzw_7nLKMby21Pmu {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes jWekKCtS_86ud1vHqrnR {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes jWekKCtS_86ud1vHqrnR {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes MlVrVWd5FkTxsolTYx_G {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes MlVrVWd5FkTxsolTYx_G {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes Ri6RvrO0ZOSVQqeOm2ng {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes Ri6RvrO0ZOSVQqeOm2ng {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes daJSboGzPu47HNYkXBp6 {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@keyframes daJSboGzPu47HNYkXBp6 {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@-webkit-keyframes ukLzbE0iWNhruwDoteJY {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@keyframes ukLzbE0iWNhruwDoteJY {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@-webkit-keyframes KvQCDTBOliB0VpzdCr2w {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes KvQCDTBOliB0VpzdCr2w {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.KvQCDTBOliB0VpzdCr2w {
  -webkit-animation-name: KvQCDTBOliB0VpzdCr2w;
  animation-name: KvQCDTBOliB0VpzdCr2w;
}

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

@keyframes NhrqjPUTnQVzBKJ3ly2s {
  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 NhrqjPUTnQVzBKJ3ly2s {
  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 tm7OTEJ7uzwiyNVBCXXj {
  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 tm7OTEJ7uzwiyNVBCXXj {
  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 XPh86Rj0hIPjkS7cCuwM {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes XPh86Rj0hIPjkS7cCuwM {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.XPh86Rj0hIPjkS7cCuwM {
  -webkit-animation-name: XPh86Rj0hIPjkS7cCuwM;
  animation-name: XPh86Rj0hIPjkS7cCuwM;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

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

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

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

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

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

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

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

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

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

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

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

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

.j8sFc2TbkwwuTGQ5maAm {
  transition-duration: 0.4s;
}

.hM9jW1emSP6_FOxDCP3Q {
  transition-duration: 0.2s;
}

.ybo40afcjVJrvu9CKej7 {
  transition-duration: 0.1s;
}

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

@-webkit-keyframes Vzha2IOhC1MoKz68ikej {
  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 Vzha2IOhC1MoKz68ikej {
  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);
  }
}
.Vzha2IOhC1MoKz68ikej {
  -webkit-animation-name: Vzha2IOhC1MoKz68ikej;
  animation-name: Vzha2IOhC1MoKz68ikej;
}

@-webkit-keyframes qcgKr_yNQSb6bj97_opC {
  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 qcgKr_yNQSb6bj97_opC {
  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 qcgKr_yNQSb6bj97_opC {
  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;
  }
}
.qcgKr_yNQSb6bj97_opC {
  -webkit-animation-name: qcgKr_yNQSb6bj97_opC;
  animation-name: qcgKr_yNQSb6bj97_opC;
}

@-webkit-keyframes vOxf1hSK3yIRWm_aGnXP {
  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 vOxf1hSK3yIRWm_aGnXP {
  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 vOxf1hSK3yIRWm_aGnXP {
  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);
  }
}
.vOxf1hSK3yIRWm_aGnXP {
  -webkit-animation-name: vOxf1hSK3yIRWm_aGnXP;
  animation-name: vOxf1hSK3yIRWm_aGnXP;
}

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

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

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

@keyframes _2AAnbcUAXZ08jD50S2g {
  0% {
    bottom: -60px;
    right: -30px;
  }
  100% {
    bottom: -30px;
    right: 0;
  }
}
/* Bouncing Loading Box */
@keyframes ei9urFacT8VjgkxwN2Ro {
  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 ei9urFacT8VjgkxwN2Ro {
  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 PwyiugNYZ2X0k6FJrmLP {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}
@-webkit-keyframes PwyiugNYZ2X0k6FJrmLP {
  0%, 100% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1);
  }
}
.X8dk8R0__1hwFbPRIMC2 {
  bottom: 0;
  height: 75px;
  left: 0;
  margin: auto;
  position: relative;
  right: 0;
  top: 0;
  width: 49px;
}

.X8dk8R0__1hwFbPRIMC2:before {
  -webkit-animation: PwyiugNYZ2X0k6FJrmLP 0.58s linear infinite;
  animation: PwyiugNYZ2X0k6FJrmLP 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;
}

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

.X8dk8R0__1hwFbPRIMC2._RA3vd2SENMQscAayMrl:after {
  background: #fff;
}

/* End of Bouncing Loading Box */
@-webkit-keyframes Y33JzNQR06fgRzQ4Z_Cg {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-moz-keyframes Y33JzNQR06fgRzQ4Z_Cg {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes Y33JzNQR06fgRzQ4Z_Cg {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-webkit-keyframes I3ntlGyTe6EGnd2TipFq {
  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 I3ntlGyTe6EGnd2TipFq {
  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);
  }
}
.I3ntlGyTe6EGnd2TipFq {
  -webkit-animation-name: I3ntlGyTe6EGnd2TipFq;
  animation-name: I3ntlGyTe6EGnd2TipFq;
}

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

.Ib3eRvO7EI7Qxmg6H_Vl {
  -webkit-animation: Eqo83bpumGpl934W6ok7 2.5s linear infinite;
  animation: Eqo83bpumGpl934W6ok7 2.5s linear infinite;
}

.NIxIusppdTs5eY8nzbwP {
  -webkit-animation: PRVZcibIaryH8gcI53EI 2.5s linear infinite;
  animation: PRVZcibIaryH8gcI53EI 2.5s linear infinite;
}

.Y7RuDuzCMfCDDStBGqqg {
  -webkit-animation: PRVZcibIaryH8gcI53EI 2s linear infinite;
  animation: PRVZcibIaryH8gcI53EI 2s linear infinite;
}

.z2Uy5IPT2pVLQi33hYM8 {
  -webkit-animation: MX_lYZUoRZiT2J3jqmT1 1.5s linear infinite;
  animation: MX_lYZUoRZiT2J3jqmT1 1.5s linear infinite;
}

@keyframes MX_lYZUoRZiT2J3jqmT1 {
  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 MX_lYZUoRZiT2J3jqmT1 {
  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 Eqo83bpumGpl934W6ok7 {
  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 Eqo83bpumGpl934W6ok7 {
  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 Eqo83bpumGpl934W6ok7 {
  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 PRVZcibIaryH8gcI53EI {
  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 PRVZcibIaryH8gcI53EI {
  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 PRVZcibIaryH8gcI53EI {
  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 uNRQgD0QopJNfioVLTW6 {
  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 uNRQgD0QopJNfioVLTW6 {
  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);
  }
}
.uNRQgD0QopJNfioVLTW6 {
  -webkit-animation-name: uNRQgD0QopJNfioVLTW6;
  animation-name: uNRQgD0QopJNfioVLTW6;
}

@-webkit-keyframes jkP8Mf9K602mmEvfH1iY {
  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 jkP8Mf9K602mmEvfH1iY {
  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);
  }
}
.jkP8Mf9K602mmEvfH1iY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: jkP8Mf9K602mmEvfH1iY;
  animation-name: jkP8Mf9K602mmEvfH1iY;
}

@-webkit-keyframes Jc8XFyzBgTlcVyYynDym {
  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 Jc8XFyzBgTlcVyYynDym {
  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);
  }
}
.Jc8XFyzBgTlcVyYynDym {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: Jc8XFyzBgTlcVyYynDym;
  animation-name: Jc8XFyzBgTlcVyYynDym;
}

@-webkit-keyframes _E57ITW0x6uhnK2PlL8k {
  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 _E57ITW0x6uhnK2PlL8k {
  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;
  }
}
._E57ITW0x6uhnK2PlL8k {
  -webkit-animation-name: _E57ITW0x6uhnK2PlL8k;
  animation-name: _E57ITW0x6uhnK2PlL8k;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes B4INNedmgb7a5H_s1ASO {
  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 rkBeKWoxsZu87dARzYaE {
  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 B4INNedmgb7a5H_s1ASO {
  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;
  }
}
.B4INNedmgb7a5H_s1ASO {
  -webkit-animation-name: B4INNedmgb7a5H_s1ASO;
  animation-name: B4INNedmgb7a5H_s1ASO;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

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

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

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

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

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

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

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

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

.whj_ttfEHaZqiW2un0Vy.sb1OgHFcaBij6v0f2aWG {
  animation: XO6oZFjBhOLKuRIBx5nd 0.25s linear;
  -webkit-animation: XO6oZFjBhOLKuRIBx5nd 0.25s linear; /* Chrome, Safari, Opera */
}
.whj_ttfEHaZqiW2un0Vy.CebPWz1KXOf3oxZdUcgu {
  animation: nUBXOLgmsQAdOH_l8A_a 0.25s linear;
  -webkit-animation: nUBXOLgmsQAdOH_l8A_a 0.25s linear; /* Chrome, Safari, Opera */
}
.whj_ttfEHaZqiW2un0Vy.k0l8Nw7jpAt0Z6_YAyTe {
  animation: PoHtt85ePtpwxp6M72RH 0.15s linear;
  -webkit-animation: PoHtt85ePtpwxp6M72RH 0.15s linear; /* Chrome, Safari, Opera */
}
.whj_ttfEHaZqiW2un0Vy.kuFjuWhO1BqcwVGM0s3h {
  animation: SSRjv46AdALGWdKgmFsA 0.15s linear;
  -webkit-animation: SSRjv46AdALGWdKgmFsA 0.15s linear; /* Chrome, Safari, Opera */
}
.whj_ttfEHaZqiW2un0Vy.yvpGre8Xtw6V1xpQRYbT {
  animation: XO6oZFjBhOLKuRIBx5nd 0.4s linear;
  -webkit-animation: XO6oZFjBhOLKuRIBx5nd 0.4s linear; /* Chrome, Safari, Opera */
}
.whj_ttfEHaZqiW2un0Vy.NU7UekQgsi3EbZ8vxPyB {
  animation: nUBXOLgmsQAdOH_l8A_a 0.4s linear;
  -webkit-animation: nUBXOLgmsQAdOH_l8A_a 0.4s linear; /* Chrome, Safari, Opera */
}

.Kgn6Vv_GYcLX_Ls5J7me.r4gsq2DKV0sUf03oI5Av {
  animation: aPBdvzKhqFgfS0qqYu9E 0.25s linear;
  -webkit-animation: aPBdvzKhqFgfS0qqYu9E 0.25s linear; /* Chrome, Safari, Opera */
}
.Kgn6Vv_GYcLX_Ls5J7me.WA5BsbGXysIspBZ3JU5O {
  animation: rA13G_KQjybkpZPz4gLp 0.25s linear;
  -webkit-animation: rA13G_KQjybkpZPz4gLp 0.25s linear; /* Chrome, Safari, Opera */
}
.Kgn6Vv_GYcLX_Ls5J7me.imTIf67iv21H6joHsE_8 {
  animation: g7D0eWOY6dxOp0iKA152 0.15s linear;
  -webkit-animation: g7D0eWOY6dxOp0iKA152 0.15s linear; /* Chrome, Safari, Opera */
}
.Kgn6Vv_GYcLX_Ls5J7me.HIAImSmfyiRFqV6bAIBp {
  animation: i5oKCenkHVuOzfYDk0_y 0.15s linear;
  -webkit-animation: i5oKCenkHVuOzfYDk0_y 0.15s linear; /* Chrome, Safari, Opera */
}
.Kgn6Vv_GYcLX_Ls5J7me.OUT94wZ2coCDKig5eLDy {
  animation: aPBdvzKhqFgfS0qqYu9E 0.4s linear;
  -webkit-animation: aPBdvzKhqFgfS0qqYu9E 0.4s linear; /* Chrome, Safari, Opera */
}
.Kgn6Vv_GYcLX_Ls5J7me.mBoOd6lndbExAM5kxTkg {
  animation: rA13G_KQjybkpZPz4gLp 0.4s linear;
  -webkit-animation: rA13G_KQjybkpZPz4gLp 0.4s linear; /* Chrome, Safari, Opera */
}

@-webkit-keyframes DnwrvhqaL8rYI18fyxyf {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}
@keyframes DnwrvhqaL8rYI18fyxyf {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes QdFKyuX7yqzwZzTz5OrM {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes QdFKyuX7yqzwZzTz5OrM {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes nUBXOLgmsQAdOH_l8A_a {
  0% {
    transform: translateX(150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes XO6oZFjBhOLKuRIBx5nd {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@-webkit-keyframes XO6oZFjBhOLKuRIBx5nd {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes PoHtt85ePtpwxp6M72RH {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes PoHtt85ePtpwxp6M72RH {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes SSRjv46AdALGWdKgmFsA {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes SSRjv46AdALGWdKgmFsA {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes rA13G_KQjybkpZPz4gLp {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@-webkit-keyframes rA13G_KQjybkpZPz4gLp {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@keyframes aPBdvzKhqFgfS0qqYu9E {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@-webkit-keyframes aPBdvzKhqFgfS0qqYu9E {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@keyframes g7D0eWOY6dxOp0iKA152 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@-webkit-keyframes g7D0eWOY6dxOp0iKA152 {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@keyframes i5oKCenkHVuOzfYDk0_y {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@-webkit-keyframes i5oKCenkHVuOzfYDk0_y {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@keyframes DXIjAjnOrbq7nraokmQC {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@-webkit-keyframes DXIjAjnOrbq7nraokmQC {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@keyframes e16n8bxnEOBYDawC0j4w {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0.5;
  }
}
@keyframes gjyt1ujE1QruYymq8R8N {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0;
  }
}
@keyframes H9tw8VvlQYMokFP18Yzb {
  0%, 19%, 40%, 60%, 80%, 100% {
    opacity: 0;
  }
  20%, 39% {
    opacity: 1;
  }
}
@keyframes GNr2vmTTgkMl7yljvB2d {
  0%, 20%, 39%, 60%, 80%, 100% {
    opacity: 0;
  }
  40%, 59% {
    opacity: 1;
  }
}
@keyframes P3JwCifuq9zoXITy7mz0 {
  0%, 20%, 40%, 59%, 80%, 100% {
    opacity: 0;
  }
  60%, 79% {
    opacity: 1;
  }
}
@keyframes dGTreZT7yIVZ2vkAlyfy {
  0%, 20%, 40%, 60%, 79%, 100% {
    opacity: 0;
  }
  80%, 99% {
    opacity: 1;
  }
}
@keyframes vDoKPnwA9WSGuxzgZHk9 {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@-webkit-keyframes vDoKPnwA9WSGuxzgZHk9 {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@keyframes bzlQb49ZMGRptkJ4nFkv {
  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 bzlQb49ZMGRptkJ4nFkv {
  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 zpo1ZSmp8aZZ9zLRL4pf {
  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 zpo1ZSmp8aZZ9zLRL4pf {
  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 GRWKNr6OJRkMraFGLOtw {
  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 YRGmGnwsz6j_I1kXzP58 {
  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);
  }
}
.xldimBbzWRQIeremswD4 {
  cursor: pointer;
  position: relative;
}

.Y4cVqncpdlQSvCSIp_kH {
  background: #FAFAFA;
}

.Cy3XLoi7CNpG0SWoX851 {
  background-color: #3FBCE7;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  height: 32px;
  overflow: visible;
  position: absolute;
  right: -14px;
  top: -14px;
  width: 32px;
  z-index: 1;
}

.bREGK27C9hRechmHQDiR {
  right: -8px;
  top: -8px;
}

.NAw5uYlOemhiD4MZTRNl {
  color: #FFFFFF;
  position: absolute !important;
  z-index: 1;
}

.ny8eEdp_LWucdle9qs14:hover::after {
  animation: KvQCDTBOliB0VpzdCr2w 0.2s ease-in;
  background: rgba(20, 19, 37, 0.2);
  border-radius: 12px;
  content: "";
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.s_ySTNiWR8_FdXvRH6VG {
  background: rgba(20, 19, 37, 0.6);
  pointer-events: none;
  position: absolute;
}
/*!************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-user-video-item/grid-user-video-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.jQb3tWYPL4N9IgWwlCGB {
  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 */
.xbceFbN23LWHtg9KA611 {
  background: #FAFAFA;
  border-radius: 4px;
}

.zKuqRBzSr6tzjYafCNxn {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/*!***************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/cost-tag/cost-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.lhBhsCMljx5ocKJVu9xM {
  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 */
.pwRWwlLhHnIBOf5ht5q9 {
  background-color: rgba(20, 19, 37, 0.7);
  border-bottom-left-radius: 40px;
  border-top-left-radius: 40px;
  bottom: 10px;
  color: #FFFFFF;
  gap: 4px;
  height: 26px;
  max-height: 26px;
  overflow: hidden;
  position: absolute;
  right: 0;
  transition: transform 0.2s ease-in-out;
  transform: translate(calc(100% - 28px));
  width: fit-content;
}

.pwRWwlLhHnIBOf5ht5q9:hover {
  transform: translate(0);
}
.pwRWwlLhHnIBOf5ht5q9:hover .z_dH0GdEUtRhHhvQkbya {
  display: flex;
}
/*!*******************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/source-tag/source-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.LDRqBPMcIsDaY8gz2T9h {
  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 */
.Dso2JqlrRERa52ECRRJb {
  background-color: rgba(20, 19, 37, 0.7);
  border-bottom-left-radius: 40px;
  border-top-left-radius: 40px;
  bottom: 10px;
  color: #FFFFFF;
  gap: 4px;
  height: 26px;
  max-height: 26px;
  overflow: hidden;
  position: absolute;
  right: 0;
  transition: transform 0.2s ease-in-out;
  transform: translate(calc(100% - 28px));
  width: fit-content;
}

.Dso2JqlrRERa52ECRRJb:hover {
  transform: translate(0);
}
.Dso2JqlrRERa52ECRRJb:hover .QcdgCyhsqlsVEvsUza4P {
  width: 62px;
  background-image: url("https://d1csarkz8obe9u.cloudfront.net/assets/pmwstockmedia/gettyFullIcon.png");
}

.QcdgCyhsqlsVEvsUza4P {
  width: 30px;
  background-repeat: no-repeat;
  background-image: url("https://d1csarkz8obe9u.cloudfront.net/assets/pmwstockmedia/gettyIcon.png");
  background-position-x: left;
  background-position-y: center;
}
/*!*****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/video-preview-new/video-preview.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.wr7THjoIgmlwbhX0iRcp {
  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 */
.yZIB8D7fUCF53ADyrB9w {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  max-height: 100%;
  max-width: 100%;
  width: 100%;
}
.yZIB8D7fUCF53ADyrB9w .qZhvLeRZTcPJZaoCgbvm {
  position: absolute;
}
.yZIB8D7fUCF53ADyrB9w .qZhvLeRZTcPJZaoCgbvm,
.yZIB8D7fUCF53ADyrB9w .wUrreWlO1ivrqqlzEL47 {
  border-radius: 4px;
  height: 100% !important;
  object-fit: cover;
  pointer-events: none;
  width: 100% !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.yZIB8D7fUCF53ADyrB9w .n0CLQ4N9iOJ051iO4wgq {
  background-color: #FFFFFF;
  color: #403F5D;
  padding: 8px;
  position: absolute;
}
.yZIB8D7fUCF53ADyrB9w .AJ8AzLIBNptNplZv5151 {
  background-color: rgba(20, 19, 37, 0.7);
  border-radius: 1000px;
  bottom: 4px;
  color: #fff;
  left: 4px;
  opacity: 0.75;
  padding: 4px 8px;
  position: absolute;
  z-index: 4;
}
.yZIB8D7fUCF53ADyrB9w .aBqwKtlEzbIuySkO7e04 {
  background-color: rgba(20, 19, 37, 0.7);
  border-radius: 1000px;
  bottom: 4px;
  color: #fff;
  opacity: 0.75;
  padding: 4px 12px;
  position: absolute;
  right: 4px;
  z-index: 4;
}
.yZIB8D7fUCF53ADyrB9w .A4Fq5Bja6VwKT4N7f7qy {
  align-items: center;
  background-color: rgba(74, 74, 74, 0.7);
  border-radius: 2px;
  color: #ffffff;
  display: flex;
  font-size: 11px;
  height: 17px;
  justify-content: center;
  margin: 5px;
  min-width: 10px;
  position: absolute;
  width: 17px;
  z-index: 5;
}
.yZIB8D7fUCF53ADyrB9w .A4Fq5Bja6VwKT4N7f7qy {
  bottom: 1px;
  cursor: pointer;
  left: 1px;
  overflow: hidden;
  -webkit-transition: bottom, 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  transition: bottom, 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.yZIB8D7fUCF53ADyrB9w .A4Fq5Bja6VwKT4N7f7qy.LmA0JWlp7mEQQwZdyfUi:after {
  left: 8px;
  top: 3px;
}
.yZIB8D7fUCF53ADyrB9w .A4Fq5Bja6VwKT4N7f7qy:after {
  background-color: white;
  border-radius: 35px;
  content: " ";
  display: block;
  height: 12px;
  left: -17px;
  position: absolute;
  top: -31px;
  transform: rotate(-45deg);
  width: 1px;
}
.yZIB8D7fUCF53ADyrB9w .IVeMdyoCP7PROq5j1bne {
  overflow: hidden;
  position: absolute;
}

.glC4_KzXko9_hPnQaU3x {
  background: rgba(20, 19, 37, 0.5);
  height: 32px;
  position: absolute !important;
  right: 8px;
  top: 8px;
  width: 32px;
  z-index: 2;
}

.ohkhTjA9f4yjsAv25xJH {
  -webkit-animation: hrkwoLulLXaTQVEKd_uY 2s infinite !important;
  animation: hrkwoLulLXaTQVEKd_uY 2s infinite !important;
}

@-webkit-keyframes hrkwoLulLXaTQVEKd_uY {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes hrkwoLulLXaTQVEKd_uY {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/video-preview-new/components/video-overlay-preview/video-overlay-preview.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.J9KjRyxo9nx1iAzeUnYZ {
  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 */
.nKGfw4fW2vApk2FtDuBJ {
  position: absolute !important;
  right: 0;
  width: fit-content;
}

.eWoJAlfj1kkQwXScgfQE {
  backdrop-filter: blur(10px) !important;
  background: rgba(44, 43, 68, 0.7);
  left: 0;
  position: fixed;
  top: 0;
  z-index: 200;
}

.hUoYKsDCF1AD4kCeVE9T {
  bottom: 0;
  position: absolute;
}

.nZ5vcZHv1WvGKWH3WCKl {
  position: relative;
}

.C6z7wuYWoXjAHOTPSre_ {
  margin: auto;
}
/*!**************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/controlled-slider/controlled-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 */
.cursor-pointer {
  cursor: pointer;
}

.controlled-slider {
  cursor: pointer;
}
.controlled-slider.rc-slider-horizontal.mobile {
  left: 8px;
  width: calc(100% - 16px);
}
.controlled-slider .rc-slider-rail {
  background: #E6E6EC;
  border-radius: 100px;
  height: 3px;
  z-index: 2;
}
.controlled-slider .rc-slider-track {
  background: #3FBCE7;
  border-radius: 100px;
  height: 3px;
  z-index: 2;
}
.controlled-slider .rc-slider-handle {
  background: #FFFFFF;
  border: 1px solid #DCDCE1;
  box-shadow: 0 0 12px rgba(20, 19, 37, 0.1);
  cursor: pointer;
  height: 20px;
  margin-top: -9px;
  opacity: 1;
  width: 20px;
  z-index: 3;
}
.controlled-slider .rc-slider-handle:hover {
  border: 1px solid #CBCBD0;
  box-shadow: 0 2px 16px rgba(20, 19, 37, 0.15);
}
.controlled-slider .rc-slider-handle:focus {
  border-color: #3FBCE7;
  box-shadow: 0 0 12px rgba(20, 19, 37, 0.1);
}
.controlled-slider .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
  border-color: #3FBCE7;
  box-shadow: 0 0 12px rgba(20, 19, 37, 0.1);
  cursor: pointer;
}
.controlled-slider .rc-slider-dot, .controlled-slider .rc-slider-dot-active {
  border: 1px solid #E6E6EC;
  border-radius: 10px;
  bottom: -1px;
  height: 8px;
  vertical-align: middle;
  width: 0;
  z-index: 1;
}
.controlled-slider .rc-slider-mark-text {
  visibility: hidden;
}
.controlled-slider.rc-slider-disabled {
  background: #FFFFFF;
  cursor: not-allowed;
}
.controlled-slider.rc-slider-disabled .rc-slider-track {
  background: #CBCBD0;
}
.controlled-slider.rc-slider-disabled .rc-slider-rail {
  background: #E6E6EC;
}
.controlled-slider.rc-slider-disabled .rc-slider-handle {
  border-color: #DCDCE1;
}
/*!*********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/controlled-slider/controlled-slider.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
 */
.sRORW11XynYvUS9zJhG1 {
  position: relative;
}

.R2uOR8sIbUfxEjQxvRH2 {
  cursor: pointer;
}

.n9s2A2sOGFMP6r1qfdbg:after {
  background: #2C2B44;
  border: none !important;
  border-radius: 0 0 4px 0;
  bottom: -5px !important;
  height: 16px !important;
  transform: rotate(45deg);
  transition: left 0.3s ease-in-out;
  width: 16px !important;
}
.n9s2A2sOGFMP6r1qfdbg.UMcz4kpxGBAeobxrUFbr:after {
  left: 27%;
}
.n9s2A2sOGFMP6r1qfdbg.WmBhipBQ04sDqzasCwXi:after {
  left: calc(100% - 12px);
}

.UV3ESHPUvPRiluZu5iyo {
  white-space: nowrap;
}

.Kc69fM8U9VQsI9DzgmEo {
  position: absolute;
}
/*!**************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-shape-item/grid-shape-item.module.scss ***!
  \**************************************************************************************************************************************************************************/
.F8UjY_BtjxNI279SSUku {
  object-fit: contain;
}
/*!************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-animated-sticker-item/grid-animated-sticker-item.module.scss ***!
  \************************************************************************************************************************************************************************************************/
.b_gOpALaxsqeT4TmkmQR {
  object-fit: contain;
}
/*!*********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/input-field-v2/components/input-field-text/input-field-text.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.PttVcL_TSANUCtCuxEi_ {
  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 */
.UQU2v47Mqzj2tgB_CyBe {
  color: #403F5D;
}

.eArN6SbEQzeSu2QNuoY1 {
  color: #757589;
}
/*!*************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/input-field-v2/components/input-field-control-item/input-field-control-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.GjETNjwuACMZ0bFA1_J7 {
  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 */
.DD7UIb3tAnTRBMyQZYoY {
  color: #A1A1AA;
}

.Axgky53ZoOG41PqRwQ3u {
  background: #FFFFFF;
  cursor: pointer;
  z-index: 10;
}
.Axgky53ZoOG41PqRwQ3u.CGCe8MEZGZhtplIOzq9Y {
  height: 30px;
  width: 32px;
}
.Axgky53ZoOG41PqRwQ3u.kSVUt7HeHC8KXv9Xtswh {
  height: 30px;
  width: calc(32px - 1px);
}
.Axgky53ZoOG41PqRwQ3u.Wy6nhWENiIrkhI0PcxpL {
  height: 38px;
  width: 40px;
}
.Axgky53ZoOG41PqRwQ3u.F0Msk2vaMTIjahMRNA2r {
  height: 38px;
  width: calc(40px - 1px);
}
.Axgky53ZoOG41PqRwQ3u.cKJU0vMVNGPVtarLW1lw {
  height: 46px;
  width: 48px;
}
.Axgky53ZoOG41PqRwQ3u.HiLsn9uFSnQLzSak2kpg {
  height: 46px;
  width: calc(48px - 1px);
}

.hZ8GRoHidC49KZHJeJYY {
  transition: 0.2s;
}
.hZ8GRoHidC49KZHJeJYY.CsKCFO0n66wvMKMYW076 {
  background: #F2F2F5;
  color: #A1A1AA;
  cursor: not-allowed;
}
.hZ8GRoHidC49KZHJeJYY:not(.CsKCFO0n66wvMKMYW076):hover {
  background: #F2F2F5;
}
.hZ8GRoHidC49KZHJeJYY:not(.CsKCFO0n66wvMKMYW076):active {
  background: #E6E6EC;
}

.XlTKS_2NjJj3Xhv_4cEP {
  background: transparent;
  cursor: default;
}
.XlTKS_2NjJj3Xhv_4cEP.CsKCFO0n66wvMKMYW076 {
  background: #F2F2F5;
  cursor: not-allowed;
}

.AqolR06hW_zKhuid_1_Z {
  color: #A1A1AA;
}

.XJHlia15tK9K4EsFc1i2 {
  border-left: 1px solid #CBCBD0;
}

.Mhd7Er4Tt0dTtFypXsxe {
  border-left: none !important;
}

.WuHuvuW71aFtEEQbZ3Hp {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

.Hx29pUQFugNk2dCLJfLV {
  margin-left: 2px;
  margin-right: 2px;
  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/input-field-v2/components/input-field-control/input-field-control.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.W6C3kCf6TED27b3dvDd2 {
  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 */
.zLvSG97OKiDu6qIK4Foa {
  bottom: 1px;
  position: absolute;
  right: 1px;
}
/*!*********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-button-item/grid-button-item.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 */
.dotted-icon-button {
  align-items: center;
  background: #FFFFFF;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  color: #403F5D;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 100%;
  -webkit-transition: background-color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out;
}
.dotted-icon-button .icon {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 32px;
}
.dotted-icon-button .icon.-square, .dotted-icon-button .icon.-circle {
  padding: 16px;
}
.dotted-icon-button .icon.-square.-secondary, .dotted-icon-button .icon.-square.-shadow, .dotted-icon-button .icon.-square.-ghost-uncolored, .dotted-icon-button .icon.-square.-dark-secondary, .dotted-icon-button .icon.-circle.-secondary, .dotted-icon-button .icon.-circle.-shadow, .dotted-icon-button .icon.-circle.-ghost-uncolored, .dotted-icon-button .icon.-circle.-dark-secondary {
  padding: calc(16px - 1px);
}
.dotted-icon-button.-horizontal .icon.-icon-size-24, .dotted-icon-button .icon.-icon-size-24 {
  font-size: 24px;
  line-height: 24px;
}
.dotted-icon-button.-horizontal .icon.-icon-size-24.-square, .dotted-icon-button.-horizontal .icon.-icon-size-24.-circle, .dotted-icon-button .icon.-icon-size-24.-square, .dotted-icon-button .icon.-icon-size-24.-circle {
  padding: 12px;
}
.dotted-icon-button.-horizontal .icon.-icon-size-24.-square.-secondary, .dotted-icon-button.-horizontal .icon.-icon-size-24.-square.-shadow, .dotted-icon-button.-horizontal .icon.-icon-size-24.-square.-ghost-uncolored, .dotted-icon-button.-horizontal .icon.-icon-size-24.-square.-dark-secondary, .dotted-icon-button.-horizontal .icon.-icon-size-24.-circle.-secondary, .dotted-icon-button.-horizontal .icon.-icon-size-24.-circle.-shadow, .dotted-icon-button.-horizontal .icon.-icon-size-24.-circle.-ghost-uncolored, .dotted-icon-button.-horizontal .icon.-icon-size-24.-circle.-dark-secondary, .dotted-icon-button .icon.-icon-size-24.-square.-secondary, .dotted-icon-button .icon.-icon-size-24.-square.-shadow, .dotted-icon-button .icon.-icon-size-24.-square.-ghost-uncolored, .dotted-icon-button .icon.-icon-size-24.-square.-dark-secondary, .dotted-icon-button .icon.-icon-size-24.-circle.-secondary, .dotted-icon-button .icon.-icon-size-24.-circle.-shadow, .dotted-icon-button .icon.-icon-size-24.-circle.-ghost-uncolored, .dotted-icon-button .icon.-icon-size-24.-circle.-dark-secondary {
  padding: calc(12px - 1px);
}
.dotted-icon-button.-horizontal .icon.-icon-size-40, .dotted-icon-button .icon.-icon-size-40 {
  font-size: 40px;
  line-height: 40px;
}
.dotted-icon-button.-horizontal .icon.-color-gradient, .dotted-icon-button .icon.-color-gradient {
  background: linear-gradient(90deg, #0384B4 0%, #3C0ACD 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.dotted-icon-button.-horizontal .btn-text {
  margin-top: 2px;
}
.dotted-icon-button.-horizontal .icon {
  font-size: 20px;
  line-height: 20px;
  margin-left: 0;
  margin-right: 12px;
}
.dotted-icon-button.-horizontal .icon.-square, .dotted-icon-button.-horizontal .icon.-circle {
  padding: 10px;
}
.dotted-icon-button.-horizontal .icon.-square.-secondary, .dotted-icon-button.-horizontal .icon.-square.-shadow, .dotted-icon-button.-horizontal .icon.-square.-ghost-uncolored, .dotted-icon-button.-horizontal .icon.-square.-dark-secondary, .dotted-icon-button.-horizontal .icon.-circle.-secondary, .dotted-icon-button.-horizontal .icon.-circle.-shadow, .dotted-icon-button.-horizontal .icon.-circle.-ghost-uncolored, .dotted-icon-button.-horizontal .icon.-circle.-dark-secondary {
  padding: calc(10px - 1px);
}
.dotted-icon-button.-selected {
  background-color: #ECF8FD;
}
.dotted-icon-button.-selected:before {
  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=%274%27 ry=%274%27 stroke=%27%233FBCE7%27 stroke-width=%272%27 stroke-dasharray=%276%27 stroke-dashoffset=%2710%27 stroke-linecap=%27square%27/%3e%3c/svg%3e");
}
.dotted-icon-button.-selected .btn-text, .dotted-icon-button.-selected .icon {
  color: #00688C;
}
.dotted-icon-button.-selected:hover, .dotted-icon-button.-selected:focus, .dotted-icon-button.-selected:focus-within {
  background-color: #ECF8FD;
}
.dotted-icon-button.-horizontal {
  flex-direction: row;
}
.dotted-icon-button:not(.-disabled, .-bg-gradient):hover, .dotted-icon-button:not(.-disabled, .-bg-gradient):focus, .dotted-icon-button:not(.-disabled, .-bg-gradient):focus-within {
  background: #F2F2F5;
  box-shadow: none;
  color: #403F5D;
  cursor: pointer;
}
.dotted-icon-button:before {
  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=%274%27 ry=%274%27 stroke=%27%23A1A1AAFF%27 stroke-width=%272%27 stroke-dasharray=%272%2c 6%27 stroke-dashoffset=%270%27 stroke-linecap=%27square%27/%3e%3c/svg%3e");
  background-clip: content-box;
  border-radius: 4px;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.dotted-icon-button:not(.-horizontal) .dotted-icon-btn-text {
  width: 100%;
}
.dotted-icon-button.-bg-gradient {
  box-shadow: inset 0 0 0 8px #FFFFFF;
  border-radius: 12px;
  background: linear-gradient(135deg, #EEFAFF 0%, #ECE9FF 100%);
  transition: background 200ms ease-in-out;
}
.dotted-icon-button.-bg-gradient:hover {
  background: linear-gradient(135deg, #DCF5FF -1.78%, #D8D1FF 100%);
}
.dotted-icon-button.-bg-gradient:focus, .dotted-icon-button.-bg-gradient:focus-within, .dotted-icon-button.-bg-gradient:active {
  background: linear-gradient(135deg, #DCF5FF -1.78%, #D8D1FF 100%);
}
.dotted-icon-button.-bg-gradient:before {
  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=%274%27 ry=%274%27 stroke=%27%23CBCBD0FF%27 stroke-width=%272%27 stroke-dasharray=%272%2c 6%27 stroke-dashoffset=%270%27 stroke-linecap=%27square%27/%3e%3c/svg%3e");
}
.dotted-icon-button.-bg-gradient:hover, .dotted-icon-button.-bg-gradient:focus, .dotted-icon-button.-bg-gradient:focus-within, .dotted-icon-button.-bg-gradient:active {
  box-shadow: inset 0 0 0 8px #FFFFFF;
}
.dotted-icon-button .btn-text {
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 300 !important;
  line-height: 150% !important;
  letter-spacing: normal !important;
  color: #757589;
  margin: 0;
  max-height: 100%;
  overflow: hidden;
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
}
.dotted-icon-button .btn-text.-xs-bold {
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
  letter-spacing: normal !important;
  color: #403F5D;
}
.dotted-icon-button .btn-text.-bold {
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
  letter-spacing: normal !important;
  color: #403F5D;
}
/*!************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/input-field-v2/input-field.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._EaEukQovDQhbINu_qSz {
  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 */
.rT0e9zWByKydvoOkWh_3 {
  height: 32px;
}

.IE2JPyM7_yrUhFwpo8_5 {
  height: 40px;
}

.bBlz8Llh6Caw73MsNtoK {
  height: 48px;
}

.phIxqOZpFOXa4AqNaeiw {
  box-sizing: border-box;
  position: relative;
  width: 100%;
}

.WohKFg0cim7AW3YtXOvT {
  background: #FFFFFF;
  border: 1px solid #CBCBD0;
  border-radius: 4px;
  height: 100%;
  overflow: hidden;
  width: 100%;
}
.WohKFg0cim7AW3YtXOvT::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #A1A1AA;
  font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
  opacity: 1; /* Firefox */
}
.WohKFg0cim7AW3YtXOvT:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #A1A1AA;
  font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
}
.WohKFg0cim7AW3YtXOvT::-ms-input-placeholder { /* Microsoft Edge */
  color: #A1A1AA;
  font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
}
.WohKFg0cim7AW3YtXOvT.vx6Y8SsdlvP2o3HWpDjR {
  background: #F2F2F5;
  border: 1px solid #DCDCE1;
  cursor: not-allowed;
}
.WohKFg0cim7AW3YtXOvT:not(.vx6Y8SsdlvP2o3HWpDjR).erk3N9FVmFb9agXvEQJB {
  border: 1px solid #D32559;
}
.WohKFg0cim7AW3YtXOvT:not(.vx6Y8SsdlvP2o3HWpDjR).erk3N9FVmFb9agXvEQJB:hover {
  border: 1px solid #B70A3E;
}
.WohKFg0cim7AW3YtXOvT:not(.vx6Y8SsdlvP2o3HWpDjR).erk3N9FVmFb9agXvEQJB:focus, .WohKFg0cim7AW3YtXOvT:not(.vx6Y8SsdlvP2o3HWpDjR).erk3N9FVmFb9agXvEQJB:focus-within {
  border: 1px solid #23A6D4;
  color: #403F5D;
  outline: none;
  outline-offset: 2px;
}
.WohKFg0cim7AW3YtXOvT:not(.vx6Y8SsdlvP2o3HWpDjR).KgZd9lWFgXYq4npID7ms {
  border: 1px solid #19AD89;
}
.WohKFg0cim7AW3YtXOvT:not(.vx6Y8SsdlvP2o3HWpDjR).KgZd9lWFgXYq4npID7ms:hover {
  border: 1px solid #008565;
}
.WohKFg0cim7AW3YtXOvT:not(.vx6Y8SsdlvP2o3HWpDjR).KgZd9lWFgXYq4npID7ms:focus, .WohKFg0cim7AW3YtXOvT:not(.vx6Y8SsdlvP2o3HWpDjR).KgZd9lWFgXYq4npID7ms:focus-within {
  border: 1px solid #23A6D4;
  color: #403F5D;
  outline: none;
  outline-offset: 2px;
}
.WohKFg0cim7AW3YtXOvT:not(.vx6Y8SsdlvP2o3HWpDjR):hover {
  border: 1px solid #A1A1AA;
}
.WohKFg0cim7AW3YtXOvT:not(.vx6Y8SsdlvP2o3HWpDjR):focus, .WohKFg0cim7AW3YtXOvT:not(.vx6Y8SsdlvP2o3HWpDjR):focus-within {
  border: 1px solid #23A6D4;
  color: #403F5D;
  outline: none;
  outline-offset: 2px;
}

.ZapWcGzSEZ3gddZ6XIct::-webkit-search-cancel-button {
  appearance: none;
}

.FBa5Y9GE6jhu3TJeYnGF {
  height: fit-content;
  overflow: auto;
  resize: none;
}

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

/* Chrome, Safari, Edge, Opera -- to hide icons shown with input type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button,
textarea::-webkit-outer-spin-button,
textarea::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox -- to hide icons shown with input type number */
input[type=number], textarea[type=number] {
  -moz-appearance: textfield;
}
input[type=number]::selection, textarea[type=number]::selection {
  background: #CDF0FB;
}

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=url],
textarea {
  color: #403F5D;
  font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
}

.XN9BGIxkgl4WbcEwOBm0 {
  left: 0;
  padding-left: 11px;
  position: absolute !important;
}

.KJDTv79xHYx9rUmZF4co {
  padding-bottom: 14px;
}

.jMIpaNQMgZ9H68Vkma3J {
  padding-bottom: 10.5px;
  padding-top: 10.5px;
}

.smJCNuRF4ZsTy2yKFtdg {
  padding-left: 31px;
}

.iiyOPRu1BeeZCkw2cWlQ {
  padding-left: 38px;
}

.oFxgVXSOtG8QKu_tsKpp {
  padding-left: 11px;
}

.ZbuydXqs1R8FarkTU6cs {
  padding-right: 11px;
}

.tBsMO6jrly9U27782L4V {
  padding-right: 51px;
}

.P98P58S2UghV1vagz4PW {
  padding-right: 91px;
}

.OA7NDBb4ASJnOE3GSjVT {
  padding-right: 92px;
}

.lHjAbGT4Tg2ClYy4qEXm {
  padding-bottom: 14px;
}

.opgcfpOkV4PdGIJx3oCh {
  padding-left: 6px;
}

.OV6YRE7uBQUtKb3jatvP {
  margin-bottom: 6px;
}

._X9DYKlX4qAoGUFUSKBb {
  margin-top: 6px;
}

.N58XZhcdyvxZ3YKJgWbI {
  height: 16px;
  left: 11px;
  position: absolute;
  width: 16px;
}
/*!**************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-stock-video-item/grid-stock-video-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.lhrGrTAfMEL41Gz70tSu {
  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 */
.Dwovr54DG6KPsdIHv1Pj {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/*!**************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-stock-image-item/grid-stock-image-item.module.scss ***!
  \**************************************************************************************************************************************************************************************/
.TDWfv1HsWa70UchmT1Ig {
  overflow: hidden;
  position: absolute;
}

.AudqCRkaGXAZW8nvf1Tt {
  max-height: 100%;
  object-fit: cover;
  height: 100%;
  width: 100%;
}
/*!**************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/audio-item-wave/audio-item-wave.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.tqQRXLUcFrQXw4mpeYNz {
  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 */
.yg3UvBeS1L7ueV7UIaVx {
  z-index: 2;
}

.yIYt3y_JesgcfybarTnu {
  border-radius: 16px;
}

.XrSTjaHbu2BBFlXh7f9T {
  animation: rNHuPYlyc87ubLFMjbdV 0.7s infinite;
}

@keyframes rNHuPYlyc87ubLFMjbdV {
  0% {
    height: 20%;
  }
  25% {
    height: 75%;
  }
  50% {
    height: 100%;
  }
  75% {
    height: 75%;
  }
  100% {
    height: 50%;
  }
}
.S_yG3cbYxZKdDGgfssdm {
  animation: GB37wL_G5KjiqDdf6j88 0.7s infinite;
}

@keyframes GB37wL_G5KjiqDdf6j88 {
  0% {
    height: 80%;
  }
  25% {
    height: 75%;
  }
  50% {
    height: 30%;
  }
  75% {
    height: 75%;
  }
  100% {
    height: 100%;
  }
}
/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/modal-deprecated/components/modal-footer-primary-action/modal-footer-primary-action.scss ***!
  \**************************************************************************************************************************************************************************************************/

/*!************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-collection-item/grid-collection-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._6xVwHQKEImIKH_Cn2yhe {
  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 */
.aqGqre1HbB0Y0j7M2d9Q {
  background: #FFFFFF;
}
.aqGqre1HbB0Y0j7M2d9Q:hover .m7WEHCpCX18wKva25PU2 {
  visibility: unset;
}
.aqGqre1HbB0Y0j7M2d9Q .Tp5EGHQUv_1PrQCfTmXY:not(.wKGvkwvP60oqdhey2h0D) {
  visibility: unset;
}

.FLf1p1bxOoj1QoVLplkl {
  background: #F2F2F5;
}

.dSRoFTt_pgtyNN4wRN2X {
  border: 1px solid #DCDCE1;
}
.dSRoFTt_pgtyNN4wRN2X:not(.DOVJXTYM1AkBoMRVtA5k):hover, .dSRoFTt_pgtyNN4wRN2X:not(.DOVJXTYM1AkBoMRVtA5k):focus, .dSRoFTt_pgtyNN4wRN2X:not(.DOVJXTYM1AkBoMRVtA5k):focus-within {
  border-color: #CBCBD0;
  box-shadow: 4px 4px 16px rgba(44, 43, 68, 0.15);
}

.xG5nuPh9vEztz9zIFh3g {
  width: calc(100% - 36px - 4px);
}

.npq8yIKohFn_TG4J3yb8 {
  background-color: #FAFAFA;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  min-width: 36px;
}

.Ji5U0hPH4IR5TM_AnL5P {
  min-width: 48px;
}

.FgVUn0YvrhMIgeybtThI:not(.wKGvkwvP60oqdhey2h0D) {
  visibility: hidden;
}
.FgVUn0YvrhMIgeybtThI:not(.wKGvkwvP60oqdhey2h0D):hover {
  background: #FAFAFA;
}
.FgVUn0YvrhMIgeybtThI:not(.wKGvkwvP60oqdhey2h0D):active {
  background: #F2F2F5;
}

.wKGvkwvP60oqdhey2h0D {
  background: #E6E6EC;
  visibility: unset;
}

.H9_THfCfzPHZ6s8ziH4G {
  width: 180px;
}
.H9_THfCfzPHZ6s8ziH4G .SDT1fKI7aaX2x0cNcFoE {
  color: #403F5D;
}
/*!****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/audio-item/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
 */
/**
 * 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.HKJSoPdq_ET9Ye_H64n8 {
  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 */
.NYL6kZhBzFlD6Q9bLwMq {
  background-color: #141325;
  opacity: 0.4;
  position: absolute;
}

.NYL6kZhBzFlD6Q9bLwMq.jcLXRJ3Nense9Xih2e2D {
  height: 80%;
  width: 80%;
}

.Tl5hDyvWqPM_ouFpaKaJ {
  height: inherit;
  position: absolute;
  width: inherit;
}

.e5DLfEXDPARBwfrEOqm5 {
  height: 60px;
  min-width: 60px;
  position: relative;
  width: 60px;
}

.zY5QjLM_S4_MTpvGKP92 {
  background-color: #FFFFFF;
  padding: 8px;
}

.wpMSLR_EwjM5JiOm7UCq {
  color: #D32559 !important;
}

.Je2FeqGVaSvSwGuKtAPj {
  background: #CBCBD0;
  min-height: 2px;
  min-width: 2px;
  margin: 0px 6px;
}

.qc00xXLf5tNXam2m0Xvm {
  visibility: hidden;
}

.zdYqh425XrM_FtNe92oC {
  width: calc(100% - 60px);
  padding-left: 12px;
}

.D9BySED3AK1xcj1WtOX1 {
  width: calc(100% - 60px - 32px);
  padding-inline: 12px;
}

.Ae7SXYaIhRP9X9LfdYl0 {
  z-index: 10;
}

.tIDDnKtkZieTLvvCj0UW {
  position: absolute;
  z-index: 1;
}

.KoVYvkUuwD9pEqykwmxg {
  border-radius: 8px;
  width: 183px;
}

.Dy1xKXWbzaoUGo2pWb9H {
  visibility: unset;
}

.G_d4WFMZ6Qf984klET9P {
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.G_d4WFMZ6Qf984klET9P .fPlfrpGVhtOgS0eDW5jT {
  transform: translateX(0);
  transition: none;
}

.zY5QjLM_S4_MTpvGKP92:hover .G_d4WFMZ6Qf984klET9P .fPlfrpGVhtOgS0eDW5jT {
  animation: U8KIbA9bn61kh_TuCi95 20s linear infinite;
  display: inline-block;
  text-overflow: clip;
}

@keyframes U8KIbA9bn61kh_TuCi95 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.h7TeMT3DfJsIpC2VTRiT {
  position: absolute;
}
/*!************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/popup-menu/popup-menu.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 */
.popup-menu-toggle-btn.-open.pmw-icon.-secondary, .popup-menu-toggle-btn.-open .pmw-icon.-secondary {
  background: #E6E6EC !important;
}
.popup-menu-toggle-btn.-open.btn.secondary, .popup-menu-toggle-btn.-open.btn.ghost, .popup-menu-toggle-btn.-open .btn.secondary, .popup-menu-toggle-btn.-open .btn.ghost {
  background: #E6E6EC !important;
}

.popup-menu-container {
  background: #FFFFFF;
  border: 1px solid #E6E6EC;
  border-radius: 8px;
  box-shadow: 0px 4px 16px rgba(48, 47, 59, 0.12);
  margin: 0;
  padding: 0;
  position: absolute;
  visibility: hidden;
  z-index: 4900;
}
.popup-menu-container.-with-arrow .popup-menu:before {
  border: 0.8em solid transparent;
  border-bottom: 10px solid #FFFFFF;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -21px;
  width: 0;
}
.popup-menu-container.-with-arrow.-arrow-left .popup-menu:before {
  left: auto;
  right: 0;
}
.popup-menu-container.-with-arrow.-arrow-inverted .popup-menu:before {
  bottom: -21px;
  top: initial;
  transform: rotate(180deg);
}
.popup-menu-container .popup-menu {
  margin: 0;
  min-width: 200px;
}

#menu-list-modal.popup-menu-modal .popup-menu-item {
  margin: 0 0 12px 0;
  height: 48px;
  justify-content: center;
  border: 1px solid #F2F2F5;
  padding: 0;
  width: 100%;
}
#menu-list-modal.popup-menu-modal .popup-menu-item.-less-margin-bottom {
  margin-bottom: 8px;
}
#menu-list-modal.popup-menu-modal .popup-menu-item.-horizontal-padding-in-modal {
  padding: 0 12px;
}
#menu-list-modal.popup-menu-modal .popup-menu-item.-no-border-in-modal {
  border: none;
}
#menu-list-modal.popup-menu-modal .popup-menu-item.-more-margin-bottom-modal {
  margin-bottom: 16px;
}
#menu-list-modal.popup-menu-modal .popup-menu-item.-smaller {
  height: 40px;
}
#menu-list-modal.popup-menu-modal .popup-menu-item.-aligned-start {
  justify-content: start;
}
#menu-list-modal.popup-menu-modal .popup-toggle-menu-item {
  margin: 0;
}
/*!********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/popup-menu/components/popup-menu-item/popup-menu-item.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 */
.popup-menu-item {
  align-items: center;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  height: 44px;
  margin: 8px;
  padding: 12px;
}
.popup-menu-item.-has-link {
  padding: 0px;
}
.popup-menu-item.-has-link .popup-menu-item-link {
  padding: 12px;
}
.popup-menu-item.-more-margin-horizontal {
  margin: 8px 12px;
}
.popup-menu-item.-only-vertical-margin {
  margin: 0 0 8px;
}
.popup-menu-item.-danger .popup-menu-item-text {
  color: #B70A3E;
}
.popup-menu-item.-danger .popup-menu-item-icon {
  color: #9C002F;
}
.popup-menu-item.-aligned-start {
  justify-content: start;
}
.popup-menu-item.smaller-height {
  height: 40px;
}
.popup-menu-item:not(.-disabled):hover, .popup-menu-item:not(.-disabled):focus, .popup-menu-item:not(.-disabled):focus-within {
  background: #F2F2F5;
}
.popup-menu-item.-disabled {
  cursor: not-allowed;
}
.popup-menu-item .popup-menu-item-link {
  height: 100%;
  width: 100%;
}
.popup-menu-item .popup-menu-item-icon-size-medium {
  font-size: 18px;
}
.popup-menu-item .popup-menu-item-icon-size-small {
  font-size: 16px;
}
.popup-menu-item .popup-menu-item-text {
  margin: 0 0 0 12px;
}
.popup-menu-item .popup-menu-item-icon {
  margin: 0;
  min-width: 0;
}

.modal-content .popup-menu-item {
  margin-left: 0;
  margin-right: 0;
}
/*!****************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/popup-menu/components/popup-toggle-button/popup-toggle-button.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 */
.popup-toggle-button {
  background: #FFFFFF;
  cursor: pointer;
  height: 32px;
  margin: 0;
  padding: 0;
  width: 32px;
}
.popup-toggle-button:hover, .popup-toggle-button:focus, .popup-toggle-button:focus-within {
  background: #F2F2F5;
}
.popup-toggle-button.-open {
  background: #ECF8FD;
  color: #00688C;
}
.popup-toggle-button.-open.-neutral {
  background: #E6E6EC;
  color: #403F5D;
}
.popup-toggle-button.-smaller-icon .popup-toggle-button-icon {
  font-size: 16px;
  line-height: 16px;
}
.popup-toggle-button.-smaller-icon .popup-toggle-button-icon.-square, .popup-toggle-button.-smaller-icon .popup-toggle-button-icon.-circle {
  padding: 8px;
}
.popup-toggle-button.-smaller-icon .popup-toggle-button-icon.-square.-secondary, .popup-toggle-button.-smaller-icon .popup-toggle-button-icon.-square.-shadow, .popup-toggle-button.-smaller-icon .popup-toggle-button-icon.-square.-ghost-uncolored, .popup-toggle-button.-smaller-icon .popup-toggle-button-icon.-square.-dark-secondary, .popup-toggle-button.-smaller-icon .popup-toggle-button-icon.-circle.-secondary, .popup-toggle-button.-smaller-icon .popup-toggle-button-icon.-circle.-shadow, .popup-toggle-button.-smaller-icon .popup-toggle-button-icon.-circle.-ghost-uncolored, .popup-toggle-button.-smaller-icon .popup-toggle-button-icon.-circle.-dark-secondary {
  padding: calc(8px - 1px);
}
.popup-toggle-button .popup-toggle-button-icon {
  font-size: 20px;
  line-height: 20px;
  margin: 0;
}
.popup-toggle-button .popup-toggle-button-icon.-square, .popup-toggle-button .popup-toggle-button-icon.-circle {
  padding: 10px;
}
.popup-toggle-button .popup-toggle-button-icon.-square.-secondary, .popup-toggle-button .popup-toggle-button-icon.-square.-shadow, .popup-toggle-button .popup-toggle-button-icon.-square.-ghost-uncolored, .popup-toggle-button .popup-toggle-button-icon.-square.-dark-secondary, .popup-toggle-button .popup-toggle-button-icon.-circle.-secondary, .popup-toggle-button .popup-toggle-button-icon.-circle.-shadow, .popup-toggle-button .popup-toggle-button-icon.-circle.-ghost-uncolored, .popup-toggle-button .popup-toggle-button-icon.-circle.-dark-secondary {
  padding: calc(10px - 1px);
}
/*!*******************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-email-campaign-audience-item/components/audience-grid-item-footer/audience-grid-item-footer.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.QG7GSPdT4GUtIk85bAXv {
  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 */
.EnrCefwHIcZDyhunQMpY {
  height: 32px;
  position: relative;
}

.PStiQQnqZSUGSBkaTyCv {
  min-width: 0;
  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/modal-container-deprecated/modal-container.scss ***!
  \*********************************************************************************************************************************************************/

/*!*********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-email-campaign-audience-item/components/audience-grid-item-content/audience-grid-item-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.pqOFr_badumHZ2Pe8u8W {
  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 */
.y_B2kBSLAwe3JLkwixkA {
  background: #FAFAFA;
  border: 1px solid rgba(48, 47, 59, 0);
  border-radius: 4px;
  padding: 16px 16px 8px;
  position: relative;
  z-index: 10;
  -webkit-transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
  transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
}
.y_B2kBSLAwe3JLkwixkA:hover, .y_B2kBSLAwe3JLkwixkA:focus, .y_B2kBSLAwe3JLkwixkA:focus-within {
  border: 1px solid #E6E6EC;
  box-shadow: 0 2px 16px rgba(20, 19, 37, 0.15);
}
.y_B2kBSLAwe3JLkwixkA .ivnSOd1bO2j5iDG5AkCi {
  background: #FFE4ED;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}
.y_B2kBSLAwe3JLkwixkA .zOC1jqVIRdjxbVDp3WFN {
  border-radius: 4px;
  cursor: pointer;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.y_B2kBSLAwe3JLkwixkA .zOC1jqVIRdjxbVDp3WFN.GjxbGyWNm_wnazhdMURL {
  background: #FEF3F6;
}
.y_B2kBSLAwe3JLkwixkA .dj9RVdnzS6HBk4blFsKs {
  position: static;
}

.zOC1jqVIRdjxbVDp3WFN:not(.GjxbGyWNm_wnazhdMURL) {
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  height: 100%;
  justify-content: center;
  opacity: 0;
  position: absolute;
  transition: opacity 200ms ease-in-out;
  width: 100%;
  z-index: 10;
}
.zOC1jqVIRdjxbVDp3WFN:not(.GjxbGyWNm_wnazhdMURL):hover, .zOC1jqVIRdjxbVDp3WFN:not(.GjxbGyWNm_wnazhdMURL):focus, .zOC1jqVIRdjxbVDp3WFN:not(.GjxbGyWNm_wnazhdMURL):focus-within {
  opacity: 1;
}

.TkTjoQ2Bj1m8TWvgWKLG {
  color: initial;
  text-align: center;
}

.Oqicf8G5phjrlAhEd_ku {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.gcJ1qKeFpg2pFRPU3nR6 {
  cursor: pointer;
  opacity: 0.3;
}

.y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:hover .TkTjoQ2Bj1m8TWvgWKLG, .y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:focus .TkTjoQ2Bj1m8TWvgWKLG, .y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:focus-within .TkTjoQ2Bj1m8TWvgWKLG {
  opacity: revert;
}
.y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:hover .grFK4QOnHWBqwIzIuYu5, .y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:focus .grFK4QOnHWBqwIzIuYu5, .y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:focus-within .grFK4QOnHWBqwIzIuYu5 {
  opacity: 0;
}
.y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:hover .Oqicf8G5phjrlAhEd_ku, .y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:focus .Oqicf8G5phjrlAhEd_ku, .y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:focus-within .Oqicf8G5phjrlAhEd_ku {
  opacity: revert;
}
.y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:hover .dj9RVdnzS6HBk4blFsKs, .y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:focus .dj9RVdnzS6HBk4blFsKs, .y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:focus-within .dj9RVdnzS6HBk4blFsKs {
  opacity: revert;
}
.y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:hover .ivnSOd1bO2j5iDG5AkCi, .y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:focus .ivnSOd1bO2j5iDG5AkCi, .y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:focus-within .ivnSOd1bO2j5iDG5AkCi {
  opacity: 0;
}
.y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:hover .RxnI56k0tWA9kERWzlmX, .y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:focus .RxnI56k0tWA9kERWzlmX, .y_B2kBSLAwe3JLkwixkA.GjxbGyWNm_wnazhdMURL:focus-within .RxnI56k0tWA9kERWzlmX {
  opacity: 0;
  z-index: -1;
}

.RxnI56k0tWA9kERWzlmX {
  background: linear-gradient(180deg, rgba(250, 250, 250, 0) 0%, #FAFAFA 100%);
  bottom: 0;
  height: 64px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.grFK4QOnHWBqwIzIuYu5 {
  position: relative;
  z-index: 2;
}

.RYgSYwaniUma7fuM_jwF {
  background: #6D48D0;
  border-radius: 1000px;
  color: #FFFFFF;
  padding: 2px 8px;
  position: absolute;
  top: 8px;
  right: 8px;
}

.Dr7WP08YuQpAcQDkK6KT {
  transform: rotate(-90deg);
}

@media screen and (min-width: 769px) {
  .TkTjoQ2Bj1m8TWvgWKLG, .Oqicf8G5phjrlAhEd_ku, .TkTjoQ2Bj1m8TWvgWKLG, .dj9RVdnzS6HBk4blFsKs {
    opacity: 0;
    transition: all 200ms ease-in-out;
  }
}
/*!*************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/modal-deprecated/modal.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 */
/*
Animation styles and keyframes
*/
.animated {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.-fill-mode-backwards {
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
}
.animated.-fill-mode-forwards {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.animated.v-fast {
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
}

.animated.fast {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
}

.animated.medium-pace {
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
}

.animated.slow {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.animated.v-slow {
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
}

.animated.v-v-slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.v-v-v-slow {
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
}

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

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

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

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

.publish-icon-looped-animation .pmw-icon {
  overflow: hidden;
}
.publish-icon-looped-animation .pmw-icon::before {
  animation: publishIconArrowAnimationLooped 2500ms cubic-bezier(0.68, -0.6, 0.32, 1.6) infinite;
  display: block;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes publishIconArrowAnimation {
  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 publishIconArrowAnimationLooped {
  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);
  }
}
.-origin-left {
  -webkit-transform-origin: left; /* Chrome, Safari, Opera */
  transform-origin: left;
}

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

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

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

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

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

.onHoverEnlarge {
  opacity: 1;
  -webkit-transition: transform 0.2s ease-out;
  transition: transform 0.2s ease-out;
}
.onHoverEnlarge: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);
}

.hover-transition-all {
  -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 flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

@-webkit-keyframes fadeInAnimation {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@keyframes fadeInAnimation {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}
@-webkit-keyframes jelloAnimation {
  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 jelloAnimation {
  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 rotateAnimation {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes rotateAnimation {
  0% {
    transform: rotate(180deg);
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes shrinkAnimation {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@keyframes shrinkAnimation {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.6);
    opacity: 1;
  }
}
@-webkit-keyframes panRightAnimation {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@keyframes panRightAnimation {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(25px);
    opacity: 1;
  }
}
@-webkit-keyframes panLeftAnimation {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@keyframes panLeftAnimation {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateX(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes panUpAnimation {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@keyframes panUpAnimation {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-25px);
    opacity: 1;
  }
}
@-webkit-keyframes panDownAnimation {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@keyframes panDownAnimation {
  0% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(25px);
    opacity: 1;
  }
}
@-webkit-keyframes peekDownAnimation {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@keyframes peekDownAnimation {
  0% {
    transform: translateY(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(40px);
    opacity: 1;
  }
}
@-webkit-keyframes peekUpAnimation {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@keyframes peekUpAnimation {
  0% {
    transform: translateY(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes peekLeftAnimation {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@keyframes peekLeftAnimation {
  0% {
    transform: translateX(60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(-40px);
    opacity: 1;
  }
}
@-webkit-keyframes peekRightAnimation {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@keyframes peekRightAnimation {
  0% {
    transform: translateX(-60px);
    opacity: 0.4;
  }
  100% {
    transform: translateX(40px);
    opacity: 1;
  }
}
@-webkit-keyframes popAnimation {
  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 popAnimation {
  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 tumbleAnimation {
  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 tumbleAnimation {
  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 wipeDownAnimation {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes wipeDownAnimation {
  0% {
    clip-path: inset(-3px -3px 100% -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes wipeUpAnimation {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes wipeUpAnimation {
  0% {
    clip-path: inset(100% -3px -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes wipeLeftAnimation {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes wipeLeftAnimation {
  0% {
    clip-path: inset(-3px -3px -3px 100%);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes wipeRightAnimation {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@keyframes wipeRightAnimation {
  0% {
    clip-path: inset(-3px 100% -3px -3px);
  }
  100% {
    clip-path: inset(-3px -3px -3px -3px);
  }
}
@-webkit-keyframes blockAnimation {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@keyframes blockAnimation {
  0% {
    transform: translateX(-85px);
  }
  100% {
    transform: translateX(85px);
  }
}
@-webkit-keyframes bounceInDownAnimation {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@keyframes bounceInDownAnimation {
  0% {
    transform: translateY(-20px);
  }
  70% {
    transform: translate(10px, 16px);
    opacity: 0.7;
  }
  100% {
    transform: translate(20px, 0);
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

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

@keyframes backdropFadeIn {
  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 backdropFadeIn {
  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 backdropFadeOut {
  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 backdropFadeOut {
  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 fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

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

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

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

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

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

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

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

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

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

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

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

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

.fast-transition {
  transition-duration: 0.4s;
}

.very-fast-transition {
  transition-duration: 0.2s;
}

.super-fast-transition {
  transition-duration: 0.1s;
}

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

@-webkit-keyframes pulse {
  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 pulse {
  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);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes zoomOut {
  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 zoomOut {
  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 zoomOut {
  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;
  }
}
.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomIn {
  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 zoomIn {
  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 zoomIn {
  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);
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

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

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

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

@keyframes animateTTablet {
  0% {
    bottom: -60px;
    right: -30px;
  }
  100% {
    bottom: -30px;
    right: 0;
  }
}
/* Bouncing Loading Box */
@keyframes bouncing-box {
  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 bouncing-box {
  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 shadow {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}
@-webkit-keyframes shadow {
  0%, 100% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1);
  }
}
.box-loading {
  bottom: 0;
  height: 75px;
  left: 0;
  margin: auto;
  position: relative;
  right: 0;
  top: 0;
  width: 49px;
}

.box-loading:before {
  -webkit-animation: shadow 0.58s linear infinite;
  animation: shadow 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;
}

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

.box-loading.-white:after {
  background: #fff;
}

/* End of Bouncing Loading Box */
@-webkit-keyframes gradient-change {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-moz-keyframes gradient-change {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@keyframes gradient-change {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@-webkit-keyframes shake {
  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 shake {
  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);
  }
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

.loading-gear-svg {
  -webkit-transform-box: fill-box;
  transform-box: fill-box;
  transform-origin: center;
}

.gear-clockwise-animation {
  -webkit-animation: spin 2.5s linear infinite;
  animation: spin 2.5s linear infinite;
}

.gear-c-clockwise-animation {
  -webkit-animation: spin-negative 2.5s linear infinite;
  animation: spin-negative 2.5s linear infinite;
}

.gear-c-clockwise-fast-animation {
  -webkit-animation: spin-negative 2s linear infinite;
  animation: spin-negative 2s linear infinite;
}

.infinite-spin-with-centering {
  -webkit-animation: spinWithCenter 1.5s linear infinite;
  animation: spinWithCenter 1.5s linear infinite;
}

@keyframes spinWithCenter {
  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 spinWithCenter {
  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 spin {
  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 spin {
  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 spin {
  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 spin-negative {
  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 spin-negative {
  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 spin-negative {
  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 jackInTheBox {
  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 jackInTheBox {
  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);
  }
}
.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

@-webkit-keyframes bounceOut {
  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 bounceOut {
  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);
  }
}
.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceIn {
  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 bounceIn {
  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);
  }
}
.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes flipInY {
  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 flipInY {
  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;
  }
}
.flipInY {
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  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 doubleBlinkEyes {
  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 flipOutY {
  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;
  }
}
.flipOutY {
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

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

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

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

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

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

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

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

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

.slideIn.-from-left {
  animation: slideInFromLeft 0.25s linear;
  -webkit-animation: slideInFromLeft 0.25s linear; /* Chrome, Safari, Opera */
}
.slideIn.-from-right {
  animation: slideInFromRight 0.25s linear;
  -webkit-animation: slideInFromRight 0.25s linear; /* Chrome, Safari, Opera */
}
.slideIn.-from-top {
  animation: slideInFromTop 0.15s linear;
  -webkit-animation: slideInFromTop 0.15s linear; /* Chrome, Safari, Opera */
}
.slideIn.-from-bottom {
  animation: slideInFromBottom 0.15s linear;
  -webkit-animation: slideInFromBottom 0.15s linear; /* Chrome, Safari, Opera */
}
.slideIn.-from-left-slow {
  animation: slideInFromLeft 0.4s linear;
  -webkit-animation: slideInFromLeft 0.4s linear; /* Chrome, Safari, Opera */
}
.slideIn.-from-right-slow {
  animation: slideInFromRight 0.4s linear;
  -webkit-animation: slideInFromRight 0.4s linear; /* Chrome, Safari, Opera */
}

.slideOut.-to-left {
  animation: slideOutToLeft 0.25s linear;
  -webkit-animation: slideOutToLeft 0.25s linear; /* Chrome, Safari, Opera */
}
.slideOut.-to-right {
  animation: slideOutToRight 0.25s linear;
  -webkit-animation: slideOutToRight 0.25s linear; /* Chrome, Safari, Opera */
}
.slideOut.-to-bottom {
  animation: slideOutToBottom 0.15s linear;
  -webkit-animation: slideOutToBottom 0.15s linear; /* Chrome, Safari, Opera */
}
.slideOut.-to-top {
  animation: slideOutToTop 0.15s linear;
  -webkit-animation: slideOutToTop 0.15s linear; /* Chrome, Safari, Opera */
}
.slideOut.-to-left-slow {
  animation: slideOutToLeft 0.4s linear;
  -webkit-animation: slideOutToLeft 0.4s linear; /* Chrome, Safari, Opera */
}
.slideOut.-to-right-slow {
  animation: slideOutToRight 0.4s linear;
  -webkit-animation: slideOutToRight 0.4s linear; /* Chrome, Safari, Opera */
}

@-webkit-keyframes bob {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}
@keyframes bob {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@-webkit-keyframes reverseBob {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes reverseBob {
  0%, 50%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}
@keyframes slideInFromRight {
  0% {
    transform: translateX(150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@-webkit-keyframes slideInFromLeft {
  0% {
    transform: translateX(-150%);
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}
@keyframes slideInFromTop {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes slideInFromTop {
  0% {
    transform: translateY(-150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes slideInFromBottom {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes slideInFromBottom {
  0% {
    transform: translateY(150%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes slideOutToRight {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@-webkit-keyframes slideOutToRight {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}
@keyframes slideOutToLeft {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@-webkit-keyframes slideOutToLeft {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}
@keyframes slideOutToBottom {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@-webkit-keyframes slideOutToBottom {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(150%);
  }
}
@keyframes slideOutToTop {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@-webkit-keyframes slideOutToTop {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-150%);
  }
}
@keyframes semiSpin {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@-webkit-keyframes semiSpin {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(50deg);
  }
}
@keyframes semi-fade {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0.5;
  }
}
@keyframes fade-1 {
  0%, 19%, 100% {
    opacity: 1;
  }
  20%, 40%, 60%, 80% {
    opacity: 0;
  }
}
@keyframes fade-2 {
  0%, 19%, 40%, 60%, 80%, 100% {
    opacity: 0;
  }
  20%, 39% {
    opacity: 1;
  }
}
@keyframes fade-3 {
  0%, 20%, 39%, 60%, 80%, 100% {
    opacity: 0;
  }
  40%, 59% {
    opacity: 1;
  }
}
@keyframes fade-4 {
  0%, 20%, 40%, 59%, 80%, 100% {
    opacity: 0;
  }
  60%, 79% {
    opacity: 1;
  }
}
@keyframes fade-5 {
  0%, 20%, 40%, 60%, 79%, 100% {
    opacity: 0;
  }
  80%, 99% {
    opacity: 1;
  }
}
@keyframes flash-opacity {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@-webkit-keyframes flash-opacity {
  0% {
    visibility: visible;
  }
  1% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    visibility: hidden;
  }
}
@keyframes scaleIn {
  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 scaleIn {
  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 breathing {
  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 breathing {
  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 expand-down-up {
  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 move-down-up-bounce {
  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);
  }
}
.modal, .modal-v2, .modal-popup {
  backdrop-filter: blur(4px) opacity(0);
  -webkit-backdrop-filter: blur(4px) opacity(0);
  -webkit-transition: backdrop-filter 300ms ease-in-out, -webkit-backdrop-filter 300ms ease-in-out;
  transition: backdrop-filter 300ms ease-in-out, -webkit-backdrop-filter 300ms ease-in-out;
}
.modal.modal-open, .modal.-open, .modal.open, .modal-v2.modal-open, .modal-v2.-open, .modal-v2.open, .modal-popup.modal-open, .modal-popup.-open, .modal-popup.open {
  opacity: 1;
  top: 0;
  visibility: visible;
  animation-name: backdropFadeIn;
  animation-duration: 300ms;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.modal.modal-closing, .modal.-closing, .modal-v2.modal-closing, .modal-v2.-closing, .modal-popup.modal-closing, .modal-popup.-closing {
  animation-name: backdropFadeOut;
  animation-duration: 300ms;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.animate-modal-dialog-open {
  -webkit-animation-name: modalDialogOpen;
  animation-name: modalDialogOpen;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-duration: 300ms;
}
.animate-modal-dialog-open.-reverse {
  -webkit-animation-name: modalDialogOpenReverse;
  animation-name: modalDialogOpenReverse;
}

.animate-modal-dialog-close {
  -webkit-animation-name: modalDialogClose;
  animation-name: modalDialogClose;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-duration: 300ms;
}
.animate-modal-dialog-close.-reverse {
  -webkit-animation-name: modalDialogCloseReverse;
  animation-name: modalDialogCloseReverse;
}

@keyframes modalDialogOpen {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes modalDialogOpen {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes modalDialogClose {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes modalDialogClose {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes modalDialogOpenReverse {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes modalDialogOpenReverse {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes modalDialogCloseReverse {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes modalDialogCloseReverse {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@media screen and (max-width: 781px) {
  @keyframes modalDialogOpen {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @-webkit-keyframes modalDialogOpen {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @-webkit-keyframes modalDialogClose {
    0% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  }
  @keyframes modalDialogClose {
    0% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    100% {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  }
}
.modal-v2 {
  display: flex;
  justify-content: center;
  z-index: 6000;
}
.modal-v2.-open {
  opacity: 1;
  top: 0;
  visibility: visible;
}
.modal-v2.-close {
  opacity: 0;
  visibility: hidden;
}
.modal-v2 > .content {
  align-self: center;
  backface-visibility: hidden;
  left: 0;
  padding: 20px;
  position: absolute;
  -ms-transform: translate(0, -50%);
  width: 100%;
}
.modal-v2 > .content > .-open {
  animation-duration: 400ms;
  animation-fill-mode: forwards;
  -webkit-animation-name: modalDialogOpen;
  animation-name: modalDialogOpen;
  animation-timing-function: ease-in-out;
}
.modal-v2 > .content > .-close {
  animation-duration: 400ms;
  animation-fill-mode: forwards;
  -webkit-animation-name: modalDialogClose;
  animation-name: modalDialogClose;
  animation-timing-function: ease-in-out;
}
.modal-v2 .close-modal-v2 {
  position: absolute;
  right: -60px;
  top: 0;
  z-index: 1;
}

@media screen and (min-width: 769px) {
  .modal-v2.-standard > .content > .-open {
    border-radius: 8px;
    box-shadow: 0 6px 24px 4px rgba(20, 19, 37, 0.15);
    margin: auto;
    max-width: 895px;
    width: 90%;
  }
}
@media screen and (max-width: 768px) {
  .modal-v2 > .content {
    padding: 0;
  }
  .modal-v2 .close-modal-v2 {
    right: 12px;
    top: -52px;
  }
  .modal-v2.-standard {
    padding: 0;
  }
  .modal-v2.-standard > .content > .-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin: 0;
    max-width: unset;
    min-width: unset;
    width: 100%;
  }
  .modal-v2.-standard > .content {
    align-self: flex-end;
  }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .modal-v2 > .content {
    top: 50%;
  }
}
.modal .modal-header-tabs {
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  line-height: 60px;
  left: 50%;
  max-width: calc(100% - 80px);
  transform: translate(-50%, 0);
  overflow: hidden;
  position: absolute;
}
.modal .modal-header-tabs.-sidebar {
  display: flex;
  line-height: 40px;
  max-width: none;
  top: -13px;
}
.modal .modal-header-tabs.-sidebar .modal-header-tab {
  font-size: 12px;
  line-height: 40px;
  min-width: 150px;
}
.modal .modal-header-tab {
  -webkit-transition: border 200ms ease-in-out, color 200ms ease-in-out;
  transition: border 200ms ease-in-out, color 200ms ease-in-out;
  border-bottom: 2px solid rgba(255, 255, 255, 0);
  color: #403F5D;
  font-size: 16px;
  font-weight: 600;
  line-height: 60px;
  min-width: 100px;
  text-align: center;
  padding: 0 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 12px;
}
.modal .modal-header-tab:last-child {
  margin-right: 0;
}
.modal .modal-header-tab:hover, .modal .modal-header-tab:focus {
  cursor: pointer;
  border-bottom: 2px solid #9FDDF3;
}
.modal .modal-header-tab.selected {
  border-bottom: 2px solid #3FBCE7;
  color: #3FBCE7;
}
.modal .header.has-tabs {
  justify-content: flex-end;
  position: relative;
}
.modal .header.has-tabs .title {
  display: none;
}
.modal .header.has-tabs .modal-header-tabs {
  display: flex;
}
.modal.-no-header .header {
  display: none;
}
.modal.-header-less .modal-content > .header {
  border-bottom: none;
  height: 60px;
  justify-content: flex-end;
}
.modal.-header-less .modal-content > .header .title {
  display: none;
}

.modal-content > .header {
  align-items: center;
  border-bottom: 1px solid #DCDCE1;
  color: #403F5D;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  font-size: 16px;
  height: 64px;
  justify-content: space-between;
  margin-bottom: 0;
  min-height: 64px;
  padding: 0 6px;
  position: relative;
}
.modal-content > .header .row {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.modal-content > .header .title {
  align-self: center;
  display: flex;
  flex-direction: row;
  margin: 0 18px;
  max-width: 100%;
}
.modal-content > .header .title.-has-back {
  display: flex;
  flex-direction: row;
}
.modal-content > .header .title.-has-back .back {
  margin-left: -16px;
}
.modal-content > .header .title.-has-back h2 {
  margin-left: 4px;
}
.modal-content > .header .title > h2,
.modal-content > .header .title > span {
  align-self: center;
  color: #403F5D;
  font-size: 16px;
  font-weight: 600;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-content > .header .title > h2 a,
.modal-content > .header .title > span a {
  font-weight: 300;
}
.modal-content > .header .title > h2:not(.-no-text-transform), .modal-content > .header .title > h2:not(.-no-text-transform) span,
.modal-content > .header .title > span:not(.-no-text-transform),
.modal-content > .header .title > span:not(.-no-text-transform) span {
  text-transform: lowercase;
}
.modal-content > .header .title > h2:not(.-no-text-transform):not(.hidden), .modal-content > .header .title > h2:not(.-no-text-transform) span:not(.hidden),
.modal-content > .header .title > span:not(.-no-text-transform):not(.hidden),
.modal-content > .header .title > span:not(.-no-text-transform) span:not(.hidden) {
  display: inline-block;
}
.modal-content > .header .title > h2:not(.-no-text-transform):first-letter, .modal-content > .header .title > h2:not(.-no-text-transform) span:first-letter,
.modal-content > .header .title > span:not(.-no-text-transform):first-letter,
.modal-content > .header .title > span:not(.-no-text-transform) span:first-letter {
  text-transform: uppercase;
}
.modal-content > .header .top-actions-bar {
  right: 24px;
}
.modal-content > .header .non-clickable-breadcrumb .icon {
  color: #403F5D;
  line-height: 100%;
  margin: 0 12px;
  vertical-align: middle;
}
.modal-content > .header:not(.-flex) .action {
  margin-left: 5px;
}

@media screen and (max-width: 550px) {
  .modal-content > .header {
    padding: 12px 8px;
  }
  .modal-content > .header .title {
    margin: 0 12px;
  }
  .modal-content > .header .title.-has-back {
    max-width: 60%;
  }
  .modal-content > .header .title.-has-back .back {
    margin-left: -12px;
  }
}
.modal-content .modal-header-actions {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
}
.modal-content .modal-header-actions:not(.-multiple-actions) .modal-header-action.close:before {
  display: none;
}
.modal-content .modal-header-actions.-multiple-actions .modal-header-action.close {
  margin-left: 9px;
  position: relative;
}
.modal-content .modal-header-actions.-multiple-actions .modal-header-action.close:before {
  align-self: center;
  border-left: 1px solid #DCDCE1;
  content: "";
  display: inline-block;
  height: 40px;
  left: -11px;
  margin-left: 5px;
  position: absolute;
  width: 1px;
}
.modal-content .modal-header-actions.actions-responsive {
  display: none;
}
.modal-content .modal-header-actions.actions-responsive:not(.-open) .responsive-settings-container {
  display: none;
}
.modal-content .modal-header-actions.actions-responsive.-open {
  position: relative;
}
.modal-content .modal-header-actions.actions-responsive.-open > .modal-header-action {
  background: #F2F2F5;
}
.modal-content .modal-header-actions.actions-responsive.-open .action-label {
  white-space: nowrap;
}
.modal-content .modal-header-actions.actions-responsive.-open .responsive-settings-container {
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: 42px;
  z-index: 1000001;
}
.modal-content .modal-header-actions.actions-responsive.-open .responsive-settings-container .modal-header-action {
  display: flex;
  margin: 0;
}
.modal-content .modal-header-action {
  align-items: center;
  background: none;
  border-radius: 2px;
  color: #757589;
  cursor: pointer;
  display: flex;
  font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-transition: color 200ms ease-in-out, background 200ms ease-in-out;
  transition: color 200ms ease-in-out, background 200ms ease-in-out;
  margin: 0 2px;
  padding: 12px;
}
.modal-content .modal-header-action.hidden {
  display: none;
}
.modal-content .modal-header-action.-has-icon {
  margin-left: 2px;
}
.modal-content .modal-header-action:hover, .modal-content .modal-header-action:focus {
  background: #F2F2F5;
  color: #757589;
}
.modal-content .modal-header-action .action-icon {
  color: #403F5D;
  font-size: 22px;
  line-height: 22px;
  margin: 0;
  min-width: 22px;
}
.modal-content .modal-header-action, .modal-content .modal-header-action .action-label {
  color: #757589;
  font-size: 12px;
  line-height: 22px;
}
.modal-content .modal-header-action .action-label {
  margin: 0 0 0 8px;
}
.modal-content > .header.-flex .modal-header-actions {
  flex-direction: row;
}
.modal-content > .header .close {
  display: flex;
}
.modal-content > .header .close .icon {
  border-radius: 2px;
  color: #403F5D;
  font-size: 24px;
  line-height: 24px;
  margin: 0;
  min-width: 0;
  -webkit-transition: color 200ms ease-in-out, background 200ms ease-in-out;
  transition: color 200ms ease-in-out, background 200ms ease-in-out;
  text-decoration: none;
}
.modal-content > .header .close:hover .icon, .modal-content > .header .close:focus .icon {
  background: #F2F2F5;
  color: #2C2B44;
}

@media screen and (max-width: 768px) {
  .modal:not(.-flex) .modal-content .modal-header-actions:not(.actions-responsive).-multiple-actions .modal-header-action:not(.close) {
    display: none;
  }
  .modal:not(.-flex) .modal-content .modal-header-actions.actions-responsive {
    display: block;
  }
  .modal:not(.-flex) .modal-content > .header:not(.-flex) .top-actions-bar {
    display: flex;
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 550px) {
  .modal .modal-content .modal-header-action {
    margin: 0;
    padding: 10px;
  }
  .modal .modal-content .modal-header-actions:not(.actions-responsive) .action-label {
    display: none;
  }
  .modal .modal-content .modal-header-actions:not(.actions-responsive) .close .icon {
    font-size: 20px;
    line-height: 20px;
  }
}
body.-open-modal {
  overflow: hidden;
}

.modal, .modal-v2 {
  background: rgba(44, 43, 68, 0.7);
  bottom: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: 13px;
  position: fixed;
  right: 0;
  top: -9999px;
  visibility: hidden;
  z-index: 5000;
}

.modal {
  display: flex;
  padding: 13px;
}
.modal .modal-content {
  align-self: center;
  display: flex;
  flex-direction: column;
}
.modal.-fullwidth-footer .primary-actions {
  width: 100%;
}
.modal.-mobile-fullwidth-footer .primary-actions {
  text-align: right;
}
.modal.-radius-16 .modal-content {
  border-radius: 16px;
}
.modal.-centered-header .modal-content .header {
  border-bottom: none;
}
.modal.-centered-header .modal-content .header .title {
  display: flex;
  margin: auto;
  padding-left: 40px;
}
.modal.-centered-header .modal-content .content {
  padding-top: 0 !important;
}
.modal.-header-less > .modal-content > .content {
  padding: 0 48px 28px 48px !important;
}
.modal.-full-height {
  height: 100%;
}
.modal.-full-height .modal-content {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  height: 100%;
}
.modal.footer-border .footer {
  border-top: 1px solid #DCDCE1;
}
.modal.full-scroll > .modal-content > .content {
  padding: 0 48px !important;
}
.modal.full-scroll .footer {
  border-top: 1px solid #DCDCE1;
}
.modal.half-scroll > .modal-content > .content {
  padding: 28px 48px 0 48px !important;
}
.modal.half-scroll .footer {
  border-top: 1px solid #DCDCE1;
}
.modal.less-right-padding-scroll > .modal-content > .content {
  padding: 28px 24px 0 48px;
}
.modal.less-right-padding-scroll .footer {
  border-top: 1px solid #DCDCE1;
}
.modal.-no-left-content-padding .content {
  left: -48px;
  width: calc(100% + 48px);
}
.modal.-less-horizontal-content-padding > .modal-content > .content {
  padding: 28px 21px;
}
.modal.-no-footer .footer {
  display: none !important;
  height: 0 !important;
}
.modal:not(.-flex) .modal-content {
  margin: 0 auto;
}
.modal.-auto {
  display: flex;
  flex-direction: column;
}
.modal.-auto .modal-content {
  align-self: center;
  height: auto;
  margin: auto;
  width: auto;
}
.modal.-auto .modal-content .content {
  height: auto;
}
.modal:not(.-header-less) .modal-content {
  transition: 0.4s width ease-in-out, 0.4s height ease-in-out, min-height 0.4s ease-in-out;
}
.modal:not(.-header-less) .modal-content .content.-no-scroll {
  overflow: visible;
}
.modal.-flex {
  align-items: center;
  display: flex;
  justify-content: center;
}
.modal.-flex .modal-content {
  display: flex;
  flex-direction: column;
  transition: 0s width ease-in-out, 0s height ease-in-out, min-height 0s ease-in-out;
}
.modal.-content-max-h-70 .modal-content .content {
  max-height: 70%;
}
.modal.-content-max-h-80 .modal-content .content {
  max-height: 80%;
}
.modal.-overflow-hidden .modal-content .content {
  overflow: hidden;
}
.modal.-full-height {
  height: 100%;
  padding: 52px 0 0 0;
}
.modal.-full-height .modal-content {
  height: 100%;
}
.modal.-full-height .content {
  overflow: visible;
}
.modal.confirmation-modal .modal-content {
  height: 430px;
  width: 540px;
}
.modal.audio-type-modal .modal-content {
  max-width: 640px;
}
.modal.user-menu-modal .modal-content {
  max-height: 700px;
  max-width: 1260px;
}

.download-loading {
  display: flex;
  flex-direction: column;
  padding: 84px 0;
}
.download-loading .loader-container {
  margin-bottom: 8px;
  padding: 0;
}
.download-loading .loader-container .icon-circular-loader {
  height: 36px;
  left: calc(50% - 18px);
  position: relative;
  width: 36px;
}
.download-loading .loading-text {
  color: #403F5D;
  text-align: center;
}

#pmw-app .modal.multi-media-content .media-modal-content {
  overflow: hidden;
}

.modal-content {
  background: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.1);
  height: auto;
  max-height: 100%;
  max-width: 100%;
  padding: 0;
  position: relative;
  width: 1000px;
}
.modal-content p, .modal-content li {
  font-size: 14px;
  font-size: 0.875rem;
  line-height: 19px;
}
.modal-content .modal-loader {
  left: 50%;
  position: relative;
  top: 50%;
  transform: translate(-50%, -50%);
}
.modal-content .please-wait {
  color: #9B9B9B;
  font-size: 20.8px;
  font-size: 1.3rem;
  font-weight: 100;
  line-height: 20.8px;
  line-height: 1.3rem;
  margin: 20px auto;
  padding: 20px 0 40px 0;
  text-align: center;
}
.modal-content .please-wait.-middle {
  margin-top: 30%;
}
.modal-content .album-column {
  flex: 1 0 auto;
}
.modal-content .row, .modal-content .photo-column {
  align-content: flex-end;
  align-items: center;
  display: flex;
  flex: 1 1 100%;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.modal-content hr {
  border-bottom: none;
  border-top-color: #E6E6EC;
  margin: 10px 0 0;
}
.modal-content > .content {
  box-shadow: inset -7px -2px 23px 2px rgba(0, 0, 0, 0);
  display: block;
  height: 100%;
  -webkit-transition: box-shadow 200ms ease-in-out;
  transition: box-shadow 200ms ease-in-out;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 28px 48px;
  position: relative;
}
.modal-content > .content.-scrolling {
  box-shadow: inset -7px -2px 23px 2px rgba(0, 0, 0, 0.15);
}
.modal-content > .footer {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 20px 24px;
}
.modal-content > .footer.-scrolling {
  box-shadow: 0 0 12px rgba(20, 19, 37, 0.1);
  clip-path: inset(-12px 0 0 0);
}
.modal-content > .footer.-has-border {
  border-top: 1px solid #e5e5e5;
}
.modal-content > .footer .action {
  padding: 0 5px;
}
.modal-content > .footer .action:first-child {
  border-left: none;
  padding: 0 5px 0 0;
}
.modal-content > .footer .action .btn {
  background: #ECF8FD;
  border-radius: 2px;
  box-shadow: 0 2px 0 #CDF0FB;
  color: #403F5D;
  width: 220px;
}
.modal-content > .footer .action .btn:hover {
  background: #CDF0FB;
  box-shadow: 0 2px 0 #B2E4F6;
}
.modal-content > .footer .secondary-actions .action {
  font-size: 12px;
  font-size: 0.75rem;
}
.modal-content > .footer .secondary-actions .btn-link:disabled {
  background: #FAFAFA;
  box-shadow: 0px 2px 0px #E6E6EC;
  color: #DCDCE1;
  font-style: normal;
}
.modal-content > .footer .footer-links li {
  display: inline-block;
  padding: 0 9px;
}
.modal-content > .footer .footer-links li.sep {
  font-size: 10px;
  vertical-align: top;
}
.modal-content > .footer:not(.-flex) {
  vertical-align: middle;
}
.modal-content > .footer:not(.-flex) .primary-actions.picker {
  margin: 4px 0;
}
.modal-content > .footer:not(.-flex) .secondary-actions {
  float: left;
}
.modal-content > .footer:not(.-flex) .btn {
  margin-left: 5px;
}
.modal-content > .footer.-flex {
  align-content: center;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
}
.modal-content > .footer.-flex > .action-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.modal-content .header.-faded {
  background: rgba(44, 43, 68, 0.7);
  border-bottom: none;
}

@media screen and (max-width: 800px) {
  .modal-content .footer .secondary-actions .btn {
    width: 92px;
  }
}
.modal-message-strip {
  align-items: flex-start;
  display: flex;
  font-size: 14px;
  font-weight: 300;
  justify-content: center;
  line-height: 19px;
  padding: 7px;
  text-align: center;
}
.modal-message-strip a {
  text-decoration: underline;
}
.modal-message-strip.-warning {
  background: #FDF8EC;
  color: #935801;
}
.modal-message-strip.-warning a {
  color: #935801;
}
.modal-message-strip.-warning a:hover, .modal-message-strip.-warning a:focus {
  color: #D69923;
}
.modal-message-strip.-error {
  background: #FEF3F6;
  color: #9C002F;
}
.modal-message-strip.-error a {
  color: #9C002F;
}
.modal-message-strip.-error a:hover, .modal-message-strip.-error a:focus {
  color: #D32559;
}
.modal-message-strip .icon {
  font-size: 21px;
  line-height: 21px;
  margin-right: 8px;
  vertical-align: bottom;
}

.modal.full-screen .modal-content {
  height: 94%;
  padding: 0;
  width: 100%;
}
.modal.full-screen .modal-content .content {
  padding: 28px 48px 0 48px;
}
.modal.full-screen .modal-content .footer {
  border-top: 1px solid #DCDCE1;
}

.modal[data-view=cropping] .header {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .modal.-mobile-fullwidth-footer .btn, .modal.-mobile-fullwidth-footer .primary-actions {
    width: 100%;
  }
  .modal-content > .footer .footer-links li {
    padding: 0 4px;
  }
}
@media screen and (max-width: 550px) {
  .modal {
    padding: 13px 0 0 0;
  }
  .modal.-auto .model-content {
    align-self: auto;
    width: 100%;
  }
  .modal .modal-content {
    align-self: flex-end;
    border-radius: 8px;
  }
  .modal .modal-content > .footer {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 12px;
  }
  .modal .modal-content > .content {
    padding: 20px 12px 12px 12px;
  }
  .modal.full-screen .modal-content > .content, .modal.half-scroll .modal-content > .content, .modal.less-right-padding-scroll .modal-content > .content {
    padding: 20px 12px 0 12px !important;
  }
  .modal.-header-less .modal-content > .content {
    padding: 0 12px 12px 12px;
  }
  .modal.-radius-16 .modal-content {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .modal.full-scroll .modal-content > .content {
    padding: 0 12px !important;
  }
  .modal.-flex {
    align-items: flex-end;
  }
  .modal > .modal-content, .modal.-radius-16 {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0 !important;
  }
}
.modal.vertical-align-wrap .modal-content {
  height: auto;
}

/*
Helper mixin that creates rules for modals of specified widths and the media queries to ensure they fit on screen on screen
sizes smaller than width + 40px.
*/
/*
Hides the text of CTA buttons and displays an icon instead, used for small screen widths
*/
.modal.-modal-95 .modal-content {
  width: 95%;
}

@media screen and (max-width: 135%px) {
  .modal.-modal-95 .modal-content {
    width: 100%;
  }
}
.modal.-modal-350 .modal-content {
  width: 350px;
}

@media screen and (max-width: 390px) {
  .modal.-modal-350 .modal-content {
    width: 100%;
  }
}
.modal.-modal-400 .modal-content {
  width: 400px;
}

@media screen and (max-width: 440px) {
  .modal.-modal-400 .modal-content {
    width: 100%;
  }
}
.modal.-modal-500 .modal-content {
  width: 500px;
}

@media screen and (max-width: 540px) {
  .modal.-modal-500 .modal-content {
    width: 100%;
  }
}
.modal.-modal-550 .modal-content {
  width: 550px;
}

@media screen and (max-width: 590px) {
  .modal.-modal-550 .modal-content {
    width: 100%;
  }
}
.modal.-modal-570 .modal-content {
  width: 570px;
}

@media screen and (max-width: 610px) {
  .modal.-modal-570 .modal-content {
    width: 100%;
  }
}
.modal.-modal-650 .modal-content {
  width: 650px;
}

@media screen and (max-width: 690px) {
  .modal.-modal-650 .modal-content {
    width: 100%;
  }
}
.modal.-modal-700 .modal-content {
  width: 700px;
}

@media screen and (max-width: 740px) {
  .modal.-modal-700 .modal-content {
    width: 100%;
  }
}
.modal.-modal-750 .modal-content {
  width: 750px;
}

@media screen and (max-width: 790px) {
  .modal.-modal-750 .modal-content {
    width: 100%;
  }
}
.modal.-modal-800 .modal-content {
  width: 800px;
}

@media screen and (max-width: 840px) {
  .modal.-modal-800 .modal-content {
    width: 100%;
  }
}
.modal.-modal-1000 .modal-content {
  width: 1000px;
}

@media screen and (max-width: 1040px) {
  .modal.-modal-1000 .modal-content {
    width: 100%;
  }
}
.modal.-modal-h-95 .modal-content {
  height: 95%;
}

@media screen and (max-height: 115%px) {
  .modal.-modal-h-95 .modal-content {
    height: 90%;
  }
  .modal.-modal-h-95 .modal-content .header {
    height: 59px;
    padding-top: 30px;
  }
}
.modal.-modal-h-85 .modal-content {
  height: 85%;
}

@media screen and (max-height: 105%px) {
  .modal.-modal-h-85 .modal-content {
    height: 90%;
  }
  .modal.-modal-h-85 .modal-content .header {
    height: 59px;
    padding-top: 30px;
  }
}
.modal.-modal-h-200 .modal-content {
  height: 200px;
}

.modal.-modal-h-250 .modal-content {
  height: 250px;
}

.modal.-modal-h-350 .modal-content {
  height: 350px;
}

.modal.-modal-h-400 .modal-content {
  height: 400px;
}

.modal.-modal-h-450 .modal-content {
  height: 450px;
}

.modal.-modal-h-550 .modal-content {
  height: 550px;
}

.modal.-modal-h-570 .modal-content {
  height: 570px;
}

.modal.-modal-h-670 .modal-content {
  height: 670px;
}

#pmw-app .modal {
  color: #757589;
  max-height: 100%;
}
#pmw-app .modal.full-screen .modal-content .content {
  overflow: hidden;
  padding: 28px 0 0;
}
#pmw-app .modal .media-modal-content {
  height: 100%;
  overflow-x: hidden;
  padding: 0 48px;
  position: relative;
}
#pmw-app .modal.user-menu-modal.full-screen .modal-content .content {
  padding: 0;
}

@media screen and (max-width: 550px) {
  #pmw-app .modal .media-modal-content {
    padding: 16px;
  }
  #pmw-app .modal.full-screen .modal-content > .content {
    padding: 0 !important;
  }
}
/*!**************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-email-campaign-audience-item/grid-email-campaign-audience-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.ECjJlmr9MgxDCkOaelCW {
  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 */
.gvz3LtcRWReEXeO_TIW2 {
  height: 185px;
  list-style-type: none;
}

.audience-grid-item-large .popup-toggle-button {
  display: none;
}
.audience-grid-item-large:hover .popup-toggle-button, .audience-grid-item-large:focus .popup-toggle-button, .audience-grid-item-large:focus-within .popup-toggle-button {
  display: flex;
}
.audience-grid-item-large .popup-toggle-button.-open {
  display: flex;
}
.audience-grid-item-large.-open .popup-toggle-button {
  display: flex;
}
.audience-grid-item-large .popup-toggle-button {
  display: none;
}
.touch .audience-grid-item-large .popup-toggle-button {
  display: flex;
}
/*!**********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/modal-deprecated/components/modal-content/modal-content.scss ***!
  \**********************************************************************************************************************************************************************/

/*!******************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/tooltip/tooltip.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 */
/* START : Responsive tooltips styles */
.tooltip {
  background-color: #2C2B44;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 12px;
  line-height: 1.3rem;
  padding: 8px;
  position: absolute;
  text-align: center;
  z-index: 9000;
  /* triangle decoration */
}
.tooltip.-has-vertical-offset {
  margin-bottom: 12px;
}
.tooltip > p {
  font-size: 12px;
  line-height: 1.3rem;
  margin-bottom: 6px;
}
.tooltip > p:last-child {
  margin-bottom: 0;
}
.tooltip a {
  white-space: nowrap;
}
.tooltip._rounded-arrow:after {
  background: #2C2B44;
  border: none;
  border-radius: 0 0 4px 0;
  bottom: -5px;
  height: 16px;
  transform: rotate(45deg);
  transition: left 0.3s ease-in-out;
  width: 16px;
}
.tooltip:after {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #2C2B44;
  bottom: -8px;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -8px;
  position: absolute;
  width: 0;
}
.tooltip.top.-has-vertical-offset {
  margin-top: 12px;
}
.tooltip.top:after {
  border-top-color: transparent;
  border-bottom: 8px solid #2C2B44;
  bottom: auto;
  top: -16px;
}
.tooltip.left:after {
  left: 10px;
  margin: 0;
}
.tooltip.right:after {
  left: auto;
  right: 10px;
  margin: 0;
}
.tooltip.-modern {
  background: #2C2B44;
  border-radius: 2px;
  padding: 8px;
}
.tooltip.-modern a {
  color: #FFFFFF;
  text-decoration: underline;
}
.tooltip.-modern:after {
  border-top-color: #2C2B44;
}
.tooltip.-darker {
  background-color: #2C2B44;
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
  font-weight: 300;
  left: 0;
  position: absolute;
}
.tooltip.-darker::after {
  border: 5px solid;
  border-color: #2C2B44 transparent transparent;
  content: "";
  left: 50%;
  margin-left: -5px;
  position: absolute;
  top: 100%;
}

.-error-tooltip {
  background-color: #B70A3E;
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 12px;
  line-height: 1.3rem;
  padding: 8px;
  position: absolute;
  text-align: center;
  z-index: 9000;
  /* triangle decoration */
}
.-error-tooltip.-has-vertical-offset {
  margin-bottom: 12px;
}
.-error-tooltip > p {
  font-size: 12px;
  line-height: 1.3rem;
  margin-bottom: 6px;
}
.-error-tooltip > p:last-child {
  margin-bottom: 0;
}
.-error-tooltip a {
  white-space: nowrap;
}
.-error-tooltip._rounded-arrow:after {
  background: #2C2B44;
  border: none;
  border-radius: 0 0 4px 0;
  bottom: -5px;
  height: 16px;
  transform: rotate(45deg);
  transition: left 0.3s ease-in-out;
  width: 16px;
}
.-error-tooltip:after {
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #B70A3E;
  bottom: -8px;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -8px;
  position: absolute;
  width: 0;
}
.-error-tooltip.top.-has-vertical-offset {
  margin-top: 12px;
}
.-error-tooltip.top:after {
  border-top-color: transparent;
  border-bottom: 8px solid #B70A3E;
  bottom: auto;
  top: -16px;
}
.-error-tooltip.left:after {
  left: 10px;
  margin: 0;
}
.-error-tooltip.right:after {
  left: auto;
  right: 10px;
  margin: 0;
}
.-error-tooltip.-modern {
  background: #B70A3E;
  border-radius: 2px;
  padding: 8px;
}
.-error-tooltip.-modern a {
  color: #FFFFFF;
  text-decoration: underline;
}
.-error-tooltip.-modern:after {
  border-top-color: #B70A3E;
}
.-error-tooltip.-darker {
  background-color: #B70A3E;
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
  font-weight: 300;
  left: 0;
  position: absolute;
}
.-error-tooltip.-darker::after {
  border: 5px solid;
  border-color: #B70A3E transparent transparent;
  content: "";
  left: 50%;
  margin-left: -5px;
  position: absolute;
  top: 100%;
}

.has-tooltip {
  cursor: help;
}

/* End : Responsive tooltips styles */
/*!********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/modal-deprecated/components/modal-footer/modal-footer.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 */
.footer-border-top {
  border-top: 1px solid #e5e5e5;
  height: 80px;
}
/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-email-signup-form-item/components/email-signup-form-grid-item-preview/email-signup-form-grid-item-preview.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.gbx2kEZMidAjrF_nHv3z {
  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 */
.UInn2llsz0lirQKnMnVA {
  border: 1px solid rgba(48, 47, 59, 0);
  min-height: 0;
  padding: 8px;
  position: relative;
  -webkit-transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
  transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
}
.UInn2llsz0lirQKnMnVA, .UInn2llsz0lirQKnMnVA .uEnG0fZdP4k4Rev3hpAq {
  border-radius: 4px;
  background-color: #FAFAFA;
}
.UInn2llsz0lirQKnMnVA:hover, .UInn2llsz0lirQKnMnVA:focus, .UInn2llsz0lirQKnMnVA:focus-within {
  border: 1px solid #E6E6EC;
  box-shadow: 0 2px 16px rgba(20, 19, 37, 0.15);
}
.UInn2llsz0lirQKnMnVA .uEnG0fZdP4k4Rev3hpAq {
  display: flex;
  height: 100%;
  overflow: hidden;
  padding: 0;
}
.UInn2llsz0lirQKnMnVA .NoHrwrZAmaxutJ9CooPZ {
  align-self: center;
  margin: auto;
}
.UInn2llsz0lirQKnMnVA .FE6EB753dMd_JgSCqDp1 {
  align-self: center;
  border-radius: 4px;
  display: block;
  height: auto;
  margin: auto;
  max-height: 100%;
  object-fit: contain;
  overflow: hidden;
  width: 100%;
}

.zEu8T6YSa0tf0W82SeAj {
  cursor: pointer !important;
}

.PMCn81F_8peJg2RU6Nb3 {
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  display: flex;
  height: 98%;
  justify-content: center;
  left: 50%;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 200ms ease-in-out;
  width: 100%;
  z-index: 10;
}
.PMCn81F_8peJg2RU6Nb3:hover, .PMCn81F_8peJg2RU6Nb3:focus, .PMCn81F_8peJg2RU6Nb3:focus-within {
  opacity: 1;
}

.wE3jjOsFnuQwvsC6YzfA {
  background-color: #FFFFFF;
  border: 1px solid #E6E6EC;
  box-shadow: 0 6px 16px 0 rgba(20, 19, 37, 0.1);
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 20;
  -webkit-transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
  transition: all 0.2s ease-in-out, width 0ms, margin 0ms;
}
.wE3jjOsFnuQwvsC6YzfA:hover, .wE3jjOsFnuQwvsC6YzfA:focus, .wE3jjOsFnuQwvsC6YzfA:focus-within {
  background-color: #F2F2F5;
}

.y8OlXbjLvLYW30CVDJBQ {
  position: absolute;
  right: 8px;
  top: -42px;
  width: max-content;
}
/*!****************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/modal-deprecated/components/modal-footer-primary-actions/modal-footer-primary-actions.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
 */
.footer .primary-actions .btn {
  margin-left: 4px;
  margin-right: 4px;
}
/*!****************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/toggle-switch-v2/toggle-switch.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.dijDD8HQiwbOu6qOByrB {
  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 */
.ai0O8N90L2VSWLPxEmD2 {
  height: 100%;
  width: 100%;
}

.xsy5GjxgkJKEG2d35TvJ {
  color: #403F5D;
}

.VvFCaVqTGDbA2jC7me0M > input[type=checkbox] {
  opacity: 0;
  position: absolute;
}

.VvFCaVqTGDbA2jC7me0M > input[type=checkbox] + .wUrWA0qb0VoDTRyo1eQC .rHslPFdJ0znWLXfc_34d {
  left: 2px;
}

.VvFCaVqTGDbA2jC7me0M.Le8RXJwIazw6gnm_tafN > input[type=checkbox]:checked + .wUrWA0qb0VoDTRyo1eQC .rHslPFdJ0znWLXfc_34d {
  left: calc(100% - 24px - 2px);
}

.VvFCaVqTGDbA2jC7me0M.s0ekEYhyqpYom597BxQx > input[type=checkbox]:checked + .wUrWA0qb0VoDTRyo1eQC .rHslPFdJ0znWLXfc_34d {
  left: calc(100% - 14px - 2px);
}

.VvFCaVqTGDbA2jC7me0M > input[type=checkbox]:disabled + .wUrWA0qb0VoDTRyo1eQC {
  background: #DCDCE1;
  cursor: not-allowed;
}

.VvFCaVqTGDbA2jC7me0M {
  border-radius: 1000px;
  cursor: pointer;
  float: left;
  height: 32px;
  overflow: hidden;
  position: relative;
  width: 57px;
}
.VvFCaVqTGDbA2jC7me0M.s0ekEYhyqpYom597BxQx {
  height: 20px;
  width: 33px;
}
.VvFCaVqTGDbA2jC7me0M.Le8RXJwIazw6gnm_tafN {
  height: 32px;
  width: 57px;
}

.isg7urQAo3EaZBIe3t0C {
  border: 1px solid #CBCBD0;
}

.BnyFe0pCKEHRXcOOrDBW {
  border: 1px solid #3FBCE7;
}
.BnyFe0pCKEHRXcOOrDBW:hover, .BnyFe0pCKEHRXcOOrDBW:focus, .BnyFe0pCKEHRXcOOrDBW:focus-within {
  border-color: #23A6D4;
}

.VvFCaVqTGDbA2jC7me0M > .wUrWA0qb0VoDTRyo1eQC {
  background: #F2F2F5;
  color: #FFFFFF;
  display: inline-block;
  height: 100%;
  position: relative;
  width: 100%;
}
.VvFCaVqTGDbA2jC7me0M > .wUrWA0qb0VoDTRyo1eQC.EDL_ag2LMhN8fpDjO8r7 {
  background: #3FBCE7;
}
.VvFCaVqTGDbA2jC7me0M > .wUrWA0qb0VoDTRyo1eQC:not(.EDL_ag2LMhN8fpDjO8r7):hover, .VvFCaVqTGDbA2jC7me0M > .wUrWA0qb0VoDTRyo1eQC:not(.EDL_ag2LMhN8fpDjO8r7):focus, .VvFCaVqTGDbA2jC7me0M > .wUrWA0qb0VoDTRyo1eQC:not(.EDL_ag2LMhN8fpDjO8r7):focus-within {
  background: #E6E6EC;
}
.VvFCaVqTGDbA2jC7me0M > .wUrWA0qb0VoDTRyo1eQC:hover, .VvFCaVqTGDbA2jC7me0M > .wUrWA0qb0VoDTRyo1eQC:focus, .VvFCaVqTGDbA2jC7me0M > .wUrWA0qb0VoDTRyo1eQC:focus-within {
  background: #23A6D4;
}

.VvFCaVqTGDbA2jC7me0M.s0ekEYhyqpYom597BxQx > .wUrWA0qb0VoDTRyo1eQC > .rHslPFdJ0znWLXfc_34d {
  height: 14px;
  width: 14px;
}

.VvFCaVqTGDbA2jC7me0M.Le8RXJwIazw6gnm_tafN > .wUrWA0qb0VoDTRyo1eQC > .rHslPFdJ0znWLXfc_34d {
  height: 24px;
  width: 24px;
}

.VvFCaVqTGDbA2jC7me0M > .wUrWA0qb0VoDTRyo1eQC > .rHslPFdJ0znWLXfc_34d {
  background: #FFFFFF;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
  display: inline-block;
  height: 24px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: left 50ms linear;
  width: 24px;
  z-index: 3;
}
.VvFCaVqTGDbA2jC7me0M > .wUrWA0qb0VoDTRyo1eQC > .rHslPFdJ0znWLXfc_34d.BiHsm8tn8pxhaUuwJYva {
  background: #F2F2F5;
  box-shadow: none;
}
.VvFCaVqTGDbA2jC7me0M > .wUrWA0qb0VoDTRyo1eQC > .rHslPFdJ0znWLXfc_34d.vRsibQV1009oR86QG2wU:hover, .VvFCaVqTGDbA2jC7me0M > .wUrWA0qb0VoDTRyo1eQC > .rHslPFdJ0znWLXfc_34d.vRsibQV1009oR86QG2wU:focus, .VvFCaVqTGDbA2jC7me0M > .wUrWA0qb0VoDTRyo1eQC > .rHslPFdJ0znWLXfc_34d.vRsibQV1009oR86QG2wU:focus-within {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
}
/*!********************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/modal-deprecated/components/modal-footer-secondary-actions/modal-footer-secondary-actions.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
 */
.modal .footer .secondary-actions .btn:not(:first-child) {
  margin-left: 5px;
}

@media screen and (max-width: 800px) {
  .secondary-actions .btn.medium.-icon-left .btn-icon {
    margin: 0;
  }
  .primary-actions .btn .-short {
    display: block;
    height: 20px;
  }
}
/*!*****************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/popup-menu/components/popup-menu-toggle-item/popup-menu-toggle-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.Cl51kz5Mtw6SaSdslA7g {
  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 */
.ggXRo7kbXUkiYrBLdch2 .nULIZLj8eraG66wSH3HQ {
  color: #D69923;
}

.BuzXSRvGZHsLUQjNzHFr {
  margin: 0 12px;
}
/*!**************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/error-modal/error-modal.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 */
#error-modal {
  z-index: 5100;
}
#error-modal .modal-content {
  max-height: 520px;
  width: 540px;
}
#error-modal .footer .primary-actions {
  width: 100%;
}
#error-modal .footer .primary-actions .btn-primary {
  font-size: 18px;
  height: 44px;
  width: 100%;
}
#error-modal .footer .primary-actions .btn.close {
  width: 100%;
}
#error-modal .content {
  align-items: center;
  display: flex;
  flex-direction: column;
}
#error-modal .icon-wrapper {
  background: #FEF3F6;
  border-radius: 50%;
  margin-right: 0;
  margin-top: 10px;
  padding: 40px;
}
#error-modal .icon-wrapper .modal-icon {
  color: #D32559;
  font-size: 42px;
  margin: 0;
}
#error-modal .message {
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 300 !important;
  line-height: 150% !important;
  letter-spacing: normal !important;
  margin-top: 24px;
  text-align: center;
}
#error-modal strong {
  font-weight: bold;
}

@media screen and (max-width: 500px) {
  #error-modal .message {
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 150% !important;
    letter-spacing: normal !important;
    margin-left: 48px;
    margin-right: 48px;
  }
}
/*!*******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-email-signup-form-item/components/email-signup-form-grid-item-footer/email-signup-form-grid-item-footer.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.BVl1KAabXvk2NHYzaSLD {
  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 */
.dNVlVXpfcgnzlt0pXEvN {
  cursor: default;
  height: 32px;
}

.ke_OJMmmxNI1Hs7KyiYU {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#email-signup-form-container .floating-options-toggle {
  bottom: 4px;
  cursor: pointer;
  right: 4px;
}
/*!********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/modal-deprecated/components/modal-header/modal-header.scss ***!
  \********************************************************************************************************************************************************************/

/*!**************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-email-signup-form-item/grid-email-signup-form-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.DmCCxbJm3cg_4pcsyFWF {
  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 */
.RPxIV6yA9sHuqUWJ6Y7h {
  height: 185px;
  list-style-type: none;
  padding: 0;
  position: relative;
}

.signup-form-grid-item .popup-toggle-button {
  display: none;
}
.signup-form-grid-item:hover .popup-toggle-button, .signup-form-grid-item:focus .popup-toggle-button, .signup-form-grid-item:focus-within .popup-toggle-button {
  display: flex;
}
.signup-form-grid-item .popup-toggle-button.-open {
  display: flex;
}
.signup-form-grid-item.-open .popup-toggle-button {
  display: flex;
}
.signup-form-grid-item .popup-toggle-button {
  display: none;
}
.touch .signup-form-grid-item .popup-toggle-button {
  display: flex;
}
/*!************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/modal-deprecated/components/modal-header-actions/modal-header-actions.scss ***!
  \************************************************************************************************************************************************************************************/

/*!**************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/input-field/input-field.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 */
.input-field {
  align-items: center;
  border: 1px solid #E6E6EC;
  display: flex;
  flex: 1;
  height: 100%;
  justify-content: left;
  min-width: inherit;
  padding-bottom: 0;
  padding-top: 0;
}
.input-field.-darker-border {
  border-color: #CBCBD0;
}
.input-field.-error {
  border-color: #D32559;
}
.input-field.-error .input-field-txt::placeholder, .input-field.-error .input-field-txt {
  color: #B70A3E;
}
.input-field.no-border {
  border: none;
}
.input-field._hidden {
  border: none !important;
  margin: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
}
.input-field._hidden .clear-btn {
  display: none;
}
.input-field:not(.-error):not(.-disabled):hover {
  border-color: #DCDCE1;
}
.input-field:not(.-error):focus-within {
  border-color: #CBCBD0;
}
.input-field .input-field-txt {
  border: none !important;
  border-radius: inherit;
  flex: 1;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  height: 100%;
  line-height: inherit;
  letter-spacing: inherit;
  max-width: 100%;
  min-width: inherit;
  padding: 0 24px 0 8px;
  text-overflow: ellipsis;
  width: 100%;
}
.input-field .input-field-txt:focus, .input-field .input-field-txt:focus-within {
  border: 0;
  outline: none;
}
.input-field .input-field-txt:-webkit-autofill {
  background: inherit;
}
.input-field .input-field-txt::-ms-reveal {
  display: none;
}
.input-field .input-field-txt.expandable-input {
  padding: 0 12px 0 8px;
}
.input-field .clear-btn {
  cursor: pointer;
  background: none;
  color: #A1A1AA;
  cursor: pointer;
  font-size: 20px;
  height: fit-content;
  margin-left: -28px;
  padding: 4px;
}
.input-field .clear-btn:hover, .input-field .clear-btn:focus, .input-field .clear-btn:active {
  color: #757589;
}

@media screen and (max-width: 280px) {
  .input-field .clear-btn {
    display: none;
  }
}
/*!********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-skeleton-item/grid-skeleton-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.jeIBopQffceE8G1XF1uU {
  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 */
.ULUKJjA5XQdV5LMV40A0 {
  background: #FAFAFA;
  animation: Bc53CKFhiyX7aqeTXplm ease-in-out;
  animation-duration: 1.3s;
  animation-iteration-count: infinite;
}

@keyframes Bc53CKFhiyX7aqeTXplm {
  0% {
    background-color: #F2F2F5;
  }
  15% {
    background-color: #F2F2F5;
  }
  62% {
    background-color: #FAFAFA;
  }
  100% {
    background-color: #F2F2F5;
  }
}
/*!*********************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/input-field/input-field.module.scss ***!
  \*********************************************************************************************************************************************/
.kyCwKlwOazTQCojVIA_U {
  align-items: center;
  display: flex;
  flex-grow: 1;
  height: 100%;
}

.d0Dvd1ECpbcsFLLZvHHj {
  border-radius: unset;
}
/*!**********************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/modal-deprecated/components/modal-header-close-button/modal-header-close-button.scss ***!
  \**********************************************************************************************************************************************************************************************/

/*!******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-pmwstockmedia-item/grid-pmwstockmedia-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.M4eJO1UFyRQHd6Q3CeeA {
  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 */
.CXREd5oSyIwI07wNyS_q {
  margin: 0 8px;
  flex-grow: 1;
  width: calc(100% - 16px);
}

.jneEwBbS2PjWQjrrCuac {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.vWRbJMN1QK3ol9QG3hgF {
  background-color: #FFFFFF;
}

.arnGt__ldO2TQ0MtKmAk {
  resize: none;
  border: none;
  background-color: transparent;
}

.Qm2VRjC2t4gCtl3Yv_HY {
  width: 100%;
  height: 100%;
  font-size: 40px;
}

.fK239SErrKeJe85EgOEN {
  background-color: #FFFFFF;
  border: 2px solid #3FBCE7;
  border-radius: 6px;
}

.Dc1eVuZsoIWOkoUhEeoc {
  background-color: rgba(124, 17, 17, 0.97);
  pointer-events: none;
  border-radius: 6px;
}

.Dc1eVuZsoIWOkoUhEeoc * {
  background-color: transparent;
  pointer-events: none;
}

.EZtOHwGLsQmkyAdgnBF5 {
  background-color: transparent;
}

.GkH9JkH6vy2Jk0LNU8i7 {
  background-color: transparent;
}

.hbeQeGuCO6V607punWVG {
  max-width: 85px;
  max-height: 85px;
}

.tDTwl772gv5K_VBI5OF0 {
  max-width: 50px;
  max-height: 50px;
}

.ih6VQHb97jKNSUpCLLZe {
  width: 90px;
  height: 90px;
  background-color: #F2F2F5;
}

.QrQ8TT9GFlWFnZjZ8KdN {
  width: 50px;
  height: 50px;
}

.eRZqnqVPpXVxpirVif5m {
  width: 80px;
  text-align: center;
  margin-right: 5px;
  margin-left: auto;
  font-style: italic;
}

.NcxeHTVl0YsgZnkAzj_K {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  height: 100%;
  padding: 8px 0;
}
/*!**********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/modal-deprecated/components/modal-header-action/modal-header-action.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 */
.modal-content .modal-header-actions {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
}
.modal-content .modal-header-actions:not(.-multiple-actions) .modal-header-action.close:before {
  display: none;
}
.modal-content .modal-header-actions.-multiple-actions .modal-header-action.close {
  margin-left: 9px;
  position: relative;
}
.modal-content .modal-header-actions.-multiple-actions .modal-header-action.close:before {
  align-self: center;
  border-left: 1px solid #DCDCE1;
  content: "";
  display: inline-block;
  height: 40px;
  left: -11px;
  margin-left: 5px;
  position: absolute;
  width: 1px;
}
.modal-content .modal-header-actions.actions-responsive {
  display: none;
}
.modal-content .modal-header-actions.actions-responsive:not(.-open) .responsive-settings-container {
  display: none;
}
.modal-content .modal-header-actions.actions-responsive.-open {
  position: relative;
}
.modal-content .modal-header-actions.actions-responsive.-open > .modal-header-action {
  background: #F2F2F5;
}
.modal-content .modal-header-actions.actions-responsive.-open .action-label {
  white-space: nowrap;
}
.modal-content .modal-header-actions.actions-responsive.-open .responsive-settings-container {
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: 42px;
  z-index: 1000001;
}
.modal-content .modal-header-actions.actions-responsive.-open .responsive-settings-container .modal-header-action {
  display: flex;
  margin: 0;
}
.modal-content .modal-header-action {
  align-items: center;
  background: none;
  border-radius: 2px;
  color: #757589;
  cursor: pointer;
  display: flex;
  font-family: "Nunito Sans", Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-transition: color 200ms ease-in-out, background 200ms ease-in-out;
  transition: color 200ms ease-in-out, background 200ms ease-in-out;
  margin: 0 2px;
  padding: 12px;
}
.modal-content .modal-header-action.hidden {
  display: none;
}
.modal-content .modal-header-action.-has-icon {
  margin-left: 2px;
}
.modal-content .modal-header-action:hover, .modal-content .modal-header-action:focus {
  background: #F2F2F5;
  color: #757589;
}
.modal-content .modal-header-action .action-icon {
  color: #403F5D;
  font-size: 22px;
  line-height: 22px;
  margin: 0;
  min-width: 22px;
}
.modal-content .modal-header-action, .modal-content .modal-header-action .action-label {
  color: #757589;
  font-size: 12px;
  line-height: 22px;
}
.modal-content .modal-header-action .action-label {
  margin: 0 0 0 8px;
}
.modal-content > .header.-flex .modal-header-actions {
  flex-direction: row;
}
.modal-content > .header .close {
  display: flex;
}
.modal-content > .header .close .icon {
  border-radius: 2px;
  color: #403F5D;
  font-size: 24px;
  line-height: 24px;
  margin: 0;
  min-width: 0;
  -webkit-transition: color 200ms ease-in-out, background 200ms ease-in-out;
  transition: color 200ms ease-in-out, background 200ms ease-in-out;
  text-decoration: none;
}
.modal-content > .header .close:hover .icon, .modal-content > .header .close:focus .icon {
  background: #F2F2F5;
  color: #2C2B44;
}

@media screen and (max-width: 768px) {
  .modal:not(.-flex) .modal-content .modal-header-actions:not(.actions-responsive).-multiple-actions .modal-header-action:not(.close) {
    display: none;
  }
  .modal:not(.-flex) .modal-content .modal-header-actions.actions-responsive {
    display: block;
  }
  .modal:not(.-flex) .modal-content > .header:not(.-flex) .top-actions-bar {
    display: flex;
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 550px) {
  .modal .modal-content .modal-header-action {
    margin: 0;
    padding: 10px;
  }
  .modal .modal-content .modal-header-actions:not(.actions-responsive) .action-label {
    display: none;
  }
  .modal .modal-content .modal-header-actions:not(.actions-responsive) .close .icon {
    font-size: 20px;
    line-height: 20px;
  }
}
/*!************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/base-grid/components/grid-icon-item/grid-icon-item.module.scss ***!
  \************************************************************************************************************************************************************************/
.TC8OEo_sqpxAlkhTpnYE {
  object-fit: contain;
}
/*!****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/modal-deprecated/components/modal-tabs/modal-tabs.scss ***!
  \****************************************************************************************************************************************************************/

/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/replace-media-controls/components/replace-media-control-item/replace-media-control-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.rR9sQwub1PIC92PAs6OL {
  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 */
.yCVuWUwRnhfWgdJGDVSe {
  background: #FFFFFF;
  cursor: pointer;
  height: 100%;
  justify-content: center;
  margin: 0 0 8px 0;
  padding: 0;
  width: 100%;
}
.yCVuWUwRnhfWgdJGDVSe:last-child {
  margin-bottom: 0px;
}
.yCVuWUwRnhfWgdJGDVSe:hover, .yCVuWUwRnhfWgdJGDVSe:focus-within, .yCVuWUwRnhfWgdJGDVSe:focus {
  background: #F2F2F5;
}
.yCVuWUwRnhfWgdJGDVSe:active {
  background: #E6E6EC;
}
/*!*******************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/replace-media-controls/replace-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.xtkhofg6ZKLc0HWsC7Sm {
  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 */
.wBoGY5xuIu_fBkbMRNts {
  background: #FAFAFA;
  height: 100%;
  padding: 8px;
  width: 100%;
}

.fXoNEHzlLSGIgfH47Ad2 {
  margin-left: 6px;
}

.ioGwaI6MjoviWCvMoee2 {
  margin: 0;
  height: calc(100% - 40px);
  padding: 9px 8px 8px 8px;
  width: 100%;
}
/*!*************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/social-media/components/social-post-dialog-metrics-grid/social-post-dialog-metrics-grid.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.M0uhdKmWz6uAGNLXyy6C {
  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 */
.aJHDgMotWucSM21y22PJ {
  display: flex;
  flex-direction: column;
}

.fi7pkKjI2Z3YF27svYO0 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.xxi0FUvxp3p_Subom60v {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 24px;
}

.cXNCMTyW_VTKRXLcOhB2 {
  align-items: center;
  display: flex;
  flex-direction: row;
  min-width: 150px;
}

.yxW_tMZmfvwhblYyRxcK {
  display: flex;
  flex-direction: column;
  margin-left: 8px;
  max-width: 100px;
}

.XuQiJ8TyDKITeXJkZoz9 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  overflow-wrap: break-word;
}

.s872YhuqU9yytBUal9GK {
  overflow-y: auto;
  text-align: center;
  width: 100%;
}

.ww8V8Nkp_66KxEKEM4Mg {
  background-color: #F4F1FD !important;
}

.P90Ay5YUlLf85dH5bujX {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.u6C35SCIohcfRFRNpEyt {
  display: flex;
  width: 100%;
}

.y6HRfpf0kxBFxn88w4ZM {
  background-color: #F2F2F5;
  border-radius: 1000px;
  height: 48px;
  margin-bottom: 12px;
  align-items: center;
  display: flex;
  justify-content: center;
  width: 48px;
}

.mmBReUlOWJrrvKcMsyl3 {
  display: flex;
  width: fit-content;
}

.hfnu4NTtni3I9KNTQx2_ {
  gap: 4px;
  margin-top: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.ie4RojI6ZMZ1suT5u5Kw {
  color: #A1A1AA;
  cursor: not-allowed;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.PAxMMdz9bDZED7xJEwDj {
  cursor: pointer;
}
/*!*****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/panels/ai-image-tooltip-text/ai-image-tooltip-text.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 */
.ai-image-tooltip-text {
  color: #FFFFFF;
  text-decoration: underline;
}
.ai-image-tooltip-text:hover, .ai-image-tooltip-text:focus, .ai-image-tooltip-text:focus-within {
  color: #CDF0FB;
}
/*!**************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/panels/poster-add-items-panel/poster-add-items-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.ucqWDJ7IPNSNGWreF8kn {
  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 */
.JEfNDYrLy99MDDMSYCw_ {
  margin-bottom: 12px;
}
.JEfNDYrLy99MDDMSYCw_:last-child {
  margin-bottom: 0px;
}

.uV16_CWYqzoNdLkWBrBz {
  overflow: auto;
}

._DkPK11jnYp0vDMbriVN {
  height: 522px;
}

.TCYuR3Ande5p9Qun0__j {
  height: 352px;
}

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

.enGTEa32icIoyxh1DeMC {
  display: block;
}
/*!***********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/add-ai-item-button/add-ai-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.XjMjV4h97_buzfZ8yISn {
  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 */
.E1Fm57NSMSjSsezIoinZ {
  transition: height 0.3s ease-out, width 0.3s ease-out;
}

.yR443IbM8qnhBbQWcs7t {
  border: 1px solid #E6E6EC;
  border-radius: 8px;
  overflow: visible !important;
  width: 278px;
  height: 226px;
}

.tFvukjtH1xp0MXXmhqEw {
  height: 606px;
}

.UwkY5dQRxYJDHzCecmyQ {
  height: 470px;
}

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

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

.n1Xs3657WfE6EWIhm4Rh {
  border: 1px solid #E6E6EC;
  border-radius: 8px;
  overflow: visible !important;
  width: 394px;
  height: 346px;
}

.O2SGC6qhXcWHJDa9cYAV {
  height: 439px;
}

.Xt2YVu4gSLFBb_XTC8iW {
  height: 375px;
}
.Xt2YVu4gSLFBb_XTC8iW.QqHowIvv4ES5NEQdUALC {
  height: 457px;
}

.zoUUnnAfJWchwnhxurlg {
  height: 475px;
}
.zoUUnnAfJWchwnhxurlg.QqHowIvv4ES5NEQdUALC {
  height: 557px;
}

.ZM9v0QOpGhI8WcweyxAP {
  height: 508px;
}
.ZM9v0QOpGhI8WcweyxAP.QqHowIvv4ES5NEQdUALC {
  height: 600px;
}

.PSfh6pIi7a4qzJpoFi1k {
  height: 240px;
}

.GlkkiHPLkNALwcu4_eJj {
  height: 300px;
}

.piMumuN4_kcCJ31YjJhJ {
  height: 365px;
}

.Q7xqINc8Xn5tzAF9ItCu {
  height: 430px;
}

.c3oUSEylvrXtTAYFX5TE {
  height: 500px;
}

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

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

/*# sourceMappingURL=node_modules_moment_locale_sync_recursive_-src_components_app_index_ts.50f19e792cb38a344c5f.bundle.css.map*/