/* 
* @Author: sublime text
* @Date:   2015-09-30 12:12:19
* @Last Modified by:   sublime text
* @Last Modified time: 2015-10-05 21:07:47
*/


 /*                                                                  全局                      */
/* 页面整体的背景颜色 */
body.rooms {
    background-color: #f0f0f0; /* 浅灰色 */
}

.header {
    background-color: #333; /* 深灰色 */
    color: #fff; /* 文字颜色设置为白色 */
}

/* 头部内部文本的颜色 */
.header .toptext a {
    color: #fff; /* 文字颜色设置为白色 */
}

/* 头部内部链接的悬停效果 */
.header .toptext a:hover {
    color: #ffcc00; /* 悬停时文字颜色设置为金色 */
}

/* 其他部分的背景颜色 白色 */
/* .main.container {
    background-color: #fff;
	background-size: cover;
} */

/* .login{
	background: url('../images/login_bg.jpg') no-repeat fixed top;
	background-size: cover;
} */
.rooms{
	/* background: url('../images/theme/1_bg.jpg') no-repeat fixed top;
	background-size: cover; */
	background-size: cover;
	background-color: #34363aee;
}
.room{
	background: url('../images/theme/12_mh.jpg') no-repeat fixed top;
	background-size: cover
}

/* Bold Tag */
.userinfo .dropdown-toggle b{
	color:#ffffff;
}

/* Glyphicon user */
.userinfo .dropdown-toggle .glyphicon-user{
	color:#ffffff;
}

/* Bold Tag Hover */
.userinfo .dropdown-toggle b:hover {
    color: #ffcc00; /* 设置鼠标悬停时的颜色 */
}

/* Glyphicon user Hover */
.userinfo .dropdown-toggle .glyphicon-user:hover {
    color: #ffcc00; /* 设置鼠标悬停时的颜色 */
}

.dropdown-menu {
    background-color: #34363aee; /* 设置背景色为浅灰色，可以根据需要调整颜色 */
}

.dropdown-menu > li > a {
    color: #ffcc00; /* 设置文字颜色 */
}

.dropdown-menu > li > a:hover {
    background-color: #34363aee; /* 保持背景色为浅灰色 */
    color: #ffcc00; /* 保持文字颜色为黑色 */
}



body>.scrollbar-macosx{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
}
a{
	cursor: pointer;
	color: #eee;
	text-decoration: none;
}
a:hover{
	color: #fff;
	text-decoration: none;
}
ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
.container{
	margin-top: 35px;
}

.header{
	position: fixed;
	z-index: 7778;
	width: 100%;
	height: 35px;
	/* background: url('../images/header_bg.png') repeat-x; */
	color: #eee;
}
.header .toptext{
	line-height: 35px;
	padding: 0 15px;
	float: left;
}
.header .topnavlist {
    float: right;
}

.header .topnavlist>li {
    /*width: 75px;*/
    height: 35px;
    line-height: 35px;
    text-align: center;
    float: left;
}

.header .topnavlist li a {
    display: block;
    position: relative;
    z-index: 8889;
    /*width: 75px;*/
    margin-right: 15px;
    height: 35px;
    color: white; /* 将文字颜色设置为白色 */
}

.header .popover{
	position: relative;
	z-index: 8889;
	left: -235px;
	color: #000;
	max-width: 300px;
	width: 300px;
}
.header .popover-content{
	text-align: center;
	padding: 0;
}
.header .userinfo .popover{
	left: -160px;
}
.header .userinfo .popover .arrow{
	margin-left: 45px;
}
.header .userinfo .user_portrait{
	padding-top: 10px;
}
.header .userinfo .user_portrait img{
	width: 100px;
	height: 100px;
}

.select_portrait img,
.select_portrait img{
	width: 25px;
	height: 25px;
	opacity: .5;
	cursor: pointer;
}
.select_portrait .t,
.header .userinfo .select_portrait .t{
	opacity: 1;
}
.select_portrait img:hover,
.select_portrait img:hover{
	opacity: 1;
}

.header .userinfo .user_name{
	padding: 0 5px;
}
.header .userinfo .user_name input{
	margin-bottom: 10px;
}
.header .userinfo .user_name input,
.header .userinfo .user_name button{
	border-radius: 0;
}
.header .theme .popover{
	left: -235px;
}
.header .theme .popover .arrow{
	margin-left: 115px;
}
.header .theme .popover img{
	margin: 5px;
	width: 80px;
	height: 65px;
}
.header .theme .popover img:hover{
	position: relative;
	top: -3px;
	box-shadow: 0 3px 15px #000;
}


.header li.userlist{
	width: 100px;
}
.header .userlist .popover{
	left: -150px;
	width: 300px;
}
.header .userlist .popover-content{
	max-height: 400px;
}
.header .userlist .popover .arrow{
	margin-left: 20px;
}
.header .userlist .popover li{
	text-align: left;
	height: 35px;
	line-height: 35px;
	padding: 0 5px;
}
.header .userlist .popover li:hover{
	background-color: #bbb;
	cursor: pointer;
}
.header .userlist .popover li img{
	width: 25px;
	height: 25px;
}
.header .clapboard{
	position: fixed;
	z-index: 8888;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5);
}

 /*  -------------------------------------------------------login------------------------------- */

.login .jumbotron{
	background: none;
	text-align: center;
}



.login .input-group{
	margin: 30px auto;
	max-width: 300px;
}

.login .input-group input{
	margin: 10px auto;
}

.login input:hover{
	background-color: #fff;
	box-shadow: none;
}
.login .input-group .btn{
	border-left: none;
}
.login .input-group .btn:hover{
	background-color: #fff;
	box-shadow: none;
	border-color: #ccc;
}
.login .footer{
	font-size: 20px;
	position: fixed;
	z-index: 8888;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 35px;
	line-height: 35px;
	text-align: center;
	color: #eee;
	background-color: rgba(0,0,0,.3);
}


.login .footer span{
	color: #f00;
}


 /*  -------------------------------------------------------rooms------------------------------- */

.rooms .room_list{
	margin-top: 35px;
}
.rooms .room_list a>span {
	position: absolute;
	bottom: 30px;
	right: 30px;
	color: #272;
}


 /*  -------------------------------------------------------room------------------------------- */

.room .chat_info{
	margin-bottom: 115px;
}
.room .chat_info li{
	margin-top: 15px;
	overflow: hidden;
}
.room .chat_info li>img{
	width: 40px;
	height: 70px;
	margin: 0 5px;
}
.room .chat_info i{
	display: block;
	margin-bottom: 10px;
}
.room .chat_info div{
	text-align: left;
	padding: 5px;
	background-color: #D0D7DF;
	margin: 0 60px;
	word-break: break-all;
}
.room .chat_info div>img{
	max-width: 100%;
	max-height: 250px;
}
.room .chat_info .left{
	text-align: left;
}
.room .chat_info .right{
	text-align: right;
}
.room .chat_info  .left img,
.room .chat_info .left div{
	float: left;
}
.room .chat_info .right>img,
.room .chat_info .right>div{
	float: right;
}
.room .chat_info .systeminfo span{
	white-space: nowrap;
	display: block;
	width: 200px;
	margin: 0 auto;
	text-align: center;
	border-radius: 20px;
	font-size: 12px;
}
.room .input{
	/*position: fixed;*/
	/*bottom: 0;*/
	z-index: 7777;
	width: 100%;
	/*pointer-events: none;*/
}
.room .input .center{
	max-width: 910px;
	width: 100%;
	height: 110px;
	margin: 0 auto;
	background: url('../images/room_input_bg.png');
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.room .input .tools{
	height: 10px;
	line-height: 10px;
	margin-bottom: 10px;
	margin-left: 15px;
}
.room .input .tools span{
	padding: 15px;
	cursor: pointer;
	color: #eee;
	font-size: 20px;
}
.room .input .tools span:hover{
	color: #58f;
}


.room .input .faces{
	max-width: 288px;
	position: relative;
	top: -265px;
	left: -1px;
	z-index: 8889;
}
.room .input .faces.popover .arrow{
	margin-left: -127px;
}
.room .input .faces img:hover{
	box-shadow: 0 0 5px #000;
}



.room .input .text{
	margin: 30px 15px 0;
	/*overflow: hidden;*/
	height: 34px;
	line-height: 34px;
}
.room .input .text>div{
	padding: 0 15px;
	/*text-align: center;*/
}

.room .input ._submit{
	margin: 0 15px 0;
	height: 34px;
	line-height: 34px;
}

.room .input ._submit>div{
	padding: 0 15px;
}

.room .input .input .text input{
	border-radius: 0;

}
.room .input .text a{
	font-size: 25px;
	color: #eee;
}
.room .input .text a:visited{
	color: #eee;
}
.room .input .text a:hover{
	color: #afa;
}


/*  -------------------------------------------------------script------------------------------- */

body {
    display: flex;
    font-family: Arial, sans-serif;
}
#treeview {
    width: 250px;
    border-right: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
}
#content {
    flex: 1;
    padding: 20px;
    box-sizing: border-box;
}
.tree-item {
    cursor: pointer;
    margin: 5px 0;
    user-select: none;
}
.tree-item ul {
    list-style-type: none;
    padding-left: 20px;
    display: none; /* 初始状态下隐藏子项 */
}
.tree-item.open > ul {
    display: block; /* 展开子项 */
}
.has-children::before {
    content: "+ ";
    color: green; /* "+" 字符颜色 */
}
.tree-item.open.has-children::before {
    content: "- ";
    color: red; /* "-" 字符颜色 */
}

/* ... existing styles ... */
.centered-content {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh; /* This makes sure the container takes up the full viewport height */
	text-align: center; /* For any text content */
}
.horizontal-container {
    display: flex;
    flex-direction: row; /* Default, but explicitly set for clarity */
    justify-content: space-around; /* Adjust as needed: space-around, space-between, center, etc. */
    align-items: center; /* Vertically center items if needed */
    flex-wrap: wrap; /* Allows items to wrap if they don't fit in one line */
    padding: 20px; /* Add some padding for spacing */
}

.section {
    /* Optional: Style for each section */
    margin: 10px;
    padding: 20px;
    background-color: #f0f0f0; /* Light gray background */
    text-align: center; /* Center text within sections */
}

.links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap; /* Prevents wrapping */
    min-width: 300px; /* Adjust this value based on your content */
}

.links a {
    margin: 0 10px; /* Adjust the margin to control spacing between links */
    text-decoration: none;
    color: #007bff;
    white-space: nowrap; /* Prevents text wrapping */
}