/*!
 * (c) newfire.com
 * lib/User.css
 */

obj[klass=User] {
  //background: var(--background);
  //border: 0;
}

obj[klass=User][mode=list] >attr >label {
  display: none;
}

obj[klass=User] >attr[name=photo] >label{
  //display: none;
}
obj[klass=User][mode=tile] attr[name=photo] img.preview{
  width: 100;
  height: 100;
}

obj[klass=User] >attr[name=name]{
  filter: opacity(.8);
}
obj[klass=User][mode=tile] >attr[name=name]{
  position: absolute;
  bottom: 3;
  left: 3; right: 3;
  color: white;
  text-shadow: -1px -1px 3px rgba(0, 0, 0, .5);
}

obj[klass=User] >attr[name=date] >label{
  display: inline-block;
  margin: 0 8 0 0;
}

obj[klass=User][mode=list] >attr >value{
  display: inline-block;
}

obj[klass=User] >attr[name=photo] file {
  display: block;
}
/*
obj[klass=User] >attr[name=photo] img.preview{
  height: auto;
}
*/

obj[klass=User][mode=list] >attr[name=photo] {
  float: left;
  width: 110;
  height: 90;
  margin: 0 10 10 0;
}

obj[klass=User] >attr[name=keys] >label{
  display: block;
}

obj[klass=User][mode=neu] >attr[name=timezone] {
  display: none;
}

obj[klass=User][mode=list] >buttons{
  margin: 9 0 0 0;
  clear: both;
}

/* 
 * Profile
 * <profile>
 *   <mi>
 */

profile {
  position: absolute;
  top: 0;
  right: 0;

  width: 29;
  height: 29;
  direction: rtl;
  //overflow: hidden;
  z-index: 10;

  //border-radius: 1em;
  color: var(--color);
}

profile:hover {
  width: unset;
  height: unset;
}

profile img{
  margin: 0;
  width: 25;
  height: 25;
  border-radius: 1em;
  box-shadow: var(--box-shadow);
}

profile options {
  display: hidden;
  background: var(--color);
}
profile:hover options {
  display: block;
  box-shadow: var(--box-shadow);
  color: var(--background-color);
  border-radius: 9px;
  margin: 4 0;
}

profile:not(:hover) options{
  display: none;
}

profile mi{
  text-align: right;
  box-shadow: unset!important;
  display: block;
  padding: 2;
}
profile mi#profile{
  background: transparent;
}

profile[user=public] mi#user,
profile[user=public] mi#exit{
  display: none;
}

/*
 * loginpanel
 */
loginpanel {
  display: inline-block; /* to center */
  border-radius: 10px;
  border: 1px solid rgba(200 200 200/.3);
  padding: 10;
}
loginpanel >form{
  display: block; 

  //background: rgba(100,100,100,.3);
}
loginpanel >form buttons{
  display: block; 
  margin: 20 0;
}
loginpanel status{
  display: inline-block;
  color: orange;
  white-space: pre-wrap;
  max-width: 230;
  text-align: left;
  margin: 10 0 0 0;
}


table th[name=photo]{
  width: 20;
} 
table th[name=date], table attr[name=date],
table th[name=date2], table attr[name=date2],
table th[name=update], table attr[name=update] {
  text-align: right;
}


/* 
 * switching menu tab 
 */
app[mode=sessions] mi#sessions{
  background: var(--background-hover);
}
app[mode=users] mi#users{
  background: var(--background-hover);
}