/* ===========================================
	Jrole User Interface CSS Framework
	Output  : Uncompressed
	Theme   : Vanilla 
	File    : jr-app-joma-2.0.css
	Version : 2.1.1
	Author  : Netcomposite http://www.netcomposite.com/
   =========================================== */




/* ===========================================
	NAMESPACE: CSS:  chan
	NAMESPACE: DAT:


	GENERAL APPEARANCE

	BUTTON
	DIMENSIONS
	POSITION
	APPEARENCE

	PORTLET
	DIMENSIONS
	POSITION
	APPEARENCE

	PROFILE
	HEADER
	MESSAGE

	COLOR THEME

        DATA
        
        data-channel-placement
        data-app-theme
        data-marker-id
        data-marker-id-range

   =========================================== */

/*  1. APP  - CHANNEL BASIC SETTINGS */


/* RESPONSIVE VIEWPORT DIMENSION SETTINGS */ 

@media (max-width: 580px)  {

[data-viewport-position="menu::slidepanel::right::350"] {
	position: fixed;
	top: 0;
	bottom: 0;
	right: -100%;
	width: 100%;
	height: 100%;
	margin: 0;
	border: none;
	z-index: 1000000 !important;
	-moz-transition: all 600ms;
	-webkit-transition: all 600ms;
	transition: all 600ms;
	overflow: hidden;
}

}



/* 1.0 DIMENSIONS, SCALE, DENSITY, GUTTERS */

.jp-app-component-density,
.jp-app-component-scale,
.jp-app-component-aspectratio,
.jp-app-component-dimensions {}


/* WIDGET WIDTH */


/* WIDGET HEIGHT */

/* WIDGET LEFT AND RIGHT GUTTERS */
 


/* 
.jp-app-channel-stream-item-event dl {
	display: inline-block;
	text-align: left;
	margin-left: 32px !important;
}
 

.jp-app-channel-stream-item-event dl dt {
	position: relative;
	left: -32px;
	top:0;
	margin-right: -32px;
}

.jp-app-channel-stream-item-event dl dd {
	display: block;
	width: auto;

}
*/


/* 1.1 SIZE, SCROLL AND WHITE SPACE FOR THE CHANNEL PLUGIN or WIDGET */

.jp-app-widget-web {
	/* display: block; */	
        border: 0px solid #ff0000;
	padding: 0px;
	margin: 0;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	min-height: 100dvh; /* always have atleast the height of viewport*/
	flex-direction: column;
	min-width: 100%;
	height: 100%;
	margin: 0; 
	overflow: hidden;	
	
		

}

.jp-app-widget-web .jp-app-widget-web-channel-panel { /* initiaL state is hidden */
	/* display: none; */ 
        z-index: 99999999000 !important;
        border: 2px solid #dddddd;
	padding: 0px;
	margin: 0;	
	display: flex !important;
	flex-direction: column;
        flex: 1 1 auto !important; /*magical line*/
	min-width: 100%;
	margin: 0;
 	height: 99dvh; /* 1 point less to prevent panel content overflow */
	overflow: hidden;	
}

.jp-app-widget-web .jp-app-widget-web-channel-panel-layer {
	display: flex;
	flex-direction: column;
        flex: 1 1 auto; /*magical line*/
	min-height: 100dvh; /* always have atleast the height of viewport*/


}
.jp-app-widget-web .jp-app-channel-stream { 
 
	overflow-y: auto;
	overflow-x: hidden;
	border: 0px solid #0000ff;

	display: flex;
	flex-direction: column;
        flex: 1 1 auto; /*magical line*/
        max-height: calc(100vh - 140px);
        height: 99dvh;
        padding-bottom: 2.5em !important; /* white space for console overlaY*/
}

.jp-app-widget-web-channel-console {
	position: absolute;
	bottom: 0;
	width: 100%;
 
 }  

/*  2. APP - CHANNEL ELEMENTS AND PRESETS   */


.jp-app-view-hidden {
	display: none !important;
	visibility: hidden;
}

.jp-wfl-ip-bar-type-timeline.jp-wfl-ip-bar-stack {
 	padding: 0 0 0 3.5em;
}


.jp-app-wfl-ip-bar.jp-app-wfl-ip-scale-mini,
.jp-app-wfl-ip-track.jp-app-wfl-ip-scale-mini,
.jp-app-wfl-ip-scale-mini .jp-app-wfl-ip-track {
	   -moz-border-radius: 0;
	-webkit-border-radius: 0;
	     -o-border-radius: 0;
  	        border-radius: 0;
}

.jp-app-wfl-ip-bar.jp-app-wfl-ip-scale-small,
.jp-app-wfl-ip-track.jp-app-wfl-ip-scale-small,
.jp-app-wfl-ip-scale-small .jp-app-wfl-ip-track {
	   -moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	     -o-border-radius: 2px;
  	        border-radius: 2px;
}

.jp-app-wfl-ip-bar.jp-app-wfl-ip-scale-fefault,
.jp-app-wfl-ip-track.jp-app-wfl-ip-scale-default,
.jp-app-wfl-ip-scale-default .jp-app-wfl-ip-track {
	   -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	     -o-border-radius: 3px;
  	        border-radius: 3px;
}

.jp-app-wfl-ip-bar.jp-app-wfl-ip-scale-large,
.jp-app-wfl-ip-track.jp-app-wfl-ip-scale-large,
.jp-app-wfl-ip-scale-large .jp-app-wfl-ip-track {
	   -moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	     -o-border-radius: 5px;
  	        border-radius: 5px;
}

.jp-app-wfl-ip-bar.jp-app-wfl-ip-scale-xlarge,
.jp-app-wfl-ip-track.jp-app-wfl-ip-scale-xlarge,
.jp-app-wfl-ip-scale-xlarge .jp-app-wfl-ip-track {
	   -moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	     -o-border-radius: 7px;
  	        border-radius: 7px;
}

.jp-app-wfl-ip-track {
	display: block; 
	text-align: right;
	padding: 2px
}

/*  1.1 APP - CHANNEL PAGE PLACEMENT */

[data-app-placement-app-prompt="top::right"] {display: block; position: fixed; top: 3px; right: -16px;}


[data-app-placement-widget="bottom::right"] .jp-app-widget-web {display: block; position: relative;  top:0px; left: 0px;}
[data-app-placement-widget="bottom::right"] .jp-app-widget-web-prompt {display: block; position: absolute; bottom: 0px; right: 40px;}


[data-app-placement-widget="bottom::left"] .jp-app-widget-web {display: block; position: fixed; bottom: 20px; left: 20px;}
[data-app-placement-widget="bottom::left"] .jp-app-render-prompt {display: block; position: absolute; bottom: 0px; left: 0px;}
[data-app-placement-widget="bottom::left"] .jp-app-widget-web-prompt-notification{ 
	min-width:200px;
	top:70%;
	right:200%;
	margin-right: 70px;
	transform:translate(0, -70%);
	position:absolute;
	z-index:99999999;
	box-sizing:border-box;

	/* initiAL HIDDEN State disabled

	visibility:hidden;
	opacity:0;
	transition:opacity 0.8s; */
 
}

[data-app-placement-popup="bottom::right"] {}
[data-app-viewport-dimensions="default"]  {}



/*  1.2 APP - CHANNEL SKIN SETTINGS */

/*  1.2.1 TYPOGRAPHY */

/*  1.2.2 PALLETE */


/* HEADER DENSITY, BORDER, BACKGROUND */

.jp-app-joma {
	background:  #ffffff;
}

[data-app-theme="default"] .jp-app-widget-web-channel-panel-header {
	padding: 0.75em; /* header density */
	border: 1px solid #dddddd; /* header borders */
	border-bottom: 2px solid #ddd; !important; /* header borders */
	background: none; /* header background */
        box-shadow: 0px 10px 25px -25px rgba(0,0,0,0.45);
 }

/* MAIN PANEL DENSITY, BORDER, BACKGROUND  */

[data-app-theme="default"]  .jp-app-channel-stream { /* overall appearence of the messages list */
	background: #ffffff;
	color: #2f3742;
	border-bottom: 4px solid white;
	padding: 0.75em;
}



/*  1.2.3 HIGHLIGHT CONTENT */

[data-card-highlight="mx::room"], /* SYSTEM SPECIFIC TO MATRIX */    
[data-card-highlight="mx::system"], /* SYSTEM IN GENERAL  */   
[data-card-highlight="mx::agent"], /* AGENT OF THE CHANNEL */
[data-card-highlight="mx::robot"], /* ROBOT IN GENERAL  */
[data-card-highlight="mx::app"], /* EXTERNAL APLICATION IN GENERAL */  
[data-card-highlight="mx::guest"], /* NOT REGISTERED USER */ 
[data-card-highlight="mx::user"], /* REGISTRED USER IN GENERAL */ 
[data-card-highlight="mx::user-author"], /* USER CONTENT CREATOR  */  
[data-card-highlight="mx::subcriber"], /* USER OF THE CHANNEL START POINT */
[data-card-highlight="mx::operator"], /* USER OF THE CHANNEL END POINT */
[data-card-highlight="mx::moderator"], /* USER MODERATOR OF THE CHANNEL */
[data-card-highlight="mx::supervisor"] /* USER MODERATOR SPECIFIC TO THE CHANNEL */
{}

[data-card-highlight="mx::system"]  .jp-app-channel-card-payload-content-layer {
	background: #fff !important;
	color: #999;
	border: 1px solid #ddd;

}

[data-card-highlight="mx::agent"] .jp-app-channel-card-payload-content-layer {
	background: #444c5c !important;
	color: #fff;
}
[data-card-highlight="mx::agent"]  .jp-app-channel-card-payload-data-type-media .jp-app-channel-card-payload-content-layer {
	background: #ddd !important;
	color: #fff;
}


[data-card-highlight="mx::operator"] .jp-app-channel-card-payload-content-layer {
	background: #607d8b !important;
	color: #fff;
}
[data-card-highlight="mx::operator"]  .jp-app-channel-card-payload-data-type-media .jp-app-channel-card-payload-content-layer {
	background: #ddd !important;
	color: #fff;
}

[data-card-highlight="mx::subcriber"] .jp-app-channel-card-payload-content-layer {
	background: #ec407a  !important;
	color: #fff;
}
[data-card-highlight="mx::subcriber"]  .jp-app-channel-card-payload-data-type-media .jp-app-channel-card-payload-content-layer {
	background: #ddd !important;
	color: #fff;
}


  

/*  1.3 APP - CHANNEL APPEARANCE MODE */ 

[data-app-appearance="mode::dark"] { 
     background: #121212  !important;
     color: #fff !important;
}
 
[data-app-appearance="mode::dark"] .jp-app-channel-stream {
     background: #000 !important;
     color: #fff !important;
  
}
  
/*  1.4 APP - CHANNEL SIGNALS / STATUS COLOR INDICATORS */

[data-marker-id="signal::presence::on"]  {}
[data-marker-id="signal::presence::dnd"]  {}
[data-marker-id="signal::presence::off"]  {}

[data-marker-id="signal::led::error"]  {}
[data-marker-id="signal::led::warnning"]  {}
[data-marker-id="signal::led::alert"]  {}
[data-marker-id="signal::led::bar"]  {background-color: #43A047 !important; color: #fff;}

[data-marker-id="signal::led::progress"]  {background-color: #43A047 !important; color: #fff;}
[data-marker-id-range^="0"] 	{width: 0%;}
[data-marker-id-range^="1"] 	{width: 10%;}
[data-marker-id-range^="2"] 	{width: 20%;}
[data-marker-id-range^="3"] 	{width: 30%;}
[data-marker-id-range^="4"] 	{width: 40%;}
[data-marker-id-range^="5"] 	{width: 50%;}
[data-marker-id-range^="6"] 	{width: 60%;}
[data-marker-id-range^="7"] 	{width: 70%;}
[data-marker-id-range^="8"] 	{width: 80%;}
[data-marker-id-range^="9"] 	{width: 90%;}
[data-marker-id-range^="10"] 	{width: 100%;}
 
 
 
 
/*  1.5 APP - CHANNEL PLACEHOLDERS / LOADERS */ 
 
.jp-app-placeholder-attachment,
.jp-app-placeholder-image,
.jp-app-placeholder-video {}
 
.jp-app-placeholder-loader-box {
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: placeHolderGlage;
	animation-timing-function: linear;
	background: #f6f7f8;
	background: linear-gradient(to right, #eeeeee 10%, #dddddd 20%, #eeeeee 30%);
	background-size: 75% 100%;
	height: 100%;
	position: relative;
	padding: 2px;
 }
 
 .jp-app-placeholder-loader-media {
	background: transparent  url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4yLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzAwcHgiIGhlaWdodD0iMTE1cHgiIHZpZXdCb3g9IjAgMCAzMDAgMTE1IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzMDAgMTE1IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDB2MTE1aDMwMFYwSDB6IE02MC4wMDMsMTBoMTIwLjAwMnYxNUg2MC4wMDNWMTB6IE0xMCwxMGg0MHY0MEgxMFYxMHogTTYwLjAwMywzNS4wMDNoMTIwLjAwMnYxMEg2MC4wMDMNCglWMzUuMDAzeiBNNjAuMDAyLDU1LjAwNWg3MHYxMGgtNzBWNTUuMDA1eiBNMTQwLjAwNyw1NS4wMDVoNzAuMDAxdjEwaC03MC4wMDFWNTUuMDA1eiBNMjIwLjAxNiw1NS4wMDVoNzB2MTBoLTcwVjU1LjAwNXoNCgkgTTYwLjAwMyw3NC45OTloMTAwdjMwaC0xMDBWNzQuOTk5eiIvPg0KPC9zdmc+DQo=') 50% 50% no-repeat;
	background-size: 100% 100%;
	width: 100%;
	text-align: center;
	margin: 0 auto;
	padding-top: 38.3333%;
	border: 1px solid #c0c0c0;
 }

.jp-app-placeholder-attachment {
	display: block;
	position: relative;
	padding: 4px;
	background: none;
	border: 1px solid #ffffff;

}

.jp-app-placeholder-attachment:hover{
	 background: none;
	 border: 1px solid #0000ff;

}

.jp-app-placeholder-attachment span {
	display: block;
	padding-left: 20px;
	font-size: 90%;
	line-height:110%;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

}
.jp-app-placeholder-attachment span svg {
	position: absolute;
	left: 2px;
	top: 4px;
	height: 20px;
	width: 20px;
}

.jp-app-placeholder-attachment var {
	display: block;
	text-align: center;
	font-size: 12px;
}


.jp-app-placeholder-image {
	position: relative;
	padding-bottom: 50% !important;
	height: 0;
	background : #ddd;

}


.jp-app-placeholder-image img{
 	min-width: 2.5em;
	min-height: 2.5em;
	max-width: 100%;
	max-height: 100%; /*remove to disable retaining ratio */
	width: auto;
	height: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	border:2px solid transparent !important;


}
 
 /* 1.7 APP - CHANNEL WEB WIDGET  */


/*  APP - NOTIFICATION - TOOLTIPS -POPUPS */

/*  1.7.1 TOOLTIPS DATA BASIC  */

[data-card-tooltip] {
  position: relative;
}

[data-card-tooltip]::before,
[data-card-tooltip]::after {
	opacity: 0;
	visbility: hidden;
	margin-top: -0.5em;
  }

[data-card-tooltip]::before {
	content: attr(data-card-tooltip);
	display: block;
	position: absolute;
	top: -150%;
	left: 50%;
	margin-left: -4.75em;
	width: 8em;
	text-align: center;
	border-radius: 4px;
	background: black;
	color: white;
	font-size: 0.8em;
	line-height: 1.1;
	padding: 0.75em 0.95em;
  }

[data-card-tooltip]::after {
	content: "";
	border: 10px solid transparent;
	border-top-color: black;
	position: absolute;
	top: -4px;
	left: 50%;
	margin-left: -10px;
  }

[data-card-tooltip]:hover {
	cursor: help;
  }

[data-card-tooltip]:hover::before,
[data-card-tooltip]:hover::after {
	opacity: 1;
	visiblity: visible;
  }
  
  
/*  1.7.2 NOTIFICATION PROMPT */

.jp-app-widget-web-prompt-notification {
	display:inline-block;
	position:relative;
	text-align:left;
	z-index: 98989999999 !important;
}

.jp-app-widget-web-prompt-notification-payload  {
	border-bottom:1px dotted #666;
	padding:8px 16px;
	color:#fff;
	background-color:#ffffff;
	border-radius:2px;
	box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

.jp-app-widget-web-prompt-notification-payload  p {
	padding: 0;
	margin: 0;
	font-weight:normal;
	font-size:14px;
}

/*  TO EDIT BUBBLE SPEECH NOTIFICATION TAIL */

/* .jp-app-widget-web-prompt-notification  .jp-app-widget-web-prompt-notification-payload i {
	position:absolute;
	top:0%;
	left:100%;
	margin-top:-12px;
	width:12px;
	height:24px;
	overflow:hidden;
}
.jp-app-widget-web-prompt-notification  .jp-app-widget-web-prompt-notification-payload i::after {
	content:'';
	position:absolute;
	width:12px;
	height:12px;
	left:0;
	top:100%;
	transform:translate(-50%,-100%) rotate(-45deg);
	background-color:#ffffff;
	box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

*/

.jp-app-widget-web-prompt-notification .jp-app-widget-web-prompt-notification-payload {
	min-width:200px;
	top:14px;
	right: 0;
	margin-right: 45px;
	transform:translate(0, 14px);
	position:absolute;
	z-index:99999999;
	box-sizing:border-box;
	

	/* tail dimension */
	  --b: 2em; /* base */
	  --h: 1.5em; /* height */
	  --p: 50%;  /* main position (0%:top 100%:bottom) */
	  --x: -1.8em; /* tail position (relative to the main position). Can be percentage */
	
	  padding: 0.65em;
	  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,
	    100% clamp(var(--b),var(--p) + var(--b)/2,100%),
	    calc(100% + var(--h)) calc(var(--p) + var(--x)),
	    100% clamp(0%,var(--p) - var(--b)/2,100% - var(--b)));
	  border-image: fill 0//999px
	  conic-gradient(#ff0000 0 0); /* the color */

	/* INITIAL HIDDEN STATE DISABLED

	visibility:hidden;
	opacity:0;
	transition:opacity 0.8s; */

}

.jp-app-widget-web-prompt-notification:hover .jp-app-widget-web-prompt-notification-payload {
	visibility:visible;
	opacity:1;
	
}

.jp-app-widget-web-prompt-notification  .jp-app-widget-web-prompt-notification-payload svg {
	width: 1em;
	height: 1em;
	vertical-align: middle;
	color: #ffffff;
	fill:  #ffffff;
	overflow: hidden;
}	

/*  1.7.3 INTERNAL TOOLTIPS  */

.jp-app-tooltip-wrapper {} /* RESERVED */

@-webkit-keyframes jp_fadein{0%{opacity:0}to{opacity:1}}
@keyframes jp_fadein{0%{opacity:0}to{opacity:1}}
@-webkit-keyframes jp_fadeout{0%{opacity:1}to{opacity:0}}
@keyframes jp_fadeout{0%{opacity:1}to{opacity:0}}


.jp-app-tooltip-visible {
  -webkit-animation: jp_fadein .5s forwards;
  animation: jp_fadein .5s forwards;
}

.jp-app-tooltip-invisible {
  -webkit-animation: jp_fadeout .1s forwards;
  animation: jp_fadeout .1s forwards;
}

.jp-app-tooltip {
	position: absolute; 
	min-width: 50px;
	width: auto;
	max-width: 180px;
	box-sizing:border-box;
	font-size: 0.7em !important;
	text-align: left !important;
	line-height: 110% !important;
	line-break: normal !important;
	white-space: normal  !important;
	padding: 0.5em;
	padding-left: 0.85em;
	padding-right: 0.85em;
	color: #ffffff;
	border-image: fill 0//999px conic-gradient(#000000 0 0); /* the color */

}

.jp-app-tooltip-point-bottom-left {
	--b: 1em; /* base */
	--h: 1.5em; /* height */
	--p: 50%;  /* main position (0%:left 100%:right) */
	--x: -2em; /* tail position (relative to the main position). Can be percentage */
	clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
	clamp(var(--b),var(--p) + var(--b)/2,100%) 100%,
	calc(var(--p) + var(--x)) calc(100% + var(--h)),
	clamp(0%,var(--p) - var(--b)/2,100% - var(--b)) 100%);


}
.jp-app-tooltip-point-bottom-right {
	/* tail dimension */
	--b: 1em; /* base */
	--h: 1.5em; /* height */
	--p: 50%;  /* main position (0%:left 100%:right) */
	--x: 2em; /* tail position (relative to the main position). Can be percentage */
	clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
	clamp(var(--b),var(--p) + var(--b)/2,100%) 100%,
	calc(var(--p) + var(--x)) calc(100% + var(--h)),
	clamp(0%,var(--p) - var(--b)/2,100% - var(--b)) 100%);

}

.jp-app-tooltip-point-top-left {
	--b: 1em; /* base */
	--h: 1.5em; /* height */
	--p: 50%;  /* main position (0%:left 100%:right) */
	--x: -2em;  /* tail position (relative to the main position). Can be percentage */
	clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
	clamp(var(--b),var(--p) + var(--b)/2,100%) 0,
	calc(var(--p) + var(--x)) calc(-1*var(--h)),
	clamp(0%,var(--p) - var(--b)/2,100% - var(--b)) 0);
 }

.jp-app-tooltip-point-top-right {
	--b: 1em; /* base */
	--h: 1.5em; /* height */
	--p: 50%;  /* main position (0%:left 100%:right) */
	--x: 2em;  /* tail position (relative to the main position). Can be percentage */

	clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
	clamp(var(--b),var(--p) + var(--b)/2,100%) 0,
	calc(var(--p) + var(--x)) calc(-1*var(--h)),
	clamp(0%,var(--p) - var(--b)/2,100% - var(--b)) 0);
 }

.jp-app-tooltip-point-right-up {
	/* tail dimension */
	  --b: 1.0em; /* base */
	  --h: 1.5em; /* height */
	  --p: 50%;  /* main position (0%:top 100%:bottom) */
	  --x: -1.8em; /* tail position (relative to the main position). Can be percentage */
	  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,
	  100% clamp(var(--b),var(--p) + var(--b)/2,100%),
	  calc(100% + var(--h)) calc(var(--p) + var(--x)),
	  100% clamp(0%,var(--p) - var(--b)/2,100% - var(--b)));
 }

.jp-app-tooltip-point-left-up {
	--b: 1em; /* base */
	--h: 1.5em; /* height */
	--p: 50%;  /* main position (0%:left 100%:right) */
	--x: -1.5em; /* tail position (relative to the main position). Can be percentage */
	clip-path: polygon(0 0,100% 0,100% 100%,0 100%,
	0 clamp(var(--b),var(--p) + var(--b)/2,100%),
	calc(-1*var(--h)) calc(var(--p) + var(--x)),
	0 clamp(0%,var(--p) - var(--b)/2,100% - var(--b)));

}

.jp-app-tooltip-point-bottom-right {
	/* tail dimension */
	  --b: 1.0em; /* base */
	  --h: 1.5em; /* height */
	  --p: 50%;  /* main position (0%:top 100%:bottom) */
	  --x: 1.8em; /* tail position (relative to the main position). Can be percentage */
	  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,
	  100% clamp(var(--b),var(--p) + var(--b)/2,100%),
	  calc(100% + var(--h)) calc(var(--p) + var(--x)),
	  100% clamp(0%,var(--p) - var(--b)/2,100% - var(--b)));


}











 
 /* PROMPT */
  
  .jp-app-widget-web-prompt,
  .jp-app-widget-web-prompt-payload,
  .jp-app-widget-web-prompt-signal {}
  
  .jp-app-widget-web-prompt {
	  z-index: 900 !important;
	  opacity: 0.8;
	  margin: 0;
	  display: inline-block;
  
  }
  
  
  .jp-app-widget-web-prompt {   /* chat prompt button skin  */
	background-color: none;
	border: none;
	border-radius: 5px;
	text-align: center;
	width: auto !important;
	min-width: 100px;
	height: 40px;
	padding-left: 15px;
	padding-right: 15px;
  }
  
  .jp-app-render-prompt-icon {
	width: 2em;
	height: 2em;
	vertical-align: middle;
	fill: currentColor;
	overflow: hidden
  
  }
  
  .jp-app-widget-web-prompt-payload  {
	  cursor: pointer;
	  position: absolute !important;
	  top: 0 !important;s
	  left: 0 !important;
	  right: 0 !important;
	  width: 100% !important;
	  height: 100% !important;
	  border: none;
	  transform: translateX(0) translateY(0) !important;
	  -webkit-transform: translateX(0) translateY(0) !important;
	  -ms-transform: translateX(0) translateY(0) !important;
  
  }
  
  /* Buttons styles start */
.jp-app-widget-web-prompt-payload  button {
	display: inline-block;
	border: none;
	padding: 0;
	margin: 0;
	text-decoration: none;
	background: none;
	line-height: 1;
	cursor: pointer;
	text-align: center;
	transition: background 250ms ease-in-out, transform 150ms ease;
	-webkit-appearance: none;
	-moz-appearance: none;
  }
  
  .jp-app-widget-web-prompt-payload  button:hover,
  .jp-app-widget-web-prompt-payload  button:focus {
      background: none;
  }
  
  .jp-app-widget-web-prompt-payload {
  
  }
  
  span.jp-app-widget-web-prompt-label {
	display: block;
	color: #fff;
	fonr-size: 12px;
	font-weight: 600;
	padding: 10px 5px;
	white-space: nowrap;
  
  }
 .jp-app-widget-web-prompt-payload  span.jp-app-widget-web-prompt-signal {
  	color: #fff;
  	background-color: #ff0000;
  	border-color: #ddd;
  	border-style: solid;
  	border-width: 2px;
  	display: block;
  	height: 22px;
  	width:  22px;
  	font-size: 10px;
  	line-height: 150%;
  	border-radius: 22px;
  	text-align: center;
  	position: absolute;
  	top: 2px;
  	right: 1px;
  	padding: 2px;
	z-index: 9999999;
  }
  
  
 .jp-app-widget-web-channel-panel-tools-menu span.jp-app-widget-web-prompt-signal {
  	color: #fff;
  	background-color: #ff0000;
  	border-color: #ddd;
  	border-style: solid;
  	border-width: 2px;
  	display: block;
  	height: 22px;
  	width:  22px;
  	font-size: 10px;
  	line-height: 150%;
  	border-radius: 22px;
  	text-align: center;
  	position: absolute;
  	top: -10px;
  	left: 90%;
  	padding: 2px;
	z-index: 9999999;
  }
  
  
  span.jp-app-widget-web-prompt-signal:empty {
  display: none;
  }
  

  
  
 /* PAYLOAD */
 
 /* APP - CHANNEL PROMPT */
 

.jp-app-widget-web-channel-console,
.jp-app-widget-web-channel-console-signal {}


.jp-app-widget-web-channel-io,
.jp-app-widget-web-channel-io-anchor,
.jp-app-widget-web-channel-io-layer,
.jp-app-widget-web-channel-io-mask,
.jp-app-widget-web-channel-io-tools,
.jp-app-widget-web-channel-io-tools-menu,
.jp-app-widget-web-channel-io-tools-panel,
.jp-app-widget-web-channel-io-box,
.jp-app-widget-web-channel-io-box-text,
.jp-app-widget-web-channel-io-box-editor,
.jp-app-widget-web-channel-io-box-tools,
.jp-app-widget-web-channel-io-box-upload,
.jp-app-widget-web-channel-io-box-submit{}


.jp-app-widget-web-channel-io-layer {
	color: #000;
	position: relative;
	background-color: #fff;
	border: 1px solid #999 !important;


}

.jp-app-widget-web-channel-io-box   {
	display: inline-block;
	zoom: 1;
	outline: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-background-clip: padding;
	-moz-background-clip: padding;
	background-clip: padding-box;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	overflow-y: hidden; /* Hide vertical scrollbar */
	overflow-x: hidden; /* Hide horizontal scrollbar */

}

.jp-app-widget-web-channel-io-box-text.[contentEditable=true]:empty:not(:focus):before {
  content: attr(data-text)
}

.jp-app-widget-web-channel-io-box-text {
	height: 60px;
	max-height: 240px;
	width: 100%;
	vertical-align: middle;
	line-height: 125% !important;

	margin: 0;
	font-size: 1em;
	padding: 10px;
	padding-right: 48px;
	text-align: left;

	white-space: initial !important;

	-ms-word-break: break-all;
	word-break: break-all;

	// Non standard for webkit
	word-break: break-word;

	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto

	/*    overflow: auto; */
	overflow-y: hidden; /* Hide vertical scrollbar */
	overflow-x: hidden; /* Hide horizontal scrollbar */

	border: 1px solid transparent;
}

div.jp-app-widget-web-channel-io-box-text:focus {
	border: 1px solid blue !important;
	outline: 0;
	/* min-height: 64px; */
	background: none;
}


.jp-app-widget-web-channel-io-box-tools {
	position: absolute;
	bottom: 5px;
	right: 5px;
}

.jp-app-widget-web-channel-io-box-tools svg {
	width: 1.2em;
	height: 1.2em;
	vertical-align: middle;
	fill: #000000;
	overflow: hidden;
	border: none;
}



.jp-app-channel-io-mask-edit-mode-text  {
	display: inline-block;
	zoom: 1;
	outline: 0;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-background-clip: padding;
	-moz-background-clip: padding;
	background-clip: padding-box;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	background-color: #fff;

 }

/* formatting editor */


.jp-app-channel-wfl-io-panel-formatting div a:link, a:visited, a:hover, a:active  {
	color: #000;

}
.jp-app-channel-wfl-io-panel-formatting  svg {
	color: #000 !imporrant;
	fill: #000000;

}


.jp-app-widget-web-channel-io-box-upload  {
	cursor: pointer;
	background: #FFF;
	padding: 4px
}
.jp-app-widget-web-channel-io-box-upload input[type="file"] {
    display: none;
}



.jp-app-widget-web-channel-io-box-submit button {
    display: inline-box;
	background: #0060df;
	border:2px #ddd solid;
	padding: 4px;
	border-radius: 5px;
}
.jp-app-widget-web-channel-io-box-submit button:hover  {
    display: inline-box;
	background: #0060df;
	border:2px #2196f3 solid;
	padding: 4px;
	border-radius: 5px;
}

.jp-app-widget-web-channel-io-box-submit button  svg{
    fill: #ffffff;
}

.jp-app-widget-web-channel-io-box-submit button:hover  svg {
    border: none;
    fill: #ffffff;
}

.jp-app-channel-input-icon-react {

}



.jp-app-widget-web-channel-console-signal {
	position: relative;
	padding: 16px;
	background: #fafafa;
	border: 1px solid #999;
	border-bottom: none !important;

	font-size: 0.8em;
	white-space: initial !important;

	-ms-word-break: break-all;
	word-break: break-all;

	// Non standard for webkit
	word-break: break-word;

	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto
}
.jp-app-widget-web-channel-console-signal-tools {
	position: absolute !important;
	top: 0px;
	right: 20px;
}

.jp-app-widget-web-channel-console-signal-tools button {
	position:relative;
	display: inline-block;
	zoom: 1;
	outline:0;
	box-sizing: border-box;
	-webkit-box-sizing:  border-box;
	-moz-box-sizing:  border-box;
	font-weight: normal;
	text-decoration:none;
	text-transform: none;
	vertical-align: middle;
	color: #000;
	text-overflow: ellipsis;
	white-space: nowrap;
	box-shadow: none;
	border-radius: 0 !important;
	border: none;
	background: transparent;
	cursor: pointer;
	-webkit-appearance:none;
	-webkit-box-shadow: none;

	margin: 0 !important;
	padding: 0px 4px;
	margin: 4px !important;
	font-size: 1em;
	line-height: 1em;
	height: 1em;
        width:  1em;
         
}

.jp-app-widget-web-channel-console-signal-tools button svg {
	width: 18px;
	height: 18px;
	vertical-align: middle;
	fill: #000000 !important;
	color: #000000 !important;

	padding: 0.25em;
	border: 1px solid #ddd;
}

.jp-app-widget-web-channel-console-signal-tools button:hover svg {
	fill: #ff0000 !important;
	border: 1px solid #ff0000;
}

.jp-app-widget-web-channel-console-signal .jp-app-wfl-ip {
	border: 1px solid #999 !important;
	background: #d4d4d4;

}
.jp-app-widget-web-channel-console-signal-definition {
	padding 0;
	padding-bottom: 2px;
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}



 .jp-app-widget-web-channel,
 .jp-app-widget-web-channel-panel,
 .jp-app-widget-web-channel-panel-layer,
 .jp-app-widget-web-channel-panel-archor,
 .jp-app-widget-web-channel-panel-header,
 .jp-app-widget-web-channel-panel-title,
 .jp-app-widget-web-channel-panel-heading,
 .jp-app-widget-web-channel-panel-tools,
 .jp-app-widget-web-channel-panel-tools-menu {}
 
 
 .jp-app-widget-web-channel-panel-layer{
        height: 100% 1important;
        background: #F2F5F8;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        color: #434651;
        width: 100%;
  }
 
 
 
 .jp-app-widget-web-channel-panel-header {
	position: relative;
	display: block;

  }
 
 .jp-app-widget-web-channel-panel-title {
	position: relative;
	display: inline-block !important;
	vertical-align: middle;
	padding: 0;
	padding-left: 0.25em;
	margin: 0;
 
 }
 .jp-app-widget-web-channel-panel-heading {
	display: inline-block !important;
	position: relative;
	vertical-align: top;
	padding: 0;
	line-height: 110%;
	margin: 0;
	font-size: 16px !important;
	font-weight: 400;
	max-width: 12em;
	overflow: hidden;
	word-break: break-word;
	text-overflow: ellipsis;

 }
 
 
 .jp-app-widget-web-channel-panel-status {
	 display: block;
	 vertical-align: middle;
	 font-size: 13px !important;
 }
 
 .jp-app-widget-web-channel-panel-tools {
	position:absolute !important;
	top:0;
	right: 0;
	padding: 0.5em;
 
 }
 .jp-app-widget-web-channel-panel-tools-menu {
	display: inline-block !important;
	padding: 0.25em;
	padding-right: 1em;
 
  }
 .jp-app-widget-web-channel-panel-tools-menu button svg {
	width: 32px;
	height: 32px;
	vertical-align: middle;
	fill: #000000;
	overflow: hidden;
	padding: 0.25em;
	border: 1px solid #fff;
  }
 
 .jp-app-widget-web-channel-panel-tools-menu button:hover svg {
  fill: #ff0000;
  border: 1px solid #ff0000;
  }
 
 .jp-app-widget-web-channel-panel-tools-menu button {
 position:relative;
 display: inline-block;
 zoom: 1;
 outline:0;
 box-sizing: border-box;
 -webkit-box-sizing:  border-box;
 -moz-box-sizing:  border-box;
 font-weight: normal;
 text-decoration:none;
 text-transform: none;
 margin: 0 !important;
 vertical-align: middle;
 color: #000;
 text-overflow: ellipsis;
 white-space: nowrap;
 padding: 0px 4px;
 margin: 4px !important;
 font-size: 1.2em;
 line-height: 1.2em;
 height: 1.2em;
 width:  1.2em;
 box-shadow: none;
 border-radius: 0 !important;
 border: none;
 background: transparent;
 cursor: pointer;
 -webkit-appearance:none;
 -webkit-box-shadow: none;
 }
 
 
 
 
 [data-marker-id="signal::presence::on"] svg {
 		color: #2E7D32;
 		fill: #2E7D32;
 }
 
 [data-marker-id="signal::presence::dnd"] svg {
 		color: #FF8F00;
 		fill: #FF8F00;
 }
 
 [data-marker-id="signal::presence::off"] svg {
 		color: #B71C1C;
 		fill: #B71C1C;
 }
 

.jp-app-channel-card-user {
	 font-size: 85% !important;
 
 }
 
.jp-app-channel-card-user  .jp-app-widget-web-channel-panel-heading {
font-weight: 600;
font-size: 14px !important;
line-height: 100% !important;
vertical-align: middle;

}

.jp-app-channel-card-user  .jp-app-widget-web-channel-panel-status {
font-weight: 400;
font-size: 12px !important;

}
 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 /* STREAM * /
 
 
 .jp-app-channel-stream,
 .jp-app-channel-stream-item {}
 
 
 /* STREAM FRAME */
 
 .jp-app-channel-stream ul {
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
 	border: 0px solid #000;
 }
 
 
 .jp-app-channel-stream ul li:last-child {
 	border-bottom: none;
 }
 
 /* RENDERING  */
 
 .jp-app-channel-card-content-render {
 	overflow-wrap: anywhere;
 }
 
 .jp-app-channel-card-content-render a {
 	overflow-wrap: break-word;
 	word-wrap: break-word;
 	-ms-word-break: break-all;
 	word-break: break-all;
 	word-break: break-word;
 }
 
 
 
 /* CARD OUTLINE GENERAL LAYOUT  */
 
 
 .jp-app-channel-card {
 	margin: 0;
 	padding: 0;
 }
 
 .jp-app-channel-card dl {
 	margin: 0;
 	padding: 0;
 }
 .jp-app-channel-card dl  dd {
 	display: block;
 	margin: 0;
 	padding: 0;
 	width: auto;
 }
/* .jp-app-channel-card dl  dd:after{
 	display: block;
 	content: ''
 } */
 .jp-app-channel-card dl  dt{
 	display: block;
 	width: auto;
 	padding: 0;
 	margin: 0;
 }
 
 .jp-app-channel-card-payload {
         /* padding-left: 54px; MUST BE EQUAL TO AVATOR SCALE 16,32,48 +8 */
 	margin-bottom: 0.5em;
 }
 
.jp-app-channel-card-anchor,
.jp-app-channel-card-layer,
.jp-app-channel-card-content-layer {
	position: relative;

}


.jp-app-channel-card-anchor {
}
.jp-app-channel-card-anchor:hover {
}
 
.jp-app-channel-card-payload-tools-menu {
	position: absolute;
	top: 0px;
	right: -15px;

}

.jp-app-channel-card-payload-tools-menu svg {
        height: 1em;
        width: 1em;
}
 
.jp-app-channel-card-meta-payload-receipt .jp-app-channel-card-vid {
	margin-left: -10px !important;
	margin-top: 14px !important;
 
}

/* EVENTS */

.jp-app-channel-card-type-mx:marker,
.jp-app-channel-card-type-mx:signal,
.jp-app-channel-card-type-mx:event:activity,
.jp-app-channel-card-type-mx-event-message,
.jp-app-channel-card-type-mx-event-message-group,
.jp-app-channel-card-type-mx:event:react {

}

 
 /* PAYLOAD TYPES */
 
 .jp-app-channel-card-payload,
 .jp-app-channel-card-payload-content-type-multipart,
 .jp-app-channel-card-payload-data-type-text,
 .jp-app-channel-card-payload-data-type-image,
 .jp-app-channel-card-payload-data-type-audio,
 .jp-app-channel-card-payload-data-type-video,
 .jp-app-channel-card-payload-data-type-map,
 .jp-app-channel-card-payload-data-type-file,
 .jp-app-channel-card-payload-data-type-media,
 .jp-app-channel-card-payload-data-type-form,
 .jp-app-channel-card-payload-data-type-script {}
 
 
/* 1.8 APP - CARDS DEFAULT LAYOUT AND STRUCTURE */

/*  MARKER */
 
.jp-app-channel-card-type-mx-marker .jp-app-channel-stream-item-mark,
.jp-app-channel-card-type-mx-marker .jp-app-channel-card-type-mx-marker,
.jp-app-channel-card-type-mx-marker .jp-app-channel-card-anchor,
.jp-app-channel-card-type-mx-marker .jp-app-channel-card-layer,
.jp-app-channel-card-type-mx-marker .jp-app-channel-card-header,
.jp-app-channel-card-type-mx-marker .jp-app-channel-card-title,
.jp-app-channel-card-type-mx-marker .jp-app-channel-card-title-heading,
.jp-app-channel-card-type-mx-marker .jp-app-channel-card-title-timer,
.jp-app-channel-card-type-mx-marker .jp-app-channel-card-payload,
.jp-app-channel-card-type-mx-marker .jp-app-channel-card-payload-content-type-multipart,
.jp-app-channel-card-type-mx-marker .jp-app-channel-card-payload-content-layer,
.jp-app-channel-card-type-mx-marker .jp-app-channel-card-payload-content-render {}

.jp-app-channel-card-type-mx-marker .jp-app-channel-stream-item-mark {
	margin-bottom: 0.5em;
}

.jp-app-channel-card-type-mx-marker .jp-app-channel-card-header  {
	overflow: hidden;
	text-align: center;
	font-weight: 400;
	font-size: 0.9em;
	border: none;
}

.jp-app-channel-card-type-mx-marker .jp-app-channel-card-header:before,
.jp-app-channel-card-type-mx-marker .jp-app-channel-card-header:after {
	content: "";
	display: inline-block;
	height: 1px;
	position: relative;
	vertical-align: middle;
	width: 50%;
}

.jp-app-channel-card-type-mx-marker .jp-app-channel-card-header:before {
	right: 0.5em;
	margin-left: -50%;
}

.jp-app-channel-card-type-mx-marker .jp-app-channel-card-header:after {
	left: 0.5em;
	margin-right: -50%;
}

.jp-app-channel-card-type-mx-marker .jp-app-channel-card-title-timer {
	font-size: 12px;
}

.jp-app-channel-card-type-mx-marker .jp-app-channel-card-payload-content-layer {
	margin: 16px !important;
}
.jp-app-channel-card-type-mx-marker .jp-app-channel-card-payload-content-render {
	text-align: center;
	padding: 0.5em;
	font-size:90%;
	line-height: 120%;

}

/* SIGNAL  */

.jp-app-channel-card-type-mx-signal .jp-app-channel-card-header,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-title,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-title-heading,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-title-timer,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-title-timer time,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-insights,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-payload,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-payload-data-type-text,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-payload-tools,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-payload-content-layer,
.jp-app-channel-card-type-mx-signal  .jp-app-channel-card-payload-content-render,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-meta-signal,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-payload-insights,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-meta-payload-sentiment,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-meta-reactions,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-meta-payload-receipt,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-meta-payload-timestamp {
	display: inline !important;
	white-space: normal;
	padding: 0 !important;
	margin: 0 !important;
	vertical-align: middle !important;
	width: auto;
 
}

.jp-app-channel-card-type-mx-signal .jp-app-channel-card-header  {
	display: block !important;
	vertical-align: middle !important;
	padding-left: 24px !important; 	

}


.jp-app-channel-card-type-mx-signal .jp-app-channel-card-title, 
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-title-heading,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-title-signal,
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-title-timer {
	display: inline; 
	vertical-align: middle !important; 
	line-height: 1.1em;
	font-weight: 400;
	
}

 
.jp-app-channel-card-type-mx-signal .jp-app-channel-card-title-heading {
	display: inline-block !important; 
   max-width: 12em;
   white-space: nowrap !important;
   overflow: hidden;
   text-overflow: ellipsis;
}
 
.jp-app-channel-card-type-mx-signal  .jp-app-channel-card-vid  {
	position: absolute;
	left: 0px;
	top:  2px
 	
}
  
  

/* LEFT SHIFT SETTING */

.jp-app-channel-card-type-mx-signal dl {
	display: inline-block;
	text-align: left;
	margin-left: 40px;
	padding: 0 !importang;
	height: auto;

}

.jp-app-channel-card-type-mx-signal  dl > dt {
	display: inline-block;
	width: auto !important;
	position: relative; 
	left: -24px;
	top:0;
	margin-right: -24px;

 
	
}

.jp-app-channel-card-type-mx-signal  dl > dd {
	display: inline !important;
	position: relative;
  

 
}

.jp-app-channel-card-type-mx-signal .jp-app-channel-card-title-timer-loader  {
	width: 20px;
	display: inline-block;
	aspect-ratio: 10;
	background: radial-gradient(circle closest-side,#000 90%,#0000) 0/calc(100%/3) 100% space;
	clip-path: inset(0 100% 0 0);
	animation: d1 1s steps(4) infinite;
}
@keyframes d1 {to{clip-path: inset(0 -34% 0 0)}} 


/* EVENT - ACTIVITY */

.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-title-heading,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-title-timer,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-title-timer time,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-insights,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-payload-data-type-text,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-payload-tools,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-payload-content-layer,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-payload-content-render,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-meta-signal,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-payload-insights,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-meta-payload-sentiment,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-meta-reactions,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-meta-payload-receipt,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-meta-payload-timestamp {
	display: inline;
	white-space: normal;
	padding: 0 !important;
	margin: 0 !important;
 	vertical-align: top;
        line-height: 1em;
}

.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-payload {
	display: inline;
	vertical-align: middle;
	white-space: normal;
	padding: 0 !important;
	margin: 0 !important;
        line-height: 1em;
}

.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-payload-content-render {
        border: none !important;
	vertical-align: middle !important;
        line-height: 1em;
}

.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-title-heading,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-title-timer time,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-meta-signal,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-meta-payload-sentiment,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-meta-payload-receipt,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-payload-content-render,
.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-meta-payload-timestamp {
	vertical-align: middle;
        line-height: 1em;
}

.jp-app-channel-card-type-mx-event-activity-group .jp-app-channel-card-payload{
	display: inline-block !important;
}

.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-header {
	white-space: normal !important;
	display: inline;
}

.jp-app-channel-card-type-mx-event-activity {
	margin-bottom: 0.5em !important;
}

.jp-app-channel-card-type-mx-event-activity.jp-app-channel-card dl dd::after {
	display: inline !important;
	content: '';
}

/* LEFT SHIFT SETTING */

.jp-app-channel-card-type-mx-event-activity dl {
	display: inline-block;
	text-align: left;
	margin-left: 40px;
	padding: 0 !importang;
	height: auto;

}

.jp-app-channel-card-type-mx-event-activity  dl > dt {
	display: block;
	width: auto !important;
	position: relative; 
	left: -24px;
	top:0;
	margin-right: -24px;

 
	
}

.jp-app-channel-card-type-mx-event-activity  dl > dd {
	display: block!important;
	position: relative;
  

 
}

.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-header {
	white-space: normal !important;
	display: inline;
}

.jp-app-channel-card-type-mx-event-activity .jp-app-channel-card-title-heading {
	display: inline-block !important;
	padding-top: 0px !important;
	vertical-align: top;
	line-height: 100%;
	padding: 0;
	max-width: 12em;
	white-space: nowrap !important;
	overflow: hidden;
	text-overflow: ellipsis;
}




/*  EVENT  MESSAGE */

.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-title-heading,
.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-meta-signal,
.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-payload-insights,
.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-meta-payload-sentiment,
.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-meta-payload-receipt,
.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-meta-payload-timestamp {
	display: block !important;
	white-space: normal;
	padding: 0 !important;
	margin: 0 !important;
	vertical-align: middle;
	line-height: 100%;
	font-weight: 400;
}

.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-payload {
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 10px;
	 
}

.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-payload-insights {
     
}

.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-title-timer,
.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-title-timer time {
	font-size: 90%;
	font-weight: 400;
}

.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-meta-payload-timestamp {
	position: absolute;
	left: -34px;
	top: 5px;
	font-size: 10px;
	text-align: right;
}

.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-meta-payload-receipt {
	position: absolute;
	right: 4px;
	bottom: 4px;
	text-transform: uppercase;
	font-size: 50%;
	color: #ddd;
}




/* LEFT SHIFT SETTING */

.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-header{
	margin-left: 2px;
}

.jp-app-channel-stream-item-event {
	margin-bottom: 0.5em !important;
}



.jp-app-channel-stream-item-event dl dt { /* shift vid and name to the left */
	position: relative;
 
}

.jp-app-channel-card-type-mx-event-message dl {
	display: block;
	text-align: left;
	margin-left: 36px;
}
.jp-app-channel-card-type-mx-event-message dl dt {
	position: relative;
	left: -36px;
	top:0;
	margin-right: -36px;
}

 

 /* RENDERING PAYLOAD */
 


 
 /* A. TEXT RENDERING */

.jp-app-channel-card-type-mx-event-message  .jp-app-channel-card-payload-data-type-text .jp-app-channel-card-payload-content-layer {
	border: 1px solid transparent;
	background: #fff;
	padding: 20px;
	margin-left: 4px;
}

.jp-app-channel-card-type-mx-event-message  .jp-app-channel-card-payload-data-type-text .jp-app-channel-card-payload-content-layer:hover {
	border: 1px solid #dddddd;;
	background: #fff;

}


.jp-app-channel-card-payload-data-type-text .jp-app-channel-card-payload-content-render {
	margin: 0;
	padding: 0;
	border: 0px solid #ff0000;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.jp-app-channel-card-payload-data-type-text .jp-app-channel-card-payload-content-render a {
	-ms-word-break: break-all;
	word-break: break-all;

	// Non standard for webkit
	word-break: break-word;

	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto
 
}

.jp-app-channel-card-payload-data-type-text .jp-app-channel-card-payload-content-render  code {

	unicode-bidi: embed;
	white-space: pre-wrap;

	background: #000;
	border: 1px solid #ddd;
	border-left: 3px solid #f36d33;
	color: #fff;

	page-break-inside: avoid;
	font-family: monospace;
	font-size: 15px;
	line-height: 1.6;
	max-width: 100%;
	overflow: auto;
	padding: 1em 1.5em;
	display: block;
	word-wrap: break-word;
	margin-bottom: 0.5em;
	margin-top: 0.5em;


}

 /* B. SCRIPT - BUTTONS  RENDERING */

.jp-app-channel-card-type-mx-event-message  .jp-app-channel-card-payload-data-type-script .jp-app-channel-card-payload-content-layer {
	border: 1px solid transparent;
	background: #fff;
	padding: 20px;
	margin-left: 4px;
}

.jp-app-channel-card-type-mx-event-message  .jp-app-channel-card-payload-data-type-script .jp-app-channel-card-payload-content-layer:hover {
	border: 1px solid #dddddd;;
	background: #fff;

}


.jp-app-channel-card-payload-data-type-script .jp-app-channel-card-payload-content-render {
	margin: 0;
	padding: 0;
	border: 0px solid #ff0000;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

  
.jp-app-channel-card-payload-data-type-script .jp-app-channel-card-payload-content-render em {
        display: block;
        padding: 0;
        margin-bottom: 1em;
	font-weight: normal;
	font-style: normal; 
	text-decoration:none;
	text-transform: none;
        vertical-align: middle;  

}

 
.jp-app-channel-card-payload-data-type-script   a,
.jp-app-channel-card-payload-data-type-script .jp-app-channel-card-payload-content-render button {
	position:relative;
        display: inline-block;
        width: 100%;
        zoom: 1;
        *display: inline;
        outline:0;
        box-sizing: border-box;
        -webkit-box-sizing:  border-box;
        -moz-box-sizing:  border-box;
	font-weight: normal;
	text-decoration:none;
	text-transform: none;
        vertical-align: middle;
        text-align: center;
	color: #000;
	overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0px 8px;
        font-size: 1em;
        line-height: 2.5em;
        height: 2.5em;
        margin-top: 4px;
        margin-bottom: 4px;
}

.jp-app-channel-card-payload-data-type-script .jp-app-channel-card-payload-content-render a,
.jp-app-channel-card-payload-data-type-script .jp-app-channel-card-payload-content-render button {
         font-family: Sans-Serif;
 	 background: #eee;
 	 background: -moz-linear-gradient(top , #fff, #e6e6e6) repeat scroll 0% 0% transparent;
 	 background: -webkit-linear-gradient(top , #fff, #e6e6e6) repeat scroll 0% 0% transparent;
 	 background: -o-linear-gradient(top , #fff, #e6e6e6) repeat scroll 0% 0% transparent;
 	 background: -ms-linear-gradient(top , #fff, #e6e6e6) repeat scroll 0% 0% transparent;
 	 background: linear-gradient(top , #fff, #e6e6e6) repeat scroll 0% 0% transparent;
	 border: 2px solid #b8b8b8;
	 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
	 border-radius:3px;
	 -moz-border-radius: 3px;
	 -webkit-border-radius: 3px;
}	 


.jp-app-channel-card-payload-data-type-script .jp-app-channel-card-payload-content-render a:hover,
.jp-app-channel-card-payload-data-type-script .jp-app-channel-card-payload-content-render button:hover {

	border: 2px solid #ffffff;
 	background: #e6e6e6;
 	background: -moz-linear-gradient(top , #f0f0f0, #d6d6d6) repeat scroll 0% 0% transparent;
 	background: -webkit-linear-gradient(top , #f0f0f0, #d6d6d6) repeat scroll 0% 0% transparent;
 	background: -o-linear-gradient(top , #f0f0f0, #d6d6d6) repeat scroll 0% 0% transparent;
 	background: -ms-linear-gradient(top , #f0f0f0, #d6d6d6) repeat scroll 0% 0% transparent;
 	background: linear-gradient(top , #f0f0f0, #d6d6d6) repeat scroll 0% 0% transparent;
 	color: #000;
}


.jp-bu:hover {
         color: #ff0000;
}

.jp-bu-render-unmasked {
	 box-shadow: none;
	 border-radius: 0 !important;
         border: none;
/*	 border: 1px solid transparent; */
	 background: transparent;
	 cursor: pointer;
        -webkit-appearance:none;
        -webkit-box-shadow: none;
}
 

/* C. FILE ATTACHMENT RENDERING */

.jp-app-channel-card-payload-data-type-file .jp-app-channel-card-payload-content-render {
	margin: 0;
	padding: 2px;
	border: 0px solid #ff0000;
	word-wrap: break-word;
	overflow-wrap: break-word;
	
		
		background: #ddd;
}

.jp-app-channel-card-payload-data-type-file .jp-app-channel-card-payload-content-render a {
	margin: 0;
	padding: 0;
	border: 1px solid #ff0000;
	word-wrap: break-word;
	overflow-wrap: break-word;
	display: block;
	padding: 0.45em;
	 
		 
		 
}



/* D. IMAGE RENDERING */

.jp-app-channel-card-payload-data-type-image .jp-app-channel-card-payload-content-render {
	margin: 0;
	padding: 0;
	border: 0px solid #ff0000;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

 
/* 1.7 APP - CHANNEL DATA STREAM  */




/* 1.8 APP - CHANNEL DATA CARDS */



/* 1.9 APP - CHANNEL CARDS COMPONENTS - VISUAL ID AND AVATORS */


.jp-app-channel-card-header {
	display: block;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-align: left;
	vertical-align: top;
	padding: 0;
}

.jp-app-channel-card-title {
	display: inline-block;
	vertical-align: middle;
	line-height: 100%;
	padding: 0;
}

.jp-app-channel-card-title-heading {
	display: inline-block !important;
	vertical-align: middle;
	line-height: 100%;
	padding: 0;
	max-width: 10em;
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
}


.jp-app-channel-card-vid-presence {
	position: absolute;
	top:  1px;
	left: 1px;
	font-size: 20px;
	z-index: 9999999 !important;
 }

.jp-app-channel-card-vid-presence svg {
	width: 1em;
	height: 1em;
	vertical-align: middle;
	overflow: hidden;
}	

.jp-app-channel-card-vid {
	display: inline-block !important;
	vertical-align: middle;
	position: relative;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 100%;
	border: 2px solid #ddd;
}

.jp-app-channel-card-vid-render {
	display: inline-block !important;
	position: absolute;
	top:0;
	bottom: 0;
	left:0;
	right:0;

        z-index: 100 !important; 
        padding: 0;
	margin: 0;
	border-radius: 100%;
	text-align:center;
	background-position: 50% 50%;
	background-size: cover;

	overflow: hidden;
	vertical-align: middle;
	-webkit-transition: all 400ms;
	-moz-transition: all 400ms;
	-ms-transition: all 400ms;
	-o-transition: all 400ms;
	transition: all 400ms; 
	border: none;
}

.jp-app-channel-card-vid i {  /* holder for avaator text fallback */
	display: block;
	height: 100%;
	width: 100%;
        z-index: 0 !important; 
	position: absolute;
	top:0;
	bottom: 0;
	left:0;
	right:0;
	text-align:center;

       
        font-family: sans-serif;
        font-weight: bold;
        font-style: normal;
        
        background: #fff;
        color: #ffffff;
 
}

.jp-app-channel-card-vid-scale-48 {
	height: 48px;
	width: 48px;
}
.jp-app-channel-card-vid-scale-32 {
	height: 32px;
	width: 32px;
}

.jp-app-channel-card-vid-scale-24 {
	height: 24px;
	width: 24px;
}

.jp-app-channel-card-vid-scale-16 {
	height: 16px;
	width: 16px;
}

.jp-app-channel-card-vid-scale-48 i {
	line-height: 48px;
	font-size: 1.1em;
	letter-spacing: 1px;
}

.jp-app-channel-card-vid-scale-32 i {
	line-height: 32px;
	font-size: 0.8em;
	vertical-align: middle;
	letter-spacing: 1px;
}

.jp-app-channel-card-vid-scale-24 i {
	line-height: 24px;
	font-size: 0.9em;
	vertical-align: middle;
	letter-spacing: 1px;
}

.jp-app-channel-card-vid-scale-16 i {
	line-height: 16px;
	font-size: 8px;
	vertical-align: middle;
	letter-spacing: 1px;
}






/* BASIC DATA FORMATTING 



change toi REBDER class

*/

.jp-app-channel-card-payload-content-render svg {
width: 1em;
height: 1em;


}

.jp-app-channel-card-payload-content-render a, a:visited {
  background: #efefef;
}

.jp-app-channel-card-payload-content-render img, iframe, object {
	width: auto;
	max-width: 100%;
}

.jp-app-channel-card-payload-content-render blockquote {
  display: block;
  background: #000;
  border-left: 4px solid #ff0000;
  margin-top: -20px;
  margin-left: -20px;
  margin-right: -20px;
  padding-top: 10px;
  padding-left: 16px;
  padding-bottom: 20px;
}

.jp-app-channel-card-payload-content-render blockquote p {
  display: block;
  margin: 0;
  padding-top: 10px;

}

.jp-app-channel-card-payload-content-render .jp-app-channel-tag-mention {
         display: block;
         line-height: 150% !important;
         padding-left: 0;
         padding-right: 0 !important;
         margin: 0;
         white-space: nowrap;
         border-radius: 4px;
         vertical-align: middle;
  }


.jp-app-channel-tag-mention  em,
.jp-app-channel-tag-mention  b,
.jp-app-channel-tag-mention  strong,
.jp-app-channel-tag-mention  a {
	  display: inline-block;
	  line-height: 100% !important;

	  margin-top: 0.10em !important;
	  padding-left: 0.5em;
	  text-decoration: none;
	  color: inherit !important;
	  vertical-align: middle;

  }



.jp-app-channel-tag-mention-label{

  display: inline-block !important;
  vertical-align: middle;
  line-height: 100%;
  padding: 0;
  max-width: 12em;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;

}





/*  1.5 APP - CHANNEL INPUT EDITOR */

/* 2.0  APP - MODALS AND POPUps */

.jp-app-basic-modal {
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        min-width: 180px;
        height: 100%;
        z-index: 90000010;
        transform: translate(0%, 0%);
        margin: 0 auto;
        background: none !important;
}


.jp-app-basic-modal:before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background-color: rgba(0, 0, 0, 0.8);

}


.jp-app-basic-modal img {
        display: block;
        width: auto !important;
        max-height: 100%;
        margin: 0 auto !important;
        position: absolute;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
}

@media (min-width: 1px) and (max-width: 600px) {
   .jp-app-basic-modal-vid .jp-app-channel-card-title {
     display: none;

   }
}

.jp-app-basic-modal-header {
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        padding: 1em;
        text-align: center;
        z-index: 999999999 !important;
        border-bottom: 1px solid #00;
        background: #000;
        color: #fff !important;
    }

  .jp-app-basic-modal-vid  {
     position: absolute;
     top: 25%;
     left: 0.5em;
     font-size: 90% !important;
  }

.jp-app-basic-modal-title {
        margin: 0 auto;
        display: inline-block;
        font-size: 80%;
}
.jp-app-basic-modal-tools {
        position: absolute;
        top: 25%;
        right: 0.5em;
       white-space: nowrap;
}

.jp-app-basic-modal-tools button {
        z-index: 9000000 !important;
        display: inline-block;
        zoom: 1;
        outline:0;
        box-sizing: border-box;
        -webkit-box-sizing:  border-box;
        -moz-box-sizing:  border-box;
        font-weight: normal;
        text-decoration:none;
        text-transform: none;
        margin: 0 !important;
        vertical-align: middle;
        color: #000;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0px 4px;
        margin: 4px !important;
        font-size: 1.2em;
        line-height: 1.2em;
        height: 1.2em;
        width:  1.2em;
        box-shadow: none;
        border-radius: 0 !important;
        border: none;
        background: transparent;
        cursor: pointer;
        -webkit-appearance:none;
        -webkit-box-shadow: none;
        color: #fff !important;
}

.jp-app-basic-modal-tools button  svg{
          fill: #ffffff;
}
.jp-app-basic-modal-tools button  svg:hover{
          fill: #ff0000;
}
.jp-app-placeholder-image-expand {
        position: absolute;
        background: none !important;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%
        height: 100%;
        z-index: 80000;
        border: 1px solid none;
}

.jp-app-placeholder-image-expand:hover {
        border: 1px solid  #DDD;
}