MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

/* Chrono Odyssey Wiki - Dark Fantasy Theme CSS */
/* MediaWiki:Common.css - Version 1.43.0 Compatible */

/* ===== PRIORITY OVERRIDES ===== */
/* These must come first to ensure dark theme applies */
html {
    background: #0d0d0d !important;
}

body,
.mediawiki,
.skin-vector,
.skin-vector-legacy,
.skin-vector-2022 {
    background: #0d0d0d !important;
    color: #c9c9c9 !important;
}

/* Remove all default white backgrounds */
.mw-page-container,
.mw-body,
#content,
.vector-body {
    background: #0d0d0d !important;
    color: #c9c9c9 !important;
}

/* ===== CORE VARIABLES ===== */
:root {
    --main-bg: #0d0d0d;
    --secondary-bg: #1a0f0f;
    --border-color: #2a1515;
    --blood-red: #8b0000;
    --antique-gold: #b89968;
    --text-primary: #c9c9c9;
    --text-secondary: #999999;
    --text-muted: #666666;
    --link-color: #b89968;
    --link-hover: #d4af76;
    --shadow-dark: 0 6px 30px rgba(0,0,0,0.9);
    --shadow-inset: inset 0 0 20px rgba(0,0,0,0.5);
}

/* ===== GLOBAL RESET ===== */
* {
    box-sizing: border-box;
}

/* ===== BODY & MAIN CONTAINERS ===== */
body {
    background: var(--main-bg) !important;
    color: var(--text-primary);
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.6;
}

/* Main wrapper and containers */
.mw-body {
    background: var(--main-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
}

#content {
    background: var(--main-bg) !important;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 20px;
    box-shadow: var(--shadow-dark);
}

#bodyContent {
    font-size: 15px;
}

#mw-page-base {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a0f0f 100%);
}

/* Page wrapper background */
.mw-page-container {
    background: var(--main-bg) !important;
}

/* Header area */
.mw-header {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a0f0f 100%) !important;
    border-bottom: 2px solid var(--blood-red);
    box-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* Logo area */
.mw-logo {
    filter: brightness(0.9);
}

/* Search container */
#p-search,
.vector-search-box,
#simpleSearch,
#searchform {
    background: transparent !important;
}

/* Page header area */
.mw-indicators,
.mw-body-header,
.vector-body-before-content {
    background: transparent !important;
}

/* User links area */
#p-personal,
.vector-user-links,
.vector-user-menu {
    background: transparent !important;
}

/* Language selector */
#p-lang,
.vector-menu-portal#p-lang {
    background: var(--main-bg) !important;
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
    color: var(--antique-gold);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid var(--blood-red);
    padding-bottom: 10px;
    margin: 20px 0 15px 0;
}

h1 {
    font-size: 32px;
    letter-spacing: 4px;
}

h2 {
    font-size: 26px;
    letter-spacing: 3px;
}

h3 {
    font-size: 20px;
    border-bottom: 1px solid var(--border-color);
}

h4, h5, h6 {
    font-size: 16px;
    border-bottom: 1px solid var(--border-color);
}

/* First heading special styling */
.firstHeading {
    font-size: 36px;
    text-align: center;
    margin-bottom: 30px;
    text-shadow: 0 0 10px rgba(139, 0, 0, 0.5);
}

/* ===== LINKS ===== */
a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover);
    text-shadow: 0 0 5px rgba(184, 153, 104, 0.3);
}

a:visited {
    color: #9a7f5a;
}

a.new, #p-personal a.new {
    color: #cc6666 !important;
}

a.external {
    color: var(--link-color);
    padding-right: 15px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"><path fill="%23b89968" d="M9 3v6h-2V5L3 9V7l4-4H3V1h6z"/></svg>') no-repeat right center;
}

/* ===== NAVIGATION & SIDEBARS ===== */
/* Main sidebar container */
#mw-panel, .mw-sidebar {
    background: var(--secondary-bg) !important;
    border-right: 1px solid var(--border-color);
}

/* Vector 2022 sidebar */
.vector-main-menu-container,
.vector-sidebar-container {
    background: var(--secondary-bg) !important;
}

/* Sidebar sections */
#mw-panel .portal,
.vector-menu-portal,
.mw-sidebar .sidebar-chunk {
    background: var(--main-bg) !important;
    border: 1px solid var(--border-color);
    margin: 10px;
    padding: 10px;
}

/* Sidebar headings */
#mw-panel .portal h3,
.vector-menu-heading,
.sidebar-chunk h3,
.tocheader {
    color: var(--blood-red) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-color);
}

/* Sidebar links */
#mw-panel .portal .body li a,
.vector-menu-content li a,
.sidebar-chunk li a {
    color: var(--text-secondary) !important;
}

#mw-panel .portal .body li a:hover,
.vector-menu-content li a:hover,
.sidebar-chunk li a:hover {
    color: var(--link-hover) !important;
}

/* Table of Contents */
#toc, .toc, .sidebar-toc {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}

/* Contents header text */
.tocheader,
.sidebar-toc .sidebar-toc-title {
    color: var(--antique-gold) !important;
}

/* Tools section specific */
.vector-page-tools,
.vector-appearance,
.vector-more-collapsible-item {
    background: var(--main-bg) !important;
}

/* Toolbox styling */
#p-tb, #p-cactions, #p-personal {
    background: var(--secondary-bg) !important;
}

/* Left sidebar specific sections */
/* Main menu / Navigation */
#mw-panel .portal,
#mw-panel #p-logo + .portal,
#mw-panel #p-navigation,
#p-navigation,
.vector-menu-portal,
.vector-main-menu .vector-menu-content {
    background: var(--main-bg) !important;
    border: 1px solid var(--border-color) !important;
    margin: 10px !important;
    padding: 10px !important;
}

/* Sidebar section headers - like "Contents", "Beginning" */
#mw-panel .portal h3 label,
#mw-panel .portal h3,
.vector-menu-heading,
.vector-menu-portal .vector-menu-heading,
.sidebar-toc .sidebar-toc-title {
    background: transparent !important;
    color: var(--blood-red) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 14px !important;
    padding: 5px 0 !important;
}

/* Sidebar list items */
#mw-panel .portal .body ul li,
.vector-menu-content-list li,
.sidebar-toc-list li {
    background: transparent !important;
}

/* Sidebar links - like "Getting started" */
#mw-panel .portal .body ul li a,
.vector-menu-content-list li a,
.sidebar-toc-link {
    color: var(--text-secondary) !important;
    display: block;
    padding: 4px 0;
}

#mw-panel .portal .body ul li a:hover,
.vector-menu-content-list li a:hover,
.sidebar-toc-link:hover {
    color: var(--link-hover) !important;
    text-shadow: 0 0 5px rgba(184, 153, 104, 0.3);
}

/* Top navigation tabs */
.vectorTabs {
    background: none !important;
}

.vectorTabs li {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color);
    border-bottom: none;
}

.vectorTabs li.selected {
    background: var(--main-bg) !important;
    border-bottom: 1px solid var(--main-bg);
}

.vectorTabs li a {
    color: var(--text-secondary) !important;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

/* Vector 2022 tabs */
.vector-menu-tabs,
.vector-menu-tabs .vector-menu-content-list {
    background: transparent !important;
}

.vector-menu-tabs .vector-menu-content-list li {
    background: var(--secondary-bg) !important;
}

.vector-menu-tabs .selected {
    background: var(--main-bg) !important;
}

/* Page actions menu */
.vector-page-toolbar,
.vector-menu-dropdown {
    background: transparent !important;
}

/* Actions button and dropdown */
.vector-menu-dropdown .vector-menu-heading,
.vector-menu-dropdown .vector-menu-checkbox {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}

/* User menu */
.vector-user-menu-legacy li,
.vector-user-links .vector-menu-content-list li {
    background: transparent !important;
}

/* Dropdown menus and their hover states */
.vector-menu-dropdown .vector-menu-content,
.vector-menu-dropdown.vector-menu-dropdown-noicon .vector-menu-content {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--blood-red) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.9);
}

.vector-menu-dropdown .vector-menu-content-list li a {
    color: var(--text-secondary) !important;
    padding: 8px 15px !important;
}

.vector-menu-dropdown .vector-menu-content-list li a:hover {
    background: var(--blood-red) !important;
    color: white !important;
}

/* More menu specific */
#p-cactions .vector-menu-content,
#p-tb .vector-menu-content,
#p-views .vector-menu-content {
    background: var(--secondary-bg) !important;
}

/* ===== TABLES ===== */
table.wikitable {
    background: var(--main-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

table.wikitable > tr > th,
table.wikitable > * > tr > th {
    background: var(--secondary-bg);
    color: var(--antique-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid var(--border-color);
}

table.wikitable > tr > td,
table.wikitable > * > tr > td {
    border: 1px solid var(--border-color);
    background: var(--main-bg);
    color: var(--text-secondary);
}

table.wikitable > tr:nth-child(even) > td,
table.wikitable > * > tr:nth-child(even) > td {
    background: rgba(26, 15, 15, 0.5);
}

/* ===== INFOBOXES ===== */
.infobox {
    background: var(--main-bg);
    border: 2px solid var(--blood-red);
    box-shadow: var(--shadow-dark);
    color: var(--text-primary);
    margin: 0 0 20px 20px;
    float: right;
    clear: right;
    width: 300px;
}

.infobox th {
    background: var(--secondary-bg);
    color: var(--antique-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
}

.infobox td {
    background: rgba(13, 13, 13, 0.8);
    color: var(--text-secondary);
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-color);
}

.infobox .infobox-title {
    background: linear-gradient(180deg, var(--blood-red), #6b0000);
    color: white;
    font-size: 18px;
    text-align: center;
    padding: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ===== SEARCH ===== */
#searchInput,
.vector-search-box-input,
.searchbox input[type="search"],
.mw-searchInput {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

#searchButton, 
#mw-searchButton,
.searchButton,
.vector-search-box-submit {
    background: var(--blood-red) !important;
    border: 1px solid var(--border-color) !important;
    color: white !important;
    text-transform: uppercase;
}

/* Search suggestions */
.suggestions,
.mw-searchSuggest-link {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.suggestions-results,
.suggestions-result {
    background: var(--main-bg) !important;
    color: var(--text-secondary) !important;
}

.suggestions-result-current {
    background: var(--blood-red) !important;
    color: white !important;
}

/* ===== CATEGORIES ===== */
#catlinks {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    padding: 10px;
    margin-top: 20px;
}

#catlinks a {
    color: var(--link-color);
}

/* ===== EDIT INTERFACE ===== */
.editOptions {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

#wpTextbox1 {
    background: #1a1a1a;
    color: #e0e0e0;
    border: 1px solid var(--border-color);
}

.editButtons input[type="submit"] {
    background: var(--blood-red);
    border: 1px solid var(--border-color);
    color: white;
    text-transform: uppercase;
    padding: 8px 20px;
    cursor: pointer;
}

.editButtons input[type="submit"]:hover {
    background: #a00000;
}

/* ===== THUMBNAILS & IMAGES ===== */
.thumb {
    border: 1px solid var(--border-color);
    background: var(--secondary-bg);
    padding: 5px;
}

.thumbinner {
    background: var(--main-bg);
    border: 1px solid var(--border-color);
}

.thumbcaption {
    color: var(--text-secondary);
    font-size: 13px;
    padding: 5px;
}

/* ===== TOC (Table of Contents) ===== */
#toc, .toc {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    padding: 10px;
}

#toc h2, .toc h2 {
    color: var(--blood-red);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 16px;
}

.tocnumber {
    color: var(--blood-red);
}

.toctext {
    color: var(--text-secondary);
}

/* ===== NOTIFICATIONS ===== */
.mw-notification {
    background: var(--secondary-bg);
    border: 1px solid var(--blood-red);
    color: var(--text-primary);
}

/* ===== FOOTER ===== */
#footer {
    background: #0a0a0a;
    border-top: 2px solid var(--blood-red);
    color: var(--text-muted);
    padding: 20px;
}

#footer a {
    color: var(--link-color);
}

/* ===== CODE BLOCKS ===== */
pre, code, .mw-code {
    background: #1a1a1a;
    border: 1px solid var(--border-color);
    color: #e0e0e0;
}

/* ===== SPECIAL PAGES ===== */
.special li {
    color: var(--text-secondary);
}

/* ===== DIFF PAGES ===== */
.diff-context {
    background: var(--secondary-bg);
    color: var(--text-secondary);
}

.diff-addedline {
    background: rgba(0, 100, 0, 0.2);
}

.diff-deletedline {
    background: rgba(139, 0, 0, 0.2);
}

/* ===== LOGIN/REGISTER FORM ===== */
.mw-ui-input {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.mw-ui-button {
    background: var(--blood-red);
    border: 1px solid var(--border-color);
    color: white;
    text-transform: uppercase;
}

/* ===== WIKI EDITOR TOOLBAR ===== */
.wikiEditor-ui {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
}

.wikiEditor-ui-toolbar {
    background: var(--main-bg);
}

/* ===== CUSTOM CLASSES ===== */
.blood-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--blood-red), transparent);
    margin: 20px 0;
}

.gothic-box {
    background: var(--secondary-bg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-dark), var(--shadow-inset);
    padding: 20px;
    margin: 15px 0;
}

/* ===== OVERRIDE WHITE BACKGROUNDS ===== */
/* Force dark theme on all major containers */
.skin-vector,
.skin-vector-legacy,
.skin-monobook {
    background: var(--main-bg) !important;
}

/* Header and navigation areas */
#mw-head,
#mw-head-base,
#mw-navigation,
.mw-header-container {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a0f0f 100%) !important;
}

/* All portlet containers */
.portlet,
.vector-menu,
.mw-portlet {
    background: transparent !important;
}

/* Personal tools area */
#p-personal,
.vector-user-links {
    background: transparent !important;
}

#p-personal ul,
.vector-user-links .vector-menu-content-list {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color);
}

/* Page tabs */
#p-namespaces,
#p-views,
#p-cactions,
.vector-menu-tabs {
    background: transparent !important;
}

/* Fix any remaining white divs */
div[style*="background-color: white"],
div[style*="background-color:#ffffff"],
div[style*="background-color: #ffffff"],
div[style*="background: white"],
div[style*="background:#ffffff"],
div[style*="background: #ffffff"] {
    background: var(--main-bg) !important;
}

/* Ensure all text remains visible */
* {
    color: inherit;
}

/* Specific overrides for common issues */
.mw-body-content {
    background: transparent !important;
}

.mw-content-container,
.mw-article-toolbar-container,
.mw-sidebar-container,
.mw-workspace-container {
    background: var(--main-bg) !important;
}

/* Page background */
.mw-page-container {
    background: var(--main-bg) !important;
    color: var(--text-primary) !important;
}

/* Sticky header background */
.vector-sticky-header {
    background: var(--secondary-bg) !important;
    border-bottom: 1px solid var(--blood-red);
}

/* ===== COMPREHENSIVE DARK THEME ENFORCEMENT ===== */
/* Reset all backgrounds */
* {
    background-color: transparent;
}

/* Force dark background on root elements */
html,
body,
.skin-vector,
.skin-vector-legacy,
.mediawiki {
    background: var(--main-bg) !important;
    color: var(--text-primary) !important;
}

/* Main content areas */
.mw-page-container,
.mw-workspace-container,
.mw-content-container,
.mw-article-toolbar-container,
.skin-vector .mw-body,
.vector-body {
    background: var(--main-bg) !important;
    color: var(--text-primary) !important;
}

/* Header sections */
.mw-header,
.vector-header-container,
#mw-head,
#mw-head-base,
.vector-sticky-header-container {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a0f0f 100%) !important;
}

/* Sidebar containers */
.mw-sidebar,
.vector-sidebar-container,
.vector-sidebar-container-no-toc,
.vector-main-menu-container,
#mw-panel,
#mw-navigation {
    background: var(--secondary-bg) !important;
}

/* Individual sidebar sections */
.vector-menu-portal,
.vector-main-menu-group,
.vector-menu-content,
.mw-portal,
.portal {
    background: var(--main-bg) !important;
    margin: 10px !important;
    padding: 10px !important;
    border: 1px solid var(--border-color) !important;
}

/* Table of contents specific */
.vector-toc,
.sidebar-toc,
#toc,
.toc {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}

.vector-toc .vector-toc-contents,
.sidebar-toc .sidebar-toc-contents {
    background: transparent !important;
}

/* Fix white backgrounds in various UI elements */
.vector-dropdown-content,
.vector-menu-dropdown .vector-menu-content,
.mw-searchSuggest-link,
.suggestions {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}

/* Personal tools dropdown */
#p-personal .vector-menu-content,
.vector-user-menu .vector-menu-content {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}

/* Page tools */
.vector-page-toolbar-container,
.vector-page-tools {
    background: transparent !important;
}

/* Eliminate any remaining white backgrounds */
[style*="background: white"],
[style*="background:white"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background: #ffffff"],
[style*="background:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background-color:#ffffff"],
[style*="background: rgb(255"],
[style*="background-color: rgb(255"] {
    background: var(--main-bg) !important;
}

/* Ensure text remains visible */
[style*="color: black"],
[style*="color:black"],
[style*="color: #000"],
[style*="color:#000"],
[style*="color: #000000"],
[style*="color:#000000"],
[style*="color: rgb(0, 0, 0)"] {
    color: var(--text-primary) !important;
}

/* Footer area */
#footer,
.mw-footer-container {
    background: #0a0a0a !important;
    border-top: 2px solid var(--blood-red) !important;
}

/* Edit page specific */
.editOptions,
#editpage-specialchars,
.mw-editTools {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}

/* Notification area */
.mw-notification-area,
.mw-notification {
    background: var(--secondary-bg) !important;
}

/* Search results page */
.mw-search-results-container,
.searchresults {
    background: var(--main-bg) !important;
}

/* Special pages */
.mw-special-Watchlist #mw-content-text,
.mw-special-Recentchanges #mw-content-text,
.mw-special-Contributions #mw-content-text {
    background: var(--main-bg) !important;
}

/* Dialog boxes and popups */
.oo-ui-window-content,
.oo-ui-dialog-content,
.mw-mmv-overlay {
    background: var(--secondary-bg) !important;
    color: var(--text-primary) !important;
}

/* OOUI theme overrides */
.oo-ui-buttonElement-button,
.oo-ui-inputWidget-input {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Dropdown menus */
.oo-ui-menuSelectWidget,
.oo-ui-dropdownWidget-handle {
    background: var(--secondary-bg) !important;
    border: 1px solid var(--border-color) !important;
}

/* Final override for any missed elements */
.mw-body *,
#content * {
    background-color: transparent;
}

.mw-body,
#content,
.mw-body-content {
    background: var(--main-bg) !important;
}

/* ===== ABSOLUTE FINAL OVERRIDE ===== */
/* Nuclear option - use if some elements still show white */
/* This aggressively forces dark theme on everything */
div:not([class*="mw-highlight"]),
span:not([class*="mw-highlight"]),
section,
aside,
nav {
    background-color: transparent !important;
}

/* Ensure the main containers always have dark background */
html, body,
.mw-page-container,
.mw-body,
.mw-body-content,
#content,
.vector-body,
.skin-vector,
.mediawiki {
    background: #0d0d0d !important;
    background-color: #0d0d0d !important;
    color: #c9c9c9 !important;
}

/* Force dark theme on sidebars */
#mw-panel,
.mw-sidebar,
.vector-sidebar-container,
.vector-main-menu-container {
    background: #1a0f0f !important;
    background-color: #1a0f0f !important;
}

/* Any element with white in style attribute */
[style*="fff"],
[style*="FFF"],
[style*="white"],
[style*="WHITE"],
[style*="255, 255, 255"],
[style*="255,255,255"] {
    background: #0d0d0d !important;
    background-color: #0d0d0d !important;
}

/* Ensure all text is visible */
* {
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    color: #b89968 !important;
}

a {
    color: #b89968 !important;
}

a:visited {
    color: #9a7f5a !important;
}

/* Emergency text visibility */
span, p, div, li, td, th {
    color: inherit;
}

/* If text is explicitly black, make it light */
[style*="color: #000"],
[style*="color:#000"],
[style*="color: black"],
[style*="color:black"] {
    color: #c9c9c9 !important;
}


/* Unrelated to looks of the website! */
/* TOC display level limiter, will only display the TOC up to level N */
.toc1 li.toclevel-2, .toc1 li.toclevel-3, .toc1 li.toclevel-4, .toc1 li.toclevel-5, .toc1 li.toclevel-6,
.toc2 li.toclevel-3, .toc2 li.toclevel-4, .toc2 li.toclevel-5, .toc2 li.toclevel-6,
.toc3 li.toclevel-4, .toc3 li.toclevel-5, .toc3 li.toclevel-6,
.toc4 li.toclevel-5, .toc4 li.toclevel-6,
.toc5 li.toclevel-6,
.hide,

body.page-Main_Page.ns-subject h1.firstHeading { display:none; }


/* used by the front page starts*/
/* Default styles for desktop (769px or more) */
@media only screen and (min-width: 769px) {
    .desktop-view {
        display: block !important;
    }
    .mobile-view {
        display: none !important;
    }
}

/* Mobile styles */
@media only screen and (max-width: 768px) {
    .desktop-view { 
        display: none !important; 
    }
    .mobile-view { 
        display: block !important; 
    }
}
/* used by the front page end*/