Checkpoint

2022-05-21 23:31:56 +02:00 · 2022-05-21 23:31:56 +02:00 · f815aa9992
parent 83ab901da6
commit f815aa9992
73 changed files with 11157 additions and 12214 deletions
--- a/forms/account/address/style.css
+++ b/forms/account/address/style.css
@ -6,11 +6,5 @@
 .address .box
 {
 	max-width: 30em;
-	padding: 2em;
+	padding: 3em;
 }
-.address .form
-{
-	margin: 0 auto;
-	max-width: 25em;
-}
-
--- a/forms/account/address/ui.xml
+++ b/forms/account/address/ui.xml
@ -23,40 +23,45 @@
 	</db-form>
 </vn-group>
 <div id="title">
-	<h1><t>AddEditAddress</t></h1>
+	<h1><t>Configuration</t></h1>
 </div>
 <div id="actions">
-	<htk-bar-button
-		icon="ok"
-		tip="_Accept"
-		on-click="onAcceptClick"/>
 	<htk-bar-button
 		icon="close"
 		tip="_Return"
 		on-click="onReturnClick"/>
+	<htk-bar-button
+		icon="check"
+		tip="_Accept"
+		on-click="onAcceptClick"/>
 </div>
 <div id="form" class="address">
 	<div class="box">
 		<div class="form">
+			<h2><t>AddEditAddress</t></h2>
 			<div class="form-group">
-				<label><t>Name</t></label>
-				<htk-entry column="nickname" form="iter"/>
+				<htk-entry
+					placeholder="_Name"
+					column="nickname" form="iter"/>
 			</div>
 			<div class="form-group">
-				<label><t>Address</t></label>
-				<htk-entry column="street" form="iter"/>
+				<htk-entry
+					placeholder="_Address"
+					column="street" form="iter"/>
 			</div>
 			<div class="form-group">
-				<label><t>City</t></label>
-				<htk-entry column="city" form="iter"/>
+				<htk-entry
+					placeholder="_City"
+					column="city" form="iter"/>
 			</div>
 			<div class="form-group">
-				<label><t>ZipCode</t></label>
-				<htk-entry column="postalCode" form="iter"/>
+				<htk-entry
+					placeholder="_ZipCode"
+					column="postalCode" form="iter"/>
 			</div>
 			<div class="form-group">
-				<label><t>Country</t></label>
-				<htk-combo>
+				<htk-combo
+					placeholder="_Country">
 					<db-param
 						id="country"
 						property="param"
@ -70,8 +75,10 @@
 				</htk-combo>
 			</div>
 			<div class="form-group">
-				<label><t>Province</t></label>
-				<htk-combo column="provinceFk" form="iter">
+				<htk-combo
+					placeholder="_Province"
+					column="provinceFk"
+					form="iter">
 					<db-model property="model">
 						SELECT id, name FROM vn.province
 							WHERE countryFk = #country
--- a/forms/account/conf/locale/ca.yml
+++ b/forms/account/conf/locale/ca.yml
@ -1,4 +1,5 @@
 Configuration: Configuració
+Personal information: Dades personals
 Username: Nom d'usuari
 Password: Contrasenya
 Email: Correu electrònic
@ -9,7 +10,7 @@ Receive invoices by email: Rebre factures per correu electrònic
 Old password: Contrasenya antiga
 New password: Nova contrasenya
 Repeat password: Repetir contrasenya
-Info: Info
+Requirements: Requisits
 Modify: Modificar
 Password requirements: Requisits de contrasenya
 characters long: caràcters de longitud
--- a/forms/account/conf/locale/en.yml
+++ b/forms/account/conf/locale/en.yml
@ -1,4 +1,5 @@
 Configuration: Configuration
+Personal information: Personal information
 Username: Username
 Password: Password
 Email: Email
@ -9,7 +10,7 @@ Receive invoices by email: Receive invoices by email
 Old password: Old password
 New password: New password
 Repeat password: Repeat password
-Info: Info
+Requirements: Requirements
 Modify: Modify
 Password requirements: Password requirements
 characters long: characters long
--- a/forms/account/conf/locale/es.yml
+++ b/forms/account/conf/locale/es.yml
@ -1,4 +1,5 @@
 Configuration: Configuración
+Personal information: Datos personales
 Username: Nombre de usuario
 Password: Contraseña
 Email: Correo electrónico
@ -9,7 +10,7 @@ Receive invoices by email: Recibir facturas por correo electrónico
 Old password: Contaseña antigua
 New password: Nueva contraseña
 Repeat password: Repetir contraseña
-Info: Info
+Requirements: Requisitos
 Modify: Modificar
 Password requirements: Requisitos de constraseña
 characters long: carácteres de longitud
--- a/forms/account/conf/locale/fr.yml
+++ b/forms/account/conf/locale/fr.yml
@ -1,4 +1,5 @@
 Configuration: Configuration
+Personal information: Informations personnelles
 Username: Utilisateur
 Password: Mot de passe
 Email: Courriel
@ -9,7 +10,7 @@ Receive invoices by email: Recevoir des factures par e-mail
 Old password: Ancien mot de passe
 New password: Nouveau mot de passe
 Repeat password: Répéter le mot de passe
-Info: Info
+Requirements: Exigences
 Modify: Modifier
 Password requirements: Mot de passe exigences
 characters long: Longs caractères
--- a/forms/account/conf/locale/pt.yml
+++ b/forms/account/conf/locale/pt.yml
@ -1,4 +1,5 @@
 Configuration: Configuração
+Personal information: Dados pessoais
 Username: Nome de usuario
 Password: Palavra-Passe
 Email: E-Mail
@ -9,7 +10,7 @@ Receive invoices by email: Receber facturas por e-mail
 Old password: Palavra-Passe antiga
 New password: Nova Palavra-Passe
 Repeat password: Repetir Palavra-Passe
-Info: Info
+Requirements: Requisitos
 Modify: Modificar
 Password requirements: Requisitos de Palavra-Passe
 characters long: caracteres
--- a/forms/account/conf/style.css
+++ b/forms/account/conf/style.css
@ -6,23 +6,13 @@
 .conf .box
 {
 	max-width: 30em;
-	padding: 2em;
+	padding: 3em;
 }
-.conf .form
-{
-	margin: 0 auto;
-	max-width: 25em;
-}
-.conf .form-group input[type=password]
-{
-	margin-bottom: 0.5em;
-}
-
 .pass-change
 {
 	max-width: 15em;
+	padding: 2.5em;
 }
-
 .pass-info
 {
 	width: 15em;
--- a/forms/account/conf/ui.xml
+++ b/forms/account/conf/ui.xml
@ -29,47 +29,61 @@
 		tip="_Addresses"
 		on-click="onAddressesClick"/>
 	<htk-bar-button
-		icon="preferences"
+		icon="lock_reset"
 		tip="_Change password"
 		on-click="onPassChangeClick"/>
 </div>
 <div id="form" class="conf">
 	<div class="box">
-		<div class="form">
-			<div class="form-group">
-				<label for="user-name"><t>Username</t></label>
-				<htk-text form="user-form" column="name"/>
-			</div>
-			<div class="form-group">
-				<label for="email"><t>Email</t></label>
-				<htk-entry form="user-form" column="email"></htk-entry>
-			</div>
-			<div class="form-group">
-				<label for="nickname"><t>Display name</t></label>
-				<htk-entry form="user-form" column="nickname"/>
-			</div>
-			<div class="form-group">
-				<label for="lang"><t>Language</t></label>
-				<htk-combo form="user-form" column="lang">
-					<db-model property="model">
-						<custom>
-							SELECT code, name FROM language WHERE isActive
-						</custom>
-					</db-model>
-				</htk-combo>
-			</div>
-			<div class="form-group">
-				<label for="mail"><t>Receive invoices by email</t></label>
-				<htk-check form="user-form" column="isToBeMailed"/>
-			</div>
+	<div class="form">
+		<h2><t>Personal information</t></h2>
+		<div class="form-group">
+			<htk-entry
+				placeholder="_Username"
+				disabled="true"
+				form="user-form"
+				column="name"/>
 		</div>
+		<div class="form-group">
+			<htk-entry
+				placeholder="_Email"
+				form="user-form"
+				column="email">
+			</htk-entry>
+		</div>
+		<div class="form-group">
+			<htk-entry
+				placeholder="_Display name"
+				form="user-form"
+				column="nickname"/>
+		</div>
+		<div class="form-group">
+			<htk-combo
+				placeholder="_Language"
+				form="user-form"
+				column="lang">
+				<db-model property="model">
+					<custom>
+						SELECT code, name FROM language WHERE isActive
+					</custom>
+				</db-model>
+			</htk-combo>
+		</div>
+		<div class="form-group">
+			<label>
+				<htk-check form="user-form" column="isToBeMailed"/>
+				<t>Receive invoices by email</t>
+			</label>
+		</div>
+	</div>
 	</div>
 </div>
 <htk-popup
 	id="change-password"
 	modal="true">
 	<div property="child-node" class="htk-dialog pass-change">
-		<div>
+		<div class="form">
+			<h2><t>Change password</t></h2>
 			<input
 				id="old-password"
 				type="password"
@ -88,7 +102,7 @@
 				<t>Modify</t>
 			</button>
 			<button class="thin" on-click="onPassInfoClick">
-				<t>Info</t>
+				<t>Requirements</t>
 			</button>
 			<div class="clear"/>
 		</div>
--- a/forms/admin/connections/style.css
+++ b/forms/admin/connections/style.css
@ -10,11 +10,9 @@
 .action-bar .connections-sum
 {
 	padding: .4em;
-	margin-top: .9em;
-	margin-right: .5em;
 	background-color: #1e88e5;
 	border-radius: 0.1em;
-	box-shadow: 0 0 0.4em #666;
+	box-shadow: 0 0 0.4em rgba(255, 255, 255, .1);
 }

 /* List */
--- a/forms/admin/connections/ui.xml
+++ b/forms/admin/connections/ui.xml
@ -38,15 +38,15 @@
 					<htk-button
 						form="iter"
 						column="id"
-						tip="_Supplant user"
-						icon="incognito"
-						on-click="onChangeUserClick"/>
+						tip="_Access log"
+						icon="history"
+						on-click="onAccessLogClick"/>
 					<htk-button
 						form="iter"
 						column="id"
-						tip="_Access log"
-						icon="gnome"
-						on-click="onAccessLogClick"/>
+						tip="_Supplant user"
+						icon="supervisor_account"
+						on-click="onChangeUserClick"/>
 					<p class="important">
 						<htk-text form="iter" column="nickname"/>
 					</p>
--- a/forms/admin/users/ui.xml
+++ b/forms/admin/users/ui.xml
@ -34,14 +34,14 @@
 						form="iter"
 						column="id"
 						tip="_Access log"
-						icon="gnome"
+						icon="history"
 						on-click="onAccessLogClick"/>
 					<htk-button
 						id="impersonate"
 						form="iter"
 						column="id"
 						tip="_Impersonate user"
-						icon="incognito"
+						icon="supervisor_account"
 						on-click="onChangeUserClick"/>
 					<span id="disabled" class="disabled">
 						<t>Disabled</t>
--- a/forms/admin/visits/ui.xml
+++ b/forms/admin/visits/ui.xml
@ -8,7 +8,7 @@
 		tip="_Refresh"
 		on-click="onRefreshClick"/>
 	<htk-bar-button
-		icon="user-info"
+		icon="visibility"
 		tip="_Connections"
 		on-click="onSessionsClick"/>
 </div>
--- a/forms/agencies/packages/packages.js
+++ b/forms/agencies/packages/packages.js
@ -1,13 +1,11 @@

-Hedera.Packages = new Class
-({
+Hedera.Packages = new Class({
 	Extends: Hedera.Form
 	
-	,onShowClick: function  (column, agencyId)
-	{
-		this.hash.set ({
-			'form': 'agencies/provinces',
-			'agency': agencyId
+	,onShowClick: function(column, agencyId) {
+		this.hash.set({
+			form: 'agencies/provinces',
+			agency: agencyId
 		});
 	}
 });
--- a/forms/agencies/packages/ui.xml
+++ b/forms/agencies/packages/ui.xml
@ -12,7 +12,7 @@
 			</db-model>
 			<htk-column-button
 				column="agency_id"
-				icon="show"
+				icon="search"
 				tip="_ShowByProvince"
 				on-clicked="onShowClick"/>
 			<htk-column-text title="_Agency" column="Agencia"/>
--- a/forms/cms/home/style.css
+++ b/forms/cms/home/style.css
@ -1,70 +1,53 @@

 /* News panel */

-.column
-{
+.column {
 	margin: .5em;
 	max-width: 120em;
 }
-.action-bar button.start-order
-{
-	margin: 1em;
-	padding: .5em 1em;
+.action-bar button.start-order {
 	border: 1px solid white;
 }
-.action-bar button.start-order:hover
-{
+.action-bar button.start-order:hover {
 	background-color: white;
 	color: black;
 }

 /* New */

-.new
-{
+.new {
 	text-align: left;
-	background-color: white;
-	color: #222;
-	border: none;
-	border-radius: 0.1em;
-	box-shadow: 0 0.2em 0.2em rgba(1, 1, 1, 0.2);
 	margin: .5em;
 }
-.new img
-{
+.new img {
 	display: block;
 	margin: auto;
 	width: 100%;
 }
-.new .top
-{
+.new .top {
 	padding: 1.5em;
 	padding-bottom: 1px;
 }
-.new h2
-{
+.new h2 {
 	font-size: 1.6em;
 	color: black;
 	font-weight: normal;
 	padding: 0;
 }
-.new-info
-{
+
+.new-info {
 	font-size: 0.9em;
 	color: #444;
 	text-align: right;
 	margin: 0.8em 0;
 }
-.new-text
-{
+.new-text {
 	margin: 1.5em 0;
 }
-.new-text a
-{
+.new-text a {
 	color: blue;
 	text-decoration: underline;
 }
-.new-text li
-{
+.new-text li {
 	margin: 0.4em 0;
 }
--- a/forms/cms/home/ui.xml
+++ b/forms/cms/home/ui.xml
@ -5,7 +5,7 @@
 <div id="actions" class="catalog-actions">
 	<htk-bar-button
 		class="start-order"
-		icon="new-order"
+		icon="add_shopping_cart"
 		tip="_Start order"
 		on-click="onStartOrderClick"/>
 </div>
@ -21,7 +21,7 @@
 			</db-model>
 			<custom>
 				<div class="masonry-box">
-				<div class="new">
+				<div class="new box">
 					<htk-image
 						directory="news"
 						subdir="full"
--- a/forms/ecomerce/basket/ui.xml
+++ b/forms/ecomerce/basket/ui.xml
@ -4,17 +4,17 @@
 </div>
 <div id="actions">
 	<htk-bar-button
-		icon="ok"
-		tip="_Checkout"
-		on-click="onCheckoutClick"/>
+		icon="settings"
+		tip="_ConfigureOrder"
+		on-click="onConfigureClick"/>
 	<htk-bar-button
-		icon="view-dual"
+		icon="local_florist"
 		tip="_Catalog"
 		on-click="onCatalogClick"/>
 	<htk-bar-button
-		icon="preferences"
-		tip="_ConfigureOrder"
-		on-click="onConfigureClick"/>
+		icon="shopping_cart_checkout"
+		tip="_Checkout"
+		on-click="onCheckoutClick"/>
 </div>
 <div id="form" class="basket">
 	<div class="box">
--- a/forms/ecomerce/catalog/catalog.js
+++ b/forms/ecomerce/catalog/catalog.js
@ -105,7 +105,7 @@ Hedera.Catalog = new Class({
 		});
 		
 		var img = builder.$('image');
-		img.src = 'image/family/light/'+ form.get('code') +'.svg';
+		img.src = 'image/family/black/'+ form.get('code') +'.svg';
 		img.title = form.get('name');
 		img.alt = img.title;
 	}
@ -419,7 +419,7 @@ Vn.Filter = new Class({
 		li.appendChild(button);
 		
 		var icon = new Htk.Icon({
-			icon: 'close',
+			name: 'close',
 			alt: _('Close')
 		});
 		button.appendChild(icon.node);
--- a/forms/ecomerce/catalog/locale/ca.yml
+++ b/forms/ecomerce/catalog/locale/ca.yml
@ -2,7 +2,7 @@ Catalog: Catàleg
 SearchResults: Resultats de cerca
 SelectFamily: Selecciona una família
 Choose filter from right menu: Tria un filtre en el menú de la dreta
-Choose a realm: Tria un regne
+Choose a realm: Tria un categoria
 ArticleNotFound: Artcle no trobat
 ArticleNotAvailable: Article no disponible
 List view: Vista de lista
@ -15,7 +15,7 @@ Warehouse: Magatzem
 Filter by: Filtrar per
 Order by: Ordenar per
 Search: Cercar
-Change: Cambiar
+Modify: Modificar
 Size: Mida
 Realm: Regne
 Family: Família
--- a/forms/ecomerce/catalog/locale/en.yml
+++ b/forms/ecomerce/catalog/locale/en.yml
@ -2,7 +2,7 @@ Catalog: Catalog
 SearchResults: Search results
 SelectFamily: Select family
 Choose filter from right menu: Choose a filter from the right menu
-Choose a realm: Choose a realm
+Choose a realm: Choose a category
 ArticleNotFound: Item not found
 ArticleNotAvailable: Item not available
 List view: List view
@ -15,7 +15,7 @@ Warehouse: Warehouse
 Filter by: Filter by
 Order by: Order by
 Search: Search
-Change: Change
+Modify: Modify
 Size: Size
 Realm: Realm
 Family: Family
--- a/forms/ecomerce/catalog/locale/es.yml
+++ b/forms/ecomerce/catalog/locale/es.yml
@ -2,7 +2,7 @@ Catalog: Catálogo
 SearchResults: Resultados de búsqueda
 SelectFamily: Selecciona una familia
 Choose filter from right menu: Elige un filtro en el menú de la derecha
-Choose a realm: Elige un reino
+Choose a realm: Elige una categoría
 ArticleNotFound: Artículo no encontrado
 ArticleNotAvailable: Artículo no disponible
 List view: Vista de lista
@ -15,7 +15,7 @@ Warehouse: Almacén
 Filter by: Filtrar por
 Order by: Ordenar por
 Search: Buscar
-Change: Cambiar
+Modify: Modificar
 Size: Medida
 Realm: Reino
 Family: Familia
--- a/forms/ecomerce/catalog/locale/fr.yml
+++ b/forms/ecomerce/catalog/locale/fr.yml
@ -2,7 +2,7 @@ Catalog: Catalogue
 SearchResults: Résultats de la recherche
 SelectFamily: Choisissez une famille
 Choose filter from right menu: Choisissez un filtre dans le menu de droite
-Choose a realm: Choisissez un royaume
+Choose a realm: Choisissez une catégorie
 ArticleNotFound: Article non trouvé
 ArticleNotAvailable: Article non disponible
 List view: Liste voir
@ -15,7 +15,7 @@ Warehouse: Entrepôt
 Filter by: Filtrer par
 Order by: Trier par
 Search: Recherche
-Change: Modifier
+Modify: Modifier
 Size: Mesure
 Realm: Famille
 Family: Sous-genre
--- a/forms/ecomerce/catalog/locale/pt.yml
+++ b/forms/ecomerce/catalog/locale/pt.yml
@ -2,7 +2,7 @@ Catalog: Catálogo
 SearchResults: Resultados de busca
 SelectFamily: Seleccione uma família
 Choose filter from right menu: Escolha um filtro no menú da direita
-Choose a realm: Escolha um reino
+Choose a realm: Escolha uma categoria
 ArticleNotFound: Ítem não encontrado
 ArticleNotAvailable: Ítem não disponível
 List view: Ver como lista
@ -15,7 +15,7 @@ Warehouse: Armazém
 Filter by: Filtrar por
 Order by: Ordenar por
 Search: Buscar
-Change: Modificar
+Modify: Modificar
 Size: Medida
 Realm: Reino
 Family: Família
--- a/forms/ecomerce/catalog/style.css
+++ b/forms/ecomerce/catalog/style.css
@ -1,13 +1,12 @@
 .catalog
 {
-	margin-right: 17em;
+	margin-right: 18em;
 }

 /* Topbar */

 .catalog-actions > .htk-search-entry
 {
-	margin-top: .8em;
 	margin-right: .4em;
 }

@ -19,7 +18,7 @@
 	top: 4.4em;
 	bottom: 0;
 	right: 0;
-	width: 17em;
+	width: 18em;
 	overflow: auto;
 	background-color: #fafafa;
 }
@ -34,11 +33,16 @@
 }
 .right-panel .basket-info > button
 {
-	color: #E0F2F1;
+	color: white;
 	margin: 0 auto;
 	display: block;
 	margin-top: .4em;
 }
+.right-panel .basket-info > button:hover
+{
+	background-color: white;
+	color: #60872c;
+}
 .right-panel .basket-info > p
 {
 	margin: 0;
@ -50,7 +54,13 @@
 }
 .right-panel .filter
 {
-	padding: 1em;
+	margin: 1em;
+}
+.right-panel .categories,
+.right-panel .filters,
+.right-panel .order
+{
+	margin: 1.5em 0;
 }
 .right-panel .filters,
 .right-panel .order
@ -71,7 +81,6 @@
 .right-panel h2
 {
 	font-weight: normal;
-	padding: .4em 0;
 	color: #777;
 	font-size: 1.1em;
 }
@ -82,7 +91,7 @@
 .right-panel .realms a
 {
 	display: inline-block;
-	width: 30%;
+	width: 25%;
 	padding: .6em;
 	box-sizing: border-box;
 }
@ -102,7 +111,6 @@
 {
 	margin: 0 auto;
 	margin-bottom: .7em;
-	width: 90%;
 	display: block;
 }
 .vn-filter > ul
@ -444,7 +452,7 @@
 .item-card .footer
 {
 	text-align: center;
-	background-color: #009688;
+	background-color: #1a1a1a;
 	color: white;
 	line-height: 2em;
 	padding: .4em;
@ -489,15 +497,15 @@
 	.right-panel
 	{
 		top: 0;
-		right: -17em;
+		right: -18em;
 		z-index: 20;
 		transition: transform 200ms ease-out;
 		-webkit-transition: transform 200ms ease-out;
 	}
 	.right-panel.show
 	{
-		transform: translateZ(0) translateX(-17em);
-		-webkit-transform: translateZ(0) translateX(-17em);
+		transform: translateZ(0) translateX(-18em);
+		-webkit-transform: translateZ(0) translateX(-18em);
 	}
 	.catalog
 	{
--- a/forms/ecomerce/catalog/ui.xml
+++ b/forms/ecomerce/catalog/ui.xml
@ -94,19 +94,20 @@
 	<h1 id="title-text"><t>Catalog</t></h1>
 </div>
 <div id="actions" class="catalog-actions">
-	<button class="menu" on-click="onShowMenuClick">
-		<img src="image/icon/dark/menu.svg" alt="_Menu"/>
-	</button>
-	<htk-bar-button
-		icon="basket"
-		tip="_ShoppingBasket"
-		on-click="onBasketClick"/>
+	<htk-search-entry
+		param="search"/>
 	<htk-bar-button
 		id="view-button"
 		tip="_Switch view"
+		icon="format_list_bulleted"
 		on-click="onSwitchViewClick"/>
-	<htk-search-entry
-		param="search"/>
+	<htk-bar-button
+		icon="shopping_cart_checkout"
+		tip="_ShoppingBasket"
+		on-click="onBasketClick"/>
+	<button class="menu" on-click="onShowMenuClick">
+		<img src="image/icon/dark/menu.svg" alt="_Menu"/>
+	</button>
 </div>
 <div id="form" class="catalog">
 	<div id="main" class="main">
@ -176,7 +177,7 @@
 			<htk-text form="basket" column="agency"/>
 		</p>
 		<button class="thin" on-click="onConfigureClick">
-			<t>Change</t>
+			<t>Modify</t>
 		</button>
 	</div>
 	<div class="filter">
@ -462,14 +463,14 @@
 		<div class="footer">
 			<button on-click="onEraseClick" title="_Erase" class="erase">
 				<htk-icon
-					icon="delete"
+					name="delete"
 					theme="dark"
 					alt="_Erase"/>
 			</button>
 			<htk-text id="amount"/>
 			<button on-click="onConfirmClick" title="_Confirm" class="confirm">
 				<htk-icon
-					icon="ok"
+					name="done"
 					theme="dark"
 					alt="_Confirm"/>
 			</button>
--- a/forms/ecomerce/checkout/style.css
+++ b/forms/ecomerce/checkout/style.css
@ -1,15 +1,12 @@
-.checkout
-{
+.checkout {
 	padding: 1em;
 	max-width: 40em;
 	margin: 0 auto;
 }
-.checkout .bar
-{
+.checkout .bar {
 	margin-bottom: 1em;
 }
-.checkout .form
-{
+.checkout .form {
 	max-width: 40em;
 	padding: 4em 2em;
 }
@ -18,67 +15,54 @@

 .answers button,
 .answers p,
-.radio > div
-{
+.radio > div {
 	font-size: 1.4em;
 }
-.answers .htk-select
-{
+.answers .htk-select {
 	max-width: 10em;
 	display: block;
 	margin: 0 auto;
 	font-size: 1.6em;
 	height: 1.8em;
 }
-.answers p
-{
+.answers p {
 	margin: 0.3em 0;
 }
-.target
-{
+.target {
 	max-width: 28em;
 	margin: 0 auto;
 }
-.address
-{
+.address {
 	border-radius: 0.1em;
 	padding: 0.6em 1.4em;
 }
-.address.selected
-{
+.address.selected {
 	background-color: rgba(1, 1, 1, .1);
 }
-.address:hover
-{
+.address:hover {
 	cursor: pointer;
 	background-color: rgba(1, 1, 1, .05);
 }
-.address p.consignee
-{
+.address p.consignee {
 	font-weight: bold;
 }
-.radio
-{
+.radio {
 	max-width: 20em;
 	margin: 0 auto;
 }
-.radio > div
-{
+.radio > div {
 	padding: 0.5em;
 }
-.thin-calendar
-{
+.thin-calendar {
 	width: inherit;
 	max-width: 24em;
 	margin: 0 auto;
-    box-shadow: 0 0.1em 0.3em #ccc;
+	box-shadow: .05em .05em .2em rgba(0, 0, 0, .2);
 }
-.thin-calendar tr > th
-{
+.thin-calendar tr > th {
 	color: white;
 }
-.htk-assistant .thin
-{
+.htk-assistant .thin {
 	float: right;
 }

--- a/forms/ecomerce/orders/style.css
+++ b/forms/ecomerce/orders/style.css
@ -11,7 +11,6 @@

 .balance
 {
-	margin-top: 1.2em;
 	margin-right: .5em;
 }
 .balance > *
--- a/forms/ecomerce/orders/ui.xml
+++ b/forms/ecomerce/orders/ui.xml
@ -3,17 +3,6 @@
 	<h1><t>LastOrders</t></h1>
 </div>
 <div id="actions">
-	<htk-bar-button
-		icon="basket"
-		tip="_ShoppingBasket"
-		show-text="false"
-		on-click="onBasketClick"/>
-	<htk-bar-button
-		id="pay-button"
-		icon="pay"
-		tip="_MakePayment"
-		show-text="false"
-		on-click="onPayButtonClick"/>
 	<div class="balance">
 		<span class="label">
 			<t>Balance:</t>
@ -38,6 +27,15 @@
 			class="info"
 			alt="Info"/>
 	</div>
+	<htk-bar-button
+		id="pay-button"
+		icon="payments"
+		tip="_MakePayment"
+		on-click="onPayButtonClick"/>
+	<htk-bar-button
+		icon="shopping_cart"
+		tip="_ShoppingBasket"
+		on-click="onBasketClick"/>
 </div>
 <div id="form" class="orders">
 	<div class="box confirmed">
--- a/forms/news/new/ui.xml
+++ b/forms/news/new/ui.xml
@ -25,14 +25,14 @@
 	<h1><t>AddEditNew</t></h1>
 </div>
 <div id="actions">
-	<htk-bar-button
-		icon="ok"
-		tip="_Accept"
-		on-click="onAcceptClick"/>
 	<htk-bar-button
 		icon="close"
 		tip="_Return"
 		on-click="onReturnClick"/>
+	<htk-bar-button
+		icon="check"
+		tip="_Accept"
+		on-click="onAcceptClick"/>
 </div>
 <div id="form" class="new">
 	<div class="box">
--- a/image/family/black/accessory.svg
+++ b/image/family/black/accessory.svg
@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 40 40"
+   xml:space="preserve"
+   sodipodi:docname="accessory.svg"
+   width="40"
+   height="40"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs9" /><sodipodi:namedview
+   id="namedview7"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   inkscape:zoom="3.595"
+   inkscape:cx="100"
+   inkscape:cy="99.860918"
+   inkscape:window-width="1920"
+   inkscape:window-height="1011"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<style
+   type="text/css"
+   id="style2">
+	.st0{fill:#1E1E1C;}
+	.st1{fill:none;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+</style>
+<path
+   class="st0"
+   d="M 37.313228,1.0829325 H 2.714188 C 1.233722,1.0829325 0,2.2892385 0,3.7971205 v 5.099383 c 0,1.4804655 1.206306,2.7141875 2.714188,2.7141875 h 2.083619 v 0.08225 L 7.978067,33.8451 c 0.411241,2.933516 2.63194,5.071968 5.236464,5.071968 h 13.543522 c 2.63194,0 4.825223,-2.138452 5.236464,-5.071968 l 3.207676,-22.234407 h 2.083619 C 38.766278,11.610693 40,10.404387 40,8.8965055 v -5.126801 c 0,-1.480466 -1.206306,-2.686772 -2.686772,-2.686772 z m -4.386566,10.6374225 -3.152844,21.79575 c -0.274161,1.809459 -1.535298,3.125429 -3.015765,3.125429 H 13.241947 c -1.480467,0 -2.76902,-1.31597 -3.015765,-3.125429 L 7.073338,11.583275 h 25.908156 z m 4.825223,-2.8238515 c 0,0.246744 -0.191912,0.466073 -0.466073,0.466073 H 2.714188 c -0.246745,0 -0.466073,-0.191913 -0.466073,-0.466073 v -5.126799 c 0,-0.246745 0.191912,-0.466073 0.466073,-0.466073 h 34.59904 c 0.246745,0 0.466073,0.191912 0.466073,0.466073 v 5.126799 z"
+   id="path4"
+   style="stroke-width:0.27416;fill:#1a1a1a;fill-opacity:1" />
+</svg>
--- a/image/family/black/artificial.svg
+++ b/image/family/black/artificial.svg
@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 40 40"
+   xml:space="preserve"
+   sodipodi:docname="artificial.svg"
+   width="40"
+   height="40"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs13" /><sodipodi:namedview
+   id="namedview11"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   inkscape:zoom="3.595"
+   inkscape:cx="100"
+   inkscape:cy="99.860918"
+   inkscape:window-width="1920"
+   inkscape:window-height="1011"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<style
+   type="text/css"
+   id="style2">
+	.st0{fill:#1E1E1C;}
+	.st1{fill:none;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+</style>
+<g
+   id="g8"
+   transform="matrix(0.26820887,0,0,0.26820887,-6.5074179,-6.820887)"
+   style="fill:#1a1a1a;fill-opacity:1">
+	<path
+   class="st0"
+   d="m 113.7,83.3 c -4.1,0 -8.2,0 -12.4,0 -5.2,0 -10.4,0 -15.6,0 h -2 c -1.5,0 -1.8,0.2 -1.8,1.8 v 30.2 c 0,0.6 0,0.9 0.3,1.2 0.3,0.3 0.6,0.3 1.3,0.3 h 30.2 c 1.5,0 1.7,-0.3 1.7,-1.7 0,-10 0,-20.1 0,-30.1 0.1,-1.5 -0.2,-1.7 -1.7,-1.7 z m -6.4,17.5 v 7.6 h -0.6 c -1.3,0 -2.6,0 -3.9,0 h -1.7 -4.5 c -1.9,0 -3.9,0 -5.8,0 H 90.4 L 90.3,108 v 0 c 0,-5.5 0,-10.8 0,-16.2 v -0.4 h 0.5 c 6.4,0 11.4,0 16,0 h 0.3 l 0.2,0.3 c 0,0 0,0.1 0,0.2 0,3.1 0,6 0,8.9 z"
+   id="path4"
+   style="fill:#1a1a1a;fill-opacity:1" />
+	<path
+   class="st0"
+   d="m 145.9,158.2 25.8,-44.7 c 0.3,-0.5 0.6,-1 0.9,-1.6 l 0.8,-1.4 L 155.2,100 173.4,89.5 173,88.7 c -0.1,-0.3 -0.3,-0.5 -0.4,-0.8 L 146.3,42.1 c -0.4,-0.8 -0.8,-1.1 -1.1,-1.2 -0.3,-0.1 -0.8,0.1 -1.5,0.5 l -4.6,2.6 c -3.8,2.2 -7.5,4.3 -11.3,6.5 L 127.1,51 V 31.7 c 0,-0.7 0,-1.1 -0.3,-1.4 C 126.5,30 126.2,30 125.4,30 H 72.5 c -0.1,0 -0.3,0 -0.5,0 -0.5,0 -0.8,0.1 -1.1,0.3 -0.2,0.2 -0.3,0.6 -0.3,1 0,0.2 0,0.4 0,0.6 v 0.4 3.6 c 0,4.8 0,9.6 0,14.4 V 51 L 52.9,40.8 52.4,40.7 52.1,41.1 c -0.1,0.1 -0.2,0.2 -0.3,0.3 L 25.1,87.5 c -1,1.7 -0.9,2 0.8,3 L 42.3,100 32,105.8 c -2.3,1.3 -4.5,2.6 -6.8,3.9 -0.4,0.2 -0.8,0.5 -0.9,1 -0.1,0.3 0,0.7 0.3,1.1 0.1,0.2 0.2,0.3 0.3,0.5 l 25.9,45 c 0.3,0.6 0.7,1.2 1.2,1.8 l 0.3,0.3 18.1,-10.4 v 2.5 c 0,1.6 0,3.1 0,4.6 l -0.1,12.1 c 0,1.5 0.2,1.7 1.6,1.7 h 2.5 c 1.6,0 3.1,0.1 4.7,0.1 h 45.1 c 2.4,0 2.6,-0.2 2.6,-2.7 v -17.4 -0.8 l 0.6,0.3 c 2.8,1.6 5.6,3.2 8.3,4.8 l 1.9,1.1 c 2.1,1.2 4.2,2.4 6.3,3.6 0.2,0.1 0.7,0.4 1.1,0.2 0.4,0 0.6,-0.2 0.9,-0.9 z m -3.8,-10 -0.3,-0.2 -22.7,-13.1 -0.2,0.5 c -0.3,0.6 -0.3,1.1 -0.2,1.6 v 0.3 c 0,6.4 0,12.8 0,19.3 v 4.1 c 0,0.2 0,0.4 0,0.7 v 0.4 h -40 v -0.7 c 0,-1.8 0,-3.6 0,-5.3 l 0.1,-20.9 -0.7,0.3 c -1.9,0.8 -3.5,1.8 -5.2,2.8 -0.9,0.5 -1.8,1 -2.6,1.5 -1.6,0.9 -3.2,1.8 -5,2.9 l -10,5.8 -19.9,-34.6 14.6,-8.4 9,-5.2 -6.5,-3.7 -17.2,-10 0.3,-0.6 19.2,-33.1 c 0.1,-0.2 0.2,-0.3 0.3,-0.5 l 0.2,-0.3 0.5,0.2 c 1.3,0.8 2.7,1.6 4,2.4 l 17.4,10.1 c 0.3,0.2 0.7,0.4 1.2,0.1 l 0.3,-0.2 c 0.2,-0.3 0.2,-0.7 0.2,-1.2 0,-0.9 0,-1.7 0,-2.5 0,-0.8 0,-1.5 0,-2.3 L 79,38.2 h 0.6 c 2.1,0 4.2,0 6.2,0.1 h 0.3 c 2.3,0.1 4.2,0.1 5.9,0.1 5.8,0 11.4,0 18.1,0 h 7.9 0.1 c 0.1,0 0.2,0 0.3,0 h 0.3 v 27.1 l 23.6,-13.5 19.9,34.6 -23.5,13.5 23.5,13.6 -0.2,0.3 z"
+   id="path6"
+   style="fill:#1a1a1a;fill-opacity:1" />
+</g>
+</svg>
--- a/image/family/black/flower.svg
+++ b/image/family/black/flower.svg
@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 40 40"
+   xml:space="preserve"
+   sodipodi:docname="flower.svg"
+   width="40"
+   height="40"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs13"><linearGradient
+     inkscape:collect="always"
+     id="linearGradient981"><stop
+       style="stop-color:#000000;stop-opacity:1;"
+       offset="0"
+       id="stop977" /><stop
+       style="stop-color:#000000;stop-opacity:0;"
+       offset="1"
+       id="stop979" /></linearGradient><linearGradient
+     inkscape:collect="always"
+     xlink:href="#linearGradient981"
+     id="linearGradient983"
+     x1="34.739397"
+     y1="99.599534"
+     x2="165.73375"
+     y2="99.599534"
+     gradientUnits="userSpaceOnUse" /></defs><sodipodi:namedview
+   id="namedview11"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   inkscape:zoom="4.365"
+   inkscape:cx="102.29095"
+   inkscape:cy="63.459336"
+   inkscape:window-width="1920"
+   inkscape:window-height="1011"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<style
+   type="text/css"
+   id="style2">
+	.st0{fill:#1E1E1C;}
+	.st1{fill:none;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+</style>
+<g
+   id="g8"
+   transform="matrix(0.28530481,0,0,0.28530481,-8.5979763,-8.4162261)"
+   style="stroke:none;stroke-opacity:1;fill:#1a1a1a;fill-opacity:1">
+	<path
+   class="st0"
+   d="m 100.1,76.9 h -0.5 c -6.1,0 -11.8,2.3 -16.1,6.5 -4.4,4.3 -6.8,10.1 -6.8,16.3 0,6.2 2.4,12 6.7,16.2 4.2,4.2 10,6.5 15.9,6.5 h 0.3 0.3 c 5.9,0 11.6,-2.4 15.9,-6.5 4.3,-4.2 6.7,-10 6.7,-16.2 0,-12.5 -9.9,-22.5 -22.4,-22.8 z M 89.2,89.1 c 2.7,-2.7 6.4,-4.2 10,-4.2 h 0.4 c 3.8,-0.1 7.6,1.4 10.5,4.2 2.9,2.8 4.5,6.6 4.5,10.8 0,8.2 -6.8,14.9 -15,14.9 h -0.1 c -8,0 -14.8,-6.8 -14.8,-14.9 -0.1,-4.1 1.5,-8 4.5,-10.8 z"
+   id="path4"
+   style="stroke:none;stroke-opacity:1;fill:#1a1a1a;fill-opacity:1" />
+	<path
+   class="st0"
+   d="m 157.2,102 -0.2,-0.2 0.2,-0.2 c 0.1,-0.1 0.2,-0.2 0.3,-0.3 6.1,-6.5 8.9,-14.4 8.1,-23.2 -0.7,-7.9 -4.1,-14.5 -10,-19.7 -5.1,-4.4 -10.9,-6.8 -17.3,-7.3 v 0 h -0.4 c -1.7,-0.1 -3.4,0 -5.2,0.1 -0.8,0.1 -1.5,0.1 -2.2,0.2 h -0.1 c -0.1,-0.1 -0.2,-0.4 -0.4,-1 -1.7,-5.4 -4.7,-10 -8.9,-13.6 -6.8,-5.8 -14.8,-8.2 -23.6,-7 -6.5,0.8 -12.3,3.7 -17.1,8.5 -3,3 -5.3,6.6 -6.8,10.7 L 73.4,49.5 73,49.3 C 68.6,48.2 64.2,48.2 59.9,49 53.3,50.4 47.8,53.5 43.6,58.4 37.1,66.1 34.8,75 36.9,85 c 1,4.6 3,8.7 6.1,12.4 L 43.3,97.8 43,98 c -2.7,2.8 -4.8,6 -6.2,9.6 v 0 c 0,0.1 -4.5,9.7 -0.2,21.5 0,0.1 0,0.1 0.1,0.2 0,0.1 0.1,0.2 0.1,0.4 0.4,1 0.8,2 1.3,2.9 0.4,0.9 0.8,1.5 1.1,2 3.3,5.4 8.2,9.4 14.4,11.8 5,2 10.4,2.5 16,1.6 l 0.3,-0.1 0.2,0.5 c 0.9,3.2 2.3,6.1 4.1,8.6 4.4,6.2 10.2,10.2 17.4,12 0.8,0.2 3.6,0.7 7.3,0.7 2.3,0 4.9,-0.2 7.6,-0.9 l 0.3,-0.1 c 0.3,-0.1 0.5,-0.1 0.7,-0.2 0.1,0 0.2,-0.1 0.4,-0.1 l 0.2,-0.1 c 4.2,-1.4 8.1,-3.7 11.5,-7 3.1,-3 5.5,-6.6 7,-10.7 0.1,-0.2 0.1,-0.3 0.2,-0.5 l 0.1,-0.2 h 0.2 c 0.1,0 0.3,0.1 0.5,0.1 3,0.7 5.8,0.9 8.6,0.8 4.3,-0.2 8.4,-1.3 12.1,-3.3 6,-3.2 10.5,-7.8 13.3,-13.9 2.9,-6.4 3.5,-13.1 1.8,-20.1 -1.3,-4.1 -3.3,-8.1 -6.2,-11.5 z M 149,98.3 c -0.8,0.6 -1.6,1.2 -2.3,1.7 l -1.7,1.2 0.4,0.5 c 0.7,0.9 1.6,1.6 2.3,2.2 0.4,0.3 0.8,0.6 1.1,1 4.6,4.2 7,9.2 7.4,15.3 0.3,5.9 -1.5,11.1 -5.3,15.4 -4.8,5.4 -10.8,7.9 -18,7.5 -2.6,-0.2 -5.2,-0.9 -8.1,-2.2 -0.6,-0.2 -1.1,-0.5 -1.7,-0.7 l -1.9,-0.8 -1.1,5.3 c -1.9,9.3 -9.8,16.4 -19.4,17.3 -0.7,0.1 -1.4,0.1 -2.1,0.1 -5,0 -9.9,-1.8 -13.9,-5.1 -3.9,-3.3 -6.6,-7.9 -7.5,-12.9 -0.2,-1.2 -0.4,-2.5 -0.5,-3.7 l -0.1,-0.9 c 0,-0.4 -0.1,-1 -0.5,-1.5 l -0.3,-0.3 -1.8,0.6 c -0.9,0.3 -1.8,0.6 -2.7,0.9 -8.9,3.1 -19,-0.1 -24.6,-7.8 -2.6,-3.6 -4,-7.6 -4.1,-11.8 -0.3,-7.8 2.9,-14.2 9.4,-19 L 55.4,98 55,97.7 c -0.7,-0.7 -1.5,-1.4 -2.2,-2 -0.9,-0.7 -1.7,-1.5 -2.5,-2.3 -4,-4.2 -6.1,-9.1 -6.2,-14.8 -0.1,-5.4 1.6,-10.2 5,-14.3 3.5,-4.2 8,-6.8 13.4,-7.7 4.2,-0.7 8.4,-0.1 12.6,1.8 0.8,0.4 1.6,0.7 2.6,1.1 0.6,0.2 0.9,0.4 1.3,0.2 0.4,-0.2 0.5,-0.6 0.6,-1.2 0.1,-0.6 0.2,-1.2 0.3,-1.8 v -0.1 c 0.2,-1.2 0.4,-2.3 0.8,-3.4 2.8,-8.5 8.6,-13.7 17.2,-15.3 7.4,-1.4 13.9,0.7 19.5,6.3 3.5,3.5 5.6,8 6.1,13.2 0.1,0.8 0.2,1.6 0.3,2.4 l 0.2,2 0.6,-0.1 c 1,-0.2 1.9,-0.5 2.7,-0.8 l 0.1,-0.1 c 0.3,-0.1 0.5,-0.2 0.8,-0.3 8,-2.8 15.3,-1.5 21.8,3.8 4.6,3.8 7.2,8.8 7.7,14.8 0.6,7.7 -2.4,14.2 -8.7,19.2 z"
+   id="path6"
+   style="stroke:none;stroke-opacity:1;fill:#1a1a1a;fill-opacity:1" />
+</g>
+</svg>
--- a/image/family/black/fruit.svg
+++ b/image/family/black/fruit.svg
@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 40 40"
+   xml:space="preserve"
+   sodipodi:docname="fruit.svg"
+   width="40"
+   height="40"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs9" /><sodipodi:namedview
+   id="namedview7"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   inkscape:zoom="3.595"
+   inkscape:cx="100"
+   inkscape:cy="99.860918"
+   inkscape:window-width="1920"
+   inkscape:window-height="1011"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<style
+   type="text/css"
+   id="style2">
+	.st0{fill:#1E1E1C;}
+	.st1{fill:none;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+</style>
+<path
+   class="st0"
+   d="m 4.6155643,32.24963 c 1.033877,0 2.041908,0.232623 2.998243,0.67202 0.18093,0.07754 0.387705,0.180928 0.568633,0.284316 l 0.103387,0.05169 c 1.9902137,0.982183 4.2388957,1.473275 6.4875777,1.473275 1.68005,0 3.3601,-0.284317 4.936762,-0.852949 h 0.02585 l 0.05169,0.02585 c 1.60251,0.568632 3.282559,0.852948 4.988456,0.852948 0.05169,0 0.103387,0 0.155081,0 h 0.103388 c 0.02585,0 0.02585,0 0.05169,0 0.02585,0 0.05169,0 0.07754,0 h 0.02585 c 3.980425,-0.103388 7.676536,-1.75759 10.468003,-4.600753 2.791467,-2.843161 4.316438,-6.616811 4.342284,-10.597237 0,-0.284317 -0.103387,-0.542786 -0.310162,-0.749561 -0.206776,-0.206776 -0.465245,-0.310163 -0.723717,-0.310163 h -9.434126 l -0.02585,-0.103388 c -0.28431,-2.50715 -1.188952,-4.910914 -2.662226,-6.952821 -0.232622,-0.336009 -0.516938,-0.697866 -0.852948,-1.059723 l -0.05169,-0.05169 0.05169,-0.07754 c 1.550815,-1.8351313 1.628356,-3.1274773 1.628356,-3.3859473 0,-0.542785 -0.413551,-0.982183 -0.982183,-1.008029 0,0 0,0 0,0 -0.516938,0 -1.00803,0.439397 -1.059723,0.956336 0,0 -0.07754,0.74956 -1.03388,1.938519 l -0.02585,0.02585 -0.07754,0.02585 -0.05169,-0.02585 C 21.493607,6.2993277 17.797496,5.0586757 13.997999,5.2654507 10.04342,5.4722267 6.4248503,7.2298167 3.7884643,10.176366 c -4.03211997,4.497365 -4.936762,10.933249 -2.274529,16.361101 l 0.05169,0.103388 c 0.103387,0.180931 0.206775,0.361857 0.310163,0.594479 0.568632,1.240652 0.775407,2.610541 0.594479,3.954581 -0.05169,0.310163 0.05169,0.646172 0.284316,0.878795 0.232622,0.232622 0.568632,0.33601 0.878795,0.284316 0.310163,-0.07754 0.646173,-0.103388 0.982183,-0.103388 z m 33.2391427,-11.682808 0.07754,0.07754 v 0.05169 c -0.232622,2.636385 -1.240652,5.117691 -2.920704,7.185445 l -0.02585,0.02585 h -0.103388 l -0.05169,-0.02585 -5.221077,-5.22108 c -0.387704,-0.387704 -1.033876,-0.439397 -1.42158,-0.103387 -0.232622,0.180928 -0.361859,0.465244 -0.361859,0.74956 0,0.284316 0.10339,0.568635 0.310162,0.77541 l 5.324467,5.324465 v 0.05169 0.05169 l -0.02585,0.02585 c -2.016059,1.757593 -4.497363,2.843163 -7.133751,3.127479 h -0.05169 l -0.07754,-0.05169 v -0.05169 -8.271015 c 0,-0.568632 -0.413551,-1.033877 -0.930489,-1.08557 -0.284316,-0.02585 -0.568632,0.07754 -0.775408,0.258469 -0.206775,0.206775 -0.33601,0.465244 -0.33601,0.74956 v 8.426097 l -0.07754,0.07754 h -0.05169 c -1.266499,-0.07754 -2.481304,-0.33601 -3.670265,-0.749561 -0.129232,-0.07754 -0.232622,-0.10339 -0.336009,-0.129237 -1.240652,-0.491089 -2.377916,-1.163111 -3.411793,-1.990212 l -0.02585,-0.02585 v -0.103382 l 0.02585,-0.05169 5.557089,-5.557086 c 0.387704,-0.387704 0.439398,-1.033879 0.103385,-1.421583 -0.180926,-0.232622 -0.465242,-0.361857 -0.749558,-0.361857 -0.284316,-0.02585 -0.568635,0.103388 -0.77541,0.310163 l -5.660475,5.660477 h -0.05169 -0.05169 l -0.02585,-0.02585 c -1.860989,-2.119449 -2.972406,-4.729988 -3.230875,-7.547301 v -0.05169 l 0.05169,-0.07754 h 0.05169 26.053699 z m -34.5056417,5.014302 -0.02585,-0.02585 C 1.0745333,20.90283 1.8499413,15.397433 5.3134283,11.546242 7.5879573,9.0132437 10.689589,7.5141217 14.101382,7.3331937 c 3.385947,-0.180928 6.668506,0.956336 9.201504,3.2308653 0.129234,0.103388 0.232622,0.206776 0.361857,0.33601 l 0.180931,0.180929 c 0.155079,0.155081 0.310163,0.310163 0.465242,0.491091 l 0.02585,0.02585 c 0.310163,0.33601 0.594479,0.723714 0.878795,1.085571 1.214805,1.68005 1.990212,3.670263 2.248681,5.738017 v 0.05169 l -0.05169,0.07754 h -0.05169 -16.774653 c -0.284316,0 -0.542785,0.103388 -0.7237137,0.310163 -0.206775,0.206776 -0.310163,0.465245 -0.310163,0.749562 0,5.221077 2.6363857,10.002759 7.0562097,12.845919 l 0.05169,0.02585 -0.02585,0.155081 -0.07754,0.02585 c -0.620326,0.07754 -1.214806,0.129231 -1.835132,0.129231 -1.912672,0 -3.77365,-0.413548 -5.5053937,-1.266498 h -0.02585 c -0.232619,-0.15508 -0.516934,-0.284314 -0.749557,-0.387702 -1.188958,-0.568632 -2.455457,-0.852948 -3.747804,-0.852948 h -0.103388 v -0.103388 c 0,-1.292348 -0.310163,-2.558847 -0.827101,-3.721958 -0.129235,-0.361857 -0.258469,-0.620326 -0.413551,-0.878795 z"
+   id="path4"
+   style="stroke-width:0.258469;fill:#1a1a1a;fill-opacity:1" />
+</svg>
--- a/image/family/black/greenery.svg
+++ b/image/family/black/greenery.svg
@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 40 40"
+   xml:space="preserve"
+   sodipodi:docname="greenery.svg"
+   width="40"
+   height="40"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs9" /><sodipodi:namedview
+   id="namedview7"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   inkscape:zoom="3.595"
+   inkscape:cx="100"
+   inkscape:cy="99.860918"
+   inkscape:window-width="1920"
+   inkscape:window-height="1011"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<style
+   type="text/css"
+   id="style2">
+	.st0{fill:#1E1E1C;}
+	.st1{fill:none;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+</style>
+<path
+   class="st0"
+   d="M 34.045254,21.098493 C 33.702189,16.753004 30.814725,12.321749 25.46863,7.9190818 21.15173,4.3740778 16.405999,1.8582678 14.54773,0.94342876 l -0.02859,-0.05718 h -0.02859 l -0.02859,-0.02859 c -0.428827,-0.228707 -0.714715,-0.343062 -0.800481,-0.400239 L 12.575107,-2.4007925e-7 12.031921,1.0577838 C 5.4279214,14.065662 4.1700164,23.642891 8.2867954,29.503584 c 3.6307706,5.174562 10.2919476,5.946458 13.9227186,5.946458 0.571774,0 1.114961,-0.02859 1.600969,-0.05718 h 0.05718 l 0.02859,0.05718 c 0.886252,1.572381 1.743914,2.944641 2.601576,4.088191 0.200121,0.257299 0.486009,0.428831 0.829074,0.45742 0.343065,0.02859 0.68613,-0.08577 0.943428,-0.285888 l 0.02859,-0.02859 c 0.486009,-0.428832 0.543186,-1.14355 0.142944,-1.658148 -0.743308,-1.000606 -1.543792,-2.201333 -2.315689,-3.602181 l -0.05718,-0.08577 0.08577,-0.05718 c 5.631983,-4.031013 8.262147,-8.462268 7.890494,-13.179411 z M 22.466812,32.99141 c -0.05718,0 -0.114355,0 -0.200121,0 -7.433073,0 -10.69219,-3.058995 -11.950095,-4.888675 -3.1733496,-4.54561 -2.3156876,-12.493281 2.51581,-22.9567612 l 0.114355,-0.285888 0.08577,0.285888 c 1.686736,6.4610562 5.145974,18.6684502 9.520052,27.6739042 l 0.08577,0.142944 z m 2.601576,-0.943428 -0.114355,0.08577 -0.05718,-0.114355 C 20.608544,23.271238 17.092128,10.949489 15.376804,4.4026668 l -0.05718,-0.22871 0.22871,0.114355 c 2.630165,1.458026 6.461056,3.802303 9.720173,6.7469432 3.945247,3.516416 6.060814,6.975654 6.318113,10.291948 0.285887,3.659359 -1.915446,7.29013 -6.518234,10.720779 z"
+   id="path4"
+   style="stroke-width:0.285887;fill:#1a1a1a;fill-opacity:1" />
+</svg>
--- a/image/family/black/handmade.svg
+++ b/image/family/black/handmade.svg
@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 40 40"
+   xml:space="preserve"
+   sodipodi:docname="handmade.svg"
+   width="40"
+   height="40"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs13" /><sodipodi:namedview
+   id="namedview11"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   inkscape:zoom="3.595"
+   inkscape:cx="100"
+   inkscape:cy="99.860918"
+   inkscape:window-width="1920"
+   inkscape:window-height="1011"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<style
+   type="text/css"
+   id="style2">
+	.st0{fill:#1E1E1C;}
+	.st1{fill:none;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+</style>
+<g
+   id="g8"
+   transform="matrix(0.28579156,0,0,0.28579156,-8.7130268,-8.5559862)"
+   style="fill:#1a1a1a;fill-opacity:1">
+	<path
+   class="st0"
+   d="m 165,128.6 c 1.6,-6.6 2,-12.7 1.5,-18.7 -0.6,-5.6 -2,-10.4 -4.5,-14.8 -4.2,-7.5 -10.6,-12.8 -19,-15.5 -1,-0.3 -2,-0.6 -3.1,-0.8 l -1.8,-0.4 1.9,-0.3 c 1.4,-0.2 2.8,-0.5 4.1,-0.7 l 0.7,-0.1 c 4.4,-0.8 8.9,-1.6 13.3,-2.9 3.3,-1 6.2,-2.7 8.8,-4.5 l 0.8,-0.6 -0.7,-0.7 c -0.6,-0.6 -1.3,-1.3 -1.9,-1.9 -2,-2 -4,-4 -6.2,-5.8 -7.8,-6.3 -15,-9.6 -22.9,-10.6 -5.7,-0.7 -11.2,-0.1 -16.2,1.9 -1.6,0.6 -3.1,1.4 -4.2,2 l -0.3,0.2 -0.2,-0.3 c -1.2,-2.2 -2.8,-4.2 -4.9,-6 -4.1,-3.4 -9,-5 -14.7,-4.6 H 95.1 L 95,43.1 C 94,40.3 92.4,37.8 90.1,35.6 83.4,29.1 73.3,28.1 65.4,33.1 62.1,35.2 59.6,38 58,41.6 L 57.8,42.1 57.3,42 c -1.9,-0.3 -3.8,-0.3 -5.9,0 -4.9,0.6 -9.5,3.2 -12.8,7.2 -3.5,4.3 -5,9.7 -4.3,15.3 0.4,3.4 1.6,6.4 3.5,9.1 0,0.1 0.1,0.1 0.1,0.1 l 0.1,0.2 -0.2,0.3 c -3.4,4.2 -4.9,8.9 -4.5,14.2 0.5,6.8 3.7,12.2 9.6,15.9 3.5,2.3 7.7,3.2 12.3,2.8 l 0.3,-0.1 0.1,0.3 c 1.2,3.4 3.2,6.2 5.8,8.4 3.4,2.9 7.2,4.4 11.3,4.7 0.3,0 0.4,0.1 0.7,0.5 l 6.5,8.8 c 2.5,3.3 5,6.8 7.5,10.2 0.5,0.7 0.5,1.1 0.3,1.6 -0.4,0.9 -0.6,1.9 -0.9,2.7 v 0.1 c -0.1,0.4 -0.2,0.8 -0.3,1.2 l -2,6.5 c -1.3,4.1 -2.5,8.2 -3.8,12.2 -0.5,1.6 -0.3,3 0.4,4.1 0.8,1.1 2.1,1.6 3.8,1.6 H 109 c 1,0 2,0 3,0 2.7,0 5.4,0 8.1,0 1.2,0 2.2,-0.3 3,-1 1.7,-1.5 1.5,-3.4 1,-4.9 l -1.8,-5.9 c -1.7,-5.6 -3.4,-11.3 -5.1,-17.1 -0.1,-0.5 -0.1,-0.8 0.2,-1.3 4.3,-6.8 8.5,-13.7 12.7,-20.4 l 5.2,-8.3 c 0.2,-0.3 0.4,-0.7 0.7,-1 l 0.3,-0.4 7.9,9.1 c 3.1,3.6 6.4,7.4 10,10.7 2.5,2.3 5.5,3.8 8.4,5.2 l 0.9,0.4 0.7,-2.9 c 0.2,-1.2 0.5,-2.3 0.8,-3.5 z M 113.9,75 c 2.4,-3.5 3.6,-7.4 3.5,-11.7 0,-0.5 0.1,-0.7 0.6,-1 5.2,-3.3 10.5,-4.6 16.5,-4 5.4,0.6 10.5,2.7 16,6.5 0.7,0.5 1.5,1 2.3,1.7 l 0.6,0.5 -0.7,0.2 c -1.5,0.4 -3,0.7 -4.3,0.9 -3.1,0.6 -6.1,1.1 -9.1,1.6 -4,0.7 -8.1,1.4 -12.2,2.3 -3.5,0.7 -8.1,1.8 -12.7,3.5 l -1.1,0.4 z m -39.6,37.4 c -2.9,0 -5.7,-1.1 -7.9,-3.3 -2.2,-2.1 -3.5,-4.8 -3.8,-8.2 -0.1,-0.7 -0.1,-1.3 -0.2,-2 L 62.2,97 H 61.3 C 60.1,97.1 59,97.6 58,98 l -0.4,0.2 c -3,1.2 -6.4,1.1 -9.3,-0.3 -3,-1.4 -5.4,-4.1 -6.4,-7.3 -1.5,-4.7 0.2,-10 4.2,-13 l 4,-3 -0.5,-0.7 C 49,73 48.2,72.4 47.4,71.8 l -0.1,-0.1 c -0.2,-0.2 -0.5,-0.4 -0.7,-0.5 -3,-2.5 -4.5,-5.7 -4.4,-9.3 0.1,-5.3 3,-9.4 8,-11.2 2.8,-1 5.6,-0.9 8.5,0.3 l 4.7,2 0.3,-0.9 c 0.4,-1.1 0.6,-2.2 0.7,-3.3 l 0.2,-1 c 0.8,-4.4 4.5,-9.3 10.9,-9.6 4.2,-0.2 7.7,1.4 10.3,5 1.4,1.9 2.1,4.2 2.3,7.1 0.1,0.9 0.1,1.8 0.4,2.7 L 88.7,53.8 91,53 c 0.8,-0.3 1.6,-0.6 2.4,-0.8 5.5,-2 11.6,0.4 14.3,5.5 2.2,4.1 2,8.3 -0.6,12.5 -1,1.6 -2.5,2.8 -4.2,3.9 l -0.5,0.4 c -1,0.7 -1.4,1.1 -1.4,1.7 0,0.6 0.4,1.1 1.3,1.8 1.6,1.4 3.2,2.8 4.3,4.7 1.9,3.1 2.1,7.1 0.6,10.7 -1.5,3.6 -4.4,6.1 -8.3,7 -2.3,0.6 -4.7,0.3 -7.1,-0.7 -0.7,-0.3 -1.4,-0.6 -2.1,-0.9 L 87.2,97.7 87,98.4 c -0.4,1 -0.5,1.9 -0.7,2.8 l -0.1,0.7 c -0.7,4 -2.7,7 -6.1,8.9 -1.9,1 -3.9,1.6 -5.8,1.6 z m 46,7.2 c -3.9,6.3 -7.4,11.9 -11,17.7 -0.8,1.3 -0.9,2.6 -0.4,4.3 l 4.5,15.1 c 0.5,1.5 0.9,3 1.3,4.5 l 0.1,0.5 h -0.5 c -2.1,0 -4.2,0 -6.3,0 h -2.7 c -4.7,0 -9.7,0 -14.8,0.2 H 90 l 0.1,-0.5 c 0.2,-0.7 0.4,-1.4 0.6,-2.1 0.1,-0.4 0.3,-0.9 0.4,-1.3 1.8,-6 3.4,-11 4.9,-15.7 0.7,-2.1 0.3,-4 -1,-5.8 -3.2,-4.3 -6.5,-8.7 -9.4,-12.7 l -3.5,-4.7 0.4,-0.2 c 3.4,-1.6 6,-3.8 8.1,-6.7 0.7,-1 1.3,-2.1 1.8,-3.1 l 0.2,-0.5 0.5,0.1 c 3,0.5 5.9,0.3 8.6,-0.5 6.9,-2.1 11.5,-6.6 13.7,-13.5 l 0.1,-0.5 0.5,0.1 c 3.1,0.5 5.7,2.3 8.3,4.2 1.4,1 2.6,2.2 3.9,3.3 0.5,0.5 1.1,1 1.7,1.4 l 0.3,0.2 z m 38.1,-3.2 c -0.1,1.6 -0.2,3.1 -0.4,4.6 l -0.1,0.8 -1.3,-1.4 c -2.8,-3 -5.5,-6.2 -8.1,-9.2 -2,-2.3 -4.2,-4.9 -6.4,-7.3 -3.5,-3.8 -7.3,-7.9 -11.7,-11.4 -2.4,-1.9 -4.7,-3.4 -7,-4.5 l -0.9,-0.4 0.9,-0.3 c 0.8,-0.2 1.6,-0.4 2.5,-0.6 6.4,-1.1 12.4,-0.4 17.7,2.2 7.1,3.5 11.7,9.3 13.7,17.5 1,3.2 1.3,6.5 1.1,10 z"
+   id="path4"
+   style="fill:#1a1a1a;fill-opacity:1" />
+	<path
+   class="st0"
+   d="m 75.4,59.4 h -0.2 -0.1 c -8.7,0.1 -15.5,7.1 -15.5,15.9 0,4.3 1.6,8.3 4.6,11.3 2.9,2.9 6.9,4.6 11.2,4.6 8.8,0 15.8,-7 15.8,-15.8 0,-4.3 -1.6,-8.3 -4.6,-11.2 -3,-3.1 -7,-4.8 -11.2,-4.8 z m -0.1,23.5 c -2,0 -3.9,-0.8 -5.3,-2.3 -1.4,-1.5 -2.2,-3.4 -2.2,-5.4 0.1,-4.3 3.3,-7.6 7.6,-7.6 2,0 3.8,0.8 5.2,2.2 1.5,1.5 2.3,3.5 2.3,5.5 0,4.2 -3.4,7.6 -7.6,7.6 z"
+   id="path6"
+   style="fill:#1a1a1a;fill-opacity:1" />
+</g>
+</svg>
--- a/image/family/black/handmadeArtificial.svg
+++ b/image/family/black/handmadeArtificial.svg
@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 40 40"
+   xml:space="preserve"
+   sodipodi:docname="handmadeArtificial.svg"
+   width="40"
+   height="40"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs13" /><sodipodi:namedview
+   id="namedview11"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   inkscape:zoom="3.595"
+   inkscape:cx="100"
+   inkscape:cy="99.860918"
+   inkscape:window-width="1920"
+   inkscape:window-height="1011"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<style
+   type="text/css"
+   id="style2">
+	.st0{fill:#1E1E1C;}
+	.st1{fill:none;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+</style>
+<g
+   id="g8"
+   transform="matrix(0.2875629,0,0,0.2875629,-8.75629,-8.7994244)"
+   style="fill:#1a1a1a;fill-opacity:1">
+	<path
+   class="st0"
+   d="m 92.8,87.4 c 0,-0.2 0,-0.3 0,-0.4 V 65.7 c 0,-0.5 -0.1,-0.8 -0.3,-0.9 -0.2,-0.2 -0.5,-0.3 -1,-0.3 -0.1,0 -0.3,0 -0.4,0 h -20 -0.3 c -0.2,0 -0.4,0 -0.5,0 -0.4,0 -0.7,0.2 -0.8,0.2 -0.2,0.2 -0.3,0.5 -0.3,0.8 0,0.2 0,0.3 0,0.5 V 88 H 92.7 Z M 85.3,72.3 c 0,0.9 0,1.8 0,2.7 v 2.3 c 0,0.9 0,1.8 0,2.8 v 0.4 h -0.4 c -2.6,0 -5.2,0 -7.9,0 h -0.4 v -0.4 c 0,-2.6 0,-5.2 0,-7.9 V 71.8 H 77 c 2.6,0 5.1,0 7.9,0 h 0.2 z"
+   id="path4"
+   style="fill:#1a1a1a;fill-opacity:1" />
+	<path
+   class="st0"
+   d="m 167.4,121.4 c -0.1,-0.4 -0.2,-0.7 -0.4,-1.1 L 153.1,81.9 C 152.2,79.8 150.9,80 150.9,80 l -16.9,4 1.2,-0.9 9.6,-6.7 v 0 l 19.6,-13.8 -39.3,-9.8 v 0 c -0.6,-0.1 -1.2,-0.3 -1.7,-0.4 -1,-0.2 -1.4,0.2 -1.8,0.9 -0.1,0.1 -0.1,0.3 -0.2,0.4 v 0 l -0.4,0.7 -9,-15.8 c -0.4,-0.8 -0.7,-1.1 -1.1,-1.2 -0.4,-0.1 -0.8,0.1 -1.5,0.5 l -2.7,1.5 c -2,1.2 -4,2.3 -6,3.5 l -0.6,0.3 -0.1,-0.6 v -2.3 c 0,-1.4 0,-2.7 0,-4.1 0,-0.5 0,-1 0,-1.5 0,-1.2 0,-2.4 -0.1,-3.5 V 30.6 H 64.1 C 62.4,30.7 62,32 62,32.7 V 33 c 0,3.2 0,6.4 0,9.6 v 0.6 L 61.4,42.9 C 60.7,42.5 60,42.1 59.3,41.7 l -1.6,-0.9 c -1.8,-1 -3.7,-2.1 -5.5,-3.2 -0.3,-0.2 -0.7,-0.4 -1.1,-0.2 -0.4,0.1 -0.6,0.6 -0.7,0.8 0,0.1 -0.1,0.2 -0.2,0.4 l -18.3,31.3 0.4,0.2 c 1.7,1.1 3.5,2.1 5.3,3.1 0.2,0.1 0.4,0.2 0.5,0.3 v 0 l 5,2.5 -2.8,1.6 c 0,0 -0.1,0 -0.1,0.1 l -8.3,4.8 0.2,0.4 c 1.9,3.7 17.8,31.4 18.8,32.4 l 0.2,0.3 6.2,-3.5 4.7,-3 -0.2,6.8 v 0 c 0,1.6 0,3.1 0,4.6 0,0.3 0,0.8 0.3,1.2 0.3,0.3 0.8,0.3 1,0.3 0.5,0 1.1,0 1.7,0.1 h 0.1 c 0.6,0.1 1.2,0.1 1.7,0.1 0.7,0 1.4,0 2.1,0 0.9,0 1.8,0 2.7,0 0.1,0 0.1,0 0.2,0 0.7,0 1.2,0.3 1.8,0.9 4,5.1 8.4,10.6 13.4,16.7 0.5,0.6 0.6,1.1 0.4,1.8 -1.9,5.9 -3.9,11.7 -5.8,17.6 l -2.8,7.9 c -0.2,0.6 -0.1,1.2 0.2,1.8 0.4,0.5 0.9,0.8 1.6,0.8 h 44.2 l -0.2,-1 c -0.1,-0.2 -0.1,-0.4 -0.1,-0.6 l -1.8,-6.1 c -1.9,-6.6 -3.9,-13.4 -5.9,-20.3 -0.3,-1 -0.2,-1.7 0.4,-2.7 4.4,-7 8.8,-14.1 13.2,-21.1 l 3.8,-6.1 c 0.1,-0.1 0.2,-0.3 0.2,-0.4 l 0.3,0.1 0.1,-0.4 c 0.2,0 0.4,0.1 0.8,0.3 l 30.3,11.3 c 0.3,0.1 0.6,0.2 1,0.3 l 1.4,0.5 z M 129.3,70.5 c 0.5,-0.3 0.6,-0.8 0.4,-1.3 l -0.9,-1.5 c -0.7,-1.3 -1.5,-2.5 -2.2,-3.8 l -2.6,-4 16.5,4 v 0 l 0.7,0.2 5.8,1.9 -2.6,1.7 -4.6,3 c -4.6,3 -9.2,5.9 -13.8,8.9 -0.2,0.2 -0.4,0.2 -0.6,0.2 -0.2,0 -0.3,-0.1 -0.5,-0.2 -1.5,-0.9 -3,-1.8 -4.5,-2.7 l -1.1,-0.6 z m -59,43.9 h -0.9 v -0.5 -17.6 l -0.7,0.3 c -1.7,0.8 -3.3,1.8 -4.9,2.7 l -0.1,0.1 c -0.9,0.5 -1.8,1.1 -2.7,1.6 -1.8,1 -3.7,2.1 -5.3,3.1 l -2,1.2 -0.6,-1.1 c -0.6,-1 -1.2,-2 -1.8,-3 -3,-5.1 -5.9,-10.3 -8.8,-15.4 L 42.2,85.3 42.7,85 56,77.3 c 0.2,-0.1 0.4,-0.3 0.7,-0.4 L 57.8,76.2 43.7,68 C 42.9,67.5 42.6,66.5 43.1,65.7 L 53,48.6 c 0.5,-0.8 1.5,-1.1 2.3,-0.6 L 68,55.3 c 0.3,0.2 0.6,0.2 0.9,0 0.3,-0.2 0.5,-0.5 0.5,-0.8 v -0.8 c 0,-1.2 0.1,-2.2 0.1,-3.3 0,-2.4 0,-4.8 0,-7.2 V 38 H 70 c 7.3,0 14.7,0 22,0 h 0.5 v 16.5 c 0,0.3 0.2,0.7 0.5,0.8 0.3,0.1 0.7,0.2 1,0 L 106.8,48 c 0.8,-0.5 1.9,-0.2 2.3,0.6 l 6.8,11.9 c 1.2,2 2.3,4 3.5,6.1 l 0.3,0.6 -14.3,8.2 c -0.3,0.2 -0.4,0.5 -0.4,0.8 0,0.3 0.2,0.6 0.5,0.8 l 12.8,7.4 c 0.8,0.5 1.1,1.5 0.6,2.3 l -9.9,17.1 c -0.2,0.4 -0.6,0.7 -1,0.8 -0.4,0.1 -0.9,0.1 -1.3,-0.2 L 93.2,96.6 92.9,97 c -0.4,0.4 -0.4,0.9 -0.3,1.4 v 8.4 3.7 c 0,1.3 0,2.4 -0.2,3.6 l -0.1,0.3 h -0.5 c -0.1,0 -0.2,0 -0.3,0 -7,0 -14.1,0.1 -21.2,0 z m 55.8,-4.5 -9.5,15.2 c -2.7,4.2 -5.3,8.5 -8,12.7 -0.5,0.8 -0.6,1.5 -0.3,2.5 1.5,5.3 3.1,10.5 4.6,15.8 l 1.7,5.9 h -0.5 c 0,0 -0.1,0 -0.1,0 h -0.1 l -20.2,-0.1 c -0.7,0 -1.4,0 -2.1,0 h -3.1 l 1.3,-4.1 c 1.8,-5.7 3.8,-11.6 5.7,-17.3 0.4,-1.1 0.2,-1.8 -0.5,-2.7 -3.4,-4.2 -6.7,-8.4 -10.7,-13.3 l -1.9,-2.4 h 16.2 c 0.7,0 1,0 1.2,-0.3 0.3,-0.3 0.3,-0.6 0.3,-1.4 v -11 l 0.6,0.4 c 0.2,0.1 0.3,0.2 0.5,0.3 1.6,0.9 3.1,1.8 4.7,2.7 l 3.9,2.3 c 1.1,0.6 1.4,0.5 2,-0.5 l 5.5,-9.4 c 0.1,-0.1 0.1,-0.2 0.2,-0.3 l 0.2,-0.2 0.6,0.2 c 2.4,0.9 4.7,1.8 7.1,2.6 0.5,0.2 0.9,0.6 1,1 0.1,0.4 -0.1,0.9 -0.3,1.4 z m 21.6,-2.2 -26.3,-9.8 0.3,-0.6 c 0.5,-0.9 1,-1.8 1.5,-2.7 0.1,-0.2 0.3,-0.2 0.7,-0.3 l 16.3,-3.9 c 2,-0.5 3.9,-0.9 5.9,-1.4 l 1,-0.1 1,1 V 90 c 1.5,4.1 2.9,8.1 4.4,12.2 l 3.6,8.7 z"
+   id="path6"
+   style="fill:#1a1a1a;fill-opacity:1" />
+</g>
+</svg>
--- a/image/family/black/mortuary.svg
+++ b/image/family/black/mortuary.svg
@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 40 40"
+   xml:space="preserve"
+   sodipodi:docname="mortuary.svg"
+   width="40"
+   height="40"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs9" /><sodipodi:namedview
+   id="namedview7"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   inkscape:zoom="3.595"
+   inkscape:cx="100"
+   inkscape:cy="99.860918"
+   inkscape:window-width="1920"
+   inkscape:window-height="1011"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<style
+   type="text/css"
+   id="style2">
+	.st0{fill:#1E1E1C;}
+	.st1{fill:none;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+</style>
+<path
+   class="st0"
+   d="m 35.428571,16.4 c 0,-8.085714 -6.228572,-14.714286 -14.142857,-15.371429 V 0.314286 C 21.285715,0.142857 21.142858,0 20.971429,0 H 19.314286 C 19.142858,0 19,0.142857 19,0.314286 V 1 C 10.942858,1.514286 4.5714285,8.228571 4.5714285,16.4 c 0,5.6 3,10.514286 7.4857145,13.228571 L 9.3714285,37.4 c -0.171429,0.542857 0.08571,1.114286 0.628571,1.285714 l 0.2285725,0.08571 c 0.542856,0.171428 1.114286,-0.08571 1.285714,-0.628572 l 2.6,-7.485714 c 1.428572,0.6 2.999999,0.971428 4.628571,1.114286 v 7.2 C 18.742858,39.542857 19.2,40 19.771429,40 h 0.257143 C 20.6,40 21.057143,39.542857 21.057143,38.971429 V 31.8 c 1.657143,-0.114286 3.257143,-0.485714 4.714286,-1.085714 l 2.599999,7.514285 c 0.17143,0.542858 0.771429,0.8 1.285714,0.628572 l 0.228572,-0.08571 C 30.428571,38.6 30.685715,38 30.514286,37.485714 L 27.828572,29.714286 C 32.371428,27.028571 35.428571,22.057143 35.428571,16.4 Z m -2.285714,0 c 0,0.4 -0.02857,0.8 -0.05714,1.2 -1.6,-0.142857 -3.114285,-0.542857 -4.6,-1.085714 0,0 0,-0.02857 0,-0.02857 C 28.485715,11.8 24.685715,8 20,8 c -0.942857,0 -1.885715,0.142857 -2.771429,0.457143 -1.342857,-1.428572 -2.399999,-2.771429 -3.142856,-3.8 1.771428,-0.885714 3.771428,-1.4 5.914285,-1.4 7.257143,0 13.142857,5.885714 13.142857,13.142857 z M 19.085715,10.342857 c 0.285713,-0.05714 0.6,-0.05714 0.914285,-0.05714 3.085715,0 5.628571,2.257143 6.114285,5.2 -2.657142,-1.4 -5.057142,-3.257143 -7.02857,-5.142857 z M 12.114286,5.885714 C 13.228572,7.4 15.057143,9.685714 17.457143,12 c 4.857143,4.628571 10.085715,7.342857 15.199999,7.885714 -0.314285,1.142857 -0.771428,2.2 -1.371427,3.2 -11.2,-0.2 -19.742857,-11.971428 -21.6285725,-14.8 C 10.371429,7.371429 11.2,6.571429 12.114286,5.885714 Z m 1.914285,11.2 c 2.371428,2.285715 4.828572,4.114286 7.314286,5.485715 -0.428572,0.08571 -0.885714,0.142857 -1.342857,0.142857 -3.314285,0 -6,-2.6 -6.200001,-5.857143 0.08572,0.08571 0.142858,0.142857 0.228572,0.228571 z m 5.057144,12.428572 C 12.4,29.057143 7.0571425,23.485714 6.8571425,16.8 c -0.05714,-2.314286 0.457143,-4.485714 1.457143,-6.4 0.742857,1.057143 1.8857145,2.6 3.4000005,4.285714 -0.142857,0.6 -0.2,1.228572 -0.2,1.828572 C 11.514286,21.2 15.314285,25 20,25 c 1.485714,0 2.914285,-0.371429 4.171428,-1.085714 1.828571,0.714285 3.685715,1.2 5.514286,1.371428 -2.571429,2.828572 -6.4,4.514286 -10.599999,4.228572 z"
+   id="path4"
+   style="stroke-width:0.285714;fill:#1a1a1a;fill-opacity:1" />
+</svg>
--- a/image/family/black/pets.svg
+++ b/image/family/black/pets.svg
@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="40mm"
+   height="40mm"
+   viewBox="0 0 40 40"
+   version="1.1"
+   id="svg1600"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   sodipodi:docname="pets.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs1594" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.0684205"
+     inkscape:cx="49.699837"
+     inkscape:cy="46.277881"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:pagecheckerboard="0" />
+  <metadata
+     id="metadata1597">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       id="g885"
+       style="fill:#1a1a1a;fill-opacity:1">
+      <path
+         id="path8"
+         style="fill:#1a1a1a;stroke-width:0.061654;fill-opacity:1"
+         d="m 19.703707,14.502266 v 0.0062 c -3.970522,0.06782 -7.694429,1.566152 -10.5120202,4.211112 -2.8854103,2.706613 -4.4694945,6.301341 -4.4694945,10.117727 v 0.301792 h 0.00568 c 0.1294733,4.451422 3.6995645,8.002625 9.5875287,9.519317 1.886615,0.487066 3.964124,0.746207 6.017203,0.746207 h 0.0925 c 2.108569,-0.01233 4.204824,-0.283607 6.060615,-0.801502 5.622848,-1.559849 8.829214,-5.074293 8.792223,-9.649024 -0.03699,-3.890372 -1.646645,-7.52801 -4.538221,-10.25312 -2.873078,-2.706614 -6.689241,-4.19871 -10.739912,-4.19871 z m 0.191202,2.306319 h 0.0987 c 3.471124,0 6.726416,1.270111 9.167917,3.569807 2.435336,2.293533 3.791643,5.345174 3.816302,8.600509 0.02466,3.452627 -2.564741,6.159413 -7.114809,7.423319 -1.670828,0.462407 -3.551369,0.709001 -5.450314,0.715203 h -0.0739 c -1.868119,0 -3.748181,-0.234566 -5.455998,-0.672311 C 9.9258243,35.168873 7.0587142,32.450255 7.0093913,28.929807 v -0.08061 c 0,-3.175187 1.3317326,-6.177643 3.7424067,-8.446514 2.42917,-2.281201 5.653491,-3.557105 9.143111,-3.594095 z" />
+      <path
+         id="path26"
+         style="fill:#1a1a1a;stroke-width:0.061654;fill-opacity:1"
+         d="M 26.238191,0.59665452 C 25.201227,0.56851579 24.157001,1.0061208 23.235274,1.8627271 22.224144,2.8060343 21.46583,4.1686855 21.102071,5.7100374 20.738312,7.251389 20.799933,8.8113797 21.27467,10.09995 c 0.536391,1.455036 1.529238,2.422794 2.799312,2.724899 0.265113,0.06165 0.536424,0.0925 0.807703,0.0925 1.004962,1e-6 2.015954,-0.437841 2.916101,-1.264005 1.011129,-0.943308 1.769443,-2.3059584 2.133203,-3.8473105 C 30.294749,6.2646819 30.233125,4.7052079 29.758391,3.4166373 29.215834,1.9616013 28.223466,0.99332729 26.953392,0.69122239 26.71641,0.63457769 26.477491,0.60314808 26.238191,0.59665452 Z m -0.0863,2.29546728 c 0.09248,-3e-7 0.18495,0.01251 0.2651,0.031006 0.499396,0.1171429 0.912079,0.573587 1.177189,1.2826089 0.320601,0.875488 0.357614,1.9664889 0.0925,3.070097 -0.258947,1.103608 -0.782698,2.0593724 -1.460893,2.6944092 -0.554886,0.5117281 -1.134612,0.7336421 -1.634009,0.6164991 -0.493233,-0.117142 -0.906394,-0.57307 -1.171504,-1.2820916 -0.3206,-0.875488 -0.357614,-1.9670056 -0.0925,-3.0706136 0.258947,-1.1036078 0.783213,-2.0593725 1.461409,-2.6944092 0.456238,-0.425413 0.931128,-0.6475055 1.362708,-0.6475058 z" />
+      <path
+         id="path32"
+         style="fill:#1a1a1a;stroke-width:0.061654;fill-opacity:1"
+         d="m 36.206575,6.0790071 c -0.733356,0.010554 -1.501195,0.2351881 -2.257226,0.6686931 -1.196092,0.6905254 -2.23805,1.8499745 -2.940905,3.2680178 -0.709025,1.42421 -0.998387,2.95298 -0.819589,4.3217 0.197294,1.535186 0.949338,2.700355 2.1146,3.279903 0.493231,0.240451 1.02331,0.363802 1.578197,0.363802 0.746014,0 1.535129,-0.221683 2.305802,-0.665593 1.196091,-0.690526 2.238049,-1.849974 2.940907,-3.268017 0.70902,-1.424209 0.998902,-2.952979 0.820105,-4.3217002 C 39.751174,8.190627 38.999128,7.0254581 37.833866,6.4459098 37.32676,6.1923575 36.776964,6.0707992 36.206575,6.0790071 Z m 0.04857,2.2965007 c 0.203459,0 0.394742,0.043388 0.561208,0.1297078 0.456239,0.22812 0.758661,0.7645595 0.85731,1.5229044 0.117145,0.924811 -0.09285,1.99131 -0.598413,3.008602 -0.50556,1.017292 -1.226796,1.837195 -2.028298,2.299601 -0.659699,0.37609 -1.275956,0.462214 -1.732196,0.234094 -0.456239,-0.22812 -0.758671,-0.770725 -0.857311,-1.522904 -0.117144,-0.924811 0.09233,-1.99131 0.597895,-3.008602 0.505563,-1.017292 1.227315,-1.8371952 2.028817,-2.2996011 0.419248,-0.240451 0.819563,-0.3638021 1.170988,-0.3638021 z" />
+      <path
+         id="path26-6"
+         style="fill:#1a1a1a;stroke-width:0.061654;fill-opacity:1"
+         d="m 13.762467,0.59665452 c -0.239299,0.006494 -0.478218,0.0379232 -0.715202,0.0945679 -1.270074,0.3021049 -2.262958,1.27037888 -2.805513,2.72541488 -0.4747359,1.2885703 -0.5363581,2.8480446 -0.172599,4.3893962 0.363761,1.5413521 1.122075,2.9040025 2.133203,3.8473105 0.900148,0.826164 1.911656,1.264006 2.916618,1.264005 0.271279,0 0.542072,-0.03085 0.807185,-0.0925 1.270075,-0.302105 2.262922,-1.269863 2.799313,-2.724899 C 19.200209,8.8113797 19.26183,7.2513893 18.898071,5.7100374 18.534312,4.1686855 17.775998,2.8060343 16.764868,1.8627271 15.84314,1.0061207 14.799432,0.56851579 13.762467,0.59665452 Z m 0.0863,2.29546728 c 0.43158,0 0.905953,0.2220925 1.362191,0.6475055 0.678196,0.6350367 1.202462,1.5908014 1.461409,2.6944092 0.265113,1.103608 0.228099,2.1951256 -0.0925,3.0706136 C 16.314756,10.013672 15.901595,10.4696 15.408362,10.586742 14.908965,10.703885 14.329756,10.481971 13.77487,9.9702426 13.096676,9.3352058 12.572407,8.3794414 12.31346,7.2758334 c -0.265113,-1.1036081 -0.228099,-2.194609 0.0925,-3.070097 0.26511,-0.7090219 0.678309,-1.165466 1.177706,-1.2826089 0.08015,-0.018497 0.17262,-0.031006 0.2651,-0.031006 z" />
+      <path
+         id="path32-9"
+         style="fill:#1a1a1a;stroke-width:0.061654;fill-opacity:1"
+         d="M 3.7935669,6.0790071 C 3.2231793,6.0707997 2.6733809,6.1923575 2.166276,6.4459098 1.001015,7.0254579 0.24896743,8.190627 0.05167643,9.7258128 c -0.178799,1.3687212 0.11056822,2.8974912 0.81958822,4.3217002 0.70285695,1.418043 1.74481575,2.577491 2.94090565,3.268017 0.7706752,0.44391 1.5603043,0.665593 2.3063192,0.665593 0.554886,0 1.0849652,-0.123351 1.5781983,-0.363802 1.165261,-0.579548 1.9173055,-1.744717 2.1145994,-3.279903 0.1787962,-1.36872 -0.1110818,-2.89749 -0.8201048,-4.3217 C 8.2883263,8.597675 7.2463667,7.4382256 6.0502767,6.7477002 5.2942444,6.3141952 4.5269224,6.0895602 3.7935669,6.0790071 Z m -0.049093,2.2965007 c 0.351427,0 0.7522567,0.1233511 1.1715046,0.3638021 0.801502,0.4624059 1.5227369,1.2823091 2.0283001,2.2996011 0.5055639,1.017292 0.7155568,2.083791 0.5984128,3.008602 -0.09864,0.752179 -0.4010707,1.294784 -0.8573119,1.522904 C 6.229142,15.798537 5.6128851,15.712413 4.9531859,15.336323 4.1516839,14.873917 3.4299313,14.054014 2.9243692,13.036722 2.4188063,12.01943 2.20933,10.952931 2.326473,10.02812 2.4251229,9.2697751 2.727544,8.7333356 3.1837849,8.5052156 3.3502499,8.4188955 3.5410153,8.3755078 3.7444739,8.3755078 Z" />
+    </g>
+  </g>
+</svg>
--- a/image/family/black/plant.svg
+++ b/image/family/black/plant.svg
--- a/image/family/black/preserved.svg
+++ b/image/family/black/preserved.svg
@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 40 40"
+   xml:space="preserve"
+   sodipodi:docname="preserved.svg"
+   width="40"
+   height="40"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs9" /><sodipodi:namedview
+   id="namedview7"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   inkscape:zoom="3.595"
+   inkscape:cx="100"
+   inkscape:cy="99.860918"
+   inkscape:window-width="1920"
+   inkscape:window-height="1011"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<style
+   type="text/css"
+   id="style2">
+	.st0{fill:#1E1E1C;}
+	.st1{fill:none;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+</style>
+<path
+   class="st0"
+   d="m 19.999996,39.999996 c 0.632411,0 1.121092,-0.517427 1.121092,-1.121092 v -8.39382 h 0.114984 c 2.874596,-0.08624 5.116781,-0.977363 6.669062,-2.644628 2.673374,-2.817104 2.443407,-6.927776 2.357169,-7.732663 v 0 c -0.05749,-0.603665 -0.546173,-1.092346 -1.149839,-1.149838 -0.287459,-0.02875 -1.322314,-0.114984 -2.644628,0.08624 l -0.488681,0.08624 0.431189,-0.258714 c 0.546174,-0.344951 1.034855,-0.747395 1.466044,-1.20733 2.673374,-2.817104 2.443407,-6.927776 2.357169,-7.732663 C 30.176067,9.328063 29.687384,8.839382 29.083719,8.78189 28.537545,8.7244 26.58282,8.609414 24.484365,9.356809 L 24.31189,9.414299 24.34064,9.213077 C 24.455623,8.609412 24.513115,7.977001 24.513115,7.373336 24.398131,3.492632 21.408552,0.790512 20.833633,0.301831 c -0.488682,-0.402444 -1.149839,-0.402444 -1.63852,0 -0.603665,0.459935 -3.593245,3.162055 -3.708228,7.042759 -0.02875,0.632411 0.02875,1.236076 0.172475,1.868487 l 0.02875,0.201222 -0.172475,-0.05749 C 13.41718,8.609414 11.433709,8.724398 10.887535,8.78189 10.28387,8.83938 9.7951894,9.328063 9.7376974,9.931728 c -0.08624,0.804887 -0.316205,4.915559 2.3571686,7.732663 0.431189,0.431189 0.891124,0.833633 1.437297,1.178584 l 0.402444,0.258714 -0.488681,-0.08624 c -0.632411,-0.08624 -1.178585,-0.114984 -1.609774,-0.114984 -0.431189,0 -0.747395,0.02875 -0.919871,0.02875 -0.603665,0.05749 -1.0923456,0.546173 -1.1498376,1.149838 -0.08624,0.804887 -0.316206,4.886813 2.3571686,7.732663 1.552281,1.63852 3.794466,2.529644 6.640316,2.644628 h 0.114984 v 8.39382 c 0,0.632411 0.488681,1.149838 1.121092,1.149838 z M 27.93388,21.171394 h 0.114984 v 0.114984 c -0.02875,1.20733 -0.28746,3.420769 -1.782249,5.001796 -1.121093,1.20733 -2.788358,1.839742 -4.973051,1.954725 H 21.17858 v -0.114983 c 0.08624,-2.299677 0.776141,-4.053181 2.012217,-5.203019 1.523536,-1.49479 3.621991,-1.753503 4.743083,-1.753503 z M 27.87639,10.966579 h 0.114984 v 0.114984 c -0.02875,1.20733 -0.287459,3.420769 -1.782249,5.001796 -1.121093,1.178585 -2.788358,1.839742 -4.973051,1.925979 H 21.12109 v -0.114983 c 0.08624,-2.299677 0.776141,-4.05318 2.012217,-5.203019 1.552282,-1.437298 3.650737,-1.696011 4.743083,-1.724757 z M 17.757811,7.40208 c 0.05749,-2.155947 1.379806,-3.880704 2.184693,-4.714337 l 0.08624,-0.08624 0.08624,0.08624 c 0.776141,0.833633 2.098455,2.55839 2.184693,4.714337 0.05749,1.696012 -0.689903,3.392023 -2.155947,5.030543 l -0.08624,0.08624 -0.08624,-0.08624 C 18.418968,10.794103 17.700319,9.098092 17.757811,7.40208 Z m -4.024434,8.681279 c -1.466044,-1.552281 -1.753503,-3.794466 -1.782249,-5.001796 v -0.114984 h 0.114984 c 1.35106,0.02875 3.277039,0.344951 4.743083,1.724757 v 0 c 1.236076,1.149839 1.897233,2.903342 2.012217,5.203019 v 0.114983 h -0.114984 c -2.184693,-0.08624 -3.851958,-0.747394 -4.973051,-1.925979 z m 5.001797,12.130794 c -2.184693,-0.08624 -3.851959,-0.747395 -4.973051,-1.925979 -1.466044,-1.552281 -1.753503,-3.794466 -1.782249,-5.001796 v -0.114984 h 0.114984 c 1.121092,0.02875 3.219547,0.287459 4.743083,1.724757 1.236076,1.149839 1.897233,2.903342 2.012217,5.203019 v 0.114983 z M 18.418968,21.228886 C 18.074017,20.91268 17.700319,20.625221 17.26913,20.337761 l -0.431189,-0.258714 0.488681,0.05749 c 0.833633,0.114984 1.638519,0.14373 2.500898,0.114984 0.02875,0 0.05749,0 0.08624,0 h 0.05749 0.05749 c 0.02875,0 0.05749,0 0.08624,0 0.201221,0 0.373697,0 0.574919,0 0.689903,0 1.379806,-0.05749 2.040963,-0.14373 l 0.517427,-0.08624 -0.431189,0.28746 c -0.43119,0.258714 -0.804887,0.574919 -1.149839,0.891125 -0.574919,0.546173 -1.092346,1.236076 -1.523535,2.012217 l -0.08624,0.172476 -0.08624,-0.172476 c -0.459931,-0.747391 -0.977359,-1.437294 -1.552278,-1.983467 z"
+   id="path4"
+   style="stroke-width:0.28746;fill-opacity:1;fill:#1a1a1a" />
+</svg>
--- a/image/family/black/treatments.svg
+++ b/image/family/black/treatments.svg
@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 40 40"
+   xml:space="preserve"
+   sodipodi:docname="treatments.svg"
+   width="40"
+   height="40"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs13" /><sodipodi:namedview
+   id="namedview11"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   inkscape:zoom="3.595"
+   inkscape:cx="100"
+   inkscape:cy="99.860918"
+   inkscape:window-width="1920"
+   inkscape:window-height="1011"
+   inkscape:window-x="0"
+   inkscape:window-y="0"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Capa_1" />
+<style
+   type="text/css"
+   id="style2">
+	.st0{fill:#1E1E1C;}
+	.st1{fill:none;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+	.st2{fill:#FFFFFF;stroke:#1E1E1C;stroke-width:8;stroke-miterlimit:10;}
+</style>
+<g
+   id="g8"
+   transform="matrix(0.28715004,0,0,0.28715004,-9.3036616,-8.6719315)"
+   style="fill:#1a1a1a;fill-opacity:1">
+	<path
+   class="st0"
+   d="m 88.4,48.2 c -10.7,3.1 -16.5,10.9 -16.5,22 v 99.3 h 60.3 c 0,-0.1 0,-0.2 0,-0.3 0,-8.8 0,-17.6 0,-26.4 0,-24.2 0,-49.3 -0.1,-74.1 0,-7.7 -3.7,-13.9 -10.6,-18.1 v 0 c -1.3,-0.8 -2.8,-1.4 -4.4,-2 H 117 c -0.7,-0.3 -1.4,-0.6 -2.2,-0.9 l -0.2,-0.1 V 30.2 H 89.3 V 47.8 L 88.8,48 c -0.2,0.1 -0.3,0.2 -0.4,0.2 z m 35.7,113.4 H 79.9 V 73.2 h 44.2 z M 97.4,38.2 h 9.3 v 9.4 h -9.3 z m -4.3,17.4 h 3.4 c 4.8,0 9.7,-0.1 14.5,0 5.2,0.1 9.2,2.6 11.8,7.4 0.2,0.3 0.3,0.7 0.5,1 v 0.1 c 0.1,0.2 0,0.3 0,0.4 0,0 0,0.1 0,0.1 v 0.3 H 80.5 l 0.2,-0.5 c 0.7,-2.2 2,-4.1 3.9,-5.7 2.5,-2 5.4,-3.1 8.5,-3.1 z"
+   id="path4"
+   style="fill:#1a1a1a;fill-opacity:1" />
+	<path
+   class="st0"
+   d="m 114.7,130.7 c 0.1,-3.1 0,-6.2 0,-9.3 v -1 c 0,-1.1 0,-2.2 0,-3.2 v -0.1 c 0,-1.1 0,-2.3 0,-3.4 v -0.2 c 0,-3 0,-6.1 0,-9.1 0,-1.4 -0.2,-2.6 -0.4,-3.6 -1.4,-5.5 -6.5,-9.5 -12.2,-9.5 -0.5,0 -1,0 -1.4,0.1 -6.5,0.8 -11.3,6.1 -11.4,12.5 -0.1,8.4 0,17.1 0,24.8 v 1.9 c 0,0.9 0.1,1.9 0.4,2.9 1.5,6.1 7.3,10.2 13.5,9.6 6.5,-0.7 11.4,-6 11.5,-12.4 z m -7.9,-9.7 c 0,3 0,6 0,9 0,3 -1.9,5.2 -4.7,5.2 -1.3,0 -2.4,-0.5 -3.3,-1.3 -1,-0.9 -1.5,-2.3 -1.5,-3.8 0,-8.5 0,-17.2 0,-25.7 0,-1.5 0.5,-2.9 1.5,-3.8 0.9,-0.8 2,-1.3 3.3,-1.3 2.8,0 4.7,2.2 4.7,5.2 0,3 0,6 0,9 v 3.8 z"
+   id="path6"
+   style="fill:#1a1a1a;fill-opacity:1" />
+</g>
+</svg>
--- a/index.js
+++ b/index.js
@ -0,0 +1,60 @@
+__webpack_public_path__ = _PUBLIC_PATH;
+
+require('hedera/hedera');
+
+window.onload = function() {
+	loadLocale(main);
+}
+
+function main(req) {
+	if (req)
+		onLocaleLoad(req);
+
+	hederaWeb = new Hedera.App();
+	hederaWeb.run();
+}
+
+function loadLocale(cb) {
+	Vn.Locale.init();
+	var lang = Vn.Locale.language;
+
+	var req = require.context('js', true, /locale\/en.yml$/);
+	onLocaleLoad(req);
+
+	switch (lang) {
+		case 'ca':
+			require([], function() {
+				cb(require.context('js', true, /locale\/ca.yml$/)); 
+			});
+			break;
+		case 'es':
+			require([], function() {
+				cb(require.context('js', true, /locale\/es.yml$/)); 
+			});
+			break;
+		case 'fr':
+			require([], function() {	
+				cb(require.context('js', true, /locale\/fr.yml$/)); 
+			});
+			break;
+		case 'mn':
+			require([], function() {	
+				cb(require.context('js', true, /locale\/mn.yml$/)); 
+			});
+			break;
+		case 'pt':
+			require([], function() {	
+				cb(require.context('js', true, /locale\/pt.yml$/)); 
+			});
+			break;
+		default:
+			cb();
+	}
+}
+
+function onLocaleLoad(req) {
+	var keys = req.keys();
+
+	for (var i = 0; i < keys.length; i++)
+		Vn.Locale.add(req(keys[i]));
+}
--- a/js/hedera/gui.css
+++ b/js/hedera/gui.css
@ -1,350 +0,0 @@
-
-.vn-gui {
-	height: inherit;
-}
-
-/* Font */
-
-.vn-gui .user-name,
-.vn-gui .menu-title,
-.vn-gui .main-menu {
-	font-size: 1.1em;
-}
-
-/* Navigation bar */
-
-.vn-gui .navbar {
-	position: fixed;
-	background-color: #1A1A1A;
-	left: 250px;
-	top: 0;
-	right: 0;
-	z-index: 1;
-	overflow: hidden;
-	height: 64px;
-	color: white;
-
-	transition-property: left, background-color, transform;
-	transition-duration: 200ms;
-	transition-timing-function: ease-in-out;
-}
-.vn-gui .menu-button {
-	position: absolute;
-	left: 0;
-	display: none;
-	border: none;
-	background-color: transparent;
-	padding: 0 .4em;
-	margin: 0;
-	height: 100%;
-}
-.vn-gui .menu-button:hover {
-	background-color: rgba(0, 0, 0, .2);
-}
-.vn-gui .menu-button img {
-	vertical-align: middle;
-	height: 1.8em;
-}
-.vn-gui .title {
-	float: left;
-}
-.vn-gui .title h1 {
-	font-weight: normal;
-	font-size: 1.4em;
-	padding: .8em .6em;
-	padding-right: .3em;
-	margin: 0;
-}
-.vn-gui .navbar > .htk-spinner {
-	float: left;
-	margin: 1.05em .8em;
-}
-
-/* Action bar */
-
-.vn-gui .action-bar {
-	float: right;
-	padding: 0;
-	margin: 0;
-	height: 100%;
-}
-.vn-gui .action-bar > div {
-	padding: 0;
-	margin: 0;
-	height: 100%;
-}
-.vn-gui .action-bar > div > * {
-	float: right;
-}
-.vn-gui .action-bar button {
-	margin: 0;
-	padding: 1.25em .5em;
-	border-radius: 2em;
-	font-weight: bold;
-}
-.vn-gui .action-bar button:hover {
-	background-color: rgba(1, 1, 1, .2);
-}
-.vn-gui .action-bar button > img {
-	vertical-align: middle;
-	height: 1.4em;
-}
-
-/* Background */
-
-.vn-gui > .background {
-	z-index: 10;
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	visibility: hidden;
-	background-color: rgba(1, 1, 1, .7);
-	opacity: 0;
-}
-.vn-gui > .background.show {
-	visibility: visible;
-	transition: opacity 200ms ease-out;
-	opacity: 1;
-}
-
-/* Left panel */
-
-.vn-gui .left-panel {
-	z-index: 20;
-	position: fixed;
-	left: 0;
-	bottom: 0;
-	top: 0;
-	background-color: white;
-	z-index: 20;
-	width: 250px;
-}
-.vn-gui .menu-overflow {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 4em;
-	overflow: auto;
-}
-.vn-gui .menu-header {
-	background-color: #1A1A1A;
-	color: white;
-	height: 64px;
-	display: flex;
-}
-.vn-gui .logo {
-	display: block;
-	width: 160px;
-	margin-left: 37px;
-}
-.vn-gui .user-info {
-	overflow: hidden;
-	padding: 20px 37px;
-	font-weight: bold;
-}
-.vn-gui .user-info > img {
-	margin-right: 10px;
-	height: 20px;
-	vertical-align: middle;
-}
-.vn-gui .user-info > p {
-	margin: 0;
-	margin-top: .2em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-.vn-gui .logout {
-	display: block;
-	width: 100%;
-	margin: 0;
-	text-align: left;
-	padding: 14px 37px;
-}
-.vn-gui .supplant {
-	display: none;
-	padding: 8px;
-	margin: 0;
-	margin-top: .2em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-.vn-gui .supplant > p {
-	margin: 0;
-	margin-top: .2em;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-.vn-gui .supplant-logout {
-	float: right;
-	margin: 0;
-	padding: .2em;
-	display: block;
-}
-.vn-gui .supplant-logout > img {
-	height: 1.2em;
-	display: block;
-}
-
-/* Test link */
-
-.vn-gui .test-link {
-	display: none;
-	margin: .5em;
-	background-color: #3f51b5;
-	color: white;
-	padding: 0 1em;
-	line-height: 2em;
-	border-radius: .1em;
-	text-align: center;
-}
-.vn-gui .test-link:hover {
-	background-color: #4f61c5;
-}
-.vn-gui .dev-info {
-	display: none;
-	padding: .3em .5em;
-	color: white;
-	background-color: #3f51b5;
-	font-size: .9em;
-	margin: .5em;
-	border-radius: .1em;
-}
-.vn-gui .dev-info > p {
-	margin: .2em 0;
-}
-.vn-gui .dev-info > .mode {
-	color: #BBF;
-}
-
-/* Menu */
-
-.vn-gui .main-menu,
-.vn-gui ul.submenu {
-	list-style-type: none;
-	padding: 0;
-	margin: 0;
-}
-.vn-gui .main-menu > li {
-	display: block;
-	padding: 0;
-	margin: 0;
-	width: 100%;
-}
-.vn-gui .main-menu a {
-	width: 70%;
-	padding: 0 15%;
-	display: block;
-	line-height: 2.8em;
-}
-.vn-gui .main-menu a:hover,
-.vn-gui .main-menu a.selected {
-	background-color: rgba(1, 1, 1, .1);
-}
-.vn-gui ul.submenu {
-	display: none;
-}
-.vn-gui ul.submenu.popup {
-	display: inline;
-	position: fixed;
-	border: none;
-	border-radius: 1px;
-	background-color: white;
-	box-shadow: 0 0 .3em rgba(1, 1, 1, .3);
-	z-index: 50;
-	width: 13em;
-	max-height: 30em;
-}
-
-/* Social */
-
-.vn-gui .menu-footer {
-	position: absolute;
-	bottom: 0;
-	right: 0;
-	left: 0;
-}
-
-/* Body */
-
-.vn-gui > .body {
-	margin-left: 250px;
-	padding-top: 4.4em;
-	height: inherit;
-	box-sizing: border-box;
-	height: inherit;
-
-	transition-property: margin-left, margin-right;
-	transition-duration: 200ms;
-}
-.vn-gui .form-holder {
-	position: relative;
-	height: inherit;
-
-	opacity: 0;
-	transform: translateZ(0) translateX(-2em);
-	-webkit-transform: translateZ(0) translateX(-2em);
-
-	transition-property: opacity, transform;
-	transition-duration: 200ms;
-	transition-timing-function: ease-out;
-}
-.vn-gui .form-holder.show {
-	opacity: 1;
-	transform: translateZ(0) translateX(0em);
-	-webkit-transform: translateZ(0) translateX(0em);
-}
-
-/* Mobile */
-
-@media (max-width: 960px) {
-	.vn-gui .action-bar span.label,
-	.vn-gui .htk-button > span {
-		display: none;
-	}
-	.vn-gui > .navbar {
-		padding-left: 2.8em;
-		left: 0;
-	}
-	.vn-gui > .body {
-		margin-left: 0;
-	}
-	.vn-gui .menu-button {
-		display: block;
-	}
-	.vn-gui .left-panel {
-		top: 0;
-		left: -250px;
-		box-shadow: 0 0 .2em rgba(1, 1, 1, .3);
-
-		transition: transform 200ms ease-out;
-		-webkit-transition: transform 200ms ease-out;
-	}
-	.vn-gui .left-panel.show {
-		transform: translateZ(0) translateX(250px);
-		-webkit-transform: translateZ(0) translateX(250px);
-	}
-	.vn-gui .form-holder {
-		left: 0;
-	}
-	.vn-gui ul.submenu {
-		display: block;
-		background-color: #888;
-		color: white;
-		box-shadow: inset 0 0 .2em rgba(1, 1, 1, .2);
-		overflow: hidden;
-	
-		max-height: 0;
-		transition: max-height 300ms ease-out;
-		webkit-transition: max-height 300ms ease-out;
-	}
-	.vn-gui .main-menu li:hover > ul.submenu {
-		max-height: 20em;
-	}
-}
-
--- a/js/hedera/gui.js
+++ b/js/hedera/gui.js
@ -1,8 +1,8 @@

 var Module = require('./module');
-var Tpl = require('./gui.xml');
+var Tpl = require('./gui.xml').default;

-require('./gui.css');
+require('./gui.scss');

 module.exports = new Class({
 	Extends: Htk.Component,
@ -49,7 +49,7 @@ module.exports = new Class({
 		var sql = 'SELECT id, name, nickname FROM account.myUser;'
 			+'SELECT defaultForm FROM config;'
 			+'SELECT url FROM imageConfig;'
-			+'SELECT dbproduccion FROM vn2008.tblContadores;'
+			+'SELECT dbproduccion FROM vn.config;'
 			+'SELECT productionDomain, testDomain FROM config;';
 		this._conn.execQuery(sql, this.onMainQueryDone.bind(this));

--- a/js/hedera/gui.scss
+++ b/js/hedera/gui.scss
@ -0,0 +1,324 @@
+.vn-gui {
+	height: inherit;
+
+	/* Font */
+
+	.user-name,
+	.menu-title {
+		font-size: 1.1em;
+	}
+
+	/* Navigation bar */
+
+	.navbar {
+		position: fixed;
+		background-color: #1A1A1A;
+		left: 250px;
+		top: 0;
+		right: 0;
+		z-index: 1;
+		overflow: hidden;
+		height: 64px;
+		color: white;
+
+		transition-property: left, background-color, transform;
+		transition-duration: 200ms;
+		transition-timing-function: ease-in-out;
+	}
+	.menu-button {
+		position: absolute;
+		left: 0;
+		display: none;
+		border: none;
+		background-color: transparent;
+		padding: 0 1em;
+		margin: 0;
+		height: 100%;
+	}
+	.menu-button:hover {
+		background-color: rgba(0, 0, 0, .2);
+	}
+	.menu-button img {
+		vertical-align: middle;
+		height: 1.8em;
+	}
+	.title {
+		float: left;
+	}
+	.title h1 {
+		font-weight: normal;
+		font-size: 1.4em;
+		padding: .8em .6em;
+		padding-right: .3em;
+		margin: 0;
+	}
+	.navbar > .htk-spinner {
+		float: left;
+		margin: 1.05em .8em;
+	}
+
+	/* Action bar */
+
+	.action-bar {
+		float: right;
+		padding: 0;
+		margin: 0;
+		height: 100%;
+	}
+	.action-bar > div {
+		padding: 0;
+		margin: 0;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		padding: 0 1em;
+		gap: .5em;
+	}
+	.action-bar > div > * {
+		float: right;
+	}
+	.action-bar button {
+		margin: 0;
+		padding: .6em;
+	}
+	.action-bar button:hover {
+		background-color: rgba(2550, 255, 255, .2);
+	}
+
+	/* Background */
+
+	& > .background {
+		z-index: 10;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		visibility: hidden;
+		background-color: rgba(1, 1, 1, .7);
+		opacity: 0;
+	}
+	& > .background.show {
+		visibility: visible;
+		transition: opacity 200ms ease-out;
+		opacity: 1;
+	}
+
+	/* Left panel */
+
+	.left-panel {
+		z-index: 20;
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		top: 0;
+		background-color: white;
+		z-index: 20;
+		width: 250px;
+	}
+	.menu-overflow {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 4em;
+		overflow: auto;
+	}
+	.menu-header {
+		background-color: #1A1A1A;
+		color: white;
+		height: 64px;
+		display: flex;
+	}
+	.logo {
+		display: block;
+		width: 160px;
+		margin-left: 37px;
+	}
+	.user-info > div {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		overflow: hidden;
+		font-weight: bold;
+		border: 1px solid #eaeaea;
+		margin: 25px;
+
+		& > span {
+			padding: 10px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+		.logout {
+			display: block;
+			margin: 0;
+			text-align: left;
+
+			&:hover {
+				background-color: #1a1a1a;
+				color: white;
+			}
+		}
+		&.supplant {
+			display: none;
+		}
+	}
+
+	/* Test link */
+
+	.test-link {
+		display: none;
+		margin: .5em;
+		background-color: #3f51b5;
+		color: white;
+		padding: 0 1em;
+		line-height: 2em;
+		border-radius: .1em;
+		text-align: center;
+	}
+	.test-link:hover {
+		background-color: #4f61c5;
+	}
+	.dev-info {
+		display: none;
+		padding: .3em .5em;
+		color: white;
+		background-color: #3f51b5;
+		font-size: .9em;
+		margin: .5em;
+		border-radius: .1em;
+	}
+	.dev-info > p {
+		margin: .2em 0;
+	}
+	.dev-info > .mode {
+		color: #BBF;
+	}
+
+	/* Menu */
+
+	.main-menu,
+	ul.submenu {
+		list-style-type: none;
+		padding: 0;
+		margin: 0;
+	}
+	.main-menu > li {
+		display: block;
+		padding: 0;
+		margin: 0;
+		width: 100%;
+	}
+	.main-menu a {
+		width: 70%;
+		padding: 0 15%;
+		display: block;
+		line-height: 2.8em;
+	}
+	.main-menu a:hover,
+	.main-menu a.selected {
+		background-color: rgba(1, 1, 1, .1);
+	}
+	ul.submenu {
+		display: none;
+	}
+	ul.submenu.popup {
+		display: inline;
+		position: fixed;
+		border: none;
+		border-radius: 1px;
+		background-color: white;
+		box-shadow: 0 0 .3em rgba(1, 1, 1, .3);
+		z-index: 50;
+		width: 13em;
+		max-height: 30em;
+	}
+
+	/* Social */
+
+	.menu-footer {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		left: 0;
+	}
+
+	/* Body */
+
+	& > .body {
+		margin-left: 250px;
+		padding-top: 4.4em;
+		height: inherit;
+		box-sizing: border-box;
+		height: inherit;
+
+		transition-property: margin-left, margin-right;
+		transition-duration: 200ms;
+	}
+	.form-holder {
+		position: relative;
+		height: inherit;
+
+		opacity: 0;
+		transform: translateZ(0) translateX(-2em);
+		-webkit-transform: translateZ(0) translateX(-2em);
+
+		transition-property: opacity, transform;
+		transition-duration: 200ms;
+		transition-timing-function: ease-out;
+	}
+	.form-holder.show {
+		opacity: 1;
+		transform: translateZ(0) translateX(0em);
+		-webkit-transform: translateZ(0) translateX(0em);
+	}
+
+	/* Mobile */
+
+	@media (max-width: 960px) {
+		.action-bar span.label,
+		.htk-button > .text {
+			display: none;
+		}
+		& > .navbar {
+			padding-left: 2.8em;
+			left: 0;
+		}
+		& > .body {
+			margin-left: 0;
+		}
+		.menu-button {
+			display: block;
+		}
+		.left-panel {
+			top: 0;
+			left: -250px;
+			box-shadow: 0 0 .2em rgba(1, 1, 1, .3);
+
+			transition: transform 200ms ease-out;
+			-webkit-transition: transform 200ms ease-out;
+		}
+		.left-panel.show {
+			transform: translateZ(0) translateX(250px);
+			-webkit-transform: translateZ(0) translateX(250px);
+		}
+		.form-holder {
+			left: 0;
+		}
+		ul.submenu {
+			display: block;
+			background-color: #888;
+			color: white;
+			box-shadow: inset 0 0 .2em rgba(1, 1, 1, .2);
+			overflow: hidden;
+		
+			max-height: 0;
+			transition: max-height 300ms ease-out;
+			webkit-transition: max-height 300ms ease-out;
+		}
+		.main-menu li:hover > ul.submenu {
+			max-height: 20em;
+		}
+	}
+}
--- a/js/hedera/gui.xml
+++ b/js/hedera/gui.xml
@ -3,7 +3,7 @@
 	<div id="top-bar" class="navbar">
 		<div id="action-bar" class="action-bar"/>
 		<button id="menu-button" class="menu-button">
-			<img src="image/icon/dark/menu.svg" alt="_Menu"/>
+			<htk-icon name="menu" alt="_Menu"/>
 		</button>
 		<div id="title" class="title"/>
 		<htk-spinner id="loader" class="loader dark"/>
@ -14,21 +14,22 @@
 				<img class="logo" src="image/logo-dark.svg" alt="Verdnatura"/>
 			</div>
 			<div class="user-info">
-				<img src="image/icon/light/access-log.svg" alt=""/>
-				<t>Hello</t>, <span id="user-name"/>
+				<div>
+					<span id="user-name"/>
+					<button class="logout" on-click="onLogoutClick">
+						<htk-icon name="logout" alt="_Exit"/>
+					</button>
+				</div>
+				<div id="supplant" class="supplant">
+					<span id="supplanted"/>
+					<button class="logout" on-click="onSupplantExitClick">
+						<htk-icon name="logout" alt="_Exit"/>
+					</button>
+				</div>
 			</div>
 			<ul id="main-menu" class="main-menu"/>
-			<button class="logout" on-click="onLogoutClick">
-				<t>Exit</t>
-			</button>
 		</div>
 		<div class="menu-footer">
-			<div id="supplant" class="supplant">
-				<button class="supplant-logout" on-click="onSupplantExitClick" title="_Exit">
-					<img src="image/icon/light/exit.svg" alt="_Exit"/>
-				</button>
-				<p id="supplanted"/>
-			</div>
 			<div id="dev-info" class="dev-info">
 				<p class="mode">Testing</p>
 				<p><t>Version</t> <span id="version"/></p>
--- a/js/hedera/hedera.js
+++ b/js/hedera/hedera.js
@ -1,16 +1,17 @@

-require ('htk/htk');
-require ('./style.css');
+require('htk/htk');
+require('./responsive.scss');
+require('./style.scss');

 Hedera = module.exports = {
-	 Login         : require ('./login')
-	,SocialBar     : require ('./social-bar')
-	,Gui           : require ('./gui')
-	,Module        : require ('./module')
-	,Form          : require ('./form')
-	,Report        : require ('./report')
-	,App           : require ('./app')
-	,Tpv           : require ('./tpv')
-	,BasketChecker : require ('./basket-checker')
+	 Login         : require('./login')
+	,SocialBar     : require('./social-bar')
+	,Gui           : require('./gui')
+	,Module        : require('./module')
+	,Form          : require('./form')
+	,Report        : require('./report')
+	,App           : require('./app')
+	,Tpv           : require('./tpv')
+	,BasketChecker : require('./basket-checker')
 };

--- a/js/hedera/login.css
+++ b/js/hedera/login.css
@ -1,225 +0,0 @@
-
-.vn-login
-{
-	color: #333;
-	font-size: 1.1em;
-	font-weight: normal;
-	height: inherit;
-	background-color: white;
-}
-
-/* Body */
-
-.vn-login .body
-{
-	height: inherit;
-}
-.vn-login .column
-{
-	position: relative;
-	margin: 0 auto;
-	max-width: 40em;
-	height: inherit;
-	background-color: white;
-	min-height: 
-}
-
-/* Login */
-
-.vn-login .login
-{
-	position: relative;
-	height: inherit;
-	max-width: 18em;
-	margin: 0 auto;
-}
-.vn-login form
-{
-	position: absolute;
-	top: 50%;
-	margin-top: -380px;
-	width: 100%;
-	padding: 2em 0;
-}
-.vn-login form > div
-{
-	margin: 1em 0;
-}
-.vn-login p
-{
-	margin: .4em 0;
-}
-
-/* Header */
-
-.vn-login .header
-{
-	margin-bottom: 80px;
-}
-.vn-login .header img
-{
-	display: block;
-	width: 100%;
-}
-.vn-login .version-code
-{
-	color: red;
-	text-align: right;
-	margin: .2em auto;
-	font-weight: bold;
-	height: 1.4em;
-	display: none;
-}
-
-/* Body */
-
-.vn-login .form-inputs
-{
-	margin: 0 auto;
-	max-width: 15em;
-}
-.vn-login label
-{
-	margin: 0;
-}
-.vn-login .form-group label
-{
-	display: block;
-	font-size: inherit;
-}
-.vn-login .remind-block {
-	margin: 20px 0;
-}
-.vn-login .remind-forgot {
-	margin: 40px 0;
-}
-.vn-login input
-{
-	margin: 0.3em;
-}
-.vn-login input[type=text],
-.vn-login input[type=password]
-{
-	margin: 0;
-	padding: 0 .5em;
-	width: 100%;
-	border-bottom: 1px solid #AAA;
-	height: 2.6em;
-}
-.vn-login input[type=text],
-.vn-login input[type=password],
-.vn-login input[type=submit],
-.vn-login input[type=button],
-.vn-login input[type=reset],
-.vn-login button,
-.vn-login .button
-{
-	border-radius: .1em;
-}
-.vn-login input[type=checkbox]
-{
-	padding: 0;
-	margin: 0;
-	width: initial;
-	height: initial;
-	margin-right: .5em;
-}
-.vn-login input[type=submit],
-.vn-login input[type=button],
-.vn-login input[type=reset],
-.vn-login button,
-.vn-login .button
-{
-	margin: 0 auto;
-	background-color: #0d1115;
-	border-radius: 25px;
-	height: 50px;
-	width: 100%;
-	color: white;
-	transition: transform 200ms ease-out;
-	transition-property: background-color;
-}
-.vn-login input[type=submit]:hover,
-.vn-login input[type=button]:hover,
-.vn-login input[type=reset]:hover,
-.vn-login button:hover,
-.vn-login .button:hover
-{
-	background-color: #7d8185;
-}
-.vn-login .button.guest
-{
-	margin-top: 15px;
-	border: 1px solid #0d1115;
-	background-color: white;
-	color: #0d1115;
-}
-.vn-login .button.guest:hover
-{
-	border-color: #7d8185;
-	background-color: #7d8185;
-	color: white;
-}
-hr
-{
-	border: solid 1px #333;
-	margin: 0;
-	padding: 0;
-	display: block;
-}
-.vn-login .enter
-{
-	position: relative;
-}
-.vn-login .wrapper
-{
-	width: 0;
-	overflow: visible;
-	position: absolute;
-	top: 0;
-	right: 0;
-}
-.vn-login .htk-spinner
-{
-	margin: .3em 1em;
-	position: absolute;
-}
-
-/* Footer */
-
-.vn-login .footer
-{
-	margin-top: 80px;
-	font-size: 14px;
-	text-align: center;
-}
-.vn-login .contact
-{
-	margin-top: 15px;
-	color: grey;
-}
-.vn-login .footer a
-{
-	font-weight: bold;
-}
-
-@media (max-height: 50em)
-{
-	.vn-login .column
-	{
-		min-height: 45em;
-	}
-	.vn-login .login
-	{
-		display: flex;
-		align-items: center;
-	}
-	.vn-login form
-	{
-		top: 0;
-		position: relative;
-		margin-top: 0;
-		padding-top: 5.5em;
-	}
-}
-
--- a/js/hedera/login.js
+++ b/js/hedera/login.js
@ -1,6 +1,6 @@

-require('./login.css');
-var Tpl = require('./login.xml');
+require('./login.scss');
+var Tpl = require('./login.xml').default;

 module.exports = new Class({
 	Extends: Htk.Component,
--- a/js/hedera/login.scss
+++ b/js/hedera/login.scss
@ -0,0 +1,148 @@
+
+.vn-login {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #333;
+	font-size: 1.1em;
+	font-weight: normal;
+	height: inherit;
+	background-color: white;
+
+	a:hover {
+		text-decoration: underline;
+	}
+	input {
+		margin: .3em;
+	}
+	input[type=text],
+	input[type=password] {
+		margin: 0;
+		padding: 0 5px;
+		width: 100%;
+		height: 2.6em;
+		border-radius: 0;
+		border-top: none;
+		border-left: none;
+		border-right: none;
+		background-color: none;
+	}
+	input[type=checkbox] {
+		padding: 0;
+		margin: 0;
+		width: initial;
+		height: initial;
+		margin-right: .5em;
+	}
+	input[type=submit],
+	input[type=button],
+	input[type=reset],
+	button,
+	.button {
+		margin: 0 auto;
+		background-color: #0d1115;
+		border-radius: 25px;
+		height: 50px;
+		width: 100%;
+		color: white;
+		transition: transform 200ms ease-out;
+		transition-property: background-color;
+
+		&:hover {
+			background-color: #3d3f42;
+		}
+	}
+	@media (max-height: 50em) {
+		height: initial;
+	}
+}
+
+.vn-login > .column {
+	max-width: 300px;
+
+	& > .header {
+		margin-top: 60px;
+		margin-bottom: 80px;
+		
+		img {
+			display: block;
+			width: 100%;
+		}
+		.version-code {
+			color: red;
+			text-align: right;
+			margin: .2em auto;
+			font-weight: bold;
+			height: 1.4em;
+			display: none;
+		}
+	}
+	& > .footer {
+		margin-bottom: 60px;
+		margin-top: 80px;
+		font-size: 14px;
+		text-align: center;
+		
+		.contact {
+			margin-top: 15px;
+			color: grey;
+		}
+		a {
+			font-weight: bold;
+		}
+	}
+	& > form {
+		& > div {
+			margin: 20px 0;
+		}
+		p {
+			margin: 5px 0;
+		}
+		label {
+			margin: 0;
+		}
+		& > .form-group > label {
+			display: block;
+			font-size: 14px;
+		}
+		& > .remind-block {
+			margin-top: 20px;
+			margin-bottom: 40px;
+		}
+		.button.guest {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border: 1px solid #0d1115;
+			background-color: white;
+			color: #0d1115;
+			text-decoration: none;
+	
+			&:hover {
+				border-color: rgba(0, 0, 0, .8);
+				background-color: rgba(0, 0, 0, .8);
+				color: white;
+			}
+		}
+		.password-forgotten {
+			text-align: center;
+			font-size: 14px;
+			margin-top: 30px;
+		}
+		.enter {
+			position: relative;
+		}
+		.wrapper {
+			width: 0;
+			overflow: visible;
+			position: absolute;
+			top: 0;
+			right: 0;
+		}
+		.htk-spinner {
+			margin: .3em 1em;
+			position: absolute;
+		}
+	}
+}
+
--- a/js/hedera/login.xml
+++ b/js/hedera/login.xml
@ -1,13 +1,11 @@
 <vn>
 <div id="main" class="vn-login">
-	<div class="body">
-		<div class="column">
-		<div class="login">
+	<div class="column">
+		<div class="header">
+			<img src="image/logo.svg" alt="VerdNatura"/>
+			<div class="version-code"/>
+		</div>
 		<form id="form">
-			<div class="header">
-				<img src="image/logo.svg" alt=""/>
-				<div class="version-code"/>
-			</div>
 			<div class="form-group">
 				<label>
 					<t>User</t>
@ -20,20 +18,11 @@
 					<input type="password" id="pass" name="password"/>
 				</label>
 			</div>
-			<div class="remind-forgot">
-				<div class="remind-block">
-					<label>
-						<input type="checkbox" id="remember" name="remember"/>
-						<t>Remind me</t>
-					</label>
-				</div>
-				<div class="remind-block">
-					<p>
-						<a href="#" on-click="onPasswordLost">
-							<t>Password forgotten? Push here</t>
-						</a>
-					</p>
-				</div>
+			<div class="remind-block">
+				<label>
+					<input type="checkbox" id="remember" name="remember"/>
+					<t>Remind me</t>
+				</label>
 			</div>
 			<div class="enter">
 				<input id="submit" type="submit" value="_Login"/>
@ -41,24 +30,25 @@
 					<htk-spinner id="spinner"/>
 				</div>
 			</div>
-			<a class="button guest" href="#!form=cms/home&amp;guest=true">
-				<t>Log in as guest</t>
-			</a>
-			<div class="footer">
-				<p>
-					<t>Yet you are not a customer?</t> 
-					<a href="_Sign up link" target="_blank"><t>Sign up</t></a>
-				</p>
-				<p class="contact">
-					<p>Tel. <t>Login phone</t> - <t>Login mail</t></p>
-				</p>
-				<!--
-				<htk-social-bar id="social-bar" priority="1"/>
-				<div id="social" class="social"/>
-				-->
+			<div>
+				<a class="button guest" href="#!form=cms/home&amp;guest=true">
+					<t>Log in as guest</t>
+				</a>
 			</div>
+			<p class="password-forgotten">
+				<a href="#" on-click="onPasswordLost">
+					<t>Password forgotten? Push here</t>
+				</a>
+			</p>
 		</form>
-		</div>
+		<div class="footer">
+			<p>
+				<t>Yet you are not a customer?</t> 
+				<a href="_Sign up link" target="_blank"><t>Sign up</t></a>
+			</p>
+			<p class="contact">
+				Tel. <t>Login phone</t> - <t>Login mail</t>
+			</p>
 		</div>
 	</div>
 </div>
--- a/js/hedera/poppins.ttf
+++ b/js/hedera/poppins.ttf
--- a/js/hedera/report.css
+++ b/js/hedera/report.css
@ -1,8 +1,8 @@

@font-face
 {
-    font-family: 'Roboto';
-    src: url('roboto.ttf') format('truetype');
+	font-family: 'Roboto';
+	src: url('roboto.ttf') format('truetype');
 }
@media print
 {
--- a/js/hedera/responsive.scss
+++ b/js/hedera/responsive.scss
@ -0,0 +1,54 @@
+
+
+/* Responsive */
+
+/* Standard */
+@media screen {
+	body { font-size: 10pt; }
+}
+
+/* Desktop - Laptop 1360x768 */
+@media (max-resolution: 119dpi) and (min-device-width: 1340px) and (max-device-width: 1899px) {
+	body { font-size: 10pt; }
+}
+
+/* Desktop - FHD 1920x1080 */
+@media (max-resolution: 119dpi) and (min-device-width: 1900px) {
+	body { font-size: 13pt; }
+}
+
+/* Mobile - Low DPI */
+@media
+	(min-resolution: 120dpi),
+	(-webkit-min-device-pixel-ratio: 1.5) {
+	body { font-size: 9pt; }
+}
+@media
+	(min-resolution: 144dpi),
+	(-webkit-min-device-pixel-ratio: 1.5) {
+	body { font-size: 11pt; }
+}
+
+/* Mobile - Normal DPI */
+@media
+	(max-device-width: 383px) and (min-resolution: 192dpi),
+	(max-device-width: 383px) and (-webkit-min-device-pixel-ratio: 2) {
+	body { font-size: 10pt; }
+}
+@media
+	(min-device-width: 384px) and (min-resolution: 192dpi),
+	(min-device-width: 384px) and (-webkit-min-device-pixel-ratio: 2) {
+	body { font-size: 11pt; }
+}
+
+/* Mobile - High DPI */
+@media
+	(max-device-width: 411px) and (min-resolution: 249dpi),
+	(max-device-width: 411px) and (-webkit-min-device-pixel-ratio: 3) {
+	body { font-size: 10pt; }
+}
+@media
+	(min-device-width: 412px) and (min-resolution: 249dpi),
+	(min-device-width: 412px) and (-webkit-min-device-pixel-ratio: 3) {
+	body { font-size: 11pt; }
+}
--- a/js/hedera/style.scss
+++ b/js/hedera/style.scss
@ -1,77 +1,13 @@

-@font-face
-{
-	font-family: 'Roboto';
-	src: url('roboto.ttf') format('truetype');
-}
-
-/* Responsive */
-
-/* Standard */
-@media screen
-{
-	body { font-size: 10pt; }
-}
-
-/* Desktop - Laptop 1360x768 */
-@media (max-resolution: 119dpi) and (min-device-width: 1340px) and (max-device-width: 1899px)
-{
-	body { font-size: 10pt; }
-}
-
-/* Desktop - FHD 1920x1080 */
-@media (max-resolution: 119dpi) and (min-device-width: 1900px)
-{
-	body { font-size: 13pt; }
-}
-
-/* Mobile - Low DPI */
-@media
-	(min-resolution: 120dpi),
-	(-webkit-min-device-pixel-ratio: 1.5)
-{
-	body { font-size: 9pt; }
-}
-@media
-	(min-resolution: 144dpi),
-	(-webkit-min-device-pixel-ratio: 1.5)
-{
-	body { font-size: 11pt; }
-}
-
-/* Mobile - Normal DPI */
-@media
-	(max-device-width: 383px) and (min-resolution: 192dpi),
-	(max-device-width: 383px) and (-webkit-min-device-pixel-ratio: 2)
-{
-	body { font-size: 10pt; }
-}
-@media
-	(min-device-width: 384px) and (min-resolution: 192dpi),
-	(min-device-width: 384px) and (-webkit-min-device-pixel-ratio: 2)
-{
-	body { font-size: 11pt; }
-}
-
-/* Mobile - High DPI */
-@media
-	(max-device-width: 411px) and (min-resolution: 249dpi),
-	(max-device-width: 411px) and (-webkit-min-device-pixel-ratio: 3)
-{
-	body { font-size: 10pt; }
-}
-@media
-	(min-device-width: 412px) and (min-resolution: 249dpi),
-	(min-device-width: 412px) and (-webkit-min-device-pixel-ratio: 3)
-{
-	body { font-size: 11pt; }
+@font-face {
+	font-family: 'Poppins';
+	src: url('poppins.ttf') format('truetype');
 }

 /* Global */

-body
-{
-	font-family: 'Roboto', 'Verdana', 'Sans';
+body {
+	font-family: 'Poppins', 'Verdana', 'Sans';
 	background-color: #FAFAFA;
 	color: #333;
 	position: absolute;
@ -86,88 +22,77 @@ button,
 input,
 select,
 textarea,
-option
-{
+option {
 	font-size: inherit;
 	font-family: inherit;
 	color: inherit;
 }
-iframe
-{
+iframe {
 	border: none;
 }
-fieldset
-{
+fieldset {
 	margin: 0;
 }
-form
-{
+form {
 	padding: 0;
 	margin: 0;
 }
-table
-{
+table {
 	width: 100%;
 }
 a:link,
 a:visited,
-a:active
-{
+a:active {
 	color: inherit;
 	text-decoration: none;
 }
-a:hover
-{
+a:hover {
 	text-decoration: none;
 	cursor: pointer;
 }
-a img
-{
+a img {
 	padding: 1px;
 }
-a img:hover
-{
+a img:hover {
 	opacity: 0.9;
 }
-h1, h2, h3, h4, h5, h6
-{
+h1, h2, h3, h4, h5, h6 {
 	margin: 0;
 	padding: .2em 0;
 }
-h1
-{
+h1 {
 	font-size: 1.5em;
 }
-h2
-{
+h2 {
 	font-size: 1.2em;
 }
-p
-{
+p {
 	margin: 0.8em 0;
 }

 /* Focus outline */

-a:focus,
-input:focus,
-button:focus
-{
+a:focus {
 	outline: 1px solid rgba(1, 1, 1, 0.15);
 	-moz-outline-radius: .1em;
 }
+input:focus,
+button:focus {
+	outline: 0;
+}
 button::-moz-focus-inner,
 input[type=submit]::-moz-focus-inner,
 input[type=button]::-moz-focus-inner,
-input[type=reset]::-moz-focus-inner
-{
+input[type=reset]::-moz-focus-inner {
 	border: none;
 }
-select:-moz-focusring
-{
+select:-moz-focusring {
 /*	color: transparent;
    text-shadow: 0 0 0 #333;*/
 }
+input:-webkit-autofill {
+	-webkit-box-shadow: inset 0 0 0px 9999px white;
+}

 /* Inputs */

@ -177,71 +102,62 @@ input[type=file],
 input[type=number],
 textarea,
 select,
-.input
-{
-	border: none;
-	border-bottom: 1px solid #999;
+.input {
+	border: 1px solid #ddd;
+	transition: border-color 100ms ease-in;
 	margin: .2em 0;
 	box-sizing: border-box;
 	color: #333;
 	border-radius: 0;
 	text-align: left;
 	width: 100%;
+
+	&:focus {
+		border-color: #333;
+	}
 }
 input[type=text],
 input[type=password],
 input[type=number],
 textarea,
-.input
-{
-	padding: 0 .2em;
+.input,
+select {
+	padding: .8em;
 }
 input[type=text],
 input[type=password],
 input[type=file],
 input[type=number],
 select,
-.input
-{
-	height: 2.2em;
+.input {
+	height: 2.8em;
 }
-textarea
-{
+textarea {
 	height: 3.5em;
 	width: 20em;
 }
-input[type=text]:focus,
-input[type=password]:focus,
-input[type=file]:focus,
-input[type=number]:focus,
-textarea:focus,
-.input:focus
-{
-	border-color: #333;
+input[type=text]:disabled {
+	background-color: #f3f3f3;
 }
 input[type=checkbox],
-input[type=radio]
-{
+input[type=radio] {
 	cursor: pointer;
-	margin: .2em;
 	padding: .3em;
+	margin-right: .6em;
 }
-select
-{
+select {
 	background-color: white;
 	-moz-appearance: none;
 	appearance: none;
 }
-option
-{
+option {
 	padding: .4em;
 	border-width: 0;
 	font-weight: normal;
 	font-size: 1em;
 }
 select,
-option
-{
+option {
 	cursor: pointer;
 }

@ -251,17 +167,16 @@ input[type=submit],
 input[type=button],
 input[type=reset],
 button,
-.button
-{
+.button {
 	border: none;
 	background-color: transparent;
 	padding: .5em;
 	cursor: pointer;
 	border-radius: 0.1em;
 	margin: -0.5em;
+	font-weight: bold;
 }
-.button
-{
+.button {
 	display: inline-block;
 	text-align: center;
 	box-sizing: border-box;
@ -270,16 +185,14 @@ input[type=submit]:hover,
 input[type=button]:hover,
 input[type=reset]:hover,
 button:hover,
-.button:hover
-{
+.button:hover {
 	background-color: rgba(1, 1, 1, 0.1);
 }

 /* Flat button */

 button.flat,
-.button.flat
-{
+.button.flat {
 	border: none;
 	border-radius: 0.1em;
 	box-shadow: 0 0.2em 0.2em #DDD;
@ -287,14 +200,12 @@ button.flat,
 	color: black;
 }
 button.flat:hover,
-.button.flat:hover
-{
+.button.flat:hover {
 	background-color: #9C3;
 	cursor: pointer;
 }
 button.flat:disabled,
-.button.flat:disabled
-{
+.button.flat:disabled {
 	color: gray;
 }

@ -304,60 +215,62 @@ input[type=submit].thin,
 input[type=button].thin,
 input[type=reset].thin,
 button.thin,
-.button.thin
-{
+.button.thin {
 	color: #008D77;
-	border-radius: .5em;
-	background-color: rgba(0, 0, 0, .1);
+	border-radius: 1.4em;
+	padding: .5em 1.4em;
+	background-color: rgba(255, 255, 255, .1);
+	font-weight: bold;
 }
 input[type=submit].thin:disabled,
 input[type=button].thin:disabled,
 input[type=reset].thin:disabled,
 button.thin:disabled
-.button.thin:disabled
-{
+.button.thin:disabled {
 	color: gray;
 }
+input[type=submit].thin:hover,
+input[type=button].thin:hover,
+input[type=reset].thin:hover,
+button.thin:hover
+.button.thin:hover {
+	background-color: rgba(0, 0, 0, .1);
+}

 /* Image */

-img.editable
-{
+img.editable {
 	cursor: pointer;
 }

 /* Button */

-.htk-button img
-{
+.htk-button img {
 	height: 1.5em;
 }

 /* Float */

-.clear
-{
+.clear {
 	clear: both !important;
 }

 /* Box */

-.box
-{
+.box {
 	background-color: white;
 	margin: 0 auto;
-	border-radius: .8em;
+	border-radius: .6em;
 	box-shadow: .05em .05em .2em rgba(0, 0, 0, .1);
+	overflow: hidden;
 }
-.box .header
-{
+.box .header {
 	padding: 0.6em 0.8em;
 	margin: 0;
 	background-color: #009688;
 	color: white;
 }
-.box .header > h1
-{
+.box .header > h1 {
 	color: white;
 	text-align: left;
 	font-size: 1.6em;
@ -365,31 +278,28 @@ img.editable
 	font-weight: normal;
 	display: inline;
 }
-.box .body
-{
+.box .body {
 	padding: 2em;
 }

 /* Form */

-.form
-{
+.form {
 	margin: 0 auto;
 }
-.form-group
-{
+.form > h2 {
+	margin-bottom: .8em;
+}
+.form-group {
 	margin-bottom: 1.2em;
 }
-.form-group:last-child
-{
+.form-group:last-child {
 	margin-bottom: 0;
 }
-.form-group > label
-{
+.form-group > label {
 	display: block;
 	margin: 0;
 	margin-bottom: .2em;
-	font-size: .9em;
 	color: #222;
 }
 .form-group > input[type=text],
@ -397,52 +307,44 @@ img.editable
 .form-group > input[type=file],
 .form-group > input[type=number],
 .form-group > select,
-.form-group > textarea
-{
+.form-group > textarea {
 	margin: 0;
 	width: 100%;
 }

 /* Form */

-table.form
-{
+table.form {
 	padding: 1em;
 	border-collapse: separate;
 	border-spacing: 0.3em;
 }
-table.form td.label
-{
+table.form td.label {
 	width: 45%;
 	text-align: right;
 }
-table.form tr
-{
+table.form tr {
 	height: 2.8em;
 }

 /* Icon */

-img.icon
-{
+img.icon {
 	height: 1.5em;
 }

 /* Masonry */

-.masonry
-{
+.masonry {
 	margin: 0 auto;
 	text-align: left;
 }
-.masonry-box
-{
+.masonry-box {
 	width: 100%;
 	display: inline-block;
 	vertical-align: top;
 }
-@media screen and (min-width: 1000px) and (max-width: 1399px)
-{
+@media screen and (min-width: 1000px) and (max-width: 1399px) {
 	.masonry-box
 	{
 		width: 50%;
@ -456,28 +358,23 @@ img.icon
 		clear: right;
 	}
 }
-@media screen and (min-width: 1400px)
-{
+@media screen and (min-width: 1400px) {
 	.masonry-box { width: 33.3%; }
 }
-@media screen and (min-width: 2000px)
-{
+@media screen and (min-width: 2000px) {
 	.masonry-box { width: 25%; }
 }

 /* Social bar */

-.htk-social-bar
-{
+.htk-social-bar {
 	text-align: center;
 }
-.htk-social-bar a
-{
+.htk-social-bar a {
 	display: inline-block;
 	margin: 0 .1em;
 }
-.htk-social-bar img
-{
+.htk-social-bar img {
 	height: 1.8em;
 	width: 1.8em;
 }
--- a/js/htk/assistant-bar.js
+++ b/js/htk/assistant-bar.js
@ -41,40 +41,34 @@ module.exports = new Class({
 		var bar = this.createRoot('div');
 		bar.className = 'htk-assistant-bar';

-		var previousButton = this.createElement('button');
-		previousButton.className = 'previous';
-		previousButton.title = _('Previous');
+		var previousButton = new Htk.Button({
+			icon: 'arrow_back_ios',
+			tip: 'Previous'
+		}).node;
+		previousButton.classList.add('previous');
 		previousButton.addEventListener('click', this.movePrevious.bind(this));
 		bar.appendChild(previousButton);
 		
-		var img = this.createElement('img');
-		img.src = 'image/icon/light/go-previous.svg';
-		previousButton.appendChild(img);
-		
 		var steps = this.createElement('div');
 		steps.className = 'steps';
 		bar.appendChild(steps);
 		
-		var nextButton = this.createElement('button');
-		nextButton.className = 'next';
-		nextButton.title = _('Next');
+		var nextButton = new Htk.Button({
+			icon: 'arrow_forward_ios',
+			tip: 'Next'
+		}).node;
+		nextButton.classList.add('next');
 		nextButton.addEventListener('click', this.moveNext.bind(this));
 		bar.appendChild(nextButton);
 		
-		var img = this.createElement('img');
-		img.src = 'image/icon/light/go-next.svg';
-		nextButton.appendChild(img);
-		
-		var endButton = this.createElement('button');
-		endButton.className = 'end';
-		endButton.title = _('Confirm');
+		var endButton = new Htk.Button({
+			icon: 'done',
+			tip: 'Confirm'
+		}).node;
+		endButton.classList.add('end');
 		endButton.addEventListener('click', this.end.bind(this));
 		bar.appendChild(endButton);
 		
-		var img = this.createElement('img');
-		img.src = 'image/icon/light/ok.svg';
-		endButton.appendChild(img);
-		
 		this._steps = steps;
 		this._previousButton = previousButton;
 		this._nextButton = nextButton;
--- a/js/htk/column/button.js
+++ b/js/htk/column/button.js
@ -9,13 +9,10 @@ module.exports = new Class({
 		},
 		icon: {
 			type: String
-			,set: function(x)
-			{
+			,set: function(x) {
 				this._icon = x;
-				this.image = 'image/icon/light/'+ x +'.svg';
 			}
-			,get: function()
-			{
+			,get: function() {
 				return this._icon;
 			}
 		},
@ -60,13 +57,14 @@ module.exports = new Class({
 		button.disabled = this.disabled;
 		td.appendChild(button);
 	
-		var img = this.createElement('img');
-		img.src = this.image;
-		button.appendChild(img);
+		var span = this.createElement('span');
+		span.className = 'material-symbols-rounded icon';
+		span.innerText = this._icon;
+		button.appendChild(span);

 		if (this.tip) {
 			button.title = _(this.tip);
-			img.title = _(this.tip);
+			span.title = _(this.tip);
 		}

 		return td;
--- a/js/htk/field/bar-button.js
+++ b/js/htk/field/bar-button.js
@ -1,22 +1,10 @@

-var Button = require ('./button');
+var Button = require('./button');

 module.exports = new Class
 ({
 	Extends: Button
 	,Tag: 'htk-bar-button'
-	,Properties:
-	{
-		icon:
-		{
-			type: String
-			,set: function (x)
-			{
-				this.img.src = 'image/icon/dark/'+ x +'.svg';
-			}
-			
-		}
-	}
 	
 	,_showText: true
 });
--- a/js/htk/field/button.js
+++ b/js/htk/field/button.js
@ -1,54 +1,42 @@

-module.exports = new Class
-({
+module.exports = new Class({
 	Extends: Htk.Field
 	,Tag: 'htk-button'
 	,Properties:
 	{
-		image:
-		{
+		image: {
 			type: String
-			,set: function (x)
-			{
-				this.img.src = x;
+			,set: function(x) {
+				this.span.innerText = x;
 			}
 		},
-		icon:
-		{
+		icon: {
 			type: String
-			,set: function (x)
-			{
-				this.img.src = 'image/icon/light/'+ x +'.svg';
+			,set: function(x) {
+				this.span.innerText = x;
 			}
 		},
-		tip:
-		{
+		tip: {
 			type: String
-			,set: function (x)
-			{
-				if (x)
-				{
+			,set: function(x) {
+				if (x) {
 					this.node.title = _(x);
-					this.img.title = _(x);
+					this.span.title = _(x);
 				}
 				
-				this.renderContent ();
+				this.renderContent();
 			}
-			,get: function ()
-			{
+			,get: function() {
 				return this.node.title;
 			}
 		},
-		showText:
-		{
+		showText: {
 			type: Boolean
-			,set: function (x)
-			{					
+			,set: function(x) {					
 				this._showText = x;
-				this.renderContent ();
+				this.renderContent();
 			}
-			,get: function ()
-			{
+			,get: function() {
 				return this._showText;
 			}
 		}
@ -56,31 +44,29 @@ module.exports = new Class
 	
 	,_showText: false
 	
-	,render: function ()
-	{
-		var node = this.createRoot ('button');
+	,render: function() {
+		var node = this.createRoot('button');
 		node.className = 'htk-button';
-		node.addEventListener ('click', this.onClick.bind (this));
+		node.addEventListener('click', this.onClick.bind(this));
 	
-		this.img = this.createElement ('img');
-		node.appendChild (this.img);
+		this.span = this.createElement('span');
+		this.span.className = 'material-symbols-rounded icon';
+		node.appendChild(this.span);
 	}
 	
-	,renderContent: function ()
-	{
+	,renderContent: function() {
 		if (this._textNode)
-			Vn.Node.remove (this._textNode);
+			Vn.Node.remove(this._textNode);

-		if (this._showText && this.node.title)
-		{
-			this._textNode = this.createElement ('span');
-			this._textNode.appendChild (this.createTextNode (this.node.title));
-			this.node.appendChild (this._textNode);
+		if (this._showText && this.node.title) {
+			this._textNode = this.createElement('span');
+			this._textNode.className = 'text';
+			this._textNode.appendChild(this.createTextNode(this.node.title));
+			this.node.appendChild(this._textNode);
 		}
 	}

-	,onClick: function ()
-	{
-		this.signalEmit ('click', this._form);
+	,onClick: function() {
+		this.signalEmit('click', this._form);
 	}
 });
--- a/js/htk/field/entry.js
+++ b/js/htk/field/entry.js
@ -3,16 +3,56 @@ module.exports = new Class
 ({
 	Extends: Htk.Field
 	,Tag: 'htk-entry'
-	
-	,render: function ()
+	,Properties:
 	{
-		var node = this.createRoot ('input');
-		node.type = 'text';
-		node.addEventListener ('change', this._onChange.bind (this));
+		/**
+		 * Displayed text when there is no content.
+		 */
+		placeholder:
+		{ 
+			type: String
+			,set: function(x) {
+				this.node.placeholder = x;
+			}
+			,get: function() {
+				return this.node.placeholder;
+			}
+		},
+		/**
+		 * Whether is disabled.
+		 */
+		disabled:
+		{ 
+			type: Boolean
+			,set: function(x) {
+				this.node.disabled = x;
+			}
+			,get: function() {
+				return this.node.disabled;
+			}
+		},
+		/**
+		 * Whether is readonly data.
+		 */
+		 readonly:
+		{ 
+			type: Boolean
+			,set: function(x) {
+				this.node.readonly = x;
+			}
+			,get: function() {
+				return this.node.readonly;
+			}
+		}
 	}
 	
-	,_onChange: function (event)
-	{
+	,render: function() {
+		var node = this.createRoot('input');
+		node.type = 'text';
+		node.addEventListener('change', this._onChange.bind(this));
+	}
+
+	,_onChange: function(event) {
 		var newValue;
 	
 		if (this.node.value == '')
@ -20,19 +60,17 @@ module.exports = new Class
 		else
 			newValue = this.node.value;

-		this.valueChanged (newValue);
+		this.valueChanged(newValue);
 	}

-	,putValue: function (value)
-	{
+	,putValue: function(value) {
 		if (!value)
 			this.node.value = '';
 		else
 			this.node.value = value;
 	}

-	,setEditable: function (editable)
-	{
+	,setEditable: function(editable) {
 		this.node.readOnly = !editable;
 	}
 });
--- a/js/htk/grid.js
+++ b/js/htk/grid.js
@ -1,8 +1,7 @@

-var Widget = require ('./widget');
+var Widget = require('./widget');

-module.exports = new Class
-({
+module.exports = new Class({
 	Extends: Widget
 	,Tag: 'htk-grid'
 	,Child: 'model'
@ -14,9 +13,8 @@ module.exports = new Class
 		model:
 		{
 			type: Db.Model
-			,set: function (x)
-			{
-				this.link ({_model: x},
+			,set: function(x) {
+				this.link({_model: x},
 				{
 					 'status-changed': this.onModelChange
 					,'row-deleted': this.onRowDelete
@ -25,14 +23,13 @@ module.exports = new Class
 					,'updatable-changed': this.onUpdatableChange
 				});

-				var set = new Db.SimpleIterator ({model: x});
-				this.link ({_set: set});
+				var set = new Db.SimpleIterator({model: x});
+				this.link({_set: set});
 				
-				this.onUpdatableChange ();
-				this.onModelChange ();
+				this.onUpdatableChange();
+				this.onModelChange();
 			}
-			,get: function ()
-			{
+			,get: function() {
 				return this._model;
 			}
 		},
@ -50,13 +47,11 @@ module.exports = new Class
 		showHeader:
 		{
 			type: Boolean
-			,set: function (x)
-			{
+			,set: function(x) {
 				this._showHeader = x;
 				this.thead.style.display = x ? 'table-header-group' : 'none';
 			}
-			,get: function ()
-			{
+			,get: function() {
 				return this._showHeader;
 			}
 		}
@ -64,209 +59,180 @@ module.exports = new Class

 	,_model: null
 	,_set: null
-	,columns: new Array ()
+	,columns: new Array()
 	,internalColumn: null
 	,internalColumns: 0
 	,sortColumn: -1
 	,sortWay: null
 	,_showHeader: true
 	
-	,render: function ()
-	{
-		var table = this.createRoot ('table');
+	,render: function() {
+		var table = this.createRoot('table');
 		table.className = 'htk-grid';

-		var thead = this.createElement ('thead');
-		table.appendChild (thead);
+		var thead = this.createElement('thead');
+		table.appendChild(thead);
 		
-		this.thead = this.createElement ('tr')
-		thead.appendChild (this.thead);
+		this.thead = this.createElement('tr')
+		thead.appendChild(this.thead);
 		
-		this.tbody = this.createElement ('tbody');
-		table.appendChild (this.tbody);
+		this.tbody = this.createElement('tbody');
+		table.appendChild(this.tbody);
 	}
 	
-	,appendChild: function (child)
-	{
-		this.appendColumn (child);
+	,appendChild: function(child) {
+		this.appendColumn(child);
 	}

-	,removeClicked: function (column, value, row)
-	{
-		if (confirm (_('ReallyDelete')))
-			this._model.deleteRow (row);
+	,removeClicked: function(column, value, row) {
+		if (confirm(_('ReallyDelete')))
+			this._model.deleteRow(row);
 	}

-	,onRowDelete: function (model, row)
-	{
+	,onRowDelete: function(model, row) {
 		var tableRows = this.tbody.childNodes;
-		this.tbody.removeChild (tableRows[row]);
+		this.tbody.removeChild(tableRows[row]);
 		
 		for (var i = row; i < tableRows.length; i++)
 			tableRows[i].className = (i % 2) ? 'pair-row' : '';
 	
-		this.showNoRecordsFound ();
+		this.showNoRecordsFound();
 	}

-	,onRowInsert: function (model)
-	{
-		this.buildRow (1);
+	,onRowInsert: function() {
+		this.buildRow(1);
 	}

-	,renderCell: function (row, column, tr)
-	{
+	,renderCell: function(row, column, tr) {
 		if (column.columnIndex != -1)
 			column.value = this._model.data[row][column.columnIndex];

-		if (column.renderer)
-		{
+		if (column.renderer) {
 			this._set.row = row;
-			column.renderer (column, this._set);
+			column.renderer(column, this._set);
 		}

-		return column.render (tr);
+		return column.render(tr);
 	}
 	
-	,refreshRow: function (row, columns)
-	{
+	,refreshRow: function(row, columns) {
 		var x = this.columns;
 		var tr = this.tbody.childNodes[row];
 		
 		for (var i = 0; i < x.length; i++)
-		if (x[i].renderer || columns.indexOf (x[i].columnIndex) != -1)
-		{
-			var cell = this.renderCell (row, x[i], tr);
-			tr.replaceChild (cell, tr.childNodes[i]);
+		if (x[i].renderer || columns.indexOf(x[i].columnIndex) != -1) {
+			var cell = this.renderCell(row, x[i], tr);
+			tr.replaceChild(cell, tr.childNodes[i]);
 		}
 	}

-	,onRowUpdate: function (model, row, columns)
-	{
-		this.refreshRow (row, columns);
+	,onRowUpdate: function(model, row, columns) {
+		this.refreshRow(row, columns);
 	}

-	,buildRow: function (count)
-	{
-		for (var i = 0; i < count; i++)
-		{
-			var tr = this.createElement ('tr');
+	,buildRow: function(count) {
+		for (var i = 0; i < count; i++) {
+			var tr = this.createElement('tr');
 		
 			if (i % 2)
 				tr.className = 'pair-row';

-			for (var j = 0; j < this.columns.length; j++)
-			{
-				var cell = this.renderCell (i, this.columns[j], tr);
-				tr.appendChild (cell);
+			for (var j = 0; j < this.columns.length; j++) {
+				var cell = this.renderCell(i, this.columns[j], tr);
+				tr.appendChild(cell);
 			}

-			this.tbody.appendChild (tr);
+			this.tbody.appendChild(tr);
 		}
 	}

-	,onUpdatableChange: function ()
-	{
-		if (this._model && this._model.updatable)
-		{
-			if (!this.internalColumn)
-			{
-				this.internalColumn = new Htk.ColumnButton
-				({
+	,onUpdatableChange: function() {
+		if (this._model && this._model.updatable) {
+			if (!this.internalColumn) {
+				this.internalColumn = new Htk.ColumnButton({
 					 icon: 'delete'
 					,tip: _('Remove')
 				});
-				this.internalColumn.on ('clicked', this.removeClicked, this);
-				this.insertInternalColumn (0, this.internalColumn);
+				this.internalColumn.on('clicked', this.removeClicked, this);
+				this.insertInternalColumn(0, this.internalColumn);
 			}
-		}
-		else if (this.internalColumn)
-		{
+		} else if (this.internalColumn) {
 			this.internalColumn = null;
-			this.removeInternalColumn (0);
+			this.removeInternalColumn(0);
 		}
 	}

-	,onModelChange: function ()
-	{
+	,onModelChange: function() {
 		var emptyMessage = this.emptyMessage ?
 			this.emptyMessage : _('NoData');
 	
-		if (!this._model)
-		{
-			this.showMessage (emptyMessage, 'refresh.svg');
+		if (!this._model) {
+			this.showMessage(emptyMessage, 'refresh');
 			return;
 		}

-		this._node.removeChild (this.tbody);
-		this.tbody = this.createElement ('tbody');
+		this._node.removeChild(this.tbody);
+		this.tbody = this.createElement('tbody');

-		switch (this._model.status)
-		{
+		switch (this._model.status) {
 			case Db.Model.Status.READY:
 			{
 				for (var i = 0; i < this.columns.length; i++)
-					this.columns[i].updateColumnIndex (this._model);
+					this.columns[i].updateColumnIndex(this._model);
 			
-				this.buildRow (this._model.numRows);
-				this.showNoRecordsFound ();
+				this.buildRow(this._model.numRows);
+				this.showNoRecordsFound();
 				break;
 			}
 			case Db.Model.Status.LOADING:
-				this.showMessage (_('Loading'), null);
+				this.showMessage(_('Loading'), null);
 				break;
 			case Db.Model.Status.CLEAN:
-				this.showMessage (emptyMessage, 'refresh');
+				this.showMessage(emptyMessage, 'refresh');
 				break;
 			case Db.Model.Status.ERROR:
-				this.showMessage (_('ErrorLoadingData'), 'error');
+				this.showMessage(_('ErrorLoadingData'), 'error');
 				break;
 		}

-		this._node.appendChild (this.tbody);
+		this._node.appendChild(this.tbody);
 	}

-	,showNoRecordsFound: function ()
-	{
+	,showNoRecordsFound: function() {
 		if (this._model.numRows == 0)
-			this.showMessage (_('EmptyList'), 'clean');
+			this.showMessage(_('EmptyList'), 'block');
 	}

-	,showMessage: function (message, src)
-	{
+	,showMessage: function(message, src) {
 		if (this.columns.length == 0)
 			return;
 	
-		var tr =  this.createElement ('tr');
-		this.tbody.appendChild (tr);
+		var tr =  this.createElement('tr');
+		this.tbody.appendChild(tr);

-		var td = this.createElement ('td');
+		var td = this.createElement('td');
 		td.className = 'message';
 		td.colSpan = this.columns.length;
-		tr.appendChild (td);
+		tr.appendChild(td);
 		
-		if (src)
-		{
-			var img = this.createElement ('img');
-			img.alt = '';
-			img.src = 'image/icon/light/'+ src +'.svg';
-			td.appendChild (img);
-		}
-		else
-		{
-			var spinner = new Htk.Spinner ();
-			spinner.start ();
-			td.appendChild (spinner.node);
+		if (src) {
+			const icon = new Htk.Icon({
+				name: src
+			});
+			td.appendChild(icon.node);
+		} else {
+			var spinner = new Htk.Spinner();
+			spinner.start();
+			td.appendChild(spinner.node);
 		}
 		
-		var message = this.createTextNode (message);
-		td.appendChild (message);
+		var message = this.createTextNode(message);
+		td.appendChild(message);
 	}
 	
-	,scrollToRow: function (row)
-	{
-		if (row >= 0)
-		{
-			var height = parseInt (this.tr.style.height);
+	,scrollToRow: function(row) {
+		if (row >= 0) {
+			var height = parseInt(this.tr.style.height);
 			this.node.scrollTop = (row - 2) * height;
 		
 			if (this.selectedRow)
@ -277,12 +243,10 @@ module.exports = new Class
 		}
 	}

-	,sortModel: function (column)
-	{
+	,sortModel: function(column) {
 		var columnIndex = column.columnIndex;

-		if (this._model && columnIndex != -1)
-		{
+		if (this._model && columnIndex != -1) {
 			if (this.sortColumn === columnIndex
 			&& this.sortWay === Db.Model.SortWay.ASC)
 				this.sortWay = Db.Model.SortWay.DESC;
@ -291,112 +255,99 @@ module.exports = new Class

 			this.sortColumn = columnIndex;
 		
-			this._model.sort (columnIndex, this.sortWay);
+			this._model.sort(columnIndex, this.sortWay);
 		}
 	}
 	
-	,columnChanged: function (column, row, newValue)
-	{
+	,columnChanged: function(column, row, newValue) {
 		var columnIndex = column.columnIndex;

 		if (columnIndex != -1)
-			this._model.setByIndex (row, columnIndex, newValue);
+			this._model.setByIndex(row, columnIndex, newValue);
 	}
 	
-	,addColumn: function (pos, column)
-	{
-		var header = column.renderHeader ();
+	,addColumn: function(pos, column) {
+		var header = column.renderHeader();

-		if (pos == -1 || pos >= this.columns.length)
-		{
-			pos = this.columns.push (column) - 1;
-			this.thead.appendChild (header);
-		}
-		else
-		{
-			this.columns.splice (pos, 0, column);
-			this.thead.insertBefore (header, this.thead.childNodes[pos]);
+		if (pos == -1 || pos >= this.columns.length) {
+			pos = this.columns.push(column) - 1;
+			this.thead.appendChild(header);
+		} else {
+			this.columns.splice(pos, 0, column);
+			this.thead.insertBefore(header, this.thead.childNodes[pos]);
 		}

-		header.addEventListener ('click', 
-			this.sortModel.bind (this, column));
+		header.addEventListener('click', 
+			this.sortModel.bind(this, column));
 		header.title = _('Sort');

-		column.on ('changed', this.columnChanged, this);
+		column.on('changed', this.columnChanged, this);
 		
 		var rows = this.tbody.childNodes;
 		
 		if (this._model && this._model.numRows > 0)
-		for (var i = 0; i < rows.length; i++)
-		{
-			var cell = this.renderCell (i, column, rows[i]);
-			rows[i].insertBefore (cell, rows[i].childNodes[pos+1]);
+		for (var i = 0; i < rows.length; i++) {
+			var cell = this.renderCell(i, column, rows[i]);
+			rows[i].insertBefore(cell, rows[i].childNodes[pos+1]);
 		}

 		return pos;
 	}

-	,insertInternalColumn: function (pos, column)
-	{
+	,insertInternalColumn: function(pos, column) {
 		if (pos < 0 || pos > this.internalColumns)
 			pos = this.internalColumns;

 		this.internalColumns++;
-		return this.addColumn (pos, column);
+		return this.addColumn(pos, column);
 	}

-	,insertColumn: function (pos, column)
-	{
+	,insertColumn: function(pos, column) {
 		if (pos > 0)
 			pos += this.internalColumns;

-		return this.addColumn (pos, column) - this.internalColumns;
+		return this.addColumn(pos, column) - this.internalColumns;
 	}

-	,appendColumn: function (column)
-	{
-		return this.insertColumn (-1, column);
+	,appendColumn: function(column) {
+		return this.insertColumn(-1, column);
 	}

-	,deleteColumn: function (pos)
-	{
+	,deleteColumn: function(pos) {
 		if (pos < 0 || pos >= this.columns.length)
 			return;

-		this.columns.splice (pos, 1);
-		this.thead.removeChild (this.thead.childNodes[pos]);
+		this.columns.splice(pos, 1);
+		this.thead.removeChild(this.thead.childNodes[pos]);
 		
 		var rows = this.tbody.childNodes;
 		
 		if (this._model && this._model.numRows > 0)
 		for (var i = 0; i < rows.length; i++)
-			rows[i].removeChild (rows[i].childNodes[pos]);
+			rows[i].removeChild(rows[i].childNodes[pos]);
 	}

-	,removeInternalColumn: function (pos)
-	{
+	,removeInternalColumn: function(pos) {
 		if (this.internalColumns == 0)
 			return;
 	
 		if (pos < 0 || pos > this.internalColumns)
 			pos = this.internalColumns;
 	
-		this.deleteColumn (pos);
+		this.deleteColumn(pos);
 		this.internalColumns--;
 	}

-	,removeColumn: function (pos)
-	{
+	,removeColumn: function(pos) {
 		if (pos > 0)
 			pos += this.internalColumns;
 		
-		this.deleteColumn (pos);
+		this.deleteColumn(pos);
 	}

-	,reloadModel: function ()
-	{
+	,reloadModel: function() {
 		if (this._model != null)
-			this.onModelChange ();
+			this.onModelChange();
 	}
 });

--- a/js/htk/htk.js
+++ b/js/htk/htk.js
@ -1,54 +1,54 @@

-require ('db/db');
-require ('./style.css');
+require('db/db');
+require('./style.scss');

 Htk = module.exports = {
-	 NodeBuilder  : require ('./node-builder')
-	,Widget       : require ('./widget')
-	,Component    : require ('./component')
-	,Popup        : require ('./popup')
-	,Dialog       : require ('./dialog')
-	,Toast        : require ('./toast')
-	,Repeater     : require ('./repeater')
-	,Grid         : require ('./grid')
-	,Spinner      : require ('./spinner')
-	,Icon         : require ('./icon')
-	,FullImage    : require ('./full-image')
-	,ImageEditor  : require ('./image-editor')
-	,Assistant    : require ('./assistant')
-	,AssistantBar : require ('./assistant-bar')
-	,Step         : require ('./step')
-	,Loader       : require ('./loader')
-	,Field        : require ('./field')
-	,Column       : require ('./column')
+	 NodeBuilder  : require('./node-builder')
+	,Widget       : require('./widget')
+	,Component    : require('./component')
+	,Popup        : require('./popup')
+	,Dialog       : require('./dialog')
+	,Toast        : require('./toast')
+	,Repeater     : require('./repeater')
+	,Grid         : require('./grid')
+	,Spinner      : require('./spinner')
+	,Icon         : require('./icon')
+	,FullImage    : require('./full-image')
+	,ImageEditor  : require('./image-editor')
+	,Assistant    : require('./assistant')
+	,AssistantBar : require('./assistant-bar')
+	,Step         : require('./step')
+	,Loader       : require('./loader')
+	,Field        : require('./field')
+	,Column       : require('./column')
 };

 var Fields = {
-	 Text         : require ('./field/text')
-	,Html         : require ('./field/html')
-	,Entry        : require ('./field/entry')
-	,RadioGroup   : require ('./field/radio-group')
-	,Radio        : require ('./field/radio')
-	,Label        : require ('./field/label')
-	,TextArea     : require ('./field/text-area')
-	,Spin         : require ('./field/spin')
-	,Check        : require ('./field/check')
-	,Select       : require ('./field/select')
-	,Calendar     : require ('./field/calendar')
-	,DateChooser  : require ('./field/date-chooser')
-	,Image        : require ('./field/image')
-	,Button       : require ('./field/button')
-	,BarButton    : require ('./field/bar-button')
-	,Table        : require ('./field/table')
-	,SearchEntry  : require ('./field/search-entry')
-	,ColumnButton : require ('./column/button')
-	,ColumnLink   : require ('./column/link')
-	,ColumnDate   : require ('./column/date')
-	,ColumnImage  : require ('./column/image')
-	,ColumnRadio  : require ('./column/radio')
-	,ColumnSpin   : require ('./column/spin')
-	,ColumnText   : require ('./column/text')
-	,ColumnCheck  : require ('./column/check')
+	 Text         : require('./field/text')
+	,Html         : require('./field/html')
+	,Entry        : require('./field/entry')
+	,RadioGroup   : require('./field/radio-group')
+	,Radio        : require('./field/radio')
+	,Label        : require('./field/label')
+	,TextArea     : require('./field/text-area')
+	,Spin         : require('./field/spin')
+	,Check        : require('./field/check')
+	,Select       : require('./field/select')
+	,Calendar     : require('./field/calendar')
+	,DateChooser  : require('./field/date-chooser')
+	,Image        : require('./field/image')
+	,Button       : require('./field/button')
+	,BarButton    : require('./field/bar-button')
+	,Table        : require('./field/table')
+	,SearchEntry  : require('./field/search-entry')
+	,ColumnButton : require('./column/button')
+	,ColumnLink   : require('./column/link')
+	,ColumnDate   : require('./column/date')
+	,ColumnImage  : require('./column/image')
+	,ColumnRadio  : require('./column/radio')
+	,ColumnSpin   : require('./column/spin')
+	,ColumnText   : require('./column/text')
+	,ColumnCheck  : require('./column/check')
 };

 for (var field in Fields)
--- a/js/htk/icon.js
+++ b/js/htk/icon.js
@ -1,48 +1,38 @@

-var Widget = require ('./widget');
+var Widget = require('./widget');

-module.exports = new Class
-({
+module.exports = new Class({
 	Extends: Widget
 	,Tag: 'htk-icon'
 	,Properties:
 	{
-		icon:
-		{
+		name: {
 			type: String
-			,set: function (x)
-			{
+			,set: function(x) {
 				this._icon = x;
-				this._setIcon ();
+				this._setIcon();
 			}
-			,get: function ()
-			{
+			,get: function() {
 				return this._icon;
 			}
 			
 		},
-		theme:
-		{
+		theme: {
 			type: String
-			,set: function (x)
-			{
+			,set: function(x) {
 				this._theme = x;
-				this._setIcon ();
+				this._setIcon();
 			}
-			,get: function ()
-			{
+			,get: function() {
 				return this._theme;
 			}
 		},
-		alt:
-		{
+		alt: {
 			type: String
-			,set: function (x)
-			{
+			,set: function(x) {
 				this.node.alt = x;
 			}
-			,get: function ()
-			{
+			,get: function() {
 				return this.node.alt;
 			}
 		}
@ -50,14 +40,12 @@ module.exports = new Class

 	,_icon: null

-	,render: function ()
-	{
-		this.createRoot ('img');
+	,render: function() {
+		const node = this.createRoot('span');
+		node.className = 'material-symbols-rounded icon';
 	}
 	
-	,_setIcon: function ()
-	{
-		var theme = this._theme ? this._theme : 'light';
-		this.node.src = 'image/icon/'+ theme +'/'+ this._icon +'.svg';
+	,_setIcon: function() {
+		this.node.innerText = this._icon;
 	}
 });
--- a/js/htk/image-editor.js
+++ b/js/htk/image-editor.js
@ -1,7 +1,7 @@

 var Component = require('./component');
 var Toast = require('./toast');
-var Tpl = require('./image-editor.xml');
+var Tpl = require('./image-editor.xml').default;

 /**
 * A form to handle the image database, it allows to add new images or
@ -22,8 +22,9 @@ module.exports = new Class({
 		this.builderInitString(Tpl);

 		var self = this;
-		this.$('form').onsubmit = function()
-			{ self._onSubmit(); return false; };
+		this.$('form').onsubmit = function() {
+			self._onSubmit(); return false; 
+		};

 		this.parent(props);
 	},
--- a/js/htk/repeater.js
+++ b/js/htk/repeater.js
@ -1,8 +1,7 @@

-var Widget = require ('./widget');
+var Widget = require('./widget');

-module.exports = new Class
-({
+module.exports = new Class({
 	Extends: Widget
 	,Tag: 'htk-repeater'
 	,Child: 'model'
@ -14,9 +13,8 @@ module.exports = new Class
 		model:
 		{
 			type: Db.Model
-			,set: function (x)
-			{
-				this.link ({_model: x},
+			,set: function(x) {
+				this.link({_model: x},
 				{
 					 'status-changed': this._onModelChange
 					,'row-deleted': this._onRowDelete
@ -24,10 +22,9 @@ module.exports = new Class
 					,'row-inserted': this._onRowInsert
 				});
 				
-				this._onModelChange ();
+				this._onModelChange();
 			}
-			,get: function ()
-			{
+			,get: function() {
 				this._model;
 			}
 		}
@ -37,12 +34,10 @@ module.exports = new Class
 		,formId:
 		{
 			type: String
-			,set: function (x)
-			{
+			,set: function(x) {
 				this._formId = x;
 			}
-			,get: function ()
-			{
+			,get: function() {
 				this._formId;
 			}
 		}
@ -53,12 +48,10 @@ module.exports = new Class
 		,renderer:
 		{
 			type: Function
-			,set: function (x)
-			{
+			,set: function(x) {
 				this._renderer = x;
 			}
-			,get: function ()
-			{
+			,get: function() {
 				this._renderer;
 			}
 		}
@ -68,13 +61,11 @@ module.exports = new Class
 		,showStatus:
 		{
 			type: Boolean
-			,set: function (x)
-			{
+			,set: function(x) {
 				this._showStatus = x;
 				this._onModelChange();
 			}
-			,get: function ()
-			{
+			,get: function() {
 				this._showStatus;
 			}
 		}
@ -92,176 +83,157 @@ module.exports = new Class
 	,_formId: 'form'
 	,_showStatus: true
 	
-	,render: function ()
-	{
-		var div = this.createRoot ('div');
+	,render: function() {
+		var div = this.createRoot('div');
 		
-		this._container = this.createElement ('div');
+		this._container = this.createElement('div');
 		this._container.className = 'htk-repeater';
-		div.appendChild (this._container);
+		div.appendChild(this._container);
 	}
 	
-	,loadXml: function (builderResult, node)
-	{
-		this.parent (builderResult, node);
+	,loadXml: function(builderResult, node) {
+		this.parent(builderResult, node);

-		var builder = this._builder = new Vn.Builder ();
-		builder.setParent (builderResult);
-		builder.loadXmlFromNode (node.firstElementChild);
+		var builder = this._builder = new Vn.Builder();
+		builder.setParent(builderResult);
+		builder.loadXmlFromNode(node.firstElementChild);

-		this._onModelChange ();
+		this._onModelChange();
 	}
 	
-	,getChild: function (index)
-	{
+	,getChild: function(index) {
 		return this._container.childNodes[index];
 	}
 	
-	,getBuilder: function (index)
-	{
+	,getBuilder: function(index) {
 		return this._childsData[index].builder;
 	}
 	
-	,getForm: function (index)
-	{
+	,getForm: function(index) {
 		return this._childsData[index].set;
 	}
 	
-	,_buildBox: function (index)
-	{
-		var set = new Db.SimpleIterator ({
+	,_buildBox: function(index) {
+		var set = new Db.SimpleIterator({
 			model: this._model,
 			row: index
 		});
 		
-		this._builder.add (this._formId, set);
-		var res = this._builder.load ();
-		res.link ();
+		this._builder.add(this._formId, set);
+		var res = this._builder.load();
+		res.link();

-		this._childsData.push ({
+		this._childsData.push({
 			builder: res,
 			set: set
 		});
 		
 		if (this._renderer)
-			this._renderer (res, set);
+			this._renderer(res, set);
 			
-		return res.getMain ();
+		return res.getMain();
 	}

-	,_onModelChange: function ()
-	{
+	,_onModelChange: function() {
 		if (!this._model || !this._builder)
 			return;

-		this.node.removeChild (this._container);
-		Vn.Node.removeChilds (this._container);
+		this.node.removeChild(this._container);
+		Vn.Node.removeChilds(this._container);

-		this._freeChildsData ();
+		this._freeChildsData();
 		this._childsData = [];

-		switch (this._model.status)
-		{
+		switch (this._model.status) {
 			case Db.Model.Status.READY:
 			{
 				for (var i = 0; i < this._model.numRows; i++)
-					this._container.appendChild (this._buildBox (i));
+					this._container.appendChild(this._buildBox(i));

-				this._showNoRecordsFound ();
+				this._showNoRecordsFound();
 				break;
 			}
 			case Db.Model.Status.LOADING:
-				this._showMessage (_('Loading'), null);
+				this._showMessage(_('Loading'), null);
 				break;
 			case Db.Model.Status.CLEAN:
 			{	
 				var emptyMessage = this.emptyMessage ?
 					this.emptyMessage : _('NoData');
-				this._showMessage (emptyMessage, 'refresh');
+				this._showMessage(emptyMessage, 'refresh');
 				break;
 			}
 			case Db.Model.Status.ERROR:
-				this._showMessage (_('ErrorLoadingData'), 'error');
+				this._showMessage(_('ErrorLoadingData'), 'error');
 				break;
 		}
 	
-		this.node.appendChild (this._container);
-		this.signalEmit ('change');
+		this.node.appendChild(this._container);
+		this.signalEmit('change');
 	}

-	,_showNoRecordsFound: function ()
-	{
+	,_showNoRecordsFound: function() {
 		if (this._model.numRows === 0)
-			this._showMessage (_('EmptyList'), 'clean');
+			this._showMessage(_('EmptyList'), 'block');
 	}

-	,_showMessage: function (message, src)
-	{
+	,_showMessage: function(message, src) {
 		if (!this._showStatus)
 			return;

-		var div =  this.createElement ('div');
+		var div =  this.createElement('div');
 		div.className = 'message';
-		this._container.appendChild (div);
+		this._container.appendChild(div);
 		
-		if (src)
-		{
-			var img = this.createElement ('img');
-			img.alt = '';
-			img.src = 'image/icon/light/'+ src +'.svg';
-			div.appendChild (img);
-		}
-		else
-		{
-			var spinner = new Htk.Spinner ();
-			spinner.start ();
-			div.appendChild (spinner.node);
+		if (src) {
+			const icon = new Htk.Icon({
+				name: src
+			});
+			div.appendChild(icon.node);
+		} else {
+			var spinner = new Htk.Spinner();
+			spinner.start();
+			div.appendChild(spinner.node);
 		}
 		
-		div.appendChild (this.createTextNode (message));
+		div.appendChild(this.createTextNode(message));
 	}

-	,_onRowDelete: function (model, row)
-	{
-		Vn.Node.remove (this._container.childNodes[row]);
-		this._unrefChildData (row);
-		this._childsData.splice (row, 1);		
+	,_onRowDelete: function(model, row) {
+		Vn.Node.remove(this._container.childNodes[row]);
+		this._unrefChildData(row);
+		this._childsData.splice(row, 1);		
 		
 		for (var i = row; i < this._model.numRows; i++)
 			this._childsData[i].set.row = i;
 		
-		this._showNoRecordsFound ();
+		this._showNoRecordsFound();
 	}

-	,_onRowUpdate: function (model, row)
-	{
-		this._childsData[row].set.iterChanged ();
+	,_onRowUpdate: function(model, row) {
+		this._childsData[row].set.iterChanged();
 	}

-	,_onRowInsert: function (model, row)
-	{
-		var box = this._buildBox (row);
-		this._container.appendChild (box);
+	,_onRowInsert: function(model, row) {
+		var box = this._buildBox(row);
+		this._container.appendChild(box);
 	}
 	
-	,_freeChildsData: function ()
-	{
+	,_freeChildsData: function() {
 		if (this._childsData)
 		for (var i = 0; i < this._childsData.length; i++)
-			this._unrefChildData (i);
+			this._unrefChildData(i);
 	}
 	
-	,_unrefChildData: function (index)
-	{
+	,_unrefChildData: function(index) {
 		var childData = this._childsData[index];
-		childData.set.unref ();
-		childData.builder.unref ();
+		childData.set.unref();
+		childData.builder.unref();
 	}
 	
-	,destroy: function ()
-	{
-		this._freeChildsData ();
-		this.parent ();
+	,destroy: function() {
+		this._freeChildsData();
+		this.parent();
 	}
 });

--- a/js/htk/style.scss
+++ b/js/htk/style.scss
@ -1,110 +1,105 @@

 /* Grid */

-.htk-grid
-{
+.htk-grid {
 	margin: auto;
 	border-collapse: collapse;
+
+	& > thead > tr,
+	& > tfoot > tr {
+		background-color:  #8cc63f;
+		vertical-align: middle;
+		height: 3em;
+	}
+	th {
+		color: white;
+		cursor: pointer;
+		font-weight: normal;
+		padding: 0 0.4em;
+	}
+	th:hover {
+		background-color: rgba(1, 1, 1, 0.2);
+	}
+	tr {
+		height: 3.5em;
+	}
+	& > tfoot a,
+	& > thead a {
+		color: black;
+	}
+	tr.pair-row {
+		background-color: transparent;
+	}
+	& > tbody tr {
+		border-top: 1px solid #DDD;
+	}
+	& > tbody tr:first-child {
+		border-top: none;
+	}
+	& > tbody td {
+		margin: 0;
+		padding: 0 0.5em;
+	}
+	th,
+	td {
+		text-align: left;
+	}
+	td:first-child,
+	th:first-child {
+		padding-left: 1em;
+	}
+	td:last-child,
+	th:last-child {
+		padding-right: 1em;
+	}
+	.message {
+		padding: 1.5em;
+		text-align: center;
+	}
+	.message > * {
+		display: inline-block;
+		vertical-align: middle;
+		padding-right: .8em;
+	}
 }
-.htk-grid > thead > tr,
-.htk-grid > tfoot > tr
-{
-	background-color:  #009688;
-	vertical-align: middle;
-	height: 3em;
-}
-.htk-grid th
-{
-	color: white;
-	cursor: pointer;
-	font-weight: normal;
-	padding: 0 0.4em;
-}
-.htk-grid th:hover
-{
-	background-color: rgba(1, 1, 1, 0.2);
-}
-.htk-grid tr
-{
-	height: 3.5em;
-}
-.htk-grid > tfoot a,
-.htk-grid > thead a
-{
-	color: black;
-}
-.htk-grid tr.pair-row
-{
-	background-color: transparent;
-}
-.htk-grid > tbody tr
-{
-	border-top: 1px solid #DDD;
-}
-.htk-grid > tbody tr:first-child
-{
-	border-top: none;
-}
-.htk-grid > tbody td
-{
-	margin: 0;
-	padding: 0 0.5em;
-}
-.htk-grid th,
-.htk-grid td
-{
-	text-align: left;
-}
-.htk-grid td:first-child,
-.htk-grid th:first-child
-{
-	padding-left: 1em;
-}
-.htk-grid td:last-child,
-.htk-grid th:last-child
-{
-	padding-right: 1em;
-}
-.htk-grid .message
-{
-	padding: 1.5em;
-	text-align: center;
-}
-.htk-grid .message > *
-{
-	display: inline-block;
-	vertical-align: middle;
-	padding-right: 0.8em;
-}
-.htk-grid .message > img
-{
-	height: 1.8em;
+
+/* Repater */
+
+.htk-repeater {
+	& > .message {
+		padding: 1.5em;
+		text-align: center;
+
+		& > * {
+			vertical-align: middle;
+		}
+		& > span,
+		& > .htk-spinner {
+			display: inline-block;
+			padding-right: 10px;
+		}
+	}
 }

 /* Grid cells */

-th.cell-spin
-{
+th.cell-spin {
 	text-align: right;
 }
-td.cell-spin
-{
+td.cell-spin {
 	width: 2.5em;
 	text-align: right;
 }
 th.cell-check,
-th.cell-radio
-{
+th.cell-radio {
 	text-align: center;
 }
-td.cell-button
-{
+td.cell-button {
 	max-width: 1em;
 	text-align: center;
 }
 td.cell-button > button,
-td.cell-button > a
-{
+td.cell-button > a {
 	display: inline-block;
 	margin: 0 auto;
 	padding: .5em;
@ -114,24 +109,20 @@ td.cell-button > a
 	box-sizing: border-box;
 }
 td.cell-button > button:hover,
-td.cell-button > a:hover
-{
+td.cell-button > a:hover {
 	background-color: rgba(1, 1, 1, 0.1);
 }
-td.cell-button img
-{
+td.cell-button img {
 	height: 1.5em;
 	width: 1.5em;
 	display: block;
 	margin: auto;
 	padding: 0;
 }
-td.cell-image
-{
+td.cell-image {
 	text-align: center;
 }
-td.cell-image .htk-image
-{
+td.cell-image .htk-image {
 	max-width: 2.5em;
 	max-height: 2.5em;
 	display: block;
@ -140,35 +131,29 @@ td.cell-image .htk-image

 /* Select */

-.htk-select
-{
+.htk-select {
 	width: 100%;
 	height: 2em;
 	text-align: left;
 }
-.htk-select-menu
-{
+.htk-select-menu {
 	height: 100%;
 	max-height: 80em;
 	overflow: auto;
 	min-width: 14em;
 }
-.htk-select-menu tbody > tr
-{
+.htk-select-menu tbody > tr {
 	border-top: none;
 	height: 2.5em;
 }
-.htk-select-menu td.message
-{
+.htk-select-menu td.message {
 	padding: 1em;
 }
-.htk-select-menu tr:hover
-{
+.htk-select-menu tr:hover {
 	background-color: rgba(1, 1, 1, 0.1);
 	cursor: pointer;
 }
-.htk-select-menu td
-{
+.htk-select-menu td {
 	max-width: 11em;
 	overflow: hidden;
    text-overflow: ellipsis;
@ -177,88 +162,65 @@ td.cell-image .htk-image

 /* Button */

-.htk-button > span
-{
-	margin-left: .5em;
-}
+.htk-button {
+	display: flex;
+	align-items: center;
+	border-radius: 2em;
+	font-weight: bold;
+	gap: .5em;
+	padding: 0 .5em;

-/* Repater */
-
-.htk-repeater > .message
-{
-	padding: 1.5em;
-	text-align: center;
-}
-.htk-repeater > .message > *
-{
-	vertical-align: middle;
-}
-.htk-repeater > .message > img,
-.htk-repeater > .message > .htk-spinner
-{
-	display: inline-block;
-	padding-right: .8em;
-	height: 1.8em;
+	& > span.icon {
+		display: block;
+	}
 }

 /* Calendar */

-.htk-calendar
-{
+.htk-calendar {
 	width: 20em;
 	background-color: white;
 	border: none;
 	border-radius: .5em;
 }
-.htk-calendar table
-{
+.htk-calendar table {
 	border-collapse: collapse;
 }
 .htk-calendar thead tr,
-.htk-calendar tfoot tr
-{
-	background-color: #8cc63f;
+.htk-calendar tfoot tr {
+	background-color: #888;
 	color: white;
 	font-weight: normal;
 	vertical-align: middle;
 	text-align: center;
 	height: 3em;
 }
-.htk-calendar thead span
-{
+.htk-calendar thead span {
 	color: white;
 }
-.htk-calendar thead tr
-{
+.htk-calendar thead tr {
 	border-bottom: none;
 }
-.htk-calendar tfoot tr
-{
+.htk-calendar tfoot tr {
 	border-top: none;
 }
-.htk-calendar th.button
-{
+.htk-calendar th.button {
 	display: table-cell;
 }
-.htk-calendar th.button:hover
-{
+.htk-calendar th.button:hover {
 	cursor: pointer;
 	background-color: rgba(1, 1, 1, 0.2);
 }
-.htk-calendar col
-{
+.htk-calendar col {
 	width: 14.2%;
 }
-.htk-calendar tr
-{
+.htk-calendar tr {
 	height: 2em;
 }
-.htk-calendar tbody td
-{
+.htk-calendar tbody td {
 	text-align: right;
 }
-.htk-calendar tbody td > div
-{
+.htk-calendar tbody td > div {
 	height: 2em;
 	width: 2em;
 	line-height: 2em;
@ -268,47 +230,39 @@ td.cell-image .htk-image
 	margin: 0 auto;
 	color: #555;
 }
-.htk-calendar div.disabled
-{
+.htk-calendar div.disabled {
 	color: #999;
 }
-.htk-calendar div.today
-{
+.htk-calendar div.today {
 	font-weight: bold;
 	color: black;
 }
-.htk-calendar div.selected
-{
+.htk-calendar div.selected {
 	color: white;
-	background-color: #009688;
+	background-color: #8cc63f;
 }
-.htk-calendar div.enabled:hover
-{
+.htk-calendar div.enabled:hover {
 	cursor: pointer;
-	background-color: #008678;
+	background-color: rgba(140, 198, 63, 0.8);
 	color: white;
 }

 /* Image */

-.htk-image
-{
+.htk-image {
 	position: relative;
 	overflow: hidden;
 }
-.htk-image.clickable:hover
-{
+.htk-image.clickable:hover {
 	cursor: pointer;
 	opacity: 0.85;
 }
-.htk-image > img
-{
+.htk-image > img {
 	display: block;
 	height: 100%;
 	width: 100%;
 }
-.htk-image > button
-{
+.htk-image > button {
 	position: absolute;
 	top: 0;
 	left: 0;
@ -316,12 +270,10 @@ td.cell-image .htk-image
 	padding: .15em;
 	display: none;
 }
-.htk-image:hover > button
-{
+.htk-image:hover > button {
 	display: block;
 }
-.htk-image > button > img
-{
+.htk-image > button > img {
 	display: block;
 	height: 1.2em;
 	height: 1.2em;
@ -329,13 +281,11 @@ td.cell-image .htk-image

 /* Full image */

-.htk-full-image img
-{
+.htk-full-image img {
 	display: block;
 	cursor: pointer;
 }
-.htk-full-image .htk-spinner
-{
+.htk-full-image .htk-spinner {
 	background-color: #FFF;
 	margin: .6em;
 	display: block;
@ -343,14 +293,12 @@ td.cell-image .htk-image

 /* Image editor */

-.htk-image-editor
-{
+.htk-image-editor {
 	width: 18em;
 	margin: 0 auto;
 	padding: 1.5em;
 }
-.htk-image-editor h2
-{
+.htk-image-editor h2 {
 	color: white;
 	background-color: #009688;
 	text-align: left;
@ -360,30 +308,25 @@ td.cell-image .htk-image
 	padding: 0.6em 0.8em;
 	margin: 0;
 }
-.htk-image-editor iframe
-{
+.htk-image-editor iframe {
 	display: none;
 }
-.htk-image-editor .footer
-{
+.htk-image-editor .footer {
 	margin-top: 2em;
 }
-.htk-image-editor .footer > .htk-spinner
-{
+.htk-image-editor .footer > .htk-spinner {
 	padding-right: 1.2em;
 	height: 1.3em;
 	width: 1.3em;
 }
 .htk-image-editor .footer > .htk-spinner,
-.htk-image-editor .footer > input
-{
+.htk-image-editor .footer > input {
 	float: right;
 }

 /* Toast */

-.htk-toast
-{
+.htk-toast {
 	z-index: 210;
 	display: block;
 	position: fixed;
@ -396,8 +339,7 @@ td.cell-image .htk-image
 	max-height: 40em;
 	overflow: visible;
 }
-.htk-toast > div
-{
+.htk-toast > div {
 	margin: .5em 0;
 	padding: .5em 2%;
 	border-radius: 0.1em;
@ -412,32 +354,27 @@ td.cell-image .htk-image
 	transition-duration: 200ms;
 	transition-timing-function: ease-out;
 }
-.htk-toast > div.show
-{
+.htk-toast > div.show {
 	opacity: 1;
 	transform: translateZ(0) translateY(0em);
 	-webkit-transform: translateZ(0) translateY(0em);
 }
-.htk-toast > .message
-{
+.htk-toast > .message {
 	background-color: #BBFFBB;
 	color: #363;
 }
-.htk-toast > .warning
-{
+.htk-toast > .warning {
 	background-color: #FFE0B2;
 	color: #C30;
 }
-.htk-toast > .error
-{
+.htk-toast > .error {
 	background-color: #FFCDD2;
 	color: #A00;
 }

 /* Popup */

-.htk-background
-{
+.htk-background {
 	position: fixed;
 	left: 0;
 	right: 0;
@ -448,55 +385,47 @@ td.cell-image .htk-image
 	opacity: 0;
 	transition: opacity 200ms ease-in-out;
 }
-.htk-popup
-{
+.htk-popup {
 	z-index: 200;
 	display: block;
 	position: fixed;
 	overflow: hidden;
 	background-color: white;
-	border-radius: 0.15em;
+	border-radius: 10px;
 	box-shadow: 0 0 0.4em rgba(1, 1, 1, 0.6);
 	box-sizing: content-box;
 }
-.htk-popup.modal
-{
+.htk-popup.modal {
 	position: absolute;
 	font-size: 1.2em;
 	top: 50%;
 	left: 50%;
 }
-.htk-popup > *
-{
+.htk-popup > * {
 	border-radius: 0.1em;
 }

 /* Dialog */

-.htk-dialog
-{
+.htk-dialog {
 	padding: 1.5em;
 	max-width: 20em;
 	font-weight: normal;
 	color: #555;
 }
-.htk-dialog p
-{
+.htk-dialog p {
 	margin: 0;
 }
-.htk-dialog img
-{
+.htk-dialog img {
 	float: left;
 	height: 3em;
 	margin-top: 0;
 	margin-right: 1em;
 }
-.htk-dialog p
-{
+.htk-dialog p {
 	padding: 0;
 }
-.htk-dialog .button-bar > button
-{
+.htk-dialog .button-bar > button {
 	float: right;
 	margin-left: 1em;
 	margin-top: .5em;
@ -504,25 +433,23 @@ td.cell-image .htk-image

 /* Assistant */

-.htk-assistant > div
-{
+.htk-assistant > div {
 	display: none;
-}
-.htk-assistant > div > h2
-{
-	text-align: center;
-	font-weight: normal;
-	font-size: 1.5em;
-	margin: 0;
-	padding: 0;
-	margin-bottom: 1em;
-	font-weight: bold;
+	
+	& > h2 {
+		text-align: center;
+		font-weight: normal;
+		font-size: 1.5em;
+		margin: 0;
+		padding: 0;
+		margin-bottom: 1em;
+		font-weight: bold;
+	}
 }

 /* Assistant bar */

-.htk-assistant-bar
-{
+.htk-assistant-bar {
 	position: relative;
 	padding: .8em;
 	display: flex;
@ -530,100 +457,102 @@ td.cell-image .htk-image
 	justify-content: space-between;
 	box-sizing: border-box;
 	width: 100%;
-}
-.htk-assistant-bar > button
-{
-	border-radius: 50%;
-	padding: 0;
-	margin: 0;
-}
-.htk-assistant-bar > .end
-{
-	display: none;
-}
-.htk-assistant-bar > button > img
-{
-	display: block;
-	width: 1.8em;
-	padding: .5em;
-}
-.htk-assistant-bar > .steps
-{
-	display: flex;
-	align-items: center;
-}
-.htk-assistant-bar > .steps > div {
-	background-color: #AAA;
-	width: .5em;
-	height: .5em;
-	cursor: pointer;
-	border-radius: 50%;
-	margin: .5em;

-	transition-property: width, height;
-	transition-duration: 100ms;
-	transition-timing-function: ease-in-out;
-}
-.htk-assistant-bar > .steps > div.selected {
-	background-color: #666;
-	width: 1em;
-	height: 1em;
-}
-.htk-assistant-bar > .steps > div:hover {
-	opacity: .7;
-}
-.htk-assistant-bar > .steps > img
-{
-	width: 1.3em;
-	margin: 0 .2em;
-	cursor: pointer;
-}
-.htk-assistant-bar > .steps > img:hover
-{
-	opacity: .7;
+	& > button {
+		border-radius: 50%;
+		padding: .5em;
+		margin: 0;
+		text-align: center;
+
+		& > img {
+			display: block;
+			width: 1.8em;
+			padding: .5em;
+		}
+	}
+	& > .end {
+		display: none;
+		color: #8cc63f;
+
+		& > .icon {
+			font-size: 1.6rem;
+		}
+	}
+	& > .steps {
+		display: flex;
+		align-items: center;
+
+		& > div {
+			background-color: #AAA;
+			width: .5em;
+			height: .5em;
+			cursor: pointer;
+			border-radius: 50%;
+			margin: .5em;
+		
+			transition-property: width, height;
+			transition-duration: 100ms;
+			transition-timing-function: ease-in-out;
+
+			&.selected {
+				background-color: #666;
+				width: 1em;
+				height: 1em;
+			}
+			&:hover {
+				opacity: .7;
+			}
+		}
+		& > img {
+			width: 1.3em;
+			margin: 0 .2em;
+			cursor: pointer;
+
+			&:hover {
+				opacity: .7;
+			}
+		}
+	}
 }

 /* Search entry */

-.htk-search-entry
-{
+.htk-search-entry {
 	background-color: white;
-	height: 2.2em;
+	height: 2.8em;
+	border-radius: 1.4em;
+	padding: 0 1.4em;
 }
-.htk-search-entry > *
-{
+.htk-search-entry > * {
 	display: inline-block;
 	vertical-align: middle;
 }
-.htk-search-entry > img
-{
+.htk-search-entry > img {
 	margin: 0;
 	height: 1.5em;
-	margin: 0 .4em;
+	margin-right: .6em;
 }
-.htk-search-entry > .entry
-{
+.htk-search-entry > .entry {
 	margin: 0;
 	border: none;
 	width: 8em;
 	box-shadow: none;
+	padding-right: 0;
+	padding-left: 0;
 }
-.htk-search-entry > .entry:focus
-{
+.htk-search-entry > .entry:focus {
 	background-color: initial;
 }

 /* Spinner */

-.htk-spinner
-{
+.htk-spinner {
 	width: 1.8em;
 	height: 1.8em;
 	position: relative;
 	display: inline-block;
 }
-.htk-spinner > .spinner
-{
+.htk-spinner > .spinner {
 	left: 0;
 	position: absolute;
 	width: inherit;
@ -636,23 +565,19 @@ td.cell-image .htk-image
 	animation: spinner 1s linear infinite;
 	-webkit-animation: spinner 1s linear infinite;
 }
-.htk-spinner.dark > .spinner
-{
+.htk-spinner.dark > .spinner {
 	border-top-color: white;
 	border-left-color: white;
 }
-@keyframes spinner
-{
+@keyframes spinner {
 	to {transform: rotate(360deg);}
 }
-@-webkit-keyframes spinner
-{
+@-webkit-keyframes spinner {
 	to {-webkit-transform: rotate(360deg);}
 }

 /* Loader */

-.htk-loader > .spinner
-{
+.htk-loader > .spinner {
 	text-align: center;
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -8,22 +8,25 @@
    "url": "https://git.verdnatura.es/hedera-web"
  },
  "devDependencies": {
-    "archiver": "^3.0.0",
-    "assets-webpack-plugin": "^3.9.7",
+    "archiver": "^5.3.1",
+    "assets-webpack-plugin": "^7.1.1",
    "bundle-loader": "^0.5.6",
-    "css-loader": "^2.1.0",
-    "eslint": "^5.13.0",
-    "file-loader": "^3.0.1",
-    "fs-extra": "^5.0.0",
-    "glob": "^7.1.3",
+    "css-loader": "^6.7.1",
+    "eslint": "^8.15.0",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^10.1.0",
+    "glob": "^8.0.3",
+    "html-webpack-plugin": "^5.5.0",
    "json-loader": "^0.5.7",
-    "raw-loader": "^1.0.0",
-    "style-loader": "^0.23.1",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.29.1",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.1.14",
-    "webpack-merge": "^4.2.1",
+    "node-sass": "^7.0.1",
+    "raw-loader": "^4.0.2",
+    "sass-loader": "^12.6.0",
+    "style-loader": "^3.3.1",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.0",
+    "webpack-merge": "^5.8.0",
    "yaml-loader": "^0.5.0"
  },
  "dependencies": {
@ -33,7 +36,8 @@
    "tinymce": "^5.0.0"
  },
  "scripts": {
-    "dev": "webpack-dev-server --progress --colors --hot",
+    "dev": "webpack serve --open",
+    "back": "cd ../salix && NODE_ENV=test gulp backOnly",
    "build": "rm -rf build/ ; webpack",
    "clean": "rm -rf build/"
  }
--- a/pages/main/ui.php
+++ b/pages/main/ui.php
@ -15,6 +15,7 @@ $result = $db->query('SELECT name, content FROM metatag');
 		<link rel="icon" type="image/png" href="image/favicon/favicon.png"/>
 		<link rel="icon" type="image/svg+xml" href="image/icon.svg" sizes="any"/>
 		<link rel="manifest" href="<?=$dir?>/manifest.json"/>
+		<link rel="stylesheet" href="https://fonts.sandbox.google.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0"/>
 		<meta name="theme-color" content="#333333"/>
 		<meta name="content-language" content="<?=$lang?>"/>
 		
--- a/web/html.php
+++ b/web/html.php
@ -30,15 +30,21 @@ function getWebpackAssets() {
 	if (_DEV_MODE) {
 		$devServerPort = $wpConfig->devServerPort;
 		$host = $_SERVER['SERVER_NAME'];
-		$serverPath = "http://$host:$devServerPort/";
+		$serverPath = "http://$host:$devServerPort";
 	}

 	$wpAssets = json_decode(file_get_contents("$buildDir/webpack-assets.json"));
 	$jsFiles = [];

 	foreach ($wpAssets as $name => $asset)
-		if (!empty($name) && $name != '_empty_' && property_exists($asset, 'js'))
+		if (!empty($name)
+		&& $name != '_empty_'
+		&& $name != 'main'
+		&& property_exists($asset, 'js'))
 			$jsFiles[] = $serverPath . $asset->js;

+	$jsFiles[] = $serverPath . $wpAssets->{''}->js[0];
+	$jsFiles[] = $serverPath . $wpAssets->main->js;
+
 	return $jsFiles;
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,15 +1,15 @@
-var path = require('path');
-var webpack = require('webpack');
-var AssetsWebpackPlugin = require('assets-webpack-plugin');
-var merge = require('webpack-merge');
-var wpConfig = require('./webpack.config.json');
+const path = require('path');
+const webpack = require('webpack');
+const AssetsWebpackPlugin = require('assets-webpack-plugin');
+const merge = require('webpack-merge').merge;
+const wpConfig = require('./webpack.config.json');

 let env = process.env.NODE_ENV || 'development';
-var devMode = env === 'development';
-var outputPath = path.join(__dirname, wpConfig.buildDir);
-var publicPath = wpConfig.buildDir +'/';
+const devMode = env === 'development';
+const outputPath = path.join(__dirname, wpConfig.buildDir);
+const publicPath = '/' + wpConfig.buildDir + '/';

-var baseConfig = {
+const baseConfig = {
 	entry: wpConfig.entry,
 	mode: devMode ? 'development' : 'production',
 	output: {
@ -18,10 +18,31 @@ var baseConfig = {
 	},
 	module: {
 		rules: [
-			{ test: /\.css$/, loader: 'style-loader!css-loader' },
-			{ test: /\.yml$/, loader: 'json-loader!yaml-loader' },
-			{ test: /\.xml$/, loader: 'raw-loader' },
-			{ test: /\.ttf$/, loader: 'file-loader' }
+			{
+				test: /\.css$/,
+				use: ['style-loader', 'css-loader'],
+			}, {
+				test: /\.yml$/,
+				use: ['json-loader', 'yaml-loader']
+			}, {
+				test: /\.xml$/,
+				use: 'raw-loader'
+			}, {
+				test: /\.ttf$/,
+				type: 'asset/resource'
+			}, {
+				test: /\.scss$/,
+				use: [
+					'style-loader',
+					'css-loader',
+					{
+						loader: 'sass-loader',
+						options: {
+							sourceMap: true
+						}
+					}
+				]
+			}
 		]
 	},
 	resolve: {
@ -56,30 +77,31 @@ var baseConfig = {
 	}
 };

-var prodConfig = {
+const prodConfig = {
 	output: {
 		filename: '[name].[chunkhash].js',
 		chunkFilename: 'chunk.[id].[chunkhash].js'
 	},
-	plugins: [
-		new webpack.HashedModuleIdsPlugin()
-	],
+	optimization: {
+		moduleIds: 'hashed'
+	},
 	devtool: 'source-map'
 };

-var devConfig = {
+const devConfig = {
 	output: {
 		filename: '[name].js',
 		chunkFilename: 'chunk.[id].js'
 	},
-	plugins: [
-		new webpack.NamedModulesPlugin()
-	],
+	optimization: {
+		moduleIds: 'named'
+	},
 	devServer: {
 		host: '0.0.0.0',
+		static: __dirname,
 		port: wpConfig.devServerPort,
 		headers: {'Access-Control-Allow-Origin': '*'},
-		stats: { chunks: false },
+		//stats: { chunks: false },
 		proxy: {
 			'/api': 'http://localhost:3000',
 			'/': {
@ -91,5 +113,5 @@ var devConfig = {
 	devtool: 'eval'
 };

-var mrgConfig = devMode ? devConfig : prodConfig;
+const mrgConfig = devMode ? devConfig : prodConfig;
 module.exports = merge(baseConfig, mrgConfig);
--- a/webpack.config.json
+++ b/webpack.config.json
@ -1,5 +1,5 @@
 {
 	"buildDir": "build",
 	"devServerPort": 9000,
-	"entry": {"main": "./app.js"}
+	"entry": "./app.js"
 }