

.vuuRoadmap {
    --svg-link: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 17"><path d="M12 13.1667H4C3.63333 13.1667 3.33333 12.8667 3.33333 12.5V4.5C3.33333 4.13333 3.63333 3.83333 4 3.83333H7.33333C7.7 3.83333 8 3.53333 8 3.16667C8 2.8 7.7 2.5 7.33333 2.5H3.33333C2.59333 2.5 2 3.1 2 3.83333V13.1667C2 13.9 2.6 14.5 3.33333 14.5H12.6667C13.4 14.5 14 13.9 14 13.1667V9.16667C14 8.8 13.7 8.5 13.3333 8.5C12.9667 8.5 12.6667 8.8 12.6667 9.16667V12.5C12.6667 12.8667 12.3667 13.1667 12 13.1667ZM9.33333 3.16667C9.33333 3.53333 9.63333 3.83333 10 3.83333H11.7267L5.64 9.92C5.38 10.18 5.38 10.6 5.64 10.86C5.9 11.12 6.32 11.12 6.58 10.86L12.6667 4.77333V6.5C12.6667 6.86667 12.9667 7.16667 13.3333 7.16667C13.7 7.16667 14 6.86667 14 6.5V3.16667C14 2.8 13.7 2.5 13.3333 2.5H10C9.63333 2.5 9.33333 2.8 9.33333 3.16667Z" /></svg>');
    margin-bottom: 40px;
}

.vuuRoadmap-spacer {
    background-image: url('./gray-dots.png');
    background-repeat: no-repeat;
    background-position: 4px top;
    height: 50px;
    margin-top: -3px;

}

.vuuRoadmap-milestone {
    background-image: url('./gray-pink-dots.png');
    background-repeat: no-repeat;
    background-position: left top;
    padding: 0 0 0 24px;
    position: relative;
}

.vuuRoadmap-description {
font-size: 24px;
line-height: 1;
}

.vuuRoadmap-date {
    color: #606477;
    font-size: 18px;
    font-weight: 400;
    margin-right: 24px;
}


.vuuRoadmap-epic {
    color:#6D18BD;
    font-size: 18px;
    font-weight: 400;
    position: relative;
    text-decoration: underline;
}
.vuuRoadmap-epic:hover {
    color:#6D18BD;
}

.vuuRoadmap-epic:before {
    content: ' ';
    position: absolute;
    top: 0px;
    left: -12px;
    height: 100%;
    width: 2px;
    background-color: #C7CBDE;
}

span[data-icon="link"] {
  --vuu-icon-color: #6D18BD;  
  --vuu-icon-size: 18px;
  --vuu-icon-left: 5px;
  --vuu-icon-top: 4px;
    --vuu-icon-svg: var(--svg-link);
    display: inline-block;
    height: var(--vuu-icon-height, var(--vuu-icon-size, 18px));
    position: relative;
    width: var(--vuu-icon-width, var(--vuu-icon-size, 18px));
  }
  
  [data-icon="link"]:after {
    content: "";
    background-color: var(--vuu-icon-color, var(--saltIcon-color, var(--salt-text-secondary-foreground)));
    left: var(--vuu-icon-left, auto);
    height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
    -webkit-mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
    mask: var(--vuu-icon-svg) center center/var(--vuu-icon-size) var(--vuu-icon-size);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    position: absolute;
    top: var(--vuu-icon-top, auto);
    transform: var(--vuu-icon-transform, none);
    width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
  }
  