/* STAX refresh — Login page v7 (23/10/2026) — CSS only, no server code changes
   Link it in Login.master just before </head> (after css/responsive.css). Login.master is used only by Login.aspx.
   Note: the two ::before/::after text lines are for the demo only; in production put
   that text in Login.aspx markup (through Translation) so Arabic works. */
:root{--sx-navy:#0E2433;--sx-bg:#F4F6F9;--sx-primary:#0B7499;--sx-primary-d:#085F7E;--sx-green:#06D6A0;--sx-ink:#0F1B2A;--sx-muted:#5B6B7C;--sx-line:#D5DCE4;}
html,body{background:var(--sx-bg)!important;font-family:var(--font-sans,Archivo,sans-serif)!important;margin:0!important}
#ctl00_pnl_bg,.banner-img{display:none!important}
.login,#login-content,.login-box,.login-45{position:static!important;margin:0!important;padding:0!important;background:none!important;min-height:100vh;width:100%!important;max-width:none!important;transform:none!important}
.login-45 .container{max-width:none!important;width:100%!important;padding:0!important;margin:0!important}
.row.login-box{margin:0!important;min-height:100vh}
.bg-img{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:100vh;padding:0!important;margin:0!important;background:none!important;box-shadow:none!important;max-width:none!important;flex:none!important;width:100%!important;border-radius:0!important}
.bg-img>.c,.info>.c{display:none!important}
.info{background:var(--sx-navy)!important;color:#fff!important;padding:56px!important;display:flex!important;flex-wrap:wrap;align-content:flex-start;gap:16px;width:auto!important;height:auto!important;min-height:100vh;float:none!important;position:static!important;box-shadow:none!important;border-radius:0!important;margin:0!important;max-width:none!important}
.info .logo-left1,.info .logo-right{float:none!important;display:inline-flex!important;align-items:center;background:#fff;border-radius:10px;padding:10px 16px!important;width:auto!important;margin:0!important;position:static!important}
.info .logo-left1 img,.info .logo-right img{height:34px!important;width:auto!important;max-width:none!important}
.info-text{flex:1 1 100%;margin-top:72px!important;padding:0!important;background:none!important;text-align:left!important;width:auto!important;display:flex!important;flex-direction:column}
.info-text::before{order:-2;content:"Smart Travel Accounting System";display:block;font:800 42px/1.12 var(--font-sans,Archivo,sans-serif);letter-spacing:-.5px;color:#fff;margin-bottom:14px;max-width:520px}
.info-text::after{order:-1;content:"Bookings, tours, invoices, receipts and accounts for your travel agency, in one place.";display:block;font:500 17px/1.6 var(--font-sans,Archivo,sans-serif);color:#B8C7D3;max-width:520px;margin-bottom:8px}
.waviy{display:block!important;margin:40px 0 0!important;padding:20px 24px 8px!important;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-bottom:0;border-radius:12px 12px 0 0;text-align:left!important}
.waviy span{animation:none!important;transform:none!important;display:inline!important;font:700 13px var(--font-sans,Archivo,sans-serif)!important;letter-spacing:1px!important;color:var(--sx-green)!important}
.waviy span:nth-child(7){margin-right:8px}
.info-text>div:not(.waviy){background:rgba(255,255,255,.06);border-left:1px solid rgba(255,255,255,.14);border-right:1px solid rgba(255,255,255,.14);padding:4px 24px;color:#C9D6E0;font-size:15px;min-height:24px}
#ctl00_ContentPlaceHolderLogin1_blogReadme{display:block!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important;border-top:0!important;border-radius:0 0 12px 12px!important;color:#fff!important;font:600 14px var(--font-sans,Archivo,sans-serif)!important;padding:12px 24px 20px!important;text-align:left!important;box-shadow:none!important}
.form-info{width:auto!important;max-width:none!important;flex:none!important;display:flex!important;align-items:center;justify-content:center;padding:48px 24px!important;margin:0!important;background:var(--sx-bg)!important;position:static!important;border-radius:0!important;box-shadow:none!important}
.login-inner-form{width:100%;max-width:420px;background:#fff!important;border:1px solid #E3E8EF;border-radius:16px;padding:36px 36px 24px!important;color:var(--sx-ink)!important;box-shadow:0 1px 2px rgba(15,27,42,.05)!important;margin:0!important;position:static!important}
.login-inner-form .form-section::before{content:"Sign in";display:block;font:800 28px var(--font-sans,Archivo,sans-serif);color:var(--sx-ink);letter-spacing:-.3px}
.login-inner-form table{margin-top:20px}
.login-inner-form td{text-align:left!important}
.login-inner-form .login-row{margin:0 0 14px!important;padding:0!important;border:0!important}
.login-inner-form .login-row p{margin:0!important}
.login-inner-form input.form-control,.login-inner-form select.form-control{height:44px!important;border:1px solid var(--sx-line)!important;border-radius:8px!important;background:#fff!important;color:var(--sx-ink)!important;font:500 15px var(--font-sans,Archivo,sans-serif)!important;padding:0 12px!important;box-shadow:none!important;width:100%!important}
.login-inner-form input.form-control::placeholder{color:#7A8A9A!important;opacity:1}
.login-inner-form input.form-control:focus,.login-inner-form select.form-control:focus{outline:2px solid var(--sx-primary)!important;outline-offset:-1px;border-color:var(--sx-primary)!important}
.login-inner-form .captcha p{display:flex!important;gap:8px;align-items:center}
.login-inner-form .captcha img{flex:none;height:44px!important;width:auto!important;border-radius:8px;border:1px dashed #C3CDD8;position:static!important;margin:0!important}
.login-inner-form .captcha input{flex:1 1 auto;order:1}
.login-inner-form .login_sso_wrap{display:flex!important;flex-direction:column;gap:10px;margin-top:6px}
.login-inner-form input[type=submit]{height:48px!important;border-radius:8px!important;font:700 15px var(--font-sans,Archivo,sans-serif)!important;text-transform:none!important;width:100%!important;margin:0!important;box-shadow:none!important;letter-spacing:0!important}
#ctl00_ContentPlaceHolderLogin1_Login1_LoginButton{background:var(--sx-primary)!important;border:1px solid var(--sx-primary)!important;color:#fff!important}
#ctl00_ContentPlaceHolderLogin1_Login1_LoginButton:hover{background:var(--sx-primary-d)!important}
#ctl00_ContentPlaceHolderLogin1_Login1_LoginMS{background:#fff!important;border:1px solid var(--sx-line)!important;color:var(--sx-ink)!important}
.login-inner-form p,.login-inner-form .text1,.login-inner-form .text{color:var(--sx-muted)!important;font:500 13px/1.5 var(--font-sans,Archivo,sans-serif)!important}
.login-inner-form p.text1{margin:4px 0 8px!important}
.login-inner-form a{color:var(--sx-primary)!important}
.login-inner-form td>p:not(.text1){display:flex!important;align-items:center;gap:6px;margin:6px 0!important;color:var(--sx-ink)!important}
.login-inner-form td>p img{height:16px!important;width:auto!important}
.login-inner-form td>p img:not([src*=whtsapp]){filter:brightness(0) invert(.4)}
.login-inner-form .scanner-logo-right{float:right!important;text-align:center;margin:0 0 0 12px!important}
.login-inner-form .scanner-logo-right img{width:64px!important;height:64px!important;border:1px solid #E3E8EF;border-radius:6px}
.login-inner-form .login-copyright{border-top:1px solid #EEF2F6;margin-top:16px!important;padding-top:12px!important;clear:both}
.login-inner-form .login-copyright *{font-size:12px!important;color:var(--sx-muted)!important}
@media (max-width:900px){.bg-img{grid-template-columns:1fr}.info{min-height:0;padding:32px 24px!important}.info-text{margin-top:24px!important}}

/* ---------- Latest Update (RSS feed from systrixit.com) — v2, 17/10/2026 ---------- */
.info-text table[id$=gvRss]{border:0!important;border-collapse:collapse!important;background:transparent!important;margin:0!important}
.info-text table[id$=gvRss]>tbody>tr{background:transparent!important}
.info-text table[id$=gvRss]>tbody>tr>td{border:0!important;background:transparent!important;padding:14px 0!important;border-top:1px solid rgba(255,255,255,.10)!important}
.info-text table[id$=gvRss]>tbody>tr:first-child>td{border-top:0!important;padding-top:6px!important}
.info-text table[id$=gvRss] table{border-spacing:0!important;border:0!important;margin:0!important}
.info-text table[id$=gvRss] table td{padding:0!important;border:0!important;background:transparent!important;text-align:left!important}
.info-text table[id$=gvRss] p.date{font:600 12px var(--font-sans,Archivo,sans-serif)!important;color:#8FA3B3!important;margin:0 0 4px!important;padding:0!important;letter-spacing:.2px}
.info-text table[id$=gvRss] h6{font:700 15px/1.35 var(--font-sans,Archivo,sans-serif)!important;color:#fff!important;margin:0 0 6px!important}
.info-text table[id$=gvRss] hr{display:none!important}
.info-text table[id$=gvRss] td[colspan="2"]{font:500 13.5px/1.5 var(--font-sans,Archivo,sans-serif)!important;color:#B8C7D3!important;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.info-text table[id$=gvRss] td[align=right] a{display:inline-block;margin-top:6px;color:var(--sx-green)!important;font:700 13px var(--font-sans,Archivo,sans-serif)!important;text-decoration:none!important}
.info-text table[id$=gvRss] td[align=right] a:hover{text-decoration:underline!important}

/* ---------- Latest Update switched OFF ----------
   Controlled by the existing web.config key  IsHideNews_loginpage  (1 = hide, 0 = show).
   When it is 1, Login.aspx.vb skips GetFeeds(), so gvRss renders no rows.
   These rules detect "no feed rows" and hide the whole box (heading + Load More).
   No code change needed. Uses CSS :has() — Chrome/Edge 105+, Safari 15.4+, Firefox 121+. */
.info-text:not(:has(table[id$=gvRss] td)) .waviy,
.info-text:not(:has(table[id$=gvRss] td))>div:not(.waviy),
.info-text:not(:has(table[id$=gvRss] td)) #ctl00_ContentPlaceHolderLogin1_blogReadme{display:none!important}

/* ---------- Support block — v3, 17/10/2026 ----------
   Contact icons redrawn as one consistent set (CSS draws over the existing PNGs, file names unchanged):
     whtsapp-icon.png -> chat bubble (green)   customer-service.png -> headset
     mail.png -> envelope                       internet.png -> globe
   STAX X mark (x-iocn.png) kept as is (brand); it is a white PNG, shown in grey on the white card.
   QR code top-aligned with the first contact line; copyright moved out of the card as a centred footer. */
.login-inner-form td>p.text1{border-top:1px solid #EEF2F6;padding-top:16px!important;margin:18px 0 10px!important;color:var(--sx-ink2)!important;font-weight:600!important}
.login-inner-form td>p:not(.text1){display:flex!important;align-items:center;gap:10px;margin:0 0 8px!important;min-height:28px;font:600 13px var(--font-sans,Archivo,sans-serif)!important;color:var(--sx-ink)!important}
.login-inner-form td>p:not(.text1) a{display:inline-flex!important;align-items:center;gap:10px;color:var(--sx-ink)!important;text-decoration:none!important;font:inherit!important}
.login-inner-form td>p:not(.text1) a:hover{color:var(--sx-primary)!important;text-decoration:underline!important}
.login-inner-form td>p img[src*=whtsapp],.login-inner-form td>p img[src*=customer-service],.login-inner-form td>p img[src*=mail],.login-inner-form td>p img[src*=internet]{box-sizing:border-box!important;width:28px!important;height:28px!important;padding:28px 0 0 0!important;overflow:hidden;border-radius:8px;filter:none!important;flex:none;background:#EEF4F7 center/15px no-repeat!important}
.login-inner-form td>p img[src*=whtsapp]{background-color:#E7F6EE!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E9E57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3Cpath d='M9 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M15 10h.01'/%3E%3C/svg%3E")!important}
.login-inner-form td>p img[src*=customer-service]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7499' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 14h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a9 9 0 0 1 18 0v7a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E")!important}
.login-inner-form td>p img[src*=mail]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7499' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E")!important}
.login-inner-form td>p img[src*=internet]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7499' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E")!important}
.login-inner-form td>p img[src*=x-iocn]{filter:brightness(0) invert(.35)!important;width:18px!important;height:auto!important;margin:0 5px!important;flex:none}
.login-inner-form .scanner-logo-right{float:right!important;display:flex!important;flex-direction:column-reverse;align-items:center;gap:6px;margin:0 0 0 16px!important;padding:8px!important;border:1px solid #E3E8EF;border-radius:10px;background:#fff}
.login-inner-form .scanner-logo-right img{width:84px!important;height:84px!important;border:0!important;border-radius:4px;margin:0!important}
.login-inner-form .scanner-logo-right p.text1{border:0!important;padding:0!important;margin:0!important;font:600 11px var(--font-sans,Archivo,sans-serif)!important;color:var(--sx-muted)!important;white-space:nowrap}
.form-info{position:relative!important;padding-bottom:96px!important}
.login-inner-form .login-copyright{position:absolute!important;left:24px;right:24px;bottom:24px;margin:0!important;padding:0!important;border:0!important;text-align:center!important}
.login-inner-form .login-copyright p.text{text-align:center!important}
.login-inner-form .login-copyright p.text,.login-inner-form .login-copyright span{font:500 12px/1.7 var(--font-sans,Archivo,sans-serif)!important;color:var(--sx-muted)!important}
.login-inner-form .login-copyright a{color:var(--sx-primary)!important;font-weight:600!important}

/* ---------- Feed OFF: title block centred vertically, level with the Sign in card — v4, 17/10/2026 ----------
   Logos stay top-left; "Smart Travel Accounting System" + subtitle sit in the middle of the left panel.
   padding-bottom 172px = right panel's footer space, so both centres line up at any screen height. */
.info:not(:has(table[id$=gvRss] td)){display:grid!important;grid-template-columns:auto auto 1fr;grid-template-rows:auto 1fr;column-gap:16px;align-content:stretch!important;padding-bottom:172px!important}
.info:not(:has(table[id$=gvRss] td)) .logo-left1{grid-column:1;grid-row:1}
.info:not(:has(table[id$=gvRss] td)) .logo-right{grid-column:2;grid-row:1}
.info:not(:has(table[id$=gvRss] td)) .info-text{grid-column:1/-1;grid-row:2;align-self:center;margin:0!important}

/* ---------- STAX™ wordmark (images/meridian/…, Systrix Meridian); the Meridian login layer shows the light version on the dark panel ---------- */
.info .logo-left1 img{content:url(../images/meridian/stax-wordmark-tm-ink.svg)!important;height:34px!important;width:auto!important}

/* ---------- v6 (21/10/2026): Mobile & tablet ----------
   Tablet (<=900px): panels stack; with Latest Update OFF the navy band shrinks to logos + title (no empty space).
   Phone (<=600px): compact navy band (smaller logos and title), Sign in card straight below so Login is visible
   without scrolling; Latest Update box hidden on phones; QR code hidden (no point scanning it on the same phone);
   inputs 16px so iPhone does not zoom in when a field is tapped. */
@media (max-width:900px){
.row.login-box,.bg-img{min-height:0!important}
.info:not(:has(table[id$=gvRss] td)){display:flex!important;flex-wrap:wrap;align-content:flex-start;padding:32px 32px 40px!important}
.info:not(:has(table[id$=gvRss] td)) .info-text{margin:32px 0 0!important;align-self:auto}
.form-info{padding-top:32px!important}
}
@media (max-width:600px){
.row.login-box,.bg-img{min-height:0!important}
.info,.info:not(:has(table[id$=gvRss] td)){display:flex!important;flex-wrap:wrap;align-content:flex-start;gap:10px;min-height:0!important;padding:20px 16px 26px!important}
.info .logo-left1,.info .logo-right{padding:6px 10px!important;border-radius:8px}
.info .logo-left1 img,.info .logo-right img{height:24px!important}
.info-text,.info:not(:has(table[id$=gvRss] td)) .info-text{flex:1 1 100%;margin:18px 0 0!important;align-self:auto}
.info-text::before{font-size:26px;line-height:1.15;margin-bottom:6px}
.info-text::after{font-size:14px;line-height:1.5;margin-bottom:0}
.info-text .waviy,.info-text>div:not(.waviy),.info-text #ctl00_ContentPlaceHolderLogin1_blogReadme{display:none!important}
.form-info{align-items:flex-start!important;padding:16px 12px 116px!important}
.login-inner-form{padding:24px 18px 18px!important;border-radius:14px}
.login-inner-form .form-section::before{font-size:24px}
.login-inner-form table{margin-top:14px}
.login-inner-form input.form-control,.login-inner-form select.form-control{font-size:16px!important}
.login-inner-form .captcha img{max-width:46%;object-fit:contain}
.login-inner-form .captcha input{min-width:0}
.login-inner-form .scanner-logo-right{display:none!important}
.login-inner-form td>p:not(.text1) a{word-break:break-word}
.login-inner-form .login-copyright{left:12px;right:12px;bottom:18px}
}