:root {
  --sb-bg: #EEE;
  --sb-color-1: #90959F;
  --sb-color-2: #90959F;
}

body {background: #EEE;}

#header {background: #FFF; border-bottom: 1px solid #DDD;}
#header .wrapper {display: grid; grid-template-columns: 300px auto 200px 40px; padding: 10px;}

#header .search {padding: 3px 0px; cursor: text;}
#header .search .wrap {display: grid; grid-template-columns: 34px auto; background: #EEE; border-radius: 5px;}
#header .search:hover .wrap {background: #E5E5E5;}
#header .search .icon {font-size: 18px; color: #777; padding: 8px;}
#header .search .placeholder {color: #777;}
#header .search .input {padding: 8px 0px;}
#header .search input {color: #333;}

#header .uframe {padding: 3px 5px; border-radius: 5px;}
#header .uframe .wrap {display: grid; grid-template-columns: 34px auto;}
#header .uframe .avatar {border-radius: 50%; user-select: none;}
#header .uframe .nickname {padding: 7px; font-size: 16px; line-height: 18px;}

#header .notification {padding: 8px;}
#header .notification .icon {font-size: 24px; color: #391852; vertical-align: top;}

#sidebar {width: 300px; background: #212529; border-right: 1px solid #DDD;}

#sidebar .logo {padding: 10px;}
#sidebar .logo .wrap {padding: 7px; text-align: center; color: #FFF8; font-size: 24px; line-height: 26px;}

#sidebar .clock {padding: 15px; background: #0001;}
#sidebar .clock .text {text-align: center; color: var(--sb-color-2); font-size: 16px; line-height: 20px;}
#sidebar .clock .time {text-align: center; color: var(--sb-color-2); font-size: 38px; line-height: 40px;}

#sidebar .menu {padding: 10px;}
#sidebar .menu .link {margin: 5px auto;}
#sidebar .menu .title {display: grid; grid-template-columns: 40px auto 40px; border-radius: 3px; cursor: pointer;}
#sidebar .menu .title {color: #a7acb1;}
#sidebar .menu .title .icon {padding: 8px; font-size: 24px;}
#sidebar .menu .title .text {padding: 11px 0px; font-size: 16px; line-height: 18px;}
#sidebar .menu .title .arrow {padding: 10px; font-size: 20px;}

#sidebar .menu .container {overflow: hidden;}
#sidebar .menu .container .item {display: grid; grid-template-columns: 40px auto; border-left: 0px solid transparent; cursor: pointer;}
#sidebar .menu .container .item {margin: 5px auto; color: #a7acb1; border-radius: 5px;}
#sidebar .menu .container .item .icon {padding: 15px; font-size: 10px;}
#sidebar .menu .container .item .text {padding: 11px 0px; font-size: 16px; line-height: 18px;}

#sidebar .menu .title:hover {background: rgba(255, 255, 255, 0.05); color: #FFF;}
#sidebar .menu .active .title {background: rgba(255, 255, 255, 0.05); color: #FFF;}
#sidebar .menu .active .arrow {transform: rotate(90deg);}
#sidebar .menu .container .item:hover {background: rgba(255, 255, 255, 0.05); color: #FFF;}
#sidebar .menu .container .linked {background: rgba(255, 255, 255, 0.05); color: #FFF;}

/* Z-INDEXES */
#header {z-index: 20;}
#sidebar {z-index: 50;}
#content {z-index: 5;}
/* ///////// */

/* GOOGLE ICONS FONT */
.icon {
  user-select: none;
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}