/* VAULEX ROUND 37 UI FIXES - loads last */

/* 1. Action buttons inside table cells: one row, one size, Renew primary */
#efPageContent:has(.efAccountMenu) td:has(> .efButton) .efButton,
#efPageContent:has(.efAccountMenu) td:has(> .efButton) a.efButton,
#efPageContent:has(.efAccountMenu) td:has(> .efButton) span.efButton,
#efPageContent:has(.efAccountMenu) td:has(> .efButton) input.efButton{
 float:none !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;
 vertical-align:middle !important;height:34px !important;min-height:34px !important;
 padding:0 18px !important;margin:4px 0 4px 8px !important;
 font:700 12.5px/1 Inter,Arial,sans-serif !important;border-radius:999px !important;white-space:nowrap !important}
#efPageContent:has(.efAccountMenu) td:has(> .efButton) .efButton:first-child{margin-left:0 !important}
#efPageContent:has(.efAccountMenu) td .efButton.efEditButton:not(.efRenewButton){
 background:rgba(148,163,184,.10) !important;color:#e2e8f0 !important;
 box-shadow:inset 0 0 0 1px rgba(148,163,184,.24) !important}
#efPageContent:has(.efAccountMenu) td .efButton.efEditButton:not(.efRenewButton):hover{
 background:rgba(56,189,248,.14) !important;color:#fff !important;
 box-shadow:inset 0 0 0 1px rgba(56,189,248,.45) !important}
#efPageContent:has(.efAccountMenu) td a.efRenewButton{background:#38bdf8 !important;color:#04121c !important;box-shadow:0 6px 18px rgba(56,189,248,.22) !important}
#efPageContent:has(.efAccountMenu) td a.efRenewButton:hover{background:#7dd3fc !important}

/* 2. My Details: heading, panel rhythm, field layout */
#efPageContent:has(.efAccountMenu) h2,#efPageContent:has(.efAccountMenu) h3{color:#fff !important}
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper>h2{
 font:800 26px/1.2 Inter,Arial,sans-serif !important;letter-spacing:-.02em !important;
 color:#fff !important;margin:0 0 18px !important;padding:0 !important}
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper>h2::after{
 content:'Your contact details, addresses and notification settings.';
 display:block;font:500 13.5px/1.5 Inter,Arial,sans-serif;color:#94a3b8;letter-spacing:0;margin-top:8px}
#efPageContent:has(.efAccountMenu) .efUserDetailsWrapper,
#efPageContent:has(.efAccountMenu) .efUserPostalAddressesWrapper,
#efPageContent:has(.efAccountMenu) .efUserEmailAddressesWrapper,
#efPageContent:has(.efAccountMenu) .efUserNumbersWrapper{margin:0 0 20px !important}
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper table{width:100% !important}
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper table td{padding:13px 20px !important;border-bottom:1px solid rgba(148,163,184,.10) !important;vertical-align:middle !important}
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper table tr:last-child td{border-bottom:0 !important}
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper table td:first-child{width:250px !important;color:#94a3b8 !important;font:600 13px/1.4 Inter,Arial,sans-serif !important;white-space:nowrap !important}
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper table td:last-child{color:#fff !important;font:600 14px/1.5 Inter,Arial,sans-serif !important}
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper input[type=text],
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper input[type=email],
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper input[type=tel],
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper input[type=password],
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper select{width:100% !important;max-width:420px !important}
@media(max-width:700px){
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper table tr{display:block !important;border-bottom:1px solid rgba(148,163,184,.10) !important;padding:6px 0 !important}
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper table tr:last-child{border-bottom:0 !important}
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper table td{display:block !important;width:auto !important;padding:6px 16px !important;border-bottom:0 !important}
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper table td:first-child{width:auto !important;padding-bottom:2px !important;white-space:normal !important}
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper input[type=text],
#efPageContent:has(.efAccountMenu) #efUserDetailsPageWrapper select{max-width:100% !important}
}

/* 3. Log in / Log out becomes a button */
.navbar-nav .vx-login,.navbar-nav a.vx-login{
 opacity:1 !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;
 border:1px solid rgba(148,163,184,.40) !important;border-radius:999px !important;
 padding:10px 20px !important;margin-left:auto !important;
 font:700 12.5px/1 Inter,Arial,sans-serif !important;letter-spacing:.06em !important;text-transform:uppercase !important;
 color:#e7eef6 !important;background:rgba(148,163,184,.06) !important;text-decoration:none !important;
 transition:background .18s ease,border-color .18s ease,color .18s ease !important}
.navbar-nav .vx-login:hover,.navbar-nav a.vx-login:hover{
 background:rgba(56,189,248,.14) !important;border-color:rgba(56,189,248,.55) !important;color:#fff !important}
.navbar-nav .vx-cta{margin-left:10px !important}
@media(max-width:991px){
 .navbar-nav a.vx-login{margin:10px 8px 4px !important;padding:14px 18px !important;font-size:13.5px !important;width:auto !important}
}