/* Minification failed. Returning unminified contents. (3729,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3730,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3731,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3761,21): run-time error CSS1039: Token not allowed after unary operator: '-bs-font-sans-serif' (3770,14): run-time error CSS1039: Token not allowed after unary operator: '-fo-size-layout' (3785,30): run-time error CSS1046: Expect comma, found '0' (3785,34): run-time error CSS1046: Expect comma, found '/' (3788,14): run-time error CSS1039: Token not allowed after unary operator: '-fo-size-layout' (4014,19): run-time error CSS1039: Token not allowed after unary operator: '-fo-menu-font-size' (4134,18): run-time error CSS1039: Token not allowed after unary operator: '-fo-menu-font-size' (4177,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4218,19): run-time error CSS1039: Token not allowed after unary operator: '-fo-menu-font-size' (4364,46): run-time error CSS1046: Expect comma, found '203' (4364,53): run-time error CSS1046: Expect comma, found ')' (4364,67): run-time error CSS1046: Expect comma, found '224' (4364,74): run-time error CSS1046: Expect comma, found ')' (4364,89): run-time error CSS1046: Expect comma, found '238' (4364,96): run-time error CSS1046: Expect comma, found ')' (4372,46): run-time error CSS1046: Expect comma, found '178' (4372,53): run-time error CSS1046: Expect comma, found ')' (4372,66): run-time error CSS1046: Expect comma, found '109' (4372,73): run-time error CSS1046: Expect comma, found ')' (4372,87): run-time error CSS1046: Expect comma, found '72' (4372,93): run-time error CSS1046: Expect comma, found ')' (4376,45): run-time error CSS1046: Expect comma, found '197' (4376,52): run-time error CSS1046: Expect comma, found ')' (4376,66): run-time error CSS1046: Expect comma, found '124' (4376,73): run-time error CSS1046: Expect comma, found ')' (4376,88): run-time error CSS1046: Expect comma, found '78' (4376,94): run-time error CSS1046: Expect comma, found ')' (4408,30): run-time error CSS1046: Expect comma, found '0' (4408,34): run-time error CSS1046: Expect comma, found '/' (5959,40): run-time error CSS1046: Expect comma, found '0' (5959,44): run-time error CSS1046: Expect comma, found '/' (6097,40): run-time error CSS1046: Expect comma, found '0' (6097,44): run-time error CSS1046: Expect comma, found '/' (6108,41): run-time error CSS1046: Expect comma, found '0' (6108,45): run-time error CSS1046: Expect comma, found '/' (6246,42): run-time error CSS1046: Expect comma, found '0' (6246,46): run-time error CSS1046: Expect comma, found '/' (6283,41): run-time error CSS1046: Expect comma, found '0' (6283,45): run-time error CSS1046: Expect comma, found '/' (6368,41): run-time error CSS1046: Expect comma, found '0' (6368,45): run-time error CSS1046: Expect comma, found '/' (6478,38): run-time error CSS1046: Expect comma, found '255' (6478,46): run-time error CSS1046: Expect comma, found '/' (7328,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7329,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7330,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7630,26): run-time error CSS1030: Expected identifier, found ',' (7630,45): run-time error CSS1031: Expected selector, found ')' (7630,45): run-time error CSS1025: Expected comma or open brace, found ')' (7648,26): run-time error CSS1030: Expected identifier, found ',' (7648,45): run-time error CSS1031: Expected selector, found ')' (7648,45): run-time error CSS1025: Expected comma or open brace, found ')' (7691,47): run-time error CSS1039: Token not allowed after unary operator: '-bs-danger-rgb' (9111,1): run-time error CSS1030: Expected identifier, found ' ' (9111,1): run-time error CSS1019: Unexpected token, found ' ' (9544,27): run-time error CSS1039: Token not allowed after unary operator: '-titleColor' (11834,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (11956,1): run-time error CSS1019: Unexpected token, found '@keyframes' (11957,7): run-time error CSS1035: Expected colon, found '{' (12197,30): run-time error CSS1046: Expect comma, found '0' (12197,34): run-time error CSS1046: Expect comma, found '/' (12435,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12436,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12947,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12948,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12949,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12950,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12951,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12952,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (12963,27): run-time error CSS1039: Token not allowed after unary operator: '-bgNavLinkColor' (12964,16): run-time error CSS1039: Token not allowed after unary operator: '-navLinkColor' (12969,28): run-time error CSS1039: Token not allowed after unary operator: '-bgNavLinkHoverColor' (12970,17): run-time error CSS1039: Token not allowed after unary operator: '-navLinkHoverColor' (13026,25): run-time error CSS1039: Token not allowed after unary operator: '-bs-secondary-bg' (13334,1): run-time error CSS1019: Unexpected token, found '@keyframes' (13335,7): run-time error CSS1035: Expected colon, found '{' (13490,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13491,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13492,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13525,18): run-time error CSS1039: Token not allowed after unary operator: '-fo-body-font-size' (13533,19): run-time error CSS1039: Token not allowed after unary operator: '-fo-body-font-size' (13556,25): run-time error CSS1039: Token not allowed after unary operator: '-headBgColor' (13628,15): run-time error CSS1039: Token not allowed after unary operator: '-navLinkColor' (13629,19): run-time error CSS1039: Token not allowed after unary operator: '-fo-menu-user-font-size' (13638,15): run-time error CSS1039: Token not allowed after unary operator: '-navLinkHoverColor' (13639,26): run-time error CSS1039: Token not allowed after unary operator: '-bgNavLinkHoverColor' (13645,15): run-time error CSS1039: Token not allowed after unary operator: '-navLinkColor' (13646,16): run-time error CSS1039: Token not allowed after unary operator: '-brightness' (13655,27): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (13676,28): run-time error CSS1039: Token not allowed after unary operator: '-navLinkHoverColor' (13677,17): run-time error CSS1039: Token not allowed after unary operator: '-navLinkColor' (13686,28): run-time error CSS1039: Token not allowed after unary operator: '-bgNavLinkHoverColor' (13687,17): run-time error CSS1039: Token not allowed after unary operator: '-navLinkHoverColor' (13698,25): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (13699,25): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (13737,25): run-time error CSS1039: Token not allowed after unary operator: '-navbgColor' (13778,25): run-time error CSS1039: Token not allowed after unary operator: '-headBgColor' (13783,34): run-time error CSS1046: Expect comma, found '0' (13783,38): run-time error CSS1046: Expect comma, found '/' (13784,32): run-time error CSS1039: Token not allowed after unary operator: '-headBrColor' (13847,14): run-time error CSS1039: Token not allowed after unary operator: '-navLinkColor' (13848,18): run-time error CSS1039: Token not allowed after unary operator: '-fo-menu-user-font-size' (13876,14): run-time error CSS1039: Token not allowed after unary operator: '-navLinkHoverColor' (13877,25): run-time error CSS1039: Token not allowed after unary operator: '-bgNavLinkHoverColor' (13883,25): run-time error CSS1039: Token not allowed after unary operator: '-bgNavLinkHoverColor' (13922,26): run-time error CSS1039: Token not allowed after unary operator: '-bgNavLinkHoverColor' (13937,31): run-time error CSS1039: Token not allowed after unary operator: '-navLinkColor' (13946,25): run-time error CSS1039: Token not allowed after unary operator: '-bgColor' (13950,25): run-time error CSS1039: Token not allowed after unary operator: '-selColor' (13954,25): run-time error CSS1039: Token not allowed after unary operator: '-selColor' (13959,26): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (13971,26): run-time error CSS1039: Token not allowed after unary operator: '-bgNavLinkHoverColor' (13973,15): run-time error CSS1039: Token not allowed after unary operator: '-navLinkHoverColor' (13983,25): run-time error CSS1039: Token not allowed after unary operator: '-bgNavLinkColor' (13984,14): run-time error CSS1039: Token not allowed after unary operator: '-navLinkColor' (13991,25): run-time error CSS1039: Token not allowed after unary operator: '-bgNavLinkHoverColor' (13993,14): run-time error CSS1039: Token not allowed after unary operator: '-navLinkHoverColor' (14004,25): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (14005,25): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (14040,25): run-time error CSS1039: Token not allowed after unary operator: '-navbgColor' (14096,18): run-time error CSS1039: Token not allowed after unary operator: '-fo-menu-font-size' (14112,18): run-time error CSS1039: Token not allowed after unary operator: '-fo-menu-font-size' (14127,14): run-time error CSS1039: Token not allowed after unary operator: '-navFormColor' (14128,25): run-time error CSS1039: Token not allowed after unary operator: '-navFormBgColor' (14132,14): run-time error CSS1039: Token not allowed after unary operator: '-navFormCurrentColor' (14133,25): run-time error CSS1039: Token not allowed after unary operator: '-navFormBgCurrentColor' (14149,25): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (14156,25): run-time error CSS1039: Token not allowed after unary operator: '-selColor' (14255,15): run-time error CSS1039: Token not allowed after unary operator: '-navbgRevColor' (14324,22): run-time error CSS1039: Token not allowed after unary operator: '-fo-buttons-font-size' (14494,25): run-time error CSS1039: Token not allowed after unary operator: '-bgColor' (14516,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColor' (14524,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColor2' (14529,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColor3' (14535,25): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (14536,21): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (14554,25): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (14555,21): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (14593,25): run-time error CSS1039: Token not allowed after unary operator: '-headBgColor' (14598,26): run-time error CSS1039: Token not allowed after unary operator: '-visitBgColor' (14677,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColor' (14695,15): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (14696,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColor' (14714,25): run-time error CSS1039: Token not allowed after unary operator: '-headBgColor' (14723,34): run-time error CSS1046: Expect comma, found '0' (14723,38): run-time error CSS1046: Expect comma, found '/' (14724,32): run-time error CSS1039: Token not allowed after unary operator: '-headBrColor' (14743,32): run-time error CSS1039: Token not allowed after unary operator: '-headBgColor' (14744,33): run-time error CSS1039: Token not allowed after unary operator: '-headBgColor' (14755,29): run-time error CSS1039: Token not allowed after unary operator: '-visitBgColor2' (14758,25): run-time error CSS1039: Token not allowed after unary operator: '-bgColor' (14909,18): run-time error CSS1039: Token not allowed after unary operator: '-fo-body-font-size' (14916,25): run-time error CSS1039: Token not allowed after unary operator: '-inputBgColor' (15026,14): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (15292,14): run-time error CSS1039: Token not allowed after unary operator: '-titleColor' (15340,32): run-time error CSS1039: Token not allowed after unary operator: '-titleColor' (15341,14): run-time error CSS1039: Token not allowed after unary operator: '-titleColor' (15371,26): run-time error CSS1039: Token not allowed after unary operator: '-titleColor' (15392,18): run-time error CSS1039: Token not allowed after unary operator: '-fo-body-font-size' (15414,18): run-time error CSS1039: Token not allowed after unary operator: '-fo-body-font-size' (15429,14): run-time error CSS1039: Token not allowed after unary operator: '-labelColor' (15506,25): run-time error CSS1039: Token not allowed after unary operator: '-inputBgColor' (15507,25): run-time error CSS1039: Token not allowed after unary operator: '-inputBrColor' (15510,18): run-time error CSS1039: Token not allowed after unary operator: '-fo-body-font-size' (15522,22): run-time error CSS1039: Token not allowed after unary operator: '-inputBrHoverColor' (15526,18): run-time error CSS1039: Token not allowed after unary operator: '-fo-body-font-size' (15531,19): run-time error CSS1039: Token not allowed after unary operator: '-fo-body-font-size' (15550,21): run-time error CSS1039: Token not allowed after unary operator: '-inputBrHoverColor' (15558,25): run-time error CSS1039: Token not allowed after unary operator: '-bs-form-control-disabled-bg' (15626,15): run-time error CSS1039: Token not allowed after unary operator: '-inputBrColor' (15647,25): run-time error CSS1039: Token not allowed after unary operator: '-inputBrColor' (15661,25): run-time error CSS1039: Token not allowed after unary operator: '-inputBrHoverColor' (15666,25): run-time error CSS1039: Token not allowed after unary operator: '-inputBrHoverColor' (15670,14): run-time error CSS1039: Token not allowed after unary operator: '-radioBrColor' (15680,25): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (15681,25): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (15698,25): run-time error CSS1039: Token not allowed after unary operator: '-selColor' (15707,21): run-time error CSS1039: Token not allowed after unary operator: '-inputBrHoverColor' (15717,14): run-time error CSS1039: Token not allowed after unary operator: '-inputBrColor' (15741,25): run-time error CSS1039: Token not allowed after unary operator: '-radioBrColor' (15742,19): run-time error CSS1039: Token not allowed after unary operator: '-radioBgColor' (15764,21): run-time error CSS1039: Token not allowed after unary operator: '-radioBrHoverColor' (15765,40): run-time error CSS1046: Expect comma, found '0' (15765,44): run-time error CSS1046: Expect comma, found '/' (15771,21): run-time error CSS1039: Token not allowed after unary operator: '-radioBrColor' (15772,40): run-time error CSS1046: Expect comma, found '0' (15772,44): run-time error CSS1046: Expect comma, found '/' (15781,25): run-time error CSS1039: Token not allowed after unary operator: '-radioBrColor' (15831,25): run-time error CSS1039: Token not allowed after unary operator: '-radioBrColor' (15832,21): run-time error CSS1039: Token not allowed after unary operator: '-radioBrColor' (15838,25): run-time error CSS1039: Token not allowed after unary operator: '-radioBrColor' (15839,19): run-time error CSS1039: Token not allowed after unary operator: '-radioBgColor' (15859,22): run-time error CSS1039: Token not allowed after unary operator: '-radioBrHoverColor' (15860,41): run-time error CSS1046: Expect comma, found '0' (15860,45): run-time error CSS1046: Expect comma, found '/' (15866,22): run-time error CSS1039: Token not allowed after unary operator: '-radioBrColor' (15867,41): run-time error CSS1046: Expect comma, found '0' (15867,45): run-time error CSS1046: Expect comma, found '/' (15872,26): run-time error CSS1039: Token not allowed after unary operator: '-radioBrColor' (15906,22): run-time error CSS1039: Token not allowed after unary operator: '-radioBrColor' (15907,26): run-time error CSS1039: Token not allowed after unary operator: '-radioBrColor' (15988,25): run-time error CSS1039: Token not allowed after unary operator: '-inputBrColor' (15989,25): run-time error CSS1039: Token not allowed after unary operator: '-bgColor' (15990,14): run-time error CSS1039: Token not allowed after unary operator: '-inputBrColor' (15999,25): run-time error CSS1039: Token not allowed after unary operator: '-inputBrColor' (16010,22): run-time error CSS1039: Token not allowed after unary operator: '-inputBrHoverColor' (16011,15): run-time error CSS1039: Token not allowed after unary operator: '-inputBrHoverColor' (16022,21): run-time error CSS1039: Token not allowed after unary operator: '-inputBrHoverColor' (16023,14): run-time error CSS1039: Token not allowed after unary operator: '-inputBrHoverColor' (16045,20): run-time error CSS1039: Token not allowed after unary operator: '-bgDataTime' (16051,26): run-time error CSS1039: Token not allowed after unary operator: '-bgDataTime' (16073,25): run-time error CSS1039: Token not allowed after unary operator: '-inputBrColor' (16106,14): run-time error CSS1039: Token not allowed after unary operator: '-helpBlockColor' (16358,26): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (16389,20): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (16392,37): run-time error CSS1046: Expect comma, found '0' (16392,41): run-time error CSS1046: Expect comma, found '/' (16396,43): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (16401,20): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (16621,42): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor10' (16621,69): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor10' (16621,101): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor20' (16621,129): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor20' (16621,163): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor30' (16621,191): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor30' (16621,224): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor40' (16621,252): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor40' (16621,285): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor50' (16621,313): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor50' (16621,346): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor60' (16621,374): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor60' (16621,407): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor70' (16621,435): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor70' (16621,468): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor80' (16621,496): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor80' (16621,529): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor90' (16621,557): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor90' (16621,590): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor100' (16621,619): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor100' (16629,100): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor10' (16629,131): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor10' (16629,162): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor20' (16629,190): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor20' (16629,221): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor30' (16629,252): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor30' (16629,283): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor40' (16629,314): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor40' (16629,345): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor50' (16629,376): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor50' (16629,407): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor60' (16629,438): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor60' (16629,469): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor70' (16629,500): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor70' (16629,531): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor80' (16629,562): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor80' (16629,593): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor90' (16629,624): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor90' (16629,655): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor100' (16629,687): run-time error CSS1039: Token not allowed after unary operator: '-gradientColor100' (16720,25): run-time error CSS1039: Token not allowed after unary operator: '-visitBgColor' (16807,15): run-time error CSS1039: Token not allowed after unary operator: '-radioBrColor' (16824,15): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (16833,15): run-time error CSS1039: Token not allowed after unary operator: '-radioBrColor' (16851,25): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (16852,25): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (16867,26): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (16868,26): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (16891,25): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (16892,25): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (16922,26): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (17836,20): run-time error CSS1039: Token not allowed after unary operator: '-bgColor' (17842,20): run-time error CSS1039: Token not allowed after unary operator: '-bgColor2' (17846,20): run-time error CSS1039: Token not allowed after unary operator: '-bgColor3' (17880,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColor' (18168,34): run-time error CSS1039: Token not allowed after unary operator: '-brCGColor' (18243,26): run-time error CSS1039: Token not allowed after unary operator: '-cgColor25' (18248,26): run-time error CSS1039: Token not allowed after unary operator: '-cgColor40' (18253,26): run-time error CSS1039: Token not allowed after unary operator: '-cgColor55' (18258,26): run-time error CSS1039: Token not allowed after unary operator: '-cgColor70' (18263,26): run-time error CSS1039: Token not allowed after unary operator: '-cgColor85' (18268,26): run-time error CSS1039: Token not allowed after unary operator: '-cgColor100' (18308,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColorCG' (18313,30): run-time error CSS1039: Token not allowed after unary operator: '-brCGColor' (18320,26): run-time error CSS1039: Token not allowed after unary operator: '-bgCGHead' (18321,15): run-time error CSS1039: Token not allowed after unary operator: '-fgCGHead' (18374,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColorCG' (18379,30): run-time error CSS1039: Token not allowed after unary operator: '-brCGColor' (18386,26): run-time error CSS1039: Token not allowed after unary operator: '-bgCGHead' (18387,15): run-time error CSS1039: Token not allowed after unary operator: '-fgCGHead' (18445,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColorCG' (18450,30): run-time error CSS1039: Token not allowed after unary operator: '-brCGColor' (18458,26): run-time error CSS1039: Token not allowed after unary operator: '-bgCGHead' (18459,15): run-time error CSS1039: Token not allowed after unary operator: '-fgCGHead' (18519,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColorCG' (18524,30): run-time error CSS1039: Token not allowed after unary operator: '-brCGColor' (18532,26): run-time error CSS1039: Token not allowed after unary operator: '-bgCGHead' (18533,15): run-time error CSS1039: Token not allowed after unary operator: '-fgCGHead' (18598,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColorCG' (18603,30): run-time error CSS1039: Token not allowed after unary operator: '-brCGColor' (18612,26): run-time error CSS1039: Token not allowed after unary operator: '-bgCGHead' (18613,15): run-time error CSS1039: Token not allowed after unary operator: '-fgCGHead' (18678,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColorCG' (18683,30): run-time error CSS1039: Token not allowed after unary operator: '-brCGColor' (18693,26): run-time error CSS1039: Token not allowed after unary operator: '-bgCGHead' (18694,15): run-time error CSS1039: Token not allowed after unary operator: '-fgCGHead' (18728,20): run-time error CSS1039: Token not allowed after unary operator: '-fo-body-font-size-small' (18772,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColorCG' (18777,30): run-time error CSS1039: Token not allowed after unary operator: '-brCGColor' (18788,26): run-time error CSS1039: Token not allowed after unary operator: '-bgCGHead' (18789,15): run-time error CSS1039: Token not allowed after unary operator: '-fgCGHead' (18806,26): run-time error CSS1039: Token not allowed after unary operator: '-bgCGHead' (18807,15): run-time error CSS1039: Token not allowed after unary operator: '-fgCGHead' (18828,19): run-time error CSS1039: Token not allowed after unary operator: '-fo-body-font-size-small' (18837,31): run-time error CSS1039: Token not allowed after unary operator: '-brCGColor' (18844,31): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (18850,26): run-time error CSS1039: Token not allowed after unary operator: '-cgColor25' (18855,26): run-time error CSS1039: Token not allowed after unary operator: '-cgColor25' (18860,26): run-time error CSS1039: Token not allowed after unary operator: '-cgColor40' (18865,26): run-time error CSS1039: Token not allowed after unary operator: '-cgColor55' (18870,26): run-time error CSS1039: Token not allowed after unary operator: '-cgColor70' (18890,26): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (18916,30): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (18917,31): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (18918,32): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (18919,33): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (18920,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColorCG' (19084,31): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (19098,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColorCG2' (19099,26): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (19114,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColorCG' (19115,26): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (19148,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColorCG2' (19149,26): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (19154,44): run-time error CSS1039: Token not allowed after unary operator: '-cgColor25' (19154,75): run-time error CSS1039: Token not allowed after unary operator: '-cgColor40' (19154,106): run-time error CSS1039: Token not allowed after unary operator: '-cgColor55' (19236,33): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (19309,42): run-time error CSS1039: Token not allowed after unary operator: '-cgColor25' (19309,66): run-time error CSS1039: Token not allowed after unary operator: '-cgColor40' (19324,42): run-time error CSS1039: Token not allowed after unary operator: '-cgColor25' (19324,73): run-time error CSS1039: Token not allowed after unary operator: '-cgColor40' (19324,104): run-time error CSS1039: Token not allowed after unary operator: '-cgColor55' (19328,42): run-time error CSS1039: Token not allowed after unary operator: '-cgColor25' (19328,66): run-time error CSS1039: Token not allowed after unary operator: '-cgColor40' (19328,92): run-time error CSS1039: Token not allowed after unary operator: '-cgColor55' (19328,118): run-time error CSS1039: Token not allowed after unary operator: '-cgColor70' (19407,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColor' (19507,25): run-time error CSS1039: Token not allowed after unary operator: '-bgTableHead' (19541,27): run-time error CSS1039: Token not allowed after unary operator: '-bgColor' (19553,26): run-time error CSS1039: Token not allowed after unary operator: '-bgTableHead' (19567,26): run-time error CSS1039: Token not allowed after unary operator: '-bgTableHead' (19601,26): run-time error CSS1039: Token not allowed after unary operator: '-bgTableHead' (19628,26): run-time error CSS1039: Token not allowed after unary operator: '-bgTableHead' (19657,26): run-time error CSS1039: Token not allowed after unary operator: '-bgTableHead' (19687,26): run-time error CSS1039: Token not allowed after unary operator: '-bgTableHead' (20505,25): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (20517,25): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (20566,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (20567,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (20649,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (20650,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (20664,1): run-time error CSS1019: Unexpected token, found '@-moz-keyframes' (20665,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (20679,1): run-time error CSS1019: Unexpected token, found '@-ms-keyframes' (20680,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (20709,1): run-time error CSS1019: Unexpected token, found '@keyframes' (20710,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (20724,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (20725,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (20740,1): run-time error CSS1019: Unexpected token, found '@-moz-keyframes' (20741,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (20756,1): run-time error CSS1019: Unexpected token, found '@-ms-keyframes' (20757,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (20788,1): run-time error CSS1019: Unexpected token, found '@keyframes' (20789,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (20938,25): run-time error CSS1039: Token not allowed after unary operator: '-borderColor2' (20946,25): run-time error CSS1039: Token not allowed after unary operator: '-bgColor2' (20951,25): run-time error CSS1039: Token not allowed after unary operator: '-bgColor3' (20963,16): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (20982,14): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (20987,30): run-time error CSS1039: Token not allowed after unary operator: '-bgColor2' (20991,29): run-time error CSS1039: Token not allowed after unary operator: '-bgColor2' (20997,26): run-time error CSS1039: Token not allowed after unary operator: '-bgColor2' (21006,34): run-time error CSS1039: Token not allowed after unary operator: '-borderColor3' (21015,25): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (21016,25): run-time error CSS1039: Token not allowed after unary operator: '-resultColor' (21033,16): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (21082,25): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (21219,25): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (21225,32): run-time error CSS1046: Expect comma, found '0' (21225,36): run-time error CSS1046: Expect comma, found '/' (21268,26): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (21273,26): run-time error CSS1039: Token not allowed after unary operator: '-selColor' (21302,15): run-time error CSS1039: Token not allowed after unary operator: '-titleColor' (21377,25): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (21381,31): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (21386,19): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (21391,20): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (21395,19): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (21396,25): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (21402,19): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (21403,25): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (21407,19): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (21411,25): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (21416,26): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (21606,14): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (21624,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21645,25): run-time error CSS1039: Token not allowed after unary operator: '-titleColor' (21646,21): run-time error CSS1039: Token not allowed after unary operator: '-titleColor' (21681,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21682,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21683,18): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-max-width' (21684,20): run-time error CSS1039: Token not allowed after unary operator: '-bs-font-sans-serif' (21685,18): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-font-size' (21690,18): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-header-font-size' (21691,14): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-header-color' (21692,25): run-time error CSS1039: Token not allowed after unary operator: '-bgColor' (21694,22): run-time error CSS1039: Token not allowed after unary operator: '-bs-popover-border-width' (21694,59): run-time error CSS1039: Token not allowed after unary operator: '-pColor' (21698,28): run-time error CSS1039: Token not allowed after unary operator: '-bgColor' (21713,34): run-time error CSS1039: Token not allowed after unary operator: '-cgColor70' (21773,25): run-time error CSS1039: Token not allowed after unary operator: '-bgColor' (21779,25): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (21780,25): run-time error CSS1039: Token not allowed after unary operator: '-resultColor' (21793,25): run-time error CSS1039: Token not allowed after unary operator: '-titleColor' (21794,21): run-time error CSS1039: Token not allowed after unary operator: '-titleColor' (21817,26): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (21818,22): run-time error CSS1039: Token not allowed after unary operator: '-hColor' (21880,25): run-time error CSS1039: Token not allowed after unary operator: '-bgColor3' (21973,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21974,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21975,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21976,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21977,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21978,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21979,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21980,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21982,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21983,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21984,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21985,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21986,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21987,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21989,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21990,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21991,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21992,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21993,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21994,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21995,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21996,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21998,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21999,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22001,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22002,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22004,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22005,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22006,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22007,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22009,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22010,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22011,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22013,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22015,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22016,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22017,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22018,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22020,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22021,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22022,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22023,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22024,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22026,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22028,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22030,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22031,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22032,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22033,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22034,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22035,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22037,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22038,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22039,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22040,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22041,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22042,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22043,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22044,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22045,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22046,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22084,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22085,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22086,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22117,15): run-time error CSS1039: Token not allowed after unary operator: '-navLinkColor' (22155,32): run-time error CSS1039: Token not allowed after unary operator: '-brCGColor' */ /*! nouislider - 11.0.3 - 2018-01-21 14:04:07 */ /* Functional styling; * These styles are required for noUiSlider to function. * You don't need to change these rules to apply your design. */ .noUi-target, .noUi-target * { -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; -ms-touch-action: none; touch-action: none; -ms-user-select: none; -moz-user-select: none; user-select: none; -moz-box-sizing: border-box; box-sizing: border-box; } .noUi-target { position: relative; direction: ltr; } .noUi-base, .noUi-connects { width: 100%; height: 100%; position: relative; z-index: 1; } /* Wrapper for all connect elements. */ .noUi-connects { overflow: hidden; z-index: 0; } .noUi-connect, .noUi-origin { will-change: transform; position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; -webkit-transform-origin: 0 0; transform-origin: 0 0; } /* Offset direction */ html:not([dir="rtl"]) .noUi-horizontal .noUi-origin { left: auto; right: 0; } /* Give origins 0 height/width so they don't interfere with clicking the * connect elements. */ .noUi-vertical .noUi-origin { width: 0; } .noUi-horizontal .noUi-origin { height: 0; } .noUi-handle { position: absolute; } .noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin { -webkit-transition: transform 0.3s; transition: transform 0.3s; } .noUi-state-drag * { cursor: inherit !important; } /* Slider size and handle placement; */ .noUi-horizontal { height: 18px; } .noUi-horizontal .noUi-handle { width: 34px; height: 28px; left: -17px; top: -6px; } .noUi-vertical { width: 18px; } .noUi-vertical .noUi-handle { width: 28px; height: 34px; left: -6px; top: -17px; } html:not([dir="rtl"]) .noUi-horizontal .noUi-handle { right: -17px; left: auto; } /* Styling; * Giving the connect element a border radius causes issues with using transform: scale */ .noUi-target { background: #FAFAFA; border-radius: 4px; border: 1px solid #D3D3D3; box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; } .noUi-connects { border-radius: 3px; } .noUi-connect { background: #3FB8AF; } /* Handles and cursors; */ .noUi-draggable { cursor: ew-resize; } .noUi-vertical .noUi-draggable { cursor: ns-resize; } .noUi-handle { border: 1px solid #D9D9D9; border-radius: 3px; background: #FFF; cursor: default; box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; } .noUi-active { box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB; } /* Handle stripes; */ .noUi-handle:before, .noUi-handle:after { content: ""; display: block; position: absolute; height: 14px; width: 1px; background: #E8E7E6; left: 14px; top: 6px; } .noUi-handle:after { left: 17px; } .noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after { width: 14px; height: 1px; left: 6px; top: 14px; } .noUi-vertical .noUi-handle:after { top: 17px; } /* Disabled state; */ [disabled] .noUi-connect { background: #B8B8B8; } [disabled].noUi-target, [disabled].noUi-handle, [disabled] .noUi-handle { cursor: not-allowed; } /* Base; * */ .noUi-pips, .noUi-pips * { -moz-box-sizing: border-box; box-sizing: border-box; } .noUi-pips { position: absolute; color: #999; } /* Values; * */ .noUi-value { position: absolute; white-space: nowrap; text-align: center; } .noUi-value-sub { color: #ccc; font-size: 10px; } /* Markings; * */ .noUi-marker { position: absolute; background: #CCC; } .noUi-marker-sub { background: #AAA; } .noUi-marker-large { background: #AAA; } /* Horizontal layout; * */ .noUi-pips-horizontal { padding: 10px 0; height: 80px; top: 100%; left: 0; width: 100%; } .noUi-value-horizontal { -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); } .noUi-rtl .noUi-value-horizontal { -webkit-transform: translate(50%, 50%); transform: translate(50%, 50%); } .noUi-marker-horizontal.noUi-marker { margin-left: -1px; width: 2px; height: 5px; } .noUi-marker-horizontal.noUi-marker-sub { height: 10px; } .noUi-marker-horizontal.noUi-marker-large { height: 15px; } /* Vertical layout; * */ .noUi-pips-vertical { padding: 0 10px; height: 100%; top: 0; left: 100%; } .noUi-value-vertical { -webkit-transform: translate(0, -50%); transform: translate(0, -50%, 0); padding-left: 25px; } .noUi-rtl .noUi-value-vertical { -webkit-transform: translate(0, 50%); transform: translate(0, 50%); } .noUi-marker-vertical.noUi-marker { width: 5px; height: 2px; margin-top: -1px; } .noUi-marker-vertical.noUi-marker-sub { width: 10px; } .noUi-marker-vertical.noUi-marker-large { width: 15px; } .noUi-tooltip { display: block; position: absolute; border: 1px solid #D9D9D9; border-radius: 3px; background: #fff; color: #000; padding: 5px; text-align: center; white-space: nowrap; } .noUi-horizontal .noUi-tooltip { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%; bottom: 120%; } .noUi-vertical .noUi-tooltip { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); top: 50%; right: 120%; } /* Base; * */ .noUi-pips, .noUi-pips * { -moz-box-sizing: border-box; box-sizing: border-box; } .noUi-pips { position: absolute; color: #999; } /* Values; * */ .noUi-value { position: absolute; text-align: center; } .noUi-value-sub { color: #ccc; font-size: 10px; } /* Markings; * */ .noUi-marker { position: absolute; background: #CCC; } .noUi-marker-sub { background: #AAA; } .noUi-marker-large { background: #AAA; } /* Horizontal layout; * */ .noUi-pips-horizontal { padding: 10px 0; height: 80px; top: 100%; left: 0; width: 100%; } .noUi-value-horizontal { -webkit-transform: translate3d(-50%,50%,0); transform: translate3d(-50%,50%,0); margin-top: 5px; } .noUi-marker-horizontal.noUi-marker { margin-left: -1px; width: 2px; height: 5px; } .noUi-marker-horizontal.noUi-marker-sub { height: 10px; } .noUi-marker-horizontal.noUi-marker-large { height: 15px; } /* Vertical layout; * */ .noUi-pips-vertical { padding: 0 10px; height: 100%; top: 0; left: 100%; } .noUi-value-vertical { -webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0); padding-left: 25px; } .noUi-marker-vertical.noUi-marker { width: 5px; height: 2px; margin-top: -1px; } .noUi-marker-vertical.noUi-marker-sub { width: 10px; } .noUi-marker-vertical.noUi-marker-large { width: 15px; } .noUi-tooltip { display: block; position: absolute; border: 1px solid #D9D9D9; border-radius: 3px; background: #fff; color: #000; padding: 5px; text-align: center; } .noUi-horizontal .noUi-tooltip { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%; bottom: 120%; } .noUi-vertical .noUi-tooltip { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); top: 50%; right: 120%; } /*! * Bootstrap Datetime Picker v4.17.49 * Copyright 2015-2020 Jonathan Peterson * Licensed under MIT (https://github.com/Eonasdan/bootstrap-datetimepicker/blob/master/LICENSE) */ .bootstrap-datetimepicker-widget { list-style: none; } .bootstrap-datetimepicker-widget.dropdown-menu { display: block; margin: 2px 0; padding: 4px; width: 19em; } @media (min-width: 768px) { .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 38em; } } @media (min-width: 992px) { .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 38em; } } @media (min-width: 1200px) { .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs { width: 38em; } } .bootstrap-datetimepicker-widget.dropdown-menu:before, .bootstrap-datetimepicker-widget.dropdown-menu:after { content: ''; display: inline-block; position: absolute; } .bootstrap-datetimepicker-widget.dropdown-menu.bottom:before { border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-bottom-color: rgba(0, 0, 0, 0.2); top: -7px; left: 7px; } .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid white; top: -6px; left: 8px; } .bootstrap-datetimepicker-widget.dropdown-menu.top:before { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #ccc; border-top-color: rgba(0, 0, 0, 0.2); bottom: -7px; left: 6px; } .bootstrap-datetimepicker-widget.dropdown-menu.top:after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid white; bottom: -6px; left: 7px; } .bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before { left: auto; right: 6px; } .bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after { left: auto; right: 7px; } .bootstrap-datetimepicker-widget .list-unstyled { margin: 0; } .bootstrap-datetimepicker-widget a[data-action] { padding: 6px 0; } .bootstrap-datetimepicker-widget a[data-action]:active { box-shadow: none; } .bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second { width: 54px; font-weight: bold; font-size: 1.2em; margin: 0; } .bootstrap-datetimepicker-widget button[data-action] { padding: 6px; } .bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Increment Hours"; } .bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Increment Minutes"; } .bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Decrement Hours"; } .bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Decrement Minutes"; } .bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Show Hours"; } .bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Show Minutes"; } .bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Toggle AM/PM"; } .bootstrap-datetimepicker-widget .btn[data-action="clear"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Clear the picker"; } .bootstrap-datetimepicker-widget .btn[data-action="today"]::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Set the date to today"; } .bootstrap-datetimepicker-widget .picker-switch { text-align: center; } .bootstrap-datetimepicker-widget .picker-switch::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Toggle Date and Time Screens"; } .bootstrap-datetimepicker-widget .picker-switch td { padding: 0; margin: 0; height: auto; width: auto; line-height: inherit; } .bootstrap-datetimepicker-widget .picker-switch td span { line-height: 2.5; height: 2.5em; width: 100%; } .bootstrap-datetimepicker-widget table { width: 100%; margin: 0; } .bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th { text-align: center; border-radius: 4px; } .bootstrap-datetimepicker-widget table th { height: 20px; line-height: 20px; width: 20px; } .bootstrap-datetimepicker-widget table th.picker-switch { width: 145px; } .bootstrap-datetimepicker-widget table th.disabled, .bootstrap-datetimepicker-widget table th.disabled:hover { background: none; color: #777777; cursor: not-allowed; } .bootstrap-datetimepicker-widget table th.prev::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Previous Month"; } .bootstrap-datetimepicker-widget table th.next::after { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; content: "Next Month"; } .bootstrap-datetimepicker-widget table thead tr:first-child th { cursor: pointer; } .bootstrap-datetimepicker-widget table thead tr:first-child th:hover { background: #eeeeee; } .bootstrap-datetimepicker-widget table td { height: 54px; line-height: 54px; width: 54px; } .bootstrap-datetimepicker-widget table td.cw { font-size: 0.8em; height: 20px; line-height: 20px; color: #777777; } .bootstrap-datetimepicker-widget table td.day { height: 20px; line-height: 20px; width: 20px; } .bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td.hour:hover, .bootstrap-datetimepicker-widget table td.minute:hover, .bootstrap-datetimepicker-widget table td.second:hover { background: #eeeeee; cursor: pointer; } .bootstrap-datetimepicker-widget table td.old, .bootstrap-datetimepicker-widget table td.new { color: #777777; } .bootstrap-datetimepicker-widget table td.today { position: relative; } .bootstrap-datetimepicker-widget table td.today:before { content: ''; display: inline-block; border: solid transparent; border-width: 0 0 7px 7px; border-bottom-color: #337ab7; border-top-color: rgba(0, 0, 0, 0.2); position: absolute; bottom: 4px; right: 4px; } .bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover { background-color: #337ab7; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .bootstrap-datetimepicker-widget table td.active.today:before { border-bottom-color: #fff; } .bootstrap-datetimepicker-widget table td.disabled, .bootstrap-datetimepicker-widget table td.disabled:hover { background: none; color: #777777; cursor: not-allowed; } .bootstrap-datetimepicker-widget table td span { display: inline-block; width: 54px; height: 54px; line-height: 54px; margin: 2px 1.5px; cursor: pointer; border-radius: 4px; } .bootstrap-datetimepicker-widget table td span:hover { background: #eeeeee; } .bootstrap-datetimepicker-widget table td span.active { background-color: #337ab7; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .bootstrap-datetimepicker-widget table td span.old { color: #777777; } .bootstrap-datetimepicker-widget table td span.disabled, .bootstrap-datetimepicker-widget table td span.disabled:hover { background: none; color: #777777; cursor: not-allowed; } .bootstrap-datetimepicker-widget.usetwentyfour td.hour { height: 27px; line-height: 27px; } .bootstrap-datetimepicker-widget.wider { width: 21em; } .bootstrap-datetimepicker-widget .datepicker-decades .decade { line-height: 1.8em !important; } .input-group.date .input-group-addon { cursor: pointer; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } @charset "UTF-8"; /*! Animate.css - http://daneden.me/animate Licensed under the MIT license Copyright (c) 2013 Daniel Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; z-index: 100; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75); } 40% { -webkit-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25); } 60% { -webkit-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes rubberBand { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 30% { -webkit-transform: scaleX(1.25) scaleY(0.75); -ms-transform: scaleX(1.25) scaleY(0.75); transform: scaleX(1.25) scaleY(0.75); } 40% { -webkit-transform: scaleX(0.75) scaleY(1.25); -ms-transform: scaleX(0.75) scaleY(1.25); transform: scaleX(0.75) scaleY(1.25); } 60% { -webkit-transform: scaleX(1.15) scaleY(0.85); -ms-transform: scaleX(1.15) scaleY(0.85); transform: scaleX(1.15) scaleY(0.85); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } } @keyframes shake { 0%, 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; animation-name: tada; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); transform: translateX(0%); } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); transform: scale(.9); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } 100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(40px); -ms-transform: translateX(40px); transform: translateX(40px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); -ms-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); -ms-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); -ms-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); -ms-transform: translateX(-20%) skewX(30deg); transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); -ms-transform: translateX(0%) skewX(-15deg); transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); -ms-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } } @keyframes slideOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0); -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); -ms-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); -ms-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } .multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .input-group{margin:5px}.multiselect-container>li{padding:0}.multiselect-container>li>a.multiselect-all label{font-weight:700}.multiselect-container>li.multiselect-group label{margin:0;padding:3px 20px 3px 20px;height:100%;font-weight:700}.multiselect-container>li.multiselect-group-clickable label{cursor:pointer}.multiselect-container>li>a{padding:0}.multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:400;padding:3px 20px 3px 40px}.multiselect-container>li>a>label.radio,.multiselect-container>li>a>label.checkbox{margin:0}.multiselect-container>li>a>label>input[type=checkbox]{margin-bottom:5px}.btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px}.form-inline .multiselect-container label.checkbox,.form-inline .multiselect-container label.radio{padding:3px 20px 3px 40px}.form-inline .multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0} /*.spinner { margin: auto; width: 70px; text-align: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; height: 0%; z-index: 10000; }*/ .spinner { margin: auto; width: 100%; text-align: center; position: fixed; left: 0; right: 0; top: 0; bottom: 0; height: 100%; z-index: 310000; } .spinner > div { width: 18px; height: 18px; /*background-color: #333;*/ /*background-color: #1ab394;*/ background-color: #CA3738; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; position: relative; top: 50%; } .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } .spinner-opacity { margin: auto; width: 100%; text-align: center; position: fixed; left: 0; right: 0; top: 0; bottom: 0; height: 100%; z-index: 300000; background-color: #ffffff; opacity: 0.3; } .spinner-opacity-white { margin: auto; width: 100%; text-align: center; position: fixed; left: 0; right: 0; top: 0; bottom: 0; height: 100%; z-index: 300000; background-color: #ffffff; opacity: 0; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } } .select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-top:5px;margin-right:10px;padding:1px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #fff 50%, #eee 100%);background-image:-o-linear-gradient(top, #fff 50%, #eee 100%);background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-right:10px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top, #eee 50%, #ccc 100%);background-image:-o-linear-gradient(top, #eee 50%, #ccc 100%);background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top, #fff 0%, #eee 50%);background-image:-o-linear-gradient(top, #fff 0%, #eee 50%);background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top, #eee 50%, #fff 100%);background-image:-o-linear-gradient(top, #eee 50%, #fff 100%);background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{float:right;margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option[role=group]{padding:0}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb} /*========= FORM BUILDER LAYOUT CSS =========== */ /* francisco.mas@swiss4ward.com ==========*/ :root { --bs-font-sans-serif: "Noto Sans", sans-serif; --fo-size-layout: 92%; --fo-menu-font-size: 14px; } /* ================ NOTO SANS ================== */ @font-face { font-family: 'Noto Sans'; src: url('../fonts/notosans-regular.ttf') format('truetype'), url('../fonts/notosans-regular.woff2') format('woff2'), url('../fonts/notosans-regular.woff') format('woff'); font-weight: normal; } @font-face { font-family: 'Noto Sans'; src: url('../fonts/notosans-semibold.ttf') format('truetype'), url('../fonts/notosans-semibold.woff2') format('woff2'), url('../fonts/notosans-semibold.woff') format('woff'); font-weight: 600; } @font-face { font-family: 'Noto Sans'; src: url('../fonts/notosans-bold.ttf') format('truetype'), url('../fonts/notosans-bold.woff2') format('woff2'), url('../fonts/notosans-bold.woff') format('woff'); font-weight: bold; } /*============= Common Layout styles ================= */ /* Hidden horizontal scroll and reset body*/ html, body { height: auto; } /* Reset colors background and typo */ body:not(.public), body.login-logonselectproject-projectstyle { font-family: var(--bs-font-sans-serif); background: #F6F7F8; padding: 0 !important; font-size: 13px; color: #707070; overflow-x: hidden; } /* Resize content all usable space */ #wrapper, .public.login-logonselectproject-projectstyle #wrapper { width: var(--fo-size-layout); margin: 0 auto; max-width: none; } /* =========== Header Bar and Menu Not Public ================== */ .header-bar, .public.login-logonselectproject-projectstyle .header-bar { background-color: #ffffff; border-radius: 4px; padding: 0; height: 85px; margin: 0 auto 0 auto; border-top: 5px solid #f6f7f8; /*border-bottom: 10px solid #f6f7f8;*/ box-shadow: 0 1px 4px rgb(0 0 0 / 8%); /*border: 1px solid;*/ position: fixed; width: var(--fo-size-layout); top: 0; left: 0; right: 0; z-index: 102; } .header-bar .navbar.navbar-static-top, .public.login-logonselectproject-projectstyle .header-bar .navbar.navbar-static-top { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; max-width: none; padding: 5px; height: 80px; border-radius: 5px; } /* =========== Content when Header Fixed ================== */ .header-bar ~ .wrapper.wrapper-content, .public.login-logonselectproject-projectstyle .header-bar ~ .wrapper.wrapper-content { margin-top: 95px; } .header-bar .navbar.navbar-static-top .navbar-header, .public.login-logonselectproject-projectstyle .header-bar .navbar.navbar-static-top .navbar-header { /*border: 1px solid;*/ height: 70px; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; width: 16%; flex: 0 1 16%; max-width: 220px; } /* =========== Header --> brand / Logo ================== */ .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand, .public.login-logonselectproject-projectstyle .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand { /*border: 1px solid;*/ margin: 0 0 0 10px; padding: 0; width: 100%; height: 100%; float: left; max-height: 70px; } .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand .fo-logo { position: relative; width: 100%; height: 100%; max-width: 145px; max-height: 60px; border-radius: 8px; display: flex; justify-content: center; background-color: #CA3738; align-items: center; color: #fff; padding-left: 25px; font-family: Consolas; font-size: 38px; font-style: italic; font-weight: bold; line-height: 20px; text-align: center; } .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand .fo-logo .navbar-brand-star { font-size: 64px; position: absolute; left: 28px; top: 20px; } .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand img { max-width: 100%; padding: 5px 10px 0 0; max-height: 75px; margin: 0 0 0 0; height: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* =========== Header --> Mobile hamburger Icon ================== */ .header-bar .navbar.navbar-static-top .icon-mobile-nav { position: absolute; right: 8px; top: 8px; display: none; } .header-bar .navbar.navbar-static-top .icon-mobile-nav button { color: #CA3738; background-color: transparent; font-size: 20px; border: 0; border-radius: 4px; } .header-bar .navbar.navbar-static-top .icon-mobile-nav button:hover { color: #5a1212; } .header-bar .navbar.navbar-static-top .icon-mobile-nav button .fa-solid.fa-bars { font-size: 26px; } /* =========== Header --> Mobile hamburger Icon only down 1024 ================== */ @media(max-width:1024px) { .header-bar .navbar.navbar-static-top .icon-mobile-nav { display: block; } } /* fo-logo responsive */ @media(max-width:768px) { .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand .fo-logo { padding-left: 26px; font-size: 43px; font-weight: bold; } .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand .fo-logo .navbar-brand-star { font-size: 60px; left: 10px; top: 18px; } } @media(max-width:480px) { .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand .fo-logo { max-height: 46px; padding-left: 16px; font-size: 22px; font-weight: bold; line-height: 20px; } .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand .fo-logo .navbar-brand-star { font-size: 34px; left: 5px; top: 12px; } } /* =========== Header --> Menu Group ================== */ .header-bar .navbar.navbar-static-top .header-menu { max-width: none; flex: 1 0 82%; } /* =========== Header --> Menu Group --> Menu user ================== */ .header-bar .navbar.navbar-static-top .header-menu .nav.navbar-user { display: flex; flex-direction: row; justify-content: flex-end; width: 100%; height: 30px; } .header-bar .navbar.navbar-static-top .header-menu .nav.navbar-nav.navbar-right { /*border: 1px solid;*/ margin: 0; flex-direction: row; justify-content: flex-end; flex-wrap: nowrap; width: 100%; padding: 0; } /* =========== Header --> Menu Group --> Menu colapsing ================== */ .header-bar .navbar.navbar-static-top .header-menu .navbar-collapse.collapse.show, .header-bar .navbar.navbar-static-top .header-menu .navbar-collapse.collapsing { flex-basis: auto; flex-grow: 1; /*border: 1px solid;*/ max-height: 60px; } /* =========== Header --> Menu Group --> Menu mobile ================== */ .header-bar .navbar.navbar-static-top .header-menu .main-menu-mobile { display: none; } /* =========== Header --> Menu Group --> Menu Desktop ================== */ .header-bar .navbar.navbar-static-top .header-menu .main-menu { width: 100%; display: flex; padding-top: 2px; flex-direction: row; height: 30px; margin-top: 3px; flex-wrap: wrap; } /* =========== Header --> Menu Group --> Menu Desktop direction ================== */ .header-bar .navbar.navbar-static-top .header-menu .main-menu .navbar-nav { flex-direction: row; } /* =========== Header --> Menu Group --> Menu Desktop list links ================== */ .header-bar .navbar.navbar-static-top .header-menu .main-menu .nav.navbar-nav.navbar-top-links { display: flex; flex-direction: row; align-items: center; max-width: 100%; padding: 0; flex: 1 0 100%; /*border: 1px solid;*/ } /* ================= Header --> Menu Group --> Navigation nav =============== */ .nav > li { margin: 0 2px; } @media(max-width:1366px) { .nav > li > a { padding: 5px 3px; } } .nav.navbar-right > li { margin: 0 10px; } .nav.navbar-right > li:not(.dropdown) { height: 40px; } .nav > li > a, .nav.navbar-right > li a { font-size: var(--fo-menu-font-size); cursor: pointer; padding: 5px 6px; font-weight: 600; color: #505050; text-decoration: none; } .nav.navbar-right > li a.profile { display: block; padding: 3px 0 3px 0; line-height: 14px; } .profile-center { display: block; font-size: 12px; } .nav.navbar-right > li img { left: 6px; top: 1px; width: 20px; padding: 0; pointer-events: none; position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .nav.navbar-right > li .dropdown-toggle::after { margin-left: 0.1em; } .nav > li:not(.dropdown)::after { content: ''; display: block; width: 0 !important; position: relative; bottom: -2px; height: 3px; background-color: #ca3738; } .nav > li:hover a, .nav > li.active a, .nav > li:focus a, .nav > li:hover .dropdown-toggle::after { color: #ca3738; transition: all 0.4s ease; } .nav > li::after { transition: all 0.4s ease; } .nav > li:hover::after, .nav > li.active::after, .nav > li:focus::after { width: 100% !important; } .nav > li > a.dropdown-toggle { padding: 5px 5px 1px 5px; } /* .nav > li.dropdown { display: flex; flex-direction: column; width: 100px; } .nav > li.dropdown .dropdown-toggle a { width: 100px; } .nav > li.dropdown ul.dropdown-menu { min-width: auto; margin: 4px 0 0 0; padding: 0; --bs-dropdown-border-color: transparent; overflow: hidden; box-shadow: 0 3px 8px rgba(0,0,0,0.1); width: 100px; max-height: 600px; overflow-y: auto; } */ .dropdown-menu::-webkit-scrollbar { width: 8px; border-radius: 4px; } .dropdown-menu::-webkit-scrollbar-track { background-color: #ffffff; } .dropdown-menu::-webkit-scrollbar-thumb { background-color: #bcbcbc; } .dropdown-menu::-webkit-scrollbar-button { background-color: #bcbcbc; } .dropdown-menu::-webkit-scrollbar-button:hover, .dropdown-menu::-webkit-scrollbar-thumb:hover { background-color: #ababab; } .dropdown-menu::-webkit-scrollbar-corner { background-color: black; } /* Language Selector*/ .language-selector .dropdown-toggle { display: flex; align-items: center; justify-content: center; font-size: var(--fo-menu-font-size); font-weight: 600; cursor: pointer; min-width: 100px; } .language-selector .current-language { display: flex; align-items: center; padding: 0 !important; } .language-selector .current-language i { font-size: 15px; } .language-selector .current-language span { padding: 0 6px; } .language-selector a { text-decoration: none; color: #505050; } .language-selector .dropdown-toggle:hover, .language-selector .dropdown-toggle:hover a { color: #ca3738; } .language-selector .dropdown-toggle.show, .language-selector .dropdown-toggle.show a { color: #ca3738; } .language-selector .dropdown-toggle::after { margin-left: 0; } .language-list { min-width: auto; margin: 4px 0 0 0; padding: 0; --bs-dropdown-border-color: transparent; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); width: 100px; max-height: 600px; border: 0; background: white; border-radius: 8px; } .language-list.one-lang li { border-radius: 6px; } .language-list.multi-lang li:first-child { border-radius: 6px 6px 0 0; } .language-list.multi-lang li:last-child { border-radius: 0 0 6px 6px; } .language-list li { width: 100%; text-align: center; transition: background-color 0.4s ease; font-size: 13px; padding: 0; position: relative; } .language-list img { top: 4px; } .language-list li a { display: block; width: 100%; height: 100%; text-decoration: none; color: #505050; margin: 0; font-size: var(--fo-menu-font-size); cursor: pointer; padding: 6px 6px; font-weight: 600; } .language-list li:hover { background-color: #ca3738; transition: background-color 0.4s ease; } .language-list li:hover a { color: #ffffff; transition: color 0.4s ease; } .nav > li.dropdown ul.dropdown-menu li a { color: #505050; } .nav > li.dropdown ul.dropdown-menu li:hover a { color: #ffffff; } /* .nav > li.dropdown ul.dropdown-menu li { width: 100%; text-align: center; transition: all 0.4s ease; font-size: 13px; padding: 0; position: relative; } .nav > li.dropdown ul.dropdown-menu li img { top: 4px; } .nav > li.dropdown ul.dropdown-menu li a { display: block; width: 100%; height: 100%; text-decoration: none; color: #505050; margin: 0; } .nav > li.dropdown ul.dropdown-menu li:hover { background-color: #ca3738; transition: all 0.4s ease; } .nav > li.dropdown ul.dropdown-menu li:hover:first-child { border-radius: 2px 2px 0 0; } .nav > li.dropdown ul.dropdown-menu li:hover:last-child { border-radius: 0 0 2px 2px; } .nav > li.dropdown ul.dropdown-menu li:hover a { color: #ffffff; transition: all 0.4s ease; } */ @media(max-width:768px) { .nav.navbar-right > li { margin: 0 3px; } .nav > li > a, .nav.navbar-right > li a { padding: 5px 2px; } } @media(max-width:480px) { .header-bar .navbar.navbar-static-top .header-menu .nav.navbar-nav.navbar-right { /*border: 1px solid;*/ margin: -18px 0 0 0; flex-wrap: wrap; width: 84%; } .header-bar .navbar.navbar-static-top .header-menu .nav.navbar-nav.navbar-right > li:not(.dropdown) { height: 22px; } .header-bar .navbar.navbar-static-top .header-menu .nav.navbar-nav.navbar-right li.dropdown { min-width: 30%; margin: 0 -2px 0 8px; } .header-bar .navbar.navbar-static-top .header-menu .nav.navbar-nav.navbar-right li.dropdown .language-selector { position: absolute; } .header-bar .navbar.navbar-static-top .header-menu .nav.navbar-nav.navbar-right li.li-profile { min-width: 30%; max-width: 60%; } .header-bar .navbar.navbar-static-top .header-menu .nav.navbar-nav.navbar-right li.li-profile .profile-user { max-width: 100%; text-overflow: ellipsis; display: block; overflow: hidden; white-space: nowrap; } .header-bar .navbar.navbar-static-top .header-menu .nav.navbar-nav.navbar-right li.li-switch-project { margin: 0 10px; } } /* ===================== LOGIN ======================= */ .home-index-projectstyle .header-bar { display: none; } .login { position: fixed; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; z-index: 2; margin: 0; padding: 0; overflow: hidden; } .body-content .login > .row { margin: 0; padding: 0; height: 100%; } .login .login-messages { background: linear-gradient(180deg, rgb(224, 119, 130) 0%, rgb(206, 91, 103) 50%, rgba(192, 65, 78, 1) 100%); padding: 0; position: relative; } body.dermatools .login .login-messages { background: linear-gradient(180deg, rgb(186 203 124) 0%, rgb(211 224 150) 50%, rgb(232 238 215) 100%); } body.crf-one .login .login-messages { background: linear-gradient(205deg, rgba(107, 95, 181, 1) 0%, rgba(247, 139, 98, 1) 100%); } body.localhost .login .login-messages { background: linear-gradient(180deg, rgb(157 178 191) 0%, rgb(82 109 130) 50%, rgb(60 72 107) 100%); } body.tt-gpa .login .login-messages { background: linear-gradient(300deg, rgb(97 197 228) 0%, rgb(149 124 177) 50%, rgb(199 78 150) 100%); } body.pridd .login .login-messages { background: linear-gradient(#3fbfbb, #fefbe0); } .login .login-messages img { position: absolute; top: 0; bottom: 0; margin: auto; left: 0; right: 0; height: 50%; opacity: 0.15; filter: blur(1px) drop-shadow(0 8px 8px black); mask-image: linear-gradient(to bottom, black, rgba(0,0,0,0.4)); -webkit-mask-image: linear-gradient(to bottom, black, rgba(0,0,0,0.4)); pointer-events: none; } .login .deco { font-family: Consolas; position: absolute; color: #3299ab; top: 50%; left: 50%; font-style: italic; font-size: 350px; transform: translate(-57%,-50%); z-index: 1000; text-shadow: 0 0 88px rgb(0 0 0 / 17%); } .login .login-form { background-color: #ffffff; padding: 0; display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center; margin-top: -40px; } .login .login-form .login-logo { position: relative; margin: 0 auto; max-width: 280px; font-family: Consolas; margin-bottom: 5px; } .login .login-form .login-logo img { width: 80%; height: auto; max-height: 145px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); min-width: 150px; } .login .login-form .login-inner-form { padding: 10px 5px; width: 45%; min-width: 320px; } .login .login-form .login-inner-form .login-desc { font-weight: bold; font-size: 13px; max-width: 80%; text-align: center; margin: 0 auto; opacity: 0.7; } .login .login-form .login-inner-form .form-group { font-family: 'Noto Sans', sans-serif; margin: 10px 0; padding: 2px; } .login .login-form .login-inner-form .form-group input { border-width: 0 0 1px 0 !important; border-radius: 0; font-size: 13px; font-weight: 600; border-style: solid; border-color: #505050; } .login .login-form .login-inner-form .form-group .btn input { border-bottom: 0; } .login .login-form .login-inner-form .form-group .btn-danger:focus input { background-color: transparent; } .login .login-form .login-inner-form .btn.btn-red { margin: 20px auto 10px auto; text-align: center; display: flex; width: 100%; justify-content: center; } .login .login-form .login-inner-form .forgot-password-link { font-size: 16px; color: #676a6c; display: block; margin-top: 10px; margin-bottom: 5px; text-decoration: none; } /* ===================== LOGIN SELECT PROJECT ======================= */ .login-logonselectproject-projectstyle .header-bar { } .login-select-project { font-size: 13px; font-weight: 500; padding-left: 15px; padding-right: 15px; display: flex; flex-wrap: wrap; } .login-select-project .select-project { margin: 0 0 5px 0; height: 100%; /*display:flex;*/ } .login-select-project .select-project button { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 4px; width: 95%; margin: 0; padding: 0; position: relative; margin-bottom: 10px; } .login-select-project .select-project .select-project-img { height: 80px; text-align: center; } .login-select-project .select-project .select-project-img img { width: auto; max-height: 100%; padding: 8px 0; height: auto; max-width: 90%; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); pointer-events: none; } .login-select-project .select-project .project-courtain { position: absolute; display: block; left: 0; top: 0; right: 0; height: 80px; /*80%;*/ z-index: 1; opacity: 0; background-color: #fcfcfcde; pointer-events: none; transition: all 0.4s ease; } .login-select-project .select-project i { opacity: 0; position: relative; font-size: 50px; top: 50%; transform: translate(-50%, -50%); left: 0; color: #3a7d8a; padding: 5px; pointer-events: none; transition: all 0.4s ease; } .login-select-project .select-project .logo-image-switch { max-width: 90%; max-height: 90px; padding: 0 5%; margin: 0 auto; } .login-select-project .select-project span { display: block; background-color: #f3f3f3; font-size: 13px; line-height: 13px; padding: 2px 5px; font-weight: 600; border-radius: 0; margin: 5px 15px 5px 15px; word-break: break-all; } .login-select-project .select-project:hover span { background-color: #3a7d8a; color: #ffffff; transition: all 0.4s ease; } .login-select-project .select-project:hover .project-courtain { opacity: 1; transition: all 0.3s ease; } .login-select-project .select-project:hover i { opacity: 1; transform: translate(0%, -50%); transition: all 0.3s ease; } /* ============ CONTENT ============= */ .public-wrapper-content { background-color: #ffffff; border-radius: 4px; padding: 15px; } .wrapper-content { background-color: transparent; padding: 0; } .body-content { background-color: transparent; padding: 0; margin: 0; } .body-content > .row { background-color: #ffffff; margin: 0 0 10px 0; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,8%); padding: 5px 0; } body.dtools-login .body-content { padding: 5px 0; } /* ============ COMMON CONTENTS ============== */ h1, h2, h3, h4, h5, h6 { font-weight: 100; } h1 { font-size: 28px; } h2 { font-size: 24px; } h3 { font-size: 16px; } h4 { font-size: 14px; } h5 { font-size: 12px; } h6 { font-size: 10px; } h3, h4, h5 { margin-top: 5px; font-weight: 600; } /* ============= COMMON BUTTONS =============== */ .btn { line-height: 1.35; font-size: 13px; font-weight: bold; margin: 2px 0; min-width: 40px; min-height: 32px; display: inline-flex; justify-content: center; align-items: center; overflow: hidden; position: relative; padding: 0; border-radius: 3px; width: auto; -webkit-transition: color 0.3s; transition: color 0.3s; } .btn i { pointer-events: none; } /* effect down courtain color in buttons*/ .btn::after { content: ''; position: absolute; height: 100%; width: 100%; bottom: 100%; left: 0; z-index: -1; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; background: #db8b00; pointer-events: none; } /* fix input/submit buttons (with span)*/ .btn > input { background-color: transparent; border: 0; font-weight: 600; color: #fff; margin: 0; padding: 6px 15px; width: 100%; min-width: 75px; /* border: 1px solid; */ height: 100%; position: relative; min-height: 30px; } .btn > a { text-decoration: none; display: flex; width: 100%; min-height: 33px; height: 100%; /*border: 1px solid;*/ justify-content: center; align-items: center; padding: 0; } a.btn { padding: 6px 12px; } .btn > input:hover { border: 0; } .btn:focus { outline: 0; box-shadow: none; } /* fix button normal size */ .btn:not(.btn-bar) { min-width: 75px; } /*fix real button without a or input*/ button.btn { padding-left: 15px; padding-right: 15px; } /* fix for buttons with icon fa */ .btn:not(.btn-bar) .fa-solid { margin-right: 10px; } /* fix icon button data monitor*/ .query-btns-container .btn .fa-solid { margin-right: 0px; } .system-formElement-options .btn .fa-solid, .system-area-options .btn .fa-solid { margin-right: 0; } /* fix for big buttons size */ .btn.btn-big { width: 180px; } /* fix for full buttons size */ .btn.btn-full { width: 100%; } .btn.btn-disabled, btn.disabled, btn[disabled] { background-color: #1dc5a3; border-color: #1dc5a3; color: gray; } .table .btn:before { position: absolute; font-family: "Font Awesome 6 Free"; color: #ffffff; font-size: 16px; pointer-events: none; } .btn.btn-icon:before { position: absolute; font-family: "Font Awesome 6 Free"; color: #ffffff; font-size: 16px; left: 10px; } /* btn primary */ .btn-primary { background-color: #1ab394; border-color: #1ab394; color: #FFFFFF; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { background-color: #18a689; border-color: #18a689; color: #FFFFFF; } /* btn success */ .btn-success { background-color: #1c84c6; border-color: #1c84c6; color: #FFFFFF; } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success { background-color: #1a7bb9; border-color: #1a7bb9; color: #FFFFFF; } /* btn info */ .btn-info { background-color: #23c6c8; border-color: #23c6c8; color: #FFFFFF; } .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info { background-color: #21b9bb; border-color: #21b9bb; color: #FFFFFF; } /* btn default */ .btn-default { background-color: #c2c2c2; border-color: #c2c2c2; color: #FFFFFF; } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { background-color: #878787; border-color: #878787; color: #FFFFFF; } /* btn navigation */ .btn-navigation { background-color: #909090; border-color: #5e5e5e; color: #FFFFFF; } .btn-navigation:hover, .btn-navigation:focus, .btn-navigation:active, .btn-navigation.active, .open .dropdown-toggle.btn-navigation { background-color: #bdbdbd; border-color: #777777; color: #FFFFFF; } /* btn navigation current */ .btn-navigation-current { background-color: #ffffff; border-color: #454545; color: #222222; } .btn-navigation-current:hover, .btn-navigation-current:focus, .btn-navigation-current:active, .btn-navigation-current.active, .open .dropdown-toggle.btn-navigation-current { background-color: #f3f3f3; border-color: #777777; color: #000000; } /* btn warning */ .btn-warning { background-color: #f8ac59; border-color: #f8ac59; color: #FFFFFF; } .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning { background-color: #f7a54a; border-color: #f7a54a; color: #FFFFFF; } /* btn danger */ .btn-danger { background-color: #E63946; border-color: #E63946; color: #FFFFFF; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger { background-color: #A4161A; border-color: #A4161A; color: #FFFFFF; } /* btn link */ .btn-link { color: inherit; } .btn-link:hover, .btn-link:focus, .btn-link:active, .btn-link.active, .open .dropdown-toggle.btn-link { color: #1ab394; text-decoration: none; } /* btn white */ .btn-white { color: inherit; background: white; border: 1px solid #e7eaec; } .btn-white:hover, .btn-white:focus, .btn-white:active, .btn-white.active, .open .dropdown-toggle.btn-white { color: inherit; border: 1px solid #d2d2d2; } .btn-white:active, .btn-white.active { box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset; } /* btn red */ .btn-red { background-color: #CA3738; border-color: #CA3738; color: #FFFFFF; } .btn-red:hover, .btn-red:focus, .btn-red:active, .btn-red.active, .open .dropdown-toggle.btn-red { background-color: #b92627; border-color: #b92627; color: #FFFFFF; } /* =============== BTN EDIT (orange) =============== */ .btn.btn-edit { border: 1px solid #52B788; background: #52B788; color: #ffffff; z-index: 0; } .btn.btn-edit a { color: #ffffff; } .btn.btn-edit::after { background: #40916C; } .btn.btn-edit:hover, .btn.btn-edit:focus { color: #FFFFFF; border: 1px solid #40916C; transition: all 0.3s ease; } .btn.btn-edit:hover:after, .btn.btn-edit:active:after { -webkit-transform: translate3d(0, 100%, 0); height: 100%; } /* =============== BTN FINISING / SAVE =============== */ .btn.btn-save { border: 1px solid #52B788; background: #52B788; color: #ffffff; z-index: 0; } .btn.btn-save a { color: #ffffff; } .btn.btn-save::after { background: #40916C; } .btn.btn-save:hover, .btn.btn-save:focus { color: #FFFFFF; border: 1px solid #40916C; transition: all 0.3s ease; } .btn.btn-save:hover::after, .btn.btn-save:active::after { -webkit-transform: translate3d(0, 100%, 0); height: 100%; } /* =============== BTN SEND =============== */ .btn.btn-send { border: 1px solid #a8a8a8; background: #a8a8a8; color: #ffffff; z-index: 0; } .btn.btn-send a { color: #ffffff; } .btn.btn-send::after { background: #274c77; } .btn.btn-send:hover, .btn.btn-send:focus { color: #FFFFFF; border: 1px solid #274c77; transition: all 0.3s ease; } .btn.btn-send:hover::after, .btn.btn-send:active::after { -webkit-transform: translate3d(0, 100%, 0); height: 100%; } /* =============== BTN CANCEL =============== */ .btn.btn-cancel { border: 1px solid #ADB5BD; background: #ADB5BD; color: white; z-index: 0; } .btn.btn-cancel a { color: white; } .btn.btn-cancel::after { background: #6C757D; } .btn.btn-cancel:hover, .btn.btn-cancel:focus { color: white; border: 1px solid #6C757D; transition: all 0.3s ease; } .btn.btn-cancel:hover::after, .btn.btn-cancel:active::after { -webkit-transform: translate3d(0, 100%, 0); height: 100%; } /* =============== BTN CREATE / NEW / ADD (green) =============== */ .btn.btn-new { border: 1px solid #52B788; background: #52B788; color: #ffffff; z-index: 0; } .btn.btn-new a { color: #ffffff; } .table td .btn.btn-new::before { content: '\f0fe'; } .btn.btn-new::after { background: #40916C; } .btn.btn-new:hover, .btn.btn-new:focus { color: #FFFFFF; border: 1px solid #40916C; transition: all 0.3s ease; } .btn.btn-new:hover::after, .btn.btn-new:active::after { -webkit-transform: translate3d(0, 100%, 0); height: 100%; } /* =============== BTN DELETE / DANGER / CANCEL (Red) =============== */ .btn.btn-danger { border: 1px solid #db4454; background: #db4454; color: #ffffff; z-index: 0; } .btn.btn-danger a { color: #ffffff; } button.btn-icon { padding-left: 5px; padding-right: 5px; } .table td button.btn-icon > i { padding-right: 5px; } .btn.btn-danger::after { background: #c61427; } .btn.btn-danger:hover, .btn.btn-danger:focus { color: #FFFFFF; border: 1px solid #c61427; transition: all 0.3s ease; } .btn.btn-danger:hover:after, .btn.btn-danger:active:after { -webkit-transform: translate3d(0, 100%, 0); height: 100%; } /* =============== BTN LOCK =============== */ .btn.btn-lock { border: 1px solid #db4454; background: #db4454; color: #ffffff; z-index: 0; } .btn.btn-lock a { color: #ffffff; } .btn.btn-lock::after { background: #c61427; } .btn.btn-lock:hover, .btn.btn-lock:focus { color: #FFFFFF; border: 1px solid #c61427; transition: all 0.3s ease; } .btn.btn-lock:hover:after, .btn.btn-lock:active:after { -webkit-transform: translate3d(0, 100%, 0); height: 100%; } /* =============== BTN NEXT / PREVIOUS (dark blue) =============== */ .btn.btn-next, .btn.btn-previous { border: 1px solid #474cdd; background: #474cdd; color: #ffffff; z-index: 0; } .btn.btn-next a, .btn.btn-previous a { color: #ffffff; } .btn.btn-next::after, .btn.btn-previous::after { background: #2d2a8a; } .btn.btn-next:hover, .btn.btn-next:focus, .btn.btn-previous:hover, .btn.btn-previous:focus { color: #FFFFFF; border: 1px solid #2d2a8a; transition: all 0.3s ease; } .btn.btn-next:hover::after, .btn.btn-next:active::after, .btn.btn-previous:hover::after, .btn.btn-previous:active::after { -webkit-transform: translate3d(0, 100%, 0); height: 100%; } /* =============== BTN FILTER / MATRIX (Blue) =============== */ .btn.btn-filter, .btn.btn-matrix { border: 1px solid #26b2c4; background: #26b2c4; color: #ffffff; z-index: 0; } .btn.btn-filter a, .btn.btn-matrix a { color: #ffffff; } .btn.btn-filter::after, .btn.btn-matrix::after { background: #188a99; } .btn.btn-filter:hover, .btn.btn-filter:focus, .btn.btn-matrix:hover, .btn.btn-matrix:focus { color: #FFFFFF; border: 1px solid #188a99; transition: all 0.3s ease; } .btn.btn-filter:hover::after, .btn.btn-filter:active::after, .btn.btn-matrix:hover::after, .btn.btn-matrix:active::after { -webkit-transform: translate3d(0, 100%, 0); height: 100%; } /* =============== BTN PREVIEW =============== */ .btn.btn-preview { border: 1px solid #adb5bd; background: #f8f9fa; color: #212529; z-index: 0; } .btn.btn-preview a { color: #212529; } .btn.btn-preview::after { background: #dee2e6; } .btn.btn-preview:hover, .btn.btn-preview:focus { border: 1px solid #adb5bd; transition: all 0.3s ease; } .btn.btn-preview:hover::after, .btn.btn-preview:active::after { -webkit-transform: translate3d(0, 100%, 0); height: 100%; } /* =============== BTN PDF/CSV =============== */ .btn.btn-toFile { border: 1px solid #a8a8a8; background: #a8a8a8; color: #ffffff; z-index: 0; } .btn.btn-toFile label { position: absolute; pointer-events: none; } .btn.btn-toFile a { color: #ffffff; } .btn.btn-toFile::after { background: #1586b6; } .btn.btn-toFile:hover, .btn.btn-toFile:focus { color: #FFFFFF; border: 1px solid #1586b6; transition: all 0.3s ease; } .btn.btn-toFile:hover::after, .btn.btn-toFile:active::after { -webkit-transform: translate3d(0, 100%, 0); height: 100%; } /* =============== BTN IMPORT / EXPORT =============== */ .btn.btn-import, .btn.btn-export { border: 1px solid #1C7293; background: #1C7293; color: white; z-index: 0; } .btn.btn-import a, .btn.btn-export a { color: white; } .table td .btn.btn-import::before { content: '\f56f'; } .btn.btn-import::after, .btn.btn-export::after { background: #065A82; } .btn.btn-import:hover, .btn.btn-import:focus, .btn.btn-export:hover, .btn.btn-export:focus { color: #FFFFFF; border: 1px solid #065A82; transition: all 0.3s ease; } .btn.btn-import:hover::after, .btn.btn-import:active::after, .btn.btn-export:hover::after, .btn.btn-export:active::after { -webkit-transform: translate3d(0, 100%, 0); height: 100%; } /* =============== BTN COPY =============== */ .btn.btn-copy { border: 1px solid #588ea0; background: #588ea0; color: #ffffff; z-index: 0; } .btn.btn-copy i.fa-solid { margin-right: 10px; } .btn.btn-copy a { color: #ffffff; } .btn.btn-copy::after { background: #3d6977; } .btn.btn-copy:hover, .btn.btn-copy:focus { color: #FFFFFF; border: 1px solid #3d6977; transition: all 0.3s ease; } .btn.btn-copy:hover:after, .btn.btn-copy:active:after { -webkit-transform: translate3d(0, 100%, 0); height: 100%; } /* =============== BTN ACTION =============== */ .btn.btn-action { border: 1px solid #588ea0; background: #588ea0; color: #ffffff; z-index: 0; } .table td .btn.btn-action:before { content: ''; } .btn.btn-action a { color: #ffffff; } .btn.btn-action i.fa-solid { font-size: 16px; } .btn.btn-action::after { background: #3d6977; } .btn.btn-action:hover, .btn.btn-action:focus { color: #FFFFFF; border: 1px solid #3d6977; transition: all 0.3s ease; } .btn.btn-action:hover:after, .btn.btn-action:active:after { -webkit-transform: translate3d(0, 100%, 0); height: 100%; } /* ============ BTN disabled =============== */ .btn.disabled { color: #ffffff; background-color: #bcbcbc; border-color: #bcbcbc; cursor: not-allowed; } /* ==== Fix Buttons in modal =====*/ .modal-footer .btn, .modal-body .btn, .modal-footer .btn { margin: 5px 5px 5px 0; padding: 2px 10px; min-width: 75px; } .modal-body .btn { margin: 0; } .modal-footer .btn { margin: 5px 0 5px 15px; } /* ==== Fix Buttons in Search bar =====*/ .search-bar .btn { line-height: 1.15; height: 30px; min-height: 30px; font-size: 14px; font-weight: bold; border-radius: 3px; margin: 0 2px 0 3px; } /* ==== Fix Buttons in tables =====*/ .table thead tr th .btn { margin: 2px 2px; } .table .btn { width: auto; min-width: 42px; min-height: 35px; } table .btn > input { background-color: transparent; border: 0; font-weight: 600; color: #fff; margin: 0; padding: 0 0 0 5px; height: auto; width: auto; position: relative; min-width: auto; min-height: auto; } .table td .btn .fa-solid { margin: 0; font-size: 16px; } /* fix btn-big in table */ .table .btn.btn-big { min-width: 150px; width: auto; } /* ==== Fix Buttons in area and element =====*/ .system-area-options > .btn .fa-solid, .system-formElement-options > .btn .fa-solid { margin-right: 0; } /* ================ NAV TABS ============== */ .nav-tabs { border-bottom: 1px dotted #26b2c4; } .nav.nav-tabs > li::after { content: none; } .nav.nav-tabs li.nav-item { border-bottom: 0; padding: 0; margin: 5px 5px 0 0; min-width: 50px; text-align: center; color: #ffffff; transition: all 0.4s ease; } .nav.nav-tabs li.nav-item a.nav-link { border: 1px solid #26b2c4; border-top-left-radius: 4px; border-top-right-radius: 4px; background-color: #26b2c4; color: #ffffff; } .nav.nav-tabs li.nav-item a.nav-link.active { background-color: #26b2c4; border: 1px solid #26b2c4; margin: 0; color: #ffffff; transition: all 0.4s ease; } .nav.nav-tabs li.nav-item a.nav-link:hover, .nav.nav-tabs li.nav-item a.nav-link:focus { background-color: #188a99; border: 1px solid #188a99; margin: 0; color: #ffffff; transition: all 0.4s ease; } .dashboard .nav-tabs li.nav-item a.nav-link, .dashboard .nav-tabs li.nav-item a.nav-link { font-size: 17px; padding: 5px 20px 7px 20px; min-height: 40px; min-width: 60px; transition: all 0.4s ease; } .nav.nav-tabs li.nav-item.active a.nav-link, .nav.nav-tabs li.nav-item a.nav-link.active { color: #ffffff; background-color: #188a99; border: 1px solid #188a99; } .tab-content .panel-body .row { margin-left: 0; margin-right: 0; } .tab-content { padding-top: 15px; } /* ===== Dashboard tabs ============= */ .dashboard .nav-tabs .nav-link { font-size: 17px; padding: 5px 20px 7px 20px; border: 0; } .dashboard .nav-tabs .nav-link.active { background-color: transparent; } .dashboard .tab-content { padding: 20px 10px 0 10px; } /* =========== ADMIN FORMS ================*/ /* =========== ADMIN FORMS FB --> TITLE ============ */ .row.fb-form_title-sticky { position: sticky; top: 137px; align-items: center; background-color: #ffffff; z-index: 101; margin-top: -10px; padding-top: 14px; border-bottom: 1px solid #dedede; margin-left: 0px; height: 75px; align-items: center; } .row.fb-form_title-sticky .fb-form_title-sticky-warnings { position: absolute; top: -3px; } .fb-form_title { color: inherit; padding: 10px 10px 0 10px; margin: 0 0 5px 0; height: auto; min-height: 35px; } .row.fb-form_title-sticky .fb-form_title { min-height: auto; margin: 0; padding: 0px 0 0 5px; } .row.fb-form_title-sticky .fb-form_title h4.title { max-height: 40px; min-height: 30px; overflow-y: auto; display: flex; align-items: start; } .row.fb-form_title-sticky .type-warning { font-weight: bold; text-align: right; padding-left: 15px; } .fb-form_title h3 { font-size: 20px; margin: 0 0 7px; padding: 0; text-overflow: ellipsis; float: left; } .fb-form_title h4 { font-size: 15px; margin: 0 0 0px; line-height: 19px; text-overflow: ellipsis; } .fb-form_title h5 { font-size: 15px; margin: 0 0 7px; padding: 0; text-overflow: ellipsis; float: left; } /* =============== FB FORM CONTENT ================ */ .fb-form_content { background-color: #ffffff; color: inherit; padding: 10px 10px 10px 10px; border: 0; } .fb-form_content h4 { font-size: 14px; margin: 0; font-weight: bold; text-overflow: ellipsis; padding: 8px 15px; color: #464646; background-color: #ededed; width: auto; min-width: 250px; display: inline-block; } .fb-form_content .form-group { margin: 8px 0; width: 100%; display: flex; flex-wrap: wrap; } /* =========== ADMIN FORMS FB --> SEARCH BAR ============ */ .fb-form_content .search-bar { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; background-color: #f8f7f7; padding: 8px 10px; border-radius: 3px; } .fb-form_content .search-bar .item { width: auto; max-width: 170px; max-height: 30px; flex: 0 0 auto; margin: 0px 5px 5px 0; text-align: left; min-width: 150px; } .fb-form_content .search-bar .item:not(.button-item) { flex: 1 0 auto; } .fb-form_content .search-bar .button-item { min-width: auto; } @media(max-width:480px) { .col-lg-12 { padding-left: 5px; padding-right: 5px; } .fb-form_content .search-bar { padding: 8px 2px 8px 6px; justify-content: center; } .fb-form_content .search-bar .item { margin: 0px 3px 4px 0; width: 50%; } .fb-form_content .search-bar .item .btn { width: 100%; margin: 0; } } /* =========== ADMIN FORMS FB --> PAGER ============ */ .fb-form_content .pager { list-style: none; display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 500px; margin: 5px auto; padding: 0; border: 1px solid #ebebeb; border-radius: 4px; height: 38px; background-color: #fcfcfc; } .fb-form_content .pager li { min-width: 10%; margin: 0; font-size: 13px; background-color: #fcfcfc; flex: 0 0 calc(60% - 16px); padding: 4px 8px; font-weight: 600; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; height: 100%; } .fb-form_content .pager li.previous, .fb-form_content .pager li.next { flex: 0 0 calc(20% - 16px); } .fb-form_content .pager li.previous { border-right: 1px solid #ebebeb; border-radius: 0; padding: 0; margin: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .fb-form_content .pager li.next { border-left: 1px solid #ebebeb; border-radius: 0; padding: 0; margin: 0; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .fb-form_content .pager li input[type="text"] { min-width: 50px; max-width: 100%; border: 1px solid #b6b6b6; border-radius: 3px; height: 28px; } .fb-form_content .pager li.next .btn.btn-white, .fb-form_content .pager li.previous .btn.btn-white { padding: 0; margin: 0; width: 100%; height: 100%; border: 0; min-width: auto; } .fb-form_content .pager li.next .btn.btn-white { border-radius: 0; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .fb-form_content .pager li.previous .btn.btn-white { border-radius: 0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .fb-form_content .pager li.next .btn.btn-white::after, .fb-form_content .pager li.previous .btn.btn-white::after { background: #40916C; z-index: 0; opacity: 0.2; } .fb-form_content .pager li.next .btn.btn-white:hover::after, .fb-form_content .pager li.next .btn.btn-white:focus::after, .fb-form_content .pager li.previous .btn.btn-white:hover::after, .fb-form_content .pager li.previous .btn.btn-white:focus::after { -webkit-transform: translate3d(0, 100%, 0); height: 100%; } @media(max-width:480px) { .fb-form_content .pager li a.btn, .fb-form_content .pager li { line-height: 14px; font-size: 12px; white-space: normal; text-align: center; padding: 6px 6px; } .fb-form_content .pager li { flex: 0 0 calc(60% - 8px); padding: 4px 4px; } .fb-form_content .pager li.previous, .fb-form_content .pager li.next { flex: 0 0 16%; padding: 0; margin: 0; } .fb-form_content .pager li.previous a.btn, .fb-form_content .pager li.next a.btn { padding: 0; margin: 0; } } /* ============== FB OUTER FORM =============== */ .g-buttons { text-align: right; display: flex; flex-direction: row; justify-content: flex-end; } .g-buttons .btn { margin: 0px 0 0 10px; font-weight: 600; } /* ================= Modal ================= */ /* ============= Modal sizes ===========*/ [data-modal-size="large"] { width: 65%; max-width: none; } [data-modal-size="huge"] { width: 84%; max-width: none; } .modal-content { border-radius: 4px; box-shadow: 0 0 20px 1px rgba(0,0,0,.2); } .modal-header { flex-direction: row-reverse; padding: 6px 10px; justify-content: space-between; } .modal-header h3, .modal-header h4 { font-size: 15px; } .modal-header .close { border: 0; font-size: 15px; width: 28px; display: flex; justify-content: center; align-items: center; height: 26px; color: #ffffff; background-color: #db1313; border-radius: 3px; } .modal-header .close:hover { background-color: #921d1d; transition: all 0.4s ease; } .modal-body { padding: 10px 15px 15px 15px; } .modal-body h2 { font-size: 20px; } /* add line separator for cols in modal */ .modal-body .separator { border-right: 1px dotted #505050; } .modal-body .form-group { margin: 5px 0; } /* add indent form-group in modal */ .modal-body .form-group.indent { max-width: 90%; margin-left: 10%; } .modal-body .form-group label { font-weight: bold; font-size: 13px; margin-bottom: 0; } .modal-body .form-group label .icheckbox_square-green ~ span { margin-left: 5px; } .modal-body .form-group label .icheckbox_square-green:not(.checked) ~ span { font-weight: normal; } .modal-body div.cke_textarea_inline, .modal-body .form-control { border: 1px solid #676a6c; } .modal div.cke_textarea_inline { max-height: none; } @media(max-width:480px) { [data-modal-size="large"], [data-modal-size="huge"] { width: 96%; } } label.properties-header-label { display: block; padding-left: 0px; font-weight: bold; margin: 5px 0; } /* Title for separate concepts in modal*/ .modal-body label.properties-header-label { width: 100%; border-bottom: 1px solid #dedede; margin-top: 10px; margin-bottom: 5px; } /* ========== SELECTS =============== */ select:focus { outline: none; box-shadow: none; border-color: #3299ab; } .select { position: relative; display: flex; } select, .chosen-container-single .chosen-single, .chosen-container-multi .chosen-choices { background: #ffffff; box-shadow: none; -moz-box-sizing: border-box; background-color: #FFFFFF; min-width: 80px; max-width: 100%; width: 100%; border: 1px solid #858585; border-radius: 3px; height: 30px; position: relative; padding: 4px 10px 4px 5px; cursor: text; margin: 0; } .chosen-container-multi .chosen-choices { height: auto; } .chosen-container-multi .chosen-choices li.search-choice { background: #f1f1f1; border: 1px solid #858585; border-radius: 2px; box-shadow: none; color: #333333; cursor: default; line-height: 13px; margin: 3px 0 3px 5px; padding: 3px 20px 3px 5px; position: relative; } .chosen-container-single .chosen-single div b { display: none; } .chosen-container-single .chosen-single, .chosen-container-multi .chosen-choices { padding: 2px 24px 4px 5px; } .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 8px; padding-right: 30px; } .select2-container--default .select2-selection--single { height: 30px; border: 1px solid #858585; background-color: #FFFFFF; border-radius: 3px; } .select.s-custom:hover, select:hover, .chosen-container:hover .chosen-single, .chosen-container:hover .chosen-choices, .select2-container--default:hover .select2-selection--single { border-color: #3299ab; -webkit-box-shadow: 0px 1px 3px rgb(0 0 0 / 10%); transition: all 0.3s ease; } .select.s-custom::after, .dropdownlist-properties::after, .chosen-container .chosen-single::after, .chosen-container-multi .chosen-choices:after, .select2:after { content: '\f107'; color: #676767; font-family: "Font Awesome 6 Free"; font-size: 15px; text-rendering: auto; -webkit-font-smoothing: antialiased; position: absolute; display: inline-block; top: 6px; right: 0; width: 18px; height: 32px; pointer-events: none; transform: rotate(0deg); transform-origin: center center; transition: all 0.3s ease; } .chosen-container .chosen-single::after { top: 4px; } .select2 b { display: none; } .s-custom .chosen-container .chosen-single::after, .s-custom .chosen-container-multi .chosen-choices:after { content: none; } .s-custom:hover::after, .chosen-container .chosen-single:hover::after, .chosen-container-multi .chosen-choices:hover:after, .select2:hover:after { color: #3299ab; transition: all 0.3s ease; } .s-custom:focus::after, .chosen-container .chosen-single:focus::after, .chosen-container-multi .chosen-choices:focus:after, .select2:focus:after { transform: rotate(180deg); color: #3299ab; transition: all 0.3s ease; } .select2-container { width: auto; min-height: 30px; height: auto; } .select2:after { color: #676767; } .chosen-container-single .chosen-drop .active-result.highlighted { background: #3299ab; transition: all 0.3s ease; } .dropdownlist-properties { -webkit-box-shadow: none; margin: 0 0 10px 0; overflow: hidden; padding: 3px 10px; text-overflow: ellipsis; white-space: nowrap; width: 300px; position: relative; } .dropdownlist-properties > option { font-size: 14px; font-family: "Noto Sans", sans-serif; } /* ========== INPUTS =============== */ .form-control:focus, input:focus { outline: none; box-shadow: none; border-color: #3299ab; } .form-control, .cke_textarea_inline, .text-box.single-line, .modal-body .form-control, .modal-body .cke_textarea_inline, textarea { background-color: #FFFFFF; background-image: none; border: 1px solid #858585; color: inherit; display: block; max-width: 100%; border-radius: 3px; font-size: 13px; height: 30px; padding: 3px 5px; transition: all 0.3s ease; } textarea:not(.swal2-textarea), textarea.form-control { height: auto !important; margin-bottom: 5px; padding: 2px 5px !important; } .input-group-text, .form-control ~ .input-group-text { background-color: #fff; border: 1px solid #858585; color: inherit; display: flex; font-size: 14px; align-items: center; justify-content: center; vertical-align: middle; font-weight: 400; line-height: 1; text-align: center; border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 30px; transition: all 0.3s ease; } .input-group.date .input-group-text { cursor: pointer; } .form-control:hover, input:hover, .text-box.single-line:hover, .cke_textarea_inline:hover, .form-control:focus, input:focus, .text-box.single-line:focus, .cke_textarea_inline:focus, textarea:hover, textarea:focus { border: 1px solid #3299ab; border-radius: 3px; transition: all 0.3s ease; -webkit-box-shadow: 0px 2px 3px rgb(0 0 0 / 15%); transition: all 0.3s ease; } .form-control:hover ~ .input-group-text, .form-control:focus ~ .input-group-text, .div.cke_textarea_inline:hover ~ .input-group-text, .div.cke_textarea_inline:focus ~ .input-group-text { border: 1px solid #3299ab; color: #3299ab; transition: all 0.3s ease; -webkit-box-shadow: 0px 2px 3px rgb(0 0 0 / 15%); transition: all 0.3s ease; } /* Type file */ input[type=file] { padding: 3px; margin-left: -2px; border: 1px solid transparent; } input[type=file]:hover, input[type=file]:focus { border: 1px solid #3299ab; cursor: pointer; } .modal .form-control ~ .input-group-text { border-top-right-radius: 4px; border-bottom-right-radius: 4px; height: 30px; } /* inner form label */ .form-group .control-label { display: flex; align-items: center; padding: 0 15px 0 0; } @media(max-width:480px) { .form-group .control-label.col-4.col-lg-3 { word-break: break-all; } } /* inner form Input type text */ .fb-form_content .form-control:not(.i-hidden) { min-width: 70px; max-width: 100%; } .fb-form_content select.form-control:not(.i-hidden) { min-height: 30px; height: auto; } .fb-form_content .form-control.chosen-user-type:not(.i-hidden) { height: auto; } .fb-form_content .col-1 .form-control:not(.i-hidden) { min-width: 40px; } /* inner form Radio inline */ .fb-form_content .radio-inline { margin-right: 15px; } .fb-form_content .i-hidden { visibility: hidden; height: 0; padding: 0; } .modal-body .form-control { max-height: none; height: auto; } .modal-body .cke_textarea_inline { height: auto; max-height: none; } /* ========== INPUTS DATE =============== */ .custom-date { width: 90px; padding: 3px 8px; border-radius: 5px; } .date-input-required { top: -10px; position: relative; color: red; } .datecustom-separator { font-size: 16px; padding: 0 2px; } .modal-body .checkbox { margin: 5px 0; } /* ============= Custom Checkbox =================== */ .checkbox input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #ffffff; margin: 0; font: inherit; color: currentColor; width: 22px; height: 22px; border: 1px solid #858585; border-radius: 0.15em; float: left; margin-right: 5px; } .checkbox input[type=checkbox]:checked { background-color: #588ea0; text-align: left; } .checkbox input[type=checkbox]:checked::before { content: '✓'; font-family: 'Noto Sans', "sans-serif"; font-size: 15px; line-height: 15px; font-weight: bold; padding: 2px 0 1px 5px; position: absolute; height: 20px; width: 20px; opacity: 0; color: #fff; border-radius: 0%; z-index: -1; } .checkbox input[type=checkbox]:checked::before { opacity: 1; z-index: 0; color: #fff; } .checkbox input[type=checkbox]:hover, .checkbox input[type=checkbox]:checked:hover { -webkit-box-shadow: 0px 2px 3px rgb(0 0 0 / 15%); transition: all 0.3s ease-in-out; } .checkbox input[type=checkbox]:disabled { background-color: #cecece; color: #ffffff; border: 1px solid #c8c8c8; cursor: not-allowed; } .checkbox input[type=checkbox]:checked:disabled { background-color: #cecece; color: #ffffff; border: 1px solid #c8c8c8; cursor: not-allowed; } /* ========================== 5.5 Checkbox =================== */ /* ============================================================ */ .icheckbox_square-green { float: left; border: 1px solid #858585; background: #ffffff; border-radius: 0%; width: 20px; height: 20px; min-width: 20px; min-height: 20px; z-index: 1; margin-right: 6px; top: -1px; transition: all 0.3s ease; } .icheckbox_square-green:hover, .icheckbox_square-green:focus { border-color: #588ea0; -webkit-box-shadow: 0px 2px 3px rgb(0 0 0 / 15%); transition: all 0.3s ease-in-out; } .iCheck-helper { background: transparent; } .icheckbox_square-green.checked { background-color: #588ea0; text-align: left; } .icheckbox_square-green:after { content: ''; position: absolute; height: 20px; width: 20px; opacity: 0; transition: all 0.2s ease-in-out; color: #fff; z-index: -1; } .icheckbox_square-green:after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-size: 14px; line-height: 14px; font-weight: bold; padding: 2px 0 1px 2px; position: absolute; height: 18px; width: 18px; opacity: 0; color: #fff; border-radius: 0%; z-index: -1; } .icheckbox_square-green.checked:after { opacity: 1; } /* disabled */ .icheckbox_square-green.disabled, .icheckbox_square-green.disabled:hover, td.disabled-icheck .icheckbox_square-green, td.disabled-icheck .icheckbox_square-green:hover { background-color: #cecece; color: #ffffff; border-color: #ababab; cursor: not-allowed; } .icheckbox_square-green.checked.disabled, td.disabled-icheck .icheckbox_square-green.checked { color: #ffffff; border-color: #588ea0; cursor: not-allowed; } .icheckbox_square-green.checked.disabled:after, td.disabled-icheck .icheckbox_square-green.checked:after { color: #588ea0; } /* ========================== 5.6 Radios =================== */ /* ========================================================= */ .iradio_square-green { float: left; border: 1px solid #858585; background: #ffffff; border-radius: 50%; width: 22px; height: 22px; min-width: 22px; min-height: 22px; margin-right: 6px; top: -1px; z-index: 1; transition: all 0.3s ease; } .iradio_square-green:hover, .iradio_square-green:focus { border-color: #588ea0; -webkit-box-shadow: 0px 2px 3px rgb(0 0 0 / 15%); transition: all 0.3s ease-in-out; } .iradio_square-green.checked { background-color: #588ea0; text-align: left; } .iradio_square-green:after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-size: 14px; text-align: center; font-weight: bold; position: absolute; color: #fff; height: 21px; width: 21px; opacity: 0; margin: 1px 0 0 0; border-radius: 50%; z-index: -1; } .iradio_square-green.checked:after { opacity: 1; } /* disabled */ .iradio_square-green.disabled, .iradio_square-green.checked.disabled { background-color: #cecece; color: #ffffff; border-color: #ababab; cursor: not-allowed; } /* ================= SIDE BAR TOOLS in FORM DETAILS =================== */ .navbar-default.navbar-static-side { position: fixed; top: 95px; bottom: 0px; overflow-x: hidden; overflow-y: scroll; width: 320px; background-color: #ffffff; border-radius: 4px; z-index: 2; transition: all 0.6s ease; } /* ============= Scroll ====================== */ .navbar-default.navbar-static-side::-webkit-scrollbar { width: 12px; height: 100%; border-radius: 0px; } .navbar-default.navbar-static-side::-webkit-scrollbar-track { border-radius: 3px; background: rgba(0,0,0,0.1); border: 1px solid #ccc; } .navbar-default.navbar-static-side::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(0,0,0,0.3); border: 1px solid #aaa; cursor: pointer; } .navbar-default.navbar-static-side::-webkit-scrollbar-thumb:hover { background: #26b2c4; border: 1px solid #26b2c4; cursor: pointer; } .navbar-default.navbar-static-side::-webkit-scrollbar-thumb:active { background: #26b2c4; border: 1px solid #26b2c4; cursor: pointer; } /* ============= /END Scroll ====================== */ .navbar-default.navbar-static-side ~ #page-wrapper .wrapper.wrapper-content { margin-left: 320px; width: calc(100% - 320px); background-color: #ffffff; margin-top: -15px; padding: 0 15px 40px 15px; } .navbar-default.navbar-static-side .sidebar-collapse { padding: 0 12px 15px 12px; } .navbar-default.navbar-static-side .sidebar-collapse .toolbox-title { position: relative; } .navbar-default.navbar-static-side .sidebar-collapse .toolbox-title::after { content: '\f0c9'; position: absolute; right: 0; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; line-height: 12px; top: 3px; pointer-events: none; color: #101010; text-shadow: 1px 1px 1px rgb(255 255 255 / 80%); font-family: "Font Awesome 6 Free", serif; } .navbar-default.navbar-static-side .sidebar-collapse .toolbox-title:hover::after { background-color: #dedede; transition: all 0.4s ease; } .navbar-default.navbar-static-side .sidebar-collapse .toolbox-title h2, .navbar-default.navbar-static-side .sidebar-collapse .toolbox-title h4 { font-size: 14px; margin-top: 12px; padding-bottom: 2px; text-transform: uppercase; font-weight: bold; color: #505050; border-bottom: 1px dotted #adadad; } .navbar-default.navbar-static-side .sidebar-collapse .toolbox-title a { color: #505050; text-decoration: none; width: 100%; display: block; } .navbar-default.navbar-static-side .sidebar-collapse .toolbox { position: relative; min-height: 35px; margin: 0; padding: 6px 0 0px 0; display: flex; flex-direction: column; align-items: center; border: 1px dotted transparent; transition: all 0.4s ease; } .navbar-default.navbar-static-side .sidebar-collapse .toolbox:hover { background-color: #dffffe; border: 1px dotted #858585; transition: all 0.4s ease; } .navbar-default.navbar-static-side .sidebar-collapse .toolbox img { width: 34px; } .navbar-default.navbar-static-side .sidebar-collapse .toolbox label { font-size: 12px; font-weight: bold; text-align: center; pointer-events: none; } .navbar-default.navbar-static-side .sidebar-properties { margin-top: 20px; font-size: 12px; } /* ============== INTERFACE CREATION FORM DETAILS ============ */ /* ====== form-options-bar ============== */ .row.sticky.options-bar { position: sticky; top: 80px; height: 62px; background-color: #ffffff; border-radius: 0px; z-index: 101; margin: 0 -15px 100px 0; border-top: 15px solid #f6f7f8; border-bottom: 1px solid #f6f7f8; } .form-options-bar { top: 5px; position: relative; margin-bottom: 30px; background-color: #e9e9e9; list-style: none; display: flex; flex-wrap: wrap; flex-direction: row; padding: 0; font-size: 13px; margin: 0; max-height: 35px; } @media(max-width:480px) { .form-options-bar { flex-wrap: wrap; } .copy-box { width: 10%; } .row.fb-form_title-sticky { top: 170px; margin-top: 0px; padding-top: 0px; } } .form-options-bar span, .form-options-bar span a { font-size: 12px; } .form-options-bar-extra { list-style: none; display: flex; justify-content: flex-end; flex: 1 0 50%; padding: 0; } /* =============== BTN ACTION BAR =============== */ .form-options-bar .btn.btn-bar { color: #ffffff; margin: 0; font-size: 13px; min-width: 35px; min-height: 35px; display: inline-flex; justify-content: center; align-items: center; border-radius: 0; border: 0; margin: 0; background: #6a6a6a; color: #ffffff; z-index: 0; height: 30px; } .form-options-bar li { border-right: 1px solid #ffffff; position: relative; } .form-options-bar li:last-child .btn.btn-bar { border-right: 0; } .form-options-bar .preview .btn::before, .form-options-bar .exportCSV .btn::before { position: relative; content: '\f06e'; font-family: "Font Awesome 6 Free"; display: inline-block; font-size: 17px; z-index: 1; background: transparent; font-weight: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } .form-options-bar .exportCSV .btn::before { content: '\f0ce'; } .btn.btn-bar::after { background: #30303060; } .btn.btn-bar:hover, .btn.btn-bar:focus { color: #FFFFFF; border: 0; transition: all 0.3s ease; } .btn.btn-bar:hover:after, .btn.btn-bar:active:after { -webkit-transform: translate3d(0, 100%, 0); height: 100%; transition: all 0.3s ease; } .form-options-bar .view-html .btn.btn-bar.active, .form-options-bar .view-html .btn.btn-bar.active:after { background-color: #055f8c; transition: all 0.3s ease; } .form-options-bar .view-class .btn.btn-bar.active, .form-options-bar .view-class .btn.btn-bar.active:after { background-color: #dd6200; transition: all 0.3s ease; } .form-options-bar .type .btn.btn-bar.active, .form-options-bar .type .btn.btn-bar.active:after { background-color: #ff9400; transition: all 0.3s ease; } .btn.btn-bar:hover, .btn.btn-bar:focus { border: 0; } .form-options-bar .fa-solid, .form-options-bar i { pointer-events: none; } .form-options-bar .btn:hover { background-color: #3299ab; } .form-options-bar li.animations .btn-bar { background-color: #e13b3b; } .form-options-bar .edit-form-css .btn-bar { background-color: #3d5a80; } .form-options-bar li.edit-css .btn-bar { background-color: #4c7dbd; } .form-options-bar li.edit-css-page .btn-bar { background-color: #6da2e8; } .form-options-bar li.view-class .btn-bar { background-color: #e1913b; } .form-options-bar li.type .btn-bar { background-color: #b9a719; } /* ===== Page Selector ============ */ .ui-pageSelectorContainer { margin-top: 25px } .ui-pageSelectorContainer.page-selector-sticky { position: sticky; top: 212px; margin-top: 0px; padding-bottom: 5px; background-color: #ffffff; z-index: 101; border-bottom: 1px solid #dedede; } .ui-pageSelectorContainer div.page-selector { width: auto; min-width: 150px; min-height: 30px; cursor: pointer; margin: 5px 0 3px 0; border-radius: 3px; padding: 0 5px; align-items: center; display: inline-flex; justify-content: flex-end; background-color: #428bca; color: white; } .ui-pageSelectorContainer.disabled { pointer-events: none; } .ui-pageSelectorContainer div.page-selector .system-page-delete { visibility: hidden; } .ui-pageSelectorContainer div.page-selector:hover .system-page-delete, .ui-pageSelectorContainer div.page-selector.selected .system-page-delete { visibility: visible; } .ui-pageSelectorContainer div.page-selector .system-page-title { width: auto; background-color: transparent; border: 0; font-weight: 600; padding-top: 0px; display: block; font-size: 14px; margin-right: 25px; float: left; vertical-align: middle; } .ui-pageSelectorContainer div.page-selector span:not(.system-page-title) { width: 23px; height: 23px; display: flex; justify-content: center; align-items: center; border-radius: 3px; margin: 2px; float: right; } .ui-pageSelectorContainer div.page-selector:hover { background-color: #2d6ca2; transition: all 0.3s ease; } .ui-pageSelectorContainer div.page-selector.selected-style, .ui-pageSelectorContainer div.page-selector.selected.selected-style { color: #fff; background-color: #3299ab; margin: 2px 0 1px 0; padding: 5px 5px 5px 5px; transition: all 0.2s ease; } .ui-pageSelectorContainer div.page-selector:not(.selected-style) span:not(.system-page-title) { background-color: #3c7fb9; } .ui-pageSelectorContainer div.page-selector.selected.selected-style span:not(.system-page-title) { background-color: #277d8c; transition: all 0.3s ease; } .page-selector.selected.selected-style span:not(.system-page-title):hover, .page-selector span:not(.system-page-title):hover { background-color: #811010; color: #ffffff; transition: all 0.3s ease; } .ui-pageSelectorContainer div.page-selector:not(.selected-style) span.system-page-delete, .ui-pageSelectorContainer div.page-selector.selected.selected-style span.system-page-delete { color: #fb0000; background-color: #ffffffd9; } .pageDescription { font-style: italic; font-weight: 600; color: inherit; padding: 0; margin: 0; min-height: 30px; max-height: 40px; overflow-y: auto; display: flex; align-items: start; } /* ===== Copy Areas and Elements Boxes ===== */ .copy-box { border-radius: 4px; position: relative; margin: 5px 0 0 0; height: 35px; } .copy-box .row { position: relative; } .copy-box .row .copy-box-items, .copy-box .row .copy-box-areas { display: inline-block; vertical-align: top; overflow-y: auto; height: 35px; border: 1px solid #f7f7f7; } .copy-box .row .copy-box-title { text-align: center; padding: 0; font-weight: bold; font-size: 12px; border-bottom: 1px solid red; margin-bottom: 5px; } /* ===== Area Edit Form ===== */ .system-area { position: relative; border: 1px solid rgba(0,0,0,0.2); margin-bottom: 5px; padding: 0 8px; } .system-area:hover { border: 1px dashed #3299ab; } .system-area .system-area-select { position: absolute; width: 100%; left: 0; } .system-area .system-area-select .system-area-select-title { position: absolute; width: 70%; left: 0; height: 27px; border-radius: 0 0 4px 0; } .system-area:hover .system-area-select { background-color: #cbd3dc1c; } .system-area.selected { box-shadow: inset 1px -1px 8px rgba(50,153,171,0.3); border: 1px solid rgba(50,153,171,1); } .system-area.selected .system-area-select .system-area-select-title { background: #3299ab; } .system-area .id-area { font-size: 12px; margin: 0px 0 0px 0; color: #0f80e2; font-weight: 600; position: absolute; left: 10px; top: 4px; pointer-events: none; transition: none; } .system-area.selected .id-area { color: white; transition: none; } .system-area .system-area-options { right: 10px; top: 5px; position: absolute; display: none; } .system-area:hover .system-area-options, .system-area.selected .system-area-options { display: inline-block; z-index: 100; } .system-area.line .system-area-options, .system-area.line-separator .system-area-options { top: -15px; } .system-area .system-area-options .btn.btn-default, .system-area .system-area-options .btn.btn-danger { height: 35px; min-width: 35px; width: 35px; display: inline-flex; justify-content: center; align-items: center; margin: 2px 0; } .system-area .system-area-options .btn.btn-default:hover, .system-formElement .system-formElement-options .btn.btn-default:hover { background-color: #3299ab; border-color: #3299ab; } .system-area .ui-formItemsContainer { list-style-type: none; margin: 3px 3px; padding: 5px 1px; } .col-20 { width: 20%; float: left; flex: 0 0 20%; } .system-formElement-var { margin: 20px 0 0 5px; font-size: 11px; font-weight: 600; } /* Fix buttons system-area */ body:not(.public) .system-area.col-4 .ui-formItemsContainer, body:not(.public) .system-area.col-3 .ui-formItemsContainer, body:not(.public) .system-area.col-20 .ui-formItemsContainer, body:not(.public) .system-area.col-2 .ui-formItemsContainer { padding: 45px 0 10px 0; } .system-area.col-4 .system-area-options, .system-area.col-3 .system-area-options, .system-area.col-20 .system-area-options, .system-area.col-2 .system-area-options { top: 15px; } .system-area.col-4 .system-formElement .system-formElement-options, .system-area.col-3 .system-formElement .system-formElement-options, .system-area.col-20 .system-formElement .system-formElement-options, .system-area.col-2 .system-formElement .system-formElement-options { top: 15px; right: 2px; } body:not(.public) .system-area.col-4.selected .ui-formItemsContainer, body:not(.public) .system-area.col-3.selected .ui-formItemsContainer, body:not(.public) .system-area.col-20.selected .ui-formItemsContainer, body:not(.public) .system-area.col-2.selected .ui-formItemsContainer { padding: 65px 0 10px 0; } .system-area.col-4.selected .system-area-select .system-area-select-title, .system-area.col-3.selected .system-area-select .system-area-select-title, .system-area.col-20.selected .system-area-select .system-area-select-title, .system-area.col-2.selected .system-area-select .system-area-select-title, .system-area.col-4.selected .system-formElement .system-formElement-title, .system-area.col-3.selected .system-formElement .system-formElement-title, .system-area.col-20.selected .system-formElement .system-formElement-title, .system-area.col-2.selected .system-formElement .system-formElement-title { width: 100%; } .system-area.col-4.selected .system-area-options, .system-area.col-3.selected .system-area-options, .system-area.col-20.selected .system-area-options, .system-area.col-2.selected .system-area-options { top: 30px; } .system-area.col-4 .system-formElement.selected, .system-area.col-3 .system-formElement.selected, .system-area.col-20 .system-formElement.selected, .system-area.col-2 .system-formElement.selected { padding: 30px 0 0 0; } .system-area.col-4 .system-formElement.selected .system-formElement-options, .system-area.col-3 .system-formElement.selected .system-formElement-options, .system-area.col-20 .system-formElement.selected .system-formElement-options, .system-area.col-2 .system-formElement.selected .system-formElement-options { top: 28px; right: 2px; } .system-area.col-4 .system-formElement.selected .system-formElement-var, .system-area.col-3 .system-formElement.selected .system-formElement-var, .system-area.col-20 .system-formElement.selected .system-formElement-var, .system-area.col-2 .system-formElement.selected .system-formElement-var { margin: 35px 0 0 5px; } /* ===== ui-FOrms Items Container ===== */ .system-area .ui-formItemsContainer { margin: 4px 4px; padding: 4px 4px; } body:not(.public) .system-area .ui-formItemsContainer { padding: 40px 0 5px 0; margin: 0; } /* ===== FormElement Edit Form ===== */ .ui-formElement { /*border: 1px solid #0f0 !important;*/ padding: 3px 6px 3px 6px; margin: 0px; min-height: 0px; } .system-formElement { position: relative; border: 1px dashed #cecece; clear: left; padding: 5px; margin: 5px 0; } .system-formElement .system-formElement-title { position: absolute; width: 70%; left: 0; top: 0; height: 27px; border-radius: 0 0 4px 0; } .system-formElement .system-formElement-title .css-classes.show-class, .system-formElement .system-formElement-title .element-type.show-class { margin-top: -18px; } .system-formElement .system-formElement-title .system-html-class { font-size: 11px; margin: 4px 0 0 10px; color: #277d8c; font-weight: 600; } .system-formElement.selected .system-formElement-title { background: #3299ab; } .system-formElement.selected .system-formElement-title .system-html-class { color: #ffffff; } .system-selector { display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 100; } .system-formElement.system-selector.selected { box-shadow: inset 1px -1px 8px rgba(50,153,171,0.3); border: 1px solid rgba(50,153,171,1); } .system-formElement:hover .system-selector, .system-formElement.selected .system-selector { display: block; } .system-formElement.selected .system-selector { background-color: rgba(200, 200, 200, 0.1); } .system-formElement .system-formElement-options { right: 5px; bottom: 5px; display: inline-block; z-index: 1000; position: absolute; display: none; } .system-formElement:hover .system-formElement-options, .system-formElement.selected .system-formElement-options { display: inline-block; z-index: 1000; } .ui-formElement .system-formElement-options, .ui-formElement:hover .system-formElement-options { position: absolute; right: 5px; top: 5px; z-index: 0; } .system-formElement .system-formElement-options .btn.btn-default, .system-formElement .system-formElement-options .btn.btn-primary, .system-formElement .system-formElement-options .btn.btn-danger { height: 30px; width: 29px; min-height: 28px; min-width: 28px; justify-content: center; align-items: center; margin: 2px 0px; } /* public system-area*/ .public .system-area, .public .system-area:hover, .public .system-area.selected { border: 0; } .public .system-area-conversational:hover, .public .system-area-conversational.selected { border: 1px solid #ffffff; } .public .system-area-conversational { height: auto !important; border: 1px solid #ffffff; background-color: #ffffff; } .public .system-formElement:hover, .public .selected.system-formElement { border: 0; } .public .system-slider-area .slider-direction { font-size: 45px; height: 100%; opacity: 0.45; cursor: pointer; display: none; /*width: 90px;*/ width: 45px; position: absolute; z-index: 1000000; margin-top: -10px; } .public .system-slider-area .slide-button { position: relative; top: 50%; transform: translateY(-50%); background-color: #d0d0d0; border-radius: 5px; } /* logo project in project management */ .upload-project-logo { max-width: 240px; border: 1px solid #b6b6b6; padding: 20px; border-radius: 4px; } /* logo project in survey edit logo modal */ .upload-survey-logo { max-width: 240px; border: 1px solid #b6b6b6; padding: 20px; border-radius: 4px; } /* add for show classes & types in elements and areas */ .css-classes, .element-type { display: inline; position: relative; padding: 0; top: 0; font-size: 0; left: 0; color: #ffffff; font-weight: 500; width: auto; height: 0; opacity: 0; } .css-classes.show-class, .element-type.show-class { float: right; margin: 3px 2px; background-color: #dd6200; height: auto; font-size: 12px; padding: 2px 10px; opacity: 1; } .element-type.show-class { background-color: #ff9400; } /* add for show html id */ .id-area, .system-html-class { font-weight: 500; width: auto; opacity: 1; transition: all 0.3s ease; } .id-area.show-code, .system-html-class.show-code { height: auto; opacity: 1; transition: all 0.3s ease; } .collapse.in { display: block; } @media(max-width:1920px) { .modal-lg { max-width: 1500px; } } /* .form-group h4 { display: flex; margin: 10px 0; } */ .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { background-color: #0f7862; border-color: #0f7862; color: #FFFFFF; } /* ============== DASHBOARD ================ */ .dashboard .placeholder { opacity: 1 !important; z-index: -1; cursor: pointer; background-color: transparent !important; } .dashboard .g-widgets { padding-bottom: 15px; } .dashboard .g-widgets .widget { overflow: hidden; padding: 10px 10px; width: 100%; margin-bottom: 15px; /*box-shadow: 4px 4px 8px #cecece, -6px -6px 12px #f4f4f4 !important;*/ border-radius: 4px !important; border: 1px solid #d0d3d7; } .dashboard .g-widgets .widget .head { border-bottom: 3px solid #26b2c4 !important; margin-bottom: 10px; } .dashboard .g-widgets .widget .head h3.widget-title { font-size: 18px; padding: 10px 15px 10px 15px; margin-bottom: 0 !important; } .dashboard .g-widgets .widget .widget_inner table thead tr { border: 1px solid #aeaeae; } .dashboard .g-widgets .widget .widget_inner table.sue-widget thead tr th:last-child, .dashboard .g-widgets .widget .widget_inner table.sue-widget tbody tr td:last-child { width: 18%; right: -1px; position: sticky; text-align: center; border-left: 1px solid #aeaeae; background-color: #f6f6f6; } .dashboard .g-widgets .widget .widget_inner table.sue-widget thead tr th:last-child { background-color: #e1e1e1; } .dashboard .g-widgets .widget .widget_inner table thead tr th .btn, .dashboard .g-widgets .widget .widget_inner table tbody tr td .btn { width: 80%; min-width: 80px; min-height: 32px; } /* ============= Tooltip Custom Bootstrap 5 ====================== */ .custom-tooltip { font-size: 11px; --bs-tooltip-color: #dedede; --bs-tooltip-bg: #303030; --bs-tooltip-border-radius: 4px; } /* ============= Accordion Custom Bootstrap 5 ====================== */ .accordion, .accordion-item { border: 0; background-color: transparent; } .accordion-header { background-color: transparent; border-bottom: 1px dashed #aeaeae; } .accordion-button:focus { outline: 0; border: 0; box-shadow: none; } .accordion-button.collapsed, .accordion-button { border: 0; background-color: #e6e6e6; padding: 10px 15px; margin: 0 15px; width: 80%; max-width: 500px; font-size: 15px; border-radius: 4px 4px 0 0 !important; transition: all 0.4s ease; } .accordion-button:not(.collapsed) { border: 0; background-color: #588ea0; transition: all 0.4s ease; color: #ffffff; } .accordion-button::after { content: "\f078"; transform: rotate(0deg); font-family: "Font Awesome 6 Free"; background-color: transparent; transform: rotate(0deg); } .accordion-button:not(.collapsed)::after { transform: rotate(180deg); color: #ffffff; } .accordion-button.collapsed::after { transform: rotate(0deg); } /* ============= Custom Accordion collapse ====================== */ .c-accordion { background-color: #ececed; padding: 8px 10px; cursor: pointer; margin-bottom: 10px; position: relative; } .c-accordion:hover { background-color: #dbdbdc; } .c-accordion::after { position: absolute; content: "\f078"; right: 10px; transform: rotate(180deg); font-family: "Font Awesome 6 Free"; background-color: transparent; transform: rotate(0deg); transition: all 0.4s ease; } .c-accordion[data-iscollapsed='false']::after { transform: rotate(180deg); transition: all 0.4s ease; } .c-accordion[data-iscollapsed='true']::after { transform: rotate(0deg); transition: all 0.4s ease; } .c-accordion[data-iscollapsed='false'] { background-color: #588ea0; transition: all 0.4s ease; color: #ffffff; } .c-accordion[data-iscollapsed='true'] { background-color: #e6e6e6; transition: all 0.4s ease; } .all-surveys-export-container .row.element-container { border-bottom: 1px dotted #ccc; padding-bottom: 5px; margin-bottom: 10px; } /* =========== Element Properties View =========== */ .modal-dialog-scrollable.element-properties .modal-content { max-height: 100%; overflow: hidden; } .modal-dialog-scrollable.element-properties .modal-body { overflow-y: hidden; max-height: 100%; } .modal-dialog-scrollable.element-properties .modal-body #elementProperites > .row { max-height: 630px; } .modal-dialog-scrollable.element-properties .modal-body #elementProperites > .row .section-element { max-height: 580px; overflow-y: auto; overflow-x: hidden; padding-bottom: 10%; } @media(max-width:1366px) { .modal-dialog-scrollable.element-properties .modal-body #elementProperites > .row .section-element { max-height: 525px; } } @media(max-width:1280px) { .modal-dialog-scrollable.element-properties .modal-body #elementProperites > .row .section-element { max-height: 450px; } } /* ============= Scroll ====================== */ .section-element::-webkit-scrollbar { width: 8px; height: 100%; border-radius: 0px; } .section-element::-webkit-scrollbar-track { border-radius: 3px; background: rgba(0,0,0,0.1); border: 1px solid #ccc; } .section-element::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(0,0,0,0.3); border: 1px solid #aaa; cursor: pointer; } .section-element::-webkit-scrollbar-thumb:hover { background: #26b2c4; border: 1px solid #26b2c4; cursor: pointer; } .section-element::-webkit-scrollbar-thumb:active { background: #26b2c4; border: 1px solid #26b2c4; cursor: pointer; } /* ============= /END Scroll ====================== */ /* subject and code labels distribution head*/ .subject-id { color: #CA3738; font-size: 13px; line-height: 13px; margin: 10px 0; } .subject-access-code { color: #588ea0; font-size: 13px; line-height: 13px; margin: 10px 0; } /* ===================== TABLES ============================= */ .table { max-width: 100%; } .table thead:not(caption) { background-color: #8a8a8a42; border-top: 1px solid #50505059; } .table > thead > tr > th { background-color: transparent; vertical-align: middle; font-weight: bold; text-decoration: none; padding: 2px 8px; min-width: auto; border-right: 1px solid #50505059; } .table > thead > tr > th:last-child { border-right: 0; } /* =============== FB FORM CONTENT TABLES ================ */ .table-responsive { border-left: 10px solid #ffffff; border-right: 10px solid #ffffff; padding: 0 0; margin: 10px 0; } .table thead:not(caption) { background-color: #8a8a8a42; border-top: 1px solid #50505059; } .table thead tr:first-child { border-bottom: 1px solid #50505059; } .table thead tr th { background-color: transparent; } .table thead tr th { vertical-align: middle; } .table thead tr th a, .table thead tr th { font-weight: bold; text-decoration: none; flex-wrap: wrap; } .table thead tr th a:not(.btn) { display: flex; flex-wrap: nowrap; align-items: center; } /* .langde .table thead tr th.break-word-langde, .langde .table thead tr th.break-word-langde a { word-break: break-all; } */ .table thead tr th a i { font-size: 16px; margin: 2px 10px 0 10px; pointer-events: none; float: right; } @media(max-width:1024px) { .table thead tr th a, .table thead tr th { font-size: 14px; } .table thead tr th a i { margin: 2px 5px 0 5px; } } .table tr td .btn.lnkExportCSV { min-width: 154px; } .table tr td .btn.btn-white { background-color: #ffffff; border: 1px solid #979797; } .table .green-text { color: #3299ab; } .table .btn-link:hover { color: #3299ab; transition: all 0.3s ease; } .table > tbody > tr > td { display: table-cell; padding: 8px 6px; } .table > thead > tr > th { padding: 2px 6px; min-width: auto; border-right: 1px solid #50505059; } .table td:not(:last-child,:nth-last-child(2)) a { color: #3299ab; font-weight: 700; text-decoration: none; transition: all 0.4s ease; word-break: break-all; } .table td .btn > a, .table th .btn > a { padding: 0 5px; } .table td .btn-icon > a i, .table th .btn-icon > a i { padding-right: 5px; } .table td:not(:last-child,:nth-last-child(2)) a:hover { color: #025766; transition: all 0.4s ease; } /* =============== TABLE HEAD FIXED ======================= */ .table-head-fixed { height: auto; max-height: 570px; overflow-y: auto; /*border: 1px solid #ff0000;*/ } .table-head-fixed .table { border: 0; } .table-head-fixed .table thead { background-color: #505050; border: 0; position: sticky; top: 0px; z-index: 10; } .table-head-fixed .table thead:after { content: ''; z-index: -1; pointer-events: none; position: absolute; top: 0; display: block; width: 100%; height: 99.9%; /* background-color: #ffffff;*/ } .table-head-fixed .table thead tr { background-color: #e1e1e1; border: 0; } .table-head-fixed .table thead tr td.text-danger { border: 0; box-shadow: inset 0px -1px 0px rgba(var(--bs-danger-rgb)) !important; width: 100%; flex: 1 0 100%; } .table-head-fixed .table thead tr th { /*background-color: #c1c8c5;*/ background-color: #e1e1e1; border: 0; box-shadow: inset 1px 0 0 1px #50505059; color: #101010; min-height: 50px; height: 40px; word-break: normal; vertical-align: middle; } .table-head-fixed .table thead tr th:last-child { box-shadow: inset -1px 0 0px 1px #98959559, inset 1px 0 0 1px #50505059; } .table-head-fixed .table tbody tr td { border: 0; } .table-head-fixed .table thead tr th span { display: inline-flex; } @media(max-height:900px) { .table-head-fixed { max-height: 560px; } } @media(max-height:820px) { .table-head-fixed { max-height: 475px; } } @media(max-height:650px) { .table-head-fixed { max-height: 450px; } } /* =============== TABLE SIZE CELLS 24 ===================== */ .table > thead > tr > th.cell, .table > tbody > tr > td.cell { flex: 1 0 auto; } /* ===================== Table responsive ================== */ .table-responsive { border-left: 10px solid #ffffff; border-right: 10px solid #ffffff; padding: 0 0; margin: 10px 0; } .t-responsive { border-left: 0; border-right: 0; margin: 0; } .t-responsive .table > tbody > tr > td > span.table-responsive-head, .t-responsive .table > tbody > tr > td > .btn.btn-danger.btnDeleteColumns { display: none; } .t-responsive.table-head-fixed .table thead tr th.cell-actions { box-shadow: inset 1px 0 0 1px #50505059, inset -1px 0 0 0px #50505059; } /* ======= TABLE HORIZONTAL ALIGNAMENT ============ */ table .center .i-checks, div.center .checkbox { padding-left: 0; width: 100%; display: block; transition: none; } table .center .icheckbox_square-green, div.center .checkbox .icheckbox_square-green { margin: 0 calc(50% - 10px); width: auto; transition: none; } .table td.disabled-icheck.center { position: relative; z-index: 0; } /* ================= Sticky Table column ================= */ .sticky-col { position: -webkit-sticky; position: sticky !important; } /*for Firefox*/ .sticky-col:after { content: ''; position: absolute; top: 0px; width: 100%; height: 0px; } /*for the first row, because th border button has slightly different color*/ tr:first-of-type td.sticky-col:after { bottom: -1px; border-top: 1px solid #dddddd; } .sticky-col-right { right: 0px !important; padding-left: 10px !important; /*border-top: 1px solid #505050;*/ display: inherit; border-bottom: 1px; } /*for Firefox*/ .sticky-col-right:after { right: 0; } .sticky-col-left { left: 0px !important; padding-right: 10px !important; } /*Only for Tasks Overview page. To be more general we need to calculate the offset (left) with js*/ .sticky-col-left-2nd { left: 68px !important; padding-right: 10px !important; } /*for Firefox*/ .sticky-col-left:after, .sticky-col-left-2nd:after { left: 0; } .table-striped > tbody > tr:nth-of-type(2n+1) > td.sticky-col-right, .table-striped > tbody > tr:nth-of-type(2n+1) > td.sticky-col-left, .table-striped > tbody > tr:nth-of-type(2n+1) > td.sticky-col-left-2nd { background-color: #f9f9f9; border-bottom: 1px solid #dee2e6; z-index: 1; } .table-striped > tbody > tr:nth-of-type(2n) > td.sticky-col-left, .table-striped > tbody > tr:nth-of-type(2n) > td.sticky-col-left-2nd, .table-striped > tbody > tr:nth-of-type(2n) > td.sticky-col-right { background-color: #ffffff; border-bottom: 1px solid #dee2e6; } .table-striped > thead > tr > th.sticky-col-left, .table-striped > thead > tr > th.sticky-col-left-2nd { padding: 5px 0px; } .table-striped > thead > tr > th.sticky-col-right { padding: 5px 5px; display: table-cell; background-color: #e1e1e1; } /* ================== TABLE BTN ================= */ .table .btn { margin: 2px 0.5% 2px 0.5%; min-height: 35px; min-width: 38px; } .table td .btn > a, .table th .btn > a { padding: 0 5px; } .table td .btn-icon > a i, .table th .btn-icon > a i { padding-right: 5px; } .table td .btn.btn-import::before { content: '\f56f'; } .table td .btn:before { position: absolute; font-family: "Font Awesome 6 Free"; color: #ffffff; font-size: 16px; pointer-events: none; } .table td .btn.btn-new::before { content: '\f0fe'; } .table td button.btn-icon > i { padding-right: 5px; } .table td .btn.btn-action:before { content: ''; } table td .btn > input { background-color: transparent; border: 0; font-weight: 600; color: #fff; margin: 0; padding: 0 0 0 5px; height: auto; width: auto; position: relative; min-width: auto; min-height: auto; } .table td .btn .fa-solid { margin: 0; font-size: 16px; } .table tr td .btn.lnkExportCSV { min-width: 154px; } .table tr td .btn.btn-white { background-color: #ffffff; border: 1px solid #979797; } .table .btn-link:hover { color: #3299ab; transition: all 0.3s ease; } /* Table Links and labels */ .table .green-text { color: #3299ab; } @media(max-width:1024px) { .t-responsive .table, .t-responsive .table thead, .t-responsive .table tbody { display: block; width: 100%; } .t-responsive .table thead tr, .t-responsive .table tbody tr { display: flex; flex-wrap: nowrap; max-width: 100%; } .t-responsive .table > tbody > tr > td { padding: 4px 8px; } .t-responsive .table thead tr th { align-items: center; white-space: normal; word-break: break-word; } .t-responsive .table thead tr th.center, .t-responsive .table tbody tr td.center { text-align: left; justify-content: flex-start; transition: none; } .t-responsive .table > tbody > tr > td .warning-sign { margin: 0; font-size: 12px; } .t-responsive .table thead tr th.left, .t-responsive .table tbody tr td.left { text-align: left !important; justify-content: flex-start !important; } .t-responsive .table thead tr th.right, .t-responsive .table tbody tr td.right { text-align: right !important; justify-content: flex-end !important; } .t-responsive .table > tbody > tr > td.sticky-col-right { right: auto; } .t-responsive .table tr > td { max-width: none; max-width: 100%; width: 100%; position: relative; flex-wrap: wrap; } .t-responsive .cell-actions, .table-striped > thead > tr > th.sticky-col-right { width: 100%; padding-top: 5px; display: flex; } .t-responsive .table > tbody > tr > td > .btn.btn-danger.btnDeleteColumns { display: inline-flex; position: sticky; top: 0; left: calc(100% - 30px); width: 30px; height: 20px; min-width: 30px; min-height: 20px; z-index: auto; } .t-responsive .table > tbody > tr > td > .btn.btn-danger.btnDeleteColumns i { font-size: 12px; color: #ffffff; } .t-responsive .table > tbody > tr > td > .btn.btn-danger.btnDeleteColumns { } .t-responsive .table > tbody > tr > td > span.table-responsive-head { background-color: #f3e8d2; font-weight: bold; border-radius: 3px; display: inline-flex; align-items: center; font-size: 12px; color: #505050; margin: 0 10px 0 2px; padding: 2px 5px; position: relative; } .t-responsive .table > tbody > tr > td > span.table-responsive-head a { font-weight: bold; color: #505050; text-decoration: none; } .t-responsive .table > tbody > tr > td > span.table-responsive-head i { margin-left: 4px; color: #3299ab; } .t-responsive .table > tbody > tr > td > span:not(.table-responsive-head) { padding: 0 5px; width: auto; } .t-responsive .table thead, .t-responsive .table thead tr { background-color: transparent; } .t-responsive .table > thead > tr > th:not(.cell-actions) { display: none; width: 0; height: 0; } .t-responsive .table > tbody > tr { display: flex; flex-direction: column; flex-wrap: wrap; border: 1px solid #aeaeae; border-radius: 2px; margin: 2px 0 4px 0; } .t-responsive .table > tbody > tr > td { display: flex; flex-wrap: wrap; justify-content: start; align-items: center; padding: 2px 6px; text-align: left !important; border-bottom: 1px solid #dcdcdc !important; } .t-responsive .table > tbody > tr > td:last-child { border-bottom: 0px solid #dcdcdc !important; } .t-responsive .table > tbody > tr > td:first-child { padding: 2px 6px 2px 6px; } .t-responsive .table > tbody > tr > td .icheckbox_square-green, .t-responsive .table > tbody > tr > td .btn { margin: 4px 3px 2px 4px; } .bootstrap-datetimepicker-widget table { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; border-collapse: separate !important; background-color: transparent !important; border: none !important; } .bootstrap-datetimepicker-widget thead, .bootstrap-datetimepicker-widget tbody { display: table-row-group !important; } .bootstrap-datetimepicker-widget tr { display: table-row !important; height: auto !important; } .bootstrap-datetimepicker-widget th, .bootstrap-datetimepicker-widget td { display: table-cell !important; float: none !important; width: calc(100% / 7) !important; min-width: calc(100% / 7) !important; max-width: calc(100% / 7) !important; height: 30px !important; line-height: 30px !important; padding: 0 !important; text-align: center !important; vertical-align: middle !important; white-space: nowrap !important; border: none !important; box-sizing: border-box !important; position: static !important; transform: none !important; } .bootstrap-datetimepicker-widget th.dow { font-weight: bold !important; } .bootstrap-datetimepicker-widget td { cursor: pointer !important; } .bootstrap-datetimepicker-widget td.active, .bootstrap-datetimepicker-widget td.today { background-color: #337ab7 !important; color: #fff !important; border-radius: 4px !important; } .bootstrap-datetimepicker-widget td.disabled { color: #999 !important; background-color: transparent !important; cursor: not-allowed !important; } } @media(max-width:1024px) { .table > thead > tr > th a, .table > thead > tr > th { font-size: 14px; } .table thead tr th a i { margin: 2px 5px 0 5px; } .table .btn { width: auto; min-width: 60px; } } /* ================== DASHBOARD TABLES ================= */ .dashboard .table td .btn { padding-left: 10px; padding-right: 10px; } .dashboard .table td .btn:before { content: none; } .dashboard .g-widgets .widget .widget_inner table thead tr { border: 1px solid #aeaeae; } .dashboard .g-widgets .widget .widget_inner table.sue-widget thead tr th:last-child, .dashboard .g-widgets .widget .widget_inner table.sue-widget tbody tr td:last-child { width: 18%; right: -1px; position: sticky; text-align: center; border-left: 1px solid #aeaeae; background-color: #f6f6f6; } .dashboard .g-widgets .widget .widget_inner table.sue-widget thead tr th:last-child { background-color: #e1e1e1; } .dashboard .g-widgets .widget .widget_inner table thead tr th .btn, .dashboard .g-widgets .widget .widget_inner table tbody tr td .btn { width: 80%; min-width: 80px; min-height: 32px; } /*================================================================================*/ /*================================================================================*/ /*============================== CLEAN =======================================*/ /*================================================================================*/ /*================================================================================*/ /*================================================================================*/ /* ==== Slider Area in public form ====*/ @media (max-width: 768px) { .public .system-slider-area .slider-direction { font-size: 35px; height: 100%; opacity: 0.45; cursor: pointer; display: none; /*width: 90px;*/ width: 35px; position: absolute; z-index: 1000000; } } .public .system-slider-area .slider-direction-left { left: 0; } .public .system-slider-area .slider-direction-right { right: 0; } .public .system-area-select { cursor: default; min-height: 0; max-height: 0; height: 0; } .public .system-formElement { border: 0; } .line { height: 15px; width: 100%; background-color: #676a6c; } .line-separator { height: 15px; width: 100%; } /* ============== Uploaded file icon =========== */ .uploaded-file-icon { margin: 0 auto; width: 40px; height: 50px; } /* ============== User Answer Review =========== */ .user-review-container { padding: 20px 30px 10px 30px; background-color: #fefefe; border-radius: 10px; overflow: auto; } .background-agree { background: rgba(0, 170, 0, .11); } .background-disagree { background: rgba(255, 0, 0, .07); } .agree-sign, .disagree-sign { font-size: 50px; display: none; float: right; margin-right: 20px; margin-top: -5px; } .agree-sign-view, .disagree-sign-view { float: none; margin-left: 15px; } .answer-agree { outline: 0; background-color: #ffffff !important; color: #23c6c8 !important; } .answer-disagree { outline: 0; background-color: #ffffff !important; color: #ed5565 !important; } .answer-agree.selected { background-color: #23c6c8 !important; color: #ffffff !important; } .answer-disagree.selected { background-color: #ed5565 !important; color: #ffffff !important; } .reviewed-by { font-size: 13px; margin-bottom: 25px; border-bottom: 1px dashed #808080; } .relative-pos { position: relative; bottom: 3px; } .answers-table-title { position: relative; top: -3px; } .font-10 { font-size: 10px; } .font-12 { font-size: 12px; } .font-13 { font-size: 13px; } .font-14 { font-size: 14px; } .font-15 { font-size: 15px; } .font-16 { font-size: 16px; } .font-18 { font-size: 18px; } .font-20 { font-size: 20px; } /* ========== Options tooltip for forms =========*/ .options-tooltip .radio-format-tooltip { position: relative !important; } .options-tooltip .radio-format-tooltip:hover:after { background: #333; background: rgba(0,0,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(data-option-tooltip-title); left: -0.5%; padding: 5px 15px; position: absolute; z-index: 10000000; width: auto; } .options-tooltip .radio-format-tooltip:hover:before { border: solid; border-color: #333 transparent; border-width: 6px 6px 0 6px; bottom: 20px; content: ""; left: 1%; position: absolute; z-index: 99000; } /* =========== Reminders Panal ============ */ .reminders-panel { margin: 15px 0 10px 0; } .reminders-panel .panel-body { padding-bottom: 0; } .reminders-panel .collapse.in { box-shadow: 0 3px 3px #1c84c6; } .reminders-panel .panel-link { display: block; width: 100%; padding: 10px 15px; background-color: #dddddd; margin: -10px 0 -10px 0; font-weight: 700; font-size: 13px; } .system-reminder-tile .row { margin-left: 0px; margin-right: 0px; } .reminder-tile-sent { /*background-color: #ECFFDC;*/ background-color: rgba(0, 128, 0, 0.18); } .reminder-tile-sent .reminder-sent-label { color: #008000; text-align: center; } .reminder-tile-sent .reminder-sent-details { color: #008000; } .reminder-tile-sent .reminder-sent-users { max-height: 300px; overflow-y: auto; background-color: #f9f9f9; padding: 15px; border-radius: 4px; box-shadow: 0px 4px 10px rgba(0,0,0,0.1); width: 60%; min-width: 300px; margin: auto; } .reminder-tile-sent .reminder-sent-info-label { display: flex; align-items: center; gap: 10px; background-color: #fff; padding: 12px; margin-bottom: 10px !important; border-radius: 8px; box-shadow: 0px 3px 6px rgba(0,0,0,0.12); width: 100%; transition: transform 0.2s; flex-wrap: wrap; } .reminder-tile-sent .reminder-sent-num { background-color: #0073e6; color: #fff; font-weight: bold; padding: 3px 8px; border-radius: 50%; flex-shrink: 0; text-align: center; } .reminder-tile-sent .reminder-sent-info { flex: 1; word-wrap: break-word; overflow-wrap: break-word; min-width: 0; } .reminder-tile-sent .reminder-sent-destination { color: #0073e6; } .reminder-tile-sent .reminder-sent-fullname { color: #333; } .reminder-tile-sent .reminder-sent-date { color: #888; } .system-reminder-timeperiod { position: relative; } .reminder-time-period-info { position: absolute; font-size: 20px; cursor: pointer; color: #CA3738; top: 0px; right: 10px; } /* =========== Collapse Panels ========================== */ .monitoring-conditions-panel .monitoring-conditions-panel-collapse { border: 1px solid #dedede; border-radius: 4px; padding: 15px 15px 15px 10px; margin: 5px 0 0 30px; } .anonymous-panel { margin: 0 0 5px 0 !important; } .anonymous-panel .panel-body { padding: 0 25px; } .anonymous-panel .collapse.in { } .anonymous-panel .panel-heading { padding: 0 15px 20px 15px; } .anonymous-panel .panel-link.collapsed { color: #b92627; font-size: 14px; } .anonymous-panel .panel-link { color: #1ab394; font-weight: bold; font-size: 14px; } .btn-group-no-float > .btn { position: relative; display: inline-block; float: none; } .btn-group-no-float .btn + .btn, .btn-group-no-float .btn + .btn-group-no-float, .btn-group-no-float .btn-group-no-float + .btn, .btn-group-no-float .btn-group-no-float + .btn-group-no-float { margin-left: -5px; } .progress { border: 1px solid #b8b8b8; } @media (min-width: 992px) { .modal-lg { width: 980px; } .modal-queries { width: 900px; } } @media (max-width: 992px) { .timeline-stage-timespan .timespan { display: none; } } .checkbox-label { padding-left: 0px !important; font-weight: bold !important; cursor: pointer; } /* 5 Columns */ .col-xs-20, .col-sm-20, .col-md-20, .col-lg-20 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } .col-xs-20 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-20 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-20 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-20 { width: 20%; float: left; } } /* Set width on the form input elements since they're 100% wide by default */ /* input, select, textarea { max-width: 280px; } */ .error { color: #a94442; } .click-active > *, .click-active .form-group > * { cursor: pointer; } /* SorTable */ .sortable-placeholder-page { border: 1px dashed #2d6ca2; background-color: #8db9df; position: relative; height: 100%; width: 150px; display: inline-block; margin-left: 5px; margin-right: 5px; margin-top: 10px; } .sortable-placeholder-area { border: 1px dashed red; background-color: #ffc9c9; height: 100px; margin-bottom: 5px; } .sortable-placeholder-element { border: 1px dashed red; background-color: #ffc9c9; height: 100px; margin-bottom: 20px; } .sortable-placeholder-element-option { border: 1px dashed red; background-color: #EEE; height: 150px; } .sortable-placeholder-element-jump, .sortable-placeholder-element-validation { border: 1px dashed red; background-color: #EEE; height: 150px; border-radius: 5px; margin-bottom: 15px; } .sortable-placeholder-survey-answers-setting { border: 1px dashed red; background-color: #EEE; height: 300px; margin: 10px 0px; } .system-formElement-review { margin: 20px 0; } #editFormMode .system-area-conversational { border: 1px dashed blue; background-color: #e3e3e3; overflow-y: scroll; } .system-slider-area { border: 1px solid #ff0000; } .system-area-select { cursor: pointer; min-height: 30px; } .system-formElement:hover, .system-formElement.selected { border: 1px dashed blue; } #editFormMode .system-area-conversational:hover, #editFormMode .system-area-conversational.selected { border: 1px dashed blue; background-color: #e0e0e0; } #editFormMode .system-area-conversational:hover > .conversational-area-info, #editFormMode .system-area-conversational.selected > .conversational-area-info { right: 65px; } .system-slider-area:hover { border: 1px dashed #ff0000; } .slider-area-separator { border-bottom: 1px dotted #ff0000; margin: 20px 0 35px; } .system-option-tile-options, .system-calculation-tile-calculations, .system-timeline-stage-tile-timelines, .system-reminder-tile-reminders, .system-element-condition-tile-conditions, .system-jump-tile-conditions, .system-validation-tile-conditions, .system-project-subject-inclusion-tile-conditions, .system-survey-cn-conditions-block-tile-conditions, .system-survey-feedback-tile-conditions, .system-survey-cn-tile-notifications, .system-survey-answers-setting-tile-settings, .system-survey-answers-setting-date-tile-settings, .system-form-chart-tile-charts, .system-calculation-tile-delete, .system-timeline-stage-tile-delete, .system-calculation-brackets-delete-container, .system-calculation-brackets-tile-delete, .system-monitoring-or-condition-tile-conditions, .system-monitoring-and-condition-tile-conditions, .system-chart-value-tile-chart-values { position: absolute; display: none; } .system-validation-condition-tile-conditions, .system-reminder-tile-reminders, .system-condition-tile-conditions, .system-survey-cn-condition-tile-conditions, .system-jumpCondition-tile-conditions { display: none; } .system-jump-tile-conditions, .system-validation-tile-conditions, .system-project-subject-inclusion-tile-conditions, .system-survey-cn-conditions-block-tile-conditions { display: block; } .system-all-calculations-delete-container, .system-all-form-charts-delete-container, .system-all-survey-reminders-delete-container, .system-all-timeline-stage-reminders-delete-container, .system-all-monitoring-conditions-delete-container { position: absolute; } .system-option-tile-options { right: 0; top: 0; } .system-option-tile-options .btn.btn-danger { margin: 0; min-width: 40px; } .system-option-tile-options .btn.btn-danger .fa-solid { margin: 0; } .system-jumpCondition-tile-conditions, .system-calculation-tile-calculations, .system-survey-cn-tile-notifications, .system-form-chart-tile-charts, .system-monitoring-and-condition-tile-conditions, .system-chart-value-tile-chart-values { right: 0px; top: 9px; } .system-monitoring-and-condition-tile-conditions { top: 12px; } .system-chart-value-tile-chart-values { right: 0px; top: 16px; } .system-timeline-stage-tile-timelines, .system-reminder-tile-reminders { right: 0px; top: 10px; } .system-form-chart-tile-charts { right: 10px; top: 15px; } .system-survey-cn-tile-notifications, .system-survey-answers-setting-tile-settings { right: 15px; top: 15px; } .system-survey-answers-setting-date-tile-settings { right: 0px; top: 15px; } .system-conditions-container { /*border-bottom: 1px dashed #808080;*/ border-top: 1px dashed #808080; margin-top: 10px; } .system-jump-conditions-container, .system-survey-cn-conditions-block-conditions-container, .system-survey-cn-conditions-block-conditions-container, .system-form-pageconditions-conditions-tile-container { /*border-bottom: 1px dashed #808080;*/ border-top: 1px dashed #808080; margin-top: 10px; } .system-survey-cn-conditions-block-conditions-container, .system-survey-cn-conditions-block-conditions-container { padding: 10px 0px; } .system-survey-cn-conditions-block-properties-container { margin: 0px 3px 3px 3px; padding: 35px 10px 0px 5px; border-top: 1px dashed #808080; } .system-calculations-container { /*border-bottom: 1px dashed #808080;*/ border-top: 1px dashed #808080; margin-top: 10px; } .system-monitoring-and-conditions-container { border-top: 1px dashed #808080; border-bottom: 1px dashed #808080; margin: 10px 0; width: 100%; } .system-element-condition-tile-conditions, .system-jump-tile-conditions, .system-validation-tile-conditions, .system-project-subject-inclusion-tile-conditions, .system-survey-cn-conditions-block-tile-conditions, .system-survey-feedback-tile-conditions, .system-monitoring-or-condition-tile-conditions, .system-calculation-tile-delete, .system-calculation-brackets-tile-delete, .system-all-calculations-delete-container, .system-all-form-charts-delete-container, .system-survey-all-cns-delete-container, .system-survey-all-answer-settings-delete-container, .system-all-survey-reminders-delete-container, .system-all-timeline-stage-reminders-delete-container, .system-all-monitoring-conditions-delete-container { right: 5px; float: right; position: relative; } .system-all-calculations-delete-container, .system-all-form-charts-delete-container, .system-survey-all-cns-delete-container, .system-survey-all-answer-settings-delete-container, .system-all-survey-reminders-delete-container, .system-all-timeline-stage-reminders-delete-container, .system-all-monitoring-conditions-delete-container { right: 7px; float: right; position: relative; } .system-survey-all-cns-delete-container, .system-survey-all-answer-settings-delete-container, .system-all-survey-reminders-delete-container, .system-all-timeline-stage-reminders-delete-container { right: 9px; } .system-option-tile:hover .system-option-tile-options, .system-condition-tile:hover .system-condition-tile-conditions, .system-jumpCondition-tile:hover .system-jumpCondition-tile-conditions, .system-validation-condition-tile:hover .system-validation-condition-tile-conditions, .system-survey-cn-condition-tile:hover .system-survey-cn-condition-tile-conditions, .system-calculation-tile:hover .system-calculation-tile-calculations, .system-timeline-stage-tile:hover .system-timeline-stage-tile-timelines, .system-reminder-tile:hover .system-reminder-tile-reminders, .system-element-condition-tile:hover .system-element-condition-tile-conditions, .system-jump-tile:hover .system-jump-tile-conditions, .system-validation-tile:hover .system-validation-tile-conditions, .system-project-subject-inclusion-tile:hover .system-project-subject-inclusion-tile-conditions, .system-survey-cn-conditions-block-tile:hover .system-survey-cn-conditions-block-tile-conditions, .system-form-pageconditions-condition-block-tile:hover system-form-pageconditions-conditions-block-tile-conditions, .system-survey-feedback-tile:hover .system-survey-feedback-tile-conditions, .system-survey-cn-tile:hover .system-survey-cn-tile-notifications, .system-survey-answers-setting-tile:hover .system-survey-answers-setting-tile-settings, .system-survey-answers-setting-date-tile:hover .system-survey-answers-setting-date-tile-settings, .system-form-chart-tile:hover .system-form-chart-tile-charts, .system-calculation-tile:hover .system-calculation-tile-delete, .system-timeline-stage-tile:hover .system-timeline-stage-tile-delete, .system-reminder-tile:hover .system-reminder-tile-delete, .system-calculations-brackets-container:hover > .system-calculation-brackets-tile-delete, .system-monitoring-or-condition-tile:hover .system-monitoring-or-condition-tile-conditions, .system-monitoring-and-condition-tile:hover .system-monitoring-and-condition-tile-conditions, .system-chart-value-tile:hover .system-chart-value-tile-chart-values { display: inline-block; z-index: 1000; } .lnkAddCondition, .lnkAddFeedbackCondition, .lnkAddCalculation, .lnkAddCalculationBrackets, .btnAddMonitoringANDCondition { float: right; margin-right: 3px; } .system-element-condition-tile:hover .lnkAddCondition { /*margin-right: 50px;*/ } .system-survey-answers-setting-type-container { border-bottom: 1px dotted; } .system-survey-answers-setting-dates-header { border-bottom: 1px dotted #222222; } .modal-add-margins { margin: 0px 3px 15px 0px; } .reminders-desc-container { font-size: 16px; } .reminders-desc-container .reminders-desc { margin-left: 7px; padding-top: 7px; display: inline-block; } .reminders-desc-container .reminders-desc i { font-size: 20px; } .reminders-desc-container .reminders-desc span { margin-left: 5px; } .reminder-tile { margin: 3px; padding: 10px 5px 15px 5px; border-top: 1px dashed #808080; border-bottom: 1px dashed #808080; position: relative; } .reminder-tile .reminder-activate { margin-top: 5px; font-size: 14px; } .reminder-tile .reminder-message { resize: none; /*margin-top: 10px;*/ height: 135px } .reminder-tile .reminder-additionalEmailAddresses { resize: none; height: 80px; } .reminder-tile .reminder-tile-separator { height: 4px; background-color: #808080; position: absolute; top: 0; left: 0; right: 0; } .reminder-tile .reminder-user-types { display: inline-block; margin-right: 25px; margin-top: 2px; } .system-reminder-activated { margin-right: -5px; } .system-option-tile { position: relative; padding: 20px 4px 0 4px; } .system-condition-tile, .system-jumpCondition-tile, .system-validation-condition-tile, .system-survey-cn-condition-tile, .system-calculation-tile, .system-timeline-stage-tile, .system-reminder-tile, .system-monitoring-and-condition-tile, .system-chart-value-tile { position: relative; } .system-jumpCondition-tile { min-height: 55px; } .system-validation-condition-tile { margin: 5px 3px 10px; padding: 10px 10px 0px 5px; min-height: 50px; } .system-condition-tile-view-container .condition-view-and-text { text-align: center; margin: 10px 0px 15px 0px; font-size: 15px; font-weight: bold; font-style: italic; } .system-element-condition-tile, .system-jump-tile, .system-validation-tile, .system-project-subject-inclusion-tile, .system-project-system-notification-tile, .system-form-pageconditions-condition-block-tile, .system-survey-cn-conditions-block-tile, .system-survey-feedback-tile, .system-survey-cn-tile, .system-form-chart-tile, .system-element-calculations-container, .system-timeline-stages-container, .system-survey-reminders-container, .system-monitoring-or-condition-tile, .system-form-animation-tile, .system-survey-answers-setting-tile { position: relative; background-color: #ffffff; border: 1px dotted #808080; box-shadow: 2px 2px 4px #6f6f6f6e; margin: 0 3px; padding: 10px 15px; border-radius: 3px; } .system-project-subject-inclusion-tile { padding-bottom: 40px; } .system-timeline-stage-reminders-container { position: relative; background-color: #ffffff; margin: 0 3px; padding: 0; } .system-form-chart-tile { padding: 15px 10px; } .system-survey-cn-tile { padding: 15px 15px; } .system-survey-answers-setting-tile { padding: 50px 15px 15px 15px; } .notification-user-types { display: inline-block; margin-right: 25px; margin-top: 15px; } .confirmation-notification-user-types { display: inline-block; margin-right: 25px; margin-top: 15px; } .system-element-condition-tile-container, .system-jump-tile-container, .system-validation-tile-container, .system-form-pageconditions-conditions-block-tile-container, .system-survey-cn-conditions-block-tile-container, .system-survey-feedback-tile-container, .system-calculation-tile-container, .system-survey-cn-tile-container, .system-monitoring-or-condition-tile-container, .system-form-chart-tile-container, .system-project-subject-inclusion-tile-container, .system-project-system-notifications-tile-container, .system-survey-answers-setting-date-tile-container { margin-bottom: 20px; } .system-survey-cn-tile-container, .system-form-chart-tile-container { margin-bottom: 40px; } .system-survey-answers-setting-tile-container { margin-bottom: 50px; } .condition-or-text, .monitoring-or-text { text-align: center; margin-bottom: 20px; font-size: 20px; font-weight: bold; font-style: italic; font-family: georgia; } .system-element-condition-tile-view-container .condition-view-or-text { padding: 0px 10px; position: relative; top: 15px; background-color: #f3f3f4; font-size: 20px; font-weight: bold; font-style: italic; font-family: georgia; } .system-validation-condition-tile .logicalOperatorType-container { padding-left: 0px; padding-right: 5px; } .system-validation-condition-tile .all-versions-condition { padding-left: 0px; padding-right: 0px; padding-top: 15px } . .system-community { display: none; } .system-calculation-operationType, .system-calculation-beforeBracketsOperationType { background-color: #BDFCC9 !important; color: #000000 !important; } .control-label.required { position: relative; } .control-label.required:after { position: absolute; content: "\f069"; font-family: "Font Awesome 6 Free", 'FontAwesome'; font-size: 10px; color: #ff0000; right: 6px; top: 0; } i.required { color: red; position: relative; font-style: normal; font-weight: 500; font-family: 'FontAwesome'; font-size: 12px; top: -5px; left: 0; line-height: 6px; } i.required .fa-asterisk:before { content: "\f069"; } .slider-container { margin: 5px 20px 49px 20px; } .reset-slider-container { min-height: 30px; } .reset-slider { margin-top: -30px; } .reset-slider i { font-size: 16px; } .radio-horizontal { display: inline-block; } .radio-vertical { display: block; margin-bottom: 5px; } .element-condition-view-visible { border-bottom: 1px dashed #808080; padding-bottom: 15px; padding-top: 10px; text-align: center; } .condition-and, .monitoring-and { font-size: 18px; font-weight: bold; font-style: italic; line-height: 34px; margin-left: 10px; text-align: center; } /***********ProgressBars**********/ .progress-bar-container { margin-top: 10px; } .progress-bar-percent { padding: 0; font-size: 14px; font-weight: bold; float: none; margin: auto; height: 18px; width: 50%; } /***********LoginBox**********/ .login-table { margin: auto; } .login-table td { padding: 5px 5px 5px 5px; } div.review label { font-weight: normal; } div.review ul.answer { padding-left: 25px; } .forgot-password-link { font-size: 16px; color: #676a6c; display: block; margin-bottom: 5px; } .forgot-password-link:hover { text-decoration: underline; color: #676a6c; } .need-help-link { font-size: 16px; color: #676a6c; display: block; margin-bottom: 5px; font-weight: bold; } .need-help-link:hover { text-decoration: underline; color: #676a6c; } .login-desc { font-weight: bold; font-size: 16px; margin: 0 0 15px 0; } .site-description { font-size: 13.5px; line-height: 14px; margin-bottom: 0; position: relative; text-align: center; font-family: 'Montserrat', sans-serif; color: #8392b0; } /****************************/ .logout { float: right; } .register-table { margin: auto; } /*********************************************************/ /* Notifications */ /*********************************************************/ div.notifications { z-index: 10000; display: block; position: fixed; left: 50%; top: 2px; padding: 2px; min-height: 30px; margin: 2px 0 0 -100px; line-height: 20px; font-size: 12px; text-align: center; width: 200px; border: solid 1px #006AB3; background-color: #fff; cursor: pointer; color: #006AB3; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; opacity: 0.7; } div.notifications.error { margin: 2px 0 0 -150px; width: 300px; border: solid 1px #E01B6A; background-color: #FFF2F7; color: #E01B6A; opacity: 1; } div.notifications p { text-align: center; } div.notifications span.close { width: 10px; height: 10px; display: inline-block; position: absolute; right: 5px; top: 5px; /*background: url("images/close.png") no-repeat scroll 1px 1px transparent;*/ opacity: 0.7; line-height: 10px; font-size: 10px; font-weight: bold; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } div.notifications span.close:hover { opacity: 1; border: 1px solid #E01B6A; } /*********************************************************/ /* End of Notifications */ /*********************************************************/ .red-text { color: #CA3738; } .orange-text { /*color: #f8ac59;*/ color: #FFA500; } .green-text { color: #1AB394; } .blue-text { color: #0000FF; } .light-blue-text { color: #0AB4FF; } .info-text { color: #23c6c8; } @media (min-width: 1200px) { #side-content { position: fixed; top: 50px; bottom: 0; left: 0; background-color: #FFF; overflow-x: hidden; overflow-y: scroll; min-width: 300px; max-width: 300px; width: 300px; padding: 25px; } } /*********** Captcha **********/ span.captcha-refresh { background: transparent url("images/captcha-refresh.png") no-repeat scroll 0 0; cursor: pointer; display: inline-block; float: right; height: 22px; margin-top: 30px; width: 22px; } div.captcha { padding: 10px 10px 10px 0; text-align: center; } /*********** Image Control **********/ .image-container { text-align: center; } .image-container-slider { width: auto; margin-left: -95px; margin-right: -95px; } .image-container-frame { background-color: #7e7e7e; padding: 5px; } .image-container-frame-slider { background-color: #7e7e7e; padding: 5px 0px; } .image-container .a-background { display: block; background-color: #f3f3f4; } .image-container img.app-image { display: inline-block; max-width: 100%; } img.slider-frame { border-top: 5px solid #7e7e7e; border-bottom: 5px solid #7e7e7e; padding: 5px 0; } img.not-slider-frame { border: 5px solid #7e7e7e; padding: 5px; } /* =============== IMAGE DRAW ================== */ .image-draw-container div.draw-pad-frame { border: 5px solid #7e7e7e; padding: 5px; } /* =============== 25 Image draw & responsive =============== */ .imageDraw-group { margin: 10px auto; } .imageDraw-group .image-draw-container { width: auto; position: relative; display: flex; justify-content: center; text-align: center; margin: 0 auto; /*border: 1px dashed #f00;*/ } .draw-pad-img { background-position-x: center; background-position-y: center; } .imageDraw-group svg { /*border: 1px solid;*/ } .imageDraw-group .draw-pad { position: relative; margin: 0 auto; /*border: 1px dashed #f00;*/ } .imageDraw-group .draw-pad-img { background-size: contain; background-repeat: no-repeat; position: absolute; margin: 0 auto; /*border: 1px solid #0f0;*/ } .imageDraw-group .draw-pad-buttons { display: flex; flex-wrap: nowrap; justify-content: center; width: 100%; flex-direction: row; margin: 0 0 15px 0; z-index: 2; position: relative; } .imageDraw-group .draw-pad-buttons .btn { width: auto; margin: 5px 5px; padding: 5px 5px; height: 35px; display: flex; justify-content: center; align-items: center; z-index: 90; } .imageDraw-group .draw-pad-buttons .btn.btn-paint { display: none; } @media (max-width: 1024px) { .imageDraw-group .courtain-paint { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 100px; z-index: 1; background-color: #80808011; cursor: not-allowed; } body.no-scroll { overflow-y: hidden; } .imageDraw-group .courtain-paint.active-paint { display: none; } .imageDraw-group .draw-pad-buttons .btn.btn-paint { display: flex; position: relative; z-index: 2; background-color: #808080; color: #ffffff; } .imageDraw-group .draw-pad-buttons .btn.btn-paint.active { background-color: var(--titleColor); border: 2px solid #f00; } } @media (max-width: 480px) { .imageDraw-group .draw-pad-buttons .btn { font-size: 12px !important; } } /*.image-map-container img.mapster_el { border: 5px solid #7e7e7e; }*/ .image-container div.image { background-position: center center; width: 100%; height: 500px; background-repeat: no-repeat; } .image-container div.image.slider { border-top: 5px solid #ffffff; border-bottom: 5px solid #ffffff; } .image-container div.image.not-slider { border: 5px solid #ffffff; } /*********** Feedback **********/ .global-feedback-container { border-bottom: 1px dotted #808080; margin-bottom: 30px; margin-top: 10px; padding-bottom: 20px; } .global-feedback-desc { text-align: center; font-size: 15px; margin-bottom: 20px; } /*********** Survey Logo Container **********/ .survey-logo-container { clear: both; margin-bottom: 15px; } /*********** Survey Name - Review **********/ h1.survey-name { border-bottom: 2px solid #8F8F8F; font-weight: bold; padding-bottom: 5px; font-size: 32px; margin-bottom: 20px; margin-top: 0px; } .review-page-clear { clear: both; margin-top: 20px; } .turnDeviceNotification { position: fixed; top: 0; left: 0; height: 100%; width: 100%; display: none; /*background-image: url('images/turn-to-landscape.png');*/ background-size: 100% 100%; background-color: #000000; z-index: 1001; } .opening-bracket-container { display: inline-block; font-size: 36px; position: absolute; top: -2px; } .closing-brackets-container { display: inline-block; font-size: 36px; position: relative; top: -12px; right: 20px; display: none; } .closing-brackets-container-end { display: inline-block; font-size: 36px; padding-right: 6%; position: relative; text-align: right; width: 100%; display: none; } .field-validation-error { color: #cc5965; } /*********************Timeline*************************/ .timeline-history-container:nth-child(odd) { background-color: #f9f9f9; } .timeline-history-container:nth-child(even) { background-color: #ffffff; } .crfs-history-container:nth-child(odd) { background-color: #f9f9f9; } .crfs-history-container:nth-child(even) { background-color: #ffffff; } .predefined-timelines-list, .predefined-timeline-stages-desc, .timeline-history, .predefined-date-of-first-visit-container { display: none; } .timeline-filter-placeholder .input-placeholder ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-size: 12px; } .timeline-filter-placeholder .input-placeholder ::-moz-placeholder { /* Firefox 19+ */ font-size: 12px; } .timeline-filter-placeholder .input-placeholder :-ms-input-placeholder { /* IE 10+ */ font-size: 12px; } .timeline-filter-placeholder .input-placeholder :-moz-placeholder { /* Firefox 18- */ font-size: 12px; } .answer-version-container div, .answer-comments-queries-container div { margin: auto; cursor: initial; font-weight: bold; } .answer-version-container div.distribution-version, .answer-comments-queries-container div.distribution-version { margin: auto; cursor: initial; font-weight: bold; font-size: 16px; padding: 3px 10px; } .answer-version-container div.nohover:hover { background-color: #23c6c8; border-color: #23c6c8; } .answer-version-container div.noactive:active { -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0); box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0); } .answer-comments-queries-container div.nohover:hover { background-color: #f8ac59; border-color: #f8ac59; } .answer-comments-queries-container .btn-hidden, .answer-comments-queries-container .btn-hidden .fa-solid { padding: 0; font-size: 0 !important; width: 0; min-width: 0; min-height: 0; border: 0; margin: 0 !important; display: none; } .answer-comments-queries-container div.noactive:active { -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0); box-shadow: inset 0 0px 0px rgba(0, 0, 0, 0); } .answer-status-container, .answer-date-container { margin-bottom: 2px; display: flex; width: 100%; align-items: center; border: 1px solid transparent; min-height: 40px; justify-content: center; border-bottom: 1px dashed #cdcccc; line-height: 17px; flex-direction: column; } .answer-version-container, .answer-comments-queries-container { margin-bottom: 2px; display: flex; justify-content: center; min-height: 40px; align-items: center; border-bottom: 1px dashed #cdcccc; } .answer-buttons-container { margin-bottom: 2px; text-align: right; align-items: center; min-height: 40px; display: block; border-bottom: 1px dashed #cdcccc; /*display: inline-block;*/ position: relative; } .two-dots:after { content: ":"; font-weight: bold; } .star-before:before { content: "*"; font-weight: bold; } .star-after:after { content: "*"; font-weight: bold; margin-left: 3px; } /*****************Patients*********************/ .file-download { margin-bottom: 10px; } /*****************Anonymous Identification*********************/ .anonymous-identification-desc { font-size: 16px; font-weight: bold; } .anonymous-identification-welcome { } .anonymous-or-text { font-size: 16px; font-weight: bold; margin: -5px 0px 17px 0px; text-align: center } /*****************Monitoring*********************/ .search-bar-helper { display: none; } .monitoring-filter-changed-warning { /*font-size: 16px;*/ } .monitoring-filter-changed-warning .filter-changed-warning-desc { margin-left: 7px; padding-top: 7px; display: inline-block; } .monitoring-filter-changed-warning .filter-changed-warning-desc i { font-size: 16px; } .monitoring-filter-changed-warning .filter-changed-warning-desc span { margin-left: 5px; } .monitoring-value { font-weight: bold; } .monitoring-date { font-style: italic; font-size: 12px } .monitoring-column { white-space: nowrap; width: 1%; } /*****************Chart*********************/ .system-chart-value-chunk-options-container .system-chart-value-chunk-formItemOptionId, .system-chart-value-chunk-options-container .system-chart-value-chunk-doubleSliderValueType { /*margin-left: 7% !important;*/ width: 90% !important; font-size: 12px !important; padding-top: 4px !important; padding-bottom: 4px !important; margin-top: 3px !important; display: inline-block !important; } .system-chart-value-chunk-value-source-container { text-align: right; } .system-chart-value-chunk-value-source-container .system-chart-value-chunk-xAxisValueSourceType { width: 65% !important; font-size: 12px !important; padding-top: 4px !important; padding-bottom: 4px !important; margin-top: 8px !important; margin-left: 10px !important; display: inline-block !important; } .system-chart-value-chunk-options-container span.glyphicon { width: 8%; } span.ui-spinner { max-width: 50px; } .json-not-valid { margin: 5px 0px; display: none; font-size: 14px; font-weight: bold; } /*************** Survey Details ****************/ .survey-form-name { font-size: 18px; margin-bottom: 15px !important; } .survey-review-form-name { font-size: 16px; /*margin-bottom: 15px !important;*/ padding-top: 3px !important; } .survey-form-deleted { font-size: 20px; margin-bottom: 15px; margin-left: 8px; } .survey-review-form-deleted { font-size: 16px; margin-bottom: 15px; margin-left: 8px; padding-top: 3px !important; } .review-unlimited-desc { display: block; margin-top: 5px; } .review-days-active-control { width: 100px !important; display: inline-block !important; } /*******************Answer Review*********************/ .review-page-title { background-color: #dbdbdc; padding: 8px 5px; cursor: pointer; margin-bottom: 15px; } .review-page-title:hover { background-color: #ffffff; } .review-page-desc { padding: 0px 5px; } /****************Form********************/ .form-language-warning { font-size: 14px; display: inline-block; margin-left: -5px; } .review-warning { font-size: 14px; margin-top: 10px; } .warning-sign { margin: 0px 5px; } /*************************** Chat ***********************/ .default-chat-icon { display: inline-block; width: 35px; height: 35px; margin-left: 15px; } .conversational-toolbox-control-info { position: absolute; top: 4px; font-size: 17px !important; margin-left: 5px; color: #CA3738; } .conversational-area-info { position: absolute; top: 0px; right: 25px; cursor: pointer; color: #CA3738; font-size: 30px !important; } .conversational-chat-code-info { cursor: pointer; color: #CA3738; font-size: 30px !important; display: inline-block; margin-left: 5px; } /* Chat view */ .chat-container { background: #ffffff; position: absolute; right: 0px; left: 0px; bottom: 0px; top: 0px; } .chat-discussion-custom { background: #ffffff; padding: 10px; height: auto; /*overflow-y: auto;*/ font-size: 14px; /*border-radius: 15px;*/ } .chat-discussion-custom .chat-message-custom.left { max-width: 95%; margin-left: 0px; margin-right: auto; text-align: left; padding: 10px 20px 10px 5px; } .chat-discussion-custom .chat-message-custom.right { max-width: 95%; margin-left: auto; margin-right: 0; text-align: right; padding: 10px 5px 10px 20px; } .message-avatar-custom { height: 35px; width: 35px; /*border: 1px solid #e7eaec;*/ border-radius: 4px; margin-top: -10px; } .chat-discussion-custom .chat-message-custom.left .message-avatar-custom { float: left; margin-right: 10px; } .chat-discussion-custom .chat-message-custom.right .message-avatar-custom { float: right; margin-left: 10px; } .message-custom { background-color: #fff; border: 1px solid #e7eaec; display: inline-block; padding: 10px 20px; position: relative; overflow-wrap: break-word; max-width: 70%; } .chat-discussion-custom .chat-message-custom.left .message-custom { border-radius: 4px 20px 20px 20px; background-color: #f3f3f4; color: #222222; } .chat-discussion-custom .chat-message-custom.right .message-custom { border-radius: 20px 4px 20px 20px; background-color: #222222; color: #ffffff; border: none; font-weight: bold; } .message-content-custom { display: block; /*display: block;*/ text-align: justify; word-wrap: break-word; } .t-container p:last-of-type { display: inline-block; } .conversational-enter { position: absolute; right: 5px; z-index: 1000; /*top: 5px;*/ } .conversational-enter button { border-radius: 15px; width: 32px; height: 32px; font-size: 14px; } .public .system-form-control-conversational { font-size: 15px !important; } .public .system-form-control-conversational:valid { outline: none !important; /*border: 0 !important;*/ box-shadow: none !important; } .public .system-form-control-conversational:focus { box-shadow: inset -1px 1px 2px 0px #888 !important; border: none !important; } .public .system-form-control-conversational.date:focus ~ .input-group-text { box-shadow: inset -1px 1px 2px 0px #888 !important; border: none !important; } .public .system-formElement-conversational .system-form-control-ai { height: 35px; border-radius: 5px; margin-left: 10px; border: 1px solid #e5e6e7; font-size: 15px !important; } .public .system-formElement-conversational .system-form-control-ai:focus { box-shadow: inset -1px 1px 2px 0px #888 !important; border: none !important; } .public .system-form-control-conversational.textbox { height: 45px; border-radius: 15px; } .public .conversational-enter.textbox { top: 6px; } .public .system-form-control-conversational.textarea { border-radius: 15px; } .public .conversational-enter.textarea { bottom: 25px; } .public .system-form-control-conversational.email { height: 45px; border-radius: 15px; } .public .conversational-enter.email { top: 6px; } .public .system-form-control-conversational.number { height: 45px; border-radius: 15px; } .public .conversational-enter.number { top: 6px; } .public .system-form-control-conversational.date { height: 45px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; } .public .system-form-control-conversational.date ~ .input-group-text { width: 1%; border-top-right-radius: 15px; border-bottom-right-radius: 15px; } .public .conversational-enter.date { top: 6px; right: 45px; } .public .form-group.radio { padding: 18px 40px 18px 25px; border-radius: 15px; background-color: #ffffff; } .public .form-group.radio label { padding: 0px; } .public .form-group.radio .radio-horizontal { margin-right: 15px; margin-top: 25px; } .public .form-group.radio .radio-vertical:last-child { margin-bottom: 0px !important; } .public .form-group.radio .option-label { padding: 10px 10px 10px 40px; border-radius: 7px; margin-left: -35px; background-color: #f3f3f4; border: 1px solid #e7eaec; font-weight: normal; cursor: pointer; } .public .form-group.radio .radio-horizontal .option-label { display: inline; } .public .form-group.radio .radio-vertical .option-label { display: inline-block !important; } .public .form-group.radio .option-label:hover { background-color: #ffffff; border: 1px solid #e7eaec; } .public .form-group.radio .system-form-control-conversational:hover ~ .option-label { background-color: #ffffff; border: 1px solid #e7eaec; } .public .form-group.radio .text-danger span { margin-top: 10px; display: inline-block; } .public .system-form-control-conversational.radio { border-radius: 15px; } .public .conversational-enter.radio { bottom: 12px; margin: 0px; } .public .form-group.checkboxGroup { padding: 20px 40px 18px 25px; border-radius: 15px; background-color: #ffffff; } .public .form-group.checkboxGroup label { padding: 0px; } .public .form-group.checkboxGroup .radio-horizontal { margin-right: 15px; margin-top: 25px; } .public .form-group.checkboxGroup .radio-vertical:last-child { margin-bottom: 2px !important; } .public .form-group.checkboxGroup .option-label { padding: 10px 10px 10px 40px; border-radius: 7px; margin-left: -35px; background-color: #f3f3f4; border: 1px solid #e7eaec; font-weight: normal; cursor: pointer; } .public .form-group.checkboxGroup .radio-horizontal .option-label { display: inline; } .public .form-group.checkboxGroup .radio-vertical .option-label { display: inline-block !important; } .public .form-group.checkboxGroup .option-label:hover { background-color: #ffffff; border: 1px solid #e7eaec; } .public .form-group.checkboxGroup .system-form-control-conversational:hover ~ .option-label { background-color: #ffffff; border: 1px solid #e7eaec; } .public .form-group.checkboxGroup .text-danger span { margin-top: 10px; display: inline-block; } .public .system-form-control-conversational.checkboxGroup { border-radius: 15px; } .public .conversational-enter.checkboxGroup { bottom: 12px; margin: 0px; } .public .form-group.slider-c { padding: 10px 25px 5px 0px; border-radius: 15px; background-color: #ffffff; } .public .system-form-control-conversational.slider-c { height: 45px; border-radius: 15px; } .public .conversational-enter.slider-c { top: 40px; } .public .form-group.doubleSlider-c { padding: 5px 25px 5px 0px; border-radius: 15px; background-color: #ffffff; } .public .system-form-control-conversational.doubleSlider-c { height: 45px; border-radius: 15px; } .public .conversational-enter.doubleSlider-c { top: 40px; } .public .form-group.dropdown { padding: 15px 45px 15px 10px; border-radius: 15px; background-color: #ffffff; } .public .system-form-control-conversational.dropdown { height: 45px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border: 1px solid #e5e6e7 !important; } .public .system-form-control-conversational.dropdown:focus { box-shadow: inset -1px 1px 2px 0px #888 !important; border: 1px solid #e5e6e7 !important; } .public .conversational-enter.dropdown { top: 20px; } .public .form-group.checkboxElement { padding: 10px 40px 10px 25px; border-radius: 15px; background-color: #ffffff; } .public .form-group.checkboxElement label { padding: 10px 10px 10px 40px; border-radius: 7px; margin-left: -35px; background-color: #f3f3f4; border: 1px solid #e7eaec; font-weight: normal; cursor: pointer; } .public .form-group.checkboxElement .option-label:hover { background-color: #ffffff; border: 1px solid #e7eaec; } .public .form-group.checkboxElement .system-form-control-conversational:hover ~ .option-label { background-color: #ffffff; border: 1px solid #e7eaec; } .public .conversational-enter.checkboxElement { bottom: 12px; margin: 0px; } .finish-conversation { display: none; } @media (max-width: 992px) { .public .system-area-conversational { padding: 0px !important; } .public .chat-discussion-custom { padding: 0; font-size: 12px; } .public .chat-discussion-custom .chat-message-custom.left .message-custom { border-radius: 2px 10px 10px 10px; } .public .chat-discussion-custom .chat-message-custom.right .message-custom { border-radius: 10px 2px 10px 10px; } .message-custom { padding: 5px 10px; max-width: 77%; } .chat-message-custom { padding: 10px 3px; } } /********************JUMPS**********************/ .jump-description-text { font-size: 16px; font-weight: bold; } .default-jump-desc { font-size: 14px; font-weight: bold; margin-left: 15px; display: none; } .jump-to-container { margin: 0px 0px 1px 0px; padding-top: 15px; border-top: 1px dashed grey; } .jump-to { padding-left: 5px; margin: 3px; } .jump-to-text { padding-right: 7px; font-size: 16px; font-weight: bold; } .always-jump-to, .otherwise-jump-to { display: none; } .jump-to-element { width: 35% !important; /*display: inline-block !important;*/ } .jump-if-title-container, .conditions-block-if-title-container { display: inline-block; margin-left: 5px; } .system-validation-type-container { padding-bottom: 5px; display: inline-block; } .validation-text-container { display: block; margin-bottom: 15px; font-size: 16px; font-weight: bold; margin-left: 5px; } .validation-type-radio { margin: 0 20px 0 5px; cursor: pointer } .validation-text-container.message-title { margin-top: 25px; margin-bottom: 10px; } .validation-create-query { margin-left: 5px; margin-top: 20px; margin-bottom: 20px; } .validation-create-query .checkbox-label { cursor: pointer; } .validation-color-picker-container { float: none; margin-left: 5px; padding: 0px; } .page-conditions-block-if-title-container { display: inline-block; margin-left: 10px; } .jump-if-text, .conditions-block-if-text, .page-conditions-block-if-text { font-size: 20px; font-weight: bold; } /**************Validations**************/ .add-validation-button-container { float: right; margin: 0px 3px 15px 0px; } .validation-description-text-container { cursor: pointer; padding-left: 0px; } .validation-description-text { font-size: 16px; font-weight: bold; } .system-validation-condition-tile .select.s-custom::after { top: 5px; right: 5px; } /*******************Page Conditions******************/ .page-conditions-block-hide-page { margin-bottom: 15px; margin-left: 0px; margin-right: 0px; padding-bottom: 10px; } .add-page-conditions-block-button-container { text-align: right; margin: 0px 3px 15px 0px; } /*****************Users Import********************/ .import-column-name { display: none; } /********************Users************************/ .user-role-column { width: 20%; text-align: center; } /********************Patients/Subjects************************/ .center-column { width: 50%; text-align: center; } /**************Gradient Field Result*************/ .gradient-control { padding: 10px; width: 80%; } .gradient-control-line-color { width: 5px; height: 50px; } .gradient-control-line-left { float: left; margin-left: 16px; background-color: rgba(83,219,95,1); } .gradient-control-line-right { float: right; margin-right: 16px; background-color: rgba(250,79,79,1); } .gradient-control-wrapper { margin: 0 auto; height: 100%; width: 93%; } .gradient-control-gradient { height: 50px; background: linear-gradient(to right, rgba(83,219,95,1) 0%, rgba(247,210,99,1) 50%, rgba(250,79,79,1) 100%); } .gradient-control-pointer { position: relative; height: 100%; z-index: 100; margin-left: 0%; -webkit-transition: all 0.75s ease-in-out; -moz-transition: all 0.75s ease-in-out; -o-transition: all 0.75s ease-in-out; transition: all 0.75s ease-in-out; } .gradient-control-arrow-stick { background-color: #000; height: 90%; width: 5px; } .gradient-control-arrow-down { width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 13px solid #000; margin-left: -11px; } .gradient-control-numbers { width: 100%; margin-top: 10px; } .gradient-control-numbers label { font-weight: bold !important; text-align: center; display: inline-block; } .gradient-control-numbers-min { float: left; margin-left: -5px; } .gradient-control-numbers-max { float: right; margin-right: -10px; } .gradient-control-number-between { float: left; position: relative; transform: translate(50%); text-align: left; } .close-icon { font-size: 30px; display: inline-block; } [class*='close-'] { color: #777; font: 14px/100% "Noto Sans", sans-serif; position: absolute; right: 5px; text-decoration: none; text-shadow: 0 1px 0 #fff; top: 5px; display: inline-block; } .close-classic:after { content: 'X'; /* ANSI X letter */ } .close-thin:after { content: '×'; /* UTF-8 symbol */ } .close-thik:after { content: '✖'; /* UTF-8 symbol */ } /********************Global Classes************************/ .resize-none { resize: none; } .no-wrap { white-space: nowrap; } .text-pre-wrap { white-space: pre-wrap; } .text-align-left { text-align: left; } .text-align-left-important { text-align: left !important; } .text-align-right { text-align: right; } .text-align-center { text-align: center; } .text-align-center-important { text-align: center !important; } .vertical-align-middle { vertical-align: middle !important; } .white-background { background-color: #ffffff; } .white-background-imp { background-color: #ffffff !important; } .word-break-break-word { word-break: break-word; display: inline !important; } .radio-container.word-break-break-word { word-break: normal; display: block !important; } .radio-container.word-break-break-word label { word-break: normal; } .font-bold { font-weight: bold; } .font-italic { font-style: italic; } .normal-cursor { cursor: initial; } .force-normal-cursor { cursor: initial !important; } .font-14 { font-size: 14px; } .font-15 { font-size: 15px; } .font-16 { font-size: 16px; } .font-16-important { font-size: 16px !important; } .font-18-important { font-size: 18px !important; } .info-label-required { padding-top: 0px !important; } .info-label-required:after { content: "*"; font-weight: bold; color: #CA3738; font-size: 20px; padding-left: 3px; } h2.border-top { padding-top: 10px; border-top: 1px dotted; margin-bottom: 25px; } .padding0 { padding: 0px !important; } .padding-top2 { padding-top: 2px; } .padding-bottom5 { padding-bottom: 5px; } .padding-bottom15 { padding-bottom: 15px; } .margin0 { margin: 0px !important; } .margin-top15 { margin-top: 15px !important; } .margin-top20 { margin-top: 20px !important; } .margin-left20 { margin-left: 20px !important; } .margin-left40 { margin-left: 40px !important; } .margin-right20 { margin-right: 20px; } .margin-bottom10 { margin-bottom: 10px; } .margin-bottom15 { margin-bottom: 15px; } .margin-bottom30 { margin-bottom: 30px; } .margin-bottom40 { margin-bottom: 40px; } .paging-box { width: 30px; text-align: right; } .visibility-hidden { visibility: hidden; } .display-none { display: none; } .display-inline-block { display: inline-block; } .position-relative { position: relative; } /* ======= FLOATS ============ */ .float-right { float: right; } .float-left { float: left; } .btn-form-close { min-height: 0px !important; padding: 1px 9px !important; font-size: 18px !important; margin: 10px 1px; font-weight: bold; } /********************Survey Confirmation Notifications************************/ .html-message-add-info { position: absolute; top: -5px; font-size: 20px !important; margin-left: 10px; color: #CA3738; } .system-survey-cn-tile .chosen-container-multi .default { width: auto !important; } .modal-items-inside-border { margin: 25px 0px 20px 0px; border-bottom: 2px dashed #808080; } .confirmation-notification-property-desc { font-weight: normal; font-size: 12px; font-style: italic; margin-top: 3px; margin-bottom: 15px; display: block; } .reference-specific-element-example-info { font-size: 20px !important; margin-left: 5px; color: #CA3738; position: relative; top: 2px; } /********************Versions************************/ @media (min-width: 1200px) { .versions-container { padding: 0px 100px 0px 100px; border-top: 4px solid #eeeeee; } } .version-container { margin-top: 35px; } .version-title { margin-bottom: 5px; font-size: 19px; line-height: 1.5; } .version-date { font-style: italic; margin-bottom: 25px; } .versions-container hr { border: 2px solid #eee; } /** Class to make text inputs look like labels (for user data in surveys) **/ .element-user-data { border: 1px solid transparent !important; cursor: default; pointer-events: none; background-color: transparent !important; } /*******************Tasks Overview*******************/ .tasks-overview-container i { font-size: 10px; } .tasks-overview-container th { white-space: nowrap; padding: 8px 12px !important; } .tasks-overview-container th a { font-weight: bold; } .tasks-overview-container td:not(.centers-table) { padding: 8px 12px !important; } .centers-table { white-space: nowrap; } .filter-placeholder { font-size: 13px !important; } /***********************View Answer page*********************/ .no-option-selected { color: #08c; font-size: 15px; } .selected-option { color: #08c; font-size: 18px; font-weight: bold !important; } /********************Matrix tabs***************************/ #tab-container { margin-top: 60px; background-color: #ffffff; } #tab-container .hidden-tab-check { height: 0; width: 0; padding: 0; margin: 0; position: absolute; visibility: hidden; } #tab-container label { background: #d8eaec; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #3f3f3f; cursor: pointer; display: inline-block; font-size: 13px; font-weight: 600; line-height: 34px; text-align: center; padding: 0; max-width: 24%; min-width: 200px; width: auto; margin: 0; } #tab-container .hidden-tab-check:hover + label { background: #26b2c4; color: #fff; transition: all 0.5s ease; } #tab-container .hidden-tab-check:checked + label { background: #26b2c4; color: #ffffff; position: relative; z-index: 6; transition: all 0.5s ease; } #content { position: relative; width: 100%; z-index: 5; background-color: #ffffff; border-top: 1px solid #26b2c4; } #content .table-responsive { display: none; margin-top: 1.5em; position: relative; width: 100%; z-index: -100; min-height: 330px; transition: all linear 0.1s; } #tab-container input#tab-1:checked ~ #content #content-1, #tab-container input#tab-2:checked ~ #content #content-2, #tab-container input#tab-3:checked ~ #content #content-3, #tab-container input#tab-4:checked ~ #content #content-4, #tab-container input#tab-2:checked ~ #content #content-2 #upload-2, #tab-container input#tab-3:checked ~ #content #content-3 #upload-3, #tab-container input#tab-4:checked ~ #content #content-4 #upload-4 { display: block; z-index: 100; } input.visible { visibility: visible !important; } .desc-text { margin-left: 15px; width: 80%; display: inline-block; } .file-desc-text { margin-left: 0px !important; min-width: 60% !important; max-width: 90% !important; width: auto; word-break: break-all; } /* ================ Tab container responsive ================== */ @media(max-width:1024px) { #tab-container { margin-top: 20px; display: flex; flex-direction: column; } #tab-container .hidden-tab-check + label { flex: 1 1 100%; width: 100%; max-width: 100%; border-radius: 5px; margin-bottom: 2px; } } /****************Link to another survey (Label property) **************/ .linked-surveys-list { margin-top: 15px; margin-left: 20px; } /*************************No-Script-Enabled*****************************/ .no-script-public-form { position: fixed; top: 50%; left: 49%; transform: translate(-50%, -50%); z-index: 1000000000; font-size: 18px; text-align: center; } .no-script-public-form i { height: 60px; width: 60px; line-height: 60px; -moz-border-radius: 30px; border-radius: 30px; background-color: #f3f3f4; text-align: center; font-size: 40px; } .no-script-public-form span { display: block; margin-top: 5px; } .no-script-public, .no-script-form, .no-script { font-size: 16px; text-align: center; width: auto; } .no-script-public i, .no-script-form i, .no-script i { height: 45px; width: 45px; line-height: 45px; -moz-border-radius: 25px; border-radius: 25px; background-color: #f3f3f4; text-align: center; font-size: 30px; } .no-script-public .alert { margin-bottom: 0px; width: 65%; margin: auto; border-top-left-radius: 0px; border-top-right-radius: 0px; border-top: none; } .no-script-form .alert, .no-script .alert { margin-bottom: 0px; margin: auto; width: 75%; border-top-left-radius: 0px; border-top-right-radius: 0px; border-top: none; } .no-script-public span, .no-script-form span, .no-script span { display: block; margin-top: 5px; } @media (max-width: 1200px) { .no-script-public-form { width: 80%; } .no-script-public .alert, .no-script .alert { width: 75%; } .no-script-form .alert { width: auto; } .no-script-public-form span, .no-script-public span, .no-script-form span, .no-script span { margin-top: 10px; } } @media (max-width: 768px) { .no-script-public-form { width: 80%; } .no-script-public .alert, .no-script-form .alert, .no-script .alert { width: auto; } .no-script-public-form span, .no-script-public span, .no-script-form span, .no-script span { margin-top: 10px; } } /*************************My Visit Plan*****************************/ .my-visit-plan { margin-left: 15px; margin-right: 15px; margin-bottom: 15px; border: 2px solid transparent; background-color: transparent; } .my-visit-plan .panel-heading { background-color: #fff; padding: 0px; } .my-visit-plan .panel-body { padding-top: 25px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; } .my-visit-plan .my-visit-plan-info-toggle { display: block; padding: 10px 15px; } .my-visit-plan h3.visit-plan { margin-top: 0px; font-size: 19px; } .my-visit-plan .user-code { font-size: 16px; color: #CA3738; margin-top: -2px } /*************************Change Password*****************************/ .panel-title a { color: #464646; position: relative; display: inline-block; margin: -8px -8px; width: 100%; padding: 8px 8px; text-decoration: none; } .panel-title a span.fa-solid { position: absolute; right: 5px; font-size: 16px; opacity: 0.8; transform: rotate(0deg); transition: all 0.4s ease; } .panel-title a[aria-expanded="true"] span.fa-solid { transform: rotate(180deg); transition: all 0.4s ease; } .change-password .change-password-info-toggle { display: block; } .change-password .user-code { font-size: 16px; color: #CA3738; margin-top: -2px } .info-hover { width: 100%; justify-content: center; position: relative; display: flex; font-size: 16px; cursor: pointer; color: #CA3738; align-items: center; font-size: 24px; left: -30px; } /* =============== Inclusion Criteria / Dropout Criteria ==================== */ .inclusion-criteria-info, .dropout-criteria-info, .survey-answer-status-info, .login-info { width: 100%; justify-content: center; position: relative; display: flex; font-size: 16px; cursor: pointer; color: #CA3738; align-items: center; } .inclusion-criteria-info .fa-solid, .dropout-criteria-info .fa-solid { font-size: 24px; } .survey-answer-status-info { display: inline; position: absolute; right: -16px; width: auto; } .survey-answer-status-info .fa-solid { font-size: 20px; } .inclusion-criteria-container, .dropout-criteria-container { min-height: 500px; } .text-area-inclusionCriteria, .text-area-dropoutCriteria { width: 100% !important; height: 450px !important; margin: 15px auto 5px auto; resize: none; background-color: #ffffff !important; } .section-inclusion-criteria .panel-collapse { max-height: 190px; overflow-y: auto; margin-bottom: 15px; } .section-inclusion-criteria .panel-collapse .form-group { padding-bottom: 10px; } /************Answer Review***************/ .slider-container-review [disabled] .noUi-connect { background: #1ab394; } .slider-container-review [disabled].noUi-target, .slider-container-review [disabled].noUi-handle, .slider-container-review [disabled] .noUi-handle { cursor: auto; } .review-i-checks-disabled.icheckbox_square-green.checked.disabled { background-position: -48px 0; } .review-i-checks-disabled.iradio_square-green.checked.disabled { background-position: -168px 0; } /************File Upload***************/ .system-upload-file-container { float: left; margin-bottom: 15px; margin-right: 15px; text-align: center; max-width: 200px; } .link-container { text-align: center; margin-top: 5px; } /********************CSS Editor***********************/ /************Answer Files***************/ .css-editor { width: 95%; height: 700px; margin: 15px; } .allVersionMsg { font-size: x-small; font-style: italic; } /********************Import/Export************************/ .all-surveys-import-container, .all-surveys-export-container { margin: 30px 0px; border-top: 1px dotted #999; border-bottom: 1px dotted #999; } .all-surveys-export-container { margin-bottom: 30px; padding-top: 30px; } .all-surveys-import-container div[class^="col-md"], .all-surveys-import-container label[class*="col-md"], .all-surveys-export-container div[class^="col-md"], .all-surveys-export-container label[class*="col-md"] { padding-left: 4px; padding-right: 4px; } .all-surveys-import-container div[class^="form-group"], .all-surveys-export-container div[class^="form-group"] { width: 100%; margin-left: 5px; margin-right: 0px; border-bottom: 1px dotted #ccc; padding-bottom: 15px; } .all-surveys-import-container label, .all-surveys-export-container label { word-break: break-word; } .survey-import-container, .survey-export-container { margin: 60px 0px; } .survey-export-container { margin-top: 30px; } .survey-import-elements-container, .survey-export-elements-container { padding: 0px 20px; } .translation-container { display: none; padding: 5px; } .survey-import-name, .languages-title { background-color: #ececed; background-color: #ffffff; padding: 8px 10px; cursor: pointer; margin-bottom: 15px; position: relative; } .survey-import-name:hover, .languages-title { background-color: #dbdbdc; } .import-metadata-title { margin-bottom: 30px; } .survey-import-remove, .survey-export-remove { position: absolute; right: 0px; padding: 8px 10px; } .survey-import-page-title { background-color: #dbdbdc; padding: 3px 10px; cursor: pointer; margin-bottom: 10px; margin-top: 10px; font-size: 16px; } .export-template-desc { padding: 0px 10px; font-size: 15px; font-weight: bold; font-family: "Noto Sans", sans-serif; } .export-template-desc span.badge { font-size: 14px; padding: 4px 7px; font-style: normal; border-radius: 0px; background-color: #588ea0; } .export-template-elements-desc-container { display: none; } /******************Queries*********************/ .system-query-list-item { margin: 3px; padding: 10px 5px; border-bottom: 1px dotted; } .add-query-button-container { float: right; margin: 0 3px 15px 0; } .lnkEditQuery, .lnkEditUserQuery { margin: 5px 0; white-space: normal; } .lnkEditQuery, .lnkEditUserQuery, .lnkQueryClose, .lnkUserQueryClose { white-space: normal; padding-top: 4px; padding-bottom: 4px; } .system-element-query-container { padding-top: 5px; border-top: 1px dotted; } .addQueryComment, .addUserQueryComment { float: right; margin-top: 5px; } .not-query-element { opacity: 0.5; } .query-element-open { background-color: #f8d2cc; border-radius: 5px; padding: 5px 2px 5px 2px; } .query-element-inprogress { background-color: #FFFFC4; border-radius: 5px; padding: 5px 2px 5px 2px; } .query-element-closed { background-color: #ADDFAD; border-radius: 5px; padding: 5px 2px 5px 2px; } /***********TelInput plugin*************/ .iti__flag { background-image: url("intlTelInput/img/flags.png"); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .iti__flag { background-image: url("intlTelInput/img/flags@2x.png"); } } .iti { width: 100%; } /*************Copy Button*************/ .tooltip-copy-button { position: relative; display: inline-block; margin: 10px 0 0 0; } .tooltip-copy-button .btn.copy-button { min-width: 45px; } .tooltip-copy-button .btn.copy-button .fa-solid { margin-right: 0; } /***********Project Patient Register link*************/ /***********Project Patient Login link*************/ .patient-login-link .generate-link { margin-top: 15px; } .patient-register-link .tooltip-register-link, .patient-login-link .tooltip-login-link { margin-left: 15px; } .patient-register-link .copy-button, .login-link .copy-button { margin-top: -4px; } .login-link-lang { margin-left: 10px; } /************Review***************/ .review-element { background-color: RGBA(78,223,155, 0.3); border-radius: 10px; padding: 10px 10px 0px 10px; } /****************Validations*****************/ .validation-message { display: block; } /* Workaround for select2 multiselect placeholder being cutoff*/ .select2-search__field { width: 100% !important; } /**********GRIDD Subject pages**************/ .footer-gridd-images { margin-top: 80px; } .footer-gridd-images img { max-width: 200px; } .gridd-banner { margin-bottom: 80px; } .gridd-banner img { width: 70%; } .parthership-gridd { font-weight: bold; margin-top: 30px; } .sweet-alert p { font-size: 18px; } .sweet-alert h2 { font-size: 26px; } /*============ Conflict Button SDNTT DATA MONITOR MODE^============*/ .btn-conflict { background-color: #f0ad4e !important; border-color: #eea236 !important; } .btn-conflict-solved { background-color: #1c84c6 !important; border-color: #1c84c6 !important; } .btn-conflict:hover { background-color: #ffdaa6 !important; } .btn-conflict-solved:hover { background-color: #99d7ff !important; } /*************Matrix-Compare-Images*************/ .container-compare-img { float: left; height: 100%; border-left: 3px solid black; border-right: 3px solid black; position: relative; } .compare-img { max-width: 100%; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } /********Timeline Diagram Control*********/ .timelineDiagram-timelineName { font-size: 22px; cursor: pointer; color: #787878; display: block; text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.3); padding: 3px; border-radius: 3px 3px 0 0; background-color: rgba(255, 255, 255, 1); } .timelineDiagram-timelineName:hover { background-color: rgba(255, 255, 255, 0.6); } h2.timelineDiagram-title { font-size: 16px; } h2.timelineDiagram-title.active { cursor: pointer; text-decoration: underline; color: #0000EE; } h2.timelineDiagram-title.active:hover { opacity: 0.7; } .timelineDiagram-file-container { height: 120px; border: 1px solid rgba(34, 34, 34, 0.2); padding: 1px; } .timelineDiagram-file-container img { max-width: 100%; max-height: 100%; width: auto; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } .timelineDiagram .link-container, .timelineDiagram .date-container, .timelineDiagram .checkbox-container { font-size: 12px; text-align: center; margin-top: 5px; } .timelineDiagram .row { margin-bottom: 20px; margin-top: 15px; } :focus { outline: none !important; } ::-moz-focus-inner { border: 0 !important; } /**********Dashboard**********/ .widget-title { margin-bottom: 20px !important; } .show-more, .show-less { cursor: pointer; } .show-more:hover, .show-less:hover { font-weight: bold; font-size: 16px; text-decoration: underline; } .main-text-hidden { display: none; } /***********CKEditor 5 ************/ #ProjectDropoutCriteriaForm .ck-editor__editable_inline, #ProjectInclusionCriteriaForm .ck-editor__editable_inline, #ProjectLatexTemplateForm .ck-editor__editable_inline, #ICFMessageForm .ck-editor__editable_inline, #ICFMessageForm .ck-editor__editable_inline { height: 250px; } .btn-opacity { opacity: 0.5; } /**************Project Subject Inclusions**************/ .subject-inclusion-description-text { font-size: 14px; font-weight: bold; } .subject-inclusion-text-container { display: block; margin-bottom: 15px; font-size: 14px; font-weight: bold; margin-left: 5px; } .subject-inclusion-text-container.message-title { margin-top: 25px; margin-bottom: 10px; } .subject-inclusion-text-container.step-title { margin-bottom: 10px; font-size: 20px; float: left; } .subject-inclusion-color-picker-container, .subject-inclusion-usertovalidate-container, .system-project-subject-inclusion-users-container, .system-project-subject-inclusion-surveys-container { float: none; padding: 0px; margin-top: 25px; } .system-project-subject-inclusions-update-actions-container { text-align: right; padding-right: 5px; } .system-project-subject-inclusion-users { margin-top: 15px; } .subject-inclusion-notification-property-desc { font-weight: normal; font-size: 12px; font-style: italic; margin-top: 3px; margin-bottom: 15px; display: block; } .subject-inclusion-history-user-data { border-bottom: 1px solid #e5e5e5; margin-bottom: 10px; padding-bottom: 30px; } .survey-answer-status-history-step-details, .subject-inclusion-history-step-details { border-bottom: 1px solid #e5e5e5; margin-top: 15px; padding-bottom: 15px; } .survey-answer-status-history-step-details, .subject-inclusion-history-step-details .badge { border-radius: 0; font-size: 15px; margin-right: 10px; } /********System Notifications********/ .system-notification-text-container { display: block; margin-left: -15px; font-size: 18px; font-weight: bold; color: #464646; background: #ededed; width: calc(100% + 30px); /* Extend width to compensate for removed padding */ height: calc(100% + 40px); /* Extend height to compensate for removed padding */ margin-top: -10px; margin-bottom: -4px; padding: 6px; } .system-notifications-list { max-height: 120px; overflow: auto; --bs-nav-tabs-border-width: 0px; } .system-project-system-notification-default-top-container { border-bottom: 1px dotted #333; } .system-project-system-notification-default-container { max-height: 300px; height: auto; overflow-y: auto; padding: 10px 20px; border: 1px dotted #333; border-radius: 3px; } /**********Matrix**************/ .matrix-file-icon { /*width: 40px; height: 40px;*/ font-size: 25px; min-width: 25px; min-height: 25px; } /******* Swal is open smaller when used with bootstrap - Fix - https://github.com/sweetalert2/sweetalert2/issues/855 *******/ .swal2-popup { font-size: 1.6rem !important; } /****** Pdf/Csv Export Button(Icon) ******/ .pdfExportButton { background-image: url(../Content/icons/pdf.svg); background-repeat: no-repeat; width: 35px; height: 35px; background-size: cover; } .csvExportButton { background-image: url(../Content/icons/csv.svg); background-repeat: no-repeat; width: 35px; height: 35px; background-size: cover; } .pdfExportButton-viewAnswer, .csvExportButton-viewAnswer { width: 35px; height: 35px; min-height: 35px; margin-top: -3px; } .pdfExportButton-matrix, .csvExportButton-matrix { width: 35px; height: 35px; margin-left: 10px; } .pdfExportButton:hover, .csvExportButton:hover { opacity: 0.6; } .popover-mirror { min-width: 100%; } .popover-area-button { width: 100%; max-width: 100%; left: 0px !important; } /*************Distribution Answers page*************/ .columns-filter-container { margin: 20px auto; width: 60%; text-align: center; } .table th.data-column { position: relative; } .table th .btnDeleteColumns { width: auto; width: 20px; height: 20px; min-width: auto; min-height: auto; position: absolute; top: 0; right: 0; font-size: 8px; padding: 0px 3px; /* border-color: transparent !important;*/ } .table th .btnDeleteColumns i { font-size: 10px; } .table th .btnDeleteColumns + .btnDeleteColumns { margin-right: 30px; } .pac-container { z-index: 69420; } /**************Subject Queries*******************/ .userquery-banner { padding: 6px; font-size: 12px; background-color: #23c6c8; color: #333333; font-weight: bold; animation-name: flashRed; animation-duration: 2s; animation-delay: 1s; animation-iteration-count: infinite; } @keyframes flashRed { from { background-color: #FF0000; } to { background-color: #23c6c8; } } /***Language selection dropdown***/ .language-dropdown-container { display: inline-block; position: relative; } .language-dropdown { min-width: 30px; right: 0px; } .language-dropdown > li > a { text-align: right !important; } .label-right .control-label { text-align: right; justify-content: flex-end; line-height: 15px; } .ui-state-hover { background-color: gray; } .ui-state-hover-pageDrop { background-color: gray; width: 75px !important; } .ui-state-active { border: solid 1px black; } .ui-pageSelector { height: 25px; border: solid 1px gray; background-color: lightgray; float: left; } .ui-pageDrop { height: 25px; width: 25px; float: left; } .ui-areaDrop { height: 25px; } /* .ui-areaSelector { min-height: 75px; border: solid 1px gray; }*/ .ui-inputDrop { height: 25px; } .ui-inputSelector { min-height: 25px; border: solid 1px gray; } .ui-pageContainer { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; margin-top: 10px; min-height: 200px; width: 100%; /*min-height: 300px;*/ /*border: solid 1px gray;*/ } .ui-pageContainer.review { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; margin-top: 10px; min-height: 20px !important; word-break: break-word; /*min-height: 300px;*/ /*border: solid 1px gray;*/ } .ui-pageContainer li { width: 100%; } /* .ui-formAreaContainer { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; margin-top: 10px; border: solid 1px gray; } .ui-formAreaContainer li { width: 100%; } */ .ui-formItemsContainer-conversational { padding: 10px; } .ui-formItemsContainer li { width: 100%; } .ui-formItemsContainer ul.thumbnails.image_picker_selector li, ul.thumbnails_image_picker.image_picker_selector li { width: auto !important; } .ui-sortable-handle { cursor: pointer; } .ui-draggable { cursor: pointer; } canvas { margin-left: auto; margin-right: auto; display: block; } .image-map-container { text-align: center; } .image-map-container > div { margin-left: auto; margin-right: auto; } .draw-pad { margin-left: auto; margin-right: auto; background-position: center; background-repeat: no-repeat; } .popover.bottom { margin-top: 2px; } .popover.bottom > .arrow { display: none; } .area-draggable-helper { background-color: #428bca; border-radius: 4px; font-family: "Open Sans", "Noto Sans", sans-serif; width: 50%; height: 55px; z-index: 255; opacity: 0.6; cursor: move; text-align: center; font-size: 30px; color: white; } .sortable-placeholder-element { background-color: lightgrey; border: none; } .subject-inclusion-color-picker, watermark-color-picker { min-height: 25px; width: 100%; } /* CSS ifram*/ .CodeMirror { height: 100%; width: 100%; border-radius: 8px; } .formCssFormInner .CodeMirror { border: 2px solid #2ab32b; } .formCssFormInner, .formReviewCssFormInner { height: 650px; } /* ================= Timeline ================= */ .timeline-stage-tile div[class*=col-], .system-monitoring-and-condition-tile div[class*=col-], .system-survey-cn-condition-tile div[class*=col-]:not(.row) { padding: 0px 5px 2px 5px; } .system-validation-conditions-container div[class*=col-]:not(.row) { padding: 0px 5px 2px 5px; } .tabs-container.language { margin: 5px 0; padding: 5px 0; border-top: 1px dotted; border-bottom: 1px dotted; } /* =========== FOOTER ================*/ .footer { background: none repeat scroll 0 0 white; bottom: 0; width: 100%; padding: 10px 20px; border-top-left-radius: 4px; border-top-right-radius: 4px; max-width: 100%; min-height: 50px; margin: 15px auto 0 auto; font-size: 15px; font-family: Consolas; font-weight: bold; z-index: 3; box-shadow: 0 1px 4px rgb(0 0 0 / 8%); display: flex; } .footer.layoutForm { display: none; } .footer span { display: inline-flex; font-size: 13px; font-weight: 500; margin: 5px 5px; } .footer-logo { padding: 5px; color: #ffffff; width: 120px; height: auto; position: relative; float: left; } .footer-logo span { font-size: 35px; margin: 0; top: -4px; left: 8px; display: block; position: absolute; } .footer-logo img { background-color: #fff; width: 100px !important; padding: 0; height: auto; } /* ======================== HELPERS ======================== */ .p0 { padding: 0; } .pr5 { padding-right: 5px; } .pl5 { padding-left: 5px; } /* ===== LABELS AND SPECIAL LABELS =========*/ .l-bold .control-label, .l-bold label { font-weight: bold; } .l-right { text-align: right; } .l-user { font-size: 15px; font-weight: 600; } /* ===== MARGIN BOTTON =========*/ .mb2 { margin-bottom: 2px !important; } .mb5 { margin-bottom: 5px !important; } .mb10 { margin-bottom: 10px !important; } .mb15 { margin-bottom: 15px !important; } .mb20 { margin-bottom: 20px !important; } .mb30 { margin-bottom: 30px !important; } .mb40 { margin-bottom: 40px !important; } /* ===== MARGIN TOP =========*/ .mt2 { margin-top: 2px !important; } .mt5 { margin-top: 5px !important; } .mt10 { margin-top: 10px !important; } .mt15 { margin-top: 15px !important; } .mt20 { margin-top: 20px !important; } .mt25 { margin-top: 25px !important; } .mt30 { margin-top: 30px !important; } /* ======= MARGIN LEFT ============ */ .ml5 { margin-left: 5px !important; } .ml10 { margin-left: 10px !important; } .ml20 { margin-left: 20px !important; } .ml25 { margin-left: 25px !important; } /* ======= MARGIN RIGHT ============ */ .mr0 { margin-right: 0px !important; } .mr3 { margin-right: 3px !important; } .mr5 { margin-right: 5px !important; } .mr10 { margin-right: 10px !important; } /* ======= PADDING LEFT ============ */ .pl10 { padding-left: 10px !important; } /* ======= PADDING RIGHT ============ */ .pr10 { padding-right: 10px !important; } /* ======= PADDING TOP ============ */ .pt0 { padding-top: 0px !important; } .pt2 { padding-top: 2px !important; } .pt4 { padding-top: 4px !important; } /* ======= PADDING RIGHT ============ */ .pr15 { padding-right: 15px !important; } /* ===== WITH TABLE CELL =========*/ .w15 { width: 15%; } .w20 { width: 20%; } .w25 { width: 25%; } .maxW350 { max-width: 350px; } /* ====== FLEX VERTICAL ALIGNAMENT ===== */ .vcenter { align-items: center; } .vstart { align-items: flex-start !important; } .vend { align-items: flex-end !important; } /* ====== FLEX OPTIONS ===== */ .f-wrap { flex-wrap: wrap; } /* ======= HORIZONTAL ALIGNAMENT ============ */ .center { text-align: center; justify-content: center; transition: none; } .left { text-align: left !important; justify-content: flex-start !important; } .right { text-align: right !important; justify-content: flex-end !important; } /* ======= URL STYLES ============ */ .break-all { word-break: break-all; } /* =================== RESPONSIVE ======================= */ @media(max-width:1280px) { :root { --fo-size-layout: 98%; --fo-menu-font-size: 13px; } .nav > li { margin: 0 0px; } .nav > li > a, .nav.navbar-right > li a { padding: 5px 3px; } } @media(max-width:1024px) { /* Header no public size */ .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand, .public.login-logonselectproject-projectstyle .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand { font-size: 32px; } .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand .navbar-brand-star { font-size: 58px; left: 9px; } /* Header no public user menu displace */ .header-bar .navbar.navbar-static-top .header-menu .nav.navbar-user { padding-right: 40px; } .header-bar .navbar.navbar-static-top .header-menu .navbar-collapse.collapse.show .main-menu-mobile { width: 100%; position: absolute; top: 0; left: 0; background-color: darkgrey; } .header-bar .navbar.navbar-static-top .header-menu .navbar-collapse.collapse.show .main-menu-mobile { display: block; background-color: #e8e8e8; transition: all 0.4s ease-in; } .header-bar .navbar.navbar-static-top .header-menu .navbar-collapse.collapse.show .main-menu-mobile .nav.navbar-nav { z-index: 2; display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0px; left: 0; width: 100%; transform: translate(0, -130%); background-color: #e8e8e8; transition: all 0.4s ease-in; } .header-bar .navbar.navbar-static-top .header-menu .navbar-collapse.collapse.show .main-menu-mobile.showmenu .nav.navbar-nav { top: 80px; transform: translate(0, 0); background-color: #e8e8e8; transition: all 0.4s ease-in; } .main-menu-mobile > .main-menu-mobile-curtain { position: fixed; z-index: -1; width: 100%; height: 100%; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; background-color: #1c1c1c8c; pointer-events: none; } .main-menu-mobile.showmenu > .main-menu-mobile-curtain { opacity: 1; z-index: 1; pointer-events: all; } .main-menu-mobile .nav.navbar-nav li { min-height: 40px; padding: 0; margin: 0; text-align: center; width: 100%; border-bottom: 1px dotted; } .main-menu-mobile .nav.navbar-nav li a { display: flex; margin: 0 auto; padding: 10px 0 0 0; justify-content: center; width: 100%; } .main-menu-mobile .nav.navbar-nav > li::after { max-width: 320px; margin: -2px auto; } .main-menu-mobile .nav.navbar-nav li.active { background-color: #ca3738; color: #ffffff; } .main-menu-mobile .nav.navbar-nav li.active a { color: #ffffff; } .header-bar .navbar.navbar-static-top .header-menu .nav.navbar-user { margin-top: -20px; } .main-menu-mobile .nav.navbar-nav { box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3); } .header-bar .navbar.navbar-static-top .header-menu .main-menu { display: none; } /* Header no public icon mobile menu */ .header-bar .navbar.navbar-static-top .icon-mobile-nav { display: block; right: 6px; top: 8px; } .body-content > .row { padding: 5px 0; } .fb-form_title h4 { font-size: 14px; } body:not(.public) .col-6 { width: 100%; flex: 1 0 100%; } .fb-form_content, fb-form_title { padding: 0; } .fb-form_content .search-bar .item { width: auto; flex: 0 0 24.2%; max-width: 170px; width: auto; min-width: 45%; } .table { max-width: 100%; } } .toolbar-responsive { display: none; } /*.anchor-mobile-navbarstaticside { display:none; position: relative; z-index: 1000; background-color: aqua; top: 250px; width: 40px; height: 40px; justify-content: center; align-items: center; font-weight: bold; }*/ @media(max-width:1024px) { .navbar-default.navbar-static-side { left: -320px; transition: all 0.6s ease; z-index: 1000; } .navbar-default.navbar-static-side .sidebar-collapse::after { content: '>>'; display: block; border: 1px solid #505050; top: 0; position: absolute; left: 106%; width: 50px; height: 50px; background-color: #505050; z-index: 10000; color: #ffffff; opacity: 1; } /*.anchor-mobile-navbarstaticside { display: flex; }*/ .navbar-default.navbar-static-side.show { left: 0px; z-index: 1000; transition: all 0.6s ease; } .toolbar-responsive { display: block; position: relative; } .navbar-default.navbar-static-side ~ #page-wrapper .wrapper.wrapper-content { margin-left: 0; width: 100%; transition: all 0.6s ease; } .copy-box .row .copy-box-items, .copy-box .row .copy-box-areas { height: 50px; } .copy-box .row { position: relative; justify-content: right; } .copy-box-items, .copy-box-areas { width: 50% !important; flex: 1 0 50% !important; } } @media(max-width:1024px) { .login .col-6.login-messages { display: none; } .login .col-6.login-form { width: 100%; justify-content: flex-start; padding-top: 60px; margin-top: 0; border-top: 40px solid #3299ab; } .login-select-project .col-2.select-project { width: 50%; padding: 0px; } .header-bar { margin: 0; width: 100%; } .header-bar .navbar.navbar-static-top .header-menu { max-width: 75%; flex: 0 0 75%; } .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand img { max-width: 100%; margin: 0px 0 0 0; padding: 0px 10px 0 0; max-height: 75px; margin-top: 0px; } } @media(max-width:480px) { .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand img { max-width: 100%; margin: -15px 0 0 0; padding: 0 10px 0 0; min-width: 100px; max-height: 60px; } .header-bar .navbar.navbar-static-top .header-menu { max-width: 100%; flex: 0 0 100%; } .header-bar .navbar.navbar-static-top .header-menu .nav.navbar-user { padding-right: 0px; } } /* =============== Buttons ================== */ .loading { pointer-events: none; display: flex; align-items: center; justify-content: center; background: #f5f2f2; text-align: center; font-size: 16px; font-weight: bold; color: #a79393; } .local-spinner { position: relative; } /* ============== ARABIC ============== */ html[dir="rtl"] .navbar-default.navbar-static-side ~ #page-wrapper .wrapper.wrapper-content { margin-right: 320px; width: calc(100% - 320px); background-color: #ffffff; padding: 0 15px 40px 15px; } html[dir="rtl"] .fb-form_content .chosen-container .chosen-choices { display: inline-flex; } html[dir="rtl"] .row.label-right .form-group .control-label { padding: 0 0 0 15px; text-align: left; } html[dir="rtl"] .navbar-default.navbar-static-side .sidebar-collapse .toolbox-title::after { right: auto; left: 0; } html[dir="rtl"] .s-custom::after, html[dir="rtl"] .chosen-container .chosen-single::after, html[dir="rtl"] .select2-selection.select2-selection--multiple::after, html[dir="rtl"] .select2-selection.select2-selection--single::after { right: auto; left: 5px; } html[dir="rtl"] .select2-container .select2-selection__rendered { padding-left: 8px; padding-right: 30px; } html[dir="rtl"] .iradio_square-green:after { left: 0px; } /*================= DASHBOARD MANAGEMENT ============*/ .breadcrumb { margin-top: 10px; padding: 4px 20px 4px 10px; background-color: #efefef; border-radius: 3px; width: auto; display: inline-block; } .breadcrumb a { color: #128bb3; font-weight: bold; text-decoration: none; transition: all 0.4s ease; } .breadcrumb a:hover { opacity: 0.7; transition: all 0.4s ease; } .breadcrumb span { font-weight: bold; } #propertiesPanel h1, #propertiesPanel h2, #propertiesPanel h3, #propertiesPanel h4 { font-size: 13px; } .CodeMirror { height: 100% !important; width: 100%; border-radius: 8px; } .widget_inner .table td a { color: white; } .lnkQuerySave { padding: 4px; } .iform.chat-view .fb-form_content { padding: 0px; } .iform.chat-view .chat-discussion { background: #ececec; padding: 13px; border-radius: 8px 8px 0 0; } .iform.chat-view .chat-discussion .message { background: white; padding: 12px; border-radius: 8px; width: 100%; } .iform.chat-view .chat-discussion .chat-message { display: flex; margin: 12px 0 0 12px; } .iform.chat-view .chat-discussion .chat-message .message-avatar { margin: 0 10px 0 0; width: 45px; height: 40px; } .iform.chat-view .chat-discussion .chat-message .message { display: flex; flex-wrap: wrap; } .iform.chat-view .chat-discussion .chat-message .message .message-author { width: 60%; } .iform.chat-view .chat-discussion .chat-message .message .message-date { font-size: 11px; text-align: right; width: 40%; } .iform.chat-view .chat-discussion .chat-message .message .message-content { width: 100%; } .iform.chat-view .chat-message-form .message-input { border: 1px solid lightgrey; margin: -5px 0 16px 0; height: 80px !important; } .system-area-copy img { height: 14px; } .col-email { min-width: 100px; } /*============= LAYOUT ARABIC ===============*/ html[dir="rtl"] .lnkNext .fa-solid { transform: rotate(180deg); } html[dir="rtl"] .lnkPrev .fa-solid { transform: rotate(180deg); } /*============= BOOTSTRAP DATETIMEPICKER CUSTOM CSS (LAYOUT) ===============*/ .bootstrap-datetimepicker-widget { font-size: 12px; } .bootstrap-datetimepicker-widget table thead tr:first-child th:hover { background: #3299ab; color: #ffffff; } .bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover { background-color: #3299ab; } .bootstrap-datetimepicker-widget table th.disabled, .bootstrap-datetimepicker-widget table th.disabled:hover, .bootstrap-datetimepicker-widget table td.disabled, .bootstrap-datetimepicker-widget table td.disabled:hover, .bootstrap-datetimepicker-widget table td span.disabled, .bootstrap-datetimepicker-widget table td span.disabled:hover { color: #dddddd; } .bootstrap-datetimepicker-widget table th.prev::after { content: "<<"; } .bootstrap-datetimepicker-widget table th.next::after { content: ">>"; } /*============= AVAILABLE LANGUAGES SELECTOR WHEN GENERATING PDF ===============*/ .available-languages-pdf { display: inline-block; position: relative; font-size: 13px; } .available-languages-pdf .btn-icon { padding-left: 10px; } .available-languages-pdf .btn-icon i { margin-right: 0; margin-left: 5px; } .available-languages-pdf .btn.btn-action:focus::after { -webkit-transform: translate3d(0, 100%, 0); } .available-languages-pdf .dropdown-menu { --bs-dropdown-min-width: 100%; --bs-dropdown-padding-x: 0; --bs-dropdown-padding-y: 0; --bs-dropdown-font-size: 14px; --bs-dropdown-border-radius: 4px; --bs-dropdown-border-width: 0; text-align: center; box-shadow: 0 3px 8px rgba(0,0,0,0.1); overflow: hidden; } .available-languages-pdf .dropdown-menu a { display: block; width: 100%; font-weight: 600; padding: 6px 5px; background-color: var(--bgNavLinkColor); color: var(--navLinkColor); transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } .available-languages-pdf .dropdown-menu a:hover { background-color: var(--bgNavLinkHoverColor); color: var(--navLinkHoverColor); } ::placeholder, [data-cke-editorplaceholder]::before { opacity: 0.5 !important; font-style: italic; } [data-cke-editorplaceholder]::before { color: inherit !important; } .system-sortable-handle { position: absolute; width: 140px; height: 22px; top: -1px; left: -1px; cursor: move; border-radius: 0 0 4px 0; background: #3299ab; opacity: 0.2; } .system-option-handle { position: absolute; width: 140px; height: 22px; top: -1px; left: -1px; cursor: move; border-radius: 0 0 4px 0; background: #3299ab; opacity: 0.2; } .system-sortable-handle:hover { opacity: 1; } .chosen-container-multi .default { width: auto !important; } .system-option-handle:hover { opacity: 1; } .predefined-message-button { background-color: #188a99 !important; color: #FFFFFF !important; } .system-reminder-language-subject:disabled, .system-reminder-language-content:disabled, .system-reminder-language-text-message:disabled { background-color: var(--bs-secondary-bg); } .label-pointer { cursor: pointer; } .overflow-visible { overflow: visible; } .br-widget a { font-family: 'Font Awesome 6 Free' !important; } /*============= FORM WATERMARK ===============*/ /*Text*/ .watermarked-text::after { position: fixed; top: 50%; left: 50%; pointer-events: none; content: attr(data-watermark); line-height: 3em; letter-spacing: 2px; z-index: 1; /*transform: translate(-50%, -50%) rotate(-45deg)*/ /*direction*/ /*; color: red;*/ /*color*/ /*font-size: 100px;*/ /*size*/ /*opacity: 0.1;*/ /*transparent*/ /*width: 100%;*/ /*repeat*/ /*text-align: center;*/ /*repeat */ } /*Image*/ .watermarked-picture::after { position: fixed; top: 50%; left: 50%; pointer-events: none; transform: translate(-50%, -50%); content: ""; background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; z-index: 1; /*background-image: url("/uploads/77bf8271-5fa3-4dcb-b2d0-cbd29e138056.jpg"); opacity: 0.35;*/ /*transparent*/ } .add-to-projects-subject .btn-danger { height: 30px; width: 29px; min-height: 28px; min-width: 28px; justify-content: center; align-items: center; margin: 2px 0px; float: right; } /* ==================== Only for pridd Home ========================= */ /* styles for links in login Home */ .website-home-login { margin-top: 30px; text-align: center; } .website-home-login a { color: #242863; font-size: 13px; transition: all 0.5s ease; position: relative; } .website-home-login a::after { content: ''; position: absolute; width: 0%; height: 1px; left: 50%; bottom: -4px; background-color: #242863; transition: all 0.5s ease; } .website-home-login a:hover { opacity: 0.6; transition: all 0.5s ease; } .website-home-login a:hover::after { width: 100%; left: 0; transition: all 0.5s ease; } .public-copyright-container { position: absolute; bottom: 20px; font-size: 13px; } .public-copyright-icon { font-size: 18px; margin-right: 3px; } /* ==================== QR Code ========================= */ .qr-code-container { width: 150px; height: 150px; } .qr-code-container-mini { width: 75px; height: 75px; } /************Comments (User & TimelineStage)***********/ .comments-container { padding: 0 10px; display: flex; flex-wrap: wrap; } .comments-container .comment-history { max-height: 500px; overflow-y: auto; overflow-x: hidden; border: 1px solid #ccc; padding: 1%; background-color: #f4f5f7; margin-top: 10px; border-radius: 8px; } .comments-container .no-comment-desc { color: #666; font-size: 14px; padding: 20px; margin: 10px 2px; background-color: #f1f1f1; border-radius: 5px; } .comments-container .timeline-stage-comment-history-step-details, .comments-container .survey-answer-status-history-step-details, .comments-container .subject-inclusion-history-step-details { margin: 10px 2px; display: flex; flex-wrap: wrap; padding-bottom: 20px; padding: 5px 5px 0 45px; border-bottom: 1px dashed #c3c3c3; position: relative; } .comments-container .existing-comment { border-radius: 5px; resize: none; background-color: #e9ecef; } .comments-container .new-comment { border-radius: 10px; resize: none; font-style: italic; padding: 20px; background-color: #eaf1f3; margin: 10px 2% 0 2%; width: calc(33.3333% - 4%); flex: 1 0 calc(33.3333% - 4%); box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.2); } .comments-container .comment-pos { display: flex; font-size: 14px; color: #ffffff; position: absolute; width: 36px; height: 30px; background-color: #689fa7; border-radius: 25%; text-align: center; align-items: center; justify-content: center; align-items: center; font-size: 16px; top: 0px; left: -5px; } .comments-container .comment-content::after { content: '\f075'; font-family: "Font Awesome 6 Free"; position: absolute; right: -5px; font-size: 30px; top: 22px; color: #689fa724; } .comments-container .comment-desc { flex: 0 0 80%; font-size: 12px; /* color: #525252;*/ } .comments-container .comment-desc.answer-status-comment .comments-container .comment-desc.subject-inclusion-status-comment { font-size: 14px; } .comments-container .comment-name { flex: 0 0 80%; font-weight: bold; } .comments-container .comment-date { flex: 0 0 20%; text-align: right; font-size: 11px; font-weight: bold; } .comments-container .comment-content { border: 0; padding: 10px; margin-bottom: 10px; } /*************General*********/ .desc-label { font-weight: normal; font-size: 12px; font-style: italic; margin-top: 3px; margin-bottom: 3px; display: block; } /* ================ Sweet Alert ================== */ .swal2-container .swal2-popup { width: 500px; padding: 17px; font-size: 1rem; } .swal2-container .swal2-title { color: #575757; font-weight: 600; font-size: 26px; } .swal2-container .swal2-html-container { color: #797979; font-size: 17px; /*text-align: start;*/ font-weight: 500; margin: 15px 10% 0 10%; } .swal2-container .swal2-textarea { font-size: 15px; margin: 5px 10%; } .swal2-container .swal2-actions { margin: 15px auto 0 auto; } .swal2-container .swal2-styled.swal2-cancel, .swal2-container .swal2-deny.swal2-styled, .swal2-container .swal2-confirm.swal2-styled { color: #fff; font-size: 17px; padding: 10px 32px; font-weight: 600; } .swal2-container .swal2-styled.swal2-cancel { background-color: #C1C1C1; } .swal2-container .swal2-file:focus, .swal2-container .swal2-input:focus, .swal2-container .swal2-textarea:focus { border: 1px solid #b4dbed; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .06), 0 0 0 1px rgba(100, 150, 200, .5); } /****Subject Details******/ .account-locked { padding: 6px 9px; font-size: 12px; background-color: #FF0000; color: #FFFFFF; font-weight: bold; animation-name: flashRed; animation-duration: 2s; animation-delay: 1s; animation-iteration-count: infinite; } @keyframes flashRed { from { background-color: #FF0000; } to { background-color: #CA3738; } } .subject-attributes.passed h4 { background-color: rgba(0, 128, 0, 0.1); } .passed h4 { background-color: rgba(0, 128, 0, 0.1); } .subject-attributes.active-section h4 { background-color: rgba(0, 128, 0, 0.5); } /* ============== Sticky info bar (Subject Details) ================= */ .body-content > .row-sticky-info { position: sticky; top: 85px; z-index: 100; border-top: 10px solid #f6f7f8; border-bottom: 10px solid #f6f7f8; margin: -10px 0 0 0; padding: 0; border-radius: 0; box-shadow: 0 1px 4px rgba(255, 255, 255, 100%); background-color: transparent; } .body-content > .row-sticky-info .col-sticky-info { background-color: #ffffff; margin: 0; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 8%); padding: 10px 25px; min-height: 50px; } .body-content > .row-sticky-info .col-sticky-info .row { display: flex; align-items: center; } /* ================= AREA COLLAPSED IN FORM EDITOR ================== */ .system-area.collapse-area .ui-formItemsContainer { height: 0; overflow: hidden; } .system-area.collapse-area { border: 1px solid #449f98; background-color: #e0fffd; } .system-area.collapse-area:after { content: 'collapsed'; position: absolute; background-color: #449f98; border: solid #449f98; border-width: 1px 1px 0 1px; padding: 2px 8px; right: -1px; border-top-left-radius: 4px; border-top-right-radius: 4px; top: -20px; font-size: 10px; color: white; font-weight: bold; } .form-options-bar-extra .btn.btn-bar.expand-areas { background: #449f98; } .btn.btn-default.collapse-area { background: #449f98; } /******Middle box (temporary css)******/ .middle-box { margin-top: 300px; } @media (max-width: 992px) { .middle-box { margin-top: 150px; } } @charset "utf-8"; /* CSS Document */ /* Skin Base Forms Formbuilder v5.0 By Francisco Mas Navarro 27-02-2023 francisco.mas@swiss4ward.com /* ========= INDEX ======== */ /* ===== Google font ============================ */ /* INDEX 0. FONT-FACE 1. STRUCTURE General Page and Navigation =========== 2. MODULES ========================================= 3. ADDING VISIT HEADER ============================= 3.1 Inputs Visit Header ======================== 4. TITLES ========================================= 4.1 Labels ===================================== 4.2 Required =================================== 4.3 Label0 ===================================== 4.4 Only when delete-label delete margin group = 4.5 Delete help-block ========================== 4.6 Normal and Bold Label ====================== 5. INPUTS ========================================== 5.1 Inputs ===================================== 5.2 Indent lines =============================== 5.3 Select ===================================== 5.4 Select 2 =================================== 5.5 Checkbox =================================== 5.6 Radios ===================================== 5.7 Textarea =================================== 5.8 Tooltips =================================== 5.9 Radio groups Vertical and Horizontal ====== 5.10 Date ====================================== 5.11 Help Block ================================ 5.12 Text Danger =============================== 5.13 Range Input =============================== 5.14 Range Input Gradient ====================== 5.15 PLUS ICON ================================= 5.16 Button custom file ======================== 6. FOOTER 7. SYSTEM COLS ===================================== 8. COL-FLEX SYSTEM + COLS ========================= 9. COL-GROUPS SYSTEM =============================== 10. TABLES ======================================== 11. LIST GROUP ITEMS =============================== 12. HELPERS HEIGHTS AND MARGINS ==================== 13. Simple FX ====================================== 14. INPUT SIZE CHARS =============================== 15 INFO ICON ======================================= 16 IMAGE MAPS 17 BODY MAPS 18 Flex-group headers ============================== 19 RESULTS ========================================= 20 PROGRESS ======================================== 21 HIDE CODES CENTER USER 23 Docs download page 24 Image Picker 30 DATA MONITOR */ /* ======================== 0. FONT-FACE =======================*/ :root { --bs-font-sans-serif: "Noto Sans", sans-serif; --fo-size-layout: 92%; --fo-menu-font-size: 14px; } /* ================ NOTO SANS ================== */ @font-face { font-family: 'Noto Sans'; src: url('../fonts/notosans-regular.ttf') format('truetype'), url('../fonts/notosans-regular.woff2') format('woff2'), url('../fonts/notosans-regular.woff') format('woff'); font-weight: normal; } @font-face { font-family: 'Noto Sans'; src: url('../fonts/notosans-semibold.ttf') format('truetype'), url('../fonts/notosans-semibold.woff2') format('woff2'), url('../fonts/notosans-semibold.woff') format('woff'); font-weight: 600; } @font-face { font-family: 'Noto Sans'; src: url('../fonts/notosans-bold.ttf') format('truetype'), url('../fonts/notosans-bold.woff2') format('woff2'), url('../fonts/notosans-bold.woff') format('woff'); font-weight: bold; } /* ============ 1. Structure General Page and Navigation =============== */ /* ============ ======================================== =============== */ /* Reset body*/ html, body { height: auto; } /* Reset colors background and typo */ body { background: #fff; color: #111; font-size: var(--fo-body-font-size); line-height: 1.25em; } /* =========================== 1.1 SKIN BOOTSTRAP 3 =======================*/ /* Resize content all usable space */ body.boxed-layout { background: #fff; color: #111; font-size: var(--fo-body-font-size); } body.boxed-layout.top-navigation #wrapper { background: #fff; width: 92%; padding: 0; max-width: 100% !important; margin: 0 auto; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* Usable space for page content */ body.boxed-layout.top-navigation #page-wrapper { padding: 0; margin: 0 !important; position: relative !important; background-color: #fff; } /* Navigation bar */ .boxed-layout .navbar.navbar-static-top { background-color: var(--headBgColor); position: fixed; width: 100%; left: 0; right: 0; top: 0; margin: 0 auto 0 auto; height: 72px; border-bottom: 0; box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.1); } /* ============== Navbar 98% 1400px interior real header =================*/ .boxed-layout .navbar-header { width: 98%; position: fixed; z-index: 100; max-width: 1340px; padding: 0; left: 0; right: 0; height: 75px; overflow: hidden; margin: auto; background-color: transparent !important; } .boxed-layout .navbar-brand { background-color: transparent !important; } .boxed-layout .navbar-brand img { max-width: 220px; margin: 12px 0 0 0; max-height: 75px; margin-top: 0px; height: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .boxed-layout .navbar-collapse.collapse { width: 98%; position: fixed; max-width: 1340px; z-index: 100; left: 0; right: 0; padding: 0; margin: 0px auto 0 auto; height: 0 !important; } /* /* Reset ul navbar-right user, language, time, close */ .boxed-layout .navbar-top-links.navbar-right { margin: 5px 0 0 0; padding: 0; width: auto; } /* li navbar-right user, language, time, close */ .boxed-layout .navbar-top-links.navbar-right li { width: auto; margin-right: 20px; float: left; height: 30px; text-align: center; } /* links in list and profile */ .boxed-layout .navbar-top-links.navbar-right > li > a, .boxed-layout .navbar-top-links.navbar-right > li > a.profile { min-width: 50px; min-height: 20px; color: var(--navLinkColor); font-size: var(--fo-menu-user-font-size); line-height: 17px; font-weight: 500; padding: 5px 5px 5px 5px; text-align: right; } .boxed-layout .navbar-top-links.navbar-right > li a:hover, .boxed-layout .navbar-top-links.navbar-right > li a:focus { color: var(--navLinkHoverColor) !important; background-color: var(--bgNavLinkHoverColor) !important; transition: all 0.5s ease; } .boxed-layout .navbar-top-links.navbar-right > li > a.pdfExportButton, .boxed-layout .navbar-top-links.navbar-right > li > a.csvExportButton { color: var(--navLinkColor); filter: var(--brightness); } /* ul dropdown in language menu */ .boxed-layout .navbar-top-links.navbar-right > li.dropdown { width: 50px; } .boxed-layout .navbar-top-links.navbar-right > li.dropdown .dropdown-menu { box-shadow: none; border: 1px solid var(--hColor); background-color: #ffffff; width: 50px; min-width: 50px; float: none; } .boxed-layout .navbar-top-links.navbar-right > li.dropdown { text-align: center; } /* li's dropdown in language menu */ .boxed-layout .navbar-top-links.navbar-right > li.dropdown .dropdown-menu li { width: 48px; } .boxed-layout .navbar-top-links.navbar-right > li.dropdown .dropdown-menu li a { padding: 2px 6px 2px 6px; display: flex; justify-content: center; height: 30px; border-radius: 0; background-color: var(--navLinkHoverColor); color: var(--navLinkColor); } .boxed-layout .navbar-top-links.navbar-right > li.dropdown .dropdown-menu li:last-child a { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } .boxed-layout .navbar-top-links.navbar-right > li.dropdown .dropdown-menu li a:hover { background-color: var(--bgNavLinkHoverColor) !important; color: var(--navLinkHoverColor) !important; } /* li close */ .boxed-layout .navbar-top-links.navbar-right > li.form-close { width: 25px; margin: 0; display: none !important; } .boxed-layout .navbar-top-links li.form-close a.btn-form-close { font-size: 12px !important; border: 1px solid var(--pColor); background-color: var(--pColor) !important; color: #ffffff; opacity: 0.8; border-radius: 2px; margin-top: 2px; padding: 2px 7px !important; transition: all 0.4s ease; } .boxed-layout .navbar-top-links li.form-close a.btn-form-close:hover { opacity: 0.5; transition: all 0.4s ease; } .boxed-layout .wrapper.wrapper-content { padding: 0 0 !important; margin: 85px 0 0 0; } /* Reset content container */ .boxed-layout .container.body-content { width: 100%; padding: 0 0 40px 0; margin: auto; max-width: 1340px; } /* Fix navigation bar form only in forms with pages */ .boxed-layout #navigation-bar { position: fixed; z-index: 1000; width: 100%; max-width: 890px; left: 0; right: 0; min-height: 30px; top: 35px; padding: 0; border-radius: 4px; margin: 0 auto; background-color: var(--navbgColor); } /* Delete title and description form */ .boxed-layout #navigation-bar ~ h2, .boxed-layout #navigation-bar ~ h4 { display: none; } .boxed-layout .navbar-top-links.navbar-right > li > a.pdfExportButton, .boxed-layout .navbar-top-links.navbar-right > li > a.csvExportButton { min-width: 37px; width: 37px; height: 37px; margin-top: 2px; margin-right: 4px !important; } /* =========================== 1.1 SKIN BOOTSTRAP 5.0 =======================*/ /* Resize content all usable space */ body.public.bt5:not(.login-logonselectproject-projectstyle) #wrapper { background: #fff; width: 96%; max-width: 1340px; padding: 0; margin: 0 auto; } /* Usable space for page content */ body.public.bt5 #page-wrapper { padding: 0; margin: 0 !important; background-color: #fff; } /* ============== Fix header 100% =========================*/ /* Navigation bar */ /* =========== Header Bar and Menu Not Public ================== */ .public.bt5:not(.login-logonselectproject-projectstyle) .header-bar { height: 72px; border: 0; position: fixed; width: 100%; background-color: var(--headBgColor); border-radius: 0; } .public.bt5:not(.login-logonselectproject-projectstyle):not(.visit) .header-bar { box-shadow: 0px 4px 4px 0 rgb(0 0 0 / 10%); border-bottom: 1px solid var(--headBrColor); } .public.bt5.not-login:not(.login-logonselectproject-projectstyle) .header-bar { /*height: auto;*/ display: block; border-bottom: 0px; box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0.1); background-color: transparent; } .public.bt5.visit:not(.login-logonselectproject-projectstyle) .header-bar { border-bottom: 0 !important; box-shadow: none !important; } .public.bt5:not(.login-logonselectproject-projectstyle) .header-bar .navbar.navbar-static-top { border-bottom: 0; box-shadow: none; width: 100%; max-width: 1340px; margin: 0 auto; border: 0; padding: 0; align-items: center; display: flex; align-items: flex-start; } .public.bt5 .header-bar .navbar.navbar-static-top .navbar-header { /*border: 1px solid;*/ min-width: 200px; } /* ==================== 1.2 Logo ==================== */ /* ================================================== */ .public.bt5 .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand { background-color: transparent; max-width: 220px; max-height: 75px; margin: 0; } .public.bt5 .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand img { max-width: 230px; margin: 0 0 0 0; max-height: 70px; height: auto; padding: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* ==================== 1.3 Header Navbar ==================== */ /* Boostrap 5 */ /* links in list and profile */ .header-bar .navbar.navbar-static-top .header-menu .nav.navbar-user { margin-top: 8px; } .public.bt5 .navbar-user .navbar-right > li > a, .public.bt5 .navbar-right > li a, .public.bt5 .navbar-user .navbar-right > li > a.profile { min-width: 50px; min-height: 14px; color: var(--navLinkColor); font-size: var(--fo-menu-user-font-size); line-height: 17px; font-weight: 600; padding: 1px 5px 5px 5px; text-align: center; } .public.bt5 .navbar-user .navbar-right > li > a.profile { display: block; } .public.bt5 .navbar-user .navbar-right > li.remaining-time { margin-top: 0px; } .public.bt5 .navbar-user .navbar-right > li.remaining-time, .public.bt5 .navbar-user .navbar-right > li remaining-time a { cursor: default; pointer-events: none; } .public.bt5 .navbar-right > li.dropdown a { padding: 5px 5px; text-align: right; } .public.bt5 .navbar-user .navbar-right > li:not(.dropdown):hover a, .public.bt5 .navbar-user .navbar-right > li:not(.dropdown):focus a { color: var(--navLinkHoverColor) !important; background-color: var(--bgNavLinkHoverColor) !important; transition: all 0.5s ease; } .public.bt5 .navbar-user .navbar-right > li:hover:after, .public.bt5 .navbar-user .navbar-right > li:focus:after { background-color: var(--bgNavLinkHoverColor); } .public.bt5 .navbar-user .navbar-right > li.export-csv, .public.bt5 .navbar-user .navbar-right > li.export-pdf { margin: -1px 5px 0 10px; width: 28px; min-width: 28px; } .public.bt5 .navbar-user .navbar-right > li.export-csv:after, .public.bt5 .navbar-user .navbar-right > li.export-pdf:after { content: none; } .public.bt5 .navbar-user .navbar-right > li.export-csv:hover a, .public.bt5 .navbar-user .navbar-right > li.export-pdf:hover a { background-color: transparent !important; opacity: 0.5; transition: all 0.3s ease; } .public.bt5 .navbar-user .navbar-right > li.export-csv > a.csvExportButton, .public.bt5 .navbar-user .navbar-right > li.export-pdf > a.pdfExportButton { display: block; min-width: 30px; padding: 0; } .public.bt5 .navbar-user .navbar-right > li img { top: -1px; } .public.bt5 .navbar-user .navbar-right > li.dropdown { width: 100px; } .public.bt5 .navbar-user .navbar-right > li.dropdown::after { bottom: -1px; background-color: var(--bgNavLinkHoverColor); } .public.bt5 .navbar-user .navbar-right > li.dropdown .dropdown-menu { box-shadow: none; border: 1px solid transparent; background-color: #ffffff; float: none; margin: 4px 0 0 0; width: 100px; max-height: 600px; overflow-y: auto; } .dropdown-toggle::after { border-top: 0.3em solid var(--navLinkColor); } .dropdown-menu::-webkit-scrollbar { width: 8px; border-radius: 4px; } .dropdown-menu::-webkit-scrollbar-track { background-color: var(--bgColor); } .dropdown-menu::-webkit-scrollbar-thumb { background-color: var(--selColor); } .dropdown-menu::-webkit-scrollbar-button { background-color: var(--selColor); } .dropdown-menu::-webkit-scrollbar-button:hover, .dropdown-menu::-webkit-scrollbar-thumb:hover { background-color: var(--hColor); } .dropdown-menu::-webkit-scrollbar-corner { background-color: black; } .public.bt5 .navbar-user .nav > li.dropdown ul.dropdown-menu li { padding: 0; } .public.bt5 .navbar-user .nav > li.dropdown ul.dropdown-menu li:hover { background-color: var(--bgNavLinkHoverColor); border-radius: 4px; color: var(--navLinkHoverColor); transition: all 0.4s ease; } .public.bt5 .navbar-user .nav > li.dropdown ul.dropdown-menu li img { left: 6px; margin-top: 3px; } .public.bt5 .navbar-user .navbar-right > li.dropdown .dropdown-menu li a { background-color: var(--bgNavLinkColor); color: var(--navLinkColor); text-align: center; padding: 6px 5px; border-radius: 0; } .public .navbar-user .navbar-right > li.dropdown .dropdown-menu li a:hover { background-color: var(--bgNavLinkHoverColor) !important; border-radius: 0px; color: var(--navLinkHoverColor) !important; } /* ============== Navbar-collapse 98% 1400px interior real nav =================*/ .public.bt5 .navbar-user .navbar-right > li.form-close { width: 25px; margin: 0; display: none !important; } .public.bt5 .navbar-user .navbar-right li.form-close a.btn-form-close { font-size: 12px !important; border: 1px solid var(--pColor); background-color: var(--pColor) !important; color: #ffffff; opacity: 0.8; border-radius: 2px; margin-top: 2px; padding: 2px 7px !important; transition: all 0.4s ease; } .public.bt5 .navbar-user .navbar-right li.form-close a.btn-form-close:hover { opacity: 0.5; transition: all 0.4s ease; } /* ====== Content margin top with height header fix =======*/ .public.bt5 .wrapper.wrapper-content { padding: 0 0; margin: 85px 0 0 0; } .public.bt5 .body-content { padding: 0; } /* Fix navigation bar form only in forms with pages */ .public.bt5 #navigation-bar { position: fixed; z-index: 200; width: 100%; max-width: 890px; left: 0; right: 0; min-height: 30px; top: 40px; padding: 0; border-radius: 4px; margin: 0 auto; background-color: var(--navbgColor); /* border: 1px solid #00f;*/ } /* Delete title and description form */ .public.bt5 #navigation-bar ~ h2, #navigation-bar ~ h4 { display: none; } .public.bt5 .navbar-top-links.navbar-right > li > a.pdfExportButton, .public.bt5 .navbar-top-links.navbar-right > li > a.csvExportButton { min-width: 37px; width: 37px; height: 37px; margin-top: 2px; margin-right: 4px !important; } /* ================= 1.4 Pagination bar ============= */ /* ================================================== */ /* container of bar pagination */ .survey-navigation-container { position: absolute; width: 100%; margin: 0 0 0 0 !important; } .survey-navigation-container .btn { min-width: 30px; } /* bar of buttons pagination form */ .page-navigation-bar { padding: 0; font-weight: bold; float: none; margin: auto; max-width: 100%; background: transparent !important; margin: 0 auto; display: flex; justify-content: center; } body.public.boxed-layout .page-navigation-bar { z-index: 1000 } /* group buttons in bar*/ .page-navigation-bar .btn-group, .page-navigation-bar .btn-group-vertical { position: relative; display: inline-flex; vertical-align: middle; margin-left: 0 !important; } /* buttons of navigation */ .boxed-layout .page-navigation-bar .btn-navigation, .boxed-layout .page-navigation-bar .btn-navigation-current { border: 0; font-size: var(--fo-menu-font-size); font-weight: 600; padding: 4px 8px; cursor: pointer; opacity: 1; box-shadow: none; min-height: 28px; margin: 0 4px; border-radius: 3px !important; transition: all 0.3s ease; } /* buttons of navigation */ .public.bt5 .page-navigation-bar .btn-navigation, .public.bt5 .page-navigation-bar .btn-navigation-current { margin-left: 4px !important; border: 0; font-size: var(--fo-menu-font-size); font-weight: 600; padding: 4px 8px; cursor: pointer; display: flex; justify-content: center; align-items: center; box-shadow: none; min-height: 28px; margin: 0 4px; border-radius: 3px !important; transition: all 0.3s ease; } .btn-navigation { color: var(--navFormColor); background-color: var(--navFormBgColor); } .btn-navigation-current, .btn-navigation-current:hover { color: var(--navFormCurrentColor); background-color: var(--navFormBgCurrentColor); } /* Delete caret */ .btn-navigation-current .caret { display: none !important; } .btn-navigation-current.dropdown-toggle::after { display: none; } .btn-navigation:hover, .btn-navigation:focus, .btn-navigation:active, .btn-navigation.active { box-shadow: none; background-color: var(--hColor); transition: all 0.3s ease; } .btn-navigation-current:hover { border: 0; box-shadow: none; background-color: var(--selColor); transition: all 0.3s ease; } .body-content > .row { box-shadow: none; padding: 5px 0; min-height: auto; } /* =========== 1.5 Responsive Navigation ============= */ /* =========== ========================= ============= */ @media (max-width:1366px) { .public.bt5:not(.login-logonselectproject-projectstyle) .header-bar .navbar.navbar-static-top { padding: 0 10px; } .header-bar .navbar.navbar-static-top .header-menu { max-width: none; flex: 1 0 70%; } } @media (max-width:1024px) { .public.bt5 .header-bar .navbar.navbar-static-top .navbar-header .navbar-brand img { max-height: 65px; margin-left: 5px; } .header-bar .navbar.navbar-static-top .header-menu { max-width: 70%; flex: 1 0 70%; } .wrapper.wrapper-content { padding: 0 0 !important; margin: 0 0 0 0; } /* Navigation */ .navbar-collapse.collapse { display: block; } /* Responsive ul navbar-right user, language, time, close */ .boxed-layout .navbar-top-links.navbar-right, .navbar-top-links.navbar-right { margin: 13px 45px 0 0; float: right !important; } /* Hide old button boostrap menu responsive */ .navbar-toggle { display: none; } /* Responsive Navigation bar */ .public.bt5 #navigation-bar, .boxed-layout #navigation-bar { width: 100%; z-index: 200; max-width: 100%; margin: -60px auto 0 auto; height: 0 !important; } .boxed-layout #navigation-bar { z-index: 1101; } .navbar-top-links.navbar-right li { width: auto; margin-right: 5px; } /* New button menu hamburguer */ input[type=checkbox].navigation-menu-checkbox { -webkit-appearance: none; /* border: 1px solid #000; */ position: fixed; right: 10px; z-index: 10000; top: 10px; cursor: pointer; width: 35px; height: 35px; display: block !important; } input[type=checkbox].navigation-menu-checkbox:hover { border: 0 !important; box-shadow: none !important; } input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: none; outline: 0; outline-offset: 0; } input[type=checkbox].navigation-menu-checkbox::after { content: "\f0c9"; font-family: "Font Awesome 6 Free", 'FontAwesome'; font-size: 35px; color: var(--navbgRevColor); } .input[type=checkbox].navigation-menu-checkbox:focus { outline: 0 !important; } input[type=checkbox]:checked.navigation-menu-checkbox ~ .survey-navigation-container { margin-top: 0% !important; background-color: #fff; transition: all 0.8s ease; z-index: 1; } input[type=checkbox].navigation-menu-checkbox ~ .mobile-menu-curtain { content: ''; position: fixed; background-color: #10101066; opacity: 0; width: 100%; height: 0; z-index: 0; } input[type=checkbox]:checked.navigation-menu-checkbox ~ .mobile-menu-curtain { height: 100%; opacity: 1; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; } /* Responsive container of bar pagination */ .survey-navigation-container { position: absolute; top: 92px; left: 0; max-width: none; margin-top: -200% !important; height: auto; z-index: 100; transition: all 0.8s ease; } /* Responsive bar of buttons pagination form */ .survey-navigation-container .page-navigation-bar { box-shadow: 4px 8px 12px 0px rgba(0, 0, 0, 0.1); width: 100%; max-width: 100%; margin: 0 auto !important; display: flex; flex-wrap: wrap; flex-direction: column; } .survey-navigation-container .page-navigation-bar .btn-group { width: 100%; margin: 0px !important; display: flex; flex-direction: column; } .survey-navigation-container .page-navigation-bar .btn-group .btn { flex: 1 0 100%; width: 100%; max-width: 100%; border-radius: 0 !important; min-height: 35px; font-weight: bold; font-size: var(--fo-buttons-font-size); border-bottom: 1px solid #fff; margin: 0px !important; } } @media (max-width:685px) { .header-bar .navbar.navbar-static-top .header-menu { max-width: 65%; flex: 0 0 65%; } .public.bt5 .header-bar .navbar.navbar-static-top .navbar-header { min-width: 120px; } } @media (max-width:480px) { .header-bar .navbar.navbar-static-top .header-menu { max-width: 100%; flex: 0 0 100%; } .public.bt5:not(.login-logonselectproject-projectstyle) .header-bar { height: 85px; } .public.bt5 .header-bar .navbar.navbar-static-top .header-menu .nav.navbar-user { margin-top: 4px; } .survey-navigation-container { top: 105px; } .nav > li.dropdown { width: 60px; margin-right: 10px !important; } .navbar.navbar-static-top, .public.bt5 .header-bar .navbar.navbar-static-top .navbar-header { max-height: 42px; margin-top: 5px; } /* Mobile logo */ .navbar.navbar-static-top { height: 60px; } #navigation-bar { margin: -70px auto 0 auto; } .navbar-brand img { max-width: 180px !important; max-height: 65px; margin: 4px 0 0 0; } .nav.navbar-right { margin: 2px 40px 0 0 !important; width: 60%; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; } .nav.navbar-right li { margin-right: 0; margin-left: 5px; font-size: 12px; } .nav.navbar-right li a { padding: 5px 0px; font-size: 12px; min-height: 25px !important; } .nav.navbar-right li a.profile .profile-user, .nav.navbar-right li a.profile .profile-center { max-width: 114px; max-height: 16px; line-height: 13px; overflow: hidden; font-size: 12px; } .nav.navbar-right > li.dropdown a { font-size: 12px; } .nav.navbar-right li.remaining-time { margin: 8px -40px 0 0; width: auto; font-size: 12px; } .nav.navbar-right li.remaining-time a { font-size: 12px; } /* Hide close button in mobile */ .nav.navbar-right > li.form-close { display: none; } .nav.navbar-right > li > a.pdfExportButton, .nav.navbar-right > li > a.csvExportButton { min-width: 30px; width: 30px; height: 30px; margin-right: 5px !important; } /* New button menu hamburguer */ input[type=checkbox].navigation-menu-checkbox { top: 8px; right: 5px; } .input[type=checkbox].navigation-menu-checkbox:focus { outline: 0 !important; } } /* ===================== 2. MODULES ============================*/ /* ===================== ======= ===============================*/ .ui-pageContainer { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; margin-top: 10px; min-height: 200px; width: 100%; } /* Reset and tuning main modules */ .system-area { /*border: 1px solid #f00 !important;*/ padding: 0; margin: 0; } /* Group of elements */ .ui-formItemsContainer { /*border: 1px solid #f00 !important;*/ list-style-type: none; margin: 2px 4px; padding: 4px 4px; min-height: 0 !important; } /* Element */ .ui-formElement { /*border: 1px solid #0f0 !important;*/ padding: 3px 6px 3px 6px; margin: 0px; } /* Inside Element group of items */ .form-group { margin: 0; padding: 0; overflow: visible; /*border: 1px solid #00f !important;*/ width: 100%; } /* ========================== 2.1 Modules Backgrounds =================== */ /* ========================== ======================= =================== */ /* Add bg in area */ .bg.system-area .ui-formItemsContainer, .bg2.system-area .ui-formItemsContainer, .bg3.system-area .ui-formItemsContainer { background-color: var(--bgColor); border-radius: 4px; margin: 2px 4px; padding: 4px 4px; display: flow-root; } .bg.system-area .ui-formElement, .bg2.system-area .ui-formElement, .bg3.system-area .ui-formElement { padding: 3px 6px 3px 6px; } .bg.ui-formElement, .bg2.ui-formElement, .bg3.ui-formElement { padding: 0; } .bg.ui-formElement .form-group, .bg2.ui-formElement .form-group, .bg3.ui-formElement .form-group { background-color: var(--bgColor); padding: 7px 8px; border-radius: 4px; margin: -4px 0px; } .bg2.system-area .ui-formItemsContainer, .bg2.ui-formElement .form-group { background-color: var(--bgColor2); } .bg3.system-area .ui-formItemsContainer, .bg3.ui-formElement .form-group { background-color: var(--bgColor3); } /* ================= 2.2 Buttons ============= */ .lnkNext, .lnkPrev, .btn-red { background-color: var(--pColor); border-color: var(--pColor); border-radius: 3px; color: #fff; } .btn-rounded .lnkNext, .btn-rounded .lnkPrev, .btn-rounded .btn-red { border-radius: 20px; } .lnkNext:hover, .lnkPrev:hover, .btn-red:hover, .btn-red:focus, .btn-red:active, .btn-red.active, .open .dropdown-toggle.btn-red { background-color: var(--hColor); border-color: var(--hColor); color: #fff; transition: all 0.3s ease-out; } #next-buttons, #lnkPrev { margin-top: 20px; } #next-buttons .fa-solid { padding: 0 0 0 10px; margin-right: 0; } #lnkPrev .fa-solid { padding: 0 10px 0 0; margin-right: 0; } /* =========================== 3 Adding Visit Header ======================*/ /*============================ ===================== ======================*/ /* if click on .js-btn-info-show --> $toggleClass collapseOut in .collapse-header */ /* if click on .js-header-collapse --> $toggleClass collapseOut in .js-header-collapse */ /* Changes for put bar visit header and resize header */ .public.bt5.visit:not(.login-logonselectproject-projectstyle) .header-bar { border-bottom: 0 !important; box-shadow: none !important; } /* ========= Bar with inputs and i button - Visit title ====================*/ /* Bar visit fixed back */ .visit-title { width: 100%; position: fixed; z-index: 101; padding: 0; left: 0; right: 0; margin: 0 auto !important; background-color: var(--headBgColor); top: 72px; } /* Bar visit boxed */ .visit-title .ui-formItemsContainer { background-color: var(--visitBgColor); padding: 2px 0 1px 0; width: 100%; max-width: 1340px; min-height: 35px !important; border-radius: 3px; position: relative; margin: auto; display: flex; align-items: center; flex-flow: wrap; } .visit-title .ui-formElement { padding: 0 !important; margin: -2px 5px 0px 10px !important; } .visit-title .form-group { margin: 2px 5px 0 0; padding: 0px; display: flex; height: 100%; align-items: center; } /* bar label visit title */ .visit-title .ui-formItemsContainer > .ui-formElement > .form-group > label { margin: 0px 5px 0 0px !important; min-width: inherit; width: auto; white-space: nowrap; color: #fff !important; font-size: 1em; font-weight: bold !important; } .visit-title .ui-formItemsContainer > .ui-formElement > .form-group > label h4 { color: #fff !important; background-color: transparent; font-size: 1em; float: left; margin: 0 !important; padding: 5px 4px !important; text-align: left; font-weight: bold !important; } .visit-title .datecustom-separator { color: #fff; } /* Delete help-block's in all elements in bar visit title */ .visit-title .ui-formItemsContainer .help-block { display: none; } /* Style for imput's in all elements in bar visit title */ .visit-title .ui-formItemsContainer input.form-control, .visit-title .ui-formItemsContainer input.custom-date, .visit-title .ui-formItemsContainer select { width: auto !important; border-radius: 2px; border: 0; padding: 0 4px; height: 25px; min-height: 25px; font-size: 13px; background-color: #ffffff; } .visit-title .ui-formItemsContainer .form-group ~ br { display: none; } /* ====== Btn for COLLAPSE header info =======*/ .visit-title .ui-formItemsContainer > .ui-formElement.js-btn-info-show { cursor: pointer; width: 32px; min-height: auto !important; height: 28px !important; position: absolute; z-index: 1000; background-color: var(--bgColor); border-radius: 4px; right: 5px; bottom: 4px; text-align: center; margin: 0 !important; } .visit-title .js-btn-info-show .form-group { justify-content: center; margin: 0; } .visit-title .ui-formItemsContainer > .ui-formElement.js-btn-info-show > .form-group > label { cursor: pointer; font-style: italic !important; font-size: 24px !important; font-family: auto; color: var(--pColor) !important; background-color: var(--bgColor); border-radius: 3px; margin: 0 !important; pointer-events: none; } .js-btn-info-show:hover { opacity: 0.7; transition: all ease 0.5s; } .visit-title .ui-formItemsContainer .custom-date.datecustom-month { min-width: 75px; } /* ==== Bar with inputs colapse - Visit contents ========*/ .header-info-row { padding: 3px 0 2px 0 !important; margin-left: 0px; background-color: var(--headBgColor); position: fixed; left: 50%; width: 100%; min-height: 5px; transform: translate(-50%, 0); top: 104px; z-index: 100; pointer-events: none; box-shadow: 0px 4px 4px 0 rgb(0 0 0 / 10%); border-bottom: 1px solid var(--headBrColor) !important; transition: all .5s ease; } /* Info row boxed */ .header-info-row .ui-formItemsContainer { max-width: 1340px; margin: 0px auto !important; display: flex; flex-wrap: wrap; min-height: 0 !important; height: 0 !important; opacity: 0; padding: 0 !important; transition: all .5s ease; } .header-info-row .ui-formItemsContainer .ui-formElement { margin: 0 !important; padding: 0 !important; border-left: 1px solid var(--headBgColor) !important; border-right: 1px solid var(--headBgColor) !important; } .visit-title label h4 { border: 0 !important; } .header-info-row .ui-formItemsContainer .ui-formElement .form-group { margin: 0px 5px 0 0px; min-height: 0 !important; border: 0 !important; border-top: 4px solid var(--visitBgColor2) !important; padding: 0 5px; height: 52px; background-color: var(--bgColor); } .header-info-row .ui-formItemsContainer .ui-formElement .form-group > label.input-label { font-size: 0.9em; } /* Displace content when header is visible */ .header-info-row + .system-area { margin-top: 35px; transition: all 0.3s ease; } .header-info-row.collapseOut + .system-area { margin-top: 85px; transition: all 0.3s ease; } /* Make visible info when js-btn-info-show clicked */ .header-info-row.collapseOut { z-index: 10; transition: all .5s ease; top: 106px; } .header-info-row.collapseOut .ui-formItemsContainer { height: auto !important; opacity: 1; visibility: visible; pointer-events: all; transition: all 0.5s ease; } /* Resize visit bar and info row if the screen is < 1400px */ @media (max-width:1400px) { .visit-title .ui-formItemsContainer, .header-info-row .ui-formItemsContainer { width: 98%; } } /* ===== Responsive Ipad header info row =========== */ @media (max-width: 850px) { .header-info-row .ui-formItemsContainer .ui-formElement .form-group label.input-label { width: 100%; font-size: 12px; line-height: 14px; } .header-info-row + .system-area { margin-top: 25px; } .header-info-row.collapseOut + .system-area { margin-top: 80px !important; } .header-info-row.first-page-sm.collapseOut { top: 126px; } .header-info-row.first-page-sm + .system-area { margin-top: 50px !important; } .header-info-row.first-page-sm.collapseOut + .system-area { margin-top: 100px !important; } } /* ===== Responsive Huawei header info row =========== */ @media (max-width: 650px) { .header-info-row + .system-area { margin-top: 20px; } .header-info-row.collapseOut + .system-area { margin-top: 116px !important; } } /* ===== Responsive Mobile header info row and visit ====== */ @media (max-width: 480px) { .visit-title { top: 85px; } .visit-title .ui-formItemsContainer { padding: 0 0 2px 0; } .visit-title .ui-formElement { width: 90%; margin-top: 1px !important; } .visit-title .ui-formItemsContainer > .ui-formElement:not(.js-btn-info-show) > .form-group > label { min-width: 33%; } .visit-title .ui-formItemsContainer > .ui-formElement:not(.js-btn-info-show) > .form-group > label ~ input.form-control { max-width: 70% !important; } .visit-title .ui-formItemsContainer > .ui-formElement.js-btn-info-show { right: 2px; bottom: 3px; } .header-info-row { top: 85px; } .header-info-row.collapseOut { top: 120px; } .header-info-row + .system-area { margin-top: 30px !important; } .header-info-row.collapseOut + .system-area { margin-top: 150px !important; } .header-info-row.first-page.collapseOut, .header-info-row.big.collapseOut { top: 143px; } .header-info-row.first-page + .system-area, .header-info-row.big + .system-area { margin-top: 45px !important; } .header-info-row.first-page.collapseOut + .system-area, .header-info-row.big.collapseOut + .system-area { margin-top: 170px !important; } } /* ================= 3.1 INPUTS ==========================*/ .header-info-row .ui-formItemsContainer .ui-formElement .form-group > label.input-label { font-family: "Noto Sans", sans-serif; margin: 0 !important; font-size: 0.9em; } .header-info-row .form-control, .header-info-row .input-group.date .custom-date { border: 0; border: 1px solid #c7c7c7 !important; margin-top: 0px; border-radius: 3px; height: 24px !important; text-align: center; min-height: 24px; padding: 2px 8px; font-size: var(--fo-body-font-size); } .header-info-row .input-group.date .input-group-text, .header-info-row .input-group.date .input-group-addon { text-align: center; border: 1px solid #c7c7c7 !important; background-color: var(--inputBgColor) !important; margin-top: 0px; border-radius: 0px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; margin-right: 1px !important; font-size: 12px; height: 24px; padding: 0; width: 32px !important; } .header-info-row .ui-formElement { float: left; padding: 0; clear: none; max-width: 215px; text-align: center } .header-info-row .ui-formElement.i-id, .header-info-row .ui-formElement.i-head-a { max-width: 175px; min-width: 128px; } .header-info-row .ui-formElement.i-gender { max-width: 95px; min-width: 80px; } .header-info-row .ui-formElement.i-age { max-width: 75px; min-width: 55px; } .header-info-row .ui-formElement.i-date-a { max-width: 180px; min-width: 120px; } .header-info-row .ui-formElement.i-page { max-width: 90px; min-width: 65px; } .header-info-row .ui-formElement.i-visit { max-width: 80px; } .header-info-row .ui-formElement.i-date-b { max-width: 180px; min-width: 120px; } .header-info-row .ui-formElement.i-site { max-width: 190px; min-width: 150px; } .header-info-row .ui-formElement.i-site .help-block { display: none; } .header-info-row .i-diag .radio-container { text-align: left; } .i-gender .radio-horizontal { margin: 0 !important; width: 100%; position: absolute; left: 0; } .i-gender .radio-format .iradio_square-green:not(.checked), .i-gender .radio-format .iradio_square-green:not(.checked) ~ label, .i-gender .radio-format label { display: none !important; position: absolute; } .i-gender .radio-format[data-tooltip-title="Other"] .iradio_square-green ~ label, .i-gender .radio-format[data-tooltip-title="Andere"] .iradio_square-green ~ label { display: initial !important; } .i-gender .radio-format .iradio_square-green { border: 0; background-color: transparent; width: 100%; margin: 0; padding: 0; text-align: center; } .i-gender .radio-format label { opacity: 0; visibility: hidden; } .i-gender .radio-format .iradio_square-green.checked:after { content: ""; position: relative; border: 0; z-index: 1000; box-shadow: none; font-family: "Font Awesome 6 Free", 'FontAwesome'; background-color: transparent; font-size: 25px; color: var(--pColor); top: 7px; } .i-gender .radio-format[data-tooltip-title="W"] .iradio_square-green.checked:after, .i-gender .radio-format[data-tooltip-title="F"] .iradio_square-green.checked:after, .i-gender .radio-format[data-tooltip-title="Female"] .iradio_square-green.checked:after, .i-gender .radio-format[data-tooltip-title="Weiblich"] .iradio_square-green.checked:after { content: "\f182"; } .i-gender .radio-format[data-tooltip-title="M"] .iradio_square-green.checked:after, .i-gender .radio-format[data-tooltip-title="Male"] .iradio_square-green.checked:after, .i-gender .radio-format[data-tooltip-title="Männlich"] .iradio_square-green.checked:after { content: "\f183"; } .i-gender .radio-format[data-tooltip-title="Other"] .iradio_square-green.checked ~ label, .i-gender .radio-format[data-tooltip-title="Andere"] .iradio_square-green.checked ~ label { display: initial !important; width: 100%; color: #222; z-index: 1000; left: 0; opacity: 1; visibility: visible; font-size: 13px; } @media (max-width:1024px) { .header-info-row .ui-formElement { max-width: none; width: 16%; flex: 0 0 16%; min-width: 180px; } .header-info-row .ui-formElement.i-id, .header-info-row .ui-formElement.i-head-a { max-width: none; width: 16%; flex: 0 0 16%; min-width: auto; } .header-info-row .ui-formElement.i-gender { max-width: none; width: 10%; flex: 0 0 10%; min-width: auto; } .header-info-row .ui-formElement.i-page { max-width: none; width: 8%; flex: 0 0 8%; } .header-info-row .ui-formElement.i-age { max-width: none; width: 8%; flex: 0 0 8%; } .header-info-row .ui-formElement.i-date-a { max-width: none; width: 16%; flex: 0 0 16%; } .header-info-row .ui-formElement.i-date-b { max-width: none; width: 16%; flex: 0 0 16%; } .header-info-row .ui-formElement.i-site { max-width: none; width: 14.5%; flex: 1 0 14.5%; min-width: auto; } .header-info-row .ui-formElement.i-status { max-width: auto; width: 8.5%; flex: 0 0 8.5%; min-width: auto; } } @media (max-width:850px) { .header-info-row .ui-formElement { max-width: none; width: 16%; flex: 0 0 16%; } .header-info-row .ui-formElement.i-id, .header-info-row .ui-formElement.i-head-a { max-width: none; width: 16%; flex: 0 0 16%; min-width: auto; } .header-info-row .ui-formElement.i-gender { max-width: none; width: 10%; flex: 0 0 10%; min-width: auto; } .header-info-row .ui-formElement.i-page { max-width: none; width: 8%; flex: 0 0 8%; } .header-info-row .ui-formElement.i-age { max-width: none; width: 8%; flex: 0 0 8%; } .header-info-row .ui-formElement.i-date-a { max-width: none; width: 16%; flex: 0 0 16%; } .header-info-row .ui-formElement.i-date-b { max-width: none; width: 16%; flex: 0 0 16%; } .header-info-row .ui-formElement.i-site { max-width: none; width: 15.5%; flex: 1 0 15.5%; min-width: auto; } .header-info-row .ui-formElement.i-status { max-width: 65px; } } @media (max-width:650px) { .header-info-row .ui-formElement { width: 50%; flex: 0 0 50%; max-width: none; } .header-info-row .ui-formElement.i-id, .header-info-row .ui-formElement.i-head-a { width: 30%; flex: 0 0 30%; } .header-info-row .ui-formElement.i-gender { width: 18%; flex: 0 0 18%; } .header-info-row .ui-formElement.i-page { width: 12%; flex: 0 0 12%; } .header-info-row .ui-formElement.i-age { width: 10%; flex: 0 0 10%; } .header-info-row .ui-formElement.i-date-a { width: 30%; flex: 0 0 30%; } .header-info-row .ui-formElement.i-date-b { width: 30%; flex: 0 0 30%; } .header-info-row .ui-formElement.i-site { width: 50%; flex: 1 0 50%; } .header-info-row .ui-formElement.i-status { width: 15%; flex: 0 0 15%; } } @media (max-width:480px) { .header-info-row .ui-formElement { width: 42%; flex: 0 0 42%; } .header-info-row .ui-formElement.i-id, .header-info-row .ui-formElement.i-head-a { width: 45%; flex: 1 0 45%; } .header-info-row .ui-formElement.i-gender { width: 33%; flex: 1 0 33%; } .header-info-row .ui-formElement.i-age { width: 22%; flex: 1 0 22%; } .header-info-row .ui-formElement.i-date-a { width: 45%; flex: 1 0 45%; } .header-info-row .ui-formElement.i-date-b { width: 45%; flex: 1 0 45%; } .header-info-row .ui-formElement.i-page { width: 22%; flex: 1 0 122; } .header-info-row .ui-formElement.i-site { width: 36%; flex: 1 0 36%; } .header-info-row .ui-formElement.i-status { width: 32%; flex: 0 0 32%; } } /* ========================== 4. Titles ======================= */ /* ========================== ========== ======================= */ a { text-decoration: none; word-break: normal; } h1, h2, h3, h4 { margin: 0; padding: 0; } h1, h2, h3, h4 { padding: 0; background-color: transparent; color: var(--titleColor); margin: 3px 0; font-weight: 600; padding: 4px 0px; width: auto; max-width: 100%; } h1 { font-size: 26px; line-height: 1.25em; } h2 { font-size: 22px; line-height: 1.25em; } h3 { font-size: 18px; line-height: 1.2em; } h4 { font-size: 16px; line-height: 1.2em; } .br-title .ui-formElement, .brf-title .ui-formElement, .bg-title .ui-formElement, .br-title.ui-formElement, .brf-title.ui-formElement, .bg-title.ui-formElement { padding: 3px 0px 3px 0px !important; margin: 0px !important; } .br-title label.input-label h1, .brf-title label.input-label h1, .br-title label.input-label h2, .brf-title label.input-label h2, .br-title label.input-label h3, .brf-title label.input-label h3, .br-title label.input-label h4, .brf-title label.input-label h4 { padding: 0; background-color: #fff; border-bottom: 1px solid var(--titleColor); color: var(--titleColor); margin: 3px 0; font-weight: 600; padding: 4px 0px; width: auto; max-width: 100%; border-radius: 0; } .brf-title label.input-label, .brf-title label.input-label h1, .brf-title label.input-label, .brf-title label.input-label h2, .brf-title label.input-label, .brf-title label.input-label h3, .brf-title label.input-label, .brf-title label.input-label h4 { width: 100% !important; } .bg-title label { width: 100% !important; } .bg-title label.input-label h1, .bg-title label.input-label h2, .bg-title label.input-label h3, .bg-title label.input-label h4 { padding: 0; background-color: transparent; background-color: var(--titleColor); color: #ffffff; margin: 3px 0; font-weight: 600; padding: 4px 10px; width: auto; width: 100%; border: 0; border-radius: 3px; } .bg-title .ui-formElement, .br-title .ui-formElement { padding: 0px 0px !important; } /* ============== 4.1 Labels =============== */ /* ========================================= */ label.input-label { font-weight: normal; display: inline-block; width: auto; font-size: var(--fo-body-font-size); min-height: 13px; margin-top: 0 !important; margin-bottom: 2px; } label.option-label { vertical-align: -webkit-baseline-middle; font-weight: 500; } .iradio_square-green.checked ~ label.option-label, .icheckbox_square-green.checked ~ label.option-label, .icheckbox_square-green.checked ~ label.input-label { font-weight: 700 !important; } label.system-form-control.input-label { width: auto; } p { font-size: var(--fo-body-font-size); line-height: 1.25em; margin: 0; padding: 0; } .l-normal .form-group > label.input-label { font-weight: normal !important; } .l-bold .form-group > label.input-label { font-weight: 700 !important; } .l-color .form-group > label.input-label { color: var(--labelColor); } .bold label.option-label { font-weight: bold !important; } .normal label.option-label { font-weight: normal !important; } .color label.option-label { color: #999 !important; } /* ============== 4.2 Required =============== */ i.required, .date-input-required { color: red; position: relative; font-style: normal; font-weight: 500; font-family: 'Font Awesome 6 Free', 'FontAwesome'; font-size: 10px; top: -6px; left: 0px; line-height: 6px; } .date-input-required { top: -6px; margin-left: -2px; margin-right: -1px; } .fa-asterisk:before { content: "\f069"; } .glyphicon-asterisk:before { font-size: large; } .visit-title i.required { margin-left: -6px; } /*============== 4.3 Label0 ==================== */ /*============== Delete label spaces When no label ==================== */ .label0 label.title-label, .label0 label.input-label { height: 0 !important; min-height: 0 !important; margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 0 !important; display: none !important; } .label0 br { display: none !important; } /*============== 4.4 Only when delete-label delete margin group ==================== */ .delete-label .form-group { margin: 0 !important; } /*=========== 4.5 Delete help-block =========== */ .no-help-block .help-block, .help-block0 .help-block { display: none; } /* ========================== 5. INPUTS ======================== */ /* ========================== ========= ======================== */ /* ============== 5.1 Inputs ============== */ /* ========================================= */ .form-control, .single-line, .radio-horizontal > input[type="Text"], .radio-vertical > input[type="Text"] { background-color: var(--inputBgColor); border: 1px solid var(--inputBrColor); color: inherit; padding: 3px 5px; font-size: var(--fo-body-font-size); height: auto; min-height: 30px; min-width: 36px; transition: all 0.3s ease; border-radius: 4px; } .form-control:hover, .single-line:hover, .radio-horizontal > input[type="Text"]:hover, .radio-vertical > input[type="Text"]:hover { border-color: var(--inputBrHoverColor) !important; } .form-group > label.input-label { font-size: var(--fo-body-font-size); } @media (max-width:1400px) { .form-group > label.input-label { font-size: var(--fo-body-font-size); } } /* ============== 5.1.1 Normal & Bold option-label ============== */ .lo-normal .form-group > label.option-label { font-weight: normal !important; } .lo-bold .form-group label.option-label { font-weight: 700 !important; } .form-control:focus, .form-control:hover, .single-line:focus, .single-line:hover, .radio-horizontal > input:focus, .radio-vertical > input:focus, .radio-horizontal > input:hover, .radio-vertical > input:hover { outline: none; border-color: var(--inputBrHoverColor); transition: all 0.3s ease; } .form-control:disabled, .form-control:disabled:hover, .form-control:disabled:focus, .single-line:disabled, .single-line:disabled:hover, .single-line:disabled:focus, .radio-horizontal > input[type="Text"]:disabled, .radio-horizontal > input[type="Text"]:disabled:hover, .radio-vertical > input[type="Text"]:disabled, .radio-vertical > input[type="Text"]:disabled:hover { background-color: var(--bs-form-control-disabled-bg); border-color: #c7c7c7; cursor: not-allowed; box-shadow: none; } .radio-horizontal > input[type="Text"] { margin-right: 10px; margin-left: 25px; display: block; max-width: 75%; margin-top: 5px } .radio-vertical > input[type="Text"] { width: auto; margin: 5px 0 0 24px; max-width: 85%; padding: 1px 5px; display: block; } @media (max-width:850px) { .radio-vertical > input[type="Text"] { margin: 5px 0 0 0px; } } /* 5.2 Indent lines ===========*/ .radio-horizontal .iradio_square-green ~ label, .radio-horizontal .icheckbox_square-green ~ label, .icheckbox_square-green ~ label { display: table-cell !important; padding: 1px 0 0 0; margin: 0 0 2px 0px !important; } /* indent lines ===========*/ .radio-vertical .iradio_square-green ~ label, .radio-vertical .icheckbox_square-green ~ label { display: table-cell !important; margin: 6px 0 0px 4px !important; } .radio-vertical .iradio_square-green ~ br, .radio-vertical .icheckbox_square-green ~ br { display: none; } /* 5.3 Select =========*/ select.form-control { padding: 2px 6px; min-height: 30px; position: relative; } /* 5.4 Custom select =========*/ .s-custom { position: relative; display: block; } .s-custom select { padding-right: 15px; } .s-custom:after, .dropdownlist-properties::after, .chosen-container .chosen-single::after, .chosen-container-multi .chosen-choices:after { content: '\f107'; font-family: 'Font Awesome 6 Free', 'FontAwesome'; color: var(--inputBrColor); position: absolute; pointer-events: none; } .s-custom:after { right: 7px; bottom: 6px; font-size: 16px; font-weight: 700; } .s-custom .select2::after, .public .select2::after, .s-custom .select2-selection.select2-selection--single::after { content: none; } /* 5.4 Select 2 =========*/ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { background-color: #fff; border: 1px solid var(--inputBrColor); min-height: 30px; border-radius: 4px; } .select2-container--default .select2-results > .select2-results__options { max-height: 500px; overflow-y: auto } .select2-container--default .select2-selection--single:hover, .select2-container--default .select2-selection--multiple:hover, .select2-container--default .select2-selection--single:focus, .select2-container--default .select2-selection--multiple:focus { border: 1px solid var(--inputBrHoverColor); } .select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--single { border: 1px solid var(--inputBrHoverColor); } .select2:after { color: var(--radioBrColor); } .select2-container--default .select2-selection--multiple .select2-selection__arrow, .select2-container--default .select2-selection--single .select2-selection__arrow { display: none; } .select2-container--default .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-selection--single .select2-selection__choice { background-color: var(--hColor); border: 1px solid var(--hColor); color: #fff; border-radius: 2px; max-width: 93%; overflow: hidden; white-space: normal; height: auto; padding-right: 15px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove, .select2-container--default .select2-selection--single .select2-selection__choice__remove { font-size: 16px; line-height: 16px; margin: 2px -12px 2px 0; border-radius: 2px; float: right; background-color: var(--selColor); width: 20px; display: flex; justify-content: center; color: #fff; } .select2-container--open .select2-dropdown--below, .select2-container--open .select2-dropdown--above { border-color: var(--inputBrHoverColor); } .select2-selection.select2-selection--multiple::after, .select2-selection.select2-selection--single::after { content: '\f107'; font-family: 'Font Awesome 6 Free', 'FontAwesome'; height: 20px; position: absolute; font-size: 19px; color: var(--inputBrColor); right: 10px; width: 11px; margin-top: -3px; top: 11px; cursor: pointer; pointer-events: none; } /* ========================== 5.5 Checkbox =================== */ /* ============================================================ */ input[type="radio"], input[type="checkbox"] { margin: -2px -2px 0; line-height: normal; width: 25px; height: 25px; } .i-checks { padding-left: 0; } .icheckbox_square-green { float: left; border: 1px solid var(--radioBrColor); background: var(--radioBgColor); border-radius: 0%; width: 20px; height: 20px; min-width: 20px; min-height: 20px; z-index: 1; margin-right: 6px; top: -1px; transition: all 0.3s ease; } .icheckbox_square-green ~ br { display: none; } div[data-elementtype="checkbox"]:hover label { opacity: 0.7 !important; transition: all 0.3s ease; } div[data-elementtype="checkbox"]:hover .icheckbox_square-green { border-color: var(--radioBrHoverColor); -webkit-box-shadow: 0px 2px 3px rgb(0 0 0 / 15%); transition: all 0.3s ease; } .icheckbox_square-green.checked:hover, .icheckbox_square-green.checked:focus { border-color: var(--radioBrColor); -webkit-box-shadow: 0px 2px 3px rgb(0 0 0 / 15%); transition: all 0.3s ease; } .iCheck-helper { background: transparent; } .icheckbox_square-green.checked { background-color: var(--radioBrColor); text-align: left; } .icheckbox_square-green:after { content: ''; position: absolute; height: 20px; width: 20px; opacity: 0; transition: all 0.2s ease-in-out; color: #fff; z-index: -1; } .icheckbox_square-green:after { content: '\f00c'; font-family: 'Font Awesome 6 Free', 'FontAwesome'; font-size: 14px; line-height: 14px; font-weight: bold; padding: 2px 0 1px 3px; position: absolute; height: 18px; width: 18px; opacity: 0; color: #fff; border-radius: 0%; z-index: -1; } .icheckbox_square-green.checked:after { opacity: 1; } /* disabled */ .icheckbox_square-green.disabled, .icheckbox_square-green.checked.disabled { background-color: #cecece; color: #ffffff; border-color: #ababab; cursor: not-allowed; box-shadow: none; } .icheckbox_square-green.disabled:after, .icheckbox_square-green.checked.disabled:after { color: #ffffff; } .icheckbox_square-green.checked.disabled { background-color: var(--radioBrColor); border-color: var(--radioBrColor); } /* ========================== 5.6 Radios =================== */ /* ========================================================= */ .iradio_square-green { float: left; border: 1px solid var(--radioBrColor); background: var(--radioBgColor); border-radius: 50%; width: 22px; height: 22px; min-width: 22px; min-height: 22px; margin-right: 6px; top: -2px; z-index: 1; transition: all 0.3s ease; } .iradio_square-green ~ label:hover, .iradio_square-green ~ label:focus { opacity: 0.7 !important; transition: all 0.3s ease; } .iradio_square-green:hover, .iradio_square-green:focus { border-color: var(--radioBrHoverColor); -webkit-box-shadow: 0px 2px 3px rgb(0 0 0 / 15%); transition: all 0.3s ease; } .iradio_square-green.checked:hover, .iradio_square-green.checked:focus { border-color: var(--radioBrColor); -webkit-box-shadow: 0px 2px 3px rgb(0 0 0 / 15%); transition: all 0.3s ease; } .iradio_square-green.checked { background-color: var(--radioBrColor); text-align: left; } .iradio_square-green:after { content: '\f00c'; font-family: 'Font Awesome 6 Free', 'FontAwesome'; font-size: 14px; text-align: center; font-weight: bold; position: absolute; color: #fff; height: 21px; width: 21px; opacity: 0; margin: 2px 0 0 0; border-radius: 50%; z-index: -1; } .iradio_square-green.checked:after { opacity: 1; } /* disabled */ .iradio_square-green.disabled, .iradio_square-green.disabled:hover, .iradio_square-green.checked.disabled { background-color: #cecece; color: #ffffff; border-color: #ababab; cursor: not-allowed; box-shadow: none; } .iradio_square-green.checked.disabled { border-color: var(--radioBrColor); background-color: var(--radioBrColor); } .i-gender .iradio_square-green.disabled, .i-gender .iradio_square-green.disabled:hover, .i-gender .iradio_square-green.checked.disabled { background-color: transparent; box-shadow: none; } /* ====================== 5.7 Textarea ======================= */ /* =========================================================== */ textarea { resize: vertical; } /* ====================== 5.8 Tooltips ======================= */ /* =========================================================== */ .options-tooltip .radio-format-tooltip:hover:after { background: rgba(0, 0, 0, .7); border-radius: 4px; bottom: 100%; color: #fff; content: attr(data-option-tooltip-title); left: 50%; transform: translate(-50%, 0px); min-width: 80%; text-align: center; padding: 4px 6px; position: absolute; z-index: 100; font-size: 12px; pointer-events: none; width: auto; word-break: initial; transition: all 0.3s ease; } .options-tooltip .radio-format-tooltip:hover:before { border: solid; border-color: rgba(0, 0, 0, 0.7) transparent; border-width: 6px 6px 0 6px; bottom: 100%; content: ""; left: 50%; transform: translate(-50%, 5px); position: absolute; z-index: 100; transition: all 0.3s ease; } /* Delete tooltips in tablet and mobile*/ @media (max-width:1024px) { .options-tooltip .radio-format-tooltip:hover:after, .options-tooltip .radio-format-tooltip:hover:before { content: none; } } /* ====================== 5.9 Radio groups Vertical and Horizontal ========= */ /* ========================================================================== */ .radio-vertical { display: block; min-height: 25px; margin: 5px 0px; } .radio-horizontal { margin: 2px 3px 2px 3px; display: inline-block; vertical-align: top; align-items: start; } /* ====================== 5.10 Date =================================== */ /* ====================================================================== */ .input-group.date, .datecustom-inner { width: 100%; min-width: 140px; } .input-group.date.system-time-picker { min-width: 155px; } .input-group .input-group-text, .input-group .input-group-addon { border: 1px solid var(--inputBrColor); background-color: var(--bgColor) !important; color: var(--inputBrColor); width: 40px !important; padding: 5px 12px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-left: 0; } .custom-date { border: 1px solid var(--inputBrColor); background-color: #fff; border-radius: 4px; padding: 4px 2px; min-height: 31px; height: 31px; text-align: center; transition: all 0.3s ease; } .custom-date:focus, .custom-date:hover { border-color: var(--inputBrHoverColor); color: var(--inputBrHoverColor); outline: none; transition: all 0.3s ease; } .form-control:hover ~ .input-group-text, .form-control:focus ~ .input-group-text, .form-control:hover ~ .input-group-addon, .form-control:focus ~ .input-group-addon, .input-group.date:hover > .input-group-text, .input-group.date:hover > .form-control { border-color: var(--inputBrHoverColor); color: var(--inputBrHoverColor); transition: all 0.3s ease; } .datecustom-day { max-width: 36px; } .datecustom-year { max-width: 45px; } .datecustom-month { max-width: 70px; } /*============= BOOTSTRAP DATETIMEPICKER CUSTOM CSS (PUBLIC LAYOUT) ===============*/ .bootstrap-datetimepicker-widget { font-size: 12px; } .bootstrap-datetimepicker-widget table thead tr:first-child th:hover { background: var(--bgDataTime); color: #ffffff; } .bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover { background-color: var(--bgDataTime); } .fa-calendar:before { content: "\f073" !important; font-family: "Font Awesome 6 Free", 'FontAwesome'; } @supports (-webkit-hyphens:none) { .datecustom-month { max-width: 77px; } } .datecustom-separator { font-size: 16px; padding: 0 0; margin-left: -2px; margin-right: -1px; } .custom-date { border: 1px solid var(--inputBrColor); } @media (max-width:1100px) { .datecustom-day, .datecustom-month, .datecustom-year { padding: 5px 1px; font-size: 12px; } .datecustom-day { max-width: 32px; } .datecustom-year { max-width: 38px; } .datecustom-month { max-width: 63px; } .datecustom-separator { margin-left: -4px; margin-right: -4px; } } /* =========== 5.11 HELP BLOCK ==================*/ .help-block { margin: 2px 0 0 0 !important; font-size: 12px; font-weight: normal; color: var(--helpBlockColor); display: block; } /* ========================== 5.12 Text Danger v3======================= */ /* ========================== ============= ======================= */ .text-danger.field-validation-error { height: 0; display: block; color: #fff; position: absolute; z-index: 50; font-size: 0px; margin: 1px 0 0 0 !important; height: 0px; text-align: left; left: 10px; width: 98%; } .text-danger.field-validation-error > span { background-color: #f00; color: #ffffff; display: block; font-size: 11px; font-weight: bold; border-radius: 2px; white-space: normal; text-align: center; width: 100%; max-width: 250px; z-index: 38; padding: 3px 8px; box-shadow: 0px 3px 3px rgb(247, 196, 196); } /* only for input ! */ input.input-validation-error ~ .text-danger span:before { content: '!'; position: absolute; display: block; color: #f00; z-index: 100; font-size: 20px; text-align: center; padding: 5px; border-radius: 50%; width: 22px; height: 22px; top: -30px; right: 5px; } input.api-elements ~ .text-danger span:before { display: none; } .text-danger.field-validation-error > span:after { content: ''; position: absolute; bottom: 0; left: 0; width: 10px; height: 14px; border: 13px solid transparent; border-bottom-color: #f00; border-top: 0; top: -10px; margin-left: 15px; } .input-group ~ .text-danger > span { max-width: 210px; } .col-group .radio-container ~ .text-danger { position: absolute; transform: translate(-110%, -5px); width: 40%; max-width: 150px; } .col-group .radio-container ~ .text-danger span:after { left: 129%; height: 12px; border: 8px solid transparent; border-bottom-color: #f00; transform: rotate(90deg); top: 3px; } /* ============= TEXT-DANGER COL-GROUPS ============== */ @media(min-width:1025px) { .col-group .radio-container ~ .text-danger { transform: translate(-95%, -5px); } .col-group .radio-container ~ .text-danger span:after { left: 90%; } .col-group.one-item .text-danger.field-validation-error { left: 110%; width: 145px; top: 5px; } .col-group.one-item input.input-validation-error ~ .text-danger span:before { content: none; } .col-group.one-item .icheckbox_square-green ~ .text-danger > span { top: 0px; } .col-group.one-item .text-danger.field-validation-error > span:after { width: 7px; height: 7px; border: 7px solid transparent; border-bottom-color: #f00; border-top: 0; top: 8px; margin-left: -10px; transform: rotate(-90deg); } } @media(max-width:1024px) { .col-group .radio-container ~ .text-danger { transform: translate(0%, -5px); top: 90%; left: 50%; } .col-group .radio-container ~ .text-danger span:after { left: -20%; transform: rotate(-90deg); top: 3px; } .col-group.one-item .text-danger.field-validation-error { top: 80%; left: -25%; width: 125%; } .col-group.one-item .icheckbox_square-green ~ .text-danger > span { top: -5px; } } @media (max-width:768px) { .col-group .radio-container ~ .text-danger { transform: translate(0%, -5px); top: 90%; left: 50%; } .col-group .radio-container ~ .text-danger span:after { left: -20%; transform: rotate(-90deg); top: 3px; } } @media (max-width:480px) { .col-group .radio-container ~ .text-danger { transform: translate(-5%, -35px); width: 40%; } .col-group .radio-container ~ .text-danger span { max-height: 25px !important; padding: 2px 5px !important; } .col-group.mobile-vertical .radio-container ~ .text-danger { transform: translate(0%, -35px); width: 50%; left: 55%; top: 110%; } .col-group.mobile-vertical .radio-container ~ .text-danger span { box-shadow: none } .col-group.mobile-vertical .radio-container ~ .text-danger span:after { left: -20%; height: 12px; border: 8px solid transparent; border-bottom-color: #f00; transform: rotate(-90deg); top: 3px; } } .visit-title .form-control.input-validation-error ~ .text-danger > span, .visit-title select.input-validation-error ~ .text-danger > span, .visit-title .radio-container ~ .text-danger > span, .icheckbox_square-green ~ .text-danger > span, .visit-title .input-group ~ .field-validation-error.text-danger > span { position: relative; top: 16px; } /* =========== 5.13 Range Input ======================= */ /* margin security for range slider */ .slider-container { padding: 0 0 50px 0; margin: 50px 25px 20px 25px !important; } /* button for slider */ .slider-container .noUi-handle { cursor: pointer; outline: none; z-index: 4; width: 10px; height: 10px; border-radius: 50%; border: 0; box-shadow: none; background-color: transparent; } .slider-container .noUi-handle:before { content: "\f041"; position: absolute; left: -15px; top: 0; z-index: 2; background-color: transparent; display: inline-block; font-family: "Font Awesome 6 Free", 'FontAwesome'; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; font-size: 22px; color: #ff6c03; width: 0; height: 0; background: none; text-shadow: 0px 3px white; } .slider-container .noUi-handle:after { content: none; } /* info button for slider */ .slider-container .noUi-tooltip { top: -40px; left: -50%; display: block; position: relative; border: 0; box-shadow: none; background-color: var(--pColor); color: #fff; height: 33px; width: 55px; text-align: center; display: flex; align-items: center; justify-content: center; line-height: 15px; font-size: 16px; font-weight: 500; border-radius: 3px; z-index: -1; -webkit-backface-visibility: hidden; } .slider-container .noUi-target { background: transparent; border-radius: 0px; height: 20px; border: 0 !important; box-shadow: none; } .slider-container .noUi-base { height: 40px; padding: 30px 0 30px 0; cursor: pointer; } .slider-container .noUi-connects { background: var(--pColor); margin-top: -10px; height: 10px; box-shadow: 1px 1px 2px 0px rgb(0 0 0 / 20%); } .slider-container .noUi-connect { background: none repeat scroll 0 0 var(--pColor); } .slider-container .noUi-origin { height: 0px !important; background: var(--pColor) !important; } .slider-container .noUi-pips-horizontal { margin-top: 0px; } .slider-container .noUi-horizontal .noUi-handle { top: 8px; } .slider-container .noUi-pips-horizontal .noUi-marker { height: 8px; } .slider-container .noUi-pips-horizontal .noUi-value { margin-top: 10px; font-size: 10px; } .slider-container .noUi-pips-horizontal .noUi-marker:first-child, .slider-container .noUi-pips-horizontal .noUi-marker-large { height: 15px; } .slider-container .noUi-pips-horizontal .noUi-value:nth-child(2), .slider-container .noUi-pips-horizontal .noUi-value:last-child { margin-top: 5px; font-size: 13px; } /* 5.13.2 Split help block in 2 parts: strong and u*/ .split-slide, .text-slide { padding-bottom: 0px !important; } .split-slide .help-block, .text-slide .help-block { position: relative; top: -15px; text-align: center; display: flex !important; width: 100%; } .split-slide .help-block em { font-size: 12px !important; font-weight: 600 !important; font-style: normal !important; left: 0; width: 100%; bottom: 0; line-height: 14px; } .split-slide .help-block strong, .split-slide .help-block u { font-size: 12px !important; font-weight: 600 !important; font-style: normal !important; position: absolute; text-decoration: none; max-width: 48%; line-height: 12px; } .split-slide .help-block strong { left: 2%; text-align: left; } .split-slide .help-block u { right: 2%; text-align: right; } .distribute-slide .help-block { display: flex; justify-content: space-around; position: relative; top: -20px; text-align: center; width: 100%; } .distribute-slide .help-block u, .distribute-slide .help-block span u { text-align: center; font-size: 12px; font-weight: 600; text-decoration: none; } /* Change info numbers when the first is less than 0 or number is 0 when startOne*/ .slider-container .noUi-handle.noUi-handle-lower[aria-valuetext="-0.1"] > .noUi-tooltip, .slider-container .noUi-handle.noUi-handle-lower[aria-valuetext="-1.00"] > .noUi-tooltip, .slider-container .noUi-handle.noUi-handle-lower[aria-valuetext="-1"] > .noUi-tooltip, .startZero .slider-container .noUi-handle.noUi-handle-lower[aria-valuenow="0.0"] > .noUi-tooltip, .startOne .slider-container .noUi-handle.noUi-handle-lower[aria-valuetext="0"] > .noUi-tooltip { overflow: hidden; font-size: 0; } .slider-container .noUi-handle.noUi-handle-lower[aria-valuetext="-0.1"] > .noUi-tooltip::before, .slider-container .noUi-handle.noUi-handle-lower[aria-valuetext="-1"] > .noUi-tooltip::before, .slider-container .noUi-handle.noUi-handle-lower[aria-valuetext="-1.00"] > .noUi-tooltip::before, .slider-container .noUi-handle.noUi-handle-lower[aria-valuenow="0"] > .noUi-tooltip::before, .startZero .slider-container .noUi-handle.noUi-handle-lower[aria-valuenow="0.0"] > .noUi-tooltip::before, .startOne .slider-container .noUi-handle.noUi-handle-lower[aria-valuetext="0"] > .noUi-tooltip::before { content: '\f178'; opacity: 1; font-size: 22px; font-family: 'Font Awesome 6 Free', 'FontAwesome' !important; text-rendering: auto; -webkit-font-smoothing: antialiased; display: flex; position: relative; top: 5px; align-self: baseline; justify-content: center; font-family: monospace; } /* line mark less than 0 or is 0 when startOne*/ .startBefore .slider-container .noUi-pips-horizontal::after { content: ''; position: absolute; left: 9%; top: -17px; width: 3px; z-index: 1; height: 40px; background-color: #ff0000; } .startBefore.marker-hidden .slider-container .noUi-pips-horizontal::after { content: none; } .startBefore.startZero .slider-container .noUi-pips-horizontal::after { left: 8.7%; } .startBefore.startOne .slider-container .noUi-pips-horizontal::after { left: 9.6%; } /*======== 5.13.1 Zero or one slider star ========*/ .startZero .slider-container .noUi-pips-horizontal .noUi-marker-horizontal:nth-child(3), .startOne .slider-container .noUi-pips-horizontal .noUi-marker-horizontal:nth-child(3) { height: 15px; background: #AAA; } .startZero .slider-container .noUi-pips-horizontal .noUi-marker-horizontal:nth-child(3):after, .startOne .slider-container .noUi-pips-horizontal .noUi-marker-horizontal:nth-child(3):after { content: '0'; position: absolute; top: 13px; font-size: 13px; font-weight: normal; transform: translate(-30%, 0px); } .startOne .slider-container .noUi-pips-horizontal .noUi-marker-horizontal:nth-child(3):after { content: '1'; font-size: 13px; } .startBefore .slider-container .noUi-pips-horizontal .noUi-value:nth-child(2) { left: -1% !important; display: none; } /* Slider 1 to 100 ===================*/ .slider100.startBefore.startOne .slider-container .noUi-pips-horizontal::after { left: 1.8%; } .slider100.startBefore.startZero .slider-container .noUi-pips-horizontal::after { left: 0.90%; } .startZero .slider-container .noUi-pips-horizontal .noUi-marker-horizontal:nth-child(3) { height: 10px; background: #CCC; } .slider100.startBefore.startZero .slider-container .noUi-pips-horizontal .noUi-marker-horizontal:nth-child(3)::after { content: none; } .slider100.startBefore.startZero .slider-container .noUi-pips-horizontal .noUi-value:nth-child(2) { display: block !important; left: 1% !important; font-size: 0; } .slider100.startBefore.startZero .slider-container .noUi-pips-horizontal .noUi-value:nth-child(2)::after { content: '0'; font-size: 12px; transform: translate(18%,-25px); display: block; } .slider100 .noUi-pips-horizontal .noUi-marker-horizontal:nth-child(3):after { transform: translate(-60%, 0px); } @media (max-width:480px) { .slider-container { margin: 60px 5px 20px 5px !important; height: auto; } .noUi-value, .slider-container .noUi-pips-horizontal .noUi-value:last-child { font-size: 12px; } } /* =========== 5.14 Range Input Gradient ======================= */ /* ============ GRADIENT SLIDE RANGE =======================*/ .gradient .slider-container { background: rgb(255, 255, 255); background: linear-gradient(90deg, var(--gradientColor10) 0%, var(--gradientColor10) 9.9999%, var(--gradientColor20) 10%, var(--gradientColor20) 19.99999%, var(--gradientColor30) 20%, var(--gradientColor30) 29.9999%, var(--gradientColor40) 30%, var(--gradientColor40) 39.9999%, var(--gradientColor50) 40%, var(--gradientColor50) 49.9999%, var(--gradientColor60) 50%, var(--gradientColor60) 59.9999%, var(--gradientColor70) 60%, var(--gradientColor70) 69.9999%, var(--gradientColor80) 70%, var(--gradientColor80) 79.9999%, var(--gradientColor90) 80%, var(--gradientColor90) 89.9999%, var(--gradientColor100) 90%, var(--gradientColor100) 100%); min-height: 44px !important; max-height: 90px; border-bottom: 10px solid #dedede; margin: 10px 30px 50px 30px !important; } .gradient.startBefore .slider-container { background: linear-gradient(90deg, #ffffff 0%, #ffffff 8.32%, #ffffff 8.33%, #ffffff 16.66%, var(--gradientColor10) 16.67%, var(--gradientColor10) 24.99%, var(--gradientColor20) 25%, var(--gradientColor20) 33.31%, var(--gradientColor30) 33.32%, var(--gradientColor30) 41.64%, var(--gradientColor40) 41.65%, var(--gradientColor40) 49.97%, var(--gradientColor50) 49.98%, var(--gradientColor50) 58.30%, var(--gradientColor60) 58.31%, var(--gradientColor60) 66.63%, var(--gradientColor70) 66.64%, var(--gradientColor70) 74.96%, var(--gradientColor80) 74.97%, var(--gradientColor80) 83.29%, var(--gradientColor90) 83.30%, var(--gradientColor90) 91.62%, var(--gradientColor100) 91.63%, var(--gradientColor100) 100%); min-height: 44px !important; padding: 0 4%; } .gradient.startBefore.startBefore .slider-container .noUi-pips-horizontal::after { content: none; } .gradient .ui-formItemsContainer .ui-formElement.split-help-slide.gradient-slide .form-group { margin-top: 5px; } .gradient .slider-container .noUi-base, .gradient .slider-container .noUi-connects { height: 100%; margin-top: 10px; background-color: transparent; box-shadow: none; } .gradient .slider-container .noUi-base:before, .gradient .slider-container .noUi-base:after { content: ''; width: 0; height: 0; top: 86%; left: 10%; transform: translate(-50%, -6px); position: absolute; z-index: 2; background: transparent; display: initial; border-top: 12px solid #ffffff; border-left: 6px solid transparent; border-right: 6px solid transparent; } .gradient.no-markers .slider-container .noUi-base:before, .gradient.no-markers .slider-container .noUi-base:after { content: none; } .gradient .slider-container .noUi-base:after { left: 95%; } .gradient .noUi-pips { position: absolute; color: #202020; } .gradient .slider-container .noUi-pips-horizontal { margin-top: -10px; } .gradient .noUi-target { background: transparent; border-bottom: 10px solid #111111; border-radius: 0px; height: 100px; margin-bottom: 0px; border: 0 !important; box-shadow: none; cursor: pointer; } .gradient .noUi-tooltip { background: transparent; top: 0; left: 0; width: 100%; height: 100%; border: 0 !important; display: flex; font-size: 20px; color: #101010; justify-content: center; align-items: center; border-radius: 5px; transform: none !important; } .gradient .noUi-handle { transform: translate(50%, 0) !important; border-radius: 0; cursor: pointer; top: 0 !important; right: 0 !important; width: 9.9999%; height: 80px; background-color: var(--visitBgColor); } .gradient .slider-container .noUi-handle:after { position: absolute; top: 0px; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; border-radius: 0; background-color: rgba(255, 255, 255, 0.1); } .gradient .noUi-handle::before { content: ''; width: 0; height: 0; top: 100%; left: 50%; transform: translate(-50%, -6px); position: absolute; z-index: 1000; background: transparent; display: initial; border-bottom: 16px solid #ff0000; border-left: 8px solid transparent; border-right: 8px solid transparent; } .gradient .noUi-pips-horizontal { padding: 1px 0 0 0; height: 80px; left: 0; width: 100%; } .gradient .noUi-origin, .gradient .noUi-connect { transition: all 0.5s ease; } .gradient.split-slide .help-block, .gradient.distribute-slide .help-block, .gradient.text-slide .help-block { position: relative; top: -10px; } /* ====================== 5.15 PLUS ICON ==========================*/ .plus-icon { min-height: 56px; margin-top: 0px; } .plus-icon .form-group { margin-top: 22px; width: 29px !important; height: 27px !important; } /* Fix plus-icon in mobile */ @media(max-width:480px) { .plus-icon .form-group { margin-top: 2px; } } .plus-icon .icheckbox_square-green { width: 29px !important; height: 27px !important; position: relative; border: 0; top: 0px; margin: 0; padding: 0; z-index: 0; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; } .plus-icon .icheckbox_square-green:after { content: '\f0fe'; font-size: 33px; top: 6px; text-align: center; color: var(--radioBrColor); font-family: "Font Awesome 6 Free", 'FontAwesome'; opacity: 1; padding: 0; transition: all 0.3s ease; cursor: pointer; background-color: #ffffff; } .plus-icon .icheckbox_square-green.checked { background-color: transparent; } .plus-icon .icheckbox_square-green.hover, .plus-icon .icheckbox_square-green.hover::after, .plus-icon .icheckbox_square-green:hover, .plus-icon .icheckbox_square-green:hover::after { color: var(--hColor); border: 0; box-shadow: none; transition: all 0.3s ease; } .plus-icon .icheckbox_square-green.checked:after { content: '\f146'; opacity: 1; color: var(--radioBrColor); font-size: 33px; transition: all 0.3s ease; } .plus-icon .icheckbox_square-green ~ label { margin: 0 !important; white-space: nowrap; align-items: center; } /* ====================== 5.16 Button custom file ========================== */ /* ========================================================================== */ .filelist ~ div { float: left; width: 84%; min-width: 80px; max-width: 200px; text-align: center; border: 1px solid var(--pColor); background-color: var(--pColor); border-radius: 3px; } .filelist ~ div a { position: relative; color: #ffffff; display: block; text-transform: uppercase; padding: 6px 2px; height: 28px; font-size: 11px; } .filelist ~ div:hover { background-color: var(--hColor); border: 1px solid var(--hColor); transition: all 0.4s ease; } .filelist ~ pre { /*width: 10%;*/ /*opacity: 0;*/ width: auto; } .filelist ~ .help-block { display: inline-block; } /* preview file */ .center .system-upload-file-container .link-container { display: block; position: relative; margin: 2px 0; width: 100%; display: inline-flex; height: 30px; overflow: hidden; border: 1px solid var(--pColor); background-color: var(--pColor); padding: 0px 5px; border-radius: 3px; line-height: 16px; min-height: 36px; } .system-file-container.system-upload-file-container .link-container a { color: #ffffff; font-size: 12px; display: block; width: 95%; overflow: hidden; word-break: break-all; } .uploaded-file-icon { margin: 0 auto; width: 40px; height: 50px; } /* preview uploaded file */ .uploadedImagesContainer { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; margin: 0 0; } .uploadedImagesContainer .system-upload-file-container { border: 1px solid var(--pColor); margin: 0 5px 5px 0; text-align: left; padding: 5px; border-radius: 4px; display: flex; flex-wrap: wrap; flex: 0 0 calc(20% - 5px); max-width: 150px; min-width: 120px; } .uploadedImagesContainer .system-imageTemplate-image { width: 100%; margin: 0 auto; flex: 0 0 100%; height: 80%; overflow: hidden; max-height: 140px; min-height: 110px; } .uploadedImagesContainer .system-imageTemplate-image a { margin: 0 auto; display: block; width: 100%; height: 100%; display: flex; position: relative; } .uploadedImagesContainer .system-imageTemplate-image a::before { content: '\f06e'; position: absolute; width: 100%; height: 100%; display: flex; font-family: "Font Awesome 6 Free", 'FontAwesome'; color: #fff; font-size: 28px; justify-content: center; align-items: center; pointer-events: none; border-radius: 4px; background-color: #50505066; opacity: 0; z-index: 100; pointer-events: none; transition: all 0.5s ease; } .uploadedImagesContainer .system-imageTemplate-image a:hover::before { opacity: 1; transition: all 0.5s ease; } .uploadedImagesContainer .system-imageTemplate-image .uploaded-image { position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .uploadedImagesContainer .system-empty-imageTemplate-container .uploaded-image { width: 90%; } .uploadedImagesContainer .system-upload-file-container .link-container.link-name { position: relative; margin: 4px 2% 4px 0; flex: 0 0 72%; height: 28px; overflow: hidden; /*border: 1px solid var(--pColor); background-color: var(--pColor);*/ padding: 0px 5px; border-radius: 3px; } .uploadedImagesContainer .system-upload-file-container.system-empty-imageTemplate-container .link-container.link-name { flex: 0 0 55%; } .uploadedImagesContainer .system-upload-file-container .link-container.link-name a { /*color: #ffffff;*/ color: #000000; font-size: 10px; line-height: 13px; display: block; width: 100%; overflow: hidden; word-break: break-all; } .uploadedImagesContainer .system-upload-file-container .link-container:hover { opacity: 0.7; transition: all 0.3s ease; } .uploadedImagesContainer .system-upload-file-container .link-container.link-delete { position: relative; background-color: #ff0000; border-color: #ff0000; border-radius: 3px; flex: 0 0 24%; margin: 4px 0px 4px 2%; height: 28px; display: flex; justify-content: center; align-items: center; } .uploadedImagesContainer .system-upload-file-container.system-empty-imageTemplate-container .link-container.link-delete { display: none; } .uploadedImagesContainer .system-upload-file-container .link-container.link-delete a { position: relative; margin: 0 auto; display: block; width: 100%; height: 100%; } .uploadedImagesContainer .system-upload-file-container .link-container.link-delete::before { content: '\f1f8'; position: absolute; font-family: "Font Awesome 6 Free", 'FontAwesome'; display: flex; color: #fff; z-index: 100; font-size: 13px; justify-content: center; align-items: center; font-weight: bold; padding: 0; border-radius: 50%; width: 100%; height: 100%; pointer-events: none; } .uploadedImagesContainer .system-upload-file-container .link-container.info { position: relative; margin: 4px 2% 4px 0; flex: 0 0 41%; height: 28px; overflow: hidden; /*border: 1px solid var(--pColor); background-color: var(--pColor);*/ padding: 0px 5px; border-radius: 3px; white-space: nowrap; } .uploadedImagesContainer .system-upload-file-container .link-container.info div { /*color: #ffffff;*/ color: #000000; font-size: 10px; line-height: 13px; display: block; width: 100%; overflow: hidden; word-break: break-all; } .uploadedImagesContainer .system-upload-file-container .uploaded-file-icon { display: flex; width: 80%; height: auto; justify-content: center; margin: 0 auto; } /* =================== 6 FOOTER ======================== */ .footer { display: none; margin: 20px auto 0 auto; min-height: 60px; background-color: #1e1e1e; border-top: 1px solid #e7eaec; bottom: 0; left: 0; padding: 10px 20px; position: relative; right: 0; } .footer > div { width: 98%; padding: 0 0 40px 0; margin: 0 auto; max-width: 1340px; } .footer .footer-crf-one ~ span { width: 100%; padding: 0px 0 4px 0; border-bottom: 1px solid #343434; } .footer span { color: #878787; font-size: 13px !important; font-family: inherit; font-weight: bold; } .footer-crf-one { width: 150px; margin: 20px 0 5px 0; } .footer .footer-crf-one img { width: 100% !important; margin: 0; filter: invert(1) brightness(100); } /* ====================== 7 - SYSTEM COLS ===========================*/ /* ====================== ================ ==========================*/ .col-0.ui-formElement, .col-0m.ui-formElement, .col-1.ui-formElement, .col-2.ui-formElement, .col-3.ui-formElement, .col-4.ui-formElement, .col-5.ui-formElement, .col-6.ui-formElement, .col-7.ui-formElement, .col-8.ui-formElement, .col-9.ui-formElement, .col-10.ui-formElement, .col-11.ui-formElement, .col-12.ui-formElement, .col-1m.ui-formElement, .col-2m.ui-formElement, .col-3m.ui-formElement, .col-4m.ui-formElement, .col-5m.ui-formElement, .col-6m.ui-formElement, .col-7m.ui-formElement, .col-8m.ui-formElement, .col-9m.ui-formElement, .col-10m.ui-formElement, .col-11m.ui-formElement { float: left; clear: none; } .col-0 { width: 0%; flex: 0 0 0%; float: left; } .col-1 { width: 8.3333333%; flex: 0 0 8.3333333%; float: left; } .col-2 { width: 16.66666666%; flex: 0 0 16.66666666%; float: left; } .col-3 { width: 25%; flex: 0 0 25%; float: left; } .col-4 { width: 33.3333333%; flex: 0 0 33.3333333%; float: left; } .col-5 { width: 41.6666666%; flex: 0 0 41.6666666%; float: left; } .col-6 { width: 50%; flex: 0 0 50%; float: left; } .col-7 { width: 58.3333333%; flex: 0 0 58.3333333%; float: left; } .col-8 { width: 66.66666666%; flex: 0 0 66.66666666%; float: left; } .col-9 { width: 75%; flex: 0 0 75%; float: left; } .col-10 { width: 83.33333333%; flex: 0 0 83.33333333%; float: left; } .col-11 { width: 91.666666666%; flex: 0 0 91.666666666%; float: left; } .col-12 { width: 100%; flex: 0 0 100%; float: none; clear: both; } .col-0m { width: 4.16666667%; flex: 0 0 4.16666667%; float: left; } .col-1m { width: 12.5%; flex: 0 0 12.5%; float: left; } .col-2m { width: 20.8333333%; flex: 0 0 20.8333333%; float: left; } .col-3m { width: 29.16666666%; flex: 0 0 29.16666666%; float: left; } .col-4m { width: 37.5%; flex: 0 0 37.5%; float: left; } .col-5m { width: 45.83333333%; flex: 0 0 45.83333333%; float: left; } .col-6m { width: 54.1666666%; flex: 0 0 54.1666666%; float: left; } .col-7m { width: 62.5%; flex: 0 0 62.5%; float: left; } .col-8m { width: 70.83333333%; flex: 0 0 70.83333333%; float: left; } .col-9m { width: 79.16666666%; flex: 0 0 79.16666666%; float: left; } .col-10m { width: 87.5%; flex: 0 0 87.5%; float: left; } .col-11m { width: 95.83333333%; flex: 0 0 95.83333333%; float: left; } @media (max-width: 1024px) { .col-0m, .col-1, .col-1.ui-formElement, .col-2, .col-2.ui-formElement, .col-3, .col-3.ui-formElement, .col-4, .col-4.ui-formElement, .col-5, .col-5.ui-formElement, .col-6, .col-6.ui-formElement, .col-7, .col-7.ui-formElement, .col-8, .col-8.ui-formElement, .col-9, .col-9.ui-formElement, .col-10, .col-10.ui-formElement, .col-11, .col-11.ui-formElement, .col-12, .col-12.ui-formElement, .col-1m, .col-1m.ui-formElement, .col-2m, .col-2m.ui-formElement, .col-3m, .col-3m.ui-formElement, .col-4m, .col-4m.ui-formElement, .col-5m, .col-5m.ui-formElement, .col-6m, .col-6m.ui-formElement, .col-7m, .col-7m.ui-formElement, .col-8m, .col-8m.ui-formElement, .col-9m, .col-9m.ui-formElement, .col-10m, .col-10m.ui-formElement, .col-11m, .col-11m.ui-formElement { width: 100%; flex: 0 0 100%; float: none; clear: both; } .col-0-sm.ui-formElement, .col-0m-sm.ui-formElement, .col-1-sm.ui-formElement, .col-2-sm.ui-formElement, .col-3-sm.ui-formElement, .col-4-sm.ui-formElement, .col-5-sm.ui-formElement, .col-6-sm.ui-formElement, .col-7-sm.ui-formElement, .col-8-sm.ui-formElement, .col-9-sm.ui-formElement, .col-10-sm.ui-formElement, .col-11-sm.ui-formElement, .col-12-sm.ui-formElement, .col-1m-sm.ui-formElement, .col-2m-sm.ui-formElement, .col-3m-sm.ui-formElement, .col-4m-sm.ui-formElement, .col-5m-sm.ui-formElement, .col-6m-sm.ui-formElement, .col-7m-sm.ui-formElement, .col-8m-sm.ui-formElement, .col-9m-sm.ui-formElement, .col-10m-sm.ui-formElement, .col-11m-sm.ui-formElement { float: left !important; clear: none !important; } .col-0-sm, .col-0m-sm, .col-1-sm, .col-1m-sm, .col-2-sm, .col-2m-sm, .col-3-sm, .col-3m-sm, .col-4-sm, .col-4m-sm, .col-5-sm, .col-5m-sm, .col-6-sm, .col-6m-sm, .col-7-sm, .col-7m-sm, .col-8-sm, .col-8m-sm, .col-9-sm, .col-9m-sm, .col-10-sm, .col-10m-sm, .col-11-sm, .col-11m-sm { float: left !important; clear: none !important; } .col-0-sm, .col-0-sm.ui-formElement { width: 0%; flex: 0 0 0%; } .col-0m-sm, .col-0m-sm .ui-formElement { width: 4.16666667%; flex: 0 0 4.16666667%; } .col-1-sm, .col-1-sm.ui-formElement { width: 8.3333333%; flex: 0 0 8.3333333%; } .col-1m-sm, .col-1m-sm.ui-formElement { width: 12.5%; flex: 0 0 12.5%; } .col-2-sm, .col-2-sm.ui-formElement { width: 16.66666666%; flex: 0 0 16.66666666%; } .col-2m-sm, .col-2m-sm.ui-formElement { width: 20.8333333%; flex: 0 0 20.8333333%; } .col-3-sm, .col-3-sm.ui-formElement { width: 25%; flex: 0 0 25%; } .col-3m-sm, .col-3m-sm.ui-formElement { width: 29.16666666%; flex: 0 0 29.16666666%; } .col-4-sm, .col-4-sm.ui-formElement { width: 33.3333333%; flex: 0 0 33.3333333%; } .col-4m-sm, .col-4m-sm.ui-formElement { width: 37.5%; flex: 0 0 37.5%; } .col-5-sm, .col-5-sm.ui-formElement { width: 41.6666666%; flex: 0 0 41.6666666%; } .col-5m-sm, .col-5m-sm.ui-formElement { width: 45.83333333%; flex: 0 0 45.83333333%; } .col-6-sm, .col-6-sm.ui-formElement { width: 50%; flex: 0 0 50%; } .col-6m-sm, .col-6m-sm.ui-formElement { width: 54.1666666%; flex: 0 0 54.1666666%; } .col-7-sm, .col-7-sm.ui-formElement { width: 58.3%; flex: 0 0 58.3%; } .col-7m-sm, .col-7m-sm.ui-formElement { width: 62.5%; flex: 0 0 62.5%; } .col-8-sm, .col-8-sm.ui-formElement { width: 66.66666666%; flex: 0 0 66.66666666%; } .col-8m-sm, .col-8m-sm.ui-formElement { width: 70.83333333%; flex: 0 0 70.83333333%; } .col-9-sm, .col-9-sm.ui-formElement { width: 75%; flex: 0 0 75%; } .col-9m-sm, .col-9m-sm.ui-formElement { width: 79.16666666%; flex: 0 0 79.16666666%; } .col-10-sm, .col-10-sm.ui-formElement { width: 83.33333333%; flex: 0 0 83.33333333%; } .col-10m-sm, .col-10m-sm.ui-formElement { width: 87.5%; flex: 0 0 87.5%; } .col-11-sm, .col-11-sm.ui-formElement { width: 91.666666666%; flex: 0 0 91.666666666%; } .col-11m-sm, .col-11m-sm.ui-formElement { width: 95.83333333%; flex: 0 0 95.83333333%; } .col-12-sm, .col-12-sm.ui-formElement { width: 100%; flex: 0 0 100%; } } @media (max-width: 480px) { .col-0m, .col-0m.ui-formElement, .col-1, .col-1.ui-formElement, .col-2, .col-2.ui-formElement, .col-3, .col-3.ui-formElement, .col-4, .col-4.ui-formElement, .col-5, .col-5.ui-formElement, .col-6, .col-6.ui-formElement, .col-7, .col-7.ui-formElement, .col-8, .col-8.ui-formElement, .col-9, .col-9.ui-formElement, .col-10, .col-10.ui-formElement, .col-11, .col-11.ui-formElement, .col-12, .col-12.ui-formElement, .col-1m, .col-1m.ui-formElement, .col-2m, .col-2m.ui-formElement, .col-3m, .col-3m.ui-formElement, .col-4m, .col-4m.ui-formElement, .col-5m, .col-5m.ui-formElement, .col-6m, .col-6m.ui-formElement, .col-7m, .col-7m.ui-formElement, .col-8m, .col-8m.ui-formElement, .col-9m, .col-9m.ui-formElement, .col-10m, .col-10m.ui-formElement, .col-11m, .col-11m.ui-formElement { width: 100%; flex: 0 0 100%; float: none; clear: both; } .col-0-xs, .col-0m-xs, .col-1-xs, .col-1m-xs, .col-2-xs, .col-2m-xs, .col-3-xs, .col-3m-xs, .col-4-xs, .col-4m-xs, .col-5-xs, .col-5m-xs, .col-6-xs, .col-6m-xs, .col-7-xs, .col-7m-xs, .col-8-xs, .col-8m-xs, .col-9-xs, .col-9m-xs, .col-10-xs, .col-10m-xs, .col-11-xs, .col-11m-xs { float: left !important; clear: none !important; } .col-0-xs, .col-0-xs.ui-formElement { width: 0%; flex: 0 0 0%; } .col-0m-xs, .col-0m-xs.ui-formElement { width: 4.16666667%; flex: 0 0 4.16666667%; } .col-1-xs, .col-1-xs.ui-formElement { width: 8.3333333%; flex: 0 0 8.3333333%; } .col-1m-xs, .col-1m-xs.ui-formElement { width: 12.5%; flex: 0 0 12.5%; } .col-2-xs, .col-2-xs.ui-formElement { width: 16.66666666%; flex: 0 0 16.66666666%; } .col-2m-xs, .col-2m-xs.ui-formElement { width: 20.8333333%; flex: 0 0 20.8333333%; } .col-3-xs, .col-3-xs.ui-formElement { width: 25%; flex: 0 0 25%; } .col-3m-xs, .col-3m-xs.ui-formElement { width: 29.16666666%; flex: 0 0 29.16666666%; } .col-4-xs, .col-4-xs.ui-formElement { width: 33.3333333%; flex: 0 0 33.3333333%; } .col-4m-xs, .col-4m-xs.ui-formElement { width: 37.5%; flex: 0 0 37.5%; } .col-5-xs, .col-5-xs.ui-formElement { width: 41.6666666%; flex: 0 0 41.6666666%; } .col-5m-xs, .col-5m-xs.ui-formElement { width: 45.83333333%; flex: 0 0 45.83333333%; } .col-6-xs, .col-6-xs.ui-formElement { width: 50%; flex: 0 0 50%; } .col-6m-xs, .col-6m-xs.ui-formElement { width: 54.1666666%; flex: 0 0 54.1666666%; } .col-7-xs, .col-7-xs.ui-formElement { width: 58.3333333%; flex: 0 0 58.3333333%; } .col-7m-xs, .col-7m-xs.ui-formElement { width: 62.5%; flex: 0 0 62.5%; } .col-8-xs, .col-8-xs.ui-formElement { width: 66.66666666%; flex: 0 0 66.66666666%; } .col-8m-xs, .col-8m-xs.ui-formElement { width: 70.83333333%; flex: 0 0 70.83333333%; } .col-9-xs, .col-9-xs.ui-formElement { width: 75%; flex: 0 0 75%; } .col-9m-xs, .col-9m-xs.ui-formElement { width: 79.16666666%; flex: 0 0 79.16666666%; } .col-10-xs, .col-10-xs.ui-formElement { width: 83.33333333%; flex: 0 0 83.33333333%; } .col-10m-xs, .col-10m-xs.ui-formElement { width: 87.5%; flex: 0 0 87.5%; } .col-11-xs, .col-11-xs.ui-formElement { width: 91.666666666%; flex: 0 0 91.666666666%; } .col-11m-xs, .col-11m-xs.ui-formElement { width: 95.83333333%; flex: 0 0 95.83333333%; } .col-12-xs, .col-12-xs.ui-formElement { width: 100%; flex: 0 0 100%; /*float: none;*/ clear: both; } } /* ============= 8 COL-FLEX SYSTEM + COLS ==========*/ /* This posibility make inline elements */ /* if flex-group put in area with direct col-system in area need padding and margin initial */ .flex-group { margin: 0 !important; padding: 0 !important; } .flex-group.system-area .ui-formItemsContainer { position: relative; margin: 2px 4px; padding: 4px 4px; display: flex; flex-wrap: wrap; } /* Add bg in area */ .flex-group.bg .ui-formItemsContainer, .flex-group.bg2 .ui-formItemsContainer, .flex-group.bg3 .ui-formItemsContainer { background: var(--bgColor); margin: 2px 4px; padding: 4px 4px; } .flex-group.bg2 .ui-formItemsContainer { background: var(--bgColor2); } .flex-group.bg3 .ui-formItemsContainer { background: var(--bgColor3); } .flex-group .ui-formItemsContainer .ui-formElement, .flex-group.bg .ui-formItemsContainer .ui-formElement, .flex-group.bg2 .ui-formItemsContainer .ui-formElement, .flex-group.bg3 .ui-formItemsContainer .ui-formElement { padding: 3px 6px 3px 6px; } @media (max-width: 1100px) { .flex-group .ui-formItemsContainer .ui-formElement { padding: 3px 3px !important; } } .flex-group.intbg.system-area .ui-formItemsContainer { position: relative; margin: 2px 0px 2px -8px; padding: 4px 4px; display: flex; flex-wrap: wrap; } .flex-group .ui-formItemsContainer .ui-formElement.bg, .flex-group .ui-formItemsContainer .ui-formElement.bg2, .flex-group .ui-formItemsContainer .ui-formElement.bg3 { padding: 0; margin: 0px 0px; } .flex-group .ui-formItemsContainer .ui-formElement.bg .form-group, .flex-group .ui-formItemsContainer .ui-formElement.bg2 .form-group, .flex-group .ui-formItemsContainer .ui-formElement.bg3 .form-group { background-color: var(--bgColor); padding: 7px 8px; border-radius: 4px; margin: 4px 8px; width: calc(100% - 8px); } .flex-group.vstart .ui-formItemsContainer { align-items: flex-start; } .flex-group.vcenter .ui-formItemsContainer { align-items: center; } .flex-group.vend .ui-formItemsContainer { align-items: flex-end; } .flex-group.vstretch .ui-formItemsContainer { align-items: stretch; } .flex-group.hstart .ui-formItemsContainer { justify-content: start; } .flex-group.hcenter .ui-formItemsContainer { justify-content: center; } .flex-group.hend .ui-formItemsContainer { justify-content: end; } .flex-group.hbetween .ui-formItemsContainer { justify-content: space-between; } .flex-group.haround .ui-formItemsContainer { justify-content: space-around; } .flex-group.dcol .ui-formItemsContainer { flex-direction: column; } .flex-group.dcol-reverse .ui-formItemsContainer { flex-direction: column-reverse; } .flex-group.drow .ui-formItemsContainer { flex-direction: row; } .flex-group.drow-reverse .ui-formItemsContainer { flex-direction: row-reverse; } .flex-group .col-line.ui-formElement { height: 1px !important; background-color: #979797; width: 100%; margin: 15px 8px 10px 8px !important; padding: 0 !important; } .flex-break { width: 100%; height: 0; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background-color: transparent; } .flex-break .form-group { display: none; } .flex-group .ui-formElement.grow1 { flex-grow: 1; } .flex-group .ui-formElement.shrink1 { flex-shrink: 1; } .flex-group .ui-formElement.order1 { order: 1; } .flex-group .ui-formElement.order2 { order: 2; } .flex-group .ui-formElement.order3 { order: 3; } .flex-group .ui-formElement.vstart { align-self: flex-start; } .flex-group .ui-formElement.vend { align-self: flex-end; } .flex-group .ui-formElement.vcenter { align-self: center; } .flex-group .ui-formElement.vstretch { align-self: stretch; } .block-group .popover-content, .block-group .ui-formItemsContainer { display: block; } .grid-group .popover-content, .grid-group .ui-formItemsContainer { display: grid; } .table-group .popover-content, .table-group .ui-formItemsContainer { display: table; } /* ================ 8.1 COL MARGINS ================ */ .ml-col-1 { margin-left: 8.3333333% !important; } .ml-col-1m { margin-left: 12.5% !important; } .ml-col-2 { margin-left: 16.666666% !important; } .ml-col-2m { margin-left: 20.8333333% !important; } .ml-col-3 { margin-left: 25% !important; } .ml-col-3m { margin-left: 29.1666666% !important; } .ml-col-4 { margin-left: 33.333333% !important; } .ml-col-4m { margin-left: 37.5% !important; } .ml-col-5 { margin-left: 41.1111111% !important; } .ml-col-5m { margin-left: 45,833333% !important; } .ml-col-6 { margin-left: 50% !important; } .ml-col-6m { margin-left: 50% !important; } .ml-col-7 { margin-left: 58.3333333% !important; } .ml-col-7m { margin-left: 62.5% !important; } .ml-col-8 { margin-left: 66.666666% !important; } .ml-col-8m { margin-left: 70.833333% !important; } .ml-col-9 { margin-left: 75% !important; } .ml-col-9m { margin-left: 79.1666666% !important; } /* Negative right margin for titles up to next element */ /* need same col in the element */ .mr--col-1 { margin-right: -8.5% !important; } .mr--col-2 { margin-right: -16.6666667% !important; } .mr--col-3 { margin-right: -25% !important; } .mr--col-4 { margin-right: -33.333333% !important; } .mr--col-5 { margin-right: -41.666666% !important; } .mr--col-6 { margin-right: -50% !important; } .mr--col-1 label, .mr--col-2 label, .mr--col-3 label, .mr--col-4 label, .mr--col-6 label { position: absolute; top: -1px; } @media(max-width:1000px) { .mr--col0-sm { margin-right: 0% !important; margin-left: 0% !important; } } @media (max-width:880px) { .ml-col-1, .ml-col-1m, .ml-col-2, .ml-col-3, .ml-col-4, .ml-col-5, .ml-col-6, .ml-col-7, .ml-col-8, .ml-col-9 { margin-left: 0% !important; } } @media (max-width:480px) { .mb-30-xs { margin-bottom: -30px !important; } .mr--col-1 { /* need same col in the element */ margin-right: 0 !important; } } /* ========================= 9 COL-GROUPS SYSTEM ===============*/ /* ======================== =================== ===============*/ .col-group { margin: 10px 0 !important; } .col-group .ui-formItemsContainer { width: 100%; padding: 0 5px; margin: 0 !important; position: relative; display: flex; flex-wrap: wrap; left: 0; } /* Fix common caracteristics in all cols*/ .col-group .ui-formItemsContainer .ui-formElement { width: 50%; float: left; flex: 0 0 50%; align-items: center; border-bottom: 1px solid var(--brCGColor); color: #101010; background-color: #ffffff; z-index: 1; } .col-group .ui-formItemsContainer .ui-formElement { padding: 0; min-height: 36px !important; } .col-group .ui-formItemsContainer .ui-formElement .form-group { height: 100% !important; padding: 0 !important; margin: 0; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; background-color: transparent; } .col-group .radio-container { width: 100%; height: 100%; margin: 0; display: flex !important; flex: 1; } .col-group .radio-container .radio-horizontal, .col-group .radio-container .radio-vertical { padding: 0; margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; } /* ============ only for radio button / checkbox horizontal!! ============*/ /* Delete label in radio-horizontal radio and check */ .col-group .radio-container .radio-horizontal label.option-label, .col-group .radio-container .radio-horizontal br { display: none !important; } /* Delete label in radio-vertical radio and check */ .col-group:not(.vertical-items) .ui-formElement:not(.col-group-out) .icheckbox_square-green { margin: 0 auto !important; } .col-group:not(.vertical-items):not(.col-switch) .ui-formElement:not(.col-group-out) .icheckbox_square-green ~ label, .col-group:not(.vertical-items):not(.col-switch) .ui-formElement:not(.col-group-out) .icheckbox_square-green ~ br { display: none !important; } /* ============ only for checkbox vertical!! ================*/ .col-group .radio-container.group-vertical { display: flex; justify-content: space-around; } .col-group .radio-container .radio-horizontal .iradio_square-green, .col-group .radio-container .radio-vertical .iradio_square-green { margin-right: 0px; } .col-group .ui-formItemsContainer > .form-group > label { margin: 0; } .col-group .help-block { margin: 0; } .col-group.grad .radio-container .radio-horizontal:nth-child(1), .col-group.grad.reverse-colors .radio-container .radio-horizontal:nth-child(6) { background-color: var(--cgColor25); } .col-group.grad .radio-container .radio-horizontal:nth-child(2), .col-group.grad.reverse-colors .radio-container .radio-horizontal:nth-child(5) { background-color: var(--cgColor40); } .col-group.grad .radio-container .radio-horizontal:nth-child(3), .col-group.grad.reverse-colors .radio-container .radio-horizontal:nth-child(4) { background-color: var(--cgColor55); } .col-group.grad .radio-container .radio-horizontal:nth-child(4), .col-group.grad.reverse-colors .radio-container .radio-horizontal:nth-child(3) { background-color: var(--cgColor70); } .col-group.grad .radio-container .radio-horizontal:nth-child(5), .col-group.grad.reverse-colors .radio-container .radio-horizontal:nth-child(2) { background-color: var(--cgColor85); } .col-group.grad .radio-container .radio-horizontal:nth-child(6), .col-group.grad.reverse-colors .radio-container .radio-horizontal:nth-child(1) { background-color: var(--cgColor100); } /* ========================= 9.1 COL-GROUP TWO ITEMS ==================================*/ /* ========================= COL-GROUP ONE ITEM ==================================*/ /* Delete label in groups of radio buttons */ .col-group.one-item:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2) label.input-label, .col-group.one-item:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2) br, .col-group.one-item.head .ui-formItemsContainer .ui-formElement:nth-child(2n+4) label.input-label, .col-group.one-item.head .ui-formItemsContainer .ui-formElement:nth-child(2n+4) br { display: none; } .col-group.one-item:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1) .form-group label.input-label, .col-group.one-item.head .ui-formItemsContainer .ui-formElement:nth-child(2n+3) .form-group label.input-label, .col-group.one-item.head .ui-formItemsContainer .ui-formElement:nth-child(1) .form-group label.input-label { padding: 0 10px; } /* Put the correct size for cols */ .col-group.one-item:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .col-group.one-item.head .ui-formItemsContainer .ui-formElement:nth-child(2n+3), .col-group.one-item.head .ui-formItemsContainer .ui-formElement:nth-child(1) { width: 60%; flex: 0 0 60%; clear: left; float: left; } .col-group.one-item:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2), .col-group.one-item.head .ui-formItemsContainer .ui-formElement:nth-child(2n+4), .col-group.one-item.head .ui-formItemsContainer .ui-formElement:nth-child(2) { width: 40%; flex: 0 0 40%; float: left; clear: right; } /* Background rows*/ .col-group.one-item:not(.head):not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+3), .col-group.one-item:not(.head):not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+4), .col-group.one-item.head:not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+5), .col-group.one-item.head:not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+6) { background-color: var(--bgColorCG); } /* Convert elements in header*/ .col-group.one-item:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.one-item:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2) { border-top: 1px solid var(--brCGColor); } .col-group.one-item.head .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.one-item.head .ui-formItemsContainer .ui-formElement:nth-child(2) { align-items: center; padding: 0 !important; background-color: var(--bgCGHead) !important; color: var(--fgCGHead); } .col-group.one-item.head .ui-formItemsContainer .ui-formElement:nth-child(2) { text-align: center; } .col-group.one-item .ui-formItemsContainer .ui-formElement:nth-child(2) .form-group { flex-direction: column; justify-content: center; } /* Resize radios */ .col-group.one-item .radio-container .radio-horizontal { width: 100%; } /* ========================= /END ONE ITEM ==================================*/ /* ========================= TWO ITEMS ==================================*/ /* Delete label in groups of radio buttons */ .col-group.two-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2) label.input-label, .col-group.two-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2) br, .col-group.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+5) label.input-label, .col-group.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+5) br { display: none; } .col-group.two-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1) .form-group label.input-label, .col-group.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+4) .form-group label.input-label, .col-group.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(1) .form-group label.input-label { padding: 0 10px; } /* Put the correct size for cols */ .col-group.two-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .col-group.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+4), .col-group.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(1) { width: 60%; flex: 0 0 60%; clear: left; float: left; } .col-group.two-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2), .col-group.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+5) { width: 40%; flex: 0 0 40%; float: left; clear: right; } /* Background rows*/ .col-group.two-items:not(.head):not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+3), .col-group.two-items:not(.head):not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+4), .col-group.two-items.head:not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+6), .col-group.two-items.head:not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+7) { background-color: var(--bgColorCG); } /* Convert elements in header*/ .col-group.two-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.two-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2) { border-top: 1px solid var(--brCGColor); } .col-group.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(3) { padding: 0 !important; background-color: var(--bgCGHead) !important; color: var(--fgCGHead); } .col-group.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(3) { width: 20%; flex: 0 0 20%; align-items: center; text-align: center; } .col-group.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(2) .form-group, .col-group.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(3) .form-group { flex-direction: column; justify-content: center; } /* Resize radios */ .col-group.two-items .radio-container .radio-horizontal { width: 50%; } /* ========================= /END TWO ITEMS ==================================*/ /* ========================= 9.2 THREE ITEMS ==================================*/ /* Delete label in groups of radio buttons */ .col-group.three-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2) label.input-label, .col-group.three-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2) br, .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+6) label.input-label, .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+6) br { display: none; } .col-group.three-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1) .form-group label.input-label, .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+5) .form-group label.input-label, .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(1) .form-group label.input-label { padding: 0 10px; } /* Put the correct size for cols */ .col-group.three-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+5), .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(1) { width: 50%; flex: 0 0 50%; clear: left; float: left; } .col-group.three-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2), .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+6) { width: 50%; flex: 0 0 50%; float: left; clear: right; } /* Background rows*/ .col-group.three-items:not(.head):not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+3), .col-group.three-items:not(.head):not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+4), .col-group.three-items.head:not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+7), .col-group.three-items.head:not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+8) { background-color: var(--bgColorCG); } /* Convert other elements in header*/ .col-group.three-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.three-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2) { border-top: 1px solid var(--brCGColor); } .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(4) { padding: 0 !important; background-color: var(--bgCGHead) !important; color: var(--fgCGHead); } .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(4) { width: 16.6666666%; flex: 0 0 16.6666666%; align-items: center; text-align: center; } .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(2) .form-group, .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(3) .form-group, .col-group.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(4) .form-group { flex-direction: column; justify-content: center; } /* Resize radios */ .col-group.three-items .radio-container .radio-horizontal { width: 33.33333333%; } /* ========================= /END THREE ITEMS ==================================*/ /* ========================= 9.3 FOUR ITEMS ==================================*/ /* Delete label in groups of radio buttons */ .col-group.four-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2) label.input-label, .col-group.four-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2) br, .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+7) label.input-label, .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+7) br { display: none; } .col-group.four-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1) .form-group label.input-label, .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+6) .form-group label.input-label, .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(1) .form-group label.input-label { padding: 0 10px; } /* Put the correct size for cols */ .col-group.four-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+6), .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(1) { width: 50%; flex: 0 0 50%; clear: left; float: left; } .col-group.four-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2), .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+7) { width: 50%; flex: 0 0 50%; float: left; clear: right; } /* Background rows*/ .col-group.four-items:not(.head):not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+3), .col-group.four-items:not(.head):not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+4), .col-group.four-items.head:not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+8), .col-group.four-items.head:not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+9) { background-color: var(--bgColorCG); } /* Convert other elements in header*/ .col-group.four-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.four-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2) { border-top: 1px solid var(--brCGColor); } .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(4), .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(5) { background-color: var(--bgCGHead) !important; color: var(--fgCGHead); } .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(4), .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(5) { width: 12.5%; flex: 0 0 12.5%; float: left; clear: none; align-items: center; text-align: center; padding: 0 !important; } .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(2) .form-group, .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(3) .form-group, .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(4) .form-group, .col-group.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(5) .form-group { flex-direction: column; justify-content: center; } /* Resize radios */ .col-group.four-items .radio-container .radio-horizontal { width: 25%; } /* ========================= /END FOUR ITEMS ==================================*/ /* ========================= 9.4 FIVE ITEMS ==================================*/ /* Delete label in groups of radio buttons */ .col-group.five-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2) label.input-label, .col-group.five-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2) br, .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+8) label.input-label, .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+8) br { display: none; } .col-group.five-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1) .form-group label.input-label, .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+7) .form-group label.input-label, .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(1) .form-group label.input-label { padding: 0 10px; } /* Put the correct size for cols */ .col-group.five-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+6), .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(1) { width: 50%; flex: 0 0 50%; clear: left; float: left; } .col-group.five-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2), .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+7) { width: 50%; flex: 0 0 50%; float: left; clear: right; } /* Background rows*/ .col-group.five-items:not(.head):not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+3), .col-group.five-items:not(.head):not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+4), .col-group.five-items.head:not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+9), .col-group.five-items.head:not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+10) { background-color: var(--bgColorCG); } /* Convert other elements in header*/ .col-group.five-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.five-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2) { border-top: 1px solid var(--brCGColor); } .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(4), .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(5), .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(6) { background-color: var(--bgCGHead) !important; color: var(--fgCGHead); } .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(4), .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(5), .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(6) { width: 10%; flex: 0 0 10%; float: left; clear: none; align-items: center; text-align: center; padding: 0 !important; } .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(2) .form-group, .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(3) .form-group, .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(4) .form-group, .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(5) .form-group, .col-group.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(6) .form-group { flex-direction: column; justify-content: center; } /* Resize radios */ .col-group.five-items .radio-container .radio-horizontal { width: 20%; } /* ========================= 9.5 SIX ITEMS ==================================*/ /* Delete label in groups of radio buttons */ .col-group.six-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2) label.input-label, .col-group.six-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2) br, .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+9) label.input-label, .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+9) br { display: none; } .col-group.six-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1) .form-group label.input-label, .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+8) .form-group label.input-label, .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(1) .form-group label.input-label { padding: 0 10px; } /* Put the correct size for cols */ .col-group.six-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+8), .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(1) { width: 40%; flex: 0 0 40%; clear: left; float: left; } .col-group.six-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2), .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+9) { width: 60%; flex: 0 0 60%; float: left; clear: right; } /* Background rows*/ .col-group.six-items:not(.head):not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+3), .col-group.six-items:not(.head):not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+4), .col-group.six-items.head:not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+10), .col-group.six-items.head:not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+11) { background-color: var(--bgColorCG); } /* Convert other elements in header*/ .col-group.six-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.six-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2) { border-top: 1px solid var(--brCGColor); } .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(4), .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(5), .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(6), .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(7) { background-color: var(--bgCGHead) !important; color: var(--fgCGHead); } .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(4), .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(5), .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(6), .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(7) { width: 10%; flex: 0 0 10%; float: left; clear: none; align-items: center; text-align: center; padding: 0 !important; } .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(2) .form-group, .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(3) .form-group, .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(4) .form-group, .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(5) .form-group, .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(6) .form-group, .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(7) .form-group { flex-direction: column; justify-content: center; } .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(2) label.input-label, .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(3) label.input-label, .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(4) label.input-label, .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(5) label.input-label, .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(6) label.input-label, .col-group.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(7) label.input-label { font-size: var(--fo-body-font-size-small); } /* Resize radios */ .col-group.six-items .radio-container .radio-horizontal { width: 16.6666667%; } /* ========================= /END COL-GROUP SIX ITEMS ==================================*/ /* ========================= 9.6 SEVEN ITEMS ==================================*/ /* Delete label in groups of radio buttons */ .col-group.seven-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2) label.input-label, .col-group.seven-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2) br, .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+10) label.input-label, .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+10) br { display: none; } .col-group.seven-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1) .form-group label.input-label, .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+9) .form-group label.input-label, .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(1) .form-group label.input-label { padding-left: 10px; } /* Put the correct size for cols */ .col-group.seven-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+9), .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(1) { width: 30%; flex: 0 0 30%; clear: left; float: left; } .col-group.seven-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+2), .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+10) { width: 70%; flex: 0 0 70%; float: left; clear: right; } /* Background rows*/ .col-group.seven-items:not(.head):not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+3), .col-group.seven-items:not(.head):not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+4), .col-group.seven-items.head:not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+11), .col-group.seven-items.head:not(.grad) .ui-formItemsContainer .ui-formElement:nth-child(4n+12) { background-color: var(--bgColorCG); } /* Convert other elements in header*/ .col-group.seven-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.seven-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2) { border-top: 1px solid var(--brCGColor); } .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(4), .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(5), .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(6), .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(7), .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(8) { background-color: var(--bgCGHead) !important; color: var(--fgCGHead); } .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(4), .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(5), .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(6), .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(7), .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(8) { width: 10%; flex: 0 0 10%; float: left; clear: none; align-items: center; text-align: center; padding: 0 !important; background-color: var(--bgCGHead) !important; color: var(--fgCGHead); } .col-group.seven-items .ui-formItemsContainer .ui-formElement:nth-child(2) .form-group, .col-group.seven-items .ui-formItemsContainer .ui-formElement:nth-child(3) .form-group, .col-group.seven-items .ui-formItemsContainer .ui-formElement:nth-child(4) .form-group, .col-group.seven-items .ui-formItemsContainer .ui-formElement:nth-child(5) .form-group, .col-group.seven-items .ui-formItemsContainer .ui-formElement:nth-child(6) .form-group, .col-group.seven-items .ui-formItemsContainer .ui-formElement:nth-child(7) .form-group, .col-group.seven-items .ui-formItemsContainer .ui-formElement:nth-child(8) .form-group { flex-direction: column; justify-content: center; } .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(2) label.input-label, .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(3) label.input-label, .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(4) label.input-label, .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(5) label.input-label, .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(6) label.input-label, .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(7) label.input-label, .col-group.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(8) label.input-label { font-size: var(--fo-body-font-size-small); } /* Resize radios */ .col-group.seven-items .radio-container .radio-horizontal { width: 14.28%; } /* ========================= /END COL-GROUP SEVEN ITEMS ==================================*/ /* ============= 9.7 Line interior Items ========================*/ .col-group.col-line-items .radio-format { border-left: 1px solid var(--brCGColor); } /* ============= 9.8 Put last item differente color ========================*/ .col-group.three-items.dif-last-child .radio-container .radio-horizontal:last-child, .col-group.five-items.dif-last-child .radio-container .radio-horizontal:last-child, .col-group.six-items.dif-last-child .radio-container .radio-horizontal:last-child, .col-group.seven-items.dif-last-child .radio-container .radio-horizontal:last-child { border-left: 1px solid var(--pColor) !important; background-color: #ffffff !important; } .col-group.one-item.dif-last-child .ui-formItemsContainer .ui-formElement.minus-one .radio-container .radio-horizontal:last-child { border-left: 0 !important; background-color: var(--cgColor25) !important; } .col-group.two-items.dif-last-child .ui-formItemsContainer .ui-formElement.minus-one .radio-container .radio-horizontal:last-child { border-left: 0 !important; background-color: var(--cgColor25) !important; } .col-group.three-items.dif-last-child .ui-formItemsContainer .ui-formElement.minus-one .radio-container .radio-horizontal:last-child { border-left: 0 !important; background-color: var(--cgColor40) !important; } .col-group.four-items.dif-last-child .ui-formItemsContainer .ui-formElement.minus-one .radio-container .radio-horizontal:last-child { border-left: 0 !important; background-color: var(--cgColor55) !important; } .col-group.five-items.dif-last-child .ui-formItemsContainer .ui-formElement.minus-one .radio-container .radio-horizontal:last-child { border-left: 0 !important; background-color: var(--cgColor70) !important; } /* ========== 9.9 Normal Col-group Mobile if not vertical =====================*/ @media (max-width: 480px) { /* margin and padding col-group */ .col-group:not(.no-mobile) .ui-formItemsContainer { margin: 2px 4px 0 0; padding: 6px 4px 0 0px; width: 100%; min-width: 100% !important; } /* All elements to 100% */ .col-group:not(.no-mobile) .ui-formItemsContainer .ui-formElement { width: 100% !important; flex: 0 0 100% !important; } /* reverse radio and label */ .col-group:not(.no-mobile) .radio-container .radio-horizontal { width: 100%; display: flex; border: 1px solid var(--pColor); flex-direction: column-reverse; align-items: center; justify-content: center; } /* margin space bettewn radio and label */ .col-group:not(.no-mobile) .radio-container .radio-horizontal .iradio_square-green { margin: 6px 0 !important; } /* min space and center for labels in radio and background white*/ .col-group:not(.no-mobile) .radio-container .radio-horizontal label.option-label { display: flex !important; background-color: #ffffff; min-height: 30px; padding: 5px; width: 100%; justify-content: center; align-items: center; } .col-group:not(.no-mobile).one-item:not(.vertical-items) .ui-formItemsContainer .ui-formElement:nth-child(n), .col-group:not(.no-mobile).two-items:not(.vertical-items) .ui-formItemsContainer .ui-formElement:nth-child(n+1), .col-group:not(.no-mobile).three-items:not(.vertical-items) .ui-formItemsContainer .ui-formElement:nth-child(n), .col-group:not(.no-mobile).four-items:not(.vertical-items) .ui-formItemsContainer .ui-formElement:nth-child(n+1), .col-group:not(.no-mobile).five-items:not(.vertical-items) .ui-formItemsContainer .ui-formElement:nth-child(n), .col-group:not(.no-mobile).six-items:not(.vertical-items) .ui-formItemsContainer .ui-formElement:nth-child(n+1) { border-top: 1px solid var(--pColor); border-left: 1px solid var(--pColor); border-right: 1px solid var(--pColor); border-bottom: 1px solid var(--pColor); background-color: var(--bgColorCG); margin-top: 0 !important; } .col-group:not(.no-mobile).one-item .ui-formItemsContainer .ui-formElement:nth-child(n) .form-group, .col-group:not(.no-mobile).two-items .ui-formItemsContainer .ui-formElement:nth-child(n+1) .form-group, .col-group:not(.no-mobile).three-items .ui-formItemsContainer .ui-formElement:nth-child(n) .form-group, .col-group:not(.no-mobile).four-items .ui-formItemsContainer .ui-formElement:nth-child(n+1) .form-group, .col-group:not(.no-mobile).five-items .ui-formItemsContainer .ui-formElement:nth-child(n) .form-group, .col-group:not(.no-mobile).six-items .ui-formItemsContainer .ui-formElement:nth-child(n+1) .form-group { margin-top: 0px; } .col-group:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(n) { border-bottom: 0px solid #ffffff; } /* =============== Delete headers ===================*/ .col-group.two-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.two-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.two-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(3) { display: none !important; } .col-group.three-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.three-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.three-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.three-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(4) { display: none !important; } .col-group.four-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.four-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.four-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.four-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(4), .col-group.four-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(5) { display: none !important; } .col-group.five-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.five-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.five-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.five-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(4), .col-group.five-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(5), .col-group.five-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(6) { display: none !important; } .col-group.six-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.six-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.six-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.six-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(4), .col-group.six-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(5), .col-group.six-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(6), .col-group.six-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(7) { display: none !important; } .col-group.seven-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.seven-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.seven-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.seven-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(4), .col-group.seven-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(5), .col-group.seven-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(6), .col-group.seven-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(7), .col-group.seven-items.head:not(.no-mobile) .ui-formItemsContainer .ui-formElement:nth-child(8) { display: none !important; } } /* ======== DELETE FIRST BORDER ===========*/ .col-group.one-item.del-first-br .ui-formElement:nth-child(1), .col-group.one-item.del-first-br .ui-formElement:nth-child(2) { border-top: 0 !important; } /* =============== 9.10 Mobile Vertical ===================*/ @media (max-width: 1024px) { /* =============== Delete headers ===================*/ .col-group.mobile-vertical.head .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.mobile-vertical.head .ui-formItemsContainer .ui-formElement:nth-child(2), .col-group.mobile-vertical.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(3) { display: none !important; } .col-group.mobile-vertical.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.mobile-vertical.three-items.head .ui-formItemsContainer .ui-formElement:nth-child(4) { display: none !important; } .col-group.mobile-vertical.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.mobile-vertical.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(4), .col-group.mobile-vertical.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(5) { display: none !important; } .col-group.mobile-vertical.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.mobile-vertical.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(4), .col-group.mobile-vertical.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(5), .col-group.mobile-vertical.five-items.head .ui-formItemsContainer .ui-formElement:nth-child(6) { display: none !important; } .col-group.mobile-vertical.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.mobile-vertical.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(4), .col-group.mobile-vertical.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(5), .col-group.mobile-vertical.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(6), .col-group.mobile-vertical.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(7) { display: none !important; } .col-group.mobile-vertical.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(3), .col-group.mobile-vertical.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(4), .col-group.mobile-vertical.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(5), .col-group.mobile-vertical.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(6), .col-group.mobile-vertical.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(7), .col-group.mobile-vertical.seven-items.head .ui-formItemsContainer .ui-formElement:nth-child(8) { display: none !important; } /* margin and padding col-group */ .col-group.mobile-vertical .ui-formItemsContainer { margin: 2px 4px 0 0; padding: 6px 4px 0 0px; width: 100%; min-width: 100% !important; } /* All elements to 100% */ .col-group.mobile-vertical .ui-formItemsContainer .ui-formElement { width: 100% !important; flex: 0 0 100% !important; flex-wrap: wrap; background-color: transparent !important; } .col-group.mobile-vertical .ui-formItemsContainer .ui-formElement .radio-container { flex-direction: column; /*border: 1px solid var(--pColor);*/ border-top: 0; padding: 5px 5px 5px 5px; } /* reverse radio and label */ .col-group.mobile-vertical .ui-formItemsContainer .ui-formElement .radio-container .radio-horizontal { width: 100% !important; display: flex; padding-left: 15px; border: 0 !important; flex-direction: row; align-items: start; /*background-color:transparent;*/ justify-content: center; } /* margin space bettewn radio and label */ .col-group.mobile-vertical .radio-container .radio-horizontal .iradio_square-green { margin: 6px 0 !important; flex: 0 0 22px; } /* min space and center for labels in radio and background white*/ .col-group.mobile-vertical .radio-container .radio-horizontal label.option-label { display: flex !important; background-color: transparent !important; min-height: 30px; padding: 4px 5px 0px 5px; width: 100%; justify-content: flex-start; } .col-group.mobile-vertical.dif-last-child .radio-container .radio-horizontal:last-child { border-left: 0px solid var(--pColor) !important; } /* Secondary Headers */ /* Pares e impares intercambiados por head */ .col-group.mobile-vertical.one-item .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .col-group.mobile-vertical.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n), .col-group.mobile-vertical.two-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .col-group.mobile-vertical.three-items .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .col-group.mobile-vertical.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n), .col-group.mobile-vertical.four-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .col-group.mobile-vertical.five-items .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .col-group.mobile-vertical.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n), .col-group.mobile-vertical.six-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .col-group.mobile-vertical.seven-items .ui-formItemsContainer .ui-formElement:nth-child(2n+1) { margin-top: 1px !important; background-color: var(--bgColorCG2) !important; border: 1px solid var(--pColor) !important; border-bottom: 0 !important; } /* Elements */ .col-group.mobile-vertical.one-item .ui-formItemsContainer .ui-formElement:nth-child(2n), .col-group.mobile-vertical.two-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .col-group.mobile-vertical.two-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n), .col-group.mobile-vertical.three-items .ui-formItemsContainer .ui-formElement:nth-child(2n), .col-group.mobile-vertical.four-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .col-group.mobile-vertical.four-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n), .col-group.mobile-vertical.five-items .ui-formItemsContainer .ui-formElement:nth-child(2n), .col-group.mobile-vertical.six-items.head .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .col-group.mobile-vertical.six-items:not(.head) .ui-formItemsContainer .ui-formElement:nth-child(2n), .col-group.mobile-vertical.seven-items .ui-formItemsContainer .ui-formElement:nth-child(2n) { margin-bottom: 15px !important; background-color: var(--bgColorCG) !important; border: 1px solid var(--pColor) !important; } .col-group.mobile-vertical .ui-formItemsContainer .ui-formElement .form-group { padding: 0 10px !important; display: flex; justify-content: flex-start; align-items: center; } .col-group.mobile-vertical.grad .ui-formItemsContainer .ui-formElement .form-group { padding: 0 !important; } .col-group.mobile-vertical.dif-last-child .radio-container .radio-horizontal:last-child { border-left: 0 !important; } .col-group.mobile-vertical .ui-formItemsContainer .ui-formElement .form-group label.input-label { margin: 0; font-weight: bold !important; } } /* =============== 9.11 Col-Swicth Mobile ===================*/ @media (max-width: 1024px) { /* Secondary Headers */ /* Pares e impares intercambiados por head */ .col-group.mobile-vertical.col-switch.one-item .ui-formItemsContainer .ui-formElement:nth-child(n), .col-group.mobile-vertical.col-switch.two-items .ui-formItemsContainer .ui-formElement:nth-child(n), .col-group.mobile-vertical.col-switch.three-items .ui-formItemsContainer .ui-formElement:nth-child(n), .col-group.mobile-vertical.col-switch.four-items .ui-formItemsContainer .ui-formElement:nth-child(n), .col-group.mobile-vertical.col-switch.five-items .ui-formItemsContainer .ui-formElement:nth-child(n), .col-group.mobile-vertical.col-switch.six-items .ui-formItemsContainer .ui-formElement:nth-child(n), .col-group.mobile-vertical.col-switch.seven-items .ui-formItemsContainer .ui-formElement:nth-child(n) { background-color: var(--bgColorCG2) !important; border: 0px solid var(--pColor) !important; margin: 0 !important; } .col-group.col-switch.three-items .ui-formItemsContainer .ui-formElement.bg-gradient .form-group { background: linear-gradient(180deg, var(--cgColor25) 0 33.333333%, var(--cgColor40) 0 66.666666%, var(--cgColor55) 50% 100%) !important; } .col-group.col-switch .ui-formItemsContainer .ui-formElement .form-group label.input-label { padding: 0 !important; } } /* ================ 9.11 COL-GROUP WITH VERTICAL ITEMS ======================= */ /* ================ ================================= ======================= */ .col-group.vertical-items { margin-top: 0px !important; max-width: 100%; overflow: hidden; } .col-group.vertical-items .ui-formItemsContainer { min-width: 100%; flex: 0 0 100% !important; } .col-group.vertical-items .ui-formItemsContainer .ui-formElement { background-color: transparent !important; padding-bottom: 10px !important; } .col-group.vertical-items .ui-formItemsContainer .ui-formElement .form-group { align-items: flex-start; } .col-group.vertical-items .radio-container { flex-direction: column; margin: 5px 0 0 0; } .col-group.vertical-items .radio-container .radio-horizontal, .col-group.vertical-items .radio-container .radio-vertical { min-height: 20px; justify-content: flex-end; display: flex; flex-wrap: wrap; flex-direction: row-reverse; width: 100%; padding: 5px 0; margin: 1px 0px; } .col-group.vertical-items .radio-container .radio-horizontal label.option-label, .col-group.vertical-items .radio-container .radio-vertical label.option-label { display: block !important; min-width: 85%; padding-left: 10px; margin: 0 !important; } .col-group.vertical-items .radio-container .radio-horizontal .iradio_square-green, .col-group.vertical-items .radio-container .radio-vertical .iradio_square-green { margin-right: 0px; border-radius: 0; } .col-group.vertical-items .ui-formItemsContainer .ui-formElement .form-group .input-label { margin-top: 10px !important; } .col-group.vertical-items .ui-formItemsContainer .ui-formElement:nth-child(2n+1) { width: 70% !important; flex: 0 0 70% !important; } .col-group.vertical-items .ui-formItemsContainer .ui-formElement:nth-child(2n+2) { width: 30% !important; flex: 0 0 30% !important; padding-right: 10px !important; } .col-group.vertical-items .ui-formItemsContainer .ui-formElement:nth-child(2n+2) .input-label { display: none; } /* ============== Delete last border =============*/ .col-group.vertical-items.delete-last-border .ui-formItemsContainer .ui-formElement:nth-last-child(1), .col-group.vertical-items.delete-last-border .ui-formItemsContainer .ui-formElement:nth-last-child(2) { border-bottom: 0px solid var(--pColor); } /* ============== Delete first lines when 2 col-groups vertical items are together =============*/ .col-group.vertical-items + .col-group.vertical-items { margin-top: -10px !important; } .col-group.vertical-items + .col-group.vertical-items .ui-formItemsContainer .ui-formElement:nth-child(1), .col-group.vertical-items + .col-group.vertical-items .ui-formItemsContainer .ui-formElement:nth-child(2) { border-top: 0 !important; } /* ================= 9.11.1 MOVE THE LAST ITEM TO OTHER COL ====================*/ /* ========== Last item ===============*/ @media(min-width:1025px) { .col-group.vertical-items.last-item .radio-container .radio-horizontal, .col-group.vertical-items.last-item .radio-container .radio-vertical { width: 50%; } .col-group.vertical-items.last-item .ui-formElement:not(.only-1-col) .radio-container .radio-format:nth-last-child(2) { float: left; align-self: start; } .col-group.vertical-items.last-item .ui-formElement:not(.only-1-col) .radio-container .radio-format:nth-last-child(1) { float: right; align-self: end; margin-top: -32px; } .col-group.vertical-items.last-item .ui-formElement:not(.only-1-col) .radio-container .radio-format:nth-last-child(1) label { max-width: 65%; } .col-group.vertical-items .radio-container .radio-horizontal, .col-group.vertical-items .radio-container .radio-vertical { flex-wrap: inherit; } } /* ================= RESPONSIVE VERTICAL-ITEMS ====================*/ @media(max-width:1024px) { .col-group.vertical-items .radio-container .radio-horizontal, .col-group.vertical-items .radio-container .radio-vertical { min-height: 32px; } .col-group.vertical-items .ui-formItemsContainer { width: 100% !important; flex: 0 0 100% !important; } } /* ============ 9.9 Switch elements ========================================*/ .col-group.col-switch .ui-formElement { background-color: transparent; } .col-group.col-switch .ui-formItemsContainer .ui-formElement .form-group { padding: 0 !important; } .col-group.col-switch .ui-formItemsContainer .ui-formElement .form-group > .icheckbox_square-green { margin: 0 0 0 15px !important; } .col-group.col-switch .ui-formItemsContainer .ui-formElement .form-group label.title-label.input-label { display: none !important; } .col-group.col-switch .ui-formItemsContainer .ui-formElement { background-color: transparent !important; } .col-group.col-switch.two-items .ui-formItemsContainer .ui-formElement.bg-gradient .form-group { background: linear-gradient(90deg, var(--cgColor25) 0 50%, var(--cgColor40) 50% 100%); } .col-group.two-items.head.col-switch .ui-formItemsContainer .ui-formElement:nth-child(3n+4) { width: 60%; flex: 0 0 60%; } .col-group.two-items.head.col-switch .ui-formItemsContainer .ui-formElement:nth-child(3n+5), .col-group.two-items.head.col-switch .ui-formItemsContainer .ui-formElement:nth-child(3n+6) { width: 40%; flex: 0 0 40%; } .col-group.col-switch.three-items .ui-formItemsContainer .ui-formElement.bg-gradient .form-group { background: linear-gradient(90deg, var(--cgColor25) 0 33.333333%, var(--cgColor40) 0 66.666666%, var(--cgColor55) 50% 100%); } .col-group.col-switch.four-items .ui-formItemsContainer .ui-formElement.bg-gradient .form-group { background: linear-gradient(90deg, var(--cgColor25) 0 25%, var(--cgColor40) 25% 50%, var(--cgColor55) 50% 75%, var(--cgColor70) 75% 100%); } /* ============ 9.10 Delete All Backgrounds ========================================*/ .col-group.bg-delete .ui-formItemsContainer .ui-formElement { background-color: transparent !important; } .col-group.bg-delete-radio .ui-formItemsContainer .ui-formElement .radio-container .radio-format { background-color: transparent !important; } /* ============ 9.11 Enumarte Labels ========================================*/ .ui-pageContainer { counter-reset: col-counter; counter-set: 0; } .col-group.col-enumerate.one-item .ui-formElement:nth-child(2n+3) .form-group label:before, .col-group.col-enumerate.two-items .ui-formElement:nth-child(2n+4) .form-group label:before, .col-group.col-enumerate.three-items .ui-formElement:nth-child(2n+5) .form-group label:before, .col-group.col-enumerate.four-items .ui-formElement:nth-child(2n+6) .form-group label:before, .col-group.col-enumerate.five-items .ui-formElement:nth-child(2n+7) .form-group label:before, .col-group.col-enumerate.six-items .ui-formElement:nth-child(2n+8) .form-group label:before, .col-group.col-enumerate.seven-items .ui-formElement:nth-child(2n+9) .form-group label:before { min-height: 25px; margin-right: 5px; float: left; counter-increment: col-counter; content: counter(col-counter) ". "; } .counter-reset { counter-reset: col-counter; } .counter-set-6 { counter-set: col-counter 6; } .counter-set-7 { counter-set: col-counter 7; } .counter-set-8 { counter-set: col-counter 8; } .counter-set-9 { counter-set: col-counter 9; } .counter-set-10 { counter-set: col-counter 10; } /* ================= 9.12 Delete Background on col-groups ====================*/ /* ================= ==================================== ====================*/ .col-group.delete-bg .ui-formElement { background-color: transparent !important; } /* ================= 9.13 CHANGE RADIO-CHECK IN VERTICAL -ITEMS ======================*/ /* ================= ========================================= ======================*/ .col-group.vertical-items.radius .radio-container .radio-horizontal .iradio_square-green { margin-right: 0px; border-radius: 50%; } .col-group.vertical-items.radius .radio-container .radio-vertical .iradio_square-green { margin-right: 10px; border-radius: 50%; } /* ================= 9.14 COL-GROUP OUT ======================*/ .col-group .col-group-out { width: 100% !important; flex: 0 0 100% !important; margin-top: 10px !important; margin-bottom: 10px !important; border-bottom: 0 !important; } .col-group .col-group-out.bg { background-color: var(--bgColor) !important; } .col-group .col-group-out .form-group { display: inline-block !important; } .col-group .col-group-out .form-group .radio-container { display: block !important; height: auto; } .col-group .col-group-out .form-group .radio-format { width: 100%; flex: 0 0 100%; justify-content: start; padding-left: 10px; } .col-group .col-group-out .form-group label.input-label { display: inline-block !important; } /* ================= 9.14 CHANGE RADIO-CHECK IN VERTICAL -ITEMS ======================*/ /* ================= ========================================= ======================*/ /* .check-right .radio-format.radio-vertical .icheckbox_square-green { float: right; margin-right: 10%; } .check-right .radio-format.radio-vertical .icheckbox_square-green~label { font-weight: normal !important; font-size: 13px; } .check-right.bold .radio-format.radio-vertical .icheckbox_square-green~label { font-weight: 700 !important; }*/ /* ================= 9.15 AD BORDER BOTTOM TO RADIO-CHECK IN VERTICAL -ITEMS ======================*/ /* ================= ========================================= ======================*/ /* .check-right.br-bottom .radio-format { border-bottom: 1px solid var(--radioBrColor); padding-bottom: 5px; margin: 7px 0 !important; }*/ /* ================= 9.16 AD Tmark and Xmark ======================*/ /* ================= ====================== ======================*/ .col-group-Tmark .image-container img.app-image, .col-group-Xmark .image-container img.app-image { display: none; } .col-group-Tmark .iradio_square-green, .col-group-Xmark .iradio_square-green { opacity: 0; pointer-events: none; } .col-group-Tmark:after, .col-group-Xmark:after { position: absolute; left: 50%; bottom: 5px; transform: translate(-50%, 0%); content: "\f00c"; font-family: "Font Awesome 6 Free", 'FontAwesome'; color: green; display: inline-block; z-index: 1; font-size: 24px; text-rendering: auto; -webkit-font-smoothing: antialiased; } .col-group-Xmark:after { content: "\f00d"; color: red; transform: translate(-50%, 0%); } .col-group.two-items .col-group-Xmark:after { margin-left: 25%; } .col-group.two-items .col-group-Tmark:after { margin-left: -25%; } .col-group .ui-formElement.del-option-1 .radio-container .radio-format:nth-child(1) { visibility: hidden; pointer-events: none; } .col-group .ui-formElement.del-option-2 .radio-container .radio-format:nth-child(2) { visibility: hidden; pointer-events: none; } /* ========================= 10 TABLES ==================================*/ .table-group { position: relative; margin: 5px 10px !important; border: 1px solid var(--bgTableHead) !important; padding: 3px 3px 3px 3px !important; border-radius: 4px; width: auto; overflow-x: auto; } .table-group .ui-formItemsContainer { display: flex; flex-grow: initial; flex-wrap: wrap; margin: 5px 0 0 0; width: 100%; position: relative; min-width: 100%; } .table-group .ui-formItemsContainer .ui-formElement { float: left; clear: none; color: #101010; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; border-bottom: 1px solid #ffffff; padding: 0 10px !important; } .table-group .ui-formItemsContainer .ui-formElement .form-group { padding: 4px 1px !important; height: 100%; display: flex; flex-wrap: wrap; } .table-group .ui-formItemsContainer .bg.ui-formElement .form-group { background-color: var(--bgColor); } .table-group .ui-formItemsContainer .ui-formElement label { margin: 0 !important; } .table-group .ui-formItemsContainer .ui-formElement:first-child { border: 0; } .table-group.one-head .ui-formItemsContainer .ui-formElement:nth-child(1) { background-color: var(--bgTableHead); border: 1px solid #ffffff; color: #ffffff; } .table-group.one-head .ui-formItemsContainer .ui-formElement:nth-child(1) .form-group { align-items: center; justify-content: center; text-align: center; } /* ========================= TABLE TWO ITEMS ==================================*/ /* Convert other elements in header*/ .table-group.two-items .ui-formItemsContainer .ui-formElement:nth-child(1), .table-group.two-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(2) { background-color: var(--bgTableHead); border: 1px solid #ffffff; color: #ffffff; } .table-group.two-items .ui-formItemsContainer .ui-formElement:nth-child(1) .form-group, .table-group.two-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(2) .form-group { justify-content: center; } .table-group.two-items .ui-formItemsContainer .ui-formElement:nth-child(1), .table-group.two-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(2n+1), .table-group.two-items.one-head .ui-formItemsContainer .ui-formElement:nth-child(2n) { width: 60%; flex: 0 0 60%; } .table-group.two-items .ui-formItemsContainer .ui-formElement:nth-child(2), .table-group.two-items .ui-formItemsContainer .ui-formElement:nth-child(2n+2), .table-group.two-items.one-head .ui-formItemsContainer .ui-formElement:nth-child(2n+1) { width: 40%; flex: 0 0 40%; } .table-group.two-items.one-head .ui-formItemsContainer .ui-formElement:nth-child(1) { width: 100%; flex: 0 0 100%; } /* ========================= /END TABLE TWO ITEMS =============================*/ /* ========================= TABLE THREE ITEMS ==================================*/ /* Convert other elements in header*/ .table-group.three-items .ui-formItemsContainer .ui-formElement:nth-child(1), .table-group.three-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(2), .table-group.three-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(3) { background-color: var(--bgTableHead); border: 1px solid #ffffff; color: #ffffff; } .table-group.three-items .ui-formItemsContainer .ui-formElement:nth-child(1) .form-group, .table-group.three-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(2) .form-group, .table-group.three-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(3) .form-group { justify-content: center; } .table-group.three-items .ui-formItemsContainer .ui-formElement { width: 33.33333%; flex: 0 0 33.33333%; } .table-group.three-items.one-head .ui-formItemsContainer .ui-formElement:nth-child(1) { width: 100%; flex: 0 0 100%; } /* ========================= /END TABLE THREE ITEMS ============================*/ /* ========================= TABLE FOUR ITEMS ==================================*/ /* Convert other elements in header*/ .table-group.four-items .ui-formItemsContainer .ui-formElement:nth-child(1), .table-group.four-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(2), .table-group.four-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(3), .table-group.four-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(4) { background-color: var(--bgTableHead); border: 1px solid #ffffff; color: #ffffff; } .table-group.four-items .ui-formItemsContainer .ui-formElement:nth-child(1) .form-group, .table-group.four-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(2) .form-group, .table-group.four-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(3) .form-group, .table-group.four-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(4) .form-group { justify-content: center; } .table-group.four-items .ui-formItemsContainer .ui-formElement { width: 25%; flex: 0 0 25%; } .table-group.four-items.one-head .ui-formItemsContainer .ui-formElement:nth-child(1) { width: 100%; flex: 0 0 100%; } /* ========================= /END TABLE FOUR ITEMS =============================*/ /* ========================= TABLE FIVE ITEMS ==================================*/ /* Convert other elements in header*/ .table-group.five-items .ui-formItemsContainer .ui-formElement:nth-child(1), .table-group.five-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(2), .table-group.five-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(3), .table-group.five-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(4), .table-group.five-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(5) { background-color: var(--bgTableHead); border: 1px solid #ffffff; color: #ffffff; } .table-group.five-items .ui-formItemsContainer .ui-formElement:nth-child(1) .form-group, .table-group.five-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(2) .form-group, .table-group.five-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(3) .form-group, .table-group.five-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(4) .form-group, .table-group.five-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(5) .form-group { justify-content: center; } .table-group.five-items .ui-formItemsContainer .ui-formElement { width: 20%; flex: 0 0 20%; } .table-group.five-items.one-head .ui-formItemsContainer .ui-formElement:nth-child(1) { width: 100%; flex: 0 0 100%; } /* ========================= TABLE SIX ITEMS ==================================*/ /* Convert other elements in header*/ .table-group.six-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(1), .table-group.six-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(2), .table-group.six-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(3), .table-group.six-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(4), .table-group.six-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(5), .table-group.six-items:not(.one-head) .ui-formItemsContainer .ui-formElement:nth-child(6) { background-color: var(--bgTableHead); border: 1px solid #ffffff; color: #ffffff; } .table-group.six-items .ui-formItemsContainer .ui-formElement:nth-child(1) .form-group, .table-group.six-items .ui-formItemsContainer .ui-formElement:nth-child(2) .form-group, .table-group.six-items .ui-formItemsContainer .ui-formElement:nth-child(3) .form-group, .table-group.six-items .ui-formItemsContainer .ui-formElement:nth-child(4) .form-group, .table-group.six-items .ui-formItemsContainer .ui-formElement:nth-child(5) .form-group, .table-group.six-items .ui-formItemsContainer .ui-formElement:nth-child(6) .form-group { justify-content: center; } .table-group.six-items .ui-formItemsContainer .ui-formElement { width: 16.6666667%; flex: 0 0 16.6666667%; } .table-group.six-items.one-head .ui-formItemsContainer .ui-formElement:nth-child(1) { width: 100%; flex: 0 0 100%; } /* ========================= /END TABLE SIX ITEMS ==================================*/ /* ========== TABLE GROUP RESPONSIVE ================= */ @media(max-width:1024px) { .table-group .ui-formItemsContainer { min-width: 950px; } } @media(max-width:768px) { .table-group .ui-formItemsContainer { min-width: 700px; } } @media(max-width:650px) { .table-group .ui-formItemsContainer { min-width: 600px; } } @media(max-width:480px) { .table-group .ui-formItemsContainer { min-width: 400px; } } @media(max-width:320px) { .table-group .ui-formItemsContainer { min-width: 300px; } } /* ========================= 11 LIST GROUP ITEMS ==================================*/ .list-group .ui-formItemsContainer { display: flex; flex-direction: column; padding: 6px 10px 6px 14px; } .list-group .ui-formItemsContainer .ui-formElement { color: #101010; padding: 5px 5px 5px 20px !important; display: list-item !important; } .list-group .ui-formItemsContainer .ui-formElement:before { content: ''; display: block; position: absolute; top: 11px; left: 0px; font-size: 50px; width: 5px; height: 5px; border: 1px solid #000; background-color: #000000; border-width: 5px; border-radius: 100%; } .list-group .ui-formItemsContainer .ui-formElement.check:before { top: 10px; width: 6px; height: 10px; border: solid #15aa05; border-radius: 0; background-color: transparent; border-width: 0 2px 2px 0; transform: rotate(45deg); } .list-group .ui-formItemsContainer .ui-formElement.square:before { top: 11px; border-radius: 2px; height: 5px; border: solid #000; border-width: 5px; } .list-group .ui-formItemsContainer .ui-formElement.info:before, .list-group .ui-formItemsContainer .ui-formElement.cancel:before { content: 'i'; font-size: 18px; top: 7px; left: -4px; color: #02829f; font-weight: bolder; align-items: center; display: flex; justify-content: center; width: 17px; height: 17px; background-color: transparent; border: 0; } .list-group .ui-formItemsContainer .ui-formElement.cancel:before { content: 'x'; font-size: 16px; color: #be0000; } .list-group .ui-formItemsContainer .ui-formElement.arrow:before, .list-group .ui-formItemsContainer .ui-formElement.darrow:before { content: '\2192'; position: absolute; top: 5px; left: -2px; font-size: 18px; color: #000000; font-weight: bolder; align-items: center; display: flex; justify-content: center; width: 10px; height: 17px; border: 0; background-color: transparent; } .list-group .ui-formItemsContainer .ui-formElement.darrow:before { content: "\00BB"; } .list-group .ui-formItemsContainer .ui-formElement.warning:before { content: '!'; position: absolute; font-size: 17px; color: #ff9100; top: 9px; left: -3px; font-weight: bolder; align-items: center; display: flex; justify-content: center; width: 16px; height: 15px; background-color: transparent; border: 0; z-index: 10; border-radius: 0; } .list-group .ui-formItemsContainer .ui-formElement.custom:before { content: '[*]'; font-size: 15px; font-size: 15px; top: 6px; left: -4px; color: #003578; font-weight: bolder; align-items: center; display: flex; justify-content: center; width: 17px; height: 17px; border: 0; background-color: transparent; } /* ===================== 12 HELPERS HEIGHTS AND MARGINS ============================*/ /* ===================== =================== ============================*/ /* =========== 12.1 Heights ============== */ .h0 { height: 0px; line-height: 0; } .h50 > .ui-formItemsContainer, .h50.ui-formElement .form-group { min-height: 50px !important; } .h60 > .ui-formItemsContainer, .h60.ui-formElement .form-group { min-height: 60px !important; } .h70 > .ui-formItemsContainer, .h70.ui-formElement .form-group { min-height: 70px !important; } .h80 > .ui-formItemsContainer, .h80.ui-formElement .form-group { min-height: 80px !important; } .h90 > .ui-formItemsContainer, .h90.ui-formElement .form-group { min-height: 90px !important; } .h100 > .ui-formItemsContainer, .h100.ui-formElement .form-group { min-height: 100px !important; } .h110 > .ui-formItemsContainer, .h110.ui-formElement .form-group { min-height: 110px !important; } .h120 > .ui-formItemsContainer, .h120.ui-formElement .form-group { min-height: 120px !important; } .h130 > .ui-formItemsContainer, .h130.ui-formElement .form-group { min-height: 130px !important; } .h140 > .ui-formItemsContainer, .h140.ui-formElement .form-group { min-height: 140px !important; } .h150 > .ui-formItemsContainer, .h150.ui-formElement .form-group { min-height: 150px !important; } .h160 > .ui-formItemsContainer, .h160.ui-formElement .form-group { min-height: 160px !important; } .h170 > .ui-formItemsContainer, .h170.ui-formElement .form-group { min-height: 170px !important; } .h180 > .ui-formItemsContainer, .h180.ui-formElement .form-group { min-height: 180px !important; } .h190 > .ui-formItemsContainer, .h190.ui-formElement .form-group { min-height: 190px !important; } .h200 > .ui-formItemsContainer, .h200.ui-formElement .form-group { min-height: 200px !important; } .h210 > .ui-formItemsContainer, .h210.ui-formElement .form-group { min-height: 210px !important; } .h220 > .ui-formItemsContainer, .h220.ui-formElement .form-group { min-height: 220px !important; } .h230 > .ui-formItemsContainer, .h230.ui-formElement .form-group { min-height: 230px !important; } .h240 > .ui-formItemsContainer, .h240.ui-formElement .form-group { min-height: 240px !important; } .h250 > .ui-formItemsContainer, .h250.ui-formElement .form-group { min-height: 250px !important; } .h260 > .ui-formItemsContainer, .h260.ui-formElement .form-group { min-height: 260px !important; } .h270 > .ui-formItemsContainer, .h270.ui-formElement .form-group { min-height: 270px !important; } .h280 > .ui-formItemsContainer, .h280.ui-formElement .form-group { min-height: 280px !important; } .h290 > .ui-formItemsContainer, .h290.ui-formElement .form-group { min-height: 290px !important; } .h300 > .ui-formItemsContainer, .h300.ui-formElement .form-group { min-height: 300px !important; } .h310 > .ui-formItemsContainer, .h310.ui-formElement .form-group { min-height: 310px !important; } .h320 > .ui-formItemsContainer, .h320.ui-formElement .form-group { min-height: 320px !important; } .h330 > .ui-formItemsContainer, .h330.ui-formElement .form-group { min-height: 330px !important; } .h340 > .ui-formItemsContainer, .h340.ui-formElement .form-group { min-height: 340px !important; } .h350 > .ui-formItemsContainer, .h350.ui-formElement .form-group { min-height: 350px !important; } .h360 > .ui-formItemsContainer, .h360.ui-formElement .form-group { min-height: 360px !important; } @media (max-width: 950px) { .h50 > .ui-formItemsContainer, .h60 > .ui-formItemsContainer, .h70 > .ui-formItemsContainer, .h80 > .ui-formItemsContainer, .h90 > .ui-formItemsContainer, .h100 > .ui-formItemsContainer, .h110 > .ui-formItemsContainer, .h120 > .ui-formItemsContainer, .h130 > .ui-formItemsContainer, .h140 > .ui-formItemsContainer, .h150 > .ui-formItemsContainer, .h160 > .ui-formItemsContainer, .h170 > .ui-formItemsContainer, .h180 > .ui-formItemsContainer, .h190 > .ui-formItemsContainer, .h200 > .ui-formItemsContainer, .h210 > .ui-formItemsContainer, .h220 > .ui-formItemsContainer, .h230 > .ui-formItemsContainer, .h240 > .ui-formItemsContainer, .h250 > .ui-formItemsContainer, .h260 > .ui-formItemsContainer, .h270 > .ui-formItemsContainer, .h280 > .ui-formItemsContainer, .h290 > .ui-formItemsContainer, .h300 > .ui-formItemsContainer, .h310 > .ui-formItemsContainer, .h320 > .ui-formItemsContainer, .h330 > .ui-formItemsContainer, .h360 > .ui-formItemsContainer { min-height: 0 !important; height: auto !important; } } /* =========== 12.2 Margins ======================= */ .mt0 { margin-top: 0px !important; } .mt5 { margin-top: 5px !important; } .mt10 { margin-top: 10px !important; } .mt15 { margin-top: 15px !important; } .mt20 { margin-top: 20px !important; } .mt22 { margin-top: 22px !important; } .mt25 { margin-top: 25px !important; } .mt28 { margin-top: 28px !important; } .mt30 { margin-top: 30px !important; } .mt35 { margin-top: 35px !important; } .mt40 { margin-top: 40px !important; } .mt50 { margin-top: 50px !important; } .mt60 { margin-top: 60px !important; } .mt70 { margin-top: 70px !important; } .mt80 { margin-top: 80px !important; } .mt-5 { margin-top: -5px !important; } .mt-10 { margin-top: -10px !important; } .mt-15 { margin-top: -15px !important; } .mt-20 { margin-top: -20px !important; } .mt-25 { margin-top: -25px !important; } .mt-30 { margin-top: -30px !important; } .mt-40 { margin-top: -40px !important; } .mt-50 { margin-top: -50px !important; } .mt-60 { margin-top: -60px !important; } .mt-100 { margin-top: -100px !important; } .ml-5 { margin-left: -5px !important; } .ml-10 { margin-left: -10px !important; } .mb0 { margin-bottom: 0px !important; } .mb5 { margin-bottom: 5px !important; } .mb10 { margin-bottom: 10px !important; } .mb15 { margin-bottom: 15px !important; } .mb20 { margin-bottom: 20px !important; } .mb25 { margin-bottom: 25px !important; } .mb30 { margin-bottom: 30px !important; } .mb40 { margin-bottom: 40px !important; } .ml5 { margin-left: 5px; } .ml10 { margin-left: 10px; } .mr10 { margin-right: 10px; } .m0 .ui-formItemsContainer, .m0 .ui-formElement, .m0 .form-group { margin: 0 !important; } @media (max-width:950px) { .mall-sm { margin: 0px !important; } } @media (max-width:480px) { .mall-xs { margin: 0px !important; } } /* =========== 12.3 Paddings ============== */ .pl10 .ui-formItemsContainer, .pl10.ui-formElement { padding-left: 10px !important; } .pl15 .ui-formItemsContainer, .pl15.ui-formElement { padding-left: 15px !important; } .pl20 .ui-formItemsContainer, .pl20.ui-formElement { padding-left: 20px !important; } .pl25 .ui-formItemsContainer, .pl25.ui-formElement { padding-left: 25px !important; } .pr10 .ui-formItemsContainer, .pr10.ui-formElement { padding-right: 10px !important; } .pr15 .ui-formItemsContainer, .pr15.ui-formElement { padding-right: 15px !important; } .pt0 .form-group { padding-top: 0px !important; } .pt5 .form-group { padding-top: 5px !important; } .pt10 .form-group { padding-top: 10px !important; } .pt15 .form-group { padding-top: 15px !important; } .pt20 .form-group { padding-top: 20px !important; } .pt25 .form-group { padding-top: 25px !important; } .pt30 .form-group { padding-top: 30px !important; } .pb0 .form-group { padding-bottom: 0px !important; } .pb5 .form-group, .pb5.ui-formElement { padding-bottom: 5px !important; } .pb10 .form-group { padding-bottom: 10px !important; } .pb15 .form-group { padding-bottom: 15px !important; } .pb20 .form-group { padding-bottom: 20px !important; } .pb25 .form-group { padding-bottom: 25px !important; } .pb30 .form-group { padding-bottom: 30px !important; } .p0 .ui-formItemsContainer, .p0 .ui-formElement, .p0 .form-group { padding: 0 !important; } .p10 .form-group { padding: 10px !important; } .p15 .form-group { padding: 15px !important; } .p20 .form-group { padding: 20px !important; } /* 12.4 Display none area ==========================*/ .display-none { display: none !important; } .image-display-none { display: none !important; } /* 12.5 Hide area ==========================*/ .hide, .hide *, .inhide, .inhide * { height: 0 !important; font-size: 0; opacity: 0; min-height: 0 !important; padding: 0 !important; margin: 0 !important; } .inhide label.system-form-control.input-label { white-space: normal; word-break: break-word; } .inhide-hard, .inhide-hard * { height: 0 !important; font-size: 0; opacity: 0; min-height: 0 !important; padding: 0 !important; margin: 0 !important; display: none !important; border: 0 !important; } /* 12.6 Center =============================*/ .center, .center .form-group, .center .label, .center h4 { text-align: center; justify-content: center; } .align-center { margin-left: auto !important; margin-right: auto !important; clear: both !important; float: initial !important; } .right, .right .form-group { text-align: right; justify-content: end; } .center .system-upload-file-container, .center .filelist ~ div { margin: 0 auto; float: initial; text-align: center !important; } .center .system-upload-file-container .link-container { display: block; margin: 2px auto !important; } .center .uploaded-file-icon { margin: 0 auto; } /* 12.7 Help combo =============================*/ .help .image-container { position: absolute; right: 4px; top: 30px; } .help:hover { opacity: 0.5; transition: all 0.4s ease; cursor: pointer; } /* 12.8 Line =============================*/ .line-separator { min-height: 0; width: calc(100% - 20px); float: none; margin: 0; padding: 0 10px; clear: both; height: 1px; } .line { height: 1px; width: calc(100% - 10px); background-color: transparent; float: none; margin: 5px 5px 30px 5px; border-bottom: 2px dotted #aaaaaa !important; padding: 30px 0 0 0; clear: both; } /* 12.10 Special one group =============================*/ .special-one-group .ui-formItemsContainer { margin-bottom: -190px !important; margin-top: 7px !important; padding-top: 7px !important; } /* 12.12 Radio horizontal distribute =============================*/ .radio-horizontal-distribute2 .radio-horizontal { width: 46%; } .radio-horizontal-distribute3 .radio-horizontal { width: 29%; } .radio-horizontal-distribute4 .radio-horizontal { width: 22%; } .radio-horizontal-distribute5 .radio-horizontal { width: 16%; } @media (max-width:1024px) { .radio-horizontal-distribute3 .radio-horizontal { width: 30%; margin-left: 0% !important; } .radio-horizontal-distribute5 .radio-horizontal { width: 28%; } } @media (max-width:480px) { .radio-horizontal-distribute4 .radio-horizontal { width: 48%; } .radio-horizontal-distribute3 .radio-horizontal { width: 90%; } .radio-horizontal-distribute5 .radio-horizontal { width: 90%; } } /* 12.13 Important Text =============================*/ .important-text label.input-label { background-color: #ff8900; padding: 2px !important; color: #ffffff; } /* =================== 13 Simple FX ======================== */ /* =================== 13.1 FX Border ======================== */ .fx-border .ui-formItemsContainer { border: 1px solid var(--pColor); background: #fff; border-radius: 4px; padding: 4px 4px; margin: 4px 4px; min-height: 0px !important; display: flow-root; border-radius: 8px; } .fx-border.ui-formElement, .fx-border.ui-formElement:hover { border: 1px solid var(--pColor) !important; border-radius: 8px; } /* =================== 13.2 FX Rounded ======================== */ .fx-rounded .ui-formItemsContainer { border-radius: 12px; } .fx-rounded0 .ui-formItemsContainer { border-radius: 0; } /* =================== 13.3 FX Shadow ======================== */ .fx-shadow .ui-formItemsContainer { box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); } /* =================== 13.4 FX Dark ======================== */ .fx-bgdark .ui-formItemsContainer { background-color: #262626; } .fx-bgdark label, .fx-bgdark .input-label, .fx-bfdark .help-block { color: #e7e7e7; } /* =========== 13.5 Validation Active =======================*/ .validation-message { display: inline-block; color: #000000; padding: 0 10px 10px 10px; } .validation-active { border-radius: 5px; z-index: 1; } .validation-background { background-color: #ff0000; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 5px; z-index: -1; -webkit-animation: warning-animation 4s infinite !important; } @-webkit-keyframes warning-animation { 0% { opacity: 0; } 30% { opacity: 0.2; } 70% { opacity: 0.8; } 100% { opacity: 0; } } /* ==================== 13.6 COLLAPSE ===========================*/ /* put fx-collapse in all groups .js-group .js-btn-xxx .js-xxx if click on .js-btn-xxx --> $addClass fx-collapse in .js-group:not(.fx-collapse) if click on .js-btn-xxx --> $removeClass fx-collapse in .js-xxx */ .js-group { position: relative; top: 0; -webkit-animation: collapseOut-animation 1s !important; -moz-animation: collapseOut-animation 1s !important; -o-animation: collapseOut-animation 1s !important; animation: collapseOut-animation 1s !important; } .js-group ~ .line-separator { height: 0px; } .fx-collapse-animate { z-index: 0; padding: 0 !important; margin: 0 !important; max-height: 0; max-width: 0; pointer-events: none; font-size: 0 !important; -webkit-animation: collapse-animation 0.1s !important; -moz-animation: collapse-animation 0.1s !important; -o-animation: collapse-animation 0.1s !important; animation: collapse-animation 0.1s !important; } .fx-collapse { z-index: 0; padding: 0 !important; margin: 0 !important; max-height: 0; max-width: 0; pointer-events: none; font-size: 0 !important; opacity: 0; visibility: hidden; } .fx-collapse * { padding: 0 !important; margin: 0 !important; font-size: 0 !important; max-height: 0; max-width: 0; opacity: 0; visibility: hidden; pointer-events: none; } .fx-collapseOut { z-index: 100; max-height: auto; pointer-events: all; -webkit-animation: collapseOut-animation 0.3s !important; -moz-animation: collapseOut-animation 0.3s !important; -o-animation: collapseOut-animation 0.3s !important; animation: collapseOut-animation 0.3s !important; } /* =========== Collapse animation ==============*/ @-webkit-keyframes collapse-animation { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 0; visibility: hidden; } } @-moz-keyframes collapse-animation { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 0; visibility: hidden; } } @-ms-keyframes collapse-animation { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 0; visibility: hidden; } } @-o-keyframes collapse-animation { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 0; visibility: hidden; } } @keyframes collapse-animation { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 0; visibility: hidden; } } /* =========== CollapseOut animation ==============*/ @-webkit-keyframes collapseOut-animation { 0% { opacity: 0; visibility: hidden; } 50% { opacity: 0.5; } 100% { opacity: 1; visibility: visible; } } @-moz-keyframes collapseOut-animation { 0% { opacity: 0; visibility: hidden; } 50% { opacity: 0.5; } 100% { opacity: 1; visibility: visible; } } @-ms-keyframes collapseOut-animation { 0% { opacity: 0; visibility: hidden; } 50% { opacity: 0.5; } 100% { opacity: 1; visibility: visible; } } @-o-keyframes collapseOut-animation { 0% { opacity: 0; visibility: hidden; } 50% { opacity: 0.5; } 100% { opacity: 1; visibility: visible; } } @keyframes collapseOut-animation { 0% { opacity: 0; visibility: hidden; } 50% { opacity: 0.5; } 100% { opacity: 1; visibility: visible; } } /* ==================== POSITION ======================= */ .p-absolute { position: absolute; } /* ====================== 14 - INPUT SIZE CHARS ===========================*/ /* ====================== ===================== ===========================*/ .i-char3 input { width: 35px; } .i-char4 input { width: 45px; margin-left: 2px; } .i-char5 input { width: 55px; } .i-char6 input { width: 65px; } .i-char7 input { width: 75px; } .i-char8 input { width: 85px; } .i-char9 input { width: 95px; } .i-char10 input { width: 105px; } .i-char20 input { width: 150px; } .i-char30 input { width: 150px; } .i-char-col-2 input { width: 16.66667%; } .i-char-col-3 input { width: 25%; } .i-char-col-4 input { width: 33.33333%; } .i-char-col-6 input { width: 50%; } .i-char15 .input-group { min-width: auto !important; width: 150px; } .i-char20 .input-group { min-width: auto !important; width: 180px; } .i-char30 .input-group { min-width: auto !important; width: 220px; } .i-select150 .s-custom, .i-select150 select, .i-select150 span.select2.select2-container { max-width: 150px; display: block; } .i-select200 .s-custom, .i-select200 select, .i-select200 span.select2.select2-container { max-width: 200px; display: block; } .i-select250 .s-custom, .i-select250 select, .i-select250 span.select2.select2-container { max-width: 250px; display: block; } .i-select300 .s-custom, .i-select300 select, .i-select300 span.select2.select2-container { max-width: 300px; display: block; } .i-select350 .s-custom, .i-select350 select, .i-select350 span.select2.select2-container { max-width: 350px; display: block; } .i-select400 .s-custom, .i-select400 select, .i-select400 span.select2.select2-container { max-width: 400px; display: block; } .i-select450 .s-custom, .i-select450 select, .i-select450 span.select2.select2-container { max-width: 450px; display: block; } .sep-left, .flex-group .ui-formItemsContainer .ui-formElement.sep-left { padding: 3px 3px 3px 4px !important; } .sep-left:before { content: "-"; position: absolute; top: 24px; bottom: 20px; font-size: 22px; left: -1px; } /* ===================== 18 Flex-group headers =================*/ /* ===================== ======= ===============================*/ .system-area.flex-group.header .ui-formItemsContainer { border: 1px solid var(--borderColor2); width: auto !important; background-color: #ffffff; padding: 0px !important; margin: 5px 7px !important; } .system-area.flex-group.bg.header .ui-formItemsContainer { background-color: var(--bgColor2); } .system-area.flex-group.header .ui-formItemsContainer .ui-formElement:first-child { padding: 0 !important; background-color: var(--bgColor3); margin: 0px !important; width: 100% !important; min-height: 42px; } .system-area.flex-group.header .ui-formItemsContainer .ui-formElement:first-child .form-group { height: 100% } .system-area.flex-group.header .ui-formItemsContainer .ui-formElement:first-child .form-group label { margin: 0 !important; color: var(--pColor); } .system-area.flex-group.header .ui-formItemsContainer .ui-formElement .form-group { padding: 5px 8px; margin-bottom: 0; } .system-area.flex-group.header .ui-formItemsContainer .ui-formElement:first-child label { display: block; font-weight: bold !important; } .system-area.flex-group.header .ui-formItemsContainer .ui-formElement:first-child .form-group { margin: 0; } .system-area.flex-group.header .ui-formItemsContainer .ui-formElement .form-group label > h4 { border-bottom: 0; color: var(--pColor); font-size: 17px; } .system-area.flex-group.header.border-left .ui-formItemsContainer { border-left: 5px solid var(--bgColor2); } .system-area.flex-group.header.border-top .ui-formItemsContainer { border-top: 5px solid var(--bgColor2); } .system-area.flex-group.header.border-left .ui-formItemsContainer .ui-formElement:first-child, .system-area.flex-group.header.border-top .ui-formItemsContainer .ui-formElement:first-child { padding: 0 !important; background-color: var(--bgColor2); /*border-top: 5px solid #ead2d2;*/ margin: 0px !important; width: 100% !important; } .system-area.flex-group.header.border-left .ui-formItemsContainer .ui-formElement:first-child .form-group, .system-area.flex-group.header.border-top .ui-formItemsContainer .ui-formElement:first-child .form-group { margin: 0; border-bottom: 1px solid var(--borderColor3); } /* ===================== 19 RESULTS ============================*/ /* ===================== ======= ===============================*/ .result .ui-formItemsContainer, .result.ui-formElement, .result.ui-formElement:hover { height: auto; text-align: center; border: 2px solid var(--hColor); background-color: var(--resultColor); border-radius: 8px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); margin: 10px auto; max-width: 100%; position: relative; } .result.ui-formElement, .result.ui-formElement:hover { box-shadow: none; } .result .ui-formItemsContainer .ui-formElement .form-group.result-field label.text-elements[data-type="resultField"], .result.ui-formElement .form-group.result-field label.text-elements[data-type="resultField"] { margin-top: 15px; margin-bottom: 15px; color: var(--pColor); } .result .ui-formItemsContainer .ui-formElement .form-group.result-field label.input-label { margin-bottom: 0; } .result .gradient-control { margin: 0px auto 20px auto; position: relative; } .result .result-no, .result .result-high { position: absolute; z-index: 100; bottom: 125px; width: 40%; left: 5%; text-align: left; } .result .result-no label, .result .result-high label { font-size: 13px !important; color: #404040 !important; border: 0 !important; } .result .result-high { right: 5%; left: initial; text-align: right; } .result.small-gradient .gradient-control-gradient { height: 20px; } .result.no-lines-gradient .gradient-control-line-left, .result.no-lines-gradient .gradient-control-line-right { background-color: transparent; } .result.small-gradient.no-arrow .gradient-control-arrow-down { display: none; } .result.small-gradient.no-arrow .gradient-control-arrow-stick { background-color: var(--pColor); height: 100%; width: 20px; border-radius: 50%; transform: translate(-45%, 0); } @media (max-width:480px) { .result .result-no label, .result .result-high label { font-size: 12px !important; } } /* ================ Gradient Control ================ */ .gradient-control-pointer { z-index: 3; } .gradient-control-gradient, .gradient-control-line-right, .gradient-control-line-left { height: 80px; } .gradient-control-gradient { background: -webkit-linear-gradient(left, rgba(250, 79, 79, 1) 0%, rgba(247, 210, 99, 1) 50%, rgba(83, 219, 95, 1) 100%); background: -o-linear-gradient(left, rgba(250, 79, 79, 1) 0%, rgba(247, 210, 99, 1) 50%, rgba(83, 219, 95, 1) 100%); background: linear-gradient(to right, rgba(250, 79, 79, 1) 0%, rgba(247, 210, 99, 1) 50%, rgba(83, 219, 95, 1) 100%); } .reverse-gradient .gradient-control-line-left, .reverse .gradient-control-line-left { background-color: rgba(250, 79, 79, 1); } .reverse-gradient .gradient-control-line-right, .reverse .gradient-control-line-right { background-color: rgba(83, 219, 95, 1); } .reverse-gradient .gradient-control-gradient, .reverse .gradient-control-gradient { background: linear-gradient(to left, rgba(83, 219, 95, 1) 0%, rgba(247, 210, 99, 1) 50%, rgba(250, 79, 79, 1) 100%); } .gradient-control-numbers label { font-weight: bold; text-align: center; font-size: 16px; display: inline-block; } .g3 .gradient-control-arrow-down::after { content: 'Your value is here'; font-size: 13px; display: block; z-index: 1000; min-width: 164px; border: 3px solid #0F0; border-radius: 6px; padding: 6px; margin-left: -82px; top: 24px; background-color: rgba(255, 255, 255, 0.9); text-align: center; position: relative; font-weight: bold; } .langde .g3 .gradient-control-arrow-down::after { content: 'Ihr Wert ist hier'; } .g3 .gradient-control-gradient::before { content: '**2.8'; border-left: 2px solid #222; height: 65px; position: absolute; top: 15%; padding-left: 5px; left: 69%; } .g3 .gradient-control-gradient::after { content: '*2.5'; border-left: 2px solid #222; height: 65px; position: absolute; top: 15%; padding-left: 5px; left: 62%; } @media(max-width:480px) { .gradient-control { width: 100%; padding: 10px 0px !important; } .gradient-control-numbers label { font-size: 12px; } } /* ================= 21.1 Hide code center user =====================*/ .header-info-row .ui-formElement.i-site .form-group .help-block { z-index: -1; opacity: 0; position: absolute; } /* ================= 21.2 Hide vaalidation list =====================*/ .validations-list-container .validation-item { z-index: -1; opacity: 0; position: absolute; } /* ============ 23 Docs download page =================*/ .sec-logo { margin-bottom: 60px !important; } @media(max-width:1024px) { .sec-logo { margin-bottom: 10px !important; } } .sec-logo .image-container { text-align: left; } .sec-logo img.image.app-image { max-width: 190px; } /* ============== 24 Image Picker Selector ============== */ .image-picker .ui-formItemsContainer { border-radius: 8px; border: 2px solid var(--pColor); background: #fff; border-radius: 4px; padding: 3px 6px; margin: 5px 1px; display: flow-root; box-shadow: 4px 4px 4px rgb(0 0 0 / 20%); } .image-picker ul.thumbnails.image_picker_selector { min-height: 100px; max-height: 215px; overflow: hidden; padding: 10px 0 10px 0; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; } .image-picker.four-items ul.thumbnails.image_picker_selector li { width: 25%; flex: 0 0 25%; } .image-picker.five-items ul.thumbnails.image_picker_selector li { width: 20%; flex: 0 0 20%; } .image-picker .ui-formItemsContainer ul.thumbnails.image_picker_selector li { margin: 0; cursor: pointer; } .image-picker ul.thumbnails.image_picker_selector li .thumbnail { padding: 10px; width: 100%; margin: auto; max-width: 60%; border-radius: 6px; } .image-picker ul.thumbnails.image_picker_selector li .thumbnail img { border: 10px solid #fff; max-height: 150px; } .image-picker ul.thumbnails.image_picker_selector li .thumbnail:hover { background-color: var(--hColor); transition: all 0.4s ease; } .image-picker ul.thumbnails.image_picker_selector li .thumbnail.selected { background-color: var(--selColor); transition: all 0.4s ease; } @media(max-width:480px) { .image-picker ul.thumbnails.image_picker_selector { justify-content: center; } .image-picker.eleven-items .ui-formItemsContainer ul.thumbnails.image_picker_selector li { width: 33.3333% !important; margin-bottom: 10px; } } /* ================== 25 IMAGE MAP =========================*/ /* Title for imagemap */ .imageMap-area label { display: flex; width: 70% !important; margin: 10px auto 0px auto !important; } .imageMap-area label strong, .imageMap-area label u { display: inline-block; width: 50%; font-size: 20px; text-decoration: none; font-weight: 600; color: var(--titleColor); flex: 0 0 50%; justify-content: center; text-align: center; } /*============ 25 IMAGE MAP =========================*/ .image-map-container { transform: scale(1); } .image-map-container, .image-map-container > div, .image-map-container > div .mapster_el.image-map-image, .image-map-container > div canvas { display: block; position: relative; padding: 0px; opacity: 1 !important; margin: 0 auto !important; } .image-map-container { overflow-x: hidden !important; } @media (max-width:1024px) { .image-map-container > div { transform: scale(0.75) translate(0%, 0); margin: -50px auto -50px auto !important; } } @media (max-width:768px) { .image-map-container > div { transform: scale(0.75) translate(-17%, 0); margin: -80px auto -60px auto !important; } } @media (max-width:700px) { .image-map-container > div { transform: scale(0.6) translate(-30%, 0); margin: -120px auto -110px auto !important; } } @media (max-width:480px) { .image-map-container > div { transform: scale(0.39) translate(-78%, 0); margin: -190px 0 -180px 0 !important; } } @media (max-width:375px) { .image-map-container > div { transform: scale(0.34) translate(-94%, 0); margin: -190px 0 -180px 0 !important; } } /* ====================== 29 Hidden elements =========================*/ /* Delete space in area-hidden and element-hidden*/ .element-hidden { padding: 0 !important; margin: 0 !important; min-height: 0 !important; } .area-hidden .ui-formItemsContainer { padding: 0 !important; margin: 0 !important; min-height: 0 !important; } /* =================== 30 BODYMAP SKIN =================== */ .s4w-bodymap.bm-wrapper .bodymap { border: 1px solid var(--pColor) !important; } .s4w-bodymap.bm-wrapper .bodymap .controls { border-left: 1px solid var(--pColor) !important; } .s4w-bodymap.bm-wrapper .btn-bm, .s4w-bodymap.bm-wrapper .btn-bms { background: var(--pColor); } .s4w-bodymap.bm-wrapper .btn-bm:hover, .s4w-bodymap.bm-wrapper .btn-bms:hover { background: var(--hColor); } .s4w-bodymap.bm-wrapper .custom-file-input-wrapper:hover { background: var(--hColor) !important; border: 2px solid var(--hColor) !important; transition: all 0.2s ease; outline: none; } .s4w-bodymap.bm-wrapper .custom-file-input-wrapper { background: var(--pColor) !important; border: 2px solid var(--pColor) !important; } .s4w-bodymap.bm-wrapper input[type=range]::-webkit-slider-thumb { background: var(--pColor) !important; } .s4w-bodymap.bm-wrapper .confirm-screen-btn-group { border: 1px solid var(--pColor) !important; } .s4w-bodymap.bm-wrapper .confirm-screen-btn-group .btn-yes, .s4w-bodymap.bm-wrapper .confirm-screen-btn-group .btn-no { background-color: var(--pColor) !important; } .s4w-bodymap.bm-wrapper .bodymap .bodymap-inner .help-screen { padding: 10px; width: 82% !important; position: absolute; top: 2%; transform: translate(-57%, 0) !important; } @media(max-width:480px) { .body-map-area .ui-formItemsContainer { margin: 3px 0px !important; padding: 5px 0px !important; } .body-map-area .ui-formItemsContainer .ui-formElement { padding: 3px 0px 3px 0px !important; } .s4w-bodymap.bm-wrapper .controls .bm-section label.sm-label { word-break: break-word; } .s4w-bodymap.bm-wrapper .grid-levels, .s4w-bodymap.bm-wrapper .grid-levels__levels { max-width: 200px; z-index: 1; } .s4w-bodymap.bm-wrapper .grid-levels__levels div { width: 10%; } /* ============= BODYMAP RESPONSIVE 480PX 1 BAR ==================*/ .s4w-bodymap.bm-wrapper .bodymap .controls .controls-col-6 { width: 100%; } .s4w-bodymap.bm-wrapper .bodymap .controls { width: 55px !important; } .s4w-bodymap.bm-wrapper .bodymap .bodymap-inner { width: calc(100% - 55px) !important; top: 0%; padding: 10px 0; } /* ============= BODYMAP RESPONSIVE 480PX HELP ==================*/ .s4w-bodymap.bm-wrapper .bodymap .bodymap-inner .help-screen { padding: 10px 0; width: 84% !important; max-height: 498px; overflow-y: auto; overflow-x: hidden; top: 0 !important; border-radius: 4px !important; left: calc(50% - 27px) !important; transform: translate(-50%, 0px) !important; } .s4w-bodymap.bm-wrapper .bodymap .bodymap-inner .help-screen .col-xs-4 { width: 33.3333333%; flex: 0 0 33.3333333%; float: left; clear: none; } .s4w-bodymap.bm-wrapper .bodymap .help-screen .title { margin-top: 10px; } } /* ====================== 30 DATA Monitor =========================*/ /* Query buttons === */ .query-btns-container { position: relative; width: auto; max-height: 32px; display: inline-flex; flex-direction: row; transform: translate(0%, 0px); left: 0%; padding: 2px; border-radius: 2px; transition: all 0.3s ease; background-color: #ffffff75; border: 1px dotted #b8b8b8; } .save-btns-container { display: flex; justify-content: end; } .save-btns-container .btn-primary, .save-btns-container .btn-info { border-radius: 4px; margin: 3px 0 2px 5px; display: flex; justify-content: center; align-items: center; font-weight: 700; padding: 4px 10px; } .visit-title div.query-btns-container { flex-direction: row; left: 0; float: right; margin: 0px 0 -30px 0; z-index: 1; max-width: 115px; background-color: #00000000; border: 1px dotted #ffffff; } .query-btns-container .btn.bdm { word-break: normal; width: 28px; min-width: 28px; min-height: 26px; background-color: #1ab394; color: #ffffff; height: 26px; display: flex; justify-content: center; align-items: center; margin: 0 3px 0 3px; } .query-btns-container .btn.bdm.btn-warning { width: 28px; min-width: 28px; min-height: 26px; height: 26px; background-color: #f8ac59; border-color: #f8ac59; } .query-btns-container .btn.bdm:hover { background-color: #06b6cb; transition: all 0.3s ease; } .query-btns-container .btn.bdm i { pointer-events: none; } .visit-title div.query-btns-container .btn.bdm { width: 26px; min-width: 26px; height: 24px; display: flex; margin: 0 1px 0 1px; } .query-btns-container .btn.bdm .fa { margin: 0px; font-size: 15px; } .visit-title .query-btns-container .btn.bdm .fa { margin: 0px; font-size: 14px; } /* fix position buttons data monitor in col-group */ .col-group div.query-btns-container { left: -40px; top: 0; z-index: 5; position: absolute; } /* Delete data monitor buttons info-row*/ .header-info-row div.query-btns-container { display: none; } /* Normal popover === */ .popover { z-index: 200; } .popover-body { padding: 8px 15px 15px 15px; } .popover-section { padding-bottom: 10px; margin-bottom: 10px; } .popover-title-section { color: var(--pColor); font-size: 15px; padding: 0 0 5px 0; } .popover-item-title { font-size: 13px; } .popover-item-bold { font-weight: bold; } .popover-section-separator { border-bottom: 1px dashed #808080; } .popover-image-button{ --bs-popover-max-width: 100%; } .popover-image { max-width: 500px; max-height: 500px; } /* Fix max size for mobile*/ @media(max-width:480px) { .popover { max-width: 320px; } } /* ============== System-area-button group =============*/ .system-area-button .popover-button { position: relative; width: auto; padding: 7px 20px; padding-right: 20px; min-width: 50px; background-color: var(--titleColor); border-color: var(--titleColor); border-radius: 5px !important; font-size: 13px; font-weight: bold; margin: 5px; } .system-area-button .popover-button.area-button { position: relative; width: auto; padding: 7px 30px 7px 20px; } .system-area-button .popover-button.area-button:before { content: '\f107'; font-family: 'Font Awesome 6 Free', 'FontAwesome'; height: 20px; position: absolute; font-size: 19px; color: #ffffff; top: 4px; right: 10px; width: 11px; cursor: pointer; background-color: transparent; } /* ============== Popover Start new row ========== */ .start-row-mirror { } /* Need put in the first element of new row */ .system-area-button .flex-break { border-top: 1px dashed #ababab; } /* ============== Popover =============*/ .popover.popover-large { --bs-popover-max-width: 850px; --bs-popover-arrow-border: var(--bs-popover-border-color); max-width: var(--bs-popover-max-width); font-family: var(--bs-font-sans-serif); font-size: var(--bs-popover-font-size); box-shadow: 3px 3px 5px rgba(0,0,0,0.1); } /* ============== Popover header =============*/ .popover-header { font-size: var(--bs-popover-header-font-size); color: var(--bs-popover-header-color); background-color: var(--bgColor); margin: 0; border-bottom: var(--bs-popover-border-width) solid var(--pColor); } /* ============== Fix popover arrow =============*/ .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after { border-bottom-color: var(--bgColor) !important; } /* ============== Popover Body / FormElement Mirror Body =============*/ .popover-body { padding: 8px 15px 15px 15px; display: flex; flex-wrap: wrap; width: 100%; } .popover-image-button .popover-body { padding: 15px 15px 15px 15px; } .popover-body div.element-visible, .popover-body div.element-visible:hover { border-bottom: 1px dotted var(--cgColor70); } .popover-body .ui-formItemsContainer { display: flex; flex-wrap: wrap; width: 100% } .popover-body .element-hidden { display: none; } /* ====== Change size elements for complete row space ========= */ .popover-body .ui-formElement.element-visible:not(.col-12) { flex-grow: 1; flex-shrink: 1; } .popover-body .ui-formElement .radio-format-tooltip:hover:after, .popover-body .ui-formElement .radio-format-tooltip:hover:before { content: none; } .popover-body .icheckbox_square-green { top: 2px; } .popover-body .iradio_square-green { top: 2px; } .popover-body .visit-version { } .popover-body .mirror-visit-label, .formElement-mirror .mirror-visit-label { font-size: 12px; color: #505050; font-weight: 400; } .popover-body .mirror-version-label, .formElement-mirror .mirror-version-label { font-size: 10px; color: #505050; font-weight: 400; } .popover-body .date-answered label, .formElement-mirror .date-answered label { font-size: 11px; margin-bottom: 8px; border-bottom: 1px dotted #dedede; } .popover-body .select2 { margin-bottom: 5px; } .formElement-mirror.bg .visit-version { background-color: var(--bgColor); padding: 5px 8px 2px 8px; } .formElement-mirror .result-field { text-align: center; border: 2px solid var(--hColor); background-color: var(--resultColor); border-radius: 8px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); margin: 10px; } .formElement-mirror .result-field label { margin-bottom: 10px; } /* =================== Mirror Element fake ===================*/ .formElement-mirror button.mirror-button, .formElement-mirror button.mirror-button:not(:focus), .formElement-mirror button.mirror-button:focus { background-color: var(--titleColor); border-color: var(--titleColor); color: #FFFFFF; transition: all 0.3s ease; margin-bottom: 15px; position: relative; border-radius: 6px; width: auto; padding-left: 20px; padding-right: 20px; min-width: 50px; white-space: normal; margin-left: -8px; margin-top: -5px; } .formElement-mirror button.mirror-button ~ .popover { margin-left: -8px; margin-top: 2px; } .formElement-mirror button.mirror-button:hover, .formElement-mirror button.mirror-button:active { color: #fff; background-color: var(--hColor); border-color: var(--hColor); transition: all 0.3s ease; } /* ============ Mirror Pop =============*/ .mirror-popover .popover-title { background-color: #909090; color: #fff; } .mirror-popover .radio-container .radio-format { display: flex; } .mirror-popover .radio-container.group-horizontal { display: flex !important; flex-direction: row; } .mirror-popover .radio-container.group-horizontal .radio-format { margin-right: 25px; } .mirror-popover .radio-container label.option-label { margin-left: 8px; } .mirror-popover .visit-version label, .formElement-mirror .visit-version label { font-weight: bold !important; } /* ========= DIFFERENT ELEMENT ============= */ .formElement-differentElement { background-color: #f5f5f5; border-radius: 4px; padding: 5px !important; position: relative; height: auto; visibility: visible; max-height: 500px; opacity: 1; transition: max-height 0.4s ease-in, opacity 1s ease; } .bg2 .formElement-differentElement { background-color: #f5f5f5; } .bg2.system-area .ui-formItemsContainer .formElement-differentElement .form-group { background-color: #f5f5f5; } .previous-element-group { border-radius: 4px; } .previous-element-group .ui-formItemsContainer { display: flex; flex-wrap: wrap; } .js-btn { font-size: 20px; background-color: var(--bgColor3); color: #5c5f60; z-index: 10; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; top: -3px; font-style: italic; left: 0; border-radius: 4px; cursor: pointer; transition: all 0.4s ease; } .js-btn a { cursor: pointer; width: 100%; height: 100%; display: block; } .js-btn .form-group { display: block; cursor: pointer; width: 100%; text-align: center; padding: 0 !important; } .js-btn .form-group label { font-weight: 700 !important; font-size: 19px; padding-top: 0; cursor: pointer; } .js-btn:hover { opacity: 0.7; transition: all 0.4s ease; } .formElement-differentElement.collapseOut { visibility: hidden; max-height: 0; padding-left: 15px; opacity: 0; background-color: #f5f5f5; position: absolute; transition: opacity 0.4s ease, max-height 0.2s ease-out; } @media(max-width:480px) { .js-btn-element-show { position: relative; left: 0; top: -5px; } } /* ======================= DEV HELPERS ========================= */ .dev-help .wrapper, .dev-help .header-bar, .dev-help .navbar-header, .dev-help .header-menu, .dev-help .nav.navbar-user, .dev-help .navbar-collapse, .dev-help .icon-mobile-nav { border: 1px dashed #505050 !important; } .dev-help .ui-pageContainer, .dev-help .row, .dev-help .fb-form_title, .dev-help .fb-form_content { border: 1px dotted #ff0000 !important; } .dev-help .system-area, .dev-help .ui-formItemsContainer, .dev-help .ui-formElement, .dev-help .form-group { border: 1px solid #505050 !important; } .dev-help .system-area { border-color: crimson !important; } .dev-help .ui-formItemsContainer { border-color: chartreuse !important; } .dev-help .ui-formElement { border-color: blueviolet !important; } .dev-help .form-group { border-color: blue !important; } /* ======================= "DEFAULT" THEME =============================== */ :root { --bs-font-sans-serif: "Noto Sans", sans-serif; --fo-menu-user-font-size: 14px; --fo-menu-font-size: 14px; --fo-body-font-size: 13px; --fo-body-font-size-small: 12px; --pColor: #707070; /* Principal Color */ --headBgColor: #ffffff; /* Header Color */ --headBrColor: #505050; /* border bottom Color*/ /* Navigation page */ --navbgRevColor: #f00; /* Background reverse nav Color */ --navColor: #303030; /* nav no links foreground Color */ --navLinkColor: #000; /* nav links foreground Color */ --bgNavLinkColor: transparent; /* nav links background Color */ --navLinkHoverColor: #ffffff; /* nav links Hover foreground Color */ --bgNavLinkHoverColor: #303030; /* nav links Hover background Color */ /* Navigation form */ --navbgColor: transparent; /* Background nav Color */ --navFormColor: #ffffff; /* Navigation Form foreground color buttons */ --navFormBgColor: #707070; /* Navigation Form background color buttons */ --navFormCurrentColor: #ffffff; /* Navigation Form current foreground color*/ --navFormBgCurrentColor: #303030; /* Navigation Form current background color */ --selColor: #303030; /* Select Color */ --hColor: #a9a4a4; /* Hover Color */ --bgDataTime: #707070; /* Data time picker */ /* Visit Bar */ --visitBgColor: #7e7e7e; /* visit bgColor */ --visitBgColor2: #606060; /* info-row */ --labelColor: #909090; /* Label color */ --titleColor: #101010; /* Input border color */ --inputBrColor: #707070; /* Input border color */ --inputBrHoverColor: #00755c; /* input hover Color */ --inputBrSelectColor: #00755c; /* input select Color */ --inputBgColor: #ffffff; /* Input bg color */ --radioBrColor: #707070; /* Radio and check Color border/background selected */ --radioBgColor: #ffffff; /* Radio and check Color background normal */ --radioBrHoverColor: #00755c; /* Radio and check Color border/background selected */ --resultColor: #909090; /* Radio and check Color background normal */ --bgColor: #ececec; /* Background Color */ --bgColor2: #dedede; /* Background Color 2 flex-groups */ --bgColor3: #cdcdcd; /* Background Color 3 flex-groups headers*/ --borderColor2: #707070; /* Special border color flex-groups */ /* Col-groups */ --bgCGHead: #606060; /* Background Color Head in Col-groups */ --fgCGHead: #ffffff; /* Foreground Color Head in Col-groups */ --brCGColor: #707070; /* Border color group */ --bgColorCG: #ededed; /* Background Color on Col-groups */ --bgColorCG2: #cdcdcd; /* Background Color on Col-groups */ /* Table-groups */ --bgTableHead: #2c2c2c; /* Background Color Head in Col-groups */ --helpBlockColor: slategray; /* Color help block */ /* Gradient colors for Col-groups */ --cgColor25: rgba(20, 20, 20, 0.25); --cgColor40: rgba(20, 20, 20, 0.40); --cgColor55: rgba(20, 20, 20, 0.55); --cgColor70: rgba(20, 20, 20, 0.70); --cgColor85: rgba(20, 20, 20, 0.85); --cgColor100: rgba(20, 20, 20, 1); /* Gradient colors for gradient slider */ --gradientColor10: rgba(255, 41, 0, 0.10); --gradientColor20: rgba(255, 41, 0, 0.20); --gradientColor30: rgba(255, 41, 0, 0.30); --gradientColor40: rgba(255, 41, 0, 0.40); --gradientColor50: rgba(255, 41, 0, 0.50); --gradientColor60: rgba(255, 41, 0, 0.60); --gradientColor70: rgba(255, 41, 0, 0.70); --gradientColor80: rgba(255, 41, 0, 0.80); --gradientColor90: rgba(255, 41, 0, 0.90); --gradientColor100: rgb(218, 36, 0); } /* HACK Iphone/Ipad delete zoom input when open virtual keyboard min 16px */ /*@media not all and (min-resolution:.001dpcm) {*/ @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) { .ui-pageContainer .system-area:not(.visit-title) select, .ui-pageContainer .system-area:not(.header-info-row) select, .ui-pageContainer .system-area:not(.visit-title) textarea, .ui-pageContainer .system-area:not(.header-info-row) textarea, .ui-pageContainer .system-area:not(.visit-title) input:not(.btn), .ui-pageContainer .system-area:not(.header-info-row) input:not(.btn), .ui-pageContainer .system-area:not(.visit-title) input:not(.btn):focus, .ui-pageContainer .system-area:not(.header-info-row) input:not(.btn):focus { font-size: 16px !important; } .datecustom-month { max-width: 85px; } .input-group.date .input-group-text { cursor: pointer; height: 37px; } .select2-selection select2-selection--multiple::after { margin-top: 6px; } .ui-pageContainer .visit-title select, .ui-pageContainer .visit-title input, .ui-pageContainer .visit-title input:focus, .ui-pageContainer .header-info-row select, .ui-pageContainer .header-info-row input:not(.btn), .ui-pageContainer .header-info-row input:not(.btn):focus { font-size: 13px !important; height: 24px !important; } } /* ============== ARABIC LANGUAGE ============== */ /* ========= FONT VARS =========== */ html[dir="rtl"] { --fo-menu-user-font-size: 14px; --fo-menu-font-size: 17px; --fo-body-font-size: 18px; } /* ========= LANGUAJE SELECTOR ========== */ html[dir="rtl"] .public.bt5 .navbar-user .navbar-right > li.dropdown { margin-top: 3px; } html[dir="rtl"] .public.bt5 .navbar-right > li.dropdown a { padding: 5px 5px; } html[dir="rtl"] .public.bt5 .navbar-user .navbar-right > li.remaining-time { margin-top: 0px; } html[dir="rtl"] .public.bt5 .navbar-user .nav > li.dropdown ul.dropdown-menu li img { left: 6px; margin-top: 1px; } html[dir="rtl"] .public.bt5 .navbar-user .navbar-right > li .dropdown-toggle { font-size: 13px; } html[dir="rtl"] .public.bt5 .navbar-user .navbar-right > li img { left: 11px; top: 0; } html[dir="rtl"] .public.bt5 .nav.navbar-right > li .dropdown-toggle::after { margin-right: -33px; color: var(--navLinkColor); } /* ========= REQUIRED ========== */ html[dir="rtl"] i.required, html[dir="rtl"] .date-input-required { float: right; margin: -10px -10px 0 0; } html[dir="rtl"] label.input-label i.required { float: left; margin: 0; } /* ========= SELECT ========== */ html[dir="rtl"] .s-custom::after, html[dir="rtl"] .chosen-container .chosen-single::after, html[dir="rtl"] .select2-selection.select2-selection--multiple::after, html[dir="rtl"] .select2-selection.select2-selection--single::after { right: auto; left: 10px; top: 8px; } /* ========= RADIO AND CHECKBOX ========== */ html[dir="rtl"] .iradio_square-green, html[dir="rtl"] .icheckbox_square-green { float: right; margin-left: 10px; } html[dir="rtl"] .iradio_square-green:after { margin-top: 0px; } html[dir="rtl"] .col-group .iradio_square-green { margin-left: 0; } html[dir="rtl"] .col-group.col-line-items .radio-format { border-left: 0; border-right: 1px solid var(--brCGColor); } html[dir="rtl"] .icheckbox_square-green.checked:after { right: 0; } /* =============== BODYMAP =====================*/ html[dir="rtl"] .s4w-bodymap.bm-wrapper .bodymap .bodymap-inner { float: left; } /* =============== TEXT DANGER =====================*/ html[dir="rtl"] .text-danger { right: 6px; } html[dir="rtl"] input.input-validation-error ~ .text-danger span:before { left: 0; right: 90% } html[dir="rtl"] .text-danger > span:after { right: 5%; } /* =============== SLIDER CONTAINER =====================*/ html[dir="rtl"] .slider-container .noUi-horizontal .noUi-handle { top: 8px; left: 6px; } html[dir="rtl"] .slider100.startBefore.startZero .slider-container .noUi-pips-horizontal .noUi-value:nth-child(2)::after { font-size: 13px; transform: translate(-1%,-35px); } html[dir="rtl"] .slider100.startBefore.startZero .slider-container .noUi-pips-horizontal::after { left: 99%; } html[dir="rtl"] .slider-container .noUi-handle.noUi-handle-lower[aria-valuetext="-0.1"] > .noUi-tooltip::before, html[dir="rtl"] .slider-container .noUi-handle.noUi-handle-lower[aria-valuetext="-1"] > .noUi-tooltip::before, html[dir="rtl"] .slider-container .noUi-handle.noUi-handle-lower[aria-valuetext="-1.00"] > .noUi-tooltip::before, html[dir="rtl"] .startZero .slider-container .noUi-handle.noUi-handle-lower[aria-valuenow="0.0"] > .noUi-tooltip::before, html[dir="rtl"] .startOne .slider-container .noUi-handle.noUi-handle-lower[aria-valuetext="0"] > .noUi-tooltip::before { transform: rotate(180deg); } /* =============== COLS FORMELEMENT =====================*/ html[dir="rtl"] .col-0.ui-formElement, html[dir="rtl"] .col-0m.ui-formElement, html[dir="rtl"] .col-1.ui-formElement, html[dir="rtl"] .col-2.ui-formElement, html[dir="rtl"] .col-3.ui-formElement, html[dir="rtl"] .col-4.ui-formElement, html[dir="rtl"] .col-5.ui-formElement, html[dir="rtl"] .col-6.ui-formElement, html[dir="rtl"] .col-7.ui-formElement, html[dir="rtl"] .col-8.ui-formElement, html[dir="rtl"] .col-9.ui-formElement, html[dir="rtl"] .col-10.ui-formElement, html[dir="rtl"] .col-11.ui-formElement, html[dir="rtl"] .col-12.ui-formElement, html[dir="rtl"] .col-1m.ui-formElement, html[dir="rtl"] .col-2m.ui-formElement, html[dir="rtl"] .col-3m.ui-formElement, html[dir="rtl"] .col-4m.ui-formElement, html[dir="rtl"] .col-5m.ui-formElement, html[dir="rtl"] .col-6m.ui-formElement, html[dir="rtl"] .col-7m.ui-formElement, html[dir="rtl"] .col-8m.ui-formElement, html[dir="rtl"] .col-9m.ui-formElement, html[dir="rtl"] .col-10m.ui-formElement, html[dir="rtl"] .col-11m.ui-formElement { float: right; clear: none; } /* ========== COL-GROUP ENUMERATE ============= */ html[dir="rtl"] .col-group.col-enumerate.one-item .ui-formElement:nth-child(2n+3) .form-group label:before, html[dir="rtl"] .col-group.col-enumerate.two-items .ui-formElement:nth-child(2n+4) .form-group label:before, html[dir="rtl"] .col-group.col-enumerate.three-items .ui-formElement:nth-child(2n+5) .form-group label:before, html[dir="rtl"] .col-group.col-enumerate.four-items .ui-formElement:nth-child(2n+6) .form-group label:before, html[dir="rtl"] .col-group.col-enumerate.five-items .ui-formElement:nth-child(2n+7) .form-group label:before, html[dir="rtl"] .col-group.col-enumerate.six-items .ui-formElement:nth-child(2n+8) .form-group label:before, html[dir="rtl"] .col-group.col-enumerate.seven-items .ui-formElement:nth-child(2n+9) .form-group label:before { float: right; display: none; } /* ============ INPUT GROUP DATE ==============*/ html[dir="rtl"] .input-group.date input, html[dir="rtl"] .datecustom-input.datecustom-month.custom-date { font-size: 13px; } html[dir="rtl"] .input-group .input-group-text, html[dir="rtl"] .input-group .input-group-addon { border-left: 1px solid !important; } html[dir="rtl"] .datepicker .next span, html[dir="rtl"] .datepicker .prev span { transform: rotate(180deg); } .custom-date.element-user-data { max-width: 40px; } .hide-qr-button { display: none; } #loading-3d-label { color: #FFFFFF; margin: 10px; }