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 10331

8.2.2.3 Channel Player - UP NEXT

Description:

Sub.Attachments.BigButton.Disabled - Attachments Disabled Sub.FacultyList - Faculty List Sub.Player.AuxData - Aux Data Sub.ActionButtons.Favorite.Disabled - Favorite Button Disabled Sub.Player.CIO - CIO Sub.Player.Chat - Chat
Sub Components in Design:
    Data.Session.Title - Title Data.Session.ID - Session ID Sub.Presentation.List - Presentation List
    Data Elements:

      Example

      Your Watching Channel "Hot Topics"

      Attachments

      No Current Schedule

      The schedule for this channel doesn't have any sessions at this time. Please check back later.

      Back to Program

      Coming Soon

      3652 Cardiovascular Update for the Clinician III Arrhythmia Valvular Clinical Myocardial Clinical

      Starting @ 11:15 a.m. EDT
      Category:
      • Channel 1
      • Navigating Health Care Economics

      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="flex_column flex" id="session_1157">
      	<header class="flex flex_row font_0 font_1:md font_3:lg p-y_3">
      		<h3 class="c_primary-n2 flex_auto font-size_up-1 font_display lh_1 lh_2 m-b_3 m_0 p-l_3:lg w_100">
      			<span class="block"> Your Watching Channel "Hot Topics" </span>
      		</h3>
      		<div class="self_start flex gap_2">
      			<span  class="btn btn-secondary flex_none flex_none disabled grid items_center text_center " ><i class="fas fa-heart"></i></span>			<span class="btn btn-secondary btn-lg disabled p-x_4 p_3 c_white" href="https://www.twitter.com/Tweat_DrSoda" target="_blank">
      			  <i class="far fa-paperclip"></i>
      			  <span class="display_none inline-block:md"> Attachments</span>
      			</span>		</div>
      	</header>
      	<section class="page-main fullscreen-player flex flex_row:md flex_column gap-x_4 gap-y_3">
      		<div class="flex_auto w_100">
      			<div class="bg_black-2 br_radius flex flex_column flex_row:md gap-x_4 gap-y_3 shadow_emboss-light">
      				<div class="flex_auto font-size_up-2 p-t_4 p_5 w_100">
      					<h1 class="m-t_4">No Current Schedule</h1>
      					<p>The schedule for this channel doesn't have any sessions at this time. Please check back later.</p>
      					<a title="back to program" class="bg_primary nowrap text_center br_radius c_white font-size_down-1 h:bg_primary-n3 h:c_primary-n3 h:c_white h:undecorated p-x_4 p_3" href="../program/" target="_blank">
      						<i class="far fa-arrow-left"></i>
      						<span class="display_none inline-block:md"> Back to Program</span>
      					</a>
      				</div>
      				<div class="bg_white br_square flex flex_auto flex_column gap-y_3 justify_start m_4 max-w_20:md max-w_25:lg p-b_0 p_4 shadow_bevel-light w_100">
      					<h2 class="c_primary-n1 font_bold font_display m_0">Coming Soon</h2>
      					<article class="relative isolation_isolate flex flex_column">
      					    <div class="bg_white br-t_3 br_radius br_secondary-2 br_solid c_black flex flex_auto flex_column font_0 gap_3 m-b_4 p-t_4 p_4 shadow_emboss-light t_n5 texture_light z_0">
      					    <header>
      					        <h3 class="font_display lh_2 c_secondary-n2 font_0 m_0">
      					            <strong class="font_bold font-size_down-2 p-r_3 block uppercase c_black-6 m-t_n3">3652</strong>
      					            <span class="font_display lh_2 c_secondary-n2 m_0 font-size_up-2">
      					                Cardiovascular Update for the Clinician III Arrhythmia Valvular Clinical Myocardial Clinical 
      					            </span>
      					        </h3>
      					    </header>
      					    <div class="font_n1 font_ui c_accent-n1">Starting  @ 11:15 a.m. <abbr title="EASTERN TIME, UTC -4">EDT</abbr> </div>
      					    <div class="font_ui font_n3 uppercase c_black-6"><strong class="c_black-5 p-r_2">Category:</strong><ul class="ul_inline-comma">
      					  <li>Channel 1</li>
      					  <li>Navigating Health Care Economics</li>
      					</ul></div>
      					    </div>
      					</article>				</div>
      			</div>
      		</div>
      		<div class="flex_auto max-w_25:lg max-w_20:md w_100 flex flex_column gap-y_3 justify_start">
      			<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 flex_0" 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>		</div>
      	</section>
      </div>
      Copy Code