HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<!-- <html dir="rtl"> -->
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<style>
.wrap {
margin: 16px 0;
}
section {
margin: 1.5rem 0;
}
h5 {
margin-bottom: 0;
}
</style>
</head>
<body>
<div style="position: absolute; width: 0; height: 0;">
<svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0; height: 0;">
<symbol id="menu" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
</symbol>
<symbol id="online" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M4.93,4.93C3.12,6.74 2,9.24 2,12C2,14.76 3.12,17.26 4.93,19.07L6.34,17.66C4.89,16.22 4,14.22 4,12C4,9.79 4.89,7.78 6.34,6.34L4.93,4.93M19.07,4.93L17.66,6.34C19.11,7.78 20,9.79 20,12C20,14.22 19.11,16.22 17.66,17.66L19.07,19.07C20.88,17.26 22,14.76 22,12C22,9.24 20.88,6.74 19.07,4.93M7.76,7.76C6.67,8.85 6,10.35 6,12C6,13.65 6.67,15.15 7.76,16.24L9.17,14.83C8.45,14.11 8,13.11 8,12C8,10.89 8.45,9.89 9.17,9.17L7.76,7.76M16.24,7.76L14.83,9.17C15.55,9.89 16,10.89 16,12C16,13.11 15.55,14.11 14.83,14.83L16.24,16.24C17.33,15.15 18,13.65 18,12C18,10.35 17.33,8.85 16.24,7.76M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z" />
</symbol>
<symbol id="register" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10.173 11.97l2.357 2.357-2.946.589.59-2.945zm8.839-4.125l-5.303 5.304-2.357-2.357 5.303-5.304a1.666 1.666 0 1 1 2.357 2.357zM21.167 20H2.833A.834.834 0 0 1 2 19.167V12.5c0-.46.373-.833.833-.833h5v1.666H3.667v5h16.667v-5H17v-1.666h4.167c.46 0 .833.373.833.833v6.667c0 .46-.373.833-.833.833z" />
</symbol>
<symbol id="home" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M5.828 11l-2 2h-2l-.242-.586L3 11h2.828zM6 11v9h2v-7h8v7h2v-9l-6-6.172L6 11zm4 11H4v-9H1L12 2l11 11h-3v9h-6v-7h-4v7z" />
</symbol>
<symbol id="faq" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 22C6.486 22 2 17.515 2 12 2 6.487 6.486 2 12 2s10 4.486 10 10c0 5.515-4.486 10-10 10zm0-18c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm1 11v-1.125A4.011 4.011 0 0 0 16 10c0-2.205-1.795-4-4-4s-4 1.795-4 4h2a2 2 0 1 1 2 2h-1v3h2zm-1 3.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5z" />
</symbol>
<symbol id="members" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M18.001 4c0-1.104-.897-2-2-2h-12c-1.103 0-2 .896-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-6h4V4h-4zm-1.999 16H4.001V4h12l.001 16zm3.999-8h-2v-2h2v2zm-2-4V6h2v2h-2zm-11 7c0-1.841 1.159-3 3-3s3 1.159 3 3h-6zm3-4a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" />
</symbol>
<symbol id="notifications" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 22.5c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.86 6 8.42 6 11.5v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6C8 9.02 9.51 7 12 7s4 2.02 4 4.5v6z" />
</symbol>
<symbol id="inbox" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z" />
</symbol>
<symbol id="login" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M18 22H7c-1.103 0-2-.897-2-2v-3h2v3h11V4H7v3H5V4c0-1.102.897-2 2-2h11c1.103 0 2 .898 2 2v16c0 1.103-.897 2-2 2zM11.707 7.292l4.707 4.699-4.706 4.715-1.416-1.412L12.582 13H4v-2h8.59l-2.297-2.292 1.414-1.416z" />
</symbol>
<symbol id="search" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M21.467 18.896l-3.599-3.599a8.563 8.563 0 0 0 1.38-4.673c0-2.303-.896-4.47-2.526-6.098A8.567 8.567 0 0 0 10.624 2c-2.304 0-4.47.897-6.098 2.525A8.569 8.569 0 0 0 2 10.624c0 2.303.897 4.47 2.526 6.098a8.565 8.565 0 0 0 6.098 2.525 8.552 8.552 0 0 0 4.673-1.379l3.6 3.6c.343.343.8.532 1.285.532.485 0 .942-.19 1.285-.533A1.8 1.8 0 0 0 22 20.182c0-.487-.19-.943-.533-1.286zM5.812 15.435a6.756 6.756 0 0 1-1.994-4.811c0-1.819.708-3.527 1.994-4.811a6.757 6.757 0 0 1 4.812-1.995c1.818 0 3.526.708 4.811 1.995a6.756 6.756 0 0 1 1.994 4.81 6.76 6.76 0 0 1-1.994 4.812 6.756 6.756 0 0 1-4.811 1.994 6.753 6.753 0 0 1-4.812-1.994z" />
</symbol>
<symbol id="search-adv" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M21.467 18.896l-3.599-3.599a8.563 8.563 0 0 0 1.38-4.673c0-2.303-.896-4.47-2.526-6.098A8.567 8.567 0 0 0 10.624 2c-2.304 0-4.47.897-6.098 2.525A8.569 8.569 0 0 0 2 10.624c0 2.303.897 4.47 2.526 6.098a8.565 8.565 0 0 0 6.098 2.525 8.552 8.552 0 0 0 4.673-1.379l3.6 3.6c.343.343.8.532 1.285.532.485 0 .942-.19 1.285-.533A1.8 1.8 0 0 0 22 20.182c0-.487-.19-.943-.533-1.286zM5.812 15.435a6.756 6.756 0 0 1-1.994-4.811c0-1.819.708-3.527 1.994-4.811a6.757 6.757 0 0 1 4.812-1.995c1.818 0 3.526.708 4.811 1.995a6.756 6.756 0 0 1 1.994 4.81 6.76 6.76 0 0 1-1.994 4.812 6.756 6.756 0 0 1-4.811 1.994 6.753 6.753 0 0 1-4.812-1.994zm9.357-3.853V9.928h-1.356a3.325 3.325 0 0 0-.326-.797l.856-.856-1.24-1.239-.856.857a3.22 3.22 0 0 0-.797-.328V6.21H9.797v1.356a3.24 3.24 0 0 0-.796.328l-.856-.857-1.24 1.24.856.855a3.34 3.34 0 0 0-.326.797H6.078v1.653h1.357c.073.284.184.549.325.797l-.856.856 1.24 1.239.856-.856c.247.141.513.252.796.327V15.3h1.652v-1.355c.285-.075.55-.186.797-.327l.857.856 1.239-1.24-.856-.855a3.28 3.28 0 0 0 .326-.797h1.358zm-4.545.99a1.818 1.818 0 1 1 0-3.636 1.818 1.818 0 0 1 0 3.637z" />
</symbol>
<symbol id="jump-to" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M17 5.586l4.414 4.415L17 14.415 15.586 13l2-2H12c-1.104 0-2 .898-2 2v1H8v-1c0-2.206 1.795-4 4-4h5.586l-2-2L17 5.586zM13 18v-3h2v5H2V4h13v2H4v12h9z" />
</symbol>
<symbol id="user" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2z" />
</symbol>
<symbol id="ucp" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 8.999c1.654 0 3-1.346 3-3s-1.346-3-3-3a2.993 2.993 0 0 0-2.815 2H2v2h14.185a2.993 2.993 0 0 0 2.815 2zm0-4a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-10 4c1.302 0 2.401.838 2.815 2H22v2H11.815a2.994 2.994 0 0 1-2.815 2 2.994 2.994 0 0 1-2.815-2H2v-2h4.185a2.993 2.993 0 0 1 2.815-2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm10 2c1.654 0 3 1.346 3 3s-1.346 3-3 3a2.994 2.994 0 0 1-2.815-2H2v-2h14.185a2.993 2.993 0 0 1 2.815-2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
</symbol>
<symbol id="gavel" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10.61 14.87l-1.44 1.41.718.732-1.459 1.426L2 12.004l1.436-1.437.705.706 7.169-7.145-.726-.726L12.004 2l6.435 6.44-1.42 1.423-.711-.71-1.432 1.423L22 17.712 17.722 22l-7.112-7.13zm-2.857-.02l2.84-2.843 7.124 7.133 1.426-1.43-7.125-7.121 2.858-2.856-2.164-2.162-7.123 7.116 2.164 2.162z" />
</symbol>
<symbol id="settings" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19.713 12c0 .34-.031.66-.072.98l2.169 1.65c.195.15.247.42.123.64l-2.056 3.46c-.123.22-.39.31-.627.22l-2.56-1a7.94 7.94 0 0 1-1.737.98l-.39 2.65a.497.497 0 0 1-.505.42H9.946a.497.497 0 0 1-.504-.42l-.39-2.65a7.564 7.564 0 0 1-1.738-.98l-2.56 1a.524.524 0 0 1-.627-.22l-2.056-3.46a.495.495 0 0 1 .124-.64l2.169-1.65a7.718 7.718 0 0 1-.072-.98c0-.33.03-.66.072-.98l-2.17-1.65a.484.484 0 0 1-.123-.64l2.056-3.46a.508.508 0 0 1 .627-.22l2.56 1c.535-.39 1.11-.73 1.738-.98l.39-2.65A.498.498 0 0 1 9.946 2h4.112c.257 0 .473.18.504.42l.39 2.65c.628.25 1.204.58 1.738.98l2.56-1c.226-.08.504 0 .627.22l2.056 3.46c.124.22.072.49-.123.64l-2.17 1.65c.042.32.073.64.073.98zm-3.316-3.79l-.848-.635a5.66 5.66 0 0 0-1.302-.736l-1.019-.406-.16-1.085-.216-1.443-1.706.018-.37 2.51-1.019.406a6.05 6.05 0 0 0-1.32.75l-.843.615-.973-.38-1.471-.546-.791 1.345 2.034 1.548-.14 1.092c-.038.295-.056.53-.056.737 0 .206.018.442.056.737l.14 1.092-.876.667-1.164.885.823 1.36 2.432-.95.847.634c.414.31.845.553 1.302.736l1.02.406.16 1.085.214 1.443 1.702.016.375-2.544 1.02-.406a6.05 6.05 0 0 0 1.32-.75l.843-.615.972.38 1.457.57.812-1.364-2.04-1.553.14-1.092c.038-.302.056-.525.056-.737 0-.212-.018-.435-.057-.737l-.14-1.092.877-.667 1.164-.885-.79-1.33-2.465.92zM12 13.429A1.43 1.43 0 0 1 10.571 12c0-.788.641-1.429 1.429-1.429s1.429.641 1.429 1.429A1.43 1.43 0 0 1 12 13.429z" />
</symbol>
<symbol id="acp" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z" />
</symbol>
<symbol id="team" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 11c-1.609 0-2.917-1.345-2.917-3 0-1.654 1.308-3 2.917-3 1.609 0 2.917 1.346 2.917 3 0 1.655-1.308 3-2.917 3zm0-4.5c.804 0 1.458.672 1.458 1.5 0 .827-.654 1.5-1.458 1.5-.804 0-1.458-.673-1.458-1.5 0-.828.654-1.5 1.458-1.5zM17.833 17H6.167v-.75c0-2.65 2.399-4.5 5.833-4.5s5.833 1.85 5.833 4.5V17zM7.741 15.5h8.519c-.436-1.356-2.066-2.25-4.26-2.25-2.193 0-3.823.894-4.26 2.25zM5.333 17H2v-.643C2 14.086 4.056 12.5 7 12.5h.072c-1.094.934-1.739 2.226-1.739 3.75V17zm13.334 0v-.75c0-1.524-.645-2.816-1.74-3.75H17c2.944 0 5 1.586 5 3.857V17h-3.333zm-9.709-6.746c.07.1.144.196.223.288A2.491 2.491 0 0 1 7 11.857c-1.379 0-2.5-1.153-2.5-2.571 0-1.418 1.121-2.572 2.5-2.572.496 0 .959.15 1.348.407a3.963 3.963 0 0 0 .61 3.133zm6.767-2.7a3.936 3.936 0 0 0-.073-.433A2.44 2.44 0 0 1 17 6.714c1.379 0 2.5 1.154 2.5 2.572 0 1.418-1.121 2.571-2.5 2.571a2.49 2.49 0 0 1-2.181-1.315 3.905 3.905 0 0 0 .906-2.989z" />
</symbol>
<symbol id="new" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15.414 2H6c-1.103 0-2 .898-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V6.586L15.414 2zM10 4h4v4h4v3h2v2h-2v3h2v2h-2l.001 2H15v2h-2v-2h-3v2H8v-2H6v-2H4v-2h2v-3H4v-2h2V8H4V6h2V4h2V2h2v2z" />
</symbol>
<symbol id="unread" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15.414 2H6c-1.103 0-2 .898-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V6.586L15.414 2zm2.587 18H6V4h8v4h4l.001 12zM8 11v2h6v-2H8zm0 4v2h8v-2H8z" />
</symbol>
<symbol id="read" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15.414 2H6c-1.103 0-2 .898-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V6.586L15.414 2zm2.587 18H6V4h8v4h4l.001 12z" />
</symbol>
<symbol id="active" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15.414 2H6c-1.103 0-2 .898-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V6.586L15.414 2zm2.587 18H6V4h8v4h4l.001 12zm-4.695-4.811h2.944v-1.167h-2.223l-1.135-2.27-.931 2.793-1.635-4.25-1.397 3.727H7.75v1.167h1.988l.602-1.608L12.04 18l1.068-3.207.198.397z" />
</symbol>
<symbol id="unanswered" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15.414 2H6c-1.103 0-2 .898-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V6.586L15.414 2zm2.587 18H6V4h8v4h4l.001 12zM11 10v5h2v-5h-2zm1 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
</symbol>
<symbol id="yours" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15.414 2H6c-1.103 0-2 .898-2 2v16c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2V6.586L15.414 2zm2.587 18H6V4h8v4h4l.001 12zM12 11l-.934 2.066L9 14l2.066.934L12 17l.942-2.066L15 14l-2.058-.934L12 11z" />
</symbol>
<symbol id="profile" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M9,4A4,4 0 0,0 5,8A4,4 0 0,0 9,12A4,4 0 0,0 13,8A4,4 0 0,0 9,4M9,14C6.33,14 1,15.33 1,18V20H12.08C12.03,19.67 12,19.34 12,19C12,17.5 12.5,16 13.41,14.8C11.88,14.28 10.18,14 9,14M18,14C17.87,14 17.76,14.09 17.74,14.21L17.55,15.53C17.25,15.66 16.96,15.82 16.7,16L15.46,15.5C15.35,15.5 15.22,15.5 15.15,15.63L14.15,17.36C14.09,17.47 14.11,17.6 14.21,17.68L15.27,18.5C15.25,18.67 15.24,18.83 15.24,19C15.24,19.17 15.25,19.33 15.27,19.5L14.21,20.32C14.12,20.4 14.09,20.53 14.15,20.64L15.15,22.37C15.21,22.5 15.34,22.5 15.46,22.5L16.7,22C16.96,22.18 17.24,22.35 17.55,22.47L17.74,23.79C17.76,23.91 17.86,24 18,24H20C20.11,24 20.22,23.91 20.24,23.79L20.43,22.47C20.73,22.34 21,22.18 21.27,22L22.5,22.5C22.63,22.5 22.76,22.5 22.83,22.37L23.83,20.64C23.89,20.53 23.86,20.4 23.77,20.32L22.7,19.5C22.72,19.33 22.74,19.17 22.74,19C22.74,18.83 22.73,18.67 22.7,18.5L23.76,17.68C23.85,17.6 23.88,17.47 23.82,17.36L22.82,15.63C22.76,15.5 22.63,15.5 22.5,15.5L21.27,16C21,15.82 20.73,15.65 20.42,15.53L20.23,14.21C20.22,14.09 20.11,14 20,14M19,17.5A1.5,1.5 0 0,1 20.5,19A1.5,1.5 0 0,1 19,20.5C18.16,20.5 17.5,19.83 17.5,19A1.5,1.5 0 0,1 19,17.5z" />
</symbol>
<symbol id="group" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" />
</symbol>
<symbol id="friends" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
</symbol>
<symbol id="overview" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M17.3,18C19,16.5 20,14.4 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12C4,14.4 5,16.5 6.7,18C8.2,16.7 10,16 12,16C14,16 15.9,16.7 17.3,18M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M7,9A1,1 0 0,1 8,10A1,1 0 0,1 7,11A1,1 0 0,1 6,10A1,1 0 0,1 7,9M10,6A1,1 0 0,1 11,7A1,1 0 0,1 10,8A1,1 0 0,1 9,7A1,1 0 0,1 10,6M17,9A1,1 0 0,1 18,10A1,1 0 0,1 17,11A1,1 0 0,1 16,10A1,1 0 0,1 17,9M14.4,6.1C14.9,6.3 15.1,6.9 15,7.4L13.6,10.8C13.8,11.1 14,11.5 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12C10,11 10.7,10.1 11.7,10L13.1,6.7C13.3,6.1 13.9,5.9 14.4,6.1z" />
</symbol>
<symbol id="prefs" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,20L1.5,16.5L2.91,15.09L5,17.17L9.59,12.59L11,14L5,20z" />
</symbol>
<symbol id="quickmenu" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15,7H20.5L15,1.5V7M8,0H16L22,6V18A2,2 0 0,1 20,20H8C6.89,20 6,19.1 6,18V2A2,2 0 0,1 8,0M4,4V22H20V24H4A2,2 0 0,1 2,22V4H4z" />
</symbol>
<symbol id="queue" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M13 2.05v3.03c3.39.49 6 3.39 6 6.92 0 .9-.18 1.75-.48 2.54l2.6 1.53c.56-1.24.88-2.62.88-4.07 0-5.18-3.95-9.45-9-9.95zM12 19c-3.87 0-7-3.13-7-7 0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95 0 5.52 4.47 10 9.99 10 3.31 0 6.24-1.61 8.06-4.09l-2.6-1.53C16.17 17.98 14.21 19 12 19z" />
</symbol>
<symbol id="warning" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
</symbol>
<symbol id="note" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M18 17H6v-2h12v2zm0-4H6v-2h12v2zm0-4H6V7h12v2zM3 22l1.5-1.5L6 22l1.5-1.5L9 22l1.5-1.5L12 22l1.5-1.5L15 22l1.5-1.5L18 22l1.5-1.5L21 22V2l-1.5 1.5L18 2l-1.5 1.5L15 2l-1.5 1.5L12 2l-1.5 1.5L9 2 7.5 3.5 6 2 4.5 3.5 3 2v20z" />
</symbol>
<symbol id="log" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" />
</symbol>
<symbol id="ban" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z" />
</symbol>
<symbol id="contact-menu" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M6 22v-4H4c-1.103 0-2-.897-2-2V4c0-1.104.897-2 2-2h16c1.103 0 2 .896 2 2v12c0 1.103-.897 2-2 2h-8.667L6 22zM4 4h16v12h-9.333L8 18v-2H4V4zm3 7.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5zm5 0a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5zm5 0a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5z" />
</symbol>
<symbol id="pm-user" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M8.667 14.455c-1.839 0-3.334-1.468-3.334-3.273 0-1.804 1.495-3.273 3.334-3.273C10.505 7.91 12 9.378 12 11.182c0 1.805-1.495 3.273-3.333 3.273zm0-4.91c.919 0 1.666.734 1.666 1.637 0 .902-.747 1.636-1.666 1.636-.92 0-1.667-.734-1.667-1.636 0-.903.747-1.637 1.667-1.637zM15.333 21H2v-.818c0-2.89 2.742-4.91 6.667-4.91s6.666 2.02 6.666 4.91V21zM3.8 19.364h9.736c-.498-1.48-2.36-2.455-4.867-2.455s-4.37.975-4.869 2.455zm10.701-4.91a.853.853 0 0 1-.373-.085.817.817 0 0 1-.46-.733V12h-.834v-1.636H14.5c.46 0 .833.366.833.818V12l2-1.473a.843.843 0 0 1 .5-.163h2.5V4.636H12v2.455h-1.667V4.636C10.333 3.733 11.081 3 12 3h8.333C21.253 3 22 3.733 22 4.636v5.728c0 .902-.747 1.636-1.667 1.636h-2.222L15 14.29a.847.847 0 0 1-.5.165z" />
</symbol>
<symbol id="email" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
</symbol>
<symbol id="skype" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M18.667 5.333c2.3 2.267 3.166 5.434 2.622 8.39.455.8.711 1.733.711 2.721A5.556 5.556 0 0 1 16.444 22a5.492 5.492 0 0 1-2.722-.711c-2.955.544-6.122-.322-8.389-2.622-2.3-2.267-3.166-5.434-2.622-8.39A5.492 5.492 0 0 1 2 7.557 5.556 5.556 0 0 1 7.556 2c.988 0 1.922.256 2.722.711 2.955-.544 6.122.322 8.389 2.622zm-6.623 12.4c3.19 0 4.778-1.533 4.778-3.6 0-1.322-.622-2.733-3.033-3.277l-2.211-.49c-.845-.188-1.8-.444-1.8-1.233 0-.8.666-1.355 1.889-1.355 2.477 0 2.244 1.7 3.477 1.7.645 0 1.2-.378 1.2-1.034 0-1.522-2.433-2.666-4.5-2.666-2.233 0-4.622.955-4.622 3.489 0 1.222.434 2.522 2.834 3.122l2.988.755c.9.223 1.123.723 1.123 1.19 0 .755-.756 1.5-2.123 1.5-2.677 0-2.31-2.056-3.744-2.056-.644 0-1.111.444-1.111 1.078 0 1.233 1.478 2.877 4.855 2.877z" />
</symbol>
<symbol id="website" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M21.167 7.333h-2.519C17.127 5.314 14.718 4 12 4 9.283 4 6.873 5.314 5.352 7.333H2.833A.834.834 0 0 0 2 8.167V16.5c0 .46.373.833.833.833h2.519c1.52 2.02 3.93 3.334 6.648 3.334 2.718 0 5.127-1.314 6.648-3.334h2.519c.46 0 .833-.372.833-.833V8.167a.833.833 0 0 0-.833-.834zm-4.781 0h-1.053v-.758c.376.22.728.474 1.053.758zm-2.72-1.447v1.447h-3.333V5.886A6.632 6.632 0 0 1 12 5.666c.576 0 1.133.081 1.667.22zm-5 .689v.758H7.615a6.916 6.916 0 0 1 1.053-.758zM7.615 17.333h1.053v.76a6.7 6.7 0 0 1-1.053-.76zm2.72 1.449v-1.449h3.333v1.449A6.627 6.627 0 0 1 12 19c-.576 0-1.133-.08-1.667-.218zm5-.69v-.759h1.052a6.66 6.66 0 0 1-1.053.76zm5-2.425H3.666V9h16.666v6.667zM6.366 14h.851l-.009-.035.411-1.625.407 1.66h.858l-.01-.035.834-3.298h-.857l-.399 1.626-.41-1.626h-.857l-.4 1.626-.41-1.626h-.833L6.36 14h.007zm4.166 0h.851l-.008-.033.41-1.627.407 1.66h.858l-.008-.033.832-3.3h-.857l-.399 1.626-.41-1.626h-.857l-.4 1.626-.41-1.626H9.71L10.527 14h.006zm4.167 0h.851l-.008-.033.41-1.627.407 1.66h.858l-.009-.033.833-3.3h-.857l-.4 1.626-.41-1.626h-.857l-.399 1.626-.41-1.626h-.834L14.693 14h.007z" />
</symbol>
<symbol id="yahoo" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M20 2h-.003c-.96.214-1.825.223-2.682 0-.757 1.396-3.548 5.917-5.326 8.811C10.186 7.854 8.053 4.441 6.663 2 5.562 2.234 5.098 2.247 4 2c2.183 3.26 5.681 9.465 6.871 11.505L10.713 22s.768-.126 1.281-.126c.57 0 1.276.126 1.276.126l-.16-8.495C15.329 9.646 18.996 3.349 20 2z" />
</symbol>
<symbol id="rss" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M20 22H4c-1.104 0-2-.898-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v16c0 1.102-.896 2-2 2zM4 4h16l-.003 16H4V4zm4 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0c0-4.412-3.589-8-8-8v2c3.309 0 6 2.691 6 6h2zm4 0c0-6.617-5.383-12-12-12v2c5.514 0 10 4.484 10 10h2z" />
</symbol>
<symbol id="facebook" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M22 5.333A3.335 3.335 0 0 0 18.667 2H5.333A3.335 3.335 0 0 0 2 5.333v13.334A3.335 3.335 0 0 0 5.333 22h6.654v-6.66L10 15.333V12l1.993.007L12 9.333c0-1.04.747-2.666 2.667-2.666h.253c3.1 0 3.047.006 3.047.006v3.334H15.94s-.64.006-.64.666v1.334L17.333 12v3.333h-2V22h3.334A3.335 3.335 0 0 0 22 18.667V5.333z" />
</symbol>
<symbol id="twitter" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15.583 3c-2.485 0-4.511 2.196-4.511 4.903v.151c-2.547-.374-4.9-1.807-6.545-4.01a.653.653 0 0 0-.541-.28l-.056.006a.666.666 0 0 0-.548.368 5.225 5.225 0 0 0-.604 2.448c0 .799.18 1.57.507 2.253a.71.71 0 0 0-.534.691v.065c0 1.44.583 2.765 1.526 3.68l-.013.007a.763.763 0 0 0-.146.698c.402 1.375 1.332 2.462 2.505 3.01a6.371 6.371 0 0 1-3.019.748c-.277 0-.555-.014-.833-.05l-.083-.007a.698.698 0 0 0-.645.468.74.74 0 0 0 .264.85C4.173 20.308 6.332 21 8.546 21c4.358 0 7.078-2.246 8.598-4.133 1.881-2.333 2.964-5.429 2.964-8.481v-.202a8.908 8.908 0 0 0 1.783-2.117.748.748 0 0 0-.062-.864.68.68 0 0 0-.52-.245c-.042 0-.084.008-.133.015.111-.238.209-.483.278-.735a.744.744 0 0 0-.236-.784.665.665 0 0 0-.423-.152.615.615 0 0 0-.361.116 6.58 6.58 0 0 1-1.846.828A4.31 4.31 0 0 0 15.583 3z" />
</symbol>
<symbol id="youtube" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10 16.5v-9l6 4.5-6 4.5zM20 4.4c-.6-.2-4.3-.4-8-.4s-7.4.19-8 .38C2.44 4.9 2 8.4 2 12c0 3.59.44 7.1 2 7.61.6.2 4.3.39 8 .39s7.4-.19 8-.39c1.56-.51 2-4.02 2-7.61 0-3.6-.44-7.09-2-7.6z" />
</symbol>
<symbol id="google-plus" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M22 11.455h-1.818V9.636h-1.818v1.819h-1.819v1.818h1.819v1.818h1.818v-1.818H22v-1.818zm-13.636 0v2.181H12c-.182.91-1.09 2.728-3.636 2.728-2.182 0-3.91-1.819-3.91-4 0-2.182 1.728-4 3.91-4 1.272 0 2.09.545 2.545 1l1.727-1.637C11.546 6.637 10.091 6 8.364 6A6.324 6.324 0 0 0 2 12.364a6.324 6.324 0 0 0 6.364 6.363c3.636 0 6.09-2.545 6.09-6.182 0-.454 0-.727-.09-1.09h-6z" />
</symbol>
<symbol id="bold" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M16.507 10.556A4.98 4.98 0 0 0 18 7c0-2.757-2.243-5-5-5H4v2h2v16H4v2h10c3.309 0 6-2.691 6-6a6.004 6.004 0 0 0-3.493-5.444zM13 4c1.654 0 3 1.346 3 3s-1.346 3-3 3H8V4h5zm1 16H8v-8h6c2.206 0 4 1.794 4 4s-1.794 4-4 4z" />
</symbol>
<symbol id="italic" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M21 4V2H11v2h3.461l-7.11 16H3v2h10v-2H9.539l7.11-16z" />
</symbol>
<symbol id="underline" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M4 20h16v2H4v-2zM14 2v2h2v8c0 2.206-1.794 4-4 4s-4-1.794-4-4V4h2V2H4v2h2v8c0 3.309 2.691 6 6 6s6-2.691 6-6V4h2V2h-6z" />
</symbol>
<symbol id="format-quote" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M18.857 18H15.43l-2.286-4.4V7H20v6.6h-3.429l2.286 4.4zm-9.143 0H6.286L4 13.6V7h6.857v6.6H7.43L9.714 18z" />
</symbol>
<symbol id="code" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" />
</symbol>
<symbol id="list-bullets" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M5 2c1.654 0 3 1.346 3 3S6.654 8 5 8 2 6.655 2 5s1.346-3 3-3zm0 4a1.001 1.001 0 0 0 0-2c-.551 0-1 .449-1 1 0 .551.449 1 1 1zm0 3c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0 4a1.001 1.001 0 0 0 0-2c-.551 0-1 .449-1 1 0 .551.449 1 1 1zm0 3c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0 4a1.001 1.001 0 0 0 0-2c-.551 0-1 .449-1 1 0 .551.449 1 1 1zm5-2h12v2H10v-2zm0-14h12v2H10V4zm0 7h12v2H10v-2z" />
</symbol>
<symbol id="list-numbers" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M8 4h14v2H8V4zm0 7h14v2H8v-2zm0 7h14v2H8v-2zM4.32 3.869l-.547.546L3 3.642l1.48-1.481a.544.544 0 0 1 .596-.119.55.55 0 0 1 .338.506V7.47H4.32V3.869zM4.5 9c.828 0 1.5.673 1.5 1.5 0 .738-.739 1.766-1.362 2.5H6v1H3.5a.497.497 0 0 1-.461-.309.499.499 0 0 1 .108-.545c.891-.892 1.854-2.157 1.854-2.646A.501.501 0 0 0 4 10.5v.5H3v-.5C3 9.673 3.673 9 4.5 9zm0 7.442a1.502 1.502 0 0 1 1.117 2.5 1.502 1.502 0 0 1-1.117 2.5H3.001l-.001-1h1.5a.5.5 0 0 0 0-1H4v-1h.5a.5.5 0 0 0 0-1l-1.499.001-.001-1 1.5-.001z" />
</symbol>
<symbol id="list-add" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M17.5 18H15v2h2.5v2.5h2V20H22v-2h-2.5v-2.5h-2V18zM3 6c-.551 0-1-.449-1-1a1.001 1.001 0 1 1 1 1zm0 7c-.551 0-1-.449-1-1a1.001 1.001 0 1 1 1 1zm0 7c-.551 0-1-.449-1-1a1.001 1.001 0 1 1 1 1zm3-2h7v2H6v-2zM6 4h16v2H6V4zm0 7h16v2H6v-2z" />
</symbol>
<symbol id="insert-image" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM8.5 14.5l2.5 3.01L14.5 13l4.5 6H5l3.5-4.5z" />
</symbol>
<symbol id="link" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M3.503 16.146l-.701-.703a2.99 2.99 0 0 1 0-4.219l8.426-8.436c1.124-1.127 3.088-1.127 4.214 0l.7.703-1.402 1.405-.702-.703a.988.988 0 0 0-.704-.291.982.982 0 0 0-.702.291L4.205 12.63a.997.997 0 0 0 0 1.407l.702.703-1.404 1.406zm17.556-7.732c.562.563.871 1.313.871 2.11 0 .796-.31 1.545-.871 2.107l-8.427 8.437a2.957 2.957 0 0 1-2.106.874c-.796 0-1.544-.31-2.107-.874l-.702-.703L9.12 18.96l.702.703c.375.375 1.03.375 1.405 0l8.426-8.438a.99.99 0 0 0 .29-.702.986.986 0 0 0-.29-.703l-.703-.703 1.404-1.406.704.703zm-1.4-5.625l1.404 1.405-7.032 7.03-1.404-1.404 7.031-7.03zm-9.832 9.842l1.404 1.404-7.03 7.033-1.405-1.404 7.031-7.033z" />
</symbol>
<symbol id="format-size" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M21.167 9c.46 0 .833.373.833.833v2.5h-1.667v-1.666h-1.666V19h1.666v1.667h-5V19H17v-8.333h-1.667v1.666h-1.666v-2.5c0-.46.373-.833.833-.833h6.667zM9.5 5.667V19H12v1.667H5.333V19h2.5V5.667H3.667v1.666H2v-2.5c0-.46.373-.833.833-.833H14.5c.46 0 .833.373.833.833v2.5h-1.666V5.667H9.5z" />
</symbol>
<symbol id="color" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M7.2 3l-4.845 8.391a2.624 2.624 0 0 0-.264 2.005c.184.682.62 1.253 1.232 1.604L7.9 17.643a2.645 2.645 0 0 0 3.61-.967l2.95-5.11 4.084-2.018L7.2 3zm6 7.225l-3.217 5.57a.901.901 0 0 1-1.203.323l-4.577-2.643a.875.875 0 0 1-.41-.534.875.875 0 0 1 .088-.669l3.964-6.865 6.966 4.02-1.61.798zm5.68 1.132c.682 1.088 3.123 4.817 3.123 6.46a3.127 3.127 0 0 1-3.124 3.123 3.127 3.127 0 0 1-3.123-3.124c0-1.647 2.46-5.4 3.123-6.46zm0 7.821c.75 0 1.361-.61 1.361-1.362 0-.443-.62-1.763-1.362-3.08-.741 1.317-1.362 2.637-1.362 3.08 0 .752.61 1.362 1.362 1.362z" />
</symbol>
<symbol id="strike-through" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M21 11v2h-5.025A4.954 4.954 0 0 1 17 16c0 2.757-2.243 5-5 5H8a1 1 0 0 1-1-1v-2h2v1h3c1.654 0 3-1.346 3-3s-1.346-3-3-3H3v-2h18zM9.185 9H7.101A5.006 5.006 0 0 1 12 3h3a1 1 0 0 1 1 1v2h-2V5h-2c-1.654 0-3 1.346-3 3 0 .352.072.686.185 1z" />
</symbol>
<symbol id="gist" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M6 3a3 3 0 0 1 3 3c0 1.29-.81 2.39-1.96 2.81.54 5 5.04 5.96 7.15 6.15A2.985 2.985 0 0 1 17 13a3 3 0 0 1 0 6c-1.31 0-2.43-.84-2.84-2-4.25-.2-5.72-1.81-7.16-3.61v1.78c1.17.41 2 1.52 2 2.83a3 3 0 0 1-6 0c0-1.31.83-2.42 2-2.83V8.83A2.99 2.99 0 0 1 3 6a3 3 0 0 1 3-3zm0 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0 12a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm11-2a1 1 0 1 0 0 2 1 1 0 0 0 0-2z" />
</symbol>
<symbol id="insert-emoticon" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" />
</symbol>
<symbol id="bbcode" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15,4V6H18V18H15V20H20V4M4,4V20H9V18H6V6H9V4H4z" />
</symbol>
<symbol id="replies" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M17.998 22v-4h2c1.103 0 2-.897 2-2V4c0-1.104-.897-2-2-2h-16c-1.103 0-2 .896-2 2v12c0 1.103.897 2 2 2h8.667l5.333 4zm2-18v12h-4v2l-2.667-2H3.998V4h16zm-2 2h-12v2h12V6zm0 3h-12v2h12V9zm-4 3h-8v2h8v-2z" />
</symbol>
<symbol id="important" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
</symbol>
<symbol id="foe" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z" />
</symbol>
<symbol id="more-h" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M5 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm7 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" />
</symbol>
<symbol id="more-v" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 7.001a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" />
</symbol>
<symbol id="close" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-.003 16H5V5h14l-.003 14zm-9.583-3.586l2.293-2.293L14 15.414 15.414 14l-2.293-2.293 2.293-2.293L14 8l-2.293 2.293L9.414 8 8 9.414l2.293 2.293L8 14l1.414 1.414z" />
</symbol>
<symbol id="top" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 3H5c-1.104 0-2 .898-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5c0-1.102-.896-2-2-2zM5 19V5h13.997L19 19H5zm7-10c-.247 0-.482.1-.64.27l-4.167 4.5a.692.692 0 0 0-.115.798.846.846 0 0 0 .755.432h8.334a.845.845 0 0 0 .755-.432.69.69 0 0 0-.116-.798l-4.167-4.5A.872.872 0 0 0 12 9zm-2.387 4.5L12 10.922l2.388 2.579H9.613V13.5z" />
</symbol>
<symbol id="mark" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M18.998 14H21v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9v2H5v14h13.997l.001-5zm-7.635 2.652L7 11.725l1.565-1.768 2.722 3.074L19.362 3 21 4.682l-9.637 11.97z" />
</symbol>
<symbol id="expand" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 3.001H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-14a2 2 0 0 0-2-2zm-.003 16H5v-14h14l-.003 14zm-7.997-2h2v-4h4v-2h-4v-4h-2v4H7v2h4v4z" />
</symbol>
<symbol id="collapse" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14c0 1.103-.896 2-2 2zM5 5h14l-.003 14H5V5zm2 6v2h10v-2H7z" />
</symbol>
<symbol id="pages" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M18 22H3a1 1 0 0 1-1-1V6h2v14h14v2zm3-4H7a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1zM8 16h12V4H8v12z" />
</symbol>
<symbol id="thumbs-up" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M21.779 8.359A.936.936 0 0 0 21.048 8h-5.715V4c0-.552-.425-1-.952-1h-2.857a.952.952 0 0 0-.875.605L8.039 10h-.325c0-.552-.425-1-.952-1h-3.81C2.426 9 2 9.448 2 10v10c0 .552.426 1 .952 1h3.81c.527 0 .952-.448.952-1v-.522l3.456 1.451a.912.912 0 0 0 .354.071h7.619c.46 0 .854-.346.937-.821l1.905-11a1.041 1.041 0 0 0-.206-.82zM5.809 19H3.906v-8H5.81v8zm12.54 0h-6.642l-3.993-1.677V12h.953a.951.951 0 0 0 .875-.606L12.152 5h1.277v4c0 .552.425 1 .952 1h5.526l-1.558 9z" />
</symbol>
<symbol id="thumbs-down" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M21.048 3h-3.81c-.527 0-.952.448-.952 1v.522L12.83 3.071A.912.912 0 0 0 12.476 3H4.857c-.46 0-.854.346-.937.821l-1.905 11c-.05.292.026.592.207.819.18.227.448.36.73.36h5.715v4c0 .552.425 1 .952 1h2.857a.951.951 0 0 0 .875-.606L15.961 14h.325c0 .552.425 1 .952 1h3.81c.526 0 .952-.448.952-1V4c0-.552-.426-1-.952-1zm-5.715 9a.952.952 0 0 0-.875.605L11.848 19h-1.277v-4c0-.552-.425-1-.952-1H4.093l1.558-9h6.642l3.993 1.678V12h-.953zm4.762 1H18.19V5h1.905v8z" />
</symbol>
<symbol id="attach" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15.636 6.545V17A3.635 3.635 0 0 1 12 20.636 3.635 3.635 0 0 1 8.364 17V5.636a2.274 2.274 0 0 1 4.545 0v9.546c0 .5-.409.909-.909.909s-.91-.41-.91-.91V6.546H9.728v8.637a2.274 2.274 0 0 0 4.546 0V5.636A3.635 3.635 0 0 0 10.636 2 3.635 3.635 0 0 0 7 5.636V17c0 2.764 2.236 5 5 5s5-2.236 5-5V6.545h-1.364z" />
</symbol>
<symbol id="topic-deleted" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M21.872 18.503A1.005 1.005 0 0 1 21 19.996h-5V22l-4-3.006 4-3.005v2.003h3.29l-2.545-4.534 1.743-.982 3.384 6.027zM12 5.008L9.46 9.534l-1.744-.982 3.413-6.079c.354-.63 1.39-.63 1.743 0l2.923 5.207 1.634-.99-.497 4.988-4.637-1.874 1.788-1.085L12 5.01zM6.537 14.74L4.71 17.992H11v2.004H3a1.001 1.001 0 0 1-.872-1.493l2.628-4.68-1.78-.916 4.5-2.19.837 4.937-1.776-.914z" />
</symbol>
<symbol id="reported" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M21 22H3a1.003 1.003 0 0 1-.895-1.448l9-18c.339-.677 1.45-.677 1.789 0l9 18A1.003 1.003 0 0 1 21 22zM4.618 20L12 5.237 19.382 20H4.618zM12 19.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5zM11 10v6h2v-6h-2z" />
</symbol>
<symbol id="unapproved" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M13,17H11V15H13V17M13,13H11V7H13V13Z" />
</symbol>
<symbol id="approved" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z" />
</symbol>
<symbol id="last-page" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M6 7.41L10.59 12 6 16.59 7.41 18l6-6-6-6L6 7.41zM16.41 6h2v12h-2V6z" />
</symbol>
<symbol id="poll" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z" />
</symbol>
<symbol id="sort" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M9.34 5.25L12.59 2l3.25 3.25h-6.5zm6.5 14l-3.25 3.25-3.25-3.25h6.5zm-6.86-4.7H6.09l-.72 2.7H3l3.09-10h3l3.13 10H9.76l-.78-2.7zm-2.56-1.62h2.23l-.63-2.12-.26-.97-.25-.96h-.03l-.22.97-.24.98-.6 2.1zm6.72 4.32v-1.26l4.75-6.77v-.06h-4.3V7.25h7.23v1.34l-4.64 6.66v.08h4.71v1.92h-7.75z" />
</symbol>
<symbol id="filter" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z" />
</symbol>
<symbol id="order" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10,13V11H18V13H10M10,19V17H14V19H10M10,7V5H22V7H10M6,17H8.5L5,20.5L1.5,17H4V7H1.5L5,3.5L8.5,7H6V17Z" />
</symbol>
<symbol id="redirect" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M14 4l2.29 2.29-2.88 2.88 1.42 1.42 2.88-2.88L20 10V4zm-4 0H4v6l2.29-2.29 4.71 4.7V20h2v-8.41l-5.29-5.3z" />
</symbol>
<symbol id="time" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M11.99 2C17.52 2 22 6.48 22 12s-4.48 10-10.01 10C6.47 22 2 17.52 2 12S6.47 2 11.99 2zM12 20c4.42 0 8-3.58 8-8s-3.58-8-8-8-8 3.58-8 8 3.58 8 8 8zm.5-13v5.25l4.5 2.67-.75 1.23L11 13V7h1.5z" />
</symbol>
<symbol id="views" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 8.5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM12 4c5 0 9.27 3.11 11 7.5-1.73 4.39-6 7.5-11 7.5s-9.27-3.11-11-7.5C2.73 7.11 7 4 12 4zm-8.82 7.5a9.821 9.821 0 0 0 17.64 0 9.821 9.821 0 0 0-17.64 0z" />
</symbol>
<symbol id="trash" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
</symbol>
<symbol id="cake" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 6c1.11 0 2-.9 2-2 0-.38-.1-.73-.29-1.03L12 0l-1.71 2.97c-.19.3-.29.65-.29 1.03 0 1.1.9 2 2 2zm4.6 9.99l-1.07-1.07-1.08 1.07c-1.3 1.3-3.58 1.31-4.89 0l-1.07-1.07-1.09 1.07C6.75 16.64 5.88 17 4.96 17c-.73 0-1.4-.23-1.96-.61V21c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-4.61c-.56.38-1.23.61-1.96.61-.92 0-1.79-.36-2.44-1.01zM18 9h-5V7h-2v2H6c-1.66 0-3 1.34-3 3v1.54c0 1.08.88 1.96 1.96 1.96.52 0 1.02-.2 1.38-.57l2.14-2.13 2.13 2.13c.74.74 2.03.74 2.77 0l2.14-2.13 2.13 2.13c.37.37.86.57 1.38.57 1.08 0 1.96-.88 1.96-1.96V12C21 10.34 19.66 9 18 9z" />
</symbol>
<symbol id="location" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z" />
</symbol>
<symbol id="stats" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M16.18,19.6L14.17,16.12C15.15,15.4 15.83,14.28 15.97,13H20C19.83,15.76 18.35,18.16 16.18,19.6M13,7.03V3C17.3,3.26 20.74,6.7 21,11H16.97C16.74,8.91 15.09,7.26 13,7.03M7,12.5C7,13.14 7.13,13.75 7.38,14.3L3.9,16.31C3.32,15.16 3,13.87 3,12.5C3,7.97 6.54,4.27 11,4V8.03C8.75,8.28 7,10.18 7,12.5M11.5,21C8.53,21 5.92,19.5 4.4,17.18L7.88,15.17C8.7,16.28 10,17 11.5,17C12.14,17 12.75,16.87 13.3,16.62L15.31,20.1C14.16,20.68 12.87,21 11.5,21z" />
</symbol>
<symbol id="contact-us" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M4,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4M12,11L20,6H4L12,11M4,18H20V8.37L12,13.36L4,8.37V18z" />
</symbol>
<symbol id="add" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M20 8h-4V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v4H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2zm0 6h-6l-.003 6H10v-6H4v-4h6V4h4v6h6v4z" />
</symbol>
<symbol id="add-full" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
</symbol>
<symbol id="down" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 16c-.297 0-.578-.133-.768-.359l-5-6A1.001 1.001 0 0 1 7 8h10a1 1 0 0 1 .767 1.64l-5 6A1 1 0 0 1 12 16zm-2.865-6L12 13.437l2.865-3.438h-5.73V10z" />
</symbol>
<symbol id="forward" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.707 2.293l9 9a.999.999 0 0 1 0 1.414l-9 9A1 1 0 0 1 11 21v-4H3a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h8V3a1.002 1.002 0 0 1 1.707-.707zM13 8a1 1 0 0 1-1 1H4v6h8a1 1 0 0 1 1 1v2.586L19.586 12 13 5.414V8z" />
</symbol>
<symbol id="lock" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M17 11a2 2 0 0 1 2 2v7c0 1.103-.896 2-2 2H7c-1.104 0-2-.897-2-2v-7a2 2 0 0 1 2-2V7c0-2.757 2.243-5 5-5s5 2.243 5 5v4zM9 7v4h6V7c0-1.654-1.346-3-3-3S9 5.346 9 7zM7 20h10.002L17 13H7v7zm5-2a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z" />
</symbol>
<symbol id="reply" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M21 19H10a1 1 0 0 1-.707-1.707l3.51-3.509A3.994 3.994 0 0 0 9 11a4.005 4.005 0 0 0-4 3.998V15a1 1 0 1 1-2 0v-.005C3.002 10.035 7.039 6 12 6c2.297 0 4.482.879 6.144 2.442l2.149-2.149A1.001 1.001 0 0 1 22 7v11a1 1 0 0 1-1 1zm-8.586-2H20V9.414l-1.169 1.168a1.002 1.002 0 0 1-1.474-.065 6.975 6.975 0 0 0-9.019-1.481 5.995 5.995 0 0 1 6.554 4.875c.06.323-.044.656-.276.889L12.414 17z" />
</symbol>
<symbol id="send" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M2,21L23,12L2,3V10L17,12L2,14V21z" />
</symbol>
<symbol id="sort" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M3 13h12v-2H3v2zm0-7v2h18V6H3zm0 12h6v-2H3v2z" />
</symbol>
<symbol id="wrench" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 9a7.007 7.007 0 0 0-4.666-6.593L13 1.934V8a1 1 0 0 1-2 0V1.934l-1.334.473A7.007 7.007 0 0 0 5 9c0 2.786 1.639 5.188 4 6.315V22h2v-6h2v6h2v-6.685c2.361-1.127 4-3.53 4-6.315zm-7 5c-2.757 0-5-2.243-5-5 0-1.595.766-3.065 2-3.993V8c0 1.654 1.346 3 3 3s3-1.346 3-3V5.006c1.234.928 2 2.398 2 3.994 0 2.756-2.243 5-5 5z" />
</symbol>
<symbol id="post-menu" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm-3.75-6.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5zm4 0a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5zm4 0a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5z" />
</symbol>
<symbol id="edit" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 22C6.486 22 2 17.513 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10zm0-18c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm-3.293 8.535L8 16.071l3.535-.707-2.828-2.829zm4.95-4.95l-4.243 4.242 2.828 2.829 4.243-4.243a2 2 0 1 0-2.828-2.828z" />
</symbol>
<symbol id="delete" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2.001c-5.514 0-10 4.486-10 10s4.486 10 10 10 10-4.486 10-10-4.486-10-10-10zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm2.293-11.707L12 10.587 9.707 8.294 8.293 9.708l2.293 2.293-2.293 2.293 1.414 1.414L12 13.415l2.293 2.293 1.414-1.414-2.293-2.293 2.293-2.293-1.414-1.414z" />
</symbol>
<symbol id="info" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 22C6.486 22 2 17.515 2 12 2 6.487 6.486 2 12 2s10 4.486 10 10c0 5.515-4.486 10-10 10zm0-18c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm1 11v-4a1 1 0 0 0-1-1h-2v2h1v3H9v2h6v-2h-2zm-1-5.75a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5z" />
</symbol>
<symbol id="report" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 22C6.486 22 2 17.515 2 12 2 6.486 6.486 2 12 2s10 4.486 10 10c0 5.515-4.486 10-10 10zm0-18c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm-1 2v7h2V6h-2zm1 11.25a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5z" />
</symbol>
<symbol id="warn" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 22C6.486 22 2 17.513 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10zm0-18c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm4.926 11.013L12.55 7.29c-.219-.385-.883-.385-1.101 0l-4.376 7.724a.57.57 0 0 0 .014.586c.113.18.317.29.537.29h8.75c.22 0 .424-.11.537-.29a.57.57 0 0 0 .014-.586zm-4.901-.763a.625.625 0 1 1 0-1.25.625.625 0 0 1 0 1.25zM11.4 9.5h1.25V12H11.4V9.5z" />
</symbol>
<symbol id="quote" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 22C6.486 22 2 17.513 2 12S6.486 2 12 2s10 4.486 10 10-4.486 10-10 10zm0-18c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8zm3.45 11.5l-1.3-2.6h1.95V9h-3.9v3.9l1.3 2.6h1.95zm-5.2 0l-1.3-2.6h1.95V9H7v3.9l1.3 2.6h1.95z" />
</symbol>
<symbol id="subscribe" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8.429 13L7 12.161l1.007-1.082 2.564 2.748L15.993 8 17 9.09 10.571 16z" />
</symbol>
<symbol id="unsubscribe" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 5v14H5V5h14zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" />
</symbol>
<symbol id="bump" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15.066 15.95A4.978 4.978 0 0 1 12 17v-1.875a3.1 3.1 0 0 0 1.723-.518l1.343 1.343zm.884-.884l-1.343-1.343A3.11 3.11 0 0 0 15.125 12H17c0 1.155-.392 2.22-1.05 3.066zm-5.2 1.776a5.002 5.002 0 0 1-1.96-8.676L7.626 7h3.75v3.75l-1.25-1.25a3.126 3.126 0 0 0 .625 5.365v1.977zm6.092-6.092h-1.977a3.136 3.136 0 0 0-.99-1.25l1.334-1.334a5.001 5.001 0 0 1 1.633 2.584zM19 3c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14zm0 2H5v14h14V5z" />
</symbol>
<symbol id="download" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 21H5c-1.104 0-2-.898-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14c0 1.102-.896 2-2 2zM5 5h14l-.003 14H5V5zm7 13l5-5h-3V7h-4v6H7l5 5z" />
</symbol>
<symbol id="bookmark" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 5v14H5V5h14zm0-2c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14zm-3 13.09V7.91c0-.504-.447-.91-1-.91H9c-.553 0-1 .406-1 .91v8.18c0 .368.244.7.617.84.374.14.803.064 1.09-.196L12 14.649l2.293 2.085a1.08 1.08 0 0 0 1.09.196c.373-.14.617-.472.617-.84zM10 9h4v4.586l-1.293-1.062a1.118 1.118 0 0 0-.707-.24c-.256 0-.512.08-.707.24L10 13.586V9z" />
</symbol>
<symbol id="unbookmark" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 5v14H5V5h14zm0-2c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14zm-3 13.09V7.91c0-.504-.447-.91-1-.91H9c-.553 0-1 .406-1 .91v8.18c0 .368.244.7.617.84.374.14.803.064 1.09-.196L12 14.649l2.293 2.085a1.08 1.08 0 0 0 1.09.196c.373-.14.617-.472.617-.84z" />
</symbol>
<symbol id="send-email" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 5v14H5V5h14zm0-2c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14zm-6.665 9.67a.744.744 0 0 1-.67.001L7 10.338V14a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3.661l-4.665 2.331zM12 11.162l4.629-2.315A1.99 1.99 0 0 0 15 8H9c-.674 0-1.267.335-1.629.846L12 11.162z" />
</symbol>
<symbol id="print" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 5v14H5V5h14zm0-2c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h14zm-1.997 5.5c0-.827-.673-1.5-1.5-1.5h-1v1H9.5V7h-1C7.673 7 7 7.673 7 8.5v4.502h1.5v4.168h7.003v-4.168h1.5V8.501zm-2.5 7.502H9.5v-4h5.002v4zm-4.293-.585h3.502V14.25H10.21v1.167zm0-1.75h3.502V12.5H10.21v1.167zm5.793-1.666h-.5v-1H8.5v1H8V8.5a.5.5 0 0 1 .5-.5v1h7.002V8a.5.5 0 0 1 .5.5V12z" />
</symbol>
<symbol id="upload" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M19 3H5c-1.104 0-2 .898-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5c0-1.102-.896-2-2-2zM5 19V5h13.997L19 19H5zm7-13l-5 5h3v6h4v-6h3l-5-5z" />
</symbol>
<symbol id="chevron-down" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M16.59 8L12 12.58 7.41 8 6 9.41l6 6 6-6z" />
</symbol>
<symbol id="chevron-up" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 9l-6 6 1.41 1.41L12 11.83l4.59 4.58L18 15z" />
</symbol>
<symbol id="chevron-left" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
</symbol>
<symbol id="chevron-right" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10.41 6L9 7.41 13.58 12 9 16.59 10.41 18l6-6z" />
</symbol>
<symbol id="topic-alert" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M21.894 20.508l-9-18c-.339-.677-1.45-.677-1.789 0l-9 18A.999.999 0 0 0 3 21.955h18c.347 0 .668-.18.851-.474.182-.296.198-.662.044-.973zM11 9.955h2v6h-2v-6zm1 9.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z" />
</symbol>
<symbol id="topic-fire" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0 4c1.334 5.333-1.6 7-1.6 7v-2.706C9.034 10.888 8 12.322 8 14a4 4 0 1 0 8 0c0-2.06 0-4-4-8z" />
</symbol>
<symbol id="topic-heart" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2C6.486 2 2 6.486 2 12c0 5.515 4.486 10 10 10s10-4.485 10-10c0-5.514-4.486-10-10-10zm0 15s-5-3-5-6c0-1.655 1-2.999 3-2.999 1 0 2 .999 2 1.999 0-1 1-1.999 2-1.999 2 0 3 1.344 3 2.999 0 3-5 6-5 6z" />
</symbol>
<symbol id="topic-info" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2C6.486 2 2 6.487 2 12c0 5.515 4.486 10 10 10s10-4.485 10-10c0-5.513-4.486-10-10-10zm0 4.751a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM15 17H9v-2h2v-3h-1v-2h2a1 1 0 0 1 1 1v4h2v2z" />
</symbol>
<symbol id="topic-question" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2C6.486 2 2 6.487 2 12c0 5.515 4.486 10 10 10s10-4.485 10-10c0-5.513-4.486-10-10-10zm0 16.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm1-4.375V15h-2v-3h1a2 2 0 1 0-2-2H8c0-2.205 1.795-4 4-4s4 1.795 4 4a4.01 4.01 0 0 1-3 3.875z" />
</symbol>
<symbol id="topic-radioactive" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zM8.67 6.232l2.085 3.61A2.49 2.49 0 0 0 9.5 12H5.333A6.655 6.655 0 0 1 8.67 6.232zM12 18.666c-1.215 0-2.35-.33-3.33-.898l2.085-3.613c.367.213.79.344 1.245.344.456 0 .877-.13 1.245-.344l2.086 3.613a6.627 6.627 0 0 1-3.331.898zm2.5-6.667a2.49 2.49 0 0 0-1.255-2.157l2.086-3.61a6.655 6.655 0 0 1 3.336 5.767H14.5z" />
</symbol>
<symbol id="topic-star" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2C6.486 2 2 6.486 2 12c0 5.515 4.486 10 10 10s10-4.485 10-10c0-5.514-4.486-10-10-10zm4.285 15.5L12 14.665 7.714 17.5l1.994-4.584L6 9.786h4.285L12 5.5l1.714 4.286H18l-3.708 3.13 1.993 4.584z" />
</symbol>
<symbol id="forum" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2.001c-5.514 0-10 4.486-10 10s4.486 10 10 10 10-4.486 10-10-4.486-10-10-10zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zM10.998 9v2h6V9h-6zm0 4v2h6v-2h-6zm-3-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
</symbol>
<symbol id="forum-sub" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M21.897 13.441a6.003 6.003 0 0 0-1.904-1.1 7.68 7.68 0 0 0 .007-.34c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8c.114 0 .228-.002.34-.007a6.003 6.003 0 0 0 1.102 1.903 9.95 9.95 0 0 1-1.442.104c-5.514 0-10-4.486-10-10s4.486-10 10-10 10 4.486 10 10c0 .489-.035.97-.103 1.44zM14.687 13a6.047 6.047 0 0 0-1.882 2h-1.807v-2h3.689zm-3.689-4h6v2h-6V9zm-3 2a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM18 22c-2.206 0-4-1.794-4-4 0-2.205 1.794-4 4-4s4 1.795 4 4c0 2.206-1.794 4-4 4zm0-6c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z" />
</symbol>
<symbol id="forum-locked" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0 18c4.411 0 8-3.589 8-8s-3.589-8-8-8-8 3.589-8 8 3.589 8 8 8zm-.002-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6zm0 2c-2.206 0-4 1.795-4 4 0 .739.215 1.424.567 2.018l5.452-5.452A3.959 3.959 0 0 0 11.998 8zm0 8c2.206 0 4-1.795 4-3.999 0-.74-.215-1.424-.567-2.02l-5.452 5.453c.595.351 1.28.566 2.019.566z" />
</symbol>
<symbol id="forum-link" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10S2 17.514 2 12 6.486 2 12 2zm0 18c4.411 0 8-3.589 8-8s-3.589-8-8-8-8 3.589-8 8 3.589 8 8 8zm5.181-9.89c.283.283.426.672.403 1.094a1.757 1.757 0 0 1-.523 1.144l-4.711 4.717c-.315.315-.72.5-1.143.524a1.415 1.415 0 0 1-1.093-.404l-.353-.353 1.055-1.055.14.158c.19.189.536.17.746-.04l4.195-4.194a.587.587 0 0 0 .173-.38.47.47 0 0 0-.133-.366l-.15-.149 1.041-1.049.353.353zM6.82 13.89a1.417 1.417 0 0 1-.403-1.094 1.76 1.76 0 0 1 .523-1.144l4.711-4.717c.315-.315.72-.5 1.143-.524.423-.022.81.121 1.093.404l.353.353-1.055 1.055-.14-.158c-.19-.189-.536-.17-.746.04l-4.195 4.194a.587.587 0 0 0-.173.38.47.47 0 0 0 .133.366l.15.149-1.041 1.049-.353-.353zm3.349-1.056l.998.998-3.334 3.334-.998-.998 3.334-3.334zm6-6l.998.998-3.334 3.334-.998-.998 3.334-3.334z" />
</symbol>
<symbol id="topic-move" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M11.664 13l-1.836-1.836 1.415-1.414 4.242 4.243-4.242 4.242-1.415-1.414L11.65 15H4v-2h7.664zM4 17h2v3h12.001L18 8h-4V4H6v7H4V4c0-1.102.897-2 2-2h9.414L20 6.586V20c0 1.103-.897 2-2 2H6c-1.103 0-2-.897-2-2v-3z" />
</symbol>
<symbol id="announce" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15.414 2L20 6.586V20c0 1.103-.897 2-2 2H6c-1.103 0-2-.897-2-2V4c0-1.102.897-2 2-2h9.414zm2.587 18L18 8h-4V4H6v16h12.001zM11 14h2v4h-2v-4zm1-1.5a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z" />
</symbol>
<symbol id="announce-locked" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M14 20H6V4h8v4h4v4h2V6.586L15.414 2H6c-1.103 0-2 .898-2 2v16c0 1.103.897 2 2 2h11.5H14v-2zm7.4-3.538C21.4 15.104 20.323 14 19 14s-2.4 1.104-2.4 2.462c-.332 0-.6.275-.6.615v4.308c0 .34.268.615.6.615h4.8c.332 0 .6-.276.6-.615v-4.308a.608.608 0 0 0-.6-.615zM19 15.23c.662 0 1.2.551 1.2 1.23h-2.4c0-.679.538-1.23 1.2-1.23zm1.8 5.538h-3.6v-3.077h3.6v3.077zM11 14h2v4h-2v-4zm1-1.5a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z" />
</symbol>
<symbol id="announce-mine" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10 2h5.414L20 6.586V20c0 1.103-.897 2-2 2H6c-1.103 0-2-.897-2-2V10h2v10h12.001L18 8h-4V4h-4V2zM4.182 5.816L2 4.998l2.182-.818L5 1.998l.818 2.182L8 4.998l-2.182.817L5 7.998l-.818-2.183zM11 14h2v4h-2v-4zm1-1.5a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z" />
</symbol>
<symbol id="announce-locked-mine" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10 4h4v4h4v4h2V6.586L15.414 2H10v2zm-4 6v10h8v2h3.5H6c-1.103 0-2-.897-2-2V10h2zm15.4 6.462c.332 0 .6.275.6.615v4.308c0 .34-.268.615-.6.615h-4.8a.608.608 0 0 1-.6-.615v-4.308c0-.34.268-.615.6-.615C16.6 15.104 17.677 14 19 14s2.4 1.104 2.4 2.462zM19 15.23c-.662 0-1.2.551-1.2 1.23h2.4c0-.679-.538-1.23-1.2-1.23zm1.8 5.538v-3.077h-3.6v3.077h3.6zM4.182 5.816L2 4.998l2.182-.818L5 1.998l.818 2.182L8 4.998l-2.182.817L5 7.998l-.818-2.183zM11 14h2v4h-2v-4zm1-1.5a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z" />
</symbol>
<symbol id="sticky" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15.414 2L20 6.586V20c0 1.103-.897 2-2 2H6c-1.103 0-2-.897-2-2V4c0-1.102.897-2 2-2h9.414zm2.587 18L18 8h-4V4H6v16h12.001zM12 10l1.143 2.857H16l-2.472 2.087L14.857 18 12 16.11 9.143 18l1.329-3.056L8 12.857h2.857L12 10z" />
</symbol>
<symbol id="sticky-locked" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M14 20H6V4h8v4h4v4h2V6.586L15.414 2H6c-1.103 0-2 .898-2 2v16c0 1.103.897 2 2 2h11.5H14v-2zm7.4-3.538C21.4 15.104 20.323 14 19 14s-2.4 1.104-2.4 2.462c-.332 0-.6.275-.6.615v4.308c0 .34.268.615.6.615h4.8c.332 0 .6-.276.6-.615v-4.308a.608.608 0 0 0-.6-.615zM19 15.23c.662 0 1.2.551 1.2 1.23h-2.4c0-.679.538-1.23 1.2-1.23zm1.8 5.538h-3.6v-3.077h3.6v3.077zM12 10l1.143 2.857H16l-2.472 2.087L14.857 18 12 16.11 9.143 18l1.329-3.056L8 12.857h2.857L12 10z" />
</symbol>
<symbol id="sticky-mine" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10 2h5.414L20 6.586V20c0 1.103-.897 2-2 2H6c-1.103 0-2-.897-2-2V10h2v10h12.001L18 8h-4V4h-4V2zM4.182 5.816L2 4.998l2.182-.818L5 1.998l.818 2.182L8 4.998l-2.182.817L5 7.998l-.818-2.183zM12 10l1.143 2.857H16l-2.472 2.087L14.857 18 12 16.11 9.143 18l1.329-3.056L8 12.857h2.857L12 10z" />
</symbol>
<symbol id="sticky-locked-mine" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10 4h4v4h4v4h2V6.586L15.414 2H10v2zm-4 6v10h8v2h3.5H6c-1.103 0-2-.897-2-2V10h2zm15.4 6.462c.332 0 .6.275.6.615v4.308c0 .34-.268.615-.6.615h-4.8a.608.608 0 0 1-.6-.615v-4.308c0-.34.268-.615.6-.615C16.6 15.104 17.677 14 19 14s2.4 1.104 2.4 2.462zM19 15.23c-.662 0-1.2.551-1.2 1.23h2.4c0-.679-.538-1.23-1.2-1.23zm1.8 5.538v-3.077h-3.6v3.077h3.6zM4.182 5.816L2 4.998l2.182-.818L5 1.998l.818 2.182L8 4.998l-2.182.817L5 7.998l-.818-2.183zM12 10l1.143 2.857H16l-2.472 2.087L14.857 18 12 16.11 9.143 18l1.329-3.056L8 12.857h2.857L12 10z" />
</symbol>
<symbol id="topic" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15.414 2L20 6.586V20c0 1.103-.897 2-2 2H6c-1.103 0-2-.897-2-2V4c0-1.102.897-2 2-2h9.414zm2.587 18L18 8h-4V4H6v16h12.001z" />
</symbol>
<symbol id="topic-locked" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M14 20H6V4h8v4h4v4h2V6.586L15.414 2H6c-1.103 0-2 .898-2 2v16c0 1.103.897 2 2 2h11.5H14v-2zm7.4-3.538C21.4 15.104 20.323 14 19 14s-2.4 1.104-2.4 2.462c-.332 0-.6.275-.6.615v4.308c0 .34.268.615.6.615h4.8c.332 0 .6-.276.6-.615v-4.308a.608.608 0 0 0-.6-.615zM19 15.23c.662 0 1.2.551 1.2 1.23h-2.4c0-.679.538-1.23 1.2-1.23zm1.8 5.538h-3.6v-3.077h3.6v3.077z" />
</symbol>
<symbol id="topic-mine" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10 2h5.414L20 6.586V20c0 1.103-.897 2-2 2H6c-1.103 0-2-.897-2-2V10h2v10h12.001L18 8h-4V4h-4V2zM4.182 5.816L5 7.998l.818-2.183L8 4.998 5.818 4.18 5 1.998 4.182 4.18 2 4.998l2.182.817z" />
</symbol>
<symbol id="topic-locked-mine" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10 4h4v4h4v4h2V6.586L15.414 2H10v2zm-4 6v10h8v2h3.5H6c-1.103 0-2-.897-2-2V10h2zm15.4 6.462c.332 0 .6.275.6.615v4.308c0 .34-.268.615-.6.615h-4.8a.608.608 0 0 1-.6-.615v-4.308c0-.34.268-.615.6-.615C16.6 15.104 17.677 14 19 14s2.4 1.104 2.4 2.462zM19 15.23c-.662 0-1.2.551-1.2 1.23h2.4c0-.679-.538-1.23-1.2-1.23zm1.8 5.538v-3.077h-3.6v3.077h3.6zM4.182 5.816L2 4.998l2.182-.818L5 1.998l.818 2.182L8 4.998l-2.182.817L5 7.998l-.818-2.183z" />
</symbol>
<symbol id="hot" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M15.414 2L20 6.586V20c0 1.103-.897 2-2 2H6c-1.103 0-2-.897-2-2V4c0-1.102.897-2 2-2h9.414zm2.587 18L18 8h-4V4H6v16h12.001zM12 10c3 2.667 3 3.96 3 5.333C15 16.806 13.657 18 12 18s-3-1.194-3-2.667c0-1.119.776-2.075 1.8-2.47v1.804S13 13.555 12 10z" />
</symbol>
<symbol id="hot-locked" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M14 20H6V4h8v4h4v4h2V6.586L15.414 2H6c-1.103 0-2 .898-2 2v16c0 1.103.897 2 2 2h11.5H14v-2zm7.4-3.538C21.4 15.104 20.323 14 19 14s-2.4 1.104-2.4 2.462c-.332 0-.6.275-.6.615v4.308c0 .34.268.615.6.615h4.8c.332 0 .6-.276.6-.615v-4.308a.608.608 0 0 0-.6-.615zM19 15.23c.662 0 1.2.551 1.2 1.23h-2.4c0-.679.538-1.23 1.2-1.23zm1.8 5.538h-3.6v-3.077h3.6v3.077zM12 10c3 2.667 3 3.96 3 5.333C15 16.806 13.657 18 12 18s-3-1.194-3-2.667c0-1.119.776-2.075 1.8-2.47v1.804S13 13.555 12 10z" />
</symbol>
<symbol id="hot-mine" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10 2h5.414L20 6.586V20c0 1.103-.897 2-2 2H6c-1.103 0-2-.897-2-2V10h2v10h12.001L18 8h-4V4h-4V2zM4.182 5.816L2 4.998l2.182-.818L5 1.998l.818 2.182L8 4.998l-2.182.817L5 7.998l-.818-2.183zM12 10c3 2.667 3 3.96 3 5.333C15 16.806 13.657 18 12 18s-3-1.194-3-2.667c0-1.119.776-2.075 1.8-2.47v1.804S13 13.555 12 10z" />
</symbol>
<symbol id="hot-locked-mine" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10 4h4v4h4v4h2V6.586L15.414 2H10v2zm-4 6v10h8v2h3.5H6c-1.103 0-2-.897-2-2V10h2zm15.4 6.462c.332 0 .6.275.6.615v4.308c0 .34-.268.615-.6.615h-4.8a.608.608 0 0 1-.6-.615v-4.308c0-.34.268-.615.6-.615C16.6 15.104 17.677 14 19 14s2.4 1.104 2.4 2.462zM19 15.23c-.662 0-1.2.551-1.2 1.23h2.4c0-.679-.538-1.23-1.2-1.23zm1.8 5.538v-3.077h-3.6v3.077h3.6zM4.182 5.816L2 4.998l2.182-.818L5 1.998l.818 2.182L8 4.998l-2.182.817L5 7.998l-.818-2.183zM12 10c3 2.667 3 3.96 3 5.333C15 16.806 13.657 18 12 18s-3-1.194-3-2.667c0-1.119.776-2.075 1.8-2.47v1.804S13 13.555 12 10z" />
</symbol>
<!-- logo-icons -->
<symbol id="logo" viewBox="0 0 728 242">
<path fill="#ffffff" d="M129.2762,210.9343 L134.1212,210.9343 L134.1212,208.4833 C134.1212,206.621291 134.349198,205.110806 134.8052,203.9518 C135.261202,202.792794 135.869196,201.899803 136.6292,201.2728 C137.389204,200.645797 138.253695,200.227801 139.2227,200.0188 C140.191705,199.809799 141.208195,199.7053 142.2722,199.7053 C144.36221,199.7053 145.882195,199.838299 146.8322,200.1043 L146.8322,205.1773 C146.414198,205.063299 145.967702,204.9778 145.4927,204.9208 C145.017698,204.8638 144.457203,204.8353 143.8112,204.8353 C142.937196,204.8353 142.186703,205.044298 141.5597,205.4623 C140.932697,205.880302 140.6192,206.697294 140.6192,207.9133 L140.6192,210.9343 L146.1482,210.9343 L146.1482,215.7793 L140.6192,215.7793 L140.6192,240.4033 L134.1212,240.4033 L134.1212,215.7793 L129.2762,215.7793 L129.2762,210.9343 Z M162.6412,236.0713 C164.085207,236.0713 165.339195,235.767303 166.4032,235.1593 C167.467205,234.551297 168.341197,233.753305 169.0252,232.7653 C169.709203,231.777295 170.212698,230.665806 170.5357,229.4308 C170.858702,228.195794 171.0202,226.932306 171.0202,225.6403 C171.0202,224.386294 170.858702,223.132306 170.5357,221.8783 C170.212698,220.624294 169.709203,219.512805 169.0252,218.5438 C168.341197,217.574795 167.467205,216.786303 166.4032,216.1783 C165.339195,215.570297 164.085207,215.2663 162.6412,215.2663 C161.197193,215.2663 159.943205,215.570297 158.8792,216.1783 C157.815195,216.786303 156.941203,217.574795 156.2572,218.5438 C155.573197,219.512805 155.069702,220.624294 154.7467,221.8783 C154.423698,223.132306 154.2622,224.386294 154.2622,225.6403 C154.2622,226.932306 154.423698,228.195794 154.7467,229.4308 C155.069702,230.665806 155.573197,231.777295 156.2572,232.7653 C156.941203,233.753305 157.815195,234.551297 158.8792,235.1593 C159.943205,235.767303 161.197193,236.0713 162.6412,236.0713 Z M162.6412,241.2013 C160.285188,241.2013 158.185709,240.811804 156.3427,240.0328 C154.499691,239.253796 152.941706,238.180307 151.6687,236.8123 C150.395694,235.444293 149.426703,233.81031 148.7617,231.9103 C148.096697,230.010291 147.7642,227.920311 147.7642,225.6403 C147.7642,223.398289 148.096697,221.32731 148.7617,219.4273 C149.426703,217.527291 150.395694,215.893307 151.6687,214.5253 C152.941706,213.157293 154.499691,212.083804 156.3427,211.3048 C158.185709,210.525796 160.285188,210.1363 162.6412,210.1363 C164.997212,210.1363 167.096691,210.525796 168.9397,211.3048 C170.782709,212.083804 172.340694,213.157293 173.6137,214.5253 C174.886706,215.893307 175.855697,217.527291 176.5207,219.4273 C177.185703,221.32731 177.5182,223.398289 177.5182,225.6403 C177.5182,227.920311 177.185703,230.010291 176.5207,231.9103 C175.855697,233.81031 174.886706,235.444293 173.6137,236.8123 C172.340694,238.180307 170.782709,239.253796 168.9397,240.0328 C167.096691,240.811804 164.997212,241.2013 162.6412,241.2013 Z M181.9272,210.9343 L188.0262,210.9343 L188.0262,216.6343 L188.1402,216.6343 C188.330201,215.836296 188.700697,215.057304 189.2517,214.2973 C189.802703,213.537296 190.467696,212.843803 191.2467,212.2168 C192.025704,211.589797 192.890195,211.086302 193.8402,210.7063 C194.790205,210.326298 195.759195,210.1363 196.7472,210.1363 C197.507204,210.1363 198.029699,210.1553 198.3147,210.1933 C198.599701,210.2313 198.894198,210.2693 199.1982,210.3073 L199.1982,216.5773 C198.742198,216.5013 198.276702,216.4348 197.8017,216.3778 C197.326698,216.3208 196.861202,216.2923 196.4052,216.2923 C195.303194,216.2923 194.267705,216.510798 193.2987,216.9478 C192.329695,217.384802 191.484204,218.030796 190.7622,218.8858 C190.040196,219.740804 189.470202,220.795294 189.0522,222.0493 C188.634198,223.303306 188.4252,224.747292 188.4252,226.3813 L188.4252,240.4033 L181.9272,240.4033 L181.9272,210.9343 Z M226.8632,240.4033 L220.4792,240.4033 L220.4792,236.2993 L220.3652,236.2993 C219.567196,237.781307 218.379708,238.968796 216.8027,239.8618 C215.225692,240.754804 213.620208,241.2013 211.9862,241.2013 C208.110181,241.2013 205.307709,240.24181 203.5787,238.3228 C201.849691,236.40379 200.9852,233.506319 200.9852,229.6303 L200.9852,210.9343 L207.4832,210.9343 L207.4832,229.0033 C207.4832,231.587313 207.977195,233.411295 208.9652,234.4753 C209.953205,235.539305 211.340191,236.0713 213.1262,236.0713 C214.494207,236.0713 215.634195,235.862302 216.5462,235.4443 C217.458205,235.026298 218.199197,234.465804 218.7692,233.7628 C219.339203,233.059796 219.747699,232.214305 219.9947,231.2263 C220.241701,230.238295 220.3652,229.174306 220.3652,228.0343 L220.3652,210.9343 L226.8632,210.9343 L226.8632,240.4033 Z M232.6972,210.9343 L238.8532,210.9343 L238.8532,215.0383 L239.0242,215.0383 C239.518202,214.316296 240.050197,213.651303 240.6202,213.0433 C241.190203,212.435297 241.826696,211.922302 242.5297,211.5043 C243.232704,211.086298 244.040195,210.753801 244.9522,210.5068 C245.864205,210.259799 246.909194,210.1363 248.0872,210.1363 C249.873209,210.1363 251.535692,210.535296 253.0747,211.3333 C254.613708,212.131304 255.706197,213.366292 256.3522,215.0383 C257.454206,213.518292 258.727193,212.321304 260.1712,211.4473 C261.615207,210.573296 263.420189,210.1363 265.5862,210.1363 C268.702216,210.1363 271.124691,210.896292 272.8537,212.4163 C274.582709,213.936308 275.4472,216.482282 275.4472,220.0543 L275.4472,240.4033 L268.9492,240.4033 L268.9492,223.1893 C268.9492,222.011294 268.9112,220.937805 268.8352,219.9688 C268.7592,218.999795 268.540702,218.163804 268.1797,217.4608 C267.818698,216.757796 267.277204,216.216302 266.5552,215.8363 C265.833196,215.456298 264.845206,215.2663 263.5912,215.2663 C261.387189,215.2663 259.791205,215.950293 258.8032,217.3183 C257.815195,218.686307 257.3212,220.624287 257.3212,223.1323 L257.3212,240.4033 L250.8232,240.4033 L250.8232,221.4793 C250.8232,219.42729 250.452704,217.878805 249.7117,216.8338 C248.970696,215.788795 247.61221,215.2663 245.6362,215.2663 C244.800196,215.2663 243.992704,215.437298 243.2137,215.7793 C242.434696,216.121302 241.750703,216.615297 241.1617,217.2613 C240.572697,217.907303 240.097702,218.705295 239.7367,219.6553 C239.375698,220.605305 239.1952,221.688294 239.1952,222.9043 L239.1952,240.4033 L232.6972,240.4033 L232.6972,210.9343 Z M361.6682,229.9413 C361.858201,231.84131 362.580194,233.171296 363.8342,233.9313 C365.088206,234.691304 366.589191,235.0713 368.3372,235.0713 C368.945203,235.0713 369.638696,235.0238 370.4177,234.9288 C371.196704,234.8338 371.928197,234.653301 372.6122,234.3873 C373.296203,234.121299 373.856698,233.731803 374.2937,233.2188 C374.730702,232.705797 374.9302,232.031304 374.8922,231.1953 C374.8542,230.359296 374.550203,229.675303 373.9802,229.1433 C373.410197,228.611297 372.678704,228.183802 371.7857,227.8608 C370.892696,227.537798 369.876206,227.262301 368.7362,227.0343 C367.596194,226.806299 366.437206,226.559301 365.2592,226.2933 C364.043194,226.027299 362.874706,225.704302 361.7537,225.3243 C360.632694,224.944298 359.625704,224.431303 358.7327,223.7853 C357.839696,223.139297 357.127203,222.312805 356.5952,221.3058 C356.063197,220.298795 355.7972,219.054307 355.7972,217.5723 C355.7972,215.976292 356.186696,214.636805 356.9657,213.5538 C357.744704,212.470795 358.732694,211.596803 359.9297,210.9318 C361.126706,210.266797 362.456693,209.801301 363.9197,209.5353 C365.382707,209.269299 366.779193,209.1363 368.1092,209.1363 C369.629208,209.1363 371.082693,209.297798 372.4697,209.6208 C373.856707,209.943802 375.110694,210.466296 376.2317,211.1883 C377.352706,211.910304 378.283696,212.850794 379.0247,214.0098 C379.765704,215.168806 380.231199,216.565292 380.4212,218.1993 L373.6382,218.1993 C373.334198,216.641292 372.621706,215.596303 371.5007,215.0643 C370.379694,214.532297 369.097207,214.2663 367.6532,214.2663 C367.197198,214.2663 366.655703,214.3043 366.0287,214.3803 C365.401697,214.4563 364.812703,214.598799 364.2617,214.8078 C363.710697,215.016801 363.245202,215.320798 362.8652,215.7198 C362.485198,216.118802 362.2952,216.641297 362.2952,217.2873 C362.2952,218.085304 362.570697,218.731298 363.1217,219.2253 C363.672703,219.719302 364.394696,220.127798 365.2877,220.4508 C366.180704,220.773802 367.197194,221.049299 368.3372,221.2773 C369.477206,221.505301 370.655194,221.752299 371.8712,222.0183 C373.049206,222.284301 374.208194,222.607298 375.3482,222.9873 C376.488206,223.367302 377.504696,223.880297 378.3977,224.5263 C379.290704,225.172303 380.012697,225.989295 380.5637,226.9773 C381.114703,227.965305 381.3902,229.181293 381.3902,230.6253 C381.3902,232.373309 380.991204,233.855294 380.1932,235.0713 C379.395196,236.287306 378.359706,237.275296 377.0867,238.0353 C375.813694,238.795304 374.398208,239.346298 372.8402,239.6883 C371.282192,240.030302 369.743208,240.2013 368.2232,240.2013 C366.361191,240.2013 364.641708,239.992302 363.0647,239.5743 C361.487692,239.156298 360.119706,238.519804 358.9607,237.6648 C357.801694,236.809796 356.889703,235.745806 356.2247,234.4728 C355.559697,233.199794 355.2082,231.689309 355.1702,229.9413 L361.6682,229.9413 Z M399.9022,240.2013 C397.546188,240.2013 395.446709,239.811804 393.6037,239.0328 C391.760691,238.253796 390.202706,237.180307 388.9297,235.8123 C387.656694,234.444293 386.687703,232.81031 386.0227,230.9103 C385.357697,229.010291 385.0252,226.920311 385.0252,224.6403 C385.0252,222.398289 385.357697,220.32731 386.0227,218.4273 C386.687703,216.527291 387.656694,214.893307 388.9297,213.5253 C390.202706,212.157293 391.760691,211.083804 393.6037,210.3048 C395.446709,209.525796 397.546188,209.1363 399.9022,209.1363 C402.258212,209.1363 404.357691,209.525796 406.2007,210.3048 C408.043709,211.083804 409.601694,212.157293 410.8747,213.5253 C412.147706,214.893307 413.116697,216.527291 413.7817,218.4273 C414.446703,220.32731 414.7792,222.398289 414.7792,224.6403 C414.7792,226.920311 414.446703,229.010291 413.7817,230.9103 C413.116697,232.81031 412.147706,234.444293 410.8747,235.8123 C409.601694,237.180307 408.043709,238.253796 406.2007,239.0328 C404.357691,239.811804 402.258212,240.2013 399.9022,240.2013 Z M399.9022,235.0713 C401.346207,235.0713 402.600195,234.767303 403.6642,234.1593 C404.728205,233.551297 405.602197,232.753305 406.2862,231.7653 C406.970203,230.777295 407.473698,229.665806 407.7967,228.4308 C408.119702,227.195794 408.2812,225.932306 408.2812,224.6403 C408.2812,223.386294 408.119702,222.132306 407.7967,220.8783 C407.473698,219.624294 406.970203,218.512805 406.2862,217.5438 C405.602197,216.574795 404.728205,215.786303 403.6642,215.1783 C402.600195,214.570297 401.346207,214.2663 399.9022,214.2663 C398.458193,214.2663 397.204205,214.570297 396.1402,215.1783 C395.076195,215.786303 394.202203,216.574795 393.5182,217.5438 C392.834197,218.512805 392.330702,219.624294 392.0077,220.8783 C391.684698,222.132306 391.5232,223.386294 391.5232,224.6403 C391.5232,225.932306 391.684698,227.195794 392.0077,228.4308 C392.330702,229.665806 392.834197,230.777295 393.5182,231.7653 C394.202203,232.753305 395.076195,233.551297 396.1402,234.1593 C397.204205,234.767303 398.458193,235.0713 399.9022,235.0713 Z M417.3312,209.9343 L422.1762,209.9343 L422.1762,207.4833 C422.1762,205.621291 422.404198,204.110806 422.8602,202.9518 C423.316202,201.792794 423.924196,200.899803 424.6842,200.2728 C425.444204,199.645797 426.308695,199.227801 427.2777,199.0188 C428.246705,198.809799 429.263195,198.7053 430.3272,198.7053 C432.41721,198.7053 433.937195,198.838299 434.8872,199.1043 L434.8872,204.1773 C434.469198,204.063299 434.022702,203.9778 433.5477,203.9208 C433.072698,203.8638 432.512203,203.8353 431.8662,203.8353 C430.992196,203.8353 430.241703,204.044298 429.6147,204.4623 C428.987697,204.880302 428.6742,205.697294 428.6742,206.9133 L428.6742,209.9343 L434.2032,209.9343 L434.2032,214.7793 L428.6742,214.7793 L428.6742,239.4033 L422.1762,239.4033 L422.1762,214.7793 L417.3312,214.7793 L417.3312,209.9343 Z M435.2732,209.9343 L440.1752,209.9343 L440.1752,201.0993 L446.6732,201.0993 L446.6732,209.9343 L452.5442,209.9343 L452.5442,214.7793 L446.6732,214.7793 L446.6732,230.5113 C446.6732,231.195303 446.7017,231.784298 446.7587,232.2783 C446.8157,232.772302 446.948699,233.190298 447.1577,233.5323 C447.366701,233.874302 447.680198,234.130799 448.0982,234.3018 C448.516202,234.472801 449.086196,234.5583 449.8082,234.5583 C450.264202,234.5583 450.720198,234.5488 451.1762,234.5298 C451.632202,234.5108 452.088198,234.444301 452.5442,234.3303 L452.5442,239.3463 C451.822196,239.4223 451.119203,239.4983 450.4352,239.5743 C449.751197,239.6503 449.048204,239.6883 448.3262,239.6883 C446.616191,239.6883 445.238705,239.526802 444.1937,239.2038 C443.148695,238.880798 442.331703,238.405803 441.7427,237.7788 C441.153697,237.151797 440.754701,236.363305 440.5457,235.4133 C440.336699,234.463295 440.2132,233.380306 440.1752,232.1643 L440.1752,214.7793 L435.2732,214.7793 L435.2732,209.9343 Z M454.5832,209.9343 L461.4802,209.9343 L467.2372,231.9363 L467.3512,231.9363 L472.8802,209.9343 L479.4352,209.9343 L484.7362,231.9363 L484.8502,231.9363 L490.8352,209.9343 L497.4472,209.9343 L488.2132,239.4033 L481.5442,239.4033 L476.0722,217.5153 L475.9582,217.5153 L470.5432,239.4033 L463.7032,239.4033 L454.5832,209.9343 Z M526.3332,232.8483 C526.3332,233.646304 526.437699,234.216298 526.6467,234.5583 C526.855701,234.900302 527.264197,235.0713 527.8722,235.0713 L528.5562,235.0713 C528.822201,235.0713 529.126198,235.0333 529.4682,234.9573 L529.4682,239.4603 C529.240199,239.5363 528.945702,239.6218 528.5847,239.7168 C528.223698,239.8118 527.853202,239.8973 527.4732,239.9733 C527.093198,240.0493 526.713202,240.1063 526.3332,240.1443 C525.953198,240.1823 525.630201,240.2013 525.3642,240.2013 C524.034193,240.2013 522.932204,239.935303 522.0582,239.4033 C521.184196,238.871297 520.614201,237.940307 520.3482,236.6103 C519.056194,237.864306 517.469709,238.776297 515.5887,239.3463 C513.707691,239.916303 511.893209,240.2013 510.1452,240.2013 C508.815193,240.2013 507.542206,240.020802 506.3262,239.6598 C505.110194,239.298798 504.036705,238.766804 503.1057,238.0638 C502.174695,237.360796 501.433703,236.467805 500.8827,235.3848 C500.331697,234.301795 500.0562,233.038307 500.0562,231.5943 C500.0562,229.770291 500.388697,228.288306 501.0537,227.1483 C501.718703,226.008294 502.592695,225.115303 503.6757,224.4693 C504.758705,223.823297 505.974693,223.357801 507.3237,223.0728 C508.672707,222.787799 510.031193,222.569301 511.3992,222.4173 C512.577206,222.189299 513.698195,222.0278 514.7622,221.9328 C515.826205,221.8378 516.766696,221.676301 517.5837,221.4483 C518.400704,221.220299 519.046698,220.868802 519.5217,220.3938 C519.996702,219.918798 520.2342,219.206305 520.2342,218.2563 C520.2342,217.420296 520.034702,216.736303 519.6357,216.2043 C519.236698,215.672297 518.742703,215.263801 518.1537,214.9788 C517.564697,214.693799 516.909204,214.5038 516.1872,214.4088 C515.465196,214.3138 514.781203,214.2663 514.1352,214.2663 C512.311191,214.2663 510.810206,214.646296 509.6322,215.4063 C508.454194,216.166304 507.789201,217.344292 507.6372,218.9403 L501.1392,218.9403 C501.253201,217.040291 501.709196,215.463306 502.5072,214.2093 C503.305204,212.955294 504.321694,211.948304 505.5567,211.1883 C506.791706,210.428296 508.188192,209.896302 509.7462,209.5923 C511.304208,209.288298 512.900192,209.1363 514.5342,209.1363 C515.978207,209.1363 517.403193,209.288298 518.8092,209.5923 C520.215207,209.896302 521.478694,210.390297 522.5997,211.0743 C523.720706,211.758303 524.623197,212.641795 525.3072,213.7248 C525.991203,214.807805 526.3332,216.128292 526.3332,217.6863 L526.3332,232.8483 Z M519.8352,224.6403 C518.847195,225.286303 517.631207,225.675799 516.1872,225.8088 C514.743193,225.941801 513.299207,226.141299 511.8552,226.4073 C511.171197,226.521301 510.506203,226.682799 509.8602,226.8918 C509.214197,227.100801 508.644202,227.385798 508.1502,227.7468 C507.656198,228.107802 507.266701,228.582797 506.9817,229.1718 C506.696699,229.760803 506.5542,230.473296 506.5542,231.3093 C506.5542,232.031304 506.763198,232.639298 507.1812,233.1333 C507.599202,233.627302 508.102697,234.016799 508.6917,234.3018 C509.280703,234.586801 509.926696,234.786299 510.6297,234.9003 C511.332704,235.014301 511.969197,235.0713 512.5392,235.0713 C513.261204,235.0713 514.040196,234.976301 514.8762,234.7863 C515.712204,234.596299 516.500696,234.273302 517.2417,233.8173 C517.982704,233.361298 518.600198,232.781804 519.0942,232.0788 C519.588202,231.375796 519.8352,230.511305 519.8352,229.4853 L519.8352,224.6403 Z M533.3882,209.9343 L539.4872,209.9343 L539.4872,215.6343 L539.6012,215.6343 C539.791201,214.836296 540.161697,214.057304 540.7127,213.2973 C541.263703,212.537296 541.928696,211.843803 542.7077,211.2168 C543.486704,210.589797 544.351195,210.086302 545.3012,209.7063 C546.251205,209.326298 547.220195,209.1363 548.2082,209.1363 C548.968204,209.1363 549.490699,209.1553 549.7757,209.1933 C550.060701,209.2313 550.355198,209.2693 550.6592,209.3073 L550.6592,215.5773 C550.203198,215.5013 549.737702,215.4348 549.2627,215.3778 C548.787698,215.3208 548.322202,215.2923 547.8662,215.2923 C546.764194,215.2923 545.728705,215.510798 544.7597,215.9478 C543.790695,216.384802 542.945204,217.030796 542.2232,217.8858 C541.501196,218.740804 540.931202,219.795294 540.5132,221.0493 C540.095198,222.303306 539.8862,223.747292 539.8862,225.3813 L539.8862,239.4033 L533.3882,239.4033 L533.3882,209.9343 Z M557.5432,226.3503 C557.5432,227.490306 557.704698,228.592295 558.0277,229.6563 C558.350702,230.720305 558.835197,231.651296 559.4812,232.4493 C560.127203,233.247304 560.944195,233.883798 561.9322,234.3588 C562.920205,234.833802 564.098193,235.0713 565.4662,235.0713 C567.36621,235.0713 568.895694,234.662804 570.0547,233.8458 C571.213706,233.028796 572.078197,231.803308 572.6482,230.1693 L578.8042,230.1693 C578.462198,231.765308 577.873204,233.190294 577.0372,234.4443 C576.201196,235.698306 575.194206,236.752796 574.0162,237.6078 C572.838194,238.462804 571.517707,239.108798 570.0547,239.5458 C568.591693,239.982802 567.062208,240.2013 565.4662,240.2013 C563.148188,240.2013 561.096209,239.821304 559.3102,239.0613 C557.524191,238.301296 556.013706,237.237307 554.7787,235.8693 C553.543694,234.501293 552.612703,232.86731 551.9857,230.9673 C551.358697,229.067291 551.0452,226.977311 551.0452,224.6973 C551.0452,222.60729 551.377697,220.621809 552.0427,218.7408 C552.707703,216.859791 553.657694,215.206807 554.8927,213.7818 C556.127706,212.356793 557.619191,211.226304 559.3672,210.3903 C561.115209,209.554296 563.091189,209.1363 565.2952,209.1363 C567.613212,209.1363 569.693691,209.620795 571.5367,210.5898 C573.379709,211.558805 574.909194,212.841292 576.1252,214.4373 C577.341206,216.033308 578.224697,217.86679 578.7757,219.9378 C579.326703,222.00881 579.469201,224.146289 579.2032,226.3503 L557.5432,226.3503 Z M572.7052,222.0753 C572.6292,221.049295 572.410702,220.061305 572.0497,219.1113 C571.688698,218.161295 571.194703,217.334804 570.5677,216.6318 C569.940697,215.928796 569.180704,215.358802 568.2877,214.9218 C567.394696,214.484798 566.397206,214.2663 565.2952,214.2663 C564.155194,214.2663 563.119705,214.465798 562.1887,214.8648 C561.257695,215.263802 560.459703,215.814796 559.7947,216.5178 C559.129697,217.220804 558.597702,218.047295 558.1987,218.9973 C557.799698,219.947305 557.5812,220.973294 557.5432,222.0753 L572.7052,222.0753z" />
<path d="M101.79 126.9438C101.79 109.6638 98.942 97.1548 93.247 89.4138 87.552 81.6758 78.831 77.8028 67.087 77.8028 56.966 77.8028 49.241 81.7178 43.909 89.5478 38.576 97.3788 35.91 107.5958 35.91 120.1938 35.91 134.7728 39.205 146.0248 45.803 153.9438 52.401 161.8658 61.121 165.8238 71.968 165.8238 80.823 165.8238 88.007 162.2708 93.521 155.1588 99.031 148.0488 101.79 138.6458 101.79 126.9438M139.05 117.4938C139.05 129.1958 137.603 139.9498 134.718 149.7578 131.832 159.5708 127.634 168.0768 122.129 175.2728 116.623 182.4748 109.764 188.0558 101.554 192.0128 93.344 195.9698 83.915 197.9538 73.267 197.9538 65.142 197.9538 57.877 195.9278 51.473 191.8788 45.064 187.8288 40.057 182.6558 36.45 176.3528L36.45 240.6138 25.194 240.6138C21.976 240.6138 18.85 240.0268 15.811 238.8578 12.774 237.6858 10.091 236.0228 7.77 233.8638 5.446 231.7038 3.569 229.0918 2.144 226.0338.713 222.9698 0 219.4608 0 215.5038L0 127.4828C0 115.4258 1.393 104.3558 4.185 94.2728 6.974 84.1948 11.34 75.5548 17.28 68.3538 23.22 61.1558 30.78 55.5748 39.96 51.6128 49.14 47.6558 60.117 45.6728 72.9 45.6728 82.62 45.6728 91.53 47.6978 99.63 51.7488 107.729 55.7978 114.703 61.1558 120.555 67.8138 126.402 74.4748 130.95 82.1238 134.19 90.7628 137.43 99.4038 139.05 108.3128 139.05 117.4938M267.5684 194.7134C260.0084 194.7134 254.0224 192.6464 249.6134 188.5034 245.2014 184.3644 242.9994 178.3364 242.9994 170.4134L242.9994 111.0134C242.9994 105.0734 242.2264 99.9894 240.6914 95.7584 239.1554 91.5304 237.0754 88.1094 234.4514 85.4984 231.8274 82.8914 228.7524 80.9544 225.2244 79.6934 221.6984 78.4364 217.9434 77.8034 213.9644 77.8034 211.0714 77.8034 208.0844 78.3894 205.0124 79.5584 201.9374 80.7314 199.0894 82.6634 196.4654 85.3634 193.8414 88.0634 191.7194 91.5734 190.0904 95.8934 188.4634 100.2134 187.6484 105.6134 187.6484 112.0934L187.6484 194.7134 175.8574 194.7134C167.2764 194.7134 161.0244 192.5534 157.0914 188.2334 153.1604 183.9134 151.1984 177.9734 151.1984 170.4134L151.1984.3134 162.4544.3134C171.0314.3134 177.4184 2.4734 181.6204 6.7934 185.8174 11.1134 187.9194 16.6944 187.9194 23.5334L188.1884 65.1134C189.4454 62.9534 191.2014 60.7514 193.4534 58.4984 195.7024 56.2504 198.1784 54.1784 200.8794 52.2884 203.5784 50.3984 206.5484 48.8244 209.7894 47.5634 213.0284 46.3064 216.3574 45.6734 219.7784 45.6734 238.6784 45.6734 253.3474 51.1194 263.7894 62.0084 274.2254 72.9014 279.4484 88.6954 279.4484 109.3934L279.4484 194.7134 267.5684 194.7134zM398.7842 126.9438C398.7842 109.6638 395.9362 97.1548 390.2412 89.4138 384.5462 81.6758 375.8262 77.8028 364.0812 77.8028 353.9602 77.8028 346.2352 81.7178 340.9032 89.5478 335.5712 97.3788 332.9042 107.5958 332.9042 120.1938 332.9042 134.7728 336.1992 146.0248 342.7982 153.9438 349.3952 161.8658 358.1162 165.8238 368.9622 165.8238 377.8172 165.8238 385.0022 162.2708 390.5152 155.1588 396.0252 148.0488 398.7842 138.6458 398.7842 126.9438M436.0442 117.4938C436.0442 129.1958 434.5982 139.9498 431.7122 149.7578 428.8272 159.5708 424.6282 168.0768 419.1242 175.2728 413.6182 182.4748 406.7582 188.0558 398.5482 192.0128 390.3392 195.9698 380.9102 197.9538 370.2622 197.9538 362.1372 197.9538 354.8722 195.9278 348.4682 191.8788 342.0592 187.8288 337.0522 182.6558 333.4442 176.3528L333.4442 240.6138 322.1882 240.6138C318.9702 240.6138 315.8442 240.0268 312.8062 238.8578 309.7682 237.6858 307.0862 236.0228 304.7652 233.8638 302.4412 231.7038 300.5632 229.0918 299.1382 226.0338 297.7082 222.9698 296.9942 219.4608 296.9942 215.5038L296.9942 127.4828C296.9942 115.4258 298.3872 104.3558 301.1802 94.2728 303.9682 84.1948 308.3352 75.5548 314.2742 68.3538 320.2152 61.1558 327.7742 55.5748 336.9542 51.6128 346.1352 47.6558 357.1112 45.6728 369.8942 45.6728 379.6142 45.6728 388.5242 47.6978 396.6252 51.7488 404.7242 55.7978 411.6982 61.1558 417.5502 67.8138 423.3972 74.4748 427.9442 82.1238 431.1842 90.7628 434.4252 99.4038 436.0442 108.3128 436.0442 117.4938M544.3135 138.5532C544.3135 128.4752 541.7495 121.5432 536.6195 117.7632 531.4895 113.9832 523.5245 112.0932 512.7235 112.0932L483.2935 112.0932 483.2935 150.1632C483.2935 153.4042 484.8215 156.1502 487.8835 158.3982 490.9425 160.6512 494.8115 161.7732 499.4945 161.7732L514.6145 161.7732C524.6925 161.7732 532.1645 159.6592 537.0245 155.4282 541.8835 151.2012 544.3135 145.5742 544.3135 138.5532M541.3435 61.0632C541.3435 57.1062 540.4875 53.7312 538.7795 50.9382 537.0665 48.1502 534.8645 45.9432 532.1645 44.3232 529.4635 42.7032 526.4015 41.5342 522.9845 40.8132 519.5625 40.0962 516.1415 39.7332 512.7235 39.7332L498.9545 39.7332C496.6125 39.7332 494.0005 39.9612 491.1245 40.4082 488.2425 40.8602 485.5425 41.2642 483.0245 41.6232L483.0245 83.4732 511.3745 83.4732C519.6515 83.4732 526.7175 81.7182 532.5695 78.2082 538.4165 74.6982 541.3435 68.9862 541.3435 61.0632M581.5745 137.4732C581.5745 146.8342 579.8615 155.1152 576.4445 162.3132 573.0225 169.5152 568.3855 175.5892 562.5395 180.5382 556.6875 185.4912 549.9375 189.2252 542.2895 191.7432 534.6355 194.2662 526.5835 195.5232 518.1245 195.5232L498.1435 195.5232C463.7605 195.5232 446.5745 180.8552 446.5745 151.5132L446.5745 17.3232C448.7345 16.6062 451.7925 15.7502 455.7535 14.7582 459.7105 13.7712 463.9895 12.8262 468.5795 11.9232 473.1685 11.0252 477.8475 10.3032 482.6195 9.7632 487.3855 9.2232 491.6645 8.9532 495.4445 8.9532L517.8535 8.9532C526.6705 8.9532 534.7715 10.0792 542.1545 12.3282 549.5325 14.5812 555.9235 17.8212 561.3245 22.0482 566.7235 26.2802 570.9095 31.4092 573.8785 37.4382 576.8485 43.4712 578.3345 50.2632 578.3345 57.8232 578.3345 68.0832 575.7225 76.5002 570.5035 83.0692 565.2815 89.6412 558.0845 94.2732 548.9045 96.9732 553.5835 98.2352 557.9025 100.3062 561.8645 103.1832 565.8215 106.0652 569.2895 109.3512 572.2585 113.0382 575.2285 116.7302 577.5245 120.7332 579.1435 125.0532 580.7635 129.3732 581.5745 133.5162 581.5745 137.4732M690.1123 138.5532C690.1123 128.4752 687.5483 121.5432 682.4183 117.7632 677.2883 113.9832 669.3233 112.0932 658.5223 112.0932L629.0923 112.0932 629.0923 150.1632C629.0923 153.4042 630.6203 156.1502 633.6823 158.3982 636.7413 160.6512 640.6103 161.7732 645.2933 161.7732L660.4133 161.7732C670.4913 161.7732 677.9633 159.6592 682.8233 155.4282 687.6823 151.2012 690.1123 145.5742 690.1123 138.5532M687.1423 61.0632C687.1423 57.1062 686.2863 53.7312 684.5783 50.9382 682.8653 48.1502 680.6633 45.9432 677.9633 44.3232 675.2623 42.7032 672.2003 41.5342 668.7833 40.8132 665.3613 40.0962 661.9403 39.7332 658.5223 39.7332L644.7533 39.7332C642.4113 39.7332 639.7993 39.9612 636.9233 40.4082 634.0413 40.8602 631.3413 41.2642 628.8233 41.6232L628.8233 83.4732 657.1733 83.4732C665.4503 83.4732 672.5163 81.7182 678.3683 78.2082 684.2153 74.6982 687.1423 68.9862 687.1423 61.0632M727.3733 137.4732C727.3733 146.8342 725.6603 155.1152 722.2433 162.3132 718.8213 169.5152 714.1843 175.5892 708.3383 180.5382 702.4863 185.4912 695.7363 189.2252 688.0883 191.7432 680.4343 194.2662 672.3823 195.5232 663.9233 195.5232L643.9423 195.5232C609.5593 195.5232 592.3733 180.8552 592.3733 151.5132L592.3733 17.3232C594.5333 16.6062 597.5913 15.7502 601.5523 14.7582 605.5093 13.7712 609.7883 12.8262 614.3783 11.9232 618.9673 11.0252 623.6463 10.3032 628.4183 9.7632 633.1843 9.2232 637.4633 8.9532 641.2433 8.9532L663.6523 8.9532C672.4693 8.9532 680.5703 10.0792 687.9533 12.3282 695.3313 14.5812 701.7223 17.8212 707.1233 22.0482 712.5223 26.2802 716.7083 31.4092 719.6773 37.4382 722.6473 43.4712 724.1333 50.2632 724.1333 57.8232 724.1333 68.0832 721.5213 76.5002 716.3023 83.0692 711.0803 89.6412 703.8833 94.2732 694.7033 96.9732 699.3823 98.2352 703.7013 100.3062 707.6633 103.1832 711.6203 106.0652 715.0883 109.3512 718.0573 113.0382 721.0273 116.7302 723.3233 120.7332 724.9423 125.0532 726.5623 129.3732 727.3733 133.5162 727.3733 137.4732z" />
</symbol>
<symbol id="logo-dense" viewBox="0 0 728 242">
<path fill-rule="evenodd" d="M139.05,117.4938 C139.05,129.1958 137.603,139.9498 134.718,149.7578 C131.832,159.5708 127.634,168.0768 122.129,175.2728 C116.623,182.4748 109.764,188.0558 101.554,192.0128 C93.344,195.9698 83.915,197.9538 73.267,197.9538 C65.142,197.9538 57.877,195.9278 51.473,191.8788 C45.064,187.8288 40.057,182.6558 36.45,176.3528 L36.45,240.6138 L25.194,240.6138 C21.976,240.6138 18.85,240.0268 15.811,238.8578 C12.774,237.6858 10.091,236.0228 7.77,233.8638 C5.446,231.7038 3.569,229.0918 2.144,226.0338 C0.713,222.9698 0,219.4608 0,215.5038 L0,127.4828 C0,115.4258 1.393,104.3558 4.185,94.2728 C6.974,84.1948 11.34,75.5548 17.28,68.3538 C23.22,61.1558 30.78,55.5748 39.96,51.6128 C49.14,47.6558 60.117,45.6728 72.9,45.6728 C82.62,45.6728 91.53,47.6978 99.63,51.7488 C107.729,55.7978 114.703,61.1558 120.555,67.8138 C126.402,74.4748 130.95,82.1238 134.19,90.7628 C137.43,99.4038 139.05,108.3128 139.05,117.4938 Z M101.79,126.9438 C101.79,109.6638 98.942,97.1548 93.247,89.4138 C87.552,81.6758 78.831,77.8028 67.087,77.8028 C56.966,77.8028 49.241,81.7178 43.909,89.5478 C38.576,97.3788 35.91,107.5958 35.91,120.1938 C35.91,134.7728 39.205,146.0248 45.803,153.9438 C52.401,161.8658 61.121,165.8238 71.968,165.8238 C80.823,165.8238 88.007,162.2708 93.521,155.1588 C99.031,148.0488 101.79,138.6458 101.79,126.9438 Z M267.5684,194.7134 C260.0084,194.7134 254.0224,192.6464 249.6134,188.5034 C245.2014,184.3644 242.9994,178.3364 242.9994,170.4134 L242.9994,111.0134 C242.9994,105.0734 242.2264,99.9894 240.6914,95.7584 C239.1554,91.5304 237.0754,88.1094 234.4514,85.4984 C231.8274,82.8914 228.7524,80.9544 225.2244,79.6934 C221.6984,78.4364 217.9434,77.8034 213.9644,77.8034 C211.0714,77.8034 208.0844,78.3894 205.0124,79.5584 C201.9374,80.7314 199.0894,82.6634 196.4654,85.3634 C193.8414,88.0634 191.7194,91.5734 190.0904,95.8934 C188.4634,100.2134 187.6484,105.6134 187.6484,112.0934 L187.6484,194.7134 L175.8574,194.7134 C167.2764,194.7134 161.0244,192.5534 157.0914,188.2334 C153.1604,183.9134 151.1984,177.9734 151.1984,170.4134 L151.1984,0.3134 L162.4544,0.3134 C171.0314,0.3134 177.4184,2.4734 181.6204,6.7934 C185.8174,11.1134 187.9194,16.6944 187.9194,23.5334 L188.1884,65.1134 C189.4454,62.9534 191.2014,60.7514 193.4534,58.4984 C195.7024,56.2504 198.1784,54.1784 200.8794,52.2884 C203.5784,50.3984 206.5484,48.8244 209.7894,47.5634 C213.0284,46.3064 216.3574,45.6734 219.7784,45.6734 C238.6784,45.6734 253.3474,51.1194 263.7894,62.0084 C274.2254,72.9014 279.4484,88.6954 279.4484,109.3934 L279.4484,194.7134 L267.5684,194.7134 Z M436.0442,117.4938 C436.0442,129.1958 434.5982,139.9498 431.7122,149.7578 C428.8272,159.5708 424.6282,168.0768 419.1242,175.2728 C413.6182,182.4748 406.7582,188.0558 398.5482,192.0128 C390.3392,195.9698 380.9102,197.9538 370.2622,197.9538 C362.1372,197.9538 354.8722,195.9278 348.4682,191.8788 C342.0592,187.8288 337.0522,182.6558 333.4442,176.3528 L333.4442,240.6138 L322.1882,240.6138 C318.9702,240.6138 315.8442,240.0268 312.8062,238.8578 C309.7682,237.6858 307.0862,236.0228 304.7652,233.8638 C302.4412,231.7038 300.5632,229.0918 299.1382,226.0338 C297.7082,222.9698 296.9942,219.4608 296.9942,215.5038 L296.9942,127.4828 C296.9942,115.4258 298.3872,104.3558 301.1802,94.2728 C303.9682,84.1948 308.3352,75.5548 314.2742,68.3538 C320.2152,61.1558 327.7742,55.5748 336.9542,51.6128 C346.1352,47.6558 357.1112,45.6728 369.8942,45.6728 C379.6142,45.6728 388.5242,47.6978 396.6252,51.7488 C404.7242,55.7978 411.6982,61.1558 417.5502,67.8138 C423.3972,74.4748 427.9442,82.1238 431.1842,90.7628 C434.4252,99.4038 436.0442,108.3128 436.0442,117.4938 Z M398.7842,126.9438 C398.7842,109.6638 395.9362,97.1548 390.2412,89.4138 C384.5462,81.6758 375.8262,77.8028 364.0812,77.8028 C353.9602,77.8028 346.2352,81.7178 340.9032,89.5478 C335.5712,97.3788 332.9042,107.5958 332.9042,120.1938 C332.9042,134.7728 336.1992,146.0248 342.7982,153.9438 C349.3952,161.8658 358.1162,165.8238 368.9622,165.8238 C377.8172,165.8238 385.0022,162.2708 390.5152,155.1588 C396.0252,148.0488 398.7842,138.6458 398.7842,126.9438 Z M581.5745,137.4732 C581.5745,146.8342 579.8615,155.1152 576.4445,162.3132 C573.0225,169.5152 568.3855,175.5892 562.5395,180.5382 C556.6875,185.4912 549.9375,189.2252 542.2895,191.7432 C534.6355,194.2662 526.5835,195.5232 518.1245,195.5232 L498.1435,195.5232 C463.7605,195.5232 446.5745,180.8552 446.5745,151.5132 L446.5745,17.3232 C448.7345,16.6062 451.7925,15.7502 455.7535,14.7582 C459.7105,13.7712 463.9895,12.8262 468.5795,11.9232 C473.1685,11.0252 477.8475,10.3032 482.6195,9.7632 C487.3855,9.2232 491.6645,8.9532 495.4445,8.9532 L517.8535,8.9532 C526.6705,8.9532 534.7715,10.0792 542.1545,12.3282 C549.5325,14.5812 555.9235,17.8212 561.3245,22.0482 C566.7235,26.2802 570.9095,31.4092 573.8785,37.4382 C576.8485,43.4712 578.3345,50.2632 578.3345,57.8232 C578.3345,68.0832 575.7225,76.5002 570.5035,83.0692 C565.2815,89.6412 558.0845,94.2732 548.9045,96.9732 C553.5835,98.2352 557.9025,100.3062 561.8645,103.1832 C565.8215,106.0652 569.2895,109.3512 572.2585,113.0382 C575.2285,116.7302 577.5245,120.7332 579.1435,125.0532 C580.7635,129.3732 581.5745,133.5162 581.5745,137.4732 Z M544.3135,138.5532 C544.3135,128.4752 541.7495,121.5432 536.6195,117.7632 C531.4895,113.9832 523.5245,112.0932 512.7235,112.0932 L483.2935,112.0932 L483.2935,150.1632 C483.2935,153.4042 484.8215,156.1502 487.8835,158.3982 C490.9425,160.6512 494.8115,161.7732 499.4945,161.7732 L514.6145,161.7732 C524.6925,161.7732 532.1645,159.6592 537.0245,155.4282 C541.8835,151.2012 544.3135,145.5742 544.3135,138.5532 Z M541.3435,61.0632 C541.3435,57.1062 540.4875,53.7312 538.7795,50.9382 C537.0665,48.1502 534.8645,45.9432 532.1645,44.3232 C529.4635,42.7032 526.4015,41.5342 522.9845,40.8132 C519.5625,40.0962 516.1415,39.7332 512.7235,39.7332 L498.9545,39.7332 C496.6125,39.7332 494.0005,39.9612 491.1245,40.4082 C488.2425,40.8602 485.5425,41.2642 483.0245,41.6232 L483.0245,83.4732 L511.3745,83.4732 C519.6515,83.4732 526.7175,81.7182 532.5695,78.2082 C538.4165,74.6982 541.3435,68.9862 541.3435,61.0632 Z M727.3733,137.4732 C727.3733,146.8342 725.6603,155.1152 722.2433,162.3132 C718.8213,169.5152 714.1843,175.5892 708.3383,180.5382 C702.4863,185.4912 695.7363,189.2252 688.0883,191.7432 C680.4343,194.2662 672.3823,195.5232 663.9233,195.5232 L643.9423,195.5232 C609.5593,195.5232 592.3733,180.8552 592.3733,151.5132 L592.3733,17.3232 C594.5333,16.6062 597.5913,15.7502 601.5523,14.7582 C605.5093,13.7712 609.7883,12.8262 614.3783,11.9232 C618.9673,11.0252 623.6463,10.3032 628.4183,9.7632 C633.1843,9.2232 637.4633,8.9532 641.2433,8.9532 L663.6523,8.9532 C672.4693,8.9532 680.5703,10.0792 687.9533,12.3282 C695.3313,14.5812 701.7223,17.8212 707.1233,22.0482 C712.5223,26.2802 716.7083,31.4092 719.6773,37.4382 C722.6473,43.4712 724.1333,50.2632 724.1333,57.8232 C724.1333,68.0832 721.5213,76.5002 716.3023,83.0692 C711.0803,89.6412 703.8833,94.2732 694.7033,96.9732 C699.3823,98.2352 703.7013,100.3062 707.6633,103.1832 C711.6203,106.0652 715.0883,109.3512 718.0573,113.0382 C721.0273,116.7302 723.3233,120.7332 724.9423,125.0532 C726.5623,129.3732 727.3733,133.5162 727.3733,137.4732 Z M690.1123,138.5532 C690.1123,128.4752 687.5483,121.5432 682.4183,117.7632 C677.2883,113.9832 669.3233,112.0932 658.5223,112.0932 L629.0923,112.0932 L629.0923,150.1632 C629.0923,153.4042 630.6203,156.1502 633.6823,158.3982 C636.7413,160.6512 640.6103,161.7732 645.2933,161.7732 L660.4133,161.7732 C670.4913,161.7732 677.9633,159.6592 682.8233,155.4282 C687.6823,151.2012 690.1123,145.5742 690.1123,138.5532 Z M687.1423,61.0632 C687.1423,57.1062 686.2863,53.7312 684.5783,50.9382 C682.8653,48.1502 680.6633,45.9432 677.9633,44.3232 C675.2623,42.7032 672.2003,41.5342 668.7833,40.8132 C665.3613,40.0962 661.9403,39.7332 658.5223,39.7332 L644.7533,39.7332 C642.4113,39.7332 639.7993,39.9612 636.9233,40.4082 C634.0413,40.8602 631.3413,41.2642 628.8233,41.6232 L628.8233,83.4732 L657.1733,83.4732 C665.4503,83.4732 672.5163,81.7182 678.3683,78.2082 C684.2153,74.6982 687.1423,68.9862 687.1423,61.0632z" />
</symbol>
</svg>
</div>
<div id="phpbb" class="wrap">
<div class="o-container">
<section>
<h5>Topic/Notification Header</h5>
<div class="c-bar">
<div class="c-bar-left">
<h2 class="c-bar-title">Announcments</h2>
</div>
<div class="c-bar-right">
<a class="o-action" href="#" data-tooltip="true" title="More...">
<span class="iconify o-icon o-action-icon" data-icon="mdi:more-vert" data-inline="false"></span>
</a>
</div>
</div>
</section>
<section>
<h5>Forum Footer</h5>
<div class="c-bar">
<div class="c-bar-left">
<span class="c-bar-info">
<span class="iconify o-icon c-bar-info-icon" data-icon="mdi:file-outline" data-inline="false"></span>
<span class="c-bar-item-text">43</span>
</span>
<span class="c-bar-info">
<span class="iconify o-icon c-bar-info-icon" data-icon="mdi:file-outline" data-inline="false"></span>
<span class="c-bar-item-text">45</span>
</span>
<span class="c-bar-info">
<span class="iconify o-icon c-bar-info-icon" data-icon="mdi:comment-text-outline" data-inline="false"></span>
<span class="c-bar-item-text">98</span>
</span>
</div>
<div class="c-bar-right">
<a class="o-action" href="#" data-tooltip="true" title="Forum Rules, by hanakin, 1403081594">
<span class="iconify o-icon o-action-icon" data-icon="mdi:page-last" data-inline="false"></span>
</a>
<a class="o-action" href="#" data-tooltip="true" title="Forum Rules, by hanakin, 1403081594">
<span class="iconify o-icon o-action-icon" data-icon="mdi:page-last" data-inline="false"></span>
</a>
<a class="o-action" href="#" data-tooltip="true" title="Forum Rules, by hanakin, 1403081594">
<span class="iconify o-icon o-action-icon" data-icon="mdi:page-last" data-inline="false"></span>
</a>
<a class="o-action" href="#" data-tooltip="true" title="Forum Rules, by hanakin, 1403081594">
<span class="iconify o-icon o-action-icon" data-icon="mdi:page-last" data-inline="false"></span>
</a>
</div>
</div>
</section>
<section>
<h5>Post Header</h5>
<div class="o-bar">
<ul class="o-bar-left">
<li class="o-bar-item c-profile-toggle">
<a class="o-bar-action o-bar-profile" href="#" data-toggle="profile">
<span class="o-avatar-wrap o-bar-avatar">
<img class="o-avatar" src="https://avatars2.githubusercontent.com/u/73081?v=4&s=460" alt="User Avatar">
<span class="o-avatar-online o-bar-avatar-online"></span>
</span>
<span class="o-bar-user" style="color: #009900;">
francona
<small class="o-bar-user-title">Infrastructure Team Member</small>
</span>
</a>
<div class="c-profile">
<a class="c-profile-menu" href="" data-container="profile" title="Contact Menu">
<svg class="o-icon c-profile-menu-icon"><use xlink:href="#contact-menu"></use></svg>
</a>
<div class="c-menu-container t-menu-container" data-container="menu">
<ul class="c-menu t-menu">
<li class="c-menu-item t-menu-item">
<a class="c-menu-link c-pm-menu-action" href="#" title="Private Message User">
<svg class="o-icon c-menu-link-icon"><use xlink:href="#pm-user"></use></svg>
<span class="c-menu-text t-forum-text u-sr-only">Private Message User</span>
</a>
<a class="c-menu-link c-pm-menu-action" href="#" title="Private Message User">
<svg class="o-icon c-menu-link-icon"><use xlink:href="#email"></use></svg>
<span class="c-menu-text t-forum-text u-sr-only">Email User</span>
</a>
<a class="c-menu-link c-pm-menu-action" href="#" title="Private Message User">
<svg class="o-icon c-menu-link-icon"><use xlink:href="#skype"></use></svg>
<span class="c-menu-text t-forum-text u-sr-only">Skype User</span>
</a>
<a class="c-menu-link c-pm-menu-action" href="#" title="Vist User's Website">
<svg class="o-icon c-menu-link-icon"><use xlink:href="#website"></use></svg>
<span class="c-menu-text t-forum-text u-sr-only">Vist User's Website</span>
</a>
<a class="c-menu-link c-pm-menu-action" href="#" title="Vist User's Facebook">
<svg class="o-icon c-menu-link-icon"><use xlink:href="#facebook"></use></svg>
<span class="c-menu-text t-forum-text u-sr-only">Vist User's Facebook</span>
</a>
<a class="c-menu-link c-pm-menu-action" href="#" title="Vist User's Twitter">
<svg class="o-icon c-menu-link-icon"><use xlink:href="#twitter"></use></svg>
<span class="c-menu-text t-forum-text u-sr-only">Vist User's Twitter</span>
</a>
<a class="c-menu-link c-pm-menu-action" href="#" title="Vist User's Google Plus">
<svg class="o-icon c-menu-link-icon"><use xlink:href="#google-plus"></use></svg>
<span class="c-menu-text t-forum-text u-sr-only">Vist User's Google Plus</span>
</a>
<a class="c-menu-link c-pm-menu-action" href="#" title="Vist User's Youtube">
<svg class="o-icon c-menu-link-icon"><use xlink:href="#youtube"></use></svg>
<span class="c-menu-text t-forum-text u-sr-only">Vist User's Youtube</span>
</a>
</li>
</ul>
</div>
<a class="c-profile-menu c-profile-close" href="" data-tooltip="true" title="Post Actions">
<svg class="o-icon c-profile-menu-icon"><use xlink:href="#close"></use></svg>
</a>
<div class="o-avatar-wrap">
<a class="o-avatar-rate-good" href=""><svg class="o-icon o-avatar-rate-icon"><use xlink:href="#thumbs-up"></use></svg></a>
<a class="" href="./memberlist.php?mode=viewprofile&u=61815">
<img class="o-avatar" src="https://avatars2.githubusercontent.com/u/73081?v=4&s=460" alt="User Avatar">
</a>
<a class="o-avatar-rate-bad" href=""><svg class="o-icon o-avatar-rate-icon"><use xlink:href="#thumbs-down"></use></svg></a>
<span class="o-avatar-online"></span>
</div>
<h4 class="c-profile-meta">
<a class="c-profile-user" href="{{ post.url }}" style="color: #00BCD4;">hanakin</a>
<small class="c-profile-user-title">Infrastructure Team Member</small>
<svg class="c-profile-group" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 192">
<defs>
<radialGradient id="midaym-a" cx="67.553%" cy="9.812%" r="126.435%" fx="67.553%" fy="9.812%" gradientTransform="matrix(.97059 0 0 1 .02 0)">
<stop offset="0%" stop-color="#263238" stop-opacity=".2"/>
<stop offset="100%" stop-color="#263238" stop-opacity="0"/>
</radialGradient>
<polygon id="midaym-b" points="129.488 89.302 129.488 66.977 151.814 44.651 151.814 147.349 129.488 147.349"/>
<filter id="midaym-c" width="104.5%" height="101%" x="-2.2%" y="-.5%" filterUnits="objectBoundingBox">
<feOffset dx="-1" dy="-1" in="SourceAlpha" result="shadowOffsetInner1"/>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
<feColorMatrix in="shadowInnerInner1" result="shadowMatrixInner1" values="0 0 0 0 0.168627451 0 0 0 0 0.168627451 0 0 0 0 0.168627451 0 0 0 0.1 0"/>
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetInner2"/>
<feComposite in="shadowOffsetInner2" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner2"/>
<feColorMatrix in="shadowInnerInner2" result="shadowMatrixInner2" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
<feMerge>
<feMergeNode in="shadowMatrixInner1"/>
<feMergeNode in="shadowMatrixInner2"/>
</feMerge>
</filter>
<polygon id="midaym-d" points="98.233 89.302 84.837 102.698 84.837 80.372 120.558 44.651 120.558 147.349 98.233 147.349"/>
<filter id="midaym-e" width="102.8%" height="101%" x="-1.4%" y="-.5%" filterUnits="objectBoundingBox">
<feOffset dx="1" dy="-1" in="SourceAlpha" result="shadowOffsetInner1"/>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
<feColorMatrix in="shadowInnerInner1" result="shadowMatrixInner1" values="0 0 0 0 0.168627451 0 0 0 0 0.168627451 0 0 0 0 0.168627451 0 0 0 0.1 0"/>
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetInner2"/>
<feComposite in="shadowOffsetInner2" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner2"/>
<feColorMatrix in="shadowInnerInner2" result="shadowMatrixInner2" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
<feMerge>
<feMergeNode in="shadowMatrixInner1"/>
<feMergeNode in="shadowMatrixInner2"/>
</feMerge>
</filter>
<polygon id="midaym-f" points="53.581 89.302 40.186 102.698 40.186 80.372 75.907 44.651 75.907 147.349 53.581 147.349"/>
<filter id="midaym-g" width="102.8%" height="101%" x="-1.4%" y="-.5%" filterUnits="objectBoundingBox">
<feOffset dx="1" dy="-1" in="SourceAlpha" result="shadowOffsetInner1"/>
<feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/>
<feColorMatrix in="shadowInnerInner1" result="shadowMatrixInner1" values="0 0 0 0 0.168627451 0 0 0 0 0.168627451 0 0 0 0 0.168627451 0 0 0 0.1 0"/>
<feOffset dy="1" in="SourceAlpha" result="shadowOffsetInner2"/>
<feComposite in="shadowOffsetInner2" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner2"/>
<feColorMatrix in="shadowInnerInner2" result="shadowMatrixInner2" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
<feMerge>
<feMergeNode in="shadowMatrixInner1"/>
<feMergeNode in="shadowMatrixInner2"/>
</feMerge>
</filter>
<radialGradient id="midaym-h" cx="0%" cy="0%" r="141.421%" fx="0%" fy="0%">
<stop offset="0%" stop-color="#FFF" stop-opacity=".1"/>
<stop offset="31.631%" stop-color="#FFF" stop-opacity=".1"/>
<stop offset="100%" stop-color="#FFF" stop-opacity="0"/>
</radialGradient>
</defs>
<g fill="none">
<circle cx="96" cy="96" r="96" fill="#00B0FF"/>
<path fill="url(#midaym-a)" d="M85.3111833,191.411642 L40.1860464,147.172583 L62.5116286,147.172583 L62.5116286,89.3023257 L75.9069774,102.697673 L75.9069774,80.3720931 L107.162791,110.644084 L107.162791,89.3023257 L120.558138,102.697675 L120.558138,80.3720931 L151.813953,111.258096 L151.813953,44.6511628 L191.356148,84.8216911 C191.781399,88.4887607 192,92.2188519 192,96 C192,149.019336 149.019336,192 96,192 C92.3869632,192 88.8205444,191.800405 85.3111681,191.41164 L85.3111833,191.411642 Z"/>
<use fill="#F7F7F7" xlink:href="#midaym-b"/>
<use fill="#000" filter="url(#midaym-c)" xlink:href="#midaym-b"/>
<g transform="matrix(-1 0 0 1 205.395 0)">
<use fill="#F7F7F7" xlink:href="#midaym-d"/>
<use fill="#000" filter="url(#midaym-e)" xlink:href="#midaym-d"/>
</g>
<g transform="matrix(-1 0 0 1 116.093 0)">
<use fill="#F7F7F7" xlink:href="#midaym-f"/>
<use fill="#000" filter="url(#midaym-g)" xlink:href="#midaym-f"/>
</g>
<rect width="192" height="192" fill="url(#midaym-h)"/>
</g>
</svg>
</h4>
<ul class="c-profile-stats">
<li class="c-profile-stat">
<h5 class="c-profile-stat-wrap">
<svg class="o-icon"><use xlink:href="#replies"></use></svg><span class="c-profile-stat-title">Posts</span>
<small class="c-profile-stat-value">57,989</small>
</h5>
</li>
<li class="c-profile-stat">
<h5 class="c-profile-stat-wrap">
<svg class="o-icon"><use xlink:href="#time"></use></svg><span class="c-profile-stat-title">Joined</span>
<small class="c-profile-stat-value">
<time>Mar 1999</time>
</small>
</h5>
</li>
<li class="c-profile-stat">
<h5 class="c-profile-stat-wrap">
<svg class="o-icon"><use xlink:href="#thumbs-up"></use></svg><span class="c-profile-stat-title">Rating</span>
<small class="c-profile-stat-value"><span class="c-profile-rating-good">+ 4782</span></small>
</h5>
</li>
<li class="c-profile-stat">
<h5 class="c-profile-stat-wrap">
<svg class="o-icon"><use xlink:href="#place"></use></svg><span class="c-profile-stat-title">Location</span>
<small class="c-profile-stat-value">New York City</small>
</h5>
</li>
</ul>
</div>
</li>
</ul>
<ul class="o-bar-right">
<li class="o-bar-item c-menu-toggle">
<a class="o-bar-action c-menu-button" href="#" data-toggle="menu" data-tooltip="true" title="Post Actions">
<span class="iconify o-icon o-bar-action-icon" data-icon="mdi:more-vert" data-inline="false"></span>
</a>
<div class="c-menu-container" data-container="menu">
<ul class="c-menu">
<li class="c-menu-item">
<a class="c-menu-link">
<svg class="o-icon c-menu-link-icon"><use xlink:href="#yours"></use></svg> <span class="c-menu-text">Your Posts</span>
</a>
</li>
<li class="c-menu-item">
<a class="c-menu-link">
<svg class="o-icon c-menu-link-icon"><use xlink:href="#new"></use></svg> <span class="c-menu-text">New Posts</span>
</a>
</li>
<li class="c-menu-item">
<a class="c-menu-link">
<svg class="o-icon c-menu-link-icon"><use xlink:href="#unread"></use></svg> <span class="c-menu-text">Unread Posts</span>
</a>
</li>
<li class="c-menu-item">
<a class="c-menu-link">
<svg class="o-icon c-menu-link-icon"><use xlink:href="#unanswered"></use></svg> <span class="c-menu-text">Unanswered Posts</span>
</a>
</li>
<li class="c-menu-item">
<a class="c-menu-link">
<svg class="o-icon c-menu-link-icon"><use xlink:href="#active"></use></svg> <span class="c-menu-text">Active Posts</span>
</a>
</li>
<li class="c-menu-divider"></li>
<li class="c-menu-item">
<a class="c-menu-link">
<svg class="o-icon c-menu-link-icon"><use xlink:href="#faq"></use></svg> <span class="c-menu-text">Faq</span>
</a>
</li>
<li class="c-menu-item">
<a class="c-menu-link">
<svg class="o-icon c-menu-link-icon"><use xlink:href="#members"></use></svg> <span class="c-menu-text">Members</span>
</a>
</li>
<li class="c-menu-item">
<a class="c-menu-link">
<svg class="o-icon c-menu-link-icon"><use xlink:href="#team"></use></svg> <span class="c-menu-text">Team</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</section>
<section>
<h5>Nav Bar</h5>
<div class="c-bar c-navbar t-navbar">
<div class="c-bar-left"></div>
<div class="c-bar-right">
<a class="o-action c-navbar-action t-navbar-action" href="#" data-tooltip="true" title="Search...">
<svg class="o-icon o-action-icon c-navbar-action-icon t-navbar-action-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
<path fill-rule="evenodd" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path>
</svg>
</a>
<a class="o-action c-navbar-action t-navbar-action" href="#" data-tooltip="true" title="Notifications">
<svg class="o-icon o-action-icon c-navbar-action-icon t-navbar-action-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
<path fill-rule="evenodd" d="M12 22.5c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.86 6 8.42 6 11.5v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6C8 9.02 9.51 7 12 7s4 2.02 4 4.5v6z"></path>
</svg>
<span class="o-tag o-action-badge c-navbar-badge t-navbar-badge">2</span>
<span class="o-action-text c-navbar-action-text t-navbar-action-text u-sr-only">Notifications</span>
</a>
<a class="o-action c-navbar-action t-navbar-action" href="#" data-tooltip="true" title="Private Messages">
<svg class="o-icon o-action-icon c-navbar-action-icon t-navbar-action-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="false" role="img">
<path fill-rule="evenodd" d="M19 3H4.99c-1.11 0-1.98.89-1.98 2L3 19c0 1.1.88 2 1.99 2H19c1.1 0 2-.9 2-2V5a2 2 0 0 0-2-2zm0 12h-4c0 1.66-1.35 3-3 3s-3-1.34-3-3H4.99V5H19v10z"></path>
</svg>
<span class="o-tag o-action-badge c-navbar-badge t-navbar-badge">103</span>
<span class="o-action-text c-navbar-action-text t-navbar-action-text u-sr-only">Private Messages</span>
</a>
<a class="o-action c-navbar-action t-navbar-action" href="#" data-tooltip="true" title="Hanakin">
<span class="o-avatar-wrap c-bar-avatar c-navbar-avatar t-navbar-avatar">
<img class="o-avatar" src="https://avatars2.githubusercontent.com/u/73081?v=4&amp;s=46" alt="User Avatar">
<span class="o-avatar-online"></span>
</span>
</a>
</div>
</div>
</section>
<section>
<h5>Tool Bar</h5>
<div class="c-editor-toolbar" data-container="toolbar">
<div class="o-bar c-toolbar">
<ul class="o-bar-left c-toolar-row">
<li class="o-bar-item c-toolbar-item">
<a class="o-bar-action c-toolbar-action" href="#" data-tooltip="true" data-toggle="menu" title="Text Size">
<span class="iconify o-icon c-toolar-action-icon" data-icon="mdi:format-size" data-inline="false"></span>
</a>
<div class="c-menu-container" data-container="menu" data-direction="left bottom">
<ul class="c-menu">
<li class="c-menu-item">
<a class="c-menu-link">
<span class="c-menu-text">small (small)</span>
</a>
</li>
<li class="c-menu-item">
<a class="c-menu-link">
<span class="c-menu-text">normal (p)</span>
</a>
</li>
<li class="c-menu-item">
<a class="c-menu-link">
<span class="c-menu-text">Large (h3)</span>
</a>
</li>
<li class="c-menu-item">
<a class="c-menu-link">
<span class="c-menu-text">Huge (h2)</span>
</a>
</li>
</ul>
</div>
</li>
<li class="o-bar-item c-toolbar-item">
<a class="o-bar-action c-toolbar-action" href="#" data-tooltip="true" title="Bold">
<span class="iconify o-icon c-toolar-action-icon" data-icon="mdi:format-bold" data-inline="false"></span>
</a>
</li>
<li class="o-bar-item c-toolbar-item">
<a class="o-bar-action c-toolbar-action" href="#" data-tooltip="true" title="Italics">
<span class="iconify o-icon c-toolar-action-icon" data-icon="mdi:format-italic" data-inline="false"></span>
</a>
</li>
<li class="o-bar-item c-toolbar-item">
<a class="o-bar-action c-toolbar-action" href="#" data-tooltip="true" title="Underline">
<span class="iconify o-icon c-toolar-action-icon" data-icon="mdi:format-underline" data-inline="false"></span>
</a>
</li>
<li class="o-bar-item c-toolbar-item">
<a class="o-bar-action c-toolbar-action" href="#" data-tooltip="true" title="Color">
<span class="iconify o-icon c-toolar-action-icon" data-icon="mdi:format-color-fill" data-inline="false"></span>
</a>
</li>
<li class="o-bar-item c-toolbar-item">
<a class="o-bar-action c-toolbar-action" href="#" data-tooltip="true" title="Code">
<span class="iconify o-icon c-toolar-action-icon" data-icon="mdi:code-tags" data-inline="false"></span>
</a>
</li>
<li class="o-bar-item c-toolbar-item">
<a class="o-bar-action c-toolbar-action" href="#" data-tooltip="true" title="List Numered">
<span class="iconify o-icon c-toolar-action-icon" data-icon="mdi:format-list-numbered" data-inline="false"></span>
</a>
</li>
<li class="o-bar-item c-toolbar-item">
<a class="o-bar-action c-toolbar-action" href="#" data-tooltip="true" title="List Bulleted">
<span class="iconify o-icon c-toolar-action-icon" data-icon="mdi:format-list-bulleted" data-inline="false"></span>
</a>
</li>
<li class="o-bar-item c-toolbar-item">
<a class="o-bar-action c-toolbar-action" href="#" data-tooltip="true" title="List Item">
<span class="iconify o-icon c-toolar-action-icon" data-icon="mdi:playlist-add" data-inline="false"></span>
</a>
</li>
<li class="o-bar-item c-toolbar-item">
<a class="o-bar-action c-toolbar-action" href="#" data-tooltip="true" title="Quote">
<span class="iconify o-icon c-toolar-action-icon" data-icon="mdi:format-quote-open" data-inline="false"></span>
</a>
</li>
<li class="o-bar-item c-toolbar-item">
<a class="o-bar-action c-toolbar-action" href="#" data-tooltip="true" title="Link">
<span class="iconify o-icon c-toolar-action-icon" data-icon="mdi:link-variant" data-inline="false"></span>
</a>
</li>
<li class="o-bar-item c-toolbar-item">
<a class="o-bar-action c-toolbar-action" href="#" data-tooltip="true" title="Add Image">
<span class="iconify o-icon c-toolar-action-icon" data-icon="mdi:image-outline" data-inline="false"></span>
</a>
</li>
</ul>
</div>
</div>
</section>
<section>
<h5>Bar Menu Tests</h5>
<div class="o-bar c-toolbar">
<ul class="o-bar-left">
<li class="o-bar-item">
<a class="o-bar-action" href="#" title="New Topic">
<span class="c-toolbar-action-text">New Topic</span>
<span class="iconify o-icon o-bar-action-icon c-toolbar-action-icon" data-icon="mdi:plus" data-inline="false"></span>
</a>
</li>
</ul>
<ul class="o-bar-right">
<li class="o-bar-item">
<a class="o-bar-action" href="#" data-tooltip="true" title="Jump To">
<span class="iconify o-icon o-bar-action-icon c-toolbar-action-icon" data-icon="ic:outline-directions" data-inline="false"></span>
</a>
<a class="o-bar-action" href="#" data-tooltip="true" title="Filter">
<span class="iconify o-icon o-bar-action-icon c-toolbar-action-icon" data-icon="mdi:filter-variant" data-inline="false"></span>
</a>
<a class="o-bar-action" href="#" data-tooltip="true" title="Sort">
<span class="iconify o-icon o-bar-action-icon c-toolbar-action-icon" data-icon="mdi:sort" data-inline="false"></span>
</a>
<a class="o-bar-action" href="#" data-tooltip="true" title="Order">
<span class="iconify o-icon o-bar-action-icon c-toolbar-action-icon" data-icon="mdi:sort-ascending" data-inline="false"></span>
</a>
</li>
</ul>
</div>
</section>
<section>
<h5>Bar grid Tests</h5>
<div class="c-bar">
<div class="c-bar-left">
<span class="c-bar-info">
<span class="iconify o-icon o-bar-info-icon" data-icon="mdi:file-outline" data-inline="false"></span>
<span class="o-bar-item-text">43</span>
</span>
<span class="c-bar-info">
<span class="iconify o-icon o-bar-info-icon" data-icon="mdi:file-outline" data-inline="false"></span>
<span class="o-bar-item-text">43</span>
</span>
<span class="c-bar-info">
<span class="iconify o-icon o-bar-info-icon" data-icon="mdi:file-outline" data-inline="false"></span>
<span class="o-bar-item-text">43</span>
</span>
</div>
<div class="c-bar-right">
<a class="c-bar-item o-action" href="#" data-tooltip="true" title="Jump To">
<span class="iconify o-icon c-action-icon" data-icon="ic:outline-directions" data-inline="false"></span>
</a>
<a class="c-bar-item o-action" href="#" data-tooltip="true" title="Filter">
<span class="iconify o-icon c-action-icon" data-icon="mdi:filter-variant" data-inline="false"></span>
</a>
<a class="c-bar-item o-action" href="#" data-tooltip="true" title="Sort">
<span class="iconify o-icon c-action-icon" data-icon="mdi:sort" data-inline="false"></span>
</a>
<a class="c-bar-item o-action" href="#" data-tooltip="true" title="Order">
<span class="iconify o-icon c-action-icon" data-icon="mdi:sort-ascending" data-inline="false"></span>
</a>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
//------------------------------------------------------------------------------
// @object: Bar
//------------------------------------------------------------------------------
// @description
//
//------------------------------------------------------------------------------
//
// @settings
// Layout Variables
$bar-spacing: 8px !default;
$bar-avatar-size: 40px !default;
$bar-height: 56px !default;
$bar-logo-max-height: 24px !default;
$bar-logo-width: 64px !default;
$bar-badge-radius: 50px !default;
$bar-badge-width: 10px !default;
$bar-badge-height: 12px !default;
$bar-profile-max: 296px !default;
// Theme Variables
$bar-bg-color: #343a40 !default;
$bar-search-bg-color: #343a40 !default;
$bar-bg-hover-color: #495057 !default;
$bar-color: #868e96 !default;
$bar-hover-color: #008dff !default;
$bar-user-title-color: #f8f9fa !default;
$bar-badge-bg-color: #f44336 !default;
$bar-badge-color: #f8f9fa !default;
//
// @scss
@keyframes grow {
0% {
opacity: 0;
transform: scaleX(0.1);
}
50% {
transform: scaleX(0.99);
}
100% {
opacity: 1;
transform: scaleX(1);
}
}
@keyframes shrink {
0% {
opacity: 1;
transform: scaleX(1);
}
50% {
transform: scaleX(0.01);
}
100% {
opacity: 0;
transform: scaleX(0);
}
}
//
// 1. handle inconsistent rendering of ul across browsers when not using as
// a list element
// 2. Magic alignment
//
.o-bar {
@include parent();
background-color: $bar-bg-color;
flex-wrap: nowrap;
&-left,
&-right,
&-center {
@include parent();
line-height: 0; // [1]
flex-shrink: 1;
margin: 0;
padding: 0;
list-style: none;
}
&-left {
align-self: flex-end;
margin-right: auto; // [2]
}
&-item {
@include child();
position: relative;
}
&-right {
align-self: flex-start;
margin-left: auto; // [2]
}
&-right &-item {
line-height: 0;
}
&-item-text {
padding-left: $bar-spacing;
}
&-info {
@include center($bar-height);
color: $bar-user-title-color;
padding: ($bar-spacing * 2);
padding-right: 0;
}
&-logo {
@include center($bar-height);
position: relative;
overflow: hidden;
padding: ($bar-spacing * 2);
&-icon {
width: $bar-logo-width;
height: auto;
max-height: $bar-logo-max-height;
}
}
&-action {
@include type(subtitle1, $lh: 1.5, $fw: 700);
@include center($bar-height);
color: $bar-color;
position: relative;
overflow: hidden;
padding: ($bar-spacing * 2);
transform: translate3d(0, 0, 0);
&:after {
background-image: radial-gradient(circle, #111418 10%, transparent 10.01%);
background-repeat: no-repeat;
background-position: 50%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: '';
transition: transform 0.5s, opacity 1s;
transform: scale(10, 10);
pointer-events: none;
}
&:active:after {
opacity: 0.2;
transition: 0s;
transform: scale(0, 0);
}
&:hover,
&:focus {
background-color: $bar-bg-hover-color;
outline: 0;
color: $bar-hover-color;
transition: 0.5s;
}
&-text {
display: none;
@media (min-width: $bp-sm) {
display: inline-flex;
}
}
&-icon + &-text,
&-text + &-icon {
padding-left: $bar-spacing;
}
}
&-avatar {
display: inline-block;
width: $bar-avatar-size;
height: $bar-avatar-size;
padding: 0;
}
&-title {
@include type(title, $lh: 1);
@include child();
@include center($bar-height);
float: left;
margin-bottom: 0;
padding: ($bar-spacing * 2);
}
&-profile {
@include center($bar-height);
max-width: $bar-profile-max;
padding: $bar-spacing ($bar-spacing * 2);
}
&-user {
@include type(body1, $lh: 1.35);
padding: 0 $bar-spacing;
&-title {
@include type(caption);
color: $bar-user-title-color;
opacity: 0.54;
display: block;
}
}
&-badge {
background-color: $bar-badge-bg-color;
border-radius: $bar-badge-radius;
color: $bar-badge-color;
overflow: hidden;
align-self: center;
width: $bar-badge-width;
height: $bar-badge-height;
margin: -$bar-badge-height 0 0 -$bar-badge-height;
@media (min-width: $bp-sm) {
color: $bar-badge-color;
display: inline-flex;
width: auto;
height: auto;
}
}
&-search {
background-color: $bar-search-bg-color;
opacity: 0;
position: absolute;
z-index: 999;
float: left;
width: 100%;
transform: scaleX(0);
transform-origin: right;
animation: shrink 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
&.is-active {
animation: grow 400ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
&-form {
@include parent();
justify-content: flex-start;
width: 100%;
margin: 0;
}
&-toggle {
@include type(subtitle1, $lh: 1.5, $fw: 700);
@include center($bar-height);
color: $bar-hover-color;
flex-shrink: 0;
margin-right: 0;
margin-left: 0;
padding: ($bar-spacing * 2);
}
&-action {
@include type(subtitle1, $lh: 1.5, $fw: 700);
@include center($bar-height);
color: $bar-color;
margin-right: 0;
margin-left: auto;
padding: ($bar-spacing * 2);
&:hover,
&:focus {
color: $bar-hover-color;
}
}
&-field {
@include type(subtitle1, $lh: 1.5, $fw: 700);
background-color: transparent;
background-image: none;
border: 0;
color: $bar-color;
display: inline-flex;
justify-content: center;
align-items: center;
height: $bar-height;
padding: ($bar-spacing * 2);
&:hover,
&:focus {
background-color: transparent;
color: $bar-hover-color;
}
}
}
}
// Layout Variables
$action-spacing: $sp1 !default;
$action-height: $default-height !default;
$action-badge-radius: 50px !default;
$action-badge-width: 10px !default;
$action-badge-height: 12px !default;
// Theme Variables
$action-background-hover-color: $default-action-bg-hover !default;
$action-text-color: $default-action-color !default;
$action-text-hover-color: $default-action-color-hover !default;
$action-badge-color: $default-error-item-color !default;
$action-badge-bg-color: $default-error-color !default;
//
// #scss
.o-action {
color: $action-text-color;
display: inline-flex;
justify-content: center;
align-items: center;
height: $action-height;
padding: 2 * $action-spacing;
&:hover,
&:focus {
background-color: $action-background-hover-color;
outline: 0;
color: $action-text-hover-color;
transition: 0.5s;
}
&-text {
display: none;
@media (min-width: $bp-sm) {
display: inline-flex;
}
}
&-icon + &-text,
&-text + &-icon {
padding-left: $action-spacing;
}
&-badge {
background-color: $action-badge-bg-color;
border-radius: $action-badge-radius;
color: $action-badge-bg-color;
overflow: hidden;
align-self: center;
width: $action-badge-width;
height: $action-badge-height;
margin-left: ($action-spacing / 2);
@media (min-width: $bp-sm) {
color: $action-badge-color;
display: inline-flex;
width: auto;
height: auto;
}
}
}
.c-navbar-action {
background-color: $bar-bg-color;
}
.c-bar {
background-color: $bar-bg-color;
display: grid;
grid-template-columns: 1fr 1fr;
&-right {
align-self: flex-end;
margin-left: auto;
display: flex;
flex-direction: row;
}
&-title {
@include type(title, $lh: 1);
@include center($bar-height);
margin-bottom: 0;
padding: ($bar-spacing * 2);
}
&-info {
@include center($bar-height);
color: $bar-user-title-color;
padding: ($bar-spacing * 2);
padding-right: 0;
}
&-item-text {
padding-left: $bar-spacing;
}
&-avatar {
display: inline-block;
width: $bar-avatar-size;
height: $bar-avatar-size;
padding: 0;
}
}
.c-navbar {
background-color: transparent;
}
const $drawerToggle = '[data-toggle="drawer"]';
const $drawer = '[data-container="drawer"]';
const $drawerMenuToggle = '[data-toggle="drawer-menu"]';
const $drawerMenu = '[data-container="drawer-menu"]';
const $page = '[data-container="page"]';
const $notificationToggle = '[data-toggle="notifications"]';
const $notification = '[data-container="notificiations"]';
const $menuToggle = '[data-toggle="menu"]';
const $menu = '[data-container="menu"]';
const $searchToggle = '[data-toggle="search"]';
const $search = '[data-container="search"]';
const $profileToggle = '[data-toggle="profile"]';
const $profile = '[data-container="profile"]';
const $tabs = '[data-toggle="tabs"]';
const $modalToggle = '[data-toggle="modal"]';
const $modal = '[data-container="modal"]';
const $toastToggle = '[data-toggle="toast"]';
const $toast = '[data-container="toast"]';
const $collapseToggle = '[data-toggle="collapse"]';
const $collapseToggleParent = '[data-toggle-parent="collapse"]';
const $collapse = '[data-container="collapse"]';
const $tooltip = '[data-tooltip="true"]';
const $tooltipContainer = '[data-tooltip-container="true"]';
const $toolbarToggle = '[data-toggle="toolbar"]';
const $toolbar = '[data-container="toolbar"]';
const $emojis = '[data-emoji-preview="emoji" ]';
const $emojiPreview = '[data-emoji-preview="container"]';
const $emojiFilter = '[data-emoji-filter="input"]';
/**
* Clears the active state of the provided elements
*
* @param {object} event_ Event
* @param {object} $el The element with the state
* @param {object} $toggle The element that contorls the state
*/
const clearToggle = function (event_, $element, $toggle) {
const { target } = event_;
if (
!$(target).is($element) &&
!$(target).parents().is($element) &&
!$(target).is($toggle) &&
!$(target).parents().is($toggle)
) {
$($element).each(function () {
$(this).toggleClass('is-active', false);
});
}
};
/**
* Returns clearence object for displaying content to avoid edges
*
* @param {object} $target Element to test
* @param {number} x custom top offset
* @param {number} y custom left offset
* @returns {object} boolean for each edge of window and all dimensions and positions
*/
const edgeDetect = ($target, x, y) => {
const $win = $(window);
const tgt = {};
if (!x) {
x = $target.offset().left;
}
if (!y) {
y = $target.offset().top;
}
tgt.left = x;
tgt.top = y;
tgt.width = $target.innerWidth();
tgt.height = $target.innerHeight();
tgt.bottom = (tgt.top + tgt.height);
tgt.right = (tgt.left + tgt.width);
tgt.coordTop = (tgt.top - tgt.height);
tgt.coordLeft = (tgt.left - tgt.width);
tgt.coordRight = $win.width() - (tgt.left + tgt.width);
tgt.coordBottom = $win.height() - (tgt.top + tgt.height);
tgt.isTop = tgt.coordTop > 0;
tgt.isLeft = tgt.coordLeft > 0;
tgt.isRight = tgt.coordRight > tgt.width;
tgt.isBottom = tgt.coordBottom > tgt.coordLeft;
return tgt;
};
/**
* Clears the active state of the provided tabs
*
* @todo Look at refactoring into clearToggle
* @param {object} event_ Event
* @param {object} $links The elements with the state
* @constant {object} $this
* @constant {object} $that
*/
const clearTabs = function (event_, $links) {
$($links).children().each(function () {
const $this = $(this);
const $that = $this.attr('href');
$this.toggleClass('is-active', false);
$($that).toggleClass('is-active', false);
});
};
//---------------------------------------------
/**
* Toggles the "is-active" class for the given element
*
* @this {object}
* @param {object} target element to apply toggle class on
*/
// const isActive = function (target) {
// this.click(event_ => {
// event_.preventDefault();
// event_.stopPropagation();
// target.toggleClass('is-active');
// });
// };
/**
* Toggles the state for Modals
*
* @todo Refactor to toggle function
* @param {object} event_ Event
*/
$($modalToggle).click(event_ => {
event_.preventDefault();
event_.stopPropagation();
$($modal).toggleClass('is-active');
});
//---------------------------------------------
/**
* Replaces emoji preview with selected emoji
*
* @todo Refactor to toggle function
* @param {object} event_ Event
* @constant {object} $this
* @constant {object} $emoji stored emoji html
* @constant {object} $desc stored updated emoji shortnames
*/
$($emojis).hover(event_ => {
const $this = event_.target;
const $emoji = $($this).children();
const emojiLastClass = $emoji.attr('class').split(' ').pop();
let $desc = $($this).attr('data-emoji-name');
$desc = $($emojiPreview).children().last().text($desc);
const newClass = $($emojiPreview).children().first().attr('class').split(' ').pop();
$($emojiPreview).children().remove();
$emoji.clone().removeClass(emojiLastClass).addClass(newClass).appendTo($emojiPreview);
$($emojiPreview).append($desc);
});
//---------------------------------------------
/* eslint-disable no-negated-condition */
/**
* Replaces emoji preview with selected emoji
*
* @todo Refactor to toggle function
* @constant {object} query value to filter
*/
$($emojiFilter).on('input', function () {
const query = this.value;
if (query !== '') {
$('[data-emoji-preview="emoji"]:not([data-emoji-name*="' + query + '"])').hide();
} else {
$($emojis).show();
}
});
/* eslint-enable no-negated-condition */
//---------------------------------------------
/**
* Toggles the state for Collapse
*
* @todo Refactor to toggle function
* @param {object} event_ Event
* @constant {object} $this
*/
$($collapseToggle).click(function (event_) {
const $this = $(this);
const $that = $this.parents($collapseToggleParent).next($collapse);
const tip = $this.attr('data-toggle-tooltip');
event_.preventDefault();
event_.stopPropagation();
$that.toggleClass('is-collapsed');
$this.attr('data-toggle-tooltip', $this.attr('title'));
$this.attr('title', tip);
$this.toggleClass('is-collapsed');
$($tooltipContainer).remove();
});
//---------------------------------------------
/**
* Toggles the state for Toasts
*
* @todo Refactor to toggle function
* @param {object} event_ Event
*/
$($toastToggle).click(event_ => {
event_.preventDefault();
event_.stopPropagation();
$($toast).toggleClass('is-active');
});
//---------------------------------------------
/**
* Toggles the state for Editor Toolbar
*
* @todo Refactor to toggle function
* @param {object} event_ Event
*/
$($toolbarToggle).click(event_ => {
event_.preventDefault();
event_.stopPropagation();
$($toolbar).toggleClass('is-active');
});
//---------------------------------------------
/**
* Toggles the state for Search
*
* @todo Refactor to toggle function
* @param {object} event_ Event
*/
$($searchToggle).click(event_ => {
event_.preventDefault();
event_.stopPropagation();
$($search).toggleClass('is-active');
});
//---------------------------------------------
/**
* Toggles the state for Drawer
*
* @todo Refactor to toggle function
* @param {object} event_ Event
* @constant {object} $that
*/
$($drawerToggle).click(event_ => {
const $that = $($drawer);
event_.preventDefault();
event_.stopPropagation();
$that.toggleClass('is-active');
$($page).attr('style', 'position: relative; transition: 0.35s ease-in-out; left: -' + $that.width() + 'px');
});
/**
* Toggles the state for DrawerMenu
*
* @todo Refactor to toggle function
* @param {object} event_ Event
* @constant {object} $this
*/
$($drawerMenuToggle).click(function (event_) {
const $this = $(this);
event_.preventDefault();
event_.stopPropagation();
$this.next($drawerMenu).toggleClass('is-active');
});
//---------------------------------------------
/**
* Toggles state for Tabs
*
* @constant {object} $this
* @constant {object} $that
* @event Toggle#Tab
* @event Toggle#Content
*/
$($tabs).children().each(function () {
const $this = $(this);
const $that = $($this.attr('href'));
$this.on({
mouseup: event_ => {
event_.preventDefault();
event_.stopPropagation();
clearTabs(event_, $tabs);
$this.toggleClass('is-active');
$that.toggleClass('is-active');
},
});
});
//---------------------------------------------
/**
* Handle state for Notification Menu
*
* @constant {object} $this
* @constant {number} $targetOffset
*/
$($notificationToggle).click(event_ => {
const $this = $($notification);
event_.preventDefault();
event_.stopPropagation();
$this.toggleClass('is-active');
});
//---------------------------------------------
/**
* Handle animation direction for Menus
*
* @todo Refactor into Menu toggle
* @constant {object} $this
* @constant {object} targetOffset
*/
$($menu).each(function () {
const $this = $(this);
const targetOffset = $this.offset();
const $direction = $this.data('direction');
if ($direction) {
$this.css({ 'transform-origin': $direction, top: 'inherit', bottom: 0 });
} else {
if (targetOffset.left > $(window).width() / 2) {
$this.css({ 'transform-origin': 'right top', right: 0 });
} else {
$this.css('transform-origin', 'left top');
}
}
});
/**
* Handle state for Menus
*
* @todo Refactor Menu into this
* @param {object} event_ Event
* @constant {object} $this
* @constant {object} $that
*/
$($menuToggle).click(function (event_) {
const $this = $(this);
const $that = $($menu);
event_.preventDefault();
event_.stopPropagation();
$that.each(() => {
$this.toggleClass('is-active', false);
});
$this.next($menu).toggleClass('is-active');
});
//---------------------------------------------
/**
* Toggles the state for Profile
*
* @todo Refactor to toggle function
* @param {object} event_ Event
* @constant {object} $this
* @constant {object} $that
*/
$($profileToggle).click(event_ => {
event_.preventDefault();
event_.stopPropagation();
const $this = $(this);
console.log($this.attr('href'));
const $that = $($profile);
$that.each(() => {
$this.toggleClass('is-active', false);
});
console.log($this.next($profile).attr('href'));
$this.next($profile).toggleClass('is-active');
});
//---------------------------------------------
/**
* Handles state and creation of Tool Tips
*
* @param {object} event_ Event
* @constant {object} $this
* @constant {object} $that
* @constant {string} tip
* @constant {object} link
* @constant {object} tipPos
* @event Toggle#ShowTip
* @event Toggle#HideTip
*/
$($tooltip).each(function () {
const $this = $(this);
let $that = {};
$this.on({
mouseenter: () => {
$('body').append('<span class="c-tooltip" data-tooltip-container="true"></span>');
$that = $($tooltipContainer);
$that.append($this.attr('title'));
const link = edgeDetect($this);
const tip = edgeDetect($that);
tip.top = (link.bottom + 6);
tip.bottom = (tip.top + tip.height);
tip.left = ((link.left + (link.width / 2)) - (tip.width / 2));
if (tip.top > $(window).height()) {
tip.top = (link.top - tip.height - 12);
}
if ((tip.left + tip.width) > $(window).width()) {
tip.left = ($(window).width() - 8 - tip.width);
}
if (tip.left < 8) {
tip.left = 8;
}
$that.attr('style', 'left: ' + tip.left + 'px; top: ' + tip.top + 'px;');
$that.toggleClass('is-active');
},
mouseleave: () => {
$that.remove();
},
});
});
//----------------------------------------------
/**
* Hide all elements on document load
*
* @constant {object} $this
* @constant {object} $that
* @event Hide#Drawer
* @event Hide#Search
* @event Hide#NotificationMenu
* @event Hide#Menu
* @event Hide#Profile
*/
$(document).on('touchstart mouseup', event_ => {
clearToggle(event_, $search, $searchToggle);
clearToggle(event_, $drawer, $drawerToggle);
clearToggle(event_, $menu, $menuToggle);
clearToggle(event_, $profile, $profileToggle);
clearToggle(event_, $toolbar, $toolbarToggle);
clearToggle(event_, $notification, $notificationToggle);
$($page).removeAttr('style');
});
//---------------------------------------------
Also see: Tab Triggers