/*	Pixeltrains - Drawings library stylesheet
	(c) Antoine Boudon - dev@pixeltrains.io 	*/

/* :^) :^) :^) :^) :^) :^) :^) :^) :^) :^) :^) :^) :^) :^) :^) :^)	*/

#content{
	flex-direction: row;
	height: calc(100vh - 76px);
}
#menu, #library{
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	border: solid 1px #666;
	border-radius: 2px;
}
#menu{
	margin-right: 10px;
	flex: 3;
}
#library{
	flex: 4;
}
#foldertree{
	justify-content: space-between;
	align-items: start;
	margin-bottom: 5px;
}
#foldertree .level{
	cursor: pointer;
	user-select: none;
	display: flex;
	min-height: 18px;
	line-height: 13px;
	align-items: center;
	background-color: #fff;
} #foldertree .level:hover{
	color: #ff7d00;
}
#folder1{
	margin-left: 15px;
}
#folder2{
	margin-left: 30px;
}
#folder3{
	margin-left: 45px;
}
#folder4{
	margin-left: 60px;
}
#searchinput{
	width: 240px;
	margin-right: 4px;
}
#library .icon{
	height: 23px;
	margin-left: 4px;
	border-radius: 2px;
}
#spacer{
	flex: 1;
}
#displayindicator{
	height: 21px;
	line-height: 21px;
	border-bottom: solid 1px #666;
	margin-bottom: 10px;
}
.drawing{
	display: inline-flex;
	flex-direction: column;
	justify-content: end;
	user-select: none;
	border-bottom: solid 1px #bbb;
}
.drawing.clickable{
	cursor: pointer;
}.drawing.clickable:hover{
	background-color: #ddd;
}.drawing.clickable:active{
	background-color: #bbb;	
}
.drawing.zoom1{
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 4px;
	height: 28px;
}
.drawing.zoom2{
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 6px;
	height: 56px;
}
.details{
	display: flex;
    flex-direction: column;
    border: solid 1px #666;
    border-radius: 2px;
    margin-top: 4px;
}
.details .subline{
	display: flex;
	width: 100%;
	align-items: end;
	place-content: end space-between;
	border-bottom: solid 1px #666;
}
.details .line1{
	margin-left: 4px;
	margin-right: 4px;
}
.details.zoom1 .col1, .details.zoom1 .col2{
	display: flex;
	height: 30px;
	align-items: end;
}
.details.zoom2 .col1, .details.zoom2 .col2{
	display: flex;
	height: 58px;
	align-items: end;
}
.details .col1{
	flex: 1;
	overflow: hidden;
}
.details .col2{
	transform: translate(-10px);
	background: linear-gradient(90deg, #fff0 0px, #fff 10px, #fff 100%);
}
.details .iconbar{
	display: flex;
    margin-bottom: 4px;
	transform: translate(10px);
}
.details .iconbar img{
	width: 18px;
	border-radius: 2px;
	margin-left: 4px;
	user-select: none;
}
.details .icon{
	height: 23px;
    margin-bottom: 4px;
    border-radius: 2px;
	transform: translate(10px);
}
.details .line2{
	display: flex;
	flex-direction: column;
	margin-top: 6px;
	margin-bottom: 0px;
	padding-bottom: 2px;
	overflow-x: auto;
	padding-left: 4px;
}
.details .line2 span{
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.details .line2 span div{
	color: #fff;
	user-select: none;
	margin-left: 1px;
}
.folder{
	min-height: 22px;
	display: flex;
	align-items: center;
	background-color: #fff;
	cursor: pointer;
	user-select: none;
	border-bottom: solid 1px #666;
	padding-left: 4px;
} .folder:hover{
	background-color: #ddd;
} .folder:active{
	background-color: #ccc;
} .folder.selected{
	background-color: #c3d1d5;
} .folder:last-child{
	margin-bottom: 6px;
}
#parents{
	color: #496269;
}
#parentstitle{
	margin-top: 25px;
	font-weight: 500;
	user-select: none;
	margin-bottom: 4px;
}
#parents .folder{
	border-bottom: solid 1px #496269;
}
#parents img{
	opacity: 0.66;
}
#parents .folder.current{
	color: #000;
	font-weight: 500;
}
#parents .folder.current img{
	opacity: 1;
}
#bottomnotice{
	height: 22px;
	display: flex;
	align-items: center;
	background-color: #fff;
	user-select: none;
	padding-left: 19px;
}

#w2, #w3{
	width: 484px;
}
#w5{
	width: 600px;
}
#w5 .details.inwindow{
	border-radius: 0px;
	border: unset;
	padding: 0px;
}
#w5 .subline{
	border-bottom: unset;
}
#w5 .details.inwindow .line1{
	margin: 0px;
}
#w5 .details.inwindow .line2{
	margin-top: 0px;
	padding-top: 6px;
	padding-bottom: 2px;
	border: solid 1px #666;
	border-radius: 2px;
	border-top-left-radius: 0px;
}
#w5 .title{
	margin-top: 6px;
}