yu-tab button.active {
    background-color: #0F67E1;
    position: relative;
    color: white;
}

yu-tab button {
    background-color: #F3FF4E;
    position: relative;
    color: #0F67E1;
    padding: 10px 20px;
    border: none;
  }
  
  yu-tab button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    background:
      linear-gradient(to right, #0F67E1 7px, transparent 1px) repeat-x,
      linear-gradient(to left, #0F67E1 7px, transparent 1px) repeat-x,
      linear-gradient(to bottom, #0F67E1 7px, transparent 1px) repeat-y,
      linear-gradient(to top, #0F67E1 7px, transparent 1px) repeat-y;
    background-position:
      top left,
      bottom right,
      top left,
      bottom right;
    background-size:
      10px 1px, 10px 1px, 1px 15px, 1px 10px;
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  }

  #search-input {
    border: none;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
  
    background-image:
      linear-gradient(to right, #0F67E1 6px, transparent 4px),
      linear-gradient(to left, #0F67E1 6px, transparent 4px),
      linear-gradient(to bottom, #0F67E1 6px, transparent 4px),
      linear-gradient(to top, #0F67E1 6px, transparent 4px);
  
    background-position:
      top left,
      bottom right,
      top left,
      bottom right;
  
    background-size:
      10px 1px,   /* top */
      10px 1px,   /* bottom */
      1px 10px,   /* left */
      1px 10px;   /* right */
  
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  }