/* Minification failed. Returning unminified contents.
(2289,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2290,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2291,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2707,43): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration'
(2708,35): run-time error CSS1039: Token not allowed after unary operator: '-animate-duration'
(17787,47): run-time error CSS1039: Token not allowed after unary operator: '-list-length'
(17792,52): run-time error CSS1039: Token not allowed after unary operator: '-list-length'
(17797,52): run-time error CSS1039: Token not allowed after unary operator: '-list-length'
(17813,39): run-time error CSS1039: Token not allowed after unary operator: '-list-length'
(17820,44): run-time error CSS1039: Token not allowed after unary operator: '-list-length'
(17828,44): run-time error CSS1039: Token not allowed after unary operator: '-list-length'
 */
BUTTON[type="button"], BUTTON {
    /*
    line-height: normal;
    font-size: 1em;
    cursor: pointer;
    border: 0;
    background: transparent;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    outline-color: #22a7ee;
 */
}

.button {
    line-height: normal;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    position: relative;
    display: inline-block;
    zoom: 1;
    vertical-align: baseline;
    margin: 0.125em;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    line-height: 120%;
    font-size: 1em;
    padding: .85em 1.2em .8em;
    font-weight: 600;
    -webkit-border-radius: 4em;
    -moz-border-radius: 4em;
    border-radius: 4em;
    /*
	box-shadow: 0 0.0625em 0.125em rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 0.125em 0.1875em rgba(0,0,0,.3);
	-moz-box-shadow: 0 0.125em 0.1875em rgba(0,0,0,.3);
	box-shadow: 0 0.125em 0.1875em rgba(0,0,0,.3);
	text-shadow: 0 0.0625em 0.0625em rgba(0,0,0,.5);
	background-position:center;
	 box-shadow: 0 0.125em 0.125em rgba(0, 0, 0, 0.05) inset, 0 0.0625em 0.125em rgba(0, 0, 0, 0.05), 0 0 0.0625em 0.0625em rgba(255, 255, 255, 0.2) inset, 0 0.0625em 0 rgba(255, 255, 255, 0.25) inset;
	 box-shadow: 0 0.125em 0.125em rgba(0, 0, 0, 0.05) inset, 0 0.0625em 0.125em rgba(0, 0, 0, 0.3), 0 0 0.0625em 0.0625em rgba(255, 255, 255, 0.1) inset, 0 0.0625em 0 rgba(255, 255, 255, 0.25) inset;
	*/
    line-height: normal;
    color: white;
}

.block {
    display: block;
    text-align: center;
}

.inline {
    display: inline;
    /*
    margin: 0 !important;
    padding: 0 !important;
    */
}

.blockCenter {
    display: block;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center;
    outline: none;
}

.round {
    -webkit-border-radius: 4em;
    -moz-border-radius: 4em;
    border-radius: 4em !important;
    outline: none !important;
}

.big {
    font-size: 1.2rem;
    font-weight: 600;
    padding: .6rem 1rem .6rem;
}

.big_wide {
    font-size: 1rem;
    font-weight: bold;
    padding: .6rem 2rem .6rem;
}

.big_wide2 {
    font-size: 1rem;
    font-weight: bold;
    padding: 1rem 2rem 1rem;
}

.fl_right {
    float: right;
}

.bigger {
    font-size: 1.4rem;
    font-weight: 600;
    padding: .7rem 1.3rem .7rem;
}

.medium {
    font-size: 1rem;
}

/*
.small {
    font-size: .8rem;
    padding: .45rem .8rem .45rem;
}
*/
.smaller {
    font-size: .625rem;
    font-weight: normal;
    padding: .4rem .6rem .4rem;
}

.gray {
    color: #333;
    border: solid 0.0625em #999999;
    background-color: #999999;
}

.white {
    text-shadow: none;
    color: #333;
    border: solid 0.0625em #D9DBF0;
    background: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#F2F2F2));
    background: -moz-linear-gradient(top, #fff, #F2F2F2);
    background: -o-linear-gradient(top, #fff, #F2F2F2);
}

.xwhite {
    font-weight: 600;
    box-shadow: none;
    text-shadow: 0 0.0625em 0.0625em rgba(0,0,0,0);
    color: #0161A7;
    background: #f1f1f1;
    /*
	border: solid 0.0625em #D9DBF0;
	background-repeat:no-repeat;
	background: #E7E7E7;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#E7E7E7));
	background: -moz-linear-gradient(top,  #fff,  #E7E7E7);
	background: -o-linear-gradient(top,  #fff,  #E7E7E7);
	background: linear-gradient(to bottom, #fff 0%, #E7E7E7 100%);
	*/
}

.blank, .link {
    color: #2B71BD;
    text-shadow: none;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

.nocolor {
    color: #000;
    text-align: inherit;
}

.black {
    color: white;
    background-color: #333;
    text-align: inherit;
}

.yellow {
    color: black;
    background-color: #FBFF53;
    font-weight: 400;
    text-shadow: none;
    box-shadow: none;
}

.orange {
    color: black; /*background-color: #E18806;*/
    background-color: #F8B106;
    font-weight: 600;
}

.red {
    color: white;
    background-color: #CC2027;
    text-align: inherit;
}

.blue {
    color: white;
    background-color: #2B71BD;
    text-align: inherit;
}

.aqua {
    color: white;
    background-color: #78b6d8;
    background-color: #0F7D91;
    text-align: inherit;
}

.greenb {
    color: white;
    background-color: #00CA65;
}

.green {
    color: white;
    background-color: #00C161;
}

.button-disabled {
    color: white;
    background-color: #777;
}

/*@media only screen and (min-device-width: 64em) {*/
@media (hover: hover) {
    .button:hover {
        text-decoration: none;
        color: white;
        filter: alpha(opacity=90);
        opacity: 0.90;
        -moz-opacity: 0.90;
        /*box-shadow: 0 0 0.25em rgba(0,0,0,.5);
		transition: box-shadow .6s;
		*/
        transition: background-color .6s;
    }

    .gray:hover {
        color: #e9e9e9;
        filter: alpha(opacity=100);
        opacity: 1;
        -moz-opacity: 1;
    }

    .gray:active {
        position: relative;
        top: 0;
    }

    .white:hover {
        color: #5a5ab5;
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#F2F2F2));
        background: -moz-linear-gradient(top, #fff, #F2F2F2);
        background: -o-linear-gradient(top, #fff, #F2F2F2);
    }

    .white:active {
        color: #22a7ee;
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#F2F2F2));
        background: -moz-linear-gradient(top, #fff, #F2F2F2);
        background: -o-linear-gradient(top, #fff, #F2F2F2);
    }

    .xwhite:hover {
        box-shadow: none;
        text-decoration: none;
        color: #22A7EE;
    }

    .xwhite:active {
        box-shadow: none;
        color: #0080C4;
    }

    .blank:hover,
    .link:hover {
        box-shadow: none;
        text-decoration: none;
        color: #22A7EE;
    }

    .blank:active,
    .link:active {
        box-shadow: none;
        color: #0174C6;
    }

    .blank:visited,
    .link:visited {
        box-shadow: none;
        color: #0174C6;
    }

    .nocolor:hover {
        font-weight: normal;
        box-shadow: none;
        text-decoration: none;
        color: #22A7EE;
    }

    .nocolor:active {
        font-weight: normal;
        box-shadow: none;
        color: #000;
    }

    .yellow:hover {
        color: black;
    }

    .orange:hover {
        font-weight: 600;
        color: black;
    }

    .disabled:hover {
        filter: alpha(opacity=100);
        opacity: 1;
        -moz-opacity: 1;
    }
}

.nobr {
    white-space: nowrap;
}

.r_align {
    text-align: right;
}

.button_icon {
    border: 0;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    display: inline-block;
    margin-left: .3em;
}

.button_icon2 {
    border: 0;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
    display: inline-block;
    margin-right: .3rem;
}

.button_icon_white {
    border: 0;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    display: inline-block;
    margin-left: .3em; /*-webkit-filter: invert(180%); filter: invert(180%);*/
}

.button_icon_black {
    border: 0;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    display: inline-block;
    margin-left: .3em;
    -webkit-filter: invert(180%);
    filter: invert(180%);
}

.button SPAN {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    border: 0;
    margin: 0;
}

.button_plus {
    font-weight: 300;
    font-size: 1.8rem;
    display: inline-block;
    vertical-align: middle;
}

.button_text {
    display: inline-block;
    vertical-align: middle;
}

.text-uppercase {
    text-transform: uppercase;
}

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

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

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

@media screen and (max-width: 34em) {
    /*mobile fixes*/
    .btn-block-mobile {
        display: block;
        padding-right: 0;
        padding-left: 0;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
        width: 100%;
    }
}
.message_alert .alert {
    border-radius: 0 !important;
}

.message_row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 0.0625rem solid rgba(0,0,0,0.1);
    width: 100%;
    position: relative;
    text-align: left;
    background-color: #f4f5f7;
    box-sizing: border-box;
    cursor: pointer;
}

.message_c1, .message_c2, .message_c3, .message_c4, .message_c5, .message_c6, .message_c3_client, .message_c4_client, .message_c5_client, .message_c6_client {
    padding: 0.7em 0;
    display: flex;
    flex-direction: column;
}

.message_c1 {
    width: 4em;
    margin: auto 0 auto 0.3em;
    padding-left: 0.7em;
    text-align: left;
}

.message_c2 {
    width: 7em;
    margin: auto;
    text-align: center;
    display: none;
}

.message_c3 {
    min-width: 22em;
    padding-left: 4em;
}

.message_c4 {
    width: 50%;
}

.message_c5 {
}

.message_c6 {
    width: 20%;
    color: #666;
    text-align: right;
    padding-right: 2em;
    margin-left: auto;
}

.message_c3_client {
    min-width: 22em;
    padding-left: 4em;
}

.message_c4_client {
    width: 40%;
}

.message_c5_client {
    width: 20%;
}

.message_c6_client {
    width: 12%;
    color: #666;
    text-align: right;
    padding-right: 2em;
    margin-left: auto;
}

.message_profile_image, .message_profile_image_detail {
    width: 5em;
    height: 5em;
    border-radius: 5em;
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
    background-position: center center;
    background-size: cover;
    margin: auto;
}

.message_profile_image_detail {
    width: 4em;
    height: 4em;
    border-radius: 4em;
}

.message_title {
    font-size: 1.8em;
}

.message_text {
    white-space: pre-wrap;
    font-size: 1.1em;
    line-height: 150%;
}

.NEW {
    background-color: white;
}

    .NEW .message_c3 {
        font-weight: bold;
    }

.new_circ, .read_circ {
    border-radius: 2em;
    background-color: orange;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 0.6em;
    left: 3.5em;
}

.read_circ {
    background-color: blue;
}

.message_circ_t {
    color: white;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.8em;
    display: inline-block;
    padding: 0.3em 1em;
}

.click_username {
    cursor: pointer;
}
/*
.messagecb {
    display:inline-block;
    vertical-align:middle;
}
*/
fieldset:last-child {
    margin-bottom: 0;
}

input[type="checkbox"].messagecb_cb_enabled {
    cursor: pointer;
}

input[type="checkbox"].messagecb {
    position: absolute;
    height: 1.5em;
    width: 1.5em;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    opacity: 0;
    line-height: 1.5em;
}

    input[type="checkbox"].messagecb + label {
        cursor: pointer;
        /*padding: .5em;*/
        font-weight: 600;
        margin: 0;
    }

        input[type="checkbox"].messagecb + label:before {
            flex: 0 1 auto;
            background-color: #Fff;
            height: 1.5em;
            width: 1.5em;
            display: inline-block;
            vertical-align: middle;
            padding: 0 0 0 0;
            border-radius: 0.3rem;
            cursor: pointer;
            content: " ";
            -webkit-transition: all 0.30s ease-in-out;
            -moz-transition: all 0.30s ease-in-out;
            -ms-transition: all 0.30s ease-in-out;
            -o-transition: all 0.30s ease-in-out;
            outline: none;
            /*margin: .2em .5em .2em 0px;*/
            margin: 0;
            border: 0.2rem solid #DDDDDD;
        }
    /*
input[type="checkbox"].messagecb + label:before {
}
*/
    input[type="checkbox"].messagecb:focus + label:before {
        box-shadow: 0 0 0.2rem rgba(81, 203, 238, 1);
        border: 0.2rem solid rgba(81, 203, 238, 1);
    }

    input[type="checkbox"].messagecb:checked + label:before {
        background: url(/content/images/iws_check.svg) no-repeat;
        background-size: contain;
        background-color: #Fff;
    }

    input[type="checkbox"].messagecb:checked:focus + label:before {
        background: url(/content/images/iws_check.svg) no-repeat;
        background-size: contain;
        background-color: #Fff;
    }
    /*
input[type="checkbox"].messagecb:checked + label {
}
*/
    input[type="checkbox"].messagecb:checked + label .task_points {
        color: #eb5a00;
    }

input[type="checkbox"][disabled].messagecb + label:before {
    background-color: #f2f2f2;
}

input[type="checkbox"].mobile_messagecb_edit + label:before {
    display: none;
    height: 0;
    width: 0;
}

.desktop_hide {
    display: none !important;
}

@media only screen and (min-device-width: 64em) {
}

@media (hover: hover) {
    /*hovers only*/

    .message_row:hover {
        box-shadow: 0 0 0.3em rgba(0,0,0,0.3);
        z-index: 10000;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
}
/*
@media screen and (max-width: 80em) {
}

@media screen and (max-width: 50em) {
}
*/
@media screen and (max-width: 46em) {
    /*mobile fixes & ipad narrow*/

    .message_row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .message_c1 {
        flex: 0 0 auto;
        margin: auto 0;
    }

    .message_c2 {
        width: 4em;
        flex: 0 0 auto;
        display: none;
    }

    .message_c3 {
        max-width: 55%;
        min-width: auto;
        padding-left: 0;
        flex: 1 1 auto;
        text-align: left;
        margin: auto auto auto 0;
    }

    .message_c4 {
        width: 100%;
        padding-top: 0;
        margin-top: -0.2rem;
        margin-left: 4rem;
        font-size: 0.9em;
    }

    .message_c6 {
        position: absolute;
        right: 0.5em;
        top: 0.3em;
        width: 30%;
        text-align: right;
        font-size: 0.8em;
        padding-right: 0;
    }

    .message_c3_client {
        max-width: 55%;
        min-width: auto;
        padding-left: 0;
        flex: 1 1 auto;
        text-align: left;
        margin: auto auto auto 0;
    }

    .message_c4_client {
        width: 100%;
        padding-top: 0;
        margin-top: -0.2rem;
        margin-left: 4rem;
        font-size: 0.9em;
    }

    .message_c5_client {
        width: 100%;
        padding-top: 0;
        margin-top: -0.2rem;
        margin-left: 4rem;
        font-size: 0.9em;
    }

    .message_c6_client {
        position: absolute;
        right: 0.5em;
        top: 0.3em;
        width: 30%;
        text-align: right;
        font-size: 0.8em;
        padding-right: 0;
    }

    .message_profile_image, .message_profile_image_detail {
        width: 3em;
        height: 3em;
        border-radius: 3em;
    }

    .message_title {
        font-size: 1.3em;
    }

    .new_circ, .read_circ {
        width: 0.8em;
        height: 0.8em;
        top: 1.1em;
        left: 2.6em;
    }

    .message_circ_t {
        position: absolute;
        left: -999em;
    }

    .message_select_all {
        margin-left: 0.7em !important;
    }
}

@media screen and (min-width:34em) and (max-width: 46em) {
}

@media screen and (max-width: 34em) {
    /*mobile fixes*/
    .round-icon-btn i {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .round-icon-btn {
        padding: .6rem 1rem !important;
    }
}
html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

BODY, INPUT, SELECT, OPTION, DIV, P, SPAN, BR, TD, TH, A, TEXTAREA, BUTTON {
    font-family: 'Montserrat','Helvetica Neue',roboto, helvetica, arial, verdana, sans-serif;
}

INPUT, TEXTAREA {
    font-size: 1em;
}

BODY {
    margin: 0;
    padding: 0;
    background-color: #F4F5F7;
    width: 100%; /* overflow-x:hidden;*/
}

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
}

FORM {
    display: inline;
}

a, a:active, a:visited, a:focus {
    text-decoration: none;
}

IFRAME, IMG {
    border: 0;
}

BUTTON {
    outline-color: #22a7ee; /*outline:0;*/
}

.skip, a.skip:link {
    position: absolute;
    top: -999em;
    left: -999em;
    height: 0.06em;
    width: 0.06em;
    text-align: left;
    overflow: hidden;
    background-color: black;
}

a.skip:active, a.skip:focus, a.skip:hover {
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible;
    color: white;
    background-color: black;
    z-index: 1001;
}

.h1_w {
    padding: 2em 5% 0.5em 5%;
}

H1.title {
    font-size: 3em;
    color: #333;
    font-weight: 300;
    margin: 0em auto 0em auto;
    padding: 0;
    display: block;
    line-height: normal;
    font-style: normal;
    text-align: left;
}

h1.title_nobg {
    margin: 1rem auto 1.5rem auto;
}

H1.title2 {
    color: #333;
    font-size: 1.6em;
    margin: 0 0 0 0;
    padding: 0;
    font-weight: 700;
    line-height: 115%;
}

    H1.title2 SUP {
        font-size: .3em;
        line-height: 0;
        vertical-align: super;
        top: -0.5em;
        position: relative;
    }

H1.hwhite {
    color: white;
}

H2.title {
    color: #333;
    font-family: 'Oswald';
    font-size: 1.3em;
    margin: 0.5em auto 0.5em auto;
    padding: 0;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
}

    H2.title span {
        font-family: 'Oswald';
    }

H3.title {
    color: #666666;
    font-size: 1.9em;
    margin: 0 0 .5em 0;
    padding: 0;
    font-weight: 300;
    line-height: 115%;
}

    H3.title SUP {
        font-size: .3em;
        line-height: 0;
        vertical-align: super;
        top: -0.5em;
        position: relative;
    }

INPUT {
    font-size: 1em;
    box-sizing: border-box;
}

SELECT, TEXTAREA {
    font-size: 1em;
    background-color: #FFF;
    border-collapse: collapse;
    box-sizing: border-box;
}

SELECT {
    border: 0.0625em solid #A9A9A9;
}

FIELDSET {
    border: 0;
    display: inline;
}

MAIN {
    display: block;
    min-height: 38em;
}

.iframe_inv {
    overflow: hidden;
    width: 0.0625em;
    height: 0.0625em;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.center_tag {
    text-align: center !important;
}

#page_center {
    text-align: left;
    margin: auto; /*overflow-x:hidden; height:100%;*/
}

#page_bg {
    text-align: left;
    margin-left: 15em;
    box-sizing: border-box;
    position: relative;
    /*overflow: auto;*/
    max-height: auto;
    min-height: 100%;
    transition: transform 0.3s;
    transform: translateX(0);
    top: auto; /*width: calc(100% - 15rem); float:left; */
    box-shadow: 0 -0.5em 0.5em rgba(0,0,0,.15);
}

.page_width {
    text-align: center;
    padding: 1em 5% 1em 5%;
}

/*masthead*/
#nav_top_w {
    width: 100%;
    padding-top: .7em;
    padding-bottom: .7em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    box-shadow: 0 0 0.5em rgba(0,0,0,.15);
    background-color: #fff;
    text-align: left;
    font-size: 1em;
    position: relative;
    z-index: 1002;
}

.modal-open #nav_top_w,
.modal-open .sticky-top {
    position: relative;
    z-index: 1000;
}

.nav_logo {
    flex: 1 1 auto;
    margin: auto;
}

.logo {
    height: 3.8em;
    margin: 0.3em 3em 0.3em 1em;
}

.logo_co {
    min-width: 15em;
    max-width: 30em;
    margin: auto 3em auto 1em;
}

.nav_side_a {
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: block;
}

.nav_points_bar_w {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: auto;
    flex: 1 4 auto;
}

.nav_points_bar_w2 {
    margin: auto 0;
    text-align: left;
    width: 50%;
}

.nav_points_bar_c1 {
    margin: auto;
    flex: 1 6 auto;
}

.nav_points_bar_c2 {
    margin: auto 1em;
    flex: 1 1 auto;
}

.nav_points_bar_c3 {
    margin: auto;
}

.nav_points_bar_c4 {
    margin: 1.5rem auto 0 auto;
    flex: 1 1 auto;
}

.nav_points_bar_bg {
    background-color: #E8E9F0;
    height: 0.8rem;
    border-radius: 0.8rem;
    text-align: left;
    overflow: hidden;
    width: 100%;
    font-size: .1em;
}

.nav_points_bar_solid {
    background-color: #00DF70;
    height: 0.8rem;
    border-radius: 0.8rem;
}

.nav_points_bar_t1 {
    font-size: 0.9em;
    font-weight: 600;
    color: #333;
}

.nav_points_bar_t2 {
    font-size: 1.9em;
    font-family: 'Oswald';
    font-weight: 500;
    color: #333;
}

.nav_points_bar_t3 {
    font-size: 0.7em;
    text-transform: uppercase;
    font-weight: 600;
    color: #333;
}

.nav_points_bar_t5 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #FFF;
}

.nav_points_bar_t6 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #FFF;
}

.nav_sparkpoints_w {
    text-align: center;
    margin: auto 3em;
    max-width: 10em;
    flex-wrap: nowrap;
    display: flex;
    align-items: center;
}

.nav_sparkpoints_t1,
.nav_tokens_t1 {
    font-size: 1.9em;
    font-family: 'Oswald';
    font-weight: 500;
    color: #333;
}

.nav_sparkpoints_t2 {
    font-size: 0.7em;
    text-transform: uppercase;
    font-weight: 600;
    color: #333;
}

.SparkPointsHeaderTotal {
    min-width: 1.2em;
    display: inline-block;
}

.nav_notifications_w {
    align-self: flex-end;
    margin: auto 2em auto auto;
    position: relative;
    text-align: center;
}

.nav_notifications2_w {
    margin: auto 3em auto auto;
    position: relative;
    text-align: center;
    flex-wrap: nowrap;
    display: flex;
    align-items: center;
}

.nav_notifications_a {
    display: inline-block;
    vertical-align: middle;
}

.nav_notifications {
    background-color: #EB062C;
    line-height: 1.4em;
    height: 1.4em;
    min-width: 1.4em;
    border-radius: 1.4em;
    text-align: center;
    position: absolute;
    top: 0.4em;
    right: 0.4em;
}

.nav_notifications_t1 {
    color: white;
    font-size: .9em;
    font-weight: 700;
    margin: auto;
}

.nav_notifications_bell {
    display: inline-block;
    vertical-align: middle;
    height: 2em;
    width: 2em;
}

.nav_profile_w {
    text-align: right;
    margin: auto 1em auto 0em;
}

.nav_top_spacer {
    flex: 1 1 auto;
}

.nav_i_top {
    height: 2em;
    width: 2em;
    margin-right: 0.8em;
    margin-top: auto;
    margin-bottom: auto;
}

.nav_i_top2 {
    height: 2em;
    width: 2em;
    margin-right: 0em;
    margin-top: auto;
    margin-bottom: auto;
}

.nav_drop_icon_width {
    width: 2em;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
}

.dropdown-item-hack {
    display: block;
    width: 100%;
    padding: .25rem 2.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.nav-fa-color1 {
    color: #7884C0;
}

.nav_profile_w .dropdown-item {
    padding: 0.8em 2.5rem;
}

/*
.nav_profile_w .dropdown-toggle::after {
    display: none;
}
*/

.nav_profile_a {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    font-weight: 600 !important;
    padding-left: 0 !important;
}

.nav_top_username {
    font-size: 0.9em;
    display: inline-block;
    max-width: 13em;
    vertical-align: middle;
    white-space: normal;
    text-align: left;
}
/*
.dropdown:hover > .dropdown-menu {
    position: absolute;
    will-change: transform;
    top: 0px;
    left: 0px;
    transform: translate3d(-32px, 47px, 0px);
    display: block;
}

.dropdown > .dropdown-toggle:active {
    pointer-events: none;
}
*/
/*
    .nav_profile_a:focus {
        outline: 2px solid black !important;
    }
*/
.nav_login {
    margin: auto 2em auto auto !important;
    text-transform: uppercase;
}

.center {
    text-align: center;
    margin: auto;
}
/* hide mobile sections */
#mobileNav {
    display: none;
}

#nav_list_icon_img {
    width: 1.5em;
    padding: 0.75em 0;
    margin-left: 1em;
    margin-right: 0.5em;
    box-sizing: border-box;
    display: inline-block;
}

.bnav_list_icon_img, .bnav_home, .bnav_back, .bnav_mail, .bnav_notifications {
    width: 1.5em;
    padding: 0.8em 0;
    margin-left: 1em;
    margin-right: 1em;
    box-sizing: border-box;
    display: inline-block;
}

.nav_sublist_icon_img {
    position: absolute;
    top: 0.75em;
    right: 4%;
    width: 1.5em;
    height: 1.5em;
    opacity: .5;
    transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
}

.nav_close_menu {
    width: 1.5em;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: 1em;
    top: 1.4em;
}

.nav_close_menu_a {
    display: block;
    height: 2em;
}

.logo_open {
    height: 2.1em;
    margin-right: 2em;
    display: inline-block;
    vertical-align: middle;
}

.logo_open_co {
    max-width: 84%;
    margin-right: 2em;
    margin-top: 0.5em;
    display: inline-block;
    vertical-align: middle;
}

#nav_bg {
    background-color: rgba(0,0,0,.5);
    overflow: auto;
    width: 100%;
    max-width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1022;
    display: none;
}

/* Styles for Menu Items */
#nav_w {
    max-width: 15em;
    min-width: 15em;
    width: 15em;
    margin: 0;
    background-color: #F4F5F7;
    text-align: left;
    font-size: 1em;
    position: absolute;
    -webkit-transform: translateX(0);
    transition: transform 0.3s;
    transform: translateX(0);
    display: block;
}

#nav {
    list-style: none;
    padding: 0;
    margin: 0 auto 0 auto;
    padding: 0;
    width: 100%;
}

    #nav LI {
        display: block;
        position: relative;
        margin: 0;
    }

        #nav LI.n0 {
            display: none;
            padding: 1em;
        }

        #nav LI.nlast {
            text-align: center;
            padding: 1em;
        }

    #nav sup {
        top: 0.2em;
        font-size: 60%;
        line-height: 0;
        vertical-align: super;
    }
/*icon*/
.nav_i {
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    vertical-align: middle;
}

.nav_link {
    display: inline-block;
    vertical-align: middle;
    max-width: 10.5em;
    margin-left: 0.5em;
}

/*first level nav*/
.nav_a1, .nav_a2, .nav_a3, .nav_a4, .nav_a5, .nav_a6, .nav_a7, .nav_a8, .nav_a9, .nav_a10,
.nav_asec {
    transition: color .3s ease-in, background-color .3s ease-in;
    padding: 0.8em 0.5em 0.8em 1em;
    display: block;
    color: #000;
    font-weight: 600 !important;
    transition: background-color 0.5s;
    text-decoration: none !important;
    position: relative;
}

.selected {
    background-color: #E8E9F0;
    color: #000 !important;
}

a.nav_a1:active, a.nav_a3:active, a.nav_a4:active, a.nav_a5:active, a.nav_a7:active, a.nav_a8:active, a.nav_a9:active, a.nav_a10:active,
a.nav_asec:active {
    /*-webkit-tap-highlight-color: #00DF70 !important;*/
    background-color: #00DF70 !important;
}

/*no icon links, and second level*/
.nav_a7, .nav_a8, .nav_a9, .nav_a10,
.nav_asec {
    font-weight: 500 !important;
}

/*second level*/
#sub_vault, #sub_healthy, #sub_mycompany, #sub_mytrackers, #sub_city, #sub_community, #sub_myhealthcare {
    /*
    display: none;
    */
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: rgba(255,255,255,0.5);
}

#sub_content {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: rgba(255,255,255,0.5);
}

.nav_asec {
    padding-left: 2em;
    padding-right: 2em;
}

/*company logo and seperating line*/
.nav_company_logo {
    max-width: 9em;
    max-height: 9em;
}

.nsep {
    border-top: 0.0625rem solid rgba(0,0,0,0.1);
}

.subnav-open ul {
    display: block;
}

.nav_sublist_icon_img {
    transform: rotate(0deg);
}

.subnav-closed ul {
    display: none;
}

.collapsed .nav_sublist_icon_img {
    transform: rotate(180deg);
}

#footer {
    clear: both;
    display: block;
    margin: 0em auto 0em auto;
    padding: 2em 0 6em 0;
    text-align: center;
}

    #footer .disclaimer {
        font-size: .9rem;
        color: #666;
        display: inline-block;
        margin: 1em auto 0em auto;
    }

    #footer .footer_links {
        display: inline-block;
        margin: 0 1em;
        color: #666;
        font-size: .9rem;
    }

.footer_presented_by {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.75em;
}

.footer_partner {
    margin: 1em auto;
    width: 10em;
    display: block;
    opacity: .5;
}

.icon_i {
    display: inline-block;
    vertical-align: middle;
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.5em;
    line-height: 1;
}

.icon_text {
    display: inline-block;
    vertical-align: middle;
}

video {
    width: 100% !important;
    height: auto !important;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    /*padding-top: 25px;*/
    height: 0;
    margin: 0;
    box-sizing: border-box;
}

    .videoWrapper iframe, .videoWrapper object,
    .videoWrapper embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

.profile_alert .alert {
    border-radius: 0 !important;
}

.btn-lg {
    padding: .9rem 1.8rem;
    font-size: 1.15rem;
    line-height: 1.4;
}

/*Hack some styles for the circle graph in header */
.SparkPointsCirc.p100.green.c100:after {
    background-color: white !important;
}

.SparkPointsCirc.c100:after {
    background-color: white;
}

.pie, .c100 .bar, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill {
    border: 0.08em solid #00DF70 !important;
}

.SparkPointsCirc .bar {
    background-color: #E8E9F0 !important;
}

.sparkpoints_btn_icon {
    margin-left: -0.5em;
}

.GetSparkPointsBtn Span {
    vertical-align: middle;
    display: inline-block;
}

.GetSparkPointsBtn {
    white-space: normal !important;
}

.bnav {
    display: none;
}

.offscreen, .offscreenHeader {
    left: -999em;
    position: absolute;
}

.desktop_show {
    display: block !important;
}

.desktop_show_inline_block {
    display: inline-block !important;
}

.desktop_show_flex {
    display: flex !important;
}

.desktop_hide {
    display: none !important;
}

/*.accordion-toggle {
    background-color: #E1ECF6;
    color: #3681C5;
}

.accordion-toggle.collapsed {
    background-color: white;
    color: #353B41;
    font-size: 16px;
}

.nav_and_page {
    background-color: white;
}*/

@media (hover: hover) {
    /*hovers*/

    input [type="button"]:hover, BUTTON[type="button"]:hover, BUTTON:hover {
        opacity: 0.80;
    }

    #footer .footer_links:hover {
        color: #22a7ee;
    }

    a:hover,
    a:active,
    .nav_sparkpoints_w {
        text-decoration: none !important;
    }

    /*first level hovers*/
    .nav_a1:hover,
    .nav_a2:hover,
    .nav_a3:hover,
    .nav_a4:hover,
    .nav_a5:hover,
    .nav_a6:hover,
    .nav_a7:hover,
    .nav_a8:hover,
    .nav_a9:hover,
    .nav_a10:hover,
    .nav_asec:hover {
        color: #333 !important;
        background-color: #FFF;
        text-decoration: none !important;
    }

    /*second level hovers*/
    .nsec A:hover {
        color: #333 !important;
        background-color: #E8E9F0;
        background-color: #FFF;
        text-decoration: none !important;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/

    html, body {
        font-size: .9rem;
    }

    .hide_ipad {
        display: none !important;
    }
}

@media only screen and (min-width : 48em) and (max-width : 64em) {
    html, body {
        font-size: 0.85rem;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) and (orientation : portrait) {
    /* IPAD VERTICAL ONLY*/

    .hide_ipad_vertical {
        display: none !important;
    }
}

@media screen and (max-width: 86em) {
    .nav_points_bar_w {
        display: none;
    }
}

@media screen and (max-width: 63em) {
    /*just under the width of ipad*/

    html, body {
        font-size: .9rem;
    }

    H1.title {
        font-size: 2em;
    }

    H1.title2 {
        font-size: 1.4em;
    }

    H2.title {
        font-size: 1.2em;
        text-align: center;
        margin: 0 auto .5em auto;
    }

    H3.title {
        font-size: 1.1em;
    }

    #footer .disclaimer {
        font-size: .7em;
        display: block;
    }

    #footer .footer_links {
        margin: 0 .5em;
        font-size: .7em;
    }

    #page_center {
        width: 100%;
        /*overflow-x: hidden;*/
        margin: 0;
    }

    #page_bg {
        margin: 0;
        max-width: 100%;
        padding: 0 0;
        text-align: center;
        overflow-x: hidden !important;
    }

    #nav_top_w {
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        box-shadow: 0 0 0.5em rgba(0,0,0,0.15);
    }

    .logo {
        height: 2.3em;
        margin: auto 1em;
    }

    .nav_points_bar_w, .nav_notifications2_w, .nav_profile_w, #sparkpoints_count {
        font-size: .8rem;
    }

    .nav_sparkpoints_w, {
        font-size: .8rem;
    }

    .nav_notifications_w {
        margin-right: 1em;
    }

    .nav_and_page {
        display: block;
    }

    #mobileNav {
        display: block;
        position: relative;
        text-align: left;
    }
    /*
    .nav_mobile_menu { position:absolute; right:.25em; top:.25em;
    }
    */
    .nav_mobile_icon {
        height: 1.5em;
        width: 1.5em;
        padding: .75em;
        display: inline-block;
        vertical-align: middle;
    }

    .nav_list_icon_img_a {
        display: block;
    }

    #nav LI.n0 {
        display: block;
    }

    #nav LI.nlast {
        padding-bottom: 5em;
    }

    #nav_w {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: scroll;
        width: 18em;
        max-width: 18em;
        height: 100%;
        max-height: 100%;
        -webkit-text-size-adjust: 100%;
        position: fixed;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        -webkit-transform: translateX(-102%);
        transform: translateX(-102%);
        box-shadow: 0 -0.5em 0.8em rgba(0,0,0,.2);
        z-index: 1022;
        top: 0;
        bottom: 0;
    }

    .nav_top_username {
        position: absolute;
        left: -999em;
    }
}

@media screen and (max-width: 48em) {
    /*mobile fixes and ipad narrow*/

    .h1_w {
        padding: 1em 5% 1em 5%;
    }

    h1.title_nobg {
        margin: 0rem auto 1rem auto;
    }

    H1.title {
        font-size: 1.6em;
    }

    H1.title2 {
        font-size: 1.1em;
        margin: 0 0 0.5em 0;
    }

    .logo {
        height: 2.3em;
        margin: auto 1em auto 0.25em;
    }

    .logo_co {
        margin: auto;
        min-width: 10em;
        max-width: 25em;
    }

    .nav_sparkpoints_w .nav_notifications2_w, .nav_profile_w {
        font-size: .75em;
        margin: auto auto;
    }

    .nav_notifications_w {
        margin-right: 1em;
        margin-left: 1em;
    }

    .nav_points_bar_w {
        display: none;
    }

    .nav_and_page {
        display: block;
    }

    .footer_partner {
        width: 8em;
    }

    .nav_login {
        font-size: 0.8em !important;
        margin: auto 1em auto auto !important;
    }

    .tablet_show {
        display: block !important;
    }

    .tablet_show_inline_block {
        display: inline-block !important;
    }

    .tablet_show_flex {
        display: flex !important;
    }

    .tablet_hide {
        display: none !important;
    }
}

@media screen and (max-width: 36em) {
    html, body {
        font-size: 1rem;
    }

    #mobileNav {
        display: none;
    }

    .logo {
        margin: auto 1em auto 1em;
    }

    .bnav {
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: white;
        box-shadow: 0 0 10px rgba(0,0,0,0.2);
        z-index: 1023;
        width: 100%;
        height: 3em;
        display: flex;
        justify-content: space-between;
        align-content: center;
    }

    .bnav_mail_a {
        position: relative;
    }

    #nav_w {
        width: 80%;
        max-width: 80%;
        -webkit-transform: translateX(602%);
        transform: translateX(602%);
    }

    .logo_co {
        min-width: 5em;
        max-width: 15.5em;
    }

    .nav_profile_w .dropdown-toggle::after {
        margin-left: -0.2em;
        color: #333;
    }

    .nav_sparkpoints_w {
        /*
        display: none !important;
             */
        margin: auto 1em auto 0;
    }

    #sparkpoints_count {
        display: none !important;
    }

    .nav_notifications2_w {
        display: none !important;
    }

    .nav_i_top2 {
        width: 1.5em;
        height: 1.5em;
    }

    .nav_points_bar_w2 {
        margin: auto 0;
        text-align: left;
        width: 100%;
    }

    .nav_points_bar_t5 {
        font-size: 1rem;
    }

    .nav_points_bar_t6 {
        font-size: 0.8rem;
    }

    .desktop_only {
        display: none !important;
    }

    .mobile_show_inline_block {
        display: inline-block !important;
    }

    .mobile_show {
        display: block !important;
    }

    .mobile_show_flex {
        display: flex !important;
    }

    .mobile_hide {
        display: none !important;
    }
}

@media screen and (max-width: 24em) {
    /*iphone 7*/
    .nav_sparkpoints_t1,
    .nav_tokens_t1 {
        font-size: 1.2rem;
    }

    .logo {
        height: 2.1em;
    }
}

@media screen and (max-width: 20em) {
    /*iphone 5*/
    html, body {
        font-size: 0.9rem;
    }

    H1.title {
        font-size: 1.4em;
        margin: 0 auto .5em 5%;
    }
}

@media print {
    body {
        font-size: 0.9em;
    }

    #page_bg {
        margin-left: 0;
        top: 0 !important;
    }

    #nav_bg, .skip, .nav_points_bar_w, .nav_sparkpoints_w, .nav_notifications2_w, .nav_profile_w, .article_mcol2, #see_more_tags, .print_btn, .author_pic_w, .nav_login {
        display: none !important;
    }

    .print_message {
        display: inline-block;
        text-align: right;
        color: #666;
    }

    .article_mcol1 {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .logo {
        height: 2em;
        margin: auto 0em auto 0em;
    }

    .h1_w {
        padding: 2em 0 1em 0;
    }

    H1.articleTitle {
        font-size: 1.8em !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .blog_post_body {
        margin-top: 0.5em;
    }

    .det_pic_size {
        display: none !important;
    }

    .vault_block {
        text-decoration: none !important;
    }

        .vault_block .btn-link {
            display: none !important;
        }

    .h2_line {
        border-bottom: 0 !important;
    }

    .sticky-top {
        position: relative !important;
    }

    .row {
        display: block !important;
    }
}

@media (min-width:1025px) AND (max-width: 1569px) {
    .hide_small_desktop {
        display: none !important;
    }
}
.rangeslider,
.rangeslider__fill {
    display: block;
    -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.rangeslider {
    background: #e6e6e6;
    position: relative;
}

.rangeslider--horizontal {
    height: 20px;
    width: 100%;
}

.rangeslider--vertical {
    width: 20px;
    min-height: 150px;
    max-height: 100%;
}

.rangeslider--disabled {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    opacity: 0.4;
}

.rangeslider__fill {
    background: #22a7ee;
    position: absolute;
}

.rangeslider--horizontal .rangeslider__fill {
    top: 0;
    height: 100%;
}

.rangeslider--vertical .rangeslider__fill {
    bottom: 0;
    width: 100%;
}
/*
.rangeslider__handle {
  background: white;
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  width: 40px;
  height: 40px;
  position: absolute;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.rangeslider__handle:after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.13)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
  background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.rangeslider__handle:active, .rangeslider--active .rangeslider__handle {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12)));
  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
}
*/
.rangeslider--horizontal .rangeslider__handle {
    top: -10px;
    touch-action: pan-y;
    -ms-touch-action: pan-y;
}

.rangeslider--vertical .rangeslider__handle {
    left: -10px;
    touch-action: pan-x;
    -ms-touch-action: pan-x;
}

input[type="range"]:focus + .rangeslider .rangeslider__handle {
    -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
    -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
}
:root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
}

.grow {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

@media (hover: hover) {
    .grow:hover {
        -webkit-transform: scale(1.3);
        -moz-transform: scale(1.3);
        -ms-transform: scale(1.3);
        -o-transform: scale(1.3);
        transform: scale(1.3);
    }
}

.growSmall {
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

@media (hover: hover) {
    .growSmall:hover {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@-webkit-keyframes slideInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-25%);
        transform: translateX(-25%);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-moz-keyframes slideInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-25%);
        transform: translateX(-25%);
    }

    100% {
        -moz-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-25%);
        -webkit-transform: translateX(-25%);
        -ms-transform: translateX(-25%);
        transform: translateX(-25%);
    }

    100% {
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.slideInLeft {
    animation: slideInLeft 1s ease-in-out;
    -moz-animation: slideInLeft 1s ease-in-out;
    -webkit-animation: slideInLeft 1s ease-in-out;
    -ms-animation: slideInLeft 1s ease-in-out;
}

@-webkit-keyframes slideInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(25%);
        transform: translateX(25%);
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-moz-keyframes slideInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(25%);
        transform: translateX(25%);
    }

    100% {
        -moz-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(25%);
        -webkit-transform: translateX(25%);
        -ms-transform: translateX(25%);
        transform: translateX(25%);
    }

    100% {
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.slideInRight {
    animation: slideInRight 1s ease-in-out;
    -moz-animation: slideInRight 1s ease-in-out;
    -webkit-animation: slideInRight 1s ease-in-out;
    -ms-animation: slideInRight 1s ease-in-out;
}

@-webkit-keyframes slideInTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-80px);
        transform: translateY(-80px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-moz-keyframes slideInTop {
    0% {
        opacity: 0;
        -moz-transform: translateY(-80px);
        transform: translateY(-80px);
    }

    100% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes slideInTop {
    0% {
        opacity: 0;
        -moz-transform: translateY(-80px);
        -webkit-transform: translateY(-80px);
        -ms-transform: translateY(-80px);
        transform: translateY(-80px);
    }

    100% {
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.slideInTop {
    animation: slideInTop 1s ease-in-out;
    -moz-animation: slideInTop 1s ease-in-out;
    -webkit-animation: slideInTop 1s ease-in-out;
    -ms-animation: slideInTop 1s ease-in-out;
}

@-webkit-keyframes slideInBottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(80px);
        transform: translateY(80px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-moz-keyframes slideInBottom {
    0% {
        opacity: 0;
        -moz-transform: translateY(80px);
        transform: translateY(80px);
    }

    100% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes slideInBottom {
    0% {
        opacity: 0;
        -moz-transform: translateY(80px);
        -webkit-transform: translateY(80px);
        -ms-transform: translateY(80px);
        transform: translateY(80px);
    }

    100% {
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.slideInBottom {
    animation: slideInBottom 1s ease-in-out;
    -moz-animation: slideInBottom 1s ease-in-out;
    -webkit-animation: slideInBottom 1s ease-in-out;
    -ms-animation: slideInBottom 1s ease-in-out;
}

@-webkit-keyframes largeToSmall {
    0% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes largeToSmall {
    0% {
        -moz-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes largeToSmall {
    0% {
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.largeToSmall {
    animation: largeToSmall 1s ease-in-out;
    -moz-animation: largeToSmall 1s ease-in-out;
    -webkit-animation: largeToSmall 1s ease-in-out;
    -ms-animation: largeToSmall 1s ease-in-out;
}

@-webkit-keyframes smallToLarge {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@-moz-keyframes smallToLarge {
    0% {
        -moz-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -moz-transform: scale(1.2);
        transform: scale(1.2);
    }
}

@keyframes smallToLarge {
    0% {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -moz-transform: scale(1.2);
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }
}

.smallToLarge {
    animation: smallToLarge 1s ease-in-out forwards;
    -moz-animation: smallToLarge 1s ease-in-out forwards;
    -webkit-animation: smallToLarge 1s ease-in-out forwards;
    -ms-animation: smallToLarge 1s ease-in-out forwards;
}

@-webkit-keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        -webkit-transform: scale3d(0.9, 0.9, 0.9);
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        -webkit-transform: scale3d(0.97, 0.97, 0.97);
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

.animate__bounceIn {
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
    animation-duration: calc(var(--animate-duration) * 0.75);
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}
.challenge_alert .alert {
    border-radius: 0 !important;
}

.ch_bg1 {
    background-color: #144B76;
}

.curve_btm_bg1 {
    background-image: url(/content/images/challenge/challenge_water_bg2.svg);
}

.ch_bg2 {
    background-color: #3D6C31;
}

.curve_btm_bg2 {
    background-image: url(/content/images/challenge/challenge_all_bg2.svg);
}

.ch_bg3 {
    background-color: #375177;
}

.curve_btm_bg3 {
    background-image: url(/content/images/challenge/challenge_all_bg2.svg);
}

.ch_bg4 {
    background-color: #EB5A00;
}

.curve_btm_bg4 {
    background-image: url(/content/images/challenge/challenge_all_bg2.svg);
}

.ch_bg5 {
    background-color: #008888;
}

.curve_btm_bg5 {
    background-image: url(/content/images/challenge/challenge_all_bg2.svg);
}

.ch_bg6 {
    background-color: #9F0909;
}

.curve_btm_bg6 {
    background-image: url(/content/images/challenge/challenge_all_bg2.svg);
}

.ch_bg7 {
    background-color: #144B76;
}

.curve_btm_bg7 {
    background-image: url(/content/images/challenge/challenge_water_bg2.svg);
}

.ch_bg {
    padding: 2em 5% 0em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    text-align: center;
}

.ch_curve_btm {
    bottom: -0.1em;
    left: 0;
    background-position: bottom;
}

.ch_curve_btm, .ch_curve_top {
    width: 100%;
    position: absolute;
    background-size: 103%;
    background-repeat: no-repeat;
    height: 7rem;
    z-index: 1;
}

.chdesc_w IMG {
    max-width: 100% !important;
}

.feat_text2 {
    font-size: 1.2em;
    display: inline-block;
    vertical-align: middle;
    width: 85%;
    display: inline !important;
}

.steps_title {
    font-weight: 600;
    text-align: left;
}

.steps_input {
    font-size: 3em;
    width: 4.5em;
    font-weight: 600;
}

.steps_fs {
    font-size: 3em;
    width: 45%;
    font-weight: 600;
}

.steps_input2 {
    font-size: 3em;
    width: auto;
    font-weight: 600;
}

.steps_input.form-control:disabled, .steps_input.form-control[readonly] {
    background-color: #f4f5f7;
    border: 0 !important;
    color: #333;
    text-align: center;
}

.steps_btn {
    font-size: 1.4em;
    font-family: Oswald;
    font-weight: 500;
    padding: 0.7em 1.5em;
}

.refresh_btn {
    font-size: 1em;
    font-family: Oswald;
    font-weight: 500;
    padding: 0.7em 1em;
}

#DeviceDescription_temp {
    display: none;
}

.device_logo_icon {
    width: 10em;
}

.custom_title {
    font-weight: 600;
    text-align: left;
}

.custom_input {
    font-size: 3em;
    width: 6em;
    font-weight: 600;
}

.custom_btn {
    font-size: 1.4em;
    font-family: Oswald;
    font-weight: 500;
    padding: 0.7em 1.5em;
}

.ch_progress_w {
    background-color: rgba(0,0,0,0.1);
    height: 1.4rem;
    position: relative;
    border-radius: 1.4rem;
    min-width: 30em;
    flex-shrink: 1;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.ch_progress {
    top: 0;
    height: 100%;
    left: 0;
    background: #22a7ee;
    position: absolute;
    border-radius: 1.4rem;
    transition: width 0.5s;
    -webkit-transition: width 0.5s;
}

.enroll_btn, .challenge_team_clickable {
    cursor: pointer;
}

.ch_btn {
    border: 0 !important;
}

.or_w {
    position: relative;
    height: 100%;
}

.orline {
    position: absolute;
    left: 49%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #ccc;
    z-index: 1;
}

.orwordwrapper {
    text-align: center;
    height: 1em;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin-top: -1em;
    z-index: 2;
}

.orword {
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1em;
    background: #fff;
}
/*
#page_bg {
    background-color: white;
}
*/
.ch_page_width {
    text-align: center;
    padding: 1em 4%;
}

.active .bs-stepper-circle {
    background-color: #22a7ee !important;
}

.input-group > .form-control .dp-challenge,
.dp-challenge {
    display: inline-block !important;
    width: 7em !important;
    flex: 0 0 auto !important;
    font-family: Oswald !important;
}

@media screen and (min-width: 80em) {
    .gj-datepicker-bootstrap [role="separator"] button .gj-icon,
    .gj-datepicker-bootstrap [role="separator"] button .material-icons {
        top: 12px !important;
    }
}

.h2_w2 .gj-datepicker-bootstrap [role="separator"] button .gj-icon,
.h2_w2 .gj-datepicker-bootstrap [role="separator"] button .material-icons {
    top: 14px !important;
}

.h2_w3 .gj-datepicker-bootstrap [role="separator"] button .gj-icon,
.h2_w3 .gj-datepicker-bootstrap [role="separator"] button .material-icons {
    top: 14px !important;
}

.challenge_flex {
    flex-wrap: nowrap;
}

.challenge_col1 {
    flex: 4 1 auto;
    /*
    width: 65%;*/
    z-index: 3;
    padding-bottom: 2em;
    margin-top: 0;
    margin-bottom: 0;
}

.main_challenge_bg .challenge_col1 {
    padding-bottom: 6em;
}

.challenge_icon {
    /*
    position: absolute;

    right: 1em;
    top: 0.8em;*/
    width: 100%;
    z-index: 2;
    margin-left: auto;
    margin-right: 0;
    max-width: 25em;
    flex: 1 1 auto;
    display: inline-flex;
}

.icon_index {
    max-width: 10em;
}

.h2_w {
    text-align: center;
    margin: 2em 0 1em 0;
}

.h2_w2 {
    display: flex;
    align-content: center;
    justify-content: center;
    text-align: center;
    align-items: center;
    position: relative;
    margin: 0.1em 0 1em 0;
}

.h2_w3 {
    text-align: center;
    position: relative;
    /*
        display: flex;
        align-items: center;
        align-content: flex-start;
        margin: 0.1em 0 0 0;
    */
}

h2.title2 {
    color: #333;
    font-family: 'Oswald';
    font-size: 1.3em;
    margin: 0.5em auto 0.5em auto;
    padding: 0;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    margin-bottom: 1em;
}

    h2.title2:before {
        content: "";
        display: block;
        border-top: solid .1em rgba(0,0,0,0.1);
        width: 100%;
        height: 0.1em;
        position: absolute;
        top: 50%;
        z-index: 1;
    }

    h2.title2 span {
        background: #fff;
        padding: 0 1.5em;
        position: relative;
        z-index: 5;
        font-family: Oswald;
    }

.line_trackfor {
    border-top: solid .1em rgba(0,0,0,0.1);
    height: 0.1em;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    flex: 1 1 auto;
}

h2.track_for {
    margin-right: 0 !important;
    margin-left: 1.5em !important;
    flex: 1 0 auto;
    margin-top: auto;
    margin-bottom: auto;
}

    h2.track_for:before {
        display: none;
    }

h2.track_for2 {
    margin-right: 1em !important;
    margin-left: 1em !important;
    flex: 1 0 auto;
    margin-top: auto;
    margin-bottom: auto;
}

    h2.track_for2:before {
        display: none;
    }

h2.track_for3 {
    margin-right: 0em !important;
    margin-left: 0em !important;
    flex: 1 0 auto;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center !important;
}

    h2.track_for3:before {
        display: none;
    }

.h2_w2 .gj-datepicker.input-group {
    width: auto !important;
    margin-left: 0.5em !important;
    margin-right: 1.5em !important;
    flex: 1 0 auto;
    margin-top: auto;
    margin-bottom: auto;
}

.h2_w3 .gj-datepicker.input-group {
    width: auto !important;
    margin-left: 0;
    margin-right: 0.5em;
    margin-top: auto;
    margin-bottom: auto;
}

.flex-row-history {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.gray-med {
    color: #777;
}

.challenge-entry {
    font-weight: 600;
    font-size: 1.4em;
    margin-left: 0.5em;
}

.days-ago {
    color: #888;
    display: inline-block;
    margin-left: 1em;
}

.history-row {
    display: flex;
}

.history-c1 {
    padding: .7rem 1.5rem .7rem 1rem;
    margin-top: auto;
    margin-bottom: auto;
    min-width: 10em;
    font-size: 1.1em;
    text-align: left;
}

.history-c2 {
    padding: .7rem 0rem;
    margin-top: auto;
    margin-bottom: auto;
    font-size: 1.1em;
}

.gray-light {
    color: #888;
}

.leader_ol {
    counter-reset: numList;
    padding: 0 0 0 0em;
    list-style: none;
    margin: 0;
    width: 100%;
}

.flex-row-leader {
    display: flex;
    flex-wrap: nowrap;
}

.leader_ol LI {
    width: 100%;
    position: relative;
    padding: 1em 1em 1em 3em;
    font-size: 1rem;
}

    .leader_ol LI:before {
        counter-increment: numList;
        content: counter(numList);
        position: absolute;
        left: 1em;
        top: 0.75em;
        font-size: 1em;
        font-weight: 400;
        text-align: center;
        color: #000;
        line-height: 2em;
        width: 2em;
        height: 2em;
        background: #FFBD57;
        border-radius: 3em;
    }

.leader-c1 {
    flex-grow: 1;
    text-align: left;
    max-width: 22em;
}

.leader-c2 {
    justify-content: flex-end;
    white-space: nowrap;
}

.leaderboard_sel {
    background-color: #f5f5fe;
}

.leader_min_mobile {
    display: none;
}

.background-light-orange-light {
    background-color: #FFFFE1 !important;
    border-radius: 0;
    margin: 0;
}

.ques_list .ques {
    border-bottom: 0.0625rem solid rgba(0,0,0,0.1);
}

    .ques_list .ques:last-of-type {
        border-bottom: 0;
    }

.check {
    display: inline-block;
    vertical-align: middle;
    width: 1.5em;
    height: 1.5em;
    background-image: url(/content/images/challenge/spch_check.png);
    background-size: 100%;
    margin-left: 5px;
}

.banner {
    position: relative;
    min-height: 16.5em;
    background: rgb(215,215,249);
    background: -moz-radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(215,215,249,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(255,255,255,1) 0%,rgba(215,215,249,1) 100%);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%,rgba(215,215,249,1) 100%);
}

.banner_after {
    font-size: .2em;
    display: block;
    width: 100%;
    height: 1em;
    border-bottom: 1em solid #DADBF9;
}

.main_pic1 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 19em;
}

.challenge_title {
    margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
}

.main_challenge_bg .challenge_title {
    font-size: 2.5em;
}

.top_title1 {
    width: 30%;
    margin-left: 4%;
    max-height: 15em;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

    .top_title1 H1 {
        line-height: 110%;
        color: #333;
    }

.top_title2 {
    width: 29%;
    color: #333;
    margin-left: 1%;
    margin-right: 4%;
    font-size: 1.6em;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: inline-block;
    line-height: 110%;
}

.my_link {
    font-size: 1rem;
    display: block;
    margin-top: .3rem;
    text-decoration: none;
}

.new_posts_link {
    font-size: 1rem;
    display: block;
    margin-top: .3rem;
    text-decoration: none;
    color: red;
}

.encourage_others_link {
    font-size: 1rem;
    display: block;
    margin-top: .3rem;
    text-decoration: none;
    color: green;
}

.date_and_desc {
    position: relative;
}

.top_text1 {
    width: 38%;
    margin-left: 2%;
    font-size: 1.1em;
    text-align: left;
    display: inline-block;
    margin-top: .8em;
}

.challenge_over {
    margin-left: 2%;
    font-size: 1.1em;
    text-align: left;
    display: inline-block;
    margin-top: .8em;
    font-weight: 900;
}
/*
#date {
    width: 38%;
    position: absolute;
    right: 3.5em;
    top: 1.5em;
    text-align: right;
}
*/
.settings_btn {
    width: 2.5rem;
    height: 2.5rem;
    position: absolute;
    right: .5em;
    top: 1.4em;
    cursor: pointer;
}

.settings_img {
    width: 100%;
}

.ttr_w {
    text-align: center;
    margin: 2em auto;
    width: 100%;
}

.ttr_circ_w {
    position: relative;
    width: 8em;
    height: 8em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.ttr_circ {
    border: .6em solid #22A7EE;
    color: #333;
    border-radius: 8em;
    position: relative;
    width: 8em;
    height: 8em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.ttr_circ_num {
    z-index: 2;
    height: 100% !important;
    position: relative;
    font-family: 'Open Sans','Helvetica Neue',roboto, helvetica, arial, verdana, sans-serif;
    border: 0;
    outline: 0;
    text-align: center;
    padding: 0 0 !important;
    box-shadow: none !important;
    background-color: rgba(255,255,255,0);
    -webkit-appearance: none;
    font-size: 3.2em; /*position:absolute; top:50%; transform:translateY(-50%);*/
    width: 100%;
    color: inherit;
    display: inline-block;
    line-height: 100%;
    margin: 0 auto !important;
}

.ttr, .ttr_over, .ttrv, .ttrv_over, .ttrf, .ttrf_over, .ttrg, .ttrg_over {
    padding: 0 !important;
    display: inline-block;
    vertical-align: middle;
    width: 7%;
    text-align: center;
    margin-left: auto;
    margin-right: .5%;
    background-color: transparent !important;
    border: 0 !important;
    outline: none !important;
}

.ttr_i, .ttr_i_over, .ttr_add_i, .ttr_minus_i {
    width: 100%;
    border: 0;
    display: block;
    cursor: pointer;
    outline: none !important;
}

.ttr_add, .ttrf_add, .ttrg_add, .ttr_minus, .ttrf_minus, .ttrg_minus {
    padding: 0 !important;
    display: inline-block;
    vertical-align: middle;
    width: 5%;
    text-align: center;
    margin-right: 1%;
    position: relative;
    z-index: 1;
    cursor: pointer;
    background-color: transparent !important;
    border: 0 !important;
    outline: none !important;
}

.empty {
}

.ttrv {
    width: 11%;
}

.ttrf {
    width: 11%;
}

.ttrg {
    width: 11%;
}

.range_slider {
    width: 52%;
    margin: 0 0.5% 0 4%;
    display: inline-block;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.ttr_confetti {
    position: absolute;
    width: 220%;
    left: -60%;
    top: -60%;
    display: none;
    z-index: 0;
}

.fave_hide {
    display: none;
}

.fave {
    left: -75px;
    top: -55px;
    width: 260px;
    height: 200px;
    z-index: 0;
    background: url(/content/images/challenge/spch_fave.png) no-repeat;
    background-position: 0 0;
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    font-weight: 900;
    color: white;
    font-size: 26px;
    line-height: 125px;
    text-align: center;
    overflow: hidden;
}

.fave {
    animation: fave_action 0.6s steps(35);
    animation-fill-mode: forwards;
    display: inline-block;
}

.fave_pos {
    position: relative;
}

@keyframes fave_action {
    to {
        background-position: -9131px 0;
    }
    /*Length of image minus first step*/
}

.fave_text {
    padding: 3%;
    width: 360px;
    margin: 3% 3% 3% 0;
    border: 1px solid #d7d7f9;
    background-color: white;
    box-shadow: 0px 0px 6px #CCC;
    border-radius: 5px;
    font-size: 16px;
    color: #eb5a00;
    font-weight: 200;
    vertical-align: middle;
    display: none;
}

.fave_text_show {
    display: inline-block;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.ttr_pop {
    z-index: 2;
    position: absolute;
    top: 9em;
    left: -3.5em;
    font-weight: 700;
    width: 12em;
    padding: 1em;
    box-shadow: 0px 0px 10px rgba(0,0,0,.1);
    background-color: white;
    color: #666;
    font-size: .8em;
}

.ttr_pop2 {
    position: relative;
    margin: 0 auto;
    width: 20em;
    text-align: center;
    padding: 1em;
    box-shadow: 0px 0px 10px rgba(0,0,0,.1);
    background-color: white;
}

.ttr_pop_arrow {
    position: relative;
    background: #ffffff;
    top: -1em;
}

    .ttr_pop_arrow:after {
        bottom: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #ffffff;
        border-width: 10px;
        margin-left: -10px;
    }

.ttr_pop_arrow_down {
    position: relative;
    background: #00C462;
    margin: .5em 0 1em 0;
    display: block;
}

    .ttr_pop_arrow_down:after {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(0, 196, 98, 0);
        border-top-color: #00C462;
        border-width: 12px;
        margin-left: -12px;
    }

.sc_ptr_hand {
    cursor: pointer;
}

.myp_container {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    white-space: nowrap;
    margin-left: 2%;
    margin-right: 2%;
    width: 90%;
}

.myp_w {
    margin: 2em auto;
}

.myp {
    display: inline-block;
    vertical-align: middle;
    width: 14%;
    text-align: center;
    margin: 0 auto;
    padding-left: 0.1%;
}

.myp_date {
    color: #888;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1em;
    text-align: center;
    display: block;
}

.myp_b {
    font-weight: 700;
}

.myp_date_viewing {
    color: black;
    font-weight: 700;
}

.myp_circ {
    background-color: #CCC;
    color: white;
    border-radius: 7em;
    position: relative;
    width: 7em;
    height: 7em;
    display: block;
    text-align: center;
    margin: .2em auto;
}

.myp_circ_num {
    font-size: 3em;
    color: inherit;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: inline-block;
    line-height: 100%;
    text-align: center;
    font-weight: 600;
}

.myp_ptr_hand {
    cursor: pointer;
}

.myp_circ_missed {
    background-color: #DF0000 !important;
}

.myp_circ_met {
    background-color: #00C462 !important;
}

.myp_circ_started {
    background-color: #DFA700 !important;
}

.myp_arrow1 {
    display: inline-block;
    padding: 0 !important;
    vertical-align: middle;
    width: 2%;
    min-width: 2%;
    margin-left: 0;
    text-align: center;
    cursor: pointer;
    background-color: transparent !important;
    border: 0;
}

.myp_arrow2 {
    display: inline-block;
    padding: 0 !important;
    vertical-align: middle;
    width: 2%;
    min-width: 2%;
    margin-right: 0;
    text-align: center;
    cursor: pointer;
    background-color: transparent !important;
    border: 0;
}

.myp_arrow1_img {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    text-align: center;
}

.myp_arrow2_img {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    text-align: center;
}

.friend_arrow1, .friend_arrow2 {
    display: inline-block;
    padding: 0 !important;
    vertical-align: middle;
}

.friend_table {
    display: table;
    width: 96%;
    margin: 1em auto;
    padding: 0;
    border: 0;
}

.friend_table_hrow, .friend_table_row {
    display: table-row;
}

.friend_table_hrow, .friend_table_hcell {
    background-color: #E2E2E2;
    vertical-align: middle;
}

.friend_table_hcell, .friend_table_cell {
    display: table-cell;
    padding: 0.3em 0.5%;
}

.friend_table_arrow1, .friend_table_arrow2 {
    height: 1em;
    border: 0;
    display: block;
}

.hcell0 {
    width: 20%;
    text-align: left;
}

.hcell1 {
    color: #666;
    text-transform: uppercase;
    font-weight: 600;
    font-size: .8em;
    text-align: center;
    width: 10%
}

.hcell2 {
    text-align: center;
    width: 4.8%
}

.hcell3 {
    color: #666;
    font-weight: 600;
    font-size: .8em;
    text-align: center;
    width: 8.6%
}

.hcell10 {
    text-align: center;
    width: 4.8%
}

.cell0 A {
    text-decoration: none;
}

.cell0 {
    width: 20%;
    text-align: left;
}

.cell1 {
    font-weight: 700;
    text-align: center;
    color: #000;
    width: 10%
}

.cell2 {
    text-align: center;
    width: 4.8%
}

.cell3 {
    text-align: center;
    color: #333;
    width: 8.6%
}

.cell10 {
    text-align: center;
    width: 4.8%
}

.r2 {
    background-color: #F8F8F8;
}

.tip_text {
    font-size: 1.1em;
    margin: 1em 4% 2em 4%;
}

.top_p2 {
    text-align: center;
    margin: 0 0 1em 0;
    padding: 0;
}

.friend_msg {
    text-align: center;
}

.sp_friend_btns {
    margin: .3em 2%;
    text-align: right;
}

.sp_include_me {
    margin: .3em 2%;
    text-align: right;
}

.sp_friend_w {
    text-align: left;
    width: 100%;
    height: 15em;
    overflow: hidden;
    border: 1px solid #d5d5d5;
    padding: 0 0;
    margin: 0 0%;
    background-color: white;
}

.friend_user_w {
    width: 14.2%;
    margin: 1em 0;
    display: inline-block;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.friend_user {
    display: block;
    text-decoration: none;
    color: #22a7ee;
    font-size: .9em;
    margin-top: .2em;
}

.friend_pic {
    width: 4em;
    height: 4em;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 4em;
    background-position: center center;
    background-size: cover;
    display: block;
    vertical-align: top;
    position: relative;
    z-index: 2;
}

input[type=checkbox].friend_checkbox {
    position: absolute;
    width: 9em;
    height: 5.5em;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    opacity: 0;
    left: 0em;
    top: 0em;
}

    input[type=checkbox].friend_checkbox + label:before {
        display: inline-block;
        padding: 0 0 0 0px;
        border: 0;
        cursor: pointer;
        width: 9em;
        height: 5.5em;
        margin: 0 auto;
        content: " ";
        vertical-align: top;
        position: absolute;
        z-index: 4;
        left: 0em;
        top: 0em;
    }

    input[type=checkbox].friend_checkbox:checked + label:before {
        background: url(/content/images/challenge/spch_check.png) no-repeat;
        background-size: 3em;
        background-position: center .8em;
    }

.callout_facebook2 {
    padding: .6em 1em .6em 3em !important;
    background: #3C5A99 !important;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
}

    .callout_facebook2 EM {
        background: url(/content/images/challenge/lss1_facebook_f.png) center no-repeat;
        width: 2.4em;
        height: 2.4em;
        position: absolute;
        top: 0em;
        left: 0em;
        display: block;
        border-right: 1px solid #22448B;
    }

.unique_w {
    position: relative;
}

.uniqueLinkInput {
    width: 80%;
    padding: .5em;
    height: 1.5em;
    border-radius: 2em;
    border: 1px solid #09F;
    outline: 0;
    font-weight: 600;
    color: #C00;
}

.uniqueLinkAnim {
    width: 80%;
    padding: .5em;
    height: 1.5em;
    position: absolute;
    top: 1px;
    opacity: 0;
    font-weight: 600;
    color: #C00;
    text-align: left;
}

.section2 {
}

.invite_btn {
    color: #007fc4;
    width: 6em;
    display: inline-block;
    vertical-align: middle;
    margin-left: 1em;
    position: absolute;
    right: 1.5%;
    top: .6em;
    z-index: 4;
    background-color: #EBEBEB;
    padding: .6em;
    border-radius: 2em;
    cursor: pointer;
}

.invite_arrow {
    width: .9em;
    display: inline-block;
    vertical-align: middle;
    margin-left: .3em;
}

.friend_total_text_w {
    text-align: center;
    display: block;
}

.friend_total_text1 {
    font-size: 1.1em;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
    margin: .5em auto .5em auto;
    color: #666;
    text-align: center;
}

.friend_total_text2 {
    font-size: 1.6em;
    font-weight: 700;
    margin: .5em 0 .5em 0;
    color: #333;
    display: inline-block;
    vertical-align: middle;
}

.tracking_additions {
    text-decoration: none;
    outline: none;
    margin: 0 2% 0 2%;
    text-align: center;
}

.tracking_info_sc {
    display: block;
    margin: .2em 2% 0 2%;
    text-align: left;
    white-space: nowrap;
}

.info_btn {
    display: inline-block;
    text-decoration: none;
    outline: none;
}

.jt_btn {
    text-decoration: none;
    outline: none;
    color: #00C462;
}

.more_info {
    margin: 1em 4% 0 2%;
    display: block;
    text-align: left;
}

.more_hidden {
    display: none;
}

.invite_hidden {
    display: none;
}

.just_tracked {
    display: inline-block;
    margin: 0 auto;
    vertical-align: top;
    text-align: center;
}

.just_tracked_hidden {
    display: none;
}

/*new feats section*/
.number_input_w {
    background-color: #Fff;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #ccc;
    width: 9em;
    margin-top: .1em;
    margin-bottom: .1em;
}

.plus_and_minus {
    height: 5em;
    vertical-align: middle;
    display: inline-block;
    width: 25%;
    overflow: hidden;
}

.numbertype {
    font-size: 3em;
    font-weight: 400;
    width: 75%;
    vertical-align: middle;
    display: inline-block;
    z-index: 2;
    height: 1.6em;
    position: relative;
    font-family: 'Open Sans','Helvetica Neue',roboto, helvetica, arial, verdana, sans-serif;
    border: 0;
    outline: 0;
    text-align: center;
    padding: 0 0 !important;
    box-shadow: none !important;
    background-color: rgba(255,255,255,0);
    -webkit-appearance: none;
    color: inherit;
    line-height: 100%;
    margin: 0 auto !important;
}

.minus, .plus {
    box-sizing: border-box;
    width: 100%;
    max-height: 50%;
    overflow: hidden;
    padding: 20% 18%;
    background-color: #Fff;
    display: block;
    text-decoration: none;
    border-left: 1px solid #ccc;
}

.plus {
    border-bottom: 1px solid #ccc;
}

.arrow_up, .arrow_down {
    width: 100%;
    border: 0;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.text_big {
    font-size: 1.8em;
    display: inline;
    vertical-align: middle;
    line-height: 200%;
}

fieldset:last-child {
    margin-bottom: 0;
}

input[type="checkbox"].feat_cb_enabled {
    cursor: pointer;
}

input[type="checkbox"].ch_feat_checkbox {
    position: absolute;
    height: 2em;
    width: 2em;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    opacity: 0;
    line-height: 2em;
}

    input[type="checkbox"].ch_feat_checkbox + label {
        cursor: pointer;
        padding: .5em 0;
    }

        input[type="checkbox"].ch_feat_checkbox + label:before {
            background-color: #f2f2f2;
            height: 2em;
            width: 2em;
            display: inline-block;
            vertical-align: middle;
            padding: 0 0 0 0px;
            border-radius: 2px;
            border: 1px solid #ccc;
            cursor: pointer;
            content: " ";
            -webkit-transition: all 0.30s ease-in-out;
            -moz-transition: all 0.30s ease-in-out;
            -ms-transition: all 0.30s ease-in-out;
            -o-transition: all 0.30s ease-in-out;
            outline: none;
            margin: .2em .5em .2em 0px;
            border: 1px solid #DDDDDD;
        }

        input[type="checkbox"].ch_feat_checkbox + label:before {
        }

    input[type="checkbox"].ch_feat_checkbox:focus + label:before {
        box-shadow: 0 0 5px rgba(81, 203, 238, 1);
        margin: .2em .5em .2em 0px;
        border: 1px solid rgba(81, 203, 238, 1);
    }

    input[type="checkbox"].ch_feat_checkbox:checked + label:before {
        background: url(/content/images/challenge/spch_check.png) no-repeat;
        background-size: contain;
        background-color: #Fff;
    }

    input[type="checkbox"].ch_feat_checkbox:checked:focus + label:before {
        background: url(/content/images/challenge/spch_check.png) no-repeat;
        background-size: contain;
        background-color: #Fff;
    }

    input[type="checkbox"].ch_feat_checkbox:checked + label {
        font-weight: 700;
    }

input[type="checkbox"][disabled].ch_feat_checkbox + label:before {
    background-color: #f2f2f2;
}

.food_text {
    font-size: 1.4em;
}

.number_input_text1 {
    font-size: 1.2em;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
    margin-left: .8em;
}

.number_input_text2 {
    font-size: 1.2em;
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
}

.number_input_div {
    display: inline-block;
    vertical-align: middle;
}

.number_input_description {
    font-size: 1.0em;
    display: inline-block;
    vertical-align: middle;
    margin-left: .8em;
}

.feat_ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .feat_ul li {
        margin: 0;
        padding: .5em 0;
        display: block;
    }

.feat_col1 {
    width: 46%;
    margin: 0 1% 0 7%;
    display: inline-block;
    vertical-align: top;
}

.feat_col2 {
    width: 46%;
    margin: 0 0% 0 0%;
    display: inline-block;
    vertical-align: top;
}

.bar_a {
    outline: 0;
    cursor: pointer;
}

.bar_w {
    background-color: rgba(0,0,0,0.1);
    height: 1.2rem;
    position: relative;
    border-radius: 1.2rem;
    text-align: left;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

.bar {
    background-color: #22a7ee;
    height: 1.2rem;
    display: inline-block;
    border-radius: 1.2rem;
    position: relative;
}

.bar_num_w {
    color: #333;
    height: 1.2rem;
    position: relative;
    text-align: center;
    display: block;
}

.bar_num {
    color: #333;
    height: 1.2rem;
    display: inline-block;
    position: relative;
}

.bar_num_goal {
    color: #999;
    font-size: .8em;
    font-weight: 700;
    position: absolute;
    right: 0;
    top: 0;
}

.bar_num_desc {
    color: #999;
    font-size: .8em;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
}

.bar_num_begin {
    color: #999;
    font-size: .8em;
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 0;
}

.ttr_square {
    background-color: white;
    border: .2em solid rgba(0,0,0,.1);
    color: #333;
    position: relative;
    width: 12em;
    padding: .7em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.ttr_square_text1 {
    z-index: 1;
    text-align: left;
    width: 70%;
    display: inline-block;
    vertical-align: middle;
    font-size: 1.1em;
    color: #333;
    font-weight: 600;
}

.ttr_square_text2 {
    z-index: 1;
    text-align: center;
    width: 30%;
    display: inline-block;
    vertical-align: middle;
    color: #22a7ee;
    font-weight: 900;
}

.tcs_w {
    z-index: 1;
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    display: block;
    margin: 1em auto 1em auto;
    color: #666;
}

.tcs1 {
    z-index: 1;
    text-align: center;
    display: inline;
    vertical-align: middle;
}

.ttr_square_num {
    z-index: 2;
    height: 1.8em;
    position: relative;
    color: #22a7ee;
    font-family: 'Open Sans','Helvetica Neue',roboto, helvetica, arial, verdana, sans-serif;
    border: 0;
    outline: 0;
    text-align: center;
    padding: 0 0 !important;
    box-shadow: none !important;
    background-color: rgba(255,255,255,0);
    -webkit-appearance: none;
    font-size: 2.2em;
    font-weight: 900;
    width: 100%;
    color: inherit;
    display: inline-block;
    line-height: 100%;
    margin: 0 auto !important;
}

.tcs2 {
    color: #000;
    font-size: 1.4em;
    font-weight: 900;
    color: #000;
    display: inline-block;
    vertical-align: middle;
}

.spin_wheel_a {
    display: block;
    text-decoration: none;
    color: #000;
}

.spin_wheel_text {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.3em;
    width: 70%;
    font-weight: 700;
}

.spin_wheel {
    display: inline-block;
    vertical-align: middle;
    font-size: 1em;
    color: white;
    width: 4em;
    height: 4em;
    border-radius: 4em;
    margin-right: .5em;
    background-color: #ff7b08;
    text-align: center;
}

    .spin_wheel SPAN {
        line-height: 4em;
    }

.sleep_w {
    width: 100%;
    display: block;
    margin: 2.5em auto 1em auto !important;
}

.fd_w {
    max-width: 34em;
    margin: auto;
    background-color: #f4f5f7;
    border-radius: 0.5em;
    padding: 1em 2em;
    box-sizing: border-box;
    position: relative;
    /*
    border: 0.0625rem solid #d0d0d0;
    */
}

.fdg_icon {
    width: 8em;
}

.fdg_icon_sm {
    width: 4em;
}

.offscreen {
    left: -999em;
    position: absolute;
}

@media screen and (hover) {
    .HistoryRow:hover {
        background-color: rgba(0,0,0,0.03);
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
    .challenge_flex {
        flex-wrap: nowrap;
    }

    .challenge_col1 {
        padding-bottom: 0;
        /*
        width: 65%;

        */
        margin-bottom: 3rem;
        margin-top: 0;
    }

    .main_challenge_bg .challenge_col1 {
        padding-bottom: 3rem;
    }

    .challenge_list .challenge_title {
        font-size: 1.3rem !important;
    }

    .challenge_icon {
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: auto;
        display: inline-flex;
        max-width: 35%;
        max-height: 15em;
    }

    .icon_index {
        max-height: 5rem;
    }
}

@media screen and (max-width: 80em) {
    .myp_circ {
        border-radius: 5em;
        width: 5em;
        height: 5em;
    }

    .myp_circ_num {
        font-size: 2em;
        font-weight: bold;
    }

    .steps_title {
        font-size: 1em;
        display: none !important;
    }
}

@media screen and (max-width: 75em) {
    .ch_progress_w {
        min-width: 20em;
    }

    .or_w {
        position: relative;
        height: 2em;
        padding: 2em;
        display: block;
    }

    .orline {
        top: 49%;
        left: 0;
        width: 100%;
        height: 1px;
    }

    .orwordwrapper {
        height: 2em;
        margin-top: -2em;
    }

    .orword {
        display: inline-block;
    }
}

@media screen and (max-width: 46em) {
    .myp {
        width: 13.1%;
        padding-left: 0;
    }

    .myp_circ {
        border-radius: 4em;
        width: 4em;
        height: 4em;
    }

    .myp_circ_num {
        font-size: 1.4em;
        font-weight: bold;
    }

    .myp_b {
        display: block;
        line-height: 100%;
    }

    .steps_flex_w {
        flex-wrap: wrap;
    }

    .ch_progress_w {
        min-width: 20em;
    }
}

@media screen and (max-width: 32em) {
    .h2_w3 .gj-datepicker.input-group {
        flex-shrink: 0;
    }

    .ch_page_width {
        padding: 0 0;
    }

    .feat_text {
        font-size: 1em;
    }

    .about_link {
        vertical-align: baseline;
    }

    .sleep_w {
        margin: 2.5em auto 2em auto !important;
    }

    .steps_input_w {
        flex: 0 0 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center;
    }

    .steps_input {
        font-size: 2em;
        width: 7em;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .steps_fs {
        font-size: 2em;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .steps_input2_w {
        flex: 0 0 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center;
    }

    .steps_input2 {
        font-size: 2em;
        width: auto;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .steps_btn_w {
        flex: 0 0 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 1em !important;
        padding: 0 2em;
    }

    .steps_btn {
        font-size: 1em;
    }

    .refresh_btn_w {
        /*
        flex: 0 0 100%;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 1em !important;
        padding: 0 2em;
            */
    }

    .refresh_btn {
        font-size: 0.8em;
    }

    .device_logo_icon {
        width: 8em;
    }

    .custom_title {
        font-size: 1em;
        flex: 1 1 100%;
        margin-left: 0 !important;
        display: none !important;
    }

    .custom_input_w {
        margin-right: auto !important;
    }

    .custom_input {
        font-size: 1.8em;
        width: 100%;
        flex: 1 1 100%;
    }

    .custom_btn {
        font-size: 1em;
        flex: 1 1 100%;
        display: block !important;
        margin-top: 1em !important;
    }

    .ch_top_date {
        font-size: 1rem;
        margin-bottom: 0;
    }

    .ch_bg {
        padding: 1em 5% 0rem 5%;
    }

    .ch_curve_btm, .ch_curve_top {
        height: 2.5rem;
    }

    .challenge_col1 {
        padding-bottom: 0;
        /*
        width: 65%;

        */
        margin-bottom: 2rem;
    }

    .challenge_title {
        font-size: 1.3rem !important;
    }

    .main_challenge_bg .challenge_col1 {
        padding-bottom: 0;
    }

    .challenge_flex {
        flex-wrap: nowrap;
    }

    .challenge_icon {
        /*
        flex: 1 1 100%;

        width: 30%;
        max-width: 30%;
            */
        max-width: 30%;
        margin-right: 0;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: auto;
        display: inline-flex;
        max-height: 5em;
    }

    .icon_index {
    }

    .icon_spacer {
        width: 10%;
        max-width: 10%;
    }

    .about_btn {
        font-size: 0.75em;
    }

    .minutes_w {
        flex-wrap: wrap;
    }

    .ttr_w {
        position: relative;
        margin: 1em auto;
        flex: 0 0 100%;
        width: 100%;
    }

    .ttr_circ_w {
        margin: 1em auto;
        width: 7em;
        height: 7em;
        display: block;
        z-index: 0;
        position: relative;
    }

    .ttr_circ {
        margin: 1em auto;
        border-radius: 7em;
        width: 7em;
        height: 7em;
        border-width: 0.6em;
        display: block;
        z-index: 0;
        position: relative;
    }

    .ttr, .ttr_over, .ttrv, .ttrv_over, .ttrf, .ttrf_over, .ttrg, .ttrg_over {
        padding: 0 !important;
        display: inline-block;
        z-index: 2;
        position: relative;
        vertical-align: middle;
        width: 8%;
        text-align: center;
        margin-left: auto;
        margin-right: .5%;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .ttr_add, .ttr_minus, .ttrf_add, .ttrg_add, .ttrf_minus, .ttrg_minus {
        padding: 0 !important;
        display: inline-block;
        width: 12%;
        text-align: center;
        position: absolute;
        z-index: 1;
    }

    .ttr_add, .ttr_minus {
        bottom: 3.5em;
    }

    .ttrg_add, .ttrg_minus {
        top: 4.5em;
    }

    .ttrf_add, .ttrf_minus {
        top: 7.5em;
    }

    .ttr_add, .ttrf_add, .ttrg_add {
        right: 14%;
    }

    .ttr_minus, .ttrf_minus, .ttrg_minus {
        left: 14%;
    }

    .ttrv {
        width: 15%;
    }

    .ttrf, .ttrg {
        width: 11%;
    }

    .myp_arrow1 {
        width: 3%;
        min-width: 2%;
    }

    .myp_arrow2 {
        width: 3%;
        min-width: 2%;
    }

    .myp_circ {
        background-color: #CCC;
        color: white;
        border-radius: 2.75em;
        position: relative;
        width: 2.75em;
        height: 2.75em;
        display: block;
        text-align: center;
        margin: .2em auto;
    }

    .myp_circ_num {
        font-size: 1em;
        color: inherit;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font-weight: bold;
    }

    .myp_w {
        overflow-x: hidden;
    }

    .myp_container {
        width: 86%;
    }

    .myp_date {
        font-size: 0.8em;
    }

    .leader_ol li {
        font-size: 0.9em;
    }

        .leader_ol LI:before {
            /*
            left: 1em;
                 */
            top: 0.9em;
            font-size: 0.9em;
            /*
            line-height: 1.4em;
            width: 1.4em;
            height: 1.4em;
            border-radius: 1.4em;
                */
        }

    .leader_min_mobile {
        display: block;
        text-align: right;
        text-transform: uppercase;
        font-size: 0.75rem;
        margin-right: 1rem;
        color: #999;
        font-weight: bold;
    }

    .leader_min {
        position: absolute;
        left: -999em;
    }

    .history-c1 {
        padding: .5rem 1.5rem .5rem 1.5rem;
        font-size: 1em;
    }

    .history-c2 {
        padding: .5rem 0;
        font-size: 1em;
    }

    .fd_w {
        padding: 1em;
    }

    .fdg_icon {
        width: 4em;
    }

    .fdg_icon_sm {
        width: 2em;
    }
}
/****************************************************************
 *
 * CSS Percentage Circle
 * Author: Andre Firchow
 *
*****************************************************************/
.rect-auto, .c100.p51 .slice, .c100.p52 .slice, .c100.p53 .slice, .c100.p54 .slice, .c100.p55 .slice, .c100.p56 .slice, .c100.p57 .slice, .c100.p58 .slice, .c100.p59 .slice, .c100.p60 .slice, .c100.p61 .slice, .c100.p62 .slice, .c100.p63 .slice, .c100.p64 .slice, .c100.p65 .slice, .c100.p66 .slice, .c100.p67 .slice, .c100.p68 .slice, .c100.p69 .slice, .c100.p70 .slice, .c100.p71 .slice, .c100.p72 .slice, .c100.p73 .slice, .c100.p74 .slice, .c100.p75 .slice, .c100.p76 .slice, .c100.p77 .slice, .c100.p78 .slice, .c100.p79 .slice, .c100.p80 .slice, .c100.p81 .slice, .c100.p82 .slice, .c100.p83 .slice, .c100.p84 .slice, .c100.p85 .slice, .c100.p86 .slice, .c100.p87 .slice, .c100.p88 .slice, .c100.p89 .slice, .c100.p90 .slice, .c100.p91 .slice, .c100.p92 .slice, .c100.p93 .slice, .c100.p94 .slice, .c100.p95 .slice, .c100.p96 .slice, .c100.p97 .slice, .c100.p98 .slice, .c100.p99 .slice, .c100.p100 .slice {
    clip: rect(auto, auto, auto, auto);
}

.pie, .c100 .bar, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill {
    position: absolute;
    border: 0.08em solid #307bbb;
    width: 0.84em;
    height: 0.84em;
    clip: rect(0em, 0.5em, 1em, 0em);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.pie-fill, .c100.p51 .bar:after, .c100.p51 .fill, .c100.p52 .bar:after, .c100.p52 .fill, .c100.p53 .bar:after, .c100.p53 .fill, .c100.p54 .bar:after, .c100.p54 .fill, .c100.p55 .bar:after, .c100.p55 .fill, .c100.p56 .bar:after, .c100.p56 .fill, .c100.p57 .bar:after, .c100.p57 .fill, .c100.p58 .bar:after, .c100.p58 .fill, .c100.p59 .bar:after, .c100.p59 .fill, .c100.p60 .bar:after, .c100.p60 .fill, .c100.p61 .bar:after, .c100.p61 .fill, .c100.p62 .bar:after, .c100.p62 .fill, .c100.p63 .bar:after, .c100.p63 .fill, .c100.p64 .bar:after, .c100.p64 .fill, .c100.p65 .bar:after, .c100.p65 .fill, .c100.p66 .bar:after, .c100.p66 .fill, .c100.p67 .bar:after, .c100.p67 .fill, .c100.p68 .bar:after, .c100.p68 .fill, .c100.p69 .bar:after, .c100.p69 .fill, .c100.p70 .bar:after, .c100.p70 .fill, .c100.p71 .bar:after, .c100.p71 .fill, .c100.p72 .bar:after, .c100.p72 .fill, .c100.p73 .bar:after, .c100.p73 .fill, .c100.p74 .bar:after, .c100.p74 .fill, .c100.p75 .bar:after, .c100.p75 .fill, .c100.p76 .bar:after, .c100.p76 .fill, .c100.p77 .bar:after, .c100.p77 .fill, .c100.p78 .bar:after, .c100.p78 .fill, .c100.p79 .bar:after, .c100.p79 .fill, .c100.p80 .bar:after, .c100.p80 .fill, .c100.p81 .bar:after, .c100.p81 .fill, .c100.p82 .bar:after, .c100.p82 .fill, .c100.p83 .bar:after, .c100.p83 .fill, .c100.p84 .bar:after, .c100.p84 .fill, .c100.p85 .bar:after, .c100.p85 .fill, .c100.p86 .bar:after, .c100.p86 .fill, .c100.p87 .bar:after, .c100.p87 .fill, .c100.p88 .bar:after, .c100.p88 .fill, .c100.p89 .bar:after, .c100.p89 .fill, .c100.p90 .bar:after, .c100.p90 .fill, .c100.p91 .bar:after, .c100.p91 .fill, .c100.p92 .bar:after, .c100.p92 .fill, .c100.p93 .bar:after, .c100.p93 .fill, .c100.p94 .bar:after, .c100.p94 .fill, .c100.p95 .bar:after, .c100.p95 .fill, .c100.p96 .bar:after, .c100.p96 .fill, .c100.p97 .bar:after, .c100.p97 .fill, .c100.p98 .bar:after, .c100.p98 .fill, .c100.p99 .bar:after, .c100.p99 .fill, .c100.p100 .bar:after, .c100.p100 .fill {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.c100 {
    position: relative;
    font-size: 120px;
    width: 1em;
    height: 1em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    float: left;
    margin: 0 0.1em 0.1em 0;
    background-color: #cccccc;
}

    .c100 *, .c100 *:before, .c100 *:after {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    .c100.center {
        float: none;
        margin: 0 auto;
    }

    .c100.big {
        font-size: 240px;
    }

    .c100.smallCirc {
        font-size: 40px;
    }

    .c100.ToolsCarbsCirc,
    .c100.ToolsFatCirc,
    .c100.ToolsProteinCirc,
    .c100.ToolsFiberCirc {
        font-size: 60px;
    }

    .c100.calsRemCirc {
        font-size: 150px;
    }

    .c100.calsNutCirc {
        font-size: 190px;
    }

    .c100.ToolsCaloriesCirc,
    .c100.ToolsSparkPointsCirc,
    .c100.ToolsMinutesCirc {
        font-size: 150px;
    }

    .c100.programCirc {
        font-size: 60px;
    }

    .c100.MinutesCirc {
        font-size: 17em;
    }

    .c100 > span {
        font-family: 'Oswald';
        font-weight: 500;
        position: absolute;
        width: 100%;
        z-index: 1;
        left: 0;
        top: 0;
        width: 3.33em;
        line-height: 3.33em;
        font-size: 0.3em;
        color: #333;
        display: block;
        text-align: center;
        white-space: nowrap;
        -webkit-transition-property: all;
        -moz-transition-property: all;
        -o-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 0.2s;
        -moz-transition-duration: 0.2s;
        -o-transition-duration: 0.2s;
        transition-duration: 0.2s;
        -webkit-transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .c100:after {
        position: absolute;
        top: 0.08em;
        left: 0.08em;
        display: block;
        content: " ";
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        background-color: whitesmoke;
        width: 0.84em;
        height: 0.84em;
        -webkit-transition-property: all;
        -moz-transition-property: all;
        -o-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 0.2s;
        -moz-transition-duration: 0.2s;
        -o-transition-duration: 0.2s;
        transition-duration: 0.2s;
        -webkit-transition-timing-function: ease-in;
        -moz-transition-timing-function: ease-in;
        -o-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }

.p100.green.c100:after {
    /*background-color: #00B95C;*/
    background-color: white;
}

.p100.green.c100 > span {
    color: #333;
}

.p100.blue.c100:after {
    background-color: #f5f5f5;
}

.p100.blue.c100 > span {
    color: #333 !important;
}

.c100 .slice {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: rect(0em, 1em, 1em, 0.5em);
}

.c100.p1 .bar {
    -webkit-transform: rotate(3.6deg);
    -moz-transform: rotate(3.6deg);
    -ms-transform: rotate(3.6deg);
    -o-transform: rotate(3.6deg);
    transform: rotate(3.6deg);
}

.c100.p2 .bar {
    -webkit-transform: rotate(7.2deg);
    -moz-transform: rotate(7.2deg);
    -ms-transform: rotate(7.2deg);
    -o-transform: rotate(7.2deg);
    transform: rotate(7.2deg);
}

.c100.p3 .bar {
    -webkit-transform: rotate(10.8deg);
    -moz-transform: rotate(10.8deg);
    -ms-transform: rotate(10.8deg);
    -o-transform: rotate(10.8deg);
    transform: rotate(10.8deg);
}

.c100.p4 .bar {
    -webkit-transform: rotate(14.4deg);
    -moz-transform: rotate(14.4deg);
    -ms-transform: rotate(14.4deg);
    -o-transform: rotate(14.4deg);
    transform: rotate(14.4deg);
}

.c100.p5 .bar {
    -webkit-transform: rotate(18deg);
    -moz-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    -o-transform: rotate(18deg);
    transform: rotate(18deg);
}

.c100.p6 .bar {
    -webkit-transform: rotate(21.6deg);
    -moz-transform: rotate(21.6deg);
    -ms-transform: rotate(21.6deg);
    -o-transform: rotate(21.6deg);
    transform: rotate(21.6deg);
}

.c100.p7 .bar {
    -webkit-transform: rotate(25.2deg);
    -moz-transform: rotate(25.2deg);
    -ms-transform: rotate(25.2deg);
    -o-transform: rotate(25.2deg);
    transform: rotate(25.2deg);
}

.c100.p8 .bar {
    -webkit-transform: rotate(28.8deg);
    -moz-transform: rotate(28.8deg);
    -ms-transform: rotate(28.8deg);
    -o-transform: rotate(28.8deg);
    transform: rotate(28.8deg);
}

.c100.p9 .bar {
    -webkit-transform: rotate(32.4deg);
    -moz-transform: rotate(32.4deg);
    -ms-transform: rotate(32.4deg);
    -o-transform: rotate(32.4deg);
    transform: rotate(32.4deg);
}

.c100.p10 .bar {
    -webkit-transform: rotate(36deg);
    -moz-transform: rotate(36deg);
    -ms-transform: rotate(36deg);
    -o-transform: rotate(36deg);
    transform: rotate(36deg);
}

.c100.p11 .bar {
    -webkit-transform: rotate(39.6deg);
    -moz-transform: rotate(39.6deg);
    -ms-transform: rotate(39.6deg);
    -o-transform: rotate(39.6deg);
    transform: rotate(39.6deg);
}

.c100.p12 .bar {
    -webkit-transform: rotate(43.2deg);
    -moz-transform: rotate(43.2deg);
    -ms-transform: rotate(43.2deg);
    -o-transform: rotate(43.2deg);
    transform: rotate(43.2deg);
}

.c100.p13 .bar {
    -webkit-transform: rotate(46.8deg);
    -moz-transform: rotate(46.8deg);
    -ms-transform: rotate(46.8deg);
    -o-transform: rotate(46.8deg);
    transform: rotate(46.8deg);
}

.c100.p14 .bar {
    -webkit-transform: rotate(50.4deg);
    -moz-transform: rotate(50.4deg);
    -ms-transform: rotate(50.4deg);
    -o-transform: rotate(50.4deg);
    transform: rotate(50.4deg);
}

.c100.p15 .bar {
    -webkit-transform: rotate(54deg);
    -moz-transform: rotate(54deg);
    -ms-transform: rotate(54deg);
    -o-transform: rotate(54deg);
    transform: rotate(54deg);
}

.c100.p16 .bar {
    -webkit-transform: rotate(57.6deg);
    -moz-transform: rotate(57.6deg);
    -ms-transform: rotate(57.6deg);
    -o-transform: rotate(57.6deg);
    transform: rotate(57.6deg);
}

.c100.p17 .bar {
    -webkit-transform: rotate(61.2deg);
    -moz-transform: rotate(61.2deg);
    -ms-transform: rotate(61.2deg);
    -o-transform: rotate(61.2deg);
    transform: rotate(61.2deg);
}

.c100.p18 .bar {
    -webkit-transform: rotate(64.8deg);
    -moz-transform: rotate(64.8deg);
    -ms-transform: rotate(64.8deg);
    -o-transform: rotate(64.8deg);
    transform: rotate(64.8deg);
}

.c100.p19 .bar {
    -webkit-transform: rotate(68.4deg);
    -moz-transform: rotate(68.4deg);
    -ms-transform: rotate(68.4deg);
    -o-transform: rotate(68.4deg);
    transform: rotate(68.4deg);
}

.c100.p20 .bar {
    -webkit-transform: rotate(72deg);
    -moz-transform: rotate(72deg);
    -ms-transform: rotate(72deg);
    -o-transform: rotate(72deg);
    transform: rotate(72deg);
}

.c100.p21 .bar {
    -webkit-transform: rotate(75.6deg);
    -moz-transform: rotate(75.6deg);
    -ms-transform: rotate(75.6deg);
    -o-transform: rotate(75.6deg);
    transform: rotate(75.6deg);
}

.c100.p22 .bar {
    -webkit-transform: rotate(79.2deg);
    -moz-transform: rotate(79.2deg);
    -ms-transform: rotate(79.2deg);
    -o-transform: rotate(79.2deg);
    transform: rotate(79.2deg);
}

.c100.p23 .bar {
    -webkit-transform: rotate(82.8deg);
    -moz-transform: rotate(82.8deg);
    -ms-transform: rotate(82.8deg);
    -o-transform: rotate(82.8deg);
    transform: rotate(82.8deg);
}

.c100.p24 .bar {
    -webkit-transform: rotate(86.4deg);
    -moz-transform: rotate(86.4deg);
    -ms-transform: rotate(86.4deg);
    -o-transform: rotate(86.4deg);
    transform: rotate(86.4deg);
}

.c100.p25 .bar {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.c100.p26 .bar {
    -webkit-transform: rotate(93.6deg);
    -moz-transform: rotate(93.6deg);
    -ms-transform: rotate(93.6deg);
    -o-transform: rotate(93.6deg);
    transform: rotate(93.6deg);
}

.c100.p27 .bar {
    -webkit-transform: rotate(97.2deg);
    -moz-transform: rotate(97.2deg);
    -ms-transform: rotate(97.2deg);
    -o-transform: rotate(97.2deg);
    transform: rotate(97.2deg);
}

.c100.p28 .bar {
    -webkit-transform: rotate(100.8deg);
    -moz-transform: rotate(100.8deg);
    -ms-transform: rotate(100.8deg);
    -o-transform: rotate(100.8deg);
    transform: rotate(100.8deg);
}

.c100.p29 .bar {
    -webkit-transform: rotate(104.4deg);
    -moz-transform: rotate(104.4deg);
    -ms-transform: rotate(104.4deg);
    -o-transform: rotate(104.4deg);
    transform: rotate(104.4deg);
}

.c100.p30 .bar {
    -webkit-transform: rotate(108deg);
    -moz-transform: rotate(108deg);
    -ms-transform: rotate(108deg);
    -o-transform: rotate(108deg);
    transform: rotate(108deg);
}

.c100.p31 .bar {
    -webkit-transform: rotate(111.6deg);
    -moz-transform: rotate(111.6deg);
    -ms-transform: rotate(111.6deg);
    -o-transform: rotate(111.6deg);
    transform: rotate(111.6deg);
}

.c100.p32 .bar {
    -webkit-transform: rotate(115.2deg);
    -moz-transform: rotate(115.2deg);
    -ms-transform: rotate(115.2deg);
    -o-transform: rotate(115.2deg);
    transform: rotate(115.2deg);
}

.c100.p33 .bar {
    -webkit-transform: rotate(118.8deg);
    -moz-transform: rotate(118.8deg);
    -ms-transform: rotate(118.8deg);
    -o-transform: rotate(118.8deg);
    transform: rotate(118.8deg);
}

.c100.p34 .bar {
    -webkit-transform: rotate(122.4deg);
    -moz-transform: rotate(122.4deg);
    -ms-transform: rotate(122.4deg);
    -o-transform: rotate(122.4deg);
    transform: rotate(122.4deg);
}

.c100.p35 .bar {
    -webkit-transform: rotate(126deg);
    -moz-transform: rotate(126deg);
    -ms-transform: rotate(126deg);
    -o-transform: rotate(126deg);
    transform: rotate(126deg);
}

.c100.p36 .bar {
    -webkit-transform: rotate(129.6deg);
    -moz-transform: rotate(129.6deg);
    -ms-transform: rotate(129.6deg);
    -o-transform: rotate(129.6deg);
    transform: rotate(129.6deg);
}

.c100.p37 .bar {
    -webkit-transform: rotate(133.2deg);
    -moz-transform: rotate(133.2deg);
    -ms-transform: rotate(133.2deg);
    -o-transform: rotate(133.2deg);
    transform: rotate(133.2deg);
}

.c100.p38 .bar {
    -webkit-transform: rotate(136.8deg);
    -moz-transform: rotate(136.8deg);
    -ms-transform: rotate(136.8deg);
    -o-transform: rotate(136.8deg);
    transform: rotate(136.8deg);
}

.c100.p39 .bar {
    -webkit-transform: rotate(140.4deg);
    -moz-transform: rotate(140.4deg);
    -ms-transform: rotate(140.4deg);
    -o-transform: rotate(140.4deg);
    transform: rotate(140.4deg);
}

.c100.p40 .bar {
    -webkit-transform: rotate(144deg);
    -moz-transform: rotate(144deg);
    -ms-transform: rotate(144deg);
    -o-transform: rotate(144deg);
    transform: rotate(144deg);
}

.c100.p41 .bar {
    -webkit-transform: rotate(147.6deg);
    -moz-transform: rotate(147.6deg);
    -ms-transform: rotate(147.6deg);
    -o-transform: rotate(147.6deg);
    transform: rotate(147.6deg);
}

.c100.p42 .bar {
    -webkit-transform: rotate(151.2deg);
    -moz-transform: rotate(151.2deg);
    -ms-transform: rotate(151.2deg);
    -o-transform: rotate(151.2deg);
    transform: rotate(151.2deg);
}

.c100.p43 .bar {
    -webkit-transform: rotate(154.8deg);
    -moz-transform: rotate(154.8deg);
    -ms-transform: rotate(154.8deg);
    -o-transform: rotate(154.8deg);
    transform: rotate(154.8deg);
}

.c100.p44 .bar {
    -webkit-transform: rotate(158.4deg);
    -moz-transform: rotate(158.4deg);
    -ms-transform: rotate(158.4deg);
    -o-transform: rotate(158.4deg);
    transform: rotate(158.4deg);
}

.c100.p45 .bar {
    -webkit-transform: rotate(162deg);
    -moz-transform: rotate(162deg);
    -ms-transform: rotate(162deg);
    -o-transform: rotate(162deg);
    transform: rotate(162deg);
}

.c100.p46 .bar {
    -webkit-transform: rotate(165.6deg);
    -moz-transform: rotate(165.6deg);
    -ms-transform: rotate(165.6deg);
    -o-transform: rotate(165.6deg);
    transform: rotate(165.6deg);
}

.c100.p47 .bar {
    -webkit-transform: rotate(169.2deg);
    -moz-transform: rotate(169.2deg);
    -ms-transform: rotate(169.2deg);
    -o-transform: rotate(169.2deg);
    transform: rotate(169.2deg);
}

.c100.p48 .bar {
    -webkit-transform: rotate(172.8deg);
    -moz-transform: rotate(172.8deg);
    -ms-transform: rotate(172.8deg);
    -o-transform: rotate(172.8deg);
    transform: rotate(172.8deg);
}

.c100.p49 .bar {
    -webkit-transform: rotate(176.4deg);
    -moz-transform: rotate(176.4deg);
    -ms-transform: rotate(176.4deg);
    -o-transform: rotate(176.4deg);
    transform: rotate(176.4deg);
}

.c100.p50 .bar {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.c100.p51 .bar {
    -webkit-transform: rotate(183.6deg);
    -moz-transform: rotate(183.6deg);
    -ms-transform: rotate(183.6deg);
    -o-transform: rotate(183.6deg);
    transform: rotate(183.6deg);
}

.c100.p52 .bar {
    -webkit-transform: rotate(187.2deg);
    -moz-transform: rotate(187.2deg);
    -ms-transform: rotate(187.2deg);
    -o-transform: rotate(187.2deg);
    transform: rotate(187.2deg);
}

.c100.p53 .bar {
    -webkit-transform: rotate(190.8deg);
    -moz-transform: rotate(190.8deg);
    -ms-transform: rotate(190.8deg);
    -o-transform: rotate(190.8deg);
    transform: rotate(190.8deg);
}

.c100.p54 .bar {
    -webkit-transform: rotate(194.4deg);
    -moz-transform: rotate(194.4deg);
    -ms-transform: rotate(194.4deg);
    -o-transform: rotate(194.4deg);
    transform: rotate(194.4deg);
}

.c100.p55 .bar {
    -webkit-transform: rotate(198deg);
    -moz-transform: rotate(198deg);
    -ms-transform: rotate(198deg);
    -o-transform: rotate(198deg);
    transform: rotate(198deg);
}

.c100.p56 .bar {
    -webkit-transform: rotate(201.6deg);
    -moz-transform: rotate(201.6deg);
    -ms-transform: rotate(201.6deg);
    -o-transform: rotate(201.6deg);
    transform: rotate(201.6deg);
}

.c100.p57 .bar {
    -webkit-transform: rotate(205.2deg);
    -moz-transform: rotate(205.2deg);
    -ms-transform: rotate(205.2deg);
    -o-transform: rotate(205.2deg);
    transform: rotate(205.2deg);
}

.c100.p58 .bar {
    -webkit-transform: rotate(208.8deg);
    -moz-transform: rotate(208.8deg);
    -ms-transform: rotate(208.8deg);
    -o-transform: rotate(208.8deg);
    transform: rotate(208.8deg);
}

.c100.p59 .bar {
    -webkit-transform: rotate(212.4deg);
    -moz-transform: rotate(212.4deg);
    -ms-transform: rotate(212.4deg);
    -o-transform: rotate(212.4deg);
    transform: rotate(212.4deg);
}

.c100.p60 .bar {
    -webkit-transform: rotate(216deg);
    -moz-transform: rotate(216deg);
    -ms-transform: rotate(216deg);
    -o-transform: rotate(216deg);
    transform: rotate(216deg);
}

.c100.p61 .bar {
    -webkit-transform: rotate(219.6deg);
    -moz-transform: rotate(219.6deg);
    -ms-transform: rotate(219.6deg);
    -o-transform: rotate(219.6deg);
    transform: rotate(219.6deg);
}

.c100.p62 .bar {
    -webkit-transform: rotate(223.2deg);
    -moz-transform: rotate(223.2deg);
    -ms-transform: rotate(223.2deg);
    -o-transform: rotate(223.2deg);
    transform: rotate(223.2deg);
}

.c100.p63 .bar {
    -webkit-transform: rotate(226.8deg);
    -moz-transform: rotate(226.8deg);
    -ms-transform: rotate(226.8deg);
    -o-transform: rotate(226.8deg);
    transform: rotate(226.8deg);
}

.c100.p64 .bar {
    -webkit-transform: rotate(230.4deg);
    -moz-transform: rotate(230.4deg);
    -ms-transform: rotate(230.4deg);
    -o-transform: rotate(230.4deg);
    transform: rotate(230.4deg);
}

.c100.p65 .bar {
    -webkit-transform: rotate(234deg);
    -moz-transform: rotate(234deg);
    -ms-transform: rotate(234deg);
    -o-transform: rotate(234deg);
    transform: rotate(234deg);
}

.c100.p66 .bar {
    -webkit-transform: rotate(237.6deg);
    -moz-transform: rotate(237.6deg);
    -ms-transform: rotate(237.6deg);
    -o-transform: rotate(237.6deg);
    transform: rotate(237.6deg);
}

.c100.p67 .bar {
    -webkit-transform: rotate(241.2deg);
    -moz-transform: rotate(241.2deg);
    -ms-transform: rotate(241.2deg);
    -o-transform: rotate(241.2deg);
    transform: rotate(241.2deg);
}

.c100.p68 .bar {
    -webkit-transform: rotate(244.8deg);
    -moz-transform: rotate(244.8deg);
    -ms-transform: rotate(244.8deg);
    -o-transform: rotate(244.8deg);
    transform: rotate(244.8deg);
}

.c100.p69 .bar {
    -webkit-transform: rotate(248.4deg);
    -moz-transform: rotate(248.4deg);
    -ms-transform: rotate(248.4deg);
    -o-transform: rotate(248.4deg);
    transform: rotate(248.4deg);
}

.c100.p70 .bar {
    -webkit-transform: rotate(252deg);
    -moz-transform: rotate(252deg);
    -ms-transform: rotate(252deg);
    -o-transform: rotate(252deg);
    transform: rotate(252deg);
}

.c100.p71 .bar {
    -webkit-transform: rotate(255.6deg);
    -moz-transform: rotate(255.6deg);
    -ms-transform: rotate(255.6deg);
    -o-transform: rotate(255.6deg);
    transform: rotate(255.6deg);
}

.c100.p72 .bar {
    -webkit-transform: rotate(259.2deg);
    -moz-transform: rotate(259.2deg);
    -ms-transform: rotate(259.2deg);
    -o-transform: rotate(259.2deg);
    transform: rotate(259.2deg);
}

.c100.p73 .bar {
    -webkit-transform: rotate(262.8deg);
    -moz-transform: rotate(262.8deg);
    -ms-transform: rotate(262.8deg);
    -o-transform: rotate(262.8deg);
    transform: rotate(262.8deg);
}

.c100.p74 .bar {
    -webkit-transform: rotate(266.4deg);
    -moz-transform: rotate(266.4deg);
    -ms-transform: rotate(266.4deg);
    -o-transform: rotate(266.4deg);
    transform: rotate(266.4deg);
}

.c100.p75 .bar {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}

.c100.p76 .bar {
    -webkit-transform: rotate(273.6deg);
    -moz-transform: rotate(273.6deg);
    -ms-transform: rotate(273.6deg);
    -o-transform: rotate(273.6deg);
    transform: rotate(273.6deg);
}

.c100.p77 .bar {
    -webkit-transform: rotate(277.2deg);
    -moz-transform: rotate(277.2deg);
    -ms-transform: rotate(277.2deg);
    -o-transform: rotate(277.2deg);
    transform: rotate(277.2deg);
}

.c100.p78 .bar {
    -webkit-transform: rotate(280.8deg);
    -moz-transform: rotate(280.8deg);
    -ms-transform: rotate(280.8deg);
    -o-transform: rotate(280.8deg);
    transform: rotate(280.8deg);
}

.c100.p79 .bar {
    -webkit-transform: rotate(284.4deg);
    -moz-transform: rotate(284.4deg);
    -ms-transform: rotate(284.4deg);
    -o-transform: rotate(284.4deg);
    transform: rotate(284.4deg);
}

.c100.p80 .bar {
    -webkit-transform: rotate(288deg);
    -moz-transform: rotate(288deg);
    -ms-transform: rotate(288deg);
    -o-transform: rotate(288deg);
    transform: rotate(288deg);
}

.c100.p81 .bar {
    -webkit-transform: rotate(291.6deg);
    -moz-transform: rotate(291.6deg);
    -ms-transform: rotate(291.6deg);
    -o-transform: rotate(291.6deg);
    transform: rotate(291.6deg);
}

.c100.p82 .bar {
    -webkit-transform: rotate(295.2deg);
    -moz-transform: rotate(295.2deg);
    -ms-transform: rotate(295.2deg);
    -o-transform: rotate(295.2deg);
    transform: rotate(295.2deg);
}

.c100.p83 .bar {
    -webkit-transform: rotate(298.8deg);
    -moz-transform: rotate(298.8deg);
    -ms-transform: rotate(298.8deg);
    -o-transform: rotate(298.8deg);
    transform: rotate(298.8deg);
}

.c100.p84 .bar {
    -webkit-transform: rotate(302.4deg);
    -moz-transform: rotate(302.4deg);
    -ms-transform: rotate(302.4deg);
    -o-transform: rotate(302.4deg);
    transform: rotate(302.4deg);
}

.c100.p85 .bar {
    -webkit-transform: rotate(306deg);
    -moz-transform: rotate(306deg);
    -ms-transform: rotate(306deg);
    -o-transform: rotate(306deg);
    transform: rotate(306deg);
}

.c100.p86 .bar {
    -webkit-transform: rotate(309.6deg);
    -moz-transform: rotate(309.6deg);
    -ms-transform: rotate(309.6deg);
    -o-transform: rotate(309.6deg);
    transform: rotate(309.6deg);
}

.c100.p87 .bar {
    -webkit-transform: rotate(313.2deg);
    -moz-transform: rotate(313.2deg);
    -ms-transform: rotate(313.2deg);
    -o-transform: rotate(313.2deg);
    transform: rotate(313.2deg);
}

.c100.p88 .bar {
    -webkit-transform: rotate(316.8deg);
    -moz-transform: rotate(316.8deg);
    -ms-transform: rotate(316.8deg);
    -o-transform: rotate(316.8deg);
    transform: rotate(316.8deg);
}

.c100.p89 .bar {
    -webkit-transform: rotate(320.4deg);
    -moz-transform: rotate(320.4deg);
    -ms-transform: rotate(320.4deg);
    -o-transform: rotate(320.4deg);
    transform: rotate(320.4deg);
}

.c100.p90 .bar {
    -webkit-transform: rotate(324deg);
    -moz-transform: rotate(324deg);
    -ms-transform: rotate(324deg);
    -o-transform: rotate(324deg);
    transform: rotate(324deg);
}

.c100.p91 .bar {
    -webkit-transform: rotate(327.6deg);
    -moz-transform: rotate(327.6deg);
    -ms-transform: rotate(327.6deg);
    -o-transform: rotate(327.6deg);
    transform: rotate(327.6deg);
}

.c100.p92 .bar {
    -webkit-transform: rotate(331.2deg);
    -moz-transform: rotate(331.2deg);
    -ms-transform: rotate(331.2deg);
    -o-transform: rotate(331.2deg);
    transform: rotate(331.2deg);
}

.c100.p93 .bar {
    -webkit-transform: rotate(334.8deg);
    -moz-transform: rotate(334.8deg);
    -ms-transform: rotate(334.8deg);
    -o-transform: rotate(334.8deg);
    transform: rotate(334.8deg);
}

.c100.p94 .bar {
    -webkit-transform: rotate(338.4deg);
    -moz-transform: rotate(338.4deg);
    -ms-transform: rotate(338.4deg);
    -o-transform: rotate(338.4deg);
    transform: rotate(338.4deg);
}

.c100.p95 .bar {
    -webkit-transform: rotate(342deg);
    -moz-transform: rotate(342deg);
    -ms-transform: rotate(342deg);
    -o-transform: rotate(342deg);
    transform: rotate(342deg);
}

.c100.p96 .bar {
    -webkit-transform: rotate(345.6deg);
    -moz-transform: rotate(345.6deg);
    -ms-transform: rotate(345.6deg);
    -o-transform: rotate(345.6deg);
    transform: rotate(345.6deg);
}

.c100.p97 .bar {
    -webkit-transform: rotate(349.2deg);
    -moz-transform: rotate(349.2deg);
    -ms-transform: rotate(349.2deg);
    -o-transform: rotate(349.2deg);
    transform: rotate(349.2deg);
}

.c100.p98 .bar {
    -webkit-transform: rotate(352.8deg);
    -moz-transform: rotate(352.8deg);
    -ms-transform: rotate(352.8deg);
    -o-transform: rotate(352.8deg);
    transform: rotate(352.8deg);
}

.c100.p99 .bar {
    -webkit-transform: rotate(356.4deg);
    -moz-transform: rotate(356.4deg);
    -ms-transform: rotate(356.4deg);
    -o-transform: rotate(356.4deg);
    transform: rotate(356.4deg);
}

.c100.p100 .bar {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

.c100:hover {
    cursor: default;
}

    .c100:hover > span {
        width: 3.33em;
        line-height: 3.33em;
        font-size: 0.3em;
        color: #307bbb;
    }

    .c100:hover:after {
        top: 0.04em;
        left: 0.04em;
        width: 0.92em;
        height: 0.92em;
    }

.c100.dark {
    background-color: #ff7b08;
}

    .c100.dark .bar,
    .c100.dark .fill {
        border-color: #c6ff00 !important;
    }

    .c100.dark > span {
        color: #fff;
        font-weight: 700;
    }

    .c100.dark:after {
        background-color: #ff7b08;
    }

    .c100.dark:hover > span {
        color: #fff;
    }

.c100.green .bar, .c100.green .fill {
    border-color: #00DF70 !important;
}

.c100.green:hover > span {
    color: #00DF70 !important;
}

.p100.c100.green:hover > span {
    color: #333 !important;
}

.c100.green.dark .bar, .c100.green.dark .fill {
    border-color: #5fd400 !important;
}

.c100.green.dark:hover > span {
    color: #5fd400;
}

.c100.blue .bar, .c100.blue .fill {
    border-color: #22a7ee !important;
}

.c100.blue:hover > span {
    color: #007fc4 !important;
}

.p100.c100.blue:hover > span {
    color: #333 !important;
}

.c100.blue.dark .bar, .c100.blue.dark .fill {
    border-color: #007fc4 !important;
}

.c100.blue.dark:hover > span {
    color: #007fc4;
}

.c100.orange .bar, .c100.orange .fill {
    border-color: #dd9d22 !important;
}

.c100.orange:hover > span {
    color: #dd9d22;
}

.c100.orange.dark .bar, .c100.orange.dark .fill {
    border-color: #eb5a00 !important;
}

.c100.orange.dark:hover > span {
    color: #fff;
}

.c100.orange.dark {
    background-color: #ff7b08;
}

    .c100.orange.dark:after {
        background-color: #ff7b08;
    }

.c100.red .bar, .c100.red .fill {
    border-color: #E04445 !important;
}

.c100.red:hover > span {
    color: #E04445;
}

.c100.red.dark .bar, .c100.red.dark .fill {
    border-color: #cc0000 !important;
}

.c100.red.dark:hover > span {
    color: #fff;
}

.c100.red.dark {
    background-color: #E04445;
}

    .c100.red.dark:after {
        background-color: #E04445;
    }

.c100.purple .bar, .c100.purple .fill {
    border-color: #8827AD !important;
}

.c100.purple:hover > span {
    color: #8827AD;
}

.c100.purple.dark .bar, .c100.purple.dark .fill {
    border-color: #8827AD !important;
}

.c100.purple.dark:hover > span {
    color: #fff;
}

.c100.purple.dark {
    background-color: #671D83;
}

    .c100.purple.dark:after {
        background-color: #8827AD;
    }
/****************************************************************
 *
 * CSS Percentage Circle
 * Author: Andre Firchow
 *
*****************************************************************/
.rect-auto, .c100pr.pr51 .slicepr, .c100pr.pr52 .slicepr, .c100pr.pr53 .slicepr, .c100pr.pr54 .slicepr, .c100pr.pr55 .slicepr, .c100pr.pr56 .slicepr, .c100pr.pr57 .slicepr, .c100pr.pr58 .slicepr, .c100pr.pr59 .slicepr, .c100pr.pr60 .slicepr, .c100pr.pr61 .slicepr, .c100pr.pr62 .slicepr, .c100pr.pr63 .slicepr, .c100pr.pr64 .slicepr, .c100pr.pr65 .slicepr, .c100pr.pr66 .slicepr, .c100pr.pr67 .slicepr, .c100pr.pr68 .slicepr, .c100pr.pr69 .slicepr, .c100pr.pr70 .slicepr, .c100pr.pr71 .slicepr, .c100pr.pr72 .slicepr, .c100pr.pr73 .slicepr, .c100pr.pr74 .slicepr, .c100pr.pr75 .slicepr, .c100pr.pr76 .slicepr, .c100pr.pr77 .slicepr, .c100pr.pr78 .slicepr, .c100pr.pr79 .slicepr, .c100pr.pr80 .slicepr, .c100pr.pr81 .slicepr, .c100pr.pr82 .slicepr, .c100pr.pr83 .slicepr, .c100pr.pr84 .slicepr, .c100pr.pr85 .slicepr, .c100pr.pr86 .slicepr, .c100pr.pr87 .slicepr, .c100pr.pr88 .slicepr, .c100pr.pr89 .slicepr, .c100pr.pr90 .slicepr, .c100pr.pr91 .slicepr, .c100pr.pr92 .slicepr, .c100pr.pr93 .slicepr, .c100pr.pr94 .slicepr, .c100pr.pr95 .slicepr, .c100pr.pr96 .slicepr, .c100pr.pr97 .slicepr, .c100pr.pr98 .slicepr, .c100pr.pr99 .slicepr, .c100pr.pr100 .slicepr {
    clip: rect(auto, auto, auto, auto);
}

.piepr, .c100pr .barpr, .c100pr.pr51 .fillpr, .c100pr.pr52 .fillpr, .c100pr.pr53 .fillpr, .c100pr.pr54 .fillpr, .c100pr.pr55 .fillpr, .c100pr.pr56 .fillpr, .c100pr.pr57 .fillpr, .c100pr.pr58 .fillpr, .c100pr.pr59 .fillpr, .c100pr.pr60 .fillpr, .c100pr.pr61 .fillpr, .c100pr.pr62 .fillpr, .c100pr.pr63 .fillpr, .c100pr.pr64 .fillpr, .c100pr.pr65 .fillpr, .c100pr.pr66 .fillpr, .c100pr.pr67 .fillpr, .c100pr.pr68 .fillpr, .c100pr.pr69 .fillpr, .c100pr.pr70 .fillpr, .c100pr.pr71 .fillpr, .c100pr.pr72 .fillpr, .c100pr.pr73 .fillpr, .c100pr.pr74 .fillpr, .c100pr.pr75 .fillpr, .c100pr.pr76 .fillpr, .c100pr.pr77 .fillpr, .c100pr.pr78 .fillpr, .c100pr.pr79 .fillpr, .c100pr.pr80 .fillpr, .c100pr.pr81 .fillpr, .c100pr.pr82 .fillpr, .c100pr.pr83 .fillpr, .c100pr.pr84 .fillpr, .c100pr.pr85 .fillpr, .c100pr.pr86 .fillpr, .c100pr.pr87 .fillpr, .c100pr.pr88 .fillpr, .c100pr.pr89 .fillpr, .c100pr.pr90 .fillpr, .c100pr.pr91 .fillpr, .c100pr.pr92 .fillpr, .c100pr.pr93 .fillpr, .c100pr.pr94 .fillpr, .c100pr.pr95 .fillpr, .c100pr.pr96 .fillpr, .c100pr.pr97 .fillpr, .c100pr.pr98 .fillpr, .c100pr.pr99 .fillpr, .c100pr.pr100 .fillpr {
    position: absolute;
    border: 0.08em solid #307bbb;
    width: 0.84em;
    height: 0.84em;
    clip: rect(0em, 0.5em, 1em, 0em);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.piepr-fill, .c100pr.pr51 .barpr:after, .c100pr.pr51 .fillpr, .c100pr.pr52 .barpr:after, .c100pr.pr52 .fillpr, .c100pr.pr53 .barpr:after, .c100pr.pr53 .fillpr, .c100pr.pr54 .barpr:after, .c100pr.pr54 .fillpr, .c100pr.pr55 .barpr:after, .c100pr.pr55 .fillpr, .c100pr.pr56 .barpr:after, .c100pr.pr56 .fillpr, .c100pr.pr57 .barpr:after, .c100pr.pr57 .fillpr, .c100pr.pr58 .barpr:after, .c100pr.pr58 .fillpr, .c100pr.pr59 .barpr:after, .c100pr.pr59 .fillpr, .c100pr.pr60 .barpr:after, .c100pr.pr60 .fillpr, .c100pr.pr61 .barpr:after, .c100pr.pr61 .fillpr, .c100pr.pr62 .barpr:after, .c100pr.pr62 .fillpr, .c100pr.pr63 .barpr:after, .c100pr.pr63 .fillpr, .c100pr.pr64 .barpr:after, .c100pr.pr64 .fillpr, .c100pr.pr65 .barpr:after, .c100pr.pr65 .fillpr, .c100pr.pr66 .barpr:after, .c100pr.pr66 .fillpr, .c100pr.pr67 .barpr:after, .c100pr.pr67 .fillpr, .c100pr.pr68 .barpr:after, .c100pr.pr68 .fillpr, .c100pr.pr69 .barpr:after, .c100pr.pr69 .fillpr, .c100pr.pr70 .barpr:after, .c100pr.pr70 .fillpr, .c100pr.pr71 .barpr:after, .c100pr.pr71 .fillpr, .c100pr.pr72 .barpr:after, .c100pr.pr72 .fillpr, .c100pr.pr73 .barpr:after, .c100pr.pr73 .fillpr, .c100pr.pr74 .barpr:after, .c100pr.pr74 .fillpr, .c100pr.pr75 .barpr:after, .c100pr.pr75 .fillpr, .c100pr.pr76 .barpr:after, .c100pr.pr76 .fillpr, .c100pr.pr77 .barpr:after, .c100pr.pr77 .fillpr, .c100pr.pr78 .barpr:after, .c100pr.pr78 .fillpr, .c100pr.pr79 .barpr:after, .c100pr.pr79 .fillpr, .c100pr.pr80 .barpr:after, .c100pr.pr80 .fillpr, .c100pr.pr81 .barpr:after, .c100pr.pr81 .fillpr, .c100pr.pr82 .barpr:after, .c100pr.pr82 .fillpr, .c100pr.pr83 .barpr:after, .c100pr.pr83 .fillpr, .c100pr.pr84 .barpr:after, .c100pr.pr84 .fillpr, .c100pr.pr85 .barpr:after, .c100pr.pr85 .fillpr, .c100pr.pr86 .barpr:after, .c100pr.pr86 .fillpr, .c100pr.pr87 .barpr:after, .c100pr.pr87 .fillpr, .c100pr.pr88 .barpr:after, .c100pr.pr88 .fillpr, .c100pr.pr89 .barpr:after, .c100pr.pr89 .fillpr, .c100pr.pr90 .barpr:after, .c100pr.pr90 .fillpr, .c100pr.pr91 .barpr:after, .c100pr.pr91 .fillpr, .c100pr.pr92 .barpr:after, .c100pr.pr92 .fillpr, .c100pr.pr93 .barpr:after, .c100pr.pr93 .fillpr, .c100pr.pr94 .barpr:after, .c100pr.pr94 .fillpr, .c100pr.pr95 .barpr:after, .c100pr.pr95 .fillpr, .c100pr.pr96 .barpr:after, .c100pr.pr96 .fillpr, .c100pr.pr97 .barpr:after, .c100pr.pr97 .fillpr, .c100pr.pr98 .barpr:after, .c100pr.pr98 .fillpr, .c100pr.pr99 .barpr:after, .c100pr.pr99 .fillpr, .c100pr.pr100 .barpr:after, .c100pr.pr100 .fillpr {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.c100pr {
    position: absolute;
    font-size: 120px;
    width: 1em;
    height: 1em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    margin: auto;
    background-color: transparent !important;
    transform: scaleX(-1);
    z-index: 3;
}

    .c100pr *, .c100pr *:before, .c100pr *:after {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

    .c100pr.center {
        float: none;
        margin: 0 auto;
    }

    .c100pr.big {
        font-size: 240px;
    }

    .c100pr.smallCirc {
        font-size: 40px;
    }

    .c100pr.calsRemCirc {
        font-size: 150px;
    }

    .c100pr.calsNutCirc2 {
        font-size: 190px;
    }

    .c100pr.ToolsCaloriesCirc2 {
        font-size: 150px;
    }

    .c100pr.ToolsCarbsCirc2,
    .c100pr.ToolsFatCirc2,
    .c100pr.ToolsProteinCirc2,
    .c100pr.ToolsFiberCirc2 {
        font-size: 60px;
    }

    .c100pr.programCirc {
        font-size: 60px;
    }

    .c100pr.MinutesCirc {
        font-size: 17em;
    }

    .c100pr > span {
        font-family: 'Oswald';
        font-weight: 500;
        position: absolute;
        width: 100%;
        z-index: 1;
        left: 0;
        top: 0;
        width: 3.33em;
        line-height: 3.33em;
        font-size: 0.3em;
        color: #333;
        display: block;
        text-align: center;
        white-space: nowrap;
        -webkit-transition-property: all;
        -moz-transition-property: all;
        -o-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 0.2s;
        -moz-transition-duration: 0.2s;
        -o-transition-duration: 0.2s;
        transition-duration: 0.2s;
        -webkit-transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

    .c100pr:after {
        position: absolute;
        top: 0.08em;
        left: 0.08em;
        display: block;
        content: " ";
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        background-color: transparent !important;
        width: 0.84em;
        height: 0.84em;
        -webkit-transition-property: all;
        -moz-transition-property: all;
        -o-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 0.2s;
        -moz-transition-duration: 0.2s;
        -o-transition-duration: 0.2s;
        transition-duration: 0.2s;
        -webkit-transition-timing-function: ease-in;
        -moz-transition-timing-function: ease-in;
        -o-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }

.p100.blue.c100pr:after {
    background-color: transparent;
    ;
}

.p100.blue.c100pr > span {
    color: #333;
}

.c100pr .slicepr {
    position: absolute;
    width: 1em;
    height: 1em;
    clip: rect(0em, 1em, 1em, 0.5em);
}

.c100pr.pr1 .barpr {
    -webkit-transform: rotate(3.6deg);
    -moz-transform: rotate(3.6deg);
    -ms-transform: rotate(3.6deg);
    -o-transform: rotate(3.6deg);
    transform: rotate(3.6deg);
}

.c100pr.pr2 .barpr {
    -webkit-transform: rotate(7.2deg);
    -moz-transform: rotate(7.2deg);
    -ms-transform: rotate(7.2deg);
    -o-transform: rotate(7.2deg);
    transform: rotate(7.2deg);
}

.c100pr.pr3 .barpr {
    -webkit-transform: rotate(10.8deg);
    -moz-transform: rotate(10.8deg);
    -ms-transform: rotate(10.8deg);
    -o-transform: rotate(10.8deg);
    transform: rotate(10.8deg);
}

.c100pr.pr4 .barpr {
    -webkit-transform: rotate(14.4deg);
    -moz-transform: rotate(14.4deg);
    -ms-transform: rotate(14.4deg);
    -o-transform: rotate(14.4deg);
    transform: rotate(14.4deg);
}

.c100pr.pr5 .barpr {
    -webkit-transform: rotate(18deg);
    -moz-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    -o-transform: rotate(18deg);
    transform: rotate(18deg);
}

.c100pr.pr6 .barpr {
    -webkit-transform: rotate(21.6deg);
    -moz-transform: rotate(21.6deg);
    -ms-transform: rotate(21.6deg);
    -o-transform: rotate(21.6deg);
    transform: rotate(21.6deg);
}

.c100pr.pr7 .barpr {
    -webkit-transform: rotate(25.2deg);
    -moz-transform: rotate(25.2deg);
    -ms-transform: rotate(25.2deg);
    -o-transform: rotate(25.2deg);
    transform: rotate(25.2deg);
}

.c100pr.pr8 .barpr {
    -webkit-transform: rotate(28.8deg);
    -moz-transform: rotate(28.8deg);
    -ms-transform: rotate(28.8deg);
    -o-transform: rotate(28.8deg);
    transform: rotate(28.8deg);
}

.c100pr.pr9 .barpr {
    -webkit-transform: rotate(32.4deg);
    -moz-transform: rotate(32.4deg);
    -ms-transform: rotate(32.4deg);
    -o-transform: rotate(32.4deg);
    transform: rotate(32.4deg);
}

.c100pr.pr10 .barpr {
    -webkit-transform: rotate(36deg);
    -moz-transform: rotate(36deg);
    -ms-transform: rotate(36deg);
    -o-transform: rotate(36deg);
    transform: rotate(36deg);
}

.c100pr.pr11 .barpr {
    -webkit-transform: rotate(39.6deg);
    -moz-transform: rotate(39.6deg);
    -ms-transform: rotate(39.6deg);
    -o-transform: rotate(39.6deg);
    transform: rotate(39.6deg);
}

.c100pr.pr12 .barpr {
    -webkit-transform: rotate(43.2deg);
    -moz-transform: rotate(43.2deg);
    -ms-transform: rotate(43.2deg);
    -o-transform: rotate(43.2deg);
    transform: rotate(43.2deg);
}

.c100pr.pr13 .barpr {
    -webkit-transform: rotate(46.8deg);
    -moz-transform: rotate(46.8deg);
    -ms-transform: rotate(46.8deg);
    -o-transform: rotate(46.8deg);
    transform: rotate(46.8deg);
}

.c100pr.pr14 .barpr {
    -webkit-transform: rotate(50.4deg);
    -moz-transform: rotate(50.4deg);
    -ms-transform: rotate(50.4deg);
    -o-transform: rotate(50.4deg);
    transform: rotate(50.4deg);
}

.c100pr.pr15 .barpr {
    -webkit-transform: rotate(54deg);
    -moz-transform: rotate(54deg);
    -ms-transform: rotate(54deg);
    -o-transform: rotate(54deg);
    transform: rotate(54deg);
}

.c100pr.pr16 .barpr {
    -webkit-transform: rotate(57.6deg);
    -moz-transform: rotate(57.6deg);
    -ms-transform: rotate(57.6deg);
    -o-transform: rotate(57.6deg);
    transform: rotate(57.6deg);
}

.c100pr.pr17 .barpr {
    -webkit-transform: rotate(61.2deg);
    -moz-transform: rotate(61.2deg);
    -ms-transform: rotate(61.2deg);
    -o-transform: rotate(61.2deg);
    transform: rotate(61.2deg);
}

.c100pr.pr18 .barpr {
    -webkit-transform: rotate(64.8deg);
    -moz-transform: rotate(64.8deg);
    -ms-transform: rotate(64.8deg);
    -o-transform: rotate(64.8deg);
    transform: rotate(64.8deg);
}

.c100pr.pr19 .barpr {
    -webkit-transform: rotate(68.4deg);
    -moz-transform: rotate(68.4deg);
    -ms-transform: rotate(68.4deg);
    -o-transform: rotate(68.4deg);
    transform: rotate(68.4deg);
}

.c100pr.pr20 .barpr {
    -webkit-transform: rotate(72deg);
    -moz-transform: rotate(72deg);
    -ms-transform: rotate(72deg);
    -o-transform: rotate(72deg);
    transform: rotate(72deg);
}

.c100pr.pr21 .barpr {
    -webkit-transform: rotate(75.6deg);
    -moz-transform: rotate(75.6deg);
    -ms-transform: rotate(75.6deg);
    -o-transform: rotate(75.6deg);
    transform: rotate(75.6deg);
}

.c100pr.pr22 .barpr {
    -webkit-transform: rotate(79.2deg);
    -moz-transform: rotate(79.2deg);
    -ms-transform: rotate(79.2deg);
    -o-transform: rotate(79.2deg);
    transform: rotate(79.2deg);
}

.c100pr.pr23 .barpr {
    -webkit-transform: rotate(82.8deg);
    -moz-transform: rotate(82.8deg);
    -ms-transform: rotate(82.8deg);
    -o-transform: rotate(82.8deg);
    transform: rotate(82.8deg);
}

.c100pr.pr24 .barpr {
    -webkit-transform: rotate(86.4deg);
    -moz-transform: rotate(86.4deg);
    -ms-transform: rotate(86.4deg);
    -o-transform: rotate(86.4deg);
    transform: rotate(86.4deg);
}

.c100pr.pr25 .barpr {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.c100pr.pr26 .barpr {
    -webkit-transform: rotate(93.6deg);
    -moz-transform: rotate(93.6deg);
    -ms-transform: rotate(93.6deg);
    -o-transform: rotate(93.6deg);
    transform: rotate(93.6deg);
}

.c100pr.pr27 .barpr {
    -webkit-transform: rotate(97.2deg);
    -moz-transform: rotate(97.2deg);
    -ms-transform: rotate(97.2deg);
    -o-transform: rotate(97.2deg);
    transform: rotate(97.2deg);
}

.c100pr.pr28 .barpr {
    -webkit-transform: rotate(100.8deg);
    -moz-transform: rotate(100.8deg);
    -ms-transform: rotate(100.8deg);
    -o-transform: rotate(100.8deg);
    transform: rotate(100.8deg);
}

.c100pr.pr29 .barpr {
    -webkit-transform: rotate(104.4deg);
    -moz-transform: rotate(104.4deg);
    -ms-transform: rotate(104.4deg);
    -o-transform: rotate(104.4deg);
    transform: rotate(104.4deg);
}

.c100pr.pr30 .barpr {
    -webkit-transform: rotate(108deg);
    -moz-transform: rotate(108deg);
    -ms-transform: rotate(108deg);
    -o-transform: rotate(108deg);
    transform: rotate(108deg);
}

.c100pr.pr31 .barpr {
    -webkit-transform: rotate(111.6deg);
    -moz-transform: rotate(111.6deg);
    -ms-transform: rotate(111.6deg);
    -o-transform: rotate(111.6deg);
    transform: rotate(111.6deg);
}

.c100pr.pr32 .barpr {
    -webkit-transform: rotate(115.2deg);
    -moz-transform: rotate(115.2deg);
    -ms-transform: rotate(115.2deg);
    -o-transform: rotate(115.2deg);
    transform: rotate(115.2deg);
}

.c100pr.pr33 .barpr {
    -webkit-transform: rotate(118.8deg);
    -moz-transform: rotate(118.8deg);
    -ms-transform: rotate(118.8deg);
    -o-transform: rotate(118.8deg);
    transform: rotate(118.8deg);
}

.c100pr.pr34 .barpr {
    -webkit-transform: rotate(122.4deg);
    -moz-transform: rotate(122.4deg);
    -ms-transform: rotate(122.4deg);
    -o-transform: rotate(122.4deg);
    transform: rotate(122.4deg);
}

.c100pr.pr35 .barpr {
    -webkit-transform: rotate(126deg);
    -moz-transform: rotate(126deg);
    -ms-transform: rotate(126deg);
    -o-transform: rotate(126deg);
    transform: rotate(126deg);
}

.c100pr.pr36 .barpr {
    -webkit-transform: rotate(129.6deg);
    -moz-transform: rotate(129.6deg);
    -ms-transform: rotate(129.6deg);
    -o-transform: rotate(129.6deg);
    transform: rotate(129.6deg);
}

.c100pr.pr37 .barpr {
    -webkit-transform: rotate(133.2deg);
    -moz-transform: rotate(133.2deg);
    -ms-transform: rotate(133.2deg);
    -o-transform: rotate(133.2deg);
    transform: rotate(133.2deg);
}

.c100pr.pr38 .barpr {
    -webkit-transform: rotate(136.8deg);
    -moz-transform: rotate(136.8deg);
    -ms-transform: rotate(136.8deg);
    -o-transform: rotate(136.8deg);
    transform: rotate(136.8deg);
}

.c100pr.pr39 .barpr {
    -webkit-transform: rotate(140.4deg);
    -moz-transform: rotate(140.4deg);
    -ms-transform: rotate(140.4deg);
    -o-transform: rotate(140.4deg);
    transform: rotate(140.4deg);
}

.c100pr.pr40 .barpr {
    -webkit-transform: rotate(144deg);
    -moz-transform: rotate(144deg);
    -ms-transform: rotate(144deg);
    -o-transform: rotate(144deg);
    transform: rotate(144deg);
}

.c100pr.pr41 .barpr {
    -webkit-transform: rotate(147.6deg);
    -moz-transform: rotate(147.6deg);
    -ms-transform: rotate(147.6deg);
    -o-transform: rotate(147.6deg);
    transform: rotate(147.6deg);
}

.c100pr.pr42 .barpr {
    -webkit-transform: rotate(151.2deg);
    -moz-transform: rotate(151.2deg);
    -ms-transform: rotate(151.2deg);
    -o-transform: rotate(151.2deg);
    transform: rotate(151.2deg);
}

.c100pr.pr43 .barpr {
    -webkit-transform: rotate(154.8deg);
    -moz-transform: rotate(154.8deg);
    -ms-transform: rotate(154.8deg);
    -o-transform: rotate(154.8deg);
    transform: rotate(154.8deg);
}

.c100pr.pr44 .barpr {
    -webkit-transform: rotate(158.4deg);
    -moz-transform: rotate(158.4deg);
    -ms-transform: rotate(158.4deg);
    -o-transform: rotate(158.4deg);
    transform: rotate(158.4deg);
}

.c100pr.pr45 .barpr {
    -webkit-transform: rotate(162deg);
    -moz-transform: rotate(162deg);
    -ms-transform: rotate(162deg);
    -o-transform: rotate(162deg);
    transform: rotate(162deg);
}

.c100pr.pr46 .barpr {
    -webkit-transform: rotate(165.6deg);
    -moz-transform: rotate(165.6deg);
    -ms-transform: rotate(165.6deg);
    -o-transform: rotate(165.6deg);
    transform: rotate(165.6deg);
}

.c100pr.pr47 .barpr {
    -webkit-transform: rotate(169.2deg);
    -moz-transform: rotate(169.2deg);
    -ms-transform: rotate(169.2deg);
    -o-transform: rotate(169.2deg);
    transform: rotate(169.2deg);
}

.c100pr.pr48 .barpr {
    -webkit-transform: rotate(172.8deg);
    -moz-transform: rotate(172.8deg);
    -ms-transform: rotate(172.8deg);
    -o-transform: rotate(172.8deg);
    transform: rotate(172.8deg);
}

.c100pr.pr49 .barpr {
    -webkit-transform: rotate(176.4deg);
    -moz-transform: rotate(176.4deg);
    -ms-transform: rotate(176.4deg);
    -o-transform: rotate(176.4deg);
    transform: rotate(176.4deg);
}

.c100pr.pr50 .barpr {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.c100pr.pr51 .barpr {
    -webkit-transform: rotate(183.6deg);
    -moz-transform: rotate(183.6deg);
    -ms-transform: rotate(183.6deg);
    -o-transform: rotate(183.6deg);
    transform: rotate(183.6deg);
}

.c100pr.pr52 .barpr {
    -webkit-transform: rotate(187.2deg);
    -moz-transform: rotate(187.2deg);
    -ms-transform: rotate(187.2deg);
    -o-transform: rotate(187.2deg);
    transform: rotate(187.2deg);
}

.c100pr.pr53 .barpr {
    -webkit-transform: rotate(190.8deg);
    -moz-transform: rotate(190.8deg);
    -ms-transform: rotate(190.8deg);
    -o-transform: rotate(190.8deg);
    transform: rotate(190.8deg);
}

.c100pr.pr54 .barpr {
    -webkit-transform: rotate(194.4deg);
    -moz-transform: rotate(194.4deg);
    -ms-transform: rotate(194.4deg);
    -o-transform: rotate(194.4deg);
    transform: rotate(194.4deg);
}

.c100pr.pr55 .barpr {
    -webkit-transform: rotate(198deg);
    -moz-transform: rotate(198deg);
    -ms-transform: rotate(198deg);
    -o-transform: rotate(198deg);
    transform: rotate(198deg);
}

.c100pr.pr56 .barpr {
    -webkit-transform: rotate(201.6deg);
    -moz-transform: rotate(201.6deg);
    -ms-transform: rotate(201.6deg);
    -o-transform: rotate(201.6deg);
    transform: rotate(201.6deg);
}

.c100pr.pr57 .barpr {
    -webkit-transform: rotate(205.2deg);
    -moz-transform: rotate(205.2deg);
    -ms-transform: rotate(205.2deg);
    -o-transform: rotate(205.2deg);
    transform: rotate(205.2deg);
}

.c100pr.pr58 .barpr {
    -webkit-transform: rotate(208.8deg);
    -moz-transform: rotate(208.8deg);
    -ms-transform: rotate(208.8deg);
    -o-transform: rotate(208.8deg);
    transform: rotate(208.8deg);
}

.c100pr.pr59 .barpr {
    -webkit-transform: rotate(212.4deg);
    -moz-transform: rotate(212.4deg);
    -ms-transform: rotate(212.4deg);
    -o-transform: rotate(212.4deg);
    transform: rotate(212.4deg);
}

.c100pr.pr60 .barpr {
    -webkit-transform: rotate(216deg);
    -moz-transform: rotate(216deg);
    -ms-transform: rotate(216deg);
    -o-transform: rotate(216deg);
    transform: rotate(216deg);
}

.c100pr.pr61 .barpr {
    -webkit-transform: rotate(219.6deg);
    -moz-transform: rotate(219.6deg);
    -ms-transform: rotate(219.6deg);
    -o-transform: rotate(219.6deg);
    transform: rotate(219.6deg);
}

.c100pr.pr62 .barpr {
    -webkit-transform: rotate(223.2deg);
    -moz-transform: rotate(223.2deg);
    -ms-transform: rotate(223.2deg);
    -o-transform: rotate(223.2deg);
    transform: rotate(223.2deg);
}

.c100pr.pr63 .barpr {
    -webkit-transform: rotate(226.8deg);
    -moz-transform: rotate(226.8deg);
    -ms-transform: rotate(226.8deg);
    -o-transform: rotate(226.8deg);
    transform: rotate(226.8deg);
}

.c100pr.pr64 .barpr {
    -webkit-transform: rotate(230.4deg);
    -moz-transform: rotate(230.4deg);
    -ms-transform: rotate(230.4deg);
    -o-transform: rotate(230.4deg);
    transform: rotate(230.4deg);
}

.c100pr.pr65 .barpr {
    -webkit-transform: rotate(234deg);
    -moz-transform: rotate(234deg);
    -ms-transform: rotate(234deg);
    -o-transform: rotate(234deg);
    transform: rotate(234deg);
}

.c100pr.pr66 .barpr {
    -webkit-transform: rotate(237.6deg);
    -moz-transform: rotate(237.6deg);
    -ms-transform: rotate(237.6deg);
    -o-transform: rotate(237.6deg);
    transform: rotate(237.6deg);
}

.c100pr.pr67 .barpr {
    -webkit-transform: rotate(241.2deg);
    -moz-transform: rotate(241.2deg);
    -ms-transform: rotate(241.2deg);
    -o-transform: rotate(241.2deg);
    transform: rotate(241.2deg);
}

.c100pr.pr68 .barpr {
    -webkit-transform: rotate(244.8deg);
    -moz-transform: rotate(244.8deg);
    -ms-transform: rotate(244.8deg);
    -o-transform: rotate(244.8deg);
    transform: rotate(244.8deg);
}

.c100pr.pr69 .barpr {
    -webkit-transform: rotate(248.4deg);
    -moz-transform: rotate(248.4deg);
    -ms-transform: rotate(248.4deg);
    -o-transform: rotate(248.4deg);
    transform: rotate(248.4deg);
}

.c100pr.pr70 .barpr {
    -webkit-transform: rotate(252deg);
    -moz-transform: rotate(252deg);
    -ms-transform: rotate(252deg);
    -o-transform: rotate(252deg);
    transform: rotate(252deg);
}

.c100pr.pr71 .barpr {
    -webkit-transform: rotate(255.6deg);
    -moz-transform: rotate(255.6deg);
    -ms-transform: rotate(255.6deg);
    -o-transform: rotate(255.6deg);
    transform: rotate(255.6deg);
}

.c100pr.pr72 .barpr {
    -webkit-transform: rotate(259.2deg);
    -moz-transform: rotate(259.2deg);
    -ms-transform: rotate(259.2deg);
    -o-transform: rotate(259.2deg);
    transform: rotate(259.2deg);
}

.c100pr.pr73 .barpr {
    -webkit-transform: rotate(262.8deg);
    -moz-transform: rotate(262.8deg);
    -ms-transform: rotate(262.8deg);
    -o-transform: rotate(262.8deg);
    transform: rotate(262.8deg);
}

.c100pr.pr74 .barpr {
    -webkit-transform: rotate(266.4deg);
    -moz-transform: rotate(266.4deg);
    -ms-transform: rotate(266.4deg);
    -o-transform: rotate(266.4deg);
    transform: rotate(266.4deg);
}

.c100pr.pr75 .barpr {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}

.c100pr.pr76 .barpr {
    -webkit-transform: rotate(273.6deg);
    -moz-transform: rotate(273.6deg);
    -ms-transform: rotate(273.6deg);
    -o-transform: rotate(273.6deg);
    transform: rotate(273.6deg);
}

.c100pr.pr77 .barpr {
    -webkit-transform: rotate(277.2deg);
    -moz-transform: rotate(277.2deg);
    -ms-transform: rotate(277.2deg);
    -o-transform: rotate(277.2deg);
    transform: rotate(277.2deg);
}

.c100pr.pr78 .barpr {
    -webkit-transform: rotate(280.8deg);
    -moz-transform: rotate(280.8deg);
    -ms-transform: rotate(280.8deg);
    -o-transform: rotate(280.8deg);
    transform: rotate(280.8deg);
}

.c100pr.pr79 .barpr {
    -webkit-transform: rotate(284.4deg);
    -moz-transform: rotate(284.4deg);
    -ms-transform: rotate(284.4deg);
    -o-transform: rotate(284.4deg);
    transform: rotate(284.4deg);
}

.c100pr.pr80 .barpr {
    -webkit-transform: rotate(288deg);
    -moz-transform: rotate(288deg);
    -ms-transform: rotate(288deg);
    -o-transform: rotate(288deg);
    transform: rotate(288deg);
}

.c100pr.pr81 .barpr {
    -webkit-transform: rotate(291.6deg);
    -moz-transform: rotate(291.6deg);
    -ms-transform: rotate(291.6deg);
    -o-transform: rotate(291.6deg);
    transform: rotate(291.6deg);
}

.c100pr.pr82 .barpr {
    -webkit-transform: rotate(295.2deg);
    -moz-transform: rotate(295.2deg);
    -ms-transform: rotate(295.2deg);
    -o-transform: rotate(295.2deg);
    transform: rotate(295.2deg);
}

.c100pr.pr83 .barpr {
    -webkit-transform: rotate(298.8deg);
    -moz-transform: rotate(298.8deg);
    -ms-transform: rotate(298.8deg);
    -o-transform: rotate(298.8deg);
    transform: rotate(298.8deg);
}

.c100pr.pr84 .barpr {
    -webkit-transform: rotate(302.4deg);
    -moz-transform: rotate(302.4deg);
    -ms-transform: rotate(302.4deg);
    -o-transform: rotate(302.4deg);
    transform: rotate(302.4deg);
}

.c100pr.pr85 .barpr {
    -webkit-transform: rotate(306deg);
    -moz-transform: rotate(306deg);
    -ms-transform: rotate(306deg);
    -o-transform: rotate(306deg);
    transform: rotate(306deg);
}

.c100pr.pr86 .barpr {
    -webkit-transform: rotate(309.6deg);
    -moz-transform: rotate(309.6deg);
    -ms-transform: rotate(309.6deg);
    -o-transform: rotate(309.6deg);
    transform: rotate(309.6deg);
}

.c100pr.pr87 .barpr {
    -webkit-transform: rotate(313.2deg);
    -moz-transform: rotate(313.2deg);
    -ms-transform: rotate(313.2deg);
    -o-transform: rotate(313.2deg);
    transform: rotate(313.2deg);
}

.c100pr.pr88 .barpr {
    -webkit-transform: rotate(316.8deg);
    -moz-transform: rotate(316.8deg);
    -ms-transform: rotate(316.8deg);
    -o-transform: rotate(316.8deg);
    transform: rotate(316.8deg);
}

.c100pr.pr89 .barpr {
    -webkit-transform: rotate(320.4deg);
    -moz-transform: rotate(320.4deg);
    -ms-transform: rotate(320.4deg);
    -o-transform: rotate(320.4deg);
    transform: rotate(320.4deg);
}

.c100pr.pr90 .barpr {
    -webkit-transform: rotate(324deg);
    -moz-transform: rotate(324deg);
    -ms-transform: rotate(324deg);
    -o-transform: rotate(324deg);
    transform: rotate(324deg);
}

.c100pr.pr91 .barpr {
    -webkit-transform: rotate(327.6deg);
    -moz-transform: rotate(327.6deg);
    -ms-transform: rotate(327.6deg);
    -o-transform: rotate(327.6deg);
    transform: rotate(327.6deg);
}

.c100pr.pr92 .barpr {
    -webkit-transform: rotate(331.2deg);
    -moz-transform: rotate(331.2deg);
    -ms-transform: rotate(331.2deg);
    -o-transform: rotate(331.2deg);
    transform: rotate(331.2deg);
}

.c100pr.pr93 .barpr {
    -webkit-transform: rotate(334.8deg);
    -moz-transform: rotate(334.8deg);
    -ms-transform: rotate(334.8deg);
    -o-transform: rotate(334.8deg);
    transform: rotate(334.8deg);
}

.c100pr.pr94 .barpr {
    -webkit-transform: rotate(338.4deg);
    -moz-transform: rotate(338.4deg);
    -ms-transform: rotate(338.4deg);
    -o-transform: rotate(338.4deg);
    transform: rotate(338.4deg);
}

.c100pr.pr95 .barpr {
    -webkit-transform: rotate(342deg);
    -moz-transform: rotate(342deg);
    -ms-transform: rotate(342deg);
    -o-transform: rotate(342deg);
    transform: rotate(342deg);
}

.c100pr.pr96 .barpr {
    -webkit-transform: rotate(345.6deg);
    -moz-transform: rotate(345.6deg);
    -ms-transform: rotate(345.6deg);
    -o-transform: rotate(345.6deg);
    transform: rotate(345.6deg);
}

.c100pr.pr97 .barpr {
    -webkit-transform: rotate(349.2deg);
    -moz-transform: rotate(349.2deg);
    -ms-transform: rotate(349.2deg);
    -o-transform: rotate(349.2deg);
    transform: rotate(349.2deg);
}

.c100pr.pr98 .barpr {
    -webkit-transform: rotate(352.8deg);
    -moz-transform: rotate(352.8deg);
    -ms-transform: rotate(352.8deg);
    -o-transform: rotate(352.8deg);
    transform: rotate(352.8deg);
}

.c100pr.pr99 .barpr {
    -webkit-transform: rotate(356.4deg);
    -moz-transform: rotate(356.4deg);
    -ms-transform: rotate(356.4deg);
    -o-transform: rotate(356.4deg);
    transform: rotate(356.4deg);
}

.c100pr.pr100 .barpr {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

.c100pr:hover {
    cursor: default;
}

    .c100pr:hover > span {
        width: 3.33em;
        line-height: 3.33em;
        font-size: 0.3em;
        color: #307bbb;
    }

    .c100pr:hover:after {
        top: 0.04em;
        left: 0.04em;
        width: 0.92em;
        height: 0.92em;
    }

.c100pr.dark {
    background-color: #ff7b08;
}

    .c100pr.dark .barpr,
    .c100pr.dark .fillpr {
        border-color: #c6ff00 !important;
    }

    .c100pr.dark > span {
        color: #fff;
        font-weight: 700;
    }

    .c100pr.dark:after {
        background-color: #ff7b08;
    }

    .c100pr.dark:hover > span {
        color: #fff;
    }

.c100pr.blue .barpr, .c100pr.blue .fillpr {
    border-color: rgba(0,0,0,0.1) !important;
}

.c100pr.blue:hover > span {
    color: #007fc4 !important;
}

.p100.c100pr.blue:hover > span {
    color: #333 !important;
}

.c100pr.blue.dark .barpr, .c100pr.blue.dark .fillpr {
    border-color: #007fc4 !important;
}

.c100pr.blue.dark:hover > span {
    color: #007fc4;
}

.c100pr.orange .barpr, .c100pr.orange .fillpr {
    border-color: #dd9d22 !important;
}

.c100pr.orange:hover > span {
    color: #dd9d22;
}

.c100pr.orange.dark .barpr, .c100pr.orange.dark .fillpr {
    border-color: #eb5a00 !important;
}

.c100pr.orange.dark:hover > span {
    color: #fff;
}

.c100pr.orange.dark {
    background-color: #ff7b08;
}

    .c100pr.orange.dark:after {
        background-color: #ff7b08;
    }

.c100pr.red .barpr, .c100pr.red .fillpr {
    border-color: #E04445 !important;
}

.c100pr.red:hover > span {
    color: #E04445;
}

.c100pr.red.dark .barpr, .c100pr.red.dark .fillpr {
    border-color: #cc0000 !important;
}

.c100pr.red.dark:hover > span {
    color: #fff;
}

.c100pr.red.dark {
    background-color: #E04445;
}

    .c100pr.red.dark:after {
        background-color: #E04445;
    }

.c100pr.purple .barpr, .c100pr.purple .fillpr {
    border-color: #8827AD !important;
}

.c100pr.purple:hover > span {
    color: #8827AD;
}

.c100pr.purple.dark .barpr, .c100pr.purple.dark .fillpr {
    border-color: #8827AD !important;
}

.c100pr.purple.dark:hover > span {
    color: #fff;
}

.c100pr.purple.dark {
    background-color: #671D83;
}

    .c100pr.purple.dark:after {
        background-color: #8827AD;
    }
#calendar_pos_w {
    position: relative;
    z-index: 1000000000;
}

#calendar_pos {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000000000;
}

#calendar_pad {
    position: absolute;
    width: 16em;
    padding: 1.0em 1.2em 1.2em 1.2em;
    z-index: 1000000000;
    background-color: white;
    box-shadow: 0 0 0.75em rgba(0,0,0,.8);
}

#calendarLayer {
    z-index: 1000000000;
}

.qcal_close_w {
    width: 100%;
    text-align: left;
}

.qcal_close {
    color: #666;
    text-align: center;
    font-size: .88em;
    display: block;
}

#qcal_close_btn {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    padding: .4em;
    font-size: 1.5em;
    z-index: 1000000001;
}

#qcal_date {
    text-align: center;
    margin: .8em 0 .8em 0;
    padding: 0;
    display: block;
}

.GoToToday {
    width: 100%;
    font-weight: bold;
    margin: .4em 0 .4em 0;
    text-align: center;
    position: relative;
}

    .GoToToday BUTTON {
        font-size: .88em;
        color: #2B71BD;
    }

.DayNormal {
    color: black;
    background-color: white;
    text-align: inherit;
}

    .DayNormal BUTTON,
    .DaySelected BUTTON {
        display: block !important;
        padding: 0 !important;
        border-radius: 2.1em;
        width: 2.1em;
        height: 2.1em;
        line-height: 100%;
        margin: 0 auto;
        position: relative;
        color: black;
        font-size: 1em;
        font-weight: bold;
        background-color: white;
        text-align: center;
        text-decoration: none;
    }

.DaySelected BUTTON {
    color: white;
    background-color: black;
}

.DayGrayed {
    color: #666666;
    width: 2.1em;
    height: 2.1em;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.DayTitle {
    font-size: 1em;
    color: #3F5F94;
    padding: 0.1875em 0.3125em;
    text-align: center;
}

.DaySelected {
    text-align: center;
}

.DateTitle {
    color: black;
    font-size: 1em;
    font-weight: bold;
    width: 11em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

#cal_table {
    border-colapse: collapse;
    border: 0;
    margin: 0;
    padding: 0;
}

    #cal_table TD, #cal_table TH {
        text-align: center;
        padding: 0.0625em;
    }

.cal_prev, .cal_next {
    display: inline-block;
    overflow: hidden;
    line-height: 900;
    vertical-align: middle;
    width: 2em;
    height: 2em;
    padding: 0;
    background-size: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.3;
}

.cal_prev {
    background-image: url(/Content/Images/iws_arrow_lt.svg);
}

.cal_next {
    background-image: url(/Content/Images/iws_arrow_rt.svg);
}

.copyTo {
    font-size: .88em;
    font-weight: 700;
    text-align: center;
    margin: .4em 0 .4em 0;
}

.copySelect {
    max-width: 7.5em;
    font-weight: bold;
}

.copyText {
    text-align: center;
    font-weight: bold;
    font-size: 1em;
    color: #6EA626;
}

.calendarOffset {
    margin: 0 auto;
    width: 18.75em;
    height: 0.125em;
    text-align: center;
}

/*inpage calendar*/
#date_w {
    text-align: center;
    width: 100%;
    margin: 0.5em auto 0.5em auto;
    /*
    height: 2.4em;
        */
    position: relative;
    display: block;
    vertical-align: top;
    z-index: 5000001;
}

BUTTON.todays_date_a,
BUTTON.todays_date_range_a,
.todays_date_a,
.todays_date_range_a {
    background-color: transparent;
    border: 0;
    color: black;
    font-weight: 500;
    font-family: 'Oswald';
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.3em;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin: 0 3em;
    padding: 0 1em;
    color: black;
}

BUTTON.todays_date_range_a,
.todays_date_range_a {
    background-color: transparent;
    border: 0;
    font-size: 1em;
    margin: 0 .5em;
}

BUTTON.cal_icon_btn {
    background-color: transparent;
    border: 0;
    display: inline-block;
    overflow: hidden;
    line-height: 900;
    vertical-align: middle;
    width: 2em;
    height: 2em;
    margin-right: .8em;
    padding: 0;
    background-size: 100%; /*background-image:url(images/dte2_cal_icon.png);*/
    background-repeat: no-repeat;
}

BUTTON.dte_arrow_lt,
BUTTON.dte_arrow_lt_gray,
BUTTON.dte_arrow_rt,
BUTTON.dte_arrow_rt_gray {
    background-color: transparent;
    border: 0;
    display: inline-block;
    overflow: hidden;
    line-height: 900;
    vertical-align: middle;
    width: 2em;
    height: 2em;
    padding: 0;
    background-size: 100%;
    background-size: 1.5em;
    background-repeat: no-repeat;
    opacity: .3;
}

BUTTON.dte_arrow_lt,
BUTTON.dte_arrow_lt_gray {
    background-color: transparent;
    border: 0;
    background-image: url(/Content/Images/iws_arrow_lt.svg);
    background-position: left;
}

BUTTON.dte_arrow_rt,
BUTTON.dte_arrow_rt_gray {
    background-color: transparent;
    border: 0;
    background-image: url(/Content/Images/iws_arrow_rt.svg);
    background-position: right;
}

BUTTON.dte_arrow_lt_gray,
BUTTON.dte_arrow_rt_gray {
    background-position: 0 -4em;
}

BUTTON.cal_icon_start_btn > .cal_icon,
BUTTON.cal_icon_end_btn > .cal_icon {
    background-color: transparent;
    border: 0;
    display: inline-block;
    overflow: hidden;
    line-height: 900;
    vertical-align: middle;
    width: 2em;
    height: 2em;
    margin-right: .8em;
    padding: 0;
    background-size: 100%; /*background-image:url(images/dte2_cal_icon.png);*/
    background-repeat: no-repeat;
}

BUTTON.cal_icon_start_btn > .cal_icon_text,
BUTTON.cal_icon_end_btn > .cal_icon_text {
    background-color: transparent;
    border: 0;
    display: inline-block;
    overflow: hidden;
    line-height: 120%;
    vertical-align: middle;
    padding: 0;
    font-size: .9em;
    color: #2B71BD;
}

BUTTON.dte_arrow_lt,
BUTTON.dte_arrow_lt_gray {
    background-color: transparent;
    border: 0;
    position: absolute;
    left: 0em;
}

BUTTON.dte_arrow_rt,
BUTTON.dte_arrow_rt_gray {
    background-color: transparent;
    border: 0;
    position: absolute;
    right: 0em;
}

/*@media only screen and (min-device-width: 64em) {*/
@media (hover: hover) {
    /*hovers only*/
    .DayNormal BUTTON:hover {
        background-color: #cc0000;
        color: white;
    }

    .DaySelected BUTTON:hover {
        background-color: #cc0000;
        color: white;
    }

    BUTTON.todays_date_a:hover,
    BUTTON.todays_date_range_a:hover,
    .todays_date_range_a:hover {
        color: #2B71BD;
        filter: alpha(opacity=80);
        opacity: 0.80;
        -moz-opacity: 0.80;
    }

    BUTTON.dte_arrow_lt:hover,
    BUTTON.dte_arrow_rt:hover,
    BUTTON.cal_next:hover,
    BUTTON.cal_prev:hover {
        opacity: 1;
        filter: invert(.5) sepia(1) saturate(5) hue-rotate(175deg);
    }
}

@media screen and (max-width: 48em) {
    BUTTON.todays_date_a {
        font-size: 1.1em;
    }
}

@media screen and (max-width: 34em) {
    /*mobile fixes*/

    #date_w, #date {
        position: relative !important;
        width: 100% !important;
        display: block !important;
        text-align: center;
    }

    BUTTON.todays_date_a { /*font-size:1em; line-height:2em;*/
        margin: 0 0;
        position: relative;
    }

    BUTTON.todays_date_range_a,
    .todays_date_range_a {
        font-size: 1em;
        margin: 0 .5em;
        position: relative;
    }

    BUTTON.cal_icon_btn {
        display: inline-block;
        width: 1em;
        height: 1em;
        top: 0.5em;
        margin-right: 0.25em;
        margin-left: .5em;
    }
}
.task_w {
    width: 100%;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: bottom;
    background-color: #FFF;
    box-shadow: 0 0 0.6em rgba(0,0,0,0.1);
    border-radius: .5em;
    /*padding: 1em 4%;*/
    overflow: hidden;
}

.task {
}

.task_tabs_w {
}

.task_list_img {
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}

.task_tab {
    overflow: visible;
    display: inline-block;
    position: relative;
    font-weight: bold;
    padding: .6em 1em .4em 1em;
    margin-left: .5em;
    font-size: 1.3em;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    background-color: #E1E1E1;
}

    .task_tab.selected {
        background-color: #F5F5F5;
    }

    .task_tab:active {
        background-color: #F5F5F5;
    }

.to_do_now {
    height: .9em;
}

.to_do_now_alert {
    color: white;
    font-size: 1rem;
    background-color: #dd0000;
    border-radius: 1.5em;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    position: absolute;
    top: -.5em;
    right: -.5em;
}

.task_tab_tdn {
    overflow: visible;
    display: none;
    position: relative;
    font-weight: bold;
    padding: .6em 1em .4em 1em;
    margin-left: .5em;
    font-size: 1.3em;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    background-color: #E1E1E1;
}

    .task_tab_tdn.selected {
        background-color: #F5F5F5;
    }

    .task_tab_tdn:active {
        background-color: #F5F5F5;
    }

.task_list {
    position: relative;
    padding: .5em 0;
    border-bottom: 0.06em solid #d5d5d5;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.task_list_weight {
    position: relative;
    padding: 0 0 1em 0;
    border-bottom: 0.06em solid #d5d5d5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

    .task_list_weight .feat_text {
        font-size: 1.6em;
        line-height: 120%;
        cursor: pointer;
    }

    .task_list_weight .task_points {
        font-size: 0.8em;
        margin-top: 0.3em;
    }

.task_list:last-of-type {
    border-bottom: 0;
}

.task_action > .button {
    margin: auto !important;
}

.task_list > .button {
    margin: auto !important;
}

.task_list_weight > .button {
    margin: auto !important;
}

.bt_col3 > .button {
    margin: auto !important;
}

.task_list_btm {
    position: relative;
    padding: .5em 0;
    display: flex;
    flex-wrap: row wrap;
    align-items: center;
    justify-content: space-between;
}

.task_main {
    justify-content: flex-start;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.task_main_weight {
    justify-content: flex-start;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.feat_text {
    display: inline-block;
    vertical-align: middle;
    margin: auto .75em;
    font-weight: 700;
}

    .feat_text > BUTTON {
        font-weight: 700;
    }

.task_points, .task_reminder, .task_completed {
    color: #666;
    font-size: .9em;
    display: block;
    font-weight: 400;
}

.task_move {
    display: inline-block;
    vertical-align: middle;
    margin: auto;
}

.task_action {
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    margin: 0 0 0 auto;
    justify-content: flex-end;
    align-items: center;
    cursor: pointer;
    min-width: 5em;
}

.task_action_arrow {
    display: inline-block;
    vertical-align: middle;
    margin: auto auto auto auto;
    justify-content: flex-end;
    align-items: center;
    opacity: 0.3;
    max-width: 1.5em;
}

.task_action_button {
    background-color: transparent;
    border: 0;
    color: #2B71BD;
    display: inline-block;
    vertical-align: middle;
    margin: auto;
    border-radius: 3em;
    padding: 0.4em 1em 0.4em 0.4em;
    transition: background-color .6s;
    cursor: pointer;
}

.task_empty_button {
    display: inline-block;
    vertical-align: middle;
    margin: 0 !important;
    text-align: left;
    padding: 0 !important;
}

.task_button_text {
    display: inline-block;
    vertical-align: middle;
    margin: auto;
    color: #2B71BD;
    max-width: 19rem;
}

.task_button_text2 {
    text-align: center;
}

.task_button {
    background-color: transparent;
    border: 0;
    display: inline-block;
    vertical-align: middle;
    margin: auto;
}

.task_button_icon {
    display: inline-block;
    vertical-align: middle;
    margin: auto .2em auto auto;
    width: 2em;
}

.bt_col1, .bt_col2, .bt_col3 {
    display: inline-block;
    vertical-align: middle;
    margin: auto;
}

.bt_col1 {
    margin: auto auto auto 0;
}

.bt_col3 {
    margin: auto 0 auto auto;
    justify-content: flex-end;
    align-items: center;
}

.edit_text {
    text-transform: uppercase;
    font-weight: 700;
    font-size: .9em;
    color: #333;
}

/*special tasks*/
.task_cals_rem {
    display: inline-block;
    vertical-align: middle;
    margin: auto;
    cursor: pointer;
}

.program_list_btn {
    flex: 0 0 100%;
}

.task_cals_num {
    display: inline-block;
    vertical-align: middle;
    margin: auto;
}

.circ_w {
    display: inline-block;
    vertical-align: middle;
    margin: auto;
    position: relative;
    cursor: pointer !important;
}

.circ_complete {
    font-size: 0.75rem !important;
    position: absolute !important;
    bottom: 2.5em !important;
    left: 50% !important;
    margin-left: -3em;
    width: 6em;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center !important;
    font-style: normal;
    display: block !important;
    color: #333;
    z-index: 4;
}

.circ_complete2 {
    font-size: 0.75rem !important;
    position: absolute !important;
    bottom: 2em !important;
    left: 50% !important;
    margin-left: -6em;
    width: 12em;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center !important;
    font-style: normal;
    display: block !important;
    color: #333;
    z-index: 4;
    line-height: 115%;
}

.p100 .circ_complete {
    color: #333;
}

.p100 .circ_complete2 {
    color: #333;
}

.cals_rem_t1 {
    font-size: 1.3em;
    display: block;
    text-align: center;
}

.cals_rem_t2 {
    font-size: .8em;
    display: block;
    text-align: center;
}

.cals_over {
    font-size: 1em;
}

.water_num {
    font-size: 2em;
    min-width: 1.2em;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    margin: auto;
}

.task_water_add, .task_water_minus, .water_button_icon {
    display: inline-block;
    vertical-align: middle;
    margin: auto;
}

.borderbtm0 {
    border-bottom: 0;
}

.task_ex_rem {
    display: inline-block;
    vertical-align: middle;
    margin: auto;
    cursor: pointer;
}

.task_ex_num {
    display: inline-block;
    vertical-align: middle;
    margin: auto;
}

.ex_rem_t1 {
    font-size: 1.3em;
    display: block;
    text-align: center;
}

.ex_rem_t2 {
    font-size: .8em;
    display: block;
    text-align: center;
}

.task_weight_rem {
    display: inline-block;
    vertical-align: middle;
    margin: auto;
    cursor: pointer;
}

.task_weight_num {
    display: inline-block;
    vertical-align: middle;
    margin: auto;
}

.weight_rem_t1 {
    font-size: 1.1em;
    display: block;
    text-align: center;
}

.weight_rem_t2 {
    font-size: .8em;
    display: block;
    text-align: center;
}

.tdx1 {
    font-weight: 700;
    margin: 1em auto;
    text-align: center;
    color: #eb5a00;
    font-size: 1.2em;
}

.tdx2 {
    margin: 1em 14%;
    font-size: 1.1em;
}
/*edit mode*/

.task_edit_button {
}

.task_remove_button {
}

.task_drag {
    display: none;
    width: 2.4em;
    height: 2.4em;
    vertical-align: middle;
    cursor: move;
}

.prioritize_text {
    color: #999;
    font-size: .9em;
    display: block;
    margin: .4em auto;
}

.to_do_now2 {
    height: 1.2em;
    display: inline-block;
    vertical-align: middle;
    margin: .4em auto;
}

.task_toggle {
    height: 2em;
    display: inline-block;
    vertical-align: middle;
    margin: .4em auto .4em .4em;
}

.task_prioritize_set_button {
}

.edit_mode_show, .edit_mode_show_flex {
    display: none;
}

.edit_mode_hide, .edit_mode_hide_flex {
}

.drag_text {
    color: #777;
    display: none;
    font-size: .9em;
}

fieldset:last-child {
    margin-bottom: 0;
}

input[type="checkbox"].feat_cb_enabled {
    cursor: pointer;
}

input[type="checkbox"].feat_checkbox {
    position: absolute;
    height: 2em;
    width: 2em;
    min-width: 2em !important;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    opacity: 0;
    line-height: 2em;
}

    input[type="checkbox"].feat_checkbox + label {
        cursor: pointer;
        /*padding: .5em;*/
        font-weight: 600;
        display: flex;
        flex-wrap: nowrap;
    }

        input[type="checkbox"].feat_checkbox + label:before {
            flex: 0 1 auto;
            background-color: #Fff;
            height: 2em;
            width: 2em;
            min-width: 2em !important;
            display: inline-block;
            vertical-align: middle;
            padding: 0 0 0 0;
            border-radius: 0.3rem;
            border: 0.0625rem solid #ccc;
            cursor: pointer;
            content: " ";
            -webkit-transition: all 0.30s ease-in-out;
            -moz-transition: all 0.30s ease-in-out;
            -ms-transition: all 0.30s ease-in-out;
            -o-transition: all 0.30s ease-in-out;
            outline: none;
            /*margin: .2em .5em .2em 0px;*/
            margin: .2em auto .2em auto;
            border: 0.0625rem solid #DDDDDD;
        }

        input[type="checkbox"].feat_checkbox + label:before {
        }

    input[type="checkbox"].feat_checkbox:focus + label:before {
        box-shadow: 0 0 0.2rem rgba(81, 203, 238, 1);
        border: 0.0625rem solid rgba(81, 203, 238, 1);
    }

    input[type="checkbox"].feat_checkbox:checked + label:before {
        background: url(/Content/Images/iws_check.svg) no-repeat;
        background-size: contain;
        background-color: #Fff;
    }

    input[type="checkbox"].feat_checkbox:checked:focus + label:before {
        background: url(/Content/Images/iws_check.svg) no-repeat;
        background-size: contain;
        background-color: #Fff;
    }

    input[type="checkbox"].feat_checkbox:checked + label {
    }

        input[type="checkbox"].feat_checkbox:checked + label .task_points {
            color: #eb5a00;
        }

input[type="checkbox"][disabled].feat_checkbox + label:before {
    background-color: #f2f2f2;
}

input[type="checkbox"].mobile_feat_checkbox_edit + label:before {
    display: none;
    height: 0em;
    width: 0em;
}

.feat_label {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.btn_dismiss {
    background-color: transparent !important;
    color: #666 !important;
    font-size: 0.75em;
    padding: 0 !important;
    border: 0 !important;
}

.cursor-pointer {
    cursor: pointer;
}

@media screen and (max-width: 64em) {
    .task_cals_rem {
        transform: scale(0.8);
        margin-left: 0;
        height: 11em;
    }

    .task_list_weight .feat_text {
        font-size: 1.4em;
    }
}

@media (hover: hover) {
    BUTTON:hover {
        filter: alpha(opacity=90);
        opacity: 0.90;
    }

    a.bl_link:hover {
        color: #22A7EE;
    }

    a.blue_link:hover {
        color: #22A7EE;
    }

    .task_action_button:hover {
    }

        .task_action_button:hover SPAN {
            color: #22A7EE;
        }

    .task_action:hover .task_button_text {
        color: #22A7EE;
    }

    .blank:hover {
        color: #22a7ee;
        font-weight: 400;
        text-shadow: none;
        box-shadow: none;
    }
}

/*mobile fixes*/
@media screen and (max-width: 46em) {
    .task_w {
        width: 100%;
        display: block;
        text-align: left;
        border-radius: 0;
        box-shadow: none;
    }

    .task_list {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
    }

    .task_main {
        justify-content: flex-start;
    }

    .bt_col1, .bt_col3 {
    }

    .feat_text {
        margin: auto auto auto .4em;
    }

    .mobile_feat_label_edit {
        margin: auto auto auto 0;
        padding: .5em 0 !important;
    }

    .mobile_task_action_edit {
        margin: auto 0 auto auto;
        display: flex;
        flex-wrap: nowrap;
    }

    .mobile_feat_text_edit {
        margin: auto auto auto 0;
    }

    .mobile_task_edit {
        width: 90%; /*this is so you can scroll on the side*/
    }

    .mobile_task_list_edit {
        flex-wrap: nowrap;
    }

    .task_remove_button {
        padding: 0;
    }

    .mobile_task_main_edit {
    }

    .task_drag {
        height: 1em;
        width: 1em;
        vertical-align: middle;
    }

    .task_list_weight {
        flex-wrap: wrap;
    }

        .task_list_weight .feat_label {
            margin-right: auto;
            margin-left: 0;
        }

        .task_list_weight .feat_text {
            font-size: 1.2em;
            margin-left: 0;
        }

        .task_list_weight .task_points {
            font-size: 0.6em;
        }

    .program_list_btn .task_button_text {
        display: inline-block;
    }

    .circ_complete {
        left: -999em !important;
    }

    .circ_complete2 {
        font-size: 0.5em;
    }

    .circ_w {
        margin-left: -2.5em;
    }

    .task_cals_rem {
        transform: scale(0.4);
        width: 25%;
        margin-left: 0;
        height: 7em;
        margin-top: -2em;
    }

    .task_weight_rem {
        transform: scale(0.8);
    }

    .task_points, .task_reminder, .task_completed {
        font-size: .8em;
    }

    .task_action {
        font-size: .9em;
        align-self: flex-end;
        margin: auto 0 auto auto;
        min-width: 1.2em;
    }

    .task_button_text {
        display: none;
    }

    .to_do_now {
        margin-bottom: .2em;
        height: 1rem;
    }

    .task_tab, .task_tab_tdn {
        font-size: 1.1rem;
    }

    .tdx2 {
        margin: 1em 2%;
        font-size: 1rem;
    }

    .task_ex_rem {
        display: none;
    }

    .more_cc_img {
        width: 33%;
    }

    .more_cc_text {
        width: 63%;
    }
}
/*iphone 6/7/8 plus*/
@media screen and (max-width: 26em) {
    .to_do_now2 {
        height: 1em;
    }
}

/*iphone 5*/
@media screen and (max-width: 20em) {
    .task_list {
        font-size: .9em;
    }

    .task_list_weight {
        font-size: .9em;
    }

    .sp_premium_title1 {
        font-size: .9em;
        max-width: 80%;
    }
}
/* Slider */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

    .slick-list:focus {
        outline: none;
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: hand;
    }

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

    .slick-track:before,
    .slick-track:after {
        display: table;
        content: '';
    }

    .slick-track:after {
        clear: both;
    }

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}
/* Slider */
.slick-loading .slick-list {
    background: #fff url('/Content/Images/ajax-loader.gif') center center no-repeat;
}

/* Icons */
/*
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('fonts/slick.eot');
    src: url('fonts/slick.eot?#iefix') format('embedded-opentype'), url('fonts/slick.woff') format('woff'), url('fonts/slick.ttf') format('truetype'), url('fonts/slick.svg#slick') format('svg');
}
*/
/* Arrows */
.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    width: 20px;
    display: block;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

@media only screen and (min-device-width: 64em) {
    .slick-prev:hover,
    .slick-prev:focus,
    .slick-next:hover,
    .slick-next:focus {
        color: transparent;
        outline: none;
        background: transparent;
    }

        .slick-prev:hover:before,
        .slick-prev:focus:before,
        .slick-next:hover:before,
        .slick-next:focus:before {
            opacity: 1;
        }
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
    opacity: .25;
}

.slick-prev:before,
.slick-next:before {
    font-family: 'Font Awesome 5 Free';
    color: white;
    font-size: 20px;
    font-weight: 900;
    color: #333;
    font-size: 1.25rem;
    line-height: 1;
    opacity: .75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
    left: -25px;
}

[dir='rtl'] .slick-prev {
    right: -25px;
    left: auto;
}
/*
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→’';
}
*/
.slick-prev:before {
    content: '\f053';
}

[dir='rtl'] .slick-prev:before {
    content: '\f053';
}

.slick-next {
    right: -25px;
}

[dir='rtl'] .slick-next {
    right: auto;
    left: -25px;
}
/*
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}
*/
.slick-next:before {
    content: '\f054';
}

[dir='rtl'] .slick-next:before {
    content: '\f054';
}
/* Dots */
.slick-dotted.slick-slider {
    margin-bottom: 30px;
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

    .slick-dots li {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 0 5px;
        padding: 0;
        cursor: pointer;
    }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 20px;
            height: 20px;
            padding: 5px;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: none;
            background: transparent;
        }

@media only screen and (min-device-width: 64em) {
    .slick-dots li button:hover,
    .slick-dots li button:focus {
        outline: none;
    }

        .slick-dots li button:hover:before,
        .slick-dots li button:focus:before {
            opacity: 1;
        }
}

.slick-dots li button:before {
    /*
	font-family: 'slick';
	font-size: 6px;
	*/
    font-size: 20px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: black;
}
#corona {
    /*
    background-color: #090;
    background: #07590f;
    background: -moz-linear-gradient(left, #07590f 0%, #0a8210 63%, #07590f 100%);
    background: -webkit-linear-gradient(left, #07590f 0%,#0a8210 63%,#07590f 100%);
    background: linear-gradient(to right, #07590f 0%,#0a8210 63%,#07590f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#07590f', endColorstr='#07590f',GradientType=1 );
        */
    padding: 0.6em 1em;
    text-align: center;
    display: block;
    background-color: #1C8C87;
    /*
    background: #1C8C87;
    background: -moz-linear-gradient(left, #1C8C87 0%, #21A9A3 63%, #1C8C87 100%);
    background: -webkit-linear-gradient(left, #1C8C87 0%,#21A9A3 63%,#1C8C87100%);
    background: linear-gradient(to right, #1C8C87 0%,#21A9A3 63%,#1C8C87 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1C8C87', endColorstr='#1C8C87',GradientType=1 );
        */
}

.corona_text {
    color: white;
    margin-left: auto;
}

#peopleOne_announcement {
    /*
    background-color: #090;
    background: #07590f;
    background: -moz-linear-gradient(left, #07590f 0%, #0a8210 63%, #07590f 100%);
    background: -webkit-linear-gradient(left, #07590f 0%,#0a8210 63%,#07590f 100%);
    background: linear-gradient(to right, #07590f 0%,#0a8210 63%,#07590f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#07590f', endColorstr='#07590f',GradientType=1 );
        */
    padding: 0.6em 1em;
    text-align: center;
    display: block;
    background-color: #009337;
    line-height: 1.1;
    /*
    background: #1C8C87;
    background: -moz-linear-gradient(left, #1C8C87 0%, #21A9A3 63%, #1C8C87 100%);
    background: -webkit-linear-gradient(left, #1C8C87 0%,#21A9A3 63%,#1C8C87100%);
    background: linear-gradient(to right, #1C8C87 0%,#21A9A3 63%,#1C8C87 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1C8C87', endColorstr='#1C8C87',GradientType=1 );
        */
}

.peopleOne_announcement_text {
    color: black;
    margin-left: auto;
}

.home_flex {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.home_mcol1 {
    width: 58%;
    margin: 1em auto 1em 3%;
    box-sizing: border-box;
    text-align: left;
}

.home_mcol2 {
    width: 33%;
    margin: 1em 3% 1em auto;
    box-sizing: border-box;
}

.box {
    border: 0.0625em solid #D5D5D5;
    background-color: white;
    box-shadow: 0 0 0.25em rgba(0,0,0,.1);
    padding: 1em;
    margin-bottom: 1em;
}

.box_col1 {
    width: 55%;
    padding-top: 1em;
    padding-bottom: 1em;
    display: inline-block;
    vertical-align: top;
    text-align: left;
}

.box_col2 {
    width: 45%;
    padding-top: 1em;
    padding-bottom: 1em;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.home_top_w {
    position: relative;
    background-color: #CDEFFE;
    position: relative;
    z-index: 1;
}

.home_top {
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 2;
    position: relative;
    background-image: url('/Content/Images/homepage_blue_bg1.jpg');
}

.home_acc_bg {
    background-color: #0074D6;
    width: 100%;
    height: 19em;
    z-index: 1;
    position: absolute;
}

.alert_spacer {
    margin-top: 0.8em;
}

.home_alert_a {
    outline: none;
}

.home_alert_w {
    box-sizing: border-box;
}

.slick-dotted.slick-slider {
    margin-bottom: 25px;
}

.home_alert_t1 {
    font-weight: 500;
    font-family: 'Oswald';
    color: white;
    padding: .4em 2em .4em .8em;
    font-size: 1em;
    line-height: 1.2em;
    background-color: #FF9900;
    position: relative;
    display: inline-block;
    width: auto;
    text-transform: uppercase;
}

.home_alert_t2 {
    font-weight: 700;
    color: white;
    font-size: 1.1em;
    margin-top: 0.5em;
    display: inline-block;
    vertical-align: top;
}

    .home_alert_t2 a {
        text-decoration: underline;
        color: inherit;
    }

.home_alert_pic {
    flex-shrink: 0;
    width: 3em;
    height: 3em;
    border-radius: 3em;
    margin-top: .8em;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    vertical-align: top;
    margin-right: .8em;
}

.home_alert_2col {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1em;
    margin: 0 0;
}

/* this creates the "forked" part of our ribbon */
.home_alert_t1:before {
    content: "";
    height: 0;
    width: 0;
    display: block;
    position: absolute;
    top: 0;
    right: -1em;
    border-top: 1em solid #FF9900;
    border-bottom: 1em solid #FF9900;
    border-right: 1em solid transparent;
    border-left: 1em solid transparent;
}
/*long alert hacks*/
.long_alert {
    background-color: #333;
    max-width: 50em;
    margin-bottom: 1em;
    margin-top: 2em;
}

    .long_alert .home_alert_t1 {
        margin-left: 0em;
        margin-top: -1em;
    }

    .long_alert .home_alert_2col {
        margin: 0 1em;
    }

.upcoming_w {
    width: 100%;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: bottom;
    background-color: white;
    border-radius: .5em;
    padding: 1em 5%;
    margin-bottom: 2em;
}

.upcoming_a {
    padding: 0.5em 0 0.5em 0em;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    transition: background-color 0.5s;
}

.upcoming_a_date {
    color: #009F9F;
}

.upcoming_ul {
    list-style: none;
    margin: 0 0 0.5em 0;
    padding: 0;
}

    .upcoming_ul LI {
        padding: 0;
        margin: 0;
        text-align: left;
        border-bottom: 0.0625em solid rgba(0,0,0,0.1);
    }

        .upcoming_ul LI.upcoming_all {
            border-bottom: 0;
            border-top: 0;
        }

        .upcoming_ul LI:last-of-type {
            border-bottom: 0;
        }

.upcoming_c1 {
    text-transform: uppercase;
    font-size: 0.9em;
    line-height: 125%;
    color: #007D7D;
    text-align: center;
    margin: 0 1.5em auto 0;
    font-weight: 700;
    align-self: flex-start;
    border: 1px solid #EBECF0;
    border-radius: 0.5em;
    padding: 1em 2em;
}

.upcoming_c2 {
    margin: auto auto auto 0;
}

.upcoming_c3 {
    margin: auto 0 auto 1em;
    opacity: 0.3;
    align-self: flex-end;
}

.upcoming_arrow {
    width: 1.5em;
    height: 1.5em;
}

.upcoming_c2_t1 {
    font-weight: 600;
    color: #333;
    line-height: 120%;
}

.upcoming_c2_t2 {
    font-size: 0.8em;
    color: #666;
    margin-top: 0.2em;
}

.upcoming_c2_t3 {
    color: #666;
    padding: 1em 2em 2em 2em;
    font-weight: 600;
}

.upcoming_c2_t4 {
    margin-top: 0.2em;
}

.upcoming_btn {
    text-transform: uppercase;
    font-size: 0.9em;
    font-weight: 700;
    color: #333;
}

.quote_w {
    background: url(/Content/Images/quote_bg1.svg);
    background-repeat: repeat;
    position: relative;
    background-color: #21A9A3;
    padding: 2.5em 8%;
    text-align: center;
}

.quote_t1 {
    color: white !important;
    font-family: 'Oswald';
    text-transform: uppercase;
    font-weight: 500;
}

.quote_t2 {
    color: white;
    font-weight: 300;
    font-size: 3em;
    line-height: 120%;
    margin: 1rem auto;
}

.quote_t3 {
    color: white;
    font-family: 'Oswald';
    font-weight: 500;
    font-size: 1.1em;
}

.healthy_w {
    background-color: white;
    padding: 2em 0;
    text-align: center;
    width: 100%;
    overflow: hidden;
}

.healthy_text {
    font-weight: 600;
    font-size: 1.1em;
    text-align: left;
    display: block;
    color: #333;
}
/* announcement carousel hacks*/
.carousela {
    padding-left: 1em;
    padding-right: 1em;
    margin-left: 1em;
    margin-right: 1em;
}

    .carousela .slick-prev:before, .carousela .slick-next:before {
        color: #fff;
    }

    .carousela .slick-prev, .carousela .slick-next {
    }

    .carousela .slick-prev,
    .carousela .slick-next,
    .carousel_care .slick-prev,
    .carousel_care .slick-next,
    .carousel_team .slick-prev,
    .carousel_team .slick-next {
        z-index: 100;
    }

/* announcement carousel hacks end*/
.carousel_care .slick-prev,
.carousel_care .slick-next,
.carousel_team .slick-prev,
.carousel_team .slick-next {
}

.carousel {
    position: relative;
    margin-top: 2em;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.content {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}

.content_a {
    width: 96%;
    display: block;
    box-sizing: border-box;
    padding: 2%;
}

.content_b {
    display: block;
    box-sizing: border-box;
    padding: 2%;
}

.pic_st {
    width: 100%;
    margin-bottom: 0.5em;
}

.pic_st_w {
    width: 100%;
    margin: 0 auto;
}

.pic_st_i {
    width: 100%;
    padding-bottom: 65.166%;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.5em;
}

.pic_st2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.c100 {
    margin-bottom: 0 !important;
}

.track_title {
    color: #777;
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.art_intro {
    margin-bottom: 1em;
}

.art_pic {
    display: block;
    max-width: 100%;
    max-height: 26em;
}

.app_btn {
    height: 2.5em;
}

/*@media only screen and (min-device-width: 64em) {*/
@media (hover: hover) {
    /*hovers only*/
    button.prev:hover {
        color: #7E8DF1;
        outline: 0;
    }

    button.next:hover {
        color: #7E8DF1;
        outline: 0;
    }

    .upcoming_btn:hover {
        font-weight: 700;
        background-color: rgba(255,255,255,0.5);
    }

    .upcoming_a:hover {
        background-color: rgba(255,255,255,0.5);
    }

    .content_a:hover {
        display: block;
        filter: alpha(opacity=90);
        opacity: 0.90;
        -moz-opacity: 0.90;
        text-decoration: none !important;
    }

    .home_alert_t2 A:hover {
        text-decoration: none;
    }

    #corona:hover {
        /*
        background: #0a8719;
        background: -moz-linear-gradient(left, #0a8719 0%, #0a8210 63%, #0b8911 100%);
        background: -webkit-linear-gradient(left, #0a8719 0%,#0a8210 63%,#0b8911 100%);
        background: linear-gradient(to right, #0a8719 0%,#0a8210 63%,#0b8911 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a8719', endColorstr='#0b8911',GradientType=1 );
            */
        /*
        background: #166D69;
        background: -moz-linear-gradient(left, #166D69 0%, #1C8C87 63%, #166D69 100%);
        background: -webkit-linear-gradient(left, #166D69 0%,#1C8C87 63%,#166D69 100%);
        background: linear-gradient(to right, #166D69 0%,#1C8C87 63%,#166D69 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#166D69', endColorstr='#166D69',GradientType=1 );
            */
        background-color: #166D69;
    }

    #peopleOne_announcement:hover {
        background-color: #0085CA;
        background-color: #00792E;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
}

@media screen and (max-width: 80em) {
    .home_acc_bg {
        height: 10em;
    }
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 48em) {
    /*mobile fixes & ipad narrow*/
    .home_flex {
        flex-wrap: wrap;
    }

    .home_mcol1 {
        width: 100%;
        margin: 1em 0 0em 0;
        float: none;
    }

    .home_mcol2 {
        width: 100%;
        margin: 0em 0 0em 0;
        float: none;
    }
    /*
    .mobile_h1_sep {
        display: block;
    }
*/
    .home_mcol2_spacer {
        min-height: 0.1em;
    }

    .home_alert_w {
        margin-top: 0em;
        /*
        background-color: #E8E9F0;
        background-color: #111;

        background-color: #eb5a00;

        */
        max-width: 100%;
        padding: 0em;
    }

    .home_alert_t1 {
        margin-left: 0em;
        margin-top: 0em;
        font-size: 0.8em;
    }

    .home_alert_t2 {
        width: 100%;
        color: #333;
        color: #fff;
        font-weight: 600;
        font-size: 1rem;
    }

    .home_alert_2col {
        padding-bottom: 0.5em;
        min-height: 2.5em;
    }

    .long_alert .home_alert_2col {
        margin-bottom: 0;
        padding-bottom: 0em;
    }

    .quote_t2 {
        font-size: 1.6rem;
    }

    .upcoming_w {
        border-radius: 0;
        text-align: left;
        padding: 2em 4%;
    }

    .carousel {
        width: 100%;
    }

    .alert_spacer {
        margin-top: 0;
    }

    .carousela .slick-prev {
        left: -12px;
    }

    .carousela .slick-next {
        right: -12px;
    }

        .carousela .slick-prev:before, .carousela .slick-next:before {
            font-size: 1rem;
        }
}

@media screen and (min-width:34em) and (max-width: 46em) {
}

@media screen and (max-width: 34em) {
    /*mobile fixes*/

    .box_col1 {
        width: 100%;
        display: block;
        text-align: center;
        padding-top: 0em;
        padding-bottom: 0em;
    }

    .box_col2 {
        width: 100%;
        display: block;
        padding-top: 0em;
        padding-bottom: 0em;
    }

    .home_alert_t2 {
        font-size: 0.8rem;
        margin-top: 0.3em;
    }

    .upcoming_w {
        text-align: center;
        margin-bottom: 0.3rem;
    }

    .upcoming_c1 {
        font-size: 0.7em;
        line-height: 125%;
    }

    .continue_btn {
        display: block;
        margin-left: 1em;
        margin-right: 1em;
    }

    .content_a {
        width: 100%;
        padding: 4%;
    }

    .carousel_w {
        padding-bottom: 2em;
    }

    .carousel {
        margin-top: 0;
    }

        .carousel .content_a {
            padding-bottom: 0;
        }

    .app_btn {
        height: 2.5em;
    }

    .corona_text {
        font-weight: 600;
    }

    #date_w {
        display: none !important;
    }
}
.bg_program {
    padding: 2em 5% 5em 5%;
    background-repeat: repeat;
    position: relative;
    text-align: center;
}

.program_w:nth-child(1n) .bg_program {
    background-image: url(/Content/Images/quote_bg1.svg);
    background-color: #0B57A4;
}

.program_w:nth-child(2n) .bg_program {
    background-color: #17A2B8;
    background-image: url(/content/images/article_cat_bg1.svg);
    background-size: cover;
}

.curve_aqua_btm, .curve_top {
    width: 100%;
    position: absolute;
    background-size: 103%;
    background-repeat: no-repeat;
    height: 3em;
    z-index: 1;
}

.curve_aqua_btm {
    bottom: -0.2em;
    left: 0;
    background-image: url(/content/images/ProgramImages/curve_aqua_btm.svg);
    background-position: bottom;
}

.program_w {
}

.program {
    margin-right: 5%;
    max-width: 64rem;
    position: relative;
    background: none;
}

    .program .block-group {
        position: relative;
        width: 100%;
        box-sizing: border-box;
    }

        .program .block-group .block-item .group-container {
            background: #fff;
        }

    .program .block-item {
        position: relative;
    }

.program-overview {
    /*
    margin-left: 1em;
        */
}

.block-type-first {
    /*
    margin-right: 1em;
        */
}

.program-title {
    color: white;
    font-size: 3em;
    font-weight: 400;
    text-align: left;
    line-height: 110%;
}

.program-dates {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    line-height: 110%;
    margin-top: 1em;
    opacity: 0.8;
}

.step-title {
    font-size: 1em;
}

.block-title {
    font-size: 0.8em;
}

.tier1 {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.tier2 {
    background: none;
    background-color: white;
    border-radius: 2em;
    border: 0;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    color: #333;
    padding: 0.7em 1.5em 0.7em 3em;
    margin: 1em 1em 1em 0;
    font-weight: 600;
    box-sizing: border-box;
    width: 100%;
    box-shadow: 0 0 0.5em rgba(0,0,0,0.05);
    z-index: 2;
}

.tier3 {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    background: #1976D2;
    color: #333;
    padding: 0.5em 1em 0.5em 2.6em;
    border: 0;
    box-shadow: none;
    border-top: 0.0625rem solid #1976D2;
    border-bottom: 0.0625rem solid #E0E0E0;
    font-weight: 600;
    margin: 0 1em 0 0;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.tier1-desc {
    /*
    background: rgba(0,0,0,0.05);
        color: #1976D2;
        background-color: #22a7ee;
      */
    background-color: white;
    border-radius: 3em;
    color: #333;
    font-weight: 400;
    box-sizing: border-box;
    padding: 0em 1em 0.5em 2.6em;
    border: 0;
    box-shadow: none;
    font-weight: 600;
    margin: 0 0 0 0;
    text-align: left;
    box-sizing: border-box;
    text-transform: uppercase;
    font-size: 0.9em;
}

.tier3-desc {
    /*
    border-top: 0.0625rem solid #00838F;
    background: rgba(0,0,0,0.05);
    color: #1976D2;
    */
    background-color: #22a7ee;
    color: white;
    border-top: 0;
    text-transform: uppercase;
    font-size: 0.9em;
}

.tier3 .step-title,
.tier3 .block-title {
    color: #fff;
}

.tier1.active,
.tier2.active,
.tier3.active {
    background-color: rgba(0,0,0,0);
    font-weight: 600;
}

.tier2.active {
    font-weight: 400;
    box-shadow: none;
}

    .tier1.active .step-title,
    .tier1.active .block-title,
    .tier2.active .step-title,
    .tier2.active .block-title,
    .tier3.active .step-title,
    .tier3.active .block-title {
        font-weight: 600;
        color: #333;
    }

.tier1-desc.active.open {
    border-bottom: 0;
    background-color: white;
}

.tier3.active.open {
    border-bottom: 0;
    background-color: white;
}

.tier1-desc.active .block-title,
.tier3-desc.active .block-title {
    color: #666;
    cursor: auto;
}

/*arrows & icons*/
.complete-icon {
    width: 1.25em;
    position: absolute;
    z-index: 1;
    top: 0.85em;
    left: 1em;
}

.block-title:before {
    content: "";
    display: block;
    width: 1.25em !important;
    height: 1.25em !important;
    position: absolute;
    left: 1em;
    top: 0.85em;
    background: url('/content/images/ProgramImages/check-undone.svg');
    background-size: contain;
}

.tier1-desc .block-title:before {
    background: url('/content/images/ProgramImages/info-gray.svg');
    background-size: contain;
}

.tier3-desc .block-title:before {
    background: url('/content/images/ProgramImages/info-undone.svg');
    background-size: contain;
}

.tier1-desc .block-title:before,
.tier3-desc .block-title:before {
    top: 0.7em;
}

.block-item.completed .block-title:before {
    background: none !important;
}

.program-title:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .4em 0 .4em .65em;
    border-color: transparent transparent transparent #fff;
    display: block;
    position: absolute;
    right: -1em;
    top: 1.1em;
    opacity: 0.4;
    font-size: 0.6em;
}

.active .program-title:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .65em .4em 0 .4em;
    /*border-color: #fff transparent transparent transparent;*/
    border-color: transparent transparent transparent transparent;
    display: block;
    position: absolute;
    opacity: 1;
}

.tier2:after, .block-title:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .4em 0 .4em .65em;
    border-color: transparent transparent transparent #fff;
    display: block;
    position: absolute;
    right: 0.8em;
    top: 1.1em;
    opacity: 0.4;
}

.tier1-desc .block-title:after,
.tier3-desc .block-title:after {
    top: 0.9em;
}

.tier2:after,
.tier1-desc .block-title:after {
    border-color: transparent transparent transparent #1976D2;
}
/*active icons*/
.active .block-title:before {
    background-image: url('/content/images/ProgramImages/check-gray.svg') !important;
    background-size: contain;
}

.tier1-desc.active {
    border-radius: 0;
    /*
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
        */
}

    .tier1-desc.active .block-title:before {
        background-image: url('/content/images/ProgramImages/info-gray.svg') !important;
        background-size: contain;
    }

.tier3-desc.active .block-title:before {
    background-image: url('/content/images/ProgramImages/info-gray.svg') !important;
    background-size: contain;
}

.active.tier2:after,
.active .block-title:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: .65em .4em 0 .4em;
    border-color: #007FC4 transparent transparent transparent;
    display: block;
    position: absolute;
    opacity: 1;
}

.active .block-title.no-arrow:after {
    display: none;
}

.active .block-title {
    background-color: white;
}

/*tokens*/

.tokens-containers {
    /*
    position: absolute;
    top: 0.35em;
    right: 2.2em;
        */
    outline: none;
    margin-left: auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

    .tokens-containers .tokens {
        font-weight: 700;
        text-align: center;
        /*
        display: inline-block;
        vertical-align: middle;
            */
        color: #FFBD57;
    }

    .tokens-containers .tokens-text {
        color: #FFBD57;
    }

    .tokens-containers .tokens-icon {
        /*
display: inline-block;
vertical-align: middle;
    */
        margin: 0 0 0 0.25em;
        background: url(/content/images/token4.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 1.2em;
        height: 1.2em;
        text-indent: -9000em
    }

/*token states*/
.tier1 .tokens-containers {
    margin-right: 0;
    margin-left: auto;
    margin-top: 0.55em;
    font-size: 2em;
}

.tier2 .tokens-containers {
    margin-right: 1em;
}

.tier3 .tokens-containers {
    margin-right: 1em;
}

.tier1 .incomplete .tokens,
.tier1 .incomplete .tokens-text {
    color: white;
}

.tier2 .incomplete .tokens,
.tier2 .incomplete .tokens-text {
    color: #666;
}

.tier3 .incomplete .tokens,
.tier3 .incomplete .tokens-text {
    color: white;
}

.tier1 .complete .tokens,
.tier1 .complete .tokens-text,
.tier2 .complete .tokens,
.tier2 .complete .tokens-text,
.tier3 .complete .tokens,
.tier3 .complete .tokens-text {
    color: #FFBD57;
}

.active .tokens-containers .tokens-text,
.active .tokens-containers .tokens {
    color: #666 !important;
}

.tier1 .tokens-containers .tokens {
    color: #fff !important;
}

.active .tokens-containers.complete .tokens-text,
.active .tokens-containers.complete .tokens {
    color: #FFBD57 !important;
}

.incomplete .tokens-icon {
    background: url(/content/images/token4_gray.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

/*stepper*/
.bg_grad {
    background: #C8E9FB;
    background: -moz-linear-gradient(top, #C8E9FB 0%, #B6D6ED 100%);
    background: -webkit-linear-gradient(top, #C8E9FB 0%, #B6D6ED 100%);
    background: linear-gradient(to bottom, #C8E9FB 0%, #B6D6ED 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C8E9FB', endColorstr='#B6D6ED',GradientType=0 );
    padding-top: 1em;
    font-size: 1.6em;
    padding-left: 5% !important;
    padding-bottom: 5em;
}

.stepper {
    text-align: left;
    counter-reset: section;
}

.nonstepper {
    margin-left: 2em;
    text-align: left;
    margin-right: 0em;
}

.tier2:before {
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    counter-increment: section;
    content: counter(section);
    height: 1.75em;
    width: 1.75em;
    color: #fff;
    /*
    background-color: rgba(0, 0, 0, .3);
    */
    background-color: #00BBCA;
    border-radius: 50%;
    text-align: center;
    line-height: 1.75em;
    font-weight: 400;
}

.tier2.active:before,
.tier2.done:before {
    background-color: #00838F;
}
/*target second level*/
.block-group .block-group .tier2:before {
    background-color: #22a7ee;
}

.block-group .block-group .tier2.active:before,
.block-group .block-group .tier2.done:before {
    background-color: #007fc4;
}

.tier2.done:before {
    content: '\e5ca';
    font-size: 1em;
    font-family: 'Material Icons';
}

.tier2.wrong:before {
    content: '\e001';
    font-size: 1.5em;
    font-family: 'Material Icons';
    background-color: red !important;
}

.stepper > .block-group:not(:last-of-type):after {
    content: '';
    position: absolute;
    top: 3.2em;
    left: 1.4em;
    width: 0.0625rem;
    height: 40%;
    height: calc(100% - 2.5em);
    background-color: rgba(0, 0, 0, .2);
    -webkit-transition: all .4s;
    transition: all .4s;
    z-index: 0;
}

.stepper > .block-group.active:not(:last-child):after {
    height: 93%;
    height: calc(100% - 0.75em)
}

.stepper > .block-group[data-last=true]:after {
    height: 0;
    width: 0
}

.stepper > .block-group[data-last=true] {
    margin-bottom: 0
}

.nonstepper {
    counter-reset: section;
}

    .nonstepper .tier2:before {
        /*
        width: 0;
        height: 0;
        content: '';
            */
    }
/*
    .nonstepper .tier2.active:before,
    .nonstepper .tier2.done:before {
        background-color: rgba(0,0,0,0);
    }
        */

/*inner sections*/
.step-description {
    font-size: 1rem;
    /*
    background-color: rgba(0,0,0,0.02);
    margin-left: 0.3em;
    margin-right: 2em;
    padding: 0.6em 1em;
        */
    background-color: white;
    margin-left: 0;
}

.program-description {
    /*
    margin-left: 2em !important;
    margin-right: 2em;
        */
}

.morecontent {
    /*display: none;*/
    display: block;
    overflow: hidden;
    padding-left: 3em;
    padding-right: 2em;
    padding-bottom: 1em;
    padding-top: 1em;
}

.morelink {
    display: block;
    text-decoration: none;
    color: #2B71BD;
    padding-left: 3em;
    font-weight: 700;
    padding-top: 4em;
    padding-bottom: 1.5em;
    /*
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 48%, rgba(255,255,255,1) 99%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 48%,rgba(255,255,255,1) 99%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 48%,rgba(255,255,255,1) 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
        */
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(203,229,249,1) 50%, rgba(150,202,242,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(203,229,249,1) 50%,rgba(150,202,242,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(203,229,249,1) 50%,rgba(150,202,242,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#96caf2',GradientType=0 );
    position: absolute;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    margin-right: 1em;
    box-sizing: border-box;
}

    .morelink.less {
        padding-top: 1.5em;
        background: none;
        filter: none;
        position: relative;
    }

.more {
    position: relative;
}

.block-item .inner {
    background-color: white;
    padding: 0.5em 2em 2em 2em;
    margin-left: 0;
    display: none;
}

.inner {
    /*
    padding-left: 1em;
        */
    overflow: hidden;
    position: relative;
    text-align: left;
}

.description {
    padding-top: 2em;
    font-size: 1rem;
}

.progress-checkin-date {
    color: #666 !important;
    padding: 0.5em 1em 0.5em 2em;
    margin: 0;
    font-size: 1rem;
    position: relative;
    display: block;
    width: 100%;
    border-bottom: 0.0625rem solid #dfdfdf;
    box-sizing: border-box;
    font-weight: 600;
}

    .progress-checkin-date:before {
        position: absolute;
        top: 0.5em;
        left: 0em;
        content: "";
        height: 1.5em;
        width: 1.5em;
        text-align: center;
        line-height: 1.5em;
    }

.path-dates:before {
    background: url('/content/images/ProgramImages/calendar.svg') no-repeat;
    background-size: contain;
}

.path-tokens:before {
    background: url('/content/images/token4_gray.svg') no-repeat;
    background-size: contain;
}

.path-tokens-earned:before {
    background: url('/content/images/ProgramImages/token-orange.svg') no-repeat;
    background-size: contain;
}

.path-complete:before {
    background: url('/content/images/ProgramImages/check-gray-nocircle.svg') no-repeat;
    background-size: contain;
}

.highlight {
    color: #333;
    font-weight: bold;
    float: none;
    font-size: 1em;
    padding: 0;
    border-radius: 0;
    background: none;
}

.program-description-text {
    display: block;
    width: 100%;
    padding: 0.625em;
    float: left
}

    .program-description-text li,
    .program-description-text p {
        font-size: 1em;
    }

.block-contents .completed_message p {
    font-size: 2.5rem;
    text-align: center;
    font-weight: 700;
    text-shadow: none;
    color: #00838F;
}

.block-contents .completed_message .complete-icon {
    display: inline !important;
    width: 50px !important;
    vertical-align: bottom !important;
    left: auto !important;
    top: auto !important;
    position: relative !important;
}

.btn_text_w {
    border-color: #A8EBF4;
    position: relative;
}

.upload_box_loader {
    display: none;
    position: absolute;
    background-color: white;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    z-index: 101;
}

.btn_text_box {
    position: relative;
    background: #b4edf5;
    padding: 0.7em 1em;
    border-radius: 0.3em;
    margin: auto 1em;
    font-size: 0.65em;
    /*
    box-shadow: 0.1em 0.2em 0.3em rgba(0,0,0,0.1);
        */
}

    .btn_text_box:after {
        right: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(180, 237, 245, 0);
        border-right-color: #b4edf5;
        border-width: 10px;
        margin-top: -10px;
    }

.isLimbo {
    opacity: 0.5;
}

.inner.isLimbo {
    pointer-events: none !important;
    user-select: none !important;
}

.isLimbo .morecontent {
    pointer-events: none !important;
    user-select: none !important;
}

.upload_animation {
    display: none;
    font-size: 0.6em;
    border: 0.15em dashed #d0d0d0;
    border-radius: 0.7em;
    max-width: 21em;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

.file_link {
    color: black;
}

.file_list_ul, file_list_ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media only screen and (min-device-width: 64em) {
}

@media (hover: hover) {
    /*hovers only*/
    .tier1.closed:hover {
        opacity: 0.8;
    }

    .file_link:hover {
        color: #006da8;
    }

    .tier2:hover {
        background-color: rgba(255,255,255,0.7);
    }

    .tier3:hover {
        background-color: #2B88E6;
        border-radius: 0;
    }

    .tier1-desc:hover {
        background-color: rgba(255,255,255,0.7);
        /*
            background-color: #2B88E6;
                */
    }

    .tier3-desc:hover {
        background-color: #2B88E6;
    }

    .program .block-item.active.open .block-title:hover,
    .active.open .block-title:hover {
        background-color: white !important;
    }

    .tier2.tier3.active.open .step-title:hover,
    .tier2.tier3.active.open .block-title:hover {
        background-color: white !important;
    }

    .morelink:hover {
        color: #f5f5fe;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
}

@media screen and (max-width: 80em) {
    .program {
        margin-right: 5%;
    }
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 46em) {
    /*mobile fixes & ipad narrow*/
    .tier2 {
        box-shadow: none;
        background-color: rgba(0,0,0,0);
        margin-top: 0;
        margin-bottom: 0;
    }

    .block-item .inner {
        padding: 0.5em 1em 1em 1em;
    }

    .stepper > .block-group:not(:last-of-type):after {
        top: 2.2em;
        height: calc(100% - 1.7em);
    }

    .circle-complete-text {
        display: none !important;
    }

    .path-table {
        width: 100%;
    }

    .bg_grad {
        padding-left: 0 !important;
        padding-top: 0.5rem;
    }

    .bg_program {
        padding: 1em 5% 2em 5%;
    }

    .block-type-first {
        /*
            margin-right: 2%;
            margin-left: 2%;
                */
    }

    .program-title {
        font-size: 1.2em;
        margin-right: 1em;
        font-weight: 700;
    }

    .program-dates {
        font-size: 0.85rem;
        margin-top: 0.5em;
    }

    .program {
        margin-left: 0;
        margin-right: 2%;
    }

    .program, .step-title {
        font-size: 1rem;
    }

    .program, .block-item {
        font-size: 1rem;
    }

    .block-item {
        margin-left: 1em;
    }

        .block-type-first > .block-item,
        .block-item.program-overview {
            margin-left: 2%;
        }

    .block-title {
        font-size: 0.9em;
    }

    .inner {
        padding-left: 0;
    }

    .stepper {
        padding-left: 0 !important;
        margin-right: 0;
        margin-top: 1em;
    }

    .nonstepper {
        margin-left: 1em;
        margin-right: 0;
    }

    .program-group .program .step-title {
        width: 100%;
        padding-right: 0;
    }

    .path-description {
        padding: .2em 1em 1em 1em;
    }

    .ntokens {
        position: relative;
        top: 1em;
        display: none;
    }

    .path-wrapper, .path-container {
        display: block;
        width: 100%;
    }

    .path-description, .path-menu {
        width: 100%;
        display: block;
        box-sizing: border-box;
        padding: 0.5em 1em 2em 0em;
    }

    .progress-checkin-date {
        margin: 0 0 0 0em;
        width: 100%;
        font-size: 0.8em;
    }

        .progress-checkin-date .highlight {
            display: inline;
        }

    .tokens-containers {
        left: -999em;
        position: absolute;
    }

    .el-button {
        white-space: normal;
    }

    .block-title {
        padding-right: 2em;
    }

    .inner .block-group {
        margin-left: 0em;
    }

    .program-description {
        margin-left: 0 !important;
        margin-right: 0;
    }

    /*boostrap title hacks for mobile*/
    .step-description P,
    .description P {
        margin: 0;
        padding: 0;
    }

    .step-description H1,
    .description H1,
    .step-description H1 SPAN,
    .description H1 SPAN {
        font-size: 1.2rem !important;
    }

    .step-description H2,
    .description h2,
    .step-description H2 SPAN,
    .description h2 SPAN,
    .step-description H3,
    .description H3,
    .step-description H3 SPAN,
    .description H3 SPAN {
        font-size: 1.1rem !important;
    }

    .step-description H4,
    .step-description H5,
    .step-description H6,
    .description H4,
    .description H5,
    .description H6,
    .step-description H4 SPAN,
    .step-description H5 SPAN,
    .step-description H6 SPAN,
    .description H4 SPAN,
    .description H5 SPAN,
    .description H6 SPAN {
        font-size: 1rem !important;
    }

    .step-description IMG,
    .step-description EMBED,
    .step-description OBJECT,
    .step-description IFRAME,
    .description IMG,
    .description EMBED,
    .description OBJECT,
    .description IFRAME {
        max-width: 100% !important;
    }
    /*hide tooltips*/
    .tooltip {
        display: none !important;
    }
}

@media screen and (min-width:34em) and (max-width: 46em) {
}

@media screen and (max-width: 34em) {
    /*mobile fixes*/
    .tier2:after,
    .active.tier2:after {
        border-color: transparent;
    }

    .tier3 {
        padding: 0.6em 1em 0.6em 2.6em;
    }

    .morecontent {
        padding-left: 1em;
        padding-right: 1em;
    }

    .morelink {
        padding-left: 1em;
    }

        .morelink .btn {
            font-size: 0.8rem;
        }

    .btn_text_w {
        flex-wrap: wrap;
        border: 0 !important;
        border-radius: 1em !important;
    }

    .btn_text_box {
        margin-top: 0.8em !important;
        font-size: 0.8em;
    }

        .btn_text_box:after {
            bottom: 100%;
            left: 1.5em;
            margin-left: -10px;
            margin-top: auto;
            border-right-color: transparent;
            border-bottom-color: #b4edf5;
            top: auto;
            right: auto;
        }

    .upload_animation {
        max-width: 36em;
    }
}
.coach_card_w {
    z-index: 2;
    position: relative;
    border: 0.0625em solid #D5D5D5;
    border-radius: 0.5em;
    background-color: white;
    box-shadow: 0 0 0.25em rgba(0,0,0,.1);
    text-align: left;
}

.card_bg2 {
    background-color: rgba(255,255,255,0.3);
    border: 0;
    box-shadow: none;
    padding: 1em 2em;
}

.coach_top_w {
    position: relative;
    box-sizing: border-box;
}

.coach_top {
    z-index: 2;
    position: relative;
    background-color: rgb(7,116,124);
    /*background: linear-gradient(0deg, rgba(7,116,124,1) 0%, rgba(8,133,141,1) 100%);*/
    /*background-image: url(/content/images/LeafLines1_bg.svg);
    background-size: cover;
    background-repeat: no-repeat;*/
    padding-bottom: 5em;
}

.coach_btm {
    background-color: #C1DBE0;
}

.coach_row {
    border-bottom: 0.1em dotted rgba(255,255,255,0.3);
}

    .coach_row:last-of-type {
        border-bottom: 0;
    }

.coach_col1_adjust {
    top: -3.5em;
}

.morecontent_coach {
    /*display: none;*/
    display: block;
    overflow: hidden;
    padding-bottom: 1em;
}

.morelink_coach {
    display: block;
    text-decoration: none;
    color: #2B71BD;
    font-weight: 700;
    position: absolute;
    bottom: -1.4em;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    z-index: 5;
}

    .morelink_coach.less {
        background: none;
        filter: none;
        position: relative;
        bottom: 0;
    }

.more {
    position: relative;
}

.coach_flex {
    padding: 0.5em 0em 0.5em 0em;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
}

.coach_hc1 {
    margin: auto 1em auto 0em;
    text-align: left;
    font-weight: 600;
}

.coach_hc2 {
    margin: auto 0 auto auto;
    align-self: flex-end;
    white-space: nowrap;
}

.column2 {
    margin-top: 3em;
}

.coach_pic {
}

.profile_image {
    background-color: #C8EFF2;
    background-color: #fff;
    background-position: center center;
    background-size: cover;
    width: 13.5em;
    height: 13.5em;
    border-radius: 13.5em;
    /*
    border: 0.7em solid #fff;
        */
}

.profile_image_md {
    background-color: #C8EFF2;
    background-color: #fff;
    background-position: center center;
    background-size: cover;
    width: 5em;
    height: 5em;
    border-radius: 5em;
}

.profile_image_md2 {
    background-color: #C8EFF2;
    background-color: #fff;
    background-position: center center;
    background-size: cover;
    width: 9em;
    height: 9em;
    border-radius: 9em;
}

.profile_image_md3 {
    background-color: #C8EFF2;
    background-color: #fff;
    background-position: center center;
    background-size: cover;
    width: 4em;
    height: 4em;
    min-width: 4em;
    border-radius: 4em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    align-self: flex-end;
}

.profile_image_sm {
    background-color: #C8EFF2;
    background-color: #fff;
    background-position: center center;
    background-size: cover;
    width: 3em;
    height: 3em;
    min-width: 3em;
    border-radius: 3em;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

.name_title {
    font-size: 1.8em;
    font-weight: 600;
}

.coach_title {
    font-size: 0.75em;
    color: #666;
    text-transform: uppercase;
    margin: 1rem 0 0.2em 0;
    font-weight: 700;
}

.bio_desc {
    line-height: 135%;
}

.small_gray {
    color: #666;
    font-size: 0.85em;
    margin: 0.7em 0;
}

.message_btn {
    margin-top: 1em;
    margin-bottom: 1em;
}

.card_top {
    padding: 1em 0;
}

.card_title1 {
    font-size: 2em;
    font-weight: bold;
    margin-left: 1em;
}

.card_title2 {
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    margin-left: 6em;
}

.card_title_pic {
    margin-right: 1.5em;
    margin-left: auto;
    margin-bottom: -1.5em;
    height: 90%;
    max-width: 30%;
}

/*ON OFF 2*/

.onoffswitch {
    position: relative;
    width: 5rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    display: inline-block;
}

.onoffswitch-checkbox {
    position: absolute;
    left: -999em;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 2.25rem;
}

.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

    .onoffswitch-inner:before,
    .onoffswitch-inner:after {
        display: block;
        float: left;
        width: 50%;
        height: 2.25rem;
        padding: 0;
        line-height: 2.25rem;
        font-size: 0.875rem;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    .onoffswitch-inner:before {
        content: "YES";
        padding-left: 0.75rem;
        background-color: #00DF70;
        color: #FFFFFF;
        text-align: left;
    }

    .onoffswitch-inner:after {
        content: "NO";
        padding-right: 0.75rem;
        background-color: #CCC;
        color: #FFFFFF;
        text-align: right;
    }

.onoffswitch-switch {
    display: block;
    /*width: 1.625rem;*/
    width: 2rem;
    height: 2rem;
    margin: 0.125rem;
    background: #FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 2.75rem;
    border-radius: 2rem;
    transition: all 0.3s ease-in 0s;
    box-shadow: 0 0 0.0625em rgba(0,0,0,0.2);
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion_w {
    padding-top: 0.4em;
    background-color: #f4f5f7;
    padding: 1em;
}

.accordion {
    background-color: #fff;
    color: #333;
    cursor: pointer;
    padding: 1em;
    width: 100%;
    text-align: left;
    border: none;
    outline: none !important;
    transition: 0.4s;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .9em;
    border-radius: 4em;
    margin: 0.1em 0 0.1em 0;
    line-height: 110%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .active, .accordion:hover {
        background-color: #Fff;
    }

/* Style the accordion panel. Note: hidden by default */
.acc_panel {
    padding: 0em 0;
    box-sizing: border-box;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    font-size: 1em;
    transition: max-height 0.2s ease-out;
    text-align: left;
}

.panel_text {
    box-sizing: border-box;
    padding: 1em 2%;
}

.accordion:after {
    content: "\2212"; /* Unicode character for "minus" sign (-) */
    font-size: 1.4em;
    line-height: 100%;
    color: #777;
    margin-top: 0.1em;
    margin-left: auto;
    margin-right: 0;
}

.accordion.collapsed:after {
    content: '\002B'; /* Unicode character for "plus" sign (+) */
    font-size: 1.4em;
    line-height: 100%;
    color: #777;
    margin-right: 0;
    margin-left: auto;
}

.accordion.active:after {
    content: "\2212"; /* Unicode character for "minus" sign (-) */
}

.fc-right {
    visibility: hidden !important;
}

.fc td {
}

.fc-day {
    position: relative !important;
    background-color: #f4f5f7;
}

.fc-toolbar h2 {
    font-weight: 300;
}

.fc-day-header {
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.1em;
}

.fc-content-skeleton .fc-today {
    background-color: transparent !important;
}
/*
.fc-bg .fc-today {
    border-color: #FF9900;
}

.fc-bg .fc-today:before {
    content: '\00a0';
    border: 1px solid #FF9900;
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    background: transparent;
}
*/
.alert-info {
    background-color: transparent;
}

.available_day {
    background-color: #93FFE7;
}

.timeSlotList {
    column-count: 2;
    margin-bottom: .75em;
}

.coachavailable {
    position: absolute;
    bottom: 0.5em;
    left: 0.7em;
    color: #0C5863;
    font-size: 0.8em;
    font-weight: 600;
}

.coachavailabletime {
    color: #0C5863;
    font-size: 0.8em;
    font-weight: 600;
}
/*hacks for edge*/
@supports (-ms-ime-align:auto) {
    .coachavailable {
        position: absolute;
        top: 4em;
        left: 0.7em
    }
}
/*hacks for iE11*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .coachavailable {
        position: absolute;
        top: 4em;
        left: 0.7em
    }
}

.fc-highlight-skeleton TD {
    opacity: 0;
}

    .fc-highlight-skeleton TD.fc-highlight {
        opacity: 0.5;
        background-color: #d7d7f9;
    }

.btnRequestCoachingSession {
    position: relative;
}

@media screen and (min-width: 75em) {
    .coach_tip_box_w {
        position: absolute;
        right: -20em;
        top: 10em;
    }

    .coach_tip_box {
        position: relative;
        background: #17a2b8;
        max-width: 15em;
        padding: 2em;
        border-radius: 0.7em;
        color: white;
        font-weight: bold;
    }

        .coach_tip_box:after {
            right: 100%;
            top: 50%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-color: rgba(23, 162, 184, 0);
            border-right-color: #17a2b8;
            border-width: 20px;
            margin-top: -20px;
        }
}
/*@media only screen and (min-device-width: 64em) {*/
@media (hover: hover) {
    /*hovers only*/
    .btnRequestCoachingSession:not([disabled]):focus::after, .btnRequestCoachingSession:not([disabled]):hover::after {
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font-family: "Font Awesome 5 Free";
        content: "\f058";
        color: #00df70;
        font-weight: 900;
        position: absolute;
        right: 0.75em;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
    .card_bg2 {
        padding: 0.5em 2em;
    }
}

@media screen and (max-width: 80em) {
    .profile_image {
        width: 9em;
        height: 9em;
        border-radius: 9em;
        margin: auto;
        /*
        border: 0.5em solid #fff;
            */
    }
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 46em) {
    /*mobile fixes & ipad narrow*/

    .coach_top_w {
        max-width: 100%;
        /*overflow-x: hidden;*/
    }

    .coach_top {
        text-align: left;
    }

    .mc_text2 {
        font-size: 1em;
    }

    .name_title {
        font-size: 1.4em;
    }

    .coach_pic {
        text-align: center;
    }

    .profile_image, .profile_image_md2 {
        width: 5em;
        height: 5em;
        border-radius: 5em;
        margin: auto;
        /*
        border: 0.5em solid #fff;
            */
    }

    .profile_image_md {
        width: 4em;
        height: 4em;
        border-radius: 4em;
    }

    .profile_image_sm {
        width: 3em;
        height: 3em;
        border-radius: 3em;
    }

    .small_gray {
        font-size: 0.8em;
    }

    .coach_pic {
        position: absolute;
        left: 1em;
        top: 0;
    }

    .coach_name_col {
        margin-left: 6em;
    }
}

@media screen and (min-width:34em) and (max-width: 46em) {
}

@media screen and (max-width: 34em) {
    /*mobile fixes*/
    .timeSlotList {
        column-count: 1;
    }

    .column2 {
        margin-top: 1.5em;
    }

    .coach_top {
        padding-bottom: 2.5em;
    }

    .card_top {
        padding: 0.5em 0;
    }

    .coach_col1_adjust {
        top: 0;
    }

    .card_title1 {
        font-size: 1.4em;
        font-weight: bold;
        margin-left: 1em;
    }

    .card_title2 {
        font-size: 0.7em;
        font-weight: bold;
        text-transform: uppercase;
        margin-left: 6em;
    }

    .card_title_pic {
        margin-right: 0.5em;
    }

    #calendar h2 {
        font-size: 1.4em;
    }

    .coachavailable {
        font-size: 0.6em;
        bottom: 0.3em;
        left: 0.3em;
    }

    .accordion_w {
        padding: 1em 0.4em !important;
    }

    .profile_image_md3 {
        background-color: #C8EFF2;
        background-color: #fff;
        background-position: center center;
        background-size: cover;
        width: 3em;
        height: 3em;
        min-width: 3em;
        border-radius: 3em;
        margin-left: 0.5em;
        margin-right: 0.5em;
    }
}
.justify-content-space-evenly {
    justify-content: space-evenly !important;
}

H1.articleTitle {
    font-size: 3em;
    color: black;
    font-weight: 300;
    margin: 0 auto 0 auto;
    padding: 0;
    line-height: normal;
    font-style: normal;
    text-align: left;
}

    H1.articleTitle A {
        color: black;
        font-weight: 700;
        text-decoration: none;
    }

H2.articleSub {
    font-size: 1.2em;
    text-align: center;
    letter-spacing: 0.0625em;
    color: #007D7D;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 auto 0.5em auto;
    padding: 0.8em 0 0.1em 0;
    display: block;
}

.hpad3 {
    margin-bottom: 0.1em !important;
}

.hl_subtitle {
    font-weight: 700;
    font-size: 1em;
    color: #d7d7f9;
    text-align: left;
    margin-left: 0.1em;
    margin-right: auto;
    margin-bottom: 1em;
    text-transform: uppercase;
}

#see_more_tags {
    margin: 0 auto 1em auto;
    font-size: .8em;
    text-align: left;
    font-weight: 700;
    color: #007D7D;
}

    #see_more_tags A {
        text-transform: uppercase;
        color: #007D7D;
        text-decoration: none;
    }

.see_more_tags_line {
    border-bottom: 0.0625rem solid rgba(0,0,0,0.1);
    padding-bottom: 1em;
    flex-grow: 1;
    display: block;
}

.see_more_tags_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
}

.see_more_tags_first {
    flex-grow: 1;
}

.h_icon {
    width: 2.5rem;
    height: 2.5rem;
    margin: auto 0 auto 0.5em;
}

H2.h2_cat {
    text-align: left;
    border-top: 0.0625rem solid rgba(0,0,0,0.1);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    padding-top: 1.5em;
    margin-top: 1em;
    font-size: 1.4em;
}

    H2.h2_cat:first-of-type {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }

.h2_a {
    display: block;
}

.h2_title {
    color: #007D7D;
    text-transform: capitalize;
}

.h2_btn_right {
    position: absolute;
    right: 5%;
    letter-spacing: 0;
    text-transform: uppercase;
}

.text-left-desktop {
    text-align: left;
}

.bg-aqua {
    background-color: #C8E9FB;
}

.bg1 {
    background-color: #E7F1F8;
    padding: 2em 5%;
}

.bg_article_cat {
    background-image: url(/content/images/article_cat_bg1.svg);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    background-color: #230F57;
    text-align: center;
}

.bg_sparkpoints {
    background-image: url(/content/images/SparkPoints/sparkpoints_bg.png);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    background-color: #570404;
    text-align: center;
}

.bg_birthday_sparkpoints {
    background-image: url(/content/images/SparkPoints/sparkpoints_birthday_bg.svg);
    padding: 2em 5% 4em 5%;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    background-color: #FFF;
    text-align: center;
}

.bg_bonus_sparkpoints {
    background-image: url(/content/images/SparkPoints/sparkpoints_wheel_overall_bg.png);
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    background-color: #7A4805;
    text-align: center;
}

.bg_hiker_sparkpoints {
    background-image: url(/content/images/SparkPoints/hiker_sunset.png);
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    background-color: #85CAED;
    text-align: center;
    background-position: center;
}

.bg_comm_cat {
    background-image: url(/content/images/Community/community_bg1.svg);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    background-color: #038135;
    text-align: left;
}

.bg_goals_cat {
    background-image: url(/content/images/Goals/goals_bg1.svg);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    background-color: #371364;
    text-align: left;
}

.bg-dk-green {
    background-image: url(/content/images/LeafLines1_bg.svg);
    background-size: cover;
    background-repeat: repeat;
    background-color: #003535;
}

.bg_summary {
    background-image: url(/content/images/waves_bg.svg);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    background-color: #5B2D77;
    text-align: center;
}

.bg_simple_lines {
    background-image: url(/content/images/simple_lines_bg.svg);
    background-size: 100%;
    background-position: 0 20em;
    background-repeat: no-repeat;
    position: relative;
}

.bg_article_cat h2,
.bg_summary H2 {
    color: white;
    font-size: 1.4em;
}

.bg_gray {
    background-color: #F4F5F7;
    padding: 2em 5%;
}

.icons_w {
    display: inline-block;
    width: 18%;
    margin-left: 3%;
    margin-right: 3%;
    text-align: center;
    color: #fff;
    vertical-align: top;
}

.icon_pic {
    width: 55%;
    margin: 0 auto;
    border: 0;
}

.icon_p {
    font-size: 1rem;
    display: block;
    margin: 1em auto;
    font-weight: 700;
    line-height: 115%;
    width: 80%;
}

.icons_a {
    display: block;
    color: #fff !important;
    padding: 0;
    width: 100%;
    outline: none;
    background-color: transparent;
    border: 0;
    outline: none !important;
}

.page_title_w {
    padding: .5em 0 0 0;
    margin: 0 0 0 1rem;
    text-align: center;
}

    .page_title_w EM {
        display: inline-block;
        vertical-align: middle;
        height: 3em;
        width: 3em;
        margin-right: .5em;
        background-size: 100%;
        background-image: url(/content/images/mbart_s_list_all_v3.svg);
    }

.page_title {
    text-transform: uppercase;
    font-size: 1.8rem;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
    color: #3f3f3f;
    margin: 0 auto;
}

.page_tagline {
    font-weight: 400;
    font-size: 1.1rem;
    text-transform: none;
    display: block;
    vertical-align: middle;
    color: #666;
    margin-left: 1.4em;
    margin-top: .1em;
}

.categories {
    padding: 1em 2em;
    position: relative;
    display: block;
    background-color: #E7F1F8;
    border-radius: 0.5em;
}

    .categories UL {
        margin: 0;
        padding: 0;
    }

    .categories LI {
        display: block;
        font-size: 1em;
        position: relative;
        list-style: none;
        z-index: 5;
    }

        .categories LI.row1 {
        }

        .categories LI:last-child {
            border-bottom: none;
        }

        .categories LI A {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            font-weight: bold;
            text-decoration: none;
            color: black;
            padding: 0.8em 0 0.8em 0;
        }

.cat_pic_w {
    position: relative;
    width: 8em;
    vertical-align: middle;
    margin: auto 1em auto 0;
    z-index: 90;
}

.cat_pic {
    width: 8em;
    border: 0;
}

.cat_i {
    width: 1.5em;
    height: 1.5em;
    margin-right: 0.5em;
}

.cat {
    margin: auto auto auto 0;
    text-align: left;
    margin-left: 0.5em;
}

.catb_icon_w {
    margin-right: 0.6em;
    margin-left: auto;
}

.catb_t {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.catb_t2 {
    margin-left: 0;
    margin-right: auto;
}

.art_post_w {
    margin: 1em auto 2em auto;
    width: 29.3%;
    box-sizing: border-box;
    background-color: white;
    display: inline-block;
    vertical-align: top;
}

.art_a {
    color: black;
    display: block;
    text-decoration: none !important;
    transition: all 0.3s
}

.art_pic_w {
    vertical-align: top;
    display: inline-block;
    width: 100%;
}

.art_pic_w {
    width: 100%;
    margin: 0 auto;
}

.art_pic_i {
    width: 100%;
    padding-bottom: 65.166%;
    position: relative;
    overflow: hidden;
}

.art_pic2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.art_pic {
    width: 100%;
    vertical-align: top;
    display: inline-block;
}

.art_post {
    padding: 0.5em 3% 1em 3%;
    text-align: center;
    box-sizing: border-box;
}

.art_icon_w {
    border-radius: 2.4em;
    width: 2.4em;
    height: 2.4em;
    position: absolute;
    text-align: center;
    display: inline-block;
    z-index: 3;
}

.art_icon {
    width: 100%;
}

.art_headline {
    color: #446820;
    font-size: .8em;
    font-weight: 700;
    text-transform: uppercase;
    margin: 1em 0;
    display: none;
}

.art_title {
    font-size: 1.2rem;
    color: black;
    padding: 0;
    display: block;
    text-decoration: none;
    font-weight: 600;
    line-height: 120%;
}

.art_cc {
    border-left: 0.2em dotted #00df70;
    padding-left: 0.8em;
    margin-top: 0.8em;
    margin-left: 0.8em;
    color: #666;
    text-align: left;
    font-size: 0.8em;
    font-weight: 600;
}

.art_intro {
    display: none;
}

.art_author {
    font-size: .8em;
    background: none;
    border: none;
    padding: 0;
    color: #666;
    display: none;
}

    .art_author EM {
        font-family: Georgia, "Times New Roman", Times, serif;
        text-transform: lowercase;
        color: #999;
    }

.art_date {
    color: #666;
    margin-top: 0.5em;
    text-align: center;
    display: none;
    font-size: 0.8em;
}

.round_w {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    display: inline-block;
    vertical-align: middle;
    display: none;
}

.round_time {
    display: inline-block;
    vertical-align: middle;
    background-color: #207D88;
    width: 3.5em;
    height: 3.5em;
    border-radius: 3.5em;
    overflow: hidden;
    box-shadow: 0.0625rem 0.1em 0.2em rgba(0,0,0,.2);
}

.round_cals {
    display: inline-block;
    vertical-align: middle;
    background-color: #009F9F;
    width: 3.5em;
    height: 3.5em;
    border-radius: 3.5em;
    overflow: hidden;
    box-shadow: 0.0625rem 0.1em 0.2em rgba(0,0,0,.2);
}

.round_t1 {
    font-size: 0.7em;
    line-height: 100%;
    font-weight: 700;
    display: block;
    text-align: center;
    color: white;
    margin-top: 0.5rem;
}

.round_t2 {
    font-size: 1.5em;
    line-height: 100%;
    font-weight: 400;
    display: block;
    text-align: center;
    color: white;
}

.nutrients {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    display: inline-block;
    vertical-align: middle;
    display: none;
}

    .nutrients A {
        color: #555;
    }

.ncals, .nfat, .nprotein, .ncarbs, .nfiber {
    border-right: 0.0625rem solid #f2f2f2;
    padding: 0 0.7em;
    font-size: 0.7em;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.nfiber {
    border-right: 0;
}

    .ncals EM, .nfat EM, .nprotein EM, .ncarbs EM, .nfiber EM {
        font-size: 0.7em;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-style: normal;
    }

.nutrients B {
    font-size: 1.2rem;
    display: block;
    font-weight: 400;
}

.ncals {
    color: #555;
    display: none;
}

.nfat {
    color: #555;
}

.nprotein {
    color: #555;
}

.ncarbs {
    color: #555;
}

.nfiber {
    color: #555;
}
/*uses some of the same stuff from above, changes block just by adding the .calch class*/
.calch .art_post_w {
    position: relative;
    width: 100%;
    margin: 1em auto 1em auto;
    display: block;
}

.calch .art_post {
    width: 65%;
    padding: 1em 3% 1em 3%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

.calch .art_pic_w {
    width: 35%;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.calch .art_intro {
    color: black !important;
    display: block;
    margin: 1em 0;
    font-size: 1.1em;
    line-height: 160%;
}

.calch .art_headline {
    display: block;
}

.calch .art_title {
    font-size: 2.4rem;
    text-align: left;
    font-weight: 300;
}

.calch .art_icon_w {
    left: 1em;
    top: 1em;
    display: none;
}

.calch .art_date {
    display: block;
    text-align: left;
    font-size: 0.9rem;
    color: #444;
}

.calch_date {
    text-align: left !important;
}

.calch_btn {
    font-size: 1.4em;
    font-weight: 500;
    padding: 1em 3em;
}

.calch .art_cc {
    /*
    font-size: 1rem;
    line-height: 1.6;

    */
    margin-left: 0;
}

.calch_border_bottom {
    border-bottom: 0.08625rem solid rgba(0,0,0,0.1);
}

    .calch_border_bottom:last-of-type {
        border-bottom: 0;
    }
/*uses some of the same stuff from above, changes block just by adding the feature class*/
.feature .art_post_w {
    position: relative;
    background-color: #EBECED;
    width: 100%;
    margin: 1em auto 1.5em auto;
    display: block;
}

.feature .art_post {
    width: 40%;
    padding: 1em 3% 1em 3%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

.feature .art_pic_w {
    width: 60%;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.feature .art_intro {
    color: black !important;
    display: block;
    margin: 1em 0;
    font-size: 1.1em;
    line-height: 160%;
}

.feature .art_headline {
    display: block;
}

.feature .art_title {
    font-size: 1.8rem;
}

.feature .art_icon_w {
    left: 1em;
    top: 1em;
    display: none;
}

.feature .art_date {
    display: block;
    text-align: left;
    font-size: 0.9rem;
    color: #444;
}

/*uses some of the same stuff from above, changes block just by adding the feature2 class*/
.feature2 .art_post_w {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 1em auto 0 auto;
    display: block;
}

.feature2 .art_post {
    position: relative;
    width: 100%;
    padding: 1em 3% 1em 3%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

.feature2 .art_pic_w {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.feature2 .art_intro {
    color: black !important;
    display: block;
    margin: 1em 0;
    font-size: 1.1em;
    line-height: 160%;
}

.feature2 .art_headline {
    display: none;
}

.feature2 .art_title {
    font-size: 1.4rem;
}

.feature2 .art_icon_w {
    border-radius: 3em;
    width: 3em;
    height: 3em;
    right: 1.5em;
    left: auto;
    bottom: auto;
    top: -1.5em;
    display: none;
}

/*uses some of the same stuff from above, changes block just by adding the shopall class*/
.shopall {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    text-align: left;
}

    .shopall .art_post_w {
        position: relative;
        margin: 1em auto 2em 0;
        width: 29.3%;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        -ms-transition: all 0.5s ease-out;
        -o-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
    }

    .shopall .art_post {
        position: relative;
        padding: 1em 3% 1em 3%;
        text-align: center;
    }

    .shopall .art_title {
        font-size: 1.1em;
    }

    .shopall .art_icon_w {
        top: 0;
        right: auto;
        bottom: auto;
        left: 50%;
        margin-left: -1.2em;
        margin-top: -1.2em;
        display: none;
    }

    .shopall .round_w {
        position: absolute;
        top: -3.5em;
        right: 0.5em;
        display: inline-block;
    }

    .shopall .nutrients {
        margin-top: 1em;
        display: inline-block;
        display: flex;
        justify-content: space-between;
        margin: auto;
        align-items: flex-start;
        align-content: flex-start;
        flex-wrap: nowrap;
    }

    .shopall .ncals, .shopall .nfat, .shopall .nprotein, .shopall .ncarbs, .shopall .nfiber {
        padding: 0 0;
        margin: 1em auto 0.5em auto;
        flex: 0 1 auto;
        width: 25%;
    }

/*uses some of the same stuff from above, changes block just by adding the shop3col class*/
.shop3col {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    text-align: left;
}

    .shop3col .art_post_w {
        position: relative;
        /*margin-left: 0;*/
    }

    .shop3col .art_post {
        position: relative;
        padding: 0.7em 3% 1em 3%;
        text-align: center;
    }

    .shop3col .art_title {
        margin-top: 1em;
    }

    .shop3col .art_icon_w {
        top: 0;
        right: auto;
        bottom: auto;
        left: 50%;
        margin-left: -1.2em;
        margin-top: -1.2em;
        display: inline-block;
    }

    /*recipe hack for 3 column*/
    .shop3col > .recipe .art_title {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .shop3col > .recipe .art_icon_w {
        display: none;
    }

    .shop3col > .recipe .round_w {
        position: absolute;
        top: -3.5em;
        right: 0.5em;
        display: inline-block;
    }

    .shop3col > .recipe .nutrients {
        margin-top: 1em;
        display: inline-block;
        display: flex;
        justify-content: space-between;
        margin: auto;
        align-items: flex-start;
        align-content: flex-start;
        flex-wrap: nowrap;
    }

    .shop3col > .recipe .ncals, .shopall .nfat, .shopall .nprotein, .shopall .ncarbs, .shopall .nfiber {
        padding: 0 0;
        margin: 1em auto 0.5em auto;
        flex: 0 1 auto;
        width: 25%;
    }

    /*category hack for 3 column*/
    .shop3col.category .art_icon_w {
        display: none;
    }

    .shop3col.category .art_title {
        margin-top: 0;
    }

    .shop3col.category .art_date { /*display:block;*/
    }

/*uses some of the same stuff from above, changes block just by adding the bloglist class*/
.bloglist {
    text-align: left;
}

    .bloglist .art_post_w {
        position: relative;
        margin-left: 2em;
        background-color: transparent;
        width: 100%;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

        .bloglist .art_post_w:last-of-type {
            border-bottom: 0;
        }

    .bloglist .art_post {
        position: relative;
        padding: 0.7em 3% 1em 3%;
        text-align: center;
    }

    .bloglist .art_title {
        text-align: left;
    }

    .bloglist .art_pic_w {
        display: none;
    }

    .bloglist .art_title::before {
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font-family: "Font Awesome 5 Free";
        content: "\f249";
        color: #333;
        font-weight: 500;
        position: absolute;
        left: -1.5em;
    }

    .bloglist .art_icon_w {
        top: 0;
        right: auto;
        bottom: auto;
        left: 50%;
        margin-left: -1.2em;
        margin-top: -1.2em;
        display: inline-block;
    }

    /*category hack for 3 column*/
    .bloglist.category .art_icon_w {
        display: none;
    }

    .bloglist.category .art_title {
        margin-top: 0;
    }

    .bloglist.category .art_date {
        display: block;
    }
/*uses some of the same stuff from above, changes block just by adding the shop4col class*/
.shop4col {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    text-align: left;
}

    .shop4col .art_post_w {
        position: relative;
        width: 23%;
        margin: 0 1% 1em 1%;
        display: inline-block;
        vertical-align: top;
    }

    .shop4col .art_post {
        position: relative;
        padding: 1.7em 3% 1em 3%;
        text-align: center;
    }

    .shop4col .art_pic_w {
    }

    .shop4col .art_intro {
        color: black;
        margin: 1em 0;
        font-size: 1.1em;
        display: none;
    }

    .shop4col .art_headline {
        display: none;
    }

    .shop4col .art_title {
        font-size: 1rem;
        margin-top: 0;
    }

    .shop4col .art_icon_w {
        top: 0;
        right: auto;
        bottom: auto;
        left: 50%;
        margin-left: -1.2em;
        margin-top: -1.2em;
        display: inline-block;
    }

    .shop4col .art_author {
        display: none !important;
    }

/*uses some of the same stuff from above, changes block just by adding the list-pic-left class*/
.list-pic-left .art_post_w {
    position: relative;
    width: 100%;
    margin: 1em auto;
    display: block;
    padding: 0 0 1em 0;
    border-bottom: 0.0625rem solid rgba(0,0,0,0.1);
}

.list-pic-left .art_post {
    width: 70%;
    padding: 0 3% 0 3%;
    text-align: left;
    display: inline-block;
    vertical-align: top;
}

.list-pic-left .art_pic_w {
    width: 30%;
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.list-pic-left .art_intro {
    color: black !important;
    display: block;
    margin: 1em 0 0.3em 0;
    font-size: 0.9em;
}

.list-pic-left .art_headline {
    display: none;
}

.list-pic-left .art_title {
    font-size: 1.2rem;
}

.list-pic-left .art_icon_w {
    top: auto;
    right: 1em;
    bottom: 1em;
    left: auto;
    margin-left: -1.2em;
    margin-top: -1.2em;
    display: none;
}

.list-pic-left .art_date {
    display: block;
}

.list-pic-left .round_w {
    display: inline-block;
}

.list-pic-left .nutrients {
    display: inline-block;
}

.art_heading {
    display: block;
    padding: 1em 2% 1em 2%;
    font-size: 1.2em;
    letter-spacing: 0.0625em;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Oswald';
    font-weight: 500;
    color: #999;
}

.art_cat {
    text-transform: uppercase;
    display: block;
    margin: 2em auto 1.2em auto;
    position: relative;
}

    .art_cat .art_title {
        font-size: 1.5rem;
        margin: 0;
        padding: 0;
        color: #666;
        font-family: 'Oswald';
        font-weight: 500;
    }

    .art_cat:first-of-type {
        margin-top: .5em;
    }

.fancy {
    line-height: 0.4;
    text-align: center;
}

    .fancy h2 {
        display: inline-block;
        position: relative;
    }

        .fancy h2:before, .fancy h2:after {
            content: "";
            position: absolute;
            height: 0.2em;
            border-bottom: 0.0625rem solid #ccc;
            border-top: 0.0625rem solid #ccc;
            top: 0;
            width: 21.25em;
        }

        .fancy h2:before {
            right: 100%;
            margin-right: 1em;
            width: 26.25em;
        }

        .fancy h2:after {
            left: 100%;
            margin-left: 1em;
        }

.see_all {
    position: absolute;
    right: 1%;
    font-size: .7em;
    letter-spacing: .1em;
    font-weight: 500;
    top: -.8em;
}

.cat_all_btn {
    text-transform: uppercase;
    font-weight: 600;
}

.black_to_blue {
    color: #212529;
}

.cust-title {
    font-size: 1.3em;
    font-weight: 600;
}

.welcome_series_a {
    display: flex;
    align-content: center;
    margin: auto;
    max-height: 6em;
}

.welcome_series_thumb {
    max-width: 10em;
    margin: auto 0 auto auto;
    align-self: center;
}

.welcome_series_title {
    margin: auto auto auto 1.5em;
    color: #333;
    font-weight: 600;
    text-align: left;
    align-self: center;
}

.likert_statement {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.likert {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0em 0 2em 0;
    display: block;
    border-bottom: 0.1em solid #efefef;
}

    .likert:last-of-type {
        border-bottom: 0;
    }

    .likert:before {
        content: '';
        position: relative;
        top: 0.5em;
        left: 9.5%;
        display: block;
        background-color: #efefef;
        height: 0.3em;
        width: 76%;
    }

    .likert li {
        display: inline-block;
        width: 18.5%;
        text-align: center;
        vertical-align: top;
    }

        .likert li input[type=radio] {
            display: block;
            position: relative;
            top: 0;
            left: 50%;
            margin-left: -0.3em;
        }

        .likert li label {
            width: 100%;
            font-size: 0.9em;
        }

    .likert label > input:checked + span.likert_text {
        font-weight: 600;
    }

/*check image radio buttons*/

.likert_checks {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0 0 2em;
    display: flex;
}

    .likert_checks:last-of-type {
        border-bottom: 0;
    }

    .likert_checks li {
        display: flex;
        width: 19%;
        margin: 0.5%;
        text-align: center;
        vertical-align: top;
    }

        .likert_checks li label {
            width: 100%;
            font-size: 0.9em;
        }

    .likert_checks .likert_img {
        background-image: url(/Content/Images/likert_circle.svg);
    }

    .likert_checks .likert_btn {
        display: block;
        box-sizing: border-box;
        text-align: center;
        margin: auto;
        border: 0.1em solid transparent;
        border-radius: 0.8em;
        padding: 1em 0.5em;
        height: 100%;
        background-color: white;
    }

    .likert_checks .likert_img {
        width: 4em;
        height: 4em;
        display: block;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-size: 100%;
        box-sizing: border-box;
        text-align: center;
        margin: auto;
    }

    .likert_checks .likert_text {
        display: block;
        padding-top: 0.1em;
        margin: auto;
    }

    .likert_checks input { /* HIDE RADIO */
        /* visibility: hidden; Makes input not-clickable */
        opacity: 0;
        position: absolute; /* Remove input from document flow */
    }

    .likert_checks label > input + img { /* IMAGE STYLES */
        cursor: pointer;
    }

    .likert_checks input[type="radio"]:checked + label span.likert_btn {
        font-weight: 600;
        /*
        box-shadow: 0 0 0.5em rgba(0,0,0,0.1);*/
    }

    /* (RADIO CHECKED) IMAGE STYLES */

    .likert_checks input[type="radio"]:checked + label span span.likert_img {
        background-image: url(/Content/Images/likert_circle_checked.svg);
    }

    .likert_checks input[type="radio"]:focus + label span.likert_btn {
        opacity: 0.9;
        border-color: #CCC;
    }

/*faces radio buttons*/
.likert_faces {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0 0 2em;
    display: flex;
}

    .likert_faces:last-of-type {
        border-bottom: 0;
    }

    .likert_faces li {
        display: flex;
        width: 19%;
        margin: 0.5%;
        text-align: center;
        vertical-align: top;
    }

        .likert_faces li label {
            width: 100%;
            font-size: 0.9em;
        }

    .likert_faces .Disagree_Strongly {
        background-image: url(/Content/Images/likert_disagree_strongly.svg);
    }

    .likert_faces .Agree_Strongly {
        background-image: url(/Content/Images/likert_agree_strongly.svg);
    }

    .likert_faces .Disagree {
        background-image: url(/Content/Images/likert_disagree.svg);
    }

    .likert_faces .Agree {
        background-image: url(/Content/Images/likert_agree.svg);
    }

    .likert_faces .Not_Applicable {
        background-image: url(/Content/Images/likert_neutral.svg);
    }

    .likert_faces .likert_btn {
        display: block;
        box-sizing: border-box;
        text-align: center;
        margin: auto;
        border: 0.1em solid transparent;
        border-radius: 0.8em;
        padding: 1em 0.5em;
        height: 100%;
    }

    .likert_faces .likert_img {
        width: 4em;
        height: 4em;
        display: block;
        vertical-align: middle;
        background-repeat: no-repeat;
        background-size: 100%;
        box-sizing: border-box;
        text-align: center;
        margin: auto;
    }

    .likert_faces .likert_text {
        display: block;
        padding-top: 0.1em;
        margin: auto;
    }

    .likert_faces input { /* HIDE RADIO */
        /* visibility: hidden; Makes input not-clickable */
        opacity: 0;
        position: absolute; /* Remove input from document flow */
    }

    .likert_faces label > input + img { /* IMAGE STYLES */
        cursor: pointer;
    }

    .likert_faces input[type="radio"]:checked + label span.likert_btn,
    .likert_faces input[type="radio"]:focus + label span.likert_btn {
        border-color: #22a7ee;
        font-weight: 600;
        background-color: #f4f5f7;
    }

.assessment_bg1 {
    background-image: url(/content/images/assessment_bg1.jpg);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    position: relative;
    background-color: #C4E6DD;
    text-align: center;
}

.likert_btn {
    position: relative;
}

.likert_faces input[type="radio"]:checked + label span.likert_btn::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f058";
    color: #22a7ee;
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -0.5em;
    bottom: -0.5em;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 2em;
    border-radius: 2em;
    height: 1em;
    width: 1em;
    line-height: 100%;
    overflow: hidden;
    background-color: white;
    z-index: 2;
}

[role="radiogroup"] {
    padding: 0;
    margin: 0;
    list-style: none;
}

    [role="radiogroup"]:focus {
        outline: none;
    }

.likert_faces [role="radio"][aria-checked="true"] .likert_sel::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f058";
    color: #22a7ee;
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -0.5em;
    bottom: -0.5em;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 2em;
    border-radius: 2em;
    height: 1em;
    width: 1em;
    line-height: 100%;
    overflow: hidden;
    background-color: white;
    z-index: 2;
}

.likert_checks [role="radio"][aria-checked="true"] .likert_sel::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    color: #22a7ee;
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -0.2em;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 3em;
    height: 1em;
    width: 1em;
    z-index: 2;
    display: none;
}

.likert_checks [role="radio"][aria-checked="true"] .likert_img {
    background-image: url(/Content/Images/likert_circle_checked.svg);
}

.likert_faces div, .likert_checks div {
    width: 19%;
    margin-left: 0.5% !important;
    margin-right: 0.5% !important;
    font-size: 0.9em;
    border: 0.1em solid transparent;
    border-radius: 0.8em;
    position: relative;
    box-sizing: border-box !important;
}

[role="radio"]:active {
    border-color: #E4E4E4;
}

[role="radio"]:focus {
    outline: none;
    border-color: #22a7ee;
}

[role="radio"][aria-checked="true"] {
    border-color: #22a7ee;
    font-weight: 600;
    background-color: #f4f5f7;
}

@media (hover: hover) {
    /*hovers only*/

    H1.articleTitle A:hover {
        color: #22a7ee;
        font-weight: 700;
        text-decoration: none;
    }

    .popular LI A:hover {
        text-decoration: none;
        color: #22a7ee;
    }

    .categories LI A:hover {
        text-decoration: none;
        color: #22a7ee;
    }

    .feature .art_a:hover,
    .shopall .art_a:hover,
    .shop3col .art_a:hover,
    .shop4col .art_a:hover {
        box-shadow: 0 0 1em rgba(0,0,0,0.15);
    }

    .art_a:hover .art_pic {
        opacity: 0.90;
    }

    .art_a:hover .art_title {
        color: #22a7ee;
    }

    .art_title:hover {
        color: #22a7ee;
        text-decoration: none;
    }

    #see_more_tags A:hover {
        color: #22a7ee;
        text-decoration: none;
    }

    .shopall .art_post_w:hover {
        -webkit-transform: scale(1.08);
        -moz-transform: scale(1.08);
        -ms-transform: scale(1.08);
        -o-transform: scale(1.08);
        transform: scale(1.08);
    }

    .icons_a:hover,
    .icons_a:active {
        color: white !important;
        text-decoration: none !important;
        opacity: 0.9;
    }

    .black_to_blue:hover {
        color: #22a7ee;
    }

    .likert_checks .likert_btn:hover,
    .likert_checks input[type=radio]:focus .likert_btn {
        opacity: 0.9;
        border-color: #E4E4E4;
        /* box-shadow: 0 0 0.5em rgba(0,0,0,0.1);*/
    }

    .likert_faces .likert_btn:hover,
    .likert_faces input[type=radio]:focus .likert_btn {
        opacity: 0.9;
        border-color: #E4E4E4;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /*uses some of the same stuff from above, changes block just by adding the .calch class*/

    .calch .art_intro {
        font-size: 0.85em;
    }

    .calch .art_title {
        font-size: 2rem;
    }
}

@media screen and (max-width: 80em) {
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 47em) {
    .assessment_bg1 {
        background-image: none;
    }

    .likert_faces div,
    .likert_checks div {
        font-size: 0.6em;
    }
}

@media screen and (max-width: 46em) {
    /*mobile fixes & ipad narrow*/
    .mflex {
        flex-wrap: wrap;
        min-height: 1em;
    }

    .article_mcol1 {
        width: 100%;
        margin: 1em 5% 1em 5%;
        float: none;
    }

    .article_mcol2 {
        width: 100%;
        margin: 0 5% 1em 5%;
        float: none;
    }

    H1.articleTitle {
        font-size: 1.6em;
        font-weight: 700;
        margin: 0.5rem auto 0 auto;
    }

    .see_more_tags_flex {
        display: block;
    }

    .see_more_tags_first {
        flex-grow: 1;
    }

    .h_icon {
        width: 1.5rem;
        height: 1.5rem;
        position: absolute;
        top: 0.5em;
        right: 5%;
    }

    H2.articleSub {
        text-align: center;
    }

    H2.h2_cat {
        padding-top: 1em;
        font-size: 1.1em;
    }

    .h2_a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .h2_title {
        flex: 0 3 auto;
        margin: auto 1em auto 0;
    }

    .h2_btn_right {
        font-size: 0.7rem;
        margin: 0.2em 0 0.2em auto;
        right: 0;
        text-align: right;
        position: relative;
        align-self: flex-end;
        white-space: nowrap;
        flex: 0 1 auto;
    }

    .bg1 {
        padding: 1em 5%;
    }

    .bg_article_cat, .bg_summary, .bg_comm_cat, .bg_sparkpoints, .bg_goals_cat {
        padding: 1em 5% 2em 5%;
    }

    .text-left-desktop {
        text-align: center;
    }

    #see_more_tags {
        font-size: .7em;
    }

    .icons_w {
        display: inline-block;
        width: 22%;
        margin-right: 1%;
        margin-left: 1%;
        text-align: center;
        color: #333;
        vertical-align: top;
    }

    .icon_p {
        font-size: 0.8em;
        margin: 0.5em auto 0 auto;
        width: 100%;
    }

    .catb_t {
        font-size: 0.8em !important;
        margin: 0 auto 0 auto !important;
    }

    .page_title_w {
        padding: .5em 0 .3em 0;
        margin: .5rem 3% 0 3%;
        text-align: center;
    }

    .page_title {
        text-transform: uppercase;
        font-size: 1.4rem;
        font-weight: 700;
        display: inline-block;
        vertical-align: middle;
        color: #3f3f3f;
    }

    .page_tagline {
        font-weight: 400;
        font-size: .8rem;
        text-transform: none;
        display: block;
        color: #666;
        margin: .5em 3% 1em 3%;
    }

    .page_title_w EM {
        display: inline-block;
        vertical-align: middle;
        height: 3em;
        width: 3em;
        margin-right: .5em;
        background-size: 100%;
        background-image: url(/content/images/mbart_s_list_all_v3.svg);
    }

    .art_post_w {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 1em;
    }

    .art_post {
        position: relative;
        padding: 1em 3%;
        text-align: center;
    }

        .art_post IMG, .art_post OBJECT, .art_post EMBED, .art_post IFRAME {
            max-width: 100% !important;
        }

    .art_pic {
        width: 100%;
        max-width: 100%;
    }

    .art_a {
        display: block;
        text-decoration: none;
    }

    .art_title {
        font-size: 1.1rem;
        line-height: 120%;
        border: 0;
        color: black;
        padding: 0;
        display: block;
        text-align: center;
    }

    .art_author {
        font-size: .7em;
        background: none;
        border: none;
        padding: 0;
        color: #666;
        display: none;
    }

        .art_author EM {
            font-family: Georgia, "Times New Roman", Times, serif;
            text-transform: lowercase;
            color: #999;
        }

    .art_headline {
        display: none;
    }

    .art_intro {
        display: none;
    }

    .art_heading {
        display: none;
    }

    .calch .art_post {
        width: 100%;
    }

    .calch .art_pic_w {
        width: 100%;
        margin: 0 0 0 0;
    }

    .calch .art_title {
        font-size: 1.6em;
    }

    .calch .art_intro {
        font-size: 1em;
    }

    /*uses some of the same stuff from above, changes block just by adding the feature class*/
    .feature .art_post_w {
        width: 100%;
        margin: 0 0 0 0;
    }

    .feature .art_post {
        width: 100%;
    }

    .feature .art_headline {
        margin: 0 0 0.5em 0;
    }

    .feature .art_pic_w {
        width: 100%;
        display: block;
    }

    .feature .art_icon_w {
        right: 1em;
        top: -1.2em;
        left: auto;
    }

    .feature .art_title {
        font-size: 1.4rem;
        text-align: left;
    }

    /*uses some of the same stuff from above, changes block just by adding the feature2 class*/
    .feature2 .art_post_w {
        width: 100%;
        margin: 0 0 0 0;
    }

    .feature2 .art_post {
        width: 100%;
    }

    .feature2 .art_pic_w {
        width: 100%;
        display: block;
    }

    .feature2 .art_icon_w {
        right: 1em;
        top: -1.2em;
        left: auto;
    }

    .feature2 .art_title {
        text-align: left;
    }

    /*uses some of the same stuff from above, changes block just by adding the shopall class*/
    .shopall .art_post_w {
        width: 100%;
        margin: 1em auto 1em auto;
    }

    /*uses some of the same stuff from above, changes block just by adding the shop3col class*/
    .shop3col .art_post_w {
    }

    .nobr3col .art_post_w {
        width: 29%;
        margin: 0 2% 1em 2%;
    }
    /*uses some of the same stuff from above, changes block just by adding the shop4col class*/
    .shop4col .art_post_w {
        width: 46%;
        margin: 0 2% 1em 2%;
    }

    .shop4col .art_post {
        padding: 1.5em 3% 0.5em 3%;
    }

    .shop4col .art_pic_w {
    }

    .shop4col .art_title {
        font-size: 0.9rem;
    }

    .shop4col .art_icon_w {
        top: 0;
        right: auto;
        width: 2em;
        height: 2em;
        bottom: auto;
        left: 50%;
        margin-left: -1em;
        margin-top: -1em;
    }

    /*uses some of the same stuff from above, changes block just by adding the list-pic-left class*/
    .list-pic-left .art_post_w {
        width: 100%;
        margin: 1em auto;
        padding: 0 0 1em 0;
    }

    .list-pic-left .art_post {
        width: 70%;
        padding: 0 3% 0 3%;
        text-align: left;
        vertical-align: middle;
    }

    .list-pic-left .art_pic_w {
        width: 30%;
        vertical-align: middle;
    }

    .list-pic-left .art_intro {
        margin: 1em 0 0.3em 0;
        font-size: 0.8em;
        display: none;
    }

    .list-pic-left .art_title {
        font-size: 1rem;
    }

    .list-pic-left .art_date {
        font-size: 0.8rem;
        display: none;
    }

    .list-pic-left .round_w {
        display: none;
    }

    .list-pic-left .nutrients {
        display: none;
    }

    .list-pic-left .art_icon_w {
        display: none;
    }

    .art_cat {
        text-transform: uppercase;
        display: block;
        margin: 2em auto 2em auto;
        position: relative;
    }

        .art_cat H2 {
            font-size: 1.4em;
            color: #666;
            font-family: 'Oswald';
            font-weight: 500;
            font-style: normal;
            margin: 0;
            padding: 0;
            line-height: 0.4;
        }

        .art_cat:first-of-type {
            margin-top: 2em;
        }

    .fancy {
        line-height: 0.4;
        text-align: center;
    }

        .fancy h2 {
            display: inline-block;
            position: relative;
        }

            .fancy h2:before, .fancy h2:after {
                content: "";
                position: absolute;
                height: 0.2em;
                border-bottom: 0.0625rem solid #ccc;
                border-top: 0.0625rem solid #ccc;
                top: 0;
                width: 6.875em;
            }

            .fancy h2:before {
                right: 100%;
                margin-right: 1em;
            }

            .fancy h2:after {
                left: 100%;
                margin-left: 1em;
            }

    .see_all {
        position: absolute;
        right: 1%;
        font-weight: 400;
        top: -1.2em;
        font-size: .7em;
        border-radius: 2em;
    }

    .popular {
        margin: 2em 0 0 0;
    }

    .likert:before {
        width: 78%;
    }

    .likert li label {
        font-size: 0.8em;
    }

    .likert_checks li label {
        font-size: 0.6em;
    }

    .likert_faces li label {
        font-size: 0.6em;
    }
}

@media screen and (min-width:34em) and (max-width: 46em) {
}

@media screen and (max-width: 34em) {
    .icon_pic {
        width: 70%;
    }

    .catb_icon_w {
        margin: 0 auto 0.5em auto;
    }

    .catb_t {
        flex-direction: column;
        text-align: center;
        justify-content: center !important;
    }

    .mobile_br {
        display: block;
    }

    .catb_t2 {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .icon_pic2 {
        margin: auto;
    }

    .catb_photo {
        display: none;
    }

    .cust-title {
        font-size: 1em;
    }

    .hl_subtitle {
        font-size: 0.7em;
    }
}
.article_mcol1 {
    width: 54%;
    margin: 1em auto 1em 5%;
    box-sizing: border-box;
    text-align: left;
}

.article_mcol2 {
    width: 31%;
    margin: 1em 5% 1em auto;
    box-sizing: border-box;
}
/*
H1 {
    font-size: 3em;
    color: black;
    font-weight: 300;
    margin: 0em auto 0em auto;
    padding: 0;
    display: block;
    line-height: normal;
    font-style: normal;
    text-align: left;
}

    H1 A {
        color: black;
        font-weight: 900;
        text-decoration: none;
    }

H2 {
    font-size: 1.1em;
    text-align: left;
    letter-spacing: 0.0625em;
    color: #007D7D;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 0.5em 0;
    padding: 0.8em 0 0.1em 0;
    display: block;
}

H3 {
    font-size: 1.2em;
    color: #333;
    font-weight: 900;
    margin: 1.25em 0 0.5em 0;
    padding: 0;
    line-height: normal;
    display: block;
}

H4 {
    font-size: 1.1em;
    color: black;
    border-bottom: none;
    font-style: normal;
    font-weight: bold;
    margin: 1.25em 0 0.5em 0;
    padding: 0 0 0.15em 0;
    display: block;
}

H6 {
    font-size: 1.2em;
    margin: 0 0 0.5em 0;
    padding: 0;
    line-height: normal;
    display: block;
}
*/
.blog_post_w {
    z-index: 2;
    position: relative;
    margin: auto;
}
/*
.blog_post {
    font-family: 'Montserrat','Helvetica Neue',roboto, helvetica, arial, verdana, sans-serif !important;
    line-height: 200% !important;
    position: relative;
    font-size: 1em;
}

    .blog_post DIV, .blog_post P, .blog_post SPAN, .blog_post STRONG {
        font-family: 'Montserrat','Helvetica Neue',roboto, helvetica, arial, verdana, sans-serif !important;
    }

    .blog_post TD, .blog_post th, .blog_post TD DIV, .blog_post TD P, .blog_post TD SPAN, .blog_post TD STRONG {
        line-height: 120% !important;
        font-size: 0.9em;
    }

    .blog_post P {
        position: relative;

        display: block;
    }

    .blog_post LI {
        position: relative;
        font-size: 1em;
        margin: 0;
    }

    .blog_post H3 A {
        color: #109462;
        text-decoration: none;
    }

.blog_post_body A {
    color: #006AA4;
    text-decoration: underline;
}

.blog_post_body {
    font-size: 1.2em;
    margin-top: 2em;
}

    .blog_post_body ol,
    .blog_post_body ul,
    .blog_post_body dl {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .blog_post_body li {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .blog_post_body H2,
    .blog_post_body H2 A {
        font-size: 1.5em !important;
        color: black !important;
        font-weight: bold !important;
        font-family: 'Montserrat','Helvetica Neue',roboto, helvetica, arial, verdana, sans-serif !important;
        text-transform: none;
        font-style: italic !important;
        letter-spacing: 0 !important;
        margin: 1em 0 0 0 !important;
        padding: 0.8em 0 0.15em 0 !important;
        line-height: normal !important;
        text-align: left !important;
    }

        .blog_post_body H2 b,
        .blog_post_body H2 b span {
            font-size: 1em !important;
            line-height: normal !important;
        }

    .blog_post_body H3 {
        font-size: 1.2em;
        color: black;
    }

    */
.blog_post_body IMG {
    max-width: 100%;
}

.main_layout {
    z-index: 2;
    position: relative;
}

.blog_pic {
    display: block;
    width: 100%;
    max-width: 100%;
    top: 0;
}

a.blog_more {
    color: #006AA4;
    font-weight: bold;
    text-decoration: none;
}

.author {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    font-size: .8em;
    color: #666666;
    margin: 0 auto 1em 0;
}

.author_text {
    text-align: left;
    font-weight: 700;
    margin: auto auto auto 0;
}

.author A {
    color: #333;
    font-weight: 700;
}

.author_pic_w {
    height: 3.125rem;
    border-radius: 3.125rem;
    width: 3.125rem;
    min-width: 3.125rem;
    overflow: hidden;
    margin: .6em 1em .6em 0em;
}

.author_pic {
    width: 3.125rem;
}

.author_pic_bio_w {
    height: 10rem;
    /*
    border-radius: 5rem;*/
    width: 10rem;
    min-width: 10rem;
    overflow: hidden;
    margin: 0em 2em .6em 0em;
    float: left;
}

.author_pic_bio {
    width: 100%;
}

.author_title {
    font-size: 1.1em;
    font-weight: bold;
    margin: auto auto auto 0;
}

.points_w {
    margin-top: 1em;
}

.points_c1 {
}

.points_c2 {
}

/*sidebar styles*/
.popular {
    padding: 0em 0 0 0;
    position: relative;
    display: block;
}

    .popular UL {
        margin: 0;
        padding: 0;
    }

    .popular LI {
        display: block;
        font-size: 1em;
        position: relative;
        list-style: none;
        z-index: 5;
        border-bottom: 0.0625em solid #e5e5e5;
    }

        .popular LI.row1 {
        }

        .popular LI:last-child {
            border-bottom: none;
        }

.pop_a, .track_a {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    font-weight: bold;
    text-decoration: none;
    color: black;
    padding: 0.8em 0 0.8em 0;
}

.track_a {
    padding: 0.1em 0 0.1em 0;
}

.pop_pic_w {
    position: relative;
    /*
    width: 8em;
    vertical-align: middle;
        */
    margin: auto 1em auto 0;
    z-index: 90;
}

.pop_pic {
    width: 8em;
    border: 0;
}

.pop {
    margin: auto auto auto 0;
    text-align: left;
    flex: 1 1 75%;
}

.track_title, .track_title_sidebar, .track_title_sm {
    color: #777;
    font-size: 1em !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
}

.track_title_sidebar {
    margin-bottom: 1em;
}

.track_title_sm {
    font-size: 0.8em;
    line-height: 110%;
}

.track_pic_w {
    position: relative;
    width: 5em;
    vertical-align: middle;
    margin: auto 0.5em auto 0.5em;
    z-index: 90;
}

.track_pic {
    width: 5em;
    border: 0;
}

.border-track {
    border-left: 0.2em solid #F8C206;
}

.print_btn {
    font-size: 0.9em;
    text-transform: uppercase;
    color: #007D7D;
    text-decoration: none;
    font-weight: 700 !important;
    padding: 0.8em 1.2em;
    margin: -0.8em 0;
    background-color: transparent;
    line-height: 100%;
}
/*@media only screen and (min-device-width: 64em) {*/
@media (hover: hover) {
    /*hovers only*/

    .author A:hover {
        color: #22a7ee;
        text-decoration: none;
    }

    /*
    .blog_post H3 A:hover {
        color: #62A7EC;
        text-decoration: none;
    }

    .blog_post_body A:hover {
        color: #62A7EC;
        text-decoration: none;
    }
     */
    a.blog_more:hover {
        color: #22a7ee;
        font-weight: bold;
        text-decoration: none;
    }

    a.author_product_pic_w:hover {
        border: 0.0625em solid #d7d7f9;
    }

    .popular LI A:hover {
        text-decoration: none;
        color: #22a7ee;
    }

    .popular .comments A:hover {
        text-decoration: none;
        color: #5a5ab5;
    }

    .print_btn:hover {
        color: #fff;
        background-color: #0082CA;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
}

@media screen and (max-width: 80em) {
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 48em) {
    /*mobile fixes & ipad narrow*/
    .mflex {
        flex-wrap: wrap !important;
        min-height: 1em;
    }

    .article_mcol1 {
        width: 90%;
        margin: 1em 5% 1em 5%;
        float: none;
    }

    .article_mcol2 {
        width: 100%;
        margin: 0em 5% 1em 5%;
        float: none;
    }

    #see_more_tags {
        font-size: .7em;
    }
    /*
    .blog_post_body {
        font-size: 1em;
    }

        .blog_post_body H2 {
            font-size: 1.2em !important;
            text-align: left;
        }
    */
    .points_w {
        text-align: center;
    }

    .points_c1 {
        margin: auto;
    }
}

@media screen and (min-width:34em) and (max-width: 46em) {
}

@media screen and (max-width: 34em) {
    /*mobile fixes*/
    .track_title {
        font-size: 0.7em !important;
    }

    .track_title_sidebar {
        font-size: 0.8em !important;
    }

    .blog_post table, .blog_post td, .blog_post th {
        max-width: 100% !important;
    }

    .hscroll {
        overflow-x: auto;
    }

    .blog_post TD, .blog_post th, .blog_post TD DIV, .blog_post TD P, .blog_post TD SPAN, .blog_post TD STRONG {
        font-size: 0.8em;
    }
}
H2.recipeSub,
H2.videoSub {
    font-size: 1.1em;
    text-align: left;
    letter-spacing: 0.0625em;
    color: #007D7D;
    text-transform: uppercase;
    font-weight: 500;
    font-family: Oswald;
    margin: 1em 0 1em 0;
    padding: 0.8em 0 0.2em 0;
    display: block;
}

h2.videoIntro {
    font-size: 1.1em;
    text-align: left;
    letter-spacing: 0.0625em;
    color: #007D7D;
    text-transform: uppercase;
    font-weight: 500;
    font-family: Oswald;
    margin: 0em 0 1em 0;
    padding: 0em 0 0.2em 0;
    display: block;
}

.h2_line {
    border-bottom: 0.0625rem solid #ccc;
    margin-bottom: 1.5em;
    text-align: left;
}

#directions_w {
}

#tips_w {
    font-size: 0.9em;
}

#ingredients {
    margin: 0 0 0 0;
    padding: 0;
    position: relative;
    clear: left;
}

    #ingredients SPAN {
    }

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

    #ingredients li {
        list-style: none;
        padding: 0.4em;
        margin: 0 0 0.2em 0;
    }

        #ingredients li.row2 {
            list-style: none;
            padding: 0.4em;
            margin: 0 0 0 0;
        }

#scale_recipe {
    border-top: 0.0625rem solid;
    border-bottom: 0.0625rem solid;
    border-color: #66CC99;
    padding: 0.4em;
}

.recipe_main_text,
.video_main_text {
    display: inline;
    text-align: left;
}

.pic_btn {
    padding: 0 !important;
}

.det_pic_size {
    padding: 0;
    margin: 0.1em 0 1em 0;
    max-width: 100%;
    border: 0;
    position: relative;
}

.prep_box_w {
}

.prep_box {
    text-align: left;
    font-weight: 600;
    font-size: 0.9em;
    margin: 0.3em 0.3em 0 0;
    display: block;
}

    .prep_box B {
        font-weight: 900;
    }

.submited_by {
    font-size: .8em;
}

#tags_w {
    margin: 0.25em 0 0 0;
    clear: left;
    border: 0.0625rem solid #E0E0E0;
    padding: 0.1em;
    text-align: left;
}

#tags {
    padding: 0.5em;
}

    #tags A {
        color: #6384BD;
        font-size: 0.8em;
        text-decoration: none;
    }

        #tags A:hover {
            color: #ff7b08;
            text-decoration: none;
        }

    #tags SPAN {
        font-weight: normal;
        color: #d7d7f9;
        font-size: 0.8em;
    }

    #tags .tags_t {
        font-weight: 600;
        color: #666;
        font-size: 0.8em;
    }

.right_bar {
    float: right;
    box-sizing: border-box;
    width: 14em;
    background-color: white;
    text-align: center;
    padding: 1em 0 1em 2em;
    position: relative;
    z-index: 98;
}

#nut_info_w {
    border: 0.0625rem solid #CCCCCC;
    padding: 0.1em;
    text-align: center;
    margin: 0.5em 0 0.5em 0;
}

#nut_info {
    border: 0.15em solid #CCCCCC;
    padding: 0.5em;
    text-align: left;
}

    #nut_info .title {
        border-bottom: 0.3em solid black;
        font-size: 1.1em;
        font-weight: 600;
        margin-bottom: 0.5em
    }

    #nut_info ul {
        margin: 0;
        padding: 0;
    }

    #nut_info li {
        border-bottom: 0.0625rem solid black;
        list-style: none;
        font-size: 0.8em;
        padding-top: 0.2em;
        padding-bottom: 0.2em;
        padding-left: 0.1em;
    }

        #nut_info li.servings {
            border: none;
            list-style: none;
            font-size: 0.8em;
            padding-top: 0.1em;
            padding-bottom: 0.1em;
            padding-left: 0.1em;
        }

        #nut_info li.indent {
            border-bottom: 0.0625rem solid black;
            list-style: none;
            font-size: 0.8em;
            padding-top: 0.1em;
            padding-bottom: 0.1em;
            padding-left: 1em;
        }

    #nut_info A {
        font-weight: 600;
        color: #FF6600;
        text-decoration: underline;
    }

        #nut_info A:hover {
            font-weight: 600;
            color: #F4C92D;
            text-decoration: none;
        }

#ingred_info {
    text-align: center;
    font-size: 0.8em;
}

    #ingred_info A {
        font-size: 0.8em;
        font-weight: 600;
        color: black;
        text-decoration: underline;
    }

        #ingred_info A:hover {
            font-weight: 600;
            color: #ff7b08;
            text-decoration: none;
        }

/*sidebar styles*/
.related {
    padding: 0 0 0 0;
    position: relative;
    display: block;
}

    .related UL {
        margin: 0;
        padding: 0;
    }

    .related LI {
        display: block;
        font-size: 1em;
        position: relative;
        list-style: none;
        z-index: 5;
        border-bottom: 0.0625em solid #e5e5e5;
    }

        .related LI.row1 {
        }

        .related LI:last-child {
            border-bottom: none;
        }

        .related LI A {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            font-weight: bold;
            text-decoration: none;
            color: black;
            padding: 0.8em 0 0.8em 0;
        }

.pop_pic_w {
    position: relative;
    width: 8em;
    vertical-align: middle;
    margin: auto 1em auto 0;
    z-index: 90;
}

.pop_pic {
    width: 8em;
    border: 0;
}

.pop {
    margin: auto auto auto 0;
    text-align: left;
}

/*@media only screen and (min-device-width: 64em) {*/
@media (hover: hover) {
    /*hovers only*/

    H1 A:hover {
        color: #22a7ee;
        font-weight: 900;
        text-decoration: none;
    }

    .related LI A:hover {
        text-decoration: none;
        color: #22a7ee;
    }

    .related .comments A:hover {
        text-decoration: none;
        color: #5a5ab5;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
}

@media screen and (max-width: 80em) {
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 46em) {
    /*mobile fixes & ipad narrow*/

    H2.recipeSub {
        text-align: center;
    }

    .right_bar {
        float: none;
        clear: both;
        width: 100%;
        padding: 0em 0 1em 0em;
    }
}

@media screen and (min-width:34em) and (max-width: 46em) {
}

@media screen and (max-width: 34em) {
    /*mobile fixes*/
}
.city_logo {
    max-width: 40rem;
    max-height: 10rem;
}

.city_logo_vs {
    z-index: 2;
    position: relative;
    margin-top: 0.5em;
}

.city_dash_logo {
    max-width: 30rem;
    max-height: 10rem;
    margin: auto;
}

.top_city_title {
    width: 100%;
    text-align: center;
    left: 0;
    position: absolute;
    top: 1em;
}

.top_city_btns {
    width: 100%;
    text-align: center;
    left: 0;
    position: absolute;
    bottom: 4em;
}

.btn-outline-dark.city_btn {
    border-color: black !important;
    color: black !important;
}

.city_join_top_btn {
    font-size: 1.3em;
    padding: 0.8em 2.5em !important;
    text-transform: uppercase;
    transition: background-color 1s;
}

.city_btn_unscrolled {
    background-color: transparent;
    border-color: white !important;
}

.city_btn_scrolled {
    background-color: #28a745;
    border-color: transparent;
}

.city_join_p_btn {
    font-size: 1.3em;
    padding: 0.8em 2.5em !important;
    text-transform: uppercase;
    transition: background-color 1s;
}

.bg_city {
    /*
    padding: 2em 5% 4em 5%;
        */
    background-size: 110%;
    background-repeat: repeat;
    background-position: top center;
    position: relative;
    background-color: #42638A;
    text-align: center;
    overflow: hidden;
    background-attachment: fixed;
}

    .bg_city H1 {
        text-align: center;
    }

.city_dash_w {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    background-color: #699FDB;
    background-color: white;
    text-align: center;
    /*
    border-top: 0.1em solid #22a7ee;
    border-bottom: 0.1em solid #22a7ee;
        */
}

.city_dash_border {
    border: 0.0625rem solid rgba(0,0,0,.2);
    border-radius: .5em;
}

.city_dash_bg {
    background-attachment: scroll;
    background-size: cover;
}

.city_dash_box {
    background-color: #fff;
    box-shadow: 0 0 0.4em rgba(0,0,0,.1);
    border-radius: .5em;
    padding: 2em 4% 2em 4%;
    margin-top: 5em;
    margin-bottom: 5em;
}

.city_dash_img {
    min-width: 36%;
    width: 36%;
    height: 22em;
    max-height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    position: relative;
    background-color: #42638A;
    text-align: center;
    flex: 1;
    padding: 0;
    margin: 0;
}

.city_img_dash {
    display: none !important;
}

.city_minute_bg {
    /*
    padding: 2em 5% 6em 5%;
    background-image: url('/Content/Images/CityImages/fitness_game_people.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    background-color: #FFD300;
    background-color: #F4f5f7;
    text-align: center;
    overflow: hidden;
    background-attachment: fixed;
*/
    padding: 5em 5% 4em 5%;
    background-image: url('/Content/Images/CityImages/fitness_equipment_blue.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center -4em;
    position: relative;
    background-color: #019AF2;
    text-align: center;
    overflow: hidden;
    /*
    background-attachment: fixed;
        */
}

.city_leaderboard_bg {
    /*
        background-image: url('/Content/Images/CityImages/city_leaderboard_bg.jpg');
    background-color: #991A02;
    color: white;

    background-image: url('/Content/Images/CityImages/triangles_bg1.jpg');*/
    background-color: #f4f5f7;
    color: #333;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.city_official_title {
    font-size: 2em;
    color: #333;
}

.last_updated2 {
    /*
    color: white !important;
        */
}

.city_img {
    width: 100%;
    max-width: 100%;
}

.city_img_size {
    visibility: hidden;
    position: relative;
    top: 0;
    width: 100%;
    left: 0;
    max-width: 100%;
}

.city_sponsor {
    display: flex;
    max-width: 10em;
    max-height: 10em;
    margin: auto;
}

.city_sponsor_presenting {
    max-width: 14em;
    max-height: 14em;
    margin: auto;
}

.city_sponsor_img {
    width: 100%;
    max-height: 100%;
    max-width: 100%;
    align-self: center;
}

.spark360_sponsor_footer {
    display: flex;
    max-width: 7em;
    max-height: 7em;
}

.spark360_sponsor_footer_img {
    width: 100%;
    max-height: 100%;
}

.city_sponsor_presenting_t {
}

.city_feature_logo {
    width: 100%;
}

.city_feature_text {
}

.city_minute_total_w {
    position: relative;
    display: inline-block;
    padding: 0 1em;
    min-width: 32em;
}

.city_minute_total_w2 {
    position: relative;
    display: inline-block;
    padding: 0 1em;
    background-color: rgba(0,0,0,0.3);
    border-radius: 0.5em;
}

.city_total_min_title {
    color: white !important;
    font-size: 2em;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 115% !important;
}

.city_total_min_title2 {
    color: white !important;
    font-size: 1.6em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.2em !important;
}

.city_minute_total {
    font-size: 5em;
    font-weight: 900;
    z-index: 2;
    position: relative;
    color: white;
}

.city_minute_total2 {
    font-size: 2em;
    font-weight: 900;
    z-index: 2;
    position: relative;
    color: white;
}

.city_minute_total3 {
    font-family: Oswald;
    z-index: 2;
    position: relative;
    color: white;
}

.city_minute_extra_text {
    color: white;
    font-weight: 700;
}

.city_total_min_title_first {
    /*
    display: block;
    font-size: 2.8em;*/
    font-family: Oswald;
}

.min_total_bg {
    z-index: 3;
    border-radius: 1em;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    /*
    border: 0.0625rem solid rgba(255,255,255,0.1);
    background-color: white;
    background: -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(229,229,229,0) 48%, rgba(255,255,255,0.2) 51%, rgba(229,229,229,0) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(229,229,229,0) 48%,rgba(255,255,255,0.2) 51%,rgba(229,229,229,0) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(229,229,229,0) 48%,rgba(255,255,255,0.2) 51%,rgba(229,229,229,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66ffffff', endColorstr='#00e5e5e5',GradientType=0 );
        */
    border: 0.0625rem solid rgba(0,0,0,0.1);
    background-color: black;
    background: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.1) 49%, rgba(0,0,0,0.2) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 48%,rgba(0,0,0,0.1) 49%,rgba(0,0,0,0.2) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 48%,rgba(0,0,0,0.1) 49%,rgba(0,0,0,0.2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80e5e5e5',GradientType=0 );
}

.min_total_bg_sub {
    border-radius: 1em;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.2);
    z-index: 1;
}

.bg_social {
    /*
    background-color: #007fc4;
        */
}

.city_social_border {
    border-color: rgba(0,0,0,0.1);
}

.fa-instagram {
    /*
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    border-radius: 6em;
    padding: 0.4rem;
    width: 1em;
    height: 1em;
    box-sizing: border-box;
        */
    color: #E30066;
}

.fa-facebook {
    color: #0152A6;
    /*color: white;*/
}

.fa-twitter {
    color: #01ADEB;
}

.fa-linkedin {
    color: #0075BA;
    /*color: white;*/
}

@media (hover: hover) {
    /*hovers only*/
    /*
    .city_btn:hover {
        opacity: 1 !important;
    }
        */
    .city_join_top_btn:hover {
        background-color: rgba(255,255,255,0.2) !important;
        background-color: rgba(0,0,0,0.8) !important;
        color: white !important;
        border-color: white !important;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
    .city_minute_bg {
        padding: 6em 5% 2em 5%;
        background-size: cover;
        background-attachment: scroll;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) and (orientation : portrait) {
    /* IPAD VERTICAL ONLY*/
    .city_minute_bg {
        background-position: center;
    }
}

@media screen and (max-width: 80em) {
    .city_minute_bg {
        background-position: center;
    }
}

@media screen and (max-width: 50em) {
    .city_logo {
        max-width: 25rem;
        max-height: 7rem;
    }

    .city_logo_vs {
        max-width: 20rem;
        max-height: 7rem;
    }

    .city_dash_logo {
        max-width: 20rem;
        max-height: 7rem;
    }

    .city_join_top_btn {
        font-size: 1em;
        padding: 0.8em 2.5em !important;
    }

    .top_city_btns {
        bottom: 3em;
    }
}

@media screen and (max-width: 46em) {
    /*mobile fixes & ipad narrow*/
}

@media screen and (min-width:36em) and (max-width: 46em) {
}

@media screen and (max-width: 36em) {
    .city_img_size {
        position: relative;
        visibility: visible !important;
    }

    .city_dash_img {
        display: none !important;
    }

    .city_img_dash {
        display: block !important;
    }

    .city_dash_bg {
        border-top: 0.1em solid #d7d7f9;
        border-bottom: 0.1em solid #d7d7f9;
    }

    .city_dash_box {
        box-shadow: none;
        border-radius: 0;
        padding: 1em 4% 1em 4%;
        margin-top: 0em;
        margin-bottom: 0em;
        text-align: center;
    }

    .bg_city {
        background-color: white;
        background-image: url('') !important;
    }

        .bg_city .curve_white_btm {
            display: none !important;
        }

        .bg_city .curve_white_btm_vs {
            display: block !important;
            z-index: 2;
        }

    .city_logo, .city_dash_logo {
        max-width: 80%;
        max-height: 10rem;
    }

    .city_logo_vs {
        max-width: 70%;
        max-height: 10rem;
        margin: -0.5em auto 1em auto !important;
    }

    .city_dash_logo {
        margin-bottom: 1em;
    }

    .top_city_title {
        position: relative;
        top: 0em;
        margin: 1em auto 1em auto;
    }

    .top_city_btns {
        position: relative;
        bottom: 0;
    }

    .city_join_top_btn {
        font-size: 1.2em;
        margin: 1em auto;
        padding: 0.8em 2em !important;
        background-color: #22a7ee !important;
    }

    .city_btn_unscrolled {
        background-color: #22a7ee !important;
    }

    .city_btn_scrolled {
        background-color: #00df70 !important;
    }

    .city_sponsor_presenting {
        max-width: 8em;
        max-height: 8em;
    }

    .city_sponsor {
        max-width: 5em;
        max-height: 5em;
        margin: auto;
    }

    .city_minute_bg {
        padding: 0em 5% 5em 5%;
    }

    .city_minute_total {
        font-size: 2.6em;
    }

    .city_minute_total2 {
        font-size: 1.6em;
    }

    .city_desc h3 {
        font-size: 1.2em;
    }

    .city_official_title {
        font-size: 1.2em;
    }

    .city_minute_total_w {
        min-width: 18rem;
    }

    .city_total_min_title {
        font-size: 1.2em;
        max-width: 19rem;
    }

    .city_total_min_title2 {
        font-size: 1em;
    }

    .city_minute_extra_text {
        max-width: 20rem;
    }

    .city_desc {
        font-size: 80%;
    }

    #nav_list_icon_img {
        fill: #000;
    }

    .bg_city {
        background-attachment: scroll;
    }

    .city_minute_bg {
        background-attachment: scroll;
        background-position: center;
        padding: 4em 5% 2em 5%;
        /*
        background-position-x: -15em;
            */
    }

    .city_join_p_btn {
        font-size: 1em;
        padding: 0.8em 1.5em !important;
    }
}

@media screen and (max-width: 24em) {
    .nav_login SVG, .nav_contact SVG, .nav_linkedin SVG, .nav_list_icon_img_a SVG {
        width: 1.5rem;
        height: 1.5rem;
    }
}
.bg_game {
    background: url(/content/images/fitness_game_bg1.png);
    padding: 2em 5% 2em 5%;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    background-color: #FFD300;
    text-align: center;
}

.game_about_bg {
    background: url(/Content/Images/GameImages/fitness_game_people.svg);
    padding: 2em 5% 20em 5%;
    background-size: 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    position: relative;
    background-color: #FFD300;
    text-align: center;
}

.h2title2 {
    color: #333;
    font-family: 'Oswald';
    margin: 0.5em auto 0.5em auto;
    padding: 0;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
}

.lets_play_btn {
    font-size: 2em;
    padding: 0.6em 3em;
    font-family: Oswald;
    background-color: #00df70;
    border-color: #00df70;
}

.circ_day {
    font-size: 0.9rem !important;
    font-style: normal;
    text-align: center;
    color: black;
}

.circ_dayofweek {
    font-size: 0.7rem !important;
    font-style: normal;
    text-align: center;
    line-height: 110%;
    color: black;
}

.dayCirc {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.dayCircBtn {
    text-align: center;
    position: relative;
    outline: none;
    -webkit-appearance: none !important;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0.5%;
}

.streak_bg1 {
    background-image: url('/Content/Images/GameImages/streak_bg1.jpg');
    background-color: #CC4700;
}

.streak_bg2 {
    background-image: url('/Content/Images/GameImages/streak_bg1.jpg');
    background-color: #B43A97;
}

.streak_bg3 {
    background-image: url('/Content/Images/GameImages/streak_bg1.jpg');
    background-color: #008484;
}

.streak_bg4 {
    background-image: url('/Content/Images/GameImages/streak_bg1.jpg');
    background-color: #007FC4;
}

.streak_bg {
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 1em;
    padding: 2.5em 1em;
    width: auto;
}

.current_streak_title {
    color: white;
    color: #ad2921;
    margin-bottom: 0.3rem;
    font-weight: bold;
    font-size: 1.2em;
    margin-left: auto;
    margin-right: auto;
}

.current_streak_title2 {
    color: white;
    color: #ad2921;
}

.current_streak_day {
    font-size: 5em;
    line-height: 105%;
    color: white;
    font-family: Oswald;
    display: block;
    text-shadow: 0 1px 0px #EB5A00, 1px 0 0px #EB5A00, 1px 2px 1px #EB5A00, 2px 1px 1px #EB5A00, 2px 3px 2px #EB5A00, 3px 2px 2px #EB5A00, 3px 4px 2px #EB5A00, 4px 3px 3px #EB5A00, 4px 5px 3px #EB5A00, 5px 4px 2px #EB5A00, 5px 6px 2px #EB5A00, 6px 5px 2px #EB5A00, 6px 7px 1px #EB5A00, 7px 6px 1px #EB5A00, 7px 8px 0px #EB5A00, 8px 7px 0px #EB5A00;
}

.current_streak_days {
    font-size: 1em;
    color: white;
    text-shadow: 0 1px 0px #EB5A00, 1px 0 0px #EB5A00, 1px 2px 1px #EB5A00, 2px 1px 1px #EB5A00, 2px 3px 2px #EB5A00, 3px 2px 2px #EB5A00, 3px 4px 2px #EB5A00, 4px 3px 3px #EB5A00, 4px 5px 3px #EB5A00, 5px 4px 2px #EB5A00, 5px 6px 2px #EB5A00, 6px 5px 2px #EB5A00, 6px 7px 1px #EB5A00, 7px 6px 1px #EB5A00, 7px 8px 0px #EB5A00, 8px 7px 0px #EB5A00;
    letter-spacing: 0.1em;
    font-weight: 900;
    text-transform: uppercase;
}

.carousel_streak .slick-dots li button:before {
    font-size: 40px;
}

.carousel_streak .slick-prev:before, .carousel_streak .slick-next:before {
    color: #fff;
}

.carousel_streak .slick-prev:before, .carousel_streak .slick-next:before {
    line-height: 1rem;
}

.carousel_streak .slick-prev, .carousel_streak .slick-next {
    position: absolute;
    z-index: 100;
    top: 48%;
    margin-top: -0.4rem;
    color: white;
}

.carousel_streak .slick-prev {
    left: 1rem;
}

.carousel_streak .slick-next {
    right: 1rem;
}

.game_trophy {
    width: 100%;
}

.game_trophy_title {
    font-size: 1.4em;
    font-family: Oswald;
}

.city_bg {
    width: 100%;
    min-height: 20em;
    background-size: cover;
    background-position: center;
}

.Activity {
    transition: background-color 0.2s linear, box-shadow 0.2s linear;
    position: relative;
    background-color: white;
}

    .Activity:last-of-type {
        border-bottom: 0 !important;
    }

.GlowSuccess {
    background-color: #CCFFDD;
    box-shadow: 0 0 0.5em lightgreen;
    position: relative;
}

.GlowDanger {
    background-color: #FFDDDD;
    box-shadow: 0 0 0.5em #B71C1C;
    position: relative;
}

.game_top_btn_w {
    text-align: right;
    display: flex;
    flex-direction: column;
    /*
    position: absolute;
    top: 2rem;
    right: 4%;
        */
    z-index: 11;
}

.game_top_btn {
    /*
    color: #fff;
    padding: 0.5em 0 !important;
        */
    padding: 0.4em 1em !important;
    margin: 0.1em 0 !important;
    font-size: inherit !important;
    vertical-align: baseline !important;
    font-size: 0.875em !important;
}

.ActivityEdit, .ActivityDelete {
    color: #333;
    border: 0 !important;
}

.Add_Minutes {
    font-size: 2.2em;
    padding-top: 0.7em;
    padding-bottom: 0.8em;
    font-family: Oswald;
    line-height: 100%;
    /*
    text-shadow: 1em 1em 0em #007fc4;
   text-shadow: -3px 3px 0px #00CCFF, -6px 6px 0px #007fc4, -9px 9px 0px #006DA8;
*/
    text-shadow: 0 1px 0px #007FC4, 1px 0 0px #007FC4, 1px 2px 1px #007FC4, 2px 1px 1px #007FC4, 2px 3px 2px #007FC4, 3px 2px 2px #007FC4, 3px 4px 2px #007FC4, 4px 3px 3px #007FC4, 4px 5px 3px #007FC4, 5px 4px 2px #007FC4, 5px 6px 2px #007FC4, 6px 5px 2px #007FC4, 6px 7px 1px #007FC4, 7px 6px 1px #007FC4, 7px 8px 0px #007FC4, 8px 7px 0px #007FC4;
    position: relative;
}

    .Add_Minutes:after {
        content: "";
    }

#fave2 {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    padding-top: 20%;
    box-sizing: border-box;
}

.pow {
    width: 1.5em;
    position: absolute;
    left: 1em;
    top: 0.5em;
    z-index: 2;
    display: none;
}

.wow {
    width: 25%;
    position: absolute;
    z-index: 0;
    right: 37.5%;
    top: 6em;
    display: none;
}

.zap {
    width: 4em;
    position: absolute;
    left: 0em;
    top: -0.4em;
    z-index: 12;
    display: none;
}

.oops {
    width: 6em;
    position: absolute;
    left: -6em;
    top: -1em;
    z-index: 2;
}

.main_game {
    z-index: 11;
}

#CustomNumberAlert {
    margin-left: 6em !important;
}

.custom_input3 {
    font-size: 1.6em;
    padding: 0.8rem 1rem;
    line-height: 1.2;
    box-shadow: 0 0 0.5em #C8E9FB;
}

.game_title {
    font-weight: 900;
    text-transform: uppercase;
    font-size: 3.5em;
    text-shadow: 0 1px 0px #EB5A00, 1px 0 0px #EB5A00, 1px 2px 1px #EB5A00, 2px 1px 1px #EB5A00, 2px 3px 2px #EB5A00, 3px 2px 2px #EB5A00, 3px 4px 2px #EB5A00, 4px 3px 3px #EB5A00, 4px 5px 3px #EB5A00, 5px 4px 2px #EB5A00, 5px 6px 2px #EB5A00, 6px 5px 2px #EB5A00, 6px 7px 1px #EB5A00, 7px 6px 1px #EB5A00, 7px 8px 0px #EB5A00, 8px 7px 0px #EB5A00;
    z-index: 10;
    position: relative;
}

.game_title2 {
    font-weight: 900;
    font-size: 1.5em;
    text-shadow: 0 1px 0px #EB5A00, 1px 0 0px #EB5A00, 1px 2px 1px #EB5A00, 2px 1px 1px #EB5A00, 2px 3px 2px #EB5A00, 3px 2px 2px #EB5A00, 3px 4px 2px #EB5A00, 4px 3px 3px #EB5A00, 4px 5px 3px #EB5A00, 5px 4px 2px #EB5A00, 5px 6px 2px #EB5A00, 6px 5px 2px #EB5A00, 6px 7px 1px #EB5A00, 7px 6px 1px #EB5A00, 7px 8px 0px #EB5A00, 8px 7px 0px #EB5A00;
    z-index: 10;
    position: relative;
}

.game_activity {
    overflow-wrap: break-word;
}

.section1 {
    position: relative;
}

.daily_goal2 {
}

.daily_goal_bg {
    z-index: 2;
    border-radius: 1em;
    background-color: #F6BB05;
    padding: 1em;
    width: auto;
    text-align: center;
    color: #ad2921;
}

.daily_goal_num {
    font-size: 3.5em;
    font-weight: 900;
    line-height: 100%;
    color: white;
    text-shadow: 0 1px 0px #EB5A00, 1px 0 0px #EB5A00, 1px 2px 1px #EB5A00, 2px 1px 1px #EB5A00, 2px 3px 2px #EB5A00, 3px 2px 2px #EB5A00, 3px 4px 2px #EB5A00, 4px 3px 3px #EB5A00, 4px 5px 3px #EB5A00, 5px 4px 2px #EB5A00, 5px 6px 2px #EB5A00, 6px 5px 2px #EB5A00, 6px 7px 1px #EB5A00, 7px 6px 1px #EB5A00, 7px 8px 0px #EB5A00, 8px 7px 0px #EB5A00;
    margin-bottom: 0.1em;
}

.game_welcome {
    padding: 1em;
    background-color: #FFD001;
    /*
    background-color: #FED823;
        */
    border-radius: 1em;
    font-size: 1em;
}

.c100.MinutesCirc {
    z-index: 5;
    position: relative;
}

.circ_desc {
    font-size: 0.05em !important;
    position: absolute !important;
    bottom: 3.5em !important;
    left: 50% !important;
    margin-left: -3em;
    width: 6em;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center !important;
    font-style: normal;
    display: block !important;
    color: #333;
    z-index: 4;
}

.p100 .circ_desc {
    color: #333;
}

.fave2_holder {
    position: relative;
    text-align: left;
    z-index: 5;
}

#Filter label {
    margin-bottom: .2rem;
}

.c100.dayCirc {
    font-size: 3.8em;
}

#ChangeDate {
    visibility: hidden !important;
}

.btn-trophy {
    max-width: 100% !important;
}

@media (hover: hover) {
    .game_top_btn:hover {
        color: #fff !important;
        opacity: .8;
    }

    .ActivityEdit:hover, .ActivityDelete:hover {
        color: #22a7ee !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}

@media screen and (max-width: 75em) {
    /*xl 1200px breakpoint*/
    .c100.MinutesCirc {
        font-size: 15em;
    }

    .c100.dayCirc {
        font-size: 3em;
    }
}

@media screen and (max-width: 62em) {
    /*lg 992px breakpoint*/

    .c100.dayCirc {
        font-size: 4em;
    }
}

@media screen and (max-width: 48em) {
    /*md 768px breakpoint*/

    .c100.MinutesCirc {
        font-size: 14em;
    }

    .game_actions {
        display: flex;
        flex-wrap: nowrap;
    }

    .ActivityEdit, .ActivityDelete {
        padding: 0.5em 0.5em !important;
    }

    .ActivityEdit {
        align-self: center;
        margin-right: auto;
        margin-left: auto;
    }

    .ActivityDelete {
        align-self: flex-end;
        margin-right: 0.5em;
        margin-left: auto;
    }

    .zap {
        width: 2em;
        top: 0.2em;
        left: 0.5em;
    }

    .custom_input3 {
        font-size: 1.4em;
        box-shadow: none;
        padding: 0.6rem 0.8rem;
    }

    .c100.dayCirc {
        font-size: 4em;
    }
}

@media screen and (max-width: 46em) {
    .fave2_holder {
        top: -16.5em;
        left: 0.75em;
        height: 8em;
        width: 50%;
    }

    .c100.MinutesCirc {
        font-size: 12em;
    }

    .game_welcome {
        display: none;
    }

    .weekly_goal {
        display: none !important;
    }
}

@media screen and (max-width: 36em) {
    /*sm 576px breakpoint*/
    .fave2_holder {
        top: -13.5em;
        left: 0.75em;
        height: 0.4em;
        width: 53%;
    }

    .custom_input3 {
        font-size: 1em;
        box-shadow: none;
        padding: 0.6rem 0.8rem;
    }

    .ActivityEdit {
        align-self: flex-start;
        margin-right: auto;
        margin-left: 0;
    }

    .Add_Minutes {
        font-size: 1.5em;
    }

    .game_title {
        font-size: 1.5em;
    }

    .game_title2 {
        font-size: 0.9em;
    }

    .bg_game {
        padding: 1em 5% 4em 5%;
    }

    .daily_goal2 {
        position: relative;
        top: 1em;
        font-size: 0.7em;
        padding: 1em 0.2em;
    }

    .daily_goal_bg {
        position: relative;
        top: 0.8em;
    }

    .daily_goal_num {
        font-size: 3em;
    }

    .game_top_btn_w {
        display: flex;
        flex-wrap: nowrap;
        align-content: flex-end;
        position: absolute;
        top: -5em;
        right: 0em;
        flex-direction: row;
    }

    .game_top_btn {
        padding: 0.2em 0.5em !important;
        font-size: 1em !important;
        margin-left: auto !important;
        margin-right: 0.1em !important;
    }

    .c100.MinutesCirc {
        font-size: 8em;
    }

    .c100.dayCirc {
        font-size: 2.6em;
    }

    .circ_dayofweek {
        font-size: 0.6rem !important;
    }

    .game_activity {
        font-size: 0.9em;
    }

    .current_streak_title {
        font-size: 1em;
    }

    .current_streak_day {
        font-size: 4em;
    }

    .lets_play_btn {
        font-size: 1.2em;
    }

    .game_about_bg {
        padding: 1em 5% 8em 5%;
        margin-bottom: 14em !important;
    }

    .circ_desc {
        font-size: 0.06em !important;
        bottom: 2.6em !important;
        line-height: 110%;
    }

    .circ_day {
        color: black !important;
    }

    .circ_dayofweek {
        color: black !important;
    }
}
SUP {
    top: 0em;
    font-size: 60%;
    line-height: 0;
    vertical-align: super;
}

h1 sup {
    top: 0.2em;
}

H2.title4 {
    color: #333;
    font-family: 'Oswald';
    font-size: 2em;
    margin: .5em auto 1em auto;
    padding: 0;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
}

H2.title3 {
    color: #333;
    font-family: 'Oswald';
    font-size: 1.6em;
    margin: 1em auto 1em auto;
    padding: 0;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
}

.empower_bg1 {
    background: url(/content/images/empower3_bg1.jpg);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    background-color: #f5f5fe;
    text-align: center;
}

.empower_bg2 {
}

.empower_bg3 {
    background-color: #3472BC;
    background-color: #0D1930;
    padding: 2em 5%;
    position: relative;
}

.empower_bg4 {
    background-color: #f4f5f7;
    padding: 2em 5%;
    position: relative;
}

.border1 {
    border: 0.0625rem solid rgba(0,0,0,0.1);
    border-radius: 0.5em;
    transition: all 0.5s;
}

.hours_table td {
    padding-bottom: 0.3em;
}

.benefits_ul li {
    padding-bottom: 0.4em;
}

.today {
    font-weight: 600;
}

.empower3_logo_top {
    margin-left: 1em;
    float: right;
}

.empower3_logo_top2 {
}

.empower3_logo {
    /*
        position: absolute;
        right: 5%;
        top: 2em;

        */
    float: right;
    margin-bottom: 1em;
}

.icons2_w {
    display: inline-block;
    width: 100%;
    /*
    width: 14%;
    margin-left: 1%;
    margin-right: 1%;
        */
    text-align: center;
    color: #fff;
    vertical-align: top;
    margin-bottom: 1em;
}

.icon2_pic {
    width: 55%;
    margin: 0 auto;
    border: 0;
}

.iconh2_pic {
    width: 3rem;
    margin: -0.3em 0.2em auto 0;
    border: 0;
    display: inline-block;
}

.icon2_p {
    font-size: 1rem;
    display: block;
    margin: 1em auto;
    font-weight: 700;
    line-height: 115%;
    width: 80%;
}

.icons2_a {
    display: block;
    color: #fff;
    padding: 0;
    width: 100%;
    outline: none;
    background-color: transparent;
    border: 0;
    outline: none !important;
}

.anchor {
    display: block;
    position: relative;
    top: -100px;
    visibility: hidden;
}

.bio_pic_w {
    text-align: center;
    padding: 1em 2.5em;
    flex: 1;
    margin: 0 auto auto auto;
}

.bio_pic {
    margin: 0 auto 1em auto;
    background-size: cover;
    width: 10em;
    height: 10em;
    border-radius: 10em;
    flex-shrink: 0;
}

.bio_p {
    font-weight: 700;
    display: inline-block;
}

.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

    .map-responsive iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }

/* Style the buttons that are used to open and close the accordion panel */
.accordion2_w {
    padding-top: 0.4em;
    background-color: #f4f5f7;
    padding: 0;
}

.accordion2 {
    background-color: #fff;
    color: #333;
    cursor: pointer;
    padding: 1em;
    width: 100%;
    text-align: left;
    border: none;
    outline: none !important;
    transition: 0.4s;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1em;
    border-radius: 4em;
    margin: 0.1em 0 0.1em 0;
    line-height: 110%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.1);
}

    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .active, .accordion2:hover {
        background-color: #Fff;
    }

/* Style the accordion panel. Note: hidden by default */
.acc_panel2 {
    padding: 0em 0;
    box-sizing: border-box;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    font-size: 1em;
    transition: max-height 0.2s ease-out;
    text-align: left;
}

.accordion2:after {
    content: "\2212"; /* Unicode character for "minus" sign (-) */
    font-family: "Font Awesome 5 Free";
    content: "\f078";
    color: grey;
    font-weight: 900; /*need this for regular icon set*/
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-size: 1.2em;
    line-height: 100%;
    color: #777;
    margin-top: 0.1em;
    margin-left: auto;
    margin-right: 0;
    transform: rotate(180deg);
    transition: transform 0.2s linear;
    display: inline-block;
}

.accordion2.collapsed:after {
    content: '\f078'; /* chevron down */
    font-size: 1.2em;
    line-height: 100%;
    color: #777;
    margin-right: 0;
    margin-left: auto;
    transform: rotate(0deg);
}

.accordion2.active:after {
    transform: rotate(180deg);
    content: "\f078"; /* chevron down rotated, \f077 is the chevron up*/
}

.panel_text2 {
    box-sizing: border-box;
    padding: 1em 2%;
    margin: 0 0.5em;
    background-color: white;
    border-radius: 0.5em;
}

@media (hover: hover) {
    /*hovers only*/
    H1.articleTitle A:hover {
        color: #22a7ee;
        font-weight: 700;
        text-decoration: none;
    }

    .border1:hover {
        background-color: white;
        box-shadow: 0 0 2em rgba(0,0,0,0.1);
    }

    .icons2_a:hover {
        color: #f5f5fe;
    }

    .accordion2:hover {
        background-color: #22a7ee;
        color: #fff;
        border: 1px solid rgba(0,0,0,0.1);
    }

        .accordion2:hover:after {
            color: #fff;
        }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    .empower_bg1 {
        background-position-x: -6em;
        background-size: 120%;
    }

    .empower3_logo_top2 {
        width: 12em;
    }

    .empower3_logo {
        width: 11em;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) and (orientation : portrait) {
    .empower_bg1 {
        background-position-x: -10em;
        background-size: 130%;
    }
}

@media screen and (max-width: 80em) {
    .bio_pic {
        width: 8em;
        height: 8em;
        border-radius: 8em;
    }

    H2.title4 {
        font-size: 1.6em;
    }
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 46em) {
    /*mobile fixes & ipad narrow*/

    H2.title4 {
        font-size: 1.4em;
    }

    H2.title3 {
        font-size: 1.1em;
    }

    H3.h3title2 {
        font-size: 1.3em;
    }

    .empower_bg1 {
        padding: 1em 5%;
    }

    .empower_bg2 {
        padding: 1em 5% 0em 5%;
    }

    .empower_bg3 {
        padding: 1em 5% 2em 5%;
    }

    .empower_bg4 {
        padding: 1em 5% 2em 5%;
    }

    .icons2_w {
        display: inline-block;
        width: 30%;
        margin-right: 1%;
        margin-left: 1%;
        text-align: center;
        color: #333;
        vertical-align: top;
    }

    .icon2_p {
        font-size: 0.8em;
        margin: 0.5em auto 0 auto;
        width: 100%;
    }

    .iconh2_pic {
        width: 2rem;
    }

    .bio_pic_w {
        max-width: 50%;
        padding: 0.5em;
    }

    .bio_pic {
        margin: 1em auto 0 auto;
        width: 5em;
        height: 5em;
        border-radius: 5em;
        z-index: 2;
        position: relative;
    }

    .bio_p {
        font-size: 0.8em;
    }
}

@media screen and (min-width:34em) and (max-width: 46em) {
}

@media screen and (max-width: 34em) {
    .btn-text {
        color: #007fc4 !important;
    }
    /* .empower_bg1 {
            background-size: 100%;
            background-repeat: no-repeat;
        }

        .mobile_br {
            display: block;
        }

        */
    .empower_bg1 {
        background-size: cover;
    }

    .empower3_logo_top {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2em;
        max-width: 60%;
        float: none;
        display: none;
    }

    .empower3_logo {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2em;
        max-width: 60%;
        float: none;
        display: block;
    }

    .anchor {
        display: block;
        position: relative;
        top: -80px;
        visibility: hidden;
    }
}
/*bootstrap hacks*/
.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.text-ccc {
    color: #ccc !important;
}

.flex-break-row {
    flex: 0 0 100%;
}

@media (max-width: 36em) {
    .flex-break-row-mobile {
        flex: 0 0 100%;
    }

    .bg-white-mobile {
        background-color: white !important;
    }
}

.text-warning2 {
    color: #FF7B08 !important;
}

.flex-break {
    flex-basis: 100%;
    height: 0;
}

.btn-circle {
    padding: 0.5em 1em;
}

.vertical-align-center, .vertical-align-middle {
    vertical-align: middle;
}

.bg-f4f5f7 {
    background-color: #f4f5f7;
}

.rounded-lg {
    border-radius: 0.8rem !important;
}

.border-dotted {
    border-style: dotted;
}

.font-weight-900, .fw900 {
    font-weight: 900;
}

.font-weight-700, .fw700 {
    font-weight: 700;
}

.font-weight-600, .fw600 {
    font-weight: 600;
}

.font-weight-400, .fw400 {
    font-weight: 400;
}

.font-weight-500, .fw500 {
    font-weight: 500;
}

.font-weight-300, .fw300 {
    font-weight: 300;
}

.underline {
    text-decoration: underline;
}

.vertical-align-top {
    vertical-align: top;
}

.oswald {
    font-family: Oswald;
    font-weight: 500;
}

.fs28 {
    font-size: 2.8em;
}

.fs24 {
    font-size: 2.4em;
}

.fs20 {
    font-size: 2.0em;
}

.fs18 {
    font-size: 1.8em;
}

.fs16 {
    font-size: 1.6em;
}

.fs15 {
    font-size: 1.5em;
}

.fs14 {
    font-size: 1.4em;
}

.fs13 {
    font-size: 1.3em;
}

.fs12 {
    font-size: 1.2em;
}

.fs11 {
    font-size: 1.1em;
}

.fs1 {
    font-size: 1em;
}

.fs095 {
    font-size: 0.95em;
}

.fs09 {
    font-size: 0.9em;
}

.fs085 {
    font-size: 0.85em;
}

.fs08 {
    font-size: 0.8em;
}

.fs075 {
    font-size: 0.75em;
}

.fs07 {
    font-size: 0.7em;
}

.fs065 {
    font-size: 0.65em;
}

.fs06 {
    font-size: 0.6em;
}

.lh100 {
    line-height: 100%;
}

.lh110 {
    line-height: 110%;
}

.lh120 {
    line-height: 120%;
}

.lh130 {
    line-height: 130%;
}

.lh150 {
    line-height: 150%;
}

.close_thin {
    font-size: 1.4rem;
    font-weight: 300;
    color: #333;
}

.modal-header {
    border-bottom: 0;
}

.modal-footer {
    border-top: 0;
}

.modal-header .close {
    font-weight: 400;
}

.btn-wrap {
    white-space: normal;
}

.btn-link {
    border: 0;
}

.btn-blank {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    font-weight: normal !important;
}

.btn-blank2 {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.line-height-normal {
    line-height: 120%;
}

.text-primary-dark, .text-primary-dark a {
    color: #114F99;
}

.text-999 {
    color: #999;
}

.opacity5 {
    opacity: 0.5;
}

.opacity8 {
    opacity: 0.8;
}

.btn-text-link {
    color: #006da8;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    /*font-size: inherit !important;*/
    font-weight: inherit !important;
    vertical-align: baseline !important;
    background-color: transparent !important;
}

.btn-text-link2 {
    color: #006da8;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: baseline !important;
}

.btn-text-link3 {
    color: #006da8;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: baseline !important;
}

.btn-text {
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    vertical-align: baseline !important;
}

.btn-text-white {
    color: white !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    vertical-align: baseline !important;
}

.btn-text-black {
    color: black !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    vertical-align: baseline !important;
}

.text-success2 {
    color: #00df70 !important;
}

.btn-success2 {
    color: #fff;
    background-color: #00df70 !important;
    border-color: #00C161;
}

/*
 .btn-success2:not(:disabled):not(.disabled):active, .btn-success2:not(:disabled):not(.disabled).active, .show > .btn-success2.dropdown-toggle {
    color: #fff;
    background-color: #00df70;
    border-color: #00C161;
}
*/
.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-wrap {
    white-space: normal;
}

.badge {
    min-width: 1.5em;
}

.min_page_height {
    min-height: 40em;
}

.w-10 {
    width: 10%;
}

.w-20 {
    width: 20%;
}

.w-33 {
    width: 33.3333333%;
}

.mx-negative {
    margin-left: -15px !important;
    margin-right: -15px !important;
}

@media screen and (max-width: 34em) {
    .mobile-mx-negative {
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
}

@media (hover: hover) {
    .btn-text:hover {
        color: #22a7ee !important;
    }
}
/*SPINNER*/
.spinner_w {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5000;
    text-align: center;
}

.spinner_w2 {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    z-index: 5000;
    text-align: center;
}

.spinner_center {
    margin: auto;
}

.spinner {
    -webkit-animation: rotator 1.4s linear infinite;
    animation: rotator 1.4s linear infinite;
}

@-webkit-keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

@keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

.path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
    animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@-webkit-keyframes colors {
    0% {
        stroke: #4285F4;
    }

    25% {
        stroke: #DE3E35;
    }

    50% {
        stroke: #F7C223;
    }

    75% {
        stroke: #1B9A59;
    }

    100% {
        stroke: #4285F4;
    }
}

@keyframes colors {
    0% {
        stroke: #4285F4;
    }

    25% {
        stroke: #DE3E35;
    }

    50% {
        stroke: #F7C223;
    }

    75% {
        stroke: #1B9A59;
    }

    100% {
        stroke: #4285F4;
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}

@media screen and (min-width: 46em) {
    .modal-body, .modal-footer, .modal-header {
        padding: 1em 2em;
    }

    .modal-header {
        padding-top: 2em;
    }

    .modal-footer {
        padding-bottom: 2em;
    }

    .modal-title {
        font-weight: 400;
        font-size: 1.6em;
        line-height: 110%;
    }
}

#ProfileTabs .nav-link {
    color: white;
    border-bottom-width: 0.3em;
    color: rgba(255,255,255,0.8);
}

    #ProfileTabs .nav-link:hover {
        border-color: rgba(255,255,255,0);
        background-color: rgba(0,0,0,0.1);
        color: rgba(255,255,255,1);
    }

    #ProfileTabs .nav-link.active {
        background-color: rgba(255,255,255,0);
        border-color: rgba(255,255,255,0);
        color: rgba(255,255,255,1);
        border-bottom: 0.3em solid #FF9900;
    }

@media screen and (max-width: 34em) {
    /*mobile fixes*/
    .mobile-mx-negative-pw {
        margin-left: -5% !important;
        margin-right: -5% !important;
    }

    #ProfileTabs .nav-link .h5 {
        font-size: 1em;
    }

    .btn-block-mobile {
        display: block;
        padding-right: 0;
        padding-left: 0;
        margin-left: 0;
        margin-right: 0;
        text-align: center;
        width: 100%;
    }
}

.h2title {
    color: #333;
    font-family: 'Oswald';
    font-size: 1.3em;
    margin: 0.5em auto 0.5em auto;
    padding: 0;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
}

.h3title {
    color: #777;
    font-size: 0.85em;
    letter-spacing: 0.05em;
    /*
    margin: 0.5em auto 0.5em auto;
    padding: 0;
        text-align: center;
        */
    font-weight: 700;
    text-transform: uppercase;
}

.round-arrow-btn i {
    padding-left: 0.1em;
    padding-right: 0.1em;
}

.btn { /*border-radius:3em;*/
    font-weight: 600;
}

.round {
    border-radius: 3em;
}

.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}

.shadow {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

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

.bootbox-close-button {
    margin-top: 0 !important;
}
/*for datepicker*/
@font-face {
    font-family: 'gijgo-material';
    src: url('/Content/font/gijgo-material.ttf');
}
/*toggle on and off buttons*/
.toggle.ios, .toggle-on.ios, .toggle-off.ios {
    border-radius: 3em;
}

    .toggle.ios .toggle-handle {
        border-radius: 1.5rem;
        width: 2.5rem;
        background-color: white;
        box-shadow: 0 0 0.5em rgba(0,0,0,0.2), inset -0.3em -0.3em 0.5em rgba(0,0,0,0.1);
    }
/* hide the select2 box initial to prevent flicker*/
.js-example-responsive {
    visibility: hidden;
}
/*select2 dropdown in navigation*/
.nav_client_w .select2-container--default .select2-selection--single .select2-selection__rendered {
    background-color: #007fc4;
    color: white;
    /*
    background-color: #BDEFFD;
    color: black;
        */
    border-radius: 3px;
    font-weight: 600;
}

.nav_client_w .select2-selection__rendered {
    line-height: 44px !important;
}

.nav_client_w .select2-container .select2-selection--single {
    height: 45px !important;
}

.nav_client_w .select2-selection__arrow {
    height: 44px !important;
}

.nav_client_w .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #fff transparent transparent transparent;
    /*border-color: #000 transparent transparent transparent;*/
}

.nav_client_w .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #fff transparent;
    /* border-color: transparent transparent #000 transparent;*/
}

.nav_client_w .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgba(255,255,255,0.8);
    /*
    color: rgba(0,0,0,0.8);
        */
    font-weight: 400;
}

.nav_client_w .select2-container--default .select2-selection--single {
    background-color: transparent;
    border: 1px solid rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0);
}

.border-radius-1 {
    border-radius: 0.4em;
}

.border-radius-2 {
    border-radius: 0.8em;
}

.border-radius-3 {
    border-radius: 1em;
}

.border-radius-4 {
    border-radius: 1.5em;
}

.border-radius-5 {
    border-radius: 2em;
}
/*cards as buttons*/
.card100 {
    height: 100%;
}

a.card {
    color: inherit;
    text-decoration: inherit;
    height: 100%;
}

    a.card button {
        z-index: 1;
    }

    a.card.disabled,
    a.card[disabled] {
        pointer-events: none;
        opacity: .8;
    }
/*change carousel buttons to black*/
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
/*change main color temporarily until we can use SASS
.text-primary {
    color: #22a7ee !important;
}
*/
/* arrows for nav accorion*/
.accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: "Font Awesome 5 Free";
    content: "\f106";
    float: right;
    color: rgba(0,0,0,0.4);
    font-weight: 900; /*need this for regular icon set*/
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    right: 0.8em;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    /*
    content:"";
    background-image:url(/content/images/ic_keyboard_arrow_up_black_48px.svg);
    background-size:1.5em;
    height:1.5em;
    width:1.5em;
    */
}

.accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f107";
    /*transform: rotate(180deg);*/
}
/* arrows for nav accorion*/
.accordion-toggle2 {
    color: black !important;
    text-decoration: none !important;
}

    .accordion-toggle2:before {
        /* symbol for "opening" panels */
        font-family: "Font Awesome 5 Free";
        content: "\f106";
        float: left;
        color: grey;
        font-weight: 900; /*need this for regular icon set*/
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        position: absolute;
        left: 0.8em;
        display: block;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .accordion-toggle2.collapsed:before {
        /* symbol for "collapsed" panels */
        content: "\f107";
    }

@media (min-width: 768px) {
    .modal-cf-lg {
        max-width: 750px;
    }
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .accordion-toggle2:after {
        /* symbol for "opening" panels */
        content: "CLICK TO SEE LESS";
        float: left;
        color: grey;
        font-size: 0.8em;
        font-weight: 400; /*need this for regular icon set*/
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        position: absolute;
        right: 1.5em;
        display: block;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .accordion-toggle2.collapsed:after {
        /* symbol for "collapsed" panels */
        content: "CLICK TO SEE MORE";
    }

    .modal-track-lg {
        max-width: 650px;
    }

    .modal-recipe-lg {
        max-width: 900px;
    }

    .modal-info-xl {
        max-width: 900px;
    }
}

/* xl devices (desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .modal-recipe-lg {
        max-width: 1000px;
    }

    .modal-info-xl {
        max-width: 1100px;
    }
}
/*larger checkbox*/
.custom-control-lg .custom-control-label::before,
.custom-control-lg .custom-control-label::after {
    top: 0rem !important;
    left: -1rem !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
}

.custom-control-lg .custom-control-label {
    margin-left: 1rem !important;
    font-size: 1rem !important;
}
/*block buttons for smaller screens*/
@media(max-width: 768px) {
    button.full-width {
        width: 100%;
    }
}

.header_i {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

.header_link {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.3rem;
}

.text-nowrap {
    white-space: nowrap;
}

.text-wrap {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.a-nostyle A {
    color: black;
    text-decoration: none;
}

    .a-nostyle A:hover, .a-nostyle A:focus {
        color: inherit;
        text-decoration: none;
    }

a.bg-light:focus, a.bg-light:hover, button.bg-light:focus, button.bg-light:hover {
    background-color: #f8f9fa !important;
}
/*
@media (max-width: 768px) {
    .mobile-session-status {
        position: absolute;
        top: 0.5em;
        right: 1em;
        padding-right: 0;
    }
}*/
/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) {
    H1, .h1 {
        font-size: 1.4em;
    }

    .card-text.h2 {
        font-size: 1.6em;
    }

    H5 {
        font-size: 1.1em;
    }

    .card-text.h4 {
        font-size: 1.2em;
    }

    .fa-3x {
        font-size: 2.2em;
    }

    .mobile-nav-tabs {
        font-size: 0.9em;
    }

    h4.card-title {
        margin: 0;
        font-size: 1rem;
        color: #333 !important;
    }

    a.accordion-toggle {
        color: inherit;
    }

    .card-header {
        padding: 0.5em 1em;
    }
}

.btn-link:focus, .btn-link.focus {
    color: #22a7ee;
}

@media (hover: hover) {
    /*hovers only*/
    .btn-link:hover {
        text-decoration: none;
    }

    a:hover {
        text-decoration: none !important;
    }
}
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
}
/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .btn-xl-lg {
        font-size: 1.1em !important;
    }
}

@media screen and (max-width: 63em) {
    /*just under the width of ipad*/

    .h2title {
        font-size: 1.2em;
        text-align: center;
        margin: 0 auto .5em auto;
    }
}

@media screen and (max-width: 38em) {
    .gj-datepicker .form-control:disabled, .gj-datepicker .form-control[readonly] {
        background-color: #FFF !important;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/

    .select_mobile_custom {
        position: relative;
    }

        .select_mobile_custom select {
            background: white;
            border: 1px solid #ccc;
            border-radius: 5px;
            color: inherit;
            -webkit-appearance: none;
        }

        .select_mobile_custom::after {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f0d7";
            color: #999;
            position: absolute;
            right: 1em;
            top: 0.8em;
            pointer-events: none;
            z-index: 1;
        }

    .gj-datepicker-bootstrap [role="separator"] button .gj-icon, .gj-datepicker-bootstrap [role="separator"] button .material-icons {
        top: 0.5em !important;
    }
}

@media (min-width: 768px) {
    .col-md-20per {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media screen and (max-width: 48em) {
    .select_mobile_custom {
        position: relative;
    }

        .select_mobile_custom select {
            background: white;
            border: 1px solid #ccc;
            border-radius: 5px;
            color: inherit;
            -webkit-appearance: none;
        }

        .select_mobile_custom::after {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f0d7";
            color: #999;
            position: absolute;
            right: 1em;
            top: 0.6em;
            pointer-events: none;
            z-index: 1;
        }
}

@media screen and (max-width: 36em) {
    .mfs18 {
        font-size: 1.8em;
    }

    .mfs16 {
        font-size: 1.6em;
    }

    .mfs14 {
        font-size: 1.4em;
    }

    .mfs13 {
        font-size: 1.3em;
    }

    .mfs12 {
        font-size: 1.2em;
    }

    .mfs11 {
        font-size: 1.1em;
    }

    .mfs1 {
        font-size: 1em;
    }

    .mfs095 {
        font-size: 0.95em;
    }

    .mfs09 {
        font-size: 0.9em;
    }

    .mfs085 {
        font-size: 0.85em;
    }

    .mfs08 {
        font-size: 0.8em;
    }

    .mfs075 {
        font-size: 0.75em;
    }

    .mfs07 {
        font-size: 0.7em;
    }

    .mfs065 {
        font-size: 0.65em;
    }

    .mfs06 {
        font-size: 0.6em;
    }

    .mfs05 {
        font-size: 0.5em;
    }

    .mobile-border0 {
        border: 0;
        border-radius: 0;
    }

    .mobile-block {
        display: block;
    }
}
.sparkcoach_logo {
    width: 30em;
    max-width: 65%;
}

.sc_icon_w {
    width: 5em;
    min-width: 5em;
    margin-right: 0.4em;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.sc_answer_w {
    margin-left: 8em;
    margin-top: 1em;
    margin-bottom: 2em;
}

.sc_bubble .label {
    font-size: 1.2em;
}

.sc_bubble {
    border-radius: 1.4em;
    padding: 0.5em 1em;
    background-color: rgba(0,0,0,0.1);
    /*
    background-color: white;
    box-shadow: 0 0 1em rgba(0,0,0,0.1);
    border: 0.0625rem solid #f2f2f2;
        */
}

.sc_bubble1 .label {
    font-size: 1.2em;
}

.sc_bubble1 {
    border-radius: 1.4em;
    padding: 0.5em 1em;
    background-color: rgba(0,0,0,0.1);
    /*
    background-color: white;
    box-shadow: 0 0 1em rgba(0,0,0,0.1);
    border: 0.0625rem solid #f2f2f2;
        */
}

.sc_scale_bg {
    background-image: url('/Content/Images/SparkCoach/sparkcoach_scale2.svg');
    background-size: 100%;
    background-position: center;
    width: 20em;
    height: 20em;
    box-sizing: border-box;
    padding-top: 4.5em;
    text-align: center;
}

    .sc_scale_bg input {
        font-family: 'Oswald';
        font-weight: 500;
        padding: 0.01em 0.1em;
        font-size: 2em;
        text-align: center;
        width: 3em;
        box-shadow: 0.1em 0.1em 0.2em inset rgba(0,0,0,0.1);
    }

.sc_scale_bg2 {
    background-image: url('/Content/Images/SparkCoach/sparkcoach_scale_tools.svg');
    background-size: 100%;
    background-position: center;
    width: 20em;
    height: 219px;
    box-sizing: border-box;
    padding-top: 2.5em;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

    .sc_scale_bg2 input {
        font-family: 'Oswald';
        font-weight: 500;
        padding: 0.01em 0.1em;
        font-size: 2em;
        text-align: center;
        width: 3em;
        box-shadow: 0.1em 0.1em 0.2em inset rgba(0,0,0,0.1);
    }

.sc_target_bg {
    background-image: url('/Content/Images/SparkCoach/sparkcoach_goal_target.svg');
    background-size: 100%;
    background-position: center;
    width: 20em;
    height: 20em;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    z-index: 5;
}

.sc_target_goal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

.sc_target_bg input {
    font-family: 'Oswald';
    font-weight: 500;
    padding: 0.4em 0.1em;
    font-size: 1em;
    text-align: center;
    width: 90%;
}

.sc_target_btn_w {
    margin-top: -2em;
    margin-left: 1.4em;
    position: relative;
    z-index: 6;
}

.no_bullet {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

    .no_bullet li {
        padding-bottom: 1em;
    }

.arrow {
    width: 25%;
    position: absolute;
    z-index: 0;
    display: none;
}

.sc_time_bg {
    background-image: url('/Content/Images/SparkCoach/choose_time_v1.svg');
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    margin-top: 2em;
    margin-bottom: 1em;
    text-align: center;
    background-color: transparent;
    border-radius: 1em;
}

.TimePoints {
    margin-top: -3em;
}

.TimeBtnSpace {
    margin-top: 2.4em;
    margin-bottom: 2.4em;
}

.TimeBtn {
    border-radius: 5em;
    line-height: 100% !important;
    padding: 0.025em 0.125em !important;
    background-color: white !important;
}

.sc_highlight_bg {
    background-image: url('/Content/Images/SparkCoach/sparkcoach_highlight.svg');
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    width: 100%;
    height: 18em;
    padding-top: 3em;
    padding-bottom: 3em;
    text-align: center;
    background-color: #99FFCC;
    background-color: transparent;
    border-radius: 1em;
}

    .sc_highlight_bg textarea {
        font-family: 'Oswald';
        font-weight: 500;
        font-size: 1em;
        width: 70%;
        margin: auto;
        height: 8em;
        background-color: transparent;
        border: 0;
    }

        .sc_highlight_bg textarea:focus {
            background-color: transparent;
        }
/*radio buttons*/
input[type=radio].with-fontA {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

    input[type=radio].with-fontA + label:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 300;
        display: inline-block;
        content: "\f111";
        letter-spacing: 10px;
        font-size: 1.2em;
        color: #C4C4F7;
    }

    input[type=radio].with-fontA:checked + label:before {
        content: "\f00c";
        font-weight: 900;
        font-size: 1.2em;
        color: #00df70;
        letter-spacing: 10px;
        width: 35px 5px;
    }

    input[type=radio].with-fontA:focus + label:before {
        font-weight: bold;
        color: orange;
    }

@keyframes blink {
    0% {
        opacity: .2;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: .2;
    }
}

.saving span {
    font-size: 1em;
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    display: inline-block;
    margin: 0 0.1em;
}

    .saving span:nth-child(2) {
        animation-delay: .2s;
    }

    .saving span:nth-child(3) {
        animation-delay: .4s;
    }

.title_sc {
    text-align: left;
    font-weight: 600;
}

.rec_goals {
    border-radius: 0.8em;
    background-color: #A6FFFF;
    padding: 1em;
    text-align: center;
}

.fw400 {
    font-weight: 400;
}

.sc_icon {
    width: 4em;
    min-width: 4em;
    margin-left: 0;
}

.sc_icon_bg {
    border-radius: 0.6em;
    border: 0.0825em solid #f2f2f2;
    background-color: white;
    background-image: url('/Content/Images/SparkCoach/sparkcoach_frame0_bg.jpg');
    background-size: cover;
    background-position: right;
}

/*range input*/
input[type=range].slider_rg {
    -webkit-appearance: none;
    margin: 0.6em 0;
    width: 100%;
    background-color: transparent;
    border: 0 !important;
}

    input[type=range].slider_rg:focus {
        outline: none !important;
    }

    input[type=range].slider_rg::-webkit-slider-runnable-track {
        width: 100%;
        height: 0.84em;
        cursor: pointer;
        box-shadow: 1px 1px 1px #CCCCCC, 0px 0px 1px #CCCCCC;
        background: #f2f2f2;
        background: linear-gradient(90deg, rgba(0,0,0,.3) 0%,rgba(0,0,0,.3) 11%, rgba(205,0,0,1) 15%, rgba(249,255,0,1) 60%, rgba(0,176,15,1) 100%);
        border-radius: 0.84em;
        border: 0.2px solid #CCCCCC;
    }

    input[type=range].slider_rg::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #CCCCCC, 0px 0px 1px #CCCCCC;
        border: 1px solid #CCCCCC;
        height: 2em;
        width: 2em;
        border-radius: 2em;
        margin-top: -0.75em;
        background: #ffffff;
        background: linear-gradient(133deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 74%, rgba(238,238,238,1) 100%);
        cursor: pointer;
        -webkit-appearance: none;
    }

    input[type=range].slider_rg:focus::-webkit-slider-runnable-track {
        background: #f2f2f2;
        background: linear-gradient(90deg, rgba(0,0,0,.3) 0%,rgba(0,0,0,.3) 11%, rgba(205,0,0,1) 15%, rgba(249,255,0,1) 60%, rgba(0,176,15,1) 100%);
    }

    input[type=range].slider_rg::-moz-range-track {
        width: 100%;
        height: 0.84em;
        cursor: pointer;
        box-shadow: 1px 1px 1px #CCCCCC, 0px 0px 1px #CCCCCC;
        background: #f2f2f2;
        background: linear-gradient(90deg, rgba(0,0,0,.3) 0%,rgba(0,0,0,.3) 11%, rgba(205,0,0,1) 15%, rgba(249,255,0,1) 60%, rgba(0,176,15,1) 100%);
        border-radius: 0.84em;
        border: 0.2px solid #CCCCCC;
    }

    input[type=range].slider_rg::-moz-range-thumb {
        box-shadow: 1px 1px 1px #CCCCCC, 0px 0px 1px #CCCCCC;
        border: 1px solid #CCCCCC;
        height: 2em;
        width: 2em;
        border-radius: 2em;
        margin-top: -0.75em;
        background: #ffffff;
        background: linear-gradient(133deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 74%, rgba(238,238,238,1) 100%);
        cursor: pointer;
    }

    input[type=range].slider_rg::-ms-track {
        width: 100%;
        height: 0.84em;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        border-width: 16px 0;
        color: transparent;
    }

    input[type=range].slider_rg::-ms-fill-lower {
        background: #f2f2f2;
        background: linear-gradient(90deg, rgba(0,0,0,.3) 0%,rgba(0,0,0,.3) 11%, rgba(205,0,0,1) 15%, rgba(249,255,0,1) 60%, rgba(0,176,15,1) 100%);
        border: 0.2px solid #CCCCCC;
        border-radius: 2.6px;
        box-shadow: 1px 1px 1px #CCCCCC, 0px 0px 1px #CCCCCC
    }

    input[type=range].slider_rg::-ms-fill-upper {
        background: #f2f2f2;
        background: linear-gradient(90deg, rgba(0,0,0,.3) 0%,rgba(0,0,0,.3) 11%, rgba(205,0,0,1) 15%, rgba(249,255,0,1) 60%, rgba(0,176,15,1) 100%);
        border: 0.2px solid #CCCCCC;
        border-radius: 2.6px;
        box-shadow: 1px 1px 1px #CCCCCC, 0px 0px 1px #CCCCCC;
    }

    input[type=range].slider_rg::-ms-thumb {
        box-shadow: 1px 1px 1px #CCCCCC, 0px 0px 1px #CCCCCC;
        border: 1px solid #CCCCCC;
        height: 2em;
        width: 2em;
        border-radius: 2em;
        margin-top: -0.75em;
        background: #ffffff;
        background: linear-gradient(133deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 74%, rgba(238,238,238,1) 100%);
        cursor: pointer;
    }

    input[type=range].slider_rg:focus::-ms-fill-lower {
        background: #f2f2f2;
        background: linear-gradient(90deg, rgba(0,0,0,.3) 0%,rgba(0,0,0,.3) 11%, rgba(205,0,0,1) 15%, rgba(249,255,0,1) 60%, rgba(0,176,15,1) 100%);
    }

    input[type=range].slider_rg:focus::-ms-fill-upper {
        background: #f2f2f2;
        background: linear-gradient(90deg, rgba(0,0,0,.3) 0%,rgba(0,0,0,.3) 11%, rgba(205,0,0,1) 15%, rgba(249,255,0,1) 60%, rgba(0,176,15,1) 100%);
    }
/*range input white*/
input[type=range].slider_wh {
    -webkit-appearance: none;
    margin: 2em 0 0.6em 0;
    width: 100%;
    background-color: transparent;
    border: 0 !important;
}

    input[type=range].slider_wh:focus {
        outline: none !important;
    }

    input[type=range].slider_wh::-webkit-slider-runnable-track {
        width: 100%;
        height: 0.84em;
        cursor: pointer;
        box-shadow: 1px 1px 1px #CCCCCC, 0px 0px 1px #CCCCCC;
        background: #f2f2f2;
        border-radius: 0.84em;
        border: 0.2px solid #CCCCCC;
    }

    input[type=range].slider_wh::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #CCCCCC, 0px 0px 1px #CCCCCC;
        border: 1px solid #CCCCCC;
        height: 2em;
        width: 2em;
        border-radius: 2em;
        margin-top: -0.75em;
        background: #ffffff;
        background: linear-gradient(133deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 74%, rgba(238,238,238,1) 100%);
        cursor: pointer;
        -webkit-appearance: none;
    }

    input[type=range].slider_wh:focus::-webkit-slider-runnable-track {
        background: #f2f2f2;
    }

    input[type=range].slider_wh::-moz-range-track {
        width: 100%;
        height: 0.84em;
        cursor: pointer;
        box-shadow: 1px 1px 1px #CCCCCC, 0px 0px 1px #CCCCCC;
        background: #f2f2f2;
        border-radius: 0.84em;
        border: 0.2px solid #CCCCCC;
    }

    input[type=range].slider_wh::-moz-range-thumb {
        box-shadow: 1px 1px 1px #CCCCCC, 0px 0px 1px #CCCCCC;
        border: 1px solid #CCCCCC;
        height: 2em;
        width: 2em;
        border-radius: 2em;
        margin-top: -0.75em;
        background: #ffffff;
        background: linear-gradient(133deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 74%, rgba(238,238,238,1) 100%);
        cursor: pointer;
    }

    input[type=range].slider_wh::-ms-track {
        width: 100%;
        height: 0.84em;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        border-width: 16px 0;
        color: transparent;
    }

    input[type=range].slider_wh::-ms-fill-lower {
        background: #f2f2f2;
        border: 0.2px solid #CCCCCC;
        border-radius: 2.6px;
        box-shadow: 1px 1px 1px #CCCCCC, 0px 0px 1px #CCCCCC
    }

    input[type=range].slider_wh::-ms-fill-upper {
        background: #f2f2f2;
        border: 0.2px solid #CCCCCC;
        border-radius: 2.6px;
        box-shadow: 1px 1px 1px #CCCCCC, 0px 0px 1px #CCCCCC;
    }

    input[type=range].slider_wh::-ms-thumb {
        box-shadow: 1px 1px 1px #CCCCCC, 0px 0px 1px #CCCCCC;
        border: 1px solid #CCCCCC;
        height: 2em;
        width: 2em;
        border-radius: 2em;
        margin-top: -0.75em;
        background: #ffffff;
        background: linear-gradient(133deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 74%, rgba(238,238,238,1) 100%);
        cursor: pointer;
    }

    input[type=range].slider_wh:focus::-ms-fill-lower {
        background: #f2f2f2;
    }

    input[type=range].slider_wh:focus::-ms-fill-upper {
        background: #f2f2f2;
    }

.bubble_blue {
    background: #007fc4;
    color: white;
    padding: 4px 12px;
    position: absolute;
    border-radius: 4px;
    font-weight: 700;
    left: 50%;
    top: -2em;
    top: -3em;
    z-index: 2;
    transform: translateX(-50%);
}

    .bubble_blue::after {
        content: "";
        position: absolute;
        width: 2px;
        height: 2px;
        background: #007fc4;
        bottom: -1px;
        left: 50%;
    }

/* style range */
input[type=range] {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

    /* style datalist */
    input[type=range] + datalist {
        max-width: 100%;
        display: flex;
        font-size: 0.8em;
        color: #666;
        font-weight: 600;
        margin-top: 0.2em;
        flex-wrap: nowrap;
        left: -999em;
        position: absolute;
    }

        input[type=range] + datalist option {
            display: inline-block;
            width: calc((100% - 12px) / (var(--list-length) - 1));
            text-align: center;
        }

            input[type=range] + datalist option:first-child {
                width: calc((100% - 12px) / ((var(--list-length) - 1) * 2) + 6px);
                text-align: left;
            }

            input[type=range] + datalist option:last-child {
                width: calc((100% - 12px) / ((var(--list-length) - 1) * 2) + 6px);
                text-align: right;
            }

/* style mobile fake datalist, datalist doesn't work on mobile */
.datalistf {
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    font-size: 0.8em;
    color: #666;
    margin-top: 0.2em;
    margin-bottom: 0;
}

.datalistf_li {
    width: calc((100% - 12px) / (var(--list-length) - 1));
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

    .datalistf_li:first-child {
        width: calc((100% - 12px) / ((var(--list-length) - 1) * 2) + 6px);
        text-align: left;
        margin-right: auto;
        margin-left: 0;
        white-space: nowrap;
    }

    .datalistf_li:last-child {
        width: calc((100% - 12px) / ((var(--list-length) - 1) * 2) + 6px);
        text-align: right;
        margin-right: 0;
        text-align: right;
        white-space: nowrap;
    }

.range-wrap {
    position: relative;
    margin: 3em 0 1em 0;
    max-width: 40em;
}

.range-wrap-word {
    position: relative;
    margin: 3em 0 1em 0;
    max-width: 40em;
}

.range-wrap-word2 {
    position: relative;
    max-width: 40em;
    margin: 1.5em 0 1em 0;
}

.range-wrap-word3 {
    position: relative;
    max-width: 40em;
    margin: 3em 0 1em 0;
}

.bubble {
    background: white;
    color: black;
    padding: 0.2em 0.7em;
    position: absolute;
    border-radius: 0.2em;
    border: 0.0625rem solid #f2f2f2;
    box-shadow: 0 0.2em 1em rgba(0,0,0,0.1);
    left: 50%;
    top: -3em;
    z-index: 2;
    transform: translateX(-50%);
}

    .bubble::after {
        content: "";
        position: absolute;
        width: 0.3em;
        height: 0.3em;
        border-radius: 0.3em;
        background: white;
        bottom: -0.15em;
        left: 50%;
    }

.range_imitator {
    background: #f2f2f2;
    background: linear-gradient(90deg, rgba(205,0,0,1) 0%, rgba(249,255,0,1) 50%, rgba(0,176,15,1) 100%);
    border: 0.2px solid #CCCCCC;
    border-radius: 0.8em;
    box-shadow: 1px 1px 1px #CCCCCC, 0px 0px 1px #CCCCCC;
    height: 0.8em;
    width: 100%;
    position: relative;
}

.range_alltime {
    position: absolute;
    top: 0.8em;
    text-align: center;
    width: 50%;
    margin-left: -25%;
}

.range_today_t1, .range_alltime_t1, .range_today_t1 .fas, .range_alltime_t1 .fas {
    line-height: 80%;
    color: #666;
}

.range_alltime_t2 {
    line-height: 110%;
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
}

.range_today {
    position: absolute;
    bottom: 0.8em;
    text-align: center;
    width: 50%;
    margin-left: -25%;
}

.range_today_t2 {
    line-height: 110%;
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
}

.text-insight1 {
    color: #BA0101 !important;
}

.text-insight2 {
    color: #E80000 !important;
}

.text-insight3 {
    color: #E68F00 !important;
}

.text-insight4 {
    color: #62B506 !important;
}

.text-insight5 {
    color: #04A210 !important;
}

.TitleButton, .TitleButton2 {
    border-bottom: 2px solid #d7d7f9;
    padding-bottom: 0.5em;
    margin-bottom: 1em !important;
    display: block !important;
    border-radius: 0 !important;
    position: relative;
    color: #22a7ee !important;
}

    .TitleButton:after {
        font-family: "Font Awesome 5 Free";
        content: "\f054";
        font-weight: 900;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        font-size: 0.6em;
        line-height: 100%;
        color: #22a7ee;
        position: absolute;
        right: 0.5em;
        bottom: 0.7em;
        display: inline-block;
    }

.TitleButton2 {
    cursor: text !important;
}

.insight_box {
    background-color: white;
    /*border: 1px solid rgba(0,0,0,0.05);
border-radius: 1em;
    box-shadow: 0 0 1em rgba(0,0,0,0.1);*/
    /*
    border: 2px solid #d7d7f9;*/
    /*
    border-bottom: 2px solid #d7d7f9;
    padding: 1em 2em 1em 2em !important;
        margin-top: 1em;
    margin-bottom: 1em;
        */
    padding: 1em 1em 1em 1em !important;
}

.insight_box_blog {
    /*
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 1em 2em 1em 2em !important;
        */
    padding: 1em 1em 1em 1em !important;
}

.insight_Q {
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 1.2em;
    color: #666;
    /* margin-bottom: 0.2em;
    margin-left: 1em;
    margin-right: 1em;
        */
}

.insight_QE {
    font-size: 1.1em;
    font-weight: 400;
    margin-top: 1.2em;
    color: #666;
}

.insight_A {
    margin-bottom: 1em;
    font-size: 1.4em;
    display: flex;
    /*
    background-color: rgba(0,0,0,0.03);
    padding: 0.4em;
    border-radius: 0.4em;
        */
    /*
    margin-left: 1em;
    margin-right: 1em;
        */
}

.insight_A_date {
    border: 2px solid #ff7b08;
    border-radius: 0.5em;
    padding: 0.1em 0.6em;
    margin-right: 1em;
    margin-bottom: auto;
    font-size: 0.9em;
}

.insight_A_text {
    margin-bottom: 0;
    font-weight: 400;
}

.mealBars {
    height: 2em;
}

.fa_img {
    width: 1em;
    height: 1em;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    margin-bottom: 0.3em;
}

.checkin_streak_w {
    align-items: center;
    background-image: url(/Content/Images/GameImages/streak_bg2.jpg);
    background-size: 102%;
    background-position: center;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 0 1em rgba(0,0,0,0.1);
    background-color: white;
    border-radius: 1.4em;
    padding: 1em 1em 1em 1em !important;
    overflow: hidden;
    margin-top: 1.5em;
    margin-bottom: 1em;
    text-align: center;
    color: white;
}

.checkin_streak_t1 {
    font-weight: 900;
    font-size: 1em;
    text-transform: uppercase;
    color: white;
}

.checkin_streak_round {
    /*
    flex-shrink: 0;
    flex-grow: 0;
    border-radius: 8em;
    width: 8em;
    padding: 1.1em 0;
    background-color: rgba(0,0,0,0.1);

    text-shadow: 1px 1px 0px rgba(0, 0, 0, 1); */
    text-align: center;
    margin: auto auto 1em auto;
}

.checkin_streak_align {
    display: inline-block;
    vertical-align: middle;
}

.checkin_streak_num {
    color: white;
    font-size: 4em;
    font-weight: 700;
    line-height: 110%;
}

.checkin_streak_days {
    color: white;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 900;
    line-height: 100%;
}

.rate_span1 {
    display: inline-block;
    max-width: 90%;
    vertical-align: top;
}

@media screen and (min-width: 105em) {
    .TimeBtnSpace {
        margin-top: 3em;
        margin-bottom: 3em;
    }
}

@media (hover: hover) {
    /*hovers only*/
    #ReachedGoal:hover {
        opacity: 1 !important;
    }

    .TitleButton:hover {
        background-color: #f5f5fe !important;
    }

        .TitleButton:hover:after {
        }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) and (orientation : portrait) {
    /* IPAD VERTICAL ONLY*/
}

@media screen and (max-width: 75em) {
    .checkin_streak_w {
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        width: auto;
        margin-right: auto;
        /*
        margin-left: 4.2em;

        max-width: 20em;
            */
        padding: 0.5em 1em 0.5em 1em !important;
    }

    .checkin_streak_round {
        margin: auto 1em 1em 2em;
    }

    .checkin_streak_t1 {
        margin: auto auto auto 1em;
        font-size: 1.4em;
    }
}

/* Landscape */
@media screen and (max-width: 51em) and (orientation: landscape) {
    .datalistf.desktop_hide {
        display: flex !important;
    }

    input[type=range] + datalist {
        display: none !important;
    }
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 46em) {
    /*mobile fixes & ipad narrow*/
}

@media screen and (min-width:34em) and (max-width: 46em) {
}

@media screen and (max-width: 34em) {
    .sc_time_bg {
        margin-top: 0em;
        margin-bottom: 0em;
    }

    .insight_box {
        margin-top: 0.5em;
        /*
        margin-top: 0.5em;
        margin-bottom: 0.5em;
            */
        padding: 0em 0.5em !important;
    }

    .insight_box_blog {
    }

    .rate_span1 {
        display: inline-block;
        max-width: 85%;
        vertical-align: top;
        margin-top: 0.5em;
    }

    .fa-ins {
        font-size: 1.5em;
        top: 0.18em;
        position: relative;
    }

    .insight_Q {
        font-size: 0.75em;
    }

    .insight_QE {
        font-size: 0.75em;
    }

    .insight_A {
        font-size: 0.9em;
    }

    .mealBars {
        height: 1em;
    }

    .mobile_br2 {
        display: block;
    }

    .all_time_avg {
        display: inline-block;
        margin-left: 2em;
    }

    .bubble {
        font-size: 0.8em;
    }

    .gj-datepicker .form-control:disabled, .gj-datepicker .form-control[readonly] {
        color: #212529 !important;
        opacity: 1 !important;
    }
    /* style datalist */
    input[type=range] + datalist {
        font-size: 0.6em;
    }
    /* style datalist */
    input[type=range] + datalist {
        display: none !important;
    }

    .datalistf {
        font-size: 0.6em;
        font-weight: 600;
    }

    .sc_answer_w {
        margin-left: 2em;
        margin-top: 1em;
    }

    .sc_icon_bg {
        background-color: #f4f5f7;
        border-radius: 0;
        background-image: url('');
    }

    .sc_icon_w {
        width: 2em;
        min-width: 2em;
        margin-right: 0.4em;
        padding-top: 0.4em;
    }

    .sc_bubble .label {
        font-size: 1em;
    }

    .sc_scale_bg {
        width: 16em;
        height: 16em;
        padding-top: 3.6em;
    }

        .sc_scale_bg input {
            font-size: 1.6em;
            width: 3em;
        }

    .sc_highlight_bg {
        height: 10em;
        padding-top: 1em;
        padding-bottom: 0em;
    }

        .sc_highlight_bg textarea {
            width: 80%;
            height: 5em;
        }

    .range_today_t1, .range_alltime_t1, .range_today_t1 .fas, .range_alltime_t1 .fas {
        line-height: 60%;
    }
}
#list {
    border-radius: 0.4em;
    background-color: #E2F9FC;
    box-shadow: 0 0 0.6em rgba(0,0,0,0.1);
    overflow: hidden;
}

    #list .art_cc {
        font-size: 0.7em;
        line-height: 1.6;
        margin-left: 0.5em;
        margin-top: 1em;
    }

        #list .art_cc div {
            padding: 0.2em 0;
        }

.list_item {
    display: flex;
    justify-content: space-between;
    text-align: left;
    padding: 1.5em 2em;
    border-bottom: 0.0625rem solid #E9E9E9;
    position: relative;
}

    .list_item:last-of-type {
        border-bottom: 0;
    }

.list_item_today {
    background-color: white;
}

    .list_item_today .list_item_date {
        background-color: #ff7b08;
        color: white;
        border: 0;
    }

.list_item_date {
    padding: 0.2em 0.5em;
    border: 0.1em solid #ffd800;
    font-weight: 600;
    border-radius: 0.5em;
    margin-right: 0.8em;
    margin-bottom: auto;
}

.list_item_title {
    margin-top: 0.3em;
    font-weight: 600;
}

    .list_item_title A {
        color: black;
    }

.list_item_completed {
    display: block;
}

.list_item_last {
    display: block;
}

.list_item_done {
    width: 8%;
    min-width: 8%;
    max-width: 8%;
    margin-right: 0;
    margin-left: auto;
    padding-left: 1em;
}

.bar_range {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    height: 1.2rem;
    font-size: .2em;
    z-index: 1;
    height: 1.2rem;
    background-color: rgba(0,0,0,0.1) !important;
    transition: width 1s;
}

.bar_ww {
    margin-bottom: 0.5em;
    position: relative;
}

.goal_check {
    width: 2em;
    height: 2em;
    display: none;
}

.goal_check2 {
    font-size: 2em;
    color: #00CE67;
    color: #FAA139;
    display: none;
}

#check-Calories {
    position: absolute;
    /*
    top: 1.2rem;
    left: 4.5rem;
      */
    bottom: 0.5rem;
    right: 0rem;
    font-size: 3rem;
    width: 2.5rem;
    height: 2.5rem;
    z-index: 5;
}

#check-Carbs, #check-Protein, #check-Fat, #check-Fiber {
    margin-top: -0.7em;
}

.bar_remain {
    height: 0;
    position: relative;
    overflow: hidden;
    font-weight: 600;
    font-size: 0.9em;
    transition: all 0.2s;
    text-align: right;
}

.graph_ww:hover .bar_remain {
    right: auto;
    height: 2em;
}

.nut_bar {
    display: inline-block;
    font-size: .2em;
    z-index: 2;
    height: 1.2rem;
    border-radius: 1.2rem;
    background-color: #00df70 !important;
    transition: width 1s;
    width: 0%;
}

#Calories_bar {
    background-color: #00df70 !important;
}

#Carbs_bar {
    background-color: #22a7ee !important;
}

#Fat_bar {
    background-color: red !important;
}

#Protein_bar {
    background-color: #8827AD !important;
}

#Fiber_bar {
    background-color: #ff7b08 !important;
}

.bar_end {
    font-weight: 600;
    top: 1.2em;
}

.bar_end_g2 {
    color: #666;
    text-transform: uppercase;
}

.bar_begin {
    position: absolute;
    left: 0;
    top: 1.2em;
}

.search {
    width: 1.25em;
    margin-left: 0.5em;
    opacity: 0.7;
}

.search_barcode {
    width: 1.8em;
    margin-left: 0.8em;
    opacity: 0.7;
}

/*
#SearchOrFavViewBtn {
    border-radius: 0.6em;
}
*/
.btn-group-white {
    background-color: #009F9F;
    border-radius: 0.5em;
    border: 0.2em solid #009F9F;
    color: white;
}

    .btn-group-white.active {
        background-color: white;
        box-shadow: 0 0 0.6em rgba(0,0,0,0.1);
        color: #333;
    }
/*
.form-control-sm {
    border: 1px solid #ced4da;
    font-size: 1em;
    box-shadow: 0;
    background-color: #F0F0F0;
    max-width: 4em;
}

    .form-control-sm:focus {
        box-shadow: 0 !important;
        border: 1px solid #C8E9FB !important;
        background-color: white;
    }
*/
.fc-sme {
    padding: 0.3em 0.5em 0.3em 0.5em;
    height: auto;
    display: inline-block;
    font-weight: 600;
}

select.fc-sme:not([size]):not([multiple]) {
    height: auto;
}

.fc-sm {
    max-width: 4em;
    font-size: 1em;
    display: inline-block;
    font-weight: 600;
}

.fc-gray-bg {
    background-color: #F0F0F0;
    border: 0;
}

    .fc-gray-bg:focus {
        border: 0;
    }

.recipe_directions_textarea:focus {
}

textarea.input100 {
    min-height: 2.5em;
    height: auto;
    box-sizing: border-box;
}

.input-small,
.input100,
.textarea100,
.search_input {
    transition: all 0.30s ease-in-out;
    outline: none;
    /*
    margin: .2em auto .2em auto;
        */
    border: 0;
    box-sizing: border-box;
    background-color: #F0F0F0;
    -webkit-appearance: none;
    padding: .5em;
    border-radius: 0.3em;
    box-shadow: 0;
}

.search_input {
    font-size: 1.4em;
}

.input100 {
    width: 100%;
}

.flexRow {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.break-word {
    white-space: normal;
    word-break: break-word;
}

.cpp1 {
    width: 100%;
    display: block;
    margin-right: 0.5em;
    padding: 0.5em 0;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
}

.cpp2 {
    margin-right: 0;
    margin-left: auto;
    padding: 0.5em 0;
}

.cpp3 {
    margin-right: 0.5em;
    padding: 0.5em 0;
}

.cpp4 {
    margin-left: 0;
    margin-right: auto;
}

.quantity_w {
    margin: 0.2em 0.2em;
}

.dc1 {
    flex-grow: 4;
    color: rgba(0, 0, 0, 0.54);
    text-transform: uppercase;
    font-weight: 700;
    font-size: .8em;
    letter-spacing: .1em;
    margin-right: 1em;
}

.dc2 {
    align-items: flex-end;
    text-align: right;
}

    .dc2 INPUT {
        min-width: 4em;
    }

    .dc2 select {
        text-align-last: right;
    }

.dc3 {
    margin-left: 0;
    color: rgba(0, 0, 0, 0.54);
    text-transform: uppercase;
    font-weight: 700;
    font-size: .8em;
    letter-spacing: .1em;
    margin-right: 2em;
}

    .dc1 label, .dc3 label {
        margin-bottom: 0 !important;
    }

.fh3 {
    margin: 1em 0;
}

.ing_ul, .ing_ul2 {
    margin: 0 0 1em 0;
    padding: 0;
    list-style: none;
}

    .ing_ul LI, .ing_ul2 LI {
        border-bottom: 0.0625rem solid rgba(0, 0, 0, .1);
        padding: 0.5rem 0 1rem 0;
        margin: 0;
        box-sizing: border-box;
        font-size: 1.12rem;
    }

.search_ul {
    margin: 0 0 1em 0;
    padding: 0;
    list-style: none;
}

    .search_ul LI {
        border-bottom: 0.0625rem solid #f0f0f0;
        padding: 0.5rem 0 0.5rem 0;
        margin: 0;
        box-sizing: border-box;
    }

        .search_ul li .food_a {
            width: 100%;
            max-width: 100%;
            position: relative;
            padding-right: 1.25em !important;
            padding-left: 1% !important;
        }

            .search_ul li .food_a::after {
                font-family: "Font Awesome 5 Free";
                font-weight: 900;
                content: "\f054";
                color: #ccc;
                position: absolute;
                right: 0em;
                top: 0em;
                pointer-events: none;
                z-index: 1;
            }

.info_circle {
    width: 1em;
    height: 1em;
    display: inline-block;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
}

.multiple-btn-header {
    margin-left: auto;
    margin-right: 0;
}

.fav_w {
    /*
    position: relative;
    margin-right: 1.5em;
    margin-left: auto;
    display: inline-block;
        */
    position: absolute;
    top: -2.35em;
    right: 5em;
    display: inline-block;
}

input[type="checkbox"].favorite_img {
    position: absolute;
    height: 1.5em;
    width: 1.5em;
    min-width: 1.5em !important;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    opacity: 0;
    line-height: 1.5em;
    right: 0em;
    top: 0;
}

    input[type="checkbox"].favorite_img + label {
        cursor: pointer;
        margin-bottom: 0 !important;
    }

        input[type="checkbox"].favorite_img + label:before {
            background-color: #Fff;
            height: 1.5em;
            width: 1.5em;
            min-width: 1.5em !important;
            display: inline-block;
            vertical-align: middle;
            padding: 0 0 0 0;
            float: right;
            cursor: pointer;
            content: " ";
            opacity: 0.5;
            outline: none;
            margin: auto auto auto auto;
            background: url(/content/images/favorite.svg) no-repeat;
            background-size: contain;
        }

    input[type="checkbox"].favorite_img:focus + label:before {
    }

    input[type="checkbox"].favorite_img:checked + label:before {
        background: url(/content/images/favorite_checked.svg) no-repeat;
        background-size: contain;
        opacity: 1;
    }

    input[type="checkbox"].favorite_img:checked:focus + label:before {
        background: url(/content/images/favorite_checked.svg) no-repeat;
        background-size: contain;
        opacity: 1;
    }

input[type="checkbox"][disabled].favorite_img + label:before {
}

/*food information popup*/
#facts_w {
    /*width: 20em;
        border: 0.125em solid #d7d7f9;
            padding: .6em;
    margin: .5em auto;
    */
    width: 100%;
    background-color: white;
}

.button_center {
    text-align: center;
    margin: 1em auto;
}

.close_btn {
    margin: 0 auto !important;
}

.nut_facts {
    font-size: 1.0625em;
    margin: .5em 0 0 0;
    font-weight: bold;
    text-align: center;
}

.serving_size {
    margin: 0 1em 1em 1em;
    text-align: left;
    font-size: 0.8em;
}

.amt_per {
    border-top: 0.25em solid black;
    border-bottom: 0.1875em solid black;
    padding: .8em;
    text-align: center;
    font-size: 0.8em;
}

.disclaimer {
    margin-top: 1em;
    font-size: .75em;
}

.facts_ul {
    /*width: 20em;
        border: 0.0625em solid #d7d7f9;
    */
    width: 100%;
    margin: 0;
    padding: 0;
    /*
    border-bottom: 0.1875em solid black;

    border-top: 0.1875em solid black;
        */
    border-right: none;
    border-left: none;
}

    .facts_ul LI {
        margin: 0;
        list-style: none;
        padding: .6em .5em .6em .51em;
        border-bottom: 0.0625em solid #f0f0f0;
        background-color: white;
        text-align: left;
        position: relative;
    }

        .facts_ul LI.row1 {
            font-weight: bold;
        }

        .facts_ul LI.row2 {
            padding-left: 1em;
        }

    .facts_ul .num1 {
        position: absolute;
        right: .5em;
        font-weight: normal;
    }

.vitamins_ul {
    /*width: 20em;*/
    width: 100%;
    margin: 0 0 0em 0;
    padding: 0;
    /*
    border: 0.0625em solid #d7d7f9;

    border-bottom: 0.1875em solid black;

    border-top: 0.1875em solid black;
        */
    border-right: none;
    border-left: none;
}

    .vitamins_ul LI {
        margin: 0;
        padding: .4em .5em .4em .5em;
        list-style: none;
        border-bottom: 0.0625em solid #f0f0f0;
        background-color: white;
        text-align: left;
        position: relative;
    }

        .vitamins_ul LI.row2 {
            /*
            background-color: #EBEBFF;*/
        }

    .vitamins_ul .num1 {
        position: absolute;
        right: 1em;
    }

.flex-col {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.nltext {
    margin-bottom: 0 !important;
}

.minerals_ul {
    width: 100%;
    margin: 0 0 1em 0;
    padding: 0;
    font-size: .9em;
}

    .minerals_ul LI {
        margin: 0;
        padding: .4em .5em .4em .5em;
        list-style: none;
        border-bottom: 0.0625em solid #d7d7f9;
        background-color: white;
        text-align: left;
        position: relative;
    }

        .minerals_ul LI.row1 {
            background-color: #f1f1f1;
        }

    .minerals_ul .num1 {
        width: 40%;
        text-align: left;
    }

.facts_w2 {
    width: 36em;
    border: 0.0625em solid #6384bd;
    padding: 1.5em;
    font-size: .8em;
    box-shadow: 0 0 0.5em #666;
    margin-top: .5em;
}

.caloriesin2 {
    font-size: 1.3em;
    font-weight: bold;
    margin: .5em 0 .5em 0;
    padding: 0;
    text-align: left;
    color: #5a5ab5;
}

.nut_facts2 {
    font-size: 1.5em;
    margin: 0 0 0 0;
    font-weight: bold;
    text-align: center;
}

.serving_size2 {
    font-size: 1em;
    margin: .5em 0 .5em 0;
    text-align: left;
}

.disclaimer2 {
    margin: 1em 0 0 0;
    font-size: .9em;
}

.nut_col1 {
    width: 18em;
    float: left;
}

.facts_ul2 {
    width: 18em;
    margin: 0;
    padding: 0;
    border: 0.0625em solid #d7d7f9;
    border-top: 0.0625em solid black;
    border-right: none;
    border-left: none;
}

    .facts_ul2 LI {
        margin: 0;
        list-style: none;
        padding: .5em .5em .5em .5em;
        border-bottom: 0.0625em solid #d7d7f9;
        background-color: white;
        text-align: left;
        position: relative;
    }

        .facts_ul2 LI.row1 {
            font-weight: bold;
        }

        .facts_ul2 LI.row2 {
            padding-left: 1.2em;
        }

        .facts_ul2 LI.amt_per2 {
            border-bottom: 0.125em solid black;
            padding: .8em;
            text-align: center;
        }

    .facts_ul2 .num1 {
        position: absolute;
        right: .5em;
        font-weight: normal;
    }

.vitamins_ul2 {
    width: 16em;
    float: left;
    margin: 1em 0 0 1.5em;
    padding: 0;
    border: 0.0625em solid #d7d7f9;
    border-bottom: 0;
}

    .vitamins_ul2 LI {
        margin: 0;
        padding: .5em .5em .5em .5em;
        list-style: none;
        border-bottom: 0.0625em solid #d7d7f9;
        background-color: white;
        text-align: left;
        position: relative;
    }

        .vitamins_ul2 LI.row2 {
            background-color: #EBEBFF;
        }

    .vitamins_ul2 .num1 {
        position: absolute;
        right: .5em;
    }

/*end food information popup*/

.meal_w {
    position: relative;
    border-radius: .8em;
    background-color: #fff;
    box-shadow: 0 0 1em rgba(0,0,0,0.1);
    text-align: left;
    padding: 1em;
    margin-bottom: 1em;
}
/*old tracker*/
#tracker_btm, #tracker_btm_e {
    border: 0.0625em solid #D5D5D5;
    box-shadow: 0 0 0.25em rgba(0,0,0,.1);
    margin: 1em auto;
}

.tracker_w_below {
    margin-bottom: 1em;
    margin-left: 1em;
    font-size: .85em;
}

.none {
    color: #666;
    padding: .3em 1em;
}

.food_a {
    color: black;
    text-align: left;
    padding: 0;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    max-width: 85%;
    white-space: normal;
    word-break: break-word;
}

.foodchecked A {
    color: black;
    TEXT-DECORATION: none;
    text-align: left;
}

.foodunchecked A {
    color: #666;
    TEXT-DECORATION: none;
    text-align: left;
}

.dcue {
    color: #666;
    TEXT-DECORATION: none;
}

.dce {
    color: black;
    TEXT-DECORATION: none;
}

BUTTON.track_remove {
    padding: 0;
    color: #2B71BD;
    /*
    font-size: 1.3em;
    */
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    margin-left: .2em;
}

.mp_table_totals {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    display: table;
    width: 100%;
}

.mp_table {
    margin: 0;
    padding: 0; /*border-collapse:collapse; border-bottom:0.0625em solid #F0F0F0;*/
}

.mp_table {
    display: table;
    width: 100%;
}

.mp_table_row {
    display: table-row;
    width: 100%;
}

.c1, .c2, .c3, .ct1, .ctt1, .ct2, .ct3, .ct4, .ct5, .cc1, .tht, .ttht, .tthl, .ttt, .tdg, .rt, .ttt2, .tdg2, .rt2, .tthl, .mp_button_cell, .cf, .cf2, .cc2, .mtt, .mtt1, .mtt2, .mttd, .mttd2 {
    display: table-cell;
}

/*IF EXTRA NUTRIENT COLUMN*/
.c1, .ct1, .cd1 {
    padding: .3em 0em .3em 0em;
    width: 3%;
    text-align: center;
}

.c2, .ct2, .cd2 {
    padding: .3em 0em .3em 0em;
    width: 50%;
    text-align: left;
}

.cc2, .cct2, .ccd2 {
    padding: .6em 0em .6em 1%;
    width: 49%;
    text-align: left;
}

.c3, .ct3, .cd3 {
    padding: .3em 0em .3em 0em;
    width: 10%;
    text-align: center;
}

.c4, .ct4, .cd4 {
    padding: .3em 0em .3em 0em;
    width: 10%;
    text-align: center;
}

.c5, .ct5, .cd5 {
    padding: .3em 0em .3em 0em;
    width: 10%;
    text-align: center;
}

.c6, .ct6, .cd6 {
    padding: .3em 0em .3em 0em;
    width: 10%;
    text-align: center;
}

.c7, .ct7, .cd7 {
    padding: .3em 0em .3em 0em;
    width: 10%;
    text-align: center;
}

.cqtymd {
    display: inline;
    opacity: 0.7;
}
/*IF EXTRA NUTRIENT COLUMN*/
.meal_name {
    color: black;
    font-size: 1.6rem;
    font-weight: 400;
    margin: 0;
    padding: .1em 0 0 0em;
    text-transform: uppercase;
}

.daily_totals {
    color: #666;
    font-size: 1.6rem;
    font-weight: 400;
    margin: 0;
    padding: .1em 0 0 0em;
    text-transform: uppercase;
}

#total_table {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
}

.tht {
    color: #666;
    padding-top: .5em;
    padding-bottom: .5em;
    border-bottom: 0.0625em solid #F0F0F0;
    font-weight: 400;
    font-size: 0.85em;
}

.chl {
}

.ttht, .ttht2 {
    color: #666;
    font-weight: 700;
    font-size: .88em;
    background-color: #F7F7F7;
}

.tthl {
    background-color: #E9E9E9;
}

.ttthl {
    background-color: #EEEEEE;
}

.ttt {
    font-size: .88em;
    font-weight: 600;
    padding-top: .5em;
    padding-bottom: .5em;
}

.tdg {
    font-size: .88em;
    font-weight: 600;
    padding-top: .5em;
    padding-bottom: .5em;
    border-top: 0.0625em solid #F0F0F0;
}

.rt {
    font-size: .88em;
    font-weight: 600;
    padding-top: .5em;
    padding-bottom: .5em;
    display: none;
}

.ttt2 {
    font-size: .88em;
    padding-top: .5em;
    padding-bottom: .5em;
    text-align: right;
    text-transform: uppercase;
}

.tdg2 {
    font-size: .88em;
    padding-top: .5em;
    padding-bottom: .5em;
    text-align: right;
    text-transform: uppercase;
    border-top: 0.0625em solid #F0F0F0;
    background-color: #F7F7F7;
}

.rt2 {
    font-size: .88em;
    padding-top: .5em;
    padding-bottom: .5em;
    text-align: right;
    text-transform: uppercase;
    display: none;
}

.tmt {
    background-color: #fff;
    font-size: .88em;
    border-collapse: collapse;
}

.mtt {
    color: black;
    background-color: #F7F7F7;
}

.mtt1 {
    color: #666;
    background-color: #F7F7F7;
}

.mtt2 {
    color: black;
    background-color: #F2F2F2;
}

.mttt {
    text-transform: uppercase;
}
/*diabetes*/
.mttd {
    color: black;
    background-color: #F2F2F2;
}

.mttd2 {
    color: black;
    background-color: #F0F0F0;
}

.mtttd {
    text-transform: uppercase;
}

.mpct {
    background-color: #f5f5fe;
    color: #6384bd;
    border-bottom: 0.0625em solid #d7d7f9;
    font-weight: bold;
    padding: 0.375em 0.375em 0.375em 0.375em;
    font-size: 0.75em;
    position: relative;
}

    .mpct A {
        font-size: 0.625em;
        color: black;
        text-decoration: none;
        font-weight: normal;
    }

.mpctr {
    position: relative;
    padding-right: 5.625em;
}

.mp {
    background-color: white;
    border-bottom: 0.0625em solid #f5f5fe;
    color: #666;
}

.mp2 {
    background-color: #f5f5fe;
    border-bottom: 0.0625em solid #f5f5fe;
    color: #666;
}

.cf {
    background-color: white;
    border-bottom: 0.0625em solid #F0F0F0;
    color: black;
}

.cf2 {
    background-color: #F9FAFB;
    border-bottom: 0.0625em solid #F0F0F0;
    color: black;
}

.cft {
    background-color: #f5f5fe;
}

.cft_hide {
    background-color: #f5f5fe;
    display: none;
}

.list_a:focus {
    box-shadow: 0 !important;
    outline: none;
}
/*end old tracker*/
.GlowDanger, .GlowSuccess {
    z-index: 100;
}

    .GlowDanger .cf, .GlowDanger .cf2, .GlowSuccess .cf, .GlowSuccess .cf2 {
        background-color: transparent !important;
        transition: background-color 0.2s;
    }

#Daily_Totals {
    /*border-top: 0.125rem solid #dd0000;*/
    font-weight: 600;
}

.btn_addfood {
}

.btn_settings, .btn_chart {
    font-size: 1em;
    width: 2.5em;
    height: 2.5em;
    line-height: 100%;
    padding: 0.65em;
    background-color: white;
    border: 1px solid #ced4da;
}

.meal_w {
    transition: background-color 1s;
}

.no_foods_in0 .meal_title, .no_foods_in2 .meal_title, .no_foods_in4 .meal_title {
    color: white;
    transition: color 0.5s;
}

.no_foods_in0 {
    background-image: url(/Content/Images/Nutrition/nutrition_breakfast_bg1.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    background-color: #F26522;
}

.no_foods_in2 {
    background-image: url(/Content/Images/Nutrition/nutrition_lunch_bg1.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    background-color: #71841F;
}

.no_foods_in4 {
    background-image: url(/Content/Images/Nutrition/nutrition_dinner_bg1.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    background-color: #CC2027;
}

.no_foods_in5 {
    background-image: url(/Content/Images/Nutrition/nutrition_snacks_bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    background-color: #FEEEDA;
}

.no_foods_txt {
    padding: 2em 0 7em 0;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    font-size: 1.2em;
}

.no_foods_txt2 {
    padding: 2em 0 7em 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    font-size: 1.2em;
}

.no_foods_arrow {
    position: absolute;
    top: 1.4em;
    right: 22%;
    width: 5em;
}

.list_a {
    cursor: pointer;
}

@media (hover: hover) {
    /*hovers only*/
    .food_a:hover, .list_item_title A:hover {
        color: #22a7ee;
    }
}

@media screen and (max-width: 64em) {
    .fc-select-mc {
        position: relative;
    }

        .fc-select-mc select {
            /*
            background: white;
            border: 1px solid #ccc;
                */
            color: inherit;
            padding: 0.3em 1.5em 0.3em 0.5em;
            border-radius: 5px;
            -webkit-appearance: none;
            -moz-appearance: none;
        }

        .fc-select-mc:after {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            content: "\f0d7";
            color: #999;
            position: absolute;
            right: 0.5em;
            top: -0.1em;
            pointer-events: none;
            z-index: 1;
            vertical-align: middle;
        }
}

@media screen and (max-width: 80em) {
    #Daily_Totals .cc2, #Daily_Totals .cct2, #Daily_Totals .ccd2 {
        width: 29%;
    }

    #Daily_Totals .c4, #Daily_Totals .ct4, #Daily_Totals .cd4 {
        width: 15%;
    }
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 46em) {
    /*mobile fixes & ipad narrow*/
    .mp_table .FoodInfo {
        display: none !important;
    }
}

@media screen and (max-width: 36em) {
    /*mobile fixes & ipad narrow*/
    .no_foods_arrow {
        right: 17%;
    }

    .no_foods_txt, .no_foods_txt2 {
        padding: 0.5em 0 4em 0;
        font-size: 1em;
    }

    #Daily_Totals .cc2, #Daily_Totals .cct2, #Daily_Totals .ccd2 {
        width: 100%;
    }

    #Daily_Totals .c4, #Daily_Totals .ct4, #Daily_Totals .cd4 {
        width: 49%;
    }
    /*old tracker*/

    .cpp4 {
        margin-left: auto;
        margin-right: 0;
    }

    #weekly_w, .weekly_view_a {
        display: none;
    }

    .mp_table {
        display: block;
    }

    .mp_table_row {
        display: block;
        text-align: left;
    }

    .food_a {
        width: 93%;
        max-width: 93%;
    }

    .ct2, .ct3, .tht {
        display: none;
        border-bottom: 0 !important;
    }

    .cct2 {
        display: block;
        padding: .1em 3% .1em 3%;
        width: 100%;
    }

    .cppp1 {
        display: block;
        width: 100%;
        border-bottom: 0;
        border-top: 0.0625em solid #d5d5d5;
        padding: .6em 3% .6em 3%;
    }

    .cc2 {
        display: block;
        width: 100%;
        padding: .5em 0 .25em 0;
        position: relative;
        border-bottom: 0;
        border-top: 0.0625em solid #f0f0f0
    }

    .c3, .cqtym {
        display: inline-block;
        width: 49%;
        background-color: transparent;
        font-size: .8em;
        border: 0;
    }

    .c3 {
        text-align: right;
        padding: 0 0 0.3em 0;
        color: #666;
    }
        /*
    .c4 {
        text-align: right;
        padding: 0 0 0.3em 0;
        color: #666;
    }
*/
        .c3 > .mpcarbs {
            left: auto;
            position: relative;
        }
    /*
    .c4 > .mpcalories {
        left: auto;
        position: relative;
    }
*/
    .cqtymd {
        display: none;
    }

    .c4 {
        display: none;
    }

    .c5 {
        display: none;
    }

    .c6 {
        display: none;
    }

    .c7 {
        display: none;
    }

    .meal_totals {
        display: none;
    }
    /*
		.mtt1,.mtt2,.mtt {display:none;}
		*/
    .mpmi {
        left: auto;
        position: relative;
    }

    .ctt1 {
        padding: .6em 0em .6em 0rem;
        width: auto;
    }

    .ctt2 {
        padding: .6em 0em .6em 0em;
        width: auto;
    }

    .ctt3 {
        padding: .6em 0em .6em 0em;
        width: auto;
    }

    BUTTON.more_nutrients_a {
        display: inline-block;
        float: right;
        margin-right: .8em;
    }

    .more_nutrients_icon {
        width: 1.2em;
        height: 1.2em;
        display: none;
    }

    .meal_totals {
        position: absolute;
        z-index: 2;
        width: 90%;
        right: 0;
        left: -999em;
        top: 0em;
        box-shadow: 0 0 0.75em rgba(0,0,0,.5);
        border: 0.125em solid #000;
        background-color: white;
        font-weight: 700;
    }

        .meal_totals > .mp_table_row > .cc2 {
            display: block;
            width: 100%;
            font-size: 1rem;
            text-align: left;
            padding: .5em 3%;
            background-color: #333;
            color: white;
            margin: 0;
            border: 0;
            font-weight: 700;
        }

        .meal_totals > .mp_table_row > .c3 {
            display: block;
            width: 100%;
            font-size: 1rem;
            text-align: left;
            padding: .5em 3%;
            background-color: white;
            color: black;
            margin: 0;
            border: 0;
            font-weight: 700;
        }

        .meal_totals > .mp_table_row > .c4 {
            display: block;
            width: 100%;
            font-size: 1rem;
            text-align: left;
            padding: .5em 3%;
            background-color: white;
            color: black;
            margin: 0;
            border: 0;
            font-weight: 700;
        }

        .meal_totals > .mp_table_row > .c5 {
            display: block;
            width: 100%;
            font-size: 1rem;
            text-align: left;
            padding: .5em 3%;
            background-color: white;
            color: black;
            margin: 0;
            border: 0;
            font-weight: 700;
        }

        .meal_totals > .mp_table_row > .c6 {
            display: block;
            width: 100%;
            font-size: 1rem;
            text-align: left;
            padding: .5em 3%;
            background-color: white;
            color: black;
            margin: 0;
            border: 0;
            font-weight: 700;
        }

        .meal_totals > .mp_table_row > .c7 {
            display: block;
            width: 100%;
            font-size: 1rem;
            text-align: left;
            padding: .5em 3%;
            background-color: white;
            color: black;
            margin: 0;
            border: 0;
            font-weight: 700;
        }

        .meal_totals > .mp_table_row > .c5 > .mpfat {
            left: auto;
            position: relative;
        }

        .meal_totals > .mp_table_row > .c6 > .mpprotein {
            left: auto;
            position: relative;
        }

        .meal_totals > .mp_table_row > .c7 > .mpfiber {
            left: auto;
            position: relative;
        }

        .meal_totals > .mp_table_row > .cc2:after {
            content: "✕";
            right: 2%;
            position: absolute;
        }

    .ttht {
        vertical-align: middle;
    }

    .tdg2, .ttt2, .rt2 {
        text-align: left;
        padding-left: 3%;
    }

    .total_spacer {
        width: 0;
        font: 0/0 a;
    }

    .ccd2 {
        width: 32%;
    }

    .cd3 {
        width: 32%;
    }

    .cd4 {
        width: 33%;
    }

    .none {
        padding: .3em 3%;
    }

    /*end old tracker*/
    .bar_w, .nut_bar {
        height: 1rem;
        border-radius: 1rem;
    }

    .bar_range {
        height: 1rem;
        z-index: 3;
    }

    .nut_bar {
        position: absolute;
        left: 0;
        top: 0;
    }

    .fav_w {
        right: 4.5em;
        top: -2.3em;
    }
}

@media screen and (min-width:36em) and (max-width: 46em) {
}

@media screen and (max-width: 36em) {
    .modal-title {
        font-size: 1.2em;
    }

    .multiple-btn-header {
        margin-top: 0.5em;
        margin-right: 0.5em;
    }

    .search_input {
        font-size: 1em;
    }

    #list {
        padding: 0 0em;
        margin-left: -0.5em;
        margin-right: -0.5em;
    }

        #list .art_cc {
            font-size: 0.7em;
            line-height: 1.4;
        }

    .list_item {
        padding: 1em 1em;
    }

    .list_item_done {
        width: 12%;
        min-width: 12%;
        max-width: 12%;
    }

    #SearchOrFavViewBtn {
        width: 100%;
    }

    .btn_half_mobile {
        width: 50%;
    }

    .btn_third_mobile {
        width: 33.3%;
    }

    H2 {
        margin-bottom: .5em;
    }

    .btn_addfood {
        font-size: .8em;
        width: 2.5em;
        height: 2.5em;
        line-height: 100%;
        padding: 0.65em;
    }

    .facts_w {
        /*
        width: 90%;
        padding: .6em 2%;
        margin: .5em 2%;
            */
        border: 0;
    }

    .facts_w2 {
        width: 90%;
        border: 0.0625em solid #6384bd;
        padding: 1.5em 2%;
    }

    .facts_ul {
        width: 100%;
        border-top: 0;
    }

    .facts_ul2 {
        width: 100%;
    }

    .vitamins_ul2 {
        width: 100%;
    }

    .vitamins_ul {
        width: 100%;
    }

    .amt_per {
        display: none;
    }

    .serving_size {
        font-size: .7em;
        margin: .2em 0;
    }

    .gj-datepicker-bootstrap [role="separator"] button .gj-icon, .gj-datepicker-bootstrap [role="separator"] button .material-icons {
        top: 12px !important;
    }
}
.comm_icons_w {
    /*
    display: inline-block;
    width: 18%;
        */
    flex: 1 1;
    margin-left: 3%;
    margin-right: 3%;
    text-align: center;
    color: #fff;
    vertical-align: top;
}

.comm_icon_pic {
    width: 65%;
    max-width: 10em;
    margin: 0 auto;
    border: 0;
}

.comm_icon_p {
    font-size: 1rem;
    display: block;
    margin: 1em auto;
    font-weight: 700;
    line-height: 115%;
    width: 80%;
}

.comm_icons_a {
    display: block;
    color: #fff !important;
    padding: 0;
    width: 100%;
    outline: none;
    background-color: transparent;
    border: 0;
    outline: none !important;
}

.Notifications_w {
    margin-left: 4.5em;
    margin-top: 0.5em;
    padding: 0.5em 1em 1em 1em;
    border-radius: 1em;
    max-width: 32em;
}

.Notifications_w {
    position: relative;
    background: #f4f5f7;
}
/*
    .Notifications_w:after {
        bottom: 100%;
        left: 10%;
        border: solid transparent;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(244, 245, 247, 0);
        border-bottom-color: #f4f5f7;
        border-width: 10px;
        margin-left: -10px;
    }
*/
#SmsUnder {
    max-width: 20em;
}

.comm_write_profile_image_w {
    flex-shrink: 0;
}

.AddPhotoProfile {
    z-index: 2;
    position: relative;
}

.team_top_btn, .team_top_btn2, .team_top_btn3 {
    margin: 0.1em 0 !important;
    font-size: inherit !important;
    vertical-align: baseline !important;
    font-size: 0.875em !important;
    float: right;
}

.mutual_friend_btn {
    font-size: 0.90em;
    color: #666;
}

.sa_affil {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

#CommCategory {
    width: 70%;
}

.comm_cat_btn {
    border: 3px solid white !important;
    background-color: #F4F5F7 !important;
    color: #666 !important;
    border-radius: 8px !important;
    flex: 1 1 auto !important;
}

    .comm_cat_btn.active {
        border: 3px solid #ccc !important;
        color: black !important;
        background-color: #FFF !important;
    }

.DetailBtn {
    margin-right: 0;
    margin-left: auto;
}

.btn-post-detail:hover {
    cursor: pointer;
    background-color: #Fff;
}

.comm_post_sep {
    border-bottom: 2px solid #28a745;
    height: 1em;
}

.comm_post_w {
    display: flex;
    width: 100%;
}

.comm_col {
    width: 100%;
}

.comm_post_up {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.comm_post_side {
    width: 100%;
}

.comm_post_u {
    display: flex;
    align-items: center;
}

.comm_post_user_w {
    margin: auto auto auto 1em;
}

.comm_post_user {
    font-weight: 700;
    margin-right: 0.3em;
    color: #000 !important;
}

.comm_post_time {
    color: #666;
    font-size: 0.9em;
}

.comm_post_p {
    margin-top: 1em;
    color: #000;
    font-size: 1.1em;
}

.comm_text_before {
}

.comm_post_i {
    margin-top: 0.5em;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.comm_post_ip {
    margin-top: 0.5em;
    display: flex;
    align-items: center;
    margin-bottom: 1em;
    max-width: 100%;
}

.LikeBtnW, .CommentBtnW {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 6em;
}

.LikeBtn, .CommentBtn {
    align-items: center;
    align-self: center;
    margin-right: 0.2em !important;
}

.LikeNumBtn, .CommentNum {
    align-self: center;
    margin-right: 0 !important;
    margin-top: auto;
    display: inline-block;
    margin-bottom: auto;
    position: relative;
    bottom: 0.1em;
}

.ScrollTopBtn {
    position: fixed;
    bottom: 2em;
    right: 2em;
    display: none;
    border-radius: 2em !important;
    padding: 0.75em 1em 0.75em 1em !important;
}

.comm_post_btn_wnum {
    margin-left: 0.3em;
    color: #333 !important;
}

.comm_post_btn {
    font-size: 1.4em;
    margin-right: 2em;
}

.comm_pin_btn {
}

.thumbtack {
    width: 0.95em;
    margin-top: -0.2em;
}

.comm_all_w {
    margin-top: 1em;
    margin-bottom: 1em;
    border-bottom: 4px solid #28a745;
    padding-bottom: 2em;
    padding-top: 1em;
}

.comm_pinned_all_w {
    border-left: 5px solid #ccc;
}

    .comm_pinned_all_w .comm_all_w {
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 2em;
        padding-right: 2em;
    }

.comm_post_btn_wnum .comm_post_btn {
    /*margin-right: 0.2em;*/
}

.ReportBtn {
    margin-right: 0 !important;
    margin-left: auto;
    /*align-self: flex-end;*/
}

.comm_post_profile_image_w {
    flex-shrink: 0;
    position: relative;
}

.comm_expert_img {
    width: 100%;
    border: 0;
}

.comm_expert {
    position: absolute;
    top: -0.5em;
    right: -0.5em;
    width: 2em;
    background-color: #f4f5f7;
    border-radius: 5em;
    padding: 0.2em;
    box-shadow: 0 0 0.4em rgba(0,0,0,0.2);
    border: 1px solid #d7d7f9;
    /*
    bottom: -1em;
    left: 0;
        */
    /*
    bottom: -1em;
    left: 50%;
    margin-right: auto;
    margin-left: -3.2em;
    width: 6em;
        background-color: #FFAC2F;
        font-size: 0.7em;
         border-radius: 2em;
          padding: 0.1em 0.7em;
        */
    text-transform: uppercase;
    display: inline-block;
    z-index: 2;
    color: black;
    font-weight: bold;
    text-align: center;
}

    .comm_expert::before {
        /*
        content: '';
        height: 0;
        width: 0;
        display: block;
        position: absolute;
        border-style: solid;
            */
        /*
        bottom: 100%;
        left: 0;
        border-width: .5em .7em 0 0;
        border-color: transparent #D27E00 transparent transparent;
            */
        /*
        top: 0.3em;
        left: -0.8em;
        border-top: 0.8em solid #D27E00;
        border-bottom: 0.8em solid #D27E00;
        border-right: 0.8em solid transparent;
        border-left: 0.8em solid transparent;
        z-index: 1;
            */
    }
/*
    .comm_expert:after {
        content: "";
        height: 0;
        width: 0;
        display: block;
        position: absolute;
        top: 0.3em;
        right: -0.8em;
        border-top: 0.8em solid #D27E00;
        border-bottom: 0.8em solid #D27E00;
        border-right: 0.8em solid transparent;
        border-left: 0.8em solid transparent;
        z-index: 1;
    }

*/

.comm_expert_text {
    /*
    z-index: 3;
    background-color: #FFAC2F;
    padding: 0.1em 0.5em;
    color: black;
    font-weight: bold;
    position: relative;
    display: inline-block;
        */
}

.comm_post_comment .comm_expert {
    /*
    font-size: 0.4em;
        */
    font-size: 0.8em;
}

.profile_image_sm.comm_post_profile_image {
    width: 5em;
    height: 5em;
    border-radius: 5em;
    margin-left: 0;
    margin-right: 0.2em;
}

.comm_post_profile_image {
}

.RemovePhotoUploadBtn {
    position: absolute;
    z-index: 2;
    top: -1em;
    right: -1em;
    font-size: 0.7em;
}

.comm_photo_upload {
    position: relative;
    width: 8em;
    margin-top: 1em;
    margin-left: 4.5em;
    display: none;
}

    .comm_photo_upload IMG {
        max-width: 100%;
        max-height: 8em;
        z-index: 1;
        box-shadow: 0 0 0.5em #22a7ee;
    }

.LikeNum, .CommentNum {
    font-weight: bold;
    font-size: 1rem;
}

.comm_post_view_all {
    margin-top: 1em;
    margin-bottom: 1em;
}

.comm_create_all {
    margin: 0 -0.5em 0 -0.5em;
}

.comm_create_w {
    display: flex;
    align-items: center;
    margin-top: 1em;
}

.CreatePost,
.CreatePinnedPost,
.EditPost,
.EditComment,
.CommentPost {
    border-top-left-radius: 2em !important;
    border-bottom-left-radius: 2em !important;
    padding: .8rem 1rem;
    height: 3em;
    min-height: 3em;
    overflow-y: hidden;
    resize: none;
    box-shadow: none !important;
}

    .CreatePost:focus,
    .CreatePinnedPost:focus,
    .EditPost:focus,
    .EditComment:focus,
    .CommentPost:focus {
        background-color: #f4f5f7 !important;
    }

.AddPhoto {
    border: 0;
    border-left: 0 !important;
    border-right: 0 !important;
    color: #22a7ee !important;
    border-top-right-radius: 2em !important;
    border-bottom-right-radius: 2em !important;
}

.NoAddPhoto {
    border: 0;
    border-left: 0 !important;
    border-right: 0 !important;
    color: #22a7ee !important;
    border-top-right-radius: 2em !important;
    border-bottom-right-radius: 2em !important;
    position: relative;
    z-index: 2;
    padding: .6rem 1.2rem;
}

.AddPhoto:focus,
.AddPhoto.active,
.AddPhoto .btn-outline-secondary:not(:disabled):not(.disabled):active {
    background-color: #f4f5f7 !important;
    box-shadow: none !important;
    color: #006da8 !important;
}

.AddEmoji {
    border: 0;
    border-left: 0 !important;
    border-right: 0 !important;
    color: #22a7ee !important;
}

    .AddEmoji:focus,
    .AddEmoji.active,
    .AddEmoji .btn-outline-secondary:not(:disabled):not(.disabled):active {
        background-color: #f4f5f7 !important;
        box-shadow: none !important;
        color: #006da8 !important;
    }

.SaveEdit {
    border: 0;
    border-left: 0 !important;
    border-right: 0 !important;
    color: #22a7ee !important;
    border-top-right-radius: 2em !important;
    border-bottom-right-radius: 2em !important;
}

    .SaveEdit:focus,
    .SaveEdit.active,
    .SaveEdit .btn-outline-secondary:not(:disabled):not(.disabled):active {
        background-color: #f4f5f7 !important;
        box-shadow: none !important;
        color: #006da8 !important;
    }

.CancelEdit {
    border: 0;
    border-left: 0 !important;
    border-right: 0 !important;
}

    .CancelEdit:focus,
    .CancelEdit.active,
    .CancelEdit .btn-outline-secondary:not(:disabled):not(.disabled):active {
        background-color: #f4f5f7 !important;
        box-shadow: none !important;
        color: #006da8 !important;
    }

.comm_text_before {
    width: 100%;
    display: flex;
    min-width: 1%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.showlesscontent {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.word-break {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.my_shadow1 {
    box-shadow: 0 0 0.7em rgba(0,0,0,0.2);
}

.search_border {
    border: 1px solid #CCC;
    border-radius: 0.5em !important;
    padding: .6rem 3rem .6rem 1rem;
}

    .search_border.form-control:focus {
        background-color: transparent !important;
    }

.search_icon_float {
    margin-left: -2em;
    position: relative;
}

.comm_write_all {
    margin-left: 3.5em;
}

.comm_post_comment {
    margin-left: 4em;
    margin-top: 1em;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

    .comm_post_comment:last-of-type {
        border-bottom: 0;
    }

    .comm_post_comment .profile_image_sm.comm_post_profile_image {
        width: 3em;
        height: 3em;
        border-radius: 3em;
        margin-left: 0;
        margin-right: 0.2em;
    }

    /* APL - 02/22/2022 - I don't think these styles are needed
    .comm_post_comment .CommentBtn,
    .comm_post_comment .NotificationsBtn,
    .comm_post_comment .PinBtn,
    .comm_post_comment .DetailBtn,
    .comm_post_comment .comm_post_view_all {
        display: none !important;
    }
    */

    .comm_post_comment .comm_post_user_w {
        margin: auto auto auto 0.4em;
    }

    .comm_post_comment .comm_post_p {
        margin-top: 0.5em;
    }

    .comm_post_comment .comm_post_img {
        margin-top: 0.5em;
    }

    .comm_post_comment .comm_post_p,
    .comm_post_comment .comm_post_user {
        font-size: 0.95em;
    }

    .comm_post_comment .comm_post_time {
        font-size: 0.7em;
        line-height: 100%;
        color: #666;
    }

    .comm_post_comment .comm_post_btn {
        font-size: 1.3em;
    }

.comm_post_comment_comment {
    margin-left: 8em;
    margin-top: 0.5em;
    margin-bottom: 0.25em;
    padding-bottom: 0.25em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

    .comm_post_comment_comment:last-of-type {
        border-bottom: 0;
    }

.comm_post_edit, .comm_comment_edit {
    display: none;
}

.addReadMore {
    /*
    flex-wrap: wrap;
    flex-shrink: 0;
    flex-direction: column;
        */
    display: block;
}

    .addReadMore.showlesscontent .SecSec,
    .addReadMore.showlesscontent .readLess {
        display: none;
    }

    .addReadMore.showmorecontent .readMore {
        display: none;
    }

    .addReadMore .readMore,
    .addReadMore .readLess {
        font-weight: bold;
        cursor: pointer;
        margin-left: 0.3em;
    }

.addReadMoreWrapTxt.showmorecontent .SecSec,
.addReadMoreWrapTxt.showmorecontent .readLess {
    display: block;
}

.addReadMoreInline {
    /*
    flex-wrap: wrap;
    flex-shrink: 0;
    flex-direction: column;
        */
    display: block;
}

    .addReadMoreInline.showlesscontent .SecSec,
    .addReadMoreInline.showlesscontent .readLess {
        display: none;
    }

    .addReadMoreInline.showmorecontent .readMore {
        display: none;
    }

    .addReadMoreInline .readMore,
    .addReadMoreInline .readLess {
        font-weight: bold;
        cursor: pointer;
        margin-left: 0.3em;
    }

.ReadMoreWhite .readMore {
    color: white !important;
}

.content-box-readmore-overflow {
    position: relative;
    overflow: hidden;
}

    .content-box-readmore-overflow:before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: linear-gradient(rgba(255,255,255,0) 30px, rgba(255,255,255,1));
    }

.readMoreButton {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    margin: 0 0 0 0;
    padding: 0.3em 0;
    background: linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,1));
}

    .readMoreButton .btn {
        padding-top: 0.3em;
        padding-bottom: 0;
    }

.comm_post_img_crop {
    /*
        margin: 1em 0;
    max-height: 10em;
    overflow: hidden;
    */
    position: relative;
}

.picMore {
    z-index: 2;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    display: flex;
    cursor: pointer;
}

.GlowSuccess2 {
    position: relative;
    background-color: #CCFFDD;
    box-shadow: 0 4px 0 0 lightgreen;
    box-shadow: 0 -4px 0 0 lightgreen;
    box-shadow: -4px 0 0 0 lightgreen;
    box-shadow: 4px 0 0 0 lightgreen;
    box-shadow: 0 0 0 4px lightgreen;
}

.comm_dots {
    width: 3em;
    align-self: flex-end;
    margin: auto 1em 1em auto;
}

.comm_crop {
    max-height: 22em;
    overflow: hidden;
}

.comm_uncrop {
    max-height: 200em;
    overflow: visible;
}

.comm_post_img {
    max-width: 100%;
    margin-top: 1em;
}

.JoinTeamBtn {
    padding: 1em 2em;
}

.team_ul {
    list-style: none;
    padding: 0.5em 0 0em 0em;
    margin: 0;
    text-align: left;
    z-index: 10;
    /*
    border-left: 5px solid #ccc;
        */
}

.team_ul2 {
    list-style: none;
    padding: 0 0 0 1em;
    margin: 0;
    text-align: left;
}

    .team_ul li, .team_ul2 li {
        margin: 0;
        padding: 0.25em 0;
        text-align: left;
        font-weight: 600;
    }

.team_ul li {
    color: white;
    padding: 0.25em 0.25em 0.25em 0;
    display: inline-block;
}

.comm_team_top_btn {
    padding: 0.25em 1em;
}

.team_leader_ul {
    list-style: none;
    margin: 1em 0 1em 0em;
    padding: 0;
    text-align: left;
}

    .team_leader_ul li {
        margin: 0;
        padding: 0.25em 0;
        font-size: 1em;
    }

.accordion4_w {
    border: 1px solid rgba(0,0,0,0.1);
}

.accordion4_text {
    position: absolute;
    right: 3.5em;
    top: 1.5em;
    font-size: 0.8em;
    color: #666;
}

.accordion4 {
    position: relative;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    padding: 1em;
    width: 100%;
    text-align: left;
    border: none;
    outline: none !important;
    transition: 0.4s;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1em;
    margin: 0 0 0 0;
    line-height: 110%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    /*
    border-left: 5px solid #28a745;
        */
    border-left: 5px solid #ccc;
}

    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .active, .accordion4:hover {
        background-color: #Fff;
    }

    .accordion4:after {
        content: "\2212"; /* Unicode character for "minus" sign (-) */
        font-family: "Font Awesome 5 Free";
        content: "\f078";
        color: grey;
        font-weight: 900; /*need this for regular icon set*/
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        font-size: 1.2em;
        line-height: 100%;
        color: #ccc;
        margin-top: 0.1em;
        margin-left: auto;
        margin-right: 0;
        transform: rotate(180deg);
        transition: transform 0.2s linear;
        display: inline-block;
    }

    .accordion4.collapsed:after {
        content: '\f078'; /* chevron down */
        font-size: 1.2em;
        line-height: 100%;
        color: #ccc;
        margin-right: 0;
        margin-left: auto;
        transform: rotate(0deg);
    }

/*
    .accordion4.active:after {
        transform: rotate(180deg);
        content: "\f078"; // chevron down rotated, \f077 is the chevron up /
}
    */
/*checkbox buttons*/
input[type=checkbox].with-fontA {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

    input[type=checkbox].with-fontA + label:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 300;
        display: inline-flex;
        content: "\f0c8";
        letter-spacing: 10px;
        font-size: 1.2em;
        color: #C4C4F7;
        margin-top: -0.15em;
    }

    input[type=checkbox].with-fontA:checked + label:before {
        content: "\f00c";
        font-weight: 900;
        font-size: 1.2em;
        color: #00df70;
        letter-spacing: 10px;
    }

    input[type=checkbox].with-fontA:focus + label:before {
        /*
            font-weight: bold;
        color: orange;

        */
    }

.comm_guidelines {
    line-height: 110% !important;
    display: inline-block;
}

.comm-max-w {
    max-width: 42em;
}

@media (hover: hover) {
    /*hovers only*/
    .accordion4:hover {
        /*
        background-color: #22a7ee;
        color: #fff;
        border: 1px solid rgba(0,0,0,0.1);
        */
    }

        .accordion4:hover:after {
            /*
            color: #fff;
                */
        }

    .AddPhoto:hover {
        background-color: #f4f5f7 !important;
        box-shadow: none !important;
        color: #006da8 !important;
    }

    .AddEmoji:hover {
        background-color: #f4f5f7 !important;
        box-shadow: none !important;
        color: #006da8 !important;
    }

    .team_top_btn:hover, .team_top_btn2:hover {
        color: #fff !important;
        opacity: .8;
    }
}

.section-member-popover {
    /*display: none;*/
    opacity: 0.0;
    position: absolute;
    z-index: -1;
    transition: width 250ms, height 500ms;
    transition-timing-function: ease-out;
}

    .AddPopoverMember:hover + .section-member-popover, .section-member-popover:hover {
        display: block;
        position: absolute;
        top: -10px;
        border: 3px solid #ccc !important;
        background-color: #FFF !important;
        z-index: 10;
        opacity: 1.0;
        padding: .6rem 1.2rem;
        border-radius: 8px !important;
    }

    .section-member-popover .profile_image_sm.comm_post_profile_image {
        width: 7em;
        height: 7em;
        border-radius: 7em;
        margin-left: 0;
        margin-right: 0.2em;
    }

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
}

@media only screen and (min-width : 48em) and (max-width : 64em) {
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) and (orientation : portrait) {
    /* IPAD VERTICAL ONLY*/
}

@media screen and (max-width: 86em) {
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 46em) {
    /*mobile fixes & ipad narrow*/
    .profile_image_sm.comm_post_profile_image {
        width: 3em;
        height: 3em;
        border-radius: 3em;
    }
}

@media screen and (min-width:34em) and (max-width: 46em) {
}

@media screen and (max-width: 34em) {
    .comm_post_p {
        font-size: 1em;
    }

    .comm_post_comment .comm_post_p,
    .comm_post_comment .comm_post_user {
        font-size: 0.9em;
    }

    .comm_all_w {
        padding-left: 1em;
        padding-right: 1em;
        margin-left: -1.1em;
        margin-right: -1.1em;
    }

    .comm_pinned_all_w {
        padding-left: 1em;
        padding-right: 1em;
        /*
        margin-left: -1em;
            */
    }

        .comm_pinned_all_w .comm_all_w {
            padding-left: 1em;
            padding-right: 1em;
        }

    .JoinTeamBtn {
        padding: 0.6em 1.2em;
    }

    .accordion4_w {
        margin-left: -1.3em;
        margin-right: -1.1em;
    }

    .team_top_btn {
        /*padding: 0.8em 0.8em !important;*/
        padding: 0 !important;
        height: 3em;
        width: 3em;
        font-size: 0.9em !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        /*margin-top: -0.5em !important;
        line-height: 100% !important;*/
        line-height: 3em !important;
    }

    .team_top_btn2 {
        /*padding: 0.8em 1em !important;*/
        padding: 0 !important;
        height: 3em;
        width: 3em;
        font-size: 0.5em !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        /*margin-top: -0.5em !important;
        line-height: 100% !important;*/
        line-height: 3em !important;
    }

    .team_top_btn3 {
        padding: 0.8em 0.8em !important;
        font-size: 0.9em !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        margin-top: -0.5em !important;
        line-height: 100% !important;
    }

    .profile_image_edit {
        display: inline-block;
        vertical-align: middle;
    }

    .Notifications_w {
        margin-left: 0em;
        /*
        margin-right: 1em;
            */
    }

    .comm_photo_upload {
        margin-left: 1.5em;
    }

    #CommCategory {
        width: 100%;
    }

    .comm_post_btn_wnum {
    }

    .comm_post_btn {
        font-size: 1.2em;
        margin-right: 1.2em;
        margin-right: auto;
    }

    .InfoBtn {
        margin-right: 0;
    }

    .comm_post_comment .comm_post_btn {
        font-size: 1.1em;
    }

    .comm_post_i {
        justify-content: space-between;
    }

    .LikeBtnW, .CommentBtnW {
        width: 5em;
    }

    .LikeBtn, .CommentBtn {
        margin-right: 0.5em !important;
    }

    .LikeNum, .CommentNum {
        font-size: 0.8rem;
    }

    .comm_cat_btn {
        width: 33.3333%;
    }

    .profile_image_sm.comm_write_profile_image {
        width: 2em;
        height: 2em;
        border-radius: 2em;
        margin-left: 0;
        margin-right: 0.2em;
        min-width: 2em;
    }

    .PostBtn, .CommentPostBtn {
        padding: .6rem;
        font-size: 0.8em;
        flex-shrink: 0;
    }

    .AddPhoto {
        padding: 0.6rem 0.6em 0.6rem 0;
    }

    .AddEmoji {
        padding: 0.6rem 0.6em 0.6rem 0;
    }

    .CreatePost, .CreatePinnedPost, .EditPost, .EditComment, .CommentPost {
        padding: .8rem 0.2rem 0.8rem 1em;
    }

    .comm_write_all {
        margin-left: 0em;
    }

    .comm_post_ip .form-check {
        flex: 0 0 100%;
    }

    .Commands Button {
        display: block;
        margin-right: 0;
        margin-left: 0;
        padding: 0.2em 1em;
        width: 100%;
        text-align: left;
    }

    .comm_post_ip {
        flex-wrap: wrap;
    }

    .comm_post_comment {
        margin-left: 0.75em;
    }

        .comm_post_comment .profile_image_sm.comm_post_profile_image {
            width: 2em;
            min-width: 2em;
            height: 2em;
            border-radius: 2em;
            margin-left: 0;
            margin-right: 0.2em;
            flex: 0 0;
        }

        .comm_post_comment .comm_post_i {
            margin-top: 0.1em;
        }

    .comm_icons_w {
        display: inline-block;
        margin-right: 1%;
        margin-left: 1%;
        text-align: center;
        color: #333;
        vertical-align: top;
    }

    .comm_icon_pic {
        max-width: 4em;
    }

    .comm_icon_p {
        font-size: 0.8em;
        margin: 0.5em auto 0 auto;
        width: 100%;
    }

    .comm_expert {
        font-size: 0.8em;
        /*
        font-size: 0.5em;
            */
    }

    .comm_post_comment .comm_expert {
        font-size: 0.5em;
        /* font-size: 0.4em;*/
    }

    .CancelEdit {
        padding: 0.5em !important;
    }

    .CreatePost,
    .CreatePinnedPost,
    .EditPost,
    .EditComment,
    .CommentPost {
        line-height: normal;
    }

    .ScrollTopBtn {
        right: 1em;
        bottom: 3.5em;
    }
}
.fg-emoji-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 370px;
    height: 400px;
    border-radius: 5px;
    box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.62);
    background-color: white;
    overflow: hidden;
    z-index: 9999;
}

    .fg-emoji-container svg {
        max-width: 100%;
        box-sizing: border-box;
        width: 15px;
        height: 15px;
    }

    .fg-emoji-container i {
        max-width: 100%;
        box-sizing: border-box;
    }

.fg-emoji-picker-category-title {
    display: block;
    margin: 20px 0 0 0;
    padding: 0 10px 5px 10px;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: bold;
    flex: 0 0 calc(100% - 20px);
    border-bottom: 1px solid #ededed;
}

.fg-emoji-nav {
    background-color: #646772;
}

    .fg-emoji-nav li a svg {
        transition: all .2s ease;
        fill: white;
    }

    .fg-emoji-nav li:hover a svg {
        fill: black;
    }

    .fg-emoji-nav li a i {
        transition: all .2s ease;
        fill: white;
        color: white;
    }

    .fg-emoji-nav li:hover a i {
        fill: black;
        color: #646772;
    }

    .fg-emoji-nav ul {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #dbdbdb;
    }

        .fg-emoji-nav ul li {
            flex: 1;
        }

            .fg-emoji-nav ul li a {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 40px;
                transition: all .2s ease;
            }

                .fg-emoji-nav ul li a:hover {
                    background-color: #e9ebf1;
                }

            .fg-emoji-nav ul li.active a {
                background-color: #e9ebf1;
            }

            .fg-emoji-nav ul li.emoji-picker-nav-active a {
                background-color: #e9ebf1;
            }

                .fg-emoji-nav ul li.emoji-picker-nav-active a svg {
                    fill: #646772;
                }

                .fg-emoji-nav ul li.emoji-picker-nav-active a i {
                    fill: #646772;
                    color: #646772;
                }

.fg-emoji-picker-move {
    /* pointer-events: none; */
    cursor: move;
}

.fg-picker-special-buttons a {
    background-color: #85868b; /*#ed5e28*/
}

.fg-picker-special-buttons:last-child a {
    box-shadow: inset 1px 0px 0px 0 rgba(0, 0, 0, 0.11);
}

.fg-emoji-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 323px;
}

.fg-emoji-picker-category-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
}

.fg-emoji-list li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    flex: 0 0 calc(100% / 6);
    height: 50px;
}

    .fg-emoji-list li a {
        position: absolute;
        width: 100%;
        height: 100%;
        text-decoration: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        font-size: 23px;
        background-color: #ffffff;
        border-radius: 3px;
        transition: all .3s ease;
    }

        .fg-emoji-list li a:hover {
            background-color: #ebebeb;
        }

.fg-emoji-picker-search {
    position: relative;
}

    .fg-emoji-picker-search input {
        border: none;
        box-shadow: 0 0 0 0;
        outline: none;
        width: calc(100% - 30px);
        display: block;
        padding: 10px 15px;
        background-color: #f3f3f3;
    }

    .fg-emoji-picker-search .fg-emoji-picker-search-icon {
        position: absolute;
        right: 0;
        top: 0;
        width: 30px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
.sp_text1, .sp_num1, .sp_text2 {
    color: white;
}

.sp_text_disclaimer {
    font-size: 0.8em;
    text-align: left;
}

.sp_num1 {
    font-size: 3em;
    font-weight: 900;
    margin-right: 0.3em;
    text-shadow: 0 1px 0px #3D0A0A, 1px 0 0px #3D0A0A, 1px 2px 1px #3D0A0A, 2px 1px 1px #3D0A0A, 2px 3px 2px #3D0A0A, 3px 2px 2px #3D0A0A, 3px 4px 2px #3D0A0A, 4px 3px 3px #3D0A0A, 4px 5px 3px #3D0A0A, 5px 4px 2px #3D0A0A, 5px 6px 2px #3D0A0A, 6px 5px 2px #3D0A0A, 6px 7px 1px #3D0A0A, 7px 6px 1px #3D0A0A, 7px 8px 0px #3D0A0A, 8px 7px 0px #3D0A0A;
}

.sp_num1_history {
    font-size: 3em;
    font-weight: 900;
    margin-right: 0.3em;
}

.TodaysSparkPoints {
    min-width: 1.4em;
    text-align: left;
    margin-right: 0 !important;
}

.sp_text1 {
    font-size: 1.4em;
    font-weight: 700;
    text-align: left;
}

.sp_text2 {
    font-size: 1.4em;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.sp_top_ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .sp_top_ul li {
        padding: 0.2em 0;
        margin: 0;
    }

.sp_bar1 {
    margin: auto 0.2em 1.5em 2em;
    width: 30%;
}

.sp_bar1_check {
    margin: auto 2em 1em 0em;
    width: 5%;
}

.sp_bar1_w {
    height: 1em;
    font-size: 0.6em;
    border-radius: 1em;
    text-align: left;
    background-color: #E8E9F0;
}

.sp_bar1_progress {
    background-color: #00DF70;
    height: 1em;
    border-radius: 1em;
    width: 0%;
    transition: width 1s ease;
}

.sp_daily_wheel_text1 {
    color: white;
    font-size: 8em;
    font-weight: 900;
    line-height: 100%;
    margin-top: 0.3em;
    cursor: pointer;
    text-shadow: 0 1px 0px #3D0A0A, 1px 0 0px #3D0A0A, 1px 2px 1px #3D0A0A, 2px 1px 1px #3D0A0A, 2px 3px 2px #3D0A0A, 3px 2px 2px #3D0A0A, 3px 4px 2px #3D0A0A, 4px 3px 3px #3D0A0A, 4px 5px 3px #3D0A0A, 5px 4px 2px #3D0A0A, 5px 6px 2px #3D0A0A, 6px 5px 2px #3D0A0A, 6px 7px 1px #3D0A0A, 7px 6px 1px #3D0A0A, 7px 8px 0px #3D0A0A, 8px 7px 0px #3D0A0A;
}

.sp_daily_wheel_text2 {
    color: white;
    font-size: 2em;
    font-weight: 700;
    cursor: pointer;
    text-shadow: 0 1px 0px #3D0A0A, 1px 0 0px #3D0A0A, 1px 2px 1px #3D0A0A, 2px 1px 1px #3D0A0A, 2px 3px 2px #3D0A0A, 3px 2px 2px #3D0A0A, 3px 4px 2px #3D0A0A, 4px 3px 3px #3D0A0A, 4px 5px 3px #3D0A0A, 5px 4px 2px #3D0A0A, 5px 6px 2px #3D0A0A, 6px 5px 2px #3D0A0A, 6px 7px 1px #3D0A0A, 7px 6px 1px #3D0A0A, 7px 8px 0px #3D0A0A, 8px 7px 0px #3D0A0A;
}

.bonus_shadow1 {
    text-shadow: 0 1px 0px #864702, 1px 0 0px #864702, 1px 2px 1px #864702, 2px 1px 1px #864702, 2px 3px 2px #864702, 3px 2px 2px #864702, 3px 4px 2px #864702, 4px 3px 3px #864702, 4px 5px 3px #864702, 5px 4px 2px #864702, 5px 6px 2px #864702, 6px 5px 2px #864702, 6px 7px 1px #864702, 7px 6px 1px #864702, 7px 8px 0px #864702, 8px 7px 0px #864702;
}

.bonus_shadow2 {
    text-shadow: 0 1px 0px #864702, 1px 0 0px #864702, 1px 2px 1px #864702, 2px 1px 1px #864702, 2px 3px 2px #864702, 3px 2px 2px #864702, 3px 4px 2px #864702, 4px 3px 3px #864702, 4px 5px 3px #864702, 5px 4px 2px #864702, 5px 6px 2px #864702, 6px 5px 2px #864702, 6px 7px 1px #864702, 7px 6px 1px #864702, 7px 8px 0px #864702, 8px 7px 0px #864702;
}

.sp_table {
    border-collapse: collapse;
    width: 100%;
}

.sp_table_tr {
}

.sp_table tr td, .sp_table tr th {
    padding: 0.8em 0.5em;
    border-bottom: 1px solid #D5D5D5;
    border-spacing: 0px;
}

.sp_table tr th {
    border-spacing: 0px;
    border-style: none;
}

.sp_arrow_td {
    position: relative;
}

.sp_arrow {
    opacity: 0.3;
}

.sp_table tr td.sp_arrow_td {
    padding-left: 0;
    padding-right: 0;
}
/*Wheel*/

.spin_w {
    position: relative;
    height: 18em;
    width: 18em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 100;
    border-radius: 100%;
    box-shadow: 0.3em 0.3em 1em rgba(0, 0, 0, 0.4);
}

.spun {
    animation: spin 5s ease-in-out forwards;
    -moz-animation: spin 5s ease-in-out forwards;
    -webkit-animation: spin 5s ease-in-out forwards;
    -ms-animation: spin 5s ease-in-out forwards;
}

.spunBonus {
    animation: spinBonus 5s ease-in-out forwards;
    -moz-animation: spinBonus 5s ease-in-out forwards;
    -webkit-animation: spinBonus 5s ease-in-out forwards;
    -ms-animation: spinBonus 5s ease-in-out forwards;
}

.wheel_bg {
    background-image: url(/content/images/sparkpoints/sparkpoints_wheel_bg_v1.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 18em;
    width: 18em;
    border-radius: 18em;
    position: relative;
}

.wheel_bonus_bg {
    background-image: url(/content/images/sparkpoints/sparkpoints_wheel_bonus_bg_v1.svg);
}

.wheel_birthday_bg {
    background-image: url(/content/images/sparkpoints/sparkpoints_wheel_birthday_bg_v1.svg);
}

.spin_button, .spinBonus_button {
    position: relative;
    display: block;
    margin: auto auto auto auto;
    height: 100%;
    width: 100%;
    padding: 0 !important;
}

.center_btn {
    text-align: center;
}

.wheel_ad {
    width: 24%;
    height: 24%;
    overflow: hidden;
    position: absolute;
    top: 38%;
    left: 38%;
    z-index: 101;
    border-radius: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide {
    z-index: 102;
    position: relative;
    width: 100%;
}

.slide_btn {
    padding: 0 !important;
    margin: auto !important;
}

.slot_all {
    box-sizing: border-box;
    color: #fff;
    width: 4em;
    height: 4em;
    font-weight: bold;
    text-align: center;
    position: absolute;
    display: block;
}

.slot_num {
    display: block;
    font-size: 2em;
    text-align: center;
    position: relative;
    line-height: 2em;
    transform: rotate(-90deg);
}

.dvd {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.slot8 {
    left: 15%;
    top: 62.222%;
    transform: rotate(45deg);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(45deg);
}

.slot7 {
    left: 5.555%;
    top: 38.888%;
    transform: rotate(90deg);
    -ms-transform: rotate(165deg);
    -webkit-transform: rotate(90deg);
}

.slot6 {
    left: 15%;
    top: 15.5%;
    transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.slot5 {
    left: 38.888%;
    top: 5.555%;
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}

.slot4 {
    left: 62.222%;
    top: 15.5%;
    transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
}

.slot3 {
    left: 72.222%;
    top: 38.888%;
    transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
}

.slot2 {
    left: 62.222%;
    top: 62.222%;
    transform: rotate(315deg);
    -ms-transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
}

.slot1 {
    left: 38.888%;
    top: 72.222%;
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

#spin_final_ad {
    display: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.wheel_pointer {
    position: absolute; /*bottom:-0.8em; left:50%; margin-left:-0.6em;*/
    top: 50%;
    left: -1em;
    margin-top: -0.6em;
    width: 0;
    height: 0;
    border-top: 0.6em solid transparent;
    border-bottom: 0.6em solid transparent;
    border-left: 0.6em solid #fff;
}
/*end wheel*/

.c100.SparkPointsCirc {
    z-index: 5;
    position: relative;
    background-color: #f4f5f7;
    background-color: #E8E9F0;
    font-size: 2.5em;
}

.circ_desc_icon {
    /*
    font-size: 0.05em !important;
    position: absolute !important;
    bottom: 3.5em !important;
    left: 50% !important;
    margin-left: -3em;
    width: 6em;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center !important;
    font-style: normal;
    display: block !important;
    color: #333;
    z-index: 4;
        */
    position: absolute !important;
    bottom: 0.25em !important;
    left: 50% !important;
    margin-left: -1em;
    width: 2em;
    font-size: 0.4em;
    text-align: center !important;
    display: block !important;
    z-index: 4;
}

.DailyGoalCompleteTop {
    position: absolute;
    top: 0;
    right: 0;
    background-color: white;
    border-radius: 1em;
    z-index: 55;
}

#fave5 {
    position: relative;
    width: 100%;
    height: 100%;
}

.waytogo {
    width: 25%;
    position: absolute;
    z-index: 0;
    right: 37.5%;
    top: 0em;
    display: none;
}

.trophies {
    padding: 1em 0 1em 0;
    cursor: pointer;
}

.trophy_points_text {
    text-align: center;
    font-weight: bold;
    display: block;
    padding-top: 2em;
}

    .trophy_points_text:before {
        content: "";
        width: 1.2em;
        height: 1.2em;
        background: #f5f5fe;
        position: absolute;
        left: 50%;
        margin-left: -0.6em;
        bottom: 2.5em;
        border-radius: 1.2em;
        z-index: 2;
    }

.trophies.complete .trophy_points_text:before {
    background: #00df70;
}

.trophies.complete .trophies_progress_bar {
    content: "";
    width: 100%;
    height: 0.625em;
    background: #00df70;
    position: absolute;
    right: 50%;
    bottom: 4em;
    border-radius: 0.625em;
    z-index: 2;
}

.trophies.trophy_inprogress .trophies_progress_bar {
    content: "";
    width: 0%;
    height: 0.625em;
    background: #00df70;
    position: absolute;
    left: -50%;
    bottom: 4em;
    border-radius: 0.625em;
    z-index: 2;
}

.trophy {
    margin: auto;
    text-align: center;
    /*visibility: hidden;*/
}

.trophies_gray img {
    opacity: 0.5;
    filter: brightness(70%);
    filter: grayscale(100%);
}

.trophies_gray {
    color: #888;
}

.reached_checkmark_img {
    width: 60%;
}

@media (hover: hover) {
    /*hovers only*/
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
}

@media only screen and (min-width : 48em) and (max-width : 64em) {
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) and (orientation : portrait) {
    /* IPAD VERTICAL ONLY*/
}

@media screen and (max-width: 86em) {
    .wheel_col {
        font-size: 0.9em;
    }
}

@media screen and (max-width: 50em) {
    .wheel_col {
        font-size: 0.7em;
    }

    .sp_num1 {
        font-size: 2em;
    }

    .sp_text1 {
        font-size: 1.1em;
    }

    .sp_text2 {
        font-size: 1.1em;
    }
}

@media screen and (max-width: 46em) {
    /*mobile fixes & ipad narrow*/
}

@media screen and (min-width:36em) and (max-width: 46em) {
}

@media screen and (max-width: 36em) {
    .page_width_full_mobile {
        padding: 1em 0 1em 0;
    }

    .sp_daily_wheel_text1 {
        font-size: 5em;
    }

    .sp_daily_wheel_text2 {
        font-size: 1.2em;
    }

    .sp_text1, .sp_num1, .sp_text2 {
        color: black;
    }

    .sp_num1, .sp_num1_history {
        font-size: 2em;
        font-weight: 900;
        margin-right: 0.3em;
        text-shadow: none;
    }

    .sp_text1 {
        font-size: 1em;
        font-weight: 700;
    }

    .sp_text2 {
        font-size: 1em;
        font-weight: 700;
        color: #666;
    }

    .sp_bar1 {
        margin: auto 0.2em 0.8em 2em;
    }

    .sp_bar1_check {
        margin: auto 1.2em 0.38em 0em;
    }

    .sp_top_ul li {
        border-bottom: 1px solid #D5D5D5;
        padding: 0.2em 1em;
    }

    .sp_table tr td, .sp_table tr th {
        padding: 0.8em 0.5em 0.8em 1em;
    }

    .sp_table tr th {
        padding: 0.8em 0.5em 0em 1em;
    }

    /*wheel*/
    .spin_w {
        height: 11em;
        width: 11em;
    }

    .wheel_bg {
        height: 11em;
        width: 11em;
        border-radius: 11em;
    }

    .slot_all {
        width: 2.6em;
        height: 2.6em;
    }

    .slot_num {
        font-size: 1.6em;
        line-height: 1.6em;
    }

    .spin_button, .spinBonus_button {
        font-size: 0.8em;
    }
    /*end wheel*/

    .trophy_points_text:before {
        width: 1.2em;
        height: 1.2em;
        margin-left: -0.6em;
        bottom: 2.8em;
        border-radius: 1.2em;
    }

    .wheel_col {
        font-size: 1em;
    }

    .c100.SparkPointsCirc {
        font-size: 2.2em;
    }
}
/*checkbox buttons*/
input[type=checkbox].with-fontA-bell {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

    input[type=checkbox].with-fontA-bell + label:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 300;
        display: inline-flex;
        content: "\f0f3";
        letter-spacing: 10px;
        font-size: 1.2em;
        color: #FF7B08;
        margin-top: -0.15em;
    }

    input[type=checkbox].with-fontA-bell:checked + label:before {
        content: "\f0f3";
        font-weight: 900;
        font-size: 1.2em;
        color: #FF7B08;
        letter-spacing: 10px;
    }

    input[type=checkbox].with-fontA-bell:focus + label:before {
        /*
            font-weight: bold;
        color: orange;

        */
    }

/*radio buttons*/
input[type=radio].with-fontA {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

    input[type=radio].with-fontA + label:before {
        font-family: "Font Awesome 5 Free";
        font-weight: 300;
        display: inline-block;
        content: "\f111";
        letter-spacing: 10px;
        font-size: 1.2em;
        color: #C4C4F7;
        width: 1.4em;
        margin-top: -0.15em;
    }

    input[type=radio].with-fontA:checked + label:before {
        content: "\f00c";
        font-weight: 900;
        font-size: 1.2em;
        color: #00df70;
        letter-spacing: 10px;
    }

    input[type=radio].with-fontA:focus + label:before {
        font-weight: bold;
        color: #00df70;
    }

.DropdownActionsBtn {
    padding: 0.6rem 0.8rem;
    box-shadow: none !important;
}

.feat_checkbox_clicker {
    width: 2em;
    height: 2em;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0.6em;
    z-index: 99;
}

.reminder_border {
    border-left: 2px dotted #d7d7f9;
}

.edit_label {
    font-weight: 600;
    display: flex;
    flex-wrap: nowrap;
}

.btn-goal-link {
    border-bottom: 0.06em solid #d5d5d5;
}

    .btn-goal-link:last-of-type {
        border-bottom: 0;
    }

#GoalList, #CompletedGoalList {
    margin: 0 -0.5em;
    padding: 0;
    list-style: none;
}

.task_list_goals {
    position: relative;
    padding: 0.5em 0.5em;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.goal_ideas_ul {
    margin: 0;
    padding: 0;
    list-style: none;
    -moz-column-count: 2;
    -moz-column-gap: 1em;
    -webkit-column-count: 2;
    -webkit-column-gap: 1em;
    column-count: 2;
    column-gap: 1em;
}

    .goal_ideas_ul Li {
        margin: 0;
        padding: 0.2em 0;
    }

.goal_idea_btn {
    border: 1px solid #22a7ee;
    padding: 0.6rem 1rem 0.6rem 0.6em;
    white-space: normal;
}

.goal_idea_img {
    width: 3em;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.8em;
}

.goal_idea_text {
    display: inline-block;
    vertical-align: middle;
    max-width: 76%;
    line-height: normal;
}
/*
.btn-goal-link:first-of-type .MoveUpGoalBtn {
    display: none !important;
}

.btn-goal-link:last-of-type .MoveDownGoalBtn {
    display: none !important;
}
*/
.goal_modal_check {
    width: 2em;
    margin: 0 0 auto 0;
}

.goal_modal_bg {
    background-color: white;
    border-radius: 0.5em;
    box-shadow: 0.1em 0.2em 0.6em rgba(0,0,0,0.08);
    padding: 0.5em 1em;
    z-index: 3;
    border: 2px solid #F8C206;
    overflow-wrap: break-word;
    word-break: break-word;
}

.goal_modal_index {
    z-index: 2;
    position: relative;
}

.GoalTest {
    white-space: pre;
}

.starburst_bg1 {
    background-image: url(/content/images/Goals/starburst_bg1.svg);
    background-size: 60%;
    background-position: center 0em;
    background-repeat: no-repeat;
    position: absolute;
}

.starburst_bg2 {
    width: 10em;
    position: absolute;
    z-index: 0;
    margin: auto;
    top: -5em;
}

.GoalText {
    overflow-wrap: break-word;
    word-break: break-word;
}

@media (hover: hover) {
    /*hovers only*/
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
}

@media only screen and (min-width : 48em) and (max-width : 64em) {
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) and (orientation : portrait) {
    /* IPAD VERTICAL ONLY*/
}

@media screen and (max-width: 86em) {
    .goal_ideas_ul {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 46em) {
    /*mobile fixes & ipad narrow*/
}

@media screen and (min-width:34em) and (max-width: 46em) {
}

@media screen and (max-width: 34em) {
    .reminder_border {
        border-left: 0;
    }

    .starburst_bg1 {
        background-position: center 1.8em;
    }
}
.card_e {
    border-radius: 1em;
    box-shadow: 0 0 1em rgba(0,0,0,0.15);
    background-color: white;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.card_e_mid {
    /*min-height: 75%;*/
    align-items: center;
    align-self: center;
    width: 100%;
    margin: auto 0;
    display: flex;
    flex-direction: column;
}

.card_e_food {
    background-color: #009337;
    background-image: url(/content/images/Tools/tools_food.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}

.card_e_fitness {
    background-color: #D57000;
    background-image: url(/content/images/Tools/tools_fitness.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}

.card_e_weight {
    background-color: #006DA8;
    background-image: url(/content/images/Tools/tools_weight.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}

.card_e_sparkcoach {
    background-color: #682B80;
    background-image: url(/content/images/Tools/tools_sparkcoach.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}

.card_e_sparkpoints {
    background-color: #950B20;
    background-image: url(/content/images/Tools/tools_sparkpoints.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}

.card_e_veg {
    background-color: #009337;
    background-image: url(/content/images/Tools/tools_veg.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}

.card_e_water {
    background-color: #006DA8;
    background-image: url(/content/images/Tools/tools_water.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}

.tools_chart_legend {
    width: 1em;
    height: 1em;
    background-color: #00DF70;
    vertical-align: middle;
    margin-right: 0.5em;
}

@media (hover: hover) {
    /*hovers only*/
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
}

@media only screen and (min-width : 48em) and (max-width : 64em) {
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) and (orientation : portrait) {
    /* IPAD VERTICAL ONLY*/
}

@media screen and (max-width: 86em) {
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 46em) {
    /*mobile fixes & ipad narrow*/
}

@media screen and (min-width:36em) and (max-width: 46em) {
}

@media screen and (max-width: 36em) {
    .card_e_mid {
        min-height: 1%;
    }
}
.app {
    position: relative;
    overflow: hidden;
    height: 100%;
    margin: auto 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

.app-one {
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.side {
    padding: 0;
    margin: 0;
    height: 100%;
}

.side-one {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    position: relative;
    display: block;
    top: 0;
    overflow-y: auto !important;
}

.side-two {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    position: relative;
    top: -100%;
    left: -100%;
    -webkit-transition: left 0.3s ease;
    transition: left 0.3s ease;
}

.heading {
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    background-color: white;
    z-index: 1000;
}

.heading-avatar {
    padding: 0;
    cursor: pointer;
}

.heading-avatar-icon img {
    border-radius: 50%;
    height: 40px;
    width: 40px;
}

.heading-name {
    padding: 0 !important;
    cursor: pointer;
}

.heading-name-meta {
    font-weight: 600;
    font-size: 100%;
    padding: 5px;
    padding-bottom: 0;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #000;
    display: block;
}

.heading-online {
    display: none;
    padding: 0 5px;
    font-size: 12px;
    color: #93918f;
}

.heading-compose {
    padding: 0;
}

    .heading-compose i {
        text-align: center;
        padding: 5px;
        color: #93918f;
        cursor: pointer;
    }

.heading-dot {
    padding: 0;
    margin-left: 10px;
}

    .heading-dot i {
        text-align: right;
        padding: 5px;
        color: #93918f;
        cursor: pointer;
    }

.searchBox {
    padding: 0 !important;
    margin: 0 !important;
    height: 60px;
    width: 100%;
}

.searchBox-inner {
    height: 100%;
    width: 100%;
    padding: 10px !important;
    background-color: #fbfbfb;
}

    .searchBox-inner input:focus {
        outline: none;
        border: none;
        box-shadow: none;
    }

.sidebar-titlebar {
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 1px solid #ccc;
}

.sidebar {
    padding: 4.1em 0 0 0 !important;
    margin: 0 !important;
    background-color: #F4F5F7;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid #f7f7f7;
    height: 100%;
}

.sidebar-body {
    position: relative;
    padding: 0.8em 0.5em;
    border-bottom: 1px solid #CCCCCC;
    border-left: 3px solid transparent;
    margin: 0 !important;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
}

.sidebar-avatar {
    text-align: center;
    padding: 0 !important;
    flex: 1 1 18%;
}

    .sidebar-avatar ul, .sidebar-avatar li {
        margin: 0;
        list-style: none;
        padding: 0;
    }

.sidebar-avatar2, .sidebar-avatar3, .sidebar-avatar4 {
    position: relative;
    width: 3em;
    height: 3em;
    min-width: 3em;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

    .sidebar-avatar2 .profile_image_sm {
        width: 1.8em;
        height: 1.8em;
        min-width: 1.8em;
        border-radius: 1.8em;
        margin-left: 0;
        margin-right: 0;
    }

    .sidebar-avatar2 ul li:nth-child(1) .profile_image_sm {
        position: absolute;
        left: 0;
        top: 0;
    }

    .sidebar-avatar2 ul li:nth-child(2) .profile_image_sm {
        position: absolute;
        left: 1.1em;
        top: 1.1em;
    }

    .sidebar-avatar3 .profile_image_sm {
        width: 1.7em;
        height: 1.7em;
        min-width: 1.7em;
        border-radius: 1.7em;
        margin-left: 0;
        margin-right: 0;
    }

    .sidebar-avatar3 ul li:nth-child(1) .profile_image_sm {
        position: absolute;
        left: 0;
        top: 0;
    }

    .sidebar-avatar3 ul li:nth-child(2) .profile_image_sm {
        position: absolute;
        left: 0.55em;
        top: 1.4em;
    }

    .sidebar-avatar3 ul li:nth-child(3) .profile_image_sm {
        position: absolute;
        left: 1.5em;
        top: 0em;
    }

    .sidebar-avatar4 .profile_image_sm {
        width: 1.7em;
        height: 1.7em;
        min-width: 1.7em;
        border-radius: 1.7em;
        margin-left: 0;
        margin-right: 0;
    }

    .sidebar-avatar4 ul li:nth-child(1) .profile_image_sm {
        position: absolute;
        left: 0;
        top: 0;
    }

    .sidebar-avatar4 ul li:nth-child(2) .profile_image_sm {
        position: absolute;
        left: 0.15em;
        top: 1.3em;
    }

    .sidebar-avatar4 ul li:nth-child(3) .profile_image_sm {
        position: absolute;
        left: 1.5em;
        top: 0em;
    }

    .sidebar-avatar4 ul li:nth-child(4) .profile_image_sm {
        position: absolute;
        left: 1.5em;
        top: 1.5em;
    }

    .sidebar-avatar4 .Mplus_icon {
        font-size: 0.8em;
        color: #333;
    }

.more_avatars {
    font-weight: 600;
    font-size: 1em;
    width: 1.5em;
    height: 1.5em;
    background-color: transparent;
}

.conversation-titlebar-ul .more_avatars {
    font-weight: 600;
    font-size: 1em;
    line-height: 3em;
    width: 1em;
    min-width: 1em;
    height: 3em;
    background-color: transparent;
}

.sidebar-main {
    padding: 0 !important;
    display: flex;
    margin-left: 0.5em;
    margin-right: 0.5em;
    flex-wrap: nowrap !important;
    width: 82%;
    min-width: 82%;
    max-width: 82%;
    flex: 1 1 82%;
}

    .sidebar-main .row {
        padding: 0 !important;
        margin: 0 !important;
    }

.sidebar-name {
    width: 100%;
}

.last-message {
    width: 90%;
    white-space: nowrap;
    overflow-x: hidden !important;
    text-overflow: ellipsis;
    max-width: 22em;
    margin-right: auto;
    text-align: left;
    font-size: 0.85em;
}

.name_time {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    justify-content: space-between;
    box-sizing: border-box;
    height: 1.5em;
}

.name-meta {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
    font-weight: 600;
    margin-right: auto;
    width: 70%;
    max-width: 70%;
    min-width: 70%;
    margin-right: 0;
    margin-left: 0;
    flex: 3 0 70%;
    font-size: 0.9em;
}

.sidebar-time {
    /*
    position: absolute;
    top: 0.4em;
    right: 1.4em;*/
    margin-right: 0;
    margin-left: 0;
    align-self: flex-end;
    flex: 1 0 30%;
    width: 30%;
    text-align: right;
    height: 1.5em;
}

    .sidebar-time:after {
        background-image: url(/Content/Images/iws_own_arrow.svg);
        background-size: 1rem 1rem;
        background-repeat: no-repeat;
        display: inline-flex;
        content: "";
        width: 1rem;
        height: 1rem;
        opacity: 0.2;
    }

.time-meta {
    text-align: right;
    font-size: 0.8em;
    color: #666;
    vertical-align: top;
    margin-top: 0.05em;
    margin-bottom: auto;
    display: inline-block;
}

.MConversation, .MNewChooseRec, .MSettings, .MNotifications {
    padding: 0 !important;
    margin: 0 !important;
    height: 100%;
    width: 100%;
    position: relative;
    background-color: white;
}

.MMainMessagePanel {
    padding: 0 !important;
    margin: 0 !important;
    height: 100%;
    border-left: 1px solid rgba(0, 0, 0, .08);
    position: relative;
    background-color: white;
}

.conversation-inner {
    padding: 0;
    margin: 0;
    border: 1px solid #f7f7f7;
    padding-top: 4.1em !important;
    padding-bottom: 4.1em !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    height: 100%;
    box-sizing: border-box;
}

.conversation-titlebar {
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 1px solid #ccc;
}

.MConversation {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    flex: 1;
}

.messages {
    margin: auto 0 0 0;
    padding-top: 4.6em !important;
    padding-bottom: 4.1em !important;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
    /*if you add some of these below it breaks the scrollbar added to div above*/
    /*overflow-y: auto !important;height: 100%;
     flex-direction: column;overflow-y: scroll;flex: 1;overflow-y: scroll;
    */
}

.message-previous {
    margin: 0 !important;
    padding: 0 !important;
    height: auto;
    width: 100%;
}

.previous {
    font-size: 15px;
    text-align: center;
    padding: 10px !important;
    cursor: pointer;
}

    .previous a {
        text-decoration: none;
        font-weight: 600;
    }

.message-body {
    margin: 0 1em 0.8em 1em;
    width: 100%;
    height: auto;
    align-items: center;
    position: relative;
    align-self: flex-end;
    display: flex;
    align-items: center;
}

.messages .message-body:first-of-type {
    margin: auto 1em 0.8em 1em;
}

.messages > :first-child {
    margin: auto 1em 0.8em 1em;
}

.message-main-receiver {
    max-width: 60%;
    min-width: 60%;
}

.message-main-sender {
    margin-left: 40% !important;
    max-width: 60%;
    min-width: 60%;
    padding-right: 0.5em;
}

.message-extra {
    margin-left: 5.5em;
    text-align: left;
    line-height: 105%;
}

.message-text {
    margin: 0 !important;
    padding: 5px !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    padding-bottom: 0 !important;
    flex: 0 0 100%;
    text-align: left;
    word-break: break-word;
}

.message-from {
    margin: 0 !important;
    font-size: 0.8em;
    text-align: right;
    color: #333333;
    font-weight: 600;
    text-align: left;
}

.message-time {
    margin: 0 !important;
    font-size: 0.8em;
    text-align: right;
    color: #666666;
    text-align: left;
}

.message_space {
    height: 0.5em;
}

.receiver_w {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.receiver-inner {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.receiver {
    width: auto !important;
    padding: 0.2em 0.7em 0.5em !important;
    border-radius: 0.6em 0.6em 0.6em 0;
    background: #f4f5f7;
    overflow-wrap: break-word;
    word-wrap: break-word;
    display: inline-block;
    margin: auto auto 0.1em 0;
    height: auto !important;
    position: relative;
}

.sender_w {
    /*display: flex;  APL - 07/18/2022 removed per Elliott*/
    flex-wrap: wrap;
    text-align: right;
    justify-content: flex-end;
}

.sender {
    width: auto !important;
    background: #B7FFD0;
    border-radius: 0.6em 0.6em 0 0.6em;
    padding: 0.2em 0.7em 0.5em !important;
    display: inline-block;
    overflow-wrap: break-word;
    word-wrap: break-word;
    margin: auto 0 0.1em auto;
    height: auto !important;
    position: relative;
}
/*
    .sender::after {
        content: "";
        position: absolute;
        right: -15px;
        bottom: 0em;
        border: 0 solid transparent;
        border-top: 9px solid #B7FFD0;
        border-radius: 0 20px 0;
        width: 15px;
        height: 30px;
        transform: rotate(45deg) scaleY(-1);
    }

.receiver::after {
    content: "";
    position: absolute;
    left: -15px;
    bottom: 0em;
    border: 0 solid transparent;
    border-top: 9px solid #f4f5f7;
    border-radius: 0 20px 0;
    width: 15px;
    height: 30px;
    transform: rotate(145deg);
}
*/
.sender_w .Mphoto_w {
    width: 100% !important;
}

.receiver_w .Mphoto_w {
    width: 100% !important;
}

.sender_w .Mphoto_inner {
    overflow: hidden;
    border-radius: 0.6em 0.6em 0 0.6em;
    margin: auto 0 0.1em auto;
    padding: 0 !important;
    align-self: flex-end;
    width: auto;
    background-color: transparent;
}

.receiver_w .Mphoto_inner {
    overflow: hidden;
    margin: auto auto 0.1em 0;
    padding: 0 !important;
    width: auto;
    background-color: transparent;
}

.sender_w .Mphoto {
    border-radius: 0.6em 0.6em 0 0.6em;
    overflow: hidden;
}

.receiver_w .Mphoto {
    border-radius: 0.6em 0.6em 0.6em 0;
    overflow: hidden;
}

.Mphoto {
    max-width: 100%;
    max-height: 20em;
}

/*Reply*/

.reply {
    padding: 0.5em 5px 0.5em 5px !important;
    width: 100%;
    background-color: #0082CA;
    margin: 0 !important;
    z-index: 1000;
    position: absolute;
    bottom: 0;
    left: 0;
}

.nextNewMessageBtn {
    height: 4em;
    width: 100%;
    padding: 10px 5px 10px 5px !important;
    margin: 0 !important;
    z-index: 1000;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(255,255,255,0.8) !important;
}

.conversation .row {
    width: 100% !important;
}

.MPost {
    border-top-left-radius: 0.4em !important;
    border-bottom-left-radius: 0.4em !important;
    padding: 0.5rem 1rem;
    height: 2.5em;
    min-height: 2.5em;
    overflow-y: hidden;
    resize: none;
    box-shadow: none !important;
    box-sizing: border-box;
}

.MAddPhoto {
    border: 0;
    border-left: 0 !important;
    border-right: 0 !important;
    color: #22a7ee !important;
    padding: 0.5rem 1rem 0.5rem 0.5rem !important;
}

    .MAddPhoto:focus,
    .MAddPhoto.active {
        border: 0;
        border-left: 0 !important;
        border-right: 0 !important;
        color: #22a7ee !important;
        background-color: white !important;
        border-top-right-radius: 0.4em !important;
        border-bottom-right-radius: 0.4em !important;
    }

.MAddEmoji {
    border: 0;
    border-left: 0 !important;
    border-right: 0 !important;
    color: #FF8300 !important;
    padding: 0.5rem 0.5rem !important;
}

    .MAddEmoji:focus,
    .MAddEmoji.active {
        background-color: white !important;
        box-shadow: none !important;
        color: #FF8300 !important;
    }

.MNotifcationsBtn {
}

.info_icon {
    width: 1.25em;
}

.info-messaging-icon {
    width: 1.25em !important;
    height: 1.25em !important;
    fill: #006DA8;
    display: inline-block;
    vertical-align: middle;
}

.Mselected {
    background-color: white;
    border-left: 4px solid #FF8300;
}

.Munread {
    background-color: white;
}

.conversation-titlebar-ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    height: 3em;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

    .conversation-titlebar-ul li {
        margin: 0 0;
        padding: 0;
        position: relative;
        width: 3em;
        height: 3em;
    }

        .conversation-titlebar-ul li:nth-child(1) .profile_image_sm {
            position: absolute;
            margin: 0 !important;
            left: 0em;
        }

        .conversation-titlebar-ul li:nth-child(2) .profile_image_sm {
            position: absolute;
            margin: 0 !important;
            left: -0.5em;
        }

        .conversation-titlebar-ul li:nth-child(3) .profile_image_sm {
            position: absolute;
            margin: 0 !important;
            left: -1em;
        }

        .conversation-titlebar-ul li:nth-child(4) .profile_image_sm {
            position: absolute;
            margin: 0 !important;
            left: -1em;
        }

        .conversation-titlebar-ul li:nth-child(4) {
            width: 0em;
        }

.people-ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .people-ul li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

.people-a {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    font-weight: 600;
    color: #333;
    padding: 0.2em 0;
}

#FriendsPanel, #CareteamPanel {
    overflow-y: auto !important;
    height: 100%;
}

.MChoose {
}

.profile_image_sm {
    position: relative;
}

.person-selected .profile_image_sm:after {
    background-image: url(/Content/Images/ProfileImages/chosen_check.svg);
    background-size: 1.5em 1.5em;
    background-repeat: no-repeat;
    display: inline-block;
    content: "";
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    z-index: 3;
    top: 0;
    right: -0.5rem;
}

.person-selected-full .profile_image_sm:after {
    background-image: url(/Content/Images/ProfileImages/chosen_check.svg);
    background-size: 3em 3em;
    background-repeat: no-repeat;
    display: inline-block;
    content: "";
    width: 3em;
    height: 3em;
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
}

.StartingConvo {
    color: #666;
    width: 100%;
    font-weight: 700;
    height: 25em;
    align-content: flex-start;
}

.PeoplenNotifText {
    display: inline-block;
    vertical-align: middle;
}

@media (hover: hover) {
    /*hovers only*/
    .sidebar-body:hover {
        background-color: white;
    }

    .MAddPhoto:hover,
    .AddEmoji:hover {
        background-color: white !important;
        box-shadow: none !important;
        color: #006da8 !important;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
}

@media only screen and (min-width : 48em) and (max-width : 64em) {
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) and (orientation : portrait) {
    /* IPAD VERTICAL ONLY*/
}

@media screen and (max-width: 86em) {
    .PeoplenNotifText {
        position: absolute;
        left: -999em;
    }
}

@media screen and (min-width: 48em) and (max-width: 80em) {
    .sidebar-avatar {
        flex: 1 1 28%;
    }

    .sidebar-main {
        width: 72%;
        min-width: 72%;
        max-width: 72%;
        flex: 1 1 72%;
    }

    .name-meta {
        width: 50%;
        max-width: 50%;
        min-width: 50%;
        flex: 3 0 50%;
    }

    .sidebar-time {
        flex: 1 0 50%;
        width: 50%;
    }
}

@media screen and (max-width: 48em) {
    .sidebar-avatar {
        flex: initial;
    }

    .sidebar-main {
        width: 100%;
        min-width: 80%;
        max-width: 100%;
        flex: initial;
    }

    .name-meta {
        width: 62%;
        max-width: 100%;
        min-width: 1%;
        flex: 3 0 auto;
    }

    .sidebar-time {
        flex: 1 0 auto;
        width: auto;
    }

    .message-main-sender {
        max-width: 80%;
        min-width: 80%;
    }

    .message-main-receiver {
        max-width: 88%;
        min-width: 88%;
    }

    .message-main-sender {
        margin-left: 20% !important;
        padding-right: 0.5em;
    }

    .message-text {
        font-size: 0.9em;
    }

    .message-body {
        margin: auto 0 0.4em 0;
    }

    .message-extra {
        margin-left: 4.2em;
        line-height: 100%;
    }

    .message-time, .message-from {
        font-size: 0.6em;
    }

    .conversation-titlebar {
        background-color: #006DA8;
        font-size: 0.9em;
        border-bottom: 0;
        box-shadow: 0 0 0.8em rgba(0,0,0,0.15);
    }

    .heading.conversation-titlebar {
        padding: 0.3em 0;
    }

    .info-messaging-icon {
        fill: #FFFFFF !important;
    }

    .conversation-titlebar-ul .Mplus_icon {
        color: white;
    }

    .messages .message-body:first-of-type {
        margin: auto 0em 0.8em 0em;
    }

    .messages > :first-child {
        margin: auto 0em 0.8em 0em;
    }
}
.site_bg_gray_dark {
    background-color: #E8E9F0;
    min-height: 25em;
}

.site_bg_gray {
    background-color: #f4f5f7;
}

.mflex {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    min-height: 32em;
    padding-bottom: 2em;
}

.mcol1 {
    width: 50%;
    margin: 1em auto 1em 5%;
    box-sizing: border-box;
}

.mcol2 {
    width: 35%;
    margin: 1em 5% 1em auto;
    box-sizing: border-box;
}

.box, .box1 {
    background-color: white;
    box-shadow: 0 0 0.25em rgba(0,0,0,.1);
    border-radius: 0.5em;
    padding: 1em;
    margin-bottom: 1em;
}

.box2 {
    background-color: #FDFDFD;
    border-radius: 0.5em;
    padding: 1em;
    margin-bottom: 1em;
}

.hwhite {
    color: white !important;
}

.bg_reports {
    background-color: #038135;
    /*background-image: url(/content/images/leaves_bg.png);*/
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    text-align: center;
}

    .bg_reports H2 {
        color: white;
        font-size: 1.4em;
    }

.bg_vault {
    background-color: #42638A;
    background-image: url(/content/images/leaves_bg.png);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    position: relative;
    text-align: center;
}

    .bg_vault H2 {
        color: white;
        font-size: 1.4em;
    }

.bg_course {
    background-color: #213D6D;
    background-image: url(/content/images/course_bg1.png);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: repeat;
    background-position: right;
    position: relative;
    text-align: center;
}

.bg_faq {
    background-color: #42638A;
    background-image: url(/content/images/faq_bg1.jpg);
    padding: 2em 5% 4em 5%;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    text-align: center;
}

    .bg_faq H2 {
        color: white;
        font-size: 1.4em;
    }

.curve_pos_pad1 {
    padding-bottom: 8em;
}

.curve_pos_adj1 {
    margin-top: -10em;
    z-index: 2;
    position: relative;
}

.curve_white_btm, .curve_btm, .curve_top, .curve_white_top, .curve_gray_dark_btm, .curve_coach_btm, .curve_white_btm_flipped {
    width: 100%;
    position: absolute;
    background-size: 103%;
    background-repeat: no-repeat;
    height: 3em;
    z-index: 1;
}

.curve_white_btm {
    bottom: -0.1em;
    left: 0;
    background-image: url(/content/images/curve_white_btm.svg);
    background-position: bottom;
}

.curve_white_btm_flipped {
    bottom: -0.1em;
    left: 0;
    background-image: url(/content/images/curve_white_btm_flipped.svg);
    background-position: bottom;
}

.curve_coach_btm {
    bottom: -0.1em;
    left: 0;
    background-image: url(/content/images/curve_coach_btm.svg);
    background-position: bottom;
}

.curve_btm {
    bottom: -0.1em;
    left: 0;
    background-image: url(/content/images/curve_gray_btm.svg);
    background-position: bottom;
}

.curve_gray_dark_btm {
    bottom: -0.1em;
    left: 0;
    background-image: url(/content/images/curve_gray_dark_btm.svg);
    background-position: bottom;
}

.curve_top {
    top: -0.1em;
    right: 0;
    left: 0;
    background-image: url(/content/images/curve_white_top.svg);
    background-position: top;
}

.curve_white_top {
    top: -0.1em;
    right: 0;
    left: 0;
    background-image: url(/content/images/curve_white_top2.svg);
    background-position: top;
}

.hpad1 {
    margin-bottom: 0.5em !important;
}

.hpad2 {
    margin-bottom: 1em !important;
}

.card_w {
    border: 0.0625em solid #D5D5D5;
    border-radius: 0.5em;
    background-color: white;
    box-shadow: 0 0 0.25em rgba(0,0,0,.1);
    padding: 1em;
    margin-bottom: 1em;
}

.top_w {
    position: relative;
}

.top_acc_bg {
    background-color: #0B57A4;
    width: 100%;
    height: 20em;
    z-index: 1;
    position: absolute;
}

.bg_tokens {
    z-index: 2;
    position: relative;
    background-image: url('/content/images/tokens_bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}

.mcflex {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: space-evenly;
}

.mc1 {
    text-align: center;
    width: 50%;
    margin-bottom: 2em;
}

.mc2 {
    text-align: center;
    width: 50%;
    margin-bottom: 2em;
    border-left: 0.1rem solid rgba(255,255,255,0.5);
}

.mc_token_amt {
    font-size: 5em;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
}

    .mc_token_amt .token_i {
        font-size: 0.75em;
    }

.mc_text1 {
    margin: auto;
    color: white;
}

.mc_text2 {
    font-size: 1.4em;
    color: white;
    font-weight: 600;
}

.card_title_left H2 { /*text-align:left; margin-left:5%;*/
    color: white;
}
/*
.card_title {
    margin-bottom: 0.5em;
}

    .card_title H2 {
        margin: 0 auto 0.5em auto;
    }
*/
.cflex {
    padding: 0.7em 0.5em 0.7em 0.5em;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
}

.hc1 {
    margin-left: 0;
    font-size: 0.9em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 115%;
    color: #007d7d;
    text-align: center;
}

.hc2 {
    margin: auto 1em auto 1.5em;
    text-align: left;
}

.hc3 {
    margin: auto 0 auto auto;
    align-self: flex-end;
    white-space: nowrap;
}

.acflex {
    padding: 1em 0.5em 1em 0em;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-content: center;
    justify-content: flex-start;
    border-bottom: 0.0625rem solid rgba(0,0,0,0.1);
}

    .acflex:last-of-type {
        border-bottom: 0;
    }

.ac1 {
    margin: auto 1em auto 1em;
    color: black;
    text-align: left;
    min-width: 60%;
}

.ac2 {
    margin: auto 0 auto auto;
    align-self: flex-end;
    color: black;
    text-align: center; /*white-space:nowrap;*/
}

.ac_pic {
    max-width: 16%;
    margin-left: 1em;
}

.prize_pic {
    width: 100%;
}

.prize_title {
    font-size: 1.2em;
    font-weight: 600;
}

.progress_w {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
}

.my_progress {
    color: #666;
    font-size: 0.7em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
    margin-right: 1em;
}

.prize_points_bar_bg {
    max-width: 16rem;
    background-color: #E8E9F0;
    margin: .2rem 1em;
    height: 0.6rem;
    border-radius: 0.6rem;
    text-align: left;
    overflow: hidden;
    width: 100%;
    font-size: .1em;
}

.prize_points_bar_solid {
    background-color: #00DF70;
    height: 0.6rem;
    border-radius: 0.6rem;
}

.token_i {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

.token_text {
    display: inline-block;
    vertical-align: middle;
}

.token_amt {
    font-weight: 600;
    font-size: 1.2em;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
}

.text_price {
    color: #666;
    display: block;
    text-transform: uppercase;
    font-size: 0.85em;
    font-weight: 700;
}

.small_gray {
    color: #666;
    font-size: 0.85em;
    margin: 0.7em 0;
}

.coach_text {
    word-wrap: break-word;
}

.faq_block {
    height: 100%;
}

.faq_ul {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0;
}

    .faq_ul LI {
        padding: 0 0;
        margin: 0;
        text-align: left;
        border-bottom: .0625em solid rgba(0,0,0,.1);
    }

        .faq_ul LI:last-of-type {
            border-bottom: 0;
        }

.faq_search_ul {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0;
}

    .faq_search_ul LI {
        padding: 1em 0;
        margin: 0;
        text-align: left;
        border-bottom: .0625em solid rgba(0,0,0,.1);
    }

        .faq_search_ul LI:last-of-type {
            border-bottom: 0;
        }

.faq_question_a {
    display: block;
    padding: 0.5em;
}

.faq_subcategory_a, .faq_question_a {
    color: #333;
}

.faq_subcategory_a {
    font-weight: 600;
}

.faq_search {
    padding: .6rem 1rem .6rem 3rem;
    box-shadow: 0 0 1.5em rgba(0,0,0,0.4);
    border-radius: 3em;
}

.faq_search_icon {
    position: absolute;
    left: 1em;
}

.border-top-dotted {
    border-top: 0.1em dotted #ccc;
}

@media only screen and (min-device-width: 64em) {
}

@media (hover: hover) {
    /*hovers only*/

    H1 A:hover {
        color: #22a7ee;
        font-weight: 700;
        text-decoration: none;
    }

    A.faq_question_a:hover {
        color: #007fc4;
        background-color: #f5f5fe;
    }

    .acflex:hover {
        background-color: #F8F9FC;
    }

    a:hover,
    .nav_points_bar_w:hover,
    .nav_tokens_w:hover {
        text-decoration: none !important;
    }
}

@media only screen and (min-device-width : 48em) and (max-device-width : 64em) {
    /* IPAD ONLY*/
}

@media screen and (max-width: 80em) {
    .top_acc_bg {
        height: 12em;
    }
}

@media screen and (max-width: 50em) {
}

@media screen and (max-width: 48em) {
    /*mobile fixes & ipad narrow*/
    .mflex {
        flex-wrap: wrap;
        min-height: 1em;
    }

    .mcol1 {
        width: 100%;
        margin: 3.5em 0 0em 0;
        float: none;
    }

    .mcol2 {
        width: 100%;
        margin: 0em 0 1em 0;
        float: none;
    }

    .card_w {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 1em;
        margin-bottom: 1em;
    }

    .bg_tokens {
        background-image: url('/content/images/tokens_bg_mobile.jpg');
        background-repeat: no-repeat;
        background-size: 100%;
    }

    .mc_text2 {
        font-size: 1em;
    }

    .mc_token_amt {
        font-size: 2.5em;
    }

    .prize_title {
        font-size: 1.1em;
    }

    .token_amt {
        font-size: 1.1em;
    }

    .ac_pic {
        max-width: 100%;
        width: 100%;
        flex: 0 0 100%;
        margin-bottom: 1em;
        margin-left: auto;
    }

    .prize_pic {
        width: 30%;
    }

    .text_price {
        display: inline-block;
        vertical-align: middle;
    }

    .ac1 {
        margin: auto 0em auto 0em;
        width: 100%;
    }

    .ac2 {
        white-space: normal;
        margin-top: 0.3em;
    }

    .small_gray {
        font-size: 0.8em;
    }

    .hc1 {
        font-size: 0.8em;
    }

    .cflex, .acflex {
        padding: 0.7em 0em 0.7em 0em;
    }

    .acflex {
        flex-wrap: wrap;
    }

    .mc1 {
        margin-bottom: 1em;
    }

    .mc2 {
        margin-bottom: 1em;
    }

    .bg_vault, .bg_course {
        padding: 1em 5% 2em 5%;
    }

    .bg_course {
        background-image: url(/Content/Images/course_mobile_bg1.png);
    }

    .bg_faq {
        padding: 1em 5% 4em 5%;
    }
}

@media screen and (min-width:34em) and (max-width: 48em) {
}

@media screen and (max-width: 34em) {
    /*mobile fixes*/
}

@media print {
    #footer,
    .nav_tokens_w,
    .nav_notifications_w,
    .nav_points_bar_w {
        display: none;
    }

    .vault_block {
        box-shadow: none !important;
        border: 0.0625rem solid #999 !important;
        page-break-inside: avoid;
    }
}