@import url("/css/shared/gallery.css");

/* FOR GUEST */

/* #home */
#home{
  background-image:url("/images/keyvisual.jpg");
  background-size:100% 180px;background-position:cover;
  background-repeat:no-repeat;
  padding:0px;
}
#home>.event{
  display:block;padding:10px;text-align:center;
  color:var(--brand-highlight-color);background-color:var(--brand-highlight-bg-color);
}
#home>.event>.leadtext{
  font-weight:bold;margin-right:5px;
}
#home>.event>br{
  display:none;
}
@media (max-width:500px){
  #home>.event>br{
    display:block;
  }
}
/* #home>.welcome */
#home>.welcome{
  display:flex;align-items:center;
  height:180px;color:white;
}
#home>.welcome>.text{
  padding:0px 10%;width:80%;
}
#home>.welcome>.text>.title{
  font-size:1.8rem;margin-bottom:15px;
}
#home>.welcome>.text>.subtitle{
  font-size:1.25rem;margin-bottom:15px;
}
#home>.welcome>.text>.decoration{
  height:2px;background-color:var(--brand-highlight-color);
  width:400px;max-width:100%;
}
@media (max-width:500px){
  #home>.welcome>.text>.title{
    font-size:1.75rem;
  }
  #home>.welcome>.text>.subtitle{
    font-size:1.5rem
  }
}

#home>.services{}
#home>.post-start{
  display:flex;align-items:center;
  margin-bottom:10px;padding:20px 10%;
}
#home>.board{
  display:flex;align-items:flex-start;gap:20px;
  padding:40px 10%;
}
/* #home>.services */
#home>.services>.separator{
  height:1px;width:100px;background-color:var(--light-gray-5);
  margin:0px auto;
}
#home>.services>.service{
  display:flex;align-items:center;
  padding:40px 10%;padding-bottom:50px;
}
#home>.services>.service-block{
  display:block;background:linear-gradient(0deg, var(--light-gray-5), transparent);
}
#home>.services>.service>.left{
  width:50%;margin-right:50px;
}
#home>.services>.service>.right{
  width:50%;
}
@media (max-width:700px){
  #home>.services>.service{
    display:block;
  }
  #home>.services>.service>.left{
    width:auto;margin-right:0px;
  }
  #home>.services>.service>.right{
    width:auto;
  }
}
/* #home>.services>.service .title */
#home>.services>.service .title{
  display:block;
  font-size:1.5rem;line-height:2rem;margin-bottom:10px;
  color:var(--brand-color);
}
#home>.services>.service .subtitle{
  font-size:1.2rem;line-height:1.75rem;
}
#home>.services>.service summary{
  font-size:1rem;color:var(--text-light-color);
  margin:20px 0px;
}



/* FOR BOTH */
/* section>.post-start */
section>.post-start{
  display:flex;align-items:center;
  margin-bottom:30px;
}
section>.post-start>img.avatar{
  width:48px;height:48px;border-radius:50%;margin-right:10px;
}
section>.post-start>.create{
  flex:auto;padding:6px 12px;border-radius:20px;cursor:pointer;
  color:var(--normal-gray);border:1px solid var(--light-gray-4);
}
section>.post-start>.create:hover,
section>.post-start>.create:active{
  background-color:var(--light-gray-5)
}
/* section>.board */
section>.board{
  display:flex;align-items:flex-start;gap:20px;
}
section>.board>.posts{
  flex:auto;margin-right:10px;
}
section>.board>.authors{
  position:sticky;top:100px;
  flex:none;width:300px;
}
@media (max-width:800px){
  section>.board>.authors{display:none;}
}
/* section>.board>.posts */
section>.board>.posts>.post{
	display:grid;grid-template:40px auto auto auto / 50px auto 32px;
	grid-template-areas:
		"picture name-time-accsss manage"
		"content content content"
    "images images images"
    "tools tools tools";
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--light-gray-5);
}
section>.board>.posts>.post:last-child{
  border-bottom:none;
}
section>.board>.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%;
}
section>.board>.posts>.post>.name-time-access{
	grid-area:name-time-accsss;font-size:0.9rem;
}
section>.board>.posts>.post>.name-time-access>.name{
	font-weight:bold;line-height:25px;position:relative;
}
section>.board>.posts>.post>.name-time-access>.time-access{
  display:flex;align-items:center;
	line-height:15px;color:var(--normal-gray)
}
section>.board>.posts>.post>.name-time-access>.time-access>img.access{
  width:15px;height:15px;margin-left:5px;
}
section>.board>.posts>.post>.manage{
  grid-area:manage;position:relative;cursor:pointer;
}
section>.board>.posts>.post>.manage>img{
  width:100%;
}
section>.board>.posts>.post>.manage>img:hover,
section>.board>.posts>.post>.manage>img:active{
  background-color:var(--light-gray-5);
}
section>.board>.posts>.post>.content{
	grid-area:content;margin:10px 0px;color:var(--text-light-color);word-break:break-all;
}
section>.board>.posts>.post>.imgs{
	grid-area:images;height:150px;width:100%;white-space:nowrap;overflow-x:auto;overflow-y:hidden;
}
section>.board>.posts>.post>.imgs>.img{
  display:inline-block;height:100%;
}
section>.board>.posts>.post>.imgs>.img>img{
  height:100%;
}
section>.board>.posts>.post>.tools{
  grid-area:tools;display:flex;
  height:32px;margin-top:5px;
}
section>.board>.posts>.post>.tools>.tool{
  display:flex;align-items:center;
  margin-right:10px;padding:5px;cursor:pointer;
  color:var(--normal-gray);font-size:0.9rem;
}
section>.board>.posts>.post>.tools>.tool:hover,
section>.board>.posts>.post>.tools>.tool:active{
  background-color:var(--light-gray-5);
}
section>.board>.posts>.post>.tools>.tool>img,
section>.board>.posts>.post>.tools>.tool>svg{
  height:100%;margin-right:3px;
}
section>.board>.posts>.post>.tools>.like>svg>path{
  fill:none;stroke:black;
}
section>.board>.posts>.post>.tools>.liked>svg>path{
  fill:var(--heart-bg-color);stroke:var(--heart-bg-color);
}
/* section>.board>.authors */
section>.board>.authors>.author{
	display:grid;grid-template:30px 40px / 40px auto;
	grid-template-areas:
		"picture name"
		"latest-topic latest-topic";
	align-items:center;
  margin-bottom:20px;
}
section>.board>.authors>.author>img.picture{
	grid-area:picture;align-self:start;
	width:30px;height:30px;object-fit:cover;border-radius:50%;
}
section>.board>.authors>.author>.name{
	grid-area:name;font-weight:bold;
}
section>.board>.authors>.author>.latest-topic{
	grid-area:latest-topic;color:var(--text-light-color);
	overflow-x:hidden;white-space:nowrap;text-overflow:ellipsis;
}
@media (max-width:600px){
	section>.board>.authors{
		grid-template:auto / 1fr;
	}
}



/* FOR SIGNED USER */


/* #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;
}
/* #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);
}
/* #popup>.followship-card */
#popup>.followship-card>.picture-name{
  display:flex;align-items:center;margin-bottom:5px;
}
#popup>.followship-card>.picture-name>img.picture{
  width:40px;height:40px;border-radius:50%;margin-right:5px;
}
#popup>.followship-card>.tools>button{
  display:block;width:100%;
}