/* Smooth transitions work around BUT SCROLLS ARE NOT SMOOTH!!! */
/*.ui-page { -webkit-backface-visibility: hidden; }*/

/****************************/
/*Adjustments to JQM classes*/
/****************************/



/*********************/
/*General adjustments*/
/*********************/
html {                           /* Was at 90% */
    font-size:100%;
}

.nobar::-webkit-scrollbar {   /* Eliminates the scrollbars in chrome iframe but lets window scroll */
    width: 0px;
}

body, html {
    -webkit-font-smoothing: antialiased;
}

/*Change default font*/
body, div, nav, a, input, select, textarea, button, .ui-btn {
    font-size: 1em;
    line-height: 1.3;
    font-family: 'Open Sans', sans-serif;
    /*text-shadow: 0 !*{a-page-shadow-x}*! 0px !*{a-page-shadow-y}*! 0 !*{a-page-shadow-radius}*! #f3f3f3 !*{a-page-shadow-color}*! ;*/
    text-shadow: none;
}

/*Links in listviews should not be bold*/
.ui-page-theme-a a, html .ui-bar-a a, html .ui-body-a a, html body .ui-group-theme-a a {
    color: #3388cc /*{a-link-color}*/;
    font-weight: normal;
}
.ui-page-theme-b a, html .ui-bar-b a, html .ui-body-b a, html body .ui-group-theme-b a {
    color: #22aadd /*{b-link-color}*/;
    font-weight: normal;
}

.pop.in {
    -webkit-transform: initial;   /* scale(1) - was causing lines in popups on Chrome*/
}

/* borders in dark buttons on popups were getting white lines */
div[data-role="popup"] .ui-controlgroup-controls a.ui-btn-b {
    border-width: 0px;
}

/*Remove 17em movements since jnx is taking care of it*/
.ui-panel-page-content-position-left {
    left: 0em;
    right: -0em;
}
.ui-panel-animate.ui-panel-page-content-position-left {
    left: 0;
    right: 0;
    -webkit-transform: translate3d(0em,0,0);
    -moz-transform: translate3d(0em,0,0);
    transform: translate3d(0em,0,0);
}

html .ui-body-a .ui-slider-track .ui-btn-active {
    background-color: rgba(29, 174, 199, 1.0);  /*{b-active-background-color was #22aadd}*/
    border-color: rgba(29, 174, 199, 1.0);  /*{b-active-border was #22aadd}*/
    color: #fff; /*{b-active-color}*/
    text-shadow: 0 /*{b-active-shadow-x}*/ 1px /*{b-active-shadow-y}*/ 0 /*{b-active-shadow-radius}*/ #0088bb /*{b-active-shadow-color}*/;
}

.ui-page-theme-b .ui-btn.ui-btn-active, html .ui-bar-b .ui-btn.ui-btn-active, html .ui-body-b .ui-btn.ui-btn-active, html body .ui-group-theme-b .ui-btn.ui-btn-active, html head + body .ui-btn.ui-btn-b.ui-btn-active, .ui-page-theme-b .ui-checkbox-on:after, html .ui-bar-b .ui-checkbox-on:after, html .ui-body-b .ui-checkbox-on:after, html body .ui-group-theme-b .ui-checkbox-on:after, .ui-btn.ui-checkbox-on.ui-btn-b:after, .ui-page-theme-b .ui-flipswitch-active, html .ui-bar-b .ui-flipswitch-active, html .ui-body-b .ui-flipswitch-active, html body .ui-group-theme-b .ui-flipswitch-active, html body .ui-flipswitch.ui-bar-b.ui-flipswitch-active, .ui-page-theme-b .ui-slider-track .ui-btn-active, html .ui-bar-b .ui-slider-track .ui-btn-active, html .ui-body-b .ui-slider-track .ui-btn-active, html body .ui-group-theme-b .ui-slider-track .ui-btn-active, html body div.ui-slider-track.ui-body-b .ui-btn-active {
    background-color: rgba(29, 174, 199, 1.0);  /*{b-active-background-color was #22aadd}*/
    border-color: rgba(29, 174, 199, 1.0);  /*{b-active-border was #22aadd}*/
    color: #fff; /*{b-active-color}*/
    text-shadow: 0 /*{b-active-shadow-x}*/ 1px /*{b-active-shadow-y}*/ 0 /*{b-active-shadow-radius}*/ #0088bb /*{b-active-shadow-color}*/;
}

/*Comment button on articles had text shadow*/
.ui-page-theme-a .ui-btn, html .ui-bar-a .ui-btn, html .ui-body-a .ui-btn, html body .ui-group-theme-a .ui-btn, html head + body .ui-btn.ui-btn-a, .ui-page-theme-a .ui-btn:visited, html .ui-bar-a .ui-btn:visited, html .ui-body-a .ui-btn:visited, html body .ui-group-theme-a .ui-btn:visited, html head + body .ui-btn.ui-btn-a:visited {
    background-color: #f6f6f6 /*{a-bup-background-color}*/;
    border-color: #ddd /*{a-bup-border}*/;
    color: #333 /*{a-bup-color}*/;
    text-shadow: 0 /*{a-bup-shadow-x}*/ 0px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #f3f3f3 /*{a-bup-shadow-color}*/;
}

/*.ui-page-theme-b .ui-btn:hover, html .ui-bar-b .ui-btn:hover, html .ui-body-b .ui-btn:hover, html body .ui-group-theme-b .ui-btn:hover, html head + body .ui-btn.ui-btn-b:hover {*/
    /*background: #1DAEC7 *//*{b-bhover-background-color #373737}*//*;*/
    /*border-color: #1f1f1f *//*{b-bhover-border #1f1f1f}*//*;*/
    /*color: #fff *//*{b-bhover-color #fff}*//*;*/
    /*text-shadow: 0 *//*{b-bhover-shadow-x}*//* 1px *//*{b-bhover-shadow-y}*//* 0 *//*{b-bhover-shadow-radius}*//* #111 *//*{b-bhover-shadow-color}*//*;*/
/*}*/

/*.ui-page-theme-b .ui-btn, html .ui-bar-b .ui-btn, html .ui-body-b .ui-btn, html body .ui-group-theme-b .ui-btn, html head + body .ui-btn.ui-btn-b, .ui-page-theme-b .ui-btn:visited, html .ui-bar-b .ui-btn:visited, html .ui-body-b .ui-btn:visited, html body .ui-group-theme-b .ui-btn:visited, html head + body .ui-btn.ui-btn-b:visited {*/
    /*background: #1DAEC7 *//*{b-bup-background-color #333}*//*;*/
    /*border-color: #1f1f1f *//*{b-bup-border}*//*;*/
    /*color: #fff *//*{b-bup-color}*//*;*/
    /*text-shadow: 0 *//*{b-bup-shadow-x}*//* 1px *//*{b-bup-shadow-y}*//* 0 *//*{b-bup-shadow-radius}*//* #111 *//*{b-bup-shadow-color}*//*;*/
/*}*/

/*Get rid of black stripe at bottom of page */
.ui-footer-fixed {
    bottom: -1px;
    padding-bottom: 0px;
}

/*Make dark buttons on popup listsviews yellow instead of black*/
/*.ui-popup .ui-btn-a {*/
    /*background-color: #fffab8 !important;*/
/*}*/

/*Make close X a little darker*/
#close.ui-btn-icon-notext:after {
    left: 50%;
    margin-left: -11px;
    background-color: #666;
}

/*Animate background screen shading*/
/*.ui-popup-screen {*/      /* NO - CAUSES TOP TO BOTTOM FLICKER ON IPAD */
    /*transition: all 0.3s ease-out;*/
/*}*/
.ui-popup-screen.in {
    opacity: .25;                    /* default is .5 */
    filter: Alpha(Opacity=25);
    background-color: #000000;
}

/*Make popup shadows wider and lighter*/
.ui-overlay-shadow {
     -webkit-box-shadow: 0 0 60px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 60px rgba(0,0,0,.5);
    box-shadow: 0 0 80px rgba(0,0,0,.5);
}

/* Make loader not so dim */
.ui-loader-default {
    /*background: 0;*/
    /*filter: Alpha(Opacity=18);*/
    /*opacity: .18;*/
    /*width: 2.875em;*/
    /*height: 2.875em;*/
    /*margin-left: -1.4375em;*/
    /*margin-top: -1.4375em;*/
    filter: Alpha(Opacity=1.0);
    opacity: 1.0;
}

/*Conflicts with bootstrap used on dataTables search boxes*/
.ui-mobile label, div.ui-controlgroup-label {
    font-weight: inherit;
    font-size: inherit;
}

/* Put channel icons closer to left marging on channels panel */
/*.ui-listview > .ui-li-has-count > .ui-btn {*/
.ui-listview > li > .ui-btn {
    padding-left: 8px;
}

.fas.ui-nodisc-icon, .far.ui-nodisc-icon, .fal.ui-nodisc-icon, .fab.ui-nodisc-icon {
    width: 28px;
    height: 28px;
    top: .3125em;
    right: .3125em;
    font-size: 16px;
    position:relative;
    padding:.3125em;
    margin:0;
}

/* make fontawesome work with vue element */
/*.el-menu-item [class^=el-icon-] {*/
.el-menu-item .fas, .el-menu-item .far, .el-menu-item .fal {
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
    vertical-align: middle;
}
.el-menu-item i {
    color: #909399;
}

/* adjustment so that non-active pages do not get automatically get hidden */
.ui-mobile [data-role=page],
.ui-mobile [data-role=dialog],
.ui-page {
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    position: absolute;
    display: block;
    border: 0;
}

div[data-role=page].pop {
    min-height: 300px;
}

.ui-listview .ui-btn-icon-right .ui-li-count {
    right: 2.7em;
}

div[data-role=content] .ui-listview > li h3 {
    font-size: 12px;
}

div[data-role=content] .ui-listview > li p {
    font-size: 11px;
    /*font-weight: normal;*/
    /*display: block;*/
    margin: 3.3px 0 0 0;
    /*text-overflow: ellipsis;*/
    /*overflow: hidden;*/
    white-space: normal;
}

.ui-disabled, .ui-state-disabled, button[disabled], .ui-select .ui-btn.ui-state-disabled {
    filter: Alpha(Opacity=40);
    opacity: .4;
    cursor: default !important;
    pointer-events: none;
}

/*************************************/
/*jnx classes  (#e9eef2 0%, #3489D8) */
/*************************************/
.jnx-background {
    /*background: #e9eef2; *//* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    /*background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlOWVlZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYzFjZWRhIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);*/
    /*background: -moz-radial-gradient(center, ellipse cover,  #e9eef2 0%, #1daec7 100%); *//* FF3.6+ */
    /*background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#e9eef2), color-stop(100%,#1daec7)); *//* Chrome,Safari4+ */
    /*background: -webkit-radial-gradient(center, ellipse cover,  #e9eef2 0%,#1daec7 100%); *//* Chrome10+,Safari5.1+ */
    /*background: -o-radial-gradient(center, ellipse cover,  #e9eef2 0%,#1daec7 100%); *//* Opera 12+ */
    /*background: -ms-radial-gradient(center, ellipse cover,  #e9eef2 0%,#1daec7 100%); *//* IE10+ */
    /*background: radial-gradient(ellipse at center,  #e9eef2 0%,#1daec7 100%); *//* W3C */
    /*background-image: radial-gradient(at 50% -100%, rgb(233, 238, 242) 0%, rgb(29, 174, 199) 80%);*/

    /*The linear gradient causes loading page to flash*/
    background: rgb(29, 174, 199); /* Old browsers */
    /*background: -moz-linear-gradient(top, rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%);  *//* FF3.6+ */
    /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(29, 174, 199, 0.52)), color-stop(30%,rgba(29, 174, 199, 1)), color-stop(100%,rgba(29, 174, 199, 1)));  *//* Chrome,Safari4+ */
    /*background: -webkit-linear-gradient(top, rgba(29, 174, 199, 0.52) 0%,rgba(29, 174, 199, 1) 30%,rgba(29, 174, 199, 1) 100%);  *//* Chrome10+,Safari5.1+ */
    /*background: -o-linear-gradient(top, rgba(29, 174, 199, 0.52) 0%,rgba(29, 174, 199, 1) 30%,rgba(29, 174, 199, 1) 100%);  *//* Opera 11.10+ */
    /*background: -ms-linear-gradient(top, rgba(29, 174, 199, 0.52) 0%,rgba(29, 174, 199, 1) 30%,rgba(29, 174, 199, 1) 100%);  *//* IE10+ */
    /*background: linear-gradient(to bottom, rgba(29, 174, 199, 0.52) 0%, rgba(29, 174, 199, 1) 30%,rgba(29, 174, 199, 1) 100%);  *//* W3C */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#1daec7',GradientType=0 );  *//* IE6-9 */
    height: 100% !important;
    will-change: opacity;
    opacity: 0;
    -webkit-transition: opacity 1s ease-in-out !important;
    -moz-transition: opacity 1s ease-in-out !important;
    -ms-transition: opacity 1s ease-in-out !important;
    -o-transition: opacity 1s ease-in-out !important;
    transition: opacity 1s ease-in-out !important;
}

.jnx-splash-animate {
    -webkit-transition: opacity 1s ease-in-out !important;
    -moz-transition: opacity 1s ease-in-out !important;
    -ms-transition: opacity 1s ease-in-out !important;
    -o-transition: opacity 1s ease-in-out !important;
    transition: opacity 1s ease-in-out !important;
}

.jnx-splash-title {
    font-size: 1.5em;
}
.jnx-splash-subtitle {
    font-size: 1.1em;
}
.jnx-splash-logo {
    width: 82px;
    -webkit-box-shadow: rgba(50, 50, 50, 0.560784) 0px 10px 22px 0px;
    box-shadow: rgba(50, 50, 50, 0.560784) 0px 10px 22px 0px;
}
@media only screen and (min-width: 361px) {
    .jnx-splash-title {
        font-size: 2.5em;
    }
    .jnx-splash-subtitle {
        font-size: 1.4em;
    }
    .jnx-splash-logo {
        width: 120px;
        -webkit-box-shadow: rgba(50, 50, 50, 0.560784) 0px 10px 22px 0px;
        box-shadow: rgba(50, 50, 50, 0.560784) 0px 10px 22px 0px;
    }
}

.jnx-collapsible-set .ui-collapsible-content {   /* used for nested collapsible views (none at present time) */
    padding: 0px;
}

.jnx-nav-icon {     /* Put icon font above text on lower nav bar  */
    position: absolute;
    /*left: 8px;*/
    top: -24px;
    font-size: 1.5em;       /*  1.7 for Fontawesome */
}

.jnx-title-links {      /* Title links on channels panel */
    font-weight:600;
    text-decoration: none;
    color: #fff !important;
    text-shadow: 0 0px 0 #111;
}

.jnx-title-links a:hover {
    text-decoration: underline !important;
}

.jnx-list-icon {   /* Style around icon font in lists */
    margin-right: 10px;
    font-size: 12px;        /* Normally 16px, needed for Chrome on SG4 */
}

.jnx-block-icon {   /* Style around icon font in lists */
    margin-right: 8px;
    font-size: 12px;        /* Normally 16px, needed for Chrome on SG4 */
    float:right;
    /*display: none;*/
}

.jnx-count-red {       /* Red count inserts */
    background: rgb(248, 19, 9);
    color: white;
    font-weight: lighter;
    border: 1px solid rgb(197, 193, 193);
    text-shadow: 0 0px 0 #fff;
}
.jnx-off-red {               /* change background of myFeeds ON/OFF button to red */
    background-image: -o-linear-gradient( #f00, #f00);
    background-image: linear-gradient( #f00, #f00);
    background-image: -webkit-gradient(linear, left top, left bottom, from( #f00, to( #F01)));
    color: #FFF;
}
.jnx-on-green {               /* change background of myFeeds ON/OFF button to green */
    background-image: -o-linear-gradient( #08CF28, #08CF28);
    background-image: linear-gradient( #08CF28, #08CF28);
    background-image: -webkit-gradient(linear, left top, left bottom, from( #08CF28, to( #08CF28)));
    color: #FFF;
}
.jnx-online-on {                /* is user online - used in dirEntriesList */
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background-image: linear-gradient( #08CF28, #08CF28);
}
.jnx-online-off {               /* is user online - used in dirEntriesList */
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background-image: linear-gradient( #b8b8b8, #b8b8b8);
}
.jnx-unread-dot {               /* Unread dot */
    position: absolute;
    left: 21px;
    top: 54px;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background-image: -moz-radial-gradient(10px 10px 45deg, circle cover, rgb(86,139,187), rgb(0, 134, 255));
    background-image: -webkit-radial-gradient(10px 10px, circle cover, rgb(86,139,187), rgb(0, 134, 255));
    background-image: radial-gradient(10px 10px 45deg, circle cover, rgb(86,139,187), rgb(0, 134, 255));
}
.jnx-unread-dot-channel {               /* Unread dot in channels panel*/
    position: absolute;
    right: 36px;            /*  was 36px, tried 45px  */
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background-image: -moz-radial-gradient(10px 10px 45deg, circle cover, rgb(86,139,187), rgb(0, 134, 255));
    background-image: -webkit-radial-gradient(10px 10px, circle cover, rgb(86,139,187), rgb(0, 134, 255));
    background-image: radial-gradient(10px 10px 45deg, circle cover, rgb(86,139,187), rgb(0, 134, 255));
}
.jnx-viewed {               /* Percent viewed */
    position: absolute;
    /*left: 21px;*/
    top: 50px;
    /*border-radius: 50%;*/
    width: 100%;
    height: 10px;
    color:  rgb(0, 134, 255);
    text-align: center;
    font-size: 12px;
}
.jnx-read {      /* Added to headers of items in articles.html page when read */
    font-weight: 400 !important;
}
.jnx-unread {      /* Added to headers of items in articles.html page when unread */
    font-weight: 600 !important;
}

/*Clear P default settings for listview*/
.jnx-listview-clear-p {
    margin: 15px 0 !important;
    -webkit-margin-before: 1em !important;
    -webkit-margin-after: 1em !important;
    -webkit-margin-start: 0px !important;
    -webkit-margin-end: 0px !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    overflow: visible !important;
    white-space: normal !important;
}

/* Show or hide elements */
.jnx-hide {display: none !important}
.jnx-show {display: inline}
.jnx-error {color: #FF453D;margin: 0px 0px 4px 8px;}    /* Error messages below input fields  */
.jnx-errorpopup {
    max-width: 90%;
    margin:0px auto;
    z-index:10000;
    background-color: white;
}
.jnx-statuspopup {
    max-width: 50%;
    margin:0px auto;
    z-index:10000;
    background-color: white;
    padding: .6em;
}

/* Glow around invalid input fields */
.jnx-input-error {
    -moz-box-shadow: 0 0 12px #fff616 !important /*{global-active-background-color}*/;
    -webkit-box-shadow: 0 0 12px #fff616 !important /*{global-active-background-color}*/;
    box-shadow: 0 0 12px #fff616 !important /*{global-active-background-color}*/;
}

/* class for zero margin tables */
.jnx-table-nomargin td {
    padding:0px;
}

/*Black and white effect*/
.jnx-img-bw {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

/*Remove grayscal on hover*/
img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

/*Flash icon for polling*/
.jnx-polling-on {
    /*background-color: rgba(255, 45, 84,0.8) !important;*/
    background-color: rgba(29, 174, 199, 1.0) !important;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.jnx-polling-off {
    background-color: #333;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.jnx-polling-error-on {
/*background-color: rgba(255, 45, 84,0.8) !important;*/
    background-color: #ddd147 !important;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.jnx-polling-error-off {
    background-color: #333;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

/*Highlight new items   rgba(238, 15, 15, 0.14) 253, 186, 44, 0.3 */
.jnx-new-item-on {
    background-color: rgba(253, 230, 46, 0.30) !important;
    transition: background-color 0.3s ease !important;
}
.jnx-new-item-off {
    background-color: rgba(246, 246, 246, 0.00) !important;
    transition: background-color 1.0s ease !important;
}

/*Highlight current item*/
.jnx-current-item-on {
    background-color: rgba(161, 221, 232, 0.5) !important;
    transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
}
.jnx-current-item-off {
    background-color: rgb(246, 246, 246) !important;
    -webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
}

/*Invalid button on invalid button*/
.jnx-button-invalid-1 {
    background-color: rgba(255, 45, 84,0.8) !important;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
.jnx-button-invalid-2 {
    top: 0px;
}

.jnx-button-invalid {
    /*background-color: rgba(255, 45, 84,0.8) !important;*/
    /*-webkit-animation: bounce 1.2s ease-out;*/
    /*-moz-animation: bounce 800ms ease-out;*/
    /*-o-animation: bounce 800ms ease-out;*/
    /*animation: bounce 1.2s ease-out;*/
    -webkit-animation: bounce 1.2s ease-out;
    -moz-animation: bounce 800ms ease-out;
    -o-animation: bounce 800ms ease-out;
    animation: bounce 1.2s ease-out;
}

/*Forms sometimes go transparent when ui-wrapper not applied for some reason*/
.jnx-form {
    background: #f9f9f9 !important /*{a-page-background-color}*/;
    border-color: #bbb !important /*{a-page-border}*/;
    color: #333 !important /*{a-page-color}*/;
    text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/ #f3f3f3 /*{a-page-shadow-color}*/ !important ;
    -webkit-transition: opacity 1ms;
    -moz-transition: opacity 1ms;
    -ms-transition: opacity 1ms;
    transition: opacity 1ms;
    z-index: 2;
}

/* Popup help bullet lists go outside of popup */
.jnx-form-help ul {
    margin-left: 12px;
}

/*Styles for feed blocking popup*/
.jnx-block-li-first {
    padding: 0px 10px 0px 6px !important;
    -webkit-border-bottom-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    -webkit-border-bottom-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
.jnx-block-li {
    padding: 0px 10px 0px 6px !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important;
}
.jnx-block-li-last {
    padding: 0px 10px 0px 6px !important;
    -webkit-border-top-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
    -webkit-border-top-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
}
.jnx-block-div {
    margin: 0;
    padding: 0;
    float: left;
    padding-top: 10px;
    margin-right: 4px;
}

/*Adjustments to get white divider between popup buttons*/
.ui-controlgroup-controls a.ui-btn-b {
    border-bottom-width: 1px !important;
    border-bottom-color: #ddd !important;
}
.ui-controlgroup-controls li.ui-li-static {
    border-bottom-width: 1px !important;
    border-bottom-color: #ddd !important;
}

/*Backgrounds for icons (ie. swipe on computer icons)*/
.jnx-icon-green:after {
    background-color: darkseagreen;
    top: inherit;
    bottom: 0px;
}
.jnx-icon-red:after {
    background-color: crimson;
    top: inherit;
    bottom: 0px;
}

.jnx-slider-background {

}

.jnx-swipe-p {
    text-shadow: 0 0px;
    color: white;padding: 0;
    font-weight: bold !important;
    font-size: 1.1em !important;
    margin:0 10px !important;
    position:relative;
    display: inline-block !important;
    vertical-align: middle;
    line-height: normal;
    text-align: center;
}

/*Items slider - red*/
.jnx-slider-red {
    background: #ce201a; /* Old browsers */
    background: -moz-linear-gradient(top,  #ce201a 0%, #e0231d 39%, #fc351f 72%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ce201a), color-stop(39%,#e0231d), color-stop(72%,#fc351f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ce201a 0%,#e0231d 39%,#fc351f 72%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ce201a 0%,#e0231d 39%,#fc351f 72%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ce201a 0%,#e0231d 39%,#fc351f 72%); /* IE10+ */
    background: linear-gradient(to bottom,  #ce201a 0%,#e0231d 39%,#fc351f 72%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ce201a', endColorstr='#fc351f',GradientType=0 ); /* IE6-9 */
}
/*Items slider - red*/
.jnx-slider-green {
    background: #189930; /* Old browsers */
    background: -moz-linear-gradient(top,  #189930 0%, #1dba3a 39%, #22db46 73%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#189930), color-stop(39%,#1dba3a), color-stop(73%,#22db46)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #189930 0%,#1dba3a 39%,#22db46 73%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #189930 0%,#1dba3a 39%,#22db46 73%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #189930 0%,#1dba3a 39%,#22db46 73%); /* IE10+ */
    background: linear-gradient(to bottom,  #189930 0%,#1dba3a 39%,#22db46 73%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#189930', endColorstr='#22db46',GradientType=0 ); /* IE6-9 */
}

/*Icon font in nav button*/
.jnx-icon-top {
    position: absolute;
    /*top: .7em;*/
    /*margin-left: -10.3px;*/
    top: .75em;
    margin-left: -8.3pt;
    left: 50%;
    width: 22px;
    height: 22px;
    z-index: 1;
}

/*Icon font on left side of list item buttons (ie. floppy save button)*/
.jnx-icon-left {
    position: absolute;
    top: 1em;
    margin-left: -16.5pt;
    width: 22px;
    height: 22px;
    z-index: 1;
    font-size: .80em;
}

.jnx-ad-display p {
    margin: 0px 0 !important;
    -webkit-margin-before: .2em !important;
    -webkit-margin-after: .2em !important;
    -webkit-margin-start: 0px !important;
    -webkit-margin-end: 0px !important;
    font-size: .75em !important;
    line-height: 1.3 !important;
    /*overflow: visible !important;*/
    white-space: normal !important;
}

 /*Border around popup forms*/
.jnx-pop-form-border {
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    -ms-border-radius: .3em;
    -o-border-radius: .3em;
    border-radius: .3em;
    -webkit-box-shadow: 6px 6px 26px 0px rgba(50, 50, 50, 0.58);
    -moz-box-shadow: 6px 6px 26px 0px rgba(50, 50, 50, 0.58);
    box-shadow: 6px 6px 26px 0px rgba(50, 50, 50, 0.58);
    border: solid 6px #0D0D0E !important;
}

/* Show horizontal scroll bars for wide tables etc in  page */
.jnx-horizontal-scrollbar {
    overflow-y: auto;
    /*border: 1px solid black;*/
    /*height: 3em;*/
    /*width: 10em;*/
    /*line-height: 1em;*/
}
.jnx-horizontal-scrollbar::-webkit-scrollbar {
    -webkit-appearance: none;
}
/*.jnx-horizontal-scrollbar::-webkit-scrollbar:vertical {*/
    /*width: 11px;*/
/*}*/
.jnx-horizontal-scrollbar::-webkit-scrollbar:horizontal {
    height: 11px;
}
.jnx-horizontal-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

/* class to identify and hide template used for repeating fields */
.jnx-repeat-template {
    display: none;
}

/* identifies help text under fields */
.jnx-field-help {
}

/* Extra text generated for articleItem (ie. count, likes, saved) */
.jnx-extra-text {
    color: #a0a0a0;
    font-weight:400;
    font-size:.67em;
    /*height: 20px;*/
    vertical-align: bottom;
}

/* analytics pages */
.jnx-an-txt {
    text-shadow: 0 0;
    height: 29px;
}

/* Blinking border - used for traffic triangle */
@-webkit-keyframes borderBlink {
    from, to {
        opacity: 1
    }
    50% {
        opacity: 0
    }
}
@keyframes borderBlink {
    from, to {
        opacity: 0
    }
    50% {
        opacity: 1
    }
}
.borderBlink{
    -webkit-animation: borderBlink 500ms step-end infinite;
    animation: borderBlink 500ms step-end infinite;
}

/* Pulsing article counts on channels red:253, 199, 197*/
/*.jnx-count-pulse {*/
    /*-webkit-animation: jnx-count-pulse 3s;*/
    /*-webkit-animation-iteration-count: 1;*/
    /*!*-webkit-animation-delay: 2s;*!*/
    /*animation: jnx-count-pulse 3s;*/
    /*animation-iteration-count: 1;*/
    /*!*animation-delay: 2s;*!*/
/*}*/
/*@-webkit-keyframes xjnx-count-pulse {*/
    /*0% {*/
        /*background-color: rgba(255, 255, 255, 1);*/
        /*border-color: rgba(255, 255, 255, 1);*/
    /*}*/
    /*20% {*/
        /*background-color: rgb(253, 249, 148);*/
        /*border-color: rgb(253, 249, 148);*/
    /*}*/
    /*70% {*/
        /*background-color: rgb(253, 249, 148);*/
        /*border-color: rgb(253, 249, 148);*/
    /*}*/
    /*100% {*/
        /*background-color: rgba(255, 255, 255, 1);*/
        /*border-color: rgba(255,255,255,1);*/
    /*}*/
/*}*/

.jnx-line-count {
    text-shadow: 0  0;
}

.jnx-count-unread {
    background-color: #fffa79;      //  fff616
    border-color: #fffa79
}

.jnx-count-unseen {
    background-color: #ff7f50;
    border-color: #ff7f50;
}

/*.jnx-count-unseen-pulse {*/
    /*animation: jnx-count-unseen-pulse 2s;*/
    /*animation-iteration-count: 1;*/
    /*!*animation-delay: 2s;*!*/
/*}*/
/*@-webkit-keyframes jnx-count-unseen-pulse {*/
    /*0% {*/
        /*background-color: rgba(255, 255, 255, 1);*/
        /*border-color: rgba(255, 255, 255, 1);*/
    /*}*/
    /*20% {*/
        /*background-color: rgb(245, 159, 67);*/
        /*border-color: rgb(245, 159, 67);*/
    /*}*/
    /*70% {*/
        /*background-color: rgb(255, 217, 177);*/
        /*border-color: rgb(255, 217, 177);*/
    /*}*/
    /*100% {*/
        /*background-color: rgb(245, 198, 143);*/
        /*border-color: rgb(245, 198, 143);*/
    /*}*/
/*}*/

.jnx-delay {
    -webkit-animation: jnx-delay 30s;
    -webkit-animation-iteration-count: 1;
    /*-webkit-animation-delay: 2s;*/
    animation: jnx-delay 30s;
    /*animation-iteration-count: 1;*/
    /*animation-delay: 2s;*/
}
@-webkit-keyframes "jnx-delay" {
    0% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes "jnx-delay" {
    0% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.jnx-align-left {
    text-align: left;
}
.jnx-align-right {
    text-align: right;
}
.jnx-align-center {
    text-align: center;
}

/* For analytics boxes */
.jnx-box-shadow {
    box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.25);
}

/* For analytics user list */
.jnx-online {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin: 5px auto;
    background-image: -moz-radial-gradient(10px 10px 45deg, circle cover, rgb(86,139,187), rgb(0, 134, 255));
    background-image: -webkit-radial-gradient(10px 10px, circle cover, rgb(86,139,187), rgb(0, 134, 255));
    background-image: radial-gradient(10px 10px 45deg, circle cover, rgb(86,139,187), rgb(0, 134, 255));
}

/*  */
.jnx-traffic-widget {
    border-style:solid;
    border-color: rgb(32, 231, 27) transparent transparent;
    border-width: 20px 20px 0px 0px;
    position:absolute;
    top: 0;
    z-index: 10;
    display:none;
}

.jnx-table-width150 {
    min-width: 150px
}
.jnx-table-width200 {
    min-width: 200px
}
.jnx-table-width275 {
    min-width: 275px
}

.jnx-order-button {
    text-shadow:0 0px;margin: 0 0 0 0;width:40px;
}

#jnx-block-refresh.light {
    color: #545c64
}
#jnx-block-refresh.dark {
    color: #ffffff;
}

.hh-tour-active {
    opacity: 1 !important;
    display: inline-block !important;
}

.img_wrapper{
    position: relative;
//    padding-top: 75%;
    overflow: hidden;
}

.img_wrapper img{
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    /*-webkit-transition: opacity 150ms;*/
    /*-moz-transition: opacity 150ms;*/
    /*-ms-transition: opacity 150ms;*/
    /*transition: opacity 150ms;*/
}

.img_wrapper.loaded{
    opacity: 1;
}

/*!* jnx dark theme *!*/
/*.jnx-theme {                                                !* article item in articles list *!*/
/*    background-color: rgba(73, 73, 73, 1.0) !important;*/
/*    color: rgba(236, 236, 236, 1.0) !important;*/
/*}*/
/*.jnx-theme-link {                                           !* dates on right side of articles list *!*/
/*    color: #3291DD !important;*/
/*}*/
/*.jnx-theme-link-future {                                    !* future dates on right side of articles list *!*/
/*    color: #dd324c !important;*/
/*}*/
/*.jnx-theme-ad {                                             !* 'advertise here' in articles list *!*/
/*    background-color: rgba(53, 53, 53, 1.0) !important;*/
/*    color: #333 !important;*/
/*}*/
/*.jnx-theme-border {                                         !* border between article list items *!*/
/*    border-color: #6f6f6f !important;*/
/*}*/
/*.jnx-theme-article {                                        !* articleDisplay page *!*/
/*    background-color: rgba(83, 83, 83, 1.0) !important;*/
/*    color: rgba(236, 236, 236, 1.0) !important;*/
/*}*/

 /*jnx light theme */
.jnx-theme {
    background-color: rgba(255, 255, 255, 1.0);
    color: rgba(51, 51, 51, 1.0) !important;
}
.jnx-theme-link {
    color: #3291DD !important;
}
.jnx-theme-link-future {
    color: #dd324c !important;
}
.jnx-theme-ad {
    /*background-color: #ddd !important;*/
    color: #333 !important;
}
.jnx-theme-border {
    border-color: #ddd;
}
.jnx-theme-article {
    background-color: rgba(255, 255, 255, 1.0) !important;
    color: rgba(51, 51, 51, 1.0) !important;
}
.jnx-theme-article .jnx-advertisement {
    background-color: rgba(255, 255, 255, 1.0) !important;
}

/* Ad image shadows */
.jnx-ad-image {
    /*box-shadow: rgba(50, 50, 50, 0.560784) 3px 3px 15px 0px;*/
}
.jnx-ad-display div.fr-view table td {
    border: 0;
}
.jnx-ad-display div.fr-view table tr {
    border: 0;
}
.jnx-table-group {
    border-top: solid 1px rgb(235, 238, 240);
}
.jnx-table-group:nth-child(2n) {
    background-color: rgb(245, 247, 250);
}
.jnx-table-group:last-child {
    border-bottom: solid 1px rgb(235, 238, 240);
}

/* entryDisplay adjustments */
.jnx-dialog-noscroll {
    overflow-y: hidden !important;
}

/* vuetify tables padding adjustment */
.jnx-v-table-padding-10 {
    padding: 0 10px !important;
}

/* set table column header width to make table full width*/
.jnx-v-table-column-50 {
    width: 50%;
}

/* media query to show for narrow screens */
@media (max-width: 600px) {
    .jnx-wide {
        display: none !important;
    }
}
/* media query to show for wide screens */
@media (min-width: 601px) {
    .jnx-narrow {
        display: none !important;
    }
}

/* crosshair cursor */
.crosshair:hover {
    cursor: url('/images/zoom-in-cursor.svg'), crosshair;
}

/*************/
/* Other CSS */
/*************/
.tooltipsy
{
    color: #333;
    text-shadow: 0 1px 0 #f3f3f3;
    font-size: 0.8em;
    line-height: 1.3;
    font-family: 'Open Sans', sans-serif;
    width: 165px;
    margin: 0px auto;
    z-index: 10000;
    background-color: white;
    border-width: 0;
    padding: 0.7em;
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,.6);
    -moz-box-shadow: 0 0 12px rgba(0,0,0,.6);
    box-shadow: 0 0 12px rgba(0,0,0,.6);
    -webkit-background-clip: padding;
    background-clip: padding-box;
    -webkit-border-radius: .3125em;
    border-radius: .3125em;
    color: #333;
    text-shadow: 0 1px 0 #f3f3f3;
}

/* Google Maps adjustment */
#map_canvas > div > div:nth-child(1) > div > div:nth-child(3) > div:nth-child(3) > div > div.gm-style-iw {
    overflow: visible !important;
}

/* Mobiscroll adjustents */
div.dwo {                                /* make background not quite so darl */
    background: rgba(0, 0, 0, 0.40);
    filter: Alpha(Opacity=40);
}

/* Flexslider adjustments for analytics page */
div#analytics .flexslider {
    margin: inherit;
    background: inherit;
    border: inherit;
    position: inherit;
    -webkit-border-radius: inherit;
    -moz-border-radius: inherit;
    -o-border-radius: inherit;
    border-radius: inherit;
    -webkit-box-shadow: inherit;
    -moz-box-shadow: inherit;
    -o-box-shadow: inherit;
    box-shadow: inherit;
    zoom: inherit;
}

div#analytics .flexslider ul.slides{
    padding:0px;
}

/*Add to homescreen adjustments*/
.ath-container p {
    text-shadow: 0 0 0 #fff;
}

/*************************/
/* Bootstrap adjustments */
/*************************/
input[type="radio"], input[type="checkbox"] {
    /*margin: 4px 0 0;*/
    margin-top: -3px !important;
    /*line-height: normal;*/
}

/*Prevent bootstrap style on forms*/
div[role="heading"] legend {
    display: inherit;
    width: inherit;
    padding: inherit;
    margin-bottom: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    border: inherit;
    border-bottom: inherit;
}

/*Position search box on dataTables better*/
div.dt-bootstrap div.col-sm-6 {
    width: inherit;
    padding-left: 0;
    margin-left: 16px;
}
div.dataTables_filter label {
    margin-bottom: 0;
}

li.dt-button a {
    text-shadow: 0 /*{a-page-shadow-x}*/ 0px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/ #f3f3f3 /*{a-page-shadow-color}*/;
}

/* remove text shadow */
/* Button up */
.ui-page-theme-b .ui-btn,
html .ui-bar-b .ui-btn,
html .ui-body-b .ui-btn,
html body .ui-group-theme-b .ui-btn,
html head + body .ui-btn.ui-btn-b,
    /* Button visited */
.ui-page-theme-b .ui-btn:visited,
html .ui-bar-b .ui-btn:visited,
html .ui-body-b .ui-btn:visited,
html body .ui-group-theme-b .ui-btn:visited,
html head + body .ui-btn.ui-btn-b:visited {
    background-color: 			#333 /*{b-bup-background-color}*/;
    border-color:	 		#1f1f1f /*{b-bup-border}*/;
    color: 					#fff /*{b-bup-color}*/;
    text-shadow: 0 /*{b-bup-shadow-x}*/ 0px /*{b-bup-shadow-y}*/ 0 /*{b-bup-shadow-radius}*/ #111 /*{b-bup-shadow-color}*/;
}
/************************************/
/* Bootstrap css for upload buttons */
/************************************/
.btn:first-child {
}
button.btn, input[type="submit"].btn {
}
.btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    text-align: center;
    text-shadow: 0 0px 0px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    border: 1px solid #cccccc;
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-bottom-color: #b3b3b3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0)';
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
/*label, input, button, select, textarea {*/
    /*font-size: 14px;*/
    /*font-weight: normal;*/
    /*line-height: 20px;*/
/*}*/
/*button, html input[type="button"], input[type="reset"], input[type="submit"] {*/
    /*cursor: pointer;*/
    /*-webkit-appearance: button;*/
/*}*/
/*button, input, select, textarea {*/
    /*margin: 0;*/
    /*font-size: 100%;*/
    /*vertical-align: middle;*/
/*}*/

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}

@-moz-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}

@-ms-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}

@-o-keyframes progress-bar-stripes {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 40px 0;
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}

.progress {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f7f7f7;
    background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f9f9f9));
    background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
    background-image: linear-gradient(to bottom, #f5f5f5, #f9f9f9);
    background-repeat: repeat-x;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff9f9f9', GradientType=0);
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress .bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #0e90d2;
    background-image: -moz-linear-gradient(top, #149bdf, #0480be);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#149bdf), to(#0480be));
    background-image: -webkit-linear-gradient(top, #149bdf, #0480be);
    background-image: -o-linear-gradient(top, #149bdf, #0480be);
    background-image: linear-gradient(to bottom, #149bdf, #0480be);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf', endColorstr='#ff0480be', GradientType=0);
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: width 0.6s ease;
    -moz-transition: width 0.6s ease;
    -o-transition: width 0.6s ease;
    transition: width 0.6s ease;
}

.progress .bar + .bar {
    -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.progress-striped .bar {
    background-color: #149bdf;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    -o-background-size: 40px 40px;
    background-size: 40px 40px;
}

.progress.active .bar {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -moz-animation: progress-bar-stripes 2s linear infinite;
    -ms-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}

.progress-danger .bar,
.progress .bar-danger {
    background-color: #dd514c;
    background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
    background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
    background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
    background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffc43c35', GradientType=0);
}

.progress-danger.progress-striped .bar,
.progress-striped .bar-danger {
    background-color: #ee5f5b;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-success .bar,
.progress .bar-success {
    background-color: #5eb95e;
    background-image: -moz-linear-gradient(top, #62c462, #57a957);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
    background-image: -webkit-linear-gradient(top, #62c462, #57a957);
    background-image: -o-linear-gradient(top, #62c462, #57a957);
    background-image: linear-gradient(to bottom, #62c462, #57a957);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff57a957', GradientType=0);
}

.progress-success.progress-striped .bar,
.progress-striped .bar-success {
    background-color: #62c462;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-info .bar,
.progress .bar-info {
    background-color: #4bb1cf;
    background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#339bb9));
    background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
    background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
    background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff339bb9', GradientType=0);
}

.progress-info.progress-striped .bar,
.progress-striped .bar-info {
    background-color: #5bc0de;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-warning .bar,
.progress .bar-warning {
    background-color: #faa732;
    background-image: -moz-linear-gradient(top, #fbb450, #f89406);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
    background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
    background-image: -o-linear-gradient(top, #fbb450, #f89406);
    background-image: linear-gradient(to bottom, #fbb450, #f89406);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
}

.progress-warning.progress-striped .bar,
.progress-striped .bar-warning {
    background-color: #fbb450;
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

/***********************************/
/*          Bounce effect          */
/***********************************/

/* Webkit, Chrome and Safari */
@-webkit-keyframes bounce {
    0% {
        -webkit-transform:translateY(-30%);
        -webkit-transform:translateX(-30%);
    }
    5% {
        -webkit-transform:translateY(-30%);
        -webkit-transform:translateX(-30%);
    }
    15% {
        -webkit-transform:translateY(0);
        -webkit-transform:translateX(0);
    }
    30% {
        -webkit-transform:translateY(-20%);
        -webkit-transform:translateX(-20%);
    }
    40% {
        -webkit-transform:translateY(0%);
        -webkit-transform:translateX(0%);
    }
    50% {
        -webkit-transform:translateY(-13%);
        -webkit-transform:translateX(-13%);
    }
    60% {
        -webkit-transform:translateY(0%);
        -webkit-transform:translateX(0%);
    }
    70% {
        -webkit-transform:translateY(-7%);
        -webkit-transform:translateX(-7%);
    }
    80% {
        -webkit-transform:translateY(0%);
        -webkit-transform:translateX(0%);
    }
    90% {
        -webkit-transform:translateY(-3%);
        -webkit-transform:translateX(-3%);
    }
    100% {
        -webkit-transform:translateY(0);
        -webkit-transform:translateX(0);
    }
}

 /*Mozilla Firefox 15 below*/
@-moz-keyframes bounce {
    0% {
        -moz-transform:translateY(-30%);
        opacity: 0;
    }
    5% {
        -moz-transform:translateY(-30%);
        opacity: 0;
    }
    15% {
        -moz-transform:translateY(0);
    }
    30% {
        -moz-transform:translateY(-20%);
    }
    40% {
        -moz-transform:translateY(0%);
    }
    50% {
        -moz-transform:translateY(-13%);
    }
    60% {
        -moz-transform:translateY(0%);
    }
    70% {
        -moz-transform:translateY(-7%);
    }
    80% {
        -moz-transform:translateY(0%);
    }
    90% {
        -moz-transform:translateY(-3%);
    }
    100% {
        -moz-transform:translateY(0);
        opacity: 1;
    }
}

 /*Opera 12.0*/
@-o-keyframes bounce {
    0% {
        -o-transform:translateY(-30%);
        opacity: 0;
    }
    5% {
        -o-transform:translateY(-30%);
        opacity: 0;
    }
    15% {
        -o-transform:translateY(0);
    }
    30% {
        -o-transform:translateY(-20%);
    }
    40% {
        -o-transform:translateY(0%);
    }
    50% {
        -o-transform:translateY(-13%);
    }
    60% {
        -o-transform:translateY(0%);
    }
    70% {
        -o-transform:translateY(-7%);
    }
    80% {
        -o-transform:translateY(0%);
    }
    90% {
        -o-transform:translateY(-3%);
    }
    100% {
        -o-transform:translateY(0);
        opacity: 1;
    }
}

/*W3, Opera 12+, Firefox 16+*/
@keyframes bounce {
    0% {
        transform:translateY(-100%);
        transform:translateX(-100%);
        opacity: 0;
    }
    5% {
        transform:translateY(-100%);
        transform:translateX(-100%);
        opacity: 0;
    }
    15% {
        transform:translateY(0);
        transform:translateX(0);
    }
    30% {
        transform:translateY(-50%);
        transform:translateX(-50%);
    }
    40% {
        transform:translateY(0%);
        transform:translateX(0%);
    }
    50% {
        transform:translateY(-30%);
        transform:translateX(-30%);
    }
    70% {
        transform:translateY(0%);
        transform:translateX(0%);
    }
    80% {
        transform:translateY(-15%);
        transform:translateX(-15%);
    }
    90% {
        transform:translateY(0%);
        transform:translateX(0%);
    }
    95% {
        transform:translateY(-7%);
        transform:translateX(-7%);
    }
    97% {
        transform:translateY(0%);
        transform:translateX(0%);
    }
    99% {
        transform:translateY(-3%);
        transform:translateX(-3%);
    }
    100% {
        transform:translateY(0);
        transform:translateX(0);
        opacity: 1;
    }
}

/*********************/
/*Bounce on left side (NOT BEING USED RIGHT NOW)*/
/*********************/
.animated {
    -webkit-animation-duration: 600ms;
    -moz-animation-duration: 600ms;
    -ms-animation-duration: 600ms;
    -o-animation-duration: 600ms;
    animation-duration: 600ms;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes bounceleft {
    0%, 50%, 100% {-webkit-transform: translateX(0); -webkit-transition-timing-function: ease-out;}
    25% {-webkit-transform: translateX(20px);-webkit-transition-timing-function: ease-in;}
    75% {-webkit-transform: translateX(10px);-webkit-transition-timing-function: ease-in;}
}

/*@-moz-keyframes bounceleft {*/
    /*0%, 20%, 50%, 80%, 100% {-moz-transform: translateX(0);}*/
    /*40% {-moz-transform: translateX(30px);}*/
    /*60% {-moz-transform: translateX(15px);}*/
/*}*/

/*@-ms-keyframes bounceleft {*/
    /*0%, 20%, 50%, 80%, 100% {-ms-transform: translateX(0);}*/
    /*40% {-ms-transform: translateX(30px);}*/
    /*60% {-ms-transform: translateX(15px);}*/
/*}*/

/*@-o-keyframes bounceleft {*/
    /*0%, 20%, 50%, 80%, 100% {-o-transform: translateX(0);}*/
    /*40% {-o-transform: translateX(30px);}*/
    /*60% {-o-transform: translateX(15px);}*/
/*}*/
/*@keyframes bounceleft {*/
    /*0%, 20%, 50%, 80%, 100% {transform: translateX(0);}*/
    /*40% {transform: translateX(30px);}*/
    /*60% {transform: translateX(15px);}*/
/*}*/

.bounceleft {
    -webkit-animation-name: bounceleft;
    -moz-animation-name: bounceleft;
    -ms-animation-name: bounceleft;
    -o-animation-name: bounceleft;
    animation-name: bounceleft;
}

/**************************************/
/* Classes for imported rss documents */
/**************************************/
div.markdown-body div.jnx-rssimport .float_left {
    float: left;
    margin: 5px 30px 30px 0;
}
div.markdown-body div.jnx-rssimport .float_right {
    float: right;
    margin: 5px 0px 30px 30px;
}
/* vuetify caused some BI articles that have row class to get -12 margin */
div.jnx-rssimport section.row {
    display: contents;
}

/*************************/
/* Termly cookie consent */
/*************************/
section#consent, div[class^="termly-consent-banner-content"] {
    opacity: 1;
    background-color: rgba(255, 94, 87, 1);
    z-index: 9999998;
}

/****************************************************/
/* Adjustments to allow Fontawesome version 5 icons */
/****************************************************/
/*div[data-role="footer"] li a {*/
    /*height: 56px;*/
/*}*/

/*!*div[data-role="footer"] li a [class~="fa-"]{*!*/
    /*!*height: 56px;*!*/
/*!*}*!*/
/*div[data-role="footer"] li .fa-bell:before {*/
    /*font-size: 16px;*/
/*}*/

/***************/
/* VueJS stuff */
/***************/
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

/*****************/
/* Zendesk stuff */
/*****************/
iframe#launcher {
    bottom: 50px !important;
}

/*****************/
/* Vuetify stuff */
/*****************/
div.jnx-vuetify-modal div.v-application--wrap {
    min-height: 0;
}
div.v-application--wrap {
    min-height: fit-content;
}
/*** in popup filter give text a little space ***/
div.v-application--wrap div.v-input__slot {
    padding-left: 4px;
}
.mdi-facebook {
    color: #3b5998 !important;
}
.mdi-twitter {
    color: #55acee !important;
}
.mdi-youtube {
    color: #c8232c !important;
}
.mdi-linkedin {
    color: #1784bb !important;
}
.mdi-instagram {
    background: radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%) !important;
}
.fa-telegram {
    color: #3979a0 !important;
}
/*** trade panel buy sell buttons ***/
.jnx-tradePanel-buy-sell-buttons {
    color: white !important;
}

/****************/
/* Froala stuff */
/****************/
.fr-view img.fr-dib.fr-fil {
    margin-left: 0;
    margin-right: 12px;
    text-align: unset;
    float: left;
}
.fr-view img.fr-dib.fr-fir {
    margin-left: 12px;
    margin-right: 0;
    text-align: unset;
    float: right;
}

.fr-ad .fr-view p {
    margin: 0;
    overflow: visible;
}

.fr-ad .fr-view img.fr-dib.fr-fil {
    margin-right: 8px;
}
.fr-ad .fr-view img.fr-dib.fr-fir {
    margin-left: 8px;
}
#ads-adsList .fr-view {
    font-size: 15px;
}
.fr-box {
    margin-bottom: 7px;
}

/********************/
/* zendesk articles */
/********************/
#help-page iframe {
    width: 100%;
}

#help-page img {
    max-width: 100%;
}

#help-page h1 {
    font-size: 2em;
}

#help-page h2 {
    font-size: 1.5em;
}

#help-page h3 {
    font-size: 1.17rem;
}

#help-page h4 {
    font-size: 1rem;
}

#help-page h5 {
    font-size: .83rem;
}

#help-page h6 {
    font-size: .67rem;
}

/**************************/
/* Embedded twitter tweet */
/**************************/
blockquote.twitter-tweet {
    display: inline-block;
    font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 16px;
    border-color: #eee #ddd #bbb;
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    margin: 10px 5px;
    padding: 0 16px 16px 16px;
    /*max-width: 468px;*/
}

blockquote.twitter-tweet p {
    font-size: 16px;
    font-weight: normal;
    line-height: 20px;
}

blockquote.twitter-tweet a {
    color: inherit;
    font-weight: normal;
    text-decoration: none;
    outline: 0 none;
}

blockquote.twitter-tweet a:hover,
blockquote.twitter-tweet a:focus {
    text-decoration: underline;
}

/*****************/
/* trader2 stuff */
/*****************/
div[data-jnx-component^="trading2"] table {
    display: table;
}
div[data-jnx-component^="trading2"] table thead {
    position: sticky;
    z-index: 1;
}
div[data-jnx-component^="trading2"] table th {
    background-color: '#e6f2ff';
}

.scrollbar1::-webkit-scrollbar {
    width: 4px;
}

.scrollbar1::-webkit-scrollbar-track {
    /*border-radius: 8px;*/
    background-color: #e7e7e7;
    border: 1px solid #cacaca;
}

/* #d55959 orange */
.scrollbar1::-webkit-scrollbar-thumb {
    /*border-radius: 8px;*/
    background-color: #f90;
}

.jnx-tradePanel-current-item-on {
    background-color: #0c778b !important;
}
.jnx-tradePanel-current-item-over {
    background-color: rgba(12, 119, 139, 0.74) !important;
}

.jnx-tradepanel-online-dot {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    background-image: -moz-radial-gradient(10px 10px 45deg, circle cover, rgb(86,139,187), rgb(0, 134, 255));
    background-image: -webkit-radial-gradient(10px 10px, circle cover, rgb(86,139,187), rgb(0, 134, 255));
    background-image: radial-gradient(10px 10px 45deg, circle cover, rgb(86,139,187), rgb(0, 134, 255));
}
.jnx-tradepanel-offline-dot {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    background-image: -moz-radial-gradient(10px 10px 45deg, circle cover, #b1b0b0, #b1b0b0);
    background-image: -webkit-radial-gradient(10px 10px, circle cover, #b1b0b0, #b1b0b0);
    background-image: radial-gradient(10px 10px 45deg, circle cover, #b1b0b0, #b1b0b0);
}


/***** TEST STUFF *****/
/*.notification-enter-active {*/
/*    animation: notification-in 5s;*/
/*}*/
/*.notification-leave-active {*/
/*    animation: notification-in .5s reverse;*/
/*}*/
/*@keyframes notification-in {*/
/*    0% {*/
/*        transform: scale(0);*/
/*    }*/
/*    !*50% {*!*/
/*    !*    transform: scale(1.5);*!*/
/*    !*}*!*/
/*    100% {*/
/*        transform: scale(1);*/
/*    }*/
/*}*/

/*
    option 1:   enter:          'transform: translateX(140px);'
                enter-active:   'transition: all 3s ease-out;'
                enter-to:       'transform: translateX(0px);'
    option 2:   enter:          'transform: translateX(140px);'  << NEEDED TO PREVENT JUMP
                enter-active:   'transition: all 3s ease-out;'   << NEEDED TO TRIGGER ANIMATION
                enter-to:       'animation: notification-insert 30s;'
 */

/*!* WHEN ELEMENT IS BEING CREATED (EVEN IF NOT DISPLAYED) *!*/
/*!* added before element is inserted (even though not displayed), one frame only *!*/
/*.notification-enter {*/
/*    transform: translateX(320px);*/
/*}*/
/*!* added before element is inserted, removed when animation finished (use for duration, delay, curve) *!*/
/*.notification-enter-active {*/
/*    transition: all 3s ease-out;*/
/*}*/
/*!* applied one frame after element is inserted, removed when animation finished *!*/
/*!* also added on show *!*/
/*.notification-enter-to {*/
/*    !*transform: translateX(0px);*!*/
/*    animation: notification-insert 30s;*/
/*}*/
/*!* ALL CLASSES REMOVED WHEN ELEMENT CREATION COMPLETED *!*/
/*!* WHEN ELEMENT IS DISPLAYED *!*/
/*!* added on show *!*/
/*.notification-move {*/
/*}*/
/*!* ALL CLASSES REMOVED WHEN SHOW ANIMATION FINISHED *!*/
/*!* WHEN ELEMENT HIDDEN *!*/
/*.notification-leave {*/
/*    transform: translateX(0px);*/
/*}*/
/*.notification-leave-active {*/
/*    transition: all 3s ease-in;*/
/*}*/
/*.notification-leave-to {*/
/*    transform: translateX(320px);*/
/*    !*animation: notification-remove 30s;*!*/
/*}*/
/*!* ALL CLASSES REMOVED WHEN HIDE ANIMATION FINISHED AND DISPLAY=NONE AT END *!*/

/*@keyframes notification-remove {*/
/*    0% {*/
/*        transform: translateX(0px);*/
/*        !*transform: scaleY(0);*!*/
/*    }*/
/*    !*50% {*!*/
/*    !*    transform: translateX(300px);*!*/
/*    !*    transform: scaleY(1);*!*/
/*    !*}*!*/
/*    100% {*/
/*        transform: translateX(320px);*/
/*    }*/
/*}*/
/*@keyframes notification-insert {*/
/*    0% {*/
/*        transform: translateX(320px);*/
/*        !*transform: scaleY(0);*!*/
/*    }*/
/*    !*50% {*!*/
/*    !*    transform: translateX(300px);*!*/
/*    !*    transform: scaleY(1);*!*/
/*    !*}*!*/
/*    100% {*/
/*        transform: translateX(0px);*/
/*    }*/
/*}*/