.red {color:rgb(199,52, 117)}

/****************************************************************************/
/********************************* ICONS ************************************/
/****************************************************************************/

.icon{
	display: inline-block; 
	width:36px;
	height:36px;
	background-repeat:no-repeat;
	background-size: 24px;
	background-position: 50% 50%;	
}

.icon.search {right:0px;	background-image:url(img/search.svg);}
.icon.clear {right:0px;	background-image:url(img/clear.svg);}
.icon.close {background-image:url(img/close.svg);}
.icon.up {background-image:url(img/up.svg);}
.icon.down {background-image:url(img/down.svg);}


.icon.hide{display:none}



/****************************************************************************/
/*****************************item = Icon + Text ****************************/
/****************************************************************************/

.item {
	margin:5px;
	display:inline-block;
	vertical-align:top;
	width:auto;
	height:auto;
	padding:7px;
	padding-left:45px;
	border:1px dotted rgba(0,149,171,0);
	border-radius:10px;
	text-align:left;
	background-repeat:no-repeat;
	background-size: 24px;
	background-position: 10px 5px;
	color:#000;
	-webkit-transition: all .25s linear;	
}

.item.hide{
	display:none;
}

.item:hover{	
	cursor:pointer;
	cursor:hand;
}

.item.wide{
	width:260px;
	font-size:16px;
}

/****************************************************************************/
/************************ Button = Icon and/or Text *************************/
/****************************************************************************/


.button{
   	display:inline-block;
	vertical-align:top;
	margin:5px;
	height:24px;
	width:24px;
	padding:4px;
	text-align:left;
	border-radius:10px;
	background-color: #fff;	
	color:#000;
	-webkit-transition: all .25s linear;
  	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
	background-repeat:no-repeat;
	background-size: 24px;
	background-position: 50% 50%;
}

.button:hover{	
	cursor:pointer;
	cursor:hand;
	//background-color:rgba(0,149,171, 0.2);
}
.button.active{	
	background-color:rgba(0,149,171, 0.2);
}

.night .button.active{	
	color:#fff;
}


.button.hide{
	display:none;
}

.button.disable{
	background-color: #efefef;
	box-shadow: none;		
}

.night .button.selected {
     background-color: #fff;
}	

.button.selected {
     background-color: rgba(0,149,171,0.2);
}	

.button.pressed {
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}

.button.square {
	width:120px;
	height:30px;
	padding-top:50px;
	background-size: 36px;
	background-position: 50% 10px;
	border: 1px solid grey;
	text-align:center;
	font-size:16px;
}

.button.wide {
	padding-left:50px;
	padding-top:5px;
	width:210px;
	background-position: 12px 50%;
}

.button.text {
	padding-left:12px;
	padding-right:12px;
	width:auto;
	min-width:12px;
}

.button.close {background-image:url(img/close.svg)}
.button.close.red {background-image:url(img/close-red.svg)}
.button.menu-vert {background-image:url(img/menu-vert.svg)}
.button.search {background-image:url(img/search.svg)}

.button.expert {background-image:url(img/school.svg)}
.button.expert.wxite {background-image:url(img/school-white.svg)}

.button.exit {background-image:url(img/exit.svg)}
.button.exit.white {background-image:url(img/close-white.svg)}

.button.ok.green {background-image:url(img/ok-green.svg)}
.button.search.green {background-image:url(img/search-green.svg)}
.button.search.red {background-image:url(img/search-red.svg)}
.button.left {background-image:url(img/left.svg)}
.button.right {background-image:url(img/right.svg)}
.button.home {background-image:url(img/home.svg)}

.button.up {background-image:url(img/up.svg)}
.button.up {background-image:url(img/down.svg)}
                                                    



/****************************************************************************/
/*******  ЭЛЕМЕНТ СПИСКА ДОКУМЕНТОВ li = Icon + Text + Attributes + Fragment*/
/****************************************************************************/



.li {
	margin:0px;
	display:block;
	vertical-align:top;
	min-height:30px;
	padding:6px;
	padding-left:35px;
	text-align:left;
	background-repeat:no-repeat;
	background-size: 24px;
	background-position: 0px 7px;
	background-image:url(img/doc.svg);
	//color:#000;
	-webkit-transition: all .25s linear;
	border-bottom: 1px dotted grey;
}

.li.visited{
	background-image:url(img/doc-visited.svg);
}

.li.folder{
	background-image:url(img/folder.svg);
}

.li.folder.visited{
	background-image:url(img/folder.svg);
}


.li.akcent{
	background-size: 20px;
	background-position: 6px 10px;
	background-image:url(img/akcent.svg);
}
.li.mtime{
	background-image:url(img/history.svg);
}


.li:hover{	
	cursor:pointer;
	cursor:hand;
}



.li.selected {
	background-color:rgba(211,211,211,0.5);  
}

.li.ne_die {
	background-image:url(img/doc-grey.svg)
}.li.ne_die.visitet {
	background-image:url(img/doc-visited.svg)
}

.li.cnt{
	min-height:0px;
	padding-top:0px;
	padding-bottom:6px;
	padding-right:0px;
	padding-left:0;
	border:none;
	margin:0;
	background:transparent;
	
}
.li.cnt.title{
	font-weight:500;
}
.li.cnt.title.ne_die{
	color:rgb(192,192,192);
}
.li.cnt.reg {
	font-size:90%; 
	overflow: hidden;
}
.li.cnt.attr {
	color:rgb(0,75,85); 
}
.night .li.cnt.attr {
	color:rgb(0,149,171); 
}
.li.cnt.fragment {
	margin-top:6px;
	text-align:justify;
}
.li.cnt.fragment b{
	background-color:rgba(255,255,0,0.3);
}
.li.cnt.rubrics{
	color:rgb(199, 52, 117);
	text-align:right;
	font-style:italic;
}

.li.cnt.etitle{
	color:rgb(199, 52, 117);
}

.li.cnt.isread{
	color:rgb(199, 52, 117);
	text-align:left;
	font-style:italic;
}

.splitter{
	color:rgb(199,52,117);
	text-align:center;
	margin-bottom:10px;
}

/***********************************************************************/
/************************** BookMarks **********************************/
/***********************************************************************/

div.bmark{
	display:inline-block;
	float:left;
	width:2px;
	height:12px;
	border:6px solid;
	border-bottom: 2px solid #fff;
	color: rgb(0, 149, 171);
	background-color:rgb(0, 149, 171);
}

.bmark:hover{	
	cursor:pointer;
	cursor:hand;
}

.li.bk{
	background-image:none;
	padding-left:10px;
	color:#000;
}



.li.bk .bmark{
	margin-top:3px;
	margin-right:10px;
}
.li.bk .title{
	font-weight:normal;
}

.text.bk{
	margin:0;
	margin-top:10px;
	padding:0;
	border:none;
	border-top:1px dotted;
	border-bottom:1px dotted;
	color: rgb(0, 149, 171);
}
.text.bk .bmark{
	margin-top:0px;
}
.text.bk .title{
	margin-top:0px;
}