.coin-around-the-shield.coin-elem { 
  width: 15%;
  height: 15%;  
} 
 
.coin-around-the-shield:nth-child(1) {
   background-image: none;
   pointer-events: none; 
}
 
.coin-around-the-shield:nth-child(2) {
   background-image: none;
   pointer-events: none; 
}
 
.coin-around-the-shield:nth-child(3) {
   background-image: none;
   pointer-events: none; 
}
 
.coin-around-the-shield:nth-child(4) {
   background-image: none;
   pointer-events: none; 
}
 
.coin-around-the-shield:nth-child(5) {
   background-image: none;
   pointer-events: none; 
}
 
.coin-around-the-shield:nth-child(6) {
   background-image: none;
   pointer-events: none; 
}
 
.coin-around-the-shield:nth-child(7) {
   background-image: none;
   pointer-events: none; 
}
 
.coin-around-the-shield:nth-child(8) {
   background-image: none;
   pointer-events: none; 
}
 
.coin-around-the-shield:nth-child(9) {
   background-image: none;
   pointer-events: none; 
}
 
.coin-around-the-shield:nth-child(10) {
   background-image: none;
   pointer-events: none; 
}
 
.coin-around-the-shield:nth-child(11) {
   background-image: none;
   pointer-events: none; 
}
 
.coin-around-the-shield:nth-child(12) {
   background-image: none;
   pointer-events: none; 
}
 
.coin-around-the-shield:nth-child(13) {
   background-image: none;
   pointer-events: none; 
}
 
.coin-around-the-shield:nth-child(14) {
   background-image: url('../dataimg/iq_50dinars_rev.jpg');  
}
 
.coin-around-the-shield:nth-child(15) {
   background-image: url('../dataimg/iq_50dinars_rev.jpg');  
}
 
.coin-around-the-shield:nth-child(16) {
   background-image: url('../dataimg/iq_50dinars_rev.jpg');  
}
 
.coin-around-the-shield:nth-child(17) {
   background-image: url('../dataimg/iq_50dinars_rev.jpg');  
}
 
.coin-around-the-shield:nth-child(18) {
   background-image: url('../dataimg/iq_50dinars_rev.jpg');  
}
 
.coin-around-the-shield:nth-child(19) {
   background-image: url('../dataimg/iq_50dinars_rev.jpg');  
}
 
.coin-around-the-shield:nth-child(20) {
   background-image: url('../dataimg/iq_50dinars_rev.jpg');  
}
 
.coin-around-the-shield:nth-child(21) {
   background-image: url('../dataimg/iq_50dinars_rev.jpg');  
}
 
.coin-around-the-shield:nth-child(22) {
   background-image: url('../dataimg/iq_50dinars_rev.jpg');  
}
 
.coin-around-the-shield:nth-child(23) {
   background-image: url('../dataimg/iq_50dinars_rev.jpg');  
}
 
.coin-around-the-shield:nth-child(24) {
   background-image: url('../dataimg/iq_50dinars_rev.jpg');  
}
 
.coin-around-the-shield_1 {
  top: 50.4%;
  left: 50.0%;
}
 
.coin-around-the-shield_2 {
  top: 18.5%;
  left: 58.5%;
}
 
.coin-around-the-shield_3 {
  top: 27.0%;
  left: 73.3%;
}
 
.coin-around-the-shield_4 {
  top: 41.8%;
  left: 81.9%;
}
 
.coin-around-the-shield_5 {
  top: 58.9%;
  left: 81.9%;
}
 
.coin-around-the-shield_6 {
  top: 73.7%;
  left: 73.3%;
}
 
.coin-around-the-shield_7 {
  top: 82.2%;
  left: 58.5%;
}
 
.coin-around-the-shield_8 {
  top: 82.2%;
  left: 41.5%;
}
 
.coin-around-the-shield_9 {
  top: 73.7%;
  left: 26.7%;
}
 
.coin-around-the-shield_10 {
  top: 58.9%;
  left: 18.1%;
}
 
.coin-around-the-shield_11 {
  top: 41.8%;
  left: 18.1%;
}
 
.coin-around-the-shield_12 {
  top: 27.0%;
  left: 26.7%;
}
 
.coin-around-the-shield_13 {
  top: 18.5%;
  left: 41.5%;
}
 
.coin-around-the-shield_14 {
  top: 81.2%;
  left: 86.8%;
}
 
.coin-around-the-shield_15 {
  top: 91.9%;
  left: 74.0%;
}
 
.coin-around-the-shield_16 {
  top: 97.6%;
  left: 58.3%;
}
 
.coin-around-the-shield_17 {
  top: 97.6%;
  left: 41.7%;
}
 
.coin-around-the-shield_18 {
  top: 91.9%;
  left: 26.0%;
}
 
.coin-around-the-shield_19 {
  top: 81.2%;
  left: 13.2%;
}
 
.coin-around-the-shield_20 {
  top: 13.6%;
  left: 19.1%;
}
 
.coin-around-the-shield_21 {
  top: 5.3%;
  left: 33.6%;
}
 
.coin-around-the-shield_22 {
  top: 2.4%;
  left: 50.0%;
}
 
.coin-around-the-shield_23 {
  top: 5.3%;
  left: 66.4%;
}
 
.coin-around-the-shield_24 {
  top: 13.6%;
  left: 80.9%;
}
 
    .decoration-element-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.decoration-img {
    background-image: url(/coin-puzzles/images/shield-2.png);
    width: 42%;
    height: 42%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.decoration-circle {
  width: 11%;
  height: 11%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #30447d;
  background-color: #5b6faa;
  border: 1px solid #f2f2f26b;
  z-index: 1;
}

.decoration-circle.animate {
  animation: coinShake 350ms ease-in-out 0ms forwards;
}
.decoration-line {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  user-select: none;
  transition: all 150ms;
}

.decoration-dot{
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background-color: #f2f2f2;
   transform: translate(-50%, -50%);
}

.wrapper,
.wrapper * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.coin-elem[data-locked="true"] {
  pointer-events: none;
}
@keyframes coinShake {
  0% {
    transform: translate(-50%, -50%);
  }
  15% {
    transform: translate(-60%, -50%);
  }
  35% {
    transform: translate(-40%, -50%);
  }
  55% {
    transform: translate(-55%, -50%);
  }
  75% {
    transform: translate(-45%, -50%);
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

.decoration-line.highlight {
  background-image: url(../images/arc-with-tips-green.svg);
}

.decoration-line.highlight.incorrect {
  background-image: url(../images/arc-with-tips-red.svg);
}
.decoration-line.highlight.disable {
  background-image: none;
}

.decoration-line.one {
  transform: translate(-50%, -50%) rotate(0deg);
}

.decoration-line.two {
  transform: translate(-50%, -50%) rotate(30deg);
}

.decoration-line.three {
  transform: translate(-50%, -50%) rotate(60deg);
}

.decoration-line.four {
  transform: translate(-50%, -50%) rotate(90deg);
}

.decoration-line.five {
  transform: translate(-50%, -50%) rotate(120deg);
}

.decoration-line.six {
  transform: translate(-50%, -50%) rotate(150deg);
}

.decoration-line.seven {
  transform: translate(-50%, -50%) rotate(180deg);
}

.decoration-line.eight {
  transform: translate(-50%, -50%) rotate(210deg);
}

.decoration-line.nine {
  transform: translate(-50%, -50%) rotate(240deg);
}

.decoration-line.ten {
  transform: translate(-50%, -50%) rotate(270deg);
}

.decoration-line.eleven {
  transform: translate(-50%, -50%) rotate(300deg);
}

.decoration-line.twelve {
  transform: translate(-50%, -50%) rotate(330deg);
}

.preload-img{
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  user-select: none;
  opacity: 0;
}

.arrow-red{
  background-image: url(../images/arc-with-tips-red.svg);
}

.arrow-green{
  background-image: url(../images/arc-with-tips-green.svg);
}