/* Minification failed. Returning unminified contents. (3,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (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 '-' (34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (36,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 '-' (38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (47,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (48,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (49,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (50,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (51,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (52,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (53,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (55,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (57,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (62,16): run-time error CSS1039: Token not allowed after unary operator: '-of-font' (63,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (64,28): run-time error CSS1039: Token not allowed after unary operator: '-of-grey100' (84,24): run-time error CSS1039: Token not allowed after unary operator: '-of-col-1' (85,20): run-time error CSS1039: Token not allowed after unary operator: '-of-col-1' (86,21): run-time error CSS1039: Token not allowed after unary operator: '-of-col-1' (90,24): run-time error CSS1039: Token not allowed after unary operator: '-of-col-2' (91,20): run-time error CSS1039: Token not allowed after unary operator: '-of-col-2' (92,21): run-time error CSS1039: Token not allowed after unary operator: '-of-col-2' (96,24): run-time error CSS1039: Token not allowed after unary operator: '-of-col-3' (97,20): run-time error CSS1039: Token not allowed after unary operator: '-of-col-3' (98,21): run-time error CSS1039: Token not allowed after unary operator: '-of-col-3' (102,24): run-time error CSS1039: Token not allowed after unary operator: '-of-col-4' (103,20): run-time error CSS1039: Token not allowed after unary operator: '-of-col-4' (104,21): run-time error CSS1039: Token not allowed after unary operator: '-of-col-4' (108,24): run-time error CSS1039: Token not allowed after unary operator: '-of-col-5' (109,20): run-time error CSS1039: Token not allowed after unary operator: '-of-col-5' (110,21): run-time error CSS1039: Token not allowed after unary operator: '-of-col-5' (114,24): run-time error CSS1039: Token not allowed after unary operator: '-of-col-6' (115,20): run-time error CSS1039: Token not allowed after unary operator: '-of-col-6' (116,21): run-time error CSS1039: Token not allowed after unary operator: '-of-col-6' (120,24): run-time error CSS1039: Token not allowed after unary operator: '-of-col-7' (121,20): run-time error CSS1039: Token not allowed after unary operator: '-of-col-7' (122,21): run-time error CSS1039: Token not allowed after unary operator: '-of-col-7' (126,24): run-time error CSS1039: Token not allowed after unary operator: '-of-col-8' (127,20): run-time error CSS1039: Token not allowed after unary operator: '-of-col-8' (128,21): run-time error CSS1039: Token not allowed after unary operator: '-of-col-8' (132,24): run-time error CSS1039: Token not allowed after unary operator: '-of-col-9' (133,20): run-time error CSS1039: Token not allowed after unary operator: '-of-col-9' (134,21): run-time error CSS1039: Token not allowed after unary operator: '-of-col-9' (138,24): run-time error CSS1039: Token not allowed after unary operator: '-of-col-10' (139,20): run-time error CSS1039: Token not allowed after unary operator: '-of-col-10' (140,21): run-time error CSS1039: Token not allowed after unary operator: '-of-col-10' (144,24): run-time error CSS1039: Token not allowed after unary operator: '-of-col-11' (145,20): run-time error CSS1039: Token not allowed after unary operator: '-of-col-11' (146,21): run-time error CSS1039: Token not allowed after unary operator: '-of-col-11' (150,24): run-time error CSS1039: Token not allowed after unary operator: '-of-col-12' (151,20): run-time error CSS1039: Token not allowed after unary operator: '-of-col-12' (152,21): run-time error CSS1039: Token not allowed after unary operator: '-of-col-12' (170,16): run-time error CSS1039: Token not allowed after unary operator: '-of-font' (181,17): run-time error CSS1039: Token not allowed after unary operator: '-of-secondary400' (186,21): run-time error CSS1039: Token not allowed after unary operator: '-of-secondary400' (259,30): run-time error CSS1039: Token not allowed after unary operator: '-of-grey100' (260,32): run-time error CSS1039: Token not allowed after unary operator: '-of-grey100' (262,25): run-time error CSS1039: Token not allowed after unary operator: '-of-grey500' (401,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (598,26): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (634,17): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (646,17): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (660,22): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (661,17): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (677,22): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (736,16): run-time error CSS1039: Token not allowed after unary operator: '-of-iconColor' (741,16): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (763,17): run-time error CSS1039: Token not allowed after unary operator: '-of-accent400' (768,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (831,16): run-time error CSS1039: Token not allowed after unary operator: '-of-accent400' (836,16): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (837,16): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (841,16): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (849,16): run-time error CSS1039: Token not allowed after unary operator: '-of-grey800' (850,22): run-time error CSS1039: Token not allowed after unary operator: '-of-grey200' (855,16): run-time error CSS1039: Token not allowed after unary operator: '-of-secondary500' (856,22): run-time error CSS1039: Token not allowed after unary operator: '-of-grey100' (861,16): run-time error CSS1039: Token not allowed after unary operator: '-of-secondary500' (862,22): run-time error CSS1039: Token not allowed after unary operator: '-of-grey100' (873,16): run-time error CSS1039: Token not allowed after unary operator: '-of-grey400' (878,16): run-time error CSS1039: Token not allowed after unary operator: '-of-iconColor' (879,22): run-time error CSS1039: Token not allowed after unary operator: '-of-grey200' (888,16): run-time error CSS1039: Token not allowed after unary operator: '-of-secondary500' (889,22): run-time error CSS1039: Token not allowed after unary operator: '-of-grey100' (924,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (933,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (998,16): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1006,16): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1021,20): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (1025,16): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1053,16): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (1057,20): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (1061,20): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (1066,16): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (1070,16): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (1074,16): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (1078,16): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (1083,16): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (1089,16): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (1093,16): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1099,16): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1103,20): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1107,16): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1116,16): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1120,16): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1285,16): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (1310,28): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1314,28): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1318,28): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1322,28): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1332,16): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (1336,20): run-time error CSS1039: Token not allowed after unary operator: '-of-accent400' (1340,20): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1349,20): run-time error CSS1039: Token not allowed after unary operator: '-of-accent400' (1354,20): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1374,32): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (1390,32): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (1391,21): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1643,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey700' (1676,16): run-time error CSS1039: Token not allowed after unary operator: '-of-red400' (1685,16): run-time error CSS1039: Token not allowed after unary operator: '-of-grey500' (1692,16): run-time error CSS1039: Token not allowed after unary operator: '-of-red400' (1711,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey500' (1745,20): run-time error CSS1039: Token not allowed after unary operator: '-of-grey800' (1781,16): run-time error CSS1039: Token not allowed after unary operator: '-of-accent400' (1785,16): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (1879,16): run-time error CSS1039: Token not allowed after unary operator: '-of-red300' (1883,16): run-time error CSS1039: Token not allowed after unary operator: '-of-red300' (1903,16): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (1908,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey700' (1916,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (1925,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey700' (1960,17): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (2018,32): run-time error CSS1039: Token not allowed after unary operator: '-of-red300' (2028,32): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (2033,17): run-time error CSS1039: Token not allowed after unary operator: '-of-red300' (2041,17): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (2053,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (2057,17): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (2061,17): run-time error CSS1039: Token not allowed after unary operator: '-of-green300' (2077,17): run-time error CSS1039: Token not allowed after unary operator: '-of-accent400' (2081,16): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (2085,20): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (2089,28): run-time error CSS1039: Token not allowed after unary operator: '-of-primary300' (2093,28): run-time error CSS1039: Token not allowed after unary operator: '-of-grey300' (2131,32): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (2184,28): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (2286,36): run-time error CSS1039: Token not allowed after unary operator: '-of-rl-margins' (2336,21): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (2408,33): run-time error CSS1039: Token not allowed after unary operator: '-of-grey300' (2409,34): run-time error CSS1039: Token not allowed after unary operator: '-of-grey300' (2472,20): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (2567,22): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (2584,22): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (2673,28): run-time error CSS1039: Token not allowed after unary operator: '-of-accent100' (2674,17): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (2675,24): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (2727,24): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (2731,17): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (2819,22): run-time error CSS1039: Token not allowed after unary operator: '-of-accent100' (2825,26): run-time error CSS1039: Token not allowed after unary operator: '-of-accent100' (2836,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (2841,17): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (3183,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (3205,16): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (3217,16): run-time error CSS1039: Token not allowed after unary operator: '-of-green300' (3276,16): run-time error CSS1039: Token not allowed after unary operator: '-of-grey200' (3337,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (3438,16): run-time error CSS1039: Token not allowed after unary operator: '-of-font' (3451,16): run-time error CSS1039: Token not allowed after unary operator: '-of-accent400' (3456,17): run-time error CSS1039: Token not allowed after unary operator: '-of-accent400' (3461,16): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (3465,17): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (3502,16): run-time error CSS1039: Token not allowed after unary operator: '-of-font' (3515,16): run-time error CSS1039: Token not allowed after unary operator: '-of-accent400' (3520,17): run-time error CSS1039: Token not allowed after unary operator: '-of-accent400' (3525,16): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (3529,17): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (3548,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (3566,21): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (3645,35): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (3654,17): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (3750,32): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (3751,32): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (3850,28): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (3855,32): run-time error CSS1039: Token not allowed after unary operator: '-of-secondary400' (3859,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (3906,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (3913,22): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (3927,32): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (3931,26): run-time error CSS1039: Token not allowed after unary operator: '-of-accent100' (3949,17): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (4046,25): run-time error CSS1039: Token not allowed after unary operator: '-of-red400' (4080,6): run-time error CSS1030: Expected identifier, found ' ' (4080,6): run-time error CSS1019: Unexpected token, found ' ' (4081,21): run-time error CSS1039: Token not allowed after unary operator: '-of-red400' (4085,24): run-time error CSS1039: Token not allowed after unary operator: '-of-red400' (4094,25): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (4106,26): run-time error CSS1039: Token not allowed after unary operator: '-of-grey200' (4110,30): run-time error CSS1039: Token not allowed after unary operator: '-of-primary300' (4135,17): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (4167,34): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (4216,21): run-time error CSS1039: Token not allowed after unary operator: '-of-accent400' (4220,21): run-time error CSS1039: Token not allowed after unary operator: '-of-accent400' (4406,23): run-time error CSS1039: Token not allowed after unary operator: '-of-fontfamily' (4418,23): run-time error CSS1039: Token not allowed after unary operator: '-of-fontfamily' (4502,22): run-time error CSS1039: Token not allowed after unary operator: '-of-wizardgrey' (4508,28): run-time error CSS1039: Token not allowed after unary operator: '-of-wizardgrey' (4525,21): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (4574,25): run-time error CSS1039: Token not allowed after unary operator: '-of-red400' (4582,32): run-time error CSS1039: Token not allowed after unary operator: '-of-red400' (4587,25): run-time error CSS1039: Token not allowed after unary operator: '-of-gold400' (4595,32): run-time error CSS1039: Token not allowed after unary operator: '-of-gold400' (4600,25): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (4608,32): run-time error CSS1039: Token not allowed after unary operator: '-of-primary500' (4612,25): run-time error CSS1039: Token not allowed after unary operator: '-of-green300' (4620,32): run-time error CSS1039: Token not allowed after unary operator: '-of-green300' (4738,17): run-time error CSS1039: Token not allowed after unary operator: '-of-secondary400' (4742,21): run-time error CSS1039: Token not allowed after unary operator: '-of-secondary500' (4761,40): run-time error CSS1039: Token not allowed after unary operator: '-of-grey300' (4764,28): run-time error CSS1039: Token not allowed after unary operator: '-of-white500' (4854,36): run-time error CSS1039: Token not allowed after unary operator: '-of-grey900' (4864,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (4865,10): run-time error CSS1035: Expected colon, found '{' (4874,1): run-time error CSS1019: Unexpected token, found '@keyframes' (4875,10): run-time error CSS1035: Expected colon, found '{' */ :root { /* Colour Palette */ --of-font: 100% 'Roboto',Roboto,Helvetica,Arial,sans-serif; /* OneFace's font size and family */ --of-fontfamily: 'Roboto',Roboto,Helvetica,Arial,sans-serif; /* OneFace's font family */ --of-grey100: #F5F8FA; --of-grey200: #E2E8EB; --of-grey300: #D0D7DD; /* white at 80% opacity over --of-primary500*/ --of-grey400: #8B97A6; --of-grey500: #506274; /*white at 10% opacity over --of-grey700*/ --of-grey600: #46596C; /*white at 5% opacity over --of-grey700*/ --of-grey700: #3C5064; /*dsg app menu colour*/ --of-grey800: #334455; /*black at 15% opacity over --of-grey700*/ --of-grey900: #1A2127; /* Grid header, ofParagraph text colour */ --of-primary300: #537491; /*white at 28% opacity over --of-primary500 */ --of-primary400: #335B7D; /*white at 14% opacity over --of-primary500 */ --of-primary500: #134169; /*dsg header colour*/ --of-secondary100: #DEEEF7; --of-secondary200: #1F8DC8; /* white at a 12% opacity over --of-secondary400 */ --of-secondary300: #1487C5; /* white at a 8% opacity over --of-secondary400 */ --of-secondary400: #007DC0; --of-secondary500: #006EA9; --of-accent100: #D9F2FF; /* Used for secondary button pressed/click animation */ --of-accent300: #66CCFF; --of-accent400: #00AAFF; --of-green300: #77BB00; --of-green400: #00773C; --of-red300: #FF4400; --of-red400: #C23400; --of-purple300: #6C42F5; --of-purple400: #492DA7; --of-gold300: #FAC823; --of-gold400: #FA9F23; --of-white500: #FFFFFF; --of-wizardgrey: #ECF1F4; /* Status Colours */ --of-success: var(--of-green300); --of-warning: var(--of-gold400); --of-error: var(--of-red400); --of-info: var(--of-accent400); /* SR colors */ --of-iconColor: #939CA2; /* OF Columns and Numbers */ --of-col-1: calc(100% / 12); --of-col-2: calc(100% / 12 * 2); --of-col-3: calc(100% / 12 * 3); --of-col-4: calc(100% / 12 * 4); --of-col-5: calc(100% / 12 * 5); --of-col-6: calc(100% / 12 * 6); --of-col-7: calc(100% / 12 * 7); --of-col-8: calc(100% / 12 * 8); --of-col-9: calc(100% / 12 * 9); --of-col-10: calc(100% / 12 * 10); --of-col-11: calc(100% / 12 * 11); --of-col-12: calc(100%); --of-rl-margins: 30px; /* Constant Numbers */ --of-rl-margins: 30px; } body { font: var(--of-font); color: var(--of-grey900); background-color: var(--of-grey100); margin: 0; height: 100vh; width: 100vw; overflow: hidden; /*display: flex;*/ flex-direction: column; overflow: auto; font-size: 14px; } main { flex-grow: 1; display: flex; flex-direction: row; overflow-y: auto; } /* --------------- width in columns -------------------- */ .ofCol-1 { -ms-flex: 0 0 var(--of-col-1); flex: 0 0 var(--of-col-1); max-width: var(--of-col-1); } .ofCol-2 { -ms-flex: 0 0 var(--of-col-2); flex: 0 0 var(--of-col-2); max-width: var(--of-col-2); } .ofCol-3 { -ms-flex: 0 0 var(--of-col-3); flex: 0 0 var(--of-col-3); max-width: var(--of-col-3); } .ofCol-4 { -ms-flex: 0 0 var(--of-col-4); flex: 0 0 var(--of-col-4); max-width: var(--of-col-4); } .ofCol-5 { -ms-flex: 0 0 var(--of-col-5); flex: 0 0 var(--of-col-5); max-width: var(--of-col-5); } .ofCol-6 { -ms-flex: 0 0 var(--of-col-6); flex: 0 0 var(--of-col-6); max-width: var(--of-col-6); } .ofCol-7 { -ms-flex: 0 0 var(--of-col-7); flex: 0 0 var(--of-col-7); max-width: var(--of-col-7); } .ofCol-8 { -ms-flex: 0 0 var(--of-col-8); flex: 0 0 var(--of-col-8); max-width: var(--of-col-8); } .ofCol-9 { -ms-flex: 0 0 var(--of-col-9); flex: 0 0 var(--of-col-9); max-width: var(--of-col-9); } .ofCol-10 { -ms-flex: 0 0 var(--of-col-10); flex: 0 0 var(--of-col-10); max-width: var(--of-col-10); } .ofCol-11 { -ms-flex: 0 0 var(--of-col-11); flex: 0 0 var(--of-col-11); max-width: var(--of-col-11); } .ofCol-12 { -ms-flex: 0 0 var(--of-col-12); flex: 0 0 var(--of-col-12); max-width: var(--of-col-12); } #passContainer > div { display: block; } #ofResetPassword { display: block; } .ofLoginPage .ofPasswordContent { text-align: center; padding: 10px 0; margin: auto; width: 300px; position: relative; font: var(--of-font); font-style: normal; font-size: 12px; } .ofLoginPage .ofPasswordTokenContent p { padding: 10px 0px 10px 75px; text-align: left; } a { color: var(--of-secondary400); font-weight: 300; } a:visited { color: var(--of-secondary400); } .ofListLabel { font-size: 15px; } .ofListLabel { font-size: 15px; } .ofFooter { position: fixed; bottom: 0px; right: 0px; width: 100%; height: 70px; background: #EEEEEE; z-index: 999; } @media only screen and (min-width: 599px) and (orientation: landscape) { .ofMinMenu ~ .ofMain_appImperium .ofFooter { width: calc(100% - 50px); /* Number is the width of the icon menu (.ofMinMenu) */ } } @media only screen and (max-width: 599px) and (orientation: portrait) { .ofFooter { display: block; } .ofFooterHeight { height: calc(100% - 70px) !important; } } @media only screen and (max-height: 599px) and (orientation: landscape) { .ofFooter { display: block; } .ofFooterHeight { height: calc(100% - 70px) !important; } } @media only screen and (min-width: 599px) and (orientation: portrait) { .ofFooter { display: none; } } @media only screen and (min-height: 599px) and (orientation: landscape) { .ofFooter { display: none; } } .ofActionBar { display: flex; height: 70px; width: 100%; } .ofActionBar .ofActionBarButton { width: 100%; height: 100%; border-radius: 3px; display: table; } .ofActionBar .ofActionBarButton.ofDisabled { background: var(--of-grey100); border-color: var(--of-grey100); box-shadow: none; color: var(--of-grey500); pointer-events: none; } .ofActionBar .ofActionBarButton .ofActionBarIcon { display: table-cell; align-items: center; text-align: center; vertical-align: middle; font-size: 12px; } .ofActionBar .ofActionBarButton .ofActionBarIcon:active { /*background: #BFD5EA radial-gradient(circle, transparent 1%, #BFD5EA 1%) center/15000%;*/ animation: ofButtonClick 0.15s linear; cursor: pointer; box-shadow: none; } .ofActionBar .ofActionBarButton .ofActionBarIcon svg { height: 22px; width: 22px; margin: auto; display: block; } .ofActionBar .ofActionBarButton .ofActionBarIcon svg.ofDisabled { fill: #9a9a9a !important; pointer-events: none; } .ofCookieBanner { position: fixed; bottom: 0px; left: 200px; width: calc(100% - 200px); background-color: #543F99; z-index: 10000; overflow: auto; color: white; } .ofCookieBanner .ofCookieHeader { margin-left: 11px; margin-right: 15px; margin-top: 15px; } .ofCookieBanner .ofCookieHeader .ofNotice { display: inline-flex; top: 0px; left: 0px; } .ofCookieBanner .ofCookieHeader .ofNotice .ofNoticeText { margin: auto 0px auto 5px; font-size: 22px; font-weight: 500; } .ofCookieBanner .ofCookieHeader .ofNotice .ofIcon { fill: white; fill: #543F99; width: 30px; height: 30px; } .ofCookieBanner .ofCookieHeader .ofClose { top: 0px; right: 15px; position: absolute; margin: 5px; margin-right: 0px; margin-top: 15px; } .ofCookieBanner .ofCookieHeader .ofClose .ofIcon { fill: white; } .ofCookieBanner .ofCookieContent { margin: 0px 15px 0px 15px; } .ofCookieBanner .ofCookieContent .ofText { margin: 15px 0px 15px 0px; } .ofCookieBanner .ofCookieContent .ofText .ofLink { color: white; } .ofCookieBanner .ofCookieContent .ofText .ofLink:visited { color: white; } .ofCookieBanner .ofCookieOptions { float: right; margin-right: 15px; margin-bottom: 25px; display: inline-flex; } .ofCookieBanner .ofCookieOptions .ofCookieDecline { border: 2px solid white !important; margin-right: 10px; background-color: #543F99 !important; min-width: 150px !important; } .ofCookieBanner .ofCookieOptions .ofCookieDecline:hover { background-color: #543F99 !important; } .ofCookieBanner .ofCookieOptions .ofCookieAccept { border: 2px solid white !important; min-width: 150px !important; color: #543F99 !important; } .ofMinMenu ~ .ofMain_appImperium .ofCookieBanner { width: calc(100% - 50px); /* Number is the width of the icon menu (.ofMinMenu) */ left: 50px; /* Number is the width of the icon menu (.ofMinMenu) */ } @media only screen and (max-width: 599px) { .ofCookieBanner { width: 100%; left: 0px; } } .ofEnvIndicator { min-height: 20px; background-color: #fed81e; text-align: center; font-size: 14px; color: var(--of-grey900); line-height: 21px; height: 20px; } .ofEnvIndicator.ofHidden { display: none; } .ofEnvIndicator .ofIcon { height: 12px; width: 12px; vertical-align: bottom; padding: 3px; } .ofMain_contentHeader .ofContainer .ofHeader:not(.ofHide) { display: inline-block; } .ofTitle.ofShow { word-wrap: break-word; display: block; max-width: 800px; color: #555555; } @media only screen and (max-width: 599px) { .ofHide_sm:not(.ofShow), .ofHide:not(.ofShow) { display: none; } .ofMain_contentHeader .ofContainer .ofHeader { display: none; } pre.ofSample { overflow: scroll; } } .colorPickerContent .ofContent { position: relative; text-shadow: none; height: 100%; width: 100%; display: table; padding-left: 0px; } .colorPickerContent .ofContent .ofTextStyles { padding-left: 5px; vertical-align: middle; display: table-cell; } .colorPickerContent .ofContent.ofWhite { color: white; } .colorPickerContent .ofContent.ofBlack { color: black; } @media only screen and (min-width: 600px) and (max-width: 1199px) { .ofHide_gt_sm:not(.ofShow), .ofHide_md:not(.ofShow), .ofHide:not(.ofShow) { display: none; } pre.ofSample { overflow: scroll; } #cancelOption { margin-left: 12px; } } .dev-collab-read-more { text-align: end; } @media only screen and (min-width: 1200px) { .ofHide_lg:not(.ofShow), .ofHide_gt_md:not(.ofShow), .ofHide_gt_sm:not(.ofShow), .ofHide:not(.ofShow) { display: none; } ul .ofAction, top_ofmmcollapseExpand_menu_link { display: none; } #passContainer > div { display: flex; } #ofResetPassword { display: flex; } .ofLoginPage .ofPasswordContent { width: 600px; } #cancelOption { margin-left: 6px; } } .ofLink { cursor: pointer; } .ofLink:not(#appmenuAlertTrigger):not(#appmenuUserTrigger):not(#appmenuQuickSearch) { position: relative; } #appAlertCount { position: absolute; text-align: center; color: white; left: 17px; top: 13px; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /* IE10+ CSS styles go here */ } .ofMain_appImperium { flex-grow: 1; display: flex; flex-direction: column; width: 100%; } @media only screen and (max-width: 450px) { .ofMain_appImperium { -webkit-overflow-scrolling: touch; } } .ofMain_content { padding: 15px 15px 0 15px; /*flex-grow: 1;*/ height: 100%; overflow: auto; } /* OLD (legacy) section styles */ .d-section { border: 1px solid #A5B3C5; background-color: White; margin: 3px 0 0 3px; width: 1260px; } .d-section-titlebar { padding: .4em 0; font-size: 1.2em; line-height: 1.2em; white-space: nowrap; border-bottom: 1px solid #A5B3C5; } .d-section-header { border-color: #A5B3C5; background: #F7F5F2; } .d-section-header, .d-section-header .d-link { color: #555; } .d-section-title { overflow: hidden; margin: auto 0px; } .d-section-body { margin: 5px 1px 5px 1px; } .d-section-body-hide { display: none; } /* End of section styles */ /* End of oF Frame Class styles */ /* Start of oF Section Class styles */ .ofSection, .ofSearchSection { margin-bottom: 15px; } .ofSection .ofHeader { background: var(--of-white500); } .ofSection .ofReadOnlyHeader { background: none; border: 1px solid #dcdcdc; border-bottom: none; } .ofReadOnlySection { border-bottom: 1px solid #dcdcdc; } .ofReadOnlySection label { font-size: 12px; color: #555555; padding-left: 10px; } .ofReadOnly label { font-size: 12px; color: #555555; padding-left: 10px; } .ofWindowHeader > div { padding-left: 15px; } .ofWindow.ofDockingWindow .ofWindowContent .ofForm_ctrl_container { width: -webkit-fill-available; } .ofSectionHeaderText, .ofWindow > .ofHeader > div, .ofWindow .ofHeader > div { float: left; color: var(--of-primary500); font-size: 22px; padding-left: 15px; letter-spacing: 0; font-style: normal; line-height: 32px; font-weight: 300; } .ofWindowContent .ofReadOnlySection .ofSection_header .ofSectionHeaderText { float: left; margin-top: 0px; color: var(--of-primary500); font-size: 16px; } .ofWindowContent .controls4 { display: inline-block; } .ofSectionHeaderAction { float: right; margin-top: -3px; } .ofWindow .ofHeader { background: var(--of-white500); color: var(--of-primary500); font-size: 16px; line-height: 1.7em; height: 40px !important; padding: 4px 0; border: none; align-items: center; } .ofWindow .ofButtonStrip { position: absolute; display: flex; bottom: 0px; right: 0px; width: 100%; height: 70px; background: var(--of-white500); z-index: 999; padding-top: 15px; } .ofWindow .ofWindowContent.has-buttonstrip { width: calc(100% - 45px) !important; } .ofWindow .ofButtonStrip .ofPositiveActions { display: flex; margin-left: auto; } .ofWindow .ofButtonStrip input[type="button"] { margin: auto 15px auto 0px; } .ofWindow .ofButtonStrip input[type="button"].OfSecondaryButton { margin: auto 30px auto 15px; } .ofFieldText { font-size: 14px; color: black; /*padding-left: 5px;*/ padding-bottom: 20px; border: 1px solid transparent; } .ofSection_header .ofSectionActions { display: flex; float: right; height: 100%; } .ofSectionControls { padding: 5px 15px 15px; margin-top: 0; display: inline-block } .ofPageSection_controls { display: block !important } /* End of oF Section Class styles */ /* Start of oF Control Class styles */ .ofControl { padding: 5px 15px 15px 15px; margin-top: 0; } .ofIcon, .ofIconNoHover { display: inline-block; line-height: 1; /*padding: 4px;*/ width: 22px; height: 22px; overflow: hidden; fill: var(--of-iconColor); border: 1px solid transparent; } .ofWhiteLayer { fill: var(--of-white500); } .ofIcon.ofNoStates:not(.ofDisabled):active, .ofIcon.ofNoStates:not(.ofDisabled):hover { background: none; } .ofTextButtonIcon.ofIcon { width: auto; line-height: 20px; } .ofTextToolbarButton > .ofIcon { width: auto; } .ofTextToolbarButton.ofDisabled > .ofIcon { opacity: 0.5; } .ofTextToolbarButton > .ofIcon:hover { color: var(--of-accent400); } .ofTextToolbarButton.ofDisabled > .ofIcon:hover { cursor: default; color: var(--of-grey900); } .ofMain_contentHeader .ofToolBarSet > .ofToolBar > .ofTooltip > button { display: none; } .ofMain_contentHeader .ofMoreButtonHiddenHolder { position: absolute; background-color: #fff; border: 1px solid #aaaaaa; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); display: none !important; } .ofMain_contentHeader .ofMoreButtonHiddenHolder.shown { display: block !important; } .ofMain_contentHeader .ofMoreButtonHiddenHolder .ofTooltip > button { display: none; } .ofMoreButtonHiddenHolder .ofTooltip .ofIcon { vertical-align: top; } .ofSection .ofSection_header .ofIcon.ofIcon_help { width: 17px; height: 17px; margin: auto 0px; } .ofSection .ofSection_header .ofIcon { margin-top: 5px; margin: auto 0px; } .ofSavedSearch .ofIcon { margin: 4px 5px 0 5px; } .ofGridImageCell, .ofFlagColumn { text-align: center; } .ofGrid .ofIcon.ofGridColumnIcon { width: 22px; height: 22px; } .ofSection_header .ofImageButton { padding: 0 5px; /*space between buttons in section header */ display: flex; flex-direction: column; } .ctrlMetaAttribute button.ofDisabled { fill: #9a9a9a !important; pointer-events: none; } .ctrlMetaAttribute button:not(.ofDisabled):hover { fill: var(--of-accent400) !important; cursor: pointer; } .ofIcon.ofFlagged { fill: var(--of-primary500); fill: var(--of-primary500); } .ofIcon.ofIcon_flag.ofActive { fill: var(--of-primary500); } .ofIcon.ofFlagged.ofDisabled { fill: #AAAAAA; } .ofIcon.ofHover:not(.ofNoStates), .ofIcon:hover:not(.ofNoStates) { fill: var(--of-grey800); background: var(--of-grey200); border-radius: 4px; } .ofIcon.ofActive:not(.ofNoStates), .ofIcon:active:not(.ofNoStates) { fill: var(--of-secondary500); background: var(--of-grey100); border-radius: 4px; } /*ensure Active state overrides Hover state*/ .ofIcon.ofActive.ofHover:not(.ofNoStates), .ofIcon:active:hover:not(.ofNoStates) { fill: var(--of-secondary500); background: var(--of-grey100); border-radius: 4px; } /*override regular icon setting for smaller underline in saved search active*/ .ofIcon.ofSavedSearchToggle { /*padding: 5px;*/ margin: 4px 5px 0 5px; } .ofIcon.ofDisabled { fill: var(--of-grey400) !important; pointer-events: none; } .ofIcon:not(.ofDisabled):not(.ofNoStates):hover { fill: var(--of-iconColor); background: var(--of-grey200); border-radius: 4px; } .ofIcon.ofIcon_help:hover { cursor: default; } .ofIcon:hover:active:not(.ofNoStates) { fill: var(--of-secondary500); background: var(--of-grey100); } .ofIcon.ofInline { width: 24px; height: 24px; } .ofIcon.ofSmall { width: 18px; height: 18px; } .ofIcon.ofMedium { width: 22px; height: 22px; } .ofIcon.ofLarge { width: 32px; height: 32px; } .ofComment { font-size: 10px; color: black; } .ofControlTitle { font-size: 14px; color: black; } .ofParagraph { font-size: 14px; color: var(--of-grey900); font-weight: 400; letter-spacing: 0; font-style: normal; padding: 6px 15px 10px 15px; } .ofTextHeading { height: 21px; color: var(--of-grey900); font-size: 16px; line-height: 21px; } .ofRadioButtonGroup .ctrlLabel.ofControlTitle { margin-top: 10px; padding-left: 5px; font-size: 12px; align-items: center; justify-content: start; /*display: table-row; this was conflict in merge*/ } .ofRadioButtonGroup .ctrlLabel.ofControlTitle svg.required { margin-top: 0px; align-self: start; } .ofRadioButtonGroup .ofControl { display: inline-flex; /*justify-content: space-between;*/ padding: 0px; margin-top: 2px; } .ofRadioButtonGroup .ofControl.ofRadioButtonGroupVertical { display: block; margin-top: 0; } .ofRadioButtonGroup .ofControl > div { margin-right: 15px; } /* End of oF Control Class styles */ /* Start of oF Object Class styles */ .ofHeader { display: flex; flex-direction: row; justify-content: space-between; padding: 0 !important; } .ofMain_contentHeader .ofContainer .ofHeader { padding: 0 0 10px 0 !important; } .ofAggregateInfo { height: 16px; font-size: 14px; padding-left: 10px; border: 1px solid darkgray; padding-top: 3px; padding-bottom: 3px; } /*Start of Progress Indicator styles*/ .ofProgInd { cursor: pointer; text-align: center; display: inline-flex; z-index: 5; } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofPast { fill: var(--of-primary500); } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofCurrentStep { fill: white; } .ofProgInd .ofSkipped .ofWhiteLayer { fill: var(--of-primary500); } /*This CSS is for only Skipped state for Index> CurrentState*/ .ofProgInd .ofskippedAfter { fill: #9A9A9A; /* stroke: #9A9A9A; stroke-width: 11;*/ } .ofProgInd .ofskippedAfter .ofWhiteLayer { fill: #DCDCDC; } .ofProgInd .ofskippedAfter .ofIconSVG.ofSkippedIcon { fill: var(--of-grey900); } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofSkipped { fill: var(--of-primary500); } .ofProgInd .ofInProgressIssues { fill: #FF9922; } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofInProgressIssues { fill: #FF9922; } .ofProgInd .ofSeriousIssues { fill: #9A9A9A; } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofSeriousIssues { fill: #9A9A9A; } .ofProgInd .ofPresentFuture .ofWhiteLayer { fill: #DCDCDC; } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofPresentFuture { fill: #9A9A9A; } .ofProgInd .ofIconSVG { fill: var(--of-white500); } .ofProgInd .ofIconSVG.ofInProgressIcon { fill: var(--of-grey900); } .ofProgInd .ofIconSVG.ofSkippedIcon { fill: var(--of-white500); /*transform: rotate(90deg);*/ } .ofProgInd .ofWarningIcon { fill: var(--of-white500); } .ofProgInd .ofErrorIcon { fill: var(--of-white500); } .ofProgInd .ofPresentFuture .ofIconSVG { fill: var(--of-grey900); } .ofProgInd .ofPast .ofInProgressIcon { fill: var(--of-white500); } .ofProgInd .ofPast text { fill: var(--of-white500); } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofIconSVG { fill: var(--of-white500); } .ofProgInd .ofCurrentStep { fill: var(--of-primary500); stroke-width: 11; stroke: none; } .ofProgInd .ofPast { fill: var(--of-primary500); } .ofProgInd .ofPast .ofWhiteLayer { fill: var(--of-primary500); } .ofProgInd .ofSkipped { fill: var(--of-primary500); } .ofProgInd .ofPresentFuture { fill: #9A9A9A; } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofCurrentStep { fill: var(--of-primary500); } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofCurrentStep { fill: var(--of-primary500); } .ofProgInd .ofAction_left { width: 50px; height: 50px; z-index: 7; margin-top: 7px; margin-right: -17px; display: none; } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofAction_left { width: 50px; height: 50px; z-index: 7; margin-top: 7px; margin-right: -17px; display: none; } .ofProgInd .ofAction_right { width: 50px; height: 50px; z-index: 7; display: none; margin-top: 7px; margin-left: -17px; } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofAction_right { width: 50px; height: 50px; z-index: 7; display: none; margin-top: 7px; margin-left: -17px; } /* Small size PI */ @media only screen and (max-width: 599px) { .ofProgInd .ofStep:not(.focalPoint) { display: none; } .ofProgInd .ofLine_horizontal:not(.focalPoint) { display: none; } .ofProgInd .ofLine_horizontal.ofPast:not(.focalPoint) { display: none; } /* Add case for manually medium further shrinking */ .ofProgInd.ofMedium .ofStep:not(.focalPoint) { display: none; } .ofProgInd.ofMedium .ofLine_horizontal:not(.focalPoint) { display: none; } .ofProgInd.ofMedium .ofLine_horizontal.ofPast:not(.focalPoint) { display: none; } .ofProgInd .ofAction_left { display: block; } .ofProgInd .ofAction_right { display: block; } } /* Manually small */ .ofProgInd.ofSmall .ofStep:not(.focalPoint) { display: none; } .ofProgInd.ofSmall .ofLine_horizontal:not(.focalPoint) { display: none; } .ofProgInd.ofSmall .ofLine_horizontal.ofPast:not(.focalPoint) { display: none; } .ofProgInd.ofSmall .ofAction_left { display: block; } .ofProgInd.ofSmall .ofAction_right { display: block; } /* Medium size PI */ @media only screen and (min-width: 600px) and (max-width: 1199px) { .ofProgInd .ofStep:not(.focalPoint):not(.focalNeighbor) { display: none; } .ofProgInd .ofLine_horizontal:not(.focalPoint):not(.focalNeighbor) { display: none; } .ofProgInd .ofLine_horizontal.ofPast:not(.focalPoint):not(.focalNeighbor) { display: none; } .ofProgInd .ofAction_left { display: block; } .ofProgInd .ofAction_right { display: block; } #passContainer > div { display: flex; } #ofResetPassword { display: flex; } .ofLoginPage .ofPasswordContent { width: 600px; } } /* Manually medium */ .ofProgInd.ofMedium .ofStep:not(.focalPoint):not(.focalNeighbor) { display: none; } .ofProgInd.ofMedium .ofLine_horizontal:not(.focalPoint):not(.focalNeighbor) { display: none; } .ofProgInd.ofMedium .ofLine_horizontal.ofPast:not(.focalPoint):not(.focalNeighbor) { display: none; } .ofProgInd.ofMedium .ofAction_left { display: block; } .ofProgInd.ofMedium .ofAction_right { display: block; } /* Default PI */ .ofProgInd .ofStep { width: 70px; height: 70px; z-index: 7; } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofStep { width: 70px; height: 70px; z-index: 7; } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg { width: 40px; height: 40px; padding: 0px; margin-top: 0px; fill: var(--of-white500); stroke: none; } .ofProgInd .ofLine_horizontal { position: relative; width: 65px; height: 5px; margin: -2px -21px 0px -21px; top: 19.6px; z-index: 6; background-color: #9A9A9A; } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofLine_horizontal { position: relative; width: 65px; height: 5px; margin: -2px -29px 0px -31px; top: 19.6px; z-index: 6; background-color: #9A9A9A; } /* Done / Active */ .ofProgInd .ofLine_horizontal.ofPast { background-color: var(--of-primary500); } /*Higher specificity for metapanel progress indicator*/ .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofLine_horizontal.ofPast { background-color: var(--of-primary500); } .ofProgInd .ofLine_horizontal.ofSkipped { background-color: var(--of-primary500); } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofLine_horizontal.ofSkipped { background-color: var(--of-primary500); } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofIcon { display: inline-block; line-height: 1; padding: 2pt; width: 24px; height: 24px; overflow: hidden; fill: var(--of-grey900); } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofIcon.ofHover { fill: var(--of-accent400); } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofIcon.ofActive { fill: var(--of-primary500); } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofIcon.ofDisabled { fill: #AAAAAA; pointer-events: none; } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofIcon:not(.ofDisabled):hover { fill: var(--of-accent400); cursor: pointer; } .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofIcon:hover:active { fill: var(--of-primary500); } /* Progress Indicator History Dialog*/ #progressHistoryWin { display: none; position: fixed; z-index: 2147483647; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; background-color: rgba(0, 0, 0, 0.4); } #progressHistoryWin .modal-content { position: relative; background-color: var(--of-white500); margin: auto; padding: 0; width: 80%; max-width: 650px; min-width: 350px; font-size: 16px; font-weight: 600; box-shadow: 0px 0px 10px 2px #555555; } #progressHistoryWin .modal-header { display: flex; flex-flow: row; justify-content: space-between; align-items: center; background-color: var(--of-white500); color: var(--of-primary500); height: 40px; } #progressHistoryWin .modal-header > div { display: flex; align-items: center; padding-right: 5px; padding-left: 10px; } #progressHistoryWin .modal-body { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } #progressHistoryWin .full { width: 100%; } #progressHistoryWin .ofActive { visibility: visible; z-index: 2147485847 !important; } #progressHistoryWin .modal-body .ofSection { margin: 0 15px 15px 15px; } /*End of Progress Indicator styles*/ /*Start of History Dialog styles*/ .ofHistoryDialog { color: black; padding: 10px; } .ofHistoryDialog .ofContainerBorder { width: 100%; height: 201px; border: solid; border-width: 0.75px; border-color: #818181; } .ofHistoryDialog .ofContainer { padding-right: 1px; height: 200px; overflow-y: scroll; } .ofHistoryDialog .ofActions { height: 20px; width: 100%; } .ofHistoryDialog .ofActions .ofRadioButton { float: right; padding: 0px 5px 0px; } .ofListItem { padding: 5px; } .ofListItem .ofTitle { padding: 0px 0px 0px; display: inline-block; } .ofListItem .ofDate { padding: 0px 0px 0px; display: inline-block; float: right; font-size: 12px; } .ofListItem .ofBody { padding: 0px 5px 0px; font-size: 12px; } .ofListItem .ofListBoxText { padding-left: 5px; } .ofListItem .ofListBoxLabel { font-size: 14px; padding-bottom: 5px; } /*End of History Dialog styles*/ /* End of oF Object Class styles */ span.pinned { content: url('../images/flagged.png'); width: 60px; height: 60px; } span.unpinned { content: url('../images/unflagged.png'); width: 60px; height: 60px; } .ofForm { display: flex; flex-flow: row wrap; align-items: center; } body .ofRow { /*padding-right: 10px;*/ word-spacing: -1em; letter-spacing: -.31em; overflow: hidden; } .ofRow > * { word-spacing: normal; letter-spacing: normal; } .ofForm_ctrl_container { margin: 5px 5px 15px 15px; /* Setting 10px space between input filed and Upload button 10px= 5px + 5px(margin of Input field)*/ display: inline-table; } .ofRow > .ofForm_ctrl_container { align-self: flex-end; } .ofForm_ctrl_container.borderBoxImportant { padding: 5px 5px 15px 15px; margin: 0; } @media (max-width: 599px) { .ofForm_ctrl_container.ofCol-1 { width: 25%; } .ofForm_ctrl_container.ofCol-2 { width: 49.99%; } .ofForm_ctrl_container.ofCol-3, .ofForm_ctrl_container.ofCol-4, .ofForm_ctrl_container.ofCol-5, .ofForm_ctrl_container.ofCol-6, .ofForm_ctrl_container.ofCol-7, .ofForm_ctrl_container.ofCol-8, .ofForm_ctrl_container.ofCol-9, .ofForm_ctrl_container.ofCol-10, .ofForm_ctrl_container.ofCol-11, .ofForm_ctrl_container.ofCol-12 { width: 100%; } } @media (min-width: 600px) and (max-width: 1199px) { .ofForm_ctrl_container.ofCol-1, .ofForm_ctrl_container.ofCol-2 { width: 25%; } .ofForm_ctrl_container.ofCol-3 { width: 49.99%; } .ofForm_ctrl_container.ofCol-4 { width: 75%; } .ofForm_ctrl_container.ofCol-5 { width: 75%; } .ofForm_ctrl_container.ofCol-6, .ofForm_ctrl_container.ofCol-7, .ofForm_ctrl_container.ofCol-8, .ofForm_ctrl_container.ofCol-9, .ofForm_ctrl_container.ofCol-10, .ofForm_ctrl_container.ofCol-11, .ofForm_ctrl_container.ofCol-12 { width: 100%; } } @media (min-width: 1200px) { .ofForm_ctrl_container.ofCol-1 { width: 8.33%; } .ofForm_ctrl_container.ofCol-2 { width: 16.66%; } .ofForm_ctrl_container.ofCol-3 { width: 25%; } .ofForm_ctrl_container.ofCol-4 { width: 33.33%; } .ofForm_ctrl_container.ofCol-5 { width: 41.66%; } .ofForm_ctrl_container.ofCol-6 { width: 50%; } .ofForm_ctrl_container.ofCol-7 { width: 58.33%; } .ofForm_ctrl_container.ofCol-8 { width: 66.66%; } .ofForm_ctrl_container.ofCol-9 { width: 75%; } .ofForm_ctrl_container.ofCol-10 { width: 83.33%; } .ofForm_ctrl_container.ofCol-11 { width: 91.66%; } .ofForm_ctrl_container.ofCol-12 { width: 100%; } } .newLineTag { display: block; float: left; width: 100%; height: 0; margin: 0; padding: 0; } .ofForm_ctrl_container.ofDisabled .ctrlLabel label { color: var(--of-grey700); } span.ofLanguageSelection.ofSelectedLanguage { background-image: url("../images/checkmarkenabled10.png"); background-repeat: no-repeat; display: inline; padding-right: 10px !important; /*margin-left: -10px;*/ position: relative; top: 3px; right: -5px; } span.ofLanguageSelection.ofSelectedLanguage + span { display: inline; /*margin-left: -10px;*/ padding-left: 6px; } .ofLanguageSelection { width: 20px; } .sub_m_link.ofSelectedLanguageLink { padding-left: 0; } .ofForm_ctrl_container svg.required { width: 8px; height: 8px; display: inline-block; fill: var(--of-red400); margin-right: 2px; margin-bottom: 3px; } .ofForm_ctrl_container div.help > svg { width: 12px; height: 12px; display: inline-block; fill: var(--of-grey500); position: relative; } .ofForm_ctrl_container div.error > svg { width: 16px; height: 16px; fill: var(--of-red400); } .ofForm_ctrl_container .ctrlLabel { display: flex; flex-flow: row nowrap; /*justify-content: space-between;*/ min-height: 20px; } .ofForm_ctrl_container .ctrlLabel > div:first-child { /*display: flex;*/ } .ofDisabled.ofForm_ctrl_container .ctrlLabel { color: #9A9A9A; } .ofDisabled.ofForm_ctrl_container .ctrlMetaAttribute { color: var(--of-grey500); } .ofDisabled.ofForm_ctrl_container .ctrlAddElements .ctrlAction { cursor: not-allowed; pointer-events: none; fill: #AAAAAA; } .ofForm_ctrl_container .ctrlMain { display: table-row; } .ofForm_ctrl_container .ctrlAddElements { padding-left: 5px; display: table-cell; vertical-align: middle; } .ofForm_ctrl_container .ctrlAddElements > div { display: flex; align-items: center; } .ofForm_ctrl_container .ctrlAddElements > .ctrlMetaAttribute > button { height: 30px; width: 30px; margin: -1px 5px 0 5px; } .ofForm_ctrl_container .ctrlAddElements .ctrlAction { padding: 0; background: transparent; border: none; fill: var(--of-grey800); } .ofForm_ctrl_container .ctrlAddElements .ctrlAction:focus { outline: none; } .ofForm_ctrl_container .ctrlAddElements .ctrlAction::-moz-focus-inner { border: none; } .ofForm_ctrl_container .ctrlAddElements .ctrlAction:enabled { cursor: pointer; } .ofForm_ctrl_container .ctrlAddElements .ctrlAction svg { width: 22px; height: 22px; padding: 4px; border: 1px solid transparent; } .ofForm_ctrl_container #qsMainSB .ctrlAddElements .ctrlAction svg { vertical-align: middle; padding-top: 0; } .ofForm_ctrl_container #qsMainSB .ctrlAddElements .ctrlAction:hover svg { border: 1px solid transparent; } .ofForm_ctrl_container .ctrlAddElements .ctrlAction:hover svg { border: 1px dotted #525252; } .ofForm_ctrl_container .ctrlAddElements .ctrlAction:enabled:hover { fill: var(--of-accent400); } .ofForm_ctrl_container .ctrlAddElements .ctrlAction:active:hover { fill: var(--of-primary500); } .ofForm_ctrl_container .ctrlAddElements .ctrlAction:active:hover svg { border: 1px solid transparent; } .app_alerts .ofHeaderMenuIcon { position: relative; } .app_alerts .ofHeaderMenuIcon::after { opacity: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; height: 60%; width: 60%; border-radius: 100%; animation-name: ripple; animation-duration: 3s; animation-delay: 0s; animation-iteration-count: 3; animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1); z-index: -1; } .app_alerts .ofHeaderMenuIcon::before { opacity: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; height: 60%; width: 60%; border-radius: 100%; animation-name: ripple; animation-duration: 3s; animation-delay: 0.5s; animation-iteration-count: 3; animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1); z-index: -1; } @keyframes ripple { from { opacity: 1; transform: scale3d(0.75, 0.75, 1); } to { opacity: 0; transform: scale3d(1.7, 1.7, 1); } } .app_alerts.ofAlertUrgent .ofHeaderMenuIcon::before { border: 8px solid rgba(231,32,37,0.8); } .app_alerts.ofAlertUrgent .ofHeaderMenuIcon::after { border: 8px solid rgba(231,32,37,0.8); } .app_alerts.ofAlertUrgent svg { fill: #e72025; } .ofLink.menuIcon.app_alerts.ofAlertUrgent svg { fill: #e72025; } .app_alerts.ofAlertNonUrgent .ofHeaderMenuIcon::before { border: 8px solid rgba(255,68,0,0.8); } .app_alerts.ofAlertNonUrgent .ofHeaderMenuIcon::after { border: 8px solid rgba(255,68,0,0.8); } .app_alerts.ofAlertNonUrgent svg { fill: var(--of-red300); } .ofLink.menuIcon.app_alerts.ofAlertNonUrgent svg { fill: var(--of-red300); } .app_alerts.ofAlertInfo .ofHeaderMenuIcon::before { border: 8px solid rgba(0,119,0,0.8); } .app_alerts.ofAlertInfo .ofHeaderMenuIcon::after { border: 8px solid rgba(0,119,0,0.8); } .app_alerts.ofAlertInfo svg { fill: #007700; } .ofLink.menuIcon.app_alerts.ofAlertInfo svg { fill: #007700; } .app_alerts svg { fill: var(--of-white500); } .ofForm_ctrl_container .ctrlLabel label { font-size: 12px; color: var(--of-grey700); font-weight: 500; letter-spacing: 0.1px; } .ofForm_ctrl_container label { display: inline-block; margin: 0 2px 6px 0; color: var(--of-grey900); font-weight: 400; letter-spacing: 0; } .ofForm_ctrl_container.ofReadOnly label { font-size: 12px; color: var(--of-grey700); padding-left: 0; } .ofForm_ctrl_container.ofReadOnly { margin: 10px 5px 0 0; padding-left: 15px; } #stopReason.ofFieldText { padding-bottom: 15px !important; } .ofForm_ctrl_container > .ctrlMain > div > input:not([type='button']) { display: block; height: 24px; } .ofTextArea { min-width: 200px; max-width: 600px; min-height: 50px; max-height: 200px; } .ofTextAreaCount { font-size: 12px; } #ofsalutation { min-height: 45px; line-height: 22px; display: flex; flex-direction: column; margin-top: 10px; color: var(--of-primary500); } .ofSalutation { padding: 0 10px; font-size: 18px; font-weight: 300; margin: auto 0px; } .ofDomain { padding: 3px 10px; font-weight: 300; font-size: 12px; word-break: break-all; line-height: 14px; } .ofAppLogo { max-height: 30px; margin: 6px 5px 2px 5px; } .ofMain_notificationBar { border-color: #a5b3c5; border-width: 1px; border-style: solid; display: table; width: 100%; } .ofMain_notificationBar .ofMessage { vertical-align: middle; text-align: center; height: 25px; width: 100%; clear: both; right: 0; left: 0; line-height: 25px; } .ofMain_notificationBar .ofMessage span { position: absolute; right: 3px; } .ofMain_notificationBar { margin: 0; } .ofMain_notificationBar .ofColor_error { background-color: #e27025; color: white; } .ofMain_notificationBar .ofColor_warning { background-color: var(--of-red300); color: white; } .ofMain_notificationBar .ofColor_good { background-color: #007700; color: white; } .ofMain_notificationBar .ofColor_neutral { background-color: var(--of-primary500); color: white; } .ofStatus.ofColor_warning { color: var(--of-red300); } .ofStatus.ofColor_good { color: #007700; } .ofStatus.ofColor_neutral { color: var(--of-primary500); } .ofColor_disabled { color: #AAAAAA; } .ofColor_active { color: #004488; } .ofColor_enabled { color: var(--of-grey900); } .ofColor_blue { color: var(--of-primary500); } .ofColor_green { color: var(--of-green300); } .ofColor_red { color: #aa0003; } .ofColor_purple { color: #814a9d; } .ofColor_orange { color: #ff9922; } .ofColor_hover, .ofColor_enabled:hover { color: var(--of-accent400); } .ofStrokeColor_accent { fill: var(--of-primary500) !important; } .ofStrokeColor_accent use > svg { fill: var(--of-primary500) !important; /*fix issue in Firefox*/ } .ofBgColor_highlight { background-color: var(--of-primary300); } .ofBgColor_lightgray { background-color: var(--of-grey300); } /*input[type="text"] { height: 24px; }*/ /*user page layout*/ .ofUserPage { min-width: 530px; } .ofUserPage .brandlogo { max-width: 240px; max-height: 150px; } .ofUserPage .top { width: 100%; height: 200px; padding-bottom: 10px; display: flex; } .ofUserPage .top div { flex-grow: 1; flex-basis: 0; display: flex; justify-content: center; align-items: flex-end; } .ofUserPage .banner { color: white; font-size: 24px; width: 100%; height: 46px; line-height: 46px; text-align: center; background-color: var(--of-primary500); flex-shrink: 0; } .ofUserPage .content { width: 530px; height: 320px; display: inline-block; border: 1px solid #d3d3d3; margin-top: 10px; padding-top: 10px; font-size: 14px; text-align: center; background-color: white; } .ofUserPage .content .button_area { display: flex; margin: 0 auto; justify-content: space-around; } .ofUserPage footer { position: fixed; bottom: 0; width: 100%; } .ofUserPage .links { display: flex; justify-content: space-between; font-size: 16px; margin: 30px 100px; } .ofUserPage .links a { text-decoration: none; } .ofLoginDsglogo { width: 55px; margin-top: 10px; margin-left: -10px; } .dsglogo { width: 240px; margin-left: auto; } /*placeholder for the icon image*/ .ofLoginLogo { background-color: var(--of-primary500); width: 80px; height: 80px; position: relative; left: 50%; margin-bottom: 10px; margin-left: -40px; /*half the width of the container*/ /*margin-top: -100px; /*80px height + 20 px whitespace*/ border-radius: 70px; } @media only screen and (max-width: 450px) { .ofMain_footer { font-size: 8px; padding-top: 4px; /*height: 1.6em;*/ overflow: hidden; flex-shrink: 0; } .ofMain_footer .machine_span { /*display: block; float: left;*/ padding-top: 3px; } .ofMain_footer .mach, .ofMain_footer .copy, .ofMain_footer .term { box-sizing: border-box; -moz-box-sizing: border-box; float: left; white-space: pre-line; word-wrap: break-word; padding-right: 3px; line-height: 90%; padding-top: 3px; } .ofMain_footer .mach { /* left: 3px;*/ width: 100%; text-align: center; } .ofMain_footer .copy { width: 100%; text-align: center; } .ofMain_footer .term { width: 100%; text-align: center; } .ofMain_footer .version { /* text-align: right;*/ box-sizing: border-box; -moz-box-sizing: border-box; float: left; /*padding-right: 3px;*/ display: inline-block; width: 100%; /*line-height: 80%;*/ text-align: center; } } @media only screen and (min-width: 1200px) { .ofMain_footer { font-size: 10px; height: 1.2em; } } /*----------------oFRow----------------*/ .ofRow { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: flex-start; box-sizing: border-box; } .ofRow.ofNoWrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .ofRow.ofSearch { padding: 0px 15px 15px 15px; justify-content: space-between; flex-wrap: nowrap; } .ofRow.ofSearch > :first-child { margin-right: 15px; } .ofRow.ofSectionRow { display: grid; grid-column-gap: calc(var(--of-rl-margins) / 2); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .ofRow.ofSectionRow > .ofSection { -ms-flex: unset; flex: unset; max-width: unset; } .ofSection .ofContent .ofRow.ofSectionRow { padding: 0px 15px; } .ofRow > * > button:not(:last-child) { margin-right: 15px; } /* column picker styles -- start */ .of_columnPickerWin { display: none; position: fixed; z-index: 5000; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; background-color: rgba(0, 0, 0, 0.4); } .of_columnPickerWin .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 80%; max-width: 414px; min-width: 430px; /*temporary solution until column picker is re-written*/ font-size: 14px; box-shadow: 0 0 10px 2px #555555; } .of_columnPickerWin .modal-header { display: flex; flex-flow: row; justify-content: space-between; align-items: center; color: var(--of-primary500); height: 30px; padding-left: 15px; padding-top: 5px; } .of_columnPickerWin .modal-header > div { display: flex; align-items: center; padding-right: 5px; font-weight: 400; font-size: 16px; } .of_columnPickerWin .close { width: 22px; height: 22px; cursor: pointer; overflow: hidden; fill: #818181; } .of_columnPickerWin .modal-body { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; } .ofColumnPickModal { margin-top: 0.5em; padding-left: 0px; } .ofColumnPicker { display: flex; justify-content: space-between; align-items: baseline; } .ofColumnPicker .ofColumnPickerArrows { display: flex; justify-content: center; width: 185px; } .ofColumnPicker .ofColumnPickerArrows > svg { margin: 5px 3px 0px 3px; } .ofColumnPicker .ofColumnPickModal .ofForm_ctrl_container.ofColumnPickerContainer { margin: 0px; } .ofListBox .ofListBoxDragItem { display: flex; flex-wrap: wrap; align-content: center; height: 20px; } .ofListBox .ofListBoxDragItem .ofListBoxDragItemBorder { width: 100%; border-bottom: 1px solid #DCDCDC; position: absolute; bottom: 0px; left: 0px; } /* column picker styles -- end */ /* Expander and window x Icon hover state */ .ofSavedSearch { display: flex; border-left: 1px solid var(--of-grey300); border-right: 1px solid var(--of-grey300); cursor: default; background: rgba(255, 255, 255, 0.4); float: right; } .ofSavedSearch .ofInfoTip .ofInfoTipContent { max-width: 300px; } .ofSavedSearch .ofInfoTip .ofInfoTipContent div { margin: 0px 0px 5px 0px; } .ofSearchIcon { float: right; } .ofSection_header { position: relative; height: 100%; display: flex; } .ofSection_header .ofSectionHeaderText { flex-grow: 1; /*min-width: fit-content;*/ display: flex; margin: auto 0px; line-height: 42px; } .ofSection_header .oFTitleGroup { display: inline-block; } @media only screen and (max-width: 599px) { .ofSearchSection.ofSavedSearchShow .ofHeader { height: 60px !important; } .ofSearchSection .ofSavedSearch { position: absolute; top: 30px; border: none; background: transparent; width: 290px; } .ofSavedSearchShow .ofSection_header { display: block; } } .ofTabSections { margin-bottom: 15px; border: none; flex-shrink: 0; } .ofTabSections > div > ul > li > svg { width: 24px; height: 24px; fill: var(--of-white500); padding: 0 6px 10px 3px; } .ofTabSections .ofSection { margin: 0 0.1px 0 0; } .ofTabSections .ofSection .ofHeader { padding-top: 10px !important; } .ofTabSections .ofSection .ofSection_header { width: 100%; } .ofTabSections .ofSearchSection .ofSection_header { width: 100%; } .ofTabSections .ofIcon.ofTabHeaderIcon { border: none; } .ofTabSections .ofIcon.ofTabHeaderIcon:hover { fill: #212121; border: none; } .ofFileUpload { display: flex; } .ofFileUpload .buttonArea { display: flex; position: relative; margin-right: 0; margin-bottom: 0; } .ofFileUpload .buttonArea > [type="file"] { height: 28px; top: 0; left: 0; opacity: 0; -ms-filter: "alpha(opacity=0)"; z-index: 1000; width: 1px; margin-left: 0px; } .ofFileUpload .nameArea { display: flex; position: relative; margin-left: -1px; flex-grow: 1; } .ofFileUpload .nameArea > .uploadFileName { padding-right: 20px; padding-left: 3px; height: 28px; flex-grow: 1; width: 100%; } .ofFileUpload .nameArea > svg { position: absolute; right: 2px; top: 12%; height: 10px; width: 10px; } /*Merge conflict addition from dev START*/ .ofActionPanel li { cursor: pointer; } .ofActionPanel li.ofDisabled { cursor: default; pointer-events: none; } /*Merge conflict addition from dev END*/ .ofActionPanel.ofIconPanel { display: none; position: fixed; float: initial; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 20000; /*Set z-index with 20000 because Modal Window has 18000*/ width: 114px; height: auto; background: var(--of-white500); border-style: solid; border-width: 1px; border-color: #aaaaaa; padding: 3px 3px 0 0; margin: 0px } .ofActionPanel.ofText { display: none; position: fixed; float: initial; background-color: #f9f9f9; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 20000; /*Set z-index with 20000 because Modal Window has 18000*/ width: auto; height: auto; background: var(--of-white500); border-style: solid; border-width: 1px; border-color: #aaaaaa; padding: 2px 0px; margin-left: 0px; font-size: 14px; font-style: normal; line-height: 1.231; overflow: auto; } .ofActionPanel.ofIconPanel .ofImageButton { display: inline-block; width: 28px; margin: 5px 5px 5px 5px; padding: 0px; float: left; } .ofActionPanel.ofIconPanel .ofSmall.ofIcon { width: 24px; padding: 2px; } .ofActionPanel.ofText ol { list-style-type: none; padding-left: 0px; padding-right: 0px; text-indent: 0px; color: black; margin: 0px; } .ofActionPanel.ofText ol li { padding: 5px; } .ofActionPanel.ofText ol li:hover { background: #EBF8FF; } .ofActionPanel.ofText ol li.ofDisabled { opacity: 0.5; } .ofActionPanel.ofText ol li.ofDisabled:hover { background: #fff; cursor: default; } .ofActionPanel.ofText ol li.ofHide, .ofActionPanel.ofText ol hr.ofHide { display: none; } .ofTileDocking { display: flex; flex-wrap: wrap; } .ofTileDocking .ofTile { padding: 5px 15px 15px 15px; } .ofTileDocking .ofWindow { border: none; margin: 0 !important; border-color: #dcdcdc; border-width: 1px; border-style: solid; padding-left: 0px; height: 80px !important; } .ofTileDocking .ofWindow.ofGrouped { border-width: 2px; margin: 15px 15px 0px 0px; border-radius: 1px; } .ofTileDocking.ofTileLimitedSpace .ofWindow { height: auto !important; } .ofTileDocking .ofWindow.ofGrouped:hover { background-color: #ebf8ff; } .ofWindow.ofGrouped.ofSelected { background-color: var(--of-accent100) !important; color: var(--of-primary500); border-color: var(--of-primary500) !important; /* set inline, important needed to override */ } .ofTileLimitedSpace { padding: 0px 0px 10px 0px !important; min-height: 50px !important; } .ofTileLimitedSpace div { padding: 0px !important; height: auto !important; } .ofTileLimitedSpace div > span { padding: 0px !important; height: auto !important; } .ofTile { z-index: 5; text-align: center; padding-left: 0px; background-color: transparent !important; /* For selected/hover state to work */ cursor: pointer; } .ofTile div { font-size: 14px; font-weight: 400; padding-top: 4px; padding-bottom: 1px; text-align: center; } .ofTile span { font-size: 24px; font-weight: 400; } .ofTile .ofLink { text-decoration: underline; } .ofTile .help { display: inline-block; margin-left: 5px; padding-top: 0px; } .ofTile .help svg { width: 14px; height: 14px; fill: var(--of-grey900); } .ofColor_neutral { color: var(--of-primary500); } .ofFlagColumn { display: flex; align-items: center; justify-content: center; } .ofBoolColumn { pointer-events: none; display: block; margin: auto; justify-content: center; align-items: center; } .ofLoading_Background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #555555; opacity: .18; -webkit-opacity: .18; -moz-opacity: .18; filter: alpha(opacity=18); z-index: 49999; } .ofLoading { position: absolute; border: 1px solid #AAAAAA; border-radius: 3px; padding: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; z-index: 50000; } .ofLoading .ofLoadingGif { height: 30px; width: 30px; } .ofLoading span { font-size: 14px; } .ofLoading.noBorder { border: none; } .ofLoading.landscape { flex-direction: row; } .ofLoading.landscape span { margin-left: 5px; } .ofMain_content { display: flex; flex-direction: column; flex-shrink: 1; } .ofMain_appImperium { flex-shrink: 1; overflow: auto; } /*IMAGE VIEWER CONTROL*/ .ofImageViewer.ofNavigation .ofItem img { cursor: pointer; width: auto; height: auto; max-width: 100%; display: block; max-height: 100%; } .ofImageViewer.ofNavigation .ofItem.ofActive { background: var(--of-accent100); z-index: 2; /* Specify a stack order in case you're using a different order for other elements */ cursor: pointer; /* Add a pointer on hover */ } .ofImageViewer.ofNavigation .ofItem.ofActive:hover { background: var(--of-accent100); } .ofImageViewer.ofNavigation .ofItem:hover { background: #ebf8ff; } .ofImageViewer.ofNavigation .ofItem .pageCount { float: left; padding-right: 5px; font-size: 12px; color: var(--of-grey900); text-align: left; } .ofImageViewer.ofNavigation .ofItem.ofActive .pageCount { color: var(--of-primary500); } .ofImageViewer.ofNavigation .ofItem .thumbnailSelector .imageComment { position: absolute; left: 25%; top: 25%; font-size: 26px; color: black; text-shadow: 0px 1px 5px white; font-weight: 600; } .ofImageViewer.ofNavigation .ofItem .thumbnailSelector { height: 100%; width: 100%; float: left; } .ofImageViewer.ofNavigation .ofItemContainer { display: inline-block; overflow-y: auto; /*min-width: 182px;*/ height: 100%; width: 100%; } .ofImageViewer.ofNavigation .ofItem { font-size: 14pt; position: relative; text-align: center; padding: 5px 10px 20px 5px; height: 150px; width: 150px; } .ofImageViewer.ofNavigation { margin-right: 0px; height: 100%; display: inline-block; } .ofImageViewer.ofContent img.ofLargeView { border-width: 0px; cursor: default; width: auto; height: auto; max-width: 100%; display: block; max-height: 100%; } .ofImageViewer.ofContent { margin-right: 0px; display: inline-block; height: 100%; width: 100%; } .ofImageViewer.ofContent .ofLargeImageView { max-width: 100% !important; max-height: 100% !important; width: 100%; display: inline; overflow: auto; user-select: none; flex-grow: 1; border: 1px solid #DCDCDC; } .ofImageViewer.ofContent .ofLargeImageView .ofImagePosition { height: 100%; width: 100%; } .ofImageViewer .ofImageContent { height: 100% } .ofImageViewer.ofContent .ofImageContent { display: flex; flex-direction: column; display: grid; grid-template-rows: auto 30px; position: relative; } .ofImageViewer.ofContent .ofImageContent .ofActionWrap .ofActions { display: inline-flex; } .ofImageViewer.ofContent .ofImageContent .ofActionWrap { text-align: center; width: 100%; border-top: 0px; } .ofImageViewer.ofContent .ofActions .imgViewerPageNumber { width: 50px; } /* Remove arrows from specifically for image viewer / Chrome, Safari, Edge, Opera */ .ofImageViewer .ofActions input::-webkit-outer-spin-button, .ofImageViewer .ofActions input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ .ofImageViewer .ofActions input[type=number] { -moz-appearance: textfield; } .ofImageViewer.ofContent .ofActions .imgViewerPageCount { display: inline; } .ofImageViewer.ofContent .ofActions div { display: inline; } .ofImageViewer .ofActions.ofDisabled svg { fill: #9A9A9A; pointer-events: none; } .ofImageViewer.ofContent .ofActions.ofDisabled input { background-color: #f8f8f8; border: #9a9a9a; } .ofImageViewer.ofContent .ofImageContent .ofActions div { margin: 0px 10px 0px 10px; user-select: none; } .ofImageViewer .ofHeader .ofActions { float: right; display: inline-flex; } /*TILE LIST CONTROL*/ .ofTileList { display: inline-flex; } .ofTileList .ofList { overflow: hidden; display: inline-flex; margin-left: 0px; margin-right: 0px; } .ofTileList .ofList_ViewAll { overflow: unset; display: inline-block; margin-left: 29px; margin-right: 29px; } .ofTileList .ofList .ofItem { border-radius: 1px; border: 2px solid; width: 110px; height: 55px; margin: 0 10px 0 10px; float: left; background-color: white; } .ofTileList .ofList_ViewAll .ofItem_ViewAll { border-radius: 5px; border: 2px solid; width: 110px; height: 55px; margin-left: 10px; margin-right: 10px; float: left; margin-bottom: 20px; background-color: white; } .ofTileList .ofList .ofItem span { padding: 4px; } .ofTileList .ofList a { color: black !important } .ofTileList .ofList .ofItem .ofItemContent { line-height: 49px; text-align: center; text-decoration: underline; font-size: 14px; } .ofTileList .ofItem .ofItemContent span { display: inline-block; vertical-align: middle; line-height: normal; } .ofTileList .ofAction_right, .ofAction_left { margin: auto; top: 0; left: 0; bottom: 0; right: 0; height: 100%; } .ofTileList .ofAction_right.svgDisabled, .ofTileList .ofAction_left.svgDisabled { opacity: 0.5; pointer-events: none; cursor: default; } .ofTileList .ofAction_right_ViewAll, .ofTileList .ofAction_left_ViewAll { display: none; } .ofTileList .ofListLeft { float: left; transform: rotateX(270); } .ofTileList .ofListRight { float: right; transform: rotateX(270); } /*CALENDAR CARDS*/ .ofTileList.ofCalendarCards { display: flex; justify-content: center; margin-bottom: 15px; } .ofTileList.ofCalendarCards .ofAction_right, .ofAction_left { margin: initial; margin-top: auto; margin-bottom: auto; } .ofTileList.ofCalendarCards .ofList .ofItem.ofCalendarItem { border-radius: 1px; border: 1px solid; border-color: #543f99; width: 165px; height: 40px; margin: 0 10px 0 10px; float: left; background-color: white; display: flex; cursor: pointer; } .ofTileList.ofCalendarCards .ofList .ofItem.ofCalendarItem:hover { background-color: #ebf8ff; } .ofTileList.ofCalendarCards .ofList .ofItem.ofCalendarItem.ofSelected { background-color: #d9f2ff; color: #0055aa; border-color: #0055aa; } .ofTileList.ofCalendarCards .ofList .ofItem.ofCalendarItem .ofCalendarItemText { flex: 0 0 40px; background-color: #543f99; text-align: center; color: white; display: flex; flex-flow: column; justify-content: center; } .ofTileList.ofCalendarCards .ofList .ofItem.ofCalendarItem.ofSelected .ofCalendarItemText { background-color: #0055aa; } .ofTileList.ofCalendarCards .ofList .ofItem.ofCalendarItem .ofCalendarItemText span { font-size: 16px; } .ofTileList.ofCalendarCards .ofList .ofItem.ofCalendarItem .ofCalendarItemContent { flex: 1; text-align: center; font-size: 14px; height: 100%; display: flex; flex-direction: column; justify-content: center; } .ofTileList.ofCalendarCards .ofList .ofItem.ofCalendarItem span { display: block; padding: 0px; font-weight: 400; } /*SINGLE TILE CONTROL*/ .ofSingleTile .ofItem { border-radius: 1px; border: 2px solid; width: 110px; height: 55px; margin: 10px; float: left; background-color: white; } .ofSingleTile .ofItem span { padding: 4px; } .ofSingleTile a { color: black !important } .ofSingleTile .ofItem .ofItemContent { line-height: 49px; text-align: center; font-size: 14px; } .ofSingleTile .ofItem .ofItemContent span { display: inline-block; vertical-align: middle; line-height: normal; } .ofMaskedInput { letter-spacing: 3px; } label.ofSample { display: inline-block; margin: 0 2px 4px 0; font-size: 12px; color: var(--of-grey900); } pre.ofSample { line-height: 1.2em; background: #F8F8F8; display: block; padding: 1em 1em; border: 1px solid #9A9A9A; margin-top: 2px; } /* Search Page Checkbox Alignment*/ .ofVertical_align .ofForm_ctrl_container { vertical-align: text-top; } .ofForm_ctrl_container.ofDisabled textarea { background-color: #f8f8f8; border: #9a9a9a; } /*Map Icon SVG CSS*/ svg.ofBlueIcon { fill: var(--of-primary500); } svg.ofOrangeIcon { fill: #ff9922; } svg.ofRedIcon { fill: #d50000; } svg.ofGreenIcon { fill: var(--of-green300); } svg.ofPurpleIcon { fill: #814a9d; } .ofMapIcon_tearDrop { stroke-width: 5px; fill: #fff; } .ofMapIcon_tearDrop, .ofMapIcon_text { opacity: 0.7; } .ofMapIcon_tearDrop, .ofMapIcon_outerTearDrop, .ofMapIcon_circle, .ofMapIcon_text, .ofMapIcon_line, .ofMapIcon_arrow { stroke-miterlimit: 10; } .ofMapIcon_outerTearDrop { fill: none; opacity: 0.5; } .ofMapIcon_outerTearDrop, .ofMapIcon_circle, .ofMapIcon_line, .ofMapICon_arrow { stroke-width: 2px; } .ofMapIcon_circle { fill: #fff; } .ofMapIcon_text { font-size: 350px; font-weight: 300; text-anchor: middle; transform: translate(320px, 365px); } .ofMapIcon_text.ofIcon_arrow { transform: translate(265px, 365px); } .ofMapIcon_text.ofMapIcon_twoNum { font-size: 250px; letter-spacing: 0.05em; transform: translate(320px, 320px); } .ofMapIcon_text.ofMapIcon_twoNum.ofIcon_arrow { transform: translate(265px, 320px); } .ofIcon_overlay { transform: scale(0.6) translate(400px, 370px); } .ofIcon:hover .ofIcon_overlay .ofWhiteLayer { fill: var(--of-grey200); } .ofIcon_teardropOverlay { transform: scale(0.45) translate(365px, 226px); } .ofIcon_teardropOverlay.ofIcon_arrow { transform: scale(0.45) translate(270px, 226px); } /*css for Question Dialog Window*/ #questionDialog_ofWindowContent_buttonArea { display: flex; justify-content: space-between; margin-top: 1em; padding-left: 0px; align-items: baseline; flex-wrap: wrap; } #questionDialog_ofWindowContent_buttonArea > span { padding: 5px 15px 15px 0; } #QuestionDialogButtons { display: flex; justify-content: space-between; padding: 5px 0px 15px 0px; } #questionDialog_ofWindowHeader { margin-left: 15px; } #questionDialog_ofWindowHeader > div { padding-left: 0px; } #questionDialog_ofWindowContent_cancel { } #questionDialog_ofWindowContent_button1 { } #questionDialog_ofWindowContent_button2 { margin-left: 15px; display: none; } @media only screen and (max-width: 417px) { #questionDialog_ofWindowContent_button2 { margin-left: 15px; display: none; } } #questionDialog_ofWindowContent_body { font-size: 13px; color: var(--of-grey900); padding: 10px 0px 0px 0px; overflow: auto; } #questionDialog .ofWindowContent > div > #controls { margin: 0 0 0 -15px; } .ofIcon.ofRotate90 { transform: rotate(90deg); } .ofIcon.ofRotate180 { transform: rotate(180deg); } .ofIcon.ofRotate270 { transform: rotate(270deg); } .ofPageFilterHeader { background-color: #eeeeee; box-shadow: 0px 0px 7.36px 0px rgba(0, 0, 0, 0.24); position: relative; padding: 10px; z-index: 800; } .ofPageFilterHeader_Left { float: left; flex-wrap: wrap; display: inline-flex; width: auto; height: auto; } .ofPageFilterHeader_Left > *, .ofPageFilterHeader_Right > * { margin: 5px; } .ofPageFilterHeader_Right { float: right; display: inline-flex; width: auto; height: auto; } .ofPageFilterHeader_Right .ofImageButton { display: flex; } .ofPageFilterHeader_Right .ofImageButton svg { margin-top: auto; } @media only screen and (max-width: 599px) { .ofPageFilterHeader_Right { float: none; } } /*Start -- Filter Bar Controls CSS*/ .ofPageFilterHeader .ofForm_ctrl_container { display: flex; } .ofPageFilterHeader .ofForm_ctrl_container .ctrlLabel { margin-top: 5px; margin-right: 5px; } .ofPageFilterHeader .ofForm_ctrl_container label { margin: 2px 2px 2px 0px; } /*End -- Filter Bar Controls CSS*/ /*Start -- Filter Button Controls CSS*/ .OfPageFilterButtonImage { display: inline-block; line-height: 1; padding: 4px; width: 14px; height: 14px; overflow: hidden; fill: #212121; vertical-align: middle; margin: auto 0px; } .OfPageFilterButton { height: 30px; min-width: 70px; display: flex; margin-top: auto; } .OfFilterButtonText { display: inline-block; padding-left: 5px; vertical-align: middle; font: var(--of-font); font-style: normal; font-size: 14px; margin: auto 0px; } .OfPageFilterButton.OfFilterButtonSet { border: 1px solid #555; background-color: #fff; border-radius: 3px; } .OfPageFilterButton:hover .OfPageFilterButtonImage { fill: var(--of-accent400); cursor: pointer; } .OfPageFilterButton:hover .OfFilterButtonText { color: var(--of-accent400); cursor: pointer; } .OfPageFilterButtonActive .OfPageFilterButtonImage { fill: var(--of-primary500); } .OfPageFilterButtonActive .OfFilterButtonText { color: var(--of-primary500); } .OfPageFilterButtonImage.OfCloseImage { /*here we are changeing the style of the button to match with UX standards*/ width: 10px; height: 10px; margin-left: 5px; margin-top: 3px; } /*End -- Filter Button Controls CSS*/ /* Start -- Open Button Panel Control's CSS*/ .OfOpenButtonPanelImage { display: inline-block; line-height: 1; padding: 4px; width: 14px; height: 14px; overflow: hidden; fill: #212121; vertical-align: middle; margin: auto 0px; } .OfOpenButtonPanel { height: 30px; min-width: 70px; display: flex; margin-top: auto; } .OfOpenButtonPanelText { display: inline-block; padding-left: 5px; vertical-align: middle; font: var(--of-font); font-style: normal; font-size: 14px; margin: auto 0px; } .OfOpenButtonPanel.OfFilterButtonSet { border: 1px solid #555; background-color: #fff; border-radius: 3px; } .OfOpenButtonPanel:hover .OfOpenButtonPanelImage { fill: var(--of-accent400); cursor: pointer; } .OfOpenButtonPanel:hover .OfOpenButtonPanelText { color: var(--of-accent400); cursor: pointer; } .OfOpenButtonPanelActive .OfOpenButtonPanelImage { fill: var(--of-primary500); } .OfOpenButtonPanelActive .OfOpenButtonPanelText { color: var(--of-primary500); } .OfOpenButtonPanelImage.OfCloseImage { /*here we are changeing the style of the button to match with UX standards*/ width: 10px; height: 10px; margin-left: 5px; margin-top: 3px; } .OfOpenButtonPanel_Content { width: auto; height: auto; min-width: 50px; min-height: 50px; position: fixed; z-index: 1; background: #fff; color: var(--of-grey900); overflow: hidden; visibility: hidden; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); border-style: solid; border-width: 1px; border-color: #aaaaaa; padding: 5px; } .OpenButtonPanel_Content_Buttons { display: flex; justify-content: space-between; margin: 15px; align-items: baseline; } .OpenButtonPanel_Content_Buttons a { color: var(--of-primary500); } .OfOpenButtonPanel_Content .ofImageButton { display: flex; justify-content: end; } .OfOpenButtonPanel_Content .ofImageButton svg { margin-left: auto; } /*Css Start:- OpenButtonPanel Controls*/ .OfOpenButtonPanel .ofForm_ctrl_container { display: inline-table; } .OfOpenButtonPanel .ofForm_ctrl_container .ctrlLabel { margin: 0; } /*Css End:- OpenButtonPanel Controls*/ /* END -- Open Button Panel Control's CSS*/ /* InfoTip Control Css */ .ofInfoTip { display: block; /* Might have to be removed when doing off focus */ padding: 10px; background: white; box-shadow: 0px 8px 8px rgba(0,0,0,0.2); min-height: 50px; min-width: 50px; max-height: 500px; max-width: 500px; position: fixed; z-index: 999; margin-top: 2px; border: 1px solid #dcdcdc; margin-left: -20px; } .ofInfoTip #closeIcon { position: absolute; top: 0px; right: 0px; width: 14px; height: 14px; stroke-width: 12px; } .ofInfoTip.ofHide { display: none; } .ofInfoTip .ofInfoTipContent { font-size: 12px !important; } .ofInfoTipUpArrowOut { width: 0px; height: 0px; position: fixed; z-index: 998; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 8px solid #dcdcdc; margin-top: -4px; margin-left: 7px; } .ofInfoTipUpArrowIn { width: 0px; height: 0px; position: fixed; z-index: 1000; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid var(--of-white500); margin-top: -4px; margin-left: 8px; } /* End of InfoTIp Control CSS */ .OfSectionBodySubTitle { /* This class used in of-section-body-sub-title */ color: var(--of-primary500); font-size: 14px; padding-left: 15px; line-height: 1.6em; padding-top: 6px; } .OfSecondaryButtonRight { /* This class is used to position the Secondary Button */ margin: 5px 15px 15px 15px !important; float: right; } /* DatePeriod Selector CSS */ .ofDatePeriodSelector { display: block; margin: 0 auto; position: relative; outline: none; } .ofDatePeriodSelector > input { display: none; } .ofDatePeriodSelector .ofDateRangeSelectorWrap { position: absolute; top: 0; z-index: -1; } /*-------- Date Selector Period CSS END ---------*/ /*------------Switch Control CSS Start----------*/ .ofSwitch { display: inline-flex; height: 30px; } .ofSwitch:focus { outline-color: transparent; } .ofSwitch .ofSwitchArea { position: relative; display: inline-block; width: 38px; min-width: 38px; height: 20px; min-height: 20px; margin: auto 0px; } .ofSwitch.ofDisabled .ofSwitchArea { pointer-events: none; } .ofSwitch .ofSwitchArea .ofSlider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: white; border: 1px solid #525252; -webkit-transition: .4s; transition: .4s; border-radius: 34px; } .ofSwitch.ofDisabled .ofSwitchArea .ofSlider { border: 1px solid #9A9A9A; } .ofSwitch .ofSwitchArea .ofSlider::before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 2px; background-color: #525252; -webkit-transition: .4s; transition: .4s; border-radius: 50%; } .ofSwitch.ofDisabled .ofSwitchArea .ofSlider::before { background-color: #9A9A9A; } .ofSwitch .ofSwitchArea.ofSwitchRight .ofSlider { background-color: var(--of-primary500); border: 1px solid var(--of-primary500); } .ofSwitch.ofDisabled .ofSwitchArea.ofSwitchRight .ofSlider { background-color: #9A9A9A; border: 1px solid #9A9A9A; } .ofSwitch .ofSwitchArea.ofSwitchRight .ofSlider::before { -webkit-transform: translateX(11px); -ms-transform: translateX(11px); transform: translateX(11px); border-radius: 50%; left: 9px; background-color: white; } .ofSwitch .ofSwitchLabel { margin: auto 10px; display: flex; align-content: center; align-items: center; word-break: break-word; } .ofSwitch .ofSwitchLabel.ofSwitchLabelL { margin-left: 0; } .ofSwitch .ofSwitchLabel .ofSwitchLabelLeft { float: right; margin-left: auto; } /*-------------Switch Control CSS End-----------*/ .oFmaskedRange { display: inline-block; vertical-align: bottom; } .oFmaskedRange > label { white-space: nowrap; height: 12px; line-height: 12px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; display: block; margin: 0 0px -15px 15px; } .oFLookupControlWindow .ofSection_header { background: none; border: none; } .oFLookupControlWindow .ofSection_header .ofSectionHeaderText { padding-left: 0; } .oFLookupControlWindow .sectionBody { border: none !important; } .oFLookupControlWindow .sectionBody .gridBorder { border: 1px solid #dcdcdc; } .oFLookupControlWindow .sectionBody input { margin-top: 15px; } .oFLookupControlWindow .sectionBody input.selectPopButton { float: right; } @media only screen and (max-width: 599px) { .oFLookupControlWindow .sectionBody input.selectPopButton, .oFLookupControlWindow .sectionBody input.OfSecondaryButton { min-width: 150px; } } .oFLookupControlWindow .ofImageButton.inputInnerImage { border: 1px solid; border-left-color: currentcolor; border-left-style: solid; border-left-width: 1px; border-left: 0; margin-left: -6px; background-color: #fff; height: 30px; } .oFLookupControlWindow .ofImageButton.inputInnerImage > svg { border: none; } .oFLookupTextInputContainer { border: 1px solid var(--of-grey900); display: block; } .oFLookupTextInputContainer.oFFocused { border: 1px solid var(--of-secondary400); } .ofForm_ctrl_container .ofDisabled .ctrlMain .oFLookupTextInputContainer { color: var(--of-grey900); background: #F8F8F8; border-color: #9A9A9A; } .ofForm_ctrl_container .oFLookupTextInputContainer .ofTextInput, .ofForm_ctrl_container .oFLookupTextInputContainer .ctrlAddElements svg { border: none; } .ofForm_ctrl_container .ofDisabled .oFLookupTextInputContainer .ctrlAddElements { background-color: #F8F8F8; } .ofForm_ctrl_container .ofDisabled .oFLookupTextInputContainer .ofImageButton { visibility: hidden; } .ofDisabled .ctrlAddElementsSelf, .ofDisabled .oFMultiselectTextBoxHolder, .ofDisabled .oFMultiselectTextBoxHolder .oFLookupTextInput { background-color: #F8F8F8; pointer-events: none; } .oFLookupTextInputContainer .oFLookuptexboxwrapper { display: table-cell; width: 100%; } .oFLookupTextInputContainer .oFLookuptexboxwrapper.noPopup { display: block; } .oFLookupTextInputContainer .oFMultiselectTextBoxHolder { padding: 0 5px; font-size: 14px; outline: 0px solid transparent; } .oFLookupTextInputContainer .oFMultiselectTextBoxHolder { padding: 0 5px; font-size: 14px; outline: 0px solid transparent; cursor: text; } .oFLookupTextInputContainer .oFLookupPopUpItem { border: 1px solid #A8A8A8; color: var(--of-grey900); display: inline-flex; align-items: center; padding: 0 3px; border-radius: 3px; font-size: 14px; line-height: 20px; background: var(--of-white500); margin: 3px; max-width: 90% } .oFLookupTextInputContainer .oFLookupPopUpItem .oFLookupPopUpItemText { overflow: hidden; text-overflow: ellipsis; max-width: 95%; white-space: nowrap; display: inline-block; } .oFLookupTextInputContainer .oFLookupPopUpItem.ofActive { border: 1px solid var(--of-primary500); } .oFLookupTextInputContainer .oFLookupPopUpItem:hover { background: var(--of-accent100); cursor: default; } .oFLookupTextInputContainer .oFLookupTextInput { display: inline-block; border: 0; width: auto; outline: none; height: 20px; min-width: 20px; margin-left: 3px; max-width: 100%; } .oFLookupControlWindow .ofGrid div[role=row]:hover > div { background: none; background-color: #ebf8FF; color: var(--of-primary500); } .ofGrayToolbarTitle { font-size: 14px; } .oFLookupTextInputContainer .ofImageButton { display: flex; justify-content: center; cursor: pointer; } /*-----------Grid PAGING CSS----------*/ .ofGrid .ofPaging { display: flex; margin-top: 0px; width: 100%; height: 100%; } .ofGrid .ofPaging .ofNavigation { display: flex; margin: 0 auto; } .ofGrid .ofPaging .ofNavigation .ofImageButton { margin: 0px 10px 0px 10px; user-select: none; } .ofGrid .ofPaging .ofNavigation .ofInput { font-size: 11px; margin: 1px 3px; font-weight: bold; } .ofGrid .ofPaging .ofNavigation .ofInput input[type="number"] { width: 50px; } /* Remove arrows from specifically for grid paging / Chrome, Safari, Edge, Opera */ .ofGrid .ofPaging .ofNavigation input::-webkit-outer-spin-button, .ofGrid .ofPaging .ofNavigation input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /*-----------Grid PAGING CSS----------*/ .ofGrid .ofPaging { display: flex; margin-top: 0px; width: 100%; height: 100%; } .ofGrid .ofPaging .ofNavigation { display: flex; margin: 0 auto; } .ofGrid .ofPaging .ofNavigation .ofImageButton { margin: 0px 10px 0px 10px; user-select: none; } .ofGrid .ofPaging .ofNavigation .ofInput { font-size: 11px; margin: 1px 3px; font-weight: bold; } .ofGrid .ofPaging .ofNavigation .ofInput input[type="number"] { width: 50px; } /* Remove arrows from specifically for grid paging / Chrome, Safari, Edge, Opera */ .ofGrid .ofPaging .ofNavigation input::-webkit-outer-spin-button, .ofGrid .ofPaging .ofNavigation input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /*---------GRID PAGING CSS END--------*/ /*--------NPS SURVEY CSS-------*/ .ofNpsSurvey { } .ofNpsSurvey .ofValidation { padding-top: 5px; display: flex; width: 100%; } .ofNpsSurvey .ofValidation.ofError { color: var(--of-red400); } .ofNpsSurvey .ofValidation.ofError .ofErrorIcon { display: inline-block; } .ofNpsSurvey .ofValidation .ofContainer { margin-right: auto; display: flex; } .ofNpsSurvey .ofValidation .ofContainer .ofMessage { padding-left: 5px; margin: auto 0px; font-size: 14px; } .ofNpsSurvey .ofValidation .ofIcon { padding: 0px; } .ofNpsSurvey .ofIcon.ofLarge { width: 25px; height: 25px; } .ofNpsSurvey .ofIcon, .ofIconNoHover { display: inline-block; line-height: 1; overflow: hidden; border: 1px solid transparent; } . ofNpsSurvey .ofValidation.ofError { color: var(--of-red400); } .ofNpsSurvey .ofValidation.ofError .ofErrorIcon .ofIcon { fill: var(--of-red400); } .ofNpsSurvey .ofHeader { } .ofNpsSurvey .ofHeader > div { font-weight: 500; font-size: 22px; color: var(--of-grey900); } .ofNpsSurvey .ofTitle { font-size: 24px; font-weight: 500; padding-bottom: 10px; } .ofNpsSurvey .ofProgress { height: 3px; width: 100%; background: var(--of-grey200); } .ofNpsSurvey .ofProgress .ofRemaining { background: var(--of-primary300); width: 50%; } .ofNpsSurvey .ofProgress .ofComplete { width: 50%; } .ofNpsSurvey .ofContent { display: flex; flex-direction: column; padding-top: 0px !important; } .ofNpsSurvey .ofContent .ofStatement { margin-bottom: 25px; margin-top: 15px; font-size: 13px; } .margin40 { margin-bottom: 40px !important } .ofNpsSurvey .ofContent .ofStatement .ofNotice { color: var(--of-grey900); font-size: 10px; } .ofNpsSurvey .ofContent .ofQuestion { margin-top: 40px; margin-bottom: 10px; font-size: 13px; } .ofNpsSurvey .ofContent .ofRating { display: flex; } .ofNpsSurvey .ofContent .ofRating .ofScale { display: flex; margin: auto; width: 100%; } .ofNpsSurvey .ofContent .ofRating .ofScale .ofOption { margin-right: 5px; height: 30px; width: 9%; background: #CCCCCC; display: flex; font-size: 13px; color: black; cursor: pointer; } .ofNpsSurvey .ofContent .ofRating .ofScale .ofOption.ofActive { background: var(--of-primary500); color: white; } .ofNpsSurvey .ofContent .ofRating .ofScale .ofOption span { margin: auto; } .ofNpsSurvey .ofContent .ofRating .ofScale .ofOption:last-child { margin-right: 0px; } .ofNpsSurvey .ofLikeliness { width: 100%; height: 20px; font-size: 11px; color: gray; } .ofNpsSurvey .ofComment { font-size: 14px; } .ofNpsSurvey .ofSubmit { margin-top: auto; margin-left: auto; margin-bottom: 15px; } .ofNpsSurvey .ofProgress { display: flex; } .ofNpsSurvey .ofImage { display: block; margin-left: auto; margin-right: auto; width: 40%; } .ofNpsSurvey .ofProgress .ofProgBar1, .ofNpsSurvey .ofProgress .ofProgBar2 { height: 100%; margin: auto; text-align: center; color: #9a9a9a; } .ofNpsSurvey .ofProgress .ofProgBar1.ofActive { color: var(--of-accent400); } .ofNpsSurvey .ofProgress .ofProgBar2.ofActive { color: var(--of-accent400); } .ofNpsSurvey .ofThanks { margin-top: 10px; } .ofNpsSurvey .ofThanks .ofParagraph { padding: 6px 0px 10px 0px; font-size: 13px; } .ofWindow .oFChildForm { margin-left: -15px; margin-right: -15px; } .oFChildForm .ofForm_ctrl_container > .ctrlMain > div > input[type=button] { height: 30px; } .ofWindow .ofPopupChildbuttons { padding-right: 20px; } .of_error { background-color: #e27025; color: white; } .ofMain_contentHeader > .ofContainer > .ofHeader .ofAdditionalTitle { font-size: 16px; } .oFChildHeaderSpan span { vertical-align: top; display: inline-block; } .ofAdditionalTitle { padding-left: 20px; } .ofAdditionalTitle span { vertical-align: middle; display: inline-block; } .oFChildSpan { text-overflow: ellipsis; max-width: 150px; display: inline-block; overflow: hidden; margin-right: 15px; font-weight: 500; } .ofRadioButtonGroupVertical { display: block; border: 1px solid transparent; } .ofRadioButtonGroupHorizontal { border: 1px solid transparent; } /*--------END OF NPS SURVEY CSS-------*/ /*------------Chart Control CSS Start----------*/ .OfChartControl { padding: 15px; margin: 0; } .OfLinkContainer { border: 1px solid transparent; } .jqx-listbox.jqx-popup { z-index: 1000000 !important; } /*------------End OF Chart Control CSS----------*/ /*------------Page Filter Calendar Control CSS Start----------*/ .OfOpenButtonPanel_CalendarContent { display: block; top: 50px; position: absolute; width: 200px; height: 205px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } /*------------End OF Page Filter Calendar Control CSS----------*/ /*------------Card List Control CSS Start----------*/ .ofCardList { min-width: 100%; height: 100%; display: flex; overflow-x: auto; } .ofCardList .ofCardListContainer { display: flex; flex-wrap: nowrap; } .ofCardList .ofCardListContainer .ofCard { min-width: 260px; height: 70px; border-radius: 1px; margin: 3px; box-shadow: rgba( 0, 0, 0, 0.3 ) 0px 0px 1px 1px; display: flex; flex-flow: column; } .ofCardList .ofCardListContainer .ofCard:hover { background-color: #ebf8ff; } .ofCardList .ofCardListContainer .ofCard .ofCardHeader { display: flex; flex-wrap: nowrap; align-items: center; margin: 1px; } .ofCardList .ofCardListContainer .ofCard .ofCardHeader .ofIcon.ofCardHeaderDropIcon { width: 13px; height: 17px; } .ofCardList .ofCardListContainer .ofCard .ofCardBody { display: flex; flex-wrap: nowrap; justify-content: space-between; margin: 1px; } .ofCardList .ofCardListContainer .ofCard .ofCardBody .ofCardColumn { margin-left: 3px; margin-right: 3px; } /*------------End OF Card List Control CSS----------*/ /* Legal and server footer */ .ofLoginFooter { font-size: 10px; position: relative; bottom: 0px; width: 100%; text-align: center; margin-bottom: 15px; } .ofLoginServerInfo { padding-top: 10px; } /* END of footer */ /* Login router and IDS */ .ofLoginPage > .content { background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; width: 420px; position: fixed; /*left: 50%;*/ margin-left: -210px; /*half width negative margin with 50% left gives proper screen centering*/ align-items: center; } .ofLoginPage .content { text-align: center; padding: 10px 0; margin: auto; width: 300px; position: relative; font-family: var(--of-fontfamily); font-style: normal; font-size: 12px; } .ofLoginPage .mobileContent { text-align: center; padding: 10px 0; margin: auto; width: 600px; position: relative; font-family: var(--of-fontfamily); font-style: normal; font-size: 12px; } .ofLoginPage { overflow: auto; } .ofLoginPage .ofLoginLink { display: inline-block; padding: 10px 0; } .ofLoginPage .ofForm_ctrl_container { margin: 0 15px; padding: 10px 0; position: relative; } .ofLoginPage .ofCaptchaSection { padding: 10px 0; } .ofLoginPage .content .ofLoginPageTitle { font-size: 14px; } .ofLoginPage .ofLoginLinks { font-size: 10px; } .ofLoginPage .help { padding-left: 20px; } .ofLoginPage .legal { padding-right: 20px; } .ofLoginLinks { width: 100%; padding-top: 10px; } .ofLoginPage .content .button_area { margin: 13px 0; } .ofLoginPage .content .button_area input:first-child { margin-right: 10px; } .ofLoginPage .content .button_area input:not(:first-child) { margin-left: 10px; } /* END OF Login Router and IDS */ #oFRenderer_clearSearchButton, #preview_oFRenderer_clearSearchButton { float: right; } .ofItalic { font-style: italic !important; } body .borderBoxImportant { box-sizing: border-box !important; } body .oFFieldValidationError { border-color: #e72025; } .ofWizard { height: 65%; min-height: 600px; max-height: 675px; width: 50%; min-width: 400px; max-width: 475px; margin: auto; background: var(--of-wizardgrey); padding: 30px; padding-bottom: 10px; position: relative; flex-direction: column; display: flex; border: 1px solid var(--of-wizardgrey); } .ofWizard .ofImage { margin-top: 10px; } .ofWizard .ofImage img { height: 75px; } .ofWizard .ofImage img.ofLoginDescarteslogo { height: 75px; transform: translateX(-14px); } .ofWizard .ofTitle { color: var(--of-primary500); font-size: 32px; margin-top: 20px; font-weight: 300; } .ofWizard .ofTitle.ofLongText { font-size: 28px; } .ofWizard .ofProgressBars { padding: 20px 0 10px 0; display: inline-flex; margin: 0px auto; } .ofWizard .ofProgressBars span { display: block; height: 20px; width: 20px; max-width: 20px; max-height: 20px; border-radius: 50%; margin-right: 20px; flex-grow: 1; } .ofWizard .ofValidation { display: flex; width: 100%; height: 32px; min-height: 32px; margin-top: 10px; } .ofWizard .ofValidation.ofHidden { visibility: hidden; } .ofWizard .ofValidation span:not(.ofMessage) { display: none; } .ofWizard .ofValidation .ofIcon { padding: 0px; } .ofWizard .ofValidation.ofError { color: var(--of-red400); } .ofWizard .ofValidation.ofError .ofErrorIcon { display: inline-block; } .ofWizard .ofValidation.ofError .ofErrorIcon .ofIcon { fill: var(--of-red400); } .ofWizard .ofValidation.ofWarning { color: var(--of-gold400); } .ofWizard .ofValidation.ofWarning .ofWarningIcon { display: inline-block; } .ofWizard .ofValidation.ofWarning .ofWarningIcon .ofIcon { fill: var(--of-gold400); } .ofWizard .ofValidation.ofNeutral { color: var(--of-primary500); } .ofWizard .ofValidation.ofNeutral .ofNeutralIcon { display: inline-block; } .ofWizard .ofValidation.ofNeutral .ofNeutralIcon .ofIcon { fill: var(--of-primary500); } .ofWizard .ofValidation.ofSuccess { color: var(--of-green300); } .ofWizard .ofValidation.ofSuccess .ofSuccessIcon { display: inline-block; } .ofWizard .ofValidation.ofSuccess .ofSuccessIcon .ofIcon { fill: var(--of-green300); } .ofWizard .ofValidation .ofContainer { margin-right: auto; display: flex; } .ofWizard .ofValidation .ofContainer .ofMessage { padding-left: 5px; margin: auto 0px; font-size: 15px; } .ofWizard .ofContent { margin: 7px 0px auto 0px; } .ofWizard .ofInfo { margin-top: auto; display: flex; } .ofWizard .ofInfo .ofContainer { margin: auto 0px; } .ofWizard .ofInfo .ofContainer .ofLink { font-size: 12px; margin-bottom: 5px; } .ofWizard .ofInfo .ofContainer .ofCopyright { font-size: 9px; color: #565656; margin-bottom: 4px; } .ofWizard .ofInfo .ofContainer .ofServerInfo { font-size: 9px; color: #565656; } .ofWizard .ofInfo .ofImage { margin: auto 0px auto auto; } .ofWizard .ofInfo .ofImage img { height: 35px; } .ofFiledragging { box-shadow: inset 0 0 3px black; } body .oFDroppable { border: 2px solid rgb(0, 125, 192); box-sizing: border-box; } .ofTooltipOnRight { float: right; border: 2px solid transparent; } .ofTooltipOnRight div.help > svg { margin: auto; } .ofControlsGroup .ctrlLabel.ofControlTitle { margin-top: 10px; font-size: 12px; align-items: center; justify-content: start; } .ofControlsGroup .ctrlLabel.ofControlTitle svg.required { margin-top: 0px; align-self: start; } .ofControlsGroup .ofControlsContent { display: inline-flex; padding: 0px; margin-top: 2px; } .ofControlsGroup .ofControlsContent.ofControlsGroupVertical { display: grid; margin-top: 0; } .ofControlsGroup .ofControlsContent.ofControlsGroupVertical > .ofForm_ctrl_container { margin-left: 5px; } .ofControlsGroup .ofControlsContent.ofControlsGroupHorizontal > .ofForm_ctrl_container:first-child { margin-left: 0; } .ofControlsGroup .ofControlsContent > div { margin-right: 15px; } .ofControlsGroupContent { display: table-cell; } .ctrlHeader { display: table-cell; } .ofSection .ofAdvancedSearchLink { cursor: pointer; line-height: 35px; text-decoration: underline; color: var(--of-secondary400); } .ofSection .ofAdvancedSearchLink:hover { color: var(--of-secondary500); } .ofSection.ofBorderlessSection > * { border: none !important; } /*-----------Welcome Header START-----------*/ .ofWelcomeHeader, .ofWelcomeHeader .ofSlideshow { max-height: 237px; } .ofWelcomeHeader .ofSlideshow .ofImages { max-height: 235px; } .ofWelcomeHeader { width: calc(100%); height: 235px; border: 0px 0px 1px 1px solid var(--of-grey300); display: flex; flex-flow: row nowrap; background-color: var(--of-white500); } .ofWelcomeHeader > .ofProfile { height: 100%; display: flex; align-items: center; } .ofWelcomeHeader > .ofAdvertContainer { margin: 0; height: 100% } .ofWelcomeHeader .ofImage, .ofWelcomeHeader .ofText { font-size: 3.5em; font-weight: lighter; } .ofWelcomeHeader .ofImage { width: 135px; height: 135px; border-radius: 50%; background: rgb(0,125, 192); color: #fff; text-align: center; line-height: 135px; margin: 20px 0; flex: 0 0 auto; } .ofWelcomeHeader .ofProfile .ofProfileContainer { display: flex; align-items: center; flex-direction: row; padding-left: 30px; width: 100%; } .ofWelcomeHeader .ofText { text-align: center; padding-left: 10px; } /*-----------Welcome Header END-----------*/ /*-----------Slideshow Control START-----------*/ .ofSlideshow, .ofSlideshow * { box-sizing: border-box } .ofSlideshow .ofImages > .ofSlide { display: none; } .ofSlideshow .ofImages img { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ofSlideshow { position: relative; margin: auto; overflow: hidden; height: 100%; } .ofSlideshow > .ofPreviousSlide, .ofSlideshow > .ofNextSlide { cursor: pointer; position: absolute; top: 50%; margin-top: -25px; width: auto; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } .ofSlideshow > .ofNextSlide { right: 0; border-radius: 3px 0 0 3px; } .ofSlideshow > .ofPreviousSlide:hover, .ofSlideshow > .ofNextSlide:hover { background-color: var(--of-grey900); } .ofAnimationFade { -webkit-animation-name: ofAnimationFade; -webkit-animation-duration: 1.5s; animation-name: ofAnimationFade; animation-duration: 1.5s; } @-webkit-keyframes ofAnimationFade { from { opacity: .4 } to { opacity: 1 } } @keyframes ofAnimationFade { from { opacity: .4 } to { opacity: 1 } } .ofSlideshow .ofImages .ofSlide .ofAdContent { position: absolute; top: 0%; left: 0%; height: 100%; width: 100%; display: flex; flex-flow: column nowrap; align-items: flex-start; justify-content: center; color: white; padding: 0 50px; } .ofSlideshow .ofImages .ofSlide .ofAdContent .ofInfoText { font-weight: bold; margin-right: auto; letter-spacing: 0.3em; } .ofSlideshow .ofImages .ofSlide .ofAdContent .ofTitle, .ofSlideshow .ofImages .ofSlide .ofAdContent .ofDescription { font-weight: lighter; } .ofSlideshow .ofImages .ofSlide .ofAdContent .ofTitle { font-size: 1.5em; } /*-----------Slideshow Control END-----------*/ .ofFloatingSection { display: inline-block; vertical-align: top; box-sizing: content-box; } .ofFloatingSection + .ofFloatingSection > * { margin-left: 15px; }