/* Sidebar */

  #sidebar {
    position: fixed;
    background: @grayLight;
    top: 62px;
    bottom: 0px;
    width: 225px;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    border-right: 1px solid @gray;
    border-spacing: 0px;
  }

  #sidebar-wrapper {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 224px;
    padding: 0px;
    margin: 0px;
  }

  #sidebar-scroll-area {
    position: absolute;
    top: 0px;
    bottom: 45px;
    width: 100%;
    padding: 5px 0 0 0;
    margin: 0px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #sidebar-lists  {
    padding: 0px;
    margin: 0px;
  }
  
  #sidebar-bottom {
    position: absolute;
    width: 100%;
    height: 25px;
    bottom: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: @grayLight;
    border-top: 1px solid @gray;
  }

  #sidebar-bottom a {
    display: inline-block;
    margin: 0px 10px;
    font-size: 14px;
    line-height: 14px;
    font-weight: normal;
    color: @grayDark;
  }

  #sidebar-bottom a:hover {
    color: @blue;
  }

	#sidebar hr  { margin: 10px 0px;	}

  #sidebar      ul    { margin: 0px; padding: 0px; }
  #sidebar      ul li { margin: 3px 0px; padding: 0px 0px; transition-duration: 0.3s; }
  #sidebar.cozy ul li { margin-top: 2px; margin-bottom: 3px; padding-top: 2px; padding-bottom: 2px; }
  #sidebar.snug ul li { margin-top: 1px; margin-bottom: 2px; padding-top: 1px; padding-bottom: 1px; }

  #sidebar ul li.show-subtags {
    background: @white;
    border-top: 1px solid @grayMid;
    border-bottom: 1px solid @grayMid;
    padding-top: 5px;
	  transition-duration: 0.3s;
  }

  #sidebar a.sidebar-tag {
    position: relative;
    display: block;
    margin: 0px 7px;
    padding: 6px 5px;
    vertical-align: middle;
    text-align: left;
    white-space: nowrap;
    transition-duration: 0.2s;
    box-sizing: content-box;
  }

  #sidebar a.sidebar-tag:hover  { color: @gray; }

  #sidebar.cozy a.sidebar-tag   { padding: 3px 0px; }
  #sidebar.snug a.sidebar-tag   { padding: 0px 0px; }

  #sidebar li.is-editing,
  #sidebar li.is-editing a.sidebar-tag { cursor: move; }

  #sidebar a.sidebar-tag span.icon {
    margin-left: 5px;
    width: 24px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-weight: normal;
    font-size: 18px;
    line-height: 18px;
  }

  #sidebar.cozy a.sidebar-tag span.icon { font-size: 18px; line-height: 18px; }
  #sidebar.snug a.sidebar-tag span.icon { font-size: 16px; line-height: 16px; }

  #sidebar a.sidebar-tag > span.name,
  #sidebar a.sidebar-tag > span.notification {
    vertical-align: middle;
    font-family: @mailpile-text-font-family;
    font-weight: normal;
    font-size: 18px;
    line-height: 24px;
  }

  #sidebar a.sidebar-tag span.name {
    display: inline-block;
    max-width: 135px;
    padding-left: 5px;
    padding-right: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #sidebar a.sidebar-tag span.notification {
    display: inline-block;
    letter-spacing: -.5px;
    color: @gray;
  }

  #sidebar.cozy span.name,
  #sidebar.cozy span.notification { font-size: 16px; line-height: 18px; }
  #sidebar.snug span.name,
  #sidebar.snug span.notification { font-size: 14px; line-height: 16px; }

  #sidebar a.sidebar-tag.has-unread span.name,
  #sidebar a.sidebar-tag.has-unread span.notification {
    font-family: @mailpile-text-font-family-bold;
    font-weight: normal;
  }

 #sidebar li.sidebar-tag {
   position: relative;
 }

 #sidebar a.sidebar-tag-expand {
   position: absolute;
   display: inline-block;
   color: @grayMid;
   top: 20%;
 }

 #sidebar a.sidebar-tag-settings {
   position: absolute;
   display: inline-block;
   color: @grayMid;
   right: 4px;
   top: 20%;
 }


/* Sidebar - Subtags */

  #sidebar ul.sidebar-subtags {
    margin-bottom: 8px;
    padding: 0px;
  }

  #sidebar ul.sidebar-subtags li.sidebar-subtag {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  #sidebar li.sidebar-subtag a.sidebar-tag.has-unread span.name,
  #sidebar li.sidebar-subtag a.sidebar-tag.has-unread span.notification {
    font-family: @text-font-family;
    font-weight: bold;
  }

  #sidebar li.sidebar-subtag a.sidebar-tag span.icon {
    margin-left: 16px;
    font-size: 16px;
    line-height: 16px;
  }

  #sidebar li.sidebar-subtag a.sidebar-tag span.name,
  #sidebar li.sidebar-subtag a.sidebar-tag span.notification {
    vertical-align: middle;
    font-weight: normal;
    font-size: 14px;
    font-family: @text-font-family;
    line-height: 16px;
  }


/* Sidebar - Edit */

  a.sidebar-tag span.sidebar-tag-archive {
    cursor: pointer;
    background: @gray;
    color: @white;
    vertical-align: middle;
    padding: 5px;
    position: absolute;
    top: 4px;
    right: 0px;
    font-size: 8px;
    line-height: 8px;
    border-radius: 10px;
  }

  a.sidebar-tag span.sidebar-tag-archive:hover {
    background: @orange;
  }


/* Sidebar - Drag & Drop */

  .sidebar-tags-draggable {
    border-radius: @base-border-radius;
  }

  .sidebar-tags-draggable-hover {
	  transition-duration: 0.3s;	    
  }

  .sidebar-tags-draggable-hover.show-subtags {

  }

  .sidebar-tags-draggable-active,
  .sidebar-tags-draggable-active.show-subtags {
    background: @grayMid;
	  transition-duration: 0.3s;
  }

  .sidebar-tags-draggable-highlight {
	  transition-duration: 0.3s;
  }


/* Sidebar - Sortable */

  .sidebar-tags-sortable {
    height: 29px;
    padding: 5px 10px;
    margin: 4px 0;
    border-radius: @base-border-radius;
    background: @grayMid;
  }
  

/* Sidebar - Tag Drag */

  .sidebar-tag-drag {
  	background: @white;
  	border: 1px solid @gray;
  	border-radius: 4px;
  	padding: 5px 10px;
  	font-size: 14px;
  	font-weight: bold;
    z-index: 9999;
  }
  
