/*	Pixeltrains - Train builder stylesheet
	(c) Antoine Boudon - dev@pixeltrains.io 	*/

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

body{
	overflow: hidden;
}
#content{
	flex-direction: row;
	height: calc(100vh - 76px);
}
#panels{
	height: calc(100% - 107px);
}
#editor, #meta{
	width: 100%;
	height: 100%
}
#builder{
	border: solid 1px #666;
	border-radius: 2px;
	margin-bottom: 10px;
	overflow: hidden;
	height: 95px;
}
#line{
	height: 25px;
}
#buildertitle{
	margin-bottom: 0px;
	margin-left: 6px;
}
#direction .options{
	margin-right: 3px;
	margin-left: 1px;
}
#direction img{
	margin-top: 3px;
	margin-bottom: 3px;
	height: 19px;
	margin-left: 4px;
	margin-right: 0px;
}
#spacer{
	flex: 1;
}
#BT{
	height: 70px;
	width: 100%;
}
#moveleft, #moveright{
	position: absolute;
	height: 71px;
	width: 60px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	user-select: none;
}
#moveleft{
	left: 0px;
	background: linear-gradient(90deg, #aaa 0%, #fff0 95%);
} #moveleft:hover{
	background: linear-gradient(90deg, #aaa 0%, #6664 95%);
} #moveleft:active{
	background: linear-gradient(90deg, #888 0%, #4444 95%);
}
#moveright{
	right: 0px;
	background: linear-gradient(270deg, #aaa 0%, #fff0 95%);
}  #moveright:hover{
	background: linear-gradient(270deg, #aaa 0%, #6664 95%);
} #moveright:active{
	background: linear-gradient(270deg, #888 0%, #4444 95%);
}
#moveleft img, #moveright img{
	width: 25px;
}
#menu, #library, #sidebar{
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	border: solid 1px #666;
	border-radius: 2px;
}
#menu{
	margin-right: 10px;
	flex: 3;
}
#library{
	margin-right: 10px;
	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;
}
#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;
	border: solid 1px #666;
	border-radius: 2px;
	margin-top: 4px;
}
.main{
	flex: 1;
	overflow: hidden;
}
.select{
	width: 35px;
	cursor: pointer;
	display: flex;
	align-items: center;
	user-select: none;
	background-color: #496269;
} .select:hover{
	background-color: #3f545a;
} .select:active{
	background-color: #34464b;
}
.select img{
	width: 35px;
}
.main .subline{
	display: flex;
	width: 100%;
	align-items: end;
	place-content: end space-between;
	border-bottom: solid 1px #666;
}
.main .line1{
	margin-left: 4px;
	margin-right: 4px;
}
.main.zoom1 .col1, .main.zoom1 .col2{
	display: flex;
	height: 30px;
	align-items: end;
}
.main.zoom2 .col1, .main.zoom2 .col2{
	display: flex;
	height: 58px;
	align-items: end;
}
.main .col1{
	flex: 1;
	overflow: hidden;
}
.main .col2{
	transform: translate(-10px);
	background: linear-gradient(90deg, #fff0 0px, #fff 10px, #fff 100%);
}
.main .iconbar{
	display: flex;
	margin-bottom: 4px;
	transform: translate(10px);
}
.main .iconbar img{
	width: 18px;
	border-radius: 2px;
	margin-left: 4px;
	user-select: none;
}
.main .icon{
	height: 23px;
	margin-bottom: 4px;
	border-radius: 2px;
	transform: translate(10px);
}
.main .line2{
	display: flex;
	flex-direction: column;
	margin-top: 6px;
	margin-bottom: 0px;
	padding-bottom: 2px;
	overflow-x: auto;
	padding-left: 4px;
}
.main .line2 span{
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.main .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;
}
#sidebar{
	width: 30px;
	overflow: hidden;
	user-select: none;
}
#sidecontainer{
	flex: 1;
}
#trackselection .options{
	display: flex;
	flex-direction: column;
	margin-bottom: 6px;
}
#trackselection .options img{
	margin-bottom: 4px;
}
#sidespacer{
	flex: 1;
}
#nexticon{
	margin-top: 10px;
	background-color: #999;
	width: 30px;
	height: 100px;
	border-radius: 3px;
	justify-content: center;
	cursor: not-allowed;
} #nexticon.clickable{
	cursor: pointer;
	background-color: #00b180;
} #nexticon.clickable:hover{
	box-shadow: 0px 0px 0px 1px #00b180;
} #nexticon.clickable:active{
	box-shadow: 0px 0px 0px 1px #000;
}
#nexticon img{
	width: 22.5px;
}
#shortcutsicon{
	width: 30px;
	border-radius: 3px;
	margin-top: 6px;
}

#w2, #w3, #w4{
	width: 484px;
}
#w5{
	width: 600px;
}
#w5 .subline{
	border-bottom: unset;
}
#w5 .title{
	margin-top: 6px;
}
.w5details{
	margin-top: 4px;
}
.w5details .subline{
	display: flex;
	width: 100%;
	align-items: end;
	place-content: end space-between;
	border-bottom: solid 1px #666;
}
.w5details.zoom1 .col1, .w5details.zoom1 .col2{
	display: flex;
	height: 30px;
	align-items: end;
}
.w5details.zoom2 .col1, .w5details.zoom2 .col2{
	display: flex;
	height: 58px;
	align-items: end;
}
.w5details .col1{
	flex: 1;
	overflow: hidden;
}
.w5details .col2{
	transform: translate(-10px);
	background: linear-gradient(90deg, #fff0 0px, #fff 10px, #fff 100%);
}
.w5details .iconbar{
	display: flex;
	margin-bottom: 4px;
	transform: translate(10px);
}
.w5details .iconbar img{
	width: 18px;
	border-radius: 2px;
	margin-left: 4px;
	user-select: none;
}
.w5details .icon{
	height: 23px;
	margin-bottom: 4px;
	border-radius: 2px;
	transform: translate(10px);
}
.w5details .line2{
	display: flex;
	flex-direction: column;
	margin-bottom: 0px;
	padding-top: 6px;
	padding-bottom: 2px;
	padding-left: 4px;
	overflow-x: auto;
	border: solid 1px #666;
	border-radius: 2px;
	border-top-left-radius: 0px;
}
.w5details .line2 span{
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.w5details .line2 span div{
	color: #fff;
	user-select: none;
	margin-left: 1px;
}

#sim{
	width: 100%;
	border: solid 1px #666;
	border-radius: 2px;
	margin-bottom: 8px;
}
#settings{
	border-left: solid 1px #666;
	border-right: solid 1px #666;
	padding-left: 8px;
	padding-right: 8px;
}
#TSspeed{
	align-items: center;
}
#TSspeed div{
	margin-bottom: 5px;
	margin-right: 4px;
}
#TSspeedlabel{
	font-weight: 500;
}
#TSspeedinput{
	width: 52px;
	margin-right: 4px;
}
#TSspeednotice{
	margin-left: 4px;
}
#TScolumn1{
	width: 500px;
	margin-right: 8px;
}
#TScolumn2{
	width: 250px;
}
#TSdescription{
	flex: 1;
}
#settingsnotice{
	height: 18px;
	color: #ed4343;
	margin-top: 5px;
}
#savepanel{
	margin-top: 8px;
	padding: 8px;
	width: 758px;
	border: solid 1px #666;
	border-radius: 2px;
}
#savepanel button{
	height: 38px;
	margin-bottom: 0px;
}
#prevbutton{
	border: unset;
	color: #fff;
}
#prevbutton{
	background-color: #ff9900;
	border-radius: 3px;
} #prevbutton:hover{
	box-shadow: 0px 0px 0px 1px #ff9900;
} #prevbutton:active{
	box-shadow: 0px 0px 0px 1px #000;
}
#prevbutton img{
	height: 23px;
	margin-right: 5px;
}
#savespacer{
	flex: 1;
}
#savebutton{
	margin-left: 6px;
	font-weight: 500;
} #savebutton.ready{
	border: unset;
	color: #fff;
	border-radius: 3px;
	background-color: #00b180;
	padding-right: 7px;
} #savebutton.ready:hover{
	box-shadow: 0px 0px 0px 1px #00b180;
} #savebutton.ready:active{
	box-shadow: 0px 0px 0px 1px #000;
} #savebutton.pending{
	border: unset;
	color: #fff;
	border-radius: 3px;
	background-color: #bbb;
	padding-right: 7px;
	cursor: not-allowed;
}
#savebutton img{
	width: 22.5px;
	margin-right: 4px;
}
#savebutton span{
	font-size: 17px;
}

#w7{
	width: 600px;
}
#w7 #foldercaption{
	margin-top: 0px;
	border-left: solid 10px #c3d1d5;
	padding-left: 4px;
	color: #496269;
	font-style: italic;
}
#w7 #tags{
	text-align: left;
	border-top: solid 1px #666;
	border-bottom: solid 1px#666;
	margin-top: 10px;
	padding-top: 9px;
	padding-bottom: 9px;
	margin-bottom: 15px;
}
#w7 #tagsheader{
	justify-content: space-between;
}
#w7 #tagsinput{
	width: 180px;
}
#w7 button{
	margin-bottom: 0px;
	width: 50%;
} #w7 button:first-child{
	margin-right: 4px;
}