@import url("/css/shared/gallery.css");
/* img edit tool */
img.edit, img.edit-modify, img.edit-move, img.edit-remove{
	width:30px;height:30px;
	cursor:pointer;margin:0px 5px;
}
img.edit-move{
	cursor:move;
}
img.white{
	filter:invert(100%);
}
/* #profile-header */
#profile-header{
	position:relative;height:100px;
}
#profile-header>.avatar{
	position:absolute;bottom:-30px;left:10px;
	width:120px;height:120px;
	background-position:center center;background-size:cover;
	border-radius:50%;border:4px solid white;
}
#profile-header>.avatar>.edit{
	position:absolute;top:60%;left:60%;
	filter:invert(100%) drop-shadow(0px 0px 5px #333333);
	margin:0px;
}
#profile-header>.nickname{
	display:flex;align-items:center;
	position:absolute;bottom:10px;left:150px;
	font-size:1.2rem;font-weight:bold;
}
#profile-header>.nickname>.text{
	overflow-x:hidden;white-space:nowrap;
}
/* #profile-header>.links */
#profile-header>.links{
	position:absolute;bottom:10px;right:0px;
	display:flex;justify-content:flex-end;align-items:center;width:265px;
}
#profile-header>.links>.link{
	display:block;
	width:30px;height:30px;margin:0px 5px;
	background-size:100% 100%;border-radius:50%;
	filter:brightness(0.95);background-image:url("/images/profile/website.png");
}
#profile-header>.links>.link:hover,
#profile-header>.links>.link:active{
	filter:brightness(0.8);
}
#profile-header>.links>.link[href^="https://www.facebook.com/"]{
	background-image:url("/images/profile/facebook.png");
}
#profile-header>.links>.link[href^="https://www.linkedin.com/"]{
	background-image:url("/images/profile/linkedin.png");
}
#profile-header>.links>.link[href^="https://twitter.com/"]{
	background-image:url("/images/profile/twitter.png");
}
#profile-header>.links>.link[href^="https://github.com/"]{
	background-image:url("/images/profile/github.png");
}
/* #profile-status */
#profile-status{
	display:flex;align-items:center;
	max-height:70px;min-height:40px;line-height:40px;
	background-color:var(--light-gray-5);
}
#profile-status>.title{
	font-weight:bold;margin-left:150px;margin-right:30px;
}
@media (max-width:800px){
	#profile-header{
		height:90px;
	}
	#profile-header>.avatar{
		width:100px;height:100px;bottom:-25px;
	}
	#profile-header>.nickname{
		left:130px;
	}
	#profile-header>.links{
		bottom:auto;top:10px;
	}
	#profile-status{
		display:block;
		line-height:30px;padding-top:30px;padding-bottom:10px;
	}
	#profile-status>.title, #profile-status>.company{
		margin:0px;margin-left:40px;white-space:nowrap;overflow-x:hidden;
	}
}
/* #profile-actions */
#profile-actions{
	display:flex;align-items:center;justify-content:flex-end;
	transform:translateY(-6px);margin-right:5px;
	text-align:right;line-height:normal;
}
#profile-actions>.text{
	font-size:0.9rem;color:var(--normal-gray);margin:0px 5px;
}
#profile-actions>a{
	display:inline-flex;align-items:center;padding:8px 12px;
}
#profile-actions>a.follow::before{
	content:"";display:block;width:20px;height:20px;
	background-image:url("/images/profile/follow.png");background-size:100%;
	background-size:90%;background-position:center;background-repeat:no-repeat;
	filter:invert();
}
#profile-actions>a.following::before{
	content:"";display:block;width:20px;height:20px;
	background-image:url("/images/profile/following.png");
	background-size:100%;
	filter:invert();
}
#profile-actions>a.following:hover::before,
#profile-actions>a.following:active::before{
	background-image:url("/images/profile/unfollow.png");
	background-size:90%;background-position:center;background-repeat:no-repeat;
}
/* #profile-tags */
#profile-tags{
	padding:0px 20px;
}
#profile-tags>.current{
	color:var(--brand-light-color);border-bottom-color:var(--brand-light-color);
}
/* #profile-main */
#profile-main{
	display:flex;
}
#profile-main>.left{
	flex:auto;
}
#profile-main>.right{
	flex:none;width:300px;
}
#profile-main .part{
	line-break:anywhere;
}
#profile-main .part>a{
	text-decoration:underline;
}
@media (max-width:800px){
	#profile-main{
		display:block;
	}
	#profile-main>.left{
		padding:0px;
	}
	#profile-main>.right{
		width:auto;padding:0px;
	}
}
/* #profile-main .skills */
#profile-main .skills{
	position:relative;
}
#profile-main .skills>.group{
	padding:15px 0px;
}
#profile-main .skills>.group:first-child{
	padding-top:0px;
}
#profile-main .skills>.group>.title{
	font-weight:bold;margin-bottom:10px;
}
#profile-main .skills>.group>.items{
	margin-left:15px;
}
/* #profile-main .exps */
#profile-main .exps{
	position:relative;
}
#profile-main .exps>.group{
	display:flex;flex-wrap:wrap;padding:20px 0px;
	border-bottom:1px solid var(--light-gray-4);
}
#profile-main .exps>.group:first-child{
	padding-top:0px;
}
#profile-main .exps>.group:last-child{
	border-bottom:none;
}
#profile-main .exps>.group>.title{
	width:100%;font-weight:bold;
}
#profile-main .exps>.group>.title>.current{
	font-weight:bold;font-size:0.8em;color:var(--normal-gray);
	position:relative;top:-12px;margin-left:5px;
}
#profile-main .exps>.group>.company{
	flex:auto;
}
#profile-main .exps>.group>.year{
	width:30px;
}
#profile-main .exps>.group>.description{
	width:100%;margin:10px 0px;
}
#profile-main .exps>.group>.description>a{
	text-decoration:underline;
}
/* #profile-main .moving */
/* #profile-main .group>.manage */
#profile-main .group>.manage{
	width:100%;text-align:right;opacity:0.15;touch-action:none;
}
#profile-main .group:hover>.manage,
#profile-main .group:active>.manage{
	opacity:1;
}
#profile-main .group>.manage>img{
	margin-left:10px;touch-action:none;
}
#profile-main .moving,
#profile-main .moving{
	position:relative;
	background-color:var(--light-gray-4);
	opacity:0.9;
}
#profile-main .moving-target,
#profile-main .moving-target{
	position:absolute;width:100%;height:4px;background-color:black;
	z-index:10;
}
/* #posts-main */
#posts-main{}
#posts-main>.post-start{
  display:flex;align-items:center;
  padding:20px;
}
#posts-main>.posts{
	padding:20px;
}
@media (max-width:800px){
	#posts-main>.posts{
		padding:0px;
	}
}
/* #posts-main>.post-start */
#posts-main>.post-start>img.avatar{
  width:48px;height:48px;border-radius:50%;margin-right:10px;
}
#posts-main>.post-start>.create{
  flex:auto;padding:6px 12px;border-radius:20px;cursor:pointer;
  color:var(--normal-gray);border:1px solid var(--light-gray-4);
}
#posts-main>.post-start>.create:hover,
#posts-main>.post-start>.create:active{
  background-color:var(--light-gray-5)
}
/* #posts-main>.posts */
#posts-main>.posts>.post{
	display:grid;grid-template:40px auto auto auto / 50px auto 32px;row-gap:10px;
	grid-template-areas:
		"picture name-time-accsss manage"
		"content content content"
    "images images images"
    "tools tools tools";
  padding:20px;margin-bottom:20px;border-bottom:1px solid var(--light-gray-5);
}
#posts-main>.posts>.post:last-child{
  border-bottom:none;
}
#posts-main>.posts>.post>img.picture{
	grid-area:picture;align-self:start;border:1px solid var(--light-gray-4);
	width:40px;height:40px;object-fit:cover;border-radius:50%;
}
#posts-main>.posts>.post>.name-time-access{
	grid-area:name-time-accsss;font-size:0.9rem;
}
#posts-main>.posts>.post>.name-time-access>.name{
	font-weight:bold;line-height:25px;position:relative;
}
#posts-main>.posts>.post>.name-time-access>.time-access{
  display:flex;align-items:center;
	line-height:15px;color:var(--normal-gray)
}
#posts-main>.posts>.post>.name-time-access>.time-access>img.access{
  width:15px;height:15px;margin-left:5px;
}
#posts-main>.posts>.post>.manage{
  grid-area:manage;position:relative;cursor:pointer;
}
#posts-main>.posts>.post>.manage>img{
  width:100%;
}
#posts-main>.posts>.post>.manage>img:hover,
#posts-main>.posts>.post>.manage>img:active{
  background-color:var(--light-gray-5);
}
#posts-main>.posts>.post>.content{
	grid-area:content;color:var(--text-light-color);word-break:break-all;
}
#posts-main>.posts>.post>.content-hide{
  position:relative;overflow-y:hidden;
}
#posts-main>.posts>.post>.content-hide>.continue{
	position:absolute;bottom:0px;right:0px;
  width:100%;font-weight:bold;background-color:white;cursor:pointer;
}
#posts-main>.posts>.post>.content-hide>.continue:hover,
#posts-main>.posts>.post>.content-hide>.continue:active{
  text-decoration:underline;
}
#posts-main>.posts>.post>.imgs{
	grid-area:images;height:150px;width:100%;white-space:nowrap;overflow-x:auto;overflow-y:hidden;
}
#posts-main>.posts>.post>.imgs>.img{
  display:inline-block;height:100%;
}
#posts-main>.posts>.post>.imgs>.img>img{
  height:100%;
}
#posts-main>.posts>.post>.tools{
  grid-area:tools;display:flex;
  height:32px;margin-top:5px;
}
#posts-main>.posts>.post>.tools>.tool{
  display:flex;align-items:center;
  margin-right:10px;padding:5px;cursor:pointer;
  color:var(--normal-gray);font-size:0.9rem;
}
#posts-main>.posts>.post>.tools>.tool:hover,
#posts-main>.posts>.post>.tools>.tool:active{
  background-color:var(--light-gray-5);
}
#posts-main>.posts>.post>.tools>.tool>img,
#posts-main>.posts>.post>.tools>.tool>svg{
  height:100%;margin-right:3px;
}
#posts-main>.posts>.post>.tools>.like>svg>path{
  fill:none;stroke:black;
}
#posts-main>.posts>.post>.tools>.liked>svg>path{
  fill:var(--heart-bg-color);stroke:var(--heart-bg-color);
}
/* #popup>.post-menu */
#popup>.post-menu>.item{
  padding:0px 5px;
}
#popup>.post-menu>.item:hover,
#popup>.post-menu>.item:active{
  background-color:var(--light-gray-5);
}
#popup>.post-menu>.item-disabled{
  color:var(--normal-gray);
}
#popup>.post-menu>.item-disabled:hover,
#popup>.post-menu>.item-disabled:active{
  background-color:transparent;
}
#popup>.post-menu>.separator{
  height:1px;margin:5px 0px;background-color:var(--light-gray-4);
}
/* #dialog form.post */
#dialog form.post{
  height:100%;
}
#dialog form.post>.head{
  display:flex;align-items:center;height:30px;margin-bottom:5px;
}
#dialog form.post>.head>img.picture{
  width:30px;height:30px;border-radius:50%;margin-left:5px;margin-right:5px;
}
#dialog form.post>.head>.name{
  font-weight:bold;margin-right:5px;
}
#dialog form.post>.head>img.arrow{
  height:50%;margin-right:5px;
}
#dialog form.post>.head>.access{
  color:var(--normal-gray);
}
#dialog form.post>.editor{
  display:flex;flex-direction:column;height:calc(100% - 35px);
}
#dialog form.post>.editor>.content{
  flex:auto;overflow-y:auto;
}
#dialog form.post>.editor>.content>textarea{
  width:calc(100% - 12px)
}
#dialog form.post>.editor>.content>.image-container{
  padding:10px;border:1px solid var(--light-gray-5);
}
#dialog form.post>.editor>.content>.image-container>.image{
  position:relative;margin-bottom:10px;
}
#dialog form.post>.editor>.content>.image-container>.image>img{
  width:100%;
}
#dialog form.post>.editor>.content>.image-container>.image>.remove{
  position:absolute;width:32px;height:32px;top:0px;right:0px;cursor:pointer;
  background-color:rgba(255, 255, 255, 0.5);background-image:url("/images/close.svg");background-size:60% 60%;background-repeat:no-repeat;background-position:center center;
}
#dialog form.post>.editor>.toolbar{
  flex:none;padding:0px 10px;padding-top:10px;margin-top:10px;
  border-top:1px solid var(--light-gray-4);
  text-align:right;
}
#dialog form.post>.editor>.toolbar>.btn{
  cursor:pointer;
}
/* #topics-main */
#topics-main{}
#topics-main>.topic-start{
	padding:20px 40px;
}
#topics-main>.topics{
	padding:20px;
}
@media (max-width:800px){
	#topics-main>.topic-start{
		padding:20px;
	}
	#topics-main>.topics{
		padding:0px;
	}
}
#topics-main>.topics>.topic{
	line-height:1.5rem;
	margin-bottom:30px;padding:20px;
	border-bottom:1px solid var(--light-gray-5);
}
#topics-main>.topics>.topic:last-child{
	border-bottom:none;
}
#topics-main>.topics>.topic>.title{
	display:block;cursor:pointer;
	font-weight:bold;margin-bottom:5px;
}
#topics-main>.topics>.topic>.stats{
	font-size:0.9rem;
	margin-bottom:5px;
}
#topics-main>.topics>.topic>.keywords{
	font-size:0.9rem;margin-bottom:10px;
}
#topics-main>.topics>.topic>.keywords>.keyword{
	color:var(--brand-color);background-color:var(--brand-bg-color);
	padding:3px 5px;margin-right:5px;cursor:pointer;white-space:nowrap;
}
#topics-main>.topics>.topic>.keywords>.keyword:hover,
#topics-main>.topics>.topic>.keywords>.keyword:active{
	background-color:var(--brand-hover-bg-color);
}
#topics-main>.topics>.topic>.infos{
	display:flex;justify-content:flex-end;align-items:center;font-size:0.9rem;
}
#topics-main>.topics>.topic>.infos>.author{
	display:flex;align-items:center;margin-right:5px;
}
#topics-main>.topics>.topic>.infos>.author>img.avatar{
	width:27px;height:27px;border-radius:50%;border:1px solid white;
}
#topics-main>.topics>.topic>.infos>.author>.name{
	margin-left:5px;
}
/* #projects-main */
#projects-main>.projects{
	padding:20px;
}
@media (max-width:800px){
	#projects-main>.projects{
		padding:0px;
	}
}
#projects-main>.projects>.project{
	display:grid;grid-template-columns:90px auto;grid-template-rows:90px auto;
	padding:20px;border-bottom:1px solid var(--light-gray-4);
}
#projects-main>.projects>.project:last-child{
	border-bottom:none;
}
#projects-main>.projects>.project>.logo{
	grid-column:1/2;grid-row:1/2;
	display:block;width:90px;height:90px;
	object-fit:cover;
}
#projects-main>.projects>.project>.info{
	grid-column:2/3;grid-row:1/2;
	display:flex;flex-direction:column;
	height:90px;overflow:hidden;
}
#projects-main>.projects>.project>.info>.head{
	display:flex;align-items:center;
	font-weight:bold;margin-bottom:5px;padding-left:10px;
}
#projects-main>.projects>.project>.info>.head>.title{
	display:block;max-height:45px;flex:auto;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#projects-main>.projects>.project>.info>.head>.src{
	display:block;
	flex:none;width:25px;margin-left:10px;margin-right:5px;
}
#projects-main>.projects>.project>.info>.description{
	flex:auto;overflow:hidden;text-overflow:ellipsis;
	color:var(--text-color);padding-left:10px;
	word-break:break-all;
}
@media (max-width:600px){
	#projects-main>.projects>.project>.info>.head>.src{
		display:none;
	}
}
/* #followship-main */
#followship-main>.tags{
	padding:20px;
}
#followship-main>.followships{
	padding:40px;
}
@media (max-width:800px){
	#followship-main>.followships{
		padding:20px;
	}
}
#followship-main>.followships{
	display:grid;grid-template:auto/1fr 1fr 1fr 1fr;gap:20px;
}
#followship-main>.followships>.followship{
	display:grid;grid-template:
		"avatar name" 24px
		"avatar username" 24px
		/ 48px minmax(150px, auto);
	column-gap:10px;
}
#followship-main>.followships>.followship>.avatar{
	grid-area:avatar;width:100%;height:100%;border-radius:50%;object-fit:cover;
}
#followship-main>.followships>.followship>.name{
	grid-area:name;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#followship-main>.followships>.followship>.username{
	grid-area:username;color:var(--normal-gray);font-size:0.9rem;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:1000px){
	#followship-main>.followships{
		grid-template:auto/1fr 1fr 1fr;
	}
}
@media (max-width:800px){
	#followship-main>.followships{
		grid-template:auto/1fr 1fr;
	}
}
@media (max-width:500px){
	#followship-main>.followships{
		grid-template:auto/1fr;
	}
}
/* #status-main */
#status-main{
	padding:60px;
}
@media (max-width:800px){
	#status-main{
		padding:30px;padding-left:40px;
	}
}
#status-main>.part>.field{
	display:flex;align-items:center;
}
#status-main>.part>.field>img.edit{
	width:20px;height:20px;margin:0px 5px;cursor:pointer;
}
#status-main .alumni-available-form{
	display:flex;margin-top:10px;
}
#status-main .alumni-available-form>.switch-input{
	margin-right:8px;
}
#status-main .alumni-available-form>.switch-input>input[type="checkbox"]{
	display:none;
}
#status-main .alumni-available-form>.switch-input>.toggle{
	position:relative;display:inline-block;cursor:pointer;width:50px;height:28px;
	background:var(--light-gray-5);border-radius:28px;
}
#status-main .alumni-available-form>.switch-input>.toggle::after{
	content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;
	background:white;border-radius:50%;transition:all 0.5s;
}
#status-main .alumni-available-form>.switch-input>input[type="checkbox"]:checked+.toggle{
	background:var(--link-color);
}
#status-main .alumni-available-form>.switch-input>input[type="checkbox"]:checked+.toggle::after{
	left:25px;
}
/* .dialog>.main */
.dialog>.main>form>.group{
	border:1px solid var(--light-gray-4);padding:10px;margin-bottom:10px;
}
.dialog>.main>form>.group:last-child{
	margin-bottom:0px;
}
.dialog>.main>form>.group>.headline{
	font-size:1.2em;font-weight:bold;margin-bottom:10px;
}
.dialog>.main>form>.group>.field{
	line-height:30px;margin-bottom:10px;
}
.dialog>.main>form>.group>.field>.field-input{
	display:flex;justify-content:flex-start;
}
.dialog>.main>form>.group>.field>.field-input-center{
	align-items:center;
}
.dialog>.main>form>.group>.field>.field-input-multiple{
	flex-wrap:wrap;
}
.dialog>.main>form>.group>.field>.field-input>div.prefix{
	flex:none;width:auto;background-color:var(--light-gray-5);font-size:15px;
	display:flex;align-items:center;border:1px solid var(--light-gray-2);border-right-width:0px;
	padding:0px 8px;
}
.dialog>.main>form>.group>.field>.field-input>select{
	padding:6px 8px;font-size:15px;font-family:inherit;margin-right:25px;
}
.dialog>.main>form>.group>.field>.field-input>input[type="checkbox"]{
	width:20px;height:20px;
}
.dialog>.main>form>.group>.field>.field-input>input[type="text"]{
	width:200px;
}
.dialog>.main>form>.group>.field>.field-input-multiple>input[type="text"]{
	margin-right:10px;margin-bottom:10px;
}
.dialog>.main>form>.group>.field>.field-input>input.github::before{
	content:"https://github.com/"
}
.dialog>.main>form>.group>.field>.field-input>input[type="file"]{
	display:none;
}
.dialog>.main>form>.group>.field>.field-input>.reminder{
	font-size:0.8em;color:var(--normal-gray);margin:0px 5px;
}
.dialog>.main>form>.group>.field>.field-input>textarea{
	width:90%;height:150px;padding:10px;
}
.dialog>.main>form>.group>.field>.field-name>.avatar{
	width:120px;height:120px;
	border:1px solid var(--light-gray-2);border-radius:50%;
	background-position:center center;
	background-size:cover;
	margin:20px 10px;
}
@media (max-width:800px){
	.dialog>.main>form>.group>.field>.field-input>input[type="text"]{
		flex:auto;overflow-x:hidden;width:auto;
	}
}
/* .dialog>.footer */
.dialog>.footer{
	flex:none;display:flex;align-items:center;
	padding:10px;font-size:1.2em;text-align:right;
	border-top:1px solid var(--light-gray-4);
}
.dialog>.footer>.error{
	flex:auto;text-align:left;
	color:var(--error-color);font-size:0.8em;
}