


  .jp-child-padding-42 [data-message-placement="display::screen"] {
    margin: 0 0 0 42px;
    -moz-transition: all 600ms;
    -webkit-transition: all 600ms;
    transition: all 600ms;
  }


  [data-message-placement="display::modal"] {
    position: fixed;
    top: 50%;
    left: 50%;
    padding-left: 40px; /* offset for left menu */
    width: 80%;
    z-index: 10000010;
    transform: translate(-50%, -50%);
    margin: 0 auto;
  }

  [data-message-placement="display::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.5);
  }

  [data-message-placement="display::modal"]:before {
    top: -50vh;
    right: -50vh;
    bottom: -50vh;
    left: -50vh;
  }






.jp-screen-offset {                        /* offset for full screen presentation */
        position: absolute;                /* may need to switch to relative t enable scrolling */
        height: 100% !important;
        width: auto !important;
        z-index: 99999;

        top: 0;
        right: 0px;
        bottom: 0;
        left: 40px;
}

.jp-screen-offset-cover {
        z-index: 99999999 !important;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-top: 7.5%; /* offset nesting content to the middle of the screen */

 }

 .jp-screen-fold {                       /* offset for content target */
 	position: fixed;
 	height: 100%;
 	width: 100%;
 	z-index: 2;

 }

 .jp-screen-fold-cover {
 	height: 100% !important;
 	z-index: 90000000 !important;
 	text-align: center;
 }





/*  MESSAGING  */


/* MESSAGE PLACEMENT */

[data-message-placement="display::cover"]  {
         position: absolute;
		 height: 100% !important;
		 width: auto !important;
		 z-index: 9999999 !important;
		 top: 0;
		 right: 0px;
		 bottom: 0px;
		 left: 0px;
}

[data-message-placement="display::cover"]  .jp-wfl-io-screen-message  {
		position: absolute !important;
		top: 5% !important;
		left: 50% !important;
		width: auto;
		max-width: 480px;
		padding: 1%;
		margin-right: -50% !important;
		transform: translate(-50%, -5%) !important;
		-webkit-transform: translate(-50%, -5%) !important;
		-ms-transform:  translate(-50%, -5%) !important;
		z-index: 9 !important;
		overflow: hidden;

}

.jp-wfl-io-screen-message {
     	text-align: center;
     	padding: 1em;
     	z-index: 100;
}
.jp-wfl-io-screen-message  p {  /* above the fold-header message */
        display: block;
        line-height: 150%;
        padding-top: 1em;

}

.jp-wfl-io-screen-message .jp-bu-panel{
       padding: 1em;

}

/* MESSAGE THEMEING */

[data-message-theme="display::success"]      {background: #43A047 !important; color: #fff !important;}
[data-message-theme="display::warning"]      {background: #FFAB00 !important; color: #fff !important;}
[data-message-theme="display::error"]        {background: #ff0000; color: #fff;}
[data-message-theme="display::information"]  {background: #0066cc; color: #fff;}
[data-message-theme="display::confirmation"]  {background: #FFFFFF; color: #000;}
[data-message-theme="display::request"]        {background: #FFFFFF; color: #000;}


 


/*  Highlight state is edit or compose for widget header */

[data-marker-id="component::content::panel::header"],
[data-marker-id="component::content::panel::header"] div,
[data-marker-id="component::content::panel::header"] button,
div[data-marker-id="component::content::panel::header"],
span[data-marker-id="component::content::panel::header"],
b[data-marker-id="component::content::panel::header"],
a[data-marker-id="component::content::panel::header"] {
	 background: #1b8dff;
         color: #fff !important;
         box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3) !important;

}

[data-marker-id="component::content::panel::header"] div span,
[data-marker-id="component::content::panel::header"] div button,
[data-marker-id="component::content::panel::header"] button,
[data-marker-id="component::content::panel::header"] a,
[data-marker-id="component::content::panel::header"] span {
         color: #fff !important;
         font-weight: normal !important;
}


[data-marker-id="component::content::panel::header"] .jp-bu:hover {
         background: #1565C0;
         box-shadow: inset 0 1px 2px 2px rgba(0, 0, 0, 0.2) !important;

}



.jp-nav-rounded-scale-18 {
    display: inline-block;
    font-size: 18px;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    border-radius: 50%;
    background: #fff;
    vertical-align: middle;
    margin-right: 1em;
    color: #000;
    box-shadow: 3px 3px 3px #ddd;

}

.jp-nav-rounded-scale-18:hover {
    background: #fff;
    box-shadow: 3px 3px 3px #999;
}

.jp-nav-rounded-scale-16 {
    font-size: 16px;
    width: 2.5em;
    height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    border-radius: 50%;
    border-radius:50%;
}
.jp-nav-rounded-scale-16:hover {
     background: #eee;
}

.jp-nav-rounded [data-label-type="label::badge::float"] {
      top: 4px !important;
      left: 25px;
 }




/* USER TOOL BOX START */


[data-viewport-role="box::usw::toolbox"] {
		border: 0px solid #ff0000;
		padding: 1em;
		padding-top:0;
		text-align: right;
		white-space: nowrap;
}


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

}

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


[data-viewport-role="box::usw::root::profile"] {display: none;}
[data-viewport-role="box::usw::toolbox"] {z-index: 90002 !important; position: absolute; top: -81px; right: 29px; text-align: right;}

}

@media (max-width: 480px) { 

[data-viewport-role="box::usw::root::profile"] {display: none;}
[data-viewport-role="box::usw::toolbox"] {z-index: 90002 !important; position: absolute; top: -81px; right: 29px; text-align: right;}
[data-viewport-role="option::jpm::status"] {display: none;}
[data-viewport-role="label::ws::calendar"]  {display: none;}

}




/* USER SWITCHBOARD  START */



[data-viewport-role="box::usw::root::jpms"] .jp-nav-badge {margin: 0.8em !important;}
[data-viewport-role="box::usw::root::ext"] {max-height: 30px;}

.jp-nav-cascade-flow .jp-nav-list-accordion-tab .jp-view-opened {
		border: none;
		margin: 0 !important;

}



.jp-nav-list-accordion-footer {
display: block;
text-align: center;
padding: 0;
}

.jp-nav-list-accordion-tab {
        position: relative;
		border-bottom: 1px solid #999;
		padding: 0em;
		background: #fff;
}

.jp-nav-list-accordion .jp-nav-push-vertical {
     margin: 0 !important;
}

	.jp-nav-list-accordion .jp-nav-dock-pull-left,
	.jp-nav-list-accordion .jp-nav-section,
	.jp-nav-list-accordion .jp-nav-label {
		   padding-left: 0 !important;


}


.jp-nav-list-accordion .jp-nav-badge {margin-right: 0.5em !important;}

.jp-nav-list-accordion .jp-position-overlay  {
    opacity: .95 !important;
    -moz-opacity: .95 !important;
    filter: alpha(opacity=95) !important;
    background: #fff !important;
    border: none !important;
    color: #000 !important;
     min-height: 5em;
 }



.jp-nav-list-accordion {
     	padding: 0;
        background: #fff;
        border: none;
        border-top: none !important;
        height: auto;
/*      max-height: 600px; /* fallback to native scroll in case of very long options list */
        overflow: hidden;
        overflow-x: unset;
        overflow-y: auto;


		position: absolute;
		z-index: 999999 !important;
		left:  0;
		right: 0;
		width: auto;
		top: auto;
		margin: 1px;
		margin-top: -2px;


}

.jp-nav-list-accordion  .jp-wfl-io-picker,
.jp-nav-list-accordion  ul,
.jp-nav-list-accordion  ol {
        postion: relative;
        display: block;
       	width: 100% !important;
        overflow: hidden; /* clip background for  rounded corners */
        box-sizing: border-box;
        -webkit-box-sizing:  border-box;
        -moz-box-sizing:  border-box;
	    padding: 0;
        margin: 0;

}
.jp-nav-list-accordion  dl {
        postion: relative;
        display: block;
        padding: 0.25em;
}

.jp-bu-dropdown-card {
         background: #fff;

}

.jp-bu-dropdown-card ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;

}
.jp-bu-dropdown-card li {
    	list-style: none;
    	margin: 0;
    	padding: .5em;
    	position: relative;
     	vertical-align: top;
        width: 100%;
       border-bottom: 1px solid #999;

 }

.jp-bu-dropdown-card li:hover .jp-nav-overlay {
        display: block !important;
}

.jp-bu-dropdown-card li:first-child {
        border-top: none;
	padding-top: 1.0em !important;
}


.jp-bu-dropdown-card li:last-child {
         border-bottom: none;
	padding-bottom: 1.0em !important;
}

.jp-bu-dropdown-card a.jp-ici-box-rendition {
	position: absolute;
	top: 0.75em;
	left: 0.5em;
	padding: 0px;
	border: 0px solid #eee;
	display: inline-block;
}

.jp-bu-dropdown-card a.jp-ici-box-rendition:after{
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}
 * html .jp-bu-dropdown-card a.jp-ici-box-rendition {
         height: 1%;
}

.jp-bu-dropdown-card dl {
	display: block;
	padding: 0 0.5em;
	max-width: 100%;
	position:relative;
 }
.jp-bu-dropdown-card dt,
.jp-bu-dropdown-card dd {
	margin:  0;
	padding: 0.15em;
	border: none;
	height: auto;
	width: 100%;
	line-height: 125%;
	white-space: normal;
	overflow: hidden;
	text-overflow: ellipsis !important;
	margin:0;
	position: relative;
	text-decoration: none;
}

.jp-bu-dropdown-card dl dt {
	font-weight: 600 !important;
	display: block;
	text-decoration: none;
	border: 0px solid #000;
	padding-right: 1.5em !important; /* Gutter for right badges */
}


.jp-bu-dropdown-card dt a{
	font-weight: 600 !important;
	display: block;
	color: #0066cc;
	text-decoration: none;
	margin-right: 1.0em !important;
	overflow: hidden;
	text-overflow: ellipsis !important;

}


.jp-bu-dropdown-card .jp-wfl-io-inp-append .jp-bu,
.jp-bu-dropdown .jp-wfl-io-inp-append .jp-bu {
    margin-top: 0 !important;
}

.jp-bu-dropdown-card dl dd:last-child {
        color: #666;

 }

.jp-bu-dropdown-content.jp-view-opened,
.jp-bu-dropdown-card.jp-view-opened {
 border-top: 1px solid #ddd !important;
  min-height: 4em;
}



.jp-bu-dropdown-content .jp-nav-badge,
.jp-bu-dropdown-card dt .jp-nav-badge {
	position: absolute !important;
	right: 0;
	top: 50% !important;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.jp-bu-dropdown-content .jp-nav-badge {
    right: 0.5em !important;

}

.jp-bu-dropdown-card .jp-bu {
        margin-top: 0.55em !important;

}


.jp-bu-dropdown-card-medium  dl{
          padding-left: 3.0em;
          line-height: 100%;
}

.jp-bu-dropdown-card-large dl{
          padding-left: 4.5em;
          line-height: 180%;
}

.jp-story-keyline-vid-xlarge dl{
          padding-left: 7.0em;
          line-height: 200%;
          min-height: 7.0em;
}

.jp-bu-dropdown-card .jp-card-vid {
		 display: inline-block;
		 position: absolute;
		 top: 10px;
		 left: 0;
		 margin: 0.5em;
		 padding: 0px;
		 border: 1px solid #eee;
}

.jp-bu-dropdown-card .jp-card-vid:after{
         content: ".";
         display: block;
         height: 0;
         clear: both;
         visibility: hidden;
}
 * html .jp-card-vid {
         height: 1%;
}


/*  USER SWITCHBOARD END */









/*  NAVIGATION  :: MAIN MENU  */



@media (max-width: 749px) {
      .jp-child-padding-200 .jp-frame {
        padding-left: 42px;
      /*  left: 158px;
        right: -158px; */
        position: fixed;
        width: 100%;
        transition: 600ms;
      }

      .jp-child-padding-200 > .jp-frame::after {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index:  90003;
      }
    }



/*  NAVIGATION  :: MAIN MENU :: HOOKS - LAYOUT */


[data-layout-padding="l:42"] .jp-frame {
	padding-left: 42px;
}


[data-viewport="f:h,84"] {
	width: 100%;
	height: auto;
	min-height: 84px;
	box-sizing: content-box;
}

.jp-child-padding-200 [data-viewport="f:h,84"] [data-image-rendition="32:32"] {
	width: 84px !important;
	height: 84px !important;
	-webkit-transition: all 400ms;
	-moz-transition: all 400ms;
	-ms-transition: all 400ms;
	-o-transition: all 400ms;
	transition: all 400ms;
}

[data-viewport="f:h,84"] [data-image-rendition="32:32"] {
	width: 32px !important;
	height: 32px !important;
	-webkit-transition: all 400ms;
	-moz-transition: all 400ms;
	-ms-transition: all 400ms;
	-o-transition: all 400ms;
	transition: all 400ms;
}


/*  NAVIGATION  :: MAIN MENU ::  VIEW PORTS AND HIGHLIGHTS  */

[data-viewport-palette="menu::panel:theme:dark"] {
	background: #000 !important;
	color: #fff;
}

[data-viewport-palette="menu::panel:theme:dark"] .jp-nav-label,
[data-viewport-palette="menu::panel:theme:dark"] .jp-nav-label-invert {
	color: #fff;
}

[data-viewport-palette="menu::panel:theme:dark"] .jp-nav-label-active  {
	color: #ff0000 !important;
}



[data-viewport-palette="menu::panel:theme:dark"] .jp-nav-list.jp-view-opened,
[data-viewport-palette="menu::panel:theme:dark"]  .jp-nav-menu-footer .jp-nav-menu-footer-tooltip .jp-view-opened  {
         border-top: 0px !important;
}


[data-marker-id="label-menu-branch-idle"] {
	border-left: 2px solid #ddd !important;
	padding-left: 8px !important;

}

[data-marker-id="label-menu-branch-active"] {
	border-left: 2px solid #1b8dff; !important;
	padding-left: 8px !important;
}

[data-marker-id="label-menu-branch-active"] span.jp-nav-label {
	color: #1b8dff !important;
}


[data-marker-id="label-menu-branch-idle"]:hover {
	border-left: 2px solid #ff0000 !important;

}

[data-viewport-role="menu::badge:notification"] {
	left: 2px !important;
	top: 2px !important;

}


[data-viewport-role="menu::option:advancement:list"] {
	padding-left: 32px !important;
}
.jp-child-padding-200 .jp-nav-menu-vertical-left .jp-nav-menu-footer .jp-bu[data-viewport-role="menu::option:switch"] {
	margin-left: 158px !important;
	transition: margin-left 600ms;
}
[data-viewport-role="menu::option:advancement:list"] li {
        margin: 0 !important;
}


 
/*  

[data-viewport-palette="menu::panel:theme:dark"] 
[data-marker-id="label-menu-branch-idle"]
[data-marker-id="label-menu-branch-active"]

[data-viewport-role="menu::option:switch"]
[data-viewport-role="menu::option:advancement:branch"]
[data-viewport-role="menu::option:home"]

[data-viewport-role="menu::option:depo"]
[data-viewport-role="menu::option:settings]
[data-viewport-role="menu::option:setup]

[data-viewport-role="menu::option:inbox"]
[data-viewport-role="menu::option:inbox:list"]
[data-viewport-role="menu::option:dahsboards"]
[data-viewport-role="menu::option:dashboards:list"]
[data-viewport-role="menu::option:workspaces"]
[data-viewport-role="menu::option:workspaces:list"]
[data-viewport-role="menu::option:advancement"]
[data-viewport-role="menu::option:advancement:list"]
[data-viewport-role="menu::option:advancement:options"]
*/




.jp-nav-menu-header,
.jp-nav-menu-body,
.jp-nav-menu-footer {
    padding: 0;
    margin: 0;
    
}


.jp-nav-branch {
     position: relative;
     min-width: 32px;
     width: 100%;
     padding:0;
     margin:0;
     white-space: nowrap;

}


.jp-nav-branch button,
.jp-nav-branch a {
     display: inline-block;

}

.jp-nav-branch a.jp-bu {
       display: inline-block;
       color: #fff;
       width: 100%;
 
}

.jp-nav-branch a.jp-bu:hover {
       display: inline-block;
       color: #ff0000;
       width: 100%;
 
}


.jp-nav-branch span.jp-nav-prepend {
        position: relative;
        right: 24px;
        display: inline-block;
        width: auto !important;
        text-align: right;
        cursor: pointer;
}

.jp-nav-branch  button.jp-bu-prepend {  
     position: relative; 
     right: 22px;
     top: 0;
     display: inline-block; 
     width: auto !important;
     text-align: right;
  }

.jp-nav-list  .jp-nav-branch button.jp-bu-prepend {
 position: relative !important;
 right: -12px;
 top: 0;

}


.jp-nav-list-branch a {
       display: inline-block !important;
 }

.jp-nav-list-branch.jp-nav-list-branch   li {
       width: 100%;
       padding-right: 0 !important;
 }
.jp-nav-list-branch  a:hover .jp-nav-label {
        color: #ff0000 !important;
}


.jp-nav-branch .jp-nav-list.jp-nav-list-branch     {
      padding-left: calc(24px + 1em);
      border: none !important;
  }

.jp-nav-branch  + .jp-nav-branch .jp-nav-list.jp-nav-list-branch     {

      border: none !important;
  }



.jp-nav-list-branch.jp-view-opened  ul {
     padding: 0px !important;

 }

 

    .jp-child-padding-200 .jp-frame {
      padding-left: 200px;
    }



    .jp-nav-menu-vertical-left {
      border: none !important;
      width: 42px;
      margin: 0 !important;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      overflow: hidden;
      z-index: 100000;
      transition: width 600ms;
    }

    .jp-child-padding-200 .jp-nav-menu-vertical-left {
      width: 200px;
      transition: width 600ms;
    }

    .jp-nav-menu-vertical-left .jp-nav-deck,
    .jp-nav-menu-right-active-350 .jp-nav-menu-vertical-left .jp-nav-deck {
      margin-top: 0 !important;
      position: static;
    }

    .jp-nav-menu-vertical-left .jp-nav-deck-body li,
    .jp-nav-menu-vertical-left .jp-nav-deck-footer li {
      padding: .5em 5px;
    }

    .jp-nav-menu-vertical-left .jp-nav-label {
      margin-left: 1em;
      opacity: 0;
      transition: opacity 400ms;
    }

    .jp-child-padding-200 .jp-nav-menu-vertical-left .jp-nav-label {
      opacity: 1;
      transition: opacity 200ms 400ms;
    }

    .jp-nav-menu-vertical-left .jp-nav-list .jp-ici {
      opacity: 0;
      transition: opacity 400ms;
    }

    .jp-child-padding-200 .jp-nav-menu-vertical-left .jp-nav-list .jp-ici {
      opacity: 1;
      transition: opacity 200ms 400ms;
    }



    .jp-nav-menu-vertical-left .jp-nav-deck {
      border: none;
    }

  

    .jp-nav-menu-vertical-left .jp-ici-module {
      padding: 1em 0;
      text-align: center;
    }

    .jp-nav-menu-vertical-left .jp-nav-list {
      background: transparent !important;
      /* color: #fff !important;
      padding-left: calc(21px + .5em); */
      
    }

  


 .jp-nav-menu-footer {
 	clear: both;
 	position: relative;
 	width: 100%;
 }
 
 .jp-nav-menu-vertical-left .jp-nav-deck-body li,
 .jp-nav-menu-vertical-left .jp-nav-menu-footer li {
 	padding: .5em 5px;
 }
 
 .jp-nav-menu-vertical-left .jp-nav-menu-footer{
 	background: none;
 	bottom: 0;
 	position: absolute;
 	left: 0;
 	right: 0;
 	overflow: hidden;
 	z-index: 1;
 }
 
 .jp-nav-menu-footer-panel {
 	margin-left: 10px;
 	padding: 0.15em;
 	border: 1px solid #ddd;
 	background: #000;
 
 }
 
 .jp-nav-menu-vertical-left .jp-nav-menu-footer .jp-bu {
 	margin-left: 4px !important;
 	transition: margin-left 600ms;
 }
 

 .jp-child-padding-200 .jp-nav-menu-vertical-left .jp-nav-menu-footer li {
 	position: relative;
 }
 
 .jp-nav-menu-vertical-left .jp-nav-menu-footer li > div {
 	opacity: 0;
 }
 
 .jp-child-padding-200 .jp-nav-menu-vertical-left .jp-nav-menu-footer li > div {
 	opacity: 100%;
 	display: block;
 	position: absolute;
 	left: 5px;
 	right: 41px;
 	text-align: center;
 	transition: all 600ms;
 }
 
 .jp-child-padding-200 .jp-nav-menu-vertical-left .jp-nav-menu-footer li > div > .jp-bu {
 	display: inline-block;
 	margin: 0 !important;
 }
 
 .jp-nav-menu-footer-tooltip {
        opacity: 0;
 	clear: both;
 	position:relative;
 	margin: 0px;
 
 	background: none;
 	border: none;
 	padding: 0;
 }
 


 .jp-child-padding-200 .jp-nav-menu-vertical-left  .jp-nav-menu-footer .jp-nav-menu-footer-tooltip {
 	opacity: 100%;
 	transition: opacity 3s;
 }

    
    
 
    .jp-nav-menu-vertical-left .jp-nav-list .jp-nav-label {
      margin-left: 0;
    }

    .jp-nav-menu-vertical-left .jp-nav-list ul:last-child {
      border: none !important;
    }

    .jp-nav-menu-vertical-left .jp-nav-list li {
      background: transparent !important;
      border-right: none !important;
    }


    .jp-nav-menu-vertical-left .jp-nav-list li:hover {
      background: transparent !important;
      border-right: none !important;
    }

    .jp-position-center .jp-nav-label-vertical {
      margin: 0;
      padding: .5em;
    }

    /* Fix jui-preset */

    .jp-position-float-none {
      float: none;
    }

    /* Scroll bar */

    .jp-nav-menu-vertical-left .jp-nav-scroll ul {
      position: relative;
      padding-right: 5px !important; /* right gutter for jrole scrolll */
      border-bottom: 0 solid #eee;
      border-top: 0 solid #eee;
    }

    .jp-nav-menu-vertical-left .jp-nav-scroll-bar {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      /*height:100%;*/
      width: 8px;
      /*border: 4px solid #5c92e7; *!*/
      padding: 1px;
      border: none;
      border-radius: 0;
      overflow: hidden;
      background: #cdcdcd;
      cursor: move;
      box-sizing: border-box;
      opacity: 0;
      transition: opacity 200ms;
    }

    .jp-child-padding-200 .jp-nav-menu-vertical-left .jp-nav-scroll-bar {
      opacity: 1;
      transition: opacity 200ms 400ms;
    }

    .jp-nav-menu-vertical-left .jp-nav-scroll-track {
      width: 6px;
      border: none;
      background-color: #1b8dff;
      cursor: default;
      border-radius: 0;
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      opacity: 1;
      -moz-opacity: 1;
    }
    
    




















    /* Widget Contacts*/
    
    
    
    
     .i-circle {
       display: inline-block;
       font-size: 1em;
       width: 2.5em;
       height: 2.5em;
       line-height: 2.5em;
       text-align: center;
       border-radius: 50%;
       background: plum;
       vertical-align: middle;
       margin-right: 1em;
       color: white;
     }

    .circle {
      position: relative;
      display: inline-block;
      width: 100%;
      height: 0;
      padding: 50% 0;
      border-radius: 50%;

      /* Just making it pretty */
    @shadow: rgba(0, 0, 0, .1);
    @shadow-length: 4 px;
      -webkit-box-shadow: 0 @shadow-length 0 0 @shadow;
      box-shadow: 0 @shadow-length 0 0 @shadow;
      text-shadow: 0 @shadow-length 0 @shadow;
      background: #38a9e4;
      color: white;
      font-family: Helvetica, Arial Black, sans;
      font-size: 20px;
      text-align: center;
    }





/*  NAVIGATION  :: SKIN   */


/*  NAVIGATION  :: make list visible  */

       .jp-nav-menu   .jp-nav-list {max-width: 180px;}

       .jp-nav-menu   .jp-nav-list a {line-height: 100% !important; height: 100% !important;}

       .jp-nav-menu   .jp-nav-list li { margin-bottom: 0.65em !important;}

       .jp-nav-menu   .jp-nav-list li .jp-nav-label {white-space: normal !important; line-height: 150% !important;}

       .jp-nav-list-submenu a {display: inline-block !important;}


          .jp-wfl-theme-dark .jp-wfl-io-push-left input[type="text"] {
            padding-left: 40px !important;
            border-left: 0px solid transparent !important;
            background-color: transparent !important;

            color: #fff !important;
          }

          .jp-wfl-theme-dark .jp-wfl-io-push-left input[type="text"]:focus,
          .jp-wfl-theme-dark .jp-wfl-io-push-left input[type="text"].jp-element-focus {

            border: 1px solid #ddd !important;
            box-shadow: 0 0 10px #719ECE;
            background-color: #fff !important;
            color: #000 !important;
          }

          .jp-wfl-theme-dark .jp-wfl-io-push-left .jp-wfl-io-inp-prepend {
            position: absolute !important;
            top: 0 !important;
            right: 0 !important;
            z-index: 0;
          }

          .jp-wfl-theme-dark ::-webkit-input-placeholder { /* WebKit browsers */
            color: #fff;
          }

          .jp-wfl-theme-dark input:focus::-webkit-input-placeholder,
          .jp-wfl-theme-dark input.jp-element-focus::-webkit-input-placeholder {
            color: #000 !important;
          }

          .jp-wfl-theme-dark :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            opacity: 1;
            color: #fff;
          }

          .jp-wfl-theme-dark input:focus:-moz-placeholder,
          .jp-wfl-theme-dark input.jp-element-focus::-moz-placeholder {
            opacity: 1;
            color: #000 !important;
          }

          .jp-wfl-theme-dark ::-moz-placeholder { /* Mozilla Firefox 19+ */
            opacity: 1;
            color: #fff;
          }

          .jp-wfl-theme-dark input:focus::-moz-placeholder {
            color: #000 !important;
          }

          .jp-wfl-theme-dark .jp-wfl-theme-dark :-ms-input-placeholder { /* Internet Explorer 10+ */
            color: #fff;
          }

          .jp-wfl-theme-dark input:focus:-ms-input-placeholder {
            color: #000;
                        
          }

          .jp-wfl-theme-dark .jp-wfl-io-inp-prepend .jp-bu {
          
             z-index: -10; 
             background: none;
             height: 100% !important;
             vertical-align: middle;
          
          
          }


.jp-wfl-theme-dark .jp-bu-dropdown {
	position: absolute;
	left: 0px;
	margin: 0px;
	right: 0px;
	top: 0px;
	z-index: 900000;
	border: none !important;
	background: #fff !important;
	color: #000 !important;
        box-shadow: 0 30px 0px -0px rgba(0, 0, 0, .7);
    	-webkit-box-shadow:  0 30px 0px -0px rgba(0, 0, 0, .7);
	 -moz-box-shadow:  0 30px 0px -0px rgba(0, 0, 0, .7);}

.jp-wfl-theme-dark .jp-bu-dropdown li {

   padding: 0 !important;
   border-bottom: 0px solid #ccc;

}

.jp-wfl-theme-dark .jp-bu-dropdown li .jp-bu {

 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 99% !important;
 min-width: 99% !important;
 text-align: left;

}

          /*              .jp-wfl-theme-dark input:focus + .jp-wfl-io-inp-append .jp-ici-render-invert.jp-icon-app-search {
                          background-position: -28.5em -18em;
                        }
          */
          /*              .jp-wfl-theme-dark input:focus + .jp-wfl-io-inp-append .jp-ici-render-invert.jp-icon-app-search {
                          background-position: -12em -13.5em; !* shut icon *!
                        }
          */
          
          
  
  
  
  /* Make the badge float in the top right corner of the button */
  
 
  .jp-nav-prepend {
   position: relative;
   border: none;
  }
  
  .jp-nav-append {
   position: relative;
   border: none;
}



  /* contacts and chat */
  


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

  .jp-nav-menu-right-active-350 .jp-view-opened[data-viewport-position="menu::slidepanel::right::700"] {
    right: 350px;
    left: auto;
  }

  @media (max-width: 749px) {
      .jp-nav-menu-right-active-350 .jp-view-opened[data-viewport-position="menu::slidepanel::right::700"] {
          z-index: 100000;
          right: 0;
          left: auto;
      }
  }

/*
  .jp-nav-menu-right-active-350  [data-viewport-position="menu::slidepanel::right::700"] .jp-nav-widget .jp-nav-dock {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    !*width: 350px;*!
    min-height: 2.5556em;
    -moz-transition: all 600ms;
    -webkit-transition: all 600ms;
    transition: all 600ms;
    z-index: 10;
  }
*/

  .jp-nav-widget-messages {
    height: 100%;
    /*display: flex;*/
    /*flex-direction: column;*/
      position: absolute;
      width: 100%;
      /*margin-bottom: 186px;*/
      box-sizing: border-box;
      top: 0;
      bottom: 0;
  }

  /*.jp-nav-widget-messages .jp-nav-dock {*/
  /*}*/

  .jp-nav-widget-messages .jp-nav-deck {
      position: absolute;
      width: 100%;
      top: 3em;
      bottom: 186px;
      overflow: hidden;
  }

  .jp-nav-widget-messages .jp-nav-deck-wrap {
      overflow: hidden;
      /*overflow-y: auto;*/
      height: 100%;
      width: 100%;
      /*flex: 1 0 auto;*/
      order: 1;
      display: flex;
      flex-direction: column;
      position: absolute;
      /*top: 43px;*/
      /*bottom: 186px;*/
      /*flex-direction: column;*/
  }

  .jp-nav-widget-messages .jp-nav-deck-footer {
    /*flex: 0 0 auto;*/
    /*order: 2;*/
      position: absolute;
      bottom: 0;
  }

  .jp-nav-widget-roster-messages [data-rfe-format-block="blockquote"] {
    padding-right: .25em;
    max-width: none;
  }

  .jp-nav-widget-roster-messages [data-rfe-format-block="blockquote"]::before {
    left: -0.1157em;
  }

    .jp-nav-widget-roster-message-date {
    text-align: center;
    font-size: .875em;
    font-style: italic;
    color: #999;
  }

  .jp-nav-widget-messages .jp-nav-deck-footer .jp-bu {
    margin-top: 0 !important;
  }

  .jp-nav-widget-messages .jp-wfl-io-rfe-iframe {
    min-height: auto;
  }



  .jp-flex {
    display: flex;
  }

  .jp-flex-column {
    flex-direction: column;
  }

  .jp-flex-0-0-auto {
    flex: 0 0 auto;
  }

  .jp-flex-1-0-auto {
    flex: 1 0 auto;
  }
  
  

 .jp-nav-widget-messages .jp-nav-deck-header {
      overflow: unset;
     flex-grow: 0;
     /*flex: 0 0 auto;*/
  }

  .jp-nav-widget-messages .jp-nav-deck .jp-nav-deck-body {
      /*flex: 1 1 auto;*/
      flex-grow: 1;
      overflow-y: auto;
      /*height: calc(100% - 124px);*/
  }
  
    /*.jp-nav-widget-messages .jp-nav-deck  {*/
    /*   flex-direction: column;*/
    /* }*/

  /*.jp-nav-widget-messages .jp-nav-deck .jp-nav-deck-body > div {*/
  /*    overflow-y: auto;*/
  /*    height: 100%;*/
  /*}*/

  .jp-nav-widget-messages .jp-nav-deck .jp-nav-deck-body  > div.jp-nav-scroll {
      overflow-y: hidden;
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
  }

    /*.jp-nav-widget-messages .jp-nav-deck .jp-nav-deck-body  > .jp-nav-scroll .jp-nav-scroll-list {*/
    /*  overflow: hidden;*/
    /*}*/

    /*.jp-nav-widget-messages .jp-nav-scroll .jp-nav-deck {*/
    /*  display: block;*/
    /*  width: 100% !important;*/
    /*  height: auto;*/
    /*}*/
  

 @media (max-width: 749px) {
    [data-viewport="menu::slidepanel::right::700"] {
      right: -350px !important;
    }

    .jp-nav-menu-right-active-350 .jp-view-opened[data-viewport="menu::slidepanel::right::700"] {
      right: 0 !important;
      z-index: 100100;
    }
  }





/* HELP PANEL STYLE */

  .jp-nav-menu-right-350 .jp-frame {
    padding-right: 350px;
    -moz-transition: all 600ms;
    -webkit-transition: all 600ms;
    transition: all 600ms;
  }

  @media (max-width: 1199px) {
      .jp-nav-menu-right-350 .jp-frame {
          position: fixed;
          left: -350px;
          right: 350px;
          padding-right: 0;
          -moz-transition: all 600ms;
          -webkit-transition: all 600ms;
          transition: all 600ms;
      }

      .jp-nav-menu-right-350 > .jp-frame::after,
      .jp-nav-menu-left-350 > .jp-frame::after,
      .jp-nav-menu-right-48 > .jp-frame::after,
      .jp-nav-menu-left-48 > .jp-frame::after {
          content: "";
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.4);
          z-index: 90001;
      }

  }

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

  .jp-nav-menu-right-350  [data-viewport-position="menu::slidepanel::right::350"] {
    right: 0;
  }

  .jp-nav-menu-right-350 .jp-view-opened[data-viewport-position="menu::slidepanel::fixed::right::350"] {
    right: 0;
    left: auto;
  }

  .jp-nav-menu-right-350.jp-nav-menu-right-active-350 .jp-view-opened[data-viewport-position="menu::slidepanel::right::350"],
  .jp-nav-menu-right-350.jp-nav-menu-right-active-48 .jp-view-opened[data-viewport-position="menu::slidepanel::right::48"] {
    right: 350px;
  }

  .jp-nav-menu-right-350.jp-nav-menu-right-active-350 .jp-view-opened[data-viewport-position="menu::slidepanel::right::700"] {
    right: 700px;
  }

  /* FIX FOR jp-nav-scroll FOR jp-nav-dec-body */
  [data-viewport-position="menu::slidepanel::right::350"] {
    overflow: hidden;
  }

