/*!********************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/dropdown/dropdown.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 */
.pmw-dropdown-v2 {
  display: flex;
  justify-content: center;
  align-content: center;
  position: relative;
}
.pmw-dropdown-v2.-right .dropdown-content {
  right: 0;
  left: unset;
}
.pmw-dropdown-v2 .dropdown-label {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 7px;
  max-height: 100%;
  width: 100%;
}
.pmw-dropdown-v2 .dropdown-label.header-label {
  cursor: pointer;
}
.pmw-dropdown-v2 .dropdown-label:hover, .pmw-dropdown-v2 .dropdown-label:focus, .pmw-dropdown-v2 .dropdown-label:focus-within {
  background-color: #F2F2F5;
  -webkit-transition: background 300ms;
  transition: background 300ms;
}
.pmw-dropdown-v2 .dropdown-label .label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pmw-dropdown-v2 .dropdown-label.-no-hover:hover, .pmw-dropdown-v2 .dropdown-label.-no-hover:focus, .pmw-dropdown-v2 .dropdown-label.-no-hover:focus-within {
  background: transparent;
}
.pmw-dropdown-v2 .dropdown-icon {
  font-size: 20px;
  align-self: center;
  margin-right: 0;
}
.pmw-dropdown-v2 .dropdown-content {
  background: #FFFFFF;
  border: 1px solid #E6E6EC;
  border-radius: 2px;
  box-shadow: 0px 4px 16px rgba(48, 47, 59, 0.12);
  left: 0;
  position: absolute;
  top: calc(100% + 8px);
  width: inherit;
  z-index: 10;
  margin: 0;
}
.pmw-dropdown-v2 .dropdown-content.-with-left-offset {
  left: 12px;
}
.pmw-dropdown-v2 .dropdown-content.-without-top-offset {
  top: 100%;
}
.pmw-dropdown-v2 .dropdown-content.-width-uncapped {
  width: unset;
}
.pmw-dropdown-v2 .-show-more-enabled {
  width: 100%;
  overflow: hidden;
}
.pmw-dropdown-v2 .-large-dropdown-item {
  min-height: 48px;
  justify-content: center;
  display: flex;
  border-radius: 4px;
}
.pmw-dropdown-v2 .dropdown-item {
  color: #403F5D;
  margin: 8px;
  padding: 12px 16px 12px 12px;
  white-space: nowrap;
}
.pmw-dropdown-v2 .dropdown-item.selected {
  background: #ECF8FD;
  color: #23A6D4;
  cursor: default;
  pointer-events: none;
}
.pmw-dropdown-v2 .dropdown-item.-default.selected {
  background-color: #F2F2F5;
  color: #403F5D;
}
.pmw-dropdown-v2 .dropdown-item.-disabled {
  color: #CBCBD0;
  cursor: not-allowed;
}
.pmw-dropdown-v2 .dropdown-item.-has-link {
  padding: 0;
}
.pmw-dropdown-v2 .dropdown-item.selected:hover {
  background: #ECF8FD;
  color: #23A6D4;
  cursor: default;
}
.pmw-dropdown-v2 .dropdown-item:not(.selected) {
  cursor: pointer;
}
.pmw-dropdown-v2 .dropdown-item:not(.selected):hover, .pmw-dropdown-v2 .dropdown-item:not(.selected):focus, .pmw-dropdown-v2 .dropdown-item:not(.selected):focus-within {
  background-color: #F2F2F5;
  -webkit-transition: background 300ms;
  transition: background 300ms;
}
.pmw-dropdown-v2 .dropdown-item .dropdown-anchor {
  color: inherit;
  display: flex;
  padding: 12px 16px 12px 12px;
}
.pmw-dropdown-v2 .btn-show-more-button {
  z-index: 10;
  position: absolute;
  bottom: 12px;
  left: calc(50% - 76px);
  box-shadow: 0px 0px 12px 0px rgba(20, 19, 37, 0.1019607843);
}
.pmw-dropdown-v2 .label-prefix {
  padding-right: 6px;
}
.pmw-dropdown-v2.-using-portal .dropdown-content {
  letter-spacing: normal !important;
  overflow: auto;
  position: fixed;
  text-transform: none !important;
}
.pmw-dropdown-v2.-with-border {
  border: 1px solid #E6E6EC;
  border-radius: 2px;
}
.pmw-dropdown-v2.-with-dark-border {
  border: 1px solid #CBCBD0;
  border-radius: 4px;
}
.pmw-dropdown-v2.-comparison {
  border-color: #CABBF3;
}
.pmw-dropdown-v2.-main-campaign {
  border-color: #9FDDF3;
}
.pmw-dropdown-v2.-email-performance-campaign-name {
  color: #00688C;
}
.pmw-dropdown-v2.-medium {
  min-width: 185px;
}
.pmw-dropdown-v2.-small {
  min-width: 80px;
  height: 36px;
}
.pmw-dropdown-v2.-highlight-primary .dropdown-item.selected {
  background: #ECF8FD;
  color: #00688C;
}
.pmw-dropdown-v2.-highlight-secondary .dropdown-item.selected {
  background: #F4F1FD;
  color: #4017AF;
}
.pmw-dropdown-v2 .item-switcher .pmw-dropdown-v2 .dropdown-wrapper {
  max-height: 215px;
}

.overlayWrapper {
  overflow: scroll;
  max-height: 500px;
}
.overlayWrapper::-webkit-scrollbar {
  display: none;
}
/*!**************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/dropdown/components/dropdown-item/dropdown-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 */
.dropdown-content .dropdown-item {
  color: #403F5D;
  margin: 8px;
  position: relative;
  white-space: nowrap;
}
.dropdown-content .dropdown-item.show-more {
  height: 40px;
  overflow: hidden;
}
.dropdown-content .dropdown-item.selected {
  background: #ECF8FD;
  color: #23A6D4;
}
.dropdown-content .dropdown-item.-has-link {
  padding: 0;
}
.dropdown-content .dropdown-item.-secondary.selected, .dropdown-content .dropdown-item.-secondary:hover {
  background: #F2F2F5;
}
.dropdown-content .dropdown-item .dropdown-anchor {
  color: inherit;
  display: flex;
  padding: 12px 16px 12px 12px;
}
.dropdown-content .dropdown-item .dropdown-notification {
  margin-left: 6px;
  margin-right: -4px;
  margin-top: 7px;
}
/*!**************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/popup-modal/popup-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;
}

/**
 * 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 */
.badge-label {
  background: #F2F2F5;
  border-radius: 4px;
  color: #403F5D;
  height: fit-content;
  margin-left: 8px;
  padding: 2px 6px;
  text-decoration: none;
  transition: color 200ms ease-in-out, background 200ms ease-in-out;
}
.badge-label.-round {
  border-radius: 1000px;
}
.badge-label.-large {
  padding: 8px 12px;
}
.badge-label.-success {
  background: #EBFBF7;
  color: #008565;
}
.badge-label.-primary-2 {
  background: #ECF8FD;
  color: #00688C;
}
.badge-label.-secondary {
  background: #9577E7;
  color: #FFFFFF;
}
.badge-label.-secondary-2 {
  background: #F4F1FD;
  color: #4017AF;
}
.badge-label.-default, .badge-label.-draft {
  background: #F2F2F5;
  color: #A1A1AA;
}
.badge-label.-error {
  background: #D32559;
  color: #FFFFFF;
}
.badge-label:is(a):hover, .badge-label:is(a):focus, .badge-label:is(a):focus-within {
  background: #E6E6EC;
  color: #403F5D;
}
.badge-label:is(a):hover.-secondary, .badge-label:is(a):focus.-secondary, .badge-label:is(a):focus-within.-secondary {
  background: #6D48D0;
  color: #FFFFFF;
}
.badge-label:is(a):hover.-primary-2, .badge-label:is(a):focus.-primary-2, .badge-label:is(a):focus-within.-primary-2 {
  background: #ECF8FD;
  color: #00688C;
}
.badge-label:is(a):hover.-primary, .badge-label:is(a):focus.-primary, .badge-label:is(a):focus-within.-primary {
  background: #23A6D4;
  color: #FFFFFF;
}
.badge-label:is(a):hover.-success, .badge-label:is(a):focus.-success, .badge-label:is(a):focus-within.-success {
  background: #19AD89;
  color: #FFFFFF;
}
.badge-label:is(a):hover.-default, .badge-label:is(a):hover.-draft, .badge-label:is(a):focus.-default, .badge-label:is(a):focus.-draft, .badge-label:is(a):focus-within.-default, .badge-label:is(a):focus-within.-draft {
  background: #DCDCE1;
  color: #403F5D;
}
.badge-label:is(a):hover.-error, .badge-label:is(a):focus.-error, .badge-label:is(a):focus-within.-error {
  background: #B70A3E;
  color: #FFFFFF;
}
.badge-label:is(a):active {
  background: #ECF8FD;
  color: #00688C;
}

.modal-popup, .modal-popup.popup {
  border: none;
  border-radius: 0;
  background: rgba(44, 43, 68, 0.7);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: fixed;
  width: 100%;
}
.modal-popup.open, .modal-popup.popup.open {
  left: 0;
}
.modal-popup.open .content > .menu:before, .modal-popup.popup.open .content > .menu:before {
  display: none;
}
.modal-popup.popup-250, .modal-popup.popup.popup-250 {
  max-width: 100%;
}
.modal-popup.-scroll .content, .modal-popup.popup.-scroll .content {
  height: calc(100% - 52px);
  overflow: auto;
}
.modal-popup.-scroll .popup-modal-content, .modal-popup.popup.-scroll .popup-modal-content {
  max-height: 100%;
}
.modal-popup .popup-modal-content, .modal-popup.popup .popup-modal-content {
  background: #FFFFFF;
  border-radius: 4px;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  width: 100%;
}
.modal-popup .popup-modal-content .content, .modal-popup.popup .popup-modal-content .content {
  background: #FFFFFF;
  height: calc(100% - 52px);
  overflow: auto;
  padding: 16px;
}
.modal-popup .popup-modal-content .content .popup-list-item:first-child, .modal-popup.popup .popup-modal-content .content .popup-list-item:first-child {
  margin-top: 0;
}
.modal-popup .popup-modal-header, .modal-popup.popup .popup-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 5px 5px 14px;
  border-bottom: 1px solid #E6E6EC;
}
.modal-popup .popup-modal-header .title, .modal-popup.popup .popup-modal-header .title {
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 150% !important;
  letter-spacing: normal !important;
}
.modal-popup .popup-modal-header .close-popup-modal, .modal-popup.popup .popup-modal-header .close-popup-modal {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 2px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.modal-popup .popup-modal-header .close-popup-modal:hover, .modal-popup .popup-modal-header .close-popup-modal:focus, .modal-popup .popup-modal-header .close-popup-modal:focus-within, .modal-popup.popup .popup-modal-header .close-popup-modal:hover, .modal-popup.popup .popup-modal-header .close-popup-modal:focus, .modal-popup.popup .popup-modal-header .close-popup-modal:focus-within {
  background: #F2F2F5;
}
.modal-popup .popup-modal-header .close-popup-modal:hover .icon, .modal-popup .popup-modal-header .close-popup-modal:focus .icon, .modal-popup .popup-modal-header .close-popup-modal:focus-within .icon, .modal-popup.popup .popup-modal-header .close-popup-modal:hover .icon, .modal-popup.popup .popup-modal-header .close-popup-modal:focus .icon, .modal-popup.popup .popup-modal-header .close-popup-modal:focus-within .icon {
  color: #B70A3E;
}
.modal-popup .popup-modal-header .close-popup-modal .icon, .modal-popup.popup .popup-modal-header .close-popup-modal .icon {
  font-size: 20px;
  line-height: 20px;
  margin: 0;
}
.modal-popup .popup-modal-header .close-popup-modal .icon.-square, .modal-popup .popup-modal-header .close-popup-modal .icon.-circle, .modal-popup.popup .popup-modal-header .close-popup-modal .icon.-square, .modal-popup.popup .popup-modal-header .close-popup-modal .icon.-circle {
  padding: 10px;
}
.modal-popup .popup-modal-header .close-popup-modal .icon.-square.-secondary, .modal-popup .popup-modal-header .close-popup-modal .icon.-square.-shadow, .modal-popup .popup-modal-header .close-popup-modal .icon.-square.-ghost-uncolored, .modal-popup .popup-modal-header .close-popup-modal .icon.-square.-dark-secondary, .modal-popup .popup-modal-header .close-popup-modal .icon.-circle.-secondary, .modal-popup .popup-modal-header .close-popup-modal .icon.-circle.-shadow, .modal-popup .popup-modal-header .close-popup-modal .icon.-circle.-ghost-uncolored, .modal-popup .popup-modal-header .close-popup-modal .icon.-circle.-dark-secondary, .modal-popup.popup .popup-modal-header .close-popup-modal .icon.-square.-secondary, .modal-popup.popup .popup-modal-header .close-popup-modal .icon.-square.-shadow, .modal-popup.popup .popup-modal-header .close-popup-modal .icon.-square.-ghost-uncolored, .modal-popup.popup .popup-modal-header .close-popup-modal .icon.-square.-dark-secondary, .modal-popup.popup .popup-modal-header .close-popup-modal .icon.-circle.-secondary, .modal-popup.popup .popup-modal-header .close-popup-modal .icon.-circle.-shadow, .modal-popup.popup .popup-modal-header .close-popup-modal .icon.-circle.-ghost-uncolored, .modal-popup.popup .popup-modal-header .close-popup-modal .icon.-circle.-dark-secondary {
  padding: calc(10px - 1px);
}

@media screen and (max-width: 768px) {
  .modal-popup.popup-250 ul.menu > li > a, .modal-popup.popup.popup-250 ul.menu > li > a {
    justify-content: center;
  }
  .modal-popup .popup-modal-content, .modal-popup.popup .popup-modal-content {
    border-radius: 12px;
    margin: auto 0 0 0;
  }
  .modal-popup.-modern .popup-modal-header, .modal-popup.popup.-modern .popup-modal-header {
    align-items: center;
    display: flex;
    flex-direction: row;
    border: none;
    justify-content: center;
    margin: 8px 8px 0 8px;
    padding: 0;
    position: relative;
  }
  .modal-popup.-modern .title, .modal-popup.popup.-modern .title {
    padding: 0;
    position: absolute;
  }
  .modal-popup.-modern .close-popup-modal, .modal-popup.popup.-modern .close-popup-modal {
    height: 40px;
    margin-left: auto;
    width: 40px;
  }
  .modal-popup.-modern .content, .modal-popup.popup.-modern .content {
    border-radius: unset;
    padding: 16px 0 0;
  }
  .modal-popup.-modern .popup-item-container, .modal-popup.popup.-modern .popup-item-container {
    margin: 0 0 16px;
  }
  .modal-popup.-modern .popup-list-item, .modal-popup.popup.-modern .popup-list-item {
    border: none;
    height: 48px;
    justify-content: flex-start;
    margin: 0 16px;
    padding: 0 12px;
  }
  .modal-popup.-modern .popup-text, .modal-popup.popup.-modern .popup-text {
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    line-height: 150% !important;
    letter-spacing: normal !important;
  }
  .modal-popup.-modern .icon, .modal-popup.popup.-modern .icon {
    font-size: 20px;
    line-height: 20px;
  }
  .modal-popup.-modern .icon.-square, .modal-popup.-modern .icon.-circle, .modal-popup.popup.-modern .icon.-square, .modal-popup.popup.-modern .icon.-circle {
    padding: 10px;
  }
  .modal-popup.-modern .icon.-square.-secondary, .modal-popup.-modern .icon.-square.-shadow, .modal-popup.-modern .icon.-square.-ghost-uncolored, .modal-popup.-modern .icon.-square.-dark-secondary, .modal-popup.-modern .icon.-circle.-secondary, .modal-popup.-modern .icon.-circle.-shadow, .modal-popup.-modern .icon.-circle.-ghost-uncolored, .modal-popup.-modern .icon.-circle.-dark-secondary, .modal-popup.popup.-modern .icon.-square.-secondary, .modal-popup.popup.-modern .icon.-square.-shadow, .modal-popup.popup.-modern .icon.-square.-ghost-uncolored, .modal-popup.popup.-modern .icon.-square.-dark-secondary, .modal-popup.popup.-modern .icon.-circle.-secondary, .modal-popup.popup.-modern .icon.-circle.-shadow, .modal-popup.popup.-modern .icon.-circle.-ghost-uncolored, .modal-popup.popup.-modern .icon.-circle.-dark-secondary {
    padding: calc(10px - 1px);
  }
  .modal-popup.-modern .list-item-divider, .modal-popup.popup.-modern .list-item-divider {
    margin: 0 16px 16px 16px;
  }
  .modal-popup.-modern .popup-modal-content, .modal-popup.popup.-modern .popup-modal-content {
    margin-bottom: 0;
  }
  .modal-popup.-modern .close-popup-modal, .modal-popup.popup.-modern .close-popup-modal {
    height: 40px;
    width: 40px;
  }
}

/*# sourceMappingURL=src_components_dropdown_index_js.43aaff98dd4fdfa150a9.bundle.css.map*/