table{width:100%;column-gap:8px;columns:auto 3}
td{color:var(--color-main)}
th{font-weight:bold;}
tbody td:not(.subject-col){white-space:nowrap}
thead th:not(.subject-col){white-space:nowrap;width:0}
td.subject-col{color:var(--textcolor);display:flex;}
#inbox_targetgrid{
  display:grid;
  grid-template-columns: max-content auto max-content max-content max-content;
  grid-auto-rows: auto;
  grid-auto-columns: auto;
  overflow: hidden;
  box-sizing:border-box;
  
	
}

.row {
  position: relative;
  z-index: 2;
}

.rowWrapper{
  display: contents;
  padding:8px 12px;
  box-sizing:border-box;
}.rowWrapper>div{
	padding:4px 8px;
	box-sizing:border-box;
  background-color:color-mix(in srgb,transparent 25%, var(--main-content-bg-color));
  user-select:none;
  display:flex;
  justify-content:center;
  align-items:center;
}
.header{
	color:var(--textcolor);
	font-weight:bold;
	font-size:14pt;
	text-align:center;
	
}
.rowWrapper:not(.header):hover > div{
  background-color: color-mix(in srgb,transparent 25%, var(--color-primary-accent));
}
.subject-col{padding:4px 16px;
  box-sizing:border-box;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
 }
.rowWrapper:not(.header)[unread="1"] > div{
	filter:brightness(1.1) contrast(1.1);
}
@keyframes anim-color-alert{
	from{color:var(--start-color)}
	to{color:var(--end-color)}
}
.rowWrapper:not(.header) > div:first-child::before{
	content:"mark_email_read";
	font-family:"Material Symbols Rounded";
	margin-right:4px;
	animation-duration:1s;
	animation-direction:alternate;
  animation-iteration-count: infinite;
	animation-name:"";
	color:var(--color-main);
}
.rowWrapper:not(.header)[unread="1"] > div:first-child::before{
	content:"mark_email_unread";
	--start-color:var(--textcolor);
	--end-color:var(--color-primary-accent);
	animation-name:"anim-color-alert";
}

.rowWrapper:not(.header):hover[unread="1"] > div:first-child::before{
	--end-color:var(--color-primary-light);
}
.rowWrapper:not(.header) > div:first-child:hover{
	color:var(--color-primary-light);
}
  
  .rowWrapper>.icon{
	  font-family:"Material Symbols Rounded";
	  font-size:14pt;
	  padding-left:0px;
	  padding-right:2px;
  }
  .rowWrapper[starred="1"]>.icon>.star,#msg_actions>span[starred="1"]{
  font-variation-settings:'FILL' 1;
  }
  
  .rowWrapper>.icon>span{
	  padding:0 4px;
	  
  }
  
  .rowWrapper>.icon>span:hover{
	  background-color:var(--color-primary-light);
	  border-radius:4px;
  }
  #inbox_message_target{
	display:flex;
	flex-direction:column;
	grid-gap:8px;
  }
  #msg_content{
	grid-gap:12px;
	display:flex;
	flex-direction:column;
  }
  
 
 #msg_actions {
	box-sizing: border-box;
	height: fit-content;
	float: right;
	height: 0;
	user-select: none;
	display: grid;
	grid-template-columns: repeat(3,2em);
	z-index: 400;
	position: relative;
	grid-gap:2px;
}
  #msg_actions > span {
	border-radius:8px;
	aspect-ratio:1/1;
	padding:0px 4px;
	box-sizing:border-box;
	font-family:"Material Symbols Rounded";
	font-size:16pt;
	display:inline-block;
	justify-content:center;
	display:flex;
	align-items:center;
	
  }

  #inbox_message_options > span{
	border-radius:8px;
	aspect-ratio:1/1;
	padding:0px 4px;
	box-sizing:border-box;
	font-family:"Material Symbols Rounded";
	font-size:16pt;
	justify-content:center;
	display:flex;
	width:fit-content;
	user-select:none;
	align-items:center;
  }
  
  #msg_actions > span:hover, #inbox_message_options > span:hover {
	background-color:var(--color-primary-accent);
	color:var(--color-primary-light);  
  }
  .message_userdiv{
	  user-select:none;
  }
  
  .message_userdiv img{
	  width:64px;
	  height:64px;
	  
  }
  .message_root{
	  display:grid;
	  grid-template-columns:max-content auto;
	  border:solid 1px var(--color-main);
	  border-radius:8px;
	  padding:12px 24px;
	  box-sizing:border-box;
	  background-color:var(--main-content-bg-color)
  }
  .message_root[self="true"]{
	  display:grid;
	  grid-template-columns:auto max-content ;
  }
  
  .message_root .message_userdiv span{
	  font-size:10pt;
  }
  .message_root .message_userdiv{
	  display:flex;flex-direction:column;
	  justify-content:center;
	  align-items:center;
	  margin-right:16px;
	  grid-gap:0;
  }
  .message_root[self="true"] .message_userdiv{
	  margin-right:0;
	  margin-left:16px;
  }
  
.emoji_panel>img,.rendered_emoji{
	width:32px;
	height:auto;
	margin:2px;
}
.rendered_emoji{
	margin:0 2px;
}

body[data-filterstarred="1"] .rowWrapper:not(.header):not([starred="1"]){
	display:none;
}