/* Client: multicolour.com                                     */
/* Copyright 20000 Netcomposite ( http://www.netcomposite.com ) */

/*  DEFAULT LINK (URL) */


A.link {
        color: #0000FF;
	font-family: 'Arial', Helvetica, Verdana;
        font-size: 14px; 
        text-decoration: underline;
}

BODY
{
       bgcolor="#ffffff";
       padding: 0.02in;
       margin: 0.02in;
}


table td input[type="text"],
   input[type="password"], 
   select, 
   textarea {

  background-color: #fff;
  border: 1px solid #999 !important;
  margin: 0;
}

/* BODY HEADLINE,BANNER AND LARGE TEXT */


.HTITLE {
         color: #000000;
	 font-family: 'Arial', Helvetica, Verdana;
	 font-size: 17px;
         text-decoration: none;
         font-weight: bold;
}

/* COLUMN HEADLINE,BANNER AND LARGE TEXT */


.H2TITLE {
         color: #000000;
	 font-family: 'Arial', Helvetica, Verdana;
	 font-size: 16px;
         text-decoration: none;
         font-weight: bold;
}

.H2TITLE:hover {
        color: #FF0000;
	font-family: 'Arial', Helvetica, Verdana;
	font-size: 16px;
        text-decoration: underline;
        font-weight: bold;
}
.H2TITLE:active {
        color: #0000FF;
	font-family: 'Arial', Helvetica, Verdana;
	font-size: 16px;
        text-decoration: underline;
        font-weight: bold;
}


/* COLUMN HEADLINE,BANNER AND LARGE TEXT */


.HGTITLE {
         color: #336699;
	 font-family: 'Arial', Helvetica, Verdana;
	 font-size: 15px;
         text-decoration: underline;
         font-weight: bold;
}

.HGTITLE:hover {
        color: #FF0000;
	font-family: 'Arial', Helvetica, Verdana;
	font-size: 15px;
        text-decoration: underline;
        font-weight: bold;
}
.HGTITLE:active {
        color: #0000FF;
	font-family: 'Arial', Helvetica, Verdana;
	font-size: 15px;
        text-decoration: underline;
        font-weight: bold;
}


/* SUPER NOTES */

.H3TITLE {
        color: #000000;
        font-family: 'arial', verdana;
	font-size: 19px;
	font-weight: bold;
	text-decoration: none;
}

/* TITLE OR HEADLINES - BLACK COLOR */


.TITLE {
        color: #000000;
        font-family: 'Verdana', Helvetica, Arial;
	font-size: 13px;
	text-decoration: none;
	font-weight: bold;
}
.TITLE:hover {
        color: #FF0000;
        font-family: 'Verdana', Helvetica, Arial;
	font-size: 13px;
	text-decoration: underline;
	font-weight: bold;
}
.TITLE:active {
        color: #0000FF;
        font-family: 'Verdana', Helvetica, Arial;
	font-size: 13px;
	text-decoration: underline;
	font-weight: bold;
}

/* TOP ITEMS TITLES- BLACK COLOR */


.TOPTITLE {
        color: #000000;
        font-family: 'Verdana', Helvetica, Arial;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}
.TOPTITLE:hover {
        color: #000000;
        font-family: 'Verdana', Helvetica, Arial;
	font-size: 12px;
	font-weight: bold;
	text-decoration: underline;
}
.TOPTITLE:active {
        color: #ff0000;
        font-family: 'Verdana', Helvetica, Arial;
	font-size: 12px;
	font-weight: bold;
	text-decoration: underline;
}

.STRIKE {
        color: #808080;
        font-family: 'Verdana', Helvetica, Arial;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}


/* LINK (URL)  FOR TITLES, HEADLINES- BLUE COLOR */

.BTITLETEXT {
        color: #000000;
        font-family: 'Verdana', Helvetica, Arial;
	font-size: 12px;
}
	
.BTITLE {
        color: #336699;
        font-family: 'Verdana', Helvetica, Arial;
	font-size: 12px;
	text-decoration: underline;
}
.BTITLE:hover {
        color: #ff0000;
        font-family: 'Verdana', Helvetica, Arial;
	font-size: 12px;
	text-decoration: underline;
}
.BTITLE:active {
        color: #ff0000;
        font-family: 'Verdana', Helvetica, Arial;
	font-size: 12px;
	text-decoration: underline;
}

/* ADDITION FOR THE ITEM LINK IF NEW, COUNT , OR SPECIAL TEXT */

.BTITLEALL {
        color: #336699;
        font-family: 'Verdana', Helvetica, Arial;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}


.BTITLENEW {
        color: #ff0000;
        font-family: 'Verdana', Helvetica, Arial;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}


/* LINK (URL)  FOR INACTIVE TITLES, HEADLINES- BLUE COLOR */

.PBTITLE {
        color: #999999;
        font-family: 'Verdana', Helvetica, Arial;
	font-size: 12px;
	text-decoration: underline;
}
.PBTITLE:hover {
        color: #ff0000;
        font-family: 'Verdana', Helvetica, Arial;
	font-size: 12px;
	text-decoration: underline;
}
.PBTITLE:active {
        color: #FF0000;
        font-family: 'Verdana', Helvetica, Arial;
	font-size: 12px;
	text-decoration: underline;
}


/*  PRICE HIGHLIGHT, OFFER, ETC - RED COLOR*/

.SPECIAL {
        color: #ff0000;
	font-family: 'Arial', Helvetica, Verdana;
	font-size: 14px;
	text-decoration: none;
	font-weight: bold;
}

/* NOT IMORTANT LINKS (URL) , SILVER COLOR */

.FLINK {
        color: #808080;
        font-family: 'helvetica', verdana, arial;
	font-size: 11px;
	text-decoration: none;
}
.FLINK:hover {
        color: #000000;
        font-family: 'helvetica', verdana, arial;
	font-size: 11px;
	text-decoration: underline;
}
.FLINK:active {
        color: #ff0000;
        font-family: 'helvetica', verdana, arial;
	font-size: 11px;
	text-decoration: undeline;
}

/* VERTICAL LIST SEPARATOR, USED TO SEPARATE TEXT LINKS, SILVER COLOR */

.FLINKSEPARATOR {
        color: #808080;
        font-family:  arial;
        font-size: 14px;
}

/* MAIN TEXT MASSIVE - SMALL */

.BDESC {
       color: #000000;
       font-family: 'Arial', Helvetica, Verdana;
       font-size: 12px; 

 
}

.BDESCLINK {
        color: #0000ff;
	font-family: 'Arial', Helvetica, Verdana;
        font-size: 12px; 
        font-weight: normal;
	text-decoration: underline;

}
.BDESCLINK:hover {
        color: #ff0000;
	font-family: 'Arial', Helvetica, Verdana;
        font-size: 12px; 
        font-weight: normal;
	text-decoration: underline;

}
.BDESCLINK:active {
        color: #ff0000;
	font-family: 'Arial', Helvetica, Verdana;
        font-size: 12px; 
        font-weight: normal;
	text-decoration: underline;
}



/* MAIN TEXT MASSIVE SMALL - GREEN COLOR*/

.GBDESC {
       color: #00b04e;
       font-family: 'Arial', Helvetica, Verdana;
       font-size: 11px; 
       text-decoration: none;
       font-weight: normal;
}

/* MAIN TEXT MASSIVE SMALL - BLUE COLOR*/

.BLBDESC {
       color: #0000ff;
       font-family: 'Arial', Helvetica, Verdana;
       font-size: 12px; 
       text-decoration: none;
       font-weight: normal;
}


/* MAIN TEXT MASSIVE SMALL - RED COLOR*/

.RBDESC {
       color: #ff0000;
       font-family: 'Arial', Helvetica, Verdana;
       font-size: 12px; 
       font-weight: normal;
       text-decoration: none;
}

/* LARGE ARTICLE TEXT  STYLE  */

.BODYDESC {
       color: #000000;
       font-family: 'Arial', Helvetica, Verdana;
       font-size: 14px; 
       text-decoration: none;
}

.GBODYDESC {
       color: #00b04e;
       font-family: 'Arial', Helvetica, Verdana;
       font-size: 14px; 
       text-decoration: none;
}
.RBODYDESC {
       color: #ff0000;
       font-family: 'Arial', Helvetica, Verdana;
       font-size: 14px; 
       text-decoration: none;
}


.FBODYDESC {
       color: #808080;
       font-family: 'Arial', Helvetica, Verdana;
       font-size: 14px; 
       text-decoration: none;
}


.BODYDESCLINK {
        color: #0000FF;
	font-family: 'Arial', Helvetica, Verdana;
        font-size: 14px; 
        text-decoration: underline;
}
.BODYDESCLINK:hover {
        color: #ff0000;
	font-family: 'Arial', Helvetica, Verdana;
	font-size: 14px;
	text-decoration: underline;

}
.BODYDESCLINK:active {
        color: #ff0000;
	font-family: 'Arial', Helvetica, Verdana;
	font-size: 14px;
	text-decoration: underline;
}

/* FOOTER TEXT STYLE */

.FOOTER {
          color: #000000;
          font-family: 'Arial', Verdana;
          font-size: 14px;
          text-decoration: none;      	   
	  	   
}
/* FOOTER TEXT STYLE */

.FOOTERLINK {
          color: #336699;
          font-family: 'Arial', Verdana;
          font-size: 14px;
          text-decoration: underline;      	   
}

.FOOTERLINK:hover {
          color: #336699;
          font-family: 'Arial', Verdana;
          font-size: 14px;
          text-decoration: underline;      	   
}

.FOOTERLINK:active {
          color: #336699;
          font-family: 'Arial', Verdana;
          font-size: 14px;
          text-decoration: underline;      	   
}


/* FOLLOWING STYLES REPRESENT BULLET LISTS APPEARANCE */
/* |||||||||||||||||||||||||||||||||||||||||||||||||| */

.UL1    {   
        color: #cccce5;
        list-style-type: square;
        margin-left : 0.20in;
                
        }

LI
   {
        MARGIN-TOP : 0.02in;
        } 

.ULTITLE {
        color: #336699;
        font-family: 'verdana', arial;
	font-size: 12px;
	font-weight: bold;
	text-decoration: underline;
}
.ULTITLE:hover {
        color: #ff0000;
        font-family: 'verdana', arial;
	font-size: 12px;
	font-weight: bold;
	text-decoration: underline;
}
.ULTITLE:active {
        color: #ff0000;
        font-family: 'verdana', arial;
	font-size: 12px;
	font-weight: bold;
	text-decoration: underline;
}
/* |||||||||||||||||||||||||||||||||||||||||||||||||| */



/* TEXT FIELDS STYLE WITH  BORDERS*/

#BOX { 
	color: #000000; 
	width: 120px;
	padding: 0px;
	margin: 0px;
}
#BOX2 { 
	color: #000000; 
	width: 100%;
	padding: 0px;
	margin: 0px;
}

#BOX3 { 
	color: #000000; 
	width: 30px;
	padding: 0px;
	margin: 0px;
}


/* SPECIAL COMMENTS , USING J.JS FILE*/

#bar {
         position: absolute; 
	 z-index: 150; 
	 visibility: hidden; 
	 top: 0px; 
	 left: 0px;
	 }
	 
	 
	 
	 

/* ===========================================
	Jrole User Interface CSS Framework
	Output  : Uncompressed
	Theme   : JOMA adapter prototypes
	File    : jr-app-joma-3.0.css
	Version : 4.0.0.1
	Author  : Netcomposite http://www.netcomposite.com/
   =========================================== */


/*


*  0. MC THEME PATCH

*/


td input[type="text"], 
td input[type="password"], 
td select, 
td textarea,
td iframe {	
	
        background-color: #fff; /* default rendering */	
 	border: 1px solid #999; 	
	margin: 0;
	*display: inline;
	margin: 0;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 1.0em;
	font-weight: 400;
	text-align: left;
	vertical-align: text-top !important;
	vertical-align: top;
	color: #000;
	height: auto !important;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;

}


/*
*  1. BASIC MARKUP AND LAYOUT
*/

/*
*  COLOR PALLETE
*
*  Red:  #c2185b rgb(194,24,91)
*  Pink: #ec407a  rgb(236,64,122)
*  Pink light: #ff77a9  rgb(255,119,169)
*  Pink nude: #f48fb1 rgb(244,143,177)  
*  Dark grey:  #444c5c  
*
*/


html [data-app-theme="standalone-portlet"] {
     margin: 0 auto;
     max-width: 100% !important; /* for video background */
     min-width: 319px !important; /* for smallest mobile device screen size */
     -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;       

} 

/*
*   BASIC TYPOGRAPHY
*/

html [data-app-theme="standalone-portlet"] {
     font-family: 'Arial', sans-serif;
     font-size: 100%;                  /* 1 90% */
     line-height: 125%;                /* font size + 50% */
     -webkit-text-size-adjust: 100%;   /* 2 */
     -ms-text-size-adjust: 100%;       /* 2 */
     text-transform: normal;
     letter-spacing: normal;

} 

[data-app-theme="standalone-portlet"] a  {
      text-decoration: none;
}

[data-app-theme="standalone-portlet"] h1 {
     font-size: 1.5em;
     line-height: 1.44em;
     margin-bottom: 1.5em;
     font-weight: bold;
}     
[data-app-theme="standalone-portlet"] h2 {
     font-size: 1.3em;
     line-height: 1.44em;
     margin-bottom: 1.25em;
} 
[data-app-theme="standalone-portlet"] h3 {
     font-size: 1.25em;
     line-height: 1.25em;
     margin-bottom: 0;
     padding-bottom: 0;
}
[data-app-theme="standalone-portlet"] h4 { 
     font-size: 1.125em;
     font-weight: 600;
}
[data-app-theme="standalone-portlet"] h5, h6 {
    font-size: 1.15em; 
}

[data-app-theme="standalone-portlet"] p  {
      margin-top: 1em;
      line-height: 150%;
}


[data-app-theme="standalone-portlet"] dl dt {
     padding-bottom: 1em;
     font-weight: 600;
}

[data-app-theme="standalone-portlet"] dl dd {
     padding-bottom: 0.5em; 
     line-height: 1.5em;
     font-weight: 400;
}

[data-app-theme="standalone-portlet"] ul li {
      display: block;
      width: 100%;
      padding: 0.5em;
      padding-left: 0;
      margin:0;
      text-align: left;
      position: relative;
      font-size: inherit;
      font-weight: normal;
      text-decoration: none;
      text-transform: none;
      overflow: hidden;
      border: none;
}

/*
*  2. BASIC RESET
*/

 


/* Apply a natural box layout model to all elements */

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;}
blockquote, q {
	quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none; }

/*  Prevent mobile browser to zoom page on focus */

input[type="text"]:focus, input[type="text"]:hover {
font-size: 100%; /* Adding 16px on focus/hover will prevent page zoom */
}

/* Removes excess padding in IE 8/9. */

input[type="checkbox"],   
input[type="radio"] {
    box-sizing: border-box; 
    padding: 0; 
    margin-right: 0.5em; /* add white space between input and label */
}

/*  Removes inner padding and search cancel button in Safari 5 , Chrome  for OSX */
 
input[type=search]::-webkit-search-cancel-button, 
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
     -webkit-appearance:none;
      margin: 0;
}

/*
 * Removes IE10 specific decorations 
 */

input::-ms-clear{
       display:none;
}

::-ms-reveal {      /* do not show the eye for password inputs */
    width : 0;
    height: 0;
}

::-ms-clear {       /* do not show the x for text inputs */
    width : 0;
    height: 0;
}

/*
 * 1. Corrects font family not being inherited in all browsers.
 * 2. Corrects font size not being inherited in all browsers.
 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
 */

button,
input,
select,
textarea {
    font-family: inherit; 
    font-size: 100%;
    margin: 0; 
}

/*
 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal !important;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled],
input[disabled] {
    cursor: default;
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}


input[type=datetime-local]::-webkit-inner-spin-button,
input[type=datetime-local]::-webkit-outer-spin-button,
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button,
input[type=month]::-webkit-inner-spin-button,
input[type=month]::-webkit-outer-spin-button,
input[type=week]::-webkit-inner-spin-button,
input[type=week]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
      margin: 0;
}
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=week]::-webkit-calendar-picker-indicator {
     -webkit-appearance: none;
     display: none;
     margin: 0;
}
input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance:none; 
     -moz-apperance: none; 
      display: none;
}
input[type="range"]::-ms-track,
input[type="range"]::-ms-thumb {
       display: none;
}
input[type="range"], 
input[type="color"] {
       appearance: textfield;    
       -moz-appearance: textfield;
      -webkit-appearance: textfield; 
}

textarea, 
select, 
input[type="radio"],
input[type="checkbox"],
input[type="file"],
input[type="password"], 
input[type="date"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="month"], 
input[type="week"],
input[type="number"], 
input[type="search"], 
input[type="tel"], 
input[type="text"], 
input[type="time"], 
input[type="email"], 
input[type="url"],
input[type="range"], 
input[type="color"]{
       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;
}



/*  ==============================
    Establish consistent typography
    ==============================*/

/*
* Placeholders consistency
* On focus color should be the same as input background to hide placeholder
*/

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #000;
}
input:focus::-webkit-input-placeholder { 
    color: #fff !important; 
}

:-moz-placeholder {   /* Mozilla Firefox 4 to 18 */
    opacity: 1;
    color:    #000;
}
input:focus:-moz-placeholder { 
    opacity: 1;
    color: #fff !important;  
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    opacity: 1;
    color:    #000;
}
input:focus::-moz-placeholder {
    color:    #fff;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #000;
}
input:focus:-ms-input-placeholder { 
    color: #fff; 
}


/* 
 *  Elements default appearance
 *
 */


textarea, 
select, 
input[type="file"],
input[type="password"], 
input[type="date"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="month"], 
input[type="week"],
input[type="number"], 
input[type="search"], 
input[type="tel"], 
input[type="text"], 
input[type="time"], 
input[type="email"], 
input[type="url"],
input[type="range"], 
input[type="color"]{
      display: inline-block;
      zoom: 1;
     *display: inline; /* Hack for IE */
      vertical-align: middle;     
      margin:0;
      
      font-size: 1em;
      padding:  8px;  /* Controls size of input and should be only in PX */ 
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;           
      border: 1px solid transparent;
      background-color: transparent;
      color:#000;      
 }
 
 
 
/*
*  3. APP  - CHANNEL BASIC SETTINGS
*/
 

/* 3.1 RESPONSIVE VIEWPORT DIMENSION SETTINGS */ 


@media (min-width: 1200px) { 

[data-app-placement-widget="bottom::right"] {
	width: 390px !important; 
	height: 95dvh !important;
	z-index: 999999;
	 }
}


@media (min-width: 481px) and (max-width: 1199px) {

body {background-color: #ffffff !important;}

[data-app-placement-widget="bottom::right"] {
	width: 359px !important; 
	height: 80dvh !important;
	z-index: 999999;
	 }
}


@media (max-width: 480px)  {

[data-app-placement-widget="bottom::right"] {
	bottom: 0px !important; 
	right: 0px !important; 
	width: 100% !important; 
	height: 100dvh !important;
	z-index: 999999;
	 }

}

@media  (max-height: 480px){

body {background-color: #ffffff !important;}
[data-app-placement-widget="bottom::right"] {
	bottom: 0px !important; 
	right: 0px !important; 
	width: 100% !important; 
	height: 100dvh !important;
	 }
  
}


 
@media screen 
and (min-device-width : 320px) 
and (max-device-width : 640px) 
  and (orientation: portrait) {


body {background-color: #000ff !important;}

[data-app-placement-widget="bottom::right"]
         zoom: 2 !important;{
	bottom: 0px !important; 
	right: 0px !important; 
	width: 100% !important; 
	height: 100dvh !important;
	 
	 }
	 
}

 

/* 3.2 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;
	max-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: 99.9dvh; /* 1 point less to prevent panel content overflow */
	overflow: hidden;
	position: relative;
}

.jp-app-widget-web .jp-app-widget-web-channel-panel-layer {
        height: auto;
        min-height: 100%;
        

    	display: flex;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
                flex: 1 1 auto; 		
		max-height: 100dvh;  
	flex-direction: column;
/*    */


}
.jp-app-widget-web .jp-app-channel-stream { 
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	padding-bottom: 1.5em !important;
	flex-grow: 1;


}

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

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


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

.jp-app-view-invsible {
	display: none;

}

.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
}


div.jp-app-widget-web-channel-datacard-meter {
    position: absolute;
    bottom: 0;
	box-sizing: content-box;
	width: 100%;
	height: 4px;
	line-height: 4px; /* Added here to enable vertical text align, and is equal to height value */;
	background: #00008B;
	border: 0px #333 solid;
	border-radius: 0px;
	padding: 1px;
	text-align: center;
}

div.jp-app-widget-web-channel-datacard-meter > span {
	display: block;
	height: 100%;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	background-color: rgb(43, 194, 83);
	position: relative;
	overflow: hidden;
	font-size: 0%;
}

div.jp-app-widget-web-channel-datacard-meter > span.jp-app-widget-web-channel-datacard-meter-progress {
	width: calc(var(--meter-value) * 1%);
}

div.jp-app-widget-web-channel-datacard-meter > span.jp-app-widget-web-channel-datacard-meter-progress::after {
	counter-reset: meter var(--meter-value);
	content: counter(meter) '...';
}

div.jp-app-widget-web-channel-datacard-meter > span.jp-app-widget-web-channel-datacard-meter-progress[style*="100"] {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}


/*  1.1 APP - CHANNEL PAGE PLACEMENT */

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


[data-app-placement-app-prompt="bottom::right"] {display: block; position: fixed; bottom: 20px; right: 20px;}
[data-app-placement-widget="bottom::right"] {
	border: 0px solid #ff0000; 
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	position: fixed !important;
	bottom: 20px; 
	right: 15px; 
	width: 375px; 
	height: 75dvh;
	z-index: 999999;
}
 
[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: 0px;}
[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: #E8EAF6; /* 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;
}

/* EVENT MENU COLOR  */

.jp-app-channel-card-payload-tools-menu {
	background: #000;
	color: #fff;
}	

/*  1.2.3 HIGHLIGHT CONTENT */

[data-card-highlight="mx::advert"],        /* PROMOTION AND ADVERTISING */    
[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-intent-highlight="statement::neutral"], /* DOES NOT EXPRESS ANY POSITIVE OR NEGATIVE OPINION */    
[data-intent-highlight="statement::alert"],   /*    */   
[data-intent-highlight="statement::warning"],  /*  */   
[data-intent-highlight="statement::error"],    /*  USED TO HIGHLIGHT   */   
[data-intent-highlight="statement::success"],  /*    */   
[data-intent-highlight="statement::notice"],   /*   */   
[data-intent-highlight="statement::closed"],    /* USED TO HIGHLIGHT ARCHIVE OR CLOSED DIALOGIES  */   
[data-intent-highlight="statement::selection"]{}  /* USED FOR DIALOGUE WITH MULTIPLE CHOICES */   


/* ADVERT - EXTERNAL */

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

}

/* SYSTEM MESSAGE */ 

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

}

/* VIRTUAL AGENT */

[data-card-highlight="mx::agent"] .jp-app-channel-card-payload-content-layer,
[data-card-highlight="mx::agent"] .jp-app-channel-card-meta-sentiment,
[data-card-highlight="mx::agent"] .jp-app-channel-card-payload-reactions-type-emotives,
[data-card-highlight="mx::agent"] .jp-app-channel-card-payload-reactions-type-comment-signal,
[data-card-highlight="mx::agent"]  .jp-app-channel-card-payload-data-type-media .jp-app-channel-card-payload-content-layer {
	margin-left: 4px !important;
	background: #5a87a5 !important;
	color: #fff;
	
}
[data-card-highlight="mx::operator"]  .jp-app-channel-card-payload-reactions-type-metrics {
	background: #0060df;
	color: #fff;
	margin-left: 4px !important;
}

/*  OPERATOR */

[data-card-highlight="mx::operator"] .jp-app-channel-card-payload-content-layer, 
[data-card-highlight="mx::operator"] .jp-app-channel-card-meta-sentiment,
[data-card-highlight="mx::operator"] .jp-app-channel-card-payload-reactions-type-emotives,
[data-card-highlight="mx::operator"] .jp-app-channel-card-payload-reactions-type-comment-signal,
[data-card-highlight="mx::operator"]  .jp-app-channel-card-payload-data-type-media .jp-app-channel-card-payload-content-layer {
	background: #3e5d73 !important;
	color: #fff;
	margin-left: 4px !important;
}

[data-card-highlight="mx::operator"]  .jp-app-channel-card-payload-reactions-type-metrics {
	background: #0060df;
	color: #fff;
	margin-left: 4px !important;
}


/* SUBSCRIBER */

[data-card-highlight="mx::subcriber"] .jp-app-channel-card-payload-content-layer, 
[data-card-highlight="mx::subcriber"] .jp-app-channel-card-meta-sentiment,
[data-card-highlight="mx::subcriber"] .jp-app-channel-card-payload-reactions-type-emotives,
[data-card-highlight="mx::subcriber"]  .jp-app-channel-card-payload-data-type-media .jp-app-channel-card-payload-content-layer {
	background: #f1f7ff !important;
	color: #000;
	margin-left: 4px !important;
}
[data-card-highlight="mx::subcriber"] .jp-app-channel-card-payload-reactions-type-emotives span,
[data-card-highlight="mx::subcriber"] .jp-app-channel-card-payload-reactions-type-emotives svg,
[data-card-highlight="mx::subcriber"] .jp-app-channel-card-payload-reactions-type-emotives img { 
	color: #000;
	fill: #000;
	stroke: #000 !important;
}
[data-card-highlight="mx::subcriber"]  .jp-app-channel-card-payload-reactions-type-metrics {
	background: #0060df;
	color: #fff;
	margin-left: 4px !important;
}

/* MESSAGES INTENT HIGHLIGHT */

/* SYSTEM AGENT - ERROR */

[data-intent-highlight="statement::error"] .jp-app-channel-card-payload-content-layer,
[data-intent-highlight="statement::error"] .jp-app-channel-card-meta-sentiment,
[data-intent-highlight="statement::error"] .jp-app-channel-card-payload-reactions-type-emotives,
[data-intent-highlight="statement::error"] .jp-app-channel-card-payload-reactions-type-metrics {
	background: #D32F2F !important;
	color: #fff;
}

[data-intent-highlight="statement::closed"] .jp-app-channel-card-payload-content-layer {
	background: #bdc1c2 !important;
	color: #e4e7e9;
}

[data-intent-highlight="statement::closed"]  .jp-app-channel-card-payload-content-render em {
	display: block;
	font-size: 90%;
	font-style: italic;
	line-height: 100%;
	padding-top: 0.5em;
	 

}

[data-intent-highlight="statement::success"] .jp-app-channel-card-payload-content-layer {
	background: #089948 !important;
	color: #fff;
}


[data-intent-highlight="statement::selection"] .jp-app-channel-card-payload-content-layer {
	background: #2196F3 !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 */

.jp-app-channel-stream-item-signal .jp-app-channel-card-payload-reactions,
.jp-app-channel-stream-item-signal .jp-app-channel-card-payload-reactions-type-emotives,
.jp-app-channel-stream-item-signal .jp-app-channel-card-payload-reactions-type-metrics,
.jp-app-channel-stream-item-signal .jp-app-channel-card-payload-reactions-type-comment {
	padding:0 !important;
	margin:0 !important;
}


[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%;}
 

div[data-marker-id="signal::prompt::staging"],
[data-marker-id="signal::prompt::staging"] button {
	color: #ffffff;
	cursor: wait !important;
	pointer-events: none;
}

[data-marker-id="signal::prompt::staging"] {
	--borderWidth: 3px;
	background: #1D1F20;
	position: relative;
	border-radius: var(--borderWidth);
}
[data-marker-id="signal::prompt::staging"]:after {
	content: '';
	position: absolute;
	top: calc(-1 * var(--borderWidth));
	left: calc(-1 * var(--borderWidth));
	height: calc(100% + var(--borderWidth) * 2);
	width: calc(100% + var(--borderWidth) * 2);
	background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
	border-radius: calc(2 * var(--borderWidth));
	z-index: -1;
	-webkit-animation: animatedgradient 3s ease alternate infinite;
	  animation: animatedgradient 3s ease alternate infinite;
	background-size: 300% 300%;
}


@-webkit-keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


/*  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: auto;
	position: relative;
	padding: 0px;
	overflow: hidden
 }
 
 .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: 0;
	border: 0px solid #c0c0c0;
 }

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

}

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

}

.jp-app-placeholder-attachment span {
	display: block;
	margin: 20px;
	position: relative;
	padding: 0px;
	padding-left: 20px;
	font-size: 100%;
	line-height:110%;
	font-weight: 400;
	white-space: collapse;
	word-break: break-all;


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

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


.jp-app-placeholder-image {
	position: relative;
	display: flex;
	justify-content: center;
	padding: 0% !important;
	height: auto;
	min-height: 75px;
	padding: 0;
	margin: 0;
	text-align: center;

}

.jp-app-placeholder-image img{ 
	max-height: 100%;
	max-width: 100%;
	position: relative;
	margin: 0 auto;
	margin: auto;
	border: none;
}

.jp-app-placeholder-video {
	position: relative;
	display: flex;
	justify-content: center;
	padding: 0% !important;
	height: auto;
	min-height: 75px;
	padding: 0;
	margin: 0;
	text-align: center;

}

.jp-app-placeholder-video video {
	position: relative !important;
	width: 100% !important;
	height: auto !important;

	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	background-color: #000;  
	cursor: pointer;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

}

.jp-app-placeholder-video video img {
	display: block;
	margin: 0 auto;
	max-height: 100%;
	padding: 0;
	width: 100%;
}


.jp-app-placeholder-barcode {
	position: relative;
	padding: 0;
	height: auto;
	background : #ddd;

}
 
.jp-app-placeholder-barcode img{
        display: block;
 	min-width:  100%;
	min-height: 100%;
	width: 100%;
	height: auto; /*remove to disable retaining ratio */
	position: relative;
	margin: auto;
	padding: 0;
	border: 2px solid #ddd !important;
	background: #fff;
}


 /* 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:180px;
	bottom:14px;
	right: 0;
	margin-right: 100px;
	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)));


}



 
 /* APP - CHANNEL 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; */


	background-color: #2962FF;
	border: none;
	border-radius: 5px;
	text-align: center;
	width: auto !important;
	min-width: 160px;
	height: 40px;
	padding-left: 15px;
	padding-right: 15px;

  }
  
  .jp-app-render-prompt-icon {
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	fill: currentColor;
	overflow: hidden
  
  }
  
  .jp-app-widget-web-prompt-payload  {
	cursor: pointer;
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	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;
	font-size: 16px;
	line-height: 200%;
	font-weight: 600;
	padding: 4px;
	white-space: nowrap;
	text-transform: uppercase;
  
  }
 .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;
  	min-width:  22px;
  	font-size: 10px;
  	line-height: 150%;
  	border-radius: 22px;
  	text-align: center;
  	position: absolute;
  	top: -15px;
  	right: -4px;
  	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;
  	min-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;
  }
  

 
 /* APP - CHANNEL CONSOLE  */
 

.jp-app-widget-web-channel-console {
	z-index: 9999999 !important;
}
.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>:first-child:before{
	content:var(--placeholder);
	display:inline-block;
	height:0;
	opacity:.333;
	overflow:visible;
	pointer-events:none;
	white-space:nowrap;
	width:0
}

.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: #ffffff;
	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;

 }

.jp-app-widget-web-channel-io-box-input-password input[type="password"], input[type="text"] {
		outline: none !important;
		display: inline-block;
		zoom: 1;
		*display: inline;
		margin: 0;
		margin-right: 0px;
		text-overflow: ellipsis;
		overflow: hidden;
		padding: 10px;
		padding-right: 48px;
		font-size: 1.0em;
		font-weight: 400;
		text-align: left;
		vertical-align: text-top !important;
		vertical-align: top;
		border: 1px solid transparent;
		background-color: transparent;
		color: #000;
		width: 100%;
		height: 100%;
		border: none;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		height: 60px;
		max-height: 240px;
		border: 1px solid transparent;
}


/* 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-auth-view,
.jp-app-widget-web-channel-io-box-upload  {
	cursor: pointer;
	background: #0060df;
	position: absolute;
	top: -36px;
	left: 1px;
	border-style: solid;
	border-color: #ddd;
	border-width: 1px;
	display: block;
	height: 28px;
	width: 28px;
	font-size: 15px;
	line-height: 1.2em;
	border-radius: 26px;
	text-align: center;
	padding: 1px;
	z-index: 9999999;
  

}

.jp-app-widget-web-channel-io-box-upload:hover  {
	background: #0060df;
	border:1px #2196f3 solid;

}	

.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: 4px;
	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;
	padding-right: 40px;
	font-size: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 24px;
	vertical-align:middle;
 
}
 
.jp-app-widget-web-channel-console-signal-definition svg,
.jp-app-widget-web-channel-console-signal-definition img {
	width: 24px;
	height: 24px;
	vertical-align:middle;
}


 /* APP - CHANNEL PANEL LAYOUTS */

 .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: 110% !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;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;	
  }
 
 .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;

}
 

 
 
 
 
 
 
 .jp-app-widget-web-channel-grid {
 		overflow: hidden;
 		margin: 0px;
         padding: 0;
 }
 
 /* jp-app-widget-web-channel-rows (clearfix) */
 
 .jp-app-widget-web-channel-grid .jp-app-widget-web-channel-bar {
       height: 1%; /* trigger hasLayout for IE < 8 */
       clear: both !important;
       position: relative;
 }
 
 .jp-app-widget-web-channel-bar [class*="jp-app-widget-channel-tab"]:first-child {
       margin-left: 0;
 }
 .jp-app-widget-web-channel-bar [class*="jp-app-widget-channel-tab"]:last-child {
       margin-right: 0;
 }
 
 .jp-app-widget-web-channel-grid .jp-app-widget-web-channel-bar:before, .jp-app-widget-web-channel-grid .jp-app-widget-web-channel-bar:after {
      content: " ";
      display: block;
      height: 0;
      visibility: hidden;
 }
 .jp-app-widget-web-channel-grid .jp-app-widget-web-channel-bar:after {
      clear: both;
 }
 
 
 /* jp-app-widget-channel-tabs */
 
 [class*="jp-app-widget-channel-tab"],
 .jp-app-widget-web-channel-grid [class*="jp-app-widget-channel-tab"]{
     position: relative;
     border: none;
     float: left;
 /*  overflow: hidden; test form grid */
 }
 
 .jp-app-widget-channel-tab-1\/10 { width: 10%; }
 .jp-app-widget-channel-tab-1\/9 { width: 11.11%; }
 .jp-app-widget-channel-tab-2\/16, .jp-app-widget-channel-tab-1\/8 { width: 12.5%; }
 .jp-app-widget-channel-tab-2\/15 { width: 13.33%; }
 .jp-app-widget-channel-tab-2\/14, .jp-app-widget-channel-tab-1\/7 { width: 14.28%; }
 .jp-app-widget-channel-tab-2\/13 { width: 15.38%; }
 .jp-app-widget-channel-tab-2\/12, .jp-app-widget-channel-tab-1\/6 { width: 16.66%; }
 .jp-app-widget-channel-tab-2\/11 { width: 18.18%; }
 .jp-app-widget-channel-tab-3\/16 { width: 18.75%; }
 .jp-app-widget-channel-tab-3\/15, .jp-app-widget-channel-tab-2\/10,
 .jp-app-widget-channel-tab-1\/5 { width: 20%; }
 .jp-app-widget-channel-tab-3\/14 { width: 21.42%; }
 .jp-app-widget-channel-tab-2\/9 { width: 22.22%; }
 .jp-app-widget-channel-tab-3\/13 { width: 23.07%; }
 .jp-app-widget-channel-tab-4\/16, .jp-app-widget-channel-tab-3\/12,
 .jp-app-widget-channel-tab-2\/8, .jp-app-widget-channel-tab-1\/4 { width: 25%; }
 .jp-app-widget-channel-tab-4\/15 { width: 26.66%; }
 .jp-app-widget-channel-tab-3\/11 { width: 27.27%; }
 .jp-app-widget-channel-tab-4\/14, .jp-app-widget-channel-tab-2\/7 { width: 28.57%; }
 .jp-app-widget-channel-tab-3\/10 { width: 30%; }
 .jp-app-widget-channel-tab-4\/13 { width: 30.76%; }
 .jp-app-widget-channel-tab-5\/16 { width: 31.25%; }
 .jp-app-widget-channel-tab-5\/15, .jp-app-widget-channel-tab-4\/12,
 .jp-app-widget-channel-tab-3\/9, .jp-app-widget-channel-tab-2\/6,
 .jp-app-widget-channel-tab-1\/3 { width: 33.33%; }
 .jp-app-widget-channel-tab-5\/14 { width: 35.71%; }
 .jp-app-widget-channel-tab-4\/11 { width: 36.36%; }
 .jp-app-widget-channel-tab-6\/16, .jp-app-widget-channel-tab-3\/8 { width: 37.5%; }
 .jp-app-widget-channel-tab-5\/13 { width: 38.46%; }
 .jp-app-widget-channel-tab-6\/15, .jp-app-widget-channel-tab-4\/10,
 .jp-app-widget-channel-tab-2\/5 { width: 40%; }
 .jp-app-widget-channel-tab-5\/12 { width: 41.66%; }
 .jp-app-widget-channel-tab-6\/14,
 .jp-app-widget-channel-tab-3\/7 { width: 42.85%; }
 .jp-app-widget-channel-tab-7\/16 { width: 43.75%; }
 .jp-app-widget-channel-tab-4\/9 { width: 44.44%; }
 .jp-app-widget-channel-tab-5\/11 { width: 45.45%; }
 .jp-app-widget-channel-tab-7\/15 { width: 46.66%; }
 .jp-app-widget-channel-tab-8\/16, .jp-app-widget-channel-tab-7\/14,
 .jp-app-widget-channel-tab-6\/12, .jp-app-widget-channel-tab-5\/10,
 .jp-app-widget-channel-tab-4\/8, .jp-app-widget-channel-tab-3\/6,
 .jp-app-widget-channel-tab-2\/4, .jp-app-widget-channel-tab-1\/2 { width: 50%; }
 .jp-app-widget-channel-tab-8\/15 { width: 53.33%; }
 .jp-app-widget-channel-tab-7\/13 { width: 53.84%; }
 .jp-app-widget-channel-tab-6\/11 { width: 54.54%; }
 .jp-app-widget-channel-tab-5\/9 { width: 55.55%; }
 .jp-app-widget-channel-tab-9\/16 { width: 56.25%; }
 .jp-app-widget-channel-tab-8\/14, .jp-app-widget-channel-tab-4\/7 { width: 57.14%; }
 .jp-app-widget-channel-tab-7\/12 { width: 58.33%; }
 .jp-app-widget-channel-tab-9\/15,
 .jp-app-widget-channel-tab-6\/10,
 .jp-app-widget-channel-tab-3\/5 { width: 60%; }
 .jp-app-widget-channel-tab-8\/13 { width: 61.53%; }
 .jp-app-widget-channel-tab-10\/16, .jp-app-widget-channel-tab-5\/8 { width: 62.5%; }
 .jp-app-widget-channel-tab-7\/11 { width: 63.63%; }
 .jp-app-widget-channel-tab-9\/14 { width: 64.28%; }
 .jp-app-widget-channel-tab-11\/16 { width: 68.75%; }
 .jp-app-widget-channel-tab-10\/15, .jp-app-widget-channel-tab-8\/12,
 .jp-app-widget-channel-tab-6\/9, .jp-app-widget-channel-tab-4\/6,
 .jp-app-widget-channel-tab-2\/3 { width: 66.66%; }
 .jp-app-widget-channel-tab-9\/13 { width: 69.23%; }
 .jp-app-widget-channel-tab-7\/10 { width: 70%; }
 .jp-app-widget-channel-tab-10\/14, .jp-app-widget-channel-tab-5\/7 { width: 71.42%; }
 .jp-app-widget-channel-tab-8\/11 { width: 72.72%; }
 .jp-app-widget-channel-tab-11\/15 { width: 73.33%; }
 .jp-app-widget-channel-tab-12\/16, .jp-app-widget-channel-tab-9\/12,
 .jp-app-widget-channel-tab-6\/8, .jp-app-widget-channel-tab-3\/4 { width: 75%; }
 .jp-app-widget-channel-tab-10\/13 { width: 76.92%; }
 .jp-app-widget-channel-tab-7\/9 { width: 77.77%; }
 .jp-app-widget-channel-tab-11\/14 { width: 78.57%; }
 .jp-app-widget-channel-tab-12\/15, .jp-app-widget-channel-tab-8\/10,
 .jp-app-widget-channel-tab-4\/5 { width: 80%; }
 .jp-app-widget-channel-tab-13\/16 { width: 81.25%; }
 .jp-app-widget-channel-tab-9\/11 { width: 81.81%; }
 .jp-app-widget-channel-tab-10\/12, .jp-app-widget-channel-tab-5\/6 { width: 83.33%; }
 .jp-app-widget-channel-tab-11\/13 { width: 84.61%; }
 .jp-app-widget-channel-tab-12\/14, .jp-app-widget-channel-tab-6\/7 { width: 85.71%; }
 .jp-app-widget-channel-tab-13\/15 { width: 86.66%; }
 .jp-app-widget-channel-tab-14\/16, .jp-app-widget-channel-tab-7\/8 { width: 87.5%; }
 .jp-app-widget-channel-tab-8\/9 { width: 88.88%; }
 .jp-app-widget-channel-tab-9\/10 { width: 90%; }
 .jp-app-widget-channel-tab-10\/11 { width: 90.90%; }
 .jp-app-widget-channel-tab-11\/12 { width: 91.66%; }
 .jp-app-widget-channel-tab-12\/13 { width: 92.30%; }
 .jp-app-widget-channel-tab-13\/14 { width: 92.85%; }
 .jp-app-widget-channel-tab-14\/15 { width: 93.33%; }
 .jp-app-widget-channel-tab-15\/16 { width: 93.75%; }
 .jp-app-widget-channel-tab-16\/16, .jp-app-widget-channel-tab-15\/15,
 .jp-app-widget-channel-tab-14\/14, .jp-app-widget-channel-tab-13\/13,
 .jp-app-widget-channel-tab-12\/12, .jp-app-widget-channel-tab-11\/11,
 .jp-app-widget-channel-tab-10\/10, .jp-app-widget-channel-tab-9\/9,
 .jp-app-widget-channel-tab-8\/8, .jp-app-widget-channel-tab-7\/7,
 .jp-app-widget-channel-tab-6\/6, .jp-app-widget-channel-tab-5\/5,
 .jp-app-widget-channel-tab-4\/4, .jp-app-widget-channel-tab-3\/3,
 .jp-app-widget-channel-tab-2\/2, .jp-app-widget-channel-tab-1\/1 { width: 100%; }
 
 
 /* Fix for nested jp-app-widget-channel-tab "float-drop" bug (Gecko and IE 6+) */
 
 .jp-app-widget-web-channel-grid .jp-app-widget-channel-tab .jp-app-widget-channel-tab {
 		left: 1px;
 		margin-right: -1px;
 
 }
 
 
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/1,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/2,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/3,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/2,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/4,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/5,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/6,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/7,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/8,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/9,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/10{
 		 padding-bottom: 14.28% !important;
 		 height: 0;
 		 position: relative !important;
 
   }
 
 
 .jp-app-widget-channel-io-tab {
 		display:  block !important;
 		width: 100% !important;
 		height:  100% !important;
 		position: absolute;
 		top: 0  !important;
 		bottom: 0px !important;
 		left: 0  !important;
 		right: 0  !important;
 		line-height: inherit !important;
 		border-right: 1px solid #ccc;
 		border-bottom: 1px solid #ccc;
 		font-size: 110%;
 		font-weight: normal;
 		background: #efefef;
 }
 
 .jp-app-widget-channel-io-tab:hover {
 		border-right: 1px solid #ddd;
 		border-bottom: 1px solid #ddd;
 		background:  #fff;
 }
 
 .jp-app-widget-channel-io-tab-active {
 		background:  #fff !important;
 		border-top: 1px solid  #fff;
 
 }
 
 
 .jp-app-widget-web-channel-tabs  a,
 .jp-app-widget-web-channel-tabs  button{
 		display: inline-block;
 		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;
 		margin: 0 !important;
 		vertical-align: middle;
 		color: #000;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		padding: 0px 8px;
 		font-size: 1em;
 		line-height: 2.5em;
 		height: 2.5em;
 		box-shadow: none;
 		border-radius: 0 !important;
 		/*	 border: 1px solid transparent; */
 		cursor: pointer;
 		-webkit-appearance:none;
 		-webkit-box-shadow: none;
 
  }
 
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/1 svg,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/2 svg,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/3 svg,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/2 svg,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/4 svg,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/5 svg,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/6 svg,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/7 svg,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/8 svg,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/9 svg,
 .jp-app-widget-web-channel-tabs .jp-app-widget-channel-tab-1\/10 svg {
 		position: absolute;
 		margin: auto;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
 		display:  block !important;
 		object-fit: contain;
 		max-width: 100%;
 		fill: #000000;
 		width: 22px;
 
   }
 
 
 
 

 

 
 /* APP - STREAM */
 
 .jp-app-widget-web-channel-stream-signal-loader {
	width: 15px;
	aspect-ratio: 1;
	border-radius: 50%;
	animation: l5 1s infinite linear alternate;
	margin: 0 auto;
 
 }
 @keyframes l5 {
     0%  {box-shadow: 20px 0 #000, -20px 0 #0002;background: #000 }
     33% {box-shadow: 20px 0 #000, -20px 0 #0002;background: #0002}
     66% {box-shadow: 20px 0 #0002,-20px 0 #000; background: #0002}
     100%{box-shadow: 20px 0 #0002,-20px 0 #000; background: #000 }
}

 
 .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;
 	margin-bottom: 0.5em !important;
 	clear: both;
 }
/* .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 {
	position: relative;
	padding-left: 4px; 
	border: none;
 
}

.jp-app-channel-card-payload-tools .jp-app-channel-card-payload-tools-expand,
.jp-app-channel-card-payload-tools .jp-app-channel-card-payload-tools-collapse {
        height: 1.5em;
        width: 1.5em;
	position: absolute;
	top: 2px;
	right: 4px;
        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;
        text-align: left;
	overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0px;
        line-height: 100%;
        background: none;
        border: none;
        
}

.jp-app-channel-card-payload-tools .jp-app-channel-card-payload-tools-expand {
        z-index: 99 !important;
}
.jp-app-channel-card-payload-tools .jp-app-channel-card-payload-tools-collapse {
        z-index: 100 !important;
        padding-top: 0.5em;
}

.jp-app-channel-card-payload-tools .jp-app-channel-card-payload-tools-expand button,
.jp-app-channel-card-payload-tools .jp-app-channel-card-payload-tools-collapse button { 
	position: relative;
	display: 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: #fff;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0;
	margin: 0;
	height: 1.5em;
	width: 1.5em;	
	box-shadow: none;
	border-radius: 0 !important;
	border: none;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	-webkit-box-shadow: none;
 }

.jp-app-channel-card-payload-tools .jp-app-channel-card-payload-tools-expand svg,
.jp-app-channel-card-payload-tools .jp-app-channel-card-payload-tools-collapse svg { 
	fill: #ffffff;
	color:  #ffffff;
	stroke:  #ffffff;
	width: 16px;
	height: 16px;
}

.jp-app-channel-card-payload-tools .jp-app-channel-card-payload-tools-expand button:hover svg,
.jp-app-channel-card-payload-tools .jp-app-channel-card-payload-tools-collapse button:hover svg  { 
	fill: #ff0000;
	stroke: #ff0000;
	color:  #ff0000; 
}


.jp-app-channel-card-payload-tools-menu button span,
.jp-app-channel-card-payload-tools-menu button svg {
	color: #ffffff;
	stroke: #ffffff;
  }


.jp-app-channel-card-payload-tools-menu button:hover span,
.jp-app-channel-card-payload-tools-menu button:hover svg {
	color:  #ff0000; 
	stroke: #ff0000;
        fill: #ff0000;	
  }

.jp-app-channel-card-payload-tools-menu button.jp-app-channel-card-option-selected span,
.jp-app-channel-card-payload-tools-menu button.jp-app-channel-card-option-selected svg {
	color:  #ff0000; 
	stroke: #ff0000;
        fill: #ff0000;
}

.jp-app-channel-card-payload-tools-menu {
        border: none;
	height: auto;	
	width: auto;
	padding: 0;
	margin: 0;
 	position: relative;
        z-index: 100 !important;


}

.jp-app-channel-card-payload-tools-menu ul {
	display: block;
 	position: relative;
	list-style: none;
	width: 100% !important;
	overflow: hidden;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding-left: 1em !important;
	padding-top: 0.5em;
        margin: 0;
	padding-right: 0px !important;
	border: none;
	color: #fff;	
	}

.jp-app-channel-card-payload-tools-menu button {
	position:relative;
        display: inline;
        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;
        text-align: left;
	color: #000;
	overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0px;
        padding-bottom: 2px;
        background: none;
        border: none;
        color: #fff;

}



.jp-app-channel-card-payload-tools-menu li svg {
       height: 14px;
       width: 14px;
}
.jp-app-channel-card-payload-tools-menu li span {
        display: inline-block;
        vertical-align: middle;
        font-size: 0.9em;
        line-height: 100%;
        padding-bottom: 4px;
        padding-left: 0.25em;
}

.jp-app-channel-card-meta-payload-receipt .jp-app-channel-card-vid {
	margin-left: -10px !important;
	margin-top: 14px !important;
 
}

/* EVENTS - STREAM */

.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 {

}

/* EVENTS CONSOLE */



 .jp-app-channel-card-type-mx-event-message-reply .jp-app-channel-card-payload-content-render,
 .jp-app-channel-card-type-mx-event-message-comment .jp-app-channel-card-payload-content-render,
 .jp-app-channel-card-type-mx-event-message-edit jp-app-channel-card-payload-content-render {
 		overflow-wrap: normal !important;
 		word-break: normal  !important;
 		padding-left: 0.5em;
 }
 .jp-app-channel-card-type-mx-event-message-reply .jp-app-channel-card-payload-data-type-text .jp-app-channel-card-payload-content-layer {
 		border: 1px solid transparent;
 		border-left: 8px #0060df solid  !important;
 		background: #eee;
 		color: #808080;
 		padding: 0.5em;
 		padding-left: 1em;
 		margin: 0px;
 		max-height: 100px;
 		overflow: hidden;
 		overflow-y: auto;
 		font-size: 110%;
 }
 
  .jp-app-channel-card-type-mx-event-message-comment .jp-app-channel-card-payload-data-type-text .jp-app-channel-card-payload-content-layer {
 		border: 1px solid transparent;
 		border-left: 8px #FFA500 solid  !important;
 		background: #eee;
 		color: #808080;
 		padding: 0.5em;
 		padding-left: 1em;
 		margin: 0px;
 		max-height: 100px;
 		overflow: hidden;
 		overflow-y: auto;
 		font-size: 110%;
 }
 
 
 /* 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-title-heading {
	display: inline-block !important;
	vertical-align: middle;
	line-height: 110%;
	font-size: 120%;
	font-weight: 500;
	padding: 2px;
	max-width: 14em;
        white-space: wrap !important;
 
}

.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%;

}

/* MESSAGE EMPTY LAYERS DEFAULTS */

.jp-app-channel-card-meta-sentiment:empty,
.jp-app-channel-card-payload-reactions-type-emotives:empty,
.jp-app-channel-card-payload-reactions-type-metrics:empty {
	padding: 0 !important;
	margin: !important;
}	

/* 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: 0;
	top:  75%;
 	transform: translate(0, -75%);
}
  
  

/* 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  - POST  */

.jp-app-channel-card-option-selected {}

.jp-app-channel-card-type-mx-event-post .jp-app-channel-card-title-heading,
.jp-app-channel-card-type-mx-event-post .jp-app-channel-card-meta-signal,
.jp-app-channel-card-type-mx-event-post .jp-app-channel-card-payload-insights,
.jp-app-channel-card-type-mx-event-post .jp-app-channel-card-meta-payload-sentiment,
.jp-app-channel-card-type-mx-event-post .jp-app-channel-card-meta-payload-receipt,
.jp-app-channel-card-type-mx-event-post .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-post .jp-app-channel-card-payload {
	position: relative;
	display: block;
	width: 100%;
	margin-bottom: 10px;
	 
}

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

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

.jp-app-channel-card-type-mx-event-post .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-post .jp-app-channel-card-meta-payload-receipt {
	position: absolute;
	right: 4px;
	bottom: 4px;
	text-transform: uppercase;
	font-size: 50%;
	color: #ddd;
}

.jp-app-channel-card-type-mx-event-post dl {
	display: block;
	text-align: left;
	margin-left: 10px;
	margin-right: 10px;
}



/*  PUB RENDERING */

.jp-app-pub {
	margin-top: 0.5em;
}

.jp-app-pub-image{
	position: relative;
	background-attachment: scroll !important;
	background-repeat: no-repeat;
	background-size: cover !important;
	background-position: 50% 50% !important;
	background-repeat: no-repeat !important;
	height: 100% !important;
	background-color: #3b617c !important;
	min-height: 180px;
	padding-bottom: 50% !important;
	margin-top: 0.5em;
	border: 2px solid  #ddd;
}

.jp-app-pub-anchor {
	position: absolute;
	z-index: 999999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	border: 0px solid #3b617c ;
	background: none !important;
}

.jp-app-pub-title {
	padding: 0.5em;
	padding-left: 0;
	padding-bottom: 0.25em;
	color: #000;
	background: #fff;
	font-size: 1.2em;

}

.jp-app-pub-summary {
	padding-left: 0;
	color: #404040;
	line-height: 1.2em;
	background: #fff;
	font-size: 0.9em;

}



/*  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: 0px;
	 
}

.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-payload-insights {
	clear: both;
         
}
.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-payload-insights::after {
	content: "";
	clear: both;
	display: table;
}


.jp-app-channel-card-payload-reactions-type-emotives,
.jp-app-channel-card-payload-reactions-type-metrics,
.jp-app-channel-card-meta-signal-history {
	position: relative;
	display: block;
	padding-top: 0.25em;
}

.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: 80%;
	font-weight: 400;
}


.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-meta-sentiment span {
	display: inline-block; 
	border-radius: 8px; 
	padding: 0.15em; 
	padding-left: 0.5em; 
	padding-right: 0.5em;
	margin-bottom: 0.5em; 
	margin-left: 22px; 
	font-size: 10px;
	text-transform: uppercase; 
	color #ffff; 
	background: #ff0000;
}
.jp-app-channel-card-type-mx-event-message .jp-app-channel-card-meta-payload-timestamp {
	position: absolute;
	left: -30px;
	top: 5px;
	font-size: 10px;
	text-align: right;
}


.jp-app-channel-card-meta-signal {
	position: absolute;
	left: -30px;
	bottom: 0px;
	text-align: right;
	z-index: 90000;
}

.jp-app-channel-card-meta-signal span.jp-app-channel-card-meta-signal {
	color: #fff;
	background-color: #000000;
	border-color: #ddd;
	border-style: solid;
	border-width: 2px;
	display: block;
	height: 20px;
	width: 20px;
	font-size: 10px;
	line-height: 16px;
	border-radius: 20px;
	text-align: center;
	position: absolute;
	top: -10px;
	left: -5px;
	padding: 2px;
	z-index: 9999999;
	white-space: nowrap;
	text-transform: none;
}
.jp-app-channel-card-meta-signal .jp-app-channel-card-meta-signal-activity button {
	position: relative;
	display: 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: #fff;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0;
	margin: 0;
	height: 1.5em;
	width: 1.5em;
	box-shadow: none;
	border-radius: 0 !important;
	border: none;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	-webkit-box-shadow: none;
}
.jp-app-channel-card-meta-signal-activity  sup:empty {
	display: none;
}
.jp-app-channel-card-meta-signal-activity sup {
	color: #fff;
	background-color: #ff0000;
	border-color: #ddd;
	border-style: solid;
	border-width: 1px;
	display: block;
	height: 18px;
	min-width: 18px;
	font-size: 9px;
	line-height: 150%;
	border-radius: 18px;
	text-align: center;
	position: absolute;
	top: -10px;
	left: 50%;
	padding: 2px;
	z-index: 9999999;
}

.jp-app-channel-card-meta-signal .jp-app-channel-card-meta-signal-activity svg {
	fill: #000;
	color: #000;
	stroke: #000;
	width: 16px;
	height: 16px;
}

.jp-app-channel-card-meta-signal .jp-app-channel-card-meta-signal-activity button:hover svg {
	fill: #ff0000;
	color: #ff0000;
	stroke: #ff0000;
}

.jp-app-channel-card-meta-payload-receipt {
	position: absolute;
	left: -28px;
	top: 24px;
	z-index: 999999;
}

.jp-app-channel-card-meta-payload-receipt span{
	vertical-align: middle;
	color: #fff;
	background-color: #404040;
	border-color: #fff;
	border-style: solid;
	border-width: 1px;
	height: 18px;
	width: 18px;
	font-size: 8px;
	line-height: 150%;
	border-radius: 20px;
	text-align: center;
	display: block;
	padding: 2px;
	z-index: 9999999;
	white-space: nowrap;
	text-transform: uppercase;
	

}

.jp-app-channel-card-payload-reactions {
	clear: both;
	
}	



/* RENDERING EVENT METRICS */

.jp-app-channel-card-payload-reactions-type-metrics {
	padding-left: 22px;
	padding-right: 10px;
	padding-top: 6px;
	padding-bottom: 6px;
	position: relative;
	line-height: 18px;

}

.jp-app-channel-card-payload-reactions-type-metrics span {
	position: relative;
	display: inline-block;
	justify-content: center;
	background-color: rgba(255,255,255,0.2);
	border-radius:8px;
	color: #fff;
	font-size: 10px;
	text-transform: uppercase;
	padding: 3px;
	line-height: 12px;
	border: 0px solid #eee;
	margin-bottom: 2px;
}

/* RENDERING INLINE COMMENTS REACTIONS */



.jp-app-channel-card-payload-reactions-type-comment-signal {
        padding-left: 20px;
        padding-bottom: 5px;
}
.jp-app-channel-card-payload-reactions-type-comment-signal button {
	position: relative;
	display: inline-block;
	justify-content: center;
	vertical-align: middle;
	background-color: rgba(255,255,255,0.1);
	border-radius:8px;
	color: #ffffff;
	font-size: 14px;
	padding: 3px;
	padding-left: 5px;
	padding-right: 5px;
	margin-right: 5px;
	line-height: 100%;;
	border: 0px solid #eee;
	margin-bottom: 2px;
	white-space: nowrap;
}
.jp-app-channel-card-payload-reactions-type-comment-signal button:hover {
	background-color: rgba(255,255,255,0.2);

}
.jp-app-channel-card-payload-reactions-type-comment-signal span {
	position: relative;
	display: inline-block;
	justify-content: center;
	vertical-align: middle;
}

.jp-app-channel-card-payload-reactions-type-comment-signal svg,
.jp-app-channel-card-payload-reactions-type-comment-signal img{
	width: 16px;
	height: 16px;
	stroke: #ffffff;
	padding-right: 3px;
	margin-bottom: -2px;
}
 

.jp-app-channel-card-payload-reactions-type-comment-feed {
	margin-left: 4px; 
	padding-left: 20px; 
	padding-right: 0px; 
	border: 0px solid #ddd;
}
.jp-app-channel-card-payload-reactions-type-comment-feed  .jp-app-channel-card-layer dl {
	margin-left: 0 !important
}
.jp-app-channel-card-payload-reactions-type-comment-feed  ul li {
	border-left: 0px solid #000;
	padding-left: 0px;
}
.jp-app-channel-card-payload-reactions-type-comment-feed  dl dt {
	left: 0 !important;
	margin-right: 0px !important;
	margin-bottom: 5px;
}

.jp-app-channel-card-payload-reactions-type-comment-feed  .jp-app-channel-card-title-heading {
	font-size: 80%;
}






/* RENDERING EMOTICONS AND EMOJIES */

.jp-app-channel-card-payload-reactions-type-emotives {
	padding-left: 22px;
	padding-bottom: 6px;
	padding-top: 6px;
	position: relative;
	line-height: 18px;
}

.jp-app-channel-card-payload-reactions-type-emotives button {
		position: relative;
		display: inline-block;
		justify-content: center;
		vertical-align: middle;
		background-color: rgba(255,255,255,0.1);
		border-radius:8px;
		color: #ffffff;
		font-size: 14px;
		padding: 3px;
		padding-left: 5px;
		padding-right: 5px;
		margin-right: 5px;
		line-height: 100%;;
		border: 0px solid #eee;
		margin-bottom: 2px;
		white-space: nowrap;
}
.jp-app-channel-card-payload-reactions-type-emotives button:hover {
		background-color: rgba(255,255,255,0.2);

}
.jp-app-channel-card-payload-reactions-type-emotives span {
		position: relative;
		display: inline-block;
		justify-content: center;
		vertical-align: middle;
}

.jp-app-channel-card-payload-reactions-type-emotives span svg,
.jp-app-channel-card-payload-reactions-type-emotives span img{
		width: 16px;
		height: 16px;
		stroke: #ffffff;
		padding-right: 3px;
		margin-bottom: -2px;
}


	
/* 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 transparent;
	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;
	color: #0000ff;
 
}


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


unicode-bidi: embed;
white-space: pre-wrap;
line-height:1.2em;
border: 0px solid #ddd;
border-left: 4px solid #ddd;
color: #ff0000;
background: #eee;
page-break-inside: avoid;
font-family: monospace;
margin-bottom: 1.0em;
max-width: 100%;
overflow: auto;
padding: 0.5em 1em;
display: block;
word-wrap: break-word;


}

 /* 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;

        padding: 4px 12px;
        font-size: 1em;
        line-height: 100%;
        min-height: 2.5em;
        height: auto;
        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: #eef7fe;
	 border: 2px solid #fff;
	 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 #0c83e1;
	color: #ff0000;

 	}

.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 avator 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 {
        display: inline;
	font-size: 24px;
	line-height: 180%;
	vertical-align: middle;
	letter-spacing: 0px;
}

.jp-app-channel-card-vid-scale-32 i {
        display: inline;
	font-size: 100%;
	line-height: 180%;
	vertical-align: middle;
	letter-spacing: 0px;
}

.jp-app-channel-card-vid-scale-24 i {
        display: inline;
	font-size: 11px;
	line-height: 190%;
	vertical-align: middle;
	letter-spacing: 0px;
}

.jp-app-channel-card-vid-scale-16 i {
        display: inline;
	font-size: 7px;
	line-height: 180%;
	vertical-align: middle;
	letter-spacing: 0px;
}






/* BASIC DATA FORMATTING  */

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

.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: #eee;
	border-left: 6px solid #2d87ff;
	margin-top: -20px;
	margin-left: -20px;
	margin-right: -20px;
	margin-bottom: 20px;
	padding-top: 10px;
	padding-left: 16px;
	padding-right: 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{
	color:  #2d87ff;
	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;
}


/*  DATA CARD   */



.jp-app-widget-web-channel-datacard  {
		position: absolute;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		padding: 0;
		margin: 0;
		min-width: 240px;  
		z-index: 29999999 !important;
		border: 0px solid #ff0000;
		background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
		background-size: 400% 400%;
		animation: data-card-gradient 15s ease infinite;
}

@keyframes data-card-gradient {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
}


.jp-app-widget-web-channel-datacard-header,
.jp-app-widget-web-channel-datacard-body,
.jp-app-widget-web-channel-datacard-footer {
		position:absolute;
		right:0;
		left:0;
}

.jp-app-widget-web-channel-datacard-header{
		height:75px;
		top:0;
		padding-bottom: 8px;

}
.jp-app-widget-web-channel-datacard-footer {
		min-height:50px;
		bottom:0;
}
.jp-app-widget-web-channel-datacard-body{
		top:75px;
		bottom:50px;
		overflow: auto;
		min-height: 100px;
		padding: 1em;
 }

.jp-app-widget-web-channel-datacard-content-render {
         position: relative;
         height: 100%;
	  color: #fff;
         font-size: 100%;
         line-height: 150%;
         padding: 0.5em;
 
}
.jp-app-widget-web-channel-datacard-content-render img {
         width: 100%;
}

/*  DATA CARD TYPE: LOADER  */

.jp-app-widget-web-channel-datacard-content-render-loader {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	padding: 1em;
	padding-top: 2em;
}

.jp-app-widget-web-channel-datacard-loader-message {
	margin: 0 auto;
	padding-top: 2em;
	font-size: 150%;
	line-height: 150%;

}
.jp-app-widget-web-channel-datacard-action {
	display: flex;
	flex-direction: row;
	column-gap: 4px;
	padding: 5px;
	background-color: rgba(0,0,0,0.2);
	padding: 20px;

}
.jp-app-widget-web-channel-datacard-action  button:hover {
	background: #0a6ebd;
	border: 2px solid #fff;
}
.jp-app-widget-web-channel-datacard-action 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-family: Sans-Serif;
	background: #2196F3;
	border: 2px solid #ddd;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;

	font-weight: normal;
	text-decoration: none;
	text-transform: none;
	vertical-align: middle;
	text-align: center;
	color: #fff;
	padding: 12px 18px;
	font-size: 0.9em;
	text-transform: uppercase;
	line-height: 100%;
	min-height: 2.0em;
	height: auto;

}


.jp-app-widget-web-channel-datacard-loader-signal {
	width: 20px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: #2196F3;
	box-shadow: 0 0 0 0 #0004;
	animation: l2 1.5s infinite linear;
	position: relative;
	margin: 0 auto;

}
.jp-app-widget-web-channel-datacard-loader-signal:before,
.jp-app-widget-web-channel-datacard-loader-signal:after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 #0004;
	animation: inherit;
	animation-delay: -0.5s;
}
.jp-app-widget-web-channel-datacard-loader-signal:after {
	animation-delay: -1s;
}
@keyframes l2 {
	100% {box-shadow: 0 0 0 40px #0000}
}