/* Generated by build_popicon_material_css.py */
/* Base Popicon CSS is included below, followed by appended Material subset aliases. */

/* Duration utility classes */
:root {
  --t-1: 0.1s;
  --t-2: 0.2s;
  --t-3: 0.3s;
  --t-4: 0.4s;
  --t-5: 0.5s;
  --t-6: 0.6s;
  --t-7: 0.7s;
  --t-8: 0.8s;
  --t-9: 0.9s;
  --t-10: 1s;
  --t-15: 1.5s;
  --t-20: 2s;
}

@font-face {
    font-family: "Pop Icon";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("popicon.woff2") format("woff2");
}

/* Duration classes */
.t-1 { --duration: var(--t-1); }
.t-2 { --duration: var(--t-2); }
.t-3 { --duration: var(--t-3); }
.t-4 { --duration: var(--t-4); }
.t-5 { --duration: var(--t-5); }
.t-6 { --duration: var(--t-6); }
.t-7 { --duration: var(--t-7); }
.t-8 { --duration: var(--t-8); }
.t-9 { --duration: var(--t-9); }
.t-10 { --duration: var(--t-10); }
.t-15 { --duration: var(--t-15); }
.t-20 { --duration: var(--t-20); }

.pi,
.pi::before,
[class^="pi-"]::before,
[class*=" pi-"]::before {
    font-family: "Pop Icon" !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1;
}

/* Basic shapes are drawn in CSS so they do not need font glyphs. */
.pi-hamburger,
.pi-list,
.pi-cross,
.pi-circle,
.pi-circlefull {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  flex: 0 0 1em;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
}
.pi-hamburger::before {
  content: "";
  position: absolute;
  left: .10em;
  top: .20em;
  width: .80em;
  height: .10em;
  border-radius: .06em;
  background: currentColor;
  box-shadow: 0 .30em 0 currentColor, 0 .60em 0 currentColor;
}
.pi-list::before {
  content: "";
  position: absolute;
  left: .30em;
  top: .20em;
  width: .60em;
  height: .10em;
  border-radius: .06em;
  background: currentColor;
  box-shadow: 0 .30em 0 currentColor, 0 .60em 0 currentColor;
}
.pi-list::after {
  content: "";
  position: absolute;
  left: .10em;
  top: .20em;
  width: .10em;
  height: .10em;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 .30em 0 currentColor, 0 .60em 0 currentColor;
}
.pi-cross::before,
.pi-cross::after {
  content: "";
  position: absolute;
  left: .08em;
  top: .45em;
  width: .84em;
  height: .10em;
  border-radius: .06em;
  background: currentColor;
}
.pi-cross::before { transform: rotate(45deg); }
.pi-cross::after { transform: rotate(-45deg); }
.pi-circle::before,
.pi-circlefull::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: .98em;
  height: .98em;
  border-radius: 50%;
}
.pi-circle::before { border: .10em solid currentColor; }
.pi-circlefull::before { background: currentColor; }
.pi-info,
.pi-alert {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: .98em;
  height: .98em;
  border: .10em solid currentColor;
  border-radius: 50%;
}
.pi-info::before,
.pi-alert::before {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: sans-serif !important;
  font-size: .70em;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  transform: translate(-50%, -50%);
}
.pi-info::before { content: "i"; font-weight: 600 !important;}
.pi-alert::before { content: "!"; font-weight: 600 !important; }
.pi-clock,
.pi-forbidden,
.pi-circlelock {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: .98em;
  height: .98em;
  border: .10em solid currentColor;
  border-radius: 50%;
}
.pi-clock::before {
  content: "";
  position: absolute;
  left: 50%;
  top: .1em;
  width: .08em;
  height: .33em;
  border-radius: .05em;
  background: currentColor;
  transform: translateX(-50%);
}
.pi-clock::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .24em;
  height: .08em;
  border-radius: .05em;
  background: currentColor;
  transform: translateY(-50%) rotate(30deg);
  transform-origin: left center;
}
.pi-forbidden { overflow: hidden; }
.pi-forbidden::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.35em;
  height: .10em;
  border-radius: .06em;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.pi-circlelock::before {
  content: "\e95a";
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: "Pop Icon" !important;
  font-size: .42em;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  transform: translate(-50%, -50%);
}
.pi-bad,
.pi-good {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: .98em;
  height: .98em;
  margin: 0;
  border: .10em solid currentColor;
  border-radius: 50%;
}
.pi-bad::before,
.pi-bad::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .6em;
  height: .09em;
  border-radius: .05em;
  background: currentColor;
}
.pi-bad::before { transform: translate(-50%, -50%) rotate(45deg); }
.pi-bad::after { transform: translate(-50%, -50%) rotate(-45deg); }
.pi-good::before {
  content: "\e931";
  position: absolute;
  left: 53%;
  top: 50%;
  font-family: "Pop Icon" !important;
  font-size: .6em;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  transform: translate(-50%, -50%);
}
.packageopen::before {
  content: "\e951";
}
.packageopen:hover::before {
  content: "\e94f";
}
.packageclose::before {
  content: "\e94f";
}
.packageclose:hover::before {
  content: "\e951";
}
.lockopen::before {
  content: "\e95b";
}
.lockopen:hover::before {
  content: "\e95a";
}
.lockclose::before {
  content: "\e95a";
}
.lockclose:hover::before {
  content: "\e95b";
}
.envelopeopen::before {
  content: "\e929";
}
.envelopeopen:hover::before {
  content: "\e921";
}
.envelopeclose::before {
  content: "\e921";
}
.envelopeclose:hover::before {
  content: "\e929";
}
.pi-local:before {
    content: "\e901"
}
.pi-filter:before {
    content: "\e902"
}
.pi-upwardsarrow:before {
    content: "\e906"
}
.pi-rightwardsarrow::before {
    content: "\e906";
    display: inline-block;
    transform: rotate(90deg);
    transform-origin: center;
}
.pi-downwardsarrow::before {
    content: "\e906";
    display: inline-block;
    transform: rotate(180deg);
    transform-origin: center;
}
.pi-leftwardsarrow::before {
    content: "\e906";
    display: inline-block;
    transform: rotate(-90deg);
    transform-origin: center;
}
.pi-hordots:before {
    content: "\e908"
}
.pi-verdots::before {
    content: "\e908";
    display: inline-block;
    transform: rotate(90deg);
    transform-origin: center;
}
.pi-code:before {
    content: "\e90a"
}
.pi-descorder:before {
    content: "\e90b"
}
.pi-ascorder::before {
    content: "\e90b";
    display: inline-block;
    transform: rotate(180deg);
}
.pi-heart:before {
    content: "\e91b"
}
.pi-star:before {
    content: "\e91c"
}
.pi-profile:before {
    content: "\e91d"
}
.pi-send:before {
    content: "\e920"
}
.pi-openenvelope:before {
    content: "\e921"
}
.pi-money:before {
    content: "\e922"
}
.pi-angryface:before {
    content: "\e923"
}
.pi-frowningface:before {
    content: "\e924"
}
.pi-grinningface:before {
    content: "\e925"
}
.pi-smilingface:before {
    content: "\e926"
}
.pi-smilingfacehearts:before {
    content: "\e927"
}
.pi-edit:before {
    content: "\e928"
}
.pi-envelope:before {
    content: "\e929"
}
.pi-neutralface:before {
    content: "\e92a"
}
.pi-flag:before {
    content: "\e92b"
}
.pi-graph:before {
    content: "\e92e"
}
.pi-home:before {
    content: "\e92f"
}
.pi-magnify:before {
    content: "\e930"
}
.pi-checkmark:before {
    content: "\e931"
}
.pi-speaker:before {
    content: "\e932"
}
.pi-floppydisk:before {
    content: "\e934"
}
.pi-share:before {
    content: "\e935"
}
.pi-settings:before {
    content: "\e936"
}
.pi-phone:before {
    content: "\e937"
}
.pi-thumbsup:before {
    content: "\e938"
}
.pi-bookmark:before {
    content: "\e939"
}
.pi-copy:before {
    content: "\e93a"
}
.pi-bell:before {
    content: "\e93c"
}
.pi-image:before {
    content: "\e93d"
}
.pi-contact:before {
    content: "\e93e"
}
.pi-globe:before {
    content: "\e93f"
}
.pi-calendar:before {
    content: "\e941"
}
.pi-camera:before {
    content: "\e942"
}
.pi-bin:before {
    content: "\e943"
}
.pi-clipboard:before {
    content: "\e944"
}
.pi-question,
.answerquestion {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: .98em;
  height: .98em;
  border: .10em solid currentColor;
  border-radius: 50%;
}
.pi-question::before,
.answerquestion::before {
  content: "?";
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: .70em;
  font-style: normal;
  font-weight: 700 !important;
  line-height: 1;
  transform: translate(-50%, -50%);
}
.answerquestion:hover::before {
  content: "i";
  font-size: .70em;
}
.pi-folder:before {
    content: "\e946"
}
.pi-hospital:before {
    content: "\e947"
}
.pi-quote:before {
    content: "\e948"
}
.pi-externallink:before {
    content: "\e949"
}
.pi-brush:before {
    content: "\e94a"
}
.pi-cloud:before {
    content: "\e94b"
}
.pi-certificate:before {
    content: "\e94c"
}
.pi-checkedcertificate {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
}
.pi-checkedcertificate::before {
  content: "\e94c";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.pi-checkedcertificate::after {
  content: "\e931";
  color: #fff !important;
  font-family: "Pop Icon" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  line-height: 1 !important;
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: .64em;
  transform: translate(-50%, -50%);
}
.pi-ribboncertificate:before {
    content: "\e94e"
}
.pi-openpackage:before {
    content: "\e94f"
}
.pi-deliverpackage {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
}
.pi-deliverpackage::before {
    content: "\e957"
}
.pi-deliverpackage::after {
  content: "\e951";
  font-family: "Pop Icon" !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-variant: normal !important;
  line-height: 1 !important;
  position: absolute;
  left: .15em;
  top: -.20em;
  font-size: .85em;
}
.pi-package:before {
    content: "\e951"
}
.pi-upcaret:before {
    content: "\e954"
}
.pi-rightcaret::before {
    content: "\e954";
    display: inline-block;
    transform: rotate(90deg);
    transform-origin: center;
}
.pi-downcaret::before {
    content: "\e954";
    display: inline-block;
    transform: rotate(180deg);
    transform-origin: center;
}
.pi-leftcaret::before {
    content: "\e954";
    display: inline-block;
    transform: rotate(-90deg);
    transform-origin: center;
}
.pi-servicehands:before {
    content: "\e957"
}
.pi-eye:before {
    content: "\e958"
}
.pi-horn:before {
    content: "\e959"
}
.pi-lock:before {
    content: "\e95a"
}
.pi-unlock:before {
    content: "\e95b"
}
.pi-trophy:before {
    content: "\e95c"
}
.pi-book:before {
    content: "\e95d"
}
.pi-map:before {
    content: "\e95e"
}
.pi-bubble:before {
    content: "\e95f"
}
.pi-download::before {
    content: "\e984";
    display: inline-block;
    transform: rotate(90deg);
}
.pi-login:before {
  content: "\e984"
}
.pi-gear:before {
    content: "\e961"
}
.pi-linkchain:before {
    content: "\e964"
}
.pi-moon:before {
    content: "\e966"
}
:root {
    --pi-shine-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='45' y='0' width='10' height='19' rx='5'/%3E%3Crect x='45' y='0' width='10' height='19' rx='5' transform='rotate(45 50 50)'/%3E%3Crect x='45' y='0' width='10' height='19' rx='5' transform='rotate(90 50 50)'/%3E%3Crect x='45' y='0' width='10' height='19' rx='5' transform='rotate(135 50 50)'/%3E%3Crect x='45' y='0' width='10' height='19' rx='5' transform='rotate(180 50 50)'/%3E%3Crect x='45' y='0' width='10' height='19' rx='5' transform='rotate(225 50 50)'/%3E%3Crect x='45' y='0' width='10' height='19' rx='5' transform='rotate(270 50 50)'/%3E%3Crect x='45' y='0' width='10' height='19' rx='5' transform='rotate(315 50 50)'/%3E%3C/svg%3E");
    --pi-shine-thin-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='47' y='0' width='6' height='19' rx='3'/%3E%3Crect x='47' y='0' width='6' height='19' rx='3' transform='rotate(45 50 50)'/%3E%3Crect x='47' y='0' width='6' height='19' rx='3' transform='rotate(90 50 50)'/%3E%3Crect x='47' y='0' width='6' height='19' rx='3' transform='rotate(135 50 50)'/%3E%3Crect x='47' y='0' width='6' height='19' rx='3' transform='rotate(180 50 50)'/%3E%3Crect x='47' y='0' width='6' height='19' rx='3' transform='rotate(225 50 50)'/%3E%3Crect x='47' y='0' width='6' height='19' rx='3' transform='rotate(270 50 50)'/%3E%3Crect x='47' y='0' width='6' height='19' rx='3' transform='rotate(315 50 50)'/%3E%3C/svg%3E");
    --pi-diamond-mask: url("data:image/svg+xml,%3Csvg fill='%23000' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m184.52 68-20-35c-5.3624-9.288-15.275-15.007-26-15h-77c-10.52 0-20.52 6-26 15l-20 35c-6.5 11-5 24.5 3 34.5l58.5 69c12 14 34 14 45.5 0l58.5-69c8.5-10 10-23.5 3.5-34.5zm-11.686 24.325-64.535 75.966c-4.4142 5.1218-12.691 5.1218-16.553 0l-64.579-75.966c-3.3106-3.4146-3.3106-9.1055-1.1035-13.089l22.071-39.836c1.9873-3.4163 5.5195-5.5592 9.3801-5.6909h84.973c3.8994-0.01101 7.4949 2.1703 9.3801 5.6909l22.071 39.836c2.4091 4.1515 1.9642 9.4288-1.1035 13.089z'/%3E%3C/svg%3E");
}
.pi-shine,
.pi-shine-thin,
.pi-sun,
.pi-star_shine,
.pi-diamond_shine {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  flex: 0 0 1em;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
}
.pi-shine {
    background: currentColor;
    -webkit-mask: var(--pi-shine-mask) center / contain no-repeat;
    mask: var(--pi-shine-mask) center / contain no-repeat;
}
.pi-shine-thin {
    background: currentColor;
    -webkit-mask: var(--pi-shine-thin-mask) center / contain no-repeat;
    mask: var(--pi-shine-thin-mask) center / contain no-repeat;
}
.pi-sun::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask: var(--pi-shine-mask) center / contain no-repeat;
    mask: var(--pi-shine-mask) center / contain no-repeat;
}
.pi-star_shine::before,
.pi-diamond_shine::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    -webkit-mask: var(--pi-shine-thin-mask) center / contain no-repeat;
    mask: var(--pi-shine-thin-mask) center / contain no-repeat;
}
.pi-shine-thin::before {
    -webkit-mask: var(--pi-shine-thin-mask) center / contain no-repeat;
    mask: var(--pi-shine-thin-mask) center / contain no-repeat;
}
.pi-sun::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: .50em;
    height: .50em;
    box-sizing: border-box;
    border: .10em solid currentColor;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.pi-star_shine::after {
    content: "\e91c";
    position: absolute;
    left: 0;
    top: 53%;
    width: 100%;
    font-family: "Pop Icon" !important;
    font-size: .45em;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    transform: translateY(-53%);
}
.pi-diamond_shine::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: .48em;
    height: .48em;
    background: currentColor;
    -webkit-mask: var(--pi-diamond-mask) center / contain no-repeat;
    mask: var(--pi-diamond-mask) center / contain no-repeat;
    transform: translate(-50%, -50%);
}
.pi-lightbulb:before {
    content: "\e968"
}
.pi-pin:before {
    content: "\e969"
}
.pi-openfolder:before {
    content: "\e96a"
}
.pi-packageclose:before {
    content: "\e94f"
}
.pi-packageopen:before {
    content: "\e951"
}
.pi-openbook:before {
    content: "\e96b"
}
.pi-wifi:before {
    content: "\e96c"
}
.pi-heartfull:before {
    content: "\e96f"
}
.pi-starfull:before {
    content: "\e970"
}
.pi-star::before,
.pi-starfull::before {
    display: inline-block;
    transform: translateY(-.03em);
}
.pi-starsfull:before {
    content: "\e971"
}
.pi-arrowbow:before {
    content: "\e972"
}
.pi-gift:before {
    content: "\e974"
}
.pi-smartphone:before {
    content: "\e975"
}
.pi-tablet:before {
    content: "\e976"
}
.pi-laptop:before {
    content: "\e977"
}
.pi-desktop:before {
    content: "\e978"
}
.pi-tag:before {
    content: "\e979"
}
.pi-cookie:before {
    content: "\e97a"
}
.pi-widget:before {
    content: "\e97b"
}
.pi-2people:before {
    content: "\e97c"
}
.pi-handshake:before {
    content: "\e97d"
}
.pi-online:before {
    content: "\e97e"
}
.pi-connected:before {
    content: "\e97f"
}
.pi-class:before {
    content: "\e980"
}
.pi-profilecheck:before {
    content: "\e981"
}
.pi-professional:before {
    content: "\e982"
}
.pi-dashboard:before {
    content: "\e983"
}
.pi-document:before {
  content: "\e985"
}
.pi-documentlabel:before {
  content: "\e986"
}
.pi-woman:before {
  content: "\e987"
}
.pi-man:before {
  content: "\e988"
}
.pi-shield:before {
  content: "\e98a"
}
.pi-sackcoins:before {
  content: "\e98b"
}
.pi-briefcase:before {
  content: "\e98c"
}
.pi-offices:before {
  content: "\e98d"
}
.pi-creditcard:before {
  content: "\e98e"
}
.pi-wallet:before {
  content: "\e98f"
}
.pi-recycle:before {
  content: "\e990"
}
.pi-upload:before {
  content: "\e991"
}
.pi-stack {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
}
.pi-stack-bg {
  font-size: 1em;
  position: absolute;
  left: 0;
  top: 0;
}
.pi-stack-fg {
  font-size: 0.52em;
  position: absolute;
  left: 25%;
  top: 28%;
}


.pi-rotleft {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.pi-rotright {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

/* Classes for relative inset of icons*/
.pi-1 {
    position: relative;
    left: -.6em;
    margin-right: -1em;
}
.pi-up {
    position: relative;
    inset-block: -.2em;
}
.pi-upper {
    position: relative;
    inset-block: -1em;
}
.pi-down {
    position: relative;
    inset-block: .6em;
}

/*Hover Animations*/
.hov-wiggle:hover {
  display: inline-block;
  animation: wiggle var(--duration) infinite;
}

.hov-bounce:hover {
  display: inline-block;
  animation: bounce var(--duration) infinite;
}

.hov-rotate:hover {
  display: inline-block;
  animation: rotate var(--duration) infinite linear;
}

.hov-heartbeat:hover  {
  animation: heartbeat var(--duration) infinite;
}

.hov-shine:hover.pi-shine,
.hov-shine:hover.pi-shine-thin,
.hov-shine:hover.pi-sun::before,
.hov-shine:hover.pi-star_shine::before,
.hov-shine:hover .pi-shine,
.hov-shine:hover .pi-shine-thin {
  animation: shine var(--duration, 2s) infinite ease-in-out;
}

.hov-goright:hover {
  animation: goright var(--duration) linear infinite;
}

.hov-goleft:hover {
  animation: goleft var(--duration) linear infinite;
}

.hov-godown:hover {
  animation: godown var(--duration) linear infinite;
}

.hov-goup:hover {
  animation: goup var(--duration) linear infinite;
}

@keyframes wiggle {
  0%, 100% {
    transform: rotate(0deg);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: rotate(30deg);
  }
  20%, 40%, 60%, 80% {
    transform: rotate(-30deg);
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

@keyframes shine {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@keyframes goright {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(100% + 1rem));
  }
  50.01% {
    transform: translateX(calc(-100% - 1rem));
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes goleft {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(calc(-100% - 1rem));
  }
  50.01% {
    transform: translateX(calc(100% + 1rem));
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes godown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(100% + 1rem));
  }
  50.01% {
    transform: translateY(calc(-100% - 1rem));
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes goup {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(calc(-100% - 1rem));
  }
  50.01% {
    transform: translateY(calc(100% + 1rem));
  }
  100% {
    transform: translateY(0);
  }
}

/*Replace icon animations*/
/*Usage for example:
   <div class="hov-replace-pi">
    <i class="back-icon pi pi-circle"></i>
    <i class="front-icon pi pi-good slide-to-right t-3" style="color: #28a745;"></i>
  </div>*/
.hov-replace-pi {
  position: relative;
  display: inline-block;
}

.back-icon {
  color: #000;
}

.front-icon {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  pointer-events: none;
}

.hov-replace-pi:hover .front-icon {
  opacity: 1;
}

.hov-replace-pi:hover .front-icon.slide-to-right {
  animation: slideToRight var(--duration) forwards;
}

.hov-replace-pi:hover .front-icon.slide-to-left {
  animation: slideToLeft var(--duration) forwards;
}

.hov-replace-pi:hover .front-icon.slide-up {
  animation: slideUp var(--duration) forwards;
}

.hov-replace-pi:hover .front-icon.slide-down {
  animation: slideDown var(--duration) forwards;
}

.hov-replace-pi:hover .front-icon.radial-out {
  animation: radialOut var(--duration) forwards;
}

.hov-replace-pi:hover .front-icon.radial-in {
  animation: radialIn var(--duration) forwards;
}

@keyframes slideToRight {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes slideToLeft {
  0% {
    clip-path: inset(0 0 0 100%);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes slideUp {
  0% {
    clip-path: inset(100% 0 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes slideDown {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes radialOut {
  0% {
    clip-path: circle(0% at 50% 50%);
  }
  100% {
    clip-path: circle(61% at 50% 50%);
  }
}

@keyframes radialIn {
  0% {
    clip-path: circle(50% at 50% 50%);
  }
  100% {
    clip-path: circle(0% at 50% 50%);
  }
}

/* Material subset aliases appended to popicon.woff2. */
/* U+E99F uses globe_material because .pi-globe already maps to U+E93F. */
.pi-round_profile:before {
  content: "\e993"
}

.pi-wrench:before {
  content: "\e997"
}

.pi-cases:before {
  content: "\e998"
}

.pi-crown:before {
  content: "\e999"
}

.pi-drone:before {
  content: "\e99c"
}

.pi-eco:before {
  content: "\e99d"
}

.pi-fork_spoon:before {
  content: "\e99e"
}

.pi-library_add:before {
  content: "\e9a1"
}

.pi-slide_library:before {
  content: "\e93a";
  display: inline-block;
  transform: rotate(90deg);
}