[data-page="products_view"][data-itemid="page_image_ash8f23hr"] {
  width: 400px;
}


/* Put  your custom CSS code here */

/* Put  your custom CSS code here */

/* ===========================================
   THEME + NAV (Bootstrap 3)
   =========================================== */

/* Sticky navbar offset (kept) */

/* Fill the mobile safe-area above the fixed navbar with the navbar theme */
@supports (padding-top: env(safe-area-inset-top)) {
  /* Push navbar content below the status bar area */
  .r-topheader {
    padding-top: env(safe-area-inset-top);
  }
  /* Paint the status bar area using the same navbar background */
  .r-topheader::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: env(safe-area-inset-top);
    background: var(--bg-navbar);               /* uses your theme vars */
    z-index: 1031;                               /* just above the navbar (1030) */
    pointer-events: none;
  }
}

/* Optional: when gradients look too “busy” up there, use the solid tone */
@media (max-width: 767px) {
  .r-topheader::before { background: var(--bg-navbar-solid); }
}

@media (max-width: 767px) {
  body { padding-top: 60px !important; }
}

.r-topheader {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 1030 !important;
}

/* Light variables (kept) */
:root {
  --bg-primary:#fff; --bg-secondary:#f8f9fa;
  --bg-navbar:linear-gradient(135deg, blue 0%, red 100%);
  --bg-navbar-solid:#2E86C1; --bg-dropdown:#fff;
  --text-primary:#333; --text-secondary:#666; --text-muted:#999; --text-navbar:#fff;
  --border-color:#e3e6ea; --border-navbar:rgba(255,255,255,.2);
  --link-color:#2E86C1; --link-hover:#1B4F72; --navbar-brand-color:#fff;
  --btn-default-bg:#fff; --btn-default-border:#ccc; --btn-primary-bg:#2E86C1; --btn-secondary-bg:#E74C3C;
  --shadow-light:rgba(0,0,0,.1); --shadow-navbar:rgba(46,134,193,.3);
  --bg-input: white; --text-input: black;
}

/* Dark variables (kept) */
body.dark-theme {
  --bg-primary:#1a1a1a; --bg-secondary:#2d2d2d;
  --bg-navbar:linear-gradient(135deg,#1B4F72 0%,#C0392B 100%);
  --bg-navbar-solid:#1B4F72; --bg-dropdown:#3a3a3a;
  --text-primary:#fff; --text-secondary:#ccc; --text-muted:#999; --text-navbar:#fff;
  --border-color:#444; --border-navbar:rgba(255,255,255,.15);
  --link-color:#5DADE2; --link-hover:#85C1E9; --navbar-brand-color:#fff;
  --btn-default-bg:#3a3a3a; --btn-default-border:#555; --btn-primary-bg:#1B4F72; --btn-secondary-bg:#C0392B;
  --shadow-light:rgba(255,255,255,.1); --shadow-navbar:rgba(27,79,114,.4);
  --bg-input: transparent; --text-input: lightgray;
}

/* Surfaces & navbar */
.r-body,.r-content,.r-data-block { background:var(--bg-primary) !important; color:var(--text-primary) !important; }

.navbar-default{
  background:var(--bg-navbar) !important; border:0 !important; border-radius:0 !important;
  margin-bottom:0 !important; min-height:60px !important; width:100% !important;
  box-shadow:0 2px 10px var(--shadow-navbar);
}
.navbar-default .container-fluid,.navbar-default .container{
  width:100% !important; max-width:none !important; padding:0 15px !important;
}

.navbar-default .navbar-brand{
  color:var(--navbar-brand-color) !important; font-weight:700 !important; font-size:20px !important;
  text-shadow:1px 1px 2px rgba(0,0,0,.3) !important;
  -webkit-transition:transform .3s ease; transition:transform .3s ease;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus{ color:#fff !important; -webkit-transform:scale(1.05); transform:scale(1.05); }

/* Toggle: keep bars for a11y, add MENU label */
.navbar-default .navbar-toggle{
  border:2px solid var(--border-navbar) !important; background:rgba(255,255,255,.1) !important; border-radius:6px !important;
}
.navbar-default .navbar-toggle .icon-bar{ background:var(--text-navbar) !important; }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus{ background:rgba(255,255,255,.2) !important; border-color:#fff !important; }
.navbar-toggle{ padding:6px 10px !important; position:relative; }
.navbar-toggle:after{
  content:'MENU'; position:relative; margin-left:8px; color:var(--text-navbar); font-weight:700; font-size:14px;
}

/* Menu links */
.r-menu.nav.navbar-nav>li>a{ color:var(--text-navbar) !important; font-weight:500 !important; }
.r-menu.nav.navbar-nav>li>a:hover,
.r-menu.nav.navbar-nav>li>a:focus{ color:#fff !important; background:rgba(255,255,255,.15) !important; }
.r-menu.nav.navbar-nav>li.active>a{ color:#fff !important; background:rgba(255,255,255,.2) !important; }

/* Dropdowns */
.dropdown-menu{
  background:var(--bg-dropdown) !important; border:1px solid var(--border-color) !important; box-shadow:0 8px 24px rgba(0,0,0,.15) !important;
}
.dropdown-menu>li>a{ color:var(--text-primary) !important; }
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus{ color:var(--link-hover) !important; background:var(--bg-secondary) !important; }

/* Theme switcher button */
.theme-switcher-btn{ margin-top:1px; }
#dynamic_theme_switcher{
  position:relative !important; min-width:45px !important; height:38px !important; padding:8px 12px !important;
  border-radius:20px !important; background:var(--btn-default-bg) !important; border:2px solid var(--border-navbar) !important;
  box-shadow:0 2px 8px var(--shadow-light) !important; cursor:pointer !important; margin:5px 8px !important;
  display:inline-flex !important; align-items:center; justify-content:center;
}
#dynamic_theme_switcher:hover{ -webkit-transform:translateY(-2px) scale(1.05); transform:translateY(-2px) scale(1.05); }
#dynamic_theme_switcher .theme-icon{ font-size:18px !important; }
#dynamic_theme_switcher .theme-icon:before{ content:"☀️" !important; }
body:not(.dark-theme) #dynamic_theme_switcher{
  background:linear-gradient(45deg,#fff,#f0f0f0) !important; border:2px solid rgba(255,255,255,.3) !important; box-shadow:0 2px 8px rgba(255,255,255,.2) !important;
}
body.dark-theme #dynamic_theme_switcher .theme-icon:before{
  content:"🌙" !important; -webkit-transform:rotate(180deg) scale(1.1); transform:rotate(180deg) scale(1.1);
}

/* Pulse */
.theme-changing{ -webkit-animation:themePulse .6s ease-out; animation:themePulse .6s ease-out; }
@-webkit-keyframes themePulse{ 0%{-webkit-transform:scale(1);} 50%{-webkit-transform:scale(1.15);} 100%{-webkit-transform:scale(1);} }
@keyframes themePulse{ 0%{transform:scale(1);} 50%{transform:scale(1.15);} 100%{transform:scale(1);} }

/* Scoped, perf-safe transitions only during theme flip */
body.theme-transition *{
  -webkit-transition: background-color .3s ease, color .3s ease, border-color .3s ease;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* Desktop navbar flex */
@media (min-width:768px){
  .navbar-default{ display:flex; align-items:center; }
  .navbar-collapse[data-itemid="menu"]{ flex-grow:1; width:auto !important; }
  .navbar-default>.r-align-right,
  .navbar-default>.theme-switcher-container,
  .navbar-default>[data-itemid="notifications"],
  .navbar-default>[data-itemid="username_button"]{ flex-shrink:0; float:none !important; }
}

/* Collapsed menu styling */
@media (max-width:767px){
  .navbar-nav { margin: 7.5px 0px !important; }
  .navbar-header{ position:relative !important; width:100% !important; height:60px; }
  .navbar-header .navbar-brand{
    position:absolute !important; left:0; top:50% !important; -webkit-transform:translateY(-50%); transform:translateY(-50%);
    padding-left:15px !important;
  }
  .navbar-header .navbar-brand:hover{ -webkit-transform:translateY(-50%) scale(1.05); transform:translateY(-50%) scale(1.05); }

  .navbar-collapse{
    background:var(--bg-navbar) !important; border-top:1px solid var(--border-navbar) !important; margin-top:1px !important; padding:0 !important;
  }
  #mobile_nav_tools{
    display:flex; justify-content:space-between; align-items:center; padding:8px 15px; margin-top:10px; border-top:1px solid var(--border-navbar);
  }
  .mobile-nav-left{ display:flex; align-items:center; gap:10px; }
  #mobile_nav_tools>span,.mobile-nav-left>span{
    padding:0 !important; margin:0 !important; border:0 !important; float:none !important; display:flex !important; align-items:center !important;
  }
  #mobile_nav_tools #dynamic_theme_switcher{ margin:0 !important; width:42px !important; height:38px !important; -webkit-transform:none !important; transform:none !important; }

  tbody { background-color: var(--bg-primary) !important; }
  .r-flexgrid.r-flexgrid.r-flexgrid.r-flexgrid > tbody > tr:not(.rnr-hiddenelem ):not([data-hidden]):not([data-media-hidden]).r-gridrow {
        border: 1px solid var(--bg-primary) !important;
        border-radius: 10px;
        padding: 5px 10px;
        background-color: var(--bg-secondary) !important;
        background-image: none !important;
  }
  
  body:not(.dark-theme) .navbar-collapse .r-menu a{
    color:#e8e8e8 !important; text-shadow:1px 1px 1px rgba(0,0,0,.5) !important;
  }
  body:not(.dark-theme) .navbar-collapse .r-menu a:hover,
  body:not(.dark-theme) .navbar-collapse .r-menu li.active>a{
    color:#fff !important; background:rgba(255,255,255,.1) !important;
  }
  body:not(.dark-theme) .navbar-collapse .dropdown-menu{ background:rgba(0,0,0,.2) !important; }
  body:not(.dark-theme) .navbar-collapse .dropdown-menu a{ color: var(--text-primary) !important; }
}

/* Dark overrides for your custom snippets (kept) */
body.dark-theme .stats-grid .panel{ background:var(--bg-secondary) !important; border-color:var(--border-color) !important; }
body.dark-theme .stats-grid .panel-value{ color:var(--text-primary) !important; }
body.dark-theme .stats-grid .small-label{ color:var(--text-secondary) !important; }
body.dark-theme .country-stats-card,
body.dark-theme .country-stats-header{ background:var(--bg-secondary) !important; border-color:var(--border-color) !important; color:var(--text-primary) !important; }
body.dark-theme .country-name,
body.dark-theme .visa-count{ color:var(--text-secondary) !important; background:var(--border-color) !important; }
body.dark-theme .country-item:first-child .visa-count{ background:linear-gradient(135deg,#2ecc71,#27ae60) !important; color:#fff !important; }
body.dark-theme .country-stats-header:hover{ background:var(--bg-primary) !important; }
body.dark-theme .dept-dropdown-wrapper .mydropdown-menu{ background:var(--bg-dropdown) !important; }
body.dark-theme .dept-dropdown-wrapper .mydropdown-menu li a{ color:var(--text-primary) !important; background:var(--bg-secondary) !important; }
body.dark-theme .dept-dropdown-wrapper .mydropdown-menu li a:hover{ background:var(--border-color) !important; color:var(--link-hover) !important; }
body.dark-theme .offcanvas,
body.dark-theme .off-canvas{ background:var(--bg-secondary) !important; }
body.dark-theme .offcanvas h2,
body.dark-theme .off-canvas h2{ color:var(--link-color) !important; }
body.dark-theme .offcanvas .close-btn,
body.dark-theme .off-canvas .close-btn{ color:var(--text-secondary) !important; }
body.dark-theme .offcanvas .minimal-table,
body.dark-theme .off-canvas .report-table{ color:var(--text-primary) !important; }
body.dark-theme .offcanvas .minimal-table th,
body.dark-theme .off-canvas .report-table th,
body.dark-theme .offcanvas .minimal-table td,
body.dark-theme .off-canvas .report-table td{ border-color:var(--border-color) !important; }
body.dark-theme .offcanvas .minimal-table tfoot tr,
body.dark-theme .off-canvas .report-table tfoot tr{ background:var(--bg-primary) !important; }
body.dark-theme .modal .modal-content{ background:var(--bg-secondary) !important; }
body.dark-theme .modal .modal-header h2{ color:var(--text-primary) !important; }
body.dark-theme .modal .close-btn1{ color:var(--text-secondary) !important; }

body { background-color: var(--bg-primary) !important; }

.greeting, .weather-section, .date-section, [data-itemtype="text"] , [data-itemid="add_header"],
[data-itemid="edit_header"], [data-itemid="view_header"], .panel-title { color: var(--text-secondary) !important; }
.breadcrumb { background-color: var(--bg-secondary) !important; color: var(--text-secondary) !important; }

.r-topbar-page, .r-gridrow, .form-section, td,
[data-itemid^="text"] p, [data-itemid^="text"] p span, [data-itemid^="text"] span { background-color: var(--bg-primary) !important; color: var(--text-primary) !important; }

input, select, textarea { background-color: var(--bg-input) !important; color: var(--text-input) !important; }
.panel-heading { background-color: var(--bg-secondary) !important; }
.panel-title::after { content: " ⇓"; font-weight: bold; }
.modal { top: 50px !important; }
.modal-header, .modal-footer { border-color: var(--bg-secondary) !important; }

.r-controls, .r-sideimage { background-color: var(--bg-primary) !important; } /* login page */

/* Custom Selectors here */
.off-canvas, #offcanvasMenu { z-index: 1050 !important;}


.r-noti-header, .r-noti-h-text, .r-noti-close { background-color: var(--bg-primary) !important; color: var(--text-primary) !important; }
.r-noti-messages, .r-noti-message { background-color: var(--bg-secondary) !important; color: var(--text-secondary) !important; }


 

/* Fallback button (no inline styles in JS) */
.theme-fallback{ position:fixed; top:10px; right:80px; z-index:9999; }