.mes_first{padding: 100px 0px 190px 0px; text-align: center;}
.mes_first > div:nth-child(2){margin-top: 25px;}
.mes_first > div:nth-child(3){margin-top: 35px; padding: 5px 15px 7px 15px; font-size: 11px; background: var(--bg_green); border-radius: 5px; color: var(--text_white); width: 400px;}
.mes_first > div:nth-child(3) .mf_icon{width: 16px; height: 16px; float: left;}
.mes_group_list{height: 45vh; overflow: auto;}
.mes_empty{padding: 45px 35px; text-align: center; display: none;}
.mes_empty > div:first-child{font-weight: bold;}
.mes_empty > div:nth-child(2){margin-top: 3px; color: var(--text_silver);}

.message_layout{display: grid; grid-template-columns: 320px 1fr 300px; min-width: 950px; padding: 0px 20px; box-sizing: border-box; grid-gap: 20px; position: fixed; width: 100%;top: 70px; left: 0px;}
.message_layout > div{width: 100%; height: calc(100vh - 75px); position: relative;}
.message_layout > div:nth-child(3){overflow: auto;}

.message_list{display: grid; grid-template-rows: 65px 1fr; height: 100%;}
.message_list > div{width: 100%; height: 100%; position: relative;}
.message_list .mlMain{display: grid; grid-template-columns: 1fr 180px; align-items: center; padding: 2px 13px; box-sizing: border-box;}
.message_list .mlMain > div{width: 100%;}
.message_list .mlMain > div:first-child{font-size: 20px; font-weight: bold;}
.message_list .mlMain .mmOpt{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px;}
.message_list .mlMain .mmOpt > div{width: 100%; padding: 5px 0px; background: var(--bg_white); border-radius: 10px; border: 1px solid var(--bg_line); cursor: pointer; transition: var(--transition);}
.message_list .mlMain .mmOpt > div:hover{border: 1px solid var(--bg_blue);}
.message_list .mlMain .mmOpt > div > div:first-child > div{width: 15px; height: 15px;}
.message_list .mlMain .mmOpt > div > div:nth-child(2){margin-top: 5px; text-align: center; font-weight: bold; font-size: 9px;}

.message_list .mlContent{overflow: auto; position: absolute; top: 0px; width: 100%; height: 100%; left: 0px;}

.message_conversation{display: grid; grid-template-rows: 50px 1fr auto; position: absolute; top: 0px; width: 100%; height: 100%; left: 0px;}
.message_conversation > div{width: 100%; height: 100%;}
.message_conversation > div:nth-child(2){overflow: auto;}
.message_conversation > div:nth-child(3){border-top: 1px solid var(--bg_line);}
.message_conversation .mcHead{display: grid; grid-template-columns: 1fr 90px; align-items: center;}
.message_conversation .mcHead > div{width: 100%;}
.message_conversation .mcHead .mhProfile{display: grid; grid-template-columns: 35px 1fr; grid-gap: 10px;}
.message_conversation .mcHead .mhProfile > div{width: 100%;}
.message_conversation .mcHead .mhProfile > div:first-child > div{width: 35px; height: 35px; background-color: var(--bg_silvercalm); border-radius: 50%;}
.message_conversation .mcHead .mhProfile > div:nth-child(2) > div:first-child{font-weight: bold; color: var(--text_black); display: grid; width: 100%;}
.message_conversation .mcHead .mhProfile > div:nth-child(2) > div:nth-child(2){font-size: 11px; color: var(--text_silver); margin-top: 1px;}
.message_conversation .mcHead > div:nth-child(2){text-align: right;}
.message_conversation .mcHead > div:nth-child(2) > div{display: inline-block;}
.message_conversation .mcHead .mhBtn{display: grid; font-size: 11px; font-weight: bold; grid-template-columns: 15px 1fr; grid-gap: 10px; align-items: center; padding: 5px 10px; border: 1px solid var(--bg_line); border-radius: 5px; cursor: pointer;}
.message_conversation .mcHead .mhBtn > div{width: 100%;}
.message_conversation .mcHead .mhBtn > div:first-child > div{width: 15px; height: 15px;}
.message_conversation .mcInput{border: 1px solid var(--bg_silver); border-radius: 5px; margin: 15px 0px;}
.message_conversation .mcInput > div{display: table; width: 100%; table-layout: fixed;}
.message_conversation .mcInput > div > div{display: table-cell;}
.message_conversation .mcInput .miContent > textarea{min-height: 36px; padding: 9px 11px 9px 12px; border: none; font-size: 14px; border-radius: 0px; width: 100%;}
.message_conversation .mcInput .miOptions{vertical-align: bottom; width: 100px;}
.message_conversation .mcInput .miOptions > div{display: grid; grid-template-columns: 1fr 1fr 1fr;}
.message_conversation .mcInput .miOptions > div > div{width: 100%; margin-bottom: 13px;}
.message_conversation .mcInput .miOptions > div > div > div{width: 18px; height: 18px; margin-top: 2px;}
.message_conversation .mcInput .miSend{vertical-align: bottom; width: 55px;}
.message_conversation .mcInput .miSend > div{padding: 11px 0px 12px 0px; text-align: center;}