/*Source example : https://css-tip.com/single-digit-inputs/ */
.input-split-6-digit-code {
  --w: 1ch; /* control the width spacing between each letter */ /* Minimum 1ch to match the font police size*/
  --g: .15em; /* the visual gap between box */
  --b: 2px;   /* the border thickness of the individual square */
  
  --c: var(--odeo-haylem-blue); /*the border color of individual square*/
  --_n: 6; /*Number of digit in our code*/
  font-size: 40px;
  line-height: 1.5; /* control the height */
  letter-spacing: var(--w);
  font-family: monospace; /*Ensure the font user the same width for all character i and W takes same width*/

  width: calc(var(--_n) * (1ch + var(--w)));
  padding-left :calc((var(--w) - var(--g))/2); /*Need a padding left so the first digit is not right near the side of the box*/
  padding-right: 0px;

  clip-path: inset(0 calc(var(--w)/2) 0 0); /* Cut the half of character in the end to remove the 7th digit */

  background:
    /*Horizontal spacer/border and background*/
    repeating-linear-gradient(90deg,
      var(--odeo-haylem-blue) 0 var(--b), /*Border 1*/
      #0000 0 calc(1ch + var(--w) - var(--g) - var(--b)), /* Behind character*/
      var(--odeo-haylem-blue) 0 calc(1ch + var(--w) - var(--g)), /*Border 2*/
      #0000 0 calc(1ch + var(--w)) /*Space between char*/
      ),

    /*Top and bottom border*/
    conic-gradient(at calc(100% - var(--g) - 1px) var(--b),
    #0000 75%,
    var(--c) 0)
     0 0/calc(1ch + var(--w)) calc(100% - var(--b));


  /*Prevent bootstrap missing space from being include*/
  box-sizing: content-box;
  border: 0px;
}