/*
    UI icons that are NOT in the Flaticon "food" pack.

    The shipped Flaticon font only carries 165 glyphs (pizza, burger,
    fries, ...). There is no person/account glyph in it, so
    `<span class="flaticon-user">` resolved to an empty ::before and
    the header user icon rendered as blank space.

    Adding a `content: "\f1xx"` rule would not help: the font has no
    glyph at any other codepoint, so the browser would draw either
    nothing or a wrong food icon.

    These rules therefore draw the icon as an inline SVG mask in
    `currentColor`, so they inherit the surrounding text colour (white
    on the transparent header) and never depend on the font file.

    Every glyph is an OUTLINE (fill:none + stroke) to match the
    Flaticon food pack, whose shopping-bag glyph is a thin line icon
    built from curved subpaths -- a filled person glyph sat next to it
    looking mismatched.

    The stroke colour is a plain keyword, not a hex value: the data URI
    is percent-encoded, and a '#' would need escaping twice.
*/


.flaticon-user::before,
.flaticon-cart::before,
.flaticon-search::before,
.flaticon-phone::before,
.flaticon-location::before,
.flaticon-clock::before,
.flaticon-logout::before,
.flaticon-account::before,
.flaticon-profile::before,
.flaticon-shopping-cart::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.flaticon-user::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227.8%22%20r%3D%225.4%22%2F%3E%3Cpath%20d%3D%22M2.4%2021.6v-1.6a9.6%209.6%200%200%201%2019.2%200v1.6%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227.8%22%20r%3D%225.4%22%2F%3E%3Cpath%20d%3D%22M2.4%2021.6v-1.6a9.6%209.6%200%200%201%2019.2%200v1.6%22%2F%3E%3C%2Fsvg%3E");
}

.flaticon-cart::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M2.5%203.5h2.2l2.4%2010.4a1.8%201.8%200%200%200%201.8%201.4h7.6a1.8%201.8%200%200%200%201.75-1.35L20%206.6H6%22%2F%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%2219.5%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2219.5%22%20r%3D%221.6%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M2.5%203.5h2.2l2.4%2010.4a1.8%201.8%200%200%200%201.8%201.4h7.6a1.8%201.8%200%200%200%201.75-1.35L20%206.6H6%22%2F%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%2219.5%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2219.5%22%20r%3D%221.6%22%2F%3E%3C%2Fsvg%3E");
}

.flaticon-search::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2210.8%22%20cy%3D%2210.8%22%20r%3D%226.8%22%2F%3E%3Cpath%20d%3D%22M15.8%2015.8%2021%2021%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2210.8%22%20cy%3D%2210.8%22%20r%3D%226.8%22%2F%3E%3Cpath%20d%3D%22M15.8%2015.8%2021%2021%22%2F%3E%3C%2Fsvg%3E");
}

.flaticon-phone::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M7.2%203.5h2.1l1.6%204-2%201.4a12.5%2012.5%200%200%200%206.2%206.2l1.4-2%204%201.6v2.1a2%202%200%200%201-2.2%202A16.8%2016.8%200%200%201%205.2%205.7a2%202%200%200%201%202-2.2Z%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M7.2%203.5h2.1l1.6%204-2%201.4a12.5%2012.5%200%200%200%206.2%206.2l1.4-2%204%201.6v2.1a2%202%200%200%201-2.2%202A16.8%2016.8%200%200%201%205.2%205.7a2%202%200%200%201%202-2.2Z%22%2F%3E%3C%2Fsvg%3E");
}

.flaticon-location::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%2021.5s7-6.3%207-11.3a7%207%200%201%200-14%200c0%205%207%2011.3%207%2011.3Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.6%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M12%2021.5s7-6.3%207-11.3a7%207%200%201%200-14%200c0%205%207%2011.3%207%2011.3Z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%222.6%22%2F%3E%3C%2Fsvg%3E");
}

.flaticon-clock::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.8%22%2F%3E%3Cpath%20d%3D%22M12%206.8V12l3.6%202.2%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.8%22%2F%3E%3Cpath%20d%3D%22M12%206.8V12l3.6%202.2%22%2F%3E%3C%2Fsvg%3E");
}

.flaticon-logout::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M14.5%204.5H18a1.5%201.5%200%200%201%201.5%201.5v12a1.5%201.5%200%200%201-1.5%201.5h-3.5%22%2F%3E%3Cpath%20d%3D%22M10%208%206%2012l4%204%22%2F%3E%3Cpath%20d%3D%22M6%2012h9.5%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M14.5%204.5H18a1.5%201.5%200%200%201%201.5%201.5v12a1.5%201.5%200%200%201-1.5%201.5h-3.5%22%2F%3E%3Cpath%20d%3D%22M10%208%206%2012l4%204%22%2F%3E%3Cpath%20d%3D%22M6%2012h9.5%22%2F%3E%3C%2Fsvg%3E");
}

.flaticon-account::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227.8%22%20r%3D%225.4%22%2F%3E%3Cpath%20d%3D%22M2.4%2021.6v-1.6a9.6%209.6%200%200%201%2019.2%200v1.6%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227.8%22%20r%3D%225.4%22%2F%3E%3Cpath%20d%3D%22M2.4%2021.6v-1.6a9.6%209.6%200%200%201%2019.2%200v1.6%22%2F%3E%3C%2Fsvg%3E");
}

.flaticon-profile::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227.8%22%20r%3D%225.4%22%2F%3E%3Cpath%20d%3D%22M2.4%2021.6v-1.6a9.6%209.6%200%200%201%2019.2%200v1.6%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227.8%22%20r%3D%225.4%22%2F%3E%3Cpath%20d%3D%22M2.4%2021.6v-1.6a9.6%209.6%200%200%201%2019.2%200v1.6%22%2F%3E%3C%2Fsvg%3E");
}

.flaticon-shopping-cart::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M2.5%203.5h2.2l2.4%2010.4a1.8%201.8%200%200%200%201.8%201.4h7.6a1.8%201.8%200%200%200%201.75-1.35L20%206.6H6%22%2F%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%2219.5%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2219.5%22%20r%3D%221.6%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%22M2.5%203.5h2.2l2.4%2010.4a1.8%201.8%200%200%200%201.8%201.4h7.6a1.8%201.8%200%200%200%201.75-1.35L20%206.6H6%22%2F%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%2219.5%22%20r%3D%221.6%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2219.5%22%20r%3D%221.6%22%2F%3E%3C%2Fsvg%3E");
}
