body {
    --border-radius: 5px;
    --tesla-very-dark-gray: #1e1e1e;
    --dark-gray: #272727;
    --tesla-dark-gray: #666;
    --tesla-light-gray: #ccc;
    --light-dark-gray: #edeef0;
}

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: white;
    --module-hover-border: #eaeaea;    
    --text: #0e0e0e;
    --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: #181e27;
    --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;
}

* {
    box-sizing: border-box;
}

body {
    color: var(--text);
    background-color: var(--page-background);    
    font: 14px 'Open Sans', -apple-system, BlinkMacSystemFont, "Roboto", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
    line-height: 1.4;
    margin: 0 0 80px 0;
}

input, textarea {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Roboto", "Arial", "Helvetica Neue", "Helvetica", sans-serif;
}

/* small */
.content {
    display: flex;
    margin: 5px auto;
    width: 100%;
    margin-top: 5px;
}

.col-ab {
    width: calc(100% - 10px);
    margin-left: 5px;
    margin-right: 5px;
}

body.news-page .col-ab,
body.tesla-app-updates-individual-page .col-ab,
body.software-updates-individual-page .col-ab {
    margin-top: 0;
}

body.news-page .article-container,
body.software-updates-page section.updates-wrapper,
body.software-updates-individual-page .article-container,
body.tesla-app-updates-individual-page .article-container,
body.fsd-beta-page .generic-module,
body.fsd-beta-page section.updates-wrapper {
    margin-left: -5px;
    margin-right: -5px;
    border-radius: 0;
}

.col-c {
    display: none;
}

.col-a {
    display: none;
}

.book-wrapper-news {
    text-align: center;
    margin: 15px 0;
}

p.quote {
    font-style: italic;    
    margin-left: 10%;
    padding-left: 20px;
    border-left: 6px solid var(--header-secondary-nav);
}

/* only display news description on larger displays */
.index-news-mod .news-description {
    display: none;
    font-size: 16px;
    line-height: 1.6;
    margin-top: 10px;
}

/* medium */
@media (min-width: 651px) {

    .content {
        margin-top: 10px;
    }

    .updates-wrapper {
        padding: 15px 15px 1px 15px;
    }

    a.update-wrapper {
        padding: 15px 15px 13px 15px !important;
    }

    body.news-page .article-container,
    body.software-updates-page section.updates-wrapper,
    body.tesla-app-updates-individual-page .article-container,
    body.software-updates-individual-page .article-container,    
    body.fsd-beta-page .generic-module,
    body.fsd-beta-page section.updates-wrapper {    
        margin-left: 0;
        margin-right: 0;
        border-radius: 5px;
    }

    .col-ab .mobile-only-on-col-ab {
        display: none;
    }

    .col-ab {
        width: calc(100% - 220px);
        margin-right: 10px;
    }

    .col-c {
        margin-right: 5px;
        display: block;
        width: 200px;
    }

    body.software-updates-individual-page div.share {
        display: flex;
    }
}

/* large */
@media (min-width: 851px) {

    .news-page article h1 {
        font-size: 36px;
    }

    .col-ab {
        margin-left: 10px;
        width: calc(100% - 330px);
    }

    .col-c {
        margin-right: 10px;
        width: 300px;
    }

    .book-wrapper-news {
        float: right;
        margin: 15px 0 15px 15px;
    }    
}

/* x-large */
@media (min-width: 1020px) {

    .col-ab {
        width: calc(100% - 580px);
        margin-right: 20px;
        margin-left: 0;
    }

    .news-page .col-ab, .news-page .col-bc {
        width: calc(100% - 330px);
        margin-left: 10px;
    }

    .col-a {
        width: 220px;
        margin: 0 20px 0 10px;
        display: block;
    }

    .has-col-a .col-c .hide-if-in-col-a {
        display: none;
    }

    .has-col-a .col-ab .hide-if-in-col-a {
        display: none;
    }

}


/* xx-large */
@media (min-width: 1240px) {
    .content {
        max-width: 1240px;
    }
}


/* icons */
.icon {

}

.autopilot-icon {
    background: no-repeat url('https://www.notateslaapp.com/assets/icons/autopilot-icon_20w.png');
    background-size: 20px;
    height: 20px;
    width: 20px;
    display: inline-block;
    vertical-align: middle;
}

.autopilot-icon-with-version {
    background: #006ffd no-repeat url(https://www.notateslaapp.com/assets/icons/autopilot-icon_20w.png);
    background-size: 20px;
    height: 20px;
    padding: 2px 10px 0 22px;
    border-radius: 5px;
    color: white;
    font-size: 12px;
    margin-top: 4px;
    margin-left: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

/* end icons */


/* modules */

.module-end-article-highlight {
    padding: 15px 20px 10px 20px;
    margin-top: 20px;
    border: 1px solid #edeef0;
    border-radius: 5px;
}

/* release notes details */
.news .release-notes-details p {
    font-size: 14px;
    line-height: 22px;
    margin-top: 39px;
}


/* follow us module */
.follow-us {
    display: flex;
    justify-content: space-evenly;
}


article.news .follow-us a {
    border-bottom: none;
}

.youtube-follow img {
    height: 50px;
}


/* book mod */
.book, .book3 {
    overflow: visible;
    text-align: center;
}

.book-sticky-bottom {
    position: relative;
    bottom: 0;
    animation: animateFromBottom 2s;
    margin-right: 80px;
}

@keyframes animateFromBottom {
    from {bottom: -90px;}
    to {bottom:0;}
}

.col-ab .release.release-book {
    padding: 5px;
}



.book h4, .book3 h4 {
    font-size: 18px;
}

.by-adfinity {
    bottom: 5px;
    right: 5px;
    position: absolute;
    height: 14px;
}

.text-book-mod {
    margin-bottom: 10px;
}

.release-book {
    position: relative;
}

.release-book>h4, .col-a h4, .col-c h4 {
    text-align: center;
}

.photo-text-book-mod .photo-book-mod img {
    width: 100%;
}

.photo-text-book-mod .photo-book-mod img {
    border-radius: 5px;
    object-fit: contain;
    max-height: 100px;
    min-width: 85px;
    object-position: 50% 50%;    
}

.text-book-mod p {
    margin: 0;
}

.col-ab .photo-text-book-mod {
    display: flex;
}
.col-ab .photo-text-book-mod .photo-book-mod {
    margin-right: 10px;
    max-width: 220px;
}

.col-c .photo-text-book-mod .photo-book-mod {
    margin-bottom: 10px;
    max-width: 100%;
}

@media (max-width: 430px) {
    .text-book-mod h4 {
        display: none;
    }
  
}

@media (min-width: 431px) {
    .release-book>h4 {
        display: none;
    }    
}

/* End book */

/* photo/text mod */

.col-c .photo-text-mod {
    margin-bottom: 18px;
    padding-bottom: 4px;
}

.light .col-c .photo-text-mod {
    border-bottom: 1px solid var(--page-background);
}

.dark .col-c .photo-text-mod {
    border-bottom: 1px solid var(--dark-gray);
}

.light .col-c .photo-text-mod:last-child, .dark .col-c .photo-text-mod:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.col-c .photo-text-mod .photo-mod {
    margin-bottom: 5px;
    width: 100%;
}

.photo-text-mod .photo-mod img {
    width: 100%;   
}

.photo-text-mod .photo-mod.max-height img {
    border-radius: 5px;
    object-fit: cover;
    max-height: 130px;
    object-position: 50% 50%;
}

@media (max-width: 500px) {
    .col-ab .photo-text-mod .photo-mod {
        width: 200px;
        margin: auto;
        margin-bottom: 20px;
    }
}

@media (min-width: 501px) {
    .col-ab .photo-text-mod {
        display: flex;
        margin-top: 25px;
    }
    .col-ab .photo-text-mod .photo-mod {
        margin-right: 20px;
        flex-shrink: 0;
        flex-grow: 0;
        width: 220px;
    }
}
/* End photo/text */

.light .countdown {
    color: white;
}

.countdown {
    margin: 0 auto;
    width: 60px;
    background-color: black;
    border-radius: 10px;
    padding: 5px 8px;
    font-weight: bold;
}


.col-c h3 {
    font-size: 18px;
}

h3 {
    text-align: center;
}

.news h3 {
    text-align: left;
}

.col-ab h3 {
    font-size: 20px;
    font-weight: bold;
}


/* generic classes */

.module-end-article-highlight h3 {
    text-align: center;
}

.light div.newsletter.subscribe {
    background-color: var(--light-dark-gray);
}

.dark div.newsletter.subscribe {
    background-color: white;
}

.center {
    text-align: center;
}

.large-font {
    font-size: 30px;
}
/* sponsor */
.sponsor-package img {
    display: block;
    width: 150px;
    padding-bottom: 10px;
}
.sponsor-example {
    float: right;
    font-size: 12px;
    text-align: center;
    padding: 0 0 10px 10px;
}

.sponsor-package li {
    padding: 8px;
    line-height: 1.4;
}

form {
    margin: 0;
}

.sitemap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.sitemap a {
    display: block;
    margin: 5px;
}

ul {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

/* list module */
.list ul {
    margin: 0 -15px;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
}

.light .list li {
    border-top: 1px dotted var(--light-dark-gray);
}

.dark .list li {
    border-top: 1px dotted var(--dark-gray);
}

.list li {
    padding: 0;
}

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

.list li a, .release-statistics-list li {
    display: block;
    padding: 9px 5px 9px 12px;
}

.release-statistics-list .release-version-tag {
    display: flex;
    justify-content: space-between;
}

.list li.footer-note {
    font-size: 12px;
    
    text-align: right;
    padding: 5px 5px 1px 9px;
}

.list li.footer-note a:hover {
    background-color: transparent;
    text-decoration: underline;
}


.list li.footer-note a {
    padding: 0;
}

/* end list */


/* books */

.release-notes .release-book, .release .release-book {
    border: 1px solid #ccc;
}

div.top-book {
    margin: 0;
    margin-bottom: 15px;
}

.incontent-book-monumetric {
    min-width: 300px;
    min-height: 250px;
}

li {
    padding: 5px 0;
    display: list-item;
}


/* statamic inserts p tags inside of li and td nodes */
.news li>p {
    margin: 0;
}

.news th > p, .news td > p, .news li > p {
    margin: 0;
}

dt, dd {
    padding: 3px;
    line-height: 1.7;
}

p {
    line-height: 1.7;
}

/* news */
.attribution {
    display: flex;
    margin-top: 15px;
    justify-content: space-between;
    height: 15px;
}

.news p {
    font-size: 18px;
    line-height: 34px;
    margin: 18px 0;
}

.col-ab article ul {
    font-size: 18px;
    line-height: 34px;
}


.news ul {
    padding-left: 30px;
    list-style: disc;
    font-size: 18px;
    line-height: 34px;
}

.blur {
    filter: blur(5px);
}

.release {
    border-radius: 5px;
    background-color: var(--module-background);
    padding: 10px 15px;
    overflow: hidden;
}

/* specific release */
.release-feature {
    margin-bottom: 20px;
}

.release-feature-description {
    overflow: auto;
}

/* all links */
a, a:visited {
    color: black;
    text-decoration: none;
}

.dark a, .dark a:visited {
    color: white;
}


/* hover links */
.light a:hover, .dark a:hover{
    text-decoration: underline;
}

/* story - all links */
.news-page .news p a, 
.light .fancy-links a,
.dark .fancy-links a,
.software-updates-individual-page .news a,
.tesla-app-updates-individual-page .news a {
    color: var(--link-active-color);
    font-weight: 600;
    border-bottom: 1px solid var(--link-active-color-border);
}

/* story - all links on hover */
.news-page .news p a:hover, 
.light .fancy-links a:hover,
.dark .fancy-links a:hover,
.software-updates-individual-page .news p a:hover,
.tesla-app-updates-individual-page .news p a:hover {
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* story page */
.image-float-container {
    overflow: auto;
    margin-bottom: 20px;
}

.news-page .article-container {
    border-radius: 5px;
    padding: 4% 0;
}

.news-page .news>*:not(.adthrive-ad):not(.video-container):not(.image-wrapper):not(p.wide) {
    margin-left: 9%;
    margin-right: 9%;
}

@media (max-width: 400px) {
    .news-page .article-container {
        border-radius: 5px;
        padding: 10px 0;
    }    
    .news-page .news>*:not(.adthrive-ad):not(.video-container):not(.image-wrapper):not(p.wide):not(blockquote) {
        margin-left: 15px;
        margin-right: 15px;
    }
}

/* site links */
a.highlight, a:visited.highlight {
    color: var(--link-active-color);
}


.light .news h1 a {
    color: black;
    border-bottom: none;
}
.dark .news h1 a {
    color: white;
    border-bottom: none;
}

/* ad links */
.light .news .book a, .light .news .book3 a {
    color: black;
}
/* ad links */
.dark .news .book a, .dark .news .book3 a {
    color: white;
}


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

a.stylize:hover {
    border-bottom: 1px solid var(--tesla-dark-gray);
    text-decoration: none;
}

.container {
    margin-bottom: 15px;
    box-shadow: var(--module-shadow);
}

article h1 {
    font-size: 26px;
    margin: 5px 0 25px 0;
    text-align: left;
}

h1.page-title {
    font-size: 30px;
    margin: 15px 0 15px 0;
    text-align: center;
}

.notes-container > h1 {
    font-size: 23px;
    font-weight: 600;
    margin: 0 0 10px 0;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
}

h2 {
    font-size:28px;
}

.release>h2, .release-overview>h2 {
    margin-bottom: 20px;
    margin-top: 20px;
}

h2, h3, h4 {
    margin: 0 0 10px 0;
}


.col-a h4, .col-c h4 {
    font-weight: bold;
}
/* 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: 5px 5px 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 5px 5px;
        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: 5px;
}

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: 5px;
    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 */
div.images {
    overflow-x: scroll;
    width: auto;
    white-space:nowrap;
    padding-right:20px;
    margin: 0 -20px 20px -20px;
}

div.images::-webkit-scrollbar {
    display: none;
}	

/* index modules */
.light .writer-bio {
    background-color: var(--page-background);
}

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

.writer-bio {
    padding: 15px;
    border-radius: 5px;
    display: flex;
}

.writer-bio img, .amp .writer-bio amp-img {
    margin-right: 15px;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    flex-grow: 0;
    flex-shrink: 0;
}

.writer-bio p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
}



.index-news-mod {
    margin-bottom: 13px;
    margin-top: 13px;
}

.index-news-mod dd {
    margin: 0 -5px 10px -5px;
}

.index-news-mod:first-of-type {
    margin-top: 0;
}


/* lightbox */

div#lightboxOverlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
}

div#large-image {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display: none;
    z-index: 10000;

}
#large-image img {
    border-radius: 5px;
    cursor: zoom-out;
    box-shadow: #5f5f5f 0px 0px 14px 1px;
}


input[type=checkbox] {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;    
    width: auto;
}


div.but {
    color: white;
    background-color: var(--dark-gray);
}

div.but {
    border: 2px solid var(--dark-gray);
    width: 31px;
    height: 31px;
    border-radius: 50%;
    text-align: center;
    vertical-align: bottom;
    font-size: 22px;
    float: left;
}
.hide {
    display: none;
}
#main {
    margin-bottom: 50px;
}



/* multi selector */

.selector a {
    margin: 3px 3px;
    padding: 6px 12px;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
}

.selector a.selected {
    color: var(--button-highlight-text);
    background-color: var(--button-highlight-background);
    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.32);
}

.selector a:hover {
    text-decoration: none;
    color: var(--button-highlight-text);
    background-color: var(--button-highlight-background-hover);
    box-shadow: 0 1px 8px 0 rgba(0,0,0,0.32);
}

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

.selector {
    background: var(--module-background);
    font-size: 14px;
    margin: 0 auto;
    border-radius: 5px;
    display: inline-block;
}

.selector-container {
    text-align: center;
    margin: 15px 0;
}

.col-ab .selector-container:first-child {
    margin-top: 10px;
}


/* end multi selector */


/* button */
.button-container {
    margin: 15px 0;
    text-align: center;
    font-size: 14px;
}

.light a.button-follow, .dark a.button-follow {
    border-radius: 5px;
    display: inline-block;
    color: white;
    border: 1px solid transparent;
    color: white;
    margin-top: 9px;
    display:flex;
    padding: 0 20px 0 0;
}

.light div.button-follow-text, .dark div.button-follow-text {
    margin-top:8px;
}

.light .button-follow:hover, .dark .button-follow:hover {
    text-decoration: none;
    opacity: .8;
}

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

/* end button */



/* preferences and contact us*/
input.preferences, textarea.preferences {
    background-color: var(--page-background) !important;
}

.dark input.preferences, .dark textarea.preferences {
    background-color: var(--module-hover) !important;
}

input.preferences, textarea.preferences {
    border-radius: 5px;
    padding: 10px 15px;
    width: 100%;
    margin-bottom: 15px;
}

textarea.preferences {
    height: 200px;
    border: none;
}

.preferences li {
    margin: 5px 0;
    display: flex;    
}

.preferences ul {
    padding: 0;
}

.preferences li input {
    margin-right: 10px;
    flex-shrink: 0;
}

/* end preferences and contact us*/



/* major releases */
.major-releases ul {
    margin-bottom: 30px;
}

.release.major-releases {
    padding: 0;
}

/* release notes */

dl {
    margin: 0;
}

dt {
    font-size: 24px;
    margin: 20px 0 0 0;
    padding: 0;
    font-weight: bold;
}

.light dd {
    color: black;
}

dd {
    margin: 0;
    list-style: none;
    display: list-item;
    color: white;
    padding-left: 0;
}

dd.first {
    margin-top: 10px;
}

/* start feature pills */

.requirements {
    padding: 0;
    margin: 3px -8px 2px -3px;
    font-size: 12px;
}

.requirements-feature {
    padding: 0;
    margin: 3px 0 12px -3px;
    font-size: 12px;
}

.requirements-flex {
    display: flex;
    justify-content: space-between;
}

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

.hardware, .product {
    color: white;
    margin: 2px 0 0 0;
    display: inline-block;
    border-radius: 17px;
    padding: 4px 10px;
    white-space: nowrap;   
}

.light .hardware {
    background-color: gray;
    color: white;
}

.light .product {
    background-color: var(--light-dark-gray);
    color: black;
}

.product {
    background-color: black;
}

.hardware {
    background-color: #272727;
}

.light .product-feature {
    background-color:gray;
    color: white;
}

.product-feature {
    line-height: 1.7;
}

.dark .hardware-feature {
    background-color: var(--tesla-very-dark-gray);
}        

/* end feature pills */


/* badge */
.release-title {
    display: flex;
    justify-content: space-between;
}

.release-badges {
    margin-left: 12px;
    display: flex;
}
.release-badges .release-badge {
    margin: 6px 0 14px 5px;
    display: block;
    font-size: 13px;   
}
/* badge end */

.countries {
    display: none;
    padding: 10px 0;
}

.grow:hover {
    flex: 1;
}

.countries-container {
    display: inline-block;
    cursor: pointer;
}

.countries-container:hover {
    display: block;
    width: calc(100% - 20px);
}

.countries-container:hover .countries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.regions-globe {

}

/* images */
.img-wrapper {
    float: right;
    position: relative;
}

span.enlarge-image-button {
    position: absolute;
    background-image: url(https://www.notateslaapp.com/assets/plus.png);
    content: "";
    width: 25px;
    height: 25px;
    background-size: 25px 25px;
    background-position: bottom right;
    background-repeat: no-repeat;  
    bottom: 25px;
    right: 15px;
    border: 1px solid white;
    border-radius: 13px;
    cursor: pointer;
}

dd p img {
    border-radius: 5px;
    cursor: zoom-in;
}


/* article inlines */

/* START software update inline */
.news-page .news .article-inline-update {
    padding: 15px;
    margin: 0 15px;
}

@media (min-width: 800px) {
    .article-inline-update {
        margin: 0 9% 0 1%;
        float: right;
        width: 315px;
    }
}

.article-inline-update .article-inline-last-updated {
    font-size: 12px;
    text-align: right;
    color: var(--text);
    margin-top: 15px;
}
/* END software update inline */

/* story images */
div.image-wrapper {
    margin-top: 20px;
    margin-bottom: 20px;
}

div.image-wrapper img {
    cursor: zoom-in;
}

@media (min-width: 500px) {
    .news-page .news div.image-thumbnail {
        margin: 5px 0 10px 20px;
        float: right;
        padding-left: 0%; /* offsets padding-left on every child element in article */
    }

    div.image-thumbnail img {
        border-radius: 5px;
        max-width: 200px;
    }

    .amp .news div.image-thumbnail amp-img
    {
        width: 200px;
    }

}

@media (min-width: 920px) {
    div.image-thumbnail img {
        max-width: 300px;
    }

    .amp .news div.image-thumbnail amp-img
    {
        width: 300px;
    }

}


.amp .news p amp-img {
    min-width: 300px;
}

@media (max-width: 550px) {
    dd p .img-wrapper img, 
    .news p img {
        /*width: 200px;*/
        width: 100%;
        max-width: 100% !important;    }
}


div.image-meta {
    display: flex;
    padding: 0 10px;
    justify-content: space-between;
    margin-top: 5px;
}

p.credit, p.caption, div.caption, div.credit {
    color: var(--tesla-dark-gray);
    font-size: 12px;
    margin: 0;
    line-height: 1.5;
}

div.credit {
    margin-left: 10px;
    white-space: nowrap;
}

div.image-wrapper img
{
    width: 100%;
}


/* old images */
.news p img, 
    .amp .news p amp-img
{
    margin: 5px 0 10px 20px;
    border-radius: 5px;
    cursor: zoom-in;
    float: right;
    max-width: 300px;
}

.news p.wide img, 
    .amp .news p.wide amp-img
{
    width: 100%;
    margin: 0;
    float: none;
    max-width: 100%;
    border-radius: 0;
    cursor: zoom-in;
}

.news p.short img, 
    .news p.short amp-img,
    .news div.image-ultra-wide img, 
    .news div.image-ultra-wide amp-img
{
    max-height: 300px;
    object-fit: cover;
}

.amp amp-img>img {
    margin: 0;
    border-radius: 0;
    cursor: default;
    max-width: none;
    float: none;
    width: auto;
    height: auto;
    object-fit: cover;
}


/* end story images */



.light .countries-globe {
    background: url(https://www.notateslaapp.com/assets/globe-black.svg) no-repeat bottom right;
}

.dark .countries-globe {
    background: url(https://www.notateslaapp.com/assets/globe.svg) no-repeat bottom right;
}

.countries-globe {
    padding-right: 22px;
    display: inline;
}

.filters {
    text-align: right;
    margin: 2px -10px 0 0;
}

.share-car-geo {
    text-align: left;
    margin: 0 0 15px 0;
}

.light .share-car-geo select,
.light .filters select {
    color: black;
}

.share-car-geo select,
.filters select {
    background-color: transparent;
    color: white;
    border: none;
    font-size: 16px;
    padding: 5px 28px 5px 10px;
    text-overflow: ellipsis;
    width: 135px;
    appearance: none;
    -webkit-appearance: none;
}

.share-car-geo select {
    width: auto;
}

.light .select {
    background-color: var(--light-dark-gray);
    border: 1px solid gray;
}

.select {
    border-radius: 5px;
    background-color: black;
    display: inline-block;
    margin-left: 5px;
    position: relative;
}

.light .select-arrow {
    filter: brightness(0) saturate(100%);
}

.select-arrow {
    position: absolute;
    right: 11px;
    top: 8px;
    pointer-events: none;
}

.light option {
    color: black;
    background-color: var(--light-dark-gray);
}

option {
    color: white;
    background-color: black;
}

.light p[features]:not([features=""]), .light p[products]:not([products=""]) {
    background-color: var(--light-dark-gray);
}

p[features]:not([features=""]), p[products]:not([products=""]) {
    background-color: #272727;
    padding: 10px 15px 15px 15px;
    border-radius: 22px;
    overflow: auto;
    min-width: 110px;
    margin-left: -5px;
    margin-right: -5px;
}


.product-feature-header {
    background-color: black;
    padding: 5px 15px;
    border-radius: 26px;
    margin: 0 -3px 8px -3px;
    display: block;        
}

/* sponsors module */
.container .sponsors {
    background-color: white;
    color:black;
}


.sponsor {
    margin-bottom: 30px;
    display: flex;
}

.sponsor img {
    max-width: 100%;
}

.sponsor-about {
    padding: 0 20px 10px 0;
    flex-shrink: 0;
}

        
.become-sponsor {
    margin: 25px 0 10px 0;
}

.sponsors a, .sponsors a:visited {
    color: black;
    text-decoration: underline;
}
.sponsors p {
    margin: 0;
    line-height: 1.4;
}



/* homepage images */

.light article .release-overview {
    background-color: var(--module-background);
}

article .release-overview {
    padding: 0;
    border-radius: 5px;
    background-color: var(--module-background);
    overflow: hidden;
}

article .release-overview ul {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.6;
}

article .release-overview li {
    padding: 0;
}


/* date and author */
.light p.date, .light p.author {
    color: var(--tesla-dark-gray);
}

.dark p.date, .dark p.author {
    color: var(--tesla-light-gray);
}

p.date, p.author, div.date, div.author, time.date {
    margin: -7px 0 0 0;
    font-size: 13px;
}

/* END date and author */

.poster img {
    object-fit: cover;
    width: 100%;
    object-position: 50% 50%;
    height: 150px;
}

.poster {
    line-height: 0;
}

.index-news-mod .poster img {
    max-height: 330px;
}

.notes-container {
    padding: 20px 20px 5px 20px;
    width: 100%;
}

/* release tags */
ul.releases-list li a {
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
}


.release-version {
    min-width:75px;
    display: inline-block;
}

.light .release-tag {
    background-color: var(--page-background);
    color: black;   
}

.dark .release-tag {
    background-color: black;
    color: white;   
}

.release-tag {
    margin-left: 6px;
    font-size: 12px;
    border-radius: 18px;
    padding: 2px 6px;
    white-space: nowrap; 
}

/* news mod on homepage */
.notes-container.news {
    padding: 15px 15px 2px 15px;
}

/* end news mod */

@media (min-width: 520px) {
    /* only display news description on larger displays */
    .index-news-mod .news-description {
        display: block;
    }

    div.inline {
        margin: 0 0;
    }

    .notes-container.news {
        padding: 15px 20px;
    }
}

/* poster on side */
@media (min-width: 740px) and (max-width: 1019px), (min-width: 520px) and (max-width: 650px), (min-width: 1150px) {

    article .release-overview {
        display: flex;
        justify-content: space-between;
    }

    .poster img {
        object-fit: cover;
        width: 200px;
        object-position: 50% 50%;
        height: 100%;
    }

    .poster {
        order: 1;
    }

    .release-overview .notes-container {
        order: 2;
    }
}

/* new styles for mobile based on story score */
@media (max-width: 519px) {
    article.content-horz  .release-overview {
        display: flex;
        justify-content: space-between;
    }

    .content-horz .poster img {
        object-fit: cover;
        width: 100px;
        object-position: 50% 50%;
        height: 100%;
        border-radius: 5px;
    }

    .content-horz .poster {
        order: 1;
        margin: 7px 0 7px 7px;
    }

    .content-horz .release-overview .notes-container {
        order: 2;
    }

    article.content-horz .news h1 {
        font-size: 20px;
        font-weight: 500;
    }

    article .news h1 {
        font-weight: 500;
    }    

    .notes-container h1 {
        font-weight: 500;
    }
}

@media (min-width: 930px) and (max-width: 1019px), (min-width: 1150px)  {

    .poster img {
        width: 300px;
    }

}

/* youtube embed */
.video-container {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    overflow: auto;
}
.video-embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* block quote */


blockquote {
	position: relative;
	padding: 1rem;
}

.news blockquote p {
	font-weight: 200;
	font-size: 2rem;
	line-height: 1.4;
}

blockquote:before,
blockquote:after {
	position: absolute;
	color: var(--link-active-color);
	font-size: 8rem;
	width: 4rem;
	height: 4rem;
}

blockquote:before {
	content: '“';
	left: -3rem;
	top: -2rem;
}

blockquote:after {
	content: '”';
	right: -3rem;
	bottom: 1rem;
}

cite {
	line-height: 3;
	text-align: left;
}

/* START page number module */

.prev-next-page-module {
    display: flex;
    justify-content: space-between;
}

.prev-next-page-module a {
    font-size: 18px;
    font-weight: bold;
}

.next-page-module {
    justify-content: center;
}

/* END page number module */




/* safety score calculator */
body.safety-score-calculator .release.article-container {
    overflow: initial;
    counter-reset: safety-score-days;
}

body.safety-score-calculator table input {
    border: 1px solid var(--tesla-dark-gray);
}

tr.day-data td:first-of-type:before {
    counter-increment: safety-score-days;
    content: counter(safety-score-days);
}

/* safety score calculator header */
.safety-score-header header, .safety-score-header .safety-score-targets {
    display: flex;
}

.safety-score-header .safety-score-col {
    flex: 1;
    text-align: center;
}

.safety-score-header header .safety-score-col {
    font-size: 14px;
}

.safety-score-header .safety-score-targets .safety-score-col {
    font-size: 22px;
    font-weight: bold;
}   

.safety-score-header .score-target input {
    width: 50%;
    text-align: center;
    border: 1px solid var(--tesla-dark-gray);
}

.safety-score-header {
    position: sticky;
    top:37px;
    z-index: 1000;
    padding: 15px 0 15px 0;
    margin-bottom: 50px;
    border-top: 1px solid var(--tesla-light-gray);
    border-bottom: 1px solid var(--tesla-light-gray); 
}

.light .safety-score-header {
    background-color: white;
}

.dark .safety-score-header {
    background-color: black;
}

.action-button {
    display: flex;
    justify-content: center;
    margin: 20px;
}

/* end safety score calculator */


/* updates page: updates modules */
.light .updates-wrapper {
    background-color: white;

}

.dark .updates-wrapper {
    background-color: var(--module-background);
}

.updates-wrapper {
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 15px 10px 1px 10px;
}

.updates-wrapper h2 {
    text-align: center;
    font-weight: normal;
}

a.update-wrapper {
    background-color: var(--page-background);
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 10px 10px 13px 10px;
    display: block;
    cursor: pointer;
}

a.update-wrapper:hover {
    background-color: var(--module-hover);
    text-decoration: none;
}

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

a.update-wrapper:hover h3 {
    text-decoration: underline;
}

a.update-wrapper h3 {
    font-weight: normal;
    color: var(--link-active-color);
    margin-bottom: 5px;
}

.update-details {
    display: flex;
    justify-content: space-between;
}

.update-version-icon {
    display: flex;
}

.light .update-tag, .light .software-tag {
    background-color: #f6f6f7;
    color: black;    
}

.dark .update-tag, .dark .software-tag {
    background-color: #030404;
    color: white;    
}

.update-tag, .software-tag {
    border-radius: 5px;
    padding: 2px 10px;
    margin-top: 4px;
    height: 20px;
    margin-left: 3px;
    margin-right: -5px;
    font-size: 12px;
    overflow: hidden;
}

.update-icon {
    margin-top: 4px;
    margin-left: 10px;
}

.light .update-date {
    color: var(--tesla-very-dark-gray);
}

.dark .update-date {
    color: white;
}

.update-stats {
    display: flex;
    justify-content: space-between;
}

/* release stats middle column */

.release-stats {
    margin: 30px -15px;
    border-top: 8px solid var(--page-background);
    border-bottom: 8px solid var(--page-background);
    padding: 10px 15px 5px 15px;    
}

.light .release-stats {
    border-top: 8px solid var(--page-background);
    border-bottom: 8px solid var(--page-background);
}


.dark .release-stats {
    border-top: 8px solid var(--dark-gray);
    border-bottom: 8px solid var(--dark-gray);  
}


.release-stats-title {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: bold;    
}

.release-stats-content {
    display: flex;
    justify-content: space-around;
    margin-bottom: 8px;
}

.release-stats-content-stat:not(:last-child) {
    margin-right: 10px;
}

.release-stats .label {
    font-size: 13px;
    margin-bottom: 10px;
    text-align: center;
}

.release-stats .value {
    padding: 5px 10px;
    background-color: var(--page-background);
    font-size: 17px;
    border-radius: 10px;
    text-align: center;
}

.light .release-stats .value {
    background-color: var(--page-background);
}

.dark .release-stats .value {
    background-color: black;
}

.release-stats .release-stats-footer {
    text-align: right;
}


.release-stats .release-stats-footer a {
    color: black;
    font-size: 12px;
    text-decoration: none;
    border-bottom: none;
}

.light .release-stats .release-stats-footer a {
    color: black;
}

.dark .release-stats .release-stats-footer a {
    color: white;
}

.release-stats .release-stats-footer a:hover {
    text-decoration: underline;
}

/* END updates page: updates modules */


/* START GENERIC MODULE */
.light .generic-module {
    background-color: white;

}

.dark .generic-module {
    background-color: var(--tesla-very-dark-gray)
}

.generic-module {
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 10px 15px 10px 15px;
}

.generic-module h2 {
    text-align: center;
    font-weight: normal;
}

.generic-module-footer {
    text-align: right;
    margin-bottom: 5px;
}


.generic-module-footer a {
    text-decoration: none;
    border-bottom: none;
}

/* END GENERIC MODULE */

/* START charts */
#fsd-beta-distrib-chart {
    max-height: 240px;
    margin: auto;
    padding-bottom: 5px;
}

/* END Charts */

/* regions */

.light .requirement-name-region-available {
    background: #4fa16f82 !important;
}
.light .requirement-name-region-unavailable {
    background: #b0000054 !important;
}

.dark .requirement-name-region-available {
    background: #4fa16f !important;
}
.dark .requirement-name-region-unavailable {
    background: #b00000a8 !important;
}

/* twitter tweet embeds */
.twitter-tweet.twitter-tweet-rendered {
    margin: 10px auto !important;
}



/* nata bar chart */


.nata-chart {
    width: 100%;
    display: flex;
    margin-bottom: 10px;
    margin-top: 20px;
}

.nata-chart .bar {
    height: 30px;

    text-align: center;
    color: white;
    line-height: 26px;
    font-size: 14px;
    border-top: 2px solid;
    border-bottom: 2px solid;
}

.nata-chart > div:first-of-type .bar {
    border-radius: 5px 0 0 5px;
    border-left: 2px solid;
}

.nata-chart .bar-label:last-of-type {
    margin-right: 0;
}

.nata-chart > div:last-of-type .bar {
    border-radius: 0 5px 5px 0;
    border-right: 2px solid;			
}

.nata-chart > div.bar-wrapper:first-of-type .bar-label {
    margin-left: 0;
    margin-right: 15px;
}
.nata-chart > div.bar-wrapper:last-of-type .bar-label {
    margin-right: 0;
}

.nata-chart .bar-label {
    font-size: 13px;
    padding: 3px 6px;
    border-radius: 5px;
    color: white;
    margin-right: auto;
    margin-left: auto;
    width: fit-content;
    margin-bottom: 8px;
}


/* NEWSLETTER MODULE ON ARTICLE PAGE */

.mod-background {
    border-radius: 5px;
}

.mod-background {
    background: var(--module-background);
}

.input-wrapper {
    border-radius: 10px;
    padding: 7px;
    max-width: 500px;
    display: flex;
    justify-content: space-between;
}

.light .input-wrapper {
    background: #FFFFFF;
    border: 1px solid #DCDCDC;
}

.dark .input-wrapper {
    background: var(--page-background);
    border: 1px solid var(--button-border);
}

body .input-wrapper input {
    border: none;
    border-radius: 10px;
    margin-right: 5px;
}

.light .input-wrapper input {
    background: white;
}

.in-article-mod__header {
    display: flex;
    justify-content: space-between;
}

.in-article-mod__content p {
    line-height: 24px;
    font-size: 16px;
    margin: 0;
}

.in-article-mod__content {
    margin: 0px 0px 20px 0;
}

.newsletter-close-icon:hover {
    background-color: var(--module-background);
}

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

.in-article-mod {
    padding: 15px;
    margin: 30px 0;
    background-color: var(--page-background);
}

@media (min-width: 651px) {
    .mod-background {
        padding: 25px;
    }

    .input-wrapper input {
        margin-right: 10px;
    }                    
}

@media (max-width: 650px) {
    .in-article-mod {
        margin: 30px 0 !important;
    }                 
}

.author-bio {
    border-radius: 5px;
    background-color: #edeef0;
    padding: 3px 7px;
    margin-bottom: 25px;
    text-align: center;
}

.author-bio a {
    color: black !important;
}

.author-bio p {
    margin: 0;
    font-size: 14px;                
}      


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 thead th {
    padding-top: 15px;
    padding-bottom: 15px;
}

table th:first-child {
    border-top-left-radius: var(--border-radius);
    padding-left: 25px;
}

table th:last-child {
    border-top-right-radius: var(--border-radius);
}

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

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

table td:first-child {
    padding-left: 25px;
}

.light table td:first-child {
    border-left: 1px solid #e6e6e6;
}

.light table td:last-child {
    border-right: 1px solid #e6e6e6;
}

.dark table td:first-child {
    border-left: 1px solid #11151b;
}

.dark table td:last-child {
    border-right: 1px solid #11151b;
}

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

.dark table td  {
  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: #3b68e4 !important;
	font-weight: 600;    
}


.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;
}

/* 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 */