/* =========================================
   EVCAN Dynamic Color System — Pure CSS
   ========================================= */

/* 1) Brand palette + sensible on-white defaults */
:root {
    --ev-blue: #20466B;
    /* Blue Indigo */
    --ev-white: #FFFFFF;
    --ev-yellow: #FFCA05;
    /* Philippine Yellow */
    --ev-green: #B8FF3C;
    /* Green Yellow */
    --ev-teal: #4BF2D0;
    /* Turquoise */
    --ev-red: #FF8466;
    /* Coral Beef */
    --ev-gray-100: #E5E5E5;
     --evcan-warning: #FFC20E;

    /* AL: Figma colors */
    --ev-blue: #27587D;
    --ev-white: #FFFFFF;
    --ev-yellow: #FFD429;
    --ev-green: #BEFC5A;
    --ev-teal: #41F2DA;
    --ev-red: #FD8B68; /* kept a darker tone because adjustments were made for white */


    /* legacy aliases (your existing vars) */
    --blue: var(--ev-blue);
    --green: var(--ev-green);
    --yellow: var(--ev-yellow);
    --teal: var(--ev-teal);
    --red: var(--ev-red);
    --white:var(--ev-white);

    /* defaults for light pages (on white) */
    --evcan-bg: var(--ev-white);
    --evcan-fg: var(--ev-blue);
    --evcan-heading: var(--ev-blue);
    --evcan-muted: color-mix(in srgb, var(--ev-blue) 60%, white);
    --evcan-border: color-mix(in srgb, var(--ev-blue) 25%, white);
    --evcan-link: var(--ev-blue);
    --evcan-link-hov: var(--ev-red);
    --evcan-accent: var(--ev-yellow);
    --evcan-button-bg: var(--ev-blue);
    --evcan-button-fg: var(--ev-white);
    --evcan-button-color: var(--evcan-button-fg);
}

/* 2) Background utilities (as you provided) */
.bg-lime-green {
    background-color: var(--green) !important;
}

/* #B8FF3C */
.bg-dark-blue {
    background-color: var(--blue) !important;
}

/* #20466B */
.bg-aqua-blue {
    background-color: var(--teal) !important;
}

/* #4BF2D0 */
.bg-coral {
    background-color: var(--red) !important;
}

/* #FF8466 */
.bg-yellow {
    background-color: var(--yellow) !important;
}

.bg-white{
    background-color: var(--white) !important;
}
/* #FFCA05 */

/* 3) Theme variable presets per background (WCAG-checked) */

/* On White (page default or .on-white wrapper) */
.bg-white {
    --evcan-bg: var(--ev-white);
    --evcan-fg: var(--ev-blue);
    --evcan-heading: var(--ev-blue);
    --evcan-muted: color-mix(in srgb, var(--ev-blue) 60%, white);
    --evcan-border: color-mix(in srgb, var(--ev-blue) 25%, white);
    --evcan-link: var(--ev-blue);
    --evcan-link-hov: var(--ev-red);
    --evcan-accent: var(--ev-yellow);
    --evcan-button-bg: var(--ev-blue);
    --evcan-button-fg: var(--ev-white);
    --evcan-button-border: var(--ev-blue);
    --evcan-button-hover-bg: #0d263d;
    --evcan-button-color: var(--ev-white);
    --evcan-warning: #FFC20E;
}

/* Dark Blue background */
.bg-dark-blue {
    --evcan-bg: var(--ev-blue);
    --evcan-fg: var(--ev-white);
    --evcan-heading: var(--ev-white);
    --evcan-muted: color-mix(in srgb, var(--ev-white) 75%, black);
    --evcan-border: color-mix(in srgb, var(--ev-white) 25%, transparent);
    --evcan-link: var(--ev-white);
    --evcan-link-hov: var(--ev-green);
    --evcan-accent: var(--ev-green);
    --evcan-button-bg: var(--ev-green);
    --evcan-button-fg: var(--ev-blue);
    --evcan-button-border: var(--ev-green);
    --evcan-button-hover-bg: var(--ev-white);
    --evcan-button-color: var(--ev-blue);
    --evcan-warning: #FFDD55;
}

/* Green Yellow background */
.bg-lime-green {
    --evcan-bg: var(--ev-green);
    --evcan-fg: var(--ev-blue);
    --evcan-heading: var(--ev-blue);
    --evcan-muted: color-mix(in srgb, var(--ev-blue) 55%, white);
    --evcan-border: color-mix(in srgb, var(--ev-blue) 35%, transparent);
    --evcan-link: var(--ev-blue);
    --evcan-link-hov: color-mix(in srgb, var(--ev-blue) 80%, black);
    --evcan-accent: var(--ev-blue);
    --evcan-button-bg: var(--ev-blue);
    --evcan-button-fg: var(--ev-blue);
    --evcan-button-border: var(--ev-blue);
    --evcan-button-hover-bg: var(--white);
    --evcan-button-color:var(--white);
      --evcan-warning: #8B2E00;
}

/* Philippine Yellow background */
.bg-yellow {
    --evcan-bg: var(--ev-yellow);
    --evcan-fg: var(--ev-blue);
    --evcan-heading: var(--ev-blue);
    --evcan-muted: color-mix(in srgb, var(--ev-blue) 55%, white);
    --evcan-border: color-mix(in srgb, var(--ev-blue) 35%, transparent);
    --evcan-link: var(--ev-blue);
    --evcan-link-hov: color-mix(in srgb, var(--ev-blue) 80%, black);
    --evcan-accent: var(--ev-blue);
    --evcan-button-bg: var(--ev-blue);
    --evcan-button-fg: var(--ev-white);
    --evcan-button-border: var(--ev-blue);
    --evcan-button-hover-bg: #0d263d;
    --evcan-button-color: var(--ev-white);
    --evcan-warning: #1B2E4A;
}

/* Turquoise background */
.bg-aqua-blue {
    --evcan-bg: var(--ev-teal);
    --evcan-fg: var(--ev-blue);
    /* AA 6.9 */
    --evcan-heading: var(--ev-blue);
    --evcan-muted: color-mix(in srgb, var(--ev-blue) 55%, white);
    --evcan-border: color-mix(in srgb, var(--ev-blue) 35%, transparent);
    --evcan-link: var(--ev-blue);
    --evcan-link-hov: color-mix(in srgb, var(--ev-blue) 80%, black);
    --evcan-accent: var(--ev-white);
    --evcan-button-bg: var(--ev-blue);
    --evcan-button-fg: var(--ev-white);
    --evcan-button-border: var(--ev-blue);
    --evcan-button-hover-bg: #0d263d;
    --evcan-button-color: var(--ev-white);
     --evcan-warning: #994A00;
}

/* Coral background */
.bg-coral {
    --evcan-bg: var(--ev-red);
    --evcan-fg: var(--ev-white);
    /* AA large (4.0) → prefer for headings/buttons */
    --evcan-heading: var(--ev-white);
    --evcan-muted: color-mix(in srgb, var(--ev-white) 75%, black);
    --evcan-border: color-mix(in srgb, var(--ev-white) 25%, transparent);
    --evcan-link: var(--ev-white);
    --evcan-link-hov: var(--ev-teal);
    --evcan-accent: var(--ev-teal);
    --evcan-button-bg: var(--ev-white);
    --evcan-button-fg: var(--ev-blue);
    --evcan-button-border: var(--ev-white);
    --evcan-button-hover-bg: var(--ev-teal);
    --evcan-button-color: var(--ev-blue);
      --evcan-warning: #FFF5A5;
}

/* 4) Generic element bindings (apply contextual variables) */
section,
.section,
.block,
.panel,
.on-white,
body {
    background: var(--evcan-bg);
    color: var(--evcan-fg);
    border-color: var(--evcan-border);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--evcan-heading);
}

p,
li,
dt,
dd,
small {
    color: var(--evcan-fg);
}

.muted {
    color: var(--evcan-muted);
}

/* Enhanced Link Styling with Better Visibility */
a {
    color: var(--evcan-link);
    text-underline-offset: .12em;
    text-decoration: underline;
    transition: all 0.3s ease;
    position: relative;
}

a:hover,
a:focus {
    color: var(--evcan-link-hov);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: .2em;
}

/* Special link styles for different contexts */
a.btn {
    text-decoration: none;
}

a.btn:hover,
a.btn:focus {
    text-decoration: none;
}

/* Link visibility improvements */
/* a:not(.btn) {
    font-weight: 500;
} */

a:not(.btn):hover {
    transform: translateY(-1px);
}

hr,
.divider,
.bordered {
    border-color: var(--evcan-border);
}

.card {
    background: color-mix(in srgb, var(--evcan-bg) 85%, #fff 15%);
    color: var(--evcan-fg);
    border: 1px solid var(--evcan-border);
}
.card{
    background: var(--evcan-fg);
    color: var(--evcan-bg);
    border-color: var(--evcan-border);
}
.card a, .card h2, .card h3, .card h4, .card h5, .card h6, .card small{
 color: var(--evcan-bg) !important;
}
/* .card svg path{
 fill: var(--evcan-bg) !important;
} */
input,
select,
textarea {
    background: color-mix(in srgb, var(--evcan-bg) 90%, #fff 10%);
    color: var(--evcan-fg);
    border: 1px solid var(--evcan-border);
}

input::placeholder,
textarea::placeholder {
    color: var(--evcan-muted);
}

.accent {
    color: var(--evcan-accent);
}

/* 5) Dynamic Buttons with Gradient Effects */
.btn {

    background: var(--evcan-button-bg);
    color: var(--evcan-button-fg);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn:hover {
    filter: contrast(1.1) brightness(.98);
}

.accordion .accordion-button{
     background: var(--evcan-button-fg);
    color: var(--evcan-button-bg);
}
.accordion .accordion-body {
    color: var(--evcan-button-bg);
}
/* Dynamic gradient button effect (similar to your reference) */
a.btn {
    border-color: transparent;
    background: linear-gradient(to right, var(--evcan-button-hover-bg) 50%, var(--evcan-button-bg) 50%);
    background-size: 200% 100%;
    background-position: right center;
    transition: background-position 0.3s ease, color 0.3s ease;
    color: var(--evcan-button-color);
}
a.btn svg path{
    stroke:var(--evcan-button-color);
}

a.btn:hover {

    color: var(--evcan-button-fg);
    background-position: left bottom !important;
    border-color: var(--evcan-button-hover-bg);
}
a.btn:hover svg path{
    stroke: var(--evcan-button-fg);
}
/* Button variants (from client sheet) */
.btn--blue-to-overlay {
    background-color: var(--ev-blue);
    color: var(--ev-white);
}

.btn--blue-to-overlay:hover,
.btn--blue-to-overlay:focus {
    background-color: #0d263d;
    color: var(--ev-white);
}

.btn--blue-to-green {
    background-color: var(--ev-blue);
    color: var(--ev-white);
}

.btn--blue-to-green:hover,
.btn--blue-to-green:focus {
    background-color: var(--ev-green);
    color: var(--ev-blue);
}

.btn--blue-to-white {
    background-color: var(--ev-blue);
    color: var(--ev-white);
}

.btn--blue-to-white:hover,
.btn--blue-to-white:focus {
    background-color: var(--ev-white);
    color: var(--ev-blue);
}

.btn--green-to-white {
    background-color: var(--ev-green);
    color: var(--ev-blue);
}

.btn--green-to-white:hover,
.btn--green-to-white:focus {
    background-color: var(--ev-white);
    color: var(--ev-blue);
}

.btn--green-to-blue {
    background-color: var(--ev-green);
    color: var(--ev-blue);
}

.btn--green-to-blue:hover,
.btn--green-to-blue:focus {
    background-color: var(--ev-blue);
    color: var(--ev-white);
}

.btn--white-to-blue {
    background-color: var(--ev-white);
    color: var(--ev-blue);
}

.btn--white-to-blue:hover,
.btn--white-to-blue:focus {
    background-color: var(--ev-blue);
    color: var(--ev-white);
}

.btn--white-to-green {
    background-color: var(--ev-white);
    color: var(--ev-blue);
}

.btn--white-to-green:hover,
.btn--white-to-green:focus {
    background-color: var(--ev-green);
    color: var(--ev-blue);
}

/* 6) Optional helpers */
.text-on-dark {
    color: var(--ev-white) !important;
}

.text-on-light {
    color: var(--ev-blue) !important;
}

.border-muted {
    border-color: var(--evcan-border) !important;
}

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

/* Enhanced button utilities */
.btn-outline {
    background: transparent;
    border: 2px solid var(--evcan-button-bg);
    color: var(--evcan-button-bg);
}

.btn-outline:hover {
    background: var(--evcan-button-bg);
    color: var(--evcan-button-fg);
}

.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--evcan-link);
}

.btn-ghost:hover {
    background: color-mix(in srgb, var(--evcan-button-bg) 10%, transparent);
    border-color: var(--evcan-button-bg);
    color: var(--evcan-button-bg);
}

/* Link utilities */
.link-primary {
    color: var(--evcan-link);
    font-weight: 600;
}

.link-primary:hover {
    color: var(--evcan-link-hov);
}

.link-underline {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.link-no-underline {
    text-decoration: none;
}

.link-no-underline:hover {
    text-decoration: underline;
}
.text-warning {
    color: var(--evcan-warning) !important;
    /* font-weight: 600; optional for better prominence */
}

/** AL: start style standardization **/
.read-more,
.dev-detail a,
.news-electric-custom a,
section .container a,
section .container ul:not(.subscribe-list):not(.get-involved-list) li a,
.electric-trans-subheading a
{
    font-weight:bold;
    text-decoration:underline;
}

.read-more:hover,
.read-more:focus,
.dev-detail a:hover,
.dev-detail a:focus,
.news-electric-custom a:hover,
.news-electric-custom a:focus
{
    color: #FF8466 !important;
}

/* new baseline for hovering, AL added on 2025-12-08, --var consolidated for hovering only */
:root {
    /* default styling, a:hover won't work here*/
    --linkHoverColor: var(--red);
}
.bg-white{
    --linkHoverColor: var(--red);
}
.bg-lime-green,
.bg-aqua-blue,
.bg-coral,
.bg-yellow {
    /* defined color container */
    --linkHoverColor: var(--hoverBlue);
}
.bg-dark-blue {
    /* defined color container */
    --linkHoverColor: var(--green);
}
.No.background {
    /* defined with no bg container */
    --linkHoverColor: inherit;
}
a:not(.btn):not(.btn-tabbing):hover {
    /* apply the hover color before handling special cases */
    color: var(--linkHoverColor);
}

/* very specific patches */
.stayloop-custom .subscribe-custom-btn:hover{
    color: var(--hoverBlue);
}
section.events-section .container h2 a{
    font-weight: normal;
}

.dlc-login-register .nav.nav-tabs .nav-item a{
    text-decoration:none;
}

.organization-btn a{
    text-decoration: none;
}

.organization-btn a{
    background: #fff;
}

.dashboard-admin .organization-btn .common-bnt a.btn-white:hover svg path {
    stroke: #1961c4;
}

/* =========================================
   LIST STYLING STANDARDIZATION - 2026-01-16
   =========================================

   Problem: Global `ul { list-style: none }` in style.css removes all bullets.
   The original dev team used pseudo-elements (:before/:after) to recreate bullets,
   requiring specific HTML structure (<span> wrappers) that Gutenberg doesn't generate.

   Solution: Scope the reset to navigation/UI elements only, restore native list
   styling for content areas. This works with standard HTML that Gutenberg outputs.

   ========================================= */

/* -----------------------------------------
   1. NAVIGATION/UI ELEMENTS - Keep list-style: none
   These are intentionally unstyled lists used for menus, tabs, etc.
   ----------------------------------------- */
nav ul,
.navbar ul,
.navbar-nav,
.nav-tabs,
.dropdown-menu,
.custom-nav ul,
.side-links ul,
.footer-links ul,
.billing-links ul,
.search-links ul,
.sidebar-search ul,
.social-icon ul,
.subscribe-list,
.get-involved-list,
.events-img-list,
.custom-flex,
.tabbing-group,
.button-group ul,
.comment-list,
.notifiaction-accordion ul,
.slick-dots,
.mission-list ul,
.evcan-charging-list,
.manufacturers-custom-list ul,
.listing-main ul,
.spec-box ul,
.hdp-steps,
[class*="menu-"] ul,
[id*="menu-"] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notifiaction-accordion ul {
    margin-block-start: 0 !important;
}

/* -----------------------------------------
   2. CONTENT AREAS - Restore native list styling
   These selectors target areas where user content appears.
   Uses standard CSS list properties instead of pseudo-element hacks.
   ----------------------------------------- */

/* Base content list styles */
.entry-content ul,
.entry-content ol,
.event-content ul,
.event-content ol,
.dev-content ul,
.dev-content ol,
.contect-block ul,
.contect-block ol,
.content-area ul,
.content-area ol,
.news-electric-custom ul,
.news-electric-custom ol,
.card-body .content-text ul,
.card-body .content-text ol,
.wp-block-list,
.has-text-align-left ul,
.has-text-align-left ol,
article .post-content ul,
article .post-content ol {
    display: block;
    margin: 1em 0;
    padding-left: 40px;
}

/* Unordered lists - disc bullets */
.entry-content ul,
.event-content ul,
.dev-content ul,
.contect-block ul,
.content-area ul,
.news-electric-custom ul,
.card-body .content-text ul,
.has-text-align-left ul,
article .post-content ul {
    list-style-type: disc;
}

/* Ordered lists - decimal numbers */
.entry-content ol,
.event-content ol,
.dev-content ol,
.contect-block ol,
.content-area ol,
.news-electric-custom ol,
.card-body .content-text ol,
.has-text-align-left ol,
article .post-content ol {
    list-style-type: decimal;
}

/* List items */
.entry-content li,
.event-content li,
.dev-content li,
.contect-block li,
.content-area li,
.news-electric-custom li,
.card-body .content-text li,
.wp-block-list li,
.has-text-align-left li,
article .post-content li {
    display: list-item;
    line-height: 1.6;
    margin-bottom: 0.5em;
}

/* Nested lists */
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul,
.event-content ul ul,
.event-content ol ol,
.dev-content ul ul,
.dev-content ol ol,
.content-area ul ul,
.content-area ol ol {
    margin: 0.5em 0 0.5em 1.5em;
}

/* Second level bullets - circle */
.entry-content ul ul,
.event-content ul ul,
.dev-content ul ul,
.content-area ul ul {
    list-style-type: circle;
}

/* Third level bullets - square */
.entry-content ul ul ul,
.event-content ul ul ul,
.dev-content ul ul ul,
.content-area ul ul ul {
    list-style-type: square;
}

/* -----------------------------------------
   3. GUTENBERG BLOCK SUPPORT
   WordPress block editor generates specific classes
   ----------------------------------------- */
.wp-block-list {
    padding-left: 40px;
}

.wp-block-list.is-style-default,
ul.wp-block-list {
    list-style-type: disc;
}

ol.wp-block-list {
    list-style-type: decimal;
}

.wp-block-list li {
    display: list-item;
    margin-bottom: 0.5em;
}

/* Gutenberg columns with lists */
.wp-block-column ul,
.wp-block-column ol,
.wp-block-group ul,
.wp-block-group ol {
    list-style-position: outside;
    padding-left: 40px;
    margin: 1em 0;
}

.wp-block-column ul,
.wp-block-group ul {
    list-style-type: disc;
}

.wp-block-column ol,
.wp-block-group ol {
    list-style-type: decimal;
}

/* -----------------------------------------
   4. SECTION CONTAINER CONTENT
   Generic fallback for content within sections
   ----------------------------------------- */
section .container .content-text ul,
section .container .content-text ol,
section .container article ul,
section .container article ol,
.perspectives-section .event-content ul,
.perspectives-section .event-content ol {
    display: block;
    list-style-position: outside;
    margin: 1em 0;
    padding-left: 40px;
}

section .container .content-text ul,
section .container article ul,
.perspectives-section .event-content ul {
    list-style-type: disc;
}

section .container .content-text ol,
section .container article ol,
.perspectives-section .event-content ol {
    list-style-type: decimal;
}

section .container .content-text li,
section .container article li,
.perspectives-section .event-content li {
    display: list-item;
    line-height: 1.6;
    margin-bottom: 0.5em;
}

/* Remove br elements that sometimes appear in list content */
section .container ul > br,
section .container ol > br,
.entry-content ul > br,
.entry-content ol > br {
    display: none;
}

/* -----------------------------------------
   5. SOLID-LIST & DOT-LISTNING COMPATIBILITY
   These classes use pseudo-element bullets in original theme.
   Override to use native styling for consistency.
   ----------------------------------------- */
.solid-list ul,
.dot-listning ul {
    list-style-type: disc;
    padding-left: 40px;
    margin: 1em 0;
}

.solid-list ol,
.dot-listning ol {
    list-style-type: decimal;
    padding-left: 40px;
    margin: 1em 0;
}

.solid-list li,
.dot-listning li {
    display: list-item;
    padding-left: 0;
    position: static;
    line-height: 1.6;
    margin-bottom: 0.5em;
}

/* Disable pseudo-element bullets - use native instead */
.solid-list ul li:before,
.solid-list ul li:after,
.solid-list ul li span:before,
.solid-list ul li span:after,
.dot-listning ul li:before,
.dot-listning ul li:after,
.dot-listning .solid-list ul li:before,
.dot-listning .solid-list ul li:after {
    display: none !important;
    content: none !important;
}

/* -----------------------------------------
   6. SPECIFIC COMPONENT OVERRIDES
   Components that specifically need list-style: none
   ----------------------------------------- */

/* Dashboard sidebar menus */
.left-sidebar ul,
.right-sidebar-event ul:not(.content-text ul),
#menu-dashboard-sidebar-menu-1,
#menu-dashboard-manufacturer-quick-links-1,
#menu-dashboard-non-manufacturer-quick-links-1 {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Tags and categories */
.tags-section ul,
.tabbing-group ul {
    list-style: none;
    padding: 0;
}

/* Alert boxes - keep styled */
.alert-warning ul {
    list-style-type: disc;
    padding-left: 20px;
}

/* Focus content lists */
.focus-content ul {
    list-style-type: disc;
    padding-left: 20px;
}

.focus-content ul li {
    display: list-item;
    padding-left: 0;
    position: static;
}

.focus-content ul li:before {
    display: none !important;
}

/* Report content */
.dlc-report-content ul {
    list-style-type: disc;
    padding-left: 40px;
}

.dlc-report-content ul li {
    display: list-item;
}

/* Default listing style override */
ul.default-listning {
    list-style-type: disc;
    padding-left: 40px;
}

ul.default-listning li {
    display: list-item;
    padding-left: 0;
    position: static;
}

ul.default-listning li:after {
    display: none !important;
}

/* EV bullet lists */
.Investment-Drivers ul.ev-bullet-list.text-start {
    list-style-type: disc;
    padding-left: 40px;
}

.Investment-Drivers ul.ev-bullet-list.text-start li {
    display: list-item;
}

/* Why matters list */
ul.why-matters-list {
    list-style-type: disc;
    padding-left: 40px;
}

/* Product content */
.product-body-content ul {
    list-style-type: disc;
    padding-left: 40px;
    margin: 1em 0;
}

.product-body-content ul li {
    display: list-item;
    margin-bottom: 0.5em;
}

/* Guidelines section */
.guidelines ul {
    list-style-type: disc;
    padding-left: 40px;
}

/* Card body content - ensure proper lists */
.card-body ul:not(.nav):not(.dropdown-menu) {
    list-style-type: disc;
    padding-left: 40px;
    margin: 1em 0;
}

.card-body ul:not(.nav):not(.dropdown-menu) li {
    display: list-item;
    position: static;
    padding-left: 0;
}

.card-body ul li:after,
.card-body ul li:before {
    display: none !important;
}

/* -----------------------------------------
   7. PRINT STYLES
   Ensure lists print correctly
   ----------------------------------------- */
@media print {
    ul, ol {
        list-style-position: inside;
    }

    ul {
        list-style-type: disc;
    }

    ol {
        list-style-type: decimal;
    }
}

/** END LIST STYLING STANDARDIZATION **/

/* AL: upcoming events */
#h-sorry-there-are-currently-no-upcoming-events {
    text-align:center;
}
.event-content .btn-tabbing{
    padding-left: 20px;
}

.events-section.upcomming-event .btn.btn-primary,
.events-section.past-event .btn.btn-primary {
    text-decoration: none;
    background-color: #27587D;
    border-radius: 50px;
    color: #fff;
    border-color: #27587D;
    height: 39px;
    width: 200px;
    font-family: Inter;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    background: linear-gradient(to right, #061e3d 50%, #27587D 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all 0.3s ease;
    border: 1px solid #27587D;
}

.events-section.upcomming-event .btn.btn-primary:hover,
.events-section.past-event .btn.btn-primary:hover {
    background-position: left bottom;
    color: #fff;
    border-color: #061e3d;
}

.events-section.upcomming-event .button-group .common-bnt a:hover svg path,
.events-section.past-event .button-group .common-bnt a:hover svg path{
    stroke: #fff;
}
/* AL: upcoming events */

.single-dlc_event .events-img-list .focus-content{


}