.nav-item img{ width: 15%; height: auto; } body {margin:0;} /****************************iconbar start *************************/ .icon-bar { width: 100%; background-color: #555; overflow: auto; display: none; } .icon-bar li{ width: 25%; text-align: center; } .icon-bar a { float: left; width: 100%; text-align: center; padding: 12px 0; transition: all 0.3s ease; color: white; font-size: 36px; } .icon-bar a:hover { background-color: #000; } .main{ padding: 48px 0 0; } /****************************iconbar end *************************/ /****************************chatroom and list start *************************/ .container {max-width:1170px; margin:auto;} /*img { max-width:100%;}*/ img { width:100%; } .chat_img img, .incoming_msg_img img, .user_img img{ border-radius: 100%; } .inbox_people { background: #f8f8f8 none repeat scroll 0 0; float: left; overflow: hidden; border-right: 1px solid #c4c4c4; width: 100%; } .inbox_msg { border: 1px solid #c4c4c4; clear: both; overflow: hidden; } .top_spac{ margin: 20px 0 0;} .recent_heading {float: left; width:90%;} .srch_bar { display: inline-block; text-align: center; width: 100%; /*padding:*/ } .heading_srch { padding:5px 10px 5px 10px; overflow:hidden; border-bottom:1px solid #c4c4c4;} .recent_heading h4 { color: #095395; font-size: 21px; margin: auto; } .data_srch h3, .recent_heading h3 { color: #095395; font-size: 20px; margin: auto; margin-left: 10px; } .inbox_people .data_srch { padding: 5px 10px 5px 10px; } .chat_list, .group_list, .user_list, .select_user_list { border-bottom: 1px solid #c4c4c4; margin: 0; padding: 15px 15px 10px; } .chat_people, .group_people, .user_people { overflow:hidden; clear:both;} .chat_ib, .group_ib, .user_ib { float: left; padding: 0 0 0 15px; width: 85%; } #room_list, #group_list, #user_list, #select_user_list { margin-left: 0; } .room-list-title { display: inline-flex; max-width: 100%; } .room-name-font { font-size: 1rem !important; margin-right: 5px; } .room-member-count { line-height: 1.5; } .chat_img, .group_img, .user_img { float: left; width: 11%; } .namecard_img { margin: 5% 35% 5% 35%; width: 30%; } .srch_bar input { border:1px solid #cdcdcd; border-width:0 0 1px 0; width:90%; padding:4px 0 4px 6px; background:none; } .srch_bar .input-group-addon button { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; padding: 0; color: #707070; font-size: 18px; } .srch_bar .input-group-addon { margin: 0 0 0 0px;} .chat_ib h5, .group_ib h5, .user_ib h5 { font-size:1rem; color:#464646; margin:0 0 8px 0; } .chat_ib span.chat_date{ font-size:13px; float:right;} .chat_ib span, .group_ib span, .user_ib span { font-size:13px;} .chat_ib p, .group_ib p, .user_ib p { font-size:14px; color:#989898; margin:auto;} .chat_ib p { width: 82%;} .chat_ib .unreadMsgCnt { padding-top: 3px; margin-top: 2px; } .inbox_user { overflow-y: scroll; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 92px); } .room_srch_bar input{ border:1px solid #cdcdcd; border-width:0 0 1px 0; width:75%; padding:2px 0 4px 6px; background:none;} .room_srch_bar .input-group-addon button { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; padding: 1; color: #707070; font-size: 18px; } .room_srch_bar .input-group-addon { margin: 0 0 0 0px;} .inbox_chat { overflow-y: scroll; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 47px); } .active_chat{ background:#ebebeb;} .incoming_msg { margin: 24px 0 24px; } .incoming_msg_img { display: inline-block; width: 10%; } .received_msg { display: inline-block; padding: 0 0 0 10px; vertical-align: top; width: 88%; } .received_withd_msg p { background: #ebebeb none repeat scroll 0 0; border-radius: 3px; color: #646464; font-size: 14px; margin: 0; padding: 5px 10px 5px 12px; width: 100%; } .time_date { color: #747474; display: block; font-size: 12px; margin: 8px 0 0; } .received_withd_msg { width: 57%;} .mesgs { margin-top: 40px; padding: 0px 15px 48px 15px; } .search-bar-fixed { position: fixed; } .search-group { margin-bottom: 38px; } .landscape_mesgs { padding: 0px 10% 48px 10%; } .outgoing_msg{ overflow:hidden; margin:24px 0 24px;} .sent_msg { float: right; width: 57%; } .sent_msg p { background: #095395 none repeat scroll 0 0; border-radius: 3px; font-size: 14px; margin: 0; color:#fff; padding: 5px 10px 5px 10px; width:100%; } .input_msg_write input { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; color: #4c4c4c; font-size: 15px; min-height: 48px; width: 100%; } .type_msg { border-top: 1px solid #c4c4c4; /*margin-bottom: 78px;*/ background: white; } .msg_send_btn { background: #095395 none repeat scroll 0 0; border: medium none; color: #fff; cursor: pointer; font-size: 17px; } .messaging { padding: 0 0 50px 0;} .msg_history { /* チャット画面スクロール範囲 * 画面の高さ - (画面上部タイトルの高さ(58px) + ルーム名検索欄の高さ(38px) + メッセージ入力欄の高さ(48px)) */ height: calc(100vh - 144px); overflow-y: auto; -webkit-overflow-scrolling: touch; } /****************************chatlist end *************************/ /* --------------------------------------------------- */ /* SIDEBAR STYLE */ /* --------------------------------------------------- */ #sidebar { width: 70%; position: fixed; top: 0; left: 100%; height: 100vh; z-index: 9999; background: #095395; color: #fff; transition: all 0.3s; overflow-y: scroll; -webkit-overflow-scrolling: touch; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); } #sidebar.active { left: 30%; } #dismiss { width: 35px; height: 35px; line-height: 35px; text-align: center; background: #095395; position: absolute; top: 10px; right: 10px; cursor: pointer; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } #dismiss:hover { background: #fff; color: #095395; } .overlay { display: none; position: fixed; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.6); z-index: 9998; opacity: 0; transition: opacity 0.5s ease-in-out; } .overlay.active { display: block; opacity: 1; } #sidebar .sidebar-header { padding: 20px; background: #095395; } #sidebar div ul.components { padding: 10px 0; /*border-bottom: 1px solid #47748b;*/ } #sidebar p { color: #fff; padding: 10px; } #sidebar div ul li a { padding: 10px; font-size: 1.1em; display: block; background: rgba(255,255,255,0.3); color: #fff; } #sidebar div ul li a:hover { color: #095395; background: #fff; } #sidebar div ul li.active>a, a[aria-expanded="true"] { color: #fff; background: #095395; } #sidebar .sidebar-footer{ position: sticky; bottom: 0; width: 100%; background: #095395; opacity: 0.8; } a[data-toggle="collapse"] { position: relative; } a.download { background: #fff; color: #095395; } a.article, a.article:hover { background: #095395 !important; color: #fff !important; } /* --------------------------------------------------- */ /* CUSTOM SETTINGS */ /* --------------------------------------------------- */ /*.chatbox{ margin-bottom: 78px; } */ .tab-pane{ padding: 47px 0 0; } .floating_plus_btn{ position:fixed; width:60px; height:60px; bottom:60px; right:18px; background-color:#095395; color:#FFF; border-radius:50px; text-align:center; box-shadow: 2px 2px 3px #999; } .my-float{ margin-top:22px; } .nav-link.active{ background-color: #095395 !important; } .squareBox { width: 11%; z-index: 1000; border-radius: 50%; color: white; text-align: center; vertical-align: middle; position: relative; cursor: pointer; display: none; } .deleteBox { background-color: #dc3545; } .squareBox:before { content: ""; display: block; padding-top: 100%; } .squareBoxContent { position: absolute; top: 0; left: 0; bottom: 0; right: 0; color: white; } .squareBoxContent div { display: table; width: 100%; height: 100%; } .squareBoxContent span { display: table-cell; text-align: center; vertical-align: middle; color: white; font-size: 4vw; } .squareBoxContent .landscape_span { font-size : 3vw; } .msg_notification { background: rgba(76, 76, 76, 0.8); color: white; text-align: center; width: 100%; display: none; } .chatRoomIcon{ display: none; } .titleRoomName{ -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } #backButton{ display: none; } .navbar-dark .navbar-nav .nav-link{ color: rgba(255,255,255,1); } #navbarRight { justify-content: flex-end; padding-right: 0px; } #navbarLeft { -ms-flex-direction: row; flex-direction: row; } .userCheckBox{ border-color: #095395; border-width: 1px; border-style: solid; } .userCheckBox span{ color: #f8f8f8; } .userCheckBox.active{ background-color: #095395; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .user_people{ padding-left: 12%; } .userCheckBox{ margin-left: -12%; } .nav-item .dropdown-toggle::after{ display:none; } #loadingIndicator{ position: fixed; display: none; width: 100vw; height: 100vh; z-index: 9999; } #loadingIndicator.active{ display: block; } .loader { z-index: 10000; top: 50%; left: 50%; position: absolute; /*display: none;*/ margin-left: -1.0rem; margin-top: -2.5rem; } .loader.active{ display: block; } #newRoomName{ display: none; } .bg-primary, .btn-primary{ /* background-color: #095395!important; border-color: #095395!important; */ background-color: #095395!important; border-color: #095395!important; } .spinner-grow, .spinner-border{ color: #095395!important; } .btn:focus-visible { outline: none; } .btn-primary.focus, .btn-primary:focus { -webkit-box-shadow: none!important; box-shadow: none!important; } #roomDeleteButton { font-size:1.2rem; } #arrangeRooms { font-size: 1.2rem; } #userSelectionConfirmBtn { font-size : 1.2rem; } #backbutton { font-size : 1.2rem; } #userSelectionDeleteBtn { font-size : 1.2rem; } #sidebarCollapse { font-size : 1.2rem; } #roomKeywordSearch { font-size : 1.2rem; } #chatKeywordSearch { font-size : 1.2rem; } .message_content { white-space: pre-wrap; word-wrap: break-word; } .dropdown-item-checked::before { position: absolute; left: .4rem; content: '✓'; font-weight: 600; } .room_srch_bar { display: inline-block; text-align: left; width: 100%; } .modal-dialog { z-index: 10001; } .modal { z-index: 10101; } .modal-backdrop { z-index:10050; } #errorMsg{ margin-top: 60px; text-align: center; } .bg-footer { background-color: #F2F2F2; } .talign-center{ text-align: center; } /* --------------------------------------------------- */ /* ERROR PAGE STYLE */ /* --------------------------------------------------- */ .error-aria{ background: #DBDBDB; text-align: center; margin-top: 100px; } #errorImg{ width: 60%; } #errorTitle{ margin-top: 8%; font-size: 1.6rem; } #errorMsg{ margin-top: 8%; margin-left: 30px; margin-right: 30px; font-size : 1.0rem; } .bg-footer { background-color: #F2F2F2; } .talign-center{ text-align: center; } .reload-button{ margin-top: 10%; width: 50%; height: 40px; border: none; color: white; border-radius: 8px; } #errorEnd{ margin-top: 15vh; } .collapsible { height: 40px; background-color: #eee; color: #444; cursor: pointer; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } .collapsible-active, .collapsible:hover { background-color: #ccc; } .collapsible-content { display: none; overflow: hidden; background-color: #f1f1f1; } .chat-list-type-btn { width: 40%; } #my_info > div > div { padding-left: 5%; } #favorite_list > div > div { padding-left: 5%; } #my_group_list > div > div { padding-left: 5%; } #my_group_list > div > div { padding-left: 5%; } .contact-seperator { width: 100%; background-color: #095395!important; color: white; margin-bottom: 0px; } .popup { display: none; position: fixed; padding: 10px; width: 80%; left: 10%; min-height: 250px; top: 20%; background: #F7FFF4; z-index: 10051; } .namecard-login-id { margin-top: 15%; text-align: center; } .namedard-img-upload { background: rgba(0,0,0,0.6); position: relative; margin-top: -25%; color: white; text-align: center; } .border-bottom-gray { border-bottom: 1px solid #c4c4c4; } #childGroupList > div > div { padding-left: 5%; } #userInGroupList > div > div { padding-left: 5%; } .group-navigater { margin-right: 10px; } .namecard-action-area { display: -webkit-box; } .namecard-action-btn { text-align: center; } .name-chat { background-color: yellow; } .name-voice { background-color: green; } .name-favorite { background-color: blue; }