@CHARSET "UTF-8";
.shablon { display: none; }
p.help { display: none; } /*todo*/

strong.title {
  display: block;
  clear: both;
  font-size: 14px;
  margin: 0.2em 0 0.5em 0;
}
.block, .block2 {
  background-color: #def;
  border: 2px solid #ddd;
  -moz-border-radius: 1em;
  border-radius: 1em;
  padding: 1em;
}
.block2 {background-color: #eef;}
/* login form */
form[name=login] {
  display: block; 
  margin: 5em auto;
  width: 30em;
  -moz-border-radius: 1em;
  border-radius: 1em;
  padding: 2em;
}
form[name=login] h1 {
  font-size: 20px;
}
form[name=login] h2 {
  font-size: 12px;
  font-weight: normal; 
  color: red;
}
form[name=login] table {
  border-collapse:separate;
  border-spacing: 1em;
  font-size: 12px;
  color: #555;
  margin-bottom: 1em;
}
form[name=login] input[type=text], form[name=login] input[type=password]{
  border: 2px solid #ddd;
  font-size: 14px;
  padding: 0.2em;
}
/* /login form */

div.heart {
  position: absolute;
  right: 1em;
  top: 1em;
  font-size: 12px;
  z-index: 2;
  color: red;
}
div.bigger {font-size: 16px;}
div.heart.inactive{
  color: grey;
}
#login {
  position: absolute;
  right: 3em;
  top: 1em;
  font-size: 12px;
  z-index: 2;
}
#current_service {
  position: absolute;
  left: 10px;
  width: 210px; 
  height: 20px;
  top: 10px;
  font-size: 16px;
  padding: 0 10px;
}
#current_service > div, #current_service > span.mc{
  display: none;
}
#current_service > input.deselect{ position: absolute; top: 0px; right: 0px; background-color: inherit; border: 0px; z-index: 2;}
#current_service.active {
  -webkit-box-shadow: 0 0 4px 4px #FFFF00;
  box-shadow: 0 0 4px 4px #FFFF00;
}
#select_service {
  position: absolute;
  left: 10px;
  width: 160px; 
  top: 40px;
  bottom: 10px;
}
#select_service > ul { 
  position: absolute; left: 10px;
  right: 10px; 
  top: 80px;
  bottom: 5px;
}
#tabs {
  position: absolute;
  left: 200px;
  right: 230px;
  top: 10px;
  bottom: 10px;
  /*background-color: red;*/
}
#tabs > div {display: none;} 

.services div.creterea input[name=filter] {float: left; width: 146px; margin: 4px 4px 0px 4px; border: 2px solid #ddd;}
.services div.creterea input[name=clear_ctl] {background-color: inherit; border: 0px; margin: -20px 5px 0px 0px; float: right; }
.services > ul {
  clear: both;
  margin: 0px;
  padding: 0px;
  background-color: #fff;
  overflow-y: scroll;
  border: 2px solid #ddd;
}
.services > ul > li {
  display: block;
  margin: 0px 0px 2px 0px;
  padding: 2px 5px;
}
.services > ul > li:hover {
  background-color: #abc;
  cursor: pointer;
}
.services > ul > li.live {
  background-color: #DAFFF2;
}
.services > ul > li.selected {
  background-color: #4878A6;
  color: #ECF6FF;
}
/*all div in service item is usefull info but it should not be seen in select*/
.services > ul > li > div{
  display: none;
}

#main_service_description {
  position: absolute;
  right: 10px;
  top: 40px;
  width: 190px; max-width: 190px;
}
#main_service_description > form {display: none;}
#main_service_description > form textarea {width: 185px; height: 290px;}
#main_service_description > div.description {display: none; white-space: pre-wrap; background-color: #fed; padding: 5px;}

.help {
  display: inline-block;
}
.help > span {
  display: inline-block;
  cursor: pointer;
}
.help  p {
  display: none;
  max-width: 40em;
}

[data-websocket] {
  position: absolute;
  left: 50%;
  top: 2px;
  font-size: 1.6em;
}
[data-websocket] > label {display: none;}