/* Custom Font Awesome-style icons backed by our own svgs.
   Use like any other fa-solid icon, e.g. <i class="fa-solid fa-psv"></i> */

.fa-psv {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    background-color: currentColor;
    -webkit-mask: url('/images/icons/asset-icon-psv.svg') no-repeat center / contain;
    mask: url('/images/icons/asset-icon-psv.svg') no-repeat center / contain;
    vertical-align: -0.325em;
}

.fa-tnk {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    background-color: currentColor;
    -webkit-mask: url('/images/icons/asset-icon-tank.svg') no-repeat center / contain;
    mask: url('/images/icons/asset-icon-tank.svg') no-repeat center / contain;
    vertical-align: -0.325em;
}

.fa-pip {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    background-color: currentColor;
    -webkit-mask: url('/images/icons/asset-icon-piping.svg') no-repeat center / contain;
    mask: url('/images/icons/asset-icon-piping.svg') no-repeat center / contain;
    vertical-align: -0.325em;
}

.fa-vlv {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    background-color: currentColor;
    -webkit-mask: url('/images/icons/asset-icon-valve.svg') no-repeat center / contain;
    mask: url('/images/icons/asset-icon-valve.svg') no-repeat center / contain;
    vertical-align: -0.325em;
}

.fa-org {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    background-color: currentColor;
    -webkit-mask: url('/images/icons/asset-icon-org.svg') no-repeat center / contain;
    mask: url('/images/icons/asset-icon-org.svg') no-repeat center / contain;
    vertical-align: -0.325em;
}

.fa-ves {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    background-color: currentColor;
    -webkit-mask: url('/images/icons/asset-icon-vessel.svg') no-repeat center / contain;
    mask: url('/images/icons/asset-icon-vessel.svg') no-repeat center / contain;
    vertical-align: -0.25em;
}

.fa-skid {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    background-color: currentColor;
    -webkit-mask: url('/images/icons/asset-icon-skid.svg') no-repeat center / contain;
    mask: url('/images/icons/asset-icon-skid.svg') no-repeat center / contain;
    vertical-align: -0.325em;
}

.fa-loc {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    background-color: currentColor;
    -webkit-mask: url('/images/icons/asset-icon-location.svg') no-repeat center / contain;
    mask: url('/images/icons/asset-icon-location.svg') no-repeat center / contain;
    vertical-align: -0.325em;
}

.fa-gen {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    background-color: currentColor;
    -webkit-mask: url('/images/icons/asset-icon-general.svg') no-repeat center / contain;
    mask: url('/images/icons/asset-icon-general.svg') no-repeat center / contain;
    vertical-align: -0.325em;
}

.fa-asset {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    background-color: currentColor;
    -webkit-mask: url('/images/icons/asset-icon.svg') no-repeat center / contain;
    mask: url('/images/icons/asset-icon.svg') no-repeat center / contain;
    vertical-align: -0.325em;
}