/* css reset */
    /* Box sizing rules */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* Remove default margin */
    body,
    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote,
    dl,
    dd {
        margin: 0;
    }

    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
    ul[role='list'],
    ol[role='list'] {
        list-style: none;
    }

    /* Set core root defaults */
    html:focus-within {
        scroll-behavior: smooth;
    }

    /* Set core body defaults */
    body {
        min-height: 100vh;
        text-rendering: optimizeSpeed;
        line-height: 1.5;
    }

    /* A elements that don't have a class get default styles */
    a:not([class]) {
        text-decoration-skip-ink: auto;
    }

    /* Make images easier to work with */
    img,
    picture {
        max-width: 100%;
        display: block;
    }

    /* Inherit fonts for inputs and buttons */
    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
    @media (prefers-reduced-motion: reduce) {
        html:focus-within {
        scroll-behavior: auto;
        }
        
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

/* END CSS RESET *//* START new header CSS */

body.tesla-site {
    --header-background: #ffffffb8;
    --header-border-mobile: #d9dbdd;
    --header-border-desktop: #76a4e3c2;
    --header-secondary-nav: #357ae0fc;
    --header-secondary-nav-hover: #2365c5;

    --header-border-desktop: #7497f8;
    --header-secondary-nav: #3b68e4fc;
    --header-secondary-nav-hover: #2c52bb;
    
    --header-primary-nav-hover: #bcbcbc70;
    --header-shadow-mobile: #7783a769;
    --header-shadow-desktop: #8686862b;

    --link: #0a5d7b;

    --button-selected: #26353b;
    --button-regular: #eaeaea;
    --button-highlight: #0a5d7b;

    /* --header-secondary-color-light: #003448e3; */
    /* --dark-secondary-nav-color: #0d536dbf; */
    /* --header-primary-nav-border-color: #2c6f8b; */
}

body.dark.tesla-site {
    --header-background: #192332a8;
    --header-border-mobile: #202837;
    --header-border-desktop: #0d536dbf;
    --header-secondary-nav: #0057d7fa;
    --header-secondary-nav-hover: #0044a7;
    --header-primary-nav-hover: #2c3d55;
    --header-shadow-mobile: #7783a769;
    --header-shadow-desktop: #8686862b;

    --link: #5096fc;

    --button-selected: #26353b;
    --button-regular: #eaeaea;
    --button-highlight: #0a5d7b;
}

body.rivian-site {
    --header-background: #ffffffb8;
    --header-border-mobile: #d9dbdd;
    --header-border-desktop: #3E8EAB;
    --header-secondary-nav: #00455ffa;
    --header-secondary-nav-hover: #0d3748;
    --header-primary-nav-hover: #dfe6e9;
    --header-shadow-mobile: #7783a769;
    --header-shadow-desktop: #8686862b;

    --page-background: #eaeaea;
    --module-background: #ffffff;
    --link: #0a5d7b;

    --button-selected: #26353b;
    --button-regular: #eaeaea;
    --button-highlight: #0a5d7b;

    /* --header-secondary-color-light: #003448e3; */
    /* --dark-secondary-nav-color: #0d536dbf; */
    /* --header-secondary-nav-hover: #0f3443; */
    /* --header-primary-nav-border-color: #2c6f8b; */
}

body.dark.rivian-site {
    --header-background: #23304478;
    --header-border-mobile: #202837;
    --header-border-desktop: #0d536dbf;
    --header-secondary-nav: #0d536df5;
    --header-secondary-nav-hover: #083649;
    --header-primary-nav-hover: #283243;
    --header-shadow-mobile: #7783a769;
    --header-shadow-desktop: #8686862b;

    --page-background: #11151c;
    --module-background: #181e27;
    --link: #429dc3;

    --button-selected: #26353b;
    --button-regular: #eaeaea;
    --button-highlight: #0a5d7b;
}

header.header-group {
    position: sticky;
    max-width: 1400px;
    margin: 0 auto;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

@media all and (min-width: 768px) {
    header.header-group {
        margin: 10px auto 0 auto;
        width: calc(100% - 20px);
    }
}

.dark .header-wrapper, .dark .header-wrapper-secondary {
    box-shadow: none;
}

.header-wrapper-primary {
    margin-bottom: 6px;
    padding: 0 15px;
    background-color: var(--header-background);
    border-bottom: 1px solid var(--header-border-mobile);
    box-shadow: 0 -3px 20px 0 var(--header-shadow);
}

.header-wrapper-secondary {
    box-shadow: none;
    position: absolute;
    top: 94px;
    width: 100%;
    left: 0;
    background-color: var(--header-secondary-nav);
    box-shadow: 0 3px 20px 0 var(--header-shadow-mobile);
}


@media all and (min-width: 768px) {
    .header-wrapper-primary {
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        margin-bottom: unset;
        box-shadow: 0 -3px 20px 0 var(--header-shadow-desktop);
    }

    .header-wrapper-primary {
        border-bottom: 4px solid var(--header-border-desktop);
    }


    .dark .header-wrapper-primary {
        border-bottom: 4px solid transparent;
    }

    .header-wrapper-secondary {
        top: 64px;
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        box-shadow: 0 3px 20px 0 var(--header-shadow-desktop);
    }
}

.header {
    max-width: 1200px;
    margin: auto;
    display: flex;
}

.header-primary {
    flex-direction: column;
}

@media all and (min-width: 768px) {
    .header {
        align-items: center;
    }

    .header-primary {
        justify-content: space-between;
        flex-direction: row;
        height: 60px;
    }
}

.header-secondary {
    height: auto;
    max-height: 0;
    justify-content: left;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    transition: max-height .3s ease-in-out, min-height .2s ease-in-out;
    display: flex;
    align-items: end;
}

@media all and (min-width: 768px) {
    .header-secondary {
        align-items: center;
        justify-content: space-evenly;
    }
}

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

.header-logo {
    display: flex;
    align-items: center;
    height: 40px;
}

.tesla-site .header-logo img {
    transform: rotate(0deg);
    transition: transform 2s cubic-bezier(0.42, 0, 0, 1.62);
}

.tesla-site .header-logo:hover img {
    transform: rotate(720deg);
    transition: transform 4s linear;
}

.rivian-site .header-logo {
    background-size: contain !important;
}

body.tesla-site .header-logo {
    background: url('https://www.notateslaapp.com/assets/logo/nata-logo-gray-2x.png') no-repeat right center;
    padding-right: 173px;
    background-size: 160px auto !important;
}


body.dark.tesla-site .header-logo {
    background: url('https://www.notateslaapp.com/assets/logo/nata-logo-white-2x.png') no-repeat right center;
}

body.rivian-site .header-logo {
    background: url('https://www.rivianwave.com/assets/logo/rivian-wave-logo-1x.png') no-repeat right center;
    padding-right: 175px;
}

@media all and (min-width: 768px) {
    body.tesla-site .header-logo {
        padding-right: 180px !important;
        background-size: 165px auto !important;
    }

    body.rivian-site .header-logo {
        padding-right: 190px !important;
    }

}

@media all and (min-width: 1100px) {
    body.tesla-site .header-logo {
        padding-right: 215px !important;
        background-size: 200px auto !important;
    }

    body.rivian-site .header-logo {
        padding-right: 210px !important;
    }
}

.site-options {
    align-items: center;
}

.site-options>* {
    cursor: pointer;
    display: flex;
}

.site-options-mobile {
    display: flex;
    gap: 5px;
}

.site-options-desktop {
    display: none;
    justify-content: right;
}

@media all and (min-width: 768px) {
    .site-options-mobile {
        display: none;
    }

    .site-options-desktop {
        display: flex;
        gap: 7px;
    }
}

@media all and (min-width: 1100px) {
    .site-options-desktop {
        width: 210px;
    }
}

.header-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0 0 0;
}



@media all and (min-width: 768px) {
    .header-logo-wrapper {
        padding-top: unset;
    }
}


.header-primary > nav {
    width: 100%;
    padding: 7px 0;
    font-size: 16px;
    font-weight: 600;
    justify-content: space-between;
    display: flex;
}

@media all and (min-width: 475px) {
    .header-primary > nav {
        justify-content: space-around;
    }
}

@media all and (min-width: 768px) {
    .header-primary > nav {
        max-width: 400px;
        font-size: 18px;
    }
}

div.primary-nav-category {
    cursor: default;
    z-index: 1;
}

.dark div.primary-nav-category {
    color: white;
}

@media all and (min-width: 768px) {
    div.primary-nav-category {
        padding: 21px 0;
    }
}

div.primary-nav-category .category-name {
    padding: 3px 10px;
}

@media all and (min-width: 768px) {
    div.primary-nav-category .category-name {
        padding: 5px 10px;
    }
}

div.primary-nav-category:hover .category-name {
    background-color: var(--header-primary-nav-hover);
    border-radius: 10px;
}

.header-secondary nav {
    padding-right: 75px;    /* make it obvious there are not additional items on mobile */
    font-size: 12px;
    font-weight: 600;
    margin: 5px 0 5px 6px;
}

@media all and (min-width: 768px) {
    .header-secondary nav {
        transition: top .3s ease-in-out;
        position: relative;
        left: auto;
        padding-right: unset;
        font-size: 15px;
        top: -31px;
        font-weight: 500;
        margin: 9px 0;
    }
}


.header-secondary nav a {
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: center 9px;
    text-align: center;
    padding: 58px 7px 7px 7px !important;
    white-space: nowrap;
    min-width: 58px;
    display: inline-block;
}

@media all and (min-width: 768px) {
    .header-secondary nav a {
        min-width: 80px;
        background-position: center 12px;
        background-size: 50px;
        padding: 72px 12px 11px 12px !important;
    }
}

.light .header-secondary nav a {
    color: white;
}

.header-secondary nav a:active,
.header-secondary nav a:hover {
    background-color: var(--header-secondary-nav-hover);
    text-decoration: none;
    
    box-shadow: inset 0 1px 3px 0 rgb(0 0 0 / 50%);
}

.header-secondary nav a:active {
    box-shadow: inset 0 1px 4px 0 rgb(0 0 0);
}

.primary-nav-category:hover .header-secondary a:hover {
    border-radius: 10px;
}

/* nav drop down */

.primary-nav-category:hover {
    z-index: 99;
}

.primary-nav-category:hover .header-secondary {
    max-height: 135px !important;
}


@media all and (min-width: 768px) {
    .primary-nav-category.active .header-secondary {
        max-height: 40px;
    }
}

.primary-nav-category:hover nav {    
    top: 0;
}

/ * end nav drop down */









/* reset conflicting styles */
body {
    /* background: #e5e7eb !important; */
    background: var(--page-background) !important;
}

header.header-group {
    display: block;
}

@media all and (min-width: 768px) {
    body:not(.site-index-page) header.header-group {
        margin-bottom: 50px;
    }
}

.header-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.header-icon:hover {
	background-color: #0000008a !important;
}

.header-icon:active {
    box-shadow: inset 0 1px 3px 0 rgb(255 255 255 / 69%);
}

.dark .header-icon:active {
    box-shadow: inset 0 1px 3px 0 rgb(0 0 0);
}

.header-icon-user {
    background: url(/assets/user-icon.svg) no-repeat center center;
    background-size: 28px auto;
    filter: invert(80%) sepia(0%) saturate(0%) hue-rotate(180deg);
}

.header-icon-search {
    background: url(https://www.notateslaapp.com/assets/search-icon.svg) no-repeat center center;
    background-size: 20px auto;
    filter: invert(80%) sepia(0%) saturate(0%) hue-rotate(180deg);
}

.header-icon-appearance {
    background: url(https://www.notateslaapp.com/assets/sun.svg) no-repeat center center;
    background-size: 22px auto;
    filter: invert(80%) sepia(0%) saturate(0%) hue-rotate(180deg);
}

.dark .header-icon-search,
.dark .header-icon-user,
.dark .header-icon-appearance {
    filter: none;
}

.header-icon-language {
    background: url(https://www.notateslaapp.com/assets/flags/us.png) no-repeat center/cover;
    width: 25px !important;
    height: 25px !important;
    border-radius: 50%;
    margin-left: 5px;
}

.header-icon-language:hover {
    border-radius: var(--border-radius);
}

html[lang="da"] .header-icon-language {
    background: url(/assets/flags/da.png) no-repeat center/cover;
}
html[lang="de"] .header-icon-language {
    background: url(/assets/flags/de.png) no-repeat center/cover;
}
html[lang="es"] .header-icon-language {
    background: url(/assets/flags/es.png) no-repeat center/cover;
}
html[lang="fr"] .header-icon-language {
    background: url(/assets/flags/fr.png) no-repeat center/cover;
}
html[lang="it"] .header-icon-language {
    background: url(/assets/flags/it.png) no-repeat center/cover;
}
html[lang="nl"] .header-icon-language {
    background: url(/assets/flags/nl.png) no-repeat center/cover;
}
html[lang="nb"] .header-icon-language {
    background: url(/assets/flags/nb.png) no-repeat center/cover;
}
html[lang="pl"] .header-icon-language {
    background: url(/assets/flags/pl.png) no-repeat center/cover;
}
html[lang="pt"] .header-icon-language {
    background: url(/assets/flags/pt.png) no-repeat center/cover;
}
html[lang="pt"] .header-icon-language {
    background: url(/assets/flags/pt.png) no-repeat center/cover;
}
html[lang="sv"] .header-icon-language {
    background: url(/assets/flags/sv.png) no-repeat center/cover;
}
html[lang="zh-cn"] .header-icon-language {
    background: url(/assets/flags/cn.png) no-repeat center/cover;
}
html[lang="zh-hk"] .header-icon-language {
    background: url(/assets/flags/hk.png) no-repeat center/cover;
}
html[lang="zh-tw"] .header-icon-language {
    background: url(/assets/flags/tw.png) no-repeat center/cover;
}
html[lang="ja"] .header-icon-language {
    background: url(/assets/flags/ja.png) no-repeat center/cover;
}
html[lang="ko"] .header-icon-language {
    background: url(/assets/flags/ko.png) no-repeat center/cover;
}
html[lang="fi"] .header-icon-language {
    background: url(/assets/flags/fi.png) no-repeat center/cover;
}
html[lang="tr"] .header-icon-language {
    background: url(/assets/flags/tr.png) no-repeat center/cover;
}
html[lang="ro"] .header-icon-language {
    background: url(/assets/flags/ro.png) no-repeat center/cover;
}
html[lang="hu"] .header-icon-language {
    background: url(/assets/flags/hu.png) no-repeat center/cover;
}
html[lang="cs"] .header-icon-language {
    background: url(/assets/flags/cs.png) no-repeat center/cover;
}
html[lang="el"] .header-icon-language {
    background: url(/assets/flags/el.png) no-repeat center/cover;
}
html[lang="th"] .header-icon-language {
    background: url(/assets/flags/th.png) no-repeat center/cover;
}
html[lang="he"] .header-icon-language {
    background: url(/assets/flags/he.png) no-repeat center/cover;
}
html[lang="sl"] .header-icon-language {
    background: url(/assets/flags/sl.png) no-repeat center/cover;
}
html[lang="hr"] .header-icon-language {
    background: url(/assets/flags/hr.png) no-repeat center/cover;
}

@media all and (min-width: 1100px) {
    .header-icon {
        width: 40px;
        height: 40px;
    }

    .header-icon-search {
        background-size: 22px auto;
    }

    .header-icon-appearance {
        background-size: 25px auto;
    }
}

/* nav indicator */

div.nav-indicator-wrapper {
    position: absolute;
    width: 95%;
}

@media all and (min-width: 768px) {
    div.nav-indicator-wrapper {
        width: 400px;
    }  
}

div.nav-indicator {
    z-index: 0;
    position: absolute;
    top: 17px;
    left: 28px;
    transition: left .2s ease-in-out;
    border-width: 12px;
    border-style: solid;
    width: 0;
    display: none;
    border-color: transparent transparent var(--header-secondary-nav) transparent;
}

.primary-nav-category:hover ~ div .nav-indicator {
    display: block;
}

.primary-nav-category:nth-of-type(1):hover ~ div .nav-indicator {
    left: 28px !important;
}

.primary-nav-category:nth-of-type(2):hover ~ div .nav-indicator {
    left: 45% !important;
}

.primary-nav-category:nth-of-type(3):hover ~ div .nav-indicator {
    right: 39px !important;
    left: unset !important;
}  

@media all and (min-width: 475px) and (max-width: 767px) {
    .primary-nav-category:nth-of-type(1):hover ~ div .nav-indicator {
        left: 12% !important;
    }

    .primary-nav-category:nth-of-type(3):hover ~ div .nav-indicator {
        right: 12% !important;
        left: unset !important;
    }  
}

@media all and (min-width: 768px) {
    div.nav-indicator {
        top: 49px;
    }

    .primary-nav-category.active ~ div .nav-indicator {
        display: block;
    }

    .primary-nav-category:nth-of-type(1).active ~ div .nav-indicator {
        left: 28px;
    }

    .primary-nav-category:nth-of-type(2).active ~ div .nav-indicator 
    {
        left: 45%;
    }

    .primary-nav-category:nth-of-type(3).active ~ div .nav-indicator 
    {
        left: 308px;
    }      
}

/* end nav indicator */


.color-scheme-container a {
    border-radius: var(--border-radius);
    margin-right: 15px;
    padding: 5px 10px;
    cursor: pointer;
}

.color-scheme-container a img {
    display: inline-block;
}

.color-scheme-container a.selected {
    background-color: var(--header-secondary-nav);
    color: white;
}

.color-scheme-container a:hover {
    text-decoration: none;
    background-color: var(--page-background);
}

.light .color-scheme-container a:hover {
    color: black;
}


.header-secondary nav a.charging-icon {
    background-image: url(/assets/icons/charging-100.png);
}

.header-secondary nav a.energy-icon {
    background-image: url(/assets/icons/energy-100.png);
}

.header-secondary nav a.r1t-icon {
    background-image: url(/assets/icons/r1t-100.png);
}

.header-secondary nav a.models-icon {
    background-image: url(/assets/icons/models-100.png);
}

.header-secondary nav a.model3-2024-icon {
    background-image: url(/assets/icons/model3-2024-100.png);
}

.header-secondary nav a.modelx-icon {
    background-image: url(/assets/icons/modelx-100.png);
}

.header-secondary nav a.modely-icon {
    background-image: url(/assets/icons/modely-100.png);
}

.header-secondary nav a.project-juniper-icon {
    background-image: url(/assets/icons/project-juniper-100.png);
}

.header-secondary nav a.robotaxi-icon {
    background-image: url(/assets/icons/robotaxi-100.png);
}

.header-secondary nav a.cybertruck-icon {
    background-image: url(/assets/icons/cybertruck-100.png);
}

.header-secondary nav a.autopilot-wheel-icon {
    background-image: url(/assets/icons/autopilot-100.png);
}

.header-secondary nav a.updates-icon {
    background-image: url(/assets/icons/updates-100.png);
}

.header-secondary nav a.phone-icon {
    background-image: url(/assets/icons/phone-100.png);
}

.header-secondary nav a.flame-icon {
    background-image: url(/assets/icons/flame-100.png);
}

.header-secondary nav a.latest-icon {
    background-image: url(/assets/icons/latest-100.png);
}

.header-secondary nav a.calendar-icon {
    background-image: url(/assets/icons/calendar-100.png);
}

.header-secondary nav a.easter-egg-icon {
    background-image: url(/assets/icons/easter-egg-100.png);
}

.header-secondary nav a.guide-icon {
    background-image: url(/assets/icons/guide-100.png);
}

.header-secondary nav a.unlock-icon {
    background-image: url(/assets/icons/unlock-100.png);
}

.header-secondary nav a.light-bulb-icon {
    background-image: url(/assets/icons/light-bulb-100.png);
}

.header-secondary nav a.mic-icon {
    background-image: url(/assets/icons/mic-100.png);
}

.header-secondary nav a.rocket-icon {
    background-image: url(/assets/icons/rocket-100.png);
}

.header-secondary nav a.community-icon {
    background-image: url(/assets/icons/community-100.png);
}



/* xmas hat and snow */
.header-logo {
    position: relative;
}

.snowfall {
    background: url(/assets/logo/snowfall.webp);
    background-color: #b6bed0b0;
    background-size: 300px 367px;
    background-repeat: repeat; 
    transition: background-color 7s ease-in-out;
    animation: snowfall 30s linear forwards 3;
}

.dark .snowfall {
    background-color: var(--header-background);
}

.dark .snowfall .primary-nav-category .category-name {
    background: #0d1118b0;
}

.snowfall .primary-nav-category .category-name {
    background: #eff0f35c;
    border-radius: 5px;
}

@keyframes snowfall {
    0%{
        background-position: 0 -367px;
    }
    20%{
        background-position: 60px -294px;
    }
    40%{
        background-position: 120px -220px;
    }
    60%{
        background-position: 180px -147px;
    }
    80%{
        background-position: 240px -73px;
    }
    100%{
        background-position: 300px 0;
    }
}

.xmas-hat {
    position: absolute;
    top: -5px;
    left: -9px;
    transform: translateX(-50%);
    width: 50px;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    z-index: 999;
}

.header-logo .xmas-hat-animation {
    animation: xmas-hat-animation 4.5s cubic-bezier(0.31, 0.27, 0.57, 1.2) forwards;
    animation-fill-mode: forwards;

}

:root {
    --snow-penultimate-position: 165px, -120px;
    --snow-ultimate-position: 128px, -158px;
}

@media all and (min-width: 768px) {
    :root {
        --snow-penultimate-position: 170px, -125px;
        --snow-ultimate-position: 131px, -164px;
    }
}

@media all and (min-width: 1100px) {
    :root {
        --snow-penultimate-position: 201px, -149px;
        --snow-ultimate-position: 155px, -194px;
    }
}


@keyframes xmas-hat-animation {
    0% {
        transform: scale(1) rotate(0deg);
    }

    35% {
        transform: scale(5) rotate(397deg) translate(21px, -36px);
    }

    40% {
        transform: scale(0.9) rotate(397deg) translate(157px, -205px);
    }
    
    55% {
        transform: scale(0.9) rotate(397deg) translate(var(--snow-penultimate-position));
    }
    
    70% {
        transform: scale(0.9) rotate(397deg) translate(var(--snow-penultimate-position));
    }
    
    100% {
        transform: scale(0.9) rotate(413deg) translate(var(--snow-ultimate-position));
    }
}


/* end xmas hat and snow */

/* END new HEADER */
/* new site CSS */


/* site breakpoints */
/*
    XS  0 - 400 (DEFAULT)
    S   401 - 699
    M   700-1099
    L   1100 - 1199
    XL  1200+
*/   


    body {
        --border-radius: 10px;
    }

    body.tesla-site {
        --page-background: #eff0f3;
        --module-background: #fff;
        --module-hover: #e6e7e9;
        --module-hover-border: #eaeaea;        
        --text: #414141;
        --link-active-color: #0156d4;
        --link-active-color-border: #ccd4e0;
        --module-shadow: 0 0 12px 0 #d3d7e3;
    }

    body.dark.tesla-site {
        --page-background: #0d1118;
        --module-background: #161c25;
        --module-hover: #1d232e;
        --module-hover-border: transparent;
        --text: #F7F9F9;
        --link-active-color: #458cf4;
        --link-active-color-border: transparent;
        --module-shadow: 0 0 12px 0 #07090d;   
    }

    body.rivian-site {
        --page-background: #eff0f3;
        --module-background: #ffffff;
        --module-hover: #F7F9F9;
        --module-hover-border: #eaeaea;        
        --text: #414141;
        --link-active-color: #0a5d7b;
        --link-active-color-border: #ccd4e0;
        --module-shadow: 0 0 12px 0 #d3d7e3;
    }
        
    body.dark.rivian-site {
        --page-background: #11151c;
        --module-background: #1f2630;
        --module-hover: #2a3341;
        --module-hover-border: transparent;        
        --text: #F7F9F9;
        --link-active-color: #429dc3;
        --link-active-color-border: transparent;
        --module-shadow: 0 0 12px 0 #07090d;
    }


    html {
        scroll-behavior: smooth;
    }

    body {
        font-family: 'Montserrat', sans-serif;
        color: var(--text);
        background: var(--page-background);
    }

    a, a:visited {
        text-decoration: none;
        color: var(--text);
    }

    /* story - all links */
    p a, p a:visited {
        color: var(--link-active-color);
        font-weight: 600;
        border-bottom: 1px solid var(--link-active-color-border);
    }

    /* story - all links on hover */
    p a:hover {
        border-bottom: 1px solid currentColor;
    }    

    .mod {
        background-color: var(--module-background);
        border-radius: var(--border-radius);
        padding: 10px 15px 1px 15px;
        margin-bottom: 20px;
        box-shadow: var(--module-shadow);
    }

    .mod-no-padding {
        padding: 0 0 1px 0;
    }

    .mod-no-padding section div.section-content {
        padding: 0 15px 1px 15px;
    }

    .mod-update-overview-features {
        margin-bottom: 20px;
    }

    .mod-update-overview-feature:hover  {
        text-decoration: none;
    }
    
    .mod-update-overview-feature {
        display: flex;
        border-radius: var(--border-radius);
        border: 1px solid transparent;
        margin: 0 -10px 10px -10px;
        cursor: pointer;
        background-image: linear-gradient(var(--module-hover), var(--module-hover));
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-size: 0% 0%;
    }

    .mod-update-overview-feature-heading {
        font-size: 15px;
        font-weight: 500;
        color: var(--text);
    }

    .mod-update-overview-feature-description {
        font-size: 13px;
        font-weight: 500;
        color: #969696;
    }

    .mod-update-overview-feature-icon {
        width: 60px;
        height: 50px;
        background-size: 40px 40px;
        background-repeat: no-repeat;
        background-position: center;
        margin: auto 0;
        flex-shrink: 0;
    }

    .mod-update-overview-feature-details {
        padding-top: 5px;
    }


    a.mod-update-overview-feature:hover, a.mod-update-overview-feature-selected {
        background-size: 100% 100%;
        border: 1px solid #EAEAEA;
        animation-name: light-update-overview-feature-fade-in;
        animation-duration: .3s;
    }

    .dark a.mod-update-overview-feature:hover, .dark a.mod-update-overview-feature-selected {
        border: 1px solid transparent;
        animation-name: dark-update-overview-feature-fade-in;
        animation-duration: .3s;
    }

    .mod-release-notes-dynamic-height {
        max-height: 600px;
        overflow-y: scroll;
    }

    /* firefox scroll bar */
    .mod-release-notes-dynamic-height {
        scrollbar-color: #dddddd transparent;
    }

    .dark .mod-release-notes-dynamic-height {
        scrollbar-color: var(--page-background) transparent;
    }

    /* webkit scroll bar */
    .mod-release-notes-dynamic-height::-webkit-scrollbar {
        width: 6px;
        background: transparent;
    }

    .mod-release-notes-dynamic-height::-webkit-scrollbar-button:start:decrement {
        display: block;
    }

    .mod-release-notes-dynamic-height::-webkit-scrollbar-thumb {
        border-radius: 20px;
    }

    .light .mod-release-notes-dynamic-height::-webkit-scrollbar-thumb {
        background: #C6C6C6;
    }

    .dark .mod-release-notes-dynamic-height::-webkit-scrollbar-thumb {
        background: #606060;
    }

    .hide {
        display: none;
    }
    
    .sticky-sidebar {
        position: sticky;
        top: 50px;        
    }

    /* The animation code */
    @keyframes light-update-overview-feature-fade-in {
        0% {
            border: 1px solid transparent;
            background-size: 90% 85%;
        }
        
        100% {
            border: 1px solid #EAEAEA;
            background-size: 100% 100%;
        }
    }

    @keyframes dark-update-overview-feature-fade-in {
        0% {
            border: 1px solid transparent;
            background-size: 90% 85%;
        }

        100% {
            border: 1px solid transparent;
            background-size: 100% 100%;
        }
    }    



    /* layout */

    /* small */
    .content-wrapper {
        max-width: 1240px;
        margin: 0 auto;    
        padding-left: 2%;
        padding-right: 2%;
    }

    .show-mobile {
        display: flex !important;
    }

    .hide-mobile {
        display: none !important;
    }

    .content-wrapper nav {
        overflow-x: auto;
        white-space: nowrap;
        margin: 15px -2% 30px 0;
        padding-bottom: 2px;
    }

    .col-a, .col-c {
        display: none;
    }

    /* adthrive breakpoint for mobile/desktop ads */
    @media (max-width: 767px) {
        .col-fullwide {
            min-height: 50px;
            margin-top: 10px;
        }
    }

    .col-fullwide .adthrive-ad, #AdThrive_Header_1_desktop {
        margin-bottom: 0 !important;
    }

    h1 {
        font-size: 26px;
        font-weight: 600;
        margin: .6em 0 .4em 0;
        line-height: 1.3;
    }

    h2 {
        font-size: 24px;
        font-weight: 600;
        margin: .2em 0 .3em 0;
        line-height: 1.3;
    }

    h1.next-article-header {
        margin: 20px 0 30px 0;
    }

    .mod h2 {
        margin: .2em 0 .5em .2em;
        font-size: 24px;
        font-weight: 600;
    }

    h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
        text-decoration: underline;
    }

    /* update type module */
    .mod-update-type--content {
        display: flex;
    }

    .mod-update-type--image {
        flex-shrink: 0;
        margin: 5px 30px 20px 20px;   
    }

    .mod-update-type--description {
        margin-top: 15px;
    }


    /* END update type module */


    .mod-stats-overview-horizontal--stat--label {
        font-size: 12px;
    }

    .mod-stats-overview-horizontal--stat--value {
        font-size: 16px;
    }

    .share {
        margin-bottom: 30px;
    }

    .mod-update-feature-section-1 {
        margin-bottom: 15px;
    }

    .section-footer {
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .section-footer-details {
        text-align: right;
        font-size: 14px;
    }

    .share {
        display: none;
    }


    /* default is extra small */

    /* small */
    @media all and (min-width: 400px) {
        .mod-stats-overview-horizontal--stat--label {
            font-size: 13px;
        }

        .mod-stats-overview-horizontal--stat--value {
            font-size: 18px;
        }
    }

    /* medium */
    @media all and (min-width: 700px) {

        header {
            display: flex;
            justify-content: space-between;
        }

        .share {
            margin-top: 28px;
            margin-left: 20px;
            margin-bottom: 0;
            display: flex;
        }
              
        .content-wrapper nav {
            margin: 5px 0 20px 0;
            padding: 0;
        }

        h1 {
            font-size: 32px;
            font-weight: 600;
            margin: .6em 0 .6em 0;
        }
    
        h2 {
            font-size: 32px;
            font-weight: 600;
            margin: .1em 0 .5em 0;
        }
    
        .mod h2 {
            margin: 5px 0 15px 5px;
            font-size: 26px;
            font-weight: 600;
        }

        .hide-on-desktop {
            display: none;
        }
        
        .content-wrapper {
            padding-left: 10px;
            padding-right: 10px;
        }
        
        .content {
            display: flex;
            
        }   
        
        .col-a, .col-c {
            display: block;
            width: 300px;
        }

        .col-a {
            margin-right: 20px;
        }

        .col-c {
            margin-left: 30px;
        }
        

        .col-bc {
            width: calc(100% - 320px);
        }

    }

    /* large */
    @media all and (min-width: 1100px) {

        .show-mobile {
            display: none !important;
        }

        .hide-mobile {
            display: flex !important;
        }

        .mod-update-feature-section-1 {
            margin-bottom: 0;
            float: left;
            width: 450px;
            margin: 0 25px 15px 0;
        }
        
        .col-c {
            margin-left: 60px;
        }
    }

    /* xl */
    @media all and (min-width: 1200px) {

    }    

    /* END layout */



    /* generic styles */

    p {
        margin-bottom: 20px;
        font-size: 18px;
        line-height: 30px;
    }
    /* END generic styles */


    .mod-update-feature-image {
        margin-bottom: 10px;
        position: relative;
    }

    .mod-update-feature-image-credit {
        position: absolute;
        bottom: 9px;
        right: 12px;
        text-shadow: 2px 2px 6px #000000, -2px -2px 6px #000000;
        color: #dedede;
        font-size: 13px;
    }
    
    .mod-update-feature-image img {
        border-radius: 5px;
        width: 100%;
    }

    .mod-update-feature {
        margin-top: 30px;
        margin-bottom: 30px;
        overflow: auto;
        background: var(--module-background);
        padding: 10px 20px;
        border-radius: var(--border-radius);
        box-shadow: var(--module-shadow);
    }

    div.col-bc section.mod-update-feature:first-of-type {
        margin-top: 0;
    }


    /* badges */

    .mod-update-feature-requirements {
        justify-content: space-between;
        display: flex;
        margin-bottom: 7px;
    }

    .mod-update-feature-requirement {
        display: flex;
        font-size: 12px;
        line-height: 22px;
    }

    .mod-update-feature-requirement-label {
        margin-right: 8px;
        line-height: 24px;
    }

    .mod-update-feature-requirement-name {
        padding: 0 5px;
        border-radius: 3px;
        border: 1px solid transparent;
        margin-right: 5px;
    }

    .mod-update-feature-requirement-name span {
        font-size: 8px;
        vertical-align: bottom;
        color: white;
    }

    .requirement-name-region-available {
        background: #0da448;
        color: white;
    }

    .requirement-name-region-unavailable {
        background: #b00000a8;
        color: white;
    }

    .requirement-name-model {
        background: black;
        border: 1px solid var(--button-border);
        color: white;
        font-weight: 600;
        margin-right: 2px;
        height: 24px;
        white-space: nowrap;
    }

    .requirement-name-model-unavailable {
        font-weight: 400;
    }

    .requirement-name-feature {
        background: var(--page-background);
        color: var(--text);
        font-weight: 400;
        border: 1px solid var(--button-border);
        height: 24px;
        white-space: nowrap;
    }

    .mod-update-feature-language-disclaimer {
        background-color:var(--page-background);
        color: var(--text);
        border-radius: 5px;
        padding: 5px 8px;
        font-weight: 400;
        font-size: 12px;
        margin-bottom: 10px;
        border: 1px solid var(--button-border);
    }

    /* END badges */


    /* START statistics mod horizontal */

    .mod-stats-overview-horizontal--content {
        display: flex;
        justify-content: space-evenly;
        margin: 0 0 10px 0;
    }

    .mod-stats-overview-horizontal--footer {
        text-align: right;
        margin: 11px 0 0 0;
        font-size: 13px;
    }

    .mod-stats-overview-horizontal--stat {
        margin-right: 10px;
    }

    .mod-stats-overview-horizontal--stat:last-child {
        margin-right: 0;
    }

    .mod-stats-overview-horizontal--stat--label {
        text-align: center;
        margin-bottom: 7px;
    }

    .mod-stats-overview-horizontal--stat--value {
        background: var(--text);
        padding: 4px 4px;
        text-align: center;
        border-radius: 10px;
        color: white;
    }

    .dark .mod-stats-overview-horizontal--stat--value {
        background: black;
    }
                    
    /* END statistics mod horizontal */



    /* update statistics page */

    .chart-legend-color {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 5px;
    }

    .mod-stats-overview-stat-value {
        font-size: 26px;
        font-weight: 600;
        line-height: 50px;
    }    
    .mod-stats-overview-stat-info-text {
        line-height: 50px;
        font-size: 14px;
    }

    .mod-stats-overview-stat-info {
        display: flex;
    }

    .mod-stats-overview-stat {
        justify-content: space-between;
        display: flex;
        margin: 0 0 5px -10px;
    }

    h2.sticky-header {
        position: sticky;
        top: 0;
        padding: 10px 15px 10px 15px;
        margin-bottom: 0;
        background: var(--module-background);
        z-index: 5;
    }

    /* MODULES */

    /* photo/text module */
    .mod-image-text--image-wrapper {
        margin-bottom: 8px;
    }

    .mod-image-text--image-wrapper img {
        border-radius: 5px;
        
    }

    .mod-image-text--headline {
        margin-left: 2px;
        font-size: 15px;
    }

    .mod-image-text--item {
        margin-bottom: 30px;
    }






.mod-sponsors {
    padding: 15px;
    border-radius: 5px;
    background: white;
    color: black;
    margin-bottom: 20px;
}

.mod-sponsors p {
    margin-bottom: 10px;
    font-size: 16px;
}

body.light .mod-sponsors a, body.dark .mod-sponsors a, body.dark .mod-sponsors a:visited, body.light .mod-sponsors a:visited {
    color: black;
}

.mod-sponsors .sponsor {
    margin-bottom: 20px;
}

@media all and (min-width: 1100px) {
    .mod-sponsors .sponsor {
        display: flex;
    }
}

.mod-sponsors .sponsor .sponsor-about {
    flex-shrink: 0;
    flex-grow: 0;
    padding-right: 15px;
    padding-bottom: 15px;
}

.mod-sponsors .become-sponsor {
    margin-top: 20px;
}

.chart-last-update {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.chart-last-update time {
    background-color: var(--module-background);
    border-radius: 5px;
    padding: 4px 6px;    
}

.chart-last-update .chart-last-update-mode {
    padding: 4px 0;
}                                    

.chart-description {
    font-size: 16px;
    margin-top: 25px;
}

/* START icons */

.light .mod-update-overview-feature-icon {
    filter: brightness(0) saturate(100%) invert(17%) sepia(0%) saturate(283%) hue-rotate(147deg) brightness(96%) contrast(93%);
}

.airbag-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/airbag_icon.png);
}



.climate-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/climate_icon.png);
}

.message-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/message_icon.png);
}

.seat-heater-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/seat_heater_icon.png);
}

.toybox-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/toybox_icon.png);
}

.alert-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/alert_icon.png);
}

.cold-weather-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/cold_weather_icon.png);
}

.mirror-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/mirror_icon.png);
}

.seats-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/seats_icon.png);
}

.track-mode-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/track_mode_icon.png);
}

.arcade-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/arcade_icon.png);
}

.connectivity-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/connectivity_icon.png);
}

.music-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/music_icon.png);
}

.siriusxm-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/siriusxm_icon.png);
}

.tunein-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/tunein_icon.png);
}

.autopilot-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/autopilot_icon.png);
}

.dashcam-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/dashcam_icon.png);
}

.nav-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/nav_icon.png);
}

.software-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/software_icon.png);
}

.vent-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/vent_icon.png);
}

.battery-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/battery_icon.png);
}

.entertainment-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/entertainment_icon.png);
}

.personalization-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/personalization_icon.png);
}

.speaker-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/speaker_icon.png);
}

.speaker-mute-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/nata_speaker_mute_icon.png);
}

.voice-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/voice_icon.png);
}

.biohazard-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/biohazard_icon.png);
}

.exterior-lights-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/exterior_lights_icon.png);
}

.phone-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/phone_icon.png);
}

.spotify-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/spotify_icon.png);
}

.welcome-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/welcome_icon.png);
}

.bluetooth-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/bluetooth_icon.png);
}

.keys-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/keys_icon.png);
}

.physicalcontrols-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/physicalcontrols_icon.png);
}

.suspension-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/suspension_icon.png);
}

.wifi-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/wifi_icon.png);
}

.camera-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/camera_icon.png);
}

.language-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/language_icon.png);
}

.qq-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/qq_icon.png);
}

.tesla-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/tesla_icon.png);
}

.ximalaya-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/ximalaya_icon.png);
}

.caraoke-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/caraoke_icon.png);
}

.lock-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/lock_icon.png);
}

.radio-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/radio_icon.png);
}

.tidal-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/tidal_icon.png);
}

.yoke-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/yoke_icon.png);
}

.charging-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/charging_icon.png);
}

.manual-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/manual_icon.png);
}

.release-notes-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/release_notes_icon.png);
}

.touchscreen-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/touchscreen_icon.png);
}

.nata-percent-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/nata_percent_icon.png);
}

.nata-pending-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/nata_pending_icon.png);
}

.nata-calendar-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/nata_calendar_icon.png);
}

.nata-software-yesterday-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/nata_software_yesterday_icon.png);
}

.nata-new-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/nata_new_icon.png);
}

.nata-fixes-icon {
    background-image: url(https://www.notateslaapp.com/assets/icons/night/nata_fixes_icon.png);
}

/* end icons */

body {
    --light-dark-gray: #edeef0;
}

body.tesla-site {
    --footer-top: #161c25;
    
    --button-background: #F7F9F9;
    --button-background-hover: #f1f1f1;
    --button-text: #414141;
    --button-border: #969696;

    --button-highlight-background: #3b68e4;
    --button-highlight-background-hover: #537ff6; 
    --button-highlight-text: white;
    --button-highlight-border: #3b68e4;

    --button-selected-background: #414141;
    --button-selected-background-hover: #000;
    --button-selected-text: #F7F9F9;
    --button-selected-border: #414141;
}

body.dark.tesla-site {
    --button-background: #161c25;
    --button-background-hover: #222c3c;
    --button-text: #F7F9F9;
    --button-border: #222c3c;

    --button-highlight-background: #0055d3;
    --button-highlight-background-hover: #277eff; 
    --button-highlight-text: white;
    --button-highlight-border: #0055d3;

    --button-selected-background: #000;
    --button-selected-background-hover: #000;
    --button-selected-text: #F7F9F9;
    --button-selected-border: #000;    
}

body.rivian-site {
    --footer-top: #181e27;

    --button-background: #F7F9F9;
    --button-background-hover: #f1f1f1;
    --button-text: #414141;
    --button-border: #969696;

    --button-highlight-background: #0b526c;
    --button-highlight-background-hover: #0e6584; 
    --button-highlight-text: white;
    --button-highlight-border: #0b526c;

    --button-selected-background: #414141;
    --button-selected-background-hover: #000;
    --button-selected-text: #F7F9F9;
    --button-selected-border: #414141;
}

body.dark.rivian-site {
    --button-background: #161c25;
    --button-background-hover: #2a3341;
    --button-text: #F7F9F9;
    --button-border: #2a3341;

    --button-selected-background: #000;
    --button-selected-background-hover: #000;
    --button-selected-text: #F7F9F9;
    --button-selected-border: #000;      
}

/* comments mod */

.comments-mod {
    margin-top: 40px;

}

.comments-mod__comment-wrapper {
    border: 1px solid #eaeaea;
    padding: 10px;
    border-radius: 5px;
    background: white;
    margin-bottom: 15px;
}

.comments-mod__comment-header {
    display: flex;
    justify-content: space-between;
}

.comments-mod__button {
    all: unset;
    font-weight: 600;
    font-size: 14px;
    margin: 10 0 10px 10px;
}

.comments-mod__user {
    background: black;
    color: var(--text);
    padding: 4px 12px;
    border-radius: 5px;
}

.comments-mod__comment {
    margin: 15px 0;
    font-size: 16px;
}

.light .comments-mod__leave-comment {
    border: 1px solid #eaeaea;
    padding: 10px;
    border-radius: 5px;
    background-color: white;
    width: 100%;
}

.comments-mod__comment-footer {
    text-align: right;
}


/* end comments mod */



/* buttons */

/* shared button styles */
.button {
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    padding: 6px 16px;
    font-weight: 500;
    background-position: center;
    text-decoration: none;
    margin-right: 10px;
    display: inline-block;
    cursor: pointer;
}

.button:last-child {
    margin-right: 0;
}

.button-size-large {
    font-size: 16px;
    padding: 8px 24px;
}

/* regular button */
.button {
    background: var(--button-background);
    border: 1px solid var(--button-border);
    color: var(--button-text);        
}

.button:hover {
    text-decoration: none;
    background: var(--button-background-hover);
}

.button:active {
    box-shadow: inset 0 1px 3px 0 rgb(0 0 0 / 50%);
}

.dark .button:active {
    box-shadow: inset 0 1px 3px 0 rgb(0 0 0 / 100%);
}

.button .button-badge {
    border-radius: 50%;
    width: 21px;
    height: 21px;
    line-height: 21px;
    text-align: center;
    margin-left: 10px;
    font-size: 13px;
    font-weight: 400;
    float: right;
    margin-right: -6px;
}

.button-badge {
    background: var(--text);
    color: var(--page-background);
}

/* selected button */

.button.button-selected {
    background: var(--button-selected-background);
    color: var(--button-selected-text);
    border: 1px solid var(--button-selected-border);
}

.button.button-selected:hover {
    background: var(--button-selected-background-hover);
}

.button-selected:active {
    box-shadow: inset 0 1px 3px 0 rgb(0 0 0 / 100%);
}


/* highlight button */
.button.button-highlight {
    background: var(--button-highlight-background);
    color: var(--button-highlight-text);
    border: 1px solid var(--button-highlight-border);
}

.button.button-highlight:hover {
    background: var(--button-highlight-background-hover);
    border: 1px solid var(--button-highlight-border);
}

.button.button-highlight:active {
    box-shadow: inset 0 1px 3px 0 rgb(0 0 0 / 50%);
}

/ * select button */
select.select-button {
    font-size: 14px;
    height: 35px;
    padding: 0 10px;
    border-radius: 10px;
    font-weight: 500;
    margin-right: 10px;
}

/* button containers */
.button-container {
    margin: 15px 0;
}

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

/* END buttons */


/* ads */

/* indexes */
body.index-page .col-ab .adthrive-ad {
    background: var(--module-background);
    box-shadow: var(--module-shadow);
    border-radius: var(--border-radius);
}

body.has-video .adthrive-collapse-player {
    padding: 0 !important;
    width: 100% !important;
    border-bottom: 0 !important;
    border-top: 0 !important;
    height: auto !important;
}

.video-player-module-wrapper {
    position: sticky;
    top: 104px;
    border-bottom: 5px solid var(--page-background);
    z-index: 5;
}

.site-index-page .video-player-module-wrapper {
    top: 64px;
}

.tesla-app-updates-individual-page .video-player-module-wrapper, .software-updates-individual-page .video-player-module-wrapper {
    border-bottom: 5px solid var(--page-background);
}

.adthrive-footer-message>span {
    display: none;
}

/* webpushr */
popup_poweredby {
    display: none !important;
}


/* site footer */

.site-footer {
	color: white;
	margin-top: 30px;
    max-width: 1400px;
    margin: 10px auto 0 auto;
}

.site-footer h3 {
    margin-bottom: 7px;
}

.site-footer__social, .site-footer__links {
    background-color: var(--footer-top);
    padding: 20px 20px 20px 20px;
    display: grid;
}

.site-footer__links {
    gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.site-footer__social {
    gap: 25px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}


@media all and (min-width: 700px) {
    .site-footer__social, .site-footer__links {
        padding: 25px 30px 15px 30px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

.site-footer__about {
	background-color: var(--header-secondary-nav);
	justify-content: space-between;
	display: flex;
    flex-wrap: wrap;
	padding: 10px 30px;
    align-items: center;
}

.site-footer__about img.rivian-footer-logo {
    height: 35px;
    padding: 5px 0;
}

.site-footer__about img.tesla-footer-logo {
    height: 35px;
}

.site-footer__about span {
    font-size: 14px;
}

.site-section-logos {
    display: flex;
    flex-wrap: wrap;
}

.site-section-logos img {
    opacity: .7;
    margin: 5px 30px 5px 0;
}

.site-section-logos img:hover {
    opacity: 1;
}

.site-section-content {
    flex: 0 1 auto;
}
.site-section-social img {
	height: 45px;
    display:inline-block;
    padding: 5px;
}

.site-section-newsletter {
	flex-grow: 1;
	max-width: 400px;
}

.site-section-social img:hover {
	background-color: #2f3948;
	border-radius: 5px;
}

.site-footer h3 {
	font-size: 18px;
	text-align: left;
}

.site-footer div.site-section-links a {
	display: block;
	margin-top: 0;
	margin-bottom: 3px;
	font-size: 14px;
	color: white !important;
    text-decoration: none;
}

.site-footer div.site-section-links a:hover {
    text-decoration: underline;
}

.site-footer .input-wrapper {
    padding: 2px;
    border-radius: 5px;
    background-color: white;
    height: 45px;
    font-size: 20px;
	max-width: 500px;
	display: flex;
	justify-content: space-between;    
}

.site-footer input {    
    font-size: 1em;
    padding: 8px 0 8px 8px; 
    background-color: white; 
    color: black;
    border: none !important;
    margin-right: 5px;
}

.header-auth-buttons {
    margin: auto;
    max-width: 1400px;
    padding: 10px 10px 0 10px;
    text-align: right;
}


/* START adthrive styles overrides */
body.dark .adthrive-sticky.adthrive-footer {
    background-color: rgba(var(--tesla-very-dark-gray),.7); /* with alpha channel */
}

.adthrive-sticky.adthrive-footer {
    border-top: none !important;
}
/* END adthrive styles overrides */


    
/ * social buttons */

body.news-page .share {
    margin-top: 15px;
}

.share {
    margin-top: 2px;
    display: flex;
}

.share a {
    display: block;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border-radius: 5px;
}

.software-updates-individual-page div.share a, 
.news-page div.share a {
    border-bottom: none;
}

.share a:last-child {
    margin-right: 0;
}

.share a:hover {
    filter: brightness(80%);
}

.share a:active {
    filter: brightness(120%);
}

.share a img {
    margin-left: 6px;
    margin-top: 6px;
}

.youtube {
    background-color: #fe0000;
}

.bluesky {
    background-color: #1185fe;
}

.twitter {
    background-color: #000;
}

.threads {
    background-color: #0b0b0b;
}

.facebook {
    background-color: #1877f2;
    /*border: 2px solid #1877f2;*/
}
.reddit {
    background-color: #ff4500;
    /*border: 2px solid #ff4500;*/
}
.messenger {
    background-color: #2f17f2;
    /*border: 2px solid #2f17f2;*/
}
.email {
    background-color: #525252;
}

/* end social buttons */

/* table */

div.inline {
    overflow-x: auto;
    margin: 0 -15px;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 20px;
}

.news table p {
	margin: 0;
	font-size: unset;
	line-height: unset;
}

table th, table td {
    padding: 5px;
}

table tr th {
    padding-top: 15px;
    padding-bottom: 15px;
}

table tr:not(.row-header) th:first-child {
    border-top-left-radius: var(--border-radius);
}

table tr:not(.row-header) th:last-child {
    border-top-right-radius: var(--border-radius);
}

table td {
    padding-top: 13px;
    padding-bottom: 13px;
}

table td:first-child, table th:first-child {
    padding-left: 15px;
}

/* large */
@media all and (min-width: 1100px) {
    table td:first-child, table th:first-child {
        padding-left: 25px;
    }
}

.light table tbody {
    border-left: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
}

.dark table tbody {
    border-left: 1px solid #11151b;
    border-right: 1px solid #11151b;
}

.light table tr {
  border-bottom: 1px solid  #e6e6e6;
}

.dark table tr  {
  border-bottom: 1px solid #11151b;
}

.light table tr:hover {
    background: #ecf1ff !important;
}

.dark table tr:hover {
    background: #212936 !important;
}

table tr:hover a {
    text-decoration: underline;
}

table a {
	color: var(--link-active-color) !important;
	font-weight: 600;
    display: block;  
}

.light table tr:nth-child(even) {
    background: #f8f8fa;
}

.dark table tr:nth-child(even) {
    background: #11151b;
}

table th {
    text-align: left;
    background-color: var(--header-secondary-nav);
    color: white;
}

table td.checkmark {
    background: url(https://www.notateslaapp.com/assets/checkmark.png) no-repeat center center;
}

table td.center, table th.center {
    text-align: center;
}

tr.row-header th {
	background: var(--page-background);
	line-height: 10px;
	color: var(--text);
}


/* end table */



/* subscriptions */

.subscription-banner {
    font-size: 16px;
    font-weight: 500;
    padding: 4px 10px;
    color: white;
    background-color: var(--header-secondary-nav);
    border-radius: var(--border-radius);
    margin-bottom: 10px;
}

.flex {
    display: flex;
}

#card-element {
    padding:20px 0;
}

.subscription-plans-wrapper {
    display: flex;
    gap: 10px;
}

.subscription-plan {
    background-color: var(--page-background);
    border-radius: var(--border-radius);
    padding: 10px 15px;
    text-align: center;
    font-size: 11px;
}

.subscription-plan h3 {
    font-size: 20px;
}

.subscription-plan ul {
    font-size: 15px;
    font-weight: 500;
    list-style: none;
    margin: 15px 0;
    padding: 0;
}

.subscription-plan ul li {
    margin: 6px 0;
}

.subscription-message, .subscribing-message-state {
    font-size: 16px;
    font-weight: 500;
    margin: 20px 0 10px 0;
}

.offer-code-wrapper {
    margin-top: 10px;
}

.offer-code-input {
    display:none;
    font-size:12px;
    margin: 10px 0 5px 0;
}

.offer-code-input input {
    max-width: 400px;
    margin-right: 10px;
    padding: 2px 12px;
}

a.enter-offer-code {
    color:var(--link-active-color);
    font-weight: 500;
    font-size: 14px;
    
}

.offer-code-message {
    display: none;
    padding: 2px 7px;
    border-radius: 5px;
    background-color: var(--button-selected-background);
    color: var(--button-selected-text);
    font-size: 12px;
    width: fit-content;
}


.subscription-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0;
    font-size: 17px;
}

.subscription-details .detail {
    display: flex;
}

.subscription-details .property {
    font-weight: bold;
    min-width: 200px;
}

.subscription-details .value {
    text-align: left;
    flex: 1;
}

/* END subscriptions */


/* article styles */
code {
    background-color: var(--page-background);
	color: var(--link-active-color);
	padding: 0 .3em;
}

/* end article styles */
    /* modal */
    
    body.modal-open {
        height: 100vh;
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
    
    .modal-wrapper {
        background: rgba(0,0,0,.5) none;
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 100%;
        height: 100%;
    }

    .modal {
        padding: 15px 20px;
        margin: auto auto;
        display: block;
        position: relative;
        top: 0;
        margin: auto;
        width: 100%;
        max-width: 1000px;
        height: 100%;
        z-index: 10010;
        font-size: 14px;
        overflow: auto;
    }

    /* medium */
    @media all and (min-width: 700px) {
        .modal {
            max-height: 800px;
        }
    }

    input, textarea {
        border-radius: 5px;
    }

    input, textarea {
        background: var(--page-background);
        border: 1px solid var(--module-hover-border);
        color: var(--text);
    }


    .modal {
        box-shadow: 0 0 11px 0 #8d8d8d;
        background: var(--module-background);
        color: var(--text);
    }

    .dark .modal {
        box-shadow: 0 0 11px 0 #000;
    }

    .modal .modal__section-footer {
        margin-top: 20px;
    }

    .modal header {
        display: flex;
    }

    .modal header .close-icon-wrapper {
        width: 20%;
    }

    .modal header .close-icon {
        all: unset;
        background: url(https://www.notateslaapp.com/assets/close-icon.svg) no-repeat bottom right;
        height: 35px;
        width: 35px;
        cursor: pointer;
        float: right;
        border-radius: 5px;
    }

    .modal header .close-icon:hover {
        transition: background-color .2s;
    }

    .light .modal header .close-icon:hover {
        background-color: var(--module-hover);
    }
    
    .dark .modal header .close-icon:hover {
        background-color: black;
    }

    input, textarea {
        font-size: 1.3em;
    }

    input {
        padding: 14px;
        width: 100%;
        padding: 8px 12px;        
    }

    .modal header h2 {
        margin: 0 0 15px 0;
        font-size: 1.75em;
        text-align: center;
        padding-left: 20%;
        width: 80%;
    }

    /* small */
    @media all and (min-width: 400px) {
    }

    /* medium */
    @media all and (min-width: 700px) {
        .modal {
            height: calc(100% - 10%);
            top: 50%;
            transform: translateY(-50%);
            width: 70%;
            border-radius: 5px;
            font-size: 16px;
        }
    }

    /* large */
    @media all and (min-width: 1100px) {
    }

    /* xl */
    @media all and (min-width: 1200px) {
        .modal {
            width: 60%;
        }
    }



    /* search */

    .light .highlight {
        background: #fae681;
    }

    .dark .highlight {
        background: #cc0000;
    }

    .mod-search__search-box {
        margin-bottom: 20px;
    }

    .mod-search__search-results-wrapper h3 {
        text-align: left;
        font-size: 1.25em;
        margin: 0 20px 10px 20px;
    }

    .mod-search__search-results-wrapper {
        overflow-y: scroll;
        margin-left: -20px;
        margin-right: 0;
    }

    .mod-search__search-results {
        margin-bottom: 100px;
    }

    .mod-search__search-results-item {
        display: flex;
        margin: 5px 10px;
        padding: 10px;
        border-radius: 5px;
        text-decoration:  none;
        border: 1px solid transparent;
    }

    .light .mod-search__search-results-item {
        color: var(--text);
    }

    .mod-search__search-results-item-description h4 {
        font-size: 1.10em;
        font-weight: normal;
        padding: 0 20px;
    }

    .mod-search__search-results-item:hover {
        text-decoration: none;
    }

    .mod-search__search-results-item:hover {
        background: var(--module-hover);
        border: 1px solid var(--module-hover);
    }

    .dark .mod-search__search-results-item:hover {
        border: 1px solid var(--module-hover-border);
    }

    .mod-search__search-results-item img {
        width: 100px;
        object-fit: cover;
        max-height: 56px;
        max-width: 100px;
        border-radius: 5px;    
    }


    /* small */
    @media all and (min-width: 400px) {
    }

    /* medium */
    @media all and (min-width: 700px) {
        .mod-search h2 {
            margin: 10px 0 20px 0;
        }

        .mod-search__search-results-item img {
            width: 150px;
            max-height: 84px;
            max-width: 150px;              
        }
    }

    /* large */
    @media all and (min-width: 1100px) {
    }

    /* xl */
    @media all and (min-width: 1200px) {
    }



    /* AUTH */
    .mod-auth section {
        max-width: 400px;
        margin: 20px auto 0 auto;
    }

    .mod-auth label {
        display: block;
        font-size: 1.5em;
        margin-bottom: 10px;
    }

    .mod-auth__form-field {
        margin-bottom: 20px;
    }
    
    .mod-auth input {
        width: 99%;
    }

    .mod-auth__message {
        font-weight: bold;
    }

    /* medium */
    @media all and (min-width: 700px) {
        .modal.mod-auth {
            max-width: 500px;
            max-height: 500px;
        }

        .modal.mod-auth-signup {
            max-height: 700px;
        }        
    }

    .mod-auth__loading {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);    
    }

    /* END AUTH */
    

    /* START LANGUAGES MODAL */
    .modal-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    }

    .modal-list img {
        border-radius: 50%;
        height:30px;
        width:30px;
        margin-right:12px;
        margin-bottom: -8px;
        display: inline;
    }

    .modal-list a {
        font-size: 20px;
        line-height: 46px;
    }
    /* END LANGUAGES MODAL */