1
0
Fork 0
mirror of https://github.com/safing/web synced 2025-04-11 06:29:10 +00:00
safing-web/vendor/safingTailwind/docs/docs.html
2022-10-12 13:05:26 +02:00

12695 lines
401 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Safing Tailwind Docs</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../docs/css/highlight.min.css">
<link rel="stylesheet" href="../docs/css/style.css">
<link rel="stylesheet" href="../safingTailwind-1.10.css">
<script src="../docs/js/vendor/jquery.min.js" type="text/javascript"></script>
<script src="../docs/js/vendor/jquery-resizable.js"></script>
<script src="../docs/js/vendor/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>
<body class="antialiased font-sans font-medium">
<div class="alert-primary rounded-none text-md">
<span>There will be some stuff missing in this, and also some bugs. <strong>v1.10</strong></span>
</div>
<div class="flex">
<nav class="overflow-y-auto pb-10 pt-20 ml-20 w-56">
<h5 class="mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-gray-900">Getting started</h5>
<div class="space-y-1">
<a class="block text-safing-gray-500 pt-2" href="#components">Components</a>
<a class="pl-3 block text-safing-gray-500" href="#alart">Alart</a>
<a class="pl-3 block text-safing-gray-500" href="#button">Button</a>
<a class="pl-3 block text-safing-gray-500" href="#card">Card</a>
<a class="pl-3 block text-safing-gray-500" href="#font-icon">Font-Icon</a>
<a class="pl-3 block text-safing-gray-500" href="#input">Input</a>
<a class="pl-3 block text-safing-gray-500" href="#link">Link</a>
<a class="pl-3 block text-safing-gray-500" href="#profile">Profile</a>
<a class="pl-3 block text-safing-gray-500" href="#spacer">Spacer</a>
<a class="pl-3 block text-safing-gray-500" href="#tag">Tag</a>
<a class="pl-3 block text-safing-gray-500" href="#toggle">Toggle</a>
<a class="pl-3 block text-safing-gray-500" href="#tooltip">Tooltip</a>
<a class="pl-3 block text-safing-gray-500" href="#transition">Transition</a>
<a class="block text-safing-gray-500 pt-2" href="#prebuilt">Prebuilt</a>
<a class="pl-3 block text-safing-gray-500" href="#col-container">Col-Container</a>
<a class="pl-3 block text-safing-gray-500" href="#download-button-container">Download-Button-Container</a>
<a class="pl-3 block text-safing-gray-500" href="#faq-container">Faq-Container</a>
<a class="pl-3 block text-safing-gray-500" href="#footer">Footer</a>
<a class="pl-3 block text-safing-gray-500" href="#markdown-container">Markdown-Container</a>
<a class="pl-3 block text-safing-gray-500" href="#navbar">Navbar</a>
</div>
</nav>
<section class="w-full pl-28 space-y-20 pt-20">
<div class="space-y-2">
<h1 class="block text-black text-xl" id="components">Components</h1>
<span class="text-safing-gray-500">This is the compoents section</span>
</div><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="alart">Alart</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="list space-y-2">
<h1 class="mb-4">Class</h1>
<span class="block text-safing-gray-500">btn</span>
<span class="block text-safing-gray-500">btn-secondary</span>
<span class="block text-safing-gray-500">btn-secondary</span>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Default</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Default-Alart">preview</a></li>
<li><a href="#html-Default-Alart">html</a></li>
<li><a href="#scss-Default-Alart">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Default-Alart" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div class="alert">
<i class="icon-mic text-lg"></i>
<span>Enjoy Podcasts? Privacy YouTuber "TheHatedOne" and I got together to discuss this topic in-depth.</span>
</div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Default-Alart">
<pre><code style="min-height: 200px;" class="language-html">&lt;div class="alert"&gt;
&lt;i class="icon-mic text-lg"&gt;&lt;/i&gt;
&lt;span&gt;Enjoy Podcasts? Privacy YouTuber "TheHatedOne" and I got together to discuss this topic in-depth.&lt;/span&gt;
&lt;/div&gt;</code></pre>
</li>
<li id="scss-Default-Alart">
<pre><code style="min-height: 200px;" class="language-scss">.alert {
@apply bg-gray-600;
@apply text-white;
@apply text-sm;
@apply py-4;
@apply px-9;
@apply rounded-md;
@apply flex;
@apply break-words;
@apply w-full;
@apply space-x-4;
@apply items-center;
@apply justify-center;
}
.alert span {
@apply text-white;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Primary</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Primary-Alart">preview</a></li>
<li><a href="#html-Primary-Alart">html</a></li>
<li><a href="#scss-Primary-Alart">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Primary-Alart" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div class="alert-primary">
<i class="icon-mic text-lg"></i>
<span>Enjoy Podcasts? Privacy YouTuber "TheHatedOne" and I got together to discuss this topic in-depth.</span>
</div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Primary-Alart">
<pre><code style="min-height: 200px;" class="language-html">&lt;div class="alert-primary"&gt;
&lt;i class="icon-mic text-lg"&gt;&lt;/i&gt;
&lt;span&gt;Enjoy Podcasts? Privacy YouTuber "TheHatedOne" and I got together to discuss this topic in-depth.&lt;/span&gt;
&lt;/div&gt;</code></pre>
</li>
<li id="scss-Primary-Alart">
<pre><code style="min-height: 200px;" class="language-scss">.alert-primary {
@apply alert;
@apply bg-safing-blue-600;
}
.alert-primary>.link {
@apply text-white;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Tiny</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Tiny-Alart">preview</a></li>
<li><a href="#html-Tiny-Alart">html</a></li>
<li><a href="#scss-Tiny-Alart">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Tiny-Alart" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div class="alert-tiny">
<i class="icon-mic text-md"></i>
<span>Alpha Software: Portmaster is in active development </span>
</div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Tiny-Alart">
<pre><code style="min-height: 200px;" class="language-html">&lt;div class="alert-tiny"&gt;
&lt;i class="icon-mic text-md"&gt;&lt;/i&gt;
&lt;span&gt;Alpha Software: Portmaster is in active development &lt;/span&gt;
&lt;/div&gt;</code></pre>
</li>
<li id="scss-Tiny-Alart">
<pre><code style="min-height: 200px;" class="language-scss">.alert-tiny {
@apply alert;
@apply text-xs;
@apply rounded-full;
@apply py-2;
@apply px-4;
@apply space-x-3;
@apply justify-start;
}</code></pre>
</li>
</ul>
</div>
</section><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="button">Button</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="list space-y-2">
<h1 class="mb-4">Class</h1>
<span class="block text-safing-gray-500">btn</span>
<span class="block text-safing-gray-500">btn-secondary</span>
<span class="block text-safing-gray-500">btn-secondary</span>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Default</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Default-Button">preview</a></li>
<li><a href="#html-Default-Button">html</a></li>
<li><a href="#scss-Default-Button">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Default-Button" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<button class="btn">Take back your freedom</button>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Default-Button">
<pre><code style="min-height: 200px;" class="language-html">&lt;button class="btn"&gt;Take back your freedom&lt;/button&gt;</code></pre>
</li>
<li id="scss-Default-Button">
<pre><code style="min-height: 200px;" class="language-scss">.btn {
@apply px-10;
padding-top : 0.8rem;
padding-bottom: 0.8rem;
@apply bg-gray-500;
@apply rounded-full;
@apply uppercase;
@apply font-semibold;
@apply text-white;
@apply text-center;
@apply text-xs;
@apply inline-flex;
@apply items-center;
@apply leading-normal;
@apply whitespace-normal;
@apply cursor-pointer;
@apply hover-scale-in;
@apply justify-center ;
}
.btn[disabled],
.btn[disabled],
.btn[disabled],
.btn[disabled] {
@apply bg-safing-gray-100;
@apply text-safing-gray-400;
@apply cursor-not-allowed;
}
.btn[disabled] i,
.btn[disabled] i,
.btn[disabled] i,
.btn[disabled] i {
@apply text-safing-gray-400;
}
.btn[disabled]:hover,
.btn[disabled]:hover,
.btn[disabled]:hover,
.btn[disabled]:hover {
@apply transform;
@apply scale-100;
}
.btn i,
.btn i,
.btn i,
.btn i {
@apply align-baseline;
}
.btn.less-round {
@apply rounded-md;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Primary</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Primary-Button">preview</a></li>
<li><a href="#html-Primary-Button">html</a></li>
<li><a href="#scss-Primary-Button">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Primary-Button" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<button class="btn-primary">Take back your freedom</button>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Primary-Button">
<pre><code style="min-height: 200px;" class="language-html">&lt;button class="btn-primary"&gt;Take back your freedom&lt;/button&gt;</code></pre>
</li>
<li id="scss-Primary-Button">
<pre><code style="min-height: 200px;" class="language-scss">.btn-primary {
@apply btn;
@apply bg-safing-blue-600;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Secondary</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Secondary-Button">preview</a></li>
<li><a href="#html-Secondary-Button">html</a></li>
<li><a href="#scss-Secondary-Button">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Secondary-Button" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<button class="btn-secondary">Take back your freedom</button>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Secondary-Button">
<pre><code style="min-height: 200px;" class="language-html">&lt;button class="btn-secondary"&gt;Take back your freedom&lt;/button&gt;</code></pre>
</li>
<li id="scss-Secondary-Button">
<pre><code style="min-height: 200px;" class="language-scss">.btn-secondary {
@apply btn;
background-color: #2a2a2a;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Tertiary</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Tertiary-Button">preview</a></li>
<li><a href="#html-Tertiary-Button">html</a></li>
<li><a href="#scss-Tertiary-Button">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Tertiary-Button" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<button class="btn-tertiary">Take back your freedom</button>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Tertiary-Button">
<pre><code style="min-height: 200px;" class="language-html">&lt;button class="btn-tertiary"&gt;Take back your freedom&lt;/button&gt;</code></pre>
</li>
<li id="scss-Tertiary-Button">
<pre><code style="min-height: 200px;" class="language-scss">.btn-tertiary {
@apply btn;
@apply text-black;
@apply bg-transparent;
@apply hover-opacity-out;
}</code></pre>
</li>
</ul>
</div>
</section><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="card">Card</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="list space-y-2">
<h1 class="mb-4">Class</h1>
<span class="block text-safing-gray-500">btn</span>
<span class="block text-safing-gray-500">btn-secondary</span>
<span class="block text-safing-gray-500">btn-secondary</span>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Default</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Default-Card">preview</a></li>
<li><a href="#html-Default-Card">html</a></li>
<li><a href="#scss-Default-Card">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Default-Card" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div class="card">
<label class="card-label" for="card-toggle-anchor-2">
<div class="wrapper-left">
<div class="tag-list">
<span class="tag-spn">
SPN
</span>
</div>
<div class="card-title">
<i class="icon-tick text-green-500"></i>
<h1 class="title">Create RSS Feeds</h1>
</div>
</div>
<div class="wrapper-right">
<div class="wrapper-right-profiles">
<div class="circular-profile" tooltip="David">
<img src="https://safing.io/assets/img/profiles/david.png">
</div>
<div class="circular-profile" tooltip="David">
<img src="https://safing.io/assets/img/profiles/david.png">
</div>
<div class="circular-profile" tooltip="David">
<img src="https://safing.io/assets/img/profiles/david.png">
</div>
</div>
<i class="icon-arrow"></i>
</div>
</label>
<input class="card-input-toggle" id="card-toggle-anchor-2" type="checkbox">
<div class="card-dropdown-toggle">
<div class="card-dropdown-content">
<p>The Assignment:</p>
<br>
<p>Revisit the RSS feeds for the blog, the podcast and maybe even the newsletter. We'll see. Make them work.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Default-Card">
<pre><code style="min-height: 200px;" class="language-html">&lt;div class="card"&gt;
&lt;label class="card-label" for="card-toggle-anchor-2"&gt;
&lt;div class="wrapper-left"&gt;
&lt;div class="tag-list"&gt;
&lt;span class="tag-spn"&gt;
SPN
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-title"&gt;
&lt;i class="icon-tick text-green-500"&gt;&lt;/i&gt;
&lt;h1 class="title"&gt;Create RSS Feeds&lt;/h1&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="wrapper-right"&gt;
&lt;div class="wrapper-right-profiles"&gt;
&lt;div class="circular-profile" tooltip="David"&gt;
&lt;img src="https://safing.io/assets/img/profiles/david.png"&gt;
&lt;/div&gt;
&lt;div class="circular-profile" tooltip="David"&gt;
&lt;img src="https://safing.io/assets/img/profiles/david.png"&gt;
&lt;/div&gt;
&lt;div class="circular-profile" tooltip="David"&gt;
&lt;img src="https://safing.io/assets/img/profiles/david.png"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;i class="icon-arrow"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/label&gt;
&lt;input class="card-input-toggle" id="card-toggle-anchor-2" type="checkbox"&gt;
&lt;div class="card-dropdown-toggle"&gt;
&lt;div class="card-dropdown-content"&gt;
&lt;p&gt;The Assignment:&lt;/p&gt;
&lt;br&gt;
&lt;p&gt;Revisit the RSS feeds for the blog, the podcast and maybe even the newsletter. We'll see. Make them work.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</li>
<li id="scss-Default-Card">
<pre><code style="min-height: 200px;" class="language-scss">
.card,
.card-extended {
@apply h-max;
@apply max-w-7xl;
@apply block;
@apply rounded-lg;
@apply bg-white;
}
.card-extended .card {
border-bottom: solid 1px rgba(0, 0, 0, 0.15);
border-top: solid 1px rgba(0, 0, 0, 0.15);
@apply rounded-none;
margin-bottom: 2.5rem;
}
.card-extended > .card-label,
.card > .card-label {
@apply z-10;
@apply flex;
@apply pl-8;
@apply pr-8;
@apply pt-8;
@apply pb-11;
@apply cursor-pointer;
}
.card-extended .card .card-label {
padding-bottom: 1rem;
padding-left: 1rem;
padding-right: 1.5rem;
padding-top: 1rem;
}
.card-extended .wrapper-left,
.card .wrapper-left {
@apply w-full;
}
.card-extended .tag-list,
.card .tag-list {
@apply flex;
@apply items-center;
@apply m-0;
@apply p-0;
}
.card-extended .card .card-title {
@apply pt-0;
}
.card-extended .card-title,
.card .card-title {
@apply flex;
@apply items-center;
@apply w-full;
@apply pt-6;
}
.card-extended .card-title [class^='icon'],
.card-extended .card-title [class*=' icon'],
.card-extended .card-title [class^='icon-'],
.card-extended .card-title [class*=' icon-'],
.card .card-title [class^='icon'],
.card .card-title [class*=' icon'],
.card .card-title [class^='icon-'],
.card .card-title [class*=' icon-'] {
@apply text-xl;
}
.card-extended .card-title .title,
.card .card-title .title {
@apply text-black;
@apply pl-3;
@apply text-lg;
}
.card-extended .card .title {
@apply pl-0;
@apply text-md;
}
.card-extended .wrapper-right,
.card .wrapper-right {
@apply flex;
@apply justify-end;
@apply w-max;
@apply items-center;
@apply space-x-4;
}
.card-extended .wrapper-right .wrapper-right-profiles,
.card .wrapper-right .wrapper-right-profiles {
@apply flex;
@apply space-x-1;
}
.card-extended .icon-arrow,
.card .icon-arrow {
@apply text-sm;
@apply font-normal;
@apply text-black;
@apply transform;
@apply rotate-180;
}
.card-extended .card .card-dropdown-toggle {
@apply pb-0;
padding-left: 1rem;
padding-right: 1rem;
}
.card-extended .card-dropdown-toggle,
.card .card-dropdown-toggle {
@apply pb-14;
@apply pl-8;
@apply pr-8;
@apply hidden;
@apply cursor-auto;
}
.card-extended .card-dropdown-content > h1,
.card .card-dropdown-content > h1 {
@apply text-black;
font-size: 1.1rem;
font-weight: 500;
margin-top: 1.5rem;
}
.card-extended .card-dropdown-content > h1:first-child,
.card .card-dropdown-content > h1:first-child {
margin-top: 0;
}
.card-extended .card-dropdown-content > p {
margin-top: 1rem;
}
.card-extended .card p {
margin-top: 0;
}
.card-extended .card-dropdown-content {
@apply text-md;
@apply pl-0;
@apply pb-4;
}
.card-extended .card-dropdown-content .card .title{
@apply pl-0;
}
.card .card-dropdown-content {
@apply text-black ;
@apply text-md;
@apply pl-0;
}
.card-input-toggle {
@apply hidden;
}
.card-input-toggle:checked+.card-dropdown-toggle {
@apply block;
}
.card.card-shadow,
.card-extended.card-shadow {
@apply relative;
}
.card.card-shadow::after,
.card-extended.card-shadow::after {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0), 0 0 90px 0 rgba(59, 93, 199, 0.1);
content: '';
@apply h-full;
@apply left-0;
@apply absolute;
@apply top-0;
@apply w-full;
z-index: -1;
}
.card.darkmode,
.card-extended.darkmode {
border-width: 2px;
border-color: #1e1e1e;
background-color: #0d0d0d;
@apply rounded-lg;
}
.card.darkmode .card,
.card-extended.darkmode .card {
border-bottom: solid 1px #444343;
border-top: solid 1px #444343;
background-color: transparent;
}
.card.darkmode .icon-arrow,
.card-extended.darkmode .icon-arrow,
.card.darkmode .card-title .title,
.card-extended.darkmode .card-title .title {
color: white;
}
.card.darkmode .card-label,
.card-extended.darkmode .card-label {
background-color: #0d0d0d;
@apply rounded-lg;
}
.card.darkmode .card-dropdown-content,
.card-extended.darkmode .card-dropdown-content {
@apply text-safing-gray-300;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Extended</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Extended-Card">preview</a></li>
<li><a href="#html-Extended-Card">html</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Extended-Card" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div class="card-extended">
<label class="card-label" for="card-toggle-anchor-10">
<div class="wrapper-left">
<div class="tag-list">
<span class="tag-spn">
SPN
</span>
</div>
<div class="card-title">
<i class="icon-tick text-green-500"></i>
<h1 class="title">Create RSS Feeds</h1>
</div>
</div>
<div class="wrapper-right">
<div class="wrapper-right-profiles">
<div class="circular-profile" tooltip="David">
<img src="https://safing.io/assets/img/profiles/david.png">
</div>
<div class="circular-profile" tooltip="David">
<img src="https://safing.io/assets/img/profiles/david.png">
</div>
<div class="circular-profile" tooltip="David">
<img src="https://safing.io/assets/img/profiles/david.png">
</div>
</div>
<i class="icon-arrow"></i>
</div>
</label>
<input class="card-input-toggle" id="card-toggle-anchor-10" type="checkbox">
<div class="card-dropdown-toggle">
<div class="card-dropdown-content">
<div class="card">
<label class="card-label" for="card-toggle-anchor-10-1">
<div class="wrapper-left">
<div class="card-title">
<h1 class="title">Assignment</h1>
</div>
</div>
<div class="wrapper-right">
<i class="icon-arrow"></i>
</div>
</label>
<input class="card-input-toggle" id="card-toggle-anchor-10-1" type="checkbox">
<div class="card-dropdown-toggle">
<div class="card-dropdown-content">
<p>Revisit the RSS feeds for the blog, the podcast and maybe even the newsletter. We'll see. Make them work. </p>
</div>
</div>
</div>
<h1>Safing Blog RSS Finally Arrived</h1>
<p>
This has been a request for over a year. And to be honest, the reason
we never added this was kinda silly: Since progress update posts
(like the one you are reading now) heavily rely on CSS tricks in
order to support noJS, a RSS reader cannot properly format the
progress update. Instead it displays a rather broken blog post. With
no easy solution in sight, the RSS feed just got postponed indefinitely.
But after finally revisiting this topic we came up with a simple solution.
Just add a disclaimer to progress update posts that they are only viewable
in the web-view. Problem solved. Proper communication, and finally a RSS
feed everyone can subscribe to.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Extended-Card">
<pre><code style="min-height: 200px;" class="language-html">&lt;div class="card-extended"&gt;
&lt;label class="card-label" for="card-toggle-anchor-10"&gt;
&lt;div class="wrapper-left"&gt;
&lt;div class="tag-list"&gt;
&lt;span class="tag-spn"&gt;
SPN
&lt;/span&gt;
&lt;/div&gt;
&lt;div class="card-title"&gt;
&lt;i class="icon-tick text-green-500"&gt;&lt;/i&gt;
&lt;h1 class="title"&gt;Create RSS Feeds&lt;/h1&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="wrapper-right"&gt;
&lt;div class="wrapper-right-profiles"&gt;
&lt;div class="circular-profile" tooltip="David"&gt;
&lt;img src="https://safing.io/assets/img/profiles/david.png"&gt;
&lt;/div&gt;
&lt;div class="circular-profile" tooltip="David"&gt;
&lt;img src="https://safing.io/assets/img/profiles/david.png"&gt;
&lt;/div&gt;
&lt;div class="circular-profile" tooltip="David"&gt;
&lt;img src="https://safing.io/assets/img/profiles/david.png"&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;i class="icon-arrow"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/label&gt;
&lt;input class="card-input-toggle" id="card-toggle-anchor-10" type="checkbox"&gt;
&lt;div class="card-dropdown-toggle"&gt;
&lt;div class="card-dropdown-content"&gt;
&lt;div class="card"&gt;
&lt;label class="card-label" for="card-toggle-anchor-10-1"&gt;
&lt;div class="wrapper-left"&gt;
&lt;div class="card-title"&gt;
&lt;h1 class="title"&gt;Assignment&lt;/h1&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="wrapper-right"&gt;
&lt;i class="icon-arrow"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/label&gt;
&lt;input class="card-input-toggle" id="card-toggle-anchor-10-1" type="checkbox"&gt;
&lt;div class="card-dropdown-toggle"&gt;
&lt;div class="card-dropdown-content"&gt;
&lt;p&gt;Revisit the RSS feeds for the blog, the podcast and maybe even the newsletter. We'll see. Make them work. &lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h1&gt;Safing Blog RSS Finally Arrived&lt;/h1&gt;
&lt;p&gt;
This has been a request for over a year. And to be honest, the reason
we never added this was kinda silly: Since progress update posts
(like the one you are reading now) heavily rely on CSS tricks in
order to support noJS, a RSS reader cannot properly format the
progress update. Instead it displays a rather broken blog post. With
no easy solution in sight, the RSS feed just got postponed indefinitely.
But after finally revisiting this topic we came up with a simple solution.
Just add a disclaimer to progress update posts that they are only viewable
in the web-view. Problem solved. Proper communication, and finally a RSS
feed everyone can subscribe to.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</li>
</ul>
</div>
</section><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="font-icon">Font-Icon</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="list space-y-2">
<h1 class="mb-4">Class</h1>
<span class="block text-safing-gray-500">btn</span>
<span class="block text-safing-gray-500">btn-secondary</span>
<span class="block text-safing-gray-500">btn-secondary</span>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Default</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Default-Font-Icon">preview</a></li>
<li><a href="#html-Default-Font-Icon">html</a></li>
<li><a href="#scss-Default-Font-Icon">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Default-Font-Icon" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div class="space-y-10">
<div class="space-y-7">
<span>General Icons</span>
<div class="grid grid-cols-12 auto-cols-max grid-flow-row gap-y-10">
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-add">
<i class="icon-add text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-earth">
<i class="icon-earth text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-reload">
<i class="icon-reload text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-files">
<i class="icon-files text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-cog">
<i class="icon-cog text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-arrow">
<i class="icon-arrow text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-cog-ring">
<i class="icon-cog-ring text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-cross">
<i class="icon-cross text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-external">
<i class="icon-external text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-heart">
<i class="icon-heart text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-info">
<i class="icon-info text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-mic">
<i class="icon-mic text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-play">
<i class="icon-play text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-podcast">
<i class="icon-podcast text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-rss">
<i class="icon-rss text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-shield">
<i class="icon-shield text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-tick">
<i class="icon-tick text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-users">
<i class="icon-users text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-warning">
<i class="icon-warning text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-scales">
<i class="icon-scales text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-chart">
<i class="icon-chart text-lg"></i>
</div>
</div>
</div>
<div class="space-y-7">
<span>Social Icons</span>
<div class="grid grid-cols-12 auto-cols-max grid-flow-row gap-4">
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-github">
<i class="icon-github text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-linkedin">
<i class="icon-linkedin text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-reddit">
<i class="icon-reddit text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-twitter">
<i class="icon-twitter text-lg"></i>
</div>
</div>
</div>
<div class="space-y-7">
<span>Platform Icons</span>
<div class="grid grid-cols-12 auto-cols-max grid-flow-row gap-4">
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-ubuntu">
<i class="icon-ubuntu text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-fedora">
<i class="icon-fedora text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-windows">
<i class="icon-windows text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-linux">
<i class="icon-linux text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-mac">
<i class="icon-mac text-lg"></i>
</div>
<div class="bg-white p-4 w-max m-auto" tooltip=".icon-docker">
<i class="icon-docker text-lg"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Default-Font-Icon">
<pre><code style="min-height: 200px;" class="language-html">&lt;div class="space-y-10"&gt;
&lt;div class="space-y-7"&gt;
&lt;span&gt;General Icons&lt;/span&gt;
&lt;div class="grid grid-cols-12 auto-cols-max grid-flow-row gap-y-10"&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-add"&gt;
&lt;i class="icon-add text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-earth"&gt;
&lt;i class="icon-earth text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-reload"&gt;
&lt;i class="icon-reload text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-files"&gt;
&lt;i class="icon-files text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-cog"&gt;
&lt;i class="icon-cog text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-arrow"&gt;
&lt;i class="icon-arrow text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-cog-ring"&gt;
&lt;i class="icon-cog-ring text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-cross"&gt;
&lt;i class="icon-cross text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-external"&gt;
&lt;i class="icon-external text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-heart"&gt;
&lt;i class="icon-heart text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-info"&gt;
&lt;i class="icon-info text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-mic"&gt;
&lt;i class="icon-mic text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-play"&gt;
&lt;i class="icon-play text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-podcast"&gt;
&lt;i class="icon-podcast text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-rss"&gt;
&lt;i class="icon-rss text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-shield"&gt;
&lt;i class="icon-shield text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-tick"&gt;
&lt;i class="icon-tick text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-users"&gt;
&lt;i class="icon-users text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-warning"&gt;
&lt;i class="icon-warning text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-scales"&gt;
&lt;i class="icon-scales text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-chart"&gt;
&lt;i class="icon-chart text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="space-y-7"&gt;
&lt;span&gt;Social Icons&lt;/span&gt;
&lt;div class="grid grid-cols-12 auto-cols-max grid-flow-row gap-4"&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-github"&gt;
&lt;i class="icon-github text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-linkedin"&gt;
&lt;i class="icon-linkedin text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-reddit"&gt;
&lt;i class="icon-reddit text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-twitter"&gt;
&lt;i class="icon-twitter text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="space-y-7"&gt;
&lt;span&gt;Platform Icons&lt;/span&gt;
&lt;div class="grid grid-cols-12 auto-cols-max grid-flow-row gap-4"&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-ubuntu"&gt;
&lt;i class="icon-ubuntu text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-fedora"&gt;
&lt;i class="icon-fedora text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-windows"&gt;
&lt;i class="icon-windows text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-linux"&gt;
&lt;i class="icon-linux text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-mac"&gt;
&lt;i class="icon-mac text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;div class="bg-white p-4 w-max m-auto" tooltip=".icon-docker"&gt;
&lt;i class="icon-docker text-lg"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</li>
<li id="scss-Default-Font-Icon">
<pre><code style="min-height: 200px;" class="language-scss">@font-face {
font-display: block;
font-family : 'safing-icons';
font-style : normal;
font-weight : normal;
src : url('../fonts/safing-icons.woff2') format('woff2');
}
.icon,
[class^='icon-'],
[class*=' icon-'] {
align-self : center;
font-family : 'safing-icons' !important;
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing: grayscale;
font-style : normal;
font-variant : normal;
font-weight: 100 !important;
line-height : 1;
speak : never;
text-transform : none;
}
.icon-d-shape-object-01:before {
content: var(--icon-d-shape-object-01);
}
.icon-d-shape-object-02:before {
content: var(--icon-d-shape-object-02);
}
.icon-d-shape-object-03:before {
content: var(--icon-d-shape-object-03);
}
.icon-d-shape-object-04:before {
content: var(--icon-d-shape-object-04);
}
.icon-d-shape-object-05:before {
content: var(--icon-d-shape-object-05);
}
.icon-d-shape-object-06:before {
content: var(--icon-d-shape-object-06);
}
.icon-d-shape-object-07:before {
content: var(--icon-d-shape-object-07);
}
.icon-d-shape-object-08:before {
content: var(--icon-d-shape-object-08);
}
.icon-d-shape-object-09:before {
content: var(--icon-d-shape-object-09);
}
.icon-d-shape-object-10:before {
content: var(--icon-d-shape-object-10);
}
.icon-d-shape-object-11:before {
content: var(--icon-d-shape-object-11);
}
.icon-d-shape-object-12:before {
content: var(--icon-d-shape-object-12);
}
.icon-d-shape-object-13:before {
content: var(--icon-d-shape-object-13);
}
.icon-d-shape-object-14:before {
content: var(--icon-d-shape-object-14);
}
.icon-d-shape-object-15:before {
content: var(--icon-d-shape-object-15);
}
.icon-d-shape-object-16:before {
content: var(--icon-d-shape-object-16);
}
.icon-d-shape-object-18:before {
content: var(--icon-d-shape-object-18);
}
.icon-d-shape-object-19:before {
content: var(--icon-d-shape-object-19);
}
.icon-d-shape-object-20:before {
content: var(--icon-d-shape-object-20);
}
.icon-d-ube-sphere:before {
content: var(--icon-d-ube-sphere);
}
.icon-g-signal:before {
content: var(--icon-g-signal);
}
.icon-g-signal1:before {
content: var(--icon-g-signal1);
}
.icon-hours-day:before {
content: var(--icon-hours-day);
}
.icon-hours:before {
content: var(--icon-hours);
}
.icon-a-square-text-button:before {
content: var(--icon-a-square-text-button);
}
.icon-ab-testing:before {
content: var(--icon-ab-testing);
}
.icon-accessibility:before {
content: var(--icon-accessibility);
}
.icon-add-cirlce-plus:before {
content: var(--icon-add-cirlce-plus);
}
.icon-add-plus-minus-zoom-zoom-out:before {
content: var(--icon-add-plus-minus-zoom-zoom-out);
}
.icon-airdrop-signal-share:before {
content: var(--icon-airdrop-signal-share);
}
.icon-alarm-clock:before {
content: var(--icon-alarm-clock);
}
.icon-alarm-clock-time-off-rmove:before {
content: var(--icon-alarm-clock-time-off-rmove);
}
.icon-alarm-clock-time-timer-add:before {
content: var(--icon-alarm-clock-time-timer-add);
}
.icon-alarm-clock-time-timer-sleep-snooze-zzz:before {
content: var(--icon-alarm-clock-time-timer-sleep-snooze-zzz);
}
.icon-alarm-clock-time-timer2:before {
content: var(--icon-alarm-clock-time-timer2);
}
.icon-alarm-clock-time-timer3:before {
content: var(--icon-alarm-clock-time-timer3);
}
.icon-alarm-clock-time-timer:before {
content: var(--icon-alarm-clock-time-timer);
}
.icon-alarm-clock-time-warning:before {
content: var(--icon-alarm-clock-time-warning);
}
.icon-alarm-clock1:before {
content: var(--icon-alarm-clock1);
}
.icon-allow-copying:before {
content: var(--icon-allow-copying);
}
.icon-anchor-ircle-select:before {
content: var(--icon-anchor-ircle-select);
}
.icon-anchor-select-edit:before {
content: var(--icon-anchor-select-edit);
}
.icon-anchor-square-select-add:before {
content: var(--icon-anchor-square-select-add);
}
.icon-anchor-square-select-group:before {
content: var(--icon-anchor-square-select-group);
}
.icon-anchor-square-select-resize:before {
content: var(--icon-anchor-square-select-resize);
}
.icon-anchor-square-select:before {
content: var(--icon-anchor-square-select);
}
.icon-anchor-triangle-select:before {
content: var(--icon-anchor-triangle-select);
}
.icon-app-application:before {
content: var(--icon-app-application);
}
.icon-app-store:before {
content: var(--icon-app-store);
}
.icon-arrow-location-map-direction:before {
content: var(--icon-arrow-location-map-direction);
}
.icon-arrow-rotate-dots:before {
content: var(--icon-arrow-rotate-dots);
}
.icon-arrows-circle:before {
content: var(--icon-arrows-circle);
}
.icon-arrows-diagrams-01:before {
content: var(--icon-arrows-diagrams-01);
}
.icon-arrows-diagrams-02:before {
content: var(--icon-arrows-diagrams-02);
}
.icon-arrows-diagrams-03:before {
content: var(--icon-arrows-diagrams-03);
}
.icon-arrows-diagrams-04:before {
content: var(--icon-arrows-diagrams-04);
}
.icon-arrows-diagrams-05:before {
content: var(--icon-arrows-diagrams-05);
}
.icon-arrows-diagrams-06:before {
content: var(--icon-arrows-diagrams-06);
}
.icon-arrows-diagrams-07:before {
content: var(--icon-arrows-diagrams-07);
}
.icon-arrows-diagrams-08:before {
content: var(--icon-arrows-diagrams-08);
}
.icon-arrows-diagrams-09:before {
content: var(--icon-arrows-diagrams-09);
}
.icon-arrows-diagrams-10:before {
content: var(--icon-arrows-diagrams-10);
}
.icon-arrows-diagrams-11:before {
content: var(--icon-arrows-diagrams-11);
}
.icon-arrows-diagrams-12:before {
content: var(--icon-arrows-diagrams-12);
}
.icon-arrows-diagrams-13:before {
content: var(--icon-arrows-diagrams-13);
}
.icon-arrows-diagrams-14:before {
content: var(--icon-arrows-diagrams-14);
}
.icon-arrows-diagrams-15:before {
content: var(--icon-arrows-diagrams-15);
}
.icon-arrows-diagrams-16:before {
content: var(--icon-arrows-diagrams-16);
}
.icon-arrows-diagrams-17:before {
content: var(--icon-arrows-diagrams-17);
}
.icon-arrows-diagrams-18:before {
content: var(--icon-arrows-diagrams-18);
}
.icon-arrows-diagrams-19:before {
content: var(--icon-arrows-diagrams-19);
}
.icon-arrows-diagrams-20:before {
content: var(--icon-arrows-diagrams-20);
}
.icon-arrows-diagrams-21:before {
content: var(--icon-arrows-diagrams-21);
}
.icon-arrows-diagrams-22:before {
content: var(--icon-arrows-diagrams-22);
}
.icon-arrows-diagrams-23:before {
content: var(--icon-arrows-diagrams-23);
}
.icon-arrows-diagrams-24:before {
content: var(--icon-arrows-diagrams-24);
}
.icon-arrows-diagrams-25:before {
content: var(--icon-arrows-diagrams-25);
}
.icon-arrows-diagrams-26:before {
content: var(--icon-arrows-diagrams-26);
}
.icon-arrows-diagrams-27:before {
content: var(--icon-arrows-diagrams-27);
}
.icon-arrows-diagrams-28:before {
content: var(--icon-arrows-diagrams-28);
}
.icon-arrows-diagrams-29:before {
content: var(--icon-arrows-diagrams-29);
}
.icon-arrows-diagrams-30:before {
content: var(--icon-arrows-diagrams-30);
}
.icon-arrows-diagrams-31:before {
content: var(--icon-arrows-diagrams-31);
}
.icon-arrows-diagrams-32:before {
content: var(--icon-arrows-diagrams-32);
}
.icon-arrows-diagrams-33:before {
content: var(--icon-arrows-diagrams-33);
}
.icon-arrows-diagrams-34:before {
content: var(--icon-arrows-diagrams-34);
}
.icon-arrows-diagrams-35:before {
content: var(--icon-arrows-diagrams-35);
}
.icon-arrows-diagrams-36:before {
content: var(--icon-arrows-diagrams-36);
}
.icon-arrows-diagrams-37:before {
content: var(--icon-arrows-diagrams-37);
}
.icon-arrows-diagrams-38:before {
content: var(--icon-arrows-diagrams-38);
}
.icon-arrows-diagrams-39:before {
content: var(--icon-arrows-diagrams-39);
}
.icon-arrows-diagrams-40:before {
content: var(--icon-arrows-diagrams-40);
}
.icon-arrows-round2:before {
content: var(--icon-arrows-round2);
}
.icon-arrows-round:before {
content: var(--icon-arrows-round);
}
.icon-asian-food:before {
content: var(--icon-asian-food);
}
.icon-atomic-molecule:before {
content: var(--icon-atomic-molecule);
}
.icon-attachment-link-circle:before {
content: var(--icon-attachment-link-circle);
}
.icon-attention-fire:before {
content: var(--icon-attention-fire);
}
.icon-attribution:before {
content: var(--icon-attribution);
}
.icon-award-rating:before {
content: var(--icon-award-rating);
}
.icon-backward-rearward-back-remove:before {
content: var(--icon-backward-rearward-back-remove);
}
.icon-backward-rearward-back:before {
content: var(--icon-backward-rearward-back);
}
.icon-bag-circle-essential-interface-shopping-ui:before {
content: var(--icon-bag-circle-essential-interface-shopping-ui);
}
.icon-bag-gift-package-pack:before {
content: var(--icon-bag-gift-package-pack);
}
.icon-bag-shopping-circle:before {
content: var(--icon-bag-shopping-circle);
}
.icon-bag-shopping-refresh:before {
content: var(--icon-bag-shopping-refresh);
}
.icon-bag-shopping-search:before {
content: var(--icon-bag-shopping-search);
}
.icon-bag-shopping-square:before {
content: var(--icon-bag-shopping-square);
}
.icon-bag-shopping:before {
content: var(--icon-bag-shopping);
}
.icon-bank:before {
content: var(--icon-bank);
}
.icon-barcode-circle:before {
content: var(--icon-barcode-circle);
}
.icon-barcode-search:before {
content: var(--icon-barcode-search);
}
.icon-barcode:before {
content: var(--icon-barcode);
}
.icon-basket-browser:before {
content: var(--icon-basket-browser);
}
.icon-basket-ircle:before {
content: var(--icon-basket-ircle);
}
.icon-basket-messages:before {
content: var(--icon-basket-messages);
}
.icon-basket-mobile:before {
content: var(--icon-basket-mobile);
}
.icon-basket-notification-button:before {
content: var(--icon-basket-notification-button);
}
.icon-basket-pack-enter:before {
content: var(--icon-basket-pack-enter);
}
.icon-basket-refresh:before {
content: var(--icon-basket-refresh);
}
.icon-basket:before {
content: var(--icon-basket);
}
.icon-beer-bottle-glass:before {
content: var(--icon-beer-bottle-glass);
}
.icon-beer:before {
content: var(--icon-beer);
}
.icon-behance-circle:before {
content: var(--icon-behance-circle);
}
.icon-bell-notifications-circle:before {
content: var(--icon-bell-notifications-circle);
}
.icon-bell-notifications2:before {
content: var(--icon-bell-notifications2);
}
.icon-bell-notifications3:before {
content: var(--icon-bell-notifications3);
}
.icon-bell-notifications4:before {
content: var(--icon-bell-notifications4);
}
.icon-bell-notifications:before {
content: var(--icon-bell-notifications);
}
.icon-bezier-curve-pen-tool:before {
content: var(--icon-bezier-curve-pen-tool);
}
.icon-bezier-curve:before {
content: var(--icon-bezier-curve);
}
.icon-blackboard:before {
content: var(--icon-blackboard);
}
.icon-bluetooth-circle:before {
content: var(--icon-bluetooth-circle);
}
.icon-bluetooth-off:before {
content: var(--icon-bluetooth-off);
}
.icon-bluetooth2:before {
content: var(--icon-bluetooth2);
}
.icon-bluetooth:before {
content: var(--icon-bluetooth);
}
.icon-book-download:before {
content: var(--icon-book-download);
}
.icon-book-open2:before {
content: var(--icon-book-open2);
}
.icon-book-open3:before {
content: var(--icon-book-open3);
}
.icon-book-open4:before {
content: var(--icon-book-open4);
}
.icon-book-open5:before {
content: var(--icon-book-open5);
}
.icon-book-open6:before {
content: var(--icon-book-open6);
}
.icon-book-open7:before {
content: var(--icon-book-open7);
}
.icon-book-open:before {
content: var(--icon-book-open);
}
.icon-book:before {
content: var(--icon-book);
}
.icon-bookmark-favorite-add:before {
content: var(--icon-bookmark-favorite-add);
}
.icon-bookmark-favorite-circle:before {
content: var(--icon-bookmark-favorite-circle);
}
.icon-bookmark-favorite-remove:before {
content: var(--icon-bookmark-favorite-remove);
}
.icon-bookmark-notes:before {
content: var(--icon-bookmark-notes);
}
.icon-bookmarks-label-tag-double:before {
content: var(--icon-bookmarks-label-tag-double);
}
.icon-bookmarks-label-tag:before {
content: var(--icon-bookmarks-label-tag);
}
.icon-bookmarks-remove:before {
content: var(--icon-bookmarks-remove);
}
.icon-books-apple:before {
content: var(--icon-books-apple);
}
.icon-brightnes:before {
content: var(--icon-brightnes);
}
.icon-brightness-edit-setting:before {
content: var(--icon-brightness-edit-setting);
}
.icon-broken-link-unlink-attachment-circle:before {
content: var(--icon-broken-link-unlink-attachment-circle);
}
.icon-broken-link-unlink-attachment2:before {
content: var(--icon-broken-link-unlink-attachment2);
}
.icon-broken-link-unlink-attachment3:before {
content: var(--icon-broken-link-unlink-attachment3);
}
.icon-broken-link-unlink-attachment4:before {
content: var(--icon-broken-link-unlink-attachment4);
}
.icon-broken-link-unlink-attachment5:before {
content: var(--icon-broken-link-unlink-attachment5);
}
.icon-broken-link-unlink-attachment:before {
content: var(--icon-broken-link-unlink-attachment);
}
.icon-browser-web-first-place-search-loupe:before {
content: var(--icon-browser-web-first-place-search-loupe);
}
.icon-browser-web-graph-analitycs:before {
content: var(--icon-browser-web-graph-analitycs);
}
.icon-browser-web-search-loupe-checkmark:before {
content: var(--icon-browser-web-search-loupe-checkmark);
}
.icon-browser-web-setting-edit:before {
content: var(--icon-browser-web-setting-edit);
}
.icon-brush:before {
content: var(--icon-brush);
}
.icon-bug-select:before {
content: var(--icon-bug-select);
}
.icon-burger-drink:before {
content: var(--icon-burger-drink);
}
.icon-burger:before {
content: var(--icon-burger);
}
.icon-business-chart-metrics-laptop:before {
content: var(--icon-business-chart-metrics-laptop);
}
.icon-business-chart-metrics:before {
content: var(--icon-business-chart-metrics);
}
.icon-business-chart-research:before {
content: var(--icon-business-chart-research);
}
.icon-business-chart2:before {
content: var(--icon-business-chart2);
}
.icon-business-chart3:before {
content: var(--icon-business-chart3);
}
.icon-business-chart4:before {
content: var(--icon-business-chart4);
}
.icon-business-chart5:before {
content: var(--icon-business-chart5);
}
.icon-business-chart6:before {
content: var(--icon-business-chart6);
}
.icon-business-chart7:before {
content: var(--icon-business-chart7);
}
.icon-business-chart:before {
content: var(--icon-business-chart);
}
.icon-business-products-01:before {
content: var(--icon-business-products-01);
}
.icon-business-products-02:before {
content: var(--icon-business-products-02);
}
.icon-business-products-03:before {
content: var(--icon-business-products-03);
}
.icon-business-products-04:before {
content: var(--icon-business-products-04);
}
.icon-business-products-05:before {
content: var(--icon-business-products-05);
}
.icon-business-products-06:before {
content: var(--icon-business-products-06);
}
.icon-business-products-07:before {
content: var(--icon-business-products-07);
}
.icon-business-products-08:before {
content: var(--icon-business-products-08);
}
.icon-business-products-09:before {
content: var(--icon-business-products-09);
}
.icon-business-products-10:before {
content: var(--icon-business-products-10);
}
.icon-business-products-11:before {
content: var(--icon-business-products-11);
}
.icon-business-products-12:before {
content: var(--icon-business-products-12);
}
.icon-business-products-13:before {
content: var(--icon-business-products-13);
}
.icon-business-products-14:before {
content: var(--icon-business-products-14);
}
.icon-business-products-15:before {
content: var(--icon-business-products-15);
}
.icon-business-products-16:before {
content: var(--icon-business-products-16);
}
.icon-business-products-17:before {
content: var(--icon-business-products-17);
}
.icon-business-products-18:before {
content: var(--icon-business-products-18);
}
.icon-business-products-19:before {
content: var(--icon-business-products-19);
}
.icon-business-products-20:before {
content: var(--icon-business-products-20);
}
.icon-buy-button-sticker:before {
content: var(--icon-buy-button-sticker);
}
.icon-calendar-add-plus:before {
content: var(--icon-calendar-add-plus);
}
.icon-calendar-pages:before {
content: var(--icon-calendar-pages);
}
.icon-calendar-schedule-11:before {
content: var(--icon-calendar-schedule-11);
}
.icon-calendar-schedule-31:before {
content: var(--icon-calendar-schedule-31);
}
.icon-calendar-schedule-add:before {
content: var(--icon-calendar-schedule-add);
}
.icon-calendar-schedule-edit:before {
content: var(--icon-calendar-schedule-edit);
}
.icon-calendar-schedule-percent:before {
content: var(--icon-calendar-schedule-percent);
}
.icon-calendar-schedule-refresh-lading:before {
content: var(--icon-calendar-schedule-refresh-lading);
}
.icon-calendar-schedule-search:before {
content: var(--icon-calendar-schedule-search);
}
.icon-calendar-schedule-star:before {
content: var(--icon-calendar-schedule-star);
}
.icon-calendar-schedule2:before {
content: var(--icon-calendar-schedule2);
}
.icon-calendar-schedule:before {
content: var(--icon-calendar-schedule);
}
.icon-calendar-task-sheet:before {
content: var(--icon-calendar-task-sheet);
}
.icon-camera-iris:before {
content: var(--icon-camera-iris);
}
.icon-camera-photo-auto:before {
content: var(--icon-camera-photo-auto);
}
.icon-camera-photo-front-rear:before {
content: var(--icon-camera-photo-front-rear);
}
.icon-camera-photo-select:before {
content: var(--icon-camera-photo-select);
}
.icon-camera-photo:before {
content: var(--icon-camera-photo);
}
.icon-camera-rotate-vertical:before {
content: var(--icon-camera-rotate-vertical);
}
.icon-camera-rotate:before {
content: var(--icon-camera-rotate);
}
.icon-car-service-parts-01:before {
content: var(--icon-car-service-parts-01);
}
.icon-car-service-parts-02:before {
content: var(--icon-car-service-parts-02);
}
.icon-car-service-parts-03:before {
content: var(--icon-car-service-parts-03);
}
.icon-car-service-parts-04:before {
content: var(--icon-car-service-parts-04);
}
.icon-car-service-parts-05:before {
content: var(--icon-car-service-parts-05);
}
.icon-car-service-parts-06:before {
content: var(--icon-car-service-parts-06);
}
.icon-car-service-parts-07:before {
content: var(--icon-car-service-parts-07);
}
.icon-car-service-parts-08:before {
content: var(--icon-car-service-parts-08);
}
.icon-car-service-parts-09:before {
content: var(--icon-car-service-parts-09);
}
.icon-car-service-parts-10:before {
content: var(--icon-car-service-parts-10);
}
.icon-car-service-parts-11:before {
content: var(--icon-car-service-parts-11);
}
.icon-car-service-parts-12:before {
content: var(--icon-car-service-parts-12);
}
.icon-car-service-parts-13:before {
content: var(--icon-car-service-parts-13);
}
.icon-car-service-parts-14:before {
content: var(--icon-car-service-parts-14);
}
.icon-car-service-parts-15:before {
content: var(--icon-car-service-parts-15);
}
.icon-car-service-parts-16:before {
content: var(--icon-car-service-parts-16);
}
.icon-car-service-parts-17:before {
content: var(--icon-car-service-parts-17);
}
.icon-car-service-parts-18:before {
content: var(--icon-car-service-parts-18);
}
.icon-car-service-parts-19:before {
content: var(--icon-car-service-parts-19);
}
.icon-car-service-parts-20:before {
content: var(--icon-car-service-parts-20);
}
.icon-cashbox:before {
content: var(--icon-cashbox);
}
.icon-charge-lightning-refresh-update:before {
content: var(--icon-charge-lightning-refresh-update);
}
.icon-chart-circle:before {
content: var(--icon-chart-circle);
}
.icon-chat-messages-bubble-circle:before {
content: var(--icon-chat-messages-bubble-circle);
}
.icon-chat-messages-bubble-phone-call:before {
content: var(--icon-chat-messages-bubble-phone-call);
}
.icon-chat-messages-bubble-question:before {
content: var(--icon-chat-messages-bubble-question);
}
.icon-chat-messages-bubble2:before {
content: var(--icon-chat-messages-bubble2);
}
.icon-chat-messages-bubble3:before {
content: var(--icon-chat-messages-bubble3);
}
.icon-chat-messages-bubble4:before {
content: var(--icon-chat-messages-bubble4);
}
.icon-chat-messages-bubble5:before {
content: var(--icon-chat-messages-bubble5);
}
.icon-chat-messages-bubble6:before {
content: var(--icon-chat-messages-bubble6);
}
.icon-chat-messages-bubble7:before {
content: var(--icon-chat-messages-bubble7);
}
.icon-chat-messages-bubble8:before {
content: var(--icon-chat-messages-bubble8);
}
.icon-chat-messages-bubble9:before {
content: var(--icon-chat-messages-bubble9);
}
.icon-chat-messages-bubble10:before {
content: var(--icon-chat-messages-bubble10);
}
.icon-chat-messages-bubble11:before {
content: var(--icon-chat-messages-bubble11);
}
.icon-chat-messages-bubble12:before {
content: var(--icon-chat-messages-bubble12);
}
.icon-chat-messages-bubble13:before {
content: var(--icon-chat-messages-bubble13);
}
.icon-chat-messages-bubble14:before {
content: var(--icon-chat-messages-bubble14);
}
.icon-chat-messages-bubble:before {
content: var(--icon-chat-messages-bubble);
}
.icon-chat-messages:before {
content: var(--icon-chat-messages);
}
.icon-check-payment-pen:before {
content: var(--icon-check-payment-pen);
}
.icon-checkbox2:before {
content: var(--icon-checkbox2);
}
.icon-checkbox:before {
content: var(--icon-checkbox);
}
.icon-checkmark-done-check:before {
content: var(--icon-checkmark-done-check);
}
.icon-chef-gear-apron:before {
content: var(--icon-chef-gear-apron);
}
.icon-chef-gear-hat-square-circle:before {
content: var(--icon-chef-gear-hat-square-circle);
}
.icon-chef-gear-hat-square:before {
content: var(--icon-chef-gear-hat-square);
}
.icon-chef-gear-hat:before {
content: var(--icon-chef-gear-hat);
}
.icon-chip-sim:before {
content: var(--icon-chip-sim);
}
.icon-chocolate:before {
content: var(--icon-chocolate);
}
.icon-chrome:before {
content: var(--icon-chrome);
}
.icon-circle2:before {
content: var(--icon-circle2);
}
.icon-circle:before {
content: var(--icon-circle);
}
.icon-circles-arrow-share:before {
content: var(--icon-circles-arrow-share);
}
.icon-circles-plus-add:before {
content: var(--icon-circles-plus-add);
}
.icon-clap-applause-hands:before {
content: var(--icon-clap-applause-hands);
}
.icon-clip-attachment:before {
content: var(--icon-clip-attachment);
}
.icon-clock-stopwatch:before {
content: var(--icon-clock-stopwatch);
}
.icon-clock-time-arrow:before {
content: var(--icon-clock-time-arrow);
}
.icon-clock-time-timer-fast2:before {
content: var(--icon-clock-time-timer-fast2);
}
.icon-clock-time-timer-fast3:before {
content: var(--icon-clock-time-timer-fast3);
}
.icon-clock-time-timer-fast4:before {
content: var(--icon-clock-time-timer-fast4);
}
.icon-clock-time-timer-fast:before {
content: var(--icon-clock-time-timer-fast);
}
.icon-cmd-command-keyboard:before {
content: var(--icon-cmd-command-keyboard);
}
.icon-code-search:before {
content: var(--icon-code-search);
}
.icon-code-text:before {
content: var(--icon-code-text);
}
.icon-codepen:before {
content: var(--icon-codepen);
}
.icon-codesandbox:before {
content: var(--icon-codesandbox);
}
.icon-color-palette:before {
content: var(--icon-color-palette);
}
.icon-compass-map:before {
content: var(--icon-compass-map);
}
.icon-computer-chat-messages-bubble:before {
content: var(--icon-computer-chat-messages-bubble);
}
.icon-computers-devices-electronics-01:before {
content: var(--icon-computers-devices-electronics-01);
}
.icon-computers-devices-electronics-02:before {
content: var(--icon-computers-devices-electronics-02);
}
.icon-computers-devices-electronics-03:before {
content: var(--icon-computers-devices-electronics-03);
}
.icon-computers-devices-electronics-04:before {
content: var(--icon-computers-devices-electronics-04);
}
.icon-computers-devices-electronics-05:before {
content: var(--icon-computers-devices-electronics-05);
}
.icon-computers-devices-electronics-06:before {
content: var(--icon-computers-devices-electronics-06);
}
.icon-computers-devices-electronics-07:before {
content: var(--icon-computers-devices-electronics-07);
}
.icon-computers-devices-electronics-08:before {
content: var(--icon-computers-devices-electronics-08);
}
.icon-computers-devices-electronics-09:before {
content: var(--icon-computers-devices-electronics-09);
}
.icon-computers-devices-electronics-10:before {
content: var(--icon-computers-devices-electronics-10);
}
.icon-computers-devices-electronics-11:before {
content: var(--icon-computers-devices-electronics-11);
}
.icon-computers-devices-electronics-12:before {
content: var(--icon-computers-devices-electronics-12);
}
.icon-computers-devices-electronics-13:before {
content: var(--icon-computers-devices-electronics-13);
}
.icon-computers-devices-electronics-14:before {
content: var(--icon-computers-devices-electronics-14);
}
.icon-computers-devices-electronics-15:before {
content: var(--icon-computers-devices-electronics-15);
}
.icon-computers-devices-electronics-16:before {
content: var(--icon-computers-devices-electronics-16);
}
.icon-computers-devices-electronics-17:before {
content: var(--icon-computers-devices-electronics-17);
}
.icon-computers-devices-electronics-18:before {
content: var(--icon-computers-devices-electronics-18);
}
.icon-computers-devices-electronics-19:before {
content: var(--icon-computers-devices-electronics-19);
}
.icon-computers-devices-electronics-20:before {
content: var(--icon-computers-devices-electronics-20);
}
.icon-content-01:before {
content: var(--icon-content-01);
}
.icon-content-02:before {
content: var(--icon-content-02);
}
.icon-content-03:before {
content: var(--icon-content-03);
}
.icon-content-04:before {
content: var(--icon-content-04);
}
.icon-content-05:before {
content: var(--icon-content-05);
}
.icon-content-06:before {
content: var(--icon-content-06);
}
.icon-content-07:before {
content: var(--icon-content-07);
}
.icon-content-08:before {
content: var(--icon-content-08);
}
.icon-content-09:before {
content: var(--icon-content-09);
}
.icon-content-10:before {
content: var(--icon-content-10);
}
.icon-content-11:before {
content: var(--icon-content-11);
}
.icon-content-12:before {
content: var(--icon-content-12);
}
.icon-content-13:before {
content: var(--icon-content-13);
}
.icon-content-14:before {
content: var(--icon-content-14);
}
.icon-content-15:before {
content: var(--icon-content-15);
}
.icon-content-16:before {
content: var(--icon-content-16);
}
.icon-content-17:before {
content: var(--icon-content-17);
}
.icon-content-18:before {
content: var(--icon-content-18);
}
.icon-content-19:before {
content: var(--icon-content-19);
}
.icon-content-20:before {
content: var(--icon-content-20);
}
.icon-contract-document-seal:before {
content: var(--icon-contract-document-seal);
}
.icon-copy-grid-plus:before {
content: var(--icon-copy-grid-plus);
}
.icon-copy-paste-select-add-plus:before {
content: var(--icon-copy-paste-select-add-plus);
}
.icon-copyright2:before {
content: var(--icon-copyright2);
}
.icon-copyright:before {
content: var(--icon-copyright);
}
.icon-creative-commons:before {
content: var(--icon-creative-commons);
}
.icon-credit-card-check-done:before {
content: var(--icon-credit-card-check-done);
}
.icon-credit-card-dollar:before {
content: var(--icon-credit-card-dollar);
}
.icon-credit-card-mobile:before {
content: var(--icon-credit-card-mobile);
}
.icon-credit-card-payment-action2:before {
content: var(--icon-credit-card-payment-action2);
}
.icon-credit-card-payment-action3:before {
content: var(--icon-credit-card-payment-action3);
}
.icon-credit-card-payment-action:before {
content: var(--icon-credit-card-payment-action);
}
.icon-credit-card-shield-protected:before {
content: var(--icon-credit-card-shield-protected);
}
.icon-credit-card-smartphone-get:before {
content: var(--icon-credit-card-smartphone-get);
}
.icon-credit-card-smartphone-send:before {
content: var(--icon-credit-card-smartphone-send);
}
.icon-credit-card-smartphone:before {
content: var(--icon-credit-card-smartphone);
}
.icon-credit-card-sync:before {
content: var(--icon-credit-card-sync);
}
.icon-credit-card2:before {
content: var(--icon-credit-card2);
}
.icon-credit-card:before {
content: var(--icon-credit-card);
}
.icon-credit-cards:before {
content: var(--icon-credit-cards);
}
.icon-crop-edit-refresh:before {
content: var(--icon-crop-edit-refresh);
}
.icon-crop-edit-rotate-vertical:before {
content: var(--icon-crop-edit-rotate-vertical);
}
.icon-crop-edit-select:before {
content: var(--icon-crop-edit-select);
}
.icon-crypto-currency-01:before {
content: var(--icon-crypto-currency-01);
}
.icon-crypto-currency-02:before {
content: var(--icon-crypto-currency-02);
}
.icon-crypto-currency-03:before {
content: var(--icon-crypto-currency-03);
}
.icon-crypto-currency-04:before {
content: var(--icon-crypto-currency-04);
}
.icon-crypto-currency-05:before {
content: var(--icon-crypto-currency-05);
}
.icon-crypto-currency-06:before {
content: var(--icon-crypto-currency-06);
}
.icon-crypto-currency-07:before {
content: var(--icon-crypto-currency-07);
}
.icon-crypto-currency-08:before {
content: var(--icon-crypto-currency-08);
}
.icon-crypto-currency-09:before {
content: var(--icon-crypto-currency-09);
}
.icon-crypto-currency-10:before {
content: var(--icon-crypto-currency-10);
}
.icon-crypto-currency-11:before {
content: var(--icon-crypto-currency-11);
}
.icon-crypto-currency-12:before {
content: var(--icon-crypto-currency-12);
}
.icon-crypto-currency-13:before {
content: var(--icon-crypto-currency-13);
}
.icon-crypto-currency-14:before {
content: var(--icon-crypto-currency-14);
}
.icon-crypto-currency-15:before {
content: var(--icon-crypto-currency-15);
}
.icon-crypto-currency-16:before {
content: var(--icon-crypto-currency-16);
}
.icon-crypto-currency-17:before {
content: var(--icon-crypto-currency-17);
}
.icon-crypto-currency-18:before {
content: var(--icon-crypto-currency-18);
}
.icon-crypto-currency-19:before {
content: var(--icon-crypto-currency-19);
}
.icon-crypto-currency-20:before {
content: var(--icon-crypto-currency-20);
}
.icon-crypto-currency-bitcoin-ethereum2:before {
content: var(--icon-crypto-currency-bitcoin-ethereum2);
}
.icon-crypto-currency-bitcoin-ethereum3:before {
content: var(--icon-crypto-currency-bitcoin-ethereum3);
}
.icon-crypto-currency-bitcoin-ethereum4:before {
content: var(--icon-crypto-currency-bitcoin-ethereum4);
}
.icon-crypto-currency-bitcoin-ethereum5:before {
content: var(--icon-crypto-currency-bitcoin-ethereum5);
}
.icon-crypto-currency-bitcoin-ethereum6:before {
content: var(--icon-crypto-currency-bitcoin-ethereum6);
}
.icon-crypto-currency-bitcoin-ethereum7:before {
content: var(--icon-crypto-currency-bitcoin-ethereum7);
}
.icon-crypto-currency-bitcoin-ethereum8:before {
content: var(--icon-crypto-currency-bitcoin-ethereum8);
}
.icon-crypto-currency-bitcoin-ethereum9:before {
content: var(--icon-crypto-currency-bitcoin-ethereum9);
}
.icon-crypto-currency-bitcoin-ethereum10:before {
content: var(--icon-crypto-currency-bitcoin-ethereum10);
}
.icon-crypto-currency-bitcoin-ethereum11:before {
content: var(--icon-crypto-currency-bitcoin-ethereum11);
}
.icon-crypto-currency-bitcoin-ethereum12:before {
content: var(--icon-crypto-currency-bitcoin-ethereum12);
}
.icon-crypto-currency-bitcoin-ethereum13:before {
content: var(--icon-crypto-currency-bitcoin-ethereum13);
}
.icon-crypto-currency-bitcoin-ethereum14:before {
content: var(--icon-crypto-currency-bitcoin-ethereum14);
}
.icon-crypto-currency-bitcoin-ethereum15:before {
content: var(--icon-crypto-currency-bitcoin-ethereum15);
}
.icon-crypto-currency-bitcoin-ethereum16:before {
content: var(--icon-crypto-currency-bitcoin-ethereum16);
}
.icon-crypto-currency-bitcoin-ethereum17:before {
content: var(--icon-crypto-currency-bitcoin-ethereum17);
}
.icon-crypto-currency-bitcoin-ethereum18:before {
content: var(--icon-crypto-currency-bitcoin-ethereum18);
}
.icon-crypto-currency-bitcoin-ethereum19:before {
content: var(--icon-crypto-currency-bitcoin-ethereum19);
}
.icon-crypto-currency-bitcoin-ethereum:before {
content: var(--icon-crypto-currency-bitcoin-ethereum);
}
.icon-cube:before {
content: var(--icon-cube);
}
.icon-cupcake-cherry:before {
content: var(--icon-cupcake-cherry);
}
.icon-currency-course:before {
content: var(--icon-currency-course);
}
.icon-cursor-click-select-circle:before {
content: var(--icon-cursor-click-select-circle);
}
.icon-cursor-click-select:before {
content: var(--icon-cursor-click-select);
}
.icon-cursor-disable-click-plus:before {
content: var(--icon-cursor-disable-click-plus);
}
.icon-cursor-disable-click:before {
content: var(--icon-cursor-disable-click);
}
.icon-cursor-loading-waiting:before {
content: var(--icon-cursor-loading-waiting);
}
.icon-cursor-menu-select:before {
content: var(--icon-cursor-menu-select);
}
.icon-cursor-select-checkbox:before {
content: var(--icon-cursor-select-checkbox);
}
.icon-cursor-select-circle:before {
content: var(--icon-cursor-select-circle);
}
.icon-cursor-select-hand-arrow:before {
content: var(--icon-cursor-select-hand-arrow);
}
.icon-cursor-select-hand-browser:before {
content: var(--icon-cursor-select-hand-browser);
}
.icon-cursor-select-hand-button:before {
content: var(--icon-cursor-select-hand-button);
}
.icon-cursor-select-hand-checkmark:before {
content: var(--icon-cursor-select-hand-checkmark);
}
.icon-cursor-select-hand-click:before {
content: var(--icon-cursor-select-hand-click);
}
.icon-cursor-select-hand-double-click:before {
content: var(--icon-cursor-select-hand-double-click);
}
.icon-cursor-select-hand-page:before {
content: var(--icon-cursor-select-hand-page);
}
.icon-cursor-select-hand-password:before {
content: var(--icon-cursor-select-hand-password);
}
.icon-cursor-select-hand-remove:before {
content: var(--icon-cursor-select-hand-remove);
}
.icon-cursor-select-hand-search:before {
content: var(--icon-cursor-select-hand-search);
}
.icon-cursor-select-hand-swipe-left:before {
content: var(--icon-cursor-select-hand-swipe-left);
}
.icon-cursor-select-hand-swipe-right:before {
content: var(--icon-cursor-select-hand-swipe-right);
}
.icon-cursor-select-hand2:before {
content: var(--icon-cursor-select-hand2);
}
.icon-cursor-select-hand3:before {
content: var(--icon-cursor-select-hand3);
}
.icon-cursor-select-hand4:before {
content: var(--icon-cursor-select-hand4);
}
.icon-cursor-select-hand5:before {
content: var(--icon-cursor-select-hand5);
}
.icon-cursor-select-hand6:before {
content: var(--icon-cursor-select-hand6);
}
.icon-cursor-select-hand7:before {
content: var(--icon-cursor-select-hand7);
}
.icon-cursor-select-hand:before {
content: var(--icon-cursor-select-hand);
}
.icon-cursor-select-pasword:before {
content: var(--icon-cursor-select-pasword);
}
.icon-cursor-select2:before {
content: var(--icon-cursor-select2);
}
.icon-cursor-select:before {
content: var(--icon-cursor-select);
}
.icon-cursor-swipe-right:before {
content: var(--icon-cursor-swipe-right);
}
.icon-dashboard:before {
content: var(--icon-dashboard);
}
.icon-decagon:before {
content: var(--icon-decagon);
}
.icon-delete-disabled-ross-hexagon:before {
content: var(--icon-delete-disabled-ross-hexagon);
}
.icon-delite:before {
content: var(--icon-delite);
}
.icon-delivery-01:before {
content: var(--icon-delivery-01);
}
.icon-delivery-02:before {
content: var(--icon-delivery-02);
}
.icon-delivery-03:before {
content: var(--icon-delivery-03);
}
.icon-delivery-04:before {
content: var(--icon-delivery-04);
}
.icon-delivery-05:before {
content: var(--icon-delivery-05);
}
.icon-delivery-06:before {
content: var(--icon-delivery-06);
}
.icon-delivery-07:before {
content: var(--icon-delivery-07);
}
.icon-delivery-08:before {
content: var(--icon-delivery-08);
}
.icon-delivery-09:before {
content: var(--icon-delivery-09);
}
.icon-delivery-10:before {
content: var(--icon-delivery-10);
}
.icon-delivery-11:before {
content: var(--icon-delivery-11);
}
.icon-delivery-12:before {
content: var(--icon-delivery-12);
}
.icon-delivery-13:before {
content: var(--icon-delivery-13);
}
.icon-delivery-14:before {
content: var(--icon-delivery-14);
}
.icon-delivery-15:before {
content: var(--icon-delivery-15);
}
.icon-delivery-16:before {
content: var(--icon-delivery-16);
}
.icon-delivery-17:before {
content: var(--icon-delivery-17);
}
.icon-delivery-18:before {
content: var(--icon-delivery-18);
}
.icon-delivery-19:before {
content: var(--icon-delivery-19);
}
.icon-delivery-20:before {
content: var(--icon-delivery-20);
}
.icon-design-01:before {
content: var(--icon-design-01);
}
.icon-design-02:before {
content: var(--icon-design-02);
}
.icon-design-03:before {
content: var(--icon-design-03);
}
.icon-design-04:before {
content: var(--icon-design-04);
}
.icon-design-05:before {
content: var(--icon-design-05);
}
.icon-design-06:before {
content: var(--icon-design-06);
}
.icon-design-07:before {
content: var(--icon-design-07);
}
.icon-design-08:before {
content: var(--icon-design-08);
}
.icon-design-09:before {
content: var(--icon-design-09);
}
.icon-design-10:before {
content: var(--icon-design-10);
}
.icon-design-11:before {
content: var(--icon-design-11);
}
.icon-design-12:before {
content: var(--icon-design-12);
}
.icon-design-13:before {
content: var(--icon-design-13);
}
.icon-design-14:before {
content: var(--icon-design-14);
}
.icon-design-15:before {
content: var(--icon-design-15);
}
.icon-design-16:before {
content: var(--icon-design-16);
}
.icon-design-17:before {
content: var(--icon-design-17);
}
.icon-design-18:before {
content: var(--icon-design-18);
}
.icon-design-19:before {
content: var(--icon-design-19);
}
.icon-design-20:before {
content: var(--icon-design-20);
}
.icon-design-21:before {
content: var(--icon-design-21);
}
.icon-design-22:before {
content: var(--icon-design-22);
}
.icon-design-23:before {
content: var(--icon-design-23);
}
.icon-design-24:before {
content: var(--icon-design-24);
}
.icon-design-25:before {
content: var(--icon-design-25);
}
.icon-design-26:before {
content: var(--icon-design-26);
}
.icon-design-27:before {
content: var(--icon-design-27);
}
.icon-design-28:before {
content: var(--icon-design-28);
}
.icon-design-29:before {
content: var(--icon-design-29);
}
.icon-design-30:before {
content: var(--icon-design-30);
}
.icon-design-31:before {
content: var(--icon-design-31);
}
.icon-design-32:before {
content: var(--icon-design-32);
}
.icon-design-33:before {
content: var(--icon-design-33);
}
.icon-design-34:before {
content: var(--icon-design-34);
}
.icon-design-35:before {
content: var(--icon-design-35);
}
.icon-design-36:before {
content: var(--icon-design-36);
}
.icon-design-38:before {
content: var(--icon-design-38);
}
.icon-design-39:before {
content: var(--icon-design-39);
}
.icon-design-40:before {
content: var(--icon-design-40);
}
.icon-design-41:before {
content: var(--icon-design-41);
}
.icon-design-42:before {
content: var(--icon-design-42);
}
.icon-design-43:before {
content: var(--icon-design-43);
}
.icon-design-44:before {
content: var(--icon-design-44);
}
.icon-design-45:before {
content: var(--icon-design-45);
}
.icon-design-46:before {
content: var(--icon-design-46);
}
.icon-design-47:before {
content: var(--icon-design-47);
}
.icon-design-48:before {
content: var(--icon-design-48);
}
.icon-design-49:before {
content: var(--icon-design-49);
}
.icon-design-50:before {
content: var(--icon-design-50);
}
.icon-design-51:before {
content: var(--icon-design-51);
}
.icon-design-52:before {
content: var(--icon-design-52);
}
.icon-design-53:before {
content: var(--icon-design-53);
}
.icon-design-54:before {
content: var(--icon-design-54);
}
.icon-design-55:before {
content: var(--icon-design-55);
}
.icon-design-56:before {
content: var(--icon-design-56);
}
.icon-design-57:before {
content: var(--icon-design-57);
}
.icon-design-58:before {
content: var(--icon-design-58);
}
.icon-design-59:before {
content: var(--icon-design-59);
}
.icon-design-60:before {
content: var(--icon-design-60);
}
.icon-design-tool-stamp:before {
content: var(--icon-design-tool-stamp);
}
.icon-devices-mobile-tablet-computer:before {
content: var(--icon-devices-mobile-tablet-computer);
}
.icon-direction-arrow:before {
content: var(--icon-direction-arrow);
}
.icon-direction-square-arrows:before {
content: var(--icon-direction-square-arrows);
}
.icon-discount-oupon2:before {
content: var(--icon-discount-oupon2);
}
.icon-discount-oupon:before {
content: var(--icon-discount-oupon);
}
.icon-display-graduate-hat:before {
content: var(--icon-display-graduate-hat);
}
.icon-divide:before {
content: var(--icon-divide);
}
.icon-document-text-edit:before {
content: var(--icon-document-text-edit);
}
.icon-document-text-search:before {
content: var(--icon-document-text-search);
}
.icon-documents-notes-pages:before {
content: var(--icon-documents-notes-pages);
}
.icon-dollar-payments-onversion:before {
content: var(--icon-dollar-payments-onversion);
}
.icon-dollar-payments:before {
content: var(--icon-dollar-payments);
}
.icon-dollar-select:before {
content: var(--icon-dollar-select);
}
.icon-dollar:before {
content: var(--icon-dollar);
}
.icon-done-check-checkmark:before {
content: var(--icon-done-check-checkmark);
}
.icon-download-arrows-loading:before {
content: var(--icon-download-arrows-loading);
}
.icon-download-save-upload:before {
content: var(--icon-download-save-upload);
}
.icon-dribbble-circle:before {
content: var(--icon-dribbble-circle);
}
.icon-drink2:before {
content: var(--icon-drink2);
}
.icon-drink:before {
content: var(--icon-drink);
}
.icon-dropbox-circle:before {
content: var(--icon-dropbox-circle);
}
.icon-dual-sim:before {
content: var(--icon-dual-sim);
}
.icon-ear:before {
content: var(--icon-ear);
}
.icon-earth-home-world-select:before {
content: var(--icon-earth-home-world-select);
}
.icon-earth-pin-location-direction:before {
content: var(--icon-earth-pin-location-direction);
}
.icon-email-:before {
content: var(--icon-email-);
}
.icon-email--circle:before {
content: var(--icon-email--circle);
}
.icon-email-circle:before {
content: var(--icon-email-circle);
}
.icon-emails-letter-mail-square:before {
content: var(--icon-emails-letter-mail-square);
}
.icon-emails-letter-mail:before {
content: var(--icon-emails-letter-mail);
}
.icon-exit-log-out2:before {
content: var(--icon-exit-log-out2);
}
.icon-exit-log-out3:before {
content: var(--icon-exit-log-out3);
}
.icon-exit-log-out:before {
content: var(--icon-exit-log-out);
}
.icon-expand-pathfinder-intersect2:before {
content: var(--icon-expand-pathfinder-intersect2);
}
.icon-expand-pathfinder-intersect3:before {
content: var(--icon-expand-pathfinder-intersect3);
}
.icon-expand-pathfinder-intersect:before {
content: var(--icon-expand-pathfinder-intersect);
}
.icon-eye-circle:before {
content: var(--icon-eye-circle);
}
.icon-eye-show-hide:before {
content: var(--icon-eye-show-hide);
}
.icon-eye-show-visible:before {
content: var(--icon-eye-show-visible);
}
.icon-eye-square:before {
content: var(--icon-eye-square);
}
.icon-eye:before {
content: var(--icon-eye);
}
.icon-face-id:before {
content: var(--icon-face-id);
}
.icon-facebook-circle:before {
content: var(--icon-facebook-circle);
}
.icon-facebook-messanger-circle:before {
content: var(--icon-facebook-messanger-circle);
}
.icon-facebook-messanger-square:before {
content: var(--icon-facebook-messanger-square);
}
.icon-feather:before {
content: var(--icon-feather);
}
.icon-figma:before {
content: var(--icon-figma);
}
.icon-files-01:before {
content: var(--icon-files-01);
}
.icon-files-02:before {
content: var(--icon-files-02);
}
.icon-files-03:before {
content: var(--icon-files-03);
}
.icon-files-04:before {
content: var(--icon-files-04);
}
.icon-files-05:before {
content: var(--icon-files-05);
}
.icon-files-06:before {
content: var(--icon-files-06);
}
.icon-files-07:before {
content: var(--icon-files-07);
}
.icon-files-08:before {
content: var(--icon-files-08);
}
.icon-files-09:before {
content: var(--icon-files-09);
}
.icon-files-10:before {
content: var(--icon-files-10);
}
.icon-files-11:before {
content: var(--icon-files-11);
}
.icon-files-12:before {
content: var(--icon-files-12);
}
.icon-files-13:before {
content: var(--icon-files-13);
}
.icon-files-14:before {
content: var(--icon-files-14);
}
.icon-files-15:before {
content: var(--icon-files-15);
}
.icon-files-16:before {
content: var(--icon-files-16);
}
.icon-files-17:before {
content: var(--icon-files-17);
}
.icon-files-18:before {
content: var(--icon-files-18);
}
.icon-files-19:before {
content: var(--icon-files-19);
}
.icon-files-20:before {
content: var(--icon-files-20);
}
.icon-filter-settings-sort:before {
content: var(--icon-filter-settings-sort);
}
.icon-filter-sort-a-z:before {
content: var(--icon-filter-sort-a-z);
}
.icon-filter-sort-circle-disable-delite:before {
content: var(--icon-filter-sort-circle-disable-delite);
}
.icon-filter-sort-circle:before {
content: var(--icon-filter-sort-circle);
}
.icon-filter-sort:before {
content: var(--icon-filter-sort);
}
.icon-finder-icon:before {
content: var(--icon-finder-icon);
}
.icon-fingerprint-circle:before {
content: var(--icon-fingerprint-circle);
}
.icon-fingerprint-id:before {
content: var(--icon-fingerprint-id);
}
.icon-fingerprint:before {
content: var(--icon-fingerprint);
}
.icon-fish-eye:before {
content: var(--icon-fish-eye);
}
.icon-flag-circle:before {
content: var(--icon-flag-circle);
}
.icon-flash:before {
content: var(--icon-flash);
}
.icon-flip-up:before {
content: var(--icon-flip-up);
}
.icon-folder-blank:before {
content: var(--icon-folder-blank);
}
.icon-folder-circle:before {
content: var(--icon-folder-circle);
}
.icon-folders-01:before {
content: var(--icon-folders-01);
}
.icon-folders-02:before {
content: var(--icon-folders-02);
}
.icon-folders-03:before {
content: var(--icon-folders-03);
}
.icon-folders-04:before {
content: var(--icon-folders-04);
}
.icon-folders-05:before {
content: var(--icon-folders-05);
}
.icon-folders-06:before {
content: var(--icon-folders-06);
}
.icon-folders-07:before {
content: var(--icon-folders-07);
}
.icon-folders-08:before {
content: var(--icon-folders-08);
}
.icon-folders-09:before {
content: var(--icon-folders-09);
}
.icon-folders-10:before {
content: var(--icon-folders-10);
}
.icon-folders-11:before {
content: var(--icon-folders-11);
}
.icon-folders-12:before {
content: var(--icon-folders-12);
}
.icon-folders-13:before {
content: var(--icon-folders-13);
}
.icon-folders-15:before {
content: var(--icon-folders-15);
}
.icon-folders-16:before {
content: var(--icon-folders-16);
}
.icon-folders-17:before {
content: var(--icon-folders-17);
}
.icon-folders-18:before {
content: var(--icon-folders-18);
}
.icon-folders-19:before {
content: var(--icon-folders-19);
}
.icon-folders-20:before {
content: var(--icon-folders-20);
}
.icon-fork-knife:before {
content: var(--icon-fork-knife);
}
.icon-fork-spoon:before {
content: var(--icon-fork-spoon);
}
.icon-forward-5-seconds:before {
content: var(--icon-forward-5-seconds);
}
.icon-forward-15-seconds:before {
content: var(--icon-forward-15-seconds);
}
.icon-framer:before {
content: var(--icon-framer);
}
.icon-free-rights:before {
content: var(--icon-free-rights);
}
.icon-french-fries:before {
content: var(--icon-french-fries);
}
.icon-full-signal:before {
content: var(--icon-full-signal);
}
.icon-geometric-01:before {
content: var(--icon-geometric-01);
}
.icon-geometric-02:before {
content: var(--icon-geometric-02);
}
.icon-geometric-03:before {
content: var(--icon-geometric-03);
}
.icon-geometric-04:before {
content: var(--icon-geometric-04);
}
.icon-geometric-05:before {
content: var(--icon-geometric-05);
}
.icon-geometric-06:before {
content: var(--icon-geometric-06);
}
.icon-geometric-07:before {
content: var(--icon-geometric-07);
}
.icon-geometric-08:before {
content: var(--icon-geometric-08);
}
.icon-geometric-09:before {
content: var(--icon-geometric-09);
}
.icon-geometric-10:before {
content: var(--icon-geometric-10);
}
.icon-geometric-11:before {
content: var(--icon-geometric-11);
}
.icon-geometric-12:before {
content: var(--icon-geometric-12);
}
.icon-geometric-13:before {
content: var(--icon-geometric-13);
}
.icon-geometric-14:before {
content: var(--icon-geometric-14);
}
.icon-geometric-15:before {
content: var(--icon-geometric-15);
}
.icon-geometric-16:before {
content: var(--icon-geometric-16);
}
.icon-geometric-17:before {
content: var(--icon-geometric-17);
}
.icon-geometric-18:before {
content: var(--icon-geometric-18);
}
.icon-geometric-19:before {
content: var(--icon-geometric-19);
}
.icon-geometric-20:before {
content: var(--icon-geometric-20);
}
.icon-geometric-21:before {
content: var(--icon-geometric-21);
}
.icon-geometric-22:before {
content: var(--icon-geometric-22);
}
.icon-geometric-23:before {
content: var(--icon-geometric-23);
}
.icon-geometric-24:before {
content: var(--icon-geometric-24);
}
.icon-geometric-25:before {
content: var(--icon-geometric-25);
}
.icon-geometric-26:before {
content: var(--icon-geometric-26);
}
.icon-geometric-27:before {
content: var(--icon-geometric-27);
}
.icon-geometric-28:before {
content: var(--icon-geometric-28);
}
.icon-geometric-29:before {
content: var(--icon-geometric-29);
}
.icon-geometric-30:before {
content: var(--icon-geometric-30);
}
.icon-geometric-31:before {
content: var(--icon-geometric-31);
}
.icon-geometric-32:before {
content: var(--icon-geometric-32);
}
.icon-geometric-33:before {
content: var(--icon-geometric-33);
}
.icon-geometric-34:before {
content: var(--icon-geometric-34);
}
.icon-geometric-35:before {
content: var(--icon-geometric-35);
}
.icon-geometric-36:before {
content: var(--icon-geometric-36);
}
.icon-geometric-37:before {
content: var(--icon-geometric-37);
}
.icon-geometric-38:before {
content: var(--icon-geometric-38);
}
.icon-geometric-39:before {
content: var(--icon-geometric-39);
}
.icon-geometric-40:before {
content: var(--icon-geometric-40);
}
.icon-gif-circle:before {
content: var(--icon-gif-circle);
}
.icon-gift-sticker:before {
content: var(--icon-gift-sticker);
}
.icon-gitlab:before {
content: var(--icon-gitlab);
}
.icon-glasses-invisible:before {
content: var(--icon-glasses-invisible);
}
.icon-glasses:before {
content: var(--icon-glasses);
}
.icon-global-search:before {
content: var(--icon-global-search);
}
.icon-globe-earth-home-world:before {
content: var(--icon-globe-earth-home-world);
}
.icon-globe-transaction-world:before {
content: var(--icon-globe-transaction-world);
}
.icon-google-drive:before {
content: var(--icon-google-drive);
}
.icon-google-play-circle:before {
content: var(--icon-google-play-circle);
}
.icon-google:before {
content: var(--icon-google);
}
.icon-graduate-hat:before {
content: var(--icon-graduate-hat);
}
.icon-graph-analitycs-select:before {
content: var(--icon-graph-analitycs-select);
}
.icon-graph-analitycs:before {
content: var(--icon-graph-analitycs);
}
.icon-graph-google-analitycs:before {
content: var(--icon-graph-google-analitycs);
}
.icon-graphic-tablet-draw:before {
content: var(--icon-graphic-tablet-draw);
}
.icon-grater:before {
content: var(--icon-grater);
}
.icon-grid-artboard-add-plus:before {
content: var(--icon-grid-artboard-add-plus);
}
.icon-grid-layout-add:before {
content: var(--icon-grid-layout-add);
}
.icon-grid-layout-square:before {
content: var(--icon-grid-layout-square);
}
.icon-grid-layout:before {
content: var(--icon-grid-layout);
}
.icon-group-elements-ticket:before {
content: var(--icon-group-elements-ticket);
}
.icon-group-user-add:before {
content: var(--icon-group-user-add);
}
.icon-group-user:before {
content: var(--icon-group-user);
}
.icon-hand-select:before {
content: var(--icon-hand-select);
}
.icon-hand-select-click:before {
content: var(--icon-hand-select-click);
}
.icon-hand-select-drag2:before {
content: var(--icon-hand-select-drag2);
}
.icon-hand-select-drag:before {
content: var(--icon-hand-select-drag);
}
.icon-hand-select-snap:before {
content: var(--icon-hand-select-snap);
}
.icon-hand-select-stop:before {
content: var(--icon-hand-select-stop);
}
.icon-hand-select-swipe-right:before {
content: var(--icon-hand-select-swipe-right);
}
.icon-hand-select2:before {
content: var(--icon-hand-select2);
}
.icon-hand-select3:before {
content: var(--icon-hand-select3);
}
.icon-hand-select4:before {
content: var(--icon-hand-select4);
}
.icon-hand-select5:before {
content: var(--icon-hand-select5);
}
.icon-hand-select6:before {
content: var(--icon-hand-select6);
}
.icon-hand-select7:before {
content: var(--icon-hand-select7);
}
.icon-hand-select8:before {
content: var(--icon-hand-select8);
}
.icon-hand-select1:before {
content: var(--icon-hand-select1);
}
.icon-hand-trackped-drag:before {
content: var(--icon-hand-trackped-drag);
}
.icon-hands-off:before {
content: var(--icon-hands-off);
}
.icon-handshake-deal-circle:before {
content: var(--icon-handshake-deal-circle);
}
.icon-hashtag-circle:before {
content: var(--icon-hashtag-circle);
}
.icon-hashtag-square:before {
content: var(--icon-hashtag-square);
}
.icon-hashtag-trends:before {
content: var(--icon-hashtag-trends);
}
.icon-headphone:before {
content: var(--icon-headphone);
}
.icon-headphones-customer-support:before {
content: var(--icon-headphones-customer-support);
}
.icon-health-01:before {
content: var(--icon-health-01);
}
.icon-health-02:before {
content: var(--icon-health-02);
}
.icon-health-03:before {
content: var(--icon-health-03);
}
.icon-health-04:before {
content: var(--icon-health-04);
}
.icon-health-05:before {
content: var(--icon-health-05);
}
.icon-health-06:before {
content: var(--icon-health-06);
}
.icon-health-07:before {
content: var(--icon-health-07);
}
.icon-health-08:before {
content: var(--icon-health-08);
}
.icon-health-09:before {
content: var(--icon-health-09);
}
.icon-health-10:before {
content: var(--icon-health-10);
}
.icon-health-11:before {
content: var(--icon-health-11);
}
.icon-health-12:before {
content: var(--icon-health-12);
}
.icon-health-13:before {
content: var(--icon-health-13);
}
.icon-health-14:before {
content: var(--icon-health-14);
}
.icon-health-15:before {
content: var(--icon-health-15);
}
.icon-health-16:before {
content: var(--icon-health-16);
}
.icon-health-17:before {
content: var(--icon-health-17);
}
.icon-health-18:before {
content: var(--icon-health-18);
}
.icon-health-19:before {
content: var(--icon-health-19);
}
.icon-health-20:before {
content: var(--icon-health-20);
}
.icon-heart-favorite-add:before {
content: var(--icon-heart-favorite-add);
}
.icon-heart-favorite-like-story:before {
content: var(--icon-heart-favorite-like-story);
}
.icon-heart-favorite:before {
content: var(--icon-heart-favorite);
}
.icon-help-wheel:before {
content: var(--icon-help-wheel);
}
.icon-heptagon:before {
content: var(--icon-heptagon);
}
.icon-home-circle:before {
content: var(--icon-home-circle);
}
.icon-home-house2:before {
content: var(--icon-home-house2);
}
.icon-home-house:before {
content: var(--icon-home-house);
}
.icon-home-lock-protection:before {
content: var(--icon-home-lock-protection);
}
.icon-home-square:before {
content: var(--icon-home-square);
}
.icon-hot-dog:before {
content: var(--icon-hot-dog);
}
.icon-http-square:before {
content: var(--icon-http-square);
}
.icon-ice-cream2:before {
content: var(--icon-ice-cream2);
}
.icon-ice-cream:before {
content: var(--icon-ice-cream);
}
.icon-id-circle:before {
content: var(--icon-id-circle);
}
.icon-id-square:before {
content: var(--icon-id-square);
}
.icon-igtv:before {
content: var(--icon-igtv);
}
.icon-imac-dollar-money:before {
content: var(--icon-imac-dollar-money);
}
.icon-imac-lock-protection:before {
content: var(--icon-imac-lock-protection);
}
.icon-instagram-circle:before {
content: var(--icon-instagram-circle);
}
.icon-instagram-square:before {
content: var(--icon-instagram-square);
}
.icon-interaction-teamwork-group:before {
content: var(--icon-interaction-teamwork-group);
}
.icon-interface-essential-01:before {
content: var(--icon-interface-essential-01);
}
.icon-interface-essential-02:before {
content: var(--icon-interface-essential-02);
}
.icon-interface-essential-03:before {
content: var(--icon-interface-essential-03);
}
.icon-interface-essential-04:before {
content: var(--icon-interface-essential-04);
}
.icon-interface-essential-05:before {
content: var(--icon-interface-essential-05);
}
.icon-interface-essential-06:before {
content: var(--icon-interface-essential-06);
}
.icon-interface-essential-07:before {
content: var(--icon-interface-essential-07);
}
.icon-interface-essential-08:before {
content: var(--icon-interface-essential-08);
}
.icon-interface-essential-09:before {
content: var(--icon-interface-essential-09);
}
.icon-interface-essential-10:before {
content: var(--icon-interface-essential-10);
}
.icon-interface-essential-11:before {
content: var(--icon-interface-essential-11);
}
.icon-interface-essential-12:before {
content: var(--icon-interface-essential-12);
}
.icon-interface-essential-13:before {
content: var(--icon-interface-essential-13);
}
.icon-interface-essential-14:before {
content: var(--icon-interface-essential-14);
}
.icon-interface-essential-15:before {
content: var(--icon-interface-essential-15);
}
.icon-interface-essential-16:before {
content: var(--icon-interface-essential-16);
}
.icon-interface-essential-17:before {
content: var(--icon-interface-essential-17);
}
.icon-interface-essential-18:before {
content: var(--icon-interface-essential-18);
}
.icon-interface-essential-19:before {
content: var(--icon-interface-essential-19);
}
.icon-interface-essential-20:before {
content: var(--icon-interface-essential-20);
}
.icon-interface-essential-21:before {
content: var(--icon-interface-essential-21);
}
.icon-interface-essential-22:before {
content: var(--icon-interface-essential-22);
}
.icon-interface-essential-23:before {
content: var(--icon-interface-essential-23);
}
.icon-interface-essential-24:before {
content: var(--icon-interface-essential-24);
}
.icon-interface-essential-25:before {
content: var(--icon-interface-essential-25);
}
.icon-interface-essential-28:before {
content: var(--icon-interface-essential-28);
}
.icon-interface-essential-29:before {
content: var(--icon-interface-essential-29);
}
.icon-interface-essential-30:before {
content: var(--icon-interface-essential-30);
}
.icon-interface-essential-31:before {
content: var(--icon-interface-essential-31);
}
.icon-interface-essential-32:before {
content: var(--icon-interface-essential-32);
}
.icon-interface-essential-33:before {
content: var(--icon-interface-essential-33);
}
.icon-interface-essential-34:before {
content: var(--icon-interface-essential-34);
}
.icon-interface-essential-35:before {
content: var(--icon-interface-essential-35);
}
.icon-interface-essential-36:before {
content: var(--icon-interface-essential-36);
}
.icon-interface-essential-37:before {
content: var(--icon-interface-essential-37);
}
.icon-interface-essential-38:before {
content: var(--icon-interface-essential-38);
}
.icon-interface-essential-39:before {
content: var(--icon-interface-essential-39);
}
.icon-interface-essential-40:before {
content: var(--icon-interface-essential-40);
}
.icon-interface-essential-41:before {
content: var(--icon-interface-essential-41);
}
.icon-interface-essential-42:before {
content: var(--icon-interface-essential-42);
}
.icon-interface-essential-44:before {
content: var(--icon-interface-essential-44);
}
.icon-interface-essential-45:before {
content: var(--icon-interface-essential-45);
}
.icon-interface-essential-46:before {
content: var(--icon-interface-essential-46);
}
.icon-interface-essential-47:before {
content: var(--icon-interface-essential-47);
}
.icon-interface-essential-48:before {
content: var(--icon-interface-essential-48);
}
.icon-interface-essential-49:before {
content: var(--icon-interface-essential-49);
}
.icon-interface-essential-50:before {
content: var(--icon-interface-essential-50);
}
.icon-interface-essential-51:before {
content: var(--icon-interface-essential-51);
}
.icon-interface-essential-52:before {
content: var(--icon-interface-essential-52);
}
.icon-interface-essential-53:before {
content: var(--icon-interface-essential-53);
}
.icon-interface-essential-54:before {
content: var(--icon-interface-essential-54);
}
.icon-interface-essential-55:before {
content: var(--icon-interface-essential-55);
}
.icon-interface-essential-56:before {
content: var(--icon-interface-essential-56);
}
.icon-interface-essential-57:before {
content: var(--icon-interface-essential-57);
}
.icon-interface-essential-58:before {
content: var(--icon-interface-essential-58);
}
.icon-interface-essential-59:before {
content: var(--icon-interface-essential-59);
}
.icon-interface-essential-60:before {
content: var(--icon-interface-essential-60);
}
.icon-interface-essential-61:before {
content: var(--icon-interface-essential-61);
}
.icon-interface-essential-62:before {
content: var(--icon-interface-essential-62);
}
.icon-interface-essential-63:before {
content: var(--icon-interface-essential-63);
}
.icon-interface-essential-64:before {
content: var(--icon-interface-essential-64);
}
.icon-interface-essential-65:before {
content: var(--icon-interface-essential-65);
}
.icon-interface-essential-66:before {
content: var(--icon-interface-essential-66);
}
.icon-interface-essential-67:before {
content: var(--icon-interface-essential-67);
}
.icon-interface-essential-68:before {
content: var(--icon-interface-essential-68);
}
.icon-interface-essential-69:before {
content: var(--icon-interface-essential-69);
}
.icon-interface-essential-70:before {
content: var(--icon-interface-essential-70);
}
.icon-interface-essential-71:before {
content: var(--icon-interface-essential-71);
}
.icon-interface-essential-72:before {
content: var(--icon-interface-essential-72);
}
.icon-interface-essential-73:before {
content: var(--icon-interface-essential-73);
}
.icon-interface-essential-74:before {
content: var(--icon-interface-essential-74);
}
.icon-interface-essential-75:before {
content: var(--icon-interface-essential-75);
}
.icon-interface-essential-76:before {
content: var(--icon-interface-essential-76);
}
.icon-interface-essential-77:before {
content: var(--icon-interface-essential-77);
}
.icon-interface-essential-78:before {
content: var(--icon-interface-essential-78);
}
.icon-interface-essential-81:before {
content: var(--icon-interface-essential-81);
}
.icon-interface-essential-82:before {
content: var(--icon-interface-essential-82);
}
.icon-interface-essential-84:before {
content: var(--icon-interface-essential-84);
}
.icon-interface-essential-85:before {
content: var(--icon-interface-essential-85);
}
.icon-interface-essential-86:before {
content: var(--icon-interface-essential-86);
}
.icon-interface-essential-87:before {
content: var(--icon-interface-essential-87);
}
.icon-interface-essential-88:before {
content: var(--icon-interface-essential-88);
}
.icon-interface-essential-89:before {
content: var(--icon-interface-essential-89);
}
.icon-interface-essential-90:before {
content: var(--icon-interface-essential-90);
}
.icon-interface-essential-91:before {
content: var(--icon-interface-essential-91);
}
.icon-interface-essential-92:before {
content: var(--icon-interface-essential-92);
}
.icon-interface-essential-93:before {
content: var(--icon-interface-essential-93);
}
.icon-interface-essential-94:before {
content: var(--icon-interface-essential-94);
}
.icon-interface-essential-95:before {
content: var(--icon-interface-essential-95);
}
.icon-interface-essential-96:before {
content: var(--icon-interface-essential-96);
}
.icon-interface-essential-97:before {
content: var(--icon-interface-essential-97);
}
.icon-interface-essential-98:before {
content: var(--icon-interface-essential-98);
}
.icon-interface-essential-99:before {
content: var(--icon-interface-essential-99);
}
.icon-interface-essential-100:before {
content: var(--icon-interface-essential-100);
}
.icon-interface-essential-101:before {
content: var(--icon-interface-essential-101);
}
.icon-interface-essential-102:before {
content: var(--icon-interface-essential-102);
}
.icon-interface-essential-103:before {
content: var(--icon-interface-essential-103);
}
.icon-interface-essential-104:before {
content: var(--icon-interface-essential-104);
}
.icon-interface-essential-105:before {
content: var(--icon-interface-essential-105);
}
.icon-interface-essential-106:before {
content: var(--icon-interface-essential-106);
}
.icon-interface-essential-107:before {
content: var(--icon-interface-essential-107);
}
.icon-interface-essential-108:before {
content: var(--icon-interface-essential-108);
}
.icon-interface-essential-109:before {
content: var(--icon-interface-essential-109);
}
.icon-interface-essential-110:before {
content: var(--icon-interface-essential-110);
}
.icon-interface-essential-111:before {
content: var(--icon-interface-essential-111);
}
.icon-interface-essential-112:before {
content: var(--icon-interface-essential-112);
}
.icon-interface-essential-113:before {
content: var(--icon-interface-essential-113);
}
.icon-interface-essential-114:before {
content: var(--icon-interface-essential-114);
}
.icon-interface-essential-115:before {
content: var(--icon-interface-essential-115);
}
.icon-interface-essential-116:before {
content: var(--icon-interface-essential-116);
}
.icon-interface-essential-117:before {
content: var(--icon-interface-essential-117);
}
.icon-interface-essential-118:before {
content: var(--icon-interface-essential-118);
}
.icon-interface-essential-119:before {
content: var(--icon-interface-essential-119);
}
.icon-interface-essential-120:before {
content: var(--icon-interface-essential-120);
}
.icon-interface-essential-121:before {
content: var(--icon-interface-essential-121);
}
.icon-interface-essential-122:before {
content: var(--icon-interface-essential-122);
}
.icon-interface-essential-123:before {
content: var(--icon-interface-essential-123);
}
.icon-interface-essential-124:before {
content: var(--icon-interface-essential-124);
}
.icon-interface-essential-125:before {
content: var(--icon-interface-essential-125);
}
.icon-interface-essential-126:before {
content: var(--icon-interface-essential-126);
}
.icon-interface-essential-127:before {
content: var(--icon-interface-essential-127);
}
.icon-interface-essential-128:before {
content: var(--icon-interface-essential-128);
}
.icon-interface-essential-129:before {
content: var(--icon-interface-essential-129);
}
.icon-interface-essential-130:before {
content: var(--icon-interface-essential-130);
}
.icon-interface-essential-131:before {
content: var(--icon-interface-essential-131);
}
.icon-interface-essential-132:before {
content: var(--icon-interface-essential-132);
}
.icon-interface-essential-133:before {
content: var(--icon-interface-essential-133);
}
.icon-interface-essential-134:before {
content: var(--icon-interface-essential-134);
}
.icon-interface-essential-135:before {
content: var(--icon-interface-essential-135);
}
.icon-interface-essential-136:before {
content: var(--icon-interface-essential-136);
}
.icon-interface-essential-137:before {
content: var(--icon-interface-essential-137);
}
.icon-interface-essential-138:before {
content: var(--icon-interface-essential-138);
}
.icon-interface-essential-139:before {
content: var(--icon-interface-essential-139);
}
.icon-interface-essential-140:before {
content: var(--icon-interface-essential-140);
}
.icon-interface-essential-141:before {
content: var(--icon-interface-essential-141);
}
.icon-interface-essential-142:before {
content: var(--icon-interface-essential-142);
}
.icon-interface-essential-143:before {
content: var(--icon-interface-essential-143);
}
.icon-interface-essential-144:before {
content: var(--icon-interface-essential-144);
}
.icon-interface-essential-145:before {
content: var(--icon-interface-essential-145);
}
.icon-interface-essential-146:before {
content: var(--icon-interface-essential-146);
}
.icon-interface-essential-147:before {
content: var(--icon-interface-essential-147);
}
.icon-interface-essential-148:before {
content: var(--icon-interface-essential-148);
}
.icon-interface-essential-149:before {
content: var(--icon-interface-essential-149);
}
.icon-interface-essential-150:before {
content: var(--icon-interface-essential-150);
}
.icon-interface-essential-151:before {
content: var(--icon-interface-essential-151);
}
.icon-interface-essential-152:before {
content: var(--icon-interface-essential-152);
}
.icon-interface-essential-153:before {
content: var(--icon-interface-essential-153);
}
.icon-interface-essential-154:before {
content: var(--icon-interface-essential-154);
}
.icon-interface-essential-155:before {
content: var(--icon-interface-essential-155);
}
.icon-interface-essential-156:before {
content: var(--icon-interface-essential-156);
}
.icon-interface-essential-157:before {
content: var(--icon-interface-essential-157);
}
.icon-interface-essential-158:before {
content: var(--icon-interface-essential-158);
}
.icon-interface-essential-159:before {
content: var(--icon-interface-essential-159);
}
.icon-interface-essential-160:before {
content: var(--icon-interface-essential-160);
}
.icon-interface-essential-161:before {
content: var(--icon-interface-essential-161);
}
.icon-interface-essential-162:before {
content: var(--icon-interface-essential-162);
}
.icon-interface-essential-163:before {
content: var(--icon-interface-essential-163);
}
.icon-interface-essential-164:before {
content: var(--icon-interface-essential-164);
}
.icon-interface-essential-165:before {
content: var(--icon-interface-essential-165);
}
.icon-interface-essential-166:before {
content: var(--icon-interface-essential-166);
}
.icon-interface-essential-167:before {
content: var(--icon-interface-essential-167);
}
.icon-interface-essential-168:before {
content: var(--icon-interface-essential-168);
}
.icon-interface-essential-169:before {
content: var(--icon-interface-essential-169);
}
.icon-interface-essential-170:before {
content: var(--icon-interface-essential-170);
}
.icon-interface-essential-171:before {
content: var(--icon-interface-essential-171);
}
.icon-interface-essential-172:before {
content: var(--icon-interface-essential-172);
}
.icon-interface-essential-173:before {
content: var(--icon-interface-essential-173);
}
.icon-interface-essential-174:before {
content: var(--icon-interface-essential-174);
}
.icon-interface-essential-175:before {
content: var(--icon-interface-essential-175);
}
.icon-interface-essential-176:before {
content: var(--icon-interface-essential-176);
}
.icon-interface-essential-177:before {
content: var(--icon-interface-essential-177);
}
.icon-interface-essential-178:before {
content: var(--icon-interface-essential-178);
}
.icon-interface-essential-179:before {
content: var(--icon-interface-essential-179);
}
.icon-interface-essential-180:before {
content: var(--icon-interface-essential-180);
}
.icon-interface-essential-181:before {
content: var(--icon-interface-essential-181);
}
.icon-interface-essential-182:before {
content: var(--icon-interface-essential-182);
}
.icon-interface-essential-183:before {
content: var(--icon-interface-essential-183);
}
.icon-interface-essential-184:before {
content: var(--icon-interface-essential-184);
}
.icon-interface-essential-185:before {
content: var(--icon-interface-essential-185);
}
.icon-interface-essential-186:before {
content: var(--icon-interface-essential-186);
}
.icon-interface-essential-187:before {
content: var(--icon-interface-essential-187);
}
.icon-interface-essential-188:before {
content: var(--icon-interface-essential-188);
}
.icon-interface-essential-189:before {
content: var(--icon-interface-essential-189);
}
.icon-interface-essential-190:before {
content: var(--icon-interface-essential-190);
}
.icon-interface-essential-191:before {
content: var(--icon-interface-essential-191);
}
.icon-interface-essential-192:before {
content: var(--icon-interface-essential-192);
}
.icon-interface-essential-193:before {
content: var(--icon-interface-essential-193);
}
.icon-interface-essential-194:before {
content: var(--icon-interface-essential-194);
}
.icon-interface-essential-195:before {
content: var(--icon-interface-essential-195);
}
.icon-interface-essential-196:before {
content: var(--icon-interface-essential-196);
}
.icon-interface-essential-197:before {
content: var(--icon-interface-essential-197);
}
.icon-interface-essential-198:before {
content: var(--icon-interface-essential-198);
}
.icon-interface-essential-199:before {
content: var(--icon-interface-essential-199);
}
.icon-interface-essential-200:before {
content: var(--icon-interface-essential-200);
}
.icon-interface-essential-201:before {
content: var(--icon-interface-essential-201);
}
.icon-interface-essential-202:before {
content: var(--icon-interface-essential-202);
}
.icon-interface-essential-203:before {
content: var(--icon-interface-essential-203);
}
.icon-interface-essential-204:before {
content: var(--icon-interface-essential-204);
}
.icon-interface-essential-205:before {
content: var(--icon-interface-essential-205);
}
.icon-interface-essential-206:before {
content: var(--icon-interface-essential-206);
}
.icon-interface-essential-207:before {
content: var(--icon-interface-essential-207);
}
.icon-interface-essential-208:before {
content: var(--icon-interface-essential-208);
}
.icon-interface-essential-209:before {
content: var(--icon-interface-essential-209);
}
.icon-interface-essential-210:before {
content: var(--icon-interface-essential-210);
}
.icon-interface-essential-211:before {
content: var(--icon-interface-essential-211);
}
.icon-interface-essential-212:before {
content: var(--icon-interface-essential-212);
}
.icon-interface-essential-213:before {
content: var(--icon-interface-essential-213);
}
.icon-interface-essential-214:before {
content: var(--icon-interface-essential-214);
}
.icon-interface-essential-215:before {
content: var(--icon-interface-essential-215);
}
.icon-interface-essential-216:before {
content: var(--icon-interface-essential-216);
}
.icon-interface-essential-217:before {
content: var(--icon-interface-essential-217);
}
.icon-interface-essential-218:before {
content: var(--icon-interface-essential-218);
}
.icon-interface-essential-219:before {
content: var(--icon-interface-essential-219);
}
.icon-interface-essential-220:before {
content: var(--icon-interface-essential-220);
}
.icon-interface-essential-221:before {
content: var(--icon-interface-essential-221);
}
.icon-interface-essential-222:before {
content: var(--icon-interface-essential-222);
}
.icon-interface-essential-223:before {
content: var(--icon-interface-essential-223);
}
.icon-interface-essential-224:before {
content: var(--icon-interface-essential-224);
}
.icon-interface-essential-225:before {
content: var(--icon-interface-essential-225);
}
.icon-interface-essential-226:before {
content: var(--icon-interface-essential-226);
}
.icon-interface-essential-227:before {
content: var(--icon-interface-essential-227);
}
.icon-interface-essential-228:before {
content: var(--icon-interface-essential-228);
}
.icon-interface-essential-229:before {
content: var(--icon-interface-essential-229);
}
.icon-interface-essential-230:before {
content: var(--icon-interface-essential-230);
}
.icon-interface-essential-231:before {
content: var(--icon-interface-essential-231);
}
.icon-interface-essential-232:before {
content: var(--icon-interface-essential-232);
}
.icon-interface-essential-233:before {
content: var(--icon-interface-essential-233);
}
.icon-interface-essential-234:before {
content: var(--icon-interface-essential-234);
}
.icon-interface-essential-235:before {
content: var(--icon-interface-essential-235);
}
.icon-interface-essential-236:before {
content: var(--icon-interface-essential-236);
}
.icon-interface-essential-237:before {
content: var(--icon-interface-essential-237);
}
.icon-interface-essential-238:before {
content: var(--icon-interface-essential-238);
}
.icon-interface-essential-239:before {
content: var(--icon-interface-essential-239);
}
.icon-interface-essential-240:before {
content: var(--icon-interface-essential-240);
}
.icon-interface-essential-241:before {
content: var(--icon-interface-essential-241);
}
.icon-interface-essential-242:before {
content: var(--icon-interface-essential-242);
}
.icon-interface-essential-243:before {
content: var(--icon-interface-essential-243);
}
.icon-interface-essential-244:before {
content: var(--icon-interface-essential-244);
}
.icon-interface-essential-245:before {
content: var(--icon-interface-essential-245);
}
.icon-interface-essential-246:before {
content: var(--icon-interface-essential-246);
}
.icon-interface-essential-247:before {
content: var(--icon-interface-essential-247);
}
.icon-interface-essential-248:before {
content: var(--icon-interface-essential-248);
}
.icon-interface-essential-249:before {
content: var(--icon-interface-essential-249);
}
.icon-interface-essential-250:before {
content: var(--icon-interface-essential-250);
}
.icon-interface-essential-251:before {
content: var(--icon-interface-essential-251);
}
.icon-interface-essential-252:before {
content: var(--icon-interface-essential-252);
}
.icon-interface-essential-253:before {
content: var(--icon-interface-essential-253);
}
.icon-interface-essential-254:before {
content: var(--icon-interface-essential-254);
}
.icon-interface-essential-255:before {
content: var(--icon-interface-essential-255);
}
.icon-interface-essential-256:before {
content: var(--icon-interface-essential-256);
}
.icon-interface-essential-257:before {
content: var(--icon-interface-essential-257);
}
.icon-interface-essential-258:before {
content: var(--icon-interface-essential-258);
}
.icon-interface-essential-259:before {
content: var(--icon-interface-essential-259);
}
.icon-interface-essential-260:before {
content: var(--icon-interface-essential-260);
}
.icon-interface-essential-261:before {
content: var(--icon-interface-essential-261);
}
.icon-interface-essential-262:before {
content: var(--icon-interface-essential-262);
}
.icon-interface-essential-263:before {
content: var(--icon-interface-essential-263);
}
.icon-interface-essential-264:before {
content: var(--icon-interface-essential-264);
}
.icon-interface-essential-265:before {
content: var(--icon-interface-essential-265);
}
.icon-interface-essential-266:before {
content: var(--icon-interface-essential-266);
}
.icon-interface-essential-267:before {
content: var(--icon-interface-essential-267);
}
.icon-interface-essential-268:before {
content: var(--icon-interface-essential-268);
}
.icon-interface-essential-269:before {
content: var(--icon-interface-essential-269);
}
.icon-interface-essential-270:before {
content: var(--icon-interface-essential-270);
}
.icon-interface-essential-271:before {
content: var(--icon-interface-essential-271);
}
.icon-interface-essential-272:before {
content: var(--icon-interface-essential-272);
}
.icon-interface-essential-273:before {
content: var(--icon-interface-essential-273);
}
.icon-interface-essential-274:before {
content: var(--icon-interface-essential-274);
}
.icon-interface-essential-275:before {
content: var(--icon-interface-essential-275);
}
.icon-interface-essential-276:before {
content: var(--icon-interface-essential-276);
}
.icon-interface-essential-277:before {
content: var(--icon-interface-essential-277);
}
.icon-interface-essential-278:before {
content: var(--icon-interface-essential-278);
}
.icon-interface-essential-279:before {
content: var(--icon-interface-essential-279);
}
.icon-interface-essential-280:before {
content: var(--icon-interface-essential-280);
}
.icon-interface-essential-281:before {
content: var(--icon-interface-essential-281);
}
.icon-interface-essential-282:before {
content: var(--icon-interface-essential-282);
}
.icon-interface-essential-283:before {
content: var(--icon-interface-essential-283);
}
.icon-interface-essential-284:before {
content: var(--icon-interface-essential-284);
}
.icon-interface-essential-285:before {
content: var(--icon-interface-essential-285);
}
.icon-interface-essential-286:before {
content: var(--icon-interface-essential-286);
}
.icon-interface-essential-287:before {
content: var(--icon-interface-essential-287);
}
.icon-interface-essential-288:before {
content: var(--icon-interface-essential-288);
}
.icon-interface-essential-289:before {
content: var(--icon-interface-essential-289);
}
.icon-interface-essential-290:before {
content: var(--icon-interface-essential-290);
}
.icon-interface-essential-291:before {
content: var(--icon-interface-essential-291);
}
.icon-interface-essential-292:before {
content: var(--icon-interface-essential-292);
}
.icon-interface-essential-293:before {
content: var(--icon-interface-essential-293);
}
.icon-interface-essential-294:before {
content: var(--icon-interface-essential-294);
}
.icon-interface-essential-295:before {
content: var(--icon-interface-essential-295);
}
.icon-interface-essential-296:before {
content: var(--icon-interface-essential-296);
}
.icon-interface-essential-297:before {
content: var(--icon-interface-essential-297);
}
.icon-interface-essential-298:before {
content: var(--icon-interface-essential-298);
}
.icon-interface-essential-299:before {
content: var(--icon-interface-essential-299);
}
.icon-interface-essential-300:before {
content: var(--icon-interface-essential-300);
}
.icon-interface-essential-301:before {
content: var(--icon-interface-essential-301);
}
.icon-interface-essential-302:before {
content: var(--icon-interface-essential-302);
}
.icon-interface-essential-303:before {
content: var(--icon-interface-essential-303);
}
.icon-interface-essential-304:before {
content: var(--icon-interface-essential-304);
}
.icon-interface-essential-305:before {
content: var(--icon-interface-essential-305);
}
.icon-interface-essential-306:before {
content: var(--icon-interface-essential-306);
}
.icon-interface-essential-307:before {
content: var(--icon-interface-essential-307);
}
.icon-interface-essential-308:before {
content: var(--icon-interface-essential-308);
}
.icon-interface-essential-309:before {
content: var(--icon-interface-essential-309);
}
.icon-interface-essential-311:before {
content: var(--icon-interface-essential-311);
}
.icon-interface-essential-312:before {
content: var(--icon-interface-essential-312);
}
.icon-interface-essential-313:before {
content: var(--icon-interface-essential-313);
}
.icon-interface-essential-314:before {
content: var(--icon-interface-essential-314);
}
.icon-interface-essential-315:before {
content: var(--icon-interface-essential-315);
}
.icon-interface-essential-316:before {
content: var(--icon-interface-essential-316);
}
.icon-interface-essential-317:before {
content: var(--icon-interface-essential-317);
}
.icon-interface-essential-318:before {
content: var(--icon-interface-essential-318);
}
.icon-interface-essential-319:before {
content: var(--icon-interface-essential-319);
}
.icon-interface-essential-320:before {
content: var(--icon-interface-essential-320);
}
.icon-internet-network-01:before {
content: var(--icon-internet-network-01);
}
.icon-internet-network-02:before {
content: var(--icon-internet-network-02);
}
.icon-internet-network-03:before {
content: var(--icon-internet-network-03);
}
.icon-internet-network-04:before {
content: var(--icon-internet-network-04);
}
.icon-internet-network-05:before {
content: var(--icon-internet-network-05);
}
.icon-internet-network-06:before {
content: var(--icon-internet-network-06);
}
.icon-internet-network-07:before {
content: var(--icon-internet-network-07);
}
.icon-internet-network-08:before {
content: var(--icon-internet-network-08);
}
.icon-internet-network-09:before {
content: var(--icon-internet-network-09);
}
.icon-internet-network-10:before {
content: var(--icon-internet-network-10);
}
.icon-internet-network-11:before {
content: var(--icon-internet-network-11);
}
.icon-internet-network-12:before {
content: var(--icon-internet-network-12);
}
.icon-internet-network-13:before {
content: var(--icon-internet-network-13);
}
.icon-internet-network-14:before {
content: var(--icon-internet-network-14);
}
.icon-internet-network-15:before {
content: var(--icon-internet-network-15);
}
.icon-internet-network-16:before {
content: var(--icon-internet-network-16);
}
.icon-internet-network-17:before {
content: var(--icon-internet-network-17);
}
.icon-internet-network-18:before {
content: var(--icon-internet-network-18);
}
.icon-internet-network-19:before {
content: var(--icon-internet-network-19);
}
.icon-internet-network-20:before {
content: var(--icon-internet-network-20);
}
.icon-invoice-accounting:before {
content: var(--icon-invoice-accounting);
}
.icon-ios-app-application:before {
content: var(--icon-ios-app-application);
}
.icon-key-square:before {
content: var(--icon-key-square);
}
.icon-key:before {
content: var(--icon-key);
}
.icon-keyboard-button-arrows:before {
content: var(--icon-keyboard-button-arrows);
}
.icon-keyboard-hide:before {
content: var(--icon-keyboard-hide);
}
.icon-keyboard-show:before {
content: var(--icon-keyboard-show);
}
.icon-keyboard:before {
content: var(--icon-keyboard);
}
.icon-keyhole-circle:before {
content: var(--icon-keyhole-circle);
}
.icon-keyhole-refresh-reload:before {
content: var(--icon-keyhole-refresh-reload);
}
.icon-keyhole-select:before {
content: var(--icon-keyhole-select);
}
.icon-keyword-target:before {
content: var(--icon-keyword-target);
}
.icon-lab-tube:before {
content: var(--icon-lab-tube);
}
.icon-ladle:before {
content: var(--icon-ladle);
}
.icon-language-translate:before {
content: var(--icon-language-translate);
}
.icon-laptop-loupe-search:before {
content: var(--icon-laptop-loupe-search);
}
.icon-layers-grid-plus:before {
content: var(--icon-layers-grid-plus);
}
.icon-layers-select:before {
content: var(--icon-layers-select);
}
.icon-layers:before {
content: var(--icon-layers);
}
.icon-leaflet:before {
content: var(--icon-leaflet);
}
.icon-light-bulb-idea:before {
content: var(--icon-light-bulb-idea);
}
.icon-light-bulb:before {
content: var(--icon-light-bulb);
}
.icon-link-search-building:before {
content: var(--icon-link-search-building);
}
.icon-linkedin-circle:before {
content: var(--icon-linkedin-circle);
}
.icon-list-add:before {
content: var(--icon-list-add);
}
.icon-list-numbers:before {
content: var(--icon-list-numbers);
}
.icon-list-remove:before {
content: var(--icon-list-remove);
}
.icon-list-tasks-checkmark:before {
content: var(--icon-list-tasks-checkmark);
}
.icon-list-tasks-delite-remove:before {
content: var(--icon-list-tasks-delite-remove);
}
.icon-loading-waiting2:before {
content: var(--icon-loading-waiting2);
}
.icon-loading-waiting:before {
content: var(--icon-loading-waiting);
}
.icon-loading:before {
content: var(--icon-loading);
}
.icon-location-search-radar:before {
content: var(--icon-location-search-radar);
}
.icon-lock-password-checkmark-done-ok:before {
content: var(--icon-lock-password-checkmark-done-ok);
}
.icon-lock-password-login:before {
content: var(--icon-lock-password-login);
}
.icon-lock-password-wrong:before {
content: var(--icon-lock-password-wrong);
}
.icon-lock-password:before {
content: var(--icon-lock-password);
}
.icon-lock-refresh-rotate:before {
content: var(--icon-lock-refresh-rotate);
}
.icon-lock-select:before {
content: var(--icon-lock-select);
}
.icon-lock-shield-protection:before {
content: var(--icon-lock-shield-protection);
}
.icon-lock-unlock:before {
content: var(--icon-lock-unlock);
}
.icon-lock:before {
content: var(--icon-lock);
}
.icon-login-enter:before {
content: var(--icon-login-enter);
}
.icon-loop-arrow-360:before {
content: var(--icon-loop-arrow-360);
}
.icon-loop-arrow:before {
content: var(--icon-loop-arrow);
}
.icon-loupe-first-place:before {
content: var(--icon-loupe-first-place);
}
.icon-loupe-list-results-search-button:before {
content: var(--icon-loupe-list-results-search-button);
}
.icon-loupe-list-results-search:before {
content: var(--icon-loupe-list-results-search);
}
.icon-lte-signal:before {
content: var(--icon-lte-signal);
}
.icon-macro:before {
content: var(--icon-macro);
}
.icon-magnet:before {
content: var(--icon-magnet);
}
.icon-mail-circle:before {
content: var(--icon-mail-circle);
}
.icon-mail-email-letter-all-mailboxes:before {
content: var(--icon-mail-email-letter-all-mailboxes);
}
.icon-mailbox-archive-collections:before {
content: var(--icon-mailbox-archive-collections);
}
.icon-mailbox-collections-archive2:before {
content: var(--icon-mailbox-collections-archive2);
}
.icon-mailbox-collections-archive:before {
content: var(--icon-mailbox-collections-archive);
}
.icon-map-navigation:before {
content: var(--icon-map-navigation);
}
.icon-map:before {
content: var(--icon-map);
}
.icon-maps-navigation-01:before {
content: var(--icon-maps-navigation-01);
}
.icon-maps-navigation-02:before {
content: var(--icon-maps-navigation-02);
}
.icon-maps-navigation-03:before {
content: var(--icon-maps-navigation-03);
}
.icon-maps-navigation-04:before {
content: var(--icon-maps-navigation-04);
}
.icon-maps-navigation-05:before {
content: var(--icon-maps-navigation-05);
}
.icon-maps-navigation-06:before {
content: var(--icon-maps-navigation-06);
}
.icon-maps-navigation-07:before {
content: var(--icon-maps-navigation-07);
}
.icon-maps-navigation-08:before {
content: var(--icon-maps-navigation-08);
}
.icon-maps-navigation-09:before {
content: var(--icon-maps-navigation-09);
}
.icon-maps-navigation-10:before {
content: var(--icon-maps-navigation-10);
}
.icon-maps-navigation-11:before {
content: var(--icon-maps-navigation-11);
}
.icon-maps-navigation-12:before {
content: var(--icon-maps-navigation-12);
}
.icon-maps-navigation-13:before {
content: var(--icon-maps-navigation-13);
}
.icon-maps-navigation-14:before {
content: var(--icon-maps-navigation-14);
}
.icon-maps-navigation-15:before {
content: var(--icon-maps-navigation-15);
}
.icon-maps-navigation-16:before {
content: var(--icon-maps-navigation-16);
}
.icon-maps-navigation-17:before {
content: var(--icon-maps-navigation-17);
}
.icon-maps-navigation-18:before {
content: var(--icon-maps-navigation-18);
}
.icon-maps-navigation-19:before {
content: var(--icon-maps-navigation-19);
}
.icon-maps-navigation-20:before {
content: var(--icon-maps-navigation-20);
}
.icon-media-library-playlist2:before {
content: var(--icon-media-library-playlist2);
}
.icon-media-library-playlist3:before {
content: var(--icon-media-library-playlist3);
}
.icon-media-library-playlist:before {
content: var(--icon-media-library-playlist);
}
.icon-menu-burger-circle:before {
content: var(--icon-menu-burger-circle);
}
.icon-menu-burger-square:before {
content: var(--icon-menu-burger-square);
}
.icon-menu-burger:before {
content: var(--icon-menu-burger);
}
.icon-menu-square:before {
content: var(--icon-menu-square);
}
.icon-menu-vitamins:before {
content: var(--icon-menu-vitamins);
}
.icon-messages-chat-01:before {
content: var(--icon-messages-chat-01);
}
.icon-messages-chat-02:before {
content: var(--icon-messages-chat-02);
}
.icon-messages-chat-03:before {
content: var(--icon-messages-chat-03);
}
.icon-messages-chat-04:before {
content: var(--icon-messages-chat-04);
}
.icon-messages-chat-05:before {
content: var(--icon-messages-chat-05);
}
.icon-messages-chat-06:before {
content: var(--icon-messages-chat-06);
}
.icon-messages-chat-07:before {
content: var(--icon-messages-chat-07);
}
.icon-messages-chat-08:before {
content: var(--icon-messages-chat-08);
}
.icon-messages-chat-09:before {
content: var(--icon-messages-chat-09);
}
.icon-messages-chat-10:before {
content: var(--icon-messages-chat-10);
}
.icon-messages-chat-11:before {
content: var(--icon-messages-chat-11);
}
.icon-messages-chat-12:before {
content: var(--icon-messages-chat-12);
}
.icon-messages-chat-13:before {
content: var(--icon-messages-chat-13);
}
.icon-messages-chat-14:before {
content: var(--icon-messages-chat-14);
}
.icon-messages-chat-15:before {
content: var(--icon-messages-chat-15);
}
.icon-messages-chat-16:before {
content: var(--icon-messages-chat-16);
}
.icon-messages-chat-17:before {
content: var(--icon-messages-chat-17);
}
.icon-messages-chat-18:before {
content: var(--icon-messages-chat-18);
}
.icon-messages-chat-19:before {
content: var(--icon-messages-chat-19);
}
.icon-messages-chat-20:before {
content: var(--icon-messages-chat-20);
}
.icon-messages-chat-question:before {
content: var(--icon-messages-chat-question);
}
.icon-messages-chat2:before {
content: var(--icon-messages-chat2);
}
.icon-messages-chat3:before {
content: var(--icon-messages-chat3);
}
.icon-messages-chat4:before {
content: var(--icon-messages-chat4);
}
.icon-messages-chat5:before {
content: var(--icon-messages-chat5);
}
.icon-messages-chat6:before {
content: var(--icon-messages-chat6);
}
.icon-messages-chat7:before {
content: var(--icon-messages-chat7);
}
.icon-messages-chat:before {
content: var(--icon-messages-chat);
}
.icon-microphone-mic-rec-circle2:before {
content: var(--icon-microphone-mic-rec-circle2);
}
.icon-microphone-mic-rec-circle3:before {
content: var(--icon-microphone-mic-rec-circle3);
}
.icon-microphone-mic-rec-circle4:before {
content: var(--icon-microphone-mic-rec-circle4);
}
.icon-microphone-mic-rec-circle:before {
content: var(--icon-microphone-mic-rec-circle);
}
.icon-microphone-mic-rec-square:before {
content: var(--icon-microphone-mic-rec-square);
}
.icon-microphone-mic-rec:before {
content: var(--icon-microphone-mic-rec);
}
.icon-microphone-mute-slash:before {
content: var(--icon-microphone-mute-slash);
}
.icon-microphone:before {
content: var(--icon-microphone);
}
.icon-microscope:before {
content: var(--icon-microscope);
}
.icon-mobile-devices-broken:before {
content: var(--icon-mobile-devices-broken);
}
.icon-mobile-devices-charging:before {
content: var(--icon-mobile-devices-charging);
}
.icon-mobile-devices-face-id:before {
content: var(--icon-mobile-devices-face-id);
}
.icon-mobile-devices-messages:before {
content: var(--icon-mobile-devices-messages);
}
.icon-mobile-devices-notification:before {
content: var(--icon-mobile-devices-notification);
}
.icon-mobile-devices-question:before {
content: var(--icon-mobile-devices-question);
}
.icon-mobile-devices-rotate:before {
content: var(--icon-mobile-devices-rotate);
}
.icon-mobile-devices-setting:before {
content: var(--icon-mobile-devices-setting);
}
.icon-mobile-devices-swipe-right:before {
content: var(--icon-mobile-devices-swipe-right);
}
.icon-mobile-devices-vibration2:before {
content: var(--icon-mobile-devices-vibration2);
}
.icon-mobile-devices-vibration:before {
content: var(--icon-mobile-devices-vibration);
}
.icon-mobile-devices-wifi:before {
content: var(--icon-mobile-devices-wifi);
}
.icon-mobile-devices2:before {
content: var(--icon-mobile-devices2);
}
.icon-mobile-devices:before {
content: var(--icon-mobile-devices);
}
.icon-mobile-display:before {
content: var(--icon-mobile-display);
}
.icon-mobile-laptop-wifi:before {
content: var(--icon-mobile-laptop-wifi);
}
.icon-mobile-tablet:before {
content: var(--icon-mobile-tablet);
}
.icon-monero:before {
content: var(--icon-monero);
}
.icon-money-01:before {
content: var(--icon-money-01);
}
.icon-money-02:before {
content: var(--icon-money-02);
}
.icon-money-03:before {
content: var(--icon-money-03);
}
.icon-money-04:before {
content: var(--icon-money-04);
}
.icon-money-05:before {
content: var(--icon-money-05);
}
.icon-money-06:before {
content: var(--icon-money-06);
}
.icon-money-07:before {
content: var(--icon-money-07);
}
.icon-money-08:before {
content: var(--icon-money-08);
}
.icon-money-09:before {
content: var(--icon-money-09);
}
.icon-money-10:before {
content: var(--icon-money-10);
}
.icon-money-11:before {
content: var(--icon-money-11);
}
.icon-money-12:before {
content: var(--icon-money-12);
}
.icon-money-13:before {
content: var(--icon-money-13);
}
.icon-money-14:before {
content: var(--icon-money-14);
}
.icon-money-15:before {
content: var(--icon-money-15);
}
.icon-money-16:before {
content: var(--icon-money-16);
}
.icon-money-17:before {
content: var(--icon-money-17);
}
.icon-money-18:before {
content: var(--icon-money-18);
}
.icon-money-19:before {
content: var(--icon-money-19);
}
.icon-money-20:before {
content: var(--icon-money-20);
}
.icon-moon-night-mode:before {
content: var(--icon-moon-night-mode);
}
.icon-moon:before {
content: var(--icon-moon);
}
.icon-movies-video-circle:before {
content: var(--icon-movies-video-circle);
}
.icon-music-audio-01:before {
content: var(--icon-music-audio-01);
}
.icon-music-audio-02:before {
content: var(--icon-music-audio-02);
}
.icon-music-audio-03:before {
content: var(--icon-music-audio-03);
}
.icon-music-audio-04:before {
content: var(--icon-music-audio-04);
}
.icon-music-audio-05:before {
content: var(--icon-music-audio-05);
}
.icon-music-audio-06:before {
content: var(--icon-music-audio-06);
}
.icon-music-audio-07:before {
content: var(--icon-music-audio-07);
}
.icon-music-audio-08:before {
content: var(--icon-music-audio-08);
}
.icon-music-audio-09:before {
content: var(--icon-music-audio-09);
}
.icon-music-audio-10:before {
content: var(--icon-music-audio-10);
}
.icon-music-audio-11:before {
content: var(--icon-music-audio-11);
}
.icon-music-audio-12:before {
content: var(--icon-music-audio-12);
}
.icon-music-audio-13:before {
content: var(--icon-music-audio-13);
}
.icon-music-audio-14:before {
content: var(--icon-music-audio-14);
}
.icon-music-audio-15:before {
content: var(--icon-music-audio-15);
}
.icon-music-audio-16:before {
content: var(--icon-music-audio-16);
}
.icon-music-audio-17:before {
content: var(--icon-music-audio-17);
}
.icon-music-audio-18:before {
content: var(--icon-music-audio-18);
}
.icon-music-audio-19:before {
content: var(--icon-music-audio-19);
}
.icon-music-audio-20:before {
content: var(--icon-music-audio-20);
}
.icon-music-audio-21:before {
content: var(--icon-music-audio-21);
}
.icon-music-audio-22:before {
content: var(--icon-music-audio-22);
}
.icon-music-audio-23:before {
content: var(--icon-music-audio-23);
}
.icon-music-audio-24:before {
content: var(--icon-music-audio-24);
}
.icon-music-audio-25:before {
content: var(--icon-music-audio-25);
}
.icon-music-audio-26:before {
content: var(--icon-music-audio-26);
}
.icon-music-audio-27:before {
content: var(--icon-music-audio-27);
}
.icon-music-audio-28:before {
content: var(--icon-music-audio-28);
}
.icon-music-audio-29:before {
content: var(--icon-music-audio-29);
}
.icon-music-audio-30:before {
content: var(--icon-music-audio-30);
}
.icon-music-audio-31:before {
content: var(--icon-music-audio-31);
}
.icon-music-audio-32:before {
content: var(--icon-music-audio-32);
}
.icon-music-audio-33:before {
content: var(--icon-music-audio-33);
}
.icon-music-audio-34:before {
content: var(--icon-music-audio-34);
}
.icon-music-audio-35:before {
content: var(--icon-music-audio-35);
}
.icon-music-audio-36:before {
content: var(--icon-music-audio-36);
}
.icon-music-audio-37:before {
content: var(--icon-music-audio-37);
}
.icon-music-audio-38:before {
content: var(--icon-music-audio-38);
}
.icon-music-audio-39:before {
content: var(--icon-music-audio-39);
}
.icon-music-audio-40:before {
content: var(--icon-music-audio-40);
}
.icon-music-audio-41:before {
content: var(--icon-music-audio-41);
}
.icon-music-audio-42:before {
content: var(--icon-music-audio-42);
}
.icon-music-audio-43:before {
content: var(--icon-music-audio-43);
}
.icon-music-audio-44:before {
content: var(--icon-music-audio-44);
}
.icon-music-audio-45:before {
content: var(--icon-music-audio-45);
}
.icon-music-audio-46:before {
content: var(--icon-music-audio-46);
}
.icon-music-audio-47:before {
content: var(--icon-music-audio-47);
}
.icon-music-audio-48:before {
content: var(--icon-music-audio-48);
}
.icon-music-audio-49:before {
content: var(--icon-music-audio-49);
}
.icon-music-audio-50:before {
content: var(--icon-music-audio-50);
}
.icon-music-audio-51:before {
content: var(--icon-music-audio-51);
}
.icon-music-audio-52:before {
content: var(--icon-music-audio-52);
}
.icon-music-audio-53:before {
content: var(--icon-music-audio-53);
}
.icon-music-audio-54:before {
content: var(--icon-music-audio-54);
}
.icon-music-audio-55:before {
content: var(--icon-music-audio-55);
}
.icon-music-audio-56:before {
content: var(--icon-music-audio-56);
}
.icon-music-audio-57:before {
content: var(--icon-music-audio-57);
}
.icon-music-audio-58:before {
content: var(--icon-music-audio-58);
}
.icon-music-audio-59:before {
content: var(--icon-music-audio-59);
}
.icon-music-audio-60:before {
content: var(--icon-music-audio-60);
}
.icon-myicons-801:before {
content: var(--icon-myicons-801);
}
.icon-myicons-802:before {
content: var(--icon-myicons-802);
}
.icon-myicons-803:before {
content: var(--icon-myicons-803);
}
.icon-myicons-804:before {
content: var(--icon-myicons-804);
}
.icon-myicons-805:before {
content: var(--icon-myicons-805);
}
.icon-myicons-806:before {
content: var(--icon-myicons-806);
}
.icon-myicons-807:before {
content: var(--icon-myicons-807);
}
.icon-myicons-808:before {
content: var(--icon-myicons-808);
}
.icon-myicons-809:before {
content: var(--icon-myicons-809);
}
.icon-myicons-810:before {
content: var(--icon-myicons-810);
}
.icon-myicons-811:before {
content: var(--icon-myicons-811);
}
.icon-myicons-812:before {
content: var(--icon-myicons-812);
}
.icon-myicons-813:before {
content: var(--icon-myicons-813);
}
.icon-myicons-814:before {
content: var(--icon-myicons-814);
}
.icon-myicons-815:before {
content: var(--icon-myicons-815);
}
.icon-myicons-816:before {
content: var(--icon-myicons-816);
}
.icon-myicons-817:before {
content: var(--icon-myicons-817);
}
.icon-myicons-818:before {
content: var(--icon-myicons-818);
}
.icon-myicons-819:before {
content: var(--icon-myicons-819);
}
.icon-myicons-820:before {
content: var(--icon-myicons-820);
}
.icon-myicons-821:before {
content: var(--icon-myicons-821);
}
.icon-myicons-822:before {
content: var(--icon-myicons-822);
}
.icon-myicons-823:before {
content: var(--icon-myicons-823);
}
.icon-myicons-824:before {
content: var(--icon-myicons-824);
}
.icon-myicons-825:before {
content: var(--icon-myicons-825);
}
.icon-myicons-826:before {
content: var(--icon-myicons-826);
}
.icon-myicons-827:before {
content: var(--icon-myicons-827);
}
.icon-myicons-828:before {
content: var(--icon-myicons-828);
}
.icon-myicons-829:before {
content: var(--icon-myicons-829);
}
.icon-myicons-830:before {
content: var(--icon-myicons-830);
}
.icon-myicons-831:before {
content: var(--icon-myicons-831);
}
.icon-myicons-832:before {
content: var(--icon-myicons-832);
}
.icon-myicons-833:before {
content: var(--icon-myicons-833);
}
.icon-myicons-834:before {
content: var(--icon-myicons-834);
}
.icon-myicons-835:before {
content: var(--icon-myicons-835);
}
.icon-myicons-836:before {
content: var(--icon-myicons-836);
}
.icon-myicons-837:before {
content: var(--icon-myicons-837);
}
.icon-myicons-838:before {
content: var(--icon-myicons-838);
}
.icon-myicons-839:before {
content: var(--icon-myicons-839);
}
.icon-myicons-840:before {
content: var(--icon-myicons-840);
}
.icon-new:before {
content: var(--icon-new);
}
.icon-news-bookmark:before {
content: var(--icon-news-bookmark);
}
.icon-news:before {
content: var(--icon-news);
}
.icon-night-mode:before {
content: var(--icon-night-mode);
}
.icon-no-copying:before {
content: var(--icon-no-copying);
}
.icon-no-copyright:before {
content: var(--icon-no-copyright);
}
.icon-no-creative-commons:before {
content: var(--icon-no-creative-commons);
}
.icon-no-derivatives:before {
content: var(--icon-no-derivatives);
}
.icon-no-sim:before {
content: var(--icon-no-sim);
}
.icon-nonagon:before {
content: var(--icon-nonagon);
}
.icon-notebook-bookmark:before {
content: var(--icon-notebook-bookmark);
}
.icon-notebook-check-list:before {
content: var(--icon-notebook-check-list);
}
.icon-notebook:before {
content: var(--icon-notebook);
}
.icon-notepad-pen:before {
content: var(--icon-notepad-pen);
}
.icon-notepad2:before {
content: var(--icon-notepad2);
}
.icon-notepad:before {
content: var(--icon-notepad);
}
.icon-notes-edit:before {
content: var(--icon-notes-edit);
}
.icon-notes-pages-notification:before {
content: var(--icon-notes-pages-notification);
}
.icon-notification-document-select:before {
content: var(--icon-notification-document-select);
}
.icon-notification-document-text:before {
content: var(--icon-notification-document-text);
}
.icon-object-rotate-vertical:before {
content: var(--icon-object-rotate-vertical);
}
.icon-octagon:before {
content: var(--icon-octagon);
}
.icon-os-app-icon:before {
content: var(--icon-os-app-icon);
}
.icon-oval:before {
content: var(--icon-oval);
}
.icon-package-return-goods:before {
content: var(--icon-package-return-goods);
}
.icon-paralelogram:before {
content: var(--icon-paralelogram);
}
.icon-patch:before {
content: var(--icon-patch);
}
.icon-pathfinder-intersect:before {
content: var(--icon-pathfinder-intersect);
}
.icon-payments-finance-01:before {
content: var(--icon-payments-finance-01);
}
.icon-payments-finance-02:before {
content: var(--icon-payments-finance-02);
}
.icon-payments-finance-03:before {
content: var(--icon-payments-finance-03);
}
.icon-payments-finance-04:before {
content: var(--icon-payments-finance-04);
}
.icon-payments-finance-05:before {
content: var(--icon-payments-finance-05);
}
.icon-payments-finance-06:before {
content: var(--icon-payments-finance-06);
}
.icon-payments-finance-07:before {
content: var(--icon-payments-finance-07);
}
.icon-payments-finance-08:before {
content: var(--icon-payments-finance-08);
}
.icon-payments-finance-09:before {
content: var(--icon-payments-finance-09);
}
.icon-payments-finance-10:before {
content: var(--icon-payments-finance-10);
}
.icon-payments-finance-11:before {
content: var(--icon-payments-finance-11);
}
.icon-payments-finance-12:before {
content: var(--icon-payments-finance-12);
}
.icon-payments-finance-13:before {
content: var(--icon-payments-finance-13);
}
.icon-payments-finance-14:before {
content: var(--icon-payments-finance-14);
}
.icon-payments-finance-15:before {
content: var(--icon-payments-finance-15);
}
.icon-payments-finance-16:before {
content: var(--icon-payments-finance-16);
}
.icon-payments-finance-17:before {
content: var(--icon-payments-finance-17);
}
.icon-payments-finance-19:before {
content: var(--icon-payments-finance-19);
}
.icon-payments-finance-20:before {
content: var(--icon-payments-finance-20);
}
.icon-payments-finance-21:before {
content: var(--icon-payments-finance-21);
}
.icon-payments-finance-22:before {
content: var(--icon-payments-finance-22);
}
.icon-payments-finance-23:before {
content: var(--icon-payments-finance-23);
}
.icon-payments-finance-24:before {
content: var(--icon-payments-finance-24);
}
.icon-payments-finance-25:before {
content: var(--icon-payments-finance-25);
}
.icon-payments-finance-26:before {
content: var(--icon-payments-finance-26);
}
.icon-payments-finance-27:before {
content: var(--icon-payments-finance-27);
}
.icon-payments-finance-28:before {
content: var(--icon-payments-finance-28);
}
.icon-payments-finance-29:before {
content: var(--icon-payments-finance-29);
}
.icon-payments-finance-30:before {
content: var(--icon-payments-finance-30);
}
.icon-payments-finance-31:before {
content: var(--icon-payments-finance-31);
}
.icon-payments-finance-32:before {
content: var(--icon-payments-finance-32);
}
.icon-payments-finance-33:before {
content: var(--icon-payments-finance-33);
}
.icon-payments-finance-34:before {
content: var(--icon-payments-finance-34);
}
.icon-payments-finance-35:before {
content: var(--icon-payments-finance-35);
}
.icon-payments-finance-36:before {
content: var(--icon-payments-finance-36);
}
.icon-payments-finance-37:before {
content: var(--icon-payments-finance-37);
}
.icon-payments-finance-38:before {
content: var(--icon-payments-finance-38);
}
.icon-pen-edit-circle:before {
content: var(--icon-pen-edit-circle);
}
.icon-pen-edit2:before {
content: var(--icon-pen-edit2);
}
.icon-pen-edit3:before {
content: var(--icon-pen-edit3);
}
.icon-pen-edit:before {
content: var(--icon-pen-edit);
}
.icon-pen-tool-minus:before {
content: var(--icon-pen-tool-minus);
}
.icon-pen-tool-plus:before {
content: var(--icon-pen-tool-plus);
}
.icon-pencil-ruler:before {
content: var(--icon-pencil-ruler);
}
.icon-pencil:before {
content: var(--icon-pencil);
}
.icon-pentagon:before {
content: var(--icon-pentagon);
}
.icon-percent-search:before {
content: var(--icon-percent-search);
}
.icon-phone-call-circle:before {
content: var(--icon-phone-call-circle);
}
.icon-phone-call-square:before {
content: var(--icon-phone-call-square);
}
.icon-phone-call:before {
content: var(--icon-phone-call);
}
.icon-phone-chat-messages-bubble:before {
content: var(--icon-phone-chat-messages-bubble);
}
.icon-phones-01:before {
content: var(--icon-phones-01);
}
.icon-phones-02:before {
content: var(--icon-phones-02);
}
.icon-phones-03:before {
content: var(--icon-phones-03);
}
.icon-phones-04:before {
content: var(--icon-phones-04);
}
.icon-phones-06:before {
content: var(--icon-phones-06);
}
.icon-phones-07:before {
content: var(--icon-phones-07);
}
.icon-phones-08:before {
content: var(--icon-phones-08);
}
.icon-phones-09:before {
content: var(--icon-phones-09);
}
.icon-phones-10:before {
content: var(--icon-phones-10);
}
.icon-phones-11:before {
content: var(--icon-phones-11);
}
.icon-phones-12:before {
content: var(--icon-phones-12);
}
.icon-phones-13:before {
content: var(--icon-phones-13);
}
.icon-phones-14:before {
content: var(--icon-phones-14);
}
.icon-phones-15:before {
content: var(--icon-phones-15);
}
.icon-phones-16:before {
content: var(--icon-phones-16);
}
.icon-phones-17:before {
content: var(--icon-phones-17);
}
.icon-phones-18:before {
content: var(--icon-phones-18);
}
.icon-phones-19:before {
content: var(--icon-phones-19);
}
.icon-phones-20:before {
content: var(--icon-phones-20);
}
.icon-phonograph:before {
content: var(--icon-phonograph);
}
.icon-photo-edit-01:before {
content: var(--icon-photo-edit-01);
}
.icon-photo-edit-02:before {
content: var(--icon-photo-edit-02);
}
.icon-photo-edit-03:before {
content: var(--icon-photo-edit-03);
}
.icon-photo-edit-04:before {
content: var(--icon-photo-edit-04);
}
.icon-photo-edit-05:before {
content: var(--icon-photo-edit-05);
}
.icon-photo-edit-06:before {
content: var(--icon-photo-edit-06);
}
.icon-photo-edit-07:before {
content: var(--icon-photo-edit-07);
}
.icon-photo-edit-08:before {
content: var(--icon-photo-edit-08);
}
.icon-photo-edit-09:before {
content: var(--icon-photo-edit-09);
}
.icon-photo-edit-10:before {
content: var(--icon-photo-edit-10);
}
.icon-photo-edit-11:before {
content: var(--icon-photo-edit-11);
}
.icon-photo-edit-12:before {
content: var(--icon-photo-edit-12);
}
.icon-photo-edit-13:before {
content: var(--icon-photo-edit-13);
}
.icon-photo-edit-14:before {
content: var(--icon-photo-edit-14);
}
.icon-photo-edit-15:before {
content: var(--icon-photo-edit-15);
}
.icon-photo-edit-16:before {
content: var(--icon-photo-edit-16);
}
.icon-photo-edit-17:before {
content: var(--icon-photo-edit-17);
}
.icon-photo-edit-18:before {
content: var(--icon-photo-edit-18);
}
.icon-photo-edit-19:before {
content: var(--icon-photo-edit-19);
}
.icon-photo-edit-20:before {
content: var(--icon-photo-edit-20);
}
.icon-photo-edit-21:before {
content: var(--icon-photo-edit-21);
}
.icon-photo-edit-22:before {
content: var(--icon-photo-edit-22);
}
.icon-photo-edit-23:before {
content: var(--icon-photo-edit-23);
}
.icon-photo-edit-24:before {
content: var(--icon-photo-edit-24);
}
.icon-photo-edit-25:before {
content: var(--icon-photo-edit-25);
}
.icon-photo-edit-26:before {
content: var(--icon-photo-edit-26);
}
.icon-photo-edit-27:before {
content: var(--icon-photo-edit-27);
}
.icon-photo-edit-28:before {
content: var(--icon-photo-edit-28);
}
.icon-photo-edit-29:before {
content: var(--icon-photo-edit-29);
}
.icon-photo-edit-30:before {
content: var(--icon-photo-edit-30);
}
.icon-photo-edit-31:before {
content: var(--icon-photo-edit-31);
}
.icon-photo-edit-32:before {
content: var(--icon-photo-edit-32);
}
.icon-photo-edit-33:before {
content: var(--icon-photo-edit-33);
}
.icon-photo-edit-34:before {
content: var(--icon-photo-edit-34);
}
.icon-photo-edit-35:before {
content: var(--icon-photo-edit-35);
}
.icon-photo-edit-36:before {
content: var(--icon-photo-edit-36);
}
.icon-photo-edit-37:before {
content: var(--icon-photo-edit-37);
}
.icon-photo-edit-38:before {
content: var(--icon-photo-edit-38);
}
.icon-photo-edit-39:before {
content: var(--icon-photo-edit-39);
}
.icon-photo-edit-40:before {
content: var(--icon-photo-edit-40);
}
.icon-photo-image-square:before {
content: var(--icon-photo-image-square);
}
.icon-photos-images:before {
content: var(--icon-photos-images);
}
.icon-pin-location-direction-plus:before {
content: var(--icon-pin-location-direction-plus);
}
.icon-pin-location-direction-refresh2:before {
content: var(--icon-pin-location-direction-refresh2);
}
.icon-pin-location-direction-refresh3:before {
content: var(--icon-pin-location-direction-refresh3);
}
.icon-pin-location-direction-refresh:before {
content: var(--icon-pin-location-direction-refresh);
}
.icon-pin-location-direction2:before {
content: var(--icon-pin-location-direction2);
}
.icon-pin-location-direction3:before {
content: var(--icon-pin-location-direction3);
}
.icon-pin-location-direction4:before {
content: var(--icon-pin-location-direction4);
}
.icon-pin-location-direction5:before {
content: var(--icon-pin-location-direction5);
}
.icon-pin-location-direction6:before {
content: var(--icon-pin-location-direction6);
}
.icon-pin-location-direction:before {
content: var(--icon-pin-location-direction);
}
.icon-pin:before {
content: var(--icon-pin);
}
.icon-pinned:before {
content: var(--icon-pinned);
}
.icon-pinterest-circle:before {
content: var(--icon-pinterest-circle);
}
.icon-pizza:before {
content: var(--icon-pizza);
}
.icon-play-circle-loading:before {
content: var(--icon-play-circle-loading);
}
.icon-play-repeat-circle:before {
content: var(--icon-play-repeat-circle);
}
.icon-playlist-like-unlike:before {
content: var(--icon-playlist-like-unlike);
}
.icon-plus-minus-ircle:before {
content: var(--icon-plus-minus-ircle);
}
.icon-potholder:before {
content: var(--icon-potholder);
}
.icon-power-settings:before {
content: var(--icon-power-settings);
}
.icon-power-turn-on:before {
content: var(--icon-power-turn-on);
}
.icon-premium-rights:before {
content: var(--icon-premium-rights);
}
.icon-price-tag-refresh:before {
content: var(--icon-price-tag-refresh);
}
.icon-printer-print-button-circle:before {
content: var(--icon-printer-print-button-circle);
}
.icon-printer:before {
content: var(--icon-printer);
}
.icon-processor-lock:before {
content: var(--icon-processor-lock);
}
.icon-producthunt-circle:before {
content: var(--icon-producthunt-circle);
}
.icon-producthunt-square:before {
content: var(--icon-producthunt-square);
}
.icon-protection-01:before {
content: var(--icon-protection-01);
}
.icon-protection-02:before {
content: var(--icon-protection-02);
}
.icon-protection-03:before {
content: var(--icon-protection-03);
}
.icon-protection-04:before {
content: var(--icon-protection-04);
}
.icon-protection-05:before {
content: var(--icon-protection-05);
}
.icon-protection-06:before {
content: var(--icon-protection-06);
}
.icon-protection-07:before {
content: var(--icon-protection-07);
}
.icon-protection-08:before {
content: var(--icon-protection-08);
}
.icon-protection-09:before {
content: var(--icon-protection-09);
}
.icon-protection-10:before {
content: var(--icon-protection-10);
}
.icon-protection-11:before {
content: var(--icon-protection-11);
}
.icon-protection-12:before {
content: var(--icon-protection-12);
}
.icon-protection-13:before {
content: var(--icon-protection-13);
}
.icon-protection-14:before {
content: var(--icon-protection-14);
}
.icon-protection-15:before {
content: var(--icon-protection-15);
}
.icon-protection-16:before {
content: var(--icon-protection-16);
}
.icon-protection-17:before {
content: var(--icon-protection-17);
}
.icon-protection-18:before {
content: var(--icon-protection-18);
}
.icon-protection-19:before {
content: var(--icon-protection-19);
}
.icon-protection-20:before {
content: var(--icon-protection-20);
}
.icon-protection-target:before {
content: var(--icon-protection-target);
}
.icon-public-domain:before {
content: var(--icon-public-domain);
}
.icon-public-mark:before {
content: var(--icon-public-mark);
}
.icon-qr-code:before {
content: var(--icon-qr-code);
}
.icon-question-loading:before {
content: var(--icon-question-loading);
}
.icon-question-refresh:before {
content: var(--icon-question-refresh);
}
.icon-question-rhombus:before {
content: var(--icon-question-rhombus);
}
.icon-question-square:before {
content: var(--icon-question-square);
}
.icon-read-circle:before {
content: var(--icon-read-circle);
}
.icon-recicle:before {
content: var(--icon-recicle);
}
.icon-record-button-circle:before {
content: var(--icon-record-button-circle);
}
.icon-recycle-circle:before {
content: var(--icon-recycle-circle);
}
.icon-refresh-links-building:before {
content: var(--icon-refresh-links-building);
}
.icon-refresh-rotate-circle:before {
content: var(--icon-refresh-rotate-circle);
}
.icon-refresh-rotate-recycle:before {
content: var(--icon-refresh-rotate-recycle);
}
.icon-refresh-rotate2:before {
content: var(--icon-refresh-rotate2);
}
.icon-refresh-rotate3:before {
content: var(--icon-refresh-rotate3);
}
.icon-refresh-rotate4:before {
content: var(--icon-refresh-rotate4);
}
.icon-refresh-rotate5:before {
content: var(--icon-refresh-rotate5);
}
.icon-refresh-rotate6:before {
content: var(--icon-refresh-rotate6);
}
.icon-refresh-rotate:before {
content: var(--icon-refresh-rotate);
}
.icon-refresh:before {
content: var(--icon-refresh);
}
.icon-registered-mark:before {
content: var(--icon-registered-mark);
}
.icon-reload-repeat-arrows-loading:before {
content: var(--icon-reload-repeat-arrows-loading);
}
.icon-reply-share-circle:before {
content: var(--icon-reply-share-circle);
}
.icon-research-target-selection:before {
content: var(--icon-research-target-selection);
}
.icon-research:before {
content: var(--icon-research);
}
.icon-resize-expand:before {
content: var(--icon-resize-expand);
}
.icon-resize-window-arrow:before {
content: var(--icon-resize-window-arrow);
}
.icon-retouch-magic-wand:before {
content: var(--icon-retouch-magic-wand);
}
.icon-rhombus:before {
content: var(--icon-rhombus);
}
.icon-right:before {
content: var(--icon-right);
}
.icon-roller:before {
content: var(--icon-roller);
}
.icon-romance-01:before {
content: var(--icon-romance-01);
}
.icon-romance-02:before {
content: var(--icon-romance-02);
}
.icon-romance-03:before {
content: var(--icon-romance-03);
}
.icon-romance-04:before {
content: var(--icon-romance-04);
}
.icon-romance-05:before {
content: var(--icon-romance-05);
}
.icon-romance-06:before {
content: var(--icon-romance-06);
}
.icon-romance-07:before {
content: var(--icon-romance-07);
}
.icon-romance-08:before {
content: var(--icon-romance-08);
}
.icon-romance-09:before {
content: var(--icon-romance-09);
}
.icon-romance-10:before {
content: var(--icon-romance-10);
}
.icon-romance-11:before {
content: var(--icon-romance-11);
}
.icon-romance-12:before {
content: var(--icon-romance-12);
}
.icon-romance-13:before {
content: var(--icon-romance-13);
}
.icon-romance-14:before {
content: var(--icon-romance-14);
}
.icon-romance-15:before {
content: var(--icon-romance-15);
}
.icon-romance-16:before {
content: var(--icon-romance-16);
}
.icon-romance-17:before {
content: var(--icon-romance-17);
}
.icon-romance-18:before {
content: var(--icon-romance-18);
}
.icon-romance-19:before {
content: var(--icon-romance-19);
}
.icon-romance-20:before {
content: var(--icon-romance-20);
}
.icon-romance-21:before {
content: var(--icon-romance-21);
}
.icon-romance-22:before {
content: var(--icon-romance-22);
}
.icon-romance-23:before {
content: var(--icon-romance-23);
}
.icon-romance-24:before {
content: var(--icon-romance-24);
}
.icon-romance-25:before {
content: var(--icon-romance-25);
}
.icon-romance-26:before {
content: var(--icon-romance-26);
}
.icon-romance-27:before {
content: var(--icon-romance-27);
}
.icon-romance-28:before {
content: var(--icon-romance-28);
}
.icon-romance-29:before {
content: var(--icon-romance-29);
}
.icon-romance-30:before {
content: var(--icon-romance-30);
}
.icon-romance-31:before {
content: var(--icon-romance-31);
}
.icon-romance-32:before {
content: var(--icon-romance-32);
}
.icon-romance-33:before {
content: var(--icon-romance-33);
}
.icon-romance-34:before {
content: var(--icon-romance-34);
}
.icon-romance-35:before {
content: var(--icon-romance-35);
}
.icon-romance-36:before {
content: var(--icon-romance-36);
}
.icon-romance-37:before {
content: var(--icon-romance-37);
}
.icon-romance-38:before {
content: var(--icon-romance-38);
}
.icon-romance-39:before {
content: var(--icon-romance-39);
}
.icon-romance-40:before {
content: var(--icon-romance-40);
}
.icon-rotate-arrow-circle:before {
content: var(--icon-rotate-arrow-circle);
}
.icon-rotate-arrow-dots:before {
content: var(--icon-rotate-arrow-dots);
}
.icon-rotate-arrow:before {
content: var(--icon-rotate-arrow);
}
.icon-rotate-arrows-refresh:before {
content: var(--icon-rotate-arrows-refresh);
}
.icon-rotate-cirlce-add-plus:before {
content: var(--icon-rotate-cirlce-add-plus);
}
.icon-rotate-horizontal:before {
content: var(--icon-rotate-horizontal);
}
.icon-round-image:before {
content: var(--icon-round-image);
}
.icon-salt-pepper:before {
content: var(--icon-salt-pepper);
}
.icon-saucepan:before {
content: var(--icon-saucepan);
}
.icon-scales-legal-protection:before {
content: var(--icon-scales-legal-protection);
}
.icon-school-bag:before {
content: var(--icon-school-bag);
}
.icon-scissors-cut:before {
content: var(--icon-scissors-cut);
}
.icon-search-bug-spy:before {
content: var(--icon-search-bug-spy);
}
.icon-search-graph-traffic-conversion:before {
content: var(--icon-search-graph-traffic-conversion);
}
.icon-search-graph:before {
content: var(--icon-search-graph);
}
.icon-search-loap-rotate-arrow:before {
content: var(--icon-search-loap-rotate-arrow);
}
.icon-search-loupe-checkmark:before {
content: var(--icon-search-loupe-checkmark);
}
.icon-search-loupe-circle:before {
content: var(--icon-search-loupe-circle);
}
.icon-search-loupe-dots:before {
content: var(--icon-search-loupe-dots);
}
.icon-search-loupe-graph-traffic-conversion:before {
content: var(--icon-search-loupe-graph-traffic-conversion);
}
.icon-search-loupe-question:before {
content: var(--icon-search-loupe-question);
}
.icon-search-refresh:before {
content: var(--icon-search-refresh);
}
.icon-search-select:before {
content: var(--icon-search-select);
}
.icon-search-select-loupe:before {
content: var(--icon-search-select-loupe);
}
.icon-search:before {
content: var(--icon-search);
}
.icon-select-focus-disable-off:before {
content: var(--icon-select-focus-disable-off);
}
.icon-select-link-broken:before {
content: var(--icon-select-link-broken);
}
.icon-select-object:before {
content: var(--icon-select-object);
}
.icon-send-message-send-share2:before {
content: var(--icon-send-message-send-share2);
}
.icon-send-message-send-share:before {
content: var(--icon-send-message-send-share);
}
.icon-seo:before {
content: var(--icon-seo);
}
.icon-servers-databases-01:before {
content: var(--icon-servers-databases-01);
}
.icon-servers-databases-02:before {
content: var(--icon-servers-databases-02);
}
.icon-servers-databases-03:before {
content: var(--icon-servers-databases-03);
}
.icon-servers-databases-04:before {
content: var(--icon-servers-databases-04);
}
.icon-servers-databases-05:before {
content: var(--icon-servers-databases-05);
}
.icon-servers-databases-06:before {
content: var(--icon-servers-databases-06);
}
.icon-servers-databases-07:before {
content: var(--icon-servers-databases-07);
}
.icon-servers-databases-08:before {
content: var(--icon-servers-databases-08);
}
.icon-servers-databases-09:before {
content: var(--icon-servers-databases-09);
}
.icon-servers-databases-10:before {
content: var(--icon-servers-databases-10);
}
.icon-servers-databases-11:before {
content: var(--icon-servers-databases-11);
}
.icon-servers-databases-12:before {
content: var(--icon-servers-databases-12);
}
.icon-servers-databases-13:before {
content: var(--icon-servers-databases-13);
}
.icon-servers-databases-14:before {
content: var(--icon-servers-databases-14);
}
.icon-servers-databases-15:before {
content: var(--icon-servers-databases-15);
}
.icon-servers-databases-16:before {
content: var(--icon-servers-databases-16);
}
.icon-servers-databases-17:before {
content: var(--icon-servers-databases-17);
}
.icon-servers-databases-18:before {
content: var(--icon-servers-databases-18);
}
.icon-servers-databases-19:before {
content: var(--icon-servers-databases-19);
}
.icon-servers-databases-20:before {
content: var(--icon-servers-databases-20);
}
.icon-service-mark:before {
content: var(--icon-service-mark);
}
.icon-serving-dome-hand:before {
content: var(--icon-serving-dome-hand);
}
.icon-serving-dome:before {
content: var(--icon-serving-dome);
}
.icon-setting-filter:before {
content: var(--icon-setting-filter);
}
.icon-setting:before {
content: var(--icon-setting);
}
.icon-settings-circle2:before {
content: var(--icon-settings-circle2);
}
.icon-settings-circle:before {
content: var(--icon-settings-circle);
}
.icon-settings-filter:before {
content: var(--icon-settings-filter);
}
.icon-settings-gear-square:before {
content: var(--icon-settings-gear-square);
}
.icon-settings-gear:before {
content: var(--icon-settings-gear);
}
.icon-settings-select:before {
content: var(--icon-settings-select);
}
.icon-settings-switches-square-volume-knob:before {
content: var(--icon-settings-switches-square-volume-knob);
}
.icon-settings-switches-square:before {
content: var(--icon-settings-switches-square);
}
.icon-settings:before {
content: var(--icon-settings);
}
.icon-shapes-objects2:before {
content: var(--icon-shapes-objects2);
}
.icon-shapes-objects3:before {
content: var(--icon-shapes-objects3);
}
.icon-shapes-objects4:before {
content: var(--icon-shapes-objects4);
}
.icon-shapes-objects:before {
content: var(--icon-shapes-objects);
}
.icon-shapes2:before {
content: var(--icon-shapes2);
}
.icon-shapes3:before {
content: var(--icon-shapes3);
}
.icon-shapes4:before {
content: var(--icon-shapes4);
}
.icon-shapes5:before {
content: var(--icon-shapes5);
}
.icon-shapes:before {
content: var(--icon-shapes);
}
.icon-share-arrow:before {
content: var(--icon-share-arrow);
}
.icon-share-signal-circle:before {
content: var(--icon-share-signal-circle);
}
.icon-share-signal-square:before {
content: var(--icon-share-signal-square);
}
.icon-share-transmit:before {
content: var(--icon-share-transmit);
}
.icon-shield-protected-checkmark:before {
content: var(--icon-shield-protected-checkmark);
}
.icon-shield-protected-circle:before {
content: var(--icon-shield-protected-circle);
}
.icon-shield-protected-disabled-ross:before {
content: var(--icon-shield-protected-disabled-ross);
}
.icon-shield-protected-keyhole:before {
content: var(--icon-shield-protected-keyhole);
}
.icon-shield-protected-refresh-loading:before {
content: var(--icon-shield-protected-refresh-loading);
}
.icon-shield-protected-world-internet:before {
content: var(--icon-shield-protected-world-internet);
}
.icon-shield-protected:before {
content: var(--icon-shield-protected);
}
.icon-shield-signal-protection:before {
content: var(--icon-shield-signal-protection);
}
.icon-shop-basket:before {
content: var(--icon-shop-basket);
}
.icon-shop-mobile:before {
content: var(--icon-shop-mobile);
}
.icon-shopping-cart:before {
content: var(--icon-shopping-cart);
}
.icon-shopping-ecommerce-02:before {
content: var(--icon-shopping-ecommerce-02);
}
.icon-shopping-ecommerce-04:before {
content: var(--icon-shopping-ecommerce-04);
}
.icon-shopping-ecommerce-05:before {
content: var(--icon-shopping-ecommerce-05);
}
.icon-shopping-ecommerce-06:before {
content: var(--icon-shopping-ecommerce-06);
}
.icon-shopping-ecommerce-07:before {
content: var(--icon-shopping-ecommerce-07);
}
.icon-shopping-ecommerce-08:before {
content: var(--icon-shopping-ecommerce-08);
}
.icon-shopping-ecommerce-09:before {
content: var(--icon-shopping-ecommerce-09);
}
.icon-shopping-ecommerce-10:before {
content: var(--icon-shopping-ecommerce-10);
}
.icon-shopping-ecommerce-11:before {
content: var(--icon-shopping-ecommerce-11);
}
.icon-shopping-ecommerce-12:before {
content: var(--icon-shopping-ecommerce-12);
}
.icon-shopping-ecommerce-13:before {
content: var(--icon-shopping-ecommerce-13);
}
.icon-shopping-ecommerce-14:before {
content: var(--icon-shopping-ecommerce-14);
}
.icon-shopping-ecommerce-15:before {
content: var(--icon-shopping-ecommerce-15);
}
.icon-shopping-ecommerce-16:before {
content: var(--icon-shopping-ecommerce-16);
}
.icon-shopping-ecommerce-17:before {
content: var(--icon-shopping-ecommerce-17);
}
.icon-shopping-ecommerce-18:before {
content: var(--icon-shopping-ecommerce-18);
}
.icon-shopping-ecommerce-19:before {
content: var(--icon-shopping-ecommerce-19);
}
.icon-shopping-ecommerce-20:before {
content: var(--icon-shopping-ecommerce-20);
}
.icon-shopping-ecommerce-21:before {
content: var(--icon-shopping-ecommerce-21);
}
.icon-shopping-ecommerce-22:before {
content: var(--icon-shopping-ecommerce-22);
}
.icon-shopping-ecommerce-23:before {
content: var(--icon-shopping-ecommerce-23);
}
.icon-shopping-ecommerce-24:before {
content: var(--icon-shopping-ecommerce-24);
}
.icon-shopping-ecommerce-25:before {
content: var(--icon-shopping-ecommerce-25);
}
.icon-shopping-ecommerce-26:before {
content: var(--icon-shopping-ecommerce-26);
}
.icon-shopping-ecommerce-27:before {
content: var(--icon-shopping-ecommerce-27);
}
.icon-shopping-ecommerce-28:before {
content: var(--icon-shopping-ecommerce-28);
}
.icon-shopping-ecommerce-29:before {
content: var(--icon-shopping-ecommerce-29);
}
.icon-shopping-ecommerce-30:before {
content: var(--icon-shopping-ecommerce-30);
}
.icon-shopping-ecommerce-31:before {
content: var(--icon-shopping-ecommerce-31);
}
.icon-shopping-ecommerce-32:before {
content: var(--icon-shopping-ecommerce-32);
}
.icon-shopping-ecommerce-33:before {
content: var(--icon-shopping-ecommerce-33);
}
.icon-shopping-ecommerce-34:before {
content: var(--icon-shopping-ecommerce-34);
}
.icon-shopping-ecommerce-35:before {
content: var(--icon-shopping-ecommerce-35);
}
.icon-shopping-ecommerce-36:before {
content: var(--icon-shopping-ecommerce-36);
}
.icon-shopping-ecommerce-37:before {
content: var(--icon-shopping-ecommerce-37);
}
.icon-shopping-ecommerce-38:before {
content: var(--icon-shopping-ecommerce-38);
}
.icon-shopping-ecommerce-39:before {
content: var(--icon-shopping-ecommerce-39);
}
.icon-shopping-ecommerce-40:before {
content: var(--icon-shopping-ecommerce-40);
}
.icon-signal2:before {
content: var(--icon-signal2);
}
.icon-signal:before {
content: var(--icon-signal);
}
.icon-sim-change-update:before {
content: var(--icon-sim-change-update);
}
.icon-sim-change:before {
content: var(--icon-sim-change);
}
.icon-sim-refresh-update:before {
content: var(--icon-sim-refresh-update);
}
.icon-sim:before {
content: var(--icon-sim);
}
.icon-single-user:before {
content: var(--icon-single-user);
}
.icon-single-user-alert:before {
content: var(--icon-single-user-alert);
}
.icon-single-user-back:before {
content: var(--icon-single-user-back);
}
.icon-single-user-check:before {
content: var(--icon-single-user-check);
}
.icon-single-user-clock:before {
content: var(--icon-single-user-clock);
}
.icon-single-user-discount:before {
content: var(--icon-single-user-discount);
}
.icon-single-user-download:before {
content: var(--icon-single-user-download);
}
.icon-single-user-edit:before {
content: var(--icon-single-user-edit);
}
.icon-single-user-enter:before {
content: var(--icon-single-user-enter);
}
.icon-single-user-favorite:before {
content: var(--icon-single-user-favorite);
}
.icon-single-user-info:before {
content: var(--icon-single-user-info);
}
.icon-single-user-lightning:before {
content: var(--icon-single-user-lightning);
}
.icon-single-user-loading:before {
content: var(--icon-single-user-loading);
}
.icon-single-user-lock:before {
content: var(--icon-single-user-lock);
}
.icon-single-user-minus:before {
content: var(--icon-single-user-minus);
}
.icon-single-user-one:before {
content: var(--icon-single-user-one);
}
.icon-single-user-remove:before {
content: var(--icon-single-user-remove);
}
.icon-single-user-search:before {
content: var(--icon-single-user-search);
}
.icon-single-user-setting:before {
content: var(--icon-single-user-setting);
}
.icon-single-user-upload:before {
content: var(--icon-single-user-upload);
}
.icon-siri:before {
content: var(--icon-siri);
}
.icon-slack:before {
content: var(--icon-slack);
}
.icon-sleep-mode:before {
content: var(--icon-sleep-mode);
}
.icon-sleep-snooze-zzz:before {
content: var(--icon-sleep-snooze-zzz);
}
.icon-slides-windows2:before {
content: var(--icon-slides-windows2);
}
.icon-slides-windows:before {
content: var(--icon-slides-windows);
}
.icon-smileys-01:before {
content: var(--icon-smileys-01);
}
.icon-smileys-02:before {
content: var(--icon-smileys-02);
}
.icon-smileys-03:before {
content: var(--icon-smileys-03);
}
.icon-smileys-04:before {
content: var(--icon-smileys-04);
}
.icon-smileys-05:before {
content: var(--icon-smileys-05);
}
.icon-smileys-06:before {
content: var(--icon-smileys-06);
}
.icon-smileys-07:before {
content: var(--icon-smileys-07);
}
.icon-smileys-08:before {
content: var(--icon-smileys-08);
}
.icon-smileys-09:before {
content: var(--icon-smileys-09);
}
.icon-smileys-10:before {
content: var(--icon-smileys-10);
}
.icon-smileys-11:before {
content: var(--icon-smileys-11);
}
.icon-smileys-12:before {
content: var(--icon-smileys-12);
}
.icon-smileys-13:before {
content: var(--icon-smileys-13);
}
.icon-smileys-14:before {
content: var(--icon-smileys-14);
}
.icon-smileys-15:before {
content: var(--icon-smileys-15);
}
.icon-smileys-16:before {
content: var(--icon-smileys-16);
}
.icon-smileys-17:before {
content: var(--icon-smileys-17);
}
.icon-smileys-18:before {
content: var(--icon-smileys-18);
}
.icon-smileys-19:before {
content: var(--icon-smileys-19);
}
.icon-smileys-20:before {
content: var(--icon-smileys-20);
}
.icon-smileys:before {
content: var(--icon-smileys);
}
.icon-snapchat-circle:before {
content: var(--icon-snapchat-circle);
}
.icon-social-media-01:before {
content: var(--icon-social-media-01);
}
.icon-social-media-02:before {
content: var(--icon-social-media-02);
}
.icon-social-media-03:before {
content: var(--icon-social-media-03);
}
.icon-social-media-04:before {
content: var(--icon-social-media-04);
}
.icon-social-media-05:before {
content: var(--icon-social-media-05);
}
.icon-social-media-06:before {
content: var(--icon-social-media-06);
}
.icon-social-media-07:before {
content: var(--icon-social-media-07);
}
.icon-social-media-08:before {
content: var(--icon-social-media-08);
}
.icon-social-media-09:before {
content: var(--icon-social-media-09);
}
.icon-social-media-10:before {
content: var(--icon-social-media-10);
}
.icon-social-media-11:before {
content: var(--icon-social-media-11);
}
.icon-social-media-12:before {
content: var(--icon-social-media-12);
}
.icon-social-media-13:before {
content: var(--icon-social-media-13);
}
.icon-social-media-14:before {
content: var(--icon-social-media-14);
}
.icon-social-media-15:before {
content: var(--icon-social-media-15);
}
.icon-social-media-16:before {
content: var(--icon-social-media-16);
}
.icon-social-media-17:before {
content: var(--icon-social-media-17);
}
.icon-social-media-18:before {
content: var(--icon-social-media-18);
}
.icon-social-media-19:before {
content: var(--icon-social-media-19);
}
.icon-social-media-20:before {
content: var(--icon-social-media-20);
}
.icon-social-media-21:before {
content: var(--icon-social-media-21);
}
.icon-social-media-22:before {
content: var(--icon-social-media-22);
}
.icon-social-media-23:before {
content: var(--icon-social-media-23);
}
.icon-social-media-24:before {
content: var(--icon-social-media-24);
}
.icon-social-media-25:before {
content: var(--icon-social-media-25);
}
.icon-social-media-26:before {
content: var(--icon-social-media-26);
}
.icon-social-media-27:before {
content: var(--icon-social-media-27);
}
.icon-social-media-28:before {
content: var(--icon-social-media-28);
}
.icon-social-media-29:before {
content: var(--icon-social-media-29);
}
.icon-social-media-30:before {
content: var(--icon-social-media-30);
}
.icon-social-media-31:before {
content: var(--icon-social-media-31);
}
.icon-social-media-32:before {
content: var(--icon-social-media-32);
}
.icon-social-media-33:before {
content: var(--icon-social-media-33);
}
.icon-social-media-34:before {
content: var(--icon-social-media-34);
}
.icon-social-media-35:before {
content: var(--icon-social-media-35);
}
.icon-social-media-36:before {
content: var(--icon-social-media-36);
}
.icon-social-media-37:before {
content: var(--icon-social-media-37);
}
.icon-social-media-38:before {
content: var(--icon-social-media-38);
}
.icon-social-media-39:before {
content: var(--icon-social-media-39);
}
.icon-social-media-40:before {
content: var(--icon-social-media-40);
}
.icon-social-medias-rewards-rating-01:before {
content: var(--icon-social-medias-rewards-rating-01);
}
.icon-social-medias-rewards-rating-02:before {
content: var(--icon-social-medias-rewards-rating-02);
}
.icon-social-medias-rewards-rating-04:before {
content: var(--icon-social-medias-rewards-rating-04);
}
.icon-social-medias-rewards-rating-05:before {
content: var(--icon-social-medias-rewards-rating-05);
}
.icon-social-medias-rewards-rating-06:before {
content: var(--icon-social-medias-rewards-rating-06);
}
.icon-social-medias-rewards-rating-07:before {
content: var(--icon-social-medias-rewards-rating-07);
}
.icon-social-medias-rewards-rating-08:before {
content: var(--icon-social-medias-rewards-rating-08);
}
.icon-social-medias-rewards-rating-09:before {
content: var(--icon-social-medias-rewards-rating-09);
}
.icon-social-medias-rewards-rating-10:before {
content: var(--icon-social-medias-rewards-rating-10);
}
.icon-social-medias-rewards-rating-11:before {
content: var(--icon-social-medias-rewards-rating-11);
}
.icon-social-medias-rewards-rating-12:before {
content: var(--icon-social-medias-rewards-rating-12);
}
.icon-social-medias-rewards-rating-13:before {
content: var(--icon-social-medias-rewards-rating-13);
}
.icon-social-medias-rewards-rating-14:before {
content: var(--icon-social-medias-rewards-rating-14);
}
.icon-social-medias-rewards-rating-15:before {
content: var(--icon-social-medias-rewards-rating-15);
}
.icon-social-medias-rewards-rating-16:before {
content: var(--icon-social-medias-rewards-rating-16);
}
.icon-social-medias-rewards-rating-17:before {
content: var(--icon-social-medias-rewards-rating-17);
}
.icon-social-medias-rewards-rating-18:before {
content: var(--icon-social-medias-rewards-rating-18);
}
.icon-social-medias-rewards-rating-19:before {
content: var(--icon-social-medias-rewards-rating-19);
}
.icon-social-medias-rewards-rating-20:before {
content: var(--icon-social-medias-rewards-rating-20);
}
.icon-spatula:before {
content: var(--icon-spatula);
}
.icon-spectrum:before {
content: var(--icon-spectrum);
}
.icon-sphere:before {
content: var(--icon-sphere);
}
.icon-sport-01:before {
content: var(--icon-sport-01);
}
.icon-sport-02:before {
content: var(--icon-sport-02);
}
.icon-sport-03:before {
content: var(--icon-sport-03);
}
.icon-sport-04:before {
content: var(--icon-sport-04);
}
.icon-sport-05:before {
content: var(--icon-sport-05);
}
.icon-sport-06:before {
content: var(--icon-sport-06);
}
.icon-sport-07:before {
content: var(--icon-sport-07);
}
.icon-sport-08:before {
content: var(--icon-sport-08);
}
.icon-sport-09:before {
content: var(--icon-sport-09);
}
.icon-sport-10:before {
content: var(--icon-sport-10);
}
.icon-sport-11:before {
content: var(--icon-sport-11);
}
.icon-sport-12:before {
content: var(--icon-sport-12);
}
.icon-sport-13:before {
content: var(--icon-sport-13);
}
.icon-sport-14:before {
content: var(--icon-sport-14);
}
.icon-sport-15:before {
content: var(--icon-sport-15);
}
.icon-sport-16:before {
content: var(--icon-sport-16);
}
.icon-sport-17:before {
content: var(--icon-sport-17);
}
.icon-sport-18:before {
content: var(--icon-sport-18);
}
.icon-sport-19:before {
content: var(--icon-sport-19);
}
.icon-sport-20:before {
content: var(--icon-sport-20);
}
.icon-square:before {
content: var(--icon-square);
}
.icon-stamp-circle:before {
content: var(--icon-stamp-circle);
}
.icon-star-gear-circle:before {
content: var(--icon-star-gear-circle);
}
.icon-star-sign:before {
content: var(--icon-star-sign);
}
.icon-statistics-analytics-arrow-up-circle:before {
content: var(--icon-statistics-analytics-arrow-up-circle);
}
.icon-statistics-analytics-arrow-up-square:before {
content: var(--icon-statistics-analytics-arrow-up-square);
}
.icon-statistics-analytics-square:before {
content: var(--icon-statistics-analytics-square);
}
.icon-stiker-smile-edit:before {
content: var(--icon-stiker-smile-edit);
}
.icon-stop-sign-circle:before {
content: var(--icon-stop-sign-circle);
}
.icon-stop-sign-hexagon:before {
content: var(--icon-stop-sign-hexagon);
}
.icon-store-basket:before {
content: var(--icon-store-basket);
}
.icon-store-music-library:before {
content: var(--icon-store-music-library);
}
.icon-store-square:before {
content: var(--icon-store-square);
}
.icon-substract-group-copy-add:before {
content: var(--icon-substract-group-copy-add);
}
.icon-substract-group-copy2:before {
content: var(--icon-substract-group-copy2);
}
.icon-substract-group-copy3:before {
content: var(--icon-substract-group-copy3);
}
.icon-substract-group-copy:before {
content: var(--icon-substract-group-copy);
}
.icon-substract-group:before {
content: var(--icon-substract-group);
}
.icon-suitcase-financial-portfolio:before {
content: var(--icon-suitcase-financial-portfolio);
}
.icon-support-24:before {
content: var(--icon-support-24);
}
.icon-synchronize-triangle-arrows-recirculation:before {
content: var(--icon-synchronize-triangle-arrows-recirculation);
}
.icon-synchronize:before {
content: var(--icon-synchronize);
}
.icon-tacos:before {
content: var(--icon-tacos);
}
.icon-target-remove-delite:before {
content: var(--icon-target-remove-delite);
}
.icon-task-list-document-text:before {
content: var(--icon-task-list-document-text);
}
.icon-tea-bag:before {
content: var(--icon-tea-bag);
}
.icon-telescope:before {
content: var(--icon-telescope);
}
.icon-terminal:before {
content: var(--icon-terminal);
}
.icon-text-a-button-square:before {
content: var(--icon-text-a-button-square);
}
.icon-thumbs-up-appreciate-applaud:before {
content: var(--icon-thumbs-up-appreciate-applaud);
}
.icon-thumbs-up-like-unlike:before {
content: var(--icon-thumbs-up-like-unlike);
}
.icon-thumbs-up-like:before {
content: var(--icon-thumbs-up-like);
}
.icon-thumbs-up-shop:before {
content: var(--icon-thumbs-up-shop);
}
.icon-thunder-lightning-circle:before {
content: var(--icon-thunder-lightning-circle);
}
.icon-ticket-group-circle:before {
content: var(--icon-ticket-group-circle);
}
.icon-timer-0-seconds:before {
content: var(--icon-timer-0-seconds);
}
.icon-timer-5-seconds:before {
content: var(--icon-timer-5-seconds);
}
.icon-timer-10-seconds:before {
content: var(--icon-timer-10-seconds);
}
.icon-tools-settings:before {
content: var(--icon-tools-settings);
}
.icon-trademark-circle:before {
content: var(--icon-trademark-circle);
}
.icon-trademark:before {
content: var(--icon-trademark);
}
.icon-transfer-card-money:before {
content: var(--icon-transfer-card-money);
}
.icon-transfer-card-send:before {
content: var(--icon-transfer-card-send);
}
.icon-trapezoid:before {
content: var(--icon-trapezoid);
}
.icon-trash-delete-bin-circle:before {
content: var(--icon-trash-delete-bin-circle);
}
.icon-trash-delete-bin:before {
content: var(--icon-trash-delete-bin);
}
.icon-trash-delete-recicle:before {
content: var(--icon-trash-delete-recicle);
}
.icon-trash-delete-remove:before {
content: var(--icon-trash-delete-remove);
}
.icon-travel-01:before {
content: var(--icon-travel-01);
}
.icon-travel-02:before {
content: var(--icon-travel-02);
}
.icon-travel-03:before {
content: var(--icon-travel-03);
}
.icon-travel-04:before {
content: var(--icon-travel-04);
}
.icon-travel-05:before {
content: var(--icon-travel-05);
}
.icon-travel-06:before {
content: var(--icon-travel-06);
}
.icon-travel-07:before {
content: var(--icon-travel-07);
}
.icon-travel-08:before {
content: var(--icon-travel-08);
}
.icon-travel-09:before {
content: var(--icon-travel-09);
}
.icon-travel-10:before {
content: var(--icon-travel-10);
}
.icon-travel-11:before {
content: var(--icon-travel-11);
}
.icon-travel-12:before {
content: var(--icon-travel-12);
}
.icon-travel-13:before {
content: var(--icon-travel-13);
}
.icon-travel-14:before {
content: var(--icon-travel-14);
}
.icon-travel-15:before {
content: var(--icon-travel-15);
}
.icon-travel-16:before {
content: var(--icon-travel-16);
}
.icon-travel-17:before {
content: var(--icon-travel-17);
}
.icon-travel-18:before {
content: var(--icon-travel-18);
}
.icon-travel-19:before {
content: var(--icon-travel-19);
}
.icon-travel-20:before {
content: var(--icon-travel-20);
}
.icon-triangle-drop:before {
content: var(--icon-triangle-drop);
}
.icon-triangle:before {
content: var(--icon-triangle);
}
.icon-tv-circle-monitor:before {
content: var(--icon-tv-circle-monitor);
}
.icon-twitter-circle:before {
content: var(--icon-twitter-circle);
}
.icon-twitter-square:before {
content: var(--icon-twitter-square);
}
.icon-unlimited-repeat-subscription-circle:before {
content: var(--icon-unlimited-repeat-subscription-circle);
}
.icon-user-chat-messages-bubble:before {
content: var(--icon-user-chat-messages-bubble);
}
.icon-user-circle:before {
content: var(--icon-user-circle);
}
.icon-user-profile-edit:before {
content: var(--icon-user-profile-edit);
}
.icon-user-profile-square:before {
content: var(--icon-user-profile-square);
}
.icon-user-profile2:before {
content: var(--icon-user-profile2);
}
.icon-user-profile3:before {
content: var(--icon-user-profile3);
}
.icon-user-profile4:before {
content: var(--icon-user-profile4);
}
.icon-user-profile5:before {
content: var(--icon-user-profile5);
}
.icon-user-profile6:before {
content: var(--icon-user-profile6);
}
.icon-user-profile7:before {
content: var(--icon-user-profile7);
}
.icon-user-profile8:before {
content: var(--icon-user-profile8);
}
.icon-user-profile9:before {
content: var(--icon-user-profile9);
}
.icon-user-profile10:before {
content: var(--icon-user-profile10);
}
.icon-user-profile11:before {
content: var(--icon-user-profile11);
}
.icon-user-profile12:before {
content: var(--icon-user-profile12);
}
.icon-user-profile13:before {
content: var(--icon-user-profile13);
}
.icon-user-profile14:before {
content: var(--icon-user-profile14);
}
.icon-user-profile:before {
content: var(--icon-user-profile);
}
.icon-user-share:before {
content: var(--icon-user-share);
}
.icon-user-single-select:before {
content: var(--icon-user-single-select);
}
.icon-users-01:before {
content: var(--icon-users-01);
}
.icon-users-02:before {
content: var(--icon-users-02);
}
.icon-users-03:before {
content: var(--icon-users-03);
}
.icon-users-04:before {
content: var(--icon-users-04);
}
.icon-users-05:before {
content: var(--icon-users-05);
}
.icon-users-06:before {
content: var(--icon-users-06);
}
.icon-users-07:before {
content: var(--icon-users-07);
}
.icon-users-08:before {
content: var(--icon-users-08);
}
.icon-users-09:before {
content: var(--icon-users-09);
}
.icon-users-10:before {
content: var(--icon-users-10);
}
.icon-users-11:before {
content: var(--icon-users-11);
}
.icon-users-12:before {
content: var(--icon-users-12);
}
.icon-users-13:before {
content: var(--icon-users-13);
}
.icon-users-14:before {
content: var(--icon-users-14);
}
.icon-users-15:before {
content: var(--icon-users-15);
}
.icon-users-16:before {
content: var(--icon-users-16);
}
.icon-users-17:before {
content: var(--icon-users-17);
}
.icon-users-18:before {
content: var(--icon-users-18);
}
.icon-users-19:before {
content: var(--icon-users-19);
}
.icon-users-20:before {
content: var(--icon-users-20);
}
.icon-video-movies-01:before {
content: var(--icon-video-movies-01);
}
.icon-video-movies-02:before {
content: var(--icon-video-movies-02);
}
.icon-video-movies-03:before {
content: var(--icon-video-movies-03);
}
.icon-video-movies-04:before {
content: var(--icon-video-movies-04);
}
.icon-video-movies-05:before {
content: var(--icon-video-movies-05);
}
.icon-video-movies-06:before {
content: var(--icon-video-movies-06);
}
.icon-video-movies-07:before {
content: var(--icon-video-movies-07);
}
.icon-video-movies-08:before {
content: var(--icon-video-movies-08);
}
.icon-video-movies-09:before {
content: var(--icon-video-movies-09);
}
.icon-video-movies-10:before {
content: var(--icon-video-movies-10);
}
.icon-video-movies-11:before {
content: var(--icon-video-movies-11);
}
.icon-video-movies-12:before {
content: var(--icon-video-movies-12);
}
.icon-video-movies-13:before {
content: var(--icon-video-movies-13);
}
.icon-video-movies-14:before {
content: var(--icon-video-movies-14);
}
.icon-video-movies-15:before {
content: var(--icon-video-movies-15);
}
.icon-video-movies-16:before {
content: var(--icon-video-movies-16);
}
.icon-video-movies-17:before {
content: var(--icon-video-movies-17);
}
.icon-video-movies-18:before {
content: var(--icon-video-movies-18);
}
.icon-video-movies-19:before {
content: var(--icon-video-movies-19);
}
.icon-video-movies-20:before {
content: var(--icon-video-movies-20);
}
.icon-video-movies:before {
content: var(--icon-video-movies);
}
.icon-vk-vkontakte-square:before {
content: var(--icon-vk-vkontakte-square);
}
.icon-vk-vkontakte:before {
content: var(--icon-vk-vkontakte);
}
.icon-volume-audio-music-volume-circle:before {
content: var(--icon-volume-audio-music-volume-circle);
}
.icon-volume-knob:before {
content: var(--icon-volume-knob);
}
.icon-vpn-stiker:before {
content: var(--icon-vpn-stiker);
}
.icon-warning-refresh-square:before {
content: var(--icon-warning-refresh-square);
}
.icon-warning-retry-alert:before {
content: var(--icon-warning-retry-alert);
}
.icon-watch-clock-time:before {
content: var(--icon-watch-clock-time);
}
.icon-weather-01:before {
content: var(--icon-weather-01);
}
.icon-weather-02:before {
content: var(--icon-weather-02);
}
.icon-weather-03:before {
content: var(--icon-weather-03);
}
.icon-weather-04:before {
content: var(--icon-weather-04);
}
.icon-weather-05:before {
content: var(--icon-weather-05);
}
.icon-weather-06:before {
content: var(--icon-weather-06);
}
.icon-weather-07:before {
content: var(--icon-weather-07);
}
.icon-weather-08:before {
content: var(--icon-weather-08);
}
.icon-weather-09:before {
content: var(--icon-weather-09);
}
.icon-weather-10:before {
content: var(--icon-weather-10);
}
.icon-weather-11:before {
content: var(--icon-weather-11);
}
.icon-weather-12:before {
content: var(--icon-weather-12);
}
.icon-weather-13:before {
content: var(--icon-weather-13);
}
.icon-weather-14:before {
content: var(--icon-weather-14);
}
.icon-weather-15:before {
content: var(--icon-weather-15);
}
.icon-weather-16:before {
content: var(--icon-weather-16);
}
.icon-weather-17:before {
content: var(--icon-weather-17);
}
.icon-weather-18:before {
content: var(--icon-weather-18);
}
.icon-weather-19:before {
content: var(--icon-weather-19);
}
.icon-weather-20:before {
content: var(--icon-weather-20);
}
.icon-whisk:before {
content: var(--icon-whisk);
}
.icon-wifi-alarm:before {
content: var(--icon-wifi-alarm);
}
.icon-wifi-circle:before {
content: var(--icon-wifi-circle);
}
.icon-wifi-full:before {
content: var(--icon-wifi-full);
}
.icon-wifi-off-turn-off:before {
content: var(--icon-wifi-off-turn-off);
}
.icon-wifi-portable-off:before {
content: var(--icon-wifi-portable-off);
}
.icon-wifi-question:before {
content: var(--icon-wifi-question);
}
.icon-wifi-refresh-circle:before {
content: var(--icon-wifi-refresh-circle);
}
.icon-wifi-spot-square:before {
content: var(--icon-wifi-spot-square);
}
.icon-wifi-warning:before {
content: var(--icon-wifi-warning);
}
.icon-wifi:before {
content: var(--icon-wifi);
}
.icon-windows-button:before {
content: var(--icon-windows-button);
}
.icon-wine-opener:before {
content: var(--icon-wine-opener);
}
.icon-wireless-payments-credit-card:before {
content: var(--icon-wireless-payments-credit-card);
}
.icon-wireless-payments-smartphone:before {
content: var(--icon-wireless-payments-smartphone);
}
.icon-world-circle:before {
content: var(--icon-world-circle);
}
.icon-world-transaction-transfer:before {
content: var(--icon-world-transaction-transfer);
}
.icon-youtube-circle:before {
content: var(--icon-youtube-circle);
}
.icon-youtube-square:before {
content: var(--icon-youtube-square);
}
.icon-add:before {
content: var(--icon-add);
}
.icon-scales:before {
content: var(--icon-scales);
}
.icon-chart:before {
content: var(--icon-chart);
}
.icon-fedora:before {
content: var(--icon-fedora);
}
.icon-ubuntu:before {
content: var(--icon-ubuntu);
}
.icon-windows:before {
content: var(--icon-windows);
}
.icon-earth:before {
content: var(--icon-earth);
}
.icon-reload:before {
content: var(--icon-reload);
}
.icon-linux:before {
content: var(--icon-linux);
}
.icon-files:before {
content: var(--icon-files);
}
.icon-docker:before {
content: var(--icon-docker);
}
.icon-cog:before {
content: var(--icon-cog);
}
.icon-arrow:before {
content: var(--icon-arrow);
}
.icon-cog-ring:before {
content: var(--icon-cog-ring);
}
.icon-cross:before {
content: var(--icon-cross);
}
.icon-external:before {
content: var(--icon-external);
}
.icon-github:before {
content: var(--icon-github);
}
.icon-heart:before {
content: var(--icon-heart);
}
.icon-info:before {
content: var(--icon-info);
}
.icon-linkedin:before {
content: var(--icon-linkedin);
}
.icon-mic:before {
content: var(--icon-mic);
}
.icon-play:before {
content: var(--icon-play);
}
.icon-podcast:before {
content: var(--icon-podcast);
}
.icon-reddit:before {
content: var(--icon-reddit);
}
.icon-rss:before {
content: var(--icon-rss);
}
.icon-shield:before {
content: var(--icon-shield);
}
.icon-tick:before {
content: var(--icon-tick);
}
.icon-twitter:before {
content: var(--icon-twitter);
}
.icon-users:before {
content: var(--icon-users);
}
.icon-warning:before {
content: var(--icon-warning);
}
.icon-mac:before {
content: var(--icon-mac);
}
.icon-discord:before {
content: var(--icon-discord);
}
.icon-youtube:before {
content: var(--icon-youtube);
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Variables</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Variables-Font-Icon">preview</a></li>
<li><a href="#html-Variables-Font-Icon">html</a></li>
<li><a href="#scss-Variables-Font-Icon">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Variables-Font-Icon" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<h1 class="text-6xl">GO TO SCSS TAB</h1>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Variables-Font-Icon">
<pre><code style="min-height: 200px;" class="language-html">&lt;h1 class="text-6xl"&gt;GO TO SCSS TAB&lt;/h1&gt;</code></pre>
</li>
<li id="scss-Variables-Font-Icon">
<pre><code style="min-height: 200px;" class="language-scss">:root {
--icon-monero: "\ede6";
--icon-d-shape-object-01: "\e91f";
--icon-d-shape-object-02: "\e920";
--icon-d-shape-object-03: "\e921";
--icon-d-shape-object-04: "\e922";
--icon-d-shape-object-05: "\e923";
--icon-d-shape-object-06: "\e924";
--icon-d-shape-object-07: "\e925";
--icon-d-shape-object-08: "\e926";
--icon-d-shape-object-09: "\e927";
--icon-d-shape-object-10: "\e928";
--icon-d-shape-object-11: "\e929";
--icon-d-shape-object-12: "\e92a";
--icon-d-shape-object-13: "\e92b";
--icon-d-shape-object-14: "\e92c";
--icon-d-shape-object-15: "\e92d";
--icon-d-shape-object-16: "\e92e";
--icon-d-shape-object-18: "\e92f";
--icon-d-shape-object-19: "\e930";
--icon-d-shape-object-20: "\e931";
--icon-d-ube-sphere: "\e932";
--icon-g-signal: "\e933";
--icon-g-signal1: "\e934";
--icon-hours-day: "\e935";
--icon-hours: "\e936";
--icon-a-square-text-button: "\e937";
--icon-ab-testing: "\e938";
--icon-accessibility: "\e939";
--icon-add-cirlce-plus: "\e93a";
--icon-add-plus-minus-zoom-zoom-out: "\e93b";
--icon-airdrop-signal-share: "\e93c";
--icon-alarm-clock: "\e93d";
--icon-alarm-clock-time-off-rmove: "\e93e";
--icon-alarm-clock-time-timer-add: "\e93f";
--icon-alarm-clock-time-timer-sleep-snooze-zzz: "\e940";
--icon-alarm-clock-time-timer2: "\e941";
--icon-alarm-clock-time-timer3: "\e942";
--icon-alarm-clock-time-timer: "\e943";
--icon-alarm-clock-time-warning: "\e944";
--icon-alarm-clock1: "\e945";
--icon-allow-copying: "\e946";
--icon-anchor-ircle-select: "\e947";
--icon-anchor-select-edit: "\e948";
--icon-anchor-square-select-add: "\e949";
--icon-anchor-square-select-group: "\e94a";
--icon-anchor-square-select-resize: "\e94b";
--icon-anchor-square-select: "\e94c";
--icon-anchor-triangle-select: "\e94d";
--icon-app-application: "\e94e";
--icon-app-store: "\e94f";
--icon-arrow-location-map-direction: "\e950";
--icon-arrow-rotate-dots: "\e951";
--icon-arrows-circle: "\e952";
--icon-arrows-diagrams-01: "\e953";
--icon-arrows-diagrams-02: "\e954";
--icon-arrows-diagrams-03: "\e955";
--icon-arrows-diagrams-04: "\e956";
--icon-arrows-diagrams-05: "\e957";
--icon-arrows-diagrams-06: "\e958";
--icon-arrows-diagrams-07: "\e959";
--icon-arrows-diagrams-08: "\e95a";
--icon-arrows-diagrams-09: "\e95b";
--icon-arrows-diagrams-10: "\e95c";
--icon-arrows-diagrams-11: "\e95d";
--icon-arrows-diagrams-12: "\e95e";
--icon-arrows-diagrams-13: "\e95f";
--icon-arrows-diagrams-14: "\e960";
--icon-arrows-diagrams-15: "\e961";
--icon-arrows-diagrams-16: "\e962";
--icon-arrows-diagrams-17: "\e963";
--icon-arrows-diagrams-18: "\e964";
--icon-arrows-diagrams-19: "\e965";
--icon-arrows-diagrams-20: "\e966";
--icon-arrows-diagrams-21: "\e967";
--icon-arrows-diagrams-22: "\e968";
--icon-arrows-diagrams-23: "\e969";
--icon-arrows-diagrams-24: "\e96a";
--icon-arrows-diagrams-25: "\e96b";
--icon-arrows-diagrams-26: "\e96c";
--icon-arrows-diagrams-27: "\e96d";
--icon-arrows-diagrams-28: "\e96e";
--icon-arrows-diagrams-29: "\e96f";
--icon-arrows-diagrams-30: "\e970";
--icon-arrows-diagrams-31: "\e971";
--icon-arrows-diagrams-32: "\e972";
--icon-arrows-diagrams-33: "\e973";
--icon-arrows-diagrams-34: "\e974";
--icon-arrows-diagrams-35: "\e975";
--icon-arrows-diagrams-36: "\e976";
--icon-arrows-diagrams-37: "\e977";
--icon-arrows-diagrams-38: "\e978";
--icon-arrows-diagrams-39: "\e979";
--icon-arrows-diagrams-40: "\e97a";
--icon-arrows-round2: "\e97b";
--icon-arrows-round: "\e97c";
--icon-asian-food: "\e97d";
--icon-atomic-molecule: "\e97e";
--icon-attachment-link-circle: "\e97f";
--icon-attention-fire: "\e980";
--icon-attribution: "\e981";
--icon-award-rating: "\e982";
--icon-backward-rearward-back-remove: "\e983";
--icon-backward-rearward-back: "\e984";
--icon-bag-circle-essential-interface-shopping-ui: "\e985";
--icon-bag-gift-package-pack: "\e986";
--icon-bag-shopping-circle: "\e987";
--icon-bag-shopping-refresh: "\e988";
--icon-bag-shopping-search: "\e989";
--icon-bag-shopping-square: "\e98a";
--icon-bag-shopping: "\e98b";
--icon-bank: "\e98c";
--icon-barcode-circle: "\e98d";
--icon-barcode-search: "\e98e";
--icon-barcode: "\e98f";
--icon-basket-browser: "\e990";
--icon-basket-ircle: "\e991";
--icon-basket-messages: "\e992";
--icon-basket-mobile: "\e993";
--icon-basket-notification-button: "\e994";
--icon-basket-pack-enter: "\e995";
--icon-basket-refresh: "\e996";
--icon-basket: "\e997";
--icon-beer-bottle-glass: "\e998";
--icon-beer: "\e999";
--icon-behance-circle: "\e99a";
--icon-bell-notifications-circle: "\e99b";
--icon-bell-notifications2: "\e99c";
--icon-bell-notifications3: "\e99d";
--icon-bell-notifications4: "\e99e";
--icon-bell-notifications: "\e99f";
--icon-bezier-curve-pen-tool: "\e9a0";
--icon-bezier-curve: "\e9a1";
--icon-blackboard: "\e9a2";
--icon-bluetooth-circle: "\e9a3";
--icon-bluetooth-off: "\e9a4";
--icon-bluetooth2: "\e9a5";
--icon-bluetooth: "\e9a6";
--icon-book-download: "\e9a7";
--icon-book-open2: "\e9a8";
--icon-book-open3: "\e9a9";
--icon-book-open4: "\e9aa";
--icon-book-open5: "\e9ab";
--icon-book-open6: "\e9ac";
--icon-book-open7: "\e9ad";
--icon-book-open: "\e9ae";
--icon-book: "\e9af";
--icon-bookmark-favorite-add: "\e9b0";
--icon-bookmark-favorite-circle: "\e9b1";
--icon-bookmark-favorite-remove: "\e9b2";
--icon-bookmark-notes: "\e9b3";
--icon-bookmarks-label-tag-double: "\e9b4";
--icon-bookmarks-label-tag: "\e9b5";
--icon-bookmarks-remove: "\e9b6";
--icon-books-apple: "\e9b7";
--icon-brightnes: "\e9b8";
--icon-brightness-edit-setting: "\e9b9";
--icon-broken-link-unlink-attachment-circle: "\e9ba";
--icon-broken-link-unlink-attachment2: "\e9bb";
--icon-broken-link-unlink-attachment3: "\e9bc";
--icon-broken-link-unlink-attachment4: "\e9bd";
--icon-broken-link-unlink-attachment5: "\e9be";
--icon-broken-link-unlink-attachment: "\e9bf";
--icon-browser-web-first-place-search-loupe: "\e9c0";
--icon-browser-web-graph-analitycs: "\e9c1";
--icon-browser-web-search-loupe-checkmark: "\e9c2";
--icon-browser-web-setting-edit: "\e9c3";
--icon-brush: "\e9c4";
--icon-bug-select: "\e9c5";
--icon-burger-drink: "\e9c6";
--icon-burger: "\e9c7";
--icon-business-chart-metrics-laptop: "\e9c8";
--icon-business-chart-metrics: "\e9c9";
--icon-business-chart-research: "\e9ca";
--icon-business-chart2: "\e9cb";
--icon-business-chart3: "\e9cc";
--icon-business-chart4: "\e9cd";
--icon-business-chart5: "\e9ce";
--icon-business-chart6: "\e9cf";
--icon-business-chart7: "\e9d0";
--icon-business-chart: "\e9d1";
--icon-business-products-01: "\e9d2";
--icon-business-products-02: "\e9d3";
--icon-business-products-03: "\e9d4";
--icon-business-products-04: "\e9d5";
--icon-business-products-05: "\e9d6";
--icon-business-products-06: "\e9d7";
--icon-business-products-07: "\e9d8";
--icon-business-products-08: "\e9d9";
--icon-business-products-09: "\e9da";
--icon-business-products-10: "\e9db";
--icon-business-products-11: "\e9dc";
--icon-business-products-12: "\e9dd";
--icon-business-products-13: "\e9de";
--icon-business-products-14: "\e9df";
--icon-business-products-15: "\e9e0";
--icon-business-products-16: "\e9e1";
--icon-business-products-17: "\e9e2";
--icon-business-products-18: "\e9e3";
--icon-business-products-19: "\e9e4";
--icon-business-products-20: "\e9e5";
--icon-buy-button-sticker: "\e9e6";
--icon-calendar-add-plus: "\e9e7";
--icon-calendar-pages: "\e9e8";
--icon-calendar-schedule-11: "\e9e9";
--icon-calendar-schedule-31: "\e9ea";
--icon-calendar-schedule-add: "\e9eb";
--icon-calendar-schedule-edit: "\e9ec";
--icon-calendar-schedule-percent: "\e9ed";
--icon-calendar-schedule-refresh-lading: "\e9ee";
--icon-calendar-schedule-search: "\e9ef";
--icon-calendar-schedule-star: "\e9f0";
--icon-calendar-schedule2: "\e9f1";
--icon-calendar-schedule: "\e9f2";
--icon-calendar-task-sheet: "\e9f3";
--icon-camera-iris: "\e9f4";
--icon-camera-photo-auto: "\e9f5";
--icon-camera-photo-front-rear: "\e9f6";
--icon-camera-photo-select: "\e9f7";
--icon-camera-photo: "\e9f8";
--icon-camera-rotate-vertical: "\e9f9";
--icon-camera-rotate: "\e9fa";
--icon-car-service-parts-01: "\e9fb";
--icon-car-service-parts-02: "\e9fc";
--icon-car-service-parts-03: "\e9fd";
--icon-car-service-parts-04: "\e9fe";
--icon-car-service-parts-05: "\e9ff";
--icon-car-service-parts-06: "\ea00";
--icon-car-service-parts-07: "\ea01";
--icon-car-service-parts-08: "\ea02";
--icon-car-service-parts-09: "\ea03";
--icon-car-service-parts-10: "\ea04";
--icon-car-service-parts-11: "\ea05";
--icon-car-service-parts-12: "\ea06";
--icon-car-service-parts-13: "\ea07";
--icon-car-service-parts-14: "\ea08";
--icon-car-service-parts-15: "\ea09";
--icon-car-service-parts-16: "\ea0a";
--icon-car-service-parts-17: "\ea0b";
--icon-car-service-parts-18: "\ea0c";
--icon-car-service-parts-19: "\ea0d";
--icon-car-service-parts-20: "\ea0e";
--icon-cashbox: "\ea0f";
--icon-charge-lightning-refresh-update: "\ea10";
--icon-chart-circle: "\ea11";
--icon-chat-messages-bubble-circle: "\ea12";
--icon-chat-messages-bubble-phone-call: "\ea13";
--icon-chat-messages-bubble-question: "\ea14";
--icon-chat-messages-bubble2: "\ea15";
--icon-chat-messages-bubble3: "\ea16";
--icon-chat-messages-bubble4: "\ea17";
--icon-chat-messages-bubble5: "\ea18";
--icon-chat-messages-bubble6: "\ea19";
--icon-chat-messages-bubble7: "\ea1a";
--icon-chat-messages-bubble8: "\ea1b";
--icon-chat-messages-bubble9: "\ea1c";
--icon-chat-messages-bubble10: "\ea1d";
--icon-chat-messages-bubble11: "\ea1e";
--icon-chat-messages-bubble12: "\ea1f";
--icon-chat-messages-bubble13: "\ea20";
--icon-chat-messages-bubble14: "\ea21";
--icon-chat-messages-bubble: "\ea22";
--icon-chat-messages: "\ea23";
--icon-check-payment-pen: "\ea24";
--icon-checkbox2: "\ea25";
--icon-checkbox: "\ea26";
--icon-checkmark-done-check: "\ea27";
--icon-chef-gear-apron: "\ea28";
--icon-chef-gear-hat-square-circle: "\ea29";
--icon-chef-gear-hat-square: "\ea2a";
--icon-chef-gear-hat: "\ea2b";
--icon-chip-sim: "\ea2c";
--icon-chocolate: "\ea2d";
--icon-chrome: "\ea2e";
--icon-circle2: "\ea2f";
--icon-circle: "\ea30";
--icon-circles-arrow-share: "\ea31";
--icon-circles-plus-add: "\ea32";
--icon-clap-applause-hands: "\ea33";
--icon-clip-attachment: "\ea34";
--icon-clock-stopwatch: "\ea35";
--icon-clock-time-arrow: "\ea36";
--icon-clock-time-timer-fast2: "\ea37";
--icon-clock-time-timer-fast3: "\ea38";
--icon-clock-time-timer-fast4: "\ea39";
--icon-clock-time-timer-fast: "\ea3a";
--icon-cmd-command-keyboard: "\ea3b";
--icon-code-search: "\ea3c";
--icon-code-text: "\ea3d";
--icon-codepen: "\ea3e";
--icon-codesandbox: "\ea3f";
--icon-color-palette: "\ea40";
--icon-compass-map: "\ea41";
--icon-computer-chat-messages-bubble: "\ea42";
--icon-computers-devices-electronics-01: "\ea43";
--icon-computers-devices-electronics-02: "\ea44";
--icon-computers-devices-electronics-03: "\ea45";
--icon-computers-devices-electronics-04: "\ea46";
--icon-computers-devices-electronics-05: "\ea47";
--icon-computers-devices-electronics-06: "\ea48";
--icon-computers-devices-electronics-07: "\ea49";
--icon-computers-devices-electronics-08: "\ea4a";
--icon-computers-devices-electronics-09: "\ea4b";
--icon-computers-devices-electronics-10: "\ea4c";
--icon-computers-devices-electronics-11: "\ea4d";
--icon-computers-devices-electronics-12: "\ea4e";
--icon-computers-devices-electronics-13: "\ea4f";
--icon-computers-devices-electronics-14: "\ea50";
--icon-computers-devices-electronics-15: "\ea51";
--icon-computers-devices-electronics-16: "\ea52";
--icon-computers-devices-electronics-17: "\ea53";
--icon-computers-devices-electronics-18: "\ea54";
--icon-computers-devices-electronics-19: "\ea55";
--icon-computers-devices-electronics-20: "\ea56";
--icon-content-01: "\ea57";
--icon-content-02: "\ea58";
--icon-content-03: "\ea59";
--icon-content-04: "\ea5a";
--icon-content-05: "\ea5b";
--icon-content-06: "\ea5c";
--icon-content-07: "\ea5d";
--icon-content-08: "\ea5e";
--icon-content-09: "\ea5f";
--icon-content-10: "\ea60";
--icon-content-11: "\ea61";
--icon-content-12: "\ea62";
--icon-content-13: "\ea63";
--icon-content-14: "\ea64";
--icon-content-15: "\ea65";
--icon-content-16: "\ea66";
--icon-content-17: "\ea67";
--icon-content-18: "\ea68";
--icon-content-19: "\ea69";
--icon-content-20: "\ea6a";
--icon-contract-document-seal: "\ea6b";
--icon-copy-grid-plus: "\ea6c";
--icon-copy-paste-select-add-plus: "\ea6d";
--icon-copyright2: "\ea6e";
--icon-copyright: "\ea6f";
--icon-creative-commons: "\ea70";
--icon-credit-card-check-done: "\ea71";
--icon-credit-card-dollar: "\ea72";
--icon-credit-card-mobile: "\ea73";
--icon-credit-card-payment-action2: "\ea74";
--icon-credit-card-payment-action3: "\ea75";
--icon-credit-card-payment-action: "\ea76";
--icon-credit-card-shield-protected: "\ea77";
--icon-credit-card-smartphone-get: "\ea78";
--icon-credit-card-smartphone-send: "\ea79";
--icon-credit-card-smartphone: "\ea7a";
--icon-credit-card-sync: "\ea7b";
--icon-credit-card2: "\ea7c";
--icon-credit-card: "\ea7d";
--icon-credit-cards: "\ea7e";
--icon-crop-edit-refresh: "\ea7f";
--icon-crop-edit-rotate-vertical: "\ea80";
--icon-crop-edit-select: "\ea81";
--icon-crypto-currency-01: "\ea82";
--icon-crypto-currency-02: "\ea83";
--icon-crypto-currency-03: "\ea84";
--icon-crypto-currency-04: "\ea85";
--icon-crypto-currency-05: "\ea86";
--icon-crypto-currency-06: "\ea87";
--icon-crypto-currency-07: "\ea88";
--icon-crypto-currency-08: "\ea89";
--icon-crypto-currency-09: "\ea8a";
--icon-crypto-currency-10: "\ea8b";
--icon-crypto-currency-11: "\ea8c";
--icon-crypto-currency-12: "\ea8d";
--icon-crypto-currency-13: "\ea8e";
--icon-crypto-currency-14: "\ea8f";
--icon-crypto-currency-15: "\ea90";
--icon-crypto-currency-16: "\ea91";
--icon-crypto-currency-17: "\ea92";
--icon-crypto-currency-18: "\ea93";
--icon-crypto-currency-19: "\ea94";
--icon-crypto-currency-20: "\ea95";
--icon-crypto-currency-bitcoin-ethereum2: "\ea96";
--icon-crypto-currency-bitcoin-ethereum3: "\ea97";
--icon-crypto-currency-bitcoin-ethereum4: "\ea98";
--icon-crypto-currency-bitcoin-ethereum5: "\ea99";
--icon-crypto-currency-bitcoin-ethereum6: "\ea9a";
--icon-crypto-currency-bitcoin-ethereum7: "\ea9b";
--icon-crypto-currency-bitcoin-ethereum8: "\ea9c";
--icon-crypto-currency-bitcoin-ethereum9: "\ea9d";
--icon-crypto-currency-bitcoin-ethereum10: "\ea9e";
--icon-crypto-currency-bitcoin-ethereum11: "\ea9f";
--icon-crypto-currency-bitcoin-ethereum12: "\eaa0";
--icon-crypto-currency-bitcoin-ethereum13: "\eaa1";
--icon-crypto-currency-bitcoin-ethereum14: "\eaa2";
--icon-crypto-currency-bitcoin-ethereum15: "\eaa3";
--icon-crypto-currency-bitcoin-ethereum16: "\eaa4";
--icon-crypto-currency-bitcoin-ethereum17: "\eaa5";
--icon-crypto-currency-bitcoin-ethereum18: "\eaa6";
--icon-crypto-currency-bitcoin-ethereum19: "\eaa7";
--icon-crypto-currency-bitcoin-ethereum: "\eaa8";
--icon-cube: "\eaa9";
--icon-cupcake-cherry: "\eaaa";
--icon-currency-course: "\eaab";
--icon-cursor-click-select-circle: "\eaac";
--icon-cursor-click-select: "\eaad";
--icon-cursor-disable-click-plus: "\eaae";
--icon-cursor-disable-click: "\eaaf";
--icon-cursor-loading-waiting: "\eab0";
--icon-cursor-menu-select: "\eab1";
--icon-cursor-select-checkbox: "\eab2";
--icon-cursor-select-circle: "\eab3";
--icon-cursor-select-hand-arrow: "\eab4";
--icon-cursor-select-hand-browser: "\eab5";
--icon-cursor-select-hand-button: "\eab6";
--icon-cursor-select-hand-checkmark: "\eab7";
--icon-cursor-select-hand-click: "\eab8";
--icon-cursor-select-hand-double-click: "\eab9";
--icon-cursor-select-hand-page: "\eaba";
--icon-cursor-select-hand-password: "\eabb";
--icon-cursor-select-hand-remove: "\eabc";
--icon-cursor-select-hand-search: "\eabd";
--icon-cursor-select-hand-swipe-left: "\eabe";
--icon-cursor-select-hand-swipe-right: "\eabf";
--icon-cursor-select-hand2: "\eac0";
--icon-cursor-select-hand3: "\eac1";
--icon-cursor-select-hand4: "\eac2";
--icon-cursor-select-hand5: "\eac3";
--icon-cursor-select-hand6: "\eac4";
--icon-cursor-select-hand7: "\eac5";
--icon-cursor-select-hand: "\eac6";
--icon-cursor-select-pasword: "\eac7";
--icon-cursor-select2: "\eac8";
--icon-cursor-select: "\eac9";
--icon-cursor-swipe-right: "\eaca";
--icon-dashboard: "\eacb";
--icon-decagon: "\eacc";
--icon-delete-disabled-ross-hexagon: "\eacd";
--icon-delite: "\eace";
--icon-delivery-01: "\eacf";
--icon-delivery-02: "\ead0";
--icon-delivery-03: "\ead1";
--icon-delivery-04: "\ead2";
--icon-delivery-05: "\ead3";
--icon-delivery-06: "\ead4";
--icon-delivery-07: "\ead5";
--icon-delivery-08: "\ead6";
--icon-delivery-09: "\ead7";
--icon-delivery-10: "\ead8";
--icon-delivery-11: "\ead9";
--icon-delivery-12: "\eada";
--icon-delivery-13: "\eadb";
--icon-delivery-14: "\eadc";
--icon-delivery-15: "\eadd";
--icon-delivery-16: "\eade";
--icon-delivery-17: "\eadf";
--icon-delivery-18: "\eae0";
--icon-delivery-19: "\eae1";
--icon-delivery-20: "\eae2";
--icon-design-01: "\eae3";
--icon-design-02: "\eae4";
--icon-design-03: "\eae5";
--icon-design-04: "\eae6";
--icon-design-05: "\eae7";
--icon-design-06: "\eae8";
--icon-design-07: "\eae9";
--icon-design-08: "\eaea";
--icon-design-09: "\eaeb";
--icon-design-10: "\eaec";
--icon-design-11: "\eaed";
--icon-design-12: "\eaee";
--icon-design-13: "\eaef";
--icon-design-14: "\eaf0";
--icon-design-15: "\eaf1";
--icon-design-16: "\eaf2";
--icon-design-17: "\eaf3";
--icon-design-18: "\eaf4";
--icon-design-19: "\eaf5";
--icon-design-20: "\eaf6";
--icon-design-21: "\eaf7";
--icon-design-22: "\eaf8";
--icon-design-23: "\eaf9";
--icon-design-24: "\eafa";
--icon-design-25: "\eafb";
--icon-design-26: "\eafc";
--icon-design-27: "\eafd";
--icon-design-28: "\eafe";
--icon-design-29: "\eaff";
--icon-design-30: "\eb00";
--icon-design-31: "\eb01";
--icon-design-32: "\eb02";
--icon-design-33: "\eb03";
--icon-design-34: "\eb04";
--icon-design-35: "\eb05";
--icon-design-36: "\eb06";
--icon-design-38: "\eb07";
--icon-design-39: "\eb08";
--icon-design-40: "\eb09";
--icon-design-41: "\eb0a";
--icon-design-42: "\eb0b";
--icon-design-43: "\eb0c";
--icon-design-44: "\eb0d";
--icon-design-45: "\eb0e";
--icon-design-46: "\eb0f";
--icon-design-47: "\eb10";
--icon-design-48: "\eb11";
--icon-design-49: "\eb12";
--icon-design-50: "\eb13";
--icon-design-51: "\eb14";
--icon-design-52: "\eb15";
--icon-design-53: "\eb16";
--icon-design-54: "\eb17";
--icon-design-55: "\eb18";
--icon-design-56: "\eb19";
--icon-design-57: "\eb1a";
--icon-design-58: "\eb1b";
--icon-design-59: "\eb1c";
--icon-design-60: "\eb1d";
--icon-design-tool-stamp: "\eb1e";
--icon-devices-mobile-tablet-computer: "\eb1f";
--icon-direction-arrow: "\eb20";
--icon-direction-square-arrows: "\eb21";
--icon-discount-oupon2: "\eb22";
--icon-discount-oupon: "\eb23";
--icon-display-graduate-hat: "\eb24";
--icon-divide: "\eb25";
--icon-document-text-edit: "\eb26";
--icon-document-text-search: "\eb27";
--icon-documents-notes-pages: "\eb28";
--icon-dollar-payments-onversion: "\eb29";
--icon-dollar-payments: "\eb2a";
--icon-dollar-select: "\eb2b";
--icon-dollar: "\eb2c";
--icon-done-check-checkmark: "\eb2d";
--icon-download-arrows-loading: "\eb2e";
--icon-download-save-upload: "\eb2f";
--icon-dribbble-circle: "\eb30";
--icon-drink2: "\eb31";
--icon-drink: "\eb32";
--icon-dropbox-circle: "\eb33";
--icon-dual-sim: "\eb34";
--icon-ear: "\eb35";
--icon-earth-home-world-select: "\eb36";
--icon-earth-pin-location-direction: "\eb37";
--icon-email-: "\eb38";
--icon-email--circle: "\eb39";
--icon-email-circle: "\eb3a";
--icon-emails-letter-mail-square: "\eb3b";
--icon-emails-letter-mail: "\eb3c";
--icon-exit-log-out2: "\eb3d";
--icon-exit-log-out3: "\eb3e";
--icon-exit-log-out: "\eb3f";
--icon-expand-pathfinder-intersect2: "\eb40";
--icon-expand-pathfinder-intersect3: "\eb41";
--icon-expand-pathfinder-intersect: "\eb42";
--icon-eye-circle: "\eb43";
--icon-eye-show-hide: "\eb44";
--icon-eye-show-visible: "\eb45";
--icon-eye-square: "\eb46";
--icon-eye: "\eb47";
--icon-face-id: "\eb48";
--icon-facebook-circle: "\eb49";
--icon-facebook-messanger-circle: "\eb4a";
--icon-facebook-messanger-square: "\eb4b";
--icon-feather: "\eb4c";
--icon-figma: "\eb4d";
--icon-files-01: "\eb4e";
--icon-files-02: "\eb4f";
--icon-files-03: "\eb50";
--icon-files-04: "\eb51";
--icon-files-05: "\eb52";
--icon-files-06: "\eb53";
--icon-files-07: "\eb54";
--icon-files-08: "\eb55";
--icon-files-09: "\eb56";
--icon-files-10: "\eb57";
--icon-files-11: "\eb58";
--icon-files-12: "\eb59";
--icon-files-13: "\eb5a";
--icon-files-14: "\eb5b";
--icon-files-15: "\eb5c";
--icon-files-16: "\eb5d";
--icon-files-17: "\eb5e";
--icon-files-18: "\eb5f";
--icon-files-19: "\eb60";
--icon-files-20: "\eb61";
--icon-filter-settings-sort: "\eb62";
--icon-filter-sort-a-z: "\eb63";
--icon-filter-sort-circle-disable-delite: "\eb64";
--icon-filter-sort-circle: "\eb65";
--icon-filter-sort: "\eb66";
--icon-finder-icon: "\eb67";
--icon-fingerprint-circle: "\eb68";
--icon-fingerprint-id: "\eb69";
--icon-fingerprint: "\eb6a";
--icon-fish-eye: "\eb6b";
--icon-flag-circle: "\eb6c";
--icon-flash: "\eb6d";
--icon-flip-up: "\eb6e";
--icon-folder-blank: "\eb6f";
--icon-folder-circle: "\eb70";
--icon-folders-01: "\eb71";
--icon-folders-02: "\eb72";
--icon-folders-03: "\eb73";
--icon-folders-04: "\eb74";
--icon-folders-05: "\eb75";
--icon-folders-06: "\eb76";
--icon-folders-07: "\eb77";
--icon-folders-08: "\eb78";
--icon-folders-09: "\eb79";
--icon-folders-10: "\eb7a";
--icon-folders-11: "\eb7b";
--icon-folders-12: "\eb7c";
--icon-folders-13: "\eb7d";
--icon-folders-15: "\eb7e";
--icon-folders-16: "\eb7f";
--icon-folders-17: "\eb80";
--icon-folders-18: "\eb81";
--icon-folders-19: "\eb82";
--icon-folders-20: "\eb83";
--icon-fork-knife: "\eb84";
--icon-fork-spoon: "\eb85";
--icon-forward-5-seconds: "\eb86";
--icon-forward-15-seconds: "\eb87";
--icon-framer: "\eb88";
--icon-free-rights: "\eb89";
--icon-french-fries: "\eb8a";
--icon-full-signal: "\eb8b";
--icon-geometric-01: "\eb8c";
--icon-geometric-02: "\eb8d";
--icon-geometric-03: "\eb8e";
--icon-geometric-04: "\eb8f";
--icon-geometric-05: "\eb90";
--icon-geometric-06: "\eb91";
--icon-geometric-07: "\eb92";
--icon-geometric-08: "\eb93";
--icon-geometric-09: "\eb94";
--icon-geometric-10: "\eb95";
--icon-geometric-11: "\eb96";
--icon-geometric-12: "\eb97";
--icon-geometric-13: "\eb98";
--icon-geometric-14: "\eb99";
--icon-geometric-15: "\eb9a";
--icon-geometric-16: "\eb9b";
--icon-geometric-17: "\eb9c";
--icon-geometric-18: "\eb9d";
--icon-geometric-19: "\eb9e";
--icon-geometric-20: "\eb9f";
--icon-geometric-21: "\eba0";
--icon-geometric-22: "\eba1";
--icon-geometric-23: "\eba2";
--icon-geometric-24: "\eba3";
--icon-geometric-25: "\eba4";
--icon-geometric-26: "\eba5";
--icon-geometric-27: "\eba6";
--icon-geometric-28: "\eba7";
--icon-geometric-29: "\eba8";
--icon-geometric-30: "\eba9";
--icon-geometric-31: "\ebaa";
--icon-geometric-32: "\ebab";
--icon-geometric-33: "\ebac";
--icon-geometric-34: "\ebad";
--icon-geometric-35: "\ebae";
--icon-geometric-36: "\ebaf";
--icon-geometric-37: "\ebb0";
--icon-geometric-38: "\ebb1";
--icon-geometric-39: "\ebb2";
--icon-geometric-40: "\ebb3";
--icon-gif-circle: "\ebb4";
--icon-gift-sticker: "\ebb5";
--icon-gitlab: "\ebb6";
--icon-glasses-invisible: "\ebb7";
--icon-glasses: "\ebb8";
--icon-global-search: "\ebb9";
--icon-globe-earth-home-world: "\ebba";
--icon-globe-transaction-world: "\ebbb";
--icon-google-drive: "\ebbc";
--icon-google-play-circle: "\ebbd";
--icon-google: "\ebbe";
--icon-graduate-hat: "\ebbf";
--icon-graph-analitycs-select: "\ebc0";
--icon-graph-analitycs: "\ebc1";
--icon-graph-google-analitycs: "\ebc2";
--icon-graphic-tablet-draw: "\ebc3";
--icon-grater: "\ebc4";
--icon-grid-artboard-add-plus: "\ebc5";
--icon-grid-layout-add: "\ebc6";
--icon-grid-layout-square: "\ebc7";
--icon-grid-layout: "\ebc8";
--icon-group-elements-ticket: "\ebc9";
--icon-group-user-add: "\ebca";
--icon-group-user: "\ebcb";
--icon-hand-select: "\ebcc";
--icon-hand-select-click: "\ebcd";
--icon-hand-select-drag2: "\ebce";
--icon-hand-select-drag: "\ebcf";
--icon-hand-select-snap: "\ebd0";
--icon-hand-select-stop: "\ebd1";
--icon-hand-select-swipe-right: "\ebd2";
--icon-hand-select2: "\ebd3";
--icon-hand-select3: "\ebd4";
--icon-hand-select4: "\ebd5";
--icon-hand-select5: "\ebd6";
--icon-hand-select6: "\ebd7";
--icon-hand-select7: "\ebd8";
--icon-hand-select8: "\ebd9";
--icon-hand-select1: "\ebda";
--icon-hand-trackped-drag: "\ebdb";
--icon-hands-off: "\ebdc";
--icon-handshake-deal-circle: "\ebdd";
--icon-hashtag-circle: "\ebde";
--icon-hashtag-square: "\ebdf";
--icon-hashtag-trends: "\ebe0";
--icon-headphone: "\ebe1";
--icon-headphones-customer-support: "\ebe2";
--icon-health-01: "\ebe3";
--icon-health-02: "\ebe4";
--icon-health-03: "\ebe5";
--icon-health-04: "\ebe6";
--icon-health-05: "\ebe7";
--icon-health-06: "\ebe8";
--icon-health-07: "\ebe9";
--icon-health-08: "\ebea";
--icon-health-09: "\ebeb";
--icon-health-10: "\ebec";
--icon-health-11: "\ebed";
--icon-health-12: "\ebee";
--icon-health-13: "\ebef";
--icon-health-14: "\ebf0";
--icon-health-15: "\ebf1";
--icon-health-16: "\ebf2";
--icon-health-17: "\ebf3";
--icon-health-18: "\ebf4";
--icon-health-19: "\ebf5";
--icon-health-20: "\ebf6";
--icon-heart-favorite-add: "\ebf7";
--icon-heart-favorite-like-story: "\ebf8";
--icon-heart-favorite: "\ebf9";
--icon-help-wheel: "\ebfa";
--icon-heptagon: "\ebfb";
--icon-home-circle: "\ebfc";
--icon-home-house2: "\ebfd";
--icon-home-house: "\ebfe";
--icon-home-lock-protection: "\ebff";
--icon-home-square: "\ec00";
--icon-hot-dog: "\ec01";
--icon-http-square: "\ec02";
--icon-ice-cream2: "\ec03";
--icon-ice-cream: "\ec04";
--icon-id-circle: "\ec05";
--icon-id-square: "\ec06";
--icon-igtv: "\ec07";
--icon-imac-dollar-money: "\ec08";
--icon-imac-lock-protection: "\ec09";
--icon-instagram-circle: "\ec0a";
--icon-instagram-square: "\ec0b";
--icon-interaction-teamwork-group: "\ec0c";
--icon-interface-essential-01: "\ec0d";
--icon-interface-essential-02: "\ec0e";
--icon-interface-essential-03: "\ec0f";
--icon-interface-essential-04: "\ec10";
--icon-interface-essential-05: "\ec11";
--icon-interface-essential-06: "\ec12";
--icon-interface-essential-07: "\ec13";
--icon-interface-essential-08: "\ec14";
--icon-interface-essential-09: "\ec15";
--icon-interface-essential-10: "\ec16";
--icon-interface-essential-11: "\ec17";
--icon-interface-essential-12: "\ec18";
--icon-interface-essential-13: "\ec19";
--icon-interface-essential-14: "\ec1a";
--icon-interface-essential-15: "\ec1b";
--icon-interface-essential-16: "\ec1c";
--icon-interface-essential-17: "\ec1d";
--icon-interface-essential-18: "\ec1e";
--icon-interface-essential-19: "\ec1f";
--icon-interface-essential-20: "\ec20";
--icon-interface-essential-21: "\ec21";
--icon-interface-essential-22: "\ec22";
--icon-interface-essential-23: "\ec23";
--icon-interface-essential-24: "\ec24";
--icon-interface-essential-25: "\ec25";
--icon-interface-essential-28: "\ec26";
--icon-interface-essential-29: "\ec27";
--icon-interface-essential-30: "\ec28";
--icon-interface-essential-31: "\ec29";
--icon-interface-essential-32: "\ec2a";
--icon-interface-essential-33: "\ec2b";
--icon-interface-essential-34: "\ec2c";
--icon-interface-essential-35: "\ec2d";
--icon-interface-essential-36: "\ec2e";
--icon-interface-essential-37: "\ec2f";
--icon-interface-essential-38: "\ec30";
--icon-interface-essential-39: "\ec31";
--icon-interface-essential-40: "\ec32";
--icon-interface-essential-41: "\ec33";
--icon-interface-essential-42: "\ec34";
--icon-interface-essential-44: "\ec35";
--icon-interface-essential-45: "\ec36";
--icon-interface-essential-46: "\ec37";
--icon-interface-essential-47: "\ec38";
--icon-interface-essential-48: "\ec39";
--icon-interface-essential-49: "\ec3a";
--icon-interface-essential-50: "\ec3b";
--icon-interface-essential-51: "\ec3c";
--icon-interface-essential-52: "\ec3d";
--icon-interface-essential-53: "\ec3e";
--icon-interface-essential-54: "\ec3f";
--icon-interface-essential-55: "\ec40";
--icon-interface-essential-56: "\ec41";
--icon-interface-essential-57: "\ec42";
--icon-interface-essential-58: "\ec43";
--icon-interface-essential-59: "\ec44";
--icon-interface-essential-60: "\ec45";
--icon-interface-essential-61: "\ec46";
--icon-interface-essential-62: "\ec47";
--icon-interface-essential-63: "\ec48";
--icon-interface-essential-64: "\ec49";
--icon-interface-essential-65: "\ec4a";
--icon-interface-essential-66: "\ec4b";
--icon-interface-essential-67: "\ec4c";
--icon-interface-essential-68: "\ec4d";
--icon-interface-essential-69: "\ec4e";
--icon-interface-essential-70: "\ec4f";
--icon-interface-essential-71: "\ec50";
--icon-interface-essential-72: "\ec51";
--icon-interface-essential-73: "\ec52";
--icon-interface-essential-74: "\ec53";
--icon-interface-essential-75: "\ec54";
--icon-interface-essential-76: "\ec55";
--icon-interface-essential-77: "\ec56";
--icon-interface-essential-78: "\ec57";
--icon-interface-essential-81: "\ec58";
--icon-interface-essential-82: "\ec59";
--icon-interface-essential-84: "\ec5a";
--icon-interface-essential-85: "\ec5b";
--icon-interface-essential-86: "\ec5c";
--icon-interface-essential-87: "\ec5d";
--icon-interface-essential-88: "\ec5e";
--icon-interface-essential-89: "\ec5f";
--icon-interface-essential-90: "\ec60";
--icon-interface-essential-91: "\ec61";
--icon-interface-essential-92: "\ec62";
--icon-interface-essential-93: "\ec63";
--icon-interface-essential-94: "\ec64";
--icon-interface-essential-95: "\ec65";
--icon-interface-essential-96: "\ec66";
--icon-interface-essential-97: "\ec67";
--icon-interface-essential-98: "\ec68";
--icon-interface-essential-99: "\ec69";
--icon-interface-essential-100: "\ec6a";
--icon-interface-essential-101: "\ec6b";
--icon-interface-essential-102: "\ec6c";
--icon-interface-essential-103: "\ec6d";
--icon-interface-essential-104: "\ec6e";
--icon-interface-essential-105: "\ec6f";
--icon-interface-essential-106: "\ec70";
--icon-interface-essential-107: "\ec71";
--icon-interface-essential-108: "\ec72";
--icon-interface-essential-109: "\ec73";
--icon-interface-essential-110: "\ec74";
--icon-interface-essential-111: "\ec75";
--icon-interface-essential-112: "\ec76";
--icon-interface-essential-113: "\ec77";
--icon-interface-essential-114: "\ec78";
--icon-interface-essential-115: "\ec79";
--icon-interface-essential-116: "\ec7a";
--icon-interface-essential-117: "\ec7b";
--icon-interface-essential-118: "\ec7c";
--icon-interface-essential-119: "\ec7d";
--icon-interface-essential-120: "\ec7e";
--icon-interface-essential-121: "\ec7f";
--icon-interface-essential-122: "\ec80";
--icon-interface-essential-123: "\ec81";
--icon-interface-essential-124: "\ec82";
--icon-interface-essential-125: "\ec83";
--icon-interface-essential-126: "\ec84";
--icon-interface-essential-127: "\ec85";
--icon-interface-essential-128: "\ec86";
--icon-interface-essential-129: "\ec87";
--icon-interface-essential-130: "\ec88";
--icon-interface-essential-131: "\ec89";
--icon-interface-essential-132: "\ec8a";
--icon-interface-essential-133: "\ec8b";
--icon-interface-essential-134: "\ec8c";
--icon-interface-essential-135: "\ec8d";
--icon-interface-essential-136: "\ec8e";
--icon-interface-essential-137: "\ec8f";
--icon-interface-essential-138: "\ec90";
--icon-interface-essential-139: "\ec91";
--icon-interface-essential-140: "\ec92";
--icon-interface-essential-141: "\ec93";
--icon-interface-essential-142: "\ec94";
--icon-interface-essential-143: "\ec95";
--icon-interface-essential-144: "\ec96";
--icon-interface-essential-145: "\ec97";
--icon-interface-essential-146: "\ec98";
--icon-interface-essential-147: "\ec99";
--icon-interface-essential-148: "\ec9a";
--icon-interface-essential-149: "\ec9b";
--icon-interface-essential-150: "\ec9c";
--icon-interface-essential-151: "\ec9d";
--icon-interface-essential-152: "\ec9e";
--icon-interface-essential-153: "\ec9f";
--icon-interface-essential-154: "\eca0";
--icon-interface-essential-155: "\eca1";
--icon-interface-essential-156: "\eca2";
--icon-interface-essential-157: "\eca3";
--icon-interface-essential-158: "\eca4";
--icon-interface-essential-159: "\eca5";
--icon-interface-essential-160: "\eca6";
--icon-interface-essential-161: "\eca7";
--icon-interface-essential-162: "\eca8";
--icon-interface-essential-163: "\eca9";
--icon-interface-essential-164: "\ecaa";
--icon-interface-essential-165: "\ecab";
--icon-interface-essential-166: "\ecac";
--icon-interface-essential-167: "\ecad";
--icon-interface-essential-168: "\ecae";
--icon-interface-essential-169: "\ecaf";
--icon-interface-essential-170: "\ecb0";
--icon-interface-essential-171: "\ecb1";
--icon-interface-essential-172: "\ecb2";
--icon-interface-essential-173: "\ecb3";
--icon-interface-essential-174: "\ecb4";
--icon-interface-essential-175: "\ecb5";
--icon-interface-essential-176: "\ecb6";
--icon-interface-essential-177: "\ecb7";
--icon-interface-essential-178: "\ecb8";
--icon-interface-essential-179: "\ecb9";
--icon-interface-essential-180: "\ecba";
--icon-interface-essential-181: "\ecbb";
--icon-interface-essential-182: "\ecbc";
--icon-interface-essential-183: "\ecbd";
--icon-interface-essential-184: "\ecbe";
--icon-interface-essential-185: "\ecbf";
--icon-interface-essential-186: "\ecc0";
--icon-interface-essential-187: "\ecc1";
--icon-interface-essential-188: "\ecc2";
--icon-interface-essential-189: "\ecc3";
--icon-interface-essential-190: "\ecc4";
--icon-interface-essential-191: "\ecc5";
--icon-interface-essential-192: "\ecc6";
--icon-interface-essential-193: "\ecc7";
--icon-interface-essential-194: "\ecc8";
--icon-interface-essential-195: "\ecc9";
--icon-interface-essential-196: "\ecca";
--icon-interface-essential-197: "\eccb";
--icon-interface-essential-198: "\eccc";
--icon-interface-essential-199: "\eccd";
--icon-interface-essential-200: "\ecce";
--icon-interface-essential-201: "\eccf";
--icon-interface-essential-202: "\ecd0";
--icon-interface-essential-203: "\ecd1";
--icon-interface-essential-204: "\ecd2";
--icon-interface-essential-205: "\ecd3";
--icon-interface-essential-206: "\ecd4";
--icon-interface-essential-207: "\ecd5";
--icon-interface-essential-208: "\ecd6";
--icon-interface-essential-209: "\ecd7";
--icon-interface-essential-210: "\ecd8";
--icon-interface-essential-211: "\ecd9";
--icon-interface-essential-212: "\ecda";
--icon-interface-essential-213: "\ecdb";
--icon-interface-essential-214: "\ecdc";
--icon-interface-essential-215: "\ecdd";
--icon-interface-essential-216: "\ecde";
--icon-interface-essential-217: "\ecdf";
--icon-interface-essential-218: "\ece0";
--icon-interface-essential-219: "\ece1";
--icon-interface-essential-220: "\ece2";
--icon-interface-essential-221: "\ece3";
--icon-interface-essential-222: "\ece4";
--icon-interface-essential-223: "\ece5";
--icon-interface-essential-224: "\ece6";
--icon-interface-essential-225: "\ece7";
--icon-interface-essential-226: "\ece8";
--icon-interface-essential-227: "\ece9";
--icon-interface-essential-228: "\ecea";
--icon-interface-essential-229: "\eceb";
--icon-interface-essential-230: "\ecec";
--icon-interface-essential-231: "\eced";
--icon-interface-essential-232: "\ecee";
--icon-interface-essential-233: "\ecef";
--icon-interface-essential-234: "\ecf0";
--icon-interface-essential-235: "\ecf1";
--icon-interface-essential-236: "\ecf2";
--icon-interface-essential-237: "\ecf3";
--icon-interface-essential-238: "\ecf4";
--icon-interface-essential-239: "\ecf5";
--icon-interface-essential-240: "\ecf6";
--icon-interface-essential-241: "\ecf7";
--icon-interface-essential-242: "\ecf8";
--icon-interface-essential-243: "\ecf9";
--icon-interface-essential-244: "\ecfa";
--icon-interface-essential-245: "\ecfb";
--icon-interface-essential-246: "\ecfc";
--icon-interface-essential-247: "\ecfd";
--icon-interface-essential-248: "\ecfe";
--icon-interface-essential-249: "\ecff";
--icon-interface-essential-250: "\ed00";
--icon-interface-essential-251: "\ed01";
--icon-interface-essential-252: "\ed02";
--icon-interface-essential-253: "\ed03";
--icon-interface-essential-254: "\ed04";
--icon-interface-essential-255: "\ed05";
--icon-interface-essential-256: "\ed06";
--icon-interface-essential-257: "\ed07";
--icon-interface-essential-258: "\ed08";
--icon-interface-essential-259: "\ed09";
--icon-interface-essential-260: "\ed0a";
--icon-interface-essential-261: "\ed0b";
--icon-interface-essential-262: "\ed0c";
--icon-interface-essential-263: "\ed0d";
--icon-interface-essential-264: "\ed0e";
--icon-interface-essential-265: "\ed0f";
--icon-interface-essential-266: "\ed10";
--icon-interface-essential-267: "\ed11";
--icon-interface-essential-268: "\ed12";
--icon-interface-essential-269: "\ed13";
--icon-interface-essential-270: "\ed14";
--icon-interface-essential-271: "\ed15";
--icon-interface-essential-272: "\ed16";
--icon-interface-essential-273: "\ed17";
--icon-interface-essential-274: "\ed18";
--icon-interface-essential-275: "\ed19";
--icon-interface-essential-276: "\ed1a";
--icon-interface-essential-277: "\ed1b";
--icon-interface-essential-278: "\ed1c";
--icon-interface-essential-279: "\ed1d";
--icon-interface-essential-280: "\ed1e";
--icon-interface-essential-281: "\ed1f";
--icon-interface-essential-282: "\ed20";
--icon-interface-essential-283: "\ed21";
--icon-interface-essential-284: "\ed22";
--icon-interface-essential-285: "\ed23";
--icon-interface-essential-286: "\ed24";
--icon-interface-essential-287: "\ed25";
--icon-interface-essential-288: "\ed26";
--icon-interface-essential-289: "\ed27";
--icon-interface-essential-290: "\ed28";
--icon-interface-essential-291: "\ed29";
--icon-interface-essential-292: "\ed2a";
--icon-interface-essential-293: "\ed2b";
--icon-interface-essential-294: "\ed2c";
--icon-interface-essential-295: "\ed2d";
--icon-interface-essential-296: "\ed2e";
--icon-interface-essential-297: "\ed2f";
--icon-interface-essential-298: "\ed30";
--icon-interface-essential-299: "\ed31";
--icon-interface-essential-300: "\ed32";
--icon-interface-essential-301: "\ed33";
--icon-interface-essential-302: "\ed34";
--icon-interface-essential-303: "\ed35";
--icon-interface-essential-304: "\ed36";
--icon-interface-essential-305: "\ed37";
--icon-interface-essential-306: "\ed38";
--icon-interface-essential-307: "\ed39";
--icon-interface-essential-308: "\ed3a";
--icon-interface-essential-309: "\ed3b";
--icon-interface-essential-311: "\ed3c";
--icon-interface-essential-312: "\ed3d";
--icon-interface-essential-313: "\ed3e";
--icon-interface-essential-314: "\ed3f";
--icon-interface-essential-315: "\ed40";
--icon-interface-essential-316: "\ed41";
--icon-interface-essential-317: "\ed42";
--icon-interface-essential-318: "\ed43";
--icon-interface-essential-319: "\ed44";
--icon-interface-essential-320: "\ed45";
--icon-internet-network-01: "\ed46";
--icon-internet-network-02: "\ed47";
--icon-internet-network-03: "\ed48";
--icon-internet-network-04: "\ed49";
--icon-internet-network-05: "\ed4a";
--icon-internet-network-06: "\ed4b";
--icon-internet-network-07: "\ed4c";
--icon-internet-network-08: "\ed4d";
--icon-internet-network-09: "\ed4e";
--icon-internet-network-10: "\ed4f";
--icon-internet-network-11: "\ed50";
--icon-internet-network-12: "\ed51";
--icon-internet-network-13: "\ed52";
--icon-internet-network-14: "\ed53";
--icon-internet-network-15: "\ed54";
--icon-internet-network-16: "\ed55";
--icon-internet-network-17: "\ed56";
--icon-internet-network-18: "\ed57";
--icon-internet-network-19: "\ed58";
--icon-internet-network-20: "\ed59";
--icon-invoice-accounting: "\ed5a";
--icon-ios-app-application: "\ed5b";
--icon-key-square: "\ed5c";
--icon-key: "\ed5d";
--icon-keyboard-button-arrows: "\ed5e";
--icon-keyboard-hide: "\ed5f";
--icon-keyboard-show: "\ed60";
--icon-keyboard: "\ed61";
--icon-keyhole-circle: "\ed62";
--icon-keyhole-refresh-reload: "\ed63";
--icon-keyhole-select: "\ed64";
--icon-keyword-target: "\ed65";
--icon-lab-tube: "\ed66";
--icon-ladle: "\ed67";
--icon-language-translate: "\ed68";
--icon-laptop-loupe-search: "\ed69";
--icon-layers-grid-plus: "\ed6a";
--icon-layers-select: "\ed6b";
--icon-layers: "\ed6c";
--icon-leaflet: "\ed6d";
--icon-light-bulb-idea: "\ed6e";
--icon-light-bulb: "\ed6f";
--icon-link-search-building: "\ed70";
--icon-linkedin-circle: "\ed71";
--icon-list-add: "\ed72";
--icon-list-numbers: "\ed73";
--icon-list-remove: "\ed74";
--icon-list-tasks-checkmark: "\ed75";
--icon-list-tasks-delite-remove: "\ed76";
--icon-loading-waiting2: "\ed77";
--icon-loading-waiting: "\ed78";
--icon-loading: "\ed79";
--icon-location-search-radar: "\ed7a";
--icon-lock-password-checkmark-done-ok: "\ed7b";
--icon-lock-password-login: "\ed7c";
--icon-lock-password-wrong: "\ed7d";
--icon-lock-password: "\ed7e";
--icon-lock-refresh-rotate: "\ed7f";
--icon-lock-select: "\ed80";
--icon-lock-shield-protection: "\ed81";
--icon-lock-unlock: "\ed82";
--icon-lock: "\ed83";
--icon-login-enter: "\ed84";
--icon-loop-arrow-360: "\ed85";
--icon-loop-arrow: "\ed86";
--icon-loupe-first-place: "\ed87";
--icon-loupe-list-results-search-button: "\ed88";
--icon-loupe-list-results-search: "\ed89";
--icon-lte-signal: "\ed8a";
--icon-macro: "\ed8b";
--icon-magnet: "\ed8c";
--icon-mail-circle: "\ed8d";
--icon-mail-email-letter-all-mailboxes: "\ed8e";
--icon-mailbox-archive-collections: "\ed8f";
--icon-mailbox-collections-archive2: "\ed90";
--icon-mailbox-collections-archive: "\ed91";
--icon-map-navigation: "\ed92";
--icon-map: "\ed93";
--icon-maps-navigation-01: "\ed94";
--icon-maps-navigation-02: "\ed95";
--icon-maps-navigation-03: "\ed96";
--icon-maps-navigation-04: "\ed97";
--icon-maps-navigation-05: "\ed98";
--icon-maps-navigation-06: "\ed99";
--icon-maps-navigation-07: "\ed9a";
--icon-maps-navigation-08: "\ed9b";
--icon-maps-navigation-09: "\ed9c";
--icon-maps-navigation-10: "\ed9d";
--icon-maps-navigation-11: "\ed9e";
--icon-maps-navigation-12: "\ed9f";
--icon-maps-navigation-13: "\eda0";
--icon-maps-navigation-14: "\eda1";
--icon-maps-navigation-15: "\eda2";
--icon-maps-navigation-16: "\eda3";
--icon-maps-navigation-17: "\eda4";
--icon-maps-navigation-18: "\eda5";
--icon-maps-navigation-19: "\eda6";
--icon-maps-navigation-20: "\eda7";
--icon-media-library-playlist2: "\eda8";
--icon-media-library-playlist3: "\eda9";
--icon-media-library-playlist: "\edaa";
--icon-menu-burger-circle: "\edab";
--icon-menu-burger-square: "\edac";
--icon-menu-burger: "\edad";
--icon-menu-square: "\edae";
--icon-menu-vitamins: "\edaf";
--icon-messages-chat-01: "\edb0";
--icon-messages-chat-02: "\edb1";
--icon-messages-chat-03: "\edb2";
--icon-messages-chat-04: "\edb3";
--icon-messages-chat-05: "\edb4";
--icon-messages-chat-06: "\edb5";
--icon-messages-chat-07: "\edb6";
--icon-messages-chat-08: "\edb7";
--icon-messages-chat-09: "\edb8";
--icon-messages-chat-10: "\edb9";
--icon-messages-chat-11: "\edba";
--icon-messages-chat-12: "\edbb";
--icon-messages-chat-13: "\edbc";
--icon-messages-chat-14: "\edbd";
--icon-messages-chat-15: "\edbe";
--icon-messages-chat-16: "\edbf";
--icon-messages-chat-17: "\edc0";
--icon-messages-chat-18: "\edc1";
--icon-messages-chat-19: "\edc2";
--icon-messages-chat-20: "\edc3";
--icon-messages-chat-question: "\edc4";
--icon-messages-chat2: "\edc5";
--icon-messages-chat3: "\edc6";
--icon-messages-chat4: "\edc7";
--icon-messages-chat5: "\edc8";
--icon-messages-chat6: "\edc9";
--icon-messages-chat7: "\edca";
--icon-messages-chat: "\edcb";
--icon-microphone-mic-rec-circle2: "\edcc";
--icon-microphone-mic-rec-circle3: "\edcd";
--icon-microphone-mic-rec-circle4: "\edce";
--icon-microphone-mic-rec-circle: "\edcf";
--icon-microphone-mic-rec-square: "\edd0";
--icon-microphone-mic-rec: "\edd1";
--icon-microphone-mute-slash: "\edd2";
--icon-microphone: "\edd3";
--icon-microscope: "\edd4";
--icon-mobile-devices-broken: "\edd5";
--icon-mobile-devices-charging: "\edd6";
--icon-mobile-devices-face-id: "\edd7";
--icon-mobile-devices-messages: "\edd8";
--icon-mobile-devices-notification: "\edd9";
--icon-mobile-devices-question: "\edda";
--icon-mobile-devices-rotate: "\eddb";
--icon-mobile-devices-setting: "\eddc";
--icon-mobile-devices-swipe-right: "\eddd";
--icon-mobile-devices-vibration2: "\edde";
--icon-mobile-devices-vibration: "\eddf";
--icon-mobile-devices-wifi: "\ede0";
--icon-mobile-devices2: "\ede1";
--icon-mobile-devices: "\ede2";
--icon-mobile-display: "\ede3";
--icon-mobile-laptop-wifi: "\ede4";
--icon-mobile-tablet: "\ede5";
--icon-money-01: "\ede7";
--icon-money-02: "\ede8";
--icon-money-03: "\ede9";
--icon-money-04: "\edea";
--icon-money-05: "\edeb";
--icon-money-06: "\edec";
--icon-money-07: "\eded";
--icon-money-08: "\edee";
--icon-money-09: "\edef";
--icon-money-10: "\edf0";
--icon-money-11: "\edf1";
--icon-money-12: "\edf2";
--icon-money-13: "\edf3";
--icon-money-14: "\edf4";
--icon-money-15: "\edf5";
--icon-money-16: "\edf6";
--icon-money-17: "\edf7";
--icon-money-18: "\edf8";
--icon-money-19: "\edf9";
--icon-money-20: "\edfa";
--icon-moon-night-mode: "\edfb";
--icon-moon: "\edfc";
--icon-movies-video-circle: "\edfd";
--icon-music-audio-01: "\edfe";
--icon-music-audio-02: "\edff";
--icon-music-audio-03: "\ee00";
--icon-music-audio-04: "\ee01";
--icon-music-audio-05: "\ee02";
--icon-music-audio-06: "\ee03";
--icon-music-audio-07: "\ee04";
--icon-music-audio-08: "\ee05";
--icon-music-audio-09: "\ee06";
--icon-music-audio-10: "\ee07";
--icon-music-audio-11: "\ee08";
--icon-music-audio-12: "\ee09";
--icon-music-audio-13: "\ee0a";
--icon-music-audio-14: "\ee0b";
--icon-music-audio-15: "\ee0c";
--icon-music-audio-16: "\ee0d";
--icon-music-audio-17: "\ee0e";
--icon-music-audio-18: "\ee0f";
--icon-music-audio-19: "\ee10";
--icon-music-audio-20: "\ee11";
--icon-music-audio-21: "\ee12";
--icon-music-audio-22: "\ee13";
--icon-music-audio-23: "\ee14";
--icon-music-audio-24: "\ee15";
--icon-music-audio-25: "\ee16";
--icon-music-audio-26: "\ee17";
--icon-music-audio-27: "\ee18";
--icon-music-audio-28: "\ee19";
--icon-music-audio-29: "\ee1a";
--icon-music-audio-30: "\ee1b";
--icon-music-audio-31: "\ee1c";
--icon-music-audio-32: "\ee1d";
--icon-music-audio-33: "\ee1e";
--icon-music-audio-34: "\ee1f";
--icon-music-audio-35: "\ee20";
--icon-music-audio-36: "\ee21";
--icon-music-audio-37: "\ee22";
--icon-music-audio-38: "\ee23";
--icon-music-audio-39: "\ee24";
--icon-music-audio-40: "\ee25";
--icon-music-audio-41: "\ee26";
--icon-music-audio-42: "\ee27";
--icon-music-audio-43: "\ee28";
--icon-music-audio-44: "\ee29";
--icon-music-audio-45: "\ee2a";
--icon-music-audio-46: "\ee2b";
--icon-music-audio-47: "\ee2c";
--icon-music-audio-48: "\ee2d";
--icon-music-audio-49: "\ee2e";
--icon-music-audio-50: "\ee2f";
--icon-music-audio-51: "\ee30";
--icon-music-audio-52: "\ee31";
--icon-music-audio-53: "\ee32";
--icon-music-audio-54: "\ee33";
--icon-music-audio-55: "\ee34";
--icon-music-audio-56: "\ee35";
--icon-music-audio-57: "\ee36";
--icon-music-audio-58: "\ee37";
--icon-music-audio-59: "\ee38";
--icon-music-audio-60: "\ee39";
--icon-myicons-801: "\ee3a";
--icon-myicons-802: "\ee3b";
--icon-myicons-803: "\ee3c";
--icon-myicons-804: "\ee3d";
--icon-myicons-805: "\ee3e";
--icon-myicons-806: "\ee3f";
--icon-myicons-807: "\ee40";
--icon-myicons-808: "\ee41";
--icon-myicons-809: "\ee42";
--icon-myicons-810: "\ee43";
--icon-myicons-811: "\ee44";
--icon-myicons-812: "\ee45";
--icon-myicons-813: "\ee46";
--icon-myicons-814: "\ee47";
--icon-myicons-815: "\ee48";
--icon-myicons-816: "\ee49";
--icon-myicons-817: "\ee4a";
--icon-myicons-818: "\ee4b";
--icon-myicons-819: "\ee4c";
--icon-myicons-820: "\ee4d";
--icon-myicons-821: "\ee4e";
--icon-myicons-822: "\ee4f";
--icon-myicons-823: "\ee50";
--icon-myicons-824: "\ee51";
--icon-myicons-825: "\ee52";
--icon-myicons-826: "\ee53";
--icon-myicons-827: "\ee54";
--icon-myicons-828: "\ee55";
--icon-myicons-829: "\ee56";
--icon-myicons-830: "\ee57";
--icon-myicons-831: "\ee58";
--icon-myicons-832: "\ee59";
--icon-myicons-833: "\ee5a";
--icon-myicons-834: "\ee5b";
--icon-myicons-835: "\ee5c";
--icon-myicons-836: "\ee5d";
--icon-myicons-837: "\ee5e";
--icon-myicons-838: "\ee5f";
--icon-myicons-839: "\ee60";
--icon-myicons-840: "\ee61";
--icon-new: "\ee62";
--icon-news-bookmark: "\ee63";
--icon-news: "\ee64";
--icon-night-mode: "\ee65";
--icon-no-copying: "\ee66";
--icon-no-copyright: "\ee67";
--icon-no-creative-commons: "\ee68";
--icon-no-derivatives: "\ee69";
--icon-no-sim: "\ee6a";
--icon-nonagon: "\ee6b";
--icon-notebook-bookmark: "\ee6c";
--icon-notebook-check-list: "\ee6d";
--icon-notebook: "\ee6e";
--icon-notepad-pen: "\ee6f";
--icon-notepad2: "\ee70";
--icon-notepad: "\ee71";
--icon-notes-edit: "\ee72";
--icon-notes-pages-notification: "\ee73";
--icon-notification-document-select: "\ee74";
--icon-notification-document-text: "\ee75";
--icon-object-rotate-vertical: "\ee76";
--icon-octagon: "\ee77";
--icon-os-app-icon: "\ee78";
--icon-oval: "\ee79";
--icon-package-return-goods: "\ee7a";
--icon-paralelogram: "\ee7b";
--icon-patch: "\ee7c";
--icon-pathfinder-intersect: "\ee7d";
--icon-payments-finance-01: "\ee7e";
--icon-payments-finance-02: "\ee7f";
--icon-payments-finance-03: "\ee80";
--icon-payments-finance-04: "\ee81";
--icon-payments-finance-05: "\ee82";
--icon-payments-finance-06: "\ee83";
--icon-payments-finance-07: "\ee84";
--icon-payments-finance-08: "\ee85";
--icon-payments-finance-09: "\ee86";
--icon-payments-finance-10: "\ee87";
--icon-payments-finance-11: "\ee88";
--icon-payments-finance-12: "\ee89";
--icon-payments-finance-13: "\ee8a";
--icon-payments-finance-14: "\ee8b";
--icon-payments-finance-15: "\ee8c";
--icon-payments-finance-16: "\ee8d";
--icon-payments-finance-17: "\ee8e";
--icon-payments-finance-19: "\ee8f";
--icon-payments-finance-20: "\ee90";
--icon-payments-finance-21: "\ee91";
--icon-payments-finance-22: "\ee92";
--icon-payments-finance-23: "\ee93";
--icon-payments-finance-24: "\ee94";
--icon-payments-finance-25: "\ee95";
--icon-payments-finance-26: "\ee96";
--icon-payments-finance-27: "\ee97";
--icon-payments-finance-28: "\ee98";
--icon-payments-finance-29: "\ee99";
--icon-payments-finance-30: "\ee9a";
--icon-payments-finance-31: "\ee9b";
--icon-payments-finance-32: "\ee9c";
--icon-payments-finance-33: "\ee9d";
--icon-payments-finance-34: "\ee9e";
--icon-payments-finance-35: "\ee9f";
--icon-payments-finance-36: "\eea0";
--icon-payments-finance-37: "\eea1";
--icon-payments-finance-38: "\eea2";
--icon-pen-edit-circle: "\eea3";
--icon-pen-edit2: "\eea4";
--icon-pen-edit3: "\eea5";
--icon-pen-edit: "\eea6";
--icon-pen-tool-minus: "\eea7";
--icon-pen-tool-plus: "\eea8";
--icon-pencil-ruler: "\eea9";
--icon-pencil: "\eeaa";
--icon-pentagon: "\eeab";
--icon-percent-search: "\eeac";
--icon-phone-call-circle: "\eead";
--icon-phone-call-square: "\eeae";
--icon-phone-call: "\eeaf";
--icon-phone-chat-messages-bubble: "\eeb0";
--icon-phones-01: "\eeb1";
--icon-phones-02: "\eeb2";
--icon-phones-03: "\eeb3";
--icon-phones-04: "\eeb4";
--icon-phones-06: "\eeb5";
--icon-phones-07: "\eeb6";
--icon-phones-08: "\eeb7";
--icon-phones-09: "\eeb8";
--icon-phones-10: "\eeb9";
--icon-phones-11: "\eeba";
--icon-phones-12: "\eebb";
--icon-phones-13: "\eebc";
--icon-phones-14: "\eebd";
--icon-phones-15: "\eebe";
--icon-phones-16: "\eebf";
--icon-phones-17: "\eec0";
--icon-phones-18: "\eec1";
--icon-phones-19: "\eec2";
--icon-phones-20: "\eec3";
--icon-phonograph: "\eec4";
--icon-photo-edit-01: "\eec5";
--icon-photo-edit-02: "\eec6";
--icon-photo-edit-03: "\eec7";
--icon-photo-edit-04: "\eec8";
--icon-photo-edit-05: "\eec9";
--icon-photo-edit-06: "\eeca";
--icon-photo-edit-07: "\eecb";
--icon-photo-edit-08: "\eecc";
--icon-photo-edit-09: "\eecd";
--icon-photo-edit-10: "\eece";
--icon-photo-edit-11: "\eecf";
--icon-photo-edit-12: "\eed0";
--icon-photo-edit-13: "\eed1";
--icon-photo-edit-14: "\eed2";
--icon-photo-edit-15: "\eed3";
--icon-photo-edit-16: "\eed4";
--icon-photo-edit-17: "\eed5";
--icon-photo-edit-18: "\eed6";
--icon-photo-edit-19: "\eed7";
--icon-photo-edit-20: "\eed8";
--icon-photo-edit-21: "\eed9";
--icon-photo-edit-22: "\eeda";
--icon-photo-edit-23: "\eedb";
--icon-photo-edit-24: "\eedc";
--icon-photo-edit-25: "\eedd";
--icon-photo-edit-26: "\eede";
--icon-photo-edit-27: "\eedf";
--icon-photo-edit-28: "\eee0";
--icon-photo-edit-29: "\eee1";
--icon-photo-edit-30: "\eee2";
--icon-photo-edit-31: "\eee3";
--icon-photo-edit-32: "\eee4";
--icon-photo-edit-33: "\eee5";
--icon-photo-edit-34: "\eee6";
--icon-photo-edit-35: "\eee7";
--icon-photo-edit-36: "\eee8";
--icon-photo-edit-37: "\eee9";
--icon-photo-edit-38: "\eeea";
--icon-photo-edit-39: "\eeeb";
--icon-photo-edit-40: "\eeec";
--icon-photo-image-square: "\eeed";
--icon-photos-images: "\eeee";
--icon-pin-location-direction-plus: "\eeef";
--icon-pin-location-direction-refresh2: "\eef0";
--icon-pin-location-direction-refresh3: "\eef1";
--icon-pin-location-direction-refresh: "\eef2";
--icon-pin-location-direction2: "\eef3";
--icon-pin-location-direction3: "\eef4";
--icon-pin-location-direction4: "\eef5";
--icon-pin-location-direction5: "\eef6";
--icon-pin-location-direction6: "\eef7";
--icon-pin-location-direction: "\eef8";
--icon-pin: "\eef9";
--icon-pinned: "\eefa";
--icon-pinterest-circle: "\eefb";
--icon-pizza: "\eefc";
--icon-play-circle-loading: "\eefd";
--icon-play-repeat-circle: "\eefe";
--icon-playlist-like-unlike: "\eeff";
--icon-plus-minus-ircle: "\ef00";
--icon-potholder: "\ef01";
--icon-power-settings: "\ef02";
--icon-power-turn-on: "\ef03";
--icon-premium-rights: "\ef04";
--icon-price-tag-refresh: "\ef05";
--icon-printer-print-button-circle: "\ef06";
--icon-printer: "\ef07";
--icon-processor-lock: "\ef08";
--icon-producthunt-circle: "\ef09";
--icon-producthunt-square: "\ef0a";
--icon-protection-01: "\ef0b";
--icon-protection-02: "\ef0c";
--icon-protection-03: "\ef0d";
--icon-protection-04: "\ef0e";
--icon-protection-05: "\ef0f";
--icon-protection-06: "\ef10";
--icon-protection-07: "\ef11";
--icon-protection-08: "\ef12";
--icon-protection-09: "\ef13";
--icon-protection-10: "\ef14";
--icon-protection-11: "\ef15";
--icon-protection-12: "\ef16";
--icon-protection-13: "\ef17";
--icon-protection-14: "\ef18";
--icon-protection-15: "\ef19";
--icon-protection-16: "\ef1a";
--icon-protection-17: "\ef1b";
--icon-protection-18: "\ef1c";
--icon-protection-19: "\ef1d";
--icon-protection-20: "\ef1e";
--icon-protection-target: "\ef1f";
--icon-public-domain: "\ef20";
--icon-public-mark: "\ef21";
--icon-qr-code: "\ef22";
--icon-question-loading: "\ef23";
--icon-question-refresh: "\ef24";
--icon-question-rhombus: "\ef25";
--icon-question-square: "\ef26";
--icon-read-circle: "\ef27";
--icon-recicle: "\ef28";
--icon-record-button-circle: "\ef29";
--icon-recycle-circle: "\ef2a";
--icon-refresh-links-building: "\ef2b";
--icon-refresh-rotate-circle: "\ef2c";
--icon-refresh-rotate-recycle: "\ef2d";
--icon-refresh-rotate2: "\ef2e";
--icon-refresh-rotate3: "\ef2f";
--icon-refresh-rotate4: "\ef30";
--icon-refresh-rotate5: "\ef31";
--icon-refresh-rotate6: "\ef32";
--icon-refresh-rotate: "\ef33";
--icon-refresh: "\ef34";
--icon-registered-mark: "\ef35";
--icon-reload-repeat-arrows-loading: "\ef36";
--icon-reply-share-circle: "\ef37";
--icon-research-target-selection: "\ef38";
--icon-research: "\ef39";
--icon-resize-expand: "\ef3a";
--icon-resize-window-arrow: "\ef3b";
--icon-retouch-magic-wand: "\ef3c";
--icon-rhombus: "\ef3d";
--icon-right: "\ef3e";
--icon-roller: "\ef3f";
--icon-romance-01: "\ef40";
--icon-romance-02: "\ef41";
--icon-romance-03: "\ef42";
--icon-romance-04: "\ef43";
--icon-romance-05: "\ef44";
--icon-romance-06: "\ef45";
--icon-romance-07: "\ef46";
--icon-romance-08: "\ef47";
--icon-romance-09: "\ef48";
--icon-romance-10: "\ef49";
--icon-romance-11: "\ef4a";
--icon-romance-12: "\ef4b";
--icon-romance-13: "\ef4c";
--icon-romance-14: "\ef4d";
--icon-romance-15: "\ef4e";
--icon-romance-16: "\ef4f";
--icon-romance-17: "\ef50";
--icon-romance-18: "\ef51";
--icon-romance-19: "\ef52";
--icon-romance-20: "\ef53";
--icon-romance-21: "\ef54";
--icon-romance-22: "\ef55";
--icon-romance-23: "\ef56";
--icon-romance-24: "\ef57";
--icon-romance-25: "\ef58";
--icon-romance-26: "\ef59";
--icon-romance-27: "\ef5a";
--icon-romance-28: "\ef5b";
--icon-romance-29: "\ef5c";
--icon-romance-30: "\ef5d";
--icon-romance-31: "\ef5e";
--icon-romance-32: "\ef5f";
--icon-romance-33: "\ef60";
--icon-romance-34: "\ef61";
--icon-romance-35: "\ef62";
--icon-romance-36: "\ef63";
--icon-romance-37: "\ef64";
--icon-romance-38: "\ef65";
--icon-romance-39: "\ef66";
--icon-romance-40: "\ef67";
--icon-rotate-arrow-circle: "\ef68";
--icon-rotate-arrow-dots: "\ef69";
--icon-rotate-arrow: "\ef6a";
--icon-rotate-arrows-refresh: "\ef6b";
--icon-rotate-cirlce-add-plus: "\ef6c";
--icon-rotate-horizontal: "\ef6d";
--icon-round-image: "\ef6e";
--icon-salt-pepper: "\ef6f";
--icon-saucepan: "\ef70";
--icon-scales-legal-protection: "\ef71";
--icon-school-bag: "\ef72";
--icon-scissors-cut: "\ef73";
--icon-search-bug-spy: "\ef74";
--icon-search-graph-traffic-conversion: "\ef75";
--icon-search-graph: "\ef76";
--icon-search-loap-rotate-arrow: "\ef77";
--icon-search-loupe-checkmark: "\ef78";
--icon-search-loupe-circle: "\ef79";
--icon-search-loupe-dots: "\ef7a";
--icon-search-loupe-graph-traffic-conversion: "\ef7b";
--icon-search-loupe-question: "\ef7c";
--icon-search-refresh: "\ef7d";
--icon-search-select: "\ef7e";
--icon-search-select-loupe: "\ef7f";
--icon-search: "\ef80";
--icon-select-focus-disable-off: "\ef81";
--icon-select-link-broken: "\ef82";
--icon-select-object: "\ef83";
--icon-send-message-send-share2: "\ef84";
--icon-send-message-send-share: "\ef85";
--icon-seo: "\ef86";
--icon-servers-databases-01: "\ef87";
--icon-servers-databases-02: "\ef88";
--icon-servers-databases-03: "\ef89";
--icon-servers-databases-04: "\ef8a";
--icon-servers-databases-05: "\ef8b";
--icon-servers-databases-06: "\ef8c";
--icon-servers-databases-07: "\ef8d";
--icon-servers-databases-08: "\ef8e";
--icon-servers-databases-09: "\ef8f";
--icon-servers-databases-10: "\ef90";
--icon-servers-databases-11: "\ef91";
--icon-servers-databases-12: "\ef92";
--icon-servers-databases-13: "\ef93";
--icon-servers-databases-14: "\ef94";
--icon-servers-databases-15: "\ef95";
--icon-servers-databases-16: "\ef96";
--icon-servers-databases-17: "\ef97";
--icon-servers-databases-18: "\ef98";
--icon-servers-databases-19: "\ef99";
--icon-servers-databases-20: "\ef9a";
--icon-service-mark: "\ef9b";
--icon-serving-dome-hand: "\ef9c";
--icon-serving-dome: "\ef9d";
--icon-setting-filter: "\ef9e";
--icon-setting: "\ef9f";
--icon-settings-circle2: "\efa0";
--icon-settings-circle: "\efa1";
--icon-settings-filter: "\efa2";
--icon-settings-gear-square: "\efa3";
--icon-settings-gear: "\efa4";
--icon-settings-select: "\efa5";
--icon-settings-switches-square-volume-knob: "\efa6";
--icon-settings-switches-square: "\efa7";
--icon-settings: "\efa8";
--icon-shapes-objects2: "\efa9";
--icon-shapes-objects3: "\efaa";
--icon-shapes-objects4: "\efab";
--icon-shapes-objects: "\efac";
--icon-shapes2: "\efad";
--icon-shapes3: "\efae";
--icon-shapes4: "\efaf";
--icon-shapes5: "\efb0";
--icon-shapes: "\efb1";
--icon-share-arrow: "\efb2";
--icon-share-signal-circle: "\efb3";
--icon-share-signal-square: "\efb4";
--icon-share-transmit: "\efb5";
--icon-shield-protected-checkmark: "\efb6";
--icon-shield-protected-circle: "\efb7";
--icon-shield-protected-disabled-ross: "\efb8";
--icon-shield-protected-keyhole: "\efb9";
--icon-shield-protected-refresh-loading: "\efba";
--icon-shield-protected-world-internet: "\efbb";
--icon-shield-protected: "\efbc";
--icon-shield-signal-protection: "\efbd";
--icon-shop-basket: "\efbe";
--icon-shop-mobile: "\efbf";
--icon-shopping-cart: "\efc0";
--icon-shopping-ecommerce-02: "\efc1";
--icon-shopping-ecommerce-04: "\efc2";
--icon-shopping-ecommerce-05: "\efc3";
--icon-shopping-ecommerce-06: "\efc4";
--icon-shopping-ecommerce-07: "\efc5";
--icon-shopping-ecommerce-08: "\efc6";
--icon-shopping-ecommerce-09: "\efc7";
--icon-shopping-ecommerce-10: "\efc8";
--icon-shopping-ecommerce-11: "\efc9";
--icon-shopping-ecommerce-12: "\efca";
--icon-shopping-ecommerce-13: "\efcb";
--icon-shopping-ecommerce-14: "\efcc";
--icon-shopping-ecommerce-15: "\efcd";
--icon-shopping-ecommerce-16: "\efce";
--icon-shopping-ecommerce-17: "\efcf";
--icon-shopping-ecommerce-18: "\efd0";
--icon-shopping-ecommerce-19: "\efd1";
--icon-shopping-ecommerce-20: "\efd2";
--icon-shopping-ecommerce-21: "\efd3";
--icon-shopping-ecommerce-22: "\efd4";
--icon-shopping-ecommerce-23: "\efd5";
--icon-shopping-ecommerce-24: "\efd6";
--icon-shopping-ecommerce-25: "\efd7";
--icon-shopping-ecommerce-26: "\efd8";
--icon-shopping-ecommerce-27: "\efd9";
--icon-shopping-ecommerce-28: "\efda";
--icon-shopping-ecommerce-29: "\efdb";
--icon-shopping-ecommerce-30: "\efdc";
--icon-shopping-ecommerce-31: "\efdd";
--icon-shopping-ecommerce-32: "\efde";
--icon-shopping-ecommerce-33: "\efdf";
--icon-shopping-ecommerce-34: "\efe0";
--icon-shopping-ecommerce-35: "\efe1";
--icon-shopping-ecommerce-36: "\efe2";
--icon-shopping-ecommerce-37: "\efe3";
--icon-shopping-ecommerce-38: "\efe4";
--icon-shopping-ecommerce-39: "\efe5";
--icon-shopping-ecommerce-40: "\efe6";
--icon-signal2: "\efe7";
--icon-signal: "\efe8";
--icon-sim-change-update: "\efe9";
--icon-sim-change: "\efea";
--icon-sim-refresh-update: "\efeb";
--icon-sim: "\efec";
--icon-single-user: "\efed";
--icon-single-user-alert: "\efee";
--icon-single-user-back: "\efef";
--icon-single-user-check: "\eff0";
--icon-single-user-clock: "\eff1";
--icon-single-user-discount: "\eff2";
--icon-single-user-download: "\eff3";
--icon-single-user-edit: "\eff4";
--icon-single-user-enter: "\eff5";
--icon-single-user-favorite: "\eff6";
--icon-single-user-info: "\eff7";
--icon-single-user-lightning: "\eff8";
--icon-single-user-loading: "\eff9";
--icon-single-user-lock: "\effa";
--icon-single-user-minus: "\effb";
--icon-single-user-one: "\effc";
--icon-single-user-remove: "\effd";
--icon-single-user-search: "\effe";
--icon-single-user-setting: "\efff";
--icon-single-user-upload: "\f000";
--icon-siri: "\f001";
--icon-slack: "\f002";
--icon-sleep-mode: "\f003";
--icon-sleep-snooze-zzz: "\f004";
--icon-slides-windows2: "\f005";
--icon-slides-windows: "\f006";
--icon-smileys-01: "\f007";
--icon-smileys-02: "\f008";
--icon-smileys-03: "\f009";
--icon-smileys-04: "\f00a";
--icon-smileys-05: "\f00b";
--icon-smileys-06: "\f00c";
--icon-smileys-07: "\f00d";
--icon-smileys-08: "\f00e";
--icon-smileys-09: "\f00f";
--icon-smileys-10: "\f010";
--icon-smileys-11: "\f011";
--icon-smileys-12: "\f012";
--icon-smileys-13: "\f013";
--icon-smileys-14: "\f014";
--icon-smileys-15: "\f015";
--icon-smileys-16: "\f016";
--icon-smileys-17: "\f017";
--icon-smileys-18: "\f018";
--icon-smileys-19: "\f019";
--icon-smileys-20: "\f01a";
--icon-smileys: "\f01b";
--icon-snapchat-circle: "\f01c";
--icon-social-media-01: "\f01d";
--icon-social-media-02: "\f01e";
--icon-social-media-03: "\f01f";
--icon-social-media-04: "\f020";
--icon-social-media-05: "\f021";
--icon-social-media-06: "\f022";
--icon-social-media-07: "\f023";
--icon-social-media-08: "\f024";
--icon-social-media-09: "\f025";
--icon-social-media-10: "\f026";
--icon-social-media-11: "\f027";
--icon-social-media-12: "\f028";
--icon-social-media-13: "\f029";
--icon-social-media-14: "\f02a";
--icon-social-media-15: "\f02b";
--icon-social-media-16: "\f02c";
--icon-social-media-17: "\f02d";
--icon-social-media-18: "\f02e";
--icon-social-media-19: "\f02f";
--icon-social-media-20: "\f030";
--icon-social-media-21: "\f031";
--icon-social-media-22: "\f032";
--icon-social-media-23: "\f033";
--icon-social-media-24: "\f034";
--icon-social-media-25: "\f035";
--icon-social-media-26: "\f036";
--icon-social-media-27: "\f037";
--icon-social-media-28: "\f038";
--icon-social-media-29: "\f039";
--icon-social-media-30: "\f03a";
--icon-social-media-31: "\f03b";
--icon-social-media-32: "\f03c";
--icon-social-media-33: "\f03d";
--icon-social-media-34: "\f03e";
--icon-social-media-35: "\f03f";
--icon-social-media-36: "\f040";
--icon-social-media-37: "\f041";
--icon-social-media-38: "\f042";
--icon-social-media-39: "\f043";
--icon-social-media-40: "\f044";
--icon-social-medias-rewards-rating-01: "\f045";
--icon-social-medias-rewards-rating-02: "\f046";
--icon-social-medias-rewards-rating-04: "\f047";
--icon-social-medias-rewards-rating-05: "\f048";
--icon-social-medias-rewards-rating-06: "\f049";
--icon-social-medias-rewards-rating-07: "\f04a";
--icon-social-medias-rewards-rating-08: "\f04b";
--icon-social-medias-rewards-rating-09: "\f04c";
--icon-social-medias-rewards-rating-10: "\f04d";
--icon-social-medias-rewards-rating-11: "\f04e";
--icon-social-medias-rewards-rating-12: "\f04f";
--icon-social-medias-rewards-rating-13: "\f050";
--icon-social-medias-rewards-rating-14: "\f051";
--icon-social-medias-rewards-rating-15: "\f052";
--icon-social-medias-rewards-rating-16: "\f053";
--icon-social-medias-rewards-rating-17: "\f054";
--icon-social-medias-rewards-rating-18: "\f055";
--icon-social-medias-rewards-rating-19: "\f056";
--icon-social-medias-rewards-rating-20: "\f057";
--icon-spatula: "\f058";
--icon-spectrum: "\f059";
--icon-sphere: "\f05a";
--icon-sport-01: "\f05b";
--icon-sport-02: "\f05c";
--icon-sport-03: "\f05d";
--icon-sport-04: "\f05e";
--icon-sport-05: "\f05f";
--icon-sport-06: "\f060";
--icon-sport-07: "\f061";
--icon-sport-08: "\f062";
--icon-sport-09: "\f063";
--icon-sport-10: "\f064";
--icon-sport-11: "\f065";
--icon-sport-12: "\f066";
--icon-sport-13: "\f067";
--icon-sport-14: "\f068";
--icon-sport-15: "\f069";
--icon-sport-16: "\f06a";
--icon-sport-17: "\f06b";
--icon-sport-18: "\f06c";
--icon-sport-19: "\f06d";
--icon-sport-20: "\f06e";
--icon-square: "\f06f";
--icon-stamp-circle: "\f070";
--icon-star-gear-circle: "\f071";
--icon-star-sign: "\f072";
--icon-statistics-analytics-arrow-up-circle: "\f073";
--icon-statistics-analytics-arrow-up-square: "\f074";
--icon-statistics-analytics-square: "\f075";
--icon-stiker-smile-edit: "\f076";
--icon-stop-sign-circle: "\f077";
--icon-stop-sign-hexagon: "\f078";
--icon-store-basket: "\f079";
--icon-store-music-library: "\f07a";
--icon-store-square: "\f07b";
--icon-substract-group-copy-add: "\f07c";
--icon-substract-group-copy2: "\f07d";
--icon-substract-group-copy3: "\f07e";
--icon-substract-group-copy: "\f07f";
--icon-substract-group: "\f080";
--icon-suitcase-financial-portfolio: "\f081";
--icon-support-24: "\f082";
--icon-synchronize-triangle-arrows-recirculation: "\f083";
--icon-synchronize: "\f084";
--icon-tacos: "\f085";
--icon-target-remove-delite: "\f086";
--icon-task-list-document-text: "\f087";
--icon-tea-bag: "\f088";
--icon-telescope: "\f089";
--icon-terminal: "\f08a";
--icon-text-a-button-square: "\f08b";
--icon-thumbs-up-appreciate-applaud: "\f08c";
--icon-thumbs-up-like-unlike: "\f08d";
--icon-thumbs-up-like: "\f08e";
--icon-thumbs-up-shop: "\f08f";
--icon-thunder-lightning-circle: "\f090";
--icon-ticket-group-circle: "\f091";
--icon-timer-0-seconds: "\f092";
--icon-timer-5-seconds: "\f093";
--icon-timer-10-seconds: "\f094";
--icon-tools-settings: "\f095";
--icon-trademark-circle: "\f096";
--icon-trademark: "\f097";
--icon-transfer-card-money: "\f098";
--icon-transfer-card-send: "\f099";
--icon-trapezoid: "\f09a";
--icon-trash-delete-bin-circle: "\f09b";
--icon-trash-delete-bin: "\f09c";
--icon-trash-delete-recicle: "\f09d";
--icon-trash-delete-remove: "\f09e";
--icon-travel-01: "\f09f";
--icon-travel-02: "\f0a0";
--icon-travel-03: "\f0a1";
--icon-travel-04: "\f0a2";
--icon-travel-05: "\f0a3";
--icon-travel-06: "\f0a4";
--icon-travel-07: "\f0a5";
--icon-travel-08: "\f0a6";
--icon-travel-09: "\f0a7";
--icon-travel-10: "\f0a8";
--icon-travel-11: "\f0a9";
--icon-travel-12: "\f0aa";
--icon-travel-13: "\f0ab";
--icon-travel-14: "\f0ac";
--icon-travel-15: "\f0ad";
--icon-travel-16: "\f0ae";
--icon-travel-17: "\f0af";
--icon-travel-18: "\f0b0";
--icon-travel-19: "\f0b1";
--icon-travel-20: "\f0b2";
--icon-triangle-drop: "\f0b3";
--icon-triangle: "\f0b4";
--icon-tv-circle-monitor: "\f0b5";
--icon-twitter-circle: "\f0b6";
--icon-twitter-square: "\f0b7";
--icon-unlimited-repeat-subscription-circle: "\f0b8";
--icon-user-chat-messages-bubble: "\f0b9";
--icon-user-circle: "\f0ba";
--icon-user-profile-edit: "\f0bb";
--icon-user-profile-square: "\f0bc";
--icon-user-profile2: "\f0bd";
--icon-user-profile3: "\f0be";
--icon-user-profile4: "\f0bf";
--icon-user-profile5: "\f0c0";
--icon-user-profile6: "\f0c1";
--icon-user-profile7: "\f0c2";
--icon-user-profile8: "\f0c3";
--icon-user-profile9: "\f0c4";
--icon-user-profile10: "\f0c5";
--icon-user-profile11: "\f0c6";
--icon-user-profile12: "\f0c7";
--icon-user-profile13: "\f0c8";
--icon-user-profile14: "\f0c9";
--icon-user-profile: "\f0ca";
--icon-user-share: "\f0cb";
--icon-user-single-select: "\f0cc";
--icon-users-01: "\f0cd";
--icon-users-02: "\f0ce";
--icon-users-03: "\f0cf";
--icon-users-04: "\f0d0";
--icon-users-05: "\f0d1";
--icon-users-06: "\f0d2";
--icon-users-07: "\f0d3";
--icon-users-08: "\f0d4";
--icon-users-09: "\f0d5";
--icon-users-10: "\f0d6";
--icon-users-11: "\f0d7";
--icon-users-12: "\f0d8";
--icon-users-13: "\f0d9";
--icon-users-14: "\f0da";
--icon-users-15: "\f0db";
--icon-users-16: "\f0dc";
--icon-users-17: "\f0dd";
--icon-users-18: "\f0de";
--icon-users-19: "\f0df";
--icon-users-20: "\f0e0";
--icon-video-movies-01: "\f0e1";
--icon-video-movies-02: "\f0e2";
--icon-video-movies-03: "\f0e3";
--icon-video-movies-04: "\f0e4";
--icon-video-movies-05: "\f0e5";
--icon-video-movies-06: "\f0e6";
--icon-video-movies-07: "\f0e7";
--icon-video-movies-08: "\f0e8";
--icon-video-movies-09: "\f0e9";
--icon-video-movies-10: "\f0ea";
--icon-video-movies-11: "\f0eb";
--icon-video-movies-12: "\f0ec";
--icon-video-movies-13: "\f0ed";
--icon-video-movies-14: "\f0ee";
--icon-video-movies-15: "\f0ef";
--icon-video-movies-16: "\f0f0";
--icon-video-movies-17: "\f0f1";
--icon-video-movies-18: "\f0f2";
--icon-video-movies-19: "\f0f3";
--icon-video-movies-20: "\f0f4";
--icon-video-movies: "\f0f5";
--icon-vk-vkontakte-square: "\f0f6";
--icon-vk-vkontakte: "\f0f7";
--icon-volume-audio-music-volume-circle: "\f0f8";
--icon-volume-knob: "\f0f9";
--icon-vpn-stiker: "\f0fa";
--icon-warning-refresh-square: "\f0fb";
--icon-warning-retry-alert: "\f0fc";
--icon-watch-clock-time: "\f0fd";
--icon-weather-01: "\f0fe";
--icon-weather-02: "\f0ff";
--icon-weather-03: "\f100";
--icon-weather-04: "\f101";
--icon-weather-05: "\f102";
--icon-weather-06: "\f103";
--icon-weather-07: "\f104";
--icon-weather-08: "\f105";
--icon-weather-09: "\f106";
--icon-weather-10: "\f107";
--icon-weather-11: "\f108";
--icon-weather-12: "\f109";
--icon-weather-13: "\f10a";
--icon-weather-14: "\f10b";
--icon-weather-15: "\f10c";
--icon-weather-16: "\f10d";
--icon-weather-17: "\f10e";
--icon-weather-18: "\f10f";
--icon-weather-19: "\f110";
--icon-weather-20: "\f111";
--icon-whisk: "\f112";
--icon-wifi-alarm: "\f113";
--icon-wifi-circle: "\f114";
--icon-wifi-full: "\f115";
--icon-wifi-off-turn-off: "\f116";
--icon-wifi-portable-off: "\f117";
--icon-wifi-question: "\f118";
--icon-wifi-refresh-circle: "\f119";
--icon-wifi-spot-square: "\f11a";
--icon-wifi-warning: "\f11b";
--icon-wifi: "\f11c";
--icon-windows-button: "\f11d";
--icon-wine-opener: "\f11e";
--icon-wireless-payments-credit-card: "\f11f";
--icon-wireless-payments-smartphone: "\f120";
--icon-world-circle: "\f121";
--icon-world-transaction-transfer: "\f122";
--icon-youtube-circle: "\f123";
--icon-youtube-square: "\f124";
--icon-add: "\e91e";
--icon-scales: "\e91c";
--icon-chart: "\e91d";
--icon-fedora: "\e901";
--icon-ubuntu: "\e902";
--icon-windows: "\e903";
--icon-earth: "\e906";
--icon-reload: "\e900";
--icon-linux: "\e904";
--icon-files: "\e905";
--icon-docker: "\e907";
--icon-cog: "\e908";
--icon-arrow: "\e909";
--icon-cog-ring: "\e90a";
--icon-cross: "\e90b";
--icon-external: "\e90c";
--icon-heart: "\e90e";
--icon-info: "\e90f";
--icon-linkedin: "\e910";
--icon-mic: "\e911";
--icon-play: "\e912";
--icon-podcast: "\e913";
--icon-reddit: "\e914";
--icon-rss: "\e915";
--icon-shield: "\e916";
--icon-tick: "\e917";
--icon-twitter: "\e918";
--icon-users: "\e919";
--icon-warning: "\e91a";
--icon-mac: "\e91b";
--icon-github: "\e90d";
--icon-discord: "\f125";
--icon-youtube: "\f126";
}</code></pre>
</li>
</ul>
</div>
</section><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="input">Input</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="list space-y-2">
<h1 class="mb-4">Class</h1>
<span class="block text-safing-gray-500">btn</span>
<span class="block text-safing-gray-500">btn-secondary</span>
<span class="block text-safing-gray-500">btn-secondary</span>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Default</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Default-Input">preview</a></li>
<li><a href="#html-Default-Input">html</a></li>
<li><a href="#scss-Default-Input">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Default-Input" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<input class="input-rounded w-full" type="email" name="email" required="" placeholder="email">
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Default-Input">
<pre><code style="min-height: 200px;" class="language-html">&lt;input class="input-rounded w-full" type="email" name="email" required="" placeholder="email"&gt;</code></pre>
</li>
<li id="scss-Default-Input">
<pre><code style="min-height: 200px;" class="language-scss">.input {
@apply bg-gray-200;
@apply appearance-none;
@apply text-black;
@apply focus:outline-none;
@apply placeholder-red-600;
}
.input-rounded {
@apply bg-gray-400;
@apply rounded-full;
@apply placeholder-gray-200;
@apply text-white;
@apply px-6;
@apply py-2;
}
.input-rounded-primary{
@apply input-rounded;
@apply bg-safing-gray-800;
@apply placeholder-gray-400;
@apply text-white;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Primary</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Primary-Input">preview</a></li>
<li><a href="#html-Primary-Input">html</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Primary-Input" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<input class="input-rounded-primary w-full" type="email" name="email" required="" placeholder="email">
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Primary-Input">
<pre><code style="min-height: 200px;" class="language-html">&lt;input class="input-rounded-primary w-full" type="email" name="email" required="" placeholder="email"&gt;</code></pre>
</li>
</ul>
</div>
</section><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="link">Link</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="list space-y-2">
<h1 class="mb-4">Class</h1>
<span class="block text-safing-gray-500">btn</span>
<span class="block text-safing-gray-500">btn-secondary</span>
<span class="block text-safing-gray-500">btn-secondary</span>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Default</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Default-Link">preview</a></li>
<li><a href="#html-Default-Link">html</a></li>
<li><a href="#scss-Default-Link">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Default-Link" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<a class="link">Take back your freedom</a>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Default-Link">
<pre><code style="min-height: 200px;" class="language-html">&lt;a class="link"&gt;Take back your freedom&lt;/a&gt;</code></pre>
</li>
<li id="scss-Default-Link">
<pre><code style="min-height: 200px;" class="language-scss">.link {
@apply text-gray-500;
@apply text-left;
@apply font-medium;
white-space : break-spaces;
@apply cursor-pointer;
@apply hover-opacity-in;
}
.link i {
/* tailwind "sub" not supported */
vertical-align: sub;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Primary-External</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Primary-External-Link">preview</a></li>
<li><a href="#html-Primary-External-Link">html</a></li>
<li><a href="#scss-Primary-External-Link">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Primary-External-Link" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<a class="link-primary-external">Take back your freedom</a>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Primary-External-Link">
<pre><code style="min-height: 200px;" class="language-html">&lt;a class="link-primary-external"&gt;Take back your freedom&lt;/a&gt;</code></pre>
</li>
<li id="scss-Primary-External-Link">
<pre><code style="min-height: 200px;" class="language-scss">.link-primary-external {
@apply link-primary;
}
.link-primary-external::after {
@apply icon;
@apply inline-block;
@apply font-bold;
content: var(--icon-external);
@apply text-base;
transform: rotate(30deg) translateY(2px) translateX(1px) scale(0.75);
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Primary</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Primary-Link">preview</a></li>
<li><a href="#html-Primary-Link">html</a></li>
<li><a href="#scss-Primary-Link">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Primary-Link" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<a class="link-primary">Take back your freedom</a>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Primary-Link">
<pre><code style="min-height: 200px;" class="language-html">&lt;a class="link-primary"&gt;Take back your freedom&lt;/a&gt;</code></pre>
</li>
<li id="scss-Primary-Link">
<pre><code style="min-height: 200px;" class="language-scss">.link-primary {
@apply link;
@apply text-safing-blue-500;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Secondary</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Secondary-Link">preview</a></li>
<li><a href="#html-Secondary-Link">html</a></li>
<li><a href="#scss-Secondary-Link">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Secondary-Link" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<a class="link-secondary">Take back your freedom</a>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Secondary-Link">
<pre><code style="min-height: 200px;" class="language-html">&lt;a class="link-secondary"&gt;Take back your freedom&lt;/a&gt;</code></pre>
</li>
<li id="scss-Secondary-Link">
<pre><code style="min-height: 200px;" class="language-scss">.link-secondary {
@apply link;
@apply text-black;
/* @apply hover: opacity-60; */
}</code></pre>
</li>
</ul>
</div>
</section><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="profile">Profile</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="list space-y-2">
<h1 class="mb-4">Class</h1>
<span class="block text-safing-gray-500">btn</span>
<span class="block text-safing-gray-500">btn-secondary</span>
<span class="block text-safing-gray-500">btn-secondary</span>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Default</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Default-Profile">preview</a></li>
<li><a href="#html-Default-Profile">html</a></li>
<li><a href="#scss-Default-Profile">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Default-Profile" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div class="circular-profile" tooltip="David">
<img src="https://safing.io/assets/img/profiles/david.png">
</div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Default-Profile">
<pre><code style="min-height: 200px;" class="language-html">&lt;div class="circular-profile" tooltip="David"&gt;
&lt;img src="https://safing.io/assets/img/profiles/david.png"&gt;
&lt;/div&gt;</code></pre>
</li>
<li id="scss-Default-Profile">
<pre><code style="min-height: 200px;" class="language-scss">.circular-profile {
@apply flex-shrink-0;
@apply -mt-1;
@apply w-max;
}
.circular-profile img {
@apply inline-block;
@apply h-6;
@apply w-6;
@apply rounded-full;
@apply text-white;
@apply border-2;
@apply border-transparent;
}
.circular-profile:hover img {
@apply transform;
@apply hover:scale-110;
@apply transition;
@apply duration-150;
@apply ease-in-out;
@apply shadow-2xl;
}</code></pre>
</li>
</ul>
</div>
</section><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="spacer">Spacer</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="list space-y-2">
<h1 class="mb-4">Class</h1>
<span class="block text-safing-gray-500">btn</span>
<span class="block text-safing-gray-500">btn-secondary</span>
<span class="block text-safing-gray-500">btn-secondary</span>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Horizontal</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Horizontal-Spacer">preview</a></li>
<li><a href="#html-Horizontal-Spacer">html</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Horizontal-Spacer" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div class="horizontal-line"></div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Horizontal-Spacer">
<pre><code style="min-height: 200px;" class="language-html">&lt;div class="horizontal-line"&gt;&lt;/div&gt;</code></pre>
</li>
</ul>
</div>
</section><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="tag">Tag</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="list space-y-2">
<h1 class="mb-4">Class</h1>
<span class="block text-safing-gray-500">btn</span>
<span class="block text-safing-gray-500">btn-secondary</span>
<span class="block text-safing-gray-500">btn-secondary</span>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Backoffice</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Backoffice-Tag">preview</a></li>
<li><a href="#html-Backoffice-Tag">html</a></li>
<li><a href="#scss-Backoffice-Tag">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Backoffice-Tag" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<span class="tag-backoffice">
Community
</span>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Backoffice-Tag">
<pre><code style="min-height: 200px;" class="language-html">&lt;span class="tag-backoffice"&gt;
Community
&lt;/span&gt;</code></pre>
</li>
<li id="scss-Backoffice-Tag">
<pre><code style="min-height: 200px;" class="language-scss">.tag-backoffice {
@apply tag;
@apply bg-gray-800;
@apply text-gray-100;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Community</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Community-Tag">preview</a></li>
<li><a href="#html-Community-Tag">html</a></li>
<li><a href="#scss-Community-Tag">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Community-Tag" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<span class="tag-community">
Community
</span>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Community-Tag">
<pre><code style="min-height: 200px;" class="language-html">&lt;span class="tag-community"&gt;
Community
&lt;/span&gt;</code></pre>
</li>
<li id="scss-Community-Tag">
<pre><code style="min-height: 200px;" class="language-scss">.tag-community {
@apply tag;
@apply bg-purple-800;
@apply text-purple-100;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Default</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Default-Tag">preview</a></li>
<li><a href="#html-Default-Tag">html</a></li>
<li><a href="#scss-Default-Tag">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Default-Tag" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<span class="tag">
Default
</span>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Default-Tag">
<pre><code style="min-height: 200px;" class="language-html">&lt;span class="tag"&gt;
Default
&lt;/span&gt;</code></pre>
</li>
<li id="scss-Default-Tag">
<pre><code style="min-height: 200px;" class="language-scss">.tag {
@apply inline-flex;
@apply items-center;
@apply px-3;
@apply py-1;
@apply rounded-full;
@apply text-sm;
@apply font-medium;
@apply leading-5;
@apply mr-2;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Marketing</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Marketing-Tag">preview</a></li>
<li><a href="#html-Marketing-Tag">html</a></li>
<li><a href="#scss-Marketing-Tag">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Marketing-Tag" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<span class="tag-marketing">
Marketing
</span>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Marketing-Tag">
<pre><code style="min-height: 200px;" class="language-html">&lt;span class="tag-marketing"&gt;
Marketing
&lt;/span&gt;</code></pre>
</li>
<li id="scss-Marketing-Tag">
<pre><code style="min-height: 200px;" class="language-scss">.tag-marketing {
@apply tag;
@apply bg-yellow-800;
@apply text-yellow-100;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Portmaster</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Portmaster-Tag">preview</a></li>
<li><a href="#html-Portmaster-Tag">html</a></li>
<li><a href="#scss-Portmaster-Tag">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Portmaster-Tag" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<span class="tag-portmaster">
Portmaster
</span>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Portmaster-Tag">
<pre><code style="min-height: 200px;" class="language-html">&lt;span class="tag-portmaster"&gt;
Portmaster
&lt;/span&gt;</code></pre>
</li>
<li id="scss-Portmaster-Tag">
<pre><code style="min-height: 200px;" class="language-scss">.tag-portmaster {
@apply tag;
@apply bg-blue-800;
@apply text-blue-100;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Spn</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Spn-Tag">preview</a></li>
<li><a href="#html-Spn-Tag">html</a></li>
<li><a href="#scss-Spn-Tag">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Spn-Tag" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<span class="tag-spn">
SPN
</span>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Spn-Tag">
<pre><code style="min-height: 200px;" class="language-html">&lt;span class="tag-spn"&gt;
SPN
&lt;/span&gt;</code></pre>
</li>
<li id="scss-Spn-Tag">
<pre><code style="min-height: 200px;" class="language-scss">.tag-spn {
@apply tag;
@apply bg-green-800;
@apply text-green-100;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Website</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Website-Tag">preview</a></li>
<li><a href="#html-Website-Tag">html</a></li>
<li><a href="#scss-Website-Tag">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Website-Tag" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<span class="tag-website">
Website
</span>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Website-Tag">
<pre><code style="min-height: 200px;" class="language-html">&lt;span class="tag-website"&gt;
Website
&lt;/span&gt;</code></pre>
</li>
<li id="scss-Website-Tag">
<pre><code style="min-height: 200px;" class="language-scss">.tag-website {
@apply tag;
@apply bg-pink-900;
@apply text-pink-200;
}</code></pre>
</li>
</ul>
</div>
</section><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="toggle">Toggle</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Default</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Default-Toggle">preview</a></li>
<li><a href="#html-Default-Toggle">html</a></li>
<li><a href="#scss-Default-Toggle">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Default-Toggle" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div class="element-x-center-max space-y-2">
<input class="toggle block" type="checkbox" checked>
<input class="toggle block" type="checkbox">
</div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Default-Toggle">
<pre><code style="min-height: 200px;" class="language-html">&lt;div class="element-x-center-max space-y-2"&gt;
&lt;input class="toggle block" type="checkbox" checked&gt;
&lt;input class="toggle block" type="checkbox"&gt;
&lt;/div&gt;</code></pre>
</li>
<li id="scss-Default-Toggle">
<pre><code style="min-height: 200px;" class="language-scss">.toggle {
@apply appearance-none;
@apply cursor-pointer;
height: 25px;
min-width: 45px;
border-radius: 16px;
@apply border-2;
@apply border-solid;
@apply border-safing-gray-600;
@apply inline-block;
@apply relative;
@apply m-0;
@apply bg-white;
transition: all 0.2s ease;
}
.toggle:focus {
@apply outline-none;
}
.toggle:after {
content: "";
@apply absolute;
top: 3px;
left: 3px;
width: 15px;
height: 15px;
border-radius: 50%;
@apply bg-safing-gray-600;
transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);
}
.toggle:checked {
@apply bg-safing-blue-600;
@apply border-safing-blue-600;
}
.toggle:checked:after {
@apply bg-white;
transform: translatex(20px);
}
.toggle.darkmode {
@apply bg-safing-gray-800;
}
.toggle:checked.darkmode {
@apply bg-safing-blue-600;
@apply border-safing-blue-600;
}</code></pre>
</li>
</ul>
</div>
</section><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="tooltip">Tooltip</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="list space-y-2">
<h1 class="mb-4">Class</h1>
<span class="block text-safing-gray-500">btn</span>
<span class="block text-safing-gray-500">btn-secondary</span>
<span class="block text-safing-gray-500">btn-secondary</span>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Default</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Default-Tooltip">preview</a></li>
<li><a href="#html-Default-Tooltip">html</a></li>
<li><a href="#scss-Default-Tooltip">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Default-Tooltip" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div tooltip="Cool Tooltip!" class="bg-white">
hover over me!
</div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Default-Tooltip">
<pre><code style="min-height: 200px;" class="language-html">&lt;div tooltip="Cool Tooltip!" class="bg-white"&gt;
hover over me!
&lt;/div&gt;</code></pre>
</li>
<li id="scss-Default-Tooltip">
<pre><code style="min-height: 200px;" class="language-scss">[tooltip] {
@apply relative;
}
[tooltip]:hover {
@apply cursor-help;
}
[tooltip]::before,
[tooltip]::after {
@apply hidden;
@apply text-sm;
@apply left-1/2;
@apply opacity-0;
@apply pointer-events-none;
@apply absolute;
@apply normal-case;
transform: translate(-50%, -0.5em);
@apply select-none;
}
[tooltip]::after {
background: #2e2e2e;
border-radius: 5px;
padding: 20px;
width: max-content;
height: max-content;
box-sizing: border-box;
max-width: 300px;
bottom: calc(100% + 5px);
box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
@apply text-white;
content: attr(tooltip);
font-family: Helvetica, sans-serif;
z-index: 1000;
}
[tooltip='']::before,
[tooltip='']::after {
@apply hidden !important;
}
[tooltip]:hover::before,
[tooltip]:hover::after {
animation: tooltips-vert 300ms ease-out forwards;
@apply block;
}
@keyframes tooltips-vert {
to {
opacity: 1;
transform: translate(-50%, 0);
}
}</code></pre>
</li>
</ul>
</div>
</section><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="transition">Transition</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="list space-y-2">
<h1 class="mb-4">Class</h1>
<span class="block text-safing-gray-500">btn</span>
<span class="block text-safing-gray-500">btn-secondary</span>
<span class="block text-safing-gray-500">btn-secondary</span>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Hover-Opacity</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Hover-Opacity-Transition">preview</a></li>
<li><a href="#html-Hover-Opacity-Transition">html</a></li>
<li><a href="#scss-Hover-Opacity-Transition">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Hover-Opacity-Transition" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div class="element-x-center-max space-y-5">
<div class="alert max-w-md hover-opacity-in">
<i class="icon-mic text-lg"></i>
<span>hover-opacity-in</span>
</div>
<div class="alert max-w-md hover-opacity-out">
<i class="icon-mic text-lg"></i>
<span>hover-opacity-out</span>
</div>
</div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Hover-Opacity-Transition">
<pre><code style="min-height: 200px;" class="language-html">&lt;div class="element-x-center-max space-y-5"&gt;
&lt;div class="alert max-w-md hover-opacity-in"&gt;
&lt;i class="icon-mic text-lg"&gt;&lt;/i&gt;
&lt;span&gt;hover-opacity-in&lt;/span&gt;
&lt;/div&gt;
&lt;div class="alert max-w-md hover-opacity-out"&gt;
&lt;i class="icon-mic text-lg"&gt;&lt;/i&gt;
&lt;span&gt;hover-opacity-out&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</li>
<li id="scss-Hover-Opacity-Transition">
<pre><code style="min-height: 200px;" class="language-scss">.hover-opacity-in {
@apply hover:opacity-50;
@apply transition;
@apply duration-150;
@apply ease-in-out;
}
.hover-opacity-out {
@apply opacity-50;
@apply hover:opacity-100;
@apply transition;
@apply duration-150;
@apply ease-in-out;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Hover-Scale</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Hover-Scale-Transition">preview</a></li>
<li><a href="#html-Hover-Scale-Transition">html</a></li>
<li><a href="#scss-Hover-Scale-Transition">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Hover-Scale-Transition" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div class="element-x-center-max space-y-5">
<div class="alert max-w-md hover-scale-in">
<i class="icon-mic text-lg"></i>
<span>hover-scale-in</span>
</div>
<div class="alert max-w-md hover-scale-out">
<i class="icon-mic text-lg"></i>
<span>hover-scale-out</span>
</div>
</div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Hover-Scale-Transition">
<pre><code style="min-height: 200px;" class="language-html">&lt;div class="element-x-center-max space-y-5"&gt;
&lt;div class="alert max-w-md hover-scale-in"&gt;
&lt;i class="icon-mic text-lg"&gt;&lt;/i&gt;
&lt;span&gt;hover-scale-in&lt;/span&gt;
&lt;/div&gt;
&lt;div class="alert max-w-md hover-scale-out"&gt;
&lt;i class="icon-mic text-lg"&gt;&lt;/i&gt;
&lt;span&gt;hover-scale-out&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</li>
<li id="scss-Hover-Scale-Transition">
<pre><code style="min-height: 200px;" class="language-scss">.hover-scale-in {
@apply transform;
@apply hover:scale-95;
@apply transition;
@apply duration-150;
@apply ease-in-out;
}
.hover-scale-out {
@apply transform;
@apply hover:scale-105;
@apply transition;
@apply duration-150;
@apply ease-in-out;
}</code></pre>
</li>
</ul>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Pulse-Opacity</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Pulse-Opacity-Transition">preview</a></li>
<li><a href="#html-Pulse-Opacity-Transition">html</a></li>
<li><a href="#scss-Pulse-Opacity-Transition">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Pulse-Opacity-Transition" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div class="element-x-center-max space-y-5">
<button class="btn-primary pulse-opacity-out-in">pulse-opacity-out-in</button>
<button class="btn-primary pulse-opacity-out-in">pulse-opacity-in-out</button>
<div class="flex items-center space-x-2">
<span class="dot pulse-opacity-out-in"></span>
<a href="#" class="link-secondary">pulse-opacity-out-in</a>
</div>
<div class="flex items-center space-x-2">
<span class="dot pulse-opacity-out-in"></span>
<a href="#" class="link-secondary">pulse-opacity-in-out</a>
</div>
<a href="#" class="block link-primary-external pulse-opacity-out-in">pulse-opacity-out-in</a>
<a href="#" class="block link-primary-external pulse-opacity-out-in">pulse-opacity-in-out</a>
</div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Pulse-Opacity-Transition">
<pre><code style="min-height: 200px;" class="language-html">&lt;div class="element-x-center-max space-y-5"&gt;
&lt;button class="btn-primary pulse-opacity-out-in"&gt;pulse-opacity-out-in&lt;/button&gt;
&lt;button class="btn-primary pulse-opacity-out-in"&gt;pulse-opacity-in-out&lt;/button&gt;
&lt;div class="flex items-center space-x-2"&gt;
&lt;span class="dot pulse-opacity-out-in"&gt;&lt;/span&gt;
&lt;a href="#" class="link-secondary"&gt;pulse-opacity-out-in&lt;/a&gt;
&lt;/div&gt;
&lt;div class="flex items-center space-x-2"&gt;
&lt;span class="dot pulse-opacity-out-in"&gt;&lt;/span&gt;
&lt;a href="#" class="link-secondary"&gt;pulse-opacity-in-out&lt;/a&gt;
&lt;/div&gt;
&lt;a href="#" class="block link-primary-external pulse-opacity-out-in"&gt;pulse-opacity-out-in&lt;/a&gt;
&lt;a href="#" class="block link-primary-external pulse-opacity-out-in"&gt;pulse-opacity-in-out&lt;/a&gt;
&lt;/div&gt;</code></pre>
</li>
<li id="scss-Pulse-Opacity-Transition">
<pre><code style="min-height: 200px;" class="language-scss">.pulse-opacity-out-in {
animation: pulse-opacity 2s infinite;
}
.pulse-opacity-in-out {
animation: pulse-opacity 2s infinite reverse;
}
@keyframes pulse-opacity {
0% {
opacity: 1;
}
70% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}</code></pre>
</li>
</ul>
</div>
</section>
<div class="space-y-2">
<h1 class="block text-black text-xl" id="prebuilt">Prebuilt</h1>
<span class="text-safing-gray-500">This is the compoents section</span>
</div><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="col-container">Col-Container</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Default</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Default-Col-Container">preview</a></li>
<li><a href="#html-Default-Col-Container">html</a></li>
<li><a href="#scss-Default-Col-Container">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Default-Col-Container" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div class="download-container">
<h2 class="download-container-title">
Lazy Responsive Column!
</h2>
<div class="col-container">
<a class="btn-secondary" href="#"><i class="icon-twitter text-xs mr-2"></i>Windows 10</a>
<a class="btn-secondary" href="#"><i class="icon-twitter text-xs mr-2"></i>Ubuntu (Latest)</a>
<a disabled class="btn " href="#"><i class="icon-twitter text-xs mr-2"></i>Macos (Not supported)</a>
</div>
<div class="col-container-center">
<a class="btn-secondary" href="#"><i class="icon-twitter text-xs mr-2"></i>Windows 10</a>
<a class="btn-secondary" href="#"><i class="icon-twitter text-xs mr-2"></i>Ubuntu (Latest)</a>
<a disabled class="btn " href="#"><i class="icon-twitter text-xs mr-2"></i>Macos (Not supported)</a>
</div>
</div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Default-Col-Container">
<pre><code style="min-height: 200px;" class="language-html">&lt;div class="download-container"&gt;
&lt;h2 class="download-container-title"&gt;
Lazy Responsive Column!
&lt;/h2&gt;
&lt;div class="col-container"&gt;
&lt;a class="btn-secondary" href="#"&gt;&lt;i class="icon-twitter text-xs mr-2"&gt;&lt;/i&gt;Windows 10&lt;/a&gt;
&lt;a class="btn-secondary" href="#"&gt;&lt;i class="icon-twitter text-xs mr-2"&gt;&lt;/i&gt;Ubuntu (Latest)&lt;/a&gt;
&lt;a disabled class="btn " href="#"&gt;&lt;i class="icon-twitter text-xs mr-2"&gt;&lt;/i&gt;Macos (Not supported)&lt;/a&gt;
&lt;/div&gt;
&lt;div class="col-container-center"&gt;
&lt;a class="btn-secondary" href="#"&gt;&lt;i class="icon-twitter text-xs mr-2"&gt;&lt;/i&gt;Windows 10&lt;/a&gt;
&lt;a class="btn-secondary" href="#"&gt;&lt;i class="icon-twitter text-xs mr-2"&gt;&lt;/i&gt;Ubuntu (Latest)&lt;/a&gt;
&lt;a disabled class="btn " href="#"&gt;&lt;i class="icon-twitter text-xs mr-2"&gt;&lt;/i&gt;Macos (Not supported)&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</li>
<li id="scss-Default-Col-Container">
<pre><code style="min-height: 200px;" class="language-scss">.col-container {
@apply space-y-4;
@apply sm:space-x-2;
}
.col-container-center {
@apply col-container;
@apply sm:element-x-center-max;
}</code></pre>
</li>
</ul>
</div>
</section><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="download-button-container">Download-Button-Container</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Default</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Default-Download-Button-Container">preview</a></li>
<li><a href="#html-Default-Download-Button-Container">html</a></li>
<li><a href="#scss-Default-Download-Button-Container">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Default-Download-Button-Container" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div class="download-button-container">
<label class="download-select-label" for="select"><i class="icon-arrow text-white"></i></label>
<input type="checkbox" id="select" class="download-select-input">
<label class="download-os download-os-windows" for="windows-1">Windows (.exe)</label>
<input checked="" id="windows-1" type="radio" class="download-os" name="os7">
<div class="download-os-actions">
<a class="button-left" href="#windows-link">Download for</a>
<button class="button-right">Windows</button>
</div>
<label class="download-os download-os-ubuntu" for="ubuntu-1">Debian/Ubuntu (.deb)</label>
<input id="ubuntu-1" type="radio" class="download-os" name="os7">
<div class="download-os-actions">
<a class="button-left" href="#ubuntu-link">Download for</a>
<button class="button-right">Ubuntu</button>
</div>
<label class="download-os download-os-fedora" for="fedora-1">Fedora (.rpm)</label>
<input id="fedora-1" type="radio" class="download-os" name="os7">
<div class="download-os-actions">
<a class="button-left" href="#fedora-link">Download for</a>
<button class="button-right">Fedora</button>
</div>
<div class="download-os-menu"></div>
</div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Default-Download-Button-Container">
<pre><code style="min-height: 200px;" class="language-html">&lt;div class="download-button-container"&gt;
&lt;label class="download-select-label" for="select"&gt;&lt;i class="icon-arrow text-white"&gt;&lt;/i&gt;&lt;/label&gt;
&lt;input type="checkbox" id="select" class="download-select-input"&gt;
&lt;label class="download-os download-os-windows" for="windows-1"&gt;Windows (.exe)&lt;/label&gt;
&lt;input checked="" id="windows-1" type="radio" class="download-os" name="os7"&gt;
&lt;div class="download-os-actions"&gt;
&lt;a class="button-left" href="#windows-link"&gt;Download for&lt;/a&gt;
&lt;button class="button-right"&gt;Windows&lt;/button&gt;
&lt;/div&gt;
&lt;label class="download-os download-os-ubuntu" for="ubuntu-1"&gt;Debian/Ubuntu (.deb)&lt;/label&gt;
&lt;input id="ubuntu-1" type="radio" class="download-os" name="os7"&gt;
&lt;div class="download-os-actions"&gt;
&lt;a class="button-left" href="#ubuntu-link"&gt;Download for&lt;/a&gt;
&lt;button class="button-right"&gt;Ubuntu&lt;/button&gt;
&lt;/div&gt;
&lt;label class="download-os download-os-fedora" for="fedora-1"&gt;Fedora (.rpm)&lt;/label&gt;
&lt;input id="fedora-1" type="radio" class="download-os" name="os7"&gt;
&lt;div class="download-os-actions"&gt;
&lt;a class="button-left" href="#fedora-link"&gt;Download for&lt;/a&gt;
&lt;button class="button-right"&gt;Fedora&lt;/button&gt;
&lt;/div&gt;
&lt;div class="download-os-menu"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</li>
<li id="scss-Default-Download-Button-Container">
<pre><code style="min-height: 200px;" class="language-scss">.download-button-container {
display: flex;
position: relative;
transform: scale(1.05);
z-index: 20;
width: 261px;
height: 41px;
}
.download-button-container .download-select-label {
z-index: 30;
cursor: pointer;
position: absolute;
right: 2.7px;
width: 115px;
height: 44px;
}
.download-button-container .download-select-label .icon-arrow{
font-size: 0.758rem;
transform: rotate(180deg);
right: 14.8px;
position: absolute;
top: 16.2px;
}
.download-button-container .download-select-input {
display: none;
z-index: 30;
cursor: pointer;
}
.download-button-container .download-select-input:checked ~ .download-os-menu,
.download-button-container .download-select-input:checked ~ .download-os {
display: block;
}
.download-os {
display: none;
position: absolute;
right: -111px;
font-size: 0.85rem;
text-align: center;
width: 228px;
cursor: pointer;
color: black;
background-color: white;
padding: 12px 16px;
}
input.download-os{
opacity: 0;
}
.download-os:hover {
background-color: rgba(128, 128, 128, 0.2);
}
.download-os-actions {
position: absolute;
left: 0;
display: none;
}
.download-os:checked + .download-os-actions {
display: flex;
z-index: 1;
}
.download-os-windows {
top: 50px;
}
.download-os-ubuntu {
top: 98px;
}
.download-os-fedora {
top: 143px;
}
.download-os-menu {
width: 230px;
height: 141px;
position: absolute;
z-index: -1;
right: -112px;
top: 48px;
display: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
background-color: #ffffff;
}
.download-os-actions .button-left {
padding-left: 1.9rem;
padding-right: 0.5rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
background-color: #2e61ff;
border-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;
text-transform: uppercase;
font-weight: 600;
color: rgba(255, 255, 255, 1);
text-align: center;
font-size: 0.75rem;
line-height: 1rem;
display: inline-flex;
align-items: center;
line-height: 1.5;
white-space: normal;
cursor: pointer;
max-height: 43px;
min-width: 140.7px;
margin-right: 0.15rem;
}
.download-os-actions .button-left:hover {
background-color: rgb(46 98 255 / 77%);
}
.download-os-actions .button-right {
padding-left: 1.4rem;
padding-right: 1.6rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
background-color: #234cc5;
border-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;
text-transform: uppercase;
font-weight: 600;
color: rgba(255, 255, 255, 1);
text-align: center;
font-size: 0.75rem;
line-height: 1rem;
display: inline-flex;
align-items: center;
line-height: 1.5;
white-space: normal;
cursor: pointer;
max-height: 43px;
min-width: 120px;
}</code></pre>
</li>
</ul>
</div>
</section><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="faq-container">Faq-Container</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Default</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Default-Faq-Container">preview</a></li>
<li><a href="#html-Default-Faq-Container">html</a></li>
<li><a href="#scss-Default-Faq-Container">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Default-Faq-Container" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div class="faq-container">
<div class="faq-container-top">
<span class="faq-container-top-title">
FAQ
</span>
<p class="faq-container-top-desc">
You have a question? We answered some already, but you
can always contact us at <a class="link-primary" href="">hello@safing.io</a>
</p>
</div>
<div class="faq-container-bottom">
<div class="faq-container-bottom-question">
<div class="card-faq hover-scale-out">
<label class="card-label" for="card-toggle-anchor-2">
<div class="wrapper-left">
<div class="card-title">
<h1 class="title">How do you make money? What is the catch?</h1>
</div>
</div>
<div class="wrapper-right">
<i class="icon-arrow"></i>
</div>
</label>
<input class="card-input-toggle" id="card-toggle-anchor-2" type="checkbox">
<div class="card-dropdown-toggle">
<div class="card-dropdown-content">
<p>
In short, our business model is Freemium. First provide local privacy for free,
forever. Then let happy users support us by paying for a powerful VPN alternative.
Finally reinvest earnings into making all our products better.
</p>
<p>
<a class="link-primary" href="">hello@safing.io</a>
</p>
</div>
</div>
</div>
</div>
<div class="faq-container-bottom-question">
<div class="card-faq hover-scale-out">
<label class="card-label" for="card-toggle-anchor-3">
<div class="wrapper-left">
<div class="card-title">
<h1 class="title">
Since the Portmaster can block ads and trackers, do I still need
an ad-blocker for my browser?
</h1>
</div>
</div>
<div class="wrapper-right">
<i class="icon-arrow"></i>
</div>
</label>
<input class="card-input-toggle" id="card-toggle-anchor-3" type="checkbox">
<div class="card-dropdown-toggle">
<div class="card-dropdown-content">
<p>
Yes, we highly recommend to continue using adblockers, such as uBlock Origin, uMatrix,
or similar. They give you more fine grained control over domains. iE you can allow
certain domains to allow css files & images while blocking cookies & javascripts. The
Portmaster cannot make this distinction.
</p>
</div>
</div>
</div>
</div>
<div class="faq-container-bottom-question">
<div class="card-faq hover-scale-out">
<label class="card-label" for="card-toggle-anchor-4">
<div class="wrapper-left">
<div class="card-title">
<h1 class="title">
What platforms do you support?
</h1>
</div>
</div>
<div class="wrapper-right">
<i class="icon-arrow"></i>
</div>
</label>
<input class="card-input-toggle" id="card-toggle-anchor-4" type="checkbox">
<div class="card-dropdown-toggle">
<div class="card-dropdown-content">
<p>
Currently we support Windows and Linux. Mac and Mobile are planned, but are further
down the road.
</p>
</div>
</div>
</div>
</div>
<div class="faq-container-bottom-question">
<div class="card-faq hover-scale-out">
<label class="card-label" for="card-toggle-anchor-5">
<div class="wrapper-left">
<div class="card-title">
<h1 class="title">
Where can I find your source code?
</h1>
</div>
</div>
<div class="wrapper-right">
<i class="icon-arrow"></i>
</div>
</label>
<input class="card-input-toggle" id="card-toggle-anchor-5" type="checkbox">
<div class="card-dropdown-toggle">
<div class="card-dropdown-content">
<p>
You can find our code on <a class="link-primary" href="">Github. The Portmaster</a>, the <a class="link-primary" href="">Portmaster UI</a>, the <a class="link-primary" href="">SPN</a>, the <a class="link-primary" href="">docs</a>
and <a class="link-primary" href="">this website</a> have their respective repositories. <a class="link-primary" href="">Jess</a>, the heart of the SPN, which
got audited by Cure53, can also be found online.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Default-Faq-Container">
<pre><code style="min-height: 200px;" class="language-html">&lt;div class="faq-container"&gt;
&lt;div class="faq-container-top"&gt;
&lt;span class="faq-container-top-title"&gt;
FAQ
&lt;/span&gt;
&lt;p class="faq-container-top-desc"&gt;
You have a question? We answered some already, but you
can always contact us at &lt;a class="link-primary" href=""&gt;hello@safing.io&lt;/a&gt;
&lt;/p&gt;
&lt;/div&gt;
&lt;div class="faq-container-bottom"&gt;
&lt;div class="faq-container-bottom-question"&gt;
&lt;div class="card-faq hover-scale-out"&gt;
&lt;label class="card-label" for="card-toggle-anchor-2"&gt;
&lt;div class="wrapper-left"&gt;
&lt;div class="card-title"&gt;
&lt;h1 class="title"&gt;How do you make money? What is the catch?&lt;/h1&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="wrapper-right"&gt;
&lt;i class="icon-arrow"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/label&gt;
&lt;input class="card-input-toggle" id="card-toggle-anchor-2" type="checkbox"&gt;
&lt;div class="card-dropdown-toggle"&gt;
&lt;div class="card-dropdown-content"&gt;
&lt;p&gt;
In short, our business model is Freemium. First provide local privacy for free,
forever. Then let happy users support us by paying for a powerful VPN alternative.
Finally reinvest earnings into making all our products better.
&lt;/p&gt;
&lt;p&gt;
&lt;a class="link-primary" href=""&gt;hello@safing.io&lt;/a&gt;
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="faq-container-bottom-question"&gt;
&lt;div class="card-faq hover-scale-out"&gt;
&lt;label class="card-label" for="card-toggle-anchor-3"&gt;
&lt;div class="wrapper-left"&gt;
&lt;div class="card-title"&gt;
&lt;h1 class="title"&gt;
Since the Portmaster can block ads and trackers, do I still need
an ad-blocker for my browser?
&lt;/h1&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="wrapper-right"&gt;
&lt;i class="icon-arrow"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/label&gt;
&lt;input class="card-input-toggle" id="card-toggle-anchor-3" type="checkbox"&gt;
&lt;div class="card-dropdown-toggle"&gt;
&lt;div class="card-dropdown-content"&gt;
&lt;p&gt;
Yes, we highly recommend to continue using adblockers, such as uBlock Origin, uMatrix,
or similar. They give you more fine grained control over domains. iE you can allow
certain domains to allow css files & images while blocking cookies & javascripts. The
Portmaster cannot make this distinction.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="faq-container-bottom-question"&gt;
&lt;div class="card-faq hover-scale-out"&gt;
&lt;label class="card-label" for="card-toggle-anchor-4"&gt;
&lt;div class="wrapper-left"&gt;
&lt;div class="card-title"&gt;
&lt;h1 class="title"&gt;
What platforms do you support?
&lt;/h1&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="wrapper-right"&gt;
&lt;i class="icon-arrow"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/label&gt;
&lt;input class="card-input-toggle" id="card-toggle-anchor-4" type="checkbox"&gt;
&lt;div class="card-dropdown-toggle"&gt;
&lt;div class="card-dropdown-content"&gt;
&lt;p&gt;
Currently we support Windows and Linux. Mac and Mobile are planned, but are further
down the road.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="faq-container-bottom-question"&gt;
&lt;div class="card-faq hover-scale-out"&gt;
&lt;label class="card-label" for="card-toggle-anchor-5"&gt;
&lt;div class="wrapper-left"&gt;
&lt;div class="card-title"&gt;
&lt;h1 class="title"&gt;
Where can I find your source code?
&lt;/h1&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="wrapper-right"&gt;
&lt;i class="icon-arrow"&gt;&lt;/i&gt;
&lt;/div&gt;
&lt;/label&gt;
&lt;input class="card-input-toggle" id="card-toggle-anchor-5" type="checkbox"&gt;
&lt;div class="card-dropdown-toggle"&gt;
&lt;div class="card-dropdown-content"&gt;
&lt;p&gt;
You can find our code on &lt;a class="link-primary" href=""&gt;Github. The Portmaster&lt;/a&gt;, the &lt;a class="link-primary" href=""&gt;Portmaster UI&lt;/a&gt;, the &lt;a class="link-primary" href=""&gt;SPN&lt;/a&gt;, the &lt;a class="link-primary" href=""&gt;docs&lt;/a&gt;
and &lt;a class="link-primary" href=""&gt;this website&lt;/a&gt; have their respective repositories. &lt;a class="link-primary" href=""&gt;Jess&lt;/a&gt;, the heart of the SPN, which
got audited by Cure53, can also be found online.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</li>
<li id="scss-Default-Faq-Container">
<pre><code style="min-height: 200px;" class="language-scss">.faq-container {
@apply element-x-center-max;
@apply space-y-28;
@apply w-full;
}
.faq-container .faq-container-top {
@apply element-x-center;
@apply space-y-7;
}
.faq-container .faq-container-top-title {
@apply block;
@apply relative;
@apply text-5xl;
@apply tracking-tight;
@apply font-bold;
@apply leading-none;
@apply text-center;
@apply lg:text-center;
}
.faq-container .faq-container-top-desc {
@apply element-x-center;
@apply text-safing-gray-500;
@apply text-center;
@apply inline-block;
}
.faq-container .faq-container-bottom {
@apply element-x-center-max;
max-width: 85rem;
@apply space-y-10;
@apply px-4;
@apply sm:px-10;
@apply md:space-y-0;
@apply md:grid;
@apply md:grid-cols-2;
@apply md:gap-10;
@apply xl:px-0;
@apply w-full;
}
.faq-container .faq-container-bottom-question {
@apply block;
@apply space-y-5;
}
.faq-container .faq-container-bottom-question-title {
@apply text-2xl;
}
.faq-container .faq-container-bottom-question-desc {
@apply text-safing-gray-500;
@apply inline-block;
}
</code></pre>
</li>
</ul>
</div>
</section><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="footer">Footer</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="list space-y-2">
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Default</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Default-Footer">preview</a></li>
<li><a href="#html-Default-Footer">html</a></li>
<li><a href="#scss-Default-Footer">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Default-Footer" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<footer class="footer">
<div class="footer-form-wrapper">
<span class="footer-form-title">Stay Connected via Newsletter</span>
<form class="footer-form">
<div class="footer-form-subscribe">
<input class="input-rounded-primary w-full" type="email" name="email" required="" placeholder="email">
<input class="btn-primary" type="submit" value="Subscribe">
</div>
<div class="footer-form-legal">
<input class="toggle" type="checkbox" id="consent_text" name="consent_text" value="yes" required="">
<div>
<label class="consent cursor-pointer opacity-55 text-safing-gray-500" for="consent_text">
I agree that Safing &amp;
<a class="link-primary-external" href="https://rapidmail.de" target="_blank">rapidmail.de</a>
may process and use the email for newsletter purposes.
</label>
</div>
</div>
</form>
</div>
<div class="footer-wrapper">
<div class="footer-category">
<div class="footer-category-title">
<span>Company</span>
</div>
<div class="footer-links">
<div class="footer-links-left">
<a href="#" class="footer-link"> About Us </a>
<a href="#" class="footer-link"> Business Model </a>
<a href="#" class="footer-link"> Ownership </a>
<div class="flex items-center space-x-2">
<span class="dot pulse-opacity-out-in"></span>
<a href="#" class="footer-link">We're Hireing </a>
</div>
<a href="#" class="footer-link"> Get Help </a>
</div>
</div>
</div>
<div class="vertical-line"></div>
<div class="footer-category">
<div class="footer-category-title">
<span>Community</span>
</div>
<div class="footer-links">
<div class="footer-links-left">
<a href="#" class="footer-link"> What's Next? </a>
<div class="flex items-center space-x-2">
<a href="#" class="footer-link"> Blog </a>
<a href="#" class="footer-link"><i class="icon-rss text-xs"></i></a>
</div>
<div class="flex items-center space-x-2">
<a href="#" class="footer-link"> Podcast </a>
<a href="#" class="footer-link"><i class="icon-rss text-xs"></i></a>
</div>
<a href="#" class="footer-link"> Videos </a>
</div>
<div class="footer-links-right">
<a href="#" class="footer-link"> Code of Conduct </a>
<a href="#" class="footer-link"> Github</a>
<a href="#" class="footer-link"> Reddit </a>
<a href="#" class="footer-link"> Twitter </a>
</div>
</div>
</div>
<div class="vertical-line"></div>
<div class="footer-category">
<div class="footer-category-title">
<span>Portmaster</span>
</div>
<div class="footer-links">
<div class="footer-links-left">
<a href="#" class="footer-link"> Discover </a>
<a href="#" class="footer-link"> Documentation </a>
<a href="#" class="footer-link"> Source Code </a>
<a href="#" class="footer-link"> Backlog </a>
</div>
</div>
</div>
<div class="footer-category">
<div class="footer-category-title">
<span>SPN</span>
<div class="horizontal-line"></div>
</div>
<div class="footer-links">
<div class="footer-links-left">
<a href="#" class="footer-link"> Discover </a>
<a href="#" class="footer-link"> Whitepaper </a>
<a href="#" class="footer-link"> Source Code </a>
<a href="#" class="footer-link"> Backlog </a>
</div>
<div class="footer-links-right">
<a href="#" class="footer-link"> vs Tor </a>
<a href="#" class="footer-link"> vs VPNs </a>
</div>
</div>
</div>
</div>
<div class="footer-legal">
<div class="footer-legal-wrapper">
<span class="footer-legal-copyright">
© 2021 Safing ICS Technologies GmbH
</span>
<div class="footer-legal-links">
<a href="#" class="footer-legal-link"> Terms of Service </a>
<a href="#" class="footer-legal-link"> Privacy Policy </a>
<a href="#" class="footer-legal-link"> Contact &amp; Notice </a>
</div>
</div>
<span class="footer-legal-extra">
Companies mentioned are by way of example and are an opinion only, not based on fact.
</span>
</div>
</footer>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Default-Footer">
<pre><code style="min-height: 200px;" class="language-html">&lt;footer class="footer"&gt;
&lt;div class="footer-form-wrapper"&gt;
&lt;span class="footer-form-title"&gt;Stay Connected via Newsletter&lt;/span&gt;
&lt;form class="footer-form"&gt;
&lt;div class="footer-form-subscribe"&gt;
&lt;input class="input-rounded-primary w-full" type="email" name="email" required="" placeholder="email"&gt;
&lt;input class="btn-primary" type="submit" value="Subscribe"&gt;
&lt;/div&gt;
&lt;div class="footer-form-legal"&gt;
&lt;input class="toggle" type="checkbox" id="consent_text" name="consent_text" value="yes" required=""&gt;
&lt;div&gt;
&lt;label class="consent cursor-pointer opacity-55 text-safing-gray-500" for="consent_text"&gt;
I agree that Safing &amp;
&lt;a class="link-primary-external" href="https://rapidmail.de" target="_blank"&gt;rapidmail.de&lt;/a&gt;
may process and use the email for newsletter purposes.
&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;div class="footer-wrapper"&gt;
&lt;div class="footer-category"&gt;
&lt;div class="footer-category-title"&gt;
&lt;span&gt;Company&lt;/span&gt;
&lt;/div&gt;
&lt;div class="footer-links"&gt;
&lt;div class="footer-links-left"&gt;
&lt;a href="#" class="footer-link"&gt; About Us &lt;/a&gt;
&lt;a href="#" class="footer-link"&gt; Business Model &lt;/a&gt;
&lt;a href="#" class="footer-link"&gt; Ownership &lt;/a&gt;
&lt;div class="flex items-center space-x-2"&gt;
&lt;span class="dot pulse-opacity-out-in"&gt;&lt;/span&gt;
&lt;a href="#" class="footer-link"&gt;We're Hireing &lt;/a&gt;
&lt;/div&gt;
&lt;a href="#" class="footer-link"&gt; Get Help &lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="vertical-line"&gt;&lt;/div&gt;
&lt;div class="footer-category"&gt;
&lt;div class="footer-category-title"&gt;
&lt;span&gt;Community&lt;/span&gt;
&lt;/div&gt;
&lt;div class="footer-links"&gt;
&lt;div class="footer-links-left"&gt;
&lt;a href="#" class="footer-link"&gt; What's Next? &lt;/a&gt;
&lt;div class="flex items-center space-x-2"&gt;
&lt;a href="#" class="footer-link"&gt; Blog &lt;/a&gt;
&lt;a href="#" class="footer-link"&gt;&lt;i class="icon-rss text-xs"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;div class="flex items-center space-x-2"&gt;
&lt;a href="#" class="footer-link"&gt; Podcast &lt;/a&gt;
&lt;a href="#" class="footer-link"&gt;&lt;i class="icon-rss text-xs"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;a href="#" class="footer-link"&gt; Videos &lt;/a&gt;
&lt;/div&gt;
&lt;div class="footer-links-right"&gt;
&lt;a href="#" class="footer-link"&gt; Code of Conduct &lt;/a&gt;
&lt;a href="#" class="footer-link"&gt; Github&lt;/a&gt;
&lt;a href="#" class="footer-link"&gt; Reddit &lt;/a&gt;
&lt;a href="#" class="footer-link"&gt; Twitter &lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="vertical-line"&gt;&lt;/div&gt;
&lt;div class="footer-category"&gt;
&lt;div class="footer-category-title"&gt;
&lt;span&gt;Portmaster&lt;/span&gt;
&lt;/div&gt;
&lt;div class="footer-links"&gt;
&lt;div class="footer-links-left"&gt;
&lt;a href="#" class="footer-link"&gt; Discover &lt;/a&gt;
&lt;a href="#" class="footer-link"&gt; Documentation &lt;/a&gt;
&lt;a href="#" class="footer-link"&gt; Source Code &lt;/a&gt;
&lt;a href="#" class="footer-link"&gt; Backlog &lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="footer-category"&gt;
&lt;div class="footer-category-title"&gt;
&lt;span&gt;SPN&lt;/span&gt;
&lt;div class="horizontal-line"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="footer-links"&gt;
&lt;div class="footer-links-left"&gt;
&lt;a href="#" class="footer-link"&gt; Discover &lt;/a&gt;
&lt;a href="#" class="footer-link"&gt; Whitepaper &lt;/a&gt;
&lt;a href="#" class="footer-link"&gt; Source Code &lt;/a&gt;
&lt;a href="#" class="footer-link"&gt; Backlog &lt;/a&gt;
&lt;/div&gt;
&lt;div class="footer-links-right"&gt;
&lt;a href="#" class="footer-link"&gt; vs Tor &lt;/a&gt;
&lt;a href="#" class="footer-link"&gt; vs VPNs &lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="footer-legal"&gt;
&lt;div class="footer-legal-wrapper"&gt;
&lt;span class="footer-legal-copyright"&gt;
© 2021 Safing ICS Technologies GmbH
&lt;/span&gt;
&lt;div class="footer-legal-links"&gt;
&lt;a href="#" class="footer-legal-link"&gt; Terms of Service &lt;/a&gt;
&lt;a href="#" class="footer-legal-link"&gt; Privacy Policy &lt;/a&gt;
&lt;a href="#" class="footer-legal-link"&gt; Contact &amp; Notice &lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;span class="footer-legal-extra"&gt;
Companies mentioned are by way of example and are an opinion only, not based on fact.
&lt;/span&gt;
&lt;/div&gt;
&lt;/footer&gt;</code></pre>
</li>
<li id="scss-Default-Footer">
<pre><code style="min-height: 200px;" class="language-scss">.footer {
@apply bg-black;
@apply p-8;
}
.footer-wrapper {
@apply grid;
@apply mx-auto;
@apply grid-rows-4;
@apply grid-cols-1;
@apply grid-flow-col-dense;
@apply grid-flow-row-dense;
@apply justify-center;
@apply max-w-screen-sm;
@apply gap-y-14;
@apply sm:grid-rows-2;
@apply sm:grid-cols-2;
@apply md:justify-around;
@apply lg:grid-cols-6-md;
@apply lg:grid-rows-none;
@apply lg:max-w-screen-xl;
@apply lg:gap-y-0;
}
.footer-wrapper .footer-links-right,
.footer-wrapper .footer-links-left {
@apply space-y-4;
@apply space-x-0;
}
.footer .footer-link {
@apply block;
@apply text-white;
@apply text-base;
@apply hover-opacity-out;
@apply w-max;
@apply lg:text-md;
}
.footer .footer-links {
@apply flex;
@apply space-x-12;
}
.footer .footer-category {
@apply sm:w-max;
}
.footer .footer-category-title {
@apply flex;
@apply items-center;
@apply mb-2;
}
.footer .footer-category-title span {
@apply block;
@apply text-white;
@apply text-xl;
@apply mb-6;
@apply pr-10;
}
.footer .horizontal-line {
@apply border-t-2;
@apply border-white;
@apply w-full;
opacity: 0.25;
height: 20px;
}
.footer .vertical-line {
@apply hidden;
@apply border-r-2;
@apply border-white;
opacity: 0.25;
height: 200px;
width: 2px;
@apply lg:block;
}
.footer .footer-legal {
@apply text-sm;
@apply mt-16;
@apply mb-4;
}
.footer .footer-legal-wrapper {
@apply w-full;
@apply sm:w-max;
@apply sm:mx-auto;
@apply lg:flex;
}
.footer .footer-legal-copyright {
@apply block;
@apply leading-6;
@apply text-white;
@apply opacity-30;
@apply mb-4;
@apply w-full;
@apply sm:w-max;
@apply sm:mx-auto;
@apply lg:mb-0;
@apply lg:mx-0;
@apply lg:text-center;
}
.footer .footer-legal-links {
@apply block;
@apply space-y-2;
@apply space-x-0;
@apply w-full;
@apply sm:flex;
@apply sm:space-y-0;
@apply sm:space-x-12;
@apply sm:w-max;
@apply sm:mx-auto;
@apply lg:mr-0;
@apply lg:ml-12;
}
.footer .footer-legal-link {
@apply block;
@apply text-white;
@apply text-base;
@apply hover-opacity-out;
@apply w-max;
@apply lg:text-sm;
}
.footer .footer-legal-extra {
@apply block;
@apply leading-6;
@apply text-white;
@apply opacity-30;
@apply mt-5;
@apply w-full;
@apply sm:w-max;
@apply sm:mx-auto;
@apply md:text-center;
}
.footer .footer-form-wrapper {
@apply mt-3;
@apply mb-8;
@apply mx-auto;
@apply self-center;
@apply max-w-2xl;
@apply text-center;
@apply space-y-2;
@apply md:p-12;
@apply lg:space-y-0;
@apply lg:text-left;
}
.footer .footer-form-title {
@apply block;
@apply text-white;
@apply text-xl;
@apply font-bold;
@apply w-full;
@apply mx-auto;
@apply sm:w-max;
@apply lg:mx-0;
}
.footer .footer-form-subscribe {
@apply block;
@apply lg:flex;
@apply items-center;
@apply py-5;
@apply space-x-3;
@apply space-y-4;
@apply w-full;
@apply sm:mx-auto;
@apply lg:space-y-0;
@apply lg:mx-0;
}
.footer .footer-form-legal {
@apply block;
@apply max-w-md;
@apply mx-auto;
@apply space-y-3;
@apply space-x-0;
@apply select-none;
@apply items-center;
@apply lg:space-y-0;
@apply lg:space-x-5;
@apply lg:flex;
@apply lg:mx-0;
@apply lg:max-w-xl;
}
.footer .footer-form-legal .link-primary-external {
@apply table-cell;
padding-left: 3px;
}
.dot {
height: 0.45rem;
width: 0.45rem;
border-radius: 50%;
@apply bg-safing-blue-500;
@apply inline-block;
}</code></pre>
</li>
</ul>
</div>
</section><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="markdown-container">Markdown-Container</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="list space-y-2">
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Default</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Default-Markdown-Container">preview</a></li>
<li><a href="#html-Default-Markdown-Container">html</a></li>
<li><a href="#scss-Default-Markdown-Container">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Default-Markdown-Container" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<div class="markdown-container">
<!-- Markdown Example -->
<blockquote>
<p>blockquote</p>
</blockquote>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<p><em>em</em></p>
<p><strong>strong</strong></p>
<p><code>code</code></p>
<p>But who pays for all of this? That is such a critical question to ask in order to understand where a company stands and where it is heading.</p>
<p><a href="https://world.hey.com/jonas/how-money-dictates-design-decisions-5e866cd9">External Link</a></p>
<p><a href="/ownership/#influences">Internal / Link</a></p>
<p><a href="https://safing.io/esa-bic/">Internal https://safing.io Link</a></p>
<p><img src="https://safing.io/assets/img/blog/breaking_chain.png" alt="image displays a chain with many strong links (no meta-data, security, usability) but still breaking at its weak link (business-model))"></p>
<!-- Markdown Example -->
</div>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Default-Markdown-Container">
<pre><code style="min-height: 200px;" class="language-html">&lt;div class="markdown-container"&gt;
&lt;!-- Markdown Example --&gt;
&lt;blockquote&gt;
&lt;p&gt;blockquote&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h1&gt;h1&lt;/h1&gt;
&lt;h2&gt;h2&lt;/h2&gt;
&lt;h3&gt;h3&lt;/h3&gt;
&lt;h4&gt;h4&lt;/h4&gt;
&lt;p&gt;&lt;em&gt;em&lt;/em&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;strong&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;code&gt;code&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;But who pays for all of this? That is such a critical question to ask in order to understand where a company stands and where it is heading.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://world.hey.com/jonas/how-money-dictates-design-decisions-5e866cd9"&gt;External Link&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="/ownership/#influences"&gt;Internal / Link&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://safing.io/esa-bic/"&gt;Internal https://safing.io Link&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src="https://safing.io/assets/img/blog/breaking_chain.png" alt="image displays a chain with many strong links (no meta-data, security, usability) but still breaking at its weak link (business-model))"&gt;&lt;/p&gt;
&lt;!-- Markdown Example --&gt;
&lt;/div&gt;</code></pre>
</li>
<li id="scss-Default-Markdown-Container">
<pre><code style="min-height: 200px;" class="language-scss">.markdown-container {
@apply element-x-center;
@apply px-10;
@apply max-w-4xl;
}
.markdown-container > h2,
.markdown-container > h3,
.markdown-container > h4,
.markdown-container > h5,
.markdown-container > h6,
.markdown-container > h1 {
@apply mt-8;
@apply mb-3;
}
.markdown-container > h1 {
@apply text-4xl;
}
.markdown-container > h2 {
@apply text-3xl;
border-bottom: 1px solid #d7d7d7;
}
.markdown-container > h3 {
@apply text-2xl;
}
.markdown-container > h4 {
@apply text-xl;
}
.markdown-container > h5 {
@apply text-lg;
}
.markdown-container > h6 {
@apply text-md;
}
.markdown-container > hr {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.markdown-container > [class^=' alert'],
.markdown-container > [class*='alert'] {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.markdown-container > a {
@apply block;
margin-top: 1rem;
margin-bottom: 1rem;
}
.markdown-container > p:not(:first-of-type):not(:last-of-type) {
margin-top: 1rem;
margin-bottom: 1rem;
}
.markdown-container > p:not(:first-of-type) {
margin-top: 1rem;
}
.markdown-container > p:not(:last-of-type) {
margin-bottom: 1rem;
}
.markdown-container > p > code {
color: #ba00bf;
font-size: 0.875rem;
font-weight: 500;
word-break: break-word;
}
.markdown-container > p > code::after {
content: '`';
}
.markdown-container > p > code::before {
content: '`';
}
.markdown-container > a,
.markdown-container > ul > li > a,
.markdown-container > ol > li > a,
.markdown-container > p > a {
@apply link-primary;
}
.markdown-container > a[href^="http"]:not([href*='safing.io']),
.markdown-container > ul > li > a[href^="http"]:not([href*='safing.io']),
.markdown-container > ol > li > a[href^="http"]:not([href*='safing.io']),
.markdown-container > p > a[href^="http"]:not([href*='safing.io']) {
@apply link-primary-external;
}
.markdown-container > p > img {
border-radius: 0.375rem;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0), 0 0 90px 0 rgba(59, 93, 199, 0.1);
display: block;
height: auto;
margin-bottom: 4rem;
margin-top: 5rem;
max-width: 100%;
}
.markdown-container > ul {
list-style-type: disc;
padding-left: 1.85rem;
padding-top: 1rem;
@apply space-y-2;
}
.markdown-container > ol {
list-style-type: decimal;
padding-left: 1.85rem;
padding-top: 1rem;
@apply space-y-2;
}
.markdown-container > blockquote {
border-left: 4px solid #ddd;
@apply text-safing-gray-600;
margin-top: 1.55rem;
opacity: 1;
padding-left: 1rem;
}
.markdown-container > em > strong {
@apply font-medium;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: rgba(97, 136, 255);
text-decoration-thickness: 2px;
}
/* If this breaks stuff in a markdown usecase, well it's the CTO's aka Daniel fault.*/
.markdown-container table img {
border-radius: 0.375rem;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0), 0 0 90px 0 rgba(59, 93, 199, 0.1);
display: block;
height: auto;
max-width: 100%;
}</code></pre>
</li>
</ul>
</div>
</section><section class="w-full space-y-20" style="max-width: 80rem;">
<div class="title space-y-3">
<h2 id="navbar">Navbar</h2>
<span class="desc block text-safing-gray-500">This is still a wip</span>
</div>
<div class="list space-y-2">
</div>
<div class="compoent space-y-2">
<div id="tabMenu" class="space-y-4">
<div class="flex">
<div>
<span class="title block text-md">Default</span>
</div>
<ul class="tabs flex space-x-3 ml-auto">
<li><a href="#preview-Default-Navbar">preview</a></li>
<li><a href="#html-Default-Navbar">html</a></li>
<li><a href="#scss-Default-Navbar">scss</a></li>
</ul>
</div>
</div>
<ul class="tabs-content">
<li id="preview-Default-Navbar" class="active">
<div class="preview-container">
<div class="preview-panel-left">
<iframe frameborder="0" class="iframe" width="100%" scrolling="no"></iframe>
<div class="data items-center flex h-full" style="height: fit-content;">
<div class="w-full h-full" style="height: fit-content;">
<nav class="nav">
<div class="nav-left">
<a href="" class="nav-logo-wrapper">
<!-- turn this into a font icon -->
<svg class="h-6 w-auto mr-4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128">
<g data-name="Main" fill-rule="evenodd">
<path fill="#fff" d="M176.11 36.73l-5-8.61a41.53 41.53 0 00-14.73 57.22l8.55-5.12a31.58 31.58 0 0111.19-43.49z" transform="translate(-127.99 .01)" style="isolation:isolate" opacity=".8"></path>
<path fill="#fff" d="M222.36 72.63a31.55 31.55 0 01-45 19.35l-4.62 8.84a41.54 41.54 0 0059.17-25.46z" transform="translate(-127.99 .01)" style="isolation:isolate" opacity=".8"></path>
<path fill="#fff" d="M197 83a19.66 19.66 0 01-19.25-32.57l-4.5-4.27A25.87 25.87 0 00198.59 89z" transform="translate(-127.99 .01)" style="isolation:isolate" opacity=".6"></path>
<path fill="#fff" d="M192 112.64A48.64 48.64 0 11240.64 64 48.64 48.64 0 01192 112.64zM256 64a64 64 0 10-64 64 64 64 0 0064-64z" transform="translate(-127.99 .1)"></path>
</g>
</svg>
<span>Safing<span>.io</span></span>
</a>
</div>
<label class="nav-right-burger" for="nav-toggle-visable">
<!-- turn this into a font icon -->
<svg class="h-6 w-6 fill-current text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
<path class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</label>
<input class="nav-toggle-burger" id="nav-toggle-visable" type="checkbox">
<div class="nav-right">
<div class="nav-right-links">
<a href="" class="nav-link"> Portmaster </a>
<a href="" class="nav-link"> Docs </a>
<a href="" class="nav-link"> Source Code </a>
<a href="" class="nav-link"> About </a>
<a href="" class="nav-link"> What's Next </a>
<a href="" class="nav-link"> Get Help </a>
</div>
<div class="nav-right-actions">
<a href="" class="nav-link"> Sign In </a>
<a href="" class="btn-primary"> Sign Up </a>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="preview-panel-splitter"></div>
</div>
</li>
<li id="html-Default-Navbar">
<pre><code style="min-height: 200px;" class="language-html">&lt;nav class="nav"&gt;
&lt;div class="nav-left"&gt;
&lt;a href="" class="nav-logo-wrapper"&gt;
&lt;!-- turn this into a font icon --&gt;
&lt;svg class="h-6 w-auto mr-4" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128"&gt;
&lt;g data-name="Main" fill-rule="evenodd"&gt;
&lt;path fill="#fff" d="M176.11 36.73l-5-8.61a41.53 41.53 0 00-14.73 57.22l8.55-5.12a31.58 31.58 0 0111.19-43.49z" transform="translate(-127.99 .01)" style="isolation:isolate" opacity=".8"&gt;&lt;/path&gt;
&lt;path fill="#fff" d="M222.36 72.63a31.55 31.55 0 01-45 19.35l-4.62 8.84a41.54 41.54 0 0059.17-25.46z" transform="translate(-127.99 .01)" style="isolation:isolate" opacity=".8"&gt;&lt;/path&gt;
&lt;path fill="#fff" d="M197 83a19.66 19.66 0 01-19.25-32.57l-4.5-4.27A25.87 25.87 0 00198.59 89z" transform="translate(-127.99 .01)" style="isolation:isolate" opacity=".6"&gt;&lt;/path&gt;
&lt;path fill="#fff" d="M192 112.64A48.64 48.64 0 11240.64 64 48.64 48.64 0 01192 112.64zM256 64a64 64 0 10-64 64 64 64 0 0064-64z" transform="translate(-127.99 .1)"&gt;&lt;/path&gt;
&lt;/g&gt;
&lt;/svg&gt;
&lt;span&gt;Safing&lt;span&gt;.io&lt;/span&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;label class="nav-right-burger" for="nav-toggle-visable"&gt;
&lt;!-- turn this into a font icon --&gt;
&lt;svg class="h-6 w-6 fill-current text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24"&gt;
&lt;path class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"&gt;&lt;/path&gt;
&lt;path class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/label&gt;
&lt;input class="nav-toggle-burger" id="nav-toggle-visable" type="checkbox"&gt;
&lt;div class="nav-right"&gt;
&lt;div class="nav-right-links"&gt;
&lt;a href="" class="nav-link"&gt; Portmaster &lt;/a&gt;
&lt;a href="" class="nav-link"&gt; Docs &lt;/a&gt;
&lt;a href="" class="nav-link"&gt; Source Code &lt;/a&gt;
&lt;a href="" class="nav-link"&gt; About &lt;/a&gt;
&lt;a href="" class="nav-link"&gt; What's Next &lt;/a&gt;
&lt;a href="" class="nav-link"&gt; Get Help &lt;/a&gt;
&lt;/div&gt;
&lt;div class="nav-right-actions"&gt;
&lt;a href="" class="nav-link"&gt; Sign In &lt;/a&gt;
&lt;a href="" class="btn-primary"&gt; Sign Up &lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/nav&gt;</code></pre>
</li>
<li id="scss-Default-Navbar">
<pre><code style="min-height: 200px;" class="language-scss">.nav {
@apply bg-black;
@apply flex;
@apply p-6;
@apply relative;
@apply lg:pr-12;
@apply lg:pl-12;
}
.nav > .nav-left {
@apply flex;
@apply flex-auto;
@apply justify-start;
@apply w-1/5;
}
.nav-left > .nav-logo-wrapper {
@apply flex;
@apply items-center;
@apply hover-opacity-in;
}
.nav-logo-wrapper > span {
@apply text-white;
}
.nav-logo-wrapper > span > span {
@apply text-safing-gray-400;
}
.nav > .nav-right-burger {
@apply z-20;
@apply block;
@apply lg:hidden;
}
.nav-right-burger:hover {
@apply cursor-pointer;
}
.nav > .nav-toggle-burger {
@apply hidden;
}
.nav-center {
@apply bg-black;
@apply lg:bg-transparent;
}
.nav-toggle-burger:checked+.nav-center,
.nav-toggle-burger:checked+.nav-right {
height: 100vh;
@apply grid;
}
@media (min-width: 1024px) {
.nav-toggle-burger:checked+.nav-center,
.nav-toggle-burger:checked+.nav-right {
@apply flex;
}
}
.nav > .nav-right {
@apply hidden;
@apply bg-black;
@apply absolute;
@apply content-center;
@apply inset-0;
@apply h-full;
@apply p-10;
@apply z-10;
@apply w-full;
@apply lg:space-x-10;
@apply lg:flex;
@apply lg:flex-auto;
@apply lg:relative;
@apply lg:justify-end;
@apply lg:p-0;
@apply lg:h-auto;
}
.nav > .nav-center {
@apply hidden;
@apply absolute;
@apply content-center;
@apply inset-0;
@apply h-full;
@apply p-10;
@apply z-10;
@apply w-full;
@apply lg:space-x-10;
@apply lg:flex;
@apply lg:p-0;
@apply lg:h-auto;
@apply ml-auto;
@apply mr-auto;
position: absolute;
width: 100%;
@apply lg:justify-center;
}
.nav-right > .nav-right-profile {
@apply flex;
@apply space-x-4;
@apply border-l-2;
@apply pl-5;
@apply border-safing-gray-600;
@apply z-20;
}
.nav-right-profile div {
align-self: center;
}
.nav-right-profile-circle {
background: #5b35f2;
color: white;
border-radius: 50%;
display: inline-block;
line-height: 49px;
text-align: center;
font-size: 1.2rem;
width: 50px;
height: 50px;
}
.nav-right-profile-username {
@apply block;
@apply text-white;
@apply text-sm;
}
.nav-right-profile-email {
@apply block;
@apply text-safing-gray-500;
@apply text-sm;
}
.nav-center > .nav-right-links,
.nav-right > .nav-right-links {
@apply space-x-0;
@apply space-y-11;
@apply items-baseline;
@apply justify-center;
@apply text-center;
@apply lg:flex;
@apply lg:space-y-0;
@apply lg:space-x-7;
@apply lg:items-center;
}
.nav .nav-link {
@apply block;
@apply text-white;
@apply font-bold;
@apply text-base;
@apply relative;
@apply lg:text-sm;
}
.nav .nav-link.selected::before {
position: absolute;
@apply bg-transparent;
height: 0.45rem;
width: 0.45rem;
border-radius: 100%;
content: '';
left: 50%;
bottom: 10px;
transform: translateX(-50%);
bottom: -11px;
@apply lg:bg-safing-blue-500;
}
.nav-right-links > .nav-link {
@apply hover-opacity-in;
}
.nav-right-actions > .nav-link {
@apply hover-opacity-in;
}
.nav-center > .nav-right-actions,
.nav-right > .nav-right-actions {
@apply space-y-11;
@apply items-baseline;
@apply ml-0;
@apply mt-11;
@apply text-center;
@apply md:items-center;
@apply lg:mt-0;
@apply lg:ml-11;
@apply lg:flex;
@apply lg:space-y-0;
@apply lg:space-x-5;
}
.nav-center > .nav-right-actions {
position: relative;
top: 0;
bottom: 0;
@apply right-0;
@apply lg:absolute;
@apply lg:right-10;
}
.nav-right-actions > .btn-primary {
@apply w-full;
@apply py-3;
@apply lg:w-auto;
}
</code></pre>
</li>
</ul>
</div>
</section>
</section>
</div>
<footer class="my-60"></footer>
</body>
<script src="../docs/js/internal/iframeRefresher.js" type="text/javascript"></script>
<script src="../docs/js/internal/preview.js" type="text/javascript"></script>
<script src="../docs/js/internal/tabs.js" type="text/javascript"></script>