collaboration.css 17.7 KB
Newer Older
藤川諒 committed
1 2
@charset "UTF-8";
/**************************** header *************************/
Kim Peace committed
3
#collabo_header {
藤川諒 committed
4 5 6 7 8 9
  max-width: 1280px;
  height: 60px;
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0 10px;
Kim Peace committed
10
  background: #1d1d1d;
藤川諒 committed
11 12
  z-index: 10;
}
Kim Peace committed
13
.collabo_nav_l {
藤川諒 committed
14 15
  color: #fff;
}
Kim Peace committed
16
.collabo_nav_r .img_wrap {
藤川諒 committed
17 18 19
  width: 45px;
  height: 45px;
}
Kim Peace committed
20
.collabo_nav_r .img_wrap img {
藤川諒 committed
21 22 23 24 25
  width: 100%;
  height: 100%;
}

/**************************** main *************************/
Kim Peace committed
26
#collabo_main {
27
  height: calc(100vh - 180px);
Kim Peace committed
28 29 30
  position: relative;
  margin-bottom: 120px;
}
藤川諒 committed
31 32
#collabo_main .user_list_wrap,
#collabo_main .document_wrap,
Kim Peace committed
33 34 35 36
#overlay_user_list .user_list_wrap {
  height: 100%;
  background: #525252;
}
37 38
#collabo_main .user_list_collabo,
#overlay_user_list .user_list_collabo {
Kim Peace committed
39 40
  background: #525252;
  padding-bottom: 120px;
41 42
  overflow: auto;
  height: inherit;
Kim Peace committed
43 44 45
}
#collabo_main .user_list .img_wrap,
#overlay_user_list .user_list .img_wrap {
藤川諒 committed
46 47 48 49 50 51
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 5px auto;
  height: 100%;
Kim Peace committed
52 53 54 55 56 57 58 59 60 61 62 63
}
.user_item .name {
  position: absolute;
  top: 65px;
  left: 0;
  right: 0;
  color: #fff;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 auto;
藤川諒 committed
64 65
}
#collabo_main .user_list .img_wrap img,
Kim Peace committed
66
#overlay_user_list .user_list .img_wrap img {
藤川諒 committed
67 68 69
  width: 80px;
  height: 80px;
  border-radius: 50%;
Kim Peace committed
70 71 72 73 74 75 76 77
}
.noscroll {
  overflow: hidden;
  position: fixed;
}
.none {
  display: none;
}
藤川諒 committed
78

Kim Peace committed
79 80
#collabo_main .user_item.host:before,
#overlay_user_list .user_item.host:before {
藤川諒 committed
81 82 83 84 85 86 87 88 89 90
  content: "";
  top: 0;
  right: 0;
  background: url("../icon/icon_host_tag.png");
  position: absolute;
  z-index: 2;
  width: 64px;
  height: 64px;
}
.user_item {
91
  width: calc(50% - 20px);
Kim Peace committed
92 93 94 95 96 97 98 99
  position: relative;
  text-align: center;
  border: 1px solid white;
  border-radius: 5px;
  margin: 5px auto;
  height: calc(100vh / 3);
  line-height: calc(100vh / 3);
  overflow: hidden;
藤川諒 committed
100
}
101

藤川諒 committed
102
.user_item a {
Kim Peace committed
103 104
  display: block;
  height: 100%;
藤川諒 committed
105 106 107
}

/**************************** overlay *************************/
Kim Peace committed
108
.btn {
藤川諒 committed
109 110 111 112 113 114 115
  background-color: transparent;
  border: none;
  width: 60px;
  height: 60px;
  background-repeat: no-repeat;
  background-position: center;
}
Kim Peace committed
116
.btn.menu_btn {
藤川諒 committed
117 118
  background-image: url("../icon/icon_collabo_menu.png");
}
Kim Peace committed
119
.btn.user_btn {
藤川諒 committed
120 121
  background-image: url("../icon/icon_member_white.png");
}
Kim Peace committed
122
.btn.add_user_btn {
藤川諒 committed
123 124
  background-image: url("../icon/icon_add_member_white.png");
}
Lee Munkyeong committed
125 126 127
.btn.exit_btn {
  background-image: url("../icon/icon_close.png");
}
Kim Peace committed
128 129 130 131
.btn.menu_btn.hide,
.btn.add_user_btn.hide,
.btn.user_btn.hide {
  transition: 0.3s;
Lee Munkyeong committed
132
  background-image: url("../icon/icon_member_blue.png");
藤川諒 committed
133 134
}
.overlay {
Kim Peace committed
135
  transition: 0.7s;
藤川諒 committed
136 137 138 139 140 141 142
  position: absolute;
  top: 60px;
  width: 100%;
  right: -100%;
  background: #525252;
  height: 100vh;
}
143 144 145 146
#add_user_list{
    width: 90%;
    height: 90%;
}
Kim Peace committed
147 148 149
.fixed {
  position: fixed;
}
藤川諒 committed
150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
.overlay.slidein {
  top: 60px;
  right: 0;
  left: 0;
  background: #525252;
  height: 100vh;
  z-index: 5;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* メニュー */
#overlay_menu .menu_wrap .menu .item {
  width: 50%;
  padding: 10px 0;
}
#overlay_menu .menu_wrap .menu {
  width: 220px;
}
Kim Peace committed
170
#overlay_menu .menu_wrap .menu .item a {
藤川諒 committed
171 172 173 174 175 176 177
  text-align: center;
  color: #fff;
}
#overlay_menu .img_wrap {
  width: 80px;
  height: 80px;
  line-height: 80px;
Kim Peace committed
178
  background: #0070ca;
藤川諒 committed
179 180 181 182
  border-radius: 8px;
  margin: 5px;
}
#overlay_menu .overlay_menu_wrap {
Kim Peace committed
183
  height: calc(100vh - 180px);
藤川諒 committed
184 185 186 187 188 189 190 191
}

/* ユーザー追加 */
#overlay_add_user_list {
  position: fixed;
  z-index: 100;
  top: 0;
  background: white;
192 193
  height: 70%;
  width: 80%;
藤川諒 committed
194 195 196 197
  max-width: 1280px;
}
#add_user_list .user_list li {
  list-style: none;
Kim Peace committed
198
  border-bottom: 1px solid #e2e8f0;
藤川諒 committed
199 200 201
  position: relative;
}
#add_user_list .user_list li:first-child {
Kim Peace committed
202
  border-top: 1px solid #e2e8f0;
藤川諒 committed
203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230
}
#add_user_list .chat_item_ttl {
  font-weight: bold;
}

#add_user_list .user_item {
  height: 90px;
}
#add_user_list .user_item_l_chk {
  height: 100%;
  display: table;
  margin-right: 20px;
  width: 50px;
}
#add_user_list .checkbox-parts {
  position: relative;
}
#add_user_list .checkbox {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
#add_user_list .checkbox-input {
  display: none;
}
#add_user_list .checkbox-parts::before {
  display: block;
  position: absolute;
Kim Peace committed
231
  border: 2px solid #0070ca;
藤川諒 committed
232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 5px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
#add_user_list .checkbox-input:checked + .checkbox-parts::after {
  display: block;
  position: absolute;
  content: "\f107";
  font: 40px FontAwesome;
  color: white;
  width: 40px;
  height: 40px;
  top: 5px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
Kim Peace committed
255
  background: #0070ca;
藤川諒 committed
256 257 258 259 260
  border-radius: 50%;
}
#add_user_list .user_item_l {
  margin: 0 15px;
}
261
#add_user_list .chat_item_l .thumbnail {
藤川諒 committed
262 263 264 265 266 267
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}
268
#add_user_list .user_item_l .thumbnail img {
藤川諒 committed
269 270 271 272 273 274 275 276 277
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
#overlay_add_user_list a {
  color: #323743;
}

/**************************** zoomin zoomout *************************/
Kim Peace committed
278
.s_ac .img_wrap {
藤川諒 committed
279 280 281 282 283 284 285
  width: 40px;
  height: 40px;
  border-radius: 5px;
  margin: 5px;
  line-height: 36px;
  text-align: center;
}
Kim Peace committed
286
.s_ac .img_wrap img {
藤川諒 committed
287 288 289 290 291 292 293
  width: 35px;
  height: 35px;
}
.s_ac {
  position: fixed;
  top: 60px;
  z-index: 2;
Kim Peace committed
294
  height: calc(100% - 180px);
藤川諒 committed
295 296 297 298 299 300 301 302 303 304 305 306 307 308
}
.s_ac_c {
  margin: auto 0;
}

/**************************** modal *************************/
#captyaModal .modal-header span,
#changeHostModal .modal-header span,
#hostRequestModal .modal-header span {
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}
309

藤川諒 committed
310 311 312 313 314 315 316 317 318 319 320
#captyaModal .modal-body,
#changeHostModal .modal-body,
#hostRequestModal .modal-body {
  text-align: center;
}
#captyaModal .modal-footer button {
  width: 30%;
  height: 60px;
  border-radius: 10px;
}
#changeHostModal .modal-footer button,
321
#modalAddUserConfirm .modal-footer button,
藤川諒 committed
322 323 324 325 326 327 328
#hostRequestModal .modal-footer button {
  width: 50%;
  height: 50px;
  border-radius: 10px;
}

/**************************** footer *************************/
Kim Peace committed
329
#collabo_footer {
藤川諒 committed
330
  max-width: 1280px;
Kim Peace committed
331
  background: #1d1d1d;
藤川諒 committed
332 333 334 335 336
  height: 120px;
  margin-top: 20px;
  position: fixed;
  bottom: 0;
  width: 100%;
Kim Peace committed
337
  border: none;
藤川諒 committed
338 339
  z-index: 10;
}
Kim Peace committed
340
#collabo_footer .footer-wrap {
藤川諒 committed
341 342 343 344
  margin: 0 auto;
  height: 100%;
  max-width: 300px;
}
Kim Peace committed
345
#collabo_footer .footer_item a {
藤川諒 committed
346 347
  display: inline-block;
}
Kim Peace committed
348
#collabo_footer .img_wrap {
藤川諒 committed
349 350 351 352 353 354 355 356
  width: 60px;
  height: 60px;
  border-radius: 50%;
  line-height: 55px;
}

/**************************** footer-menu *************************/
#collabo_footer_menu {
Kim Peace committed
357
  transition: 0.7s;
藤川諒 committed
358 359 360 361 362 363 364 365 366
  max-width: 1280px;
  height: 70px;
  position: fixed;
  width: 100%;
  margin: 0;
  border: none;
  bottom: 120px;
  z-index: 3;
}
Kim Peace committed
367 368
#collabo_footer_menu.hide {
  transition: 0.7s;
藤川諒 committed
369
}
Kim Peace committed
370
#collabo_footer_menu .footer_menu_btn {
藤川諒 committed
371
  background-color: white;
Kim Peace committed
372
  border: 1px solid #7a7a7a;
藤川諒 committed
373 374 375 376 377 378 379 380 381
  border-radius: 5px 5px 0 0;
  width: 80px;
  height: 40px;
  background-image: url(../icon/icon_arrow_down.png);
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  bottom: 70px;
}
Kim Peace committed
382
#collabo_footer_menu .footer_menu_btn.hide {
藤川諒 committed
383 384 385
  background-image: url(../icon/icon_arrow_up.png);
}
#collabo_footer_menu .footer_menu-wrap {
Kim Peace committed
386 387
  background: #1d1d1d;
  height: 40px;
藤川諒 committed
388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407
}

#collabo_footer_menu .footer_menu_item .img_wrap {
  width: 48px;
  height: 48px;
  line-height: 45px;
  border-radius: 8px;
  text-align: center;
  margin: 0 5px;
}
#collabo_footer_menu .footer_menu_item .img_wrap.wide {
  width: 140px;
  height: 48px;
  line-height: 45px;
  border-radius: 8px;
  text-align: center;
  margin: 0 5px;
  color: #fff;
}

Kim Peace committed
408 409
@media screen and (max-width: 768px) {
  #add_user_list .user_item_ttl {
藤川諒 committed
410 411
    font-size: 16px;
  }
Kim Peace committed
412
  #add_user_list .user_item_ttl {
藤川諒 committed
413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436
    font-size: 16px;
  }
  #add_user_list .user_item_m {
    font-size: 14px;
  }
  #add_user_list .user_item {
    height: 70px;
  }

  /* check radio */
  #add_user_list .checkbox-parts::before {
    width: 30px;
    height: 30px;
  }
  #add_user_list .checkbox-input:checked + .checkbox-parts::after {
    font: 30px FontAwesome;
    width: 30px;
    height: 30px;
  }
  #add_user_list .user_item_l_chk {
    margin-right: 15px;
    width: 30px;
  }
}
437 438 439 440 441

#buttonAddUser {
    position: inherit;
}

442
.add_user_modal {
443
    width: 80%;
444 445 446
    height: 80%;
    left: 10%;
    overflow: auto;
447
}
448 449 450 451 452 453 454

.add_user_confirm_modal {
    max-height: 80%;
    left: 5%;
    width: 90%;
}

455 456 457 458 459 460 461 462 463 464 465 466 467
#userInGroupListForAddUserInCollaboration > ul {
  margin-top: 0px !important;
}

#selectedUserListinCollaboration > ul {
  margin-top: 0px !important;
}

#selectedUserListinCollaboration {
  height: 400px;
  overflow: scroll;
}

468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934
@charset "UTF-8";
/**************************** tab *************************/
.modal-content .tabs {
  margin-top: 60px;
}

.modal-content .tab_item {
  width: calc(100% / 2);
  height: 50px;
  border-bottom: 5px solid #0070ca;
  background-color: #e0e0e0;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #323743;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.modal-content .msg_notification {
   display: none;
 }
.modal-content .tab_item:hover {
  opacity: 0.75;
}

input[name="tab_item"] {
  display: none;
}

.modal-content .tab_content {
  display: none;
  clear: both;
  overflow: hidden;
}

#tabMyGroupOnMakeRoom:checked ~ #tab1_content,
#tabAllGroupOnMakeRoom:checked ~ #tab2_content{
  display: block;
}

#tabMyGroupOnAddUserInCollaboration:checked ~ #tab1_content,
#tabAllGroupOnAddUserInCollaboration:checked ~ #tab2_content{
  display: block;
}

#tabMyGroupOnAddUser:checked ~ #tab1_content,
#tabAllGroupOnAddUser:checked ~ #tab2_content{
  display: block;
}

#tabMyGroup:checked ~ #tab1_content,
#tabAllGroup:checked ~ #tab2_content{
  display: block;
}

#tabGroup:checked ~ #tab1_content,
#tabDM:checked ~ #tab2_content{
  display: block;
}

.modal-content .tabs input:checked + .tab_item {
  background-color: #0070ca;
  color: #fff;
}

/**************************** chat list *************************/
.modal-content .chat_list ul {
  padding: 0;
  margin-top: 1rem;
}
.modal-content .chat_list img {
  width: 90px;
  max-height: 60px;
}
.modal-content .chat_list ul li {
  list-style: none;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
}
.modal-content .chat_list ul li:first-child {
  border-top: 1px solid #e2e8f0;
}
.modal-content .chat_list .chat_item_t,
.chat_list .chat_item_desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-content .chat_item_l {
  margin: 0 15px;
}
.modal-content .chat_item_m {
  white-space: nowrap;
  overflow: hidden;
  width: calc(100% - 160px);
}

/* リスト */
.modal-content .chat_list .chat_item:hover {
  background: aliceblue;
}
/* サムネイル画像 */
.modal-content .chat_item_l .thumbnail {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}

.modal-content .chat_item_l .thumbnail img{
  width: 50px;
  height: 50px;
}
.modal-content .chat_item_l .thumbnail4 img {
  width: 25px;
  height: 25px;
  float: left;
}

.modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(1) {
    width: 25px;
    height: 50px;
    position: relative;
    overflow: hidden;
    float: left;
}
.modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(1) img {
    width: 50px;
    height: 50px;
    position: absolute;
    left: -12px;
}
.modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(2) {
    width: 25px;
    height: 25px;
    position: relative;
    overflow: hidden;
    float: left;
}
.modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(2) img, .chat_item_l .thumbnail3 .img_wrap:nth-child(3) img {
    width: 25px;
    height: 30px;
}
.modal-content .chat_item_l .thumbnail3 .img_wrap:nth-child(3) {
    width: 25px;
    height: 25px;
    position: relative;
    overflow: hidden;
    float: left;
}

.modal-content .chat_item_l .thumbnail2 .img_wrap:nth-child(1) {
    width: 25px;
    height: 50px;
    position: relative;
    overflow: hidden;
    float: left;
}
.modal-content .chat_item_l .thumbnail2 .img_wrap:nth-child(2) {
    width: 25px;
    height: 50px;
    position: relative;
    overflow: hidden;
}
.modal-content .chat_item_l .thumbnail2 .img_wrap img {
    width: 50px;
    height: 50px;
    position: absolute;
    left: -12px;
}

.modal-content .chat_item {
  height: 90px;
}
.modal-content .chat_list li {
  list-style: none;
}
.modal-content .chat_list a {
  color: #323743;
}
.modal-content .chat_make_room a {
    color: #323743;
}
/* タイトル(グループ名、個人名) */
.modal-content .chat_item_ttl,
.chat_item_num {
  font-weight: bold;
}

/**************************** make room *************************/
.modal-content .chat_list .category {
  text-align: left;
  font-size: 1.4rem;
  height: 30px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  line-height: 30px;
  background: #c4c4c4;
  padding-left: 10px;
}
.modal-content .category_name {
  white-space: nowrap;
  overflow: scroll;
  width: 90%;
}
.modal-content .chat_list .category.open::after {
  content: "\f106";
}
.modal-content .chat_list .category::after {
  position: absolute;
  top: 0;
  right: 10px;
  content: "\f107";
  font: 25px FontAwesome;
}

/* お気に入り */
.modal-content .star.active:before {
  content: "\f005";
  font: 26px FontAwesome;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #F5D256;
  padding: 20px;
}
.modal-content .star.disable:before {
  content: "\f005";
  font: 26px FontAwesome;
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  color: #C4C4C4;
  padding: 20px;
}

/* メンバー選択チェックボックス */
.modal-content .chat_item_l_chk {
  height: 100%;
  display: table;
  margin-right: 20px;
  width: 50px;
}
.modal-content .checkbox {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.modal-content .checkbox-input {
  display: none;
}
.modal-content .checkbox-parts {
  position: relative;
}
.modal-content .checkbox-parts::before {
  display: block;
  position: absolute;
  border: 2px solid #0070ca;
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 5px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.modal-content .checkbox-input:checked + .checkbox-parts::after {
  display: block;
  position: absolute;
  content: "\f107";
  font: 40px FontAwesome;
  color: white;
  width: 40px;
  height: 40px;
  top: 5px;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: #0070ca;
  border-radius: 50%;
}

/* ルームボタン */
.modal-content .add_user_confirm_btn button,
.modal-content .add_user_btn button {
  height: 60px;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #0070ca;
  color: #fff;
  border: none;
  font-size: 18px;
  max-width: 1280px;
}
.modal-content .select_member {
  font-size: 14px;
}
#chat_make_room_confirm .room_name,
#chat_change_room_name .room_name {
  width: 90%;
  margin: 0 auto;
}
#chat_make_room_confirm .room_name h2,
#chat_change_room_name .room_name h2 {
  margin-top: 20px;
  font-size: 18px;
}
#chat_make_room_confirm .chat_list h2,
#chat_add_user_confirm .chat_list h2 {
  font-size: 18px;
}
#chat_make_room_confirm .chat_list,
#chat_add_user_confirm .chat_list {
  padding: 20px 0;
  width: 90%;
  margin: 0 auto;
}

/* ルーム名入力フォーム */
.modal-content .input_name_room {
  padding-left: 10px;
  width: 100%;
  border: none;
  border-bottom: 1px solid #bdbdbd;
  height: 40px;
  margin-bottom: 20px;
}

/* ユーザーリスト */
.modal-content .user_list {
  position: fixed;
  top: 60px;
  background: #fff;
  width: 100%;
  overflow-x: scroll;
  z-index: 2;
}
.modal-content .user_list .user_item {
  margin: 10px;
  text-align: center;
}
.modal-content .user_list .user_item span {
  width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.modal-content .user_list .user_item a {
  color: #323743;
}

/* ユーザーリストフィルター */
#filter .user_item .img_wrap {
  position: relative;
}
#filter .user_item .img_wrap.filter:after {
  position: absolute;
  content: "\f107";
  font: 50px FontAwesome;
  width: 50px;
  height: 50px;
  color: #fff;
  left: 5px;
  background: #0070ca82;
  border-radius: 50%;
}

.modal-content .user_list .user_item img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 0 auto;
}

.add_user_confirm_btn button {
  height: 60px;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #0070ca;
  color: #fff;
  border: none;
  font-size: 18px;
  max-width: 1280px;
}

@media screen and (max-width: 768px) {
  /* chat item */
  .tab_item {
    font-size: 16px;
    margin-bottom: 1rem;
  }
  .chat_item_ttl {
    font-size: 16px;
  }
  .chat_item_ttl,
  .chat_item_num {
    font-size: 16px;
  }
  .chat_item_m {
    font-size: 14px;
  }
  .chat_item_time,
  .chat_item_unread {
    font-size: 14px;
  }
  .chat_item {
    height: 70px;
  }
  /* room button */
  .make_room_btn button,
  .make_room_confirm_btn button,
  .add_user_confirm_btn button,
  .add_user_btn button {
    font-size: 16px;
  }
  /* check radio */
  .checkbox-parts::before {
    width: 30px;
    height: 30px;
  }
  .checkbox-input:checked + .checkbox-parts::after {
    font: 30px FontAwesome;
    width: 30px;
    height: 30px;
  }
  .chat_item_l_chk {
    margin-right: 15px;
    width: 30px;
  }
  #chat_make_room_confirm .room_name h2,
  #chat_change_room_name .room_name h2 {
    font-size: 16px;
  }
  #chat_make_room_confirm .chat_list h2,
  #chat_add_user_confirm .chat_list h2 {
    font-size: 16px;
  }
  /* ルーム名入力フォーム */
  .input_name_room {
    font-size: 14px;
  }
  /* チャットルーム */
  .room_left figure img {
    width: 40px;
    height: 40px;
  }
  .room_left-text {
    margin-left: 50px;
  }
  .room_right {
    max-width: 95%;
  }
  .room_left {
    max-width: 75%;
  }
}