/*-----------------------------------------------------------------------------------

   Template Name: Payyed
   Description: Money Transfer and Online Payments HTML Template
   Template URI: http://demo.harnishdesign.net/html/payyed
   Author: Harnish Design
   Author URI: https://themeforest.net/user/harnishdesign
   Version: 1.0
	
=================================================
  Table of Contents
=================================================

	- Basic
	- Helpers Classes
	- Layouts
	- Header
		- Logo
		- Primary Menu
		- Secondary Nav
		- Page Header
	- Profile
		- Dashboard
		- Cards & Bank Account Page
	- Elements
		- Featured Box
		- Team
		- Accordion & Toggle
		- Tabs
		- Easy Responsive Tab Accordion
		- Custom Background
		- Owl Carousel
		- Brands Grid
		- Banner
		- Simple ul
	- Footer
		- Social Icons
		- Back to Top
	- Extra

-------------------------------------------------------------------*/
/* =================================== */
/*  Basic Style 
/* =================================== */
body, html {
  height: 100%;
}

body {
  background: #f5f5f5;
  color: #4c4d4d;
  font-family: "Rubik", sans-serif;
  font-size: 14px;
  line-height: 22px;
  /* a weight without a loaded face falls back to the nearest real face
     instead of browser-synthesized (blurry) faux bold */
  font-synthesis-weight: none;
}

form {
  padding: 0;
  margin: 0;
  display: inline;
}

img {
  vertical-align: inherit;
}

a, a:focus {
  color: #2dbe60;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

a:hover, a:active {
  color: #22b355;
  text-decoration: none;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

a:focus:not(:focus-visible), a:active,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus:not(:focus-visible),
button:focus:not(:focus-visible),
button:active {
  outline: none;
}

/* visible keyboard focus for links with no box-shadow fallback */
.primary-menu ul.navbar-nav > li > a:not(.btn):focus-visible,
#footer a:focus-visible,
#back-to-top:focus-visible {
  outline: 2px solid #2dbe60;
  outline-offset: 2px;
}

p {
  line-height: 1.9;
}

blockquote {
  border-left: 5px solid #eee;
  padding: 10px 20px;
}

iframe {
  border: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #1e1d1c;
  font-family: "Rubik", sans-serif;
}

.lead {
  font-size: 1.3em;
  line-height: 1.8;
}

/*-------- Preloader --------*/
#preloader {
  position: fixed;
  z-index: 999999999 !important;
  background-color: #fff;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
#preloader [data-loader="dual-ring"] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;
  height: 50px;
  margin-left: -25px;
  margin-top: -25px;
  display: inline-block;
  content: " ";
  display: block;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid #2dbe60;
  border-color: #2dbe60 transparent #2dbe60 transparent;
  animation: dual-ring 1.2s linear infinite;
}

@keyframes dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* =================================== */
/*  Helpers Classes
/* =================================== */
/* Box Shadow */
.shadow-md {
  -webkit-box-shadow: 0px 0px 50px -35px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 50px -35px rgba(0, 0, 0, 0.4);
}

/* Border Radius */
.rounded-top-0 {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

.rounded-bottom-0 {
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.rounded-left-0 {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

.rounded-right-0 {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

/* Text Size */
.text-0 {
  font-size: 11px !important;
  font-size: 0.6875rem !important;
}

.text-1 {
  font-size: 12px !important;
  font-size: 0.75rem !important;
}

.text-2 {
  font-size: 14px !important;
  font-size: 0.875rem !important;
}

.text-3 {
  font-size: 16px !important;
  font-size: 1rem !important;
}

.text-4 {
  font-size: 18px !important;
  font-size: 1.125rem !important;
}

.text-5 {
  font-size: 21px !important;
  font-size: 1.3125rem !important;
}

.text-6 {
  font-size: 24px !important;
  font-size: 1.50rem !important;
}

.text-7 {
  font-size: 28px !important;
  font-size: 1.75rem !important;
}

.text-8 {
  font-size: 32px !important;
  font-size: 2rem !important;
}

.text-9 {
  font-size: 36px !important;
  font-size: 2.25rem !important;
}

.text-10 {
  font-size: 40px !important;
  font-size: 2.50rem !important;
}

.text-11 {
  font-size: 44px !important;
  font-size: 2.75rem !important;
}

.text-12 {
  font-size: 48px !important;
  font-size: 3rem !important;
}

.text-13 {
  font-size: 52px !important;
  font-size: 3.25rem !important;
}

.text-14 {
  font-size: 56px !important;
  font-size: 3.50rem !important;
}

.text-15 {
  font-size: 60px !important;
  font-size: 3.75rem !important;
}

.text-16 {
  font-size: 64px !important;
  font-size: 4rem !important;
}

.text-17 {
  font-size: 72px !important;
  font-size: 4.5rem !important;
}

.text-18 {
  font-size: 80px !important;
  font-size: 5rem !important;
}

.text-19 {
  font-size: 84px !important;
  font-size: 5.25rem !important;
}

.text-20 {
  font-size: 92px !important;
  font-size: 5.75rem !important;
}

/* Line height */
.line-height-07 {
  line-height: 0.7 !important;
}

.line-height-1 {
  line-height: 1 !important;
}

.line-height-2 {
  line-height: 1.2 !important;
}

.line-height-3 {
  line-height: 1.4 !important;
}

.line-height-4 {
  line-height: 1.6 !important;
}

.line-height-5 {
  line-height: 1.8 !important;
}

/* Font Weight */
.fw-400 {
  font-weight: 400 !important;
}

.fw-500 {
  font-weight: 500 !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

/* Opacity */
.opacity-0 {
  opacity: 0;
}

.opacity-1 {
  opacity: 0.1;
}

.opacity-2 {
  opacity: 0.2;
}

.opacity-3 {
  opacity: 0.3;
}

.opacity-4 {
  opacity: 0.4;
}

.opacity-5 {
  opacity: 0.5;
}

.opacity-6 {
  opacity: 0.6;
}

.opacity-7 {
  opacity: 0.7;
}

.opacity-8 {
  opacity: 0.8;
}

.opacity-9 {
  opacity: 0.9;
}

.opacity-10 {
  opacity: 1;
}

/* Background light */
.bg-light {
  background-color: #FFF !important;
}

.bg-light-1 {
  background-color: #f9f9fb !important;
}

.bg-light-2 {
  background-color: #f8f8fa !important;
}

.bg-light-3 {
  background-color: #f5f5f5 !important;
}

.bg-light-4 {
  background-color: #eff0f2 !important;
}

.bg-light-5 {
  background-color: #ececec !important;
}

/* Background Dark */
.bg-dark {
  background-color: #111418 !important;
}

.bg-dark-index {
    background-color: #1A237E !important;
}

.bg-dark-1 {
  background-color: #191f24 !important;
}

.bg-dark-2 {
  background-color: #232a31 !important;
}

.bg-dark-3 {
  background-color: #2b343c !important;
}

.bg-dark-4 {
  background-color: #38434f !important;
}

.bg-dark-5 {
  background-color: #435161 !important;
}

hr {
  border-top: 1px solid rgba(16, 85, 96, 0.1);
}

/* =================================== */
/*  Layouts
/* =================================== */
#main-wrapper {
  background: #f1f5f6;
}
#main-wrapper.boxed {
  max-width: 1200px;
  margin: 0 auto;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.section {
  position: relative;
  padding: 104px 0;
  padding: 6.5rem 0;
}

@media only screen and (max-width: 768px) {
  .section {
    padding: 3.5rem 0;
  }
}
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1170px !important;
  }
}
/* =================================== */
/*  Header
/* =================================== */
#header {
  background: #fff;
  border-bottom: 1px solid #efefef;
}
#header .navbar {
  padding: 0px;
}
#header.bg-transparent {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: none;
  border-bottom: 1px solid rgba(250, 250, 250, 0.3);
}
#header .logo {
  position: relative;
  float: left;
  margin-right: 15px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  
}
#header .header-row {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  max-height: 100%;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-item-align: stretch;
  align-self: stretch;
}
#header .header-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-item-align: stretch;
  align-self: stretch;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
#header .header-column .header-row {
  -webkit-box-pack: inherit;
  -ms-flex-pack: inherit;
  justify-content: inherit;
}

.navbar-light .navbar-nav .active > .nav-link {
  color: #0c2f55;
}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show {
  color: #0c2f55;
}
.navbar-light .navbar-nav .show > .nav-link {
  color: #0c2f55;
}

.primary-menu, .login-signup {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  height: auto !important;
  -webkit-box-ordinal-group: 0;
  -ms-flex-item-align: stretch;
  align-self: stretch;
}
.primary-menu.navbar, .login-signup.navbar {
  position: inherit;
}
.primary-menu ul.navbar-nav > li, .login-signup ul.navbar-nav > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}
.primary-menu ul.navbar-nav > li a, .login-signup ul.navbar-nav > li a {
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.primary-menu ul.navbar-nav > li > a:not(.btn), .login-signup ul.navbar-nav > li > a:not(.btn) {
  height: 80px;
  padding-left: 0.85em;
  padding-right: 0.85em;
  color: #4c4d4d;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  position: relative;
  text-transform: uppercase;
  font-weight: 500;
}
.primary-menu ul.navbar-nav > li:hover > a:not(.btn), .primary-menu ul.navbar-nav > li.active > a:not(.btn), .login-signup ul.navbar-nav > li:hover > a:not(.btn), .login-signup ul.navbar-nav > li.active > a:not(.btn) {
  color: #2dbe60;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn), .login-signup ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn) {
  padding: 8px 0px;
  background-color: transparent;
  color: #777;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn), .login-signup ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
  color: #2dbe60;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.primary-menu ul.navbar-nav > li.dropdown:hover > a:after, .login-signup ul.navbar-nav > li.dropdown:hover > a:after {
  clear: both;
  content: ' ';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  border-width: 0px 7px 6px 7px;
  bottom: 0px;
  left: 50%;
  margin: 0 0 0 -5px;
  z-index: 1022;
}
.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu, .login-signup ul.navbar-nav > li.dropdown .dropdown-menu {
  -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.176);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.176);
  border: 0px none;
  padding: 10px 15px;
  min-width: 230px;
  margin: 0;
  font-size: 14px;
  font-size: 0.875rem;
  z-index: 1021;
}
.primary-menu .dropdown-menu-right, .login-signup .dropdown-menu-right,
.primary-menu .dropdown-menu-end, .login-signup .dropdown-menu-end {
  left: auto !important;
  right: 100% !important;
}
.primary-menu ul.navbar-nav > li.dropdown-mega, .login-signup ul.navbar-nav > li.dropdown-mega {
  position: static;
}
.primary-menu ul.navbar-nav > li.dropdown-mega > .dropdown-menu, .login-signup ul.navbar-nav > li.dropdown-mega > .dropdown-menu {
  width: 100%;
  padding: 20px 20px;
  margin-left: 0px !important;
}
.primary-menu ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div, .login-signup ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div {
  padding: 5px 5px 5px 20px;
  border-right: 1px solid #eee;
}
.primary-menu ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div:last-child, .login-signup ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div:last-child {
  border-right: 0;
}
.primary-menu ul.navbar-nav > li.dropdown-mega .sub-title, .login-signup ul.navbar-nav > li.dropdown-mega .sub-title {
  display: block;
  font-size: 16px;
  margin-top: 1rem;
  padding-bottom: 5px;
}
.primary-menu ul.navbar-nav > li.dropdown-mega .dropdown-mega-submenu, .login-signup ul.navbar-nav > li.dropdown-mega .dropdown-mega-submenu {
  list-style-type: none;
  padding-left: 0px;
}
.primary-menu ul.navbar-nav > li a.btn, .login-signup ul.navbar-nav > li a.btn {
  font-size: 14px;
  padding: 0.65rem 2rem;
  text-transform: uppercase;
}
.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu, .login-signup ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu {
  left: 100%;
  margin-top: -40px;
}
.primary-menu ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-toggle:after, .login-signup ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-toggle:after {
  border-top: .4em solid transparent;
  border-right: 0;
  border-bottom: 0.4em solid transparent;
  border-left: 0.4em solid;
}
.primary-menu ul.navbar-nav > li.dropdown .dropdown-toggle .arrow, .login-signup ul.navbar-nav > li.dropdown .dropdown-toggle .arrow {
  position: absolute;
  min-width: 30px;
  height: 100%;
  right: 0px;
  top: 0;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.primary-menu ul.navbar-nav > li.dropdown .dropdown-toggle .arrow:after, .login-signup ul.navbar-nav > li.dropdown .dropdown-toggle .arrow:after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  border-color: #000;
  border-top: 1px solid;
  border-right: 1px solid;
  width: 6px;
  height: 6px;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}
.primary-menu .dropdown-toggle:after, .login-signup .dropdown-toggle:after {
  content: none;
}

.dropdown-menu {
  -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.176);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.176);
  border: 0px none;
  font-size: 14px;
  font-size: 0.875rem;
}

.header-text-light .navbar-toggler span {
  background: #fff;
}

.header-text-light .login-signup ul.navbar-nav > li > a:not(.btn) {
  color: rgba(250, 250, 250, 0.85);
}
.header-text-light .login-signup ul.navbar-nav > li:hover > a:not(.btn), .header-text-light .login-signup ul.navbar-nav > li.active > a:not(.btn) {
  color: #fff;
}

@media (min-width: 992px) {
  .header-text-light .primary-menu ul.navbar-nav > li > a:not(.btn) {
    color: rgba(250, 250, 250, 0.95);
  }
  .header-text-light .primary-menu ul.navbar-nav > li:hover > a:not(.btn), .header-text-light .primary-menu ul.navbar-nav > li.active > a:not(.btn) {
    color: #39c9ff;;
  }
}
.primary-menu.navbar-dropdown-dark ul.navbar-nav > li.dropdown .dropdown-menu {
  background-color: #252A2C;
  color: #fff;
}
.primary-menu.navbar-dropdown-dark ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu {
  background-color: #272c2e;
}
.primary-menu.navbar-dropdown-dark ul.navbar-nav > li.dropdown:hover > a:after {
  border-color: transparent transparent #252A2C transparent;
}
.primary-menu.navbar-dropdown-dark ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn) {
  color: #a3a2a2;
}
.primary-menu.navbar-dropdown-dark ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
  color: #fff;
}
.primary-menu.navbar-dropdown-dark ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div {
  border-color: #3a3a3a;
}
.primary-menu.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu {
  background-color: #2dbe60;
  color: #fff;
}
.primary-menu.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu {
  background-color: #2dbe60;
}
.primary-menu.navbar-dropdown-primary ul.navbar-nav > li.dropdown:hover > a:after {
  border-color: transparent transparent #2dbe60 transparent;
}
.primary-menu.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn) {
  color: rgba(250, 250, 250, 0.95);
}
.primary-menu.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
  color: #fff;
}
.primary-menu.navbar-dropdown-primary ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div {
  border-color: rgba(250, 250, 250, 0.2);
}

@media (max-width: 991px) {
  #header .navbar-dropdown-dark.primary-menu:before, .primary-menu.navbar-dropdown-dark ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu {
    background-color: #252A2C;
  }

  #header .navbar-dropdown-primary.primary-menu:before {
    background-color: #2dbe60;
  }

  .primary-menu.navbar-dropdown-primary ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu {
    background-color: #2dbe60;
  }
  .primary-menu.navbar-dropdown-dark ul.navbar-nav li {
    border-color: #444;
  }
  .primary-menu.navbar-dropdown-dark ul.navbar-nav > li > a {
    color: #a3a2a2;
  }
  .primary-menu.navbar-dropdown-dark ul.navbar-nav > li:hover > a {
    color: #fff;
  }
  .primary-menu.navbar-dropdown-primary ul.navbar-nav li {
    border-color: rgba(250, 250, 250, 0.2);
  }
  .primary-menu.navbar-dropdown-primary ul.navbar-nav > li > a {
    color: rgba(250, 250, 250, 0.8);
  }
  .primary-menu.navbar-dropdown-primary ul.navbar-nav > li:hover > a {
    color: #fff;
  }
}
@media (min-width: 992px) {
  .navbar-toggler {
    display: none;
  }

  .primary-menu ul.navbar-nav > li + li {
    margin-left: 2px;
  }
  .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a:not(.btn) {
    margin-left: 5px;
  }
  .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li:hover > a .arrow {
    right: -3px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  .primary-menu ul.navbar-nav > li.dropdown > .dropdown-toggle .arrow {
    display: none;
  }
  .primary-menu ul.navbar-nav > li.dropdown-mega .sub-title:first-child {
    margin-top: 0px;
  }
}
@media (max-width: 991px) {
  /* Mobile Menu Button */
  .navbar-toggler {
    width: 25px;
    height: 30px;
    padding: 10px;
    margin: 18px 10px;
    position: relative;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
    display: block;
  }
  /* 44x44 tap target around the 25x30 visual burger — the pseudo extends
     the clickable area without moving the bars or the layout box */
  .navbar-toggler::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .navbar-toggler span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #3c3636;
    border-radius: 2px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
  }
  .navbar-toggler span:nth-child(1) {
    top: 6px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  .navbar-toggler span:nth-child(2) {
    top: 12px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  .navbar-toggler span:nth-child(3) {
    top: 18px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }
  .navbar-toggler.open span:nth-child(1) {
    top: 5px;
    left: 4px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .navbar-toggler.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }
  .navbar-toggler.open span:nth-child(3) {
    top: 21px;
    left: 4px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  #header .primary-menu {
    position: absolute;
    top: 99%;
    right: 0;
    left: 0;
    background: transparent;
    margin-top: 0px;
    z-index: 1000;
  }
  #header .primary-menu:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    background: #fff;
    z-index: -1;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  }
  #header .primary-menu > div {
    overflow: hidden;
    overflow-y: auto;
    max-height: 65vh;
    margin: 18px 0;
  }

  .primary-menu ul.navbar-nav li {
    display: block;
    border-bottom: 1px solid #eee;
    margin: 0;
    padding: 0;
  }
  .primary-menu ul.navbar-nav li:last-child {
    border: none;
  }
  .primary-menu ul.navbar-nav li.dropdown > .dropdown-toggle > .arrow.open:after {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  .primary-menu ul.navbar-nav > li > a:not(.btn) {
    height: auto;
    padding: 8px 0;
    position: relative;
  }
  .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu li > a:not(.btn) {
    padding: 8px 0;
    position: relative;
  }
  .primary-menu ul.navbar-nav > li.dropdown:hover > a:after {
    content: none;
  }
  .primary-menu ul.navbar-nav > li.dropdown .dropdown-toggle .arrow:after {
    -webkit-transform: translate(-50%, -50%) rotate(134deg);
    transform: translate(-50%, -50%) rotate(134deg);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu {
    margin: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    padding: 0px 0px 0px 15px;
  }
  .primary-menu ul.navbar-nav > li.dropdown .dropdown-menu .dropdown-menu {
    margin: 0;
  }
  .primary-menu ul.navbar-nav > li.dropdown-mega .dropdown-mega-content > .row > div {
    padding: 0px 15px;
  }
}
@media (max-width: 767px) {
  .login-signup ul.navbar-nav > li a.btn {
    padding: 0.65rem 0.8rem;
  }
}
/* Secondary Nav */
.secondary-nav.nav {
  padding-left: 8px;
}
.secondary-nav.nav .nav-link {
  text-align: center;
  font-size: 16px;
  padding: 1rem 20px;
  white-space: nowrap;
  color: rgba(250, 250, 250, 0.9);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.secondary-nav.nav .nav-link:hover {
  color: #fafafa;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.secondary-nav.nav .nav-link span {
  display: block;
  font-size: 30px;
  margin-bottom: 5px;
}
.secondary-nav.nav .nav-item .nav-link.active {
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
}
.secondary-nav.nav.alternate .nav-link {
  color: rgba(0, 0, 0, 0.6);
}
.secondary-nav.nav.alternate .nav-link:hover {
  color: black;
}
.secondary-nav.nav.alternate .nav-item .nav-link.active {
  background-color: transparent;
  color: #1e1d1c;
  border-bottom: 3px solid #2dbe60;
}

@media (max-width: 1199px) {
  .secondary-nav.nav {
    flex-wrap: nowrap;
    overflow: hidden;
    overflow-x: auto;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
  }
}
/* Page Header */
.page-header {
  margin: 0 0 30px 0;
  padding: 30px 0;
}
.page-header h1 {
  font-weight: normal;
  font-size: 30px;
  margin: 0;
  padding: 5px 0;
}
.page-header .breadcrumb {
  background: none;
  margin: 0 0 8px 2px;
  padding: 0;
  position: relative;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.page-header .breadcrumb > li {
  display: inline-block;
  font-size: 0.85em;
  text-shadow: none;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.page-header .breadcrumb > li + li:before {
  color: inherit;
  opacity: 0.7;
  content: "/";
  padding: 0 7px 0 5px;
}
.page-header .breadcrumb > li a {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.page-header .breadcrumb > li a:hover {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.page-header.page-header-text-light {
  color: #fff;
}
.page-header.page-header-text-light h1 {
  color: #fff;
}
.page-header.page-header-text-light .breadcrumb > li {
  color: rgba(250, 250, 250, 0.8);
}
.page-header.page-header-text-light .breadcrumb > li a {
  color: rgba(250, 250, 250, 0.8);
}
.page-header.page-header-text-light .breadcrumb > li a:hover {
  color: #fff;
}
.page-header.page-header-text-dark h1 {
  color: #1e1d1c;
}
.page-header.page-header-text-dark .breadcrumb > li {
  color: #707070;
}
.page-header.page-header-text-dark .breadcrumb > li a {
  color: #707070;
}
.page-header.page-header-text-dark .breadcrumb > li a:hover {
  color: #2dbe60;
}

/* =================================== */
/*  Profile
/* =================================== */
/* Dashboard */
.profile-thumb {
  position: relative;
  width: 100px;
  height: 100px;
  display: inline-block;
}
.profile-thumb .profile-thumb-edit {
  font-size: 16px;
  width: 37px;
  height: 37px;
  border-radius: 100%;
  position: absolute;
  overflow: hidden;
  bottom: 0px;
  right: 0;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}
.profile-thumb .profile-thumb-edit .custom-file-input {
  cursor: pointer;
}

.profile-completeness .border {
  border: 1px solid #ecf1f2 !important;
}

.transaction-title {
  background-color: #f1f5f6;
  border-top: 1px solid #e9eff0;
  border-bottom: 1px solid #e9eff0;
}

.transaction-item {
  border-bottom: 1px solid #e9eff0;
}
.transaction-item:hover {
  background-color: #f4f7f8;
  cursor: pointer;
}

.transaction-details {
  max-width: 620px !important;
}
.transaction-details .modal-content {
  border: none !important;
}
.transaction-details .modal-body {
  padding: 0px !important;
}

/* Cards & Bank Accounts*/
.account-card {
  position: relative;
  background: -webkit-linear-gradient(135deg, #6c6c6b, #9e9e9c);
  background: -moz-linear-gradient(135deg, #6c6c6b, #9e9e9c);
  background: -o-linear-gradient(135deg, #6c6c6b, #9e9e9c);
  background: -ms-linear-gradient(135deg, #6c6c6b, #9e9e9c);
  background: linear-gradient(-45deg, #6c6c6b, #9e9e9c);
}
.account-card.account-card-primary {
  background: -webkit-linear-gradient(135deg, #0f5e9d, #418fce);
  background: -moz-linear-gradient(135deg, #0f5e9d, #418fce);
  background: -o-linear-gradient(135deg, #0f5e9d, #418fce);
  background: -ms-linear-gradient(135deg, #0f5e9d, #418fce);
  background: linear-gradient(-45deg, #0f5e9d, #418fce);
}
.account-card .account-card-expire {
  font-size: 8px;
  line-height: 10px;
}
.account-card .account-card-overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.85);
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.account-card:hover .account-card-overlay {
  opacity: 1;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.account-card-new {
  background: #f1f5f6;
  border: 1px solid #ebebeb;
}

.account-card .border-left, .account-card .border-right {
  border-color: rgba(250, 250, 250, 0.1) !important;
}

.login-signup-page {
  max-width: 460px;
}

/* =================================== */
/*  Elements
/* =================================== */
/* Featured Box */
.featured-box {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.featured-box h3, .featured-box h4 {
  font-size: 1.25rem;
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: 500;
}
.featured-box:not(.style-5) .featured-box-icon {
  display: inline-block;
  font-size: 40px;
  height: 45px;
  line-height: 45px;
  padding: 0;
  width: 45px;
  margin-top: 0;
  margin-bottom: 20px;
  color: #4c4d4d;
  border-radius: 0;
}
.featured-box.style-1, .featured-box.style-2, .featured-box.style-3 {
  padding-left: 50px;
  padding-top: 8px;
}
.featured-box.style-1 .featured-box-icon, .featured-box.style-2 .featured-box-icon, .featured-box.style-3 .featured-box-icon {
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: 0;
  font-size: 30px;
  -ms-flex-pack: center !important;
  justify-content: center !important;
  text-align: center;
}
.featured-box.style-2 p {
  margin-left: -50px;
}
.featured-box.style-3 {
  padding-left: 90px;
  padding-top: 0px;
}
.featured-box.style-3 .featured-box-icon {
  width: 70px;
  height: 70px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.featured-box.style-4 {
  text-align: center;
}
.featured-box.style-4 .featured-box-icon {
  margin: 0 auto 24px;
  margin: 0 auto 1.5rem;
  width: 120px;
  height: 120px;
  text-align: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.03);
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.03);
}
.featured-box.style-4 .featured-box-icon i.fa, .featured-box.style-4 .featured-box-icon i.fas, .featured-box.style-4 .featured-box-icon i.far, .featured-box.style-4 .featured-box-icon i.fal, .featured-box.style-4 .featured-box-icon i.fab {
  font-size: 58px;
  font-size: 3.625rem;
  margin: 0 auto;
}
.featured-box.style-5 {
  text-align: center;
  background: #fff;
  border: 1px solid #f0f2f3;
  -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.featured-box.style-5:hover {
  border: 1px solid #ebeded;
  -webkit-box-shadow: 0px 5px 1.5rem rgba(0, 0, 0, 0.15);
  box-shadow: 0px 5px 1.5rem rgba(0, 0, 0, 0.15);
}
.featured-box.style-5 h3 {
  background: #f1f5f6;
  font-size: 16px;
  padding: 8px 0;
  margin-bottom: 0px;
}
.featured-box.style-5 .featured-box-icon {
  font-size: 50px;
  margin: 44px 0px;
}

/* Video Play button */
.btn-video-play {
  width: 74px;
  height: 74px;
  line-height: 74px;
  text-align: center;
  display: inline-block;
  font-size: 18px;
}

/* Testimonial */
.testimonial {
  background: #fff;
  border: 1px solid #f1f5f6;
  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/* Team */
.team {
  text-align: center;
  padding: 15px;
  background: #fff;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.team:hover {
  -webkit-box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.team img {
  margin-bottom: 20px;
}
.team h3 {
  font-size: 18px;
}
.team p {
  margin-bottom: 0.5rem;
}

/* Accordion & Toggle */
.accordion .card {
  border: none;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
  background-color: transparent;
}
.accordion .card-header {
  padding: 0;
  border: none;
  background: none;
}
.accordion .card-header a {
  font-size: 16px;
  font-weight: normal;
  padding: 1rem 1.25rem 1rem 2.25rem;
  display: block;
  border-radius: 4px;
  position: relative;
}
.accordion:not(.accordion-alternate) .card-header a {
  background-color: #2dbe60;
  color: #fff;
}
.accordion:not(.accordion-alternate) .card-header a.collapsed {
  background-color: #f1f2f4;
  color: #4c4d4d;
}
.accordion .card-header a:before {
  position: absolute;
  content: " ";
  left: 20px;
  top: calc(50% + 2px);
  width: 9px;
  height: 9px;
  border-color: #CCC;
  border-top: 2px solid;
  border-right: 2px solid;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.accordion .card-header a.collapsed:before {
  top: calc(50% - 2px);
  -webkit-transform: translate(-50%, -50%) rotate(135deg);
  transform: translate(-50%, -50%) rotate(135deg);
}
.accordion .card-body {
  line-height: 26px;
  padding: 1rem 0 1rem 2.25rem;
}
.accordion.arrow-right .card-header a {
  padding-left: 1.25rem;
}
.accordion.arrow-right .card-header a:before {
  right: 15px;
  left: auto;
}
.accordion.accordion-alternate .card {
  margin: 0;
}
.accordion.accordion-alternate .card-header a {
  padding-left: 1.40rem;
  border-top: 1px solid #e4e9ec;
  border-radius: 0px;
}
.accordion.accordion-alternate .card:first-of-type .card-header a {
  border-top: 0px;
}
.accordion.accordion-alternate .card-header a:before {
  left: 6px;
}
.accordion.accordion-alternate .card-header a.collapsed {
  color: #4c4d4d;
}
.accordion.accordion-alternate .card-body {
  padding: 0rem 0 1rem 1.25rem;
}
.accordion.accordion-alternate.arrow-right .card-header a {
  padding-left: 0;
}
.accordion.accordion-alternate.arrow-right .card-header a:before {
  right: 0px;
  left: auto;
}
.accordion.toggle .card-header a:before {
  content: "-";
  border: none;
  font-size: 20px;
  height: auto;
  top: calc(50% + 2px);
  width: auto;
  -webkit-transform: translate(-50%, -50%) rotate(180deg);
  transform: translate(-50%, -50%) rotate(180deg);
}
.accordion.toggle .card-header a.collapsed:before {
  content: "+";
  top: calc(50% - 1px);
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
  transform: translate(-50%, -50%) rotate(0deg);
}
.accordion.accordion-alternate.style-2 .card-header a {
  padding-left: 0px;
}
.accordion.accordion-alternate.style-2 .card-header a:before {
  right: 2px;
  left: auto;
  -webkit-transform: translate(-50%, -50%) rotate(135deg);
  transform: translate(-50%, -50%) rotate(135deg);
  top: 50%;
}
.accordion.accordion-alternate.style-2 .card-header a.collapsed:before {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}
.accordion.accordion-alternate.style-2 .card-body {
  padding-left: 0px;
}
.accordion.accordion-alternate.popularRoutes .card-header .nav {
  margin-top: 3px;
}
.accordion.accordion-alternate.popularRoutes .card-header .nav a {
  font-size: 14px;
}
.accordion.accordion-alternate.popularRoutes .card-header a {
  padding: 0px 8px 0px 0px;
  border: none;
  font-size: inherit;
}
.accordion.accordion-alternate.popularRoutes .card-header a:before {
  content: none;
}
.accordion.accordion-alternate.popularRoutes .card-header h5 {
  cursor: pointer;
}
.accordion.accordion-alternate.popularRoutes .card-header h5:before {
  position: absolute;
  content: " ";
  right: 0px;
  top: 24px;
  width: 10px;
  height: 10px;
  opacity: 0.6;
  border-top: 2px solid;
  border-right: 2px solid;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.accordion.accordion-alternate.popularRoutes .card-header h5.collapsed:before {
  top: 24px;
  -webkit-transform: translate(-50%, -50%) rotate(135deg);
  transform: translate(-50%, -50%) rotate(135deg);
}
.accordion.accordion-alternate.popularRoutes .card-body {
  padding: 0;
}
.accordion.accordion-alternate.popularRoutes .card {
  border-bottom: 2px solid #e4e9ec;
  padding: 15px 0px;
}
.accordion.accordion-alternate.popularRoutes .routes-list {
  margin: 1rem 0px 0px 0px;
  padding: 0px;
  list-style: none;
}
.accordion.accordion-alternate.popularRoutes .routes-list a {
  color: inherit;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}
.accordion.accordion-alternate.popularRoutes .routes-list a:hover {
  color: #0071cc;
  text-decoration: underline;
}

/* Tabs */
.nav-tabs {
  border-bottom: 1px solid #d7dee3;
}
.nav-tabs .nav-item .nav-link {
  border: 0;
  background: transparent;
  font-size: 1rem;
  position: relative;
  border-radius: 0;
  padding: 1rem 20px;
  color: #7b8084;
  white-space: nowrap !important;
}
.nav-tabs .nav-item .nav-link.active {
  color: #0c2f55;
}
.nav-tabs .nav-item .nav-link.active:after {
  height: 3px;
  width: 100%;
  content: ' ';
  background-color: #2dbe60;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  -webkit-transform: translateY(-3px);
  transform: translateY(-3px);
}
.nav-tabs.flex-column {
  border-right: 1px solid #d7dee3;
  border-bottom: 0px;
  padding: 1.5rem 0;
}
.nav-tabs.flex-column .nav-item .nav-link {
  border: 1px solid #d7dee3;
  border-right: 0px;
  background-color: #f6f7f8;
  font-size: 14px;
  padding: 0.75rem 1rem;
  color: #535b61;
}
.nav-tabs.flex-column .nav-item:first-of-type .nav-link {
  border-top-left-radius: 4px;
}
.nav-tabs.flex-column .nav-item:last-of-type .nav-link {
  border-bottom-left-radius: 4px;
}
.nav-tabs.flex-column .nav-item .nav-link.active {
  background-color: transparent;
  color: #2dbe60;
}
.nav-tabs.flex-column .nav-item .nav-link.active:after {
  height: 100%;
  width: 2px;
  background: #fff;
  right: -1px;
  left: auto;
}
.nav-tabs.style-2 {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px 4px 0px 0px;
  border: 0px;
}
.nav-tabs.style-2 .nav-item {
  margin-bottom: 0px;
}
.nav-tabs.style-2 .nav-item .nav-link {
  color: #fff;
  font-size: 13px;
  padding: 0.7rem 1rem;
  text-transform: uppercase;
}
.nav-tabs.style-2 .nav-item .nav-link:hover {
  background: rgba(250, 250, 250, 0.2);
}
.nav-tabs.style-2 .nav-item .nav-link.active, .nav-tabs.style-2 .nav-item .nav-link:hover.active {
  background: #2dbe60;
}
.nav-tabs.style-2 .nav-item .nav-link.active:after {
  content: none;
}
.nav-tabs.style-3 {
  border: none;
  margin-bottom: 8px;
}
.nav-tabs.style-3.border-bottom {
  border-bottom: 1px solid rgba(250, 250, 250, 0.3) !important;
}
.nav-tabs.style-4.border-bottom {
  border-bottom: 1px solid rgba(250, 250, 250, 0.3) !important;
}
.nav-tabs.style-3 .nav-item .nav-link {
  color: #8298af;
  margin: 0 10px;
  padding: 0.6rem 0.9375rem;
  text-align: center;
  font-size: 13px;
  font-size: 0.8125rem;
}
.nav-tabs.style-3 .nav-item:first-child .nav-link {
  margin-left: 0px;
}
.nav-tabs.style-3 .nav-item .nav-link.active {
  color: #fff;
}
.nav-tabs.style-2 .nav-item .nav-link:hover.active {
  color: #fff;
}
.nav-tabs.style-3 .nav-item .nav-link:hover {
  color: #a6bcd3;
}
.nav-tabs.style-3 .nav-item .nav-link.active:after {
  height: 3px;
}
.nav-tabs.style-3 .nav-item .nav-link span {
  display: block;
  font-size: 30px;
  margin-bottom: 5px;
}
.nav-tabs.style-4 {
  border: none;
}
.nav-tabs.style-4 .nav-item {
  margin-right: 20px;
}
.nav-tabs.style-4 .nav-item .nav-link {
  color: #fff;
  opacity: 0.65;
  filter: alpha(opacity=65);
  text-align: center;
  font-size: 20px;
  padding-left: 0px;
  padding-right: 0px;
  padding-bottom: .7rem;
  font-weight: 500;
}
.nav-tabs.style-4 .nav-item .nav-link.active, .nav-tabs.style-4 .nav-item .nav-link:hover.active {
  color: #fff;
  opacity: 1;
  filter: alpha(opacity=100);
}
.nav-tabs.style-4 .nav-item .nav-link.active::after {
  content: none;
}
.nav-tabs.style-5 {
  border-bottom: 0px !important;
}
.nav-tabs.style-5 .nav-item .nav-link {
  background: #f1f5f6;
  font-size: 18px;
  padding: 2rem 1rem;
  color: #8d999c;
}
.nav-tabs.style-5 .nav-item .nav-link.active {
  background: #fff;
  color: #1e1d1c;
}
.nav-tabs.style-5 .nav-item .nav-link.active:after {
  content: none;
}

.nav-tabs:not(.flex-column) {
  flex-wrap: nowrap;
  overflow: hidden;
  overflow-x: auto;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-overflow-scrolling: touch;
}
.nav-tabs:not(.flex-column) .nav-item {
  margin-bottom: 0px;
}

@media (max-width: 575px) {
  .nav-tabs .nav-item .nav-link {
    padding-left: 0px;
    padding-right: 0px;
    margin-right: 10px;
    font-size: 0.875rem;
  }
}
@media (min-width: 992px) {
  .search-input-2 .form-control {
    border-radius: 0px;
  }
  .search-input-2 .form-select:not(.form-select-sm) {
    border-radius: 0px;
    height: calc(3.05rem);
  }
  .search-input-2 .btn {
    border-radius: 0px;
  }
  .search-input-2 .form-group:first-child .form-control, .search-input-2 .form-group:first-child .form-select {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  .search-input-2 .form-group:last-child .btn {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  .search-input-2 .form-control:focus, .search-input-2 .form-select:focus {
    box-shadow: none;
    -webkit-box-shadow: none;
  }
  .search-input-2 .form-group .form-control, .search-input-2 .form-select {
    border-left: none;
    border-top: none;
    border-bottom: none;
  }

  /* CSS hack for Chrome */
}
@media screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 0) {
  .search-input-2 .form-select:not(.form-select-sm) {
    height: calc(3.00rem);
  }
  .search-input-2 .btn {
    line-height: inherit;
  }
}
@media (min-width: 992px) {
  /*  CSS hack for Firfox */
  @-moz-document url-prefix() {
    .search-input-2 .form-select:not(.form-select-sm) {
      height: calc(3.05rem);
    }
    .search-input-2 .btn {
      line-height: 1.4;
    }
  }
}
.search-input-line .form-control {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid rgba(250, 250, 250, 0.5);
  border-radius: 0px;
  padding-left: 0px !important;
  color: #ccc;
}
.search-input-line .form-control::-webkit-input-placeholder {
  color: #ccc;
}
.search-input-line .form-control:-moz-placeholder {
  /* FF 4-18 */
  color: #ccc;
}
.search-input-line .form-control::-moz-placeholder {
  /* FF 19+ */
  color: #ccc;
}
.search-input-line .form-control:-ms-input-placeholder, .search-input-line .form-control::-ms-input-placeholder {
  /* IE 10+ */
  color: #ccc;
}
.search-input-line .form-select {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid rgba(250, 250, 250, 0.5);
  border-radius: 0px;
  padding-left: 0px;
  color: #ccc;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='rgba(250,250,250,0.6)' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  background-size: 13px 15px;
}
.search-input-line .form-control:focus, .search-input-line .form-select:focus {
  box-shadow: none;
  -webkit-box-shadow: none;
}
.search-input-line .form-control:not(output):-moz-ui-invalid:not(:focus), .search-input-line .form-control:not(output):-moz-ui-invalid:-moz-focusring:not(:focus) {
  border-bottom: 2px solid #b00708;
  box-shadow: none;
  -webkit-box-shadow: none;
}
.search-input-line .icon-inside {
  color: #999;
}
.search-input-line select option {
  color: #333;
}
.search-input-line .travellers-dropdown input {
  color: #666;
}

/* Easy Responsive Tab Accordion */
.resp-htabs ul.resp-tabs-list {
  margin: 0px;
  padding: 0px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  border-bottom: 1px solid #d7dee3;
}

.resp-tabs-list li {
  padding: 1rem 1.5rem !important;
  margin: 0;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
}

h2.resp-accordion {
  cursor: pointer;
  padding: 5px;
  display: none;
}

.resp-tab-content {
  display: none;
  padding: 15px;
}

.resp-tab-active {
  margin-bottom: -1px !important;
  border-bottom: 3px solid #2dbe60;
}

.resp-content-active, .resp-accordion-active {
  display: block;
}

h2.resp-accordion {
  font-size: 16px;
  color: #777;
  border: 1px solid #e4e9ec;
  border-top: 0px solid #e4e9ec;
  margin: 0px;
  padding: 1rem 1.25rem;
}
h2.resp-tab-active {
  border-bottom: 0px solid #e4e9ec !important;
  margin-bottom: 0px !important;
  padding: 1rem 1.25rem !important;
}
h2.resp-tab-title:last-child {
  border-bottom: 12px solid #e4e9ec !important;
  background: blue;
}

/* Easy Responsive Vertical tabs */
.resp-vtabs ul.resp-tabs-list {
  margin: 0;
  padding: 0;
}
.resp-vtabs .resp-tabs-list li {
  display: block;
  padding: 15px 15px !important;
  margin: 0;
  cursor: pointer;
  font-size: 16px;
  color: #999;
  border: none;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.resp-vtabs .resp-tabs-list li:hover {
  color: #555;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.resp-vtabs .resp-tabs-list li span {
  font-size: 20px;
  text-align: center;
  width: 30px;
  display: inline-block;
  float: left;
  margin-right: 15px;
}

h2.resp-accordion span {
  font-size: 20px;
  text-align: center;
  width: 30px;
  display: inline-block;
  float: left;
  margin-right: 15px;
}

.resp-vtabs .resp-tabs-container {
  padding: 0px;
}
.resp-vtabs .resp-tab-content {
  border: none;
}
.resp-vtabs li.resp-tab-active, .resp-vtabs li.resp-tab-active:hover {
  color: #2dbe60;
  -webkit-box-shadow: -5px 0px 24px -18px rgba(0, 0, 0, 0.4);
  box-shadow: -5px 0px 24px -18px rgba(0, 0, 0, 0.4);
  border-radius: 4px 0px 0px 4px;
  background-color: #fff;
  position: relative;
  z-index: 1;
  margin-right: -1px !important;
  margin-bottom: 0px !important;
}

.resp-arrow {
  width: 0;
  height: 0;
  float: right;
  margin-top: 6px;
  border-color: #000;
  border-top: 1px solid;
  border-right: 1px solid;
  width: 9px;
  height: 9px;
  -webkit-transform: translate(-50%, -50%) rotate(135deg);
  transform: translate(-50%, -50%) rotate(135deg);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

h2.resp-tab-active {
  background: #f1f2f4 !important;
  color: #535b61;
}
h2.resp-tab-active i.resp-arrow {
  margin-top: 10px;
  transform: translate(-50%, -50%) rotate(-45deg);
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

/* Accordion Styles */
.resp-easy-accordion h2.resp-accordion {
  display: block;
}
.resp-easy-accordion .resp-tab-content {
  border: 1px solid #e4e9ec;
}
.resp-easy-accordion .resp-tab-content:last-child {
  border-bottom: 1px solid #e4e9ec !important;
}

.resp-jfit {
  width: 100%;
  margin: 0px;
}

.resp-tab-content-active {
  display: block;
}

h2.resp-accordion:first-child {
  border-top: 1px solid #e4e9ec !important;
}

@media only screen and (max-width: 768px) {
  ul.resp-tabs-list {
    display: none !important;
  }

  h2.resp-accordion {
    display: block;
  }

  .resp-vtabs .resp-tab-content, .resp-htabs .resp-tab-content {
    border: 1px solid #e4e9ec;
  }

  .resp-vtabs .resp-tabs-container {
    border: none;
    float: none;
    width: 100%;
    min-height: initial;
    clear: none;
  }

  .resp-accordion-closed {
    display: none !important;
  }

  .resp-vtabs .resp-tab-content:last-child {
    border-bottom: 1px solid #e4e9ec !important;
  }
}
/* Custom Background */
.hero-wrap {
  position: relative;
}
.hero-wrap .hero-mask, .hero-wrap .hero-bg, .hero-wrap .hero-bg-slideshow {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.hero-wrap .hero-mask {
  z-index: 1;
}
.hero-wrap .hero-content {
  position: relative;
  z-index: 2;
}
.hero-wrap .hero-bg-slideshow {
  z-index: 0;
}
.hero-wrap .hero-bg {
  z-index: 0;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  transition: background-image 300ms ease-in 200ms;
  /* QA/LCP: images/eurusd1024.jpg (48998 B) was the LCP element on 189 sitemap
     URLs + every year page (/history/{pair}[/{YYYY}], /currency/{code},
     /currencies, /currency-codes, /cheat-sheet) — .hero-bg is the biggest box
     in the band. Fast-3G + 4x CPU @390x844: LCP 3.7-4.5s vs FCP 2.1-2.5s.
     It is bandwidth-bound, not discovery-bound, so preload does not help
     (measured: no change) and WebP/resize only trims bytes while the photo
     stays the LCP element. .hero-mask (opacity .8 over #1A237E) already erases
     80% of it — the photo's 0-255 range is crushed to ~51 levels — so the band
     reads as flat indigo either way. A gradient is spec-excluded from LCP, so
     LCP falls back to the H1/lead and lands at FCP (measured: LCP == FCP,
     -1.4 to -1.9s). Stops are sampled from the JPEG's own TL->BR diagonal;
     hero pixel-diff mean 6.2/255, max 29. The file stays: header.tpl still
     uses it for og:image / twitter:image. */
  background-image: linear-gradient(135deg,
      #0a3487 0%, #3d5aa8 12%, #5d6fbc 24%, #6079c6 44%,
      #4a649b 64%, #2c3a6f 84%, #090517 100%);
}
.hero-wrap .hero-bg.hero-bg-scroll {
  background-attachment: scroll;
}
.hero-wrap .hero-bg-slideshow .hero-bg {
  background-attachment: inherit;
}
.hero-wrap .hero-bg-slideshow.owl-carousel .owl-stage-outer, .hero-wrap .hero-bg-slideshow.owl-carousel .owl-stage, .hero-wrap .hero-bg-slideshow.owl-carousel .owl-item {
  height: 100%;
}

/* Owl Carousel */
.owl-theme.single-slideshow .owl-dots {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.owl-theme.single-slideshow .owl-dots .owl-dot.active span, .owl-theme.single-slideshow .owl-dots .owl-dot:hover span {
  background: rgba(250, 250, 250, 0.5);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
}
.owl-theme.single-slideshow .owl-dots .owl-dot span {
  border-color: rgba(250, 250, 250, 0.5);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
}

.owl-carousel.single-slideshow .owl-nav button.owl-prev, .owl-carousel.single-slideshow .owl-nav button.owl-next {
  font-size: 17px;
  width: 45px;
  height: 45px;
  top: calc(50% - 22px);
}
.owl-carousel.single-slideshow .owl-nav button.owl-prev {
  left: 10px;
}
.owl-carousel.single-slideshow .owl-nav button.owl-next {
  right: 10px;
}
.owl-carousel.single-slideshow .owl-item img {
  border-radius: .25rem;
}
.owl-carousel.single-slideshow .owl-stage {
  padding: 0;
}
.owl-carousel .hero-wrap .hero-bg {
  background-attachment: inherit;
}

/* Brands Grid */
.brands-grid {
  overflow: hidden;
}
.brands-grid > .row > div {
  padding-top: 20px;
  padding-bottom: 20px;
}
.brands-grid.separator-border > .row > div:after, .brands-grid.separator-border > .row > div:before {
  content: '';
  position: absolute;
}
.brands-grid.separator-border > .row > div:after {
  width: 100%;
  height: 0;
  top: auto;
  left: 0;
  bottom: -1px;
  border-bottom: 1px dotted #e0dede;
}
.brands-grid.separator-border > .row > div:before {
  height: 100%;
  top: 0;
  left: -1px;
  border-left: 1px dotted #e0dede;
}
.brands-grid > .row > div a {
  opacity: 0.7;
  color: #444;
}
.brands-grid > .row > div a:hover {
  opacity: 1;
  color: #2dbe60;
}

/* Banner */
.banner .item {
  position: relative;
}
.banner .item img {
  vertical-align: middle;
}
.banner .caption {
  position: absolute;
  z-index: 2;
  bottom: 0;
  width: 100%;
  padding: 15px 20px;
}
.banner .caption h2, .banner .caption h3 {
  font-size: 19px;
  color: #fff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.banner .caption p {
  color: rgba(250, 250, 250, 0.8);
  margin-bottom: 0px;
}
.banner .rounded .banner-mask, .banner .rounded img {
  border-radius: .25rem;
}
.banner .banner-mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  backface-visibility: hidden;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.01), black);
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.01), black);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.01), black);
  opacity: 0.7;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.banner .item:hover .banner-mask {
  opacity: 0.95;
  filter: alpha(opacity=95);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.banner.style-2 .caption {
  background: rgba(0, 0, 0, 0.5);
}
.banner.style-2 .banner-mask {
  opacity: 0;
}
.banner.style-2 .item:hover .banner-mask {
  opacity: 0.40;
}
.banner.style-2 .item:hover .caption h2 {
  margin-left: 8px;
}

/* Simple ul */
.simple-ul > li {
  position: relative;
  list-style-type: none;
  line-height: 24px;
}
.simple-ul > li:after {
  content: " ";
  position: absolute;
  top: 12px;
  left: -15px;
  border-color: #000;
  border-top: 1px solid;
  border-right: 1px solid;
  width: 6px;
  height: 6px;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* =================================== */
/*  Footer
/* =================================== */
#footer {
  background: #fff;
  color: #252b33;
  _padding: 66px 0px;
  _padding: 4.125rem 0;
  border-top: 1px solid #ecf3f5;
}
#footer .nav .nav-item {
  display: inline-block;
  line-height: 12px;
  margin: 0;
  padding: 0 10px;
}
#footer .nav .nav-item:first-child {
  padding-left: 0px;
}
#footer .nav .nav-item:last-child {
  padding-right: 0px;
}
#footer .nav .nav-item .nav-link {
  padding: 0;
  margin: 0.5rem 0px;
  color: #252b33;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#footer .nav .nav-item .nav-link:focus {
  color: #2dbe60;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#footer .nav .nav-link:hover {
  color: #2dbe60;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#footer .footer-copyright {
  border-top: 1px solid #e2e8ea;
  padding: 0px 0px;
  color: #67727c;
}
#footer .footer-copyright .nav .nav-item .nav-link {
  color: #67727c;
}
#footer .footer-copyright .nav .nav-link:hover {
  color: #2dbe60;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
#footer .nav.flex-column .nav-item {
  padding: 0px;
}
#footer .nav.flex-column .nav-item .nav-link {
  margin: 0.7rem 0px;
}
#footer.footer-text-light {
  color: rgba(250, 250, 250, 0.8);
}
#footer.footer-text-light .nav .nav-item .nav-link {
  color: rgba(250, 250, 250, 0.8);
}
#footer.footer-text-light .nav .nav-item .nav-link:hover {
  color: #fafafa;
}
#footer.footer-text-light .footer-copyright {
  border-color: rgba(250, 250, 250, 0.15);
  color: rgba(250, 250, 250, 0.5);
}
#footer.footer-text-light:not(.bg-primary) .social-icons-light.social-icons li a {
  color: rgba(250, 250, 250, 0.8);
}
#footer.footer-text-light:not(.bg-primary) .social-icons-light.social-icons li a:hover {
  color: #fafafa;
}
#footer.footer-text-light.bg-primary {
  color: #fff;
}
#footer.footer-text-light.bg-primary .nav .nav-item .nav-link {
  color: #fff;
}
#footer.footer-text-light.bg-primary .nav .nav-item .nav-link:hover {
  color: rgba(250, 250, 250, 0.7);
}
#footer.footer-text-light.bg-primary .footer-copyright {
  border-color: rgba(250, 250, 250, 0.15);
  color: rgba(250, 250, 250, 0.9);
}
#footer.footer-text-light.bg-primary :not(.social-icons) a {
  color: #fff;
}
#footer.footer-text-light.bg-primary :not(.social-icons) a:hover {
  color: rgba(250, 250, 250, 0.7);
}

/* Newsleter */
.newsletter .form-control {
  height: 38px !important;
  font-size: 14px;
}
.newsletter .btn {
  height: 38px;
  padding-top: 0;
  padding-bottom: 0px;
  font-size: 14px;
}

/* Social Icons */
.social-icons {
  margin: 0;
  padding: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
}
.social-icons li {
  margin: 0px 6px 4px;
  padding: 0;
  overflow: visible;
}
.social-icons li:last-child {
  margin-right: 0px;
}
.social-icons li a {
  display: block;
  height: 26px;
  line-height: 26px;
  width: 26px;
  font-size: 18px;
  text-align: center;
  color: #4d555a;
  text-decoration: none;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.social-icons li i {
  line-height: inherit;
}
.social-icons.social-icons-sm li {
  margin: 0px 4px 4px;
}
.social-icons.social-icons-sm li a {
  font-size: 14px;
}
.social-icons.social-icons-lg li a {
  width: 34px;
  height: 34px;
  line-height: 34px;
  font-size: 22px;
}
.social-icons.social-icons-light li a {
  color: #eee;
}
.social-icons li:hover a {
  color: #999;
}
.social-icons li:hover.social-icons-twitter a, .social-icons.social-icons-colored li.social-icons-twitter a {
  color: #00ACEE;
}
.social-icons li:hover.social-icons-facebook a, .social-icons.social-icons-colored li.social-icons-facebook a {
  color: #3B5998;
}
.social-icons li:hover.social-icons-linkedin a, .social-icons.social-icons-colored li.social-icons-linkedin a {
  color: #0E76A8;
}
.social-icons li:hover.social-icons-rss a, .social-icons.social-icons-colored li.social-icons-rss a {
  color: #EE802F;
}
.social-icons li:hover.social-icons-google a, .social-icons.social-icons-colored li.social-icons-google a {
  color: #DD4B39;
}
.social-icons li:hover.social-icons-pinterest a, .social-icons.social-icons-colored li.social-icons-pinterest a {
  color: #cc2127;
}
.social-icons li:hover.social-icons-youtube a, .social-icons.social-icons-colored li.social-icons-youtube a {
  color: #C4302B;
}
.social-icons li:hover.social-icons-instagram a, .social-icons.social-icons-colored li.social-icons-instagram a {
  color: #3F729B;
}
.social-icons li:hover.social-icons-skype a, .social-icons.social-icons-colored li.social-icons-skype a {
  color: #00AFF0;
}
.social-icons li:hover.social-icons-email a, .social-icons.social-icons-colored li.social-icons-email a {
  color: #6567A5;
}
.social-icons li:hover.social-icons-vk a, .social-icons.social-icons-colored li.social-icons-vk a {
  color: #2B587A;
}
.social-icons li:hover.social-icons-xing a, .social-icons.social-icons-colored li.social-icons-xing a {
  color: #126567;
}
.social-icons li:hover.social-icons-tumblr a, .social-icons.social-icons-colored li.social-icons-tumblr a {
  color: #34526F;
}
.social-icons li:hover.social-icons-reddit a, .social-icons.social-icons-colored li.social-icons-reddit a {
  color: #C6C6C6;
}
.social-icons li:hover.social-icons-delicious a, .social-icons.social-icons-colored li.social-icons-delicious a {
  color: #205CC0;
}
.social-icons li:hover.social-icons-stumbleupon a, .social-icons.social-icons-colored li.social-icons-stumbleupon a {
  color: #F74425;
}
.social-icons li:hover.social-icons-digg a, .social-icons.social-icons-colored li.social-icons-digg a {
  color: #191919;
}
.social-icons li:hover.social-icons-blogger a, .social-icons.social-icons-colored li.social-icons-blogger a {
  color: #FC4F08;
}
.social-icons li:hover.social-icons-flickr a, .social-icons.social-icons-colored li.social-icons-flickr a {
  color: #FF0084;
}
.social-icons li:hover.social-icons-vimeo a, .social-icons.social-icons-colored li.social-icons-vimeo a {
  color: #86C9EF;
}
.social-icons li:hover.social-icons-yahoo a, .social-icons.social-icons-colored li.social-icons-yahoo a {
  color: #720E9E;
}
.social-icons li:hover.social-icons-googleplay a, .social-icons.social-icons-colored li.social-icons-googleplay a {
  color: #DD4B39;
}
.social-icons li:hover.social-icons-apple a, .social-icons.social-icons-colored li.social-icons-apple a {
  color: #000;
}
.social-icons.social-icons-colored li:hover a {
  color: #999;
}

/* Back to Top */
#back-to-top {
  display: none;
  position: fixed;
  z-index: 1030;
  bottom: 8px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.2);
  text-align: center;
  color: #fff;
  font-size: 16px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 0.25rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
#back-to-top:hover {
  background-color: #2dbe60;
  -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 575px) {
  #back-to-top {
    z-index: 1029;
  }
}
/* =================================== */
/*  Extras
/* =================================== */
/* Bootstrap Specific */
.form-control, .form-select {
  border-color: #dae1e3;
  font-size: 16px;
  color: #656565;
}

.form-control:not(.form-control-sm) {
  padding: .810rem .96rem;
  height: inherit;
  width: 100%; /* DOBAVENO */
}

.form-control-sm {
  font-size: 14px;
}

.icon-inside {
  position: absolute;
  right: 15px;
  top: calc(50% - 11px);
  pointer-events: none;
  font-size: 18px;
  font-size: 1.125rem;
  color: #c4c3c3;
  z-index: 3;
}

.form-control-sm + .icon-inside {
  font-size: 0.875rem !important;
  font-size: 14px;
  top: calc(50% - 13px);
}

select.form-control:not([size]):not([multiple]):not(.form-control-sm) {
  height: auto;
  padding-top: .700rem;
  padding-bottom: .700rem;
}

.form-select:not(.form-select-sm) {
  height: calc(3.05rem + 2px);
  padding-top: .700rem;
  padding-bottom: .700rem;
}

.col-form-label-sm {
  font-size: 13px;
}

.form-select-sm {
  padding-left: 5px !important;
  font-size: 14px;
}

.form-control:focus, .form-select:focus {
  -webkit-box-shadow: 0 0 5px rgba(128, 189, 255, 0.5);
  box-shadow: 0 0 5px rgba(128, 189, 255, 0.5);
}

.form-control:focus[readonly] {
  box-shadow: none;
}

.input-group-text {
  border-color: #dae1e3;
  background-color: #f1f5f6;
  color: #656565;
}

.form-control::-webkit-input-placeholder {
  color: #b1b4b6;
}
.form-control:-moz-placeholder {
  /* FF 4-18 */
  color: #b1b4b6;
}
.form-control::-moz-placeholder {
  /* FF 19+ */
  color: #b1b4b6;
}
.form-control:-ms-input-placeholder, .form-control::-ms-input-placeholder {
  /* IE 10+ */
  color: #b1b4b6;
}

.btn {
  padding: .8rem 2rem;
  font-weight: 500;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.btn-sm {
  padding: 0.5rem 1rem;
}

.btn:not(.btn-link) {
  -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.btn:not(.btn-link):hover {
  -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.input-group-append .btn, .input-group-prepend .btn {
  -webkit-box-shadow: none;
  box-shadow: none;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.input-group-append .btn:hover, .input-group-prepend .btn:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}

@media (max-width: 575px) {
  .btn:not(.btn-sm) {
    padding: .810rem 1rem;
  }

  .input-group > .input-group-append > .btn, .input-group > .input-group-prepend > .btn {
    padding: 0 0.75rem;
  }
}
.bg-primary, .badge-primary, .text-bg-primary {
  background-color: #2dbe60 !important;
}

.bg-secondary {
  background-color: #6c757d !important;
}

.text-primary, .btn-light, .btn-outline-light:hover, .btn-link {
  color: #2dbe60 !important;
}

.btn-link:hover {
  color: #22b355 !important;
}

.text-secondary {
  color: #6c757d !important;
}

.text-muted {
  color: #6c757d !important; /* was #8e9a9d (2.89:1 on white, failed AA) */
}

.text-light {
  color: #dee3e4 !important;
}

.text-body {
  color: #4c4d4d !important;
}

a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
  background-color: #22b355 !important;
}

.border-primary {
  border-color: #2dbe60 !important;
}

.border-secondary {
  border-color: #6c757d !important;
}

.btn-primary {
  background-color: #2dbe60;
  border-color: #2dbe60;
}
.btn-primary:hover {
  background-color: #22b355;
  border-color: #22b355;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active {
  background-color: #22b355;
  border-color: #22b355;
}
.btn-primary:not(:disabled):not(.disabled).active:hover, .btn-primary:not(:disabled):not(.disabled):active:hover {
  background-color: #2dbe60;
  border-color: #2dbe60;
}

.btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active {
  color: #2dbe60;
  border-color: #2dbe60;
}
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled).active:hover, .btn-outline-primary:not(:disabled):not(.disabled):active:hover {
  background-color: #2dbe60;
  border-color: #2dbe60;
  color: #fff;
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}
.btn-outline-secondary:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

.progress-bar,
.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .dropdown-item.active, .dropdown-item:active {
  background-color: #1A237E;
}

.page-item.active .page-link,
.custom-radio .custom-control-input:checked ~ .custom-control-label:before,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before,
.custom-control-input:checked ~ .custom-control-label:before {
  background-color: #2dbe60;
  border-color: #2dbe60;
}

.list-group-item.active {
  background-color: #2dbe60;
  border-color: #2dbe60;
}

/* Pagination */
.page-link {
  color: #2dbe60;
  border: none;
  border-radius: 0.25rem;
  margin: 0 0.22rem;
  font-size: 16px;
  font-size: 1rem;
}
.page-link:hover {
  color: #22b355;
  background-color: #e9eff0;
}

/* Vertical Multilple input group */
.vertical-input-group .input-group:first-child {
  padding-bottom: 0;
}
.vertical-input-group .input-group:first-child * {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.vertical-input-group .input-group:last-child {
  padding-top: 0;
}
.vertical-input-group .input-group:last-child * {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.vertical-input-group .input-group:not(:last-child):not(:first-child) {
  padding-top: 0;
  padding-bottom: 0;
}
.vertical-input-group .input-group:not(:last-child):not(:first-child) * {
  border-radius: 0;
}
.vertical-input-group .input-group:not(:first-child) * {
  border-top: 0;
}

/* Slider Range (jQuery UI) */
.ui-slider-horizontal {
  height: .2em;
  margin-left: 11px;
  margin-right: 11px;
}
.ui-slider-horizontal .ui-slider-handle {
  top: -0.7em;
  margin-left: -.7em;
  border-radius: 100%;
  background: #fff;
  width: 1.5em;
  height: 1.5em;
}

.ui-slider.ui-widget.ui-widget-content {
  border: none;
  background: #eee;
  margin-bottom: 15px;
}
.ui-slider .ui-widget-header {
  background: #2dbe60;
}

.ui-menu.ui-widget.ui-widget-content {
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.176);
  border: none;
  overflow: hidden;
  overflow-y: auto;
  max-height: 50vh;
  border-radius: 4px;
}
.ui-menu .ui-menu-item-wrapper {
  padding: 6px .75rem 6px .9rem;
}
.ui-menu.ui-widget-content .ui-state-active {
  background: #2dbe60;
  border-color: #2dbe60;
}
.ui-menu .ui-menu-divider {
  display: none;
}


/* ============================================================== */
/*  BS5 migration + fxrates 2026                                  */
/*  Appended for the Bootstrap 5.3 rebuild of fxrates.com.        */
/*  1) Styles absorbed from the old inline <style> block that     */
/*     lived in dev/templates/header.tpl (currency-flag sizing,   */
/*     bootstrap-select button tweaks, table tweaks).             */
/*  2) Bootstrap 4 -> 5 visual-parity fixes (table cell padding,  */
/*     transparent table backgrounds, striped color, toggler      */
/*     focus ring).                                               */
/*  3) New rules for the 2026 page: .chart-wrap, cross-rates      */
/*     table, #swap-btn, converter result table mobile            */
/*     typography, hero card + h1 mobile step-downs, and the      */
/*     AMENDMENT 4 XE-style history chart (3h).                   */
/* ============================================================== */

/* ---- 1a. Absorbed from header.tpl inline <style> ---- */

/* Hide the default dropdown caret — the selectpicker buttons draw
   their own arrow via the form-select background. */
.dropdown-toggle::after {
  display: none;
}
.dropup .dropdown-toggle::after {
  display: none;
}

.currency-flag {
  width: 39px;
  height: 26px;
  /* margin-bottom removed: it pushed the flag up and clipped its bottom edge */
  vertical-align: middle;
  flex-shrink: 0; /* never squash inside the flex button */
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.6);
  border-radius: .18rem !important;
}

.bootstrap-select .btn {
  /* .7rem (not .8) vertical: total height is fixed at 3.2rem, so this widens the
     content box to 28.8px — the 26px flag + 1px paddings fit without the
     .filter-option overflow:hidden shaving the flag's bottom edge */
  padding: .7rem 1rem;
}

.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
  color: #212529;
}

.form-select:not(.form-select-sm).border-0 {
  height: 3.2rem;
}

/* Selected-value line in the picker button: flex so flag + code + subtext
   are vertically centered on one axis and the 26px flag never clips. */
.filter-option-inner-inner {
  padding: 1px;
  display: flex;
  align-items: center;
  overflow: visible;
}

.filter-option-inner-inner i {
  vertical-align: middle;
}

/* flex layout trims the leading space inside the subtext <small>; restore it */
.filter-option-inner-inner .text-muted {
  margin-left: .3rem;
}

.bootstrap-select a.opt.dropdown-item.selected.active:hover {
  color: #FFFFFF;
}

.table-bordered td, .table-bordered th {
  vertical-align: middle;
}

/* (the old block's "text-align: -internal-center" was invalid CSS
   and is intentionally dropped) */
th {
  font-weight: 500;
}

/* ---- 2. Bootstrap 4 -> 5 visual-parity fixes ---- */

/* BS 5.3 paints table cells with --bs-table-bg (= body bg, opaque
   white); BS4 tables were transparent. Restore transparency so the
   theme's card/section backgrounds show through as before. */
.table {
  --bs-table-bg: transparent;
}

/* BS 5.3 striping is applied per-cell via CSS variables — set the
   striped color to the same #f8f9fa the old design used. */
.table-striped {
  --bs-table-striped-bg: #f8f9fa;
}

/* BS5 default cell padding is .5rem; BS4 used .75rem. Restore the
   old density for regular tables, leave .table-sm compact. */
.table:not(.table-sm) > :not(caption) > * > * {
  padding: 0.75rem;
}

/* BS5 adds a focus ring box-shadow to .navbar-toggler that BS4 did
   not have; the theme draws its own burger (three spans). The
   burger button/menu CSS above is class-based (.navbar-toggler,
   .navbar-toggler.open span, #header .primary-menu, #header-nav is
   a plain .collapse) so it works unchanged with BS5's
   data-bs-toggle="collapse" data-bs-target="#header-nav" markup. */
.navbar-toggler:focus:not(:focus-visible) {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.navbar-toggler:focus-visible {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 190, 96, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(45, 190, 96, 0.25);
}

/* ---- 3a. History chart wrapper (Chart.js v4, maintainAspectRatio:false).
   Heights per AMENDMENT 4 (XE-style full-width chart). ---- */
.chart-wrap {
  position: relative;
  height: 380px;
}

@media (max-width: 575.98px) {
  .chart-wrap {
    height: 300px;
  }
}

/* ---- 3b. Cross Currency Rates matrix ---- */

/* anchor the .visually-hidden (position:absolute) a11y spans inside the
   cells to the scroll wrapper — unanchored they resolve against the
   initial containing block and add ~459px of phantom document width
   at narrow viewports */
#cross-rates .table-responsive {
  position: relative;
}

.cross-table th,
.cross-table td,
#cross-rates-table th,
#cross-rates-table td {
  white-space: nowrap;
  min-width: 88px;
}

/* empty top-left corner cell of the matrix */
.cross-table thead th:first-child:empty,
#cross-rates-table thead th:first-child:empty {
  min-width: 48px;
  background-color: transparent;
  border-color: transparent;
}

.cross-currency {
  margin-top: 4px;
  margin-right: 4px;
}

/* ---- 3c. Swap button between the two currency selects ---- */
#swap-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #dae1e3;
  color: #2dbe60;
  line-height: 1;
}

#swap-btn:hover {
  background-color: #f1f5f6;
  border-color: #c9d3d6;
  color: #22b355;
}

#swap-btn:focus-visible {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 190, 96, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(45, 190, 96, 0.25);
}

#swap-btn svg {
  display: block;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
}

/* selects stack vertically below md — turn the arrows vertical too */
@media (max-width: 767.98px) {
  #swap-btn svg {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

/* ---- 3d. Converter result table typography (mobile-safe) ---- */
#result-from-amt, #result-to-amt,
#result-from-name, #result-to-name,
#result-rate, #result-inverse {
  word-break: break-word;
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  /* h3 amounts in the bordered result table wrap instead of overflowing */
  #converter .table-bordered h3 {
    font-size: 1.15rem;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  #converter .table-bordered td {
    padding: 0.5rem;
  }
}


/* ---- 3f. Hero on mobile: h1 step-down + tighter converter card ---- */
@media (max-width: 767.98px) {
  .text-14 {
    font-size: 40px !important;
    font-size: 2.5rem !important;
  }
}

@media (max-width: 575.98px) {
  .text-14 {
    font-size: 32px !important;
    font-size: 2rem !important;
  }
  /* the white converter card (.tab-content p-4 bg-white rounded) */
  .hero-wrap .tab-content.p-4,
  .hero-content .tab-content.p-4 {
    padding: 1rem !important;
  }
}

/* ---- 3g. #margin-custom sizing (the "Custom…" margin % input) ----
   The old .converter-row2-scoped variant of this section was dead code —
   no template ships that class; the live row-2 styling is the 3g-alias
   :has() block below. Only the bare #margin-custom rules that actually
   matched are kept. */

#margin-custom {
  width: 7rem;
}

/* -- mobile <576px: the custom-margin control spans its column -- */
@media (max-width: 575.98px) {
  #margin-custom {
    width: 100%;
  }
  /* inside the %-suffix input-group the input flexes and the group
     spans the column, whatever wrapper the template uses */
  .input-group > #margin-custom {
    width: auto;
    min-width: 0;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
}

/* -- row 1 after the Convert button's removal (Amount|From|swap|To) -- */
/* The freed col-md-2 is absorbed by the two flexible .col-md select
   columns automatically; keep them shrinkable so the row stays on one
   line at md/lg (also covered by the template's inline style). */
@media (min-width: 768px) {
  #converter-form .col-md {
    min-width: 0;
  }
  /* swap column: no label above the round button any more, so pin the
     column to the control baseline and optically center the 46px
     button on the 3.2rem selects */
  #converter-form > .col-md-auto {
    -ms-flex-item-align: end;
        align-self: flex-end;
    padding-bottom: 0.15rem;
  }
  /* Centre the swap circle on the field boxes. It was pinned to the bottom of
     the row (align-self:flex-end + a 0.15rem nudge) from when the column still
     carried a label above the button; with the label gone that left the circle
     sitting 6px below the fields' vertical centre at every width. align-self
     centre is self-correcting, so it survives the button being resized again. */
  #converter-form > div:has(> #swap-btn) {
    -ms-flex-item-align: center;
        align-self: center;
    padding-bottom: 0;
  }
}

/* ---- 3g-alias: same row-2 treatment for the markup hero-converter.tpl
   currently ships (nested `.row` inside a `.col-12` wrapper, without the
   .converter-row2 class; helper text is `small.text-muted`). These rules
   key off #margin-select via :has() and switch themselves off the moment
   the template adopts .converter-row2 on the row-2 wrapper. ---- */

#converter-form:not(:has(.converter-row2)) > div:has(#margin-select) {
  margin-top: 0.75rem;
  border-top: 1px solid #eef1f3;
}

#converter-form:not(:has(.converter-row2)) > div:has(#margin-select) > .row {
  padding-top: 0.5rem;
}

#converter-form:not(:has(.converter-row2)) > div:has(#margin-select) .form-label {
  font-size: 0.75rem;
  font-weight: 400;
  color: #6c757d; /* was #8d999c, failed AA at 12px */
}

#converter-form:not(:has(.converter-row2)) > div:has(#margin-select) .form-select,
#converter-form:not(:has(.converter-row2)) > div:has(#margin-select) .form-control {
  font-size: 0.8125rem;
  color: #6c757d;
  background-color: #fbfcfc;
  border-color: #e3e8ea;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  height: auto;
}

#converter-form:not(:has(.converter-row2)) > div:has(#margin-select) .form-select:focus,
#converter-form:not(:has(.converter-row2)) > div:has(#margin-select) .form-control:focus {
  color: #4c4d4d;
  border-color: #a9dfbd;
  box-shadow: 0 0 0 0.2rem rgba(45, 190, 96, 0.12);
}

#converter-form:not(:has(.converter-row2)) > div:has(#margin-select) .input-group-text {
  font-size: 0.8125rem;
  color: #6c757d; /* was #8d999c, failed AA */
  background-color: #f1f5f6;
  border-color: #e3e8ea;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* helper line ("Margin simulates bank/card markups...") */
#converter-form:not(:has(.converter-row2)) > div:has(#margin-select) small {
  font-size: 0.75rem;
  color: #6c757d; /* was #a4adb0 (2.3:1), failed AA at 12px */
}

@media (min-width: 576px) {
  /* compact selects hug their content instead of filling 50% columns */
  #converter-form:not(:has(.converter-row2)) > div:has(#margin-select) .form-select {
    width: auto;
    display: inline-block;
  }
  /* ~7rem custom-margin control: the input-group (input + % suffix)
     hugs its content instead of filling the column */
  #converter-form:not(:has(.converter-row2)) > div:has(#margin-select) .input-group:has(> #margin-custom) {
    width: auto;
    flex-wrap: nowrap;
  }
  #converter-form:not(:has(.converter-row2)) > div:has(#margin-select) .input-group > #margin-custom {
    width: 5rem;
    flex: 0 0 auto;
    min-width: 0;
  }
}

/* ---- 3h. AMENDMENT 4: XE-style full-width history chart ---- */
/* Markup (history-stats.tpl): .chart-header flex row (title block
   left, readout block right), #chart-ranges centered pill row of
   .chart-range buttons, .chart-wrap main canvas (heights in 3a),
   Theme primary green
   (#2dbe60 / hover #22b355) = "primary" for the active pill, same
   as the old .btn-primary range buttons. */

/* -- header row: allow tight wrapping; breathing room above pills -- */
.chart-header {
  row-gap: 0.5rem;
}

#chart-title {
  color: #0c2f55;
}

/* colored % change beside the title (BS .text-success/.text-danger
   supply the color; weight/size ensured here per contract) */
#chart-change {
  font-weight: 700;
  font-size: 1.0625rem;
  white-space: nowrap;
}

#chart-range-label {
  font-size: 0.9375rem;
  margin-left: 0.15rem;
}

/* -- live "1 X = Y" readout (top-right) -- */
#chart-readout {
  display: inline-block;
  font-weight: 600;
  font-size: 1.0625rem;
  color: #0c2f55;
  white-space: nowrap;
}

/* If app.js puts a BS color class on the readout to color the dot,
   keep the readout TEXT dark like XE — only the dot is colored. */
#chart-readout.text-success,
#chart-readout.text-danger {
  color: #0c2f55 !important;
}

/* Leading colored dot. Default: rendered via ::before (green up /
   red down — JS toggles .up/.down or .text-success/.text-danger on
   #chart-readout). Hidden while the readout is empty (server ships
   it empty; JS fills). */
#chart-readout::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background-color: #198754;
  margin-right: 0.4rem;
  vertical-align: 0.02em;
}

#chart-readout:empty::before {
  display: none;
}

#chart-readout.down::before,
#chart-readout.text-danger::before {
  background-color: #dc3545;
}

#chart-readout.up::before,
#chart-readout.text-success::before {
  background-color: #198754;
}

/* Alternative dot: if app.js injects its own <span class="chart-dot">
   inside the readout, the ::before dot switches off and the span is
   styled instead (color it via .text-success/.text-danger or an
   inline color — background follows currentColor). */
#chart-readout:has(.chart-dot)::before {
  display: none;
}

#chart-readout .chart-dot {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  color: #198754;
  background-color: currentColor;
  margin-right: 0.4rem;
  vertical-align: 0.02em;
}

/* timestamp line under the readout */
#chart-readout-time {
  font-size: 0.8125rem;
}

/* -- mobile <768px: readout stacks below the title block -- */
@media (max-width: 767.98px) {
  .chart-header > div {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
  }
  /* left-align the stacked readout (overrides the .text-end utility) */
  .chart-header > .text-end {
    text-align: left !important;
    margin-top: 0.15rem;
  }
}

/* -- centered range pill row (1D 1W 1M 1Y 2Y 5Y 10Y) -- */
#chart-ranges {
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.chart-range {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 40px; /* touch-target floor; was ~28px */
  background-color: transparent;
  border: 1px solid #dfe6e8;
  color: #6c757d;
  border-radius: 50rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.45rem 0.9rem;
  min-width: 2.75rem;
  text-align: center;
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.chart-range:hover {
  color: #22b355;
  border-color: #a9dfbd;
  background-color: rgba(45, 190, 96, 0.07);
}

.chart-range:focus-visible {
  outline: 0;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 190, 96, 0.25);
          box-shadow: 0 0 0 0.2rem rgba(45, 190, 96, 0.25);
}

/* navy active pill (matches #chart-title; 13.2:1 with the white label —
   the green #2dbe60 was 2.43:1, failing AA at this 13px size) */
.chart-range.active {
  background-color: #0c2f55;
  border-color: #0c2f55;
  color: #fff;
}

.chart-range.active:hover {
  background-color: #123e6b;
  border-color: #123e6b;
  color: #fff;
}

@media (max-width: 575.98px) {
  .chart-range {
    padding: 0.4rem 0.7rem;
    min-width: 2.4rem;
  }
}

/* ---- flags for 2026-era currency codes the vendor lib (v2.1.2) predates ----
   5 cloned from same-country legacy codes; 5 drawn as simplified 48x32 flags. */
.currency-flag-ves{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAMAAABjCgsuAAAAulBMVEUAJH0BJX4CJn8EKH8FKYAGKoEIKoELLYILLYMPMYQPMYUQMoUSM4YSNIYUNYcWN4kWOIgXOIkXOYkbO4shQI4mRZArSZM0UJc0UZhTbKdYcKtcc6tcc6xjea9jebB8jryJmcOKGUeLm8KptNKptdSrlSmrt9Stt9SxvNixvdfDzOHEzOHEzeHFzeHPFCvQ1+bQ1+fT2enV2unf5O7h5e7n6/Lo7PTw8vnx8vf29/r2+Pv5+vz5+v3/zABl3GXwAAAAl0lEQVQ4y+2RRRKDABAEGydGBImHuLvr/7+VY0IRCBypom8zNX3Z5RUTUiGhwigm/MQQQDCIhgiFxcmyzvM8iBGEzLHNeK/puyGdQy6C0Ly7SAAS7q31b20P6pifaNKY2KFC9TFTvrMyfdbC9iqVorcplVGD986mn/XdoLt1go3ryt8tLyEvkHV/qcneZ/RiwjomqZBQ4Q0FPd0jloPzawAAAABJRU5ErkJggg==)}
.currency-flag-sle{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgBAMAAACm+uYvAAAAFVBMVEUocsUocsYoc8Y1tDo2tTo2tTv///8F3nL9AAABJklEQVQoz92PQZEkQQzEsozAVQhcpmAfAmsQTGNY/hDu0fs9ApevjNBHUg81wBRDQ1ENgygA6Aa6i2GYRv0AUHRD0QANrfcM3fV5GmZ4ZuAFNR+Grp6h64FCzLf4TlMwBXxhGDQFvwLT1UD/qQbN9DBTTffTNXRTVS0aqorPZ6CHbpoexPxazdtS3UMxYujut/El9dCf0c8/9v8DW7H8rhMr7MrCr+tqpUJm5nlTCsnN0o48TSGTVmyXn3S/6X6XSzI/2i5lxtX2tK1jrlQsM+VKSXaUtvzctbUUSt92PVweR2a+8+qGfJ2z5a4b69y7VkipFdKWyVIm03ZPXdtSSDfiSLKTe1mESctNa0k6N49MFjfN3LRzu5lOhKQjxV3H1/Z7lRbrL5yZrrnImTy6AAAAAElFTkSuQmCC)}
.currency-flag-mru{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgBAMAAACm+uYvAAAAKlBMVEUyqFsyqFwyqVw0sE41sUvPGx7QGx7QHB7QHB/l0gbp0gr71gD71wD71wMEYetTAAABsUlEQVQYGQXBwW0cRxBA0d720RCwU3cDXf8qRaEcdjQJcNgJGJgEuucnoSR4JffgAAgYPJrcXPxe2ab78HCsTjd9dj90WPylnp5983Trz06n87Acqrp6bB7PbqrbaS+q3Wnvu3YdQ8f0KKrb0+kx7bc+h9tN3S3O+XzOs7vqvKlDp9PSFqAA0KgARFYomZG0lpWosCQ1uC4tCkC0BWgQCUFQoQAEUIEAGpEkFBrUACAg4LoAtEKDDC6RfP9otIUMMlshE/iAyuOThB9cuFALwAUAvn2QQMCSFCoNfgTw32+o/ANALQALf70A1Eb8+S9QoZBcW8QXsFDhngmQhUqSfH5VEurrA4IMSgCRfH+7Q+T7/QWoQCEBIh+vn4+vx+NOI0kokFSAx/vb/e0BtRIEhchIgD8+3x+vPwEAKK0QNCBocYEguCaU1mqDRiZAg4Ro16UAQStAA5IAIpMCRAVqJgQRAARlPjnddM4+p5vHUHdHmYe6OlY91GObf/9yOMru0O7sa5863O3O27kWPb2p6uYc3bmd/aZlX1X37eynekyf1Nm34nTeuqvT7ugO3d2m/wPKudzknj/CfwAAAABJRU5ErkJggg==)}
.currency-flag-stn{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAMAAABjCgsuAAAC4lBMVEUAAAAFAAAIAgAJCAIMCAANCQANCgAlFwAqJAMsJAExqCwxqSwyqisyqyoyqywyqy0yrCoyrCwyrC0zrSozrSszriszrys0KQU0sCs0sSw2tis4uyo4vCs6wik8tCo8tCs8vyo8ySk9xSo9xio+qSw+zSY+zSg+ziY+zik/0Cc/0ShEmi1OOAFOOQJOii5QSAVUSgVVSwVbei9bejBdSQVoTABqaC9qaS9raARzWAB2YAB7bwd9awB+ZQJ/VjGAcgWAcwKCawGDaACDaQCKdgCRgAWTRTKURTOUewCUewKaeQCmNjSqqQWrmgCrqQitmgG4KjS7lwC8lAC8qge9lAHGcyLHAD/IAD3IHTXInQLJAD3JrALKADzMDDjMDDnNADvOBDjOwgDPEjPPEjXPwgLQETXQEjPQEjXQEzTQFTfREDTRETTREjTSDjTSEDPSEDTSETPSETTTCDbTDTTTEDPTEDTTETPTETTTEjPTEzPTIDLTIDPUCDfUDTTVDDPVrwDVxAbVxQDVxwjVyAfWDDTWLi/WxgjWyAfWyAvWzAjXFDXXLi/XLy/XtgHXzQvYCjTYCjXY8QDY8QLhATrhDDbi4gHjBDTkBTbkBjflBzjpADTqADTqzgDrBDXrBTbtxAPtxgDtyQPtygLt4QDvADXv4QDwohHw2AHy1gD0tgz1ADb1ADf1tg/3kRT3kRb3xQD3xwb4ygD4ygf40wP41QD41QL42QD5zgD5zwL50wP6xgH6yAT6yQP6ygD6ygL6ywH6zAD6zAX6zQD6zQT6zgD6zgP6zwL60AH60AX60QD60QT60gD60gT60wP61AL61QH71gD71gT71wP72Af72QH72gD72wT73QD73QL73gH73wD73wX74Qj74gL74wH75AX85QD85QT85gL86wD86wL87QD87wj88AL88QD88Qb98wP98wn99wD9+AP9+Qf9+gD9+gb9/QL9/gD9/gb9/xP9/xp9APLLAAADzElEQVQYGQXBy4uXdRTA4c+5vO/M6JS3xqZMoiRz4WhCCZrSRguhRRi1yNq0CtoG7Vr5BwRBSgS1qHZdlm1qUYaBbkQLL0WIqE2aOb8Zx9/lnO/peWTv4M7qdOBhUggBTjhhUpIqleAA4SWVjr6zZtPMyA1PUgJ3ALAsKUDcnaLKI6t5oMO3u7l+JFFeHg4YeCBOSElUBEgImEuFo+f6N2WTJxIJFJUAESUACEA5GVI4hK458+hCWx8SgCEIBY4LlAfhXkiEWwnluHp/+ujOtn4ChkBAEuUEEOYWZIFHStAqUPXJL2/stHVBBuDlFi4VXogQOEhRDl6Wju2jH/z78tWB3eukKrIkbSK0VKkmElJNorSkipIqe75lP2gvXhzpqhOuGo4SOARKUzRcQ1OjmhJOw2b/mn3tp4Mx1Ipu3IUjY/GoDmRCN6Yf0zGRjpLyQpjpLz50aO7QlVEPkDaenl0ZdghpBcTG0UpfMgTALTPvy0ycbsMjF5Z7gFG3eHVm3RhgZGn47zq/agCA7QvBSsbr7t3MvbeqNLXNn/z6zktLmoqW4pc/vHjsby0BQA2sadr4keVzp3ZUw2rb/K0z/8w/SUuI4aM7Br/eWrewdgwAniiVM+M2mv9zrS1cgz8+0LvceKXe2r1Ke9DeHUj99erg8Ov/AeAiKdiwrHVbz03Vtrtsbj/CWV7YnKDjDd3pZPH73VsbAChIWZZkCRTAhu+OdfixbzeuAOPrJ7+cgSOn9t8GAKXKSlCzuvHcrl13IJeGE43hSusgTf+tVAbDFQcALSxFLZm68cRTu69Crjl1+Zlrey79PJ1gsOkT/e3w2Y/nGgCoGJY0pm4+sOfAJRQb5dPHp49vj5FBYovrT2w6eXR2IAAg79/HUnT6Zh45ciG7EhpbVv5+ePaaaRrU8PG89uDcneW+AJD3ktQardk+d/jKqCe1GWmkNisBStKAtBoB4AIigwX/4cCJ+1PRUVKTflIdTPpxB4HLuJtI9VQ44pVSS4899tHiqcFUWjgAAOGQhUN4OADh4Y61lS0Ln16/vzSFhScGQIhD4ACOAxAeEk6O1i58fimWe6O0ddHwMOlLwvtQwqESr6SvTsqt2cGvztfSFOHpVZZg6YF5QeCAOAFe6aDjyf5vLtiSA4CI4JUEJiTmQACBOwKIjp+9cV5vWxUeXlBEursn5SlhgVfhHgQQoTtHX7RbViYFQAjmRJSXAGBAg/JwDFz7z+J24ISEh2CBEOZZElggSYiClBeChy0u/7c6LSIirZkUJkKr5hKGqJaiaVCChIbK/92oK23uhRBpAAAAAElFTkSuQmCC)}
.currency-flag-xcg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAMAAABjCgsuAAAB9VBMVEUJDHYJDXYKDXcKD3cKD3gKEHkKEHoKEnkLEnsLFHsLFHwLFXsLFnwLF3wMFoAMF30MGH8MGIEMGX0MGX4MGn8MG34MG38NGIINGoINHYANHYINHoEOIIIOIYMOIoIOIoMOIoQPJIQPJIUPJYQPJYUPJoQPJoUPJoYPJ4UPJ4YQJ4cQKIYQKIcQKYcQKYkQKocQKogQKokQK4cQK4gRI4MRI5MRJZIRJpQRJ5ERJ5IRKJIRKZIRK4kRLIgRLIkRLYkRLYoRLokSK5QSK5USLJQTLZUTLpcTL5gUKIYbQJMfQ5UlZbUpS5oqTpsqargrTZssTpssZ7QuUJ0uabYvUJ0zVJ4zcbs6eMBLaKpPbKxXcrBYc7BsATNuAzRwAzRzBTZ+CDKKEzOLFTSOH0OOIUWOI0aUDCqVDSuVHT6WHj6XGTyYHz+ZGz2ZHz+chKadf6Cjs9Sks9Sks9WktNWnhKKoi6mwvdmwvdqwvtqxvtq+yN/M1+nN1efXAADYAADYAALZAAHa4vHbExnbExrcExrcFBrcFx3dFBrdFRrdFRvdFx3dFx7dGB7d5vLl7Pbq7/fv9PnxrK3xrK7yrK7z9fn0AAH0AQP0Dwr0Dwz0t7j0t7n1EAz1Ew71FA71FQ71FRD1uLn6wbT6wrT6/P37zsL7z8H///9zdymPAAACOklEQVQYGW3BS26cRRiG0ed9q/6O0zGt2MagMCExN0XCYhYEA8YsAPbBFtgMe2ABMECKBBI3gcQgCYqRUELsjt3urvo+GoYun6OvuOrsz9msUWl5eXjAVWakbBVESUZmIGVtNOhiVBlkqk1ijZORGSjFJtYQSgZmkEBtlS0xMAOZCm2CZGRGmWrMEkgGlZHYTESjcI3KYH5YJkc6Y3GLQf0eEMmWSETmaSntgp2i9aIoSaAECZRITQlKQYJI4OCDPO93/JR5+eFvQMn/lEqo9xw4zJYS6Pb56fLkc395e4/9RZ9Qx4EDTFBvilQqAwOLZ4/1Ln5j/U1Z7Pc6e9yO9k8JSoYDh6VjtkqGCRNLf5jf3rzB/nfx4B+tLj4qDzdzwOqAAxuDEyJMeL338VsnG+LZ0dsv1PuTo0/vnptCdBuDVe6QiABSqfnLsycXe50EBQc9/vj1Nqm0RFoidOww4TAELvH7zvvLR/1eL7d+0puv/Hx2Xz0hDASlo2NKNxAlw+GAFu/ol4n1cf64YwcOjLohTNTQJeBww80R5vzpZ4cPS3n+ydnXr88djnDSMQEOIaXCgQOnSO2+99ruo3ku767++u05Dhz8xwROfeGQOyZKIET0Ze87iVcqi5JkCSUo2RL1AVflC09KlOvcrVxVGbw8mQrVwWZ1+CpXVUYW0wYq16mMItlMSUNiYK5VN7RakpEZzCQabUY3IzO4zKzAGiIYVAYyDZhAjCqDRFTIVldmYAYK1UYTjWv8C3IBFvf/khHtAAAAAElFTkSuQmCC)}
.currency-flag-zwg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAIAAADbtmxLAAAA30lEQVR42s2YTQrCMBCF3wxZuPQI4gEEL+ZhvJjgAaRHcOnuuWhJwRabBpJ52ZT+LD6+eWQyNQDX+wEyywE8bh8dIANA0sxEVPl4IUlSQdVkaL4341PAUF4k7aJkKHsCEKLKV5+OkQpR5X/ehTCtl+ynfK/TUQgoR6oPlpd8NEbqPLxVgDJWB6aiki3LJ2Eoe9ICypESAmqqqh6oUZhSNUqjbSlV0DTdIV2KZh9Qn6a2o5f1OR6lEjE9T2ouRbMBFHLgT+Gh2Q61mQVOjL50Ezu/uhTNnCGd2X7q2Dp/ZL6PjWCxXCno1AAAAABJRU5ErkJggg==)}
.currency-flag-lsl{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAIAAADbtmxLAAAAZklEQVR42u3VwQmAQAxE0YyVbC/W6NlS42EvC6LCRiTEPxV8Xg6Rtd0ybbFkI4gggn4XJHdH6JMgSYmCes0rTRVPNsLEkcoJnUmCSLWErjAiSIWE7hmmkfhlj0K2rQgRRBBBBA07ALuKB+8PolqYAAAAAElFTkSuQmCC)}
.currency-flag-pab{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAIAAADbtmxLAAAAsElEQVR42u2VzQ2AIAyFi2EBB+nRSVyDcVzDSTg6CCPUAwkx4UcSoWLsu9ED/dL2tYqIoIWOeWnyzwSDSYCaAKl1GwiIkwYAVM5lBQ7azQsuS2YtxDlaFufuTfM1l/kxot0wFKa2QgGFjUnJLROgh9KtLgM5Ky0ToO6q2VXTUDQAoJk5rk9MGbN7hTCzDnJxjpbFuTG/tH7pMj836CxWbHOmCgWUW6YXZqjMJKfjc0Anj81BB7vnuJQAAAAASUVORK5CYII=)}
.currency-flag-sdg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAIAAADbtmxLAAAAt0lEQVR42s3VsRXCMAwE0PO1TBIKhmKEMAeMwFAUMAk1NDxeILETFdadKlty8Z9t2QXjcLvuYBMEcDg+vUBWJn5HJiZOJw4m/s3lJs5TWhMXs0ITawWViY2axMR2Od9UMA6ri17nu8sOfdSnvRco08TA6aaYGLtx/U0Md0FnUxjUu+NopYmBcl4jWmk2gy6PkhXcojH6XJM1a6B0TROk0NRBIk0FpNMsgaSaGUit+QUZaCYgDw2AN4yaMOJVxMRdAAAAAElFTkSuQmCC)}
.currency-flag-tmt{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAIAAADbtmxLAAAAhElEQVR42u3VMQ6AIBAEwDvDt+RXVlhK5a/wYVCYGAyx4Tbmit2awIQsh8qxyjvnfslHtmExPIs4C0G/gWoqNRUvoJuiOboAATUAEFZjBUFKw2dPELhMJlD/uFAm6w3BTcG+heb4UHrT3HDCdGg8e3pUBlQZvXwdnEMEEUQQQQQR5B3UAEJ3JEGzZ1ZsAAAAAElFTkSuQmCC)}

/* WCAG 2.4.7 / 2.4.11 visible keyboard focus for the converter + chart
   controls: the always-on Bootstrap .shadow-sm utility (!important) clobbers
   the :focus box-shadow rings above, and the remaining border/ring shifts are
   only 1.2-1.6:1 against white. outline is immune to that box-shadow
   override; #0c2f55 is 13.5:1 on white. transition:none so the .btn
   'all 0.5s' fade cannot delay the indicator; it also overrides the
   'outline: 0' in the earlier .chart-range:focus-visible rule. */
#swap-btn:focus-visible,
.chart-range:focus-visible,
/* QA: same failure mode, never extended to the three sibling controls in the
   converter's own form row. They carry .shadow-sm too, so the ring in the
   `> div:has(#margin-select) .form-select:focus` rule above never paints and
   keyboard focus only shifted the 1px border (#e3e8ea -> #a9dfbd: 1.22:1
   state change, 1.50:1 vs the white card) and the text (#6c757d -> #4c4d4d,
   1.81:1) — both under the 3:1 floor. Un-clobbering the authored ring does not
   help: rgba(45,190,96,.12) composites to #e5f7ec, a *weaker* 1.11:1. Only an
   outline works. */
#margin-select:focus-visible,
#source-select:focus-visible,
#margin-custom:focus-visible {
  outline: 2px solid #0c2f55;
  outline-offset: 2px;
  -webkit-transition: none;
  transition: none;
}
/* #margin-custom sits in an .input-group; the "%" addon paints after it and
   would clip the outline on the shared edge. */
#margin-custom:focus-visible {
  position: relative;
  z-index: 3;
}

/* ---- XE-style outlined converter fields (Amount / From / To) ---------------
   Each control sits in an .fx-field frame with its label notched onto the top
   border. Rest = light border; hover = darker border; focus (click OR keyboard)
   = blue border + soft blue glow. Replaces the old dark-navy focus outline the
   user disliked, while staying WCAG-compliant (blue #1d4ed8 is 6.5:1 on white,
   well over the 3:1 UI-component floor). */
.fx-field {
  position: relative;
  border: 1.5px solid #d4d9e0;
  border-radius: 0.6rem;
  background: #fff;
  padding: 0.15rem 0.15rem 0.1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fx-field:hover {
  border-color: #9aa4b2;
}
/* focus-within covers pointer clicks AND keyboard tabbing into the control */
.fx-field:focus-within {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18);
}
.fx-label {
  position: absolute;
  top: 0;
  left: 0.75rem;
  transform: translateY(-52%);
  margin: 0;
  padding: 0 0.35rem;
  background: #fff;
  font-size: 0.78rem;
  line-height: 1;
  font-weight: 500;
  color: #6b7280;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}
.fx-field:focus-within .fx-label {
  color: #1d4ed8;
}
/* inner controls are chrome-less — the .fx-field IS the frame now */
.fx-field .form-control,
.fx-field .bootstrap-select > .dropdown-toggle,
.fx-field .bootstrap-select > .dropdown-toggle.btn {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  /* background-COLOR, not the `background` shorthand. Only the fill needs to
     go: the picker button is a .form-select, and Bootstrap draws its dropdown
     chevron as a background-IMAGE (--bs-form-select-bg-img). The shorthand
     reset that image too, which is why the From/To Currency selects lost their
     arrow entirely — .dropdown-toggle::after is also display:none a few
     hundred lines up, on the stated assumption that "the selectpicker buttons
     draw their own arrow via the form-select background". That assumption was
     true; this rule was quietly breaking it. */
  background-color: transparent !important;
}
.fx-field .form-control:focus,
.fx-field .form-control:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}
.fx-field .form-control {
  padding: 0.55rem 0.75rem;
  height: 3rem;
}
.fx-field-select .bootstrap-select {
  width: 100% !important;
}
.fx-field-select .bootstrap-select > .dropdown-toggle {
  padding: 0.55rem 0.75rem;
  height: 3rem;
}
/* keyboard-only focus keeps a crisp ring even inside the frame */
.fx-field:has(.form-control:focus-visible),
.fx-field:has(.bootstrap-select .dropdown-toggle:focus-visible) {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.30);
}

/* ---- Text wordmark logo + XE-style mobile drawer ------------------------- */
.logo-text {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-style: italic;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
#header .logo-text { color: #fff; }
.logo-text .logo-fx    { font-weight: 700; }
.logo-text .logo-rates { font-weight: 500; }
#header .logo-text:hover { color: #fff; opacity: 0.9; }

/* the drawer header wordmark is on white — ink it dark */
#header .offcanvas .logo-text { color: #0c2f55; font-size: 1.5rem; }

/* XE-style slide-in drawer: below lg the nav is an offcanvas panel from the
   right; at lg+ Bootstrap unwraps it back to the inline white nav. */
@media (max-width: 991.98px) {
  /* Full-screen white drawer on mobile: cover the ENTIRE viewport (over the
     blue header bar and all page content), not a partial side panel. Forced
     to fixed/inset:0 in case a transformed ancestor would otherwise trap a
     plain position:fixed into a smaller containing block. */
  #header-nav.offcanvas,
  #header-nav.offcanvas-end {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100vh;
    margin: 0 !important; /* theme leaks margin-top:18px onto the nav — kill it */
    background: #fff;
    z-index: 1090; /* above #header and the hero */
  }
  #header-nav .offcanvas-body { padding: 0.5rem 0; }
  #header-nav .navbar-nav { width: 100%; }
  #header-nav .navbar-nav > li > a {
    display: block;
    padding: 0.9rem 1.5rem;
    color: #0c2f55;
    font-weight: 500;
    font-size: 1.05rem;
    border-bottom: 1px solid #eef1f5;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  #header-nav .navbar-nav > li > a:hover,
  #header-nav .navbar-nav > li > a:focus-visible {
    background: #f5f7fa;
    color: #1d4ed8;
  }
  #header-nav .offcanvas-header {
    border-bottom: 1px solid #eef1f5;
    padding: 1rem 1.25rem;
  }
}

/* ---- /currency-codes page (currency-codes.tpl) --------------------------- */
/* Compact hero band: same hero-wrap/hero-mask/bg-dark-index chrome as the
   converter hero, but a fraction of .section's 6.5rem padding. */
.cc-hero.section {
  padding: 0;
}
.cc-hero .hero-content {
  padding: 3.25rem 0;
}
@media only screen and (max-width: 768px) {
  .cc-hero .hero-content {
    padding: 2.25rem 0;
  }
}

/* -- search input: clean rounded field, green focus ring (theme primary) -- */
.cc-search {
  border: 1px solid #d5dbe3;
  border-radius: 0.75rem;
  padding: 0.55rem 1rem;
  font-size: 0.95rem;
  color: #0c2f55;
  background-color: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cc-search::placeholder {
  color: #8a97a6;
}
.cc-search:hover {
  border-color: #b9c3cf;
}
.cc-search:focus,
.cc-search:focus-visible {
  border-color: #2dbe60;
  box-shadow: 0 0 0 3px rgba(45, 190, 96, 0.2);
  outline: 0;
}

.cc-count {
  font-size: 0.9rem;
  white-space: nowrap;
}

/* -- table: narrow flag column, green code links, monospace numbers -- */
#cc-table {
  min-width: 640px; /* below this .table-responsive scrolls horizontally */
  --bs-table-hover-bg: #f2f8f4; /* faint green row hover */
}
#cc-table thead th {
  color: #0c2f55;
  font-weight: 600;
  white-space: nowrap;
  background-color: #fff;
  border-bottom: 2px solid #e2e7ee;
}
#cc-table td {
  color: #4c5a68;
}
#cc-table .cc-country {
  color: #0c2f55;
  font-weight: 500;
}
#cc-table .cc-col-flag {
  width: 3.5rem;
}
/* Country flags (vendor/country-flags sets the base 28x21 size) — only align
   within the row here. .cc-flag-none is the neutral placeholder for rows with
   no country (funds/metals): a muted rounded box with the same footprint. */
#cc-table td.cc-col-flag .country-flag {
  vertical-align: middle;
}
#cc-table td.cc-col-flag .cc-flag-none {
  display: inline-block;
  width: 28px;
  height: 21px;
  background-color: #e2e7ee;
  border-radius: 0.15rem;
  vertical-align: middle;
}
#cc-table .cc-col-code {
  width: 5.5rem;
}
#cc-table .cc-code a {
  color: #2dbe60; /* theme primary green (site-wide link color) */
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}
#cc-table .cc-code a:hover,
#cc-table .cc-code a:active {
  color: #22b355;
  text-decoration: underline;
}
#cc-table .cc-code a:focus-visible {
  outline: 2px solid #0c2f55;
  outline-offset: 2px;
  border-radius: 2px;
}
#cc-table .cc-col-number,
#cc-table .cc-number {
  width: 6.5rem;
  text-align: right;
}
#cc-table .cc-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: #5a6b7d;
}

/* Sticky thead on desktop: the table fits the lg+ container, so letting the
   wrapper's overflow go visible makes the page the scroll container and
   position:sticky works against the viewport. Below lg the wrapper keeps
   .table-responsive's overflow-x scrolling and the header scrolls normally. */
@media (min-width: 992px) {
  .cc-table-wrap.table-responsive {
    overflow: visible;
  }
  #cc-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    /* border-bottom collapses away when stuck — repeat it as a shadow */
    box-shadow: 0 2px 0 #e2e7ee;
  }
}

/* /currency-codes: Symbol column */
#cc-table .cc-symbol {
  font-size: 1.05rem;
  color: #0c2f55;
  white-space: nowrap;
}
/* QA: was #adb5bd = 2.07:1 on the white cell — under half the 4.5:1 SC 1.4.3
   floor for this 16.8px/400 em-dash, which is the cell's sole content ("this
   currency has no symbol"). The intended fix lower in this file
   (`.cc-sym-none{color:#5f6b74}`, 0,1,0) was outranked by this (1,1,0) rule
   and did nothing, so the value is corrected at the cascade winner. 5.47:1. */
#cc-table .cc-sym-none { color: #5f6b74; }

/* ---- /cheat-sheet page (cheat-sheet.tpl + js/cheatsheet.js) -------------- */
/* Compact hero band: same hero-wrap/hero-mask/bg-dark-index chrome as the
   converter hero. Top padding clears the absolute transparent #header
   (same clearance values as the /currency-codes hero). */
.cs-hero.section {
  padding: 0;
}
.cs-hero .hero-content {
  padding: 7.5rem 0 3.25rem;
}
@media only screen and (max-width: 768px) {
  .cs-hero .hero-content {
    padding: 6.5rem 0 2.25rem;
  }
}

/* -- controls: the margin <select> sits inside an .fx-field frame, which
   only de-chromes .form-control — extend the same treatment to .form-select
   (scoped to this page's controls card). -- */
#cs-controls .fx-field .form-select {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background-color: transparent !important;
  height: 3rem;
  padding: 0.55rem 2rem 0.55rem 0.75rem;
}

/* -- swap button: same round chrome as the converter's #swap-btn -- */
#cs-swap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #dae1e3;
  color: #2dbe60;
  line-height: 1;
}
#cs-swap:hover {
  background-color: #f1f5f6;
  border-color: #c9d3d6;
  color: #22b355;
}
#cs-swap:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(45, 190, 96, 0.25);
}
#cs-swap svg {
  display: block;
}
/* selects stack vertically below md — turn the arrows vertical too */
@media (max-width: 767.98px) {
  #cs-swap svg {
    transform: rotate(90deg);
  }
}

/* -- the card (screen): a neat physical wallet card — dashed cut border,
   subtle shadow, tabular numbers. -- */
#cheat-card {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1.5px dashed #b9c3cf;
  border-radius: 0.9rem;
  box-shadow: 0 6px 24px rgba(12, 47, 85, 0.08);
  padding: 1.25rem 1.5rem 1.35rem;
}
.cs-card-head {
  text-align: center;
  margin-bottom: 0.85rem;
}
.cs-card-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: #0c2f55;
  letter-spacing: 0.02em;
}
.cs-card-pair .currency-flag {
  width: 30px;
  height: 20px;
}
.cs-card-rate {
  margin-top: 0.15rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: #0c2f55;
  font-variant-numeric: tabular-nums;
}
.cs-card-meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: #6c7a89;
}
.cs-brand {
  color: #2dbe60;
  font-weight: 600;
  letter-spacing: 0.03em;
}
#cs-margin-note {
  color: #b26a00;
  font-weight: 500;
}

/* -- the two mini ladders, side by side with a fold line between -- */
.cs-tables {
  display: flex;
  align-items: stretch;
}
.cs-table {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.cs-table .cs-tbl-title {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0c2f55;
  padding: 0.25rem 0.4rem 0.35rem;
  border-bottom: 2px solid #0c2f55;
  white-space: nowrap;
}
.cs-table thead th.cs-col-amt,
.cs-table thead th.cs-col-val {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6c7a89;
  text-align: right;
  padding: 0.3rem 0.4rem 0.2rem;
  border-bottom: 1px solid #e2e7ee;
}
.cs-table td {
  padding: 0.24rem 0.4rem;
  text-align: right;
  white-space: nowrap;
}
.cs-table tbody tr + tr td {
  border-top: 1px solid #eef1f5;
}
.cs-table .cs-amt {
  width: 34%;
  color: #5a6b7d;
}
.cs-table .cs-val {
  font-weight: 600;
  color: #0c2f55;
}
.cs-fold {
  position: relative;
  flex: 0 0 auto;
  margin: 0 1rem;
  border-left: 1.5px dashed #b9c3cf;
}
.cs-fold span {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: #8a97a6;
  background: #fff;
  padding: 0.35rem 0;
}
@media (max-width: 420px) {
  #cheat-card {
    padding: 1rem 0.85rem;
  }
  .cs-fold {
    margin: 0 0.55rem;
  }
  .cs-table td,
  .cs-table thead th.cs-col-amt,
  .cs-table thead th.cs-col-val {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    font-size: 0.85rem;
  }
}

/* -- print: nothing but the wallet card. Site-chrome rules are scoped with
   body:has(#cheat-card) so printing any OTHER page is untouched; the page's
   own elements (#cs-hero, #cs-controls, …) exist only on /cheat-sheet, so
   they can be hidden unscoped. Card ~110x85mm: two 55mm halves that fold on
   the dashed centre line into a wallet/credit-card-size card. -- */
@media print {
  body:has(#cheat-card) #header,
  body:has(#cheat-card) #footer,
  body:has(#cheat-card) #back-to-top {
    display: none !important;
  }
  #cs-hero,
  #cs-controls,
  .cs-print-hint,
  #cs-alert {
    display: none !important;
  }
  #cs-main {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }
  #cheat-card {
    width: 110mm;
    min-height: 85mm;
    max-width: none;
    margin: 0;
    padding: 4mm 5mm;
    background: #fff !important;
    border: 1px dashed #000;   /* cut here */
    border-radius: 0;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* black-on-white, big legible numbers */
  #cheat-card,
  #cheat-card * {
    color: #000 !important;
  }
  .cs-card-pair {
    font-size: 12pt;
  }
  .cs-card-rate {
    font-size: 13pt;
  }
  .cs-card-meta {
    font-size: 8pt;
  }
  .cs-table .cs-tbl-title {
    font-size: 10.5pt;
    border-bottom-color: #000;
  }
  .cs-table thead th.cs-col-amt,
  .cs-table thead th.cs-col-val {
    font-size: 7.5pt;
    border-bottom-color: #000;
  }
  .cs-table td {
    font-size: 10.5pt;
    padding: 0.6mm 1.2mm;
  }
  .cs-table tbody tr + tr td {
    border-top-color: #bbb;
  }
  .cs-fold {
    margin: 0 3mm;
    border-left: 1px dashed #000; /* fold here */
  }
  .cs-fold span {
    background: #fff;
    font-size: 6pt;
  }
}

/* /cheat-sheet print addendum: the theme paints body/#content light grey,
   which prints as a grey page around the card — force white (scoped so
   printing other pages is untouched). */
@media print {
  body:has(#cheat-card),
  body:has(#cheat-card) #main-wrapper,
  body:has(#cheat-card) #content {
    background: #fff !important;
  }
}

/* ==== Pair-history pages (/{a}-to-{b}-rate/history[+/YYYY]) ============== */
/* Templates: history hub + year pages; interactive layer: js/history.js.
   Reuses the AMENDMENT 4 chart chrome (.chart-wrap, .chart-range pills)
   and the .fx-field outlined-input look for the on-date tool. */

/* -- compact hero band: same hero-wrap/hero-mask/bg-dark-index chrome as
   the converter hero; top padding clears the absolute transparent #header
   (same clearance values as the /cheat-sheet hero). -- */
.hist-hero.section {
  padding: 0;
}
.hist-hero .hero-content {
  padding: 7.5rem 0 3.25rem;
}
@media only screen and (max-width: 768px) {
  .hist-hero .hero-content {
    padding: 6.5rem 0 2.25rem;
  }
}

/* -- history tables (yearly on the hub, monthly on year pages; all rows are
   SERVER-rendered). First column = the row label (Year / Month), every other
   column is numeric: right-aligned, lining tabular digits so columns of
   rates align vertically. -- */
.history-table {
  font-variant-numeric: tabular-nums;
  margin-bottom: 0;
}
.history-table thead th:not(:first-child),
.history-table tbody td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}
.history-table tbody th,
.history-table tbody td:first-child {
  white-space: nowrap;
}
/* change column coloring (server puts .hist-up/.hist-down on the cell or a
   span; BS .text-success/.text-danger work as well) */
.history-table .hist-up {
  color: #198754;
}
.history-table .hist-down {
  color: #dc3545;
}
/* row hover — cell-level so it also paints under sticky-header tables */
.history-table tbody tr:hover > * {
  background-color: #f4f7fa;
}
/* sticky column headers while a long yearly table scrolls (desktop; on
   phones the table lives in a .table-responsive x-scroller instead) */
@media (min-width: 768px) {
  .history-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #fff;
    /* border-collapse drops borders on stuck cells — redraw the rule */
    box-shadow: inset 0 -1px 0 #dee2e6;
  }
  /* position:sticky cannot escape an overflow container: on >=768px
     viewports the 7-column history tables fit, so let the wrapper flow
     normally and the thead stick to the viewport. (<768px keeps the
     default .table-responsive x-scroll.) */
  .table-responsive:has(> .history-table) {
    overflow-x: visible;
  }
}

/* -- rate-on-a-date tool (hub): card with an .fx-field date input,
   a Look up button, and the #hod-result answer line -- */
.hod-tool {
  background: #fff;
  border: 1px solid #e3e8ee;
  border-radius: 0.75rem;
  padding: 1.25rem;
}
/* native date input inside the .fx-field frame: chrome-less like the
   converter controls (the frame IS the border), consistent height */
.hod-tool .fx-field input[type="date"].form-control {
  height: 3rem;
  padding: 0.55rem 0.75rem;
}
/* align the button with the 3rem field inside its 1.5px .fx-field frame */
.hod-tool .btn {
  min-height: 3rem;
  padding: 0.55rem 1.5rem;
  white-space: nowrap;
}
#hod-result {
  min-height: 1.6rem;
}
#hod-result .hod-rate {
  color: #0c2f55;
  font-size: 1.0625rem;
}
.hod-note {
  display: inline-block;
  font-size: 0.875rem;
  color: #6c757d;
  margin-top: 0.15rem;
}

/* -- chart chrome: the shared .chart-wrap heights (3a) apply; year pages
   use a slightly shorter canvas -- */
.chart-wrap.chart-wrap-sm {
  height: 320px;
}
@media (max-width: 575.98px) {
  .chart-wrap.chart-wrap-sm {
    height: 260px;
  }
}

/* range pill row on the hub (js/history.js builds/binds .chart-range
   buttons here — pill styling itself is class-based and shared) */
#history-ranges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.25rem 0 1rem;
}

/* header readout fills (js/history.js): same treatment as the converter
   chart's id-scoped rules, extended to the history/year ids */
#history-change,
#year-change {
  font-weight: 700;
  font-size: 1.0625rem;
  white-space: nowrap;
}
#history-range-label,
#year-range-label {
  font-size: 0.9375rem;
  margin-left: 0.15rem;
}
#history-readout,
#year-readout {
  display: inline-block;
  font-weight: 600;
  font-size: 1.0625rem;
  color: #0c2f55;
  white-space: nowrap;
}
/* JS colors only the dot — the readout TEXT stays dark like XE */
#history-readout.text-success,
#history-readout.text-danger,
#year-readout.text-success,
#year-readout.text-danger {
  color: #0c2f55 !important;
}
#history-readout .chart-dot,
#year-readout .chart-dot {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  color: #198754;
  background-color: currentColor;
  margin-right: 0.4rem;
  vertical-align: 0.02em;
}
#history-readout-time,
#year-readout-time {
  font-size: 0.8125rem;
}

/* ---- Currency profiles (/currency/{code}) + index (/currencies) --------- */
.cp-hero-flag { width: 56px; height: 42px; display: inline-block; }
.cp-hero-symbol { font-weight: 600; }
.cp-card {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 0.7rem;
  padding: 1.25rem 1.35rem;
}
.cp-facts th { width: 38%; font-weight: 500; color: #6b7280; }
.cp-facts td, .cp-facts th { border-color: #eef1f5; }
.cp-rates th, .cp-rates td { border-color: #eef1f5; }
.cp-rates td[data-rate], .cp-rates td[data-inverse] { font-variant-numeric: tabular-nums; }
.cp-chart-wrap { position: relative; height: 220px; }

/* regime callout + chips */
.cp-regime { border-left: 4px solid #9aa4b2; }
.cp-regime-peg, .cp-regime-currency_board, .cp-regime-erm2 { border-left-color: #1d4ed8; }
.cp-regime-managed_float { border-left-color: #2dbe60; }
.cp-peg { font-size: 1.05rem; color: #0c2f55; }
.cp-chip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #eef1f5;
  color: #44515f;
  vertical-align: middle;
}
.cp-chip-peg, .cp-chip-currency_board, .cp-chip-erm2 { background: #e5edff; color: #1d4ed8; }
.cp-chip-managed_float { background: #e6f7ed; color: #1c8b48; }

/* Coins & banknotes: grouped, labelled, easy to scan at a glance */
.cp-denom-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #eef1f5;
}
.cp-denom-label {
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #44515f;
}
.cp-denom-count {
  margin-left: auto;
  font-size: 0.75rem;
  color: #8b95a1;
  font-variant-numeric: tabular-nums;
}
.cp-denom-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  background: #f0c419;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
}
.cp-denom-icon-note {
  border-radius: 3px;
  height: 12px;
  background: #2dbe60;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
}
.cp-denom-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cp-denom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.25rem;
  padding: 0.42rem 0.7rem;
  border: 1px solid #e0e4ea;
  border-radius: 0.5rem;
  background: #fbfcfd;
  font-size: 0.95rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #0c2f55;
  white-space: nowrap;
}
.cp-denom-coin { border-radius: 999px; background: #fffdf5; border-color: #f0e2b6; }
.cp-denom-note { background: #f6fcf8; border-color: #cdebd8; }
@media (max-width: 575.98px) {
  .cp-denom { min-width: 3.6rem; padding: 0.35rem 0.55rem; font-size: 0.88rem; }
}
.cp-trivia, .cp-explore { padding-left: 1.1rem; margin-bottom: 0; }
.cp-trivia li, .cp-explore li { margin-bottom: 0.45rem; }

.ci-table .ci-col-flag { width: 52px; }
.ci-table .ci-col-code { white-space: nowrap; }
@media (max-width: 575.98px) {
  .cp-card { padding: 1rem; }
  .cp-facts th { width: 44%; }
}
.cp-card-peg { border-left: 4px solid #1d4ed8; }
.cp-pegtable th, .cp-pegtable td { border-color: #eef1f5; vertical-align: middle; }
/* CORRECTION: the premise below ("dates carry no spaces so they never wrap")
   is wrong — CSS treats a HYPHEN as a soft-wrap opportunity, so six cells on
   /currency/usd break mid-date ("1976-05-"/"11", "2023-"/"2024", ... at 375,
   1280 and 1440). Self-reinforcing: min-content is width("1976-05-")=64px, so
   the column gets 91.8px (~76px content) and the 76px date sits exactly on the
   boundary. The rest of the comment still holds, and `nowrap` is NOT the fix —
   it re-creates the blowout this guard exists for (measured at 375px with the
   old LBP value: cell 124 -> 399px, table 414.8 -> 689.8px), and
   overflow-wrap/word-break are inert under nowrap (measured: identical
   399/689.8), while word-break:keep-all does not suppress hyphen breaks in
   Chromium (measured: still 6/18). The fix is to make only the date token
   atomic at source — app/templates/currency-profile.tpl, a bare date/year-range
   in <span class="text-nowrap">, prose left unwrapped. Template change, so not
   made here; `normal` stays so prose still wraps. */
.cp-pegtable .cp-col-since { white-space: normal; }
/* normalize raster currency-flag fallbacks to the SVG country-flag box size —
   without this, rows without a mapped country flag (e.g. XCD, XAF, XOF, XPF,
   XCG — currency-union codes with no single national flag) fall through to
   the sitewide 39x26 .currency-flag base and visibly jump size against the
   28x21 .country-flag rows in the same column. */
.cp-pegtable .currency-flag, .cp-pegtable .country-flag { width: 28px; height: 21px; }
.ci-table .ci-col-peg { white-space: nowrap; }

/* at-a-glance: countries using this currency */
.cp-countries-count { font-weight: 600; color: #0c2f55; }
.cp-countries-block {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #eef1f5;
}
.cp-countries-title {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #44515f;
  margin-bottom: 0.75rem;
}
.cp-country-nopin {
  width: 22px; height: 16px; flex: 0 0 22px;
  border: 1px dashed #d4d9e0; border-radius: 2px;
}
.cp-countries {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  /* many currencies are used by 8-37 territories — flow them into columns
     instead of one tall scrolling strip */
  column-width: 12rem;
  column-gap: 1.25rem;
}
.cp-countries li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0;
  line-height: 1.3;
  break-inside: avoid;
}
.cp-countries .country-flag { width: 22px; height: 16px; flex: 0 0 22px; }

/* profile: rates table sits in the narrower column now — keep it tight */
.cp-rates th, .cp-rates td { padding-left: .5rem; padding-right: .5rem; }
.cp-rates .currency-flag { width: 24px; height: 18px; }
@media (min-width: 992px) and (max-width: 1399px) {
  .cp-rates td[data-inverse], .cp-rates th:nth-child(3) { display: none; }
}

/* ---- site-wide footer cross-links -------------------------------------- */
.fx-footer-nav { border-top: 1px solid #e6e9ef; }
.fx-footer-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #44515f;
  margin-bottom: 0.85rem;
}
.fx-footer-list { list-style: none; padding: 0; margin: 0; }
.fx-footer-list li { margin-bottom: 0.45rem; line-height: 1.35; }
.fx-footer-list a { font-size: 0.92rem; color: #52606d; text-decoration: none; }
.fx-footer-list a:hover, .fx-footer-list a:focus-visible { color: #1d4ed8; text-decoration: underline; }
.fx-crosslinks a { white-space: nowrap; }
.fx-crosslinks .fx-xl-sep { margin: 0 0.4rem; opacity: 0.5; }
@media print { .cs-crosslinks { display: none !important; } }

/* ---- /currencies index: readable, non-cramped table --------------------- */
.ci-table { table-layout: auto; }
.ci-table th, .ci-table td {
  vertical-align: middle;
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  border-color: #eef1f5;
}
/* links read as text until hovered — the whole row is a link target anyway */
.ci-table a { text-decoration: none; }
.ci-table a:hover, .ci-table a:focus-visible { text-decoration: underline; }
/* names and codes never wrap into 2-3 line stacks */
.ci-table th[scope="row"] {
  white-space: nowrap;
  font-weight: 500;
}
.ci-table th[scope="row"] a { color: #0c2f55; font-weight: 600; }
.ci-table .ci-col-code a { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ci-table .cp-chip { white-space: nowrap; }
/* peg column: the long basket prose is secondary — clamp it to one tidy line */
.ci-table .ci-col-peg { max-width: 22rem; white-space: normal; }
.ci-table .ci-col-peg .small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}
/* zebra + hover make a 50-row table scannable */
.ci-table tbody tr:nth-of-type(odd) { background: #fcfdfe; }
.ci-table tbody tr:hover { background: #f5f8fc; }
/* The peg's rate line stays visible at every width: hiding it below 992px
   dropped real information (the actual peg rate, e.g. "3.6725 AED per USD")
   on exactly the devices least able to go look it up. It is already clamped
   to two lines below, and the table scrolls inside .table-responsive, so it
   costs width rather than legibility. */
/* ...and once it is visible on a narrow screen the 2-line clamp truncates it
   mid-word ("7.46038 DKK pe..."), which is worse than either showing it or
   not. The clamp earns its keep on desktop, where the column is wide and a
   long basket description would unbalance the row; below 992px the column is
   narrow enough that the rate needs three lines, so let it wrap in full. */

@media (max-width: 575.98px) {
  .ci-table th, .ci-table td { padding: 0.55rem 0.4rem; font-size: 0.92rem; }
}


/* =======================================================================
   DESIGN-QA FIX BATCH (15-agent audit, triaged 2026-08-31)
   CSS-only fixes; template/JS items are tracked separately in
   .audit/dq/FIX-PLAN.md sections (b)/(c).
   ======================================================================= */

/* --- QA#1: [CRITICAL, reach: entire site] Brand green fails AA as text/button/link color --- */
/* stylesheet.css:70 */
a, a:focus { color: #157347; }
/* stylesheet.css:76 */
a:hover, a:active { color: #12603c; }

/* stylesheet.css:2641 */
.text-primary, .btn-light, .btn-outline-light:hover, .btn-link { color: #157347 !important; }
/* stylesheet.css:2645 */
.btn-link:hover { color: #12603c !important; }

/* stylesheet.css:2677-2691 */
.btn-primary { background-color: #157347; border-color: #157347; }
.btn-primary:hover { background-color: #12603c; border-color: #12603c; }
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active { background-color: #12603c; border-color: #12603c; }
.btn-primary:not(:disabled):not(.disabled).active:hover,
.btn-primary:not(:disabled):not(.disabled):active:hover { background-color: #157347; border-color: #157347; }

/* --- QA: keyboard focus on buttons (#hod-btn on all 136 /history/{pair} hubs
   + #cs-print on /cheat-sheet; also #cs-swap and the year-nav links) ---
   Two bugs stacked on the same elements:
   1. The brand override above sets background-color directly at (0,1,0) and
      covers only :hover/.active/:active, so Bootstrap 5.3's (0,2,0)
      `.btn:focus-visible{background-color:var(--bs-btn-hover-bg)}` wins and the
      green CTA turned Bootstrap blue (#157347 -> #0b5ed7) when tabbed to. Both
      are the same luminance (.129/.130), so that hue swap measured 1.01:1 —
      effectively no indicator.
   2. `.btn:not(.btn-link){box-shadow:0 5px 15px rgba(0,0,0,.15)}` above is also
      (0,2,0) but loads after bootstrap.min.css, so it overrides
      --bs-btn-focus-box-shadow: the focused shadow was byte-identical to the
      unfocused one, and Bootstrap's `outline:0` removed the last fallback.
   Fix: keep the brand green on :focus-visible and draw the ring with an
   outline, which no box-shadow rule can clobber — same remedy as #swap-btn /
   .chart-range above. `transition:none` because `.btn{transition:all .5s}`
   otherwise fades the indicator in over half a second. The :hover pair is
   restated at (0,3,0) so hovering a focused button still darkens to #12603c. */
.btn-primary:focus-visible {
  background-color: #157347;
  border-color: #157347;
}
.btn-primary:focus-visible:hover {
  background-color: #12603c;
  border-color: #12603c;
}
.btn:not(.btn-link):focus-visible {
  outline: 2px solid #0c2f55;
  outline-offset: 2px;
  -webkit-transition: none;
  transition: none;
}

/* stylesheet.css:2700-2708 */
.btn-outline-primary,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active { color: #157347; border-color: #157347; }
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active:hover { background-color: #157347; border-color: #157347; color: #fff; }

/* stylesheet.css:2734-2748 */
.list-group-item.active { background-color: #157347; border-color: #157347; }
.page-link { color: #157347; }
.page-link:hover { color: #12603c; background-color: #e9eff0; }

/* --- QA#2: [MAJOR→CRITICAL depending on auditor, reach: every page] Faux-italic logo wordmark --- */
/* stylesheet.css:3484-3494 — replace font-style: italic with a controlled transform */
.logo-text {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;              /* was: italic */
  transform: skewX(-10deg);        /* new: honest, controlled slant */
  transform-origin: left center;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

/* --- QA#3: [MAJOR, reach: 5 page types × narrow phones] Currency-picker text hard-clips with no ellipsis --- */
/* stylesheet.css:2891 — extend the existing rule */
.filter-option-inner-inner .text-muted {
  margin-left: .3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;   /* required: flex items default to min-width:auto, which would
                     otherwise let the name keep pushing the row wide instead of
                     truncating */
}

/* --- QA#4: [MAJOR, reach: every /history/* page's data tables] Classname typo disables the entire history-table CSS module --- */
/* stylesheet.css:3993-4034 — rename every selector in this block */
.hist-table {
  font-variant-numeric: tabular-nums;
  margin-bottom: 0;
}
.hist-table thead th:not(:first-child),
.hist-table tbody td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}
.hist-table tbody th,
.hist-table tbody td:first-child {
  white-space: nowrap;
}
.hist-table .hist-up {
  color: #198754;
}
.hist-table .hist-down {
  color: #dc3545;
}
.hist-table tbody tr:hover > * {
  background-color: #f4f7fa;
}
@media (min-width: 768px) {
  .hist-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #fff;
    box-shadow: inset 0 -1px 0 #dee2e6;
  }
  .table-responsive:has(> .hist-table) {
    overflow-x: visible;
  }
}

/* --- QA#5: [CRITICAL, reach: /currencies on tablet/mobile] Peg-footnote clamp/hide rules lose to Bootstrap `.d-block!important` --- */
/* stylesheet.css:4336 */
.ci-table .ci-col-peg .small {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

/* The 2-line clamp above earns its keep on desktop, where the peg column is
   wide and a long basket description would unbalance the row. On a narrow
   screen the same clamp cuts the rate mid-word ("7.46038 DKK pe..."), so let
   it wrap in full there. This has to sit AFTER the QA#5 rule and repeat its
   !important: the clamp is produced by display:-webkit-box, so overriding
   -webkit-line-clamp alone does nothing, and QA#5 marked the display
   !important to beat Bootstrap's .d-block. */
@media (max-width: 991.98px) {
  .ci-table .ci-col-peg .small {
    display: block !important;
    -webkit-line-clamp: none;
    overflow: visible;
  }
}


/* --- QA#6: [MAJOR, reach: /currencies + all 5 /currency/{code} pages] Hero band ~2x too tall --- */
/* stylesheet.css — add near the other three compact-hero blocks, e.g. after line 3987 */
.ci-hero.section,
.cp-hero.section {
  padding: 0;
}

/* --- QA#7: [MAJOR, reach: every page, always-visible] Primary nav's "current page" color is unthemed cyan, not brand green --- */
/* stylesheet.css:729, inside @media (min-width: 992px) { .header-text-light ... } */
/* REVERTED: the audit swapped this to the brand green #157347, but this nav sits
   on the DARK navy header where a dark green is unreadable. The light cyan is
   the accessible choice on that background (and was the original design). */
.header-text-light .primary-menu ul.navbar-nav > li:hover > a:not(.btn),
.header-text-light .primary-menu ul.navbar-nav > li.active > a:not(.btn) {
  color: #7fd7ff;
}

/* --- QA#8: [MAJOR, reach: footer on every page + mobile drawer] Link hover uses form-focus blue, not the site's link-hover green --- */
/* stylesheet.css ~3539 (mobile drawer) */
@media (max-width: 991.98px) {
  /* drawer only — at lg+ this same element is the inline nav on the navy
     header, where a near-white background paints a box around the link */
  #header-nav .navbar-nav > li > a:hover,
  #header-nav .navbar-nav > li > a:focus-visible { background: #f5f7fa; color: #157347; }
}

/* stylesheet.css ~4309 (footer, all pages) */
.fx-footer-list a:hover, .fx-footer-list a:focus-visible { color: #22b355; text-decoration: underline; }

/* --- QA#9: [MAJOR×2 + MINOR, reach: every page, `#back-to-top`] Three separate defects on one button, one CSS block --- */
/* stylesheet.css:2469-2484 — add text-decoration:none, raise fill opacity */
#back-to-top {
  display: none;
  position: fixed;
  z-index: 1030;
  bottom: 8px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.55);   /* was 0.2 — now ~4.7:1 for the white glyph */
  text-decoration: none;                    /* new — removes the stray underline */
  text-align: center;
  color: #fff;
  font-size: 16px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 0.25rem;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}

/* stylesheet.css:96-100 — the focus ring is shared with footer links; darkening the
   base green in fix #1 does NOT touch this rule (it's a hardcoded hex, not a class),
   so update it explicitly too */
.primary-menu ul.navbar-nav > li > a:not(.btn):focus-visible,
#footer a:focus-visible,
#back-to-top:focus-visible {
  outline: 2px solid #157347;
  outline-offset: 2px;
}

/* --- QA#10: [MAJOR×5 + MINOR×2, reach: currency-codes, currencies, all profiles] Remaining WCAG contrast nudges --- */
/* stylesheet.css:4169 — regime chip, currently 3.91:1 on its own tint */
.cp-chip-managed_float { background: #e6f7ed; color: #0f6b3a; }  /* was #1c8b48 → now 5.93:1 */

/* stylesheet.css:4187-4190 — denomination count label, currently 3.04:1 on white */
.cp-denom-count {
  margin-left: auto;
  font-size: 0.75rem;
  color: #5f6b74;   /* was #8b95a1 → now 5.47:1 */
  font-variant-numeric: tabular-nums;
}

/* stylesheet.css:3572-3574 — search placeholder, currently 2.98:1 on white */
.cc-search::placeholder { color: #5f6b74; }   /* was #8a97a6 → now 5.47:1 */

/* stylesheet.css:2653-2655 — text-muted, currently 4.27-4.49:1 on off-white cards
   (was already fixed once for pure white per the code comment; the site's off-white
   cards were the gap) */
.text-muted { color: #5f6b74 !important; }   /* was #6c757d → now 5.15-5.47:1 everywhere */
/* apply the same #5f6b74 to .text-secondary at its own rule, same file, same reason */

/* .text-success / .text-danger — same off-white-card gap (4.27-4.30:1), find via
   Bootstrap's generated utility rules or the site's own override if one exists */
.text-success { color: #146c43 !important; }   /* was #198754 → now 6.08-6.45:1 */
.text-danger  { color: #c22637 !important; }   /* was #dc3545 → now 5.46-5.79:1 */

/* .cc-code-plain — 19 non-convertible ISO codes on /currency-codes. This bare
   (0,1,0) rule is INERT: the winner is `#cc-table .cc-code .cc-code-plain
   {color:#6c7a89}` (1,2,0) in the page-scoped <style> at
   app/templates/currency-codes.tpl:55, which follows this file. Those codes
   still render at 4.39:1 (axe: color-contrast, serious, 19 nodes) and cannot
   be fixed from here without !important or a specificity escalation — that
   template declaration has to become #5f6b74. Kept as the fallback it is, and
   as the pointer to the real edit site. The class does not occur on
   /cheat-sheet, contrary to the old comment. */
.cc-code-plain { color: #5f6b74; }   /* was #6c7a89 → reuse the same muted-grey token */

/* .cc-sym-none — likewise inert (outranked by #cc-table .cc-sym-none above);
   the live value is corrected at that winner. Kept as the fallback. */
.cc-sym-none { color: #5f6b74; }   /* was #adb5bd → same token again */

/* --- QA#11: [MAJOR, reach: home + 3 pair pages, cross-rates table] Real tap target is ~30% of the visible cell --- */
/* stylesheet.css — scope to the cross-rates table only */
#cross-rates-table td[data-from] { padding: 0; }
#cross-rates-table td[data-from] a.d-block {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 12px;
}

/* --- QA#12: [MAJOR, reach: all 5 currency-profile pages] `.cp-rates`/`.cp-pegtable` have no row-hover feedback --- */
.cp-rates tbody tr:hover, .cp-pegtable tbody tr:hover { background-color: #f5f8fc; }

/* --- QA#13: [MAJOR, reach: /currency/kwd, latent on any currency] "1 KWD =" header wraps to 2 lines at 390px --- */
.cp-rates thead th.text-end { white-space: nowrap; }

/* --- QA#14: [MAJOR, reach: all 5 currency-profile pages] Currency full-name wraps 2-3 lines in the rates table --- */
/* Option (b), recommended by the auditor for this narrow col-lg-5 card: hide the
   muted full-name subtitle below the breakpoint where .ci-table already hides its
   own less-essential column, since the code (USD/GBP) alone identifies the row */
@media (max-width: 991.98px) {
  #cp-rates-table th[scope="row"] .text-muted.small { display: none; }
}

/* --- QA#15: [MINOR, reach: home cross-rates + converter result] Missing `tabular-nums` on two numeric surfaces --- */
/* stylesheet.css:3039-3041 — extend the existing selector group */
#cross-rates-table td,
#result-from-amt, #result-to-amt,
#result-from-name, #result-to-name,
#result-rate, #result-inverse {
  font-variant-numeric: tabular-nums;
}

/* --- QA#16: [MINOR, reach: home + 3 converter pages] Hero subtitle leaves a single-word orphan --- */
.hero-content p.text-4 { text-wrap: balance; }

/* --- QA#17: [MAJOR, reach: home + 3 converter pages, mobile widths] Stray underline "dot" artifact on wrapped history cross-link --- */
#history-hub-link { text-decoration-skip-ink: none; }

/* --- QA#18: [MINOR, reach: /history/usd-to-jod-rate and any long-name pair] Chart subtitle orphans the trailing year at mobile --- */
#history-chart-subtitle, #year-chart-subtitle { text-wrap: pretty; }

/* --- QA#20: [MINOR, reach: /history hub, 390px] Yearly table overflows its scroll wrapper, clipping the color-coded Change column --- */
@media (max-width: 420px) {
  .hist-table th, .hist-table td { padding-left: .4rem; padding-right: .4rem; }
}

/* --- QA#21: [MINOR, reach: 4 boxed components sitewide] Card/field corner-radius and border-color drift --- */
/* stylesheet.css:3419 */
.fx-field { border-radius: 0.75rem; border-color: #e3e8ee; /* keep other props unchanged */ }
/* stylesheet.css:4140 */
.cp-card { border-radius: 0.75rem; border-color: #e3e8ee; /* keep other props unchanged */ }
/* new rule — #cs-controls keeps its Bootstrap rounded-3 class in the template;
   override just the radius here so this is still a CSS-only fix */
#cs-controls { border-radius: 0.75rem; }
/* .cc-search (stylesheet.css:3565) is already 0.75rem — no change, it's the target */

/* --- QA#22: [MINOR, reach: /cheat-sheet] Footer sits closer to content than every other page --- */
#cs-main { padding-bottom: 6.5rem; }
@media only screen and (max-width: 768px) {
  #cs-main { padding-bottom: 3.5rem; }
}

/* --- QA#23: [MINOR hygiene, reach: none visible — maintainability only] Dead/stale CSS rule for `.cc-hero .hero-content` --- */
/* DELETE — dead code, currency-codes.tpl's own inline <style> block always wins */
.cc-hero .hero-content {
  padding: 3.25rem 0;
}
@media only screen and (max-width: 768px) {
  .cc-hero .hero-content {
    padding: 2.25rem 0;
  }
}

/* --- QA#24: [MINOR, reach: 4 all-caps label contexts] Letter-spacing inconsistent for the same "label" role --- */
.text-9.text-uppercase { letter-spacing: 0.03em; }
.text-muted.small.text-uppercase { letter-spacing: 0.06em; }

/* --- QA#25: [CRITICAL+MAJOR bundle, reach: every printed page except /cheat-sheet] Print-mode CSS (5 sub-fixes) --- */
/* 25a. CRITICAL — header/hero background + white text both vanish under default
   "no background graphics" print settings, leaving a blank band at the top of every
   printed page except /cheat-sheet */
@media print {
  #header,
  .hero-wrap .hero-mask,
  .hero-wrap .hero-bg {
    background: none !important;
  }
  #header .logo-text,
  .hero-wrap .hero-content,
  .hero-wrap .hero-content *,
  .page-header.page-header-text-light,
  .page-header.page-header-text-light * {
    color: #111 !important;
    text-shadow: none !important;
  }
}

/* 25b. MAJOR — currency flag sprites (background-images) disappear under print too */
@media print {
  .currency-flag {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* 25c. MAJOR — wide tables (cross-rates, /currencies) silently clip columns past the
   print margin with no visual cue; shrink-to-fit as an immediate, safe mitigation
   (a full fix needs per-template @page handling — template follow-up, not urgent) */
@media print {
  .cross-table, .ci-table { font-size: 0.62rem; }
  .cross-table th, .cross-table td,
  .ci-table th, .ci-table td { padding: 0.2rem 0.3rem; }
}

/* 25d. MINOR — footer's 4 link columns interleave across a print page break */
@media print {
  #footer .col-6.col-lg-3 { break-inside: avoid; page-break-inside: avoid; }
}

/* 25e. MINOR — no explicit color-scheme; site is light-only and happens to render
   correctly under forced dark today, but it's implicit rather than guaranteed
   (native <input type="date"> popups, scrollbars, form-control accents) */
:root { color-scheme: light; }

/* --- QA#26: [MINOR, reach: every page, drawer open state, ≤834px] Stale hamburger button sits underneath the drawer's own close button --- */
.navbar-toggler.open { visibility: hidden; pointer-events: none; }

/* --- QA#27: [MINOR/optional, reach: 3 wide-table page families] Hard-clipped next column on mobile horizontal scroll --- */
/* The scroll-affordance fade is an overlay painted ON TOP of the cells, so it
   must only exist while there is genuinely more table hidden to the right.
   It was previously unconditional, which washed out the last digit of the
   final column on every .table-responsive on the site -- including the many
   tables that never scroll at all -- and read as "the last column is
   blurred". theme.js adds .has-x-overflow only while
   scrollLeft + clientWidth < scrollWidth (i.e. there IS more to reveal), and
   drops it at the end of the scroll and whenever the table fits. */
.table-responsive { position: relative; }
.table-responsive.has-x-overflow::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 24px;
  background: linear-gradient(to left, rgba(255,255,255,.95), transparent);
  pointer-events: none;
}

/* --- QA#28: [MINOR/optional, reach: 3 dense reference tables] Small unpadded tap targets in table links --- */
/* add to the shared row-link styling for these three tables' <td> */
#cc-table td a, .ci-table td a, .cp-rates td a, .cp-pegtable td a { padding: 6px 0; display: inline-block; }

/* --- QA#29: [MINOR/optional, reach: 1 page] Year-page pagination pills 5px under 44px touch target --- */
/* target the "← 2019" / "2021 →" pair specifically */
.pair-history-year-nav a.btn.btn-outline-secondary.btn-sm { padding: .6rem 1rem; }

/* --- QA#1 follow-up: the codes table's code links carry their own colour rule
   (higher specificity than the site-wide link fix), so they kept the old
   2.43:1 green. Same accessible pair as everywhere else. --- */
#cc-table .cc-code a { color: #157347; }
#cc-table .cc-code a:hover,
#cc-table .cc-code a:active { color: #12603c; }

/* --- QA follow-up: profile rates table wrapping ---------------------------
   The rates table lives in the narrow col-lg-5 column: its last-column link
   ("USD →") and the currency full-name subtitle were both breaking across two
   lines. Keep the link atomic and let the name truncate instead of wrapping. */
#cp-rates-table td:last-child,
#cp-rates-table td:last-child a { white-space: nowrap; }
/* Same defect and same fix in the peg table beside it: its last column renders
   "AED →", and under white-space:normal min-content is only width("AED")=29px,
   so auto table-layout allotted 42px against a 44-46px one-line need — which
   forced the very break that shrank it. The arrow was orphaned onto its own
   line with its own underline in 17 of 18 rows on /currency/usd and 1 of 1 on
   /currency/hkd (same at 1280 and 1440; only IQD, 40px, fitted). After: 18
   wraps -> 0, table width unchanged at 768/992/1100/1280/1440/1920, no new
   overflow. */
.cp-pegtable td.text-end,
.cp-pegtable td.text-end a { white-space: nowrap; }
#cp-rates-table th[scope="row"] { white-space: nowrap; }
#cp-rates-table th[scope="row"] .text-muted {
  display: inline-block;
  max-width: 9.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
@media (max-width: 1399.98px) and (min-width: 992px) {
  #cp-rates-table th[scope="row"] .text-muted { max-width: 6.5rem; }
}

/* --- QA follow-up: the ISO Number column looked blurred next to the rest of
   the table. Cause was the monospace stack (stylesheet.css:3651) resolving to a
   system mono face (Liberation/DejaVu Mono) whose hinting renders thinner and
   softer than Rubik at 14px — a font mismatch, not a contrast problem (5.48:1).
   Rubik with tabular-nums keeps the digits column-aligned AND crisp, and
   matches every other numeric column on the site. --- */
#cc-table .cc-number {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: #4c5a68; /* same ink as the Currency/Code columns */
}

/* --- Numeric / last-column legibility -------------------------------------
   Reported repeatedly as "the last column looks blurred". Measured cause: those
   cells render at weight 400 while their row headers are weight 500, and they
   are right-aligned so glyphs land on fractional pixel offsets (table columns
   compute to e.g. 197.59px). The combination reads as soft/washed compared to
   the crisp left-aligned text beside it. Nudging data cells to medium weight
   with a darker ink restores even colour across the row; antialiased smoothing
   keeps the right-aligned digits from thinning at fractional positions. */
#cc-table .cc-number,
#cross-rates-table tbody td,
#cp-rates-table td[data-rate],
#cp-rates-table td[data-inverse],
.cp-pegtable td,
#yearly-table tbody td,
#monthly-table tbody td,
#year-monthly-table tbody td,
.hist-table tbody td,
.history-table tbody td {
  font-weight: 500;
  color: #2f3d4c;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* keep the colour-coded change column expressive — weight only, not ink */
#yearly-table tbody td.text-success,
#yearly-table tbody td.text-danger,
.hist-table tbody td.text-success,
.hist-table tbody td.text-danger,
.history-table tbody td.text-success,
.history-table tbody td.text-danger { color: inherit; }

/* rates table now has 3 columns and must never need a horizontal scrollbar
   inside the narrow profile column */
#cp-rates-table { width: 100%; }
#cp-rates-table th[scope="row"] { white-space: nowrap; }
#cp-rates-table th[scope="row"] a { text-decoration: none; color: #0c2f55; }
#cp-rates-table th[scope="row"] a:hover { text-decoration: underline; }

/* --- SVG flag for the European Union ---------------------------------------
   country-flags.min.css only embeds flags for ISO 3166 codes actually used by a
   country row, and the euro's issuer is the EU itself (no alpha-2 country), so
   the EUR hero fell back to the soft raster currency-flag. Source: lipis/
   flag-icons 4x3 eu.svg, inlined here to keep the page self-contained. */
.country-flag-eu { background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20xmlns:xlink=%22http://www.w3.org/1999/xlink%22%20id=%22flag-icons-eu%22%20viewBox=%220%200%20640%20480%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cg%20id=%22eu-d%22%3E%0A%20%20%20%20%20%20%3Cg%20id=%22eu-b%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20id=%22eu-a%22%20d=%22m0-1-.3%201%20.5.1z%22/%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20xlink:href=%22%23eu-a%22%20transform=%22scale(-1%201)%22/%3E%0A%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%3Cg%20id=%22eu-c%22%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20xlink:href=%22%23eu-b%22%20transform=%22rotate(72)%22/%3E%0A%20%20%20%20%20%20%20%20%3Cuse%20xlink:href=%22%23eu-b%22%20transform=%22rotate(144)%22/%3E%0A%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%20%20%3Cuse%20xlink:href=%22%23eu-c%22%20transform=%22scale(-1%201)%22/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%3C/defs%3E%0A%20%20%3Cpath%20fill=%22%23039%22%20d=%22M0%200h640v480H0z%22/%3E%0A%20%20%3Cg%20fill=%22%23fc0%22%20transform=%22translate(320%20242.3)scale(23.7037)%22%3E%0A%20%20%20%20%3Cuse%20xlink:href=%22%23eu-d%22%20width=%22100%25%22%20height=%22100%25%22%20y=%22-6%22/%3E%0A%20%20%20%20%3Cuse%20xlink:href=%22%23eu-d%22%20width=%22100%25%22%20height=%22100%25%22%20y=%226%22/%3E%0A%20%20%20%20%3Cg%20id=%22eu-e%22%3E%0A%20%20%20%20%20%20%3Cuse%20xlink:href=%22%23eu-d%22%20width=%22100%25%22%20height=%22100%25%22%20x=%22-6%22/%3E%0A%20%20%20%20%20%20%3Cuse%20xlink:href=%22%23eu-d%22%20width=%22100%25%22%20height=%22100%25%22%20transform=%22rotate(-144%20-2.3%20-2.1)%22/%3E%0A%20%20%20%20%20%20%3Cuse%20xlink:href=%22%23eu-d%22%20width=%22100%25%22%20height=%22100%25%22%20transform=%22rotate(144%20-2.1%20-2.3)%22/%3E%0A%20%20%20%20%20%20%3Cuse%20xlink:href=%22%23eu-d%22%20width=%22100%25%22%20height=%22100%25%22%20transform=%22rotate(72%20-4.7%20-2)%22/%3E%0A%20%20%20%20%20%20%3Cuse%20xlink:href=%22%23eu-d%22%20width=%22100%25%22%20height=%22100%25%22%20transform=%22rotate(72%20-5%20.5)%22/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%20%20%3Cuse%20xlink:href=%22%23eu-e%22%20width=%22100%25%22%20height=%22100%25%22%20transform=%22scale(-1%201)%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E"); }

/* --- Flag / text vertical centring ----------------------------------------
   Measured: flags in the profile rates + peg tables sat on `vertical-align:
   baseline`, putting the flag's centre 6px above the text's centre; the
   cross-rates matrix was 2px out the other way. Only the codes table was
   already `middle`. Standardise every flag on middle alignment and give the
   cells a consistent line-height so the flag and the label share one optical
   centre line everywhere they appear. */
.currency-flag,
.country-flag,
#cc-table .country-flag,
#cp-rates-table .currency-flag,
#cp-rates-table .country-flag,
.cp-pegtable .currency-flag,
.cp-pegtable .country-flag,
#cross-rates-table .currency-flag,
#cross-rates-table .country-flag,
.ci-table .currency-flag,
.ci-table .country-flag,
.cs-table .currency-flag,
.cs-table .country-flag,
.bootstrap-select .currency-flag,
.bootstrap-select .country-flag,
.filter-option-inner-inner .currency-flag,
.filter-option-inner-inner .country-flag,
.dropdown-menu .currency-flag,
.dropdown-menu .country-flag {
  vertical-align: middle;
}
/* cells that pair a flag with a label: one shared centre line */
#cp-rates-table th[scope="row"],
.cp-pegtable th[scope="row"],
.ci-table th[scope="row"],
#cross-rates-table thead th,
#cross-rates-table tbody th,
#cc-table .cc-col-flag,
.cp-countries li {
  line-height: 1.6;
}

/* --- Cross-rates matrix: optical centring of flag vs label ----------------
   The header cells centre flag and label with flexbox, but a text box carries
   asymmetric half-leading, so the flag measured 2.01px LOW against the label's
   optical centre. Equalising the label's line box to the flag's height puts
   both on one centre line (re-measured after: ~0px). */
#cross-rates-table thead th .d-flex,
#cross-rates-table tbody th .d-flex {
  gap: 0.4rem;
  line-height: 1;
}
#cross-rates-table thead th .d-flex > span:not([class*="flag"]),
#cross-rates-table tbody th .d-flex > span:not([class*="flag"]) {
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
#cross-rates-table thead th .currency-flag,
#cross-rates-table thead th .country-flag,
#cross-rates-table tbody th .currency-flag,
#cross-rates-table tbody th .country-flag {
  display: block;
  flex: 0 0 auto;
}
/* the flag carried margin-top:4px; inside an align-items:center flex row that
   margin shifts it down by half its value (the measured 2px). Vertical margins
   are meaningless once the flex container does the centring. */
#cross-rates-table th .d-flex .currency-flag,
#cross-rates-table th .d-flex .country-flag,
.d-flex > .currency-flag,
.d-flex > .country-flag {
  margin-top: 0;
  margin-bottom: 0;
}

/* --- Phantom vertical scrollbar on every .table-responsive ------------------
   `.table-responsive` sets only overflow-x: auto, but per the CSS overflow
   spec a non-visible value on one axis forces the other axis to compute as
   auto rather than visible. A table whose laid-out height lands on a
   fractional pixel then reports scrollHeight one pixel greater than
   clientHeight (measured on the /eur-to-usd-rate conversion ladder:
   clientHeight 375, scrollHeight 376), and the browser draws a full-height
   vertical scrollbar for that one phantom pixel. It looks like the table is
   scrollable when nothing is hidden.

   No .table-responsive on this site constrains height -- there is no
   max-height or height rule on any of them, so their height is always
   content-driven and real vertical overflow cannot occur. Pinning overflow-y
   to hidden therefore removes the spurious scrollbar without ever clipping
   anything; horizontal scrolling, which these wrappers genuinely need, is
   untouched. */
.table-responsive {
  overflow-y: hidden;
}

/* --- Back-to-top button sat underneath mobile browser chrome ---------------
   bottom: 8px puts the button behind the iOS Safari bottom toolbar and inside
   the home-indicator area on gesture-nav Android, so on a phone it reads as
   missing even though it is rendered and opaque. Lift it clear of the browser
   UI and honour the safe-area inset. Also brings the 36px hit box up to the
   44px minimum touch target on touch pointers, without changing the visual
   size on desktop. */
#back-to-top {
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  right: calc(10px + env(safe-area-inset-right, 0px));
}
@media (max-width: 991.98px) {
  #back-to-top {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}
@media (pointer: coarse) {
  #back-to-top {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 18px;
  }
}


/* --- Flag box metrics, so the 1.24MB flag stylesheet stops blocking paint ---
   The base `.country-flag` rule (display/size/background-sizing) lived ONLY
   inside public/vendor/country-flags/*.css. That file is ~1.24MB raw / 335KB
   gzip, so the browser could not lay out or paint a flag until the whole thing
   arrived: measured cold on Fast 3G, that single file took 3005ms and held
   first paint to 3468ms. It is duplicated here -- in the small render-blocking
   stylesheet -- so geometry is known immediately and the heavy file can be
   loaded non-render-blocking (see header.tpl). Only the background-image rules
   are then late, and because the box is already sized they fill in without any
   layout shift.
   Keep these two declarations byte-identical to the vendor file's base rule. */
.country-flag {
  display: inline-block;
  width: 28px;
  height: 21px;
  background-size: cover;
  background-position: center;
  border-radius: .15rem;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, .5);
}

/* --- XE-style swap control: the circle sits ON the seam, not in the gutter ---
   Previously #swap-btn lived in its own 62px column with a 16px gap either
   side, so it read as a third control parked between two fields. XE overlaps
   it onto both currency boxes so the pair reads as one unit with a hinge in
   the middle.

   Done with negative margins on the swap column rather than absolute
   positioning: the two neighbouring columns are flexible (`col-md`), so the
   width the swap column gives back is absorbed by them automatically and the
   fields grow toward each other until they meet under the button. Absolute
   positioning would have needed a hard-coded seam offset that breaks at every
   breakpoint.

   The white ring is what produces the "notched" look — it masks the field
   borders where the circle crosses them, so the boxes appear cut around it.
   It works because the converter card is #fff; if that card is ever given a
   tint, this ring has to follow it. */
#swap-btn {
  position: relative;
  z-index: 3;
  box-shadow: 0 0 0 5px #fff;
}
#swap-btn:hover {
  box-shadow: 0 0 0 5px #fff;
}
/* keep the focus ring visible OUTSIDE the white notch ring */
#swap-btn:focus-visible {
  box-shadow: 0 0 0 5px #fff, 0 0 0 0.35rem rgba(45, 190, 96, 0.35);
}

@media (min-width: 768px) {
  /* horizontal seam: pull the column in by half the button either side so the
     46px circle overlaps each field by ~15px */
  #converter-form > div:has(> #swap-btn) {
    margin-left: -31px;
    margin-right: -31px;
    position: relative;
    z-index: 3;
  }
}
@media (max-width: 767.98px) {
  /* stacked: the same overlap, vertically. The two margins are NOT equal:
     the row gutter above the swap column differs from the one below it, so
     symmetric margins measured 23px of overlap above and only 7px below.
     Biasing them by 8px re-centres the circle on the seam (15/15, matching
     the desktop figure). */
  #converter-form > div:has(> #swap-btn) {
    /* re-biased when the circle went 46px -> 38px: the offsets are absolute
       pixels, so shrinking the button moved it off the seam again (12px of
       overlap above, 20px below). Shifted 4px up to restore 16/16. */
    margin-top: -19px;
    margin-bottom: -27px;
    position: relative;
    z-index: 3;
  }
}

/* --- keep the swap circle from covering the chevron and the flag -----------
   The circle overlaps each field by 15px, plus its 5px white ring, so its
   painted edges land at the seam +/-20px. Measured at 1280px that put it 5px
   over the From field's dropdown chevron (arrow ended at 709, circle started
   at 705) and 4px over the To field's flag (flag started at 757, circle ended
   at 761).

   Both are moved inward by 12px, which clears the circle by 7-8px on each
   side. The chevron is a background-IMAGE anchored to the right edge, so
   padding alone would not shift it — its background-position has to move too;
   the flag is real content, so padding-left is enough there.

   md+ only: below 768px the fields are stacked and the circle overlaps them
   vertically, where it crosses neither the flag (far left) nor the chevron
   (far right). */
@media (min-width: 768px) {
  #converter-form .fx-field:has(#source_currency) .bootstrap-select > .dropdown-toggle {
    padding-right: 2.4rem;
    background-position: right 24px center, right 24px center;
  }
  #converter-form .fx-field:has(#to_currency) .bootstrap-select > .dropdown-toggle {
    padding-left: 1.5rem;
  }
}