// $tablet-s-width: 768px;

// .bubble-main {
//   display: flex;
//   flex-direction: row;
//   padding: 14px;
//   min-width: 300px;
//   .file-img {
//     display: inline-flex;
//     width: 50px;
//     height: 50px;
//     float: left;
//     margin-right: 14px;
//     background-repeat: no-repeat;
//     &.doc {
//       background-image: url(/assets/images/file/icon_talk_doc.png);
//       &.disable {
//         background-image: url(/assets/images/file/icon_talk_doc_d.png);
//       }
//     }
//     &.exe {
//       background-image: url(/assets/images/file/icon_talk_exe.png);
//       &.disable {
//         background-image: url(/assets/images/file/icon_talk_exe_d.png);
//       }
//     }
//     &.file {
//       background-image: url(/assets/images/file/icon_talk_file.png);
//       &.disable {
//         background-image: url(/assets/images/file/icon_talk_file_d.png);
//       }
//     }
//     &.hwp {
//       background-image: url(/assets/images/file/icon_talk_hwp.png);
//       &.disable {
//         background-image: url(/assets/images/file/icon_talk_hwp_d.png);
//       }
//     }
//     &.ppt,
//     &.pptx {
//       background-image: url(/assets/images/file/icon_talk_ppt.png);
//       &.disable {
//         background-image: url(/assets/images/file/icon_talk_ppt_d.png);
//       }
//     }
//     &.xls,
//     &.xlsm,
//     &.xlsx {
//       background-image: url(/assets/images/file/icon_talk_xls.png);
//       &.disable {
//         background-image: url(/assets/images/file/icon_talk_xls_d.png);
//       }
//     }
//     &.zip {
//       background-image: url(/assets/images/file/icon_talk_zip.png);
//       &.disable {
//         background-image: url(/assets/images/file/icon_talk_doc_d.png);
//       }
//     }
//   }
//   .file-info {
//     display: inline-flex;
//     flex-direction: column;
//     text-align: left;
//     float: left;
//     line-height: 1.6em;
//     .file-name {
//       font-size: 1em;
//       font-weight: bold;
//       display: inline-flex;
//     }
//     .file-size {
//       display: inline-flex;
//       font-size: 11px;
//       color: #666666;
//     }
//     .file-ext {
//       font-size: 12px;
//       color: #848d95;
//     }
//   }
// }
// .btn-box {
//   width: 100%;
//   height: 40px;
//   border-top: 1px solid #dddddd;
//   display: flex;
//   width: 100%;
//   text-align: center;
//   font-size: 1em;
//   ul {
//     width: 100%;
//     li {
//       width: 50%;
//       height: 100%;
//       display: inline-block;
//       text-align: center;
//       align-items: center;
//       border-right: 1px solid #dddddd;
//       @media screen and (max-width: #{$tablet-s-width}) {
//         width: 30%;
//       }
//       &:last-child {
//         border-right: none;
//         @media screen and (max-width: #{$tablet-s-width}) {
//           width: 70%;
//         }
//       }
//       .mat-button {
//         width: 100%;
//         display: block;
//         height: 100%;
//         font-size: 1em;
//       }
//     }
//     &.expired {
//       li {
//         width: 100%;
//         white-space: nowrap;
//         color: #999999;
//         align-items: center;
//         line-height: 40px;
//       }
//     }
//   }
// }