/* Icons */  
.icon-checked, .icon-unchecked, .icon-blank, .icon-bomb, .icon-black {
    display: inline-block;
    vertical-align: middle;    
    width: 35px;
    height: 35px;
    position: relative;

    
}
      
/* Checkmark for icon-checked */
.icon-checked {
    background-color: var(--face-color);
  }
    
/* Outline box for icon-unchecked */
.icon-unchecked {
    background-color: #d1d1d1;
}
  
.icon-blank{
    background: #6d6b6b;
}
  
.icon-black{
  background: #000000 ;
}

/* Eyes for icon-checked */
.eye {
    position: absolute;
    top: 4px; /* Position the eyes vertically */
    width: 13px; /* Width of the eye */
    height: 13px; /* Height of the eye */
    border-radius: 100%; /* Make it a circle */
    background-color: var(--eyes-color); /* Color of the eye */
    border: solid 4px rgb(255, 255, 255);
}
  
.eye-blank {
    position: absolute;
    top: 6px; /* Position the cross vertically */
    width: 10px; /* Width and height of the cross (square) */
    height: 10px;
    background:
      /* Diagonal from top-left to bottom-right */
      linear-gradient(45deg, transparent 0%, transparent 40%, rgb(196, 196, 196) 40%, rgb(196, 196, 196) 60%, transparent 60%, transparent 100%),
      /* Diagonal from top-right to bottom-left */
      linear-gradient(-45deg, transparent 0%, transparent 40%, rgb(196, 196, 196) 40%, rgb(196, 196, 196) 60%, transparent 60%, transparent 100%);
  }
  
    
.eye-black {
  position: absolute;
  top: 4px; /* Position the eyes vertically */
  width: 13px; /* Width of the eye */
  height: 13px; /* Height of the eye */
  border-radius: 100%; /* Make it a circle */
  background-color: black; /* Color of the eye */
  border: solid 5px #FBD804;
}
  
  .left-eye {
    left: calc(6px + var(--eyes-position)); /* Position the left eye dynamically */
  }
  
  .right-eye {
    left: calc(19px + var(--eyes-position)); /* Position the right eye dynamically */
  }
  
  .left-eye-blank {
    left: 6px; /* Position the left eye dynamically */
  }
  
  .right-eye-blank {
    left: 20px; /* Position the left eye dynamically */
  }

  .left-eye-black {
    left: 4px; /* Position the left eye dynamically */
  }
  
  .right-eye-black {
    left: 18px; /* Position the left eye dynamically */
  }
  
  /* mouth for icon-checked */
  .mouth {
    position: absolute;
  }
    
  .mouth-shape-blank {
    top: 24px; /* Position the mouth below the eyes */
    left: 6px; /* Center horizontally */
    width: 26px; /* Width of the mouth */
    height: 20px; /* Height of the mouth (taller to allow for curvature) */
    border-radius: 0 0 50px 50px; /* Create a curved bottom for a sad mouth */
    border: 3px solid transparent; /* Only bottom border should be visible */
    border-bottom: 2px solid rgb(196, 196, 196); /* Set the color for the visible bottom border */
    transform: rotate(180deg); /* Flip the curve to make it a sad smile */
  }
      
  .mouth-shape-black {
    top: 18px; /* Position the mouth below the eyes */
    left: 9px; /* Center horizontally */
    width: 16px; /* Width of the mouth */
    height: 12px; /* Height of the mouth */
    border-radius: 50%; /* Shape of the mouth */
    border-bottom: 5px solid #FBD804;
  }

  .mouth-shape1{
    top: 18px; /* Position the mouth below the eyes */
    left: 9px; /* Center horizontally */
    width: 14px; /* Width of the mouth */
    height: 12px; /* Height of the mouth */
    border-radius: 50%; /* Shape of the mouth */
    border-bottom: 4px solid var(--mouth-color);
  }
  
  .mouth-shape2{
    top: 16px; /* Position the mouth below the eyes */
    left: 10px; /* Center horizontally */
    width: 20px; /* Width of the mouth */
    height: 14px; /* Height of the mouth */
    border-bottom: 4px solid var(--mouth-color);
    border-radius: 10% 0% 80% 40%; /* Shape of the mouth */
  }
  
  .mouth-shape3{
    top: 20px; /* Position the mouth below the eyes */
    left: 10px; /* Center horizontally */
    width: 18px; /* Width of the mouth */
    height: 10px; /* Height of the mouth */
    border-bottom: 4px solid var(--mouth-color);
    border-radius: 0% 0% 45% 90%; /* Shape of the mouth */
  }
    
  .mouth-shape4{
    top: 23px; /* Position the mouth below the eyes */
    left: 10px; /* Center horizontally */
    width: 14px; /* Width of the mouth */
    height: 4px; /* Height of the mouth */
    border-bottom: 4px solid var(--mouth-color);
    border-radius: 0% 0% 45% 60%; /* Shape of the mouth */
  }
  
  .mouth-shape5{
    top: 24px; /* Position the mouth below the eyes */
    left: 10px; /* Center horizontally */
    width: 18px; /* Width of the mouth */
    height: 6px; /* Height of the mouth */
    border-bottom: 4px solid var(--mouth-color);
    border-radius: 0% 0% 50% 55%; /* Shape of the mouth */
  }

  .bomb-main-circle {
    width: 80%;
    height: 80%;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    top: 50%;     /* Center vertically within the circle */
    left: 50%;    /* Center horizontally within the circle */
    transform: translate(-50%, -50%); /* Center the line horizontally */

}

  .bomb-inner-circle {
    width: 7px;    /* Diameter of the inner circle */
    height: 7px;   /* Diameter of the inner circle */
    background-color: white; /* Color of the inner circle */
    border-radius: 50%; /* Makes it a circle */
    position: absolute;
    top: 9px;       /* Positioning from the top */
    left: 9px;      /* Positioning from the left */
  }


  .bomb-line {
    position: absolute;
    background-color: rgb(0, 0, 0); /* Color of the lines */
  }

  .bomb-line-horizontal-1 {
    width: 36px; /* Width of the first horizontal line (slightly larger than the circle) */
    height: 5px;  /* Thickness of the line */
    top: 50%;     /* Center vertically within the circle */
    left: 50%;    /* Center horizontally within the circle */
    transform: translate(-50%, -50%) rotate(45deg); /* Center the line and rotate */
  }

  .bomb-line-horizontal-2 {
    width: 36px; /* Width of the second horizontal line (slightly larger than the circle) */
    height: 5px;  /* Thickness of the line */
    top: 50%;     /* Center vertically within the circle */
    left: 50%;    /* Center horizontally within the circle */
    transform: translate(-50%, -50%) rotate(-45deg); /* Center the line and rotate */
  }

  .bomb-line-horizontal-3 {
    width: 34px;  /* Width of the additional horizontal line (slightly larger than the circle) */
    height: 5px;  /* Thickness of the line */
    top: 50%;     /* Center vertically within the circle */
    left: 50%;    /* Center horizontally within the circle */
    transform: translate(-50%, -50%); /* Center the line horizontally */
  }

  .bomb-line-vertical {
    width: 5px;   /* Width of the vertical line */
    height: 34px; /* Height of the vertical line (slightly larger than the circle) */
    top: 50%;     /* Center vertically within the circle */
    left: 50%;    /* Center horizontally within the circle */
    transform: translate(-50%, -50%); /* Center the line horizontally */
  }