.comment_post {
	transition: background 0.5s ease;
}

.url2a {
	color:#507ea4;
}

#newest100msg {
  display:block;
  margin:0 auto;
  margin-top:10px;
  color:silver;
  text-align:center;
}
#newest100msg a {
  color:silver;
}

#control {
  width:100%;
  display:flex;
  background:#2b2b2b;
  padding:4px;
} #control-text {
  color:#fff;
} #control img {
  width:24px;
  height:24px;
  margin-left:auto;
} #media {
  padding:2px;
} #media iframe {
  width:100%;
  height:214px;
} #members {
  border:3px solid #2b2b2b;
  background:#fff;
  padding:2px;
  width:100%;
}


#msg-alert {
	position:absolute;
	top:80px;
  left:58px;
	width:42px;
  height:42px;
  border-radius:50%;
  line-height:42px;
  text-align:center;
	background:#7B7B7B; /* #7B7B7B #CE2EE8 */
	border:none;
}
#msg-alert img {
  width:16px;
  position:relative;
  top:-2px;
}

#clients_count_box {
  position:absolute;
  top:80px;
  left:10px;

  width:42px;
  height:42px;
  line-height:42px;
  border-radius:50%;
  background:#7b7b7b;
  color:#fff;
  font-size:12px;
  text-align:center;
  cursor:pointer;

}
#clients_count_box img {
  width:8px;
  position:relative;
  top:-1px;
}
#clients_count {
  display:inline;

  text-decoration:underline;
}

#user_list_panel {
	display:none;
	position:fixed;
	top:140px;
	left:20px;

	width:160px;
	
	background:#fff;
	color:rgb(15 23 42);
	border-radius:10px;
	border:3px solid #000;
	box-shadow: #00000040 0 25px 50px -12px;
	z-index:101;
} #user_list_panel_bar {
	display:flex;
	padding:10px;
	cursor: move;
} #user_list_panel_title {
	font-size:18px;
} #user_list_panel_data {
	padding:10px; padding-top:0;
	margin-bottom:10px;
} #user_list_panel button {
	border:none;
	background:none;
	margin-left:auto;
} #user_list_panel button img {
	width:20px;
}

#form {
  margin-top:25px;
	margin-bottom:30px;
}

#infomation-p {
  margin-bottom:40px;
}


.comment_post {
	margin:25px 0;
	padding:10px;
	background: #e9ecef;
	border-radius:5px;
	word-wrap: break-word;

  color:#000;
}

.icon-flex {
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
}
.namebox {
  display:flex;
  align-items:center;
  flex-wrap:nowrap;

  border-bottom:2px solid #cecece;
  margin-left:10px;

  flex-grow:1;
}
.user-icon {
  width:30px;
  height:30px;
}
.name {
  margin:4px 0;
  /*名前がはみでて#mainの幅に影響している*/
}
.date {
 	flex-grow:1;
	text-align:right;
	color:gray;
	font-size:13px;
}
.no-inroomid {
  display:inline;
  font-weight:bold;
}
.comment {
	margin:12px 0;	
  margin-left:40px;
}

#form-title {
  font-size:24px;
  font-weight:bold;
  margin-bottom:20px;
}

.form-box {
  display:block;
}

.form-labels {
  margin:4px 0;
  font-weight:bold;
}

.form-inputs {
  background:#F2F2F2;
  border:2px solid #a6a6a6;
  border-radius:8px;
  padding:10px;
  width:100%;
  margin-bottom:16px;
}

#submit_btn {
  background:var(--accent1);
  color:var(--secondary);
  padding:6px 16px;
  font-size:12px;
  font-weight:bold;
  border:2px solid var(--secondary);
  border-radius:20px;
}
#submit_btn:hover {
  background:#3fdcff;
}
#submit_btn img {
  width:20px;
  margin-right:6px;
}

.btn-userst {
	color:#fff;
	background-color:#17a2b8;
	border-color:#17a2b8;
}

.btn-userst:hover {
	color:#fff;
	background-color:#138496;
	border-color:#138496;
}

#join-chat-button {
  background:var(--accent1);
  color:var(--secondary);
  border:2px solid var(--secondary);
  border-radius:20px;
  font-weight:bold;
  font-size:12px;
  padding:6px 16px;
  margin:10px 0;
  margin-bottom:0;
}
#join-chat-button:hover {
  background:#3fdcff;
}

#navbtncontainer {
	position:fixed;
	z-index:100;
	top:50%; right:20px;
	transform: translateY(-50%);
}
#join-chat-button2 {
  display:block;
  width:42px; height:42px;
  background:#fff;
  border-radius:50%;
  border:1px solid #2b2b2b;
} #join-chat-button2 img {
  width:20px;
  margin-top:2px;
}
#page-top-button {
  display:block;
  background:#fff;
  width:42px; height:42px;
  border-radius:50%;
  margin-bottom:10px;
  border:1px solid #2b2b2b;
} #page-top-button img {
  width:20px;
  margin-bottom:2px;
}

#join-chat-button img {
  width:20px;
  margin-right:8px;
}


#add-image-button-shadow {
  display:none;
}
#add-image-button {
  background:silver;
  color:var(--secondary);
  padding:6px 16px;
  font-size:12px;
  font-weight:bold;
  border:2px solid var(--secondary);
  border-radius:20px;
}

#setting-button {
	color:var(--secondary);
	background:silver;
	padding:6px 16px;
	font-size:12px;
	font-weight:bold;
	border:2px solid var(--secondary);
	border-radius:20px;
}

.hr2 {
  border:1px solid var(--secondary);
}

#setting-panel {
        font-size:16px;
        display:none;
        position:fixed;
        top:50%; left:50%;
        transform: translate(-50%, -50%);
        margin:0 auto;
        width:500px;
        background:rgb(229 231 235);
        color:rgb(15 23 42);
        border-radius:10px;
        box-shadow: #00000040 0 25px 50px -12px;
        z-index:10000;

        padding:20px;
}

#mask-panel {
        display:none;
        position:fixed;
        top:0; left:0;
        width:100%; height:100%;
        background:#000;
        opacity:.8;
        z-index:9999;
}

#setting-panel-title {
        font-size:20px;
}

#setting-panel-notifi {
        margin-top:10px;
}

#setting-panel-close-btn {
        font-weight:100;
        font-size:14px;
        margin-top:20px;
        padding:8px 12px;
        background:#fafafa;
        border:none;
        border-radius:10px;

}

#setting-panel-userlist-default {
	margin-top:5px;
}

#setting-panel-name {
	margin:20px 0;
}
#setting-name-input {
	border-radius:5px;
	border:none;
	width:60%;
	padding:2px 6px;
}

@keyframes shakeAnimation {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
  }
  75% {
    transform: translateX(-3px);
  }
}
.shake {
	animation: shakeAnimation 0.3s ease-in-out;
}

@media screen and (max-width: 550px) {
	.form-inputs {
		font-size:16px;
	}

	.alert {
		width:85%;
	}

	.desc_img {
		display:block;
		width:100%;
	}
	iframe {
		width:100%;
	}

	#setting-panel {
		width:90%;
	}

	#user_list_panel {
		width:90%;
	}
}