body, html{
    padding:0!important; 
    margin:0 !important;
}

body { margin:0px; font-family:Arial; font-size:12px;}
.red { color:#E0494C !important;}
.green { color:#5DDA3C}
.blue { color:#5FB1D9 !important;}
textarea { font:inherit; overflow: auto; font-weight:normal }
input[type='submit'] { font:inherit; } 
input[type='text'], select, textarea { 
	-ms-box-sizing:content-box;
	-moz-box-sizing:content-box;
	-webkit-box-sizing:content-box; 
	box-sizing:content-box;
    border: 1px solid #c4c4c4;
    width: 98%;
    height: 20px;
    font-size: 16px;
    padding: 4px; 
    /*
	border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
	*/
    box-shadow: 0px 0px 8px #d9d9d9;
    -moz-box-shadow: 0px 0px 8px #d9d9d9;
    -webkit-box-shadow: 0px 0px 8px #d9d9d9;
}

input[type='text']:focus, textarea:focus , select:focus{ 
    outline: none;
    border: 1px solid #7bc1f7;
    box-shadow: 0px 0px 8px #7bc1f7;
    -moz-box-shadow: 0px 0px 8px #7bc1f7;
    -webkit-box-shadow: 0px 0px 8px #7bc1f7;
} 

textarea{
	height: 50px;
}

select{
	color: #464646;
}

/*================================================================================*/
.RequiredField { background:url('Images/FieldRequired.gif') no-repeat right center; padding-right:10px; } 
.FieldLabel {font-weight: bold;}
/*================================================================================*/
.ChatConsole { position:absolute; left:5px; top:6px; right:6px; bottom:6px; }

.ChatConsole .ButtonBar { position:absolute; left:0; right:0; top:0; height:29px; padding:5px 0px 5px 0px;}  

.ConsoleButton{font-size: 24px;	cursor: pointer;}
/*.ConsoleButton:hover{background-color:#F8F8F8;}*/
.Print { float:left;}
.Email {margin-left: 3px; float: left;}
.Leave {float:right;}
.CannedMessage{float:left;margin-left:3px;}
.Contacts{ float:left; }
.Transfer{ float:right; margin-right:3px;}
.StartCobrowsing {margin-left: 5px; float: left;}
.StopCobrowsing {margin-left: 5px; float: left;}
.StartCollaborating, .StopCollaborating { 
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
    display:inline-block;
    margin-left: 5px; float: left;
}

.ChatConsole .EventLog {
	position:absolute; left:0; right:0px; top:35px; bottom:80px; overflow:auto; 
	border-radius:5px;
	background-color: #F8F8F8;
	border: 1px solid #c4c4c4;
    padding: 4px;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px #d9d9d9;
    -moz-box-shadow: 0px 0px 8px #d9d9d9;
    -webkit-box-shadow: 0px 0px 8px #d9d9d9;
}
.ChatConsole .EventLog div.Event { padding:3px 4px 3px 4px; }
.ChatConsole .EventLog div.Participant { color:#0489B1; display: block; font-weight:bold; }
.ChatConsole .EventLog div.Participant.Self { color:#848484; }
.ChatConsole .EventLog div.Time { color:#848484; display: inline-block; width:50px; float:right; }
.ChatConsole .EventLog div.Data { padding-top:3px; white-space: pre-line; overflow: hidden; }
.ChatConsole .EventLog div.Request { color:dimgray; font-weight: bold; }
.ChatConsole .EventLog div.Accept { color:green; font-weight: bold; }
.ChatConsole .EventLog div.Reject { color:red; font-weight: bold; }

.ChatConsole .StatusBar {position:absolute; left:0; right:0px; bottom:0; height:17px;  
/*
                         border:1px solid #BDBDBD; background-color:#F7F7F7; overflow:hidden; 
*/						 
                         font-size:12px; color:#0489B1;
                         padding-top:4px; padding-left:4px;
						 margin-top: 5px;
						 }
.ChatConsole .StatusBar.Warning { color: red; }

.ChatConsole .MessageBox { position:absolute; left:0; right:0px; bottom:25px; height:50px; 
	/*border-radius:5px;*/
	background-color: #FFFFFF;
	margin-top: 0px;
}        
.ChatConsole .MessageBox textarea { width:97%; height:40px; border-color:#BDBDBD; resize: none;
	/*border-radius:5px;*/
	background-color: #FFFFFF;
	margin-top: 0px;
	padding:5px 5px; 
 }

.ChatConsole.Disabled .EventLog, .ChatConsole.Disabled .MessageBox textarea { background-color:#F2F2F2; }        
.ChatConsole.CallCentreAgent.Disabled .MessageBox textarea { background-image:url('Images/CustomerLeft.png'); background-repeat:no-repeat; background-position: 5px center; }       

@media print
{
.ChatConsole .EventLog { border:none; width:508px; height:auto; overflow:visible; }
.ChatConsole .MessageBox, .ChatConsole .ButtonBar, .ChatConsole .StatusBar { display: none; }        
}

.ChatConsoleForAgentBody
{
    height: 300px;
    border: dotted 2px blue;
}

#divMessage
{
    font-size: 16px;
    padding: 0 0 10px 5px;
    width: 380px;
    color: #464646;
}
#divServiceNotAvailable, #divCallCenterIdentificationError
{
    font-weight: bold;
    font-size: 16px;
    color: red;
}
#divCallCenterIdentificationError a
{
    color: inherit;
}
#tdQuestionLabel
{
    vertical-align: top;
    padding-top: 5px;
}
#btnStartChat
{
    float: right;
}
#imgCompanyLogo
{
    margin-top: 3px;
	width: 200px;
}

#waitImageContainer, #endChatImageContainer
{
    width: 100%;
}

#divMsgOnChatRoomClosed { font-size:16px; color:#464646; padding:0 0 2px 5px;  left:0; right:0; top:0; height:20px; display:none; }
#divChatConsole { position:absolute; left:0; right:0; top:0; bottom:0}
#divChatRequestForm {position: absolute; top: 0; bottom: 0;}

	/* Smartphones (portrait and landscape) ----------- */
	@media only screen 
	and (min-device-width : 320px) 
	and (max-device-width : 480px) {
        #divChatRequestForm
        {
            width: 320px;
           /* height: 340px; */
            margin: 0px;
        }
	}
	
	/* Smartphones 2 (portrait and landscape) ----------- */
	@media only screen 
	and (min-device-width : 360px) 
	and (max-device-width : 640px) {
        #divChatRequestForm
        {
            width: 360px;
        /*    height: 440px; */
            margin: 0px;
        }
	}	

	/* Smartphones (landscape) ----------- */
	@media only screen 
	and (min-width : 400px) {
        #divChatRequestForm
        {
            width: 420px;
        /*    height: 340px; */
            margin: 0px;			
        }
	}

	/* Smartphones (portrait) ----------- */
    @media only screen and (max-width : 320px) {
        #divChatRequestForm {
            width: 320px;
        /*    height: 340px; */
            margin: 0px;
        }
    }

	/* iPads (portrait and landscape) and Desktops ----------- */
	@media only screen 
	and (min-device-width : 768px) {
        #divChatRequestForm
        {
            width: 420px;
        /*    height: 340px; */
            margin: 0px;
        }
	}
        #imgChatRequestForm
		{
            display: block;
            margin-bottom: 20px;
            margin-left: 10px;
			height: 40px;
			margin: 10 auto;
            /*content:url("Images/CompanyLogo.png");*/			
        }
        #fraChatRequestForm
        {
            display: block;
			/*width: 95%;*/
			width: 100%;
        }

        #divStartNewSession
        {
            margin-top:10px;
            text-align:center;
        }

         #divStartNewSession a:link,
         #divStartNewSession a:visited,
         #divStartNewSession a:hover
        {
            color:#1586be;
        }
/* Cobrowsing */
.CobrowsingConfirmDlg 
{
   /* position: fixed; */
   position:absolute;
    display:none;
    top: 40%;
    left:calc(50% - 130px);
    z-index: 2147483646;
    width: 260px;
    margin: auto;
    box-sizing: border-box;
    border: 1px outset #246c9c;
    border-radius: 5px;
    background-color: #f2f2f2;/*#2b86b5;*/
    font-family: Arial;
    font-size: 12px;
    font-weight: normal;
    cursor: default;
    text-decoration: none;
    -ms-user-select:none;
    -moz-user-select:none;
    user-select: none;
}

.CobrowsingConfirmDlg .Message 
{
    margin: 15px 20px 10px;
    color: #1586be;
}

.CobrowsingConfirmDlg .ButtonBar 
{
    margin-bottom: 15px;
    text-align: center;
}

.CobrowsingConfirmDlg .Button 
{
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
    border-radius: 24px;
    border: 1px solid;
    padding: 5px 26px;
    color: white;
    cursor: pointer;
    font-weight: bold;
}

.CobrowsingConfirmDlg .Button:active 
{
    transform: scale(0.95)
}

.CobrowsingConfirmDlg .Button.Accept 
{
    border-color: #74b807;
    background-color: #89c403;
    background: linear-gradient(to bottom, #89c403 5%, #77a809 100%);
}

.CobrowsingConfirmDlg .Button.Accept:hover 
{
    background-color: #77a809;
    background: linear-gradient(to bottom, #77a809 5%, #89c403 100%);
}

.CobrowsingConfirmDlg .Button.Reject 
{
    border-color: #d83526;
    background-color: #fe1a00;
    background: linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
}

.CobrowsingConfirmDlg .Button.Reject:hover 
{
    background-color: #ce0100;
    background: linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
}