.icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #ffffff;
}

.icon-question {
    mask: url('/mages/svg/question-circle.svg') no-repeat center / contain;
    -webkit-mask: url('/images/svg/question-circle.svg') no-repeat center / contain;
    cursor: pointer;
    opacity: 0.8;
    transition: all 150ms ease-in-out;
}

.icon-question:hover {
    opacity: 1;
    transition: all 150ms ease-in-out;
}

.icon-search {
    mask: url('/images/svg/search.svg') no-repeat center / contain;
    -webkit-mask: url('/images/svg/search.svg') no-repeat center / contain;
}

.icon-clock {
    mask: url('/images/svg/clock.svg') no-repeat center / contain;
    -webkit-mask: url('/images/svg/clock.svg') no-repeat center / contain;
}

.icon-geo {
    mask: url('/images/svg/geo-alt.svg') no-repeat center / contain;
    -webkit-mask: url('/images/svg/geo-alt.svg') no-repeat center / contain;
}

.icon-info-circle {
    mask: url('/images/svg/info-circle.svg') no-repeat center / contain;
    -webkit-mask: url('/images/svg/info-circle.svg') no-repeat center / contain;
    cursor: pointer;
    opacity: 0.8;
    transition: all 150ms ease-in-out;
}

.icon-info-circle:hover {
    opacity: 1;
    transition: all 150ms ease-in-out;
}

.icon-copy {
    mask: url('/images/svg/copy.svg') no-repeat center / contain;
    -webkit-mask: url('/images/svg/copy.svg') no-repeat center / contain;
    opacity: 0.7;
    transition: all 150ms ease-in-out;
    cursor: pointer;
}

.blue-icon {
    background-color: var(--blue);
}

.red-icon {
    background-color: red;
}

.orange-icon {
    background-color: var(--orange);
}

.white-icon {
    background-color: #ffff;
}

.black-icon {
    background-color: #000000;
}

.icon-copy:hover {
    opacity: 1;
    transition: all 150ms ease-in-out;
}