/* Minification failed. Returning unminified contents. (2,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (65,5): run-time error CSS1036: Expected expression, found '}' (209,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (257,21): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (263,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (326,46): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-dark' (326,83): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (384,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (388,26): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (389,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (394,32): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-dark' (426,32): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (439,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (440,32): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (468,21): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (477,76): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (479,31): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (571,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (579,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (603,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (616,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (632,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (679,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (680,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (685,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (705,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (728,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (761,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (762,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (767,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (769,33): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (789,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (806,33): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (840,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (880,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (896,32): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (903,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (922,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (945,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (950,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (955,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (967,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (968,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (977,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (978,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (987,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (992,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (1019,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (1020,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (1041,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (1042,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (1047,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (1056,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (1251,39): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (1382,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (1449,45): run-time error CSS1062: Expected semicolon or closing curly-brace, found ':' (1606,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (1620,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (1678,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (1707,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (1743,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (1755,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (1763,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (2409,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (2420,39): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (2452,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (2528,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (2747,39): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (3069,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (3087,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (3112,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (3121,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (3403,30): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (3459,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (3460,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (3553,27): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (3553,46): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (3561,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (3567,33): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (3568,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (3606,27): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (3607,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (3628,32): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (3643,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (3679,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (3684,37): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (3690,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-dark' (3719,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (3720,38): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (3724,38): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (3728,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (3732,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (3950,18): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (4003,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (4283,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4284,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4285,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4286,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4287,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4290,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4291,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4292,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4293,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4294,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4297,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4298,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4301,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4302,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4303,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4304,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4305,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4306,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4307,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4308,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4309,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4312,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4313,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4314,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4315,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4316,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4317,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4320,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4321,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4322,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4323,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4324,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4325,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4326,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4327,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4330,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4345,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (4360,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (4376,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (4383,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (4384,18): run-time error CSS1039: Token not allowed after unary operator: '-ssp-header-height' (4389,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-shadow' (4426,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4486,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4495,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (4537,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (4540,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (4543,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (4557,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4558,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (4559,27): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (4614,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (4635,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4643,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4645,18): run-time error CSS1039: Token not allowed after unary operator: '-ssp-titlebox-height' (4646,34): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius-lg' (4647,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius-lg' (4655,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (4671,46): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4671,66): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-dark' (4672,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (4678,37): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (4679,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-transition' (4689,46): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-light' (4689,72): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4690,38): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (4696,37): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (4702,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (4709,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-transition' (4732,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (4739,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-transition' (4766,46): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4766,66): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-dark' (4768,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (4773,37): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (4774,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-transition' (4781,46): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-light' (4781,72): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4782,38): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (4789,37): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (4800,46): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4800,66): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-dark' (4802,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (4807,37): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (4808,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-transition' (4816,46): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-light' (4816,72): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4817,38): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (4823,37): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (4827,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (4832,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (4839,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4841,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (4849,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4851,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4857,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-transition' (4862,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4863,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (4864,38): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (4870,37): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (4902,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4907,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (4934,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (4968,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (4975,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (5012,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5024,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (5028,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius-lg' (5033,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (5176,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5231,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (5235,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius-lg' (5253,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5258,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (5259,37): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius-lg' (5260,38): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius-lg' (5268,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5276,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5284,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (5289,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (5298,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (5302,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5306,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (5310,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5314,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (5323,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (5343,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (5348,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5353,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (5370,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (5371,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (5383,33): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5394,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5420,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5438,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (5446,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (5529,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (5543,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5547,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (5551,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5556,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (5580,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (5585,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (5633,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (5634,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5669,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5674,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (5716,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5721,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (5750,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (5763,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5764,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (5773,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-dark' (5799,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5800,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (5838,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-success' (5843,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-danger' (5897,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-success' (5922,29): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (5947,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (5984,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (5985,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (6016,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (6123,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6129,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (6132,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (6137,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6168,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6172,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6174,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (6192,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6213,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (6226,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6229,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (6267,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6326,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (6327,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (6338,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (6339,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (6368,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-subtle' (6369,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (6379,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6386,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6398,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-dark' (6405,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6418,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (6431,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6511,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6541,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (6565,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (6572,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (6573,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (6574,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (6576,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (6578,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (6584,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (6588,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6589,37): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (6603,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (6604,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (6605,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (6612,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (6613,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6617,27): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (6618,29): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (6619,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6624,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (6625,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (6626,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius-lg' (6635,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-shadow' (6650,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (6651,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (6652,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (6661,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-light' (6671,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (6675,27): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (6691,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6696,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (6700,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (6704,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (6720,69): run-time error CSS1039: Token not allowed after unary operator: '-ssp-success' (6721,68): run-time error CSS1039: Token not allowed after unary operator: '-ssp-info' (6723,67): run-time error CSS1039: Token not allowed after unary operator: '-ssp-danger' (6724,44): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (6724,81): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6725,69): run-time error CSS1039: Token not allowed after unary operator: '-ssp-accent' (6726,67): run-time error CSS1039: Token not allowed after unary operator: '-ssp-danger' (6744,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (6770,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (6771,33): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (6787,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (6793,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6800,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (6815,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (6843,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (6855,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-light' (6860,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (6868,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (6872,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6876,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (6877,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-light' (6878,33): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6887,32): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (6892,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (6899,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (6903,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (6908,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6909,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (6913,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-dark' (6929,51): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (6929,86): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (6930,33): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (6931,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius-lg' (6950,63): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (6958,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (6966,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (6971,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (6979,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-danger' (6988,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (6992,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (6995,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (6996,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (7003,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-dark' (7005,38): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (7006,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (7023,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (7024,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7025,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (7027,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-shadow' (7032,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (7043,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (7046,48): run-time error CSS1039: Token not allowed after unary operator: '-ssp-success' (7047,47): run-time error CSS1039: Token not allowed after unary operator: '-ssp-danger' (7051,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (7052,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7053,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius-lg' (7058,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-shadow' (7073,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (7074,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (7075,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7084,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-light' (7094,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (7098,27): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (7113,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7117,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (7126,54): run-time error CSS1039: Token not allowed after unary operator: '-ssp-danger' (7127,55): run-time error CSS1039: Token not allowed after unary operator: '-ssp-success' (7139,63): run-time error CSS1039: Token not allowed after unary operator: '-ssp-danger' (7140,66): run-time error CSS1039: Token not allowed after unary operator: '-ssp-success' (7161,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (7170,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (7174,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (7175,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7176,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (7177,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (7185,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7186,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (7202,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (7203,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7204,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius-lg' (7205,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-shadow' (7212,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7218,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (7225,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (7231,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (7241,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7250,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7251,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (7252,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (7263,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (7264,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7269,27): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (7270,29): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (7271,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7290,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (7291,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7292,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius-lg' (7294,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-shadow' (7302,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (7305,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-light' (7314,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-light' (7324,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (7331,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (7337,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (7338,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7345,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7346,37): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (7350,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (7351,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (7356,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7357,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (7359,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (7369,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-dark' (7370,38): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (7374,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (7375,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (7376,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7377,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (7386,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7387,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (7391,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (7392,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (7393,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7394,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (7404,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7405,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (7420,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (7421,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (7423,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7428,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-light' (7437,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7438,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (7443,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (7461,37): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (7483,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (7493,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7494,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (7497,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (7498,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (7499,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (7504,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7505,37): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (7510,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (7511,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (7516,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (7546,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (7550,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (7553,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7554,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (7559,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-dark' (7560,38): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (7568,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (7572,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (7573,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7574,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (7575,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (7581,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7582,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (7587,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7588,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (7591,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (7597,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7601,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (7603,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (7618,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7636,27): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (7637,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7641,27): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (7643,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7647,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (7648,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (7649,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7653,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7654,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (7682,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (7695,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7696,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (7699,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (7700,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (7711,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7712,37): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (7729,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (7742,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7743,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (7746,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (7747,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (7748,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (7759,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7768,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (7793,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (7794,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (7795,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (7796,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7797,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (7807,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (7808,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7809,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7817,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7818,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7819,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (7833,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (7834,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (7835,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7841,27): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (7853,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (7876,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (7877,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (7878,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (7879,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7880,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (7890,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (7891,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7892,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7900,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7901,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (7902,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-white' (7914,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (7915,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (7916,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (7922,27): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (7980,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (8044,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (8045,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (8089,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-light' (8095,32): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-light' (8129,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (8144,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (8145,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (8146,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius-lg' (8150,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-shadow' (8154,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (8155,38): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (8163,27): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (8164,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (8185,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (8190,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (8195,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (8210,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (8212,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (8236,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (8237,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius-lg' (8240,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (8245,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (8267,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-light' (8276,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (8284,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (8315,32): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-light' (8322,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (8323,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (8325,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (8327,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (8332,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (8339,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (8345,24): run-time error CSS1039: Token not allowed after unary operator: '-ssp-danger' (8358,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius-lg' (8364,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (8380,35): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-light' (8398,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (8406,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (8451,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (8452,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-light' (8453,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (8466,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (8467,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (8475,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (8479,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg-white' (8480,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-secondary' (8487,33): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (8491,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (8496,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-bg' (8517,28): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border' (8522,23): run-time error CSS1039: Token not allowed after unary operator: '-ssp-font' (8528,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (8620,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text-muted' (8645,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-text' (8653,27): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (8654,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (8658,22): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (8664,27): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-rgb' (8665,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (8676,17): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (8733,25): run-time error CSS1039: Token not allowed after unary operator: '-ssp-border-radius' (8740,40): run-time error CSS1039: Token not allowed after unary operator: '-ssp-success' (8740,103): run-time error CSS1039: Token not allowed after unary operator: '-ssp-success' (8741,40): run-time error CSS1039: Token not allowed after unary operator: '-ssp-danger' (8741,102): run-time error CSS1039: Token not allowed after unary operator: '-ssp-danger-dark' (8742,40): run-time error CSS1039: Token not allowed after unary operator: '-ssp-info' (8742,100): run-time error CSS1039: Token not allowed after unary operator: '-ssp-info-dark' (8743,40): run-time error CSS1039: Token not allowed after unary operator: '-ssp-warning' (8743,103): run-time error CSS1039: Token not allowed after unary operator: '-ssp-warning' (8744,40): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary' (8744,103): run-time error CSS1039: Token not allowed after unary operator: '-ssp-primary-dark' */ :root { --ssp-primary: #e60000; --ssp-primary-dark: #820000; --ssp-primary-light: #E60000; --ssp-primary-rgb: 230, 0, 0; --ssp-success: #A8B400; } html, body { margin: 0; overflow-x: hidden; } /* Header container width override — moved from inline style="max-width:1840px" on _Header.cshtml to stay CSP-safe under style-src 'self'. */ #header .header-container { max-width: 1840px; } /* Floating language selector (positioned on login / pre-auth screens). Moved out of inline style= on _Layout.cshtml so it's CSP-safe under style-src 'self'. */ .language-selector-global { position: fixed; top: 35px; right: 10px; z-index: 9999; transform-origin: top right; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: slideInFade 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes slideInFade { from { opacity: 0; transform: translateX(30px) translateY(-15px) scale(0.8); } to { opacity: 1; transform: translateX(0) translateY(0) scale(1); } } @keyframes slideOutFade { from { opacity: 1; transform: translateX(0) translateY(0) scale(1); } to { opacity: 0; transform: translateX(30px) translateY(-15px) scale(0.8); } } body { background: #FFFFFF; } p { margin: 0; } * { font-family: 'Open Sans', sans-serif; } *:focus { outline: none; } a { text-decoration: none; } a:hover { text-decoration: none; color: } .ps__thumb-y { background-color: #e60000; } .box-bgd-white { background: #fff; } #header { background: #fff; height: 80px; display: flex; justify-content: center; align-items: center; margin-bottom: 40px; } #header .header-leftSide, #header .header-rightSide { display: flex; justify-content: center; align-items: center; } #header .header-rightSide .header-datetime-text { margin-right: 40px; } #header .header-rightSide .header-datetime-text span { font-size: 12px; line-height: 20px; color: #000; font-weight: bold; } #header .header-leftSide .header-logo { background-image: url("../Content/img/Vodacom-Logo.svg"); width: 135px; height: 53px; margin-right: 40px; background-repeat: no-repeat; } #header .header-leftSide .header-welcomeText p { font-size: 16px; color: #e60000; line-height: 20px; margin-bottom: 0; font-weight: bold; } /* Active partner-customer badge. Lives on the right side, immediately before the icon strip, so users see which account is active at a glance. The selector is the bare class (no .header-leftSide ancestor) because the badge moved out of the left welcome text into the right-hand action area. */ #header .header-rightSide .header-active-customer { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; padding: 4px 12px; background: #FFFFFF; border-radius: 999px; color: #25282B; font-size: 13px; font-weight: 600; max-width: 280px; overflow: hidden; } #header .header-rightSide .header-active-customer-account { color: #e60000; white-space: nowrap; flex: 0 0 auto; font-size: 16px; font-weight: 700; } #header .header-rightSide .header-active-customer-name { color: #4A4D4E; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } #header .header-rightSide .header-icons { display: flex; justify-content: center; align-items: center; align-self: center; gap: 8px; } #header .header-rightSide .header-icons a { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; transition: all 0.2s ease; } #header .header-rightSide .header-icons form { display: flex; margin: 0; } #header .header-rightSide .header-icons a:hover { background: rgba(230,0,0,0.08); } #header .header-rightSide .header-supportIcon { background-image: url("../Content/img/headset-icon.png"); width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; } #header .header-rightSide .header-envelopIcon { background-image: url("../Content/img/envelop.png"); width: 26px; height: 26px; background-repeat: no-repeat; background-size: contain; position: relative; display: inline-block; } #header .header-rightSide .header-icons a:hover .header-envelopIcon { filter: brightness(0) saturate(100%) invert(12%) sepia(97%) saturate(6264%) hue-rotate(358deg) brightness(94%) contrast(112%); } .circle-number { display: flex; justify-content: center; align-items: center; width: 18px; height: 18px; background-color: var(--ssp-primary); border-radius: 50%; color: white; font-size: 10px; font-weight: bold; line-height: 1; position: absolute; top: -6px; right: -6px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } #header .header-rightSide .header-logoutIcon { background-image: url("../Content/img/logout-icon.png"); width: 26px; height: 26px; background-repeat: no-repeat; background-size: contain; } #header .header-rightSide .header-icons a:hover .header-logoutIcon { filter: brightness(0) saturate(100%) invert(12%) sepia(97%) saturate(6264%) hue-rotate(358deg) brightness(94%) contrast(112%); } #header .header-rightSide .header-homeIcon { background-image: url("../Content/img/billing-homeIcon.png"); width: 26px; height: 26px; background-repeat: no-repeat; background-size: contain; } #header .header-rightSide .header-icons a:hover .header-homeIcon { filter: brightness(0) saturate(100%) invert(12%) sepia(97%) saturate(6264%) hue-rotate(358deg) brightness(94%) contrast(112%); } /* Profile icon — uses inline SVG (currentColor) instead of a background image so we don't need a new asset; matches the colour treatment of the language icon. */ #header .header-rightSide .header-profileIcon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; color: #4A4D4E; } #header .header-rightSide .header-icons a:hover .header-profileIcon { color: var(--ssp-primary, #E60000); } /* ===== Homepage (hp-*) ===== */ .hp-announcement { background: var(--ssp-primary); color: #fff; font-size: 14px; font-weight: 600; border: none; border-radius: 0; margin: 0 0 12px; padding: 10px 40px 10px 20px; overflow: hidden; white-space: nowrap; } .hp-announcement:hover .hp-announcement-text { animation-play-state: paused; } .hp-announcement-text { display: inline-block; animation: hp-marquee 15s linear infinite; } @keyframes hp-marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* On tablet/phone the scrolling ticker only ever shows a few cramped, mid-word characters, so stop the marquee and let the announcement wrap to full, readable lines instead. Desktop keeps the marquee. */ @media (max-width: 1023px) { .hp-announcement { white-space: normal; } .hp-announcement-text { display: block; animation: none; transform: none; } } /* Move main content area up by 15px */ .pd-ltr-20.customscroll.height-100-p { overflow-x: hidden; } .main-container { overflow-x: hidden; } .hp-announcement .close { color: #fff; opacity: .8; text-shadow: none; } .hp-announcement .close:hover { opacity: 1; } .hp-welcome { text-align: center; padding: 35px 15px 28px; background: linear-gradient(135deg, var(--ssp-primary-dark, #820000) 0%, var(--ssp-primary, #e60000) 100%); color: #fff; border-radius: 0 0 16px 16px; margin: 0 0 20px; } .hp-welcome h2 { font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 4px; } .hp-welcome p { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8); margin: 0; } .hp-accounts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 0 15px 25px; max-width: 100%; box-sizing: border-box; } .hp-accounts .hp-account-pill { max-width: 100%; box-sizing: border-box; } .hp-accounts .hp-account-pill .hp-pill-name, .hp-accounts .hp-account-pill .hp-pill-account { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hp-account-pill { display: inline-flex; flex-direction: column; align-items: center; padding: 8px 20px; border: 2px solid #4A4D4E; border-radius: 30px; background: #fff; cursor: pointer; transition: all .2s ease; text-align: center; min-width: 140px; } .hp-account-pill:hover { border-color: var(--ssp-primary); } .hp-account-pill--active { background: var(--ssp-primary); border-color: var(--ssp-primary); color: #fff; } .hp-account-pill--active:hover { border-color: var(--ssp-primary-dark); } /* Account number is now the primary identifier on the pill — bigger and bold so it reads at a glance when the user has multiple linked accounts. The customer name sits underneath as the subdued secondary. (Previous order had these reversed.) */ .hp-account-pill .hp-pill-account { font-size: 16px; font-weight: 700; } .hp-account-pill .hp-pill-name { font-size: 11px; opacity: .7; } .hp-account-pill .badge { font-size: 10px; margin-top: 2px; } .hp-cards { padding: 0 15px 30px; } .hp-card { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 1px solid #4A4D4E; border-top: 3px solid var(--ssp-primary, #e60000); border-radius: 10px; padding: 28px 15px; text-align: center; cursor: pointer; transition: all .25s ease; margin-bottom: 20px; text-decoration: none; color: inherit; min-height: 170px; } .hp-card:hover { border-color: var(--ssp-primary); border-top-color: var(--ssp-primary); box-shadow: 0 4px 15px rgba(230, 0, 0, .15); transform: translateY(-3px); text-decoration: none; color: inherit; } .hp-card img { width: 50px; height: 50px; margin-bottom: 14px; object-fit: contain; } .hp-card .hp-card-title { font-size: 15px; font-weight: 700; color: #25282B; margin: 0 0 4px; } .hp-card .hp-card-text { font-size: 12px; color: #4A4D4E; margin: 0; } .hp-card:hover .hp-card-title { color: var(--ssp-primary); } /* ===== End Homepage ===== */ /* ===== Shared Page Utilities ===== */ .pg-back-icon { margin-left: -18px; } .pg-payment-card { width: 20rem; height: 155px; } .pg-payment-brand { height: 55px; display: flex; align-items: center; justify-content: center; } .pg-payment-brand-text { font-size: 1.8rem; font-weight: bold; color: var(--ssp-primary); } .sub-link { color: #4A4D4E; } .sub-link:hover { color: var(--ssp-primary); } #map { width: 100%; height: 400px; } .purchase-field-min { min-width: 500px; } /* ===== End Shared Page Utilities ===== */ /* ===== Modern Page Layout ===== */ /* Page header — clean, no background color */ .titleBox { background: transparent !important; background-image: none !important; height: auto !important; padding: 0 0 16px 0 !important; border-radius: 0; border-top: none !important; display: flex; align-items: center; gap: 12px; } .titleBox p { color: #25282B !important; font-size: 22px !important; font-weight: 800; line-height: 1.3; margin: 0; letter-spacing: -0.3px; } .titleBox a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #ffffff; border: 1px solid #4A4D4E; transition: all 0.2s ease; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .titleBox a:hover { background: #FFFFFF; border-color: #4A4D4E; } .titleBox a img.pg-back-icon { width: 18px; height: 18px; opacity: 1; margin-left: 0; filter: brightness(0); } /* Boxed back button — same look as the enduser/admin .titleBox back control, as a standalone class so the dealer/salesperson headers can match it without adopting the whole .titleBox layout (reviewer request). */ .pg-back-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #ffffff; border: 1px solid #4A4D4E; box-shadow: 0 1px 3px rgba(0,0,0,0.06); transition: all 0.2s ease; flex-shrink: 0; padding: 0; } .pg-back-btn:hover { background: #ffffff; border-color: #4A4D4E; } .pg-back-btn img.pg-back-icon { width: 18px; height: 18px; opacity: 1; margin-left: 0; filter: brightness(0); } /* Content card — unified rounded card */ .box-bgd-white { background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04); border: 1px solid var(--ssp-bg-subtle); } #myProducts .myProducts-wrapper .myProducts-box-padding { padding: 24px 30px 30px; background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04); border: 1px solid var(--ssp-bg-subtle); } #myProducts .myProducts-wrapper .box-bgd-white { border-radius: 12px; } /* Unified search bar */ .mod-search { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; } .mod-search .form-control { border-radius: 8px; border: 1px solid #4A4D4E; padding: 10px 16px; font-size: 14px; transition: border-color 0.2s; } .mod-search .form-control:focus { border-color: var(--ssp-primary); box-shadow: 0 0 0 3px rgba(230,0,0,0.08); } .mod-search .btn { border-radius: 8px; padding: 8px 14px; border: 1px solid #4A4D4E; background: #fff; transition: all 0.2s; } .mod-search .btn:hover { border-color: var(--ssp-primary); background: rgba(230, 0, 0, 0.06); } .mod-search .btn img { width: 20px; height: 20px; margin: 0; } /* Clean data rows replacing form-control readonly inputs */ .data-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--ssp-bg-subtle); } .data-row:last-child { border-bottom: none; } .data-row .data-label { font-size: 13px; font-weight: 600; color: #4A4D4E; text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0; min-width: 140px; } .data-row .data-value { font-size: 15px; font-weight: 600; color: #25282B; text-align: right; } /* Left sidebar list items */ .mod-sidebar-list { list-style: none; padding: 0; margin: 0; } .mod-sidebar-list li { margin-bottom: 4px; } .mod-sidebar-list li a { display: block; padding: 10px 16px; border-radius: 8px; color: #4A4D4E; font-weight: 500; font-size: 14px; transition: all 0.2s; text-decoration: none; } .mod-sidebar-list li a:hover { background: var(--ssp-bg-subtle); color: var(--ssp-primary); } .mod-sidebar-list li a.active { background: rgba(230,0,0,0.06); color: var(--ssp-primary); font-weight: 700; } /* Payment option cards */ .pay-card { background: #fff; border: 1px solid #4A4D4E; border-radius: 12px; padding: 24px; width: 220px; text-align: center; transition: all 0.25s ease; display: flex; flex-direction: column; align-items: center; gap: 16px; } .pay-card:hover { border-color: var(--ssp-primary); box-shadow: 0 4px 15px rgba(0,0,0,0.1); transform: translateY(-3px); } .pay-card img { max-height: 45px; max-width: 160px; object-fit: contain; } .pay-card .btn-green { width: 100%; border-radius: 8px; padding: 10px 20px; } /* Section heading with accent underline */ .section-title { font-size: 16px; font-weight: 700; color: #25282B; padding-bottom: 10px; border-bottom: 3px solid var(--ssp-primary); display: inline-block; margin-bottom: 20px; } /* Modern vertical sidebar tabs for profile */ #myProfile .myProfilewrapper ul.nav-tabs { flex-direction: column; border-bottom: none; border-right: 1px solid #4A4D4E; padding-right: 0; gap: 2px; } #myProfile .myProfilewrapper ul.nav-tabs li { max-width: none; margin: 0; padding: 0; margin-left: 0; } #myProfile .myProfilewrapper ul.nav-tabs li a { padding: 12px 20px; font-size: 14px; font-weight: 500; border-radius: 8px 0 0 8px; color: #4A4D4E; border: none; transition: all 0.2s; display: block; } #myProfile .myProfilewrapper ul.nav-tabs li a:hover { background: var(--ssp-bg-subtle); color: var(--ssp-primary); } #myProfile .myProfilewrapper .nav-tabs .nav-link.active { background: rgba(230,0,0,0.06); color: var(--ssp-primary); font-weight: 700; border-left: 3px solid var(--ssp-primary); border-bottom: none; padding-left: 17px; } /* Order cards in accordion */ .mod-order-card { border: 1px solid #4A4D4E; border-radius: 10px; margin-bottom: 12px; overflow: hidden; transition: box-shadow 0.2s; } .mod-order-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.06); } .mod-order-card .card-header { background: #fff; border-bottom: 1px solid var(--ssp-bg-subtle); padding: 16px 20px; } .mod-order-card .card-header button { font-size: 15px; font-weight: 700; color: #25282B; text-decoration: none; } .mod-order-card .card-body { padding: 20px; } /* Override the heavy red-bordered category headers */ #myProducts .myProducts-wrapper .myProducts-leftSide-boxTitle { border-left: 3px solid var(--ssp-primary); background: #FFFFFF; padding: 10px 16px; border-radius: 6px; width: 100%; } #myProducts .myProducts-wrapper .myProducts-leftSide-boxTitle p { font-size: 13px; font-weight: 700; color: #4A4D4E; text-transform: uppercase; letter-spacing: 0.5px; } /* Map container styling */ .mod-map-container { border-radius: 10px; overflow: hidden; } /* M-Pesa modal styling — applies to both #mpesaModal (USSD Push) and #mpesaPayBillModal (PayBill) across the Purchase, Dealer, and ISP flows. Vodacom red header + red CTA / spinner / success accent. */ #mpesaModal .modal-content, #mpesaPayBillModal .modal-content { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.15); } #mpesaModal .modal-header, #mpesaPayBillModal .modal-header { background: var(--ssp-primary); color: #fff; border-bottom: none; padding: 18px 24px; } #mpesaModal .modal-header .modal-title, #mpesaPayBillModal .modal-header .modal-title { font-size: 18px; font-weight: 700; } #mpesaModal .modal-header .close, #mpesaPayBillModal .modal-header .close { color: #fff; opacity: 0.8; text-shadow: none; } #mpesaModal .modal-header .close:hover, #mpesaPayBillModal .modal-header .close:hover { opacity: 1; } #mpesaModal .modal-body, #mpesaPayBillModal .modal-body { padding: 24px; } #mpesaModal .modal-body .form-control, #mpesaPayBillModal .modal-body .form-control { border-radius: 8px; border: 1px solid #4A4D4E; padding: 10px 16px; font-size: 15px; transition: border-color 0.2s; } #mpesaModal .modal-body .form-control:focus, #mpesaPayBillModal .modal-body .form-control:focus { border-color: var(--ssp-primary); box-shadow: 0 0 0 3px rgba(230,0,0,0.08); } #mpesaModal .modal-body label, #mpesaPayBillModal .modal-body label { font-weight: 600; color: #4A4D4E; font-size: 13px; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; } #mpesaModal .modal-footer, #mpesaPayBillModal .modal-footer { border-top: 1px solid var(--ssp-bg-subtle); padding: 16px 24px; gap: 10px; } #mpesaModal .modal-footer .btn-secondary, #mpesaPayBillModal .modal-footer .btn-secondary { background: var(--ssp-bg-subtle); color: #4A4D4E; border: none; border-radius: 8px; padding: 10px 24px; font-weight: 600; transition: all 0.2s; } #mpesaModal .modal-footer .btn-secondary:hover, #mpesaPayBillModal .modal-footer .btn-secondary:hover { background: #4A4D4E; } #mpesaModal .modal-footer .btn-success, #mpesaModal .modal-footer #mpesaPayBtn, #mpesaModal .modal-footer #mpesaRetryBtn, #mpesaPayBillModal .modal-footer .btn-success, #mpesaPayBillModal .modal-footer #mpesaPayBillSubmitBtn { background: var(--ssp-primary); border: none; border-radius: 8px; padding: 10px 24px; font-weight: 700; font-size: 14px; color: #fff; transition: all 0.2s; box-shadow: 0 2px 6px rgba(230,0,0,0.3); } #mpesaModal .modal-footer .btn-success:hover, #mpesaModal .modal-footer #mpesaPayBtn:hover, #mpesaModal .modal-footer #mpesaRetryBtn:hover, #mpesaPayBillModal .modal-footer .btn-success:hover, #mpesaPayBillModal .modal-footer #mpesaPayBillSubmitBtn:hover { background: #820000; box-shadow: 0 4px 10px rgba(230,0,0,0.4); transform: translateY(-1px); } #mpesaModal .spinner-border, #mpesaPayBillModal .spinner-border { color: var(--ssp-primary) !important; } #mpesaModal .text-success, #mpesaPayBillModal .text-success { color: var(--ssp-primary) !important; } /* Override Bootstrap green/blue accents to Vodacom red */ .badge-success { background-color: var(--ssp-primary) !important; } .badge-info { background-color: #4A4D4E !important; } .badge-primary { background-color: #820000 !important; } .btn-success { background-color: var(--ssp-primary) !important; border-color: var(--ssp-primary) !important; } .btn-success:hover { background-color: #820000 !important; border-color: #820000 !important; } .btn-primary { background-color: var(--ssp-primary) !important; border-color: var(--ssp-primary) !important; } .btn-primary:hover { background-color: #820000 !important; border-color: #820000 !important; } .text-success { color: var(--ssp-primary) !important; } /* Language dropdown modern styling */ .language-btn { background: var(--ssp-primary) !important; color: white !important; border: none !important; border-radius: 8px !important; padding: 8px 16px !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer; transition: all 0.2s; } .language-btn:hover { background: #820000 !important; } .language-dropdown-content { border-radius: 8px !important; border: 1px solid #4A4D4E !important; box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important; overflow: hidden; } .language-dropdown-content a { transition: background 0.2s; } .language-dropdown-content a:hover { background: var(--ssp-bg-subtle) !important; color: var(--ssp-primary) !important; } /* Billing titleBox - covered by generic .titleBox rule above */ /* Modern billing sidebar list */ #billing .billing-wrapper .billing-leftSideBox ul li { background: none; margin-bottom: 4px; } #billing .billing-wrapper .billing-leftSideBox ul li a { padding: 10px 16px; border-radius: 8px; color: #4A4D4E; font-weight: 500; font-size: 14px; transition: all 0.2s; } #billing .billing-wrapper .billing-leftSideBox ul li a:hover { background: var(--ssp-bg-subtle); color: var(--ssp-primary); } #billing .billing-wrapper .nav-tabs .nav-link.active { background: rgba(230,0,0,0.06); color: var(--ssp-primary); font-weight: 700; } /* ===== End Modern Page Layout ===== */ /*myProducts page*/ .borderBox { border: 1px solid var(--ssp-border); padding: 0 20px !important; } #myProducts .myProducts-wrapper .myProducts-box-padding { /* padding handled by modern override above */ } #myProducts .myProducts-wrapper .myProducts-searchBox { margin: 25px 0 40px 0; } #myProducts .myProducts-wrapper .myProducts-searchBox input { width: 100%; padding: 11px 20px; background: #FFFFFF; border: 1px solid #4A4D4E; border-radius: 5px; } #myProducts .myProducts-wrapper .myProducts-leftSide-scrollBox { height: 340px; position: relative; overflow-y: scroll; } /* myProducts-leftSide-boxTitle - handled by modern override above */ #myProducts .myProducts-wrapper .myProducts-leftSide-scrollBox ul { margin: 30px 0; } #myProducts .myProducts-wrapper .myProducts-leftSide-scrollBox ul li { font-size: 16px; font-weight: 400; line-height: 24px; color: #4A4D4E; margin-bottom: 20px; } .button-buyMoreProducts { width: 100%; max-width: 168px; height: 40px; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #e60000, #820000); border-radius: 5px; color: #fff; font-size: 15px; font-weight: bold; border: none; cursor: pointer; box-shadow: 0 4px 8px rgba(230, 0, 0, 0.4); transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; margin: 30px 0; float: right; } /* Hover effect */ .button-buyMoreProducts:hover { background: linear-gradient(135deg, #E60000, #820000); box-shadow: 0 6px 12px rgba(230, 0, 0, 0.5); transform: translateY(-2px); } /* Active click effect */ .button-buyMoreProducts:active { transform: translateY(1px); box-shadow: 0 3px 6px rgba(230, 0, 0, 0.4); } .button-buyMoreProducts a { color: #fff; text-decoration: none; } .button-buyMoreProducts a:hover { color: #fff; /* Keep it white on hover */ text-decoration: underline; /* Optional hover effect */ } .btn-payNow { display: inline-flex; justify-content: center; align-items: center; width: 50%; padding: 10px 20px; background: linear-gradient(135deg, #e60000, #820000); border-radius: 5px; color: #fff !important; font-size: 16px; font-weight: bold; border: none; cursor: pointer; box-shadow: 0 4px 8px rgba(230, 0, 0, 0.4); transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; } /* Hover effect */ .btn-payNow:hover { background: linear-gradient(135deg, #E60000, #820000); box-shadow: 0 6px 12px rgba(230, 0, 0, 0.5); transform: translateY(-2px); text-decoration: none; } /* Active effect */ .btn-payNow:active { transform: translateY(1px); box-shadow: 0 3px 6px rgba(230, 0, 0, 0.4); } /* Base green button style */ .btn-green { background: linear-gradient(135deg, #820000, #820000); color: #fff !important; border-radius: 5px; padding: 10px 20px; font-weight: bold; border: none; cursor: pointer; box-shadow: 0 4px 8px rgba(230, 0, 0, 0.3); transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } /* Hover */ .btn-green:hover { background: linear-gradient(135deg, #E60000, #820000); box-shadow: 0 6px 12px rgba(230, 0, 0, 0.4); transform: translateY(-2px); } /* Active */ .btn-green:active { transform: translateY(1px); box-shadow: 0 3px 6px rgba(230, 0, 0, 0.3); } .btn-grey { background: linear-gradient(135deg, #4A4D4E, #25282B); /* Light grey to dark grey */ color: #fff !important; border-radius: 5px; padding: 10px 20px; font-weight: bold; border: none; cursor: pointer; box-shadow: 0 4px 8px rgba(74, 77, 78, 0.4); /* Grey shadow */ transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } /* Hover */ .btn-grey:hover { background: linear-gradient(135deg, #4A4D4E, #25282B); /* Slightly lighter hover */ box-shadow: 0 6px 12px rgba(74, 77, 78, 0.5); transform: translateY(-2px); } /* Active */ .btn-grey:active { transform: translateY(1px); box-shadow: 0 3px 6px rgba(74, 77, 78, 0.4); } /*myProducts rightside*/ #myProducts .myProducts-wrapper .rightSide-padding { padding: 0 20px } #myProducts .myProducts-wrapper .myProducts-rightSide-title { margin-bottom: 30px; } #myProducts .myProducts-wrapper .myProducts-rightSide-title p { border-bottom: 3px solid var(--ssp-primary); width: max-content; padding-bottom: 10px; font-size: 16px; font-weight: 700; color: #25282B; line-height: 1.3; } #myProducts .myProducts-wrapper .myProducts-rightSide-title hr { margin: 0; } #myProducts .myProducts-wrapper .myproducts-rightSide-scrollBox ul { height: 385px; position: relative; } #myProducts .myProducts-wrapper .myproducts-rightSide-scrollBox .infoBox { border: 1px solid #4A4D4E; margin-bottom: 15px; padding: 13px 20px; width: 100%; max-width: 560px; } .infoBoxOrd { border: 1px solid #4A4D4E; margin-bottom: 15px; padding: 13px 20px; width: 100%; max-width: 560px; } #myProducts .myProducts-wrapper .myproducts-rightSide-scrollBox .infoBox p { font-size: 14px; font-weight: 400; line-height: 14px; } #myProducts .myProducts-wrapper .myproducts-rightSide-icons { margin-top: 30px; display: flex; justify-content: space-between; align-items: center; align-self: center; padding: 0 13px 0 0; } #myProducts .myProducts-wrapper .myproducts-rightSide-icons a { margin-right: 75px; } #myProducts .myProducts-wrapper .myproducts-rightSide-icons a:last-child { margin-right: 0; } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon1, #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon2, #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon3, #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon4, #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon5 { width: 53px; height: 52px; background-repeat: no-repeat; } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon1 { background-image: url("../Content/img/myProducts-icon1.png"); } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon2 { background-image: url("../Content/img/myProducts-icon2.png"); } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon3 { background-image: url("../Content/img/myProducts-icon3.png"); } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon4 { background-image: url("../Content/img/myProducts-icon4.png"); } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon5 { background-image: url("../Content/img/myProducts-icon5.png"); } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon1:hover, #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon2:hover, #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon3:hover, #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon4:hover, #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon5:hover { filter: brightness(0) saturate(100%) invert(12%) sepia(97%) saturate(6264%) hue-rotate(358deg) brightness(94%) contrast(112%); } /*billing page*/ #billing .billing-wrapper .billing-leftSideBox ul { margin: 0; padding: 0; border: 0; background: none; } /* billing sidebar & nav-link - handled by modern override above */ /* billing titleBox - handled by modern override above */ #billing .billing-wrapper .billing-box-padding { padding: 40px 0 40px 40px; } #billing .billing-wrapper .billing-monthBox p { margin-bottom: 20px; font-size: 20px; line-height: 14px; font-weight: bold; } #billing .billing-wrapper .billing-monthBox select { width: 100%; max-width: 510px; padding: 14px 20px; font-size: 18px; color: #4A4D4E; border: 0; background: #FFFFFF; margin-bottom: 30px; } #billing .billing-wrapper .tab-content { border: 2px solid var(--ssp-border); width: 400px; margin-left: 25px; float: left; } #billing .billing-wrapper .tab-content .tab-pane { padding: 30px; } #billing .billing-wrapper .tab-content .tab-pane h5 { font-size: 20px; font-weight: bold; line-height: 14px; margin-bottom: 30px; } #billing .billing-wrapper .tab-content .tab-pane p { margin-bottom: 30px; font-size: 14px; line-height: 24px; } #billing .billing-wrapper .billing-leftSideBox { margin-bottom: 50px; } #billing .billing-wrapper .billing-leftSideBox p { font-size: 20px; font-weight: bold; line-height: 14px; margin-bottom: 20px; } #billing .billing-wrapper .button-pay-billing { text-align: center; } #billing .billing-wrapper .button-pay-billing span { font-size: 20px; font-weight: bold; line-height: 14px; margin-right: 20px; } #billing .billing-wrapper .button-pay-billing a { font-size: 18px; line-height: 14px; color: #fff; background: #820000; padding: 15px 40px; border-radius: 5px; } #billing .billing-wrapper .billing-printerIcon { background-image: url(../Content/img/billing-download.png); width: 49px; height: 49px; background-repeat: no-repeat; background-position: center; } #billing .billing-wrapper .billing-homeIcon { background-image: url(../Content/img/billing-homeIcon.png); width: 37px; height: 35px; background-repeat: no-repeat; background-position: center margin-right: 20px; } .PrintInvIcon { background-image: url(../Content/img/invoice.png); } #billing .billing-wrapper .billing-iconsBox { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; flex-direction: column; } /*myProfile*/ /* myProfile titleBox - handled by modern override above */ #myProfile .myProfilewrapper .box-bgd-white { padding-top: 30px; padding-bottom: 80px; width: 100%; } /* myProfile tabs - handled by modern override above */ #myProfile .myProfilewrapper .myProfile-rightSide { border: none; padding: 10px 0 30px; } #myProfile .myProfilewrapper .mydetails-group form .form-group { width: 100%; max-width: 480px; height: 50px; margin: 0 auto; margin-bottom: 30px; } #myProfile .myProfilewrapper .mydetails-group form .form-group label { font-size: 14px; line-height: 14px; color: #4A4D4E; } #myProfile .myProfilewrapper .myprofile-formGroup h5 { text-align: left; font-size: 18px; font-weight: 700; line-height: 1.3; color: #25282B; margin-top: 0; } #myProfile .myProfilewrapper .mydetails-group form .form-group input { border: 1px solid #4A4D4E; } #myProfile .myProfilewrapper .myprofile-formGroup { padding-right: 30px; padding-left: 30px; } #myProfile .myProfilewrapper .myProfile-buttons { text-align: left; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } #myProfile .myProfilewrapper .myProfile-buttons .btn-update { background: #820000; } #myProfile .myProfilewrapper .myProfile-history-checkboxes { display: flex; justify-content: space-between; align-items: center; } #myProfile .myProfilewrapper .myProfile-history-checkboxes input { margin-top: 5px; z-index: 999999; } #myProfile .myProfilewrapper .myProfile-history-checkboxes .myProfile-history-checkboxes-textBox img { float: left; margin-right: 20px; } #myProfile .myProfilewrapper .myProfile-history-checkboxes .myProfile-history-checkboxes-textBox p.leadp { font-size: 14px; font-weight: bold; color: #e60000; } #myProfile .myProfilewrapper .myProfile-history-checkboxes .myProfile-history-checkboxes-textBox p.secondp { font-size: 11px; color: #4A4D4E; width: 80%; } #myProfile .myProfilewrapper .myProfile-history-checkboxes .myProfile-history-checkboxes-status h4 { font-size: 24px; font-weight: bold; line-height: 14px; color: #e60000; } #myProfile .myProfilewrapper .custom-control-label:before { background-color: transparent; } #myProfile .myProfilewrapper .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: #e60000; border: 1px solid #e60000; padding: 2px; } #myProfile .myProfilewrapper .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-image: none; } #myProfile .myProfilewrapper .form-control-lg { height: auto; padding: 0; margin: 0; line-height: normal; margin-right: 25px; } #myProfile .myProfilewrapper .custom-control-label::before { top: 5px; left: 0; width: 13px; height: 13px; } #myProfile .myProfilewrapper .custom-checkbox .custom-control-label::before { border-radius: unset; } #myProfile .myProfilewrapper .custom-control-label::after { top: 0; left: 0; } #myProfile .myProfilewrapper .form-check { border: 1px solid var(--ssp-border); padding: 27px 10px; padding-right: 40px; padding-left: 25px; margin-bottom: 20px; } #myProfile .myProfilewrapper .myprofile-formGroup h5.form-history-title { text-align: left; margin-bottom: 24px; font-size: 18px; font-weight: 700; color: #25282B; padding-bottom: 12px; border-bottom: 3px solid var(--ssp-primary); display: inline-block; } /* Modern profile detail rows (MyDetails partial) */ #myProfile .mydetails-group form .d-flex.justify-content-between { background: #FFFFFF; border-radius: 8px; padding: 14px 20px; margin-bottom: 10px !important; margin-top: 0 !important; align-items: center; } #myProfile .mydetails-group form .d-flex.justify-content-between .control-label { font-size: 12px; font-weight: 700; color: #4A4D4E; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; min-width: 120px; flex-shrink: 0; } #myProfile .mydetails-group form .d-flex.justify-content-between .form-control[readonly] { background: transparent; border: none; box-shadow: none; font-size: 15px; font-weight: 600; color: #25282B; padding: 0; height: auto; text-align: right; } /* Modern profile tables (History, Messages) */ #myProfile .table { border: none !important; border-collapse: separate; border-spacing: 0; } #myProfile .table thead th { background: #FFFFFF; border: none !important; border-bottom: 2px solid #4A4D4E !important; font-size: 11px; font-weight: 700; color: #4A4D4E; text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 16px; } #myProfile .table tbody td { border: none !important; border-bottom: 1px solid var(--ssp-bg-subtle) !important; padding: 14px 16px; font-size: 14px; color: #25282B; vertical-align: middle; } #myProfile .table tbody tr:hover { background: #FFFFFF; } #myProfile .table.table-striped tbody tr:nth-of-type(odd) { background: transparent; } #myProfile .table.table-striped tbody tr:nth-of-type(odd):hover { background: #FFFFFF; } /* Modern password form fields */ #myProfile .mydetails-group .form-control { border: 1px solid #4A4D4E; border-radius: 8px; padding: 10px 16px; font-size: 14px; transition: border-color 0.2s; } #myProfile .mydetails-group .form-control:focus { border-color: var(--ssp-primary); box-shadow: 0 0 0 3px rgba(230,0,0,0.08); } /* OTP / Change Password section */ #myProfile .mydetails-group .form-group label { font-size: 12px; font-weight: 700; color: #4A4D4E; text-transform: uppercase; letter-spacing: 0.5px; } /* Message filter buttons row */ #myProfile .MyMessages .myProfile-buttons { display: flex; gap: 8px; flex-wrap: wrap; } #myProfile .MyMessages .myProfile-buttons .btn-green, #myProfile .MyMessages .myProfile-buttons .btn-grey { border-radius: 8px; font-size: 13px; padding: 8px 18px; } /* DataTables overrides inside profile */ #myProfile .dataTables_wrapper .dataTables_filter input { border: 1px solid #4A4D4E; border-radius: 8px; padding: 6px 12px; font-size: 13px; } #myProfile .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--ssp-primary); box-shadow: 0 0 0 3px rgba(230,0,0,0.08); outline: none; } #myProfile .dataTables_wrapper .dataTables_length select { border: 1px solid #4A4D4E; border-radius: 6px; padding: 4px 8px; } #myProfile .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--ssp-primary) !important; color: #fff !important; border: none !important; border-radius: 6px; } #myProfile .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(230,0,0,0.08) !important; color: var(--ssp-primary) !important; border: none !important; border-radius: 6px; } /* ========================================================================== LOGIN — Vodacom Tanzania dark + red diagonal, fibre network animation ========================================================================== */ body.loginPage { background: #25282B; min-height: 100vh; overflow-x: hidden; overflow-y: auto; position: relative; font-family: 'Open Sans', sans-serif; } /* Single scroll surface only. The body owns vertical scrolling when content exceeds 100vh; #login-page no longer sets its own overflow-y, which was creating a second nested scrollbar on top of the body's. */ #login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow-x: hidden; } /* Pin the floating language selector to the top-right of the viewport — globally, not scoped to login. The element is rendered with both classes (.language-selector-global.header-lang-wrap), and ssp-theme.css has a global .header-lang-wrap { position: relative } that would otherwise pull this floater into normal document flow at the bottom of . !important is used because the loaded order of theme stylesheets is environment-dependent (bundled vs debug-mode separate files) and we don't want the position regressing depending on which file wins specificity-by-source-order. */ .language-selector-global.header-lang-wrap, .language-selector-global { position: fixed !important; top: 35px !important; right: 10px !important; bottom: auto !important; left: auto !important; z-index: 9999 !important; } /* ── Dot grid background texture ── */ #login-page .login-dot-grid { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 28px 28px; z-index: 0; pointer-events: none; } /* ── Fibre network SVG background ── */ #login-page .login-bg-network { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.07; z-index: 0; pointer-events: none; } /* ── Diagonal red block ── */ #login-page .login-bg-red { position: absolute; top: 0; right: 0; width: 52%; height: 100%; background: #E60000; clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%); z-index: 1; pointer-events: none; } #login-page .login-bg-red-accent { position: absolute; top: 0; right: 0; width: 52%; height: 100%; background: linear-gradient(160deg, rgba(255,255,255,0.08) 0%, transparent 50%); clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%); z-index: 2; pointer-events: none; } /* ── Fibre light streaks at the diagonal edge ── */ #login-page .login-fibre-streak { position: absolute; z-index: 3; top: 0; bottom: 0; left: 47%; width: 3px; background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.9) 30%, rgba(255,255,255,0.6) 60%, transparent 100%); filter: blur(1px); animation: login-streakPulse 3s ease-in-out infinite; pointer-events: none; } #login-page .login-fibre-streak-2 { position: absolute; z-index: 3; top: 0; bottom: 0; left: 48.2%; width: 1.5px; background: linear-gradient(180deg, transparent 0%, rgba(230,0,0,0.7) 40%, rgba(230,0,0,0.4) 70%, transparent 100%); filter: blur(0.5px); animation: login-streakPulse 3s ease-in-out 0.8s infinite; pointer-events: none; } @keyframes login-streakPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* ── Gradient vignette ── */ #login-page .login-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%); z-index: 4; pointer-events: none; } /* ── Corner accents ── */ #login-page .login-corner-tl { position: absolute; top: 3vh; left: 3vw; width: 2vw; height: 2vw; border-top: 2px solid rgba(255,255,255,0.2); border-left: 2px solid rgba(255,255,255,0.2); z-index: 11; pointer-events: none; } #login-page .login-corner-bl { position: absolute; bottom: 3vh; left: 3vw; width: 2vw; height: 2vw; border-bottom: 2px solid rgba(255,255,255,0.2); border-left: 2px solid rgba(255,255,255,0.2); z-index: 11; pointer-events: none; } /* ── Animated visual on the red side (rotating rings + pulsing center) ── */ #login-page .login-visual { position: absolute; right: 12%; top: 50%; transform: translateY(-50%); width: 340px; height: 340px; z-index: 5; pointer-events: none; } #login-page .login-visual .ring-outer { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); animation: login-rotateSlow 30s linear infinite; } #login-page .login-visual .ring-outer::before { content: ''; position: absolute; top: -2px; left: 30%; width: 30%; height: 4px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); border-radius: 2px; } #login-page .login-visual .ring-mid { position: absolute; top: 15%; left: 15%; width: 70%; height: 70%; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); animation: login-rotateSlow 20s linear reverse infinite; } #login-page .login-visual .ring-mid::before { content: ''; position: absolute; top: -2px; left: 20%; width: 40%; height: 3px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent); border-radius: 2px; } #login-page .login-visual .ring-inner { position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); animation: login-rotateSlow 12s linear infinite; } #login-page .login-visual .center-glow { position: absolute; top: 35%; left: 35%; width: 30%; height: 30%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.25), rgba(255,255,255,0.05)); box-shadow: 0 0 40px rgba(255,255,255,0.15), 0 0 80px rgba(255,255,255,0.05); animation: login-centerPulse 3s ease-in-out infinite; } /* Orbiting nodes */ #login-page .login-visual .node { position: absolute; width: 8px; height: 8px; background: rgba(255,255,255,0.8); border-radius: 50%; box-shadow: 0 0 10px rgba(255,255,255,0.5); } #login-page .login-visual .node-1 { top: -4px; left: 50%; transform: translateX(-50%); } #login-page .login-visual .node-2 { top: 50%; right: -4px; transform: translateY(-50%); } #login-page .login-visual .node-3 { bottom: -4px; left: 50%; transform: translateX(-50%); } #login-page .login-visual .node-4 { top: 50%; left: -4px; transform: translateY(-50%); } #login-page .login-visual .node-5 { top: 15%; right: 15%; width: 6px; height: 6px; } #login-page .login-visual .node-6 { bottom: 15%; left: 15%; width: 6px; height: 6px; } @keyframes login-rotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes login-centerPulse { 0%, 100% { box-shadow: 0 0 40px rgba(255,255,255,0.15), 0 0 80px rgba(255,255,255,0.05); } 50% { box-shadow: 0 0 60px rgba(255,255,255,0.25), 0 0 120px rgba(255,255,255,0.1); } } /* ── Content wrapper ── */ #login-page .login-content { display: flex; align-items: flex-start; justify-content: center; width: 100%; min-height: 100vh; padding: 40px 0; position: relative; z-index: 10; } /* Center content vertically when enough room */ @media (min-height: 700px) { #login-page .login-content { align-items: center; padding: 0; } } /* ── Frosted glass card ── */ .login-glass-card { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.12); padding: 50px 40px; max-width: 460px; width: 100%; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); position: relative; z-index: 1; } /* Logo */ .login-glass-card .loginPage-logo { width: 100%; text-align: center; margin-bottom: 24px; } .login-glass-card .loginPage-logo img { max-width: 220px; width: 100%; height: auto; } /* Welcome text */ .login-glass-card .loginPage-welcometextBox h4 { font-size: 26px; font-weight: 700; color: #fff; text-align: center; margin-bottom: 6px; } .login-glass-card .loginPage-welcometextBox p { font-size: 14px; font-weight: 400; text-align: center; color: rgba(255, 255, 255, 0.55); margin-bottom: 30px; } /* Labels */ .login-glass-card .loginPage-labels { display: flex; justify-content: space-between; width: 100%; align-items: center; margin-bottom: 6px; } .login-glass-card .loginPage-labels label { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0; } /* Inputs */ .login-glass-card .input-group { margin-bottom: 18px; flex-wrap: wrap; } .login-glass-card input.form-control { width: 100%; max-width: 100%; height: 50px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; color: #fff; font-size: 15px; padding: 12px 20px; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; } .login-glass-card input.form-control::placeholder { color: rgba(255, 255, 255, 0.35); } .login-glass-card input.form-control:focus { background: rgba(255, 255, 255, 0.12); border-color: rgba(230, 0, 0, 0.6); box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.15); outline: none; color: #fff; } /* Forgot password link */ .login-glass-card .forgotPassword { font-size: 12px; color: rgba(255, 255, 255, 0.6); font-weight: 500; transition: color 0.2s; } .login-glass-card .forgotPassword:hover { color: #fff; } /* Password toggle — anchored to the input, not the group, so error messages below don't shift it */ .login-glass-card .input-group { position: relative; } .login-glass-card .input-group-append { position: absolute; right: 12px; top: 65px; /* matches input height + label-row offset */ transform: translateY(-100%); z-index: 5; } .login-glass-card .hidePasswordIconStyle, .login-glass-card .showPasswordIconStyle { /* Override the PNG-based icons with inline SVG eye icons */ background-color: transparent !important; border: none !important; width: 36px; height: 36px; padding: 6px; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; filter: none; background-size: 20px 20px; background-position: center; background-repeat: no-repeat; } .login-glass-card .hidePasswordIconStyle { /* Eye-off icon — white SVG for dark glass background */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E"); } .login-glass-card .showPasswordIconStyle { /* Eye icon — white SVG for dark glass background */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); } .login-glass-card .hidePasswordIconStyle:hover, .login-glass-card .showPasswordIconStyle:hover { opacity: 1; } /* Change-password / profile screens use the same modern inline-SVG eye as the login glass card so the password-visibility affordance is consistent across the app. The login card has a dark glass background so the SVG stroke there is white; the profile area has a light background, so this block re-renders the same icon shapes with a dark stroke (#25282B) — otherwise the icon would be invisible against the light card. Without this override .profile-input-wrap falls back to the legacy .hidePasswordIconStyle PNG (eyeClosed.png, ~77px wide) which is the green/oversized eye reported in QA. */ .profile-input-wrap .hidePasswordIconStyle, .profile-input-wrap .showPasswordIconStyle { /* !important on size + background to guarantee the legacy PNG rule further down Style.css (.hidePasswordIconStyle at 77px white-bg) loses regardless of source-order cascading or any minifier-induced quirks in the bundled output. */ background-color: transparent !important; border: none !important; width: 36px !important; height: 36px !important; padding: 6px !important; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; filter: none !important; background-size: 20px 20px !important; background-position: center !important; background-repeat: no-repeat !important; } .profile-input-wrap .hidePasswordIconStyle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") !important; } .profile-input-wrap .showPasswordIconStyle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important; } .profile-input-wrap .hidePasswordIconStyle:hover, .profile-input-wrap .showPasswordIconStyle:hover { opacity: 1; } /* Anchor the eye control inside its input wrapper. The legacy PNG used a 77px-wide span that the parent's flex layout positioned awkwardly; we need the new 36px control absolutely positioned so it sits flush at the right of the input regardless of the input's width. */ .profile-input-wrap { position: relative; } .profile-input-wrap .hidePasswordIconStyle, .profile-input-wrap .showPasswordIconStyle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 2; } /* Error text */ .login-glass-card .text-danger, .login-glass-card font[color="red"] { color: #E60000 !important; } .login-glass-card #statusMessage { color: #E60000 !important; } /* Validation messages */ .login-glass-card span[style="color:red"] { color: #E60000 !important; } /* Login button */ .login-glass-card .button-login { text-align: center; margin-top: 8px; } .login-glass-card .btn-login, .login-glass-card .btn-green { width: 100%; padding: 14px 40px; background: #E60000; border-radius: 10px; color: #fff; font-size: 16px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 15px rgba(230, 0, 0, 0.4); transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; } .login-glass-card .btn-login:hover, .login-glass-card .btn-green:hover { background: #E60000; box-shadow: 0 6px 25px rgba(230, 0, 0, 0.5); transform: translateY(-2px); } .login-glass-card .btn-login:active, .login-glass-card .btn-green:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(230, 0, 0, 0.3); } /* Hide old left-panel elements if any remain */ .login-registration-bgd { display: none !important; } /* Hide loginPage-rightsideBox wrapper — content moved to glass card */ .loginPage-rightsideBox { display: contents; } .loginPage-rightSide-content { display: contents; } /* Registration panel (inside glass card) */ .login-glass-card ul#myTab2 { border: 0; justify-content: center; margin-bottom: 20px; display: flex; gap: 8px; } .login-glass-card ul#myTab2 li a { border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 6px 24px; color: rgba(255, 255, 255, 0.7); font-size: 14px; transition: all 0.2s; } .login-glass-card ul#myTab2 .nav-link.active { background: #E60000; color: #fff; border-color: #E60000; } /* Non-scoped fallbacks for button-login and btn-login outside glass card */ .button-login { text-align: center; } .btn-login { padding: 14px 40px; background: #E60000; border-radius: 10px; color: #fff; font-size: 16px; font-weight: 700; border: none; cursor: pointer; box-shadow: 0 4px 15px rgba(230, 0, 0, 0.4); transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; } .btn-login:hover { background: #E60000; box-shadow: 0 6px 25px rgba(230, 0, 0, 0.5); transform: translateY(-2px); } .btn-login:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(230, 0, 0, 0.3); } .purchase-wrapper .purchase-box-padding { padding: 30px 20px 30px 20px; } .filterDiv { display: none; /* Hidden by default */ } /* The "show" class is added to the filtered elements */ .filterDiv.show { display: block; } /* Style the filter buttons (scoped to filter container) */ #myBtnContainer .btn { border: none; outline: none; background-color: #fff; cursor: pointer; height: 40px; width: 40px; } #myBtnContainer .btn:hover { background-color: #fff; } #myBtnContainer { width: 272px; border: 1px solid var(--ssp-bg-subtle) } #myBtnContainer button { display: block; width: 270px; text-align: left; font-size: 16px; color: #4A4D4E; background-color: #fff; border-radius: 0; border-bottom: 1px solid var(--ssp-bg-subtle) } #myBtnContainer button.active { background-color: #FFFFFF; border-left: 4px solid #e60000; font-size: 16px; color: #e60000; font-weight: bold; } .btn:focus { outline: 0; box-shadow: none; } .filterproductsBox h4 { font-size: 18px; font-weight: bold; color: #e60000; margin-top: 40px; margin-bottom: 30px; } .filterproductsBox p { font-size: 14px; color: #4A4D4E; line-height: 24px; } .filterDiv { text-align: center; border: 1px solid var(--ssp-border); margin-bottom: 40px; padding-top: 30px; padding-bottom: 40px; padding-left: 30px; padding-right: 30px; height: 375px; } .filterDiv .smartBox { margin-bottom: 30px; } .filterDiv .smartBox span { font-size: 39px; background: #EB9700; padding: 15px; border-radius: 50%; font-weight: bold; color: #fff; } .filterproductsSpecialBox h5 { font-weight: bold; font-size: 14px; color: #e60000; line-height: 14px; margin-bottom: 30px; } .filterproductsSpecialBox p { font-size: 14px; color: #4A4D4E; margin-bottom: 5px; position: relative; padding-left: 60px; text-align: left; line-height: 18px; } .filter-rightSide-textBox { margin-bottom: 30px; } .filter-smart-button { width: 128px; height: 34px; background: #e60000; line-height: 34px; border-radius: 5px; text-align: center; margin: 0 auto; color: #fff; font-weight: bold; font-size: 14px; } .filterproductsSpecialBox .filter-rightSide-textBox p::before { background-image: url(../img/specialBox-nikeIcon.png); width: 12px; height: 11px; display: block; position: absolute; left: 10px; content: ''; top: 6px; } .filter-box { margin-left: 30px; margin-bottom: 30px; } .purchase-leftSide-priceSliderBox, .purchase-leftSide-list { width: 272px; border: 1px solid var(--ssp-border); border-radius: 5px; } .purchase-checkBox-title { display: block; width: 270px; text-align: left; font-size: 16px; font-weight: bold; color: #e60000; padding: 14px 20px; background: #FFFFFF; border-left: 4px solid #e60000; } .purchase-leftSide-checkBox { display: block; width: 270px; text-align: left; font-size: 16px; color: #4A4D4E; background-color: #fff; border-radius: 0; } .purchase-leftSide-priceSliderBox .card-body, .purchase-leftSide-list .card-body { border: 0; } .purchase-leftSide-list .card-body label { font-size: 12px; color: #25282B; } .purchase-leftSide-list .card-body .form-check { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px; } .purchase-leftSide-list .card-body .form-check input { margin-top: 0; } .purchase-leftSide-filter1Box, .purchase-leftSide-priceSliderBox { margin-bottom: 20px; } .show-more-products { text-align: center; } .show-more-products a { padding: 16px 36px; text-align: center; margin: 0 auto; background: #A8B400; color: #fff; border-radius: 5px; } /* purchase titleBox - handled by modern override above */ .range-slider { position: relative; height: 80px; } .irs-min, .irs-max { visibility: hidden; display: none; } .irs--round .irs-bar { background-color: #e60000; } .irs--round .irs-handle { top: 33px; width: 10px; height: 10px; border: 4px solid #e60000; background-color: #e60000; border-radius: 24px; box-shadow: none; } .irs--round .irs-from:before, .irs--round .irs-to:before { display: none; } .irs--round .irs-from, .irs--round .irs-to { top: 50px; background-color: transparent; color: #000; } .irs--round .irs-from::after { content: '€'; visibility: visible; display: block; position: absolute; padding-left: 25px; top: 3px; } .irs--round .irs-to::after { content: '€'; visibility: visible; display: block; position: absolute; padding-left: 25px; top: 3px; } @media (max-width: 1200px) { .purchase-checkBox-title { width: 200px; } .purchase-leftSide-priceSliderBox, .purchase-leftSide-list { width: 202px; } #myBtnContainer button { width: 200px; } #myBtnContainer { width: 202px; } .filterproductsSpecialBox p { padding-left: 40px; } .filterDiv { height: auto; padding-left: 10px; padding-right: 10px; } .filterproductsBox h4 { margin-bottom: 35px; } } @media (max-width: 1024px) { #billing .billing-wrapper .billing-leftSideBox ul li, #billing .billing-wrapper .billing-monthBox select { max-width: 100%; } #billing .billing-wrapper .billing-box-padding { padding: 40px; } #billing .billing-wrapper .tab-content { width: 100%; margin-left: 0; margin-top: 50px; } #billing .billing-wrapper .billing-iconsBox { flex-direction: row; margin-top: 30px; } } @media (max-width: 991px) { .login-glass-card { margin: 20px; padding: 40px 30px; } /* Hide diagonal red and visual on small screens — full dark bg */ #login-page .login-bg-red, #login-page .login-bg-red-accent, #login-page .login-fibre-streak, #login-page .login-fibre-streak-2, #login-page .login-visual { display: none; } #myProducts .myProducts-wrapper .myProducts-rightSide-title { margin-top: 30px; } #myProducts .myProducts-wrapper .myproducts-rightSide-icons { justify-content: center; } #myProducts .myProducts-wrapper .myproducts-rightSide-icons a { margin-right: 50px; } #myProfile .myProfilewrapper ul.nav-tabs { flex-direction: row; justify-content: center; border-right: none; border-bottom: 1px solid #4A4D4E; gap: 0; } #myProfile .myProfilewrapper ul.nav-tabs li a { border-radius: 8px 8px 0 0; padding: 10px 16px; text-align: center; } #myProfile .myProfilewrapper .nav-tabs .nav-link.active { border-left: none; border-bottom: 3px solid var(--ssp-primary); padding-left: 16px; } #myProducts .myProducts-wrapper .myProducts-box-padding { padding: 40px; } .filterproductsBox h4 { margin-bottom: 30px; } .purchase-leftSide-scrollBox { display: flex; justify-content: space-between; } .purchase-leftSide-checkBox, .purchase-leftSide-list, .purchase-checkBox-title { width: auto; } .filter-box { margin-left: 0; } } @media (max-width: 768px) { #myProducts .myProducts-wrapper .myproducts-rightSide-icons a { margin-right: 20px; } #myProfile .myProfilewrapper .myProfile-history-checkboxes { display: block; } #myProfile .myProfilewrapper .myProfile-history-checkboxes .myProfile-history-checkboxes-textBox img { float: none; margin-bottom: 20px; margin-right: 0; } #myProfile .myProfilewrapper .form-check { padding-right: 25px; } #myProfile .myProfilewrapper .form-control-lg { text-align: center; margin-right: 15px; } .myProfile-history-checkboxes-textBox { text-align: center; } #myProfile .myProfilewrapper .myProfile-history-checkboxes .myProfile-history-checkboxes-textBox p.secondp { width: 100%; margin-bottom: 30px; } #myProfile .myProfilewrapper .myProfile-history-checkboxes .myProfile-history-checkboxes-status h4 { text-align: center; } #myProducts .myProducts-wrapper .myProducts-rightSide-title p { width: auto; line-height: 28px; } #myProducts .myProducts-wrapper .myproducts-rightSide-icons { padding: 0; } .purchase-leftSide-scrollBox { display: block; margin-bottom: 50px; } .purchase-leftSide-priceSliderBox { width: auto; } } @media (max-width: 480px) { #billing .billing-wrapper .button-pay-billing span { display: block; margin-bottom: 30px; } .login-glass-card { margin: 16px; padding: 30px 20px; border-radius: 16px; } } .has-error .help-block { color: red; } .has-danger .help-block { color: red; } .has-error .form-control, .has-error .form-control:active, .has-error .form-control:focus, .has-error .form-control:active:focus { border-color: red; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .has-error .required { background-color: red; } .required { margin-left: 5px; width: 6px; height: 6px; background: #00B0CA; display: inline-block; vertical-align: middle; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; } /* mobile nav */ #myAccounts, #billing, #myProducts, #myProfile, #purchase { position: relative; overflow: hidden; } .nav-icon { display: none; } .responsive-nav { position: absolute; right: -320px; top: 80px; width: 300px; background: #fff; height: 100vh; z-index: 2; transition: 0.2s linear all; overflow: hidden; } .responsive-nav.openned { right: 0; } .responsive-nav .header-leftSide .header-welcomeText p { font-size: 16px; color: #e60000; line-height: 20px; margin-bottom: 0; font-weight: bold; } .responsive-nav .header-logo { background-image: url(../Content/img/Vodacom-Logo.svg); width: 135px; height: 53px; margin-right: 40px; background-repeat: no-repeat; margin: 0 auto; margin-bottom: 30px; } .responsive-nav .header-rightSide .header-datetime-text span { font-size: 12px; line-height: 20px; color: #000; font-weight: bold; margin-bottom: 30px; } .responsive-nav .header-welcomeText, .responsive-nav .header-datetime-text { margin-bottom: 30px; text-align: center; } .responsive-nav .header-rightSide .header-supportIcon { background-image: url(../Content/img/headset-icon.png); width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; } .responsive-nav .header-rightSide .header-envelopIcon { background-image: url(../Content/img/envelop.png); width: 26px; height: 26px; margin-right: 16px; background-repeat: no-repeat; background-size: contain; position: relative; display: inline-block; } .responsive-nav .header-rightSide .header-envelopIcon:hover { filter: brightness(0) saturate(100%) invert(12%) sepia(97%) saturate(6264%) hue-rotate(358deg) brightness(94%) contrast(112%); } .responsive-nav .header-rightSide .header-icons { display: flex; justify-content: center; align-items: center; align-self: center; gap: 8px; } .responsive-nav .header-rightSide .header-logoutIcon { background-image: url(../Content/img/logout-icon.png); width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; } .responsive-nav .header-rightSide .header-homeIcon { background-image: url(../Content/img/billing-homeIcon.png); width: 24px; height: 24px; margin-right: 16px; background-repeat: no-repeat; background-size: contain; } .nav-icon { width: 30px; height: 25px; } .nav-icon span { display: block; width: 100%; height: 5px; border-radius: 3px; margin-bottom: 5px; background: #e60000; } #nav-icon span:last-of-type { margin-bottom: 0; } @media (max-width: 1024px) { #myAccounts, #billing, #myProducts, #myProfile, #purchase { overflow-x: hidden; overflow-y: auto; } .filter-box { margin-bottom: 0; } } @media (max-width: 991px) { .nav-icon { display: block; } #header .header-leftSide, #header .header-rightSide { display: none; } .filter-box { margin-top: 30px; } } .BtnGradient { background: #820000; background: linear-gradient(0deg, #820000 12%, #E60000 70%); border: 2px solid rgba(255, 255, 255, 0.4); padding: 10px 20px; border-radius: 5px; color: white; cursor: pointer; transition: box-shadow 0.3s ease, background 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 -2px 4px rgba(255, 255, 255, 0.2) inset; } .BtnGradientSecondary { background: #E60000; background: linear-gradient(0deg, #E60000 12%, #E60000 70%); } /* Button Active State */ .BtnGradient:active, .BtnGradientSecondary:active { background: #820000; background: linear-gradient(0deg, #820000 12%, #820000 70%); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -2px 4px rgba(255, 255, 255, 0.2) inset; } /* Button Hover State for better effect */ .BtnGradient:hover, .BtnGradientSecondary:hover { box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15), 0 -2px 4px rgba(255, 255, 255, 0.2) inset; } .numberCircle { background-color: var(--ssp-primary); border-radius: 50%; color: #fff; padding: 0.4rem; width: 50%; } /*admin slider section*/ .Slkbtn { width: 35px; height: 35px; border-radius: 52%; border: 3px solid black; background-size: contain; } .Slkbtn:hover { border-color: var(--ssp-primary); transform: scale(1.2); } .btnNavNext { background-image: url('img/nextbtn.png'); /*background-image: url(../../../../Content/img/nextBtn.png);*/ position: relative; left: 97%; bottom: 101px; z-index: 10; } .btnNavPrev { background-image: url('img/prevbtn.png'); /*background-image: url(../../../../Content/img/prevBtn.png);*/ position: relative; top: 100px; z-index: 10; } /*admin slider section*/ /* peach payment card widget slider */ .wpwl-form { background: var(--ssp-bg-subtle); margin-top: 2rem; } .wpwl-label-brand { display: none } .wpwl-form-card { background: var(--ssp-bg-subtle); border: 0px solid transparent } .wpwl-form-card { background-color: white; } .wpwl-control, input.wpwl-control { background: white; border: 1px solid #4A4D4E; box-shadow: none; border-radius: 0px; font-family: "ff-good-headline-web-pro-con", "Pathway Gothic One", sans-serif; text-transform: none; padding: 10px; font-size: 18px; height: 50px; } .input-text:focus, input[type=text]:focus, input[type=tel]:focus, input[type=url]:focus, input[type=password]:focus, input[type=search]:focus, textarea:focus { background-color: white; } .wpwl-brand-SOFORTUEBERWEISUNG, .wpwl-brand-GIROPAY { cursor: pointer } .wpwl-brand, .wpwl-img { margin: 0 0 0 auto; } /* peach payment card widget slider */ /*payment status page stling*/ .filtered { filter: hue-rotate(-100deg) saturate(2); } h4#text:first-letter { text-transform: uppercase; } .Bcg { /*background-image: url("../../Content/img/welcome-bgd.png");*/ background-image: url('img/welcome-bgd.png'); } /*payment status page stling*/ /* payment option */ .demoStyle { position: relative; top: -170px; left: 100px; background-color: #E60000; } /* payment option */ .login-logo { width: 500px !important; /*css style change*/ height: 200px !important; /*css style change*/ padding: 20px; /*css style change*/ } .pagerHist > a { background-color: #007C92; border: none; color: white; padding: 7px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 3px; border-radius: 4px; } .selectedPageNumber { background-color: black; color: white; border-radius: 50%; padding: 5px 10px; margin-left: 10px; margin-right: 10px; text-align: center; /* Center the text horizontally */ font-weight: bold; /* Make the text bold */ display: flex; justify-content: center; /* Center the text horizontally */ align-items: center; /* Center the text vertically */ } .backgroundblock { position: fixed; top: 0; left: 0; background-color: black; z-index: 99; opacity: 1; filter: opacity(80); min-height: 0%; width: 0%; } .loadingscreen { font-family: Arial; font-size: 15pt; opacity: 0.8; width: 100%; height: 100%; display: none; position: fixed; background-color: White; padding-top: 10%; z-index: 999; } .loadingscreen img { width: 80px; height: 80px; } .showPasswordIconStyle { background-image: url(../Content/img/eyeOpen.png); width: 77px; height: auto; background-position: center; background-repeat: no-repeat; text-align: center; padding: 18px 20px; background-color: #fff; border: 1px solid #4A4D4E; border-radius: .25rem; } .hidePasswordIconStyle { background-image: url(../Content/img/eyeClosed.png); width: 77px; height: auto; background-position: center; background-repeat: no-repeat; text-align: center; padding: 18px 20px; background-color: #fff; border: 1px solid #4A4D4E; border-radius: .25rem; } .EditNotAllowed { pointer-events: none; } .userCreationTitle { border-bottom: 6px solid #e60000; padding-bottom: 15px; padding-left: 1.7rem; padding-right: 1.7rem; font-weight: bold; line-height: 14px; font-size: 1rem; margin-top: .8rem; margin-bottom: 2.3rem; display: inline-block; } .btn-signup { padding: 8px 16px; background: #820000; border-radius: 5px; color: #fff; font-size: 16px; font-weight: bold; } .secondHeading{ text-align: center; margin: 25px 0; font-size: 20px; font-weight: bold; line-height: 14px; color: #000; } .inboxImg { width: 100px; height: 100px; object-fit: contain; } .btn-signup-outline { padding: 10px 20px; border: 2px solid #820000; border-radius: 8px; color: #820000; background: transparent; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.3s ease; cursor: pointer; } /* Hover effect */ .btn-signup-outline:hover { background: #820000; color: #fff; box-shadow: 0 4px 10px rgba(168, 180, 0, 0.4); transform: translateY(-1px); } /* Active click effect */ .btn-signup-outline:active { transform: translateY(1px); box-shadow: 0 2px 5px rgba(168, 180, 0, 0.3); } .switchToggle { position: relative; display: inline-block; width: 60px; height: 34px; } .switchToggle input { display: none; } .sliderToggle { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4A4D4E; transition: .4s; } .sliderToggle:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; } /* include generated hidden field here */ input[type="checkbox"]:checked + input[type="hidden"] + .sliderToggle, input[type="checkbox"]:checked + .sliderToggle { background-color: #820000; } /* include generated hidden field here */ input[type="checkbox"] + input[type="hidden"] + .sliderMode, input[type="checkbox"] + .sliderMode { background-color: #E60000; } /* include generated hidden field here */ input[type="checkbox"]:focus + input[type="hidden"] + .sliderToggle, input[type="checkbox"]:focus + .sliderToggle { box-shadow: 0 0 1px var(--ssp-primary); } /* include generated hidden field here */ input[type="checkbox"]:checked + input[type="hidden"] + .sliderToggle:before, input[type="checkbox"]:checked + .sliderToggle:before { transform: translateX(26px); } /* Rounded sliders */ .sliderToggle.roundToggle { border-radius: 34px; } .sliderToggle.roundToggle:before { border-radius: 50%; } .searchResearch { margin-top: -5px; margin-left: -5px; height: 40px; width: 40px; } .scrollit { overflow: scroll; height: 100px; } /* Define the keyframes for the shake animation */ @keyframes shake { 0% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } /* Style for the box element */ .box { display: inline-block; padding: 20px; font-size: 24px; background-color: var(--ssp-bg-subtle); border: 1px solid var(--ssp-border); border-radius: 5px; margin-bottom: 20px; } .slick-next.slick-arrow:hover::before { color: #820000 !important; } #headerNew { z-index: 997; transition: all 0.5s; padding: 8px 0; background-image: linear-gradient(#A8B400, #fff, #00B0CA); height: 80px; display: flex; margin-bottom: 60px; } /* Shake animation class */ .shake { animation: shake 0.5s ease-in-out; } #headerNew { z-index: 997; transition: all 0.5s; padding: 8px 0; background-image: linear-gradient(#A8B400, #fff, #00B0CA); height: 80px; display: flex; margin-bottom: 60px; } .retryMessage { font-size: 16px !important; } .btn-cancel { background: linear-gradient(135deg, #E60000, #820000); color: #fff !important; border-radius: 5px; padding: 10px 20px; font-weight: bold; border: none; cursor: pointer; box-shadow: 0 4px 8px rgba(230, 0, 0, 0.4); transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } /* Hover */ .btn-cancel:hover { background: linear-gradient(135deg, #E60000, #820000); box-shadow: 0 6px 12px rgba(230, 0, 0, 0.5); transform: translateY(-2px); } /* Active */ .btn-cancel:active { transform: translateY(1px); box-shadow: 0 3px 6px rgba(230, 0, 0, 0.4); } /* ========================================================== SUBSCRIPTIONS PAGE — Modern Restyle ========================================================== */ /* Wrapper cleanup */ #myProducts .myProducts-wrapper { padding: 0; } #myProducts .myProducts-wrapper .container { max-width: 1200px; } /* Left sidebar — clean card look */ .borderBox { border: none !important; padding: 0 !important; background: transparent; } #myProducts .myProducts-wrapper .myProducts-leftSide-scrollBox { height: auto; max-height: 420px; overflow-y: auto; padding: 0; scrollbar-width: thin; scrollbar-color: var(--ssp-primary) var(--ssp-bg-subtle); } #myProducts .myProducts-wrapper .myProducts-leftSide-scrollBox::-webkit-scrollbar { width: 4px; } #myProducts .myProducts-wrapper .myProducts-leftSide-scrollBox::-webkit-scrollbar-thumb { background: var(--ssp-primary); border-radius: 4px; } /* Subscription category headers */ #myProducts .myProducts-wrapper .myProducts-leftSide-boxTitle { border-left: 3px solid var(--ssp-primary); background: var(--ssp-bg-subtle); padding: 10px 16px; border-radius: 0 6px 6px 0; margin-bottom: 4px; } #myProducts .myProducts-wrapper .myProducts-leftSide-boxTitle p { font-size: 12px; font-weight: 700; color: #4A4D4E; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; } /* Subscription list items */ #myProducts .myProducts-wrapper .myProducts-leftSide-scrollBox ul { margin: 0 0 12px 0; padding: 0; list-style: none; } #myProducts .myProducts-wrapper .myProducts-leftSide-scrollBox ul li { margin-bottom: 2px; font-size: 14px; line-height: 1.4; } .sub-link { display: block; padding: 10px 16px; color: #25282B !important; border-radius: 6px; transition: all 0.15s ease; font-weight: 500; } .sub-link:hover { background: rgba(var(--ssp-primary-rgb), 0.06); color: var(--ssp-primary) !important; } /* Right side detail panel */ .rightSide-padding { padding: 0 0 0 24px !important; } #myProducts .myProducts-wrapper .myProducts-rightSide-title { margin-top: 0; margin-bottom: 8px; } #myProducts .myProducts-wrapper .myProducts-rightSide-title p { font-size: 18px; font-weight: 700; color: #25282B; margin: 0; } #myProducts .myProducts-wrapper .myProducts-rightSide-title hr { border-top: 2px solid var(--ssp-primary); opacity: 0.3; margin: 12px 0; } .myproducts-rightSide-underTitleLine { display: none; } /* Data rows — modern key-value layout */ .data-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--ssp-bg-subtle); gap: 16px; } .data-row:last-child { border-bottom: none; } .data-row .data-label { font-size: 13px; font-weight: 700; color: #25282B; text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0; min-width: 140px; } .data-row .data-value { font-size: 14px; font-weight: 500; color: #4A4D4E; text-align: right; } /* Status badges */ .data-row .badge { font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 20px; letter-spacing: 0.3px; } /* View Products button */ .button-buyMoreProducts { background: var(--ssp-primary); border-radius: 8px; padding: 0 24px; height: 44px; max-width: 200px; box-shadow: 0 2px 8px rgba(var(--ssp-primary-rgb), 0.3); float: right; margin: 24px 0; } .button-buyMoreProducts:hover { background: var(--ssp-primary-dark); } .button-buyMoreProducts a { font-size: 13px; letter-spacing: 0.3px; } /* Reactivate button */ #ReactivateSub, .reactivate-btn { background: #A8B400; border-color: #A8B400; border-radius: 6px; padding: 5px 14px; font-size: 12px; font-weight: 600; } #ReactivateSub:hover, .reactivate-btn:hover { background: #A8B400; border-color: #A8B400; } /* Floating action button — rethemed */ .floating-btn { width: 56px; height: 56px; background: var(--ssp-primary) !important; box-shadow: 0 4px 16px rgba(var(--ssp-primary-rgb), 0.4); } .floating-btn:hover { box-shadow: 0 6px 24px rgba(var(--ssp-primary-rgb), 0.5); } .option-btn:hover { border-color: var(--ssp-primary); } .option-btn.option-1:hover { border-color: var(--ssp-primary); background: rgba(230, 0, 0, 0.06); } /* Search bar refinements */ .mod-search { gap: 6px; } .mod-search .form-control { height: 42px; border-radius: 8px; } .mod-search .btn { height: 42px; width: 42px; display: flex; align-items: center; justify-content: center; border-radius: 8px; padding: 0; flex-shrink: 0; } /* No subscriptions message */ #myProducts .d-flex.justify-content-center.text-danger { color: #4A4D4E !important; font-size: 14px; padding: 40px 0; } /* ========================================================== SUBSCRIPTIONS PAGE — Mobile Responsive ========================================================== */ @media (max-width: 991px) { /* Stack columns vertically */ #myProducts .col-lg-5.borderBox { border: none !important; padding: 0 !important; margin-bottom: 16px; } #myProducts .col-lg-7.rightSide-padding { padding: 0 !important; } .rightSide-padding { padding: 0 !important; } #myProducts .myProducts-wrapper .myProducts-box-padding { padding: 16px !important; } #myProducts .myProducts-wrapper .myProducts-rightSide-title { margin-top: 16px; } /* Subscription list collapses to horizontal scroll or accordion feel */ #myProducts .myProducts-wrapper .myProducts-leftSide-scrollBox { max-height: 250px; } } @media (max-width: 767px) { /* Full-width on mobile */ #myProducts .myProducts-wrapper .myProducts-box-padding { padding: 12px !important; border-radius: 10px; } .titleBox { padding: 0 0 12px 0 !important; } .titleBox p { font-size: 18px !important; } .titleBox a { width: 32px; height: 32px; border-radius: 8px; } /* Search bar full width */ .mod-search { margin-bottom: 12px; } .mod-search .form-control { font-size: 14px; height: 40px; } .mod-search .btn { height: 40px; width: 40px; } /* Left sidebar subscription list */ #myProducts .myProducts-wrapper .myProducts-leftSide-scrollBox { max-height: 200px; margin-bottom: 8px; } .sub-link { padding: 10px 14px; font-size: 13px; } /* Data rows become stacked on small screens */ .data-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 0; } .data-row .data-label { min-width: 0; font-size: 12px; } .data-row .data-value { text-align: left; font-size: 14px; width: 100%; } /* View Products button */ .button-buyMoreProducts { float: none; max-width: 100%; width: 100%; margin: 16px 0; } /* Floating button */ .floating-btn-container { bottom: 20px; right: 16px; } .floating-btn { width: 50px; height: 50px; font-size: 20px; } .option-btn { width: 180px; padding: 10px 14px; font-size: 13px; } .options-menu { bottom: 65px; } } @media (max-width: 480px) { #myProducts .myProducts-wrapper .myProducts-box-padding { padding: 10px !important; } .data-row .data-label { font-size: 11px; } .data-row .data-value { font-size: 13px; } .floating-btn-container { bottom: 16px; right: 12px; } } /* MPesa PayBill "payment pending" banner on HomePage — set via TempData. */ .hp-paybill-banner { margin: 16px 16px 0; border-radius: 8px; font-weight: 600; } .cardCustStyle { border: 2px double green; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); } .MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position: relative; } .MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; } .MultiCarousel .MultiCarousel-inner .item { float: left; } .MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding: 10px; margin: 10px; background: var(--ssp-bg-subtle); color: #4A4D4E; } .MultiCarousel .leftLst, .MultiCarousel .rightLst { position: absolute; border-radius: 50%; top: calc(50% - 20px); } .MultiCarousel .leftLst { left: 0; } .MultiCarousel .rightLst { right: 0; } .MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background: #4A4D4E; } .triangle-left { width: 0; height: 0; border-top: 25px solid transparent; border-right: 50px solid #4A4D4E; border-bottom: 25px solid transparent; } .shape { border-style: solid; border-top: 25px solid transparent; border-right: 50px solid #4A4D4E; border-bottom: 25px solid transparent; /* padding: 8px;*/ padding-right: 8px; float: right; height: 0px; width: 0px; /*-ms-transform: rotate(360deg);*/ /* IE 9 */ /*-o-transform: rotate(360deg);*/ /* Opera 10.5 */ /*-webkit-transform: rotate(360deg);*/ /* Safari and Chrome */ /*transform: rotate(360deg);*/ } .listing { background: #fff; border: 1px solid var(--ssp-border); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); margin: 15px 0; overflow: hidden; } .listing:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: rotate scale(1.1); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; cursor: pointer; } /*process checkout page*/ .shape { border-color: rgba(255,255,255,0) #E60000 rgba(255,255,255,0) rgba(255,255,255,0); /*-ms-transform: rotate(30deg);*/ /* IE 9 */ /*-o-transform: rotate(360deg);*/ /* Opera 10.5 */ /*-webkit-transform: rotate(30deg);*/ /* Safari and Chrome */ /*transform: rotate(90deg);*/ } .listing-radius { border-radius: 7px; } .listing-danger { border-color: #E60000; } .listing-danger .shape { border-color: transparent #E60000 transparent transparent; } .listing-success { border-color: #A8B400; } .listing-success .shape { border-color: transparent #A8B400 transparent transparent; } .listing-default { border-color: #4A4D4E; } .listing-default .shape { border-color: transparent #4A4D4E transparent transparent; } .listing-primary { border-color: #00B0CA; } .listing-primary .shape { border-color: transparent #007C92 transparent transparent; } .listing-info { border-color: #00B0CA; } .listing-info .shape { border-color: transparent #00B0CA transparent transparent; } .listing-warning { border-color: #EB9700; } .listing-warning .shape { border-color: transparent #EB9700 transparent transparent; } .shape-text { color: #fff; font-size: 12px; font-weight: bold; position: relative; right: -30px; top: -10px; white-space: nowrap; /*-ms-transform: rotate(30deg);*/ /* IE 9 */ /*-o-transform: rotate(360deg);*/ /* Opera 10.5 */ /*-webkit-transform: rotate(30deg);*/ /* Safari and Chrome */ /*transform: rotate(30deg);*/ } .bundleWit { position: relative; right: -45px; top: 0px; white-space: nowrap; } .hotBundle { position: relative; right: -40px; top: -10px; white-space: nowrap; } .listing-content { /*padding: 0 20px 10px;*/ margin: 0 0 24px 0; padding-top: 35px; } section.pricingDetails { /* background: #00B0CA; background: linear-gradient(to right, #A8B400, #A8B400);*/ background-image: url("../Content/img/PurchaseOptions-BG2.PNG"); object-fit: cover; /*object-position: 15% 30%;*/ background-size: 100% 100%; background-position-y: -12%; background-repeat: no-repeat; /*style ="background-color: #A8B400;"*/ } /*process checkout page*/ /*purchase details*/ section.pricing { /* background: #00B0CA; background: linear-gradient(to right, #A8B400, #A8B400);*/ background-image: url("../Content/img/PurchaseOptions-BG.PNG"); object-fit: cover; /*object-position: 15% 30%;*/ background-size: 100% 100%; background-position-y: -12%; background-repeat: no-repeat; } .pricing .card { border: none; border-radius: 1rem; transition: all 0.2s; box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1); } .pricing hr { margin: 1.5rem 0; } .pricing .card-title { margin: 0.5rem 0; font-size: 0.9rem; letter-spacing: .1rem; font-weight: bold; } .pricing .card-price { font-size: 3rem; margin: 0; } .pricing .card-price .period { font-size: 0.8rem; } .pricing ul li { margin-bottom: 1rem; } .pricing .text-muted { opacity: 0.7; } .pricing .btn { font-size: 80%; border-radius: 5rem; letter-spacing: .1rem; font-weight: bold; padding: 1rem; opacity: 0.7; transition: all 0.2s; } /* Hover Effects on Card */ @media (min-width: 992px) { .pricing .card:hover { margin-top: -.25rem; margin-bottom: .25rem; box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3); } .pricing .card:hover .btn { opacity: 1; } } /*purchase details*/ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4A4D4E; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; } /* include generated hidden field here */ input[type="checkbox"]:checked + input[type="hidden"] + .slider, input[type="checkbox"]:checked + .slider { background-color: #e60000; } /* include generated hidden field here */ input[type="checkbox"] + input[type="hidden"] + .sliderMode, input[type="checkbox"] + .sliderMode { background-color: #E60000; } /* include generated hidden field here */ input[type="checkbox"]:focus + input[type="hidden"] + .slider, input[type="checkbox"]:focus + .slider { box-shadow: 0 0 1px #e60000; } /* include generated hidden field here */ input[type="checkbox"]:checked + input[type="hidden"] + .slider:before, input[type="checkbox"]:checked + .slider:before { transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } /* ============================================================ SSP Theme - Unified Stylesheet Consolidates Style.css, purchaseStyle.css, paymentGatewaySwitch.css ============================================================ */ /* ============================================================ 1. CSS Custom Properties (Theme Variables) ============================================================ */ :root { /* Primary brand colors - Vodafone Red */ --ssp-primary: #E60000; /* Vodafone Red */ --ssp-primary-dark: #820000; /* Gradient dark - hovers/pressed */ --ssp-primary-light: #E60000; /* no lighter red in palette -> same red */ --ssp-primary-rgb: 230, 0, 0; --ssp-gradient: linear-gradient(90deg, #820000 0%, #E60000 100%); /* Neutrals - only two greys allowed (Slate Grey + Vodafone Grey) */ --ssp-slate: #25282B; /* Slate Grey - headings / darkest text */ --ssp-grey: #4A4D4E; /* Vodafone Grey - body / muted text */ --ssp-slate-rgb: 37, 40, 43; --ssp-grey-rgb: 74, 77, 78; --ssp-black: #000000; /* Secondary / accent */ --ssp-accent: #25282B; /* Slate Grey */ --ssp-accent-light: #4A4D4E; /* Vodafone Grey */ /* Neutral palette */ --ssp-bg: #FFFFFF; /* off-white flattens to white */ --ssp-bg-white: #FFFFFF; --ssp-bg-subtle: #D2DADC; /* Light Grey - hover / zebra fill */ --ssp-border: #D2DADC; /* Light Grey - borders */ --ssp-border-light: #D2DADC; --ssp-text: #25282B; /* primary text = Slate */ --ssp-text-secondary: #4A4D4E; /* secondary/body = Vodafone Grey */ --ssp-text-muted: #4A4D4E; /* muted collapses to Vodafone Grey */ --ssp-text-white: #FFFFFF; /* Status colors - secondary palette */ --ssp-success: #A8B400; /* Spring Green (black text on fill) */ --ssp-warning: #EB9700; /* Fresh Orange (black text on fill) */ --ssp-danger: #E60000; /* Vodafone Red */ --ssp-danger-dark: #820000; /* Gradient dark - danger hover */ --ssp-info: #00B0CA; /* Aqua Blue */ --ssp-info-dark: #007C92; /* Turquoise - info hover */ /* Component tokens */ --ssp-header-height: 80px; --ssp-titlebox-height: 80px; --ssp-border-radius: 8px; --ssp-border-radius-lg: 10px; --ssp-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --ssp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); --ssp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16); --ssp-transition: all 0.3s ease; /* Font */ --ssp-font: 'Open Sans', sans-serif; } /* ============================================================ 2. Base / Reset ============================================================ */ html, body { margin: 0; } html { height: 100%; } body { background: var(--ssp-bg); display: flex; flex-direction: column; min-height: 100%; } .main-container { flex: 1; } p { margin: 0; } * { font-family: var(--ssp-font); } *:focus { outline: none; } a { text-decoration: none; } a:hover { text-decoration: none; } .box-bgd-white { background: var(--ssp-bg-white); } /* ============================================================ 3. Header ============================================================ */ #header { background: var(--ssp-bg-white); height: var(--ssp-header-height); display: flex; justify-content: center; align-items: center; margin-bottom: 60px; box-shadow: var(--ssp-shadow); } #header .header-leftSide, #header .header-rightSide { display: flex; justify-content: center; align-items: center; } #header .header-rightSide .header-datetime-text { margin-right: 40px; } #header .header-rightSide .header-datetime-text span { font-size: 12px; line-height: 20px; color: #000; font-weight: bold; } #header .header-leftSide .header-logo { background-image: url("../Content/img/Vodacom-Logo.svg"); width: 200px; height: 100px; margin-right: 40px; background-repeat: no-repeat; background-size: contain; } img.header-logo { height: 100px; width: auto; } #header .header-leftSide .header-welcomeText p { font-size: 16px; color: var(--ssp-primary); line-height: 20px; margin-bottom: 0; font-weight: bold; } #header .header-rightSide .header-icons { display: flex; justify-content: center; align-items: center; align-self: center; gap: 6px; } /* Unified icon button wrapper */ #header .header-icon-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; transition: background 0.15s; text-decoration: none; } #header .header-icon-btn:hover { background: rgba(0, 0, 0, 0.06); } #header .header-rightSide .header-supportIcon { background-image: url("../Content/img/headset-icon.png"); width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; background-position: center; } #header .header-rightSide .header-envelopIcon { background-image: url("../Content/img/envelop.png"); width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; background-position: center; position: relative; display: inline-block; } #header .header-rightSide .header-envelopIcon:hover { background-image: url("../Content/img/envelopHov.png"); } .circle-number { display: flex; justify-content: center; align-items: center; width: 18px; height: 18px; background-color: var(--ssp-primary); border-radius: 50%; color: white; font-size: 10px; font-weight: 700; line-height: 1; position: absolute; top: -6px; right: -6px; border: 2px solid var(--ssp-bg-white); } #header .header-rightSide .header-logoutIcon { background-image: url("../Content/img/logout-icon.png"); width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; background-position: center; } #header .header-rightSide .header-logoutIcon:hover { background-image: url("../Content/img/logout-iconHov.png"); } #header .header-rightSide .header-homeIcon { background-image: url("../Content/img/billing-homeIcon.png"); width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; background-position: center; } #header .header-rightSide .header-homeIcon:hover { background-image: url("../Content/img/billing-homeIconHov.png"); } /* Language Dropdown */ .header-lang-wrap { position: relative; margin-left: 8px; z-index: 1050; } button.header-lang-btn, .header-lang-btn { display: flex !important; align-items: center !important; gap: 6px !important; background: none !important; border: 1px solid var(--ssp-border) !important; border-radius: 8px !important; padding: 7px 12px !important; font-family: var(--ssp-font) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--ssp-text-secondary) !important; cursor: pointer !important; transition: all 0.15s !important; height: 40px !important; line-height: 1 !important; margin: 0 !important; outline: none !important; box-shadow: none !important; text-transform: none !important; letter-spacing: normal !important; } button.header-lang-btn:hover, .header-lang-btn:hover { border-color: var(--ssp-primary) !important; color: var(--ssp-text) !important; background: rgba(var(--ssp-primary-rgb), 0.04) !important; } /* Login page — language button on dark/red background */ .language-selector-global .header-lang-btn, .language-selector-global button.header-lang-btn { color: #fff !important; border-color: rgba(255, 255, 255, 0.4) !important; background: rgba(255, 255, 255, 0.1) !important; } .language-selector-global .header-lang-btn:hover, .language-selector-global button.header-lang-btn:hover { border-color: rgba(255, 255, 255, 0.7) !important; color: #fff !important; background: rgba(255, 255, 255, 0.2) !important; } .header-lang-current { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; } div.header-lang-dropdown, .header-lang-dropdown { display: none !important; position: absolute !important; top: calc(100% + 2px) !important; right: 0 !important; left: auto !important; background: #fff !important; border: 1px solid #4A4D4E !important; border-radius: 6px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; overflow: hidden !important; z-index: 1051 !important; padding: 4px 0 !important; min-width: 100% !important; width: auto !important; max-width: none !important; margin: 0 !important; transform: none !important; } div.header-lang-dropdown.show, .header-lang-dropdown.show { display: block !important; } .header-lang-dropdown .header-lang-option, .header-lang-dropdown a.header-lang-option, a.header-lang-option { display: block !important; padding: 8px 16px !important; font-family: var(--ssp-font) !important; font-size: 13px !important; font-weight: 500 !important; color: #25282B !important; text-decoration: none !important; line-height: 1.2 !important; white-space: nowrap !important; margin: 0 !important; border: none !important; background: none !important; text-align: left !important; border-radius: 0 !important; box-shadow: none !important; width: 100% !important; box-sizing: border-box !important; } .header-lang-dropdown .header-lang-option:hover, .header-lang-dropdown a.header-lang-option:hover, a.header-lang-option:hover { background: #FFFFFF !important; color: var(--ssp-primary) !important; text-decoration: none !important; } /* ============================================================ 4. Title Box (shared across all pages) ============================================================ */ .titleBox { background: var(--ssp-primary); width: 100%; height: var(--ssp-titlebox-height); border-top-left-radius: var(--ssp-border-radius-lg); border-top-right-radius: var(--ssp-border-radius-lg); display: flex; justify-content: flex-start; align-items: center; padding-left: 45px; } .titleBox p { color: var(--ssp-text-white); font-size: 20px; font-weight: bold; line-height: 14px; } .titleBox a img { margin-left: -18px; } /* ============================================================ 5. Buttons ============================================================ */ /* Primary button (replaces .btn-green) */ .btn-green { background: linear-gradient(135deg, var(--ssp-primary), var(--ssp-primary-dark)); color: var(--ssp-text-white) !important; border-radius: 5px; padding: 10px 20px; font-weight: bold; border: none; cursor: pointer; box-shadow: 0 4px 8px rgba(var(--ssp-primary-rgb), 0.3); transition: var(--ssp-transition); text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .btn-green:hover { background: linear-gradient(135deg, var(--ssp-primary-light), var(--ssp-primary)); box-shadow: 0 6px 12px rgba(var(--ssp-primary-rgb), 0.4); transform: translateY(-2px); } .btn-green:active { transform: translateY(1px); box-shadow: 0 3px 6px rgba(var(--ssp-primary-rgb), 0.3); } /* Grey button */ .btn-grey { background: linear-gradient(135deg, #4A4D4E, #25282B); color: var(--ssp-text-white) !important; border-radius: 5px; padding: 10px 20px; font-weight: bold; border: none; cursor: pointer; box-shadow: 0 4px 8px rgba(74, 77, 78, 0.4); transition: var(--ssp-transition); text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .btn-grey:hover { background: linear-gradient(135deg, #4A4D4E, #25282B); box-shadow: 0 6px 12px rgba(74, 77, 78, 0.5); transform: translateY(-2px); } .btn-grey:active { transform: translateY(1px); box-shadow: 0 3px 6px rgba(74, 77, 78, 0.4); } /* Cancel button */ .btn-cancel { background: linear-gradient(135deg, #E60000, #820000); color: var(--ssp-text-white) !important; border-radius: 5px; padding: 10px 20px; font-weight: bold; border: none; cursor: pointer; box-shadow: 0 4px 8px rgba(230, 0, 0, 0.4); transition: var(--ssp-transition); text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .btn-cancel:hover { background: linear-gradient(135deg, #E60000, #820000); box-shadow: 0 6px 12px rgba(230, 0, 0, 0.5); transform: translateY(-2px); } .btn-cancel:active { transform: translateY(1px); box-shadow: 0 3px 6px rgba(230, 0, 0, 0.4); } /* Pay Now button */ .btn-payNow { display: inline-flex; justify-content: center; align-items: center; width: 50%; padding: 10px 20px; background: linear-gradient(135deg, var(--ssp-primary), var(--ssp-primary-dark)); border-radius: 5px; color: var(--ssp-text-white) !important; font-size: 16px; font-weight: bold; border: none; cursor: pointer; box-shadow: 0 4px 8px rgba(var(--ssp-primary-rgb), 0.3); transition: var(--ssp-transition); text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; } .btn-payNow:hover { background: linear-gradient(135deg, var(--ssp-primary-light), var(--ssp-primary)); box-shadow: 0 6px 12px rgba(var(--ssp-primary-rgb), 0.4); transform: translateY(-2px); text-decoration: none; } .btn-payNow:active { transform: translateY(1px); box-shadow: 0 3px 6px rgba(var(--ssp-primary-rgb), 0.3); } /* Buy More Products button */ .button-buyMoreProducts { width: 100%; max-width: 168px; height: 40px; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, var(--ssp-primary), var(--ssp-primary-dark)); border-radius: 5px; color: var(--ssp-text-white); font-size: 15px; font-weight: bold; border: none; cursor: pointer; box-shadow: 0 4px 8px rgba(var(--ssp-primary-rgb), 0.3); transition: var(--ssp-transition); text-transform: uppercase; letter-spacing: 0.5px; margin: 30px 0; float: right; } .button-buyMoreProducts:hover { background: linear-gradient(135deg, var(--ssp-primary-light), var(--ssp-primary)); box-shadow: 0 6px 12px rgba(var(--ssp-primary-rgb), 0.4); transform: translateY(-2px); } .button-buyMoreProducts:active { transform: translateY(1px); box-shadow: 0 3px 6px rgba(var(--ssp-primary-rgb), 0.3); } .button-buyMoreProducts a { color: var(--ssp-text-white); text-decoration: none; } .button-buyMoreProducts a:hover { color: var(--ssp-text-white); text-decoration: underline; } /* Signup button */ .btn-signup { padding: 8px 16px; background: var(--ssp-primary); border-radius: 5px; color: var(--ssp-text-white); font-size: 16px; font-weight: bold; } /* Signup outline button */ .btn-signup-outline { padding: 10px 20px; border: 2px solid var(--ssp-primary); border-radius: 8px; color: var(--ssp-primary); background: transparent; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; transition: var(--ssp-transition); cursor: pointer; } .btn-signup-outline:hover { background: var(--ssp-primary); color: var(--ssp-text-white); box-shadow: 0 4px 10px rgba(var(--ssp-primary-rgb), 0.4); transform: translateY(-1px); } .btn-signup-outline:active { transform: translateY(1px); box-shadow: 0 2px 5px rgba(var(--ssp-primary-rgb), 0.3); } /* Gradient buttons (purchase flow) */ .BtnGradient { background: linear-gradient(0deg, #820000 12%, #E60000 70%); border: 2px solid rgba(255, 255, 255, 0.4); padding: 10px 20px; border-radius: 5px; color: white; cursor: pointer; transition: box-shadow 0.3s ease, background 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 -2px 4px rgba(255, 255, 255, 0.2) inset; } .BtnGradientSecondary { background: linear-gradient(0deg, #E60000 12%, #E60000 70%); } .BtnGradient:active, .BtnGradientSecondary:active { background: linear-gradient(0deg, #820000 12%, #820000 70%); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -2px 4px rgba(255, 255, 255, 0.2) inset; } .BtnGradient:hover, .BtnGradientSecondary:hover { box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15), 0 -2px 4px rgba(255, 255, 255, 0.2) inset; } /* ============================================================ 6. MyAccounts (Home Page) ============================================================ */ #myAccounts .myAccounts-wrapper .titleBox { background: var(--ssp-primary); background-image: none; } #myAccounts .myAccounts-wrapper .titleBox p { color: var(--ssp-text-white); font-size: 20px; font-weight: bold; line-height: 14px; } #myAccounts .myAccounts-wrapper .welcomeBox-bgd { width: 100%; height: 157px; background-repeat: no-repeat; background-position: center; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #000; } #myAccounts .myAccounts-wrapper .textAnimationwelcomeBox-bgd { background-image: url("../Content/img/welcome-bgd-announce.png"); width: 100%; height: 157px; background-position: center; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--ssp-text-white); } #myAccounts .myAccounts-wrapper .welcomeBox-bgd h2 { font-size: 30px; line-height: 48px; font-weight: bold; margin-bottom: 0; } #myAccounts .myAccounts-wrapper .welcomeBox-bgd p { font-size: 30px; line-height: 48px; font-weight: 400; } #myAccounts .myAccounts-wrapper .textAnimationwelcomeBox-bgd marquee { font-size: 30px; line-height: 48px; font-weight: 400; white-space: nowrap; } /* Accounts slider */ #myAccounts .myAccounts-wrapper .myAccountsBox p.myAccounts-sliderTitle { text-align: center; margin: 25px 0; font-size: 20px; font-weight: bold; line-height: 14px; color: #000; } #myAccounts .myAccounts-wrapper .center .slick-center { background: var(--ssp-primary); width: 200px !important; text-align: center; height: 100px; } #myAccounts .myAccounts-wrapper .center .slick-center p { color: var(--ssp-text-white); } #myAccounts .myAccounts-wrapper .myAccounts-slider { display: flex; justify-content: center; align-items: center; align-self: center; } #myAccounts .myAccounts-wrapper .myAccounts-slider button { font-size: 0; border: none; background: none; } #myAccounts .myAccounts-wrapper .slider.center.slick-initialized.slick-slider { max-width: 710px; display: flex; justify-content: center; align-items: center; align-self: center; margin: 0 -15px; } #myAccounts .myAccounts-wrapper .myAccounts-slider .slick-list.draggable { padding: 0px; width: 630px; margin: 0 20px; } #myAccounts .myAccounts-wrapper .slick-initialized .slick-slide p.myAccounts-slider-idText { color: #000; } #myAccounts .myAccounts-wrapper .slick-initialized .slick-slide p.myAccounts-slider-strongText { font-weight: bold; color: var(--ssp-primary); } #myAccounts .myAccounts-wrapper .slick-initialized .slick-slide { display: flex; width: 180px !important; text-align: center; flex-direction: column; justify-content: center; align-items: center; align-self: center; height: 100px; border: 1px solid var(--ssp-border); padding: 10px; margin-right: 15px; margin-left: 15px; border-radius: var(--ssp-border-radius-lg); cursor: pointer; } #myAccounts .myAccounts-wrapper .slick-initialized .slick-slide.slick-center p { color: var(--ssp-text-white); } #myAccounts .myAccounts-wrapper .slick-slide.slick-active:first-child, .slick-slide.slick-active:last-child { margin: 0; } #myAccounts .myAccounts-wrapper .myAccountsBox { margin-bottom: 30px; } #myAccounts .myAccounts-wrapper .box-bgd-white { padding-top: 30px; padding-bottom: 80px; width: 100%; } /* Card slider */ #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-list.draggable a { color: #4A4D4E; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active p.myCardsBox-slider-strongText { color: #4A4D4E; font-size: 18px; font-weight: bold; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active p.myCardsBox-slider-text { font-size: 14px; color: #4A4D4E; } /* Card icons */ #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card1 { background-image: url("../Content/img/subsNom.png"); width: 42px; height: 52px; background-repeat: no-repeat; background-position: center; margin: 0 auto; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card15 { background-image: url("../Content/img/ordersNom.png"); width: 42px; height: 52px; background-repeat: no-repeat; background-position: center; margin: 0 auto; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card2 { background-image: url("../Content/img/purchaseNom.png"); width: 51px; height: 51px; background-repeat: no-repeat; background-position: center; margin: 0 auto; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card13 { background-image: url("../Content/img/paymentGateNom.png"); width: 51px; height: 51px; background-repeat: no-repeat; background-position: center; margin: 0 auto; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card3 { background-image: url("../Content/img/billingNom.png"); width: 45px; height: 52px; background-repeat: no-repeat; background-position: center; margin: 0 auto; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card4 { background-image: url("../Content/img/userNom.png"); width: 46px; height: 52px; background-repeat: no-repeat; background-position: center; margin: 0 auto; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card5 { background-image: url("../Content/img/settingNom.png"); width: 46px; height: 52px; background-repeat: no-repeat; background-position: center; margin: 0 auto; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card6 { background-image: url("../Content/img/myAccounts-card6-icon.png"); width: 46px; height: 52px; background-repeat: no-repeat; background-position: center; margin: 0 auto; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card7 { background-image: url("../Content/img/announcementsNom.png"); width: 46px; height: 52px; background-repeat: no-repeat; background-position: center; margin: 0 auto; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card8 { background-image: url("../Content/img/messegesNom.png"); width: 46px; height: 52px; background-repeat: no-repeat; background-position: center; margin: 0 auto; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card11 { background-image: url("../Content/img/manageUsrsNor.png"); width: 46px; height: 52px; background-repeat: no-repeat; background-position: center; margin: 0 auto; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card9 { background-image: url("../Content/img/pgNom.png"); width: 46px; height: 52px; background-repeat: no-repeat; background-position: center; margin: 0 auto; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card10 { background-image: url("../Content/img/historyNom.png"); width: 46px; height: 52px; background-repeat: no-repeat; background-position: center; margin: 0 auto; } /* Card hover states */ #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active:hover .slider-card1 { background-image: url("img/subsHov.png"); background-repeat: no-repeat; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active:hover .slider-card15 { background-image: url("img/ordersHover.png"); background-repeat: no-repeat; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active:hover .slider-card2 { background-image: url("img/purchaseHov.png"); background-repeat: no-repeat; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active:hover .slider-card13 { background-image: url("img/paymentGateHov.png"); background-repeat: no-repeat; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active:hover .slider-card3 { background-image: url("img/billingHover.png"); background-repeat: no-repeat; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active:hover .slider-card4 { background-image: url("img/userHov.png"); background-repeat: no-repeat; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active:hover .slider-card5 { background-image: url("img/settingHov.png"); background-repeat: no-repeat; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active:hover .slider-card6 { background-image: url("img/myAccounts-card6-icon-green.png"); background-repeat: no-repeat; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active:hover .slider-card7 { background-image: url("img/announcementsHov.png"); background-repeat: no-repeat; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active:hover .slider-card8 { background-image: url("img/messegesHov.png"); background-repeat: no-repeat; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active:hover .slider-card11 { background-image: url("img/manageUsrsHov.png"); background-repeat: no-repeat; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active:hover .slider-card9 { background-image: url("img/paymentGateHov.png"); background-repeat: no-repeat; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active:hover .slider-card10 { background-image: url("img/historyHov.png"); background-repeat: no-repeat; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active:hover p.myCardsBox-slider-strongText { color: var(--ssp-primary); } #myAccounts .myAccounts-wrapper .myCardsBox-slider { display: flex; justify-content: center; align-items: center; align-self: center; } #myAccounts .myAccounts-wrapper .myCardsBox-slider button { font-size: 0; border: none; background: none; } #myAccounts .myAccounts-wrapper .myAccounts-slider button.slick-prev { background-image: url(img/myAccounts-left-arrow.png); min-width: 34px; min-height: 34px; display: block; background-repeat: no-repeat; } #myAccounts .myAccounts-wrapper .myAccounts-slider button.slick-next { background-image: url(img/myAccounts-right-arrow.png); min-width: 34px; min-height: 34px; display: block; background-repeat: no-repeat; } button.slick-next:focus, button.slick-prev:focus { outline: none; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider.slick-initialized.slick-slider { max-width: 1085px; display: flex; justify-content: center; align-items: center; align-self: center; margin: 0 -15px; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide { display: flex; width: 221px !important; text-align: center; flex-direction: column; justify-content: center; align-items: center; align-self: center; height: 160px; border: 1px solid var(--ssp-border); padding: 10px; margin-right: 15px; margin-left: 15px; border-radius: var(--ssp-border-radius-lg); } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide:last-child { margin-right: 0; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-current { margin-left: 15px; } #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-list.draggable { width: 1010px; margin: 0 20px; } /* myAccounts green page (legacy support) */ body.myAccounts-green { background: var(--ssp-primary); } body.myAccounts-green #myAccounts .myAccounts-wrapper .titleBox { background-image: none; background: var(--ssp-bg-white); border-bottom-left-radius: var(--ssp-border-radius-lg); border-bottom-right-radius: var(--ssp-border-radius-lg); } body.myAccounts-green #myAccounts .myAccounts-wrapper .titleBox p { color: #000; } body.myAccounts-green #myAccounts .myAccounts-wrapper .box-bgd-white { background: var(--ssp-primary); } body.myAccounts-green #myAccounts .myAccounts-wrapper .welcomeBox-bgd { background-image: url(img/welcome-bgd-whitepage.png); } body.myAccounts-green #myAccounts .myAccounts-wrapper .welcomeBox-bgd h2 { color: var(--ssp-primary); } body.myAccounts-green #myAccounts .myAccounts-wrapper .welcomeBox-bgd p { color: #000; } body.myAccounts-green #myAccounts .myAccounts-wrapper .myAccountsBox p.myAccounts-sliderTitle { color: var(--ssp-text-white); } body.myAccounts-green #myAccounts .myAccounts-wrapper .slick-initialized .slick-slide p.myAccounts-slider-idText, body.myAccounts-green #myAccounts .myAccounts-wrapper .slick-initialized .slick-slide p.myAccounts-slider-strongText { color: var(--ssp-text-white); } body.myAccounts-green #myAccounts .myAccounts-wrapper .slick-initialized .slick-slide { border: none; background: rgba(255,255,255,0.15); } body.myAccounts-green #myAccounts .myAccounts-wrapper .center .slick-center { background: var(--ssp-bg-white); } body.myAccounts-green #myAccounts .myAccounts-wrapper .slick-initialized .slick-slide.slick-center p { color: var(--ssp-primary); } body.myAccounts-green #myAccounts .myAccounts-wrapper .myCardsBox .slick-initialized .slick-slide.slick-active:hover { background: var(--ssp-bg-white); } body.myAccounts-green #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active:hover p.myCardsBox-slider-strongText { color: var(--ssp-primary); } body.myAccounts-green #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-list.draggable a { color: var(--ssp-text-white); } body.myAccounts-green #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active:hover p.myCardsBox-slider-text { color: #4A4D4E; } body.myAccounts-green #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active p.myCardsBox-slider-strongText, body.myAccounts-green #myAccounts .myAccounts-wrapper .myCardsBox-slider .slick-initialized .slick-slide.slick-active p.myCardsBox-slider-text { color: var(--ssp-text-white); } body.myAccounts-green #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card1 { background-image: url("img/myAccounts-card1-icon-white.png"); } body.myAccounts-green #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card2 { background-image: url("img/myAccounts-card2-icon-white.png"); } body.myAccounts-green #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card3 { background-image: url("img/myAccounts-card3-icon-white.png"); } body.myAccounts-green #myAccounts .myAccounts-wrapper .myCardsBox-slider .slider-card4 { background-image: url("img/myAccounts-card4-icon-white.png"); } /* ============================================================ 7. myProducts Page ============================================================ */ .borderBox { border: 1px solid var(--ssp-border); padding: 0 20px !important; } #myProducts .myProducts-wrapper .titleBox { background: var(--ssp-primary); background-image: none; } #myProducts .myProducts-wrapper .titleBox p { color: var(--ssp-text-white); font-size: 20px; font-weight: bold; line-height: 14px; } #myProducts .myProducts-wrapper .myProducts-box-padding { padding: 40px 0 40px 40px; } #myProducts .myProducts-wrapper .myProducts-searchBox { margin: 25px 0 40px 0; } #myProducts .myProducts-wrapper .myProducts-searchBox input { width: 100%; padding: 11px 20px; background: var(--ssp-bg); border: 1px solid var(--ssp-border); border-radius: 5px; } #myProducts .myProducts-wrapper .myProducts-leftSide-scrollBox { height: 340px; position: relative; overflow-y: scroll; } #myProducts .myProducts-wrapper .myProducts-leftSide-boxTitle { padding: 13px 0; border-left: 4px solid var(--ssp-primary); background: #FFFFFF; padding-left: 20px; width: 385px; border-radius: 5px; } #myProducts .myProducts-wrapper .myProducts-leftSide-boxTitle p { font-size: 16px; font-weight: bold; line-height: 24px; color: var(--ssp-primary); text-transform: uppercase; } #myProducts .myProducts-wrapper .myProducts-leftSide-scrollBox ul { margin: 30px 0; } #myProducts .myProducts-wrapper .myProducts-leftSide-scrollBox ul li { font-size: 16px; font-weight: 400; line-height: 24px; color: #4A4D4E; margin-bottom: 20px; } /* myProducts right side */ #myProducts .myProducts-wrapper .rightSide-padding { padding: 0 20px; } #myProducts .myProducts-wrapper .myProducts-rightSide-title { margin-bottom: 30px; } #myProducts .myProducts-wrapper .myProducts-rightSide-title p { border-bottom: 6px solid var(--ssp-primary); width: max-content; padding-bottom: 15px; font-size: 20px; font-weight: bold; line-height: 14px; } #myProducts .myProducts-wrapper .myProducts-rightSide-title hr { margin: 0; } #myProducts .myProducts-wrapper .myproducts-rightSide-scrollBox ul { height: 385px; position: relative; } #myProducts .myProducts-wrapper .myproducts-rightSide-scrollBox .infoBox { border: 1px solid var(--ssp-border); margin-bottom: 15px; padding: 13px 20px; width: 100%; max-width: 560px; } .infoBoxOrd { border: 1px solid var(--ssp-border); margin-bottom: 15px; padding: 13px 20px; width: 100%; max-width: 560px; } #myProducts .myProducts-wrapper .myproducts-rightSide-scrollBox .infoBox p { font-size: 14px; font-weight: 400; line-height: 14px; } #myProducts .myProducts-wrapper .myproducts-rightSide-icons { margin-top: 30px; display: flex; justify-content: space-between; align-items: center; align-self: center; padding: 0 13px 0 0; } #myProducts .myProducts-wrapper .myproducts-rightSide-icons a { margin-right: 75px; } #myProducts .myProducts-wrapper .myproducts-rightSide-icons a:last-child { margin-right: 0; } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon1, #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon2, #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon3, #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon4, #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon5 { width: 53px; height: 52px; background-repeat: no-repeat; } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon1 { background-image: url("../Content/img/myProducts-icon1.png"); } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon2 { background-image: url("../Content/img/myProducts-icon2.png"); } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon3 { background-image: url("../Content/img/myProducts-icon3.png"); } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon4 { background-image: url("../Content/img/myProducts-icon4.png"); } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon5 { background-image: url("../Content/img/myProducts-icon5.png"); } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon1:hover { background-image: url("../Content/img/myProducts-icon1-green.png"); } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon2:hover { background-image: url("../Content/img/myProducts-icon2-green.png"); } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon3:hover { background-image: url("../Content/img/myProducts-icon3-green.png"); } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon4:hover { background-image: url("../Content/img/myProducts-icon4-green.png"); } #myProducts .myProducts-wrapper .myproducts-rightSide-icons .myproducts-rightSide-icon5:hover { background-image: url("../Content/img/myProducts-icon5-green.png"); } /* ============================================================ 8. Billing Page ============================================================ */ #billing .billing-wrapper .billing-leftSideBox ul { margin: 0; padding: 0; border: 0; background: none; } #billing .billing-wrapper .billing-leftSideBox ul li { width: 100%; max-width: 510px; border: 0; margin: 0; padding: 0; background: var(--ssp-bg); margin-bottom: 20px; } #billing .billing-wrapper .billing-leftSideBox ul li a { border: none; padding: 18px 20px; color: #000; font-weight: bold; font-size: 16px; line-height: 14px; } #billing .billing-wrapper .nav-tabs .nav-link.active { background: var(--ssp-primary); font-size: 16px; font-weight: bold; line-height: 14px; color: var(--ssp-text-white); } #billing .billing-wrapper .titleBox { background: var(--ssp-primary); background-image: none; } #billing .billing-wrapper .titleBox p { color: var(--ssp-text-white); font-size: 20px; font-weight: bold; line-height: 14px; } #billing .billing-wrapper .billing-box-padding { padding: 40px 0 40px 40px; } #billing .billing-wrapper .billing-monthBox p { margin-bottom: 20px; font-size: 20px; line-height: 14px; font-weight: bold; } #billing .billing-wrapper .billing-monthBox select { width: 100%; max-width: 510px; padding: 14px 20px; font-size: 18px; color: #4A4D4E; border: 0; background: var(--ssp-bg); margin-bottom: 30px; } #billing .billing-wrapper .tab-content { border: 2px solid var(--ssp-border); width: 400px; margin-left: 25px; float: left; } #billing .billing-wrapper .tab-content .tab-pane { padding: 30px; } #billing .billing-wrapper .tab-content .tab-pane h5 { font-size: 20px; font-weight: bold; line-height: 14px; margin-bottom: 30px; } #billing .billing-wrapper .tab-content .tab-pane p { margin-bottom: 30px; font-size: 14px; line-height: 24px; } #billing .billing-wrapper .billing-leftSideBox { margin-bottom: 50px; } #billing .billing-wrapper .billing-leftSideBox p { font-size: 20px; font-weight: bold; line-height: 14px; margin-bottom: 20px; } #billing .billing-wrapper .button-pay-billing { text-align: center; } #billing .billing-wrapper .button-pay-billing span { font-size: 20px; font-weight: bold; line-height: 14px; margin-right: 20px; } #billing .billing-wrapper .button-pay-billing a { font-size: 18px; line-height: 14px; color: var(--ssp-text-white); background: var(--ssp-primary); padding: 15px 40px; border-radius: 5px; } #billing .billing-wrapper .billing-printerIcon { background-image: url(../Content/img/billing-download.png); width: 49px; height: 49px; background-repeat: no-repeat; background-position: center; } #billing .billing-wrapper .billing-homeIcon { background-image: url(../Content/img/billing-homeIcon.png); width: 37px; height: 35px; background-repeat: no-repeat; background-position: center; margin-right: 20px; } .PrintInvIcon { background-image: url(../Content/img/invoice.png); } #billing .billing-wrapper .billing-iconsBox { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; flex-direction: column; } /* ============================================================ 9. MyProfile Page ============================================================ */ #myProfile .myProfilewrapper .titleBox { background: var(--ssp-primary); background-image: none; } #myProfile .myProfilewrapper .titleBox p { color: var(--ssp-text-white); font-size: 20px; font-weight: bold; line-height: 14px; } #myProfile .myProfilewrapper .box-bgd-white { padding-top: 30px; padding-bottom: 80px; width: 100%; } #myProfile .myProfilewrapper ul { display: flex; flex-direction: column; border: 0; margin: 0; padding: 0; background: none; } #myProfile .myProfilewrapper ul li { width: 100%; max-width: 205px; border: 0; margin: 0; padding: 0; margin-bottom: 10px; padding-left: 0px; margin-left: 20px; } #myProfile .myProfilewrapper ul li a { border: none; padding: 20px 20px; color: #4A4D4E; font-weight: bold; font-size: 18px; line-height: 14px; padding-left: 40px; border-radius: 5px; } #myProfile .myProfilewrapper .nav-tabs .nav-link.active { background: #FFFFFF; font-weight: bold; color: var(--ssp-primary); padding-left: 40px; } #myProfile .myProfilewrapper .myprofile-formGroup .myProfile-rightSide { border: 1px solid var(--ssp-border); padding: 0 40px; padding-bottom: 30px; } #myProfile .myProfilewrapper .mydetails-group form .form-group { width: 100%; max-width: 480px; height: 50px; margin: 0 auto; margin-bottom: 30px; } #myProfile .myProfilewrapper .mydetails-group form .form-group label { font-size: 14px; line-height: 14px; color: #4A4D4E; } #myProfile .myProfilewrapper .myprofile-formGroup h5 { text-align: center; font-size: 20px; font-weight: bold; line-height: 14px; color: #000; margin-top: 30px; } #myProfile .myProfilewrapper .mydetails-group form .form-group input { border: 1px solid var(--ssp-border); } #myProfile .myProfilewrapper .myprofile-formGroup { padding-right: 50px; padding-left: 20px; } #myProfile .myProfilewrapper .myProfile-buttons { text-align: center; } #myProfile .myProfilewrapper .myProfile-buttons .btn-update { background: var(--ssp-primary); color: var(--ssp-text-white); border: none; padding: 10px 40px; border-radius: 5px; font-weight: bold; cursor: pointer; } #myProfile .myProfilewrapper .myProfile-buttons .btn-update:hover { background: var(--ssp-primary-dark); } /* Profile history checkboxes */ .checkboxStyle { position: relative; display: inline-block; } .checkboxStyle label { width: 100%; max-width: 510px; display: block; padding: 18px 20px; color: #000; font-weight: bold; font-size: 16px; line-height: 14px; margin-bottom: 0; } .checkboxStyle input { display: none; } .checkboxStyle input:checked ~ label { background: var(--ssp-primary); color: var(--ssp-text-white); } /* ============================================================ 10. Toggle Switches (consolidated from paymentGatewaySwitch.css) ============================================================ */ .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #D2DADC; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; } input[type="checkbox"]:checked + input[type="hidden"] + .slider, input[type="checkbox"]:checked + .slider { background-color: var(--ssp-success); } input[type="checkbox"] + input[type="hidden"] + .sliderMode, input[type="checkbox"] + .sliderMode { background-color: var(--ssp-danger); } input[type="checkbox"]:focus + input[type="hidden"] + .slider, input[type="checkbox"]:focus + .slider { box-shadow: 0 0 1px #00B0CA; } input[type="checkbox"]:checked + input[type="hidden"] + .slider:before, input[type="checkbox"]:checked + .slider:before { transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } /* Switch toggle (profile settings) */ .switchToggle { position: relative; display: inline-block; width: 60px; height: 34px; } .switchToggle input { display: none; } .sliderToggle { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #D2DADC; transition: .4s; } .sliderToggle:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; } input[type="checkbox"]:checked + input[type="hidden"] + .sliderToggle, input[type="checkbox"]:checked + .sliderToggle { background-color: var(--ssp-success); } input[type="checkbox"]:focus + input[type="hidden"] + .sliderToggle, input[type="checkbox"]:focus + .sliderToggle { box-shadow: 0 0 1px #00B0CA; } input[type="checkbox"]:checked + input[type="hidden"] + .sliderToggle:before, input[type="checkbox"]:checked + .sliderToggle:before { transform: translateX(26px); } .sliderToggle.roundToggle { border-radius: 34px; } .sliderToggle.roundToggle:before { border-radius: 50%; } /* ============================================================ 11. Purchase / Product Catalog Styles (from purchaseStyle.css) ============================================================ */ .cardCustStyle { border: 2px double var(--ssp-primary); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); } .MultiCarousel { float: left; overflow: hidden; padding: 15px; width: 100%; position: relative; } .MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; } .MultiCarousel .MultiCarousel-inner .item { float: left; } .MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding: 10px; margin: 10px; background: var(--ssp-bg-subtle); color: #4A4D4E; } .MultiCarousel .leftLst, .MultiCarousel .rightLst { position: absolute; border-radius: 50%; top: calc(50% - 20px); } .MultiCarousel .leftLst { left: 0; } .MultiCarousel .rightLst { right: 0; } .MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background: #D2DADC; } /* Triangle shapes for badges */ .triangle-left { width: 0; height: 0; border-top: 25px solid transparent; border-right: 50px solid #4A4D4E; border-bottom: 25px solid transparent; } .shape { border-style: solid; border-top: 25px solid transparent; border-right: 50px solid #4A4D4E; border-bottom: 25px solid transparent; padding-right: 8px; float: right; height: 0px; width: 0px; } .listing { background: var(--ssp-bg-white); border: 1px solid var(--ssp-border); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); margin: 15px 0; overflow: hidden; } .listing:hover { transform: scale(1.1); transition: all 0.4s ease-in-out; cursor: pointer; } .shape { border-color: rgba(255,255,255,0) #E60000 rgba(255,255,255,0) rgba(255,255,255,0); } .listing-radius { border-radius: 7px; } .listing-danger { border-color: #E60000; } .listing-danger .shape { border-color: transparent #E60000 transparent transparent; } .listing-success { border-color: #A8B400; } .listing-success .shape { border-color: transparent #A8B400 transparent transparent; } .listing-default { border-color: #4A4D4E; } .listing-default .shape { border-color: transparent #4A4D4E transparent transparent; } .listing-primary { border-color: #00B0CA; } .listing-primary .shape { border-color: transparent #007C92 transparent transparent; } .listing-info { border-color: #00B0CA; } .listing-info .shape { border-color: transparent #00B0CA transparent transparent; } .listing-warning { border-color: #EB9700; } .listing-warning .shape { border-color: transparent #EB9700 transparent transparent; } .shape-text { color: var(--ssp-text-white); font-size: 12px; font-weight: bold; position: relative; right: -30px; top: -10px; white-space: nowrap; } .bundleWit { position: relative; right: -45px; top: 0px; white-space: nowrap; } .hotBundle { position: relative; right: -40px; top: -10px; white-space: nowrap; } .listing-content { margin: 0 0 24px 0; padding-top: 35px; } section.pricingDetails { background-image: url("../Content/img/PurchaseOptions-BG2.PNG"); object-fit: cover; background-size: 100% 100%; background-position-y: -12%; background-repeat: no-repeat; } section.pricing { background-image: url("../Content/img/PurchaseOptions-BG.PNG"); object-fit: cover; background-size: 100% 100%; background-position-y: -12%; background-repeat: no-repeat; } .pricing .card { border: none; border-radius: 1rem; transition: all 0.2s; box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1); } .pricing hr { margin: 1.5rem 0; } .pricing .card-title { margin: 0.5rem 0; font-size: 0.9rem; letter-spacing: .1rem; font-weight: bold; } .pricing .card-price { font-size: 3rem; margin: 0; } .pricing .card-price .period { font-size: 0.8rem; } .pricing ul li { margin-bottom: 1rem; } .pricing .text-muted { opacity: 0.7; } .pricing .btn { font-size: 80%; border-radius: 5rem; letter-spacing: .1rem; font-weight: bold; padding: 1rem; opacity: 0.7; transition: all 0.2s; } @media (min-width: 992px) { .pricing .card:hover { margin-top: -.25rem; margin-bottom: .25rem; box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3); } .pricing .card:hover .btn { opacity: 1; } } /* ============================================================ 12. Login / Registration Page NOTE: Main login styles (background, glass card, inputs) are now in Style.css. This section only provides minimal fallbacks. ============================================================ */ .login-logo { width: 500px !important; height: 200px !important; padding: 20px; } /* ============================================================ 13. Purchase Page ============================================================ */ #purchase .purchase-wrapper .titleBox { background: var(--ssp-primary); background-image: none; } .filter-box { padding: 20px 30px; background: var(--ssp-bg-subtle); border-radius: 8px; margin-bottom: 30px; border: 1px solid var(--ssp-border); } /* User creation title (used across purchase/signup flow) */ .userCreationTitle { border-bottom: 6px solid var(--ssp-primary); padding-bottom: 15px; padding-left: 1.7rem; padding-right: 1.7rem; font-weight: bold; line-height: 14px; font-size: 1rem; margin-top: .8rem; margin-bottom: 2.3rem; display: inline-block; } .secondHeading { text-align: center; margin: 25px 0; font-size: 20px; font-weight: bold; line-height: 14px; color: #000; } .inboxImg { width: 100px; height: 100px; object-fit: contain; } /* ============================================================ 14. Miscellaneous Utilities ============================================================ */ .ps__thumb-y { background-color: var(--ssp-primary); } .numberCircle { background-color: var(--ssp-primary); border-radius: 50%; color: var(--ssp-text-white); padding: 0.4rem; width: 50%; } .EditNotAllowed { pointer-events: none; } /* Admin slider nav buttons */ .Slkbtn { width: 35px; height: 35px; border-radius: 52%; border: 3px solid black; background-size: contain; } .Slkbtn:hover { border-color: var(--ssp-primary); transform: scale(1.2); } .btnNavNext { background-image: url('img/nextbtn.png'); position: relative; left: 97%; bottom: 101px; z-index: 10; } .btnNavPrev { background-image: url('img/prevbtn.png'); position: relative; top: 100px; z-index: 10; } /* Peach payment card widget */ .wpwl-form { background: var(--ssp-bg-subtle); margin-top: 2rem; } .wpwl-label-brand { display: none; } .wpwl-form-card { background-color: white; border: 0px; } .wpwl-control, input.wpwl-control { background: white; border: 1px solid var(--ssp-primary); box-shadow: none; border-radius: 0px; font-family: var(--ssp-font); text-transform: none; padding: 10px; font-size: 18px; height: 50px; } .input-text:focus, input[type=text]:focus, input[type=tel]:focus, input[type=url]:focus, input[type=password]:focus, input[type=search]:focus, textarea:focus { background-color: white; } .wpwl-brand-SOFORTUEBERWEISUNG, .wpwl-brand-GIROPAY { cursor: pointer; } .wpwl-brand, .wpwl-img { margin: 0 0 0 auto; } /* Payment status page */ .filtered { filter: hue-rotate(-100deg) saturate(2); } h4#text:first-letter { text-transform: uppercase; } .Bcg { background-image: url('img/welcome-bgd.png'); } .demoStyle { position: relative; top: -170px; left: 100px; background-color: #E60000; } /* History pagination */ .pagerHist > a { background-color: var(--ssp-primary); border: none; color: white; padding: 7px; text-align: center; text-decoration: none; display: inline-block; font-size: 14px; margin: 4px 3px; border-radius: 4px; } .selectedPageNumber { background-color: black; color: white; border-radius: 50%; padding: 5px 10px; margin-left: 10px; margin-right: 10px; text-align: center; font-weight: bold; display: flex; justify-content: center; align-items: center; } /* Background block overlay */ .backgroundblock { position: fixed; top: 0; left: 0; background-color: black; z-index: 99; opacity: 1; filter: opacity(80); min-height: 0%; width: 0%; } /* Loading screen */ .loadingscreen { font-family: Arial; font-size: 15pt; opacity: 0.8; width: 100%; height: 100%; display: none; position: fixed; background-color: White; padding-top: 10%; z-index: 999; } /* Password visibility toggle */ .showPasswordIconStyle { background-image: url(../Content/img/eyeOpen.png); width: 77px; height: auto; background-position: center; background-repeat: no-repeat; text-align: center; padding: 18px 20px; background-color: var(--ssp-bg-white); border: 1px solid var(--ssp-border); border-radius: .25rem; } .hidePasswordIconStyle { background-image: url(../Content/img/eyeClosed.png); width: 77px; height: auto; background-position: center; background-repeat: no-repeat; text-align: center; padding: 18px 20px; background-color: var(--ssp-bg-white); border: 1px solid var(--ssp-border); border-radius: .25rem; } /* Search icon */ .searchResearch { margin-top: -5px; margin-left: -5px; height: 40px; width: 40px; } .scrollit { overflow: scroll; height: 100px; } /* Shake animation */ @keyframes shake { 0% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } .box { display: inline-block; padding: 20px; font-size: 24px; background-color: var(--ssp-bg-subtle); border: 1px solid var(--ssp-border); border-radius: 5px; margin-bottom: 20px; } .shake { animation: shake 0.5s ease-in-out; } .slick-next.slick-arrow:hover::before { color: var(--ssp-primary) !important; } #headerNew { z-index: 997; transition: all 0.5s; padding: 8px 0; background: var(--ssp-primary); height: 80px; display: flex; margin-bottom: 60px; } .retryMessage { font-size: 16px !important; } /* Message button styles */ .btn-selected { border-bottom: 6px solid var(--ssp-primary-dark); } .btn-message-label { margin-top: 5px; font-size: 1rem; font-weight: bold; color: var(--ssp-primary); text-align: center; } /* ============================================================ 15. Responsive / Mobile Navigation ============================================================ */ .responsive-nav { position: fixed; top: 0; right: -300px; padding-top: 80px; width: 300px; background: var(--ssp-bg-white); height: 100vh; z-index: 2; transition: 0.2s linear all; overflow: hidden; } .responsive-nav.openned { right: 0; } .responsive-nav .header-leftSide .header-welcomeText p { font-size: 16px; color: var(--ssp-primary); line-height: 20px; margin-bottom: 0; font-weight: bold; } .responsive-nav .header-logo { background-image: url(../img/logo.png); width: 200px; height: 100px; margin-right: 40px; background-repeat: no-repeat; background-size: contain; margin: 0 auto; margin-bottom: 30px; } .responsive-nav .header-rightSide .header-datetime-text span { font-size: 12px; line-height: 20px; color: #000; font-weight: bold; margin-bottom: 30px; } .responsive-nav .header-welcomeText, .responsive-nav .header-datetime-text { margin-bottom: 30px; text-align: center; } .responsive-nav .header-rightSide .header-supportIcon { background-image: url(../Content/img/headset-icon.png); width: 33px; height: 31px; margin-right: 25px; background-repeat: no-repeat; } .responsive-nav .header-rightSide .header-envelopIcon { background-image: url(../Content/img/envelop.png); width: 37px; height: 38px; margin-right: 25px; background-repeat: no-repeat; position: relative; display: inline-block; } .responsive-nav .header-rightSide .header-envelopIcon:hover { background-image: url(../Content/img/envelopHov.png); } .responsive-nav .header-rightSide .header-icons { display: flex; justify-content: center; align-items: center; align-self: center; } .responsive-nav .header-rightSide .header-logoutIcon { background-image: url(../Content/img/logout-icon.png); width: 27px; height: 27px; background-repeat: no-repeat; } .responsive-nav .header-rightSide .header-homeIcon { background-image: url(../Content/img/billing-homeIcon.png); width: 33px; height: 31px; margin-right: 25px; background-repeat: no-repeat; } .nav-icon { width: 30px; height: 25px; } .nav-icon span { display: block; width: 100%; height: 5px; border-radius: 3px; margin-bottom: 5px; background: var(--ssp-primary); } #nav-icon span:last-of-type { margin-bottom: 0; } /* ============================================================ 16. Media Queries ============================================================ */ @media (max-width: 1024px) { #myAccounts, #billing, #myProducts, #myProfile, #purchase { overflow-x: hidden; overflow-y: auto; } .filter-box { margin-bottom: 0; } } @media (max-width: 991px) { .nav-icon { display: block; } #header .header-leftSide, #header .header-rightSide { display: none; } .filter-box { margin-top: 30px; } } /* ============================================================ Orders Page — Table + Drawer ============================================================ */ .orders-page-subtitle { font-size: 13px; color: var(--ssp-text-muted); margin-top: 3px; } .orders-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .orders-search-wrap { position: relative; flex: 1; min-width: 180px; max-width: 300px; } .orders-search-wrap .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ssp-text-muted); pointer-events: none; font-size: 16px; } .orders-search-wrap .search-input { width: 100%; background: var(--ssp-bg-white); border: 1px solid var(--ssp-border); border-radius: var(--ssp-border-radius); padding: 9px 12px 9px 34px; font-family: var(--ssp-font); font-size: 13px; color: var(--ssp-text); outline: none; transition: border-color 0.2s; } .orders-search-wrap .search-input::placeholder { color: var(--ssp-text-muted); } .orders-search-wrap .search-input:focus { border-color: var(--ssp-primary); box-shadow: 0 0 0 3px rgba(var(--ssp-primary-rgb), 0.08); } .orders-filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .orders-filter-tabs .otab { font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 20px; border: 1px solid var(--ssp-border); background: var(--ssp-bg-white); color: var(--ssp-text-secondary); cursor: pointer; transition: all 0.14s; white-space: nowrap; } .orders-filter-tabs .otab:hover { color: var(--ssp-text); border-color: var(--ssp-primary); } .orders-filter-tabs .otab.active { background: rgba(var(--ssp-primary-rgb), 0.08); border-color: rgba(var(--ssp-primary-rgb), 0.35); color: var(--ssp-primary); } /* Orders Table */ .orders-table-wrap { background: var(--ssp-bg-white); border: 1px solid var(--ssp-border); border-radius: var(--ssp-border-radius-lg); /* Scroll rather than clip. This was overflow:hidden, which on a narrow screen cut the table off at the viewport edge with no way to reach the rest -- the "content missing or cut off" in bug 87534. Column hiding below keeps that scroll short; it is the safety net, not the layout. overflow-y stays hidden so the rounded corners still clip. */ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; box-shadow: var(--ssp-shadow); } .orders-table { width: 100%; border-collapse: collapse; } .orders-table thead th { padding: 12px 18px; text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.9px; text-transform: uppercase; color: var(--ssp-text-muted); background: var(--ssp-bg); border-bottom: 1px solid var(--ssp-border); white-space: nowrap; } .orders-table thead th:last-child { text-align: right; } .orders-table tbody tr { border-bottom: 1px solid var(--ssp-border-light); cursor: pointer; transition: background 0.12s; } .orders-table tbody tr:last-child { border-bottom: none; } .orders-table tbody tr:hover { background: var(--ssp-bg); } .orders-table tbody tr.selected { background: rgba(var(--ssp-primary-rgb), 0.05); } .orders-table tbody td { padding: 14px 18px; font-size: 13px; vertical-align: middle; } .orders-table tbody td:last-child { text-align: right; } .orders-table .order-num { font-weight: 700; font-size: 13px; color: var(--ssp-primary); } .orders-table .order-package { font-weight: 500; color: var(--ssp-text); } .orders-table .order-type-text { color: var(--ssp-text-secondary); } .orders-table .order-date { color: var(--ssp-text-secondary); white-space: nowrap; } /* Status badges */ .orders-table .o-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; } .o-badge-review { background: rgba(235,151,0,0.1); color: #EB9700; } .o-badge-active { background: rgba(168,180,0,0.1); color: var(--ssp-success); } .o-badge-pending { background: rgba(0,176,202,0.1); color: var(--ssp-info); } .o-badge-completed { background: rgba(74,77,78,0.1); color: #4A4D4E; } .o-badge-cancelled { background: rgba(230,0,0,0.1); color: var(--ssp-danger); } .o-badge-new { background: rgba(var(--ssp-primary-rgb),0.08); color: var(--ssp-primary); } .o-badge-processing{ background: rgba(37,40,43,0.1); color: var(--ssp-accent); } .o-badge-failed { background: rgba(230,0,0,0.1); color: var(--ssp-danger); } .o-badge-pending-payment { background: rgba(235,151,0,0.1); color: #EB9700; } /* Lets long unbroken values (OTP hashes, GUIDs) in the admin History grid's Old/New Value columns wrap onto multiple lines instead of overflowing. */ .admin-history #userHistoryTable td { word-break: break-word; overflow-wrap: anywhere; } /* Responsive: hide columns */ .orders-col-type, .orders-col-modified { display: none; } @media (min-width: 640px) { .orders-col-type { display: table-cell; } } @media (min-width: 860px) { .orders-col-modified { display: table-cell; } } .orders-table-empty { text-align: center; padding: 40px; color: var(--ssp-text-muted); font-size: 13px; } /* Order Drawer */ .order-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1050; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .order-drawer-overlay.open { opacity: 1; pointer-events: all; } .order-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--ssp-bg-white); border-left: 1px solid var(--ssp-border); z-index: 1060; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); overflow: hidden; box-shadow: -4px 0 24px rgba(0,0,0,0.12); } .order-drawer.open { transform: translateX(0); } .order-drawer-header { padding: 20px 22px; border-bottom: 1px solid var(--ssp-border); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-shrink: 0; background: var(--ssp-primary); } .order-drawer-header .drawer-title { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; color: var(--ssp-text-white); } .order-drawer-header .drawer-sub { font-size: 12px; color: rgba(255,255,255,0.8); margin-top: 3px; } .order-drawer-close { width: 30px; height: 30px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.15); color: var(--ssp-text-white); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.14s; } .order-drawer-close:hover { background: rgba(255,255,255,0.3); } .order-drawer-body { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 22px; } .order-drawer-body .section-title { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ssp-text-muted); margin-bottom: 12px; } .order-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .order-detail-cell { padding: 8px 0; border-bottom: 1px solid var(--ssp-border-light); } .order-detail-cell .detail-label { font-size: 11px; color: var(--ssp-text-muted); font-weight: 500; margin-bottom: 2px; } .order-detail-cell .detail-value { font-size: 14px; font-weight: 600; color: var(--ssp-text); } .order-detail-cell .detail-value.primary { color: var(--ssp-primary); } .order-service-item { background: var(--ssp-bg); border: 1px solid var(--ssp-border-light); border-left: 3px solid var(--ssp-primary); border-radius: 4px; padding: 8px 12px; font-size: 13px; margin-bottom: 6px; } .order-drawer-footer { padding: 16px 22px; border-top: 1px solid var(--ssp-border); display: flex; flex-wrap: wrap; gap: 9px; flex-shrink: 0; background: var(--ssp-bg-white); } .order-drawer-footer .btn-drawer-primary { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ssp-font); font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: var(--ssp-border-radius); border: none; cursor: pointer; transition: all 0.14s ease; white-space: nowrap; background: var(--ssp-primary); color: var(--ssp-text-white); } .order-drawer-footer .btn-drawer-primary:hover { background: var(--ssp-primary-dark); transform: translateY(-1px); } .order-drawer-footer .btn-drawer-primary svg { width: 16px; height: 16px; fill: #fff; } /* ============================================================ Billing Page — Table + Drawer ============================================================ */ /* Outstanding Balance Banner */ .billing-banner { background: linear-gradient(135deg, rgba(var(--ssp-primary-rgb),0.08), rgba(var(--ssp-primary-rgb),0.03)); border: 1px solid rgba(var(--ssp-primary-rgb),0.18); border-radius: var(--ssp-border-radius-lg); padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; position: relative; overflow: hidden; } .billing-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--ssp-primary-rgb),0.4), transparent); } .billing-banner .banner-label { font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ssp-text-muted); margin-bottom: 6px; } .billing-banner .banner-amount { font-size: clamp(22px,5vw,32px); font-weight: 800; letter-spacing: -0.8px; color: var(--ssp-text); } .billing-banner .banner-amount span { font-size: 0.5em; color: var(--ssp-text-secondary); vertical-align: super; margin-right: 3px; font-weight: 600; } .billing-banner .banner-due { font-size: 12px; color: var(--ssp-danger); margin-top: 5px; font-weight: 500; } .billing-banner .btn-pay { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ssp-font); font-size: 14px; font-weight: 700; padding: 12px 28px; border-radius: var(--ssp-border-radius); border: none; cursor: pointer; background: var(--ssp-primary); color: var(--ssp-text-white); transition: all 0.15s; white-space: nowrap; text-decoration: none; } .billing-banner .btn-pay:hover { background: var(--ssp-primary-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--ssp-primary-rgb),0.25); color: var(--ssp-text-white); text-decoration: none; } /* Billing Stats Row */ .billing-stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 24px; } @media (min-width: 640px) { .billing-stats-row { grid-template-columns: repeat(4, 1fr); } } .billing-stat-cell { background: var(--ssp-bg-white); border: 1px solid var(--ssp-border); border-radius: var(--ssp-border-radius); padding: 14px 16px; box-shadow: var(--ssp-shadow); } .billing-stat-label { font-size: 10px; color: var(--ssp-text-muted); font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 5px; } .billing-stat-value { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; color: var(--ssp-text); } .billing-stat-value.text-success { color: var(--ssp-success); } .billing-stat-value.text-danger { color: var(--ssp-danger); } /* Billing Table */ .billing-table-wrap { background: var(--ssp-bg-white); border: 1px solid var(--ssp-border); border-radius: var(--ssp-border-radius-lg); /* Scroll rather than clip -- see .orders-table-wrap. */ overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; box-shadow: var(--ssp-shadow); } .billing-table { width: 100%; border-collapse: collapse; } .billing-table thead th { padding: 12px 18px; text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.9px; text-transform: uppercase; color: var(--ssp-text-muted); background: var(--ssp-bg); border-bottom: 1px solid var(--ssp-border); white-space: nowrap; } .billing-table thead th.text-right { text-align: right; } .billing-table tbody tr { border-bottom: 1px solid var(--ssp-border-light); cursor: pointer; transition: background 0.12s; } .billing-table tbody tr:last-child { border-bottom: none; } .billing-table tbody tr:hover { background: var(--ssp-bg); } .billing-table tbody tr.selected { background: rgba(var(--ssp-primary-rgb), 0.05); } .billing-table tbody td { padding: 15px 18px; font-size: 13px; vertical-align: middle; } .billing-table tbody td.text-right { text-align: right; } .billing-table .inv-id { font-weight: 700; color: var(--ssp-primary); } .billing-table .inv-date { color: var(--ssp-text-secondary); white-space: nowrap; } .billing-table .inv-amount { font-weight: 600; white-space: nowrap; } .billing-table .inv-amount.text-danger { color: var(--ssp-danger); } .billing-table .inv-amount.text-success { color: var(--ssp-success); } /* Billing status badges */ .billing-table .b-badge { display: inline-flex; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; white-space: nowrap; } .b-badge-overdue { background: rgba(230,0,0,0.1); color: var(--ssp-danger); } .b-badge-paid { background: rgba(168,180,0,0.1); color: var(--ssp-success); } .b-badge-pending { background: rgba(235,151,0,0.1); color: #EB9700; } /* Responsive: hide columns. Renamed from .billing-col-due / .billing-col-acc, which named a Due and an Account column this table no longer has -- the markup is Reference, Date, Invoice, Amount, Status. Nothing carried those classes, so the rule matched nothing and every column rendered at every width. That is why Billing was cut off worse than Orders (bug 87534). Reference, Amount and Status always show: identity, money, state. Date comes back at 640 and the invoice number at 860, mirroring the Orders breakpoints. Nothing is lost on a narrow screen -- the row still carries every value in the DOM and openReceiptDrawer reads them from there. */ .billing-col-date, .billing-col-invoice { display: none; } @media (min-width: 640px) { .billing-col-date { display: table-cell; } } @media (min-width: 860px) { .billing-col-invoice { display: table-cell; } } .billing-table-empty { text-align: center; padding: 40px; color: var(--ssp-text-muted); font-size: 13px; } /* Billing Drawer (reuses order drawer base) */ .billing-drawer-footer .btn-drawer-ghost { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ssp-font); font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: var(--ssp-border-radius); border: 1px solid var(--ssp-border); background: var(--ssp-bg-white); color: var(--ssp-text-secondary); cursor: pointer; transition: all 0.14s; white-space: nowrap; text-decoration: none; } .billing-drawer-footer .btn-drawer-ghost:hover { border-color: var(--ssp-primary); color: var(--ssp-text); transform: translateY(-1px); text-decoration: none; } /* ============================================================ Profile Page ============================================================ */ /* Profile Header Card */ .profile-header-card { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; padding: 24px; background: var(--ssp-bg-white); border: 1px solid var(--ssp-border); border-radius: var(--ssp-border-radius-lg); box-shadow: var(--ssp-shadow); } .profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--ssp-primary); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: var(--ssp-text-white); flex-shrink: 0; } .profile-header-info h2 { font-size: 20px; font-weight: 700; color: var(--ssp-text); margin: 0 0 2px; } .profile-header-info p { font-size: 13px; color: var(--ssp-text-muted); margin: 0; } /* Profile Tabs */ .profile-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; border-bottom: 1px solid var(--ssp-border); padding-bottom: 12px; } .profile-tabs .ptab { font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: 20px; border: 1px solid var(--ssp-border); background: var(--ssp-bg-white); color: var(--ssp-text-secondary); cursor: pointer; transition: all 0.14s; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .profile-tabs .ptab:hover { color: var(--ssp-text); border-color: var(--ssp-primary); text-decoration: none; } .profile-tabs .ptab.active { background: rgba(var(--ssp-primary-rgb), 0.08); border-color: rgba(var(--ssp-primary-rgb), 0.35); color: var(--ssp-primary); } .profile-tabs .ptab .ptab-icon { font-size: 15px; line-height: 1; } /* Profile Tab Content */ .profile-tab-content { display: none; } .profile-tab-content.active { display: block; } /* Profile Section Card */ .profile-section { background: var(--ssp-bg-white); border: 1px solid var(--ssp-border); border-radius: var(--ssp-border-radius-lg); padding: 24px; box-shadow: var(--ssp-shadow); margin-top: 20px; margin-bottom: 20px; } .profile-section-title { font-size: 16px; font-weight: 700; color: var(--ssp-text); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--ssp-border-light); } /* Profile form fields */ .profile-field { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--ssp-border-light); } .profile-field:last-child { border-bottom: none; } .profile-field-label { font-size: 13px; font-weight: 600; color: var(--ssp-text-muted); min-width: 140px; } .profile-field-value { font-size: 14px; font-weight: 600; color: var(--ssp-text); text-align: right; } /* Override partial form styles within profile sections */ .profile-section .form-control { border-radius: var(--ssp-border-radius); border: 1px solid var(--ssp-border); padding: 10px 14px; font-size: 14px; transition: border-color 0.2s; } .profile-section .form-control:focus { border-color: var(--ssp-primary); box-shadow: 0 0 0 3px rgba(var(--ssp-primary-rgb), 0.08); } .profile-section .form-control[readonly] { background: var(--ssp-bg); color: var(--ssp-text-secondary); } .profile-section .btn-green, .profile-section .btn-signup-outline { background: var(--ssp-primary); color: var(--ssp-text-white); border: none; border-radius: var(--ssp-border-radius); padding: 10px 24px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .profile-section .btn-green:hover, .profile-section .btn-signup-outline:hover { background: var(--ssp-primary-dark); box-shadow: 0 4px 14px rgba(var(--ssp-primary-rgb), 0.2); } .profile-section .btn-cancel { background: var(--ssp-bg-white); color: var(--ssp-text-secondary); border: 1px solid var(--ssp-border); border-radius: var(--ssp-border-radius); padding: 10px 24px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; } .profile-section .btn-cancel:hover { border-color: var(--ssp-primary); color: var(--ssp-text); } .profile-section .btn-grey { background: var(--ssp-bg); color: var(--ssp-text-secondary); border: 1px solid var(--ssp-border); border-radius: var(--ssp-border-radius); padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; } .profile-section .btn-grey:hover { border-color: var(--ssp-primary); color: var(--ssp-text); } /* Profile tables */ .profile-section .table { border-collapse: collapse; width: 100%; font-size: 13px; } .profile-section .table thead th { font-size: 10px; font-weight: 600; letter-spacing: 0.9px; text-transform: uppercase; color: var(--ssp-text-muted); background: var(--ssp-bg); padding: 10px 14px; border-bottom: 1px solid var(--ssp-border); } .profile-section .table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--ssp-border-light); vertical-align: middle; } .profile-section .table tbody tr:last-child td { border-bottom: none; } .profile-section .table-bordered { border: 1px solid var(--ssp-border); border-radius: var(--ssp-border-radius); overflow: hidden; } .profile-section .table-striped tbody tr:nth-of-type(odd) { background: var(--ssp-bg); } /* Messages filter buttons */ .profile-section .myProfile-buttons { display: flex; gap: 8px; flex-wrap: wrap; } .profile-section .myProfile-buttons .btn-green { padding: 8px 16px; font-size: 12px; border-radius: 20px; } .profile-section .myProfile-buttons .btn-green.btn-selected { border-bottom: none; box-shadow: 0 0 0 2px rgba(var(--ssp-primary-rgb), 0.3); } @media (max-width: 640px) { .profile-header-card { flex-direction: column; text-align: center; } .profile-tabs { justify-content: center; } } /* Profile Form Elements */ .profile-form-group { margin-bottom: 20px; } .profile-form-label { display: block; font-size: 12px; font-weight: 600; color: var(--ssp-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .profile-form-input { width: 100%; max-width: 400px; height: 44px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-border-radius); padding: 0 14px; font-size: 14px; font-family: var(--ssp-font); color: var(--ssp-text); background: var(--ssp-bg-white); transition: border-color 0.2s, box-shadow 0.2s; } .profile-form-input:focus { border-color: var(--ssp-primary); box-shadow: 0 0 0 3px rgba(var(--ssp-primary-rgb), 0.08); outline: none; } .profile-form-input[readonly] { background: var(--ssp-bg); color: var(--ssp-text-secondary); cursor: default; } .profile-form-input::placeholder { color: var(--ssp-text-muted); } .profile-input-wrap { position: relative; max-width: 400px; } .profile-input-wrap .profile-form-input { max-width: 100%; } .profile-input-wrap .hidePasswordIconStyle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; } .profile-form-actions { display: flex; gap: 10px; margin-top: 24px; } .profile-btn-primary { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ssp-font); font-size: 14px; font-weight: 600; padding: 10px 24px; border-radius: var(--ssp-border-radius); border: none; cursor: pointer; background: var(--ssp-primary); color: var(--ssp-text-white); transition: all 0.2s; } .profile-btn-primary:hover { background: var(--ssp-primary-dark); box-shadow: 0 4px 14px rgba(var(--ssp-primary-rgb), 0.2); transform: translateY(-1px); } .profile-btn-outline { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ssp-font); font-size: 14px; font-weight: 600; padding: 10px 24px; border-radius: var(--ssp-border-radius); border: 1px solid var(--ssp-border); background: var(--ssp-bg-white); color: var(--ssp-text-secondary); cursor: pointer; transition: all 0.2s; } .profile-btn-outline:hover { border-color: var(--ssp-primary); color: var(--ssp-text); } /* Syncfusion DatePicker inside drawer/forms */ .profile-datepicker.e-input-group { border: 1px solid var(--ssp-border) !important; border-radius: var(--ssp-border-radius) !important; height: 44px !important; padding: 0 14px !important; font-family: var(--ssp-font) !important; font-size: 14px !important; } .profile-datepicker.e-input-group:hover, .profile-datepicker.e-input-group.e-input-focus { border-color: var(--ssp-primary) !important; } .profile-datepicker.e-input-group .e-input { font-family: var(--ssp-font) !important; font-size: 14px !important; color: var(--ssp-text) !important; } /* Settings toggle */ .profile-toggle-row { display: flex; align-items: center; justify-content: space-between; max-width: 400px; padding: 12px 0; } .profile-toggle-checkbox { width: 20px; height: 20px; accent-color: var(--ssp-primary); cursor: pointer; } /* Message action buttons */ .msg-action-btn { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 20px; text-decoration: none; transition: all 0.14s; cursor: pointer; } .msg-action-read { background: rgba(var(--ssp-primary-rgb), 0.08); color: var(--ssp-primary); } .msg-action-read:hover { background: rgba(var(--ssp-primary-rgb), 0.15); text-decoration: none; color: var(--ssp-primary); } .msg-action-unread { background: var(--ssp-bg); color: var(--ssp-text-secondary); border: 1px solid var(--ssp-border); } .msg-action-unread:hover { border-color: var(--ssp-primary); color: var(--ssp-text); text-decoration: none; } /* Message filter tabs */ .msg-filter-tabs { margin-bottom: 0; } /* ============================================================ DataTables Theme Override (Profile History & Messages) Targets both DT 2.x (dt-*) and legacy (dataTables_*) classes ============================================================ */ /* Search / filter input */ #myProfile .dt-search, .profile-section .dt-search, #myProfile .dataTables_filter, .profile-section .dataTables_filter { margin-bottom: 0; } #myProfile .dt-search label, .profile-section .dt-search label, #myProfile .dataTables_filter label, .profile-section .dataTables_filter label { font-size: 13px !important; font-weight: 500 !important; color: var(--ssp-text-secondary) !important; text-transform: none !important; letter-spacing: normal !important; display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; } #myProfile .dt-search input, .profile-section .dt-search input, #myProfile .dataTables_filter input, .profile-section .dataTables_filter input { border: 1px solid var(--ssp-border) !important; border-radius: var(--ssp-border-radius) !important; padding: 8px 14px !important; font-size: 13px !important; font-family: var(--ssp-font) !important; color: var(--ssp-text) !important; outline: none !important; transition: border-color 0.2s; min-width: 200px; height: 38px !important; } #myProfile .dt-search input:focus, .profile-section .dt-search input:focus, #myProfile .dataTables_filter input:focus, .profile-section .dataTables_filter input:focus { border-color: var(--ssp-primary) !important; box-shadow: 0 0 0 3px rgba(var(--ssp-primary-rgb), 0.08) !important; } /* Length menu */ #myProfile .dt-length, .profile-section .dt-length, #myProfile .dataTables_length, .profile-section .dataTables_length { margin-bottom: 0; } #myProfile .dt-length label, .profile-section .dt-length label, #myProfile .dataTables_length label, .profile-section .dataTables_length label { font-size: 13px !important; font-weight: 500 !important; color: var(--ssp-text-secondary) !important; text-transform: none !important; letter-spacing: normal !important; display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; } #myProfile .dt-length select, .profile-section .dt-length select, #myProfile .dataTables_length select, .profile-section .dataTables_length select { border: 1px solid var(--ssp-border) !important; border-radius: var(--ssp-border-radius) !important; padding: 6px 30px 6px 10px !important; font-size: 13px !important; font-family: var(--ssp-font) !important; color: var(--ssp-text) !important; background: var(--ssp-bg-white) !important; outline: none !important; cursor: pointer; height: 38px !important; transition: border-color 0.2s; } #myProfile .dt-length select:focus, .profile-section .dt-length select:focus, #myProfile .dataTables_length select:focus, .profile-section .dataTables_length select:focus { border-color: var(--ssp-primary) !important; } /* Info text (Showing X to Y of Z) */ #myProfile .dt-info, .profile-section .dt-info, #myProfile .dataTables_info, .profile-section .dataTables_info { font-size: 13px !important; color: var(--ssp-text-secondary) !important; padding: 0 !important; margin: 0 !important; } /* Pagination — DT 2.x */ #myProfile .dt-paging, .profile-section .dt-paging { padding: 12px 0; display: flex; justify-content: flex-end; gap: 4px; flex-wrap: wrap; } #myProfile .dt-paging .dt-paging-button, .profile-section .dt-paging .dt-paging-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 34px !important; height: 34px !important; padding: 0 10px !important; font-size: 12px !important; font-weight: 600 !important; font-family: var(--ssp-font); color: var(--ssp-text-secondary) !important; background: var(--ssp-bg-white) !important; border: 1px solid var(--ssp-border) !important; border-radius: var(--ssp-border-radius) !important; cursor: pointer; transition: all 0.14s; text-decoration: none !important; background-image: none !important; box-shadow: none !important; } #myProfile .dt-paging .dt-paging-button:hover, .profile-section .dt-paging .dt-paging-button:hover { background: var(--ssp-bg) !important; border-color: var(--ssp-primary) !important; color: var(--ssp-primary) !important; box-shadow: none !important; } #myProfile .dt-paging .dt-paging-button.current, .profile-section .dt-paging .dt-paging-button.current, #myProfile .dt-paging .dt-paging-button.current:hover, .profile-section .dt-paging .dt-paging-button.current:hover { background: var(--ssp-primary) !important; border-color: var(--ssp-primary) !important; color: var(--ssp-text-white) !important; font-weight: 700 !important; box-shadow: none !important; } #myProfile .dt-paging .dt-paging-button.disabled, .profile-section .dt-paging .dt-paging-button.disabled, #myProfile .dt-paging .dt-paging-button.disabled:hover, .profile-section .dt-paging .dt-paging-button.disabled:hover, #myProfile .dt-paging .dt-paging-button.disabled:active, .profile-section .dt-paging .dt-paging-button.disabled:active { opacity: 0.4 !important; cursor: default !important; pointer-events: none; background: var(--ssp-bg-white) !important; color: var(--ssp-text-muted) !important; border-color: var(--ssp-border) !important; box-shadow: none !important; } #myProfile .dt-paging .dt-paging-button:active, .profile-section .dt-paging .dt-paging-button:active { background: rgba(var(--ssp-primary-rgb), 0.12) !important; box-shadow: none !important; } #myProfile .dt-paging .ellipsis, .profile-section .dt-paging .ellipsis { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 34px !important; height: 34px !important; font-size: 12px !important; color: var(--ssp-text-muted) !important; } /* Pagination — Legacy DT classes */ #myProfile .dataTables_paginate, .profile-section .dataTables_paginate { padding: 12px 0; display: flex; justify-content: flex-end; gap: 4px; flex-wrap: wrap; } #myProfile .dataTables_paginate .paginate_button, .profile-section .dataTables_paginate .paginate_button { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 34px !important; height: 34px !important; padding: 0 10px !important; font-size: 12px !important; font-weight: 600 !important; font-family: var(--ssp-font); color: var(--ssp-text-secondary) !important; background: var(--ssp-bg-white) !important; border: 1px solid var(--ssp-border) !important; border-radius: var(--ssp-border-radius) !important; cursor: pointer; transition: all 0.14s; text-decoration: none !important; background-image: none !important; box-shadow: none !important; } #myProfile .dataTables_paginate .paginate_button:hover, .profile-section .dataTables_paginate .paginate_button:hover { background: var(--ssp-bg) !important; border-color: var(--ssp-primary) !important; color: var(--ssp-primary) !important; box-shadow: none !important; } #myProfile .dataTables_paginate .paginate_button.current, .profile-section .dataTables_paginate .paginate_button.current, #myProfile .dataTables_paginate .paginate_button.current:hover, .profile-section .dataTables_paginate .paginate_button.current:hover { background: var(--ssp-primary) !important; border-color: var(--ssp-primary) !important; color: var(--ssp-text-white) !important; font-weight: 700 !important; box-shadow: none !important; } #myProfile .dataTables_paginate .paginate_button.disabled, .profile-section .dataTables_paginate .paginate_button.disabled, #myProfile .dataTables_paginate .paginate_button.disabled:hover, .profile-section .dataTables_paginate .paginate_button.disabled:hover { opacity: 0.4 !important; cursor: default !important; pointer-events: none; background: var(--ssp-bg-white) !important; color: var(--ssp-text-muted) !important; border-color: var(--ssp-border) !important; box-shadow: none !important; } #myProfile .dataTables_paginate .paginate_button:active, .profile-section .dataTables_paginate .paginate_button:active { background: rgba(var(--ssp-primary-rgb), 0.12) !important; box-shadow: none !important; } /* Sorting icons */ #myProfile .orders-table thead th.sorting, .profile-section .orders-table thead th.sorting, #myProfile .orders-table thead th.sorting_asc, .profile-section .orders-table thead th.sorting_asc, #myProfile .orders-table thead th.sorting_desc, .profile-section .orders-table thead th.sorting_desc, #myProfile .orders-table thead th.dt-orderable-asc, .profile-section .orders-table thead th.dt-orderable-asc, #myProfile .orders-table thead th.dt-orderable-desc, .profile-section .orders-table thead th.dt-orderable-desc { cursor: pointer; position: relative; padding-right: 24px !important; } /* Hide default DT sort icons */ #myProfile .orders-table thead th .dt-column-order, .profile-section .orders-table thead th .dt-column-order { display: none !important; } /* DataTables wrapper spacing */ #myProfile .dt-container, .profile-section .dt-container, #myProfile .dataTables_wrapper, .profile-section .dataTables_wrapper { padding: 0; } #myProfile .dt-container > .row, .profile-section .dt-container > .row, #myProfile .dataTables_wrapper > .row, .profile-section .dataTables_wrapper > .row { margin: 0; align-items: center; } #myProfile .dt-container > .row > div, .profile-section .dt-container > .row > div, #myProfile .dataTables_wrapper > .row > div, .profile-section .dataTables_wrapper > .row > div { padding: 4px 0; } /* (DT layout grid rules consolidated below) */ /* Empty table message */ #myProfile .dt-empty, .profile-section .dt-empty, #myProfile .dataTables_empty, .profile-section .dataTables_empty { text-align: center; padding: 40px !important; color: var(--ssp-text-muted) !important; font-size: 13px !important; } /* ============================================================ Profile — Reset legacy #myProfile styles that break new layout ============================================================ */ /* Stop old ul styles from affecting profile-tabs, DataTables, etc. */ #myProfile .profile-tabs { flex-direction: row !important; border: 0 !important; background: none !important; } #myProfile .profile-section ul { display: initial; flex-direction: initial; } #myProfile .profile-section ul li { width: auto; max-width: none; margin-left: 0; margin-bottom: 0; padding-left: 0; } #myProfile .profile-section ul li a { padding: initial; font-size: initial; font-weight: initial; line-height: initial; border-radius: initial; color: initial; } /* Fix DataTables pagination ul/li */ #myProfile .dt-paging, .profile-section .dt-paging { flex-direction: row !important; } #myProfile .dt-paging button, .profile-section .dt-paging button { width: auto !important; max-width: none !important; margin-left: 0 !important; padding-left: initial !important; } #myProfile .dataTables_paginate, .profile-section .dataTables_paginate { flex-direction: row !important; } #myProfile .dataTables_paginate a, .profile-section .dataTables_paginate a, #myProfile .dataTables_paginate span a, .profile-section .dataTables_paginate span a { padding: 0 10px !important; font-size: 12px !important; font-weight: 600 !important; line-height: 34px !important; color: var(--ssp-text-secondary) !important; border-radius: var(--ssp-border-radius) !important; } /* Subtitle spacing */ #myProfile .orders-page-subtitle { margin-top: 20px; margin-bottom: 20px; } /* Profile section breathing room */ #myProfile .profile-section { margin-bottom: 0; } /* Table wrap inside profile-section — remove double border. Overflow is reset per axis, not to visible: this selector outranks .orders-table-wrap, so overflow:visible here cancelled its horizontal scroll and let the Profile/Admin tables spill past the card (bug 87534). y stays hidden because visible next to x:auto computes to auto and can add a stray vertical scrollbar. */ .profile-section .orders-table-wrap { border: none; box-shadow: none; border-radius: 0; overflow-x: auto; overflow-y: hidden; } /* DT layout rows — proper flex spacing */ #myProfile .dt-layout-row, .profile-section .dt-layout-row { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; padding: 10px 0 !important; margin: 0 !important; gap: 12px; } #myProfile .dt-layout-row:first-child, .profile-section .dt-layout-row:first-child { padding-top: 4px !important; padding-bottom: 14px !important; border-bottom: 1px solid var(--ssp-border-light); margin-bottom: 0 !important; } #myProfile .dt-layout-row:last-child, .profile-section .dt-layout-row:last-child { border-top: 1px solid var(--ssp-border-light); padding-top: 14px !important; padding-bottom: 4px !important; margin-top: 0 !important; } /* DT 2.x layout cells */ #myProfile .dt-layout-cell, .profile-section .dt-layout-cell { padding: 0 !important; flex-shrink: 0; } /* Table inside profile should have proper spacing */ #myProfile .orders-table thead th, .profile-section .orders-table thead th { padding: 12px 18px !important; } #myProfile .orders-table tbody td, .profile-section .orders-table tbody td { padding: 14px 18px !important; } /* ============================================================ Management Dashboard ============================================================ */ .mgmt-welcome { padding: 24px 0 8px; } .mgmt-welcome h2 { font-size: 22px; font-weight: 700; color: var(--ssp-text); margin: 0 0 4px; } .mgmt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 16px 0 40px; } .mgmt-card { display: flex; align-items: center; gap: 16px; background: var(--ssp-bg-white); border: 1px solid var(--ssp-border); border-radius: var(--ssp-border-radius-lg); padding: 20px; text-decoration: none; transition: all 0.2s ease; box-shadow: var(--ssp-shadow); } .mgmt-card:hover { border-color: var(--ssp-primary); box-shadow: 0 4px 16px rgba(var(--ssp-primary-rgb), 0.12); transform: translateY(-2px); text-decoration: none; } .mgmt-card-icon { width: 48px; height: 48px; background: rgba(var(--ssp-primary-rgb), 0.06); border-radius: var(--ssp-border-radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mgmt-card-icon img { width: 28px; height: 28px; object-fit: contain; } .mgmt-card-body { flex: 1; min-width: 0; } .mgmt-card-title { font-size: 15px; font-weight: 700; color: var(--ssp-text); margin: 0 0 2px; } .mgmt-card:hover .mgmt-card-title { color: var(--ssp-primary); } .mgmt-card-text { font-size: 12px; color: var(--ssp-text-muted); margin: 0; } @media (max-width: 640px) { .mgmt-cards { grid-template-columns: 1fr; } } /* ============================================================ Purchase Page ============================================================ */ .purchase-map-wrap { margin-bottom: 20px; border-radius: var(--ssp-border-radius); overflow: hidden; border: 1px solid var(--ssp-border); } .purchase-map-wrap .mod-map-container { height: 350px; width: 100%; } .purchase-search-wrap { max-width: 500px; margin: 0 auto; text-align: center; } .purchase-search-wrap .profile-form-label { text-align: center; } .purchase-search-wrap .mod-search { margin: 0 auto; } /* Installation Address Card (shared across all order flows) */ .install-address-card { border: 1px solid var(--ssp-border, #4A4D4E); border-radius: var(--ssp-border-radius-lg, 10px); overflow: hidden; margin-bottom: 24px; background: var(--ssp-bg-white, #ffffff); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .install-address-header { background: var(--ssp-primary, #e60000); color: #fff; padding: 12px 20px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; letter-spacing: 0.3px; } .install-address-body { padding: 20px; } .install-address-row { padding: 8px 0; } .install-address-row--full { padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--ssp-border-light, #4A4D4E); } .install-address-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--ssp-text-muted, #4A4D4E); margin-bottom: 3px; } .install-address-value { display: block; font-size: 14px; font-weight: 600; color: var(--ssp-text, #25282B); word-break: break-word; line-height: 1.4; } .install-address-pairs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 24px; } .install-address-pairs .install-address-row { border-bottom: none; padding: 8px 0; } @media (max-width: 768px) { .install-address-pairs { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .install-address-pairs { grid-template-columns: 1fr; } } .install-address-date { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ssp-border-light, #4A4D4E); } .install-address-date-input { width: 100%; max-width: 280px; height: 40px; border: 1px solid var(--ssp-border, #4A4D4E); border-radius: var(--ssp-border-radius, 8px); padding: 0 12px; font-family: var(--ssp-font, 'Open Sans', sans-serif); font-size: 14px; color: var(--ssp-text, #25282B); margin-top: 4px; } .install-address-date-input:focus { border-color: var(--ssp-primary, #e60000); outline: none; box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.08); } /* Only show invalid state after user interaction */ .install-address-date-input:invalid { border-color: var(--ssp-border, #4A4D4E); box-shadow: none; } .install-address-date-input:user-invalid, form.was-validated .install-address-date-input:invalid { border-color: var(--ssp-danger, #E60000); box-shadow: 0 0 0 3px rgba(230, 0, 0, 0.08); } .purchase-products-section { margin-top: 28px; padding-bottom: 40px; } /* Location Details Card */ .purchase-location-card { margin-top: 20px; border: 1px solid rgba(230, 0, 0, 0.3); border-radius: var(--ssp-border-radius-lg); overflow: hidden; background: #fff; } .purchase-location-badge { background: var(--ssp-primary); color: #fff; padding: 10px 20px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .purchase-location-body { padding: 16px 20px; } .purchase-location-row { padding: 8px 0; border-bottom: 1px solid var(--ssp-border-light); } .purchase-location-row:last-child { border-bottom: none; } .purchase-location-row--full { padding-bottom: 12px; margin-bottom: 4px; } .purchase-location-label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ssp-text-muted); margin-bottom: 2px; } .purchase-location-value { display: block; font-size: 14px; font-weight: 600; color: var(--ssp-text); word-break: break-word; } .purchase-location-pairs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 24px; } .purchase-location-pairs .purchase-location-row { border-bottom: none; padding: 6px 0; } @media (max-width: 768px) { .purchase-location-pairs { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .purchase-location-pairs { grid-template-columns: 1fr; } } /* Terms & Conditions checkbox grid */ .purchase-tc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .purchase-tc-grid { grid-template-columns: 1fr; } } .purchase-tc-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--ssp-bg); border: 1px solid var(--ssp-border-light); border-radius: var(--ssp-border-radius); font-size: 13px; } .purchase-tc-item a { flex: 1; } /* Purchase — User Toggle (Existing / New) */ .purchase-user-toggle { display: flex; gap: 0; margin-bottom: 20px; border: 1px solid var(--ssp-border); border-radius: var(--ssp-border-radius); overflow: hidden; max-width: 320px; } .purchase-toggle-btn { flex: 1; padding: 10px 20px; font-family: var(--ssp-font); font-size: 13px; font-weight: 600; border: none; background: var(--ssp-bg-white); color: var(--ssp-text-secondary); cursor: pointer; transition: all 0.15s; text-align: center; } .purchase-toggle-btn + .purchase-toggle-btn { border-left: 1px solid var(--ssp-border); } .purchase-toggle-btn.active { background: var(--ssp-primary); color: #fff; } .purchase-toggle-btn:hover:not(.active) { background: var(--ssp-bg); } /* Purchase — Form Grid */ .purchase-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; } @media (max-width: 640px) { .purchase-form-grid { grid-template-columns: 1fr; } } /* ============================================================ jQuery UI Datepicker — Vodacom Theme ============================================================ */ .ui-datepicker { background: #fff; border: 1px solid var(--ssp-border, #4A4D4E); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 0; width: 300px; font-family: var(--ssp-font, 'Open Sans', sans-serif); z-index: 1060 !important; overflow: hidden; } .ui-datepicker-header { background: var(--ssp-primary, #e60000); color: #fff; border: none; border-radius: 0; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; font-weight: 700; } .ui-datepicker-header .ui-datepicker-title { font-size: 15px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 6px; } .ui-datepicker-header .ui-datepicker-title select { background: rgba(255, 255, 255, 0.2); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; padding: 2px 4px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; outline: none; } .ui-datepicker-header .ui-datepicker-title select option { background: #fff; color: #25282B; } .ui-datepicker-header .ui-datepicker-prev, .ui-datepicker-header .ui-datepicker-next { cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.15); border: none; transition: background 0.15s; top: auto; position: relative; } .ui-datepicker-header .ui-datepicker-prev:hover, .ui-datepicker-header .ui-datepicker-next:hover { background: rgba(255, 255, 255, 0.3); } .ui-datepicker-header .ui-datepicker-prev span, .ui-datepicker-header .ui-datepicker-next span { display: none; } .ui-datepicker-header .ui-datepicker-prev::after { content: '\2039'; color: #fff; font-size: 20px; font-weight: 700; line-height: 1; } .ui-datepicker-header .ui-datepicker-next::after { content: '\203A'; color: #fff; font-size: 20px; font-weight: 700; line-height: 1; } .ui-datepicker-calendar { width: 100%; border-collapse: collapse; margin: 0; padding: 8px; } .ui-datepicker-calendar thead th { padding: 8px 0; text-align: center; font-size: 11px; font-weight: 700; color: var(--ssp-text-muted, #4A4D4E); text-transform: uppercase; letter-spacing: 0.5px; border: none; background: none; } .ui-datepicker-calendar tbody td { padding: 2px; text-align: center; border: none; background: none; } .ui-datepicker-calendar tbody td a, .ui-datepicker-calendar tbody td span { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; font-size: 13px; font-weight: 500; color: var(--ssp-text, #25282B); text-decoration: none; transition: all 0.12s; border: none; background: none; } .ui-datepicker-calendar tbody td a:hover { background: rgba(var(--ssp-primary-rgb, 230, 0, 0), 0.08); color: var(--ssp-primary, #e60000); } .ui-datepicker-calendar tbody td .ui-state-active { background: var(--ssp-primary, #e60000) !important; color: #fff !important; font-weight: 700; } .ui-datepicker-calendar tbody td .ui-state-highlight { background: rgba(var(--ssp-primary-rgb, 230, 0, 0), 0.06); color: var(--ssp-primary, #e60000); font-weight: 700; } .ui-datepicker-calendar tbody td.ui-datepicker-unselectable span { color: #4A4D4E; cursor: default; } .ui-datepicker-calendar tbody td.ui-datepicker-today a { font-weight: 700; color: var(--ssp-primary, #e60000); } /* Remove default jQuery UI background images/sprites */ .ui-datepicker .ui-widget-header, .ui-datepicker .ui-state-default, .ui-datepicker .ui-state-hover, .ui-datepicker .ui-state-active { background-image: none !important; } .ui-datepicker .ui-corner-all { border-radius: 0; } /* ── Homepage footer ── */ .hp-footer { background-color: #4A4D4E; color: rgba(255, 255, 255, 0.7); font-size: 13px; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .hp-footer-links { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; } .hp-footer-links a { color: rgba(255, 255, 255, 0.7); text-decoration: none; white-space: nowrap; } .hp-footer-links a:hover { color: #fff; text-decoration: underline; } .hp-footer-copyright { color: rgba(255, 255, 255, 0.7); white-space: nowrap; } /* ============================================================ Shared alert / banner components (Vodafone palette) Black text on bright fills (Spring Green / Fresh Orange), white on Red / Aqua Blue. ============================================================ */ .ssp-alert { border-radius: var(--ssp-border-radius, 8px); padding: 14px 20px; margin: 16px auto; max-width: 1100px; font-size: 0.95rem; font-weight: 600; } .ssp-alert--success { background: var(--ssp-success, #A8B400); color: #000000; border: 1px solid var(--ssp-success, #A8B400); } .ssp-alert--error { background: var(--ssp-danger, #E60000); color: #FFFFFF; border: 1px solid var(--ssp-danger-dark, #820000); } .ssp-alert--info { background: var(--ssp-info, #00B0CA); color: #FFFFFF; border: 1px solid var(--ssp-info-dark, #007C92); } .ssp-alert--warning { background: var(--ssp-warning, #EB9700); color: #000000; border: 1px solid var(--ssp-warning, #EB9700); } .ssp-alert--brand { background: var(--ssp-primary, #E60000); color: #FFFFFF; border: 1px solid var(--ssp-primary-dark, #820000); text-align: center; box-shadow: 0 2px 6px rgba(230, 0, 0, 0.25); }