/*!
 * Chamilo LMS stylesheet - Default v.2.0
 * Homepage: https://chamilo.org
 * Author: Alex Aragón <alex.aragon@beeznest.com>
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Based on Bootstrap v3
*/

html {
  position: relative;
}
body {
  margin: 0 0 60px;
}
body > main footer.footer {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
}

a {
  color: #2c5282;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #1a365d;
  text-decoration: none;
}
a:focus {
  outline: none;
}

.navbar-nav > li{
  margin-bottom: 0;
}
.navbar-collapse{
  overflow: hidden !important;
}
.navbar-default {
  background: #2c5282;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
  color: #c53030;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus{
  color: #fff;
  background-color:#2C5B8E;
}
.navbar-default .navbar-nav > li > a{
  color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus{
  background: #18477A;
  color: #ffffff;
}
.navbar-nav > li > .dropdown-menu{
  min-width: 100%;
  margin-top: 2px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}
.navbar-default .navbar-nav > .open > .dropdown-menu{
  padding: 3px 4px;
}
.navbar-default .navbar-nav > .open > .dropdown-menu > li > a{
  padding: 6px 9px;
}
.nav > li > a:hover, .nav > li > a:focus{
   background-color: transparent;
}
.navbar-form .form-control{
  height: 25px;
  padding: 6px;
}
.navbar-default .navbar-brand {
  color:white;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
  border-color: #2C5B8E;
}

.navbar-default .navbar-toggle{
  border-color: #00677C;
}
.navbar-default .navbar-toggle .icon-bar{
  background-color: #ffffff;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
  background-color: #2C5B8E;
}
.badge-warning{
  background-color: #FD6600;
}
.breadcrumb{
  padding: 8px 15px;
  margin-bottom: 21px;
  list-style: outside none none;
  background-color: #ECF0F1;
}
.breadcrumb > .active{
  color: #95a5a6;
}
.panel-default{
  border-color: #ECF0F1;
}
/* Jquery UI */
.ui-accordion .ui-accordion-icons{
  padding-left: 0.2em;
}
/* End Jquery UI */
.bgfooter{
  background-color:#1A2226;
}
.bgfooter{
  color: #ffffff;
}
.bgfooter a{
  color: #ffffff;
}
/**
 * Connexxo Brand Custom Styles
 * Learning Central by Connexxo
 * Primary color: #585878 (Connexxo Purple)
 */

/* ==========================================================================
   Color Variables and Root Overrides
   ========================================================================== */

:root {
    --connexxo-primary: #585878;
    --connexxo-primary-dark: #484868;
    --connexxo-primary-light: #6868a8;
    --connexxo-accent: #e85d04;
    --connexxo-text: #333333;
    --connexxo-bg-light: #f8f9fa;
}

/* ==========================================================================
   Top Navigation Bar (Dark Bar)
   ========================================================================== */

#navigation,
.navbar-default,
nav.navbar {
    background-color: var(--connexxo-primary) !important;
    background: linear-gradient(180deg, var(--connexxo-primary) 0%, var(--connexxo-primary-dark) 100%) !important;
    border-color: var(--connexxo-primary-dark) !important;
}

#navigation a,
.navbar-default .navbar-nav > li > a,
nav.navbar a {
    color: #ffffff !important;
}

#navigation a:hover,
.navbar-default .navbar-nav > li > a:hover {
    color: #e0e0e0 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   Main Navigation Bar (Below Header)
   ========================================================================== */

#main_navigation,
.menu-container,
.nav-tabs,
ul.nav-pills:not(.nav-stacked) {
    background-color: var(--connexxo-primary) !important;
}

#main_navigation a,
.menu-container a,
.nav-tabs > li > a {
    color: #ffffff !important;
}

#main_navigation a:hover,
#main_navigation li.active a,
.menu-container a:hover {
    background-color: var(--connexxo-primary-dark) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary,
.btn-success,
button[type="submit"],
input[type="submit"] {
    background-color: var(--connexxo-primary) !important;
    border-color: var(--connexxo-primary-dark) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-success:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: var(--connexxo-primary-dark) !important;
    border-color: var(--connexxo-primary) !important;
}

.btn-primary:focus,
.btn-primary:active,
.btn-success:focus,
.btn-success:active {
    background-color: var(--connexxo-primary-dark) !important;
    border-color: var(--connexxo-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(88, 88, 120, 0.25) !important;
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
    color: var(--connexxo-primary);
}

a:hover,
a:focus {
    color: var(--connexxo-primary-dark);
}

/* ==========================================================================
   Breadcrumbs and Progress
   ========================================================================== */

.breadcrumb > li + li:before {
    color: var(--connexxo-primary);
}

.progress-bar {
    background-color: var(--connexxo-primary) !important;
}

/* ==========================================================================
   Panels and Cards
   ========================================================================== */

.panel-primary > .panel-heading,
.panel-success > .panel-heading {
    background-color: var(--connexxo-primary) !important;
    border-color: var(--connexxo-primary-dark) !important;
}

.panel-primary {
    border-color: var(--connexxo-primary) !important;
}

/* ==========================================================================
   Learning Path Sidebar
   ========================================================================== */

#learning_path_left_zone,
.lp-view-zone {
    background-color: var(--connexxo-bg-light) !important;
}

#learning_path_left_zone .current,
.lp-view-zone .current {
    background-color: var(--connexxo-primary) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Page Headers and Titles
   ========================================================================== */

h1, h2, h3 {
    color: var(--connexxo-text);
}

.page-header {
    border-bottom-color: var(--connexxo-primary);
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer,
#footer {
    background-color: var(--connexxo-primary-dark) !important;
    color: #ffffff !important;
}

footer a,
#footer a {
    color: #e0e0e0 !important;
}

footer a:hover,
#footer a:hover {
    color: #ffffff !important;
}

/* ==========================================================================
   Selection Highlight
   ========================================================================== */

::selection {
    background-color: var(--connexxo-primary);
    color: #ffffff;
}

::-moz-selection {
    background-color: var(--connexxo-primary);
    color: #ffffff;
}

/* ==========================================================================
   Dropdown Menus
   ========================================================================== */

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--connexxo-primary) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table > thead > tr > th {
    background-color: var(--connexxo-primary) !important;
    color: #ffffff !important;
    border-color: var(--connexxo-primary-dark) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(88, 88, 120, 0.05);
}

/* ==========================================================================
   Alerts and Notifications
   ========================================================================== */

.alert-info {
    background-color: rgba(88, 88, 120, 0.1);
    border-color: var(--connexxo-primary);
    color: var(--connexxo-primary-dark);
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-bottom-color: var(--connexxo-primary) !important;
    color: var(--connexxo-primary) !important;
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

input:focus,
textarea:focus,
select:focus {
    border-color: var(--connexxo-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(88, 88, 120, 0.25) !important;
}

/* ==========================================================================
   Badge and Labels
   ========================================================================== */

.badge,
.label-primary {
    background-color: var(--connexxo-primary) !important;
}

.label-success {
    background-color: var(--connexxo-primary) !important;
}
/**
 * Connexxo Brand Custom Styles
 * Learning Central by Connexxo
 * Colors from logo:
 * - Primary Blue: #2c5282 (Learning Central text)
 * - Accent Red/Orange: #c53030 (by/highlight)
 * - Dark Gray: #4a5568 (Connexxo text)
 */

/* ==========================================================================
   Color Variables and Root Overrides
   ========================================================================== */

:root {
    --connexxo-primary: #2c5282;
    --connexxo-primary-dark: #1a365d;
    --connexxo-primary-light: #3182ce;
    --connexxo-accent: #c53030;
    --connexxo-accent-light: #e53e3e;
    --connexxo-gray: #4a5568;
    --connexxo-gray-dark: #2d3748;
    --connexxo-text: #333333;
    --connexxo-bg-light: #f7fafc;
}

/* ==========================================================================
   Top Navigation Bar (Dark Bar)
   ========================================================================== */

#navigation,
.navbar-default,
nav.navbar {
    background-color: var(--connexxo-primary) !important;
    background: linear-gradient(180deg, var(--connexxo-primary) 0%, var(--connexxo-primary-dark) 100%) !important;
    border-color: var(--connexxo-primary-dark) !important;
}

#navigation a,
.navbar-default .navbar-nav > li > a,
nav.navbar a {
    color: #ffffff !important;
}

#navigation a:hover,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #ffffff !important;
    background-color: var(--connexxo-accent) !important;
}

/* ==========================================================================
   Main Navigation Bar (Below Header)
   ========================================================================== */

#main_navigation,
.menu-container,
.nav.navbar-nav {
    background-color: var(--connexxo-primary) !important;
}

#main_navigation a,
.menu-container a {
    color: #ffffff !important;
}

#main_navigation a:hover,
#main_navigation li.active a,
.menu-container a:hover {
    background-color: var(--connexxo-accent) !important;
    color: #ffffff !important;
}

/* Navbar styling */
.navbar-default {
    background: var(--connexxo-primary) !important;
    border-color: var(--connexxo-primary-dark) !important;
}

.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
    color: #ffffff !important;
    background-color: var(--connexxo-accent) !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background-color: var(--connexxo-primary-dark) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary {
    background-color: var(--connexxo-primary) !important;
    border-color: var(--connexxo-primary-dark) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--connexxo-primary-dark) !important;
    border-color: var(--connexxo-primary) !important;
}

.btn-success {
    background-color: var(--connexxo-primary) !important;
    border-color: var(--connexxo-primary-dark) !important;
    color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--connexxo-primary-dark) !important;
    border-color: var(--connexxo-primary) !important;
}

button[type="submit"],
input[type="submit"] {
    background-color: var(--connexxo-primary) !important;
    border-color: var(--connexxo-primary-dark) !important;
    color: #ffffff !important;
}

button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: var(--connexxo-primary-dark) !important;
}

/* Accent buttons (danger/warning converted to accent) */
.btn-danger {
    background-color: var(--connexxo-accent) !important;
    border-color: var(--connexxo-accent) !important;
}

.btn-danger:hover {
    background-color: var(--connexxo-accent-light) !important;
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
    color: var(--connexxo-primary);
}

a:hover,
a:focus {
    color: var(--connexxo-accent);
}

/* ==========================================================================
   Breadcrumbs and Progress
   ========================================================================== */

.breadcrumb > li + li:before {
    color: var(--connexxo-gray);
}

.progress-bar {
    background-color: var(--connexxo-primary) !important;
}

.progress-bar-success {
    background-color: var(--connexxo-primary) !important;
}

/* ==========================================================================
   Panels and Cards
   ========================================================================== */

.panel-primary > .panel-heading {
    background-color: var(--connexxo-primary) !important;
    border-color: var(--connexxo-primary-dark) !important;
}

.panel-primary {
    border-color: var(--connexxo-primary) !important;
}

.panel-success > .panel-heading {
    background-color: var(--connexxo-primary) !important;
    border-color: var(--connexxo-primary-dark) !important;
}

.panel-success {
    border-color: var(--connexxo-primary) !important;
}

/* ==========================================================================
   Learning Path Sidebar
   ========================================================================== */

#learning_path_left_zone,
.lp-view-zone {
    background-color: var(--connexxo-bg-light) !important;
}

#learning_path_left_zone .current,
.lp-view-zone .current,
.lp_resource_element.current {
    background-color: var(--connexxo-primary) !important;
    color: #ffffff !important;
}

.lp_resource_element.current a {
    color: #ffffff !important;
}

/* ==========================================================================
   Page Headers and Titles
   ========================================================================== */

h1, h2, h3 {
    color: var(--connexxo-gray-dark);
}

.page-header {
    border-bottom-color: var(--connexxo-primary);
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer,
#footer {
    background-color: var(--connexxo-gray-dark) !important;
    color: #ffffff !important;
}

footer a,
#footer a {
    color: #e2e8f0 !important;
}

footer a:hover,
#footer a:hover {
    color: #ffffff !important;
}

/* ==========================================================================
   Selection Highlight
   ========================================================================== */

::selection {
    background-color: var(--connexxo-primary);
    color: #ffffff;
}

::-moz-selection {
    background-color: var(--connexxo-primary);
    color: #ffffff;
}

/* ==========================================================================
   Dropdown Menus
   ========================================================================== */

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--connexxo-primary) !important;
    color: #ffffff !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
    background-color: var(--connexxo-primary) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table > thead > tr > th {
    background-color: var(--connexxo-primary) !important;
    color: #ffffff !important;
    border-color: var(--connexxo-primary-dark) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(44, 82, 130, 0.05);
}

/* ==========================================================================
   Alerts and Notifications
   ========================================================================== */

.alert-info {
    background-color: rgba(44, 82, 130, 0.1);
    border-color: var(--connexxo-primary);
    color: var(--connexxo-primary-dark);
}

.alert-success {
    background-color: rgba(44, 82, 130, 0.1);
    border-color: var(--connexxo-primary);
    color: var(--connexxo-primary-dark);
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    border-bottom-color: var(--connexxo-primary) !important;
    color: var(--connexxo-primary) !important;
}

.nav-tabs > li > a:hover {
    border-color: var(--connexxo-bg-light) var(--connexxo-bg-light) var(--connexxo-primary);
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--connexxo-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(44, 82, 130, 0.25) !important;
}

/* ==========================================================================
   Badge and Labels
   ========================================================================== */

.badge {
    background-color: var(--connexxo-primary) !important;
}

.label-primary {
    background-color: var(--connexxo-primary) !important;
}

.label-success {
    background-color: var(--connexxo-primary) !important;
}

.label-info {
    background-color: var(--connexxo-primary-light) !important;
}

/* ==========================================================================
   Course Cards
   ========================================================================== */

.course-box .course-block-title {
    color: var(--connexxo-primary);
}

.course-box:hover {
    border-color: var(--connexxo-primary);
}

/* ==========================================================================
   Sidebar/Menu Styling
   ========================================================================== */

.sidebar-nav li.active > a {
    background-color: var(--connexxo-primary) !important;
    color: #ffffff !important;
}

.sidebar-nav li > a:hover {
    background-color: var(--connexxo-bg-light) !important;
    color: var(--connexxo-primary) !important;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: var(--connexxo-primary) !important;
    border-color: var(--connexxo-primary) !important;
}

.pagination > li > a:hover {
    color: var(--connexxo-primary);
}

/* ==========================================================================
   Icons and Checkmarks
   ========================================================================== */

.fa-check-circle,
.glyphicon-ok {
    color: var(--connexxo-primary) !important;
}
/* High-quality SVG logo */
.logo img,
.navbar-brand img,
#header-logo img {
    max-height: 70px;
    width: auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* For retina/high-DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo img,
    .navbar-brand img {
        image-rendering: auto;
    }
}
/* Fix dropdown menu text colors */
.dropdown-menu > li > a {
    color: #333333 !important;
    background-color: #ffffff !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #ffffff !important;
    background-color: #2c5282 !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    color: #ffffff !important;
    background-color: #2c5282 !important;
}

/* Ensure dropdown menu has white background */
.dropdown-menu {
    background-color: #ffffff !important;
}

/* Fix any nested dropdown items */
.dropdown-menu .dropdown-menu > li > a {
    color: #333333 !important;
}

/* Fix select2/autocomplete dropdown colors */
.select2-results__option {
    color: #333333 !important;
    background-color: #ffffff !important;
}

.select2-results__option--highlighted,
.select2-results__option:hover {
    color: #ffffff !important;
    background-color: #2c5282 !important;
}

.select2-results__option[aria-selected="true"] {
    color: #ffffff !important;
    background-color: #2c5282 !important;
}

.select2-dropdown {
    background-color: #ffffff !important;
}

.select2-search__field {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* Fix any other autocomplete dropdowns */
.ui-autocomplete,
.ui-menu {
    background-color: #ffffff !important;
}

.ui-autocomplete .ui-menu-item,
.ui-menu .ui-menu-item {
    color: #333333 !important;
    background-color: #ffffff !important;
}

.ui-autocomplete .ui-menu-item:hover,
.ui-autocomplete .ui-state-active,
.ui-autocomplete .ui-state-focus,
.ui-menu .ui-menu-item:hover,
.ui-menu .ui-state-active,
.ui-menu .ui-state-focus {
    color: #ffffff !important;
    background-color: #2c5282 !important;
}

/* ============================================
   SELECT2 DROPDOWN FIX - Connexxo Branding
   ============================================ */

/* Dropdown container */
.select2-container--default .select2-dropdown,
.select2-container--classic .select2-dropdown,
.select2-dropdown {
    background-color: #ffffff !important;
    border-color: #2c5282 !important;
}

/* All dropdown options - white background, dark text */
.select2-container--default .select2-results__option,
.select2-container--classic .select2-results__option,
.select2-results__option {
    color: #333333 !important;
    background-color: #ffffff !important;
}

/* Highlighted/hovered option - blue background, white text */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option:hover,
.select2-container--classic .select2-results__option--highlighted,
.select2-container--classic .select2-results__option--highlighted[aria-selected],
.select2-container--classic .select2-results__option:hover,
.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected],
.select2-results__option:hover {
    color: #ffffff !important;
    background-color: #2c5282 !important;
}

/* Selected option (already chosen) */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--classic .select2-results__option[aria-selected="true"] {
    color: #333333 !important;
    background-color: #e8f0f8 !important;
}

/* Search field inside dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--classic .select2-search--dropdown .select2-search__field,
.select2-search__field {
    background-color: #ffffff !important;
    color: #333333 !important;
    border-color: #cccccc !important;
}

/* Results list container */
.select2-results,
.select2-results__options {
    background-color: #ffffff !important;
}

/* ============================================
   LOGIN FORM FIX - Connexxo Branding
   ============================================ */

/* Login block links - make them visible */
#login-block a,
#login_block a,
.login-block a,
#formLogin a,
.panel-body a,
.well a {
    color: #2c5282 !important;
}

#login-block a:hover,
#login_block a:hover,
.login-block a:hover,
#formLogin a:hover,
.panel-body a:hover,
.well a:hover {
    color: #1a365d !important;
    text-decoration: underline !important;
}

/* Links inside dark blue areas should be white */
.btn-primary a,
.bg-primary a,
[style*="background-color: #2c5282"] a,
[style*="background:#2c5282"] a {
    color: #ffffff !important;
}

/* Fix panel/well backgrounds that might be dark */
#login-block .panel-body,
#login_block .panel-body,
.login-block .panel-body,
#login-block .well,
#login_block .well {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* Ensure text in login area is readable */
#login-block,
#login_block,
.login-block {
    color: #333333 !important;
}

/* Fix any buttons that contain links */
#login-block .btn-default,
#login_block .btn-default {
    background-color: #f5f5f5 !important;
    color: #333333 !important;
    border-color: #cccccc !important;
}

#login-block .btn-default:hover,
#login_block .btn-default:hover {
    background-color: #e8e8e8 !important;
    color: #333333 !important;
}

/* Login additional options (forgot password, sign up, etc.) */
#login-block ul li a,
#login_block ul li a,
.login-block ul li a {
    color: #2c5282 !important;
}

#login-block ul li a:hover,
#login_block ul li a:hover,
.login-block ul li a:hover {
    color: #1a365d !important;
}

/* ==========================================================================
   Login Panel Fixes - Text Visibility
   ========================================================================== */

/* Fix nav-pills in login block - make links visible */
#login-block .nav-pills,
.panel .nav-pills.nav-stacked,
.well .nav-pills.nav-stacked {
    background-color: transparent !important;
}

#login-block .nav-pills > li > a,
.panel .nav-pills.nav-stacked > li > a,
.well .nav-pills.nav-stacked > li > a {
    color: var(--connexxo-primary) !important;
    background-color: transparent !important;
}

#login-block .nav-pills > li > a:hover,
.panel .nav-pills.nav-stacked > li > a:hover,
.well .nav-pills.nav-stacked > li > a:hover {
    color: var(--connexxo-accent) !important;
    background-color: var(--connexxo-bg-light) !important;
}

/* Fix any stacked nav in login context */
.nav.nav-pills.nav-stacked {
    background-color: transparent !important;
}

.nav.nav-pills.nav-stacked > li > a {
    color: var(--connexxo-primary) !important;
}

.nav.nav-pills.nav-stacked > li > a:hover {
    color: var(--connexxo-accent) !important;
    background-color: var(--connexxo-bg-light) !important;
}

/* ==========================================================================
   Login Panel Fixes - More Specific Selectors
   ========================================================================== */

/* Fix nav-pills in panel-body context */
.panel-body .nav.nav-pills.nav-stacked {
    background-color: transparent !important;
}

.panel-body .nav.nav-pills.nav-stacked > li > a {
    color: #2c5282 !important;
    background-color: transparent !important;
}

.panel-body .nav.nav-pills.nav-stacked > li > a:hover {
    color: #c53030 !important;
    background-color: #f7fafc !important;
}

/* ==========================================================================
   Header Logo Override - Use SVG for high quality
   ========================================================================== */

/* Hide the PNG image and replace with SVG background */
.logo a {
    display: block;
    position: relative;
    min-width: 300px;
    min-height: 90px;
    background-image: url('images/header-logo.svg') !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;
}

/* Hide the low-res PNG image */
.logo img,
.logo #header-logo,
img#header-logo {
    visibility: hidden !important;
    opacity: 0 !important;
}