@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,400;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); 

.devcomment {
    font-size: .8rem;
    color: orange;
    weight: 900;
}

a {
    -webkit-touch-callout: none; /* Disable callout on long press for iOS Safari */
}

.TXT__bold {
    font-weight: 900 !important;
    font-weight: bold;
}

.TXT__strong {
    font-weight: 400 !important;
    font-weight: bold;
}

.TXT__tiny {
    font-size:.6rem;
    position:relative;bottom:2px;
}

.TXT__small {
    font-size:.8rem;
}
.TXT__smallBold {
    font-size:.7rem;
    font-weight:900;
}

.TXT__light {
    font-weight:300 !important;
}

.TXT__med {
    font-size:1rem;
}

/* Color overrides Foreground*/
.FG__filter {
    color: #87269b !important;
}
.FG__filter:hover {
    color: #c34adb !important;
}
.FG__lilac {
    color: #b753f1 !important;
}
.FG__h__lilac:hover {
    color: #c370f3 !important;
}
.FG__purple {
    color: #7700c6 !important;
}
.FG__h__purple:hover {
    color: #7700c6 !important;
}
.FG__zenpurple {
    color: #c441ec !important;
}
.FG__h__zenpurple:hover {
    color: #c881e9 !important;
}
.FG__blue {
    color: #1665ce !important;
}
.FG__h__blue:hover {
    color: #1665ce !important;
}
.FG__zenblue {
    color: #0b8bd4 !important;
}
.FG__h__zenblue:hover {
    color: rgb(111, 187, 250) !important;
}
.FG__cyan {
    color: #00afc6 !important;
}
.FG__h__cyan:hover {
    color: #00afc6 !important;
}
.FG__green {
    color: #069b06 !important;
}
.FG__h__green:hover {
    color: #069b06 !important;
}
.FG__zengreen {
    color: #7ebb1d !important;
}
.FG__h__zengreen:hover {
    color: #9cdf31 !important;
}
.FG__olive {
    color: #85c54a !important;
}
.FG__h__olive:hover {
    color: #85c54a !important;
}
.FG__lime {
    color: #03f503 !important;
}
.FG__h__lime:hover {
    color: #03f503 !important;
}
.FG__yellow {
    color: #d8d50e !important;
}
.FG__h__yellow:hover {
    color: #d8d50e !important;
}
.FG__gold {
    color: #c69800 !important;
}
.FG__h__gold:hover {
    color: #c69800 !important;
}
.FG__orangegold {
    color: #c68700 !important;
}
.FG__h__orangegold:hover {
    color: #dfa608 !important;
}
.FG__tangerine {
    color: #ff9735 !important;
}
.FG__h__tangerine:hover {
    color: #f8ad67 !important;
}
.FG__orange {
    color: #c66000 !important;
}
.FG__h__orange:hover {
    color: #c66000 !important;
}
.FG__red {
    color: #c90c0c !important;
}
.FG__h__red:hover {
    color: #c90c0c !important;
}
.FG__magenta {
    color: #c90c81 !important;
}
.FG__h__magenta:hover {
    color: #c90c7a !important;
}
.FG__ltred {
    color: #ff3939 !important;
}
.FG__h__ltred:hover {
    color: #ff3939 !important;
}
.FG__white {
    color: #ffffff !important;
}
.FG__h__white:hover {
    color: #ffffff !important;
}
.FG__grey {
    color: #aaaaaa !important;
}
.FG__h__grey:hover {
    color: #aaaaaa !important;
}
.FG__black {
    color: #000000 !important;
}
.FG__h__black:hover {
    color: #000000 !important;
}
.FG__required {
    color: var(--roleRequiredh) !important;
}

.FG__suggested {
    color: var(--roleSuggestedh) !important;
}

.FG__optional {
    color: var(--roleOptionalh) !important;
}

.FG__okblue {
    color: #0894f1 !important;
}

.FG__alert {
    color: #ffb01e !important;
}

.FG__critical {
    color: #ff4f4f !important;
}
/* Color overrides Background*/
.BG__purple {
    background-color: #7700c6 !important;
}
.BG__h__purple:hover {
    background-color: #7700c6 !important;
}
.BG__blue {
    background-color: #1665ce !important;
}
.BG__h__blue:hover {
    background-color: #1665ce !important;
}
.BG__cyan {
    background-color: #00afc6 !important;
}
.BG__h__cyan:hover {
    background-color: #00afc6 !important;
}
.BG__green {
    background-color: #069b06 !important;
}
.BG__h__green:hover {
    background-color: #069b06 !important;
}
.BG__olive {
    background-color: #59920e !important;
}
.BG__h__olive:hover {
    background-color: #7bc41c !important;
}
.BG__lime {
    background-color: #3fbd19 !important;
}
.BG__h__lime:hover {
    background-color: #4edd22 !important;
}
.BG__yellow {
    background-color: #d8d50e !important;
}
.BG__h__yellow:hover {
    background-color: #d8d50e !important;
}
.BG__gold {
    background-color: #c69800 !important;
}
.BG__h__gold:hover {
    background-color: #c69800 !important;
}
.BG__orange {
    background-color: #c66000 !important;
}
.BG__h__orange:hover {
    background-color: #c66000 !important;
}
.BG__red {
    background-color: #c90c0c !important;
}
.BG__h__red:hover {
    background-color: #c90c0c !important;
}
.BG__magenta {
    background-color: #c90c90 !important;
}
.BG__h__magenta:hover {
    background-color: #c90c7a !important;
}
.BG__white {
    background-color: #ffffff !important;
}
.BG__h__white:hover {
    background-color: #ffffff !important;
}
.BG__grey {
    background-color: #808080 !important;
}
.BG__h__grey:hover {
    background-color: #afafaf !important;
}
.BG__dkgrey {
    background-color: #252525 !important;
}
.BG__h__dkgrey:hover {
    background-color: #2e2e2e !important;
}
.BG__black {
    background-color: #000000 !important;
}
.BG__h__black:hover {
    background-color: #000000 !important;
}
.BG__transparent {
    background-color: transparent !important;
}
.BG__h__transparent:hover {
    background-color: transparent !important;
}



.FG__severityMild{color: var(--severityMild);}
.FG__severityModerate{color: var(--severityModerate);}
.FG__severitySevere{color: var(--severitySevere);}
.FG__statusHospital{color: var(--statusHospital);}
.FG__statusUrgentcare{color: var(--statusUrgentcare);}
.FG__statusDoctor{color: var(--statusDoctor);}
.FG__statusRecoverhome{color: var(--statusRecoverhome);}
.FG__statusLightduty{color: var(--statusLightduty);}
.FG__statusFullduty{color: var(--statusFullduty);}
.FG__statusMaxrecovery{color: var(--statusMaxrecovery);}
.FG__statusTerminated{color: var(--statusTerminated);}
.FG__statusResigned{color: var(--statusResigned);}
.FG__statusDeath{color: var(--statusDeath);} 

.BG__severityMild{background-color: var(--severityMild-a);}
.BG__severityModerate{background-color: var(--severityModerate-a);}
.BG__severitySevere{background-color: var(--severitySevere-a);}
.BG__statusHospital{background-color: var(--statusHospital-a);}
.BG__statusUrgentcare{background-color: var(--statusUrgentcare-a);}
.BG__statusDoctor{background-color: var(--statusDoctor-a);}
.BG__statusRecoverhome{background-color: var(--statusRecoverhome-a);}
.BG__statusLightduty{background-color: var(--statusLightduty-a);}
.BG__statusFullduty{background-color: var(--statusFullduty-a);}
.BG__statusMaxrecovery{background-color: var(--statusMaxrecovery-a);}
.BG__statusTerminated{background-color: var(--statusTerminated-a);}
.BG__statusResigned{background-color: var(--statusResigned-a);}
.BG__statusDeath{background-color: var(--statusDeath-a);}

.BG__redtab{background-color: var(--redtab);}
.BG__bluetab{background-color: var(--bluetab);}
.BG__greentab{background-color: var(--greentab);}
.BG__purpletab{background-color: var(--purpletab);}
.BG__cyantab{background-color: var(--cyantab);}
.BG__orangetab{background-color: var(--orangetab);}
.BG__goldtab{background-color: var(--goldtab);}

td {
    padding: 0px !important;
    margin: 0px !important;
}

.active {
    box-shadow: none !important;
}

.nav-center {
    text-align: center;
}

.nav-center ul.nav {
    display: inline-block;
}

.nav-center ul.nav li {
    display: inline a;
    float: left;
}

.clear {
    clear: both;
}

.center {
    text-align: center;
    margin: 0 auto;
}

.divCenter, .centerThis {
    display:block;
    width: 100%;
    text-align: center;
}

.noGutter {
    padding: 0px;
}

html {
    scroll-behavior: smooth;
}

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

body,
html {
    font-family: 'Lato', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    color: var(--bodyFont);
    height: 100%;
    width: 100%;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

body.dark{background-color: var(--bodyBg-dark);color: var(--bodyFont-dark);}
body.light{background-color: var(--bodyBg-light);color: var(--bodyFont-light);}

body.printpdf {
    background-color: white;
    color: black;
}

::-webkit-scrollbar {
    display: none;
}

@media (max-width: 768px) {

    body,
    html {
        font-size: 15px;
    }
}

@media (max-width: 576px) {

    body,
    html {
        font-size: 14px;
    }
}

/* headings */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
    margin: 0;
    text-align: center;
    padding: 10px 0 3px 0;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
    font-weight: 300;
}

h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: .8rem;
}

h5 {
    font-size: .6rem;
}

h6 {
    font-size: .4rem;
}

hr {
    border: 2px solid var(--hr);
    border-radius: 4px;
    width: 80%;
    margin-top: 8px;
    margin-bottom: 8px;
}

hr.thick {
    border: 5px solid var(--hr);
    border-radius: 5px;
    width: 70%;
    margin-top: 8px;
    margin-bottom: 8px;
}

hr.thin {
    border: 1px solid var(--hr);
    width: 90%;
    margin-top: 8px;
    margin-bottom: 8px;
}
hr.hidden {
    border: 0px;
    width: 90%;
    margin-top: 8px;
    margin-bottom: 8px;
}

fieldset.adminButtons{border:0px;border-top:1px solid #77777750;padding:0px;margin:0px;padding-top:12px;}
fieldset.adminButtons legend{margin-left:50px;padding:0 5px;font-size:.9rem;}

hr.grey {
    width: 100%;
    margin-top: 12px;
    margin-bottom: 28px;
    border: 2px solid grey;
}

hr.opaque {
    width: 100%;
    margin-top: 12px;
    margin-bottom: 28px;
    border: 1px dotted white;
}

.sectionBreakTitle{width:100%;display:table;}
.sectionBreakTitle div.breakStart{display:table-cell;vertical-align:middle;width:5%;}
.sectionBreakTitle div.breakStart span{display:block;height:4px;background-color:#ffffff30;width:100%;}
.sectionBreakTitle div.breakTitle{display:table-cell;vertical-align:middle;white-space:nowrap;padding:0 12px;font-weight:900;font-size:1.1rem;}
.sectionBreakTitle div.breakEnd{display:table-cell;vertical-align:middle;width:95%;}
.sectionBreakTitle div.breakEnd span{display:block;height:4px;background-color:#ffffff30;width:100%;}

/* @media queries */

@media (max-width: 768px) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        padding: 0 30px;
    }
}

@media (max-width: 568px) {
    h1 {
        position: relative;
        top: -20px;
    }

    h1 {
        margin-top: 20px;
        font-size: 2rem;
        text-align: left;
        padding-left: 0px !important;
        margin-left: -10px;
    }

    h1 span.icon {
        width: 32px;
        height: 32px;
        top: 8px;
    }
}

div.icon.icon-inline,
div.icon.inline {
    display: inline-block;
    position: relative;
    top: 2px;
}

/* MAIN NAVIGATION */

-webkit-tap-highlight-color:grey;

.noSelect {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.noSelect:focus {
    outline: none !important;
}

/* ####################### NEW NAV ############################ */

#navBar {
    background-color: var(--navBar);
    transition: 0.4s;
    position: fixed;
    width: 100%;
    height: 100px;
    top: 0;
    z-index: 9999;
    border-bottom:2px solid black;
}

body.dark #navBar{background-color: var(--navBar-dark);}
body.light #navBar{background-color: var(--navBar-light);}


/* Style the logo */

#navBar #logo {
    position: absolute;
    transition: 0.4s;
    width: 220px;
    height: 60px;
    z-index: 999;
    top:5px;left:5px;
}

#navBar #logo a {
    background-image: var(--sitelogo);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    display: block;
    max-width: 100%;
    height: 100%;
    text-align: left;
    cursor: pointer;
    z-index: 99;
}

body.dark #navBar #logo a{background-image: var(--sitelogo-dark);}
body.light #navBar #logo a{background-image: var(--sitelogo-light);}

#navBar #logo a:hover {
    animation: pulse;
    animation-duration: .5s;
}

#navBar #logo a img {
    height: 100%;
}

/* policyholder tab and control */
.policyholderPageLogoContainer{width:120px;height:120px;margin:-20px auto 12px auto;}

.policyholderPageLogo{
    display: inline-block;
    position: relative;
    top: 5px;
    left: 9px;
    background-position: center center;
    background-size: contain;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    transition: all 0.2s ease-in-out;}

#policyholderTab{display:table;position:absolute;left:0px;bottom:0px;width:100%;height:30px;}

.policyholderTabPt1{width:5%;display:table-cell;text-align:center;vertical-align:bottom;}
.policyholderTabPt2{width:max-content;display:table-cell;text-align:center;vertical-align:middle;}
.policyholderTabPt3{width:95%;display:table-cell;text-align:center;vertical-align:bottom;}
#policyholderTab .policyholderControl{height:15px;border-top:1px solid #ffffff30;text-align:center;}
#policyholderTab .policyholderTabContent{height:30px;width:max-content;white-space:nowrap;}
#policyholderTab .policyholderTabBG{border:1px solid #ffffff30;border-bottom:none;border-top-left-radius:8px;border-top-right-radius:8px;height:23px;position:relative;top:-8px;}
#policyholderTab .policyholderTabButton{position:relative;top:-28px;}
#policyholderTab .policyholderTabButton #policyholderLogo{
    display: inline-block;
    position: relative;
    top: 5px;
    left: 9px;
    background-position: center center;
    background-size: contain;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    transition: all 0.2s ease-in-out;}
#policyholderTab .policyholderTabButton #policyholderName{display:inline-block;position:relative;top:-1px;font-size:.7rem;text-indent:14px;padding-right:3px;}
#policyholderTab .policyholderExtra{height:1px;width:100%;position:relative;top:-14px;}

body.dark #policyholderTab .policyholderControl{border-color: #ffffff20;}
body.dark #policyholderTab .policyholderTabBG{border-color: #ffffff20;}
body.dark #policyholderTab .policyholderExtra{
    background: -moz-linear-gradient(left,  rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to right,  rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#12ffffff',GradientType=1 );
}
body.light #policyholderTab .policyholderControl{border-color: #00000030;}
body.light #policyholderTab .policyholderTabBG{border-color: #00000030;}
body.light #policyholderTab .policyholderExtra{
    background: -moz-linear-gradient(left,  rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to right,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#00000000',GradientType=1 );
}

/* Style the navbar links */

#navBar #menuLinks {
    position: absolute;
    right: 90px;
    top: 30px;
    width: max-content;
    min-width: 500px;
    text-align: right;
    transition: 0.4s;
    font-size: .9rem;
    z-index:999;
}

#navBar #menuLinks ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#navBar #menuLinks li {
    display: inline-block;
}

#navBar #menuLinks li a {
    position: relative;
    text-align: center;
    display: block;
    width: max-content;
    padding: 2px 6px;
    margin: 0px 8px;
    text-decoration: none;
}

body.dark #navBar #menuLinks li a{border-bottom: 3px solid var(--menuUnderline-dark);}
body.light #navBar #menuLinks li a{border-bottom: 3px solid var(--menuUnderline-light);}

#navBar #menuLinks li a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: -3px;
    left: 0;
    background-color: var(--menuLinks);
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
}

body.dark #navBar #menuLinks li a::before{background-color: var(--menuLinks-dark);}
body.light #navBar #menuLinks li a::before{background-color: var(--menuLinks-light);}

#navBar #menuLinks li a:hover::before {
    visibility: visible;
    transform: scaleX(1);
}

#navBar #menuLinks li a span.menuText {
    color: var(--menuText);
    opacity: .67;
    font-weight: 900;
}

body.dark #navBar #menuLinks li a span.menuText{color: var(--menuText-dark);}
body.light #navBar #menuLinks li a span.menuText{color: var(--menuText-light);}

#navBar #menuLinks li a .icon {
    display: inline-block;
    opacity:.5;
    transition: all 0.3s ease-in-out 0s;
}
#navBar #menuLinks li a:hover .icon {opacity:1;}
body.dark #navBar #menuLinks li a .icon{color: var(--menuText-dark);}
body.light #navBar #menuLinks li a .icon{color: var(--menuText-light);}

#navBar #menuLinks li a img.navIcon {
    display: inline-block;
    width: 26px;
    height: 26px;
}

#navBar #menuLinks li a.main {
    display: block;
}

#navBar #menuLinks li a.login {
    display: block;
}

/* Links on mouse-over */

#navBar #menuLinks li a:hover span {
    opacity: 1;
}

#navBar #menuLinks li a.selected span {
    opacity: 1;
}

#navBar #menuLinks li a:hover {
    background-color: transparent;
    color: var(--basicText);
}

/* Style the active/current link */

#navBar #menuLinks li a.active span {
    color: var(--basicText);
}

#navBar #menuLinks li a.active {
    background-color: rgba(255, 255, 255, 0.12);
    opacity: 1;
    border-bottom-color: #0c7ffb;
}

/* Display some links to the right */


.companyIcon {
    background-position: center center;
    background-size: contain;
    width: 80px;
    height: 80px;
    border-radius: 8px;
}

.companyIcon.small {
    width: 22px;
    height: 22px;
    border-radius: 3px;
}

.companyIcon.large {
    width: 120px;
    height: 120px;
    border-radius: 6px;
}

.companyIcon.list {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    margin:0 auto;
}

.companyIcon.header {
    width: 42px;
    height: 42px;
    border-radius: 3px;
    display: inline-block;
    position: absolute;
    margin-right: 12px;
    left: 0px;
    top: 9px;
}

.companyIcon.inline {
    display: inline-block;
    padding-right: 5px;
}

/* Display some links to the right */

#navBar-menu {
    float: right;
    padding: 40px 20px;
    /* Large padding which will shrink on scroll (using JS) */
    transition: 0.4s;
}

#navBarMobile {
    display: none;
    position: relative;
    background-color: var(--navBar);
    position: fixed;
    /* Sticky/fixed navbar */
    width: 100%;
    height: 65px;
    top: 0;
    /* At the top */
    z-index: 999;
    border-bottom: 1px solid black;
}

body.dark #navBarMobile{background-color: var(--navBar-dark);}
body.light #navBarMobile{background-color: var(--navBar-light);}

#navBarMobile #mobileLogo {
    position: absolute;
    right: 40px;
    top: 0px;
    width: 230px;
    height: 65px;
    padding: 8px 12px;
    text-align: right;
    transition: all 0.2s ease-in-out;
}

#navBarMobile #mobileLogo a {
    background-image: var(--sitelogo);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    display: block;
    max-width: 100%;
    height: 52px;
    width: 200px;
    text-align: left;
    cursor: pointer;
    z-index: 999;
}

body.dark #navBarMobile #mobileLogo a {background-image: var(--sitelogo-dark);}
body.light #navBarMobile #mobileLogo a {background-image: var(--sitelogo-light);}

#navBarMobile #mobileLogo.slide-over {
    right: 70px;
}

.mobileNavIcon {
    width: 32px;
    height: 32px;
    position: relative;
    top: 10px;
    left: -5px;
}

#navBarMobile #slideMenu {
    position: absolute;
    top: 65px;
    left: -200px;
    width: 200px;
    height: 1200px;
    background-color: var(--slidemenu);
    transition: all 0.2s ease-in-out;
}

body.dark #navBarMobile #slideMenu {background-color: var(--slidemenu-dark);}
body.light #navBarMobile #slideMenu {background-color: var(--slidemenu-light);}

#navBarMobile #slideMenu.slide-out {
    left: 0px;
}

#navBarMobile #avatarSlideMenuMobile {
    position: absolute;
    top: 65px;
    right: -110px;
    width: 110px;
    height: 1200px;
    background-color: rgba(20, 20, 20, 0.94);
    transition: all 0.2s ease-in-out;
}

#avatarSlideMenu {
    position: absolute;
    top: 100px;
    right: -130px;
    width: 120px;
    border-bottom-left-radius: 20px;
    transition: all 0.2s ease-in-out;
}

#navBarMobile #avatarSlideMenuMobile.slide-out,
#avatarSlideMenu.slide-out {
    right: 0px;
}

/* navbar widgets */

.widgetDock {
    width: 100%;
    font-size: 0;
    border-bottom-left-radius: 20px;
    background-color: var(--widgetDockBg);
}

body.dark .widgetDock {background-color: var(--widgetDockBg-dark);}
body.light .widgetDock {background-color: var(--widgetDockBg-light);}

a.menuWidget {
    display: block;
    width: 100%;
    transition: all 0.2s ease-in-out 0s;
    cursor: pointer;
    color: var(--basicText);
}



body.dark a.menuWidget {color: var(--basicText-dark);}
body.light a.menuWidget {color: var(--basicText-light);}

.widgetDock.inline3 a.menuWidget {
    display: inline-block;
    width: 33.3%;
}

a.menuWidget:hover {
    background-color: var(--widgetActive);
}

body.dark a.menuWidget:hover {background-color: var(--widgetActive-dark);}
body.light a.menuWidget:hover {background-color: var(--widgetActive-light);}

a.menuWidget:active,
.menuWidget:focus {
    background-color: #ffffff75;
}

a.menuWidget.last {
    border-bottom-left-radius: 20px;
}

.menuWidget .widget {
    width: 100px;
    height: 52px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.menuWidget span.leftImage {
    position: absolute;
    top: 14px;
    left: 5px;
}

.menuWidget span.leftImage img {
    width: 35px;
}

.menuWidget span.rightImage {
    position: absolute;
    top: 10px;
    right: 0px;
}

.menuWidget span.rightImage img {
    width: 32px;
}

.menuWidget span.rightData {
    display: block;
    position: absolute;
    top: 12px;
    right: -5px;
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 1.6rem;
}

.menuWidget span.label {
    display: block;
    font-size: .75rem;
    font-weight: 900;
    padding-bottom: 3px;
    border-bottom: 2px solid grey;
    position: absolute;
    top: 8px;
    right: 34px;
    white-space: nowrap;
}

.menuWidget span.data{
    display: block;
    font-size: .75rem;
    font-weight: 300;
    position: absolute;
    top: 30px;
    right: 34px;
}
.menuWidget span.data:after {font-size: .75rem;}

.menuWidget span.rate {
    display: block;
    font-size: 2.5rem;
    font-weight: 300;
    position: absolute;
    top: 5px;
    right: 0px;
}

.menuWidget span.rate.lv1 {
    color: rgb(40, 199, 0);
}

.menuWidget span.rate.lv2 {
    color: rgb(139, 199, 0);
}

.menuWidget span.rate.lv3 {
    color: rgb(223, 200, 0);
}

.menuWidget span.rate.lv4 {
    color: rgb(255, 115, 0);
}

.menuWidget span.rate.lv5 {
    color: red;
}

.menuWidget span.textLine1 {
    display: block;
    font-size: 1rem;
    font-weight: 300;
    width: 100%;
    text-align: center;
    padding: 1px 0;
}

.menuWidget span.textLine2 {
    display: block;
    font-size: .8rem;
    font-weight: 900;
    width: 100%;
    text-align: center;
    padding: 1px 0;
}

#zenOrwellOverlay {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
    border: 1px solid #444;
    color: #ffffff;
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    z-index: 900;
    max-width: 280px;
    font-family: system-ui, sans-serif;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

#zenOrwellOverlay:hover {
    transform: scale(1.1);
    background: linear-gradient(135deg, #2e2e2e, #3a3a3a);
}

.orwell-icon {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    margin-right: 5px;
    margin-left:5px;
}

.orwell-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.orwell-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
}

.orwell-subtitle {
    font-size: 13px;
    color: #cccccc;
}

/* Prevent shrinking of the modal when the first message is sent */
#orwellChatModal {
    width: 90vw; /* Default to 90% of the viewport width */
    max-width: 900px; /* Cap it for large screens */
    height: auto;
    background-color: transparent;
    margin: 0 auto; /* Center horizontally */
}

.orwellModalBody {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    box-sizing: border-box;
    overflow-y: auto; /* Allow vertical scroll if needed */
    max-height: 80vh;  /* Optional: prevent taking over entire screen */
}

.typing-cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background-color: #7ebb1d; /* Adjust for your theme */
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
  vertical-align: bottom;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}


    
#typingIndicator{
    color:#7ebb1d;
}

.dots::after {
  content: '';
  animation: dots 1s steps(4, end) infinite;
}

@keyframes dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}

/* Chat Container */
.chatContainer {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
    padding-bottom: 10px;
    box-sizing: border-box;
    height: calc(100% - 120px); /* Ensures chat area maintains fixed height */
}

/* Chatbox */
.chatBox {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100% - 10px); /* Prevents the chatbox from growing too tall */
    overflow-y: auto;
    flex-grow: 1;
}

.chatMessage {
    padding: 30px;
    border-radius: 15px;
    margin-bottom:15px;
    max-width: 100%; /* Ensure chat message doesn't overflow */
    word-wrap: break-word; /* Allow words to break and avoid overflow */
    font-size: 16px; /* Default font size */
}

.orwellMessageIcon {
    width: 50px;
    height: 50px;
    margin-right: 8px;
    vertical-align: middle;
    background-color:#363636;
    border-radius: 25px;
}
.chatMessage span {
    vertical-align: middle;
}

.orwell-close-btn {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1001;
    line-height: 1;
}



.botMessage {
    background-color: #222;
    border: 1px solid #444;
}

.userMessage {
    background-color: #444;
    border: 1px solid #666;
}

.userInputBlock {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    width: 100%;
    box-sizing: border-box;
    gap: 20px;
}

.userInput {
    flex: 1;
    padding: 10px;
    border-radius: 12.5px;
    border: 1px solid #444;
    font-size: 14px;
    background-color: #222;
    color: #fff;
    resize: none;
    box-sizing: border-box;
}

.buttonContainer {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Placeholder styling */
.userInput::placeholder {
    color: #bbb !important;
    opacity: 1;
}

/* Focus styles */
.userInput:focus {
    color: #fff;
    outline: none;
    border: 1px solid #7ebb1d;
    background-color: #222;
}

.resetButton,
.sendButton {
    background-color: #444;
    border: 1px solid #666;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s;
}

.resetButton:hover,
.sendButton:hover {
    background-color: #666;
}

.resetButton:focus,
.sendButton:focus {
    outline: none;
    border-color: #7ebb1d;
}


@media screen and (max-width: 580px) {
    .widgetDock {
        border-bottom-left-radius: 0px;
        background-color: transparent;
    }

    a.menuWidget.last {
        border-bottom-left-radius: 0px;
    }
}

/* userStatus */

#loggedInStatus {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 2px;
    right: 2px;
    opacity:.3;
}
#loggedInStatus:hover{opacity:1;}
.userType:after {
    font-family: 'zenjuriesfont';
    font-size: 1.1rem;
}
/* super-admin */
.userType.super-admin:after {
    content: '\e07f';
    color: rgb(206, 206, 4);
}
/* zen-admin */
.userType.zen-admin:after {
    content: '\e06d';
    color: rgb(3, 175, 175);
}
/* zen-dev */
.userType.zen-dev:after {
    content: '\e1a9';
    color: rgb(116, 20, 84);
}
/* zen-pro */
.userType.zen-pro:after {
    content: '\e186';
    color: rgb(156, 22, 233);
}
/* zen-qa */
.userType.zen-qa:after {
    content: '\e161';
    color: rgb(240, 146, 24);
}
/* zen-sales */
.userType.zen-sales:after {
    content: '\e115';
    color: rgb(97, 151, 27);
}
/* agent */
.userType.agent:after {
    content: '\e0f5';
    color: rgb(137, 182, 12);
}

.userType.adjuster:after {
    content: '\e0f9';
    color: rgb(137, 182, 12);
}
/* agency */
.userType.agency:after {
    content: '\e0c8';
    color: rgb(178, 216, 11);
}
/* company-admin */
.userType.company-admin:after {
    content: '\e0e7';
    color: rgb(39, 139, 197);
}
/* all-access */
.userType.all-access:after {
    content: '\e045';
    color: rgb(255, 0, 0);
}

/* avatarMenu */

.avatarMenu{}

#avatarMenuBtn {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 13px;
    right: 20px;
    transition: all 0.24s ease-in-out;
    font-size: .71rem;
}

.avatarMenu:after {
    font-family: 'zenjuriesfont';
    font-size: .9rem;
    content: '\e1a0';
    color: white;
    opacity: .3;
    position: absolute;
    bottom: -34px;
    right: 23px;
    transition: all 0.1s ease-in-out;
}

.avatarMenu.mobile {
    position: absolute;
    top: 8px;
    right: 12px;
}

.avatarMenu.mobile,
.avatarMenu .bouncy {
    animation: bounceInRight;
    animation-duration: 1.1s;
    transition: all 0.2s ease-in-out;
}

.avatarMenu.mobile:after {
    display: none;
}

.avatarMenu:hover:after {
    opacity: 1;
    bottom: -39px;
}

.avatarMenu.mobile:hover:after,
.avatarMenu.mobile:active:after,
.avatarMenu.mobile:focus:after {
    opacity: 1;
    bottom: -3px;
}

.avatarMenu.is-active:hover,
.avatarMenu.is-active:hover {
    opacity: 0.7;
}

.avatarMenu.is-active .avatarMenu-inner,
.avatarMenu.is-active .avatarMenu-inner::before,
.avatarMenu.is-active .avatarMenu-inner::after {
    background-color: #c8ff00;
}

.avatarMenu.slide-over {
    right: 20px;
}

.avatarMenu-btn {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-position: center center;
    background-size: contain;
    cursor: pointer;
    border: 2px solid black;
}

.avatarMenu.injured .avatarMenu-btn {
    border: 2px solid red;
}

.avatarMenu-name {
    position:relative;
    top:2px;
    padding: 2px 0;
    width: 100%;
    text-align: center;
    font-weight: 900;
    font-size:.7rem;
    max-width:60px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.avatarMenu.mobile .avatarMenu-btn {
    height: 50px;
    width: 50px;
}

.avatarMenu.is-active .avatarMenu-btn {
    animation: pulse;
    animation-duration: 1.1s;
    border: 2px solid #ccc;
}

.avatarMenu.mobile.is-active {
    top: 8px;
    right: 29px;
}

.avatarMenu.mobile.is-active .avatarMenu-btn {
    animation: pulse;
    animation-duration: 1.1s;
}

/* hamburger menu */

.hamburger {
    padding: 30px 30px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
}

.hamburger:hover,
.avatarMenu:hover {
    opacity: 0.7;
}

.hamburger.is-active:hover,
.avatarMenu.is-active:hover {
    opacity: 0.7;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
    background-color: #c8ff00;
}

.hamburger-btn {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 12px;
    left: 15px;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -10px;
}

.hamburger-inner::after {
    bottom: -10px;
}

.hamburger--vortex .hamburger-inner {
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger--vortex .hamburger-inner::before,
.hamburger--vortex .hamburger-inner::after {
    transition-duration: 0s;
    transition-delay: 0.1s;
    transition-timing-function: linear;
}

.hamburger--vortex .hamburger-inner::before {
    transition-property: top, opacity;
}

.hamburger--vortex .hamburger-inner::after {
    transition-property: bottom, transform;
}

.hamburger--vortex.is-active .hamburger-inner {
    transform: rotate(765deg);
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.hamburger--vortex.is-active .hamburger-inner::before,
.hamburger--vortex.is-active .hamburger-inner::after {
    transition-delay: 0s;
}

.hamburger--vortex.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
}

.hamburger--vortex.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg);
}

/* Style the navbar links */

#navBarMobile #slideMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#navBarMobile #avatarSlideMenuMobile ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
}

#avatarSlideMenu ul {
    list-style: none;
    margin: 0 0 0 12px;
    padding: 0;
    text-align: right;
}

#navBarMobile #slideMenu li {
    display: block;
    margin: 24px 8px;
}

#navBarMobile #avatarSlideMenuMobile li,
#avatarSlideMenu li {
    display: block;
    margin: 24px 8px;
    text-align: right;
}

#navBarMobile #slideMenu li a,
#navBarMobile #avatarSlideMenuMobile li a,
#avatarSlideMenu li a {
    text-align: center;
    display: block;
    width: max-content;
    padding: 2px 6px;
    text-decoration: none;
    border-bottom: 3px solid var(--menuUnderline);
}

#navBarMobile #slideMenu li a span,
#navBarMobile #avatarSlideMenuMobile li a span {
    color: var(--menuLinks);
    font-size: 1.3rem;
    font-family: 'lato', sans-serif;
    font-weight: 900;
}

#avatarSlideMenu li a span {
    color: var(--menuText);
    font-size: .8rem;
    font-family: 'lato', sans-serif;
    font-weight: 900;
    position: relative;
    top: -2px;
    left: 5px;
}

#avatarSlideMenu li a:hover span {
    color: white;
}

#navBarMobile #slideMenu li a .icon,
#navBarMobile #avatarSlideMenuMobile li a .icon {
    display: inline-block;
    font-size: 1.3rem;
    top: 2px;
    left: -3px;
    position: relative;
}

#avatarSlideMenu li a .icon {
    display: inline-block;
    font-size: 1.1rem;
    top: 2px;
    left: -3px;
    position: relative;
}

#navBarMobile #slideMenu li a.main,
#navBarMobile #avatarSlideMenuMobile li a.main,
#avatarSlideMenu li a.main {
    display: block;
}

#navBarMobile #slideMenu li a.login,
#navBarMobile #avatarSlideMenuMobile li a.login,
#avatarSlideMenu li a.login {
    display: block;
}

@media screen and (max-width: 1250px) {
    #navbar #logo {
        width: 320px;
        height: 100%;
    }

    #navbar #menuLinks a span {
        font-size: 15px;
    }
}

@media screen and (max-width: 1050px) {
    #navbar #logo {
        width: 220px;
        height: 100%;
    }

    #navbar #menuLinks a span {
        font-size: 12px;
    }
}

/* Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally */

@media screen and (max-width: 900px) {
    #navBar {
        display: none;
    }

    #navBarMobile {
        display: block;
    }
}

/* input/output */

.formBlock {
    width: 100%;
    margin: 0 auto;
    text-align: right;
}

.formBlock.opaque {
    background-color: #313131;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0px 0px 12px 6px black
}

.formElement {
    min-width: 280px;
    max-width: 800px;
    padding: 10px 40px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.formDataBlock{
    padding:5px 10px;
}
.formDataBlock span.outputLabel{border-bottom:1px solid #ffffff50;}

/* simple data table structure */
table.ccData, table.cccData{width:100%;}
table.ccData td, table.cccData td{height:26px;}
table.ccData td:nth-child(1),table.cccData td:nth-child(1){text-align:right;}
table.ccData td:nth-child(2),table.cccData td:nth-child(2){text-align:left;}
table.ccData td:nth-child(2) span,table.cccData td:nth-child(2) span{padding-left:12px;}
/* new actual form grid */

.inputRow{
display:table;
width:100%;
}
.inputRow .rowEement{
    display:table-cell;
}



.formGrid {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

.formGrid.grid {
    display:grid;padding:1rem;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));grid-gap: 1rem;
}
.formGrid.block {
    display:block;width:100%;border:1px solid blue;
}
.formGrid.grid .formInput{width:100%;}
@media screen and (max-width: 580px) {
    .formGrid.grid {max-width:300px;}
}
.formGrid .formInput,
.formGrid .formOutput {
    flex-basis: max-content;
    align-self: center;
    width: max-content;
    min-width: 200px;
    padding: 10px 20px;
    min-height: 100px;
    position: relative;
    text-align: left;
}
.formGrid .formInput input{padding-left:28px;padding-bottom:5px;}
.formGrid .formInput input[type='radio'], .formGrid .formInput input[type='checkbox'] {padding:0px;}
.formGrid .formInput select{padding-left:28px;padding-bottom:3px;height:30px;}
.formGrid .formOutput input{border:none !important;box-shadow:none;outline:none;background-color:transparent !important;pointer-events:none;}
.formBlock.inputCheck .formGrid .formInput input:not(:placeholder-shown), .formBlock.inputCheck .formGrid .formInput textarea:not(:placeholder-shown) {
    border-color: lime;
  } 
  .formBlock.inputCheck .formGrid .formInput input[type="datetime-local"]{border-color:black !important;}

.formGrid.long{
    justify-content: center;
    align-content:stretch;
    width:100% !important;
}
.formGrid.long .formInput{
    padding: 5px;
    height:auto;
    min-height:74px;
    flex-grow:4;
    width:100% !important;      
}

.formGrid.row{
    display:table;
    padding:0 40px;
    width:100% !important;
}
.formGrid.row .formInput{
    display:table-row;
    height:40px;     
}
.formGrid.row .formInput input, .formGrid.row .formInput textarea{
    width:100% !important;   
}


.formGrid.full .formInput{
    flex-basis:auto;
    padding: 5px;
    height:auto;
    min-height:74px;
    width:80%;   
}

.formElement.center.borders {
    border: 1px solid #ffffff20;
    margin: 10px auto;
    border-radius: 6px;
    padding: 26px 0 12px 0;
}

.formElement.center .formInput {
    margin: 0 auto;
    width: max-content;
}

.formGrid.loose {
    border-spacing: 36px;
    width: 100%;
}

.formGrid.center {
    justify-content: center;
}

.formGrid.tight {
    border-spacing: 6px;
    width: 100%;
}

.formGrid .formOutput {
    height: 40px;
}
.formGrid.tight .formInput, .formGrid.tight .formOutput {
    min-height: 60px;
}


.formGrid .formOutput.twoline {

}
.formGrid .formOutput.twoline span.outputLabel {
    display:block;
    text-align:left;
}

.formGrid.close .formInput,
.formGrid.close .formOutput {
    min-width: 100px;
    padding: 0;
    height: 70px;
}

.formInput.close,
.formOutput.close {
    min-width: 100px;
    padding: 0;
    height: 70px;
}

.formInput.short,
.formOutput.short {
    height: 50px;
}

.formGrid.short .formInput,
.formGrid.short .formOutput {
    height: 50px;
}

.formInput.wide,
.formOutput.wide {
    width: 100% !important;
    height: max-content;
}

.formGrid .formInput.wide,
.formGrid .formOutput.wide {
    width: 100%;
    height: max-content;
}

.formGrid.photos {
    justify-content: flex-start;
    align-content: center;
    margin: 0 auto;
    width: 100%;
}

.formGrid.photos .formMedia {
    flex-basis: max-content;
    align-self: flex-start;
    width: max-content;
    min-width: 200px;
    padding: 10px 20px;
    height: 200px;
    position: relative;
    text-align: center;
}

.formGrid.photos.thumbnails {
    justify-content: flex-start;
    margin: 0 auto;
    border: 1px solid red;
}

.formGrid.photos.thumbnails .formMedia {
    min-width: 122px;
    padding: 4px;
    height: 122px;
}

.formGrid.photos.thumbnails .formMedia .photo {
    min-width: 100px;
    padding: 0;
    width: 120px;
    height: 120px;
    background-color: #ffffff20;
    border: radius 3px;
    border: 1px solid transparent;
    position: relative;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}

.formGrid.photos.thumbnails .formMedia span {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 40px;
    left: 0px;
}

.formGrid.photos.thumbnails .formMedia .photo:hover {
    cursor: pointer;
    border-color: grey;
}

.formGrid.mmlinks .formMedia {
    flex-basis: max-content;
    align-self: center;
    width: max-content;
    min-width: 200px;
    padding: 10px 20px;
    height: 110px;
    position: relative;
    text-align: center;
}

.formGrid .formInput .icon.inputIcon {
    position: absolute;
    top: 2px;
    left: 2px;
}

.formTable {
    display: table;
    width:100%;
    padding: 0 15px;
}

.formTable__row {
    display: table-row;
    width: 100%;
    text-align: center;
}

.formTable__row.outline {
    border: none;
    border-radius: 2pt;
    box-shadow: 0 0 0 1pt grey;
}

.formTable__cell {
    display: table-cell;
    text-align: center;
    margin: 30px;
}

.formTable__cell.w10 {
    width: 10%;
}

.formTable__cell.w20 {
    width: 20%;
}

.formTable__cell.w30 {
    width: 30%;
}

.formTable__cell.w40 {
    width: 40%;
}

.formTable__cell.w50 {
    width: 50%;
}

.formTable__cell.w60 {
    width: 60%;
}

.formTable__cell.w70 {
    width: 70%;
}

.formTable__cell.w80 {
    width: 80%;
}

.formTable__cell.w90 {
    width: 90%;
}

.filterListTitle {
    text-align: left;
    font-size: 1rem !important;
    font-weight: 900;
    padding-top: 5px;
    border-bottom: 1px dashed rgba(128, 128, 128, 0.3);
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.filterList {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
    margin-bottom: 12px;
}

.filterList label {
    font-size: .7rem !important;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: normal;
}


.filterList div {
    text-align: left;
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.filterList div:first-child {
    color: red;
}

.filterList input {
    margin-right: 5px;
}

.filterList input:checked, .filterList input:hover {
    background-color: var(--filtered) !important;
}

.filterList.show input:checked, .filterList.show input:hover {
    background-color: var(--filter2) !important;
}

.formGrid .formItem label.error:before {
    content: '^';
    position: absolute;
    bottom: 10px;
    left: 22px;
    color: rgb(255, 5, 5);
    font-size: .7rem;
    width: 300px;
    height: 20px;
}

.formGrid .formItem label.error:after {
    content: attr(data-error);
    position: absolute;
    top: 8px;
    right: 20px;
    letter-spacing: normal;
    color: rgb(204, 53, 53);
    font-size: .7rem;
    font-weight: 400;
    background-color: rgb(58, 7, 7);
    border-radius: 4px;
    width: max-content;
    padding: 4px;
    text-transform: lowercase;
}

span.inputError {
    position: relative;
    left: 4px;
    top: 1px;
    display: block;
    visibility: hidden;
    border-radius: 2px;
    background-color: rgb(255, 0, 0);
    color: rgb(255, 255, 255);
    font-weight: 900;
    font-size: .6rem;
    padding: 4px 6px;
    width: max-content;
    letter-spacing: 1px;
}

span.inputError:after {
    content: ' ';
    position: absolute;
    top: -7px;
    left: 4px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid rgb(255, 0, 0);
}

span.inputError.show {
    visibility: visible;
}

.formGrid .uploadedMedia {
    cursor: pointer;
    background-size: cover;
    margin: 0 auto;
    border-radius: 6px;
    border: 3px solid #000;
    background-color: rgb(63, 63, 63);
    position: relative;
}

.formGrid .uploadedMedia.newPhoto {
    cursor: pointer;
    background-color: #00000050;
}

.formGrid.photos .uploadedMedia {
    width: 180px;
    height: 180px;
    background-position: center center;
    background-size: cover;
}

.formGrid.mmlinks .uploadedMedia {
    width: 300px;
    height: 80px;
    border: 2px solid rgb(39, 39, 39);
    background-color: rgb(32, 32, 32);
}

.uploadedMedia:hover {
    animation: pulse;
    animation-duration: .1s;
    box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.8);
    border-color: #222;
}

.uploadedMedia .mediaSelectOverlay {
    width: 100%;
    height: 145px;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#00000000', GradientType=0);
}

.formGrid.mmlinks .uploadedMedia .mediaSelectOverlay {
    width: 100%;
    height: 45px;
    opacity: 0;
}

.formGrid.mmlinks .uploadedMedia:hover .mediaSelectOverlay {
    opacity: 1;
}

.formGrid.mmlinks .uploadedMedia .mediaSelectOverlay.link {
    background: -moz-linear-gradient(left, rgba(105, 215, 219, 0.3) 0%, rgba(105, 215, 219, 0) 59%, rgba(105, 215, 219, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(105, 215, 219, 0.3) 0%, rgba(105, 215, 219, 0) 59%, rgba(105, 215, 219, 0) 100%);
    background: linear-gradient(to right, rgba(105, 215, 219, 0.3) 0%, rgba(105, 215, 219, 0) 59%, rgba(105, 215, 219, 0) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4d69d7db', endColorstr='#0069d7db', GradientType=1);
}

.formGrid.mmlinks .uploadedMedia .mediaSelectOverlay.photo {
    background: -moz-linear-gradient(left, rgba(9, 98, 193, 0.3) 0%, rgba(66, 167, 208, 0) 59%, rgba(105, 215, 219, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(9, 98, 193, 0.3) 0%, rgba(66, 167, 208, 0) 59%, rgba(105, 215, 219, 0) 100%);
    background: linear-gradient(to right, rgba(9, 98, 193, 0.3) 0%, rgba(66, 167, 208, 0) 59%, rgba(105, 215, 219, 0) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4d0962c1', endColorstr='#0069d7db', GradientType=1);
}

.formGrid.mmlinks .uploadedMedia .mediaSelectOverlay.video {
    background: -moz-linear-gradient(left, rgba(153, 10, 219, 0.3) 0%, rgba(125, 131, 219, 0) 59%, rgba(105, 215, 219, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(153, 10, 219, 0.3) 0%, rgba(125, 131, 219, 0) 59%, rgba(105, 215, 219, 0) 100%);
    background: linear-gradient(to right, rgba(153, 10, 219, 0.3) 0%, rgba(125, 131, 219, 0) 59%, rgba(105, 215, 219, 0) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4d990adb', endColorstr='#0069d7db', GradientType=1);
}

.formGrid.mmlinks .uploadedMedia .mediaSelectOverlay.doc {
    background: -moz-linear-gradient(left, rgba(11, 229, 145, 0.3) 0%, rgba(66, 221, 189, 0) 59%, rgba(105, 215, 219, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(11, 229, 145, 0.3) 0%, rgba(66, 221, 189, 0) 59%, rgba(105, 215, 219, 0) 100%);
    background: linear-gradient(to right, rgba(11, 229, 145, 0.3) 0%, rgba(66, 221, 189, 0) 59%, rgba(105, 215, 219, 0) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4d0be591', endColorstr='#0069d7db', GradientType=1);
}

.formGrid.mmlinks .uploadedMedia .mediaSelectOverlay.coll {
    background: -moz-linear-gradient(left, rgba(158, 237, 11, 0.3) 0%, rgba(127, 224, 134, 0) 59%, rgba(105, 215, 219, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(158, 237, 11, 0.3) 0%, rgba(127, 224, 134, 0) 59%, rgba(105, 215, 219, 0) 100%);
    background: linear-gradient(to right, rgba(158, 237, 11, 0.3) 0%, rgba(127, 224, 134, 0) 59%, rgba(105, 215, 219, 0) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4d9eed0b', endColorstr='#0069d7db', GradientType=1);
}

.formGrid.mmlinks .uploadedMedia .mediaSelectOverlay.med {
    background: -moz-linear-gradient(left, rgba(244, 12, 190, 0.3) 0%, rgba(162, 132, 207, 0) 59%, rgba(105, 215, 219, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(244, 12, 190, 0.3) 0%, rgba(162, 132, 207, 0) 59%, rgba(105, 215, 219, 0) 100%);
    background: linear-gradient(to right, rgba(244, 12, 190, 0.3) 0%, rgba(162, 132, 207, 0) 59%, rgba(105, 215, 219, 0) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4df40cbe', endColorstr='#0069d7db', GradientType=1);
}

@media screen and (max-width: 580px) {
    /*
    .formGrid .formInput,
    .formGrid .formOutput {
        padding: 2px 10px;
        height: 70px;
    }
    */
}

/* input labels */

.mobileLabel {
    position: absolute;
    display: none;
}

label,
label.light,
.formBlock.light label {
    display: block;
    text-align: left;
    text-indent: 5px;
    color: #232323;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: .8rem;
    margin-right: 12px;
}

label.dark,
.formBlock.dark label {
    color: #dddddd;
}

label div.icon {
    font-size: 1.2rem;
    position: relative;
    top: 5px;
    opacity: .5;
}

label.small {
    font-size: .7rem;
    letter-spacing: 0;
    text-transform: none;
    text-indent: 1px;
}

input,
select,
textarea,
.formBlock.light input,
.formBlock.light textarea {
    border-radius: 4px;
    border: 1px solid var(--input-border);
    color: var(--input-fg);
    font-weight: 300;
    background-color:var(--input-bg);
    font-size: 1rem;
    padding: .4rem .6rem .2rem .6rem;
    outline: none;
    margin: none;
    height: 100%;
    width: 100%;
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

/* maybe depricate */
textarea.modalTextarea{min-width:500px;min-height:120px;resize:none;}
@media (max-width: 980px) {
    textarea.modalTextarea {min-width:490px;}
}
@media (max-width: 580px) {
    textarea.modalTextarea {min-width:270px;}
}


input.hideSpinners::-webkit-outer-spin-button,
input.hideSpinners::-webkit-inner-spin-button
{
color:red !important;
-webkit-appearance: none;
margin: 0;
}
input.hideSpinners[type=number] {
  -moz-appearance: textfield;
}


select {
    padding: .3rem .6rem .3rem .6rem;
}

select.monthInput {
    width: 150px;
}

.inputIcon {
    position: relative;
}

.inputIcon input,
.inputIcon select,
.inputIcon textarea,
{
    text-indent: 20px;
}

.inputIcon:before {
    font-family: 'zenjuriesfont';
    color: #797979;
    font-size: 1.1rem;
    position: absolute;
    top: .52rem;
    left: .5rem;
    z-index: 999;
}

.inputIcon.user:before {
    content: '\e0cb';
}

.inputIcon.company:before {
    content: '\e0e7';
}

.inputIcon.mail:before {
    content: '\e033';
}

.inputIcon.phone:before {
    content: '\e05a';
}

.inputIcon.date:before {
    content: '\e010';
}

.inputIcon.url:before {
    content: '\e044';
}

.inputIcon.month:before {
    content: '\e010';
}

.inputIcon.day:before {
    content: '\e013';
}

.inputIcon.password:before {
    content: '\e160';
}

.inputIcon.login:before {
    content: '\e066';
}

.inputIcon.video:before {
    content: '\e0a3';
}

.inputIcon.address:before {
    content: '\e054';
}

.inputIcon.map:before {
    content: '\e051';
}

.inputIcon.cost:before {
    content: '$';
    top: .31rem;
    left: .7rem;
    color: #aaaaaa;
}

.inputIcon.number:before {
    content: '\e12b';
}

.inputIcon.city:before {
    content: '\e0e7';
}

.inputIcon.state:before {
    content: '\e051';
}

.inputIcon.zip:before {
    content: '\e052';
}

.inputIcon.check:before {
    content: '\e10f';
}

.inputIcon.pointer:before {
    content: '\e04f';
}

.inputIcon.alert:before {
    content: '\e036';
}

.inputIcon.bug:before {
    content: '\e00e';
}

.inputIcon.cube:before {
    content: '\e02a';
}

.inputIcon.cubes:before {
    content: '\e02b';
}



textarea {
    border-radius: 6px;
    padding: .6rem;
}

input:focus,
select:focus,
textarea:focus,
.formBlock.light input:focus,
.formBlock.light textarea:focus {
    border: 1px solid #3191ff;
    color: black;
    background-color: white;
}

.formBlock.dark input,
.formBlock.dark select,
.formBlock.dark textarea {
    border: 1px solid #313131;
    color: #d5d5d5;
    background-color: #434343;
}

.formBlock.dark input:focus,
.formBlock.dark select:focus,
.formBlock.dark textarea:focus {
    border: 1px solid #3191ff;
    color: white;
    background-color: #545454;
}

input:-webkit-autofill {
    -webkit-text-fill-color: black;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}

input:-moz-autofill {
    -moz-text-fill-color: black;
    -moz-box-shadow: 0 0 0px 1000px white inset;
}

::-webkit-calendar-picker-indicator {
    cursor: pointer;
    background-color: rgb(82, 82, 82);
    box-shadow: 0px 0px 4px 2px #00000020;
    border-radius: 4px;
}

::-webkit-calendar-picker-indicator:hover {
    background-color: rgb(126, 126, 126);
    box-shadow: 0px 0px 4px 2px #00000040;
}

@media (max-width: 580px) {
    .mobileLabel {
        top: -5px;
        left: 0px;
        display: block;
        font-size: .6rem;
    }
}

/* placeholder / special inputs */

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
.formBlock.light input::-webkit-input-placeholder,
.formBlock.light textarea::-webkit-input-placeholder {
    font-weight: 300;
    color: #888888 !important;
    font-style: italic;
    vertical-align: middle;
    padding-left:18px;
}

input::-moz-placeholder,
.formBlock.light input::-moz-placeholder {
    font-weight: 300;
    color: #888888 !important;
    font-style: italic;
    vertical-align: middle;
}

input:-ms-input-placeholder,
.formBlock.light input:-ms-input-placeholder {
    font-weight: 300;
    color: #888888 !important;
    font-style: italic;
    vertical-align: middle;
}

input:-moz-placeholder,
.formBlock.light input:-moz-placeholder {
    font-weight: 300;
    color: #888888 !important;
    font-style: italic;
    vertical-align: middle;
}

.formBlock.dark input::-webkit-input-placeholder,
.formBlock.dark textarea::-webkit-input-placeholder {
    color: #868686 !important;
}

.formBlock.dark input::-moz-placeholder {
    color: #868686 !important;
}

.formBlock.dark input:-ms-input-placeholder {
    color: #868686 !important;
}

.formBlock.dark input:-moz-placeholder {
    color: #868686 !important;
}

@media (max-width: 580px) {
    select.monthInput {
        width: 124px;
        padding: 4px 2px 2px 2px;
    }
}

/* input types */

input[type=text] {}

input[type=tel] {
    font-weight: 400;
}

input[type=password] {
    width: 120px;
}

input[type=number] {
    font-weight: 400;
}

input[type="datetime-local"] {
    font-size: 1.2rem;
    text-align: center;
    padding: 5px;
}

input[type="datetime"] {
    font-size: 1.2rem;
    text-align: center;
    padding: 5px;
}

input[type="date"] {
    font-size: 1.1rem;
    text-align: center;
    padding: 3px;
}

input[type=submit] {
    font-family: 'lato';
    font-weight: 900;
    padding: 6px 18px;
    background-color: #1a1a1a;
    border-radius: 30px;
    color: white;
    outline: none;
    border: none;
    cursor: pointer;
}

input[type=submit]:hover,
input[type=submit]:focus {
    background-color: #020202;
}

input[type=submit]:active {
    background-color: #00c600;
}

input.mobileDateTime {
    font-size: 1.2rem;
    font-weight: 900;
    color: white;
    background-color: #212121;
    height: 40px;
    border-radius: 20px;
    text-align: center;
    margin: 12px 0;
    padding: 4px 12px;
}

input[type=file] {
    background-color: #1d1d1d;
    border: none;
    padding: 12px;
    max-width: 400px;
    width: 100%;
}

input[type=file]::file-selector-button {
    position: relative;
    border: none;
    border-radius: 2rem;
    background-color: #3b3b3b;
    transition: .5s;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 400;
    padding: 10px 20px;
}

input[type=file]::file-selector-button:hover {
    background-color: #0105e7;
}

.camera-upload::-webkit-file-upload-button {
    visibility: hidden;
}

.camera-upload::before {
    content: 'take photo';
    display: inline-block;
    background-color: #3b3b3b;
    border-radius: 2rem;
    color: white;
    padding: .5rem 1rem;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    font-weight: 400;
    font-size: 1rem;
    text-indent: 20px;
}

.camera-upload:hover::before {
    background-color: #5a5a5a;
}

.camera-upload:active::before {
    background-color: #9c1a1a;
}

.camera-upload::after {
    position: absolute;
    top: 48px;
    left: 43px;
    font-family: 'zenjuriesfont';
    font-size: 1.2rem;
    content: '\e016';
    color: white;
}

input.match {
    box-shadow: inset 0 0 3px cyan;
}

input.nomatch {
    box-shadow: inset 0 0 3px red;
}

/* upload media */

.uploadedMedia span {
    position: absolute;
    display: block;
}

.uploadedMedia span.mediaInfo {
    top: 10px;
    left: 7px;
    font-weight: 900;
    color: white;
    font-size: .8rem;
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 35px;
    opacity: .7;
}

.uploadedMedia:hover span.mediaInfo {
    opacity: 1;
}

.formGrid.mmlinks .uploadedMedia span.mediaInfo {
    padding-left: 30px;
}

.uploadedMedia span.mediaDelete {
    top: 4px;
    right: 3px;
}

.uploadedMedia span.mediaDelete:after {
    font-family: 'zenjuriesfont';
    font-size: 1.6rem;
    content: '\e098';
    color: white;
    opacity: .5;
}

.uploadedMedia span.mediaDelete:hover:after {
    color: red;
    opacity: 1;
}

.uploadedMedia span.mediaCaption {
    bottom: 5px;
    right: 6px;
}

.uploadedMedia span.mediaCaption:after {
    font-family: 'zenjuriesfont';
    font-size: 1.2rem;
    content: '\e025';
    color: white;
    opacity: .5;
}

.uploadedMedia span.mediaCaption:hover:after {
    color: orange;
    opacity: 1;
}

.uploadedMedia span.mediaEdit {
    bottom: 4px;
    right: 5px;
}

.uploadedMedia span.mediaEdit:after {
    font-family: 'zenjuriesfont';
    font-size: 1.2rem;
    content: '\e05b';
    color: white;
    opacity: .5;
}

.uploadedMedia span.mediaEdit:hover:after {
    color: rgb(0, 204, 255);
    opacity: 1;
}

.uploadedMedia span.mediaType {
    top: 6px;
    left: 6px;
    font-family: 'zenjuriesfont';
    font-size: 1.4rem;
}

.uploadedMedia span.mediaType:after {
    content: '\e01d';
    color: rgb(158, 201, 221);
}

.uploadedMedia span.mediaType.photo:after {
    content: '\e058';
    color: rgb(65, 163, 209);
}

.uploadedMedia span.mediaType.video:after {
    content: '\e041';
    color: rgb(178, 62, 255);
}

.uploadedMedia span.mediaType.doc:after {
    content: '\e03d';
    color: rgb(44, 230, 137);
}

.uploadedMedia span.mediaType.coll:after {
    content: '\e040';
    color: rgb(224, 240, 82);
}

.uploadedMedia span.mediaType.med:after {
    content: '\e0cd';
    color: rgb(255, 0, 98);
}

.uploadedMedia .mediaCaptionSummary {
    text-align: left;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 35px;
    background-color: #00000087;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
    padding: 7px 32px 4px 8px;
    white-space: nowrap;
    font-size: .9rem;
    font-weight: 300;
}

.defaultText {
    font-weight: 400;
    font-size: 1.6rem;
    text-align: center;
    color: rgb(173, 173, 173);
}

.defaultText span {
    display: block;
    margin-top: 5px;
    padding-top: 5px;
    font-size: 1rem;
    font-weight: 300;
    color: grey;
    border-top: 2px solid rgb(83, 83, 83);
}

.uploadSpaceIndicator {
    width: 100%;
    margin: 20px 0 30px 0;
    position: relative;
}

.uploadSpaceIndicator .uploadSpaceBar {
    height: 22px;
    border-radius: 20px;
    width: 80%;
    margin: 0 auto;
    background-color: rgb(1, 49, 110);
    overflow: hidden;
}

.uploadSpaceIndicator .uploadSpaceBar.warning {
    background-color: rgb(109, 93, 0);
}

.uploadSpaceIndicator .uploadSpaceBar.critical {
    background-color: rgb(100, 1, 1);
}

.uploadSpaceIndicator .uploadSpaceBar .uploadSpace {
    width: 100%;
    height: 22px;
    background-color: rgb(0, 119, 255);
    box-shadow: 7px 0px 8px rgba(0, 0, 0, 0.507);
}

.uploadSpaceIndicator .uploadSpaceBar.warning .uploadSpace {
    background-color: rgb(187, 153, 0);
}

.uploadSpaceIndicator .uploadSpaceBar.critical .uploadSpace {
    background-color: rgb(199, 0, 0);
}

.uploadSpaceIndicator .remainingSpace {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 22px;
    text-align: center;
    font-weight: 900;
}

.showFullImage {
    width: 100%;
    height: 100%;
}

.showFullImage .fullImage {
    width: 100%;
    height: 100%;
    min-width: 700px;
    min-height: 500px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.showFullImage .fullImageCaption {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px;
    min-height: 40px;
    border-radius: 12px;
    text-align: center;
}

.formGrid__row:focus .formGrid__row label {
    color: red !important;
}

@media (max-width: 768px) {
    .basicForm .formGrid__row {
        display: block;
    }

    .showFullImage .fullImage {
        min-width: 540px;
        min-height: 500px;
    }
}

@media (max-width: 580px) {
    .showFullImage .fullImage {
        min-width: 320px;
        min-height: 300px;
    }
}

.formBlock.dark span.labelText {
    color: white;
}

/* zenipshere tabs [to be depricated]*/

#zenispheretabs {
    width: 80%;
    margin: 0 auto;
}

#zenispheretabs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    padding-top: 7px;
    border-bottom: 5px solid transparent;
    overflow: hidden;
    text-align: center;
}

#zenispheretabs li {
    display: inline-block;
    width: 30%;
    text-align: center;
    margin-right: -4px;
    padding: 0 1px;
}

#zenispheretabs li a {
    position: relative;
    top: 4px;
    display: block;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    height: 35px;
    padding-top: 5px;
    border: 0;
    background-color: var(--zc-tabs);
    cursor: pointer;
}

#zenispheretabs li a:hover {
    border: 0;
    top: 2px;
    background-color: var(--zc-tabs-hover);
}

#zenispheretabs li a span {
    text-indent: 2px;
    color: var(--zc-tabs-text);
    font-weight: bold;
    word-wrap:
}

#zenispheretabs li a .icon {
    display: inline-block;
    color: var(--zc-tabs-icon);
    position: relative;
    top: 3px;
    left: -3px;
}

#zenispheretabs.manageUsers ul {
    border-color: var(--manageusers);
}

#zenispheretabs.manageUsers li.manageUsers a .icon {
    color: var(--manageusers-icon);
}

#zenispheretabs.manageUsers li.manageUsers a span {
    color: white;
}

#zenispheretabs.manageUsers li.manageUsers a {
    top: 0px;
    background-color: var(--manageusers);
}

#zenispheretabs.manageTeams ul {
    border-color: var(--manageteams);
}

#zenispheretabs.manageTeams li.manageTeams a .icon {
    color: var(--manageteams-icon);
}

#zenispheretabs.manageTeams li.manageTeams a span {
    color: white;
}

#zenispheretabs.manageTeams li.manageTeams a {
    top: 0px;
    background-color: var(--manageteams);
}

#zenispheretabs.activeTeams ul {
    border-color: var(--activeteams);
}

#zenispheretabs.activeTeams li.activeTeams a .icon {
    color: var(--activeteams-icon);
}

#zenispheretabs.activeTeams li.activeTeams a span {
    color: white;
}

#zenispheretabs.activeTeams li.activeTeams a {
    top: 0px;
    background-color: var(--activeteams);
}
/* end zenipshere tabs [to be depricated]*/

.userteamsTab {
    width: 80%;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 40px;
    min-height: 600px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#manageUsersTab {
    display: none;
    animation: fadeIn;
    animation-duration: 1s;
}

#manageTeamsTab {
    display: none;
    animation: fadeIn;
    animation-duration: 1s;
}

#activeTeamsTab {
    display: none;
    animation: fadeIn;
    animation-duration: 1s;
}

@media screen and (max-width: 1000px) {
    #zenispheretabs li a span {
        font-size: .8rem;
    }
}

@media screen and (max-width: 880px) {
    #zenispheretabs {
        width: 100%;
    }

    .zenispheretabContent {
        width: 100%;
    }

    #zenispheretabs li a span {
        font-size: .8rem;
        position: relative;
        top: -5px;
    }

    #zenispheretabs li {
        width: 33%;
        position: relative;
        bottom: -2px;
        margin-right: -2px;
    }

    #zenispheretabs ul {
        border-bottom: 9px solid transparent;
        margin-left: -1px;
    }

    #zenispheretabs li a .icon {
        top: 0;
        left: -3px;
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 580px) {
    #zenispheretabs li a {
        height: 45px;
    }

    #zenispheretabs li a span {
        display: block;
    }

    #zenispheretabs li a .icon {
        display: block;
        top: 0;
        left: 0;
        font-size: 1.6rem;
    }
}

@keyframes strong-pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.12);
    }
  }
  
  .pulsating-button {
    animation: strong-pulse 1.8s ease-in-out infinite;
    transform-origin: center;
  }
  
  

/* team picker */

.newTemplateButton {
    position: absolute;
    right: 0px;
    top: 12px;
}

.teamPicker {
    width: 90%;
    height: 56px;
    margin: 0 auto;
    overflow: hidden;
}

.teamPicker .buttonCloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.teamPicker .buttonCloud button {
    flex-grow: 1 !important;
    font-weight: 300 !important;
    font-size: .7rem;
    text-transform: uppercase;
}

.teamPicker .buttonCloud button.selected {
    background-color: #b21eb7;
}

@media screen and (max-width: 580px) {
    .teamPicker {
        height: 58px;
    }

    .teamPicker .buttonCloud button {
        margin-bottom: 5px;
    }
}

/* team stats */

.teamStats {
    width: 90%;
    height: 76px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    font-size: .8rem;
}

.teamStats .teamTitle {
    position: absolute;
    top: 10px;
    left: 0px;
    width: 100%;
    text-align: center;
}

.teamStats .teamTitle span {
    display: block;
    font-size: 1.4rem;
    width: 300px;
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.teamStats .mission {
    position: absolute;
    top: 0px;
    left: 10px;
}

.teamStats .mission span {
    display: block;
    padding-bottom: 5px;
}

.teamStats .mission .missionBar {
    position: relative;
    width: 182px;
    height: 28px;
}

.teamStats .mission .missionBar .barBGContainer {
    width: 84%;
    height: 100%;
    margin: 0 auto;
    background-color: #00213d;
}

.teamStats .mission .missionBar .barBG {
    height: 100%;
    animation: missionStat .4s ease-out;
    animation-fill-mode: both;
    animation-delay: 1.8s;
}

.teamStats .mission .missionBar .barOverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url('/images/elements/missionbar.png');
    background-size: cover;
}

.missionBar.lv1 .barBG {
    background-color: #003f91;
    width: 14.3%;
}

.missionBar.lv2 .barBG {
    background-color: #0045a0;
    width: 28.6%;
}

.missionBar.lv3 .barBG {
    background-color: #004eb4;
    width: 42.7%;
}

.missionBar.lv4 .barBG {
    background-color: #0060dd;
    width: 57.1%;
}

.missionBar.lv5 .barBG {
    background-color: #006eff;
    width: 71.1%;
}

.missionBar.lv6 .barBG {
    background-color: #008cff;
    width: 85.6%;
}

.missionBar.lv7 .barBG {
    background-color: #00a2ff;
    width: 100%;
}

@keyframes missionStat {
    0% {
        width: 0%;
        background-color: #8dffff;
    }
}

.teamStats .effectiveness {
    position: absolute;
    top: 0px;
    right: 10px;
    text-align: right;
}

.teamStats .effectiveness span {
    display: block;
    padding-bottom: 5px;
}

.effectiveBar {
    position: relative;
    width: 182px;
    height: 28px;
    transform: scaleX(-1);
}

.effectiveBar .barBGContainer {
    width: 84%;
    height: 100%;
    margin: 0 auto;
    background-color: #303030;
}

.effectiveBar .barBG {
    width: 100%;
    height: 100%;
    animation: effectiveStat .4s ease-out;
    animation-fill-mode: both;
    animation-delay: 2.5s;
}

.effectiveBar .barOverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url('/images/elements/missionbar.png');
    background-size: 100%;
}

.effectiveBar.lv1 .barBG {
    background-color: #ff0000;
    width: 14.3%;
}

.effectiveBar.lv2 .barBG {
    background-color: #ff7b00;
    width: 28.6%;
}

.effectiveBar.lv3 .barBG {
    background-color: #ff9900;
    width: 42.7%;
}

.effectiveBar.lv4 .barBG {
    background-color: #ffd900;
    width: 57.1%;
}

.effectiveBar.lv5 .barBG {
    background-color: #91ff00;
    width: 71.1%;
}

.effectiveBar.lv6 .barBG {
    background-color: #1eff00;
    width: 85.6%;
}

.effectiveBar.lv7 .barBG {
    background-color: #00ff22;
    width: 100%;
}

@keyframes effectiveStat {
    0% {
        width: 0%;
        background-color: #ff0808;
    }
}

/* user list */

.userBanner {}

/* team roster */

.rosterBox {
    position: relative;
    width: 100%;
    top: 160px;
}

.teamRosterContainer {
    width: 100%;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.teamRoster {
    height: 400px;
    width: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.teamRosterBG {
    width: 100%;
    height: 400px;
    position: absolute;
    top: 0px;
    left: 0px;
}

.circleOfCare {
    width: 266px;
    height: 266px;
    background-color: #141414;
    border-radius: 50%;
    border: 25px solid black;
    margin: 8.2% auto;
    text-align: center;
}

.circleOfCare .teamManagementControls {
    position: relative;
    top: 26px;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    z-index: 1;
}

.circleOfCare .teamManagementControls button {
    margin-bottom: 8px;
}

.circleOfCare .avatarContainer {
    width: 70px;
    height: 70px;
    margin: 20px auto 10px auto;
}

.circleOfCare .userAvatar {
    width: 70px;
    height: 70px;
    top: 0;
    left: 0;
}

.circleOfCare .firstName {
    width: 100%;
    display: block;
    text-align: center;
    font-size: 1.5rem;
}

.circleOfCare .lastName {
    width: 100%;
    display: block;
    text-align: center;
    font-size: 1rem;
}

.fullTeamRoster {
    position: absolute;
    top: 0px;
    left: 0px;
    display: table;
    width: 800px;
}

.teamSetPanel {
    display: table;
    text-align: center;
    width: 200px;
    cursor: pointer;
    height: 65px;
    border-radius: 10px;
    background-color: #000000;
    position: relative;
    z-index: 2;
}

.teamElementsLeft .teamSetPanel {
    margin: 0 0 0 auto;
}

.teamElementsRight .teamSetPanel {
    margin: 0 auto 0 0;
}

.teamSetPanel:after {
    position: absolute;
    content: '';
    background-color: #000000;
    z-index: 1;
}

.teamElementsLeft .teamSetPanel:hover,
.teamElementsLeft .teamSetPanel:active,
.teamElementsLeft .teamSetPanel:focus {
    background: #595959;
    background: -moz-linear-gradient(left, #595959 0%, #000000 78%);
    background: -webkit-linear-gradient(left, #595959 0%, #000000 78%);
    background: linear-gradient(to right, #595959 0%, #000000 78%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#595959', endColorstr='#000000', GradientType=1);
}

.teamElementsRight .teamSetPanel:hover,
.teamElementsRight .teamSetPanel:active,
.teamElementsRight .teamSetPanel:focus {
    background: #000000;
    background: -moz-linear-gradient(left, #000000 22%, #595959 100%);
    background: -webkit-linear-gradient(left, #000000 22%, #595959 100%);
    background: linear-gradient(to right, #000000 22%, #595959 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#595959', GradientType=1);
}

.teamRoster.activeTeam .teamElementsLeft .teamSetPanel:hover,
.teamRoster.activeTeam .teamElementsLeft .teamSetPanel:active,
.teamRoster.activeTeam .teamElementsLeft .teamSetPanel:focus {
    background: rgb(96, 13, 94);
    background: -moz-linear-gradient(left, rgba(96, 13, 94, 1) 0%, rgba(0, 0, 0, 1) 84%);
    background: -webkit-linear-gradient(left, rgba(96, 13, 94, 1) 0%, rgba(0, 0, 0, 1) 84%);
    background: linear-gradient(to right, rgba(96, 13, 94, 1) 0%, rgba(0, 0, 0, 1) 84%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#600d5e', endColorstr='#000000', GradientType=1);
}

.teamRoster.activeTeam .teamElementsRight .teamSetPanel:hover,
.teamRoster.activeTeam .teamElementsRight .teamSetPanel:active,
.teamElementsRight .teamSetPanel:focus {
    background: rgb(0, 0, 0);
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 1) 16%, rgba(96, 13, 94, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 16%, rgba(96, 13, 94, 1) 100%);
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 16%, rgba(96, 13, 94, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#600d5e', GradientType=1);
}

.teamRoster.teamTemplate .teamElementsLeft .teamSetPanel:hover,
.teamRoster.teamTemplate .teamElementsLeft .teamSetPanel:active,
.teamRoster.teamTemplate .teamElementsLeft .teamSetPanel:focus {
    background: #34179e;
    background: -moz-linear-gradient(left, #34179e 0%, #000000 78%);
    background: -webkit-linear-gradient(left, #34179e 0%, #000000 78%);
    background: linear-gradient(to right, #34179e 0%, #000000 78%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#34179e', endColorstr='#000000', GradientType=1);
}

.teamRoster.teamTemplate .teamElementsRight .teamSetPanel:hover,
.teamRoster.teamTemplate .teamElementsRight .teamSetPanel:active,
.teamRoster.teamTemplate .teamElementsRight .teamSetPanel:focus {
    background: #000000;
    background: -moz-linear-gradient(left, #000000 22%, #34179e 100%);
    background: -webkit-linear-gradient(left, #000000 22%, #34179e 100%);
    background: linear-gradient(to right, #000000 22%, #34179e 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#34179e', GradientType=1);
}

.teamSetContent {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 100%;
    z-index: 4;
}

.teamElementsLeft .teamSetContent {
    text-align: left;
}

.teamElementsRight .teamSetContent {
    text-align: right;
}

.teamSetContent .teamRoleTypeIcon {
    position: absolute;
    top: 16px;
    font-size: 1.9rem;
    color: #424242;
}

/* teamListSelectors */

fieldset.infoButton {
    border-radius: 6px;
    border: 2px solid #ffffff30;
    padding: 6px 18px 26px 18px;
}

fieldset.infoButton legend {
    text-align: center;
}
fieldset.infoButton legend button{font-size:1.2rem !important;}

fieldset.infoButton.viewOnly {
    border-radius: 6px;
    border:none;
    background-color:#444;
    padding: 6px 18px 26px 18px;
}
fieldset.infoButton.viewOnly legend {
    text-align: left;
    border:none;
    border-radius:6px;
    padding:3px 10px;
    background-color:#666;
}

fieldset.infoButton.teamList {
    text-align: center;
    font-weight: 300;
    font-size: 1rem;
    margin-bottom: 16px;
}

fieldset.infoButton.teamList ul.teamMember {
    padding: 0;
    margin: 0;
    list-style: none;
}

fieldset.infoButton.teamList ul.teamMember li {
    display: inline-block;
    font-size: .8rem;
    font-weight: 900;
    position: relative;
    padding-left: 18px;
    margin: 1px 4px;
}

fieldset.infoButton.teamList ul.teamMember li span.title {
    font-weight: 300;
    color: #ffffff95;
}

fieldset.infoButton.teamList ul.teamMember li span.title2 {
    font-weight: 300;
    color: #ffffff70;
    font-style: italic;
    font-size: .7rem;
}



.displayRole {
    position: relative;
}

.displayRole.inline {
    display: inline-block;
}

.zenAvatar.teamButton{
    width:22px;height:22px;
    margin:0;
    display:inline-block;
}

.teamMember li button {height:36px;}

.roleIcon {
    position:relative;
    top: -3px;
    left: 12px;
}

.roleIcon:before {
    font-family: 'zenjuriesfont';
    color: #797979;
    font-size: .9rem;
    position: absolute;
    top: 1px;
    left: 0px;
    z-index: 999;
}

.displayRole.role1 .roleIcon:before {
    content: '\e0c3';
    color: var(--roleRequiredh);
}

/* chief executive */

.displayRole.role9 .roleIcon:before {
    content: '\e0c2';
    color: var(--roleRequiredh);
}

/* human resources */

.displayRole.role7 .roleIcon:before {
    content: '\e036';
    color: var(--roleSuggestedh);
}

/* safety manager */

.displayRole.role4 .roleIcon:before {
    content: '\e0c6';
    color: var(--roleSuggestedh);
}

/* claim manager */

.displayRole.role8 .roleIcon:before {
    content: '\e0cc';
    color: var(--roleSuggestedh);
}

/* employee supervisor */

.displayRole.role5 .roleIcon:before {
    content: '\e0c7';
    color: var(--roleSuggestedh);
}

/* work comp agent */

.displayRole.role3 .roleIcon:before {
    content: '\e0ca';
    color: var(--roleSuggestedh);
}

/* physical therapist */

.displayRole.role6 .roleIcon:before {
    content: '\e0c9';
    color: var(--roleSuggestedh);
}

/* service agent */

.displayRole.role2 .roleIcon:before {
    content: '\e0ce';
    color: var(--roleOptionalh);
}

/* medical support */

.displayRole.role10 .roleIcon:before {
    content: '\e0cf';
    color: var(--roleOptionalh);
}

.displayRole.role11 .roleIcon:before {
    content: '\e0cf';
    color: var(--roleOptionalh);
}

/* other users */

.roleTxt {
    color: #797979;
    font-size: .6rem !important;
    padding-left: 29px;
    font-weight: 900;
}

.displayRole.role1 .roleTxt:before {
    content: var(--role1txt);
    color: var(--roleRequiredh);
}

/* chief executive */

.displayRole.role9 .roleTxt:before {
    content: var(--role9txt);
    color: var(--roleRequiredh);
}

/* human resources */

.displayRole.role7 .roleTxt:before {
    content: var(--role7txt);
    color: var(--roleSuggestedh);
}

/* safety manager */

.displayRole.role4 .roleTxt:before {
    content: var(--role4txt);
    color: var(--roleSuggestedh);
}

/* claim manager */

.displayRole.role8 .roleTxt:before {
    content: var(--role8txt);
    color: var(--roleSuggestedh);
}

/* employee supervisor */

.displayRole.role5 .roleTxt:before {
    content: var(--role5txt);
    color: var(--roleSuggestedh);
}

/* work comp agent */

.displayRole.role3 .roleTxt:before {
    content: var(--role3txt);
    color: var(--roleSuggestedh);
}

/* physical therapist */

.displayRole.role6 .roleTxt:before {
    content: var(--role6txt);
    color: var(--roleSuggestedh);
}

/* service agent */

.displayRole.role2 .roleTxt:before {
    content: var(--role2txt);
    color: var(--roleOptionalh);
}

/* medical support */

.displayRole.role10 .roleTxt:before {
    content: var(--role10txt);
    color: var(--roleOptionalh);
}

.displayRole.role11 .roleTxt:before {
    content: var(--role11txt);
    color: var(--roleOptionalh);
}

/* other users */



/* user listing types */



.teamSetPanel:hover .teamSetContent .teamRoleTypeIcon {
    color: #d8d8d8;
    animation: headShake;
    animation-duration: .5s;
}




.teamSetContent .addTeamUser {
    width: 180px;
}

.teamSetContent .teamUserName {
    display: block;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    width: 180px;
    height: 22px;
    text-overflow: ellipsis;
}

.teamSetContent .teamUserRole {
    display: block;
    font-size: .8rem;
    font-weight: 900;
}

.teamSetContent .teamUserRole.required {
    color: var(--roleRequiredh);
}

.teamSetContent .teamUserRole.suggested {
    color: var(--roleSuggestedh);
}

.teamSetContent .teamUserRole.optional {
    color: var(--roleOptionalh);
}

.teamDelay1 {
    animation: teamGlow 1s ease-in-out;
    animation-delay: .4s;
}

.teamDelay2 {
    animation: teamGlow 1s ease-in-out;
    animation-delay: .5s;
}

.teamDelay3 {
    animation: teamGlow 1s ease-in-out;
    animation-delay: .6s;
}

.teamDelay4 {
    animation: teamGlow 1s ease-in-out;
    animation-delay: .7s;
}

.teamDelay5 {
    animation: teamGlow 1s ease-in-out;
    animation-delay: .8s;
}

.teamDelay6 {
    animation: teamGlow 1s ease-in-out;
    animation-delay: .9s;
}

.teamDelay7 {
    animation: teamGlow 1s ease-in-out;
    animation-delay: 1s;
}

.teamDelay8 {
    animation: teamGlow 1s ease-in-out;
    animation-delay: 1.1s;
}

.teamDelay9 {
    animation: teamGlow 1s ease-in-out;
    animation-delay: 1.2s;
}

.teamDelay10 {
    animation: teamGlow 1s ease-in-out;
    animation-delay: 1.3s;
}

@keyframes teamGlow {
    0% {
        box-shadow: 0px 0px 3px #d477ff;
    }

    50% {
        box-shadow: 0px 0px 28px #ff00ff;
    }

    100% {
        box-shadow: 0px 0px 3px black;
    }
}

.templateDelay1 {
    animation: templateGlow 1s ease-in-out;
    animation-delay: .4s;
}

.templateDelay2 {
    animation: templateGlow 1s ease-in-out;
    animation-delay: .5s;
}

.templateDelay3 {
    animation: templateGlow 1s ease-in-out;
    animation-delay: .6s;
}

.templateDelay4 {
    animation: templateGlow 1s ease-in-out;
    animation-delay: .7s;
}

.templateDelay5 {
    animation: templateGlow 1s ease-in-out;
    animation-delay: .8s;
}

.templateDelay6 {
    animation: templateGlow 1s ease-in-out;
    animation-delay: .9s;
}

.templateDelay7 {
    animation: templateGlow 1s ease-in-out;
    animation-delay: 1s;
}

.templateDelay8 {
    animation: templateGlow 1s ease-in-out;
    animation-delay: 1.1s;
}

.templateDelay9 {
    animation: templateGlow 1s ease-in-out;
    animation-delay: 1.2s;
}

.templateDelay10 {
    animation: templateGlow 1s ease-in-out;
    animation-delay: 1.3s;
}

@keyframes templateGlow {
    0% {
        box-shadow: 0px 0px 3px #9b77ff;
    }

    50% {
        box-shadow: 0px 0px 28px #6f00ff;
    }

    100% {
        box-shadow: 0px 0px 3px black;
    }
}

.teamMemberIcon {
    position: absolute;
    width: 56px;
    height: 56px;
    text-align: center;
    background-size: cover;
    background-position: center center;
    background-color: #000000;
    border-radius: 50%;
    z-index: 3;
}

.teamMemberIcon .userAvatar {
    top: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    background-color: #292929;
    opacity: .7;
}

.teamSetPanel:hover .teamMemberIcon .userAvatar {
    opacity: 1;
    box-shadow: 0px 0px 11px 3px #d400ff;
}

.helpAvatar {
    position: relative;
    top: 10px;
    left: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-position: center center;
    background-size: contain;
}

.teamSetPanel:hover .teamMemberIcon:hover .helpAvatar {
    opacity: 1;
    box-shadow: 0px 0px 11px 3px #5900ff;
}

.teamSetPanel.tp1 {
    border-top-right-radius: 20px;
}

.teamSetPanel.tp1:after {
    right: -28px;
    top: 25px;
    width: 60px;
    height: 50px;
    transform: rotate(51deg);
}

.teamSetPanel.tp1 .teamSetContent {
    padding-left: 50px;
}

.teamSetPanel.tp1 .teamRoleTypeIcon {
    left: 11px;
}

.teamSetPanel.tp1 .teamMemberIcon {
    right: -40px;
    top: 37px;
}

.teamSetPanel.tp2 {
    border-top-right-radius: 20px;
}

.teamSetPanel.tp2:after {
    display: none;
    right: -20px;
    top: 16px;
    width: 50px;
    height: 54px;
    transform: rotate(42deg);
}

.teamSetPanel.tp2 .teamSetContent {
    padding-left: 50px;
}

.teamSetPanel.tp2 .teamRoleTypeIcon {
    left: 11px;
}

.teamSetPanel.tp2 .teamMemberIcon {
    right: -37px;
    top: 6px;
}

.teamSetPanel.tp3 {
    border-top-right-radius: 10px;
}

.teamSetPanel.tp3:after {
    display: none;
}

.teamSetPanel.tp3 .teamSetContent {
    padding-left: 50px;
}

.teamSetPanel.tp3 .teamRoleTypeIcon {
    left: 11px;
}

.teamSetPanel.tp3 .teamMemberIcon {
    right: -37px;
    top: 1px;
}

.teamSetPanel.tp4 {
    border-bottom-right-radius: 20px;
}

.teamSetPanel.tp4:after {
    display: none;
    right: -14px;
    top: -2px;
    width: 50px;
    height: 54px;
    transform: rotate(-42deg);
}

.teamSetPanel.tp4 .teamSetContent {
    padding-left: 50px;
}

.teamSetPanel.tp4 .teamRoleTypeIcon {
    left: 11px;
}

.teamSetPanel.tp4 .teamMemberIcon {
    right: -37px;
    top: -6px;
}

.teamSetPanel.tp5 {
    border-bottom-right-radius: 20px;
}

.teamSetPanel.tp5:after {
    right: -27px;
    top: -11px;
    width: 60px;
    height: 50px;
    transform: rotate(-52deg);
}

.teamSetPanel.tp5 .teamSetContent {
    padding-left: 50px;
}

.teamSetPanel.tp5 .teamRoleTypeIcon {
    left: 11px;
}

.teamSetPanel.tp5 .teamMemberIcon {
    right: -40px;
    top: -37px;
}

.teamSetPanel.tp6 {
    border-top-left-radius: 20px;
}

.teamSetPanel.tp6:after {
    left: -28px;
    top: 25px;
    width: 60px;
    height: 50px;
    transform: rotate(-51deg);
}

.teamSetPanel.tp6 .teamSetContent {
    padding-right: 50px;
}

.teamSetPanel.tp6 .teamRoleTypeIcon {
    right: 11px;
}

.teamSetPanel.tp6 .teamMemberIcon {
    left: -40px;
    top: 37px;
}

.teamSetPanel.tp7 {
    border-top-left-radius: 20px;
}

.teamSetPanel.tp7:after {
    display: none;
    left: -20px;
    top: 17px;
    width: 50px;
    height: 54px;
    transform: rotate(-42deg);
}

.teamSetPanel.tp7 .teamSetContent {
    padding-right: 50px;
}

.teamSetPanel.tp7 .teamRoleTypeIcon {
    right: 11px;
}

.teamSetPanel.tp7 .teamMemberIcon {
    left: -37px;
    top: 6px;
}

.teamSetPanel.tp8 {
    border-top-left-radius: 10px;
}

.teamSetPanel.tp8:after {
    display: none;
}

.teamSetPanel.tp8 .teamSetContent {
    padding-right: 50px;
}

.teamSetPanel.tp8 .teamRoleTypeIcon {
    right: 11px;
}

.teamSetPanel.tp8 .teamMemberIcon {
    left: -37px;
    top: 1px;
}

.teamSetPanel.tp9 {
    border-bottom-left-radius: 20px;
}

.teamSetPanel.tp9:after {
    display: none;
    left: -14px;
    top: -2px;
    width: 50px;
    height: 54px;
    transform: rotate(42deg);
}

.teamSetPanel.tp9 .teamSetContent {
    padding-right: 50px;
}

.teamSetPanel.tp9 .teamRoleTypeIcon {
    right: 11px;
}

.teamSetPanel.tp9 .teamMemberIcon {
    left: -37px;
    top: -6px;
}

.teamSetPanel.tp10 {
    border-bottom-left-radius: 20px;
}

.teamSetPanel.tp10:after {
    left: -27px;
    top: -11px;
    width: 60px;
    height: 50px;
    transform: rotate(52deg);
}

.teamSetPanel.tp10 .teamSetContent {
    padding-right: 50px;
}

.teamSetPanel.tp10 .teamRoleTypeIcon {
    right: 11px;
}

.teamSetPanel.tp10 .teamMemberIcon {
    left: -40px;
    top: -37px;
}

.teamSetPanel.multiUser:before {
    font-family: 'zenjuriesfont';
    position: absolute;
    content: '\e196';
    color: white;
    z-index: 999;
    text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.87);
}

.teamSetPanel.tp1.multiUser:before,
.teamSetPanel.tp2.multiUser:before,
.teamSetPanel.tp3.multiUser:before,
.teamSetPanel.tp4.multiUser:before,
.teamSetPanel.tp5.multiUser:before {
    bottom: 5px;
    left: 5px;
}

.teamSetPanel.tp6.multiUser:before,
.teamSetPanel.tp7.multiUser:before,
.teamSetPanel.tp8.multiUser:before,
.teamSetPanel.tp9.multiUser:before,
.teamSetPanel.tp10.multiUser:before {
    bottom: 5px;
    right: 5px;
}

.teamRoster .teamRosterLeft {
    display: table-cell;
    width: 50%;
    position: relative;
}

.teamRoster .teamRosterRight {
    display: table-cell;
    width: 50%;
    position: relative;
}

.teamRoster .teamElementsLeft {
    display: table;
    width: 100%;
}

.teamRoster .teamElementsRight {
    display: table;
    width: 100%;
}

.teamRoster .teamElement {
    display: table-row;
}

.teamRoster .teamElement .element {
    display: table-cell;
}

.teamRoster .teamElement .element.tp1,
.teamRoster .teamElement .element.tp5 {
    padding: 7px 50px 7px 7px;
}

.teamRoster .teamElement .element.tp2,
.teamRoster .teamElement .element.tp4 {
    padding: 7px 106px 7px 7px;
}

.teamRoster .teamElement .element.tp3 {
    padding: 7px 134px 7px 7px;
}

.teamRoster .teamElement .element.tp6,
.teamRoster .teamElement .element.tp10 {
    padding: 7px 7px 7px 50px;
}

.teamRoster .teamElement .element.tp7,
.teamRoster .teamElement .element.tp9 {
    padding: 7px 7px 7px 106px;
}

.teamRoster .teamElement .element.tp8 {
    padding: 7px 7px 7px 134px;
}

@media (max-width: 880px) {
    .teamRoster .fullTeamRoster {
        transform: scale(0.85);
    }

    .teamRoster .circleOfCare {
        width: 220px;
        height: 220px;
        margin: 83px auto;
    }

    .rosterBox {
        top: 140px;
    }
}

@media (max-width: 580px) {
    .teamRoster .fullTeamRoster {
        transform: scale(0.63);
    }

    .teamRoster .circleOfCare {
        width: 300px;
        height: 300px;
        margin: 46px auto;
        border: 40px solid black;
    }

    .rosterBox {
        top: 110px;
    }

    .teamSetContent .teamRoleTypeIcon {
        position: absolute;
        top: 20px;
        font-size: 1.6rem;
    }

    .teamMemberIcon {
        width: 45px;
        height: 45px;
    }

    .teamMemberIcon .userAvatar {
        top: 2px;
        left: 2px;
        width: 41px;
        height: 41px;
    }

    .teamSetPanel.tp1 .teamSetContent,
    .teamSetPanel.tp2 .teamSetContent,
    .teamSetPanel.tp3 .teamSetContent,
    .teamSetPanel.tp4 .teamSetContent,
    .teamSetPanel.tp5 .teamSetContent {
        padding-left: 40px;
        text-align: left;
    }

    .teamSetPanel.tp6 .teamSetContent,
    .teamSetPanel.tp7 .teamSetContent,
    .teamSetPanel.tp8 .teamSetContent,
    .teamSetPanel.tp9 .teamSetContent,
    .teamSetPanel.tp10 .teamSetContent {
        padding-right: 40px;
        text-align: right;
    }

    .teamSetContent .teamUserName {
        display: block;
        font-size: 1.2rem;
        width: 125px;
    }

    .teamSetContent .teamUserRole {
        display: block;
        font-size: 1rem;
        font-weight: 900;
        letter-spacing: -.05rem;
    }

    .teamElementsRight .teamUserName {
        margin: 0 0 0 auto;
    }

    .teamSetPanel.tp1 .teamMemberIcon {
        right: -30px;
        top: 38px;
    }

    .teamSetPanel.tp2 .teamMemberIcon {
        right: -24px;
        top: 6px;
    }

    .teamSetPanel.tp3 .teamMemberIcon {
        right: -27px;
        top: 8px;
    }

    .teamSetPanel.tp4 .teamMemberIcon {
        right: -24px;
        top: 6px;
    }

    .teamSetPanel.tp5 .teamMemberIcon {
        right: -30px;
        top: -20px;
    }

    .teamSetPanel.tp6 .teamMemberIcon {
        left: -30px;
        top: 38px;
    }

    .teamSetPanel.tp7 .teamMemberIcon {
        left: -24px;
        top: 6px;
    }

    .teamSetPanel.tp8 .teamMemberIcon {
        left: -27px;
        top: 8px;
    }

    .teamSetPanel.tp9 .teamMemberIcon {
        left: -24px;
        top: 6px;
    }

    .teamSetPanel.tp10 .teamMemberIcon {
        left: -30px;
        top: -20px;
    }

    .teamSetPanel.tp1:after {
        right: -23px;
        top: 20px;
        width: 50px;
        height: 45px;
        transform: rotate(46deg);
    }

    .teamSetPanel.tp5:after {
        right: -21px;
        top: -6px;
        width: 50px;
        height: 45px;
        transform: rotate(-56deg);
    }

    .teamSetPanel.tp6:after {
        left: -23px;
        top: 20px;
        width: 50px;
        height: 45px;
        transform: rotate(-46deg);
    }

    .teamSetPanel.tp10:after {
        left: -21px;
        top: -6px;
        width: 50px;
        height: 45px;
        transform: rotate(56deg);
    }

    .teamStats {
        width: 98%;
        margin: 0 auto;
        top: -16px;
    }

    .teamStats .mission {
        position: absolute;
        top: 30px;
        left: 10px;
    }

    .teamStats .effectiveness {
        position: absolute;
        top: 30px;
        right: 10px;
    }
}

/*  info Button */


/* Location listing */
.locListing{width:100%;}
.locListing ul{padding:0;margin:0;display:table;list-style:none;width:100%;}
.locListing li{padding:0;margin:0;display:table-row;}

.locListing li .locIcon, .locListing li .locData, .locListing li .locAction{display:table-cell;position:relative;vertical-align:middle;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;}
.locListing li:first-child .locIcon, .locListing li:first-child .locData, .locListing li:first-child .locAction{border-top:none;}
.locListing li:last-child .locIcon, .locListing li:last-child .locData, .locListing li:last-child .locAction{border-bottom:none;}
.locListing li .locIcon{font-size:2rem;padding:5px 12px 0 12px;}
.locListing li .locData{width:100%;}
.locListing li .locTime{padding-right:5px;color:#98c1e7;}
.locListing li .locPlatform{padding-left:5px;}
.locListing li .locTime.active{color:#09e009;}
.locListing li .locPlace{font-size:1rem;font-weight:bold;padding:8px 0 3px 0;}
.locListing li .locStatus{font-size:.7rem;padding:3px 0 12px 0;}
.locListing li .locAction{text-align:right;padding-right:12px;font-size:1.2rem;}
.locListing li .locAction a{text-decoration:none;color:#ffffff60;}
.locListing li .locAction a:hover {color:white;}

/*  user listing */

.itemGrid.userList {
    width: 80%;
    margin: 0 auto;
}

.itemGrid__item.userContainer {
    width: 220px;
    height: 80px;
    text-align: center;
    flex-basis: 180px;
    padding: 10px 0;
    position: relative;
}

.userListUser {
    width: 200px;
    height: 55px;
    border-radius: 40px;
    background-color: #0c0c0c;
    margin: 0 auto;
}

.userListUser .userAvatar {
    position: absolute;
    top: 15px;
    left: 5px;
    width: 44px;
    height: 44px;
    background-color: black;
}

.userListUser .userFirstName {
    position: absolute;
    top: 19px;
    left: 55px;
    width: 102px;
    height: 20px;
    text-align: left;
    font-weight: 300;
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.userListUser .userLastName {
    position: absolute;
    top: 39px;
    left: 55px;
    width: 102px;
    height: 18px;
    text-align: left;
    font-weight: 300;
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.userContainer:hover .userListUser {
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.57);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.57);
    background: rgb(8, 73, 122);
    background: -moz-linear-gradient(left, rgba(8, 73, 122, 1) 0%, rgba(14, 129, 206, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(8, 73, 122, 1) 0%, rgba(14, 129, 206, 1) 100%);
    background: linear-gradient(to right, rgba(8, 73, 122, 1) 0%, rgba(14, 129, 206, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#08497a', endColorstr='#0e81ce', GradientType=1)
}

.userContainer a {
    display: block;
    position: absolute;
    cursor: pointer;
    text-decoration: none;
}

.userContainer a.message {
    width: 40px;
    height: 40px;
    top: 22px;
    right: 5px;
}

.userContainer a.message:after {
    font-family: 'zenjuriesfont';
    content: '\e023';
    color: #ffffff;
    opacity: .4;
    font-size: 1.6rem;
}

.userContainer a.message:hover:after {
    color: #f3a600;
    opacity: 1;
}

.userContainer a.addToTeam {
    width: 40px;
    height: 40px;
    top: 22px;
    right: 5px;
}

.userContainer a.addToTeam:after {
    font-family: 'zenjuriesfont';
    content: '\e063';
    color: #ffffff;
    opacity: .4;
    font-size: 1.6rem;
}

.userContainer a.addToTeam:hover:after {
    color: #ffffff;
    opacity: 1;
}

span.roleRequired {
    color: var(--roleRequired);
}

span.roleSuggested {
    color: var(--roleSuggested);
}

span.roleOptional {
    color: var(--roleOptional);
}

.veterancy {
    position: absolute;
    top: 28px;
    right: -6px;
    width: 60px;
    font-weight: 900;
    font-size: .8rem;
    color: white;
}

span.onActiveTeams {
    color: gold;
    font-weight: 900;
}

span.onTotalTeams {
    color: #409ca8;
    font-weight: 900;
}

@media (max-width: 580px) {
    .itemGrid.userList {
        width: 100%;
    }
}

.filteredList{font-size:.8rem;width:100%;text-align:right;border:1px dashed var(--filter-on);border-radius:6px;margin:10px 0;font-weight:300;padding:6px;background-color:#33333350;}

/*  user card */
.userCard-mini {
    width:130px;
    height:180px;
    border-radius:6px;
    -webkit-box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.37);
    box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.37);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#191919', endColorstr='#666666', GradientType=1);
    position: relative;
    overflow:hidden;
    margin:0 auto 15px auto;
}
.userCard-mini:hover {cursor:pointer;animation: pulse;animation-duration: .3s;background-color:#cccccc09;
    -webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.77);
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.77);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#191919', endColorstr='#666666', GradientType=1);
}
.userCard-mini .userBackground{background-color:black;position:relative;width:100%;height:47px;}
.userCard-mini .userInfo{position:relative;width:100%;height:100px;padding-top:30px;}
.userCard-mini .userInfo span{width:100%;display:block;text-align:center;overflow:hidden;text-overflow:ellipsis;}
.userCard-mini .userInfo span.firstname{font-size:1.1rem;font-weight:300;}
.userCard-mini .userInfo span.lastname{font-size:.8rem;padding-bottom:5px;}
.userCard-mini .userInfo span.title{font-size:.8rem;color:#888888;}
.userCard-mini .userInfo span.email{font-size:.7rem;text-decoration:underline;color:#5555cc;padding:0 8px;}


.zenGrid.cardList{display:table;width:100%;}
.zenGrid.cardList .userCard-mini {
    width:100%;;
    height:40px;
    border-radius:28px;
    overflow:hidden;
    margin:0 auto 10px auto;
    background-color:#ffffff10;
}
.zenGrid.cardList .userCard-mini:hover {cursor:pointer;animation: pulse;animation-duration: .2s;background-color:#ffffff30;
    -webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.77);
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.77);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#191919', endColorstr='#666666', GradientType=1);
}
.zenGrid__element{display:table-row;}
.zenGrid.cardList .userCard-mini .userBackground{background-color:transparent;position:relative;width:32px;height:32px;top:-16px;left:5px;display:table-cell;}
.zenGrid.cardList .userBackground .zenAvatar{width:32px;height:32px;}
.zenGrid.cardList .userInfo{position:relative;width:100%;height:40px;padding-top:0px;top:-30px;padding-left:50px;display:table;}
.zenGrid.cardList span{width:auto;display:table-cell;vertical-align:middle;text-align:left;overflow:hidden;text-overflow:ellipsis;padding:0 3px;}
.zenGrid.cardList span.firstname{font-size:.8rem;font-weight:900;width:max-content;white-space:nowrap;}
.zenGrid.cardList span.lastname{font-size:.8rem;padding-bottom:0;font-weight:900;width:max-content;white-space:nowrap;}
.zenGrid.cardList span.title{font-size:.8rem;color:#888888;width:100%;}
.zenGrid.cardList span.email{font-size:.7rem;text-decoration:none;color:#8787ee;position:relative;top: -3px;left: -8px;}
.zenGrid.cardList span.email:after{font-family: 'zenjuriesfont';font-size: .9rem;content:'\e032';position:relative;top: 2px;left: 5px;}
.zenGrid.cardList span.role{font-size:.7rem;font-weight:900;color:#ccb655;}
.zenGrid.cardList span.check{padding-right:12px;}


.zenUserlist{display:table;width:100%;}
.zenUserlist__heading{display:table-row;border:1px dashed yellow;}
.zenUserlist__heading div{display:table-cell;}
.zenUserlist__row{display:table-row;border:1px dashed red;}
.zenUserlist__row .userInfo div{display:table-cell;}
.userCard {
    width: 400px;
    height: 600px;
    border-radius: 10px;
    box-shadow: 0px 5px 16px 0px rgba(0, 0, 0, 0.57);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    text-align:left;
    color:white;
    font-size: 1.25rem; /* Adjusted for readability */
    word-wrap: break-word;
    overflow-wrap: break-word;   
    text-overflow: ellipsis;
    font-weight: bold;

}


/* General reset for unordered list */
.userCard #contactInfoDiv {
    list-style-type: none; /* Remove default bullets */
    padding-left:25px;
    padding-right:25px;
    font-weight:300;
}

/* Add custom styled bullets with the new blue shade */
.userCard #contactInfoDiv li {

    position: relative;
    padding-left: 25px; /* Space for the custom blue bullet */
    color: white;
    display: -webkit-box; /* Necessary for line clamping */
    -webkit-box-orient: vertical;
}

/* Style custom bullets with your specified blue */
.userCard #contactInfoDiv li::before {
    content: '\2022'; /* Unicode for a bullet */
    position: absolute;
    left: 0;
    color: #069b06 ; /* Your custom color */
    font-size: 1.2em; /* Adjust bullet size */
}

/* Clamp the title to exactly 2 lines */
.userCard #userTitleDiv {
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Clamp the description to 6 lines */
.userCard #userDescriptionDiv {
    -webkit-line-clamp: 7;
    overflow: hidden;
}


@media (max-width: 420px) {
    .userCard{
        width: 300px;
        height: 550px;
    }
}

@media (max-width: 370px) {
    .userCard{
        width: 275px;
        height: 550px;
    }
}

.flippableCard {
    perspective: 1200px;
    width: 100%;
    height: 100%;
}

.cardFlipR,
.cardFlipL,
.cardFlipX {
    transition: transform 0.5s;
}

.userCard .cardFront {
    background: linear-gradient(135deg, rgba(0, 0, 0, 1) 10%, rgba(102, 102, 102, 1) 100%);
    border-radius: 10px;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.userCard .cardBackL,
.userCard .cardBackR,
.userCard .cardBackX {
    background-color: #326139;
    border-radius: 10px;
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    backface-visibility: hidden;
}

.userCard .header {
    width: 100%;
    height: 15%; /* Adjusted for responsiveness */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.userCard .cardTitle {
    margin-top: .5rem;
    width: 100%;
    text-align: center;
    font-size: 3vw; /* Responsive font size */
    font-weight: 300;
}

.userCard .cardSubTitle {
    width: 100%;
    text-align: center;
    font-size: 1.5vw; /* Responsive font size */
    font-weight: 300;
    margin-top: -1rem;
}

.userCard .headerBG {
    width: 100%;
    height: 100%;
    background-color: black;
    background-size: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.userCard .cardZenRating {
    position: absolute;
    top: 0;
    right: 10px;
}

.userCard .userCardAvatarContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

.userCard .userCardAvatar {
    width: 75px; /* Avatar size */
    height: 75px; /* Avatar size */
    background-size: cover;
    background-position: center center;
    background-color: grey;
    border-radius: 50%;
}

.userCard .nameContainer {
    padding-left:25px;
    padding-right:25px;
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
    overflow: hidden; /* Hides any overflow */
    text-overflow: ellipsis; /* Adds ellipsis for overflow */
    display: -webkit-box; /* Required for multi-line truncation */
    -webkit-line-clamp: 2; /* Limits the text to 2 lines */
    -webkit-box-orient: vertical; /* Ensures the box is vertical */
    word-wrap: break-word; /* Breaks long words and ensures wrapping */
    white-space: normal; /* Allows wrapping of text */
  }

@media (max-width: 420px) {
    .userCard .userCardAvatar {
        width: 60px; /* Avatar size */
        height: 60px; 
    }
    .userCard .nameContainer {
        font-size: 1.2rem;
    }
}

.userCard .cardFrontContent {
    width: 100%;
    padding: 10px 5%;
    font-weight: 300;
}

.userCard .mainButton {
    width: 100%;
    position: absolute;
    bottom: 6px;
    text-align: center;
}

.userCard .mainButton button {
    margin: 0 auto;
}

.userCard fieldset {
    border-radius: 6px;
    border: 1px solid #2c2c2c;
    margin: .5rem 0;
    padding: .1rem .5rem .5rem .5rem;
}

.userCard fieldset.centered legend {
    text-align: center;
}

.userCard #themeContainer{
    height:5vh;
}

.userCard fieldset legend {
    color: #c0c0c0;
}

.userCard .cardElement {
    width: 100%;
    text-align: left;
}
  
.userCard .cardElement.email a {
    padding-left: 25px; /* Space for the custom blue bullet */
    padding-right: 25px;
    display: flex;
    justify-content: center;  /* Center the entire content horizontally */
    align-items: flex-start;  /* Align the items at the top */
    text-decoration: none;
    color: grey;
    font-size: 1rem;
    text-align: center;  /* Center the wrapped text */
    width: 100%;  /* Ensures the link takes up the full width */
  }
  
  .cardElement.email a .icon-wrapper {
    margin-right: 8px;  /* Space between icon and text */
  }
  
  .cardElement.email a .icon.icon-envelope-o.inline {
    display: inline-block;
    vertical-align: middle; /* Align the icon with the top of the text */
  }
  
  

.userCard .cardElement.lastseen{
    padding-left: 25px; /* Space for the custom blue bullet */
    padding-right:25px;
    margin-top:3px;
    text-align:center;
    font-size:1rem;
    color:grey;
}

.userCard .cardElement.phone {
    padding-left: 25px; /* Space for the custom blue bullet */
    padding-right:25px;
    text-decoration: none;
    color:grey;
    text-align:center;
    font-size:1rem;
}

.userCard .cardElement.email a:hover {
    color:lime;
}

.userCard fieldset .oneline {
    width: 220px;
    white-space: nowrap;
    overflow: hidden;
}

.userCard .roleDisplay,
.userCard .teamDisplay {
    text-align: center;
    padding: 4px 0;
}

.userCard .roleDisplay .icon {
    display: none;
}

span.outputLabel {
    font-weight: 900;
    font-size: 1rem;
    text-align: right;
    color: rgb(173, 173, 173);
}

span.outputData {
    font-weight: 400;
    font-size: 1rem;
    text-align: left;
    color: rgb(173, 173, 173);
}

/* card buttons */

#addChiefExecutive {
    display: none;
}

#addHumanResources {
    display: none;
}

#addInsuranceAdjuster {
    display: none;
}

#addClaimManager {
    display: none;
}

#addSafetyManager {
    display: none;
}

#addWCAgent {
    display: none;
}

#addSupervisor {
    display: none;
}

#addServiceAgent {
    display: none;
}

#addMedicalSupport {
    display: none;
}

#addOtherUser {
    display: none;
}

#removeFromTeam {
    display: none;
}

/* new tooltip (t-t) */

.newtip {
    position: relative;
    cursor: pointer;
  }
  
.newtip:before {
    content: attr(data-tooltip);
    position: absolute;
    top: 1.5em;
    font-size: 0.9em;
    padding: 1px 5px;
    display: none;
    color: white;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 4px;
    transition: opacity 0.1s ease-out;
    z-index: 99;
    text-align: left;
  }


/* tooltip */

.setToolTip {
    position: relative;
}

.useToolTip {}

.setToolTip.inline {
    display: inline-block;
}

span.toolTip {
    z-index: 999;
    position: absolute;
    left: 0px;
    top: -40px;
    display: block;
    visibility: hidden;
    border-radius: 2px;
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    font-weight: 900;
    font-size: .6rem;
    padding: 4px 6px;
    width: max-content;
    letter-spacing: 1px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

span.toolTip:after {
    content: ' ';
    position: absolute;
    bottom: -7px;
    left: 4px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid rgb(0, 0, 0);
}

span.toolTip.left {
    left: -52px;
}

span.toolTip.left:after {
    right: 5px;
}

.setToolTip:hover span.toolTip,
.useToolTip:hover span.toolTip {
    visibility: visible;
    animation: fadeInUp;
    animation-duration: .4s;
}

@media (max-width: 580px) {

    .setToolTip:hover span.toolTip,
    .useToolTip:hover span.toolTip {
        display: none;
    }
}

/* generic link styling */
a.buttonstyle{display:inline-block;cursor:pointer;border-radius:6px;padding:0px 4px 1px 4px;font-weight:400;border:1px solid transparent;opacity:.7;}
a.buttonstyle:hover{border-color:white;opacity:1;}
a.buttonstyle.noBorder:hover{border-color:transparent;opacity:1;}
a.buttonstyle.dashedBorder:hover{border:1px dashed white;opacity:1;}
a.buttonstyle.underline:hover{border-color:transparent;opacity:1;text-decoration:underline;}
a.buttonstyle.evident{opacity:1;font-weight:900;background-color:#00000070;border-color:#ffffff60;padding:1px 6px 2px 6px;}
a.buttonstyle.evident:hover{border-color:white;background-color:#000000;}
a.buttonstyle.subtle{opacity:1;border:1px solid #ffffff20;font-weight:400;color:#2a93e9;}
a.buttonstyle.subtle:hover{background-color:#1a639e;color:white;}
a.buttonstyle.secret{opacity:1;background-color:transparent;color:#73bd13;font-weight:400;}
a.buttonstyle.secret:hover{background-color:#4c8008;color:white;border-color:transparent;}
a.buttonstyle.pad{margin:4px;}
a.linkstyle{}

/* buttons */

button {
    font-weight: 400;
    background-color: #4b4b4b;
    border-radius: 30px;
    color: white;
    outline: none;
    border: none;
    cursor: pointer;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.47);
    margin: 4px 6px;
    font-size: .9rem;
    padding: 6px 18px 6px 18px;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

button:hover,
button:focus {
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.3);
    background-color: #7f7f7f;
}

button:active {
    box-shadow: none;
}

button.red {
    background-color: #c41111;
}

button.red:hover,
button.red:focus {
    background-color: #f52b2b;
}

button.magenta {
    background-color: #c90c81;
}

button.magenta:hover,
button.magenta:focus {
    background-color: #c90c7a;
}

button.blue {
    background-color: #1233c5;
}

button.blue:hover,
button.blue:focus {
    background-color: #2c50f1;
}

button.green {
    background-color: #20c512;
}

button.green:hover,
button.green:focus {
    background-color: #3be52c;
}

button.cyan {
    background-color: #38b7c0;
}

button.cyan:hover,
button.cyan:focus {
    background-color: #56d9e2;
}

button.orange {
    background-color: #c57d12;
}

button.orange:hover,
button.orange:focus {
    background-color: #eea333;
}

button.wine {
    background-color: #79094e;
}

button.wine:hover,
button.wine:focus {
    background-color: #a81570;
}

button.purple {
    background-color: #9812c5;
}

button.purple:hover,
button.purple:focus {
    background-color: #bd2dec;
}

button.lilac {
    background-color: #9812c5;
}

button.lilac:hover,
button.lilac:focus {
    background-color: #9a34d4;
}

button.gold {
    background-color: #b49725;
}

button.gold:hover,
button.gold:focus {
    background-color: #e0bd34;
}

button.yellow {
    background-color: #e7d914;
}

button.yellow:hover,
button.yellow:focus {
    background-color: #ffee05;
}

button.olive {
    background-color: #698112;
}

button.olive:hover,
button.olive:focus {
    background-color: #8eac22;
}

button.zenblue {
    background-color: #1483a5;
}

button.zenblue:hover,
button.zenblue:focus {
    background-color: #21add8;
}

button.zengreen {
    background-color: #8fb437;
}
button.zengreen:hover,
button.zengreen:focus {
    background-color: #b2da54;
}

button.zenpurple {
    background-color: #7e31bd;
}
button.zenpurple:hover,
button.zenpurple:focus {
    background-color: #9d44e6;
}

button.teamMemberButton {
    background-color: #111;
}
button.teamMemberButton:hover,
button.teamMemberButton:focus {
    background-color: #444;
}

button.redtab {background-color: var(--redtab);}
button.redtab:hover,button.redtab:focus {
background-color: var(--redtab-h);}

button.bluetab {background-color: var(--bluetab);}
button.bluetab:hover,button.bluetab:focus {
background-color: var(--bluetab-h);}

button.greentab {background-color: var(--greentab);}
button.greentab:hover,button.greentab:focus {
background-color: var(--greentab-h);}

button.orangetab {background-color: var(--orangetab);}
button.orangetab:hover,button.orangetab:focus {
background-color: var(--orangetab-h);}

button.purpletab {background-color: var(--purpletab);}
button.purpletab:hover,button.purpletab:focus {
background-color: var(--purpletab-h);}

button.cyantab {background-color: var(--cyantab);}
button.cyantab:hover,button.cyantab:focus {
background-color: var(--cyantab-h);}

button.goldtab {background-color: var(--goldtab);}
button.goldtab:hover,button.goldtab:focus {
background-color: var(--goldtab-h);}

button.black {
    background-color: #000000;
}

button.black:hover,
button.black:focus {
    background-color: #383838;
}

button.dkgrey {
    background-color: #4e4e4e;
}

button.dkgrey:hover,
button.dkgrey:focus {
    background-color: #727272;
}

button.ltgrey {
    background-color: #969696;
}

button.ltgrey:hover,
button.ltgrey:focus {
    background-color: #bbbbbb;
}

button.white {
    background-color: #ebebeb;
}

button.white:hover,
button.white:focus {
    background-color: rgb(255, 255, 255);
}

button.filter1 {
    background-color: var(--filter-on);
}

button.filter1:hover,
button.filter1:focus {
    background-color: var(--filter-h);
}

button.filter2 {
    background-color: var(--filter2);
}

button.filter2:hover,
button.filter2:focus {
    background-color: var(--filter2-h);
}

button.clientColor1 {
    background-color: var(--clientColor1);
}

button.clientColor1:hover,
button.clientColor1:focus {
    background-color: var(--clientColor1-h);
}

button.clientColor2 {
    background-color: var(--clientColor2);
}

button.clientColor2:hover,
button.clientColor2:focus {
    background-color: var(--clientColor2-h);
}

button.mobileNoText{font-size:0rem;}
button.mobileNoText .icon{font-size:1rem;}

.searchWidget {
    min-width: 200px;
    height: 36px;
    position: relative;
    margin: 0 auto;
}

.searchForm {
    position: relative;
    width: 100%;
    height: 100%;
}

.inputSearch {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 175px;
    height: 30px !important;
    padding: 0px 30px 2px 30px;
    border-radius: 18px;
    font-size: .8rem;
    font-weight: 400;
    border: 1px solid #aaaaaa50;
    box-sizing: border-box;
}

.doSearch {
    position: absolute;
    right: 20px;
    top: -3px;
    padding: 6px;
    background-color: #107fc9;
    width: 34px;
    height: 34px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.doSearch .icon {
    font-size: .8rem;
    color: white;
}

.doSearch:hover {
    background-color: #0894f1;
}

.doSearch:active {
    background-color: #5cb9f7;
}

.resetSearch {
    position: absolute;
    left: 0;
    top: 2px;
    padding: 3px;
    background-color: black;
    width: 24px;
    height: 24px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 1;
}

.resetSearch .icon {
    font-size: .8rem;
    color: white;
}

.resetSearch.activeSearch {
    background-color: white;
}

.resetSearch.activeSearch .icon {
    color: #0894f1;
}

@media screen and (max-width: 400px) {
    .inputSearch {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 175px;
        height: 30px !important;
        padding: 0px 20px 2px 30px;
        border-radius: 18px;
        font-size: .8rem;
        font-weight: 400;
        border: 1px solid #aaaaaa50;
        box-sizing: border-box;
    }
    .searchWidget {
        min-width: 150px;
    }
    
    .inputSearch {
        width: 120px;
    }
    
    .doSearch {
        width: 30px;
        height: 30px;
    }
    
    .resetSearch {
        width: 20px;
        height: 20px;
    }
}

button.round {
    padding: 0;
    height: 30px;
    width: 30px;
}
button.round .icon {
    left: 0px;
    top: 1px;
}

button.smallround {
    margin:2px;
    padding: 0;
    height: 24px;
    width: 24px;
}
button.smallround .icon {
    font-size:.8rem;
    left: 1px;
    top: 1px;
}

button.twoline {
    font-size: .8rem;
    line-height: .75rem;
    padding-left: 28px;
    text-align: left;
}

button.twoline .icon {
    position: absolute;
    left: 8px;
    top: 13px;
}

button.roleRequired {
    background-color: var(--roleRequired);
}

button.roleRequired:hover,
button.roleRequired:focus {
    background-color: var(--roleRequiredh);
}

button.roleSuggested {
    background-color: var(--roleSuggested);
}

button.roleSuggested:hover,
button.roleSuggested:focus {
    background-color: var(--roleSuggestedh);
}

button.roleOptional {
    background-color: var(--roleOptional);
}

button.roleOptional:hover,
button.roleOptional:focus {
    background-color: var(--roleOptionalh);
}

button.firstaidButton {background-color: var(--statusButton);}
button.firstaidButton.current,
button.firstaidButton.selected {background-color: var(--severityMild-a) !important;}
button.firstaidButton:hover,
button.firstaidButton:focus {background-color: var(--severityMild-h);}

button.moderateButton {background-color: var(--statusButton);}
button.moderateButton.current,
button.moderateButton.selected {background-color: var(--severityModerate-a) !important;}
button.moderateButton:hover,
button.moderateButton:focus {background-color: var(--severityModerate-h);}

button.severeButton {background-color: var(--statusButton);}
button.severeButton.current,
button.severeButton.selected {background-color: var(--severitySevere-a) !important;}
button.severeButton:hover,
button.severeButton:focus {background-color: var(--severitySevere-h);}

button.hospitalButton {
    background-color: var(--statusButton);
}

button.hospitalButton.current,
button.hospitalButton.selected {
    background-color: var(--statusHospital-a) !important;
}

button.hospitalButton:hover,
button.hospitalButton:focus {
    background-color: var(--statusHospital-h);
}

button.urgentcareButton {
    background-color: var(--statusButton);
}

button.urgentcareButton.current,
button.urgentcareButton.selected {
    background-color: var(--statusUrgentcare-a) !important;
}

button.urgentcareButton:hover,
button.urgentcareButton:focus {
    background-color: var(--statusUrgentcare-h);
}

button.doctorButton {
    background-color: var(--statusButton);
}

button.doctorButton.current,
button.doctorButton.selected {
    background-color: var(--statusDoctor-a) !important;
}

button.doctorButton:hover,
button.doctorButton:focus {
    background-color: var(--statusDoctor-h);
}

button.recoverhomeButton {
    background-color: var(--statusButton);
}

button.recoverhomeButton.current,
button.recoverhomeButton.selected {
    background-color: var(--statusRecoverhome-a) !important;
}

button.recoverhomeButton:hover,
button.recoverhomeButton:focus {
    background-color: var(--statusRecoverhome-h);
}

button.lightdutyButton {
    background-color: var(--statusButton);
}

button.lightdutyButton.current,
button.lightdutyButton.selected {
    background-color: var(--statusLightduty-a) !important;
}

button.lightdutyButton:hover,
button.lightdutyButton:focus {
    background-color: var(--statusLightduty-h);
}

button.fulldutyButton {
    background-color: var(--statusButton);
}

button.fulldutyButton.current,
button.fulldutyButton.selected {
    background-color: var(--statusFullduty-a) !important;
}

button.fulldutyButton:hover,
button.fulldutyButton:focus {
    background-color: var(--statusFullduty-h);
}

button.maxrecoveryButton {
    background-color: var(--statusButton);
}

button.maxrecoveryButton.current,
button.maxrecoveryButton.selected {
    background-color: var(--statusMaxrecovery-a) !important;
}

button.maxrecoveryButton:hover,
button.maxrecoveryButton:focus {
    background-color: var(--statusMaxrecovery-h);
}

button.terminatedButton {
    background-color: var(--statusButton);
}

button.terminatedButton.current,
button.terminatedButton.selected {
    background-color: var(--statusTerminated-a) !important;
}

button.terminatedButton:hover,
button.terminatedButton:focus {
    background-color: var(--statusTerminated-h);
}

button.resignedButton {
    background-color: var(--statusButton);
}

button.resignedButton.curren,
button.resignedButton.selected {
    background-color: var(--statusResigned-a) !important;
}

button.resignedButton:hover,
button.resignedButton:focus {
    background-color: var(--statusResigned-h);
}

button.deathButton {
    background-color: var(--statusButton);
}

button.deathButton.current,
button.deathButton.selected {
    background-color: var(--statusDeath-a) !important;
}

button.deathButton:hover,
button.deathButton:focus {
    background-color: var(--statusDeath-h);
}

button.selectUser {
    background-color: #3f3f3f;
}

button.selectUser:hover,
button.selectUser:focus {
    background-color: var(--user);
}

button.selectUser.selected {
    background-color: var(--user-s);
}

button.selectTeam {
    background-color: #3f3f3f;
}

button.selectTeam:hover,
button.selectTeam:focus {
    background-color: var(--team);
}

button.selectTeam.selected {
    background-color: var(--team-s);
}

button.selectTeamTemplate {
    background-color: #3f3f3f;
}

button.selectTeamTemplate:hover,
button.selectTeamTemplate:focus {
    background-color: var(--teamtemplate);
}

button.selectTeamTemplate.selected {
    background-color: var(--teamtemplate-s);
}

button.filter {
    background-color: var(--filter);

}
button.filter.active {
    background-color: var(--filter-on);
}
button.filter .filterIcon:after{
    font-family: 'zenjuriesfont';
    color: rgba(255, 255, 255, 0.32);
    position: absolute;
    width:16px;height:16px;
    left:5px;top:4px;
}
button.filter .filterIcon:after{content: '\e13c';}
button.filter.active .filterIcon:after{content: '\e13b';color: rgba(255, 255, 255, 0.82);}
button.filter:active .filterIcon:after{font-size:1rem;top:2px;color: rgba(255, 255, 255, 0.52);}
button.filter:hover,
button.filter:focus {
    background-color: var(--filter-h);
}

button.filtered {
    background-color: var(--filtered);
}

button.ghost {
    background-color: rgba(255, 255, 255, 0.21);
    color: rgba(255, 255, 255, 0.47);
}

button.ghost:hover,
button.ghost:focus {
    box-shadow: none;
}

button.small {
    padding: 3px 9px 3px 9px;
    font-size: .75rem;
    font-weight: 400;
}

button.small .icon {
    font-size: .75rem;
}

button.micro {
    padding: 2px 5px 2px 5px;
    font-size: .6rem;
    font-weight: 400;
}

button.micro .icon {
    font-size: .6rem;
    top:2px;
}

button.sorter {
    background-color: #313131;
    padding: 2px 16px 2px 8px;
    font-size: .8rem;
}
button.sorter.sorted {
    background-color: #81207c;
}

button.sorter:after {
    font-family: 'zenjuriesfont';
    content: '\e16f';
    color: rgba(255, 255, 255, 0.22);
    position: absolute;
    top: 3px;
    right: 2px;
}

button.sorter:hover {
    background-color: #414141;
}
button.sorter:hover.sorted {
    background-color: #c43abd;
}
button.sorter.up,
button.sorter.down {
    background-color: #3b668b;
}

button.sorter.up:hover,
button.sorter.down:hover {
    background-color: #4e89bd;
}

button.sorter.up:after {
    content: '\e170';
    color: white;
    top: 6px;
    right: 2px;
}

button.sorter.down:after {
    content: '\e171';
    color: white;
    top: 1px;
    right: 2px;
}

button.smallIcon,
span.smallIcon {
    font-family: 'zenjuriesfont';
    background-color: transparent;
    border: transparent;
    color: white;
    padding: 5px;
    box-shadow: none;
    opacity: .4;
    position: relative;
    top: 2px;
}

button.smallIcon span {
    display: inline-block;
    font-size: .6rem;
    font-weight: 900;
    font-family: 'Lato';
    position: relative;
    top: -4px;
}

button.smallIcon:hover {
    opacity: 1;
    animation: pulse;
    animation-duration: 2s;
}

button.setFavorite {
    background-color: transparent;
    border: transparent;
    padding: 0;
    box-shadow: none;
    opacity: .3;
    height: 26px;
    width: 26px;
    top: 6px;
    border-radius: 0;
}

button.setFavorite:after {
    color: white;
    font-family: 'zenjuriesfont';
    content: '\e046';
    font-size: 1.4rem;
}

button.setFavorite.set:after {
    content: '\e045';
}

button.setFavorite:hover {
    opacity: 1;
    animation: pulse;
    animation-duration: 2s;
}

button.pageNext {
    position: absolute;
    right: 15px;
    bottom: 15px;
    width: 70px;
    text-indent: -10px;
}

button.pageNext:after {
    font-family: 'zenjuriesfont';
    content: '\e002';
    color: rgba(255, 255, 255, 0.42);
    position: absolute;
    top: 6px;
    right: 3px;
}

button.pagePrev {
    position: absolute;
    left: 15px;
    bottom: 15px;
    width: 70px;
    text-indent: 10px;
}

button.pagePrev:after {
    font-family: 'zenjuriesfont';
    content: '\e001';
    color: rgba(255, 255, 255, 0.42);
    position: absolute;
    top: 6px;
    left: -3px;
}

button.ghost {
    opacity: .5
}

button.ghost:hover {
    box-shadow: none;
}

button .icon {
    display: inline-block;
    position: relative;
    top: 1px;
    left: -2px;
    font-size: .8rem;
    color: rgba(255, 255, 255, 0.68);
    padding-right: 2px;
}

button:hover {
    animation: pulse;
    animation-duration: .2s;
}

/* button array */

.buttonArray {
    width: 100%;
    text-align: center;
}

.buttonArray.inline {display:inline-block;width:max-content;position:relative;}

.buttonArray .buttonSet {
    padding: 1.3rem .2rem;
    border: 1px solid #323232;
    border-radius: 12px;
    margin-bottom: .8rem;
}

.buttonArray .buttonSet span {
    display: block;
    font-size: .9rem;
    font-weight: 300;
    line-height: .8rem;
    margin-bottom: .8rem;
}

.buttonArray.inline .buttonSet {
    display: inline-block;
    padding: 1rem;
    margin: .6rem .2rem
}

.buttonArray .buttonSet.inline button {
    display: inline-block;
    margin: .6rem .2rem
}

.buttonArray.noBorder .buttonSet {
    border: none;
    padding: 0 4px;
}

.buttonArray.maxWidth .buttonSet button {
    width: 100% !important;
}

.buttonArray.small button {
    padding: 3px 9px;
    font-size: .8rem;
}

@media (max-width: 580px) {
    button {
        font-size: 1.2rem;
        padding: 4px 18px 4px 18px;
    }

    button.twoline {
        font-size: 1.1rem;
        line-height: 1.3rem;
        padding-left: 22px;
        text-align: left;
    }

    button.twoline .icon {
        position: absolute;
        left: 8px;
        top: 15px;
    }

    button.sorter {
        padding: 2px 10px 2px 4px;
        font-size: .65rem;
    }
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {

    input[type='checkbox'],
    input[type='radio'] {
        --active: #275efe;
        --active-inner: rgb(236, 236, 236);
        --focus: 2px rgba(39, 94, 254, .3);
        --border: #444;
        --border-hover: #275efe;
        --background: #333;
        --disabled: #f6f8ff;
        --disabled-inner: #e1e6f9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }

    input[type='checkbox']:after,
    input[type='radio']:after {
        content: '';
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }

    input[type='checkbox']:checked,
    input[type='radio']:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: 0.3s;
        --d-t: 0.6s;
        --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
    }

    input[type='checkbox']:disabled,
    input[type='radio']:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: 0.9;
    }

    input[type='checkbox']:disabled:checked,
    input[type='radio']:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border);
    }

    input[type='checkbox']:disabled+label,
    input[type='radio']:disabled+label {
        cursor: not-allowed;
    }

    input[type='checkbox']:hover:not(:checked):not(:disabled),
    input[type='radio']:hover:not(:checked):not(:disabled) {
        --bc: var(--border-hover);
    }

    input[type='checkbox']:focus,
    input[type='radio']:focus {
        box-shadow: 0 0 0 var(--focus);
    }

    input[type='checkbox']:not(.switch),
    input[type='radio']:not(.switch) {
        width: 21px;
    }

    input[type='checkbox']:not(.switch):after,
    input[type='radio']:not(.switch):after {
        opacity: var(--o, 0);
    }

    input[type='checkbox']:not(.switch):checked,
    input[type='radio']:not(.switch):checked {
        --o: 1;
    }

    input[type='checkbox']+label,
    input[type='radio']+label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px;
    }

    input[type='checkbox']:not(.switch) {
        border-radius: 7px;
    }

    input[type='checkbox']:not(.switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg));
    }

    input[type='checkbox']:not(.switch):checked {
        --r: 43deg;
    }

    input[type='checkbox'].switch {
        width: 38px;
        border-radius: 11px;
    }

    input[type='checkbox'].switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--border));
        transform: translateX(var(--x, 0));
    }

    input[type='checkbox'].switch:checked {
        --ab: var(--active-inner);
        --x: 17px;
    }

    input[type='checkbox'].switch:disabled:not(:checked):after {
        opacity: 0.6;
    }

    input[type='radio'] {
        border-radius: 50%;
    }

    input[type='radio']:after {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, 0.7));
    }

    input.pink[type='radio']:after {
        background: rgb(255, 139, 159);
    }

    input.blue[type='radio']:after {
        background: rgb(0, 119, 255);
    }

    input.cyan[type='radio']:after {
        background: rgb(0, 199, 200);
    }

    input.yellow[type='radio']:after {
        background: yellow;
    }

    input.orange[type='radio']:after {
        background: orange;
    }

    input.red[type='radio']:after {
        background: red;
    }

    input.green[type='radio']:after {
        background: #22ff22;
    }

    input.grey[type='radio']:after {
        background: grey;
    }

    input[type='radio']:checked {
        --s: 0.5;
    }
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
  }
  
   .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--switch1);
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color:  var(--switch2);
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px  var(--switch2);
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  .switch.filterSwitch .slider{background-color: var(--filter-on);}

  .switch.filterSwitch input:checked + .slider {background-color:var(--filter2);}
  
  .switch.filterSwitch input:focus + .slider {box-shadow: 0 0 1px  var(--filter2);}

.toggleSwitch{display:table;}
.toggleSwitch .theSwitch{display:table-cell;text-align:center;vertical-align:middle;}
.toggleSwitch .theSwitch label{margin:0 auto;}
.toggleSwitch .label1{font-size:.9rem;font-weight:900;display:table-cell;text-align:right;vertical-align:middle;padding-right:10px;}
.toggleSwitch .label2{font-size:.9rem;font-weight:900;display:table-cell;text-align:left;vertical-align:middle;padding-left:10px;}

@media (max-width: 800px) {
    body {
        flex-direction: column;
    }
}

/*##################### SITE CLASSES #####################*/
/*----------------------------------------------------------------*/

.placeHolder {
    width: max-content;
    max-width: 300px;
    margin: 0 auto;
    border-radius: 6px;
    background-color: yellow;
    color: black;
    text-align: center;
    font-size: 1rem;
    font-weigh: 900;
    padding: 12px;
}

.placeHolder.wide {
    width: 100%;
    max-width: 100%;
}

.placeHolder span {
    display: block;
    font-size: .8rem;
    font-weight: 300;
    border-top: 2px dashed black;
    margin-top: 10px;
    padding-top: 10px;
}

/* Main Content */

.mainContent {
    width: 100%;
    padding: 0;
}

.pageContent {
    margin: 0;
    width: 100%;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    overflow-x: hidden;
    background-color:var(--bodyBg);
    height:100vh;
}

body.dark .pageContent{background-color:var(--bodyBg-dark);}
body.light .pageContent{background-color:var(--bodyBg-light);}

.pageContent.static {
    background-attachment: fixed;
}

.pageContent.scroll {
    background-attachment: scroll;
}

.container {
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
    padding: 0 40px;
}

.container.setMinHeight {
    min-height: 800px;
}

.container.noPad {
    padding: 0;
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
}

@media (max-width: 580px) {
    .container {
        padding: 0px;
    }
}

/* BoxGrid Layout */

.boxGrid {
    display: table;
    width: 100%;
    height: max-content;
}

.boxGrid .boxGrid__box {
    display: table-cell;
    margin: 0;
}

/*two-box*/

.boxGrid__box.box-size-10 {
    width: 10%;
}

.boxGrid__box.box-size-10 .boxContent {
    max-width: 140px;
}

.boxGrid__box.box-size-20 {
    width: 20%;
}

.boxGrid__box.box-size-20 .boxContent {
    max-width: 240px;
}

.boxGrid__box.box-size-30 {
    width: 30%;
}

.boxGrid__box.box-size-30 .boxContent {
    max-width: 360px;
}

.boxGrid__box.box-size-40 {
    width: 40%;
}

.boxGrid__box.box-size-40 .boxContent {
    max-width: 480px;
}

.boxGrid__box.box-size-50 {
    width: 50%;
}

.boxGrid__box.box-size-50 .boxContent {
    max-width: 600px;
}

.boxGrid__box.box-size-60 {
    width: 60%;
}

.boxGrid__box.box-size-60 .boxContent {
    max-width: 720px;
}

.boxGrid__box.box-size-70 {
    width: 70%;
}

.boxGrid__box.box-size-70 .boxContent {
    max-width: 840px;
}

.boxGrid__box.box-size-80 {
    width: 80%;
}

.boxGrid__box.box-size-80 .boxContent {
    max-width: 950px;
}

.boxGrid__box.box-size-90 {
    width: 90%;
}

.boxGrid__box.box-size-90 .boxContent {
    max-width: 1060px;
}

/*multi-box*/

.boxGrid__box.box-size-33 {
    display: table-cell;
    width: 33.3%;
    margin: 0;
}

.boxGrid__box.box-size-33 .boxContent {
    max-width: 399px;
}

.boxGrid__box.box-size-25 {
    display: table-cell;
    width: 25%;
    margin: 0;
}

.boxGrid__box.box-size-25 .boxContent {
    max-width: 300px;
}

.boxGrid__box .boxContent {
    text-align: justify;
    padding: 20px 40px;
}

.boxGrid__box .boxContent-tight {
    text-align: justify;
    padding: 1px 2px;
}

.boxGrid__box .boxContent-transparent {
    padding: 1px 2px;
    background-color: transparent;
}

.boxGrid__box .boxContent.set-right {
    margin: 0 0 0 auto;
}

.boxGrid__box .boxContent.set-left {
    margin: 0 auto 0 0;
}

.boxGrid__box .boxContent.set-center {
    margin: 0 auto;
}

@media (max-width: 768px) {
    .boxGrid {
        display: block;
    }

    .boxGrid .boxGrid__box {
        display: block;
        width: 100%;
    }

    .boxGrid__box.boxContent,
    .boxGrid__box.box-size-10,
    .boxGrid__box.box-size-20,
    .boxGrid__box.box-size-25,
    .boxGrid__box.box-size-30,
    .boxGrid__box.box-size-33,
    .boxGrid__box.box-size-40,
    .boxGrid__box.box-size-50,
    .boxGrid__box.box-size-60,
    .boxGrid__box.box-size-70,
    .boxGrid__box.box-size-80,
    .boxGrid__box.box-size-90 {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0px;
    }

    .boxGrid__box.box-size-10 .boxContent,
    .boxGrid__box.box-size-20 .boxContent,
    .boxGrid__box.box-size-25 .boxContent,
    .boxGrid__box.box-size-30 .boxContent,
    .boxGrid__box.box-size-33 .boxContent,
    .boxGrid__box.box-size-40 .boxContent,
    .boxGrid__box.box-size-50 .boxContent,
    .boxGrid__box.box-size-60 .boxContent,
    .boxGrid__box.box-size-70 .boxContent,
    .boxGrid__box.box-size-80 .boxContent,
    .boxGrid__box.box-size-90 .boxContent {
        max-width: 100% !important;
    }

    .boxContent.set-right,
    .boxContent.set-left,
    .boxContent.set-center {
        margin: 0 auto !important;
    }
}

.split50 {
    width: 50%;
    float: left;
    min-height: 100px;
}

@media (max-width: 580px) {
    .split50 {
        width: 100%;
        float: none;
    }

    .boxGrid__box {
        padding: 0px;
    }

    .boxGrid__box .boxContent {
        padding: 0px;
    }
}

.simpleGrid {
    margin: 1rem auto;
    width: min(90%, 75rem);
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
}

.simpleGrid.3col {
    margin: 5rem auto;
    width: min(90%, 75rem);
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 33% 33% 33%;
}

.simpleGrid.2col {
    grid-template-columns: 50% 50%;
}

@media (min-width: 55em) {
    .simpleGrid {
        grid-auto-flow: column;
    }
}

.newInjuryPanel {
    width: 100%;
    background-color: transparent;
    min-height: 800px;
    border-radius: 8px;
    padding: 40px;
}

/*flexPanel-expanding panel*/

.flexPanel {
    width: 100%;
    max-width: 1030px;
    margin: 20px auto 30px auto;
    border-radius: 10px;
    position: relative;
    background: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.3) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.3) 100%);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.3) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c7000000', endColorstr='#4d000000', GradientType=1);
}

body.dark .flexPanel {
    background: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.3) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.3) 100%);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.3) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c7000000', endColorstr='#4d000000', GradientType=1);
}
body.light .flexPanel {
    background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.3) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.3) 100%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.3) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c7ffffff', endColorstr='#4dffffff', GradientType=1);
}

.flexPanel.active {
    border: 1px solid var(--flexactive);
}

.flexPanel .viewContent .pagination {
    display: none;
}

.flexPanel .viewControl {
    height: 65px;
    overflow: hidden;
    transition: all .3s ease-in-out;
}

.flexPanel .viewControl:hover {
    background-color: var(--flexhover);
    border-radius: 8px;
    cursor: pointer;
    overflow: visible;
}

body.dark .flexPanel .viewControl:hover {background-color: var(--flexhover-dark);}
body.light .flexPanel .viewControl:hover {background-color: var(--flexhover-light);}

.flexPanel .viewControl .compactViewLeft {
    text-align: left;
    float: left;
}

.flexPanel .viewControl .compactViewRight {
    text-align: right;
    float: right;
}

.flexPanel .viewControl .compactViewTitle {
    text-align: right;
    float: right;
}

.flexPanel .viewControl .compactViewX {
    position: absolute;
    top: 25px;
    right: -1px;
    font-size: .7rem;
    transition: all .5s ease;
    opacity: 0;
}

.flexPanel .viewControl .compactViewExpand {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
    font-size: .7rem;
    padding-top: 25px;
}

.flexPanel .viewControl ul {
    list-style: none;
    padding: 0 5px;
    margin: 0;
    position: relative;
    top: 17px;
    transition: all .5s ease;
}

.flexPanel .viewControl.expand ul {
    position: relative;
    top: -20px;
    opacity: 0;
}

.flexPanel.locked .viewControl.expand ul {
    position: relative;
    top: 17px;
    opacity: 1;
}

.flexPanel .viewControl.expand .compactViewX {
    top: 25px;
    right: 13px;
    opacity: 1;
}

.flexPanel .viewControl.expand .compactViewExpand {
    display: none;
}

.flexPanel .viewControl.expand+.viewContent .pagination {
    display: block;
}

.flexPanel .viewControl li {
    padding: 6px 6px;
    display: inline-block;
}

.flexPanel .viewControl span.icon img {
    width: 20px;
}

.flexPanel .viewControl span.value {
    color: white;
    font-weight: 400;
    font-size: 1.1rem;
    position: relative;
    top: -3px;
    padding-left: 5px;
}

.flexPanel .viewContent {
    height: 0px;
    overflow: hidden;
    transition: all .4s ease;
    position: relative;
}

.flexPanel .viewContent hr {
    border-color: black;
    width: 80%;
}

.flexPanel .viewControl.expand+.viewContent {
    height: 700px;
    transition: all 1s ease;
}

.fixedPanel {
    width: 100%;
    max-width: 1030px;
    margin: 20px auto 30px auto;
    border-radius: 10px;
    position: relative;
    background: -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.3) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.3) 100%);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.3) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c7000000', endColorstr='#4d000000', GradientType=1);
}

.fixedPanel.active {
    border: 1px solid var(--flexactive);
}

.fixedPanel .viewContent .pagination {
    display: none;
}

.fixedPanel .barView {
    background-color: rgba(0, 0, 0, 0.30);
    height: 65px;
    transition: all .3s ease-in-out;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
}

.fixedPanel .barView:hover {
    background-color: rgba(0, 0, 0, 0.50);
    overflow: visible;
}

.fixedPanel .barView .barViewLeft {
    text-align: left;
    float: left;
}

.fixedPanel .barView .barViewRight {
    text-align: right;
    float: right;
}

.fixedPanel .barView ul {
    list-style: none;
    padding: 0 5px;
    margin: 0;
    position: relative;
    top: 17px;
    transition: all .5s ease;
}

.fixedPanel .barView.expand ul {
    position: relative;
    top: 17px;
    opacity: 1;
}

.fixedPanel .barView+.viewContent .pagination {
    display: block;
}

.fixedPanel .barView li {
    padding: 6px 6px;
    display: inline-block;
}

.fixedPanel .barView span.icon img {
    width: 20px;
}

.fixedPanel .barView span.value {
    color: white;
    font-weight: 400;
    font-size: 1.1rem;
    position: relative;
    top: -3px;
    padding-left: 5px;
}

.fixedPanel .viewContent {
    height: max-content;
    position: relative;
}

.fixedPanel .viewContent hr {
    border-color: black;
    width: 80%;
}

.fixedPanel .barView.expand+.viewContent {
    height: 700px;
    transition: all 1s ease;
}

@media (max-width: 576px) {
.doMax{font-size:0 !important;}
.doMax:after{font-family:'zenjuriesfont';content:'\e199';font-size:1rem;}
.doMin{font-size:0 !important;}
.doMin:after{font-family:'zenjuriesfont';content:'\e19c';font-size:1rem;}

}



/*section panels and support*/

/* done */
section.sectionPanel,
.sectionPanel {
    border-radius: 8px;
    border: 1px solid var(--sectionpanelo);
    background-color: var(--sectionpanelt);
    padding: 0 0 20px 0;
    margin: 0 auto 40px auto;
    position: relative;
}
section.sectionPanel.noBorder,
.sectionPanel.noBorder {border:none !important;}

body.dark section.sectionPanel, body.dark .sectionPanel{border: 1px solid var(--sectionpanelo-dark);background-color: var(--sectionpanelt-dark);}
body.light section.sectionPanel, body.light .sectionPanel{border: 1px solid var(--sectionpanelo-light);background-color: var(--sectionpanelt-light);}

/* done */
section.sectionPanel.transparent,
.sectionPanel.transparent {
    background-color: transparent !important;
    border: none !important;
}

section.sectionPanel hr,
.sectionPanel hr {
    border: 2px solid var(--sectionpanelhr);
    border-radius: 4px;
    width: 80%;
    margin-top: 30px;
    margin-bottom: 30px;
}

section.sectionPanel hr.thick,
.sectionPanel hr.thick {
    border: 5px solid var(--sectionpanelhr);
    border-radius: 5px;
    width: 70%;
    margin-top: 40px;
    margin-bottom: 40px;
}

section.sectionPanel hr.thin,
.sectionPanel hr.thin {
    border: 1px solid var(--sectionpanelhr);
    width: 90%;
    margin-top: 20px;
    margin-bottom: 30px;
}

section.sectionPanel.complete,
.sectionPanel.complete {
    background-color: var(--sectionpanelc);
}

section.sectionPanel.complete:after,
.sectionPanel.complete:after {
    position: absolute;
    bottom: -3px;
    right: -6px;
    font-family: 'zenjuriesfont';
    content: '\e018';
    color: green;
    text-shadow: 0px 1px 4px black;
    font-size: 2.6em;
    animation: zoomIn;
    animation-duration: 1s;
}
section.sectionPanel p,
.sectionPanel p {
    padding: 0 .5rem .5rem .5rem;
    font-weight: 300;
    text-align: justify;
    text-justify: inter-word;
}
body.dark section .sectionPanel.gradient {
    background: rgb(71,71,71);
    background: -moz-linear-gradient(-45deg,  rgba(71,71,71,1) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(71,71,71,1) 0%,rgba(0,0,0,1) 100%);
    background: linear-gradient(135deg,  rgba(71,71,71,1) 0%,rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#000000',GradientType=1 );
}
body.light section .sectionPanel.gradient {
    background: rgb(224,224,224);
    background: -moz-linear-gradient(-45deg,  rgba(224,224,224,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(224,224,224,1) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(135deg,  rgba(224,224,224,1) 0%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#ffffff',GradientType=1 );
}

body.dark section .sectionInfo {
    padding: 20px 40px;
    color: var(--sectioncontent);
    text-align: left;
    width: 100%;
    position: relative;
    font-size:1.2rem;
}
body.light section .sectionInfo {color: var(--sectioncontent-light);}

body.dark section .sectionContent {
    padding: 20px 40px;
    color: var(--sectioncontent);
}

body.light section .sectionContent {color: var(--sectioncontent-light);}

section .sectionContent.padded {
    padding: 20px 70px;
}
section .sectionContent p {
    margin-bottom: 20px;
}


/* done */

fieldset.disclaimer {
    padding: .8rem 1rem 1rem 1rem;
    border-radius: 6px;
    border: 1px solid #ff000050;
    margin: 2rem;
    font-weight: 300;
    font-size: .8rem;
    color: #ffffff70;
    background-color: #00000020;
}
fieldset.disclaimer legend {
    font-weight: 900;
}

img.sectionIcon {
    height: 2rem;
    position: relative;
    left: -5px;
    top: 10px;
    animation: swing;
    animation-duration: 1s;
}

.sectionTitle__center {
    display: block;
    width: 100%;
    font-weight: 300;
    margin: 0;
    text-align: center;
    padding: 10px 0 3px 0;
    font-size: 1.4rem;
}

.sectionTitle {
    position: relative;
    display: block;
    color: var(--sectiontitle);
    width: 100%;
    font-weight: 900;
    margin: 0;
    padding: 20px 0 20px 65px;
    font-size: 1.4rem;
    border-top-left-radius, border-top-right-radius:8px;
}
.sectionTitle.opaque{background-color:#44444480;}
.sectionTitle.small{font-size:1rem;padding: 15px 0 10px 35px;}
.sectionTitle.small .icon{font-size:1.3rem;left:10px;top:14px;}
body.dark .sectionTitle {color: var(--sectiontitle-dark);}
body.light .sectionTitle {color: var(--sectiontitle-light);}

.sectionTitle.wide {
    padding: 7px 0 20px 30px;
}

.sectionTitle.underlined {
    padding: 30px 0 4px 0px;
    border-bottom: 2px solid white;
    margin-bottom: 12px;
}
.sectionTitle .description{font-size:1rem;font-weight:300;}
.sectionData {
    display: block;
    position: absolute;
    right: 60px;
    top: 24px;
    color: var(--sectiontitle);
    width: 140px;
    margin: 0;
}

.sectionData span {
    font-size: .8rem;
    font-weight: 900;
    display: inline-block;
    margin: 0 5px 0 2px;
}

.sectionSubTitle {
    position: relative;
    display: block;
    color: var(--sectiontitle);
    width: 90%;
    font-weight: 300;
    margin: 0 auto;
    padding: 20px 0 10px 15px;
    font-size: 1rem;
    border-bottom: 1px dashed #ffffff30;
}

.sectionContentTitle {
    position: relative;
    display: block;
    color: var(--sectiontitle);
    width: max-content;
    font-weight: 400;
    margin: 0;
    font-size: 1rem;
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--sectiontitle);
}


.sectionContent {
    padding: .5rem;
}

.sectionTitle .icon {
    font-size: 1.8rem;
    position: absolute;
    top: 20px;
    left: 26px;
}

body.dark .sectionTitle .icon {color: var(--sectiontitleicon-dark);}
body.light .sectionTitle .icon {color: var(--sectiontitleicon-light);}

.sectionSubTitle .icon {
    font-size: 1.4rem;
    position: absolute;
    top: 20px;
    left: -14px;
}

body.dark .sectionSubTitle .icon {color: var(--sectiontitleicon-dark);}
body.light .sectionSubTitle .icon {color: var(--sectiontitleicon-light);}

ul.sectionInfoPanel {
    position: relative;
    display: table;
    list-style: none;
    width: max-content;
    min-width: 160px;
    padding: 2rem 3.2rem;
    border: 1px solid #ffffff10;
    border-radius: 12px;
    margin: 0 auto;
    box-shadow: 1px -2px 23px -5px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 1px -2px 23px -5px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 1px -2px 23px -5px rgba(0, 0, 0, 0.7);
}

ul.sectionInfoPanel li {
    display: table-row;
    font-weight: 300;
}

ul.sectionInfoPanel li span.label {
    display: table-cell;
    width: max-content;
    padding-right: 6px;
    font-weight: 300;
    text-align: right;
    padding: 4px 6px 4px 0;
}

ul.sectionInfoPanel li span.data {
    display: table-cell;
    width: 100%;
    font-weight: 900;
    padding: 4px 0;
}

ul.sectionInfoPanel li span.small {
    font-size: .8rem;
}



.sectionPanelIcon {
    all: initial;
    position: absolute;
    top: -15px;
    left: -15px;
    height: 30px;
    width: 30px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.sectionPanelIcon img {
    width: 30px;
    height: 30px;
}

.sectionPanel__title{
    position: relative;
    display: block;
    width: 100%;
    font-weight: 900;
    margin: 0;
    padding: 20px 0 20px 65px;
    font-size: 1.2rem;
    border-top-left-radius, border-top-right-radius:8px;
}
.sectionPanel__message{
    position: relative;
    display: block;
    width: 100%;
    font-weight: 900;
    margin: 0;
    font-size: 1rem;
    padding-top:4px;
    height:30px;
    text-align:center;
}
body.dark .sectionPanel__title{color: var(--sectiontitle-dark);}
body.light .sectionPanel__title{color: var(--sectiontitle-light);}

.sectionPanel__title .icon {
    font-size: 1.8rem;
    position: absolute;
    top: 20px;
    left: 26px;
    color: #7ebb1d !important;
}

.sectionTitle .icon {
    color: #7ebb1d !important;
}
.sectionPanel__title span.titleDesc{display:inline-block;position:relative;top:-1px;left:5px;font-size:.8rem;font-weight:300;opacity:.6;}
.sectionPanel__controls {
    position: absolute;
    top: 20px;
    right: 20px;
}

.sectionPanel__header{padding:0px 28px 20px 28px;font-size:2.2rem;font-weight:300;text-align:center;margin:20px 30px 20px 30px;border-bottom:2px solid var(--zenpanel-lines);}
.sectionPanel__sub-header{padding:0px 28px 20px 28px;font-size:1.4rem;font-weight:300;text-align:center;}
.sectionPanel__controls{position:absolute;top:15px;right:15px;}
.sectionPanel__description{padding:0px 28px 20px 28px;font-size:.9rem;font-weight:300;}
.sectionPanel__subTitle{text-align:left;padding:12px 28px 0px 0px;font-size:1.2rem;font-weight:300;width:100%;border-bottom:1px solid var(--zenpanel-lines);margin-bottom:20px;}
.sectionPanel__content{overflow-x:auto;padding:5px 28px 5px 28px;font-size:.9rem;line-height:1.3rem;font-weight:400;color: var(--zenpanel-text);}
.sectionPanel__linecontent{padding:20px 0px;border-top:1px solid var(--zenpanel-lines);border-bottom:1px solid var(--zenpanel-lines);margin:20px 28px;font-size:1rem;line-height:1.1rem;font-weight:300;color: var(--zenpanel-text);}
.sectionPanel__alertInfo{position:relative;text-align:left;padding:12px 12px 12px 45px;border:1px dashed #aaaaaa50;border-radius:8px;margin:5px 40px;font-size:1rem;line-height:1.4rem;font-weight:300;color: var(--zenpanel-text);}
.sectionPanel__alertInfo .alertInfo__icon{position:absolute;top:12px;left:12px;font-size:1.3rem;}
.sectionPanel__footer{text-align:center;padding:20px 28px 10px 28px;font-size:1.2rem;font-weight:300;letter-spacing:.1rem;color: var(--zenpanel-subtext);opacity:.8;}
.sectionPanel__disclaimer{text-align:right;padding:20px 28px 10px 28px;font-size:.9rem;font-weight:600;color: var(--zenpanel-disclaimer);}

ul.sectionHelpPanel {
    position: relative;
    list-style: none;
    width: 100%;
    min-width: 160px;
    max-width: 500px;
    padding: .8rem 1.2rem;
    border: 1px dashed #5555ff30;
    border-radius: 12px;
    margin: 20px auto;
}

ul.sectionHelpPanel.yellow {
    border-color: #ffcc1030;
}

ul.sectionHelpPanel.green {
    border-color: #44ff4430;
}

ul.sectionHelpPanel.blue {
    border-color: #4444ff30;
}

ul.sectionHelpPanel.orange {
    border-color: #ff881030;
}

ul.sectionHelpPanel li {
    padding: 6px 0;
    font-weight: 300;
    text-align: justify;
    justify-content: flex-end;
}

.sectionDescription {
    padding: .5rem 2rem;
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--sectioncontent);
}
.sectionDescription span.note{display:block;font-size:.9rem;font-weight:400;padding: .5rem 2rem;}

body.dark .sectionDescription {color: var(--sectioncontent-dark);}
body.light .sectionDescription {color: var(--sectioncontent-light);}
@media (max-width: 776px) {
    .sectionPanel__controls{width:100%;position:relative;text-align:right;}
}
@media (max-width: 576px) {
    .sectionPanel__title{padding: 10px 0 10px 45px;}
    .sectionPanel__title .icon {top: 10px;left: 10px;}        
    .sectionPanel__header{padding:0px 4px 10px 4px;}
    .sectionPanel__sub-header{padding:0px 4px 10px 4px;}
    .sectionPanel__description{padding:0px 4px 10px 4px;}
    .sectionPanel__content{overflow-x:auto;padding:5px 4px 10px 4px;}
    .sectionPanel__footer{padding:10px 4px 10px 4px;}
    .sectionPanel__disclaimer{padding:10px 4px 10px 4px;}    
    ul.sectionInfoPanel {
        width: 100%;
        padding: 1rem 1.5rem;
    }

    .sectionDescription {
        padding: 1.1rem;
        font-size: .9rem;
    }

    section.sectionPanel,
    .sectionPanel {
        padding: 0 5px 20px 5px;
        margin:0;
    }
    .sectionTitle {
        padding: 20px 0 20px 29px;
        font-size: 1.2rem;
    }
    .sectionTitle .icon {
        top: 17px;
        left: 0px;
    }
}

.sectionImage {
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.sectionImage img {
    margin: 0 auto;
    width: 200px;
}

.sectionNav {
    width: 100%;
    position:relative;
    text-align: center;
    margin-top: 16px;
    height:40px;
}

.sectionNav .navRight {
    position:absolute;
    right:20px;
}
.sectionNav .navLeft {
    position:absolute;
    left:20px;
}

.sectionNav a {
    color: white;
    cursor: pointer;
    font-size: .9rem;
}

.sectionNav a:hover {
    color: grey;
}

@media (max-width: 576px) {
    .newInjuryPanel {
        padding: 0px;
    }

    section .sectionContent {
        padding: 4px 8px;
    }
    .sectionNav .navRight {
        right:-5px;
    }
    .sectionNav .navLeft {
        left:-5px;
    }
}

/* working */

.headerControls {
    min-height: 100px;
    height: 215px;
    padding: 110px 0 0px 0;
    margin: 0 auto 16px auto;
}

.headerControlsContainer {
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.headerControls__header {
    width: 100%;
    height:60px;
}

.headerControls__subHeader {
    width: 100%;
    height:20px;
}

.header__titleBlock{width:50%;height:60px;float:left;}

.header__titleBlockContainer{height:60px;position:relative;}
.header__titleBlockContainer img{width:48px;height:48px;position:absolute;left:0px;top:8px;}
.header__titleBlockContainer span.title-text{
    height:40px;
    position:absolute;left:52px;top:5px;
    font-weight: 900;
    font-size: 1.4rem;
    color: var(--pageTitle);
    white-space:nowrap;
}
.header__titleBlockContainer span.subTitle-text{
    height:20px;
    opacity:.5;
    position:absolute;left:52px;bottom:3px;
    color: var(--pageTitle);
    font-weight: 400;
    font-size: 1rem; 
}

.header__widgets{position:relative;width:50%;height:60px;float:right;text-align:right;}
.header__widgetsContainer{
    display:block;
    position:absolute;
    right:0px;top:6px;
}

.header__subHeaderBlock{width:100%;height:30px;position:relative;border-top:2px solid #ffffff10;}
.header__subHeaderBlock .subHeaderControlsL{
    position:absolute;
    left:0px;top:8px;
}
.header__subHeaderBlock .subHeaderControlsR{
    position:absolute;
    right:0px;top:8px;
}

.headerControls.noSub {
    min-height: 100px;
    height: 165px;
    padding: 110px 0 0px 0;
    margin: 0 auto 16px auto;
}
.headerControls.noSub .pageSubHeader-z{display:none;}

@media (max-width: 950px) {
    .headerControls, .headerControls.noSub {
        padding-top:70px;
    }
    .headerControlsContainer {

    }
    .header__titleBlockContainer span.title-text{
        font-size: 1.1rem;
    }    
    .header__titleBlockContainer span.subTitle-text{
        top:28px;
    }
    .headerControls__subHeader {
        padding-top:10px;
        height:100%;
        text-align:center;
    }
}


/* working */





.headerBlock {
    min-height: 100px;
    height: 240px;
    padding: 110px 0 0px 0;
    margin: 0 auto 20px auto;
}

.headerBlock.noTitle {
    min-height: 100px;
    height: 120px;
    padding: 0px;
    margin: 0 auto 20px auto;
}

.headerContainer {
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.pageHeader {
    width: 100%;
    display:table;
}

.pageSubHeader {
    width: 100%;
    display:table;
}

.pageHeader__title {
    position: relative;
}

.pageHeader__title span {
    display: inline-block;
    line-height: 2.5rem;
    font-weight: 300;
    font-size: 1.6rem;
    padding-bottom: 12px;
    padding-top: 10px;
    color: var(--pageTitle);
    border-bottom: 4px solid #ffffff30;
    white-space: nowrap;
    width: 100%;
    max-width: 600px;
    overflow: hidden;
    text-overflow: ellipsis;
}




body.dark .pageHeader__title span {color: var(--pageTitle-dark);}
body.light .pageHeader__title span {color: var(--pageTitle-light);font-weight: 400;}



.pageHeader__title span.logoTitle {
    padding-left: 50px;
}

.pageHeader__title span.headerStatus {
    font-size: .9rem;
    position: relative;
    left: 10px;
    top: -4px;
    border: none;
}

.pageHeader__pagetitle {
    display:table;
    float:left;
    height:40px;
}

.pageHeader__pagetitle span.pageTitle{
    display:table-cell;
    vertical-align:middle;
    color: var(--pageTitle);
    font-weight: 900;
    font-size: 1.4rem;
    padding:0 6px;
}

.pageHeader__subcontrols span.pageFilterDesc{
    display:table-cell;
    vertical-align:middle;
    color: var(--pageTitle);
    font-weight: 400;
    font-size: .8rem;
    padding:0 6px;
}

.pageHeader__controls {
    display:table;
    vertical-align:middle;
    text-align:right;
    float:right;
    height:40px;
}
.pageHeader__controls .pageHeaderControl{
    display:table-cell;
    vertical-align:middle;
    padding:0 6px;
}

.pageHeader__pagesubtitle {
    display:table;
    float:left;
    height:40px;
}
.pageHeader__pagesubtitle span.pageSubTitle{
    display:table-cell;
    color: var(--pageTitle);
    font-weight: 400;
    font-size: .8rem;
    padding:0 6px;
}

.pageHeader__subcontrols {
    display:table;
    vertical-align:middle;
    text-align:right;
    float:right;
    height:40px;
}
.pageHeader__subcontrols .pageSubHeaderControl{
    display:table-cell;
    vertical-align:middle;
    padding:0 6px;
}

.pageHeader__subTitle {
    width: 100%;
    max-width: 600px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pageHeader__subTitle span.subContent {
    color: var(--pageSubTitle);
    font-weight: 300;
    font-size: 1.2rem;
    white-space: nowrap;
}

body.dark .pageHeader__subTitle span.subContent {color: var(--pageSubTitle-dark);}
body.light .pageHeader__subTitle span.subContent {color: var(--pageSubTitle-light);font-weight: 400;}

.pageHeader__subTitle span.icon {
    position: relative;
    top: 9px;
    margin-right: 12px;
}

.pageHeader__subTitle span.icon img {
    width: 32px;
}

.pageIcon {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100px;
}

.pageIcon img {
    width: 80px;
}

@media (max-width: 1199px) {
    .headerContainer {
        max-width: none;
        width: 96%;
    }
}

@media (max-width: 960px) {
    .titleImage__title span {
        font-size: 1.9rem;
    }
}

@media (max-width: 780px) {
    .headerBlock {
        height: 10px !important;
        /*padding-top: 70px !important;*/
    }

    .pageHeader__title {
        line-height: 1.8rem;
        font-size: 1.8rem;
        padding-bottom: 6px;
    }

    .pageHeader__subTitle span.icon {
        top: 9px;
        left: 5px;
        margin-right: 12px;
    }

    .pageHeader__subTitle span.icon img {
        width: 28px;
    }

    .pageIcon {
        bottom: -10px;
        right: 0px;
        width: 80px;
    }
}

@media (max-width: 576px) {
    .headerBlock {
        height: 10px !important;
        /*padding-top: 70px !important;*/
    }

    .pageHeader__title {
        line-height: 1.5rem;
        font-size: 1.6rem;
        padding-bottom: 1px;
    }

    .pageHeader__title span {
        line-height: 1.6rem;
        padding-bottom: 10px;
        font-size: 1.3rem;
        width: 270px;
    }

    .pageHeader__subTitle {
        font-size: 1.2rem;
        position: relative;
        top: -6px;
        left: -6px;
    }

    .pageHeader__subTitle span.subContent {
        font-size: .9rem;
    }

    .pageHeader__subTitle span.icon {
        top: 10px;
        left: 5px;
        margin-right: 7px;
    }

    .pageHeader__subTitle span.icon img {
        width: 28px;
    }

    .pageIcon {
        bottom: -3px;
        right: -5px;
        width: 70px;
    }

    .pageIcon img {
        width: 70px;
    }
}




.contentBlock {
    margin: 0;
    position: relative;
    min-height: 100px;
    height: max-content;
    padding: 60px 0 40px 0;
    overflow: hidden;
}

.contentBlock.noPad {
    padding: 0;
}

.contentBlock.noTopPad {
    padding: 0 0 40px 0;
}

.contentBlock.noBottomPad {
    padding: 60px 0 0 0;
}

.contentBlock.morePadding {
    padding: 80px 0;
}

.contentBlock.lessPadding {
    padding: 20px 0;
}

a.anchorLink {
    text-decoration: none;
}

/* Item Flexgrid */

.itemGrid {
    display: flex;
    align-items: stretch;
    flex-flow: row wrap;
    justify-content: space-evenly;
}
.itemGrid.wrap{justify-content:flex-start;}
.itemGrid__cell {
    cursor: pointer;
    flex-basis: 160px;
    align-self: center top;
}

.itemGrid__item {
    cursor: pointer;
    flex-basis: 160px;
    align-self: center;
    width: 160px;
    height: 180px;
}

.itemGrid__item.large {
    flex-basis: 640px;
    width: 320px;
    height: 240px;
}

.itemGrid__item.thirds, .itemGrid.thirds .itemGrid__item {
    order: 2;
    flex-basis: 33%;
    min-width: 320px;
    min-height: 240px;
    flex:1;
}

.itemGrid__item.quarter, .itemGrid.quarter .itemGrid__item {
    order: 2;
    flex-basis: 25%;
    min-width: 110px;
    min-height: 240px;
    height: 320px;
}

.itemGrid__item.fifths, .itemGrid.fifths .itemGrid__item {
    order: 2;
    flex-basis: 20%;
    min-width: 110px;
    min-height: 240px;
    height: 320px;
}

.itemGrid__item.sixths, .itemGrid.sixths .itemGrid__item {
    order: 2;
    flex-basis: 16.5%;
    min-width: 120px;
    min-height: 240px;
    height: 320px;
}

@media (max-width: 676px) {
    .itemGrid__item.thirds {
        width: 100%;
        flex-basis: 100%;
    }

    .itemGrid__item.thirds.first {
        order: 1;
    }

    .itemGrid__item.quarter {
        width: 100%;
        flex-basis: 100%;
    }

    .itemGrid__item.quarter.first {
        order: 1;
    }
}

.itemGrid__item.half {
    order: 2;
    flex-basis: 50%;
    min-width: 320px;
    min-height: 240px;
    height: 320px;
    align-self: flex-start;
    margin-bottom: 20px;
}

@media (max-width: 676px) {
    .itemGrid__item.half {
        width: 100%;
        flex-basis: 100%;
    }

    .itemGrid__item.half.first {
        order: 1;
    }
}

.itemGrid.pad5 .itemGrid__item {
    padding: 0 5px;
}

.itemGrid.pad10 .itemGrid__item {
    padding: 0 10px;
}

.itemGrid.pad20 .itemGrid__item {
    padding: 0 20px;
}

.itemGrid.pad30 .itemGrid__item {
    padding: 0 30px;
}

@media (max-width: 576px) {

    .itemGrid.pad5 .itemGrid__item,
    .itemGrid.pad10 .itemGrid__item,
    .itemGrid.pad20 .itemGrid__item,
    .itemGrid.pad30 .itemGrid__item {
        padding: 0;
    }
}

.itemGrid__item.tall {
    height: 440px;
}

.itemGrid__item.half.taller {
    height: 550px;
}

.itemGrid__item.short {
    height: 190px;
}

.itemGrid__item.max {
    height: max-content;
}
/* stat list */
ul.statList{list-style:none;text-align:center;width:100%;margin:0;padding:0;}
li.statPanel{display:block;border-color:#ffffff50;position:relative;width:190px;height:70px;margin:5px;border-radius:8px;display:inline-block;
    background: -moz-linear-gradient(-45deg,  rgba(0,0,0,0.51) 0%, rgba(20,20,20,0.71) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0.51) 0%,rgba(20,20,20,0.71) 100%);
    background: linear-gradient(135deg,  rgba(0,0,0,0.51) 0%,rgba(20,20,20,0.71) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82000000', endColorstr='#b5141414',GradientType=1 );
}
.statIcon{position:absolute;top:0px;left:0px;height:70px;width:60px;padding-top:16px;text-align:center;}
.statIcon .icon{font-size:2.2rem;opacity:.7;}
.statLine{position:absolute;top:34px;left:50px;height:1px;width:140px;
    background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0.48) 0%, rgba(255,255,255,0.03) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0.48) 0%,rgba(255,255,255,0.03) 100%);
    background: linear-gradient(135deg,  rgba(255,255,255,0.48) 0%,rgba(255,255,255,0.03) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7affffff', endColorstr='#08ffffff',GradientType=1 );
}
.statData{position:absolute;top:0px;left:60px;height:35px;width:110px;text-align:center;font-weight:300;font-size:1.2rem;padding-top:7px;}
.statTitle{position:absolute;top:35px;left:60px;height:35px;width:110px;text-align:center;font-weight:900;font-size:.85rem;padding-top:7px;}

/* chart list */
.chartList{padding:20px;}
.chartList ul{list-style:none;text-align:center;width:100%;margin:0px auto;padding:20px;border-radius:8px;
    background: -moz-linear-gradient(-45deg,  rgba(0,0,0,0.51) 0%, rgba(20,20,20,0.71) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0.51) 0%,rgba(20,20,20,0.71) 100%);
    background: linear-gradient(135deg,  rgba(0,0,0,0.51) 0%,rgba(20,20,20,0.71) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82000000', endColorstr='#b5141414',GradientType=1 );
}
.chartList li{display:inline-block;width:290px;min-height:290px;margin:5px;}
.chartList__title{padding:0 0 20px 0;}
.chartList__chart{position:relative;text-align:center;background-position:center 75px;background-repeat:no-repeat;background-size:75px;}
@media screen and (max-width: 580px) {
	.chartList{padding:0px;margin:5px;}
	.chartList ul{padding:0px;margin:0px;}
	.chartList ul li{padding:0px;margin:0px;}
	.chartList ul li .chartList__chart{width:270px;background-position:99px 68px;}
	}

/* chart table */
.chartTable{display:table;padding:0;margin:0 auto;width:100%;}
.chartTable__row{display:table-row;}
.chartTable__cell{display:table-cell;width:50%;padding:10px;}

table.chartLegend{border-spacing: 5px;border-collapse: separate;}
table.chartLegend.tight{border-spacing: 5px;border-collapse: collapse;}
table.chartLegend td{white-space:nowrap;vertical-align:middle;}
table.chartLegend td span{font-size:.9rem;display:inline-block;}
table.chartLegend td.total{text-align:center;border-top:1px dashed grey;}
table.chartLegend td.label{font-weight:400;text-align:right;}
table.chartLegend td.value{font-weight:900;}
table.chartLegend td.legendLabel{font-weight:400;}
table.chartLegend td.legendColor{font-weight:900;text-align:right;}
table.chartLegend td.legendColor.blue span, .legendBox.blue{background-color:var(--color-blue);}
table.chartLegend td.legendColor.cyan span, .legendBox.cyan{background-color:var(--color-cyan);}
table.chartLegend td.legendColor.green span, .legendBox.green{background-color:var(--color-green);}
table.chartLegend td.legendColor.red span, .legendBox.red{background-color:var(--color-red);}
table.chartLegend td.legendColor.orange span, .legendBox.orange{background-color:var(--color-orange);}
table.chartLegend td.legendColor.yellow span, .legendBox.yellow{background-color:var(--color-yellow);}
table.chartLegend td.legendColor.purple span, .legendBox.purple{background-color:var(--color-purple);}
table.chartLegend td.legendColor.magenta span, .legendBox.magenta{background-color:var(--color-magenta);}
table.chartLegend td.legendColor.gold span, .legendBox.gold{background-color:var(--color-gold);}
table.chartLegend td.legendColor.violet span, .legendBox.violet{background-color:var(--color-violet);}
table.chartLegend td.legendColor.lime span, .legendBox.lime{background-color:var(--color-lime);}
table.chartLegend td.legendColor.olive span, .legendBox.olive{background-color:var(--color-olive);}
table.chartLegend td.legendColor span{display:inline-block;min-width:24px;width:max-content;text-align:center;padding:2px;border-radius:6px;color:white;margin:2px;margin-right:10px;-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;}
.legendBox{display:inline-block;position:relative;top:0px;width:16px;height:10px;margin-right:3px;-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;}
.printPage table.chartLegend td.label, .printPage table.chartLegend td.value {color:black;}

table.chartData{width:100%;border-spacing: 5px;border-collapse: separate;}
table.chartData.tight{border-spacing: 5px;border-collapse: collapse;}
table.chartData.col4 td:nth-child(odd){width:35%;}
table.chartData.col4 td:nth-child(even){width:15%;}
table.chartData td{white-space:nowrap;vertical-align:middle;}
table.chartData td:nth-child(odd){text-align:right;}
table.chartData td:nth-child(even){text-align:left;}
table.chartData td span{font-size:.9rem;display:inline-block;}
table.chartData td span.total{text-align:center;border-top:1px dashed grey;}
table.chartData td span.label{font-weight:400;text-align:right;padding-right:15px;}
table.chartData td span.value{font-weight:900;}

/* chart details */
.chartDetails{width:100%;display:table;background-color:#dddddd10;}
.chartDetails__item{display:table-row;}
.chartDetails__row{display:table-row;}
.chartDetails__row.full{display:block;text-align:center;border:1px solid red;margin:0 auto;}
.chartDetails__row span{display:block;width:100%;font-size:.8rem;padding:4px;}
.chartDetails__item span{display:table-cell;width:50%;font-size:.8rem;padding:4px;}
.chartDetails__item span.label{font-weight:400;text-align:right;padding-right:12px;}
.chartDetails__item span.value{font-weight:900;}
.chartDetails.print{border-collapse:collapse;}
.chartDetails.print .chartDetails__item span{white-space:nowrap;}

.chartGrid{display:flex;justify-content:space-evenly;text-align:center;padding:0 20px;}
.chartGrid__item{flex:1;}
.chartGrid__item.infoBox{flex:1;}
.chartPanelContainer{padding:12px;}
body.dark .chartPanel{position:relative;border-radius:6px;border:1px solid #00000040;margin:0 auto;
background: -moz-linear-gradient(-45deg,  rgba(0,0,0,0.51) 0%, rgba(20,20,20,0.71) 100%);
background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0.51) 0%,rgba(20,20,20,0.71) 100%);
background: linear-gradient(135deg,  rgba(0,0,0,0.51) 0%,rgba(20,20,20,0.71) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82000000', endColorstr='#b5141414',GradientType=1 );
}
body.light .chartPanel{display:table;overflow:hidden;width:100%;max-width:400px;height:300px;border-radius:6px;border:1px solid #00000040;margin:0 auto;
background: -moz-linear-gradient(-45deg,  rgba(247,247,247,0.69) 0%, rgba(255,255,255,0.71) 100%);
background: -webkit-linear-gradient(-45deg,  rgba(247,247,247,0.69) 0%,rgba(255,255,255,0.71) 100%);
background: linear-gradient(135deg,  rgba(247,247,247,0.69) 0%,rgba(255,255,255,0.71) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0f7f7f7', endColorstr='#b5ffffff',GradientType=1 );
}

.chartHeader{height:40px;font-size:1rem;padding:12px;}
.chartBody{height:100%;font-weight:300;}
.chartFooter{height:40px;}

.chartPanel .chartContent{display:table;vertical-align:middle;text-align:center;background-position:center 100px;background-repeat:no-repeat;background-size:75px;}


/* pricing grid */
.pricingGrid{display:flex;justify-content:space-evenly;text-align:center;padding:0 20px;}
.pricingGrid__item{flex:1;}
.pricingGrid__item.infoBox{flex:1;}
.pricingPanelContainer{padding:12px;}
.pricingPanel{display:table;overflow:hidden;width:100%;max-width:280px;height:300px;border-radius:12px;margin:0 auto;box-shadow: 2px 10px 27px 0px rgba(0,0,0,0.67);-webkit-box-shadow: 2px 10px 27px 0px rgba(0,0,0,0.67);-moz-box-shadow: 2px 10px 27px 0px rgba(0,0,0,0.67);}
.pricingHeader{display:table-row;height:30%;font-size:1.2rem;background-color:var(--pricingheader);}
.pricingBody{display:table-row;height:40%;font-weight:300;background-color:var(--pricingbody);}
.pricingFooter{display:table-row;height:30%;background-color:var(--pricingfooter);}
.pricingGrid__item.infoBox .pricingPanel{box-shadow:none;border-radius:0;border:1px solid var(--zenpanel-lines);}
.pricingGrid__item.infoBox .pricingPanel:after{
    display:block;
    width: 0;
    height: 0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid green;
}
.pricingGrid__item.infoBox .pricingHeader{}
.pricingGrid__item.infoBox .pricingBody{background-color:transparent;}
.pricingGrid__item.infoBox .pricingFooter{background-color:transparent;}

.pricingPanel .pricingContent{display:table-cell;vertical-align:middle;}
.pricingGrid span.bigValue{display:block;font-size:2rem;}
button.pricing{font-size:1.5rem;border-radius:8px;}
button.pricing:hover{}
@media (max-width: 800px) {
    .pricingPanel{max-width:220px;}
}
@media (max-width: 676px) {
    .pricingGrid{flex-direction:column;}
    .pricingPanel{max-width:100%;}
}

/* zen base grid */
.zenGrid{display:flex;justify-content:space-evenly;text-align:center;padding:0 20px;}
.zenGrid__item{flex:1;}
@media (max-width: 676px) {
    .zenGrid{flex-direction:column;}
}

.pricingPanel .pricingContent{display:table-cell;vertical-align:middle;}
.pricingGrid span.bigValue{display:block;font-size:2rem;}
button.pricing{font-size:1.5rem;border-radius:8px;}
button.pricing:hover{}
@media (max-width: 800px) {
    .pricingPanel{max-width:220px;}
}
@media (max-width: 676px) {
    .pricingGrid{flex-direction:column;}
    .pricingPanel{max-width:100%;}
}
/* waiting spinner */

.waitPanelOverlay {
    display: flex;
    justify-content: center; 
    align-items: center; 
    position: absolute; 
    top: 0;
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.6); 
    border-radius: 6px; 
    z-index: 9999;
}

.waitPanelCenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.waitModalOverlay {
    display: table;
    width: 88%;
    height: 100%;
    position: absolute;
    background-color: #00000099;
    border-radius: 6px;
    z-index: 9999;
}

.waitModalCenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.waitSpinner {
    margin: 0 auto;
    width: 200px;
    height: 200px;
    display: table;
}

.waitPanelOverlay .waitSpinner {}

.spinnerContainer {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    position: relative;
}

.spinnerContainer span.spinner {
    display: block;
    width: 130px;
    height: 130px;
    margin: 0 auto;
    background-image: url('/images/elements/spinner.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 35px;
    left: 35px;
}

.spinnerContainer span.spinner.orange {
    background-image: url('/images/elements/spinner_orange.png');
}

.spinnerContainer span.spinner.blue {
    background-image: url('/images/elements/spinner_blue.png');
}

.spinnerContainer span.spinner.green {
    background-image: url('/images/elements/spinner_green.png');
}

.spinnerContainer span.spinner.purple {
    background-image: url('/images/elements/spinner_purple.png');
}

.spinnerContainer .centerText {
    font-weight: 900;
}

.spinnerContainer span.topText {
    display: block;
    width: 100%;
    font-size: 1.1rem;
    text-align: center;
    position: absolute;
    top: 10px;
}

.spinnerContainer span.bottomText {
    display: block;
    font-weight: 300;
    width: 100%;
    font-size: .8rem;
    text-align: center;
    position: absolute;
    bottom: 10px;
}

.waitSpinner.light .spinnerContainer span.topText,
.waitSpinner.light .spinnerContainer span.bottomText,
.waitSpinner.light .spinnerContainer span.centerText {
    color: black;
}

.waitSpinner.dark .spinnerContainer span.topText,
.waitSpinner.dark .spinnerContainer span.bottomText,
.waitSpinner.dark .spinnerContainer span.centerText {
    color: white;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*  CTA buttons */

.faq ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.faq li {
    margin: 10px 0 50px 0;
}

.faq li .question {
    position: relative;
    font-family: 'Lato', sans-serif;
    font-size: 24px;
    color: #0d91c5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    padding: 0 0 10px 60px;
    margin: 0 0 10px 0;
}

.faq li .question:before {
    content: 'Q';
    font-family: 'lato', sans-serif;
    font-weight: 900;
    font-size: 46px;
    color: #08b5f9;
    position: absolute;
    top: -12px;
    left: 0px;
}

.faq li .answer {
    position: relative;
    padding: 0 0 10px 60px;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #967e51;
}

.faq li .answer:before {
    content: 'A';
    font-family: 'lato', sans-serif;
    font-weight: 900;
    font-size: 46px;
    color: #ffd180;
    position: absolute;
    top: -12px;
    left: 4px;
}

.stick2bottom {
    position: absolute;
    bottom: 10px;
}

.stick2top {
    position: absolute;
    top: 10px;
}

.bg__image-fixed {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center -50px;
    background-attachment: fixed;
}

.bg__image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.seeTouch span {
    color: var(--menuText) !important;
    font-weight: 500;}

.seeTouch span div {
    color: #c8ff00 !important;
    font-weight: 500;
}

#navBarMobile #slideMenu li a:hover,
#navBarMobile #slideMenu li a:focus,
#navBarMobile #slideMenu li a:active,
#navBarMobile #avatarSlideMenuMobile li a:hover,
#navBarMobile #avatarSlideMenuMobile li a:focus,
#navBarMobile #avatarSlideMenuMobile li a:active,
#avatarSlideMenu li a:hover,
#avatarSlideMenu li a:focus,
#avatarSlideMenu li a:active {
    text-align: center;
    display: block;
    width: max-content;
    padding: 2px 6px;
    text-decoration: none;
    border-bottom: 3px solid var(--menuLinks-dark);
}


.seeTouch:hover span,
.seeTouch:active span,
.seeTouch:focus span  {
    color: white !important;

}

.seeTouch:hover span div,
.seeTouch:active span div,
.seeTouch:focus span div {
    color: white !important;

}

.seeTouch:hover span.home,
.seeTouch:active span.home,
.seeTouch:focus span.home,
.seeTouch.touched span.home {
    color: #b2d31e !important;
}

.seeTouch:hover span.diary,
.seeTouch:active span.diary,
.seeTouch:focus span.diary,
.seeTouch.touched span.diary {
    color: #11b111 !important;
}

.seeTouch:hover span.scheduling,
.seeTouch:active span.scheduling,
.seeTouch:focus span.scheduling,
.seeTouch.touched span.scheduling {
    color: red !important;
}

.seeTouch:hover span.info,
.seeTouch:active span.info,
.seeTouch:focus span.info,
.seeTouch.touched span.info {
    color: #17ade8 !important;
}

.seeTouch:hover span.team,
.seeTouch:active span.team,
.seeTouch:focus span.team,
.seeTouch.touched span.team {
    color: #9e18c3 !important;
}

.seeTouch:hover span.faq,
.seeTouch:active span.faq,
.seeTouch:focus span.faq,
.seeTouch.touched span.faq {
    color: orange !important;
}

/* ------------- Remove mobile highlights ------------- */

.mobile_highlights {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.no_highlights {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

button,
.homeButtons {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

button:hover {
    animation: pulse;
    animation-duration: .2s;
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    /* make things invisible upon start */
    -webkit-animation: fadeIn ease-in 1;
    /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards;
    /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}

/* special transform classes */

.scale25 {
    zoom: 0.25;
    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -webkit-transform: scale(0.25);
}

.scale60 {
    zoom: 0.60;
    -ms-transform: scale(0.60);
    -moz-transform: scale(0.60);
    -webkit-transform: scale(0.60);
}

.scale50 {
    zoom: 0.50;
    -ms-transform: scale(0.50);
    -moz-transform: scale(0.50);
    -webkit-transform: scale(0.50);
}

.scale70 {
    zoom: 0.70;
    -ms-transform: scale(0.70);
    -moz-transform: scale(0.70);
    -webkit-transform: scale(0.70);
}

.scale80 {
    zoom: 0.80;
    -ms-transform: scale(0.80);
    -moz-transform: scale(0.80);
    -webkit-transform: scale(0.80);
}

.scale90 {
    zoom: 0.90;
    -ms-transform: scale(0.90);
    -moz-transform: scale(0.90);
    -webkit-transform: scale(0.90);
}

.rotate90 {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}

/* Update navbar to appear sooner */

@media screen and (max-width: 950px) {
    #navBar {
        display: none;
    }

    #navBarMobile {
        display: block;
    }
}

/* Zengarden Additions */

.devDemo {
    width: 100%;
    text-align: center;
    padding: 60px;
    border: 1px solid yellow;
    border-radius: 12px;
    color: red;
    font-size: 2rem;
}

a.siteLink {
    color: var(--link);
    weight: 900;
    text-decoration: none;
    border-bottom: 1px dashed;
    border-bottom-color: var(--linkh);
}

a.siteLink:hover {
    color: var(--linkh);
    border-bottom: 1px solid;
    border-bottom-color: var(--linkh);
}

1 .headerBlock.fixed-tr {
    background-position: right top;
}

.pageContent.bgimage-bgheader {
    background-attachment: fixed;
    background-position: center top;
}

.pageContent.bgimage-bglb {
    height: 100vh;
    background-position: left bottom;
}

.pageContent.bgimage-bgrb {
    height: 100vh;
    background-position: right bottom;
}

.pageContent.bgimage-bglb-f {
    background-attachment: fixed;
    background-position: left bottom;
}

.pageContent.bgimage-bgrb-f {
    background-attachment: fixed;
    background-position: right bottom;
}

@media (max-width: 992px) {
    .headerBlock {
        height: 10px !important;
        /*padding: 146px 0 35px 0;*/
    }

    .headerImage__panel-small {
        height: 100px;
    }

    .headerImage__panelimage-small {
        height: 100%;
        max-height: 80px;
        margin: 5px 0 0 26px;
    }

    .pageImageHeader__title {
        font-size: 2.1rem;
        line-height: 2.4rem;
    }

    .pageImageHeader__subTitle {
        font-size: 1.1rem;
    }
}

@media (max-width: 767px) {
    .headerImage__panel-small {
        display: none;
    }

    .headerImage__panelimage-small {
        display: none;
    }

    .pageContent.bgimage-bglb,
    .pageContent.bgimage-bgrb {
        background-position: center bottom;
    }
}

.pageContent {
    padding-bottom: 100px !important;
}

@media (max-width: 576px) {
    .headerBlock {
        height: 10px !important;
        /*padding: 80px 0 35px 0;*/
    }
}

.itemGrid__nav {
    cursor: pointer;
    flex-basis: 120px;
    align-self: center top;
}

.itemGrid__nav.ghost {
    opacity:.3;
}

.itemGrid__nav a {
    display: block;
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0 auto 20px auto;
    background-color: var(--navbuttonbg);
    transition: all 0.2s ease-in-out;
}

.itemGrid__nav a span.navImg {
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 14px;
    transition: all 0.2s ease-in-out;
}

.itemGrid__nav a span.navImg img {
    width: 42px;
    transition: all 0.2s ease-in-out;
}

.itemGrid__nav a span.mainText {
    display: block;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--navbuttonText);
    text-shadow: 0px 1px 0px black;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: -2px;
}

.itemGrid__nav a span.subText {
    display: block;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: .8rem;
    color: var(--navbuttonText2);
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 17px;
}

.itemGrid__nav a:hover {
    background-color: var(--navbuttonbg-h);
    box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.87);
    animation: pulse;
    animation-duration: .5s;
}

.itemGrid__nav a:hover span.navImg {
    top: -8px;
}

.itemGrid__nav a:hover span.navImg img {
    width: 60px;
    filter: drop-shadow(0px 6px 1px rgba(0, 0, 0, 0.27));
}

.itemGrid__nav a.navbuttonbg {
    background-color: green;
}
.itemGrid__nav a.navbuttonbg:hover {
    background-color: red;
}

@media (max-width: 768px) {
    .itemGrid__nav {
        flex-basis: 100px;
    }

    .itemGrid__nav a {
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 580px) {}

.favButtons ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.favButtons li {
    padding: 10px 0;
}

.favButtons li a {
    display: table;
    border-radius: 30px;
    padding: 8px;
    width: 100%;
    max-width: 450px;
    background-color: rgba(0, 0, 0, 0.57);
    cursor: pointer;
    margin: 0 auto;
}

.favButtons li a:hover {
    animation: pulse;
    animation-duration: .5s;
    background-color: rgba(0, 0, 0, 0.77);
    box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.87);
}

.favButtons li a .favIcon {
    display: table-cell;
    width: 40px;
    vertical-align: middle;
    text-align: center;
}

.favButtons li a .favIcon img {
    width: 100%;
}

.favButtons li a .favTitle {
    display: table-cell;
    padding-left: 8px;
    font-size: 1.2rem;
    color: white;
    font-weight: bold;
}

.favButtons li a .favSubtitle {
    font-size: .9rem;
    color: white;
    font-weight: normal;
}

.favButtons li a .favMetric {
    display: table-cell;
    width: 40px;
    vertical-align: middle;
    text-align: center;
}

.favButtons li a .favMetric img {
    width: 100%;
}

/* action panels */

.settingsButtonArray {
    width: 100%;
    padding: .1rem;
    text-align: center;
}

.settingsButtonArray .buttonSet {
    padding: 1.3rem .2rem;
    border: 1px solid #323232;
    border-radius: 12px;
    margin-bottom: .8rem;
}

.settingsButtonArray .buttonSet span {
    display: block;
    font-size: .9rem;
    font-weight: 300;
    line-height: .8rem;
    margin-bottom: .8rem;
}

.settingsButtonArray.inline .buttonSet {
    display: inline-block;
    padding: 1rem;
    margin: .6rem .2rem
}

.zen-actionPanel {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: max-content;
    border-radius: 12px;
    padding: 30px;
    background-color: var(--stdpanel);
    border: 1px solid transparent;
    transition: all 0.3s ease-in-out 0s;
}

.zen-actionPanel.loose {
    width: 95%;
    margin: 0 auto;
}

.zen-actionPanel.tight {
    width: 100%;
    padding: 0px 30px;
}

.zen-actionPanel.noPad {
    padding: 0px;
}

.zen-actionPanel.extraPad {
    padding: 0px 80px;
}

.zen-actionPanel.transparent {
    background-color: transparent;
    border: none;
    cursor: default;
}

.zen-actionPanel.translucent {
    background-color: var(--stdpaneltr);
    border: none;
    cursor: default;
}

.zen-actionPanel.highlight:hover {
    background-color: var(--stdpanelh);
    border: 1px solid black;
}

.zen-actionPanel:hover.transparent {
    background-color: transparent;
    border: none;
}

.zen-actionPanel .panelTitle {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: max-content;
    text-align: center;
    font-weight: 400;
    font-size: 1.3rem;
    padding: 0 12px 8px 12px;
    margin: -20px auto 0 auto;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

.zen-actionPanel .panelTitle.clean {
    border: none;
    text-align: left;
    margin: initial;
}

.zen-actionPanel .panelTitle.full {
    width: 100%;
}

.zen-actionPanel .panelTitle .icon {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    top: 4px;
    padding-right: 5px;
    color: rgba(255, 255, 255, 0.5);
}

.zen-actionPanel .panelElement {
    margin-top: 12px;
    width: 100%;
    text-align: center;
}

.zen-actionPanel table {
    width: 100%;
    border-collapse: collapse;
    padding: 0;
}

.zen-actionPanel table.tight {
    border-spacing: .8rem;
}

.zen-actionPanel table tr.hoverLink {
    cursor: pointer;
}

.zen-actionPanel table tr.active td {
    background-color: var(--activeRow);
}

.zen-actionPanel table tr.active:hover td {
    background-color: var(--activeRow);
}

.zen-actionPanel tr.tableRowSpacer {
    height: 6px;
    visibility: hidden;
}

.zen-actionPanel tr.hoverAction td,
.zen-actionPanel tr.noAction td {
    padding: 12px;
}

.zen-actionPanel tr.hoverAction td {
    cursor: pointer;
}

.zen-actionPanel tr.hoverAction td:first-child,
.zen-actionPanel tr.noAction td:first-child {
    background-color: #1583c230;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px;
    padding: 10px !important;
}

.zen-actionPanel tr.hoverAction td:last-child,
.zen-actionPanel tr.noAction td:last-child {
    background-color: #1583c230;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    padding-right: 10px !important;
}

.zen-actionPanel tr.noAction td {
    background-color: transparent !important;
}

.zen-actionPanel tr.hoverAction:hover,
.zen-actionPanel tr.hoverAction:active,
.zen-actionPanel tr.hoverAction:focus {
    background-color: #1583c280
}

.zen-actionPanel .injuryData {
    display: block;
    text-align: left;
    padding-left: 12px !important;
}

.zen-actionPanel .injuryData.date {
    font-size: 1rem;
    color: var(--color-ltgrey);
}

.zen-actionPanel .injuryData.severity.critical {
    color: var(--color-red);
}

.zen-actionPanel .injuryData.severity.moderate {
    color: var(--color-orange);
}

.zen-actionPanel .injuryData.severity.mild {
    color: var(--color-yellow);
}

.zen-actionPanel .injuryData.location {
    color: var(--color-ltgrey);
    line-height: .9rem;
    font-size: .8rem;
}

.zen-actionPanel .injuryData.type {
    color: var(--color-ltgrey);
    line-height: .9rem;
    font-size: .8rem;
}

.zen-actionPanel .injuryData.description {
    color: var(--color-ltgrey);
    line-height: 1rem;
}

.zen-actionPanel .injuryData.phonenumber a {
    color: var(--textphone);
    line-height: 1rem;
    text-decoration: none;
}

.zen-actionPanel .injuryData.email a {
    color: var(--textemail);
    line-height: 1rem;
    font-weight: 900;
    text-decoration: none;
    overflow-wrap:break-word;
}

.zen-actionPanel .injuryData.adjuster {
    color: var(--color-ltgrey);
    line-height: 1rem;
    font-size: 1rem;
    font-weight: 900;
}

.zen-actionPanel .injuryData.claimnumber {
    color: var(--color-ltgrey);
}

.zen-actionPanel .injuryData.truncate {
    padding: 0;
    display: -webkit-box;
    max-height: 2rem;
    width: 158px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}
.zen-actionPanel .injuryData.truncate.email {
    -webkit-line-clamp: 1;
    color: var(--textemail);
}

.zen-actionPanel td.icon {
    width: 50px;
    max-width: 50px;
}

.zen-actionPanel td.icon .icon {
    font-size: 2rem;
    animation: heartBeat;
    animation-duration: 1s;
}

.zen-actionPanel td.longlabel {
    font-size: 1rem;
    font-weight: 300;
    text-align: left;
    width: max-content;
}

.zen-actionPanel span.datetime {
    font-weight: 300;
    display: block;
    font-size: 1rem;
    color: var(--textdim);
}

.zen-actionPanel span.datetime {
    font-weight: 300;
    display: block;
    font-size: 1rem;
    color: var(--textdim);
}

.zen-actionPanel span.fullname {
    display: block;
    font-size: 1.3rem;
}

.zen-actionPanel span.employeeEmail a {
    display: block;
    font-size: 1rem;
    color: var(--textemail);
    text-decoration: none;
}

.zen-actionPanel span.employeePhone a {
    display: block;
    font-size: 1rem;
    color: var(--textphone);
    text-decoration: none;
}

.zen-actionPanel span.firstname {
    display: block;
    font-size: 1.5rem;
}

.zen-actionPanel span.lastname {
    display: block;
    font-size: 1.5rem;
}

.zen-actionPanel span.moodnumber {
    padding-left: 8px;
    font-weight: bold;
    position: relative;
    top: 1px;
}

.zen-actionPanel .placeholderImage {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    min-width: 190px;
    min-height: 190px;
}

.zen-actionPanel .placeholderImage.actionChart {
    min-width: 125px;
    min-height: 125px;
}

.zen-actionPanel table.displayData.fixedHeight__200 {
    max-height: 150px;
    overflow: hidden !important;
    border-spacing: 2rem;
}

.zen-actionPanel table.displayData.tight td {
    border-spacing: .2rem;
    padding: 2px !important;
}

.zen-actionPanel table.displayData.center td {
    text-align: center !important;
    padding: 3px 0 !important;
}

.zen-actionPanel table.displayData td {
    padding: 7px 0 !important;
    font-size: 1rem;
    line-height: 1rem;
    width: 50%;
    font-weight: 400;
    vertical-align: middle;
}

.zen-actionPanel table.displayData td:first-child {
    text-align: right;
    color: var(--text);
    width:35%;
}

.zen-actionPanel table.displayData td:nth-child(2) {
    text-align: left;
    width:65%;
}

hr.subtle {
    border: 0;
    border-bottom: 4px solid rgba(255, 255, 255, 0.19);
    border-top: 1px solid black;
}

@media (max-width: 768px) {
    .zen-actionPanel {
        padding: 28px 8px 8px 8px;
        border-radius: 0;
        border: none;
    }

    .zen-actionPanel.tight {
        width: 100%;
        padding: 0px 10px;
    }

    .zen-actionPanel:hover {
        border: none;
    }
}

@media (max-width: 580px) {
    .zen-actionPanel {
        padding: 28px 8px 8px 8px;
        border-radius: 3;
    }

    .zen-actionPanel:hover {
        border: none;
    }

    .zen-actionPanel.tight {
        width: 100%;
        padding: 0px 6px;
    }

    .zen-actionPanel .panelTitle {
        font-size: 1.7rem !important;
    }

    .settingsButtonArray.inline .buttonSet {
        display: block;
    }
}

/* zBadge */

.zBadge {
    z-index: 99;
    width: 60px;
    height: 60px;
    position: absolute;
}

.zBadge.tr-index1 {
    top: -25px;
    right: -25px;
}

.zBadge.tr-index2 {
    top: -25px;
    right: 5px;
}

.zBadge.tr-index3 {
    top: -25px;
    right: 35px;
}

.zBadge.tr-index4 {
    top: -25px;
    right: 65px;
}

.zBadge.tl-index1 {
    top: -25px;
    left: -25px;
}

.zBadge.tl-index2 {
    top: -25px;
    left: 5px;
}

.zBadge.tl-index3 {
    top: -25px;
    left: 35px;
}

.zBadge.tl-index4 {
    top: -25px;
    left: 65px;
}

.zBadge.br-index1 {
    bottom: -25px;
    right: -25px;
}

.zBadge.br-index2 {
    bottom: -25px;
    right: 5px;
}

.zBadge.br-index3 {
    bottom: -25px;
    right: 35px;
}

.zBadge.br-index4 {
    bottom: -25px;
    right: 65px;
}

.zBadge.bl-index1 {
    bottom: -25px;
    left: -25px;
}

.zBadge.bl-index2 {
    bottom: -25px;
    left: 5px;
}

.zBadge.bl-index3 {
    bottom: -25px;
    left: 35px;
}

.zBadge.bl-index4 {
    bottom: -25px;
    left: 65px;
}

.zBadge.r-index2 {
    top: 30px;
    right: -20px;
}

.zBadge.r-index3 {
    top: 80px;
    right: -20px;
}

.zBadge.r-index4 {
    top: 130px;
    right: -20px;
}

.zBadge.l-index2 {
    top: 30px;
    left: -20px;
}

.zBadge.l-index3 {
    top: 80px;
    left: -20px;
}

.zBadge.l-index4 {
    top: 130px;
    left: -20px;
}

.zBadge a {
    width: 60px;
    height: 60px;
    display: table;
    border: 0;
    animation-duration: 1s;
    cursor: pointer;
}

.zBadge a span.icon {
    position: relative;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.zBadge a span.icon:before {
    font-family: 'zenjuriesfont';
    content: '\e015';
    text-shadow: 0px 1px 4px black;
    font-size: 1.6rem;
}

.zBadge a:hover {
    animation: jello;
    animation-duration: 1s;
}

.zBadge a:hover span.icon:before {
    font-size: 2.2rem;
    text-shadow: 0px 1px 16px black;
}

.zBadge a:active span.icon:before {
    font-size: 2.0rem;
}

.zBadge a span.badgeLabel {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    left: 0px;
    top: 35%;
    width: 100%;
    color: white;
    text-align: center;
    font-size: 1em;
    font-weight: 900;
    font-family: 'Bebas Neue';
}

.zBadge a span.badgeIcon {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: absolute;
    left: 0px;
    top: 35%;
    width: 100%;
    color: white;
    text-align: center;
    font-size: 1em;
    font-family: 'zenjuriesfont';
    content: attr(data-zBadgeIcon);
}

.zBadge.bookmark a span.badgeLabel {
    top: 30%;
}

.zBadge a:hover span.badgeLabel {
    text-shadow: 0px 0px 8px black;
}

.zBadge .badgeInfo {
    z-index: 98;
    position: absolute;
    left: -50%;
    width: 260px;
    padding: 20px;
    border-radius: 10px;
    background-color: rgba(30, 30, 30, 0.91);
    box-shadow: 0px 0px 19px black;
    font-size: 1rem;
    font-weight: 900;
    overflow: hidden;
    opacity: 0;
    max-height: 0px;
    transition: all ease-in-out .3s;
    color: #b1b1b1;
}

.zBadge.checkmark a span.icon:before {
    content: '\e018';
    color: #49d10e;
}

.zBadge.checkmark a:hover span.icon:before {
    content: '\e018';
    color: #50fb07;
}

.zBadge.heart a span.icon:before {
    content: '\e045';
    color: #49d10e;
}

.zBadge.heart a:hover span.icon:before {
    content: '\e045';
    color: #50fb07;
}

.zBadge.heart span.badgeLabel {
    top: 30%;
}

.zBadge.clipboard a span.icon:before {
    content: '\e148';
    color: #3577e0;
}

.zBadge.clipboard a:hover span.icon:before {
    content: '\e148';
    color: #3577e0;
}

.zBadge.important a span.icon:before {
    content: '\e01a';
    color: #ff3300;
}

.zBadge.important a:hover span.icon:before {
    content: '\e01a';
    color: #ff5522;
}

.zBadge.attention a span.icon:before {
    content: '\e01a';
    color: #c2b100;
}

.zBadge.attention a:hover span.icon:before {
    content: '\e01a';
    color: #c8c311;
}

.zBadge.item a span.icon:before {
    content: '\e01a';
    color: #bd0000;
}

.zBadge.item a:hover span.icon:before {
    content: '\e01a';
    color: #f30b0b;
}

.zBadge.info a span.icon:before {
    content: '\e01a';
    color: #2a5eb2;
}

.zBadge.info a:hover span.icon:before {
    content: '\e01a';
    color: #3577e0;
}

.zBadge.alert a span.icon:before {
    content: '\e006';
    color: #c8b100;
}

.zBadge.alert a:hover span.icon:before {
    content: '\e006';
    color: #ecd100;
}

.zBadge.message a span.icon:before {
    content: '\e023';
    color: #db7c0e;
}

.zBadge.message a:hover span.icon:before {
    content: '\e023';
    color: #f7890b;
}

.zBadge.new a span.icon:before {
    content: '\e163';
    color: #e6169a;
}

.zBadge.new a:hover span.icon:before {
    content: '\e163';
    color: #fd0fa6;
}

.zBadge.note a span.icon:before {
    content: '\e083';
    color: #c4b876;
}

.zBadge.note a:hover span.icon:before {
    content: '\e083';
    color: #eddf8f;
}

.zBadge.cloud a span.icon:before {
    content: '\e01d';
    color: #8fabb8;
}

.zBadge.cloud a:hover span.icon:before {
    content: '\e01d';
    color: #a4cee1;
}

.zBadge.bookmark a span.icon:before {
    content: '\e00b';
    color: #0c832f;
}

.zBadge.bookmark a:hover span.icon:before {
    content: '\e00b';
    color: #34b25a;
}

.zBadge .badgeInfo .iconHeader {
    position: absolute;
    top: 12px;
    left: 0px;
    width: 100%;
    height;
    50px;
    text-align: center;
}

.zBadge .badgeInfo .iconHeader .iconContainer {
    width: 50px;
    height: 50px;
    margin: 0 auto;
}

.zBadge .badgeInfo .iconHeader .iconContainer .bgCircle {
    display: table-cell;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: black;
    text-align: center;
    vertical-align: middle;
}

.zBadge a:hover~.badgeInfo {
    padding: 20px;
    opacity: 1;
    max-height: 300px;
}

.zAlertArea {
    position: fixed;
    z-index: 99999;
    top: 9px;
    right: -10px;
    width: 500px;
}

.zAlertDialogue {
    display: table;
    position: relative;
    width: 100%;
    height: 55px;
    background-color: #3e3e3e;
    box-shadow: 0px 1px 11px rgba(0, 0, 0, 1);
    border-radius: 8px;
    margin-bottom: 4px;
    overflow: hidden;
}

.zAlertDialogue.open {
    animation: bounceInRight;
    animation-duration: 1s;
}

.zAlertDialogue.close {
    animation: bounceOutRight;
    animation-duration: 1s;
}

.zAlertDialogue.exit {
    animation: bounceOut;
    animation-duration: 1s;
}

.zAlertDialogue .message {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    height: 55px;
    font-weight: 400;
    width: 100%;
    padding: 0 18px 0 70px;
    color: white;
    font-size: 1rem;
    line-height: 1.1rem;
}

.zAlertDialogue .zButton.save {
    position: absolute;
    left: 3px;
    top: 7px;
}

.zAlertDialogue .zAlertIcon {
    position: absolute;
    left: 12px;
    top: 7px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0px !important;
    line-height: normal;
    background-color: grey;
}

.zAlertDialogue .zAlertIcon .icon:after {
    font-family: 'zenjuriesfont';
    font-size: 28px;
    position: relative;
    top: 3px;
    left: 3px;
}

.zAlertDialogue .zAlertIcon.comment {
    background-color: #673f0c;
}

.zAlertDialogue .zAlertIcon.comment .icon:after {
    content: '\e025';
    color: #ffa50b;
    left: 7px;
    top: 5px;
}

.zAlertDialogue .zAlertIcon.confirm {
    background-color: #0b650d;
}

.zAlertDialogue .zAlertIcon.confirm .icon:after {
    content: '\e018';
    color: #24e81d;
    left: 5px;
    top: 5px;
}

.zAlertDialogue .zAlertIcon.deny {
    background-color: #670c0c;
}

.zAlertDialogue .zAlertIcon.deny .icon:after {
    content: '\e098';
    color: #e81c1c;
    left: 6px;
    top: 4px;
}

.zAlertDialogue .zAlertIcon.info {
    background-color: #3570ef;
}

.zAlertDialogue .zAlertIcon.info .icon:after {
    content: '\e049';
    font-size: 36px;
    color: white;
    left: 2px;
    top: 1px;
}

.zAlertDialogue .zAlertIcon.warning {
    background-color: black;
}

.zAlertDialogue .zAlertIcon.warning .icon:after {
    content: '\e036';
    color: red;
    left: 6px;
}

.zAlertDialogue .zAlertIcon.alert {
    background-color: yellow;
}

.zAlertDialogue .zAlertIcon.alert .icon:after {
    content: '\e035';
    font-size: 40px;
    color: black;
    left: -1px;
    top: -3px;
}

.zAlertDialogue .dismiss {
    position: absolute;
    right: 21px;
    top: 14px;
    width: 24px;
    height: 24px;
    background-color: red;
    border-radius: 50%;
    box-shadow: 0px 0px 11px black;
    padding: 3px 0 0 3px;
    cursor: pointer;
}

.zAlertDialogue .dismiss .icon {
    color: white;
    font-size: 1.1rem;
}

.zAlertDialogue .dismiss:hover {
    animation: jello;
    animation-duration: 1s;
}

@media (max-width: 568px) {
    .zAlertArea {
        width: 300px;
    }

    .zAlertDialogue .dismiss {
        padding: 5px 0 0 5px;
    }
}

ul.iconSelector {
    list-style: none;
    text-align: center;
    padding: 0;
    margin: 0;
}

ul.iconSelector li {
    display: inline-block;
    width: 50px;
    height: 50px;
}

ul.iconSelector li a {
    display: block;
    height: 50px;
    width: 50px;
    background-position: center center;
    background-size: 40px 40px;
    border-radius: 50%;
    background-color: black;
    cursor: pointer;
    transition: all .2s ease-in-out;
    border: none;
}

ul.iconSelector li a:hover {
    background-size: 60px 60px;
    padding: 0px;
    background-color: #343434;
    box-shadow: 0px 0px 3px 2px black;
}

ul.iconSelector li a:active,
ul.iconSelector li a:focus {
    box-shadow: 0px 0px 1px 1px red;
}

ul.iconSelector li a.selected {
    background-color: #000000;
    border: 2px dashed #09e009;
}

/* ------------- zTable Control ------------- */

.zTableContainer {
    width: 100%;
    padding: 1.3rem .2rem;
    border: 1px solid #323232;
    border-radius: 12px;
    margin: 0 .2rem .8rem .2rem;
}

ul.zTable {
    display: table;
    width: 100%;
    margin: 0 auto;
    border-spacing: 0;
    border-radius: .8rem;
}

ul.zTable.padded {
    margin: 20px auto;
}

ul.zTable li {
    display: table-row;
}

ul.zTable li.listTitle {
    display: table-caption;
    font-size: 1.1rem;
    font-weight: 900;
    padding: 8px;
    border-bottom: 1px dashed #747474;
    margin-bottom: 10px;
    text-align: center;
}

ul.zTable li span.zCell {
    display: table-cell;
    font-size: 1rem;
    padding: 6px;
}

ul.zTable li span.zCell.label {
    font-weight: 900;
    display: table-cell;
    color: white;
    text-align: right;
}

ul.zTable li span.zCell.data {
    font-weight: 400;
    display: table-cell;
    color: grey;
}

ul.zTable li span.zCell.spacer {
    padding: 0;
}

ul.zTable li span.zCell.spacer:before {
    content: '----------';
    display: block;
    color: #747474;
}

ul.zTable li span.zCell.spacer:first-child:before {
    text-align: right
}

ul.zTable li span.zCell.spacer:last-child:before {
    text-align: left;
}

/* ------------- zModal Control ------------- */

.zModal {
    width: 100%;
    height: 100%;
    background-color: transparent;
}

/*. close the modal */

a.close-zModal {
    transition: all 0.2s ease-in-out .1s;
    display: table;
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    height: 40px;
    width: 40px;
    border: 2px solid white;
    text-align: center;
    font-size: 2rem;
    border-radius: 50%;
    cursor: pointer;
}

a.close-zModal .icon {
    transition: all 0.2s ease-in-out .1s;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 1rem;
    padding-top: 2px;
}

a.close-zModal:hover {
    color: red;
    border-color: red;
    animation: jello;
    animation-duration: 1s;
}

a.close-zModal:hover .icon {
    font-size: 1.5rem;
    padding-top: 4px;
}

a.close-zModal:active,
a.close-zModal:focus {
    color: red;
    border-color: red;
    height: 36px;
    width: 36px;
    top: 22px;
    right: 22px;
    transition: all 0s;
}

a.close-zModal:active .icon,
a.close-zModal:focus .icon {
    font-size: 1.3rem;
    padding-top: 3px;
    transition: all 0s;
}

/* modal content area */

.zModal .modalContent {
    width: 100%;
    max-width: 1000px;
    height: 100%;
    margin: 0 auto;
}
.zModal .modalContent .sectionPanel{min-width:600px;}

.zModal .modalContent.dark {
    padding: 20px;
    border-radius: 16px;
    background-color: var(--modalDark);
    height: max-content;
}
.zModal .modalContent.fixedWidth{width:620px;}
@media (max-width: 576px) {
    .zModal .modalContent.fixedWidth{width:290px;}
    .zModal .modalContent .sectionPanel{min-width:260px;}    
}
/* modal header */

.zModal .modalHeader {
    width: 100%;
    height: 60px;
    text-align: center;
    margin: 10px 0 10px 0;
}

.zModal .modalHeader span.modalTitle,
.modalTitle {
    display: block;
    width: max-content;
    margin: 0 auto;
    position: relative;
    color: white;
    font-weight: 300;
    font-size: 2rem;
    padding: 0 0 20px 60px;
}

.zModal .modalHeader img.modalIcon {
    height: 4rem;
    position: absolute;
    left: -8px;
    top: -10px;
    animation: swing;
    animation-duration: 1s;
}

.zModal .modalBody {
    width: 100%;
    max-width: 600px;
    margin: 10px auto;
}

.zModal .modalBody span.modalBodyTitle {
    display: block;
    color: white;
    font-weight: 300;
    font-size: 1.1rem;
    padding-bottom: 10px;
    text-align: center;
}

.zModal .modalBody .modalDescription {
    display: block;
    color: white;
    font-weight: 300;
    font-size: 1.1rem;
    padding: 2rem 1rem 1rem 1rem;
    text-align: center;
}

.zModal .modalBody .modalFinePrint {
    display: block;
    color: white;
    font-weight: 300;
    font-size: .8rem;
    padding: 2rem 1rem 1rem 1rem;
    text-align: justify;
    letter-spacing: .008rem;
    line-height: 1.5rem;
}

.zModal .modalFooter {
    width: 100%;
    max-width: 600px;
    margin: 10px auto;
    text-align: center;
}

.zModal .modalContent.wide .modalBody,
.zModal .modalContent.wide .modalFooter {
    max-width: max-content;
}

.zBox .jBox-wrapper {
    width: 100%;
    padding-top: 0px;
}

.zBox .jBox-container {
    background: transparent !important;
    box-shadow: none !important;
}

.errorCode {
    color: white;
    font-size: .7rem;
    font-weight: 900;
}

.errorCode span.error {
    color: red;
}

/* ------------- Home Page ------------- */

.statsBar {
    width: 100%;
    max-width: 1030px;
    margin: 20px auto 30px auto;
    background-color: rgba(0, 0, 0, 0.64);
    border-radius: 8px;
    position: relative;
}

.statsBar .shortStats {
    height: 40px;
    overflow: hidden;
    transition: all .3s ease-in-out;
}

.statsBar .shortStats:hover {
    background-color: rgba(0, 0, 0, 0.70);
    overflow: visible;
    border-radius: 8px;
    cursor: pointer;
}

.statsBar .shortStatsLeft {
    text-align: left;
    float: left;
}

.statsBar .shortStatsRight {
    text-align: right;
    float: right;
}

.statsBar .shortStats .shortStatsX {
    opacity: 0;
    position: absolute;
    top: 13px;
    right: -10px;
    font-size: .7rem;
    transition: all .5s ease;
}

.statsBar .shortStats .shortStatsExpand {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
    font-size: .7rem;
    padding-top: 13px;
}

.statsBar .shortStats ul {
    list-style: none;
    padding: 0 5px;
    margin: 0;
    position: relative;
    top: 3px;
    transition: all .5s ease;
}

.statsBar.expand .shortStats ul {
    position: relative;
    top: -20px;
    opacity: 0;
}

.statsBar.expand .shortStats .shortStatsX {
    top: 13px;
    right: 13px;
    opacity: 1;
}

.statsBar.expand .shortStats .shortStatsExpand {
    display: none;
}

.statsBar .shortStats li {
    padding: 6px 6px;
    display: inline-block;
}

.statsBar .shortStats span.icon img {
    width: 20px;
}

.statsBar .shortStats span.value {
    color: white;
    font-weight: 400;
    font-size: 1.1rem;
    position: relative;
    top: -3px;
    padding-left: 5px;
}

.statsBar .fullStats {
    height: 0px;
    overflow: hidden;
    transition: all .4s ease;
}

.statsBar .fullStats hr {
    border-color: black;
    width: 80%;
}

.statsBar.expand .fullStats {
    height: 800px;
    transition: all 1s ease;
}

.homeButtons {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
}

.homeButtons .itemGrid .itemGrid__nav.comingsoon a span {
    opacity: .3;
}

.homeButtons .itemGrid .itemGrid__nav.comingsoon a:before {
    width: 100%;
    text-align: center;
    color: white;
    content: 'coming soon';
    position: absolute;
    z-index: 99;
    top: 47px;
}

.homeButtons .itemGrid .itemGrid__nav.indev a:before {
    width: 100%;
    text-align: center;
    color: orangered;
    font-size:.7rem;
    content: 'in Development';
    position: absolute;
    padding:2px 0;
    background-color:black;
    z-index: 99;
    top: 42px;
}

.homeButtons .itemGrid .itemGrid__nav.rc a:before {
    width: 100%;
    text-align: center;
    color: plum;
    font-size:.7rem;
    content: 'release candidate';
    position: absolute;
    padding:2px 0;
    background-color:black;
    z-index: 99;
    top: 42px;
}

.homeButtons.admin .itemGrid .itemGrid__nav a {
    display: block;
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 8px;
    margin: 0 auto 20px auto;
    background-color: var(--navbuttonbg);
    transition: all 0.1s ease-in-out;
}

.homeButtons.admin .itemGrid .itemGrid__nav.superadmin a {
    background-image:url('/images/elements/tag-su.png');
    background-position:top left;
    background-size:40px 40px;
    background-repeat:no-repeat;
}

.homeButtons.admin .itemGrid .itemGrid__nav.admin a {
    background-image:url('/images/elements/tag-config.png');
    background-position:top left;
    background-size:40px 40px;
    background-repeat:no-repeat;
}

.homeButtons.admin .itemGrid .itemGrid__nav.sales a {
    background-image:url('/images/elements/tag-sales.png');
    background-position:top left;
    background-size:40px 40px;
    background-repeat:no-repeat;
}

.homeButtons.admin .itemGrid .itemGrid__nav.qa a {
    background-image:url('/images/elements/tag-qa.png');
    background-position:top left;
    background-size:40px 40px;
    background-repeat:no-repeat;
}

.homeButtons.admin .itemGrid .itemGrid__nav.zenpro a {
    background-image:url('/images/elements/tag-zenpro.png');
    background-position:top left;
    background-size:40px 40px;
    background-repeat:no-repeat;
}

.headerFade {
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.64) 44%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.64) 44%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.64) 44%, rgba(0, 0, 0, 0) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#d9000000', endColorstr='#00000000', GradientType=0);
}

.homeFavorites {
    width: 100%;
    max-width: 1080px;
    margin: 40px auto;
}

.homeFavorites section {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

.homeFavorites .favBox {
    width: 220px;
    height: 180px;
    margin: auto;
    padding-bottom: 20px;
    display: none;
}

.homeFavorites.showAll .favBox {
    display: block;
}

.homeFavorites a.favItem {
    display: block;
    background-color: rgba(0, 0, 0, 0.70);
    border-radius: 8px;
    cursor: pointer;
    padding: 20px;
    height: 160px;
    position: relative;
}

.homeFavorites a.favItem span.favTitle {
    position: absolute;
    color: white;
    font-weight: 900;
    font-size: .9rem;
    top: 10px;
    left: 10px;
}

.homeFavorites a.favItem span.favRemove {
    position: absolute;
    color: #ffffff50;
    font-weight: 900;
    font-size: .9rem;
    top: 10px;
    right: 10px;
}

.homeFavorites a.favItem span.favRemove:hover {
    color: red;
}

.homeFavorites a.favItem span.favContent {
    display: block;
    padding: 10px 0;
    color: white;
    font-weight: 400;
    font-size: .9rem;
    width: 100%;
    text-align: center;
}

.homeFavorites a.favItem:hover {
    background-color: rgba(0, 0, 0, 0.80);
}

/* companyIcon settings */

.companyProfileIcon {
    width: 80px;
    height: 80px;
    border-radius: 2px;
    position: relative;
    left: 20px;
    top: 20px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.profileCompanyColor {
    display: table;
    width: 130px;
    height: 130px;
    margin: 20px auto;
    border-radius: 6px;
    text-align: center;
    padding: 12px;
    background-color: #2a2a2a;
    border: 10px solid #2a2a2a;
}

.profileCompanyColor .companyIcon {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* replacement for Avatars */
.zenAvatar{
    margin:0 auto;
    width:80px;height:80px;
    position:relative;
}
.zenAvatar.large{width:120px;height:120px;}
.zenAvatar.small{width:50px;height:50px;}
.zenAvatar.mini{width:30px;height:30px;}

.zenAvatar .avatarImage{
    width:100%;height:100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius:50%;
}

/* main userAvatar setting */

.userAvatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    left: 20px;
    top: 20px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.profileAvatarColor {
    display: table;
    width: 130px;
    height: 130px;
    margin: 20px auto;
    border-radius: 20px;
    text-align: center;
    padding: 12px;
    background-color: #2a2a2a;
    border: 10px solid #2a2a2a;
}

.profileAvatarColor .avatarIcon, .avatarIcon {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.userFirstname {
    position: absolute;
    top: 38px;
    left: 120px;
    color: white;
    font-family: 'Lato';
    font-size: 1rem;
    font-weight: 900;
    line-height: .9rem;
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.userLastname {
    position: absolute;
    top: 54px;
    left: 120px;
    color: white;
    font-family: 'Lato';
    font-size: 1rem;
    font-weight: 900;
    line-height: .9rem;
    white-space: nowrap;
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.userStatus {
    position: absolute;
    top: 70px;
    left: 120px;
    color: yellow;
    font-family: 'Lato';
    font-size: .8rem;
    font-weight: 400;
}

.userStatusspan {
    font-weight: 900;
}

@media (max-width: 950px) {
    .homeButtons {
        margin: -10px auto 0 auto;
        max-width: 400px;
        border: 1px solid transparent;
    }
}

@media (max-width: 576px) {
    .homeFavorites {
        margin: 2px auto;
    }

    .homeFavorites .favBox {
        width: 160px;
        height: 130px;
        padding-bottom: 18px;
    }

    .homeFavorites a.favItem {
        height: 110px;
        padding: 12px;
    }

    .statsBar .shortStats span.icon img {
        width: 16px;
        position: relative;
        top: 3px;
    }

    .statsBar .shortStats span.value {
        font-size: 1rem;
        top: 1px;
        padding-left: 2px;
    }
}

/* ------------- Home Page Stats------------- */

span.statTitle {
    display: block;
    color: white;
    font-weight: 900;
    font-size: 1.2rem;
    margin: 12px 0;
    width: 100%;
    text-align: center;
}

.statsBasic {
    margin: 40px auto;
    max-width: 800px;
}

.statsBasic section {
    font-size: 0;
}

.statsBasic div {
    display: inline-block;
    width: calc(100% / 3);
    text-align: center;
}

.statsBasic span.metricIcon {
    display: block;
    width: 90px;
    height: 90px;
    background-size: cover;
    text-align: center;
    font-weight: 900;
    font-size: 2.2rem;
    line-height: 90px;
    margin: 0 auto;
}

.statsBasic span.metricLabel {
    display: block;
    color: white;
    font-weight: 400;
    font-size: 1rem;
    margin-top: 12px;
}

.riskRating {
    margin: 40px auto;
    max-width: 800px;
}

.riskRating section {
    font-size: 0;
}

.riskRating span.riskCard {
    display: block;
}

.riskRating span.riskCard img {
    width: 120px;
}

.riskRating div {
    display: inline-block;
    text-align: center;
}

.riskRating div:first-child {
    width: 46%;
}

.riskRating div:last-child {
    width: 54%;
    text-align: left;
}

.riskRating table {
    border-spacing: 10px;
}

.riskRating table td {
    padding: 20px 0;
    vertical-align: middle;
}

.riskRating span.metricIcon, span.metricIcon {
    display: block;
    width: 70px;
    height: 70px;
    background-size: cover;
    text-align: center;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 70px;
    margin: 0 auto;
    position: relative;
}
.standalone span.metricIcon {width:120px;height:120px;font-size:2rem;padding-top:26px;}

.riskRating span.metricIcon span, span.metricIcon span {
    display: block;
    color: white;
    font-weight: 400;
    font-size: .7rem;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 15px;
}
.standalone span.metricIcon span {font-size:1.4rem;top:51px;}
.standalone.small span.metricIcon span {font-size:1rem;top:21px;}

.riskRating span.metricLabel, span.metricLabel {
    display: block;
    color: white;
    font-weight: 400;
    font-size: 1rem;
}
.standalone span.metricLabel {font-size:1.6rem;}
.standalone.small span.metricLabel {font-size:1.1rem;}
.costStats {
    margin: 40px auto;
    max-width: 660px;
}

.costStats section {
    font-size: 0;
}

.costStats section div {
    display: inline-block;
    text-align: center;
    width: 20%;
    padding: 0 15px;
}

.costStats span.vbar {
    display: block;
    background-color: #960505;
    border-radius: 4px;
    color: white;
    font-weight: 400;
    font-size: 1rem;
}

.costStats span.vbarLabel {
    display: block;
    color: white;
    font-weight: 400;
    font-size: 1rem;
    margin-top: 12px;
}

/* ------------- Diary Mood Controller ------------- */

.moodSlider {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
}

/*Chrome*/

input[type=range] {
    -webkit-appearance: none;
    margin: 18px 0;
    width: 100%;
    background-color: transparent;
    border: none;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
    box-shadow: 1px 1px 10px #000000, 0px 0px 1px #0d0d0d;
    border: none;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    background: #565656;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -14px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #1cc10d;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}

input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: none;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #2a6495;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
    background: #3071a9;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: none;
    height: 36px;
    width: 36px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
}

input[type=range]:focus::-ms-fill-lower {
    background: #3071a9;
}

input[type=range]:focus::-ms-fill-upper {
    background: #367ebd;
}

/*
#claimMood .myMood.unsubmitted{display:none;}
#claimMood .myMood.submitted{display:block;}
#injuryMood .myMood.unsubmitted{display:block;}
#injuryMood .myMood.submitted{display:none;}
*/
/* slide track coloring */

.myMood.mood-1 input[type=range]::-webkit-slider-runnable-track {
    background-color: var(--moodc1);
}

.myMood.mood-2 input[type=range]::-webkit-slider-runnable-track {
    background-color: var(--moodc2);
}

.myMood.mood-3 input[type=range]::-webkit-slider-runnable-track {
    background-color: var(--moodc3);
}

.myMood.mood-4 input[type=range]::-webkit-slider-runnable-track {
    background-color: var(--moodc4);
}

.myMood.mood-5 input[type=range]::-webkit-slider-runnable-track {
    background-color: var(--moodc5);
}

.myMood.mood-6 input[type=range]::-webkit-slider-runnable-track {
    background-color: var(--moodc6);
}

.myMood.mood-7 input[type=range]::-webkit-slider-runnable-track {
    background-color: var(--moodc7);
}

.myMood.mood-8 input[type=range]::-webkit-slider-runnable-track {
    background-color: var(--moodc8);
}

.myMood.mood-9 input[type=range]::-webkit-slider-runnable-track {
    background-color: var(--moodc9);
}

.myMood.mood-10 input[type=range]::-webkit-slider-runnable-track {
    background-color: var(--moodc10);
}

.myMood.mood-1 input[type=range]::-moz-range-track {
    background-color: var(--moodc1);
}

.myMood.mood-2 input[type=range]::-moz-range-track {
    background-color: var(--moodc2);
}

.myMood.mood-3 input[type=range]::-moz-range-track {
    background-color: var(--moodc3);
}

.myMood.mood-4 input[type=range]::-moz-range-track {
    background-color: var(--moodc4);
}

.myMood.mood-5 input[type=range]::-moz-range-track {
    background-color: var(--moodc5);
}

.myMood.mood-6 input[type=range]::-moz-range-track {
    background-color: var(--moodc6);
}

.myMood.mood-7 input[type=range]::-moz-range-track {
    background-color: var(--moodc7);
}

.myMood.mood-8 input[type=range]::-moz-range-track {
    background-color: var(--moodc8);
}

.myMood.mood-9 input[type=range]::-moz-range-track {
    background-color: var(--moodc9);
}

.myMood.mood-10 input[type=range]::-moz-range-track {
    background-color: var(--moodc10);
}

.myMood.mood-1 input[type=range]::-ms-fill-lower {
    background-color: var(--moodc1);
}

.myMood.mood-2 input[type=range]::-ms-fill-lower {
    background-color: var(--moodc2);
}

.myMood.mood-3 input[type=range]::-ms-fill-lower {
    background-color: var(--moodc3);
}

.myMood.mood-4 input[type=range]::-ms-fill-lower {
    background-color: var(--moodc4);
}

.myMood.mood-5 input[type=range]::-ms-fill-lower {
    background-color: var(--moodc5);
}

.myMood.mood-6 input[type=range]::-ms-fill-lower {
    background-color: var(--moodc6);
}

.myMood.mood-7 input[type=range]::-ms-fill-lower {
    background-color: var(--moodc7);
}

.myMood.mood-8 input[type=range]::-ms-fill-lower {
    background-color: var(--moodc8);
}

.myMood.mood-9 input[type=range]::-ms-fill-lower {
    background-color: var(--moodc9);
}

.myMood.mood-10 input[type=range]::-ms-fill-lower {
    background-color: var(--moodc10);
}

input[type=range]::-webkit-slider-thumb:after {
    content: '10';
}

button {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.moodQuestion {
    padding: 0 0 20px 0;
    text-align: center;
    font-size: 1.1rem;
}

.moodQuestion span.instructions {
    display: block;
    text-align: center;
    font-size: .9rem;
    color: grey;
    padding-top: 12px;
}

.moodSubmit,
.moodNote,
.noMoodNote,
.moodRepeat {
    width: 100%;
    text-align: center;
}

.moodNote span.question,
.noMoodNote span.question,
.moodRepeat span.question {
    display: block;
    padding-top: 12px;
    font-weight: 300;
    font-size: .9rem;
}

.noMoodNote span.question {
    color: orange;
}

.moodSubmit button,
.moodNote button,
.moodRepeat button {
    font-weight: 900;
    font-size: .9rem;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.47);
    margin-top: 12px;
    margin-bottom: 12px;
}

.moodNote {
    display: block;
}

.moodNote button {
    background-color: #9f882b;
}

.moodRepeat button {
    background-color: #1296c5;
}

.moodNote button:hover,
.moodRepeat button:hover,
.moodSubmit button:hover {
    box-shadow: 0px 0px 16px 3px black;
}

.moodNote button:hover {
    background-color: #e6bc14;
}

.moodRepeat button:hover {
    background-color: #11b6f3;
}

.moodNote button:active,
.moodNote button:focus,
.moodRepeat button:active,
.moodRepeat button:focus,
.moodSubmit button:active,
.moodSubmit button:focus {
    box-shadow: none;
}

.submitNote button {
    background-color: #d5b91f !important;
}

.moodNote button {
    background-color: #d5b91f;
}

button#submitInjuryMood {
    background-color: #387faa;
}

button#submitInjuryMoodNote {
    background-color: #a37b3a;
}

button#submitClaimMood {
    background-color: #387faa;
}

button#submitClaimMoodNote {
    background-color: #a37b3a;
}

.txt-mood-1 {
    color: var(--moodc1) !important;
}

.txt-mood-2 {
    color: var(--moodc2) !important;
}

.txt-mood-3 {
    color: var(--moodc3) !important;
}

.txt-mood-4 {
    color: var(--moodc4) !important;
}

.txt-mood-5 {
    color: var(--moodc5) !important;
}

.txt-mood-6 {
    color: var(--moodc6) !important;
}

.txt-mood-7 {
    color: var(--moodc7) !important;
}

.txt-mood-8 {
    color: var(--moodc8) !important;
}

.txt-mood-9 {
    color: var(--moodc9) !important;
}

.txt-mood-10 {
    color: var(--moodc10t) !important;
}

.bg-mood-1 {
    background-color: var(--moodc1) !important;
}

.bg-mood-2 {
    background-color: var(--moodc2) !important;
}

.bg-mood-3 {
    background-color: var(--moodc3) !important;
}

.bg-mood-4 {
    background-color: var(--moodc4) !important;
}

.bg-mood-5 {
    background-color: var(--moodc5) !important;
}

.bg-mood-6 {
    background-color: var(--moodc6) !important;
}

.bg-mood-7 {
    background-color: var(--moodc7) !important;
}

.bg-mood-8 {
    background-color: var(--moodc8) !important;
}

.bg-mood-9 {
    background-color: var(--moodc9) !important;
}

.bg-mood-10 {
    background-color: var(--moodc10) !important;
}

.moodVisual .currentMood {
    position: relative;
    display: table;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin: 0 auto;
}

.moodVisual.smaller .currentMood {
    width: 48px;
    height: 48px;
}

button.mood-1:hover {
    background-color: var(--moodc1t) !important;
}

button.mood-2:hover {
    background-color: var(--moodc2t) !important;
}

button.mood-3:hover {
    background-color: var(--moodc3t) !important;
}

button.mood-4:hover {
    background-color: var(--moodc4t) !important;
}

button.mood-5:hover {
    background-color: var(--moodc5t) !important;
}

button.mood-6:hover {
    background-color: var(--moodc6t) !important;
}

button.mood-7:hover {
    background-color: var(--moodc7t) !important;
}

button.mood-8:hover {
    background-color: var(--moodc8t) !important;
}

button.mood-9:hover {
    background-color: var(--moodc9t) !important;
}

button.mood-10:hover {
    background-color: var(--moodc10t) !important;
}

.myMood.mood-1 .moodVisual .currentMood,
.myMood.mood-1 .moodSubmit button {
    background-color: var(--moodc1t);
}

.myMood.mood-2 .moodVisual .currentMood,
.myMood.mood-2 .moodSubmit button {
    background-color: var(--moodc2t);
}

.myMood.mood-3 .moodVisual .currentMood,
.myMood.mood-3 .moodSubmit button {
    background-color: var(--moodc3t);
}

.myMood.mood-4 .moodVisual .currentMood,
.myMood.mood-4 .moodSubmit button {
    background-color: var(--moodc4t);
}

.myMood.mood-5 .moodVisual .currentMood,
.myMood.mood-5 .moodSubmit button {
    background-color: var(--moodc5t);
}

.myMood.mood-6 .moodVisual .currentMood,
.myMood.mood-6 .moodSubmit button {
    background-color: var(--moodc6t);
}

.myMood.mood-7 .moodVisual .currentMood,
.myMood.mood-7 .moodSubmit button {
    background-color: var(--moodc7t);
}

.myMood.mood-8 .moodVisual .currentMood,
.myMood.mood-8 .moodSubmit button {
    background-color: var(--moodc8t);
}

.myMood.mood-9 .moodVisual .currentMood,
.myMood.mood-9 .moodSubmit button {
    background-color: var(--moodc9t);
}

.myMood.mood-10 .moodVisual .currentMood,
.myMood.mood-10 .moodSubmit button {
    background-color: var(--moodc10t);
}

.myMood .moodVisual .currentMood:after {
    font-family: 'zenjuriesfont';
    color: white;
    font-size: 5rem;
    display: table-cell;
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

.myMood .moodVisual .currentMood:before {
    font-family: 'Bebas Neue', cursive;
    position: absolute;
    top: 0px;
    display: inline-block;
    color: black;
    font-size: 1.4rem;
    width: 100%;
    text-align: center;
}

.myMood .moodVisual.smaller.clickable:hover {
    width: max-content;
    margin: 0 auto;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.56);
    cursor: pointer;
    padding: 0 10px;
}

.myMood .moodVisual.smaller .currentMood:after {
    padding-top: 2px;
    font-size: 2.5rem;
}

.myMood .moodVisual.smaller .currentMood:before {
    top: 0px;
    font-size: .9rem;
}

.myMood.mood-1 .moodVisual .currentMood:before {
    content: '1';
}

.myMood.mood-2 .moodVisual .currentMood:before {
    content: '2';
}

.myMood.mood-3 .moodVisual .currentMood:before {
    content: '3';
}

.myMood.mood-4 .moodVisual .currentMood:before {
    content: '4';
}

.myMood.mood-5 .moodVisual .currentMood:before {
    content: '5';
}

.myMood.mood-6 .moodVisual .currentMood:before {
    content: '6';
}

.myMood.mood-7 .moodVisual .currentMood:before {
    content: '7';
}

.myMood.mood-8 .moodVisual .currentMood:before {
    content: '8';
}

.myMood.mood-9 .moodVisual .currentMood:before {
    content: '9';
}

.myMood.mood-10 .moodVisual .currentMood:before {
    content: '10';
}

.myMood.mood-1 .moodVisual .currentMood:after {
    content: '\e181';
}

.myMood.mood-2 .moodVisual .currentMood:after {
    content: '\e180';
}

.myMood.mood-3 .moodVisual .currentMood:after {
    content: '\e17d';
}

.myMood.mood-4 .moodVisual .currentMood:after {
    content: '\e17c';
}

.myMood.mood-5 .moodVisual .currentMood:after {
    content: '\e17a';
}

.myMood.mood-6 .moodVisual .currentMood:after {
    content: '\e179';
}

.myMood.mood-7 .moodVisual .currentMood:after {
    content: '\e178';
}

.myMood.mood-8 .moodVisual .currentMood:after {
    content: '\e177';
}

.myMood.mood-9 .moodVisual .currentMood:after {
    content: '\e176';
}

.myMood.mood-10 .moodVisual .currentMood:after {
    content: '\e176';
}

.moodVisual .moodLabel {
    text-align: center;
    width: 100%;
    padding: 12px;
    font-size: 1rem;
}

.moodVisual .moodLabel.smaller {
    padding: 0;
}

.myMood .moodVisual .moodLabel:after {
    font-weight: 900;
    padding-left: 6px;
    font-size: 1.2rem;
}

.moodVisual .moodLabel.smaller:after {
    padding: 0;
    font-size: .8rem;
}

.myMood.mood-1 .moodVisual .moodLabel:after {
    content: 'Very Bad';
    color: var(--moodc1);
}

.myMood.mood-2 .moodVisual .moodLabel:after {
    content: 'Somewhat Bad';
    color: var(--moodc2);
}

.myMood.mood-3 .moodVisual .moodLabel:after {
    content: 'Not Well';
    color: var(--moodc3);
}

.myMood.mood-4 .moodVisual .moodLabel:after {
    content: 'Alright';
    color: var(--moodc4);
}

.myMood.mood-5 .moodVisual .moodLabel:after {
    content: 'Fine';
    color: var(--moodc5);
}

.myMood.mood-6 .moodVisual .moodLabel:after {
    content: 'Doing Better';
    color: var(--moodc6);
}

.myMood.mood-7 .moodVisual .moodLabel:after {
    content: 'Fairly Good';
    color: var(--moodc7);
}

.myMood.mood-8 .moodVisual .moodLabel:after {
    content: 'Very Good';
    color: var(--moodc8);
}

.myMood.mood-9 .moodVisual .moodLabel:after {
    content: 'Feeling Great';
    color: var(--moodc9);
}

.myMood.mood-10 .moodVisual .moodLabel:after {
    content: 'Awesome';
    color: var(--moodc10);
}

.noteBody {
    position: relative;
    width: 100%;
    min-width: 600px;
}

textarea.notePad {
    background: rgb(188, 188, 133);
    background: -moz-linear-gradient(-45deg, rgba(188, 188, 133, 1) 0%, rgba(234, 234, 145, 1) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(188, 188, 133, 1) 0%, rgba(234, 234, 145, 1) 100%);
    background: linear-gradient(135deg, rgba(188, 188, 133, 1) 0%, rgba(234, 234, 145, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#bcbc85', endColorstr='#eaea91', GradientType=1);
    width: 100%;
    height: 300px;
    border-radius: 2px;
    border-top: 1px solid #ffffd9;
    border-bottom: 1px solid #7e6b0b;
    box-shadow: 0px 0px 20px black;
    font-size: 1.3rem;
    padding: 60px 40px 40px 40px;
}

textarea.greyPad {
    background: #c4c4c4;
    background: -moz-linear-gradient(-45deg, #c4c4c4 0%, #e5e5e5 100%);
    background: -webkit-linear-gradient(-45deg, #c4c4c4 0%, #e5e5e5 100%);
    background: linear-gradient(135deg, #c4c4c4 0%, #e5e5e5 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c4c4c4', endColorstr='#e5e5e5', GradientType=1);
    width: 100%;
    height: 300px;
    border-radius: 2px;
    border-top: 1px solid #ffffd9;
    border-bottom: 1px solid #7e6b0b;
    box-shadow: 0px 0px 20px black;
    font-size: 1.3rem;
    padding: 60px 40px 40px 40px;
}

.noteitem {
    position: absolute;
    font-weight: 400;
    font-size: 1rem;
    font-style: italic;
    color: grey;
}

.noteitem.nDate {
    top: 10px;
    right: 10px;
}

.noteitem.nSent {
    top: 28px;
    right: 10px;
    color: #1a9d1a;
}

.noteitem.nTo {
    top: 10px;
    left: 10px;
}

.noteitem.nClip {
    top: 10px;
    right: 50px;
}

@media screen and (max-width: 767px) {
    .noteBody {
        min-width: 400px;
    }
}

@media screen and (max-width: 580px) {
    .noteBody {
        min-width: 280px;
    }
}

/* help system */
.helpUpdate{margin:12px 0;}
.helpUpdate span.helpAmount{color:white;}
.issueTitle{font-size:1.1rem;font-weight:900;display:block;}
.zenResponse{font-style:italic;border-top:1px solid grey;margin-top:10px;padding-top:10px;padding-bottom:10px;}
.zenResponse span.responseName{font-weight:900;color:#f27280;}
.issueUpdate{border-top:1px solid grey;margin-top:10px;padding-top:10px;padding-bottom:10px;}
.issueDateTime{padding-left:7px;font-size:.7rem;color:grey;}

/* message system */

.messageHeader {
    height: 30px;
}

section.messageListing {}

section.messageListing.open .injuryChatPost {
    max-height: 1000px;
    transition: max-height 0.25s ease-in;
}

section.messageListing.open .messagePost {
    max-height: 1000px;
    transition: max-height 0.25s ease-in;
}

.messageContainer {
    margin-bottom: 10px;
}

section.messageListing.open .messageContainer {
    margin-bottom: 30px;
}

.messagePost {
    cursor: pointer;
    width: 100%;
    border-radius: 12px;
    background-color: var(--messageBG);
    overflow: hidden;
    max-height: 58px;
    transition: max-height .25s ease-out;
}

.injuryChatPost {
    cursor: pointer;
    width: 100%;
    border-radius: 12px;
    background-color: var(--messageBG);
    overflow: hidden;
    max-height: 58px;
    transition: max-height .25s ease-out;
}

.messagePost.deleted{opacity:.6;border:1px dashed #99222290;}

.injuryChatPost.deleted{opacity:.6;border:1px dashed #99222290;}

.messagePost:hover {
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    background-color: var(--messageBG-h);
}

.injuryChatPost:hover {
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
    background-color: var(--messageBG-h);
}

.messagePost.chat {
    background-color: var(--messageChatBG);
}

.injuryChatPost.chat {
    background-color: var(--messageChatBG);
}

.messagePost.open {
    max-height: 1000px;
    transition: max-height 0.25s ease-in;
}

.injuryChatPost.open {
    max-height: 1000px;
    transition: max-height 0.25s ease-in;
}

.messageContent {
    display: table;
    width: 100%;
    position: relative;
    min-height: 200px;
}

.messageContent {
    display: table;
    width: 100%;
    position: relative;
}

.messageContent span.messageType {
    display: table-cell;
    width: 50px;
    background-color: black;
}

.messageContent span.messageIcon {
    display: block;
    font-family: 'zenjuriesfont';
    line-height: 2.8rem;
    text-indent: 7px;
    font-size: 1.6rem;
    position: absolute;
    top: 8px;
    left: 5px;
    width: 40px;
    height: 40px;
    color: white;
}

.messageContent span.messageType.CTApost {
    background-color: var(--ctaPost);
}
.messageContent span.messageType.CTApost span.messageIcon:after {
    content: '\e147';
}
.messageContent span.messageType.CTApost span.messageIcon{
    color: var(--ctaPost-h);
}
.messageContent span.messageType.CTApost + .messageTitle {padding-left:7px;}
.messageContent span.messageType.CTApost + .messageTitle:after {
    position:absolute;
    top:0px;left:-10px;
    width: 0;height: 0;
    border-top: 12px solid transparent;
    border-left: 12px solid var(--ctaPost);
    border-bottom: 12px solid transparent;    
    content: '';
}

.messageContent span.messageType.CTAoptional {
    background-color: var(--ctaPostOptional);
}
.messageContent span.messageType.CTAoptional span.messageIcon:after {
    content: '\e126';
}
.messageContent span.messageType.CTAoptional span.messageIcon{
    color: var(--ctaPostOptional-h);
}
.messageContent span.messageType.CTAoptional + .messageTitle {padding-left:7px;}
.messageContent span.messageType.CTAoptional + .messageTitle:after {
    position:absolute;
    top:0px;left:-10px;
    width: 0;height: 0;
    border-top: 12px solid transparent;
    border-left: 12px solid var(--ctaPostOptional);
    border-bottom: 12px solid transparent;    
    content: '';
}

.messageContent span.messageType.CTApostDeferred {
    background-color: var(--ctaPostDeferred);
}
.messageContent span.messageType.CTApostDeferred span.messageIcon:after {
    content: '\e0de';
}
.messageContent span.messageType.CTApostDeferred span.messageIcon{
    color: var(--ctaPostDeferred-h);
}
.messageContent span.messageType.CTApostDeferred + .messageTitle {padding-left:7px;}
.messageContent span.messageType.CTApostDeferred + .messageTitle:after {
    position:absolute;
    top:0px;left:-10px;
    width: 0;height: 0;
    border-top: 12px solid transparent;
    border-left: 12px solid var(--ctaPostDeferred);
    border-bottom: 12px solid transparent;    
    content: '';
}

.messageContent span.messageType.CTApostAlert {
    background-color: var(--ctaPostAlert);
}
.messageContent span.messageType.CTApostAlert span.messageIcon:after {
    content: '\e19e';
}
.messageContent span.messageType.CTApostAlert span.messageIcon{
    color: var(--ctaPostAlert-h);
    animation: pulse;
    animation-duration: 2s;
}
.messageContent span.messageType.CTApostAlert + .messageTitle {padding-left:7px;}
.messageContent span.messageType.CTApostAlert + .messageTitle:after {
    position:absolute;
    top:0px;left:-10px;
    width: 0;height: 0;
    border-top: 12px solid transparent;
    border-left: 12px solid var(--ctaPostAlert);
    border-bottom: 12px solid transparent;    
    content: '';
}

.messageContent span.messageType.CTApostRepeat {
    background-color: var(--ctaPostRepeat);
}
.messageContent span.messageType.CTApostRepeat span.messageIcon:after {
    content: '\e069';
}
.messageContent span.messageType.CTApostRepeat span.messageIcon{
    color: var(--ctaPostRepeat-h);
    animation: pulse;
    animation-duration: 2s;
}
.messageContent span.messageType.CTApostRepeat + .messageTitle {padding-left:7px;}
.messageContent span.messageType.CTApostRepeat + .messageTitle:after {
    position:absolute;
    top:0px;left:-10px;
    width: 0;height: 0;
    border-top: 12px solid transparent;
    border-left: 12px solid var(--ctaPostRepeat);
    border-bottom: 12px solid transparent;    
    content: '';
}

.messageContent span.messageType.CTApostComplete {
    background-color: var(--ctaPostComplete);
}
.messageContent span.messageType.CTApostComplete span.messageIcon:after {
    content: '\e018';
}
.messageContent span.messageType.CTApostComplete span.messageIcon{
    color: var(--ctaPostComplete-h);
}
.messageContent span.messageType.CTApostComplete + .messageTitle {padding-left:7px;}
.messageContent span.messageType.CTApostComplete + .messageTitle:after {
    position:absolute;
    top:0px;left:-10px;
    width: 0;height: 0;
    border-top: 12px solid transparent;
    border-left: 12px solid var(--ctaPostComplete);
    border-bottom: 12px solid transparent;    
    content: '';
}

.messageContent span.messageType.resolvedPost {
    background-color: var(--resolvedPost);
}
.messageContent span.messageType.resolvedPost span.messageIcon:after {
    content: '\e0d0';
}
.messageContent span.messageType.resolvedPost span.messageIcon{
    color: var(--resolvedPost-h);
}

.messageContent span.messageType.reopenedPost {
    background-color: var(--reopenedPost);
}

.messageContent span.messageType.reopenedPost span.messageIcon:after {
    content: '\e0d4';
}

.messageContent span.messageType.chatPost {
    background-color: var(--chatPost);
}

.messageContent span.messageType.chatPost span.messageIcon {
    background-size: contain;
    background-position: center center;
    border-radius: 50%;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.3);
}

.messageContent span.messageType.firstReportPost {
    background-color: var(--firstReportPost);
}

.messageContent span.messageType.firstReportPost span.messageIcon:after {
    content: '\e0d6';
}

.messageContent span.messageType.claimNumberPost {
    background-color: var(--claimNumberPost);
}

.messageContent span.messageType.claimNumberPost span.messageIcon:after {
    content: '\e12b';
}

.messageContent span.messageType.reclassifiedPost {
    background-color: var(--reclassifiedPost);
}

.messageContent span.messageType.reclassifiedPost span.messageIcon:after {
    content: '\e148';
}

.messageContent span.messageType.diaryPost {
    background-color: var(--diaryPost);
}

.messageContent span.messageType.diaryPost span.messageIcon {
    background-size: contain;
    background-position: center center;
    border-radius: 50%;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.3);
}

.messageContent span.messageType.valuePost {
    background-color: var(--valuePost);
}

.messageContent span.messageType.valuePost span.messageIcon:after {
    content: '\e118';
}

.messageContent span.messageType.systemPost {
    background-color: var(--systemPost);
}

.messageContent span.messageType.systemPost span.messageIcon:after {
    content: '\e129';
}

.messageContent span.messageType.reportTimeGoodPost {
    background-color: var(--reportTimeGoodPost);
}

.messageContent span.messageType.reportTimeGoodPost span.messageIcon:after {
    content: '\e147';
}

.messageContent span.messageType.reportTimeBadPost {
    background-color: var(--reportTimeBadPost);
}

.messageContent span.messageType.reportTimeBadPost span.messageIcon:after {
    content: '\e147';
}

.messageContent span.messageType.reportTimeOkayPost {
    background-color: var(--reportTimeOkayPost);
}

.messageContent span.messageType.reportTimeOkayPost span.messageIcon:after {
    content: '\e147';
}

.messageContent span.messageType.employeeStatusPost {
    background-color: var(--employeeStatusPost);
}

.messageContent span.messageType.employeeStatusPost span.messageIcon:after {
    content: '\e0b0';
}

.messageContent span.messageType.finalCostPost {
    background-color: var(--finalCostPost);
}

.messageContent span.messageType.finalCostPost span.messageIcon:after {
    content: '\e0f6';
}

.messageContent span.messageType.adjusterPost {
    background-color: var(--adjusterPost);
}

.messageContent span.messageType.adjusterPost span.messageIcon:after {
    content: '\e157';
}

.messageContent span.messageType.notesPost {
    background-color: var(--notesPost);
}

.messageContent span.messageType.notesPost span.messageIcon:after {
    content: '\e083';
}

.messageContent span.messageType.photoPost {
    background-color: var(--photoPost) !important;
}

.messageContent span.messageType.photoPost span.messageIcon:after {
    content: '\e131';
}

.messageContent span.messageType.filePost {
    background-color: var(--filePost);
}

.messageContent span.messageType.filePost span.messageIcon:after {
    content: '\e122';
}

.messageContent span.messageType.newInjuryPost {
    background-color: var(--newInjuryPost);
}

.messageContent span.messageType.newInjuryPost span.messageIcon:after {
    content: '\e0e1';
}

.messageContent span.messageType.reserveBadPost {
    background-color: var(--reserveBadPost);
}

.messageContent span.messageType.reserveBadPost span.messageIcon:after {
    content: '\e117';
}

.messageContent span.messageType.reserveGoodPost {
    background-color: var(--reserveGoodPost);
}

.messageContent span.messageType.reserveGoodPost span.messageIcon:after {
    content: '\e117';
}

.messageContent span.messageType.reminderPost {
    background-color: var(--reminderPost);
}

.messageContent span.messageType.reminderPost span.messageIcon:after {
    content: '\e119';
}

.messageContent span.messageType.newTaskPost {
    background-color: var(--newTaskPost);
}

.messageContent span.messageType.newTaskPost span.messageIcon:after {
    content: '\e04e';
}

.messageContent span.messageType.completeTaskPost {
    background-color: var(--completeTaskPost);
}

.messageContent span.messageType.completeTaskPost span.messageIcon:after {
    content: '\e04e';
}

.messageContent span.messageType.taskReminderPost {
    background-color: var(--taskReminderPost);
}

.messageContent span.messageType.taskReminderPost span.messageIcon:after {
    content: '\e04e';
}

.messageContent span.messageType.expiredTaskPost {
    background-color: var(--expiredTaskPost);
}

.messageContent span.messageType.expiredTaskPost span.messageIcon:after {
    content: '\e04e';
}

.messageContent span.messageTitle {
    display: block;
    position: absolute;
    top: 18px;
    left: 60px;
    font-weight: 900;
}
.messageContent span.messageTitle span.msgStatus{font-size:.8rem;}
.messageContent span.messageTitle span.msgStatus.edited{color:#387faa;}
.messageContent span.messageTitle span.msgStatus.deleted{color:#992222;}

.messageContent span.messageReplies {
    display: block;
    position: absolute;
    bottom: 18px;
    left: 60px;
    font-size: .9rem;
    font-weight: 400;
}

.messageContent span.messageBody {
    padding: 60px 30px 100px 12px;
    display: table-cell;
    vertical-align: middle;
}

.messageContent span.messageCTA {
    text-align:center;
    display: block;
    position: absolute;
    padding-top:5px;
    left: 60px;
}

.messageContent span.messageInfo {
    display: block;
    position: absolute;
    bottom: 18px;
    left: 60px;
    font-size: .9rem;
    font-weight: 400;
    max-width: 60%;
}

.messageContent span.messageDateTime {
    display: block;
    position: absolute;
    top: 20px;
    right: 18px;
    font-size: .8rem;
    font-weight: 300;
}

.messageContent .messageControls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: .9rem;
    font-weight: 400;
}

.messageReplyThread {
    padding-left: 60px;
    margin-top: 8px;
}

/* message summary style */

.messageSummary .messagePost{
    max-height:45px !important;
    height:45px;
    border-radius: 8px !important;
}

.messageSummary .injuryChatPost{
    max-height:45px !important;
    height:45px;
    border-radius: 8px !important;
}

.messageSummary .messageContent {height:54px;}
.messageSummary .messageContent span.messageBody {display:none}
.messageSummary .messageContent span.messageControls {display:none}
.messageSummary .messageContent span.messageType {
    width: 45px;
}

.messageSummary .messageContent span.messageIcon {
    line-height: 2.8rem;
    text-indent: 6px;
    font-size: 1.4rem;
    top: 1px;
    left: 2px;
    width: 36px;
    height: 36px;
}
.messageSummary .messageContent span.messageType.chatPost span.messageIcon {
    top:4px;
    left:4px;
}
.messageSummary .messageContent span.messageTitle {
    top: 5px;
    left: 50px;
    font-weight: 900;
    font-size:.8rem;
    text-align:left;
    width:270px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.messageSummary .messageContent span.messageDateTime {
    bottom: 0px;
    right: 5px;
    font-size: .6rem;
    font-weight: 300;
    padding-top:10px;
    color:#ffffff50;
}

/* zenTable Listing */

.zenListTable {
    padding: 0px 20px;
    margin-bottom:10px;
}

.zenListTable table, table.zenListTable{
    width: 100%;
    border-collapse: collapse;
}

.zenListTable tbody tr.tableHeadings td {
    background-color: transparent;
    height: 70px;
    text-align: center;
}

.zenListTable tbody td {
    background-color: rgba(58, 58, 58, 0.48);
    text-align: center;
    vertical-align: middle;
    height: 20px;
}

.zenListTable tbody tr.active td {
    background-color: var(--activeRow);
}

.zenListTable tbody tr.isDemo td {
    background-color: var(--demo);
}

.zenListTable tbody tr.active:hover td {
    background-color: var(--activeRowh);
}

.zenListTable tbody tr:hover td {
    background-color: rgba(58, 58, 58, 1);
}

.zenListTable tbody tr.tableHeadings:hover td {
    background-color: transparent;
}

.zenListTable tbody tr.tablerowspace td {
    background-color: transparent;
    height: 20px;
}

.zenListTable.tight tbody tr.tablerowspace td {
    background-color: transparent;
    height: 10px;
}

.zenListTable tbody tr.tablerowspace:last-child td {
    height: 80px;
}

.zenListTable tbody td:first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    width: 44px;
}

.zenListTable tbody td:last-child {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    width: 30px;
}

.zenListTable.dataItemTable tbody td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    width: 44px;
}

.zenListTable.dataItemTable tbody td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    width: 30px;
}

.zenListTable.userListTable tbody td:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    width: 44px;
}

.zenListTable.userListTable tbody td:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    width: 30px;
}

.zenListTable tbody td:nth-child(2) {
    text-align: left;
    text-indent: 15px;
    font-weight: bold;
}

.zenListTable tbody td.name {
    text-align: left;
    text-indent: 15px;
    font-weight: bold;
}

.zenListTable tbody td.name span {
    display: block;
    text-overflow: ellipsis;
    font-size: .9rem;
    font-weight: bold;
    width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 2px;
}

.zenListTable tbody td.injurydate span,
.zenListTable tbody td.itemdate span {
    font-size: .7rem;
}

.zenListTable tbody td.injurydate.attention span {
    color: yellow;
}

.zenListTable tbody td.injurydate.alert span {
    color: orange;
}

.zenListTable tbody td.injurydate.critical span {
    color: #ff5555;
    font-weight: 900
}

.zenListTable tbody td.itemdate.critical span {
    color: #ff5555;
}

.zenListTable tbody td.reserve span {
    color: red;
}

.zenListTable tbody td.current span {
    color: green;
}

td.severity span {
    font-size: .9rem;
    font-weight: bold;
}

td.severity span.Mild:after {
    color: yellow;
    content: "first aid";
}

td.severity span.Moderate:after {
    color: orange;
    content: "moderate";
}

td.severity span.Severe:after {
    color: red;
    content: "severe";
}

.zenListTable tbody td.policyNum span {
    font-size: .7rem;
    font-weight: bold;
    letter-spacing: .05rem;
}

.zenListTable tbody td.progress span {
    font-size: .8rem;
    font-weight: bold;
}

.zenListTable tbody td.claim {
    font-size: .8rem;
    font-weight: bold;
}

.zenListTable tbody td.mood {
    font-weight: bold;
}

.zenListTable tbody td.companyLogo .companyIcon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background-color: red;
    margin: 9px 10px 9px 9px;
}

.zenListTable tbody td.companyName {
    text-align: left;
}

.zenListTable tbody td.companyName span {
    display: block;
    text-overflow: ellipsis;
    font-size: .9rem;
    font-weight: bold;
    width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 2px;
}

.zenListTable tbody td.openClaims {
    color: yellow;
}

.zenListTable tbody td.criticalClaims {
    color: red;
}

.zenListTable tbody td.email span {
    font-size: .8rem;
    font-weight: bold;
    color: #2187da;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pagination {
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 100%;
    height: 60px;
    border-top:1px solid var(--zenpanel-lines);
}

@media screen and (max-width: 1000px) {}

@media screen and (max-width: 880px) {
    .zenListTable tbody td.reserve {
        display: none;
    }

    .zenListTable tbody td.current {
        display: none;
    }
}

@media screen and (max-width: 580px) {
    .zenListTable {
        padding: 0px 2px;
    }

    .zenListTable tbody td.name span {
        width: 100px;
        font-size: .8rem;
    }

    .zenListTable tbody td.claim {
        display: none;
    }

    .zenListTable tbody td.total {
        display: none;
    }

    .zenListTable tbody td.injurydate {
        display: none;
    }

    .zenListTable tbody td.resolved {
        display: none;
    }

    .zenListTable tbody td.recordEdit {
        display: none;
    }

    .zenListTable tbody td.mood {
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        width: 30px;
    }

    .zenListTable tbody td.severity span {
        font-family: 'zenjuriesfont';
    }

    .zenListTable tbody td.severity span.Mild:after {
        content: "\e0e0";
    }

    .zenListTable tbody td.severity span.Moderate:after {
        content: "\e0e2";
    }

    .zenListTable tbody td.severity span.Severe:after {
        content: "\e0ee";
    }

    .zenListTable tbody td.progress span {
        font-size: .7rem;
    }

    .messageContent span.messageDateTime {
        top: 6px;
        right: 10px;
        font-size: .7rem;
    }

    .messageContent span.messageTitle {
        top: 21px;
        left: 60px;
    }

    .messageContent span.messageBody{
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
        word-spacing:normal;
    }
}
/* splitView */
.splitView{display:table;width:100%;}
.splitView .splitView__row{display:table-row;}
.splitView .splitView__cell{display:table-cell;vertical-align:top;}
@media (max-width: 900px) {
    .splitView, .splitView .splitView__row, .splitView .splitView__cell{display:block;} 
} 

/* earningTable */
.earningTable{display:table;width:100%;}
.earningTable .earningTable__row{display:table-row;}
.earningTable .earningTable__cell{display:table-cell;vertical-align:middle;padding:3px;}
.earningTable .earningTable__cell:first-child{text-align:left;}
.earningTable .earningTable__cell:last-child{text-align:right;}
.earningTable .earningTable__cell span.earningLabel{font-size:.9rem;color:grey;}
.earningTable .earningTable__cell span.earningValue{font-size:1.4rem;color:white;}
 

/* multiView */
.multiView.tableView{animation: fadeInGrid;animation-duration: 1s;}
.multiView.gridView{animation: fadeInTable;animation-duration: 1s;}
@keyframes fadeInGrid {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes fadeInTable {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes scaleUp {
    0% {transform: scale(1);}
    50% {transform: scale(1.02);}
    100% {transform: scale(1);}
}
/* multiView-table */
.avatarHolder{border:1px solid green;}
.testAvatar{position:absolute;background-position:center center;background-size:cover;background-repeat:no-repeat;width:20px;height:20px;}
.multiView {position:relative;padding:60px 0;}
.multiView.tableView{padding:0 0 20px 0;}
.multiView.tableView .multiView__container{display:table;width:100%;border-collapse:collapse;margin-bottom:40px;}
.multiView.tableView .dataRow{display:table-row;position:relative;}
.multiView.tableView .dataRow.dataSort{background-color:transparent;height:70px;text-align:center;}
.multiView.tableView .dataRow.rowSpace{height:10px;border:none;}
.multiView.tableView .dataRow .dataCell{display:table-cell;text-align:center;vertical-align:middle;height:50px;}
.multiView.tableView .dataRow .dataCell:first-child{border-top-left-radius:30px;border-bottom-left-radius:30px;width:60px;}
.multiView.tableView .dataRow .dataCell:last-child{border-top-right-radius:30px;border-bottom-right-radius:30px;width:30px;}


.multiView.tableView.dataItemTable .dataRow{}
.multiView.tableView.dataItemTable .dataRow .dataCell:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px;width:60px;}
.multiView.tableView.dataItemTable .dataRow .dataCell:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px;width:30px;}

/*.multiView.tableView.userListTable .dataRow:hover{animation: pulse;animation-duration: .2s;}
.multiView.tableView.userListTable .dataRow.dataSort:hover{animation: none;}*/
.multiView.tableView.userListTable .dataRow:hover .dataCell:first-child{background-color:#080808;}
.multiView.tableView.userListTable .dataRow .dataCell:first-child{border-top-left-radius:30px;border-bottom-left-radius:30px;width:50px;background-color:black;}
.multiView.tableView.userListTable .dataRow .dataCell:last-child{border-top-right-radius:30px;border-bottom-right-radius:30px;width:30px;}

body.dark .multiView.tableView .dataRow .dataCell{background-color: var(--tableCellBG-dark);}
body.light .multiView.tableView .dataRow .dataCell{background-color: var(--tableCellBG-light);}
.multiView.tableView .dataRow.dataSort .dataCell{background-color:transparent !important;}
.multiView.tableView .dataRow .dataCell label{display:none;}

.multiView.injuryList.tableView .dataRow .dataCell:first-child{border-top-left-radius:30px;border-bottom-left-radius:30px;width:60px;}
.multiView.injuryList.tableView .dataRow .dataCell:last-child{border-top-right-radius:30px;border-bottom-right-radius:30px;width:30px;}

.multiView.heirarchyList.tableView{padding-left:20px;}
.multiView.heirarchyList.tableView .controlRow{display:table-row;height:30px;position:relative;}
.multiView.heirarchyList.tableView .controlRow .heirarchyControls{position:absolute;right:0px;top:-8px;}
.multiView.heirarchyList.tableView .dataRow .dataCell:first-child{width:30px;position:relative;}
.multiView.heirarchyList.tableView .dataRow .dataCell:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px;width:12px;}
.multiView.heirarchyList.grouped.tableView .dataRow.broker{background-color:#7e6b0b50;}
.multiView.heirarchyList.grouped.tableView .dataRow.broker:hover{background-color:#7e6b0b80;}
.multiView.heirarchyList.grouped.tableView .dataRow.agency{background-color:#36800050;}
.multiView.heirarchyList.grouped.tableView .dataRow.agency:hover{background-color:#36800080;}

.multiView.heirarchyList.dataItemTable .dataRow .dataCell:first-child:before{height:100%;width:20px;content:'';border-top-left-radius: 12px;border-bottom-left-radius: 12px;position:absolute;top:0px;left:0px;}
.multiView.heirarchyList.dataItemTable .dataRow.broker .dataCell:first-child:before{left:-20px;background-color:var(--goldtab);}
.multiView.heirarchyList.dataItemTable .dataRow.agency .dataCell:first-child:before{left:-11px;background-color:var(--greentab);}
.multiView.heirarchyList.dataItemTable .dataRow.company .dataCell:first-child:before{left:-3px;background-color:var(--bluetab);}
.multiView.heirarchyList.dataItemTable .dataRow.multi_entity .dataCell:first-child:before{left:-3px;background-color:var(--purpletab);}

.multiView.heirarchyList.userListTable .dataRow .dataCell:first-child:before{height:100%;width:20px;content:'';border-top-left-radius: 12px;border-bottom-left-radius: 12px;position:absolute;top:0px;left:0px;}
.multiView.heirarchyList.userListTable .dataRow.broker .dataCell:first-child:before{left:-20px;background-color:var(--goldtab);}
.multiView.heirarchyList.userListTable .dataRow.agency .dataCell:first-child:before{left:-11px;background-color:var(--greentab);}
.multiView.heirarchyList.userListTable .dataRow.company .dataCell:first-child:before{left:-3px;background-color:var(--bluetab);}
.multiView.heirarchyList.dataItemTable .dataRow.multi_entity .dataCell:first-child:before{left:-3px;background-color:var(--purpletab);}

.multiView.tableView .gridView__controls{display:none;}
.multiView.tableView .dataRow.active {background-color: var(--activeRow);}
.multiView.tableView .dataRow.isDemo {background-color: var(--demo);}
.multiView.tableView .dataRow.isDemo:hover {background-color: var(--demoh);}
.multiView.tableView .dataRow.isPaused {background-color: var(--paused);}
.multiView.tableView .dataRow.isPaused:hover {background-color: var(--pausedh);}
.multiView.tableView .dataRow.active:hover{background-color: var(--activeRowh);}
.multiView.tableView .dataRow:hover{background-color: rgba(58, 58, 58, 1);}
.multiView .dataCell.data__name {max-width:140px;overflow:hidden;text-overflow:ellipsis;}
.multiView .dataCell.data__name span{white-space:nowrap;}
.multiView .dataCell.data__short {max-width:30px;overflow:hidden;text-overflow:ellipsis;text-align:center;}
.multiView .dataCell.data__short span{white-space:nowrap;font-size:.7rem !important;}
.multiView .dataCell.data__icon .icon{font-size:1.5rem;width:60px;}
.multiView .dataCell.data__value{}
.multiView .dataCell.data__policynum{}
.multiView .dataCell.data__itemdate{}
.multiView .dataCell.data__actions{padding:0 5px;}
.multiView .dataCell.noMobile{}
.multiView .dataCell.data__value{}

/* multiView-grid */
.multiView.gridView{padding:0 0 50px 0;}
.multiView.gridView .multiView__container{display:grid;padding:1rem;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));  grid-gap: 1rem;}
.multiView.gridView .multiView__container.smallGrid{grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));  grid-gap: .8rem;}
.multiView.gridView .multiView__container.bigGrid{grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));  grid-gap: 1rem;}
.multiView.gridView .dataRow{display:grid;box-shadow:0px 1px 15px #00000050;border-radius:12px;padding:20px;}
body.dark .multiView.gridView .dataRow{background-color:var(--stdpanel-dark);  border:1px solid var(--sectionpanelo);}
body.light .multiView.gridView .dataRow{background-color:var(--stdpanel-light);  border:1px solid var(--sectionpanelo);}
.multiView.gridView .dataRow.dataSort{display:none;}
.multiView.gridView .dataRow.rowSpace{display:none;}
.multiView.gridView .gridView__controls{display:block;}
.multiView.gridView .dataRow div label{font-size:.7rem;color:white;letter-spacing:.02rem;display:inline-block;}
.multiView.gridView .gridView__controls .viewFilters {display:block;width:100%;text-align:right;height:40px;}
.multiView.gridView .gridView__controls .viewSorters {display:block;width:100%;text-align:right;height:30px;}

.multiView.gridView .dataRow:hover{cursor:pointer;background-color: rgba(58, 58, 58, 1) !important;animation: scaleUp forwards ease-in-out;animation-duration: .3s;}
.multiView.tableView .dataRow.dataSort:hover{background-color:transparent;}
.multiView.gridView .dataRow.isDemo {background-color: var(--demo) !important;}
.multiView.gridView .dataRow.isPaused {background-color: var(--paused) !important;}
.multiView .dataRow div.data__companyLogo{padding:0px;}
.multiView .dataRow div.data__user{padding:0px;}
.multiView .dataRow div.data__companyLogo .companyIcon {
width: 30px !important;
height: 30px !important;
border-radius:6px !important;
background-color: #transparent !important;
background-repeat:no-repeat;
}
.multiView.gridView .dataRow div.data__companyLogo{padding:1px 0 12px 0;margin:0 auto;}
.multiView.gridView .dataRow div.data__companyLogo .companyIcon {
    width: 60px !important;
    height: 60px !important;
    }

.multiView .dataRow div.data__companyName, .multiView .dataRow div.data__name {
text-align:left !important;
padding-left:8px;
}
.multiView.gridView .dataRow div.data__companyName {text-align:center !important;}
.multiView.gridView .dataRow div.data__companyName span {overflow:initial !important;width:100%;white-space:normal;padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #bbbbbb20;}
.multiView .dataRow div.data__companyName span {
display: block;
text-overflow: ellipsis;
font-size: .9rem;
font-weight: bold;
width: 120px;
overflow: hidden;
white-space: nowrap;
text-indent: 2px;
}
@media screen and (max-width: 580px) {
.multiView.tableView .hideColumnMobile{display:none !important;}
}

/* data list */
.zenDataList{width:100%;}

.zenDataList__element{display:table;border:1px solid #77777750;background-color:#44444440;width:100%;border-radius:8px;margin-bottom:10px;overflow:hidden;position:relative;}

.zenDataList__element:hover{background-color:#44444480;
    box-shadow: 0px 1px 13px 1px rgba(0,0,0,0.85);
    -webkit-box-shadow: 0px 1px 13px 1px rgba(0,0,0,0.85);
    -moz-box-shadow: 0px 1px 13px 1px rgba(0,0,0,0.85);}
.zenDataList__element .itemEditControls{top:16px;}

.zenDataList__element:before{height:100%;width:10px;content:'';position:absolute;top:0px;left:0px;}
.zenDataList.redtab .zenDataList__element:before, .zenDataList__element.redtab:before{background-color:var(--redtab);}
.zenDataList.bluetab .zenDataList__element:before, .zenDataList__element.bluetab:before{background-color:var(--bluetab);}
.zenDataList.greentab .zenDataList__element:before, .zenDataList__element.greentab:before{background-color:var(--greentab);}
.zenDataList.orangetab .zenDataList__element:before, .zenDataList__element.orangetab:before{background-color:var(--orangetab);}
.zenDataList.purpletab .zenDataList__element:before, .zenDataList__element.purpletab:before{background-color:var(--purpletab);}
.zenDataList.cyantab .zenDataList__element:before, .zenDataList__element.cyantab:before{background-color:var(--cyantab);}
.zenDataList.goldtab .zenDataList__element:before, .zenDataList__element.goldtab:before{background-color:var(--goldtab);}
.zenDataList__row{display:table-row;}
.zenDataList__cell{display:table-cell;vertical-align:middle;padding:10px;position:relative;}

.zenDataList__cell:first-child{font-size:2rem;width:116px;text-align:center;padding:10px 0px 10px 10px;}
.data1x2__title{font-size:1.2rem;}
.data1x2__title button{position:relative;top:-4px;}
.data1x2__description{color:grey;}
.zenDataList__cell.cost{font-size:1rem;}
.zenDataList__cell.percent{font-size:1.5rem;}
.zenDataList__cell.value{font-size:1.2rem;}
.zenDataList__cell.name{font-size:1rem;font-weight:bold;}
.zenDataList__cell.status{font-size:1rem;font-weight:bold;}
.zenDataList__cell.alignTop{vertical-align:top;}
.zenDataList__cell.alignBottom{vertical-align:bottom;}
.zenDataList__cell.iconImage img{width:100%;}
.zenDataList__cell. span.dateTime{font-size:.7rem;color:grey;}

.zenDataList__element .itemMeter{position:relative;}
.zenDataList__element.userTaskItem .zenDataList__cell:last-child{width:110px;}
.zenDataList__element.userTaskItem .zenDataList__cell:first-child{position:relative;}
.zenDataList__element.userTaskItem .itemEditControls{top:2px;text-align:left;}
.zenDataList__element.userTaskItem .taskControls{display:inline-block;}
.zenDataList__element.userTaskItem .taskActions {display:inline-block;}

.zenDataList__element.userActionItem .zenDataList__cell:first-child{width:60px;}
.zenDataList__element.userActionItem .zenDataList__cell:last-child{width:110px;}
/* zencare tabs */
.injuryDetailsHeader{display:table;width:100%;height:40px;padding:5px;}
.injuryDetailsHeader .employeeAvatar{display:table-cell;vertical-align:middle;width:30px;}
.injuryDetailsHeader .leftSide{display:table-cell;vertical-align:middle;width:34%;}
.injuryDetailsHeader .centerInfo{display:table-cell;vertical-align:middle;width:33%;text-align:center;}
.injuryDetailsHeader .rightSide{display:table-cell;vertical-align:middle;width:33%;text-align:right;}
.injuryDetailsHeader span.avatar{top:1px;left:2px;display:inline-block;width:30px;height:30px;background-size:cover;border-radius:50%;}
.injuryDetailsHeader span{position:relative;display:inline-block;}
.injuryDetailsHeader span.employeeName{padding-left:5px;color:white;overflow:hidden;text-overflow:ellipsis;max-width:200px;}
.injuryDetailsHeader span.employeeStatus{color:white;}
.injuryDetailsHeader span.litigationStatus{color:red;font-weight:900;position:relative;top:4px;}
.injuryDetailsHeader span.demoStatus{color:#0060dd;font-weight:900;position:relative;top:4px;}
.injuryDetailsHeader span.closedStatus{color:green;font-weight:900;position:relative;top:4px;}

.uploadedMedia span.mediaDownload{bottom:4px;right:5px;}
.uploadedMedia span.mediaDownload:after{font-family:'zenjuriesfont';font-size:1.2rem;content:'\e01e';color:white;opacity:.5;}
.uploadedMedia span.mediaDownload:hover:after{color:rgb(0, 204, 255);opacity:1;}


.zenTabs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    padding-top: 7px;
    padding-left: 5px;
    border-bottom: 5px solid transparent;
    overflow: hidden;
}

.zenTabs li {
    display: inline-block;
    text-align: center;
    margin-right: -4px;
    padding: 0 1px;
}

.zenTabs ul.sixTabs li {
    width: 16.5%;
}
.zenTabs ul.fiveTabs li {
    width: 20%;
}

.zenTabs ul.fourTabs li {
    width: 25%;
}

.zenTabs ul.sevenTabs li {
    width: 14.28%;
}

.zenTabs ul.eightTabs li {
    width: 12.5%;
}

.zenTabs ul.threeTabs li {
    width: 33.3%;
}

.zenTabs ul.twoTabs li {
    width: 50%;
}

.zenTabs li a {
    width:100%;
    position: relative;
    top: 4px;
    display: block;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    height: 35px;
    padding: 5px 14px 0 14px;
    border: 0;
    background-color: var(--zc-tabs);
    cursor: pointer;
    white-space:nowrap;
}

.zenTabs li a:hover {
    border: 0;
    top: 2px;
    background-color: var(--zc-tabs-hover);
}

.zenTabs li a span {
    text-indent: 2px;
    color: var(--zc-tabs-text);
    white-space:nowrap;
    font-weight: bold;
}

.zenTabs li a .icon {
    color: var(--zc-tabs-icon);
    position: relative;
    top: 3px;
    left: -3px;
    display:inline-block;
}

.zenTabs.overview ul {
    border-color: var(--overview);
}

.zenTabs.overview li.overview a .icon {
    color: var(--overview-icon);
}

.zenTabs.overview li.overview a span {
    color: white;
}

.zenTabs.overview li.overview a {
    top: 0px;
    background-color: var(--overview);
}

.zenTabs.zenguide ul {
    border-color: var(--zenguide);
}

.zenTabs.zenguide li.zenguide a .icon {
    color: var(--zenguide-icon);
}

.zenTabs.zenguide li.zenguide a span {
    color: white;
}

.zenTabs.zenguide li.zenguide a {
    top: 0px;
    background-color: var(--zenguide);
}

.zenTabs.communicate ul {
    border-color: var(--communicate);
}

.zenTabs.communicate li.communicate a .icon {
    color: var(--communicate-icon);
}

.zenTabs.communicate li.communicate a span {
    color: white;
}

.zenTabs.communicate li.communicate a {
    top: 0px;
    background-color: var(--communicate);
}

.zenTabs.tasks ul {
    border-color: var(--tasks);
}

.zenTabs.tasks li.tasks a .icon {
    color: var(--tasks-icon);
}

.zenTabs.tasks li.tasks a span {
    color: white;
}

.zenTabs.tasks li.tasks a {
    top: 0px;
    background-color: var(--tasks);
}

.zenTabs.team ul {
    border-color: var(--team);
}

.zenTabs.team li.team a .icon {
    color: var(--team-icon);
}

.zenTabs.team li.team a span {
    color: white;
}

.zenTabs.team li.team a {
    top: 0px;
    background-color: var(--team);
}

.zenTabs.customData ul {
    border-color: var(--customData);
}

.zenTabs.customData li.customData a .icon {
    color: var(--customData-icon);
}

.zenTabs.customData li.customData a span {
    color: white;
}

.zenTabs.customData li.customData a {
    top: 0px;
    background-color: var(--customData);
}

.zenTabs.claimcosts ul {
    border-color: var(--claimcosts);
}

.zenTabs.claimcosts li.claimcosts a .icon {
    color: var(--claimcosts-icon);
}

.zenTabs.claimcosts li.claimcosts a span {
    color: white;
}

.zenTabs.claimcosts li.claimcosts a {
    top: 0px;
    background-color: var(--claimcosts);
}

.zenTabs.appointments ul {
    border-color: var(--appointments);
}

.zenTabs.appointments li.appointments a .icon {
    color: var(--appointments-icon);
}

.zenTabs.appointments li.appointments a span {
    color: white;
}

.zenTabs.appointments li.appointments a {
    top: 0px;
    background-color: var(--appointments);
}

.zenTabs.files ul {
    border-color: var(--files);
}

.zenTabs.files li.files a .icon {
    color: var(--files-icon);
}

.zenTabs.files li.files a span {
    color: white;
}

.zenTabs.files li.files a {
    top: 0px;
    background-color: var(--files);
}

.zenTabs.billingaddress ul {
    border-color: var(--billingaddress);
}

.zenTabs.billingaddress li.billingaddress a .icon {
    color: var(--billingaddress-icon);
}

.zenTabs.billingaddress li.billingaddress a span {
    color: white;
}

.zenTabs.billingaddress li.billingaddress a {
    top: 0px;
    background-color: var(--billingaddress);
}

.zenTabs.billingtype ul {
    border-color: var(--billingtype);
}

.zenTabs.billingtype li.billingtype a .icon {
    color: var(--billingtype-icon);
}

.zenTabs.billingtype li.billingtype a span {
    color: white;
}

.zenTabs.billingtype li.billingtype a {
    top: 0px;
    background-color: var(--billingtype);
}

.zenTabs.bluetab ul {
    border-color: var(--bluetab);
}

.zenTabs.bluetab li.bluetab a .icon {
    color: var(--bluetab-icon);
}

.zenTabs.bluetab li.bluetab a span {
    color: white;
}

.zenTabs.bluetab li.bluetab a {
    top: 0px;
    background-color: var(--bluetab);
}

.zenTabs.greentab ul {
    border-color: var(--greentab);
}

.zenTabs.greentab li.greentab a .icon {
    color: var(--greentab-icon);
}

.zenTabs.greentab li.greentab a span {
    color: white;
}

.zenTabs.greentab li.greentab a {
    top: 0px;
    background-color: var(--greentab);
}

.zenTabs.redtab ul {
    border-color: var(--redtab);
}

.zenTabs.redtab li.redtab a .icon {
    color: var(--redtab-icon);
}

.zenTabs.redtab li.redtab a span {
    color: white;
}

.zenTabs.redtab li.redtab a {
    top: 0px;
    background-color: var(--redtab);
}

.zenTabs__content{background-color:#00000050;padding:12px;border:1px solid black;margin-bottom:20px;}

.zecaretabContent {
    width: 100%;
    padding-top: 20px;
    min-height: 500px;
}

#overviewTab, #zenguideTab, #communicateTab, #teamTab, #claimcostsTab, #appointmentsTab, #filesTab, .zenTabContent{
    display: none;
    animation: fadeIn;
    animation-duration: 1s;
}

@media screen and (max-width: 1000px) {
    .zenTabs li a span {
        font-size: .8rem;
    }
}

@media screen and (max-width: 880px) {
    .zenTabs li a span {
        font-size: .7rem;
    }

    .zenTabs li a .icon {
        display: none;
    }
}

@media screen and (max-width: 580px) {
    .zenTabs li a span {
        display: none;
    }

    .zenTabs li a .icon {
        display: block;
        top: 0;
        left: 0;
        font-size: 1.6rem;
    }
}

/* new tabs */
.tabSection{padding-bottom:40px;}
ul.tabSection__tabs{display:flex;flex-wrap:nowrap;justify-content:center;width:100%;list-style:none;margin:0;padding:0;position:relative;}
ul.tabSection__tabs li{padding:5px 2px 0 2px;flex-grow:1;}
ul.tabSection__tabs li.selected{padding:0 2px 0 2px;}
ul.tabSection__tabs li:hover{padding:5px 2px 0 2px;}
ul.tabSection__tabs li.selected:hover{padding:0 2px 0 2px;}
ul.tabSection__tabs li a{display:block;padding:6px 12px;background-color:var(--zentab);text-align:center;border-top-right-radius:6px;border-top-left-radius:6px;height:100%;cursor:pointer;text-decoration:none;color:var(--zentab-icon);}
ul.tabSection__tabs li a:hover{background-color:var(--zentab-h);}
ul.tabSection__tabs li a:hover .icon{animation: headShake;animation-duration: .5s;color:var(--zentab-icon);}
ul.tabSection__tabs li a span.tabLabel{padding-left:5px;}
.tabSection__tabContent{border-bottom-right-radius:8px;border-bottom-left-radius:8px;min-height:200px;border:1px solid;border-top:none;}
body.dark .tabSection__tabContent{background-color:var(--stdpanelt-dark);border-color:var(--sectionpanelo-dark);}
body.light .tabSection__tabContent{background-color:var(--stdpanelt-light);border-color:var(--sectionpanelo-light);}
.tabSection__tabContent .tabContent__content{padding:20px;display:none;position:relative;}
.tabSection__tabContent .tabContent__content .tabContent__container{padding:40px;}
ul.tabSection__tabs li.tabColorLine{position:absolute;bottom:-3px;height:3px;width:100%;background-color:var(--zentab);}

ul.tabSection__tabs li.hometab.selected {border-color:var(--zentab);}
ul.tabSection__tabs li.hometab.selected a .icon{color:var(--zentab-icon);}
ul.tabSection__tabs li.hometab.selected ~ li.tabColorLine,
ul.tabSection__tabs li.hometab.selected a,
ul.tabSection__tabs li.hometab.selected a,
ul.tabSection__tabs li.hometab.selected a:hover{background-color:var(--zentab);}
/* custom tab colors */
ul.tabSection__tabs li.employee.selected {border-color:var(--employee);}
ul.tabSection__tabs li.employee.selected a .icon{color:var(--employee-icon);}
ul.tabSection__tabs li.employee.selected ~ li.tabColorLine,
ul.tabSection__tabs li.employee.selected a,
ul.tabSection__tabs li.employee.selected a,
ul.tabSection__tabs li.employee.selected a:hover{background-color:var(--employee);}
/* // */
ul.tabSection__tabs li.goals.selected {border-color:var(--goals);}
ul.tabSection__tabs li.goals.selected a .icon{color:var(--goals-icon);}
ul.tabSection__tabs li.goals.selected ~ li.tabColorLine,
ul.tabSection__tabs li.goals.selected a,
ul.tabSection__tabs li.goals.selected a,
ul.tabSection__tabs li.goals.selected a:hover{background-color:var(--goals);}
/* // */
ul.tabSection__tabs li.communicate.selected {border-color:var(--communicate);}
ul.tabSection__tabs li.communicate.selected a .icon{color:var(--communicate-icon);}
ul.tabSection__tabs li.communicate.selected ~ li.tabColorLine,
ul.tabSection__tabs li.communicate.selected a,
ul.tabSection__tabs li.communicate.selected a,
ul.tabSection__tabs li.communicate.selected a:hover{background-color:var(--communicate);}
/* // */
ul.tabSection__tabs li.team.selected {border-color:var(--team);}
ul.tabSection__tabs li.team.selected a .icon{color:var(--team-icon);}
ul.tabSection__tabs li.team.selected ~ li.tabColorLine,
ul.tabSection__tabs li.team.selected a,
ul.tabSection__tabs li.team.selected a,
ul.tabSection__tabs li.team.selected a:hover{background-color:var(--team);}
/* // */
ul.tabSection__tabs li.claimcosts.selected {border-color:var(--claimcosts);}
ul.tabSection__tabs li.claimcosts.selected a .icon{color:var(--claimcosts-icon);}
ul.tabSection__tabs li.claimcosts.selected ~ li.tabColorLine,
ul.tabSection__tabs li.claimcosts.selected a,
ul.tabSection__tabs li.claimcosts.selected a,
ul.tabSection__tabs li.claimcosts.selected a:hover{background-color:var(--claimcosts);}
/* // */
ul.tabSection__tabs li.appointments.selected {border-color:var(--appointments);}
ul.tabSection__tabs li.appointments.selected a .icon{color:var(--appointments-icon);}
ul.tabSection__tabs li.appointments.selected ~ li.tabColorLine,
ul.tabSection__tabs li.appointments.selected a,
ul.tabSection__tabs li.appointments.selected a,
ul.tabSection__tabs li.appointments.selected a:hover{background-color:var(--appointments);}
/* // */
ul.tabSection__tabs li.files.selected {border-color:var(--files);}
ul.tabSection__tabs li.files.selected a .icon{color:var(--files-icon);}
ul.tabSection__tabs li.files.selected ~ li.tabColorLine,
ul.tabSection__tabs li.files.selected a,
ul.tabSection__tabs li.files.selected a,
ul.tabSection__tabs li.files.selected a:hover{background-color:var(--files);}
/* // */
ul.tabSection__tabs li.billingaddress.selected {border-color:var(--billingaddress);}
ul.tabSection__tabs li.billingaddress.selected a .icon{color:var(--billingaddress-icon);}
ul.tabSection__tabs li.billingaddress.selected ~ li.tabColorLine,
ul.tabSection__tabs li.billingaddress.selected a,
ul.tabSection__tabs li.billingaddress.selected a,
ul.tabSection__tabs li.billingaddress.selected a:hover{background-color:var(--billingaddress);}
/* // */
ul.tabSection__tabs li.billingtype.selected {border-color:var(--billingtype);}
ul.tabSection__tabs li.billingtype.selected a .icon{color:var(--billingtype-icon);}
ul.tabSection__tabs li.billingtype.selected ~ li.tabColorLine,
ul.tabSection__tabs li.billingtype.selected a,
ul.tabSection__tabs li.billingtype.selected a,
ul.tabSection__tabs li.billingtype.selected a:hover{background-color:var(--billingtype);}
/* // */
ul.tabSection__tabs li.billingtype.selected {border-color:var(--billingtype);}
ul.tabSection__tabs li.billingtype.selected a .icon{color:var(--billingtype-icon);}
ul.tabSection__tabs li.billingtype.selected ~ li.tabColorLine,
ul.tabSection__tabs li.billingtype.selected a,
ul.tabSection__tabs li.billingtype.selected a,
ul.tabSection__tabs li.billingtype.selected a:hover{background-color:var(--billingtype);}
/* // */
ul.tabSection__tabs li.billingtype.selected {border-color:var(--billingtype);}
ul.tabSection__tabs li.billingtype.selected a .icon{color:var(--billingtype-icon);}
ul.tabSection__tabs li.billingtype.selected ~ li.tabColorLine,
ul.tabSection__tabs li.billingtype.selected a,
ul.tabSection__tabs li.billingtype.selected a,
ul.tabSection__tabs li.billingtype.selected a:hover{background-color:var(--billingtype);}
/* // */
ul.tabSection__tabs li.redtab.selected {border-color:var(--redtab);}
ul.tabSection__tabs li.redtab.selected a .icon{color:var(--redtab-icon);}
ul.tabSection__tabs li.redtab.selected ~ li.tabColorLine,
ul.tabSection__tabs li.redtab.selected a,
ul.tabSection__tabs li.redtab.selected a,
ul.tabSection__tabs li.redtab.selected a:hover{background-color:var(--redtab);}
/* // */
ul.tabSection__tabs li.bluetab.selected {border-color:var(--bluetab);}
ul.tabSection__tabs li.bluetab.selected a .icon{color:var(--bluetab-icon);}
ul.tabSection__tabs li.bluetab.selected ~ li.tabColorLine,
ul.tabSection__tabs li.bluetab.selected a,
ul.tabSection__tabs li.bluetab.selected a,
ul.tabSection__tabs li.bluetab.selected a:hover{background-color:var(--bluetab);}
/* // */
ul.tabSection__tabs li.greentab.selected {border-color:var(--greentab);}
ul.tabSection__tabs li.greentab.selected a .icon{color:var(--greentab-icon);}
ul.tabSection__tabs li.greentab.selected ~ li.tabColorLine,
ul.tabSection__tabs li.greentab.selected a,
ul.tabSection__tabs li.greentab.selected a,
ul.tabSection__tabs li.greentab.selected a:hover{background-color:var(--greentab);}
/* // */
ul.tabSection__tabs li.orangetab.selected {border-color:var(--orangetab);}
ul.tabSection__tabs li.orangetab.selected a .icon{color:var(--orangetab-icon);}
ul.tabSection__tabs li.orangetab.selected ~ li.tabColorLine,
ul.tabSection__tabs li.orangetab.selected a,
ul.tabSection__tabs li.orangetab.selected a,
ul.tabSection__tabs li.orangetab.selected a:hover{background-color:var(--orangetab);}
/* // */
ul.tabSection__tabs li.purpletab.selected {border-color:var(--purpletab);}
ul.tabSection__tabs li.purpletab.selected a .icon{color:var(--purpletab-icon);}
ul.tabSection__tabs li.purpletab.selected ~ li.tabColorLine,
ul.tabSection__tabs li.purpletab.selected a,
ul.tabSection__tabs li.purpletab.selected a,
ul.tabSection__tabs li.purpletab.selected a:hover{background-color:var(--purpletab);}
/* // */
ul.tabSection__tabs li.cyantab.selected {border-color:var(--cyantab);}
ul.tabSection__tabs li.cyantab.selected a .icon{color:var(--cyantab-icon);}
ul.tabSection__tabs li.cyantab.selected ~ li.tabColorLine,
ul.tabSection__tabs li.cyantab.selected a,
ul.tabSection__tabs li.cyantab.selected a,
ul.tabSection__tabs li.cyantab.selected a:hover{background-color:var(--cyantab);}
/* // */
ul.tabSection__tabs li.goldtab.selected {border-color:var(--goldtab);}
ul.tabSection__tabs li.goldtab.selected a .icon{color:var(--goldtab-icon);}
ul.tabSection__tabs li.goldtab.selected ~ li.tabColorLine,
ul.tabSection__tabs li.goldtab.selected a,
ul.tabSection__tabs li.goldtab.selected a,
ul.tabSection__tabs li.goldtab.selected a:hover{background-color:var(--goldtab);}
/* // */
ul.tabSection__tabs li.greytab.selected {border-color:var(--greytab);}
ul.tabSection__tabs li.greytab.selected a .icon{color:var(--greytab-icon);}
ul.tabSection__tabs li.greytab.selected ~ li.tabColorLine,
ul.tabSection__tabs li.greytab.selected a,
ul.tabSection__tabs li.greytab.selected a,
ul.tabSection__tabs li.greytab.selected a:hover{background-color:var(--greytab);}
@media screen and (max-width: 880px) {
    ul.tabSection__tabs li a span.tabLabel {font-size: .7rem;}
    ul.tabSection__tabs li a .icon{font-size: .7rem;}
}
@media screen and (max-width: 580px) {
    ul.tabSection__tabs li a span.tabLabel{display:none;}
    ul.tabSection__tabs li a .icon{font-size: 1.2rem;}
}

/* injury location picker */

.injuryLocationPicker {
    width: 100%;
}

.injuryLocationPicker .pickerContainer {
    position: relative;
    width: 500px;
    height: 577px;
    margin: 0 auto;
}

.injuryLocationPicker.medium .pickerContainer {
    width: 380px;
    height: 439px;
}

.injuryLocationPicker.small .pickerContainer {
    width: 180px;
    height: 220px;
}

@media screen and (max-width: 580px) {
    .injuryLocationPicker.medium .pickerContainer {
        transform: scale(.8);
        margin:0;
        width:100%;
    }
    .pickerContainer{
        width: 380px;
        height: 439px;
    }
}

.injuryLocationPicker .layer {
    position: absolute;
    top: 0px;
    left: 0px;
    background-position: center center;
    background-size: contain;
    background-repeat:no-repeat;
    width: 100%;
    height: 100%;
}

.injuryLocationPicker .layer.base {
    background-image: url('/images/injurypicker/body_picker.png');
}

.injuryLocationPicker .layer.systematic {
    display: none;
    background-image: url('/images/injurypicker/body_picker_systematic.png');
}

.injuryLocationPicker .layer.head {
    display: none;
    background-image: url('/images/injurypicker/body_picker_head.png');
}

.injuryLocationPicker .layer.neck {
    display: none;
    background-image: url('/images/injurypicker/body_picker_neck.png');
}

.injuryLocationPicker .layer.upper {
    display: none;
    background-image: url('/images/injurypicker/body_picker_upper.png');
}

.injuryLocationPicker .layer.r-arm {
    display: none;
    background-image: url('/images/injurypicker/body_picker_r-arm.png');
}

.injuryLocationPicker .layer.l-arm {
    display: none;
    background-image: url('/images/injurypicker/body_picker_l-arm.png');
}

.injuryLocationPicker .layer.trunk {
    display: none;
    background-image: url('/images/injurypicker/body_picker_trunk.png');
}

.injuryLocationPicker .layer.lower {
    display: none;
    background-image: url('/images/injurypicker/body_picker_lower.png');
}

.injuryLocationPicker .layer.r-leg {
    display: none;
    background-image: url('/images/injurypicker/body_picker_r-leg.png');
}

.injuryLocationPicker .layer.l-leg {
    display: none;
    background-image: url('/images/injurypicker/body_picker_l-leg.png');
}

.injuryLocationPicker .action {
    width: 100%;
    position: absolute;
    text-align: center;
    white-space: nowrap;
}

.injuryLocationPicker .action button {
    background-color: rgba(0, 0, 0, .6);
}

.injuryLocationPicker .action button:hover {
    background-color: rgba(0, 0, 0, 1);
}

.injuryLocationPicker .action button.set {
    background-color: red !important;
}

.injuryLocationPicker .action.systematic {
    top: 24%;
    text-align: left;
}

.injuryLocationPicker .action.viewAll {
    top: 7%;
    text-align: right;
}

.injuryLocationPicker .action.head {
    top: 16%;
}

.injuryLocationPicker .action.neck {
    top: 31%;
}

.injuryLocationPicker .action.upper {
    top: 61%;
    text-align: left;
}

.injuryLocationPicker .action.trunk {
    top: 50%;
}

.injuryLocationPicker .action.arms {
    top: 39%;
}

.injuryLocationPicker .action.arms span {
    display: inline-block;
    width: 25%;
}

.injuryLocationPicker .action.lower {
    top: 92%;
}

.injuryLocationPicker .action.legs {
    top: 82%;
}

.injuryLocationPicker .action.legs span {
    display: inline-block;
    width: 25%;
}

.divCloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.divCloud div {
    flex: 4;
    font-size: .9rem;
}

.buttonCloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.buttonCloud button {
    flex: 4;
    font-size: .9rem;
}

.buttonCloud button.selected {
    background-color: red;
}

.buttonCloud.small button {
    font-size: .6rem !important;
    padding: .14rem .2rem !important;
}

.buttonCloud.showValues button span {font-size:.7rem;color:cyan;font-weight:900;opacity:.8;}
.buttonCloud.showValues button span:before{content:"|";color:white;padding:0 5px;}

.selectPolicyholder button span {
    position: relative;
    top: -4px;
}

.selectedInjuryLocations {
    width: 80%;
    text-align: center;
    font-size: 1rem;
    border: 1px dotted grey;
    border-radius: 10px;
    padding: 2rem;
    margin: 20px auto;
    position: relative;
}

.selectedInjuryLocations button.reset {
    position: absolute;
    top: 3px;
    right: 1px;
}

.selectedInjuryLocations span {
    font-size: 1rem;
}

/* injury type picker */

.injuryTypePicker {
    width: 90%;
    margin: 0 auto;
}

.injuryTypePicker .buttonCloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.injuryTypePicker .buttonCloud button {
    flex: 4;
}

.injuryTypePicker .buttonCloud button.selected {
    background-color: red;
}

@media screen and (max-width: 580px) {
    .injuryTypePicker .buttonCloud button {
        margin-bottom: 5px;
    }
}

/* appointments layout */

.zAppointments {
    width: 100%;
    padding-top: 20px;
}

.zAppointments .appointmentListControls {
    width: 100%;
    text-align: center;
    padding: 12px 0;
}

.zAppointments .myAppointments.noList {
    display: none;
}

.zAppointments .myAppointments.hasList {
    display: block;
}

.zAppointments .pastAppointments.noList {
    display: none;
}

.zAppointments .pastAppointments.hasList {
    display: block;
}

.zAppointments .myAppointments span.default,
.zAppointments .pastAppointments span.default {
    display: block;
    padding: 40px 0;
    width: 100%;
    text-align: center;
    font-style: italic;
    color: grey;
}

.appointmentTitle {
    font-weight: 400;
    font-size: 1.1rem;
    color: grey;
}

.appointmentTitle span {
    font-weight: 900;
    color: white;
}

.apptCard {
    position: relative;
    background-color: #222222;
    border-radius: 3px;
    margin-bottom: 20px;
    font-weight: 400;
}

.apptCard:hover {
    background-color: #343434;
    box-shadow: 0px 0px 14px black;
}

.myAppointments .apptCard {}

.apptHeader {
    height: 30px;
    width: 100%;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 3px;
}

.myAppointments .apptCard .apptHeader {
    background-color: #b71e4c;
}

.myAppointments .apptCard:hover .apptHeader {
    background-color: #de2a60;
}

.myAppointments .apptCard .apptHeader.followUp {
    background-color: #5511cc;
}

.myAppointments .apptCard:hover .apptHeader.followUp {
    background-color: #6611cc;
}

.pastAppointments .apptCard .apptHeader {
    background-color: #2e4587;
}

.pastAppointments .apptCard:hover .apptHeader {
    background-color: #3c5bb0;
}

.apptBody {
    padding: 18px 18px 70px 18px;
}

.apptIcon {
    float: left;
    font-size: 1.2rem;
    padding-left: 3px;
}

.apptTime {
    float: right;
    font-weight: 900;
    font-size: .9rem;
    padding-right: 3px;
}

.apptDoctor {
    color: white;
}

.apptPhone {
    color: grey;
}

.apptEmail a {
    color: #b6b6b6;
}

.apptEmail a:hover {
    color: white;
}

.apptControls {
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: max-content;
}

.apptControls button {
    font-size: .8rem;
    padding: 2px 8px 4px 6px;
    display: block;
    margin-bottom: 8px;
}

.apptControls button:hover {
    box-shadow: 0px 0px 5px black;
}

.datePickerPlaceholder {
    width: 460px;
    height: 260px;
}

@media screen and (max-width: 767px) {
    .datePickerPlaceholder {
        width: 400px;
        height: 320px;
    }
}

@media screen and (max-width: 580px) {
    .datePickerPlaceholder {
        width: 280px;
        height: 340px;
    }
}


.itemEditControls{position:absolute;top:0px;right:5px;text-align:right;z-index:999;}
.itemMeter{position:absolute;top:0px;right:5px;text-align:right;width:100px;background-color:black;height:30px;border-radius:5px;overflow:hidden;}
.itemMeter .percentMeter{width:100%;height:100%;}
.itemMeter .percentMeter .meterOverlay{position:absolute;top:0px;right:0px;height:100%;width:100%;padding-top:3px;width:100%;text-align:center;}
.zenDataList__element .itemMeter .percentMeter .meterOverlay:after{font-size:.8rem;font-weight:900;}
.zenDataList__element.at0 .itemMeter .percentMeter{background-color:black;}
.zenDataList__element.at0 .itemMeter .percentMeter .meterOverlay:after{content:'not started';}
.zenDataList__element.at10 .itemMeter .percentMeter{background-color:#743838;width:10%;}
.zenDataList__element.at10 .itemMeter .percentMeter .meterOverlay:after{content:'10% complete';}
.zenDataList__element.at20 .itemMeter .percentMeter{background-color:#ad3719;width:20%;}
.zenDataList__element.at20 .itemMeter .percentMeter .meterOverlay:after{content:'20% complete';}
.zenDataList__element.at30 .itemMeter .percentMeter{background-color:#a56419;width:30%;}
.zenDataList__element.at30 .itemMeter .percentMeter .meterOverlay:after{content:'30% complete';}
.zenDataList__element.at40 .itemMeter .percentMeter{background-color:#b49112;width:40%;}
.zenDataList__element.at40 .itemMeter .percentMeter .meterOverlay:after{content:'40% complete';}
.zenDataList__element.at50 .itemMeter .percentMeter{background-color:#a58f11;width:50%;}
.zenDataList__element.at50 .itemMeter .percentMeter .meterOverlay:after{content:'50% complete';}
.zenDataList__element.at60 .itemMeter .percentMeter{background-color:#48770a;width:60%;}
.zenDataList__element.at60 .itemMeter .percentMeter .meterOverlay:after{content:'60% complete';}
.zenDataList__element.at70 .itemMeter .percentMeter{background-color:#4c7a0f;width:70%;}
.zenDataList__element.at70 .itemMeter .percentMeter .meterOverlay:after{content:'70% complete';}
.zenDataList__element.at80 .itemMeter .percentMeter{background-color:#188b0e;width:80%;}
.zenDataList__element.at80 .itemMeter .percentMeter .meterOverlay:after{content:'80% complete';}
.zenDataList__element.at90 .itemMeter .percentMeter{background-color:#1a6e13;width:90%;}
.zenDataList__element.at90 .itemMeter .percentMeter .meterOverlay:after{content:'90% complete';}
.zenDataList__element.at100 .itemMeter .percentMeter{background-color:green;width:100%;}
.zenDataList__element.at100 .itemMeter .percentMeter .meterOverlay:after{content:'complete';}



.zenDataList__element.toDeploy .itemMeter .percentMeter{background-color:purple;width:100%;}
.zenDataList__element.toDeploy .itemMeter .percentMeter .meterOverlay:after{content:'ready';}
.zenDataList__element.isLive .itemMeter .percentMeter{background-color:#124886;width:100%;}
.zenDataList__element.isLive .itemMeter .percentMeter .meterOverlay:after{content:'deployed';}
.zenDataList__element.inQA .itemMeter .percentMeter{background-color:#aa590e;width:100%;}
.zenDataList__element.inQA .itemMeter .percentMeter .meterOverlay:after{content:'in QA';}
.zenDataList__element.QApass .itemMeter .percentMeter{background-color:#0e5517;width:100%;}
.zenDataList__element.QApass .itemMeter .percentMeter .meterOverlay:after{content:'QA passed';}
.zenDataList__element.QAfail .itemMeter .percentMeter{background-color:#4d100c;width:100%;}
.zenDataList__element.QAfail .itemMeter .percentMeter .meterOverlay:after{content:'QA fail';}

/* document lists */
.documentList{margin-bottom:12px;}
.documentList ul{list-style:none;padding:0;margin:0;}
.documentList li{padding:5px;position:relative;}
.documentList li.isInjuryFile:before{position:absolute;top:4px;left:4px;width:24px;height:24px;font-family:'zenjuriesfont';font-size:1.1rem;content:'\e0ed';color:red;z-index:99;}
.documentList li a{display:block;text-decoration:none;padding:5px;border-radius:6px;border:1px solid transparent;}
.documentList li a:hover{border:1px solid #ffffff50;background-color:#00000020;}
.documentList li span.documentIcon{position:absolute;width:32px;height:32px;top:12px;left:12px;}
.documentList li span.documentIcon img{width:100%;}
.documentList li span.documentTitle{text-indent:40px;display:block;font-weight:900;color:white;}
.documentList li span.documentDate{display:inline-block;color:white;font-weight:400;font-size:.9rem;}
.documentList li span.documentDesc{text-indent:40px;display:block;color:grey;}
.documentList li .itemEditControls{opacity:.4;top:16px;right:12px;}
.documentList li:hover .itemEditControls{opacity:1;}


/* progress meter circle */
.progressMeter {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto;
    border-radius: 50%;
}

.progressMeter.small {
    width: 40px;
    height: 40px;
    top: 1px;
}

.progressMeter.mini {
    width: 30px;
    height: 30px;
    top: 1px;
}

.progressMeter.inline {
    display: inline-block;
}

circle.pm {
    stroke-dasharray: 0 100;
}

@keyframes toRedBG {
    from {
        background-color: #006a00;
    }

    to {
        background-color: #800000;
    }
}

@keyframes toOrange2BG {
    from {
        background-color: #006a00;
    }

    to {
        background-color: #801300;
    }
}

@keyframes toOrange1BG {
    from {
        background-color: #006a00;
    }

    to {
        background-color: #805300;
    }
}

@keyframes toYellow2BG {
    from {
        background-color: #006a00;
    }

    to {
        background-color: #806c00;
    }
}

@keyframes toYellow1BG {
    from {
        background-color: #006a00;
    }

    to {
        background-color: #7c8000;
    }
}

@keyframes toGreen2BG {
    from {
        background-color: #006a00;
    }

    to {
        background-color: #598000;
    }
}

@keyframes toGreen1BG {
    from {
        background-color: #006a00;
    }

    to {
        background-color: #368000;
    }
}

@keyframes toRedFG {
    from {
        stroke: #3cff02;
    }

    to {
        stroke: #f00000;
    }
}

@keyframes toOrange2FG {
    from {
        stroke: #3cff02;
    }

    to {
        stroke: #f03000;
    }
}

@keyframes toOrange1FG {
    from {
        stroke: #3cff02;
    }

    to {
        stroke: #f07e00;
    }
}

@keyframes toYellow2FG {
    from {
        stroke: #3cff02;
    }

    to {
        stroke: #f0ba00;
    }
}

@keyframes toYellow1FG {
    from {
        stroke: #3cff02;
    }

    to {
        stroke: #f0cc00;
    }
}

@keyframes toGreen2FG {
    from {
        stroke: #3cff02;
    }

    to {
        stroke: #96d700;
    }
}

@keyframes toGreen1FG {
    from {
        stroke: #3cff02;
    }

    to {
        stroke: #14cc00;
    }
}

@keyframes status-1 {
    from {
        stroke-dasharray: 0, 314;
    }

    to {
        stroke-dasharray: 44.9, 314;
    }
}

@keyframes status-2 {
    from {
        stroke-dasharray: 0, 314;
    }

    to {
        stroke-dasharray: 89.8, 314;
    }
}

@keyframes status-3 {
    from {
        stroke-dasharray: 0, 314;
    }

    to {
        stroke-dasharray: 149.4, 314;
    }
}

@keyframes status-4 {
    from {
        stroke-dasharray: 0, 314;
    }

    to {
        stroke-dasharray: 179.6, 314;
    }
}

@keyframes status-5 {
    from {
        stroke-dasharray: 0, 314;
    }

    to {
        stroke-dasharray: 224.51, 314;
    }
}

@keyframes status-6 {
    from {
        stroke-dasharray: 0, 314;
    }

    to {
        stroke-dasharray: 269.4, 314;
    }
}

@keyframes status-7 {
    from {
        stroke-dasharray: 0, 314;
    }

    to {
        stroke-dasharray: 312, 314;
    }
}

@keyframes status-good {
    from {
        stroke-dasharray: 0, 314;
    }

    to {
        stroke-dasharray: 90, 314;
    }
}

.progressMeter circle.pm {
    fill: transparent;
    stroke: #0074d9;
    stroke-width: 100;
    stroke-dasharray: 0, 100;
    transition: all 2s ease;
}

.progressMeter svg {
    margin: 0 auto;
    transform: rotate(-90deg);
    background: transparent;
    border-radius: 50%;
    display: block;
}

.progressMeter .overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 16%;
}

.progressMeter .overlay .avatar {
    width: 100%;
    height: 100%;
    background-color: grey;
    background-size: contain;
    background-position: center center;
    border-radius: 50%;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.42);
}

.progressMeter .overlay span.largeNumber {
    display: block;
    font-size: 2.5rem;
    padding-top: 22%;
    font-weight: 900;
}

.progressMeter.status1 circle.pm {
    animation: status-1 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.status2 circle.pm {
    animation: status-2 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.status3 circle.pm {
    animation: status-3 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.status4 circle.pm {
    animation: status-4 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.status5 circle.pm {
    animation: status-5 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.status6 circle.pm {
    animation: status-6 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.status7 circle.pm {
    animation: status-7 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.timeLv7 {
    animation: toRedBG 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.timeLv7 circle.pm {
    animation: toRedFG 2s ease, status-7 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.timeLv6 {
    animation: toOrange2BG 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.timeLv6 circle.pm {
    animation: toOrange2FG 2s ease, status-6 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.timeLv5 {
    animation: toOrange1BG 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.timeLv5 circle.pm {
    animation: toOrange1FG 2s ease, status-5 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.timeLv4 {
    animation: toYellow2BG 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.timeLv4 circle.pm {
    animation: toYellow2FG 2s ease, status-4 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.timeLv3 {
    animation: toYellow1BG 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.timeLv3 circle.pm {
    animation: toYellow1FG 2s ease, status-3 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.timeLv2 {
    animation: toGreen2BG 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.timeLv2 circle.pm {
    animation: toGreen2FG 2s ease, status-2 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.timeLv1 {
    animation: toGreen1BG 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.timeLv1 circle.pm {
    animation: toGreen1FG 2s ease, status-1 2s ease;
    animation-fill-mode: forwards;
}

.progressMeter.normal circle.pm {
    stroke: var(--normalblue);
}

.progressMeter.critical circle.pm {
    stroke: var(--critical);
}

.progressMeter.alert circle.pm {
    stroke: var(--alert);
}

.progressMeter.complete circle.pm {
    stroke: var(--complete);
}

.progressMeter.statusGood circle.pm {
    animation: status-good 2s ease;
    animation-fill-mode: forwards;
}

/* chartGrid */

.zenGrid{display:grid;padding:1rem;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));grid-gap: 1rem;}
.zenGrid.col1{grid-template-columns:repeat(auto-fit, minmax(680px, 1fr));grid-gap: 0rem;padding:1rem 1.1rem 1rem 1rem;}
.zenGrid.col2{grid-template-columns:repeat(auto-fit, minmax(380px, 1fr));grid-gap: 1rem;}
.zenGrid.col4{grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));grid-gap: 1rem;}
.zenGrid.col5{grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));grid-gap: 1rem;}
.zenGrid.col6{grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));grid-gap: 1rem;}
.zenGrid.col7{grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));grid-gap: 1rem;}
.zenGrid__element{display:grid;position:relative;}
.zenGrid__element.padded{display:grid;width:100%;margin-bottom:16px;}
.zenGrid__element fieldset{min-height:200px;width:100%;border-radius:8px;vertical-align:middle;overflow:hidden;padding:24px 0;margin:0;} 
.zenGrid__element fieldset.actionLink:hover{background-color:#00000050;cursor:pointer;}
body.dark .zenGrid__element fieldset{border-color:#aaaaaa20;-webkit-box-shadow: -1px 0px 32px -4px rgba(0,0,0,0.64);-moz-box-shadow:-1px 0px 32px -4px rgba(0,0,0,0.64);box-shadow: -1px 0px 32px -4px rgba(0,0,0,0.64);}
body.dark .zenGrid__element fieldset.opaque{background-color:#00000070;box-shadow:none;}
body.light .zenGrid__element fieldset{border:none;background:var(--stdpanel-light);}
body.light .zenGrid__element fieldset.opaque{background-color:#ffffff80;box-shadow:none;}
.zenGrid__element fieldset.gradient{background: -moz-linear-gradient(top,  rgba(255,255,255,0.23) 0%, rgba(255,255,255,0.23) 51%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.23) 0%,rgba(255,255,255,0.23) 51%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0.23) 0%,rgba(255,255,255,0.23) 51%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bffffff', endColorstr='#00ffffff',GradientType=0 );
       
    
    }
.zenGrid__element fieldset legend{text-align:center;padding:0 8px;}
.zenGrid__element fieldset legend span{background-color:var(--stdpanel-light);border-radius:12px;text-align:center;padding:0 12px 1px 12px;font-size:1rem;font-weight:900;}
body.dark .zenGrid__element fieldset legend span{background-color:rgba(255,255,255,0.09);}
body.light .zenGrid__element fieldset legend span{background-color:var(--stdpanel-light);}
.zenGrid__element fieldset legend .icon{top:3px;opacity:.4;padding-right:2px;}
body.dark .zenGrid__element fieldset legend{color:var(--basicText-dark);}
body.light .zenGrid__element fieldset legend{color:var(--basicText-light);}
.zenGrid__element .elementNoBorder{padding:12px;min-height:200px;width:100%;vertical-align:middle;}
.zenGrid__element .elementBorder{padding:12px;min-height:200px;width:100%;vertical-align:middle;border-radius:8px;}
body.dark .zenGrid__element .elementBorder{border:1px solid #aaaaaa20;}
body.light .zenGrid__element .elementBorder{border:2px solid #ffffff70;}
.zenGrid__element .elementInset{padding:12px;min-height:200px;width:100%;vertical-align:middle;border-radius:8px;}
body.dark .zenGrid__element .elementInset{border:1px solid #aaaaaa10;-webkit-box-shadow: inset 0px 13px 48px -17px rgba(0,0,0,0.55);-moz-box-shadow: inset 0px 13px 48px -17px rgba(0,0,0,0.55);box-shadow: inset 0px 13px 48px -17px rgba(0,0,0,0.55);}
body.light .zenGrid__element .elementInset{border:1px solid #ffffff30;-webkit-box-shadow: inset 0px 6px 22px -17px rgba(0,0,0,0.95);-moz-box-shadow: inset 0px 6px 22px -17px rgba(0,0,0,0.95);box-shadow: inset 0px 6px 22px -17px rgba(0,0,0,0.95);}
@media screen and (max-width: 580px) {
    .zenGrid{display:block;padding:.5rem !important;}
    .zenGrid__element{margin-bottom:1rem;}
    .zenGrid__element fieldset{min-height:160px;width:100%;padding:4px 0;}
}


table.statCard{width:100%;height:100%;}
table.statCard td{vertical-align:middle;text-align:center;}
table.statCard.setLeft td{vertical-align:middle;text-align:left;}
table.statCard .statCard__image img{max-width:150px;}
table.statCard .statCard__smallimage img{max-width:90px;padding:5px;}
table.statCard .statCard__logo{width:150px;height:150px;background-position:center center;background-size:cover;background-repeat:none;margin:0 auto;}
table.statCard .statCard__data{}
table.statCard .statCard__title{font-size:1.6rem;display:block;}
table.statCard .statCard__description{font-size:1rem;font-weight:300;display:block;}
table.statCard .statCard__value{font-size:1.8rem;font-weight:900;display:block;padding-top:20px;}
table.statCard .statCard__valuelabel{font-size:1.1rem;}
table.statCard .statCard__primaryPhoto{width:130px;height:130px;background-position:center center;background-size:cover;background-repeat:none;border-radius:50%;margin:0 auto;}
table.statCard .statCard__primaryName{font-size:1.1rem;display:block;padding-bottom:2px;}
table.statCard .statCard__primaryTitle{font-size:1.0rem;font-weight:400;display:block;padding-bottom:2px;color:#a067eb;}
table.statCard .statCard__primaryEmail{font-size:.8rem;}
table.statCard .statCard__primaryEmail a{color:#67adeb;}
table.statCard .statCard__primaryPhone{font-size:.8rem;padding-left:10px;}
table.statCard .statCard__primaryPhone a{color:#93c45c;}
table.statCard .statCard__primaryDesc{font-size:1.0rem;font-weight:300;display:block;border-top:1px solid #ffffff50;margin-top:10px;padding-top:10px;}
table.statCard .statCard__primaryButton{display:block;text-align:right;}
.statCard__button{position:absolute;bottom:10px;right:5px;}
.statCard__button__centered{width:100%;text-align:center;}
@media screen and (max-width: 580px) {
    table.statCard{width:100%;height:100%;}
    table.statCard td:first-child{width:40% !important;}
    table.statCard td:nth-child(2){width:60% !important;}
    table.statCard.setLeft {margin:5px;}
    table.statCard .statCard__image img{max-width:100px;margin:0 auto;}
    table.statCard .statCard__logo{width:110px;height:110px;padding:12px;margin:0 auto;}
}

/* animatedCharts */


/* chartTable */

.chartTitle {
    display: block;
    width: 100%;
    font-size: 1.4rem;
    font-weight: 400;
    color: #dddddd;
    text-align: left;
    margin-bottom: 8px;
}

.chartSubTitle {
    display: block;
    width: 100%;
    font-size: .7rem;
    font-weight: 300;
    color: #dddddd;
    text-align: left;
    margin-bottom: 18px;
    position: relative;
    top: -5px;
}

.chartDescription {
    display: block;
    width: 100%;
    font-size: .8rem;
    font-weight: 300;
    color: #dddddd;
    text-align: justify;
    margin-bottom: 18px;
    text-justify: inter-word;
}

.chartTitle.center,
.chartSubTitle.center {
    text-align: center;
}

table.chartTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
}

table.chartTable th,
table.chartTable td {
    ;
    border-bottom: 1px solid #444444;
}

table.chartTable th.nostyle,
table.chartTable td.nostyle {
    ;
    border: none;
}

table.chartTable tr {}

table.chartTable td {}

table.chartTable td.setright {
    text-align: right;
    min-width: 100px;
    width: max-content;
}

table.chartTable tr:nth-child(2) {
    background-color: #000000 !important;
}

/* overview graphs */

.timeInProgress {
    width: 100%;
    padding-top: .6rem;
}

.feedbackRate {
    width: 100%;
    padding-top: .6rem;
}

.feedbackRate .barBG {
    position: relative;
    width: 125px;
    height: 125px;
    margin: 0 auto;
    background-color: #ff6d0d;
}

.chartClassWidthAdjustment {
    width: 400px !important;
}
@media (max-width: 618px) {
    .chartClassWidthAdjustment {
        width: 300px !important;
    }
}
@media (max-width: 465px) {
    .chartClassWidthAdjustment {
        width: 200px !important;
    }
}

.chartClassWidthAdjustment2 {
    width: 400px !important;
    margin-left:-400px !important;
}

@media (max-width: 618px) {
    .chartClassWidthAdjustment2 {
        width: 300px !important;
        margin-left:-300px !important;
    }
}

@media (max-width: 465px) {
    .chartClassWidthAdjustment2 {
        width: 200px !important;
        margin-left:-200px !important;
    }
}


.feedbackRate .barFG {
    width: 125px;
    background-color: #ff00ff;
    animation: grow 1s ease-in-out;
}

.feedbackRate .barFG.user {
    background-color: #bf00bf;
    height: 20%;
}

.feedbackRate .barFG.base {
    background-color: #a800a8;
    height: 50%;
}

.feedbackRate .barFG.team {
    background-color: #9f009f;
    height: 75%;
}

.feedbackRate .rate {
    font-size: 2.1rem;
    font-weight: 900;
    width: 100%;
    padding-top: 2.5rem;
}

.feedbackRate .total {
    position: absolute;
    bottom: 8px;
    font-size: .8rem;
    font-weight: 400;
    width: 100%;
}

.feedbackRate .total span {
    font-weight: 900;
}

.trendGraph {
    width: 100%;
    padding-top: .6rem;
}

.trendGraph .chart {
    width: 125px;
    padding-top: .6rem;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0 auto;
}

.trendGraph .barBG {
    display: table-cell;
    position: relative;
    width: 25px;
    height: 125px;
}

.trendGraph .barFG {
    position: absolute;
    bottom: 0px;
    width: 22px;
    margin: 0 auto;
}

.trendGraph .barFG.a1 {
    animation: increase .9s ease-in-out forwards;
}

.trendGraph .barFG.a2 {
    animation: increase 1s ease-in-out forwards;
}

.trendGraph .barFG.a3 {
    animation: increase 1.1s ease-in-out forwards;
}

.trendGraph .barFG.a4 {
    animation: increase 1.2s ease-in-out forwards;
}

.trendGraph .barFG.a5 {
    animation: increase 1.3s ease-in-out forwards;
}

.trendGraph .bg-mood-1 {
    background-color: var(--moodc1) !important;
    height: 10%;
}

.trendGraph .bg-mood-2 {
    background-color: var(--moodc2) !important;
    height: 20%;
}

.trendGraph .bg-mood-3 {
    background-color: var(--moodc3) !important;
    height: 30%;
}

.trendGraph .bg-mood-4 {
    background-color: var(--moodc4) !important;
    height: 40%;
}

.trendGraph .bg-mood-5 {
    background-color: var(--moodc5) !important;
    height: 50%;
}

.trendGraph .bg-mood-6 {
    background-color: var(--moodc6) !important;
    height: 60%;
}

.trendGraph .bg-mood-7 {
    background-color: var(--moodc7) !important;
    height: 70%;
}

.trendGraph .bg-mood-8 {
    background-color: var(--moodc8) !important;
    height: 80%;
}

.trendGraph .bg-mood-9 {
    background-color: var(--moodc9) !important;
    height: 90%;
}

.trendGraph .bg-mood-10 {
    background-color: var(--moodc10) !important;
    height: 100%;
}

@keyframes increase {
    0% {
        height: 0;
        background-color: red;
    }

    100% {
        background-color: green;
    }
}

/* costs graph */

.costsHeader {
    width: 100%;
    max-width: 860px;
    min-width: 320px;
    height: 40px;
    margin: 0 auto 40px auto;
    position: relative;
}

.costsHeader table {
    position: absolute;
    top: 0px;
    left: 0px;
    width: max-content;
}

.costsHeader table td {
    border: none;
    width: max-content;
    text-align: right;
}

.costsHeader table td:nth-child(3) {
    text-align: left !important;
    padding-left: 10px !important;
}

.costsHeader table td:nth-child(4) {
    width: max-content;
}

.costsHeader .updateCosts {
    position: absolute;
    top: 0px;
    right: 0px;
}

.costsHeader span.hLabel {
    display: block;
    color: grey;
    font-size: 1.1rem;
    padding: 2px 0;
}

.costsHeader span.hValue {
    display:block;
    font-size: 1.1rem;
}

.costsHeader span.hDollar {
    display:block;
    padding-left: 12px;
    font-size: 1.1rem;
}

.costs-chart {
    width: 100%;
    max-width: 760px;
    min-width: 320px;
    margin: 0 auto;
    position: relative;
}

.costs-chart table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
}

.costs-chart td {
    text-align: center !important;
    width: 25%;
    padding: 0 12px !important;
    border: none;
}

.costs-chart td:first-child {
    text-align: right !important;
    width: 100px;
}

.costs-chart td .barBG {
    height: 180px;
    width: 100%;
    background-color: rgba(30, 156, 30, 1);
}

.costs-chart td .barFG {
    display: block;
    background: rgba(186, 30, 30, 1);
    animation: grow 1s ease-in-out;
}

.ctypeLabel {
    text-transform: uppercase;
    font-size: 1.1rem;
}

.ctypeLabel.reserve {
    color: red;
}

.ctypeLabel.paid {
    color: green;
}

.cValue {
    width: 100%;
    font-weight: 900;
    display: block;
    padding: 12px 0;
}

.cValue.reserve {
    background-color: rgba(186, 30, 30, 1);
}

.cValue.paid {
    background: rgba(30, 156, 30, 1);
}

tr.costTitles td span {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 0;
    font-size: 1rem;
    text-transform: uppercase;
}

.costs-chart .line {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, .4);
}

.costs-chart .line.top {
    top: 87px;
}

.costs-chart .line.bottom {
    bottom: 45px;
}

@keyframes grow {
    0% {
        height: 0;
    }
}

@media (max-width: 767px) {
    .costs-chart td {
        padding: 0 8px !important;
    }

    .costs-chart td:first-child {
        width: 85px;
    }

    .ctypeLabel {
        ;
        font-size: 1rem;
    }

    tr.costTitles td span {
        font-size: .9rem;
    }
}

@media (max-width: 576px) {
    .costs-chart td {
        padding: 0 5px !important;
    }

    .costs-chart td:first-child {
        width: 70px;
    }

    .ctypeLabel {
        ;
        font-size: .9rem;
    }

    tr.costTitles td span {
        font-size: .8rem;
    }

    .costsHeader span.hLabel {
        font-size: .9rem;
        padding: 4px 0;
    }

    .costsHeader span.hValue {
        padding-left: 10px;
        font-size: 1.2rem;
    }
}

/* effective Meter */

.effectiveMeter {
    width: 220px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.effectiveMeter .meterContainer {
    position: relative;
    width: 168px;
    height: 120px;
    overflow: hidden;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border: 2px solid #303030;
    margin: 16px auto 10px auto;
    ;
}

.effectiveMeter .barBGContainer {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-color: #303030;
    transform: scaleY(-1);
    border: 1px solid red;
}

.effectiveMeter .barBG {
    width: 100%;
    height: 100%;
    animation: effectiveMeterStat 1.2s ease-in-out;
    animation-fill-mode: both;
    border: 2px solid black;
}

.effectiveMeter .barOverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url('/images/elements/effectivemeter.png');
    background-size: 100%;
    repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.effectiveMeter span.label1 {
    top: 54px;
    left: 0px;
    color: #cccccc;
    font-size: 1rem;
}

.effectiveMeter.lv1 .barBG {
    background-color: #ff0000;
    height: 14.3%;
}

.effectiveMeter.lv2 .barBG {
    background-color: #ff7b00;
    height: 28.6%;
}

.effectiveMeter.lv3 .barBG {
    background-color: #ff9900;
    height: 42%;
}

.effectiveMeter.lv4 .barBG {
    background-color: #ffd900;
    height: 56%;
}

.effectiveMeter.lv5 .barBG {
    background-color: #91ff00;
    height: 70%;
}

.effectiveMeter.lv6 .barBG {
    background-color: #1eff00;
    height: 84%;
}

.effectiveMeter.lv7 .barBG {
    background-color: #00ff22;
    height: 100%;
}

@keyframes effectiveMeterStat {
    0% {
        height: 0%;
        background-color: #ff0808;
    }
}

.statusProgression{width:100%;position:absolute;bottom:40px;}
.statusProgressionTitle{display:block;display:relative;width:90%;text-align:left;font-size:.8rem;border-top:1px solid #2c2c2c;margin:0 auto;padding:10px 0;font-weight:400;}
span.statusName{color:white;}
span.statusNextup{color:grey;font-weight:900;}
span.statusHistory{position:absolute;right:3px;top:8px;}

.statusProgression ul{padding:0;margin:0;list-style:none;width:100%;text-align:center;}

.statusProgression ul li{display:inline-block;height:64px;width:64px;margin:1px;}

.statusProgression ul li a{position:relative;display:block;border-radius:5px;border:1px solid #303030;width:64px;height:64px;}
.statusProgression ul li a:hover{background-color:#141414;}



.statusProgression .indicator {color:grey;}
.statusProgression .indicator.nextup{color:white;background-color:#313131;border:transparent;}

.statusProgression .indicator .multiStep{position:absolute;bottom:-14px;width:100%;height:16px;overflow:hidden;}
.statusProgression .indicator .multiStep ul{padding:0;margin:0;list-style:none;width:100%;text-align:center;}
.statusProgression .indicator .multiStep li{display:inline-block;width:9px;height:9px;margin:0px;}
.statusProgression .indicator .multiStep li .multiIndicator{width:8px;height:8px;border-radius:2px;background-color:grey;}

.statusProgression ul li .indicator .statusStepLabel{position:absolute;top:0px;width:100%;text-align:center;font-size:.7rem;}
.statusProgression .indicator .statusIcon {
    margin:15px auto 0 auto;;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: black;
}

.statusProgression .indicator .statusIcon:after {
    font-family: 'zenjuriesfont';
    font-size: 1.1rem;
    position: relative;
    top: 6px;
    left: 0px;
    color: #ffffff60;
    content:'\e030';
}

.statusProgression .indicator .statusIconLabel{
    width:100%;
    text-align:center;
    position:absolute;
    bottom:3px;
    font-size: .55rem;
    color: #ffffff60;
}

.statusProgression .indicator .statusIconLabel:after {
    content:'select';
    font-weight:900;
    font-size:.7rem;
}

.statusProgression .indicator.skipStep{background-color:#23232340;border-color:transparent;color:white;}
.statusProgression .indicator.skipStep:hover{background-color:#23232360;}
.statusProgression .indicator.skipStep .statusIconLabel:after{content:'skipped';color:grey;}
.statusProgression .indicator.skipStep .statusIcon:after{content:'\e107';color:white;top:5px;left:0px;}
.statusProgression .indicator.skipStep .statusIcon{background-color:#3d3d3d;}

.statusProgression .indicator.evaluation.minor{background-color:#ffff0040;border-color:transparent;color:white;}
.statusProgression .indicator.evaluation.minor:hover{background-color:#ffff0060;}
.statusProgression .indicator.evaluation.minor .statusIconLabel:after{content:'minor';color:yellow;}
.statusProgression .indicator.evaluation.minor .statusIcon:after{content:'\e0e0';color:white;top:5px;left:0px;}
.statusProgression .indicator.evaluation.minor .statusIcon, .multiIndicator.minor{background-color:#9b8901 !important;}

.statusProgression .indicator.evaluation.moderate{background-color:#ff550040;border-color:transparent;color:white;}
.statusProgression .indicator.evaluation.moderate:hover{background-color:#ff550060;}
.statusProgression .indicator.evaluation.moderate .statusIconLabel:after{content:'moderate';color:orange;}
.statusProgression .indicator.evaluation.moderate .statusIcon:after{content:'\e0e1';color:white;top:4px;left:-1px;}
.statusProgression .indicator.evaluation.moderate .statusIcon, .multiIndicator.moderate{background-color:#b84900 !important;}

.statusProgression .indicator.evaluation.severe{background-color:#ff000040;border-color:transparent;color:white;}
.statusProgression .indicator.evaluation.severe:hover{background-color:#ff000060;}
.statusProgression .indicator.evaluation.severe .statusIconLabel:after{content:'severe';color:#ff0808;}
.statusProgression .indicator.evaluation.severe .statusIcon:after{content:'\e0ee';color:white;top:4px;left:-1px;}
.statusProgression .indicator.evaluation.severe .statusIcon, .multiIndicator.severe{background-color:#aa0000 !important;}

.statusProgression .indicator.treatment.firstaid{background-color:#8d5c0040;border-color:transparent;color:white;}
.statusProgression .indicator.treatment.firstaid:hover{background-color:#8d5c0060;}
.statusProgression .indicator.treatment.firstaid .statusIconLabel:after{content:'first aid';color:#fabf53;}
.statusProgression .indicator.treatment.firstaid .statusIcon:after{content:'\e055';color:white;top:4px;left:0px;}
.statusProgression .indicator.treatment.firstaid .statusIcon, .multiIndicator.firstaid{background-color:#8d5c00 !important;}

.statusProgression .indicator.treatment.doctor{background-color:#6f00ff40;border-color:transparent;color:white;}
.statusProgression .indicator.treatment.doctor:hover{background-color:#6f00ff60;}
.statusProgression .indicator.treatment.doctor .statusIconLabel:after{content:'doctor';color:#a25cfd;}
.statusProgression .indicator.treatment.doctor .statusIcon:after{content:'\e0cd';color:white;top:4px;left:0px;}
.statusProgression .indicator.treatment.doctor .statusIcon, .multiIndicator.doctor{background-color:#562299 !important;}

.statusProgression .indicator.treatment.urgentcare{background-color:#81096740;border-color:transparent;color:white;}
.statusProgression .indicator.treatment.urgentcare:hover{background-color:#81096760;}
.statusProgression .indicator.treatment.urgentcare .statusIconLabel:after{content:'urgentCare';color:#f729ca;}
.statusProgression .indicator.treatment.urgentcare .statusIcon:after{content:'\e0e8';color:white;top:4px;left:0px;}
.statusProgression .indicator.treatment.urgentcare .statusIcon, .multiIndicator.urgentcare{background-color:#810967 !important;}

.statusProgression .indicator.treatment.hospital{background-color:#8f123840;border-color:transparent;color:white;}
.statusProgression .indicator.treatment.hospital:hover{background-color:#8f123860;}
.statusProgression .indicator.treatment.hospital .statusIconLabel:after{content:'hospital';color:#ff3471;}
.statusProgression .indicator.treatment.hospital .statusIcon:after{content:'\e0ed';color:white;top:4px;left:0px;}
.statusProgression .indicator.treatment.hospital .statusIcon, .multiIndicator.hospital{background-color:#8f1238 !important;}

.statusProgression .indicator.recovery.home{background-color:#146d8340;border-color:transparent;color:white;}
.statusProgression .indicator.recovery.home:hover{background-color:#146d8360;}
.statusProgression .indicator.recovery.home .statusIconLabel:after{content:'home';color:#30b9db;}
.statusProgression .indicator.recovery.home .statusIcon:after{content:'\e048';color:white;top:4px;left:0px;}
.statusProgression .indicator.recovery.home .statusIcon, .multiIndicator.home{background-color:#146d83 !important;}

.statusProgression .indicator.rehab.lightduty{background-color:#1a6b6440;border-color:transparent;color:white;}
.statusProgression .indicator.rehab.lightduty:hover{background-color:#1a6b6460;}
.statusProgression .indicator.rehab.lightduty .statusIconLabel:after{content:'light duty';color:#3fc7bc;}
.statusProgression .indicator.rehab.lightduty .statusIcon:after{content:'\e0ca';color:white;top:4px;left:0px;}
.statusProgression .indicator.rehab.lightduty .statusIcon, .multiIndicator.lightduty{background-color:#1a6b64 !important;}

.statusProgression .indicator.rehab.transitionalduty{background-color:#1a6b6440;border-color:transparent;color:white;}
.statusProgression .indicator.rehab.transitionalduty:hover{background-color:#1a6b6460;}
.statusProgression .indicator.rehab.transitionalduty .statusIconLabel:after{content:'transitional';color:#3fc7bc;}
.statusProgression .indicator.rehab.transitionalduty .statusIcon:after{content:'\e0ca';color:white;top:4px;left:0px;}
.statusProgression .indicator.rehab.transitionalduty .statusIcon, .multiIndicator.transitionalduty{background-color:#1a6b64 !important;}


.statusProgression .indicator.rehab.fullduty{background-color:#196b3b40;border-color:transparent;color:white;}
.statusProgression .indicator.rehab.fullduty:hover{background-color:#196b3b60;}
.statusProgression .indicator.rehab.fullduty .statusIconLabel:after{content:'full duty';color:#3fc276;}
.statusProgression .indicator.rehab.fullduty .statusIcon:after{content:'\e0b0';color:white;top:4px;left:0px;}
.statusProgression .indicator.rehab.fullduty .statusIcon, .multiIndicator.fullduty{background-color:#196b3b !important;}

.statusProgression .indicator.resolution.maxrecovery{background-color:#48791140;border-color:transparent;color:white;}
.statusProgression .indicator.resolution.maxrecovery:hover{background-color:#48791160;}
.statusProgression .indicator.resolution.maxrecovery .statusIconLabel:after{content:'recovered';color:#8edb35;}
.statusProgression .indicator.resolution.maxrecovery .statusIcon:after{content:'\e0d2';color:white;top:4px;left:0px;}
.statusProgression .indicator.resolution.maxrecovery .statusIcon, .multiIndicator.maxrecovery{background-color:#487911 !important;}

.statusProgression .indicator.resolution.terminated{background-color:#50101040;border-color:transparent;color:white;}
.statusProgression .indicator.resolution.terminated:hover{background-color:#50101060;}
.statusProgression .indicator.resolution.terminated .statusIconLabel:after{content:'terminated';color:#a33333;}
.statusProgression .indicator.resolution.terminated .statusIcon:after{content:'\e098';color:white;top:4px;left:0px;}
.statusProgression .indicator.resolution.terminated .statusIcon, .multiIndicator.terminated{background-color:#501010 !important;}

.statusProgression .indicator.resolution.resigned{background-color:#4b2c0f40;border-color:transparent;color:white;}
.statusProgression .indicator.resolution.resigned:hover{background-color:#4b2c0f60;}
.statusProgression .indicator.resolution.resigned .statusIconLabel:after{content:'resigned';color:#b6763b;}
.statusProgression .indicator.resolution.resigned .statusIcon:after{content:'\e094';color:white;top:4px;left:0px;}
.statusProgression .indicator.resolution.resigned .statusIcon, .multiIndicator.resigned{background-color:#4b2c0f !important;}

.statusProgression .indicator.resolution.death{background-color:#040b1340;border-color:transparent;color:white;}
.statusProgression .indicator.resolution.death:hover{background-color:#040b1360;}
.statusProgression .indicator.resolution.death .statusIconLabel:after{content:'deceased';color:#2c4461;}
.statusProgression .indicator.resolution.death .statusIcon:after{content:'\e11d';color:white;top:4px;left:0px;}
.statusProgression .indicator.resolution.death .statusIcon, .multiIndicator.death{background-color:#040b13 !important;}

.statusProgressionMeter {
    width: 320px;
    height: 50px;
    position: relative;
    margin: 0 auto;
}

.statusProgressionMeter ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    font-size: 0;
    z-index: 10;
    position: absolute;
}

.statusProgressionMeter li {
    display: inline-block;
    width: 14.28%;
}

.statusProgressionMeter .indicator {
    width: 100%;
    text-align: center;
}

.statusProgressionMeter .indicator .bobble {
    width: 30px;
    height: 30px;
    border: 3px solid #333333;
    border-radius: 50%;
    margin: 0 auto;
    background-color: black;
}

.statusProgressionMeter .indicator .bobble .icon {
    font-size: 1.1rem;
    position: relative;
    top: 3px;
    left: 0px;
    color: #ffffff60;
}

.statusProgressionMeter .indicator .bobblelabel {
    font-size: .55rem;
    padding-top: 2px;
    color: #ffffff60;
}

.statusProgressionMeter .bar {
    position: absolute;
    top: 13px;
    left: 20px;
    background-color: #666666;
    height: 6px;
    z-index: 9;
}

.statusProgressionMeter .statusOverlay {
    z-index: 11;
    display: none;
    position: absolute;
    width: 100%;
    height: 50px;
    text-align: center;
    font-size: 1rem;
    letter-spacing: .13rem;
    background-color: #000000;
    text-transform: uppercase;
    padding-top: 15px;
    border-radius: 6px;
}

.statusProgressionMeter .statusOverlay.resolved {
    background-color: #0c832f;}

.statusProgressionMeter .statusOverlay.deceased {
    background-color: #000000;
}

.statusProgressionMeter .statusOverlay.resigned {
    background-color: #3d0c05;
}

.statusProgressionMeter .statusOverlay.terminated {
    background-color: #174666;
}

.statusProgressionMeter li:nth-child(1) .indicator.on .bobble {
    background-color: var(--statusHospital);
    border-color: #777777;
}

.statusProgressionMeter li:nth-child(1) .indicator.on .bobble .icon {
    color: #ffffff90;
}

.statusProgressionMeter li:nth-child(1) .indicator.on .bobblelabel {
    color: white;
}

.statusProgressionMeter li:nth-child(2) .indicator.on .bobble {
    background-color: var(--statusUrgentcare);
    border-color: #777777;
}

.statusProgressionMeter li:nth-child(2) .indicator.on .bobble .icon {
    color: #ffffff90;
}

.statusProgressionMeter li:nth-child(2) .indicator.on .bobblelabel {
    color: white;
}

.statusProgressionMeter li:nth-child(3) .indicator.on .bobble {
    background-color: var(--statusDoctor);
    border-color: #777777;
}

.statusProgressionMeter li:nth-child(3) .indicator.on .bobble .icon {
    color: #ffffff90;
}

.statusProgressionMeter li:nth-child(3) .indicator.on .bobblelabel {
    color: white;
}

.statusProgressionMeter li:nth-child(4) .indicator.on .bobble {
    background-color: var(--statusRecoverhome);
    border-color: #777777;
}

.statusProgressionMeter li:nth-child(4) .indicator.on .bobble .icon {
    color: #ffffff90;
}

.statusProgressionMeter li:nth-child(4) .indicator.on .bobblelabel {
    color: white;
}

.statusProgressionMeter li:nth-child(5) .indicator.on .bobble {
    background-color: var(--statusLightduty);
    border-color: #777777;
}

.statusProgressionMeter li:nth-child(5) .indicator.on .bobble .icon {
    color: #ffffff90;
}

.statusProgressionMeter li:nth-child(5) .indicator.on .bobblelabel {
    color: white;
}

.statusProgressionMeter li:nth-child(6) .indicator.on .bobble {
    background-color: var(--statusFullduty);
    border-color: #777777;
}

.statusProgressionMeter li:nth-child(6) .indicator.on .bobble .icon {
    color: #ffffff90;
}

.statusProgressionMeter li:nth-child(6) .indicator.on .bobblelabel {
    color: white;
}

.statusProgressionMeter li:nth-child(7) .indicator.on .bobble {
    background-color: var(--statusMaxrecovery);
    border-color: #777777;
}

.statusProgressionMeter li:nth-child(7) .indicator.on .bobble .icon {
    color: #ffffff90;
}

.statusProgressionMeter li:nth-child(7) .indicator.on .bobblelabel {
    color: white;
}

/* countdown gauge */
.countdownContainer {
    background-color: #ffffff15;
    border-radius: 12px;
    width: max-content;
    margin: 0 auto;
    padding: 10px;
}

.countdown {
    font-weight: 300;
    color: white;
}

.countdown.attention {
    color: yellow;
}

.countdown.alert {
    color: orange;
}

.countdown.critical {
    color: red;
}

.countdown .countdownValue {
    font-size: 2rem;
    font-weight: 900;
    padding-right: 4px;
}

.countdown .countdownLabel {
    font-size: .9rem;
}

.countdown .countdownDesc {
    font-size: .8rem;
    font-weight: 400;
    display: block;
    color: white;
    letter-spacing: .1rem;
}

/* arc gauge */
.arcGauge {
    position: relative;
    height: 200px;
    width: 220px;
    margin: 0 auto;
}

.arcGauge span {
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
}

.arcGauge span.arcLabel1 {
    top: 54px;
    left: 0px;
    color: #747474;
    font-size: .8rem;
}

.arcGauge span.arcLabel2 {
    top: 118px;
    left: 0px;
    font-size: 1.5rem;
    font-weight: 400;
}

.arcGauge span.arcValue {
    font-size: 3rem;
    top: 66px;
    left: 0px;
    font-weight: 300;
}

.arcGauge span.arcPercent {
    font-size: 2.2rem;
    top: 70px;
    left: 0px;
    font-weight: 300;
}

.arcGaugeMask {
    width: 220px;
    height: 110px;
    margin: 20px auto 60px auto;
}

.arcGaugeContainer {
    width: 100%;
    aspect-ratio: 2/1;
    position: relative;
    overflow: hidden;
}

.arcArc {
    animation: arcslide 1.2s ease-in-out forwards;
    height: 110px;
    width: 220px;
    position: relative;
    top: 110px;
    transform-origin: 110px 0px;
    transform: rotate(var(--arcGaugeValue));
}

.arcGaugeTrack {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 110px;
    width: 220px;
    border-radius: 150px 150px 0 0;
    background-color: transparent;
    border: 45px solid black;
    border-bottom: 0;
}

.arcGaugeArc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 110px;
    width: 220px;
    border-radius: 0 0 150px 150px;
    background-color: transparent;
    border: 45px solid blue;
    border-top: 0;
}

.arcGaugeArc.red {
    animation: redArc 1.2s ease-in-out forwards;
}

.arcGaugeArc.orange {
    animation: orangeArc 1.2s ease-in-out forwards;
}

.arcGaugeArc.yellow {
    animation: yellowArc 1.2s ease-in-out forwards;
}

.arcGaugeArc.green {
    animation: greenArc 1.2s ease-in-out forwards;
}

.arcGauge.bad .arcArc {
    transform: rotate(30deg);
}

.arcGauge.ok .arcArc {
    transform: rotate(95deg);
}

.arcGauge.good .arcArc {
    transform: rotate(170deg);
}

.arcGauge.bad .arcGaugeArc {
    animation: redArc 1.2s ease-in-out forwards;
}

.arcGauge.ok .arcGaugeArc {
    animation: yellowArc 1.2s ease-in-out forwards;
}

.arcGauge.good .arcGaugeArc {
    animation: greenArc 1.2s ease-in-out forwards;
}

@keyframes arcslide {
    0% {
        transform: rotate(0);
    }
}

@keyframes redArc {
    0% {
        border-color: darkred;
    }

    100% {
        border-color: red;
    }
}

@keyframes orangeArc {
    0% {
        border-color: darkred;
    }

    100% {
        border-color: orange;
    }
}

@keyframes yellowArc {
    0% {
        border-color: darkred;
    }

    100% {
        border-color: yellow;
    }
}

@keyframes greenArc {
    0% {
        border-color: darkred;
    }

    100% {
        border-color: #00ff00;
    }
}

/* bar graph */
.hBarGraph {
    width: 200px;
    height: 20px;
    overflow: hidden;
    margin: 4px;
    background-color: #00000050;
    text-align: center;
}

.hBarGraph .fillBar {
    position: relative;
    left: -12px;
    height: 20px;
    border-left: 22px solid var(--barGraphBarBG);
    background-color: var(--barGraphBarBG);
    animation: fillH 1.2s;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    animation-fill-mode: forwards;
}

.hBarGraph .barLabel {}

@keyframes fillH {
    0% {
        width: 0%;
    }

    80% {
        transform: translateX(9px);
    }

    85% {
        transform: translateX(-7px);
    }

    90% {
        transform: translateX(5px);
    }

    95% {
        transform: translateX(-3px);
    }

    100% {
        transform: translateX(0);
    }
}


.valueProgressBar{width:100%;padding:12px 24px;position:relative;height:80px;}
.valueProgressBar__BG{width:100%;border-radius:30px;height:40px;border:3px solid black;background-color:#3a3a3a;position:relative;overflow:hidden;
    -webkit-box-shadow: 2px 10px 32px 0px rgba(0,0,0,0.74);
    -moz-box-shadow: 2px 10px 32px 0px rgba(0,0,0,0.74);
    box-shadow: 2px 10px 32px 0px rgba(0,0,0,0.74);
}
.valueProgressBar__value{width:100%;text-align:center;position:absolute;top:0px;left:0px;height:40px;padding-top:2px;font-size:1.4rem;}
.valueProgressBar__bar{border-radius:30px;position:absolute;top:0px;left:0px;height:34px;padding-top:2px;font-size:1.4rem;background-color:blue;}
.valueProgressBar__bar.progress1{background-color:#0060dd;}
.valueProgressBar__bar.progress2{background-color:#009edd;}
.valueProgressBar__bar.progress3{background-color:#2bcabd;}
.valueProgressBar__bar.progress4{background-color:#11b161;}
.valueProgressBar__bar.progress5{background-color:#11b111;}
.valueProgressBar__goal{position:absolute;bottom:0px;right:16px;font-size:1.3rem;}
.valueProgressBar__goal .icon{font-size:1.6rem;}

.monthlyValueProgress{width:100%;position:relative;}
.monthlyValueProgress ul{display:table;list-style:none;padding:0;margin:0;width:100%;}
.monthlyValueProgress li{display:table-cell;vertical-align:middle;text-align:center;padding:5px;margin:0;}
.monthlyValueProgress li a{display:block;padding:4px;height:90px;width:100%;border-radius:8px;background-color:black;cursor:pointer;}
.monthlyValueProgress li a:hover{background-color:#323232;}
.monthlyValueProgress li a .progMonth{font-size:1rem;font-weight:900;padding-bottom:3px;border-bottom:3px solid #ffffff30;}
.monthlyValueProgress li a .progValue{font-size:.8rem;font-weight:400;padding:5px 0 7px 0;}
.monthlyValueProgress li a .progStat{background-color:#2b2b2b;height:8px;width:50px;margin:0 auto;}
.monthlyValueProgress li a .progStat .progStat__stat{background-color:#2b2b2b;height:8px;}
.monthlyValueProgress li a .progStat.goalMet .progStat__stat{background-color:#0fb400;}
.monthlyValueProgress li a .progStat.goalNotMet{background-color:#740000;height:8px;}
.monthlyValueProgress li a .progStat.goalNotMet .progStat__stat{background-color:#d60202;}
.monthlyValueProgress li a .progStat.goalInProgress{background-color:#003c70;height:8px;}
.monthlyValueProgress li a .progStat.goalInProgress .progStat__stat{background-color:#004eb4;}
.monthlyValueProgress li a .progGoal{font-size:.7rem;font-weight:400;padding:1px 0;opacity:.7;}

.chartContainer {
    padding: 20px;
    text-align: center;
}
@media (max-width: 1000px) {
    .monthlyValueProgress ul{display:block;text-align:center;}
    .monthlyValueProgress li{display:inline-block;}
}


.darkChart {
    width: 100%;
    height: 100%;
    padding: 4%;
    margin: 0 auto;
    border-radius: 12px;
    border: 1px solid #333333;
    box-shadow: 0px 0px 39px -11px rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0px 0px 39px -11px rgba(0, 0, 0, 0.9);
    -moz-box-shadow: 0px 0px 39px -11px rgba(0, 0, 0, 0.9);
    background: -moz-linear-gradient(-45deg, rgba(89, 89, 89, 0.53) 0%, rgba(0, 0, 0, 0.27) 78%, rgba(0, 0, 0, 0.2) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(89, 89, 89, 0.53) 0%, rgba(0, 0, 0, 0.27) 78%, rgba(0, 0, 0, 0.2) 100%);
    background: linear-gradient(135deg, rgba(89, 89, 89, 0.53) 0%, rgba(0, 0, 0, 0.27) 78%, rgba(0, 0, 0, 0.2) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#87595959', endColorstr='#33000000', GradientType=1);
}

.transChart {
    width: 100%;
    height: 100%;
    padding: 4%;
    margin: 0 auto;
    border-radius: 12px;
    border: 1px solid #333333;
    box-shadow: 0px 0px 18px -6px rgba(0, 0, 0, 0.4);
}

.darkChart.padded {
    width: 70%;
}

button.savePrint {
    position: absolute;
    top: 16px;
    right: 10px;
}

@media (max-width: 700px) {

    .darkChart,
    .darkChart.padded {
        width: 100%;
        min-height: 300px;
        min-width: 300px;
    }
}

/* zenjuries certificate */
.certificateContainer {
    width: 100%;
    text-align: center;
}

.certificate {
    position: relative;
    width: 1000px;
    height: 700px;
    background-image: var(--certificateImage);
    background-color: white;
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px;
    margin: 10px auto;
    color: black;
}

.certText1 {
    color:black;
    font-weight:400;
    font-size:2rem;
    padding-top:1rem;
}

.certText2 {
    font-size:1rem;
    text-transform:uppercase;
}

.certText3 {
    color:black;
    font-weight:900;
    font-size:2rem;
    padding-top:1rem;
}

.certText4 {
    font-size:1rem;
    font-style:italic;
    letter-spacing:.08rem;
}

.certBody {
    text-align: center;
    width: 100%;
    position: absolute;
    top: 220px;
    font-weight: 400;
    font-size: 1rem;
}

#certDate {
    position: absolute;
    left: 165px;
    bottom: 105px;
    text-align: center;
}

#certEnrollmentDept {
    position: absolute;
    right: 165px;
    bottom: 105px;
    text-align: center;
}

#dateString {
    text-decoration: underline;
}

@media screen and (max-width: 1000px) {
    .certificate {
        zoom: 0.80;
        -moz-transform: scale(1);
        background-image: var(--certificateImageSm);
    }
    .certBody {
        top: 190px;
    }
    #certDate {
        position: absolute;
        left: 165px;
        bottom: 95px;
        text-align: center;
    }
    
    #certEnrollmentDept {
        position: absolute;
        right: 165px;
        bottom: 95px;
        text-align: center;
    }    
}

@media screen and (max-width: 880px) {
    .certificate {
        zoom: 0.40;
        -moz-transform: scale(0.8);
    }
    .certBody {
        top: 170px;
    }
    #certDate {
        position: absolute;
        left: 165px;
        bottom: 85px;
        text-align: center;
    }
    
    #certEnrollmentDept {
        position: absolute;
        right: 165px;
        bottom: 85px;
        text-align: center;
    }

    .certText1 {
        font-size:1.75rem;
        padding-top:1rem;
    }
    
    .certText2 {
        font-size:0.7rem;
    }
    
    .certText3 {
        font-size:1.75rem;
        padding-top:0.7rem;
    }
    
    .certText4 {
        font-size:0.7rem;
    }
}


/* ------------- Themes ------------- */

.settingsButtonArray.themeBG .buttonSet {
    background-size: cover;
}

.buttonSet.themeBG {
    background-size: cover;
    background-position: center bottom;
}

.themeImage {
    height: 100vh;
}

.themeLabelbg {
    display: block;
    padding: 12px;
    font-size: 1.2rem !important;
    text-shadow: 0px 1px 1px black;
    color: white;
}

/* utility classes */
.disableButtons button{opacity:.3 !important;pointer-events:none;}

.disableButtons .special-enable {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.fixedHeight__200 {
    height: 200px !important;
    overflow: hidden;
    position: relative;
}
.fixedHeight__230 {
    height: 230px !important;
    overflow: hidden;
    position: relative;
}
.fixedHeight__380 {
    height: 380px !important;
    overflow: hidden;
    position: relative;
}

.stick2bottom {
    position: absolute;
    bottom: 20px;
}

.stick2top {
    position: absolute;
    top: 0px;
}

.stick2left {
    position: absolute;
    left: 0px;
}

.stick2right {
    position: absolute;
    right: 0px;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 1.4rem;
}

.divider::after,
.divider::before {
    content: "";
    border: 2px solid #ffffff20;
    flex: 1;
}

.divider:not(:empty)::before {
    margin-right: 0.55rem;
    margin-left: 5.2rem;
}

.divider:not(:empty)::after {
    margin-left: 0.55rem;
    margin-right: 5.2rem;
}

.animDelay1 {
    animation-delay: .4s;
}

.animDelay2 {
    animation-delay: .5s;
}

.animDelay3 {
    animation-delay: .6s;
}

.animDelay4 {
    animation-delay: .7s;
}

.animDelay5 {
    animation-delay: .8s;
}

.animDelay6 {
    animation-delay: .9s;
}

.animDelay7 {
    animation-delay: 1s;
}

.animDelay8 {
    animation-delay: 1.1s;
}

.animDelay9 {
    animation-delay: 1.2s;
}

.animDelay10 {
    animation-delay: 1.3s;
}

.hideMe {
    display: none;
}

.showMe {
    display: block;
}

.devButtons {
    display: none;
    text-align: center;
}

.devButtons button {
    background-color: black;
    color: white;
    font-size: .6rem;
}

code {
    font-family: monospace;
    font-size: .7rem;
    color: cyan;
    font-weight: 400;
    padding: 2px 5px;
    background-color: #00000050;
    border-radius: 3px;
    margin: 0 2px;
}

code:before {
    content: '[ ';
    opacity: .5;
}

code:after {
    content: ' ]';
    opacity: .5;
}

samp {
    font-size: .7rem;
    color: orange;
    font-weight: 400;
    padding: 2px 5px;
    background-color: #00000050;
    border-radius: 3px;
    margin: 0 2px;
}

samp:before {
    content: '[ ';
    opacity: .5;
}

samp:after {
    content: ' ]';
    opacity: .5;
}

pre {
    font-size: .7rem;
    color: greenyellow;
    font-weight: 400;
    padding: 5px 5px;
    background-color: #00000050;
    border-radius: 3px;
    margin: 0 2px;
}

pre:before {
    content: '[ ';
    opacity: .5;
}

pre:after {
    content: ' ]';
    opacity: .5;
}

@media screen and (min-width: 580px) {
    .onlyMobile {
        display: none !important;
    }
    .onlyFull {
        display: auto !important;
    }    
    .hideFull {
        display: none !important;
    }
    .showFull {
        display: block !important;
    }
}

@media screen and (max-width: 580px) {
    .onlyMobile {
        display: auto !important;
    }
    .onlyFull {
        display: none !important;
    }         
    .hideMobile {
        display: none !important;
    }
    .showMobile {
        display: block !important;
    }
}

.testMe{color:red;}

.statsPanel {
    display: table;
    text-align: center;
    width: 200px;
    cursor: pointer;
    height: 65px;
    border-radius: 10px;
    background-color: #000000;
    position: relative;
    z-index: 2;
}


.statsPanelSetContent {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 100%;
    z-index: 4;
}


.statsPanelSetContent .statRoleTypeIcon {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 1.9rem;
    color: #424242;
}

.statsPanelSetContent .statPanelText {
    display: block;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.statsPanelSetContent .statPanelHeader {
    display: block;
    font-size: .8rem;
    font-weight: 900;
}

/* NEW LAYOUT */
.zenPanelSection{
    border-radius: 8px;
    border: 1px solid var(--zenpanel-border);
    background-color: var(--zenpanel-bg);
    padding: 0 0 20px 0;
    margin: 0 auto 40px auto;
    position: relative;
}
.zenPanelSection__title{
    position: relative;
    display: block;
    color: var(--sectiontitle);
    width: 100%;
    font-weight: 900;
    margin: 0;
    padding: 20px 0 20px 65px;
    font-size: 1.2rem;
    border-top-left-radius, border-top-right-radius:8px;
}
.zenPanelSection__title .icon {
    font-size: 1.8rem;
    position: absolute;
    top: 20px;
    left: 26px;
    color: var(--sectiontitleicon);
}
.zenPanelSection__title span.titleDesc{display:inline-block;position:relative;top:-1px;left:5px;font-size:.8rem;font-weight:300;opacity:.6;}
.zenPanelSection__controls {
    position: absolute;
    top: 20px;
    right: 20px;
}
.zenPanelSection__viewFilters {
    width:100%;
    padding:2px 66px;
    position:relative;
}
.zenPanelSection__header{padding:0px 28px 20px 28px;font-size:2.2rem;font-weight:300;text-align:center;margin:20px 30px 20px 30px;border-bottom:2px solid var(--zenpanel-lines);}
.zenPanelSection__sub-header{padding:0px 28px 20px 28px;font-size:1.4rem;font-weight:300;text-align:center;}
.zenPanelSection__description{padding:0px 28px 20px 28px;font-size:1.1rem;font-weight:300;}
.zenPanelSection__content{padding:5px 28px 5px 28px;font-size:1rem;line-height:1.3rem;font-weight:400;color: var(--zenpanel-text);}
.zenPanelSection__linecontent{padding:20px 0px;border-top:1px solid var(--zenpanel-lines);border-bottom:1px solid var(--zenpanel-lines);margin:20px 28px;font-size:.9rem;line-height:1.1rem;font-weight:300;color: var(--zenpanel-text);}
.zenPanelSection__footer{text-align:center;padding:20px 28px 10px 28px;font-size:1.2rem;font-weight:300;letter-spacing:.1rem;color: var(--zenpanel-subtext);opacity:.8;}
.zenPanelSection__disclaimer{text-align:right;padding:20px 28px 10px 28px;font-size:.9rem;font-weight:600;color: var(--zenpanel-disclaimer);}

#myIssuesTable, #myClosedIssuesTable {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Lato', sans-serif;
    flex-wrap: wrap;
    
}

.issue-card {
    position: relative;
    border: 2px solid #ffffff30;
    border-radius: 10px;
    padding: 10px;
    padding-bottom: 30px;
    margin: 10px;
    width: 85%;
    max-width: 600px;
    min-width:250px;
    box-sizing: border-box;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0px 1px 13px 1px rgba(0,0,0,0.5);

}

.issueCardBtn  {
    position: absolute;
    bottom: 10px;
    right: 10px;
    margin-left: 5px;
}

.issueCardDeleteBtn  {
    position: absolute;
    top: 10px;
    right: 10px;
    margin-left: 25px;
}

.mediaVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
}

.issue-card p {
    text-align: left;
    margin: 0 5% 20px; 
    font-size: calc(0.7rem + 0.3vw);
    color:white;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    word-spacing:normal;
    white-space: normal;
    
}

.issue-card p strong {
    color: #7ebb1d;
    text-align: left;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    word-spacing:normal;
}

.open-issue, .closed-issue {
    border: 1px solid #77777750;
    background-color:transparent;
}

.supportIssueReply {
    margin-top:25px;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #1a1a1a;
    border-color: rgba(49, 49, 49);
    box-shadow: 0px 1px 13px 1px rgba(0,0,0,0.5);
}

.supportIssueReply-date {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    color: #888;
}

.supportIssueReply-header {
    margin-top:25px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.user-pic {
    width: 40px;
    height: 40px; 
    border-radius: 50%;
    margin-right: 5px;
    margin-left:10px;
}

.supportIssueReply-info {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding-left:5px;
    font-size: 14px;
    font-weight: bold;
    word-spacing: normal;
    text-align: left;
}

.supportIssueReply-message {
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 25px;
    margin-bottom: 50px;
    font-size: 1.1rem;
    color: lightgrey;
    text-align: left;
    white-space: pre-wrap;
}

.supportIssueReply-footer {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.google-btn {
    width: 184px;
    height: 42px;
    background-color: #4b4b4b;
    border-radius: 2px;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
    margin: 14px auto 0px;
}
.google-btn .google-icon-wrapper {
    position: absolute;
    margin-top: 1px;
    margin-left: 1px;
    width: 40px;
    height: 40px;
    border-radius: 2px;
    background-color: #434343
}
.google-btn .google-icon {
    position: absolute;
    margin-top: 7px;
    margin-left: -31px;
    width: 24px;
    height: 24px;
}
.google-btn .btn-text {
    float: right;
    margin: 11px 11px 0 0;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.2px;
}
.google-btn:hover {
    background-color: #434343;
}
.google-btn:active {
    background-color: #434343;
}
.roleTag{
    font-size: 12px;
    background: #107fc9;
    padding: 3px 8px;
    border-radius: 8px;
    margin-left: 8px;
}

.hideBrCommunicateFilterBt{
    display:none;
}
  
  /* Adjust button styles for smaller screens */
  @media (max-width: 850px) {
    .resizeCommunicateFilterBtn {
        padding: 0;
        height: 30px;
        width: 30px;
    }
    .hideTextCommunicateFilterBtn{
        display:none;
    }
    .resizeIconCommunicateFilterBtn{
        padding-left: 5px;
    }
  }

  @media (max-width: 468px) {
    .hideBrCommunicateFilterBt{
        display:block;
    }
    .floatCommunicateFilterBtn{
        float:left;
    }
    .checkSectionContentCommunicate{
        margin-top:35px;
    }
  }

  .communicateFilterBtnMobile {
    margin-left:5px !important;
  }

  /* Basic styling for the dashboard components */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    padding-top: 30px;
}

.dashboard-section {
    background: transparent;
    padding: 20px;
    border-radius: 12px;
    box-shadow: -1px 0px 32px -4px rgba(0,0,0,0.64);
}

.dashboard-section h2 {
    font-size: 1.6em;
    margin-bottom: 20px;
    color: white;
    font-weight: bold;
    text-align: center;
}

.dashboard-card {
    background: transparent;
    box-shadow: -1px 0px 32px -4px rgba(0,0,0,0.64);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
}

.card-header {
    margin-bottom: 10px;
    color: white;
    font-size: 1.2rem;
    font-weight: 300;
}

.card-value {
    font-size: 2em;
    font-weight: bold;
    color: #7ebb1d;
}

.chart-container {
    margin-top: 30px;
}

.chart-title {
    font-size: 1.2em;
    text-align: center;
    font-weight: bold;
    color: white;
    margin-bottom: 15px;
}

.dashboard-section canvas {
    width: 100% !important;
    max-height: 220px !important;
    min-height:200px !important;
    border-radius: 8px;
}

.pdf-export {
    font-family: 'Lato', sans-serif;
}

.pdf-export body {
    font-size:1.6rem;
    display:block;
    color:#59595b;
    background-color: white !important;  /* White background for PDF */
}

.pdf-export .dashboard-section {
    background-color: white !important; /* White background for section */
    color: #59595b !important; /* Dark text for section */
    box-shadow: 0 2px 10px rgba(0,0, 0, 0.1) !important;

}

.pdf-export .dashboard-card {
    background-color: white !important; /* White background for cards */
    color: #59595b !important; /* Dark text for cards */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;

}

.pdf-export .card-header {
    color: #59595b !important; /* Dark card headers */
    font-size:1rem;
    font-weight:400;
    display:block;
    background-color: white !important;  /* White background for PDF */

}

.pdf-export .card-value {
    color: #7ebb1d !important;
    font-size:1.8rem;
    font-weight:900;
    display:block;
    padding-top:5px;
}

.pdf-export .chart-container {
    background-color: white !important; /* Ensure chart container is also white */
}

.pdf-export .chart-title {
    color: #59595b !important; /* Dark chart titles */
    font-size:0.9em !important;
    font-weight:300;
    margin-bottom:7.5px !important;

}

.pdf-export .dashboard-section canvas {
    background-color: white !important; /* White background for canvas */
}

.pdf-export .dashboard-section h2 {
    color: #59595b !important;
    font-size: 1.3em !important;
    margin-bottom:15px !important;

}

.surveySlider {
    text-align: center;
    margin-top: 20px;
}

.surveySlider input[type="range"] {
    width: 100%;
    margin-top: 10px;
    -webkit-appearance: none;
    background: #ddd;
    height: 8px;
    border-radius: 5px;
    outline: none;
}

.surveySlider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.surveySlider input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.surveySlider .sliderLabels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    padding: 0 10px;
}

.surveySlider .sliderLabels span {
    font-size: 14px;
    color: white;
}


.databaseForm .formInput,
.databaseForm .formOutput {
    flex-basis: max-content;
    align-self: center;
    width: 100%;
    padding: 10px 20px;
    min-height: 100px;
    position: relative;
    text-align: left;
}
.databaseForm .formInput input{padding-bottom:5px;width: 100%;}
.databaseForm .formInput select{padding-bottom:3px;height:30px;width: 100%;}
.databaseForm .formOutput input{border:none !important;box-shadow:none;outline:none;background-color:transparent !important;pointer-events:none;}
.formBlock.inputCheck .databaseForm .formInput input:not(:placeholder-shown), .formBlock.inputCheck .databaseForm .formInput textarea:not(:placeholder-shown) {
    border-color: lime;
} 
.formBlock.inputCheck .databaseForm .formInput input[type="datetime-local"]{border-color:black !important;}

/* Location listing */
.locListing{width:100%;}
.locListing ul{padding:0;margin:0;display:table;list-style:none;width:100%;}
.locListing li{padding:0;margin:0;display:table-row;}

.locListing li .locIcon, .locListing li .locData, .locListing li .locAction{display:table-cell;position:relative;vertical-align:middle;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;}
.locListing li:first-child .locIcon, .locListing li:first-child .locData, .locListing li:first-child .locAction{border-top:none;}
.locListing li:last-child .locIcon, .locListing li:last-child .locData, .locListing li:last-child .locAction{border-bottom:none;}
.locListing li .locIcon{font-size:2rem;padding:5px 12px 0 12px;}
.locListing li .locData{width:100%;}
.locListing li .locTime{padding-right:5px;color:#98c1e7;}
.locListing li .locPlatform{padding-left:5px;}
.locListing li .locIP{padding-left:5px;font-size:.7rem;color:grey;}
.locListing li .locTime.active{color:#09e009;}
.locListing li .locPlace{font-size:.9rem;font-weight:bold;padding:8px 0 3px 0;}
.locListing li .locStatus{font-size:.7rem;padding:3px 0 12px 0;}
.locListing li .locAction{text-align:right;padding-right:12px;font-size:1.2rem;}
.locListing li .locAction a{text-decoration:none;color:#ffffff60;}
.locListing li .locAction a:hover {color:white;}

/* View listing */
.viewListing{width:100%;}
.viewListing ul{padding:0;margin:0;display:table;list-style:none;width:100%;}
.viewListing li{padding:0;margin:0;display:table-row;}

.viewListing li .locIcon, .viewListing li .locData, .viewListing li .locAction{display:table-cell;position:relative;vertical-align:middle;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20;}
.viewListing li:first-child .locIcon, .viewListing li:first-child .locData, .viewListing li:first-child .locAction{border-top:none;}
.viewListing li:last-child .locIcon, .viewListing li:last-child .locData, .viewListing li:last-child .locAction{border-bottom:none;}
.viewListing li .locIcon{font-size:1.6rem;padding:5px 12px 0 12px;color:grey;}
.viewListing li .locData{width:100%;}
.viewListing li .locTime{padding-right:5px;color:#98c1e7;}
.viewListing li .locPlatform{padding-left:5px;}
.viewListing li .locTime.active{color:#09e009;}
.viewListing li .locPlace{font-size:.8rem;font-weight:bold;padding:8px 0 3px 0;}
.viewListing li .locStatus{font-size:.7rem;padding:3px 0 12px 0;}
.viewListing li .locAction{text-align:right;padding-right:12px;font-size:1.2rem;}
.viewListing li .locAction a{text-decoration:none;color:#ffffff60;}
.viewListing li .locAction a:hover {color:white;}