.bubble-main { flex-direction: column; padding: 14px; .file-img { display: inline-flex; width: 50px; height: 50px; float: left; margin-right: 14px; background-repeat: no-repeat; &.video { background-image: url(/assets/images/file/icon_talk_video.png); &.disable { background-image: url(/assets/images/file/icon_talk_video_d.png); } } } .file-info { display: inline-flex; flex-direction: column; text-align: left; line-height: 1.6em; width:100%; margin-top:10px; .file-name { font-size: 14px; font-weight: bold; display: inline-flex; } .file-size { display: inline-flex; font-size: 11px; color: #666666; } .file-ext { font-size: 12px; } } } .btn-box { width: 100%; height: 40px; border-top: 1px solid #dddddd; display: flex; ul { width: 100%; li { width: 50%; height:100%; display: inline-block; text-align: center; align-items: center; font-size: 13px; border-right: 1px solid #dddddd; &:last-child { border-right: none; } .mat-button { width: 100%; height:100%; display: block; } } &.expired{ li{ width:100%; white-space: nowrap; color:#999999; align-items: center; line-height:40px; } } } }