@reference "tailwindcss"; /* Tailwind new design pages: load only required WeblySleek families. */ @font-face { font-family: 'weblysleek_uisemibold'; src: url('/Content/fonts/weblysleekuisb-common.woff2') format('woff2'), url('/Content/fonts/weblysleekuisb-common.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0-7F, U+A0, U+A7, U+A9, U+2010, U+2011, U+2013, U+2014, U+2018, U+2019, U+201C-201E, U+2020, U+2021, U+2026, U+2030, U+2032, U+2033, U+20AC; } @font-face { font-family: 'weblysleek_uisemilight'; src: url('/Content/fonts/weblysleekuisl-common.woff2') format('woff2'), url('/Content/fonts/weblysleekuisl-common.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+0-7F, U+A0, U+A7, U+A9, U+2010, U+2011, U+2013, U+2014, U+2018, U+2019, U+201C-201E, U+2020, U+2021, U+2026, U+2030, U+2032, U+2033, U+20AC; } /* Locale extensions (language selector shows all language names regardless of current culture) */ @font-face { font-family: 'weblysleek_uisemibold'; src: url('/Content/fonts/weblysleekuisb-german.woff2') format('woff2'), url('/Content/fonts/weblysleekuisb-german.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+7B, U+7D, U+AB, U+BB, U+C4, U+D6, U+DC, U+DF, U+E4, U+F6, U+FC, U+201A; } @font-face { font-family: 'weblysleek_uisemilight'; src: url('/Content/fonts/weblysleekuisl-german.woff2') format('woff2'), url('/Content/fonts/weblysleekuisl-german.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+7B, U+7D, U+AB, U+BB, U+C4, U+D6, U+DC, U+DF, U+E4, U+F6, U+FC, U+201A; } @font-face { font-family: 'weblysleek_uisemibold'; src: url('/Content/fonts/weblysleekuisb-czech.woff2') format('woff2'), url('/Content/fonts/weblysleekuisb-czech.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+C1, U+C9, U+CD, U+D3, U+DA, U+DD, U+E1, U+E9, U+ED, U+F3, U+FA, U+FD, U+10C-10F, U+11A, U+11B, U+147, U+148, U+158, U+159, U+160, U+161, U+164, U+165, U+16E, U+16F, U+17D, U+17E, U+201A; } @font-face { font-family: 'weblysleek_uisemilight'; src: url('/Content/fonts/weblysleekuisl-czech.woff2') format('woff2'), url('/Content/fonts/weblysleekuisl-czech.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+C1, U+C9, U+CD, U+D3, U+DA, U+DD, U+E1, U+E9, U+ED, U+F3, U+FA, U+FD, U+10C-10F, U+11A, U+11B, U+147, U+148, U+158, U+159, U+160, U+161, U+164, U+165, U+16E, U+16F, U+17D, U+17E, U+201A; } @font-face { font-family: 'weblysleek_uisemibold'; src: url('/Content/fonts/weblysleekuisb-slovak.woff2') format('woff2'), url('/Content/fonts/weblysleekuisb-slovak.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+C1, U+C4, U+C9, U+CD, U+D3, U+D4, U+DA, U+DD, U+E1, U+E4, U+E9, U+ED, U+F3, U+F4, U+FA, U+FD, U+10C-10F, U+139, U+13A, U+13D, U+13E, U+147, U+148, U+154, U+155, U+160, U+161, U+164, U+165, U+17D, U+17E, U+1C6, U+1F3, U+201A; } @font-face { font-family: 'weblysleek_uisemilight'; src: url('/Content/fonts/weblysleekuisl-slovak.woff2') format('woff2'), url('/Content/fonts/weblysleekuisl-slovak.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+C1, U+C4, U+C9, U+CD, U+D3, U+D4, U+DA, U+DD, U+E1, U+E4, U+E9, U+ED, U+F3, U+F4, U+FA, U+FD, U+10C-10F, U+139, U+13A, U+13D, U+13E, U+147, U+148, U+154, U+155, U+160, U+161, U+164, U+165, U+17D, U+17E, U+1C6, U+1F3, U+201A; } @font-face { font-family: 'weblysleek_uisemibold'; src: url('/Content/fonts/weblysleekuisb-hungarian.woff2') format('woff2'), url('/Content/fonts/weblysleekuisb-hungarian.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+7B, U+7D, U+7E, U+AB, U+BB, U+C1, U+C9, U+CD, U+D3, U+D6, U+DA, U+DC, U+E1, U+E9, U+ED, U+F3, U+F6, U+FA, U+FC, U+150, U+151, U+170, U+171, U+1F1, U+1F3, U+2052, U+27E8, U+27E9; } @font-face { font-family: 'weblysleek_uisemilight'; src: url('/Content/fonts/weblysleekuisl-hungarian.woff2') format('woff2'), url('/Content/fonts/weblysleekuisl-hungarian.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+7B, U+7D, U+7E, U+AB, U+BB, U+C1, U+C9, U+CD, U+D3, U+D6, U+DA, U+DC, U+E1, U+E9, U+ED, U+F3, U+F6, U+FA, U+FC, U+150, U+151, U+170, U+171, U+1F1, U+1F3, U+2052, U+27E8, U+27E9; } /* Glyphs font for icon-* classes (icon-notification, etc.) */ @font-face { font-family: 'glyphs'; src: url('/Content/fonts/glyphs.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @tailwind base; @tailwind components; @tailwind utilities; /* Remove default browser focus outline (no black border, no visual change on focus) */ :focus { outline: none; } /* All anchors: no text underline by default (hover/focus underline comes from a[href]:hover or utilities like .underline) */ a, a:link, a:visited { text-decoration: none; } /* Global link hover and active states - restore visual feedback */ a[href] { transition: color 0.2s ease, text-decoration-color 0.2s ease; } a[href]:hover { color: #00a7eb !important; text-decoration: underline !important; } /* Registration / TopUp tab links: border-based tabs — no text underline on hover */ a.registration-tab-selected:hover, a.registration-tab-inactive:hover, a.topup-tab-selected:hover, a.topup-tab-inactive:hover { text-decoration: none !important; } /* Wallets page (#wallet-list): row links are full-row hit targets — no underline on hover */ #wallet-list a[href]:hover, #wallet-list a[href]:focus, .bank-transfer-index-revamp #recipient-list .recipient-card:hover, .bank-transfer-index-revamp #recipient-list .recipient-card:focus, .bank-transfer-index-revamp .banktransfer-payout-modal__form:hover, .bank-transfer-index-revamp .banktransfer-payout-modal__form:focus, .banktransfer-payout-modal .banktransfer-payout-modal__form:hover, .banktransfer-payout-modal .banktransfer-payout-modal__form:focus { text-decoration: none !important; } a[href]:active { color: #0066a1 !important; } /* Global font: default weblysleek_uisemilight, bold text weblysleek_uisemibold */ html, body { font-family: "weblysleek_uisemilight", "Helvetica Neue", Helvetica, Arial, sans-serif; } input, select, textarea, button { font-family: "weblysleek_uisemilight", "Helvetica Neue", Helvetica, Arial, sans-serif; } b, strong, .font-semibold, .font-bold, [class*="font-semibold"], [class*="font-bold"] { font-family: 'weblysleek_uisemibold', "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 600; } /* UI glyphs only — exclude country flag sprites (icon-XX / icon-XX-dims on flag elements) */ [class^="icon-"]:not(.phone-country-flag):not(.phone-country-code-flag):not(.option-flag):not(.custom-select-flag), [class*=" icon-"]:not(.phone-country-flag):not(.phone-country-code-flag):not(.option-flag):not(.custom-select-flag) { font-family: 'glyphs'; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-notification:before { content: "\10f5"; } /* Flag icons for phone country code - from iconizr-png-sprite (profile/dashboard Tailwind-only) */ .icon-AD,.icon-AD\:regular{background-image:url('/Content/images/flags.png');background-position:0 0;background-repeat:no-repeat} .icon-AD-dims{width:32px;height:32px} .icon-AE,.icon-AE\:regular{background-image:url('/Content/images/flags.png');background-position:0 -32px;background-repeat:no-repeat} .icon-AE-dims{width:32px;height:32px} .icon-AF,.icon-AF\:regular{background-image:url('/Content/images/flags.png');background-position:0 -64px;background-repeat:no-repeat} .icon-AF-dims{width:32px;height:32px} .icon-AG,.icon-AG\:regular{background-image:url('/Content/images/flags.png');background-position:0 -96px;background-repeat:no-repeat} .icon-AG-dims{width:32px;height:32px} .icon-AI,.icon-AI\:regular{background-image:url('/Content/images/flags.png');background-position:0 -128px;background-repeat:no-repeat} .icon-AI-dims{width:32px;height:32px} .icon-AL,.icon-AL\:regular{background-image:url('/Content/images/flags.png');background-position:0 -160px;background-repeat:no-repeat} .icon-AL-dims{width:32px;height:32px} .icon-AM,.icon-AM\:regular{background-image:url('/Content/images/flags.png');background-position:0 -192px;background-repeat:no-repeat} .icon-AM-dims{width:32px;height:32px} .icon-AO,.icon-AO\:regular{background-image:url('/Content/images/flags.png');background-position:0 -256px;background-repeat:no-repeat} .icon-AO-dims{width:32px;height:32px} .icon-AR,.icon-AR\:regular{background-image:url('/Content/images/flags.png');background-position:0 -288px;background-repeat:no-repeat} .icon-AR-dims{width:32px;height:32px} .icon-AS,.icon-AS\:regular{background-image:url('/Content/images/flags.png');background-position:0 -320px;background-repeat:no-repeat} .icon-AS-dims{width:32px;height:32px} .icon-AT,.icon-AT\:regular{background-image:url('/Content/images/flags.png');background-position:0 -352px;background-repeat:no-repeat} .icon-AT-dims{width:32px;height:32px} .icon-AU,.icon-AU\:regular{background-image:url('/Content/images/flags.png');background-position:0 -384px;background-repeat:no-repeat} .icon-AU-dims{width:32px;height:32px} .icon-AW,.icon-AW\:regular{background-image:url('/Content/images/flags.png');background-position:0 -416px;background-repeat:no-repeat} .icon-AW-dims{width:32px;height:32px} .icon-AZ,.icon-AZ\:regular{background-image:url('/Content/images/flags.png');background-position:0 -480px;background-repeat:no-repeat} .icon-AZ-dims{width:32px;height:32px} .icon-BA,.icon-BA\:regular{background-image:url('/Content/images/flags.png');background-position:0 -512px;background-repeat:no-repeat} .icon-BA-dims{width:32px;height:32px} .icon-BB,.icon-BB\:regular{background-image:url('/Content/images/flags.png');background-position:0 -544px;background-repeat:no-repeat} .icon-BB-dims{width:32px;height:32px} .icon-BD,.icon-BD\:regular{background-image:url('/Content/images/flags.png');background-position:0 -576px;background-repeat:no-repeat} .icon-BD-dims{width:32px;height:32px} .icon-BE,.icon-BE\:regular{background-image:url('/Content/images/flags.png');background-position:0 -608px;background-repeat:no-repeat} .icon-BE-dims{width:32px;height:32px} .icon-BF,.icon-BF\:regular{background-image:url('/Content/images/flags.png');background-position:0 -640px;background-repeat:no-repeat} .icon-BF-dims{width:32px;height:32px} .icon-BG,.icon-BG\:regular{background-image:url('/Content/images/flags.png');background-position:0 -672px;background-repeat:no-repeat} .icon-BG-dims{width:32px;height:32px} .icon-BH,.icon-BH\:regular{background-image:url('/Content/images/flags.png');background-position:0 -704px;background-repeat:no-repeat} .icon-BH-dims{width:32px;height:32px} .icon-BI,.icon-BI\:regular{background-image:url('/Content/images/flags.png');background-position:0 -736px;background-repeat:no-repeat} .icon-BI-dims{width:32px;height:32px} .icon-BJ,.icon-BJ\:regular{background-image:url('/Content/images/flags.png');background-position:0 -768px;background-repeat:no-repeat} .icon-BJ-dims{width:32px;height:32px} .icon-BM,.icon-BM\:regular{background-image:url('/Content/images/flags.png');background-position:0 -832px;background-repeat:no-repeat} .icon-BM-dims{width:32px;height:32px} .icon-BN,.icon-BN\:regular{background-image:url('/Content/images/flags.png');background-position:0 -864px;background-repeat:no-repeat} .icon-BN-dims{width:32px;height:32px} .icon-BO,.icon-BO\:regular{background-image:url('/Content/images/flags.png');background-position:0 -896px;background-repeat:no-repeat} .icon-BO-dims{width:32px;height:32px} .icon-BR,.icon-BR\:regular{background-image:url('/Content/images/flags.png');background-position:0 -928px;background-repeat:no-repeat} .icon-BR-dims{width:32px;height:32px} .icon-BS,.icon-BS\:regular{background-image:url('/Content/images/flags.png');background-position:0 -960px;background-repeat:no-repeat} .icon-BS-dims{width:32px;height:32px} .icon-BT,.icon-BT\:regular{background-image:url('/Content/images/flags.png');background-position:0 -992px;background-repeat:no-repeat} .icon-BT-dims{width:32px;height:32px} .icon-BW,.icon-BW\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1024px;background-repeat:no-repeat} .icon-BW-dims{width:32px;height:32px} .icon-BY,.icon-BY\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1056px;background-repeat:no-repeat} .icon-BY-dims{width:32px;height:32px} .icon-BZ,.icon-BZ\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1088px;background-repeat:no-repeat} .icon-BZ-dims{width:32px;height:32px} .icon-CA,.icon-CA\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1120px;background-repeat:no-repeat} .icon-CA-dims{width:32px;height:32px} .icon-CD,.icon-CD\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1184px;background-repeat:no-repeat} .icon-CD-dims{width:32px;height:32px} .icon-CF,.icon-CF\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1216px;background-repeat:no-repeat} .icon-CF-dims{width:32px;height:32px} .icon-CG,.icon-CG\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1248px;background-repeat:no-repeat} .icon-CG-dims{width:32px;height:32px} .icon-CH,.icon-CH\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1280px;background-repeat:no-repeat} .icon-CH-dims{width:32px;height:32px} .icon-CI,.icon-CI\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1312px;background-repeat:no-repeat} .icon-CI-dims{width:32px;height:32px} .icon-CK,.icon-CK\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1344px;background-repeat:no-repeat} .icon-CK-dims{width:32px;height:32px} .icon-CL,.icon-CL\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1376px;background-repeat:no-repeat} .icon-CL-dims{width:32px;height:32px} .icon-CM,.icon-CM\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1408px;background-repeat:no-repeat} .icon-CM-dims{width:32px;height:32px} .icon-CN,.icon-CN\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1440px;background-repeat:no-repeat} .icon-CN-dims{width:32px;height:32px} .icon-CO,.icon-CO\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1472px;background-repeat:no-repeat} .icon-CO-dims{width:32px;height:32px} .icon-CR,.icon-CR\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1504px;background-repeat:no-repeat} .icon-CR-dims{width:32px;height:32px} .icon-CU,.icon-CU\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1536px;background-repeat:no-repeat} .icon-CU-dims{width:32px;height:32px} .icon-CV,.icon-CV\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1568px;background-repeat:no-repeat} .icon-CV-dims{width:32px;height:32px} .icon-CY,.icon-CY\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1664px;background-repeat:no-repeat} .icon-CY-dims{width:32px;height:32px} .icon-CZ,.icon-CZ\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1696px;background-repeat:no-repeat} .icon-CZ-dims{width:32px;height:32px} .icon-DE,.icon-DE\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1728px;background-repeat:no-repeat} .icon-DE-dims{width:32px;height:32px} .icon-DJ,.icon-DJ\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1760px;background-repeat:no-repeat} .icon-DJ-dims{width:32px;height:32px} .icon-DK,.icon-DK\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1792px;background-repeat:no-repeat} .icon-DK-dims{width:32px;height:32px} .icon-DM,.icon-DM\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1824px;background-repeat:no-repeat} .icon-DM-dims{width:32px;height:32px} .icon-DO,.icon-DO\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1856px;background-repeat:no-repeat} .icon-DO-dims{width:32px;height:32px} .icon-DZ,.icon-DZ\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1888px;background-repeat:no-repeat} .icon-DZ-dims{width:32px;height:32px} .icon-EC,.icon-EC\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1920px;background-repeat:no-repeat} .icon-EC-dims{width:32px;height:32px} .icon-EE,.icon-EE\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1952px;background-repeat:no-repeat} .icon-EE-dims{width:32px;height:32px} .icon-EG,.icon-EG\:regular{background-image:url('/Content/images/flags.png');background-position:0 -1984px;background-repeat:no-repeat} .icon-EG-dims{width:32px;height:32px} .icon-ER,.icon-ER\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2048px;background-repeat:no-repeat} .icon-ER-dims{width:32px;height:32px} .icon-ES,.icon-ES\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2080px;background-repeat:no-repeat} .icon-ES-dims{width:32px;height:32px} .icon-ET,.icon-ET\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2112px;background-repeat:no-repeat} .icon-ET-dims{width:32px;height:32px} .icon-FI,.icon-FI\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2144px;background-repeat:no-repeat} .icon-FI-dims{width:32px;height:32px} .icon-FJ,.icon-FJ\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2176px;background-repeat:no-repeat} .icon-FJ-dims{width:32px;height:32px} .icon-FK,.icon-FK\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2208px;background-repeat:no-repeat} .icon-FK-dims{width:32px;height:32px} .icon-FM,.icon-FM\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2240px;background-repeat:no-repeat} .icon-FM-dims{width:32px;height:32px} .icon-FO,.icon-FO\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2272px;background-repeat:no-repeat} .icon-FO-dims{width:32px;height:32px} .icon-FR,.icon-FR\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2304px;background-repeat:no-repeat} .icon-FR-dims{width:32px;height:32px} .icon-GA,.icon-GA\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2336px;background-repeat:no-repeat} .icon-GA-dims{width:32px;height:32px} .icon-GB,.icon-GB\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2368px;background-repeat:no-repeat} .icon-GB-dims{width:32px;height:32px} .icon-GD,.icon-GD\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2400px;background-repeat:no-repeat} .icon-GD-dims{width:32px;height:32px} .icon-GE,.icon-GE\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2432px;background-repeat:no-repeat} .icon-GE-dims{width:32px;height:32px} .icon-GF,.icon-GF\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2464px;background-repeat:no-repeat} .icon-GF-dims{width:32px;height:32px} .icon-GG,.icon-GG\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2496px;background-repeat:no-repeat} .icon-GG-dims{width:32px;height:32px} .icon-GH,.icon-GH\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2528px;background-repeat:no-repeat} .icon-GH-dims{width:32px;height:32px} .icon-GI,.icon-GI\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2560px;background-repeat:no-repeat} .icon-GI-dims{width:32px;height:32px} .icon-GL,.icon-GL\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2592px;background-repeat:no-repeat} .icon-GL-dims{width:32px;height:32px} .icon-GM,.icon-GM\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2624px;background-repeat:no-repeat} .icon-GM-dims{width:32px;height:32px} .icon-GN,.icon-GN\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2656px;background-repeat:no-repeat} .icon-GN-dims{width:32px;height:32px} .icon-GP,.icon-GP\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2688px;background-repeat:no-repeat} .icon-GP-dims{width:32px;height:32px} .icon-GQ,.icon-GQ\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2720px;background-repeat:no-repeat} .icon-GQ-dims{width:32px;height:32px} .icon-GR,.icon-GR\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2752px;background-repeat:no-repeat} .icon-GR-dims{width:32px;height:32px} .icon-GT,.icon-GT\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2784px;background-repeat:no-repeat} .icon-GT-dims{width:32px;height:32px} .icon-GU,.icon-GU\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2816px;background-repeat:no-repeat} .icon-GU-dims{width:32px;height:32px} .icon-GW,.icon-GW\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2848px;background-repeat:no-repeat} .icon-GW-dims{width:32px;height:32px} .icon-GY,.icon-GY\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2880px;background-repeat:no-repeat} .icon-GY-dims{width:32px;height:32px} .icon-HK,.icon-HK\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2912px;background-repeat:no-repeat} .icon-HK-dims{width:32px;height:32px} .icon-HN,.icon-HN\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2944px;background-repeat:no-repeat} .icon-HN-dims{width:32px;height:32px} .icon-HR,.icon-HR\:regular{background-image:url('/Content/images/flags.png');background-position:0 -2976px;background-repeat:no-repeat} .icon-HR-dims{width:32px;height:32px} .icon-HT,.icon-HT\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3008px;background-repeat:no-repeat} .icon-HT-dims{width:32px;height:32px} .icon-HU,.icon-HU\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3040px;background-repeat:no-repeat} .icon-HU-dims{width:32px;height:32px} .icon-ID,.icon-ID\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3072px;background-repeat:no-repeat} .icon-ID-dims{width:32px;height:32px} .icon-IE,.icon-IE\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3104px;background-repeat:no-repeat} .icon-IE-dims{width:32px;height:32px} .icon-IL,.icon-IL\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3136px;background-repeat:no-repeat} .icon-IL-dims{width:32px;height:32px} .icon-IM,.icon-IM\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3168px;background-repeat:no-repeat} .icon-IM-dims{width:32px;height:32px} .icon-IN,.icon-IN\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3200px;background-repeat:no-repeat} .icon-IN-dims{width:32px;height:32px} .icon-IQ,.icon-IQ\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3264px;background-repeat:no-repeat} .icon-IQ-dims{width:32px;height:32px} .icon-IR,.icon-IR\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3296px;background-repeat:no-repeat} .icon-IR-dims{width:32px;height:32px} .icon-IS,.icon-IS\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3328px;background-repeat:no-repeat} .icon-IS-dims{width:32px;height:32px} .icon-IT,.icon-IT\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3360px;background-repeat:no-repeat} .icon-IT-dims{width:32px;height:32px} .icon-JE,.icon-JE\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3392px;background-repeat:no-repeat} .icon-JE-dims{width:32px;height:32px} .icon-JM,.icon-JM\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3424px;background-repeat:no-repeat} .icon-JM-dims{width:32px;height:32px} .icon-JO,.icon-JO\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3456px;background-repeat:no-repeat} .icon-JO-dims{width:32px;height:32px} .icon-JP,.icon-JP\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3488px;background-repeat:no-repeat} .icon-JP-dims{width:32px;height:32px} .icon-KE,.icon-KE\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3520px;background-repeat:no-repeat} .icon-KE-dims{width:32px;height:32px} .icon-KG,.icon-KG\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3552px;background-repeat:no-repeat} .icon-KG-dims{width:32px;height:32px} .icon-KH,.icon-KH\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3584px;background-repeat:no-repeat} .icon-KH-dims{width:32px;height:32px} .icon-KI,.icon-KI\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3616px;background-repeat:no-repeat} .icon-KI-dims{width:32px;height:32px} .icon-KM,.icon-KM\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3648px;background-repeat:no-repeat} .icon-KM-dims{width:32px;height:32px} .icon-KN,.icon-KN\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3680px;background-repeat:no-repeat} .icon-KN-dims{width:32px;height:32px} .icon-KR,.icon-KR\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3744px;background-repeat:no-repeat} .icon-KR-dims{width:32px;height:32px} .icon-KW,.icon-KW\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3776px;background-repeat:no-repeat} .icon-KW-dims{width:32px;height:32px} .icon-KY,.icon-KY\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3808px;background-repeat:no-repeat} .icon-KY-dims{width:32px;height:32px} .icon-KZ,.icon-KZ\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3840px;background-repeat:no-repeat} .icon-KZ-dims{width:32px;height:32px} .icon-LA,.icon-LA\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3872px;background-repeat:no-repeat} .icon-LA-dims{width:32px;height:32px} .icon-LB,.icon-LB\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3904px;background-repeat:no-repeat} .icon-LB-dims{width:32px;height:32px} .icon-LC,.icon-LC\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3936px;background-repeat:no-repeat} .icon-LC-dims{width:32px;height:32px} .icon-LI,.icon-LI\:regular{background-image:url('/Content/images/flags.png');background-position:0 -3968px;background-repeat:no-repeat} .icon-LI-dims{width:32px;height:32px} .icon-LK,.icon-LK\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4000px;background-repeat:no-repeat} .icon-LK-dims{width:32px;height:32px} .icon-LR,.icon-LR\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4032px;background-repeat:no-repeat} .icon-LR-dims{width:32px;height:32px} .icon-LS,.icon-LS\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4064px;background-repeat:no-repeat} .icon-LS-dims{width:32px;height:32px} .icon-LT,.icon-LT\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4096px;background-repeat:no-repeat} .icon-LT-dims{width:32px;height:32px} .icon-LU,.icon-LU\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4128px;background-repeat:no-repeat} .icon-LU-dims{width:32px;height:32px} .icon-LV,.icon-LV\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4160px;background-repeat:no-repeat} .icon-LV-dims{width:32px;height:32px} .icon-LY,.icon-LY\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4192px;background-repeat:no-repeat} .icon-LY-dims{width:32px;height:32px} .icon-MA,.icon-MA\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4224px;background-repeat:no-repeat} .icon-MA-dims{width:32px;height:32px} .icon-MC,.icon-MC\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4256px;background-repeat:no-repeat} .icon-MC-dims{width:32px;height:32px} .icon-MD,.icon-MD\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4288px;background-repeat:no-repeat} .icon-MD-dims{width:32px;height:32px} .icon-ME,.icon-ME\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4320px;background-repeat:no-repeat} .icon-ME-dims{width:32px;height:32px} .icon-MG,.icon-MG\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4384px;background-repeat:no-repeat} .icon-MG-dims{width:32px;height:32px} .icon-MK,.icon-MK\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4448px;background-repeat:no-repeat} .icon-MK-dims{width:32px;height:32px} .icon-ML,.icon-ML\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4480px;background-repeat:no-repeat} .icon-ML-dims{width:32px;height:32px} .icon-MM,.icon-MM\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4512px;background-repeat:no-repeat} .icon-MM-dims{width:32px;height:32px} .icon-MN,.icon-MN\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4544px;background-repeat:no-repeat} .icon-MN-dims{width:32px;height:32px} .icon-MO,.icon-MO\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4576px;background-repeat:no-repeat} .icon-MO-dims{width:32px;height:32px} .icon-MR,.icon-MR\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4672px;background-repeat:no-repeat} .icon-MR-dims{width:32px;height:32px} .icon-MS,.icon-MS\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4704px;background-repeat:no-repeat} .icon-MS-dims{width:32px;height:32px} .icon-MT,.icon-MT\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4736px;background-repeat:no-repeat} .icon-MT-dims{width:32px;height:32px} .icon-MU,.icon-MU\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4768px;background-repeat:no-repeat} .icon-MU-dims{width:32px;height:32px} .icon-MV,.icon-MV\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4800px;background-repeat:no-repeat} .icon-MV-dims{width:32px;height:32px} .icon-MW,.icon-MW\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4832px;background-repeat:no-repeat} .icon-MW-dims{width:32px;height:32px} .icon-MX,.icon-MX\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4864px;background-repeat:no-repeat} .icon-MX-dims{width:32px;height:32px} .icon-MY,.icon-MY\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4896px;background-repeat:no-repeat} .icon-MY-dims{width:32px;height:32px} .icon-MZ,.icon-MZ\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4928px;background-repeat:no-repeat} .icon-MZ-dims{width:32px;height:32px} .icon-NA,.icon-NA\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4960px;background-repeat:no-repeat} .icon-NA-dims{width:32px;height:32px} .icon-NC,.icon-NC\:regular{background-image:url('/Content/images/flags.png');background-position:0 -4992px;background-repeat:no-repeat} .icon-NC-dims{width:32px;height:32px} .icon-NE,.icon-NE\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5024px;background-repeat:no-repeat} .icon-NE-dims{width:32px;height:32px} .icon-NG,.icon-NG\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5088px;background-repeat:no-repeat} .icon-NG-dims{width:32px;height:32px} .icon-NI,.icon-NI\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5120px;background-repeat:no-repeat} .icon-NI-dims{width:32px;height:32px} .icon-NL,.icon-NL\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5152px;background-repeat:no-repeat} .icon-NL-dims{width:32px;height:32px} .icon-NO,.icon-NO\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5184px;background-repeat:no-repeat} .icon-NO-dims{width:32px;height:32px} .icon-NP,.icon-NP\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5216px;background-repeat:no-repeat} .icon-NP-dims{width:32px;height:32px} .icon-NR,.icon-NR\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5248px;background-repeat:no-repeat} .icon-NR-dims{width:32px;height:32px} .icon-NZ,.icon-NZ\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5312px;background-repeat:no-repeat} .icon-NZ-dims{width:32px;height:32px} .icon-OM,.icon-OM\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5344px;background-repeat:no-repeat} .icon-OM-dims{width:32px;height:32px} .icon-PA,.icon-PA\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5376px;background-repeat:no-repeat} .icon-PA-dims{width:32px;height:32px} .icon-PE,.icon-PE\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5408px;background-repeat:no-repeat} .icon-PE-dims{width:32px;height:32px} .icon-PF,.icon-PF\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5440px;background-repeat:no-repeat} .icon-PF-dims{width:32px;height:32px} .icon-PG,.icon-PG\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5472px;background-repeat:no-repeat} .icon-PG-dims{width:32px;height:32px} .icon-PH,.icon-PH\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5504px;background-repeat:no-repeat} .icon-PH-dims{width:32px;height:32px} .icon-PK,.icon-PK\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5536px;background-repeat:no-repeat} .icon-PK-dims{width:32px;height:32px} .icon-PL,.icon-PL\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5568px;background-repeat:no-repeat} .icon-PL-dims{width:32px;height:32px} .icon-PM,.icon-PM\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5600px;background-repeat:no-repeat} .icon-PM-dims{width:32px;height:32px} .icon-PR,.icon-PR\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5664px;background-repeat:no-repeat} .icon-PR-dims{width:32px;height:32px} .icon-PT,.icon-PT\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5728px;background-repeat:no-repeat} .icon-PT-dims{width:32px;height:32px} .icon-PY,.icon-PY\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5792px;background-repeat:no-repeat} .icon-PY-dims{width:32px;height:32px} .icon-QA,.icon-QA\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5824px;background-repeat:no-repeat} .icon-QA-dims{width:32px;height:32px} .icon-RE,.icon-RE\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5856px;background-repeat:no-repeat} .icon-RE-dims{width:32px;height:32px} .icon-RO,.icon-RO\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5888px;background-repeat:no-repeat} .icon-RO-dims{width:32px;height:32px} .icon-RS,.icon-RS\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5920px;background-repeat:no-repeat} .icon-RS-dims{width:32px;height:32px} .icon-RU,.icon-RU\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5952px;background-repeat:no-repeat} .icon-RU-dims{width:32px;height:32px} .icon-RW,.icon-RW\:regular{background-image:url('/Content/images/flags.png');background-position:0 -5984px;background-repeat:no-repeat} .icon-RW-dims{width:32px;height:32px} .icon-SA,.icon-SA\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6016px;background-repeat:no-repeat} .icon-SA-dims{width:32px;height:32px} .icon-SB,.icon-SB\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6048px;background-repeat:no-repeat} .icon-SB-dims{width:32px;height:32px} .icon-SC,.icon-SC\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6080px;background-repeat:no-repeat} .icon-SC-dims{width:32px;height:32px} .icon-SD,.icon-SD\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6112px;background-repeat:no-repeat} .icon-SD-dims{width:32px;height:32px} .icon-SE,.icon-SE\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6144px;background-repeat:no-repeat} .icon-SE-dims{width:32px;height:32px} .icon-SG,.icon-SG\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6176px;background-repeat:no-repeat} .icon-SG-dims{width:32px;height:32px} .icon-SI,.icon-SI\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6240px;background-repeat:no-repeat} .icon-SI-dims{width:32px;height:32px} .icon-SK,.icon-SK\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6304px;background-repeat:no-repeat} .icon-SK-dims{width:32px;height:32px} .icon-SN,.icon-SN\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6400px;background-repeat:no-repeat} .icon-SN-dims{width:32px;height:32px} .icon-SO,.icon-SO\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6432px;background-repeat:no-repeat} .icon-SO-dims{width:32px;height:32px} .icon-SR,.icon-SR\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6464px;background-repeat:no-repeat} .icon-SR-dims{width:32px;height:32px} .icon-SV,.icon-SV\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6560px;background-repeat:no-repeat} .icon-SV-dims{width:32px;height:32px} .icon-SY,.icon-SY\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6624px;background-repeat:no-repeat} .icon-SY-dims{width:32px;height:32px} .icon-SZ,.icon-SZ\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6656px;background-repeat:no-repeat} .icon-SZ-dims{width:32px;height:32px} .icon-TD,.icon-TD\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6720px;background-repeat:no-repeat} .icon-TD-dims{width:32px;height:32px} .icon-TG,.icon-TG\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6752px;background-repeat:no-repeat} .icon-TG-dims{width:32px;height:32px} .icon-TH,.icon-TH\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6784px;background-repeat:no-repeat} .icon-TH-dims{width:32px;height:32px} .icon-TJ,.icon-TJ\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6816px;background-repeat:no-repeat} .icon-TJ-dims{width:32px;height:32px} .icon-TL,.icon-TL\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6880px;background-repeat:no-repeat} .icon-TL-dims{width:32px;height:32px} .icon-TM,.icon-TM\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6912px;background-repeat:no-repeat} .icon-TM-dims{width:32px;height:32px} .icon-TN,.icon-TN\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6944px;background-repeat:no-repeat} .icon-TN-dims{width:32px;height:32px} .icon-TO,.icon-TO\:regular{background-image:url('/Content/images/flags.png');background-position:0 -6976px;background-repeat:no-repeat} .icon-TO-dims{width:32px;height:32px} .icon-TR,.icon-TR\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7008px;background-repeat:no-repeat} .icon-TR-dims{width:32px;height:32px} .icon-TT,.icon-TT\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7040px;background-repeat:no-repeat} .icon-TT-dims{width:32px;height:32px} .icon-TW,.icon-TW\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7104px;background-repeat:no-repeat} .icon-TW-dims{width:32px;height:32px} .icon-TZ,.icon-TZ\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7136px;background-repeat:no-repeat} .icon-TZ-dims{width:32px;height:32px} .icon-UA,.icon-UA\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7168px;background-repeat:no-repeat} .icon-UA-dims{width:32px;height:32px} .icon-UG,.icon-UG\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7200px;background-repeat:no-repeat} .icon-UG-dims{width:32px;height:32px} .icon-US,.icon-US\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7264px;background-repeat:no-repeat} .icon-US-dims{width:32px;height:32px} .icon-UY,.icon-UY\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7296px;background-repeat:no-repeat} .icon-UY-dims{width:32px;height:32px} .icon-UZ,.icon-UZ\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7328px;background-repeat:no-repeat} .icon-UZ-dims{width:32px;height:32px} .icon-VA,.icon-VA\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7360px;background-repeat:no-repeat} .icon-VA-dims{width:32px;height:32px} .icon-VC,.icon-VC\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7392px;background-repeat:no-repeat} .icon-VC-dims{width:32px;height:32px} .icon-VE,.icon-VE\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7424px;background-repeat:no-repeat} .icon-VE-dims{width:32px;height:32px} .icon-VG,.icon-VG\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7456px;background-repeat:no-repeat} .icon-VG-dims{width:32px;height:32px} .icon-VN,.icon-VN\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7520px;background-repeat:no-repeat} .icon-VN-dims{width:32px;height:32px} .icon-VU,.icon-VU\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7552px;background-repeat:no-repeat} .icon-VU-dims{width:32px;height:32px} .icon-WS,.icon-WS\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7616px;background-repeat:no-repeat} .icon-WS-dims{width:32px;height:32px} .icon-XK,.icon-XK\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7648px;background-repeat:no-repeat} .icon-XK-dims{width:32px;height:32px} .icon-YE,.icon-YE\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7680px;background-repeat:no-repeat} .icon-YE-dims{width:32px;height:32px} .icon-ZA,.icon-ZA\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7744px;background-repeat:no-repeat} .icon-ZA-dims{width:32px;height:32px} .icon-ZM,.icon-ZM\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7776px;background-repeat:no-repeat} .icon-ZM-dims{width:32px;height:32px} .icon-ZW,.icon-ZW\:regular{background-image:url('/Content/images/flags.png');background-position:0 -7808px;background-repeat:no-repeat} .icon-ZW-dims{width:32px;height:32px} /* Phone/country flag: 20px for button, 16px for dropdown (JS scales background-position) */ .phone-country-code-flag[class*="icon-"], .phone-country-flag[class*="icon-"] { background-size: 20px auto !important; border-radius: 50%; flex-shrink: 0; font-family: inherit; } /* Ireland (ISO IE) shares class icon-IE with legacy browser icon — suppress glyph overlay (Safari) */ .phone-country-flag.icon-IE::before, .phone-country-code-flag.icon-IE::before, .option-flag.icon-IE::before, .custom-select-flag.icon-IE::before { content: none !important; display: none !important; } .phone-country-code-flag[class*="-dims"] { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; } .phone-country-flag[class*="-dims"] { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; background-size: 16px auto !important; } /* Validation styles from barion.account (profile Tailwind-only) */ .field-validation-error { color: #C32D48 !important; } .field-validation-valid { display: none; } input.input-validation-error { border-color: #C32D48 !important; } .validation-summary-errors { color: #C32D48; } .validation-summary-valid { display: none; } /* form-control: native select/input fallback (HasEmailConsentField, etc.) */ .form-control { @apply block w-full max-w-full min-w-0 box-border h-[42px] min-h-[42px] max-h-[42px] px-3 py-2.5 text-[16px] leading-[1.4] bg-white border border-[#ECEDF1] rounded-[6px] outline-none; } .form-control:focus { @apply border-[#99D5F1] shadow-[0_0_0_2px_rgba(153,213,241,0.80)]; } .form-control.input-validation-error { @apply !border-[#C32D48]; } /* Default input text color - applies to all form inputs, selects, textareas */ .form-control, .form-input, .form-select, .form-textarea, .form-dropdown, .form-dropdown-button, .custom-datepicker-input, .phone-number-input, .phone-country-code-display { @apply text-[#2C3446]; } /* Session timeout modal - hidden by default, show only when .in (Bootstrap modal) */ #timeoutWindowOverlay { display: none !important; position: fixed; inset: 0; z-index: 1040; overflow: auto; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.5); } #timeoutWindowOverlay.in, #timeoutWindowOverlay[style*="display: block"], #timeoutWindowOverlay.modal.in { display: flex !important; } #timeoutWindowOverlay .modal-dialog { @apply m-auto max-w-[440px] w-full; } #timeoutWindowOverlay .modal-content { @apply bg-white rounded-2xl border-none p-6 overflow-hidden shadow-[0_10px_40px_rgba(0,0,0,0.15)]; } #timeoutWindowOverlay .modal-header { @apply border-none pb-4; } #timeoutWindowOverlay .modal-header h4 { @apply m-0 text-2xl font-semibold leading-[1.3] text-[#2C3446]; font-family: 'weblysleek_uisemibold', "Helvetica Neue", Helvetica, Arial, sans-serif; } #timeoutWindowOverlay .modal-body { @apply pb-6 border-none text-base leading-[1.5] text-[#2C3446]; } #timeoutWindowOverlay .countdownContainer { @apply pt-4 text-[26px] font-semibold text-[#2C3446]; font-family: 'weblysleek_uisemibold', "Helvetica Neue", Helvetica, Arial, sans-serif; } #timeoutWindowOverlay .modal-footer { @apply border-none p-0 flex gap-3 flex-wrap; } #timeoutWindowOverlay .modal-footer #resetTimeout { @apply flex-1 min-w-[120px] h-[46px] px-6 text-base font-semibold border-none rounded-lg cursor-pointer text-white transition-opacity duration-200; font-family: 'weblysleek_uisemibold', "Helvetica Neue", Helvetica, Arial, sans-serif; background: linear-gradient(158deg, #0772CF 22.75%, #0097DB 86.15%); } #timeoutWindowOverlay .modal-footer #resetTimeout:hover { @apply opacity-95; } #timeoutWindowOverlay .modal-footer #logOut { @apply flex-1 min-w-[120px] h-[46px] px-6 text-base font-semibold rounded-lg cursor-pointer bg-white text-[#2C3446] transition-colors duration-200 border border-[#ECEDF1]; font-family: 'weblysleek_uisemibold', "Helvetica Neue", Helvetica, Arial, sans-serif; } #timeoutWindowOverlay .modal-footer #logOut:hover { @apply bg-[#F9F9F9]; } /* Custom component classes can be added here */ @layer components { /* Form Label Component */ .form-label { @apply block !mb-[6px] !text-[#2C3446] !font-semibold !leading-[140%] !text-[16px] not-italic; } /* Align inputs to bottom of their containers in grid layouts */ .grid.grid-cols-2, .grid.grid-cols-3, .grid.grid-cols-10 { @apply items-end; } .grid.grid-cols-2 > div, .grid.grid-cols-3 > div, .grid.grid-cols-10 > div { @apply flex flex-col; } /* Push input containers to bottom in grid items */ .grid.grid-cols-2 > div > .form-label + div, .grid.grid-cols-3 > div > .form-label + div, .grid.grid-cols-10 > div > .form-label + div { @apply mt-auto; } /* Form Input Component - 42px height, contained within parent */ .form-input { @apply flex items-center self-stretch w-full min-w-0 max-w-full box-border !h-[42px] !min-h-[42px] !max-h-[42px] !p-[10px] !pb-[10px] bg-white border border-[#ECEDF1] !rounded-[6px] focus:outline-none !text-[16px] !text-[#2C3446]; } /* Remove green/success borders - never show green borders */ .form-input.input-validation-valid, .form-input.field-validation-valid, .form-input.valid { @apply !border-[#ECEDF1]; } .form-input.input-validation-error:not(:focus), .form-input.field-validation-error:not(:focus) { @apply !border-[#C32D48]; } .form-input:focus { @apply !border-[#99D5F1] !shadow-[0_0_0_2px_rgba(153,213,241,0.80)]; } /* Disabled/readonly input styling */ .form-input[readonly], .form-input:disabled { @apply !bg-[#ECEDF1] !border-[#ECEDF1] !text-[#68718D] !cursor-default !pointer-events-none; } .form-input[readonly]:focus, .form-input:disabled:focus { @apply !outline-none !shadow-none !border-[#ECEDF1]; } .form-input::placeholder { @apply text-[#68718D]; } /* Form Select Component - 42px height, contained within parent */ .form-select { @apply flex items-center self-stretch w-full min-w-0 max-w-full box-border h-[42px] min-h-[42px] max-h-[42px] p-[10px] !pb-[10px] bg-white border border-[#ECEDF1] !rounded-[6px] focus:outline-none !text-[16px] !text-[#2C3446]; } /* TopUp Wire dropdown trigger – matches form-input look */ .topup-wire-trigger { @apply w-full h-[42px] p-[10px] pb-[10px] bg-white border border-[#ECEDF1] rounded-[6px] text-[16px] text-[#2C3446] flex items-center justify-between; } .topup-wire-trigger:focus { @apply outline-none border-[#99D5F1] shadow-[0_0_0_2px_rgba(153,213,241,0.80)]; } /* Remove green/success borders - never show green borders */ .form-select.input-validation-valid, .form-select.field-validation-valid, .form-select.valid { @apply !border-[#ECEDF1]; } .form-select.input-validation-error:not(:focus), .form-select.field-validation-error:not(:focus) { @apply !border-[#C32D48]; } .form-select:focus { @apply !border-[#99D5F1] !shadow-[0_0_0_2px_rgba(153,213,241,0.80)]; } /* Form Textarea Component */ .form-textarea { @apply block self-stretch w-full min-w-0 max-w-full box-border p-[10px] !pb-[10px] bg-white border border-[#ECEDF1] !rounded-[6px] focus:outline-none !text-[16px] !text-[#2C3446]; } /* Remove green/success borders - never show green borders */ .form-textarea.input-validation-valid, .form-textarea.field-validation-valid, .form-textarea.valid { @apply !border-[#ECEDF1]; } .form-textarea.input-validation-error:not(:focus), .form-textarea.field-validation-error:not(:focus) { @apply !border-[#C32D48]; } .form-textarea:focus { @apply !border-[#99D5F1] !shadow-[0_0_0_2px_rgba(153,213,241,0.80)]; } /* Custom DatePicker Component */ .custom-datepicker-wrapper { @apply relative; } /* Hide Kendo datepicker elements if they appear */ .custom-datepicker-wrapper .k-datepicker, .custom-datepicker-wrapper .k-datepicker .k-select, .custom-datepicker-wrapper .k-datepicker .k-icon, .custom-datepicker-wrapper .k-widget, .custom-datepicker-wrapper .k-picker-wrap { @apply !hidden; } .custom-datepicker-input { @apply cursor-text !pr-10 !pb-[10px] !text-[16px] !text-[#2C3446]; } /* Remove green/success borders - never show green borders */ .custom-datepicker-input.input-validation-valid, .custom-datepicker-input.field-validation-valid, .custom-datepicker-input.valid { @apply !border-[#ECEDF1]; } .custom-datepicker-input.input-validation-error:not(:focus), .custom-datepicker-input.field-validation-error:not(:focus), .custom-datepicker-wrapper:has(.field-validation-error) .custom-datepicker-input:not(:focus), .custom-datepicker-wrapper:has(.input-validation-error) .custom-datepicker-input:not(:focus) { @apply !border-[#C32D48]; } /* Apply error border when hidden field has validation error */ .custom-datepicker-hidden.input-validation-error ~ .custom-datepicker-input:not(:focus), .custom-datepicker-hidden.field-validation-error ~ .custom-datepicker-input:not(:focus) { @apply !border-[#C32D48]; } /* Apply error border when validation error message exists nearby (sibling selector) */ .custom-datepicker-wrapper + .validation-error ~ .custom-datepicker-wrapper .custom-datepicker-input:not(:focus), .custom-datepicker-wrapper ~ .validation-error ~ .custom-datepicker-wrapper .custom-datepicker-input:not(:focus) { @apply !border-[#C32D48]; } .custom-datepicker-input:focus { @apply !border-[#99D5F1] !shadow-[0_0_0_2px_rgba(153,213,241,0.80)]; } .custom-datepicker-calendar { @apply relative; @apply !border !border-[#ECEDF1] !rounded-[8px]; @apply !shadow-[0_3px_12px_0_rgba(0,0,0,0.05)]; @apply !w-auto !min-w-[275px]; } /* Mobile responsiveness for datepicker */ @media (max-width: 767px) { .custom-datepicker-calendar { @apply !max-w-[calc(100vw-20px)]; @apply !min-w-[280px]; } } .custom-datepicker-calendar .custom-datepicker-day { @apply !w-[36px] !h-[36px] flex items-center justify-center !rounded-[8px] cursor-pointer transition-colors; @apply !text-center !text-[15px] !font-semibold !leading-[140%] !text-[#2C3446]; @apply not-italic; @apply !flex-shrink-0 !flex-grow-0 !max-w-[36px] !max-h-[36px]; } .custom-datepicker-calendar .custom-datepicker-day:hover { @apply bg-[#F9F9F9]; } .custom-datepicker-calendar .custom-datepicker-day.other-month { @apply !text-[#6F7C8E]; } .custom-datepicker-calendar .custom-datepicker-day.selected { @apply bg-[#087FE7] !text-white; } .custom-datepicker-calendar .custom-datepicker-day.today { @apply border-2 border-[#087FE7]; } .custom-datepicker-calendar .custom-datepicker-header-cell { @apply !w-[36px] !h-[36px] flex items-center justify-center; @apply !text-center !text-[15px] !font-semibold !leading-[140%] !text-[#46516D]; @apply not-italic; @apply !flex-shrink-0 !flex-grow-0 !max-w-[36px] !max-h-[36px]; } .custom-datepicker-month-year { @apply !text-center !text-[15px] !font-semibold !leading-[140%] !text-[#2C3446]; @apply not-italic; } .custom-datepicker-nav-button { @apply w-8 h-8 flex items-center justify-center rounded-lg cursor-pointer; } /* Ownership / profile: full-width .form-dropdown-button rule collapses month/year controls in the datepicker header */ .profile-form-container .custom-datepicker-calendar { overflow: visible !important; } /* Attribute selectors: chains like ".flex.items-center" are parsed as utilities inside @layer and break the CLI */ .profile-form-container .custom-datepicker-calendar [class~="flex"][class~="items-center"][class~="gap-2"] > [class~="relative"] { flex-shrink: 0; } .profile-form-container .custom-datepicker-calendar [class~="flex"][class~="items-center"][class~="gap-2"] > [class~="relative"]:first-child .form-dropdown-button { width: 108px !important; min-width: 108px !important; max-width: 108px !important; } .profile-form-container .custom-datepicker-calendar [class~="flex"][class~="items-center"][class~="gap-2"] > [class~="relative"]:nth-child(2) .form-dropdown-button { width: 112px !important; min-width: 112px !important; max-width: 112px !important; } .profile-form-container .custom-datepicker-calendar .form-dropdown-list { z-index: 10000 !important; } /* Form Dropdown Component - 42px height, contained within parent */ .form-dropdown { @apply w-full min-w-0 max-w-full box-border h-[42px] min-h-[42px] max-h-[42px] pl-10 pr-10 pt-[10px] !pb-[10px] border border-[#ECEDF1] !rounded-[6px] bg-white font-normal outline-none appearance-none !text-[16px] !text-[#2C3446]; } /* Remove green/success borders - never show green borders */ .form-dropdown.input-validation-valid, .form-dropdown.field-validation-valid, .form-dropdown.valid { @apply !border-[#ECEDF1]; } .form-dropdown.input-validation-error:not(:focus), .form-dropdown.field-validation-error:not(:focus) { @apply !border-[#C32D48]; } .form-dropdown:focus { @apply !border-[#99D5F1] !shadow-[0_0_0_2px_rgba(153,213,241,0.80)]; } .form-dropdown:disabled { @apply bg-[rgb(238,239,242)] text-[rgb(186,191,204)]; } .form-dropdown::placeholder { @apply text-[rgb(151,159,178)]; } /* Custom Dropdown Button - 42px height, contained within parent */ .form-dropdown-button { @apply w-full min-w-0 max-w-full box-border h-[42px] min-h-[42px] max-h-[42px] pl-4 pr-10 pt-[10px] !pb-[10px] bg-white font-normal outline-none cursor-pointer flex items-center; @apply !rounded-[6px] border border-[#ECEDF1] !text-[#2C3446]; } /* Remove green/success borders - never show green borders */ .form-dropdown-button.input-validation-valid, .form-dropdown-button.field-validation-valid, .form-dropdown-button.valid { @apply !border-[#ECEDF1]; } /* Remove green/success borders - never show green borders */ .form-dropdown-button.input-validation-valid, .form-dropdown-button.field-validation-valid, .form-dropdown-button.valid { @apply !border-[#ECEDF1]; } .form-dropdown-button.input-validation-error:not(:focus), .form-dropdown-button.field-validation-error:not(:focus) { @apply !border-[#C32D48]; } .form-dropdown-button:focus { @apply !border-[#99D5F1] !shadow-[0_0_0_2px_rgba(153,213,241,0.80)]; } /* Phone Number Component */ .phone-number-group { @apply relative; } .phone-country-code-selector { @apply relative; } .phone-country-code-button { @apply !h-[42px] !rounded-r-none !border-r !border-[#ECEDF1] !px-2; background-color: #F9F9F9 !important; justify-content: flex-start !important; } .phone-country-code-flag { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; background-size: 20px auto !important; background-repeat: no-repeat; flex-shrink: 0; } .phone-country-code-display { color: #2C3446; font-size: 16px; font-style: normal; font-weight: 400; line-height: 160%; flex-shrink: 0; } .phone-number-input { @apply !rounded-l-none !border-l-0 !pb-[10px] !text-[16px] !text-[#2C3446]; } /* When any element in the group is focused, show unified focus border and hide border between button and input */ .phone-number-group:focus-within .phone-country-code-button { @apply !border-[#99D5F1]; border-right: none !important; box-shadow: -2px 0 0 0 rgba(153,213,241,0.80), 0 -2px 0 0 rgba(153,213,241,0.80), 0 2px 0 0 rgba(153,213,241,0.80) !important; outline: none !important; } .phone-number-group:focus-within .phone-number-input { @apply !border-[#99D5F1]; border-left: none !important; box-shadow: 2px 0 0 0 rgba(153,213,241,0.80), 0 -2px 0 0 rgba(153,213,241,0.80), 0 2px 0 0 rgba(153,213,241,0.80) !important; outline: none !important; } /* When dropdown is open (search input has focus) but phone input is not focused, restore normal borders */ .phone-number-group.phone-number-group-focused:not(:has(.phone-number-input:focus)) .phone-country-code-button:not(:focus) { @apply !border-r !border-[#ECEDF1] !shadow-none; } .phone-number-group.phone-number-group-focused:not(:has(.phone-number-input:focus)) .phone-number-input:not(:focus) { @apply !border-[#ECEDF1] !shadow-none; } .phone-country-code-input { @apply flex-1; } .phone-country-item { @apply flex items-center; } .phone-country-flag { @apply !w-[16px] !h-[16px] rounded-full flex-shrink-0 bg-cover bg-center bg-no-repeat; } .phone-country-name { color: #2C3446; font-size: 16px; font-style: normal; font-weight: 400; line-height: 160%; /* 25.6px */ } .phone-country-code-value { color: #2C3446; font-size: 16px; font-style: normal; font-weight: 400; line-height: 160%; /* 25.6px */ min-width: 50px; text-align: right; } /* Remove green/success borders - never show green borders */ .phone-number-input.input-validation-valid, .phone-number-input.field-validation-valid, .phone-number-input.valid, .phone-country-code-button.input-validation-valid, .phone-country-code-button.field-validation-valid, .phone-country-code-button.valid { @apply !border-[#ECEDF1]; } .phone-number-input.input-validation-error:not(:focus), .phone-number-input.field-validation-error:not(:focus) { @apply !border !border-[#C32D48] !border-l; } .phone-number-group:has(.phone-number-input.input-validation-error:not(:focus)) .phone-country-code-button, .phone-number-group:has(.phone-number-input.field-validation-error:not(:focus)) .phone-country-code-button { @apply !border-[#C32D48]; border-right-color: #ECEDF1 !important; } .phone-number-group:has(.phone-country-code-button.input-validation-error:not(:focus)) .phone-number-input, .phone-number-group:has(.phone-country-code-button.field-validation-error:not(:focus)) .phone-number-input { @apply !border-[#C32D48] !border-l-0; } /* Phone number: show error border whenever a related validation message is visible */ .phone-number-group:has(~ .pg-form-grouped-validation .field-validation-error:not(:empty)) .phone-number-input:not(:focus), .phone-number-group:has(~ .phoneval .field-validation-error:not(:empty)) .phone-number-input:not(:focus), .phone-number-group:has(~ .validation-error.field-validation-error:not(:empty)) .phone-number-input:not(:focus) { @apply !border !border-[#C32D48] !border-l; } .phone-number-group:has(~ .pg-form-grouped-validation .field-validation-error:not(:empty)) .phone-country-code-button:not(:focus), .phone-number-group:has(~ .phoneval .field-validation-error:not(:empty)) .phone-country-code-button:not(:focus), .phone-number-group:has(~ .validation-error.field-validation-error:not(:empty)) .phone-country-code-button:not(:focus) { @apply !border-[#C32D48]; border-right-color: #ECEDF1 !important; } /* Keep focus state stronger than message-driven error styling */ .phone-number-group:focus-within .phone-country-code-button { @apply !border-[#99D5F1]; border-color: #99D5F1 !important; border-right: none !important; box-shadow: -2px 0 0 0 rgba(153,213,241,0.80), 0 -2px 0 0 rgba(153,213,241,0.80), 0 2px 0 0 rgba(153,213,241,0.80) !important; position: relative; z-index: 2; } .phone-number-group:focus-within .phone-number-input { border-color: #99D5F1 !important; } /* When cursor is in the phone number input, keep dropdown side non-error */ .phone-number-group:has(.phone-number-input:focus) .phone-country-code-button { border-color: #99D5F1 !important; border-right-color: #ECEDF1 !important; } /* Explicitly suppress error border on dropdown while phone input/group is focused */ .phone-number-group:focus-within:has(.phone-number-input.input-validation-error) .phone-country-code-button, .phone-number-group:focus-within:has(.phone-number-input.field-validation-error) .phone-country-code-button, .phone-number-group:focus-within:has(~ .pg-form-grouped-validation .field-validation-error:not(:empty)) .phone-country-code-button, .phone-number-group:focus-within:has(~ .phoneval .field-validation-error:not(:empty)) .phone-country-code-button, .phone-number-group:focus-within:has(~ .validation-error.field-validation-error:not(:empty)) .phone-country-code-button { border-color: #99D5F1 !important; border-right-color: #ECEDF1 !important; } /* Custom dropdown menu styling */ .form-dropdown-list { @apply !rounded-[6px] p-2 bg-white border border-[#ECEDF1]; @apply shadow-[0_3px_12px_0_rgba(0,0,0,0.05)]; @apply absolute top-full left-0 right-0 z-50 mt-1 max-h-[290px] overflow-y-auto; } /* Dropdown opens upward when not enough space below */ .form-dropdown-list.dropdown-open-up { @apply !top-auto !bottom-full !mt-0 !mb-1; } /* Reduce dropdown height on smaller viewports to ensure bottom is visible */ @media (max-height: 800px) { .form-dropdown-list { max-height: 200px !important; } } @media (max-height: 600px) { .form-dropdown-list { max-height: 150px !important; } } @media (max-height: 500px) { .form-dropdown-list { max-height: 120px !important; } } /* Language selector button - custom styling */ .lang-selector-button { background-color: #ffffff !important; border: none !important; } @media (min-width: 768px) { .without-login .lang-selector-button { background-color: #F2F2F2 !important; } } .lang-selector-button:focus { border: none !important; box-shadow: none !important; } /* Language selector flag icon size */ .lang-selector-button .phone-country-flag, .lang-selector-dropdown .phone-country-flag { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; background-size: 20px auto !important; } /* Scale background positions for 20px flags (20/32 = 0.625) */ .lang-selector-button .icon-HU, .lang-selector-dropdown .icon-HU { background-position: 0 -1900px !important; /* -3040 * 0.625 */ } .lang-selector-button .icon-GB, .lang-selector-dropdown .icon-GB { background-position: 0 -1480px !important; /* -2368 * 0.625 */ } .lang-selector-button .icon-CZ, .lang-selector-dropdown .icon-CZ { background-position: 0 -1060px !important; /* -1696 * 0.625 */ } .lang-selector-button .icon-SK, .lang-selector-dropdown .icon-SK { background-position: 0 -3940px !important; /* -6304 * 0.625 */ } .lang-selector-button .icon-DE, .lang-selector-dropdown .icon-DE { background-position: 0 -1080px !important; /* -1728 * 0.625 */ } /* EU flag for Euro currency - uses SVG instead of country sprite, circular like other flags */ .icon-EU, .icon-EU-dims { background-image: url('/Content/images/svg/eu-flag.svg') !important; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; border-radius: 50% !important; overflow: hidden !important; } .icon-EU-dims { width: 32px; height: 32px; } /* Language selector dropdown - wider and no scrollbars */ .lang-selector-dropdown { min-width: 200px !important; width: auto !important; right: 0 !important; left: auto !important; overflow: hidden !important; max-height: none !important; } /* Phone country code dropdown opens on top */ .phone-country-code-list { @apply !rounded-[6px] p-2 bg-white border border-[#ECEDF1]; @apply shadow-[0_3px_12px_0_rgba(0,0,0,0.05)]; @apply absolute bottom-full left-0 z-50 mb-1 max-h-[300px] overflow-y-auto; } /* Month selector dropdown - fixed width */ #customDatePickerMonth + .form-dropdown-button, #customDatePickerRepresentativeMonth + .form-dropdown-button { width: 108px !important; min-width: 108px !important; max-width: 108px !important; } .form-dropdown-item { @apply h-[46px] px-2 flex items-center text-[#2C3446] cursor-pointer; } /* Logged-out pages: dropdown list items use revamp hover background */ body.without-login .form-dropdown-list .form-dropdown-item:not(.selected):hover, body.without-login .form-dropdown-list .form-dropdown-item:not(.selected):focus, body.without-login .phone-country-code-list .form-dropdown-item:not(.selected):hover, body.without-login .phone-country-code-list .form-dropdown-item:not(.selected):focus, body.login-page-layout .form-dropdown-list .form-dropdown-item:not(.selected):hover, body.login-page-layout .form-dropdown-list .form-dropdown-item:not(.selected):focus, body.login-page-layout .phone-country-code-list .form-dropdown-item:not(.selected):hover, body.login-page-layout .phone-country-code-list .form-dropdown-item:not(.selected):focus, body.registration-page-layout .form-dropdown-list .form-dropdown-item:not(.selected):hover, body.registration-page-layout .form-dropdown-list .form-dropdown-item:not(.selected):focus, body.registration-page-layout .phone-country-code-list .form-dropdown-item:not(.selected):hover, body.registration-page-layout .phone-country-code-list .form-dropdown-item:not(.selected):focus, body.mainPageLayout .form-dropdown-list .form-dropdown-item:not(.selected):hover, body.mainPageLayout .form-dropdown-list .form-dropdown-item:not(.selected):focus, body.mainPageLayout .phone-country-code-list .form-dropdown-item:not(.selected):hover, body.mainPageLayout .phone-country-code-list .form-dropdown-item:not(.selected):focus, body.minimal-page-layout .form-dropdown-list .form-dropdown-item:not(.selected):hover, body.minimal-page-layout .form-dropdown-list .form-dropdown-item:not(.selected):focus, body.minimal-page-layout .phone-country-code-list .form-dropdown-item:not(.selected):hover, body.minimal-page-layout .phone-country-code-list .form-dropdown-item:not(.selected):focus { @apply !bg-[#F9F9F9] !rounded-lg; outline: none; } .form-dropdown-item.selected { @apply bg-[#EEFAFF] text-[#0772CF] !rounded-lg; } .form-dropdown-item.selected:focus { @apply bg-[#EEFAFF] text-[#0772CF] !rounded-lg; border: 1px solid #99d5f1; outline: none; } /* Currency and country selector - match phone-country-code-list style/size */ .form-dropdown-list.currency-country-dropdown { @apply mt-[4px]; max-height: 300px !important; } .form-dropdown-list.currency-country-dropdown.dropdown-open-up { @apply !mt-0 !mb-1; } .form-dropdown-item.currency-selector-item, .form-dropdown-item.country-selector-item { @apply flex items-center; } .form-dropdown-item.currency-selector-item .phone-country-flag, .form-dropdown-item.country-selector-item .phone-country-flag { @apply flex-shrink-0 rounded-full block; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; background-size: 16px auto !important; background-repeat: no-repeat !important; } .form-dropdown-item.currency-selector-item .phone-country-name, .form-dropdown-item.country-selector-item .phone-country-name { color: #2C3446; font-size: 16px; font-style: normal; font-weight: 400; line-height: 160%; } /* Currency/country button - 20px flag like phone-country-code-button */ .form-dropdown-button .phone-country-code-flag { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; background-size: 20px auto !important; } /* Consent text links - match login page link style */ .consent-text-container a { color: #0772CF !important; } .consent-text-container a:hover { text-decoration: underline !important; color: #00a7eb !important; } /* Style links inside YouCanCloseThisWindow paragraph to match general terms link */ p.return-link-text a { @apply !text-[#0772CF] !text-[16px] !font-semibold !leading-[160%] !no-underline; } p.return-link-text a:hover { @apply !underline !text-[#00a7eb]; } /* Password Strength Indicator */ .password-feedback-container { @apply w-full; } .password-strength-container { @apply w-full !mt-2 !mb-[24px]; } /* No height when hidden - collapse completely when not visible */ .password-feedback-container .password-strength-container[style*="display: none"], .password-feedback-container .password-strength-container.hidden { @apply !m-0 !p-0 !min-h-0 !h-0; } .password-validation-message:empty { @apply !hidden; } .passwordStrength { @apply !w-full !h-[8px] !rounded-full !bg-transparent; } .passwordStrength.level_0 { @apply !bg-transparent; } .passwordStrength.level_1 { @apply !w-1/3 !bg-[linear-gradient(180deg,#FFB3B3_0%,#FF6B6B_100%)]; } .passwordStrength.level_2 { @apply !w-2/3 !bg-[linear-gradient(180deg,#FFE5A3_0%,#FFD93D_100%)]; } .passwordStrength.level_3 { @apply !w-full !bg-[linear-gradient(180deg,#C1E377_0%,#70D65F_100%)]; } .pstr { @apply !mb-1 !ml-0 !text-left !text-[#525F7F] !text-[14px] !font-semibold !leading-[140%]; } .address-subtitle { @apply !text-[#2C3446] !text-[16px] !font-normal !leading-[160%] !mb-4; @apply not-italic; } .email-label { @apply block !mb-[6px] !text-[#2C3446] !text-[16px] !font-normal !leading-[160%]; @apply not-italic; } .custom-checkbox { @apply !w-[16px] !h-[16px] !rounded-[2px] !border !border-[#C4CAD7] !bg-white; @apply !mt-[2px] !flex-shrink-0; @apply appearance-none cursor-pointer; @apply transition-colors; @apply !outline-none !shadow-none; -webkit-appearance: none !important; -moz-appearance: none !important; } .custom-checkbox:checked { @apply !border-[#087FE7] !bg-[#087FE7]; @apply !bg-no-repeat !bg-center; background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.5L4.5 8L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-size: 12px 9px !important; } .custom-checkbox:focus { @apply !outline-none !ring-0; box-shadow: 0 0 0 1px #99D5F1 !important; } /* Native radio: 16×16 outer (incl. 1px ring), 14×14 inner fill when checked (#087FE7 / #C4CAD7) */ .custom-radio { @apply !w-[16px] !h-[16px] !box-border !rounded-full !border !border-[#C4CAD7] !bg-white; @apply !mt-[2px] !flex-shrink-0; @apply appearance-none cursor-pointer; @apply transition-colors; @apply !outline-none !shadow-none; @apply !bg-no-repeat !bg-center; background-image: none !important; background-size: auto !important; -webkit-appearance: none !important; -moz-appearance: none !important; } .custom-radio:checked { @apply !border-[#087FE7] !bg-white; /* Padding box is 14×14; inner disc is 14px diameter (7px radius) */ background-image: radial-gradient( circle at center, #087fe7 0 5px, #ffffff 5px 100% ) !important; background-size: 100% 100% !important; } .custom-radio:focus { @apply !outline-none !ring-0; box-shadow: 0 0 0 1px #99D5F1 !important; } .checkbox-label-text { @apply !text-[#2C3446] !text-[14px] !font-semibold !leading-[140%]; @apply not-italic; } .checkbox-label-wrapper { @apply items-start; } /* Primary Button Component */ .submit-button-primary { @apply flex h-[46px] py-3.5 px-4 justify-center items-center gap-2 !rounded-[8px] font-semibold cursor-pointer transition-all border-0 outline-none no-underline; background: linear-gradient(158deg, #0074C7 22.75%, #0097DB 86.15%) !important; @apply !text-white !text-[16px] !leading-[140%] not-italic; } /* Bootstrap reboot (theme.css) uses a:hover { text-decoration: underline } — beats .submit-button-primary base no-underline on ; keep primary actions link-styled without underline on hover/focus */ .submit-button-primary:hover { background: linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%), linear-gradient(158deg, #0074C7 22.75%, #0097DB 86.15%) !important; color: #ffffff !important; text-decoration: none !important; } .submit-button-primary:active { background: linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), linear-gradient(158deg, #0074C7 22.75%, #0097DB 86.15%) !important; color: #ffffff !important; text-decoration: none !important; } .submit-button-primary:focus { text-decoration: none !important; } .submit-button-primary:focus-visible { text-decoration: none !important; border: 3px solid #33ACE2 !important; } .profile-form-container .beneficialOwnerDetails { position: relative; } .profile-form-container .beneficialOwnerDetails div.index { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative; left: auto; top: auto; width: 35px !important; height: 35px !important; background: #EEFAFF !important; color: #0772CF !important; font-family: "weblysleek_uisemibold", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 16px !important; line-height: 140% !important; border-radius: 0; text-indent: 0; margin-bottom: 0; } .profile-form-container .beneficialOwnerDetails .beneficialOwnerContent { border-left: 4px solid #EEFAFF; padding-left: 16px; } .profile-form-container .beneficialOwnerDetails .beneficialOwnerContent > * + * { margin-top: 24px; } /* Delete beneficial owner — same box model as .document-upload-button: h-[46px] px-6 py-3 */ .profile-form-container .deleteBeneficialOwnerBtn { @apply inline-flex items-center justify-center h-[46px] min-h-[46px] rounded-[8px] border-0 px-6 py-3; @apply font-semibold not-italic text-[16px] leading-[140%] cursor-pointer; @apply bg-[#ffe8ed] text-[#ad223b]; @apply shadow-none outline-none transition-all duration-150 ease-out; @apply focus:outline-none focus-visible:outline-none; @apply focus-visible:!shadow-[0_0_0_3px_rgba(249,135,156,0.3)]; } .profile-form-container .deleteBeneficialOwnerBtn:hover { @apply text-[#ad223b]; background: linear-gradient(0deg, rgba(119, 21, 39, 0.03) 0%, rgba(119, 21, 39, 0.03) 100%), var(--Surface-Surface-error, #ffe8ed) !important; } .profile-form-container .deleteBeneficialOwnerBtn:active { @apply border-0 shadow-none text-[#ad223b]; background: linear-gradient(0deg, rgba(119, 21, 39, 0.03) 0%, rgba(119, 21, 39, 0.03) 100%), var(--Surface-Surface-error, #ffe8ed) !important; } .profile-form-container .deleteBeneficialOwnerBtn:focus-visible:active { @apply border-0 text-[#ad223b]; box-shadow: 0 0 0 3px rgba(249, 135, 156, 0.3) !important; background: linear-gradient(0deg, rgba(119, 21, 39, 0.03) 0%, rgba(119, 21, 39, 0.03) 100%), var(--Surface-Surface-error, #ffe8ed) !important; } /* Secondary Button Component */ .submit-button-secondary { @apply flex h-[46px] py-3.5 px-4 justify-center items-center gap-2 self-stretch !rounded-[8px] w-full font-semibold cursor-pointer transition-all outline-none no-underline; @apply border border-[#ECEDF1] bg-white; @apply !text-[#2C3446] !text-[16px] !leading-[140%]; @apply not-italic; } .submit-button-secondary:hover { background: #ECEDF1 !important; @apply !text-[#2C3446]; text-decoration: none !important; } .submit-button-secondary:active { background: #ECEDF1 !important; @apply !text-[#2C3446]; text-decoration: none !important; } .submit-button-secondary:focus, .submit-button-secondary:focus-visible { @apply bg-[#F9F9F9] outline-none !text-[#2C3446]; text-decoration: none !important; } /* Document upload – file item card */ .document-upload-item { @apply flex items-center gap-3 h-[60px] min-h-[60px] p-[10px] box-border border-0; border-radius: 6px !important; background: #f9f9f9 !important; transition: background-color 0.2s ease; } .document-upload-item:hover { background: #ECEDF1 !important; } .document-upload-item-icon { @apply flex-shrink-0 flex items-center justify-center; } .document-upload-item-icon img { @apply block h-6 w-6; } .document-upload-item-content { @apply flex-1 min-w-0; } .document-upload-item .document-upload-item-content, .document-upload-item .document-upload-item-content:hover, .document-upload-item .document-upload-item-content:active, .document-upload-item .document-upload-item-content:focus { text-decoration: none !important; opacity: 1 !important; } .document-upload-item-filename { @apply text-[#2C3446] font-semibold text-[14px] truncate block; } .document-upload-item-meta { @apply text-[#68718D] text-[12px] mt-0.5; } /* Same box model as .document-upload-button: h-[46px] px-6 py-3 rounded-lg */ .document-upload-item .document-upload-item-remove { @apply !inline-flex !items-center !justify-center !h-[46px] !min-h-[46px] !shrink-0 !rounded-lg !border-0 !bg-transparent !pl-6 !pr-0 !py-3 !cursor-pointer !text-[#2C3446]; @apply !shadow-none outline-none; } .document-upload-item .document-upload-item-remove:hover, .document-upload-item .document-upload-item-remove:active { @apply !bg-transparent !opacity-100; } .document-upload-item .document-upload-item-remove:focus { outline: none !important; } .document-upload-item .document-upload-item-remove:focus-visible { outline: none !important; border: 3px solid #99d5f1 !important; } /* Document upload – upload button */ .document-upload-button { @apply inline-flex items-center gap-2 h-[46px] px-6 py-3 rounded-lg font-semibold text-[16px] cursor-pointer transition-all border-0 outline-none no-underline; background-color: #eefaff; --Surface-Surface-fill: #eefaff; @apply text-[#0772CF]; } .document-upload-button:hover { background: linear-gradient(0deg, rgba(44, 52, 70, 0.04) 0%, rgba(44, 52, 70, 0.04) 100%), var(--Surface-Surface-fill, #eefaff) !important; @apply border-0 text-[#0772CF]; } .document-upload-button:active { background: linear-gradient(0deg, rgba(44, 52, 70, 0.04) 0%, rgba(44, 52, 70, 0.04) 100%), var(--Surface-Surface-fill, #eefaff) !important; @apply border-0 text-[#0772CF]; } .document-upload-button:focus { outline: none !important; } .document-upload-button:focus-visible { outline: none !important; border: 3px solid #99d5f1 !important; } .document-upload-restrictions { @apply text-[#68718D] text-[14px] mt-2; } .datepicker-button { @apply !h-[30px] !text-[16px] !font-semibold !leading-[140%]; @apply not-italic; } .validation-error { @apply !text-[#C32D48] !text-[16px] !font-normal !leading-[160%]; @apply not-italic; } /* Login box: min-height for username and password input groups */ .login-box .bar-input-group { @apply min-h-[76px] w-full min-w-0 max-w-full; } .login-box .bar-input-group .form-input { @apply max-w-full; } .login-box form > [class~="w-full"] { @apply min-w-0 max-w-full; } /* Password step: back control and title align left (login-steps column defaults to centered items) */ .login-box .login-steps .password-wrapper { @apply items-start w-full; } /* Loading rows: match primary buttons; overflow visible so scaled spinner is not clipped */ .login-box .loading-login-button, .submit-button-primary[class*="loading"] { @apply !box-border !max-w-full !min-w-0 overflow-visible; @apply !h-[46px] !min-h-[46px] !max-h-[46px] !py-0 !px-4; font-size: unset; line-height: unset; letter-spacing: unset; } .login-box .errormsg>span { @apply !mt-0; } /* Login, register, forgotten password, etc.: line-height 200%, 4px space above validation message */ body.mainPageLayout .validation-error, body.without-login .validation-error, body.login-page-layout .validation-error, body.minimal-page-layout .validation-error, body.mainPageLayout .validation-error .field-validation-error, body.mainPageLayout .login-box .errormsg .field-validation-error, body.mainPageLayout .login-box .errormsg > span, body.without-login .validation-error .field-validation-error, body.without-login .login-box .errormsg .field-validation-error, body.without-login .login-box .errormsg > span, body.login-page-layout .validation-error .field-validation-error, body.login-page-layout .login-box .errormsg .field-validation-error, body.login-page-layout .login-box .errormsg > span, body.minimal-page-layout .validation-error .field-validation-error { line-height: 200% !important; } /* Ensure password/errormsg validation uses same format as email error */ .validation-error .field-validation-error, .login-box .errormsg .field-validation-error, .login-box .errormsg > span { @apply !text-[#C32D48] !text-[16px] !font-normal !leading-[160%] not-italic; } /* Hide validation error when input has focus, show when blur */ .hide-validation-on-focus .mb-4:focus-within .validation-error, .hide-validation-on-focus .passwordDiv:focus-within .validation-error, .hide-validation-on-focus .bar-input-group:focus-within .validation-error, .hide-validation-on-focus .password-feedback-container:focus-within .validation-error, .hide-validation-on-focus .bar-input-group:focus-within .errormsg { display: none !important; } /* Hide validation wrapper when no error (remove divs when not present) */ .hide-validation-on-focus .validation-error:has(.field-validation-valid):not(:has(.field-validation-error)) { display: none !important; } /* SetNewPassword: validation summary same format as field errors (no box, plain text) */ .setnewpassword-validation-summary.validation-summary-errors, .setnewpassword-validation-summary.validation-summary-errors ul, .setnewpassword-validation-summary.validation-summary-errors li { list-style: none !important; padding: 0 !important; margin: 0 !important; background: none !important; border: none !important; color: #C32D48 !important; text-align: left !important; } .setnewpassword-validation-summary.validation-summary-errors li + li { margin-top: 4px !important; } /* Responsive bounding box: default matches registration header (22/36); mainPageLayout mobile uses !px-[32px] to match 32px header gutters on non-registration logged-out pages. No ! on horizontal padding here so view utilities can apply. */ .responsive-bounding-box { @apply w-full min-w-0 max-w-full px-[22px] md:w-[510px] md:px-[24px]; @apply lg:w-[35%] lg:min-w-[510px] lg:max-w-[610px]; } /* Full-width CTAs inside bounded columns — avoid flex overflow (w-full + padding + content-box) */ .responsive-bounding-box .submit-button-primary { @apply box-border max-w-full min-w-0; } .responsive-bounding-box form > [class~="w-full"] { @apply min-w-0 max-w-full; } /* mainPageLayout (login, forgotten password, etc.): on small screens flex + overflow can make card side padding look missing — force same inset as header (22px) */ @media (max-width: 767px) { body.mainPageLayout .responsive-bounding-box { @apply !px-[32px] box-border; } /* Policy / legal link row sits outside the white card — give it the same horizontal inset */ body.mainPageLayout #main [class~="flex"][class~="flex-col"][class~="items-center"] > [class~="flex"][class~="flex-wrap"] { @apply !px-[32px] box-border; } } /* Kendo AutoComplete styling for Organization Category */ .reg-orgcat-autocomplete { @apply !h-[42px] !p-[10px] !pb-[10px] !text-[#2C3446] !bg-white !text-[16px]; } /* Remove gray background from Kendo AutoComplete wrapper */ .k-autocomplete, .k-autocomplete.k-state-default, .k-autocomplete.k-state-hover, .k-autocomplete.k-state-focused { @apply !bg-transparent !border-0 !shadow-none; position: relative !important; padding: 0 !important; margin: 0 !important; } /* Style the actual input inside Kendo AutoComplete - more specific selectors */ .areaOfWork .k-autocomplete .k-input, .areaOfWork .reg-orgcat-autocomplete.k-input, .k-autocomplete.reg-orgcat-autocomplete .k-input, input.reg-orgcat-autocomplete.k-input, input[name="OrganizationCategoryString"].k-input { height: 42px !important; @apply !p-[10px] !pb-[10px] !text-[#2C3446] !bg-white !border !border-[#ECEDF1] !rounded-[6px] !text-[16px]; @apply flex items-center self-stretch w-full focus:outline-none; box-sizing: border-box !important; position: relative !important; top: 0 !important; left: 0 !important; margin: 0 !important; } /* Remove green/success borders - never show green borders */ .reg-orgcat-autocomplete.input-validation-valid, .reg-orgcat-autocomplete.field-validation-valid, .reg-orgcat-autocomplete.valid, .k-autocomplete .k-input.input-validation-valid, .k-autocomplete .k-input.field-validation-valid, .k-autocomplete .k-input.valid { @apply !border-[#ECEDF1]; } .reg-orgcat-autocomplete.input-validation-error:not(:focus), .reg-orgcat-autocomplete.field-validation-error:not(:focus), .k-autocomplete .k-input.input-validation-error:not(:focus), .k-autocomplete .k-input.field-validation-error:not(:focus) { @apply !border-[#C32D48]; } .reg-orgcat-autocomplete:focus, .k-autocomplete.k-state-focused .k-input, .k-autocomplete .k-input:focus { @apply !border-[#99D5F1] !shadow-[0_0_0_2px_rgba(153,213,241,0.80)]; } /* Kendo AutoComplete dropdown list (shared) */ .k-list-container { @apply !rounded-[6px] !px-2 !py-1 !bg-white !border !border-[#ECEDF1]; @apply !shadow-[0_3px_12px_0_rgba(0,0,0,0.05)]; @apply !mt-1; box-sizing: border-box; max-width: 100%; overflow-x: hidden; } .k-list-container .k-list { @apply !p-0; } /* Kendo AutoComplete dropdown items (default: single-line row) */ .k-list-container .k-item { @apply !h-[46px] !px-2 !flex !items-center !text-[#2C3446] !cursor-pointer; @apply !border-0 !bg-transparent; box-sizing: border-box; min-width: 0; } .k-list-container .k-item:hover, .k-list-container .k-item.k-state-hover { @apply !bg-[#F9F9F9] !rounded-lg; } .k-list-container .k-item.k-state-selected, .k-list-container .k-item.k-state-focused { @apply !bg-[#F9F9F9] !rounded-lg; } /* Remove default Kendo styling */ .k-list-container .k-item .k-state-selected { @apply !bg-transparent; } /* Main activity (OrganizationCategoryString): popup is tagged in onOrganizationCategoryOpen */ .org-category-autocomplete-popup.k-animation-container, .org-category-autocomplete-popup { box-sizing: border-box !important; max-width: calc(100vw - 32px) !important; } .org-category-autocomplete-popup .k-list-container { @apply !py-1 !px-2; overflow-x: hidden !important; } .org-category-autocomplete-popup .k-list-container .k-list { max-height: min(38vh, 300px); overflow-y: auto; overflow-x: hidden; } .org-category-autocomplete-popup .k-list-container .k-item { @apply !min-h-[40px] !h-auto !max-h-none !py-2 !px-2 !items-start; height: auto !important; white-space: normal !important; word-break: break-word; overflow-wrap: anywhere; } } /* Custom utilities can be added here */ @layer utilities { /* Tailwind design: use weblysleek_uisemibold for all bold/semibold text and buttons instead of font-weight or TW font classes */ .font-semibold, .font-bold, [class*="font-semibold"], [class*="font-bold"], .form-label, .checkbox-label-text, .pstr, .custom-datepicker-day, .custom-datepicker-header-cell, .custom-datepicker-month-year, .datepicker-button, .submit-button-primary, .submit-button-secondary, .registration-tab-selected, .registration-tab-inactive, .topup-tab-selected, .topup-tab-inactive, /* All new design action buttons */ .dashboard-btn, .currency-modal-share-btn, .currency-modal-close-btn, .topup-step-card .btn-primary, .topup-step-card input[type="submit"], .new-card-form input[type="submit"], .create-currency-submit, [style*="font-weight: 600"], [style*="font-weight:600"], [style*="font-weight: 700"], [style*="font-weight:700"] { font-family: 'weblysleek_uisemibold', "Helvetica Neue", Helvetica, Arial, sans-serif !important; } } /* Registration tabs - full-width container, 50%-50% split, logo+text centered, hover/focus/active cover full tab */ .registration-tabs-container .registration-tab-selected, .registration-tabs-container .registration-tab-inactive { @apply !mb-[-2px] !py-2; min-width: 0; } /* Registration tab inner div - outline target, 6px radius on all edges, 2px above bottom border */ .registration-tab-inner { @apply !rounded-[6px] !mb-[2px]; } .registration-tab-selected:focus-visible .registration-tab-inner, .registration-tab-inactive:focus-visible .registration-tab-inner { @apply !shadow-[0_0_0_2px_#99D5F1]; } /* Selected tab - underline spans full 50%, straight underline, text stays #0772CF */ .registration-tab-selected { flex: 1 1 50%; } .registration-tab-selected:hover { @apply !text-[#0772CF]; } .registration-tab-selected:active, .registration-tab-selected:active svg { @apply !text-[#0772CF]; } .registration-tab-selected:focus { @apply !text-[#0772cf] outline-none; } .registration-tab-selected:focus-visible { @apply !text-[#0772CF] outline-none; } /* Inactive tab - 50% width, straight underline, gray text with hover/pressed variants */ .registration-tab-inactive { flex: 1 1 50%; } .registration-tab-inactive:focus { @apply !text-[#0772cf] outline-none; } .registration-tab-inactive:focus-visible { @apply outline-none; } /* Show password button styling */ .show-password { @apply outline-none; z-index: 10; } .show-password:hover { opacity: 0.7; } .show-password:focus, .show-password:focus-visible { @apply outline-none; opacity: 0.7; } .show-password img { display: block; } /* Result page layout styles */ @layer components { /* Full height layout for result pages */ body.result-page-layout, body.result-page-layout html { @apply !h-screen !overflow-hidden !m-0 !p-0; } body.result-page-layout { @apply !fixed !w-full; } body.result-page-layout .wrap.publicsite .clearfix.formsep { @apply !hidden !h-0 !m-0 !p-0; min-height: 0 !important; } body.result-page-layout > .wrap.publicsite { @apply !overflow-hidden !pb-0 !mb-0; } body.result-page-layout .main { @apply !h-full !overflow-hidden !pb-0 !mb-0; } /* Icon animations */ .origin-center { transform-origin: center; } @keyframes stroke { 100% { stroke-dashoffset: 0; } } @keyframes grow { 0% { transform: scale(0.25); } 100% { transform: scale(1); } } @keyframes grow-and-darken { 0% { transform: scale(0.82); opacity: 0.2; } 60% { transform: scale(0.98); } 100% { transform: scale(0.82); opacity: 0.4; } } @keyframes darken { 0% { opacity: 0; } 100% { opacity: 1; } } .animate-sentiment-light-bg { animation: grow-and-darken 1.25s ease-in 0.6s; } .animate-sentiment-dark-bg { animation: grow 0.25s ease-in-out; } .animate-success-stroke { animation: stroke 0.25s ease-out 0.4s forwards; } .animate-error-grow { animation: grow 0.25s ease-out 0.4s, darken 0.25s ease-in 0.4s forwards; } .animate-icon-content { animation: darken 0.25s ease-out 0.4s forwards; opacity: 0; } .barion-success-icon { @apply block; width: 162px; height: 163px; } .barion-error-icon { @apply block; width: 162px; height: 162px; } .barion-icon { @apply block; width: 162px; height: 162px; } /* Message page icons (success, error, info) - 44px with 24px top padding */ .message-page-icon { @apply flex justify-center items-center flex-shrink-0 mb-6; padding-top: 24px; } .message-page-icon svg { width: 54px !important; height: 54px !important; display: block; } /* Logged out page specific */ .logged-out-page-layout .main { @apply !pb-0; } .logged-out-page-layout body { @apply overflow-x-hidden; } .logged-out-page-layout .wrap.publicsite .clearfix.formsep { @apply !hidden !h-0 !m-0 !p-0; min-height: 0 !important; } /* HeaderWithoutLogin: logged-out (non-registration): 32px left, 12px right; layout-registration keeps 22/36 + md:pr-[36px] from markup */ body.without-login:not(.layout-registration) .header-without-login__lead { @apply !pl-[32px] md:!pl-[32px]; } body.without-login:not(.layout-registration) .header-without-login__trail { @apply !pr-[12px] md:!pr-[12px]; } /* Registration page layout */ .registration-page-layout .wrap.publicsite { background-color: #F2F2F2; } .registration-page-layout .main { @apply !pb-0; } /* Section headings in forms — not the page hero (same 32px as login: h1.login-title) */ .registration-page-layout h1:not(.login-title), .registration-page-layout h2, .registration-page-layout h3 { font-size: 24px !important; } /* Registration: hide selected flag in input/button, keep flags only in dropdown (except language selector, phone country code, and currency/country selectors) */ .registration-page-layout .form-dropdown-button:not(.lang-selector-button):not(.phone-country-code-button):not(.currency-country-selector-button):not(.country-selector-button) .phone-country-flag, .registration-page-layout .form-dropdown-button:not(.lang-selector-button):not(.phone-country-code-button):not(.currency-country-selector-button):not(.country-selector-button) .phone-country-code-flag { @apply !hidden; } /* Currency/country selector button - show flag on left like phone selector (20px) */ .currency-country-selector-button .phone-country-flag, .country-selector-button .phone-country-flag { @apply flex-shrink-0 rounded-full block; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; background-size: 20px auto !important; background-repeat: no-repeat !important; } .registration-page-layout .form-dropdown-button .phone-country-code-display, .registration-page-layout .phone-country-code-button .phone-country-code-display { @apply !ml-0; } .registration-page-layout body { @apply overflow-x-hidden; } /* Hide recaptcha validation message when empty */ .recaptcha-validation { @apply !hidden; } .recaptcha-validation:not(:empty) { @apply block; } .recaptcha-validation:empty { @apply !hidden; } /* SVG color inheritance for registration tabs */ .registration-tab-selected svg { @apply !text-[#0772CF]; } /* Inactive tab: text #46516D, hover only (not pressed) text #2C3446 */ .registration-tab-inactive { @apply !text-[#46516D]; } .registration-tab-inactive:hover { @apply !text-[#2C3446]; } .registration-tab-inactive svg { @apply !text-[#46516D]; } .registration-tab-inactive:hover svg { @apply !text-[#2C3446]; } /* Pressed state: keep default colors, no change */ .registration-tab-inactive:active, .registration-tab-inactive:active svg { @apply !text-[#46516D]; } /* Login page layout */ body.login-page-layout, body.login-page-layout html { @apply !h-screen !overflow-hidden !m-0 !p-0; } body.login-page-layout { @apply !fixed !w-full; } body.login-page-layout .wrap.publicsite .clearfix.formsep { @apply !hidden !h-0 !m-0 !p-0; min-height: 0 !important; } body.login-page-layout > .wrap.publicsite { @apply !overflow-y-auto !pb-0 !mb-0; background-color: #F2F2F2; } body.login-page-layout .main { @apply !h-full !overflow-y-auto !pb-0 !mb-0; } /* Secure Login page layout - apply to html and body when body has mainPageLayout class */ html:has(body.mainPageLayout), body.mainPageLayout { @apply !h-screen !overflow-hidden !m-0 !p-0; } body.mainPageLayout { @apply !fixed !w-full; } body.mainPageLayout .wrap.publicsite .clearfix.formsep { @apply !hidden !h-0 !m-0 !p-0; min-height: 0 !important; } body.mainPageLayout > .wrap.publicsite { @apply !overflow-hidden !pb-0 !mb-0; background-color: #F2F2F2; } /* Logged-out pages: match revamp shell background on md+ content columns and header */ @media (min-width: 768px) { body.without-login .login-page-column, body.login-page-layout .login-page-column, body.without-login [class*="md:bg-[#F9F9F9]"], body.login-page-layout [class*="md:bg-[#F9F9F9]"], body.registration-page-layout [class*="md:bg-[#F9F9F9]"], body.mainPageLayout [class*="md:bg-[#F9F9F9]"] { background-color: #F2F2F2 !important; } } body.mainPageLayout .main { @apply !h-full min-w-0 !overflow-y-auto !pb-0 !mb-0; } /* Activation Successful page: allow full page scroll (override mainPageLayout) */ html:has(body.activation-successful-page) { @apply !h-auto !min-h-screen !overflow-x-hidden !overflow-y-hidden; } body.activation-successful-page { @apply !relative !min-h-screen !overflow-x-hidden !overflow-y-auto; width: auto !important; height: auto !important; } body.activation-successful-page > .wrap.publicsite { @apply !overflow-visible; } body.activation-successful-page .wrap.publicsite .clearfix.formsep { @apply !hidden !h-0 !m-0 !p-0; min-height: 0 !important; } body.activation-successful-page .main { @apply !h-auto !overflow-visible !pb-0; } /* Policy document links under container (login, registration, etc.) - responsive font size to avoid line break on small screens */ .policy-footer-link { @apply text-[12px]; } @media (min-width: 640px) { .policy-footer-link { @apply text-[14px]; } } @media (min-width: 768px) { .policy-footer-link { @apply text-[16px]; } } body.login-page-layout .secureLoginBox { @apply !mb-0 !pb-0; } /* Login & registration: no underline by default */ body.login-page-layout a[href], body.registration-page-layout a[href] { text-decoration: none !important; } /* Underline on hover — base rule above + !important beats global a[href]:hover, so hover must be restated here. Exclude tab links (higher specificity on body rule would otherwise beat a.registration-tab-*:hover). */ body.login-page-layout a[href]:hover:not(.submit-button-primary):not(.submit-button-secondary):not(.registration-tab-selected):not(.registration-tab-inactive):not(.topup-tab-selected):not(.topup-tab-inactive), body.registration-page-layout a[href]:hover:not(.submit-button-primary):not(.submit-button-secondary):not(.registration-tab-selected):not(.registration-tab-inactive):not(.topup-tab-selected):not(.topup-tab-inactive) { text-decoration: underline !important; } body.registration-page-layout .show-password:hover { text-decoration: none !important; } /* Login column height: viewport minus header (~60px); with sandbox ribbon, body gets pt so subtract ribbon too */ body.login-page-layout .login-page-column { height: calc(100vh - 60px); } body.with-ribbon.login-page-layout .login-page-column { height: calc(100vh - 60px - 2.5rem); } @media (max-width: 767px) { body.with-ribbon.login-page-layout .login-page-column { height: calc(100vh - 60px - 3.5rem); } } /* Ribbon: same as registration (_LayoutRegistration) — .with-ribbon .wrap { margin-top } clears the ribbon; header is inside .wrap */ /* Dashboard Layout */ body.dashboard-layout { @apply !h-screen !overflow-hidden !m-0 !p-0; } /* Sandbox notification banner - new Tailwind design */ .notification-ribbon-wrapper { @apply w-full fixed left-0 top-0 z-[100] overflow-hidden h-10 border-b border-white/10 bg-[linear-gradient(90deg,#2D3748_0%,#1A202C_100%)]; } .notification-ribbon { @apply flex items-center justify-center h-full px-4 md:px-6; max-width: 100%; } .notification-ribbon-inner { @apply flex flex-wrap items-center justify-center w-full max-w-[1200px] gap-4 text-center; } .notification-ribbon-sandbox { @apply w-full text-white text-[14px] leading-[1.4] font-normal sm:w-auto; } .notification-ribbon-sandbox a { @apply text-[#63B3ED] underline hover:no-underline hover:text-[#90CDF4] transition-colors; } .notification-ribbon-verification { @apply flex w-full flex-wrap items-center justify-center gap-2 text-[#F6E05E] text-[14px] leading-[1.4] sm:w-auto; } .notification-ribbon-verification .icon-warning { @apply flex-shrink-0; } .notification-ribbon-verification .btn { @apply !h-[28px] !px-3 !text-[13px] !font-semibold !rounded-[6px] !border-0 !no-underline !bg-[#48BB78] !text-white; } .notification-ribbon-verification .btn:hover { @apply !bg-[#38A169] !text-white; } @media (max-width: 767px) { .notification-ribbon-inner { @apply flex-col justify-center gap-1 py-1 text-center; } .notification-ribbon-wrapper { @apply h-auto min-h-10; } /* On mobile, ribbon can stack and be taller – add extra bottom padding so content below is visible */ body.dashboard-layout.with-ribbon .dashboard-container { @apply !pt-14; } body.dashboard-layout.with-ribbon .dashboard-sidebar { @apply !top-14 !h-[calc(100vh-56px)]; } body.dashboard-layout.with-ribbon .dashboard-sidebar-overlay { @apply !top-14 !h-[calc(100vh-56px)]; } } /* Notification ribbon: visible above dashboard and page starts below it */ body.dashboard-layout .notification-ribbon-wrapper { z-index: 100 !important; } body.dashboard-layout.with-ribbon .dashboard-container { @apply !pt-10 !h-screen !min-h-screen; } /* Minimal page (TopUp): flex column so main area fills viewport; wrapper flex-1 avoids double vertical scroll */ body.minimal-page-layout { @apply m-0 flex min-h-screen flex-col overflow-x-hidden; } body.minimal-page-layout .minimal-page-wrapper { @apply flex min-h-0 min-w-0 max-w-full flex-1 flex-col overflow-x-hidden !bg-[#F2F2F2]; } /* Fixed sandbox ribbon (40px): pad wrapper so header/X sit below it; do not add extra min-height beyond viewport */ body.minimal-page-layout.with-ribbon .minimal-page-wrapper { @apply !pt-10; box-sizing: border-box; max-height: 100vh; max-height: 100dvh; } @media (max-width: 767px) { /* Ribbon can stack taller on small screens — match dashboard padding */ body.minimal-page-layout.with-ribbon .minimal-page-wrapper { @apply !pt-14; } } .minimal-page-header { @apply relative z-20 box-border w-full max-w-full min-w-0 shrink-0 overflow-x-hidden !bg-[#F2F2F2]; } .dashboard-container { @apply flex !h-screen !overflow-hidden; } .dashboard-sidebar { @apply !w-[280px] !max-w-full !bg-white !overflow-y-auto !overflow-x-hidden !flex-shrink-0 !py-6; } /* Sidebar scrollbar: track background #ffffff */ .dashboard-sidebar::-webkit-scrollbar { width: 8px; } .dashboard-sidebar::-webkit-scrollbar-track { background: #ffffff; } .dashboard-sidebar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; } .dashboard-sidebar::-webkit-scrollbar-thumb:hover { background: #9ca3af; } .dashboard-sidebar { scrollbar-color: #d1d5db #ffffff; scrollbar-width: thin; } /* Mobile responsive sidebar - hidden by default on mobile */ @media (max-width: 767px) { .dashboard-sidebar { position: fixed !important; top: 0 !important; left: 0 !important; height: 100% !important; z-index: 50 !important; transform: translateX(-100%) !important; transition: transform 0.3s ease-in-out !important; } .dashboard-sidebar.mobile-open { transform: translateX(0) !important; } /* Sidebar and overlay start below the sandbox notification banner (56px on mobile when ribbon can stack) */ body.dashboard-layout.with-ribbon .dashboard-sidebar { top: 56px !important; height: calc(100vh - 56px) !important; } .dashboard-sidebar-overlay { position: fixed !important; inset: 0 !important; background-color: rgba(0, 0, 0, 0.5) !important; z-index: 40 !important; transition: opacity 0.3s !important; } /* Overlay starts below the sandbox notification banner */ body.dashboard-layout.with-ribbon .dashboard-sidebar-overlay { top: 56px !important; height: calc(100vh - 56px) !important; } .dashboard-content { width: 100% !important; } } .dashboard-content { @apply flex-1 !min-h-0 !overflow-y-auto !bg-[#F2F2F2] !w-full !pl-0; } /* Wallet choice page: container at top of page like login page */ .wallets-page-content { @apply !flex !flex-col !min-h-0; } .wallets-page-center-wrap { @apply !flex-1 !flex !items-start !justify-center !min-h-0 !bg-[#F2F2F2] !pt-6 !pb-6 !px-4 !overflow-y-auto; } /* Same width and responsive behavior as login page container */ .wallets-page-center-inner { @apply !flex !items-start !justify-center !w-full; width: 100%; max-width: 100%; } .wallets-page-center-inner .responsive-bounding-box, .minimal-page-center-inner .responsive-bounding-box { width: 100%; } @media (min-width: 768px) { .wallets-page-center-inner .responsive-bounding-box, .minimal-page-center-inner .responsive-bounding-box { width: 510px; max-width: 100%; } } @media (min-width: 1024px) { .wallets-page-center-inner .responsive-bounding-box, .minimal-page-center-inner .responsive-bounding-box { width: 35%; min-width: 510px; max-width: 610px; } } /* Wallets page typography */ .wallet-section-title { font-family: 'weblysleek_uisemibold', "Helvetica Neue", Helvetica, Arial, sans-serif !important; @apply !text-[#2C3446] !text-[18px] !not-italic !leading-[140%]; border-bottom: 1px solid #ECEDF1; padding-bottom: 6px; margin-bottom: 16px; } .wallet-name { font-family: 'weblysleek_uisemibold', "Helvetica Neue", Helvetica, Arial, sans-serif !important; @apply !text-[#2C3446] !text-[16px] !not-italic !leading-[140%]; } .wallet-email { @apply !text-[#525F7F] !text-[14px]; } .wallet-admin-label { font-family: 'weblysleek_uisemibold', "Helvetica Neue", Helvetica, Arial, sans-serif !important; @apply !text-[#46516D] !text-[12px]; } .wallet-row-labels-mobile { display: flex !important; } .wallet-row-labels-desktop { display: none !important; } @media (min-width: 768px) { .wallet-row-labels-mobile { display: none !important; } .wallet-row-labels-desktop { display: flex !important; } } #walletSearch { padding-left: 36px !important; } .dashboard-content-inner { @apply !px-6 !pb-12 !pt-0; } /* Balances page: full-width content area */ .dashboard-content-inner:has(.balances-page-full) { max-width: none !important; } /* Dashboard Index: full-width page content (welcome, currency cards, activities table) */ .dashboard-content-inner:has(.dashboard-index-full) { max-width: none !important; } /* Dashboard Index: align header height with sidebar profile so buttons align with first menu item (Home) */ .dashboard-content:has(.dashboard-index-full) .dashboard-header { @apply !pt-[30px] !pb-[27px]; } /* Balances page: same header padding as dashboard index */ .dashboard-content:has(.balances-page-full) .dashboard-header { @apply !pt-[30px] !pb-[27px]; } /* Recipients page: full-width layout + header alignment (matches balances / statement) */ .dashboard-content-inner:has(.bank-transfer-index-revamp) { @apply !max-w-none; } .dashboard-content:has(.recipients-page-full) .dashboard-header, .dashboard-content:has(.bank-transfer-index-revamp) .dashboard-header { @apply !pt-[30px] !pb-[27px]; } /* Recipients index: lock page scroll; only the table body scrolls inside the card */ .dashboard-content:has(.recipients-page-full) { @apply !flex !flex-col !overflow-y-hidden; } .dashboard-content-inner:has(.recipients-page-full) { @apply !flex !flex-1 !flex-col !min-h-0 !max-w-none !overflow-hidden !pb-8; } .recipients-page-full { @apply !flex !flex-1 !flex-col !min-h-0 !w-full !gap-6; } .recipients-page-full .recipients-toolbar, .recipients-page-full .dashboard-welcome { @apply !shrink-0; } .recipients-page-full .recipients-activities-section { @apply !mb-2 !flex !flex-1 !flex-col !min-h-0; } .recipients-page-full .dashboard-welcome { @apply !mb-0 !flex !flex-row !items-center !gap-4 !overflow-visible; } .recipients-page-full .recipients-buttons { @apply !overflow-visible !py-[2px]; } .recipients-page-full #add-new-recipient-button.submit-button-primary { @apply !box-border !inline-flex !h-[42px] !min-h-[42px] !max-h-[42px] !py-0; } /* Recipients toolbar search — flex layout only; visuals on .barion-search-box--revamp */ .recipients-page-full .recipients-buttons .recipients-search-box--toolbar { @apply !min-w-0 !shrink-0 flex-[0_1_auto] !overflow-visible !p-[2px] !-m-[2px]; } .recipients-page-full .recipients-buttons .recipients-search-box--toolbar:has(.barion-search-box.opened) { @apply max-w-full flex-[1_1_12rem]; } .recipients-page-full .activities-section { @apply !mt-0; } /* Profile form: card container, validation same as TopUp/register */ .profile-form-container .profile-card .validation-error, .profile-form-container .profile-card .pg-form-grouped-validation .validation-error { @apply !text-[#C32D48] !text-[16px] !font-normal !leading-[160%] not-italic; } /* Profile form: 46px height for inputs, dropdowns, datepicker, phone - enforce strictly */ .profile-form-container .form-input, .profile-form-container .form-select, .profile-form-container .form-dropdown, .profile-form-container .form-dropdown-button, .profile-form-container .form-control, .profile-form-container .custom-datepicker-input, .profile-form-container .phone-number-input, .profile-form-container .phone-country-code-button { box-sizing: border-box !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; width: 100% !important; max-width: 100% !important; } .profile-form-container .cellphonenumberbox .phone-number, .profile-form-container .phone-number-group .phone-country-code-button, .profile-form-container .phone-number-group .phone-number-input { height: 46px !important; min-height: 46px !important; max-height: 46px !important; } .profile-form-container .barionDatePicker, .profile-form-container input.k-input { height: 46px !important; min-height: 46px !important; } /* Profile form: top names group (LastName/FirstName) – no bottom margin */ .profile-form-container .space-y-6 > .grid:first-child > div { @apply !mb-0; } /* Profile form: constrain container and prevent inputs from overflowing */ .profile-form-container { @apply !min-w-0 md:!min-w-[568px] lg:!min-w-[762px] md:!max-w-[50%] !w-full; --Surface-Surface-error: #ffe8ed; } /* Profile form: remove shadow from container card */ .profile-form-container .profile-card { @apply !shadow-none; } .profile-form-container .form-input, .profile-form-container .form-dropdown, .profile-form-container select.form-control { min-width: 0 !important; } /* Profile form: timezone and other dropdowns - truncate selected text to fit container */ .profile-form-container .form-dropdown-button > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0; } /* Profile form: timezone dropdown options can wrap to multiple lines without overlapping rows */ .profile-form-container select#UserTimeZone + .form-dropdown-button + .form-dropdown-list .form-dropdown-item { @apply !h-auto !min-h-[46px] items-center py-2; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; } /* Profile form: submit button - ensure fully clickable (override main-action float, prevent overlay blocking) */ .profile-form-container .submit-button-primary, .profile-form-container input[type="submit"].submit-button-primary, .profile-form-container input[type="submit"].main-action { position: relative !important; z-index: 2 !important; pointer-events: auto !important; float: none !important; } /* Profile: ignores flex centering from .submit-button-primary — use line-height = height */ .profile-form-container input[type="submit"].submit-button-primary.main-action { display: inline-block !important; box-sizing: border-box !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; line-height: 46px !important; padding-top: 0 !important; padding-bottom: 0 !important; vertical-align: middle !important; } /* Profile save/loading toggle: force hidden state to win over inline and !important display rules */ .profile-form-container #SubmitModifyProfile.hidden { display: none !important; } .profile-form-container .loading-modify-profile-button.hidden { display: none !important; } /* Profile: extra space below bottom save / loading row */ .profile-form-container .profile-form-save-footer { @apply !mb-10 md:!mb-12 !pb-2; } /* Profile page: account header - outside card, left-aligned */ .profile-page-header { @apply flex items-center justify-start gap-4 flex-1 min-w-0; } .profile-page-avatar-section { @apply flex items-center justify-start gap-4; } .profile-page-avatar-wrapper { @apply flex-shrink-0; position: relative !important; } .profile-page-name { font-family: weblysleek_uisemibold, "Helvetica Neue", Helvetica, Arial, sans-serif; @apply !text-[#2C3446] !text-[32px] !leading-[120%] truncate; } .profile-page-email { @apply !text-[#46516D] !text-[16px] !leading-[160%] truncate; } .profile-page-avatar-edit-badge { @apply flex items-center justify-center; } .profile-page-avatar-wrapper .profile-page-avatar { width: 54px !important; height: 54px !important; } /* Profile page: EditWalletAvatar layout - avatar in left col, name/email in right col */ .profile-page-avatar-edit-wrapper.profile { @apply flex flex-row items-center justify-start gap-4 flex-1 min-w-0; } .profile-page-avatar-edit-wrapper .profile { @apply flex flex-row items-center justify-start gap-4 flex-1 min-w-0; } .profile-page-avatar-edit-wrapper .changeAvatar { @apply hidden; } .profile-page-avatar-edit-wrapper .avatarBox { @apply flex-shrink-0 relative cursor-pointer; width: 54px !important; height: 54px !important; min-height: 54px !important; } .profile-page-avatar-edit-wrapper .avatarBox .changeAvatarButton { @apply absolute inset-0 block z-[1]; } .profile-page-avatar-edit-wrapper .avatarHolder { @apply block w-full h-full rounded-full bg-cover bg-center bg-no-repeat; width: 54px !important; height: 54px !important; } .profile-page-avatar-edit-wrapper .avatarBox::after { content: ""; @apply absolute bottom-0 right-0 w-6 h-6 rounded-full bg-[#0097DB]; background-image: url("/Content/images/svg/profile-edit.svg"); background-size: 16px 16px; background-position: center; background-repeat: no-repeat; } .profile-page-avatar-edit-wrapper .data { @apply flex flex-col min-w-0 flex-1; } .profile-page-avatar-edit-wrapper .data .details .profile-page-name { font-family: weblysleek_uisemibold, "Helvetica Neue", Helvetica, Arial, sans-serif; @apply !text-[#2C3446] !text-[32px] !leading-[120%] !m-0 !mb-0.5 truncate; } /* Business profile header: hide lift-limits / verification link only (email stays under name) */ body.dashboard-business-profile-edit .profile-page-avatar-edit-wrapper .data a.btn.btn-primary { @apply !hidden; } .profile-page-avatar-edit-wrapper .data .details .profile-page-email { @apply !text-[#46516D] !text-[16px] !leading-[160%] truncate; } .profile-form-container .cellphonenumberbox .phone-number { @apply flex items-center self-stretch w-full !h-[42px] !p-[10px] !pb-[10px] bg-white border border-[#ECEDF1] !rounded-[6px] focus:outline-none !text-[16px]; } /* Loading spinner for profile save button (TailwindOnly pages) */ .profile-form-container .loading-spinner { position: relative; width: 20px !important; height: 20px !important; -webkit-transform: translate(-10px, -10px) scale(0.1) translate(10px, 10px); transform: translate(-10px, -10px) scale(0.1) translate(10px, 10px); } .profile-form-container .loading-spinner div, .profile-form-container .loading-spinner div:after { position: absolute; width: 180px; height: 180px; border-width: 20px; border-style: solid; border-radius: 50% !important; border-top-color: transparent; } .profile-form-container .loading-spinner div { -webkit-animation: profile-loading-spinner 1s linear infinite; animation: profile-loading-spinner 1s linear infinite; top: 100px; left: 100px; } .profile-form-container .loading-spinner div:after { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .profile-form-container .loading-spinner .white, .profile-form-container .loading-spinner .white:after { border-color: #ffffff; border-top-color: transparent; } @keyframes profile-loading-spinner { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @-webkit-keyframes profile-loading-spinner { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } .balances-page-full { @apply !flex !flex-col !min-h-0 !w-full !gap-6; } /* 24px between New currency button row and table card */ .balances-page-full .dashboard-welcome { @apply !mb-0 !flex !flex-row !justify-between !items-center !gap-4; } /* Statements filters / empty toolbar: align actions row (balances welcome defaults to items-center) */ .balances-page-full .dashboard-welcome.statement-dashboard-filters, .balances-page-full .dashboard-welcome.statement-dashboard-toolbar { @apply !items-end; } /* Statement toolbar Settings (Index filters row + empty state): lock to 46px, content width, right-aligned. Base .submit-button-secondary uses w-full + self-stretch so a lone link fills the row without these overrides. */ .balances-page-full .statement-toolbar-settings-link.submit-button-secondary { @apply !box-border !inline-flex !self-end !h-[46px] !min-h-[46px] !max-h-[46px] !w-auto !max-w-none !py-0 !px-4 !whitespace-nowrap !leading-none !overflow-hidden !items-center !justify-center; } .balances-page-full .statement-toolbar-settings-link.submit-button-secondary:hover, .balances-page-full .statement-toolbar-settings-link.submit-button-secondary:active { background-color: #F9F9F9 !important; } /* Statement filters Load — match .form-dropdown-button height (42px) and align with dropdown row */ .balances-page-full .statement-dashboard-filters .statement-load-button.submit-button-primary { @apply !box-border !inline-flex !self-end !shrink-0 !h-[42px] !min-h-[42px] !max-h-[42px] !py-0 !px-4 !leading-none !items-center !justify-center; } /* Statement grid download — icon + label underlined together on hover (2px offset), color unchanged. Overrides global a[href]:hover underline/color (see top of file). */ .statement-download-link { @apply relative cursor-pointer text-[16px] font-semibold leading-none text-[#0772cf] no-underline; } a.statement-download-link[href], a.statement-download-link[href]:visited, a.statement-download-link[href]:hover, a.statement-download-link[href]:focus, a.statement-download-link[href]:active { color: #0772cf !important; text-decoration: none !important; } a.statement-download-link[href]:hover span { text-decoration: none !important; } a.statement-download-link[href]:hover::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background-color: #0772cf; } .statement-download-link svg, .statement-download-link img { @apply shrink-0; } /* Statement Settings revamp — title block + spacing to form fields */ .statement-settings-title { @apply m-0 text-[16px] leading-[120%] text-[#2C3446]; font-family: 'weblysleek_uisemibold', "Helvetica Neue", Helvetica, Arial, sans-serif; } .statement-settings-subtitle { @apply m-0 mt-1 pb-[10px] text-[14px] font-normal leading-[120%] text-[#465067]; } .statement-settings-separator { @apply m-0 border-0 border-b border-[#ECEDF1]; } .statement-settings-intro .statement-settings-separator { @apply mb-[10px]; } .statement-settings-fields { @apply pt-[24px]; } .statement-settings-fields .form-label { @apply !mb-0; } .statement-settings-row { @apply flex w-full flex-wrap items-end justify-between gap-x-6 gap-y-2; } .statement-settings-row__field { @apply !w-[280px] !max-w-full !shrink-0; } .statement-settings-row__field .statement-filter-dropdown-wrap { @apply !w-[280px] !max-w-full; } .statement-settings-enabled { @apply !pb-[13px]; } /* Statement custom dropdowns (Index + Settings revamp): chevron 4px from right; list z-index + item hover */ .balances-page-full .statement-filter-dropdown-chevron { @apply !right-1 !left-auto -translate-y-1/2; } .balances-page-full .statement-filter-dropdown-list { @apply z-[100]; } .balances-page-full .statement-filter-dropdown-list .form-dropdown-item:not(.selected):hover { @apply rounded-lg bg-[#F9F9F9]; } .balances-page-full .statement-filter-dropdown-list .form-dropdown-item:not(.selected):focus { @apply rounded-lg bg-[#F9F9F9] outline-none; } /* Statement settings revamp: disable native select + custom dropdown UI during save */ .statement-filter-dropdown-wrap.statement-dropdown-disabled { @apply pointer-events-none opacity-[0.55]; } .balances-page-full .activities-section { @apply !mt-0; } .balances-page-full .dashboard-welcome h1 { @apply !mb-0; } .balances-page-full .dashboard-actions { @apply !mb-0 !shrink-0; } .balances-grid-fullscreen { @apply !flex-1 !flex !flex-col !min-h-0 !w-full !min-w-0 !max-w-full; } /* Prevent flex overflow from eating horizontal padding on the white table card */ .balances-page-full .balances-grid-section { @apply !w-full !min-w-0 !max-w-full; } .balances-grid-fullscreen .balances-grid-wrapper { @apply !flex-1 !min-h-0 !min-w-0 !w-full !max-w-full !overflow-x-hidden !overflow-y-hidden; } .dashboard-header { @apply flex !justify-between !items-center !px-6 !py-5 !bg-[#F2F2F2] !sticky !top-0 !z-10 !gap-5 !mb-0 min-h-[42px]; transition: background-color 0.25s ease; } .dashboard-header.dashboard-header-scrolled { background-color: #ffffff !important; } .dashboard-header-title { @apply !text-[32px] !text-[#2C3446] !m-0 !leading-none; font-family: 'weblysleek_uisemibold', "Helvetica Neue", Helvetica, Arial, sans-serif !important; } .dashboard-mobile-menu-toggle { @apply !flex !items-center !justify-center !w-6 !h-6 !p-0 !bg-transparent !border-0 !cursor-pointer; } .dashboard-mobile-profile-toggle { @apply !flex !items-center !justify-center !w-6 !h-6 !p-0 !bg-transparent !border-0 !cursor-pointer; } @media (min-width: 768px) { .dashboard-mobile-menu-toggle { display: none !important; } } .dashboard-help-icon { @apply !w-[20px] !h-[20px] !flex-shrink-0; } .dashboard-help-icon svg { @apply !w-[20px] !h-[20px]; } /* Dashboard Profile Avatar - simplified version */ #profile.dashboard-profile-wrapper { @apply !relative; } .dashboard-profile-avatar { @apply !flex !items-center !justify-center !w-[36px] !h-[36px] !rounded-full !cursor-pointer !border-0 !bg-transparent !p-0 !m-0; } .dashboard-profile-avatar > div { @apply !relative !w-[36px] !h-[36px] !rounded-full !m-0 !bg-cover !bg-center !bg-no-repeat; } .dashboard-profile-menu { @apply !absolute !right-0 !top-full !mt-2 !bg-white !rounded-lg !shadow-lg !border !border-gray-200 !z-50 !min-w-[246px] !p-[10px]; } .dashboard-profile-menu .profile-info { @apply !px-2 !py-0 !pb-[10px] !mb-[4px] !flex !items-center !justify-between !gap-2; } .dashboard-profile-menu .profile-info + hr { @apply !hidden; } .dashboard-profile-menu .profile-name { @apply !text-sm; } .dashboard-profile-menu .profile-name p { @apply !m-0 !mb-1 !not-italic !text-[14px] !leading-[140%]; font-family: 'weblysleek_uisemibold', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; } .dashboard-profile-menu .profile-name p:last-child { @apply !mb-0; } .dashboard-profile-menu .profile-name p small, .dashboard-profile-menu .profile-name p:last-child small { @apply !text-[12px]; font-family: weblysleek_uisemilight, 'Helvetica Neue', Helvetica, Arial, sans-serif !important; } .dashboard-profile-menu hr { @apply !my-2 !border-0 !border-t !border-solid !border-[#ECEDF1]; } .dashboard-profile-language-selector { @apply mb-1; } .dashboard-profile-language-trigger { @apply inline-flex w-auto shrink-0 items-center self-center gap-1 rounded-[6px] bg-transparent px-0 py-0 text-left leading-none cursor-pointer; } .dashboard-profile-language-trigger:hover { @apply bg-transparent; } .dashboard-profile-language-trigger.is-open { @apply bg-[#EEFAFF]; } .dashboard-profile-language-chevron { @apply inline-flex h-4 w-4 items-center justify-center text-[#46516D] transition-transform duration-200; } .dashboard-profile-language-trigger.is-open .dashboard-profile-language-chevron { @apply rotate-180 text-[#0772CF]; } .dashboard-profile-language-options { @apply mt-0; } .dashboard-profile-menu .dashboard-profile-language-options a.dashboard-profile-language-option { @apply !h-[44px] !justify-start !gap-3 !px-[10px]; } .dashboard-profile-menu .dashboard-profile-language-options a.dashboard-profile-language-option.is-active { @apply !rounded-[6px] !bg-[#EEFAFF] !text-[#0772CF] hover:!bg-[#F9F9F9]; } .dashboard-profile-menu a { @apply !ml-0 !flex !h-[44px] !items-center !px-[10px] !not-italic !text-[14px] !leading-[140%] !text-[#2C3446] !no-underline hover:!rounded-[6px] hover:!bg-[#F9F9F9]; font-family: 'weblysleek_uisemibold', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; } /* Replace legacy glyph :before icons with shared wallet icon */ .dashboard-profile-menu a::before { @apply !hidden; content: none !important; } .dashboard-profile-menu .dashboard-profile-language-options .phone-country-flag { @apply shrink-0; } /* Business profile in sidebar: trigger + dropdown (10px inset via ml-[10px] on wrapper) */ .dashboard-business-profile-wrapper { @apply !relative; } /* Personal profile: same chrome as business trigger row, not clickable */ .dashboard-personal-profile-display { cursor: default !important; } .dashboard-business-profile-trigger:hover { background-color: #F9F9F9 !important; border-radius: 10px !important; } .dashboard-business-profile-trigger--open, .dashboard-business-profile-trigger[aria-expanded='true'] { background-color: #eefaff !important; color: #0772cf !important; } .dashboard-business-profile-trigger--open .dashboard-profile-name, .dashboard-business-profile-trigger--open .dashboard-profile-type, .dashboard-business-profile-trigger[aria-expanded='true'] .dashboard-profile-name, .dashboard-business-profile-trigger[aria-expanded='true'] .dashboard-profile-type { color: #0772cf !important; } .dashboard-business-profile-chevron { @apply ml-auto inline-flex h-4 w-4 items-center justify-center text-[#46516D] transition-transform transition-colors duration-200; } .dashboard-business-profile-chevron svg { @apply block h-4 w-4; } .dashboard-business-profile-trigger--open .dashboard-business-profile-chevron, .dashboard-business-profile-trigger[aria-expanded='true'] .dashboard-business-profile-chevron { @apply rotate-180 text-[#0772CF]; } /* Inherits .dashboard-profile-menu but must not use min-w-[246px] or anchor past wrapper — match 10px ml/mr on wrapper */ .dashboard-business-profile-dropdown.dashboard-profile-menu { @apply !left-0 !right-0 !top-full !z-50 !mt-2 !box-border !w-full !max-w-full !min-w-0; min-width: 0 !important; max-width: 100% !important; width: 100% !important; } /* 16×16 wallet icon — uses link text color (#2C3446); side menu selected uses text-[#0772CF] */ .dashboard-menu-item-icon { @apply mr-3 inline-block size-4 shrink-0 bg-current; -webkit-mask-image: url('/Content/images/svg/menu-wallet.svg'); mask-image: url('/Content/images/svg/menu-wallet.svg'); -webkit-mask-size: 16px 16px; mask-size: 16px 16px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .dashboard-menu-item-icon--activities { -webkit-mask-image: url('/Content/images/svg/activities.svg'); mask-image: url('/Content/images/svg/activities.svg'); } .dashboard-menu-item-icon--balances { -webkit-mask-image: url('/Content/images/svg/menu-wallet.svg'); mask-image: url('/Content/images/svg/menu-wallet.svg'); } .dashboard-menu-item-icon--addition { -webkit-mask-image: url('/Content/images/svg/addition.svg'); mask-image: url('/Content/images/svg/addition.svg'); } .dashboard-menu-item-icon--transfers { -webkit-mask-image: url('/Content/images/svg/transfers.svg'); mask-image: url('/Content/images/svg/transfers.svg'); } .dashboard-menu-item-icon--recipients { -webkit-mask-image: url('/Content/images/svg/recipients.svg'); mask-image: url('/Content/images/svg/recipients.svg'); } .dashboard-menu-item-icon--verification { -webkit-mask-image: url('/Content/images/svg/verification.svg'); mask-image: url('/Content/images/svg/verification.svg'); } .dashboard-menu-item-icon--security { -webkit-mask-image: url('/Content/images/svg/security.svg'); mask-image: url('/Content/images/svg/security.svg'); } .dashboard-menu-item-icon--saved-cards { -webkit-mask-image: url('/Content/images/svg/saved_cards.svg'); mask-image: url('/Content/images/svg/saved_cards.svg'); } .dashboard-menu-item-icon--switch-account { -webkit-mask-image: url('/Content/images/svg/switch_account.svg'); mask-image: url('/Content/images/svg/switch_account.svg'); } .dashboard-menu-item-icon--logout { -webkit-mask-image: url('/Content/images/svg/logout.svg'); mask-image: url('/Content/images/svg/logout.svg'); } .dashboard-menu-item-icon--send-money { -webkit-mask-image: url('/Content/images/svg/send_money.svg'); mask-image: url('/Content/images/svg/send_money.svg'); } .dashboard-menu-item-icon--business-profile { -webkit-mask-image: url('/Content/images/svg/business_profile.svg'); mask-image: url('/Content/images/svg/business_profile.svg'); } .dashboard-menu-item-icon--bank-statements { -webkit-mask-image: url('/Content/images/svg/bank_statements.svg'); mask-image: url('/Content/images/svg/bank_statements.svg'); } .dashboard-menu-item-icon--shop { -webkit-mask-image: url('/Content/images/svg/shop.svg'); mask-image: url('/Content/images/svg/shop.svg'); } .dashboard-menu-item-icon--avatar { -webkit-mask-image: url('/Content/images/svg/avatar.svg'); mask-image: url('/Content/images/svg/avatar.svg'); } .dashboard-menu-item-icon--home { -webkit-mask-image: url('/Content/images/svg/home.svg'); mask-image: url('/Content/images/svg/home.svg'); } .dashboard-menu-item-icon--close { -webkit-mask-image: url('/Content/images/svg/close.svg'); mask-image: url('/Content/images/svg/close.svg'); } /* Dashboard Sidebar Components */ .dashboard-sidebar .nav { @apply list-none !p-0 !m-0; } .dashboard-sidebar .nav li { @apply !m-0; } .dashboard-sidebar .nav li a { @apply flex !items-center !px-6 !py-3 !text-[#2C3446] !no-underline !transition-colors !border-l-4 !border-transparent; } .dashboard-sidebar .nav li a:hover { @apply !bg-[#F9F9F9]; } .dashboard-sidebar .nav li a.on, .dashboard-sidebar .nav li a.active { @apply !border-l-[#0772CF] !bg-[#e8f4f8] !text-[#0772CF] !font-semibold; } .dashboard-sidebar .nav li .menuicon { @apply !w-5 !h-5 !mr-3 !flex !items-center !justify-center; } .dashboard-sidebar .nav li .text { @apply flex-1; } /* Dashboard menu arrows - show gray for normal state, white for selected state */ .dashboard-menu-arrow { @apply flex items-center; } .dashboard-menu-arrow img { @apply w-4 h-4; } .dashboard-menu-arrow .light { @apply block; } .dashboard-menu-arrow .dark { @apply hidden; } .dashboard-sidebar .submenu { @apply list-none !m-0 !bg-transparent !p-0; } /* Nested items under expandable parents: no panel fill on the UL */ .dashboard-sidebar ul.dashboard-submenu { @apply !bg-transparent; } .dashboard-sidebar .submenu li a { @apply !pl-14 !text-sm; } /* Menu Section Headers */ .dashboard-sidebar .nav li.menu-section-header { @apply !px-6 !py-2 !mt-4 !mb-2; } .dashboard-sidebar .nav li.menu-section-header:first-child { @apply !mt-0; } /* "Barion account" / "Business" — 12px / light / #2C3446 */ .menu-section-header .section-title, .dashboard-sidebar .nav li.menu-section-header .section-title, .dashboard-menu-section-title { @apply !not-italic !font-light !text-[12px] !leading-[140%] !text-[#2C3446]; font-family: weblysleek_uisemilight, 'Helvetica Neue', Helvetica, Arial, sans-serif !important; } /* Dashboard Profile Section */ .dashboard-profile-section { @apply !flex !items-center !gap-3 !px-6 !py-4 !mb-4; } .dashboard-profile-trigger { @apply !flex !items-center; } .dashboard-profile-trigger:hover { @apply opacity-90; } .dashboard-profile-static { @apply !flex !items-center; } .dashboard-menu-back { @apply !mb-2; } .dashboard-profile-avatar-container { @apply !flex-shrink-0; } .dashboard-profile-avatar-image { @apply !h-[36px] !w-[36px] !rounded-full !bg-white !bg-cover !bg-center !bg-no-repeat; } .dashboard-profile-info { @apply !flex !flex-col !flex-1 !min-w-0; } .dashboard-profile-name { @apply !truncate !text-[16px] !font-semibold !leading-[140%] !text-[#2C3446]; } .dashboard-profile-type { @apply !mt-0.5 !text-[14px] !leading-tight !text-[#525F7F]; font-family: inherit; } /* Dashboard Menu Item Typography */ .dashboard-menu-item { @apply !text-[14px] !font-semibold !not-italic !leading-[160%]; font-family: 'weblysleek_uisemibold', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; } /* Side menu: beat global a[href]:hover (blue + underline) — keep inactive #2C3446 / active #0772CF, no underline */ .dashboard-sidebar a.dashboard-menu-item[href]:hover, .dashboard-sidebar a.dashboard-menu-item[href]:focus { text-decoration: none !important; } .dashboard-sidebar a.dashboard-menu-item[class*="EEFAFF"][href]:hover, .dashboard-sidebar a.dashboard-menu-item[class*="EEFAFF"][href]:focus, .dashboard-sidebar a.dashboard-menu-item[class*="EEFAFF"][href]:active { color: #0772cf !important; background-color: #F9F9F9 !important; } .dashboard-sidebar a.dashboard-menu-item:not([class*="EEFAFF"])[href]:hover, .dashboard-sidebar a.dashboard-menu-item:not([class*="EEFAFF"])[href]:focus, .dashboard-sidebar a.dashboard-menu-item:not([class*="EEFAFF"])[href]:active { color: #2c3446 !important; background-color: #F9F9F9 !important; } /* Submenu current row: no EEFAFF class — keep blue text on hover with #F9F9F9 bg */ .dashboard-sidebar a.dashboard-menu-item.dashboard-menu-subitem-active[href]:hover, .dashboard-sidebar a.dashboard-menu-item.dashboard-menu-subitem-active[href]:focus, .dashboard-sidebar a.dashboard-menu-item.dashboard-menu-subitem-active[href]:active { color: #0772cf !important; background-color: #F9F9F9 !important; } .dashboard-logo-container { @apply flex !items-center !gap-3; } /* Dashboard home: 24px between welcome → currency cards → activities (see .dashboard-index-full) */ .dashboard-index-full { @apply flex flex-col gap-6; } .dashboard-index-full .dashboard-welcome { @apply !mb-0; } .dashboard-index-full .dashboard-actions { @apply !mb-0; } .dashboard-index-full .currency-cards { @apply !mb-0; } .dashboard-index-full .activities-section { @apply !mt-0; } /* Dashboard Welcome Section */ .dashboard-welcome { @apply !mb-8; } .dashboard-welcome h1, .dashboard-welcome-text { @apply !text-[32px] !font-semibold !text-[#2C3446] !m-0 !mb-6; } .dashboard-actions { @apply flex !gap-4 !mb-8 !items-center; } /* Dashboard action buttons: 42px height, no focus animation, inset focus ring on focus-visible only */ .dashboard-actions .submit-button-primary, .dashboard-actions a.submit-button-primary { height: 42px !important; min-height: 42px !important; max-height: 42px !important; padding-top: 0 !important; padding-bottom: 0 !important; transition: none !important; } .dashboard-actions .submit-button-primary:focus, .dashboard-actions a.submit-button-primary:focus { outline: none !important; box-shadow: none !important; border: none !important; } .dashboard-actions .submit-button-primary:focus-visible, .dashboard-actions a.submit-button-primary:focus-visible { outline: none !important; border: none !important; box-shadow: inset 0 0 0 3px #33ACE2 !important; } .dashboard-btn { @apply !px-6 !py-3 !bg-[#0772CF] !text-white !border-none !rounded-lg !text-base !font-semibold !cursor-pointer !no-underline !inline-flex !items-center !gap-2 !transition-colors; } .dashboard-btn:hover { @apply !bg-[#0066B3] !text-white !no-underline; } .dashboard-btn.secondary { @apply !bg-white !text-[#0772CF] !border !border-[#0772CF]; } .dashboard-btn.secondary:hover { @apply !bg-[#F9F9F9]; } /* Currency Cards - dashboard */ .currency-cards { @apply flex !flex-wrap !gap-4 !mb-8; } .currency-cards .currency-card { @apply !bg-white !rounded-xl !flex !flex-col !justify-between; width: 182px !important; min-width: 182px !important; max-width: 182px !important; height: 91px !important; min-height: 91px !important; max-height: 91px !important; padding: 10px !important; box-sizing: border-box !important; box-shadow: none !important; border: none !important; } .currency-cards .currency-card:hover { background: #F9F9F9 !important; box-shadow: none !important; } .currency-cards .currency-card:active { background: #EEFAFF !important; box-shadow: none !important; } .currency-card-clickable { @apply !cursor-pointer; } .currency-cards .currency-header { @apply flex !items-center !gap-2 !mb-2; } .currency-cards .currency-flag, .currency-cards .currency-flag-img, .currency-cards .currency-flag-fallback { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important; @apply !rounded-full !flex-shrink-0; } .currency-cards .currency-flag { @apply !bg-cover !bg-center; } .currency-cards .currency-flag-img { @apply !object-cover; } .currency-cards .currency-flag-fallback { @apply !flex !items-center !justify-center !text-xs !font-medium !bg-[#e5e5e5] !text-[#666]; } .currency-cards .currency-code { font-family: 'weblysleek_uisemibold', "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-size: 14px !important; line-height: 140% !important; @apply !flex !items-center !text-[#46516D] !not-italic; } .currency-cards .currency-amount { font-size: 18px !important; font-family: 'weblysleek_uisemibold', "Helvetica Neue", Helvetica, Arial, sans-serif !important; @apply !font-semibold !text-[#2C3446] !mb-0 !text-right; } .currency-cards .currency-card-locked { @apply !flex !items-center !justify-end !gap-1; } .currency-cards .currency-card-locked img, .currency-cards .currency-card-locked svg { @apply !w-[12px] !h-[12px] !block; } .currency-cards .currency-card-locked-amount { @apply !text-[12px] !leading-[140%] !text-[#46516D] !not-italic; } .currency-cards .new-currency-card { @apply !no-underline !cursor-pointer !flex !items-center !justify-center; width: 182px !important; min-width: 182px !important; max-width: 182px !important; height: 91px !important; min-height: 91px !important; max-height: 91px !important; box-sizing: border-box !important; box-shadow: none !important; border: none !important; } .currency-cards .new-currency-card:hover { @apply !no-underline; } @media (max-width: 767px) { .currency-cards .currency-card, .currency-cards .new-currency-card { width: calc((100% - 12px) / 2) !important; min-width: calc((100% - 12px) / 2) !important; max-width: calc((100% - 12px) / 2) !important; @apply !h-[84px] !min-h-[84px] !max-h-[84px] !p-2; } .currency-cards { gap: 12px !important; } } .new-currency-content { @apply !inline-flex !items-center !gap-2 !whitespace-nowrap; } .new-currency-icon { @apply !shrink-0; } .new-currency-text { font-family: 'weblysleek_uisemibold', "Helvetica Neue", Helvetica, Arial, sans-serif !important; @apply !text-[#0772CF] !text-[14px] !leading-[140%] !not-italic; } /* Same plus + blue link as dashboard new-currency card, for native