/* Material Symbols */
@font-face {
	font-family: 'Material Symbols Rounded';
	font-style: normal;
	font-weight: 400;
	src: url(../assets/fonts/material-symbols/MaterialSymbolsRounded.woff2) format('woff2');
}
  
.material-symbols-rounded {
	font-family: 'Material Symbols Rounded';
	font-weight: normal;
	font-style: normal;
	font-size: 32px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}


/* Framework7 Variables */
:root {
	--f7-panel-width: 260px;
	--f7-panel-bg-color: #fafafa;
	--f7-preloader-modal-bg-color: rgba(0, 0, 0, 0);
}

.md,
.md .dark,
.md [class*='color-'] {
  --f7-message-text-footer-text-color: #fff;
}

.message-received .message-text-footer {
	color: #2a2a2a !important;
}

.panel-left li a:link { color:#555 !important; }

.active-link a { color:var(--f7-theme-color); }


.hidden { display: none; }


/* Communication: Message List */
.message-item {
	float: left;
	width: calc(100% - 32px);
	padding: 8px 16px;
	border-bottom: 0.5px solid #ddd;
}
.message-media {
	float: left;
	width: 20px;
	height: 65px;
	padding-top:15px;
	padding-right: 16px;
}
.message-icon {
	font-size: 20px;
	color: #7a7a7a;
}
.message-unread {
	width: 16px;
	height: 16px;
	margin: 5px auto 0 auto;
	border-radius: 8px;
	background: #3cb548;
}
.messsage-top {
	float: left;
	width: calc(100% - 46px);
}
.message-sector {
	float:left;
	width: 50%;
	font-size:12px;
	color: #9c27b0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 18px;
}	
.message-class-name {
	float: right;
	width: 50%;
	font-size: 12px;
	text-align: right;
	color: #7a7a7a;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 18px;
}
.messsage-content {
	float: left;
	width: calc(100% - 46px);
}
.message-date-time {
	float: right;
	vertical-align: top;
	width: 72px;
	font-size: 12px;
	text-align: right;
	color: #2a2a2a;
}
.message-nome {
	float: left;
	width: calc(100% - 72px);
	font-size: 12px;
	font-weight: 500;
	color:#333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 18px;	
}
.message-resp-name {
	float: left;
	width: calc(100% - 72px);
	font-size: 12px;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 18px;
}
.message-preview {
	float: left;
	width: calc(100% - 46px);
	font-size: 13px;
	color: #777;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 18px;
}

.title {
	padding-bottom: 4px;
}


.student-image {
	width:38px;
	height:38px;
	background-size: cover;
	background-position: center;
	background-image:url(../assets/images/student-image.png);
	overflow: hidden;
	border-radius:5px;
}

.student-image-home {
	width:38px;
	height:38px;
	border-radius:5px;
	margin-right:8px;
	vertical-align:middle
}