.tpl-avatar-generator:focus, .tpl-avatar-generator *:focus {
  outline: 0 none; }

.tpl-avatar-generator {
  position: relative;
  max-width: 30rem;
  margin-left: auto;
  margin-right: auto; }
  .tpl-avatar-generator .collection-item {
    position: relative;
    width: 20%;
    padding-top: 20%;
    border-radius: 100rem;
    border: 2px solid #d1d1d1;
    transition: border 0.5s;
    transform-origin: center center; }
    .tpl-avatar-generator .collection-item.is-selected {
      border: 2px solid #03347c; }
    .tpl-avatar-generator .collection-item * {
      pointer-events: none; }
  .tpl-avatar-generator .item-frame {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; }

.tpl-avatar-generator .tpl-skin-button {
  border: 0 none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  overflow: hidden; }

.tpl-avatar-generator .slider-wrapper {
  margin: 1.5% 0; }

.tpl-avatar-generator .randomizer-button {
  position: absolute;
  width: 46px;
  height: 46px;
  left: calc(50% + (260px / 2.5));
  top: calc(260px - 46px); }

@media screen and (min-width: 376px) {
  .tpl-avatar-generator .randomizer-button {
    width: 66px;
    height: 66px;
    left: calc(50% + (260px / 2));
    top: calc(260px - 72px); } }

.tpl-avatar-generator .collection-separator {
  display: block;
  width: 100%;
  height: 4px;
  overflow: hidden; }

.tpl-avatar-generator .selection-indicator {
  display: block;
  width: 21px;
  height: 21px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden; }

@media screen and (min-width: 376px) {
  .tpl-avatar-generator .selection-indicator {
    height: initial; } }

.tpl-avatar-generator .button-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 60px;
  overflow: hidden; }

@media screen and (min-width: 376px) {
  .tpl-avatar-generator .button-bar {
    max-height: initial; } }

.tpl-avatar-generator .profile-image-button {
  width: 212px;
  height: 45px; }

.tpl-avatar-generator .download-button {
  width: 70px;
  height: 70px;
  margin-left: 21px; }

.tpl-stack, .tpl-element-category-collection, .tpl-element-collection, .tpl-color-palette {
  margin-left: auto;
  margin-right: auto; }

.tpl-element-category-collection, .tpl-element-collection, .tpl-color-palette {
  margin: 0 9%;
  max-width: 480px; }
  .tpl-element-category-collection.slider-disabled, .tpl-element-collection.slider-disabled, .tpl-color-palette.slider-disabled {
    opacity: 0.4; }
    .tpl-element-category-collection.slider-disabled *, .tpl-element-collection.slider-disabled *, .tpl-color-palette.slider-disabled * {
      pointer-events: none; }

.tpl-stack {
  position: relative;
  width: 14.444rem;
  height: 14.444rem; }
  .tpl-stack-element {
    position: absolute;
    width: 100%;
    height: 100%; }

.tpl-category-state {
  display: block;
  padding: 1rem; }

.tpl-color .color-shape {
  border-radius: 100rem;
  margin: 4px; }

.flickity-prev-next-button {
  background: transparent;
  border-radius: 0;
  width: 12%;
  height: 100%; }
  .flickity-prev-next-button:hover {
    background: transparent; }

.flickity-button.previous {
  left: 0;
  margin-left: -12%; }

.flickity-button.next {
  right: 0;
  margin-right: -12%; }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.popup__popupHiddenBackground {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
  top: 0;
  left: 0;
  z-index: 20;
  position: fixed;
  animation: fadeIn 0.5s linear; }

.popup__popupHiddenBackground--hide {
  animation: fadeOut 0.5s linear; }

.popup__overlay {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  background-color: white;
  padding: 2rem 2rem 2rem 2rem;
  box-shadow: 0 0 19px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px; }

.popup__closeButton {
  position: absolute;
  right: 0.56rem;
  top: 0.56rem;
  width: 2.67rem;
  height: 2.67rem;
  padding: 0;
  border: 0 none;
  background: url("../imgs/icon_close.svg") no-repeat transparent;
  background-size: 100%; }

.popup__title {
  margin-top: 0;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: left;
  margin-right: 1.5rem;
  line-height: normal; }

.NotLoggedInPopup {
  width: 31.11rem;
  margin-top: 10%; }
  .NotLoggedInPopup__title-label {
    text-align: left;
    color: black;
    font-size: 1.125rem;
    margin-bottom: 0.39rem; }
  .NotLoggedInPopup__controls {
    text-align: left;
    margin-bottom: 1.8rem; }
    .NotLoggedInPopup__controls .button {
      border: 0 none;
      color: white;
      text-transform: uppercase;
      font-weight: 600;
      font-size: 1.125rem; }
      .NotLoggedInPopup__controls .button:last-child {
        margin-left: 2.2rem; }
      .NotLoggedInPopup__controls .button:first-child {
        margin-left: 1.1rem; }

.NotLoggedInPopup {
  width: 21.11rem;
  margin-top: 10%; }
  .NotLoggedInPopup__title-label {
    margin-bottom: 2rem; }