#success_popup{
  background-color: white;
  border-radius: var(--m_gap);
  height:100px;
  position: relative;
  width: 100px;
  zoom: 3}
  #success_circle_svg{
    animation:rotate 2s linear forwards ;
    height:100px;
    position:relative;
    width:100px}
    @keyframes rotate{
      100%{transform:rotate(360deg)}
    }
    #success_circle_svg circle{
      animation: 
        dash 1.5s ease-in-out forwards,
        color 6s ease-in-out infinite;
      stroke:#007aff; 
      stroke-dasharray: 1,200;
      stroke-dashoffset: 0;
      stroke-linecap: round}
      @keyframes dash{
        0%{
          stroke-dasharray: 1,200;
          stroke-dashoffset: 0;
        }
        100%{
          stroke-dasharray: 150,200;
          stroke-dashoffset: 10;
        }
      }
      @keyframes color{
        100%, 0%{
          stroke: #f00;
        }
        40%{
          stroke: #007aff;
        }
        66%{
          stroke: #24555d;
        }
        80%, 90%{
          stroke: #789642;
        }
      }
  #success_tick_svg{
    height:40px;
    left:30px;
    position:absolute;
    stroke:#007aff;
    stroke-width:2;
    top:30px;
    width:40px}
  #success_tick_svg path{
    animation: 
      stroke 0.5s  cubic-bezier(0.65, 0, 0.45, 1) 1.5s forwards, 
      color 6s linear infinite;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-linecap: round;
    transform-origin: 50% 50%}
	    @keyframes stroke{
        100%{
          stroke-dashoffset: 0;
        }
      }
@media(max-width: 900px){
    #success_popup{
      zoom: 2}
}