input[type="radio"] {
        appearance: none;
      }

      input[type="radio"] {
        width: 20px;
        height: 20px;
        border-radius: 10px;
        margin-right:10px;
        border: 2px solid gray;
        /* Adjusts the position of the checkboxes on the text baseline */
        vertical-align: -4px;
        outline: none;
        
      }

      input[type="radio"]::before {
        display: block;
        content: " ";
        width: 10px;
        height: 10px;
        border-radius: 6px;
        background-color: blue;
        font-size: 1.2em;
        transform: translate(3px, 3px) scale(0);
        transform-origin: center;
        transition: all 0.1s ease-in;
      }

      input[type="radio"]:checked::before {
        transform: translate(3px, 3px) scale(1);
        transition: all 0.1s cubic-bezier(0.25, 0.25, 0.56, 2);
      }

  
      
      input[type="checkbox"] {
        position: relative;
        width: 1em;
        height: 1em;
        margin-right: 10px;
        vertical-align: -4px;
        border: 1px solid rgb(7, 124, 166);
        vertical-align: -2px;
        color: blue;
      }
      
      
      input[type="checkbox"]:checked::before {
        /* Use `visibility` instead of `display` to avoid recalculating layout */
        visibility: visible;
      }
      
      input[type="checkbox"]:disabled {
        border-color: black;
        background: #ddd;
        color: gray;
      }