:root {
    --default-text: #4B515A;
    --black: #1D1E1F;
    --black-rgb: 29,30,31;
    --black-gradient-rgb: 50,52, 57;
    --white: #FFF;
    --white-rgb: 255,255,255;
    --dark-gray: #1D1E1F;
    --gray-11: #323439;
    --gray: #4B515A;
    --gray-9: #5B626D;
    --gray-8: #6C7783;
    --gray-7: #7A8692;
    --gray-6: #8D9AA5;
    --gray-5: #A5B0B7;
    --gray-4: #C2C9CF;
    --gray-3: #DBDFE2;
    --gray-2: #EAEDEE;
    --light-gray: #F6F8F7;
    --gold: #FFC700;
    --gold-11: #D3A500;
    --dark-gold: #A48000;
    --dark-gold-rgb: 164,128,0;
    --dark-gold-gradient-rgb: 211,165,0;
    --gold-4: #FFE365;
    --gold-3: #FFEEB1;
    --gold-2: #FFFAE3;
    --light-gold: #FEF4E8;
    --geld: #FFE057;
    --geld-medium: #FDD700;
    --geld-dark: #FFC700;
    --red: #D2333D;
    --red-rgb: 210,51,61;
    --red-4: #FF7575;
    --red-5: #CC2F34;
    --red-6: #9D2A2D;
    --red-9: #E84B56;
    --red-11: #A40A26;
    --dark-red: #741F25;
    --dark-red-rgb: 116,31,37;
    --red-2: #F7ABAD;
    --light-red: #FCE7E8;
    --purple: #3B409C;
    --purple-rgb: 59,64,156;
    --dark-purple: #1D1E69;
    --dark-purple-rgb: 29,30,105;
    --purple-5: #3B409C;
    --purple-3: #878DCF;
    --light-purple: #DDDDF3;
    --green: #11824D;
    --green-rgb: 17,130,77;
    --green-6: #11824D;
    --green-5: #11A65A;
    --green-9: #1BB471;
    --dark-green: #115F44;
    --dark-green-rgb: 17,95,68;
    --green-7: #115F44;
    --green-4: #71C6A3;
    --green-3: #70C599;
    --green-2: #A5D7B7;
    --light-green: #E1F1E7;
    --blue-14: #012641;
    --blue-13: #00304D;
    --blue-12: #00345A;
    --dark-blue: #00345A;
    --dark-blue-rgb: 0,52,90;
    --blue-11: #004768;
    --blue-11-rgb: 0,71,104;
    --blue: #005882;
    --blue-rgb: 0,88,130;
    --blue-9: #006594;
    --blue-8: #0077B4;
    --blue-8-rgb: 0,119,180;
    --blue-7: #0096DF;
    --blue-6: #00BAFF;
    --blue-5: #20D0FF;
    --blue-5-rgb: 32, 208, 255;
    --blue-4: #6DDFFF;
    --blue-3: #B2ECFF;
    --blue-2: #DCF5FF;
    --light-blue: #EEFAFF;
    --blue-6-chart: #1F749B;
    --blue-5-chart: #4892B4;
    --blue-4-chart: #7BB3CD;
    --blue-3-chart: #B8D7E6;
    --dark-teal: #115251;
    --teal-11: #107169;
    --teal: #119B8F;
    --teal-4: #65C8CA;
    --light-teal: #E6F4F7;
    --dark-orange: #C93D13;
    --orange: #F36D45;
    --orange-4: #FFAD94;
    --light-orange: #FFEFEB;
    --font-family: "Barlow", Arial, Helvetica sans-serif;
    --font-family-alternative: "Barlow Condensed", sans-serif;
    --fa-style-family: "Font Awesome 6 Pro";
    /*Data Visualization: Hot Cold*/
    --dv-hc-1: #0B824D;
    --dv-hc-2: var(--green-9);
    --dv-hc-3: var(--green-4);
    --dv-hc-4: #FFEEB1;
    --dv-hc-5: var(--red-2);
    --dv-hc-6: var(--red-9);
    --dv-hc-7: var(--red-11);
    /*Data Visualization */
    --dv-hb-1: var(--blue);
    --dv-hb-2: var(--blue-8);
    --dv-hb-3: var(--blue-3);
    --dv-hb-4: var(--gray-2);
    --dv-hb-5: var(--red-2);
    --dv-hb-6: var(--red-9);
    --dv-hb-7: var(--red-11);
}


/* making container wider on large screens - bootstrap overrides */
@media (min-width: 576px) {
    .container {
        max-width: 100%;
    }
}

@media (min-width: 1200px) and (max-width: 1549.9px) {
    .container {
        max-width: calc(100% - 50px);
    }
}



@media print {
    .d-print-none {
        display: none !important;
    }
}

/* adding xxl breakpoint to get menu live quickly - we may use it for more things or just keep what we need */
/* BS4 Grid XXL breakpoint */

/* adding col-xxl */
.col-xxl, .col-xxl-1, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 1530px) {
    /* expanding BS4 max-width just a wee bit */
    .container {
        max-width: 1480px;
    }

    /* grid columns xxl */
    .col-xxl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    .col-xxl-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .col-xxl-1 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-xxl-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxl-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xxl-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-xxl-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }

    .col-xxl-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xxl-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
    }

    .col-xxl-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-xxl-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xxl-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxl-11 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    .col-xxl-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    /* order xxl */
    .order-xxl-0 {
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
        order: 0;
    }

    .order-xxl-1 {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }

    .order-xxl-2 {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }

    .order-xxl-3 {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3;
    }

    .order-xxl-4 {
        -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
        order: 4;
    }

    .order-xxl-5 {
        -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
        order: 5;
    }

    .order-xxl-6 {
        -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
        order: 6;
    }

    .order-xxl-7 {
        -webkit-box-ordinal-group: 8;
        -ms-flex-order: 7;
        order: 7;
    }

    .order-xxl-8 {
        -webkit-box-ordinal-group: 9;
        -ms-flex-order: 8;
        order: 8;
    }

    .order-xxl-9 {
        -webkit-box-ordinal-group: 10;
        -ms-flex-order: 9;
        order: 9;
    }

    .order-xxl-10 {
        -webkit-box-ordinal-group: 11;
        -ms-flex-order: 10;
        order: 10;
    }

    .order-xxl-11 {
        -webkit-box-ordinal-group: 12;
        -ms-flex-order: 11;
        order: 11;
    }

    .order-xxl-12 {
        -webkit-box-ordinal-group: 13;
        -ms-flex-order: 12;
        order: 12;
    }

    /* text-align xxl */
    .text-xxl-center {
        text-align: center !important;
    }

    .text-xxl-left {
        text-align: left !important;
    }

    .text-xxl-right {
        text-align: right !important;
    }

    /* float xxl */
    .float-xxl-left {
        float: left !important;
    }

    .float-xxl-right {
        float: right !important;
    }

    .float-xxl-none {
        float: none !important;
    }

    /* display xxl */
    .d-xxl-none {
        display: none !important;
    }

    .d-xxl-inline {
        display: inline !important;
    }

    .d-xxl-inline-block {
        display: inline-block !important;
    }

    .d-xxl-block {
        display: block !important;
    }

    .d-xxl-table {
        display: table !important;
    }

    .d-xxl-table-cell {
        display: table-cell !important;
    }

    .d-xxl-table-row {
        display: table-row !important;
    }

    .d-xxl-flex {
        display: flex !important;
    }

    .d-xxl-inline-flex {
        display: inline-flex !important;
    }

    /* offsets xxl */
    .offset-xxl-1 {
        margin-left: 8.333333%;
    }

    .offset-xxl-2 {
        margin-left: 16.666667%;
    }

    .offset-xxl-3 {
        margin-left: 25%;
    }

    .offset-xxl-4 {
        margin-left: 33.333333%;
    }

    .offset-xxl-5 {
        margin-left: 41.666667%;
    }

    .offset-xxl-6 {
        margin-left: 50%;
    }

    .offset-xxl-7 {
        margin-left: 58.333333%;
    }

    .offset-xxl-8 {
        margin-left: 66.666667%;
    }

    .offset-xxl-9 {
        margin-left: 75%;
    }

    .offset-xxl-10 {
        margin-left: 83.333333%;
    }

    .offset-xxl-11 {
        margin-left: 91.666667%;
    }

    /* spacing xxl */
    .m-xxl-0 {
        margin: 0 !important
    }

    .mt-xxl-0, .my-xxl-0 {
        margin-top: 0 !important
    }

    .mr-xxl-0, .mx-xxl-0 {
        margin-right: 0 !important
    }

    .mb-xxl-0, .my-xxl-0 {
        margin-bottom: 0 !important
    }

    .ml-xxl-0, .mx-xxl-0 {
        margin-left: 0 !important
    }

    .m-xxl-1 {
        margin: .25rem !important
    }

    .mt-xxl-1, .my-xxl-1 {
        margin-top: .25rem !important
    }

    .mr-xxl-1, .mx-xxl-1 {
        margin-right: .25rem !important
    }

    .mb-xxl-1, .my-xxl-1 {
        margin-bottom: .25rem !important
    }

    .ml-xxl-1, .mx-xxl-1 {
        margin-left: .25rem !important
    }

    .m-xxl-2 {
        margin: .5rem !important
    }

    .mt-xxl-2, .my-xxl-2 {
        margin-top: .5rem !important
    }

    .mr-xxl-2, .mx-xxl-2 {
        margin-right: .5rem !important
    }

    .mb-xxl-2, .my-xxl-2 {
        margin-bottom: .5rem !important
    }

    .ml-xxl-2, .mx-xxl-2 {
        margin-left: .5rem !important
    }

    .m-xxl-3 {
        margin: 1rem !important
    }

    .mt-xxl-3, .my-xxl-3 {
        margin-top: 1rem !important
    }

    .mr-xxl-3, .mx-xxl-3 {
        margin-right: 1rem !important
    }

    .mb-xxl-3, .my-xxl-3 {
        margin-bottom: 1rem !important
    }

    .ml-xxl-3, .mx-xxl-3 {
        margin-left: 1rem !important
    }

    .m-xxl-4 {
        margin: 1.5rem !important
    }

    .mt-xxl-4, .my-xxl-4 {
        margin-top: 1.5rem !important
    }

    .mr-xxl-4, .mx-xxl-4 {
        margin-right: 1.5rem !important
    }

    .mb-xxl-4, .my-xxl-4 {
        margin-bottom: 1.5rem !important
    }

    .ml-xxl-4, .mx-xxl-4 {
        margin-left: 1.5rem !important
    }

    .m-xxl-5 {
        margin: 3rem !important
    }

    .mt-xxl-5, .my-xxl-5 {
        margin-top: 3rem !important
    }

    .mr-xxl-5, .mx-xxl-5 {
        margin-right: 3rem !important
    }

    .mb-xxl-5, .my-xxl-5 {
        margin-bottom: 3rem !important
    }

    .ml-xxl-5, .mx-xxl-5 {
        margin-left: 3rem !important
    }

    .p-xxl-0 {
        padding: 0 !important
    }

    .pt-xxl-0, .py-xxl-0 {
        padding-top: 0 !important
    }

    .pr-xxl-0, .px-xxl-0 {
        padding-right: 0 !important
    }

    .pb-xxl-0, .py-xxl-0 {
        padding-bottom: 0 !important
    }

    .pl-xxl-0, .px-xxl-0 {
        padding-left: 0 !important
    }

    .p-xxl-1 {
        padding: .25rem !important
    }

    .pt-xxl-1, .py-xxl-1 {
        padding-top: .25rem !important
    }

    .pr-xxl-1, .px-xxl-1 {
        padding-right: .25rem !important
    }

    .pb-xxl-1, .py-xxl-1 {
        padding-bottom: .25rem !important
    }

    .pl-xxl-1, .px-xxl-1 {
        padding-left: .25rem !important
    }

    .p-xxl-2 {
        padding: .5rem !important
    }

    .pt-xxl-2, .py-xxl-2 {
        padding-top: .5rem !important
    }

    .pr-xxl-2, .px-xxl-2 {
        padding-right: .5rem !important
    }

    .pb-xxl-2, .py-xxl-2 {
        padding-bottom: .5rem !important
    }

    .pl-xxl-2, .px-xxl-2 {
        padding-left: .5rem !important
    }

    .p-xxl-3 {
        padding: 1rem !important
    }

    .pt-xxl-3, .py-xxl-3 {
        padding-top: 1rem !important
    }

    .pr-xxl-3, .px-xxl-3 {
        padding-right: 1rem !important
    }

    .pb-xxl-3, .py-xxl-3 {
        padding-bottom: 1rem !important
    }

    .pl-xxl-3, .px-xxl-3 {
        padding-left: 1rem !important
    }

    .p-xxl-4 {
        padding: 1.5rem !important
    }

    .pt-xxl-4, .py-xxl-4 {
        padding-top: 1.5rem !important
    }

    .pr-xxl-4, .px-xxl-4 {
        padding-right: 1.5rem !important
    }

    .pb-xxl-4, .py-xxl-4 {
        padding-bottom: 1.5rem !important
    }

    .pl-xxl-4, .px-xxl-4 {
        padding-left: 1.5rem !important
    }

    .p-xxl-5 {
        padding: 3rem !important
    }

    .pt-xxl-5, .py-xxl-5 {
        padding-top: 3rem !important
    }

    .pr-xxl-5, .px-xxl-5 {
        padding-right: 3rem !important
    }

    .pb-xxl-5, .py-xxl-5 {
        padding-bottom: 3rem !important
    }

    .pl-xxl-5, .px-xxl-5 {
        padding-left: 3rem !important
    }

    .m-xxl-auto {
        margin: auto !important
    }

    .mt-xxl-auto, .my-xxl-auto {
        margin-top: auto !important
    }

    .mr-xxl-auto, .mx-xxl-auto {
        margin-right: auto !important
    }

    .mb-xxl-auto, .my-xxl-auto {
        margin-bottom: auto !important
    }

    .ml-xxl-auto, .mx-xxl-auto {
        margin-left: auto !important
    }
}
/* end xxl breakpoint */

:focus {
    outline: var(--blue) dashed 1px;
    outline-offset: 2px;
    box-shadow: none;
}

svg {
    vertical-align: text-bottom;
}

.svg-icon {
    height: 1.3em;
    width: 1.3em;
    fill: var(--white);
    vertical-align: text-bottom;
}

b, strong {
    font-weight: 600;
}

.font-weight-bold {
    font-weight: 600 !important;
}

.font-weight-medium {
    font-weight: 500 !important;
}

p {
    line-height: 1.4;
}

.barlow {
    font-family: 'Barlow', Helvetica, sans-serif;
}

.barlow-condensed {
    font-family: 'Barlow Condensed', Helvetica, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
}

@media (max-width: 575.98px) {
    .PageTitleHOne {
        font-family: var(--font-family);
        font-size: 1.7rem;
        font-weight: 600;
    }

    .hidden-xs {
        display: none !important;
    }

    .border-xs-none {
        border: none !important;
    }
}


/* narrow gutter columns */

.narrow-gutter-row {
    margin-right: -5px;
    margin-left: -5px;
}

    .narrow-gutter-row [class^="col-"], .narrow-gutter-row [class*=' col-'], .narrow-gutter-row .col {
        padding-right: 5px;
        padding-left: 5px;
    }
/* end narrow gutter */





.icon-arrow-down {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.icon-arrow-up {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}


/* dynamic lock locked by default */

.fa-dynamic-lock:before, .idl:before {
    content: "\f30d";
    font-family: var(--fa-style-family);
    font-size: .6em;
    position: relative;
    top: -2px;
}

#mega-menu .fa-dynamic-lock:before, #mega-menu .idl:before {
    color: var(--gray-5);
    top: -2px;
}

#left-side-menu .fa-dynamic-lock, #left-side-menu .idl {
    margin: 0 !important;
    vertical-align: text-bottom !important;
}





html {
    font-size: 18px;
}

body {
    background-color: var(--white);
    color: var(--default-text);
    font-family: var(--font-family);
    position: relative;
    line-height: 1.2;
    font-size: 1rem;
}

a {
    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
}

a:hover, a:active, a:focus {
    color: var(--dark-blue);
}

a.no-a, a.no-a:hover, a.no-a:active, a.no-a:focus {
    color: inherit;
    text-decoration: inherit;
    font-weight: inherit;
}

.body-copy a {
    text-decoration: underline;
}

/* start color utilities */


/* color */


.c-white, a.c-white {
    color: var(--white);
}

    .c-white a {
        color: var(--white);
    }

        .c-white a:hover, .c-white a:active, .c-white a:focus {
            color: var(--light-gray);
        }

.c-black, a.c-black {
    color: var(--black);
}

    a.c-black:hover, a.c-black:active, a.c-black:focus {
        color: var(--dark-gray);
    }

.c-gray {
    color: var(--dark-gray);
}

.c-gray-8 {
    color: var(--gray-8);
}

.c-gray-3 {
    color: var(--gray-3);
}

.c-gray-6 {
    color: var(--gray-6);
}

.c-light-gray {
    color: var(--light-gray);
}

.c-gold, a.c-gold {
    color: var(--gold);
}

    .c-dark-gold, a.c-gold:hover, a.c-gold:active, a.c-gold:focus {
        color: var(--dark-gold);
    }



.c-gold-4 {
    color: var(--gold-4);
}
.c-dark-orange{
    color: var(--dark-orange);
}
.c-orange {
    color: var(--orange);
}
.c-featured, a.c-featured {
    color: var(--geld);
}

    a.c-featured:hover, a.c-featured:active, a.c-featured:focus {
        color: var(--geld-dark);
    }

.c-red, a.c-red {
    color: var(--red);
}

    .c-dark-red, a.c-red:hover, a.c-red:active, a.c-red:focus {
        color: var(--dark-red);
    }

.c-light-red {
    color: #f4e9e9;
}
.c-red-6 {
    color: var(--red-6);
}
.c-red-11 {
    color: var(--red-11);
}

.c-purple, a.c-purple {
    color: var(--blue);
}

    .c-dark-purple, a.c-purple:hover, a.c-purple:active, a.c-purple:focus {
        color: var(--dark-blue);
    }

.c-light-purple {
    color: var(--light-blue);
}

.c-green, a.c-green {
    color: var(--green);
}

    .c-dark-green, a.c-green:hover, a.c-green:active, a.c-green:focus {
        color: var(--dark-green);
    }

.c-green-7 {
    color: var(--green-7);
}
.c-light-green {
    color: var(--light-green);
}

.c-light-blue {
    color: var(--light-blue);
}

.c-blue-8 {
    color: var(--blue-8);
}

.c-blue {
    color: var(--blue);
}

.c-blue-11 {
    color: var(--blue-11);
}

.c-blue-12 {
    color: var(--blue-12)
}

.c-dark-blue {
    color: var(--dark-blue);
}

.c-teal {
    color: var(--teal);
}

.c-dark-teal {
    color: var(--dark-teal);
}

.c-dark-gray {
    color: var(--dark-gray);
}

.c-dv-hc-7 {
    color: var(--dv-hc-7);
}


/* increasing contrast on gray backgrounds */
.bg-light-gray .c-gold {
    color: #8A6B33;
}


/* fill (for svgs) */

.f-gray-8 {
   fill: var(--gray-8);
}

.f-white {
    fill: var(--white);
}

    .f-white a {
        fill: var(--white);
    }

        .f-white a:hover, .f-white a:focus {
            fill: var(--light-gray);
        }

.f-black {
    fill: var(--black);
}

.f-light-gray {
    fill: var(--light-gray);
}

.f-gold {
    fill: var(--gold);
}

.f-dark-gold {
    fill: var(--dark-gold);
}

.f-red {
    fill: var(--red);
}

.f-dark-red {
    fill: var(--dark-red);
}

.f-light-red {
    fill: #f4e9e9;
}

.f-purple {
    fill: var(--purple);
}

.f-dark-purple {
    fill: var(--dark-purple);
}

.f-light-purple {
    fill: var(--light-purple);
}

.f-green {
    fill: var(--green);
}

.f-dark-green {
    fill: var(--dark-green);
}

.f-light-green {
    fill: var(--light-green);
}

.f-blue {
    fill: var(--blue);
}

.f-blue-5 {
    fill: var(--blue);
}

.f-dark-blue {
    fill: var(--dark-blue);
}

.f-light-blue {
    fill: var(--light-blue);
}

/* background-color */

.bg-white {
    background-color: var(--white);
}

.bg-black {
    background-color: var(--black);
}

.bg-gray-5 {
    background-color: var(--gray-5);
}
.bg-gray-2 {
    background-color: var(--gray-2);
}
.bg-light-gray {
    background-color: var(--light-gray);
}

.bg-gold-4 {
    background-color: var(--gold-4);
}

.bg-gold-2{
    background-color:var(--dv-hc-4);
}
.bg-gold {
    background-color: var(--gold);
}

.bg-dark-gold {
    background-color: var(--dark-gold);
}

.bg-light-orange{
    background-color: var(--light-orange);
}
.bg-featured {
    background-color: var(--geld);
}

.bg-red {
    background-color: var(--red);
}
.bg-red-4{
    background-color: var(--red-4);
}
.bg-red-5{
    background-color: var(--red-5);
}
.bg-red-11 {
    background-color: var(--red-11);
}

.bg-dark-red {
    background-color: var(--dark-red);
}

.bg-light-red {
    background-color: #f4e9e9;
}

.bg-orange {
    background-color: var(--orange);
}

.bg-purple {
    background-color: var(--blue);
}

.bg-dark-purple {
    background-color: var(--dark-blue);
}

.bg-light-purple {
    background-color: var(--light-blue);
}

.bg-teal {
    background-color: var(--teal);
}

.bg-teal-11 {
    background-color: var(--teal-11);
}

.bg-dark-teal {
    background-color: var(--dark-teal);
}

.bg-light-teal {
    background-color: var(--light-teal);
}

.bg-green {
    background-color: var(--green);
}

.bg-dark-green {
    background-color: var(--dark-green);
}

.bg-green-6 {
    background-color: var(--green-6);
}
.bg-green-5 {
    background-color: var(--green-5);
}
.bg-green-4 {
    background-color: var(--green-4);
}

.bg-green-3 {
    background-color: var(--green-3);
}

.bg-light-green {
    background-color: var(--light-green);
}

.bg-light-blue {
    background-color: var(--light-blue);
}

.bg-blue-2 {
    background-color: var(--blue-2);
}

.bg-blue-3 {
    background-color: var(--blue-3);
}

.bg-blue-3-chart {
    background-color: var(--blue-3-chart);
}

.bg-blue-4 {
    background-color: var(--blue-4);
}

.bg-blue-4-chart {
    background-color: var(--blue-4-chart);
}

.bg-blue-5-chart {
    background-color: var(--blue-5-chart);
}

.bg-blue-6-chart {
    background-color: var(--blue-6-chart);
}

.bg-blue-8 {
    background-color: var(--blue-8);
}

.bg-blue {
    background-color: var(--blue);
}

.bg-blue-11 {
    background-color: var(--blue-11);
}

.bg-dark-blue {
    background-color: var(--dark-blue);
}

.bg-blue-13 {
    background-color: var(--blue-13);
}

.bg-dark-gray {
    background-color: var(--dark-gray);
}


.bg-light-blue-accent {
    background: var(--blue-2);
    background: url(/images/Light-Transparent3.png), linear-gradient(var(--blue-2), var(--blue-2));
    background-position: top right;
    background-size: 85%, cover;
    background-repeat: no-repeat;
}

.bg-dark-blue-accent {
    background: var(--blue-12);
    background: linear-gradient(var(--blue-12) -20%, transparent), url(/images/Dark-Transparent2.png), linear-gradient(var(--blue-12), var(--blue-12));
    background-position: top right;
    background-size: cover;
    background-repeat: no-repeat;
}

.bg-dv-hc-7 {
    background-color: var(--dv-hc-7);
}

.bg-dv-hc-6 {
    background-color: var(--dv-hc-6);
}

.bg-dv-hc-5 {
    background-color: var(--dv-hc-5);
}

.bg-dv-hc-4 {
    background-color: var(--dv-hc-4);
}

.bg-dv-hc-3 {
    background-color: var(--dv-hc-3);
}

.bg-dv-hc-2 {
    background-color: var(--dv-hc-2);
}

.bg-dv-hc-1 {
    background-color: var(--dv-hc-1);
}
/* section headings - often h3 - used to look like buttons */
.upper-note {
    text-transform: uppercase;
    font-family: var(--font-family);
    font-size: 0.77rem;
    line-height: 1em;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: left;
}

.blue-accent-under:after {
    height: 3px;
    width: 34px;
    background: var(--blue-5);
    content: " ";
    display: block;
    margin: 1rem 0;
}

.section-heading,.large-section-heading {
    border-bottom: 1px solid var(--gray-4);
    font-size: 1.12rem;
    line-height: 1.1em;
    padding: 4px 0;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    margin: 0 0 0.6em;
    letter-spacing: normal;
}
.large-section-heading {
    font-size: 1.65em;
    line-height: 1.1em;
    padding: 0 0 .3em;
    margin: 0 0 .75em;
}

.section-heading h1, .section-heading h2, .section-heading h3, .section-heading h4, .section-heading h5, .section-heading h6 {
    font-size: 1em;
    padding: 0 0 0.1em;
    margin: 0;
    font-weight:600;
}

.section-heading h1 a, .section-heading h2 a, .section-heading h3 a, .section-heading h4 a, .section-heading h5 a, .section-heading h6 a {
    color: var(--black);
}

.section-h, .see-also > strong {
    display: block;
    font-size: 1em;
    padding: 0 0 0.1em;
    margin: 0;
    font-family: var(--font-family);
    font-weight: 600;
    border-bottom: 1px solid var(--gray-3);
    font-size: 1.12rem;
    line-height: 1.1em;
    padding: 4px 0 6.016px;
    margin: 0 0 0.6em;
    letter-spacing: normal;
}

.large-section-h {
    font-family: var(--font-family);
    font-weight: 500;
    border-bottom: 1px solid var(--gray-3);
    font-size: 1.65em;
    line-height: 1.1em;
    padding: 0 0 .3em;
    margin: 0 0 .75em;
    letter-spacing: normal;
}

.block-header, .block-header-blue, .block-header-green, .block-header-purple, .block-header-red, .block-header-gold, .block-header-black {
    color: var(--dark-blue);
    background-color: var(--light-blue);
    border-top: solid 3px currentColor;
    padding: .25em .5em !important;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .02rem;
}

    .block-header .h2, .block-header .h3, .block-header .h4, .block-header .h5, .block-header .h6, .block-header h2, .block-header h3, .block-header h4, .block-header h5, .block-header h6,
    .block-header.h2, .block-header.h3, .block-header.h4, .block-header.h5, .block-header.h6, h2.block-header, h3.block-header, h4.block-header, h5.block-header, h6.block-header {
        font-family: var(--font-family) !important;
        font-size: 1.125rem !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
        letter-spacing: 0 !important;
        border-bottom: 0 !important;
        text-transform: none !important;
    }

    .block-header .h2, .block-header .h3, .block-header .h4, .block-header .h5, .block-header .h6, .block-header h2, .block-header h3, .block-header h4, .block-header h5, .block-header h6 {
        margin: 0 !important;
        padding: 0 !important;
    }



.white-shadow {
    box-shadow: 0 -8px 10px 8px white; /* for headers in a div with a shadow and we don't want that shadow to show behind the header but we want it to show behind the rest of the div */
}

/* end section headings - often h3 - used to look like buttons */

/* this is for gray backgrounds that start partway after a white box with drop shadow */
.start-gray-bg {
    position: relative;
}

    .start-gray-bg:after {
        content: "";
        width: 1000000px;
        height: 1000000px;
        background: var(--light-gray);
        position: absolute;
        z-index: -100;
        top: 50px;
        left: -50000px;
        width: 200vw;
        left: -50vw;
    }


/* this is for white backgrounds that start right where you want the gray background to end */
.start-white-bg {
    position: relative;
}

    .start-white-bg:after {
        content: "";
        width: 1000000px;
        height: 1000000px;
        background: var(--white);
        position: absolute;
        z-index: -100;
        top: 0px;
        left: -50000px;
        width: 200vw;
        left: -50vw;
    }

.bg-gray-across {
    position: relative;
}

    .bg-gray-across:after {
        content: "";
        width: 1000000px;
        height: 100%;
        background: var(--light-gray);
        position: absolute;
        z-index: -100;
        top: 0;
        left: -50000px;
        width: 200vw;
        left: -50vw;
    }

.fade-in-gray {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 70%, rgba(232, 238, 241, 0.5) 98%);
}

/* border color - these are !important because bootstrap's border styles are important and they need to be important in order to override input border styles */

.border {
    border: 1px solid var(--gray-3) !important
}

.border-top {
    border-top: 1px solid var(--gray-3) !important
}

.border-right {
    border-right: 1px solid var(--gray-3) !important
}

.border-bottom {
    border-bottom: 1px solid var(--gray-3) !important
}

.border-bottom-3 {
    border-bottom: 3px solid var(--gray-3) !important
}

.border-left {
    border-left: 1px solid var(--gray-3) !important
}

.b-white {
    border-color: var(--white) !important;
}

.b-black {
    border-color: var(--black) !important;
}

.b-light-gray {
    border-color: var(--gray-4) !important;
}

.b-gold {
    border-color: var(--gold) !important;
}

.b-dark-gold {
    border-color: var(--dark-gold) !important;
}
.b-orange-4{
    border-color: var(--orange-4)!important;
}
.b-orange{
    border-color: var(--orange)!important;
}

.b-red {
    border-color: var(--red) !important;
}

.b-dark-red {
    border-color: var(--dark-red) !important;
}
.b-red-2{
        border-color: var(--red-2) !important;
}
}
.b-light-red {
    border-color: #f4e9e9 !important;
}

.b-purple {
    border-color: var(--purple) !important;
}

.b-dark-purple {
    border-color: var(--dark-blue) !important;
}

.b-light-purple {
    border-color: var(--light-purple) !important;
}

.b-teal {
    border-color: var(--teal) !important;
}

.b-dark-teal {
    border-color: var(--dark-teal) !important;
}

.b-teal-3 {
    border-color: var(--teal-3) !important;
}
.b-light-teal {
    border-color: var(--light-teal) !important;
}

.b-green {
    border-color: var(--green) !important;
}

.b-green-3 {
    border-color: var(--green-3) !important;
}

.b-dark-green {
    border-color: var(--dark-green) !important;
}

.b-light-green {
    border-color: var(--light-green) !important;
}

.b-light-blue {
    border-color: var(--light-blue) !important;
}

.b-blue-8 {
    border-color: var(--blue-8) !important;
}

.b-blue {
    border-color: var(--blue) !important;
}
.b-blue-2 {
    border-color: var(--blue-2) !important;
}

.b-blue-11 {
    border-color: var(--blue-11) !important;
}

.b-dark-blue {
    border-color: var(--dark-blue) !important;
}

.b-blue-13 {
    border-color: var(--blue-13) !important;
}




.b-dark-gray {
    border-color: var(--dark-gray) !important;
}

.opacity-6 {
    opacity: .6;
}

.opacity-8 {
    opacity: .8;
}

.gradient-black {
    background: rgba(var(--black-rgb),1);
    background: linear-gradient(to bottom, rgba(var(--black-rgb),1) 0%, rgba(var(--black-gradient-rgb),1) 100%);
}

.gradient-gold {
    background: var(--dark-gold);
    background: linear-gradient(to bottom, var(--dark-gold) 0%, var(--gold) 100%);
}

.gradient-orange {
    background: var(--dark-orange);
    background: linear-gradient(to bottom, var(--dark-orange) 0%, var(--orange) 100%);
}

.gradient-red {
    background: rgba(var(--dark-red-rgb),1);
    background: linear-gradient(to bottom, rgba(var(--dark-red-rgb),1) 0%, rgba(var(--red-rgb),1) 100%);
}

.gradient-purple {
    background: rgba(var(--dark-purple-rgb),1);
    background: linear-gradient(to bottom, rgba(var(--dark-purple-rgb),1) 0%, rgba(var(--purple-rgb),1) 100%);
}

.gradient-teal {
    background: var(--dark-teal-rgb);
    background: linear-gradient(to bottom, var(--dark-teal) 0%, var(--teal) 100%);
}

.gradient-green {
    background: rgba(var(--dark-green-rgb),1);
    background: linear-gradient(to bottom, rgba(var(--dark-green-rgb),1) 0%, rgba(var(--green-rgb),1) 100%);
}

.gradient-blue-medium {
    background: rgba(var(--blue-rgb),1);
    background: linear-gradient(to top, rgba(var(--blue-rgb),1) 0%, rgba(var(--blue-8-rgb),1) 100%);
}

.gradient-blue {
    background: rgba(var(--blue-11-rgb),1);
    background: linear-gradient(to top, rgba(var(--blue-11-rgb),1) 0%, rgba(var(--blue-rgb),1) 100%);
}

.gradient-blue-dark {
    background: rgba(var(--blue-11-rgb),1);
    background: linear-gradient(to top, rgba(var(--blue-11-rgb),1) 0%, rgba(var(--dark-blue-rgb),1) 100%);
}

.gradient-dark-blue-up {
    background: rgba(var(--dark-blue-rgb),1);
    background: linear-gradient(to bottom, rgba(var(--dark-blue-rgb),1) 0%, rgba(var(--blue-11-rgb),1) 100%);
}

.tri-gradient, .tri-gradient-2 {
    background: var(--blue);
    background: linear-gradient(245deg,var(--blue-11), var(--dark-blue), var(--blue-8));
}


.box-shadow {
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1), 0 2px 13px 0 rgba(0,0,0,0.1);
}


/* end color utilities */

/* dented background */
.will-background {
    background: url(/images/all-access/will-bkg.jpg), linear-gradient(var(--blue), var(--blue));
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
}

.dent-bottom {
    position: relative;
    padding-bottom: 7vw;
}

.dent-top {
    position: relative;
    padding-top: 7vw;
}

.dent-bottom:after {
    content: "";
    display: block;
    border-bottom: solid 7vw white;
    border-left: solid 70vw transparent;
    border-right: solid 35vw transparent;
    filter: blur(.5px);
    bottom: -2px;
    position: absolute;
    width: 105vw;
    left: -5vw;
    z-index: 1;
}

.dent-bottom.reverse:after {
    border-left: solid 35vw transparent;
    border-right: solid 70vw transparent;
}

.dent-top:before {
    content: "";
    display: block;
    border-top: solid 7vw white;
    border-left: solid 35vw transparent;
    border-right: solid 70vw transparent;
    filter: blur(.5px);
    top: -2px;
    position: absolute;
    width: 105vw;
    left: -5vw;
    z-index: 1;
}



/* side menu style mmenustyle */

.mobilesubscribe.trigger img {
    width: 46px;
    min-width: 46px;
}

#left-side-menu, #right-side-menu {
    z-index: -100;
    display: block;
    opacity: 0;
    position: fixed;
    height: 100%;
    width: 150px;
    top: 0;
    color: var(--white);
    overflow: hidden;
    -webkit-transition: opacity .5s step-end, width .4s cubic-bezier(0, 0.46, 0.11, 0.64);
    transition: opacity .5s step-end, width .4s cubic-bezier(0, 0.46, 0.11, 0.64);
}

#right-side-menu {
    right: 0;
    overflow-y: auto;
}

.right-side-optin {
    overflow-y: auto;
    min-width: 200px;
}

#left-side-menu.left-showing, #right-side-menu.right-showing {
    opacity: 1;
    -webkit-transition: width .3s cubic-bezier(0, 0.46, 0.11, 0.64), opacity .4s step-start;
    transition: width .3s cubic-bezier(0, 0.46, 0.11, 0.64), opacity .4s step-start;
    z-index: 1;
    width: 80%;
}

#left-side-menu > ul {
    max-height: calc(100% - 165px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px;
    margin: 0;
}

    #left-side-menu > ul > li:first-child {
        border-top: none;
    }

#left-side-menu a, #right-side-menu a {
    color: var(--white);
    text-decoration: none;
}

.mobile-menu-icon {
    display: none;
}

#left-side-menu .fa-regular {
    display: inline-block !important;
    font-size: 1.3em;
    vertical-align: middle;
    margin: 0 4px 4px 0;
}



#left-side-menu > ul > li > a, #left-side-menu > ul > li > ul > li > a {
    font-family: var(--font-family-alternative);
    text-transform: uppercase;
    font-weight: 500;
    font-size: .9em;
    letter-spacing: .03rem;
}

.side-menu-title {
    text-align: center;
    color: rgba(255,255,255,.4);
    padding: 13px 11px 11px;
    margin: 0;
    line-height: 1;
    border-bottom: solid 1px rgba(0,0,0,.15);
    text-transform: uppercase;
    font-family: var(--font-family-alternative);
    font-weight: 500;
}




#right-side-menu .optin-heading a {
    color: var(--white) !important;
    font-weight: 600;
    font-size: 22px;
}

#right-side-menu #optinform-content {
    padding: 24px 24px 6px;
}

#right-side-menu #optinform-footer {
    padding: 0 20px;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
}


#right-side-menu #ntf-content {
    display: block !important;
    margin-top: -1em;
    background: transparent;
}


#right-side-menu .side-menu-title {
    margin-right: 10px;
    text-align: left;
    color: var(--white);
    padding: 13px 3px 11px;
}



#right-side-menu .side-menu-list {
    list-style: none;
    font-size: .9em;
    padding: 0.4rem .6rem;
}

    #right-side-menu .side-menu-list a {
        display: inline-block;
        padding: .5em 0;
    }

    #right-side-menu .side-menu-list .fa-regular,
    #right-side-menu .side-menu-list .fa-kit {
        font-weight: 400;
    }
/*#right-side-menu .ntf-footer {
    display: none;
}*/
#right-side-menu #ntf-area {
    position: relative;
}

#right-side-menu .ntf-area .fa-bell {
    position: absolute;
    right: 19px;
    top: 12px;
}

#right-side-menu .ntf-number {
    position: absolute;
    right: 20px;
    top: 13px;
}



.page-wrap {
    position: relative;
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease,-webkit-transform .4s ease;
    z-index: 1;
    background: var(--white);
    overflow: hidden; /* this is in place for start-gray-bg, scrolling logos, and things like that. Turn it off on individual pages where you want position:sticky to work */
    width: 100%;
    margin-bottom: -23px;
}

    .page-wrap.left-showing {
        -webkit-transform: translate(80%,0);
        -ms-transform: translate(80%,0);
        transform: translate(80%,0);
        -webkit-transform: translate3d(80%,0,0);
        transform: translate3d(80%,0,0);
    }

    .page-wrap.right-showing {
        -webkit-transform: translate(-80%,0);
        -ms-transform: translate(-80%,0);
        transform: translate(-80%,0);
        -webkit-transform: translate3d(-80%,0,0);
        transform: translate3d(-80%,0,0);
    }

.menu-closer {
    width: 0;
    height: 0;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -webkit-overflow-scrolling: touch;
}

.menu-closer {
    -webkit-transition: opacity .4s step-start;
    transition: opacity .4s step-start;
    background: #000;
}

    .menu-closer.left-showing, .menu-closer.right-showing {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 1100;
    }

    .menu-closer.left-showing, .menu-closer.right-showing {
        opacity: .6;
        -webkit-transition: opacity .4s ease-in-out;
        transition: opacity .4s ease-in-out;
    }

html, body, .page-wrap {
    -webkit-backface-visibility: hidden;
}

    html.left-showing #sticky-bar {
        top: -400px;
    }

    html.left-showing, html.right-showing, body.left-showing, body.right-showing {
        overflow: hidden;
        height: 100%;
    }

#left-side-menu.left-showing input {
    display: inline-block;
}

#left-side-menu input, .light-translucent-input, .light-translucent-input[type=text] {
    border-radius: 0;
    min-height: 38px;
    padding-left: 8px;
    background: rgba(255,255,255,.3);
    color: rgba(255,255,255,.8);
    width: calc(100% - 20px);
    margin: 10px;
    border: 0;
    display: none;
}

    #left-side-menu ::-ms-input-placeholder, .light-translucent-input::-ms-input-placeholder {
        color: rgba(255,255,255,.8);
    }

    #left-side-menu ::-webkit-input-placeholder, .light-translucent-input::-webkit-input-placeholder {
        color: rgba(255,255,255,.8);
    }

    #left-side-menu input:focus, .light-translucent-input:focus {
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border: 0;
    }

    #left-side-menu input::placeholder, .light-translucent-input::placeholder {
        color: rgba(255,255,255,.75);
    }

.side-menu-search {
    height: 54px;
    border-bottom: solid 1px rgba(0,0,0,.15);
}

/* some utilities */


.pointer {
    cursor: pointer;
}

.rounded {
    border-radius: .277rem !important;
}

.font-small {
    font-size: .888em;
}

.font-smaller {
    font-size: .777em;
}

.font-smallest {
    font-size: .66em;
}


/* end some utilities */

/* header stats and data visualizations on company profile */

@media (min-width: 809px) {
    #priceChart {
        height: calc(100% - 63px);
    }

    .priceChartOptions {
        font-size: initial !important;
    }
}


.range-meter {
    font-size: 12px;
    font-weight: 600;
    padding-top: 9px;
    text-align: center;
    float: right;
    margin-top: -8px;
    padding-left: 10px;
}

.range {
    display: inline-block;
    background: var(--gray-2);
    width: 66px;
    height: 15px;
    text-align: center;
    margin: 0px 7px;
    position: relative;
    vertical-align: bottom;
}

.reduced-range {
    width: 50px;
}

.range-marker {
    position: absolute;
    top: -2px;
    left: 50%;
    line-height: .95;
    transform: translateX(-50%);
    white-space: nowrap;
}

.range-arrow {
    color: var(--blue-9);
    display: block;
}

.range-label {
    float: left;
}

.range-marker-label {
    font-weight: normal;
}


a.read-more-link:hover, a.read-more-link:focus {
    text-decoration: none;
}

a.read-more-link:active, a.read-more-link:focus {
    cursor: progress;
    text-decoration: none;
}



@media (min-width: 750px) and (max-width: 991px) {
    .range {
        width: 80px;
    }

    .reduced-range {
        width: 50px;
    }
}

@media (min-width: 650.1px) and (max-width: 749px) {
    .range {
        width: 40px;
    }

    .reduced-range {
        width: 30px;
    }
}

@media (min-width: 650.1px) {
    .price-info .price-data:nth-child(3) {
        border-bottom: none;
        margin-bottom: -6px;
    }
}



.price-info {
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
}

.gray-notice {
    margin: 0 0 10px;
    font-size: 14px;
}


@media (max-width: 680px) {
    .multiple-checks > div {
        display: block;
    }

    .modal-body {
        max-height: 50vh;
    }

    #cphPrimaryContent_tabCompanyProfile .price-data-col, #CompanyProfile .price-data-col, .price-data-col, .crypto-data-section .price-data-col {
        width: 100%;
        padding: 0;
    }



    .reduced-range {
        width: 100px;
    }
}



@media (max-width: 340px) {
    .range {
        width: 80px;
    }

    .reduced-range {
        width: 65px;
    }
}
/* end header stats and data visualizaitons on company profiles*/


.companylogo {
    padding: 0 0 10px 10px;
    float: right;
    max-width: 225px;
    max-height: 150px;
}

@media (max-width: 460px) {
    .companylogo {
        max-width: 50%;
    }
}
/*video Embeds*/
.videowrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 0;
    height: 0;
}

.videowrapper-vertical {
    padding-bottom: 177.81%;
}

.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.container-play {
    position: relative;
}

    .container-play::after {
        content: "\25B6";
        color: #ffffffe0;
        position: absolute;
        top: 50%;
        left: 50%;
        white-space: pre;
        text-align: center;
        font-size: 3em;
        transform: translate(-50%, -50%);
        text-shadow: 2px 2px 5px #21212187;
    }

    .container-play .open-video-modal-button:focus-visible {
        outline: solid 2px var(--black);
        border: solid 1px var(--light-gray);
    }

    .container-play img.hide {
        z-index: 0;
    }

.container-video-frame {
    position: relative;
    width: 100%;
    display: none;
}

    .container-video-frame.show {
        display: block;
        top: 0;
        left: 0;
        z-index: 2;
    }

#video-description h2 {
    font-size: 1.2rem;
}

#video-description p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    line-height: 1.3em;
    max-height: 10.4em;
}

#video-modal button.close {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    line-height: .95;
    position: absolute;
    z-index: 1;
    opacity: 1;
    background: var(--blue-13);
    top: -10px;
    right: -10px;
    display:flex;
    font-size: 1.75em;
    justify-content:center;
    text-align: center;
    color: var(--white);
    font-weight: 500 !important;
    text-shadow: none;
}

    #video-modal button.close:hover, #video-modal button.close:focus {
        color: var(--white);
    }

@media (min-width: 576px) {

    #video-modal .modal-dialog {
        max-width: 75%;
        margin: 1.75rem auto;
    }

    #video-modal.video-modal-vertical .modal-dialog {
        max-width: 300px;
    }

    #video-modal.video-modal-vertical-with-description .modal-dialog {
        max-width: 900px;
    }
}


/* article features */

@media (min-width:1300px) {
    .edit-content-button {
        position: relative;
        margin-bottom: -1.5em;
        left: -1.5em;
        float: left;
    }
}

.hoverDetails, .hoverDetails:active, .hoverDetails:hover, .hoverDetails:focus,.company-badge {
    display: inline-block;
    background: var(--gray-2);
    padding: 0.3em 0.5em;
    margin: 0 0.3em;
    line-height: 1;
    border-radius: 1em;
    color: var(--blue-9);
    font-weight: 500;
    font-family: var(--font-family);
    letter-spacing: 0;
    font-size: 0.8em;
    border: none;
    cursor: pointer;
}

    .hoverDetails:after {
        content: "\f002";
        font-family: var(--fa-style-family);
        position: relative;
        top: 1px;
        left: 3px;
        margin: 0 3px;
        font-size: 0.8em;
        vertical-align: top;
        line-height:1em;
        font-weight: 400;
    }
    .company-badge:hover, .company-badge:focus, .company-badge:active {
        color: var(--dark-blue);
        background: var(--blue-2);
        text-decoration:none;
    }

    #floatingTooltip {
    display: none;
    }

    #floatingTooltip.active, #floatingTooltip:hover {
        display: block;
    }

#article-wrapper {
    width: 100%;
    margin: 1em auto;
}

@media (min-width: 768px) {
    #article-wrapper {
        width: 90%;
        margin: 1em auto;
    }
}

.article-image {
    width: 100%;
    aspect-ratio: 886 / 360;
    overflow: hidden;
}

    .article-image img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        object-position: center;
    }

.keypoints {
    display: inline-block;
    padding: 0 1.4em 1.25em;
    margin: 1em 0;
    width: 100%;
    position: relative;
    left: 0;
    border-bottom: 1px solid var(--gray-4);
}

    .keypoints h2, .keypoints h3 {
        color: var(--dark-blue);
        text-transform: uppercase;
        font-weight: 500;
        margin: 0 0 1rem;
        font-size: 0.77em !important;
    }

    .keypoints ul {
        font-size: 0.883rem;
        position: relative;
        left: 0;
        list-style: none;
        padding-left: 0;
        margin-bottom: 0;
    }

        .keypoints ul li {
            font-weight: 500;
            margin-bottom: 0.75em;
            position: relative;
            padding-left: 1.6em;
            line-height: 1.3em;
        }

            .keypoints ul li strong {
                font-weight: 500;
            }

            .keypoints ul li:before {
                font-weight: normal;
                content: "\f058";
                font-family: var(--fa-style-family);
                color: var(--blue-8);
                position: absolute;
                top: 1px;
                left: 0;
            }


.article-page .carousel__controls, .article-page .carousel__slide, .article-page .carousel__activator {
    display: none;
}

.article-page .carousel__control {
    height: 30px;
    width: 30px;
    margin-top: -30px;
    top: 50%;
    position: absolute;
    display: block;
    cursor: pointer;
    color: #fafafa;
    opacity: 0.35;
    outline: 0;
    z-index: 3;
}

    .article-page .carousel__control:after {
        content: "\f105";
        font-family: var(--fa-style-family);
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 0.82;
        font-size: 2em;
        vertical-align: text-bottom;
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .article-page .carousel__control:hover {
        opacity: 1;
    }


#article-contents {
    display: inline-block;
    font-size: 90%;
    padding: 20px;
    list-style: none;
    width: 100%;
    position: relative;
    margin: 5px 0 1rem 0;
    left: 0;
}

    #article-contents a {
        text-decoration: none;
    }


@media (min-width: 819.9px) {
    #article-contents {
        width: 46%;
    }

    .placed-article #article-contents {
        width: 100%;
    }
}

/* actually left */
.carousel__control--forward {
    left: 10px;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

/* actually right */
.carousel__control--backward {
    right: 10px;
}

.headline-image .caption {
    margin: 5px 0 0 0;
    transition: max-height .2s;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 18px;
    max-height: 36px;
    padding: 0;
    font-size: 9pt;
    font-style: italic;
    cursor: pointer;
}

    .headline-image .caption.expanded {
        max-height: initial;
        -webkit-line-clamp: unset;
    }

.body-copy {
    font-size: 1.125rem;
}
    .placed-content .body-copy {
        font-size: 1em;
    }

    .body-copy p {
        line-height: 1.6;
    }
    /* in case there is a floated image near the end of an article */
    .body-copy:after {
        content: " ";
        clear: both;
        display: block;
    }

    .body-copy > img:first-of-type, .body-copy > p:first-of-type > img:first-of-type {
        float: none !important;
        margin: 5px 0 15px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .body-copy > img:first-of-type, .body-copy > p:first-of-type > img.companylogo:first-of-type {
        width: auto !important;
        display: block;
        margin: 5px auto 15px !important;
        max-width: 100% !important;
    }

    img.alignright, img.alignleft, .body-copy img.alignleft, .body-copy img.alignright {
        margin: 5px 0 15px 0;
        width: 100%;
        border-radius: 0.25rem;
    }

div.alignright, div.alignleft, p.alignright, p.alignleft {
    margin: 0 0 25px 0;
    width: 100%;
}

.aligncenter, .body-copy img.aligncenter {
    width: auto;
    display: block;
    float: none;
    margin: 5px auto 15px;
    border-radius: 0.25rem;
}

figcaption {
    font-style: italic;
    font-size: clamp(11px,.66em,14px);
    padding: 0.5em;
    text-align:right;
}
figcaption a {
    color: inherit;
    font-weight:400!important;
    text-decoration: underline;
}

@media (min-width: 550px) {
    img.alignright, .body-copy img.alignright {
        float: right;
        margin: 5px 0 15px 25px;
        width: 50%;
        max-width: 450px;
    }



    img.alignleft, .body-copy img.alignleft {
        float: left;
        margin: 5px 15px 15px 0;
        width: 50%;
        max-width: 450px;
    }

    p.alignright, div.alignright {
        float: right;
        margin: 5px 0 15px 25px;
        width: 50%;
        max-width: 450px;
        line-height: 1.1;
    }

    p.alignleft, div.alignleft {
        float: left;
        margin: 5px 15px 15px 0;
        width: 50%;
        max-width: 450px;
        line-height: 1.1;
    }

    .article-page ul, .article-page ol {
        position: relative;
        left: 22px;
        width: calc(100% - 25px);
    }

    .page-wrap.left-showing {
        -webkit-transform: translate(440px,0);
        -ms-transform: translate(440px,0);
        transform: translate(440px,0);
        -webkit-transform: translate3d(440px,0,0);
        transform: translate3d(440px,0,0);
    }

    .page-wrap.right-showing {
        -webkit-transform: translate(-380px,0);
        -ms-transform: translate(-380px,0);
        transform: translate(-380px,0);
        -webkit-transform: translate3d(-380px,0,0);
        transform: translate3d(-380px,0,0);
    }

    #left-side-menu.left-showing {
        width: 440px;
    }

    #right-side-menu.right-showing {
        width: 380px;
    }

    .right-side-optin {
        width: 440px;
    }
}




/* for drop down */
#left-side-menu > ul {
    border-bottom: solid 1px rgba(0,0,0,.15);
}

#left-side-menu ul {
    list-style: none;
}

    #left-side-menu ul > li ul {
        max-height: 0;
        overflow: hidden;
        transition: all .5s cubic-bezier(0, 1.08, 0.88, 0.96);
    }

        #left-side-menu ul > li ul.open {
            max-height: 1850px;
            transition: all 1s cubic-bezier(0.47, 0.01, 0.54, 0.99);
        }

#left-side-menu li {
    border-top: solid 1px rgba(0,0,0,.15);
    position: relative;
}

    #left-side-menu li a {
        line-height: 1.5;
        padding: 11px 5px 5px 49px;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        max-width: 100%;
        width: 100%;
        font-weight: 400;
        font-size: 0.9rem;
    }

#left-side-menu > ul > li > ul > li > ul > li a {
    padding-left: 15px;
}

.menu-dropdown {
    width: 40px;
    height: 45px;
    display: inline-block;
    position: absolute;
    cursor: pointer;
}

    .menu-dropdown .arrow:after {
        font-family: var(--fa-style-family);
        content: "\f105";
        position: absolute;
        left: 15px;
        top: 15px;
        font-size: 1.1em;
        color: rgba(255, 255, 255, 0.6);
        line-height: .8;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

    .menu-dropdown.down .arrow:after {
        transform: rotate(90deg);
    }

/* end side menu styles mmenustyles */

.lh-medium {
    line-height: 1.35
}

.lh-loose {
    line-height: 1.6 !important;
}


/* this one got adblocked */
.no-underline a, .no-underline, .no-underline a:hover, .no-underline a:active, .no-underline a:focus, .no-underline:hover, .no-underline:active, .no-underline:focus {
    text-decoration: none !important;
}
/* so I made this one */
.nounderline a, .nounderline, .nounderline a:hover, .nounderline a:active, .nounderline a:focus, .nounderline:hover, .nounderline:active, .nounderline:focus {
    text-decoration: none !important;
}
/* hurray */

/* specifically for company profile links so they don't risk getting ad blocked*/
.profile-link a, .profile-link, .profile-link a:hover, .profile-link a:active, .profile-link a:focus, .profile-link:hover, .profile-link:active, .profile-link:focus {
    text-decoration: none;
}

.font-8 {
    font-size: .8em;
}

.font-9 {
    font-size: .9em;
}

.font-12 {
    font-size: 1.2em;
}

.font-15 {
    font-size: 1.5em;
}


.shadow {
    box-shadow: 0 .2rem .85rem rgba(0,0,0,.11) !important;
}

.light-shadow {
    box-shadow: 0 .15rem .4rem rgba(0,0,0,.11) !important;
}


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 1em;
}

h1, .h1 {
    margin: .8em 0 .3em; /*browser reset*/
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 2.22rem;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    opacity: 1;
}

    h1.PageTitleHOne {
        color: var(--dark-blue);
    }

h2, .h2 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 1.77rem;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
    opacity: 1;
}

.body-copy h2, .body-copy .h2 {
    font-size: 1.485em;
    font-weight: 500;
    color: var(--dark-blue);
    border-bottom: 1px solid var(--gray-3);
    padding: 0 0 0.75rem;
    margin: 1.5rem 0 1rem;
}

h2 > strong {
    font-weight: 500;
}

.body-copy h2 span, .body-copy .h2 span, .body-copy h2 strong, .body-copy .h2 strong {
    font-weight: 500 !important
}

h3, .h3 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 1.3em;
    line-height: 1.2;
    letter-spacing: 0;
    opacity: 1;
}

.body-copy h3, .body-copy .h3 {
    font-size: 1.215em;
    font-family: var(--font-family);
    font-weight: 500;
    letter-spacing: 0;
    margin: 1.5rem 0 1rem;
}

    .body-copy h3 span, .body-copy .h3 span, .body-copy h3 strong, .body-copy .h3 strong {
        font-weight: 500 !important
    }

h4, .h4 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.2;
    letter-spacing: .03rem;
}

.body-copy h4, .body-copy .h4 {
    font-family: var(--font-family-alternative);
    color: var(--blue);
    font-size: 1.1em;
    font-weight: 500 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 1.5rem 0 1rem;
}

    .body-copy h4 span, .body-copy .h4 span, .body-copy h4 strong, .body-copy .h4 strong {
        font-weight: 500 !important
    }

h5, .h5 {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.3;
    text-transform: none;
    opacity: 1;
    letter-spacing: 0;
}

.body-copy h5, .body-copy .h5 {
    font-family: var(--font-family);
    font-size: 1.05em;
    font-weight: 500 !important;
    letter-spacing: 0;
    margin: 1.5rem 0 1rem;
}

    .body-copy h5 span, .body-copy .h5 span, .body-copy h5 strong, .body-copy .h5 strong {
        font-weight: 500 !important
    }

h6, .h6 {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: .03rem;
}

.body-copy h6, .body-copy .h6 {
    font-family: var(--font-family);
    font-size: 1em;
    font-weight: 500 !important;
    letter-spacing: 0;
    margin: 1.5rem 0 1rem;
}

    .body-copy h6 span, .body-copy .h6 span, .body-copy h6 strong, .body-copy .h6 strong {
        font-weight: 500 !important
    }

@media (min-width: 800px) {
    h1, .h1, .body-copy h1, .body-copy .h1 {
        font-size: 1.9rem;
    }

    h2, .h2, .body-copy h2, .body-copy .h2 {
        font-size: 1.7rem;
    }

    h3, .h3, .body-copy h3, .body-copy .h3 {
        font-size: 1.5rem;
    }


    h4, .h4, .body-copy h4, .body-copy .h4 {
        font-size: 1.33rem;
    }

    h5, .h5, .body-copy h5, .body-copy .h5 {
        font-size: 1.2rem;
    }

    h6, .h6, .body-copy h6, .body-copy .h6 {
        font-size: 1.1rem;
    }
}


@media (min-width: 1200px) {
    h1, .h1, .body-copy h1, .body-copy .h1 {
        font-size: 2.3rem;
    }
}

/*
    h2, .h2 {
        font-size: 1.65rem;
    }

    h3, .h3 {
        font-size: 1.25rem;
    }

    .body-copy h3, .body-copy .h3 {
        font-size: 1.5rem;
    }

    h4, .h4 {
        font-size: 1.3rem;
    }

    .body-copy h4, .body-copy .h4 {
        font-size: 1.45rem;
    }

    h5, .h5, .body-copy h5, .body-copy .h5 {
        font-size: 1.3rem;
    }

    h6, .h6, .body-copy h6, .body-copy .h6 {
        font-size: 1.2rem;
    }

}*/



ul {
    list-style-type: square;
    padding-left: 1.2em;
}

    ul li::marker {
        color: var(--blue-5);
    }

label {
    font-weight: 400;
}

input {
    margin-bottom: 4px;
    border-radius: 5px;
}


    input[type=text],
    input[type=date],
    input[type=datetime],
    input[type=number],
    input[type=search],
    input[type=time],
    input[type=url],
    input[type=email],
    input[type=tel],
    input[type=password], select, .select-default, textarea {
        padding: 7px;
        margin-bottom: 4px;
        border: solid 1px #C3CACD;
        outline: none;
        box-sizing: border-box;
        transition: all 0.30s ease-in-out;
        color: #5B626D;
        border-radius: 5px;
        line-height: 1.3em;
        min-height: 1.95em;
    }

textarea {
    max-width: 100%;
}

    input[type=text]:focus,
    input[type=date]:focus,
    input[type=datetime]:focus,
    input[type=number]:focus,
    input[type=search]:focus,
    input[type=time]:focus,
    input[type=url]:focus,
    input[type=email]:focus,
    input[type=tel]:focus,
    input[type=password]:focus,
    input[type=checkbox]:focus,
    textarea:focus,
    select:focus,
    .select-default:focus {
        box-shadow: 0 0 3px var(--blue-8);
        border: 1px solid var(--blue-8);
        outline: none;
    }

    input::selection, textarea::selection {
        background: var(--light-blue);
        color: var(--dark-blue);
    }

.form-row > .col, .form-row > [class*=col-] {
    padding: 12px;
}

@media (max-width: 576px) {
    .form-row > .col, .form-row > [class*=col-] {
        max-width: 100%;
    }
}

@media (min-width: 576px) {

    .form-row input[type="text"], .form-row input[type="email"] {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .form-row button, .form-row input[type="button"], .form-row input[type="submit"] {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}


/* experiment */
button:focus, button:focus-visible {
    outline: var(--blue) dashed 1px;
    outline-offset: 2px;
    box-shadow: none;
}
/* end experiment */


.sbbutton:focus {
    outline: var(--blue) dashed 1px;
    outline-offset: 2px;
    text-decoration: underline;
    box-shadow: none;
}


input [type=checkbox] {
    margin-right: 4px;
    border-radius: 2px;
}

input[type=radio] {
    margin-right: 4px;
    border-radius: 50%;
}

input::placeholder {
    font-family: var(--font-family);
}

input::-ms-input-placeholder {
    font-family: var(--font-family);
}

/* custom controls */
.custom-control {
    padding-left: 0;
}

    .custom-control input[type=radio], .custom-control input[type=checkbox] {
        position: absolute;
        z-index: -1;
        opacity: 0;
    }

    .custom-control label {
        position: relative;
        margin-bottom: 0;
        vertical-align: top;
        padding-left: 1.5em;
        line-height: 1.3em;
    }

    .custom-control.custom-radio label::before {
        border-radius: 50%;
    }

    .custom-control label::before {
        transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }

    .custom-control label::before {
        position: absolute;
        top: .14rem;
        left: 0;
        display: block;
        width: .8rem;
        height: .8rem;
        pointer-events: none;
        content: "";
        background-color: var(--light-gray);
        border: var(--dark-blue) solid 1px;
    }

    .custom-control.custom-checkbox label::before {
        color: var(--white);
        border: 0;
    }

    .custom-control label::after {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: .8rem;
        height: .8rem;
        pointer-events: none;
        content: "";
    }

    .custom-control.custom-checkbox label::after {
        content: "\f0c8";
        font-family: var(--fa-style-family);
        color: var(--dark-blue);
        font-size: 1.1em;
    }



    .custom-control.custom-radio input:checked ~ label::before {
        color: var(--white);
        border: solid var(--dark-blue) 4px;
    }

    .custom-control.custom-checkbox input:checked ~ label::before {
        color: var(--white);
        border: 0;
    }

    .custom-control.custom-checkbox input:checked ~ label::after {
        content: "\f14a";
        font-family: var(--fa-style-family);
        color: var(--dark-blue);
        font-size: 1.1em;
    }


    .custom-control label[class^="c-"]::before {
        border: solid 1px;
    }

    .custom-control.custom-radio input:checked ~ label[class^="c-"]::before {
        border: solid 4px;
    }

    .custom-control.custom-checkbox input:checked ~ label[class^="c-"]::after {
        color: inherit;
    }


    .custom-control input:focus-visible ~ label::before {
        outline: solid 2px var(--black);
    }

/* rangeslider */

.rangeslider,
.rangeslider__fill {
    display: block;
    -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

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

.rangeslider--horizontal {
    height: 4px;
    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: var(--blue);
    position: absolute;
}

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

.rangeslider--vertical .rangeslider__fill {
    bottom: 0;
    width: 100%;
}

.rangeslider__handle {
    background: transparent;
    cursor: pointer;
    display: inline-block;
    width: 40px;
    height: 40px;
    position: absolute;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    padding: 20px;
}


    .rangeslider__handle:after {
        content: "";
        display: block;
        width: 15px;
        height: 15px;
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: var(--white);
        border: solid 5px var(--blue);
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
    }

    .rangeslider__handle:active:after, .rangeslider--active .rangeslider__handle:after {
        border: solid 5px var(--dark-blue);
    }

.rangeslider--horizontal .rangeslider__handle {
    top: -18px;
    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 {
    outline: var(--blue) dashed 1px;
    outline-offset: 2px;
    text-decoration: underline;
    box-shadow: none;
}


.input-featured {
    padding: 15px !important;
    font-size: .77rem;
}

button, .btn, input[type=submit], .sbbutton, button.sbbutton, input[type=submit].sbbutton, .btn-primary, .btn-secondary, .btn-tertiary, .btn-quaternary .btn-alternative, .btn-disabled, .btn-featured, .btn-share {
    text-decoration: none;
    font-size: .77rem;
    line-height: 1;
    font-weight: 600;
    padding: 12px;
    display: inline-block;
    color: var(--white);
    border-radius: 5px;
    box-shadow: none;
    border: 1px solid var(--blue-8);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .05rem;
    cursor: pointer;
    background-repeat: no-repeat;
    background: var(--blue-8);
    transition: background 0.5s ease-in-out, color 0.5s ease-in-out, border 0.5s ease-in-out,box-shadow 0.2s ease-in-out;
    vertical-align: middle;
}

    .btn-primary:focus, .btn-primary:hover,
    .btn-secondary:focus, .btn-secondary:hover, .btn-tertiary:focus, .btn-tertiary:hover, .btn-alternative:focus, .btn-alternative:hover, .btn-featured:focus, .btn-featured:hover, .btn-quaternary:hover, .btn-quaternary:focus, .btn-share:hover, .btn-share:focus {
        text-decoration: none;
    }

    button:hover, .btn:hover, input[type=submit]:hover, .sbbutton:hover, button.sbbutton:hover, input[type=submit].sbbutton:hover, .btn-primary:hover,
    button:focus, input[type=submit]:focus, .sbbutton:focus, button.sbbutton:focus, input[type=submit].sbbutton:focus, .btn:focus, .btn-primary:focus {
        background: var(--blue);
        border-color: var(--blue);
        color: var(--white);
    }

    .btn:focus, .btn-primary:focus, .btn-secondary:focus, .btn-tertiary:focus, .btn-alternative:focus {
        outline: var(--blue) dashed 1px;
        outline-offset: 2px;
        text-decoration: none;
        box-shadow: none;
    }

    button:active, input[type=submit]:active, .sbbutton:active, button.sbbutton:active, input[type=submit].sbbutton:active, .btn-primary:active, .btn:active {
        background: #003752;
        border-color: #003752;
        color: var(--white);
    }

    .btn-disabled, button:disabled, input[type=submit]:disabled, .sbbutton:disabled, button.sbbutton:disabled, input[type=submit].sbbutton:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-tertiary:disabled, .btn-alternative:disabled, .btn-disabled:disabled, button.disabled, input[type=submit].disabled, .sbbutton.disabled, button.sbbutton.disabled, input[type=submit].sbbutton.disabled, .flat-green-button.disabled, .btn-primary.disabled, .btn-secondary.disabled, .btn-tertiary.disabled, .btn-alternative.disabled, .btn-featured.disabled .btn-info.disabled, .btn-primary.aspNetDisabled, .btn-secondary.aspNetDisabled, .btn-tertiary.aspNetDisabled, .btn-alternative.aspNetDisabled, .btn-featured.aspNetDisabled .btn-info.aspNetDisabled, .btn-disabled.aspNetDisabled {
        background: var(--gray-2);
        border-color: var(--gray-2);
        color: #5B626D;
        padding: 12px 8px;
    }

        .btn-disabled:focus,
        .btn-disabled:hover,
        input[type=submit].btn-disabled:hover,
        input[type=submit].btn-disabled:disabled {
            background: #DBE0E3;
            border-color: #DBE0E3;
            color: #5B626D;
        }

    .btn-secondary, input[type=submit].btn-secondary, .btn-info {
        color: var(--blue-8);
        border: solid 1px var(--blue-8);
        background: var(--white);
    }

        .btn-secondary:hover, .btn-secondary:focus, input[type=submit].btn-secondary:hover, input[type=submit].btn-secondary:focus, .btn-info:hover, .btn-info:focus {
            background: var(--blue);
            border-color: var(--blue);
            color: var(--white);
        }

        .btn-secondary:active, input[type=submit].btn-secondary:active, .btn-info:active, .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
            background: #003752;
            border-color: #003752;
            color: var(--white);
        }

	.btn-secondary-red {
        color: var(--red-5);
        border: solid 1px var(--red);
        background: var(--white);
    }

        .btn-secondary-red:hover, .btn-secondary-red:focus {
            background: var(--red);
            border-color: var(--red);
            color: var(--white);
        }

        .btn-secondary-red:active, .btn-secondary-red:not(:disabled):not(.disabled).active, .btn-secondary-red:not(:disabled):not(.disabled):active, .show > .btn-secondary-red.dropdown-toggle {
            background: var(--red-11);
            border-color: var(--red-11);
            color: var(--white);
        }
	.btn-secondary-gray {
		background: var(--light-gray);
		border: 1px solid var(--gray-6);
		color: var(--gray-9);
    }

        .btn-secondary-gray:hover, .btn-secondary-gray:focus {
            background: var(--gray-8);
            border-color:var(--gray-8);
            color: var(--white);
        }

        .btn-secondary-gray:active, .btn-secondary-gray:not(:disabled):not(.disabled).active, .btn-secondary-gray:not(:disabled):not(.disabled):active, .show > .btn-secondary-gray.dropdown-toggle {
            background: var(--gray-9);
            border-color: var(--gray-9);
            color: var(--white);
        }
    .btn-tertiary, input[type=submit].btn-tertiary {
        color: var(--white);
        border: none;
        padding: 13px;
        background: var(--blue);
        background: linear-gradient(0deg, var(--blue) 0%, var(--blue-8) 100%);
    }

        button.btn-tertiary:hover, button.btn-tertiary:focus, .btn-tertiary:hover, .btn-tertiary:focus, input[type=submit].btn-tertiary:hover, input[type=submit].btn-tertiary:focus {
            background: #004768;
            background: linear-gradient(0deg, #004768 0%, var(--blue) 100%);
            color: var(--white);
        }

        button.btn-tertiary:active, .btn-tertiary:active, input[type=submit].btn-tertiary:active {
            background: #004768;
            background: linear-gradient(0deg, #004768 0%, #00345A 100%);
            color: var(--white);
        }

    .btn-quaternary, input[type=submit].btn-quaternary, a.btn-quaternary {
        color: var(--white);
        border-color: var(--blue-11);
        background: var(--blue-11);
    }

        button.btn-quaternary:hover, button.btn-quaternary:focus, .btn-quaternary:hover, .btn-quaternary:focus, input[type=submit].btn-quaternary:hover, input[type=submit].btn-quaternary:focus, a.btn-quaternary:focus, a.btn-quaternary:hover {
            color: var(--white);
            border-color: var(--dark-blue);
            background: var(--dark-blue);
        }

        button.btn-quaternary:active, .btn-quaternary:active, input[type=submit].btn-quaternary:active, a.btn-quaternary:active {
            color: var(--white);
            border-color: var(--blue-13);
            background: var(--blue-13);
        }

    .btn-alternative, input[type=submit].btn-alternative, a.btn-alternative {
        color: var(--blue);
        border: solid 1px #6DDFFF;
        background: var(--blue-3);
    }

        button.btn-alternative:hover, button.btn-alternative:focus, .btn-alternative:hover, .btn-alternative:focus, input[type=submit].btn-alternative:hover, input[type=submit].btn-alternative:focus, a.btn-alternative:focus, a.btn-alternative:hover {
            background: var(--blue);
            border-color: var(--blue);
            color: var(--blue-3);
        }

        button.btn-alternative:active, .btn-alternative:active, input[type=submit].btn-alternative:active, a.btn-alternative:active {
            background: #003752;
            border-color: #003752;
            color: var(--blue-3);
        }

    .btn-featured, input[type=submit].btn-featured, a.btn-featured {
        color: var(--black);
        border: none;
        padding: 18px;
        background: var(--geld);
        background: linear-gradient(180deg, var(--geld) 0%, var(--geld-medium) 100%);
    }

        button.btn-featured:hover, button.btn-featured:focus, .btn-featured:hover, .btn-featured:focus, input[type=submit].btn-featured:hover, input[type=submit].btn-featured:focus, a.btn-featured:focus, a.btn-featured:hover {
            background: var(--geld-medium);
            background: linear-gradient(180deg, var(--geld-medium) 0%, var(--geld-dark) 100%);
            color: var(--black);
        }

        button.btn-featured:focus, .btn-featured:focus, input[type=submit].btn-featured:focus, a.btn-featured:focus {
            outline-color: var(--geld-dark);
        }

        button .btn-featured:active, .btn-featured:active, input[type=submit].btn-featured:active, a.btn-featured:active {
            background: var(--geld-dark);
            color: var(--black);
        }

	 .btn-details{
        width:35px;
        height:35px;
        display:flex;
        padding:0;
        justify-content:center;
        align-items:center;
    }
    .btn-share, input[type=submit].btn-share, a.btn-share {
        color: var(--gray);
        border-color: var(--gray-3);
        padding: 7px;
        background: transparent;
        border-radius: 50%;
    }

        .btn-share .fa-facebook-f {
            min-width: 1em;
        }


        button.btn-share:hover, button.btn-share:focus, .btn-share:hover, .btn-share:focus, input[type=submit].btn-share:hover, input[type=submit].btn-share:focus, a.btn-share:focus, a.btn-share:hover {
            background: var(--blue);
            border-color: var(--blue);
            color: var(--blue-3);
        }

        button.btn-share:active, .btn-share:active, input[type=submit].btn-share:active, a.btn-share:active {
            background: var(--dark-blue);
            border-color: var(--dark-blue);
            color: var(--white);
        }

.btn-inline-input, .input-group > .btn-inline-input {
    padding: 12px;
    margin-right: -1px;
    border-radius: 0 !important;
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
    border-color: var(--white) !important;
    border-left: 0 !important;
}

.btn-danger {
    color: var(--white);
    background-color: var(--red);
    border-color: var(--red);
}

    .btn-danger:hover,
    .btn-danger:focus {
        color: var(--white);
        background-color: var(--dark-red);
        border-color: var(--dark-red);
    }

    .btn-danger:focus {
        outline-color: var(--red);
    }

.link-cloud .btn {
    border-radius: 1.7em;
    margin: 0 .7em .7em 0;
    text-transform: initial;
    padding: .6em 1em;
    letter-spacing: .01rem;
    font-weight: 500;
}
.link-cloud .btn-secondary{
    color: var(--gray);
}
.link-cloud .btn-secondary:hover,
.link-cloud .btn-secondary:focus,
.link-cloud .bnt-secondary:active{
    color: var(--white);
}
.clear-button {
    font-size: 1em;
    text-transform: unset;
    padding: 0;
    letter-spacing: 0;
    background: none;
    border: none;
    border-radius: 0;
    text-align: unset;
    vertical-align: inherit;
    color: inherit;
    transition: none;
}

    .clear-button:hover, .clear-button:focus, .clear-button:focus-within {
        -webkit-box-shadow: unset;
        box-shadow: unset;
        border: none;
        color: inherit;
        background: inherit;
    }

    .clear-button:focus-visible {
        outline: solid 2px var(--black);
        border: solid 1px var(--light-gray);
    }

.upper-link, .upper-link-full {
    color: var(--blue-8);
    font-family: var(--font-family-alternative);
    font-size: 0.9rem;
    letter-spacing: .025rem;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.4em 0.4em 0.4em 0;
    display: inline-flex;
    position: relative
}

    .upper-link::after, .upper-link-full::after {
        font-family: var(--fa-style-family);
        content: "\f105";
        padding-left: 0.7em;
    }

    .upper-link-full:after {
        content: "\f178";
    }

    .upper-link:hover, .upper-link:focus, .upper-link-full:hover, .upper-link-full:focus {
        color: var(--blue);
        text-decoration: none;
    }

    .upper-link:focus, .upper-link-full:focus {
        outline: var(--blue) dashed 1px;
        outline-offset: 2px;
    }


button:hover, input[type=submit]:hover, .sbbutton:hover, button.sbbutton:hover, input[type=submit].sbbutton:hover,
button:active, input[type=submit]:active, .sbbutton:active, button.sbbutton:active, input[type=submit].sbbutton:active,
button:focus, input[type=submit]:focus, .sbbutton:focus, button.sbbutton:focus, input[type=submit].sbbutton:focus, .sbbutton:hover, button.sbbutton:hover, input[type=submit].sbbutton:hover, .sbbutton:focus, button.sbbutton:focus, input[type=submit].sbbutton:focus, .sbbutton:active, button.sbbutton:active, input[type=submit].sbbutton:active, a.sbbutton:hover, a.sbbutton:active, a.sbbutton:focus {
    background-size: 100% 100%;
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
}

button.select-default:hover, button.select-default:focus {
    color: var(--gray-8);
    font-weight: 400;
    outline: none;
    background: var(--white);
}

button.select-default:focus {
    box-shadow: 0 0 3px var(--blue-8);
    border: 1px solid var(--blue-8);
    outline: none;
}


.custom-stretched-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}




.skip-link {
    font-weight: 600;
    font-size: 1em;
    left: 50%;
    position: absolute;
    border-bottom-left-radius: 0.25em;
    border-bottom-right-radius: 0.25em;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    transform: translateY(-100%);
}

    .skip-link:focus {
        position: absolute;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        padding: 4px;
        top: 0;
        transform: translateX(-50%) translateY(0);
        z-index: 5;
    }

.widget--title {
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 1.6em;
    margin-top: 10px;
}

.widget {
    margin-bottom: 12px;
}

.widget--subscribe {
    width: 300px;
}


img {
    max-width: 100%;
    height: auto;
}

.fit-cover {
    object-fit: cover;
}

.lazy-bg {
    background-image: none !important;
}

@media screen and (max-width: 400px) {
    .fnbutton {
        width: 90%;
    }
}




.trigger-left {
    text-align: left;
    cursor: pointer;
}

.trigger, .trigger:active, .trigger:visited, .trigger:focus {
    color: var(--white) !important;
}

.trigger-left:hover, .trigger-left:focus {
    text-shadow: var(--white) 0 0 1.6px;
}

.trigger > span {
    vertical-align: middle;
}



/* header area */


#mb-header {
    position: absolute;
    z-index: 1000;
    top: 0;
    /*transition: height .3s ease-in-out;*/ /* experimental */
    transform: translateZ(0);
    background: var(--blue-14);
}



#header-holder.mega-not-showing.sticking #mb-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    overflow: hidden;
}

    #header-holder.mega-not-showing.sticking #mb-header:focus-within {
        overflow: initial;
    }

#mb-header .menu-button-wrapper {
    width: 0;
    overflow: hidden;
    transition: width .3s ease-in-out;
    font-size: 1.4em
}



#mb-header .header-left a {
    transition: padding .3s ease-in-out, width .3s ease-in-out;
    width: 100%;
    padding: 5px;
}

#header-holder.sticking .header-left a {
    padding: 0 20px;
}



#mb-header .logo-bar {
    height: 85px;
    transition: height .3s ease-in-out;
    /*overflow: hidden;*/ /* testing putting the autocomplete ul right be input */
}

#header-holder.mega-not-showing.sticking .logo-bar {
    height: 49px;
}

#header-holder {
    height: 60px;
    position: relative;
    transition: height .3s ease-in-out;
}

    #header-holder.mega-not-showing.sticking {
        height: 60px;
    }

.header-left {
    width: 195px;
}

.header-logo {
    width: 100%;
    transform: translateZ(0);
}


#mb-header .btn-primary {
    background: transparent;
    border-color: var(--blue-13);
    color: var(--geld-medium);
    border: 0;
}

#mb-header .btn-secondary:hover,
#mb-header .btn-secondary:focus,
#mb-header .btn-secondary:active {
    color: var(--geld-dark);
    background-color: transparent;
    border-color: var(--blue-13);
    outline-color: var(--geld);
}

.header-right .btn {
    padding: 10px;
}

#headerSearchForm {
    background: var(--blue-13);
    border-radius: 5px;
}

/* everything for #mega-menu can go in here because it doesn't show below 992px width */
@media(min-width: 992px) {

    #mega-menu .navbar-nav > li > a {
        color: var(--light-gray);
    }

    #mega-menu .dropdown-menu.show {
        display: flex;
        flex-flow: column wrap;
        align-content: center;
        height: calc(100vh - 85px);
        min-height: 350px;
        max-height: 200vh; /* just to override a general dropdown-menu setting */
        position: absolute;
        left: 4px;
        right: 4px;
        top: 100%;
        z-index: 50;
        background: var(--white);
        color: var(--black);
        box-shadow: 0px 4px 3px 0 rgba(0,0,0,0.16), -1px 5px 5px 0 rgba(0, 0, 0, 0.27);
        text-align: left;
        /* font-size: .9rem;*/
        padding: 7px 1.5% 0;
        border-radius: 0;
        margin: 0 -1em;
        overflow: hidden;
    }

    #mega-menu ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
        font-size: .9rem;
    }

    #mega-menu > ul > li > a {
        color: var(--light-gray);
        padding: 9px 0;
        opacity: 1;
        font-weight: 600;
    }

        #mega-menu > ul > li > a .fa-regular {
            font-size: 1em;
        }


    #mega-menu .dropdown-menu.show.mediumtall-list {
        height: 60em;
    }

    #mega-menu .dropdown-menu.show.medium-list {
        height: 42em;
    }

    #mega-menu .dropdown-menu.show.medium-short-list {
        height: 34em;
    }

    #mega-menu .dropdown-menu.show.short-list {
        height: 31em;
    }

    #mega-menu .dropdown-menu.show.shorter-list {
        height: 33em;
    }

    #mega-menu .dropdown-menu.show.shortest-list {
        height: 28em;
    }



    #mega-menu > ul > li.has-submenu.show > a {
        opacity: 1;
        border-bottom: solid 3px var(--white);
    }


    #mega-menu > ul > li > ul > li, #mega-menu .deep-menu > ul > li {
        margin: .8em 1em;
    }

    #mega-menu li > a {
        color: var(--blue);
    }


    #mega-menu .limited-width-submenu {
        max-width: 32vw;
        white-space: nowrap;
        overflow: hidden;
    }

    #mega-menu .limited-video-submenu {
        max-width: 32vw;
    }

    #mega-menu .menu-ad {
        display: block;
        width: calc(100vw - 415px);
        max-width: 43%;
    }

    #mega-menu .limited-width-submenu li {
        text-overflow: ellipsis;
        overflow: hidden;
    }


    #mega-menu > ul > li > ul > li > a, #mega-menu .deep-menu > ul > li > a {
        font-family: var(--font-family-alternative);
        display: block;
        border-bottom: solid 1px;
        padding-top: 2px;
        padding-bottom: 7px;
        margin-bottom: 7px;
        font-weight: 500;
        text-transform: uppercase;
        font-size: 1em;
        opacity: .88;
        padding-right: 1em;
        position: relative;
    }

        #mega-menu > ul > li > ul > li > a:hover, #mega-menu .deep-menu > ul > li > a:hover {
            opacity: 1;
        }

        #mega-menu > ul > li > ul > li > a:after {
            font-family: var(--fa-style-family);
            content: "\f105";
            padding-left: 0.7em;
        }

    #mega-menu > ul > li > ul > li > ul a {
        font-weight: 400;
        color: #444;
        font-size: 0.95em;
        line-height: 1.6;
    }


        #mega-menu > ul > li > ul > li > ul a:hover {
            text-decoration: underline;
        }

    /* default header heights for large screens */


    #mb-header .main-menu-bar {
        /*transition: transform .3s;*/
        /*transform: scaleY(1);*/
    }

    #header-holder, #mb-header {
        height: 100px;
    }

    #mega-menu {
        height: 43px;
    }

    #header-holder.mega-not-showing.sticking, #header-holder.mega-not-showing #mb-header.sticking, #header-holder.sticking #mega-menu {
        height: 49px;
        transition: height .3s ease-in-out /* experimental */
    }

    #header-holder.sticking .logo-bar {
        height: 43px;
    }

    #mega-menu .double-long-submenu {
        width: 390px;
        height: 450px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }
}



@media (min-width: 1300.1px) {


    #mega-menu .dropdown-menu.show.mediumtall-list {
        height: 39em;
    }

    #mega-menu .dropdown-menu.show.medium-list {
        height: 32em;
    }

    #mega-menu .dropdown-menu.show.medium-short-list {
        height: 31em;
    }

    #mega-menu .dropdown-menu.show.short-list {
        height: 30em;
    }

    #mega-menu .dropdown-menu.show.shorter-list {
        height: 28em;
    }

    #mega-menu .dropdown-menu.show.shortest-list {
        height: 22em;
    }
}

/* smaller font-size for medium-size screens */
@media (min-width: 992px) and (max-width: 1300px) {

    #mega-menu .dropdown-menu.show {
        font-size: .78em;
    }

        #mega-menu .dropdown-menu.show a {
            line-height: 1.7;
        }
}

/* we want the menu to appear and reappear only at thes medium-large size */
@media (min-width: 992px) and (max-width: 1530px) {
    #header-holder.mega-not-showing.sticking .main-menu-bar {
        transition: transform .3s;
        transform: scaleY(0);
        pointer-events: none;
    }

    #header-holder.mega-not-showing.sticking .menu-button-wrapper {
        width: 60px;
    }

    #header-holder.mega-not-showing.sticking .header-left a {
        padding: 0 20px;
    }
}

@media(min-width:992px) {
    #headerSearchForm {
        background: var(--blue-14);
        border-bottom: 1px solid var(--white);
        border-radius: 0;
    }
}

@media(min-width:1200px) {
    #mega-menu .limited-width-submenu {
        max-width: 28vw;
    }

    #mega-menu .limited-video-submenu {
        max-width: 390px;
    }
}

@media (min-width: 1530px) {
    #mega-menu, #header-holder, #mb-header {
        height: 85px;
    }

        #mega-menu > ul > li > a {
            padding: 32px 3px 29px;
        }

        #mega-menu > ul > li.has-submenu.show > a {
            border-bottom: solid 5px var(--white);
        }


        #header-holder.sticking #mega-menu > ul > li > a {
            padding: 13px 0;
        }

        #header-holder.mega-showing.sticking #mb-header {
            position: fixed;
            z-index: 1000;
            top: 0;
        }

    #headerSearchForm {
        position: absolute;
        right: 0;
        top: -17px;
        width: 300px;
        transition: width .3s ease-in;
        margin-left: auto;
    }

    #mainAutocompleteList {
        opacity: 0;
        transition: opacity .6s ease-in;
    }

    #headerSearchForm:focus-within #mainAutocompleteList {
        opacity: 1;
    }


    #pnlMainHeaderSearch.NotLoggedIn #headerSearchForm:focus-within {
        width: 1000px;
    }

        #pnlMainHeaderSearch.NotLoggedIn #headerSearchForm:focus-within .cat-search.ui-autocomplete {
            width: calc(1000px - 32px) !important;
        }

    #pnlMainHeaderSearch.FreeSubscriber #headerSearchForm:focus-within {
        width: 967px;
    }

        #pnlMainHeaderSearch.FreeSubscriber #headerSearchForm:focus-within .cat-search.ui-autocomplete {
            width: calc(967px - 32px) !important;
        }

    #pnlMainHeaderSearch.AllAccessSubscriber #headerSearchForm:focus-within {
        width: 1107px;
    }

        #pnlMainHeaderSearch.AllAccessSubscriber #headerSearchForm:focus-within .cat-search.ui-autocomplete {
            width: calc(1107px - 32px) !important;
        }
}

@media (max-width: 991.98px) {
    #mb-header .menu-button-wrapper, #header-holder.mega-not-showing.sticking .menu-button-wrapper {
        width: 70px;
    }

    #header-holder.mega-not-showing.sticking .header-left a {
        padding: 0 5px;
    }

    .header-left {
        width: 190px;
    }
}

@media (max-width: 600px) {
    .header-left {
        width: 165px;
    }
}

@media (max-width: 575.98px) {
    #header-holder.mega-not-showing.sticking #mb-header {
        overflow: hidden;
    }

        #header-holder.mega-not-showing.sticking #mb-header.ready-for-search-overflow {
            overflow: initial;
        }

    #header-holder, #mb-header .logo-bar {
        height: 100px;
    }

        #header-holder.mega-not-showing.sticking, #header-holder.mega-not-showing.sticking #mega-menu {
            height: 49px;
        }

            #header-holder.mega-not-showing.sticking .logo-bar {
                height: 49px;
            }

            #header-holder.mega-not-showing.sticking .scrolling-up .logo-bar {
                height: 100px;
            }

    .header-logo {
        max-height: 36px;
        margin: 3px 0 4px;
    }

    .header-left {
        width: calc(100% - 65px);
    }

    .header-right, #mb-header .menu-button-wrapper, #header-holder.mega-not-showing.sticking .menu-button-wrapper {
        min-width: 65px;
    }

        .header-right .btn-featured {
            display: none;
        }

    .featured-article img {
        height: auto;
        width: auto;
        margin: -100px auto 10px;
    }

    .featured-article-back {
        padding-top: 0;
        height: 120px;
    }

    .responsive-header-ad-text {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-height: 1.2;
        max-height: 2.4em;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    #mb-header .logo-bar {
        height: 60px;
    }
}

@media (min-width: 576px) {

    .border-sm-left {
        border-left: solid 1px;
    }

    .min-sm-160 {
        min-width: 158px;
    }

    .font-sm-14 {
        font-size: 1.4em !important;
    }
}


.side-only, .mega-only {
    display: none;
}


#mega-menu .mega-only, #left-side-menu .side-only {
    display: inline-block;
}





.index-inner-1, .index-inner-2, .index-inner-3, .index-inner-4 {
    display: inline;
}

/* end header area */

/* content area*/
main {
    margin-bottom: 25px;
}



    main a {
        font-weight: 600;
    }

.selectgroup {
    margin: 0 5px 10px 0;
}

@media (min-width: 800px) {
    .selectgroup {
        display: inline-block;
    }
}

select, option, .select-default, .option-default {
    font-weight: 400;
    background: var(--white);
    border: solid 1px #C3CACD;
    border-radius: 5px;
    color: #5B626D;
    padding: 7px;
    font-size: 1em;
    margin-bottom: 5px;
    max-width: 100%;
    line-height: 1.3em;
    min-height: 1.95em
}

    option:hover, option:focus {
        background-color: var(--light-blue);
    }

.option-default {
    border: 0;
}

.select-default {
    text-transform: none;
    letter-spacing: 0;
    min-height: 1.95em;
    line-height: 1.3em;
}

.see-also {
    margin: 1rem 2rem 1rem 0;
    display: inline-block;
    vertical-align: top;
    min-width: 290px;
    max-width: calc(50% - 2.1rem);
    @media(max-width:700px){
        max-width: 100%;
        min-width: 0;
        margin-right:0;
    }
}


    .see-also ul {
        margin-bottom: 1rem;
        padding: 0;
    }


    .see-also li {
        list-style: none;
        font-size: 1em;
        padding: 0;
        display: inline-block;
    }

    .see-also a {
        border-radius: 1.7em;
        margin: 0 .7em .7em 0;
        text-transform: initial;
        padding: .6em 1em;
        letter-spacing: .01rem;
        text-decoration: none;
        font-size: .77rem;
        line-height: 1;
        font-weight: 500;
        display: inline-block;
        color: var(--gray);
        border: 1px solid var(--blue-8);
        text-align: center;
        background: var(--white);
        transition: background 0.5s ease-in-out, color 0.5s ease-in-out, border 0.5s ease-in-out, box-shadow 0.2s ease-in-out;
        vertical-align: middle;
    }

    .see-also.highlight-first-link li:first-child a {
        color: var(--white);
        background: var(--blue-8);
    }


    .see-also a:hover, .see-also a:active, .see-also a:focus {
        background: var(--blue) !important;
        border-color: var(--blue);
        color: var(--white) !important;
    }



.row > .see-also {
    margin: 10px 5px 0;
}

.oas-ads {
    margin-top: 35px;
}

.oas {
    text-align: center;
    margin-bottom: 15px;
}
/* sidebar */
article, .sidebar {
    margin-bottom: 20px;
}

/* onboarding panel */

#pnlOnboarding a {
    font-weight: normal;
}

/* mmenu */
#mmenu:not(.mm-menu), #mmsubscribe:not(.mm-menu) {
    display: none;
}

.mm-menu.mm-theme-dark {
    background: var(--blue);
    color: rgba(255,255,255,.8);
}

.mm-listview > li {
    font-size: 1.3em;
}

.mm-menu.mm-theme-dark .mm-search input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #ddd;
}

.mm-menu.mm-theme-dark .mm-search input::-moz-placeholder { /* Firefox 19+ */
    opacity: 1;
    color: #ddd;
}

.mm-menu.mm-theme-dark .mm-search input:-ms-input-placeholder { /* IE 10+ */
    color: #ddd;
}

.mm-menu.mm-theme-dark .mm-search input:-moz-placeholder { /* Firefox 18- */
    opacity: 1;
    color: #ddd;
}

.mm-menu.mm-theme-dark .mm-search input {
    border-radius: 0;
    min-height: 38px;
    padding-left: 8px;
}

#mb-header .form-control {
    height: calc(1.5em + 13px);
}

#mb-header .input-group input, #mb-header .input-group button {
    border: none;
    border-radius: 0;
}

#mb-header .input-group button {
    font-size: 0.83rem;
    padding: 7px;
}

.input-group.dark-bkg input, .input-group.dark-bkg button {
    border: solid 1px var(--white);
}

.input-group input.input-inline {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.dark-bkg input {
    background: var(--dark-blue);
    color: var(--white);
    margin-bottom: 0;
    max-width: 100%
}

.input-group.dark-bkg input {
    background: transparent;
    color: var(--white);
    margin-bottom: 0;
    max-width: calc(100% - 32px);
}


.input-group.light-bkg input, .input-group.light-bkg button {
    border-radius: 0;
    padding: 8px 9px 7px;
    border: none;
}


    .input-group.light-bkg input:not([type=submit]) {
        background: initial;
        color: #444;
        margin-bottom: 0;
        margin-right: -1px;
        max-width: calc(100% - 86px);
        border: solid 1px  var(--gray-3);
        height: calc(1.5em + 11px);
    }

#txtEmailInputMobile::placeholder, .input-group.dark-bkg input::placeholder, .dark-bkg input::placeholder {
    color: var(--white);
}

#txtEmailInputMobile:focus::placeholder, .input-group.dark-bkg input:focus::placeholder {
    opacity: .6
}

#txtEmailInputMobile::-ms-input-placeholder, .input-group.dark-bkg input::-ms-input-placeholder {
    color: var(--white);
}

#txtEmailInputMobile:focus::placeholder, .input-group.dark-bkg input:focus::-ms-input-placeholder {
    opacity: .6
}

#txtEmailInputMobile {
    background: transparent;
    color: var(--white);
    border-radius: 0;
    border: solid 1px var(--white);
    padding: 8px 9px 7px;
}

#ShowSuggestionMM > span {
    color: var(--white) !important;
    font-size: 14px;
}
/* added for sidebar */
/* autocomplete */
.ui-front {
    z-index: 100
}

.ui-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: none
}

    .ui-menu .ui-menu-item {
        font-weight: 400;
        color: #717171;
        position: relative;
        margin: 0;
        padding: 6px 1em 8px .4em;
        cursor: pointer;
        min-height: 0;
    }

        .ui-menu .ui-menu-item .result {
            color: var(--black);
            padding-right: 1.5rem;
        }

.cat-search.ui-menu .ui-menu-item {
    padding: 0;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background: #ededed;
    font-weight: normal;
    color: #2b2b2b
}

    .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited {
        color: #2b2b2b;
        text-decoration: none
    }

.cat-search .ui-state-hover a, .cat-search .ui-state-hover a:hover, .cat-search .ui-state-hover a:link, .cat-search .ui-state-hover a:visited, .cat-search .ui-state-focus a, .cat-search .ui-state-focus a:hover, .cat-search .ui-state-focus a:link, .cat-search .ui-state-focus a:visited {
    color: var(--blue);
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    color: var(--black);
}

.cat-search .ui-state-active, .cat-search .ui-widget-content .ui-state-active, .cat-search .ui-widget-header .ui-state-active {
    border-bottom: solid 1px #c1dce1;
    /*  margin-top: -1px;
    border-top: solid 6px var(--light-gray);
    position: relative;
    z-index: 10;*/
    background: linear-gradient(#c1dce1, #c1dce1 1px, var(--light-blue) 1px, var(--light-blue) 100%);
}

/*.ui-state-active:after, .ui-widget-content .ui-state-active:after, .ui-widget-header .ui-state-active:after*/
.ui-autocomplete .ui-state-active:after {
    font-family: var(--fa-style-family);
    content: "\f105";
    position: absolute;
    font-weight: 400;
    right: 10px;
    top: 6px;
    font-size: 1.3em;
    color: var(--black);
    line-height: 1;
}

.cat-search.ui-autocomplete .ui-state-active:after {
    top: calc(50% - 8px);
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: var(--dark-blue);
    text-decoration: none
}

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
    background: white;
    border: solid 1px  var(--gray-3);
    overflow: auto;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    width: 224px;
    overflow-x: hidden;
}

.ui-autocomplete-category {
    border-top: solid 6px var(--light-gray);
}

    .ui-autocomplete-category:first-child {
        border-top: none;
    }


.ui-menu-item {
    padding: 2px 10px;
    font-size: .9em;
}




.nav {
    position: relative;
    z-index: 1
}

/*.nav-tabs, .nav-toggle {
    border-bottom: 1px solid var(--light-gray)
}*/

    .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
        border: none;
        background-image: linear-gradient(to right,rgba(255,255,255,0) 10px,var(--gray-9) 10px,var(--gray-9) 53%,rgba(255,255,255,0) 0%);
        background-position: bottom;
        background-size: 100% 2px;
        background-repeat: no-repeat;
        color: var(--gray-9)
    }

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: var(--blue);
        background-color: transparent;
        border: none;
        background-image: linear-gradient(to right,rgba(255,255,255,0) 10px,var(--blue) 10px,var(--blue) 53%,rgba(255,255,255,0) 0%);
        background-position: bottom;
        background-size: 100% 2px;
        background-repeat: no-repeat
    }

    .nav-tabs .nav-link, .nav-toggle .nav-link {
        border: none;
        position: relative;
        display: inline-block;
        padding: 13px 12px;
        font-size: 15px;
        font-family: var(--font-family-alternative);
        color: var(--gray-9);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .03em;
        margin-bottom: -1px;
        cursor: progress;
        pointer-events: none
    }

    .nav-toggle .nav-link {
        font-size: 15px;
        cursor: unset;
        pointer-events: unset
    }

    /* .nav-toggle button:hover .nav-link, .nav-toggle button:focus .nav-link, .nav-toggle .nav-link:hover, .nav-toggle .nav-link:focus */
        .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus,  {
            border: none;
            background-image: linear-gradient(to right,rgba(255,255,255,0) 10px,var(--gray-9) 10px,var(--gray-9) 53%,rgba(255,255,255,0) 0%);
            background-position: bottom;
            background-size: 100% 2px;
            background-repeat: no-repeat;
            color: var(--gray-9);
        }

            .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-toggle .nav-link.active, .nav-toggle button:focus .nav-link.active, .nav-toggle button:hover nav-link.active {
                color: var(--blue);
                background-color: transparent;
                border: none;
                background-image: linear-gradient(to right,rgba(255,255,255,0) 10px,var(--blue) 10px,var(--blue) 53%,rgba(255,255,255,0) 0%);
                background-position: bottom;
                background-size: 100% 2px;
                background-repeat: no-repeat
            }

[role=tabpanel].is-hidden {
    display: none
}

.nav-toggle .dropdown-menu {
    border-radius: 0;
    border-top: 2px solid var(--light-gray);
    border: 1px solid rgba(0,0,0,.125);
    width: 100%;
    margin: 0;
    top: 100% !important;
    transform: none !important;
    max-height: 85vh
}

    .nav-toggle .dropdown-menu li a {
        display: inline-block;
        font-size: 15px;
        font-family: var(--font-family-alternative);
        color: var(--gray-9);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .03em
    }

        .nav-toggle .dropdown-menu li a span {
            display: inline-block;
            padding-left: 8px;
            border-left: 4px solid transparent
        }

        .nav-toggle .dropdown-menu li a:focus {
            outline: 1px solid var(--gray-9)
        }

            .nav-toggle .dropdown-menu li a:hover span, .nav-toggle .dropdown-menu li a:focus span {
                border-color: var(--gray-9)
            }

        .nav-toggle .dropdown-menu li a.active span {
            border-color: var(--blue)
        }

.nav-toggle.show .nav-toggle-arrow:before {
    content: "\f00d";
    font-family: var(--fa-style-family);
}

.nav-toggle .dropdown-toggle:hover {
    color: var(--black)
}

.nav-toggle .dropdown-toggle {
    color: var(--gray-9);
    border-radius: 0
}

    .nav-toggle .dropdown-toggle:focus {
        color: var(--gray-9);
        outline: 1px solid var(--gray-9)
    }

    .nav-toggle .dropdown-toggle::after {
        display: none
    }

.scroll-nav-tabs {
    width: 100%;
    overflow: hidden;
    background: var(--light-gray);
    position: relative;
    z-index: 1;
    height: 44px
}

    .scroll-nav-tabs .nav-tabs {
        white-space: nowrap;
        display: inline-block;
        transform: translateX(0);
        transition: transform .8s ease-in-out
    }

        .scroll-nav-tabs .nav-tabs li {
            display: inline-block;
        }

    .scroll-nav-tabs .right-button, .scroll-nav-tabs .left-button {
        position: absolute;
        top: 0;
        height: 44px;
        width: 44px;
        background: rgba(0,0,0,.5);
        opacity: 0;
        pointer-events: none;
        z-index: 1;
        padding: 6px 16px;
        color: var(--white);
        transition: opacity .6s ease-in-out;
        cursor: pointer;
    }

    .scroll-nav-tabs .left-button {
        transform: rotate(180deg);
        left: 0;
    }

    .scroll-nav-tabs .right-button {
        right: 0;
    }

        .scroll-nav-tabs .right-button.active:not(.dragging) {
            opacity: 1;
            pointer-events: auto;
        }

    .scroll-nav-tabs .left-button.active:not(.dragging) {
        opacity: 1;
        pointer-events: auto;
    }


.tab-content {
    border: none;
    margin-bottom: 12px;
    padding: 15px;
    box-shadow: 0 .2rem .85rem rgba(0,0,0,.11) !important;
    background: var(--white);
}

@media (max-width: 767.98px) {
    .tab-content {
        margin: 0 -15px 12px -15px;
    }

    .scroll-nav-tabs {
        margin: 0 -15px;
        width: auto;
    }
}


/* end nav tabs */

/* nav buttons */
.nav-buttons {
    margin: 0 -.2em;
}
    .nav-buttons .btn {
        text-transform: initial;
        letter-spacing: initial;
        background: var(--white);
        color: var(--gray-8);
        border: solid 1px var(--gray-3);
        margin: .2em;
    }
        .nav-buttons .btn:focus, .nav-buttons .btn:hover {
            background: var(--gray-2);
            color: var(--gray-9);
            border: solid 1px var(--gray-3);
        }
        .nav-buttons .btn.active{
            background: var(--blue-2);
            color: var(--blue);
            border: solid 1px var(--blue-3);
        }
        .nav-buttons .btn.active:hover,.nav-buttons .btn.active:focus {
            background: var(--blue-3);
            color: var(--blue);
            border: solid 1px var(--blue-3);
        }
/* end nav buttons*/

/* card stuff */


a.card {
    font-weight: normal;
    color:var(--gray);
}

    a.card:hover {
        text-decoration: none;        
    }

.hover-card:hover, .hover-card:focus-within, .hover-card-blue:hover, .hover-card-blue:focus-within,.hover-card:focus,.hover-card-blue:focus {
    text-decoration: none;
    transition: transform 0.15s ease;
    transform: scale(1.02);
    position: relative;
    z-index: 1;
    box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.15);
}

.hover-card-blue:hover, .hover-card-blue:focus-within,.hover-card-blue:focus {
    background: var(--blue-2);
    color: var(--gray-11);
    border-color: var(--blue-3);
}
    .hover-card:hover p, .hover-card:focus-within p, .hover-card-blue:hover p, .hover-card-blue:focus-within p, .hover-card:focus p, .hover-card-blue:focus p{
        color: var(--gray);
    }


    .arrow-link-card {
        padding: 1rem 2rem 1rem 1.2rem;
        background: var(--light-gray);
        border: solid 1px var(--gray-3);
        border-radius: .25rem !important;
    }
   
    .arrow-link-card:after {
        font-family: var(--fa-style-family);
        content: "\f178";
        position: absolute;
        top: 1rem;
        right: 1rem;
        transform: rotate(-45deg);
        font-size: 2em;
        opacity: .3;
    }

        .arrow-link-card p {
            font-size:0.88em;
        }

/*end card stuff*/

.mobile-header {
    display: none;
}

@media screen and (max-width: 1040px) {
    .mobile-header {
        display: block;
        margin: 0 0 11px 0;
    }
}

table {
   font-variant-numeric: tabular-nums; /* to monospace numbers so they are vertically scannable */
}

td, th {
    padding: 3px 2px;
}

th {
    font-weight: 600;
}

td strong {
    font-weight: 500;
}

.s-table, .article-page table {
    max-width: 100%;
    font-size: .9em;
    box-shadow: none;
    margin: 10px 0 30px;
}

    .s-table tbody tr, .article-page table tbody tr {
        margin-bottom: 9px;
        background: var(--white);
        border-top: solid 1px var(--gray-3);
    }

    .s-table thead tr, .s-table tfoot tr, .article-page table thead tr, .article-page table tfoot tr {
        background-color: transparent !important;
        font-weight: 600;
        text-transform: uppercase;
        font-size: .8rem;
        font-weight: 500;
        letter-spacing: 1px;
    }

    .s-table td, .s-table th, .article-page table td, .article-page table th {
        padding: 5px 10px;
    }

    .s-table th {
        font-weight: 500;
    }


.scroll-table-wrapper-wrapper {
    position: relative;
    border: solid 1px var(--gray-3);
    border-radius: 4px;
    overflow: hidden; /* this is to make the borders round correctly but might throw something else off */
    margin: 10px 0;
}

.scroll-table-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    position: static;
}


.scroll-table thead {
    z-index: 36;
    overflow-x: auto;
    overflow-y: hidden;
    will-change: scroll-position, top;
    width: 100%;
}

.tab-pane:not(.active) .scroll-table thead {
    z-index: -50;
    opacity: 0;
    pointer-events: none;
}

.scroll-table {
    border-collapse: separate;
    border-spacing: 0;
    border: solid 1px var(--gray-4);
    border-radius: 4px;
    margin: 10px 0;
    width: 100%;
    font-size: clamp(14px,0.944em,18px);
}



.scroll-table-wrapper > .scroll-table {
    border: none;
    margin: 0;
    width: 100%;
}

.scroll-table tr {
    background: var(--white);
}
    .scroll-table tr:nth-child(2n) {
        background: #fafbfa;
    }

.scroll-table thead th {
    color: var(--gray-9);
    background: var(--gray-2);
    text-overflow: ellipsis;
    overflow: hidden;
    text-transform: uppercase;
    font-size: .8em;
    border-bottom: none;
}

.scroll-table.plain-header th {
    background: var(--white);
}

.scroll-table.fixed-left-column td:nth-child(2), .scroll-table.fixed-left-column th:nth-child(2) {
    padding-left: 17px;
}


.scroll-table th, .scroll-table td {
    padding: 10px;
}

.scroll-table td {
    min-width: 102px; /* keeps columns from getting too skinny for the corresponding th */
    border-top: solid 1px var(--gray-3);
    vertical-align: top;
}

.scroll-table.fixed-left-column td {
    min-width: 115px; /* if the table can scroll, there's no reason to let most cells get super skinny */
}

    .scroll-table.fixed-left-column td:first-child, .scroll-table.fixed-left-column th:first-child {
        left: 0;
        position: sticky;
        position: -webkit-sticky;
        box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, .06);
        z-index: 35;
        max-width: 150px;
    }


    .scroll-table.fixed-left-column td:first-child {
        background-clip: padding-box;
        background-color: var(--white);
    }
        .scroll-table.fixed-left-column tr:nth-child(2n) td:first-child {
            background: #fafbfa;
        }

        .scroll-table-wrapper::-webkit-scrollbar, .scroll-table thead::-webkit-scrollbar, .nice-scroll::-webkit-scrollbar {
            width: 14px;
            height: 14px;
        }

.scroll-table-wrapper::-webkit-scrollbar-track, .scroll-table thead::-webkit-scrollbar-track, .nice-scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 3px 3px 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 0;
    border-radius: 0;
}

.scroll-table thead::-webkit-scrollbar-track {
    background: #eee;
}

.scroll-table-wrapper::-webkit-scrollbar-thumb, .scroll-table thead::-webkit-scrollbar-thumb, .nice-scroll::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset -1px -1px 7px rgba(0,0,0,0.3);
    background: #eee;
    border-radius: 0;
}

.scroll-table-wrapper::-webkit-scrollbar-corner, .scroll-table thead::-webkit-scrollbar-corner, .nice-scroll::-webkit-scrollbar-corner {
    -webkit-box-shadow: inset 3px 3px 4px rgba(0,0,0,0.05);
}

.scroll-table thead.hide-scrollbar::-webkit-scrollbar {
    height: 0;
}


@media (max-width: 550px) {

    .mobile-wider {
        margin-left: -15px;
        margin-right: -15px;
    }

    .s-table {
        font-size: .8em;
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
    }

    .tab-content .scroll-table-wrapper-wrapper, .tab-content .scroll-table {
        box-shadow: 0px 0rem 3px 1px rgba(0,0,0,.08);
        margin: 10px -15px;
        width: calc(100% + 30px);
    }

    .scroll-table.fixed-left-column td:first-child {
        min-width: 90px;
        max-width: 115px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .scroll-table {
        font-size: 0.9em;
    }
}

.scroll-table-wrapper > .scroll-table {
    box-shadow: none;
    margin: 0;
    width: 100%;
}

.fake-sticky {
    position: relative;
    transition: left 0.3s;
    max-width: 85vw;
}

/* column text align utilities */
.tr-1 td:nth-child(1), .tr-1 th:nth-child(1),
.tr-2 td:nth-child(2), .tr-2 th:nth-child(2),
.tr-3 td:nth-child(3), .tr-3 th:nth-child(3),
.tr-4 td:nth-child(4), .tr-4 th:nth-child(4),
.tr-5 td:nth-child(5), .tr-5 th:nth-child(5),
.tr-6 td:nth-child(6), .tr-6 th:nth-child(6),
.tr-7 td:nth-child(7), .tr-7 th:nth-child(7),
.tr-8 td:nth-child(8), .tr-8 th:nth-child(8),
.tr-9 td:nth-child(9), .tr-9 th:nth-child(9),
.tr-10 td:nth-child(10), .tr-10 th:nth-child(10),
.tr-11 td:nth-child(11), .tr-11 th:nth-child(11),
.tr-12 td:nth-child(12), .tr-12 th:nth-child(12) {
    text-align: right
}

.tc-1 td:nth-child(1), .tc-1 th:nth-child(1),
.tc-2 td:nth-child(2), .tc-2 th:nth-child(2),
.tc-3 td:nth-child(3), .tc-3 th:nth-child(3),
.tc-4 td:nth-child(4), .tc-4 th:nth-child(4),
.tc-5 td:nth-child(5), .tc-5 th:nth-child(5),
.tc-6 td:nth-child(6), .tc-6 th:nth-child(6),
.tc-7 td:nth-child(7), .tc-7 th:nth-child(7),
.tc-8 td:nth-child(8), .tc-8 th:nth-child(8),
.tc-9 td:nth-child(9), .tc-9 th:nth-child(9),
.tc-10 td:nth-child(10), .tc-10 th:nth-child(10),
.tc-11 td:nth-child(11), .tc-11 th:nth-child(11),
.tc-12 td:nth-child(12), .tc-12 th:nth-child(12) {
    text-align: center
}


/* watchlist scroll tables with bulk action checks */


.wl-check label {
    min-width: 1.5em;
    min-height: 1em;
}

    .wl-check label::after {
        top: -2px;
        left: -1px;
    }

.wl-check {
    display: inline-block;
    vertical-align: middle;
    width: 31px;
    padding: 7px;
    margin-left: -6px;
    height: 100%;
    pointer-events: none;
}

.wl-with-check {
    display: inline-block;
    vertical-align: middle;
    width: 37px;
    text-align: center;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .wl-with-check img {
        max-height: 25px;
        max-width: 37px;
        width: auto;
        height: auto;
    }

.wl-check label {
    width: 1em;
    height: 1em;
    padding: 0;
    pointer-events: auto;
}

.scroll-table tfoot td, .scroll-table.fixed-left-column tfoot td:first-child {
    background: #e4e4e4;
    font-weight: 600;
}

/* end scroll-tables */

/* sort-table */
th[data-sort] {
    cursor: pointer;
}

/* end sort-table */

.hidden-cell {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: none !important;
}



@media (max-width: 767.98px) {
    .title-area span, .title-area br {
        display: none;
    }

    .title-area {
        width: 100%;
    }

    .featured-article-back {
        padding-top: 0;
        height: 190px;
    }



    .featured-article img {
        display: block;
        height: auto;
        width: auto;
        margin: -100px auto 10px;
    }

    .featured-article-back {
        padding-top: 0;
        height: 120px;
    }
}



.company-thumbnail, .small-company-thumbnail {
    background: var(--white);
    width: 28px;
    text-align: center;
    margin: 0 8px 5px 0px;
    vertical-align: middle;
    display: inline-block;
}

    .company-thumbnail img, .small-company-thumbnail img {
        max-height: 100%;
    }

.ticker-area {
    width: calc(100% - 65px);
    display: inline-block;
    vertical-align: middle;
}

.title-area {
    color: var(--gray-9);
    font-weight: normal;
    font-size:0.888em;
}


.search-company-thumbnail {
    display: inline-block;
    width: 40px;
    vertical-align: middle;
    padding-right: 15px;
}

.search-company-name {
    vertical-align: middle;
    display: inline-block;
    width: calc(100% - 41px)
}

    .search-company-name .ticker-area {
        width: 100%;
    }

    .search-company-name .sparkline {
        margin-left: 5px;
        width: 53px;
    }


/* Dividend Screener Filter */

.screener-label a {
    font-weight: normal;
    color: #444;
}
/* elements */

.ui-icon.ui-icon-circle-triangle-e, .ui-icon.ui-icon-circle-triangle-w {
    font-size: 0;
    background-image: none;
    width: 0;
    text-indent: 0;
    overflow: visible;
}

    .ui-icon.ui-icon-circle-triangle-e:before {
        font-family: var(--fa-style-family);
        font-weight: 400;
        content: "\f105";
        position: absolute;
        right: -14px;
        top: -3px;
        font-size: 1.1rem;
        color: var(--blue);
        text-indent: 0;
    }

    .ui-icon.ui-icon-circle-triangle-w:before {
        font-family: var(--fa-style-family);
        content: "\f105";
        font-weight: 400;
        position: absolute;
        transform: rotate(180deg);
        left: 0px;
        top: -2px;
        font-size: 1.1rem;
        color: var(--blue);
        text-indent: 0;
    }


.ui-datepicker {
    width: 17em;
    font-size: .8em;
    background: var(--white);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    padding: .2em .2em 0;
    display: none
}

    .ui-datepicker .ui-datepicker-header {
        position: relative;
        padding: .2em 0
    }

    .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
        position: absolute;
        top: 2px;
        width: 1.8em;
        height: 1.8em
    }

    .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {
        top: 1px
    }

    .ui-datepicker .ui-datepicker-prev {
        left: 2px
    }

    .ui-datepicker .ui-datepicker-next {
        right: 2px
    }

    .ui-datepicker .ui-datepicker-prev-hover {
        left: 1px
    }

    .ui-datepicker .ui-datepicker-next-hover {
        right: 1px
    }

    .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
        display: block;
        position: absolute;
        left: 50%;
        margin-left: -8px;
        top: 50%;
        margin-top: -8px;
        font-weight: 400;
    }

    .ui-datepicker .ui-datepicker-title {
        margin: 0 2.3em;
        line-height: 1.8em;
        text-align: center
    }

        .ui-datepicker .ui-datepicker-title select {
            font-size: 1em;
            margin: 1px 0
        }

    .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
        width: 45%
    }

    .ui-datepicker table {
        width: 100%;
        font-size: .9em;
        border-collapse: collapse;
        margin: 0 0 .4em
    }

    .ui-datepicker th {
        padding: .7em .3em;
        text-align: center;
        font-weight: 600;
        border: 0
    }

    .ui-datepicker td {
        border: solid 1px var(--light-blue);
        padding: 1px
    }

        .ui-datepicker td span, .ui-datepicker td a {
            display: block;
            padding: .2em;
            text-align: right;
            text-decoration: none
        }

    .ui-datepicker .ui-datepicker-buttonpane {
        background-image: none;
        margin: .7em 0 0 0;
        padding: 0 .2em;
        border-left: 0;
        border-right: 0;
        border-bottom: 0
    }

        .ui-datepicker .ui-datepicker-buttonpane button {
            float: right;
            margin: .5em .2em .4em;
            cursor: pointer;
            padding: .2em .6em .3em .6em;
            width: auto;
            overflow: visible
        }

            .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
                float: left
            }

    .ui-datepicker.ui-datepicker-multi {
        width: auto
    }

.ui-datepicker-multi .ui-datepicker-group {
    float: left
}

    .ui-datepicker-multi .ui-datepicker-group table {
        width: 95%;
        margin: 0 auto .4em
    }

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left
}

.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0
}

.ui-datepicker-rtl {
    direction: rtl
}

    .ui-datepicker-rtl .ui-datepicker-prev {
        right: 2px;
        left: auto
    }

    .ui-datepicker-rtl .ui-datepicker-next {
        left: 2px;
        right: auto
    }

    .ui-datepicker-rtl .ui-datepicker-prev:hover,
    .ui-datepicker-rtl .ui-datepicker-prev:focus {
        right: 1px;
        left: auto
    }

    .ui-datepicker-rtl .ui-datepicker-next:focus,
    .ui-datepicker-rtl .ui-datepicker-next:hover {
        left: 1px;
        right: auto
    }

    .ui-datepicker-rtl .ui-datepicker-buttonpane {
        clear: right
    }

        .ui-datepicker-rtl .ui-datepicker-buttonpane button {
            float: left
        }

            .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group {
                float: right
            }

    .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
        border-right-width: 0;
        border-left-width: 1px
    }



.ui-datepicker .ui-datepicker-header {
    margin: -.3em -.25em;
    border-radius: 0;
}

.ui-datepicker-trigger {
    width: 20px;
    padding: 0 3px 3px 0;
}

.ui-datepicker .ui-datepicker-prev {
    left: 1px;
}

.ui-datepicker .ui-datepicker-next {
    right: 1px;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    top: 1px;
}

.ui-corner-all {
    border-radius: 0px;
}



/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {
    /* Support: IE8 only, Android < 4.4 only */
    width: 75%;
    width: calc( 100% - 2.4em );
}

.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
    border-top-style: solid;
}


.ui-spinner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;
}

.ui-spinner-input {
    border: none;
    background: none;
    color: inherit;
    padding: .222em;
    margin: 0 !important;
    vertical-align: middle;
}

.ui-spinner-button {
    width: 1.6em;
    height: 50%;
    font-size: .5em;
    padding: 0;
    margin: 0;
    text-align: center;
    position: absolute;
    cursor: default;
    display: block;
    overflow: hidden;
    right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
    border-top-style: none;
    border-bottom-style: none;
    border-right-style: none;
}

.ui-spinner-up {
    top: 0;
}

.ui-spinner-down {
    bottom: 0;
}

.ui-spinner.ui-widget-content {
    border: none;
    background: var(--white);
}

.ui-button .ui-icon {
    background-image: url(images/ui-icons_777777_256x240.png);
}

.ui-icon {
    width: 16px;
    height: 16px;
}

.ui-icon {
    display: inline-block;
    vertical-align: middle;
    margin-top: -.25em;
    position: relative;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
}

.ui-icon, .ui-widget-content .ui-icon {
    background-image: url(images/ui-icons_444444_256x240.png);
}


.ui-icon-triangle-1-n {
    background-position: 0 -16px;
    opacity: .7;
}


.ui-icon-triangle-1-s {
    background-position: -65px -16px;
    opacity: .7;
}

.ui-button-icon-only .ui-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
}


.bigsearch {
    width: 500px;
}

/* tables and buttons on small screens */
.labelinput {
    display: inline-block;
    margin-right: 15px;
    font-size: .9em;
}

    .labelinput label {
        vertical-align: middle;
        margin-bottom: 0;
    }

.tblAdd {
    background: rgba(var(--dark-blue-rgb),1);
    background: -moz-linear-gradient(top, rgba(var(--dark-blue-rgb),1) 0%, rgba(var(--blue-rgb),1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(var(--dark-blue-rgb),1)), color-stop(100%, rgba(var(--blue-rgb),1)));
    background: -webkit-linear-gradient(top, rgba(var(--dark-blue-rgb),1) 0%, rgba(var(--blue-rgb),1) 100%);
    background: -o-linear-gradient(top, rgba(var(--dark-blue-rgb),1) 0%, rgba(var(--blue-rgb),1) 100%);
    background: -ms-linear-gradient(top, rgba(var(--dark-blue-rgb),1) 0%, rgba(var(--blue-rgb),1) 100%);
    padding: 9px 12px;
    color: var(--white);
    margin-bottom: 10px;
    font-size: 14px;
    border-radius: 0;
}

    .tblAdd .buttons, .tblAdd .buttons2 {
        display: inline-block;
        float: right;
        padding-top: 1px;
    }

.blackbutton {
    background-color: #222 !important;
    border-bottom: solid 3px #000 !important;
}

    .blackbutton:hover, .blackbutton:focus {
        background-color: #131313 !important;
    }

.spreadbutton, .spreadbutton2 {
    vertical-align: middle !important;
}

@media (max-width: 767px) {
    .spreadbutton {
        width: calc(50% - 6px);
        margin: 0px 1px 8px 1px;
    }

    .tblAdd .buttons {
        width: 100%;
        float: none;
    }
}

@media (max-width: 677px) {
    .tblAdd .buttons {
        float: left;
    }

    .wrappingtable3 td {
        display: inline-block;
        padding: 0px;
        width: 100%;
    }

    .tblAdd .buttons2 {
        float: left;
        width: 100%;
    }

    .spreadbutton2 {
        width: 100%;
        margin: 5px 0 9px;
    }
}

@media (max-width: 550px) {
    .bigsearch {
        width: 240px;
    }

    .wrappingtable2 td {
        display: inline-block;
        padding: 0px;
        width: 100%;
    }

    .wrappingtable2 {
        border-spacing: 0 1em;
    }

    .see-also {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .smallfix {
        table-layout: fixed;
    }

        .smallfix thead {
            font-size: 10px;
        }

        .smallfix th:first-child {
            width: 100px;
        }

    .wrappingtable td {
        display: inline-block;
        padding: 0px;
        width: 100%;
    }

    .wrappingtable {
        border-spacing: 0 1em;
    }
}

@media (max-width: 525px) {
    .wrappingtable input[type=text], .wrappingtable2 input[type=text] {
        max-width: 229px;
    }

    .spreadbutton {
        width: 100%;
        margin: 5px 0 9px;
    }
}


.accordion .card-header {
    border-radius: 0;
    padding: 0;
}

    .accordion .card-header a {
        display: inline-block;
        width: 100%;
        padding: .7em;
    }

        .accordion .card-header a:hover, .accordion .card-header a:active {
            text-decoration: none;
        }

.accordion .card {
    border-radius: 0;
    margin-bottom: .5rem;
    border-bottom: solid 1px  var(--gray-3) !important;
}

.accordion .card-body {
    line-height: 1.5;
}

    .accordion .card-body a {
        text-decoration: underline;
    }

.accordion h4,
.accordion .h4,
.accordion h3,
.accordion .h3 {
    margin: 0;
    width: calc(100% - 20px);
    opacity: 1;
}

.accordion .fa-angle-right {
    position: absolute;
    transform: rotate(90deg);
    top: 11px;
    right: 12px;
}

/**FAQ Accordion**/

.faq-accordion-list button {
    font-size: .9rem;
    padding: .75em 1em;
    border: none;
    background: none;
    width: 100%;
    font-weight: 600;
    border-radius: 0;
    text-align: left;
    text-transform: none;
    background: var(--white);
    color: var(--blue-8);
    letter-spacing: 0;
}

.faq-accordion-list .h3 button, .faq-accordion-list .h4 button {
    font-size: 1rem;
    font-weight: 400;
}

.faq-accordion-list button.collapsed {
    color: var(--default-text);
}

.accordion-state-open-icon, .accordion-state-closed-icon {
    position: absolute;
    right: .5em;
    font-size: 1.2em;
}

.accordion-state-closed-icon {
    display: none;
}

.collapsed .accordion-state-closed-icon {
    display: initial;
}

.collapsed .accordion-state-open-icon {
    display: none;
}



    .faq-accordion-list .h3 button[aria-expanded="true"], .faq-accordion-list .h4 button[aria-expanded="true"] {
        font-weight: 600;
    }

.faq-accordion-list button .fa-angle-right {
    position: relative;
    /*top: 5px;*/
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: auto;
    left: -2px;
}

.faq-accordion-list button[aria-expanded="false"] .fa-angle-right {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

.faq-accordion-list .faq-item-wrapper {
    border-bottom: 1px solid var(--gray-3);
}
    .faq-accordion-list p{
         font-size: 0.88em;
         font-weight:500;
         line-height: 1.5em;
    }

.agreement-check {
    background: #efefef;
    padding: 20px;
}

    .agreement-check > input {
        display: inline-block;
        vertical-align: top;
    }

    .agreement-check > label {
        display: inline-block;
        font-weight: 600;
        width: calc(100% - 18px);
        padding-left: 5px;
        margin-bottom: 0;
    }

#cphPrimaryContent_ddlInquiryType label, .livefeedfilter label {
    max-width: 90%;
    vertical-align: top;
}



@media print {
    a[href]:after {
        content: none !important;
    }

    .header-banner, .oas-ads, .square-ad, #mb-header, .ad13, #sticky-bar, .tblAdd, #oasAds, .see-also, ._dianomi_wrapper, .col-lg-12.col-sm-6 iframe, #tv-miniwidget-ffa49, ins#google_pedestal_container, #HelpersArea {
        display: none;
    }

    ins.adsbygoogle {
        display: none !important;
    }

    body {
        color: #000;
        background: var(--white);
    }

    main:before {
        content: "Printed from MarketBeat.com" !important;
        margin-left: 15px;
    }


    table.breakheadlines tr td:last-child {
        border-right: none;
        word-break: break-word;
    }

    #canvaspp {
        max-width: 100% !important;
    }
}
/* index data in header */


.header-index {
    transition: opacity .7s;
    background: transparent;
    padding: 4px 10px 6px 12px;
    font-weight: 500;
    border: solid 2px var(--blue-14);
    margin: 1px 0 0 0;
    border-radius: 4px;
    display: inline-block;
    vertical-align: top;
    font-size: 13px;
}

    .header-index .go-to-data-href,
    .header-index .index-price,
    .header-index a {
        opacity: 0.8;
    }

    .header-index:hover,
    .header-index:focus {
        background: var(--blue-13);
    }

    .header-index .fa-angle-right {
        font-size: 1.2em;
        margin-left: 8px;
    }

    .header-index a {
        font-weight: 600;
        text-decoration: none;
    }

.header-follow > span {
    float: right;
    padding: 3px 0;
}

.header-follow img {
    margin-left: 8px;
    height: 20px;
}

.header-index a, .header-index span {
    display: inline-block;
}

.index-mover {
    cursor: e-resize;
    background: var(--blue-14);
    height: 32px;
}



.fa-angle-right.point-up {
    transform: rotate(-90deg);
}

.fa-angle-right.point-down {
    transform: rotate(90deg);
}



@media (min-width: 767.1px) {
    .menu-bar:first-child {
        min-height: 30px;
        padding: 2px 0;
    }
}


/* company details page */

/* side menu */
.row-nav-main {
          margin-left: -15px;
          margin-right: -15px;
      }

      .col-navigation, .col-main {
          width: 100%;
      }

#dropdownCompanyDetails, .side-menu-dropdown {
    background: var(--gray-2);
    padding: 2px 0;
    border-top: solid .5px var(--gray-3);
    /* width: calc(100% + 1.8em) !important;
    margin: 0 -.9em !important;*/
}

.side-menu {
    padding: 0 .5em;
    list-style: none;
}

    .side-menu a {
        color: var(--default-text);
        font-size: .9em;
    }

        .side-menu a.active span {
            color: var(--blue);
            border-bottom: solid 1px var(--blue);
        }

    .side-menu.collapse {
        transition: height 0.4s ease-out;
    }

        .side-menu.collapse.show {
            display: block !important;
        }

.dropdown-toggle .nav-dropdown-toggle-arrow:before {
    content: "\f00d"; /* x */
    font-family: var(--fa-style-family);
}

.dropdown-toggle.collapsed .nav-dropdown-toggle-arrow:before {
    content: "\f0c9"; /* bars */
}

@media (max-width: 767.9px) {
    .side-menu {
        background: var(--gray-2);
        border-top: solid 1px var(--gray-5);
        padding-bottom: 1em;
    }
}

@media (min-width: 768px) {
    #navigationHolder, .navigationHolder {
        position:sticky;
        top: 60px;
        border-right: solid 1px var(--gray-5);
        }
    .col-navigation {
        width: 210px;
    }

    .col-main {
        width: calc(100% - (210px + 30px));
        max-width: 1234px;
    }

    .fullscreen .featureBox-inner {
        max-width: 2400px;
        margin: 0 auto;
        padding: 1em;
    }
    .fullscreen .col-main {
        max-width: 2000px;
    }

    .side-menu a {
        margin-bottom: .5em;
        font-weight: 500;
    }
    .side-menu a:hover span, .side-menu a:focus span {
        text-decoration:none;
        border-bottom: solid 1px var(--gray);
    }
}
/* end side menu */

.ai-pros h3 {
    color: var(--green);
}

.ai-cons h3 {
    color: var(--red);
}

.ai-cons h3, .ai-pros h3 {
    padding: 0 0.1em;
    margin-top: .7em;
}

.ai-pros-cons-row p {
    padding: 0 0.1em;
    font-weight: 600;
}

.ai-pros ul, .ai-cons ul {
    padding: 0 0.5em 0 0;
    margin-bottom: 0;
    list-style: none;
}

    .ai-pros ul li, .ai-cons ul li {
        margin-bottom: .7em;
        padding-left: 2.1em;
        position: relative;
    }

.ai-pros .inner-border, .ai-cons .inner-border {
    border-radius: 1em;
    padding: .5em 1em 1em;
    height: 100%;
}

.ai-pros .inner-border {
    border: solid 2px var(--green-4);
}

.ai-cons .inner-border {
    border: solid 2px var(--red-4);
}

.ai-pros-cons-row h3 {
    font-weight: 600;
    text-transform: uppercase;
    padding-bottom: 1em;
    border-bottom: 2px solid color-mix(in srgb, currentColor 20%, transparent);
    margin-bottom: 1em;
}

    .ai-pros-cons-row h3 ~ img {
        position: absolute;
        top: 1.5em;
        right: 2em;
    }


.ai-pros-cons-row ul {
    list-style: initial;
    list-style-type: disc;
    padding: 0 0 0 1em;
}

    .ai-pros-cons-row ul li {
        padding-left: .25em;
    }

        .ai-pros-cons-row ul li::marker {
            color: var(--default-text);
        }

.ai-pros-cons-row p {
    color: var(--gray-11);
    font-weight: 500;
    line-height: 1.2;
}

/* end ai pros cons row */

.stat-summary-wrapper {
    min-height: 6.5em;
    padding: 0;
    margin: 0 15px;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .05rem;
    opacity: 1;
    flex-flow: row wrap;
    -ms-flex: 0 0 calc(100% - 30px);
    flex: 0 0 calc(100% - 30px);
    max-width: calc(100% - 30px);
}

.stat-summary-title {
    font-size: 0.666em;
    font-weight: 500;
    line-height: 1em;
    color: var(--gray);
    width: 95%;
    padding: 0 2.5%;
}

.stat-summary-heading {
    font-size: 1.7em;
    font-weight: 500;
    line-height: 1em;
    display: block;
    width: 95%;
    padding: 0 2.5%;
}

.stat-summary-subheading {
    min-height: 1em;
    font-size: 0.375em;
    line-height: 1em;
    display: block;
    width: 95%;
    padding: 0 2.5%;
    color: var(--gray-6);
    font-weight: 500;
}

@media (min-width: 576px) {
    .stat-summary-wrapper {
        -ms-flex: 0 0 calc(50% - 30px);
        flex: 0 0 calc(50% - 30px);
        max-width: calc(50% - 30px);
    }
}

@media (min-width: 768px) {
    .stat-summary-wrapper {
        -ms-flex: 0 0 calc(33.333333% - 30px);
        flex: 0 0 calc(33.333333% - 30px);
        max-width: calc(33.333333% - 30px);
    }
}

@media (min-width: 1200px) {
    .stat-summary-wrapper {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }
}

.text-lower {
    text-transform: capitalize;
}

.sticky-tabs.sticking {
    position: sticky; /* using sticky instead of fixed so that the width stays right */
    position: -webkit-sticky;
    top: 48px;
    z-index: 900;
    transition: opacity .4s;
    border-bottom: solid 1px rgb(128 128 128 / 9%);
}

.left-showing .sticky-tabs.sticking, .right-showing .sticky-tabs.sticking {
    opacity: 0;
}



/* performance data visualizations */

.performance-percent {
    font-size: 180%;
}

.performance-chart {
    height: 0.5em;
}

.performance-bar {
    top: 0;
    right: 50%;
}

    .performance-bar.positive-bar {
        right: auto;
        left: 50%;
    }

    .performance-bar.fill-bar {
        animation-name: performance-bar;
        animation-timing-function: ease-in;
        animation-fill-mode: backwards;
    }

    .performance-bar.positive-bar.fill-bar {
        animation-fill-mode: forwards;
    }

.performance-center {
    width: 2px;
    height: 0.65em;
    left: 50%;
    top: -0.15em;
    background: #000;
}


@keyframes performance-bar {
    from {
        width: 0;
    }
}

@keyframes performance-bar {
    from {
        width: 0;
    }
}

@keyframes performance-bar {
    from {
        width: 0;
    }
}

@keyframes performance-bar {
    from {
        width: 0;
    }
}

@keyframes performance-bar {
    from {
        width: 0;
    }
}


/* end performance data visualizations */

       
/* new 2020 */

.read-more-button::after {
    content: "\f107";
}
.read-more-button[aria-expanded="true"]::after {
    content: "\f106";
}

.read-more-section {
    margin: 0;
    transition: max-height .2s;
    line-height: 1.3em;
    padding: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 20;
    max-height: 26em;
}

    .read-more-section.clickable {
        cursor: pointer;
    }

    .read-more-section.expanded {
        max-height: initial;
        -webkit-line-clamp: 2000;
        width: 99.9% /* causes repaint, which is necessary to make wide letters at the ellipses point show up */
    }

    .read-more-section p {
        line-height: 1.3em;
        margin-bottom: 1.3em;
    }

.flex-social {
    display: flex;
    justify-content: left;
}

    .flex-social a {
        flex: 0 1 55px;
    }

.share-button-wrapper {
    padding: 8px 0;
}

@media (max-width: 230px) {
    .share-button {
        min-width: 100%;
        width: 100%;
    }
}

@media screen and (max-width: 575.9px) {
    .company-action-btn {
        font-size: 0.9em;
    }

        .company-action-btn a, .company-action-btn button,
        .company-action-btn .share-button-wrapper {
            width: 100%;
        }

        .company-action-btn a,
        .company-action-btn button {
            font-size: 0.75em;
            padding: 10px 10px;
        }

        .company-action-btn .share-button-wrapper {
            min-width: 100%;
        }
}

@media screen and (max-width: 360px) {
    .company-action-btn.col-4 {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .company-action-btn-title, .company-action-btn .share-inner-title {
        display: none;
    }

    .company-action-btn a, .company-action-btn button {
        font-size: 0.85rem;
        padding: 8px 10px;
    }
}

.byline-row {
    border-top: 1px solid var(--gray-3);
}

    .byline-row .btn-share {
        margin: 0 0.25em;
    }

.byline-text {
    position: relative;
    color: var(--default-text);
    padding: 8px 10px;
    line-height: 1.4em;
}

.byline-img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5em;
    width: 50px;
    height: 50px;
    overflow: hidden;
}

    .byline-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 14%;
    }

.article-share .btn-share {
    font-size: 1.2rem;
    margin: 0 0.25em 0.15em;
    padding: 0.5em;
}

@media (max-width: 576px) {
    .byline-row {
        font-size: 90%;
    }


    .byline-sep {
        height: 0;
        overflow: hidden;
    }

    .byline-text.w-share {
        padding-bottom: 3px;
    }

    .share-button-wrapper, .share-button {
        width: 100%;
        min-width: 100%;
    }
}

@media (min-width: 576px) {
    .byline-row .web-share-button {
        min-width: 120px;
        border-radius: 5px;
    }
}

.vote-span {
    cursor: pointer;
}


.first-half-icon, .second-half-icon {
    position: absolute;
    top: 0;
    left: 0;
}

.first-half-icon {
    width: .5em;
    overflow: hidden;
    background: var(--white);
    z-index: 1;
}

#shareButton a.opening {
    pointer-events: none;
}

.vote-number-1, .vote-number-0 {
    transition: transform 200ms ease-in-out;
    display: inline-block;
}

.scale13 {
    transform: scale(1.3);
}

.stock-badge {
    font-family: var(--font-family-alternative);
    font-size: .8em;
    font-weight: 500;
    text-transform: uppercase;
    display: inline-block;
    text-decoration: none;
    margin: 0.5em 0.5rem 0.25rem 0;
    padding: 0.35rem 0.75rem;
    background: var(--gray-2);
    color: var(--gray-9);
    border-radius: 1.2em;
}

    a.stock-badge:hover,
    button.stock-badge:hover,
    a.stock-badge:focus,
    button.stock-badge:focus{
        text-decoration: none;
        color: var(--blue);
        background: var(--gray-3);
    }

/* end new 2020 */

.tradingview23, .ad13 {
    width: 100%;
    vertical-align: middle;
}

.ad13 {
    max-width: 782px;
    margin: 0 auto 10px;
}

.actions {
    padding-top: 10px;
    text-align: center;
}


#cphPrimaryContent_tabCompanyProfile section, #CompanyProfile section {
    padding: 22px 10px 6px 0;
}

.faq-columns {
    columns: 2 300px;
    margin: 1em -1em 0;
}

    .faq-columns .faq-item-wrapper {
        break-inside: avoid;
        position: relative;
        padding-left: 1em;
        padding-right: 1em;
    }


        /* to get the columns to favor appearing longer on the left more often */
        .faq-columns .faq-item-wrapper:last-child {
            padding-bottom: 1em;
        }

.question:before {
    content: "Q";
    display: inline-block;
    position: absolute;
    left: 36px;
}

.answer:before {
    content: "A";
    display: inline-block;
    position: absolute;
    left: 36px;
    font-weight: 600;
}

.answer ol, .answer ul {
    padding-left: .9em;
}

.icon-line-element-repeating {
    font-size: 40vw;
}

@media (min-width:1100px) {
    .icon-line-element-repeating {
        font-size: 600px;
    }
}

td.center {
    text-align: center;
}

@media (min-width: 1200px) {
    .tradingview23 {
        width: calc(100% - 308px);
        padding: 0 8px 0 0;
        display: inline-block;
    }

    .ad13 {
        width: 301px;
        max-height: 260px;
        display: inline-block;
    }
}

/* headlines page sidebar */

.mini-calendar {
    font-size: 14px;
    margin: 0 0 15px 0;
    width: 100% !important;
    table-layout: fixed;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10),0 2px 4px 0 rgba(0,0,0,.10);
    border: none;
}

    .mini-calendar thead {
        color: white;
        font-weight: 600;
        font-size: 13px;
        padding: 2px 6px;
    }

        .mini-calendar thead tr:nth-child(1) {
            font-family: var(--font-family);
            text-align: center;
            font-size: 1.3em;
            height: 45px;
            font-weight: 400;
        }

        .mini-calendar thead tr:nth-child(2) {
            background: var(--light-gray);
            color: var(--black);
            height: 30px;
            vertical-align: bottom;
        }

            .mini-calendar thead tr:nth-child(2) td {
                padding: 3px 6px;
            }

        .mini-calendar thead td, .mini-calendar tfoot td {
            padding: 6px;
        }

    .mini-calendar tbody tr:nth-child(even) {
        background: var(--light-gray);
    }

    .mini-calendar.insider tbody tr:nth-child(4n-1), .mini-calendar.insider tbody tr:nth-child(4n) {
        background: var(--light-gray);
    }

    .mini-calendar.insider tbody tr:nth-child(4n-3), .mini-calendar.insider tbody tr:nth-child(4n-2) {
        background: none;
    }

        .mini-calendar.insider tbody tr:nth-child(4n-3) td, .mini-calendar.insider tbody tr:nth-child(4n-1) td {
            padding-bottom: 0;
        }

    .mini-calendar tbody td {
        padding: 3px 6px;
        white-space: pre;
        text-overflow: ellipsis;
        overflow: hidden;
    }


#tv-miniwidget-ffa49 {
    margin: 0 0 15px -10px;
}

.col-all-but-336, .col-all-but-336-sm, .col-336-sm {
    padding-right: 15px;
    padding-left: 15px;
}

.col-336 {
    padding-right: 0 !important;
    padding-left: 0 !important;
    width: 100%;
}

@media (min-width: 992px) {
    .col-336 {
        float: left;
        width: 346px;
    }

    .col-all-but-336 {
        float: left;
        width: calc(100% - 346px);
        padding-right: 15px !important;
    }
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .col-336-sm {
        float: none;
        width: 346px;
        padding-right: 15px;
    }

    .col-all-but-336-sm {
        float: right;
        width: calc(100% - 346px);
    }
}

.col-336 ul {
    list-style: none;
    padding: 0;
    font-size: .9rem;
    margin-bottom: 15px;
}

    .col-336 ul a {
        text-decoration: none;
    }

.col-336 .see-also ul a:hover, .col-336 .see-also ul a:focus {
    text-decoration: underline;
}

#shareWidget {
    display: none;
    line-height: 1;
    color: var(--white);
}

    #shareWidget a {
        color: var(--white);
    }

    #shareWidget.side {
        top: 0;
        left: -60px;
        position: absolute;
        transition: top .2s;
        z-index: 20;
        display: block;
        padding-top: 50px;
    }

        #shareWidget.side.rolling {
            top: 70px;
            position: fixed;
        }

    #shareWidget .fa-regular,
    #shareWidget .fa-kit,
    #shareWidget .fa-solid {
        font-size: 1.15em;
        vertical-align: middle;
    }

div#shareWidget.side > a {
    display: inline-block;
    max-width: 50px;
    height: 45px;
    overflow: hidden;
    transition: max-width .4s;
}

    div#shareWidget.side > a:hover,
    div#shareWidget.side > a:focus {
        max-width: 250px;
    }

    div#shareWidget.side > a > .left-icon {
        display: inline-block;
        vertical-align: top;
        width: 50px;
        height: 45px;
        padding: 11px;
        border: 0;
        text-align: center;
    }


#shareWidget.top {
    display: block;
    margin-right: -15px;
    margin-left: -6px;
}

    #shareWidget.top > a {
        display: inline-block;
        vertical-align: top;
        margin: 0 6px 10px 0;
        width: calc(14.25% - 6px);
        text-align: center;
        height: 37px;
        padding: 7px;
    }

    #shareWidget.top br {
        display: none;
    }

    #shareWidget.top .left-icon {
        display: block;
        width: 100%;
    }

    #shareWidget.top .right-tag {
        display: none;
    }

#shareableArticle {
    position: relative;
}


.article-page li {
    margin-bottom: 0.6em;
}

.anchor-link-target, .anchor-link-target-with-ad {
    scroll-margin-top: 70px;
}


.tab-content .anchor-link-target {
    scroll-margin-top: 114px;
}

.author-bio h3, .author-bio h4, .author-bio h5 {
    margin: 0 0 4px;
    font-size: 1em;
}

.placed-article .author-bio .author-title {
    font-size: 1.65rem;
    font-family: var(--font-family);
    font-weight: 400;
}
/* end headlines page sidebar styles */


/* price data styles for company profiles */
.price {
    font-weight: 600;
    line-height: 1;
    margin: 6px 0;
}

.price-updated {
    margin-left: 2px;
    font-size: 13px;
    color: #6f6f6f;
    font-weight: normal;
    margin-top: 5px;
}

.price strong {
    font-size: 28px;
    font-weight: 600;
    color: var(--blue-11);
}

/* change this to just .price-change-span once we add tooltip */
/* previously .price span, ...*/
 .price .price-change-span {
    font-size: 17px;
    display: inline-block;
    margin-left: 4px;
    vertical-align: text-top; /* strange but it looks best */
}

.price-data-section {
    margin-bottom: 10px;
}

.price-data-col {
    width: 33%;
    padding: 0 0 0 12px;
    display: inline-block;
    vertical-align: top;
}

.four-data-col {
    width: 24.5%;
}

.crypto-data-col {
    width: 32.5%;
}




#cphPrimaryContent_tabCompanyProfile .price-data-col, #CompanyProfile .price-data-col, .crypto-data-section .price-data-col {
    width: calc(33% - 2px);
}

.price-data-col.col-37 {
    width: 37%;
}

.price-data-col.col-31 {
    width: 31%;
}

.price-data-col:first-child {
    padding: 0;
}


@media (max-width: 650px) {
    #cphPrimaryContent_tabCompanyProfile .price-data-col, #CompanyProfile .price-data-col, .price-data-col, .crypto-data-section .price-data-col, .price-data-col.col-37, .price-data-col.col-31 {
        width: 100%;
        padding: 0;
    }
}

@media (max-width:750px) and (min-width:401px) {
    .four-data-col {
        width: 49%;
        padding: 0;
        padding-right: 10px !important;
    }
}

@media (max-width: 400px) {
    .four-data-col {
        width: 100%;
        padding: 0;
    }
}

.price-data {
    border-bottom: solid 1px  var(--gray-3);
    font-size: 14px;
    margin: 0 0 2px 0px;
    padding: 6px 5px;
}

.price-info .price-data {
    padding: 12px 2px 3px;
    min-height: 42px;
}

.price-data:after {
    content: " ";
    clear: both;
    display: table;
}

.price-data strong {
    float: right;
    font-weight: 600;
}



.price-data-section h3 {
    margin-top: 1.2rem;
    margin-bottom: .1rem;
}

.price-data-table {
    width: 100%;
    max-width: 335px;
    font-size: 13px;
    line-height: 1.7;
}

    .price-data-table tr {
        border-bottom: solid 1px  var(--gray-3);
    }

    .price-data-table td {
        padding: 3px;
        vertical-align: bottom;
    }

        .price-data-table td:nth-child(2) {
            text-align: right;
            font-weight: 600;
        }

    .price-data-table strong {
        font-weight: normal;
    }


.price-data dt {
    display: inline-block;
    font-weight: 400;
    margin-right: 0.25rem;
}

.price-data dd {
    margin: 0;
    float: right;
    font-weight:600; 
    text-align:right;
}
.price-data.w-range dd {
    margin-top: -8px;
}

dl.price-data-col {
    margin-bottom: 0;
}

/* end price data styles */

/* radio tabs for login page */

.div-radio-tabs {
    background-color: #f5f5f5;
    max-width: 520px;
    border: 1px solid #929292;
    border-radius: 3px;
    overflow: hidden;
    margin: 30px auto;
}

.radio-tabs {
    width: 100%;
}

    .radio-tabs input[type=radio] {
        display: none;
    }

    .radio-tabs td {
        padding: 0;
        width: 50%;
    }

    .radio-tabs label {
        margin: 0;
        background-color: #ccc;
        color: #616161;
        padding: 10px;
        display: block;
        border-bottom: solid 1px #929292;
    }

        .radio-tabs label:before {
            background: var(--blue);
            display: inline-block;
            height: 19px;
            width: 19px;
            border-radius: 50%;
            color: #f5f5f5;
            padding: 2.5px 0 0 1px;
            margin-right: 6px;
            text-align: center;
            font-size: 13px;
        }

    .radio-tabs td:nth-of-type(1) label {
        box-shadow: inset -2px -1px 3px rgba(0, 0, 0, 0.2);
        border-right: solid 1px #929292;
    }

    .radio-tabs td:nth-of-type(2) label {
        box-shadow: inset 2px -1px 3px rgba(0, 0, 0, 0.2);
        border-left: solid 1px #929292;
    }

    .radio-tabs .fa-regular {
        background: var(--dark-blue);
        border-radius: 50%;
        padding: 4px;
        margin-top: 5px;
        margin-right: 7px;
        font-size: .6em;
        position: relative;
        top: -6px;
    }


    .radio-tabs input[type="radio"]:checked + label {
        background-color: #f5f5f5;
        box-shadow: none;
        color: #555;
        border: none;
    }

label {
    vertical-align: top;
}

.radio-tabs-panel {
    background-color: #f5f5f5;
    padding: 17px 10px 10px 10px;
}

@media (max-width: 450px) {
    .radio-tabs label {
        font-size: 13px;
    }
}

/* end radio tabs for login page */


.article-list {
    list-style: none;
}

.fade-bottom {
    position: relative;
    overflow: hidden;
}

    .fade-bottom:after {
        content: '';
        height: 60px;
        display: block;
        z-index: 47;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
        pointer-events: none;
    }

.fade-bottom-gray:after {
    background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgb(239, 242, 244) 100%);
}


.blue-bullet-list li:before {
    border: solid .2em var(--blue);
}

.blue-12-bullet-list li:before {
    border: solid .2em var(--dark-blue);
}

.blue-11-bullet-list li:before {
    border: solid .2em var(--blue-11);
}

.blue-6-chart-bullet-list li:before {
    border: solid .2em var(--blue-6-chart);
}

.blue-5-chart-bullet-list li:before {
    border: solid .2em var(--blue-5-chart);
}

.blue-4-chart-bullet-list li:before {
    border: solid .2em var(--blue-4-chart);
}

.blue-3-chart-bullet-list li:before {
    border: solid .2em var(--blue-3-chart);
}






.dl-bullet {
    display: inline-block;
    width: 100%;
    position: relative;
    left: 0;
    font-size: 90%;
}

    .dl-bullet div {
        position: relative;
        left: 0;
        width: 100%;
        padding-left: 2em;
    }

        .dl-bullet div:before {
            font-weight: normal;
            content: "\f105";
            font-family: var(--fa-style-family);
            color: var(--dark-blue);
            position: absolute;
            left: 0;
            top: 1px;
            font-size: 1.25em;
        }

    .dl-bullet dt {
        display: block;
        font-size: 1.1em;
        padding: 0.15em 0;
    }

    .dl-bullet dd {
        display: block;
        margin-bottom: 1em;
    }


.max-770 {
    max-height: 770px;
}


/* homepage 2021 */
.news-column-first-article-image {
    max-width: 80%;
    max-height: 235px;
    width: auto;
    z-index: 1;
    background: var(--white);
    border: solid 3px var(--white);
    display: block;
    margin: 1em auto -10%;
    position: relative;
}


.news-column-first-article-background-image {
    filter: grayscale(1) brightness(2);
    opacity: .2;
    mix-blend-mode: multiply;
    padding-top: 0;
    background-size: cover;
    background-position: center;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.news-column-first-article-background-color {
    padding: 1px;
    margin-bottom: 13%;
    position: relative;
    z-index: 0;
}

    .news-column-first-article-background-color .news-column-heading {
        position: relative;
        z-index: 1;
    }

.news-column-first-article-title {
    font-family: var(--font-family);
    text-decoration: none;
    color: var(--black);
    font-weight: 500;
    font-size: 1.1em;
    margin: .2em 0 1em;
}

.news-column-first-article .post-time, .news-column-first-article .long-post-time {
    font-size: .9em;
    font-weight: 500;
}

.news-column-logo-cell {
    border-right: solid 1px #eee;
    border-top: solid 1px #eee;
    padding: 10px;
}





.news-section-no-thumbnails .description {
    border-bottom: solid 1px var(--gray-3);
}

.news-section-no-thumbnails .linkbox:last-child .description {
    border-bottom: none;
}

.news-column-first-article .title-line {
    font-size: 1.1em;
}

.news-section img {
    border-radius: .25em;
    border: solid 1px var(--gray-3);
    aspect-ratio: 1.7 / 1;
    object-fit: cover;
}


/*
    #carouselHomepageControls .carousel-control-next, #carouselHomepageControls .carousel-control-prev {
        width: 1.5em;
        opacity: .3;
    }

    #carouselHomepage .image-link {
        min-height: 200px;
    }

    @media (max-width: 767.9px) {
        #carouselHomepage .description {
            min-height: 388px;
        }
    }

    @media (min-width: 768px) {
        #carouselHomepage .image-link {
            min-height: 388px;
        }
    }

    @media (min-width: 992px) {
        #carouselHomepage .image-link {
            min-height: 415px;
        }
    }

    @media (min-width: 1200px) {
        #carouselHomepage .image-link {
            min-height: 388px;
        }
    }*/



#carouselHomepage2 {
    height: 100%;
}

    #carouselHomepage2 .carousel-item {
        height: calc(100vh - 270px);
        max-height: 50vw;
        width: calc(100% + 10px);
    }

@media (min-width: 992px) {
    #carouselHomepage2 .carousel-inner {
        height: 100%;
        width: 100%;
    }

    #carouselHomepage2 .carousel-item {
        height: 100%;
        max-height: 100%;
    }
}

.slide-article {
    margin: 0 10px 10px 0;
    width: calc(25% - 10px);
    float: left;
    height: 40%;
    border: solid 1px var(--gray-3);
}

.slide-article-1 {
    width: calc(50% - 10px);
    height: 100%;
}

.slide-article-4 {
    width: calc(50% - 10px);
    height: calc(60% - 10px);
}

@media (max-width: 800px) {
    #carouselHomepage2 .carousel-item {
        max-height: 87vw;
        min-height: 390px;
        font-size: .8em;
    }

    .slide-article-3 {
        display: none;
    }

    .slide-article-1 {
        width: calc(100% - 10px);
        height: 60%;
    }

    .slide-article-2, .slide-article-4 {
        width: calc(50% - 10px);
        height: calc(40% - 10px);
    }

    .slide-article .article-author-image, .slide-article .upper-note {
        display: none;
    }
}

.slide-article-link {
    display: block;
    background: linear-gradient(180deg, rgba(var(--black-rgb), 0) calc(100% - 5em), rgba(var(--black-rgb), .9) calc(100% - 3em), rgba(var(--black-rgb), 0) 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}


.slide-article .container-play {
    height: 100%;
}

    .slide-article .container-play::after {
        z-index: 1;
        pointer-events: none;
    }

.slide-article-image-div {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: var(--black);
}

.slide-article-image {
    opacity: 1;
    padding-top: 0;
    object-fit: cover;
    object-position: 50% 25%;
    width: 100%;
    height: calc(100% - 3em);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0 0 .1em .1em;
}

    .slide-article-image:nth-child(1) {
        bottom: 0;
        top: initial;
        filter: blur(1.5px);
        border-radius: 0;
    }


.slide-article .description {
    position: absolute;
    bottom: 0;
    padding: .5em .75em;
    background: #ffffffeb;
    color: black;
    border-radius: .25em;
    margin: .5em;
    width: calc(100% - 1em);
}

.slide-article-title {
    margin-bottom: .4em;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.2em;
    height: 2.4em;
    max-width: 360px;
}

.slide-article .upper-note, .slide-article .post-time {
    font-size: .6em;
}

.video-carousel img {
    margin: -4px;
    max-width: calc(100% + 8px);
}

.blue-indicators-carousel .carousel-indicators {
    position: relative;
    margin: 1em;
    opacity: 1;
}

    .blue-indicators-carousel .carousel-indicators li {
        width: 10px;
        height: 10px;
        margin: 0 8px;
        border-radius: 6px;
        background-color: var(--gray-4);
        border: solid 1px var(--gray-4);
        opacity: 1;
    }

        .blue-indicators-carousel .carousel-indicators li.active {
            background-color: var(--blue-8);
            border: solid 1px var(--blue-8);
            z-index: 1;
        }



.blue-indicators-carousel .carousel-control-prev, .blue-indicators-carousel .carousel-control-next {
    background: var(--gray-3);
    border-radius: 50%;
    padding: 3px;
    width: 1.5em;
    height: 1.5em;
    opacity: 1;
}

    .blue-indicators-carousel .carousel-control-prev:hover,
    .blue-indicators-carousel .carousel-control-next:hover,
    .blue-indicators-carousel .carousel-control-prev:active,
    .blue-indicators-carousel .carousel-control-next:active {
        background: var(--blue-8);
    }



/* slick slider for videos */

.video-carousel:not(.slick-initialized) {
    white-space: nowrap;
    overflow: hidden;
}

.video-carousel .slick-list {
    margin: 0 -5px;
}

.video-slide {
    border: solid 1px var(--gray-4);
    padding: 0px;
    overflow: hidden;
    margin: 7px;
    border-radius: 5px;
    /* to hold space before slick is initialized */
    display: inline-block;
    width: 33.3333%;
}



.video-carousel .slick-center::after {
    content: "\25B6";
    color: #ffffffe0;
    position: absolute;
    top: 50%;
    left: 50%;
    white-space: pre;
    text-align: center;
    font-size: 3em;
    transform: translate(-50%, -50%);
    text-shadow: 2px 2px 5px #21212187;
}

/* Dots */



.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;
            background: transparent;
        }

            .slick-dots li button:hover,
            .slick-dots li button:focus {
                outline: var(--blue) dashed 1px;
                border-radius: 50%;
            }

                .slick-dots li button:hover:before,
                .slick-dots li button:focus:before {
                    opacity: 1;
                }

            .slick-dots li button:before {
                font-size: 26px;
                line-height: 20px;
                position: absolute;
                top: 0;
                left: 0;
                width: 20px;
                height: 20px;
                content: '•';
                text-align: center;
                opacity: .25;
                color: var(--blue-8);
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

        .slick-dots li.slick-active button:before {
            opacity: .75;
            color: var(--blue-8);
        }


/* end home page styles */

/* icons for header and footer */

.feature-icon {
    width: 83px;
    height: 83px;
    border-radius: 50%;
    margin: 0 auto;
    background: #EEFAFF;
    color: var(--blue-7);
    text-align: center;
    font-size: 41px;
    vertical-align: middle;
    line-height: 83px;
}

#footer-logo {
    max-width: 95%;
}

@media (min-width:992px) {
    #footer-logo {
        max-width: 80%;
    }
}

.footer-follow .fa-kit {
    margin-right: .5em;
}

.featured-in .fa-kit {
    font-size: 4.5em;
    margin: 0 1.25rem 0.5rem;
}

@media screen and (max-width: 991.9px) {
    .featured-in .fa-kit {
        font-size: 2.8em;
    }
}

/* end icons for header and footer */

/* start modernpopup css */

#optinform-container, #optinform-container *, #optinform-container *:before, #optinform-container *:after {
    box-sizing: border-box;
}

#optinform-container {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, .85);
    /*background-color: rgba(219, 223, 226, 0.95);*/
    opacity:1;
    transition: opacity 0.5s;
    z-index: 1500;
}

    #optinform-container:target, #optinform-container-ext:target {
        visibility: visible;
        display: block;
    }

.optinform {
    position: absolute;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2em);
    max-width: 550px;
    background-color: var(--white);
    border-radius: .277rem !important;
    overflow: hidden;
    z-index: 75;
    /*box-shadow: 2px 2px 20px 0px var(--gray-4);*/
}
    .optinform.to-top-on-mobile{
        border:6px solid;
        border-radius:0!important;
    }
    .optinform.modal-A {
        max-width: 1177px;
    }
.optinform.modal-B{
    max-width:462px;
}
.optinform .modal-body {
    max-height:90vh;
}

#optinform-content {
    font-family: var(--font-family);
    margin: 0;
    overflow: hidden;
}
.optinform .toggle-collapse {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: height 0.6s ease, opacity 0.4s ease;
}

    .optinform .toggle-collapse.show {
        height:auto;
        opacity: 1;
    }

.optinform .close {
    position: absolute;
    right: 0.25em;
    top: 0.25em;
    color: var(--white);
    font-size: 2em;
    text-align: center;
    color: var(--dark-gray);
    text-shadow: none;
    background: none;
    border: 0;
    z-index:1;
}
    .optinform .close span{
        color:var(--gray-8);
    }

    .optinform .close:hover span .optinform .close:focus span {
            opacity: 0.8;
        }

    .optinform h1, .optinform .optin-heading {
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        margin: .67em 0;
        font-family: var(--font-family);
        font-weight: 600;
        line-height: 1.2em;
    }

.optinform .optinform-text-container img {
    position: relative;
    padding: 0 10px;
    width: auto;
    height: auto;
}

.optinform p {
    text-align:center;
}
    .optinform.to-top-on-mobile p{
        text-align:left;
    }
    .optinform p a {
        color: var(--gray);
        text-decoration: none;
    }
.optinform #tdText a {
    color: black;
    font-weight:400;
    text-decoration: none;
}
    .optinform p a:hover, .optinform a:active, .optinform a:focus {
        color: var(--gray-11);
        text-decoration: underline;
    }
.optinform .h2{
    font-weight:700;
    max-width:90%;
    color: var(--dark-gray);
}
    .optinform .h3 {
        font-weight:600;
        color: var(--dark-gray);
    }
        .optinform .h2 a, .optinform .h3 a {
            color: var(--dark-gray);
        }

            .optinform .h2 a:hover, .optinform .h3 a:hover {
                color: var(--black);
                text-decoration: underline;
            }
.optinform-text-container {
    display: block;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 20px;
}


.optinform .banner-flex input {
    height: 2.2rem;
    font-size: 1em;
    box-shadow: inset 0 0 2px var(--gray-9);
}
.optinform .optin-input {
    /*width: calc(100% - 245px);*/
    height: 2.2rem;
    font-size: 1em;
    background: var(--light-gray);
    border: 1px solid var(--gray-3);
    color: var(--gray);
    font-size: 0.83em;
    width:100%;
    text-align:center;
    font-weight: 600;
    margin-bottom: 0.5em;
}
    .optinform.to-top-on-mobile .optin-input {
        background: var(--white);
        color: #5B626D;
        height: 2.2rem;
        font-size: 1em;
        box-shadow: inset 0 0 2px var(--gray-9);
        font-weight: 400;
        margin-bottom:4px;
    }

.optinform.to-top-on-mobile #optinform-footer {
    background-color: #e9e9e9;
    width: 100%;
    padding: 15px 15px 5px;
    box-sizing: border-box;
    border-radius: 0;
}
.optinform .btn {
    padding: 1em !important;
    width: 100%;
}

#optinformsubmit {
    background-color: #3BB34F;
    color: var(--white);
    font-family: var(--font-family);
    margin: 0 0 0 10px;
    padding: 5px 15px;
    border: none;
    height: 40px;
    width: 235px;
    border-radius: 0;
}

#optinform-modal #optinformsubmit {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    background: var(--blue);
    background-color: var(--blue) !important;
    text-transform: none;
    font-size: 18px;
}

/*#optinform-content h1 a:link, #optinform-content h1 a:active, #optinform-content h1 a:hover, #optinform-content h1 a:visited, #optinform-content .optin-heading a:link, #optinform-content .optin-heading a:active, #optinform-content .optin-heading a:hover, #optinform-content .optin-heading a:visited {
        color: var(--blue);
    }*/

.optinform #tdText {
    padding-left: 15px;
    vertical-align: top;
    border: 0;
    font-size: 13pt;
    line-height: 1.4em;
}

.optinform #tdLogo {
    padding-right: 10px;
    padding-left: 10px;
    border: 0;
    vertical-align: middle;
}

.optinform h1, .optinform .optin-heading {
    font-size: 24pt;
}

.optinform .close2 {
    position: absolute;
    right: -1px;
    top: -1px;
    color: var(--white);
    font-size: 2em;
    text-align: center;
    width: 20px;
    height: 20px;
    display: block;
    border: 0;
    border-radius: 0;
    background-image: none;
}

.optinform .x {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 0;
}

@media screen and (max-width: 575.98px) {
   
    .optinform h1, .optinform .optin-heading {
        font-size: 18pt;
    }

    .optinform.to-top-on-mobile {
        top: 1em;
        left: .5em;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        width: calc(100% - 1em)
    }



    .optinform .optinform-flex-container, .optin-heading, #email, #submit {
        width: 100%;
        padding: 5px 0;
        margin: 5px 0;
        vertical-align: baseline;
    }

    .optinform-flex-container p {
        padding: 0;
        width: 100%;
    }

    /*.optinform img {
            width: 100%;
        }*/

    #optinform-footer {
        width: 100%;
        margin: 0;
    }
    
    .optinform #txtEmailInput {
        width: 100%;
        text-align: center;
    }

    .optinform #tdLogo {
        display: none;
    }

    .optinform #tdText {
        text-align: center;
        padding-left: 0;
    }

    #optinformsubmit {
        width: 100%;
        padding-left: 0;
        margin-left: 0;
        margin-top: 10px;
        -webkit-appearance: none;
    }
}

@media screen and (max-width: 370px) {
    .optinform {
        top: .6em;
        left: 0;
        -webkit-transform: translate(0,0);
        -ms-transform: translate(0,0);
        transform: translate(0,0) scale(.9);
        /*width: calc(100% - 2em);*/
        width: 100%;
        transform-origin: top;
    }
}

@media (min-width: 950px) {
    .optinform .h1 {
        font-size: 2em;
    }
    /* for report popup 2022 */
    .m-md-pop-left {
        margin: -82px 0 -63px -102px;
    }
}

/* for popup/ banner split test */

.optinform-banner {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    position:relative;
    top:auto;
    left:auto;
    transform:none;
}

    .optinform-banner #optinform-content {
        padding: 1em 1em 0;
    }
        .optinform-banner .modal-body{
            overflow:visible;
            max-height:auto;
        }

        .optinform-banner.bg-white #optinform-content {
            padding: 3px 16px;
        }

    .optinform-banner .optin-heading {
        font-size: 23px;
        text-align: left;
        font-family: var(--font-family);
    }

    .optinform-banner.bg-white .optin-heading {
        font-size: 21px;
        font-family: inherit;
        text-align: center;
        font-weight: 600;
    }

  

    .optinform-banner .optinform-text-container {
        margin-top: 0;
        margin-bottom: 6px;
    }

    .optinform-banner #tdText {
        padding: 0 !important;
    }

        .optinform-banner #tdText a {
            color: inherit !important;
        }

    .optinform-banner #tdText {
        text-align: left;
        padding: 0 !important;
    }

    .optinform-banner.bg-white #optinform-footer {
        padding: 15px 0 4px;
    }

    .optinform-banner .privacy-policy a {
        color: var(--white) !important;
    }

    .optinform-banner.bg-white .privacy-policy a {
        color: var(--gray-9) !important;
    }

    .optinform-banner .banner-flex {
        padding: 0 15px;
        display: flex;
        flex-wrap: wrap;
    }

    .optinform-banner.bg-white input#txtEmailInput {
        box-shadow: inset 0 0 3px #d7d7d7;
        margin-bottom: 1px;
    }

    .optinform-banner .sbbutton {
        margin: 5px -1px !important;
        border: solid 1px #2f653d;
        flex: 1 2 175px;
    }

@media (max-width: 768px) {
    .optinform .h2{
        font-size:1.4em;
    }
    .optinform p {
        font-size: 0.88em;
    }
}

a.zocial.facebook, a.zocial.google {
    text-decoration: none;
    font-size: .83rem;
    line-height: 2;
    font-weight: 600;
    padding: 0.25em;
    display: inline-block;
    border-radius: 5px;
    text-align: center;
    text-transform: initial;
    letter-spacing: 0;
    cursor: pointer;
    background-repeat: no-repeat;
    transition: background-size .15s ease-in-out;
    font-family: var(--font-family);
    text-shadow: none;
    flex: 1 0 200px;
    -ms-flex: 1 0 200px;
    margin: 0 2px 4px;
    background: var(--white);
    border: solid 1px #c5c5c5;
    color: #575757;
    box-shadow: 0 0.1rem 0.15rem rgb(0 0 0 / 11%) !important;
}
    a.zocial.google.google-new {
        font-size: .83rem;
        padding: 0.25em;
        letter-spacing: 0;
        font-family: var(--font-family);        
        border: solid 1px var(--gray);
        color: var(--black);
    }


    a.zocial.google:hover, a.zocial.facebook:hover, a.zocial.google:active, a.zocial.facebook:active,
    a.zocial.google:focus, a.zocial.facebook:focus {
        background: var(--white);
        box-shadow: 0 0.05rem 0.1rem rgb(0 0 0 / 11%) !important;
        color: var(--black);
        font-weight: 600;
        text-decoration: none;
    }
    a.zocial.google.google-new:hover, a.zocial.google.google-new:active, a.zocial.google.google-new:focus {
        background: var(--light-gray);
    }



/* end modernpopup css*/


/* dividends book popup */

@media screen and (max-width: 600px) {
    .divbookright {
        width: 100% !important;
    }

    .divbookleft {
        display: block !important;
        width: 45% !important;
        margin: 0 auto;
        padding-left: 26px;
    }
}

@media screen and (max-width: 600px) and (max-height: 495px) {
    .divbookright {
        font-size: 13px !important;
    }

    .sig-pic {
        display: none !important;
    }
}


/* end dividends book popup */

/* automatic income dividend investing guide styles */

.automatic-income h3:before, #table-of-contents:before {
    display: block;
    content: " ";
    margin-top: -75px;
    height: 75px;
    visibility: hidden;
    pointer-events: none;
}

.automatic-income h2:before {
    display: block;
    content: " ";
    margin-top: -150px;
    height: 150px;
    visibility: hidden;
    pointer-events: none;
}

.scrollto {
    font-size: .6em;
    margin: 20px 0 30px;
    text-transform: uppercase;
    text-align: right;
    display: block;
    border-bottom: solid #eee 1px;
    padding: 1px 4px;
    color: var(--gray-8);
    text-decoration: none;
}

    .scrollto:hover, .scrollto:active, .scrollto:visited, .scrollto:focus {
        color: var(--gray-8);
        text-decoration: none;
    }

#table-of-contents li {
    margin-top: 4px;
}

#table-of-contents > ul > li {
    list-style: none;
    background-color: #f5f5f5;
    border: 1px solid #dfdfdf;
    border-radius: 3px;
    padding: 10px 5px 15px;
    font-size: .9em;
}

#table-of-contents > ul {
    padding-left: 0;
    max-width: 600px;
}

/* end automatic income dividend investing guide styles */

/* start notifications styles */
.fixed-notification {
    display: none;
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    border-radius: 5px;
}

.nice-blue-scroll::-webkit-scrollbar, .ntf-box ul::-webkit-scrollbar, #left-side-menu ul::-webkit-scrollbar, #right-side-menu ul::-webkit-scrollbar {
    width: 14px;
}

.nice-blue-scroll::-webkit-scrollbar-track, .ntf-box ul::-webkit-scrollbar-track, #left-side-menu ul::-webkit-scrollbar-track, #right-side-menu ul::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
    -webkit-border-radius: 14px;
    border-radius: 14px;
}

/*.nice-blue-scroll::-webkit-scrollbar-thumb, .ntf-box ul::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 7px rgba(0,0,0,0.5);
        background: #eee;
        border-radius: 14px;
    }*/

.nice-blue-scroll::-webkit-scrollbar-thumb, #left-side-menu ul::-webkit-scrollbar-thumb, #right-side-menu ul::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 7px rgba(0,0,0,0.5);
    background: rgba(243, 243, 243, 0.5);
    border-radius: 14px;
}


.ntf-area {
    display: inline-block;
    position: static;
    margin: 0 5px;
}

#logobar .ntf-area {
    margin: 0;
}


.ntf-box {
    max-height: 0;
    position: absolute;
    z-index: 49;
    top: 25px;
    left: -317px;
    width: 348px;
    max-width: 95vw;
    overflow: hidden;
    transition: .3s;
    text-align: left;
}

.ntf-area:not(:focus) .ntf-box {
    max-height: 0;
}

.ntf-area.account-notifications .ntf-box {
    left: -210px;
    width: 240px;
}

/*.ntf-inner .glyphicon {
    padding: 0 6px 3px 2px;
    vertical-align: middle;
}*/


.ntf-area:hover .ntf-box, .ntf-area:focus .ntf-box {
    max-height: 500px;
}

.ntf-box .ntf-inner {
    background: var(--light-gray);
    margin: 12px 5px 5px 5px;
    border: solid 1px var(--gray-3);
}


.ntf-area ul {
    padding: 0;
    margin: 0;
    max-height: 380px;
    max-height: min(380px, calc(100vh - 116px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


.arrow-span {
    position: absolute;
    top: 0;
    right: 9px;
    margin-left: -5px;
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent #f5f5f5 transparent;
    z-index: 100;
}

.ntf-number {
    background: var(--red-11);
    border: solid .5px var(--white);
    color: var(--white);
    font-size: 10px;
    height: 12px;
    width: 12px;
    position: static;
    margin: -3px -3px -8px -9px;
    top: 0;
    right: 0;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    border-radius: 50%;
    line-height: 1.1;
    padding: 0 1px;
}

    .ntf-number.plus {
        font-size: 9px;
        height: 13px;
        width: 13px;
        padding: 1px 2px;
    }

/*@media (min-width: 767.1px) and (max-width: 1159px) {
        .ntf-area {
            padding: 9px 0;
        }

        .ntf-number {
            top: 10px;
        }
    }*/

.ntf-inner li {
    list-style: none;
    padding: 8px;
    border-bottom: solid 1px  var(--gray-3);
}

.ntf-inner .one-notification {
    font-size: 1em;
    padding: 0 6px;
    background: var(--white);
    position: relative;
    overflow-x: hidden;
    border: none;
}

    .ntf-inner .one-notification .li-inner {
        border-top: solid 1px var(--gray-3);
        padding: 12px 6px 11px;
        display: block;
    }

.ntf-page .one-notification .li-inner {
    border: none;
    padding: 5px;
}

.ntf-inner li.one-notification.new-notification + li.one-notification:not(.new-notification) {
    border-top: solid 1px var(--gray-3);
}

    .ntf-inner li.one-notification.new-notification + li.one-notification:not(.new-notification) .li-inner, .ntf-inner .one-notification:first-child .li-inner {
        border-top: none;
    }



.ntf-inner .new-notification {
    background: var(--light-gray);
}




.one-notification p {
    margin: 5px 0 0;
}

.one-notification .glyphicon-new-window {
    font-size: 9px;
}

.ntf-header {
    padding: 5px 8px;
    border-bottom: solid 1px #bbb;
}

.ntf-footer {
    background: var(--light-gray);
    padding: 5px;
    border-top: solid 1px #bbb;
}

.ntf-area h2 {
    margin: 0;
    font-size: 17px;
    padding: 5px;
}

.ntf-inner.add-padding {
    padding: 10px;
}

.ntf-mobile .fa-regular {
    font-size: 30px;
}

@media (max-width: 767px) {
    .ntf-mobile {
        display: table-cell !important;
        padding: 12px 20px 9px 0;
        vertical-align: middle;
        float: none;
        text-align: right;
    }

        .ntf-mobile .icon {
            transform: scale(1.4,1.4);
            display: inline-block;
            position: relative;
            left: -10px;
            cursor: pointer;
        }

    .ntf-area ul {
        max-height: 40vh;
    }
}




.ntf-box.ntf-page {
    max-height: initial;
    position: static;
    width: initial;
    margin: 0 -10px;
}

    .ntf-box.ntf-page ul {
        padding: 0;
        margin: 0;
    }

.ntf-page .one-notification {
    margin: 0.5em 0;
    font-size: 1em;
    padding: 0.5em;    
    border: solid 1px var(--gray-3);
    border-radius: .277rem !important;
}

.ntf-page .ntf-inner {
    background: none;
    box-shadow: none;
    border: none;
    margin: 3px;
}



.ntf-page .one-notification p {
    margin: 11px 0 2px;
    font-size: 15px;
}


#right-side-menu .ntf-inner {
    color: var(--default-text);
    padding: 2px 2px 10px 10px;
    max-height: 100%;
    
}

    #right-side-menu .ntf-inner a {
        color: var(--black);
    }
        #right-side-menu .ntf-inner a.c-black:hover, #right-side-menu .ntf-inner a.c-black:focus {
            text-decoration: underline;
        }
        #right-side-menu .ntf-inner .company-badge {
            color: var(--blue-9);
            font-size:0.85em;
        }
        #right-side-menu .font-smaller{
            font-size:0.95em;
        }
        #right-side-menu .ntf-inner .headline-attribution-div,
        .latest-notifications .headline-attribution-div {
            width: 13px;
            height: 13px;
        }

    #right-side-menu .ntf-inner ul {
        padding: 0;
        max-height: calc(100vh - 480px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 0;
        font-size: 80%;
    }


    #right-side-menu .ntf-inner h2 {
        font-size: 25px;
        margin: 0;
        padding: 7px;
    }

#right-side-menu .ntf-footer, #mobilenotifications .ntf-footer {
    background: none;
    padding: 5px;
    border-top: none;
    color: var(--white);
}

    #right-side-menu .ntf-footer a, #mobilenotifications .ntf-footer a {
        color: var(--white);
    }

#right-side-menu .side-menu-title {
    margin-right: 10px;
}

.menu-close-link {
    cursor: pointer;
}

#right-side-menu .ntf-inner p.side-menu-functions {
    padding: 5px 0;
    font-size: 0.72em;
    color: rgba(255,255,255,.4);
    line-height: 1.8;
    text-align: center;
    margin-bottom: 0;
}

    #right-side-menu .ntf-inner p.side-menu-functions a {
        color: rgba(255,255,255,.4);
        font-weight: normal;
        cursor: pointer;
    }

.ntf-inner a.sbbutton {
    font-weight: normal;
}


#notificationspage span.arrow-span {
    display: none;
}


@supports (-webkit-overflow-scrolling: touch) {
    .page-wrap {
        cursor: pointer;
    }
}

/* end notifications styles */

/* start comments styles including some that also apply to portfolio page */

/* modal styles from myportfolio3 */


.modal-body {
    padding: 5px 15px 5px;
    max-height: 70vh;
    overflow-y: auto;
}

.close {
    text-shadow: none;
    font-weight: 500;
    border-radius: 0;
    opacity: 0.8;
}

button.close {
    opacity: 1;
    text-shadow: none;
}

.modal-body::-webkit-scrollbar {
    width: 12px !important;
}

.modal-body::-webkit-scrollbar-track, .ntf-box ul::-webkit-scrollbar-track, #left-side-menu ul::-webkit-scrollbar-track, #right-side-menu ul::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

.modal-body::-webkit-scrollbar-thumb, .ntf-box ul::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 7px rgba(0,0,0,0.5);
    background: #eee;
    border-radius: 12px;
}

/* can take this out once they're changed to utility classes */
.modal-title {
    color: var(--blue);
    background-color: white;
    padding: 0.3em 0.6em;
    margin: 0;
    line-height: 1.4;
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 500;
    border-top-right-radius: 0.25em;
    border-top-left-radius: 0.3em;
}

.modal-note {
    font-size: 13px;
    text-transform: none;
    letter-spacing: initial;
    font-weight: normal;
    position: relative;
    top: -1px;
    display: inline-block;
}

/* doing away with bootstrap's modal backdrop that usually ends up in the wrong place because we can't always put modals at the end of the body */
.modal-backdrop {
    z-index: -1;
}

.modal {
    background-color: rgba(0,0,0,.8);
}

.modal-content {
    border-radius: 5px;
}

.modal-content, .modal-header, .modal-footer {
    border: 0;
    max-width: 100%;
}

.modal-header {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    overflow: hidden;
}


.top-label {
    font-size: 0.83rem;
    text-transform: none;
    letter-spacing: normal;
    margin-top: 2px;
    margin-right: 0;
    margin-bottom: 2px;
    margin-left: 1px;
    font-weight: 400;
    z-index: 1;
    color: var(--gray);
}

/* for a similar look in react app */
.inset-label {
        background: white;
        font-size: 12px;
        text-transform: uppercase;
        margin: 0;
        padding: 4.5px 0 0 0;
       }  

.top-labeled-input, input[type=text].top-labeled-input, input[type=number].top-labeled-input, input[type=email].top-labeled-input, input[type=password].top-labeled-input {
    width: 100%;
    margin-bottom: 0.83rem;
}

    .top-labeled-input.hasDatepicker, input[type=text].top-labeled-input.hasDatepicker {
        width: calc(100% - 25px);
        display: inline-block;
        max-width: 7.5em;
    }


.top-labeled-mod, input[type=text].top-labeled-mod, input[type=number].top-labeled-mod {
    width: 50px;
    margin-bottom: 0.8em;
}

.top-labeled-input-with-mod, input[type=text].top-labeled-input-with-mod, input[type=number].top-labeled-input-with-mod {
    width: calc(100% - 70px);
    margin-bottom: 15px;
    line-height: 1.7em;
    padding: 0 0 0 7px;
}

/*Top Labeled Inputs in Wrapper*/
.top-label-wrapper {
    position: relative;
    width: 100%;
    display: inline-block
}

    .top-label-wrapper .top-labeled-input {
        display: block;
        width: 100%;
        padding: 12px 12px 10px;
        line-height: 1.25;
        font-size: 0.83rem;
        font-weight: 400;
        color: #5B626D;
        background-color: var(--white);
        background-clip: padding-box;
        border: 1px solid #C3CACD;
        appearance: none;
        border-radius: 5px;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        height: calc(2.22rem + 2px);
        margin: 0;
        min-width: 8.5em;
    }

    .top-label-wrapper .top-label {
        padding: 0 0.25rem;
        font-size: 0.5rem;
        position: absolute;
        top: -0.4em;
        left: 0.7em;
        margin: 0 1.5em 0 0;
        background: var(--white);
        line-height: .9;
        text-transform: uppercase;
    }

    .top-label-wrapper button.top-labeled-input {
        text-transform: none;
        text-align: left;
    }

        .top-label-wrapper button.top-labeled-input:after {
            display: none;
        }

        .top-label-wrapper button.top-labeled-input:hover,
        .top-label-wrapper button.top-labeled-input:focus {
            color: var(--default-text);
        }

        .top-labeled-input:focus-within, .top-labeled-input:focus, .top-label-wrapper button.top-labeled-input:focus {
            box-shadow: 0 0 3px var(--blue-8);
            border: 1px solid var(--blue-8);
            outline: none;
        }

    .top-label-wrapper select.top-labeled-input,
    .top-label-wrapper button.top-labeled-input {
        padding-right: 1.5em;
        background-color: var(--white);
        background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 448 512' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M241 369c-9.4 9.4-24.6 9.4-33.9 0L47 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143L367 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L241 369z'/%3E%3C/g%3E%3C/svg%3E%0A");
        background-repeat: no-repeat;
        background-position: right .5rem center;
        background-size: 8px 8px;
        outline-color: var(--blue);
    }

    .top-label-wrapper .top-labeled-input .top-label-selected div {
        margin-top: -0.07rem;
    }

    .top-label-wrapper .top-labeled-input .top-label-selected .sub-label {
        font-size: 0.6rem;
    }

    /*top labeled input with a prepended information*/
    .top-label-wrapper.input-group .top-labeled-input {
        padding-left: 1.3rem;
    }

        .top-label-wrapper.input-group .top-labeled-input.w-append.w-prepend {
            width: calc(100% - 4rem);
            border-left: none;
            margin-bottom: 0;
            min-width: auto;
        }

    .top-label-wrapper .input-group-text {
        position: absolute;
        top: 53%;
        left: 0.4rem;
        transform: translate(0,-50%);
        background: none;
        border-radius: 0;
        border: none;
        padding: 0;
        line-height: 1em;
        color: #5B626D;
        z-index: 1;
    }

    .top-label-wrapper .fa-regular,
    .top-label-wrapper .fa-kit,
    .top-label-wrapper .fa-solid {
        opacity: 1;
        font-size: 0.7rem;
    }

    .top-label-wrapper .fa-network-wired {
        font-size: 0.6rem;
    }
    /*Link looking like a top-labeled input*/
    .top-label-wrapper a.top-labeled-input {
        color: #5B626D;
        padding-right: 1.5em;
    }

        .top-label-wrapper a.top-labeled-input:hover,
        .top-label-wrapper a.top-labeled-input:focus {
            text-decoration: none;
        }

    /*Tooltip for top labeled input*/
    .top-label-wrapper .moreinfo {
        top: -0.5em;
        padding: 0;
        right: -5px;
        font-size: 1em;
        line-height: 1em;
        width: 1.2em;
        height: 1.05em;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 52;
    }

        .top-label-wrapper .moreinfo .fa-regular {
            font-size: 0.666em;
            opacity: 1;
            display: block;
            padding: 0;
            color: var(--gray-5)
        }

        .top-label-wrapper .moreinfo .tooltiptext {
            width: 220px;
            right: 0;
        }

            .top-label-wrapper .moreinfo .tooltiptext:after {
                right: 5px;
            }

    /*Top Labeled Bootstrap drop down list*/
    .top-label-wrapper .dropdown-menu {
        border-radius: 0;
        padding: 0;
        width: 100%;
    }

        .top-label-wrapper .dropdown-menu[aria-labelledby='dropdownCountry'],
        .top-label-wrapper .dropdown-menu[aria-labelledby='ddlCountry'] {
            min-width: 12rem;
        }

        .top-label-wrapper .dropdown-menu[aria-labelledby='dropdownUSStates'],
        .top-label-wrapper .dropdown-menu[aria-labelledby='ddlUSStates'] {
            min-width: 16rem;
        }

        .top-label-wrapper .dropdown-menu[aria-labelledby='dropdownSector'],
        .top-label-wrapper .dropdown-menu[aria-labelledby='ddlSector'] {
            min-width: 16rem;
        }

        .top-label-wrapper .dropdown-menu[aria-labelledby='dropdownMarketCaps'],
        .top-label-wrapper .dropdown-menu[aria-labelledby='ddlMarketCaps'] {
            min-width: 16rem;
        }

        .top-label-wrapper .dropdown-menu[aria-labelledby='dropdownTradeVolume'],
        .top-label-wrapper .dropdown-menu[aria-labelledby='ddlTradeVolume'] {
            min-width: 14rem;
        }

        .top-label-wrapper .dropdown-menu[aria-labelledby='dropdownTradeSizeUSD'],
        .top-label-wrapper .dropdown-menu[aria-labelledby='ddlTradeSizeUSD'] {
            min-width: 14rem;
        }


.drop-down-item.custom-control:focus-within {
    box-shadow: 0 0 3px var(--blue-8);
    border: 1px solid var(--blue-8);
}

.top-label-wrapper .drop-down-item {
    font-size: 90%;
    padding: 0 10px;
}

    .top-label-wrapper .drop-down-item label .sub-label {
        display: block;
        font-size: 0.7rem;
        padding-left: 1.3rem;
    }

li.drop-down-item:hover {
    background: var(--light-blue);
}

li.drop-down-item:focus {
    box-shadow: 0 0 3px var(--blue-8);
    border: 1px solid var(--blue-8);
    outline: none;
}

input.symbol-left {
    padding-left: 20px !important;
}

input.symbol-right {
    padding-right: 20px !important;
}

span.symbol-left {
    position: absolute;
    top: 9px;
    left: 7.5px;
    color: var(--gray-8);
    line-height: 1em;
}

span.symbol-right {
    position: absolute;
    right: 7.5px;
    top: 9px;
    color: var(--gray-8);
}


.on-this-page {
    font-size: .9em;
    text-transform: uppercase;
    font-weight: 600;
    display: inline-block;
    margin-right: 0;
    color: var(--gray-9);
}

.on-this-page-links {
    line-height: 1.7;
    font-size:0.95em;
}

    .on-this-page-links a {
        display: inline-block;
        line-height: 1;
        margin-left: .75em;
        padding-right: .75em;
        position: relative;
        color:var(--blue-9);
    }

        .on-this-page-links a::after {
            content: "";
            position: absolute;
            right: 0;
            top: 2%;
            height: 100%;
            width: 1px;
            background-color: var(--gray-5);
            pointer-events: none;
        }

        .on-this-page-links a:last-of-type::after {
            content: none;
        }

@media (max-width: 576px) {
    .on-this-page {
        border-bottom: 1px solid var(--gray-5);
        display: block;
        padding-bottom: 0.15em;
        margin-bottom: 0.75em;
    }

        .on-this-page span {
            display: none;
        }

        .on-this-page-links a {
            display: block;
            margin-left: 0;
            margin-bottom: .75em;
        }

            .on-this-page-links a::after {
                content: none;
            }
}

.placed-content, .link-target {
    scroll-margin-top: 70px;
}

.placed-content,.placed-content.body-copy {
    line-height: 1.35;
    font-size:1em; 
    min-height:1em; /* to give some height to empty placed content and so the edit link will always show */
}
    .placed-content.body-copy p {
        line-height:1.35;
    }

.bg-gray-across .custom-control label::before {
    background-color: var(--white);
}

.content-module {
    font-size: 1rem;
    display: inline;
    position: relative;
    z-index: 1; /* needed to be above uls it's floated near, because uls are also position:relative */
}

    .content-module:before {
        content: " ";
        display: table;
        clear: both;
    }

    .content-module .media-mentions-image {
        width: 40px;
        margin-left: 6px !important;
    }

/*Restricted Access Filter*/
.filter-access {
    position: absolute;
    top: 50%;
    right: 0.5em;
    transform: translate(0,-50%);
    border-radius: 0;
}

    .filter-access .fa-regular,
    .filter-access .fa-solid {
        font-size: 0.6em;
        line-height: 1em;
        margin-top: 0.2em;
        opacity: 1;
    }

.dropdown-menu {
    max-height: 40vh;
    overflow-y: auto;
    padding-bottom: 3px !important;
    border-radius: 5px;
}

.custom-file-input:lang(en) ~ .custom-file-label::after {
    content: "Browse";
    text-decoration: none;
    font-size: 1rem;
    line-height: 0.8;
    font-weight: 600;
    padding: 12px 24px;
    display: inline-block;
    color: var(--white);
    border-radius: 5px;
    box-shadow: none;
    border: 1px solid var(--blue-8);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .05rem;
    cursor: pointer;
    background-repeat: no-repeat;
    background: var(--blue-8);
    transition: background .5s ease-in-out, color .5s ease-in-out, border .5s ease-in-out, box-shadow .2s ease-in-out;
    vertical-align: middle;
}

.custom-file-input:lang(en) ~ .custom-file-label:hover::after, .custom-file-input:lang(en) ~ .custom-file-label:active::after, .custom-file-input:lang(en) ~ .custom-file-label:focus::after {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}
}

.modal-footer {
    text-align: center;
    margin-top: 0;
    padding: 12px 15px 8px;
    border-top: 1px solid var(--gray-4);
}

    .modal-footer .modal-button {
        width: calc(50% - 12px) !important;
        margin: 0px 2px 5px !important;
    }




/* loading button styles */

.load {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit
}

    .load::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        border: 3px solid var(--white);
        width: 30px;
        height: 30px;
        border-left: 3px solid transparent;
        border-bottom: 3px solid transparent;
        animation: btnloading 1s ease infinite;
        z-index: 10
    }

    .load::before {
        content: '';
        position: absolute;
        border-radius: 50%;
        border: 3px dashed var(--white);
        width: 30px;
        height: 30px;
        border-left: 3px solid transparent;
        border-bottom: 3px solid transparent;
        animation: btnloading 2s linear infinite;
        z-index: 5
    }

.btn:disabled .load::before, button:disabled .load::before, .btn-secondary .load::before, .btn-alternative .load::before {
    border-color: var(--blue);
}

@keyframes btnloading {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.btn.allow-loading {
    position: relative;
}

.btn.active-loading .loading {
    visibility: visible;
    opacity: 1
}

.btn .loading {
    opacity: 0;
    visibility: hidden
}

/* end pending button styles */


/* tooltip styles */
.moreinfo {
    display: inline-block;
    position: absolute;
    right: 13px;
    top: 6px;
    color: var(--white);
    padding: 2px;
    font-size: .8em;
    line-height: .8em;
    width: 1.4em;
    height: 1.4em;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}

button.moreinfo {
    background: none;
    border: none;
    letter-spacing: 0;
}

.compare-products .moreinfo {
    top: 0;
    right: 0;
    float: right;
    position: relative;
    margin-left: 2px;
    margin-bottom: 3px;
}

.comment-list .moreinfo {
    margin-right: 5px;
    color: #999;
    padding: 3px 3px 30px 100px;
    top: 6px;
    right: 24px;
}

    .comment-list .moreinfo:hover,
    .comment-list .moreinfo:focus {
        border: none;
        color: #999;
    }

.moreinfo .tooltiptext {
    visibility: hidden;
    width: 140px;
    background: var(--white);
    color: var(--default-text);
    text-align: left;
    padding: 8px 10px;
    border-radius: 5px;
    position: absolute;
    z-index: 50;
    top: calc(100% + 10px);
    right: -12px;
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 15%);
    line-height: 1.4;
    font-family: var(--font-family);
    font-size: 13px;
    cursor: default;
    font-weight: normal;
    text-transform: initial;
    letter-spacing: initial;
    white-space: normal;
    height: 0;
    overflow: hidden;
    padding: 0;
    border: solid 1px var(--gray-4);
}

    .moreinfo .tooltiptext::after {
        content: "\25B2";
        position: absolute;
        bottom: 100%;
        right: .7rem;
        margin-left: -5px;
        text-shadow: 0px -1px 0px var(--gray);
        color: white;
        line-height: .7;
    }

.moreinfo:hover .tooltiptext,
.moreinfo:focus .tooltiptext {
    visibility: visible;
    height: auto;
    overflow: visible;
    padding: 8px 10px;
    z-index: 100;
}

.tooltiptext.dark-mode {
    background: #333;
    color: var(--white);
}

.tooltiptext.toptip {
    top: auto;
    bottom: calc(100% + 10px);
    right: 0;
}

    .tooltiptext.toptip::after {
        top: 100%;
        bottom: auto;
        margin-left: auto;
        border-color: #f1f1f1 transparent transparent;
        transform: rotate(180deg);
    }
    .tooltiptext.dark-mode::after {
        color: #333;
        border-color:#333
    }

.tooltiptext.dark-mode::after {
    border-color: transparent transparent #333 transparent;
}

.tooltiptext.toptip.dark-mode::after {
    border-color: #333 transparent transparent;
}

.compare-products .moreinfo .tooltiptext {
    right: -40px;
}

    .compare-products .moreinfo .tooltiptext::after {
        right: 40px;
    }

/* for manage account page */



.stripe-button-el span {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 1em !important;
    line-height: 1em !important;
    min-height: 1em !important;
    height: auto !important;
}

    .stripe-button-el span:hover,
    .stripe-button-el span:focus {
        background: none !important;
    }

.stripe-button-el {
    text-decoration: none !important;
    font-size: .83rem !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    padding: 12px !important;
    vertical-align: top !important;
    display: inline-block !important;
    color: var(--white) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    border: solid 1px var(--blue-8) !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: .03rem !important;
    cursor: pointer !important;
    background-repeat: no-repeat !important;
    background: var(--blue-8) !important;
    transition: all 0.15s ease-in-out !important;
}

    .stripe-button-el:hover,
    .stripe-button-el:focus {
        border: solid 1px var(--blue) !important;
        background: var(--blue) !important;
        color: var(--white) !important;
        text-decoration: none !important;
    }

.account-options .moreinfo {
    color: var(--blue);
    border: solid 2px var(--blue);
    font-weight: 600;
    top: 5px;
    right: 0;
    cursor: pointer;
    font-size: .7em;
}

.option-line {
    position: relative;
    padding-right: 22px;
}

@media (min-width:500px) {
    .account-options .moreinfo {
        position: relative;
        top: -2px;
        right: 0;
    }

    .option-line {
        padding-right: 0;
    }
}

/* slide down tooltip styles */

.explanation {
    opacity: 0;
    max-height: 0;
    display: inline-block;
    transition: max-height .8s, opacity .8s, padding .8s;
    font-size: 16px;
    vertical-align: top;
    margin-bottom: 6px;
    overflow: hidden;
    padding: 0 0;
}

    .explanation.hovered, .explanation.clicked {
        max-height: 223px;
        opacity: 1;
        padding: 8px 0;
    }

.question-mark {
    display: inline-block;
    position: absolute;
    right: 6px;
    bottom: 0px;
    margin: 0;
    color: #444;
    border: solid 2px #444;
    font-size: .75em;
    font-family: var(--font-family);
    line-height: .9em;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    text-align: center;
    font-weight: 600;
    vertical-align: top;
    cursor: pointer;
}

/* end slide down tooltip styles */

/* extend access popup */
a.extend-access-button:hover,
a.extend-access-button:focus {
    background: #ffc23d !important;
}

@media (max-width: 400px) {
    .extend-access-mockup {
        margin: -16px 11px -74px 9px !important
    }

    .extend-access-headline {
        font-size: 24px !important;
    }

    a.extend-access-button {
        font-size: 21px !important;
    }
}
/* end extend access popup */

/* styles for fullscreen mode on screeners and My MarketBeat */


#featureBox.fullscreen {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    bottom: 0;
    overflow-y: scroll;
    height: 100vh;
    background: var(--white);
}

        .fullscreen .scroll-table thead, .fullscreen .scroll-with-table-header.sticky {
            top: 0 !important;
        }

        .page-wrap.has-fullscreen {
            height: 100%;
            overflow: hidden;
            position: fixed;
        }

        .fullscreen-opener .fa-arrow-up-right-from-square {
            transition: transform .6s;
            transform-origin: 59% 41%;
        }

        .fullscreen-opener.is-fullscreen .fa-arrow-up-right-from-square {
            transform: scale(-1);
        }

          .fullscreen .scroll-with-table-header.position-sticky {
            top: -3.7em;
            z-index: 100;
            position: relative;
        }

           @media (max-width: 1199.9px) {
            #featureBox {
                margin: 0 -1em;
            }
            #featureBox.fullscreen {
                margin: 0;
            }
        }

/* end styles for fullscreen mode on screeners and My MarketBeat */

/* additional style for screeners */

#pan5 input.flat-blue-ghost-button {
    width: calc(100% - 43px);
    margin-bottom: 10px;
    white-space: normal;
    word-wrap: break-word;
    height: 64px;
}

    #pan5 input.flat-blue-ghost-button.active-screener {
        background-color: var(--light-gray);
    }

#pan5 .settings-button {
    cursor: pointer;
    display: inline-block;
    vertical-align: top;
}

    #pan5 .settings-button img {
        padding: 20px 5px;
        width: 34px;
    }

.boldsymbol {
    font-size: 17px;
    margin-right: 5px;
}

.sparkline {
    width: 70px;
    vertical-align: bottom;
}

@media (max-width: 825px) {
    .sparkline {
        width: 52px;
    }
}

@media (max-width: 575px) {
    .sparkline {
        width: 39px;
    }
}


.pagination {
    clear: both;
    padding-top: 20px;
    line-height: 1.5;
}

    .pagination a {
        margin: 2px 4px 2px 0;
        padding: 2px 10px 4px 10px;
        display: inline-block;
        border: solid 1px var(--gray-3);
        border-radius: .277rem !important;
        text-decoration: none;
        min-width: 32px;
        text-align:center;
    }

@media (max-width: 575.98px) {

    .pagination a {
        display: none;
    }
        .pagination a:nth-child(1), /* First link */
        .pagination a:nth-child(2), /* Second link */
        .pagination a:nth-last-child(2), /* Second-to-last link */
        .pagination a:nth-last-child(1) { /* Last link */
        display: inline-block;
        padding-bottom: 7px;
    }
}

        .pagination a.current-page {
            background: var(--blue-8);
            color: var(--white);
            border: solid 1px var(--blue-8);
        }

            .pagination a.current-page:hover, .pagination a.current-page:focus {
                color: var(--white);
            }

            .pagination a:hover, .pagination a:focus, .pagination a:active, .pagination a:visited {
                opacity: .8;
                text-decoration: none;
            }


@media (min-width: 1200px) {
    .headlines-panel.col-lg-8 {
        width: calc(100% - 348px);
        padding-left: 0;
    }
}


.entry-card {
    border: 1px solid var(--gray-4);
    border-radius: 0.25em;
    background: var(--white);
    padding: 1rem;
    margin: .5rem 0 !important;
    transition: all 300ms ease-in-out;
}

    .entry-card.hover-card:hover, .entry-card.hover-card:focus-within {
        transform: scale(1.05);
        box-shadow: none;
        background: var(--light-gray);
    }

    .entry-card.hover-card:focus-within {
        outline: var(--blue) dashed 1px;
        outline-offset: 2px;
    }

        .entry-card.hover-card:hover .title, .entry-card.hover-card:focus-within .title {
            text-decoration: underline;
        }

    .entry-card .image-link {
        border-radius: 0.25rem;
        border: 1px solid var(--gray-3);
        margin: 0;
        flex: 0 0 105px;
        aspect-ratio: 21/17;
        overflow: hidden;
    }

        .entry-card .image-link img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

    .entry-card .title {
        line-height: 1.2;
    }

    .entry-card .description {
        flex: 1 1 150px;
    }

    .entry-card .post-time {
        text-transform: uppercase;
        font-weight: 500;
        margin: 2px 0;
        line-height: 1.2;
    }

    .entry-card p {
        font-weight: normal;
        margin-bottom: 3px;
    }


/* headline-row (similar to entry card) */
.headline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    margin: 0 -.5em .5em;
    position: relative;
}

.headline-image-div {
    border-radius: 0.25rem;
    margin: 0;
    -ms-flex: 0 0 105px;
    flex: 0 0 105px;
    aspect-ratio: 21 / 17;
    overflow: hidden;
    margin: 0 .5em .5em .5em;
}

    .headline-image-div img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

        .headline-image-div img.icon-image {
            mix-blend-mode: multiply;
            padding: .7em;
            object-fit: contain;
            border: solid 1px var(--gray-3);
            border-radius: 5px;
            background: var(--light-gray);
        }


.headline-description-div {
    -ms-flex: 40 0 200px;
    flex: 40 0 200px;
    margin: 0 .5em .5em .5em;
}

.headline-attribution-div {
    display: inline-flex;
    vertical-align: text-bottom;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid var(--gray-3);
    margin-left: 10px;
    overflow: hidden;
    font-size: 0.77em;
    font-weight: 500;
    background: var(--light-gray);
    justify-content: center;
    align-items: center;
    line-height: 1em;
}




/*pricing cards*/
.pricing-card {
    font-size: 0.8em;
    transition: all 0.3s ease-in-out;
}

    .pricing-card.active, .pricing-card:hover,
    .pricing-card:focus-within {
        transform: scale(1.03);
    }

.product-icon {
    font-size: 2.5em;
    margin-top: 0.25em;
}

.product-flag {
    right: 0;
    top: 25px;
    font-size: 1.15em;
    line-height: 0.9em;
}

.product-price {
    font-size: 312.5%;
}

    .product-price span {
        font-size: inherit !important;
        line-height: 1em;
    }

    .product-price .text-uppercase {
        font-size: 50% !important;
    }

/*end pricing cards*/



/* my marketbeat styles*/

#cphPrimaryContent_rdlAdStocks {
    display: inline-block;
    margin-bottom: -.2em;
}

.add-label {
    position: relative;
    top: -5px;
}

.watch-list-forms {
    width: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

    .watch-list-forms > div {
        width: 48%;
        min-width: 405px;
        background: #efefef;
        border-top: solid 2px #ddd;
        border-bottom: solid 2px #ddd;
        padding: 12px 2% 20px 2%;
        margin: 5px;
    }

    .watch-list-forms input {
        border: solid 1px  var(--gray-3);
        border-radius: .375em;
    }

.left-label {
    display: inline-block;
    min-width: 132px;
    text-align: right;
    font-weight: 600;
}

.watch-list-forms input[type=submit] {
    position: relative;
    left: 136px;
    width: 150px;
    padding: 5px;
    margin: 5px 0;
    color: white;
    font-weight: 600;
    font-size: 14px;
    background-color: #6DA0BD;
    background-image: linear-gradient(to bottom, #6DA0BD, #123C62);
    border: none;
}

.wl-submit:hover,
.wl-submit:focus {
    cursor: pointer;
    background-color: #5286B3;
    background-image: linear-gradient(to bottom, #5286B3, #0a2237);
}

.watchlist-select {
    font-weight: 600;
    padding: 4.5px;
}

.addbuttons {
    text-align: right;
    margin: 1px 0 12px;
}

    .addbuttons .addbutton {
        line-height: 1;
    }

@media (max-width: 767px) {
    .addbuttons, .watchlist-div {
        width: 100%;
        right: 0;
        left: 0;
    }

    .addbuttons {
        text-align: left;
        margin-top: 0;
    }

    a.btn-add-holding, a.btn-add-multiple-assets, a.btn-create-watchlist {
        width: 100%;
        margin: 3px 0;
    }

    .sample-notice {
        padding: 2px 6px 22px !important;
    }
}


/* icons on buttons */
a.gray-button, a.gray-button:hover, a.gray-button:focus, input.gray-button, input.gray-button:hover, input.gray-button:focus {
    background-color: var(--gray-8);
    background: var(--gray-8);
    line-height: 1.5;
    background-repeat: no-repeat;
    color: var(--white);
    margin: 5px 1px 2px;
    display: inline-block;
    border-radius: 3px;
    text-decoration: none;
    cursor: default;
    pointer-events: none;
    font-size: 17px;
    padding: 3px 5px 4px;
    box-shadow: none;
    text-shadow: none;
    border: solid 2px var(--gray-8);
    border-radius: 0;
    text-transform: none;
    vertical-align: middle;
}


.inline-always-moreinfo.moreinfo, inline-always-moreinfo.moreinfo:hover, inline-always-moreinfo.moreinfo:focus,
.inline-moreinfo.moreinfo, .inline-moreinfo.moreinfo:hover, .inline-moreinfo.moreinfo:focus {
    color: var(--blue);
    border-color: var(--blue);
    display: inline-block;
    vertical-align: top;
    position: relative;
    font-size: .7em;
    top: 2px;
    right: 0; /* puts it at the right if position-absolute class is added*/
}

    .inline-moreinfo.moreinfo .tooltiptext {
        line-height: 1.4;
    }


@media (max-width: 450px) {
    .inline-moreinfo.moreinfo, .inline-moreinfo.moreinfo:hover, .inline-moreinfo.moreinfo:focus {
        position: absolute;
        right: -3px;
        top: 10px;
        left: initial;
    }
}

/* Remove spinners - Chrome, Safari, Edge, Opera */
input.no-spin::-webkit-outer-spin-button,
input.no-spin::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Remove spinners - Firefox */
input.no-spin[type=number] {
    -moz-appearance: textfield;
}

#selectedAsset {
    min-height: 60px;
}


.rfv-div-validation-triangle {
    color: var(--red);
    position: relative;
    transition: height ease-in-out 1s;
    text-align: right;
    top: -11px;
    line-height: 26px;
    font-size: 15px;
}

    .rfv-div-validation-triangle > span:before {
        content: '';
        background: var(--white);
        background-image: url(/images/validation-triangle.svg?v3);
        background-size: 22px 22px;
        top: -17px;
        right: 9px;
        position: absolute;
        height: 22px;
        width: 22px;
    }


#cphPrimaryContent_chosenAssets label, #chosenAssets label {
    position: relative;
    background: var(--light-gray);
    padding: 5px 35px 6px 11px;
    display: block;
    margin-bottom: 15px;
}

.removeAsset {
    position: absolute;
    right: 10px;
    top: -1px;
    cursor: pointer;
    color: #81a4b5;
    font-size: 26px;
    text-decoration: none;
}

    .removeAsset:hover, .removeAsset:active, .removeAsset:focus {
        text-decoration: none;
    }

#cphPrimaryContent_chosenAssets input[type="checkbox"], #chosenAssets input[type="checkbox"] {
    display: none;
}

.multiple-checks > div {
    display: inline-block;
    margin-bottom: 3px;
    margin-top: 2px;
}


/* end icons on buttons */

.panels h2 {
    font-size: 1.5rem;
    margin: .2em 0;
}


.placeholder {
    display: none;
}



#cphPrimaryContent_btnShow4 {
    display: none;
}

#cphPrimaryContent_btnShow5 {
    display: none;
}

#pnlOnboarding > div {
    z-index: 40;
}

.circle-outline {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid var(--black);
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.3em;
    margin-top: -.3em;
}

.statistics {
    max-width: 100%;
}

    .statistics > div {
        border: solid 1px  var(--gray-3);
        border-top: none;
        margin: 0 0 15px 0;
        max-width: 100%;
    }

    .statistics h3 {
        padding: 8px 40px 8px 8px;
        text-align: left;
        font-size: 1em;
        position: relative;
        margin-bottom: 0px;
        margin-top: 0px;
    }

@media screen and (min-width: 1000px) {
    .distribution, .myportfolio {
        display: inline-block;
        vertical-align: top;
    }

    .distribution {
        width: calc(56% - 11px);
        margin-right: 10px !important;
    }

    .myportfolio {
        width: calc(45% - 17px);
    }
}

.statistics canvas {
    margin-top: 15px;
}


.stat {
    padding: 10px 15px;
}


#volatilelist {
    margin: 0 0 10px 0;
    padding: 0;
}

    #volatilelist li {
        margin-left: 30px;
        margin-bottom: 0;
    }

.large {
    font-size: 1.7em;
}


.meter {
    margin: 35px 35px 60px 35px;
}

    .meter > div {
        background: var(--blue-7);
        background: linear-gradient(to right,var(--blue-7) 0%,var(--blue) 100%);
        position: relative;
        height: 55px;
        width: 100%
    }


.meter-green-red > div {
    background: var(--dv-hc-4);
    background: linear-gradient(to right,var(--dv-hc-2) 0%, var(--dv-hc-4) 50%, var(--dv-hc-6) 100%);
}

.meter-red-green > div {
    background: var(--dv-hc-4);
    background: linear-gradient(to left,var(--green) 0%, var(--gold) 50%, var(--red) 100%);
}

.meter-gold > div {
    background: linear-gradient(to right,var(--gold) 0%,var(--dark-gold) 100%);
}

.meter-green > div {
    background: linear-gradient(to right,var(--dv-hc-3) 0%,var(--dv-hc-1) 100%);
}

.meter-red > div {
    background: linear-gradient(to right,var(--dv-hc-5) 0%,var(--dv-hc-7) 100%);
}

.meter-red-green-blocks-five > div {
    background: var(--dv-hc-4);
    background: linear-gradient(to right, var(--dv-hc-7) 0%, var(--dv-hc-7) 15%, var(--dv-hc-6) 15%, var(--dv-hc-6) 38%, var(--dv-hc-4) 38%, var(--dv-hc-4) 61%, var(--dv-hc-2) 61%, var(--dv-hc-2) 85%, var(--dv-hc-1) 85%, var(--dv-hc-1) 100%);
}

#mrmarker, #armarker, #mpemarker, #apemarker, #mmcmarker, #amcmarker, #mfemarker, #afemarker, .stat-slider-marker {
    padding: 0;
    text-align: center;
    font-size: 13px;
    line-height: 13px;
    width: 200px;
    margin-left: -100px;
    color: var(--black);
}

.mn, .stat-slider-number {
    color: var(--white);
    font-weight: 600;
}

#mpemarker, #mmcmarker {
    position: absolute;
    top: -18px;
}

#mrmarker, #mfemarker, .stat-slider-marker.top-stat-marker {
    position: absolute;
    top: initial;
    bottom: 16px;
}

#armarker, #apemarker, #amcmarker, #afemarker, .stat-slider-marker.bottom-stat-marker {
    position: absolute;
    bottom: -50px;
}

#mrmarker {
    left: 30%;
}

#armarker {
    left: 60%
}

#mpemarker {
    left: 40%;
}

#apemarker {
    left: 50%;
}

#mmcmarker {
    left: 40%;
}

#amcmarker {
    left: 50%;
}


.canvas-wrap, .chart-legend {
    display: inline-block !important;
    max-width: 255px;
    vertical-align: top;
    margin-left: 12px;
}

@media screen and (max-width: 350px) {
    .canvas-wrap {
        max-width: 100%;
        margin-left: 0px;
    }
}

.chart-legend ul {
    list-style: none;
    margin: 20px;
}

.chart-legend li {
    font-size: .8em;
    margin-bottom: 0;
}

    .chart-legend li span {
        display: inline-block;
        width: 20px;
        height: 12px;
        margin-right: 5px;
        margin-bottom: -1px;
        margin-left: -25px;
    }

.distribution {
    max-width: 400px;
}

/*.statistics tr {
        color: #1d2b3a !important;
    }

    .statistics thead tr {
        background: var(--white) !important;
    }

    .statistics th {
        height: 46px;
        vertical-align: bottom;
    }*/

.wltable {
    font-size: .95em;
}



#dvNewsletter a {
    font-weight: normal;
}


/* makes full length tfoot always show. unlike other rows in datables js, tfoot uses normal colspan properties and doesnt need to have the same number of cells, and it doesn't do expanding like other rows */
.footer-cell {
    display: table-cell !important;
}



span.aspNetDisabled {
    position: relative;
}

    span.aspNetDisabled input#cphPrimaryContent_chkSMS:hover:after, span.aspNetDisabled input#cphPrimaryContent_chkSMSAlertsEdit:hover:after, span.aspNetDisabled input#cphPrimaryContent_chkSMSMultiple:hover:after,
    span.aspNetDisabled input#cphPrimaryContent_chkIncludeNewsletterMultiple:hover:after, span.aspNetDisabled input#cphPrimaryContent_chkIncludeNewsletter:hover:after, span.aspNetDisabled input#cphPrimaryContent_chkNewsletterEdit:hover:after,
    span.aspNetDisabled input#cphPrimaryContent_chkSMS:focus:after, span.aspNetDisabled input#cphPrimaryContent_chkSMSAlertsEdit:focus:after, span.aspNetDisabled input#cphPrimaryContent_chkSMSMultiple:focus:after,
    span.aspNetDisabled input#cphPrimaryContent_chkIncludeNewsletterMultiple:focus:after, span.aspNetDisabled input#cphPrimaryContent_chkIncludeNewsletter:focus:after, span.aspNetDisabled input#cphPrimaryContent_chkNewsletterEdit:focus:after {
        content: "Enter your cell phone number in your account settings to enable SMS.";
        display: block;
        font-size: 14px;
        position: absolute;
        background: var(--light-gray);
        color: #232425;
        width: 185px;
        z-index: 2;
        bottom: 28px;
        padding: 9px 12px 9px;
        border-radius: 4px;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    }

    span.aspNetDisabled input#cphPrimaryContent_chkIncludeNewsletterMultiple:hover:after, span.aspNetDisabled input#cphPrimaryContent_chkIncludeNewsletter:hover:after, span.aspNetDisabled input#cphPrimaryContent_chkNewsletter:hover:after,
    span.aspNetDisabled input#cphPrimaryContent_chkIncludeNewsletterMultiple:focus:after, span.aspNetDisabled input#cphPrimaryContent_chkIncludeNewsletter:focus:after, span.aspNetDisabled input#cphPrimaryContent_chkNewsletter:focus:after {
        content: "Upgrade to MarketBeat All Access to further customize your newsletter.";
    }

    span.aspNetDisabled label {
        pointer-events: none;
        color: #999;
    }

label {
    cursor: pointer;
}

.ui-autocomplete {
    overflow-y: auto;
    max-height: 350px;
}

.cat-search.ui-autocomplete {
    max-height: 65vh;
}

@media (min-width: 600px) {
    .cat-search.ui-autocomplete {
        max-height: 75vh;
    }
}

@media (max-width: 1088px) {
    .ui-autocomplete {
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {

    .search-company-name .sparkline {
        display: none;
    }
}

.watchlist-title {
    font-size: 19px;
    margin: 5px 4px;
    max-width: calc(100% - 75px);
}


.settings-button .fa-regular {
    font-size: 1.25em;
    font-weight: 400;
}

.settings-button {
    cursor: pointer;
    padding: 0 1.65px;
}

    .settings-button.pending {
        cursor: wait;
    }

.latest-notifications {
    position: absolute;
    display: none;
    top: -10px;
    right: 106px;
    padding-right: 22px;
    z-index: 55;
    width: 338px;
    text-align: left;
    cursor: default;
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
}

@media (max-width: 650px) {
    .latest-notifications {
        top: 37px;
        right: -16px;
    }
}

.shownotifications.hovered .latest-notifications,
.shownotifications:focus-within:not(.hovered) .latest-notifications {
    display: block;
}

.shownotifications:not(.hovered) .latest-notifications {
    display: none;
}

.shownotifications.pending {
    opacity: 0;
    transition: opacity .5s
}


.shownotifications {
    display: inline-block;
    opacity: 1;
    transition: opacity .5s;
    margin: 0;
}


.latest-notifications > div {
    box-shadow: 0px 2px 8px 0px #00000047;
    border: 1px solid #dee2e6 !important;
    background: var(--white);
}



.latest-notifications .ntf-header {
    color: var(--white);
    margin: 0 -1px;
}


.latest-notifications .one-notification p {
    padding: 0;
    margin: 0 0 5px 0;
}




.latest-notifications ul {
    padding: 0;
    font-size:80%;
}
.latest-notifications .font-smaller {
    font-size: 0.95em;
}

.latest-notifications .new-notification {
    background: var(--light-gray);
}

.latest-notifications .ntf-footer {
    text-align: center;
}






.latest-notifications .one-notification {
    padding: 0 6px !important;
    border-top: none;
}

.latest-notifications .li-inner {
    border-top: solid 1px #e6e6e6;
    padding: 11px 6px 4px;
    display: inline-block;
}


li.one-notification.new-notification + li.one-notification:not(.new-notification) {
    border-top: solid 1px #e6e6e6;
}

    li.one-notification.new-notification + li.one-notification:not(.new-notification) .li-inner {
        border-top: none;
    }



.latest-notifications ul::-webkit-scrollbar {
    width: 14px;
}

.latest-notifications ul::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
    -webkit-border-radius: 14px;
    border-radius: 14px;
}

.latest-notifications ul::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 7px rgba(0,0,0,0.5);
    background: #eee;
    border-radius: 14px;
}

tr.child .shownotifications {
    display: none;
}

.mobile-notifications {
    display: none;
}

.dtr-data .settings-button {
    padding: 0 5px;
}

.dtr-data .mobile-notifications {
    width: 39px;
    position: relative;
    display: block;
}

.mobile-notifications .start-bell:active:after {
    content: " loading...";
    position: absolute;
    top: 4px;
    left: 29px;
    font-family: var(--font-family);
    font-size: 12px;
}

.mobile-notifications ul {
    overflow-y: hidden;
}

/* end my marketbeat styles */


/* end additional styles for screeners */


/* start chart styles */

.dv-chart, .dv-chart .axis text {
    font-size: 16px;
    font-family: var(--font-family);
    font-variant-numeric: tabular-nums;
}

.bold {
    font-weight: 600;
}

/*template styles*/
.dv-chart-wrapper {
    max-width: 1336px;
    margin: 0 0 20px 0;
}

.dv-chart {
    margin: 0 5px;
}

#priceChart.dv-chart {
    margin: 0;
}

/*chart styles*/
.dv-chart .y.axis line {
    fill: none;
    stroke: var(--gray-3);
    opacity: .2;
    shape-rendering: crispEdges;
    stroke-width: 1.5px;
}

.dv-chart .x.axis line {
    fill: none;
    stroke: none;
    shape-rendering: crispEdges;
    stroke-width: 8px;
}

.dv-chart .tick.g-baseline line {
    stroke: #000;
    stroke-width: 2px;
    opacity: .5;
}

.dv-chart .axis text, .legend-top, .footnote-top {
    font-family: var(--font-family);
    font-weight: 400;
    pointer-events: none;
    fill: var(--gray-9);
}

.dv-chart .axis.quarter-labels text {
    fill: var(--gray-9);
}

.dv-chart text.year-label, .dv-chart .year-labels text {
    font-weight: normal;
}

.dv-chart .y.axis text {
    text-anchor: end !important;
    fill: var(--gray-8);
}

.dv-chart .footnote {
    font-weight: normal;
    font-style: italic;
    pointer-events: none;
    fill: var(--gray-9);
}

.dv-chart .domain {
    display: none;
}

.dv-chart .area {
    fill: var(--gray-2);
    opacity: 1;
}

.dv-chart .invisible-line {
    stroke: none;
    stroke-width: 0;
    fill: none;
}

.dv-chart .light-line {
    stroke: #75a0bb;
    stroke-width: 1.5px;
    fill: none;
    opacity: .3;
}

.dv-chart .medium-line {
    stroke: #75a0bb;
    stroke-width: 2px;
    fill: none;
    opacity: .7;
}


.dv-chart .dark-line {
    stroke-width: 3px;
    fill: none;
    stroke: var(--blue);
}

.dv-chart .x.axis.year-lines .tick line, .dv-chart .x.axis.year-lines .tick line {
    fill: var(--gray-9);
    stroke: var(--gray-9);
}

.dv-chart .bar.past {
    fill: var(--blue);
    fill: url(#pastBarGradient);
}

#dividendChart .bar.past {
    fill: url(#dividendChartpastBarGradient);
}

.dv-chart .bar.future {
    fill: var(--gray-9);
    fill: url(#futureBarGradient);
}

#dividendChart .bar.future {
    fill: url(#dividendChartfutureBarGradient);
}

.dv-chart .amount-bought {
    fill: var(--dv-hc-1);
    fill: url(#boughtGradient);
}

.dv-chart .amount-sold {
    fill: var(--dv-hc-7);
    fill: url(#soldGradient);
}

.dv-chart .amount-bought-bottom {
    fill: var(--dv-hc-1);
}

.dv-chart .amount-sold-bottom {
    fill: var(--dv-hc-7);
}

.dv-chart .x.axis text {
    text-anchor: middle;
}

#priceChart .x.axis text {
    text-anchor: end;
}

#priceChart .axis text, #priceChart .infoSlider-text, #priceChart .infoSlider-price {
    font-family: var(--font-family-alternative);
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 500;
    fill: var(--black);
    transition: opacity .1s;
}

.dv-chart .axis.quarter-labels text.past, .dv-chart .axis.year-labels text.past {
    fill: var(--blue);
}

.dv-chart .year-labels text {
    font-weight: normal;
}

.dv-chart .x.axis.year-lines .tick line.past, .dv-chart .x.axis.year-lines .tick line.past {
    stroke: var(--blue);
}

.dv-chart .blue-point {
    fill: var(--blue);
}

.dv-chart .overlay {
    fill: none;
    pointer-events: all;
}

/*.dv-chart .info-slider, .dv-chart .info-slider-top, .dv-chart .shadowGroup, .dv-chart .mainGroup, .dv-chart .overGroup, .dv-chart .bottomGroup, .dv-chart .clip rect, .dv-chart .fade-edges rect {
    transition: transform .15s ease;
}*/

.dv-chart .info-slider, .dv-chart .info-slider-top {
    transition: transform .15s ease;
}

    .dv-chart .info-slider circle, .dv-chart .info-slider-top circle {
        transition: cy .15s ease;
    }

    .dv-chart .info-slider circle, .dv-chart .info-slider-top circle {
        stroke: var(--white);
        stroke-width: 2px;
    }


    .dv-chart .info-slider line {
        stroke-width: .5px;
    }

    .dv-chart .info-slider text {
        font-weight: 500;
    }

.dv-chart .hover-line {
    stroke: #ccc;
    stroke-width: 2px;
    stroke-dasharray: 1,25,2000;
}
/*
.dv-chart .info-slider-rect-shadow {
    fill: #ccc;
    opacity: .5;
}*/

.dv-chart .info-slider-rect {
    fill: var(--white);
    stroke: var(--gray-3);
    opacity: .9;
}

.dv-chart .info-slider-text {
    fill: var(--blue);
    font-weight: 600;
}

.dv-chart .info-slider-note-text {
    fill: var(--blue);
    font-size: 10px;
    text-transform: uppercase;
}

.dv-chart .info-slider-bought-text {
    fill: var(--dv-hc-1);
    font-weight: 600;
}

.dv-chart .info-slider-sold-text {
    fill: var(--dv-hc-6);
    font-weight: 600;
}

.dv-chart .info-slider-bar {
    transition: all .15s ease;
}

.dv-chart tspan.tspan1 {
    font-size: .6em;
}

/*.dv-chart g.y.axis.top line {
    stroke: none;
}*/

.pie-text {
    font-size: .7em;
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 19%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 0));
    cursor: pointer;
}

.pie-slice {
    stroke: var(--white);
    cursor: pointer;
}

.pie-tip {
    margin: -7px 0 -11px 0;
    display: block;
    height: 30px;
}

.dv-chart .needle {
    -webkit-filter: drop-shadow( -2px -2px 1px rgba(0, 0, 0, .7));
    filter: drop-shadow( -2px -2px 1px rgba(0, 0, 0, .7));
    fill: #B4B4B4;
    transform-origin: 0 0;
}

.dv-chart .rating-chart-color1 {
    fill: var(--dv-hc-7);
}

.dv-chart .rating-chart-color2 {
    fill: var(--dv-hc-6);
}

.dv-chart .rating-chart-color3 {
    fill: var(--dv-hc-5);
}

.dv-chart .rating-chart-color4 {
    fill: var(--dv-hc-4);
}

.dv-chart .rating-chart-color5 {
    fill: var(--dv-hc-3);
}

.dv-chart .rating-chart-color6 {
    fill: var(--dv-hc-2);
}

.dv-chart .rating-chart-color7 {
    fill: var(--dv-hc-1);
}

.dv-chart .etf-rating-chart-color1 {
    fill: var(--red);
}

.dv-chart .etf-rating-chart-color2 {
    fill: #9D2A2D;
}

.dv-chart .etf-rating-chart-color3 {
    fill: #741F25;
}

.dv-chart .etf-rating-chart-color4 {
    fill: var(--gray-9);
}

.dv-chart .etf-rating-chart-color5 {
    fill: var(--dark-blue);
}

.dv-chart .etf-rating-chart-color6 {
    fill: var(--blue-11);
}

.dv-chart .etf-rating-chart-color7 {
    fill: var(--blue);
}


.dv-chart .strong-buy-ratings {
    fill: #11A65A; /* green between green-9 and green */
}

.dv-chart .strong-buy-ratings-text {
    fill: var(--dark-green);
}

.dv-chart .buy-ratings {
    fill: #70C599; /* lighter green */
}

.dv-chart .buy-ratings-text {
    fill: var(--green);
}

.dv-chart .hold-ratings {
    fill: var(--gold-3);
}

.dv-chart .hold-ratings-text {
    fill: var(--dark-gold);
}

.dv-chart .sell-ratings {
    fill: var(--red-4);
}

.dv-chart .sell-ratings-text {
    fill: var(--red);
}

.dv-chart.loading-message {
    position: relative;
}

    .dv-chart.loading-message:before {
        content: 'Loading chart…';
        font-family: var(--font-family-alternative);
        text-align: center;
        background: radial-gradient(transparent, #eee);
        padding: 5px;
        color: #333;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 95%;
        opacity: .6;
        display: flex;
        vertical-align: bottom;
        align-items: center;
        justify-content: center;
    }

    .dv-chart.loading-message.unavailable-message:before {
        content: 'No chart available.';
    }

.insight-point {
    fill: var(--black);
}



#priceChartInsights {
    top: 0;
    left: 0;
    z-index: 1;
    font-size: .9em;
    width: 275px;
    padding-top: 14px;
}

#priceChartInsightsInner {
    max-height: 400px;
    overflow-y: auto;
}

@media (max-width: 748px) {
    #priceChartInsights {
        top: calc(100% - 50px) !important;
        left: 0 !important;
        width: 100% !important;
        padding-top: 0px !important;
    }

    #priceChartInsightsInner {
        max-height: initial;
    }
}




/* end chart styles */



/* compare products styles */
#header-bar {
    height: 47px;
    padding-top: 7px;
    position: relative;
    margin-bottom: 20px;
    background-color: #1a1a1a;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
}
/* table styles */

.product-name {
    font-size: 1.2em;
    font-weight: normal;
    line-height: 1.2;
}

.product-price span {
    font-size: 27px;
}

.product-price sup {
    top: -1.1em;
    font-size: 40%;
}

.button {
    display: block !important;
    width: 120px;
    margin: 5px auto !important;
    font-size: 18px !important;
}

/* special rows */

.heading-row {
    background: var(--light-blue) !important;
    font-size: 1.2em;
    color: #222;
}

    .heading-row td {
        border-top: solid 1.5px var(--blue);
    }

.subheading-row {
    color: var(--blue);
    font-size: 1.05em;
    background-color: var(--white) !important;
    font-weight: 600;
}


/* end compare products styles */

/* onboarding */

#pnlHelpers.collapse:not(.show) {
    bottom: -25px !important;
}

/* results (search and autocomplete) */


.result-set {
    box-shadow: 0 .2rem .85rem rgba(0,0,0,.11);
    margin-bottom: 1.5em;
}

.result {
    border-top: solid 6px var(--light-gray);
    padding: .4em .75em;
}


.result-title {
    font-size: 1.3em;
    margin: .25em 0;
    display: block;
}

.result-number {
    color: var(--light-gray);
    background: #777786;
    padding: 1px 4px 2px;
    border-radius: 2px;
}

.byline {
    text-transform: uppercase;
    font-weight: 600;
    font-size: .8em;
    margin-bottom: 7px;
    color: var(--gray-9);
}


.result .flex-section {
    margin: 0 -10px;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.result .image-link {
    margin: 5px 10px 10px;
    padding-top: 4px;
    flex: 1 0 190px;
    -ms-flex: 1 0 190px;
}

.result .description {
    flex: 50 1 250px;
    -ms-flex: 50 1 250px;
    margin: 5px 10px 10px;
}


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

    .checkmark-list li {
        margin-bottom: .7em;
        padding-left: 1.6em;
        position: relative;
    }

        .checkmark-list li::before {
            position: absolute;
            top: 2px;
            left: 0;
            content: "\f058";
            font-family: var(--fa-style-family);
            color: #ffffff80;
        }

    .checkmark-list.checkmark-list-blue li::before, .checkmark-list.checkmark-list-blue-5 li::before {
        color: var(--blue-5);
    }

.feature-list {
    list-style-type: none;
}

    .feature-list li {
        padding-left: 2em;
        text-indent: -1.7em;
        margin-bottom: 10px;
    }

        .feature-list li::before {
            content: "\f00c";
            font-family: var(--fa-style-family) !important;
            speak: none;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            font-size: 1em;
            padding: 0 10px 0 0;
        }

/* for hello bar countdown */
.countdown-timer ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 186px;
    min-width: 186px;
}

.countdown-timer li {
    display: inline-block;
    font-size: 0.6em;
    list-style: none;
    padding: 0.25em 0.5em;
    text-transform: uppercase;
    font-weight: 600;
}

    .countdown-timer li span {
        display: block;
        font-size: 1.4em;
    }


.facebook-login-button {
    /* display: none !important;*/ /*can turn off facbook hello js buttons*/
}

.hpageview {
    display: none;
}


/* start momb more on marketbeat styles */
.more-headline {
    font-family: var(--font-family);
    font-size: 1.11rem;
    color: var(--gray-11);
    border-bottom: solid 1px var(--gray-4);
    margin: 0 0 1rem;
    padding: 0 0 0.5rem;
    font-weight: 600;
}
.momb {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
    margin: 0 0 2em 0;
}
    .momb.momb-LeftPicture {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    /*
.momb-LeftPicture .momb-section {
    -ms-flex: 0 1 344px;
    flex: 0 1 344px;
}
*/
    .momb .linkbox {
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: stretch;
        align-content: flex-start;
        flex-wrap: wrap;
        width: 100%;
        flex-basis: 100%;
        border: 1px solid var(--gray-3);
        border-radius: 0.25rem;
        overflow: hidden;
        transition: all 300ms ease-in-out;
        margin-bottom: 0 !important;
        height: 100%;
    }

.momb-LeftPicture .linkbox {
    flex-direction: row;
}

.momb .linkbox:hover, .momb .linkbox:focus {
    background: var(--light-gray);
    transform: scale(1.05);
}

    .momb .linkbox:hover .title-line,
    .momb .linkbox:focus .title-line {
        text-decoration: underline;
    }

.momb .imagebox {
    width: 100%;
    aspect-ratio: 210/119;
    overflow: hidden;
    margin: 0;
    background-size: cover;
    background-position: center;
    position: relative;
}

    .momb .imagebox img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.momb .textbox {
    font-size: 1rem;
    line-height: 1rem;
    text-decoration: none;
    flex: 1 1 125px;
    padding: 1rem 0.5rem 1rem;
}

.momb-LeftPicture .textbox {
    padding: 0.5rem;
    display: flex;
    justify-content: center;
    flex-flow: column wrap;
}

.momb .linktext {
    color: var(--blue-9);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.1;
}

.momb .title-line {
    margin-bottom: 0.25rem;
}

.momb-LeftPicture .title-line {
    font-size: 0.9rem;
}

.momb .desc-line {
    color: var(--default-text);
    font-weight: 400;
    margin-bottom: 0.4rem;
    font-size: 0.83rem;
    line-height: 1.2;
}

.momb-LeftPicture .desc-line {
    display: none;
}

.momb .from-line {
    color: var(--gray-8);
    font-weight: 400;
    font-size: 0.73rem;
    font-family: var(--font-family);
}

.momb .from-line-sep {
    margin: 0 4px;
    display: inline-block;
}

.momb-LeftPicture .imagebox {
    flex: 0 0 105px;
    padding-top: 0;
    overflow: hidden;
    margin: 0 0.5rem 0 0;
    aspect-ratio: 105 / 102;
    height: 100%;
}


.momb-LeftPicture .linktext {
    color: var(--blue);
}


/* end more on marketbeat styles */

/* Congress Trades */

@media (min-width: 992px) {
    .company-thumbnail {
        width: 40px;
        float: left;
        margin: 0px 13px 20px 0px
    }
}

.congress-member-card .member-title {
    color: var(--dark-gray);
}

.congress-member-card .member-subtitle {
    color: var(--gray-8);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: -0.32px;
}

.fa-regular .icon-state {
    stroke: currentColor;
    fill: currentColor;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center center;
    width: 16px;
}

.member-chamber, .member-state, .member-party {
    font-size: 90%;
}

.member-image {
    max-width: 193px;
    margin: 0 auto 24px;
}
    .member-image-inline{
        max-width:60px;
        margin:0 6px 6px 0;
    }

    .member-image .icon-state {
        position: absolute;
        bottom: -18px;
        right: -42px;
        stroke-width: 0;
        fill: currentColor;
        aspect-ratio: 1/1;
        object-fit: cover;
        object-position: bottom right;
        width: 108px;
        z-index: 1;
    }
    .member-image-inline .icon-state {
        bottom:0;
        right:-12px;
        width:30px;
    }

    .member-image .icon-state.icon-underneath {
        stroke-width: 3px;
        stroke: white;
    }
        .member-image-inline .icon-state.icon-underneath {
            stroke-width:5px;
        }
    .member-thumbnail {
            border-width: 4px !important;
            width: 193px;
            height: 193px;
            margin: 0 auto;
            overflow: hidden;
        }
.member-image-inline .member-thumbnail {
    border-width: 1px !important;
    width: 60px;
    height: 60px;
}
.member-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
}
.member-profile .member-info{
    line-height: 1em;
}
@media(max-width:380px) {
    .member-image{
        max-width:50vw;
    }
    .member-thumbnail {
        width: 50vw;
        height: 50vw;
    }

   .member-image .icon-state {
       width:25vw;
       bottom:0;
       right:-20px;
    }
}
.trade-list-button {
    min-width: 350px;
    max-width: 100%;
    font-size: 1em;
    background: var(--light-gray) !important;
    text-transform: none;
    border-radius: 0.25em;
    border: 1px solid rgba(0,0,0,.125);
    letter-spacing:0;
}

    .trade-list-button:hover,
    .trade-list-button:focus {
        color: var(--blue);
    }

    .trade-list-button .fa-angle-right {
        rotate: 90deg;
    }

    .trade-list-button[aria-expanded="true"] .fa-angle-right {
        rotate: -90deg;
    }

.trade-list {
    font-size: 85%;
    width: 100%;
    max-width: 350px;
}

.trade-list-item {
    padding: 0.45em;
    transition: all 0.2s ease-in-out;
    z-index: 0;
}

    .trade-list-item:hover, .trade-list-item:focus-within {
        transform: scale(1.02);
        background: var(--white) !important;
        box-shadow: 0 0 5px #2e9eb9;
        border: 1px solid var(--blue);
        z-index: 1;
    }
/*End Congress Trades*/

/* stock list type pages */
    .stocklist-card{
        border-radius:10px;
    }
        .stocklist-card.hover-card:hover, .stocklist-card.hover-card:focus-within {
            transform: scale(1.02);
            box-shadow: none;
            background: var(--light-gray);
            border: 1px solid var(--gray-3);
            z-index:4;
        }
            .stocklist-card.hover-card:hover .stock-list-card-wrapper, .stocklist-card.hover-card:focus-within .stock-list-card-wrapper {
                transform: scale(0.97);
            }
        .stocklist-card.hover-card:focus-within {
            outline: var(--blue) dashed 1px;
            outline-offset: 2px;
        }
    .stocklist-card-header {
        border-radius: 10px;
    }
        .stocklist-card-header img {
            aspect-ratio: 1.65/1;
            object-fit: cover;
            z-index: 0;
        }
        .stocklist-card-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            background: linear-gradient(180deg, rgba(0, 119, 180, 0) 0%, rgba(0, 88, 130, 0.9) 100%);
            width: 100%;
            height: 90%;
            z-index: 1;
            mix-blend-mode: multiply;
        }
        .stocklist-card-header .stocklist-card-header-title {
            font-weight: 600;
            position: absolute;
            bottom: 0.5em;
            left: 0.5em;
            width: calc(100% - 1em);
            margin: 0;
            z-index: 2;
            text-shadow:0px 1px 1px rgba(0,0,0,0.5)
        }

    .stocklist-card a .link-to-card-bottom-span {
        position: absolute;
        bottom: 21px;
        left: 0.25rem;
    }

.intro-text{
    font-size: 1.1rem;
    font-weight:500;
    font-family: var(--font-family);
    line-height: 1.2;
    letter-spacing: 0.38px;
    margin-bottom:1rem;    
}

/* Ranked Stock Card Stats*/
.stock-list-company-stats .price-data:last-child {
    border-bottom: 0;
}

@media (max-width: 991.9px) {
    .stock-list-company-stats {
        border-top: 1px solid var(--gray-3);
        border-left: 0 !important
    }
}

/*Site Index Pages*/
.page-list {
    column-count: 3;
    column-gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.page-list-2-col {
    column-count: 2;
}

    .page-list li {
        break-inside: avoid;
        border-bottom: 1px solid var(--gray-3);
        width:100%;
    }
        .page-list li a {
            color: var(--gray);
            font-weight: 400;
            padding: 0.5em 0.5em 0.5em 0;
            display: inline-block;
        }

.anchor-list .page-list {
    list-style: disc;
    padding-left:1em;
}

.anchor-list li {
    padding: 0.5em 1em 0.5em 0;
    border: none;
}

    .anchor-list li a {
        color: var(--blue-9);
        padding: 0;
    }
    @media (max-width: 991.9px) {
        .page-list {
            column-count: 2;
        }

        .page-list-2-col {
            column-count: 1;
        }
    }
    @media (max-width: 575.9px) {
        .page-list,.page-list-2-col {
            column-count: 1;
        }
        .page-list li{
           width:100%;
        }
    }
@media (prefers-contrast: more) {
    #headerSearchForm {
        background: var(--blue-13);
        border: 1px solid var(--white);
        border-radius: 5px;
    }
}

/*Live Events*/
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.14);
    }
}

.pulse-icon {
    display: inline-block;
    animation: pulse 1.5s infinite ease-in-out;
}

.slick-arrow {
    box-shadow: -1px 1px 4px 0px var(--gray-3);
    color: var(--blue-8);
    background: var(--white);
    line-height: 1em;
    position: absolute;
    top: 50%;
    left: -2.5em;
    padding: 1em 1.25em;
    transform: translateY(-45%);
    z-index: 10;
    opacity: 0;
}

.slick-next {
    left: auto;
    right: -2em;
}
.earnings-card .stretched-link:focus {
    outline: none;
    box-shadow: none;
}
@media (max-width:420px) {
    .earnings-carousel-lg .card {
        padding-top: 2.5em;
    }

    .earnings-carousel-lg .stock-badge {
        left: 1em !important;
        right: auto !important;
    }
}

.earnings-carousel.pre-slick-init {
    max-height: 225px;
    overflow: hidden;
}

.earnings-carousel .card {
    min-height: 225px;
}

.earnings-carousel.not-slick .card {
    min-width: 345px;
    max-width: 100%; /* Prevent overflow on very narrow screens */
    flex: 0 0 auto; /* Prevent flex shrinking */
    height: 100%;
}

@media (min-width:1500px) {
    .earnings-carousel.not-slick .card {
        max-width: 345px;
    }
}

.earnings-carousel.not-slick {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    gap: 0; /* optional spacing */
}

    .earnings-carousel .slick-list {
        padding: 0 0.15em;
    }

.earnings-carousel:focus-within .slick-arrow,
.slick-arrow:focus,
.slick-arrow:hover {
    opacity: 1;
}
    @media (max-width:1480px) {
        .slick-arrow{
            opacity:1;
        }
    }

    @media (max-width:1200px) {
        .earnings-carousel.slick-initialized {
            padding-left: 60px;
            padding-right: 60px;
        }
        .slick-prev {
            left:0;
        }
        .slick-next{
            right:0;
        }
    }

    .badge-live,.badge-red {
        background: #FEF6F7;
        border: 1px solid var(--red);
        color: var(--red-5);
    }
    .badge-green {
        background: var(--light-green);
        border: 1px solid var(--green);
        color: var(--dark-green);
    }
    .badge-upcoming {
        background: var(--light-gray);
        border: 1px solid var(--gray-6);
        color: var(--gray-9);
    }
    .badge-ended {
        background: var(--gray-9);
        border: 1px solid var(--gray-9);
        color: var(--light-gray);
    }

    .alert {
        align-items: flex-start;
        line-height:1.4em;
    }
        .alert .alert-icon {
            flex-shrink: 0;
            margin-right: 0.5rem;
            margin-left: 0.25rem;
            margin-top: 0.25rem; /* align with first line of text */
        }
        .alert-live .alert-content {
            flex-grow: 1;
            padding-left: 0.25rem; /* creates a tabbed-in look */
        }
    a.alert {
        text-decoration: none;
        font-weight: 400;
        transition: all 300ms ease-in-out;
    }

        a.alert:hover, a.alert:focus {
            transform: scale(0.99);
        }
    .alert-info {
        background: var(--light-blue);
        border: 1px solid var(--blue);
        color: var(--dark-blue);
    }
    .alert-live,.alert-danger {
        background: var(--light-red);
        border: 1px solid var(--red-4);
        color: var(--dark-red);
    }

    a.alert-live:hover, a.alert-live:focus {
        background: var(--red-2);
        color: var(--dark-red);
        border: 1px solid var(--dark-red);
    }

    .alert-upcoming {
        background: var(--light-gray);
        border: 1px solid var(--gray-6);
        color: var(--gray-9);
    }

    a.alert-upcoming:hover, a.alert-upcoming:focus {
        background: var(--gray-2);
        color: var(--gray);
    }

/*ai summary styles*/
.ai-summary-heading button[aria-expanded="true"] .fa-square-minus {
    display: block;
}

.ai-summary-heading button[aria-expanded="true"] .fa-square-plus {
    display: none;
}
.ai-summary-heading button[aria-expanded="false"] .fa-square-minus {
    display:none;
}
.ai-summary-heading button[aria-expanded="false"] .fa-square-plus {
    display: block;
}
.ai-summary-heading button[aria-expanded="false"]::after{
    border-bottom: 1px solid var(--gray-3);
}
.ai-summary {
    line-height: 1.4em;
    ul {
        list-style: none;
        padding-left: 0;
        margin-left: 0;
        margin-bottom: 1em;
    }
   li {  
        margin-bottom: .75em;
        position: relative;
        padding-left: 1.6em;

       ul {  
           margin-top: 0.75em;  
       }  
   }  
}
.ai-summary li::before {
    font-weight: normal;
    content: "\f058";
    font-family: var(--fa-style-family);
    color: var(--blue-8);
    position: absolute;
    top: 3px;
    left: 0;
}
    .ai-summary li.neutral::before {
        font-weight:700;
        content: "\f056";
    }
    .ai-summary li.positive::before {
        font-weight: 700;
        content: "\e0fc";
        color: var(--green);
    }
    .ai-summary li.negative::before {
        font-weight: 700;
        content: "\e0fa";
        color: var(--red);
    }
/*hovercard*/
.hovercard {
    display: none;
    position: absolute;
    z-index: 999;
    max-width: min(300px, 95vw);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

/*progress bar */
.progress-container {
    display: flex;
    align-items: center;
    margin-bottom: .6rem;
}

.progress-bar {
    width: 15px;
    height: 5px;
    margin: 0 2px;
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
}

.progress-7 {
    background-color: var(--dv-hc-7);
}

.progress-6 {
    background-color: var(--dv-hc-6);
}

.progress-5 {
    background-color: var(--dv-hc-5);
}

.progress-4 {
    background-color: var(--dv-hc-4);
}

.progress-3 {
    background-color: var(--dv-hc-3);
}

.progress-2 {
    background-color: var(--dv-hc-2);
}

.progress-1 {
    background-color: var(--dv-hc-1);
}

.progress-empty {
    background-color: var(--gray-3);
}

/*badge styles*/
.badge {
    font-size: 0.66rem;
    line-height: 1em;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.66rem 0.88rem;
    border-radius: 5px;
    border: 1px solid var(--gray-3);
}

.badge-gray {
    background: var(--light-gray);
}

.badge-green {
    background: var(--light-green);
    border: 1px solid var(--green-7);
    color: var(--green-7);
}

.badge-purple {
    background: var(--light-purple);
    border: 1px solid var(--purple-5);
    color: var(--purple-5);
}

.badge-blue {
    background: var(--light-blue);
    border: 1px solid var(--blue);
    color: var(--blue);
}

.badge-red {
    background: var(--light-red);
    border: 1px solid var(--red);
    color: var(--red);
}

.badge-teal {
    background: var(--light-teal);
    border: 1px solid var(--teal);
    color: var(--teal);
}

.badge-orange {
    background: var(--light-orange);
    border: 1px solid var(--orange);
    color: var(--dark-orange);
}

.badge-gold {
    background: var(--light-gold);
    border: 1px solid var(--gold);
    color: var(--gray);
}
/* Content Cards */


.content-card:focus-within, .content-card:hover {
    transform: scale(1.02);
    transform-origin: center;
    transition: all 0.15s ease;
    cursor:pointer;
}

    .content-card:focus .content-card-title, .content-card:hover .content-card-title {
        text-decoration: underline;
    }

.content-card-description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.3em;
    max-height: 4em;
    font-size: 0.9em;
    color: var(--black);
}

.content-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16/9;
    object-position: center bottom;
    overflow: hidden;
    border-bottom: 1px solid var(--gray-2);
}

.post-time {
    font-size: 0.66em;
    text-transform: uppercase;
    font-weight: 500;
    margin: 3px 0;
}

.content-card-byline {
    font-size: 0.66em;
    margin: 5px 0;
    color: var(--gray-9);
    position: relative;
}

.content-card-title {
    position: relative;
    font-size:1.2em;
}

.stretched-link:focus {
    outline: none;
    box-shadow: none;
}
    .stretched-link:focus::after {
        outline: var(--blue) dashed 1px;
        outline-offset: 2px;
        box-shadow: none;
    }
/* Linkbox */

.linkbox {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    flex-basis: 100%;
    box-shadow: 0 0 5px var(--white);
    transition: transform .15s ease;
}

.linkbox:hover, .linkbox:focus {
    text-decoration: none;
    transform: scale(1.02);
}

.linkbox:focus {
    outline: var(--blue) dashed 1px;
    outline-offset: 2px;
    box-shadow: none;
}
.linkbox-image {
    margin: 3px 15px 10px 0;
    flex: 0 0 105px;
}

.linkbox .description {
    margin: 0;
    flex: 1 0 100px;
}


.linkbox .title-line {
    color: var(--gray-11);
    font-size: .9rem;
}

.linkbox:hover .title-line,
.linkbox:focus .title-line {
    text-decoration: underline;
}

.linkbox .upper-note {
    font-size: .62em;
}

/* table  paywall data*/
.paywall-blur-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* clamp lines to fit row height; tweak as needed */
    overflow: hidden;
    filter: blur(6px);
    opacity: .8;
    line-height: 1.3;
}

.paywall-lock {
    position: absolute;
    top: 50%;
    left: 50%;    
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/*rating pill*/
.rating-pill {
    background-color: var(--light-gray);
    border: solid 1px currentcolor;
    border-radius: 1.7em;
    padding: .5em 1.3em;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: .08em;
    font-size: .7em;
    font-weight: 500;
    display: inline-block;
}
.rating-pill-red{
    color:var(--red-11);
    background-color:var(--light-red);
}
.rating-pill-green{
    color:var(--dark-green);
    background-color:var(--green-2);
}
.rating-pill-dark-green {
    color: var(--dark-green);
    background-color: var(--light-green);
}
.rating-pill-gold {
    color: #7b6000;
    background-color:var(--gold-2)
}
.rating-marker {
    position: relative;
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: .08em;
    font-size: .777em;
    font-weight: 500;
    white-space: nowrap;
}

    .rating-marker::before {
        content: '';
        position: relative;
        width: 0.9em;
        height: 0.9em;
        margin-right: 0.5em;
        background-color: var(--gray);
        border-radius: 50%;
        display: inline-block;
    }

.rating-marker-red::before {
    background-color: var(--red-5);
}

.rating-marker-green::before {
    background-color: var(--green-5);
}

.rating-marker-dark-green::before {
    background-color: var(--dark-green);
}

.rating-marker-gold::before {
    background-color: var(--gold-11);
}

/* special css for onetap in firefox */
@-moz-document url-prefix() {
    #g_id_onload {
        position: absolute;
        top: 21px;
        right: 2vw;
    }
}
    /* special css for onetap in Safari 10.1+ */
    @media not all and (min-resolution:.001dpcm) {
        #g_id_onload {
            position: absolute;
            top: 21px;
            right: 2vw;
        }
    }
    /* special css for onetap in Chrome on mac */
    @supports (-webkit-touch-callout: none) and (not (-ms-ime-align: auto)) {
        @media screen and (-webkit-min-device-pixel-ratio:0) {
            #g_id_onload {
                position: absolute;
                top: 21px;
                right: 2vw;
            }
        }
    }
    /* special css that might work better for modern safari */
    _:: -webkit-full-page-media, _:future, :root #g_id_onload {
        position: absolute;
        top: 21px;
        right: 2vw;
    }

    /* this is a browser bug fix, at the end because otherwise it keeps the rest from minimizing */
    @-ms-viewport {
        width: device-width;
    }


    /* IE9 and IE10 rule sets go here */
    @media screen and (min-width:0\0) {
        .header-logo {
            max-width: 190px;
            padding: 0 15px;
        }
    }