div#head-bar{
  min-height: 47px;
  max-height: 90px;
  background-color: #209CEB;
  /*overflow: auto;*/
  /*overflow-y: hidden;*/
  clear: both;
  width: 100%;
  position: relative;
  z-index: 1000;
}

div#head-bar div.loading{
  float: left;
  width: 5px;
  min-height: 47px;
  max-height: 90px;
  background-image: none;
}

div#head-bar div.loading.active{
  background-image: url("./img/drop-loading.gif");
}

div#head-bar div.logo{
  float: left;
  min-height: 47px;
  max-height: 90px;
}

div#head-bar div.logo a img{
  max-height: 45px;
}

div#head-bar div.menu-wrapper {
  /*position: absolute;
  right: 0;
  bottom: 0;
  width: 80%;*/
  margin-left: 270px;
}

div#head-bar div.menu{
  float: right;
  height: 47px;
  padding-right: 8px;
  /*background-image: url("./img/bar/app-selection_bar.png");
  background-repeat: repeat-x;*/
  background-color: rgba(255, 255, 255, 0.3);
  width: 100%;
}

div#head-bar div.menu div.activity,
div#head-bar div.menu ul.app-list,
div#head-bar div.menu div.seperater,
div#head-bar div.menu div.display-name,
div#head-bar div.menu div.user{
  float: right;
}

div#head-bar div.left-corner{
  width: 33px;
  height: 42px;
  float: right;
  background-image: url("./img/bar/corner_left_app-selection_bar.png");
}

div#head-bar div.menu div.activity,
div#head-bar div.menu ul.app-list{
  margin: 10px 0 0 0;
  height: 35px;
}

div#head-bar div.menu ul.app-list > li{
  float: left;
  width: 28px;
  height: 37px;
  margin-left: 0;
  list-style: none;
  margin-left: 2px;
  cursor: pointer;
}

div#head-bar div.menu ul.app-list li:hover{
  border-bottom: solid 4px #2873BE;
}

div#head-bar div.menu ul.app-list li.active:hover,
div#head-bar div.menu ul.app-list li.active{
  border-bottom: solid 4px white;
}

div#head-bar div.menu ul.app-list a.app-link{
  width: 28px;
  height: 28px;
  display: block;
}

div#head-bar img.profile-picture {
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
}

i.app-icon{
  width: 18px;
  height: 18px;
  display: block;
  background-repeat: no-repeat;
  background-position: 0;
  background-size: 18px 18px;
}

.app-list i.app-icon{
  margin: 5px;
  /*background-position: 5px;*/
  opacity: 0.9;
}
.app-list li:hover i.app-icon,
.app-list li:focus i.app-icon {
  opacity: 1;
}

i.app-icon-todo{
  background-image: url("./img/app_selection/todo_app_icon.png");
}
li.active i.app-icon-todo{
  background-image: url("./img/app_selection/todo_app_icon_selected.png");
}

i.app-icon-calendar{
  background-image: url("./img/app_selection/calendar_app_icon.png");
}
li.active i.app-icon-calendar{
  background-image: url("./img/app_selection/calendar_app_icon_selected.png");
}

i.app-icon-friend{
  background-image: url("./img/app_selection/friend_app_icon.png");
}
li.active i.app-icon-friend{
  background-image: url("./img/app_selection/friend_app_icon_selected.png");
}

i.app-icon-contact{
  background-image: url("./img/app_selection/contact_app_icon.png");
}
li.active i.app-icon-contact{
  background-image: url("./img/app_selection/contact_app_icon_selected.png");
}

i.app-icon-mail{
  background-image: url("./img/app_selection/mail_app_icon.png");
}
li.active i.app-icon-mail{
  background-image: url("./img/app_selection/mail_app_icon_selected.png");
}

i.app-icon-dashboard{
  background-image: url("./img/app_selection/dashboard_app_icon.png");
}
li.active i.app-icon-dashboard{
  background-image: url("./img/app_selection/dashboard_app_icon_selected.png");
}

i.app-icon-activity{
  background-image: url("./img/app_selection/activity_app_icon.png");
}
li.active i.app-icon-activity{
  background-image: url("./img/app_selection/activity_app_icon_selected.png");
}

i.icon-file {
  background-position: -288px -192px;
}

.feed-item i.app-icon-todo{
  background-image: url("./img/grey/todo_app_icon.png");
}
.feed-item i.app-icon-calendar{
  background-image: url("./img/grey/calendar_app_icon.png");
}
.feed-item i.app-icon-friend{
  background-image: url("./img/grey/friend_app_icon.png");
}
.feed-item i.app-icon-contact{
  background-image: url("./img/grey/contact_app_icon.png");
}
.feed-item i.app-icon-mail{
  background-image: url("./img/grey/mail_app_icon.png");
}
.feed-item i.app-icon-dashboard{
  background-image: url("./img/grey/dashboard_app_icon.png");
}
.feed-item i.app-icon-activity{
  background-image: url("./img/grey/activity_app_icon.png");
}

/* status connecting style */
div#head-bar div.socket-status .icon-connect {
  width: 24px;
  height: 16px;
  line-height: 14px;
  vertical-align: text-top;
  background-position: -2px -2px;
  background-repeat: no-repeat;
}
div.socket-status .socket-disconnect {
  background-image: url("./img/app_selection/auto-sync-static-icon.gif");
}
div.socket-status i.socket-connecting {
  background-image: url("./img/app_selection/auto-sync-icon.gif");
  opacity: 0.4;
}
/* End status connecting style */

div#head-bar div.seperater{
  width: 2px;
  height: 28px;
  margin: 7px 11px;
  border-left: solid 1px rgba(255,255,255, 0.3);
}

div#head-bar div.display-name{
  line-height: 46px;
  margin-right: 10px;
  max-width: 340px;
}

div#head-bar div.display-name a{
  color: #0C3250;
  text-decoration: none;
}

div#head-bar div.display-name a:hover{
  color: #2873BE;
  text-decoration: none;
}

div#head-bar div.display-name span{
  font-size: 14px;
  word-wrap: break-word;
}

div#head-bar div.user span.caret {
  margin: 10px 0 0 5px;
  color: #0C3250;
}
div#head-bar div.user:hover span.caret,
div#head-bar div.user.a:hover span.caret{
  border-top-color: #47AEF0;
}

div#head-bar .menu img.profile-picture {
  margin-top: 9px;
  height: 28px;
  width: 28px;
  border: 1px solid #BBB;
}

div#head-bar .clear{
  clear: both;
}

div#head-bar ul.dropdown-menu{
  top: 42px;
}

div#head-bar .dropdown-menu::before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #CCC;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

div#head-bar .dropdown-menu.pull-right::before {
  right: 7px;
  left: auto;
}

div#head-bar .dropdown-menu::after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  border-left: 6px solid transparent;
  content: '';
}

div#head-bar .dropdown-menu.pull-right::after {
  right: 8px;
  left: auto;
}

div#head-bar ul.dropdown-menu li a:hover {
  color: #fff;
  background-color: #0293D2;
}

/* license */
div#head-bar div.license-div {
  padding: 2px 15px;
  width: 300px;
  line-height: 24px;
}

div#head-bar div.license-div div.usage-title {
  margin-bottom: 10px;
}

div#head-bar div.license-div .inline-muted {
  display: inline-block;
  margin-top: 3px;
}

div#head-bar div.license-div a {
  padding: 0;
  color: #08C;
  text-align: right;
}

div#head-bar div.license-div a#more-detail-btn {
  margin-top: 5px;
  color: #378ce6;
}

div#head-bar div.license-div a:hover {
  color: #5ab4fa !important;
  background-color: #fff !important;
  text-decoration: none !important;
}

div#head-bar div.progress {
  width: 100%;
  border: 0;
  padding: 0;
  margin-bottom: 0px;
  height: 10px;
}

.progress .bar {
  background-color: #5ab4fa;
background-image: -moz-linear-gradient(top, #5ab4fa, #5ab4fa);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5ab4fa), to(#5ab4fa));
  background-image: -webkit-linear-gradient(top, #5ab4fa, #5ab4fa);
  background-image: -o-linear-gradient(top, #5ab4fa, #5ab4fa);
  background-image: linear-gradient(to bottom, #5ab4fa, #5ab4fa);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5ab4fa', endColorstr='#5ab4fa', GradientType=0);
}

.progress-danger .bar,
.progress .bar-danger {
  background-color: #dd514c;
  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0);
}
.progress-warning .bar,
.progress .bar-warning {
  background-color: #faa732;
  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  background-image: -o-linear-gradient(top, #fbb450, #f89406);
  background-image: linear-gradient(to bottom, #fbb450, #f89406);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
}

.progress-unlimited .bar,
.progress .bar-unlimited {
  background-color: #5ab4fa;
  background-image: -moz-linear-gradient(left, #5ab4fa 0%, #ffffff 100%);
  background-image: -webkit-gradient(left top, right top, color-stop(0%, #5ab4fa), color-stop(100%, #ffffff));
  background-image: -webkit-linear-gradient(left, #5ab4fa 0%, #ffffff 100%);
  background-image: -o-linear-gradient(left, #5ab4fa 0%, #ffffff 100%);
  background-image: -ms-linear-gradient(left, #5ab4fa 0%, #ffffff 100%);
  background-image: linear-gradient(to right, #5ab4fa 0%, #ffffff 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ab4fa', endColorstr='#ffffff', GradientType=1 );
  border: 1px solid #e5e5e5;
}

div#head-bar div.cloud-box {
  width: 100%;
  left: 0;
  top: 0;
  position: relative;
}
div#head-bar div.cloud-box .alert {
  z-index: 20000;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  padding: 2px 20px 2px 10px;
  margin: 0;

  color: #c09853;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  font-size: 13px;
}
div#head-bar div.cloud-box p {
  margin: 0;
}
div#head-bar div.cloud-box .alert a {
  color: #C09853;
}
div#head-bar div.cloud-box .cloud-icon {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

div#head-bar div.version {
  font-size: smaller;
  text-align: center;
}

.icon-cloud {
  background-position: -72px -167px;
}
.icon-sharing {
  background-position: -24px -167px;
}
.icon-subtask {
  background-position: 0 -191px;
}
.icon-mail {
  background-position: -48px -167px;
}
.icon-state {
  background-position: -192px -167px;
}

.icon-sort-title {
  background-position: -97px -167px;
}
.icon-sort-date {
  background-position: -121px -167px;
}
.icon-sort-priority {
  background-position: -145px -167px;
}
.icon-sort-modify {
  background-position: -169px -167px;
}
.icon-sort-state {
  background-position: -192px -167px;
}
.icon-sort-unread {
  background-position: -337px -169px;
}
.icon-thin-check {
  background-position: -359px -169px;
}

i.icon-gray,
span.icon-gray {
  filter: Alpha(Opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/* feed */
div#head-bar span.unread{
  position: relative;
  top: -3px;
  left: -3px;
  float: left;
  background-color: #FD4E02;
  text-shadow: none;
  text-align: right;
  z-index: 1;
}

div#feed-popover .feed .popover-inner {
  background: white;
  padding: 2px;
  background: rgba(255, 255, 255, 1);
  width: 580px;
  height: 700px;
  /*box-shadow: none;*/
}

div#feed-popover .feed.popover .feed-item h5{
  word-break: break-word;
}

#feed-full .feed-item.unread,
div#feed-popover .feed.popover .feed-item.unread{
  background-color: #FFF6EE;
}

#feed-full .feed-item.unseen,
div#feed-popover .feed.popover .feed-item.unseen{
  background-color: #FFE7D6;
  /*background-color: #fff2e9;*/
}

.popover.bottom .arrow {
  border-bottom: 6px solid gray;
  top: -7px;
  margin-left: -6px;
}

.popover.left .arrow{
  border-left: 5px solid white;
}

.popover.right .arrow{
  border-right: 5px solid white;
  top: 20px;
}

.popover-tutorial {
  z-index: 1;
}

.feed.popover.right .arrow{
  top: 65px;
}
.feed.popover.bottom .arrow{
  left: 331px;
  top: -7px;
  border-bottom: 12px solid white;
  border-left: 8px solid rgba(0, 0, 0, 0);
  border-right: 8px solid rgba(0, 0, 0, 0);
}

.popover-inner {
  background: white;
  padding: 2px;
}

h3.popover-title{
  font-size: 16px;
  text-align: center;
}

.feed.popover .popover-title.feed-footer {
  margin-bottom: 0;
  text-align: center;
}

.feed.popover .popover-content{
  min-height: 130px;
  padding: 0px;
  margin-top: 0;
  overflow-y: auto;
}

.feed.popover .no-activity{
  text-align: center;
  padding-top: 55px;
}

.feed.popover li,
.modal .feed-list li,
#feed-full .feed-list li{
  border-bottom: 1px solid #eee;
}

.feed.popover li:not(.cannotClick),
.modal .feed-list li:not(.cannotClick),
#feed-full .feed-list li:not(.cannotClick){
  cursor: pointer;
}

.feed.popover li small,
.modal .feed-list li small,
#feed-full .feed-list li small{
  font-size: smaller;
}

#feed-full .load-more,
.modal .tab-pane.edit-feed .load-more{
  padding-left: 12px;
}

.feed.popover .see-all{
  text-align: center;
}

.feed.popover .profile-picture,
.modal .feed-list .profile-picture,
#feed-full .feed-list .profile-picture
 {
  float: left;
  width: 36px;
  height: 36px;
  margin-right: 8px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.feed.popover .profile-picture img,
.modal .feed-list .profile-picture img,
#feed-full .feed-list .profile-picture img {
  min-width: 32px;
}

.feed.popover .att-picture,
.modal .feed-list .att-picture,
#feed-full .feed-list .att-picture
 {
  float: right;
  margin-right: 0;
  margin-left: 8px;
}

.feed.popover.lessThan3 .feed-container {
  width: 415px;
}

.feed.popover .feed-container {
  float: left;
  width: 505px;
  word-wrap: break-word;
}

.feed.popover .feed-container.withAtt {
  width: 308px;
}

.feed-container .app-icon {
  float: left;
  margin-right: 2px;
  margin-right: 2px;
}

.feed.popover .feed-item,
.modal .feed-list .feed-item{
  box-sizing: border-box;
  padding: 5px;
  min-height: 50px;
}

#feed-full .feed-list .feed-item{
  padding: 5px 5px 5px 24px;
  min-height: 22px;
}
#feed-full .feed-list .feed-item p{
  margin-bottom: 0;
}
#feed-full p.no-activity {
  padding-left: 10px;
}
.modal .feed-list .feed-item .feed-container{
  margin-left: 50px;
}

#feed-popover div.popover {
  max-width: 1000px;
  box-shadow: none;
  border: none;
}

.popover-inner ul#feed-tab {
  font-size: 12px;
}

#feed-tab,
#full-feed-tab  {
  margin: 2px 0 5px;
}
#feed-tab li,
#full-feed-tab li {
  border-bottom: 0;
}
#feed-tab li a {
  padding: 7px;
}
#feed-full .feed-text{
  margin-left: 2px;
}
#feed-full .dateText {
  background: #F5F5F5;
  padding: 14px 8px 4px;
  font-weight: bold;
}

img.profile-picture {
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  background: #EDEDED;
}
/* end feed */