This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: Virtual ACC

Arches:Virtual ACC

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/virtual_boot.css, line 8650

13.11.2 Chat Window

The chat window is used to display the chat in player pages.

Example

Chat

collapse
(1:44 PM) Lovely Day : Chat
(2:13 PM) Lovely Day : Chat some more
(2:18 PM) Lovely Day : Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
(2:18 PM) Lovely Day : Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
(2:18 PM) Lovely Day : Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
(2:18 PM) Lovely Day : Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
(2:18 PM) Lovely Day : Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
(2:19 PM) Lovely Day : Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
(3:48 PM) Lovely Day : test
(3:50 PM) Matt Watier : hello
<div class="br_solid br_radius br_1 br_black-3 shadow_overlap-light p_4:lg p_3 panel panel-default flex flex_column gap-y_3 " id="panel-chat">
  <div class="panel-heading bg_transparent flex flex_row">
      <h4 class="panel-title font_bold font_display c_primary m_0 flex_auto self_center">Chat</h4>
      <div class="c_primary-n2 flex flex_nowrap flex_row font-size_down h:c_primary-n3 h:opacity h:undecorated items_center lh_1 m-l_auto opacity_5 self_center toggle user-select_none p-l_4" data-bs-toggle="collapse" data-bs-target="#CollapseChatWindow" role="button" aria-expanded="true" aria-controls="#CollapseChatWindow">
        <div class="flex_none self_center"> collapse </div>
        <div class="flex_none" >
            <span class="fa-stack">
              <i class="fas fa-minus fa-stack-1x"></i>
              <i class="fas fa-minus rotate_90 a:rotation fa-stack-1x "></i>
            </span>
        </div>
      </div>  </div>
  <div id="CollapseChatWindow" class="collapse show">
  <div  class="br_1 br_black-2 br_radius br_solid flex_auto h_20 h_auto:md loading-log m-b_4 overflow_auto p-r_3 panel-body reading-typography relative scrollbar-mini shadow_emboss-light min-h_5xlh min-h_20:md min-h_30:lg">
      <div class="load-log p_3 absolute t_0 r_0 l_0 b_0 overflow_unset flex flex_column gap-y_3" data-log-id="2">
          <div class="msgln">(1:44 PM) <b> Lovely Day </b>: Chat<br></div>
          <div class="msgln">(2:13 PM) <b> Lovely Day </b>: Chat some more<br></div>
          <div class="msgln">(2:18 PM) <b> Lovely Day </b>: Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.<br></div>
          <div class="msgln">(2:18 PM) <b> Lovely Day </b>: Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.<br></div>
          <div class="msgln">(2:18 PM) <b> Lovely Day </b>: Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.<br></div>
          <div class="msgln">(2:18 PM) <b> Lovely Day </b>: Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.<br></div>
          <div class="msgln">(2:18 PM) <b> Lovely Day </b>: Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.<br></div>
          <div class="msgln">(2:19 PM) <b> Lovely Day </b>: Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.<br></div>
          <div class="msgln">(3:48 PM) <b> Lovely Day </b>: test<br></div>
          <div class="msgln">(3:50 PM) <b> Matt Watier </b>: hello<br></div>
      </div>
  </div>
  <div class="panel-footer flex_none m-t_auto">
      <form name="message" action="">
          <div class="form-group flex flex_row nowrap">
              <input name="usermsg" type="text" id="usermsg" class="form-control br-br_square br-tr_square flex_auto" autocomplete="off" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
              <input name="submitmsg" type="submit" id="submitmsg" value="Add" class="btn btn-primary br-tl_square br-bl_square flex_none">
              <input type="hidden" name="user_client_portal_reg_id" id="user_client_portal_reg_id" value="10">
              <input type="hidden" name="chat_id" id="chat_id" value="2">
              <input type="hidden" name="client_portal_presentation_id" id="client_portal_presentation_id" value="2">
              <input type="hidden" name="client_portal_id" id="client_portal_id" value="1">
              <input type="hidden" name="screen_name" id="screen_name" value=" Matt   Watier ">
          </div>
      </form>
  </div>
  </div>
</div>
Copy Code