﻿
.msg-list{display:flex; flex-direction:column; gap:15px;height:calc(100vh - 354px); overflow-x:auto; padding:10px 20px;}
.msg-item{display:flex; flex-wrap:wrap; align-content:space-between; align-items:center; padding:10px; border:1px solid #EBEBEB; border-radius:5px;}
.msg-item:hover{box-shadow:0px 0px 20px #F1F4FF;}
.msg-item>div:first-child{flex:1; display:flex; flex-direction:column; padding:0px 10px; gap:10px;}
.msg-item>div:first-child label{font-size:18px; font-weight:500;}
.msg-content{display:flex; align-items:center; gap:10px;}
.msg-content span:nth-child(2){font-size:14px; display:block; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:calc(100vw - 650px);}

.msg-view{color:#808080; font-size:14px; display:inline-block; padding:5px 20px; border:1px solid #808080; border-radius:20px; margin:0px 20px; box-shadow:0px 0px 10px #EBEBEB;}
.msg-view:hover{color:#6998FC;border:1px solid #6998FC;box-shadow:0px 0px 10px #6998FC;}

.msg-paging{display:flex; justify-content:end; padding:20px 0px;}

.msg-tab{padding:4px; font-size:12px; margin-left:20px;}
.msg-tab-tip{background-color:#FCF4FF; color:#C329FF;}
.msg-tab-text{background-color:#EEFFF2; color:#1EDE47;}
.msg-tab-notify{background-color:#EEF3FF; color:#2F6EFB;}


.msg-filter{display:flex; justify-content:space-between; gap:20px; align-items:center; margin:10px 20px; border-bottom:1px solid #dee2e6; padding-bottom:20px;}
.msg-filter select{color:#808080;}
.msg-filter-box{border-radius:26px;display:flex; justify-content:flex-start; gap:10px; padding:0px 15px; border:1px solid #dee2e6; align-items:center;}
.msg-filter-box input{max-width:200px !important; border:none; color:#808080;}
.msg-filter-box a{font-size:20px; display:inline-block;line-height: 2; color:#dee2e6; }

.msg-null{display:flex; flex-direction:column; gap:20px; align-items:center; justify-content:center; width:100%; height:100%; height:calc(100vh - 354px);}
.msg-null label{font-size:18px; color:#EBEBEB;}

.msg-no-read{display:inline-block; width:5px; height:5px; border-radius:5px; background-color:#f36060; margin-left:2px; margin-top:10px;vertical-align: top;}