*
{
	box-sizing			: border-box;
	-moz-box-sizing		: border-box;
	font-size			: 14px;
}


#TopZone
{
	position			: absolute;
	left				: 0px;
	width				: 100%;
	top					: 0px;
	height				: 40px;
	background-color    : #006ac6;
}

#LeftZone
{
	position			: absolute;
	left				: 0px;
	right				: 0px;
	top					: 40px;
	bottom				: 0px;
	border				: 1px solid #B4B4B4;
	background-color	: #FFFFFF;
}

.RightZone
{
	display				: none;
}

#icn_balloon
{
	background 			: url(../images/icn_chat.png) no-repeat 0 6px;
	display 			: inline-block;
    height 				: 100%;
    width  				: 33px;
	margin 				: 0 8px 0 10px;
	position          	: absolute;
}


#icn_Logo
{
	background 			: url(../images/icn_chat.png) no-repeat 0 6px;
	display 			: inline-block;
    height 				: 40px;
    width  				: 33px;
	margin 				: 0 8px 0 0;
	position          	: absolute;
}

#Title
{
	background-repeat	: no-repeat;
	background-position	: 0px 11px;
	color				: rgba(255, 255, 255, 1);
	font-family			: 微軟正黑體;
	font-size			: 24px;
	/*font-weight			: bold;*/
	height				: 40px;
	line-height			: 40px;
	position			: absolute;
	left				: 50px;
}

.TopButtonZone
{
	position			: absolute;
	height				: 23px;
	right				: 16px;
	top					: 8px;
}

.TopButton
{
	border				: 2px solid #ffffff;
	border-radius: 12px;
	height				: 23px;
	min-width			: 23px;
	line-height			: 19px;
	color				: #ffffff;
	text-align			: center;
	font-weight			: bold;
	font-family			: Verdana;
	margin-left			: 5px;
	cursor				: default;
	float				: right;
}

.TopButton:hover
{
	color: #a1fff7;
    border: 1.5px solid #a1fff7;
}


.SurveyButton
{
	font-size			: 12px;
	padding				: 0px 12px;
	font-family			: 微軟正黑體,微软雅黑;
	font-weight			: normal;
}

#HintZone
{
	background-color	: rgba(249, 248, 241, 1);
	padding				: 10px 40px 16px 12px;
    z-index: 10;
    height : 100%;
}

#HintZone #HintText 
{
    font-size           : 12px;
    font-weight         : 700;    
}

#HintZone #Survey div 
{
    /*font-size           : 14px;*/
    font-weight         : 700;    
}

#HintClose
{
	position			: absolute;
	top					: 16px;
	right				: 16px;
	width				: 16px;
	height				: 16px;
	font-family			: Arial;
	font-size			: 28px;
	line-height			: 16px;
	cursor				: default;
}

#HintClose:hover
{
	color				: #89CB23;
}

#ChatZone
{
	position			: absolute;
	width				: 100%;
	top					: 0px;
	bottom				: 0px;
}

#MessageList
{
	background-color	: #ffffff;
	border-bottom		: 1px solid #DCDEE4;
	position			: absolute;
	top					: 0px;
	bottom				: 50px;
	width				: 100%;
	overflow			: auto;
	padding				: 6px 10px;
}

.Editor
{
	margin-left 		: 5px; 
	margin-right 		: -4px;
	margin-top 			: 10px;
    height 				: 40px;
    border 				: 2px solid #b2c9bf;
    border-color 		: #006ac6;
    border-radius 		: 5px;
    border-right 		: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;	
    display 			: inline-block;
    outline 			: none;
    text-indent 		: 5px;
    padding 			: 10px;

}

.EditorZone
{
	position  			: absolute; 
	bottom 				: 0px; 
	height 				: 55px; 
	width 				: 100%;
    background-color:#efefef;
}


.SendButton,
.SendButton:active
{	
	background 				: #0082f4;
    border 					: 2px solid #0082f4;
    border-radius 			: 5px;
    border-left 			: none;
    border-top-left-radius 	: 0;
    border-bottom-left-radius: 0;
    color 					: #fff;
    cursor 					: pointer;
    font-size 				: 19px;
    height 					: 40px;
    width 					: 66px;	
	margin-left 			: 0px; 
	margin-top 				: 10px;
    padding 				: 0;
    vertical-align 			: top;
	text-align 				: center;
	display 				: inline-block;	
}

.SendButton:hover
{
    background 				: #0082d4;
    border-color 			: #0082d4;
}


.ChatMessage
{
	position			: relative;
	width				: 100%;
	display				: inline-block;
	margin				: 5px 0px;
}

.ChatMessageBot
{
	padding				: 0px 15px 0px 48px;
}

.ChatMessageLeft
{
	padding				: 0px 15px 0px 48px;
}

.ChatMessageRight
{
	/*padding				: 0px 48px 0px 15px;*/
	text-align			: right;
}

.ChatMessageContent
{
	text-align			: left;
}

.ChatMessageAvatar
{
	background-color	: #FFFFFF;
	position			: absolute;
	top					: 0px;
	width				: 42px;
	height				: 42px;
	border				: 1px solid #D0D0D0;
	border-radius		: 21px;
	background-repeat	: no-repeat;
	background-position	: center center;
}


.ChatMessageBot .ChatMessageAvatar
{
	left				: 0px;
}

.ChatMessageLeft .ChatMessageAvatar
{
	left				: 0px;
}

.ChatMessageRight .ChatMessageAvatar
{
	right				: 0px;
}

.ChatMessageAvatarRobot
{
	background-image	: url(../images/icn_bot1.png);
	background-size 	: 41px 41px;
}

.ChatMessageAvatarAgent
{
	background-image	: url(../images/icn_service.png);
	background-size 	: 41px 41px;
    border				: 1px solid #D0D0D0;
}

.ChatMessageAvatarUser
{
	background-image	: url(../images/icn_user.png);
	background-size 	: 41px 41px;
}

/*-- ChatMessageContent --*/

.ChatMessageContent
{
	border-radius		: 6px;
	display				: inline-block;
}

.ChatMessageBot .ChatMessageContent
{
	/*border				: 1px solid #d8efff;
	background-color	: #d8efff;*/
}

.ChatMessageLeft .ChatMessageContent
{
	border				: 1px solid #d8efff;
	background-color	: #d8efff;
}

.ChatMessageLeft .ChatMessageContent:hover
{
	border				: 1px solid rgba(138, 206, 255, 1);
	background-color	: rgba(138, 206, 255, 1);
}

.ChatMessageRight .ChatMessageContent
{
	border				: 1px solid #FFFFFF;
	background-color	: #efefef; /*rgba(255, 224, 224, 1);*/
	vertical-align		: top;
}

.ChatMessageRight .ChatMessageContent:hover
{
	border				: 1px solid rgba(217, 212, 212, 1);
	background-color	: rgba(217, 212, 212, 1);
	vertical-align		: top;
}


.ChatMessageTextContent
{
	padding				: 6px 8px;
	min-width			: 20px;
	min-height			: 42px;
	max-width			: 90%;
	text-align			: left;
	word-wrap           : break-word;
    font-size           : 14px;
    color               : #565656;
}

.ChatMessageTextContent a{
	word-wrap:break-word;
	word-break:break-all;
}


.ChatMessageTime
{
	color				: gray;
	font-family			: Verdana, Arial;
	font-size			: 9px;
    font-weight         : 700;
	padding-top			: 2px;
    padding-left        : 9px;
}

.SurveyText
{
	/*padding				: 0px 0px 3px 0px;*/
}

#SurveyComment
{
	width				: 100%;
	height				: 60px;
	outline				: none;
	border				: 1px solid #CCCCCC;
	border-radius		: 4px;
}

#Survey input
{
	outline				: none;
}

#submitSurveyButton 
{
    background-color: #E9E9E9;
    border: 1px solid #CACACA;
    border-radius: 2px;
    color: #4A4E52;
    cursor: pointer;
    outline: none;
    width: 90px;   
}

#submitSurveyButton:hover
{
    background-color: #E0E0E0;
}

#submitSurveyButton.ChangeColor 
{
    background-color:#d3d3d3;
}


.checkStatusTable {
    border: 1px solid black; 
    max-width : 110%;
    width: 110%;  
    table-layout: fixed;
    background-color:white;
}

.checkStatusTable tr:first-child td {
    background-color: rgba(166, 33, 33, 1);
    color: white;
    text-align:center;
}

.checkStatusTable  tr:nth-child(even){
    background-color: #f2f2f2;
}