.tracker--status-bar .tracker-item__close {
    cursor: pointer;
}

.tracker--status-bar .tracker-item__close::before {
    background-color: #fff;
    content: '';
    display: block;
    height: 0.0625rem;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    width: 140%;
}

.tracker--status-bar .tracker-item__close::after {
    background-color: #fff;
    content: '';
    display: block;
    height: 0.0625rem;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: top right;
    transform-origin: top right;
    width: 140%;
}

.tracker {
    margin: 2.1875rem 0 1.0625rem;
    padding: 0 1.875rem;
}

.tracker__label {
    color: #262c43;
    font-size: 0.75rem;
    margin-bottom: 2.375rem;
    position: relative;
}

.tracker__label::before {
    background-color: #ccc;
    content: '';
    display: block;
    height: 0.0625rem;
    position: absolute;
    top: 0.625rem;
    width: 100%;
}

.tracker__label-content {
    background-color: #fff;
    display: inline-block;
    padding-right: 1rem;
    position: relative;
}

.tracker__wrapper {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.tracker-item {
    -webkit-box-flex: 4;
    -ms-flex: 4;
    flex: 4;
    padding-top: 1.5625rem;
    position: relative;
}

.tracker-item::before {
    background-color: #ccc;
    content: '';
    height: 0.125rem;
    left: -0.125rem;
    position: absolute;
    top: -0.125rem;
    width: 100%;
}

.tracker-item::after {
    background-color: #ccc;
    border-radius: 50%;
    content: '';
    height: 0.5rem;
    left: -0.125rem;
    position: absolute;
    top: -0.3125rem;
    width: 0.5rem;
}

.tracker-item:last-child {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
}

.tracker-item:last-child::before {
    content: none;
}

.tracker-item--filled::before {
    background-color: #98BD4E;
    height: 0.25rem;
    top: -0.1875rem;
}

.tracker-item--filled::after {
    background-color: #98BD4E;
}

.tracker-item--current::after {
    background-color: #98BD4E;
    height: 1rem;
    left: -0.1875rem;
    top: -0.5625rem;
    width: 1rem;
}

.tracker-item--risk::after {
    background-color: #CC5E65;
    -webkit-box-shadow: 0 0 0 0.25rem #fff, 0 0 0 0.375rem #CC5E65;
    box-shadow: 0 0 0 0.25rem #fff, 0 0 0 0.375rem #CC5E65;
}

.tracker-item--dashed::before {
    background-color: #fff;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANMAAAACCAYAAADCZelTAAAAAXNSR0IArs4c6QAAAEpJREFUOBFjrNit4cD4n8GRgTDY1+524yAhZaPm4Qyh0fDDEjTDKb2wADPS//////3D4k8UIUZGJhQ+Ls6oedhDZjT8cITLMEp/AEX6gX9ksPnSAAAAAElFTkSuQmCC");
    background-repeat: repeat-x;
    height: 0.125rem;
    top: -0.125rem;
}

.tracker-item__content {
    color: #666;
    font-size: 0.75rem;
    font-weight: 100;
}

.tracker--simple .tracker-item--current .tracker-item__content {
    font-size: 0.875rem;
    font-weight: bold;
}

.tracker--status-bar .tracker__wrapper {
    overflow-y: visible;
    padding-top: 1.25rem;
}

.tracker--status-bar .tracker__label {
    margin-bottom: 1.5625rem;
}

.tracker--status-bar .tracker-item {
    min-width: 7.25rem;
    padding-top: 1.1875rem;
}

.tracker--status-bar .tracker-item::before {
    background-color: #666;
    left: 1.375rem;
}

.tracker--status-bar .tracker-item::after {
    content: none;
}

.tracker--status-bar .tracker-item--dashed::before {
    background-color: #fff;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAACCAYAAAC3xJe1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxODVGMTI2RjcwODMxMUU3QTczOUQxRTEwMDFBQzZDMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxODVGMTI3MDcwODMxMUU3QTczOUQxRTEwMDFBQzZDMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjE4NUYxMjZENzA4MzExRTdBNzM5RDFFMTAwMUFDNkMzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE4NUYxMjZFNzA4MzExRTdBNzM5RDFFMTAwMUFDNkMzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+B8TX0gAAADVJREFUeNpiPHfunBQDA0M6AwHw////p8bGxrMIqQOZx/Lv37//jIyM/4gwlKAaEACZBxBgAJK3F3ie5aByAAAAAElFTkSuQmCC");
    background-repeat: repeat-x;
    height: 0.125rem;
}

.tracker--status-bar .tracker-item__content {
    background-color: transparent;
    color: #262c43;
    font-size: 0.8125rem;
    max-width: 7.1875rem;
    outline: none;
    padding: 0.625rem 0.875rem 1.25rem;
    position: relative;
    text-align: left;
    -webkit-transition: background-color .2s;
    transition: background-color .2s;
    width: 100%;
    height: 110px;
}

.tracker--status-bar .tracker-item__content::before {
    border-bottom: 0.375rem solid transparent;
    border-left: 0.75rem solid transparent;
    border-right: 0.75rem solid transparent;
    content: '';
    display: block;
    height: 0;
    left: 0.6875rem;
    position: absolute;
    top: -0.375rem;
    -webkit-transition: border-color .2s;
    transition: border-color .2s;
    width: 0;
}

.tracker--status-bar .tracker-item__content:hover,
.tracker--status-bar .tracker-item__content:focus,
.tracker-item.tooltip:hover .tracker-item__content {
    background-color: #f0f0f0;
}

.tracker--status-bar .tracker-item__content:hover::before,
.tracker--status-bar .tracker-item__content:focus::before {
    border-bottom-color: #f0f0f0;
}

.tracker--status-bar .tracker-item__content:hover+.tracker-item__bullet,
.tracker--status-bar .tracker-item__content:focus+.tracker-item__bullet,
.tracker--status-bar .tracker-item__content--active+.tracker-item__bullet {
    background-color: #5c80d5;
    -webkit-box-shadow: 0 0 0 0.0625rem #fff, 0 0 0 0.1875rem #5c80d5;
    box-shadow: 0 0 0 0.0625rem #fff, 0 0 0 0.1875rem #5c80d5;
}

.tracker--status-bar .tracker-item__content--active,
.tracker--status-bar .tracker-item__content--active:hover,
.tracker-item.tooltip:hover .tracker-item__content--active {
    background-color: #5c80d5;
    color: #fff;
}

.tracker--status-bar .tracker-item__content--active::before,
.tracker--status-bar .tracker-item__content--active:hover::before,
.tracker--status-bar .tracker-item__content--active:focus::before {
    border-bottom-color: #5c80d5;
}

.tracker--status-bar .tracker-item__content--active .tracker-item__count svg {
    fill: #fff;
}

.tracker-item__content--active .tracker-item__count span {
    color: #fff;
}

.tracker--status-bar .tracker-item__count {
    display: block;
    font-family: 'Neue Helvetica', Helvetica, Arial, sans-serif;
    font-size: 1.75rem;
    font-weight: 400;
    margin-bottom: 0.375rem;
}

.tracker--status-bar .tracker-item__count svg {
    width: 0.9375rem;
}

.tracker--status-bar .tracker-item__close {
    display: none;
    height: 0.875rem;
    left: 5.25rem;
    position: absolute;
    top: 2rem;
    width: 0.875rem;
}

.tracker--status-bar .tracker-item__content--active~.tracker-item__close {
    display: block;
}

.tracker--status-bar-short .tracker-item {
    max-width: 11.25rem;
}

.tracker-item__bullet {
    background-color: #fff;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 0.125rem #5c80d5;
    box-shadow: 0 0 0 0.125rem #5c80d5;
    cursor: pointer;
    display: block;
    height: 1rem;
    left: 0.9375rem;
    position: absolute;
    top: -0.5625rem;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    width: 1rem;
}

.tracker-item__bullet:hover {
    background-color: #5c80d5;
    -webkit-box-shadow: 0 0 0 0.0625rem #fff, 0 0 0 0.1875rem #5c80d5;
    box-shadow: 0 0 0 0.0625rem #fff, 0 0 0 0.1875rem #5c80d5;
}

.tracker-item__bullet:focus {
    outline: none;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 0px;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 145px;
    background-color: #fff;
    border: 1px solid #262c43;
    color: #262c43;
    padding: 5px;
    z-index: 100;
    font-size: 0.8125rem;
    display: block;
    position: absolute;
    margin-left: -80px;
    margin-top: -15px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}