/* Minification failed. Returning unminified contents. (7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (65,17): run-time error CSS1039: Token not allowed after unary operator: '-color-base' (66,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-base' (67,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (68,23): run-time error CSS1039: Token not allowed after unary operator: '-font-weight-base' (69,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-base' (74,24): run-time error CSS1039: Token not allowed after unary operator: '-spacer-5' (75,25): run-time error CSS1039: Token not allowed after unary operator: '-spacer-5' (2027,21): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-width' (2272,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-width' (2307,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-width' (2337,31): run-time error CSS1046: Expect comma, found '255' (2337,39): run-time error CSS1046: Expect comma, found '/' (2396,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (2402,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2430,17): run-time error CSS1039: Token not allowed after unary operator: '-color-off-blue' (2435,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2453,17): run-time error CSS1039: Token not allowed after unary operator: '-color-off-blue' (2463,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2530,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (2556,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (2561,17): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (2565,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (2572,17): run-time error CSS1039: Token not allowed after unary operator: '-color-off-blue' (2589,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2643,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (2963,17): run-time error CSS1039: Token not allowed after unary operator: '-color-off-blue' (2982,27): run-time error CSS1039: Token not allowed after unary operator: '-spacer-10' (2986,32): run-time error CSS1039: Token not allowed after unary operator: '-spacer-3-5' (2994,21): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-width' (2995,25): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-width' (3007,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-md' (3010,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (3034,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (3051,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-md' (3053,27): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (3057,19): run-time error CSS1039: Token not allowed after unary operator: '-spacer-3-5' (3085,23): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-width' (3516,17): run-time error CSS1039: Token not allowed after unary operator: '-color-off-blue' (3526,34): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (3679,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-width' (4294,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4379,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (4385,21): run-time error CSS1039: Token not allowed after unary operator: '-color-white' (4409,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (4413,17): run-time error CSS1039: Token not allowed after unary operator: '-color-light-blue-grey' (4417,17): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (4421,17): run-time error CSS1039: Token not allowed after unary operator: '-color-title' (4427,24): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (4431,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-xs' (4435,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (4439,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (4443,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-md' (4447,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-lg' (4455,24): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (4459,23): run-time error CSS1039: Token not allowed after unary operator: '-spacer-3-5' (4460,24): run-time error CSS1039: Token not allowed after unary operator: '-spacer-3-5' (4465,28): run-time error CSS1039: Token not allowed after unary operator: '-spacer-3-5' (4466,29): run-time error CSS1039: Token not allowed after unary operator: '-spacer-3-5' (4470,23): run-time error CSS1039: Token not allowed after unary operator: '-spacer-2-5' (4474,24): run-time error CSS1039: Token not allowed after unary operator: '-spacer-2-5' (4478,25): run-time error CSS1039: Token not allowed after unary operator: '-spacer-3-5' (4482,22): run-time error CSS1039: Token not allowed after unary operator: '-spacer-5' (4486,22): run-time error CSS1039: Token not allowed after unary operator: '-spacer-7' (4490,25): run-time error CSS1039: Token not allowed after unary operator: '-spacer-7-5' (4494,22): run-time error CSS1039: Token not allowed after unary operator: '-spacer-12-5' (4498,25): run-time error CSS1039: Token not allowed after unary operator: '-spacer-12-5' (4502,24): run-time error CSS1039: Token not allowed after unary operator: '-spacer-7-5' (4503,25): run-time error CSS1039: Token not allowed after unary operator: '-spacer-7-5' (4507,23): run-time error CSS1039: Token not allowed after unary operator: '-spacer-12-5' (4508,26): run-time error CSS1039: Token not allowed after unary operator: '-spacer-12-5' (4512,15): run-time error CSS1039: Token not allowed after unary operator: '-spacer-2-5' (4517,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (4519,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (4522,25): run-time error CSS1039: Token not allowed after unary operator: '-spacer-5' (4528,15): run-time error CSS1039: Token not allowed after unary operator: '-spacer-2-5' (4529,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (4530,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (4538,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (4539,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (4543,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (4547,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (4548,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (4577,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (4581,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (4583,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (4589,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (4622,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (4660,17): run-time error CSS1039: Token not allowed after unary operator: '-color-title' (4661,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (4669,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (4767,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (4861,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (5143,27): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (5156,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (5165,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (5166,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (5178,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (5192,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (5211,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (5213,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (5264,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-md' (5265,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (5279,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (5282,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (5298,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (5299,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (5311,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (5330,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (5351,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (5353,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (5660,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (5688,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (5711,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-lg' (5713,27): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (5721,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-md' (5731,21): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (5733,27): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (5757,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (5805,17): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (5833,18): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (5841,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (5851,17): run-time error CSS1039: Token not allowed after unary operator: '-color-title' (5903,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (5905,27): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (5963,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (5972,17): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6012,25): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6013,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-md' (6019,25): run-time error CSS1039: Token not allowed after unary operator: '-color-title' (6033,25): run-time error CSS1039: Token not allowed after unary operator: '-color-light-blue-grey' (6040,33): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-xs' (6049,21): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6064,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-xs' (6066,25): run-time error CSS1039: Token not allowed after unary operator: '-color-light-blue-grey' (6071,29): run-time error CSS1039: Token not allowed after unary operator: '-color-light-blue-grey' (6109,29): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6115,44): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (6129,21): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6130,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-md' (6153,29): run-time error CSS1039: Token not allowed after unary operator: '-color-title' (6154,33): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-xs' (6182,21): run-time error CSS1039: Token not allowed after unary operator: '-color-title' (6183,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (6201,25): run-time error CSS1039: Token not allowed after unary operator: '-color-title' (6202,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-xs' (6204,31): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (6235,21): run-time error CSS1039: Token not allowed after unary operator: '-color-title' (6236,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (6237,27): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (6241,25): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (6258,29): run-time error CSS1039: Token not allowed after unary operator: '-color-title' (6263,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (6264,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (6266,27): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (6310,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (6313,17): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6318,21): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6330,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (6377,25): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6383,40): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (6425,21): run-time error CSS1039: Token not allowed after unary operator: '-color-off-blue' (6434,21): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6448,21): run-time error CSS1039: Token not allowed after unary operator: '-color-light-blue-grey' (6449,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-xs' (6462,17): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6463,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (6472,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (6476,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (6519,21): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6520,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-md' (6527,21): run-time error CSS1039: Token not allowed after unary operator: '-color-light-blue-grey' (6528,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-xs' (6547,17): run-time error CSS1039: Token not allowed after unary operator: '-color-light-blue-grey' (6548,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-xs' (6557,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (6558,17): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6571,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (6572,17): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6602,21): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6606,25): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6620,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (6624,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (6633,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-md' (6660,25): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6661,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (6668,25): run-time error CSS1039: Token not allowed after unary operator: '-color-light-blue-grey' (6669,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-xs' (6685,25): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (6687,43): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (6688,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (6700,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (6704,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (6717,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (6724,21): run-time error CSS1039: Token not allowed after unary operator: '-color-light-blue-grey' (6725,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-xs' (6731,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (6734,21): run-time error CSS1039: Token not allowed after unary operator: '-color-light-blue-grey' (6741,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (6742,21): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6748,25): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6755,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (6756,21): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6769,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (6770,21): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6800,25): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6804,29): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6815,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (6823,36): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (6828,25): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (6829,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (6854,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-xs' (6855,25): run-time error CSS1039: Token not allowed after unary operator: '-color-off-blue' (6870,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-xs' (6880,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-xs' (6897,25): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (6909,25): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (6913,25): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6917,25): run-time error CSS1039: Token not allowed after unary operator: '-color-darker-blue' (6921,29): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (6939,25): run-time error CSS1039: Token not allowed after unary operator: '-color-light-blue-grey' (6940,29): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (7205,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (9029,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9038,22): run-time error CSS1039: Token not allowed after unary operator: '-mystic-gradient' (9170,31): run-time error CSS1046: Expect comma, found '255' (9170,39): run-time error CSS1046: Expect comma, found '/' (9314,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (9342,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (9365,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-lg' (9367,27): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (9375,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-md' (9524,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-md' (9526,27): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (9537,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-md' (9539,27): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (9808,17): run-time error CSS1039: Token not allowed after unary operator: '-color-off-blue' (9862,31): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (9895,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (9929,21): run-time error CSS1039: Token not allowed after unary operator: '-color-off-blue' (9968,25): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (10022,21): run-time error CSS1039: Token not allowed after unary operator: '-color-off-blue' (10027,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (10037,21): run-time error CSS1039: Token not allowed after unary operator: '-color-off-blue' (10058,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (10076,21): run-time error CSS1039: Token not allowed after unary operator: '-color-off-blue' (10077,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (10078,27): run-time error CSS1039: Token not allowed after unary operator: '-font-family-base' (10096,25): run-time error CSS1039: Token not allowed after unary operator: '-color-off-blue' (10097,31): run-time error CSS1039: Token not allowed after unary operator: '-font-family-base' (10105,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-md' (10109,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (10131,21): run-time error CSS1039: Token not allowed after unary operator: '-color-off-blue' (10141,29): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (10163,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (10182,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (10219,17): run-time error CSS1039: Token not allowed after unary operator: '-color-off-blue' (10237,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base' (10275,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (10289,21): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (10292,27): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (10297,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (10302,36): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (10554,36): run-time error CSS1034: Expected closing parenthesis, found ',' (10554,36): run-time error CSS1042: Expected function, found ',' (10554,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (10560,30): run-time error CSS1046: Expect comma, found '95' (10560,36): run-time error CSS1046: Expect comma, found '/' (10566,36): run-time error CSS1034: Expected closing parenthesis, found ',' (10566,36): run-time error CSS1042: Expected function, found ',' (10566,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (10572,37): run-time error CSS1034: Expected closing parenthesis, found ',' (10572,37): run-time error CSS1042: Expected function, found ',' (10572,41): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')' (10580,28): run-time error CSS1039: Token not allowed after unary operator: '-bs-danger' (10581,17): run-time error CSS1039: Token not allowed after unary operator: '-bs-white' (10585,32): run-time error CSS1039: Token not allowed after unary operator: '-bs-darkred' (10586,21): run-time error CSS1039: Token not allowed after unary operator: '-bs-white' (10826,6): run-time error CSS1030: Expected identifier, found ' ' (10827,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10969,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-md' (10971,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-sm' (10991,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (10995,21): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' (11052,6): run-time error CSS1030: Expected identifier, found ' ' (11053,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (11278,25): run-time error CSS1039: Token not allowed after unary operator: '-font-size-base-sm' */ /* ========================================================================== variables.css - Design system custom properties ========================================================================== */ :root { --color-base: #000000; --color-title: #101010; --color-primary: #C808BD; --color-off-blue: #AEB9E1; --color-white: #ffffff; --color-red: ##FF0000; --color-light-blue-grey: #486581; --color-darker-blue: #243B53; --font-family-base: 'Inter', sans-serif; --font-size-base-xs: 10px; --font-size-base-sm: 12px; --font-size-base: 14px; --font-size-base-md: 16px; --font-size-base-lg: 24px; --font-weight-base: 400; --line-height-base: 1.5em; --line-height-sm: 1.2em; --spacer: 16px; --spacer-2-5: calc(var(--spacer) * 0.625); /* 10px */ --spacer-3-5: calc(var(--spacer) * 0.9375); /* 15px */ --spacer-5: calc(var(--spacer) * 1.25); /* 20px */ --spacer-7: calc(var(--spacer) * 1.75); /* 28px */ --spacer-7-5: calc(var(--spacer) * 1.875); /* 30px */ --spacer-10: calc(var(--spacer) * 2.5); /* 40px */ --spacer-12-5: calc(var(--spacer) * 3.125); /* 50px */ --sidebar-width: clamp(175px, 16.67vw, 290px); --bs-darkred: #87000d } :root { --mystic-gradient: linear-gradient( 270deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff1493, #ff4500, #32cd32, #1e90ff, #ff69b4 ); } /* ========================================================================== base.css - Base element styling / resets ========================================================================== */ /* General Styling */ body, html { font-family: "Inter", serif !important; font-optical-sizing: auto; font-style: normal; font-weight: 300; font-size: 0.95em; min-width: 400px } html { scroll-behavior: smooth; } .container-xxl { max-width: 1560px; } body { color: var(--color-base); font-family: var(--font-family-base); font-size: var(--font-size-base); font-weight: var(--font-weight-base); line-height: var(--line-height-base); } .container-xxxl { max-width: 1860px; padding-left: var(--spacer-5); padding-right: var(--spacer-5); margin-left: auto; margin-right: auto; width: 100%; } ::placeholder { color: rgb(255, 255, 255); opacity: 1; /* Firefox */ } /* ========================================================================== utilities.css - Spacing, color, and font-weight utility classes ========================================================================== */ @media (min-width: 769px) { /* ========== DEFAULT CSS ======== */ /* ======= Margin Top ======= */ .mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mt-55 { margin-top: 55px; } .mt-60 { margin-top: 60px; } .mt-65 { margin-top: 65px; } .mt-70 { margin-top: 70px; } .mt-75 { margin-top: 75px; } .mt-80 { margin-top: 80px; } .mt-85 { margin-top: 85px; } .mt-90 { margin-top: 90px; } .mt-95 { margin-top: 95px; } .mt-100 { margin-top: 100px; } .mt-105 { margin-top: 105px; } .mt-110 { margin-top: 110px; } .mt-115 { margin-top: 115px; } .mt-120 { margin-top: 120px; } .mt-125 { margin-top: 125px; } .mt-130 { margin-top: 130px; } .mt-135 { margin-top: 135px; } .mt-140 { margin-top: 140px; } .mt-145 { margin-top: 145px; } .mt-150 { margin-top: 150px; } .mt-155 { margin-top: 155px; } .mt-160 { margin-top: 160px; } .mt-165 { margin-top: 165px; } .mt-170 { margin-top: 170px; } .mt-175 { margin-top: 175px; } .mt-180 { margin-top: 180px; } .mt-185 { margin-top: 185px; } .mt-190 { margin-top: 190px; } .mt-195 { margin-top: 195px; } .mt-200 { margin-top: 200px; } .mt-205 { margin-top: 205px; } .mt-210 { margin-top: 210px; } .mt-215 { margin-top: 215px; } .mt-220 { margin-top: 220px; } .mt-225 { margin-top: 225px; } /* ======= Margin Bottom ======= */ .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .mb-55 { margin-bottom: 55px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-70 { margin-bottom: 70px; } .mb-75 { margin-bottom: 75px; } .mb-80 { margin-bottom: 80px; } .mb-85 { margin-bottom: 85px; } .mb-90 { margin-bottom: 90px; } .mb-95 { margin-bottom: 95px; } .mb-100 { margin-bottom: 100px; } .mb-105 { margin-bottom: 105px; } .mb-110 { margin-bottom: 110px; } .mb-115 { margin-bottom: 115px; } .mb-120 { margin-bottom: 120px; } .mb-125 { margin-bottom: 125px; } .mb-130 { margin-bottom: 130px; } .mb-135 { margin-bottom: 135px; } .mb-140 { margin-bottom: 140px; } .mb-145 { margin-bottom: 145px; } .mb-150 { margin-bottom: 150px; } .mb-155 { margin-bottom: 155px; } .mb-160 { margin-bottom: 160px; } .mb-165 { margin-bottom: 165px; } .mb-170 { margin-bottom: 170px; } .mb-175 { margin-bottom: 175px; } .mb-180 { margin-bottom: 180px; } .mb-185 { margin-bottom: 185px; } .mb-190 { margin-bottom: 190px; } .mb-195 { margin-bottom: 195px; } .mb-200 { margin-bottom: 200px; } .mb-205 { margin-bottom: 205px; } .mb-210 { margin-bottom: 210px; } .mb-215 { margin-bottom: 215px; } .mb-220 { margin-bottom: 220px; } .mb-225 { margin-bottom: 225px; } /* ======= Margin Left ======= */ .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-25 { margin-left: 25px; } .ml-30 { margin-left: 30px; } .ml-35 { margin-left: 35px; } .ml-40 { margin-left: 40px; } .ml-45 { margin-left: 45px; } .ml-50 { margin-left: 50px; } .ml-55 { margin-left: 55px; } .ml-60 { margin-left: 60px; } .ml-65 { margin-left: 65px; } .ml-70 { margin-left: 70px; } .ml-75 { margin-left: 75px; } .ml-80 { margin-left: 80px; } .ml-85 { margin-left: 85px; } .ml-90 { margin-left: 90px; } .ml-95 { margin-left: 95px; } .ml-100 { margin-left: 100px; } .ml-105 { margin-left: 105px; } .ml-110 { margin-left: 110px; } .ml-115 { margin-left: 115px; } .ml-120 { margin-left: 120px; } .ml-125 { margin-left: 125px; } .ml-130 { margin-left: 130px; } .ml-135 { margin-left: 135px; } .ml-140 { margin-left: 140px; } .ml-145 { margin-left: 145px; } .ml-150 { margin-left: 150px; } .ml-155 { margin-left: 155px; } .ml-160 { margin-left: 160px; } .ml-165 { margin-left: 165px; } .ml-170 { margin-left: 170px; } .ml-175 { margin-left: 175px; } .ml-180 { margin-left: 180px; } .ml-185 { margin-left: 185px; } .ml-190 { margin-left: 190px; } .ml-195 { margin-left: 195px; } .ml-200 { margin-left: 200px; } .ml-205 { margin-left: 205px; } .ml-210 { margin-left: 210px; } .ml-215 { margin-left: 215px; } .ml-220 { margin-left: 220px; } .ml-225 { margin-left: 225px; } /* ======= Margin Right ======= */ .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mr-20 { margin-right: 20px; } .mr-25 { margin-right: 25px; } .mr-30 { margin-right: 30px; } .mr-35 { margin-right: 35px; } .mr-40 { margin-right: 40px; } .mr-45 { margin-right: 45px; } .mr-50 { margin-right: 50px; } .mr-55 { margin-right: 55px; } .mr-60 { margin-right: 60px; } .mr-65 { margin-right: 65px; } .mr-70 { margin-right: 70px; } .mr-75 { margin-right: 75px; } .mr-80 { margin-right: 80px; } .mr-85 { margin-right: 85px; } .mr-90 { margin-right: 90px; } .mr-95 { margin-right: 95px; } .mr-100 { margin-right: 100px; } .mr-105 { margin-right: 105px; } .mr-110 { margin-right: 110px; } .mr-115 { margin-right: 115px; } .mr-120 { margin-right: 120px; } .mr-125 { margin-right: 125px; } .mr-130 { margin-right: 130px; } .mr-135 { margin-right: 135px; } .mr-140 { margin-right: 140px; } .mr-145 { margin-right: 145px; } .mr-150 { margin-right: 150px; } .mr-155 { margin-right: 155px; } .mr-160 { margin-right: 160px; } .mr-165 { margin-right: 165px; } .mr-170 { margin-right: 170px; } .mr-175 { margin-right: 175px; } .mr-180 { margin-right: 180px; } .mr-185 { margin-right: 185px; } .mr-190 { margin-right: 190px; } .mr-195 { margin-right: 195px; } .mr-200 { margin-right: 200px; } .mr-205 { margin-right: 205px; } .mr-210 { margin-right: 210px; } .mr-215 { margin-right: 215px; } .mr-220 { margin-right: 220px; } .mr-225 { margin-right: 225px; } /* ======= Padding Top ======= */ .pt-5 { padding-top: 5px; } .pt-10 { padding-top: 10px; } .pt-15 { padding-top: 15px; } .pt-20 { padding-top: 20px; } .pt-25 { padding-top: 25px; } .pt-30 { padding-top: 30px; } .pt-35 { padding-top: 35px; } .pt-40 { padding-top: 40px; } .pt-45 { padding-top: 45px; } .pt-50 { padding-top: 50px; } .pt-55 { padding-top: 55px; } .pt-60 { padding-top: 60px; } .pt-65 { padding-top: 65px; } .pt-70 { padding-top: 70px; } .pt-75 { padding-top: 75px; } .pt-80 { padding-top: 80px; } .pt-85 { padding-top: 85px; } .pt-90 { padding-top: 90px; } .pt-95 { padding-top: 95px; } .pt-100 { padding-top: 100px; } .pt-105 { padding-top: 105px; } .pt-110 { padding-top: 110px; } .pt-115 { padding-top: 115px; } .pt-120 { padding-top: 120px; } .pt-125 { padding-top: 125px; } .pt-130 { padding-top: 130px; } .pt-135 { padding-top: 135px; } .pt-140 { padding-top: 140px; } .pt-145 { padding-top: 145px; } .pt-150 { padding-top: 150px; } .pt-155 { padding-top: 155px; } .pt-160 { padding-top: 160px; } .pt-165 { padding-top: 165px; } .pt-170 { padding-top: 170px; } .pt-175 { padding-top: 175px; } .pt-180 { padding-top: 180px; } .pt-185 { padding-top: 185px; } .pt-190 { padding-top: 190px; } .pt-195 { padding-top: 195px; } .pt-200 { padding-top: 200px; } .pt-205 { padding-top: 205px; } .pt-210 { padding-top: 210px; } .pt-215 { padding-top: 215px; } .pt-220 { padding-top: 220px; } .pt-225 { padding-top: 225px; } /* ======= Padding Bottom ======= */ .pb-5 { padding-bottom: 5px; } .pb-10 { padding-bottom: 10px; } .pb-15 { padding-bottom: 15px; } .pb-20 { padding-bottom: 20px; } .pb-25 { padding-bottom: 25px; } .pb-30 { padding-bottom: 30px; } .pb-35 { padding-bottom: 35px; } .pb-40 { padding-bottom: 40px; } .pb-45 { padding-bottom: 45px; } .pb-50 { padding-bottom: 50px; } .pb-55 { padding-bottom: 55px; } .pb-60 { padding-bottom: 60px; } .pb-65 { padding-bottom: 65px; } .pb-70 { padding-bottom: 70px; } .pb-75 { padding-bottom: 75px; } .pb-80 { padding-bottom: 80px; } .pb-85 { padding-bottom: 85px; } .pb-90 { padding-bottom: 90px; } .pb-95 { padding-bottom: 95px; } .pb-100 { padding-bottom: 100px; } .pb-105 { padding-bottom: 105px; } .pb-110 { padding-bottom: 110px; } .pb-115 { padding-bottom: 115px; } .pb-120 { padding-bottom: 120px; } .pb-125 { padding-bottom: 125px; } .pb-130 { padding-bottom: 130px; } .pb-135 { padding-bottom: 135px; } .pb-140 { padding-bottom: 140px; } .pb-145 { padding-bottom: 145px; } .pb-150 { padding-bottom: 150px; } .pb-155 { padding-bottom: 155px; } .pb-160 { padding-bottom: 160px; } .pb-165 { padding-bottom: 165px; } .pb-170 { padding-bottom: 170px; } .pb-175 { padding-bottom: 175px; } .pb-180 { padding-bottom: 180px; } .pb-185 { padding-bottom: 185px; } .pb-190 { padding-bottom: 190px; } .pb-195 { padding-bottom: 195px; } .pb-200 { padding-bottom: 200px; } .pb-205 { padding-bottom: 205px; } .pb-210 { padding-bottom: 210px; } .pb-215 { padding-bottom: 215px; } .pb-220 { padding-bottom: 220px; } .pb-225 { padding-bottom: 225px; } /* ======= Padding Left ======= */ .pl-5 { padding-left: 5px; } .pl-10 { padding-left: 10px; } .pl-15 { padding-left: 15px; } .pl-20 { padding-left: 20px; } .pl-25 { padding-left: 25px; } .pl-30 { padding-left: 30px; } .pl-35 { padding-left: 35px; } .pl-40 { padding-left: 40px; } .pl-45 { padding-left: 45px; } .pl-50 { padding-left: 50px; } .pl-55 { padding-left: 55px; } .pl-60 { padding-left: 60px; } .pl-65 { padding-left: 65px; } .pl-70 { padding-left: 70px; } .pl-75 { padding-left: 75px; } .pl-80 { padding-left: 80px; } .pl-85 { padding-left: 85px; } .pl-90 { padding-left: 90px; } .pl-95 { padding-left: 95px; } .pl-100 { padding-left: 100px; } .pl-105 { padding-left: 105px; } .pl-110 { padding-left: 110px; } .pl-115 { padding-left: 115px; } .pl-120 { padding-left: 120px; } .pl-125 { padding-left: 125px; } .pl-130 { padding-left: 130px; } .pl-135 { padding-left: 135px; } .pl-140 { padding-left: 140px; } .pl-145 { padding-left: 145px; } .pl-150 { padding-left: 150px; } .pl-155 { padding-left: 155px; } .pl-160 { padding-left: 160px; } .pl-165 { padding-left: 165px; } .pl-170 { padding-left: 170px; } .pl-175 { padding-left: 175px; } .pl-180 { padding-left: 180px; } .pl-185 { padding-left: 185px; } .pl-190 { padding-left: 190px; } .pl-195 { padding-left: 195px; } .pl-200 { padding-left: 200px; } .pl-205 { padding-left: 205px; } .pl-210 { padding-left: 210px; } .pl-215 { padding-left: 215px; } .pl-220 { padding-left: 220px; } .pl-225 { padding-left: 225px; } /* ======= Padding Right ======= */ .pr-5 { padding-right: 5px; } .pr-10 { padding-right: 10px; } .pr-15 { padding-right: 15px; } .pr-20 { padding-right: 20px; } .pr-25 { padding-right: 25px; } .pr-30 { padding-right: 30px; } .pr-35 { padding-right: 35px; } .pr-40 { padding-right: 40px; } .pr-45 { padding-right: 45px; } .pr-50 { padding-right: 50px; } .pr-55 { padding-right: 55px; } .pr-60 { padding-right: 60px; } .pr-65 { padding-right: 65px; } .pr-70 { padding-right: 70px; } .pr-75 { padding-right: 75px; } .pr-80 { padding-right: 80px; } .pr-85 { padding-right: 85px; } .pr-90 { padding-right: 90px; } .pr-95 { padding-right: 95px; } .pr-100 { padding-right: 100px; } .pr-105 { padding-right: 105px; } .pr-110 { padding-right: 110px; } .pr-115 { padding-right: 115px; } .pr-120 { padding-right: 120px; } .pr-125 { padding-right: 125px; } .pr-130 { padding-right: 130px; } .pr-135 { padding-right: 135px; } .pr-140 { padding-right: 140px; } .pr-145 { padding-right: 145px; } .pr-150 { padding-right: 150px; } .pr-155 { padding-right: 155px; } .pr-160 { padding-right: 160px; } .pr-165 { padding-right: 165px; } .pr-170 { padding-right: 170px; } .pr-175 { padding-right: 175px; } .pr-180 { padding-right: 180px; } .pr-185 { padding-right: 185px; } .pr-190 { padding-right: 190px; } .pr-195 { padding-right: 195px; } .pr-200 { padding-right: 200px; } .pr-205 { padding-right: 205px; } .pr-210 { padding-right: 210px; } .pr-215 { padding-right: 215px; } .pr-220 { padding-right: 220px; } .pr-225 { padding-right: 225px; } /* ======= bg-primary shades ========= */ .bg-primary-100 { background: rgba(74, 108, 247, 0.1); } .bg-primary-200 { background: rgba(74, 108, 247, 0.2); } .bg-primary-300 { background: rgba(74, 108, 247, 0.3); } .bg-primary-400 { background: rgba(74, 108, 247, 0.4); } .bg-primary-500 { background: rgba(74, 108, 247, 0.5); } .bg-primary-600 { background: rgba(74, 108, 247, 0.6); } .bg-primary-700 { background: rgba(74, 108, 247, 0.7); } .bg-primary-800 { background: rgba(74, 108, 247, 0.8); } .bg-primary-900 { background: rgba(74, 108, 247, 0.9); } /* ======= bg-secondary shades ========= */ .bg-secondary-100 { background: rgba(0, 193, 248, 0.1); } .bg-secondary-200 { background: rgba(0, 193, 248, 0.2); } .bg-secondary-300 { background: rgba(0, 193, 248, 0.3); } .bg-secondary-400 { background: rgba(0, 193, 248, 0.4); } .bg-secondary-500 { background: rgba(0, 193, 248, 0.5); } .bg-secondary-600 { background: rgba(0, 193, 248, 0.6); } .bg-secondary-700 { background: rgba(0, 193, 248, 0.7); } .bg-secondary-800 { background: rgba(0, 193, 248, 0.8); } .bg-secondary-900 { background: rgba(0, 193, 248, 0.9); } /* ======= bg-success shades ========= */ .bg-success-100 { background: rgba(33, 150, 83, 0.1); } .bg-success-200 { background: rgba(33, 150, 83, 0.2); } .bg-success-300 { background: rgba(33, 150, 83, 0.3); } .bg-success-400 { background: rgba(33, 150, 83, 0.4); } .bg-success-500 { background: rgba(33, 150, 83, 0.5); } .bg-success-600 { background: rgba(33, 150, 83, 0.6); } .bg-success-700 { background: rgba(33, 150, 83, 0.7); } .bg-success-800 { background: rgba(33, 150, 83, 0.8); } .bg-success-900 { background: rgba(33, 150, 83, 0.9); } /* ======= bg-danger shades ========= */ .bg-danger-100 { background: rgba(213, 1, 0, 0.1); } .bg-danger-200 { background: rgba(213, 1, 0, 0.2); } .bg-danger-300 { background: rgba(213, 1, 0, 0.3); } .bg-danger-400 { background: rgba(213, 1, 0, 0.4); } .bg-danger-500 { background: rgba(213, 1, 0, 0.5); } .bg-danger-600 { background: rgba(213, 1, 0, 0.6); } .bg-danger-700 { background: rgba(213, 1, 0, 0.7); } .bg-danger-800 { background: rgba(213, 1, 0, 0.8); } .bg-danger-900 { background: rgba(213, 1, 0, 0.9); } /* ======= bg-warning shades ========= */ .bg-warning-100 { background: rgba(247, 200, 0, 0.1); } .bg-warning-200 { background: rgba(247, 200, 0, 0.2); } .bg-warning-300 { background: rgba(247, 200, 0, 0.3); } .bg-warning-400 { background: rgba(247, 200, 0, 0.4); } .bg-warning-500 { background: rgba(247, 200, 0, 0.5); } .bg-warning-600 { background: rgba(247, 200, 0, 0.6); } .bg-warning-700 { background: rgba(247, 200, 0, 0.7); } .bg-warning-800 { background: rgba(247, 200, 0, 0.8); } .bg-warning-900 { background: rgba(247, 200, 0, 0.9); } /* ======= bg-info shades ========= */ .bg-info-100 { background: rgba(151, 202, 49, 0.1); } .bg-info-200 { background: rgba(151, 202, 49, 0.2); } .bg-info-300 { background: rgba(151, 202, 49, 0.3); } .bg-info-400 { background: rgba(151, 202, 49, 0.4); } .bg-info-500 { background: rgba(151, 202, 49, 0.5); } .bg-info-600 { background: rgba(151, 202, 49, 0.6); } .bg-info-700 { background: rgba(151, 202, 49, 0.7); } .bg-info-800 { background: rgba(151, 202, 49, 0.8); } .bg-info-900 { background: rgba(151, 202, 49, 0.9); } /* ======= bg-dark shades ========= */ .bg-dark-100 { background: rgba(38, 45, 63, 0.1); } .bg-dark-200 { background: rgba(38, 45, 63, 0.2); } .bg-dark-300 { background: rgba(38, 45, 63, 0.3); } .bg-dark-400 { background: rgba(38, 45, 63, 0.4); } .bg-dark-500 { background: rgba(38, 45, 63, 0.5); } .bg-dark-600 { background: rgba(38, 45, 63, 0.6); } .bg-dark-700 { background: rgba(38, 45, 63, 0.7); } .bg-dark-800 { background: rgba(38, 45, 63, 0.8); } .bg-dark-900 { background: rgba(38, 45, 63, 0.9); } /* ======= bg-purple shades ========= */ .bg-purple-100 { background: rgba(155, 81, 224, 0.1); } .bg-purple-200 { background: rgba(155, 81, 224, 0.2); } .bg-purple-300 { background: rgba(155, 81, 224, 0.3); } .bg-purple-400 { background: rgba(155, 81, 224, 0.4); } .bg-purple-500 { background: rgba(155, 81, 224, 0.5); } .bg-purple-600 { background: rgba(155, 81, 224, 0.6); } .bg-purple-700 { background: rgba(155, 81, 224, 0.7); } .bg-purple-800 { background: rgba(155, 81, 224, 0.8); } .bg-purple-900 { background: rgba(155, 81, 224, 0.9); } /* ======= bg-orange shades ========= */ .bg-orange-100 { background: rgba(242, 153, 74, 0.1); } .bg-orange-200 { background: rgba(242, 153, 74, 0.2); } .bg-orange-300 { background: rgba(242, 153, 74, 0.3); } .bg-orange-400 { background: rgba(242, 153, 74, 0.4); } .bg-orange-500 { background: rgba(242, 153, 74, 0.5); } .bg-orange-600 { background: rgba(242, 153, 74, 0.6); } .bg-orange-700 { background: rgba(242, 153, 74, 0.7); } .bg-orange-800 { background: rgba(242, 153, 74, 0.8); } .bg-orange-900 { background: rgba(242, 153, 74, 0.9); } /* ======== Background Colors ========== */ .primary-bg { background-color: #4a6cf7; } .secondary-bg { background-color: #00c1f8; } .success-bg { background-color: #219653; } .danger-bg { background-color: #d50100; } .warning-bg { background-color: #f7c800; } .info-bg { background-color: #97ca31; } .dark-bg { background-color: #262d3f; } .light-bg { background-color: #efefef; } .active-bg { background-color: #4a6cf7; } .deactive-bg { background-color: #cbe1ff; } .deactive-bg { background-color: #cbe1ff; } .gray-bg { background-color: #5d657b; } .purple-bg { background-color: #9b51e0; } .orange-bg { background-color: #f2994a; } .deep-blue-bg { background-color: #345d9d; } /* ======== Text Colors ========== */ .text-primary { color: #4a6cf7 !important; } /*.text-secondary { color: #00c1f8 !important; }*/ .text-success { color: #219653 !important; } .text-danger { color: #d50100 !important; } .text-warning { color: #f7c800 !important; } .text-info { color: #97ca31 !important; } .text-dark { color: #262d3f !important; } .text-light { color: #efefef !important; } .text-active { color: #4a6cf7 !important; } .text-deactive { color: #cbe1ff !important; } .text-deactive { color: #cbe1ff !important; } .text-gray { color: #5d657b !important; } .text-orange { color: #f2994a !important; } /* ========= Font Weight =========== */ .fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; } .fw-900 { font-weight: 900; } } /* ========================================================================== sidebar.css - Sidebar layout, nav pills, breadcrumbs, treeview ========================================================================== */ @media (min-width: 769px) { /* Sidebar Styling */ .sidebar { width: var(--sidebar-width); height: 100vh; background: #12121A; padding: 20px; color: white; position: fixed; left: 0; top: 0; overflow-y: auto; } .sidebar-nav-wrapper .sidebar-nav ul .nav-item a span.text { display: flex; align-items: center; justify-content: space-between; width: 100%; } .sidebar-nav-wrapper .sidebar-nav ul .nav-item a span.pro-badge { background: #4a6cf7; color: #fff; padding: 1px 6px; border-radius: 4px; font-size: 10px; margin-left: 10px; } .sidebar-nav-wrapper .sidebar-nav ul .nav-item a .icon { margin-right: 12px; font-size: 18px; } .sidebar-nav-wrapper .sidebar-nav ul .nav-item a .icon svg { fill: currentColor; } .sidebar-nav-wrapper .sidebar-nav ul .nav-item.active > a, .sidebar-nav-wrapper .sidebar-nav ul .nav-item.active > a.collapsed, .sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover > a, .sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover > a.collapsed { color: #262d3f; } .sidebar-nav-wrapper .sidebar-nav ul .nav-item.active > a::before, .sidebar-nav-wrapper .sidebar-nav ul .nav-item.active > a.collapsed::before, .sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover > a::before, .sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover > a.collapsed::before { opacity: 1; visibility: visible; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 11; -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); opacity: 0; visibility: hidden; } @media only screen and (min-width: 1400px), only screen and (min-width: 1200px) and (max-width: 1399px) { .overlay { display: none; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .overlay.active { opacity: 1; visibility: visible; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .main-wrapper { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; margin-left: 250px; min-height: 100vh; padding-bottom: 85px; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .main-wrapper { margin-left: 0; } } @media (max-width: 767px) { .main-wrapper { padding-bottom: 110px; } } .main-wrapper.active { margin-left: 0; } .main-wrapper .container-fluid { padding-left: 40px; padding-right: 40px; } @media (max-width: 767px) { .main-wrapper .container-fluid { padding-left: 20px; padding-right: 20px; } } .main-wrapper .footer { padding: 25px 0; justify-items: flex-end; position: absolute; bottom: 0; width: 100%; } .main-wrapper .footer .copyright p a { color: inherit; } .main-wrapper .footer .copyright p a:hover { color: #4a6cf7; } @media (max-width: 767px) { .main-wrapper .footer .terms { margin-bottom: 10px; text-align: center; } } .main-wrapper .footer .terms a { color: #5d657b; } .main-wrapper .footer .terms a:hover { color: #4a6cf7; } .promo-box { box-shadow: 0px 10px 20px rgba(200, 208, 216, 0.3); padding: 24px 16px; text-align: center; max-width: 210px; margin: 0 auto; margin-top: 32px; border-radius: 4px; } .promo-box h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; } .promo-box p { font-size: 12px; line-height: 1.5; margin-bottom: 16px; } .promo-box .main-btn { padding: 12px; width: 100%; } /* Disabled campaign card styling */ .disabled-campaign .card { opacity: 0.6; cursor: not-allowed; background-color: #f5f5f5 !important; } .disabled-campaign .card:hover { box-shadow: none; transform: none; } .sidebar .logo { font-size: 24px; font-weight: bold; margin-bottom: 20px; } .sidebar ul { list-style: none; padding: 0; } .sidebar ul li { padding: 10px 15px; font-size: 16px; } .sidebar ul li a { color: white; text-decoration: none; display: block; } .sidebar ul li a:hover { background: #27293D; border-radius: 5px; } } /* Sidebar rules (not media-wrapped) */ .breadcrumb-item a { text-decoration: none; } .sideNavHeader { font-size: 1.3em; font-weight: bold; } .breadcrumb > li + li:before { padding: 0 5px; color: #C808BD; content: "//"; } #adminSidebar { transition: width 0.3s ease; /*width: 260px;*/ overflow: hidden; width: var(--sidebar-width); } #adminSidebar.collapsed { width: 70px; } #adminSidebar.collapsed .sideNavHeader, #adminSidebar.collapsed .menu-label, #adminSidebar.collapsed .side-team-card { display: none !important; } #adminSidebar .bi { font-size: 1.2rem; } .multiSelectField { min-height: 3rem; background: #f9f9f9; display: contents; } .multiSelectField label { margin-left: 2em; } .dark-accordion a { color: white; } #sideNavHeader { font-size: 0.85em !important; width: var(--sidebar-width); } #sideNavHeader .nav-link.active { background-color: unset !important; color: #C808BD !important } #sideNavHeader .nav-item a.nav-link { border-left: 5px solid unset !important; font-size: 0.85em !important; } #sideNavHeader .nav-item .nav a.nav-link.active { color: #C808BD !important; /*border-left: 5px solid #C808BD !important;*/ background-color: #0A1330 !important; margin-right: 1em } #sideNavHeader .nav-item .nav .nav-item a.nav-link:hover, #sideNavAccordion.dark-accordion .accordion-button:hover { color: #C808BD !important; } #mainLoader { display: none; position: fixed; width: 100%; height: 100vh; z-index: 11000; background-color: rgb(255 255 255 / 50%) } .btn-outline-danger:hover { background-color: #C808BD !important; } .btn-purple { background-color: #7744D4; } .btn-purple:hover { background-color: #58319f; } .btn-blue { background-color: #129BF8 } .btn-blue:hover { background-color: #0a5d95 } .btn-small { font-size: 0.85em; } #sideNavAccordion label.form-check-label.small { font-size: 0.8em !important; } .text-dangerx:hover { color: #C808BD !important; } #impersonationDropdown .accordion-button:after { display: none } #sideNavHeader .nav-pills .nav-link, #sideNavAccordion.dark-accordion .accordion-button, .categoryCheckLabel { /*color: #C808BD !important*/ } #sideNavHeader .nav-pills .nav-treeview .nav-link, .categoryCheckLabel { color: #AEB9E1 !important; margin-bottom: 0; font-weight: normal } #sideNavHeader .nav-pills .nav-treeview .nav-link, .categoryCheckLabel:hover { cursor: pointer } #sideNavHeader .nav-pills .nav-link.active, #sideNavAccordion.dark-accordion .accordion-button.text-danger { /*color: #C808BD !important;*/ } #sideNavAccordion.dark-accordion .accordion-button { color: var(--color-white) !important } .nav-sidebar .menu-open > .nav-link i.right { -webkit-transform: rotate(90deg) !important; transform: rotate(90deg) !important; color: var(--color-primary); } .nav-link:hover { cursor: pointer } .pBoxPostType { line-height: 1.5; min-height: 75px !important; } .groupContainer .card-header { font-weight: 600 } .dark-accordion .accordion-button::after { color: #AEB9E1 !important } #sideNavHeader .nav-item .fa-angle-right { width: 24px; height: 100%; top: 0; right: 0; display: flex; align-items: center; justify-content: center; color: var(--color-off-blue); transition: transform 0.3s ease, color 0.3s ease; } #sideNavHeader .nav-item.menu-open > .nav-link .fa-angle-right { color: var(--color-primary); transform: rotate(90deg); } .dark-accordion .accordion-button::after { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6.646 4.646a.5.5 0 0 1 .708 0L11 8l-3.646 3.354a.5.5 0 0 1-.708-.708L9.793 8 6.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 1rem 1rem; transform: rotate(90deg); /* default: right */ transition: transform 0.3s ease-in-out; margin-left: auto; width: 1rem; height: 1rem; } #sideNavAccordion .accordion-body .list-group-item { color: var(--color-off-blue); padding-left: 20px; transition: all ease-in-out 0.3s; border-radius: 4px; overflow: hidden; position: relative; } #sideNavAccordion .accordion-body .list-group-item:before { content: ''; background-color: var(--color-primary); width: 3px; height: 100%; position: absolute; top: 0; left: 0; transition: all ease-in-out 0.2s; opacity: 0; transition-delay: 0.2s; } #sideNavAccordion .accordion-body .list-group-item:hover::before { opacity: 1 } #sideNavAccordion .accordion-body .list-group-item:hover { background-color: #0A1330; color: #fff; padding-left: 25px; } .calendarPostBlock { display: none; } /* When expanded (i.e., collapsed class is NOT present), rotate down */ .dark-accordion .accordion-button:not(.collapsed)::after { transform: rotate(180deg); /* down */ } .dark-accordion .accordion-button:not(.collapsed) { box-shadow: unset; } /* Chevron default: right */ .dark-accordion .rotate-icon { transition: transform 0.3s ease; } /* When accordion is open (collapsed class is removed) */ .dark-accordion .accordion-button:not(.collapsed) .rotate-icon { transform: rotate(90deg); } .sidebar-area { width: 16.7%; min-width: 220px; border-radius: 0px 0px 20px 0px; background: #081028; box-shadow: 0px 8px 28px 0px rgba(1, 5, 17, 0.30); border-top: 1px solid rgba(11,23,57,0.6); padding: 79px 30px 100px; height: max-content; } .sidebar-area > .bottom-drop-shadow { box-shadow: none } .sidebar-area .nav-icon-img { width: 9px; height: auto; } .sidebar-area .nav-link { display: flex; gap: 10px; font-size: var(--font-size-base); align-items: center; line-height: 1.2; padding: 12px 0; } #sideNavHeader .nav-item.has-treeview:not(:last-child) { padding-bottom: 0.3em; margin-bottom: 20px; position: relative; } #sideNavHeader .nav-item.has-treeview:not(:last-child)::after { /*content: ''; background-color: rgba(255,255,255,0.2); width: 89%; height: 1px; position: absolute; bottom: 0; right: 0; left: 0; margin: 0 auto;*/ display: none } #sideNavHeader .nav-item a.nav-link { font-size: var(--font-size-base) !important; margin-bottom: 0; } #sideNavHeader .nav-item.has-treeview > a.nav-link { color: var(--color-white); } #sideNavHeader .nav-item .nav-icon { font-size: var(--font-size-base-sm); width: auto; margin: 0; position: relative; } #sideNavHeader .nav-item .nav-treeview a.nav-link { color: var(--color-off-blue); padding-left: 20px; transition: all ease-in-out 0.3s; border-radius: 4px; overflow: hidden; position: relative; } #sideNavHeader .nav-item .nav-treeview a.nav-link.active, #sideNavHeader .nav-item .nav-treeview a.nav-link:hover { background-color: #0A1330; color: #fff; padding-left: 25px; } #sideNavHeader .nav-item .nav-treeview a.nav-link::before { content: ''; background-color: var(--color-primary); width: 3px; height: 100%; position: absolute; top: 0; left: 0; transition: all ease-in-out 0.2s; opacity: 0; transition-delay: 0.2s; } #sideNavHeader .nav-item .nav-treeview a.nav-link.active::before, #sideNavHeader .nav-item .nav-treeview a.nav-link:hover::before { opacity: 1; } #sideNavHeader .nav-item .fa-angle-down { width: 24px; height: 100%; top: 0; right: 0; display: flex; align-items: center; justify-content: center; transform: rotate(-90deg); } #sideNavHeader .nav-item.menu-open .fa-angle-down { transform: none; } #sideNavHeader .nav-item .fa-angle-down::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='12' viewBox='0 0 13 12' fill='none'%3E%3Cg opacity='0.8'%3E%3Cpath d='M3.25 4.5L6.25 7.5L9.25 4.5' stroke='%23AEB9E1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; width: 13px; height: 12px; position: absolute; } .breadcrumb { padding: 0; margin-bottom: 60px; letter-spacing: -0.01em; } .breadcrumb:first-letter { text-transform: uppercase; } .breadcrumb a { color: #486581 !important; font-size: var(--font-size-base-sm); } .breadcrumb li:last-child a { color: #243B53 !important; font-weight: 500; } .breadcrumb > li + li:before { padding: 0 10px; } /* ========================================================================== navbar.css - Navbar, desktop default navbar, toggle switches ========================================================================== */ /* Navbar Styling */ .navbar-custom { background: #1F1F2E; padding: 15px 30px; } .navbar-custom .nav-link { color: white; font-size: 16px; margin-right: 20px; } .navbar-custom .nav-link:hover { color: #FFD700; } .T125emFont { font-size: 1.25em; font-weight: 400 } .T13remFont { font-size: 1.1em; font-weight: 300 } .labelBoxKeyword { } .labelBoxKeyword .textBlock { max-width: 30ch; /* Approximate limit in characters */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; /* So width constraints apply */ } .separator { color: #888; /* Separator color */ margin-left: 4px; /* Spacing */ display: inline-block; /* Ensure it's rendered as an inline element */ } .labelBoxKeyword .textBlock, .separator { vertical-align: middle; line-height: 1; /* Adjust if necessary */ } .T16emFont { font-size: 1.6em; } /* Footer */ .badge { padding: 1em 1.5em; } .nav-item.rounded.active { border-radius: 2em !important; } .nav-item { font-size: large; text-transform: capitalize; } .sideNav .nav-link { color: white; border-bottom: 1px solid #3d3c3c; padding-left: 2px; } .nav-link.active { border-bottom: #c808bd solid 1px; padding-right: 1.5em; } .navbar-nav .nav-item { /* padding-left: 1.5em !important; padding-right: 1.5em !important; ; */ } .sideNav .nav-link { width: 90%; } .sideNav .nav-link.active { background-color: transparent !important; color: #c808bd; width: 100%; } .sideNav .nav-link.active::after { content: "∘"; right: 0; /* Position on the right */ border-radius: 50%; /* Make it a circle */ margin-right: 10px; position: absolute; } .bg-dark { background: linear-gradient(173deg, #081028 0%, #101010 112.33%); background-repeat: no-repeat; background-attachment: fixed; /* key for seamless effect */ background-size: 100vw 100vh; /* make the gradient cover full viewport */ background-position: top left; /* align all from same point */ } .bold { font-weight: bold; } h6, .h6 { font-size: 0.8em; } .text-xs { font-size: 0.6em; } .text-sm { font-size: 0.7em; } .btnUpperCase .btn-link { text-transform: uppercase; font-size: 0.8em; letter-spacing: 4px; } .navbar { background-color: #0a0214; } .nav-link { color: white; } .nav-link:hover { color: #e600ff; } .btn-dashboard { background-color: #e600ff; color: white; font-weight: bold; border-radius: 30px; padding: 10px 20px; } .btn-dashboard:hover { background-color: #d100e8; } .nav-item.active .nav-link { background-color: #e600ff; color: white; border-radius: 30px; } .nav-item.active .nav-link:hover { } .navModern .nav-item { color: white; border-radius: 0; background-color: transparent; border-bottom: 0; font-size: 1.2em; } .equal-nav-item { flex: 1 1 0 !important; min-width: 0; } .navModern .nav-item a.active { color: white; border-radius: 0; background-color: #d100e8; border-bottom: 0; } .navModern .nav-item.active .nav-link { color: white; border: 0; border-radius: 0; background-color: #d100e8; border-bottom: 0; } .navModern .nav-item.active .nav-link:hover { background: linear-gradient(#C808BD,#62045D) } .navModern .nav-item a:hover { color: white; background: linear-gradient(#C808BD,#62045D) } .navModern .nav-item a.active { background: linear-gradient(#C808BD,#62045D) } /* Default Navbar (Desktop) */ .navbar { background: transparent; } /* Default Navbar (Desktop) */ .navbar { background: transparent; } .switch { position: relative; display: inline-block; width: 50px; height: 25px; } /* Hide default checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* Slider (background) */ .slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px; transition: 0.3s; } /* Slider circle */ .slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 3.5px; background-color: white; border-radius: 50%; transition: 0.3s; } /* Checked state */ input:checked + .slider { background-color: #d100e8; } input:checked + .slider::before { transform: translateX(24px); } .top-nav { /*background-color: #0b0218;*/ /* Adjust to match your theme */ color: #fff; padding: 0.5rem 1rem; } .top-nav-wapper { /*background: linear-gradient(#081028,#243B53);*/ /* Create a linear gradient */ background: radial-gradient(#081028 0%, #142434 500%); /* Make the background bigger than the element */ background-size: 500% 500%; /* Position the gradient so its center is at the element’s center */ background-position: center center; background-repeat: no-repeat; } .breadcrumb-sep { color: #888; margin: 0 0.5rem; } .navbar-wrapper.bottom-drop-shadow { box-shadow: 0px 8px 18px 0px rgba(1, 5, 17, 0.30); } .top-nav-wapper { background: linear-gradient(99deg, #081028 -35.89%, #243B53 303.79%); } .top-nav { color: var(--color-off-blue); padding-top: 7px; padding-bottom: 9px; padding-left: 0; padding-right: 0; } .top-nav #locationUrlOnMap { letter-spacing: 0.04em; margin-right: 11px !important; /*width: var(--sidebar-width);*/ padding-left: 1.5em } .top-nav #current-time { margin-left: 58px !important; } .top-nav #weather { margin-left: var(--spacer-10) !important; } .top-nav #weather .weather-desc { padding-left: var(--spacer-3-5); } .navbar-wrapper { /*background: #081028 !important;*/ } .navbar-wrapper .navbar-brand { width: var(--sidebar-width); min-width: var(--sidebar-width); display: flex; justify-content: left; align-items: flex-start; padding-left: 1.5em !important; } .navbar-wrapper .navbar-brand img { max-width: 147px; } .navbar .nav-link { font-size: var(--font-size-base-md); font-weight: 500; letter-spacing: 0.05em; line-height: var(--line-height-sm); padding-top: 25px; padding-bottom: 25px; gap: 20px; } .navModern .nav-item a.active, .navModern .nav-item a:hover { background: linear-gradient(180deg, #C808BD 0%, #62045D 181.63%); } .navbar-wrapper .profile-circle, .navbar-wrapper .profile-circle img { width: 25px; height: 25px; } .navbar-wrapper .help svg { width: 25px; height: 25px; object-fit: contain; } .mobile-nav { background-color: var(--color-primary); } .mobile-nav .mobile-menu { position: static; display: flex; background: none; box-shadow: none; align-items: center; } .mobile-menu .nav-item { border: none; padding: 0; } .mobile-menu .nav-item a { font-size: var(--font-size-base-md); font-weight: 600; line-height: var(--line-height-sm); letter-spacing: 0.15em; display: flex; align-items: center; gap: var(--spacer-3-5); } .mobile-menu .hamburger { right: 0; line-height: 1; margin: 0; } .expanded .mobile-menu .hamburger { right: 0; line-height: 1; margin: 0; top: 0; font-size: 18px; } .main-content { padding-bottom: 150px; } /* ========================================================================== cards.css - Cards, buttons, gradient cards, stats, dark accordions ========================================================================== */ /* Cards & Buttons */ /* Dashboard Content */ .dashboard-content { margin-left: var(--sidebar-width); padding: 20px; } /* Cards */ .card-custom { background: white; border: none; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 15px; } .card-custom img { width: 100%; border-radius: 10px; } .card-custom .card-body { padding: 15px; } .card-custom .btn { font-size: 14px; padding: 5px 15px; border-radius: 5px; } /* Buttons */ .btn-primary-custom { background-color: #C808BD; border: none; color: white; padding: 10px 20px; font-size: 14px; border-radius: 50em; text-transform: uppercase } .btn-primary-custom:hover { background-color: #df00d2 !important; color: #fff; } .labelBoxKeyword { } .labelBoxKeyword .textBlock { max-width: 30ch; /* Approximate limit in characters */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; /* So width constraints apply */ } .separator { color: #888; /* Separator color */ margin-left: 4px; /* Spacing */ display: inline-block; /* Ensure it's rendered as an inline element */ } .labelBoxKeyword .textBlock, .separator { vertical-align: middle; line-height: 1; /* Adjust if necessary */ } .T16emFont { font-size: 1.6em; } /* Footer */ .footer-custom { background: #1F1F2E; padding: 20px; color: white; text-align: center; margin-top: 30px; } .footer-custom a { color: #FFD700; text-decoration: none; } .footer-custom a:hover { text-decoration: underline; } .task-card { border: 1px solid #ddd; border-radius: 10px; padding: 20px; background: #fff; } .h6.bigger { font-size: 1.1em; color: #000 } .thumbMac { width: 80px; height: 80px } .task-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; } .icon-placeholder { width: 70px; height: 70px; background: black; display: flex; align-items: center; justify-content: center; border-radius: 5px; } .members img { width: 40px; height: 40px; border-radius: 50%; margin-right: -1em; border: 2px solid white; } .see-tasks { color: red; font-weight: bold; text-decoration: none; } .promo-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border: 1px solid #ddd; text-align: center; } .promo-card h6 { text-transform: uppercase; } .promo-icon { font-size: 60px; color: black; margin: 20px 0; } .promo-title { font-size: 20px; font-weight: bold; margin: 10px 0; } .promo-text { font-size: 14px; color: #6c757d; margin-bottom: 20px; } .promo-link { color: red; font-weight: bold; text-decoration: none; } .promo-link:hover { text-decoration: underline; } .squared { border-radius: 0; } .round-bottom-right-corner { border-bottom-right-radius: 2em; ; } /* Card overlays and event cards */ .card-img-overlay { display: flex; flex-direction: column; justify-content: flex-end; transition: all 0.5s ease; } /* Default state: title flush at bottom and text hidden */ .card-img-overlay .card-title { margin-bottom: 0; transition: margin-bottom 0.5s ease; } .card-img-overlay .card-text { opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.5s ease, max-height 0.5s ease; } /* Hover state: move title up and reveal text */ .card-img-overlay:hover .card-title { margin-bottom: 20px; } .card-img-overlay:hover .card-text { opacity: 1; max-height: 100px; /* adjust as needed */ } /* For selected cards, always apply the hover style */ .selected-card .card-img-overlay .card-title { margin-bottom: 20px; } .selected-card .card-img-overlay .card-text { opacity: 1; max-height: 100px; } .selected-card .card { transform: scale(1.01); border: 2px dashed #C808BD !important; box-shadow: #C808BD 3px 3px inset; transition: transform 0.2s ease; } .selected-card .card .card-img-overlay { color: #C808BD; } .eventTypeCard:hover { cursor: pointer; } .eventTypeCard .desc { font-size: 0.7em; } .sentence-case { text-transform: lowercase; /* Make everything lowercase */ } .sentence-case::first-letter { text-transform: uppercase; /* Capitalize only the first letter */ } .bg-gray { background-color: #F0F0F0 !important; } .border-gray { border-color: #F0F0F0 !important; } .preview-box { padding: 10px; /*min-height: 100px;*/ margin-top: 1rem; } .preview-box p, .preview-box li { margin: 0 0 0.5rem; } .bg-lightblue { background-color: #EEF3F8 } .engagement-icon { width: 20px; height: 20px; } .border-dashed { border-style: dashed; } .upload-area { padding: 20px; text-align: center; } .upload-area i { font-size: 3rem; color: #888; } .upload-area p { margin: 5px 0; } .dragover { background-color: #e7f1ff; } .fade-upload { transition: opacity 0.5s ease; } .negative-margin { margin: -15px } .image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; } .image-grid img { width: 100%; cursor: pointer; border-radius: 5px; object-fit: cover; transition: transform 0.2s; aspect-ratio: 16 / 9; /* Adjust the aspect ratio as needed */ } .image-grid img:hover { transform: scale(1.05); } .preview-img { max-height: 400px; max-width: 100%; border-radius: 5px; } .btn-primary { background-color: #1B83C9 !important } /* Profile pic */ .profile-pic { display: inline-block; height: 35px !important; width: 35px !important; } .dark-accordion { background-color: transparent; /* Let parent background show through if needed */ } .dark-accordion .accordion-item { background-color: transparent; /* Dark background for each item */ border: none; } .dark-accordion .accordion-body .list-group-item { background-color: transparent; color: #fff; border-right: none; border-top: none; border-bottom: none; border-bottom-left-radius: 3px; border-top-left-radius: 3px; } .dark-accordion .accordion-body .list-group-item label { font-weight: 300; font-size: 1.2em; } .dark-accordion .accordion-body .list-group-item label:hover { cursor: pointer; } .dark-accordion .accordion-button { font-weight: 300; font-size: 1.0rem; } .dark-accordion .accordion-header { background-color: transparent; border: none; } .dark-accordion .accordion-button { background-color: transparent; color: #fff; border: none; } .dark-accordion .accordion-button:not(.collapsed) { background-color: transparent; color: #fff; } .dark-accordion .accordion-body { background-color: transparent; color: #fff; } .list-group-item-toggle { border-left: 4px solid transparent; transition: border-color 0.3s; padding: 0; background-color: transparent; } .list-group-item-toggle.checked { border-left-color: magenta; background-color: #0A1330 !important; } .list-group-item-toggle input[type='checkbox'] { display: none; } #sideNavHeader .list-group-item-toggle .categoryCheckLabel { display: block; padding-left: 20px; border-right: 3px solid transparent; color: var(--color-off-blue); border-radius: 4px; transition: all ease-in-out 0.3s; } #sideNavHeader .list-group-item-toggle.checked .categoryCheckLabel, #sideNavHeader .list-group-item-toggle .categoryCheckLabel:hover { background-color: #0A1330; color: #fff; padding-left: 25px; border-right-color: var(--color-primary); } /* Lightbox, mobile frame, previews */ .popover.fade { opacity: 1 !important; transition: none !important; } .lightbox-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 1050; /* Above most modals */ } .lightbox-content { position: relative; max-width: 90%; max-height: 90%; background-color: #fff; border-radius: 5px; overflow: auto; } .lightbox-close { position: absolute; top: 10px; right: 10px; z-index: 2; } .mobile-frame { width: 400px; /* typical iPhone width */ height: 730px; border: 14px solid #ccc; border-radius: 40px; background: white; padding: 0 0; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8); position: relative; overflow-y: auto; display: flex; flex-direction: column; overflow: hidden; position: relative; } .mobile-preview .card { border-radius: 20px; overflow: hidden; box-shadow: none; } .mobile-frame::before { content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 60px; height: 5px; background: #999; border-radius: 10px; } .mobile-status-bar { height: 24px; font-size: 0.75rem; border-bottom: 1px solid #ddd; background-color: #f8f9fa; border-top-left-radius: 25px; border-top-right-radius: 25px; } .mobile-status-bar i { font-size: 0.9rem; } .mobile-gesture-bar, .gesture-indicator { display: none } .mobile-preview .mobile-gesture-bar { height: 36px; background-color: #f8f9fa; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; display: flex; align-items: center; justify-content: center; padding-bottom: 8px; } .mobile-preview .gesture-indicator { width: 90px; height: 5px; background-color: #ccc; border-radius: 10px; } .mobile-preview .mobile-status-bar, .mobile-preview .mobile-gesture-bar, .mobile-preview .mobile-nav-bar { flex-shrink: 0; } .mobile-preview .flex-fill { flex: 1 1 auto; overflow-y: auto; } .mobile-preview .mobile-gesture-bar { display: none; } .mobile-preview .mobile-gesture-bar { display: flex; } .btn-danger { /* Misc button & card styles */ background: #C808BD !important; } .text-danger { color: #C808BD !important; } .border-danger { border-color: #C808BD !important; } .w-45 { width: 45% !important } input[type="radio"] { accent-color: #C808BD; /* changes the color of the radio button */ } #adminSidebar { transition: width 0.3s ease; /*width: 260px;*/ overflow: hidden; width: var(--sidebar-width); } #adminSidebar.collapsed { width: 70px; } #adminSidebar.collapsed .sideNavHeader, #adminSidebar.collapsed .menu-label, #adminSidebar.collapsed .side-team-card { display: none !important; } #adminSidebar .bi { font-size: 1.2rem; } .multiSelectField { min-height: 3rem; background: #f9f9f9; display: contents; } .multiSelectField label { margin-left: 2em; } .tag-item { color: #000 !important; border-color: #C808BD !important; background: unset !important; } .tag-item .remove-button { color: #C808BD !important; font-size: 0.8em; } tag-input .suggestion-item.selected { background: #C808BD !important; color: white !important; } .cursor-pointer { cursor: pointer; } .card.transition:hover { border-color: #0d6efd; background-color: #e9f5ff; } .alert-danger { background-color: #ffe8e8; color: #110101; } .cursor:hover { cursor: pointer; } .fixed-thumb { width: 100%; /* fill the card’s width */ /*height: 200px;*/ /* pick a uniform height */ object-fit: cover; /* center-crop, no stretching */ object-position: center center; display: block; aspect-ratio: 16/9 } .generatedCardWrapper .card-body { max-height: 250px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 13; } .generatedCardWrapper { filter: grayscale(100%) opacity(50%); } .generatedCardWrapper.checked { filter: unset } .bottom-drop-shadow { box-shadow: 0px 4px 5px 0px #334455 } .engagement-icon { width: 24px; /* or whatever size you want */ height: 24px; border: 2px solid #fff; /* gives a little white outline */ object-fit: cover; border-radius: 50%; position: relative; } /* every icon after the first overlaps the one before it */ .engagement-icon + .engagement-icon { margin-left: -14px; /* tweak until the overlap looks good */ z-index: 1; /* bring each slightly above the previous */ } /* optional: bring the hovered icon fully to front */ .engagement-icon:hover { z-index: 2; } /* Glider/carousel */ .glider-contain { /*padding: 1rem;*/ position: relative; } .glider-prev, .glider-next { background: #eee; border: none; padding: 0.5rem 1rem; margin-top: 1rem; cursor: pointer; } .glider .card { max-width: 350px; margin: 0 auto; } .glider-contain .glider { display: flex; } .glider .card { min-width: 300px; max-width: 100%; } .glider-nav-container { display: flex; justify-content: flex-end; align-items: center; margin-top: 0.5rem; padding-right: 1rem; } .glider-nav-container .dots { margin-right: auto; display: flex; gap: 4px; } .glider-prev, .glider-next { font-size: 0.75rem; padding: 0.25rem 0.75rem; line-height: 1; border-radius: 5px; } /* Nav tabs & article nav */ .nav-tabs { border-radius: unset; border: 1px } .article-nav .nav-link { background-color: #E1E1E1; text-align: left; color: #486581 !important; } .article-nav .nav-link.active { border-left: 5px solid #C808BD !important; background-color: #FFF; } /* pastel badge backgrounds & text */ .badge‐for‐me { background: #f3e6ff; color: #8338ec; } .badge‐retail { background: #ffe6e0; color: #ff5722; } /* keyword badges: just purple text + code icon */ .badge‐keyword { background: transparent; color: #8338ec; } /* Button hover border */ .grayBoxCard { background-color: #F4F5F9; border-color: #E1E1E1 !important; } .font-light { font-weight: 400 !important; } .btn-outline-danger { color: #C808BD; border-color: #C808BD; } .btn-hover-border { position: relative; overflow: hidden; border: 2px solid transparent; /* Initially transparent */ transition: color 0.3s ease-in-out; width: fit-content; border-radius: 0 !important; } .btn-hover-border::after { content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; /* Border thickness */ background-color: #e100ff; /* Matches text color */ transition: width 0.3s ease-in-out; } .btn-hover-border:hover::after { width: 100%; } .ArticleSteps .ArticleUploadStep { padding: 0.5em 1.5em; } .ArticleSteps .col-4.active { border-bottom-color: #C808BD !important; } .ArticleSteps .col-4.active h5 { color: #AEB9E1; } .ArticleSteps .col-4 h5 { color: #AEB9E1; } .ArticleSteps .col-4.active.current h5 { color: rgba(0, 0, 0, 1); font-weight: 500 } .ArticleSteps .border-bottom { border-bottom-width: 3px !important; } /* hide the “down” chevron by default */ .article-nav .nav-link .icon-down { display: none; } /* when the tab is active, swap them */ .article-nav .nav-link.active .icon-right { display: none; } .article-nav .nav-link.active .icon-down { display: inline-block; } /* RSS table */ /* Container for nice rounding & shadow */ .rss-table-wrapper { background: #fff; /*border-radius: 0.5rem;*/ /* rounded corners */ overflow: auto; } /* Base table reset */ .rss-table { width: 100%; border-collapse: collapse; } /* Header styling */ .rss-table thead { background-color: #f4f6f8; /* very light grey */ } .rss-table th { padding: 0.75rem 1rem; text-align: left; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; color: #6b7280; /* slate-gray */ border: none; /* remove default borders */ position: relative; /* for dropdown icon if you add one later */ } .rss-table tbody tr:nth-child(even) { background-color: #F5F5F5; } /* Body rows */ .rss-table tbody tr:nth-child(even) { background-color: #fafbfc; /* alternate stripe */ } .rss-table td, .grayMessageBox { padding: 0.75rem 1rem; vertical-align: middle; font-size: 0.875rem; color: #374151; /* dark slate */ border-top: 1px solid #e5e7eb; /* subtle row divider */ } .grayMessageBox { border: 1px solid #e5e7eb; background-color: rgba(0, 0, 0, 0.05); } /* Links in cells (e.g. your RSS URLs) */ .rss-table a { color: #3b82f6; /* bootstrap primary */ text-decoration: none; } .rss-table a:hover { text-decoration: underline; } /* Badge (pill) styling */ .rss-table .badge { display: inline-block; padding: 0.25em 0.5em; font-size: 0.75rem; font-weight: 500; line-height: 1; border-radius: 0.375rem; margin-right: 0.25rem; /* default neutral colors */ background-color: #e5e7eb; color: #374151; } /* Example “theme” classes for your different tags: you can assign these to your Legal etc. */ .badge-0 { background: #e2e300; color: #0050c9; border-color: #0050c9 !important; } .badge-1 { background: #d1fae5; color: #065f46; border-color: #065f46 !important; } .badge-2 { background: #fde2ff; color: #9d174d; border-color: #9d174d !important; } .badge-3 { background: #ffedd5; color: #92400e; border-color: #92400e !important; } .badge-4 { background: #dbf4ff; color: #0c4a6e; border-color: #0c4a6e !important; } .badge-5 { background: #fef9c3; color: #713f12; border-color: #713f12 !important; } .badge-6 { background: #fee2e2; color: #991b1b; border-color: #991b1b !important; } .badge-7 { background: #d1fae5; color: #065f46; border-color: #065f46 !important; } .badge-8 { background: #fee2e2; color: #b91c1c; border-color: #b91c1c !important; } .badge-9 { background: #e5e7eb; color: #374151; border-color: #374151 !important; } .badge-10 { background: #f3e8ff; color: #6b21a8; border-color: #6b21a8 !important; } .badge-11 { background: #e0f2fe; color: #075985; border-color: #075985 !important; } /* Footer / pagination area */ .rss-table__footer { display: flex; justify-content: space-between; align-items: center; background-color: #f4f6f8; font-size: 0.875rem; color: #6b7280; } /* Example styling for your select & arrows */ .rss-table__footer select { border: 1px solid #d1d5db; border-radius: 0.375rem; padding: 0.25rem 0.5rem; background: #fff; } .rss-table__footer .pagination { display: flex; gap: 0.5rem; } .rss-table__footer .pagination button { border: none; background: transparent; color: #3b82f6; font-size: 1rem; } .rss-table__footer .pagination button:disabled { color: #cbd5e1; } /* 1) gradient + circles */ .widget-user-custom .widget-user-header { position: relative; background: linear-gradient(135deg, #6e00ff, #12005e); overflow: hidden; border-radius: .5rem; } .widget-user-custom .widget-user-header .bg-circle { position: absolute; border-radius: 50%; opacity: .2; } .widget-user-custom .circle-1 { width: 300px; height: 300px; background: #8338ec; top: -50px; right: -100px; } .widget-user-custom .circle-2 { width: 200px; height: 200px; background: #9d00ff; bottom: -60px; left: -80px; } .widget-user-custom .circle-3 { width: 150px; height: 150px; background: #ff006e; top: 20%; left: 60%; } /* 2) top‐bar text */ .widget-user-custom .top-bar { /*background: rgba(255, 255, 255, 0.1);*/ border-radius: 20px; padding: 5px 20px; margin-bottom: 20px; color: white; font-weight: 500; font-size: 0.9rem; } .widget-user-custom .top-bar .badge-initials { background: #ff006e; margin-left: .5rem; font-weight: normal; } /* 3) stats row */ .widget-user-custom .stats i { margin-right: .25rem; } .widget-user-custom .stats span { margin-right: 1.5rem; color: rgba(255,255,255,.85); } /* 4) category tags */ .widget-user-custom .category-tags { position: absolute; top: 1rem; right: 1rem; } .widget-user-custom .category-tags .badge { background: rgba(255,255,255,.2); color: #fff; margin-left: .5rem; } /* 5) action buttons */ .widget-user-custom .action-buttons { position: absolute; bottom: 1rem; right: 1rem; } .widget-user-custom .action-buttons a { color: #fff; margin-left: 1rem; text-transform: uppercase; font-size: .875rem; } /* 1) Let the card “bleed” its children */ .card.widget-user-custom { /* or whatever your card selector is */ overflow: visible; margin-bottom: 80px; /* room for the avatar to hang below */ } /* 2) Make your avatar column a positioning context */ .col-avatar { position: relative; overflow: visible; } /* 3) Reposition & layer the avatar */ .widget-user-image { position: absolute; bottom: -40px; /* how far it drops below the card */ left: 50%; transform: translateX(-50%); z-index: 50; /* sit above the card */ } .bgBlueBackground { background-image: url('Images/Group1000005700.png') !important; background-size: cover !important; border-bottom: 4em solid transparent; background-repeat: no-repeat !important; position: relative; border-radius: 0 0 15px 15px; color: white; overflow: visible !important; } /* Optional subtle circles */ .bgBlueBackground::before, .bgBlueBackground::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.1); filter: blur(30px); pointer-events: none; z-index: 1; } .bgBlueBackground::before { width: 150px; height: 150px; top: 20%; right: 10%; } .bgBlueBackground::after { width: 100px; height: 100px; bottom: 10%; left: 15%; } .bg-50 { /* override Bootstrap’s bg-* opacity variable */ background: #AEB9E150; --bs-bg-opacity: 0.5 !important; } .royal-blue-magenta-gradient { background: linear-gradient(103deg, #5138F8 0%, #8A21DC 50%, #C40AC0 100% ); border-radius: 4px; width: 100%; height: 250px; } .royal-blue-magenta-gradient-dark { background: linear-gradient(143deg, #1e0991 0%, #570773 78%); border-radius: 16px; width: 100%; height: 250px; } .postCampaignCard .flatpickr-input { max-width: 120px } /* Button styles */ .btn-outline-danger:hover { background-color: #C808BD !important; } .btn-purple { background-color: #7744D4; } .btn-purple:hover { background-color: #58319f; } .btn-blue { background-color: #129BF8 } .btn-blue:hover { background-color: #0a5d95 } .btn-small { font-size: 0.85em; } /* Various card/group styles */ .avatar-stack { display: flex; flex-direction: row; align-items: center; position: relative; } .avatar-wrapper { margin-left: -1.7em; /* overlap */ transition: transform 0.2s ease, z-index 0.2s ease; z-index: 1; } .avatar-wrapper:first-child { margin-left: 0; } .avatar-wrapper:hover { transform: scale(1.2); z-index: 10; } .pBoxPostType { line-height: 1.5; min-height: 75px !important; } .groupContainer .card-header { font-weight: 600 } .accordion-header .btn-link { text-transform: unset; color: var(--color-primary) !important; font-weight: normal; letter-spacing: unset; } .accordion-header .btn-link.collapsed { color: var(--color-white) !important; font-weight: 500; } .accordion-header .btn-link:after { right: 0; position: absolute; margin-right: 2em; transition: transform 0.4s ease; /* Add this for smooth rotation */ transform: rotate(90deg) } .accordion-header .btn-link.collapsed:after { transform: rotate(0deg); } .fw-normal { font-weight: normal; } /* Design system typography & buttons */ .text-color-primary { color: var(--color-primary); } .text-color-light-blue-grey { color: var(--color-light-blue-grey); } .text-color-darker-blue { color: var(--color-darker-blue); } h1, h2 { color: var(--color-title); } .h-large { font-size: 64px; font-weight: 700; line-height: var( --line-height-sm); } .text-base-xs { font-size: var(--font-size-base-xs); } .text-base-sm { font-size: var(--font-size-base-sm); } .text-base { font-size: var(--font-size-base); } .text-base-md { font-size: var(--font-size-base-md); } .text-base-lg { font-size: var(--font-size-base-lg); } .fw-medium { font-weight: 500; } .line-height-sm { line-height: var( --line-height-sm); } .mx-3-5 { margin-left: var(--spacer-3-5); margin-right: var(--spacer-3-5); } .mx-neg-3-5, .mx-neg-3-5.glider { margin-left: calc(var(--spacer-3-5) * -1); margin-right: calc(var(--spacer-3-5) * -1); } .ml-2-5 { margin-left: var(--spacer-2-5); } .mr-2-5 { margin-right: var(--spacer-2-5); } .mb-3-5 { margin-bottom: var(--spacer-3-5); } .mt-5 { margin-top: var(--spacer-5); } .mt-7 { margin-top: var(--spacer-7); } .mb-7-5 { margin-bottom: var(--spacer-7-5); } .mt-12-5 { margin-top: var(--spacer-12-5); } .mb-12-5 { margin-bottom: var(--spacer-12-5); } .px-7-5 { padding-left: var(--spacer-7-5); padding-right: var(--spacer-7-5); } .py-12-5 { padding-top: var(--spacer-12-5); padding-bottom: var(--spacer-12-5); } .gap-2-5 { gap: var(--spacer-2-5); } .title-small { color: #000; font-size: var(--font-size-base-sm); font-weight: 700; line-height: var(--line-height-sm); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: var(--spacer-5); } .btn-base { display: flex; align-items: center; gap: var(--spacer-2-5); font-size: var(--font-size-base-sm); line-height: var(--line-height-sm); letter-spacing: 0.15em; padding: 9px 40px; text-transform: uppercase; border-radius: 80px; } .btn-primary-border { border: 1px solid var(--color-primary); color: var(--color-primary); } .btn-primary-border:hover { color: var(--color-primary); } .btn-primary-fill { background-color: var(--color-primary); border: 1px solid var(--color-primary); color: #fff; } .btn-primary-fill:hover { color: #fff; } .btn-arrow::after { content: ''; background-image: url("data:image/svg+xml,%3Csvg width='5' height='9' viewBox='0 0 5 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L4 4.50049L1 7.5' stroke='%23C808BD' stroke-linecap='square'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: contain; display: block; width: 5px; height: 9px; } .btn-edit.btn-primary-fill::after { content: ''; background-image: url("data:image/svg+xml,%3Csvg width='10' height='9' viewBox='0 0 10 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5.83333L3.75 7.28788M5 8.5H9M1.75 5.83333L6.67974 0.886031C7.21053 0.371324 8.07111 0.371323 8.6019 0.88603C9.1327 1.40074 9.1327 2.23524 8.60191 2.74995L3.5 7.5303L1 8.25758L1.75 5.83333Z' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: contain; display: block; width: 10px; height: 9px; } .btn-link { color: var(--color-primary); display: flex; align-items: center; gap: 15px; font-size: var(--font-size-base); font-weight: 600; line-height: var(--line-height-sm); letter-spacing: 0.15em; /*text-transform: uppercase;*/ } .btn-link:hover { color: var(--color-primary); } #sideNavAccordion .btn-link::after { content: ''; background-image: url("data:image/svg+xml,%3Csvg width='8' height='13' viewBox='0 0 8 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2.00049L6.5 6.50049L2 11.0005' stroke='%23C808BD' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: contain; background-position: 0 1px; display: block; width: 8px; height: 13px; } /* Content dashboard cards */ .content-dashboard .content-title { border-bottom: 1px solid rgba(16, 16, 16, 0.25); padding-bottom: 21px; } .content-title h1 { margin-bottom: 0; } .content-title .content-stats { gap: 18px; align-self: center; top: 7px; } .content-stats .content-stat { background-color: var(--color-primary); border-radius: 4px; gap: 10px; padding: 7px 36px; } .content-stats .content-stat .bi { color: #FF2EF3; } .content-dashboard .content-main { gap: 75px; } .content-cards { gap: 58px; } .content-cards .content-card { border-radius: 10px; } .content-card .card-body { padding: 20px 20px 10px 42px; } .content-card .card-body::before { content: ''; border-radius: 1px; width: 4px; height: 76px; position: absolute; top: 20px; left: 20px; } .content-card .card-badge { border-radius: 4px; color: var(--color-title); font-size: var(--font-size-base); width: fit-content; padding: 2px 12px; margin-bottom: 20px; } .content-card .card-title { color: #243B53; font-size: var(--font-size-base); margin-bottom: 9px; } .content-card .card-text { color: #486581; line-height: 1.2em; width: 92%; margin-bottom: 14px; } .content-card-purple { background-color: #FFF9FF; } .content-card-purple .card-badge { background: #FEC9FB; } .content-card-purple .card-body::before { background: #DD00D0; } .content-card-purple .fas { color: #DD00D0 } .content-card-teal { background-color: #F4FFFC; } .content-card-teal .card-badge { background: #C6F7E9; } .content-card-teal .card-body::before { background: #00CA90; } .content-card-teal .fas { color: #00CA90 } .content-card-orange { background-color: #FFFAF2; } .content-card-orange .card-badge { background: #FFE1B2; } .content-card-orange .card-body::before { background: #FF9C00; } .content-card-orange .fas { color: #FF9C00 } .content-dashboard .content-posts { margin-top: 73px; } .card-article { border-radius: 0; box-shadow: none; } .card-article .card-image { height: 267px; } .card-article .card-image .card-img-top { border-radius: 0; } .card-article .card-image .card-category { letter-spacing: 0.15em; padding: 11px 20px 10px; } .card-article .card-body { border: 1px solid #ECECEC; border-top: 0; padding: 30px 22px 54px; } .card-article .card-body .card-title { letter-spacing: 0.02em } .card-article .card-body .card-text { line-height: 142.857%; letter-spacing: 0.01em; } /* Section header */ .sectionHeaderLink .bi { color: var(--color-primary) } #campaignForm .card { box-shadow: unset } #campaignForm .card.border { border: unset } .bg-dark-gradient { background: linear-gradient(173deg, #090121 0%, #101010 112.33%) } #campaignForm .eventTypeCard .card-img { overflow: hidden; /* clip zoomed image inside */ border-radius: inherit; /* optional: keep rounded corners */ } #campaignForm .eventTypeCard .card-img img { transition: transform 0.8s ease; /* smooth zoom */ will-change: transform; display: block; /* avoid inline image spacing issues */ } #campaignForm .eventTypeCard.card:hover .card-img img, #campaignForm .eventTypeCard.card:focus-within .card-img img, #campaignForm .eventTypeCard.card.touch-zoom .card-img img { transform: scale(1.05); /* zoom in by 10% */ } /* Widget user header & team avatars */ .widget-user-header { position: relative; /* Needed for absolutely positioned children */ overflow: visible !important; /* Allow overflow outside the container */ padding-bottom: 80px; /* Add bottom padding so the content below isn't overlapped */ } .widget-user-image img { width: 150px; /* Or your preferred size */ height: 150px; border-radius: 50%; /* Make circle */ object-fit: cover; /* Cover image nicely */ position: absolute; /* Position absolutely relative to header */ left: 20px; /* Or center horizontally by left: 50% + transform */ box-shadow: 0 0 10px rgba(0,0,0,0.3); border: 4px solid white; /* Optional white border */ background-color: white; /* In case image has transparency */ z-index: 10; } /* If you want it horizontally centered instead of aligned left */ .widget-user-image { position: relative; /* Ensure container is relative for absolute img */ width: 150px; /* same as img */ margin: 0 auto; /* center container */ } .widget-user-image img { left: 50%; transform: translateX(-50%); } .teamAvatarImage { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); width: 180px; height: 180px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 10px rgba(0,0,0,0.3); border: 4px solid white; background-color: white; z-index: 10; } #profileCollapse a.nav-link { transition: all ease-in-out 0.2s; color: #AEB9E1 !important } #profileCollapse a.nav-link.active, #profileCollapse a.nav-link:hover { background-color: #0A1330 !important; color: #fff; padding-left: 25px; } #profileCollapse a.nav-link::before { content: ''; background-color: var(--color-primary); width: 3px; height: 100%; position: absolute; top: 0; left: 0; transition: all ease-in-out 0.2s; opacity: 0; transition-delay: 0.2s; } #profileCollapse a.nav-link.active::before, #profileCollapse a.nav-link:hover::before { opacity: 1; } #profileCollapse .nav-link.active { border-bottom: unset } /* Button variants */ .btn-font-1em { font-size: 1em; background-image: none; } .btn-meduium-teal-green { background-color: #05C168; color: white; border: none; transition: background-color 0.3s ease; } .btn-meduium-teal-green:hover, .btn-meduium-teal-green:focus, .btn-meduium-teal-green:active, .btn-meduium-teal-green.active { background-color: #049955; /* darker shade */ outline: none; /* remove focus outline if needed */ box-shadow: none; /* remove focus shadow if needed */ } .btn-primary-blue { background-color: #4260F1; color: white; border: none; transition: background-color 0.3s ease; } .btn-primary-blue:hover, .btn-primary-blue:focus, .btn-primary-blue:active, .btn-primary-blue.active { background-color: #334ACC; outline: none; box-shadow: none; } .btn-danger { background-color: #C808BD; color: white; border: none; transition: background-color 0.3s ease; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active { background-color: #9A067F; /* darker magenta */ outline: none; box-shadow: none; } /* Misc utilities */ .interactiveTable { border: 1px solid #ddd8d8; } .Font14px { font-size: 14px !important; } .bg-lighter { background-color: rgba(0,0,0,0.25) } .border-danger { border: 1px solid #C808BD !important; } .border-danger-color { border-color: #C808BD !important; border-style: solid; border-width: inherit; } .bulk-invite-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); display: flex; justify-content: center; align-items: center; pointer-events: none; } .bulk-invite-overlay a { pointer-events: auto; } #bulkInviteWrapper textarea.form-control.h-100 { height: 250px; } .border-thickness-3 { border-width: 3px !important } .offcanvas-body #EditFormCanvasBlock { padding-left: 1em !important; padding-right: 1em !important; } .ombre-border-box { position: relative; padding: 20px 30px; background: white; border-radius: 12px; z-index: 1; font-family: sans-serif; } .ombre-border-box::before { content: ""; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; background: linear-gradient(103deg, #5138F8 0%, #8A21DC 50%, #C40AC0 100%); z-index: -1; border-radius: 16px; } .pm-logo { width: 40px } .dark-yellow-tag { background-color: #ffd400; border: 1px solid #e0be14 } .preview-box p, .preview-box li { margin-bottom: unset } .select2-container .select2-selection--single, .select2-selection.select2-selection--multiple { height: 36px !important; min-height: 36px !important } .select2-container--default .select2-selection--multiple .select2-selection__choice { color: #333; } .disabled-card { opacity: 0.55; filter: grayscale(0.2); } .card-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.6); z-index: 10; text-align: center; cursor: pointer; } .card-overlay .overlay-text { color: #ffffff; font-weight: 600; font-size: 1rem; margin-bottom: 8px; } .card-overlay .overlay-subtext { color: #C808BD; font-size: 0.875rem; } /* ========================================================================== footer.css - Footer layout, columns, headings, menus, social icons ========================================================================== */ .footer { padding: 40px 0; } .footer a { color: white; text-decoration: none; } .footer a:hover { text-decoration: underline; } .signup-link { color: #d81b60; font-weight: bold; } .social-icons a { color: white; font-size: 18px; margin-right: 10px; } .social-icons a:hover { opacity: 0.7; } .footer hr { border-color: rgba(255, 255, 255, 0.2); } .footer { background: linear-gradient(173deg, #090121 0%, #101010 112.33%); padding-top: 117px; padding-bottom: 128px; } .footer-column-1 { width: 12%; margin-right: 8.3%; } .footer-column-2 { min-width: 24.3%; margin-right: 6.4%; max-width: max-content; } .footer-column-3 { flex: 1; } .footerHead { font-size: 36px; font-weight: 300; line-height: 105%; letter-spacing: 0.02em; margin-bottom: 55px; padding-bottom: 0; } .footer-menu { display: flex; flex-direction: column; gap: 15px; } .footer-menu li { margin-bottom: 0; } .footer-menu a { line-height: var(--line-height-sm); } .footer .form-invite .input-group { margin-bottom: 33px; border-bottom: 1px solid rgba(255,255,255,0.25); } .footer .form-invite .form-control { background-color: transparent; border: none; padding: 0 0 14px; color: #fff; font-size: var(--font-size-base); } .footer .form-invite .form-control::placeholder { color: #fff; opacity: 1; } .footer .form-invite button { font-size: var(--font-size-base); color: var(--color-primary); letter-spacing: 0.15em; text-transform: uppercase; padding-right: 0; display: flex; align-items: center; gap: 15px; transform: translateY(-6px); } .footer .form-invite button:active { border: none; color: var(--color-primary); } .footer .form-invite button::after { content: ''; background-image: url("data:image/svg+xml,%3Csvg width='8' height='13' viewBox='0 0 8 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L6.5 6.5L2 11' stroke='%23C808BD' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: contain; width: 8px; height: 13px; display: block; } .footer .form-invite .form-check .text-color-primary { color: var(--color-primary); } .footer .social-icons { display: flex; gap: 20px; margin-top: 35px; } .footer .social-icons a { margin-right: 0; } .footer .footer-logo { max-width: 208px; margin-top: 41px; } .footer .footer-text { font-size: var(--font-size-base-sm); margin-top: 39px; line-height: var(--line-height-sm); } .footer .footer-copyright { margin-top: 32px; } .footer { background: #081028; padding-top: 40px; padding-bottom: 0; } .footer-row { gap: 60px; margin-bottom: 35px; } .footer-column-1 { width: 64.62%; margin-right: 7.2%; } .footer-column-2 { width: 18.42%; display: none; margin-right: 6%; } .footer-column-3 { width: 10%; min-width: fit-content; } .footer-column-4 { width: 10%; min-width: fit-content; } .footer-logo { margin-bottom: 39px; } .footer-text { line-height: 142.857%; letter-spacing: 0.01em; } .footerHead { color: #486581; font-size: var(--font-size-base-md); line-height: var(--line-height-sm); margin-bottom: 48px; margin-top: 15px; } .footer .form-invite .input-group { display: flex; margin-bottom: 17px; } .footer .form-invite .form-control { background: #050B1E; border: none; color: #fff; font-size: var(--font-size-base); font-weight: 300; letter-spacing: -0.01em; line-height: var(--line-height-sm); padding: 7px 10px; text-transform: none; border-radius: 0; } .footer .form-invite .form-control::placeholder { color: #243B53; opacity: 1; letter-spacing: -0.01em; text-transform: none; } .footer .form-invite button { background-color: #0A1330; border: none; font-size: var(--font-size-base); color: var(--color-primary); letter-spacing: 0.05em; text-transform: uppercase; display: flex; align-items: center; gap: 20px; padding: 5px 13px; font-weight: 600; } .footer .form-invite button:active { border: none; color: var(--color-primary); } .footer .form-invite button::after { content: ''; background-image: url("data:image/svg+xml,%3Csvg width='7' height='11' viewBox='0 0 7 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 1.5L6 5.5L2 9.5' stroke='%23C808BD' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: contain; width: 7px; height: 11px; display: block; } .footer .form-invite .form-check { color: #AEB9E1; gap: 10px; } .footer .form-invite .form-check .form-check-input { border-color: var(--color-primary) !important; margin: 0; position: relative; border-radius: 0; } .footer .form-invite .form-check a { color: #AEB9E1; } .footer-menu ul { list-style-type: none; padding-left: 0; margin-bottom: 0; } .footer-menu ul li { margin-bottom: 15px; } .footer-menu a { border-bottom: 1px solid var(--color-primary); color: #E1E3FF; font-size: var(--font-size-base); line-height: 1; padding-bottom: 7px; } .footer-menu a:hover { text-decoration: none; } .footer .footer-bottom { display: flex; padding: 20px 0; } .footer .copyright { color: #486581; line-height: 140%; letter-spacing: 0.01em; } .footer .copyright .separator { color: #4C4C4C; } .footer .footer-socials { gap: 15px; } .dashboard-location-weather { padding-top: 20px; } /* ========================================================================== teams.css - Team management, schedule, role badges, member tables ========================================================================== */ /* Team cards & members */ .team-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border: 1px solid #ddd; } .team-member { display: flex; align-items: center; padding: 12px; border-radius: 8px; background: white; border: 1px solid #ddd; margin-bottom: 10px; } .team-member img { width: 40px; height: 40px; border-radius: 50%; background: black; /* Placeholder for profile picture */ margin-right: 12px; } .member-info { flex-grow: 1; } .member-info h6 { margin: 0; font-size: 16px; font-weight: bold; } .member-info p { margin: 0; font-size: 14px; color: #6c757d; } .options { font-size: 20px; color: #6c757d; cursor: pointer; } .see-all { color: red; font-weight: bold; text-decoration: none; display: inline-block; margin-top: 10px; } .see-all:hover { text-decoration: underline; } /* Side teams card & schedule box */ /* Side teams card*/ .team-list { border: none; } .team-item { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 10px 0; color: #fff } .team-item:last-child { border-bottom: none; } .team-btn { background: transparent; color: #d633ff; border-radius: 6px; padding: 5px 8px; font-size: 16px; border: none } .rounded-purple-btn { background: #d633ff; color: white; font-weight: bold; border-radius: 30px; padding: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; border: none; } /*Schedule box*/ .day-header { padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; cursor: pointer; } .day-header:hover { background: #f0f0f0; } .status-badge { font-size: 14px; padding: 6px 12px; border-radius: 20px; font-weight: bold; display: flex; align-items: center; gap: 5px; color: white } .posted { background: #d9f5df; } .posted .status-badge { background: #008000; } .scheduled { background: #e3e7fd; } .scheduled .status-badge { background: #0033cc; } .arrow { font-size: 18px; color: #666; } .post-container { padding: 10px 20px; border-left: 4px solid #e3e7fd; background: #e5e8ff; border-radius: 5px; margin: 5px 0; } /* . { width: 50px; height: 50px; object-fit: cover; border-radius: 5px; } */ .post-meta { font-size: 12px; color: #666; } .team-post { color: #4a90e2; font-size: 12px; font-weight: bold; } .your-post { color: #c900c9; font-size: 12px; font-weight: bold; } .avatar-group img { width: 25px; height: 25px; border-radius: 50%; margin-left: -1em; text-align: right; align-items: end; border: 2px solid white; } /* Member circle */ .member-circle { width: 40px; /* Adjust size */ height: 40px; background-color: white; /* Background */ color: black; /* Text color */ font-weight: bold; border-radius: 50%; /* Makes it a circle */ display: flex; align-items: center; /* Vertical center */ justify-content: center; /* Horizontal center */ border: 2px solid #ddd; /* Optional border */ font-size: 0.8em; } /* Team member redesign */ .weekly-planner { border: 1px solid rgba(0,0,0,0.15); } .weekly-planner .day-header { padding: 5px 20px; } .weekly-planner [data-bs-target="#day0"] .day { font-weight: 700 !important; } .weekly-planner .date { letter-spacing: 0.15em; } .dashboard-details { margin-top: 58px; } .dashboard-details .task-card { border: 1px solid rgba(0,0,0,0.25); } .task-card .card-title, .team-card .card-title { margin-bottom: 44px; } .task-card .icon-placeholder { border-radius: 0; margin-right: 20px; width: 83px; height: 83px; } .task-card .task-title { letter-spacing: 0.02em; margin-top: 11px; max-width: 255px; } .members img { border: 3px solid white; } .member-circle { border: none !important; background-color: #E0E5F2 !important; letter-spacing: -0.176px; font-size: 9px; } .task-card .time-used-label { color: var(--color-primary); line-height: 171.429%; letter-spacing: -0.02em; } .team-member { border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 0; background: #FFF; padding: 11px 16px; margin-bottom: 17px; gap: 18px; } .team-member img { width: 46px; height: 46px; object-fit: cover; margin-right: 0; } .team-member .member-info h6 { color: #000; letter-spacing: -0.02em; } .team-member .member-info p { color: #000; font-size: var(--font-size-base-sm); letter-spacing: -0.02em; } .team-card .options { color: #A3AED0; } .promo-card { text-align: left; } .promo-card .card-title { margin-bottom: 68px; } .promo-card .promo-icon { margin-top: 0; margin-bottom: 51px; } .promo-card .promo-title { color: #000; font-size: var(--font-size-base-lg); font-weight: 400; line-height: var(--line-height-sm); letter-spacing: 0.02em; margin-top: 0; margin-bottom: 21px; } .promo-card .promo-text { color: #000; font-size: var(--font-size-base-md); margin-bottom: 21px; } /* Content members & card tabs */ .content-members .content-title { margin-bottom: 70px; } .content-members .content-title h1, .mainHeaderElement { color: var(--color-darker-blue); font-size: 48px; line-height: var(--line-height-sm); } .card-tabs { gap: 15px; margin-bottom: 20px; } .card-tabs .card-tab { border-radius: 12px; border: 1px solid #ECECEC; background: #FFF; padding: 10px 15px 13px 20px; min-width: 289px; } @media screen and (max-width:250px) { .card-tabs .card-tab { min-width: unset; } } .card-tabs .card-tab::before { content: ''; background-color: var(--color-primary); border-radius: 12px 0 0 12px; width: 10px; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; } .card-tabs .card-tab.active { border: 1px solid #FAF5FF; background: #FAF5FF; } .card-tabs .card-tab.active::before { opacity: 1; } .card-tabs .card-badges { gap: 6px; margin-bottom: 15px; } .card-tabs .card-badges .card-badge { color: #9B9B9B; font-size: 11px; padding: 5px 16px 4px; border-radius: 6px; background: rgba(0, 0, 0, 0.15); } .card-tabs .active .card-badges .card-badge-super-administrator { color: #129BF8; background: rgba(18, 155, 248, 0.15); } .card-tabs .active .card-badges .card-badge-editor { color: #DB9E13; background: rgba(239, 174, 26, 0.15); } .card-tabs .card-title { color: #9B9B9B; margin-bottom: 5px; } .card-tabs .active .card-title { color: var(--color-darker-blue) } .card-tabs .card-date { color: #9B9B9B; font-size: 11px; letter-spacing: -0.01em; margin-bottom: 15px; } .card-tabs .card-icons { gap: 17px; } .card-tabs .card-icon { gap: 8px; color: #9B9B9B; } .card-tabs .active .card-icon { color: #334E68; } .card-tabs .card-icon path { stroke: #9B9B9B; } .card-tabs .active .card-icon path { stroke: var(--color-primary); } .card-tabs .card-icons .fas { color: #9B9B9B; } .card-tabs .active .card-icons .fas { color: var(--color-primary); transform: rotate(90deg); } .card-tabs .card-tab-create { border-radius: 12px; border: 1px solid #ECECEC; background: #FFF; min-width: 175px; padding: 31px 35px; color: var(--color-title); gap: 14px; } .team-wrapper .card-header .card.widget-user-custom { margin-bottom: 0; } .team-wrapper .widget-user-header { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; } .team-wrapper .top-bar { padding: 10px 20px; gap: 11px; } .team-wrapper .widget-user-custom .category-tags .badge { margin-left: 0; padding: 3px 10px 2px; border-radius: 15px; height: 25px; display: flex; align-items: center; } .team-wrapper .widget-user-custom .category-tags .badge .badge-initials { width: 20px; height: 20px; border-radius: 20px; background: linear-gradient(313deg, #FDC001 -10.13%, #C808BD 116.28%); margin-left: 5px; } .team-wrapper .widget-user-custom .category-tags .badge-label { color: #AEB9E1; font-size: 11px; letter-spacing: -0.01em; } .team-wrapper .widget-user-custom .category-tags .badge-value { margin-left: 20px; } .team-wrapper .widget-user-custom .category-tags-wrapper { gap: 10px; top: 10px; } .team-wrapper .widget-user-custom .category-tags-wrapper .badge { font-size: var(--font-size-base-sm); font-weight: 500; line-height: var(--line-height-sm); padding: 5px 16px 6px; } .team-profile { /*padding-left: 33px;*/ margin-top: 9px; } .team-profile .widget-user-image { transform: none; margin-top: 4px; position: static !important; margin-bottom: -35px; } .team-profile .widget-user-image img { position: static; width: 200px; height: 200px; transform: none; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important; } .team-profile .stats { gap: 20px; margin-bottom: 7px; } .team-profile .stats .stat { gap: 16px; margin: 0; } .team-profile .stats .stat span { display: inline-block; margin-right: 0; } .team-profile .widget-user-username { font-size: 40px; } .team-profile .widget-user-url { font-size: 12px; color: #FFC9FC !important; margin-top: 12px; } .team-profile .action-buttons { gap: 25px; bottom: 21px; right: 27px; } .team-profile .action-buttons a { letter-spacing: 0.05em; gap: 10px; font-size: var(--font-size-base-sm); margin: 0; } .team-wrapper > .card-body { padding: 0; } .team-wrapper .card-body h4 { color: var(--color-darker-blue); letter-spacing: -0.01em; margin-bottom: 3px; } .card-body-top .card-body-left { padding: 64px 50px 40px; flex: 1; border-bottom: 1px solid #DDDDDD; } .card-body-top .content-cards { margin-top: 0; gap: 20px; } .card-body-top .content-cards .content-card { max-width: 290px; } .card-body-top .card-body-right { background: #F9F9F9; border: none; width: 28.5%; padding: 47px 20px 30px 40px; } .card-body-right .card { box-shadow: none; margin-bottom: 0; background-color: transparent; } .card-body-right .card .card-header { background: none; padding: 0; border: none; } .card-body-right .card .card-header .card-title { color: var(--color-darker-blue); font-size: var(--font-size-base-md); letter-spacing: -0.01em; margin-bottom: 2px; } .card-body-right .card .card-header .card-subtitle { color: var(--color-title); } .card-body-right .card .card-body { margin-top: 20px; } .card-body-right .card .card-body .list-group-item { border-top: 1px solid #F2F2F2; border-bottom: none; background: #FFF; padding: 8px 10px 9px; display: flex; gap: 19px; color: var(--color-light-blue-grey); } .card-body-right .card .card-body .list-group-item .profile-circle { width: 25px; height: 25px; filter: drop-shadow(1px 2px 6px rgba(0, 0, 0, 0.25)); font-size: var(--font-size-base-xs); margin: 0; } .card-body-tables { padding: 70px 20px 70px; } .card-body-tables h3, .sectionHeader { color: var(--color-darker-blue); font-size: 32px; } .card-body-tables .search-table { margin-top: 23px; width: 244px; margin-bottom: 22px; } .card-body-tables .search-table input[type="text"] { width: 100%; border-radius: 4px; border: 0.6px solid #E1E1E1; background: #FFF; font-size: var(--font-size-base-xs); line-height: 1.4em; color: var(--color-light-blue-grey); padding: 8px 10px 8px 33px; } .card-body-tables .search-table input[type="text"]::placeholder { color: var(--color-light-blue-grey); } .card-body-tables .search-table input[type="submit"] { background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.88953 10.2773C8.58994 10.2773 10.7791 8.0885 10.7791 5.38847C10.7791 2.68844 8.58994 0.499634 5.88953 0.499634C3.18912 0.499634 1 2.68844 1 5.38847C1 8.0885 3.18912 10.2773 5.88953 10.2773Z' stroke='%23486581' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.0005 11.4997L9.3418 8.84143' stroke='%23486581' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: 13px 12px; text-indent: -9999px; border: none; background-color: transparent; position: absolute; left: 14px; top: 10px; } .card-body-tables .nav-tabs { border: none; } .card-body-tables .nav-tabs .nav-item { flex: 1; margin-bottom: 0; } .card-body-tables .nav-tabs .nav-link { font-size: 14px; line-height: 1; border: 0.6px solid #E1E1E1; border-radius: 0; background: #F5F5F5; border-bottom: none; border-left: none; padding: 14px 20px 14px 26px; position: relative; } .card-body-tables .nav-tabs .nav-link.active { border-left: none !important; color: var(--color-darker-blue) !important; font-weight: 500; } .card-body-tables .nav-tabs .nav-link.active::before { content: ''; background-color: var(--color-primary); width: 4px; height: 100%; position: absolute; left: 0; top: 0; } .card-body-tables .nav-tabs .nav-link .bi::before { font-weight: 700 !important; font-size: 12px; } .card-body-tables .tab-content h3 { color: var(--color-darker-blue); font-size: var(--font-size-base-md); letter-spacing: -0.01em; margin-bottom: 20px; } .card-body-tables .table { width: calc(100% - 10px); margin: 0 auto; } .card-body-tables .table tr:first-child { background-color: #fff; /*box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.1);*/ position: relative; border-left: none; border-right: none; } .card-body-tables .table tr:first-child th { background-color: #fff; box-shadow: none; border: none; border-bottom: 1px solid #ddd8d8; color: var(--color-title); font-size: var(--font-size-base-xs); font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; padding: 13px 1rem; } .card-body-tables .table tr th:first-child, .card-body-tables .table tr td:first-child { padding-left: 42px; } .card-body-tables .table tr { background-color: #fff; border-bottom: 1px solid #BBB; border-left: 1px solid #BBB; border-right: 1px solid #BBB; } .card-body-tables .table tr td { padding: 16px 15px; box-shadow: none; border: none; border-bottom: 1px solid #ddd8d8; border-collapse: collapse; } .card-body-tables .member-name { color: var(--color-title); font-size: var(--font-size-base); font-weight: 600; line-height: 121.429%; } .card-body-tables .member-role { /*display: flex;*/ gap: 5px; } .card-body-tables .member-role span { border-radius: 80px !important; background: #DF704D; display: inline-flex; padding: 10px 20px !important; justify-content: center; align-items: center; gap: 10px; color: var(--color-title); font-size: var(--font-size-base-xs); font-weight: 600; line-height: var(--line-height-sm); /*text-transform: uppercase;*/ border: none !important; } .card-body-tables .member-role .role-superadmin { background-color: #129BF8; color: #fff; } .card-body-tables .member-role .role-member { background-color: #EFAE1A; color: #000; } .card-body-tables .member-role .role-teamadmin { background-color: #198754; color: #fff; } .card-body-tables .member-role .role-contentmanager { background-color: #6F42C1; color: #fff; } .card-body-tables .member-role .role-curator { background-color: #DC3545; color: #fff; } .card-body-tables .member-email { color: var(--color-title); font-size: var(--font-size-base); line-height: var(--line-height-sm); } .card-body-tables .member-email svg { color: var(--color-primary); width: 16px; margin-right: 3px; transform: translateY(-1px); } .card-body-tables .member-profiles span { display: flex; gap: 8px; width: max-content; } .card-body-tables .member-profiles span a { margin: 0 !important; } .card-body-tables .member-profiles span a .bi { color: var(--color-title) !important; font-size: 20px !important; } .card-body-tables .member-date { color: var(--color-primary); font-size: var(--font-size-base); font-weight: 500; line-height: var(--line-height-sm); text-decoration: underline; } .card-body-tables .member-actions > div { gap: 20px; } #nav-contact .card-body { padding-left: 42px; padding-right: 42px; } .card-body-tables .email-invite .input-group { display: flex; gap: 38px; padding-bottom: 13px; margin-bottom: 13px !important; } .card-body-tables .email-invite:last-child .input-group { padding-bottom: 0; margin-bottom: 0 !important; } .card-body-tables .email-invite .input-group::after { /*content: ''; background-color: #BBB; width: calc(100% + 84px) !important; position: absolute; left: -42px; bottom: 0; width: 100%; height: 1px;*/ } .card-body-tables .email-invite:last-child .input-group::after { opacity: 0; } .card-body-tables .email-invite input[type="email"] { border-radius: 4px !important; border: 0.6px solid #486581; background: #FFF; font-size: var(--font-size-base); line-height: 1em; font-weight: 400; color: var(--color-darker-blue); padding: 11px 10px; } .card-body-tables .email-invite input[type="email"]::placeholder { color: var(--color-darker-blue); } .card-body-tables .email-invite button { border-radius: 80px !important; background: #129BF8; display: flex; padding: 8px 20px; justify-content: center; align-items: center; gap: 6px; color: #FFF; font-size: var(--font-size-base); line-height: 1em; font-weight: 400; align-self: center; border: none; } .card-body-tables .email-invite button::after { content: ''; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.26953 1.76953L10.5 5.99997L6.26953 10.2304' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.5 6L1.5 6' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: contain; width: 12px; height: 12px; display: block; } .content-teams-content h1 { font-size: 48px; } .content-teams-content .nav-align-top .nav-tabs { width: 933px; margin-top: 20px; max-width: 100%; border: none; } .content-teams-content .nav-align-top .nav-tabs .nav-item { flex: 1; margin-bottom: 0; } .content-teams-content .nav-align-top .nav-tabs .nav-link { font-size: 14px; line-height: 1; border: 0.6px solid #E1E1E1; border-radius: 0; background: #F5F5F5; border-bottom: none; border-left: none; padding: 14px 20px 14px 26px; position: relative; } .content-teams-content .nav-align-top .nav-tabs .nav-link.active { border-left: none !important; color: var(--color-darker-blue) !important; font-weight: 500; } .content-teams-content .nav-align-top .nav-tabs .nav-link.active::before { content: ''; background-color: var(--color-primary); width: 4px; height: 100%; position: absolute; left: 0; top: 0; } .content-teams-content .nav-align-top .nav-tabs .nav-link .bi::before { font-weight: 700 !important; font-size: 12px; } .content-teams-content .nav-align-top .tab-content { padding: 0 !important; border: none !important; } .content-teams-content #articleUploadSection { border-radius: 0px 12px 12px 12px; border: 0.6px solid #E1E1E1 !important; background: #FFF; margin-top: 1px; padding: 25px 24px 14px !important; /*max-width: 988px;*/ } .content-teams-content #articleUploadFormSection { padding: 0; } .content-teams-content .ArticleSteps { margin: 0; } .content-teams-content .ArticleSteps .col-4 { flex: 1; padding: 0; border-bottom-width: 1px !important; } .content-teams-content .ArticleSteps .ArticleUploadStep { color: var(--color-off-blue); font-size: 12px; line-height: 116.667%; padding: 0; margin: 0; padding-bottom: 12px; } .content-teams-content .ArticleSteps .active .ArticleUploadStep { color: var(--color-darker-blue) !important; font-weight: 500; } .content-teams-content .card { margin: 0 !important; background: transparent; box-shadow: none; } .content-teams-content .card .card-header { padding: 10px 0 30px; border: none; border-radius: 0; color: var(--color-light-blue-grey); font-size: var(--font-size-base-xs); line-height: 1.8em; } .content-teams-content .card .card-body { padding: 0; } .content-teams-content #articleUploadFormSection textarea { border-radius: 4px; border: 0.6px solid #E1E1E1; background: #F4F5F9; height: 237px; color: var(--color-darker-blue); font-size: var(--font-size-base); } .content-teams-content #articleUploadFormSection .card .card-footer { background-color: transparent; padding: 10px 0 0; } .content-teams-content #articleUploadFormSection button[type="submit"] { font-size: var(--font-size-base-sm); padding: 8px 20px; gap: 6px; border-radius: 4px; background-color: var(--color-primary) !important; margin-left: auto; } .content-teams-content .article-flow-step-2 .card:not(:last-child) { margin-bottom: 20px !important; } .content-teams-content .article-flow-step-2 .card-body { border-radius: 4px; border: 0.6px solid #E1E1E1; background: #F4F5F9; padding: 20px 60px 20px 20px; } .content-teams-content .article-flow-step-2 .card-body > .container-fluid { padding: 0; } .content-teams-content .article-flow-step-2 .card { border-radius: 12px !important; /*border: 0.6px solid #E1E1E1 !important;*/ border: none; background: #FFF; box-shadow: none !important; overflow: hidden; } .content-teams-content .article-flow-step-2 .card > img { border-radius: 0 !important; border: none; height: 119px; object-fit: cover; } .content-teams-content .article-flow-step-2 .card-body .card-body { border-radius: 0; border: none; background-color: #fff; padding: 20px 10px; } .content-teams-content .article-flow-step-2 .card-body .card-body h3 { color: var(--color-darker-blue); font-size: var(--font-size-base-md); font-weight: 500; line-height: 137.5%; margin-bottom: 10px; } .content-teams-content .article-flow-step-2 .card-body .card-body p { color: var(--color-light-blue-grey); font-size: var(--font-size-base-xs); line-height: 140%; margin-bottom: 0; } .content-teams-content .article-flow-step-2 .card-body .col-md-8 { padding-left: 17.5px; } .content-teams-content .article-flow-step-2 .card-body .col-md-8 > .py-5 { padding-top: 18px !important; padding-bottom: 0 !important; } .content-teams-content .article-flow-step-2 .form-group:not(:last-child) { margin-bottom: 25px; } .content-teams-content .article-flow-step-2 label { color: var(--color-light-blue-grey); font-size: var(--font-size-base-xs); line-height: 140%; margin-bottom: 10px; } .content-teams-content .article-flow-step-2 .form-control { border-radius: 4px; border: 0.6px solid #E1E1E1; background: #FFF; font-size: var(--font-size-base-sm); color: var(--color-darker-blue); line-height: 116.667%; padding: 10px; } .content-teams-content .article-flow-step-2 tags-input .host { margin: 0; } .content-teams-content .article-flow-step-2 tags-input .tags { border-radius: 4px; border: 0.6px solid #E1E1E1; background: #FFF; font-size: var(--font-size-base-sm); color: var(--color-darker-blue); line-height: 116.667%; padding: 10px 10px 10px 10px; height: auto; box-shadow: none; display: flex; flex-wrap: wrap; } .content-teams-content .article-flow-step-2 tags-input .tags .tag-item { margin: 0; font-size: 10px; font-family: 'Inter'; line-height: 1; display: flex; align-items: center; height: 20px; margin-top: -5px; padding-top: 4px; margin-right: 5px; position: relative; top: 2px; } .content-teams-content .article-flow-step-2 tags-input .tags .input { margin: 0; padding: 0; font-size: 12px; height: auto; font-family: 'Inter'; color: var(--color-darker-blue); } .content-teams-content .article-flow-step-2 tags-input .tags .input::placeholder { color: var(--color-darker-blue); } .content-teams-content .article-flow-step-2 .btn-delete { margin-top: 20px; padding: 0; } .content-teams-content .article-flow-step-2 .card-footer { background-color: transparent; padding: 0; } .content-teams-content .article-flow-step-2 .card-footer button { font-size: var(--font-size-base-sm); padding: 8px 20px; gap: 6px; border-radius: 4px; background-color: var(--color-primary) !important; margin-left: auto; } .content-teams-content .article-flow-step-3 > .card > .card-header { padding-top: 30px; } .content-teams-content .article-flow-step-3 > .card > .card-header h5 { font-size: var(--font-size-base-md); margin-bottom: 0; } .content-teams-content .article-flow-step-3 > .card .card-body .card { border-radius: 4px; overflow: hidden; border: 0.6px solid #E1E1E1; background: #F4F5F9; } .content-teams-content .article-flow-step-3 > .card .card-body .card .card-image-top { height: 127px; overflow: hidden; } .content-teams-content .article-flow-step-3 > .card .card-body .card .card-image-top img { width: 100%; height: 100%; object-fit: cover; } .content-teams-content .article-flow-step-3 > .card .card-body .card .card-body { padding: 10px 20px 0; } .content-teams-content .article-flow-step-3 > .card .card-body .card .card-body .h3 { color: var(--color-darker-blue); font-size: var(--font-size-base); font-weight: 500; line-height: 142.857%; margin-bottom: 14px !important; } .content-teams-content .article-flow-step-3 > .card .card-body .card .card-body p { color: var(--color-light-blue-grey); font-size: var(--font-size-base-xs); line-height: 140%; margin-bottom: 0; } .content-teams-content .article-flow-step-3 > .card .card-body .card .card-footer { padding: 40px 20px 20px; background-color: transparent; border-radius: 0; } .content-teams-content .article-flow-step-3 > .card .card-body .card .card-footer a { padding: 0; margin: 0; border: 0; text-transform: capitalize !important; color: var(--color-primary); padding-bottom: 7px; border-bottom: 1px solid var(--color-primary); font-size: var(--font-size-base); display: flex; align-items: center; gap: 15px; } .content-teams-content .article-flow-step-3 > .card .card-body + .card-footer { padding: 0; background-color: transparent; } .content-teams-content .article-flow-step-3 > .card .card-body + .card-footer button { font-size: var(--font-size-base-sm); padding: 8px 20px; gap: 6px; border-radius: 4px; background-color: var(--color-primary) !important; margin-left: auto; } .content-teams-content #rssFeedSection { border-radius: 0px 12px 12px 12px; border: 0.6px solid #E1E1E1; background: #FFF; margin-top: 1px; padding: 25px 24px 20px; } .content-teams-content #rssFeedSection #rssFeedFormSection > .card > .card-header { font-size: var(--font-size-base-sm); padding-top: 0; line-height: 116.667%; padding-bottom: 15px; } .content-teams-content #rssFeedSection #rssFeedFormSection > .card > .card-body > .lead { color: var(--color-light-blue-grey); font-size: var(--font-size-base-xs); line-height: 180%; margin-bottom: 30px; } .content-teams-content #rssFeedSection #rssFeedFormSection > .card label { font-size: var(--font-size-base-sm); line-height: 116.667%; margin-bottom: 10px; color: var(--color-light-blue-grey); } .content-teams-content #rssFeedSection #rssFeedFormSection > .card .form-control { border-radius: 4px; border: 0.6px solid #E1E1E1; background: #F4F5F9; font-size: var(--font-size-base); color: var(--color-darker-blue); line-height: 116.667%; padding: 10px; } .content-teams-content #rssFeedSection #rssFeedFormSection > .card .form-control::placeholder { color: var(--color-darker-blue); } .content-teams-content #rssFeedSection #rssFeedFormSection > .card select { border-radius: 4px; border: 0.6px solid #E1E1E1; background: #F4F5F9; font-size: var(--font-size-base); color: var(--color-darker-blue) !important; line-height: 116.667%; padding: 9px 10px; } .content-teams-content #rssFeedSection #rssFeedFormSection > .card tags-input .host { margin: 0; } .content-teams-content #rssFeedSection #rssFeedFormSection > .card tags-input .tags { border-radius: 4px; border: 0.6px solid #E1E1E1; background: #FFF; font-size: var(--font-size-base-sm); color: var(--color-darker-blue); line-height: 116.667%; padding: 10px 10px 9px 10px; height: auto; box-shadow: none; display: flex; flex-wrap: wrap; } .content-teams-content #rssFeedSection #rssFeedFormSection > .card tags-input .tags .tag-item { margin: 0; font-size: 10px; font-family: 'Inter'; line-height: 1; display: flex; align-items: center; height: 20px; margin-top: -5px; padding-top: 4px; margin-right: 5px; position: relative; top: 2px; } .content-teams-content #rssFeedSection #rssFeedFormSection > .card tags-input .tags .input { margin: 0; padding: 0; font-size: 12px; height: auto; font-family: 'Inter'; color: var(--color-darker-blue); } .content-teams-content #rssFeedSection #rssFeedFormSection > .card tags-input .tags .input::placeholder { color: var(--color-darker-blue); } .content-teams-content #rssFeedSection #rssFeedFormSection > .card > .card-footer { background-color: transparent; padding: 20px 0; display: flex; justify-content: flex-end; } .content-teams-content #rssFeedSection #rssFeedFormSection > .card > .card-footer .btn-danger { font-size: var(--font-size-base-sm); line-height: 116.667%; display: flex; padding: 8px 20px; justify-content: center; align-items: center; gap: 15px; border-radius: 4px; background-color: var(--color-primary); margin-left: 25px; } .content-teams-content #rssFeedSection #rssFeedFormSection > .card > .card-footer .btn-light { color: var(--color-primary) !important; font-size: var(--font-size-base); line-height: 1; background-color: transparent; display: flex; align-items: center; gap: 10px; border: none; padding: 0; border-bottom: 1px solid; border-radius: 0; align-self: center; padding-bottom: 5px; } .content-teams-content #rssFeedSection .rss-table-wrapper { padding: 0; } .content-teams-content #rssFeedSection table { margin-top: 10px; } .content-teams-content #rssFeedSection table th { background-color: #F5F5F5; border: none; font-size: var(--font-size-base-xs); color: var(--color-off-blue); line-height: 1; box-shadow: none; text-transform: capitalize; font-weight: 400; padding: 15px 16px; } .content-teams-content #rssFeedSection table th bi { padding-right: 5px; } .content-teams-content #rssFeedSection table td { border: none; padding: 10px 16px; font-size: var(--font-size-base-xs); background-color: #F5F5F5; box-shadow: none; } .content-teams-content #rssFeedSection table tr:nth-of-type(odd) td { background-color: #ffffff; } .content-teams-content #rssFeedSection table .rss-url { font-size: var(--font-size-base-xs); font-weight: 500; color: #1D88FE; text-decoration: underline; } .content-teams-content #rssFeedSection table [class^="badge-"] { border-radius: 2px !important; background: rgba(0, 152, 80, 0.20); display: inline-flex; padding: 4px 6px !important; justify-content: center; align-items: center; font-weight: 500; line-height: 1; border: 0.6px solid rgba(200, 8, 189, 0.20) !important; background: rgba(200, 8, 189, 0.20); color: var(--color-primary); } .content-teams-content #rssFeedSection table .badge-1 { background: rgba(0, 152, 80, 0.20); color: #009850; border: 0.6px solid rgba(0, 152, 80, 0.20) !important; } .content-teams-content #rssFeedSection table .badge-2 { border: 0.6px solid rgba(200, 8, 189, 0.20) !important; background: rgba(200, 8, 189, 0.20); color: var(--color-primary); } .content-teams-content #rssFeedSection table .rss-date { color: var(--color-darker-blue); } .content-teams-content #rssFeedSection table .rss-last-modified { color: var(--color-darker-blue); } .content-teams-content #rssFeedSection table .rss-last-modified .date { color: var(--color-primary); text-decoration: underline; } .content-teams-content #rssFeedSection > .card > .card-footer { background-color: #F4F5F9; padding: 10px 16px 22px; } .content-teams-content #rssFeedSection > .card > .card-footer .container-fluid { padding: 0; } .content-teams-content #rssFeedSection > .card > .card-footer .row { align-items: center; } .content-teams-content #rssFeedSection > .card > .card-footer .pagination-label { color: var(--color-light-blue-grey); font-size: var(--font-size-base-sm); line-height: 1.5em; } .content-teams-content #rssFeedSection > .card > .card-footer .pagination { justify-content: flex-end; margin: 0; gap: 7px; } .content-teams-content #rssFeedSection > .card > .card-footer .page-item.active .page-link { border: none; height: 100%; } /* ========================================================================== mobile-nav.css - Mobile navigation, bottom nav, hamburger, profile menus ========================================================================== */ /* Profile & help icons */ .profile-circle { width: 35px; height: 35px; background-color: white; color: #e600ff; font-weight: bold; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 15px; background-size: 150% 150% !important; background-position: center !important; } .mobile-nav .profile-circle { height: 25px; width: 25px; } .help-icon { color: white; font-size: 18px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; margin-right: 10px; } .mobile-nav .help-icon { font-size: 30px; margin-right: 0px; } /* Mobile sidebar */ @media (max-width: 768px) { .sidebar { position: fixed; bottom: 0; left: 0; width: 100%; background: #0b0218; /* Match your theme */ } .sidebar ul { display: flex; justify-content: space-around; padding: 10px 0; margin: 0; } .sidebar ul li { list-style: none; } .sidebar ul li a { color: white; text-decoration: none; } .sideNav, .side-team-card, .sidebarHead { /*display: none;*/ } } /* Mobile Navigation */ @media (max-width: 768px) { .mobile-nav-wrapper { position: fixed; bottom: 0; left: 0; width: 100%; background: #0b0218; overflow-x: auto; /* Enable horizontal scrolling */ white-space: nowrap; padding: 10px 0; z-index: 1050; } .mobile-nav { display: flex; gap: 5px; /* Space between items */ padding: 0 5px; min-width: max-content; /* Ensures items go beyond viewport width */ margin-bottom: 0; } .mobile-nav .nav-item { display: inline-block; flex-shrink: 0; /* Prevent items from shrinking */ } .mobile-nav .nav-link { color: white; text-decoration: none; padding: 5px 10px; border-right: #101111 1px solid; } } /* Default Navbar (Desktop) */ .navbar { background: transparent; } /* Default Navbar (Desktop) */ .navbar { background: transparent; } /* Mobile Nav: Initially show only Dashboard */ @media (max-width: 768px) { .mobile-nav { color: white; padding: 10px; position: relative; } .mobile-nav a { color: #fff; width: 100%; } .nav-header { display: flex; align-items: center; width: 90%; justify-content: space-between; } .mobile-menu .hamburger { background: transparent; border: none; color: white; font-size: 25px; cursor: pointer; position: absolute; right: 10px; line-height: 48px; } .mobile-menu { position: absolute; left: 0; top: 100%; width: 100%; /* Ensures it doesn’t overflow */ background: #C808BD; z-index: 1000; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); opacity: 1; max-height: 48px; overflow: hidden; transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out; } /* Show menu when expanded */ .expanded .mobile-menu { display: block; opacity: 1; max-height: max-content; /* Adjust based on menu height */ } .mobile-menu .nav-item { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); width: 100%; display: none; } .mobile-menu .nav-item.active { display: flex; } .mobile-nav.expanded .mobile-menu .nav-item { display: flex; } .p-mobile-0 { padding-left: 0; padding-right: 0; } } .text-grayed { color: #D1D1D1 } @media (max-width: 768px) { .btn-create-new { display: none; } } /* Mobile nav wrapper */ .mobile-nav-wrapper { position: fixed; bottom: 0; width: 100%; background: #222; padding: 10px 0; z-index: 9999; } .mobile-nav { display: flex; justify-content: space-around; align-items: center; } .mobile-nav .nav-link { color: white; font-size: 14px; text-decoration: none; } /* Mobile bottom nav checkboxes */ .mobile-bottom-nav .list-group-item-toggle input[type='checkbox'] { display: none; } .mobile-bottom-nav .list-group-item-toggle .categoryCheckLabel { display: block; font-weight: normal; } .mobile-bottom-nav .sideNavComplete { border-left: unset } .mobile-bottom-nav .list-group-item-toggle.checked .categoryCheckLabel, .mobile-bottom-nav .list-group-item-toggle .categoryCheckLabel:hover { border-color: unset !important; background-color: transparent !important; color: var(--color-primary) !important; font-weight: bold !important; cursor: pointer; } .mobile-bottom-nav .categoryCheckLabel { border-right: unset !important; } .mobile-bottom-nav .list-group-item-toggle.checked { background-color: unset !important; border-left: unset !important; } /* Mobile bottom nav */ .mobile-bottom-nav { position: fixed; bottom: 0; width: 100%; z-index: 9999; display: flex; flex-direction: column-reverse; background: #1e1e1e; font-size: 14px; pointer-events: auto; left: 0 } .mobile-bottom-nav .nav-row { display: flex; flex-direction: row; overflow-x: auto; background-color: #292929; border-top: 1px solid #444; } .mobile-bottom-nav .nav-row a, .mobile-bottom-nav .nav-row div { flex: 1 0 auto; padding: 0.75rem 1rem; color: #fff; text-align: center; white-space: nowrap; border-right: 1px solid #444; } .mobile-bottom-nav .nav-row a.active { background-color: #444; font-weight: bold; } @media (min-width: 992px) { .mobile-bottom-nav { display: none !important; } } .mobile-bottom-nav .nav-row { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */ } .mobile-bottom-nav .nav-row::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .mobile-bottom-nav .nav-row-container { flex-shrink: 0; height: 48px; /* or auto-fit depending on nav size */ } /* Impersonation dropdown */ /*#impersonationDropdown { position: absolute; left: 0; top: 100%; display: none; background-color: #343a40; z-index: 1000; padding: 0; margin: 0; width: max-content; min-width: 200px; max-height: 300px; overflow-y: auto; } #impersonationDropdown li { display: block; } @media (max-width: 576px) { #impersonationDropdown { position: static; width: 100%; max-height: 50vh; } } */ /* Hamburger menu & profile menus */ /* Brand New Hamburger Menu Styling */ .hamburger-menu { position: relative; z-index: 2000; } /* Hamburger Button */ .hamburger-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50px; height: 50px; background: linear-gradient(135deg, #C808BD 0%, #9B59B6 100%); border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(200, 8, 189, 0.3); position: relative; overflow: hidden; } .hamburger-btn:hover { transform: scale(1.05); box-shadow: 0 6px 16px rgba(200, 8, 189, 0.4); } .hamburger-btn:active { transform: scale(0.95); } /* Hamburger Lines */ .hamburger-line { width: 25px; height: 3px; background-color: #ffffff; margin: 3px 0; transition: all 0.3s ease; border-radius: 2px; } /* Animated hamburger to X transformation */ .hamburger-btn.active .hamburger-line:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); } .hamburger-btn.active .hamburger-line:nth-child(2) { opacity: 0; transform: translateX(-20px); } .hamburger-btn.active .hamburger-line:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); } /* Full-screen overlay */ .hamburger-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); z-index: 1999; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .hamburger-overlay.active { opacity: 1; visibility: visible; } /* Menu content container */ .hamburger-content { position: relative; width: 100%; height: 100%; max-width: 400px; margin: 0 auto; padding: 60px 30px 30px; display: flex; flex-direction: column; transform: translateY(-50px); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .hamburger-overlay.active .hamburger-content { transform: translateY(0); } /* Menu header */ .hamburger-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 2px solid rgba(200, 8, 189, 0.3); } .hamburger-header h3 { color: #ffffff; font-size: 24px; font-weight: 600; margin: 0; background: linear-gradient(135deg, #C808BD, #9B59B6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hamburger-close { background: rgba(255, 255, 255, 0.1); border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 18px; cursor: pointer; transition: all 0.3s ease; } .hamburger-close:hover { background: rgba(200, 8, 189, 0.3); transform: rotate(90deg); } /* Navigation items container */ .hamburger-nav { flex: 1; overflow-y: auto; } /* Individual navigation items */ .hamburger-nav-item { margin-bottom: 8px; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); transition: all 0.3s ease; } .hamburger-nav-item:hover { background: rgba(255, 255, 255, 0.1); transform: translateX(5px); } /* Navigation item header */ .nav-item-header { display: flex; align-items: center; padding: 18px 20px; color: #ffffff; cursor: pointer; font-weight: 500; font-size: 16px; transition: all 0.3s ease; } .nav-item-header i:first-child { width: 24px; margin-right: 15px; font-size: 18px; color: #C808BD; } .nav-item-header span { flex: 1; } /* Submenu arrow */ .submenu-arrow { font-size: 14px; transition: transform 0.3s ease; color: #C808BD; } .submenu-arrow.rotated { transform: rotate(180deg); } /* Submenu container */ .submenu { max-height: 0; overflow: hidden; background: rgba(0, 0, 0, 0.3); transition: max-height 0.3s ease, padding 0.3s ease; } .submenu.active { max-height: 200px; padding: 10px 0; } /* Submenu items */ .submenu-item { display: block; padding: 12px 50px; color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 14px; transition: all 0.3s ease; border-left: 3px solid transparent; } .submenu-item:hover { color: #C808BD; background: rgba(200, 8, 189, 0.1); border-left-color: #C808BD; padding-left: 55px; } /* Responsive adjustments */ @media (max-width: 480px) { .hamburger-content { padding: 40px 20px 20px; } .hamburger-header h3 { font-size: 20px; } .nav-item-header { padding: 15px 16px; font-size: 15px; } .nav-item-header i:first-child { width: 20px; margin-right: 12px; font-size: 16px; } /* Mobile Profile Circle & Hamburger Alignment */ .profile-menu { display: flex; align-items: center; margin-left: 12px; } .profile-btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; } .profile-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: #ffffff; overflow: hidden; object-fit: cover; } .hamburger-menu { margin-left: 12px; display: flex; align-items: center; } .hamburger-btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; box-shadow: none; outline: none; } .hamburger-btn:focus, .hamburger-btn:active { box-shadow: none; outline: none; } .hamburger-line { width: 20px; height: 2px; background-color: #ffffff; margin: 2px 0; transition: 0.3s; } /* Profile Menu Overlay Styles */ .profile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9998; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } .profile-overlay.active { opacity: 1; visibility: visible; } .profile-content { position: absolute; top: 0; left: 0; width: 80%; max-width: 320px; height: 100%; background: #ffffff; padding: 20px; transform: translateX(-100%); transition: transform 0.3s ease-in-out; } .profile-overlay.active .profile-content { transform: translateX(0); } .profile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #eee; } .profile-header h3 { margin: 0; color: #333; font-size: 18px; font-weight: 600; } .profile-close { background: none; border: none; font-size: 24px; color: #666; cursor: pointer; padding: 4px; } .profile-nav-item { display: flex; align-items: center; padding: 15px 16px; margin-bottom: 8px; /*background: #f8f9fa;*/ border-radius: 8px; text-decoration: none; color: #333; font-weight: 500; transition: background-color 0.2s; } .profile-nav-item:hover { background-color: #e9ecef; color: #c808bd; text-decoration: none; } .profile-nav-item i { width: 20px; margin-right: 12px; color: #c808bd; font-size: 16px; } .profile-divider { height: 1px; background-color: #dee2e6; margin: 16px 0; } /* Nested submenu styles for third-level navigation - Dark Theme */ .submenu-item-with-children { position: relative; margin-bottom: 4px; } .nested-toggle { cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: rgba(0, 0, 0, 0.2); border: none; border-radius: 6px; margin: 2px 8px; transition: all 0.2s ease; font-weight: 500; color: #cccccc; position: relative; } .nested-toggle:hover { background: rgba(200, 8, 189, 0.15); color: #ffffff; } .nested-arrow { transition: transform 0.3s ease; font-size: 14px; color: #c808bd; margin-left: auto; flex-shrink: 0; float: right; } .nested-arrow.rotated { transform: rotate(180deg); } .nested-submenu { max-height: 0; overflow: hidden; margin-left: 20px; margin-right: 8px; transition: max-height 0.3s ease, padding 0.3s ease; background: rgba(0, 0, 0, 0.4); border-radius: 6px; border-left: 3px solid #c808bd; } .nested-submenu.active { max-height: 400px; padding: 8px 0; } .nested-submenu-item { display: block; padding: 12px 20px; margin: 2px 8px; background: transparent; color: #aaaaaa; text-decoration: none; border-radius: 4px; font-size: 14px; font-weight: 400; transition: all 0.2s ease; position: relative; } .nested-submenu-item:hover { background: rgba(200, 8, 189, 0.2); color: #ffffff; text-decoration: none; } /* Hamburger Menu Navigation Styles - Dark Theme Full Width */ .hamburger-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #1a1a1a; z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; } .hamburger-overlay.active { opacity: 1; visibility: visible; } .hamburger-content { width: 100%; min-height: 100vh; background: #1a1a1a; color: #ffffff; } .hamburger-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid #333; background: #1a1a1a; position: sticky; top: 0; z-index: 10; } .hamburger-header h3 { margin: 0; color: #ffffff; font-size: 18px; font-weight: 600; } .hamburger-close { background: none; border: none; font-size: 24px; color: #ffffff; cursor: pointer; padding: 8px; border-radius: 4px; transition: background-color 0.2s; } .hamburger-close:hover { background-color: rgba(255, 255, 255, 0.1); } .hamburger-nav { padding: 20px; } /* Main navigation items */ .hamburger-nav-item { margin-bottom: 12px; border-radius: 8px; overflow: hidden; background: transparent; border: 1px solid #333; transition: all 0.2s ease; } .hamburger-nav-item:hover { border-color: #c808bd; box-shadow: 0 2px 8px rgba(200, 8, 189, 0.2); } .nav-item-header { display: flex; align-items: center; padding: 18px 20px; cursor: pointer; background: transparent; transition: background-color 0.2s; font-weight: 500; color: #ffffff; } .nav-item-header:hover { background: rgba(200, 8, 189, 0.1); color: #c808bd; } .nav-item-header i { margin-right: 15px; width: 20px; text-align: center; color: #c808bd; font-size: 18px; } .nav-item-header span { flex-grow: 1; font-size: 16px; } .submenu-arrow { margin-left: 8px; transition: transform 0.3s ease; color: #c808bd; font-size: 16px; } .submenu-arrow.rotated { transform: rotate(180deg); } /* Submenu styles */ .submenu { max-height: 0; overflow: hidden; background: rgba(0, 0, 0, 0.3); transition: max-height 0.3s ease, padding 0.3s ease; border-top: 1px solid #333; } .submenu.active { max-height: 600px; padding: 12px 0; } .submenu-item { display: block; padding: 14px 20px 14px 55px; color: #cccccc; text-decoration: none; font-size: 15px; transition: all 0.2s ease; border-left: 3px solid transparent; position: relative; } .submenu-item:hover { background: rgba(200, 8, 189, 0.15); color: #ffffff; text-decoration: none; border-left-color: #c808bd; } /* Category checkbox items */ .submenu-item-with-checkbox .categoryCheckLabel { cursor: pointer; margin-bottom: 0; padding: 14px 20px 14px 55px; border-left: 3px solid transparent; transition: all 0.2s ease; color: #cccccc; display: block; } .submenu-item-with-checkbox .categoryCheckLabel:hover { background: rgba(200, 8, 189, 0.15); color: #ffffff; border-left-color: #c808bd; } /* Debug info styling */ .hamburger-nav .p-3 { background: rgba(200, 8, 189, 0.2); border: 1px solid #c808bd; border-radius: 6px; margin-bottom: 16px; font-family: monospace; font-size: 12px; color: #c808bd; } } /* ======================================== MOBILE NAVIGATION STYLES ======================================== */ /* Profile Menu Button */ .profile-menu { position: relative; z-index: 1050; } .profile-btn { background: none; border: none; padding: 0; cursor: pointer; transition: transform 0.2s ease; } .profile-btn:hover { transform: scale(1.05); } .profile-btn.active { transform: scale(0.95); } .profile-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: white; border: 2px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; } .profile-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /* Hamburger Menu Button */ .hamburger-menu { position: relative; z-index: 1050; } .hamburger-btn { background: none; border: none; padding: 8px; cursor: pointer; transition: transform 0.2s ease; display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 24px; } .hamburger-btn:hover { transform: scale(1.05); } .hamburger-btn.active { transform: scale(0.95); } .hamburger-line { width: 100%; height: 3px; background: white; border-radius: 2px; transition: all 0.3s ease; transform-origin: center; } .hamburger-btn.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translateY(7px); } .hamburger-btn.active .hamburger-line:nth-child(2) { opacity: 0; } .hamburger-btn.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translateY(-7px); } /* Overlay Styles */ .profile-overlay, .hamburger-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(8px); z-index: 1040; opacity: 0; visibility: hidden; transition: all 0.3s ease; overflow-y: auto; } .profile-overlay.active, .hamburger-overlay.active { opacity: 1; visibility: visible; } /* Content Containers */ .profile-content, .hamburger-content { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); margin: 20px; border-radius: 12px; max-width: 400px; margin: 20px auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } /* Headers */ .profile-header, .hamburger-header { display: flex; justify-content: between; align-items: center; padding: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .profile-header h3, .hamburger-header h3 { color: white; margin: 0; font-size: 18px; font-weight: 600; } .profile-close, .hamburger-close { background: none; border: none; color: white; font-size: 20px; cursor: pointer; padding: 8px; border-radius: 6px; transition: background 0.2s ease; margin-left: auto; } .profile-close:hover, .hamburger-close:hover { background: rgba(255, 255, 255, 0.1); } /* Navigation Items */ .profile-nav, .hamburger-nav { padding: 16px 0; } .profile-nav-item { display: flex; align-items: center; padding: 16px 24px; color: #cccccc; text-decoration: none; font-size: 15px; transition: all 0.2s ease; border-left: 3px solid transparent; } .profile-nav-item:hover { background: rgba(200, 8, 189, 0.15); color: white; text-decoration: none; border-left-color: #c808bd; } .profile-nav-item i { margin-right: 12px; width: 20px; text-align: center; font-size: 16px; } .profile-divider { height: 1px; background: rgba(255, 255, 255, 0.1); margin: 16px 24px; } /* Hamburger Navigation Specific */ .hamburger-nav-item { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .hamburger-nav-item:last-child { border-bottom: none; } .nav-item-header { display: flex; align-items: center; padding: 18px 24px; color: #cccccc; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; border-left: 3px solid transparent; } .nav-item-header:hover { background: rgba(200, 8, 189, 0.15); color: white; border-left-color: #c808bd; } .nav-item-header i { margin-right: 12px; width: 20px; text-align: center; font-size: 16px; } .submenu-arrow { margin-left: auto; transition: transform 0.3s ease; font-size: 14px; } .submenu-arrow.rotated { transform: rotate(180deg); } /* Responsive Breakpoints for Navigation */ @media (min-width: 480px) and (max-width: 768px) { .profile-content, .hamburger-content { margin: 40px auto; max-width: 450px; } .profile-nav-item, .nav-item-header { padding: 18px 28px; font-size: 16px; } .profile-circle { width: 44px; height: 44px; font-size: 16px; } .hamburger-btn { width: 32px; height: 26px; } } /* Fix hamburger menu visibility for 768px-992px */ @media (min-width: 768px) and (max-width: 991px) { .hamburger-menu { display: block !important; } /*.profile-menu { display: block !important; }*/ /* Ensure the d-md-none class doesn't hide on tablets */ .d-md-none { display: block !important; } #topNavWrap, #navbarSupportedContent { display: none !important; } } /* Desktop breakpoint - hide mobile navigation */ @media (min-width: 993px) { .profile-menu, .hamburger-menu { display: none !important; } } /* ======================================== MOBILE NAVIGATION STYLES - HIGH PRIORITY ======================================== */ /* Profile Menu Button */ .navbar-wrapper .profile-menu { position: relative !important; z-index: 1050 !important; } .navbar-wrapper .profile-btn { background: none !important; border: none !important; padding: 0 !important; cursor: pointer !important; transition: transform 0.2s ease !important; } .navbar-wrapper .profile-btn:hover { transform: scale(1.05) !important; } .navbar-wrapper .profile-btn.active { transform: scale(0.95) !important; } .navbar-wrapper .profile-circle { width: 40px !important; height: 40px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 600 !important; color: white !important; border: 2px solid rgba(255, 255, 255, 0.2) !important; transition: all 0.3s ease !important; } .navbar-wrapper .profile-circle img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; } /* Hamburger Menu Button */ .navbar-wrapper .hamburger-menu { position: relative !important; z-index: 1050 !important; } .navbar-wrapper .hamburger-btn { background: none !important; border: none !important; padding: 8px !important; cursor: pointer !important; transition: transform 0.2s ease !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; width: 40px !important; height: 40px !important; } .navbar-wrapper .hamburger-btn:hover { transform: scale(1.05) !important; } .navbar-wrapper .hamburger-btn.active { transform: scale(0.95) !important; } .navbar-wrapper .hamburger-line { width: 100% !important; height: 3px !important; background: #ffffff !important; border-radius: 2px !important; transition: all 0.3s ease !important; transform-origin: center !important; display: block !important; margin: 0 !important; padding: 0 !important; box-shadow: 0 0 1px rgba(0, 0, 0, 0.5) !important; } .navbar-wrapper .hamburger-btn.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translateY(7px) !important; } .navbar-wrapper .hamburger-btn.active .hamburger-line:nth-child(2) { opacity: 0 !important; } .navbar-wrapper .hamburger-btn.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translateY(-7px) !important; } /* Overlay Styles */ .profile-overlay, .hamburger-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0, 0, 0, 0.8) !important; backdrop-filter: blur(8px) !important; z-index: 1040 !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.3s ease !important; overflow-y: auto !important; } .profile-overlay.active, .hamburger-overlay.active { opacity: 1 !important; visibility: visible !important; } /* Content Containers */ .profile-content, .hamburger-content { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important; margin: 20px !important; border-radius: 12px !important; max-width: 400px !important; margin: 20px auto !important; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important; } /* Headers */ .profile-header, .hamburger-header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 24px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; } .profile-header h3, .hamburger-header h3 { color: white !important; margin: 0 !important; font-size: 18px !important; font-weight: 600 !important; } .profile-close, .hamburger-close { background: none !important; border: none !important; color: white !important; font-size: 20px !important; cursor: pointer !important; padding: 8px !important; border-radius: 6px !important; transition: background 0.2s ease !important; margin-left: auto !important; } .profile-close:hover, .hamburger-close:hover { background: rgba(255, 255, 255, 0.1) !important; } /* Navigation Items */ .profile-nav, .hamburger-nav { padding: 16px 0 !important; } .profile-nav-item { display: flex !important; align-items: center !important; padding: 16px 24px !important; color: #cccccc !important; text-decoration: none !important; font-size: 15px !important; transition: all 0.2s ease !important; border-left: 3px solid transparent !important; } .profile-nav-item:hover { background: rgba(200, 8, 189, 0.15) !important; color: white !important; text-decoration: none !important; border-left-color: #c808bd !important; } .profile-nav-item i { margin-right: 12px !important; width: 20px !important; text-align: center !important; font-size: 16px !important; } .profile-divider { height: 1px !important; background: rgba(255, 255, 255, 0.1) !important; margin: 16px 24px !important; } /* Hamburger Navigation Specific */ .hamburger-nav-item { border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; } .hamburger-nav-item:last-child { border-bottom: none !important; } .nav-item-header { display: flex !important; align-items: center !important; padding: 18px 24px !important; color: #cccccc !important; font-size: 15px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s ease !important; border-left: 3px solid transparent !important; } .nav-item-header:hover { background: rgba(200, 8, 189, 0.15) !important; color: white !important; border-left-color: #c808bd !important; } .nav-item-header i { margin-right: 12px !important; width: 20px !important; text-align: center !important; font-size: 16px !important; } .submenu-arrow { margin-left: auto !important; transition: transform 0.3s ease !important; font-size: 14px !important; } .submenu-arrow.rotated { transform: rotate(180deg) !important; } /* Responsive Breakpoints for Navigation */ @media (min-width: 480px) and (max-width: 767px) { .profile-content, .hamburger-content { margin: 40px auto !important; max-width: 450px !important; } .profile-nav-item, .nav-item-header { padding: 18px 28px !important; font-size: 16px !important; } .navbar-wrapper .profile-circle { width: 44px !important; height: 44px !important; font-size: 16px !important; } .navbar-wrapper .hamburger-btn { width: 40px !important; height: 40px !important; } } /* Mobile only - show both mobile nav elements */ @media (max-width: 767px) { .profile-menu, .hamburger-menu { display: flex !important; } .navbar-wrapper .d-md-none.profile-menu, .navbar-wrapper .d-md-none.hamburger-menu { display: flex !important; } .profile-circle { margin-left: 0 !important } } /* Tablet range - show hamburger but hide mobile profile (desktop profile will show) */ @media (min-width: 768px) and (max-width: 991px) { .hamburger-menu { display: flex !important; } /*.profile-menu { display: none !important; }*/ .profile-circle { margin-left: 0 !important } .navbar-wrapper .d-md-none.hamburger-menu { display: flex !important; } .navbar-wrapper .d-md-none.profile-menu { display: none !important; } } /* Desktop breakpoint - hide all mobile navigation */ @media (min-width: 992px) { .profile-menu, .hamburger-menu { display: none !important; } .navbar-wrapper .d-md-none.hamburger-menu, .navbar-wrapper .d-md-none.profile-menu { display: none !important; } } /* Submenu styles */ .submenu { max-height: 0 !important; overflow: hidden !important; transition: max-height 0.3s ease !important; background: rgba(0, 0, 0, 0.2) !important; } .submenu.active { max-height: 1000px !important; } .submenu-item { display: block !important; padding: 14px 20px 14px 55px !important; color: #cccccc !important; text-decoration: none !important; font-size: 15px !important; transition: all 0.2s ease !important; border-left: 3px solid transparent !important; position: relative !important; } .submenu-item:hover { background: rgba(200, 8, 189, 0.15) !important; color: #ffffff !important; text-decoration: none !important; border-left-color: #c808bd !important; } /* Notification bell styles */ .ms-notification-bell { position: relative; } .ms-notification-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; font-size: 10px; line-height: 1.2; } /* Bell item styles */ .ms-notification-bell-item.unread { background-color: #f8f9fa; border-left: 3px solid #0d6efd; } .ms-notification-bell-item.unread .fw-semibold { color: #0d6efd; } /* Dropdown styling */ .ms-notification-dropdown { width: 320px; max-height: 400px; overflow-y: auto; } .ms-notification-dropdown-header { background-color: #f8f9fa; } /* Red dot indicator when there are unread notifications */ .ms-notification-bell.has-unread::after { content: ''; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; background-color: #dc3545; border-radius: 50%; border: 2px solid white; } /* Hide the numbered badge when using the red dot */ .ms-notification-bell.has-unread .ms-notification-badge { display: none; } /* AI Credits Status Bar Styles */ .ai-credits-status { display: flex; align-items: center; gap: 12px; /*padding: 8px 12px;*/ /*background-color: #f0f7ff;*/ /*border-radius: 8px;*/ /*border-left: 3px solid #0d6efd;*/ } .ai-credits-status.warning { /*background-color: #fff3cd;*/ /*border-left-color: #ffc107;*/ } .ai-credits-status.danger { /*background-color: #f8d7da; border-left-color: #dc3545;*/ } .ai-credits-icon { font-size: 18px; color: #0d6efd; flex-shrink: 0; } .ai-credits-status.warning .ai-credits-icon { color: #ffc107; } .ai-credits-status.danger .ai-credits-icon { color: #dc3545; } .ai-credits-content { display: flex; flex-direction: column; gap: 4px; flex: 1; } .ai-credits-plan { font-size: 12px; color: #fff; font-weight: 500; display: flex; align-items: center; gap: 6px; } .ai-credits-status.warning .ai-credits-plan { color: #fff; } .ai-credits-status.danger .ai-credits-plan { color: #fff; } .ai-credits-remaining { font-size: 12px; font-weight: 500; color: #fff; } .ai-credits-status.warning .ai-credits-remaining { color: #fff; } .ai-credits-status.danger .ai-credits-remaining { color: #fff; } .ai-credits-upgrade-link { font-size: 12px; color: #0d6efd; text-decoration: none; cursor: pointer; padding: 0; background: none; border: none; display: inline; margin-left: 0; } .ai-credits-upgrade-link:hover { text-decoration: underline; color: #0b5ed7; } .ai-credits-status.warning .ai-credits-upgrade-link { color: #ff8800; } .ai-credits-status.warning .ai-credits-upgrade-link:hover { color: #ff7700; } .ai-credits-status.danger .ai-credits-upgrade-link { color: #dc3545; } .ai-credits-status.danger .ai-credits-upgrade-link:hover { color: #c82333; } @media only screen and (min-width: 992px) and (max-width: 1200px) { #adminSidebar { padding-left: 0rem !important; } .navbar-wrapper .navbar-brand img { max-width: 130px; } #mainContentBox { padding-left: 1.5rem; } } @media (min-width: 768px) and (max-width: 992px) { .mobile-padding-extra { padding-top: 0.5em !important; padding-bottom: 0.5em !important; } } /* Impersonation dropdown in hamburger menu */ .impersonation-dropdown-mobile { padding: 0; } .switch-user-list { width: 100%; } .switch-user-list .user-item { display: flex; align-items: center; padding: 1rem 1.5rem; color: white; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: background-color 0.2s ease; } .switch-user-list .user-item:hover { background: rgba(200, 8, 189, 0.1); text-decoration: none; color: white; } .switch-user-list .user-item:last-child { border-bottom: none; } .switch-user-list .profile-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: white; flex-shrink: 0; } .switch-user-list .user-info { flex: 1; } .switch-user-list .user-name { font-weight: 500; margin-bottom: 2px; } .switch-user-list .user-role { font-size: 0.875rem; opacity: 0.7; } .switch-user-list .bi-chevron-right { opacity: 0.5; font-size: 0.875rem; } @media screen and (min-width: 1200px) and (max-width: 1800px) { #mainContentBox { padding-left: 1.5rem; } } @media screen and (max-width: 991px) { #breadcrumb { margin-bottom: 0px !important } .mainHeaderElement { font-size: 2.5rem !important } .main-content > .container-xxxl { padding-left: 0.5rem !important; padding-right: 0.5rem !important; width: 99% } .card-body { padding: 0.5rem !important; } .card { box-shadow: unset; border: 1px solid #e3e3e3; } .pt-xs-0 { padding-top: 0px !important } .mt-xs-0 { margin-top: 0px !important } .ps-xs-0 { padding-left: unset !important } } /* Weekly Planner Avatar Alignment */ .day-header .avatar-stack { display: flex; align-items: center; justify-content: flex-end; min-width: 60px; margin-right: 1rem; } .day-header .avatar-wrapper, .avatar-group .avatar-wrapper { display: inline-flex; align-items: center; justify-content: center; margin-left: -8px; } .day-header .avatar-wrapper:first-child, .avatar-group .avatar-wrapper:first-child { margin-left: 0; } /* Ensure consistent avatar sizing */ .avatar-wrapper img, .avatar-wrapper .profile-circle { width: 32px; height: 32px; border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.12); } /* Align the plus button properly */ .day-header .btn-sm { padding: 0.25rem 0.5rem; line-height: 1; } @media screen and (max-width: 1199px) { .paymentButtonS { background: #C808BD; padding: 1em; width: 100%; color: #fff; } h1 { font-size: 2.5rem !important; } } /* ========================================================================== animations.css - Keyframes, loading overlays, rainbow bar, aura effects ========================================================================== */ /* Fade in animation */ .fade-in { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.5s ease-out forwards; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Loading bar & rainbow effects */ /* New Loader animation */ /*.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(10, 10, 25, 0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; pointer-events: all; }*/ .loading-text { color: #ffffff; font-size: 2rem; margin-bottom: 1.5rem; text-shadow: 0 0 10px #ff00cc, 0 0 20px #00ffff; animation: fadePulse 2s ease-in-out infinite; } /* Stick the loader to the bottom of the viewport */ .loading-bar-wrapper { position: fixed; /* was absolute */ left: 0; right: 0; bottom: 0; width: 100%; height: auto; /* remove 50vh */ pointer-events: none; z-index: 9999; /* respect iOS/Android safe area so it’s never clipped by gesture bar */ padding-bottom: env(safe-area-inset-bottom, 0); } /* Vivid rainbow bar */ :root { --mystic-gradient: linear-gradient( 270deg, #ff0000, #ff7f00, #ffff00, #00ff00, #00ffff, #0000ff, #8b00ff, #ff1493, #ff4500, #32cd32, #1e90ff, #ff69b4 ); } .mystical-bar { position: fixed; /* ensure it truly sits at the bottom */ left: 0; right: 0; bottom: 0; height: 16px; background: var(--mystic-gradient); background-size: 600% 100%; animation: rainbowFlow 10s linear infinite; box-shadow: 0 0 40px rgba(255, 0, 204, 0.7), 0 0 80px rgba(0, 255, 255, 0.6), 0 0 120px rgba(255, 204, 112, 0.5); z-index: 10000; /* above aura */ } /* Soft glow hovering above the bar */ .aura { position: fixed; /* was absolute */ left: 0; right: 0; bottom: 0; width: 100%; height: 88px; /* contained glow height */ pointer-events: none; z-index: 9998; overflow: hidden; } .aura::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 140%; /* slightly taller than aura for smooth fade */ background: radial-gradient( ellipse at bottom center, rgba(255, 0, 204, 0.35) 0%, rgba(0, 255, 255, 0.2) 35%, rgba(0, 0, 0, 0) 100% ); background-size: 3000% 100%; animation: rainbowFlow 30s linear infinite, auraGlow 10s ease-in-out infinite; filter: blur(100px); opacity: 0.8; } /* Animations (unchanged) */ @keyframes rainbowFlow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } @keyframes auraGlow { 0%, 100% { transform: scale(1); opacity: 0.4; } 50% { transform: scale(1.1); opacity: 0.6; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .mystical-bar, .aura::before { animation: none; } } /* --- VIBRANT MODE --- */ .mystical-bar { /* more speed + tighter gradient for pop */ background-size: 900% 100%; animation: rainbowFlow 6s linear infinite; /* was 10s */ filter: saturate(1.6) contrast(1.25); /* boost colors */ box-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 0 50px rgba(255, 0, 204, 0.9), 0 0 90px rgba(0, 255, 255, 0.8), 0 0 140px rgba(255, 204, 112, 0.7); position: fixed; left: 0; right: 0; bottom: 0; /* keep pinned */ } /* Add a moving glossy highlight across the bar */ .mystical-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%); mix-blend-mode: screen; /* brightens without washing colors */ animation: sheenSweep 1.8s linear infinite; pointer-events: none; } @keyframes sheenSweep { 0% { transform: translateX(-100%); opacity: .9; } 100% { transform: translateX(100%); opacity: .9; } } /* Aura: bigger, brighter, more saturated */ .aura::before { background: radial-gradient( 110% 140% at 50% 120%, rgba(255, 0, 204, 0.55) 0%, rgba(0, 255, 255, 0.35) 35%, rgba(255, 255, 0, 0.20) 55%, rgba(0, 0, 0, 0) 85% ); background-size: 3500% 100%; animation: rainbowFlow 20s linear infinite, auraGlow 8s ease-in-out infinite; filter: blur(90px) saturate(1.6) contrast(1.2); opacity: 0.95; /* punchier glow */ } /* Optional: “ultra” mode for extra intensity on demand */ .mystic-ultra .mystical-bar { height: 18px; filter: saturate(1.9) contrast(1.35); animation-duration: 5s; } .mystic-ultra .aura::before { filter: blur(80px) saturate(1.9) contrast(1.3); opacity: 1; } /* Main loader */ #mainLoader { display: none; position: fixed; width: 100%; height: 100vh; z-index: 11000; background-color: rgb(255 255 255 / 50%) } /* Calendar post block */ .calendarPostBlock { display: none; } /* ========================================================================== planner.css - Weekly planner, task cards, outstanding tasks, promo cards ========================================================================== */ /* Outstanding task cards */ /* Outstanding‐Task Card wrapper */ .outstanding-task-card { position: relative; border: none; border-radius: 0.5rem; overflow: hidden; } .outstanding-task-card .card-body { padding: 1.5rem; } /* Colored side‐bars */ .outstanding-task-card::before { content: ""; position: absolute; top: 0; left: 0; width: 0.4rem; height: 100%; } .outstanding-task-card.purple::before { background-color: #d63384; } .outstanding-task-card.teal::before { background-color: #20c997; } .outstanding-task-card.orange::before { background-color: #fd7e14; } /* Light background tints */ .outstanding-task-card.purple { background-color: rgba(214,51,132,0.1); } .outstanding-task-card.teal { background-color: rgba(32,201,151,0.1); } .outstanding-task-card.orange { background-color: rgba(253,126,20,0.1); } /* Badge headers */ .outstanding-task-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; } .outstanding-task-badge.purple { background-color: #eebefa; color: #88215b; } .outstanding-task-badge.teal { background-color: #c0f2e7; color: #0b775e; } .outstanding-task-badge.orange { background-color: #ffe8cc; color: #b34f00; } /* Weekly planner & dashboard details */ .weekly-planner { border: 1px solid rgba(0,0,0,0.15); } .weekly-planner .day-header { padding: 5px 20px; } .weekly-planner [data-bs-target="#day0"] .day { font-weight: 700 !important; } .weekly-planner .date { letter-spacing: 0.15em; } .dashboard-details { margin-top: 58px; } .dashboard-details .task-card { border: 1px solid rgba(0,0,0,0.25); } .task-card .card-title, .team-card .card-title { margin-bottom: 44px; } .task-card .icon-placeholder { border-radius: 0; margin-right: 20px; width: 83px; height: 83px; } .task-card .task-title { letter-spacing: 0.02em; margin-top: 11px; max-width: 255px; } .members img { border: 3px solid white; } .member-circle { border: none !important; background-color: #E0E5F2 !important; letter-spacing: -0.176px; font-size: 9px; } .task-card .time-used-label { color: var(--color-primary); line-height: 171.429%; letter-spacing: -0.02em; } .team-member { border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 0; background: #FFF; padding: 11px 16px; margin-bottom: 17px; gap: 18px; } .team-member img { width: 46px; height: 46px; object-fit: cover; margin-right: 0; } .team-member .member-info h6 { color: #000; letter-spacing: -0.02em; } .team-member .member-info p { color: #000; font-size: var(--font-size-base-sm); letter-spacing: -0.02em; } .team-card .options { color: #A3AED0; } .promo-card { text-align: left; } .promo-card .card-title { margin-bottom: 68px; } .promo-card .promo-icon { margin-top: 0; margin-bottom: 51px; } .promo-card .promo-title { color: #000; font-size: var(--font-size-base-lg); font-weight: 400; line-height: var(--line-height-sm); letter-spacing: 0.02em; margin-top: 0; margin-bottom: 21px; } .promo-card .promo-text { color: #000; font-size: var(--font-size-base-md); margin-bottom: 21px; } /* Planner avatar alignment */ /* Weekly Planner Avatar Alignment */ .day-header .avatar-stack { display: flex; align-items: center; justify-content: flex-end; min-width: 60px; margin-right: 1rem; } .day-header .avatar-wrapper, .avatar-group .avatar-wrapper { display: inline-flex; align-items: center; justify-content: center; margin-left: -8px; } .day-header .avatar-wrapper:first-child, .avatar-group .avatar-wrapper:first-child { margin-left: 0; } /* Ensure consistent avatar sizing */ .avatar-wrapper img, .avatar-wrapper .profile-circle { width: 32px; height: 32px; border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.12); } /* Align the plus button properly */ .day-header .btn-sm { padding: 0.25rem 0.5rem; line-height: 1; } /* ========================================================================== settings.css - Preferences page, tags-input, editable text boxes ========================================================================== */ /* Tags input */ #preferencesPage tags-input .tags { box-shadow: unset; border: unset; } tags-input input { max-width: 102px } tags-input input::placeholder { color: #888; /* Replace with your desired color */ opacity: 1; /* Ensure it's fully visible in some browsers */ } /* For cross-browser support */ tags-input input::-webkit-input-placeholder { color: #888; } tags-input input:-moz-placeholder { color: #888; } tags-input input::-moz-placeholder { color: #888; } tags-input input:-ms-input-placeholder { color: #888; } /* Preferences page */ #preferencesPage { /*max-width: 1344px;*/ } #preferencesPage h1 { color: #000; font-size: 48px; font-weight: 700; margin-bottom: 108px; } #preferencesPage h3 { color: #000; font-size: 32px; font-weight: 300; margin-bottom: 0; } #preferencesPage .container-form { margin-top: 54px; padding: 0; } #preferencesPage label { /*color: #000; font-size: var(--font-size-base-sm); font-weight: 400; letter-spacing: 0.15em;*/ /*text-transform: uppercase !important;*/ /*padding-bottom: 0 !important; margin-bottom: 24px;*/ } #preferencesPage .form-label { margin-bottom: unset; } #preferencesPage .container-form > .row:first-child { flex-wrap: nowrap; gap: clamp(30px,8vw,139px); } #preferencesPage .container-form > .row:first-child > div { flex: 1; } #preferencesPage .container-form > .row:first-child > .col-md-4 { max-width: 27.333333%; } #preferencesPage .container-form > .row:first-child > .col-md-4 .col-md-12 { margin-bottom: 40px !important; } #preferencesPage .container-form > .row:first-child .col-md-8 .row { gap: clamp(30px, 6vw, 106px); flex-wrap: nowrap; margin-bottom: 40px !important; padding-top: 0 !important; } #preferencesPage .container-form > .row:first-child .col-md-8 .row > div { flex: 1; } #preferencesPage .form-control { color: #000; font-size: var(--font-size-base-md); font-weight: 300; line-height: var(--line-height-sm); padding: 9px 15px; border-radius: 8px !important; background: rgba(16, 16, 16, 0.05); border: none !important; height: auto; width: 100%; } #preferencesPage select { color: #000; font-size: var(--font-size-base-md); font-weight: 300; line-height: var(--line-height-sm); padding: 9px 15px; border-radius: 8px !important; background-color: rgba(16, 16, 16, 0.05); border: none !important; height: auto; width: 100%; } #preferencesPage #CitySelector { flex-wrap: nowrap; } #preferencesPage #CitySelector #cityTypeahead { border-radius: 8px 0px 0px 8px !important; } #preferencesPage #CitySelector .input-group-text { border-radius: 0 8px 8px 0 !important; background: rgba(16, 16, 16, 0.05) !important; border: none; } #preferencesPage .input-group { margin-bottom: 0 !important; } #preferencesPage tags-input .host { margin: 0; } #preferencesPage tags-input .tags { display: flex; flex-wrap: wrap; align-items: center; } #preferencesPage tags-input .tags .tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; width: auto; } #preferencesPage tags-input .tags .tag-item { font-family: 'Inter'; text-transform: uppercase; font-size: 14px; line-height: 1.2; height: auto; padding: 8px 24px; border-radius: 10px; margin: 0; margin-right: 5px } #preferencesPage tags-input .tags .tag-item ng-include { display: flex; } #preferencesPage .btn-outline-magenta { color: #000; border: 1px solid #ccc; background-color: white; transition: all 0.2s ease; padding-top: 0.8em !important; padding-bottom: 0.8em !important; } #preferencesPage .btn-check:checked + .btn-outline-magenta { background-color: #C808BD; color: #fff; border-color: #C808BD; } #preferencesPage tags-input .tags > .input { font-family: 'Inter'; text-transform: uppercase; line-height: 1.3; height: auto; color: rgba(0,0,0,0.25); border: 1px solid silver; padding: 8px; border-radius: 9px; width: 140px !important; max-width: 140px; margin-top: 4px; } @media (max-width: 1199px) { #preferencesPage .container-form > .row:first-child { flex-direction: column; gap: 30px; } @media(max-width:1762px) { #sideNavHeader { width: calc(290px - (100vw-290px)) } } #preferencesPage .container-form > .row:first-child > div, #preferencesPage .container-form > .row:first-child > .col-md-4 { width: 100%; max-width: none; } #preferencesPage .container-form > .row:first-child .col-md-8 .row { flex-direction: column; gap: 0; margin-bottom: 0 !important; } #preferencesPage .container-form > .row:first-child .col-md-8 .row > div { max-width: none; margin-bottom: 30px; } #preferencesPage .container-form > .row:first-child > .col-md-4 .container-fluid { padding: 0; } } #PreferencesBlock .editableTextBox { padding-right: 2.5rem; /* Reserve space always to avoid shifting */ background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' class='bi bi-pencil-fill' viewBox='0 0 16 16'%3E%3Cpath d='M12.854.146a.5.5 0 0 1 .11.638l-.057.07L11.207 2.5 13.5 4.793l1.707-1.707a.5.5 0 0 1 .765.638l-.057.07L14.207 5.5l-3-3L12.854.146zM10.5 3.207l-9 9V14h1.793l9-9-1.793-1.793z'/%3E%3C/svg%3E"); } #PreferencesBlock .editableTextBox:focus { background-image: none; /* Hide icon by default */ } /* ========================================================================== connect.css - Connect/login page, steps, form wrappers, LinkedIn button ========================================================================== */ /* Step navigation */ .step { transition: all 0.3s ease; } .next-btn, .prev-btn { background-color: #d100e8; color: #fff; border-radius: 20px; padding: 0.5rem 2rem; border: none; } .step-navigation { /*border-top: 1px solid #ddd;*/ } .step-btn { color: #999; font-weight: 400; background: transparent; border: none; padding: 1em 1.5em; border-radius: 0 } .step-btn.active, .step-btn:hover { color: #fff; background-color: #d100e8; font-weight: bold; } /* City selector & typeahead */ /* 1. The overall popup */ #CitySelector .uib-typeahead-popup.dropdown-menu { width: 100%; /* match the input width */ margin-top: 0.25rem; /* a little breathing room */ padding: 0; border: 1px solid rgba(0,0,0,0.15); border-radius: 0.375rem; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1); background-color: #fff; max-height: 240px; /* scroll if too many */ overflow-y: auto; z-index: 1050; /* above other content */ } /* 2. Each suggestion item */ #CitySelector .uib-typeahead-popup .dropdown-item { display: block; width: 100%; padding: 0.5rem 1rem; font-size: 0.9rem; color: #212529; white-space: nowrap; line-height: 1.4; cursor: pointer; } /* 3. Hover and keyboard-selected state */ #CitySelector .uib-typeahead-popup .dropdown-item:hover, #CitySelector .uib-typeahead-popup .dropdown-item.active { background-color: #f8f9fa; color: #212529; } /* 4. Highlight the matching text */ #CitySelector .uib-typeahead-match { font-weight: 600; color: #0d6efd; /* Bootstrap primary */ background-color: rgba(13,110,253,0.1); padding: 0 0.1rem; border-radius: 0.125rem; } /* 5. Tweak the input’s border-radius to blend */ #CitySelector #cityTypeahead.form-control { border-radius: 0.375rem; } #CitySelector .dropdown-menu > a { padding: 0.4em; } .dropdown-menu > .uib-typeahead-match.active > a, .dropdown-menu > .uib-typeahead-match.active > a:hover, .dropdown-menu > .uib-typeahead-match.active > a:focus { background-color: #efefef; background-image: linear-gradient(-45deg, #ebe9e9, transparent); padding: 0.4em; } .uib-typeahead-match a { padding: 0.4em; display: block; } #cityTypeahead { border-left: 1px solid #ced4da !important; border-right: unset; border-bottom-right-radius: unset !important; border-top-right-radius: unset !important; } /* limit height and make the popup scrollable */ .dropdown-menu[uib-typeahead-popup] { max-height: 200px; /* or whatever works for you */ overflow-y: auto; margin-top: 0.25rem; border-radius: 0.375rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.1); background: #fff; z-index: 1050; } /* Connect page */ .content-connect { background: linear-gradient(173deg, #090121 0%, #101010 112.33%); } .content-connect .connect-top-bar { background: linear-gradient(99deg, #081028 -35.89%, #243B53 303.79%); box-shadow: 4px 0px 28px 0px rgba(1, 5, 17, 0.30); } .connect-top-bar .link-contact { color: var(--color-off-blue); font-size: 13px; line-height: 107.692%; padding: 21px 57px 15px; background: #081028; display: flex; gap: 15px; } .connect-top-bar .link-contact-mail { padding-left: 51px; padding-right: 51px; } .connect-top-bar .link-contact:not(:last-child) { border-right: 1px solid #112A42; } .connect-top-bar .link-contact-mail::after { content: ''; background-image: url("data:image/svg+xml,%3Csvg width='16' height='15' viewBox='0 0 16 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 5.87015C0.5 8.3602 0.5 12.2463 0.5 12.2463C0.5 13.2149 1.33947 14 2.375 14H13.625C14.6605 14 15.5 13.2149 15.5 12.2463V5.45856M0.5 5.87015C0.5 5.56782 0.666518 5.28683 0.940626 5.12659L8 1L15.0221 4.69434C15.3173 4.84964 15.5 5.14179 15.5 5.45856M0.5 5.87015C0.875 5.87015 8 10.2067 8 10.2067L15.5 5.45856' stroke='%23C808BD' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: contain; display: block; width: 16px; height: 15px; } .connect-main { background: url('Images/bg-connect.svg') no-repeat scroll center transparent; background-size: cover; padding-top: 125px; padding-bottom: 262px; } .connect-main .container-xxxl { max-width: 1606px; } .content-connect .app-brand { margin-bottom: 72px; } .row-connect { gap: 14vw } .row-connect .connect-content { width: 620px; } .row-connect .connect-content h1 { color: #E1E3FF; font-size: 70px; line-height: var(--line-height-sm); letter-spacing: -0.02em; margin-bottom: 70px; } .row-connect .connect-content .h2 { font-size: 32px; line-height: 118.75%; letter-spacing: 0.01em; max-width: 590px; margin-bottom: 90px; } .connect-steps { gap: 45px; max-width: 600px; } .connect-steps .connect-step { gap: 20px; } .connect-step .num { border-radius: 4px; background: rgba(200, 8, 189, 0.15); font-size: 48px; letter-spacing: 0.01em; width: 76px; height: 76px; } .connect-step .step-content { font-size: 20px; border-bottom: 1px solid var(--color-primary); flex: 1; } .connect-step .step-content h3 { letter-spacing: -0.02em; } .connect-main .form-wrapper { max-width: 516px; width: 100%; /*margin-top: 122px;*/ } .connect-main .form-wrapper .form-box { border-radius: 10px; background: linear-gradient(211deg, rgba(47, 49, 196, 0.45) -141.54%, rgba(10, 19, 48, 0.45) 55.3%); box-shadow: 4px 0px 28px 0px rgba(1, 5, 17, 0.30); padding: 55px 40px 38px; margin-bottom: 20px; } .connect-main .form-wrapper h2 { color: #E1E3FF; font-size: 36px; line-height: 127.778%; margin-bottom: 25px; } .connect-main .form-wrapper .p1 { margin-bottom: 10px; } .connect-main .form-wrapper .p2 { color: var(--color-off-blue); line-height: 133.333%; letter-spacing: -0.01em; margin-bottom: 45px; max-width: 95%; } .connect-main .form-wrapper .form-buttons { gap: 20px; margin-bottom: 20px; } .connect-main .form-wrapper .form-buttons .btn-linkedin { color: #081028; font-size: 16px; font-weight: 300; letter-spacing: 0.03em; border-radius: 6px; background: #FFF; box-shadow: 4px 0px 28px 0px rgba(1, 5, 17, 0.30); display: flex; justify-content: center; gap: 20px; padding: 15px 30px 14px; align-items: center; width: 100%; } .connect-main .form-wrapper .form-buttons .btn-linkedin::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3130_16989)'%3E%3Cpath d='M19.0195 0H1.97656C1.16016 0 0.5 0.644531 0.5 1.44141V18.5547C0.5 19.3516 1.16016 20 1.97656 20H19.0195C19.8359 20 20.5 19.3516 20.5 18.5586V1.44141C20.5 0.644531 19.8359 0 19.0195 0ZM6.43359 17.043H3.46484V7.49609H6.43359V17.043ZM4.94922 6.19531C3.99609 6.19531 3.22656 5.42578 3.22656 4.47656C3.22656 3.52734 3.99609 2.75781 4.94922 2.75781C5.89844 2.75781 6.66797 3.52734 6.66797 4.47656C6.66797 5.42188 5.89844 6.19531 4.94922 6.19531ZM17.543 17.043H14.5781V12.4023C14.5781 11.2969 14.5586 9.87109 13.0352 9.87109C11.4922 9.87109 11.2578 11.0781 11.2578 12.3242V17.043H8.29688V7.49609H11.1406V8.80078H11.1797C11.5742 8.05078 12.543 7.25781 13.9844 7.25781C16.9883 7.25781 17.543 9.23438 17.543 11.8047V17.043Z' fill='%23129BF8'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3130_16989'%3E%3Crect width='20' height='20' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: contain; display: block; width: 21px; height: 20px; } .connect-main .form-wrapper .form-buttons .btn-signedup { color: var(--color-primary); font-size: 16px; font-weight: 400; letter-spacing: 0.03em; border-radius: 7px; background: #0A1330; box-shadow: 4px 0px 28px 0px rgba(1, 5, 17, 0.30); display: flex; justify-content: center; gap: 25px; padding: 15px 30px 14px; align-items: center; width: 100%; } .connect-main .form-wrapper .form-buttons .btn-signedup::after { content: ''; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.83333 1.625L11 6M11 6L6.83333 10.375M11 6L1 6' stroke='%23C808BD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: contain; display: block; width: 12px; height: 12px; } .connect-main .form-wrapper .p3 { letter-spacing: 0.01em; line-height: 133.333%; } .connect-main .form-wrapper hr { border-color: #2B2A44; opacity: 1; margin-top: 30px; margin-bottom: 28px; } .connect-main .form-wrapper .p4 { font-size: 20px; letter-spacing: 0.01em; line-height: 140%; max-width: 90%; } .connect-main .form-wrapper .bottom-text { line-height: 140%; letter-spacing: 0.01em; } .connect-main .form-wrapper .form-box-2 h2 { margin-bottom: 15px; } .connect-main .form-wrapper .form-box-2 .p1 { color: var(--color-off-blue); margin-bottom: 25px; } .connect-main .form-wrapper .form-box-2 .p2 { color: var(--color-primary); margin-bottom: 40px; } .connect-main .form-wrapper .form-box-2 .form-buttons + hr { margin-top: 32px; margin-bottom: 0; } .connect-main .form-wrapper .form-box-2 .separator-or { color: var(--color-off-blue); top: -8px; } .connect-main .form-wrapper .form-box-2 form { padding-top: 24px; margin-bottom: 20px; } .connect-main .form-wrapper .form-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .connect-main .form-wrapper label { display: flex; align-items: center; gap: 4px; color: #fff; font-size: var(--font-size-base-sm); font-weight: normal; line-height: 116.667%; margin-bottom: 0; } .connect-main .form-wrapper label::before { content: ''; background-image: url("data:image/svg+xml,%3Csvg width='12' height='13' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.808838 10.9884C0.808838 9.15024 2.29892 7.66016 4.13703 7.66016H7.86309C9.7012 7.66016 11.1913 9.15024 11.1913 10.9884C11.1913 11.6011 10.6946 12.0977 10.0819 12.0977H1.91824C1.30553 12.0977 0.808838 11.6011 0.808838 10.9884Z' fill='white'/%3E%3Cpath d='M6.0021 6.81523C7.63597 6.81523 8.96049 5.49071 8.96049 3.85683C8.96049 2.22296 7.63597 0.898438 6.0021 0.898438C4.36822 0.898438 3.0437 2.22296 3.0437 3.85683C3.0437 5.49071 4.36822 6.81523 6.0021 6.81523Z' fill='white'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: contain; display: block; width: 12px; height: 13px; } .connect-main .form-wrapper .form-control, .connect-main .form-wrapper .input { color: var(--color-off-blue); font-size: var(--font-size-base); font-family: var(--font-family-base); line-height: 1; border-radius: 4px; border: 0.6px solid rgba(0, 240, 255, 0.15); background: #081028; box-shadow: 1px 1px 1px 0px rgba(16, 25, 52, 0.40); padding: 12px 45px 12px 10px; text-transform: none; letter-spacing: 0; background-image: url("data:image/svg+xml,%3Csvg width='16' height='13' viewBox='0 0 16 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.3408 1.51839C14.1288 1.35256 13.8772 1.22137 13.6003 1.13241C13.3235 1.04344 13.0269 0.99845 12.7278 1.00004C12.4287 1.00163 12.133 1.04977 11.8577 1.14168C11.5824 1.23358 11.3331 1.36743 11.124 1.5355L2.57944 8.24916C2.26818 8.49373 2.0365 8.82516 1.91372 9.20148L1.2133 11.3484C1.11832 11.6396 1.37238 11.9251 1.6726 11.8646L4.83062 11.2282C5.13729 11.1664 5.42519 11.0335 5.67117 10.8402L14.319 4.04541C14.5329 3.88121 14.7034 3.68532 14.8204 3.46906C14.9374 3.2528 14.9987 3.02046 15.0007 2.78547C15.0027 2.55048 14.9454 2.31751 14.8322 2.10002C14.7189 1.88253 14.5519 1.68485 14.3408 1.51839Z' fill='%23AEB9E1' stroke='%23AEB9E1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: 16px 13px; background-position: calc(100% - 21px) center; width: 100% !important; } .connect-main .form-wrapper .form-control::placeholder, .connect-main .form-wrapper .input::placeholder { color: var(--color-off-blue); font-family: var(--font-family-base); opacity: 1; letter-spacing: 0; text-transform: none; } .connect-main .form-wrapper button[type="submit"] { color: #FFF; font-size: var(--font-size-base-md); font-weight: 400; line-height: 1; width: 100%; background-color: var(--color-primary); height: 40px; padding: 8px 20px; display: flex; justify-content: center; align-items: center; gap: 15px; border-radius: 4px; border: none; } .connect-main .form-wrapper button[type="submit"]::after { content: ''; background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.76953 1.76953L11 5.99997L6.76953 10.2304' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11 6L2 6' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: contain; width: 13px; height: 12px; display: block; } .connect-main .form-wrapper .form-box-2 .p3 { color: var(--color-off-blue); } .connect-main .form-wrapper .form-box-2 .p3 a { display: inline-flex; gap: 5px; align-items: center; } .connect-main .form-wrapper .form-box-2 .p3 a:hover { color: var(--color-primary); } .connect-main .form-wrapper .form-box-2 .p3 a::after { content: ''; background-image: url("data:image/svg+xml,%3Csvg width='13' height='11' viewBox='0 0 13 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.33333 1.125L11.5 5.5M11.5 5.5L7.33333 9.875M11.5 5.5L1.5 5.5' stroke='%23C808BD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: contain; width: 13px; height: 11px; display: inline-block; } .connect-main .form-wrapper .form-box-2 .form-create-account + hr { margin-bottom: 20px; } .connect-main .form-wrapper .form-box-2 .p4 { color: #486581; line-height: 128.571%; letter-spacing: 0.01em; margin-bottom: 25px; font-size: var(--font-size-base); } .connect-main .form-wrapper .signup-form { margin-bottom: 20px; } .form-box .signup-form h3 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 42px; } .connect-main .form-wrapper .signup-form .form-group { margin-bottom: 21px; } .connect-main .form-wrapper .sublabel { color: #fff; font-size: var(--font-size-base-sm); font-weight: 500; line-height: 116.667%; margin-top: 10px; } .connect-main .form-wrapper .sublabel label::before { display: none; } .connect-main .form-wrapper .form-check-input { border-radius: 2px; border: 0.8px solid #7E89AC; width: 14px; height: 14px; position: relative; margin: 0 6px 0 0; background-color: #081028; } .connect-main .form-wrapper tags-input .host { margin: 0; } .connect-main .form-wrapper tags-input .tags { background-color: transparent; border: none; box-shadow: none; padding: 0; } .connect-main .form-wrapper .input { height: auto; margin: 0; } .connect-main .form-wrapper .form-box-3 .p1 { color: var(--color-off-blue); } .connect-main .form-wrapper .form-box-3 .p1 a { display: inline-flex; gap: 5px; align-items: center; } .connect-main .form-wrapper .form-box-3 hr { margin-bottom: 20px; } .connect-main .form-wrapper .form-box-3 .p2 { color: #486581; line-height: 128.571%; letter-spacing: 0.01em; margin-bottom: 25px; font-size: var(--font-size-base); } .content-connect .form-title { margin-bottom: 150px; } .content-connect .form-title h1 { margin-bottom: 42px; } .content-connect .row-steps { flex-wrap: nowrap; gap: 11%; padding-top: 32px; padding-bottom: 32px; } .content-connect .row-steps .text-base-md { margin-bottom: 26px; line-height: 137.5%; } .content-connect .row-steps .text-base-sm { margin-bottom: 43px; } .content-connect .row-steps .text-base-xs { line-height: 140%; } .content-connect .row-steps { position: relative; } .content-connect .row-steps::before { content: ''; background-color: var(--color-primary); width: 1px; height: 100%; position: absolute; top: 0; left: 30%; } .content-connect .row-steps .steps { gap: 40px; margin-bottom: 74px; } .content-connect .row-steps .step { color: var(--color-primary); font-size: 20px; font-weight: 300; line-height: var(--line-height-sm); letter-spacing: 0.15em; text-transform: uppercase; display: flex; padding: 12px 30px; border: 1px solid var(--color-primary); border-radius: 100px; } .content-connect .row-steps .step.active { background-color: var(--color-primary); color: #fff; } .content-connect .connect-linkedin { gap: 53px; } .content-connect .connect-linkedin .linkedin-text { gap: 37px; } .content-connect .connect-linkedin .linkedin-text p:not(.small-text) { font-size: 32px; } .content-connect .connect-linkedin .linkedin-text p.small-text { line-height: 137.5%; } .content-connect .connect-buttons-mobile { margin-top: 100px; gap: 20px; } .content-connect .connect-content-mobile { margin-top: 60px; gap: 60px; } .content-connect .connect-content-mobile p { margin-bottom: 0; } /* ========================================================================== content-hub.css - LinkedIn preview, article list, draft box, content-area ========================================================================== */ /* Preview & upload area */ .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .post-header .user-name { font-weight: 600; margin-bottom: 0; } .post-header .user-headline { font-size: 0.85rem; color: #666; } .post-header .post-date { font-size: 0.8rem; color: #999; } .actions-row button { background: none; border: none; color: #555; font-weight: 500; } .actions-row button:hover { text-decoration: underline; color: #333; } /* Content area */ .content-area { padding-top: 13px; padding-left: 40px; max-width: 83.3%; } /* LinkedIn preview */ /* LinkedIn style preview */ .linkedin-preview { background-color: #f3f2ef; border: none; overflow: hidden; } .linkedin-preview .linkedin-post { border: 1px solid #d0d0d0; border-radius: 0.5rem; background-color: #fff !important; overflow: hidden; width: 100%; max-width: 100%; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; margin: 0 auto; } /* Ensure the preview wrapper stretches to fill the card */ .linkedin-preview > div { width: 100%; } .linkedin-preview .action-buttons .btn { color: #666; font-weight: 600; font-size: 0.875rem; overflow-y: hidden !important } .linkedin-preview .action-buttons .btn:hover { background-color: #f3f2ef; } .linkedin-preview .action-buttons button { min-width: 0; /* Prevent overflow */ white-space: nowrap; font-size: 0.875rem; } .linkedin-preview.action-buttons { width: 100%; overflow-x: hidden; /* suppress scroll */ flex-wrap: nowrap; } #articleListFormSection .card-body#DraftBox { padding: 1.25rem; } #articleListFormSection tags-input .tags { height: unset; } #articleListFormSection .linkedin-preview .card-header { background-color: transparent; border-bottom: 1px solid rgba(0, 0, 0, .125); padding: .75rem 1.25rem; position: relative; } #postBody { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-height: 1.3em; max-height: calc(1.3em * 4 + 0.4em); transition: max-height 0.2s ease; } #postBody.expanded { -webkit-line-clamp: unset; max-height: none; display: block; overflow: visible; } .mobile-preview #postBody p { line-height: 1.25rem } /* LinkedIn post body */ .linkedin-post #postBody { line-height: 1.3em; /* height of one line */ overflow: hidden; position: relative; /* keeps the link inside */ } .linkedin-post #postBody .more { position: absolute; bottom: 0; right: 0; /* sticks to the last visible line */ background: #fff; /* masks the cut off text */ padding-left: 0.3em; } .preview-box p, .preview-box li { margin-bottom: unset } /* Select2 */ .select2-container .select2-selection--single, .select2-selection.select2-selection--multiple { height: 36px !important; min-height: 36px !important } .select2-container--default .select2-selection--multiple .select2-selection__choice { color: #333; } /* ========================================================================== notifications.css - Notification bell, badges, AI credits status ========================================================================== */ /* Notification bell unread (desktop only) */ @media (min-width: 769px) { .ms-notification-bell-item.unread { background-color: #f8f9fa; border-left: 3px solid #0d6efd; } } /* AI status & misc */ .ai-status { color: #ffcc00; /* Example color for "My AI On" icon/text */ } .profile-circle { width: 35px; height: 35px; border-radius: 50%; background-color: #ff00ff; /* Pink background */ color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; } .bg-shadow-gray { background-color: #D6D8DB } .text-shadow-gray { color: #71717A; } .text-sm-85 { font-size: 0.85em; } /* Dark accordion link color */ .dark-accordion a { color: white; } /* Light tags */ .light-green-tag { background-color: rgb(5,193,104,0.2); border: 1px solid #18BB6E; color: #18BB6E; } .light-gray-tag { background-color: rgb(95 95 95 / 20%); border: 1px solid #a1a1a1; color: #030303; } .light-yellow-tag { background-color: rgb(241,199,0,0.2); border: 1px solid #f1c700; color: #2c240c; } .light-blue-tag { background-color: rgb(29,136,254,0.2); border: 1px solid #1D88FE; color: #1D88FE; } /* Button danger red */ .btn-danger-red { background-color: var(--bs-danger); color: var(--bs-white); } .btn-danger-red:hover { background-color: var(--bs-darkred); color: var(--bs-white); } /* Notification bell */ .ms-notification-bell { position: relative; min-width: 3rem; min-height: 3rem; display: inline-flex; align-items: center; justify-content: center; } .ms-notification-bell .bi { pointer-events: none; font-size: 1.25rem; } .ms-notification-bell .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ms-notification-bell-wrapper .dropdown-menu { min-width: 30rem; } /* Add this to your CSS */ .ms-notification-toast { max-width: 400px; } .ms-notification-toast .toast-body { padding-bottom: 0.5rem; } .ms-notification-toast .btn { font-size: 0.875rem; } .ms-notification-bell-item.unread { background-color: #f8f9fa; border-left: 3px solid #0d6efd; } /* Notification bell, badges, AI Credits */ /* Notification bell styles */ .ms-notification-bell { position: relative; } .ms-notification-badge { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; font-size: 10px; line-height: 1.2; } /* Bell item styles */ .ms-notification-bell-item.unread { background-color: #f8f9fa; border-left: 3px solid #0d6efd; } .ms-notification-bell-item.unread .fw-semibold { color: #0d6efd; } /* Dropdown styling */ .ms-notification-dropdown { width: 320px; max-height: 400px; overflow-y: auto; } .ms-notification-dropdown-header { background-color: #f8f9fa; } /* Red dot indicator when there are unread notifications */ .ms-notification-bell.has-unread::after { content: ''; position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; background-color: #dc3545; border-radius: 50%; border: 2px solid white; } /* Hide the numbered badge when using the red dot */ .ms-notification-bell.has-unread .ms-notification-badge { display: none; } /* AI Credits Status Bar Styles */ .ai-credits-status { display: flex; align-items: center; gap: 12px; /*padding: 8px 12px;*/ /*background-color: #f0f7ff;*/ /*border-radius: 8px;*/ /*border-left: 3px solid #0d6efd;*/ } .ai-credits-status.warning { /*background-color: #fff3cd;*/ /*border-left-color: #ffc107;*/ } .ai-credits-status.danger { /*background-color: #f8d7da; border-left-color: #dc3545;*/ } .ai-credits-icon { font-size: 18px; color: #0d6efd; flex-shrink: 0; } .ai-credits-status.warning .ai-credits-icon { color: #ffc107; } .ai-credits-status.danger .ai-credits-icon { color: #dc3545; } .ai-credits-content { display: flex; flex-direction: column; gap: 4px; flex: 1; } .ai-credits-plan { font-size: 12px; color: #fff; font-weight: 500; display: flex; align-items: center; gap: 6px; } .ai-credits-status.warning .ai-credits-plan { color: #fff; } .ai-credits-status.danger .ai-credits-plan { color: #fff; } .ai-credits-remaining { font-size: 12px; font-weight: 500; color: #fff; } .ai-credits-status.warning .ai-credits-remaining { color: #fff; } .ai-credits-status.danger .ai-credits-remaining { color: #fff; } .ai-credits-upgrade-link { font-size: 12px; color: #0d6efd; text-decoration: none; cursor: pointer; padding: 0; background: none; border: none; display: inline; margin-left: 0; } .ai-credits-upgrade-link:hover { text-decoration: underline; color: #0b5ed7; } .ai-credits-status.warning .ai-credits-upgrade-link { color: #ff8800; } .ai-credits-status.warning .ai-credits-upgrade-link:hover { color: #ff7700; } .ai-credits-status.danger .ai-credits-upgrade-link { color: #dc3545; } .ai-credits-status.danger .ai-credits-upgrade-link:hover { color: #c82333; } /* ========================================================================== responsive.css - Global responsive overrides (desktop, tablet, mobile) ========================================================================== */ @media screen and (max-width: 768px) { .round-bottom-right-corner { border-bottom-right-radius: 0; } .mx-xs-0 { margin-left: 0 !important; margin-right: 0 !important; } } @media (max-width: 1729px) { .card-buttons .btn-base { padding-left: 16px; padding-right: 16px; } } @media (max-width: 1439px) { : root { --font-size-base-md: 14px; } .h-large { font-size: 54px; } .navbar .nav-link { gap: 10px; } .content-stats .content-stat { padding: 7px 20px; } .content-cards { gap: 20px; } .card-buttons { flex-direction: column; } .card-buttons .btn-base { justify-content: center; } .footer-column-2 { min-width: auto; width: 24.3%; } } @media (max-width: 1365px) { .h-large { font-size: 32px; } .sidebar-area { padding: 30px 20px 30px; } .content-dashboard .content-main { flex-direction: column; } .content-main .col-md-8, .content-main .col-md-4 { width: 100%; max-width: none; } .dashboard-details-2 .col-md-4 { width: 100%; max-width: none; } } @media (max-width: 1199px) { .navbar-wrapper .navbar-brand, .sidebar-area { min-width: 175px; } .navbar-nav .nav-item { flex: 1 1 auto !important; } } @media (max-width: 767px) { .navbar-wrapper .navbar-brand { width: auto; } .navbar-wrapper .navbar-brand img { max-width: 120px; } .content-area { padding-left: 0; } } /* Contact page */ .content-contact { padding-bottom: 100px; } .content-contact .content-title { margin-bottom: 108px; } .row-contact h2 { font-size: 32px; margin-bottom: 46px; } .contact-content { max-width: 526px; } /* Contact form responsive */ .contact-blocks { margin-top: 34px; gap: 66px; } .contact-blocks .contact-block { gap: 16px; } .contact-blocks .contact-block-linkedin { gap: 21px; } .contact-form-wrapper { margin-top: 74px; } .content-contact .contact-form-wrapper { max-width: 780px; } .form-group { width: 100%; } .content-contact .form-group { margin-bottom: 37px; } .form-group-row { display: flex; gap: 78px; width: 100%; } .form-label { color: #000; display: block; font-size: var(--font-size-base-md); font-weight: 400 !important; line-height: var(--line-height-sm); margin-bottom: 16px; } .form-label-radio { margin-bottom: 35px; } .form-radios { display: flex; gap: 30px; flex-wrap: wrap; } .content-contact .form-radios { margin-bottom: 42px; } .form-submit { background-color: var(--color-primary); border-radius: 30px; border: none; color: #fff; font-size: var(--font-size-base-sm); font-weight: 300; letter-spacing: 0.15em; text-transform: uppercase; padding: 6px 30px; } .footer { background: #081028; padding-top: 40px; padding-bottom: 0; } .footer-row { gap: 60px; margin-bottom: 35px; } .footer-column-1 { width: 64.62%; margin-right: 7.2%; } .footer-column-2 { width: 18.42%; display: none; margin-right: 6%; } .footer-column-3 { width: 10%; min-width: fit-content; } /* Responsive overrides */ @media (max-width: 1729px) { .card-buttons .btn-base { padding-left: 16px; padding-right: 16px; } .content-connect .row-steps { gap: 8%; } .content-connect .row-steps::before { left: 28%; } .content-connect .row-steps .step { font-size: 18px; } } @media (max-width: 1439px) { : root { --font-size-base-md: 14px; } .h-large { font-size: 54px; } .navbar .nav-link { gap: 10px; } .content-stats .content-stat { padding: 7px 20px; } .content-cards { gap: 20px; } .card-buttons { flex-direction: column; } .card-buttons .btn-base { justify-content: center; } .footer-column-2 { min-width: auto; width: 24.3%; } } @media (max-width: 1365px) { .h-large { font-size: 32px; } .sidebar-area { padding: 30px 20px 30px; } .content-dashboard .content-main { flex-direction: column; } .content-main .col-md-8, .content-main .col-md-4 { width: 100%; max-width: none; } .row-connect { gap: 10vw; justify-content: space-between; } .row-connect .connect-content { width: 50%; flex-shrink: 0; } .row-connect .connect-content h1 { font-size: 60px; } .row-connect .connect-content .h2 { font-size: 24px; } .connect-main .form-wrapper .form-box { padding: 35px 30px 38px; } .connect-main .form-wrapper h2 { font-size: 28px; } .connect-main .form-wrapper .p4 { font-size: 18px; max-width: 100%; } .connect-step .step-content { font-size: 16px; } .content-connect .row-steps { gap: 7%; } .content-connect .row-steps .steps { gap: 20px; } .content-connect .connect-linkedin { gap: 20px; } .content-connect .connect-linkedin .linkedin-text p:not(.small-text) { font-size: 22px; } .content-connect .connect-linkedin .linkedin-text p.small-text { font-size: 14px; } .footer-row { gap: 60px; flex-wrap: wrap; } .footer-row .footer-column { margin-right: 0; width: calc(50% - 30px); } } @media (max-width: 1199px) { .navbar-wrapper .navbar-brand, .sidebar-area { min-width: 175px; } .navbar-nav .nav-item { flex: 1 1 auto !important; } } @media (max-width: 991px) { .content-dashboard { padding-bottom: 60px; } .content-title .content-stats { align-self: flex-start; } .content-dashboard .content-main { margin-top: 30px; } .content-connect .connect-top-bar a { margin-left: 0; flex: 1; justify-content: center; } .row-connect .connect-content { width: 40%; } .row-connect .connect-content h1 { font-size: 50px; } .content-connect .form-title h1 { font-size: 48px; margin-bottom: 30px; } .content-connect .form-title h2 { font-size: 16px; } .content-connect .form-title { margin-bottom: 20px; } .content-connect .row-steps { flex-direction: column; padding-top: 0; padding-bottom: 0; } .content-connect .row-steps::before { opacity: 0; visibility: hidden; } .content-connect .row-steps .text-base-sm { margin-bottom: 0; } .content-contact .content-title { margin-bottom: 60px; } } @media (max-width: 767px) { .navbar-wrapper .navbar-brand { width: auto; } .navbar-wrapper .navbar-brand img { max-width: 120px; } .content-area { padding-left: 0; max-width: 100%; width: 100%; } .content-dashboard .content-title { gap: 10px; border: none; } .content-title .content-stats { top: 0; width: 100%; justify-content: space-between; } .content-stats .content-stat { font-size: 12px; padding: 3px 14px; } .card-article .card-image .card-category { bottom: 20px !important; left: 20px !important; border-radius: 30px; font-size: var(--font-size-base-sm); width: auto; } .card-article .card-body { border: 1px solid #ECECEC; border-top: 0; padding: 15px 0 0; border: none; } .card-article .card-date { margin-bottom: 20px; } .contact-form-wrapper { margin-top: 60px; } .form-radios { gap: 15px; } .form-label, .form-label-radio { margin-bottom: 15px; } .content-contact .form-group { margin-bottom: 30px; } .form-group-row { flex-direction: column; gap: 0; } .content-connect .connect-top-bar a { flex: auto; padding: 21px 10px 15px; } .connect-main { padding-top: 100px; padding-bottom: 100px; } .content-connect .app-brand { margin-bottom: 60px; } .row-connect { flex-direction: column; gap: 60px; } .row-connect .connect-content { width: 100%; } .row-connect .connect-content h1 { font-size: 40px; margin-bottom: 30px; } .row-connect .connect-content .h2 { margin-bottom: 30px; } .connect-main .form-wrapper { margin-top: 0; } .footer { padding-top: 70px; padding-bottom: 70px; } .footer-row { gap: 30px; } .footer-row .footer-column { max-width: 100%; width: 100%; } .footer-row .footer-column-3, .footer-row .footer-column-4 { width: calc(50% - 15px); } .footerHead { font-size: 20px; margin-bottom: 30px; margin-top: 0; } .footer .form-invite .input-group { margin-bottom: 16px; } .footer .footer-bottom { padding-bottom: 40px; } } @media (max-width: 429px) { .content-title .content-stats { gap: 10px; } .content-stats .content-stat { font-size: 11px; gap: 8px; padding: 3px 13px; } } /* Sidebar responsive */ @media only screen and (min-width: 992px) and (max-width: 1200px) { #adminSidebar { padding-left: 0rem !important; } .navbar-wrapper .navbar-brand img { max-width: 130px; } #mainContentBox { padding-left: 1.5rem; } } @media (min-width: 768px) and (max-width: 992px) { .mobile-padding-extra { padding-top: 0.5em !important; padding-bottom: 0.5em !important; } } /* Additional responsive */ @media screen and (min-width: 1200px) and (max-width: 1800px) { #mainContentBox { padding-left: 1.5rem; } } @media screen and (max-width: 991px) { #breadcrumb { margin-bottom: 0px !important } .mainHeaderElement { font-size: 2.5rem !important } .main-content > .container-xxxl { padding-left: 0.5rem !important; padding-right: 0.5rem !important; width: 99% } .card-body { padding: 0.5rem !important; } .card { box-shadow: unset; border: 1px solid #e3e3e3; } .pt-xs-0 { padding-top: 0px !important } .mt-xs-0 { margin-top: 0px !important } .ps-xs-0 { padding-left: unset !important } } @media screen and (max-width: 1199px) { .paymentButtonS { background: #C808BD; padding: 1em; width: 100%; color: #fff; } h1 { font-size: 2.5rem !important; } }