diff --git a/css/dark_theme.css b/css/dark_theme.css
deleted file mode 100644
index 6c353f1..0000000
--- a/css/dark_theme.css
+++ /dev/null
@@ -1,92 +0,0 @@
-/* Dark theme */
-
-:root {
-	/*use with var(--main-blue-color)*/
-	--main-bg-color: #333639;
-	--main-blue-color: #0b96cd;
-	--main-item-bg-color: #515558;
-	--main-text-color: #fff;
-}
-header.logo {
-	background-image: linear-gradient(275deg, #103c68, #0073a7);
-}
-#dashcontent h2,
-body,
-h1,
-h2,
-h2 span { 
-	color: var(--main-text-color) !important;
-}
-.item #status,
-.sub-tabs > li > a,
-.sub-tabs > .active > a,
-.nav-tabs > .active > a:hover {
-  color:var(--main-text-color);
-}
-.sub-tabs > li > a:hover{
-	background-color: #333630;
-	color:var(--main-blue-color);
-}
-
-.navbar-inverse .navbar-inner {
-  background-color: #000;
-}
-.navbar .nav li a,
-.navbar .nav li a:hover {
-  background-color: #000;
-  color: var(--main-text-color);
-}
-.dropdown-content, .rectangle-8, .rectangle-8-dropdown {
-	background-color: #515558;
-}
-.slider {
-  background-color: #ccc;
-}
-.slider:before {
-  background-color: #5A5A5A;
-}
-.slider.round {
-  background-color: #393B3E;
-}
-.ui-corner-all,
-.display .ui-widget-content,
-.ui-widget-content{
-	background: var(--main-bg-color);
-	color: var(--main-text-color)
-}
-.ui-dialog .ui-dialog-buttonpane{
-	background: var(--main-bg-color);
-}
-.options {
-  background: #515558;
-}
-.btnstylerev,
-.btnstyle,
-.btnsmall,
-.bannav a.btnstylerev,
-.bannav a.btnstyle,
-.btnsmall:hover {
-  color: var(--main-text-color);
-}
-.bannav a.btnstylerev::before,
-.bannav a.btnstyle::after {
-	  border-top: 0.1vmin solid #fff;
-  border-right: 0.1vmin solid #fff;
-}
-.mDropdown-Text,
-.machinoSettings h2,
-.machinoText{
-	color: var(--main-text-color)
-}
-.machinoHeader{
-	color: #000;
-}
-.mDropdown-Text:hover {
-	color: rgba(255,255,255,0.5);
-}
-#settingscontent input.parentrequired:not(:checked) ~ input.parentrequiredchild + label{
-	color: #696969;
-}
-#login:before {
-    background-image: linear-gradient(275deg, #103c68, #0073a7);
-}
diff --git a/css/dashboard_show_last_update.css b/css/dashboard_show_last_update.css
deleted file mode 100644
index ac4fd6a..0000000
--- a/css/dashboard_show_last_update.css
+++ /dev/null
@@ -1,6 +0,0 @@
-/* Shows last Seen on dashboard */
-
-#dashcontent .lastupdate,
-#dashcontent #timeago{
-display: block;
-}
diff --git a/css/dimslider.css b/css/dimslider.css
deleted file mode 100644
index 6675abb..0000000
--- a/css/dimslider.css
+++ /dev/null
@@ -1,39 +0,0 @@
-#type .dimslider,
-.input .dimslider,
-.statusNormal .dimslider,
-.statusProtected .dimslider {
-  background: rgba(0, 0, 0, 0.26);
-  border: none;
-  box-shadow: none;
-  height: 5px;
-  bottom: 50px;
-  right: 20px;
-  width: 55% !important;
-}
-#type .dimslider .ui-slider-range,
-.input .dimslider .ui-slider-range,
-.statusNormal .dimslider .ui-slider-range,
-.statusProtected .dimslider .ui-slider-range {
-  background: rgba(11, 151, 205, 0.5);
-}
-#type .dimslider .ui-slider-handle,
-.input .dimslider .ui-slider-handle,
-.statusNormal .dimslider .ui-slider-handle,
-.statusProtected .dimslider .ui-slider-handle {
-  width: 15px;
-  height: 15px;
-  background: #0b96cd;
-  border-radius: 50%;
-  top: -6px;
-}
-
-@media (min-width: 1200px) {
-  #type .dimslider, .input .dimslider {
-    width: 260px !important;
-  }
-
-  #itemtabledoubleicon .dimslider,
-#itemtablesmalldoubleicon .dimslider {
-    width: 230px !important;
-  }
-}
diff --git a/css/dimslider.scss b/css/dimslider.scss
deleted file mode 100644
index 5ea9349..0000000
--- a/css/dimslider.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-$dimblue: #0b96cd;
-
-#type,
-.input,
-.statusNormal,
-.statusProtected {
-	
-	.dimslider {
-		background: rgba(0,0,0,0.26);
-		border: none;
-		box-shadow: none;
-		height: 5px;
-		bottom: 50px;
-		right: 20px;
-		width: 55% !important;
-
-		.ui-slider-range {
-			background: rgba(11, 151, 205, 0.5);
-		}
-
-		.ui-slider-handle {
-			width: 15px;
-			height: 15px;
-			background: $dimblue;
-			border-radius: 50%;
-			top: -6px;
-		}
-	}
-}
-
-@media (min-width: 1200px) {
-
-    #type, .input {
-		.dimslider {
-			width: 260px !important;
-		}
-	}
-
-	#itemtabledoubleicon, 
-	#itemtablesmalldoubleicon {
-		.dimslider {
-			width: 230px !important;
-		}
-	}
-}
\ No newline at end of file
diff --git a/css/features.css b/css/features.css
new file mode 100644
index 0000000..9f93da3
--- /dev/null
+++ b/css/features.css
@@ -0,0 +1,269 @@
+/* Search */
+#searchInput {
+  float: right;
+  background-image: url('../images/searchicon.png');
+  background-color: transparent;
+  background-position: 10px 12px;
+  background-repeat: no-repeat;
+  width: 10%;
+  font-size: 12px;
+  color: #fff;
+  padding: 12px 0px 8px 30px;
+  outline: 0;
+  border-width: 0 0 1px;
+  border-color: #fff;
+  margin-bottom: 12px;
+}
+#searchInput::placeholder {
+	color: #fff;
+	opacity: 0.5;
+}
+/* Notify */
+#notify {
+  float: right;
+  padding: 12px 50px 8px 30px;
+  font-size: 12px;
+  color: #fff;
+}
+.msg{
+  background-color: var(--main-item-bg-color);
+  font-family: main-font-bold;
+  color: var(--main-text-color);
+  border-radius: 5px;
+  box-shadow: -2px 2px 20px 0px rgba(0, 0, 0, 0.2);
+  z-index: 99;
+  display: block;
+  position: absolute;
+  top: 30px;
+  height:flex;
+  padding: 8px;
+  right: 200px;
+  overflow: hidden;
+  width: flex;
+}
+.msg span{
+	color: var(--secondary-text-color);
+}
+@media (max-width: 767px) {
+  #notify {
+	  float: left;
+	  margin-left: 20px;
+  }
+  .msg{
+	  left: 20px;
+  }
+}
+/* standby screen */
+.standby {
+	background-image:none !important;
+	background-color:#313131 !important;
+}
+.standby .row {
+	opacity: 0.4;
+}
+
+.standbyClock {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    color: #fff;
+    font-size: 80px;
+    font-family: main-font-bold;
+    letter-spacing: 7px;
+}
+.standbyDate {
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    color: #fff;
+    font-size: 60px;
+    font-family: main-font-bold;
+    letter-spacing: 7px;
+}
+input[type="number"]{
+	width: 30px;
+	background-color: transparent;
+	outline: 0;
+	border-width: 0 0 1px;
+	border-color: var(--main-blue-color);
+}
+input[type="text"]{
+	background-color: transparent;
+	outline: 0;
+	border-width: 0 0 1px;
+	border-color: var(--main-blue-color);
+}
+@media screen and (max-width: 992px){
+	.standbyClock {
+		font-size: 60px;
+	}
+	.standbyDate {
+		font-size: 40px;
+	}
+}
+
+/* bootstrap switcher */
+/* The switch - the box around the slider */
+.switch {
+  position: absolute;
+  display: block;
+  width: 40px;
+  height: 20px;
+  top: 20px;
+  right: 40px;
+}
+.switch input {
+  display: none;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+}
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: -10px;
+  bottom: -2px;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  background-color: #fafafa;
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.7);
+}
+.slider.round {
+  border-radius: 34px;
+}
+.slider.round:before {
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: rgba(11, 151, 205, 0.5);
+}
+input:checked + .slider:before {
+  -webkit-transform: translateX(34px);
+  -ms-transform: translateX(34px);
+  transform: translateX(34px);
+  background-color: var(--main-blue-color);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px rgba(11, 151, 205, 0.5);
+}
+
+
+/* Option menu */
+.options__bars {
+  display: block;
+  position: absolute;
+  top: -5px;
+  height: 30px;
+  right: 10px;
+  z-index: 2;
+  overflow: hidden;
+  width: 20px;
+}
+.options__bars::before {
+  display: block;
+  color: var(--secondary-text-color);
+  content: "…";
+  font-size: 20px;
+  cursor: pointer;
+}
+
+body table#itemtable tr > .options {
+  display: none;
+  padding: 8px;
+}
+
+.options {
+  font-family: main-font-bold;
+  position: absolute;
+  background: white;
+  border-radius: 5px;
+  right: 5px;
+  top: 8px;
+  box-shadow: -2px 2px 20px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  display: none;
+  padding: 8px;
+  width:97px;
+  height:flex;
+
+}
+.options .btnsmall-sel {
+  width: auto;
+  background: transparent;
+  color: green;
+}
+.options .btnsmall {
+  padding-top:4px;
+  text-align: left;
+  color: #818183;
+}
+
+/* Timer and Log */
+
+.timers_log{
+	display: inline;
+	padding: 0px 5px;
+}
+.timers_log .btnsmall,
+.timers_log .btnsmall-sel,
+.timers_log .btnsmall:hover,
+.timers_log .btnsmall-sel:hover {
+	color: transparent;
+}
+.timers_log .btnsmall[data-i18n="Log"] {
+	font-size: 8px;
+	position: absolute;
+	right: 10px;
+	bottom: 8px;
+}
+
+.timers_log .btnsmall[data-i18n="Timers"] {
+	font-size: 11px;
+	position: absolute;
+	right: 30px;
+	bottom: 5px;
+
+}
+.timers_log .btnsmall-sel[data-i18n="Timers"] {
+	background: transparent;
+	font-size: 11px;
+	position: absolute;
+	right: 30px;
+	bottom: 6px;
+}
+.timers_log .btnsmall[href*="Log"] {
+	font-size: 8px;
+	position: absolute;
+	right: 10px;
+	bottom: 8px;
+}
+
+@media (min-width: 1200px) {
+  .options {
+    top: 5px;
+  }
+  .timers_log .btnsmall[data-i18n="Timers"],
+  .timers_log .btnsmall-sel[data-i18n="Timers"]{
+	bottom: 16px;  
+  }
+  .timers_log .btnsmall[href*="Log"],
+  .timers_log .btnsmall[data-i18n="Log"]{
+	bottom:18px;
+  }
+}
\ No newline at end of file
diff --git a/css/fonts.css b/css/fonts.css
new file mode 100644
index 0000000..a9f43d5
--- /dev/null
+++ b/css/fonts.css
@@ -0,0 +1,42 @@
+/* Add fonts */
+@font-face {
+    font-family: main-font;
+    src: url(font/OpenSans-Regular.ttf);
+}
+@font-face {
+    font-family: main-font-bold;
+    src: url(font/OpenSans-SemiBold.ttf);
+}
+
+.btnstylerev,
+.btnstyle,
+.btnstyle3-dis,
+.btnstyle3,
+.btnstyle3-sel
+.mHeaderBtn,
+.navbar-inverse .navbar-inner,
+.item #bigtext,
+.item #type,
+.item #lastupdate {
+  font-family: main-font;
+}
+h2,
+#tophtm,
+#temptophtm,
+#weathertophtm,
+#lightcontent td,
+#utilitycontent td,
+.beforebannav,
+.machinoText,
+.mHeader,
+.item #status,
+.item #name {
+  font-family: main-font-bold;
+}
+#tabs,
+.span6,
+.span6,
+.span12,
+.page-header-small h1 {
+	font-family: main-font-bold;
+}
diff --git a/css/item.css b/css/item.css
index 66d16ca..456fcef 100644
--- a/css/item.css
+++ b/css/item.css
@@ -1,15 +1,58 @@
-@charset "UTF-8";
-/* common features */
-.item table {
+
+/*unknow*/
+.container .item {
+  padding: 10px 0;
+}
+
+body table#itemtable {
+  width: auto !important;
+}
+body table#itemtabledoubleicon .wrapper {
+  color: orange;
+}
+body table#itemtabledoubleicon tr td:first-child {
+  border: none;
+  background: transparent;
+}
+
+body table#itemtabledoubleicon tbody tr:hover body table#itemtabledoubleicon tr td {
+  background: none;
+}
+#itemtabledoubleicon td:last-child .btnsmall-sel,
+#itemtablenostatus td:last-child .btnsmall-sel,
+#itemtabletrippleicon td:last-child .btnsmall-sel {
+  border-radius: 0;
+  height: auto;
+}
+
+/*tile*/
+.tile:not(item){
+  
+  flex-grow: 1;
+  display:flex;
+}
+.item {
   position: relative;
-  background: #fff;
+  width: 20em;
+  height: 10em;
+  margin:20px 20px;
+  flex-grow: 1;
+  
+  background: var(--main-item-bg-color);
   padding: 20px;
   border-radius: 6px;
-  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
-  display: block;
-  min-height: 100px;
+  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
+
+}
+
+.item:hover {
+	box-shadow: 0px 0px 0px 2px rgb(11, 150, 205);
 }
 
+.item #type .selectorlevels, .item #type .btn-group{
+  display: flex;
+  width: 65%;
+}
 .item tr {
   display: flex;
   justify-content: center;
@@ -25,6 +68,7 @@ body table#itemtable tbody tr {
 /* name */
 .item #name {
   background-color: transparent !important;
+  color: var(--main-text-color);
 }
 
 @media (min-width: 1200px) {
@@ -34,103 +78,45 @@ body table#itemtable tbody tr {
 }
 /* bigtext */
 .item #bigtext {
-  color: #0b96cd;
-  font-size: 20px;
+  color: var(--main-blue-color);
+  font-size: 17px;
   position: absolute;
-  top: 15px;
-  right: 40px;
+  top: 18px;
+  right: 50px;
 }
 
 @media (min-width: 980px) {
   .item #bigtext {
-    font-size: 27px;
-    top: 10px;
-  }
-}
-@media (min-width: 1200px) {
-  .item #bigtext {
-    top: 18px;
-    right: 60px;
+    font-size: 23px;
   }
 }
+
 /* last update */
 .item #lastupdate {
-  color: gray;
+  color: var(--secondary-text-color);
   position: absolute;
-  right: 10px;
+  right: 60px;
   bottom: 5px;
 }
+dztemperaturewidget .item #lastupdate,
+dzweatherwidget .item #lastupdate {
+  right: 40px;
+}
 .item #lastupdate::before {
   content: "Last Seen: ";
 }
 
 @media (min-width: 1200px) {
   .item #lastupdate {
-    right: 20px;
     bottom: 15px;
   }
 }
 /* type */
 .item #type {
-  color: gray;
-  margin-top: 3px;
-}
-
-/* item subnav applying by click*/
-.options__bars {
-  display: block;
-  position: absolute;
-  top: 16px;
-  height: 20px;
-  right: 20px;
-  z-index: 2;
-  overflow: hidden;
-  width: 6px;
-}
-.options__bars::before {
-  display: block;
-  color: gray;
-  content: "⠇";
-  font-size: 20px;
-  cursor: pointer;
+  color: var(--secondary-text-color);
+  margin-top: 5px;
 }
 
-body table#itemtable tr > .options {
-  display: none;
-  padding: 8px;
-}
-
-.options {
-  position: absolute;
-  background: white;
-  border-radius: 5px;
-  right: 5px;
-  top: 8px;
-  box-shadow: -2px 2px 20px 0px rgba(0, 0, 0, 0.2);
-  z-index: 1;
-  display: none;
-  padding: 8px;
-}
-.options .btnsmall-sel {
-  width: auto;
-  background-color: transparent;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-}
-.options .btnsmall {
-  padding: 1px 0;
-}
-
-@media (min-width: 1200px) {
-  .options__bars {
-    top: 25px;
-  }
-
-  .options {
-    top: 16px;
-  }
-}
 /* images */
 .item .img,
 .item #img {
@@ -192,28 +178,81 @@ body table#itemtable tr > .options {
   position: absolute;
   right: 20px;
   bottom: 40px;
+  width: 65%;
+  overflow-x:  auto;
+}
+.ui-selectmenu-button.ui-button{
+  width:auto !important;
+}
+#type .selectorlevels {
+  position: absolute;
+  right: 20px;
+  bottom: 40px;
+  max-width:  250px;
+  overflow-x: auto;
+
+}
+#type .ui-selectmenu-text {
+color:var(--main-blue-color)
+}
+
+/* Time Ago */
+#dashcontent #timeago{
+display:none;
+}
+dztemperaturewidget .item #timeago,
+dzweatherwidget .item #timeago {
+  right: 40px;
+}
+.item #timeago {
+  color: var(--secondary-text-color);
+  font-family: main-font;
+  position: absolute;
+  right: 60px;
+  bottom: 5px;
+}
+@media (min-width: 1200px) {
+  .item #timeago{
+    bottom: 15px;
+  }
+}
+#dashcontent .item #timeago {
+  right:20px;
+  bottom: 15px;
 }
 
 /* dashboard items */
+/*Modifie dans le dashboard, l'espace entre bigtext et le bord droit*/
+#dashcontent .bigtext{
+right:20px;
+}
+/*idem pour le switch*/
+#dashcontent .switch{
+right:20px;
+}
+/*efface le lastupdate du dashboard*/
+#dashcontent .lastupdate{
+display:none;
+}
+#dashcontent .status{
+margin-top:50px;
+margin-left:150px;
+}
+#dashcontent .selectorlevels {
+  position: absolute;
+  right: 20px;
+  bottom: 40px;
+}
+#dashcontent .ui-selectmenu-text {
+color:var(--main-blue-color);
+}
+
 #dashcontent .item #lastupdate {
-  left: 20px;
-  top: 40px;
-  right: auto;
-  bottom: auto;
+  right:20px;
+  bottom: 15px;
 }
 
 /* temperature, weather items */
-dztemperaturewidget .item #name,
-dzweatherwidget .item #name {
-  font-size: 20px;
-}
-dztemperaturewidget .item #bigtext,
-dzweatherwidget .item #bigtext {
-  color: inherit;
-  left: 20px;
-  top: 45px;
-  font-size: 17px;
-}
 dztemperaturewidget #status,
 dzweatherwidget #status {
   position: absolute;
@@ -234,15 +273,6 @@ dzweatherwidget #status > span:empty::before {
 }
 
 /* utility items */
-#utilitycontent .item #name {
-  font-size: 20px;
-}
-#utilitycontent .item #bigtext {
-  color: inherit;
-  left: 20px;
-  top: 45px;
-  font-size: 17px;
-}
 #utilitycontent #type {
   position: absolute;
   right: 20px;
@@ -264,6 +294,8 @@ dzweatherwidget #status > span:empty::before {
   width: 60%;
   text-align: right;
   margin-top: 0;
+  bottom: 40px;
+  overflow-x:  auto;
 }
 #utilitycontent #status::before {
   content: "Status: ";
@@ -301,3 +333,234 @@ dzweatherwidget #status > span:empty::before {
 #scenecontent #status:empty::before, #scenecontent #status > span:empty::before {
   content: "";
 }
+
+#type .dimslider,
+.input .dimslider,
+.statusNormal .dimslider,
+.statusProtected .dimslider {
+  background: rgba(0, 0, 0, 0.26);
+  border: none;
+  box-shadow: none;
+  height: 5px;
+  bottom: 50px;
+  right: 20px;
+  width: 70% !important;
+}
+#type .dimslider .ui-slider-range,
+.input .dimslider .ui-slider-range,
+.statusNormal .dimslider .ui-slider-range,
+.statusProtected .dimslider .ui-slider-range {
+  background: rgba(11, 151, 205, 0.5);
+}
+#type .dimslider .ui-slider-handle,
+.input .dimslider .ui-slider-handle,
+.statusNormal .dimslider .ui-slider-handle,
+.statusProtected .dimslider .ui-slider-handle {
+  width: 15px;
+  height: 15px;
+  background: var(--main-blue-color);
+  border-radius: 50%;
+  top: -5px;
+}
+
+@media (min-width: 1200px) {
+  #type .dimslider, .input .dimslider {
+    width: 55% !important;
+  }
+
+  #itemtabledoubleicon .dimslider,
+#itemtablesmalldoubleicon .dimslider {
+    width: 55% !important;
+  }
+}
+
+/*  Device is timeout  */
+.item.statusTimeout{
+	box-shadow: 0px 0px 10px 2px rgb(199,67,67,0.5);
+	/* background-color: transparent !important; */
+}
+.item.statusTimeout:hover{
+	box-shadow: 0px 0px 0px 2px rgb(199,67,67);
+}
+.item.statusTimeout{
+	/* color: #c74343 !important; */
+	opacity:0.5;
+}
+.item.statusTimeout td#img{
+	opacity:0.2;
+}
+/* Switch is protected */
+.item.statusProtected{
+	box-shadow: 0px 0px 10px 2px rgb(0, 0, 139, 0.4);
+}
+.item.statusProtected:hover{
+	box-shadow: 0px 0px 0px 2px rgb(0, 0, 139);
+}
+.item.statusProtected #name:before{
+	content:'';
+	display: inline-block;
+	width: 20px;
+	height: 16px;
+	background-image: url('../images/deviceProtected.png');
+	background-repeat: no-repeat;
+	background-position: center;
+}
+/* Device has low battery */
+.item.statusLowBattery{
+	box-shadow: 0px 0px 10px 2px rgb(255,255,0,0.4);
+}
+.item.statusLowBattery:hover{
+	box-shadow: 0px 0px 0px 2px rgb(255,255,0);
+}
+.item.statusLowBattery #name:before{
+	content:'';
+	display: inline-block;
+	width: 25px;
+	height: 20px;
+	background-image: url('../images/lowbattery.png');
+	background-repeat: no-repeat;
+	background-position: center;
+	animation: blinker 2s linear infinite;
+}
+
+
+
+
+
+
+
+
+
+
+@keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}
+
+
+@media screen and (max-width: 992px) {
+
+.item {
+  min-width: 20em;
+  margin-right:0 !important;
+  }
+}
+@media (min-width: 1200px) {
+  #itemtablenostatus #type,
+#itemtabletrippleicon #type {
+    height: auto;
+  }
+}
+
+
+table.mobileitem{
+    width: 100%;
+    padding: 0;
+    margin-top:20px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+table.mobileitem > thead{
+    display: flex;
+}
+table.mobileitem > thead > tr {
+    display:flex;
+	background: none;
+}
+table.mobileitem > thead > tr > th:first-of-type{
+    flex-grow:1;
+}
+
+table.mobileitem .status > span > span{margin-right:7px;}
+
+.mobileitem th{
+    display:inline;
+    background-color: transparent;
+    text-shadow: none;
+}
+.mobileitem tr{
+    margin: 0!important;
+    padding: 0!important;
+    box-sizing: border-box;
+    height: auto;
+    display: flex;
+    flex-grow: 1;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+}
+.mobileitem td{
+    height: auto!important;
+    margin-right: 0!important;
+    /*word-break: break-word;*/
+    /*margin: 0!important;*/
+    background-image: none!important;
+    display: inline-flex;
+    width: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+    align-items: center; 
+    padding:5px!important;
+    min-height:35px;
+}
+.mobileitem td > div {margin: 0!important;}
+
+.mobileitem td:last-child{
+    flex-wrap:wrap;
+}
+.mobileitem td label{
+    white-space: nowrap;
+    height:50%;
+}
+body.dashMobile table.mobileitem td#name,
+body.dashMobile table.mobileitem td.name{
+    font-size: 100%;
+    position: inherit;
+    padding:0 0 0 10px!important;
+    height:auto;
+    min-height:30px;
+}
+body.dashMobile table.mobileitem td#name img,
+body.dashMobile table.mobileitem td.name img{
+    margin-right:5px;
+}
+.mobileitem .btn-mini{
+    margin-left: 2px;
+}
+#dashcontent .mobileitem .dimslider{
+  background: rgba(0, 0, 0, 0.26);
+  border: none;
+  box-shadow: none;
+  height: 5px;
+}
+#dashcontent .mobileitem .dimslider .ui-slider-range{
+  background: rgba(11, 151, 205, 0.5);
+}
+#dashcontent .mobileitem .dimslider .ui-slider-handle{
+  width: 15px;
+  height: 15px;
+  background: var(--main-blue-color);
+  border-radius: 50%;
+  top: -6px;
+}
+#dashcontent .mobileitem td#status,
+#dashcontent .mobileitem td.status{
+    display: flex;
+    position:initial;
+    flex-direction: row;
+    white-space: normal;
+    width: auto;
+    max-width:60%;
+    justify-content: flex-end;
+    padding: 0;
+    flex-grow: 1;
+    flex-shrink: 1;
+    margin: 0;
+    text-align: end;
+}
+#dashcontent .mobileitem .selectorlevels {
+  position: relative;
+  right: 0px;
+  bottom: 0px;
+}
diff --git a/css/item.scss b/css/item.scss
deleted file mode 100644
index ad0ded3..0000000
--- a/css/item.scss
+++ /dev/null
@@ -1,282 +0,0 @@
-/* common features */
-.item table {
-    position: relative;
-    background: #fff;
-    padding: 20px;
-    border-radius: 6px;
-    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.1);
-    display: block;
-    min-height: 100px;
-}
-
-.item tr {
-	display: flex;
-    justify-content: center;
-    flex-direction: column;
-}
-
-// crutch to overwrite style.css
-body table#itemtable tbody tr{
-    background: transparent;
-    margin: 0;
-    padding: 0;
-}
-
-/* name */
-.item #name {
-	background-color: transparent !important;
-}
-
-@media (min-width: 1200px) {
-	.item #name {
-		font-size: 16px;
-	}
-}
-
-/* bigtext */
-.item #bigtext {
-    color: #0b96cd;
-    font-size: 20px;
-    position: absolute;
-    top: 15px;
-    right: 40px;
-}
-
-@media (min-width: 980px) {
-    .item #bigtext {
-		font-size: 27px;
-		top: 10px;
-    }
-
-}
-
-@media (min-width: 1200px) {
-	.item #bigtext {
-		top: 18px;
-		right: 60px;
-    }
-
-}
-
-/* last update */
-.item #lastupdate {
-	color: gray;
-	position: absolute;
-    right: 10px;
-	bottom: 5px;
-	
-	&::before {
-		content: 'Last Seen: ';
-	}
-}
-
-@media (min-width: 1200px) {
-	.item #lastupdate {
-		right: 20px;
-		bottom: 15px;
-	}
-
-}
-
-/* type */
-
-.item #type {
-	color: gray;
-	margin-top: 3px;
-}
-
-/* item subnav applying by click*/
-.options__bars {
-    display: block;
-    position: absolute;
-    top: 16px;
-    height: 20px;
-    right: 20px;
-    z-index: 2;
-    overflow: hidden;
-	width: 6px;
-	
-	&::before {
-		display: block;
-		color: gray;
-		content: '\2807';
-		font-size: 20px;
-		cursor: pointer;
-	}
-}
-
-body table#itemtable tr > .options {
-	display: none; // overriding crutch
-    padding: 8px;
-
-}
-
-.options{
-    position: absolute;
-    background: white;
-    border-radius: 5px;
-    right: 5px;
-    top: 8px;
-	box-shadow: -2px 2px 20px 0px rgba(0,0,0,0.2);
-	z-index: 1;
-	display: none;
-	padding: 8px;
-	
-	.btnsmall-sel {
-		width: auto;
-		background-color: transparent;
-		color: inherit;
-		margin: 0;
-		padding: 0;
-	}
-	.btnsmall {
-		padding: 1px 0;
-	}
-}
-
-@media (min-width: 1200px) {
-	.options__bars {
-		top: 25px;
-	}
-
-	.options {
-        top: 16px;
-    }
-
-}
-
-/* images */
-@mixin item-image($left) {
-	order: 1000;
-    margin-bottom: 0;
-    position: absolute;
-    left: $left;
-	bottom: 15px;
-
-	img {
-		height: auto;
-	}
-}
-.item .img,
-.item #img {
-	@include item-image(20px);
-}
-
-// .item .img1,
-.item #img1 {
-	@include item-image(20px);
-	width: 30px;
-}
-
-#itemtabledoubleicon,
-#itemtablesmalldoubleicon {
-	#img2 img {
-		width: 30px;
-	}
-}
-
-.item #img2 {
-	@include item-image(72px);
-}
-
-.item .img3,
-.item #img3 {
-	@include item-image(100px);
-}
-
-/* item with button group */
-#type,
-.input {
-	.btn-group {
-		position: absolute;
-		right: 20px;
-		bottom: 40px;
-	}
-}
-
-
-/* dashboard items */
-#dashcontent .item #lastupdate {
-    left: 20px;
-	top: 40px;
-	right: auto;
-	bottom: auto;
-}
-
-/* temperature, weather items */
-
-@mixin status-and-type($top, $before) {
-	position: absolute;
-	right: 20px;
-	top: $top;
-	width: 60%;
-	text-align: right;
-	margin-top: 0;
-
-	&::before {
-		content: $before;
-	}
-
-	&:empty::before,
-	& > span:empty::before {
-		content: '';
-	}
-
-}
-
-dztemperaturewidget,
-dzweatherwidget {
-
-	.item #name {
-		font-size: 20px;
-	}
-
-	.item #bigtext {
-		color: inherit;
-		left: 20px;
-		top: 45px;
-		font-size: 17px;
-	}
-
-	#status {
-		@include status-and-type(60px, 'Status: ');
-	}
-
-}
-
-/* utility items */
-
-#utilitycontent {
-
-	.item #name {
-		font-size: 20px;
-	}
-
-	.item #bigtext {
-		color: inherit;
-		left: 20px;
-		top: 45px;
-		font-size: 17px;
-	}
-
-	#type {
-		@include status-and-type(60px, 'Type: ');
-	}
-
-	#status {
-		@include status-and-type(80px, 'Status: ');
-	}	
-}
-
-/* scene items */
-
-#scenecontent {
-
-	#type {
-		@include status-and-type(60px, 'Type: ');
-	}
-
-	#status {
-		@include status-and-type(80px, '');
-	}
-}
\ No newline at end of file
diff --git a/css/popups.css b/css/popups.css
deleted file mode 100644
index c8456df..0000000
--- a/css/popups.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.ui-popup.ui-corner-all {
-  background-color: #fff;
-}
diff --git a/css/switchers.css b/css/switchers.css
deleted file mode 100644
index 0ce4a3f..0000000
--- a/css/switchers.css
+++ /dev/null
@@ -1,64 +0,0 @@
-/* bootstrap switcher */
-/* The switch - the box around the slider */
-.switch {
-  position: absolute;
-  display: block;
-  width: 60px;
-  height: 20px;
-  top: 15px;
-  right: 40px;
-}
-.switch input {
-  display: none;
-}
-
-@media (min-width: 1200px) {
-  .switch {
-    top: 25px;
-    right: 60px;
-  }
-}
-/* The slider */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: 0;
-  bottom: -1px;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-  background-color: #fafafa;
-  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.7);
-}
-.slider.round {
-  border-radius: 34px;
-}
-.slider.round:before {
-  border-radius: 50%;
-}
-
-input:checked + .slider {
-  background-color: rgba(11, 151, 205, 0.5);
-}
-input:checked + .slider:before {
-  -webkit-transform: translateX(34px);
-  -ms-transform: translateX(34px);
-  transform: translateX(34px);
-  background-color: #0b97cd;
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px rgba(11, 151, 205, 0.5);
-}
diff --git a/custom.css b/custom.css
index 394b04d..fd9f7ce 100644
--- a/custom.css
+++ b/custom.css
@@ -1,7 +1,10 @@
 @charset "UTF-8";
 
 /* import css files */
+@import url("css/features.css");
 @import url("css/settings.css");
+@import url("css/item.css");
+@import url("css/fonts.css");
 @import url("css/icons_on_tabs.css");
 @import url('https://fonts.googleapis.com/css?family=Open+Sans');
 
@@ -25,47 +28,8 @@
 	--main-text-color: #000;
 	--secondary-text-color: gray;
 }
-@font-face {
-    font-family: main-font;
-    src: url(font/OpenSans-Regular.ttf);
-}
-@font-face {
-    font-family: main-font-bold;
-    src: url(font/OpenSans-SemiBold.ttf);
-}
-/* Add fonts */
-.btnstylerev,
-.btnstyle,
-.btnstyle3-dis,
-.btnstyle3,
-.btnstyle3-sel
-.mHeaderBtn,
-.navbar-inverse .navbar-inner,
-.item #bigtext,
-.item #type,
-.item #lastupdate {
-  font-family: main-font;
-}
-h2,
-#tophtm,
-#temptophtm,
-#weathertophtm,
-#lightcontent td,
-#utilitycontent td,
-.beforebannav,
-.machinoText,
-.mHeader,
-.item #status,
-.item #name {
-  font-family: main-font-bold;
-}
-#tabs,
-.span6,
-.span6,
-.span12,
-.page-header-small h1 {
-	font-family: main-font-bold;
-}
+
+
 /* aboutpage */
 #aboutcontent {
 	font-family: main-font;
@@ -73,169 +37,8 @@ h2,
 #aboutcontent #canvas2 {
 	display:none;
 }
-/* Search */
-#searchInput {
-  float: right;
-  background-image: url('../images/searchicon.png');
-  background-color: transparent;
-  background-position: 10px 12px;
-  background-repeat: no-repeat;
-  width: 10%;
-  font-size: 12px;
-  color: #fff;
-  padding: 12px 0px 8px 30px;
-  outline: 0;
-  border-width: 0 0 1px;
-  border-color: #fff;
-  margin-bottom: 12px;
-}
-#searchInput::placeholder {
-	color: #fff;
-	opacity: 0.5;
-}
-#notify {
-  float: right;
-  padding: 12px 50px 8px 30px;
-  font-size: 12px;
-  color: #fff;
-}
-.msg{
-  background-color: var(--main-item-bg-color);
-  font-family: main-font-bold;
-  color: var(--main-text-color);
-  border-radius: 5px;
-  box-shadow: -2px 2px 20px 0px rgba(0, 0, 0, 0.2);
-  z-index: 99;
-  display: block;
-  position: absolute;
-  top: 30px;
-  height:flex;
-  padding: 8px;
-  right: 200px;
-  overflow: hidden;
-  width: flex;
-}
-.msg span{
-	color: var(--secondary-text-color);
-}
-@media (max-width: 767px) {
-  #notify {
-	  float: left;
-	  margin-left: 20px;
-  }
-  .msg{
-	  left: 20px;
-  }
-}
-/* standby screen */
-.standby {
-	background-image:none !important;
-	background-color:#313131 !important;
-}
-.standby .row {
-	opacity: 0.4;
-}
 
-.standbyClock {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    color: #fff;
-    font-size: 80px;
-    font-family: main-font-bold;
-    letter-spacing: 7px;
-}
-.standbyDate {
-    position: absolute;
-    top: 40%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    color: #fff;
-    font-size: 60px;
-    font-family: main-font-bold;
-    letter-spacing: 7px;
-}
-input[type="number"]{
-	width: 30px;
-	background-color: transparent;
-	outline: 0;
-	border-width: 0 0 1px;
-	border-color: var(--main-blue-color);
-}
-input[type="text"]{
-	background-color: transparent;
-	outline: 0;
-	border-width: 0 0 1px;
-	border-color: var(--main-blue-color);
-}
-@media screen and (max-width: 992px){
-	.standbyClock {
-		font-size: 60px;
-	}
-	.standbyDate {
-		font-size: 40px;
-	}
-}
 
-/* bootstrap switcher */
-/* The switch - the box around the slider */
-.switch {
-  position: absolute;
-  display: block;
-  width: 40px;
-  height: 20px;
-  top: 20px;
-  right: 40px;
-}
-.switch input {
-  display: none;
-}
-
-/* The slider */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: -10px;
-  bottom: -2px;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-  background-color: #fafafa;
-  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.7);
-}
-.slider.round {
-  border-radius: 34px;
-}
-.slider.round:before {
-  border-radius: 50%;
-}
-
-input:checked + .slider {
-  background-color: rgba(11, 151, 205, 0.5);
-}
-input:checked + .slider:before {
-  -webkit-transform: translateX(34px);
-  -ms-transform: translateX(34px);
-  transform: translateX(34px);
-  background-color: var(--main-blue-color);
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px rgba(11, 151, 205, 0.5);
-}
 
 /* common features */
 /*need fix media screen*/
@@ -254,453 +57,8 @@ div.row{
 div#floorplancontent {
     height: 100%;
 }
-.tile:not(item){
-  
-  flex-grow: 1;
-  display:flex;
-}
-.item {
-  position: relative;
-  width: 20em;
-  height: 10em;
-  margin:20px 20px;
-  flex-grow: 1;
-  
-  background: var(--main-item-bg-color);
-  padding: 20px;
-  border-radius: 6px;
-  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
-
-}
 
-.item:hover {
-	box-shadow: 0px 0px 0px 2px rgb(11, 150, 205);
-}
-
-.item #type .selectorlevels, .item #type .btn-group{
-  display: flex;
-  width: 65%;
-}
-.item tr {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-}
 
-body table#itemtable tbody tr {
-  background: transparent;
-  margin: 0;
-  padding: 0;
-}
-
-/* name */
-.item #name {
-  background-color: transparent !important;
-  color: var(--main-text-color);
-}
-
-@media (min-width: 1200px) {
-  .item #name {
-    font-size: 16px;
-  }
-}
-/* bigtext */
-.item #bigtext {
-  color: var(--main-blue-color);
-  font-size: 17px;
-  position: absolute;
-  top: 18px;
-  right: 50px;
-}
-
-@media (min-width: 980px) {
-  .item #bigtext {
-    font-size: 23px;
-  }
-}
-
-/* last update */
-.item #lastupdate {
-  color: var(--secondary-text-color);
-  position: absolute;
-  right: 60px;
-  bottom: 5px;
-}
-dztemperaturewidget .item #lastupdate,
-dzweatherwidget .item #lastupdate {
-  right: 40px;
-}
-.item #lastupdate::before {
-  content: "Last Seen: ";
-}
-
-@media (min-width: 1200px) {
-  .item #lastupdate {
-    bottom: 15px;
-  }
-}
-/* type */
-.item #type {
-  color: var(--secondary-text-color);
-  margin-top: 5px;
-}
-
-/* item subnav applying by click*/
-.options__bars {
-  display: block;
-  position: absolute;
-  top: -5px;
-  height: 30px;
-  right: 10px;
-  z-index: 2;
-  overflow: hidden;
-  width: 20px;
-}
-.options__bars::before {
-  display: block;
-  color: var(--secondary-text-color);
-  content: "…";
-  font-size: 20px;
-  cursor: pointer;
-}
-
-body table#itemtable tr > .options {
-  display: none;
-  padding: 8px;
-}
-
-.options {
-  font-family: main-font-bold;
-  position: absolute;
-  background: white;
-  border-radius: 5px;
-  right: 5px;
-  top: 8px;
-  box-shadow: -2px 2px 20px 0px rgba(0, 0, 0, 0.2);
-  z-index: 1;
-  display: none;
-  padding: 8px;
-  width:97px;
-  height:flex;
-
-}
-.options .btnsmall-sel {
-  width: auto;
-  background: transparent;
-  color: green;
-}
-.options .btnsmall {
-  padding-top:4px;
-  text-align: left;
-  color: #818183;
-}
-.timers_log{
-	display: inline;
-	padding: 0px 5px;
-}
-.timers_log .btnsmall,
-.timers_log .btnsmall-sel,
-.timers_log .btnsmall:hover,
-.timers_log .btnsmall-sel:hover {
-	color: transparent;
-}
-.timers_log .btnsmall[data-i18n="Log"] {
-	font-size: 8px;
-	position: absolute;
-	right: 10px;
-	bottom: 8px;
-}
-
-.timers_log .btnsmall[data-i18n="Timers"] {
-	font-size: 11px;
-	position: absolute;
-	right: 30px;
-	bottom: 5px;
-
-}
-.timers_log .btnsmall-sel[data-i18n="Timers"] {
-	background: transparent;
-	font-size: 11px;
-	position: absolute;
-	right: 30px;
-	bottom: 6px;
-}
-.timers_log .btnsmall[href*="Log"] {
-	font-size: 8px;
-	position: absolute;
-	right: 10px;
-	bottom: 8px;
-}
-
-@media (min-width: 1200px) {
-  .options {
-    top: 5px;
-  }
-  .timers_log .btnsmall[data-i18n="Timers"],
-  .timers_log .btnsmall-sel[data-i18n="Timers"]{
-	bottom: 16px;  
-  }
-  .timers_log .btnsmall[href*="Log"],
-  .timers_log .btnsmall[data-i18n="Log"]{
-	bottom:18px;
-  }
-}
-/* images */
-.item .img,
-.item #img {
-  order: 1000;
-  margin-bottom: 0;
-  position: absolute;
-  left: 20px;
-  bottom: 15px;
-}
-.item .img img,
-.item #img img {
-  height: auto;
-}
-
-.item #img1 {
-  order: 1000;
-  margin-bottom: 0;
-  position: absolute;
-  left: 20px;
-  bottom: 15px;
-  width: 30px;
-}
-.item #img1 img {
-  height: auto;
-}
-
-#itemtabledoubleicon #img2 img,
-#itemtablesmalldoubleicon #img2 img {
-  width: 30px;
-}
-
-.item #img2 {
-  order: 1000;
-  margin-bottom: 0;
-  position: absolute;
-  left: 72px;
-  bottom: 15px;
-}
-.item #img2 img {
-  height: auto;
-}
-
-.item .img3,
-.item #img3 {
-  order: 1000;
-  margin-bottom: 0;
-  position: absolute;
-  left: 100px;
-  bottom: 15px;
-}
-.item .img3 img,
-.item #img3 img {
-  height: auto;
-}
-
-/* item with button group */
-#type .btn-group,
-.input .btn-group {
-  position: absolute;
-  right: 20px;
-  bottom: 40px;
-  width: 65%;
-  overflow-x:  auto;
-}
-.ui-selectmenu-button.ui-button{
-  width:auto !important;
-}
-#type .selectorlevels {
-  position: absolute;
-  right: 20px;
-  bottom: 40px;
-  max-width:  250px;
-  overflow-x: auto;
-
-}
-#type .ui-selectmenu-text {
-color:var(--main-blue-color)
-}
-
-/* Time Ago */
-#dashcontent #timeago{
-display:none;
-}
-dztemperaturewidget .item #timeago,
-dzweatherwidget .item #timeago {
-  right: 40px;
-}
-.item #timeago {
-  color: var(--secondary-text-color);
-  font-family: main-font;
-  position: absolute;
-  right: 60px;
-  bottom: 5px;
-}
-@media (min-width: 1200px) {
-  .item #timeago{
-    bottom: 15px;
-  }
-}
-#dashcontent .item #timeago {
-  right:20px;
-  bottom: 15px;
-}
-
-/* dashboard items */
-/*Modifie dans le dashboard, l'espace entre bigtext et le bord droit*/
-#dashcontent .bigtext{
-right:20px;
-}
-/*idem pour le switch*/
-#dashcontent .switch{
-right:20px;
-}
-/*efface le lastupdate du dashboard*/
-#dashcontent .lastupdate{
-display:none;
-}
-#dashcontent .status{
-margin-top:50px;
-margin-left:150px;
-}
-#dashcontent .selectorlevels {
-  position: absolute;
-  right: 20px;
-  bottom: 40px;
-}
-#dashcontent .ui-selectmenu-text {
-color:var(--main-blue-color);
-}
-
-#dashcontent .item #lastupdate {
-  right:20px;
-  bottom: 15px;
-}
-
-/* temperature, weather items */
-dztemperaturewidget #status,
-dzweatherwidget #status {
-  position: absolute;
-  right: 20px;
-  top: 60px;
-  width: 60%;
-  text-align: right;
-  margin-top: 0;
-}
-dztemperaturewidget #status::before,
-dzweatherwidget #status::before {
-  content: "Status: ";
-}
-dztemperaturewidget #status:empty::before, dztemperaturewidget #status > span:empty::before,
-dzweatherwidget #status:empty::before,
-dzweatherwidget #status > span:empty::before {
-  content: "";
-}
-
-/* utility items */
-#utilitycontent #type {
-  position: absolute;
-  right: 20px;
-  top: 60px;
-  width: 60%;
-  text-align: right;
-  margin-top: 0;
-}
-#utilitycontent #type::before {
-  content: "Type: ";
-}
-#utilitycontent #type:empty::before, #utilitycontent #type > span:empty::before {
-  content: "";
-}
-#utilitycontent #status {
-  position: absolute;
-  right: 20px;
-  top: 80px;
-  width: 60%;
-  text-align: right;
-  margin-top: 0;
-  bottom: 40px;
-  overflow-x:  auto;
-}
-#utilitycontent #status::before {
-  content: "Status: ";
-}
-#utilitycontent #status:empty::before, #utilitycontent #status > span:empty::before {
-  content: "";
-}
-
-/* scene items */
-#scenecontent #type {
-  position: absolute;
-  right: 20px;
-  top: 60px;
-  width: 60%;
-  text-align: right;
-  margin-top: 0;
-}
-#scenecontent #type::before {
-  content: "Type: ";
-}
-#scenecontent #type:empty::before, #scenecontent #type > span:empty::before {
-  content: "";
-}
-#scenecontent #status {
-  position: absolute;
-  right: 20px;
-  top: 80px;
-  width: 60%;
-  text-align: right;
-  margin-top: 0;
-}
-#scenecontent #status::before {
-  content: "";
-}
-#scenecontent #status:empty::before, #scenecontent #status > span:empty::before {
-  content: "";
-}
-
-#type .dimslider,
-.input .dimslider,
-.statusNormal .dimslider,
-.statusProtected .dimslider {
-  background: rgba(0, 0, 0, 0.26);
-  border: none;
-  box-shadow: none;
-  height: 5px;
-  bottom: 50px;
-  right: 20px;
-  width: 70% !important;
-}
-#type .dimslider .ui-slider-range,
-.input .dimslider .ui-slider-range,
-.statusNormal .dimslider .ui-slider-range,
-.statusProtected .dimslider .ui-slider-range {
-  background: rgba(11, 151, 205, 0.5);
-}
-#type .dimslider .ui-slider-handle,
-.input .dimslider .ui-slider-handle,
-.statusNormal .dimslider .ui-slider-handle,
-.statusProtected .dimslider .ui-slider-handle {
-  width: 15px;
-  height: 15px;
-  background: var(--main-blue-color);
-  border-radius: 50%;
-  top: -5px;
-}
-
-@media (min-width: 1200px) {
-  #type .dimslider, .input .dimslider {
-    width: 55% !important;
-  }
-
-  #itemtabledoubleicon .dimslider,
-#itemtablesmalldoubleicon .dimslider {
-    width: 55% !important;
-  }
-}
 body {
   background: var(--main-bg-color) !important;
   color: #1a1a1a;
@@ -744,15 +102,6 @@ img.header__icon {
   width: 150px;
 }
 
-button.menu-toggle {
-  display: none;
-  position: absolute;
-  top: -6px;
-  left: 10px;
-  background: transparent;
-  border: none;
-  outline: 0 !important;
-}
 
 .navbar-inverse .navbar-inner {
   border: none;
@@ -903,16 +252,20 @@ button.menu-toggle {
   margin-left: 16px;
 }
 
-.container .item {
-  padding: 10px 0;
-}
 
 table.display tr.odd.row_selected td {
   background-color: none;
 }
 
-body table#itemtable {
-  width: auto !important;
+
+button.menu-toggle {
+  display: none;
+  position: absolute;
+  top: -6px;
+  left: 10px;
+  background: transparent;
+  border: none;
+  outline: 0 !important;
 }
 
 /* Reset theme button */ 
@@ -989,14 +342,6 @@ body table#itemtable {
 .btnsmall:hover {
   color: #818183;
 }
-
-#itemtabledoubleicon td:last-child .btnsmall-sel,
-#itemtablenostatus td:last-child .btnsmall-sel,
-#itemtabletrippleicon td:last-child .btnsmall-sel {
-  border-radius: 0;
-  height: auto;
-}
-
 .display .ui-widget-content {
   background: transparent;
   color: black;
@@ -1023,14 +368,6 @@ body table#itemtable {
   color: black;
 }
 
-body table#itemtabledoubleicon tr td:first-child {
-  border: none;
-  background: transparent;
-}
-
-body table#itemtabledoubleicon tbody tr:hover body table#itemtabledoubleicon tr td {
-  background: none;
-}
 
 table.dataTable thead th, table.dataTable thead td{
 	color: #1a1a1a;
@@ -1040,10 +377,6 @@ table.dataTable thead th, table.dataTable thead td{
 	text-align: -webkit-left;
 }
 
-body table#itemtabledoubleicon .wrapper {
-  color: orange;
-}
-
 div#hardwarecontent,div#cameracontent,div#devicecontent,div#logcontent {
     width: auto;
 }
@@ -1126,10 +459,6 @@ input#AcceptNewHardware:checked ~ button {
   border: none;
   border-bottom: 1px solid var(--main-blue-color);
 }
-/* =Setup */
-/* Footer */
-/* =Footer */
-/* Popups */
 
 .ui-widget-content {
   background: transparent;
@@ -1198,76 +527,6 @@ input#AcceptNewHardware:checked ~ button {
 
 
 
-/*  Device is timeout  */
-.item.statusTimeout{
-	box-shadow: 0px 0px 10px 2px rgb(199,67,67,0.5);
-	/* background-color: transparent !important; */
-}
-.item.statusTimeout:hover{
-	box-shadow: 0px 0px 0px 2px rgb(199,67,67);
-}
-.item.statusTimeout{
-	/* color: #c74343 !important; */
-	opacity:0.5;
-}
-.item.statusTimeout td#img{
-	opacity:0.2;
-}
-/* Switch is protected */
-.item.statusProtected{
-	box-shadow: 0px 0px 10px 2px rgb(0, 0, 139, 0.4);
-}
-.item.statusProtected:hover{
-	box-shadow: 0px 0px 0px 2px rgb(0, 0, 139);
-}
-.item.statusProtected #name:before{
-	content:'';
-	display: inline-block;
-	width: 20px;
-	height: 16px;
-	background-image: url('../images/deviceProtected.png');
-	background-repeat: no-repeat;
-	background-position: center;
-}
-/* Device has low battery */
-.item.statusLowBattery{
-	box-shadow: 0px 0px 10px 2px rgb(255,255,0,0.4);
-}
-.item.statusLowBattery:hover{
-	box-shadow: 0px 0px 0px 2px rgb(255,255,0);
-}
-.item.statusLowBattery #name:before{
-	content:'';
-	display: inline-block;
-	width: 25px;
-	height: 20px;
-	background-image: url('../images/lowbattery.png');
-	background-repeat: no-repeat;
-	background-position: center;
-	animation: blinker 2s linear infinite;
-}
-
-
-
-
-
-
-
-
-
-
-@keyframes blinker {
-  50% {
-    opacity: 0;
-  }
-}
-
-
-
-
-
-
-
 
 
 
@@ -1288,10 +547,6 @@ input#AcceptNewHardware:checked ~ button {
     align-content: center;
     
   }
-.item {
-  min-width: 20em;
-  margin-right:0 !important;
-  }
   .container-logo {
     width: 940px;
   }
@@ -1451,10 +706,6 @@ input#AcceptNewHardware:checked ~ button {
     width: 378px;
   }
 
-  #itemtablenostatus #type,
-#itemtabletrippleicon #type {
-    height: auto;
-  }
 
   .navbar .divider-vertical {
     margin: 0 20px;
@@ -1491,116 +742,6 @@ input.parentunrequiredchild{
 
 /* MOBILE */
 
-table.mobileitem{
-    width: 100%;
-    padding: 0;
-    margin-top:20px;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-}
-table.mobileitem > thead{
-    display: flex;
-}
-table.mobileitem > thead > tr {
-    display:flex;
-	background: none;
-}
-table.mobileitem > thead > tr > th:first-of-type{
-    flex-grow:1;
-}
-
-table.mobileitem .status > span > span{margin-right:7px;}
-
-.mobileitem th{
-    display:inline;
-    background-color: transparent;
-    text-shadow: none;
-}
-.mobileitem tr{
-    margin: 0!important;
-    padding: 0!important;
-    box-sizing: border-box;
-    height: auto;
-    display: flex;
-    flex-grow: 1;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 100%;
-}
-.mobileitem td{
-    height: auto!important;
-    margin-right: 0!important;
-    /*word-break: break-word;*/
-    /*margin: 0!important;*/
-    background-image: none!important;
-    display: inline-flex;
-    width: auto;
-    flex-grow: 1;
-    flex-shrink: 1;
-    align-items: center; 
-    padding:5px!important;
-    min-height:35px;
-}
-.mobileitem td > div {margin: 0!important;}
-
-.mobileitem td:last-child{
-    flex-wrap:wrap;
-}
-.mobileitem td label{
-    white-space: nowrap;
-    height:50%;
-}
-body.dashMobile table.mobileitem td#name,
-body.dashMobile table.mobileitem td.name{
-    font-size: 100%;
-    position: inherit;
-    padding:0 0 0 10px!important;
-    height:auto;
-    min-height:30px;
-}
-body.dashMobile table.mobileitem td#name img,
-body.dashMobile table.mobileitem td.name img{
-    margin-right:5px;
-}
-.mobileitem .btn-mini{
-    margin-left: 2px;
-}
-#dashcontent .mobileitem .dimslider{
-  background: rgba(0, 0, 0, 0.26);
-  border: none;
-  box-shadow: none;
-  height: 5px;
-}
-#dashcontent .mobileitem .dimslider .ui-slider-range{
-  background: rgba(11, 151, 205, 0.5);
-}
-#dashcontent .mobileitem .dimslider .ui-slider-handle{
-  width: 15px;
-  height: 15px;
-  background: var(--main-blue-color);
-  border-radius: 50%;
-  top: -6px;
-}
-#dashcontent .mobileitem td#status,
-#dashcontent .mobileitem td.status{
-    display: flex;
-    position:initial;
-    flex-direction: row;
-    white-space: normal;
-    width: auto;
-    max-width:60%;
-    justify-content: flex-end;
-    padding: 0;
-    flex-grow: 1;
-    flex-shrink: 1;
-    margin: 0;
-    text-align: end;
-}
-#dashcontent .mobileitem .selectorlevels {
-  position: relative;
-  right: 0px;
-  bottom: 0px;
-}
 #login:before {
     background: linear-gradient(to right, #0bcdc7 0%, var(--main-blue-color) 100%);
     text-align: center;
diff --git a/custom.scss b/custom.scss
deleted file mode 100644
index f6b5b76..0000000
--- a/custom.scss
+++ /dev/null
@@ -1,685 +0,0 @@
-@import 'css/popups';
-@import 'css/switchers';
-@import 'css/item';
-@import 'css/dimslider';
-
-body {
-    background-image: none;
-    background-color: #f1f1f1;
-    color: #1a1a1a;
-}
-
-a:link {
-    color: inherit;
-}
-
-/* Header */
-
-header.logo {
-    background: #0bcdc7;
-    background: -moz-linear-gradient(left, #0bcdc7 0%, #0b96cd 100%);
-    background: -webkit-gradient(left top, right top, color-stop(0%, #0bcdc7), color-stop(100%, #0b96cd));
-    background: -webkit-linear-gradient(left, #0bcdc7 0%, #0b96cd 100%);
-    background: -o-linear-gradient(left, #0bcdc7 0%, #0b96cd 100%);
-    background: -ms-linear-gradient(left, #0bcdc7 0%, #0b96cd 100%);
-    background: linear-gradient(to right, #0bcdc7 0%, #0b96cd 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0bcdc7', endColorstr='#0b96cd', GradientType=1 );
-}
-
-.container-logo {
-    height: 30px;
-    width: 1170px;
-    margin: 0 auto;
-    position: relative;
-}
-
-
-.brand {
-
-    img,
-    h1,
-    h2 {
-        display: none; /*Standart header logo*/
-    }
-}
-
-img.header__icon{
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 0%;
-    width: 150px;
-}
-
-button.menu-toggle {
-    display: none;
-    position: absolute;
-    top: -6px;
-    left: 10px;
-    background: transparent;
-    border: none;
-    outline: 0 !important;
-}
-
-.navbar-inverse {
-
-    .navbar-inner {
-        border: none;
-        background-color: #fff;
-    }
-
-    .nav li.dropdown > a:hover .caret,
-    .nav li.dropdown.open > .dropdown-toggle .caret {
-        border-top-color: #1a1a1a;
-        border-bottom-color: #1a1a1a;
-    }
-
-    .nav li.dropdown.open > .dropdown-toggle {
-        background-color: #fff;
-        color: #1a1a1a;
-    }
-}
-
-.navbar {
-
-    .brand {
-        position: absolute;
-        top: 5px;
-        left: 50%;
-        transform: translateX(-50%);
-        padding: 0;
-        display: block !important;
-        margin: 0;
-    }
-
-    .divider-vertical {
-        margin: 0 5px;
-    }
-
-    .nav {
-        li a,
-        li a:hover {
-            background: none;
-            background-color: #fff;
-            color: #1a1a1a;
-            border: none;
-            border-radius: 0;
-            position: relative;
-
-            &:before {
-                content: '';
-                height: 2px;
-                width: 100%;
-                background-color: #0b96cd;
-                position: absolute;
-                left: 0;
-                bottom: 0;
-            }
-
-        }
-
-        > li > .dropdown-menu {
-
-            &:after {
-                border-bottom: 6px solid #0bcdc7;
-            }
-
-            &.pull-right li {
-                margin-top: 5px; 
-
-                &:first-child {
-                    margin: 0;
-                }
-            }
-        }
-
-        .dropdown-menu {
-            border: none;
-            background: #0bcdc7;
-        }
-    }
-
-
-    .pull-right > li > .dropdown-menu .dropdown-menu,
-    .nav > li > .dropdown-menu.pull-right .dropdown-menu{
-        background: #0bcdc7!important;
-    }
-
-}
-
-.navbar .nav .current_page_item > a,
-.navbar .nav .current_page_item > a:hover,
-.navbar-inverse .nav > li > a:focus{
-    color: #fff;
-    background-image: none;
-    background-color: #0b96cd;
-    border: none;
-    border-radius: 0;
-    
-}
-
-.nav li a img {
-    display: none;
-}
-
-
-#mAbout {
-}
-
-#mSecurity, 
-#mMobile, 
-#mNotification, 
-.dropdown-menu .divider, 
-.have-update {
-}
-
-.sub-tabs > li > a,
-.sub-tabs > .active > a,
-.nav-tabs > .active > a:hover {
-    background: none;
-    border: none;
-}
-
-.sub-tabs > .active > a,
-.nav-tabs > .active > a:hover {
-    border-bottom: 2px solid #0b96cd;
-}
-
-/* =Header */
-
-.bannercontent {
-    padding-top: 90px;
-}
-
-.sub-tabs .sub-tabs-apply,
-.sub-tabs .sub-tabs-apply:hover {
-   background-color: #0b96cd;
-   border: none !important;
-   border-radius: 2px;
-   color: #fff;
-}
-
-#timesun font {
-    color: #1a1a1a;
-}
-
-.btnstylerev,
-.btnstyle {
-    background: none;
-    color: #1a1a1a;
-}
-
-.bannav a.btnstylerev,
-.bannav a.btnstyle {
-    position: relative;
-    overflow: visible;
-    margin-left: 16px;
-    color: #1a1a1a;
-}
-
-.bannav a.btnstylerev::before,
-.bannav a.btnstyle::after{
-    content: "";
-	position: absolute;
-	top: 50%;
-	width: 1vmin;
-	height: 1vmin;
-	background: transparent;
-	border-top: 0.1vmin solid #1a1a1a;
-	border-right: 0.1vmin solid #1a1a1a;
-}
-
-.bannav a.btnstylerev::before {
-  left: 15px;
-  transform: translate3d(0,-50%,0) rotate(-135deg);
-}
-
-.bannav a.btnstyle::after {
-  right: 15px;
-	transform: translate3d(0,-50%,0) rotate(45deg);
-}
-
-.bannav a.btnstyle {
-    position: relative;
-    overflow: visible;
-    margin-left: 16px;
-  }
-
-.container .item {
-    padding: 10px 0;
-}
-
-table.display tr.odd.row_selected td {
-    background-color: none;
-}
-
-body table#itemtable{
-    width: auto!important;
-}
-
-
-/* Panels */
-
-.btnsmall,
-.btnsmall:hover {
-    color: #818183;
-}
-
-#itemtabledoubleicon td:last-child .btnsmall-sel, 
-#itemtablenostatus td:last-child .btnsmall-sel,
-#itemtabletrippleicon td:last-child .btnsmall-sel {
-    border-radius: 0;
-    height: auto;
-}
-
-.display .ui-widget-content{
-    background: transparent;
-    color: black;
-    border: none;
-    border-bottom: 1px solid #0b96cd;
-}
-
-.ui-widget-header {
-    background: #0b96cd;
-    border-color: #0b96cd;
-}
-
-.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
-    background: white;
-    color: #696969 !important;
-}
-
-.btnstyle3-dis, .btnstyle3{
-    background: #0b96cd;
-    margin-top: 15px;
-}
-
-.ng-scope h2{
-    color: black;
-}
-
-body table#itemtabledoubleicon tr td:first-child{
-    border: none;
-    background: transparent;
-}
-
-body table#itemtabledoubleicon tbody tr:hover body table#itemtabledoubleicon tr td{
-    background: none;
-}
-
-body table#itemtabledoubleicon .wrapper{
-    color: orange;
-}
-
-.dataTables_wrapper tr.odd{
-    background: #f1f1f1;
-    border-left: 1px solid #ddd;
-    border-right: 1px solid #ddd;
-}
-
-.dataTables_wrapper tr.even{
-    border-left: 1px solid #ddd;
-    border-right: 1px solid #ddd;
-}
-
-
-
-#hardwaretable_wrapper a{
-    background: transparent!important;
-    border: none!important;
-    color: black!important;
-}
-
-.highcharts-credits{
-}
-
-.btnsmall-sel{
-    border-radius: 0;
-    height: auto;
-    padding: 3px 20px;
-    background: #0bcdc7;
-    margin-right: 10px;
-}
-
-.ui-dialog-buttonset button {
-    background: #0b96cd!important;
-    color: white!important;
-    border: none!important;
-    border-radius: 0!important;
-}
-
-#getlatlong{
-    background: #0b96cd!important;
-    color: white!important;
-    border: none!important;
-    border-radius: 0!important;
-    padding: 8px 15px;
-}
-
-/* =Panels */
-
-.highcharts-background {
-    fill: #fff;
-    stroke-width: 0;
-}
-
-.highcharts-title, 
-.highcharts-axis-labels text, 
-.highcharts-legend-item text {
-    color: grey !important;
-    fill: grey !important;
-}
-
-/* Setup */
-
-.allow5min,
-.allow5min:hover {
-    background: none;
-    background-color: #0b96cd;
-    color: #fff;
-    border-radius: 2px;
-    border: none;
-}
-
-.ui-corner-all {
-    background: none;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid #0b96cd;
-}
-
-/* =Setup */
-
-/* Footer */
-
-#copyright {
-}
-
-/* =Footer */
-
-/* Popups */
-#login {
-    background-image: none !important;
-    background-color: #fff;
-}
-
-#login h1:before,
-#login h1:after,
-#login:before {
-}
-
-#login #submit{
-    background-image: none;
-    background-color: #0b96cd;
-    color: #fff;
-    border: none;
-}
-
-.ui-widget-content {
-    background: transparent;
-    background-color: #f1f1f1;
-    color: #1a1a1a;
-}
-
-#offline {
-    background: #0bcdc7;
-    background: -moz-linear-gradient(left, #0bcdc7 0%, #0b96cd 100%) !important;
-    background: -webkit-gradient(left top, right top, color-stop(0%, #0bcdc7), color-stop(100%, #0b96cd)) !important;
-    background: -webkit-linear-gradient(left, #0bcdc7 0%, #0b96cd 100%) !important;
-    background: -o-linear-gradient(left, #0bcdc7 0%, #0b96cd 100%) !important;
-    background: -ms-linear-gradient(left, #0bcdc7 0%, #0b96cd 100%) !important;
-    background: linear-gradient(to right, #0bcdc7 0%, #0b96cd 100%) !important;
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0bcdc7', endColorstr='#0b96cd', GradientType=1 ) !important;
-
-}
-
-#offline h3 {
-    color: #fff;
-}
-
-#offline h3:before,
-#offline h3:after,
-#offline:before {
-}
-
-/* =Popus */
-
-.ui-dialog-buttonset .ui-button-text {
-    color: #fff;
-}
-
-
-#devices_paginate a{
-    background: transparent!important;
-    color: #1a1a1a!important;
-    border: none!important;
-}
-
-.ui-widget-header {
-	color: #222222;
-}
-
-/* Hamburger */
-
-.menu-toggle{
-    width: 25px;
-    height: 25px;
-
-    &:before {
-        content: "≡";
-        font-size: 35px;
-        color: white;
-    }
-}
-
-.btnsmall{
-    display: block;
-    color: black!important;
-    background: none;
-}
-
-
-/* Watermarks */
-
-#dashcontent .beforebannav + h2 + p + p {
-}
-
-
-/* Media Queries */
-
-@media screen and (max-width: 1199px) {
-    
-    .container-logo {
-        width: 940px;
-    }
-
-}
-
-@media screen and (max-width: 992px) {
-
-    .container-logo {
-        width: auto;
-    }
-
-    img.header__icon {
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-
-    .navbar-inverse .navbar-inner {
-        display: none;
-        padding: 0;
-    }
-
-    button.menu-toggle {
-        display: block;
-    }
-
-    .navbar {
-
-        .nav {
-            margin: 0!important;
-            float: none;
-
-            > li {
-                float: none;
-
-                > .dropdown-menu.pull-right li {
-                    margin: 0;
-                }
-            }
-
-            .dropdown-menu {
-                padding: 0;
-                box-shadow: none;
-            }
-
-            li a {
-                text-align: left;
-            }
-
-            .current_page_item > a {
-                text-align: left;
-            }
-
-            li ul li a {
-                padding-left: 30px!important;
-            }
-
-            li ul li ul{
-                right: 0!important;
-                left: 0!important;
-                top: 245%!important;
-                width: 100%!important;
-                padding: 0!important;
-                margin: 0!important;
-
-                li a {
-                    padding-left: 50px!important;
-                }
-
-                li ul {
-                    top: 345%!important;
-                    width: 100%!important;
-                    padding: 0!important;
-                    margin: 0!important;
-
-                    li a {
-                        padding-left: 80px!important;
-                    }
-                }
-            }
-
-        }
-
-        .divider-vertical {
-            display: none!important;
-        }
-    }
-
-    .hidden-tablet{
-        display: block!important;
-    }
-
-
-    .navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
-        margin: 0;
-        position: absolute;
-        left:50%;
-        transform: translate(-50%);
-        bottom: 10px;
-    }
-
-    .navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right {
-        left: 0;
-        width: 100%;
-    }
-
-    .navbar .pull-right > li > .dropdown-menu:after,
-    .navbar .nav > li > .dropdown-menu.pull-right:after,
-    .navbar .pull-right > li > .dropdown-menu:after,
-    .navbar .nav > li > .dropdown-menu.pull-right:before {
-        display: none!important;
-    }
-
-    .navbar .nav .dropdown-menu,
-    .navbar .pull-right > li > .dropdown-menu .dropdown-menu,
-    .navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu,
-    .navbar .pull-right > li > .dropdown-menu .dropdown-menu,
-    .navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu{
-        background: white!important;
-        position: relative;
-    }
-
-    .dropdown-submenu > a:after {
-        position: absolute;
-        left: 50%;
-        bottom: 10px;
-        transform: translate(-50%);
-        transform: rotate(90deg);
-        border-left-color: #000;
-        border-width: 4px; 
-    }
-
-    .dropdown-submenu:hover > a:after {
-        border-left-color: #000;
-    }
-
-    .navbar-fixed-top {
-        margin-bottom: 20px;
-        position: static !important;
-    }
-
-    .bannercontent {
-        padding-top: 0;
-    }
-
-}
-
-@media (max-width: 767px) {
-    body {
-        padding-right: 20px!important;
-        padding-left: 20px!important;
-    }
-}
-
-@media (min-width: 768px) {
-
-    .navbar .brand {
-        left: auto;
-        margin-left: 90px;
-        transform: translateX(0);
-    }
-
-    .span3 {
-        width: 226px;
-    }
-
-}
-
-@media (min-width: 992px) {
-
-    .span3 {
-        width: 298px;
-    }
-
-}
-
-@media (min-width: 1200px) {
-
-    .span3 {
-        width: 378px;
-    } 
-
-    #itemtablenostatus #type,
-    #itemtabletrippleicon #type {
-        height: auto;
-    }
-
-    .navbar .divider-vertical {
-        margin: 0 20px;
-    }
-
-}
-
-/* =Media Queries */
\ No newline at end of file