Chat Widget "Chat Connected Screen" Theme

1-Header.html

<script>
//sessvars.chat_id = window.location.href.split('/').pop();
document.cookie="chat_id=" + window.location.href.split('/').pop() + "; path=/; domain=.desk.com;"; 
</script>

<title>{{ site.company_name }}</title>

<link rel="icon" type="image/vnd.microsoft.icon" href='{{ "/favicon.png" | portal_image_url: image_asset_host }}' />

<link rel="icon" type="image/png" href='{{ "/favicon.png" | portal_image_url: image_asset_host }}' />

<style>

 .inside_title { background: #2C97DE !important}

 .customer_widget .inside_title { border-­bottom: none!important; }

 .customer_widget {

  background­color: #2C97DE;

  background­position:initial initial;

  background­repeat:initial initial;

}
  
  
 .customer_widget .inside_title {
background: #1B1B1B;
border-bottom: 0px solid #ededed!important;
margin-bottom: 10px;
padding: 10px;
color: #fff;
}
  
.customer_widget {
border: 1px solid #e6e6e6!important;
position: absolute;
background: #fff;
font-size: 12px;
}
  
.customer_widget .inside_desc {
margin: 10px;
line-height: 1.1em;
border-bottom: 1px solid #bababa!important;
padding: 10px 0;
color: #666;
font-size: 14px!important;
font-weight:normal!important;
}
  
input.default, select.default, textarea.default {
margin-bottom: 8px;
border: 1px solid #ccc!important;
width: 100%;
height: 20px!important;
}
  
.chat_bottom_area {
  border-bottom: 1px solid #dfdfdf; 
  bottom: 0px; 
}

.chat_message_area {
  bottom: 80px;
}
</style>

2-Body.html

<div id="customer_widget_main" class="customer_widget">

<div class="inside_title">
  
  <div style="float:left;">

<img src="http://www.desk.com/resources/common/css/img/desk-logo.png">   
    
  </div>
  
  <div style="float:right">

{{ end_session_button }}

<div id="chat_ended_session_div" style="display:none;">{{system.snippets.chat_ended}}</div>

<div id="session_{{ chat_session.id }}" class="chat_timer_block"><!-- session time counter goes in here  - do not delete --></div>

</div>
  
  <span style="font-size:25pt;color:#FFFFFF;">&nbsp;</span>
  
</div>


<div class="customer_inner_widget" >

<div id="chat-session-{{ chat_session.id }}" style="height:100%;">

<div class="chat_box">

<div class="toolbar-border-extra-bottom-line"></div>

<div id="chat_session_text_{{ chat_session.id }}" class="chat_message_area">

<div class="chat_message_header_system">

<span class="chat_message_system chat_message_system_bold">{{system.snippets.question}}: {{ chat_session.subject }}</span>

</div><!--chat_message_header_system-->

{{ messages_block }}

</div><!--chat_session_text_-->

</div><!--chat_box-->

</div><!--customer_inner_widget-->

<!--chat-session-id-->

<div id="chat_waiting_area" class="chat_bottom_area" style="display:;"><span id="est_wait"></span></div>

<!-- chat_waiting_area-->

{{ chat_send_area }}

</div><!--customer_inner_widget-->

</div><!--customer_widget_main-->

<div style="clear: both;"></div>