/* || General styles */

:root { --ripple-dark-mode: rgba(255,255,255,0.45); --border-color: #303030; }
body { background-color: black; color: white; }
.main-gradient { background: linear-gradient(black, black 90%, #212121); }


/* || Materialize improvements */

.waves-effect.dark-waves .waves-ripple { background-color: var(--ripple-dark-mode) !important; }
hr, .divider { background-color: var(--border-color); }
.chip, .chip:focus { color: #e3e3e3; background:#333; }
.modal { background-color: #1d1d1d; }
.modal .modal-footer { background-color: transparent; }
.toast { background-color: #f2f2f2; color: #2b2b2b; }
.toast .waves-effect .waves-ripple { background-color: rgba(0, 0, 0, 0.2) !important; }

/* || Tables */
table:not(.no-dark) tr { border-bottom-color: #464646; }
table.striped > tbody > tr:nth-child(2n+1) { background-color: rgba(65, 65, 65, 0.5); }


/* || Forms */

input, textarea { color: white; }
[type="checkbox"].filled-in:checked + span:not(.lever)::after { border: 2px solid #fff; background-color: #fff; }
[type="checkbox"].filled-in:checked + span:not(.lever)::before { border-right-color: #000; border-bottom-color: #000; }
input:disabled { color: rgba(255,255,255,0.42) !important; border-bottom: 1px dotted rgba(255,255,255,0.42) !important; }
.input-field > label { color: #9e9e9e !important; }
.select-dropdown.dropdown-content { background-color: #2d2d2d; }
.select-dropdown.dropdown-content li > span { color:white; }
.select-dropdown.dropdown-content li.selected { background-color: rgba(255,255,255,0.08) !important; }
.select-dropdown.dropdown-content li:hover { background-color: rgba(255,255,255,0.15); }
.select-wrapper input.select-dropdown { color: black; }
select.browser-default { color: #ffffff; background-color: #1d1d1d; }

/* || Main navigation */

main-nav nav { background-color: black; }
main-nav nav ul li.active, main-nav nav ul a:hover, main-nav .sidenav li > a:hover { background-color: rgba(255,255,255,0.1); }
main-nav nav .center.hide-on-med-and-down li a, #mobile-nav li a { color: #eaeaea; }
main-nav .brand-logo img.logo-dark { display: block; }
main-nav .brand-logo img.logo-light { display: none; }
main-nav .btn-navbar { color: #eaeaea; }
main-nav .btn-navbar:hover { background-color: rgba(255,255,255,0.15) !important; }
main-nav .navbar-right .btn-navbar { background-color: rgba(255,255,255,0.10);}
main-nav .navbar-right nav-account-icon { border-color: #424242; }
#mobile-nav { background-color: #212121; }
@media only screen and (max-width: 600px) { 
    main-nav .navbar-right .btn-navbar { background-color: transparent; }
    main-nav .navbar-right nav-account-icon:not(.logged) { border-color: transparent; } 
}

footer { background-color: #212121 !important; }
.footer-logo, footer ul li { opacity: 0.80; }
.footer-logo, .social-btn iconify-icon, footer ul a, footer span { filter: invert(100%); }


/* || Callout */
call-out.note { background-color: #333; color: #ffffff; }


/* || Sounds Cards */

sound-card:not(.no-dark) { background-color: #212121 !important; color: #fff; }
sound-card:not(.no-dark) .waves-effect .waves-ripple { background-color: var(--ripple-dark-mode) !important; }
sound-card:not(.no-dark) .btn.btn-play { background-color: #483d2d; color: #f5c817; }
sound-card:not(.no-dark) .btn.btn-download { background-color: #293c44; }
sound-card:not(.no-dark) .youtube-link:hover { background-color: rgba(255, 255, 255, 0.15);}


/* || Product Cards */

product-card:not(.no-dark) > a:hover { background-color: rgba(255,255,255,0.15); }
product-card:not(.no-dark) h5 { color: #eee; }


/* || Product page navigation topbar */

#product-page-nav { background-color: #212121; }
#product-page-nav .left .breadcrumb, #product-page-nav .tabs .tab a, #product-page-nav .select-wrapper .dropdown-trigger { color: white; }
#product-page-nav .select-wrapper svg { fill: white; }


/* || Product page specs */

#specs { background-color: black; }
#techspecs .row, #techspecs .row-header { border-color: #616161 !important; }
#techspecs { color: #eee; }
#footnotes { color: #d5d5d5; background-color: #424242; }


/* || Account generic style */

#btn-account-help { background-color: #424242 !important; color: #f5f5f5 !important; }
#btn-account-help:hover { background-color: #686868 !important; }
#account-content h2 { color: #ffffff; }


/* || Account user products */

user-product, user-product .picture { background-color: #1a1a1a }
user-product .btn { background-color: #2d2d2d !important; color: #ffffff; }
#btn-new-product { background-color: #1a1a1a; color: #ffffff; }
#btn-new-product:hover { background-color: #262626; }


/* || Account additional content */

additional-content { background-color: #131313; }


/* || Blog post */

#post-tags { border-top-color: #393939; }
#post-share a iconify-icon { color: white; }


/* || Artist page */
#artist-content p { color:rgba(255,255,255,0.8);}
artist-product > a, artist-product .image { border-color: #3e3e3e; }
artist-product .image { background-color: #352b02; }
artist-product .title { color: #ffffff; }

/* || Product support page */

support-header > div { background-color: #212121; }
support-header h1, support-header .btn-back { color: white; }
support-content h5:not(:first-of-type) { border-top-color: var(--border-color); }
support-item:not(:last-of-type) { border-bottom-color: var(--border-color); }
discontinued-item a { background-color: #212121; color: #fff; }
discontinued-item a:hover { background-color: #353535; }
extra-help:not(:first-of-type) { border-left-color: var(--border-color); }

/* || Support article */

#article .article-tags{ color: #e3e3e3; background: #333; }
#article .markdown h2 { border-top-color: var(--border-color); }
.article-tabs-container { border: 1px solid var(--border-color); background: rgb(30, 30, 30);}
.article-tabs-btn { background-color: #424242 !important; color: #ffffff !important; }
#table-contents-trigger, #article #table-contents-dropdown { background-color: #212121; }
#table-contents-trigger :is(span, iconify-icon), #table-contents-dropdown li a { color: #ffffff !important; }
#table-contents-dropdown li:hover, #table-contents-dropdown li a.active { background-color: #424242; }
#table-contents-dropdown li:not(.level3):not(:first-child) { border-top-color: #3c3c3c; }

/* || modern input */
input.browser-default.modern-input { color:white; background-color: #393939!important }
input.browser-default.modern-input::placeholder {color: lightgrey;}

/* || language selector */

lang-selector > div { background-color: #242424; }
lang-selector .language-chip { background-color: #464646; color: #fff; }