@CHARSET "ISO-8859-1";

/**
 *  Copyright 2018 Avaya Inc. All Rights Reserved.
 *
 * Usage of this source is bound to the terms described in
 * licences/License.txt
 *
 * Avaya - Confidential & Proprietary. Use pursuant to your signed agreement or
 * Avaya Policy
 */

/*
 *  Stylesheet for chat-specific components
 */
 
 .fixedPosition {
    position:fixed!important;
}

#pageTopic {
    display: block;
}

#pageTopic:invalid {
    background: red;
    color:white;
}

/**
 *  This is the element the user will click to show the chat panel.
 */
#liveChatLink {
    position: fixed;
    right: 0px;
    top: 200px;
}

#chatPanel {
    display:none;
}

#chatForm {/*chevalier chatform template*/
    display: block;
    margin-top: px;
	/* margin-left: 200px;
	margin-right: 200px; */
}
#chatInterface {/*chevalier chatinterface (panel) template*/
    display: block;
    margin-top: px;
	margin-left: auto;
	margin-right: auto;
	width : 50%;
	font-size: 18px;
	text-align: center;
	color: blue;
}
/*
 *  The messages in the chat are posted inside this div.
 *  The overflow setting, when combined with a maximum height,
 *  gives the div a scrollbar.
 */
#messages {/*chevalier msg chat box*/
    border : 1px solid #48095C;
    padding-left: 0px;
    padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 5px;
    height: 450px;
    word-wrap: break-word;
    overflow-y: scroll;
    white-space: pre-wrap;
}

/*
 * URLs inside the message are black and underlined to stand out against the background.
 */
#messages a {
    color: black;
    text-decoration: underline;
}
#participants {
    padding-top: 4px;
}
#participants div {
    display: inline-block;
    width: 145px;
    border: 1px dotted #cccccc;
}
#controls {/*chevalier กรอบส่งข้อความ+ปุ่มส่ง  */
    padding-top: 1px;
}

#usersDiv {
    height: 45px;
}

.bigtext {
    font-size: 19px;
}
.smalltext {
    font-size: 13px;
}

.sectionBorder {
    display: block;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 5px;
}

/**
 * Login form
 */
 
 .main_detail {/*chevalier เพิ่ม*/
	font-size: 20px;
	color: black;
	text-align: center;
 }
 
 
.formTable {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
    padding: 0px;
}
.formTable td {
    padding-left: 3px;
    padding-right: 3px;
}
.formLabel {/*chevalier*/
    padding-top: 5px;
    font-size: 16px;
	color: blue;
}
.formField {
    width: 100%;
    padding-bottom: 2px;
    text-align: left;
}
.formField .customFields {/*chevalier  */
    width: 20%;
}
.formField #user-chat {
    width:100%;
}
.formField #user-chat-last {
    width:100%;
}
.formField input:invalid {
    background: red;
    color: white;
    font-weight: bold;
}
.formField input,select {
    width: 100%;
    border: 1px solid #cccccc;
    padding: 3px;
    background-color: inherit;
    font-size: 14px;
}
.formField select {
    width: 168px;
}

.formCheckbox {
    padding-right: 172px;
    text-align: right;
}

/*
 *  The address inputs are hidden by default. To display them, set the value of "display" to "block".
 */
.addressClass {
    display:none;
}

/*chevalier button chatform   */
#openbutton-chat {
    width: 100%;
}

/*
 * This is the customer's typing box.
 */
.chatField {/*chevalier กรอบส่งข้อความ*/
    width: 99%;
    padding: 3px;
    font-size: 16px;
}

.poweredBy {
    display: block;
    border-top: 1px solid #cccccc;
    padding-top: 10px;
    text-align: right;
    position: relative;
    left: -20px;
    padding-right: 40px;
    font-size: 10px;
    top: 5px;
}

#sendbutton-chat {/*chevalier send button*/
    width: 25%;
}

#closebutton-chat{
    display:none;
}

/*
 *  Sent chat messages are inside a red paragraph
 */
p.sent {
    color: red;
    text-align: left;
}

/*
 *  Received chat messages are inside a blue paragraph,
 *  with italics to help distinguish them from sent paragraphs
 */
p.response {
    color: black;
    font-style: italic;
    text-align: right;
}

/*
 * System messages are left-aligned in blue italics.
 */
p.system {
    color: blue;
    font-style: italic;
    text-align: left;
}

/*
 * Keeping dates and names separate to messages
 */
p.date {
    font-weight: bold;
    text-align: left;
}

p.agentDate {
    font-weight: bold;
    text-align: right;
    font-style: italic;
}

/*
 * For those who want chatbot messages to be separate to normal agent messages.
 */
p.chatbot {
    color: blue;
    background: black;
    text-align: right;
    direction: rtl;
}

.center {
    text-align: center;
}

.user {
    display: inline;
    width: 170px;
}

.hidden {
    display: none;
}

.typing {
    background: yellow;
    color: black;
}

#user-chat {
    width:33%;
}

#user-chat-last {
    width:66%;
}

#phone-country {
    width: 85px;
}

#phone-area {
    width: 85px;
}

#phone-chat {
    width: 100%;
}

#loginErrorsDiv {
    border-top: 1px #4a4a4a solid;
    white-space: pre;
    display: none;
    padding: 2px 0px 0px 2px;
}

/**
*Widget elements
*/


.button-widget {
    background-color: red; /* Green */
    border: none;
    color: white;
    padding: 4px 6px;
    text-align: center;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    font-style: italic;
    margin: 4px 2px;
    cursor: pointer;
}

.radio-widget {
   background-color: red; /* Green */
    border: none;
    color: white;
    padding: 4px 6px;
    text-align: center;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    
}