/*$lp: 'only screen and (min-width: 1200px) and (max-width: 1600px)';*/
/*$xxl: 'only screen and (min-width: 1400px)';
$xl: 'only screen and (min-width: 1200px) and (max-width: 1399px)';
$lg : 'only screen and (min-width: 992px) and (max-width: 1199px)';
$md: 'only screen and (min-width: 768px) and (max-width: 991px)';
$xm: '(max-width: 991px)';
$xs: '(max-width: 767px)';
$xss: '(max-width: 575px)';
$sm: 'only screen and (min-width: 576px) and (max-width: 767px)';*/
/* line 5, ../scss/smile-rating.scss */
.feedback {
  --normal: #ECEAF3;
  --normal-shadow: #D9D8E3;
  --normal-mouth: #9795A4;
  --normal-eye: #595861;
  --active: #F8DA69;
  --active-shadow: #F4B555;
  --active-mouth: #F05136;
  --active-eye: #313036;
  --active-tear: #76b5e7;
  --active-shadow-angry: #e94f1d;
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
  justify-content: flex-start;
  position: relative; }
  @media (max-width: 991.98px) {
    /* line 5, ../scss/smile-rating.scss */
    .feedback {
      justify-content: center;
      display: inline-flex; } }
  /* line 27, ../scss/smile-rating.scss */
  .feedback:before {
    content: '';
    position: absolute;
    left: 0px;
    top: 50%;
    height: 2px;
    background: #EAECEE;
    width: 100%; }
  /* line 37, ../scss/smile-rating.scss */
  .feedback.ie11 li {
    border-radius: 0px;
    background: transparent !important;
    box-shadow: none !important;
    transition: none !important; }
    /* line 42, ../scss/smile-rating.scss */
    .feedback.ie11 li.angry.active {
      animation: none; }
  /* line 47, ../scss/smile-rating.scss */
  .feedback li {
    position: relative;
    border-radius: 50%;
    background: var(--sb, var(--normal));
    box-shadow: inset 3px -3px 4px var(--sh, var(--normal-shadow));
    transition: background .4s, box-shadow .4s, transform .3s;
    -webkit-tap-highlight-color: transparent;
    transform: scale(1.2); }
    /* line 56, ../scss/smile-rating.scss */
    .feedback li strong {
      display: inline-block;
      width: 48px;
      height: 48px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center; }
    /* line 64, ../scss/smile-rating.scss */
    /* line 68, ../scss/smile-rating.scss */
    .feedback li.active {
      transform: scale(1.5); }
    /* line 71, ../scss/smile-rating.scss */
    .feedback li span {
      position: absolute;
      font-size: 12px;
      width: 50px;
      text-align: center;
      left: 50%;
      margin-left: -25px;
      bottom: -25px;
      color: rgba(69, 85, 96, 0.6); }
    /* line 81, ../scss/smile-rating.scss */
    .feedback li div {
      width: 40px;
      height: 40px;
      position: relative;
      transform: perspective(240px) translateZ(4px); }
      /* line 87, ../scss/smile-rating.scss */
      .feedback li div svg, .feedback li div:before, .feedback li div:after {
        display: block;
        position: absolute;
        left: var(--l, 9px);
        top: var(--t, 13px);
        width: var(--w, 8px);
        height: var(--h, 2px);
        transform: rotate(var(--r, 0deg)) scale(var(--sc, 1)) translateZ(0); }
      /* line 98, ../scss/smile-rating.scss */
      .feedback li div svg {
        fill: none;
        stroke: var(--s);
        stroke-width: 2px;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke .4s; }
        /* line 105, ../scss/smile-rating.scss */
        .feedback li div svg.eye {
          --s: var(--e, var(--normal-eye));
          --t: 17px;
          --w: 7px;
          --h: 4px; }
          /* line 110, ../scss/smile-rating.scss */
          .feedback li div svg.eye.right {
            --l: 23px; }
        /* line 114, ../scss/smile-rating.scss */
        .feedback li div svg.mouth {
          --s: var(--m, var(--normal-mouth));
          --l: 11px;
          --t: 23px;
          --w: 18px;
          --h: 7px; }
      /* line 122, ../scss/smile-rating.scss */
      .feedback li div:before, .feedback li div:after {
        content: '';
        z-index: var(--zi, 1);
        border-radius: var(--br, 1px);
        background: var(--b, var(--e, var(--normal-eye)));
        transition: background .4s; }
    /* line 131, ../scss/smile-rating.scss */
    .feedback li.angry {
      --step-1-rx: -24deg;
      --step-1-ry: 20deg;
      --step-2-rx: -24deg;
      --step-2-ry: -20deg;
      margin-left: 0; }
      /* line 137, ../scss/smile-rating.scss */
      .feedback li.angry strong {
        background-image: url("../images/smiley-for-ie/sad.png"); }
      /* line 141, ../scss/smile-rating.scss */
      .feedback li.angry div:before {
        --r: 20deg; }
      /* line 144, ../scss/smile-rating.scss */
      .feedback li.angry div:after {
        --l: 23px;
        --r: -20deg; }
      /* line 149, ../scss/smile-rating.scss */
      .feedback li.angry div svg.eye {
        stroke-dasharray: 4.55;
        stroke-dashoffset: 8.15; }
      /* line 155, ../scss/smile-rating.scss */
      .feedback li.angry.active {
        animation: angry 1s linear; }
        /* line 157, ../scss/smile-rating.scss */
        .feedback li.angry.active strong {
          background-image: url("../images/smiley-for-ie/sad-colored.png"); }
        /* line 161, ../scss/smile-rating.scss */
        .feedback li.angry.active div:before {
          --middle-y: -2px;
          --middle-r: 22deg;
          animation: toggle .8s linear forwards; }
        /* line 166, ../scss/smile-rating.scss */
        .feedback li.angry.active div:after {
          --middle-y: 1px;
          --middle-r: -18deg;
          animation: toggle .8s linear forwards; }
    /* line 174, ../scss/smile-rating.scss */
    .feedback li.sad {
      --step-1-rx: 20deg;
      --step-1-ry: -12deg;
      --step-2-rx: -18deg;
      --step-2-ry: 14deg; }
      /* line 180, ../scss/smile-rating.scss */
      .feedback li.sad div:before, .feedback li.sad div:after {
        --b: var(--active-tear);
        --sc: 0;
        --w: 5px;
        --h: 5px;
        --t: 15px;
        --br: 50%; }
      /* line 189, ../scss/smile-rating.scss */
      .feedback li.sad div:after {
        --l: 25px; }
      /* line 193, ../scss/smile-rating.scss */
      .feedback li.sad div svg.eye {
        --t: 16px; }
      /* line 196, ../scss/smile-rating.scss */
      .feedback li.sad div svg.mouth {
        --t: 24px;
        stroke-dasharray: 9.5;
        stroke-dashoffset: 33.25; }
      /* line 205, ../scss/smile-rating.scss */
      .feedback li.sad.active div:before, .feedback li.sad.active div:after {
        animation: tear .6s linear forwards; }
    /* line 212, ../scss/smile-rating.scss */
    .feedback li.ok {
      --step-1-rx: 4deg;
      --step-1-ry: -22deg;
      --step-1-rz: 6deg;
      --step-2-rx: 4deg;
      --step-2-ry: 22deg;
      --step-2-rz: -6deg; }
      /* line 219, ../scss/smile-rating.scss */
      .feedback li.ok strong {
        background-image: url("../images/smiley-for-ie/ok.png"); }
      /* line 223, ../scss/smile-rating.scss */
      .feedback li.ok div:before {
        --l: 12px;
        --t: 17px;
        --h: 4px;
        --w: 4px;
        --br: 50%;
        box-shadow: 12px 0 0 var(--e, var(--normal-eye)); }
      /* line 231, ../scss/smile-rating.scss */
      .feedback li.ok div:after {
        --l: 13px;
        --t: 26px;
        --w: 14px;
        --h: 2px;
        --br: 1px;
        --b: var(--m, var(--normal-mouth)); }
      /* line 241, ../scss/smile-rating.scss */
      .feedback li.ok.active strong {
        background-image: url("../images/smiley-for-ie/ok-colored.png"); }
      /* line 245, ../scss/smile-rating.scss */
      .feedback li.ok.active div:before {
        --middle-s-y: .35;
        animation: toggle .2s linear forwards; }
      /* line 249, ../scss/smile-rating.scss */
      .feedback li.ok.active div:after {
        --middle-s-x: .5;
        animation: toggle .7s linear forwards; }
    /* line 256, ../scss/smile-rating.scss */
    .feedback li.good {
      --step-1-rx: -14deg;
      --step-1-rz: 10deg;
      --step-2-rx: 10deg;
      --step-2-rz: -8deg; }
      /* line 262, ../scss/smile-rating.scss */
      .feedback li.good div:before {
        --b: var(--m, var(--normal-mouth));
        --w: 5px;
        --h: 5px;
        --br: 50%;
        --t: 22px;
        --zi: 0;
        opacity: .5;
        box-shadow: 16px 0 0 var(--b);
        filter: blur(2px); }
      /* line 273, ../scss/smile-rating.scss */
      .feedback li.good div:after {
        --sc: 0; }
      /* line 277, ../scss/smile-rating.scss */
      .feedback li.good div svg.eye {
        --t: 15px;
        --sc: -1;
        stroke-dasharray: 4.55;
        stroke-dashoffset: 8.15; }
      /* line 283, ../scss/smile-rating.scss */
      .feedback li.good div svg.mouth {
        --t: 22px;
        --sc: -1;
        stroke-dasharray: 13.3;
        stroke-dashoffset: 23.75; }
      /* line 295, ../scss/smile-rating.scss */
      .feedback li.good.active transform:scale(2)
      div svg.mouth {
        --middle-y: 1px;
        --middle-s: -1;
        animation: toggle .8s linear forwards; }
    /* line 304, ../scss/smile-rating.scss */
      /* line 307, ../scss/smile-rating.scss */
      .feedback li.happy strong {
        background-image: url("../images/smiley-for-ie/happy.png"); }
      /* line 310, ../scss/smile-rating.scss */
      .feedback li.happy div {
        --step-1-rx: 18deg;
        --step-1-ry: 24deg;
        --step-2-rx: 18deg;
        --step-2-ry: -24deg; }
        /* line 315, ../scss/smile-rating.scss */
        .feedback li.happy div:before {
          --sc: 0; }
        /* line 318, ../scss/smile-rating.scss */
        .feedback li.happy div:after {
          --b: var(--m, var(--normal-mouth));
          --l: 11px;
          --t: 23px;
          --w: 18px;
          --h: 8px;
          --br: 0 0 8px 8px; }
        /* line 327, ../scss/smile-rating.scss */
        .feedback li.happy div svg.eye {
          --t: 14px;
          --sc: -1; }
      /* line 334, ../scss/smile-rating.scss */
      .feedback li.happy.active strong {
        background-image: url("../images/smiley-for-ie/happy-colored.png"); }
      /* line 338, ../scss/smile-rating.scss */
      .feedback li.happy.active div:after {
        --middle-s-x: .95;
        --middle-s-y: .75;
        animation: toggle .8s linear forwards; }
    /* line 346, ../scss/smile-rating.scss */
    .feedback li:not(.active) {
      cursor: pointer; }
      /* line 348, ../scss/smile-rating.scss */
      .feedback li:not(.active):active {
        transform: scale(0.925); }
    /* line 352, ../scss/smile-rating.scss */
    .feedback li.active {
      --sb: var(--active);
      --sh: var(--active-shadow);
      --m: var(--active-mouth);
      --e: var(--active-eye); }
      /* line 357, ../scss/smile-rating.scss */
      .feedback li.active div {
        animation: shake .8s linear forwards; }

@keyframes shake {
  30% {
    transform: perspective(240px) rotateX(var(--step-1-rx, 0deg)) rotateY(var(--step-1-ry, 0deg)) rotateZ(var(--step-1-rz, 0deg)) translateZ(10px); }
  60% {
    transform: perspective(240px) rotateX(var(--step-2-rx, 0deg)) rotateY(var(--step-2-ry, 0deg)) rotateZ(var(--step-2-rz, 0deg)) translateZ(10px); }
  100% {
    transform: perspective(240px) translateZ(4px); } }
@keyframes tear {
  0% {
    opacity: 0;
    transform: translateY(-2px) scale(0) translateZ(0); }
  50% {
    transform: translateY(12px) scale(0.6, 1.2) translateZ(0); }
  20%,
    80% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translateY(24px) translateX(4px) rotateZ(-30deg) scale(0.7, 1.1) translateZ(0); } }
@keyframes toggle {
  50% {
    transform: translateY(var(--middle-y, 0)) scale(var(--middle-s-x, var(--middle-s, 1)), var(--middle-s-y, var(--middle-s, 1))) rotate(var(--middle-r, 0deg)); } }
@keyframes angry {
  40% {
    background: var(--active); }
  45% {
    box-shadow: inset 3px -3px 4px var(--active-shadow), inset 0 8px 10px var(--active-shadow-angry); } }