::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar:horizontal { height: 3px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-track:horizontal { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #bdbdbd; border-left: 1.5px solid transparent; border-right: 1.5px solid transparent; }
::-webkit-scrollbar-thumb:horizontal { background: #bdbdbd; border-top: 1.5px solid transparent; border-bottom: 1.5px solid transparent; }
::-webkit-scrollbar-thumb:hover { background: #9e9e9e; border-left: 1.5px solid #bdbdbd; border-right: 1.5px solid #bdbdbd; }
::-webkit-scrollbar-thumb:horizontal:hover { background: #9e9e9e; border-top: 1.5px solid #bdbdbd; border-bottom: 1.5px solid #bdbdbd; }

body {
 margin: 0;
 padding: 0;
 overflow: hidden;
 display: block;
 position: relative;
}
i { 
 vertical-align: middle; 
}
.components {
 padding: 10px;
}
.components > li > a {
 display: block;
 width: 100%;
 text-decoration: none;
 padding: 2px;
}
.components > li > a:hover, .components > li > a.active {
 background: lightblue;
 padding: 2px;
}
.col-1.extend-1 {
 width: 10%;
}
.col-1.extend-2 {
 width: 12%;
}
.col-1.extend-3 {
 width: 15%;
}
.theme {
 color: #000;
 background: #faf5f5;
}