@charset "UTF-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap");
:root {
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-600-transparent: #2563eb;
  --blue-800-transparent: #1e40af;
  --violet-50: #eef2ff;
  --violet-100: #e0e7ff;
  --violet-200: #c7d2fe;
  --violet-300: #a5b4fc;
  --violet-400: #c084fc;
  --violet-500: #6366f1;
  --violet-600: #4f46e5;
  --violet-700: #4c4cc5;
  --violet-800: #3730a3;
  --violet-900: #312e81;
  --orange-50: #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;
  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --purple-300: #d8b4fe;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;
  --purple-800: #6b21a8;
  --purple-900: #581c87;
  --teal-50: #e5faf9;
  --teal-100: #c5f4f2;
  --teal-200: #adefed;
  --teal-300: #84e7e4;
  --teal-400: #5bdfdb;
  --teal-500: #32d8d2;
  --teal-600: #15bfbb;
  --teal-700: #00938e;
  --teal-800: #007a75;
  --teal-900: #00605b;
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --yellow-50: #fefce8;
  --yellow-100: #fef9c3;
  --yellow-200: #fef08a;
  --yellow-300: #fde047;
  --yellow-400: #facc15;
  --yellow-500: #eab308;
  --yellow-600: #ca8a04;
  --yellow-700: #a16207;
  --yellow-800: #854d0e;
  --yellow-900: #713f12;
  --pink-50: #ffecf4;
  --pink-100: #ffdae9;
  --pink-200: #ffb5d3;
  --pink-300: #ff90bd;
  --pink-400: #ff6ba7;
  --pink-500: #ff4792;
  --pink-600: #e62e79;
  --pink-700: #cc145f;
  --pink-800: #b30046;
  --pink-900: #99002c;
  --red-50: #fff1f2;
  --red-100: #ffe4e6;
  --red-200: #fecdd3;
  --red-300: #fda4af;
  --red-400: #fb7185;
  --red-500: #f43f5e;
  --red-600: #dc2626;
  --red-700: #be123c;
  --red-800: #9f1239;
  --red-900: #881337;
  --charcoal: #141414;
  --pageBG: #2a2d2e;
  --midnight: #222934;
  --buttonface: var(--blue-700);
  --buttonface-hover: var(--blue-800);
  --buttonface-nav-top: rgba(100, 140, 230, 0.1);
  --buttonface-nav-top-hover: rgba(100, 140, 230, 0.15);
  --page-bg: #161E2B;
  --grad-bg-light: rgba(15, 23, 42, 0.25);
  --grad-bg-dark: rgba(20, 20, 20, 0.25);
  --modal-bg: #1b2237;
  --blue-inter-on-dark: #2B87F7;
  --blue-inter-on-dark-hover: var(--blue-400);
  --red-inter-on-dark: #f44361;
  --red-inter-on-dark-hover: var(--red-400);
  --bg-lighter: #1C2536;
  --navBG-large: var(--bg-lighter);
  --navBG-large-hover: #1e2a41;
  --button-face-flat: rgba(41, 55, 82, 0);
  --button-face-hover: #293752;
  --link-colour: var(--blue-inter-on-dark);
  --link-colour-hover: var(--blue-inter-on-dark-hover);
  --bg-focus-primary: var(--orange-600);
  --bg-focus-secondary: #877ac8;
  --bg-focus-tertiary: #30b3ae;
  --tile-bg: var(--bg-lighter);
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335);
  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-out-circ: cubic-bezier(.075, .82, .165, 1);
  --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
  --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
  --ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ico-bank-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3,7h2v5h-2v-5ZM7,7h2v5h-2v-5ZM1,13h14v2H1v-2ZM11,7h2v5h-2v-5ZM8,1L1,5v1h14v-1L8,1Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-bank-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M4 10h3v7H4zm6.5 0h3v7h-3zM2 19h20v3H2zm15-9h3v7h-3zm-5-9L2 6v2h20V6z'%3E%3C/path%3E%3C/svg%3E");
  --ico-piggy-original-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.08226,10.0056c-.73827-.59767-1.44288-.04462-1.04006.6021.23144.37057.48343.8181.26519,1.18282-.12307.20438-.34574.25418-.58738.13185-.30614-3.89505-4.36807-6.67238-9.34543-6.67238-.47166,0-.92134.02272-1.35783.0564-.39261-1.39163-1.72704-2.07352-3.22406-2.17747-2.01556-.14062-2.01556.56835-1.4281.96382.48478.3267.98577.99022,1.08829,1.9761-2.2704.89213-3.66932,2.46315-4.20098,4.43115h-1.4443c-2.95595,0-1.75629,6.75.60058,6.75h2.12535c.25784.32227.54786.6123.85985.87893l-.02047-.00442c1.35348,1.25835,1.93936,1.86773,2.20155,4.42237.09667.9324,3.33979.91845,3.52578,0,.13035-.64087.1128-1.57327.38669-2.32178.29301.01537.58888.0249.88767.0249.55078,0,1.08686-.03292,1.61132-.08715.29879.77415.26804,1.77023.41301,2.38402.21682.91185,3.34413.91995,3.52578,0,.54343-2.7429,1.10449-3.51713,2.60444-5.76713l-.01177.00443c.50541-.7449.87012-1.61715,1.06496-2.625.95944.29295,1.90276-.24683,2.20305-.94703.24314-.56835.53316-2.2053-.7031-3.20655ZM14.71824,0c-1.24361,0-2.24992,1.0071-2.24992,2.25s1.00632,2.25,2.24992,2.25c1.24218,0,2.24992-1.0071,2.24992-2.25s-1.00774-2.25-2.24992-2.25ZM7.58179,9.813c-.25927.6672-.7895,1.08322-1.18503.92872-.39404-.15382-.50091-.81885-.24164-1.48538.26069-.66795.79092-1.08397,1.18496-.93015.39554.1545.50248.81952.24172,1.4868ZM15.98675,8.1138c-.80705-.43433-2.46959-.69142-3.96954-.627l-.03517-.7485c1.33443-.06667,3.27671.13185,4.36065.71483l-.35594.66068Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-piggy-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5,8c1.93298,0,3.5-1.56702,3.5-3.5s-1.56702-3.5-3.5-3.5-3.5,1.56702-3.5,3.5,1.56702,3.5,3.5,3.5ZM3.85071,5.9129c.23962-.09985.43091-.23895.57599-.4173.14404-.1795.21716-.38031.21716-.60468,0-.06958-.00787-.138-.02252-.20758h-.74139v-.51715l.50177-.03253h.0675c-.09003-.23224-.13501-.41956-.13501-.56201,0-.26367.06641-.49365.198-.6922.13275-.19855.31726-.35004.55353-.4566.23737-.10541.50854-.15814.81226-.15814.26892,0,.50629.04486.71106.13239.20361.08862.39148.21875.56024.39148l-.56024.47906c-.17999-.18964-.38477-.28497-.61426-.28497-.21381,0-.38141.05383-.50067.16156-.12036.10767-.17999.26587-.17999.47229,0,.12897.03259.30176.09784.51715h1.1217v.54968h-.98779c.01013.0954.01575.16608.01575.21429,0,.16376-.02814.30627-.08215.42627-.05511.12115-.14508.24121-.26996.36237v.02582h1.95978v.74377h-3.29858v-.54297ZM15,8.5v2c0,.27612-.22388.5-.5.5h-.62048c-.26123,1.07227-.93829,2.01587-1.87952,2.7193v1.7807c0,.27612-.22388.5-.5.5h-2c-.27612,0-.5-.22388-.5-.5v-.57495c-.32587.04565-.65851.07495-1,.07495s-.67413-.0293-1-.07495v.57495c0,.27612-.22388.5-.5.5h-2c-.27612,0-.5-.22388-.5-.5v-1.7807c-1.22485-.91541-2-2.2403-2-3.7193,0-.75592.20709-1.46985.56744-2.11218.78931.68384,1.80627,1.11218,2.93256,1.11218,2.21887,0,4.05176-1.60925,4.42157-3.72217.04803.01367.10016.01929.14764.03387.90308-1.30225,1.75958-1.86273,2.54846-1.34851-.58954.90186-.48712,1.80768-.18115,2.67902.43591.39972.79761.85602,1.06091,1.35779h1.00256c.27612,0,.5.22382.5.5Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-piggy-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23,13v3c0,.55225-.44769,1-1,1h-1.55219c-.56061,1.25-1.52368,2.34747-2.77374,3.19324-.24353.66138-.57159,1.54834-.67407,1.80676-.16913.42645-.44769,1-1,1h-2c-.55231,0-1-.44775-1-1v-.10242c-.48981.06152-.98828.10242-1.5.10242s-1.01019-.04089-1.5-.10242v.10242c0,.55225-.44769,1-1,1h-2c-.55231,0-.81006-.58337-1-1-.10938-.23987-.54553-1.19659-.89642-1.96631-1.90259-1.37152-3.10358-3.33942-3.10358-5.53369,0-.39764.05072-.7851.12622-1.16602,1.35034,1.04065,3.03717,1.66602,4.87378,1.66602,4.24091,0,7.70166-3.30243,7.97345-7.47461.8051-1.28594,2.8291-2.08063,3.93463-1.35999-.698,1.06769-.74646,2.13916-.51227,3.18616.90179.75262,1.60492,1.65155,2.052,2.64844h1.55219c.55231,0,1,.44769,1,1ZM13,7c0,3.31372-2.68628,6-6,6S1,10.31372,1,7,3.68628,1,7,1s6,2.68628,6,6ZM6.79034,5.5498c0-.30951.07233-.53491.21698-.67621s.34058-.21191.58868-.21191c.26239,0,.50293.13031.72412.39276l.95038-.95123c-.25482-.29602-.53235-.51471-.83179-.65601-.30023-.1413-.64252-.21191-1.02856-.21191-.44067,0-.83679.08997-1.18835.26825-.35156.17999-.62659.43652-.82672.77039-.2002.33392-.29944.72498-.29944,1.17328,0,.16479.0412.37842.12366.64001h-.0202l-.70312.06219v1.01263h1.02271c.00757.03448.01093.08997.01093.16565,0,.33728-.10345.6358-.3103.89404-.20691.25818-.46844.45667-.78552.59375v1.09589h4.83673v-1.48779h-2.58362v-.04205c.14465-.17157.2464-.33728.3053-.49536.05798-.159.08746-.33813.08746-.53741,0-.08325-.00336-.14465-.01013-.18671h1.27081v-1.07483h-1.48779c-.04205-.24725-.06219-.42639-.06219-.53741Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-investments-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='white'%3E%3Crect x='1' y='18' width='4' height='4' rx='.5' ry='.5'%3E%3C/rect%3E%3Crect x='7' y='14' width='4' height='8' rx='.5' ry='.5'%3E%3C/rect%3E%3Crect x='13' y='16' width='4' height='6' rx='.5' ry='.5'%3E%3C/rect%3E%3Crect x='19' y='11' width='4' height='11' rx='.5' ry='.5'%3E%3C/rect%3E%3Cpath d='M2.99902,14c-.15625,0-.31445-.03613-.4624-.11426-.48926-.25586-.67871-.85938-.42285-1.34912,1.24316-2.37695,3.30957-5.53662,6.88623-5.53662,1.94141,0,2.90625.6665,3.68164,1.20215.6709.46338,1.15527.79785,2.31836.79785,2.75977,0,4.35352-3.34131,5.05762-5.3335.18359-.52002.75391-.79443,1.27539-.60938.52148.18408.79395.75537.60938,1.27637-1.51953,4.29883-3.98535,6.6665-6.94238,6.6665-1.78711,0-2.71191-.63916-3.45508-1.15234-.68555-.47363-1.22705-.84766-2.54492-.84766-1.92188,0-3.49902,1.37646-5.11377,4.46387-.17871.34082-.52686.53613-.88721.53613Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-credit-card-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='none'%3E%3C/rect%3E%3Cpath d='M0,4v-1c0-.54999.45001-1,1-1h14c.54999,0,1,.45001,1,1v1H0ZM16,6v7c0,.54999-.45001,1-1,1H1c-.54999,0-1-.45001-1-1v-7h16ZM7,9.5c0-.27618-.22388-.5-.5-.5H2.5c-.27612,0-.5.22382-.5.5v2c0,.27612.22388.5.5.5h4c.27612,0,.5-.22388.5-.5v-2Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-credit-card-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0,6v-1c0-1.10461.89545-2,2-2h20c1.10455,0,2,.89539,2,2v1H0ZM24,9v10c0,1.10455-.89545,2-2,2H2c-1.10455,0-2-.89545-2-2v-10h24ZM10,15c0-.55231-.44769-1-1-1h-5c-.55231,0-1,.44769-1,1v2c0,.55225.44769,1,1,1h5c.55231,0,1-.44775,1-1v-2Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-pensioners-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='white'%3E%3Cpath d='M4.9742,20.54313c-.15521.68809-.29573,1.29861-.43022,1.91046-.16446.74816-.16447.54643-.92738.54641-.27954,0-.55914.0029-.83865,0-.41275-.00429-.57888.02576-.53741-.38183.08925-.87715.23339-3.36489.25946-3.61817h-1.5c-.10311-4.42964,1.0278-8.81737,3.39677-12.61026.53416-.85522,1.32175-1.23906,2.31913-1.06705.96025.1656,1.55594.76805,1.81778,1.70447.21218.75881.51539,1.47988.91224,2.19464.03944-.07238.07149-.11993.09276-.17189.48844-1.19358,1.18701-2.24984,2.06877-3.18892,1.68484-1.79438,4.71411-1.40226,5.76098.8252.78698,1.67447,1.95821,3.00077,3.30112,4.21206.39112.35278.63002.74538.53945,1.28356.45812.09294.791.62858.791,1.1227v.6955c-.01683.25333-.26289.51213-.5.5-.23977-.01227-.4876-.23613-.5-.5-.00779-.16564,0-.25143,0-.5076,0-.37891-.28374-.4924-.5-.4924-.23218,0-.5.16332-.5.5-.00016,2.84778.00147,6.15222,0,9,0,.35882-.28923.50453-.5.5-.21011-.00451-.5-.17439-.5-.5-.00112-2.89146-.00379-6.10854,0-9,0-.32179.03063-.56239.13426-.6827-1.45052-.44291-2.74115-2.0543-3.82755-3.55343-.161.20773-.3196.38778-.45086.58593-.62221.93928-.87363,2.00302-1.04254,3.0982-.27657,1.79318-.05178,3.54967.34709,5.29713.30471,1.33492.60223,2.67147.90586,4.00664.10874.47815-.01163.66192-.49386.7376-.40516.06359-.80942.13311-1.21504.19356-.45736.06816-.59594-.07125-.69588-.52067-.28567-1.28468-.71059-3.66088-.97587-3.95645-.20183,1.25664-.40024,2.47701-.59276,3.69831-.0719.45614-.19278.59528-.64819.59588-.47172.00063-.94349.00564-1.41514,0-.39587-.00473-.5895-.26602-.49502-.63984.41215-1.63073.50109-3.29694.49174-4.96504-.00773-1.37863-.10872-2.75675-.16853-4.13509-.00227-.05235-.0165-.10655-.0074-.15666.09482-.52177-.12363-.8958-.53276-1.19879-.25802-.19109-.49386-.41212-.73092-.61235-.04774.40626-.1209.88597-.15788,1.36845-.1536,2.00397-.04408,3.99566.30325,5.97504.0726.41373-.00454.53002-.44889.70531.22879.95348.4571,1.91001.68813,2.86587.1379.57057-.01156.79259-.59053.79309-.36689.00031-.73384.00033-1.10073,0-.43995-.00039-.5367-.09639-.67588-.52248-.2023-.61932-.40352-1.239-.6299-1.93439Z'%3E%3C/path%3E%3Ccircle cx='18.5' cy='3.5' r='2.5'%3E%3C/circle%3E%3Ccircle cx='9.5' cy='3.5' r='2.5'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
  --ico-pensioners-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='white'%3E%3Cpath d='M3.54133,13.65389c-.10347.44396-.16239.61778-.25205,1.01254-.0611.21984-.14437.33357-.65297.33356-.18636,0-.37276.00187-.5591,0-.27517-.00276-.35567-.2318-.32802-.49478.0595-.56594.23345-1.8418.25082-2.00522h-1c-.06874-2.858.57706-5.53069,2.15638-7.97786.35611-.55179.88117-.79944,1.54609-.68846.64017.10685,1.03729.49554,1.21186,1.09972.14145.48958.3436.95482.60816,1.41598.02629-.0467.04766-.07738.06184-.1109.32562-.7701.79134-1.45159,1.37918-2.05749,1.12323-1.15773,3.14274-.90474,3.84066.53242.52466,1.08037,1.41292,1.9361,2.30819,2.71762.26074.22762.42001.48092.35963.82815.30542.05996.52802.40552.52802.72433v.4488c-.01122.16345-.17595.3304-.33403.32257-.15985-.00792-.32506-.15235-.33333-.3226-.00519-.10687,0-.16222,0-.3275,0-.24447-.18916-.3177-.33333-.3177-.15479,0-.33333.10538-.33333.3226-.00011,1.83739.00098,3.9694,0,5.80679,0,.23151-.19282.32552-.33333.3226-.14007-.00291-.33264-.11248-.33264-.32256-.00075-1.86557-.00253-4.05093,0-5.9165,0-.20762.05272-.30992.1218-.38754-.96701-.28576-1.96787-1.26869-2.69213-2.23593-.10733.13403-.21307.25019-.30057.37804-.4148.60602-.58242,1.29235-.69503,1.99895-.18438,1.15696-.03452,2.29025.23139,3.41771.20314.86129.42721,1.5164.62963,2.37785.07249.3085-.00775.42707-.32924.4759-.27011.04103-.53962.08588-.81003.12488-.30491.04397-.3973-.04597-.46392-.33594-.19045-.82887-.49946-2.15476-.67631-2.34547-.13456.81078-.2411,1.39093-.36945,2.17892-.04793.2943-.12854.35224-.43214.35263-.31448.00041-.62897.00364-.9434,0-.26391-.00305-.39301-.1398-.33003-.38099.27477-1.05214.30833-1.91995.3021-2.99621-.00516-.88949-.07248-1.77865-.11235-2.66795-.00151-.03378-.011-.06875-.00493-.10108.06321-.33665-.08242-.57797-.35517-.77346-.17201-.12329-.32924-.2659-.48728-.39509-.03183.26212-.0806.57163-.10525.88292-.1024,1.29296-.02939,2.57799.20217,3.85509.0484.26694-.00302.34197-.29926.45507.15253.61519.24514.98358.39916,1.60031.09194.36813-.00771.52107-.39369.52139-.24459.0002-.48927.00021-.73387,0-.2933-.00025-.35775-.07188-.45053-.34679-.13486-.39959-.20942-.55065-.36034-.99932Z'%3E%3C/path%3E%3Ccircle cx='12.66665' cy='2.66665' r='1.66665'%3E%3C/circle%3E%3Ccircle cx='6.66665' cy='2.66665' r='1.66665'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
  --ico-profile-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,12c2.21,0,4-1.79,4-4s-1.79-4-4-4-4,1.79-4,4,1.79,4,4,4M12,14c-2.67,0-8,1.34-8,4v2h16v-2c0-2.66-5.33-4-8-4' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-profile-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8,9c2.21,0,4-1.79,4-4s-1.79-4-4-4-4,1.79-4,4,1.79,4,4,4M8,10c-2.67,0-7,1.34-7,4v2h14v-2c0-2.66-4.33-4-7-4' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-bar-chart-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4,8h4v14h-4v-14ZM16,12h4v10h-4v-10ZM10,3h4v19h-4V3Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-bar-chart-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1,6h4v9H1V6ZM11,10h4v5h-4v-5ZM6,1h4v14h-4V1Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-add-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='19 10 13 10 13 4 10 4 10 10 4 10 4 13 10 13 10 19 13 19 13 13 19 13 19 10' fill='white'%3E%3C/polygon%3E%3C/svg%3E");
  --ico-add-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='14 7 9 7 9 2 7 2 7 7 2 7 2 9 7 9 7 14 9 14 9 9 14 9 14 7' fill='white'%3E%3C/polygon%3E%3C/svg%3E");
  --ico-ellipsis-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-ellipsis-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2,6c-1.1,0-2,.9-2,2s.9,2,2,2,2-.9,2-2-.9-2-2-2M14,6c-1.1,0-2,.9-2,2s.9,2,2,2,2-.9,2-2-.9-2-2-2M8,6c-1.1,0-2,.9-2,2s.9,2,2,2,2-.9,2-2-.9-2-2-2' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-nest-egg-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='white'%3E%3Cpath d='M5.523,8.84s.083,1.739.09,1.839c.874-.663,1.987-1.081,2.604-1.278l2.505-.803-1.051,1.776c2.116-.749,3.252-.242,3.252-.242l-.651.75c.291-.095.545-.15.784-.182.285-.658.444-1.383.444-2.145,0-3.632-2.75-8.556-5.5-8.556S2.5,4.923,2.5,8.556c0,.787.172,1.533.474,2.208.913-1.333,2.549-1.924,2.549-1.924Z'%3E%3C/path%3E%3Cpath d='M3.096,11.831c.375-.618.86-1.125,1.5-1.434.066,1.39.202,1.8.772,2.206.199-1.059,2.051-1.897,3.154-2.25-.522.882-.243,1.434.132,1.853.86-.794,1.853-1.147,3.088-1.456-.496.695-.816,1.026-.838,1.566.64-.993,2.118-.893,3.287-.772-.779.603-1.059.989-1.103,1.353.673.165,1.246.423,2.239,2.353-.96-.596-1.664-.94-2.607-.912.024.392-.214,1.106-.581,1.43-.132-1.114-.662-1.434-1.312-1.346-.371.318-1.312.915-2.136,1.165-.144-.495-.294-.882-.691-1.412-.382.595-1.366,1.404-1.721,1.471,0-.809-.176-1.235-.471-1.721-.717.394-1.869,1.327-2.279,1.794-.103-.496-.089-1.461.162-1.941-.809.279-1.191.588-2.316,1.393.199-.915.422-1.532.934-2.136-.574-.485-.934-.566-1.783-.632.772-.507,1.875-.496,2.57-.574Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-tick-circled-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8,0C3.58173,0,0,3.58173,0,8s3.58173,8,8,8,8-3.58173,8-8S12.41827,0,8,0ZM6.5,12.50004l-4-4,1.40997-1.41003,2.59003,2.58002,5.59003-5.59003,1.40997,1.42004-7,7Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-tick-circled-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-jars-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10,7c-.55231,0-1-.44775-1-1,.54999,0,1-.45001,1-1v-1c0-.54999-.45001-1-1-1H2c-.54999,0-1,.45001-1,1v1c0,.54999.45001,1,1,1,0,.55225-.44769,1-1,1-.54999,0-1,.45001-1,1v7c0,.54999.45001,1,1,1h9c.54999,0,1-.45001,1-1v-7c0-.54999-.45001-1-1-1ZM2,4h6s.02942,1-1,1H2v-1ZM10,10s-3-.08826-3,1v2c0,1.05884,3,1,3,1v1H1v-7c1.10278,0,2-.89722,2-2h4c.75732,0,1,.875,1,2h-4c-.95587,0-1,1-1,1h7v1ZM16,5v7c0,.54999-.45001,1-1,1h-3v-1h3v-1s-3,.05884-3-1v-2c0-1.08826,3-1,3-1v-1h-4.28467c.17303-.29596.28467-.63275.28467-1h2c0-1.125-.24268-2-1-2h-1.27814c-.34686-.59491-.98474-1-1.72186-1h3c1.02942,0,1-1,1-1h-6v1h-1v-1c0-.54999.45001-1,1-1h7c.54999,0,1,.45001,1,1v1c0,.54999-.45001,1-1,1,0,.55225.44769,1,1,1,.54999,0,1,.45001,1,1Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-jars-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9,20h-1v-8h1v8ZM15,9v13c0,.54999-.45001,1-1,1H2c-.54999,0-1-.45001-1-1v-13c0-.54999.45001-1,1-1,.55231,0,1-.44775,1-1-.54999,0-1-.45001-1-1v-1c0-.54999.45001-1,1-1h10c.54999,0,1,.45001,1,1v1c0,.54999-.45001,1-1,1,0,.55225.44769,1,1,1,.54999,0,1,.45001,1,1ZM3,6h8c.9375,0,1-1,1-1H3v1ZM14,10H4s-.04047-1,1-1h4c2.06616,0,2-.89722,2-2h-7c0,1.10278-.89722,2-2,2v13h12v-1s-4-.25-4-1v-8c0-1.1618,4-1,4-1v-1ZM16,9v8h1v-8h-1ZM22,5c-.55231,0-1-.44775-1-1,.54999,0,1-.45001,1-1v-1c0-.54999-.45001-1-1-1h-10c-.54999,0-1,.45001-1,1v1h1v-1h9s-.0625,1-1,1h-6c.73676,0,1.37476.40509,1.7218,1h4.2782c0,1.10278.06616,2-2,2h-2c0,.36725-.11176.70404-.2851,1h7.2851v1s-4-.1618-4,1v8c0,.75,4,1,4,1v1h-6v1h6c.54999,0,1-.45001,1-1V6c0-.54999-.45001-1-1-1Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-shield-ticked-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8,0C6,2,1,3,1,3v2.09c0,5.05,2.41,9.76,7,10.91,4.59-1.15,7-5.86,7-10.91v-2.09s-5-1-7-3ZM6.94,11.54l-3.54-3.54,1.41-1.41,2.12,2.12,4.24-4.24,1.41,1.41-5.64,5.66Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-shield-ticked-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5zm-1.06 13.54L7.4 12l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-bolt-circled-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8,0C3.58317,0,0,3.58317,0,8s3.58317,8,8,8,8-3.58317,8-8S12.41683,0,8,0M8,14.41283v-5.41283h-2.5l3.5-7.41283v5.41283h2.5l-3.5,7.41283Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-bolt-circled-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.02c-5.51 0-9.98 4.47-9.98 9.98s4.47 9.98 9.98 9.98 9.98-4.47 9.98-9.98S17.51 2.02 12 2.02M11.48 20v-6.26H8L13 4v6.26h3.35z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-thumbs-up-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect x='2' y='9' width='5' height='12'%3E%3C/rect%3E%3Cpath d='M7,10c1.228,0,2.763-.977,3.449-1.492,2.353-1.765,1.72-6.508,3.551-6.508.756,0,3.012.676,3.012,2.647,0,2.441-1.271,3.141-2.012,4.353h5.618c2.039,0,1.554,3.281.382,3.544.047.925.094,2.831-1,3.265.62.648.464,2.377-.5,3.191.309.691.23,1.684-.094,2-1.375,1.344-5.553,1.059-6.906.734-1.802-.433-2.266-.722-3.059-1.087-.574-.265-1.691-.338-2.441-.338'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-exclaim-circled-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='16.5' r='1.25' fill='white'%3E%3C/circle%3E%3Cg fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath id='pipe' d='M12,13v-6'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
  --ico-exclaim-triangle-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle id='dot' cx='12' cy='16.25' r='1.25' fill='white'%3E%3C/circle%3E%3Cg fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M13.351,3.521l8.199,14.238c.575,1.003-.168,2.242-1.351,2.242H3.801c-1.183,0-1.926-1.238-1.351-2.242L10.649,3.521c.591-1.028,2.111-1.028,2.702,0Z'%3E%3C/path%3E%3Cpath d='M12,13v-4'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  --ico-info-circled-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.5' r='1.25' fill='white'%3E%3C/circle%3E%3Cg fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12,17v-7h-1'%3E%3C/path%3E%3Cpath d='M10,17h4'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
  --ico-chevron-right-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='6 14 12 8 6 2' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3C/polyline%3E%3C/svg%3E");
  --ico-star-outlined-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='2' d='M11.767,18.638l-5.409,2.844c-.367.193-.796-.119-.725-.527l1.033-6.023c.028-.162-.026-.328-.144-.443l-4.376-4.266c-.297-.289-.133-.793.277-.853l6.047-.879c.163-.024.304-.126.376-.274l2.705-5.48c.183-.372.713-.372.897,0l2.705,5.48c.073.148.214.25.376.274l6.047.879c.41.06.574.564.277.853l-4.376,4.266c-.118.115-.172.28-.144.443l1.033,6.023c.07.408-.359.72-.725.527l-5.409-2.844c-.146-.077-.32-.077-.465,0Z'%3E%3C/path%3E%3C/svg%3E");
  --ico-lightbulb-outlined-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9,19h6M10,22h4M15.349,16c.388-1.259,1.482-2.342,2.313-3.324.71-.839,1.338-2.326,1.338-3.676,0-3.926-2.931-7-7-7-4.069,0-7,3.074-7,7,0,1.351.628,2.837,1.338,3.676.831.982,1.925,2.065,2.313,3.324M15,9c0-1.5-.809-2.824-2.5-3' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3C/path%3E%3C/svg%3E");
  --ico-hand-palm-outlined-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12,6c0-1.105.895-2,2-2s2,.895,2,2v6M12,11v-7c0-1.105-.895-2-2-2s-2,.895-2,2v8M8,7c0-1.105-.895-2-2-2s-2,.895-2,2v11c0,2.209,1.791,4,4,4h8c2.209,0,4-1.791,4-4v-7c0-1.105-.895-2-2-2s-2,.895-2,2v2c-2.132,0-4,1.641-4,4' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3C/path%3E%3C/svg%3E");
  --ico-deliveroo-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.2132.0002l-.74541,7.05507-1.27153-5.94807-3.98652.84302,1.27091,5.94765-5.7475,1.2149,1.01516,4.75108,10.10714,2.13616,2.3114-5.16271L15.26685.42417,11.21279-.00001l.00041.00041v-.00021ZM8.01946,10.2348c-.20839.18985-.4839.17235-.7763.07557-.29178-.09637-.42151-.44745-.31093-.87185.08237-.31505.4701-.36241.66408-.36571.07372-.00124.1462.01359.21312.04365.13714.06177.36941.19356.41657.39453.06795.28993.00247.53332-.20592.72317h-.00041v.00041l-.00021.00021ZM10.94551,10.5622c-.15135.26151-.54876.29611-.9398.10584-.26357-.12849-.26151-.45548-.23268-.65481.0153-.10872.05938-.21137.12767-.29734.0941-.11861.25122-.27325.43283-.27799.29528-.00782.54938.12396.6929.36241.14414.23763.07207.49976-.07969.76189h-.00124Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-deliveroo-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.41815,1.00028l-1.02494,9.7007-1.74835-8.17858-5.48145,1.15915,1.7475,8.17801-7.90281,1.67049,1.39585,6.53273,13.8973,2.93722,3.17817-7.09871,1.5125-14.31804-5.57432-.58325.00057.00057v-.00028ZM12.02676,15.07284c-.28653.26105-.66536.23698-1.06741.10391-.4012-.13251-.57957-.61525-.42753-1.19879.11325-.43319.64639-.49831.9131-.50284.10136-.0017.20102.01869.29304.06002.18857.08494.50794.26614.57278.54248.09343.39865.0034.73331-.28313.99436h-.00057v.00057l-.00028.00028ZM16.05008,15.52302c-.2081.35958-.75455.40715-1.29222.14553-.36241-.17668-.35958-.62629-.31994-.90036.02104-.14949.08164-.29064.17554-.40884.12939-.16308.34542-.37572.59515-.38223.40601-.01076.7554.17045.95274.49831.19819.32674.0991.68716-.10957,1.04759h-.0017Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-o2-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.82536,9.91887c0-3.09187,1.70459-6.10446,5.1135-6.10446,3.44862,0,5.19279,2.93329,5.19279,6.10446,0,3.13159-1.54587,6.10446-5.19279,6.10446-3.5675-.00013-5.1135-3.05216-5.1135-6.10446h0ZM1.65419,9.91887c0,5.27195,3.01258,8.95845,8.28467,8.95845,5.31179,0,8.36396-3.6865,8.36396-8.95846,0-5.1135-3.09175-8.91887-8.36396-8.91887C4.70648,1,1.65419,4.80537,1.65419,9.91887h0ZM17.54961,22.99987v-1.22883c.63408-.59476,3.09175-2.65596,3.09175-3.96396,0-.67405-.5945-.99109-1.14954-.99109-.63408,0-1.22883.27746-1.70459.59476l-.11874-1.22883c.67379-.3173,1.42687-.51533,2.18008-.51533,1.34784,0,2.21966.7135,2.21966,2.14063,0,1.50629-1.54587,2.93316-2.69541,4.04325h2.973v1.14954h-4.7962v-.00013h0Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-o2-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.78208,6.48645c0-2.24864,1.2397-4.43961,3.71891-4.43961,2.50809,0,3.77658,2.1333,3.77658,4.43961,0,2.27752-1.12427,4.43961-3.77658,4.43961-2.59454-.00009-3.71891-2.21976-3.71891-4.43961h0ZM.47577,6.48645c0,3.83415,2.19097,6.51524,6.02521,6.51524,3.86312,0,6.08288-2.68109,6.08288-6.51524,0-3.71891-2.24854-6.48645-6.08288-6.48645C2.69562,0,.47577,2.76754.47577,6.48645h0ZM12.03608,15.99991v-.8937c.46115-.43255,2.24854-1.93161,2.24854-2.88288,0-.49022-.43236-.72079-.83603-.72079-.46115,0-.8937.20179-1.2397.43255l-.08636-.8937c.49003-.23076,1.03772-.37479,1.58551-.37479.98024,0,1.6143.51891,1.6143,1.55682,0,1.09548-1.12427,2.13321-1.9603,2.94055h2.16218v.83603h-3.48815v-.00009h0Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-arrow-back-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z' fill='white' %3E%3C/path%3E%3C/svg%3E");
  --ico-arrow-back-16-old: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15,7H4.83l4.59-4.59-1.42-1.41L1,8l7,7,1.41-1.41-4.58-4.59h10.17v-2Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-arrow-back-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7,3l-5,5,5,5M14,8H2' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3C/path%3E%3C/svg%3E");
  --ico-arrow-right-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9,13l5-5-5-5M2,8h12' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3C/path%3E%3C/svg%3E");
  --ico-arrow-back-16-in-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11,7l-5,5,5,5M18,12H6' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3C/path%3E%3C/svg%3E");
  --ico-x-24-large: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='3' y1='3' x2='21' y2='21' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'%3E%3C/line%3E%3Cline x1='3' y1='21' x2='21' y2='3' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5'%3E%3C/line%3E%3C/svg%3E");
  --ico-arrow-up-mask-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13,7l-5-5L3,7M8,14V2' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3C/path%3E%3C/svg%3E");
  --ico-x-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12,4l-8,8M4,4l8,8' fill='none' stroke='white' stroke-linecap='round' stroke-width='2'%3E%3C/path%3E%3C/svg%3E");
  --ico-info-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10,3.5c0,.828-.672,1.5-1.5,1.5s-1.5-.672-1.5-1.5.672-1.5,1.5-1.5,1.5.672,1.5,1.5ZM10,13v-6h-4v1h1v5h-1v1h5v-1h-1Z' fill='white'%3E%3C/path%3E%3C/svg%3E");
  --ico-camera-outlined-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12,4l-.724-1.447c-.169-.339-.516-.553-.894-.553h-4.764c-.379,0-.725.214-.894.553l-.724,1.447h-2c-.552,0-1,.448-1,1v9c0,.552.448,1,1,1h12c.552,0,1-.448,1-1V5c0-.552-.448-1-1-1h-2Z' fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3Ccircle cx='8' cy='9' r='2.5' fill='none' stroke='white' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E");
  --page-transition-duration: 0.45s;
  --modal-appear-disappear-duration: 0.35s;
  --elm-entrance-duration: 0.5s;
  --elm-entrance-gap: 0.15s;
  --elm-entrance-child-duration-ratio: 0.35;
  --elm-entrance-child-gap: 0.1s;
  --card-removal-duration: 0.4s;
  --card-collapse-duration: 0.25s;
  --bw: 12.8px;
  --bh: 1vh;
  --minViewPortSize: 320px;
  --navWidthTablet: 250px;
  --navWidthOverflowLeftTablet: 50px;
  --numNavBtns: 4;
  --dft-body-padding: 16px;
  --os-status-bar-height: 0px;
  --os-bottom-offset: 0px;
  --body-padding: var(--dft-body-padding);
  --page-grid-gap: 16px;
  --btn-min-size: 48px;
  --colourPrimaryStartLighter: var(--blue-500);
  --colourPrimaryEndLighter: var(--blue-600);
}

@property --colourPrimaryStart {
  syntax: "<color>";
  initial-value: #2563eb;
  inherits: false;
}
@property --colourPrimaryEnd {
  syntax: "<color>";
  initial-value: #1e40af;
  inherits: false;
}
.app-outer {
  --body-padding: var(--dft-body-padding);
}

body.iPhone {
  --bw: 3.9px;
  --bh: 8.44px;
  --btn-min-size: 42px;
}
body.iPhone .app-outer {
  --body-padding: calc(var(--dft-body-padding) * 0.75);
}
body.iPhone.showDeviceFrame {
  --os-bottom-offset: 14px;
}

body.showDeviceOS {
  --os-status-bar-height: 40px;
}

@container bodyContainer ((max-width: 950px) and (aspect-ratio > 2 / 1)) or (max-width: 620px) {
  .app-outer {
    --body-padding: calc(var(--dft-body-padding) * 0.75);
    --btn-min-size: 42px;
  }
}
@media only screen and (max-width: 1280px) {
  :root {
    --bw: 1vw;
  }
}
@media only screen and (max-width: 320px) {
  :root {
    --bw: 3.2px;
  }
}
@media only screen and (max-height: 320px) {
  :root {
    --bh: 3.2px;
  }
}
/* Box sizing rules */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list], ol[role=list] {
  list-style: none;
}

/* Set core body defaults */
body {
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h3, h4, button, input, label {
  line-height: 1.2;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img, picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

div, header, footer, nav {
  box-sizing: border-box;
}

strong {
  font-weight: bold;
}

.semiBold {
  font-weight: 600;
}

.weightNormal {
  font-weight: 400;
}

b {
  font-weight: bold;
}

i {
  font-style: italic;
}

em {
  font-style: italic;
}

sup {
  font-size: x-small;
}

.notransition, .notransition *, .notransition ::before, .notransition ::after {
  transition: none !important;
}

.page-locked {
  pointer-events: none;
}

.hidden {
  visibility: hidden;
  position: fixed;
  left: 110vw;
  top: 110vh;
  pointer-events: none;
}

.invisible {
  pointer-events: none;
  visibility: hidden;
}

.displayNone {
  display: none !important;
}

.no-wrap {
  white-space: nowrap;
}

.span-block {
  display: block;
}

.inlineBlock {
  display: inline-block;
}

.whitespacePre {
  white-space: pre;
}

.p0 {
  padding: 0 !important;
}

.pl12 {
  padding-left: 12px;
}

.pl24 {
  padding-left: 24px;
}

.pr12 {
  padding-right: 12px;
}

.pr24 {
  padding-right: 24px;
}

.pt0 {
  padding-top: 0px !important;
}

.pt12 {
  padding-top: 12px;
}

.pt24 {
  padding-top: 24px;
}

.m0 {
  margin: 0 !important;
}

.mt-10 {
  margin-top: -10px !important;
}

.mt0 {
  margin-top: 0px !important;
}

.mt6 {
  margin-top: 6px;
}

.mt8 {
  margin-top: 8px;
}

.mt10 {
  margin-top: 10px;
}

.mt16 {
  margin-top: 16px !important;
}

.mt18 {
  margin-top: 18px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt24 {
  margin-top: 24px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt32 {
  margin-top: 32px !important;
}

.mt54 {
  margin-top: 54px !important;
}

.mb-10 {
  margin-bottom: -10px !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mb4 {
  margin-bottom: 4px;
}

.mb8 {
  margin-bottom: 8px !important;
}

.mb12 {
  margin-bottom: 12px !important;
}

.mb16 {
  margin-bottom: 16px !important;
}

.mb18 {
  margin-bottom: 18px !important;
}

.mb24 {
  margin-bottom: 24px !important;
}

.mb32 {
  margin-bottom: 32px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.ml-6 {
  margin-left: -6px;
}

.ml4 {
  margin-left: 4px !important;
}

.ml6 {
  margin-left: 6px;
}

.ml8 {
  margin-left: 8px !important;
}

.ml12 {
  margin-left: 12px;
}

.ml22 {
  margin-left: 22px !important;
}

.ml24 {
  margin-left: 24px !important;
}

.crushed {
  height: 0;
  overflow: hidden;
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0;
  transition: height var(--card-removal-duration) ease, min-height var(--card-removal-duration) ease, padding var(--card-removal-duration) ease, margin var(--card-removal-duration) ease, line-height var(--card-removal-duration) ease;
}

.min-width-240 {
  min-width: 240px;
}

.min-width-250 {
  min-width: 250px;
}

.max-width-500 {
  max-width: 500px;
}

.width-60 {
  width: 60px;
}

.max-width-550 {
  max-width: 550px !important;
}

.max-width-560 {
  max-width: 560px;
}

.centred-with-margin-hor {
  margin: 0 auto;
}

.img-50 {
  width: 50px;
  height: 50px;
}

.fontSize12 {
  font-size: 12px !important;
}

.fontSize13 {
  font-size: 13px;
}

.fontSize14 {
  font-size: 14px !important;
}

.fontSize16 {
  font-size: 16px !important;
}

.fontSize18 {
  font-size: 18px !important;
}

.fontSize20 {
  font-size: 20px;
}

.fontSize36 {
  font-size: 36px;
}

.clrWhite50, .clrWhite50 > * {
  color: rgba(255, 255, 255, 0.5);
}
.clrWhite50 span, .clrWhite50 > * span {
  color: rgba(255, 255, 255, 0.5);
}

.clrWhite70, .clrWhite70 > * {
  color: rgba(255, 255, 255, 0.7);
}
.clrWhite70 strong, .clrWhite70 > * strong {
  color: white;
}

.clrWhite75, .clrWhite75 > * {
  color: rgba(255, 255, 255, 0.75);
}
.clrWhite75 strong, .clrWhite75 > * strong {
  color: white;
}

.clrWhite100, .clrWhite100 > *, .clrWhite, .clrWhite > * {
  color: white;
}

.text-align-left {
  text-align: left !important;
}

.text-align-right {
  text-align: right !important;
}

.text-align-centre {
  text-align: center !important;
}

.centred {
  align-self: center;
  margin: 0 auto;
}

a {
  color: white;
}

.mob-shown {
  display: none !important;
}

.mob-hidden {
  display: flex !important;
}

.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-row.centred-ver {
  align-items: center;
}

.row-auto-col {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -moz-column-gap: 72px;
       column-gap: 72px;
  row-gap: 12px;
  justify-content: center;
}
.row-auto-col.force-col {
  flex-direction: column;
  align-items: center;
}

.col-mob {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 72px;
}
.col-mob p {
  position: relative;
  text-align: center;
}

@container bodyContainer (max-width: 560px) {
  .col-mob {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
}
@container bodyContainer ((max-width: 950px) and  (aspect-ratio > 2 / 1)) or (max-width: 620px) {
  .flex-centre-col-mob, .hdg-balance.flex-centre-col-mob {
    flex-direction: column;
    align-items: center;
  }
  .flex-centre-col-mob h3, .flex-centre-col-mob p, .hdg-balance.flex-centre-col-mob h3, .hdg-balance.flex-centre-col-mob p {
    text-align: center;
    margin-left: 0;
    margin-right: 0;
  }
  .flex-centre-col-mob .btn-info, .hdg-balance.flex-centre-col-mob .btn-info {
    position: absolute;
    top: 11px;
    right: 11px;
  }
  .fontSize12Mob {
    font-size: 12px;
  }
  .fontSize15Mob {
    font-size: 15px;
  }
  .fontSize16Mob {
    font-size: 16px;
  }
  .fontSize18Mob {
    font-size: 18px;
  }
  .fontSize22Mob {
    font-size: 22px;
  }
  .mob-shown {
    display: flex !important;
  }
  .mob-hidden {
    display: none !important;
  }
}
.ico-rounded {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--green-500);
  color: white;
  position: relative;
  line-height: 0;
  font-weight: 600;
}
.ico-rounded:after {
  position: absolute;
  left: calc(50% - 8px);
  top: calc(50% - 8px);
  width: 16px;
  height: 16px;
}
.ico-rounded.ico-rounded-bolt {
  background-color: var(--green-500);
}
.ico-rounded.ico-rounded-bolt:after {
  content: var(--ico-bolt-circled-16);
}
.ico-rounded.ico-rounded-jars {
  background-color: var(--green-500);
}
.ico-rounded.ico-rounded-jars:after {
  content: var(--ico-jars-16);
}
.ico-rounded.ico-rounded-shield-tick {
  background-color: var(--green-500);
}
.ico-rounded.ico-rounded-shield-tick:after {
  content: var(--ico-shield-ticked-16);
}
.ico-rounded.ico-rounded-tick {
  background-color: var(--green-500);
}
.ico-rounded.ico-rounded-tick:after {
  content: var(--ico-tick-circled-16);
}
.ico-rounded.ico-rounded-card {
  background-color: var(--violet-500);
}
.ico-rounded.ico-rounded-card:after {
  content: var(--ico-credit-card-16);
}
.ico-rounded.ico-rounded-deliveroo {
  background-color: #00ccbc;
}
.ico-rounded.ico-rounded-deliveroo:after {
  content: var(--ico-deliveroo-16);
}
.ico-rounded.ico-rounded-o2 {
  background: linear-gradient(0deg, #046fb5 0%, #14428f 100%);
}
.ico-rounded.ico-rounded-o2:after {
  content: var(--ico-o2-16);
}

.ico-tr:after {
  position: absolute;
  right: 8px;
  top: 8px;
  opacity: 0.4;
}
.ico-tr.ico-tr-24:after {
  width: 24px;
  height: 24px;
}
.ico-tr.ico-tr-24.ico-bank:after {
  content: var(--ico-bank-24);
}
.ico-tr.ico-tr-16:after {
  width: 16px;
  height: 16px;
}
.ico-tr.ico-tr-16.ico-bank:after {
  content: var(--ico-bank-16);
}
.ico-tr.ico-tr-16.ico-pension:after {
  content: var(--ico-nest-egg-16);
}
.ico-tr.ico-tr-16.ico-savings:after {
  content: var(--ico-piggy-16);
}

.i-alert {
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
}

.i-dots {
  display: flex;
  margin-top: 12px;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.i-dots .i-dot {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: var(--blue-600);
}
.i-dots .i-dot:not(:last-of-type) {
  margin-left: -8px;
}
.i-dots .i-dot:after {
  position: absolute;
  left: calc(50% - 8px);
  top: calc(50% - 8px);
  width: 16px;
  height: 16px;
}
.i-dots .i-dot.i-dot-profile:after {
  content: var(--ico-profile-16);
}
.i-dots .i-dot.i-dot-card {
  background: var(--violet-500);
}
.i-dots .i-dot.i-dot-card:after {
  content: var(--ico-credit-card-16);
}
.i-dots .i-dot.i-dot-bank {
  background: var(--red-500);
}
.i-dots .i-dot.i-dot-bank:after {
  content: var(--ico-bank-16);
}
.i-dots .i-dot.i-dot-pension {
  background: var(--orange-500);
}
.i-dots .i-dot.i-dot-pension:after {
  content: var(--ico-nest-egg-16);
}
.i-dots .i-dot.i-dot-savings {
  background: var(--green-500);
}
.i-dots .i-dot.i-dot-savings:after {
  content: var(--ico-piggy-16);
}

.ico-prefix::before {
  content: "";
  display: block;
  position: relative;
  margin-right: 8px;
  background-color: currentColor;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.ico-prefix.ico-prefix-24::before {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}
.ico-prefix.ico-prefix-24.ico-prefix-exclaim::before {
  mask-image: var(--ico-exclaim-triangle-24);
  -webkit-mask-image: var(--ico-exclaim-triangle-24);
}
.ico-prefix.ico-prefix-24.ico-prefix-thumbs-up::before {
  mask-image: var(--ico-thumbs-up-24);
  -webkit-mask-image: var(--ico-thumbs-up-24);
}
.ico-prefix.ico-prefix-float-left::before {
  position: absolute;
}
.ico-prefix.ico-prefix-float-left.ico-prefix-24::before {
  left: -24px;
  top: calc(50% - 12px);
}

@container bodyContainer ((max-width: 950px) and  (aspect-ratio > 2 / 1)) or (max-width: 620px) {
  .ico-prefix::before {
    align-self: flex-start;
  }
}
/* Reddit Sans + FigTree:
light			300
regular		400
med				500
semibold	600
bold			700
ExtraBold	800
Black			900
*/
:where(p, a, span, h1, h2, h3, h4, h5, h6, strong, em, blockquote, li, dt, dd) {
  letter-spacing: -0.015em;
}

.semibold {
  font-weight: 600;
}

.bold {
  font-weight: 700;
}

h1, h2, h3, h4 {
  font-family: "Figtree", sans-serif;
}

h5, h6, p, button, span, label, input {
  font-family: "Reddit Sans", sans-serif;
}

h1, h2, h3, p, span, label {
  color: white;
}

h1 {
  font-size: 28px;
}

h2 {
  line-height: 1.3;
  font-size: 24px;
  margin: 8px 0;
}
h2 .pence {
  font-weight: 400;
  font-size: 14px;
}

h3 {
  font-size: 20px;
  margin-top: 0;
}

h3.subheading {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

h3.subheadingMed {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

a {
  color: var(--link-colour);
  transition: color 0.2s ease;
}
a:hover {
  color: var(--link-colour-hover);
}
a.tel-link {
  display: inline-block;
  text-decoration: none;
  font-size: 28px;
  font-weight: bold;
  font-family: "Figtree", sans-serif;
}

p {
  font-size: 14px;
}

.nowrap {
  white-space: nowrap;
}

.text-balanced {
  text-wrap: balance;
}

.text-pretty {
  text-wrap: pretty;
}

.mono-nums, .mono-nums * {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em !important;
}
.mono-nums .poundsPence .pence, .mono-nums * .poundsPence .pence {
  font-weight: 400;
}

h3.hdg-small {
  font-size: 12px;
  font-weight: 400;
}

.warn {
  color: var(--red-inter-on-dark) !important;
}
.warn span, .warn p {
  color: var(--red-inter-on-dark) !important;
}

.positive {
  color: var(--green-500) !important;
}
.positive span, .positive p {
  color: var(--green-500) !important;
}

.hdg-btnInfo-absolute .btn-info {
  position: absolute;
  right: 11px;
}

.hdg-balance {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.hdg-balance.flex-centre-col {
  flex-direction: column;
  align-items: center;
}
.hdg-balance h2 {
  margin-top: 0;
  line-height: 1.4;
  margin-right: 16px;
}
.hdg-balance h3 {
  line-height: 1.4;
  margin-right: 16px;
  display: flex;
  align-items: center;
}
.hdg-balance p {
  margin-top: 0 !important;
  text-align: right;
  line-height: 1.4;
}
.hdg-balance p .span-block:first-of-type {
  font-size: 20px;
  color: white;
  font-weight: 700;
  position: relative;
}
.hdg-balance p .span-block .pence {
  font-size: 14px;
  font-weight: 300;
}
.hdg-balance.hdg-balance-h2 .span-block:first-of-type {
  font-size: 24px;
}
.hdg-balance.hdg-balance-large p.val span {
  font-size: 16px;
}
.hdg-balance.hdg-balance-large p.val span:first-of-type {
  font-size: 22px;
}
.hdg-balance.hdg-balance-large p.val::before {
  top: 7px;
}
.hdg-balance.hdg-balance-med p.val span {
  font-size: 14px;
}
.hdg-balance.hdg-balance-med p.val span:first-of-type {
  font-size: 20px;
}
.hdg-balance.hdg-balance-med p.val::before {
  top: 7px;
}
.hdg-balance.hdg-balance-info-right h3 {
  margin-right: 40px;
}
.hdg-balance .btn-info {
  display: inline-flex;
  margin-left: 6px;
}

p.val {
  font-size: 16px;
  position: relative;
}
p.val:not(.val-no-icon) {
  padding-left: 20px;
}
p.val .pence {
  font-size: 14px;
  font-weight: 300;
}

.val {
  position: relative;
  transition: color 0.4s ease;
  color: var(--val-static);
}
.val span:not(.sub-caption) {
  color: var(--val-static);
}
.val:not(.val-no-icon)::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 3px;
  background-color: currentColor;
  transform: rotate3d(0, 0, 1, 90deg);
  transform-origin: 50% 50%;
  width: 16px;
  height: 16px;
  background-color: currentColor; /* Inherits text color */
  mask-image: var(--ico-arrow-up-mask-16);
  -webkit-mask-image: var(--ico-arrow-up-mask-16);
  transition: transform 0.3s ease;
}
.val.val-down {
  color: var(--val-decrease);
}
.val.val-down span:not(.sub-caption) {
  color: var(--val-decrease);
}
.val.val-down:not(.val-no-icon)::before {
  transform: rotate3d(1, 0, 0, 180deg);
}
.val.val-up {
  color: var(--val-increase);
}
.val.val-up span:not(.sub-caption) {
  color: var(--val-increase);
}
.val.val-up:not(.val-no-icon)::before {
  transform: rotate3d(1, 0, 0, 0deg);
}

.sub-caption {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 300;
}
.sub-caption.fontSize14 {
  font-size: 14px;
  font-weight: 400;
}

.hdg-left-right {
  display: flex;
  justify-content: space-between;
}

.ico-row {
  font-size: 12px;
}

.page-heading-img-left {
  display: flex;
  align-items: center;
}
.page-heading-img-left img {
  margin-right: 12px;
  height: 100px;
}

.poundsPence span {
  letter-spacing: -0.015em;
}
.poundsPence .pounds {
  font-weight: 700;
}
.poundsPence .pence {
  font-weight: 300;
}
.poundsPence.poundsPenceXS .pounds {
  font-size: 16px;
}
.poundsPence.poundsPenceXS .pence {
  font-size: 10px;
}
.poundsPence.poundsPenceS .pounds {
  font-size: 18px;
}
.poundsPence.poundsPenceS .pence {
  font-size: 11px;
}
.poundsPence.poundsPenceSM .pounds {
  font-size: 20px;
}
.poundsPence.poundsPenceSM .pence {
  font-size: 12px;
}
.poundsPence.poundsPenceM .pounds {
  font-size: 22px;
}
.poundsPence.poundsPenceM .pence {
  font-size: 14px;
}
.poundsPence.poundsPenceM::before {
  top: 8px;
}
.poundsPence.poundsPenceML .pounds {
  font-size: 26px;
}
.poundsPence.poundsPenceML .pence {
  font-size: 16px;
}
.poundsPence.poundsPenceL .pounds {
  font-size: 30px;
}
.poundsPence.poundsPenceL .pence {
  font-size: 20px;
}
.poundsPence.poundsPenceXL .pounds {
  font-size: 36px;
}
.poundsPence.poundsPenceXL .pence {
  font-size: 20px;
}
.poundsPence.poundsPenceXXL .pounds {
  font-size: 40px;
}
.poundsPence.poundsPenceXXL .pence {
  font-size: 22px;
}

.figPercent {
  display: flex;
  justify-content: center;
  font-family: "Reddit Sans", sans-serif;
  letter-spacing: -0.015em;
}
.figPercent span, .figPercent p {
  font-family: "Reddit Sans", sans-serif;
  letter-spacing: -0.015em;
  margin: 0;
}
.figPercent .percent {
  font-weight: 400;
  margin-left: 0.5em;
}
.figPercent .percent .fig {
  font-weight: 500;
}
.figPercent.figPercentXS {
  font-size: 10px;
}
.figPercent.figPercentS {
  font-size: 11px;
}
.figPercent.figPercentXS {
  font-size: 12px;
}
.figPercent.figPercentM {
  font-size: 14px;
}
.figPercent.figPercentML {
  font-size: 16px;
}
.figPercent.figPercentL {
  font-size: 20px;
}
.figPercent.figPercentXL {
  font-size: 20px;
}
.figPercent.figPercentXXL {
  font-size: 22px;
}
.figPercent.figPercentXXL .percent {
  font-size: 22px;
  font-weight: 300;
}

.fig-label {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fig-label .caption, .fig-label .caption > * {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}
.fig-label.poundsPenceSM .caption {
  font-size: 12px;
}
.fig-label.poundsPenceM .caption {
  font-size: 13px;
}
.fig-label.poundsPenceML .caption {
  font-size: 14px;
}
.fig-label.poundsPenceL .caption {
  font-size: 15px;
}
.fig-label.poundsPenceXL .caption {
  font-size: 16px;
}
.fig-label.poundsPenceXXL .caption {
  font-size: 16px;
}

.balance-focus {
  text-align: center;
  padding: 36px 0;
  padding-bottom: 24px;
  position: relative;
}
.balance-focus .span-block:first-of-type {
  font-size: 36px;
  color: white;
  font-weight: 700;
  position: relative;
}
.balance-focus .span-block .pence {
  font-size: 20px;
  font-weight: 300;
}
.balance-focus .sub-caption {
  font-size: 16px;
}
.balance-focus .btn-info {
  position: absolute;
  right: 0;
  top: calc(50% - var(--btn-min-size) / 2);
}
.balance-focus.medium {
  line-height: 1.2;
}
.balance-focus.medium .span-block:first-of-type {
  font-size: 32px;
}
.balance-focus.medium .span-block .pence {
  font-size: 16px;
}
.balance-focus.balance-sub-focus {
  padding-top: 0;
}
.balance-focus.balance-sub-focus .span-block:first-of-type {
  font-size: 26px;
  font-weight: 700;
}
.balance-focus.balance-sub-focus .span-block:first-of-type span {
  color: rgba(255, 255, 255, 0.75) !important;
}
.balance-focus.balance-sub-focus .span-block .pence {
  font-size: 16px;
}
.balance-focus.balance-sub-focus .span-block.sub-caption {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}
.balance-focus.balance-sub-focus .span-block.sub-caption span {
  color: rgba(255, 255, 255, 0.5);
}

.grad-text-blue {
  width: -moz-fit-content;
  width: fit-content;
  background: -webkit-linear-gradient(right, var(--blue-500), var(--blue-300));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grad-text-red {
  width: -moz-fit-content;
  width: fit-content;
  background: -webkit-linear-gradient(right, var(--red-500), var(--red-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grad-text-green {
  width: -moz-fit-content;
  width: fit-content;
  background: -webkit-linear-gradient(right, var(--green-500), var(--green-300));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-shadowed {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.2));
}

.lineHeight1_8 {
  line-height: 1.8;
}

.type-x-large {
  font-size: 22px;
}

.type-large {
  font-size: 20px;
}

.type-med-large {
  font-size: 18px;
}

.type-med {
  font-size: 16px;
}

.type-small-med {
  font-size: 14px;
}

.type-small {
  font-size: 12px;
}

.type-x-small {
  font-size: 10px;
}

@container bodyContainer ((max-width: 950px) and (aspect-ratio > 2 / 1)) or (max-width: 620px) {
  .hdg-balance.flex-centre-col-mob h3.fontSize16Mob {
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.5);
  }
  .type-x-large {
    font-size: 20px;
  }
  .type-large {
    font-size: 18px;
  }
  .type-med-large {
    font-size: 16px;
  }
  .type-med {
    font-size: 14px;
  }
  .type-small-med {
    font-size: 13px;
  }
  .type-small {
    font-size: 10px;
  }
  .type-x-small {
    font-size: 8px;
  }
}
@container bodyContainer (max-width: 500px) {
  .text-balanced-500 {
    text-wrap: balance;
  }
}
@container bodyContainer (max-width: 380px) {
  .fontSize12SmallMob {
    font-size: 12px;
  }
}
button, .btn {
  position: relative;
  outline: none;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  width: -moz-fit-content;
  width: fit-content;
  min-width: 42px;
  min-height: 42px;
  font-family: "Reddit Sans", sans-serif;
  font-size: 15px;
  font-weight: 400;
  padding: 10px 16px;
  border-radius: 6px;
  margin: 0 4px;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease, background 0.2s ease;
}
button.btn-small, .btn.btn-small {
  min-width: 36px;
  min-height: 36px;
}
button div, button span, .btn div, .btn span {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}
button:not(:disabled):not(.current), .btn:not(:disabled):not(.current) {
  cursor: pointer;
}
button:not(:disabled):not(.current):hover, .btn:not(:disabled):not(.current):hover {
  color: white;
}
button:not(:disabled):not(.current):hover div, button:not(:disabled):not(.current):hover span, .btn:not(:disabled):not(.current):hover div, .btn:not(:disabled):not(.current):hover span {
  color: white;
}

.btn-absolute {
  position: absolute;
}

.btn-centre {
  align-self: center;
}

.btn-right {
  align-self: flex-end;
  margin-right: 0;
  justify-self: flex-end;
  grid-column-end: 3;
  margin-left: auto;
}

.btn-lozenge {
  padding: 10px 20px;
  border-radius: 24px;
  height: 48px;
  min-width: 48px;
}

.btn-nag::after {
  content: attr(data-nag-val);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
  font-weight: 600;
  background: var(--red-600);
  position: absolute;
  right: -4px;
  top: -4px;
  transition: transform 0.3s var(--ease-out-back), opacity 0.15s, color 0.15s;
}
.btn-nag[data-nag-val="0"]::after {
  color: rgba(255, 255, 255, 0);
  opacity: 0;
  transition: transform 0.3s var(--ease-in-quad), color 0.2s ease, opacity 0.1s ease 0.2s;
  transform: scale(0.2);
}

.btn-flat {
  background: rgba(0, 0, 0, 0);
}

.btn-link {
  background: none;
  padding: 10px 0;
  color: var(--link-colour);
  text-decoration: none;
}
.btn-link .simple-icon .outlined {
  stroke: var(--link-colour);
  opacity: 1;
  transition: stroke 0.2s ease;
}
.btn-link:hover:not(:disabled):not(.current) {
  color: var(--link-colour-hover);
}
.btn-link:hover:not(:disabled):not(.current) .simple-icon .outlined {
  stroke: var(--link-colour-hover);
  opacity: 1;
}

.btn-inline {
  color: var(--blue-inter-on-dark);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  font-family: "Reddit Sans", sans-serif;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
}
.btn-inline:hover {
  color: var(--blue-inter-on-dark-hover);
}

.btn-text {
  justify-content: center;
  align-items: center;
}

.btn-round {
  width: 48px;
  height: 48px;
  border-radius: 24px;
  justify-content: center;
  padding: 6px;
}
.btn-round.btn-small {
  width: 36px;
  height: 36px;
  border-radius: 18px;
}

.btn-dim {
  background: rgba(0, 0, 0, 0.1);
}
.btn-dim.btn-round-inner {
  background: rgba(0, 0, 0, 0);
}
.btn-dim.btn-round-inner::before {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  left: calc(50% - 16px);
  top: calc(50% - 16px);
  transition: background 0.2s ease;
}
.btn-dim.btn-dim-light {
  background: var(--navBG-large);
}
.btn-dim.btn-dim-light:hover {
  background: var(--navBG-large-hover);
}
.btn-dim:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.2);
}
.btn-dim:hover:not(:disabled).btn-data-icon::before {
  opacity: 0.85;
}
.btn-dim:hover:not(:disabled).btn-round-inner {
  background: rgba(0, 0, 0, 0);
}
.btn-dim:hover:not(:disabled).btn-round-inner::before {
  background: rgba(0, 0, 0, 0.2);
}

.btn-round-inner {
  margin: -8px;
}

.btn-ico svg {
  flex-shrink: 0;
}

.btn-ico-left svg {
  margin-right: 16px;
}

.btn-ico-right svg {
  margin-left: 16px;
}

.btn-icon-24::before {
  width: 24px;
  height: 24px;
}

.btn-icon-16::before {
  width: 16px;
  height: 16px;
}

.btn-data-icon {
  display: flex;
  align-items: center;
}
.btn-data-icon::before {
  position: relative;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  content: "";
  background-color: currentColor;
}
.btn-data-icon.btn-icon-24.btn-data-icon-back:before {
  mask-image: var(--ico-arrow-back-16-in-24);
  -webkit-mask-image: var(--ico-arrow-back-16-in-24);
}
.btn-data-icon.btn-icon-24.btn-data-icon-x-large:before {
  mask-image: var(--ico-x-24-large);
  -webkit-mask-image: var(--ico-x-24-large);
}
.btn-data-icon.btn-icon-16.btn-data-icon-left {
  padding-left: 10px;
}
.btn-data-icon.btn-icon-16.btn-data-icon-left::before {
  margin-right: 8px;
}
.btn-data-icon.btn-icon-16.btn-data-icon-right {
  flex-direction: row-reverse;
  padding-right: 10px;
}
.btn-data-icon.btn-icon-16.btn-data-icon-right::before {
  margin-left: 8px;
}
.btn-data-icon.btn-icon-16.btn-data-icon-centre::before {
  position: absolute;
  left: calc(50% - 8px);
}
.btn-data-icon.btn-icon-16.btn-data-icon-add::before {
  mask-image: var(--ico-add-16);
  -webkit-mask-image: var(--ico-add-16);
}
.btn-data-icon.btn-icon-16.btn-data-icon-card::before {
  mask-image: var(--ico-credit-card-16);
  -webkit-mask-image: var(--ico-credit-card-16);
}
.btn-data-icon.btn-icon-16.btn-data-icon-ellipsis::before {
  mask-image: var(--ico-ellipsis-16);
  -webkit-mask-image: var(--ico-ellipsis-16);
}
.btn-data-icon.btn-icon-16.btn-data-icon-back:before {
  mask-image: var(--ico-arrow-back-16);
  -webkit-mask-image: var(--ico-arrow-back-16);
}
.btn-data-icon.btn-icon-16.btn-data-icon-info:before {
  mask-image: var(--ico-info-16);
  -webkit-mask-image: var(--ico-info-16);
}
.btn-data-icon.btn-icon-16.btn-data-icon-close:before {
  mask-image: var(--ico-x-16);
  -webkit-mask-image: var(--ico-x-16);
}
.btn-data-icon.btn-icon-16.btn-data-icon-chevron-r:before {
  mask-image: var(--ico-chevron-right-16);
  -webkit-mask-image: var(--ico-chevron-right-16);
}
.btn-data-icon:hover:not(:disabled).btn-data-icon::before {
  opacity: 0.95;
}

.btn-nav {
  background: var(--button-face-flat);
  width: 100%;
  margin: 6px 0;
  font-weight: 700;
}
.btn-nav svg {
  margin-right: 16px;
}
.btn-nav:hover:not(.current) {
  background: var(--button-face-hover);
}

button.current span {
  color: var(--current-colour);
}
button.current .simple-icon .outlined {
  opacity: 1;
  stroke: var(--current-colour);
}
button.current .simple-icon .filled {
  opacity: 1;
  fill: var(--current-colour);
}

.btn-group {
  display: flex;
  position: relative;
}

.btn-group-centred-col {
  align-self: center;
  width: -moz-fit-content;
  width: fit-content;
}
.btn-group-centred-col button {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.btn-group-right-mob-col {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btnWidth140 button {
  width: 140px;
}

.btn-row {
  display: flex;
  position: relative;
}
.btn-row .btn-far-right {
  position: absolute;
  right: 0;
}
.btn-row button:first-of-type {
  margin-left: 0;
}
.btn-row button:last-of-type {
  margin-right: 0;
}

.btn-primary {
  background-color: transparent;
  --colourPrimaryStart: var(--blue-600);
  --colourPrimaryEnd: var(--blue-800);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  background-image: linear-gradient(90deg, var(--colourPrimaryStart) 0%, var(--colourPrimaryEnd) 100%);
  transition: color 0.2s ease, --colourPrimaryStart 0.2s ease, --colourPrimaryEnd 0.2s ease;
}
.btn-primary span {
  color: currentColor;
}
.btn-primary:hover:not(:disabled) {
  --colourPrimaryStart: var(--blue-700);
  --colourPrimaryEnd: var(--blue-900);
  color: white;
}
.btn-primary:disabled {
  --colourPrimaryStart: rgba(0, 0, 0, 0.175);
  --colourPrimaryEnd: rgba(0, 0, 0, 0.175);
  color: rgba(255, 255, 255, 0.2);
}

.btn-secondary {
  background-color: rgba(0, 0, 0, 0.2);
  color: var(--blue-inter-on-dark);
}
.btn-secondary:not(:disabled):not(.current):hover {
  background-color: rgba(0, 0, 0, 0.3);
  color: var(--blue-inter-on-dark-hover);
}

.btn-accent .simple-icon .outlined {
  opacity: 1;
  stroke: var(--blue-inter-on-dark);
  transition: stroke 0.2s ease;
}
.btn-accent .simple-icon .filled {
  opacity: 1;
  fill: var(--blue-inter-on-dark);
  transition: fill 0.2s ease;
}
.btn-accent:hover .simple-icon .outlined {
  stroke: var(--blue-inter-on-dark-hover);
}
.btn-accent:hover .simple-icon .filled {
  fill: var(--blue-inter-on-dark-hover);
}

.btn-full {
  width: 100%;
  max-width: 500px;
}

.btn-wide {
  width: 100%;
  max-width: 300px;
}

.btn-med-wide {
  width: 100%;
  max-width: 200px;
}

.btn-profile {
  position: absolute;
  left: 28px;
  height: 48px;
  top: calc(var(--body-padding) + var(--os-status-bar-height) + 30px);
  background: var(--button-face-flat);
  margin: 0;
  padding: 0;
}
.btn-profile .prf-img-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  background: linear-gradient(to bottom right, var(--blue-900) 0%, var(--blue-600) 100%);
  border: 1px solid var(--blue-500);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.25);
}
.btn-profile .label-btn {
  position: relative;
  padding-left: 55px;
  text-align: left;
}
.btn-profile .label-btn span {
  font-size: 18px;
  display: block;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease;
}
.btn-profile .label-btn span:last-of-type {
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}
.btn-profile:hover span {
  color: white !important;
}

.buttonset {
  display: flex;
}
.buttonset.buttonset-stacked {
  flex-direction: column;
}
.buttonset.buttonset-stacked button {
  margin-bottom: 12px;
}
.buttonset.buttonset-stacked.buttonset-centred {
  align-items: center;
}

@container bodyContainer (max-width: 560px) {
  .btn-group-right-mob-col {
    justify-content: center;
  }
}
@container bodyContainer ((max-width: 950px) and  (aspect-ratio > 2 / 1)) or (max-width: 620px) {
  button {
    font-size: 14px;
  }
  button.btn-small {
    min-width: 32px;
    min-height: 32px;
  }
  .btn-round {
    width: 42px;
    height: 42px;
    border-radius: 21px;
    padding: 6px;
  }
  .btn-round.btn-small {
    width: 32px;
    height: 32px;
    border-radius: 16px;
  }
  .btn-round-inner {
    margin: -5px;
  }
  .btn-lozenge {
    border-radius: 21px;
    height: 42px;
    min-width: 42px;
  }
  .btn-data-icon.btn-data-16.btn-data-icon-left.btn-lozenge {
    padding-left: 38px;
    padding-right: 10px;
  }
  .btn-data-icon.btn-data-16.btn-data-icon-left.btn-lozenge::before {
    left: 12px;
  }
  .btn-nav {
    flex-direction: column;
    align-items: center;
    font-size: 10px;
    width: 60px;
    height: 60px;
    margin: 0;
  }
  .btn-nav svg {
    margin-right: 0;
    margin-bottom: 4px;
  }
  .btn-nav:hover:not(.current) {
    background: var(--button-face-flat);
  }
  .btn-profile {
    left: var(--body-padding);
    top: calc(var(--body-padding) + var(--os-status-bar-height));
    height: 42px;
  }
  .btn-profile .prf-img-btn {
    font-size: 20px;
    width: 42px;
    height: 42px;
    border-radius: 21px;
  }
  .btn-profile .label-btn {
    display: none;
  }
}
.btn-radio-group {
  margin-top: 6px;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 42px;
  display: grid;
  overflow: hidden;
  position: relative;
  z-index: 0;
  --selected-index: 0;
  --btn-count: 2;
  grid-template-columns: repeat(var(--btn-count), 1fr);
  width: -moz-fit-content;
  width: fit-content;
}
.btn-radio-group::after {
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  width: calc(100% / var(--btn-count));
  border-radius: 6px;
  z-index: 10;
  transform: translateX(calc(100% * var(--selected-index)));
  transition: transform 0.3s var(--ease-in-out-quart);
  border: 2px solid transparent;
  background: linear-gradient(90deg, var(--blue-inter-on-dark), var(--blue-700)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.btn-radio-group input[type=radio] {
  display: none;
}
.btn-radio-group input[type=radio] + label {
  position: relative;
  font-family: "Reddit Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: var(--blue-inter-on-dark);
  padding: 10px 8px;
  flex: 1 1 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  transition: color 0.2s ease;
}
.btn-radio-group input[type=radio] + label::before {
  content: attr(data-label-full);
}
.btn-radio-group input[type=radio]:not(:checked) + label {
  cursor: pointer;
}
.btn-radio-group input[type=radio]:not(:checked) + label:hover {
  color: var(--blue-inter-on-dark-hover);
}
.btn-radio-group input[type=radio]:checked + label {
  color: var(--blue-500);
}
.btn-radio-group:has(input:nth-of-type(1):checked) {
  --selected-index: 0;
}
.btn-radio-group:has(input:nth-of-type(2):checked) {
  --selected-index: 1;
}
.btn-radio-group:has(input:nth-of-type(3):checked) {
  --selected-index: 2;
}
.btn-radio-group:has(input:nth-of-type(4):checked) {
  --selected-index: 3;
}
.btn-radio-group:has(input:nth-of-type(5):checked) {
  --selected-index: 4;
}
.btn-radio-group:has(input:nth-of-type(6):checked) {
  --selected-index: 5;
}
.btn-radio-group:has(input:nth-of-type(7):checked) {
  --selected-index: 6;
}
.btn-radio-group:has(input:nth-of-type(8):checked) {
  --selected-index: 7;
}
.btn-radio-group:has(input:nth-of-type(9):checked) {
  --selected-index: 8;
}
.btn-radio-group:has(input:nth-of-type(10):checked) {
  --selected-index: 9;
}
.btn-radio-group.btn-set-r {
  align-self: flex-end;
  margin-left: auto;
  margin-right: 0;
}
.btn-radio-group.btn-set-centre {
  align-self: center;
}
.btn-radio-group.btn-radio-group-2 {
  --btn-count: 2;
}
.btn-radio-group.btn-radio-group-3 {
  --btn-count: 3;
}
.btn-radio-group.btn-radio-group-4 {
  --btn-count: 4;
}
.btn-radio-group.btn-radio-group-5 {
  --btn-count: 5;
}

@container bodyContainer (max-width: 380px) {
  .btn-radio-group-small-at-380 input[type=radio] + label::before {
    content: attr(data-label-short);
  }
}
@container bodyContainer ((max-width: 950px) and  (aspect-ratio > 2 / 1)) or (max-width: 620px) {
  .btn-radio-group input[type=radio] + label {
    font-size: 14px;
    letter-spacing: -0.011em;
    padding: 8px 10px;
  }
  .btn-radio-group.btn-set-centre-mob {
    align-self: center;
    margin-left: 0;
    margin-right: 0;
  }
}
.tile {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 8px;
  background: var(--tile-bg);
  padding: 16px;
  color: rgba(255, 255, 255, 0.7);
}
.tile.tile-focus-slate {
  background: var(--slate-600);
}
.tile.tile-focus-primary {
  background: var(--bg-focus-primary);
}
.tile.tile-focus-secondary {
  background: var(--bg-focus-secondary);
}
.tile.tile-focus-tertiary {
  background: var(--bg-focus-tertiary);
}
.tile.tile-alert {
  display: inline-flex;
}
.tile lottie-player {
  width: 60%;
  aspect-ratio: 1/1;
  align-self: center;
}
.tile h2 {
  font-size: 22px;
}

.tile-border-accent {
  outline: 2px solid var(--blue-600);
  background-image: radial-gradient(ellipse at top right, rgba(59, 130, 246, 0.2), rgba(0, 0, 0, 0.2) 50%);
  box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.25);
}
.tile-border-accent.increase {
  background-image: radial-gradient(ellipse at top right, rgba(59, 130, 246, 0.2), rgba(0, 0, 0, 0.2) 50%), radial-gradient(ellipse at bottom left, rgba(34, 197, 94, 0.15), rgba(0, 0, 0, 0.2) 50%);
}
.tile-border-accent.decrease {
  background-image: radial-gradient(ellipse at top right, rgba(59, 130, 246, 0.2), rgba(0, 0, 0, 0.2) 50%), radial-gradient(ellipse at bottom left, rgba(244, 63, 94, 0.15), rgba(0, 0, 0, 0.2) 50%);
}

.tile-border-green {
  outline: 2px solid var(--green-500);
  background-image: radial-gradient(ellipse at top right, rgba(34, 197, 94, 0.15), rgba(0, 0, 0, 0.2) 50%);
  box-shadow: inset 0 0 10px rgba(34, 197, 94, 0.25);
}

.tile-border-red {
  outline: 2px solid var(--red-600);
  background-image: radial-gradient(ellipse at top right, rgba(244, 63, 94, 0.15), rgba(0, 0, 0, 0.2) 50%);
  box-shadow: inset 0 0 10px rgba(244, 63, 94, 0.25);
}

.tile-warning {
  outline: 2px solid var(--red-600);
}
.tile-warning .hdg-balance h2, .tile-warning .hdg-balance h3 {
  color: var(--red-inter-on-dark) !important;
}
.tile-warning .warn-positive, .tile-warning .warn-positive span {
  color: var(--red-inter-on-dark) !important;
}

.tile-positive {
  outline: 2px solid var(--green-500);
}
.tile-positive .hdg-balance h2, .tile-positive .hdg-balance h3 {
  color: var(--green-500) !important;
}
.tile-positive .warn-positive, .tile-positive .warn-positive span {
  color: var(--green-500) !important;
}

.tile-values-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tile-values-stack h3 {
  max-width: calc(100% - 74px);
  align-self: center;
}
.tile-values-stack .btn-info {
  position: absolute;
  top: 11px;
  right: 11px;
}

.tile-values-stack-secondary .balance-focus {
  padding-top: 16px;
  padding-bottom: 16px;
}
.tile-values-stack-secondary h3 {
  font-size: 16px;
  font-weight: 300;
  margin: 0 40px;
  color: rgba(255, 255, 255, 0.5);
}

.tile-widget {
  cursor: pointer;
  padding-top: 32px;
  padding-right: 32px;
  min-width: 160px;
  margin: 0;
  overflow: hidden;
}
.tile-widget h2, .tile-widget h2 span {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.25s ease;
}
.tile-widget h3 {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.25s ease;
}
.tile-widget:hover h2, .tile-widget:hover h2 span {
  color: white;
}
.tile-widget:hover h3 {
  color: rgba(255, 255, 255, 0.8);
}
.tile-widget.tile-widget-ico-btn {
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-width: 140px;
}
.tile-widget.tile-widget-ico-btn h3 {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin-top: 16px;
  transition: color 0.25s ease;
}
.tile-widget.tile-widget-ico-btn:hover h3 {
  color: rgb(255, 255, 255);
}

.tile-dark {
  background: rgba(0, 0, 0, 0.2);
}

.tile-alert {
  padding: 14px;
  padding-right: 32px;
  padding-left: 52px;
  padding-top: 8px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.25);
  background: var(--blue-700);
  background: linear-gradient(90deg, var(--blue-700) 0%, var(--teal-700) 100%);
}
.tile-alert:hover::after {
  opacity: 1;
}
.tile-alert::before {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  top: 8px;
  left: 8px;
  border-radius: 50%;
  align-self: flex-start;
  background-color: rgba(0, 0, 0, 0.12);
  background-image: var(--ico-info-circled-24);
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
}
.tile-alert::after {
  content: "";
  opacity: 0.65;
  position: absolute;
  background-image: var(--ico-chevron-right-16);
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center;
  width: 16px;
  height: 16px;
  right: 14px;
  bottom: 16px;
  transition: opacity 0.2s ease;
}
.tile-alert.dismissed {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  padding: 0;
  margin: 0 !important;
  height: 0 !important;
  overflow: hidden;
  transition: transform var(--card-removal-duration) ease, opacity var(--card-removal-duration) ease, height var(--card-collapse-duration) ease var(--card-removal-duration), padding var(--card-collapse-duration) ease var(--card-removal-duration), margin var(--card-collapse-duration) ease var(--card-removal-duration);
}
.tile-alert.alert-blue {
  background: var(--blue-700);
  background: linear-gradient(90deg, var(--blue-700) 0%, var(--teal-700) 100%);
}
.tile-alert.alert-red {
  background: var(--red-700);
  background: linear-gradient(90deg, var(--red-800) 0%, var(--red-600) 100%);
}
.tile-alert.alert-red::before {
  background-image: var(--ico-exclaim-triangle-24);
}
.tile-alert.alert-amber {
  background: var(--orange-600);
  background: linear-gradient(90deg, var(--orange-700) 0%, var(--orange-600) 100%);
}
.tile-alert.alert-amber::before {
  background-image: var(--ico-exclaim-circled-24);
}
.tile-alert.alert-green {
  background: var(--green-600);
  background: linear-gradient(90deg, var(--green-700) 0%, var(--green-500) 100%);
}
.tile-alert.alert-green::before {
  background-image: var(--ico-thumbs-up-24);
}
.tile-alert.alert-opportunity {
  background: var(--green-600);
  background: linear-gradient(90deg, var(--green-700) 0%, var(--green-500) 100%);
}
.tile-alert.alert-opportunity::before {
  background-image: var(--ico-star-outlined-24);
}
.tile-alert.alert-insight {
  background: var(--blue-700);
  background: linear-gradient(90deg, var(--blue-700) 0%, var(--teal-700) 100%);
}
.tile-alert.alert-insight::before {
  background-image: var(--ico-lightbulb-outlined-24);
}
.tile-alert.alert-action {
  background: var(--purple-600);
  background: linear-gradient(90deg, var(--purple-700) 0%, var(--purple-500) 100%);
}
.tile-alert.alert-action::before {
  background-image: var(--ico-hand-palm-outlined-24);
}
.tile-alert h2 {
  font-size: 18px;
  line-height: 1.33;
  margin: 6px 0;
  margin-right: 10px;
  align-items: center;
}
.tile-alert p {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.55;
}
.tile-alert .btn-lozenge {
  background: rgba(0, 0, 0, 0.2);
}
.tile-alert .btn-lozenge:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.3);
}
.tile-alert .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0);
}

.section-tile {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 8px;
  background: var(--tile-bg);
  padding: 16px;
}

.bottom-row {
  gap: 12px;
}

.tile-inner-row {
  border-radius: 8px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.15);
  margin-bottom: 18px;
}

.header-info {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin-bottom: 24px;
}
.header-info h2 {
  margin: 0;
  margin-top: 4px;
}
.header-info button {
  flex-grow: 0;
  flex-shrink: 0;
}
.header-info.header-centred h2 {
  width: 100%;
  margin-left: 44px;
  margin-right: 8px;
}

.header-centred {
  margin-bottom: 16px;
}
.header-centred h2 {
  text-align: center;
}

.imgTileMotif {
  width: 260px;
  align-self: center;
  margin: 8px;
}

.tap-tiles-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

.tap-tile {
  cursor: pointer;
  flex: 1 1 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.15);
  transition: background 0.2s ease;
  gap: 8px;
  justify-content: flex-start;
  flex-basis: 30%;
  overflow: hidden;
}
.tap-tile h3, .tap-tile label, .tap-tile img {
  position: relative;
}
.tap-tile .col {
  gap: 8px;
}
.tap-tile h3 {
  white-space: normal;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  transition: color 0.2s ease;
  margin: 0;
  line-height: 1.25;
  text-wrap: pretty;
}
.tap-tile span.sub-hdg {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  transition: color 0.2s ease;
  pointer-events: none;
  text-wrap: pretty;
  line-height: 1.4 !important;
}
.tap-tile span.sub-hdg.sub-hdg-large {
  font-size: 32px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
}
.tap-tile img {
  width: 90px;
}
.tap-tile:hover {
  background: rgba(0, 0, 0, 0.25);
}
.tap-tile:hover h3 {
  color: white;
}
.tap-tile:hover span.sub-hdg {
  color: rgba(255, 255, 255, 0.5);
}
.tap-tile:hover span.sub-hdg.sub-hdg-large {
  color: white;
}

.tile-expanded-over {
  border-radius: 8px;
  padding: 12px;
  position: relative;
  background: var(--page-bg);
  width: 100%;
  min-height: 100px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  margin-top: 0;
  overflow: hidden;
  z-index: 5;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
}
.tile-expanded-over .btn-close {
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}
.tile-expanded-over .hdg {
  overflow: hidden;
  display: flex;
  gap: 8px;
  margin-right: 38px;
}
.tile-expanded-over h2 {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 42px;
}
.tile-expanded-over img {
  width: 42px;
  height: 42px;
}
.tile-expanded-over .tile-cloned-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  gap: 8px;
  width: calc(100% - 24px);
}
.tile-expanded-over .tile-cloned-text h3 {
  white-space: normal;
  font-size: 16px;
  font-weight: 400;
  color: white;
  text-align: center;
  transition: color 0.2s ease;
  margin: 0;
  line-height: 1.25;
  text-wrap: balance;
}
.tile-expanded-over .tile-cloned-text span.sub-hdg {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  transition: color 0.2s ease;
  pointer-events: none;
  text-wrap: pretty;
  line-height: 1.4 !important;
}
.tile-expanded-over .tile-cloned-text span.sub-hdg.sub-hdg-large {
  font-size: 32px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
}
.tile-expanded-over .tile-cloned-text.layout-row {
  align-items: flex-start;
}
.tile-expanded-over .tile-cloned-text.layout-row h3 {
  text-align: left;
}
.tile-expanded-over .tile-cloned-text.layout-row label {
  text-align: left;
}
.tile-expanded-over .ex-modal-content {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease 0s;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.tile-expanded-over .ex-modal-content.shown {
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.5s ease 0.25s;
}
.tile-expanded-over .ex-modal-content .tc-tile {
  display: none;
}
.tile-expanded-over .ex-modal-content.mc-one-off .tc-tile.tc-one-off:not(.tc-after-submit) {
  display: flex;
}
.tile-expanded-over .ex-modal-content.mc-strategy .tc-tile.tc-strategy:not(.tc-after-submit) {
  display: flex;
}
.tile-expanded-over .ex-modal-content.mc-regular .tc-tile.tc-regular:not(.tc-after-submit) {
  display: flex;
}
.tile-expanded-over .ex-modal-content.mc-ret-date .tc-tile.tc-ret-date:not(.tc-after-submit) {
  display: flex;
}
.tile-expanded-over .ex-modal-content.mc-adviser .tc-tile.tc-adviser:not(.tc-after-submit) {
  display: flex;
}
.tile-expanded-over.animating {
  left: 16px;
  pointer-events: none;
  margin-top: 65px;
  position: absolute;
  width: calc(100% - 32px);
}
.rippleElm {
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 0px;
  height: 0px;
  opacity: 0.5;
  animation: ripple 0.5s ease-out;
}

@keyframes ripple {
  20% {
    opacity: 1;
  }
  100% {
    width: 600px;
    height: 600px;
    opacity: 0;
    margin: -300px;
  }
}
@container bodyContainer ((max-width: 950px) and  (aspect-ratio > 2 / 1)) or (max-width: 620px) {
  .tap-tile {
    flex-basis: 48%;
    padding: 12px;
  }
  .tap-tile.tap-tile-odd {
    flex-direction: row;
    align-items: flex-start;
  }
  .tap-tile.tap-tile-odd h3, .tap-tile.tap-tile-odd span {
    text-align: left;
  }
  .tile-inner-row {
    align-items: center;
  }
}
@container bodyContainer (max-width: 500px) {
  .tap-tile {
    flex-basis: 35%;
  }
}
.navMain {
  position: absolute;
  width: var(--navWidthTablet);
  left: var(--body-padding);
  top: calc(var(--body-padding) + var(--os-status-bar-height));
  height: calc(100% - (var(--body-padding) + var(--body-padding) + var(--os-status-bar-height)));
  background-color: var(--navBG-large);
  border-radius: 16px;
  display: flex;
  padding: 12px;
}
.navMain .btn-group {
  flex-direction: column;
  width: 100%;
  padding-top: 90px;
}
.navMain button.current {
  background: rgba(0, 0, 0, 0.2);
}

.navTop {
  position: absolute;
  display: flex;
  top: 0;
  padding: 0 var(--body-padding);
  padding-top: calc(var(--body-padding) + var(--os-status-bar-height));
  left: 0;
  padding-left: calc(var(--navWidthTablet) + var(--body-padding) * 2);
  width: 100%;
  justify-content: flex-end;
  padding-bottom: 16px;
  background-color: transparent;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgb(0, 0, 0) var(--navWidthTablet));
          mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgb(0, 0, 0) var(--navWidthTablet));
}
.navTop::before {
  content: "";
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(180deg, rgba(20, 28, 42, 0.8) 0%, rgba(10, 14, 21, 0.8) 100%);
  transition: opacity 0.5s ease;
  z-index: -1;
}
.navTop::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 12px;
  width: calc(100% - 24px);
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(80, 100, 130, 0) 0%, rgba(80, 100, 130, 0.2) 40%, rgba(80, 100, 130, 0.2) 60%, rgba(80, 100, 130, 0) 100%);
  transition: opacity 0.3s ease;
}
.navTop.scrolled {
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
}
.navTop.scrolled::before, .navTop.scrolled::after {
  opacity: 1;
}
.navTop.scrolled .search-area {
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.navTop button {
  margin-left: 8px;
  margin-right: 0;
  background: var(--buttonface-nav-top);
}
.navTop button:hover {
  background: var(--buttonface-nav-top-hover);
}
.navTop .search-col {
  width: calc(100% - 120px);
  display: flex;
  justify-content: center;
}
.navTop .search-area {
  background: rgba(0, 0, 0, 0.35);
  width: 100%;
  max-width: 500px;
  display: flex;
  height: 50px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0);
  margin-top: -1px;
  margin-right: -1px;
}
.navTop .search-area input {
  box-sizing: border-box;
  background: none;
  outline: none;
  border: none;
  width: 100%;
  height: 100%;
  color: white;
  font-size: 14px;
  padding-left: 20px;
  padding-right: 0;
  position: relative;
}
.navTop .search-area input::-moz-placeholder {
  opacity: 0.25;
  color: white;
  -moz-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.navTop .search-area input::placeholder {
  opacity: 0.25;
  color: white;
  transition: opacity 0.2s ease;
}
.navTop .search-area button {
  background: none;
}
.navTop .search-area button:hover {
  background: none;
}
.navTop .btns-end {
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  padding-left: 8px;
}

body.iPhone.showDeviceFrame .navMain {
  height: 90px;
  padding-top: 7px;
}

@container bodyContainer ((max-width: 950px) and  (aspect-ratio > 2 / 1)) or (max-width: 620px) {
  .navMain {
    left: 0;
    width: 100%;
    top: auto;
    bottom: 0;
    height: 80px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: transparent;
    background-image: linear-gradient(0deg, rgba(20, 28, 42, 0.7) 0%, rgba(10, 14, 21, 0.7) 100%);
    padding: 12px 0;
    -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
  }
  .navMain::after {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    width: calc(100% - 24px);
    height: 1px;
    background: linear-gradient(90deg, rgba(80, 100, 130, 0) 0%, rgba(80, 100, 130, 0.2) 40%, rgba(80, 100, 130, 0.2) 60%, rgba(80, 100, 130, 0) 100%);
  }
  .navMain .btn-group {
    flex-direction: row;
    justify-content: space-around;
    padding-top: 0;
  }
  .navMain .btn-group::after {
    content: "";
    width: 30px;
    height: 2px;
    border-radius: 1px;
    background: var(--current-colour);
    position: absolute;
    top: 55px;
    left: -15px;
    transform: translate(calc(-100 * var(--bw) / (var(--numNavBtns) * 2)));
    transition: transform 0.5s var(--ease-out-back);
  }
  .navMain button.current {
    background: var(--button-face-flat);
  }
  .navMain.current1 .btn-group::after {
    transform: translate(calc(-100 * var(--bw) / (var(--numNavBtns) * 2) + 100 * var(--bw) * 1 / var(--numNavBtns)));
  }
  .navMain.current2 .btn-group::after {
    transform: translate(calc(-100 * var(--bw) / (var(--numNavBtns) * 2) + 100 * var(--bw) * 2 / var(--numNavBtns)));
  }
  .navMain.current3 .btn-group::after {
    transform: translate(calc(-100 * var(--bw) / (var(--numNavBtns) * 2) + 100 * var(--bw) * 3 / var(--numNavBtns)));
  }
  .navMain.current4 .btn-group::after {
    transform: translate(calc(-100 * var(--bw) / (var(--numNavBtns) * 2) + 100 * var(--bw) * 4 / var(--numNavBtns)));
  }
  .navMain.current5 .btn-group::after {
    transform: translate(calc(-100 * var(--bw) / (var(--numNavBtns) * 2) + 100 * var(--bw) * 5 / var(--numNavBtns)));
  }
  .navMain.current6 .btn-group::after {
    transform: translate(calc(-100 * var(--bw) / (var(--numNavBtns) * 2) + 100 * var(--bw) * 6 / var(--numNavBtns)));
  }
  .navMain.current7 .btn-group::after {
    transform: translate(calc(-100 * var(--bw) / (var(--numNavBtns) * 2) + 100 * var(--bw) * 7 / var(--numNavBtns)));
  }
  .navMain.current8 .btn-group::after {
    transform: translate(calc(-100 * var(--bw) / (var(--numNavBtns) * 2) + 100 * var(--bw) * 8 / var(--numNavBtns)));
  }
  .navMain.current9 .btn-group::after {
    transform: translate(calc(-100 * var(--bw) / (var(--numNavBtns) * 2) + 100 * var(--bw) * 9 / var(--numNavBtns)));
  }
  .navMain.current10 .btn-group::after {
    transform: translate(calc(-100 * var(--bw) / (var(--numNavBtns) * 2) + 100 * var(--bw) * 10 / var(--numNavBtns)));
  }
  .navTop {
    width: 100%;
    padding-left: calc(var(--body-padding) + 50px);
    left: 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .navTop .search-col {
    justify-content: flex-end;
    width: 100%;
  }
  .navTop .search-area {
    position: relative;
    height: 44px;
    border-radius: 22px;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0);
    transition: width 0.25s var(--ease-in-out-quad), background 0.25s ease, border 0.2s ease;
  }
  .navTop .search-area button {
    margin-left: 0;
    position: absolute;
    right: 0;
  }
  .navTop .search-area input::-moz-placeholder {
    opacity: 0;
  }
  .navTop .search-area input::placeholder {
    opacity: 0;
  }
  .navTop .search-area.expanded input::-moz-placeholder {
    opacity: 0.25;
  }
  .navTop .search-area.expanded input::placeholder {
    opacity: 0.25;
  }
  .navTop .search-area:not(.expanded) {
    width: 44px;
    background: rgba(0, 0, 0, 0);
  }
  .navTop .search-area:not(.expanded) button {
    background: var(--buttonface-nav-top);
  }
  .navTop .search-area:not(.expanded) button:hover {
    background: var(--buttonface-nav-top-hover);
  }
  .navTop .btns-end {
    padding-left: 0;
  }
  .navTop.scrolled .search-area {
    border: 1px solid rgba(0, 0, 0, 0);
  }
  .navTop.scrolled .search-area.expanded {
    border: 1px solid rgb(0, 0, 0);
  }
}
.tbl-bulleted-table {
  border-collapse: separate;
  border-spacing: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  font-weight: 400;
  width: 100%;
  margin: 18px 0;
}
.tbl-bulleted-table tr {
  height: 64px;
  background: rgba(0, 0, 0, 0.2);
}
.tbl-bulleted-table tr td {
  padding: 16px 10px;
}
.tbl-bulleted-table tr td:first-of-type {
  width: 40px;
  padding: 0 12px;
}
.tbl-bulleted-table tr:first-of-type td:first-of-type {
  border-top-left-radius: 8px;
}
.tbl-bulleted-table tr:first-of-type td:last-of-type {
  border-top-right-radius: 8px;
}
.tbl-bulleted-table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 8px;
}
.tbl-bulleted-table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 8px;
}
.tbl-bulleted-table tr:not(:last-of-type) td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tbl {
  margin: 18px 0;
  display: grid;
  grid-template-columns: auto auto;
  align-self: center;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
}
.tbl .tbl-row {
  display: contents;
}
.tbl .tbl-row .tbl-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tbl .tbl-row .tbl-col.justify-top {
  justify-content: flex-start;
}

.tbl-bulleted {
  grid-template-columns: auto 1fr;
  background: rgba(0, 0, 0, 0.2);
}
.tbl-bulleted .tbl-col {
  padding: 16px 11px;
}
.tbl-bulleted .tbl-col p {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 6px;
}
.tbl-bulleted .tbl-row:not(:last-of-type) .tbl-col {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tbl-transactions {
  border-collapse: separate;
  border-spacing: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  font-weight: 400;
  width: 100%;
  margin: 12px 0;
}
.tbl-transactions tr {
  height: 48px;
  background: rgba(0, 0, 0, 0.2);
}
.tbl-transactions .tr-date {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  height: 36px;
}
.tbl-transactions .tr-date td {
  padding: 0 12px;
  padding-top: 12px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.tbl-transactions .tr-spacer {
  background: none;
  height: 12px;
}
.tbl-transactions .tr-entry td {
  padding-top: 5px;
  padding-bottom: 6px;
}
.tbl-transactions .tr-entry td.fig-in {
  color: var(--green-400);
}
.tbl-transactions .tr-entry td.fig-out {
  color: white;
}
.tbl-transactions .tr-entry td:first-of-type {
  width: 40px;
  padding-left: 12px;
  border-bottom-left-radius: 0;
}
.tbl-transactions .tr-entry td:last-of-type {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  padding-right: 12px;
  border-bottom-right-radius: 0;
}
.tbl-transactions .tr-entry td:nth-of-type(2) {
  padding-left: 8px;
}
.tbl-transactions .tr-entry td:nth-of-type(2) span {
  display: block;
}
.tbl-transactions .tr-entry td:nth-of-type(2) span:not(:first-of-type) {
  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 300;
}
.tbl-transactions .tr-entry span.pence {
  font-size: 12px;
  font-weight: 300;
}
.tbl-transactions tr.tr-entry + tr.tr-entry {
  height: 58px;
}
.tbl-transactions tr.tr-entry + tr.tr-entry td {
  padding-bottom: 16px;
}
.tbl-transactions tr.tr-entry + tr.tr-entry td:first-of-type {
  border-bottom-left-radius: 6px;
}
.tbl-transactions tr.tr-entry + tr.tr-entry td:last-of-type {
  border-bottom-right-radius: 6px;
}

.figs-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  -moz-column-gap: 40px;
       column-gap: 40px;
  row-gap: 16px;
  font-family: "Figtree", sans-serif;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.018em;
  margin: 16px 0;
  margin-bottom: 40px;
  width: 100%;
  max-width: 460px;
  align-self: center;
  line-height: 1.4;
}
.figs-table h3 {
  grid-column: 1/4;
  font-weight: 400;
  font-size: 18px;
}
.figs-table h3 span {
  color: white !important;
}
.figs-table.figs-table-3-col {
  grid-template-columns: auto auto auto;
}
.figs-table span:not(.val):not(.val span) {
  color: rgba(255, 255, 255, 0.5);
}
.figs-table .figs-table-row {
  display: contents;
}
.figs-table .figs-table-row .figs-table-col {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.figs-table .figs-table-row .figs-table-col.figs-col-desc {
  justify-content: flex-start;
  align-items: center;
}
.figs-table .figs-table-row .figs-table-col.figs-col-desc > * {
  display: inline;
}
.figs-table .figs-table-row .figs-table-col.figs-col-currency {
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.figs-table .figs-table-row .figs-table-col.figs-col-currency span {
  font-variant-numeric: tabular-nums;
}
.figs-table .figs-table-row .figs-table-col.figs-col-currency span:first-of-type.val {
  margin-left: 18px;
}
.figs-table .figs-table-row .figs-table-col.figs-col-currency span:first-of-type.val::before {
  top: calc(50% - 8px);
  left: -18px;
}
.figs-table .figs-table-row .figs-table-col.figs-col-currency span.pence {
  font-size: 20px;
  letter-spacing: -0.0175em;
  font-weight: 300;
}
.figs-table .figs-table-row .figs-table-col.figs-col-percent {
  font-size: 20px;
  font-weight: 400;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.figs-table .figs-table-row .figs-table-col.figs-col-percent span {
  font-variant-numeric: tabular-nums;
}
.figs-table .figs-table-row .figs-table-col.figs-table-col-2-4 {
  grid-column: 2/4;
}
.figs-table.figs-table-totals {
  -moz-column-gap: 0;
       column-gap: 0;
  row-gap: 6px;
  width: 100%;
}
.figs-table.figs-table-totals .figs-table-row .figs-table-col {
  padding: 0 8px;
}
.figs-table.figs-table-totals .figs-table-row .figs-table-col.figs-col-desc {
  color: rgba(255, 255, 255, 0.5);
}
.figs-table.figs-table-totals .figs-table-row .figs-table-col.mono-nums {
  font-size: 22px;
}
.figs-table.figs-table-totals .figs-table-row .figs-table-col.mono-nums span {
  color: rgba(255, 255, 255, 0.7);
}
.figs-table.figs-table-totals .figs-table-row .figs-table-col.mono-nums span.pence {
  font-size: 13px;
  font-weight: 400;
}
.figs-table.figs-table-totals .figs-table-row.figs-table-no-decimal .figs-table-row .figs-table-col.figs-col-currency span:first-of-type {
  margin-left: 30px;
}
.figs-table.figs-table-totals .figs-table-row.figs-table-no-decimal .figs-table-row .figs-table-col.figs-col-currency span:first-of-type.val::before {
  left: -20px;
}
.figs-table.figs-table-totals .figs-table-row.figs-table-row-sum .figs-table-col {
  background: rgba(0, 0, 0, 0.2);
  margin-top: 12px;
  padding: 8px;
  color: white !important;
}
.figs-table.figs-table-totals .figs-table-row.figs-table-row-sum .figs-table-col span {
  color: white !important;
}
.figs-table.figs-table-totals .figs-table-row.figs-table-row-sum .figs-table-col:first-of-type {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.figs-table.figs-table-totals .figs-table-row.figs-table-row-sum .figs-table-col:last-of-type {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.figs-table.figs-table-totals .figs-table-row.figs-table-row-net .figs-table-col {
  margin-top: 12px;
}
.figs-table.figs-table-dark-tile {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 12px;
}

@container bodyContainer (max-width: 500px) {
  .figs-table {
    -moz-column-gap: 20px;
         column-gap: 20px;
  }
}
@container bodyContainer (max-width: 400px) {
  .figs-table.figs-table-3-col {
    -moz-column-gap: 12px;
         column-gap: 12px;
  }
  .figs-table.figs-table-3-col .figs-table-col .figs-col-desc {
    font-size: 11px !important;
  }
  .figs-table.figs-table-3-col .figs-table-col.figs-col-percent {
    font-size: 13px;
  }
  .figs-table.figs-table-3-col .figs-table-col.figs-col-currency {
    font-size: 20px;
  }
  .figs-table.figs-table-3-col .figs-table-col.figs-col-currency span.pence {
    font-size: 12px;
  }
}
@container bodyContainer (max-width: 380px) {
  .figs-table {
    font-size: 14px;
  }
  .figs-table .figs-table-row .figs-table-col:nth-of-type(2) {
    font-size: 24px;
  }
  .figs-table .figs-table-row .figs-table-col:nth-of-type(2) span.pence {
    font-size: 14px;
  }
  .figs-table .figs-table-row .figs-table-col.figs-col-percent {
    font-size: 14px;
  }
  .figs-table.figs-table-totals {
    width: calc(100% + 16px);
  }
  .figs-table.figs-table-totals .figs-table-row .figs-table-col {
    padding: 8px;
  }
  .figs-table.figs-table-3-col {
    font-size: 11px;
  }
  .figs-table.figs-table-3-col .figs-table-col.figs-col-currency {
    font-size: 20px;
  }
  .figs-table.figs-table-3-col .figs-table-col.figs-col-currency span.pence {
    font-size: 12px;
  }
}
@container bodyContainer (max-width: 360px) {
  .figs-table {
    font-size: 12px;
  }
  .figs-table.figs-table-3-col {
    font-size: 11px;
  }
  .figs-table.figs-table-3-col.figs-col-currency {
    font-size: 22px;
  }
  .figs-table.figs-table-3-col.figs-col-currency span.pence {
    font-size: 20px;
  }
}
:root {
  --val-increase: var(--green-500);
  --val-decrease: var(--red-500);
  --val-static: var(--violet-400);
  --chart-val-increase: #30d158;
  --chart-val-amber: #ff9f0a;
  --chart-val-decrease: #ff4f40;
  --ico-arrow-up-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='8 2 1 14 15 14 8 2' fill='%2322c55e'%3E%3C/polygon%3E%3C/svg%3E");
  --ico-arrow-up-14: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12 4 3 20 21 20 12 4' fill='%2322c55e'%3E%3C/polygon%3E%3C/svg%3E");
  --ico-arrow-down-16: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon points='8 14 15 2 1 2 8 14' fill='%23f43f5e'%3E%3C/polygon%3E%3C/svg%3E");
  --ico-arrow-down-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12 20 21 4 3 4 12 20' fill='%23f43f5e'%3E%3C/polygon%3E%3C/svg%3E");
  --current-colour: var(--blue-500);
}

.btn-ico:hover .simple-icon .outlined, .btn-ico:hover .simple-icon .filled {
  opacity: 1;
}

.simple-icon .bounds {
  fill: rgba(0, 0, 0, 0);
}
.simple-icon .outlined {
  opacity: 0.7;
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2px;
  transition: opacity 0.2s ease;
}
.simple-icon .outlined.outlined-dark {
  opacity: 0.5;
  stroke: black;
}
.simple-icon .filled {
  opacity: 0.7;
  fill: white;
  transition: opacity 0.2s ease;
}

.ico-16 {
  width: 16px;
  height: 16px;
}

.ico-24 {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.riveCanvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 40/25;
}
.riveCanvas.soft-sides {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, black 20%, black 80%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}

*, ::before, ::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

:root {
  --spinnerDiameter: 1em;
  --spinnerBorderWidth: 0.15em;
}

.label-spinner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  text-align: center;
}

/* Remove browser styles */
progress {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
}

progress::-moz-progress-bar {
  background: none;
}

progress::-webkit-progress-bar {
  display: none;
}

progress::-ms-fill {
  animation-name: none;
}

@media (-ms-high-contrast) {
  /* …but show native spinner in Windows High-Contrast Mode */
  progress::-ms-fill {
    animation-name: -ms-ring;
  }
}
.label-spinner {
  color: white; /* change this to whatever you like */
}

progress, .label-spinner::before {
  margin: 0 auto;
  width: var(--spinnerDiameter);
  height: var(--spinnerDiameter); /* Rely on font-size for spinner dimensions */
  font-size: 4em;
  border: var(--spinnerBorderWidth) solid;
  border-radius: 99em; /* set to a ludicrously large value instead of 100% to avoid becoming an oval if aspect ratio is off somehow */
}

/* Vertically align second ring with the first */
.label-spinner::before {
  margin-bottom: calc(-1 * var(--spinnerDiameter));
}

@supports ((-webkit-clip-path: polygon(0 0)) or (clip-path: polygon(0 0))) {
  /* Background light ring that doesn’t get clipped */
  .label-spinner::before {
    content: "";
    opacity: 0.25;
    display: none;
  }
  progress {
    animation: inchworm 5s linear infinite, spin 1.5s linear infinite;
  }
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
/* See the blog post for how I got these values: https://dev.to/tigt/that-dang-material-design-spinner-in-one-element-3b3n */
/* <generated-keyframes> */
@keyframes inchworm {
  4.167% {
    -webkit-clip-path: polygon(50% 150%, -50% 50%, -50% 50%, 50% -50%, 50% 50%);
            clip-path: polygon(50% 150%, -50% 50%, -50% 50%, 50% -50%, 50% 50%);
  }
  8.333% {
    -webkit-clip-path: polygon(-50% 50%, -50% 50%, -50% 50%, 50% -50%, 50% 50%);
            clip-path: polygon(-50% 50%, -50% 50%, -50% 50%, 50% -50%, 50% 50%);
  }
  12.5% {
    -webkit-clip-path: polygon(0% -50%, 0% -50%, 0% -50%, 50% -50%, 50% 50%);
            clip-path: polygon(0% -50%, 0% -50%, 0% -50%, 50% -50%, 50% 50%);
  }
  16.667% {
    -webkit-clip-path: polygon(50% -50%, 50% -50%, 50% -50%, 150% 50%, 50% 50%);
            clip-path: polygon(50% -50%, 50% -50%, 50% -50%, 150% 50%, 50% 50%);
  }
  20.833% {
    -webkit-clip-path: polygon(50% -50%, 50% -50%, 150% 50%, 50% 150%, 50% 50%);
            clip-path: polygon(50% -50%, 50% -50%, 150% 50%, 50% 150%, 50% 50%);
  }
  25% {
    -webkit-clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%, 50% 50%);
            clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%, 50% 50%);
  }
  29.167% {
    -webkit-clip-path: polygon(150% 50%, 150% 50%, 50% 150%, -50% 50%, 50% 50%);
            clip-path: polygon(150% 50%, 150% 50%, 50% 150%, -50% 50%, 50% 50%);
  }
  33.333% {
    -webkit-clip-path: polygon(50% 150%, 50% 150%, 50% 150%, -50% 50%, 50% 50%);
            clip-path: polygon(50% 150%, 50% 150%, 50% 150%, -50% 50%, 50% 50%);
  }
  37.5% {
    -webkit-clip-path: polygon(-50% 100%, -50% 100%, -50% 100%, -50% 50%, 50% 50%);
            clip-path: polygon(-50% 100%, -50% 100%, -50% 100%, -50% 50%, 50% 50%);
  }
  41.667% {
    -webkit-clip-path: polygon(-50% 50%, -50% 50%, -50% 50%, 50% -50%, 50% 50%);
            clip-path: polygon(-50% 50%, -50% 50%, -50% 50%, 50% -50%, 50% 50%);
  }
  45.833% {
    -webkit-clip-path: polygon(-50% 50%, -50% 50%, 50% -50%, 150% 50%, 50% 50%);
            clip-path: polygon(-50% 50%, -50% 50%, 50% -50%, 150% 50%, 50% 50%);
  }
  50% {
    -webkit-clip-path: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%, 50% 50%);
            clip-path: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%, 50% 50%);
  }
  54.167% {
    -webkit-clip-path: polygon(50% -50%, 150% 50%, 150% 50%, 50% 150%, 50% 50%);
            clip-path: polygon(50% -50%, 150% 50%, 150% 50%, 50% 150%, 50% 50%);
  }
  58.333% {
    -webkit-clip-path: polygon(150% 50%, 150% 50%, 150% 50%, 50% 150%, 50% 50%);
            clip-path: polygon(150% 50%, 150% 50%, 150% 50%, 50% 150%, 50% 50%);
  }
  62.5% {
    -webkit-clip-path: polygon(100% 150%, 100% 150%, 100% 150%, 50% 150%, 50% 50%);
            clip-path: polygon(100% 150%, 100% 150%, 100% 150%, 50% 150%, 50% 50%);
  }
  66.667% {
    -webkit-clip-path: polygon(50% 150%, 50% 150%, 50% 150%, -50% 50%, 50% 50%);
            clip-path: polygon(50% 150%, 50% 150%, 50% 150%, -50% 50%, 50% 50%);
  }
  70.833% {
    -webkit-clip-path: polygon(50% 150%, 50% 150%, -50% 50%, 50% -50%, 50% 50%);
            clip-path: polygon(50% 150%, 50% 150%, -50% 50%, 50% -50%, 50% 50%);
  }
  75% {
    -webkit-clip-path: polygon(50% 150%, -50% 50%, 50% -50%, 150% 50%, 50% 50%);
            clip-path: polygon(50% 150%, -50% 50%, 50% -50%, 150% 50%, 50% 50%);
  }
  79.167% {
    -webkit-clip-path: polygon(-50% 50%, -50% 50%, 50% -50%, 150% 50%, 50% 50%);
            clip-path: polygon(-50% 50%, -50% 50%, 50% -50%, 150% 50%, 50% 50%);
  }
  83.333% {
    -webkit-clip-path: polygon(50% -50%, 50% -50%, 50% -50%, 150% 50%, 50% 50%);
            clip-path: polygon(50% -50%, 50% -50%, 50% -50%, 150% 50%, 50% 50%);
  }
  87.5% {
    -webkit-clip-path: polygon(150% 0%, 150% 0%, 150% 0%, 150% 50%, 50% 50%);
            clip-path: polygon(150% 0%, 150% 0%, 150% 0%, 150% 50%, 50% 50%);
  }
  91.667% {
    -webkit-clip-path: polygon(150% 50%, 150% 50%, 150% 50%, 50% 150%, 50% 50%);
            clip-path: polygon(150% 50%, 150% 50%, 150% 50%, 50% 150%, 50% 50%);
  }
  95.833% {
    -webkit-clip-path: polygon(150% 50%, 150% 50%, 50% 150%, -50% 50%, 50% 50%);
            clip-path: polygon(150% 50%, 150% 50%, 50% 150%, -50% 50%, 50% 50%);
  }
  0%, 100% {
    -webkit-clip-path: polygon(150% 50%, 50% 150%, -50% 50%, 50% -50%, 50% 50%);
            clip-path: polygon(150% 50%, 50% 150%, -50% 50%, 50% -50%, 50% 50%);
  }
}
/* </generated-keyframes> */
.area-content {
  position: relative;
  width: 100%;
}

.spinner-and-scrim {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

.area-content-dimmable {
  opacity: 1;
  transition: opacity 0.2s ease;
}
.area-content-dimmable.dimmed {
  pointer-events: none;
  opacity: 0.2;
  cursor: not-allowed;
}

.not-shown {
  opacity: 0;
  pointer-events: none;
}

.pages.not-shown {
  top: 100%;
}

.entrance-elm {
  transition: opacity calc(var(--elm-entrance-duration) * 0.8) ease calc(var(--elm-entrance-duration) * 0.2), transform var(--elm-entrance-duration) var(--ease-out-quart);
}
.entrance-elm.hidden-first {
  opacity: 0;
  transform: translateY(-150px);
}
.entrance-elm:not(.hidden-first) {
  opacity: 1;
  transform: translateY(0);
}
.entrance-elm .entrance-elm-children {
  --child-delay: var(--elm-entrance-child-gap);
}
.entrance-elm .entrance-elm-children > * {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity calc(var(--elm-entrance-duration) * var(--elm-entrance-child-duration-ratio) * 0.8) ease calc(var(--elm-entrance-duration) * var(--elm-entrance-child-duration-ratio) * 0.2), transform calc(var(--elm-entrance-duration) * var(--elm-entrance-child-duration-ratio)) var(--ease-out-quart);
}
.entrance-elm :not(.entrance-elm-children) > * {
  opacity: 1;
  transform: translateY(0);
}

.navMain.hidden-first {
  transform: translateY(120px);
}

#introTag {
  opacity: 0;
  transform: translate(0, 0);
  transition: opacity 0.2s ease 0.15s, transform 0.35s var(--ease-in-quad);
}
#introTag.shown {
  opacity: 1;
  transform: translate(0, -60px);
  transition: opacity 0.2s ease 0s, transform 0.35s var(--ease-out-cubic);
}

body.iPhone.showDeviceFrame #introTag.shown {
  transform: translate(0, -90px);
}

.swipeBG {
  transform: translateX(-30%);
  transition: transform 0.5s var(--ease-out-quart);
}
.swipeBG.not-shown {
  transform: translateX(50%);
}

.scrim {
  position: absolute;
  left: -10px;
  top: -10px;
  width: 5px;
  height: 5px;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color var(--modal-appear-disappear-duration) ease, left 0s ease var(--modal-appear-disappear-duration), top 0s ease var(--modal-appear-disappear-duration), width 0s ease var(--modal-appear-disappear-duration), height 0s ease var(--modal-appear-disappear-duration);
}
.scrim.shown {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  transition: background-color var(--modal-appear-disappear-duration) ease, left 0s ease 0s, top 0s ease 0s, width 0s ease 0s, height 0s ease 0s;
}

.modal-holder {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  padding-top: var(--os-status-bar-height);
  justify-content: center;
  align-items: center;
  z-index: 11;
  transform: translate(0, calc(-100 * var(--bh)));
  transition: transform var(--modal-appear-disappear-duration) var(--ease-in-out-quint);
}
.modal-holder.modal-full {
  align-items: flex-end;
}
.modal-holder.modal-bottom {
  transform: translate(0, calc(100 * var(--bh)));
}
.modal-holder.modal-left {
  transform: translate(calc(-100 * var(--bw)), 0);
}
.modal-holder.modal-right {
  transform: translate(calc(100 * var(--bw)), 0);
}
.modal-holder.shown {
  transform: translate(0, 0);
}
.modal-holder h2 {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.modal {
  display: flex;
  flex-direction: column;
  position: absolute;
  border-radius: 10px;
  width: calc(75 * var(--bw));
  max-width: calc(100 * var(--bw) - 2 * var(--body-padding));
  background: var(--modal-bg);
  border-radius: 8px;
  /* Height Rules */
  min-height: min(500px, 50 * var(--bh));
  max-height: calc(100 * var(--bh) - (2 * var(--body-padding) + var(--os-status-bar-height)));
  height: auto;
}
.modal.modal-full {
  width: calc(100 * var(--bw) - 2 * var(--body-padding));
  max-width: 800px;
  height: calc(100 * var(--bh) - (2 * var(--body-padding) + var(--os-status-bar-height)));
  margin-bottom: var(--body-padding);
}
.modal .header {
  width: 100%;
  padding: 16px;
  padding-left: 66px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0; /* Ensures header height doesn't shrink */
}
.modal .header .img-50 {
  position: relative;
  margin-top: -5px;
  margin-right: -8px;
}
.modal .header .btn-close {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
}
.modal .modal-content {
  position: relative;
}
.modal .modal-content-inner {
  overflow: hidden;
  padding: 16px;
  flex-grow: 1; /* Allows content to expand */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal .modal-content-inner .tile-body {
  background-color: rgba(0, 0, 0, 0.3);
}
.modal .modal-content-inner.mdl-consolidating {
  max-width: 600px;
  justify-self: center;
}
.modal.close-right .header {
  padding-left: 16px;
  padding-right: 66px;
}
.modal.close-right .btn-close {
  left: auto;
  right: 12px;
}
.modal .content-specific {
  display: none;
}
.modal.profile .content-specific.mdl-profile {
  display: flex;
}
.modal.alerts .content-specific.mdl-alerts {
  display: flex;
}
.modal.consolidating .content-specific.mdl-consolidating {
  display: flex;
}
.modal .tile-alert .btn-close {
  display: none;
}
.modal .alert-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.modal .alert-group h2.hdg-alert-date {
  font-size: 20px;
  margin-bottom: 0;
}

body.showDeviceOS .modal-holder.modal-full {
  padding-top: var(--os-status-bar-height);
}
body.showDeviceOS modal.modal-full {
  height: calc(100 * var(--bh) - (2 * var(--body-padding) + var(--os-status-bar-height)));
}

@container bodyContainer ((max-width: 950px) and (aspect-ratio > 2 / 1)) or (max-width: 620px) {
  .modal {
    width: calc(95 * var(--bw));
  }
  .modal.modal-full {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    height: calc(100 * var(--bh) - (25px + var(--os-status-bar-height)));
    max-height: calc(100 * var(--bh) - (25px + var(--os-status-bar-height)));
    width: calc(100 * var(--bw));
    max-width: calc(100 * var(--bw));
    margin-bottom: 0;
  }
  body.showDeviceOS .modal.modal-full {
    height: calc(100 * var(--bh) - (5px + var(--os-status-bar-height)));
    max-height: calc(100 * var(--bh) - (5px + var(--os-status-bar-height)));
  }
}
.div-chart {
  width: 100%;
  height: 420px;
  margin: 24px 0;
}

@container bodyContainer (max-width: 860px) {
  .div-chart.div-chart-home {
    height: 320px;
  }
}
@container bodyContainer (max-width: 740px) {
  .div-chart.div-chart-home {
    height: 220px;
  }
}
@container bodyContainer (max-width: 650px) {
  .div-chart {
    height: 360px;
  }
}
@container bodyContainer ((max-width: 950px) and  (aspect-ratio > 2 / 1)) or (max-width: 620px) {
  .div-chart {
    height: 280px;
  }
  .div-chart.div-chart-forecast {
    height: 300px;
  }
}
.thmGlass .thmEmboss {
  fill: rgba(255, 255, 255, 0.02);
}
.thmGlass .glass-fill {
  fill: rgba(0, 0, 0, 0.2);
}
.thmGlass .glass-stroke {
  fill: none;
  stroke: #0a0d13;
}

.thmTarget {
  fill: rgba(255, 255, 255, 0.15);
}

.thmMercury {
  fill: url("#thmLinGradMercury");
}

.thmMercuryClipFill, .thmTarget {
  transform-box: fill-box;
  transform-origin: center 0;
  transform: rotate(180deg);
}

.thmScale line {
  fill: none;
  stroke: black;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1px;
}
.thmScale .thmTicks {
  opacity: 0.5;
}
.thmScale .thmSubTicks {
  opacity: 0.4;
}

.thmRefRight {
  fill: url("#thmLinGradRefRight");
}

.thmRefLeft {
  fill: rgba(255, 255, 255, 0.1);
}

.thermo-holder {
  padding-top: 16px;
  margin-bottom: 16px;
  position: relative;
}
.thermo-holder stop {
  transition: 1s;
}
.thermo-holder svg {
  width: 40px;
}
.thermo-holder .thm-fill-top {
  stop-color: var(--violet-300);
}
.thermo-holder .thm-fill-mid {
  stop-color: var(--violet-500);
}
.thermo-holder .thm-fill-bottom {
  stop-color: var(--violet-600);
}
.thermo-holder.success .thm-fill-top {
  stop-color: var(--green-500);
}
.thermo-holder.success .thm-fill-mid {
  stop-color: var(--teal-700);
}
.thermo-holder.success .thm-fill-bottom {
  stop-color: var(--violet-600);
}
.thermo-holder.short .thm-fill-top {
  stop-color: var(--red-600);
}
.thermo-holder.short .thm-fill-mid {
  stop-color: var(--red-700);
}
.thermo-holder.short .thm-fill-bottom {
  stop-color: var(--red-900);
}

.scrim-popovers {
  --showHideDuration: 0.3s;
  --feather: 50px;
  --hole-left: 50px;
  --hole-top: 80px;
  --hole-width: 200px;
  --hole-height: 120px;
  --hole-rad: calc(max(var(--hole-width), var(--hole-height)) / 2);
  --hole-rad-x: calc(var(--hole-width) / 2);
  --hole-rad-y: calc(var(--hole-height) / 2);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(0px);
          backdrop-filter: blur(0px);
  opacity: 0;
  transition: opacity var(--showHideDuration) ease, filter var(--showHideDuration) ease;
  z-index: 149;
}
.scrim-popovers.shown {
  -webkit-backdrop-filter: blur(15px);
          backdrop-filter: blur(15px);
  opacity: 1;
}
.scrim-popovers.hole-rect {
  -webkit-mask-image: linear-gradient(to bottom, black calc(var(--hole-top) - var(--feather)), transparent var(--hole-top), transparent calc(var(--hole-top) + var(--hole-height)), black calc(var(--hole-top) + var(--hole-height) + var(--feather))), linear-gradient(to right, black calc(var(--hole-left) - var(--feather)), transparent var(--hole-left), transparent calc(var(--hole-left) + var(--hole-width)), black calc(var(--hole-left) + var(--hole-width) + var(--feather)));
          mask-image: linear-gradient(to bottom, black calc(var(--hole-top) - var(--feather)), transparent var(--hole-top), transparent calc(var(--hole-top) + var(--hole-height)), black calc(var(--hole-top) + var(--hole-height) + var(--feather))), linear-gradient(to right, black calc(var(--hole-left) - var(--feather)), transparent var(--hole-left), transparent calc(var(--hole-left) + var(--hole-width)), black calc(var(--hole-left) + var(--hole-width) + var(--feather)));
}
.scrim-popovers.hole-rect0::after {
  content: "";
  background: rgba(255, 0, 0, 0.1);
  display: block;
  position: absolute;
  left: var(--hole-left);
  top: var(--hole-top);
  height: var(--hole-height);
  width: var(--hole-width);
}
.scrim-popovers.hole-circle {
  -webkit-mask-image: radial-gradient(circle var(--hole-rad) at calc(var(--hole-left) + var(--hole-width) / 2) calc(var(--hole-top) + var(--hole-height) / 2), transparent var(--hole-rad), black calc(var(--hole-rad) + var(--feather)));
          mask-image: radial-gradient(circle var(--hole-rad) at calc(var(--hole-left) + var(--hole-width) / 2) calc(var(--hole-top) + var(--hole-height) / 2), transparent var(--hole-rad), black calc(var(--hole-rad) + var(--feather)));
}
.scrim-popovers.hole-ellipse {
  -webkit-mask-image: radial-gradient(var(--hole-rad-x) var(--hole-rad-y) at calc(var(--hole-left) + var(--hole-rad-x)) calc(var(--hole-top) + var(--hole-rad-y)), transparent var(--hole-rad-x), black calc(var(--hole-rad-x) + var(--feather)));
          mask-image: radial-gradient(var(--hole-rad-x) var(--hole-rad-y) at calc(var(--hole-left) + var(--hole-rad-x)) calc(var(--hole-top) + var(--hole-rad-y)), transparent var(--hole-rad-x), black calc(var(--hole-rad-x) + var(--feather)));
}

.popovers {
  position: absolute;
  z-index: 150;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.popover {
  --start-scale: 0.8;
  --arrow-side: 15px;
  --arrow-diagonal: calc(var(--arrow-side) * 1.414214);
  --arrow-centre-to-tip: calc(var(--arrow-diagonal) / 2);
  --arrow-offset: calc(-1 * (var(--arrow-centre-to-tip)));
  --border-width: 1px;
  --border-colour: rgba(255, 255, 255, 0.25);
  --popover-height: 100px;
  --popover-bg: linear-gradient(to bottom, var(--slate-700), var(--slate-800));
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-family: "Reddit Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  padding: 24px;
  background: var(--popover-bg);
  position: absolute;
  width: 500px;
  max-width: calc(100 * var(--bw) - 2 * var(--body-padding));
  border-radius: 8px;
  border: var(--border-width) solid var(--border-colour);
  transform: scale(var(--start-scale));
  opacity: 0;
  filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.75));
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.popover p {
  color: rgba(255, 255, 255, 0.75);
  text-wrap: pretty;
  text-align: center;
  margin: 0;
  font-weight: 300;
}
.popover p:not(:last-of-type) {
  margin-bottom: 16px;
}
.popover strong {
  font-weight: 600;
  color: white;
}
.popover .btn-close {
  position: relative;
  top: 0;
  right: 0;
  width: 42px;
  height: 42px;
  background-color: transparent;
  float: right;
  shape-outside: inset(0 0 0 0);
  margin: 0;
  margin-top: -24px;
  margin-right: -24px;
}
.popover .btn-link {
  color: var(--blue-400);
}
.popover .btn-link .simple-icon .outlined {
  stroke: var(--blue-400);
}
.popover .btn-link:hover {
  color: var(--blue-300) !important;
}
.popover .btn-link:hover .simple-icon .outlined {
  stroke: var(--blue-300) !important;
}
.popover.shown {
  opacity: 1;
  transform: scale(1); /* End state */
  pointer-events: all;
}
.popover.float-centred {
  position: relative;
  transform-origin: 50% 50%;
}
.popover table {
  color: rgba(255, 255, 255, 0.75);
  width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
  position: relative;
  table-layout: fixed;
}
.popover table td {
  padding-top: 6px;
  padding-bottom: 6px;
}
.popover table .b-border {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.popover table thead {
  color: white;
}
.popover table tbody td.fixed-col {
  color: white;
}
.popover.popover-plain {
  --popover-bg: var(--bg-lighter);
  --border-colour: var(--slate-700);
  border-radius: 2px;
  border: none;
  border-top: var(--border-width) solid var(--border-colour);
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.65)) drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.5));
}
.popover.popover-plain .popover-arrow {
  background: var(--popover-bg);
}
.popover.popover-plain.popover[data-placement^=left] .popover-arrow, .popover.popover-plain.popover[data-placement^=right] .popover-arrow, .popover.popover-plain.popover[data-placement^=top] .popover-arrow {
  border: none;
}
.popover.popover-plain.popover[data-placement^=bottom] .popover-arrow {
  border-top: var(--border-width) solid var(--border-colour);
  border-left: var(--border-width) solid var(--border-colour);
}
.popover.popover-primary {
  --popover-bg: var(--blue-700);
  --border-colour: var(--blue-500);
  border-radius: 2px;
  border: none;
  border-top: var(--border-width) solid var(--border-colour);
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.65)) drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.5));
}
.popover.popover-primary .popover-arrow {
  background: var(--popover-bg) !important;
}
.popover.popover-primary.popover[data-placement^=left] .popover-arrow, .popover.popover-primary.popover[data-placement^=right] .popover-arrow, .popover.popover-primary.popover[data-placement^=top] .popover-arrow {
  border: none;
}
.popover.popover-primary.popover[data-placement^=bottom] .popover-arrow {
  border-top: var(--border-width) solid var(--border-colour);
  border-left: var(--border-width) solid var(--border-colour);
}
.popover.popover-primary button:not(.btn-close), .popover.popover-primary a {
  border: 1px solid white;
}
.popover.popover-primary .btn-link {
  padding: 10px 16px;
  color: white;
}
.popover.popover-primary .btn-link .simple-icon .outlined {
  stroke: white;
}
.popover.popover-primary .btn-link:hover {
  color: white !important;
}
.popover.popover-primary .btn-link:hover .simple-icon .outlined {
  stroke: white !important;
}

.popover-arrow {
  position: absolute;
  width: var(--arrow-side);
  height: var(--arrow-side);
  transform-origin: top left;
  transform: rotate(45deg);
  background: var(--slate-700);
  z-index: -1;
}
.popover-arrow::before {
  display: none;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
  transform-origin: left top;
  background: var(--popover-bg);
  background-size: 100% var(--popover-height);
  background-position: 0 calc((var(--popover-height) - var(--arrow-diagonal)) / -2);
}

/* Adjust arrow positioning based on placement */
.popover[data-placement^=top] .popover-arrow {
  border-bottom: var(--border-width) solid var(--border-colour);
  border-right: var(--border-width) solid var(--border-colour);
  bottom: 0;
  left: calc(50% - var(--arrow-centre-to-tip));
  background: var(--slate-800);
  transform-origin: left bottom;
}

.popover[data-placement^=bottom] .popover-arrow {
  top: var(--arrow-offset);
  left: 50%;
  border-top: var(--border-width) solid var(--border-colour);
  border-left: var(--border-width) solid var(--border-colour);
}

.popover[data-placement^=left] .popover-arrow {
  border-top: var(--border-width) solid var(--border-colour);
  border-right: var(--border-width) solid var(--border-colour);
  right: var(--arrow-offset);
  top: 50%;
  transform-origin: top right;
  background: none;
  overflow: hidden;
}
.popover[data-placement^=left] .popover-arrow::before {
  display: block;
  height: var(--arrow-diagonal);
}

.popover[data-placement^=right] .popover-arrow {
  border-bottom: var(--border-width) solid var(--border-colour);
  border-left: var(--border-width) solid var(--border-colour);
  left: 0;
  top: calc(50% - var(--arrow-centre-to-tip));
  transform-origin: top left;
  background: none;
  overflow: hidden;
}
.popover[data-placement^=right] .popover-arrow::before {
  display: block;
  width: var(--arrow-centre-to-tip);
  height: var(--arrow-diagonal);
  left: calc(-1 * var(--arrow-centre-to-tip));
  transform-origin: top right;
}

@container bodyContainer ((max-width: 950px) and  (aspect-ratio > 2 / 1)) or (max-width: 620px) {
  .popover {
    padding-left: 16px;
    padding-right: 16px;
  }
  .popover .btn-close {
    margin-right: -16px;
  }
}
:root {
  --slider-thumb-size: 20px;
  --slider-grab-size: 42px;
}

.input-and-slider {
  width: 100%;
  max-width: 460px;
}
.input-and-slider.format-currency .input-holder::before {
  content: "£";
  position: absolute;
  font-size: 24px;
  opacity: 0.4;
  left: 8px;
}
.input-and-slider.format-currency .input-holder input {
  padding: 0 24px;
}

.slider {
  width: calc(100% - var(--slider-grab-size));
  height: var(--slider-thumb-size);
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  outline: none;
  position: relative;
  margin-top: 22px;
}
.slider .slider-track {
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.25);
  outline: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
  box-shadow: inset 0 0 3px 2px rgba(0, 0, 0, 0.35);
  z-index: 0;
}
.slider .slider-track .slider-fill {
  height: 100%;
  background: var(--blue-800);
  position: absolute;
  top: 0;
  left: 0;
  outline: 1px solid rgba(0, 0, 0, 0.25);
  transition: width 0.3s ease;
}
.slider .slider-track .slider-thumb {
  width: var(--slider-thumb-size);
  height: var(--slider-thumb-size);
  background: var(--blue-inter-on-dark);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  margin-top: calc(-1 * var(--slider-thumb-size) / 2);
  margin-left: calc(-1 * var(--slider-thumb-size) / 2);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  transition: left 0.3s ease;
}
.slider .slider-track .slider-thumb::before {
  content: "";
  position: absolute;
  width: var(--slider-grab-size);
  height: var(--slider-grab-size);
  background-color: var(--blue-inter-on-dark);
  opacity: 0;
  border-radius: 50%;
  left: calc(50% - 21px);
  top: calc(50% - 21px);
  z-index: -1;
}
.slider .slider-track .slider-thumb::after {
  content: "";
  position: absolute;
  width: var(--slider-grab-size);
  height: var(--slider-grab-size);
  background-color: var(--blue-inter-on-dark);
  opacity: 0;
  border-radius: 50%;
  left: calc(50% - var(--slider-grab-size) / 2);
  top: calc(50% - var(--slider-grab-size) / 2);
  z-index: -1;
  transform: scale(0.5);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.slider:hover .slider-thumb::after {
  opacity: 0.1;
  transform: scale(0.8);
}
.slider:focus .slider-thumb::after, .slider:active .slider-thumb::after {
  opacity: 0.2;
  transform: scale(1);
}
.slider[data-min-label]::before {
  content: attr(data-min-label);
  position: absolute;
  top: -40px;
  left: calc(-1 * var(--slider-grab-size) / 2);
  font-size: 16px;
  color: var(--blue-500);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.slider[data-max-label]::after {
  content: attr(data-max-label);
  position: absolute;
  top: -40px;
  right: calc(-1 * var(--slider-grab-size) / 2);
  font-size: 16px;
  color: var(--blue-500);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
.slider.dragging .slider-track .slider-fill {
  transition: none; /* Disable transition during drag */
}
.slider.dragging .slider-thumb {
  transition: none; /* Disable transition during drag */
}

.input-holder {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(100% - var(--slider-grab-size));
  max-width: 200px;
  padding: 0;
  height: 44px;
  color: white;
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  background-color: rgba(0, 0, 0, 0.25);
  outline: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 3px 2px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
}
.input-holder input {
  width: 100%;
  padding: 0 8px;
  background: none;
  font-size: 30px;
  color: white;
  border: none;
  font-family: "Figtree", sans-serif;
  font-weight: 700;
}
.input-holder input:focus-visible {
  border: 1px solid rgba(59, 130, 246, 0.5);
  outline: none;
}
.input-holder.text-centred {
  justify-content: center;
}
.input-holder.text-centred input {
  text-align: center;
}

.slider-input {
  height: 100%;
  width: 100%;
  -webkit-appearance: none; /* Remove default WebKit styling */
  -moz-appearance: textfield; /* Remove spinners in Firefox */
  appearance: none; /* Standard property for future-proofing */
}
.slider-input::-webkit-inner-spin-button, .slider-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.slider-sub-col h3 {
  text-align: center;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

@container bodyContainer (max-width: 420px) {
  .input-holder:has(+ .slider[data-min-label]), .input-holder:has(+ .slider[data-max-label]) {
    max-width: calc(100% - 124px);
  }
  .slider[data-min-label]::before {
    font-size: 14px;
  }
  .slider[data-max-label]::after {
    font-size: 14px;
  }
}
@container bodyContainer (max-width: 360px) {
  .input-and-slider.format-currency .input-holder:has(+ .slider[data-min-label])::before, .input-and-slider.format-currency .input-holder:has(+ .slider[data-max-label])::before {
    position: absolute;
    font-size: 16px;
    left: 6px;
  }
  .input-and-slider.format-currency .input-holder:has(+ .slider[data-min-label]) input, .input-and-slider.format-currency .input-holder:has(+ .slider[data-max-label]) input {
    font-size: 24px;
    padding: 0;
    padding-left: 22px;
  }
}
.roll-selector {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overflow: visible;
}
.roll-selector .roll-selector-main {
  --faceWidth: 100px;
  --radius: 250px;
  width: 100%;
  position: absolute;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 500px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
.roll-selector .face {
  position: absolute;
  display: flex;
  width: var(--faceWidth, 100px);
  min-width: 82px;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  font-family: "Reddit Sans", sans-serif;
  font-weight: bold;
  color: white;
  transform-origin: 50% 50% var(--radius);
}
.roll-selector .boxRect {
  pointer-events: none;
  width: var(--faceWidth, 100px);
  height: 100%;
  display: block;
  position: absolute;
}
.roll-selector .boxRect::before, .roll-selector .boxRect::after {
  content: "";
  position: absolute;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%);
  width: 1px;
  height: 100%;
  left: 0;
}
.roll-selector .boxRect::after {
  left: auto;
  right: 0;
}
.roll-selector .roll-selector-measure-test {
  height: 40px;
  background: rgba(255, 0, 0, 0.25);
  width: 100%;
  position: absolute;
  top: 0;
}
.roll-selector .roll-selector-inner-test {
  height: 50px;
  width: 100%;
  background: rgba(255, 255, 0, 0.25);
}

@keyframes da-chk-reveal-after-load {
  to {
    visibility: visible;
  }
}
@keyframes da-chk-draw-tick {
  0% {
    -webkit-clip-path: path("M4.373,8.493c.412-.798-.55-1.587-1.023-2.059-.829-1.196-2.35-3.433-2.35-3.433l-4,2,5.801,4.176c.618.43,1.269-.099,1.571-.684ZM7.233,13.84c-.317-.339-1.121-.813-1.66-.431-.54.382-12.572,5.414-12.572,5.414L-.327,24.118s7.393-8.199,7.708-8.525c.446-.463.2-1.379-.148-1.753Z");
            clip-path: path("M4.373,8.493c.412-.798-.55-1.587-1.023-2.059-.829-1.196-2.35-3.433-2.35-3.433l-4,2,5.801,4.176c.618.43,1.269-.099,1.571-.684ZM7.233,13.84c-.317-.339-1.121-.813-1.66-.431-.54.382-12.572,5.414-12.572,5.414L-.327,24.118s7.393-8.199,7.708-8.525c.446-.463.2-1.379-.148-1.753Z");
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-clip-path: path("M9.373,13.493c.412-.798-.55-1.587-1.023-2.059-.829-1.196-2.35-3.433-2.35-3.433l-4,2,5.801,4.176c.618.43,1.269-.099,1.571-.684ZM7.233,13.84c-.317-.339-1.121-.813-1.66-.431-.54.382-12.572,5.414-12.572,5.414L-.327,24.118s7.393-8.199,7.708-8.525c.446-.463.2-1.379-.148-1.753Z");
            clip-path: path("M9.373,13.493c.412-.798-.55-1.587-1.023-2.059-.829-1.196-2.35-3.433-2.35-3.433l-4,2,5.801,4.176c.618.43,1.269-.099,1.571-.684ZM7.233,13.84c-.317-.339-1.121-.813-1.66-.431-.54.382-12.572,5.414-12.572,5.414L-.327,24.118s7.393-8.199,7.708-8.525c.446-.463.2-1.379-.148-1.753Z");
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-clip-path: path("M9.373,13.493c.412-.798-.55-1.587-1.023-2.059-.829-1.196-2.35-3.433-2.35-3.433l-4,2,5.801,4.176c.618.43,1.269-.099,1.571-.684ZM16.233,4.84c-.317-.339-1.121-.813-1.66-.431-.54.382-12.572,5.414-12.572,5.414l6.673,5.295s7.393-8.199,7.708-8.525c.446-.463.2-1.379-.148-1.753Z");
            clip-path: path("M9.373,13.493c.412-.798-.55-1.587-1.023-2.059-.829-1.196-2.35-3.433-2.35-3.433l-4,2,5.801,4.176c.618.43,1.269-.099,1.571-.684ZM16.233,4.84c-.317-.339-1.121-.813-1.66-.431-.54.382-12.572,5.414-12.572,5.414l6.673,5.295s7.393-8.199,7.708-8.525c.446-.463.2-1.379-.148-1.753Z");
  }
}
@keyframes da-chk-erase-tick {
  0% {
    -webkit-clip-path: path("M8.006,9.561l-1.388,3.351-3.234-1.339,1.388-3.351,3.234,1.339ZM12.916,6.619l-3.365,8.124-3.234-1.339,3.365-8.123,3.234,1.339ZM14.356,12.104l-3.234-1.339,2.764-6.673,3.234,1.339-2.764,6.673Z");
            clip-path: path("M8.006,9.561l-1.388,3.351-3.234-1.339,1.388-3.351,3.234,1.339ZM12.916,6.619l-3.365,8.124-3.234-1.339,3.365-8.123,3.234,1.339ZM14.356,12.104l-3.234-1.339,2.764-6.673,3.234,1.339-2.764,6.673Z");
    animation-timing-function: ease-in;
  }
  33% {
    -webkit-clip-path: path("M8.006,9.561l-1.388,3.351-3.234-1.339,1.388-3.351,3.234,1.339ZM12.916,6.619l-3.365,8.124-3.234-1.339,3.365-8.123,3.234,1.339ZM11.628,18.69l-3.234-1.339,2.764-6.673,3.234,1.339-2.764,6.673Z");
            clip-path: path("M8.006,9.561l-1.388,3.351-3.234-1.339,1.388-3.351,3.234,1.339ZM12.916,6.619l-3.365,8.124-3.234-1.339,3.365-8.123,3.234,1.339ZM11.628,18.69l-3.234-1.339,2.764-6.673,3.234,1.339-2.764,6.673Z");
    animation-timing-function: linear;
  }
  66% {
    -webkit-clip-path: path("M8.006,9.561l-1.388,3.351-3.234-1.339,1.388-3.351,3.234,1.339ZM16.401-1.796l-3.365,8.124-3.234-1.339,3.365-8.123,3.234,1.339ZM11.628,18.69l-3.234-1.339,2.764-6.673,3.234,1.339-2.764,6.673Z");
            clip-path: path("M8.006,9.561l-1.388,3.351-3.234-1.339,1.388-3.351,3.234,1.339ZM16.401-1.796l-3.365,8.124-3.234-1.339,3.365-8.123,3.234,1.339ZM11.628,18.69l-3.234-1.339,2.764-6.673,3.234,1.339-2.764,6.673Z");
    animation-timing-function: linear;
  }
  100% {
    -webkit-clip-path: path("M6.667,12.795l-1.388,3.351-3.234-1.339,1.388-3.351,3.234,1.339ZM16.401-1.796l-3.365,8.124-3.234-1.339,3.365-8.123,3.234,1.339ZM11.628,18.69l-3.234-1.339,2.764-6.673,3.234,1.339-2.764,6.673Z");
            clip-path: path("M6.667,12.795l-1.388,3.351-3.234-1.339,1.388-3.351,3.234,1.339ZM16.401-1.796l-3.365,8.124-3.234-1.339,3.365-8.123,3.234,1.339ZM11.628,18.69l-3.234-1.339,2.764-6.673,3.234,1.339-2.764,6.673Z");
    animation-timing-function: ease-out;
  }
}
.da-checkbox-group {
  --tapSize: 42px;
  --boxSize: 20px;
  --lblGap: 1px;
  --borderWidth: 2px;
  --drawDuration: 0.25s;
  --eraseDuration: 0.4s;
  position: relative;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  color: var(--blue-inter-on-dark);
  width: -moz-fit-content;
  width: fit-content;
}
.da-checkbox-group > * {
  cursor: pointer;
}
.da-checkbox-group:hover .da-check-square::before {
  opacity: 0.04;
  transform: scale(1);
}
.da-checkbox-group:hover .da-check-square::after {
  border-color: var(--blue-inter-on-dark-hover);
}
.da-checkbox-group:hover .da-check-square svg .da-chk-tick {
  fill: var(--blue-inter-on-dark-hover);
}
.da-checkbox-group:hover label {
  color: var(--blue-inter-on-dark-hover);
}
.da-checkbox-group .da-checkbox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  /* Show animation when checked */
  /* Erase animation when unchecked */
  /* Focus state for accessibility */
}
.da-checkbox-group .da-checkbox:active + .da-check-square::before {
  opacity: 0.16;
  transform: scale(1);
}
.da-checkbox-group .da-checkbox:checked + .da-check-square svg g {
  animation: da-chk-draw-tick var(--drawDuration) forwards;
}
.da-checkbox-group .da-checkbox:not(:checked) + .da-check-square svg g {
  animation: da-chk-erase-tick var(--eraseDuration) forwards;
}
.da-checkbox-group .da-checkbox:focus + .da-check-square::before {
  opacity: 0.12;
  transform: scale(1);
}
.da-checkbox-group .da-check-square {
  pointer-events: none;
  display: inline-block;
  position: absolute;
  box-sizing: border-box;
  width: var(--boxSize);
  height: var(--boxSize);
  border-radius: var(--borderWidth);
  background: rgba(0, 0, 0, 0.25);
  background: rgb(16, 22, 32);
  box-shadow: inset 0 0 3px 2px rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s;
}
.da-checkbox-group .da-check-square::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: var(--borderWidth);
  border: var(--borderWidth) solid var(--blue-inter-on-dark);
  transition: border-color 0.2s ease;
}
.da-checkbox-group .da-check-square::before {
  content: "";
  position: absolute;
  left: calc((var(--boxSize) - var(--tapSize)) / 2);
  top: calc((var(--boxSize) - var(--tapSize)) / 2);
  display: block;
  width: var(--tapSize);
  height: var(--tapSize);
  background: var(--blue-inter-on-dark);
  border-radius: 50%;
  opacity: 0;
  z-index: -1;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.da-checkbox-group .da-check-square svg {
  visibility: hidden;
  animation: da-chk-reveal-after-load 5ms forwards var(--eraseDuration);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.da-checkbox-group .da-check-square svg g {
  -webkit-clip-path: path("M4.373,8.493c.412-.798-.55-1.587-1.023-2.059-.829-1.196-2.35-3.433-2.35-3.433l-4,2,5.801,4.176c.618.43,1.269-.099,1.571-.684ZM7.233,13.84c-.317-.339-1.121-.813-1.66-.431-.54.382-12.572,5.414-12.572,5.414L-.327,24.118s7.393-8.199,7.708-8.525c.446-.463.2-1.379-.148-1.753Z");
          clip-path: path("M4.373,8.493c.412-.798-.55-1.587-1.023-2.059-.829-1.196-2.35-3.433-2.35-3.433l-4,2,5.801,4.176c.618.43,1.269-.099,1.571-.684ZM7.233,13.84c-.317-.339-1.121-.813-1.66-.431-.54.382-12.572,5.414-12.572,5.414L-.327,24.118s7.393-8.199,7.708-8.525c.446-.463.2-1.379-.148-1.753Z");
}
.da-checkbox-group .da-check-square svg .da-chk-tick {
  fill: var(--blue-inter-on-dark);
  transition: fill 0.2s ease;
}
.da-checkbox-group label {
  font-family: "Figtree", sans-serif;
  font-size: 15px;
  background: rgba(255, 255, 0, 0);
  min-height: var(--boxSize);
  padding-left: calc(var(--boxSize) + (var(--tapSize) - var(--boxSize)) / 2 + var(--lblGap));
  transition: color 0.2s ease;
  color: var(--blue-inter-on-dark);
}

html {
  font-size: 16px;
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: var(--minViewPortSize);
  min-height: var(--minViewPortSize);
  height: 100%;
  background-color: var(--charcoal);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

body {
  position: relative;
  min-width: var(--minViewPortSize);
  min-height: var(--minViewPortSize);
  font-family: "Reddit Sans", sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  background-color: var(--page-bg);
  background-image: radial-gradient(ellipse at top right, var(--grad-bg-light) 0%, var(--grad-bg-dark) 55%, var(--grad-bg-light) 100%);
  width: 100%;
  height: 100%;
  max-width: 1280px;
  margin: 0;
  overflow: hidden;
  container-type: size;
  container-name: bodyContainer;
}
body.iPhone {
  width: 390px;
  min-width: 390px;
  height: 844px;
}

.app-outer.show-lock .os-lock-screen {
  display: flex;
}
.app-outer.show-lock .app {
  display: none;
}

.app {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: var(--body-padding);
  padding-top: calc(var(--body-padding) + var(--os-status-bar-height));
}

.full-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.pages {
  position: absolute;
  left: calc(var(--navWidthTablet) + var(--body-padding));
  top: 0;
  width: calc(100% - (var(--navWidthTablet) + var(--body-padding)));
  height: 100%;
  overflow: hidden;
}

.page {
  padding: 0 var(--body-padding);
  top: 0;
  height: 100%;
  margin-left: 0;
  overflow: hidden;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
.page.page-main-left {
  transform: translate(-100%, 0);
}
.page.page-main-right {
  transform: translate(100%, 0);
}
.page .ps__rail-y {
  margin-top: calc(var(--body-padding) + var(--os-status-bar-height) + 65px);
  max-height: calc(100% - (var(--body-padding) + var(--os-status-bar-height) + 65px));
}

.page-main-content {
  position: relative;
  padding-top: calc(var(--body-padding) + var(--os-status-bar-height) + 65px + var(--body-padding));
  padding-bottom: var(--body-padding);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -moz-column-gap: var(--page-grid-gap);
       column-gap: var(--page-grid-gap);
  row-gap: 0;
}
.page-main-content > .tile, .page-main-content > .section, .page-main-content > .section-tile {
  margin-bottom: var(--page-grid-gap);
}

.page-content-contained-wide {
  width: 100%;
  max-width: 700px;
}

.slidey {
  transition: transform var(--page-transition-duration) var(--ease-in-out-quint);
}

.section-focus {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  --slide-on: 0;
}

.section-focus-right {
  left: 100%;
}

.focus-group {
  width: 100%;
  height: 100%;
  padding: calc(var(--body-padding) + var(--os-status-bar-height)) 0;
  padding-bottom: calc(var(--body-padding) + var(--os-bottom-offset));
  display: flex;
  flex-direction: column;
}
.focus-group header.header-focus {
  position: relative;
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
  padding: var(--body-padding);
  padding-top: 0;
  align-items: center;
  min-height: calc(var(--btn-min-size) + var(--body-padding));
}
.focus-group header.header-focus h2 {
  width: 100%;
  text-align: center;
  margin: 0 calc(var(--btn-min-size) + 10px);
  display: inline;
  vertical-align: middle;
}
.focus-group header.header-focus button {
  position: absolute;
  top: 0;
}
.focus-group .focus-page-slides {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 0;
}
.focus-group .focus-page-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 100%;
  min-width: 100%;
  height: 100%;
  padding: var(--body-padding);
  padding-top: calc(var(--body-padding) / 2);
  padding-bottom: calc(var(--body-padding) + var(--os-bottom-offset));
  transform: translate(calc(var(--slide-on) * -100%), 0);
}

.app-content * {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.app-content.show-focus-right .section-focus-right {
  transform: translate(-100%, 0);
}
.app-content.show-focus-right .content-front {
  transform: translate(-100%, 0);
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.row.row-baseline {
  align-items: baseline;
}
.row.row-centred {
  justify-content: center;
}
.row p {
  margin: 0;
}

.col {
  display: flex;
  flex-direction: column;
}
.col.col-centred {
  align-items: center;
}
.col.col-left {
  align-items: flex-start;
}

.grid-row {
  min-width: 0;
  position: relative;
}
.grid-row.grid-row-full {
  grid-column-start: 1;
  grid-column-end: 3;
}

.tile-row {
  display: flex;
  -moz-column-gap: 16px;
       column-gap: 16px;
  width: -moz-fit-content;
  width: fit-content;
}

.row-scrollable {
  padding-bottom: 16px;
  margin-bottom: 0 !important;
}
.row-scrollable .ps__rail-x .ps__thumb-x {
  bottom: 4px;
  transition: background-color 0.2s linear, height 0.2s ease-in-out, bottom 0.2s ease;
}
.row-scrollable .ps__rail-x:hover .ps__thumb-x, .row-scrollable .ps__rail-x:focus .ps__thumb-x, .row-scrollable .ps__rail-x.ps--clicking .ps__thumb-x {
  bottom: 2px !important;
}

.ico-row {
  display: flex;
  padding-left: 24px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  position: relative;
  margin: 12px 0;
}
.ico-row::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.ico-row-bank::before {
  content: var(--ico-bank-16);
}

.prf-img {
  color: rgba(255, 255, 255, 0.7);
  background: linear-gradient(to bottom right, var(--blue-900) 0%, var(--blue-600) 100%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-family: "Reddit Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
}
.prf-img::after {
  content: var(--ico-camera-outlined-16);
  opacity: 0.7;
  transition: opacity 0.2s ease;
  position: absolute;
  bottom: 2px;
  right: -2px;
  width: 16px;
  height: 16px;
}
.prf-img:hover {
  color: white;
}
.prf-img:hover::after {
  opacity: 1;
}

.splash {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  z-index: 1;
}
.splash lottie-player {
  width: 100%;
  height: 100%;
  position: relative;
  max-width: 500px;
}

@keyframes appLoading {
  0% {
    left: -30%;
  }
  50% {
    left: 80%;
  }
  100% {
    left: -30%;
  }
}
.app-loader {
  height: 4px;
  background-color: rgba(255, 255, 255, 0.2);
  width: 160px;
  top: calc(50% + max(min(15vw, 75px), 45px));
  border-radius: 2px;
  position: absolute;
  overflow-x: hidden;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.app-loader.shown {
  opacity: 1;
}
.app-loader::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background-color: white;
  animation: appLoading 1.5s infinite;
}

#introTag {
  position: absolute;
  font-family: "Roboto", sans-serif;
  color: white;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 12px;
  right: 20px;
  bottom: -40px;
  display: flex;
  align-items: center;
}
#introTag img {
  margin-left: 10px;
  width: 40px;
}

.swipeBG {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 200%;
  -webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 2;
  background-color: var(--bg-lighter);
  background-image: linear-gradient(160deg, var(--grad-bg-light) 0%, var(--grad-bg-dark) 100%);
}

.ps .ps__rail-x:hover, .ps .ps__rail-y:hover {
  background: rgba(0, 0, 0, 0.2);
}
.ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
  background: rgba(0, 0, 0, 0.2);
}
.ps .ps__rail-x:focus, .ps .ps__rail-y:focus {
  background: rgba(0, 0, 0, 0.2);
}
.ps .ps__thumb-x, .ps .ps__thumb-y {
  background-color: rgba(255, 255, 255, 0.1);
}
.ps .ps__rail-x:hover > .ps__thumb-x, .ps .ps__rail-x:focus > .ps__thumb-x, .ps .ps__rail-x.ps--clicking .ps__thumb-x {
  background-color: rgba(255, 255, 255, 0.2);
}
.ps .ps__rail-y:hover > .ps__thumb-y, .ps .ps__rail-y:focus > .ps__thumb-y, .ps .ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: rgba(255, 255, 255, 0.2);
}

.p-placeholder-large {
  text-align: center;
  margin: 50px 30px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 20px;
}

body.iPhone .page {
  padding-bottom: 94px;
}
body.iPhone.showDeviceOS .ps .ps__rail-y {
  margin-top: calc(var(--body-padding) + var(--os-status-bar-height) + 65px);
  margin-bottom: 90px;
  max-height: calc(100% - (var(--body-padding) + var(--os-status-bar-height) + 155px));
}

.test {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background: red;
  color: white;
  position: absolute;
  bottom: 100px;
  left: 100px;
  z-index: 100;
}
.test::after {
  content: "test elm";
  position: relative;
  font-size: 30px;
  font-weight: 700;
}

.fit-centre-self {
  width: -moz-fit-content;
  width: fit-content;
  justify-self: center;
}

.thermo-val {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  right: calc(50% + 10px);
  padding: 0;
  padding-right: 19px;
  margin-bottom: 29px;
  bottom: 0;
  width: -moz-fit-content;
  width: fit-content;
}
.thermo-val span {
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: white;
  letter-spacing: -0.016em;
  line-height: 1;
}
.thermo-val span.val-hdg {
  white-space: nowrap;
  letter-spacing: -0.0167em;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1;
  margin-bottom: 6px;
  font-weight: 400;
}
.thermo-val span.pence {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.007em;
}
.thermo-val::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--ico-arrow-right-16);
}
.thermo-val.thermo-val-r {
  align-items: flex-start;
  left: calc(50% + 10px);
  padding-right: 0;
  padding-left: 19px;
}
.thermo-val.thermo-val-r::before {
  right: auto;
  left: 0;
  background: var(--ico-arrow-back-16);
}

@container bodyContainer ((max-width: 950px) and (aspect-ratio > 2 / 1)) or (max-width: 620px) {
  body.mouseScrollAuto .ps__rail-x, body.mouseScrollAuto .ps__rail-y {
    display: none;
  }
  .pages {
    left: 0;
    width: 100%;
  }
  .page {
    margin-left: 0;
    padding-bottom: 84px;
  }
  .page .ps__rail-y {
    margin-top: calc(var(--body-padding) + var(--os-status-bar-height) + 65px);
    margin-bottom: 80px;
    max-height: calc(100% - (var(--body-padding) + var(--os-status-bar-height) + 145px));
  }
}
@container bodyContainer (max-width: 860px) {
  .grid-row {
    grid-column-start: 1;
    grid-column-end: 3;
  }
}/*# sourceMappingURL=main.css.map */