.result {
    display: inline-block;
    margin-left: 10px;
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    font-size: 16px;
    transition: opacity 0.3s;
  }
  
  .result.correct {
    color: green;
    animation: tickmark-animation 0.5s;
  }
  
  .result.incorrect {
    color: red;
    animation: redcross-animation 0.5s;
  }
  
  @keyframes tickmark-animation {
    0% {
      opacity: 0;
      transform: scale(0.5);
    }
    50% {
      opacity: 1;
      transform: scale(1);
    }
    75% {
      opacity: 1;
      transform: scale(1.5);
    }
    100% {
      opacity: 1;
      transform: scale(2);
    }
  }
  
  @keyframes redcross-animation {
    0% {
      opacity: 0;
      transform: rotate(45deg) scale(0.5);
    }
    100% {
      opacity: 1;
      transform: rotate(45deg) scale(2);
    }
  }
  @media (max-width: 991px) {
    .col-12[style] {
      margin-left: 0 !important;
    }
  }